/* ==========================================================================
   Groupe Sancor v2 · direction A « La bande »
   Une seule feuille de style. Aucune ressource externe.
   L'angle : pente 1:2 (≈ 26,6°), celle de la bande du logo. Partout, sans exception.
   ========================================================================== */

/* ---------- Polices (OFL, auto-hébergées) ---------- */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600-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:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/barlow-condensed-600-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:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-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:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/barlow-condensed-700-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:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800-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:"Barlow Condensed";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/barlow-condensed-800-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:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/source-sans-3-400-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:"Source Sans 3";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/source-sans-3-400-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}

/* ---------- Jetons ---------- */
:root{
  --navy:#0e121c; --navy-2:#1a2030; --orange:#fe3913; --base:#f7f7f7; --white:#fff;
  --g200:#d9dadd; --g300:#b4b6bc; --g400:#8b8d93; --g500:#5b5f68; --g600:#3a3e48;
  --rule:rgba(14,18,28,.16); --rule-inv:rgba(247,247,247,.22);
  --g:clamp(16px,4vw,56px);           /* gouttière */
  --max:1440px;
  --head:76px;                         /* hauteur de l'en-tête */
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --text:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:900px){:root{--head:64px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 12px)}
body{margin:0;background:var(--base);color:var(--navy);font-family:var(--text);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;margin:0;letter-spacing:.002em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--orange)}
/* Pas de conteneur centré étroit : sur un grand écran, il laissait un « carré vide » à gauche (retour de Maxime).
   Le contenu occupe la largeur, avec la même gouttière --g partout. */
.wrap{width:100%;margin:0;padding:0 var(--g)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:var(--base);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* Le marqueur : la bande du logo en miniature (parallélogramme 1:2, bouts verticaux). */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.86rem;line-height:1.2;margin:0 0 18px;color:var(--navy)}
.eyebrow::before{content:"";flex:none;width:28px;height:21px;background:var(--orange);clip-path:polygon(0 0,100% 66.667%,100% 100%,0 33.333%)}
.on-navy .eyebrow{color:var(--base)}

