:root{
    --ink: #1e2b2a;
    --ink-soft: #4a5957;
    --paper: #faf7f2;
    --paper-alt: #f1ece2;
    --card: #ffffff;
    --accent: #6f9c96;      /* sage/teal, echoes their brand #7EBEC5 */
    --accent-deep: #3f6b64;
    --accent-warm: #c17a4d;  /* terracotta, for CTAs / warmth */
    --line: rgba(30,43,42,0.10);
    --shadow: 0 20px 45px -25px rgba(30,43,42,0.35);
    --radius: 18px;
    --maxw: 1140px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; scroll-padding-top:150px; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', -apple-system, sans-serif;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    opacity:1; transition:opacity .6s ease;
  }
  body.page-leaving{ opacity:0; }
  img{
    max-width:100%; height:auto; display:block;
    /* casual deterrents against right-click save / drag-out - not real
       protection (a browser can always be inspected), but it covers the
       common case of someone dragging a photo to their desktop */
    -webkit-user-select:none; user-select:none;
    -webkit-user-drag:none; user-drag:none;
    -webkit-touch-callout:none;
  }

  :focus-visible{
    outline:2px solid var(--accent-deep);
    outline-offset:3px;
    border-radius:4px;
  }
  .founder-quote :focus-visible{ outline-color:#fff; }

  .skip-link{
    position:absolute; left:16px; top:-60px;
    background:var(--ink); color:#fff; padding:10px 18px; border-radius:8px;
    text-decoration:none; font-size:.85rem; font-weight:600; z-index:100;
    transition:top .2s ease;
  }
  .skip-link:focus{ top:16px; }

  /* ---------- arrival fade, so coming from the homepage doesn't feel abrupt ---------- */
  .arrival-veil{
    position:fixed; inset:0; z-index:999; background:var(--paper);
    transition:opacity .7s ease;
  }
  .arrival-veil.hide{ opacity:0; pointer-events:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *, *::before, *::after{
      animation-duration:.001ms !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
  }
  h1,h2,h3{
    font-family:'Cormorant Garamond', Georgia, serif;
    font-weight:600;
    line-height:1.15;
    margin:0 0 .5em;
    color:var(--ink);
  }
  a{ color:inherit; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--accent-deep); font-weight:600; margin-bottom:14px;
  }
  .eyebrow::before{ content:""; width:22px; height:1px; background:var(--accent-deep); }

  /* ---------- header (identical to the homepage) ---------- */
  /* ---------- header : le sceau seul en vedette sur sa propre ligne,
     la navigation sur une ligne fine juste en dessous ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,247,242,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .brand-row{
    display:flex; align-items:center; justify-content:center; position:relative;
    padding:20px 24px 16px; max-width:var(--maxw); margin:0 auto;
  }
  .brand{ display:flex; align-items:center; text-decoration:none; }
  /* Big enough to actually read the seal (tree, snake, the ring of text) -
     at the old 46-86px nav-icon size it collapsed into an unreadable green
     dot. Still shrinks with the viewport so it never dominates a phone. */
  .brand-logo{
    height:clamp(84px, 9.2vw, 116px); width:clamp(84px, 9.2vw, 116px); flex:none;
    border-radius:50%;
  }

  .nav-row{ border-top:1px solid var(--line); }
  .nav-row .nav{
    display:flex; align-items:center; justify-content:center;
    padding:13px 24px; max-width:var(--maxw); margin:0 auto;
  }
  .nav-links{ display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
  .nav-links a{
    text-decoration:none; font-size:.88rem; font-weight:500; color:var(--ink-soft);
    padding:4px 0; transition:color .2s ease; white-space:nowrap;
  }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a.current{ color:var(--accent-deep); font-weight:600; }

  /* ---------- "Découvrir" dropdown : groupe les pages secondaires ---------- */
  .nav-dropdown{ position:relative; }
  .nav-dropdown-toggle{
    display:inline-flex; align-items:center; gap:5px;
    background:none; border:0; margin:0; padding:4px 0; cursor:pointer;
    font:inherit; font-size:.88rem; font-weight:500; color:var(--ink-soft);
    transition:color .2s ease;
  }
  .nav-dropdown-toggle:hover{ color:var(--ink); }
  .nav-dropdown-toggle.current{ color:var(--accent-deep); font-weight:600; }
  .nav-dropdown-toggle .chev{ width:11px; height:11px; flex:none; transition:transform .2s ease; }
  .nav-dropdown-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .nav-dropdown-menu{
    position:absolute; top:calc(100% + 20px); left:50%; z-index:60;
    background:#fff; border-radius:14px; box-shadow:var(--shadow);
    padding:8px; display:flex; flex-direction:column; gap:2px;
    width:max-content; min-width:236px;
    opacity:0; transform:translateX(-50%) translateY(-6px) scale(.97); transform-origin:top center;
    transition:opacity .16s ease, transform .16s ease; pointer-events:none;
  }
  .nav-dropdown-menu.open{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }
  .nav-dropdown-menu a{
    text-decoration:none; font-size:.88rem; font-weight:500; color:var(--ink-soft);
    padding:10px 14px; border-radius:9px; white-space:nowrap; text-align:left;
    transition:background-color .15s ease, color .15s ease;
  }
  .nav-dropdown-menu a:hover, .nav-dropdown-menu a:focus-visible{ background:var(--paper-alt); color:var(--ink); }
  .nav-dropdown-menu a.current{ color:var(--accent-deep); font-weight:600; }

  .burger{
    position:absolute; right:24px; top:50%; transform:translateY(-50%);
    display:none; align-items:center; justify-content:center;
    width:44px; height:44px; background:none; border:0; cursor:pointer; padding:8px; border-radius:8px;
  }
  .burger:hover{ background:var(--paper-alt); }
  .burger span, .burger span::before, .burger span::after{
    content:""; display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:transform .25s ease, opacity .2s ease;
  }
  .burger span::before{ position:absolute; top:-7px; }
  .burger span::after{ position:absolute; top:7px; }
  .burger[aria-expanded="true"] span{ background:transparent; }
  .burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  .mobile-menu{
    display:none; flex-direction:column; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:8px 24px 18px;
  }
  .mobile-menu.open{ display:flex; }
  .mobile-menu a{
    text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:1rem;
    padding:13px 6px; border-radius:8px; min-height:44px; display:flex; align-items:center;
  }
  .mobile-menu a:hover, .mobile-menu a:focus-visible{ background:var(--paper-alt); color:var(--ink); }
  .mobile-menu a.current{ color:var(--accent-deep); font-weight:600; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:13px 26px; border-radius:999px; text-decoration:none; white-space:nowrap;
    font-weight:600; font-size:.92rem; transition:transform .18s ease, box-shadow .18s ease;
    border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{ background:var(--accent-warm); color:#fff; box-shadow:0 12px 24px -10px rgba(193,122,77,.7); position:relative; overflow:hidden; }
  .btn-primary::before{
    content:""; position:absolute; top:0; left:-75%; width:45%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent);
    transform:skewX(-20deg); pointer-events:none;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(193,122,77,.8); }
  .btn-primary:hover::before{ animation:btnShine .85s ease; }
  @keyframes btnShine{ from{ left:-75%; } to{ left:130%; } }
  .btn-ghost{ background:transparent; color:var(--accent-deep); border-color:var(--accent-deep); }
  .btn-ghost:hover{ background:rgba(111,156,150,.1); }
  .btn-free{ background:var(--accent-deep); color:#fff; box-shadow:0 12px 24px -10px rgba(63,107,100,.6); }
  .btn-free:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(63,107,100,.7); }

  .cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  @media (max-width: 620px){
    .cta-row{ flex-direction:column; align-items:stretch; }
    .cta-row .btn{ width:100%; }
  }

  .links{ display:flex; gap:14px; flex-wrap:wrap; }
  .links a{
    text-decoration:none; font-weight:600; font-size:.9rem;
    color:var(--accent-deep); border-bottom:1.5px solid var(--accent);
    padding-bottom:2px; transition:opacity .2s;
  }
  .links a:hover{ opacity:.7; }

  /* ---------- section shell (identical to the homepage) ---------- */
  section{ padding:88px 0; }
  .section-head{ margin:0 auto 52px; text-align:center; }
  .section-head h2{ font-size:clamp(1.8rem, 3vw, 2.5rem); }
  .section-head p{ max-width:640px; margin:0 auto; color:var(--ink-soft); font-size:1.02rem; }

  .section-title{ display:flex; align-items:center; gap:22px; margin:0 0 18px; }
  .section-title .rule{ flex:1 1 auto; height:1px; background:var(--line); transform-origin:center; }
  .section-title img.leaf{ width:34px; height:auto; flex:0 0 auto; opacity:.9; }
  .section-title img.leaf.flip{ transform:scaleX(-1); }
  .section-title h2{ margin:0; flex:0 1 auto; }

  .about, .page-hero{ overflow-x:clip; }
  .about{ background:var(--paper-alt); }

  /* ---------- page hero: full-bleed editorial split ---------- */
  .page-hero{ padding:0 0 8px; }
  .hero-bleed{
    display:grid; grid-template-columns:minmax(340px, 600px) 1fr;
    align-items:stretch; min-height:min(600px, 82vh);
  }
  .hero-copy{
    display:flex; flex-direction:column; justify-content:center;
    /* fixed clamp(), not a viewport-width calc - a calc tied to 100vw kept
       growing past the column's own max-width on wide screens, eating all
       the room meant for the text and forcing it to wrap letter-by-letter */
    padding:76px clamp(28px, 4vw, 64px);
  }
  .page-hero h1{ font-size:clamp(2rem, 4vw, 3rem); }
  .page-hero .lead{ color:var(--ink-soft); font-size:1.05rem; max-width:50ch; margin-bottom:28px; }

  .facts{ display:flex; gap:28px; flex-wrap:wrap; margin:32px 0 0; }
  .facts .item strong{
    display:block; font-family:'Cormorant Garamond', serif; font-size:1.35rem;
    color:var(--accent-deep); font-weight:600;
  }
  .facts .item span{ font-size:.8rem; color:var(--ink-soft); }

  .hero-photo{
    position:relative; overflow:hidden; background:var(--ink); min-height:340px;
  }
  .hero-photo-zoom{
    position:absolute; inset:0; width:100%; height:100%; padding:0; margin:0;
    border:0; background:none; cursor:zoom-in;
  }
  .hero-photo-zoom img{
    /* contain, not cover: this is a wide group photo (nine people, edge to
       edge) - cover cropped roughly 45% of its width away, cutting people off
       at both sides. Contain keeps everyone in frame, letterboxed on the ink
       background either side. */
    width:100%; height:100%; object-fit:contain; display:block;
    filter:grayscale(1) contrast(1.06) brightness(1.02);
    transition:transform .6s ease;
  }
  .hero-photo-zoom:hover img{ transform:scale(1.035); }
  .hero-photo::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(30,43,42,0) 55%, rgba(30,43,42,.55) 100%);
  }
  .hero-photo-caption{
    position:absolute; left:28px; right:28px; bottom:20px; z-index:1;
    color:#fff; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
    text-shadow:0 2px 12px rgba(0,0,0,.45);
  }

  /* ---------- ancrage band: full-bleed photographic interstitial ---------- */
  /* pierres.jpeg is a TALL portrait (1500×2000) - object-fit:cover on a short,
     full-width band only ever shows a thin horizontal sliver of it, which is
     what cropped the cairn down to something unreadable. A generous height
     here is what actually lets the stacked stones read as stacked stones. */
  .ancrage-band{
    position:relative; overflow:hidden; padding:0;
    height:clamp(560px, 84vh, 820px);
    display:flex; align-items:center; justify-content:center;
  }
  .ancrage-band img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:30% 44%;
    filter:saturate(.8) brightness(.95);
  }
  .ancrage-band .overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(30,43,42,.5) 0%, rgba(30,43,42,.35) 35%, rgba(20,30,29,.72) 100%);
  }
  .ancrage-content{ position:relative; z-index:1; text-align:center; padding:96px 24px; }
  .ancrage-content .eyebrow{ color:rgba(255,255,255,.9); justify-content:center; }
  .ancrage-content .eyebrow::before{ background:rgba(255,255,255,.9); }
  .ancrage-line{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:600;
    font-size:clamp(1.9rem, 4.5vw, 3.1rem); color:#fff; margin:0; line-height:1.28;
    text-shadow:0 2px 20px rgba(0,0,0,.35);
  }
  .ancrage-sub{ margin:24px auto 0; max-width:48ch; color:rgba(255,255,255,.92); font-size:1rem; text-shadow:0 1px 12px rgba(0,0,0,.3); }

  /* ---------- programme rows (identical pattern to the homepage's categories) ---------- */
  .categories{ display:flex; flex-direction:column; gap:72px; }
  .category{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  .category.media-left{ grid-template-columns:1fr 1fr; }
  .category.media-left .category-media{ order:-1; }
  .category > *{ min-width:0; }

  .category-text .icon{
    width:68px; height:68px; border-radius:16px; background:rgba(111,156,150,.14);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    color:var(--accent-deep); font-size:2.4rem;
  }
  .category-text h3{ font-size:1.6rem; margin-bottom:.5em; }
  .category-text p{ color:var(--ink-soft); font-size:1rem; margin:0 0 .9em; }
  .category-text p:last-child{ margin-bottom:0; }
  .category-text p strong{ color:var(--ink); }

  .category-media{ width:100%; max-width:420px; margin-inline:auto; }
  .category-media .zoom-btn{
    display:block; width:100%; padding:0; margin:0; border:0; background:none;
    cursor:zoom-in; position:relative; border-radius:14px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .category-media .zoom-btn:hover{ transform:translateY(-3px); }
  .category-media img{
    width:100%; height:auto; display:block; border-radius:14px;
    border:4px solid var(--card); box-shadow:0 14px 30px -14px rgba(30,43,42,.4);
  }
  .zoom-hint{
    position:absolute; right:14px; bottom:14px;
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(30,43,42,.8); color:#fff; backdrop-filter:blur(4px);
    padding:7px 13px; border-radius:999px;
    font-size:.72rem; font-weight:600; letter-spacing:.03em; white-space:nowrap;
    opacity:0; transform:translateY(4px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .zoom-btn:hover .zoom-hint, .zoom-btn:focus-visible .zoom-hint{ opacity:1; transform:translateY(0); }
  @media (hover:none){ .zoom-hint{ opacity:1; transform:none; } }

  .lightbox{
    position:fixed; inset:0; z-index:200;
    background:rgba(20,26,25,.92); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center; padding:32px;
  }
  .lightbox[hidden]{ display:none; }
  .lightbox img{
    max-width:min(94vw, 1100px); max-height:88vh; width:auto; height:auto;
    border-radius:14px; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
    background:#fff;
  }
  .lightbox-close{
    position:absolute; top:20px; right:20px;
    width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.1); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-close:hover{ background:rgba(255,255,255,.22); }
  .lightbox-close svg{ width:20px; height:20px; }

  /* ---------- pratiques communes (3-card grid) ---------- */
  .feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
  .feature-card{
    background:var(--card); border-radius:var(--radius); padding:34px 28px;
    box-shadow:var(--shadow); text-align:left;
  }
  .feature-card .icon{
    width:56px; height:56px; border-radius:14px; background:rgba(111,156,150,.14);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
    color:var(--accent-deep); font-size:1.8rem;
  }
  .feature-card h3{ font-size:1.25rem; margin-bottom:.5em; }
  .feature-card p{ color:var(--ink-soft); font-size:.94rem; margin:0; }

  /* ---------- jointure vers la nutrithérapie : mêmes principe que les
     feuilles de ginkgo de l'accueil (des éléments se détachent de la
     jointure et tombent en se dissolvant au rythme du scroll), mais avec
     les ingrédients de la nutrithérapie plutôt qu'un motif décoratif.
     Purement décoratif : masqué par défaut, animé par le scroll. ---------- */
  .nutri-seam{ position:relative; width:100%; height:0; z-index:3; pointer-events:none; overflow-x:clip; }
  /* Même échelle que les feuilles de ginkgo de l'accueil (.evo-leaf, 44px) :
     la largeur de chaque ingrédient est posée en ligne, ajustée à son ratio
     pour que tous pèsent visuellement autant qu'une feuille. */
  .nutri-seam img{
    position:absolute; top:-104px; width:40px; height:auto; display:block;
    opacity:0; will-change:transform, opacity;
    filter:drop-shadow(0 12px 20px rgba(30,43,42,.32));
  }
  /* Sur mobile, ils partent d'un peu moins haut pour ne pas écraser le titre
     de la section qui suit (la taille, elle, reste la même). */
  @media (max-width:720px){
    .nutri-seam img{ top:-88px; }
  }

  /* ---------- nutrithérapie quote card ---------- */
  .quote-card{
    background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:40px clamp(24px, 5vw, 52px); max-width:980px; margin:0 auto;
    display:flex; align-items:center; gap:40px; text-align:left;
  }
  .quote-card .quote-photo{
    flex:none; width:clamp(220px, 26vw, 300px); padding:0; margin:0; border:0; background:none;
    cursor:zoom-in; border-radius:14px; transition:transform .25s ease;
  }
  .quote-card .quote-photo:hover{ transform:translateY(-3px); }
  .quote-card .quote-photo img{
    width:100%; height:auto; display:block; border-radius:14px;
    border:4px solid var(--paper-alt); box-shadow:0 14px 30px -14px rgba(30,43,42,.4);
  }
  .quote-card .quote-photo-caption{ display:block; margin-top:10px; text-align:center; font-size:.78rem; color:var(--ink-soft); }
  .quote-card .quote-text{ flex:1 1 auto; min-width:0; }
  .quote-card p.intro{ color:var(--ink-soft); margin:0 0 24px; }
  .quote-card .nutri-lien{ margin:0 0 22px; }
  .quote-card .nutri-lien h3{
    font-family:'Inter', sans-serif; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    font-weight:700; color:var(--accent-deep); margin:0 0 8px;
  }
  .quote-card .nutri-lien p{ margin:0 0 10px; color:var(--ink-soft); }
  .quote-card .nutri-annees{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 24px; padding:0; list-style:none; }
  .quote-card .nutri-annees li{
    background:var(--paper-alt); border-radius:12px; padding:14px 16px;
    color:var(--ink-soft); font-size:.92rem; line-height:1.5;
  }
  .quote-card .nutri-annees strong{ display:block; font-variant-numeric:lining-nums; font-family:'Cormorant Garamond', serif; font-size:1.15rem; color:var(--ink); margin-bottom:2px; }
  @media (max-width:700px){ .quote-card .nutri-annees{ grid-template-columns:1fr; } }
  .quote-card blockquote{
    margin:0; padding:0 0 0 22px; border-left:3px solid var(--accent);
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.15rem;
    line-height:1.55; color:var(--ink);
  }
  .quote-card cite{
    display:block; margin-top:16px; font-style:normal; font-size:.86rem;
    font-weight:600; color:var(--accent-deep);
  }

  /* ---------- infos pratiques ---------- */
  .callout{
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:18px 28px; text-align:center; font-weight:600; color:var(--accent-deep);
    margin-bottom:48px;
  }
  .info-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; }
  .info-cols h4{
    font-family:'Cormorant Garamond', serif; font-size:1.15rem; font-weight:600;
    color:var(--ink); margin:0 0 14px;
  }
  .info-cols ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .info-cols li{ padding-left:20px; position:relative; color:var(--ink-soft); font-size:.94rem; }
  .info-cols li::before{
    content:""; position:absolute; left:0; top:.55em; width:6px; height:6px;
    border-radius:50%; background:var(--accent);
  }
  .info-cols li a{ color:var(--accent-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

  /* ---------- closing testimonial ---------- */
  .founder-quote{
    background:var(--ink); color:#fff; border-radius:28px;
    padding:48px; display:flex; align-items:center; gap:44px;
    width:calc(100% - 48px); max-width:calc(var(--maxw) - 48px); margin-inline:auto;
  }
  .founder-quote img{
    width:160px; height:200px; object-fit:cover; object-position:top center;
    border-radius:16px; flex:none; box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
  }
  .founder-quote h3{ color:#fff; font-size:1.5rem; }
  .founder-quote p{ color:rgba(255,255,255,.8); margin:0; font-size:.98rem; }
  .founder-quote p strong{ color:#fff; }

  /* ---------- CTA band (identical to the homepage) ---------- */
  .cta-band{
    background:var(--ink); color:#fff; border-radius:28px;
    padding:56px 48px; text-align:center;
    width:calc(100% - 48px); max-width:calc(var(--maxw) - 48px); margin-inline:auto;
  }
  .cta-band h2{ color:#fff; }
  .cta-band p{ color:rgba(255,255,255,.75); max-width:52ch; margin:0 auto 26px; }

  /* ---------- footer (identical to the homepage) ---------- */
  footer{ background:var(--paper-alt); border-top:1px solid var(--line); padding:56px 0 28px; }
  .footer-grid{
    /* three balanced columns, not "auto 1fr auto" - that left the address
       column stretched across the leftover space with nothing to fill it,
       which read as a big accidental gap before "Navigation" on wide screens */
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; align-items:start;
    padding-bottom:36px; border-bottom:1px solid var(--line);
  }
  .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  /* the motion (snake climbing the trunk, ring drawing itself as it turns)
     lives inside the SVG file, so it plays from a plain <img> and stays out
     of every page stylesheet */
  .footer-seal{ width:clamp(160px, 18vw, 230px); height:auto; flex:none; }
  .footer-brand-name{ font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-weight:600; color:var(--ink); margin:0 0 6px; }
  .footer-brand-tagline{ font-size:.86rem; color:var(--ink-soft); margin:0; line-height:1.55; max-width:30ch; }
  .footer-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); margin-bottom:14px; }
  .footer-col p, .footer-col a{ font-size:.92rem; color:var(--ink-soft); text-decoration:none; display:block; margin-bottom:6px; }
  .footer-col a:hover{ color:var(--accent-deep); }
  .footer-email-row{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
  .footer-email-row a{ margin-bottom:0; }
  .copy-btn{
    display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:30px; height:30px; padding:0; margin:0;
    background:transparent; border:1px solid var(--line); border-radius:8px;
    color:var(--ink-soft); cursor:pointer;
    transition:background-color .18s ease, color .18s ease, border-color .18s ease;
  }
  .copy-btn:hover, .copy-btn:focus-visible{ color:var(--accent-deep); border-color:var(--accent-deep); background:var(--paper-alt); }
  .copy-btn svg{ width:15px; height:15px; }
  .copy-btn .ci-check{ display:none; }
  .copy-btn.copied{ color:var(--accent-deep); border-color:var(--accent-deep); }
  .copy-btn.copied .ci-copy{ display:none; }
  .copy-btn.copied .ci-check{ display:block; }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    padding-top:22px; font-size:.82rem; color:var(--ink-soft);
  }

  /* ---------- responsive ---------- */
  @media (max-width: 900px){
    html{ scroll-padding-top:96px; }
    .hero-bleed{ grid-template-columns:1fr; min-height:0; }
    .hero-copy{ padding:48px 24px 40px; }
    .hero-photo{ min-height:320px; order:-1; }
    .ancrage-band{ height:clamp(460px, 68vh, 620px); }
    .ancrage-content{ padding:56px 24px; }
    .categories{ gap:52px; }
    .category, .category.media-left{ grid-template-columns:1fr; gap:26px; }
    .category.media-left .category-media{ order:0; }
    .category-media{ max-width:min(100%, 360px); }
    .feature-grid{ grid-template-columns:1fr; }
    .info-cols{ grid-template-columns:1fr; gap:28px; }
    .founder-quote{ flex-direction:column; text-align:center; padding:36px 28px; }
    .founder-quote img{ width:140px; height:175px; }
    .quote-card{ flex-direction:column; align-items:center; text-align:center; gap:24px; }
    .quote-card .quote-photo{ width:min(240px, 60vw); }
    .quote-card blockquote{ text-align:left; }
    .footer-grid{ grid-template-columns:1fr; }
    .section-title{ gap:12px; }
    .section-title .rule{ min-width:16px; }
    .section-title img.leaf{ width:24px; }

    .brand-row{ justify-content:flex-start; padding:11px 24px; }
    .brand-logo{ height:52px; width:52px; }
    .nav-row{ display:none; }
    .burger{ display:inline-flex; }
  }

  @media (max-width: 620px){
    section{ padding:60px 0; }
    .hero-copy{ padding:40px 20px 34px; }
    .hero-photo{ min-height:260px; }
    .ancrage-content{ padding:56px 20px; }
    .section-head{ margin-bottom:38px; }
    .categories{ gap:44px; }
    .cta-band{ padding:44px 24px; border-radius:22px; }
    .facts{ gap:20px; }
  }
  /* ================================================================
     « Autres formations » - variantes de la charte, mêmes tokens
     ================================================================ */

  /* hero centré (au lieu du split plein cadre de la page Formation) */
  .page-hero{ padding:76px 0 8px; }
  .page-hero .wrap{ max-width:900px; text-align:center; }
  .page-hero .eyebrow{ justify-content:center; }
  .page-hero .lead{ margin-left:auto; margin-right:auto; max-width:60ch; }
  .page-hero .cta-row{ justify-content:center; }
  .page-hero .facts{ justify-content:center; gap:36px; }

  /* sommaire : puces d'ancrage vers chaque formation */
  .chip-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:38px; }
  .chip{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--card); border:1px solid var(--line); border-radius:999px;
    padding:9px 18px; text-decoration:none; font-size:.88rem; font-weight:600;
    color:var(--ink-soft); box-shadow:0 8px 18px -14px rgba(30,43,42,.5);
    transition:transform .18s ease, color .18s ease, border-color .18s ease;
  }
  .chip:hover{ transform:translateY(-2px); color:var(--accent-deep); border-color:var(--accent); }
  .chip .chip-kanji{ font-family:'Cormorant Garamond', serif; font-size:1.05rem; color:var(--accent-deep); }

  /* bandeau durée / prix / lieu, en tête de chaque bloc formation */
  .offer-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
  .offer-meta span{
    display:inline-flex; align-items:center; gap:7px;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
    color:var(--accent-deep); background:rgba(111,156,150,.14);
    padding:6px 13px; border-radius:999px;
  }
  .offer-meta span.price{ color:#fff; background:var(--accent-warm); letter-spacing:.05em; }
  .offer-meta span.price s{ text-decoration:line-through; opacity:.75; font-weight:600; margin-right:5px; }
  .offer-tagline{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.15rem;
    color:var(--accent-deep); margin:0 0 16px !important;
  }
  .offer-quote{
    margin:22px 0 0; padding:0 0 0 20px; border-left:3px solid var(--accent);
    font-family:'Cormorant Garamond', serif; font-style:italic;
    font-size:1.08rem; line-height:1.55; color:var(--ink) !important;
  }
  .offer-note{ font-size:.88rem; color:var(--ink-soft); margin:18px 0 0 !important; }
  .offer-note strong{ color:var(--ink); }
  .offer-note a{
    color:var(--accent-deep); font-weight:600; text-decoration:none;
    border-bottom:1.5px solid var(--accent); padding-bottom:1px;
  }
  .offer-note a:hover{ opacity:.7; }

  /* carte « sur devis » */
  .devis-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); max-width:860px; margin:0 auto;
    padding:42px clamp(24px, 5vw, 50px); display:flex; gap:34px; align-items:center;
  }
  .devis-card > *{ min-width:0; }
  .devis-card .icon{
    width:74px; height:74px; flex:none; border-radius:18px; background:rgba(111,156,150,.14);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent-deep); font-size:2.4rem;
  }
  .devis-card h3{ font-size:1.45rem; margin-bottom:.4em; }
  .devis-card p{ color:var(--ink-soft); margin:0 0 22px; font-size:.99rem; }
  .devis-card p strong{ color:var(--ink); }

  /* récapitulatif des tarifs - flex plutôt que grid : cinq cartes tombent
     en 4+1 dans une grille auto-fit, ce qui laisse un orphelin collé à
     gauche. En flex, la dernière ligne se recentre d'elle-même. */
  .tarif-grid{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
  .tarif-card{
    flex:1 1 196px; min-width:196px; max-width:262px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:28px 22px; box-shadow:0 18px 36px -28px rgba(30,43,42,.55);
    display:flex; flex-direction:column;
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .tarif-card:hover{ transform:translateY(-3px); box-shadow:0 26px 46px -26px rgba(30,43,42,.6); }
  .tarif-card .kanji{
    font-family:'Cormorant Garamond', serif; font-size:1.5rem; color:var(--accent-deep);
    width:46px; height:46px; border-radius:12px; background:rgba(111,156,150,.14);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .tarif-card h3{ font-size:1.12rem; margin-bottom:.3em; }
  .tarif-card .amount{
    font-family:'Cormorant Garamond', serif; font-weight:700; font-size:1.85rem;
    color:var(--ink); line-height:1.1; margin:4px 0 6px;
  }
  .tarif-card .amount small{
    display:block; font-size:.8rem; font-weight:500; color:var(--ink-soft);
    font-family:'Inter', sans-serif; margin-top:4px;
  }
  .tarif-card .amount s{
    font-size:.6em; font-weight:500; color:var(--ink-soft); text-decoration:line-through;
    margin-right:.35em; font-family:'Inter', sans-serif;
  }
  .tarif-card .offer-badge{
    display:inline-flex; align-self:flex-start; align-items:center;
    font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
    color:#fff; background:var(--accent-warm); padding:4px 10px; border-radius:999px;
    margin-bottom:10px;
  }
  .tarif-card.tarif-card--offer{ border-color:var(--accent-warm); }
  .tarif-card p{ margin:0; font-size:.87rem; color:var(--ink-soft); }
  .tarif-card .card-foot{ margin-top:auto; padding-top:18px; }
  .tarif-card .card-foot a{
    font-weight:600; font-size:.86rem; color:var(--accent-deep);
    border-bottom:1.5px solid var(--accent); padding-bottom:2px; text-decoration:none;
    transition:opacity .2s;
  }
  .tarif-card .card-foot a:hover{ opacity:.7; }

  @media (max-width: 900px){
    .devis-card{ flex-direction:column; text-align:center; }
    .devis-card .cta-row{ justify-content:center; }
    .tarif-card{ flex:1 1 224px; max-width:none; }
  }
  @media (max-width: 620px){
    .page-hero{ padding-top:44px; }
    .chip-row{ gap:9px; }
    .chip{ padding:8px 15px; font-size:.83rem; }
    .tarif-card{ flex:1 1 100%; }
  }