/* ============================================================================
   Nolwenn Kevell — architecte d'intérieur · Studio NK
   Système de design "minimalisme chaleureux" : crème + marine + laiton
   Bricolage Grotesque (display, comme cadre-robain) + Hanken Grotesk (corps)
   ============================================================================ */

/* ------------------------------------------------------------ POLICES */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url('../fonts/bricolage-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url('../fonts/bricolage-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/hanken-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/hanken-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ------------------------------------------------------------ TOKENS */
:root{
  /* Papier / crème */
  --paper:#f5f1ea; --paper-2:#efe8dd; --paper-3:#e7dece; --card:#fbf8f2;
  /* Encre (texte) */
  --ink:#201f1c; --ink-2:#403d37;
  /* Marine (marque) */
  --navy:#123150; --navy-2:#1a4067; --navy-deep:#0b2135; --navy-abyss:#081a2b;
  /* Laiton (accent signature) */
  --brass:#a8814f; --brass-lt:#caa877; --brass-deep:#8a6739;
  /* Gris chaud */
  --stone:#6f6d69;
  /* .56 donnait un contraste de 3,7 sur le crème — sous le seuil d'accessibilité
     (4,5). À .68 le gris reste discret mais devient lisible : 5,4. */
  --muted:rgba(32,31,28,.68); --muted-2:rgba(32,31,28,.4);
  --line:rgba(32,31,28,.14); --hair:rgba(32,31,28,.07);
  /* Or "métal" (lettrage signature, filets) */
  --gold-metal:linear-gradient(102deg,#e9d3a2 0%,#caa877 30%,#a8814f 52%,#caa877 74%,#efdcb0 100%);
  /* Polices */
  --disp:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Rythme */
  --wrap:1280px; --pad:clamp(22px,5vw,64px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-2:cubic-bezier(.4,0,.1,1);
  --hdr-h:76px;
}

/* ------------------------------------------------------------ RESET / BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16.5px;line-height:1.62;font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:600;
  line-height:1.04;letter-spacing:-.024em;color:var(--navy);text-wrap:balance}
p{margin:0}
::selection{background:var(--brass);color:#fff}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
hr{border:0;border-top:1px solid var(--line);margin:0}

/* ------------------------------------------------------------ LAYOUT */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
.wrap-n{max-width:960px;margin:0 auto;padding:0 var(--pad)}
section{position:relative}
.block{padding:clamp(76px,11vh,140px) 0}
.block-sm{padding:clamp(52px,7vh,86px) 0}
.alt{background:var(--paper-2)}
.tint{background:var(--paper-3)}
.center{text-align:center}
.mxa{margin-left:auto;margin-right:auto}

/* Sur-titre (kicker) */
.kicker{display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-deep);margin:0 0 1.1rem}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.center .kicker{justify-content:center}

/* Échelle typo */
.display{font-size:clamp(2.7rem,6.6vw,5.6rem);line-height:.98;letter-spacing:-.022em}
h1,.h1{font-size:clamp(2.2rem,4.8vw,3.7rem);letter-spacing:-.018em;line-height:1.02}
h2,.h2{font-size:clamp(1.9rem,3.7vw,3rem)}
h3,.h3{font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.008em}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.sub{color:var(--muted)}
em,.it{font-style:italic}

/* Signature "métal" sur le dernier mot d'un titre */
.h-metal{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-right:.05em}

/* En-tête de section */
.sec-head{max-width:64ch;margin:0 0 clamp(38px,5vh,64px)}
/* en-tête resserrée (titre seul, sans sur-titre) : évite le grand vide au-dessus */
.sec-head-serre{margin-bottom:clamp(22px,3vh,36px)}
/* « Nolwenn Kevell, fondatrice Studio NK » remonte : la respiration entre les
   mosaïques et le portrait cumulait deux marges de section (≈144 px) — on la
   ramène à une seule, sur tous les écrans. */
.bloc-avant-studio{padding-bottom:clamp(26px,3.6vh,48px)}
#studio{padding-top:clamp(18px,2.6vh,36px)}
.sec-head.center{margin-left:auto;margin-right:auto}
.sec-head .lead{margin-top:1.2rem}

/* prose (pages éditoriales / récits) */
.prose{max-width:68ch}
.prose p{margin:0 0 1.15em;color:var(--ink-2);font-size:1.06rem;line-height:1.72}
.prose p:last-child{margin-bottom:0}
.prose h2,.prose h3{margin:2em 0 .7em;color:var(--navy)}

/* ------------------------------------------------------------ BOUTONS */
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.92em 1.6em;border-radius:2px;
  font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%);
  transform:translateX(-130%)}
.btn:hover::after{animation:btnBrille .75s var(--ease)}
@keyframes btnBrille{to{transform:translateX(130%)}}
.btn svg{width:1.02em;height:1.02em;transition:transform .35s var(--ease)}
.btn-primary{background:var(--navy);color:#f3ede2}
.btn-primary:hover{background:var(--navy-deep);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(11,33,53,.8)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-deep);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(138,103,57,.75)}
.btn-brass:hover svg{transform:translateX(4px)}
.btn-ghost{background:var(--navy);color:#f3ede2}
.btn-ghost:hover{background:var(--navy-2);transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(11,33,53,.85)}
.on-dark .btn-ghost,.spotlight .btn-ghost{background:#f3ede2;color:var(--navy)}
.on-dark .btn-ghost:hover,.spotlight .btn-ghost:hover{background:#fff;color:var(--navy-deep)}
/* lien fléché */
.lk{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.9rem;
  color:var(--navy);letter-spacing:.01em;border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .3s,gap .3s}
.lk svg{width:1em;height:1em;transition:transform .35s var(--ease)}
.lk:hover{border-color:var(--brass);gap:.75em}
.lk:hover svg{transform:translateX(3px)}
.spotlight .lk,.on-dark .lk{color:var(--brass-lt)}

/* ------------------------------------------------------------ HEADER / NAV */
header.site{position:absolute;top:0;left:0;right:0;z-index:70;
  transition:background .4s var(--ease),box-shadow .4s,transform .4s var(--ease)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:0;z-index:2}
/* Le logo BLEU est le seul logo du header, sur toutes les pages et dans tous les états
   (demande 27/07) ; au-dessus du héros, le voile lumineux du haut des photos garantit
   sa lisibilité (écriture grise comprise) et celle des liens marine. */
.brand img{height:54px;width:auto}
/* header solide (au scroll / pages sans héros) */
header.site.solid{position:fixed;background:rgba(245,241,234,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--hair),0 18px 40px -34px rgba(11,33,53,.6)}

nav.main{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px)}
.nav-link{font-family:var(--sans);font-weight:500;font-size:.92rem;letter-spacing:.01em;
  color:var(--ink-2);position:relative;padding:6px 0;transition:color .3s}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--brass);transition:right .35s var(--ease)}
.nav-link:hover{color:var(--navy)}
.nav-link:hover::after,.nav-link.actif::after{right:0}
.nav-link.actif{color:var(--navy)}
/* (.nav-cta retiré le 10/08 : le bouton « Prendre rendez-vous » du header
   faisait doublon avec le lien Contact — même destination) */
.burger{display:none;width:30px;height:22px;position:relative;z-index:110}
.burger span{position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .4s var(--ease),opacity .3s,top .3s,background .3s}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:10px}.burger span:nth-child(3){top:18px}
body.menu-ouvert .burger span:nth-child(1){top:10px;transform:rotate(45deg);background:#f2ece1}
body.menu-ouvert .burger span:nth-child(2){opacity:0}
body.menu-ouvert .burger span:nth-child(3){top:10px;transform:rotate(-45deg);background:#f2ece1}

/* Drawer mobile */
.drawer{position:fixed;inset:0;z-index:100;background:var(--navy-deep);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
body.menu-ouvert .drawer{opacity:1;visibility:visible}
/* menu ouvert : l’entête repasse AU-DESSUS du tiroir, sinon la croix de
   fermeture est recouverte et le menu ne se referme plus au doigt.
   Seule la croix reste visible — le logo et la navigation s’effacent. */
body.menu-ouvert header.site{z-index:120}
body.menu-ouvert header.site .brand,
body.menu-ouvert header.site nav.main{opacity:0;pointer-events:none}
.drawer nav{display:flex;flex-direction:column;align-items:flex-start}
.drawer a{display:block;font-family:var(--disp);font-size:clamp(2rem,7vw,3.2rem);color:#f2ece1;padding:.18em 0;line-height:1.1;
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s}
body.menu-ouvert .drawer a{opacity:1;transform:none}
.drawer a:hover{color:var(--brass-lt)}
.drawer a:nth-child(1){transition-delay:.08s}.drawer a:nth-child(2){transition-delay:.14s}
.drawer a:nth-child(3){transition-delay:.2s}.drawer a:nth-child(4){transition-delay:.26s}
.drawer a:nth-child(5){transition-delay:.32s}.drawer a:nth-child(6){transition-delay:.38s}
.drawer .drawer-foot{margin-top:clamp(30px,6vh,60px);font-family:var(--sans);font-size:1rem;
  color:rgba(242,236,225,.7);display:flex;flex-direction:column;gap:.4em;opacity:0;transition:opacity .5s .44s}
body.menu-ouvert .drawer .drawer-foot{opacity:1}
.drawer .drawer-foot a{font-family:var(--sans);font-size:1rem;color:var(--brass-lt);padding:0}

/* barre de progression scroll */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--gold-metal);width:100%;
  transform:scaleX(0);transform-origin:0 50%;z-index:90}

/* ------------------------------------------------------------ HÉROS */
/* --h-mani est posée par nk.js sur mobile : le héros se raccourcit juste ce
   qu'il faut pour que la citation qui le suit tienne ENTIÈRE dans l'écran,
   quelle que soit sa longueur (elle est modifiable dans l'admin). */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:clip;
  background:var(--navy-abyss)}
.hero-media{position:absolute;inset:0;z-index:0}
/* ⚠ La 1re photo doit être opaque IMMÉDIATEMENT (voir .hero-slide.actif:first-child
   plus bas) : avec un fondu d'entrée, Google considère que la plus grande image de
   l'écran n'est affichée qu'à la FIN du fondu — 4,6 s de retard mesurés. Le fondu
   croisé ne concerne que les photos suivantes. */
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 2.6s cubic-bezier(.4,0,.2,1);
  will-change:opacity}
.hero-slide.actif{opacity:1}
.hero-slide.actif:first-child{opacity:1;transition:none;animation-delay:0s}
/* le zoom lent démarre après le premier affichage : sinon le navigateur retarde
   la peinture de la photo (l'élément le plus grand de l'écran) */
/* (règle remplacée par .hero-media.anime ci-dessus) */
/* Ken Burns façon cadres-robain : zoom + panoramique vertical, easing, origine 52 %
   (will-change:transform = couche GPU permanente : aucun à-coup au changement) */
.hero-slide img{width:100%;height:100%;object-fit:cover;transform-origin:center 52%}
/* le zoom (et la couche GPU qu'il réclame) n'arrive qu'avec .anime, posée par le
   script une fois la première photo affichée */
