/* Polices servies depuis le site : Fraunces et Inter, jeux latin et latin
   etendu seulement (licence SIL OFL). Heberger ici supprime deux connexions
   a Google avant le premier texte. Fichiers variables : une seule graisse
   couvre 400 a 600. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/fraunces-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/fraunces-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --g:clamp(20px,4.5vw,48px);
  --creme:#F4F1E8; --creme-2:#EDE9DC; --papier:#FBF9F3;
  --encre:#0F2A21; --encre-doux:#4A6357;
  --seve:#1E6F4C; --cuivre:#B87333; --cuivre-clair:#E0A264; --pousse:#3FA971; --solaire:#D98324; --ecorce:#7A5C3E;
  --trait:rgba(15,42,33,.12);
  --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{position:relative;background:var(--creme);color:var(--encre);
  font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;line-height:1.6;
  -webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E")}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--g);position:relative;z-index:2}
.serif{font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.02em}

/* ═══ barre haute ═══ */
header{position:fixed;inset:0 0 auto;z-index:80;
  background:rgba(244,241,232,.72);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;transition:.4s var(--e)}
/* Une fois la page defilee, le fond est opaque a 93 % : le flou derriere
   ne se voit plus, mais il se recalculait a chaque image sur toute la
   largeur de l'ecran. On le coupe. */
header.dur{border-bottom-color:var(--trait);background:rgba(244,241,232,.93);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:14px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.graine{display:block;width:34px;height:34px;position:relative;flex:none}
.graine svg{width:100%;height:100%;display:block}
.marque b{font-size:15px;font-weight:600;letter-spacing:-.015em;display:block;line-height:1.15}
.marque small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--encre-doux)}
.vivant{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--encre-doux);
  border:1px solid var(--trait);border-radius:999px;padding:7px 15px;background:rgba(255,255,255,.5)}
/* Le halo battait en box-shadow : repeint a chaque image, dans une barre fixe
   floutee, donc sur toute la largeur de l'ecran. Un anneau en transform et
   opacite reste sur le compositeur et ne coute plus rien au processeur. */
.pouls{width:7px;height:7px;border-radius:50%;background:var(--pousse);flex:none;position:relative}
.pouls::after{content:'';position:absolute;inset:0;border-radius:50%;
  background:rgba(63,169,113,.55);animation:pouls 2.6s infinite}
@keyframes pouls{0%{transform:scale(1);opacity:1}70%{transform:scale(3.6);opacity:0}100%{transform:scale(3.6);opacity:0}}
.droite{display:flex;align-items:center;gap:12px}
.tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--encre);
  font-size:13.5px;font-weight:500;padding:10px 16px;border-radius:999px;
  border:1px solid var(--trait);transition:.3s var(--e)}
.tel:hover{background:var(--encre);color:var(--papier);border-color:var(--encre)}

/* ── bouton menu qui germe ── */
.germe{position:relative;width:52px;height:52px;border-radius:50%;border:1px solid var(--trait);
  background:var(--papier);cursor:pointer;display:grid;place-items:center;flex:none;
  transition:.5s var(--e)}
.germe:hover{border-color:var(--seve);transform:scale(1.04)}
.germe .tige{position:absolute;left:50%;width:1.6px;background:var(--encre);border-radius:2px;
  transition:.55s var(--e);transform-origin:center}
.germe .t1{height:12px;top:15px;transform:translateX(-50%) translateY(0)}
.germe .t2{height:12px;top:15px;transform:translateX(-50%) translateY(11px)}
.germe .t3{width:12px;height:1.6px;left:20px;top:24.5px;transform:scaleX(1)}
/* la barre se fond dans le rideau quand le menu est ouvert */
body.ouvert header,body.ouvert header.dur{background:transparent;border-bottom-color:transparent}
body.ouvert .marque b,body.ouvert .marque small{color:var(--creme)}
body.ouvert .marque small{color:rgba(244,241,232,.5)}
body.ouvert .vivant{color:rgba(244,241,232,.65);border-color:rgba(244,241,232,.2);
  background:rgba(244,241,232,.06)}
body.ouvert .tel{color:var(--creme);border-color:rgba(244,241,232,.25)}
body.ouvert .tel:hover{background:var(--creme);color:var(--encre)}
body.ouvert .germe{border-color:rgba(244,241,232,.28)}
body.ouvert .germe{background:var(--seve);border-color:var(--seve);transform:rotate(135deg)}
body.ouvert .germe .tige{background:var(--papier)}
body.ouvert .germe .t1{transform:translateX(-50%) translateY(5.5px)}
body.ouvert .germe .t2{transform:translateX(-50%) translateY(5.5px)}
body.ouvert .germe .t3{transform:scaleX(1);top:25.7px}

/* ═══ MENU — le tableau électrique ═══════════════════════════════
   Chaque prestation est un disjoncteur : au survol la manette se lève et
   le voyant s'allume, la page ouverte garde sa manette levée. Le rideau
   défile sur les petits écrans, le haut s'estompe sous la barre. */
.rideau{position:fixed;inset:0;z-index:70;background:var(--encre);
  clip-path:circle(0% at calc(100% - 46px) 40px);
  transition:clip-path .85s var(--e);pointer-events:none}