.h2{font-size:clamp(2.4rem,5.4vw,4.9rem)}
.lead{font-size:clamp(1.06rem,1.35vw,1.22rem);line-height:1.5;color:var(--g600);max-width:40em}
.on-navy{background:var(--navy);color:var(--base)}
.on-navy .lead{color:rgba(247,247,247,.8)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;font-family:var(--display);font-weight:800;font-size:1.06rem;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;border:2px solid transparent;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn--orange{background:var(--orange);color:var(--white)}
.btn--orange:hover{background:var(--navy)}
.on-navy .btn--orange:hover{background:var(--base);color:var(--navy)}
.btn--line{border-color:var(--navy);color:var(--navy)}
.btn--line:hover{background:var(--navy);color:var(--base)}
.on-navy .btn--line{border-color:var(--base);color:var(--base)}
.on-navy .btn--line:hover{background:var(--base);color:var(--navy)}
.btn .arr{width:14px;height:14px}
.link{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.link:hover{color:var(--orange)}

/* ---------- En-tête ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--base);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.is-scrolled{border-bottom-color:var(--rule)}
.header-in{display:flex;align-items:center;gap:28px;height:var(--head)}
.brand{display:block;flex:none;margin-right:auto}
.brand img{height:54px;width:auto}
.nav{display:flex;gap:26px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.92rem}
.nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--orange)}
.hdr-phone{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.hdr-phone:hover{color:var(--orange)}
.hdr-cta{min-height:46px;padding:0 18px;font-size:.98rem}
.menu-btn{display:none}
.hdr-call{display:none}
.hide-sm{display:inline}
@media (max-width:1180px){.nav{gap:18px}.hdr-phone{display:none}}
@media (max-width:900px){
  .brand img{height:38px}
  .hdr-cta{display:none}
  .hdr-call{display:inline-flex;min-height:44px;padding:0 16px;font-size:.98rem}
  .hide-sm{display:none}
  .hero .ctas{display:none}
  .header-in{gap:10px}
  .menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:44px;height:44px;padding:0;background:transparent;border:2px solid var(--navy);color:var(--navy);font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;cursor:pointer}
  .menu-btn i{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
  .menu-btn[aria-expanded="true"] i{box-shadow:none}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--navy);padding:8px var(--g) 20px;display:none}
  .nav.is-open{display:flex}
  .nav a{color:var(--base);font-size:1.4rem;padding:14px 0;border-bottom:1px solid var(--rule-inv)}
}

/* ---------- Héro ---------- */
.hero{padding-top:clamp(20px,3.4vw,48px)}
.hero-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,370px);column-gap:clamp(24px,4vw,64px);align-items:end}
.hero-head .eyebrow{grid-column:1/-1}
.hero-title{font-family:var(--display);font-weight:800;text-transform:uppercase;margin:0;font-size:clamp(3.75rem,7.5vw,8.6rem);line-height:.86;letter-spacing:-.004em}
.hero-title em{font-style:normal;color:var(--orange)}
.hero-title span{display:block}
.hero-side{padding-bottom:.4rem}
.hero-side .lead{margin-bottom:22px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* La photo (vidéo) : un rectangle dont SEUL le coin bas-gauche est coupé à la pente 1:2,
   dans le sens de la bande du logo (elle descend vers la droite).
   La bande orange longe cette coupe, dans le bas de l'image ; le haut reste libre.
   --run : longueur horizontale de la coupe (sa hauteur = --run / 2)
   --t   : épaisseur verticale de la bande                                        */
.hero-media-wrap{position:relative;margin-top:clamp(24px,3vw,40px);background:var(--navy)}
.hero-media{--run:min(46vw,640px);--t:clamp(34px,6vw,88px);position:relative;height:clamp(300px,calc(100svh - 480px),600px);overflow:hidden;background:var(--navy);
  clip-path:polygon(0 0,100% 0,100% 100%,var(--run) 100%,0 calc(100% - var(--run) / 2))}
.hero-media video,.hero-media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-band{position:absolute;inset:0;background:var(--orange);z-index:3;
  clip-path:polygon(0 calc(100% - var(--run) / 2 - var(--t)),calc(var(--run) + 2 * var(--t)) 100%,var(--run) 100%,0 calc(100% - var(--run) / 2))}
.hero-cap{position:absolute;right:var(--g);top:18px;z-index:3;margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--base);background:var(--navy);padding:6px 10px}
@media (max-width:900px){
  /* Téléphone : titre, puis la photo et sa bande tout de suite, puis le texte (comme l'esquisse A). */
  .hero{display:flex;flex-direction:column}
  .hero-head{display:contents}
  .hero-head>*{padding-left:var(--g);padding-right:var(--g)}
  .hero-head .eyebrow{order:1}
  .hero-title{order:2;font-size:clamp(3.4rem,15.4vw,6rem)}
  .hero-media-wrap{order:3;margin-top:24px}
  .hero-side{order:4;padding-top:24px;padding-bottom:8px}
  .hero-media{--run:72vw;--t:38px;height:clamp(260px,72vw,420px)}
  .ctas .btn{flex:1 1 auto}
}

/* Ordinateur : la composition de l'esquisse A du rapport. Texte sur la moitié gauche, image sur la
   moitié droite, du dessous de l'en-tête jusqu'au bandeau de faits, le tout dans le premier écran.
   Seule correction à l'esquisse : la bande vit dans le bas de l'image (coin bas-gauche, pente 1:2). */