.hero-media.anime .hero-slide img{will-change:transform;animation:kenburns 24s var(--ease) infinite alternate}
/* Voile de LUMIÈRE (thème « lumière blanche ») : brume claire en haut (lisibilité du
   header bleu) et en bas (repère Défiler), halo doux au centre derrière le monogramme. */
.hero-media::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(248,244,236,.52) 0%,rgba(248,244,236,.12) 30%,rgba(248,244,236,.08) 56%,rgba(248,244,236,.44) 100%),
             radial-gradient(56% 42% at 50% 47%,rgba(255,253,247,.34),transparent 72%)}
/* Transition lumineuse du diaporama, version LENTE et délicate (08/08) : la lueur
   monte doucement (1.2 s) au changement de photo puis s'évanouit très lentement
   (2.4 s) pendant le long fondu croisé (2.6 s). */
.hero-lueur{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 50% 50%,rgba(255,254,250,.95),rgba(255,254,250,.55) 55%,rgba(255,254,250,.22) 100%);
  transition:opacity 2.4s cubic-bezier(.4,0,.2,1)}
.hero-media.lum .hero-lueur{opacity:.34;transition-duration:1.2s}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.13) translateY(-1.6%)}}
@media (prefers-reduced-motion:reduce){.hero-media.anime .hero-slide img{animation:none}}
.hero{align-items:center}
@media (max-width:860px){
  /* Valeur de départ PROCHE du résultat : la citation qui suit fait ~185 px.
     Sans elle, le JS raccourcissait le héros après le premier affichage et toute
     la page sautait (« décalage de mise en page » sanctionné par Google). */
  .hero{min-height:var(--h-hero,calc(100svh - 185px))}
}
.hero-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding-top:0;padding-bottom:0}
/* ⚠ Le logo doit tenir compte de la HAUTEUR autant que de la largeur.
   Historique (12/08) : depuis que le héros raccourcit sur téléphone pour laisser
   toute la place à la citation, sa hauteur varie beaucoup — alors que le logo
   restait dimensionné en largeur seule, avec un plancher de 190 px. Résultat :
   sur un écran bas (téléphone en paysage, fenêtre écrasée, navigateur zoomé) le
   héros se tassait et le logo occupait jusqu'à 70 % de sa hauteur. D'où les trois
   limites, la plus petite l'emportant :
     · clamp(...)  la taille voulue par le design ;
     · 44vw        jamais plus de 44 % de la largeur (petits téléphones) ;
     · 34svh       jamais plus de 34 % de la hauteur d'écran — calibré pour ne
                   RIEN changer sur ordinateur (à 900 px de haut : 306 > 300).
   ⚠ La première ligne est un REPLI : un navigateur trop ancien pour « svh »
   ignorerait la seconde, et sans elle le logo s'afficherait à sa taille d'origine
   (759 px de large). */
.hero-logo{width:clamp(190px,22vw,300px);
  width:min(clamp(190px,22vw,300px),44vw,34svh);height:auto;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 16px 40px rgba(11,33,53,.32))}
/* le logo « s'écrit » à l'arrivée — CLIP-PATH (pas de masque : un masque composite
   avec un léger voile rectangulaire sur photo). Marges négatives = l'ombre portée
   n'est pas rognée ; sans JS : var(--rev,1)=1 → visible. */
/* marges très larges : le bord du clip tombe là où l'ombre floue est déjà
   indétectable (sinon : rectangle fantôme sur les photos claires) */
html.js-anim .hero-logo{
  clip-path:inset(-60% calc((1 - var(--rev,1))*220% - 60%) -80% -60%)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero .kicker{color:var(--brass-lt)}
.hero h1{color:#f6f1e8;max-width:16ch;
  font-size:clamp(2.9rem,7.4vw,6.4rem);line-height:.98;letter-spacing:-.028em;font-weight:400}
.hero h1 em{font-style:italic;color:#f6f1e8}
.hero-sub{color:rgba(246,241,232,.82);font-size:clamp(1.05rem,1.6vw,1.35rem);max-width:44ch;
  margin:1.4rem 0 2.2rem;line-height:1.55}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.hero-cue{position:absolute;left:var(--pad);bottom:26px;z-index:2;display:flex;align-items:center;gap:.7em;
  color:rgba(11,33,53,.62);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase}
.hero-cue .line{width:1px;height:34px;background:linear-gradient(var(--brass),transparent);
  animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.5;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}
.hero-dots{position:absolute;right:var(--pad);bottom:30px;z-index:2;display:flex;gap:9px}
.hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(246,241,232,.32);transition:background .3s,transform .3s}
.hero-dots button.actif{background:var(--brass-lt);transform:scale(1.15)}

/* page-hero (pages internes) */
.page-hero{position:relative;padding:calc(var(--hdr-h) + clamp(48px,9vh,96px)) 0 clamp(40px,6vh,72px);
  background:var(--navy-deep);color:#f4efe5;overflow:clip}
.page-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 78% -10%,rgba(202,168,119,.16),transparent 55%),
             radial-gradient(90% 70% at 12% 120%,rgba(26,64,103,.55),transparent 60%)}
.page-hero .wrap,.page-hero .wrap-n{position:relative;z-index:1;text-align:center}
.page-hero h1{margin-left:auto;margin-right:auto;max-width:26ch}
.page-hero .lead{margin-left:auto;margin-right:auto}
.page-hero .crumbs{justify-content:center}
.page-hero h1{color:#f8f3ea;font-size:clamp(2.3rem,5.4vw,4.2rem);letter-spacing:-.02em}
.page-hero .kicker{color:var(--brass-lt)}
.page-hero .lead{color:rgba(244,239,229,.78);margin-top:1.1rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.5em;font-size:.8rem;color:rgba(244,239,229,.86);margin-bottom:1.4rem}
.crumbs a:hover{color:var(--brass-lt)}
.crumbs span{opacity:.72}
.fiche-tete .crumbs span{opacity:1;color:var(--muted)}

/* ------------------------------------------------------------ RÉVÉLATIONS (gated js-anim) */
html.js-anim .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js-anim .reveal.vu{opacity:1;transform:none}
html.js-anim .reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
html.js-anim .reveal-img.vu{clip-path:inset(0 0 0 0)}
/* révélation « lueur de lumière » : tout le groupe apparaît D'UN COUP dans un
   éclat blanc qui retombe (mosaïques de l'accueil, champs d'action) */
html.js-anim .reveal-lueur{opacity:0;filter:brightness(2.35) saturate(.6);
  transition:opacity 2.1s cubic-bezier(.3,0,.2,1),filter 3s cubic-bezier(.3,0,.2,1)}
html.js-anim .reveal-lueur.vu{opacity:1;filter:brightness(1) saturate(1)}
/* les éléments enfants n'ont plus d'animation individuelle (ni délai en cascade) */
html.js-anim .reveal-lueur .reveal{opacity:1;transform:none;transition:none}
/* titre "write-on" par masque */
html.js-anim .tw{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--rev,1)*124% - 18%),transparent calc(var(--rev,1)*124% - 3%));
          mask-image:linear-gradient(90deg,#000 calc(var(--rev,1)*124% - 18%),transparent calc(var(--rev,1)*124% - 3%));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ------------------------------------------------------------ MOSAÏQUE RÉALISATIONS */
.mosaique{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,18px)}
.tuile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-3);border-radius:2px}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.tuile .voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,26,43,0) 34%,rgba(8,26,43,.16) 60%,rgba(8,26,43,.72) 100%);
  opacity:.55;transition:opacity .5s}
.tuile .tuile-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,22px);
  color:#f6f1e8;transform:translateY(8px);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tuile .tuile-txt .t-lieu{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-lt);margin-bottom:.35em;font-weight:600}
.tuile .tuile-txt .t-titre{display:block;font-family:var(--disp);font-size:clamp(1.1rem,1.5vw,1.5rem);line-height:1.05;color:#f8f3ea}
.tuile .tuile-plus{position:absolute;top:16px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(246,241,232,.5);display:grid;place-items:center;color:#f6f1e8;
  opacity:0;transform:scale(.8) rotate(-20deg);transition:.45s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .tuile:hover img{transform:scale(1.06)}
  .tuile:hover .voile{opacity:.9}
  .tuile:hover .tuile-txt{opacity:1;transform:none}
  .tuile:hover .tuile-plus{opacity:1;transform:none}
}
/* sur tactile : titres toujours visibles */
@media (hover:none){
  .tuile .tuile-txt{opacity:1;transform:none}
  .tuile .voile{opacity:.82}
}
.mosaique-titre{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:0 0 clamp(20px,2.6vh,34px);flex-wrap:wrap}
.mosaique-titre h2{color:var(--navy)}
.mosaique-titre .compte{font-size:.8rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

/* Cartes projet (page réalisations) — variante rectangulaire éditoriale */
.grille-projets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,44px) clamp(18px,2vw,30px)}
@media (max-width:1100px){.grille-projets{grid-template-columns:repeat(2,1fr)}}
.carte-projet{display:block;position:relative}
.carte-projet .cadre{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:2px;background:var(--paper-3)}
.carte-projet .cadre-img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.carte-projet .badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(245,241,234,.92);
  color:var(--navy);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.5em .8em;border-radius:2px}
.carte-projet .meta{padding:1.1rem 0 0}
.carte-projet .meta .lieu{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);font-weight:600}
.carte-projet .meta h2,.carte-projet .meta h3{margin:.3em 0 .2em;color:var(--navy);transition:color .3s}
.carte-projet .meta .st{color:var(--muted);font-size:.95rem}
@media (hover:hover) and (pointer:fine){
  .carte-projet:hover .cadre-img{transform:scale(1.045)}
  .carte-projet:hover .meta h2,.carte-projet:hover .meta h3{color:var(--brass-deep)}
}

/* filtres */
.filtres{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 clamp(28px,4vh,48px)}
.chip{padding:.6em 1.15em;border:1px solid var(--line);border-radius:99px;font-size:.82rem;font-weight:600;
  letter-spacing:.02em;color:var(--ink-2);transition:.3s var(--ease)}