body.ouvert .rideau{clip-path:circle(150% at calc(100% - 46px) 40px);pointer-events:auto}
.rideau-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:safe center;
  padding:100px var(--g) 36px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(transparent 0,#000 84px);mask-image:linear-gradient(transparent 0,#000 84px)}
.tg-pop{opacity:0;transform:translateY(22px);transition:opacity .7s var(--e),transform .7s var(--e)}
body.ouvert .tg-pop{opacity:1;transform:none;transition-delay:calc(.28s + var(--i,0) * .065s)}
.tg-panneau{position:relative;width:100%;max-width:1320px;margin-inline:auto;border-radius:24px;
  padding:26px clamp(18px,2.4vw,34px) 30px;background:linear-gradient(180deg,#16392D,#11302A);
  border:1px solid rgba(244,241,232,.1);
  box-shadow:inset 0 1px 0 rgba(244,241,232,.07),0 50px 90px -50px rgba(0,0,0,.7)}
.tg-vis{position:absolute;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#5d7a6d,#2a4a3d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.tg-vis::after{content:'';position:absolute;left:2px;right:2px;top:5px;height:1px;
  background:rgba(0,0,0,.45);transform:rotate(35deg)}
.tg-vis.a{top:12px;left:12px}.tg-vis.b{top:12px;right:12px}
.tg-vis.c{bottom:12px;left:12px}.tg-vis.d{bottom:12px;right:12px}
.tg-tete{display:flex;justify-content:space-between;gap:16px;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(244,241,232,.45);padding:0 14px 18px}
.tg-rangee{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:16px 10px}
.tg-rangee::before{content:'';position:absolute;left:0;right:0;top:50%;height:38px;transform:translateY(-50%);
  border-radius:4px;background:repeating-linear-gradient(90deg,#3c5a4e 0 10px,#33503f 10px 22px);opacity:.55}
.tg-module{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  min-height:clamp(230px,30vh,280px);padding:14px 14px 16px;border-radius:10px;text-decoration:none;
  background:linear-gradient(180deg,#F7F4EC,#E9E4D5);color:var(--encre);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 24px -14px rgba(0,0,0,.6)}
body.ouvert .tg-module{transition:opacity .7s var(--e),transform .45s var(--e);
  transition-delay:calc(.28s + var(--i) * .065s),0s}
.tg-module:hover,.tg-module:focus-visible{transform:translateY(-6px)}
.tg-m-tete{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.14em}
.tg-led{width:8px;height:8px;border-radius:50%;background:#b9b4a4;transition:.3s var(--e);flex:none}
.tg-module:hover .tg-led,.tg-module:focus-visible .tg-led,.tg-module[aria-current] .tg-led,.tg-led.on{
  background:var(--pousse);box-shadow:0 0 0 3px rgba(63,169,113,.22),0 0 12px var(--pousse)}
.tg-boitier{align-self:center;position:relative;width:38px;height:78px;border-radius:7px;background:var(--encre);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.tg-levier{position:absolute;left:7px;right:7px;height:30px;top:40px;border-radius:4px;
  background:linear-gradient(180deg,#d6d0bf,#b3ad9b);
  transition:top .38s cubic-bezier(.5,1.8,.5,1),background .3s}
.tg-module:hover .tg-levier,.tg-module:focus-visible .tg-levier,.tg-module[aria-current] .tg-levier{
  top:8px;background:linear-gradient(180deg,#58c48b,var(--pousse))}
.tg-m-pied{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:74px}
.tg-mot{font-family:'Fraunces',Georgia,serif;font-size:clamp(17px,1.45vw,23px);line-height:1.05;letter-spacing:-.02em}
.tg-note{font-size:11.5px;line-height:1.35;color:var(--encre-doux)}
.tg-departs{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:14px;padding:14px 10px 0}
.tg-circuits{border:1px dashed rgba(244,241,232,.16);border-radius:12px;padding:16px 18px;
  display:flex;flex-direction:column}
.tg-circuits h5{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  color:rgba(244,241,232,.42)}
.tg-circuits-grille{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:12px}
.tg-circuit{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:14px;border-radius:8px;background:rgba(244,241,232,.06);border:1px solid rgba(244,241,232,.1);
  color:rgba(244,241,232,.85);text-decoration:none;font-size:13.5px;line-height:1.35;transition:.3s var(--e)}
.tg-circuit .tg-led{width:6px;height:6px;background:rgba(244,241,232,.25)}
.tg-circuit:hover,.tg-circuit:focus-visible,.tg-circuit[aria-current]{border-color:rgba(63,169,113,.6);color:var(--creme)}
.tg-circuit:hover .tg-led,.tg-circuit:focus-visible .tg-led,.tg-circuit[aria-current] .tg-led{
  background:var(--pousse);box-shadow:0 0 8px var(--pousse)}
.tg-general{border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,#F7F4EC,#E9E4D5);color:var(--encre)}
.tg-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;
  border-radius:999px;background:var(--seve);color:var(--papier);text-decoration:none;font-weight:600;
  font-size:14px;transition:.3s var(--e)}
.tg-cta svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:.3s var(--e)}
.tg-cta:hover,.tg-cta:focus-visible{background:var(--encre)}
.tg-cta:hover svg{transform:translateX(4px)}
.tg-tel{font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--encre);text-decoration:none;width:max-content}
.tg-tel:hover{color:var(--seve)}
.tg-g-note{font-size:11.5px;line-height:1.45;color:var(--encre-doux)}
@media(max-width:1000px){
  .tg-rangee{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tg-rangee::before{display:none}
  .tg-departs{grid-template-columns:1fr}
  .tg-circuits-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* sur deux colonnes, le cinquième circuit resterait seul à gauche :
     il prend toute la largeur, comme la paire au-dessus */
  .tg-circuits-grille > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media(max-width:560px){
  .rideau-in{padding-top:92px}
  .tg-panneau{padding-inline:14px}
  .tg-rangee{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:4px}
  .tg-departs{padding-inline:4px}
  .tg-module{min-height:200px}
  .tg-boitier{height:62px}
  .tg-levier{top:28px;height:26px}
  .tg-tete{padding-inline:8px}
  .tg-tete span+span{display:none}
  .tg-circuits{padding:14px}
}

/* ═══ PREMIER ÉCRAN — le texte tient les angles ══════════════════
   La barre haute et le hero partageaient le cadre centré de 1280px :
   sur un écran de 1920 le contenu flottait à 320px de chaque bord,
   loin des angles. Ces deux blocs-là sortent du cadre commun et ne
   gardent que la gouttière de page — logo dans l'angle haut gauche,
   téléphone dans l'angle haut droit, titre calé à gauche, légende et
   « Cinq expertises » aux deux angles bas. */
header .bar,.hero .wrap{max-width:none}

/* ═══ hero cinématique ═══ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;background:var(--encre);
  padding-top:clamp(120px,14vw,168px);padding-bottom:clamp(150px,17vw,204px)}
.hero-fond{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-fond video,.hero-fond img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.04);animation:respire 22s var(--e) infinite alternate}
/* la video porte deja sa teinte ; une image de repli, elle, doit la recevoir */
.hero-fond img{filter:grayscale(1) contrast(1.06) brightness(.99)}
@keyframes respire{to{transform:scale(1.12)}}
/* duotone : la vidéo désaturée passe sous un vert de sève */
/* Le voile reste dense a gauche, sous le titre, et s'ouvre a droite : c'est la
   seule facon de laisser voir l'image sans perdre le contraste du texte. */
.hero-teinte{position:absolute;inset:0;background:var(--seve);mix-blend-mode:multiply;opacity:.74}
.hero-voile{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,42,33,.93) 0%,rgba(15,42,33,.72) 46%,rgba(15,42,33,.28) 100%),
             linear-gradient(180deg,rgba(15,42,33,.62) 0%,transparent 26%,transparent 58%,rgba(15,42,33,.8) 100%)}

/* filets verticaux qui poussent du sol — écho du menu racine */
.hero-filets{position:absolute;inset:0;z-index:1;pointer-events:none;
  display:grid;grid-template-columns:1fr 3fr 4fr 3fr 1fr}
.hero-filets i{border-right:1px solid rgba(244,241,232,.13);
  transform-origin:bottom;animation:poussee 1.7s var(--e) both}
.hero-filets i:nth-child(1){animation-delay:.1s}
.hero-filets i:nth-child(2){animation-delay:.34s;border-right-color:rgba(63,169,113,.34)}
.hero-filets i:nth-child(3){animation-delay:.22s;border-right-color:rgba(63,169,113,.34)}
.hero-filets i:nth-child(4){animation-delay:.46s}
.hero-filets i:last-child{border-right:0}
@keyframes poussee{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.hero-in{position:relative;z-index:2;width:100%}
.pastille{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--seve);background:rgba(30,111,76,.08);
  border:1px solid rgba(30,111,76,.18);border-radius:999px;padding:8px 16px;margin-bottom:26px}
.hero .pastille{color:var(--pousse);background:rgba(63,169,113,.1);
  border-color:rgba(63,169,113,.32)}
h1{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(2.8rem,8.4vw,6.6rem);line-height:.96;letter-spacing:-.038em;max-width:14ch}
h1 em{font-style:italic;color:var(--seve);padding-right:.1em}
.hero h1{color:var(--creme)}
.hero h1 em{color:var(--pousse)}
.chapeau{color:var(--encre-doux);font-size:clamp(1rem,1.35vw,1.14rem);max-width:50ch;
  margin:26px 0 34px}
.hero .chapeau{color:rgba(244,241,232,.74);max-width:46ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;
  text-decoration:none;font-size:14px;font-weight:500;transition:.35s var(--e)}
.btn-p{background:var(--seve);color:var(--papier)}
.btn-p:hover{background:var(--encre);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(15,42,33,.18)}
.btn-s{border:1px solid var(--trait);color:var(--encre)}
.btn-s:hover{border-color:var(--encre);background:var(--papier)}
.btn-nuit{border:1px solid rgba(244,241,232,.26);color:var(--creme)}
.btn-nuit:hover{background:rgba(244,241,232,.1);border-color:rgba(244,241,232,.5)}

/* bouton à double flèche : la première sort, la seconde entre */
.pousse-btn{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.pousse-btn span.txt{background:var(--pousse);color:var(--encre);border-radius:999px;
  padding:15px 26px;font-size:14px;font-weight:500;transition:.5s var(--e)}
.pousse-btn span.rond{position:relative;width:50px;height:50px;flex:none;border-radius:50%;
  background:var(--pousse);color:var(--encre);display:grid;place-items:center;
  overflow:hidden;transition:.5s var(--e)}
.pousse-btn span.rond svg{position:absolute;width:17px;height:17px;transition:.5s var(--e)}
.pousse-btn span.rond .f2{transform:translateX(-40px)}
.pousse-btn:hover span.rond .f1{transform:translateX(40px)}
.pousse-btn:hover span.rond .f2{transform:translateX(0)}
.pousse-btn:hover span.txt,.pousse-btn:hover span.rond{background:var(--creme)}

/* bas de cadre : légende du plan + invitation à descendre */
.hero-pied{position:absolute;left:0;right:0;bottom:clamp(104px,11.5vw,132px);z-index:2;
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  font-size:12.5px;color:rgba(244,241,232,.55)}
.descendre{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  color:rgba(244,241,232,.72);letter-spacing:.16em;text-transform:uppercase;font-size:10.5px}
.descendre .rail{position:relative;display:block;width:46px;height:1px;
  background:rgba(244,241,232,.24);overflow:hidden}
.descendre .rail i{position:absolute;inset:0 auto 0 0;width:16px;background:var(--pousse);
  animation:file 2.4s var(--e) infinite}
@keyframes file{0%{transform:translateX(-18px)}100%{transform:translateX(48px)}}
.descendre:hover{color:var(--creme)}

/* la barre haute passe en clair tant qu’elle flotte sur le hero */
body:not(.ouvert):not(.page-annexe) header:not(.dur){background:transparent;backdrop-filter:none}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .marque b{color:var(--creme)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .marque small{color:rgba(244,241,232,.5)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .vivant{color:rgba(244,241,232,.7);
  border-color:rgba(244,241,232,.22);background:rgba(244,241,232,.07)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .tel{color:var(--creme);border-color:rgba(244,241,232,.26)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .tel:hover{background:var(--creme);color:var(--encre);
  border-color:var(--creme)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .germe{background:rgba(244,241,232,.08);
  border-color:rgba(244,241,232,.26)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .germe:hover{border-color:var(--pousse)}
body:not(.ouvert):not(.page-annexe) header:not(.dur) .germe .tige{background:var(--creme)}
body:not(.page-annexe) header:not(.dur) .graine-fond,body.ouvert .graine-fond{fill:var(--creme)}

/* ═══ sections ═══ */
section{padding-block:clamp(64px,8vw,116px)}
.titre-bloc{max-width:64ch;margin-bottom:clamp(36px,4.5vw,60px)}
.kicker{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-doux);
  display:flex;align-items:center;gap:11px;margin-bottom:20px}
.kicker::before{content:'';width:26px;height:1px;background:var(--seve)}
h2{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(2rem,4.9vw,3.9rem);line-height:1.04;letter-spacing:-.032em}
h2 em{font-style:italic;color:var(--seve);padding-right:.08em}
.sous{color:var(--encre-doux);margin-top:18px;max-width:56ch}

.feuilles{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
/* cinq metiers + une cellule d'appel : six cellules de largeur egale.
   Une rangee de trois cartes etroites suivie de deux cartes une fois et
   demie plus larges donnait deux mesures de texte differentes dans la
   meme section — c'est ce desequilibre qui se lisait comme un defaut. */
.feuille{grid-column:span 2}
.feuille{background:var(--papier);border:1px solid var(--trait);padding:28px 26px 26px;
  position:relative;overflow:hidden;transition:.45s var(--e);
  display:flex;flex-direction:column}
.feuille:nth-child(1){border-radius:32px 32px 32px 4px}
.feuille:nth-child(2){border-radius:32px 4px 32px 32px}
.feuille:nth-child(3){border-radius:4px 32px 32px 32px}
.feuille:nth-child(4){border-radius:32px 32px 4px 32px}
.feuille:nth-child(6){border-radius:32px 4px 32px 32px}
.feuille:hover{transform:translateY(-6px);border-color:rgba(30,111,76,.35);
  box-shadow:0 18px 40px rgba(15,42,33,.09)}
.feuille::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--pousse),var(--seve));
  transform:scaleX(0);transform-origin:left;transition:transform .65s var(--e)}
.feuille:hover::after{transform:scaleX(1)}
.feuille .ic{display:block;width:40px;height:40px;color:var(--seve);margin-bottom:20px}
.feuille .ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.3;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.feuille h3{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:1.24rem;
  letter-spacing:-.02em;margin-bottom:10px}
.feuille p{font-size:14px;color:var(--encre-doux);line-height:1.65}
.feuille .tag{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--seve);background:rgba(30,111,76,.08);
  padding:6px 12px;border-radius:999px}

/* ═══ FOOTER PHOTOSYNTHÈSE ═══ */
footer{position:relative;background:var(--encre);color:var(--creme);overflow:hidden;
  padding-top:clamp(50px,5.6vw,80px);margin-top:clamp(40px,5vw,70px)}
footer::before{content:'';position:absolute;inset:auto 0 0;height:62%;
  background:linear-gradient(180deg,transparent,rgba(122,92,62,.28))}
.arbre{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1400px,118%);height:auto;opacity:.42;pointer-events:none;z-index:1}
.arbre path{fill:none;stroke:rgba(63,169,113,.45);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 2.4s var(--e)}
footer.pousse .arbre path{stroke-dashoffset:0}
.arbre circle{fill:var(--pousse);opacity:0;transform:scale(0);transform-origin:center;
  transform-box:fill-box;transition:.7s var(--e)}
footer.pousse .arbre circle{opacity:.6;transform:scale(1)}
.pied{position:relative;z-index:3}
.pied-haut{display:grid;grid-template-columns:1.18fr .76fr .76fr .76fr;gap:clamp(26px,4vw,54px);
  padding-bottom:clamp(30px,3.4vw,46px)}
.pied-haut h3{font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.16;letter-spacing:-.025em;max-width:19ch}
.pied-haut h3 span{font-style:normal;color:var(--pousse)}
.pied-cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:14px 24px;
  border-radius:999px;background:var(--pousse);color:var(--encre);text-decoration:none;
  font-weight:600;font-size:14px;transition:.35s var(--e)}
.pied-cta:hover{background:var(--creme);transform:translateY(-2px)}
.col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,241,232,.42);margin-bottom:18px;font-weight:500}
.col a,.col p{display:block;color:rgba(244,241,232,.82);text-decoration:none;font-size:14px;
  padding-block:6px;transition:.3s;position:relative;width:max-content}
.col a::after{content:'';position:absolute;left:0;bottom:5px;height:1px;width:0;
  background:var(--pousse);transition:.35s var(--e)}
.col a:hover{color:var(--pousse)}
.col a:hover::after{width:100%}

/* La signature est un SVG et non du texte mis a l'echelle : « textLength »
   force la largeur exacte quelle que soit la police reellement chargee.
   En HTML, le corps calcule d'apres une metrique Fraunces suppposee faisait
   passer le mot sur deux lignes des que le fallback Georgia s'appliquait —
   un pave de 500 px de haut au lieu d'une bande. */
.signature{position:relative;z-index:2;display:block;width:100%;height:auto;
  margin-block:clamp(14px,1.8vw,26px) clamp(18px,2.2vw,30px);
  overflow:visible;user-select:none}
.signature text{font-family:'Fraunces',Georgia,serif;font-weight:400;font-size:60px;
  fill:none;stroke:rgba(244,241,232,.3);stroke-width:1;
  paint-order:stroke;vector-effect:non-scaling-stroke}
/* deux blocs par ligne en vis-a-vis, comme le pied au-dessus : l'un ancre
   a la gouttiere gauche, l'autre a la droite. Ce n'est pas le
   `space-between` d'avant, qui repartissait quatre blocs sur une seule
   ligne et creusait des trous de 350 px entre des voisins sans rapport ;
   ici chaque ligne ne porte qu'une paire, et le vide central la separe. */
.mentions{display:grid;grid-template-columns:auto auto;
  justify-content:space-between;
  column-gap:clamp(24px,3vw,60px);row-gap:11px;
  align-items:center;padding-block:16px;border-top:1px solid rgba(244,241,232,.12);
  font-size:12px;color:rgba(244,241,232,.5)}
.mentions > *{justify-self:start}
/* le second de chaque paire se cale sur le bord droit */
.mentions > *:nth-child(even){justify-self:end;text-align:right}
.mentions .signature{grid-column:1 / -1;justify-self:end;width:auto}
/* sur un ecran etroit le vis-a-vis n'a plus de vide central a offrir :
   les deux colonnes se toucheraient. Tout revient en pile a gauche. */
@media(max-width:760px){.mentions{grid-template-columns:1fr}
  /* :nth-child(even) pese deux classes : il faut le meme poids pour le
     defaire, sinon la pile mobile garde des blocs cales a droite */
  .mentions > *:nth-child(n),.mentions .signature{justify-self:start;text-align:left}}
.mentions a{color:rgba(244,241,232,.72);text-decoration:none}
/* seule sur sa ligne a cause du wrap : plutot que de la laisser flotter a
   gauche sous la raison sociale, on la pose a droite, ou se signe un travail. */
.signature{width:100%;text-align:right}
.signature a{color:var(--pousse);border-bottom:1px solid rgba(63,169,113,.4);
  padding-bottom:1px;transition:.3s var(--e)}
.signature a:hover{color:var(--creme);border-bottom-color:var(--creme)}
.poids{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(63,169,113,.35);
  border-radius:999px;padding:7px 14px;color:var(--pousse);font-size:11.5px;
  font-variant-numeric:tabular-nums}
.poids .pt{width:6px;height:6px;border-radius:50%;background:var(--pousse)}

/* ═══ 02 · BANDEAU DE CONFIANCE ═══ */
.confiance{position:relative;z-index:5;background:var(--papier);
  border-block:1px solid var(--trait);padding-block:clamp(34px,4.2vw,52px);overflow:hidden}
.confiance .wrap{padding-inline:0}
.confiance-tete{display:flex;align-items:center;gap:16px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--encre-doux);margin-bottom:clamp(24px,3vw,34px);
  padding-inline:clamp(20px,4.5vw,48px)}
.confiance-tete::after{content:'';flex:1;height:1px;background:var(--trait)}
.ruban{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* ligne d'horizon : les logos sont posés sur le sol, pas suspendus */
.ruban::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--trait) 12%,var(--trait) 88%,transparent)}
.piste{display:flex;width:max-content;align-items:flex-end;
  padding-bottom:22px;animation:glisse 42s linear infinite}
/* l'ecart est porte par chaque element (marge), jamais par `gap` : avec `gap`,
   la piste compte n-1 ecarts et translateX(-50%) tombe a cote d'une periode
   entiere — d'ou le trou et le saut au raccord. */
.piste .ref{margin-right:clamp(40px,5.4vw,84px)}
/* :has(:focus-visible) et non :focus-within — un logo est un lien : le doigt
   pose dessus lui donne le focus, et le ruban restait alors fige pour de bon
   une fois le doigt leve. :focus-visible ne repond qu'au parcours clavier,
   qui est le seul cas ou la pause est necessaire. */
.ruban:hover .piste,.ruban:has(:focus-visible) .piste{animation-play-state:paused}
@keyframes glisse{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.piste .ref{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-end;gap:11px;flex:none;text-decoration:none;color:inherit;
  padding:6px 10px 0;border-radius:10px;transition:.4s var(--e)}
.piste .ref:focus-visible{outline:2px solid var(--seve);outline-offset:3px}
.piste img{height:clamp(32px,3.8vw,44px);width:auto;max-width:180px;display:block;
  object-fit:contain;filter:grayscale(1);opacity:.58;transition:.45s var(--e)}
/* Un blason plein est illisible sous 50px : on lui donne la taille qu'il exige.
   Et contrairement aux trois logotypes au trait, c'est un aplat de couleurs :
   le passage en niveaux de gris l'ecrase en pate grise uniforme. Il lui faut
   donc du contraste et une opacite haute pour que la forme se lise encore. */
.piste img.blason{height:clamp(40px,4.8vw,56px);opacity:.72;
  filter:grayscale(1) contrast(1.5) brightness(1.04)}
/* Le survol ne joue que sur l'opacite, jamais sur le filtre : le ruban reste en
   noir et blanc d'un bout a l'autre. Rendre la couleur au passage de la souris
   faisait cohabiter deux traitements dans une meme rangee, et sur les deux
   marques d'Etat cela allumait un drapeau tricolore au milieu du gris. */
.piste .ref:hover img,.piste .ref:focus-visible img{opacity:1}
/* Les deux marques d'Etat portent un drapeau tricolore. En niveaux de gris ses
   trois bandes restent distinctes — le bleu #000091 tombe tres sombre, le rouge
   #e1000f a mi-hauteur, le blanc en haut — mais l'ecart se joue dans les tons
   fonces : un cran de contraste suffit a le rouvrir. Le ruban est en noir et
   blanc d'un bout a l'autre, survol compris : une seule marque en couleur au
   milieu de cinq logotypes gris tirait l'oeil vers elle sans raison. */
.piste img.marque{filter:grayscale(1) contrast(1.22);opacity:.62}
/* le bloc-marque de l'Etat est un carre dense — drapeau, nom, devise sur trois
   lignes : a la hauteur des logotypes au trait, sa derniere ligne tombe sous
   4 px. Il lui faut la hauteur que sa composition exige. */
.piste img.bloc{height:clamp(46px,5.6vw,64px);max-width:none}

.piste .ref span{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--encre-doux);opacity:.62;white-space:nowrap;transition:.45s var(--e)}
.piste .ref:hover span,.piste .ref:focus-visible span{opacity:1;color:var(--seve)}
/* fleche d'ouverture externe, revelee au survol */
.piste .ref::after{content:'';position:absolute;top:2px;right:0;width:9px;height:9px;
  opacity:0;transform:translate(-3px,3px);transition:.4s var(--e);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E6F4C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")}
.piste .ref:hover::after,.piste .ref:focus-visible::after{opacity:1;transform:none}
.sceaux{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 11px;
  margin-top:clamp(26px,3.2vw,38px);padding-inline:clamp(20px,4.5vw,48px)}
.sceau{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--encre-doux);
  border:1px solid var(--trait);border-radius:999px;padding:8px 15px;background:var(--creme);
  transition:.35s var(--e)}
.sceau:hover{border-color:rgba(30,111,76,.4);color:var(--encre)}
.sceau svg{width:14px;height:14px;stroke:var(--seve);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ═══ 03 · cartes d'expertise — 5e feuille ═══ */
.feuille:nth-child(5){border-radius:32px 32px 32px 4px}
/* meme raison que .suite : une bordure transparente ne signalait rien. Contour
   plutot que aplat — dans une carte deja chargee, le plein ferait tache. */
.feuille .lire{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:12.5px;
  font-weight:600;color:var(--seve);text-decoration:none;
  border:1px solid rgba(30,111,76,.34);border-radius:999px;padding:9px 15px;
  transition:.3s var(--e)}
.feuille .lire svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:.35s var(--e)}
.feuille .lire:hover{background:var(--seve);border-color:var(--seve);color:var(--papier)}
.feuille .lire:hover svg{transform:translateX(4px)}

/* lien-appel générique : la même voix que .feuille .lire, en plus affirmé,
   pour les sections qui n'ont aujourd'hui aucune sortie vers le contact */
/* C'etait un lien souligne : au bas d'une section, il ne se voyait pas comme
   une sortie. Il reprend la pilule du hero plutot qu'un style de plus. */
.suite{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(26px,3vw,38px);
  font-size:14px;font-weight:600;color:var(--papier);text-decoration:none;
  background:var(--seve);border:1px solid var(--seve);border-radius:999px;
  padding:14px 24px;transition:.35s var(--e)}
.suite svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:.35s var(--e)}
.suite:hover{background:var(--encre);border-color:var(--encre);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(15,42,33,.18)}
.suite:hover svg{transform:translateX(4px)}
/* Sur un ecran etroit, un libelle long remplit la pilule sur deux lignes et la
   fleche partait seule contre le bord droit. Centrer garde les deux au contact. */
@media(max-width:560px){
  .suite{justify-content:center;text-align:center}
}
/* sur la seule section sombre, le vert de seve se noierait dans l'encre */
.engagement .suite{background:var(--pousse);border-color:var(--pousse);color:var(--encre)}
.engagement .suite:hover{background:var(--creme);border-color:var(--creme);color:var(--encre);
  box-shadow:0 12px 30px rgba(0,0,0,.3)}
.feuille .bas{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  justify-content:space-between;margin-top:auto;padding-top:18px}
.feuille .bas .tag{margin-top:0}

/* la sixieme cellule n'est pas une expertise : c'est l'appel. Elle
   complete la grille et remplace le desequilibre de largeur par un
   contraste de valeur — c'est elle, desormais, qui casse le motif. */
.feuille.appel{background:var(--seve);border-color:transparent;color:var(--creme);
  justify-content:center}
.feuille.appel .ic{color:var(--creme);opacity:.85}
.feuille.appel h3{color:var(--creme)}
.feuille.appel p{color:rgba(244,241,232,.8)}
.feuille.appel .bas{padding-top:20px}
/* l'appel de la cellule verte : une pilule pleine creme, seule inversion
   de valeur du site. Le reflet anime qui la precedait doublait le texte
   dans un pseudo-element cale sur la boite et non sur le texte : decale du
   padding de la pilule, il rendait le libelle illisible pendant la moitie
   de sa traversee. Un contraste fixe capte l'oeil sans rien masquer. */
.feuille.appel .lire{background:var(--creme);border-color:var(--creme);
  color:var(--encre);font-weight:650}
.feuille.appel .lire svg{stroke:var(--encre)}
.feuille.appel .lire:hover{background:var(--papier);border-color:var(--papier);
  color:var(--encre);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.feuille.appel .lire:hover svg{stroke:var(--encre)}
.feuille.appel:hover{border-color:transparent;
  box-shadow:0 18px 40px rgba(15,42,33,.22)}
.feuille.appel::after{background:linear-gradient(90deg,var(--creme),rgba(244,241,232,.3))}

/* ═══ 04 · VINGT ANS ═══ */
.histoire{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,4.6vw,66px);
  align-items:center}
.portrait{position:relative;--h-portrait:clamp(340px,44vw,520px)}
.cadre-img{position:relative;display:block;overflow:hidden;
  border-radius:180px 180px 26px 26px}
.portrait img{width:100%;height:var(--h-portrait);object-fit:cover;display:block}
/* cadre décalé : l'arche doublée d'un trait, comme un tuteur. Le decalage
   est une translation pure, jamais un `inset` asymetrique : avec un inset,
   les deux arches n'ont plus le meme centre, le trait entre dans l'image
   par le haut et va enfermer la legende par le bas. La hauteur est bornee
   a celle de la photo pour que la legende reste hors du cadre. */
.portrait::before{content:'';position:absolute;inset:0 0 auto 0;height:var(--h-portrait);
  z-index:-1;transform:translate(18px,18px);
  border:1px solid var(--trait);border-radius:180px 180px 26px 26px;pointer-events:none}
.portrait figcaption{margin-top:14px;font-size:12px;color:var(--encre-doux)}
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:24px;overflow:hidden;
  margin-top:clamp(28px,3.4vw,40px)}
.chiffres div{background:var(--papier);padding:24px 22px}
.chiffres b{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1;display:block;letter-spacing:-.03em}
.chiffres b i{font-style:normal;font-size:.46em;color:var(--encre-doux);margin-left:3px}
.chiffres span{display:block;margin-top:9px;font-size:12.5px;color:var(--encre-doux);line-height:1.5}

/* ═══ 05 · DÉMARCHE — papier recyclé ═══ */
.demarche{position:relative;background:var(--creme-2);
  border-block:1px solid var(--trait);overflow:hidden}
/* grain plus dru + fibres : la section doit se sentir sous le doigt */
.demarche::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.85;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.075'/%3E%3C/svg%3E")}
.demarche::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(112deg,transparent 49.7%,rgba(122,92,62,.11) 49.9%,transparent 50.1%),
    linear-gradient(58deg,transparent 17.8%,rgba(30,111,76,.09) 18%,transparent 18.2%),
    linear-gradient(138deg,transparent 74.8%,rgba(122,92,62,.08) 75%,transparent 75.2%)}
.demarche .wrap{position:relative;z-index:2}
.cycle-grille{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);
  align-items:center}
.cycle{position:relative;width:100%;max-width:400px;margin-inline:auto;aspect-ratio:1}
.cycle svg{width:100%;height:100%;display:block;overflow:visible}

/* ── la roue : un objet qu'on attrape ────────────────────────────────
   Le cadran etait un dessin. Il devient un volume qu'on fait tourner a
   la souris, avec inertie a la relache. L'inclinaison en rotateX donne
   l'epaisseur ; c'est elle qui distingue une roue d'un cercle plat. */
.roue-scene{position:absolute;inset:0;perspective:1400px;perspective-origin:50% 46%}
.roue-plan{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(13deg + var(--pitch,0deg))) rotateZ(0.001deg);
  transition:transform .5s var(--e)}