@media (min-width:901px){
  .first{display:flex;flex-direction:column;min-height:calc(100svh - var(--head))}
  .hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:0;min-height:520px}
  .hero-head{display:flex;flex-direction:column;justify-content:center;align-items:stretch;max-width:none;margin:0;
    padding:clamp(20px,3vh,40px) clamp(24px,3vw,48px) clamp(20px,3vh,40px) var(--g)}
  .hero-head .eyebrow{margin-bottom:clamp(12px,2vh,22px)}
  .hero-title{font-size:min(7.6vw,12.4svh,9rem)}
  .hero-side{padding:0;margin-top:clamp(16px,2.6vh,28px);max-width:34em}
  .hero-side .lead{margin-bottom:clamp(16px,2.4vh,24px)}
  .hero-media-wrap{margin-top:0;height:100%;min-height:100%}
  .hero-media{--run:min(26vw,420px);--t:clamp(40px,4.6vw,68px);height:100%;min-height:440px}
}

/* Le moment fort : la bande se pose une fois, le long de son propre axe. */
@keyframes band-in{
  from{transform:translate(calc(-1 * (var(--run) + 2 * var(--t))),calc(var(--run) / 2 + var(--t)))}
  to{transform:none}
}
.motion .hero-band{animation:band-in .9s var(--ease) .3s both}

/* Bichromie marine → blanc cassé, pour la VIDÉO DU HÉRO seulement (les photos restent en couleur, retour de Maxime) : gris, puis marine en « écran ».
   Le noir devient marine, le blanc reste blanc : plus de bleu nulle part. */
.duo{position:relative;overflow:hidden;background:var(--navy)}
.duo img,.duo video{filter:grayscale(1) contrast(1.06)}
.duo::after{content:"";position:absolute;inset:0;background:var(--navy);mix-blend-mode:screen;pointer-events:none;z-index:1}

/* ---------- Bandeau de faits ---------- */
.facts{padding:clamp(22px,2.6vw,34px) 0}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px clamp(16px,2.4vw,40px);margin:0}
.facts dl>div{border-left:1px solid var(--rule-inv);padding-left:16px}
.facts dt{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--orange);margin-bottom:4px}
.facts dd{margin:0;font-size:1.02rem;line-height:1.35}
.facts dd b{font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:.03em}
@media (max-width:900px){.facts dl{grid-template-columns:1fr 1fr}}

/* ---------- Sections ---------- */
.section{padding:clamp(72px,9vw,140px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(36px,4.6vw,64px)}
.sec-head .lead{margin:0}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}}

/* À propos */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.about-photo{aspect-ratio:4/5}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-text .h2{margin-bottom:28px}
.about-text p{max-width:36em}
.quote{margin:34px 0 0;padding:4px 0 4px 22px;border-left:4px solid var(--orange);font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.15;text-transform:uppercase}
.mission{margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.mission h3{font-size:1.15rem;letter-spacing:.1em;margin-bottom:10px}
@media (max-width:900px){.about{grid-template-columns:1fr}.about-photo{aspect-ratio:4/3;order:2}}

/* Services : 5 cartes égales (une rangée de 5 sur ordinateur, des rangées pleines ailleurs).
   Photo en couleur + panneau marine : du contraste et de la matière, sans grille à moitié remplie. */
.services{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.1vw,16px)}
.svc{display:flex;flex-direction:column;background:var(--navy);color:var(--base)}
.svc-ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--g200)}
.svc-ph img{width:100%;height:100%;object-fit:cover}
.svc-body{display:flex;flex-direction:column;flex:1;padding:22px clamp(16px,1.4vw,24px) 24px;border-top:4px solid var(--orange)}
.svc .num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2.4rem,3.2vw,3.2rem);line-height:.9;color:var(--orange);margin-bottom:14px}
.svc h3{font-size:clamp(1.3rem,1.55vw,1.6rem);margin-bottom:8px;line-height:.98}
.svc .sub{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;line-height:1.3;color:rgba(247,247,247,.62);margin-bottom:12px}
.svc p{color:rgba(247,247,247,.84);font-size:.9rem;line-height:1.5}
.svc .link{align-self:flex-start;margin-top:auto;font-size:.84rem;color:var(--base)}
.svc .link:hover{color:var(--orange)}
@media (max-width:1100px){
  .services{grid-template-columns:minmax(0,1fr);gap:14px}
  .svc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
  .svc-ph{aspect-ratio:auto;min-height:100%}
  .svc-body{border-top:0;border-left:4px solid var(--orange);padding:24px 28px 26px}
  .svc .link{margin-top:6px}
  .svc p{font-size:.97rem}
}
@media (max-width:640px){
  .svc{display:flex}
  .svc-ph{aspect-ratio:16/9;min-height:0}
  .svc-body{border-left:0;border-top:4px solid var(--orange);padding:20px 18px 22px}
}