.chip:hover{border-color:var(--navy)}
.chip.on{background:var(--navy);color:#f3ede2;border-color:var(--navy)}

/* ------------------------------------------------------------ RÉALISATIONS EN ÉCRAN SCINDÉ */
.duo-rea{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(22px,3vw,52px);align-items:start}
.col-rea{border-top:3px solid var(--brass);padding-top:clamp(18px,2vw,26px);text-align:center}
.col-rea.col-pro{border-top-color:var(--navy)}
.rea-head{margin-bottom:clamp(16px,2vh,26px)}
.rea-head h2{font-size:clamp(1.7rem,2.8vw,2.5rem)}
.rea-head .kicker{justify-content:center}
/* contraste : var(--muted) sur crème ne passait pas le seuil d'accessibilité */
.rea-head .rea-count{display:block;margin-top:.4em;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.rea-sep{position:relative;background:var(--line);align-self:stretch}
.rea-sep span{position:absolute;top:50%;left:50%;width:9px;height:9px;background:var(--brass);
  transform:translate(-50%,-50%) rotate(45deg)}
.mini-mosaique{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,20px)}
.mini-mosaique .tuile .tuile-txt{padding:10px}
.mini-mosaique .tuile .tuile-txt .t-titre{font-size:.95rem}
.mini-mosaique .tuile .tuile-txt .t-lieu{font-size:.6rem;margin-bottom:.2em}
.mini-mosaique .tuile .tuile-plus{width:30px;height:30px;top:10px;right:10px}
/* MOBILE : on garde la disposition d'origine (2 tuiles carrées par ligne,
   demande de Benjamin le 10/08) — seule la LISIBILITÉ change : le lieu et le
   titre restent affichés en permanence (le survol n'existe pas au doigt), sur
   un voile renforcé, avec des tailles calées pour une tuile d'environ 160 px. */
@media (max-width:700px){
  .mini-mosaique{gap:10px}
  .mini-mosaique .tuile .voile{opacity:.92;
    background:linear-gradient(180deg,rgba(11,33,53,.04) 26%,rgba(11,33,53,.34) 58%,rgba(11,33,53,.84))}
  .mini-mosaique .tuile .tuile-txt{padding:9px 9px 11px;opacity:1;transform:none}
  .mini-mosaique .tuile .tuile-txt .t-lieu{font-size:.6rem;letter-spacing:.1em;margin-bottom:.25em}
  .mini-mosaique .tuile .tuile-txt .t-titre{font-size:.98rem;line-height:1.12;
    text-shadow:0 1px 10px rgba(8,26,43,.5)}
}
.col-rea .lk{margin-top:1.1rem}
@media (max-width:1040px){
  .duo-rea{grid-template-columns:1fr}
  .rea-sep{height:1px;width:100%;margin:6px 0}
  .rea-sep span{left:50%}
}
/* (ancienne règle « 2 colonnes sous 600px » retirée le 10/08 : illisible sur
   téléphone — remplacée par la colonne unique du bloc @media 700px ci-dessus) */

/* ------------------------------------------------------------ LA MÉTHODE — processus épuré */
/* Par défaut (mobile / sans JS) : étapes empilées. Avec .prc-anime : sticky + progression scrubbée. */
.prc-zone{position:relative}
.prc-steps{display:none}
.prc-pans .prc-pan{margin-bottom:clamp(30px,4vh,48px)}
.prc-pan .st{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.35em;display:block}
.prc-pan h3{font-size:clamp(1.4rem,2.2vw,1.9rem);color:var(--navy);margin-bottom:.7em}
.prc-pan p{color:var(--ink-2);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.7;margin-bottom:.85em;max-width:56ch}
.prc-pan .livrable{margin-top:1em;padding:.9em 1.1em;background:var(--paper);border-left:2px solid var(--brass);border-radius:2px;font-size:.88rem}
.prc-cta{margin-top:clamp(20px,3vh,32px)}
/* Mode animé (desktop + JS) */
.prc-anime{height:400vh}
.prc-anime .prc-sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(16px,3vh,30px) 0}
.prc-anime .prc-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(30px,5vw,84px);align-items:stretch}
.prc-anime .prc-steps{display:block;position:relative;padding-left:26px}
.prc-track{position:absolute;left:0;top:8px;bottom:8px;width:3px;background:var(--line);border-radius:3px}
.prc-fil{position:absolute;top:0;left:0;width:100%;height:0;background:var(--gold-metal);border-radius:3px}
.prc-step{display:flex;align-items:center;gap:clamp(.7em,1.4vw,1.1em);padding:clamp(14px,2.6vh,26px) 0;opacity:.4;
  width:100%;text-align:left;cursor:pointer;background:none;border:0;
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.prc-step:hover{opacity:.8}
.prc-step .n{font-family:var(--disp);font-size:clamp(2.4rem,3.8vw,3.6rem);line-height:.9;min-width:1.45em;
  color:transparent;-webkit-text-stroke:1.2px rgba(18,49,80,.34);
  transition:all .45s var(--ease)}
.prc-step .pt{display:block;font-family:var(--disp);font-size:clamp(1.15rem,1.8vw,1.6rem);color:var(--navy);line-height:1.12}
.prc-step .pst{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.3em;font-weight:600}
.prc-step.fait{opacity:.62}
.prc-step.fait .n{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:0;opacity:.85}
.prc-step.on{opacity:1;transform:translateX(8px)}
.prc-step.on .n{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;-webkit-text-stroke:0;transform:scale(1.06);transform-origin:left center}
.prc-step.on .pst{color:var(--brass)}
.prc-anime .prc-pans{position:relative;height:min(420px,calc(100svh - 320px))}
.prc-anime .prc-pan{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);overflow:auto;padding-right:10px;
  scrollbar-width:thin;pointer-events:none}
.prc-anime .prc-pan.on{opacity:1;transform:none;pointer-events:auto}
.prc-anime .prc-pan::-webkit-scrollbar{width:5px}
.prc-anime .prc-pan::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.prc-anime .prc-pan::-webkit-scrollbar-track{background:transparent}
@media (max-width:1040px){.prc-anime{height:auto}.prc-anime .prc-sticky{position:relative;min-height:0}}

/* ------------------------------------------------------------ LA MÉTHODE — la ligne se dessine (principe « route » tfr) */
.route-corps{position:relative;max-width:940px;margin:0 auto}
.route-ligne{position:absolute;left:50%;margin-left:-1.5px;top:10px;bottom:10px;width:3px;
  background:var(--line);border-radius:3px}
.route-fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--gold-metal);border-radius:3px}
/* crayon réaliste : la POINTE (bas du svg) touche l'extrémité du trait qu'il dessine */
.route-crayon{position:absolute;left:50%;top:0;width:30px;height:62px;transform:translate(-50%,-94%) rotate(-3deg);
  transform-origin:50% 96%;opacity:0;transition:opacity .3s;filter:drop-shadow(0 6px 10px rgba(18,49,80,.3))}
.route-crayon svg{display:block;width:100%;height:100%}
/* étape courante AGRANDIE (échelle pilotée par anim.js) ; opacité comme avant via .active.
   Chaque étape = un RANG en 2 colonnes autour de la ligne : texte d'un côté, photo en
   vis-à-vis — le scale s'applique au rang entier (origin = la ligne, au centre). */
.route-etape{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(2*clamp(28px,3.8vw,52px));
  align-items:center;padding:clamp(16px,2.8vh,34px) 0;
  /* .42 puis .62 rendaient le texte des étapes en attente illisible (contraste sous
     le seuil d'accessibilité). À .85 la mise en avant de l'étape courante repose
     surtout sur le léger agrandissement — l'effet reste, le texte se lit. */
  opacity:.85;transition:opacity .55s var(--ease);will-change:opacity,transform;transform-origin:center center}
.route-cell{grid-row:1}
.route-etape.droite .route-cell{grid-column:2;text-align:left}
.route-etape.gauche .route-cell{grid-column:1;text-align:right}
.route-etape.active{opacity:1}
/* photo de l'étape (MÊME format 4:3 pour les 4), collée côté ligne */
.route-fig{grid-row:1;position:relative;border-radius:2px;overflow:hidden;background:var(--paper-3);
  width:100%;max-width:400px;box-shadow:0 26px 54px -34px rgba(11,33,53,.42)}
.route-etape.droite .route-fig{grid-column:1;margin-left:auto}
.route-etape.gauche .route-fig{grid-column:2;margin-right:auto}
.route-fig img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.route-fig::after{content:"";position:absolute;inset:0;border:1px solid var(--hair)}
@property --rf{syntax:'<number>';inherits:false;initial-value:1}
.rn{position:relative;display:inline-block;font-family:var(--disp);font-size:clamp(2.5rem,4.6vw,3.8rem);line-height:.9;
  letter-spacing:-.02em;margin-bottom:.12em}
.rn-ghost{color:transparent;-webkit-text-stroke:1.3px rgba(18,49,80,.3)}
.rn-fill{position:absolute;inset:0;background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;clip-path:inset(-4% calc((1 - var(--rf,1))*100%) -4% 0);will-change:clip-path}
/* le doré est atténué par l'opacité de l'étape : version plus foncée pour rester
   lisible même quand l'étape n'est pas celle en cours */
.route-txt .st{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#5c4423;
  font-weight:600;margin-bottom:.35em}
.route-txt h3{font-size:clamp(1.3rem,2vw,1.75rem);color:var(--navy);margin-bottom:.45em}
.route-txt p{color:var(--ink-2);font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.64;max-width:50ch;
  margin-bottom:.85em}
.route-txt p:last-child{margin-bottom:0}
.gauche .route-txt p{margin-left:auto}
.prc-cta{text-align:center}
/* sans animation (mobile étroit, JS absent, animations réduites) : tout est visible et rempli */
.route-zone:not(.route-anime) .route-fill{height:100%}
.route-zone:not(.route-anime) .route-crayon{display:none}
.route-zone:not(.route-anime) .route-etape{opacity:1;transform:none;filter:none}
@media (max-width:860px){
  .route-corps{max-width:none;padding-left:34px}
  .route-ligne{left:8px;margin-left:0}
  .route-etape,.route-etape.gauche,.route-etape.droite{display:block;width:100%;margin:0;text-align:left}
  /* toutes les étapes s'alignent à GAUCHE sur mobile — numéro compris (les rangs
     « gauche » gardaient un text-align:right hérité de la vue deux colonnes) */
  .route-etape.gauche .route-cell,.route-etape.droite .route-cell{text-align:left}
  .gauche .route-txt p{margin-left:0}
  .route-etape.gauche .route-fig,.route-etape.droite .route-fig{margin:14px 0 0;max-width:440px}
  .rn{font-size:2.6rem}
}

/* ------------------------------------------------------------ MANIFESTE COMPACT */
/* le manifeste : bande MARINE, texte blanc à nuances dorées (clip du dégradé métal
   sur TOUT le texte — le CMS ne remplace que le contenu du span, le style tient). */