.roue-plan.tenue{transition:none}
.roue{position:absolute;inset:0;transform-style:preserve-3d;cursor:grab;
  touch-action:pan-y;will-change:transform}
.roue:active{cursor:grabbing}
.roue svg{position:absolute;inset:0;transform:translateZ(0.1px)}
/* Le disque sous l'anneau donne son corps a la roue. Il ne doit se voir
   nulle part : le degrade partait d'un centre decale et se coupait a 72 %,
   ce qui dessinait un bord franc en travers du papier, et l'ombre portee
   redoublait ce contour. Degrade centre, eteint a 100 %, aucune ombre :
   il reste du volume, il ne reste plus de demarcation. */
.roue::before{content:'';position:absolute;left:8%;top:8%;width:84%;height:84%;
  border-radius:50%;transform:translateZ(-16px);
  background:radial-gradient(circle closest-side at 50% 50%,rgba(30,111,76,.05),rgba(30,111,76,.026) 46%,rgba(30,111,76,0) 100%)}

/* Le rayon porte le jalon : c'est lui qui a la taille de la roue, donc
   c'est sur lui qu'on tourne. Un translateY en pourcentage pose sur le
   bouton se serait refere a la hauteur du bouton — les quatre jalons
   empiles au centre. */
.rayon{position:absolute;inset:0;transform:rotate(var(--a));
  transform-style:preserve-3d;pointer-events:none}