/* Méthode : la structure 3D (Three.js, js/methode.js). LE moment du site, le seul « scrub ».
   Sans WebGL / sans module : image fixe, section non épinglée. Avec WebGL : .is-3d, épinglée plein écran.
   « Réduire les animations » : .is-static, structure assemblée, sans épinglage.                         */
.methode{position:relative;background:var(--navy);color:var(--base)}
.methode-pin{position:relative}
.methode-canvas{display:none}
.methode-fallback{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.methode-ui{position:relative;padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,96px)}
.methode-head{max-width:min(560px,40vw)}
.methode-head .h2{font-size:clamp(2.1rem,3.6vw,3.7rem);margin-bottom:20px}
.methode-p{color:rgba(247,247,247,.82);max-width:30em}
.methode-steps{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.92rem;color:rgba(247,247,247,.42)}
.methode-steps li{display:flex;align-items:baseline;gap:8px;padding-top:10px;border-top:2px solid rgba(247,247,247,.18)}
.methode-steps b{font-weight:800;font-size:1.05rem}
.methode-steps li.is-on{color:var(--base);border-top-color:var(--orange)}
.methode-steps li.is-on b{color:var(--orange)}
.methode-end{display:none}

.methode.is-3d .methode-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.methode.is-3d .methode-fallback{display:none}
.methode.is-3d .methode-pin{height:calc(100svh - var(--head));min-height:520px;overflow:hidden}
.methode.is-3d:not(.is-static){height:calc(100svh + 230vh)}
.methode.is-3d:not(.is-static) .methode-pin{position:sticky;top:var(--head)}
.methode.is-3d .methode-ui{position:absolute;inset:0;padding-top:clamp(28px,5vh,64px);padding-bottom:clamp(24px,4vh,48px);pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;column-gap:24px}
.methode.is-3d .methode-head{grid-column:1;grid-row:1;opacity:var(--m-head,1);transform:translateY(calc((1 - var(--m-head,1)) * -24px))}
.methode.is-3d .methode-steps{grid-column:1;grid-row:3;align-self:end;margin:0}
.methode.is-3d .methode-end{display:block;grid-column:1/-1;grid-row:2;align-self:end;justify-self:start;margin:0 0 22px;max-width:15em;font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.92;font-size:clamp(2.4rem,5.2vw,5.4rem);opacity:var(--m-end,0);transform:translateY(calc((1 - var(--m-end,0)) * 24px));background:rgba(14,18,28,.82);padding:14px 20px 16px}
.methode-end em{font-style:normal;color:var(--orange)}
.methode.is-3d .cartouche{grid-column:2;grid-row:3;align-self:end}
.cartouche{display:flex;align-items:stretch;border:1px solid rgba(254,57,19,.6);background:rgba(14,18,28,.85);font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;color:var(--orange);margin-top:24px;width:max-content}
.cartouche img{width:auto;height:30px;margin:10px 14px;align-self:center}
.cartouche dl{margin:0;display:grid;border-left:1px solid rgba(254,57,19,.6)}
.cartouche dl>div{display:flex;gap:6px;padding:6px 14px;border-bottom:1px solid rgba(254,57,19,.35)}
.cartouche dl>div:last-child{border-bottom:0}
.cartouche dt{font-weight:700}
.cartouche dd{margin:0;font-weight:700;color:var(--base)}
.cartouche dt::after{content:" :"}
.cartouche dl>div:first-child dt::after{content:""}
@media (max-width:900px){
  .methode-head{max-width:none}
  .methode.is-3d .methode-pin{height:calc(100svh - var(--head) - 58px);min-height:480px}
  .methode.is-3d:not(.is-static){height:calc(100svh + 200vh)}
  .methode.is-3d .methode-ui{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto;padding-top:22px;padding-bottom:16px}
  .methode-head .h2{font-size:clamp(1.65rem,7.6vw,2.4rem);margin-bottom:0}
  .methode.is-3d .methode-p{display:none}
  .methode.is-3d .methode-steps{grid-row:2;align-self:start;margin-top:14px;gap:8px 16px;font-size:.8rem}
  .methode.is-3d .methode-end{grid-row:3;font-size:clamp(1.9rem,9vw,2.6rem);margin-bottom:12px}
  .methode.is-3d .cartouche{grid-column:1;grid-row:4;justify-self:end;font-size:.6rem}
  .cartouche img{height:22px;margin:6px 10px}
  .cartouche dl>div{padding:3px 10px}
}

