/* ==========================================================================
   Tamkin Formation — feuille de style partagée
   Reproduction fidèle de Tamkin_Site_Maquette_Visuelle.html (palette B)
   ========================================================================== */

:root{
  --c-primary:#1B3A4B; --c-primary-soft:#2D506B;
  --c-accent:#E0714A; --c-accent-soft:#EBA389;
  --c-bg:#F5F2EC; --c-card:#FFFFFF;
  --c-text:#23201B; --c-text-soft:#5B564C;
  --c-line: rgba(27,58,75,0.14);
  --f-display:'Fraunces', serif; --f-body:'Inter', sans-serif; --f-mono:'IBM Plex Mono', monospace;
  --f-word:'Newsreader', Georgia, serif;
  --max-width: 1040px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--f-body);background:#EDE9E0;color:var(--c-text);}
img{max-width:100%;display:block;}

.site{
  background-color:var(--c-bg);
  background-image:
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size:34px 34px;
  color:var(--c-text);
}
.wrap{max-width:var(--max-width); margin:0 auto; padding:0 24px;}
@media (min-width:700px){ .wrap{padding:0 32px;} }

h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; color:var(--c-primary); margin:0; text-wrap:balance;}
p{margin:0 0 1em;}
ul{padding-left:1.2em;}
a{color:var(--c-primary);}