.jalon{position:absolute;left:50%;top:14%;margin:0;padding:7px 13px;pointer-events:auto;
  /* la contre-rotation est constante : au repos les quatre etiquettes sont
     droites, et elles s'inclinent avec la roue des qu'on la lance */
  transform:translate(-50%,-50%) rotate(calc(-1 * var(--a))) translateZ(26px);
  transform-origin:center;background:var(--papier);border:1px solid var(--trait);
  border-radius:999px;white-space:nowrap;cursor:pointer;
  font-family:'Inter',system-ui,sans-serif;font-size:clamp(10.5px,1.05vw,13px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-doux);
  transition:color .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e)}
.jalon:hover,.jalon:focus-visible,.jalon.actif{color:var(--seve);
  border-color:rgba(30,111,76,.45);box-shadow:0 6px 18px rgba(15,42,33,.09);outline:none}

/* ── l'invite a faire tourner ─────────────────────────────────────────
   Le texte seul ne dit pas quel geste faire. La fleche est posee dans le
   plan incline de la roue, en dehors de l'anneau, et son trait se rejoue
   en boucle dans le sens horaire : c'est le geste, pas une icone. */
.roue-invite{position:absolute;inset:0;pointer-events:none;z-index:5;
  transform:translateZ(30px);color:var(--seve);
  transition:opacity .45s var(--e);opacity:.72}
/* pas de non-scaling-stroke : il fait calculer le pointille en pixels
   ecran alors que le trace est en unites du dessin, et l'arc n'est plus
   dessine qu'a moitie. Trait et pointille suivent tous deux l'echelle. */
.roue-invite path{fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.roue-invite .arc{stroke-dasharray:140;stroke-dashoffset:140;
  animation:invite 3.4s var(--e) infinite}
.roue-invite .pointe{opacity:0;animation:invite-pointe 3.4s var(--e) infinite}
@keyframes invite{0%{stroke-dashoffset:140}42%,100%{stroke-dashoffset:0}}
@keyframes invite-pointe{0%,32%{opacity:0}46%,100%{opacity:1}}
.roue-appel{position:absolute;top:2%;right:1.5%;max-width:44%;margin:0;text-align:right;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(14px,1.55vw,27px);line-height:1.22;color:var(--seve);
  pointer-events:none;z-index:5;transition:opacity .45s var(--e);opacity:.78}
/* des que la roue a servi une fois, l'invite ne revient plus */
.cycle.tourne .roue-invite,.cycle.tourne .roue-appel,
.cycle.touche .roue-invite,.cycle.touche .roue-appel{opacity:0}

.roue-aide{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--encre-doux);opacity:.62;transition:opacity .4s var(--e);pointer-events:none}
.roue-aide svg{width:15px;height:15px;flex:none}
.cycle.tourne .roue-aide{opacity:0}

/* ── la fiche de detail, au survol d'une etape ───────────────────────
   Reprise du panneau flottant d'aegisprops.com : barre de titre a trois
   pastilles, fond papier, ombre portee longue. */
.fiche{position:absolute;z-index:6;width:min(300px,86%);margin:0;
  background:var(--papier);border:1px solid var(--trait);border-radius:16px;
  box-shadow:0 26px 60px rgba(15,42,33,.16);overflow:hidden;pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.97);
  transition:opacity .3s var(--e),transform .3s var(--e)}
.fiche.ouverte{opacity:1;transform:none}
.fiche-tete{display:flex;align-items:center;gap:11px;padding:11px 15px;
  border-bottom:1px solid var(--trait);background:var(--creme)}
.fiche-points{display:inline-flex;gap:5px}
.fiche-points i{width:7px;height:7px;border-radius:50%;background:var(--trait)}
.fiche-code{font-family:'Inter',system-ui,sans-serif;font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--encre-doux)}
.fiche-corps{padding:15px}
.fiche-corps p{font-size:13.5px;line-height:1.62;color:var(--encre-doux);margin:0}
.cycle .anneau{fill:none;stroke:var(--trait);stroke-width:1.4}
.cycle .trace{fill:none;stroke:var(--seve);stroke-width:2.2;stroke-linecap:round;
  stroke-dasharray:var(--l);stroke-dashoffset:var(--l);
  transition:stroke-dashoffset 2.6s var(--e)}
.cycle.vu .trace{stroke-dashoffset:0}
.cycle .noeud{fill:var(--creme-2);stroke:var(--seve);stroke-width:2;
  opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
  transition:.6s var(--e)}
.cycle.vu .noeud{opacity:1;transform:scale(1)}
.cycle text{font-family:'Inter',system-ui,sans-serif;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--encre-doux);opacity:0;transition:.6s var(--e)}
.cycle.vu text{opacity:1}
.cycle .coeur{font-family:'Fraunces',Georgia,serif;font-size:15px;letter-spacing:0;
  text-transform:none;fill:var(--encre)}
.engagements{list-style:none;display:flex;flex-direction:column;gap:2px}
.engagements li{position:relative;padding:22px 0 22px 34px;border-bottom:1px solid var(--trait)}
.engagements li:last-child{border-bottom:0}
.engagements li::before{content:'';position:absolute;left:0;top:29px;width:16px;height:16px;
  border:1.6px solid var(--seve);border-radius:0 100% 0 100%;transform:rotate(-12deg)}
.engagements h3{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.1rem,2vw,1.32rem);letter-spacing:-.02em;margin-bottom:8px}
.engagements p{font-size:14.5px;color:var(--encre-doux);line-height:1.65;max-width:54ch}

/* ═══ 06 · RÉALISATIONS — chapitres épinglés, défilement latéral ═══
   Le lecteur descend, la scène reste épinglée et les réalisations
   défilent de la droite vers la gauche : une seule occupe l'écran à la
   fois, photo à droite, voile clair translucide à gauche et texte
   par-dessus. Repli obligatoire en colonne sous 901px et sous
   prefers-reduced-motion (bloc dédié en bas de feuille). */
.cas-tete{margin-bottom:clamp(24px,3vw,38px)}
.cas-tete .titre-bloc{margin-bottom:0}

/* la scène : sa hauteur est le carburant du défilement latéral.
   Un écran pour la première carte, puis --course de descente par
   carte supplémentaire. */
.scene-cas{--n:3;--course:118vh;position:relative;
  height:calc(100vh + (var(--n) - 1) * var(--course))}
.epingle{position:sticky;top:0;height:100vh;display:flex;align-items:center;
  overflow:hidden;contain:layout paint}
/* flex:none — sans quoi la piste, simple élément flexible de la scène
   épinglée, se ferait rétrécir à la largeur de l'écran */