.manifeste-slim{padding:clamp(32px,5vh,58px) 0;border:0;
  background:linear-gradient(150deg,#0f2c4c 0%,var(--navy-deep) 100%)}
.mani{font-family:var(--disp);font-weight:500;letter-spacing:-.008em;
  font-size:clamp(1.06rem,1.6vw,1.38rem);line-height:1.6;
  max-width:60ch;margin:0 auto;text-align:center;text-wrap:balance;
  background:linear-gradient(104deg,#f8f1e2 0%,#e9d3a2 26%,#caa877 50%,#efdcb0 72%,#fbf5e8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.mani .mani-g{font-size:1.2em;font-weight:500;line-height:0;vertical-align:-.06em}
/* le manifeste « s'écrit » au fil du scroll (masque scrubbé par anim.js) */
html.js-anim .mani-anim{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--rev,1)*112% - 10%),rgba(0,0,0,.12) calc(var(--rev,1)*112% - 1%));
          mask-image:linear-gradient(90deg,#000 calc(var(--rev,1)*112% - 10%),rgba(0,0,0,.12) calc(var(--rev,1)*112% - 1%));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* ------------------------------------------------------------ DÉFILEMENT AUTO (avis & actus) */
.marq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marq-piste{display:flex;width:max-content;animation:marqDefile var(--marq-d,75s) linear infinite;will-change:transform}
/* le défilement est CONTINU (les flèches servent à l'arrêter) ; seule la
   navigation clavier dans une carte le met en pause, par accessibilité */
.marq:focus-within .marq-piste{animation-play-state:paused}
@keyframes marqDefile{to{transform:translateX(-50%)}}
/* variante inversée (actus) : part de -50% et revient — sens opposé aux avis */
.marq-inverse .marq-piste{animation-direction:reverse}
.marq .double{display:contents}
/* flèches de navigation des bandeaux (injectées par nk.js, hors du masque de fondu) */
.marq-nav{position:relative}
.marq-fleche{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(11,33,53,.66);color:var(--paper);opacity:.85;
  transition:background .3s var(--ease),opacity .3s var(--ease),transform .3s var(--ease)}
.marq-fleche svg{width:17px;height:17px}
.marq-fleche:hover{background:var(--navy);opacity:1}
.marq-fleche.mf-g{left:clamp(10px,1.6vw,26px)}
.marq-fleche.mf-d{right:clamp(10px,1.6vw,26px)}
.marq-fleche.mf-d svg{transform:scaleX(-1)}
@media (max-width:700px){.marq-fleche{width:36px;height:36px}.marq-fleche svg{width:14px;height:14px}}
@media (prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marq-piste{animation:none}
  .marq .double[aria-hidden="true"]{display:none}
}
.avh-card{width:clamp(280px,25vw,350px);margin-right:clamp(14px,1.6vw,24px);background:var(--card);
  border:1px solid var(--hair);border-radius:2px;padding:clamp(18px,1.8vw,26px);display:flex;flex-direction:column;flex:0 0 auto}
.avh-card .etoiles{color:var(--brass);letter-spacing:.14em;font-size:.82rem;margin-bottom:.7rem}
.avh-card blockquote{margin:0;font-size:.9rem;line-height:1.6;color:var(--ink-2);flex:1;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.avh-card .signe{margin-top:1rem;font-weight:600;font-size:.86rem;color:var(--navy)}
.avh-card .signe .role{color:var(--muted);font-weight:400}
.marq .carte-actu{width:clamp(300px,26vw,380px);flex:0 0 auto;margin-right:clamp(14px,1.6vw,24px)}
.marq .carte-actu .vis{aspect-ratio:16/10}

/* EXPERTISES résidentiel/commerciale : bandeau de réalisations sous le titre */
.flux-real-zone{padding:clamp(4px,1vh,12px) 0 clamp(26px,4.5vh,46px)}
.marq.flux-real .carte-flux{display:block;width:clamp(240px,24vw,330px);flex:0 0 auto;margin-right:clamp(12px,1.4vw,20px);
  border-radius:3px;overflow:hidden;background:var(--card);border:1px solid var(--hair);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.marq.flux-real .carte-flux:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(11,33,53,.14)}
.carte-flux img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.carte-flux .cf-info{display:flex;flex-direction:column;gap:.1em;padding:.6em .85em .7em}
.carte-flux .cf-info b{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:.92rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carte-flux .cf-info i{font-style:normal;color:var(--muted);font-size:.78rem}
.btn.btn-sm{padding:.55em 1.15em;font-size:.85rem}

/* MOBILE : cartes défilantes plus petites — on voit la carte centrée ET le début
   des voisines, donc on comprend tout de suite que ça défile. Placé APRÈS les
   largeurs de base (avis, actus, bandeaux de réalisations) pour les remplacer. */
@media (max-width:700px){
  .avh-card{width:min(72vw,262px);padding:16px 18px}
  .avh-card blockquote{font-size:.85rem;line-height:1.55;-webkit-line-clamp:7}
  .avh-card .signe{font-size:.8rem;margin-top:.8rem}
  .marq .carte-actu{width:min(70vw,254px)}
  .marq .carte-actu .corps{padding:14px 15px 16px}
  .marq .carte-actu h2,.marq .carte-actu h3{font-size:1.02rem}
  .marq .carte-actu p{font-size:.85rem}
  .marq.flux-real .carte-flux{width:min(60vw,216px)}
  .marq.flux-real .carte-flux .cf-info b{font-size:.86rem}
  /* les flèches descendent SOUS le bandeau : sur un écran étroit elles se
     posaient au milieu des cartes et masquaient les titres */
  .marq-nav{display:flex;flex-wrap:wrap;justify-content:center}
  .marq-nav .marq{flex:0 0 100%}
  .marq-fleche{position:static;transform:none;width:40px;height:40px;opacity:1;
    background:rgba(11,33,53,.9);margin:16px 9px 0}
  .marq-fleche svg{width:15px;height:15px}
  .marq-fleche.mf-g{order:2}
  .marq-fleche.mf-d{order:3}
}

/* EXPERTISES extension & réno : figure MAGAZINE flottée dans l'intro — photo AU
   RATIO COMPLET (jamais recadrée), le texte l'enveloppe comme dans les fiches.
   Avec photo, le bloc repasse à gauche (règle de composition : magazine = photo). */
.prose-centre.exp-mag{text-align:left}
.exp-mag::after{content:"";display:block;clear:both}
/* photos AGRANDIES (09/08) — même composition, plus de présence */
.exp-fig{float:right;width:min(60%,600px);margin:.3em 0 1.1em clamp(20px,2.8vw,38px);display:block}
.exp-fig.ef-verticale{width:min(42%,400px)} /* photo verticale : plus mesurée (règle des fiches) */
.exp-fig img{width:100%;height:auto;display:block;border-radius:4px}
a.exp-fig{color:inherit}
a.exp-fig img{transition:transform .8s var(--ease)}
a.exp-fig:hover img{transform:scale(1.02)}
.exp-fig .ef-cap{display:flex;flex-direction:column;gap:.2em;margin-top:.6em;font-size:.8rem;line-height:1.45}
.exp-fig .ef-kicker{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep)}
.exp-fig .ef-cap b{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:.94rem;line-height:1.3}
.exp-fig .ef-lien{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--brass-deep)}
.exp-fig .ef-lien svg{width:13px;height:13px;transition:transform .35s var(--ease)}
a.exp-fig:hover .ef-lien svg{transform:translateX(3px)}
@media (max-width:860px){.exp-fig,.exp-fig.ef-verticale{float:none;width:100%;margin:.2em 0 1.5em}}

/* ------------------------------------------------------------ MAGAZINE MOBILE (09/08)
   Sur téléphone : rythme court « un peu de texte, une photo » — les photos très
   hautes (portraits) sont recadrées en douceur pour ne jamais engloutir l'écran,
   et les espacements se resserrent. S'applique aussi aux photos posées via le CMS
   (mêmes classes, quel que soit le fichier téléversé). */
@media (max-width:700px){
  .chap-fig img,.exp-fig img{width:100%;max-height:52vh;object-fit:cover}
  .galerie .g img{max-height:46vh}
  .duo{grid-template-columns:1fr 1fr}
  .duo .g img{aspect-ratio:1/1;object-fit:cover;width:100%}
  .chap p{font-size:.97rem;line-height:1.66}
  .chap-sep{margin:clamp(24px,4vh,38px) auto}
  .chap-duo{margin-bottom:clamp(20px,3.5vh,34px)}
  .fiche-tete .lead{font-size:1rem}
}

/* PRESTATIONS : les étapes reprennent la ROUTE de l'accueil (mêmes classes, même
   moteur route() d'anim.js) — seul l'encadré « livrable » est spécifique. */
.etape-livrable{margin-top:1em;padding:1em 1.2em;background:var(--paper-2);
  border-left:2px solid var(--brass);border-radius:2px;font-size:.94rem;text-align:left}

/* ------------------------------------------------------------ SECTIONS SOMBRES (spotlight) */
.spotlight{position:relative;background:var(--navy-deep);color:#eee6d8;overflow:clip;isolation:isolate}
.spotlight::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% -8%,rgba(202,168,119,.14),transparent 52%),
             radial-gradient(80% 62% at 84% 16%,rgba(26,64,103,.5),transparent 60%)}
.spotlight h1,.spotlight h2,.spotlight h3{color:#f7f1e6}
.spotlight .kicker{color:var(--brass-lt)}
.spotlight .lead,.spotlight p{color:rgba(238,230,216,.8)}
.on-dark{color:#eee6d8}

/* ------------------------------------------------------------ STUDIO / PORTRAIT */
.studio-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,80px);align-items:center}
/* Portraits de Nolwenn dans leur ratio ORIGINAL (carrés 617x617, jamais recadrés) :
   cadre hairline, ombre douce — remplace l'ancien portrait-cadre ET le médaillon rond. */
.portrait-nature{position:relative;border-radius:2px;overflow:hidden;background:var(--paper-3);
  max-width:470px;box-shadow:0 30px 64px -38px rgba(11,33,53,.45)}
.portrait-nature img{width:100%;height:auto;display:block}
.portrait-nature::after{content:"";position:absolute;inset:0;border:1px solid var(--hair)}
.portrait-legende{margin-top:1rem;font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.signature{font-family:var(--disp);font-size:1.5rem;color:var(--navy)}

/* champs d'action */
.champs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.champs-5{grid-template-columns:repeat(5,1fr)}
.champ{padding:clamp(26px,2.8vw,38px) clamp(18px,1.8vw,26px);background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  border-radius:20px;text-align:center;border:1px solid rgba(202,168,119,.16);
  box-shadow:0 18px 40px -30px rgba(11,33,53,.6);
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.champ .num{display:none}
.champ .ch-ic{display:block;width:clamp(40px,3.4vw,50px);height:clamp(40px,3.4vw,50px);margin:0 auto 1em;
  transition:transform .5s var(--ease)}
.champ .ch-ic svg{width:100%;height:100%;display:block}
.champ h3{font-size:clamp(1.05rem,1.35vw,1.25rem);color:#f6f1e8;margin:0}
.champ p{font-size:.92rem;color:rgba(246,241,232,.75);line-height:1.6;margin-top:.6em}
@media (hover:hover){
  .champ:hover{transform:translateY(-6px);border-color:rgba(202,168,119,.55);box-shadow:0 26px 50px -28px rgba(11,33,53,.85)}
  .champ:hover .ch-ic{transform:translateY(-4px) scale(1.08)}
}

/* Les champs d'action sont des LIENS depuis le 05/08 (une page par expertise) :
   un <a> est inline par défaut, il faut le repasser en bloc pour la grille. */
.champ{display:block;color:inherit}
/* le lien reste VISIBLE au repos (sinon rien n'annonce que la carte est cliquable),
   il s'accentue au survol. */
.champ .champ-lk{display:inline-flex;align-items:center;gap:.45em;margin-top:.9em;
  font-size:.78rem;letter-spacing:.04em;color:var(--brass-lt);opacity:.62;
  transition:opacity .4s var(--ease),gap .35s var(--ease)}
.champ .champ-lk svg{width:1em;height:1em;transition:transform .35s var(--ease)}
@media (hover:hover){
  .champ:hover .champ-lk{opacity:1;gap:.7em}
  .champ:hover .champ-lk svg{transform:translateX(3px)}
}

/* ------------------------------------------------------------ EXPERTISES (hub + pages) */
/* DOMAINES D'INTERVENTION — grandes cartes claires à pictogramme, TOUT CENTRÉ,
   zones alignées d'une carte à l'autre (icône / titre / texte / lien en bas). */
.dom-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
.dom-carte{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--hair);
  border-radius:2px;overflow:hidden;color:inherit;
  box-shadow:0 22px 48px -34px rgba(11,33,53,.4);
  transition:transform .5s var(--ease),border-color .4s,box-shadow .5s}
/* Corps des pages expertises : moteur MAGAZINE des fiches (chapitres + figures
   flottées), à la largeur de l'encadré « périmètre » et avec des photos plus
   GRANDES que dans les fiches. Une page sans photo reste centrée. */
.exp-corps{max-width:1060px;margin:0 auto}
.exp-corps .chap{max-width:none}
.exp-corps .chap-fig.f-l{width:min(60%,600px)}
.exp-corps .chap-fig.f-m{width:min(50%,510px)}
.exp-corps .chap-fig.f-s{width:min(42%,420px)}
.exp-corps .chap-fig.f-pleine{width:100%;max-width:820px;margin-left:auto;margin-right:auto}
.exp-corps.exp-corps-centre .chap{text-align:center}
.exp-corps.exp-corps-centre .chap p{margin-left:auto;margin-right:auto;max-width:78ch}
@media (max-width:860px){.exp-corps .chap-fig,.exp-corps .chap-fig.f-l,.exp-corps .chap-fig.f-m,.exp-corps .chap-fig.f-s{float:none;width:100%;margin-left:0;margin-right:0}}

/* La DÉMARCHE (studio) : prose sobre, sans exergue ni lettrine (retour 09/08). */
.demarche-prose p{margin-bottom:1.05em}

/* séparateur doré des pages expertises : plus long, plus d'air */
.chap-sep.exp-sep{width:min(320px,52%);margin:clamp(30px,5vh,52px) auto clamp(34px,5.5vh,58px)}

/* mise en valeur des cartes DOMAINES : liseré doré signature en tête de carte,
   pastille cerclée d'or, nom plus imposant */
.dom-carte::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold-metal)}
.dom-carte .dc-pastille{border-color:rgba(168,129,79,.42);
  box-shadow:0 0 0 6px rgba(202,168,119,.09)}
.dom-carte .dc-nom{font-size:clamp(1.5rem,2.2vw,1.95rem)}

/* pastille du pictogramme + vrai bouton « Découvrir » (refonte hub 09/08 :
   même anatomie pour les 7 cartes, deux registres de couleur seulement) */
.dc-pastille{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;
  background:radial-gradient(120% 120% at 50% 20%,rgba(18,49,80,.10),rgba(18,49,80,.045));
  border:1px solid rgba(18,49,80,.14);margin-bottom:.35em;
  transition:transform .5s var(--ease),border-color .5s,background .5s}
.dc-pastille .exp-ic{width:46px;height:46px}
.sf-pastille{background:radial-gradient(120% 120% at 50% 20%,rgba(255,255,255,.13),rgba(255,255,255,.05));
  border-color:rgba(202,168,119,.35)}
.dc-btn{display:inline-flex;align-items:center;gap:.5em;margin-top:1em;
  padding:.5em 1.15em;border:1px solid var(--navy);border-radius:3px;
  font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--navy);
  transition:background .4s var(--ease),color .4s,gap .35s var(--ease)}
.dc-btn svg{width:14px;height:14px;transition:transform .35s var(--ease)}
.sf-btn{border-color:var(--brass-lt);color:var(--brass-lt)}
@media (hover:hover){
  .dom-carte:hover .dc-btn{background:var(--navy);color:#f5f1ea;gap:.75em}
  .dom-carte:hover .dc-pastille{transform:translateY(-4px);border-color:rgba(168,129,79,.5)}
  .sf-item:hover .sf-btn{background:var(--brass-lt);border-color:var(--brass-lt);color:var(--navy-deep);gap:.75em}
  .sf-item:hover .dc-pastille{transform:translateY(-4px);border-color:var(--brass-lt)}
  .sf-item:hover{transform:translateY(-6px);border-color:rgba(202,168,119,.55)}
}
.sf-item .dc-pre{color:var(--brass-lt)}
.sf-item .dc-nom{color:#f7f1e6;display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.25rem,1.8vw,1.6rem)}
.dom-carte .exp-ic{display:block;width:54px;height:54px;color:var(--navy);
  transition:transform .5s var(--ease);margin:0 auto .3em}
.dom-carte .exp-ic svg{width:100%;height:100%;display:block}
.dom-carte .dc-corps{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.55em;padding:clamp(22px,2.4vw,34px) clamp(20px,2.2vw,30px);flex:1}
.dom-carte .dc-titre{margin:0}
.dc-pre{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-deep);font-weight:600;margin-bottom:.35em}
.dom-carte .dc-nom{display:block;font-family:var(--disp);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.12;color:var(--navy)}
.dom-carte p{font-size:.92rem;line-height:1.6;color:var(--ink-2);margin:0;flex:1;max-width:44ch}
.dom-carte .lk{margin-top:.5em;border:0;padding:0;font-size:.84rem;color:var(--brass-deep)}
@media (hover:hover){
  .dom-carte:hover{transform:translateY(-6px);border-color:rgba(168,129,79,.45);box-shadow:0 30px 60px -32px rgba(11,33,53,.5)}
  .dom-carte:hover .exp-ic{transform:translateY(-3px) scale(1.06)}
}
/* SAVOIR-FAIRE — plus de bandeau-cadre : titre de section doré + les trois
   cartes MARINES posées en grand directement sur le fond (Benjamin 09/08) */
.sf-bande{margin-top:clamp(40px,6vh,72px)}
.sf-tete{margin-bottom:clamp(22px,3.4vh,36px)}
.sf-tete h3{font-size:clamp(1.9rem,3.7vw,3rem)} /* même taille que les h2 de section */
.sf-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.sf-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7em;
  background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid rgba(202,168,119,.22);border-radius:20px;
  padding:clamp(30px,3.2vw,50px) clamp(22px,2.4vw,36px);
  box-shadow:0 22px 48px -30px rgba(11,33,53,.65);
  transition:transform .5s var(--ease),border-color .4s,background .4s}
.sf-item h4{color:#f7f1e6}
.sf-item p{color:rgba(238,230,216,.78)}
.sf-item .exp-ic{display:block;width:64px;height:64px;color:var(--brass-lt);
  transition:transform .5s var(--ease);margin:0 auto .15em}
.sf-item .exp-ic svg{width:100%;height:100%;display:block}
.sf-item h4{color:#f7f1e6;font-family:var(--disp);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.3rem,1.8vw,1.55rem);line-height:1.15;margin:0}
.sf-item p{color:rgba(238,230,216,.78);font-size:.95rem;line-height:1.6;margin:0;flex:1}
.sf-item .lk{border:0;padding:0;font-size:.9rem;color:var(--brass-lt)}
@media (hover:hover){
  .sf-item:hover{transform:translateY(-5px);border-color:rgba(202,168,119,.5);
    background:linear-gradient(165deg,#1a4067 0%,var(--navy) 100%)}
  .sf-item:hover .exp-ic{transform:translateY(-3px) scale(1.06)}
}
/* PAGES EXPERTISES — colonne centrale symétrique : grand pictogramme au-dessus du
   titre, intro centrée LARGE et aérée, grand encadré central à deux colonnes. */
.exp-embleme{display:block;width:clamp(78px,8vw,110px);height:clamp(78px,8vw,110px);
  margin:0 auto clamp(10px,1.8vh,18px);color:var(--navy)}
.exp-embleme svg{width:100%;height:100%;display:block}
/* prose « plaquette » (sections SANS photo, partout sur le site) : bloc centré,
   large — pas compacté au milieu — et aéré */
.prose-centre{max-width:92ch;margin-left:auto;margin-right:auto;text-align:center}
.prose-centre p{line-height:1.78;margin-bottom:1.25em}
/* le pictogramme DANS la pastille garde sa taille dédiée (prime sur les règles carte) */
.dom-carte .dc-pastille .exp-ic,.sf-item .dc-pastille .exp-ic{width:46px;height:46px;margin:0}

/* « Ce que je prends en charge » : grand ÉCRIN MARINE à touches dorées (09/08) */
.exp-charge-v2{margin-top:clamp(38px,5.5vh,64px);max-width:1060px;margin-left:auto;margin-right:auto}
.exp-charge-marine{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid rgba(202,168,119,.24);border-radius:22px;
  padding:clamp(28px,3.6vw,52px) clamp(20px,3vw,48px);
  box-shadow:0 26px 56px -34px rgba(11,33,53,.7)}
.exp-charge-marine::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold-metal)}
.exp-charge-marine .sec-head{margin-bottom:clamp(18px,2.8vh,30px)}
.exp-charge-marine h2{color:#f7f1e6}
.exp-charge-marine .kicker{color:var(--brass-lt)}
.charge-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.charge-grille li{position:relative;background:rgba(246,241,232,.055);border:1px solid rgba(246,241,232,.16);border-radius:12px;
  padding:clamp(14px,1.8vw,22px) clamp(16px,2vw,24px) clamp(14px,1.8vw,22px) clamp(38px,3.4vw,50px);
  color:rgba(238,230,216,.88);line-height:1.55;font-size:.96rem;text-align:left;
  transition:border-color .4s,background .4s,transform .45s var(--ease)}
.charge-grille li::before{content:"";position:absolute;left:clamp(16px,1.8vw,22px);top:1.35em;width:7px;height:7px;
  background:var(--brass-lt);transform:rotate(45deg)}
@media (hover:hover){.charge-grille li:hover{border-color:rgba(202,168,119,.55);background:rgba(246,241,232,.09);transform:translateY(-2px)}}
.exp-charge-v2 .exp-charge-note{margin-top:1.5rem;text-align:center;border-top:0;padding-top:0}
.exp-charge-marine .exp-charge-note{color:rgba(238,230,216,.66)}
.exp-charge-marine .exp-charge-note .lk{color:var(--brass-lt)}
@media (max-width:700px){.charge-grille{grid-template-columns:1fr}}

.exp-charge-centre{max-width:920px;margin-left:auto;margin-right:auto}
.exp-charge-centre h2{text-align:center}
.exp-charge-centre ul{grid-template-columns:1fr 1fr;column-gap:2.4em;row-gap:.75em;text-align:left}
.exp-charge-centre .exp-charge-note{text-align:center}
/* « ce que je prends en charge » */
.exp-charge{margin-top:clamp(34px,5vh,56px);padding:clamp(24px,3vw,40px);
  background:var(--card);border:1px solid var(--hair);border-radius:18px}
.exp-charge h2{font-size:clamp(1.25rem,1.9vw,1.65rem);margin-bottom:1.1rem}
.exp-charge ul{list-style:none;margin:0;padding:0;display:grid;gap:.7em}
.exp-charge li{position:relative;padding-left:1.6em;color:var(--ink-2);line-height:1.6}
.exp-charge li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;
  background:var(--gold-metal);transform:rotate(45deg)}
.exp-charge-note{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:.92rem;color:var(--muted)}
/* citation d'avis sur une page expertise */
.exp-avis{margin:0 0 clamp(20px,3vh,30px);padding:clamp(22px,2.6vw,34px);background:var(--card);
  border:1px solid var(--hair);border-left:3px solid var(--brass);border-radius:4px}
.exp-avis blockquote{margin:.6em 0 .9em;font-size:clamp(1rem,1.2vw,1.08rem);line-height:1.62;color:var(--ink-2)}
.exp-avis figcaption{font-weight:600;color:var(--navy);font-size:.92rem}
/* encart de préparation — visible tant que Nolwenn n'a pas fourni ses contenus */
.exp-todo{padding:clamp(20px,2.6vw,32px);border:1px dashed rgba(168,129,79,.55);border-radius:14px;
  background:rgba(202,168,119,.07)}
.exp-todo-tete{font-family:var(--disp);font-weight:600;color:var(--brass-deep);font-size:1.05rem;margin-bottom:.9em}
.exp-todo-tete span{font-family:var(--sans);font-weight:400;font-size:.8rem;color:var(--muted);letter-spacing:0}
.exp-todo ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.exp-todo li{position:relative;padding-left:1.5em;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.exp-todo li::before{content:"→";position:absolute;left:0;color:var(--brass)}
.exp-todo-pied{margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(168,129,79,.25);
  font-size:.84rem;color:var(--muted);line-height:1.55}

/* 5 expertises pro : pastilles en LIGNE (compactes) */
.exp-ligne{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.2vw,16px)}
.exp-pill{display:inline-flex;align-items:center;gap:.6em;padding:.78em 1.35em;
  border:1px solid rgba(202,168,119,.45);border-radius:999px;color:#f6f1e8;font-weight:600;
  font-size:clamp(.9rem,1.05vw,1rem);background:rgba(246,241,232,.05);transition:.35s var(--ease)}
.exp-pill::before{content:"";width:7px;height:7px;background:var(--gold-metal);
  transform:rotate(45deg);flex:0 0 auto}
.exp-pill:hover{border-color:var(--brass-lt);background:rgba(246,241,232,.09);transform:translateY(-2px)}
/* variante fond CLAIR (maillage en bas des pages expertise) — DOIT rester après
   .exp-pill : sinon le crème de la version sombre l'emporte et le texte disparaît. */
.exp-pill-clair{border-color:rgba(168,129,79,.4);color:var(--navy);background:var(--card);font-size:.86rem}
.exp-pill-clair:hover{border-color:var(--brass);background:#fff}

/* convictions — cadres habités d'une lueur blanche (demande Benjamin 08/08) */
.convictions{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.conviction{position:relative;overflow:hidden;background:rgba(246,241,232,.05);
  border:1px solid rgba(246,241,232,.28);border-radius:18px;
  padding:clamp(24px,2.8vw,38px);
  transition:transform .55s var(--ease),border-color .55s,background .55s,box-shadow .55s var(--ease)}
.conviction::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -18%,rgba(255,255,255,.16),rgba(255,255,255,.05) 44%,transparent 70%);
  opacity:.85;transition:opacity .6s var(--ease)}
.conviction>*{position:relative}
.conviction:hover{transform:translateY(-7px);border-color:rgba(202,168,119,.75);
  background:rgba(246,241,232,.09);
  box-shadow:0 0 0 1px rgba(202,168,119,.22),0 22px 48px rgba(0,0,0,.28),0 0 46px rgba(255,255,255,.10)}
.conviction:hover::before{opacity:1.35}
.conviction:hover .conv-ic{color:var(--brass-lt);transform:scale(1.08)}
.conviction .conv-ic{transition:transform .55s var(--ease),color .55s}
.conviction .conv-ic{display:block;width:38px;height:38px;margin-bottom:.9em;opacity:.95}
.conviction .conv-ic svg{width:100%;height:100%;display:block}
.conviction h3{margin:0 0 .8em;color:#f7f1e6;font-size:1.4rem}
.conviction ul{list-style:none;margin:0;padding:0}
.conviction li{position:relative;padding-left:1.3em;margin-bottom:.6em;color:rgba(238,230,216,.82);font-size:.98rem;line-height:1.5}
.conviction li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brass-lt)}

/* Lueur blanche qui SUIT LA SOURIS sur toutes les zones bleu foncé du site
   (sections spotlight, bande du manifeste, pied de page, en-têtes marine des
   pages internes, cartes savoir-faire) — petite, très estompée, sans aucun
   bord net (dégradé en 4 paliers). nk.js pose --sx/--sy. */
footer.site{position:relative}
.manifeste-slim{position:relative}
.sf-item{position:relative}
@media (hover:hover){
  .spotlight::after,.manifeste-slim::after,footer.site::after,.page-hero::after,.exp-charge-marine::after{content:"";position:absolute;inset:0;
    pointer-events:none;opacity:0;transition:opacity .8s var(--ease);z-index:1;
    background:radial-gradient(400px circle at var(--sx,50%) var(--sy,50%),
      rgba(255,255,255,.085),rgba(255,255,255,.05) 30%,rgba(255,255,255,.02) 55%,transparent 78%)}
  .sf-item::after{content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .8s var(--ease);z-index:1;
    background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),
      rgba(255,255,255,.10),rgba(255,255,255,.055) 30%,rgba(255,255,255,.022) 55%,transparent 78%)}
  .spotlight.souris-la::after,.manifeste-slim.souris-la::after,footer.site.souris-la::after,
  .page-hero.souris-la::after,.sf-item.souris-la::after,.exp-charge-marine.souris-la::after{opacity:1}
}