/* Chantiers : carrousel piloté par l'utilisateur (défilement natif + boutons) */
.works-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,48px)}
.works-ctrl{display:flex;align-items:center;gap:10px}
.works-count{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:.06em;min-width:5.2em;text-align:center}
.icon-btn{width:54px;height:54px;display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:var(--base);border:0;cursor:pointer;transition:background-color .2s}
.icon-btn:hover{background:var(--orange)}
.icon-btn:disabled{background:var(--g200);color:var(--g400);cursor:default}
.icon-btn svg{width:18px;height:18px}
.track{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 var(--g) 6px;scroll-padding:0 var(--g);scrollbar-width:none;-ms-overflow-style:none}
.track::-webkit-scrollbar{display:none}
/* les fiches déjà passées ne débordent jamais dans la gouttière de gauche : tout reste aligné sur --g */
.track{clip-path:inset(-4px -4px -4px var(--g))}
.slide{flex:0 0 min(38vw,560px);scroll-snap-align:start;margin:0}
.ph{position:relative;overflow:hidden;background:var(--g200)}
.slide .ph{aspect-ratio:4/3}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{display:flex;gap:14px;padding-top:14px;border-top:2px solid var(--navy);margin-top:14px;font-size:.98rem;line-height:1.35}
.slide figcaption b{font-family:var(--display);font-weight:800;color:var(--orange);font-size:1.1rem;letter-spacing:.04em}
@media (max-width:900px){.slide{flex-basis:82vw}}

/* Territoire : la règle de latitude, verticale, le nord en haut (ordinateur ET téléphone) */
.north{overflow:hidden}
.north-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.62fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.north-text .h2{margin-bottom:28px}
.north-text .btn{margin-top:10px}
.north-photo{align-self:end}
.north-photo .ph{aspect-ratio:3/4}
.north-photo img{width:100%;height:100%;object-fit:cover}
.north-photo figcaption{font-size:.86rem;color:rgba(247,247,247,.66);margin-top:10px}