.piste-cas{display:flex;flex:0 0 auto;width:calc(var(--n) * 100%);will-change:transform}

.cas{flex:0 0 calc(100% / var(--n));padding-inline:var(--g);display:flex}
.cas-cadre{position:relative;flex:1;display:flex;overflow:hidden;contain:paint;
  height:min(70vh,640px);border-radius:30px 30px 30px 6px;background:var(--encre);
  box-shadow:0 34px 80px -46px rgba(15,42,33,.55);
  transform:scale(.955);opacity:.62;transition:transform .7s var(--e),opacity .5s var(--e)}
.cas.actif .cas-cadre{transform:scale(1);opacity:1}
.cas-photo{position:absolute;inset:0;overflow:hidden}
.cas-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.12) translate3d(var(--px,0%),0,0);will-change:transform;
  filter:contrast(1.04) saturate(.96)}
.cas-photo::after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(15,42,33,0) 45%,rgba(15,42,33,.42) 100%)}

/* le voile : blanc cassé translucide, flou d'arrière-plan, et un
   masque qui le laisse se dissoudre dans la photo au lieu de couper
   net. Opacité tenue haut (.86 mini) pour garder l'encre lisible
   quelle que soit la photo dessous. */
.cas-voile{position:relative;z-index:2;height:100%;width:min(47%,580px);
  padding:clamp(30px,3.4vw,54px) clamp(58px,7.5vw,112px) clamp(30px,3.4vw,54px) clamp(30px,3.4vw,54px);
  display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
  background:linear-gradient(96deg,rgba(251,249,243,.96) 0%,rgba(251,249,243,.92) 62%,rgba(251,249,243,.8) 100%);
  backdrop-filter:blur(13px) saturate(1.2);-webkit-backdrop-filter:blur(13px) saturate(1.2);
  -webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,0) 100%)}
.cas-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cas-rang{font-family:'Fraunces',Georgia,serif;font-size:13px;letter-spacing:.06em;
  color:var(--seve)}
.cas-meta .lieu{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);border:1px solid var(--trait);border-radius:999px;
  padding:6px 13px;background:rgba(255,255,255,.45)}
.cas-voile h3{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(1.5rem,2.7vw,2.15rem);letter-spacing:-.025em;line-height:1.14;
  max-width:15ch}
.cas-ligne{display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:baseline}
.cas-ligne dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);padding-top:2px}
.cas-ligne dd{font-size:14.5px;color:var(--encre-doux);line-height:1.62;max-width:30ch}
.cas-voile dl{display:flex;flex-direction:column;gap:12px}
.cas-gain{margin-top:auto;padding-top:18px;border-top:1px solid var(--trait);
  display:flex;align-items:baseline;gap:12px}
.cas-gain b{font-family:'Fraunces',Georgia,serif;font-weight:500;
  font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.03em;color:var(--seve);line-height:1}
.cas-gain span{font-size:12.5px;color:var(--encre-doux);line-height:1.45;max-width:20ch}

/* le fil de progression, calé en bas de l'écran épinglé */
.cas-fil{position:absolute;left:0;right:0;bottom:clamp(22px,3.4vh,40px);
  display:flex;align-items:center;gap:16px;padding-inline:var(--g);z-index:3}
.cas-fil span{font-family:'Fraunces',Georgia,serif;font-size:12.5px;
  color:var(--encre-doux);flex:none;font-variant-numeric:tabular-nums}
.jauge{flex:1;height:2px;background:var(--trait);border-radius:2px;overflow:hidden}
.jauge i{display:block;height:100%;width:33%;border-radius:2px;
  background:linear-gradient(90deg,var(--pousse),var(--seve));
  transform-origin:left;transition:width .45s var(--e)}

/* ═══ 08 · PAROLES — ruban de paroles ═══ */
/* ═══ 07 · ENGAGEMENT ══════════════════════════════════════════════
   Sixieme section, et la seule sur fond sombre avant le pied. Deux
   raisons : elle coupe la suite creme/creme-2 qui donnait a la page son
   air de diaporama, et elle isole le seul discours de la home qui ne
   parle ni de prestation ni de preuve. Le discours tient la colonne large,
   les reperes chiffres leur cartouche a cote : c'est ce vis-a-vis qui porte
   la section, l'escalier de trois colonnes qu'elle avait avant laissait un
   triangle de vide sous le premier pilier. */
.engagement{position:relative;background:var(--encre);color:var(--creme);
  padding-block:clamp(64px,7.5vw,116px);overflow:hidden}
.engagement::before{content:'';position:absolute;inset:auto 0 0;height:70%;
  pointer-events:none;background:linear-gradient(180deg,transparent,rgba(122,92,62,.22))}
.engagement .wrap{position:relative;z-index:2}
.engagement .kicker{color:rgba(244,241,232,.5)}
.engagement .kicker::before{background:var(--pousse)}
.engagement h2 em{font-style:normal;color:var(--pousse)}
.engagement .sous{color:rgba(244,241,232,.68);border-left-color:rgba(244,241,232,.2)}
/* Le discours a droite, les reperes a gauche. La colonne des chiffres est
   volontairement plus etroite que celle du texte : elle se scanne, l'autre
   se lit. */
.eng-grille{display:grid;grid-template-columns:1.08fr minmax(320px,.92fr);
  gap:clamp(34px,4vw,68px);align-items:start;margin-top:clamp(40px,5vw,76px)}
/* trois rangees pleine largeur, separees par un filet — plus d'escalier */
.piliers{display:flex;flex-direction:column}
.pilier{display:grid;grid-template-columns:auto 1fr;align-items:start;
  gap:clamp(18px,2.2vw,38px);padding-block:clamp(24px,2.8vw,38px);
  border-top:1px solid rgba(244,241,232,.14)}
.pilier:first-child{border-top:0;padding-top:0}
.pilier:last-child{padding-bottom:0}
/* le chiffre gagne le rang de repere de plan : grave, aligne sur la premiere
   ligne du titre, et large assez pour tenir la colonne de gauche */
.pilier-num{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.4rem,3.6vw,3.5rem);
  line-height:.82;color:transparent;-webkit-text-stroke:1px rgba(63,169,113,.55);
  display:block;min-width:2.4em}
.pilier h3{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.22rem,1.8vw,1.62rem);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:12px}
/* la mesure passe de 42 a 66 caracteres : en rangee, une ligne calee sur 42
   laissait une gouttiere morte sur la moitie de la largeur. 66 est le haut du
   confort de lecture — au-dela, l'oeil perd sa ligne au retour. */
.pilier p{color:rgba(244,241,232,.74);font-size:15px;max-width:66ch}

/* ── le cartouche des reperes ──
   Un fond opaque, et non un simple cadre : le fil de cuivre passe derriere les
   objets poses sur le fond, il faut donc qu'il y ait de la matiere a passer
   derriere, sinon il traverse les chiffres. */
.cartouche{border:1px solid rgba(244,241,232,.17);border-radius:20px;
  background:rgba(8,25,19,.62);overflow:hidden}
.cartouche-tete{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px clamp(18px,1.8vw,24px);
  border-bottom:1px solid rgba(244,241,232,.14);
  font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(244,241,232,.46)}
.cartouche-corps{margin:0}
/* chaque repere est une ligne du registre : la valeur se scanne a gauche,
   l'intitule se range a droite, comme dans un cartouche cote */
.cartouche-corps>div{display:grid;grid-template-columns:auto 1fr auto;
  align-items:baseline;gap:clamp(12px,1.4vw,20px);
  padding:clamp(15px,1.7vw,21px) clamp(18px,1.8vw,24px);
  border-bottom:1px solid rgba(244,241,232,.09)}
/* la conduite pointillee du bordereau : sans elle, la valeur et son intitule
   se regardent de part et d'autre de 700 px de vide et la ligne ne se lit plus
   comme une ligne. */
.conduite{align-self:center;border-bottom:1px dashed rgba(244,241,232,.16);
  height:0;min-width:24px}
.cartouche-corps>div:last-child{border-bottom:0}
.cartouche-corps dt{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,2.5vw,2.35rem);line-height:1;color:var(--pousse);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cartouche-corps dd{margin:0;text-align:right;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(244,241,232,.52);line-height:1.45}
.cartouche-pied{padding:12px clamp(18px,1.8vw,24px) 14px;
  border-top:1px solid rgba(244,241,232,.14);
  font-size:10.5px;letter-spacing:.06em;color:rgba(244,241,232,.34)}
/* stretch et non flex-start : la largeur du cartouche est celle de sa colonne,
   pas celle de son contenu — sinon il se recroqueville a gauche et laisse un
   tiers de colonne vide a sa droite. */
.eng-cote{display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(20px,2.4vw,30px)}
.eng-cote .suite{align-self:flex-start}
.eng-cote .suite{margin-top:0}
/* Ces trois lignes habillaient un lien souligne ; converti en pilule, il en
   heritait un texte creme sur fond vert clair — 2,5:1, sous le seuil lisible —
   et une fleche verte sur vert. Le style de base, encre sur pousse, suffit. */
.paroles{background:var(--creme-2);border-block:1px solid var(--trait);overflow:hidden;
  padding-block:clamp(52px,6.2vw,92px) clamp(64px,8vw,116px)}
/* le bloc titre remonte et respire : colle au ruban, il donnait l'impression
   que le chapeau etait une legende des cartes plutot qu'une introduction */
.paroles .titre-bloc{margin-bottom:clamp(52px,7vw,112px)}
.dits-ruban{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.dits-piste{display:flex;width:max-content;align-items:stretch;
  animation:glisse-dits 58s linear infinite}
.dits-ruban:hover .dits-piste,.dits-ruban:has(:focus-visible) .dits-piste{animation-play-state:paused}
@keyframes glisse-dits{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}

/* une colonne = une parole + son panneau de secteur, alternés haut/bas */
.dit-col{display:flex;flex-direction:column;flex:none;
  width:clamp(288px,25.5vw,384px);padding-inline:clamp(8px,1vw,13px)}
.dit-col:nth-child(odd){flex-direction:column-reverse}

.dit{background:var(--papier);border:1px solid var(--trait);border-radius:20px;
  padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column;gap:17px;
  box-shadow:0 2px 7px rgba(15,42,33,.055);transition:.45s var(--e)}
.dit-col:hover .dit{border-color:rgba(30,111,76,.34);
  box-shadow:0 14px 34px rgba(15,42,33,.085)}
.dit-tete{display:flex;align-items:flex-start;gap:12px}
/* emplacement d'initiale ou de portrait, assumé comme vide tant qu'aucun avis réel n'est fourni */
.mono{width:40px;height:40px;border-radius:50%;flex:none;position:relative;
  border:1.4px dashed rgba(30,111,76,.42);background:rgba(30,111,76,.05);
  transition:.45s var(--e)}
.mono::after{content:'';position:absolute;left:50%;top:50%;width:13px;height:1.4px;
  background:var(--seve);opacity:.55;transform:translate(-50%,-50%)}
.dit-col:hover .mono{border-color:rgba(30,111,76,.7);background:rgba(30,111,76,.1)}
.dit-qui{flex:1;min-width:0}
.dit-qui b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--encre)}
.dit-qui span{display:block;font-size:11.8px;color:var(--encre-doux);margin-top:2px;
  line-height:1.35}