/* ------------------------------------------------------------ MÉTHODE (scroll storytelling) */
.methode-zone{position:relative}
.methode-sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:clip}
.methode-inner{width:100%}
.methode-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:center}
.methode-rail{position:relative}
.methode-rail .fil{position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.methode-rail .fil::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--rp,0%);
  background:var(--gold-metal);transition:height .1s linear}
.etape-item{position:relative;padding:0 0 clamp(20px,3vh,34px) 44px;opacity:.4;transition:opacity .5s}
.etape-item:last-child{padding-bottom:0}
.etape-item .pin{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--line);background:var(--paper);display:grid;place-items:center;
  font-size:.62rem;font-weight:700;color:var(--muted);transition:.4s var(--ease)}
.etape-item.active{opacity:1}
.etape-item.active .pin{border-color:var(--brass);background:var(--brass);color:#fff;transform:scale(1.12)}
.etape-item h3{font-size:clamp(1.15rem,1.6vw,1.5rem);color:var(--navy)}
.etape-item .st{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.3em}
.methode-visuel{position:relative;aspect-ratio:4/3.2;border-radius:2px;overflow:hidden;background:var(--paper-3)}
.methode-visuel .v{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.methode-visuel .v img{width:100%;height:100%;object-fit:cover}
.methode-visuel .v.on{opacity:1;transform:none}
.methode-num{position:absolute;bottom:14px;right:18px;z-index:2;font-family:var(--disp);
  font-size:clamp(3rem,8vw,7rem);color:rgba(246,241,232,.9);line-height:1;mix-blend-mode:overlay}

/* ------------------------------------------------------------ STATS (compteurs "or") */
@property --nf{syntax:'<number>';inherits:true;initial-value:1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px);text-align:center}
.stat .n-wrap{position:relative;display:inline-block;font-family:var(--disp);
  font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1;font-weight:400;letter-spacing:-.02em}
.stat .nf-ghost{color:rgba(238,230,216,.16)}
.stat .nf-gold{position:absolute;inset:0;background:var(--gold-metal);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  clip-path:inset(0 calc((1 - var(--nf,1))*100%) 0 0);will-change:clip-path}
.stat .lbl{display:block;margin-top:.9rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,230,216,.7)}
.spotlight .stat .lbl{color:rgba(238,230,216,.7)}