.ruler{position:relative;min-height:540px;font-family:var(--display);text-transform:uppercase}
.ruler-scale{position:absolute;left:24px;top:28px;bottom:28px;width:64px}
.ruler-axis{position:absolute;left:30px;top:0;bottom:0;width:1px;background:rgba(247,247,247,.42)}
.ruler-tick{position:absolute;left:22px;width:17px;height:1px;background:rgba(247,247,247,.42)}
.ruler-tick.major{left:14px;width:33px;background:rgba(247,247,247,.8)}
.ruler-tick span{position:absolute;right:40px;top:-.6em;font-weight:600;font-size:.72rem;letter-spacing:.08em;color:rgba(247,247,247,.55);white-space:nowrap}
.ruler-run{position:absolute;left:27px;top:0;bottom:0;width:7px;background:var(--orange);transform-origin:50% 100%}
.ruler-end{position:absolute;left:104px;line-height:1}
.ruler-end b{display:block;font-weight:800;font-size:clamp(3rem,4.6vw,4.4rem);letter-spacing:-.01em}
.ruler-end span{display:block;font-weight:600;letter-spacing:.14em;font-size:.82rem;margin-top:6px;color:rgba(247,247,247,.75)}
.ruler-end--n{top:6px}
.ruler-end--s{bottom:6px}
.ruler-dot{position:absolute;left:24px;width:13px;height:13px;background:var(--orange);border:3px solid var(--navy);box-shadow:0 0 0 1px var(--orange)}
.ruler-dot--n{top:-6px}.ruler-dot--s{bottom:-6px}
.ruler-km{position:absolute;left:104px;top:50%;transform:translateY(-50%);line-height:1}
.ruler-km b{display:block;font-weight:800;color:var(--orange);font-size:clamp(2rem,2.8vw,2.7rem);letter-spacing:.01em;white-space:nowrap}
.ruler-km span{display:block;font-weight:600;letter-spacing:.14em;font-size:.76rem;margin-top:6px;color:rgba(247,247,247,.6)}
/* tracé : une seule fois, à l'entrée à l'écran */
.motion .ruler-run{transform:scaleY(0);transition:transform 1.5s var(--ease)}
.motion .ruler-km{opacity:0;transition:opacity .6s ease 1.2s}
.motion .ruler.is-on .ruler-run{transform:scaleY(1)}
.motion .ruler.is-on .ruler-km{opacity:1}
@media (max-width:1100px){.north-grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.north-photo{grid-column:1/-1;max-width:none}.north-photo .ph{aspect-ratio:16/9}}
@media (max-width:700px){.north-grid{grid-template-columns:1fr}.ruler{min-height:460px}.north-photo{grid-column:auto}.north-photo .ph{aspect-ratio:4/3}}

/* Équipe et valeurs */
.team{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start;margin-bottom:clamp(56px,7vw,96px)}
.team .h2{margin-bottom:0}
.team p{max-width:36em}
.values{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy)}
.value{padding:26px clamp(14px,1.8vw,28px) 10px 0}
.value+.value{padding-left:clamp(14px,1.8vw,28px);border-left:1px solid var(--rule)}
.value h3{font-size:clamp(1.6rem,2.2vw,2.1rem);margin-bottom:12px}
.value p{color:var(--g600);font-size:.97rem}
@media (max-width:1000px){.team{grid-template-columns:1fr}.values{grid-template-columns:1fr 1fr}.value:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.values{grid-template-columns:1fr}.value,.value+.value{padding:22px 0 6px;border-left:0;border-bottom:1px solid var(--rule)}}

/* Bande photo avec parallaxe (la seule de la page) */
.pband{position:relative;overflow:hidden;min-height:clamp(480px,64vw,720px);display:flex;align-items:flex-end}
.pband-media{position:absolute;left:0;right:0;top:-12%;bottom:-12%;will-change:transform}
.pband-media img{width:100%;height:100%;object-fit:cover}
.pband .wrap{position:relative;z-index:2;padding-bottom:var(--g)}
.pband-card{max-width:620px;background:var(--navy);color:var(--base);padding:clamp(24px,3vw,44px)}
.pband-card .h2{font-size:clamp(2rem,3.6vw,3.3rem);margin-bottom:18px}
.pband-card p{color:rgba(247,247,247,.82)}
.pband-card .btn{margin-top:6px}