.dit-rep{flex:none;margin-top:3px;font-family:'Fraunces',Georgia,serif;font-size:12px;
  letter-spacing:.06em;color:var(--encre-doux);opacity:.45}
/* citations : sans-serif, large et fine — la voix du client, pas celle d'ABS */
.dit blockquote{font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:400;line-height:1.5;
  letter-spacing:-.016em;color:var(--encre)}

.dit-marque{position:relative;isolation:isolate;display:grid;place-items:center;
  height:clamp(128px,12.6vw,166px);padding:20px;text-align:center;overflow:hidden}
.dit-secteur{font-family:'Fraunces',Georgia,serif;font-weight:400;
  font-size:clamp(.92rem,1.1vw,1.08rem);line-height:1.26;letter-spacing:-.015em;
  color:var(--encre-doux);opacity:.7;transition:.45s var(--e)}
.dit-col:hover .dit-secteur{opacity:1;color:var(--seve)}
/* trame de plan d'exécution : croisées de tirets, effacées sur les bords */
.dit-trame{position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(90deg,var(--encre) 1px,transparent 1px),
    linear-gradient(180deg,var(--encre) 1px,transparent 1px);
  background-size:20px 20px;background-position:0 0;
  -webkit-mask-image:
    repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 8px),
    repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 8px),
    radial-gradient(ellipse 68% 68% at 50% 50%,#000 24%,transparent 76%);
  -webkit-mask-composite:source-in;
  mask-image:
    repeating-linear-gradient(90deg,#000 0 3px,transparent 3px 8px),
    repeating-linear-gradient(180deg,#000 0 3px,transparent 3px 8px),
    radial-gradient(ellipse 68% 68% at 50% 50%,#000 24%,transparent 76%);
  mask-composite:intersect}

/* mobile : les deux rubans defilent seuls, comme sur grand ecran. Le doigt
   pose les arrete (seve.js) : sans survol au toucher, un logo qui bouge ne
   serait jamais atteignable, et c'est ce qui les avait figes ici.
   Leur duree ne peut pas vivre dans cette feuille : la piste des logos est
   repetee autant de fois qu'il faut pour couvrir l'ecran, donc sa longueur
   va du simple au quintuple selon la largeur. A duree fixe, le ruban filait
   a 68 px/s sur 1920 et rampait a 13 px/s sur telephone. C'est la vitesse
   qui est posee, en JS, pas la duree.
   Pas de padding-inline sur les pistes : il entre dans la largeur totale et
   decale le raccord de la boucle d'autant. Les bords sont deja tenus par le
   masque en degrade. */
@media(max-width:700px){
  .piste .ref{margin-right:clamp(28px,7vw,48px)}
  .dit-col{width:min(78vw,320px)}
  .dit-marque{height:112px}
}

.avis-note{margin-top:clamp(28px,3.4vw,42px);display:flex;flex-wrap:wrap;gap:12px 18px;
  align-items:center;font-size:12.5px;color:var(--encre-doux);
  border-top:1px solid var(--trait);padding-top:22px}

/* ═══ 09 · CONTACT ═══ */
.contact-grille{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4.4vw,64px);
  align-items:start}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{display:flex;flex-direction:column;gap:8px}
.champ.large{grid-column:1 / -1}
.champ label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-doux)}
.champ label .req{color:var(--seve)}
.champ input,.champ select,.champ textarea{font-family:inherit;font-size:14.5px;
  color:var(--encre);background:var(--papier);border:1px solid var(--trait);
  border-radius:14px;padding:13px 15px;transition:.3s var(--e);width:100%}
.champ textarea{min-height:118px;resize:vertical;line-height:1.6}
.champ select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A6357' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;
  border-color:var(--seve);box-shadow:0 0 0 3px rgba(30,111,76,.1)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-pied{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:6px}
.form-pied small{font-size:12px;color:var(--encre-doux);max-width:38ch;line-height:1.5}
.envoyer{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;
  border:0;background:var(--seve);color:var(--papier);font-family:inherit;font-size:14px;
  font-weight:500;cursor:pointer;transition:.35s var(--e)}
.envoyer:hover:not(:disabled){background:var(--encre);transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(15,42,33,.18)}
.envoyer:disabled{opacity:.6;cursor:default;transform:none}
.envoyer .tourne{width:15px;height:15px;border:2px solid rgba(251,249,243,.35);
  border-top-color:var(--papier);border-radius:50%;animation:tourne .8s linear infinite;
  display:none;flex:none}
.envoyer[data-etat="envoi"] .tourne{display:block}
.envoyer[data-etat="envoi"] svg{display:none}
@keyframes tourne{to{transform:rotate(360deg)}}
.retour{grid-column:1 / -1;font-size:13.5px;line-height:1.6;padding:14px 16px;
  border-radius:14px;display:none}
.retour.ok{display:block;background:rgba(63,169,113,.12);color:var(--seve);
  border:1px solid rgba(63,169,113,.32)}
.retour.ko{display:block;background:rgba(217,131,36,.1);color:var(--ecorce);
  border:1px solid rgba(217,131,36,.32)}
/* colonne droite : la zone d'intervention */
.zone-carte{background:var(--papier);border:1px solid var(--trait);border-radius:26px;
  padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column}
.zone-carte svg{width:100%;height:auto;display:block}
/* cale par mesure (voir script) : le cadre epouse exactement la colonne des
   champs — du haut du premier champ de saisie au bas du dernier. La carte
   prend le mou, la ligne telephonique se pose sur le bord bas. */
.zone-carte.cale{height:var(--h-cadre)}
.zone-carte.cale>svg{flex:1 1 auto;min-height:0;height:100%}
.zone-carte.cale .ligne-pro{margin-top:auto}
.carte-cercle{fill:rgba(30,111,76,.06);stroke:rgba(30,111,76,.34);stroke-width:1.2;
  stroke-dasharray:5 6}
.carte-halo{fill:rgba(63,169,113,.07)}
.carte-pt{fill:var(--encre-doux);opacity:.55}
.carte-centre{fill:var(--seve)}
.carte-onde{fill:none;stroke:var(--pousse);stroke-width:1.4;opacity:0;
  animation:onde 3.6s var(--e) infinite}
@keyframes onde{0%{r:8;opacity:.55}100%{r:52;opacity:0}}
.carte-nom{font-family:'Inter',system-ui,sans-serif;font-size:9.5px;letter-spacing:.08em;
  fill:var(--encre-doux)}
.carte-nom.fort{fill:var(--encre);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.zone-listes{margin-top:22px;padding-top:20px;border-top:1px solid var(--trait);
  display:flex;flex-wrap:wrap;gap:8px}
/* l'ecart sous les pastilles est porte ici et non par la ligne telephonique :
   quand le cadre est cale, celle-ci passe en margin-top:auto pour se poser sur
   le bord bas, et un auto n'a pas de minimum — les deux blocs finissaient au
   contact des que la colonne se remplissait. */
.zone-listes{margin-bottom:clamp(34px,3.4vw,48px)}
.zone-listes span{font-size:11.5px;color:var(--encre-doux);border:1px solid var(--trait);
  border-radius:999px;padding:6px 12px}
.ligne-pro{display:flex;align-items:center;gap:14px;margin-top:22px;padding:18px 20px;
  border-radius:20px;background:var(--encre);color:var(--creme)}
.ligne-pro .rond{width:42px;height:42px;border-radius:50%;background:rgba(63,169,113,.16);
  display:grid;place-items:center;flex:none}
.ligne-pro svg{width:18px;height:18px;stroke:var(--pousse);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ligne-pro small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,241,232,.5);margin-bottom:4px}
.ligne-pro a{color:var(--creme);text-decoration:none;font-size:19px;font-weight:600;
  letter-spacing:-.01em;white-space:nowrap}
/* colonne etroite (1024) : le numero cassait sur deux lignes et volait au
   cadran la hauteur qu'il lui reste. On resserre plutot que de rogner. */
@media(min-width:901px) and (max-width:1120px){
  .ligne-pro{gap:11px;padding:15px 15px}
  .ligne-pro .rond{width:36px;height:36px}
  .ligne-pro a{font-size:16.5px}
  .ligne-pro small{font-size:10px;letter-spacing:.1em}
  .zone-listes{gap:6px}
  .zone-listes span{font-size:10.5px;padding:5px 10px}
}
.ligne-pro a:hover{color:var(--pousse)}

/* ═══ 09 · pied : réseaux + hébergement ═══ */
.reseaux{display:flex;gap:10px;margin-top:20px}
.reseaux a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(244,241,232,.2);
  display:grid;place-items:center;color:var(--creme);transition:.35s var(--e);width:40px}
.reseaux a::after{display:none}
.reseaux a:hover{background:var(--pousse);border-color:var(--pousse);color:var(--encre);
  transform:translateY(-2px)}
.reseaux svg{width:17px;height:17px;fill:currentColor}
.vert-heberge{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;
  color:rgba(244,241,232,.6);border:1px solid rgba(244,241,232,.16);border-radius:999px;
  padding:7px 14px;line-height:1.4}
.vert-heberge svg{width:13px;height:13px;stroke:var(--pousse);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ═══ MOUVEMENT ═══════════════════════════════════════════════════
   Un geste dominant par section, jamais deux qui se disputent l'oeil.
   Tout est neutralisé plus bas par prefers-reduced-motion. */

/* révélation de base, plus ample qu'un simple fondu */
.rev{opacity:0;transform:translateY(34px);
  transition:opacity .95s var(--e) var(--d,0s),transform 1.05s var(--e) var(--d,0s)}
.rev.vu{opacity:1;transform:none}

/* un bloc de titre ne monte pas en masse : chacune de ses lignes monte seule */
.titre-bloc.rev,.chiffres.rev,.form.rev{opacity:1;transform:none}
.kicker{opacity:0;transform:translateY(10px);transition:.7s var(--e)}
.vu .kicker{opacity:1;transform:none}
.kicker::before{width:46px;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e) .08s}
.vu .kicker::before{transform:scaleX(1)}

/* lignes de titre : un masque, et le texte remonte de dessous */
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.ln-i{display:block;transform:translateY(108%);
  transition:transform 1.05s cubic-bezier(.26,.72,.26,1) calc(var(--i,0) * 155ms + 70ms)}
.vu .ln-i{transform:none}

/* le mot en italique se souligne une fois la ligne posée.
   Fond dégradé plutôt que pseudo-élément : un mot coupé sur deux lignes
   garde un trait par fragment au lieu d'une barre qui traverse le vide. */
h2 em{background-image:linear-gradient(rgba(63,169,113,.5),rgba(63,169,113,.5));
  background-repeat:no-repeat;background-position:0 94%;background-size:0% 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1s var(--e) calc(var(--n,2) * 155ms + 340ms)}
.vu h2 em{background-size:calc(100% - .1em) 2px}

/* le chapeau entre après la dernière ligne du titre */
.titre-bloc .sous{opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--e) calc(var(--n,2) * 155ms + 170ms),
             transform .9s cubic-bezier(.26,.72,.26,1) calc(var(--n,2) * 155ms + 170ms)}
.titre-bloc.vu .sous{opacity:1;transform:none}