/* ------------------------------------------------------------ TÉMOIGNAGES */
.temoignage{max-width:52ch}
.temoignage .etoiles{color:var(--brass);letter-spacing:.15em;font-size:.9rem;margin-bottom:1.2rem}
.temoignage blockquote{margin:0;font-family:var(--disp);font-size:clamp(1.2rem,2vw,1.7rem);
  line-height:1.4;color:var(--navy);font-weight:400;letter-spacing:-.01em}
.spotlight .temoignage blockquote{color:#f7f1e6}
.temoignage .signe{margin-top:1.3rem;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.spotlight .temoignage .signe{color:var(--brass-lt)}
.temoignage .signe .role{color:var(--muted);font-weight:400}
.avis-track{position:relative}
.avis-slide{display:none}
.avis-slide.on{display:block;animation:fadein .7s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.avis-nav{display:flex;gap:12px;margin-top:2rem;align-items:center}
.avis-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;transition:.3s}
.avis-nav button:hover{border-color:var(--navy);background:var(--navy);color:#f3ede2}
.spotlight .avis-nav button{border-color:rgba(238,230,216,.3);color:#eee6d8}
.spotlight .avis-nav button:hover{background:#f3ede2;color:var(--navy)}
.avis-points{display:flex;gap:8px;margin-left:auto}
.avis-points i{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:.3s}
.avis-points i.on{background:var(--brass);width:22px;border-radius:4px}

/* grille d'avis complets (page studio) */
.grille-avis{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,28px)}
.carte-avis{background:var(--card);border:1px solid var(--hair);border-radius:2px;padding:clamp(20px,2.4vw,32px);
  display:flex;flex-direction:column}
.carte-avis .etoiles{color:var(--brass);letter-spacing:.15em;font-size:.85rem;margin-bottom:.6rem}
.carte-avis .avis-date{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.carte-avis blockquote{margin:0;font-size:.99rem;line-height:1.68;color:var(--ink-2);flex:1}
.carte-avis .signe{margin-top:1.2rem;font-weight:600;font-size:.92rem;color:var(--navy)}
.carte-avis .signe .role{color:var(--muted);font-weight:400}
@media (max-width:860px){.grille-avis{grid-template-columns:1fr}}

/* ------------------------------------------------------------ ACTUALITÉS */
.grille-actus{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px)}
.carte-actu{display:flex;flex-direction:column;background:var(--card);border-radius:2px;overflow:hidden;
  border:1px solid var(--hair);transition:transform .5s var(--ease),box-shadow .5s}
.carte-actu .vis{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3)}
.carte-actu .vis img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.carte-actu .cat{position:absolute;top:12px;left:12px;background:rgba(11,33,53,.86);color:#f3ede2;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.45em .75em;border-radius:2px}
.carte-actu .corps{padding:clamp(18px,1.8vw,24px);display:flex;flex-direction:column;flex:1}
.carte-actu .date{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-deep);margin-bottom:.6em}
.carte-actu h2,.carte-actu h3{font-size:1.2rem;color:var(--navy);margin-bottom:.5em;line-height:1.15}
.carte-actu p{font-size:.92rem;color:var(--muted);line-height:1.55;flex:1}
.carte-actu .lk{margin-top:1.1rem}
@media (hover:hover){.carte-actu:hover{transform:translateY(-5px);box-shadow:0 26px 46px -34px rgba(11,33,53,.55)}
  .carte-actu:hover .vis img{transform:scale(1.05)}}

/* ------------------------------------------------------------ FICHE PROJET (détail) */
.projet-hero{position:relative;height:min(88svh,760px);overflow:clip;background:var(--navy-abyss);
  display:flex;align-items:flex-end}
.projet-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.projet-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,43,.42) 0%,transparent 34%,rgba(8,26,43,.2) 60%,rgba(8,26,43,.86) 100%)}
.projet-hero .wrap{position:relative;z-index:2;padding-bottom:clamp(34px,6vh,68px);color:#f6f1e8;
  padding-top:calc(var(--hdr-h) + 30px);text-align:center}