/* Changement de nom : une bande fine. En grand, un message sérieux tiré du flyer ; en petit, la note pour les anciens clients. */
.rename-band{padding:clamp(56px,6vw,96px) 0;border-top:1px solid var(--rule)}
.rename-note{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.84rem;color:var(--g500);margin:0 0 16px}
.rename .h2{font-size:clamp(2rem,4.2vw,4.1rem);max-width:22em}

/* Appel à l'action final */
.cta-block{position:relative}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.cta-grid .h2{margin-bottom:24px}
.contact-list{margin:0;display:grid;gap:0;border-top:1px solid var(--rule-inv)}
.contact-list>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--rule-inv);align-items:baseline}
.contact-list dt{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--orange)}
.contact-list dd{margin:0;font-size:1.15rem}
.contact-list a{text-decoration:none;border-bottom:1px solid var(--rule-inv)}
.contact-list a:hover{color:var(--orange);border-color:var(--orange)}
.badges{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.badges li{border:1px solid var(--rule-inv);padding:6px 12px;font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}.contact-list>div{grid-template-columns:1fr;gap:2px}}

/* ---------- Pied de page ---------- */
.site-footer{background:var(--base);color:var(--navy);border-top:1px solid var(--rule);padding-top:clamp(48px,5vw,72px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:32px;padding-bottom:clamp(36px,4vw,56px)}
.foot-brand img{height:56px;width:auto;margin-bottom:18px}
.foot-brand p{color:var(--g600);max-width:26em;font-size:.95rem}
.foot-slogan{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.3rem;line-height:1.05;color:var(--navy)!important}
.foot-slogan em{font-style:normal;color:var(--orange)}
.foot-col h2{font-size:.86rem;letter-spacing:.14em;font-weight:700;color:var(--orange);margin-bottom:14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.97rem}
.foot-col a{text-decoration:none;color:var(--navy)}
.foot-col a:hover{color:var(--orange)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* Le mot géant qui déborde du cadre (principe inspiré d'edifis.ca, refait en vanille).
   Deux couches identiques superposées : dessous, SANCOR marine sur blanc cassé ; dessus, le négatif
   (blanc cassé sur marine), découpé par clip-path depuis le bas. --cut (0 → 1) monte avec le défilement
   (js/sancor.js) et la ligne orange suit la frontière, en plein dans les lettres. */
/* Le mot reste collé au bas de l'écran pendant un court passage (35vh) : c'est là que la couche marine monte. */
.foot-word-wrap{--cut:0;position:relative;height:calc(25.5vw + 35vh)}
.foot-word{position:sticky;bottom:0;overflow:hidden;height:25.5vw;margin-top:auto}
.foot-word-wrap{display:flex;flex-direction:column;justify-content:flex-start}
@media (max-width:900px){.foot-word-wrap{height:calc(25.5vw + 24vh)}.foot-word{bottom:calc(58px + env(safe-area-inset-bottom))}}
.fw-layer{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.fw-layer span{display:block;font-family:var(--display);font-weight:800;font-size:33vw;line-height:.76;letter-spacing:-.01em;white-space:nowrap;transform:translateY(.035em)}
.fw-front{background:var(--base);color:var(--navy)}
.fw-back{background:var(--navy);color:var(--base);clip-path:inset(calc((1 - var(--cut)) * 100%) 0 0 0)}
.fw-line{position:absolute;left:0;right:0;height:4px;background:var(--orange);top:calc((1 - var(--cut)) * 100% - 2px);pointer-events:none}
.foot-bottom{background:var(--navy);color:rgba(247,247,247,.68);font-size:.86rem;padding:18px 0}
.foot-bottom-in{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-bottom a{color:rgba(247,247,247,.85)}

/* ---------- Barre d'appel fixe (téléphone) ---------- */
.callbar{display:none}
@media (max-width:900px){
  .callbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;padding-bottom:env(safe-area-inset-bottom);background:var(--navy)}
  .callbar a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:1.08rem;text-decoration:none;color:var(--base)}
  .callbar a+a{background:var(--orange);color:var(--white)}
  .callbar svg{width:18px;height:18px}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ---------- Apparitions discrètes (une fois) ---------- */
.motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion .reveal.is-in{opacity:1;transform:none}

/* ---------- Pages intérieures (contact, légal) ---------- */
.page-head{padding:clamp(40px,6vw,88px) 0 clamp(28px,3vw,44px)}
.page-head h1{font-size:clamp(3rem,7vw,6.4rem);line-height:.88}
.page-head .lead{margin-top:20px}

.contact-wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);align-items:start;padding-bottom:clamp(72px,8vw,120px)}
.contact-aside{background:var(--navy);color:var(--base);padding:clamp(24px,3vw,40px)}
.contact-aside h2{font-size:1.5rem;margin-bottom:14px}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}.contact-aside{order:2}}