/* cascade générique : les enfants entrent l'un après l'autre */
[data-cascade] > *{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--e) calc(var(--i,0) * 75ms),
             transform .85s var(--e) calc(var(--i,0) * 75ms)}
[data-cascade].vu > *{opacity:1;transform:none}

/* grille d'expertises : cascade par rangée, pas par carte isolée */
.feuille:nth-child(1),.feuille:nth-child(4){--d:0s}
.feuille:nth-child(2),.feuille:nth-child(5){--d:.1s}
.feuille:nth-child(3){--d:.2s}

/* engagements : le décalage, puis la feuille qui se dessine */
.engagements li:nth-child(2){--d:.11s}
.engagements li:nth-child(3){--d:.22s}
.engagements li::before{transform:rotate(-12deg) scale(0);
  transition:transform .8s var(--e) calc(var(--d,0s) + .2s)}
.engagements li.vu::before{transform:rotate(-12deg) scale(1)}

/* ── enrichissements pilotés par le défilement (Chrome, Edge) ──
   Purement additifs : sans support, la page garde son état de repos. */
@supports (animation-timeline:scroll()){
}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* le fond du hero dérive moins vite que la page : le cadre respire */
    .hero-fond{animation:derive-fond linear both;
      animation-timeline:scroll(root);animation-range:0 100svh}
    @keyframes derive-fond{to{transform:translateY(11%)}}
    .hero-in,.hero-pied{animation:quitte linear both;
      animation-timeline:scroll(root);animation-range:16svh 86svh}
    @keyframes quitte{to{opacity:0;transform:translateY(-30px)}}
    /* l'image de l'atelier glisse dans son arche */
    .cadre-img img{animation:derive-img linear both;
      animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes derive-img{from{transform:translateY(-4.5%) scale(1.1)}
                          to{transform:translateY(4.5%) scale(1.1)}}
  }
}

/* ── mise en page : le titre à gauche, le chapeau en vis-à-vis ──
   Cinq blocs de titre identiques d'affilée donnaient une colonne unique
   au milieu du cadre. Le duo occupe la largeur et alterne le rythme. */
.titre-bloc.duo{max-width:none;display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(18px,3.2vw,56px);align-items:end}
.titre-bloc.duo .kicker{grid-column:1 / -1}
.titre-bloc.duo h2{max-width:19ch}
.titre-bloc.duo .sous{margin-top:0;max-width:46ch;padding-block:4px;
  padding-left:clamp(16px,1.7vw,26px);border-left:1px solid var(--trait)}
/* ═══ GRANDS ÉCRANS ═══════════════════════════════════════════════
   Au-delà de 1600px, un cadre de 1280 laisse près d'un tiers de la
   fenêtre vide de chaque côté : la page se lit comme une colonne
   posée au milieu d'un écran. Les cadres s'ouvrent proportionnellement
   — le rail éditorial garde ses décalages relatifs entre sections. */
@media(min-width:1600px){
  .wrap{max-width:1440px}
  #expertises,#atelier,#realisations .cadre-cas,.pied{max-width:1620px}
  #contact{max-width:1320px}
}

@media(max-width:900px){
  .titre-bloc.duo{grid-template-columns:1fr;align-items:start}
  .titre-bloc.duo h2{max-width:none}
  .titre-bloc.duo .sous{margin-top:18px;padding-left:0;border-left:0}
}
/* l'atelier : le portrait sort de la colonne et va chercher le bord.
   Seulement au-dela de 1200px : plus bas, la marge negative vaut la
   gouttiere entiere, l'arche arrive collee au bord de la fenetre et se
   fait couper — le debord n'est plus un parti pris, c'est un accident. */
@media(min-width:1200px){
  .histoire .portrait{margin-left:calc(clamp(28px,2.6vw,44px) * -1)}
}

/* ═══ RYTHME DE SECTION ═══════════════════════════════════════════
   Huit sections identiques en bande pleine largeur, centrées et
   respirant pareil, ont le rythme d'un diaporama. On casse ça : largeur
   occupée, calage vertical et hauteur varient d'une section à l'autre,
   et deux d'entre elles mordent sur leur voisine au lieu de s'arrêter net. */

/* confiance : la bande de réassurance mord sur le bas du hero
   plutôt que de lui succéder à plat — première couture effacée */
/* le bandeau mord sur le hero — mais le hero est rallonge d'autant,
   sinon la zone sombre ne remplit plus le premier ecran (bug signale) */
:root{--mordu:clamp(44px,6vw,64px)}
.hero{min-height:calc(100svh + var(--mordu))}
.confiance{margin-top:calc(var(--mordu) * -1)}

/* expertises : on resserre le bas — l'atelier vient mordre dessus */
#expertises{padding-bottom:clamp(28px,3.4vw,44px)}

/* atelier : chevauche le bas des expertises (même fond, aucune couture
   visible) et rompt le centrage vertical — le portrait monte,
   le texte et les chiffres redescendent d'un cran */
#atelier{margin-top:clamp(-60px,-4.4vw,-40px);padding-top:clamp(30px,4vw,52px)}
@media(min-width:901px){
  .histoire{align-items:start}
  .histoire > div{margin-top:clamp(28px,4vw,52px)}
}

/* démarche : grille franchement asymétrique, cadran calé en haut
   au lieu d'être centré comme partout ailleurs, section plus dense */
.demarche{padding-block:clamp(48px,6vw,84px)}
@media(min-width:901px){
  .cycle-grille{grid-template-columns:.64fr 1.36fr;align-items:start}
  .cycle{margin-top:clamp(-18px,-1.6vw,-8px)}
  .engagements{margin-top:24px}
}

/* réalisations : la section n'a plus de padding bas — la scène
   épinglée se termine pile sur la section suivante */
/* le bas etait a zero du temps ou la section finissait sur la scene epinglee ;
   depuis qu'un bouton la clot, il se retrouvait colle au bord. */
#realisations{padding-block:clamp(48px,6vw,80px) clamp(64px,7vw,104px)}

/* contact : colonnes franchement inégales — le formulaire prend le pas,
   la carte respire dans une marge plus étroite au lieu d'un 50/50 sage */
@media(min-width:901px){
  .contact-grille{grid-template-columns:1.35fr .65fr}
}

/* ═══ RAIL ÉDITORIAL ══════════════════════════════════════════════
   Défaut signalé : tous les conteneurs partagent le même cadre centré,
   donc chaque section démarre exactement sur la même verticale. Huit
   repères (01 — Expertises, 02 — L'atelier…) empilés au pixel près sur
   un unique rail, c'est ce qui donne la lecture « diaporama » même une
   fois les grilles internes cassées.

   On fait varier le cadre lui-même : largeur occupée et point de départ
   changent d'une section à l'autre. Les décalages restent des paddings
   à l'intérieur d'un cadre centré — jamais des marges négatives — donc
   aucun risque de débordement horizontal quelle que soit la fenêtre.
   Seuil à 1160px : en dessous, le cadre standard reprend la main. */
@media(min-width:1160px){
  /* 01 · expertises — le cadre le plus large, légèrement rentré à gauche */
  #expertises{max-width:1400px;padding-left:calc(var(--g) + 4%)}

  /* 02 · atelier — tiré vers la gauche : le portrait débordait déjà de sa
     colonne vers le bord, la section l'accompagne au lieu de le retenir */
  #atelier{max-width:1400px;padding-right:calc(var(--g) + 12%)}

  /* 03 · démarche — la contre-mesure : poussé franchement vers la droite */
  .demarche .wrap{padding-left:calc(var(--g) + 8.5%)}


  /* 06 · paroles — le ruban défile déjà pleine largeur ; c'est le bloc
     de titre qui décroche du rail, plus loin que partout ailleurs */
  .paroles .wrap{padding-left:calc(var(--g) + 12.5%)}

  /* 07 · contact — resserrement avant le pied : le cadre le plus étroit */
  #contact{max-width:1160px}

  /* pied — retour au cadre large, en écho à 01 */
  .pied{max-width:1400px}
}

/* ═══ BORD À BORD ═════════════════════════════════════════════════
   Le rail précédent décalait les cadres, mais tous les blocs restaient
   rentrés vers le centre : sur grand écran, un titre de 19 caractères
   flottait au milieu d'un cadre de 1400. On inverse le principe sur les
   quatre sections concernées — elles perdent leur largeur maximale et ne
   gardent que la gouttière de page ; à l'intérieur, le titre s'ancre sur
   le bord gauche et le chapeau sur le bord droit. Le rythme ne vient
   plus d'un décalage de cadre, mais du vide central et de ce que chaque
   section met dans sa moitié gauche (photo, cadran, ruban). */
@media(min-width:1160px){
  #expertises,#atelier,.demarche .wrap,.paroles .wrap,
  .engagement .wrap,#realisations .cadre-cas{max-width:none;padding-inline:var(--g)}

  /* le duo s'écarte aux deux bords : deux moitiés égales, le chapeau
     poussé à l'extrémité droite de la sienne au lieu d'y flotter */
  #expertises .titre-bloc.duo,
  .demarche .titre-bloc.duo,
  .engagement .titre-bloc.duo,
  .paroles .titre-bloc.duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(40px,6vw,120px)}
  #expertises .titre-bloc.duo .sous,
  .demarche .titre-bloc.duo .sous,
  .engagement .titre-bloc.duo .sous,
  .paroles .titre-bloc.duo .sous{justify-self:end}

  /* 01 · expertises — six cellules sur toute la largeur de page ; la
     mesure de texte reste bornée dans la carte, sinon une ligne de
     90 caractères devient illisible au-delà de 1700px */
  .feuilles{gap:clamp(18px,1.5vw,26px)}
  .feuille p{max-width:46ch}

  /* 02 · l'atelier — la photo prend la moitié gauche jusqu'au bord de
     la fenêtre et gagne un quart de hauteur ; le texte va chercher le
     bord droit au lieu de s'arrêter à 12 % de la fin */
  .histoire{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
    gap:clamp(36px,4vw,68px)}
  .histoire .portrait{--h-portrait:clamp(430px,46vw,660px);
    margin-left:calc(var(--g) * -1)}
  /* le bloc de texte se cale sur le bord droit : sa largeur reste bornée
     pour la lisibilité, c'est le vide qui se déplace au centre */
  .histoire > div{justify-self:end;width:100%;max-width:740px}
  #atelier .titre-bloc{max-width:none}
  /* la photo touche le bord, pas sa legende : une ligne de texte collee
     a x=0 se lit comme un debordement, pas comme un parti pris */
  .histoire .portrait figcaption{padding-left:var(--g)}

  /* 03 · démarche — le cadran devient l'objet de la section : il occupe
     sa colonne entière et la liste d'engagements se cale sur le bord
     droit de la page */
  .cycle-grille{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
    gap:clamp(40px,4.5vw,88px);align-items:center}
  /* le cadran gagne 40 % (680 -> 952) et se cale sur le bord droit de sa
     colonne : il vient a la rencontre de la liste au lieu de flotter
     contre la gouttiere gauche */
  .cycle{max-width:min(100%,880px);margin-inline:auto 0;margin-top:0;aspect-ratio:1}
  .engagements{justify-self:end;width:100%;max-width:720px;margin-top:0}
  .engagements p{max-width:60ch}

  /* ── pied de page : meme principe que les sections ──────────────────
     Le pied gardait un cadre de 1400 centre : sur 1920, l'accroche, les
     prestations et le bloc de contact flottaient tous dans le tiers
     central. Le cadre saute, l'accroche s'ancre a gauche et les deux
     colonnes de liens sont poussees contre le bord droit. */
  .pied{max-width:none;padding-inline:var(--g)}
  .pied-haut{grid-template-columns:minmax(0,1fr) max-content max-content max-content;
    column-gap:clamp(34px,4vw,84px)}
  .pied-haut h3{max-width:15ch}


  /* le filet de separation va d'un bord de la fenetre a l'autre ; seul
     le texte des mentions reste a la gouttiere.
     Le pied est bord a bord, mais les mentions ne doivent pas l'etre :
     avec `space-between` sur 1824 px, les quatre blocs s'ecartelaient
     jusqu'a 350 px l'un de l'autre et la ligne traversait l'ecran sans
     rien relier. Elles gardent une largeur de lecture et se groupent
     a gauche : identite et liens legaux d'abord, les deux badges apres. */
  /* le pied est bord a bord ici : les mentions le suivent, une paire par
     ligne, chacune ancree a sa gouttiere. Le filet, lui, traverse la
     fenetre entiere grace a la marge negative. */
  .mentions{margin-inline:calc(var(--g) * -1);padding-inline:var(--g)}
}