.projet-hero .crumbs{justify-content:center}
.projet-hero .crumbs{color:rgba(246,241,232,.7)}
.projet-hero .crumbs a:hover{color:var(--brass-lt)}
.projet-hero h1{color:#f8f3ea;font-size:clamp(2.4rem,5.6vw,4.6rem);letter-spacing:-.02em;max-width:18ch;margin:0 auto}
.projet-hero .st{color:var(--brass-lt);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;margin-bottom:1rem}
.projet-hero .st .cat-pill{color:rgba(246,241,232,.7)}

.projet-faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(16px,2vw,30px);
  padding:clamp(28px,4vh,44px) 0;border-bottom:1px solid var(--line)}
.fait .k{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.4em}
.fait .v{font-family:var(--disp);font-size:1.12rem;color:var(--navy);line-height:1.2}
.fait .v.sm{font-family:var(--sans);font-size:.95rem;color:var(--ink-2);font-weight:500}

/* récit + galerie entrelacée */
.recit-bloc{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px);
  max-width:70ch;margin:0 auto clamp(40px,6vh,72px)}
.recit-bloc h3{color:var(--navy);margin-bottom:.2em}
.figure{margin:0;position:relative;overflow:hidden;border-radius:2px;background:var(--paper-3)}
.figure img{width:100%;height:auto;display:block}
.figure figcaption{font-size:.8rem;color:var(--muted);margin-top:.6rem;letter-spacing:.02em}
.galerie{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,18px)}
.galerie .g{grid-column:span 6;overflow:hidden;border-radius:2px;background:var(--paper-3)}
.galerie .g.wide{grid-column:span 12}
.galerie .g.third{grid-column:span 4}
.galerie .g{display:flex;flex-direction:column}
.galerie .g img{width:100%;height:100%;flex:1;object-fit:cover;transition:transform 1.1s var(--ease)}
.galerie .g .g-cap{font-size:.78rem;color:var(--muted);padding:.5em .1em 0;letter-spacing:.02em}
@media (hover:hover){.galerie .g:hover img{transform:scale(1.04)}}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px)}
.duo .figure img{aspect-ratio:4/5;object-fit:cover}

/* ------------------------------------------------------------ FICHES & ARTICLES — mise en page MAGAZINE */
.fiche-tete{padding:calc(var(--hdr-h) + clamp(34px,5.5vh,60px)) 0 clamp(26px,4vh,44px);
  text-align:center;border-bottom:1px solid var(--hair);background:var(--paper)}
/* le fil d’ariane des fiches est sur fond CLAIR : la couleur claire héritée de
   .crumbs (prévue pour les en-têtes sur photo) y était illisible */
.fiche-tete .crumbs,.fiche-tete .crumbs span{justify-content:center;color:var(--ink-2)}
.fiche-tete .crumbs a{color:var(--ink-2)}
.fiche-tete .crumbs a:hover{color:var(--brass-deep)}
.fiche-tete .kicker{justify-content:center}
.fiche-tete h1{color:var(--navy);font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.02em;
  max-width:24ch;margin:0 auto}
.fiche-tete .lead{max-width:62ch;margin:1rem auto 0;text-align:center}
.faits-ligne{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  gap:.45em 1.1em;margin-top:1.5rem}
.faits-missions{margin-top:.5rem}
.fait-i .k{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);
  font-weight:600;margin-right:.55em}
.fait-i .v{font-size:.92rem;color:var(--ink-2)}
.fait-sep{color:var(--line);user-select:none}
/* chapitres : titre CENTRÉ, la photo flotte (taille proportionnée au texte),
   le texte coule à côté puis CONTINUE dessous (façon magazine) */
.chap{max-width:1000px;margin:0 auto clamp(26px,4.5vh,50px)}
.chap::after{content:"";display:block;clear:both}
.chap-titre{text-align:center;font-size:clamp(1.65rem,2.7vw,2.3rem);color:var(--navy);
  letter-spacing:-.02em;margin:0 0 clamp(18px,2.6vh,30px)}
.chap-fig{margin:0 0 1rem}
.chap-fig.f-l{width:min(45%,470px)}
.chap-fig.f-m{width:min(38%,410px)}
.chap-fig.f-s{width:min(30%,330px)}
.chap-fig.f-pleine{float:none;width:min(100%,780px);margin:clamp(18px,2.6vh,28px) auto 0}
.chap-fig img{width:100%;height:auto;border-radius:2px;display:block}
.chap-fig figcaption{margin-top:.5em;font-size:.78rem;color:var(--muted);letter-spacing:.02em;text-align:left}
.chap-fig.f-pleine figcaption{text-align:center}
.fig-droite{float:right;margin-left:clamp(24px,3.6vw,46px)}
.fig-gauche{float:left;margin-right:clamp(24px,3.6vw,46px)}
.chap h3{color:var(--navy);font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.5em}
.chap h2.chap-titre,.chap h3.chap-titre{font-size:clamp(1.65rem,2.7vw,2.3rem)}
.chap p{color:var(--ink-2);line-height:1.72;margin-bottom:.95em;font-size:1.01rem}
.chap p:last-child{margin-bottom:0}
.chap-duo{max-width:1000px;margin:0 auto clamp(26px,4.5vh,50px)}
/* séparateur de chapitre : trait d'or PARTIEL centré, losange au milieu */
.chap-sep{position:relative;width:min(230px,40%);height:1px;margin:clamp(34px,5.5vh,60px) auto;
  background:linear-gradient(90deg,transparent,var(--brass) 22%,var(--brass-lt) 50%,var(--brass) 78%,transparent)}
.chap-sep::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;
  background:var(--brass-lt);transform:translate(-50%,-50%) rotate(45deg)}
@media (max-width:860px){
  .chap-fig,.chap-fig.fig-droite,.chap-fig.fig-gauche,.chap-fig.f-l,.chap-fig.f-m,.chap-fig.f-s{
    float:none;width:100%;margin:0 0 1.1rem}
}

/* navigation projet suivant/précédent */
.projet-nav{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.projet-nav a{background:var(--paper);padding:clamp(28px,5vh,56px) var(--pad);transition:background .4s}
.projet-nav a:hover{background:var(--paper-2)}
.projet-nav .sens{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-deep);font-weight:600;margin-bottom:.6em;display:block}
.projet-nav .t{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,2rem);color:var(--navy)}
.projet-nav a.suiv{text-align:right}

/* ------------------------------------------------------------ CONTACT / FORMULAIRE */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,72px)}
.coord-item{display:flex;gap:14px;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:flex-start}
.coord-item:last-child{border-bottom:0}
.coord-item .ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--brass);flex-shrink:0}
.coord-item .ic svg{width:18px;height:18px}
.coord-item .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.2em}
.coord-item .v{font-size:1.05rem;color:var(--navy);font-weight:500}
.coord-item .v a:hover{color:var(--brass-deep)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .champ-f{display:flex;flex-direction:column;gap:.4em}
.form .champ-f.full{grid-column:1/-1}
.form label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.form label .req{color:var(--brass)}
.form input,.form textarea,.form select{padding:.85em .9em;background:var(--card);border:1px solid var(--line);
  border-radius:2px;transition:border-color .3s,box-shadow .3s;font-size:.98rem}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(168,129,79,.14)}
.form textarea{resize:vertical;min-height:130px}
.form .rgpd{grid-column:1/-1;display:flex;gap:.6em;align-items:flex-start;font-size:.82rem;color:var(--muted)}
.form .envoi{grid-column:1/-1;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.form .honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{grid-column:1/-1;padding:.9em 1em;border-radius:2px;font-size:.92rem;display:none}
.form-msg.ok{display:block;background:rgba(120,150,110,.14);color:#3f5a34;border:1px solid rgba(120,150,110,.4)}
.form-msg.err{display:block;background:rgba(170,80,70,.12);color:#8a3a30;border:1px solid rgba(170,80,70,.4)}
.map-cadre{border-radius:2px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;background:var(--paper-3)}
.map-cadre iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.02)}

/* ------------------------------------------------------------ BANDE CONTACT (accueil/pied) */
.cta-bande{position:relative;overflow:clip}
.cta-bande h2{font-size:clamp(2rem,4.6vw,3.6rem);max-width:20ch}

/* ------------------------------------------------------------ PIED */
footer.site{background:var(--navy-abyss);color:#d9d1c4;padding:clamp(56px,8vh,90px) 0 0}
footer.site a{color:#d9d1c4}
footer.site .cols{display:grid;grid-template-columns:1.45fr 1fr 1.25fr 1fr 1.05fr;gap:clamp(22px,2.4vw,42px)}
footer.site .brand-f img{height:46px;width:auto;margin-bottom:1.2rem}
footer.site .brand-f p{color:rgba(217,209,196,.66);font-size:.94rem;max-width:34ch;line-height:1.6}
/* .f-titre : les intitulés de colonnes du pied de page. Ils étaient en <h4> alors
   qu'aucun <h3> ne les précédait (hiérarchie de titres incohérente pour les
   lecteurs d'écran) → passés en <h2>, l'apparence ne change pas d'un pixel. */
footer.site h4,footer.site .f-titre{font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-lt);margin:0 0 1.1rem;font-weight:600}
footer.site ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65em}
footer.site ul a{font-size:.94rem;color:rgba(217,209,196,.8);transition:color .3s}
footer.site ul a:hover{color:var(--brass-lt)}
footer.site .coord-f{font-size:.94rem;line-height:1.7;color:rgba(217,209,196,.8)}
footer.site .coord-f a:hover{color:var(--brass-lt)}
footer.site .rs{display:flex;gap:10px;margin-top:1.2rem}
footer.site .rs a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(217,209,196,.24);
  display:grid;place-items:center;transition:.3s}
footer.site .rs a:hover{border-color:var(--brass-lt);color:var(--brass-lt);transform:translateY(-2px)}
footer.site .rs svg{width:17px;height:17px}
footer.site .bas{margin-top:clamp(40px,6vh,70px);border-top:1px solid rgba(217,209,196,.14);
  padding:1.4rem 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.8rem;color:rgba(217,209,196,.78)}