.kn-form{display:grid;gap:20px}
.kn-form__row{display:grid;gap:20px}
.kn-form__row--2{grid-template-columns:1fr 1fr}
@media (max-width:640px){.kn-form__row--2{grid-template-columns:1fr}}
.kn-form__field{display:grid;gap:8px}
.kn-form label{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.84rem}
.kn-form input,.kn-form select,.kn-form textarea{width:100%;font:inherit;font-size:1rem;line-height:1.4;color:var(--navy);background:var(--white);border:1px solid var(--g300);border-radius:0;padding:14px 14px;min-height:54px}
.kn-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),linear-gradient(135deg,var(--navy) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.kn-form textarea{min-height:160px;resize:vertical}
.kn-form input:focus,.kn-form select:focus,.kn-form textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.kn-form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.kn-form__notice{font-size:.9rem;color:var(--g500);margin:0}
.kn-form__notice a{color:var(--navy)}
.kn-form__footer{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.kn-form__submit{border:0}
.kn-form__submit:disabled{opacity:.6;cursor:wait}
.kn-form__status{margin:0;font-size:.98rem;max-width:34em}
.kn-form__status[data-state="success"]{color:#17703a;font-weight:700}
.kn-form__status[data-state="error"]{color:#b3260b;font-weight:700}

.legal{padding-bottom:clamp(72px,8vw,120px)}
.legal-in{max-width:820px}
.legal-meta{font-size:.9rem;color:var(--g500);margin-top:14px}
.legal-summary{font-size:1.1rem;background:var(--white);border-left:4px solid var(--orange);padding:18px 20px;margin:24px 0 8px}
.legal-toc{margin:28px 0 8px;padding:18px 20px;border:1px solid var(--rule)}
.legal-toc ol{margin:8px 0 0;padding-left:1.4em;columns:2;column-gap:32px}
.legal-toc li{margin:3px 0}
@media (max-width:640px){.legal-toc ol{columns:1}}
.legal section{padding-top:28px}
.legal h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px;padding-top:14px;border-top:2px solid var(--navy)}
.legal h3{font-size:1.2rem;letter-spacing:.04em;margin:20px 0 8px}
.legal ul{padding-left:1.3em}
.legal li{margin:4px 0}
.legal code{font-size:.9em;background:var(--white);padding:1px 5px;border:1px solid var(--rule)}
.legal a{color:var(--navy);text-decoration-color:var(--orange);text-underline-offset:3px}
.legal-table{overflow-x:auto;margin:12px 0 18px}
.legal table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem;background:var(--white)}
.legal th,.legal td{border:1px solid var(--rule);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.84rem;background:var(--navy);color:var(--base)}

/* ---------- Réduire les animations : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  .foot-word-wrap{height:auto}
  .foot-word{position:relative;bottom:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .motion .reveal{opacity:1;transform:none}
  .motion .ruler-run{transform:none}
  .motion .ruler-km{opacity:1}
  .pband-media{transform:none!important}
}

.legal-head h1{font-size:clamp(2.6rem,5.4vw,4.6rem)}