@media(max-width:900px){
  /* en une colonne, le discours garde la tete et les reperes le suivent :
     l'ordre de lecture du desktop, deroule */
  .eng-grille{grid-template-columns:1fr;gap:clamp(32px,5vw,44px)}
  .pilier{grid-template-columns:1fr;gap:14px}
  .pilier-num{min-width:0}
  .cartouche,.eng-cote{align-self:stretch;width:100%}
  .feuilles{grid-template-columns:repeat(2,1fr)}
  .feuille{grid-column:span 1}
  .histoire{grid-template-columns:1fr;gap:30px}
  /* en colonne, la photo passait avant le repere « 02 — L'atelier » :
     le lecteur voyait l'illustration avant de savoir ou il etait. */
  .histoire > div{order:-1}
  .portrait{--h-portrait:clamp(300px,60vw,420px)}
  .portrait::before{transform:translate(12px,12px)}
  .cycle-grille{grid-template-columns:1fr;gap:34px}
  .cycle{max-width:320px}
  /* en 320 px de cadre, une etiquette de 128 px placee a 36 % du rayon
     sort du cercle : on rentre le rayon et on reduit l'etiquette */
  .jalon{top:19%;font-size:9.5px;padding:5px 10px;letter-spacing:.07em}
  .roue-aide{font-size:10px;bottom:-14px}
  .fiche{width:min(240px,92%)}
  .dits-piste{animation-duration:44s}
  .contact-grille{grid-template-columns:1fr;gap:34px}
  .pied-haut{grid-template-columns:1fr;gap:34px}
  .vivant{display:none}
  /* meme regle qu'en desktop : le hero remplit le premier ecran, le
     bandeau mord ensuite dessus sans rogner la zone sombre visible */
  .hero{min-height:calc(100svh + var(--mordu));padding-bottom:clamp(128px,21vw,168px)}
  .hero-pied{bottom:clamp(72px,12vw,96px)}
  .hero-filets{grid-template-columns:1fr 4fr 1fr}
  .seve-bande{margin-top:-44px}
}
@media(max-width:560px){
  .feuilles{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .chiffres div{padding:20px 16px}
  .piste img{height:30px}
  .hero-pied span{display:none}
  .hero-pied{justify-content:flex-start}
  .pousse-btn span.txt{padding:14px 22px}
  .tel span{display:none}
  .tel{padding:10px 13px}
  .signature text{stroke-width:.8}
}
/* ═══ RÉALISATIONS — repli sans épinglage ═══════════════════════
   Le défilement latéral piloté par le scroll est un détournement :
   il ne tient pas au doigt sur mobile et il est contre-indiqué en
   mouvement réduit. Dans ces deux cas la scène redevient une pile
   verticale ordinaire — photo au-dessus, texte en dessous. */
@media(max-width:900px),(prefers-reduced-motion:reduce){
  .scene-cas{height:auto}
  .epingle{position:static;height:auto;overflow:visible;display:block}
  .piste-cas{flex-direction:column;width:100%;gap:clamp(20px,4vw,32px);
    transform:none!important;will-change:auto}
  .cas{flex:0 0 auto;width:100%}
  .cas-cadre{flex-direction:column;height:auto;transform:none!important;opacity:1!important;
    border:1px solid var(--trait);box-shadow:0 18px 40px -30px rgba(15,42,33,.4)}
  .cas-photo{position:relative;inset:auto;aspect-ratio:16/10}
  .cas-photo img{transform:none!important}
  .cas-voile{width:100%;height:auto;background:var(--papier);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    -webkit-mask-image:none;mask-image:none;
    padding:clamp(24px,5vw,34px)}
  .cas-voile h3{max-width:20ch}
  .cas-fil{display:none}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .rev{opacity:1;transform:none}
  .ln-i{transform:none}
  .kicker,.titre-bloc .sous,[data-cascade] > *{opacity:1;transform:none}
  .kicker::before{transform:none}
  h2 em{background-size:calc(100% - .1em) 2px}
  .engagements li::before{transform:rotate(-12deg)}
  .hero-filets i{transform:none}
  .hero-fond video,.hero-fond img{transform:none}
  .arbre path{stroke-dashoffset:0}
  .tg-pop{opacity:1;transform:none}
  .ruban{overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-mask-image:none;mask-image:none}
  .piste{animation:none}
  .piste .ref[aria-hidden="true"]{display:none}
  .dits-ruban{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-mask-image:none;mask-image:none}
  .dit-col{scroll-snap-align:center}
  .dits-piste [data-clone]{display:none}
  .carte-onde{animation:none;opacity:0}
  .cycle .trace{stroke-dashoffset:0}
  .cycle .noeud,.cycle text{opacity:1;transform:none}
  .arbre circle{opacity:.75;transform:scale(1)}
}

/* ═══ le fil de cuivre ═══════════════════════════════════════════════
   Un conducteur unique court sur toute la hauteur du document, en
   zigzag, et vient buter contre les mots qui portent la promesse. Le
   trace n'est pas ecrit en dur : il est recalcule depuis la position
   reelle des mots, qui bouge avec la largeur et avec le chargement des
   polices. Le calque allume est decoupe par le scroll — un decoupage
   geometrique, donc l'epaisseur du trait ne bouge jamais, ce qu'un
   pointille pilote au dashoffset ne garantit pas sur un dessin etire. */
.fil-cuivre{position:absolute;top:0;left:0;width:100%;z-index:1;
  pointer-events:none;contain:layout style}
.fil-cuivre svg{position:absolute;top:0;left:0;display:block;overflow:visible}
.fc-voie{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fc-gaine{stroke:rgba(184,115,51,.07);stroke-width:10}
/* un cuivre pale plutot qu'un gris : il tient sur le creme comme sur
   l'encre, sans avoir a suivre le fond section par section. */
.fc-eteint{stroke:rgba(184,115,51,.34);stroke-width:1.5}
.fc-vif{position:absolute;top:0;left:0;width:100%;overflow:hidden;
  transform:translate3d(0,-100%,0);will-change:transform}
.fc-vif svg{transform:translate3d(0,100%,0);will-change:transform}
.fc-allume{stroke:var(--cuivre);stroke-width:2.2;
  filter:drop-shadow(0 0 5px rgba(184,115,51,.34))}

/* le connecteur pose la ou le fil touche un mot */
.fc-noeud{position:absolute;width:14px;height:8px;border-radius:2px;
  margin:-4px 0 0 -7px;background:rgba(122,92,62,.34);
  border:1px solid rgba(122,92,62,.45);
  transition:.55s var(--e)}
.fc-noeud.on{background:var(--cuivre);border-color:var(--cuivre-clair);
  box-shadow:0 0 0 4px rgba(184,115,51,.15),0 0 12px rgba(184,115,51,.5)}
.fc-bout{width:11px;height:11px;border-radius:50%;margin:-5.5px 0 0 -5.5px}

/* Le mot vise : le fil ne s'arrete pas au bord du mot, il se prolonge
   sous lui. Le soulignement de cuivre remplace le trait vert des titres
   pour ces mots-la — deux lignes l'une sur l'autre feraient doublon. */
.mot-fil{background-image:linear-gradient(var(--cuivre),var(--cuivre));
  background-repeat:no-repeat;background-position:0 94%;background-size:0% 2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .85s var(--e),text-shadow .7s var(--e)}
.mot-fil.sous-tension{background-size:calc(100% - .1em) 2px;
  text-shadow:0 0 26px rgba(184,115,51,.4)}
h2 em.mot-fil,h1 em.mot-fil{background-image:linear-gradient(var(--cuivre),var(--cuivre));
  transition:background-size .85s var(--e),text-shadow .7s var(--e)}
.vu h2 em.mot-fil{background-size:0% 2px}
.vu h2 em.mot-fil.sous-tension{background-size:calc(100% - .1em) 2px}

@media(prefers-reduced-motion:reduce){
  .fc-noeud,.mot-fil{transition:none}
}
@media(max-width:900px){
  .fc-gaine{stroke-width:7}
  .fc-allume{stroke-width:1.8;filter:none}
}

/* ── pied : quatre colonnes ne tiennent pas sous 1160px ────────────
   Entre 901 et 1160, les trois colonnes de liens tombaient a 150px et
   « Mise aux normes NF C 15-100 » cassait sur trois lignes. Le bloc de
   tete prend alors toute la largeur et les liens passent en trois. */
@media(min-width:901px) and (max-width:1160px){
  .pied-haut{grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:clamp(28px,3.4vw,42px)}
  .pied-haut > :first-child{grid-column:1 / -1}
}

/* ── animations en boucle : a l'arret hors de l'ecran ─────────────────
   Un ruban qui glisse ou une onde qui s'etend continuent de tourner une
   fois sortis de la fenetre, et le navigateur recalcule leur style a
   chaque image pour rien. seve.js pose .au-repos sur la section tant
   qu'elle n'est pas visible. Le fond du hero n'y figure pas : sa derive
   suit le scroll, elle ne tourne pas au repos, et la figer au mauvais
   instant la desalignerait au retour. */
.au-repos .piste,.au-repos .dits-piste,
.au-repos .roue-invite .arc,.au-repos .roue-invite .pointe,
.au-repos .carte-onde,
.au-repos .hero-fond video,.au-repos .descendre .rail i{animation-play-state:paused}

/* ── intitule de recherche porte par le h1 ────────────────────────────
   La pastille au-dessus du titre dit maintenant le metier et la ville, et
   elle fait partie du h1 : c'est ce que lit un moteur. Elle garde son
   dessin de pastille, sans heriter du corps ni de la graisse du titre. */
h1 .h1-sujet{display:flex;width:fit-content;max-width:100%;
  font-family:'Inter',system-ui,sans-serif;font-weight:400;font-style:normal;
  line-height:1.3;letter-spacing:.14em;white-space:normal}