footer.site .bas a:hover{color:var(--brass-lt)}
.secteurs-f{display:flex;flex-wrap:wrap;gap:.55em;align-items:center;margin-top:clamp(34px,5vh,60px);
  padding-top:1.4rem;border-top:1px solid rgba(217,209,196,.12);font-size:.86rem;color:rgba(217,209,196,.72)}
.secteurs-f span{color:var(--brass-lt);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;font-weight:600;margin-right:.5em}
.secteurs-f a{color:rgba(217,209,196,.72)}.secteurs-f a:hover{color:var(--brass-lt)}
.secteurs-f i{opacity:.4;font-style:normal}
.to-top{position:fixed;right:20px;bottom:20px;z-index:80;width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:#f3ede2;display:grid;place-items:center;opacity:0;transform:translateY(14px);
  pointer-events:none;transition:.4s var(--ease);box-shadow:0 12px 26px -14px rgba(11,33,53,.7)}
.to-top.vu{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--brass)}

/* ------------------------------------------------------------ LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,20,33,.94);display:none;
  align-items:center;justify-content:center;padding:24px}
.lightbox.on{display:flex}
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:2px}
.lightbox .lb-fermer{position:absolute;top:20px;right:24px;color:#f3ede2;font-size:2rem;line-height:1}
.lightbox .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#f3ede2;font-size:2.4rem;
  padding:20px;opacity:.7;transition:opacity .3s}
.lightbox .lb-nav:hover{opacity:1}
.lightbox .lb-prev{left:8px}.lightbox .lb-suiv{right:8px}
.lightbox .lb-compte{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(243,237,226,.7);
  font-size:.85rem;letter-spacing:.1em}
.lightbox .lb-legende{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);color:#f3ede2;
  font-size:.92rem;max-width:80vw;text-align:center;text-shadow:0 1px 8px rgba(8,20,33,.9)}

/* ------------------------------------------------------------ UTILITAIRES */
.mt-s{margin-top:1.2rem}.mt-m{margin-top:2rem}.mt-l{margin-top:clamp(30px,5vh,56px)}
.divider{height:1px;background:var(--line);margin:clamp(40px,6vh,72px) 0}
.pull{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.28;
  color:var(--navy);max-width:24ch;margin:clamp(30px,5vh,56px) auto;text-align:center}
.spotlight .pull{color:#f7f1e6}
.badge-note{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border:1px solid var(--line);
  border-radius:99px;font-size:.82rem;color:var(--ink-2)}
.badge-note .pts{color:var(--brass);letter-spacing:.1em}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1040px){
  .studio-split{grid-template-columns:1fr;gap:40px}
  .portrait-nature{max-width:min(86vw,420px);margin:0 auto}
  .methode-zone{height:auto!important}
  .methode-grid{grid-template-columns:1fr;gap:36px}
  .methode-sticky{position:relative;min-height:0;padding:clamp(50px,8vh,80px) 0}
  .methode-visuel{max-width:520px;order:-1}
  .champs{grid-template-columns:repeat(2,1fr)}
  .champs-5{grid-template-columns:repeat(3,1fr)}
  .grille-actus{grid-template-columns:repeat(2,1fr)}
  /* 5 colonnes de pied : la marque passe pleine largeur, les 4 listes en 2×2 */
  .footer .cols,footer.site .cols{grid-template-columns:repeat(2,1fr)}
  footer.site .brand-f{grid-column:1/-1}
}
@media (max-width:860px){
  .champs-5{grid-template-columns:repeat(2,1fr)}
  :root{--hdr-h:64px}
  .brand img{height:44px}
  nav.main{display:none}
  .burger{display:block}
  .contact-grid{grid-template-columns:1fr;gap:38px}
  .convictions{grid-template-columns:1fr;gap:34px}
  .stats{grid-template-columns:1fr;gap:34px}
  .grille-projets{grid-template-columns:1fr;gap:34px}
  .projet-nav{grid-template-columns:1fr}
  .projet-nav a.suiv{text-align:left}
  .sf-liste{grid-template-columns:1fr;gap:12px}
  .exp-charge-centre ul{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:34px}
  footer.site .brand-f{grid-column:1/-1}
  .form{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:16px}
  .mosaique{grid-template-columns:repeat(2,1fr);gap:8px}
  .grille-actus{grid-template-columns:1fr}
  .champs,.champs-5{grid-template-columns:1fr}
  .dom-grille{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .galerie .g,.galerie .g.third{grid-column:span 12}
  footer.site .cols{grid-template-columns:1fr}
  .hero-dots{display:none}
  .projet-faits{grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero-slide img{animation:none}
  .tuile img,.carte-projet .cadre-img{transition:none}
}
html:not(.js-anim) .tw{-webkit-mask-image:none;mask-image:none}

/* barre de défilement fine des panneaux méthode */
.prc-anime .prc-pan::-webkit-scrollbar{width:5px}
.prc-anime .prc-pan::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.prc-anime .prc-pan::-webkit-scrollbar-track{background:transparent}

/* pages legales : lignes d'identification conditionnelles */
.prose .legal-ligne{margin:.35em 0;color:var(--ink-2)}
.prose .legal-ligne strong{color:var(--navy)}


/* ------------------------------------------------------------ MODE STUDIO
   Bandeau visible UNIQUEMENT par Nolwenn connectée (posé par nk.js après
   l'affichage). Même rôle que le « mode atelier » de Cadres Robain : revenir
   à l'administration, et modifier directement la page qu'on regarde.
   Il ne doit jamais masquer le bas du site : le corps gagne une marge
   équivalente (.a-studio), et la barre « haut de page » remonte d'autant. */
#nkStudio{position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--navy-deep,#081a2b);color:#f6f1e8;
  padding:9px clamp(12px,2vw,20px);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-family:var(--sans);box-shadow:0 -2px 18px rgba(8,26,43,.34)}
#nkStudio .nks-titre{font-size:.84rem;letter-spacing:.04em;font-weight:700}
#nkStudio .nks-note{font-size:.78rem;opacity:.72}
#nkStudio .nks-ctx{margin-left:auto;background:var(--brass,#c9a961);color:#12283c;
  padding:6px 15px;border-radius:20px;font-size:.82rem;font-weight:700;text-decoration:none;
  transition:filter .25s}
#nkStudio .nks-ctx:hover{filter:brightness(1.08)}
#nkStudio .nks-adm{color:var(--brass-lt,#e0c891);font-size:.82rem;font-weight:700;text-decoration:none}
#nkStudio .nks-adm:hover{text-decoration:underline}
#nkStudio .nks-x{background:none;border:0;color:#f6f1e8;opacity:.6;font-size:1rem;
  line-height:1;padding:4px 6px;cursor:pointer}
#nkStudio .nks-x:hover{opacity:1}
body.a-studio{padding-bottom:64px}
body.a-studio .to-top{bottom:calc(20px + 64px)}
@media (max-width:700px){
  #nkStudio{gap:7px;padding:8px 10px}
  #nkStudio .nks-note{display:none}          /* place à l'essentiel sur téléphone */
  #nkStudio .nks-ctx{margin-left:0;font-size:.78rem;padding:6px 12px}
  #nkStudio .nks-adm{font-size:.78rem}
  body.a-studio{padding-bottom:80px}
  body.a-studio .to-top{bottom:calc(16px + 80px)}
}

/* ------------------------------------------------------------ BLOCS RICHES (CMS)
   Réglages posés depuis l'administration : position / taille imposées d'une
   photo, et carte « document » (plan PDF d'un mobilier…). Rétrocompatible :
   sans réglage, le moteur magazine décide comme avant. */
.chap-solo{max-width:1000px;margin:0 auto clamp(26px,4.5vh,50px)}
.chap-solo::after{content:"";display:block;clear:both}
.chap-fig.fig-centre{float:none;margin-left:auto;margin-right:auto}
.chap .chap-fig.fig-centre{margin-top:clamp(18px,2.6vh,28px);margin-bottom:0}
.chap-solo .chap-fig{float:none;margin-bottom:0}
.chap-solo .pos-gauche{margin-right:auto}
.chap-solo .pos-droite{margin-left:auto}
.chap-solo .f-pleine{margin-top:0}
/* la carte document : papier, filet, laiton — sobre, elle ne crie pas */
.doc-carte{display:flex;align-items:center;gap:clamp(14px,2vw,22px);max-width:640px;margin:0 auto;
  background:var(--paper-2);border:1px solid var(--line);border-radius:3px;
  padding:clamp(14px,2vw,20px) clamp(16px,2.4vw,24px);text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.doc-carte:hover{transform:translateY(-3px);border-color:rgba(201,169,97,.55);box-shadow:0 14px 34px rgba(11,33,53,.10)}
.doc-carte:hover .doc-fleche{transform:translateX(4px)}
.doc-ic{flex:0 0 auto;width:46px;height:46px;display:grid;place-items:center;color:var(--brass-deep);
  background:var(--paper);border:1px solid var(--line);border-radius:50%}
.doc-ic svg{width:24px;height:24px}
.doc-vig{flex:0 0 auto;width:92px;border-radius:2px;overflow:hidden;border:1px solid var(--line)}
.doc-vig img{width:100%;height:68px;object-fit:cover;display:block}
.doc-txt{display:flex;flex-direction:column;gap:.25em;min-width:0}
.doc-titre{font-family:var(--disp);font-weight:600;color:var(--navy);font-size:clamp(1.02rem,1.5vw,1.18rem);letter-spacing:-.01em}
.doc-note{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--brass-deep)}
.doc-fleche{margin-left:auto;flex:0 0 auto;color:var(--brass-deep);transition:transform .35s var(--ease)}
.doc-fleche svg{width:22px;height:22px;display:block}
@media (max-width:700px){
  .doc-carte{gap:12px;padding:13px 14px}
  .doc-vig{width:70px}.doc-vig img{height:52px}
  .doc-note{font-size:.7rem}
}

/* dispositions de TEXTE choisies dans l'administration (blocs des fiches) */
.chap.chap-centre{text-align:center}
.chap.chap-centre .chap-fig figcaption{text-align:center}
.chap.chap-etroit{max-width:640px}
.chap.chap-etroit p{text-wrap:pretty}

/* Tailles CHOISIES dans l'administration (fig-reglee) : sur téléphone, on
   RESPECTE le choix au lieu de repasser tout à 100 % comme les figures
   automatiques — « Petite » reste petite, centrée proprement. */
@media (max-width:860px){
  .chap-fig.fig-reglee.f-s{width:62%;margin-left:auto;margin-right:auto;float:none}
  .chap-fig.fig-reglee.f-m{width:78%;margin-left:auto;margin-right:auto;float:none}
  .chap-fig.fig-reglee.f-l{width:100%}
  .chap-fig.fig-reglee figcaption{text-align:center}
}

/* Taille PERSONNALISÉE au pourcentage (curseur de l'administration) : la
   largeur voulue vit dans --fw ; sur téléphone elle est bornée à 45 % minimum
   pour rester lisible, et la figure se centre. */
.chap-fig.fig-pct{width:var(--fw,38%)}
@media (max-width:860px){
  .chap-fig.fig-pct{width:clamp(45%,var(--fw,38%),100%);float:none;margin-left:auto;margin-right:auto}
}