.skip-link{position:absolute; left:-999px; top:0; background:var(--c-primary); color:#fff; padding:12px 20px; z-index:200;}
.skip-link:focus{left:0;}

/* ==========================================================================
   Per-page accent overrides
   ========================================================================== */
.page-prog2{--c-accent:#2F6FED; --c-accent-soft:#8FB1F5;}
.page-prog3{--c-accent:#3F8A5C; --c-accent-soft:#8FC4A3;}
.page-prog4{--c-accent:#7B5CFA; --c-accent-soft:#B6A6FC;}
.page-qui{--c-accent:#A85D42; --c-accent-soft:#CC9784;}
.page-financer{--c-accent:#D4916B; --c-accent-soft:#EBC2A8;}
.page-qualite{--c-accent:#94513A; --c-accent-soft:#BE8975;}
.page-contact{--c-accent:#C2704F; --c-accent-soft:#DFA88F;}
.page-mentions{--c-accent:#B37A63; --c-accent-soft:#D6B4A3;}
.page-lecons{--c-accent:#B8763E; --c-accent-soft:#DDB48F;}
.page-ressources{--c-accent:#9C6B4F; --c-accent-soft:#C9A48C;}
.page-newsletter{--c-accent:#F2871F; --c-accent-soft:#F7B268;}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes drawRuler{ from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
@keyframes riseIn{ from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes popBlock{ 0%{opacity:0; transform:scaleY(0); transform-origin:bottom;} 70%{transform:scaleY(1.08);} 100%{opacity:1; transform:scaleY(1);} }

.ruler.draw-in{animation:drawRuler 0.9s cubic-bezier(.4,0,.2,1) both;}
.logo-mark rect{animation:popBlock .5s cubic-bezier(.34,1.56,.64,1) both;}
.logo-mark rect:nth-child(1){animation-delay:.05s;}
.logo-mark rect:nth-child(2){animation-delay:.15s;}
.logo-mark rect:nth-child(3){animation-delay:.25s;}
.logo-mark rect:nth-child(4){animation-delay:.35s;}

.hero-anim > *{animation:riseIn .6s cubic-bezier(.16,1,.3,1) both;}
.hero-anim .eyebrow{animation-delay:.05s;}
.hero-anim .hero-title{animation-delay:.15s;}
.hero-anim .hero-sub{animation-delay:.28s;}
.hero-anim .cta-row, .hero-anim .badges-row{animation-delay:.4s;}

.rise-on-scroll{opacity:0; transform:translateY(28px);}
.rise-on-scroll.in-view{animation:riseIn .55s cubic-bezier(.34,1.15,.64,1) both;}
.prog-grid .prog-card:nth-child(1).in-view{animation-delay:0s;}
.prog-grid .prog-card:nth-child(2).in-view{animation-delay:.1s;}
.prog-grid .prog-card:nth-child(3).in-view{animation-delay:.2s;}
.prog-grid .prog-card:nth-child(4).in-view{animation-delay:.3s;}

.js-observe-children > li{opacity:0; transform:translateY(20px);}
.js-observe-children.in-view > li{animation:riseIn .5s cubic-bezier(.34,1.15,.64,1) both;}
.js-observe-children.in-view > li:nth-child(1){animation-delay:0s;}
.js-observe-children.in-view > li:nth-child(2){animation-delay:.06s;}
.js-observe-children.in-view > li:nth-child(3){animation-delay:.12s;}
.js-observe-children.in-view > li:nth-child(4){animation-delay:.18s;}
.js-observe-children.in-view > li:nth-child(5){animation-delay:.24s;}
.js-observe-children.in-view > li:nth-child(6){animation-delay:.3s;}
.js-observe-children.in-view > li:nth-child(7){animation-delay:.36s;}

@media (prefers-reduced-motion: reduce){
  .ruler.draw-in, .logo-mark rect, .hero-anim > *, .rise-on-scroll{animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important;}
  .js-observe-children > li{opacity:1 !important; transform:none !important;}
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.utility-bar{background:rgba(0,0,0,0.18); padding:8px 0;}
.utility-bar .wrap{display:flex; justify-content:space-between; align-items:center;}
.utility-tagline{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; color:rgba(255,255,255,0.6);}
.utility-right{display:flex; align-items:center; gap:16px;}
.lang-switch{display:flex; gap:2px; font-family:var(--f-mono); font-size:10.5px;}
.lang-switch span, .lang-switch a{color:rgba(255,255,255,0.45); padding:2px 5px; text-decoration:none;}
.lang-switch a:hover{color:#fff; text-decoration:none;}
.lang-switch span.active, .lang-switch a.active{color:#fff; border-bottom:1px solid var(--c-accent);}
.utility-right svg{width:14px; height:14px; stroke:rgba(255,255,255,0.6);}

.nav-band{background:var(--c-primary); position:sticky; top:0; z-index:100;}
nav.topnav{display:flex; justify-content:space-between; align-items:center; padding:18px 0;}
.logo{font-family:var(--f-word); font-weight:600; font-size:21px; color:#fff; display:flex; align-items:center; gap:10px;}
.logo:hover{text-decoration:none;}

.nav-toggle{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:none; border:1px solid rgba(255,255,255,.3); border-radius:5px; cursor:pointer; color:#fff;
}
.nav-toggle svg{width:20px; height:20px;}

.navlinks-wrap{
  position:fixed; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--c-primary); padding:90px 28px 32px; overflow-y:auto;
  transform:translateX(100%); transition:transform .25s ease; z-index:99;
}
.navlinks-wrap.is-open{transform:translateX(0);}
.navlinks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.navlinks > li{border-bottom:1px solid rgba(255,255,255,.12);}
.navlinks a, .navlinks .submenu-trigger{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:14px 4px; color:rgba(255,255,255,.88); font-size:15px; font-weight:500;
  background:none; border:none; font-family:var(--f-body); text-align:left; cursor:pointer; text-decoration:none;
}
.navlinks a:hover, .navlinks .submenu-trigger:hover{color:var(--c-accent-soft); text-decoration:none;}
.submenu-trigger .chevron{width:14px; height:14px; transition:transform .2s ease; flex-shrink:0;}
.has-submenu.is-open .submenu-trigger .chevron{transform:rotate(180deg);}
.submenu{list-style:none; margin:0 0 8px; padding:0 0 0 12px; display:none;}
.has-submenu.is-open .submenu{display:block;}
.submenu a{padding:10px 4px; font-size:13.5px; font-weight:400; color:rgba(255,255,255,.72);}

@media (min-width:900px){
  .nav-toggle{display:none;}
  .navlinks-wrap{position:static; transform:none; width:auto; background:none; padding:0; overflow:visible;}
  .navlinks{flex-direction:row; align-items:center; gap:4px;}
  .navlinks > li{border-bottom:none; position:relative;}
  .navlinks a, .navlinks .submenu-trigger{padding:8px 12px; font-size:14px; width:auto;}
  .submenu{
    display:block; position:absolute; top:100%; right:0; min-width:280px;
    background:var(--c-card); border:1px solid var(--c-line); box-shadow:0 12px 28px rgba(27,58,75,.16);
    padding:6px; margin:6px 0 0; opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .has-submenu:hover .submenu, .has-submenu.is-open .submenu{opacity:1; visibility:visible; transform:translateY(0);}
  .submenu a{color:var(--c-primary); padding:10px 12px;}
  .submenu a:hover{background:var(--c-bg); text-decoration:none;}
}
.nav-scrim{display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:98;}
.nav-scrim.is-open{display:block;}
@media (min-width:900px){ .nav-scrim{display:none !important;} }

.ruler{
  height:14px; background-image: repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 24px);
  border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line); margin:0;
}

.band-sky{background:#9FD8EE; margin:0; padding:14px 0;}
.band-sky-text{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-primary); text-align:center; margin:0;
}

.band-teal{background:#146A72; margin:0; padding:14px 0;}
.band-teal-text{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; text-align:center; margin:0;
}

/* ==========================================================================
   Logo mark
   ========================================================================== */
.logo-mark rect{transition:fill .3s ease;}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:56px 0 44px;}
@media (min-width:700px){ .hero{padding:76px 0 64px;} }
.eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-accent); display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--c-accent);}
.hero-title{font-size:30px; font-weight:600; line-height:1.1; margin:0 0 20px; max-width:620px; color:var(--c-primary);}
@media (min-width:700px){ .hero-title{font-size:46px;} }
.hero-title.hero-title-sm{font-size:26px;}
@media (min-width:700px){ .hero-title.hero-title-sm{font-size:38px;} }
.hero-sub{font-size:15.5px; color:var(--c-text-soft); max-width:520px; margin:0 0 30px; line-height:1.6;}
@media (min-width:700px){ .hero-sub{font-size:17px;} }
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  font-family:var(--f-body); font-weight:600; font-size:14px; padding:13px 24px; border-radius:3px;
  cursor:pointer; border:none; display:inline-block; text-align:center; text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--c-primary); color:#fff;}
.btn-secondary{background:transparent; border:1px solid var(--c-primary); color:var(--c-primary);}
.badges-row{display:flex; gap:10px; margin:22px 0 0; flex-wrap:wrap;}
.badge{font-family:var(--f-mono); font-size:11.5px; border:1px solid var(--c-line); color:var(--c-text-soft); padding:6px 12px; border-radius:20px;}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding:40px 0;}
@media (min-width:700px){ .section{padding:56px 0;} }
.section-label{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-text-soft); margin:0 0 8px;}
.section-title{font-size:22px; font-weight:600; color:var(--c-primary); margin:0 0 28px;}
@media (min-width:700px){ .section-title{font-size:28px; margin-bottom:32px;} }

/* ==========================================================================
   Hero stats band
   ========================================================================== */
.hero-stats-band{background:var(--c-accent); padding:22px 0;}
.hero-stats{display:flex; gap:0; flex-wrap:wrap;}
.hero-stats .stat{padding:0 28px; border-left:1px solid rgba(255,255,255,0.35);}
.hero-stats .stat:first-child{padding-left:0; border-left:none;}
.hero-stats .stat b{display:block; font-family:var(--f-display); font-size:22px; color:#fff; font-weight:600;}
.hero-stats .stat span{font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:.04em;}

/* ==========================================================================
   Trust bar (badges de financement, accueil)
   ========================================================================== */
.trust-bar{display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:22px 0; border-bottom:1px solid var(--c-line);}
.trust-bar-label{font-family:var(--f-mono); font-size:11px; color:var(--c-text-soft); text-transform:uppercase; letter-spacing:.05em; flex:none;}
.trust-bar-badges{display:flex; gap:10px; flex-wrap:wrap;}
.trust-bar-badges span{
  font-family:var(--f-mono); font-size:11.5px; font-weight:500; color:var(--c-primary);
  border:1px solid var(--c-line); padding:6px 13px; border-radius:3px; background:var(--c-card);
}

/* ==========================================================================
   Brochure (capture de leads)
   ========================================================================== */
.brochure-card{
  background:var(--c-card); border:1px solid var(--c-line); box-shadow:0 1px 3px rgba(27,58,75,0.06);
  display:grid; grid-template-columns:1fr; gap:0;
}
@media (min-width:820px){ .brochure-card{grid-template-columns:0.9fr 1.1fr;} }
.brochure-text{padding:32px 28px; border-bottom:1px solid var(--c-line);}
@media (min-width:820px){ .brochure-text{padding:36px 34px; border-bottom:none; border-right:1px solid var(--c-line);} }
.brochure-icon{
  width:42px; height:42px; border-radius:10px; background:var(--c-bg); border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.brochure-icon svg{width:21px; height:21px; stroke:var(--c-primary);}
.brochure-text h2{font-size:20px; margin:0 0 10px;}
.brochure-text p{font-size:14px; color:var(--c-text-soft); line-height:1.6; margin:0;}
.brochure-form{padding:32px 28px;}
@media (min-width:820px){ .brochure-form{padding:36px 34px;} }
.brochure-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;}
.brochure-form .form-field{margin-bottom:16px;}
.brochure-form .form-row .form-field{margin-bottom:0;}
.brochure-legal{font-size:11.5px; color:var(--c-text-soft); line-height:1.55; margin:14px 0 0;}
.brochure-legal a{color:var(--c-text-soft); text-decoration:underline;}

/* ==========================================================================
   Program cards
   ========================================================================== */
.prog-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:640px){ .prog-grid{grid-template-columns:repeat(2,1fr);} }
.prog-card{
  position:relative; background:var(--c-card); border:1px solid var(--c-line); padding:28px 26px 24px;
  overflow:hidden; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
  box-shadow:0 1px 3px rgba(27,58,75,0.06); text-decoration:none; display:block; color:inherit;
}
.prog-card:hover{transform:translateY(-4px); border-color:var(--c-primary); box-shadow:0 16px 32px rgba(27,58,75,0.14); text-decoration:none;}
.prog-ghost{
  position:absolute; top:-14px; right:8px; font-family:var(--f-display); font-weight:600; font-size:88px;
  color:var(--c-primary); opacity:0.06; line-height:1; pointer-events:none; transition:opacity .35s ease;
}
.prog-card:hover .prog-ghost{opacity:0.1;}
.prog-icon{
  width:38px; height:38px; border-radius:10px; background:var(--c-bg); border:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; position:relative; z-index:1;
}
.prog-icon svg{width:19px; height:19px; stroke:var(--c-primary);}
.prog-name{font-family:var(--f-display); font-size:19px; font-weight:600; color:var(--c-primary); margin:0 0 8px; position:relative; z-index:1;}
.prog-desc{font-size:13.5px; color:var(--c-text-soft); line-height:1.55; margin:0 0 18px; position:relative; z-index:1;}
.prog-meta{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;}
.prog-hours{font-family:var(--f-mono); font-size:11px; color:var(--c-text-soft); display:flex; align-items:center; gap:7px;}
.prog-clock{flex:none;}
.prog-cta{font-family:var(--f-mono); font-size:11px; color:var(--c-primary); display:flex; align-items:center; gap:4px; transition:gap .25s ease;}
.prog-card:hover .prog-cta{gap:8px;}
.prog-underline{position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--c-accent); transition:width .4s cubic-bezier(.16,1,.3,1);}
.prog-card:hover .prog-underline{width:100%;}
.prog-card.featured{background:var(--c-primary); border-color:var(--c-primary);}
.prog-card.featured .prog-name, .prog-card.featured .prog-hours, .prog-card.featured .prog-cta{color:#fff;}
.prog-card.featured .prog-desc{color:rgba(255,255,255,0.68);}
.prog-card.featured .prog-ghost{color:#fff; opacity:0.08;}
.prog-card.featured .prog-icon{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.2);}
.prog-card.featured .prog-icon svg{stroke:var(--c-accent);}
.prog-tag{
  position:absolute; top:16px; right:16px; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  background:var(--c-accent); color:#fff; padding:4px 9px; border-radius:20px; z-index:1;
}

.combo-note{
  margin-top:28px; padding:22px 26px; border-left:3px solid var(--c-accent); background:var(--c-card);
  border-top:1px solid var(--c-line); border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
}
.combo-dots{width:100%; max-width:300px; height:16px; display:block; margin-bottom:14px;}
.combo-note p{margin:0; font-size:14px; line-height:1.6; color:var(--c-text-soft);}
.combo-note b{color:var(--c-primary); font-family:var(--f-display); font-weight:600;}

/* ==========================================================================
   Stats band (bloc coloré générique)
   ========================================================================== */
.stats-band{background:var(--c-accent); padding:36px 0;}
@media (min-width:700px){ .stats-band{padding:44px 0;} }

.modules-list{list-style:none; margin:0; padding:0; counter-reset:mod;}
.modules-list li{counter-increment:mod; display:flex; gap:18px; align-items:baseline; padding:16px 0; border-top:1px solid var(--c-line); font-size:14.5px; flex-wrap:wrap;}
.modules-list li:last-child{border-bottom:1px solid var(--c-line);}
.modules-list li::before{content:counter(mod,decimal-leading-zero); font-family:var(--f-mono); color:var(--c-accent); font-size:13px; flex:none; width:26px;}
.modules-list .m-h{color:var(--c-text-soft); font-family:var(--f-mono); font-size:12.5px; margin-left:auto;}
.modules-list-onband li{border-color:rgba(255,255,255,0.28); color:#fff;}
.modules-list-onband li:last-child{border-color:rgba(255,255,255,0.28);}
.modules-list-onband li::before{color:#fff; opacity:0.7;}
.modules-list-onband .m-h{color:rgba(255,255,255,0.85);}

/* ==========================================================================
   Trust band (Pourquoi Tamkin — 2 colonnes)
   ========================================================================== */
.trust-band{
  position:relative; background:var(--c-primary); padding:44px 0; overflow:hidden;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.5px, transparent 1.5px);
  background-size:22px 22px;
}
@media (min-width:700px){ .trust-band{padding:64px 0;} }
.trust-layout{display:grid; grid-template-columns:1fr; gap:32px; align-items:start; position:relative;}
@media (min-width:820px){ .trust-layout{grid-template-columns:0.85fr 1.15fr; gap:56px;} }
.trust-lead .section-label{color:rgba(255,255,255,0.55);}
.trust-statement{font-family:var(--f-display); font-weight:600; font-size:24px; line-height:1.28; color:#fff; margin:14px 0 22px; max-width:360px;}
@media (min-width:700px){ .trust-statement{font-size:29px;} }
.trust-statement em{font-style:normal; color:var(--c-accent-soft);}
.trust-tags{display:flex; gap:8px; flex-wrap:wrap;}
.trust-tags span{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.05em; color:rgba(255,255,255,0.7); border:1px solid rgba(255,255,255,0.22); padding:5px 11px; border-radius:20px;}
.trust-list{list-style:none; margin:0; padding:0; display:grid; gap:26px;}
.trust-list li{display:flex; gap:16px; align-items:flex-start;}
.trust-check{flex:none; width:24px; height:24px; border-radius:50%; background:var(--c-accent); display:flex; align-items:center; justify-content:center; margin-top:2px;}
.trust-check svg{width:12px; height:12px; stroke:var(--c-primary); stroke-width:3; fill:none;}
.trust-list b{display:block; font-family:var(--f-display); font-size:16px; font-weight:600; color:#fff; margin-bottom:4px;}
.trust-list p{margin:0; font-size:13.5px; color:rgba(255,255,255,0.66); line-height:1.55;}
/* Variant used on colored stats-bands (single column, checks in white) */
.trust-list.on-accent{max-width:640px;}
.trust-list.on-accent b, .trust-list.on-accent p{color:#fff;}
.trust-list.on-accent p{color:rgba(255,255,255,.8);}
.trust-list.on-accent .trust-check{background:#fff;}
.trust-list.on-accent .trust-check svg{stroke:var(--c-accent);}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{background:var(--c-primary); color:#fff; padding:44px 0; text-align:center;}
@media (min-width:700px){ .cta-band{padding:52px 0;} }
.cta-band h3{font-family:var(--f-display); font-size:24px; font-weight:600; margin:0 0 18px;}
@media (min-width:700px){ .cta-band h3{font-size:26px;} }
.cta-band .btn-primary{background:var(--c-accent);}
.cta-band .btn-secondary{color:#fff; border-color:rgba(255,255,255,.55);}
.cta-note{font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,0.55); margin:18px auto 0; max-width:46ch;}

/* ==========================================================================
   Info grid / cards
   ========================================================================== */
.info-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-top:10px;}
@media (min-width:700px){ .info-grid{grid-template-columns:1fr 1fr; gap:32px;} }
.info-card{background:var(--c-card); border:1px solid var(--c-line); padding:22px; box-shadow:0 1px 3px rgba(27,58,75,0.06);}
.info-card h4{font-family:var(--f-display); font-size:16px; margin:0 0 10px; color:var(--c-primary);}
.info-card p{font-size:13.5px; color:var(--c-text-soft); margin:0; line-height:1.6;}
.price{font-family:var(--f-display); font-size:30px; color:var(--c-primary); margin:0 0 4px;}

.eco-grid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:640px){ .eco-grid{grid-template-columns:repeat(3,1fr);} }
.eco-card{background:rgba(255,255,255,.94); border:1px solid var(--c-line); padding:22px; box-shadow:0 1px 3px rgba(27,58,75,0.06);}
.eco-card h4{font-family:var(--f-display); font-size:16px; color:var(--c-primary); margin:0 0 8px;}
.eco-card p{font-size:13px; color:var(--c-text-soft); margin:0; line-height:1.55;}

.notice-box{
  border-left:3px solid var(--c-accent); background:var(--c-card); border-top:1px solid var(--c-line);
  border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:18px 22px; margin-top:24px;
}
.notice-box p{margin:0; font-size:13.5px; color:var(--c-text-soft); line-height:1.6;}
.notice-box .section-label{color:var(--c-accent);}
.notice-box.on-accent{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); border-left-color:#fff;}
.notice-box.on-accent .section-label{color:#fff;}

.founder-quote{
  border-left:3px solid var(--c-accent); background:var(--c-card); border-top:1px solid var(--c-line);
  border-right:1px solid var(--c-line); border-bottom:1px solid var(--c-line); padding:28px 32px; margin-top:8px;
}
.founder-quote p{font-family:var(--f-display); font-style:italic; font-size:16px; line-height:1.7; color:var(--c-text); margin:0 0 14px;}
.founder-quote p:last-of-type{margin-bottom:0;}
.founder-quote cite{
  display:block; font-family:var(--f-mono); font-style:normal; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--c-text-soft); margin-top:18px;
}
.notice-box.on-accent p{color:rgba(255,255,255,.8);}

.placeholder-box{border:1px dashed var(--c-line); background:rgba(255,255,255,.5); padding:20px 22px; color:var(--c-text-soft); font-size:13.5px; font-style:italic; line-height:1.6;}

/* ==========================================================================
   Table
   ========================================================================== */
.table-wrap{overflow-x:auto;}
table.recap{width:100%; min-width:520px; border-collapse:collapse; margin-top:8px; font-size:13.5px;}
table.recap th, table.recap td{border:1px solid var(--c-line); padding:12px 14px; text-align:left;}
table.recap th{background:var(--c-primary); color:#fff; font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:500;}
table.recap td{color:var(--c-text-soft);}
table.recap td:first-child{color:var(--c-text); font-weight:600;}

/* ==========================================================================
   Form
   ========================================================================== */
.form-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px;}
@media (min-width:640px){ .form-grid{grid-template-columns:1fr 1fr;} }
.form-grid .full{grid-column:1 / -1;}
.form-field label{display:block; font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--c-text-soft); margin-bottom:6px;}
.form-field input, .form-field select, .form-field textarea{
  width:100%; border:1px solid var(--c-line); background:var(--c-card); padding:11px 13px; font-family:var(--f-body);
  font-size:14px; color:var(--c-text); border-radius:3px;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--c-accent); outline-offset:1px;}
.form-field textarea{resize:vertical; min-height:100px;}

.coord-list{list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--c-text-soft);}
.coord-list b{color:var(--c-text); font-family:var(--f-display); font-weight:600;}
.coord-list a{color:inherit;}

/* ==========================================================================
   Side visuals (animés, position fixed)
   ========================================================================== */
.side-visual{position:fixed; top:120px; right:12px; width:280px; height:380px; pointer-events:none; z-index:5; will-change:transform;}
.side-visual svg{width:100%; height:100%;}
.side-graticule{opacity:0.3;}
.side-spin{animation:globeSpin 40s linear infinite; transform-origin:190px 150px;}
@keyframes globeSpin{ to{ transform:rotate(360deg); } }
.side-flow path{animation:flowDash2 3.4s linear infinite;}
.side-flow path:nth-child(2){animation-duration:4s;}
.side-flow path:nth-child(3){animation-duration:4.6s;}
.side-flow path:nth-child(4){animation-duration:5.2s;}
.side-flow path:nth-child(5){animation-duration:5.8s;}
@keyframes flowDash2{ to{ stroke-dashoffset:-52; } }
.side-bars rect{animation:barPulse 2.6s ease-in-out infinite;}
@keyframes barPulse{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.35); } }
@media (max-width:900px){ .side-visual{display:none !important;} }
@media (prefers-reduced-motion: reduce){ .side-spin{animation:none;} .side-flow path{animation:none;} .side-bars rect{animation:none;} }
.side-shape{fill:var(--c-accent); fill-opacity:0.16; stroke:var(--c-accent); stroke-width:1.6; opacity:0.85;}

/* ==========================================================================
   Footer
   ========================================================================== */
.sitefoot{background:var(--c-primary); color:rgba(255,255,255,.75); padding:44px 0 20px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:28px; margin-bottom:28px;}
@media (min-width:700px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:980px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;} }
.sitefoot h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 14px; font-weight:500;}
.sitefoot p{font-size:13.5px; line-height:1.7;}
.sitefoot a{color:rgba(255,255,255,.8);}
.sitefoot a:hover{color:#fff;}
.footer-links{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.footer-links a{font-size:13.5px;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15); padding-top:18px; font-family:var(--f-mono); font-size:11px;
  color:rgba(255,255,255,.55); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
}