/* ==========================================================================
   TP APEX — blocs du site
   ========================================================================== */

/* ============================================================ 1. LE VOILE
   Ecran de chargement. Il masque l'amorce de la sequence : tant qu'il est la,
   aucune image manquante ne peut apparaitre. Il se retire des que les
   premieres images sont decodees, pas quand tout est telecharge.           */
.voile{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;
  background:var(--encre);color:var(--craie);
  transition:opacity .78s var(--tempo),visibility .78s;}
.voile::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 50% 8%,rgba(233,196,106,.13),transparent 60%),
    radial-gradient(90% 60% at 50% 100%,rgba(185,138,38,.10),transparent 60%);}
.voile.part{opacity:0;visibility:hidden;pointer-events:none;}
.voile__in{position:relative;text-align:center;padding:0 28px;width:min(430px,86vw);}
.voile__logo{width:132px;height:auto;margin:0 auto 26px;max-width:none;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.6));
  animation:vl-souffle 3.4s ease-in-out infinite;}
@keyframes vl-souffle{0%,100%{transform:translateY(0) scale(1);opacity:.97}
  50%{transform:translateY(-5px) scale(1.014);opacity:1}}
.voile__nom{font-family:'Jost',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.44em;text-transform:uppercase;color:var(--or-clair);
  margin-bottom:26px;padding-left:.44em;}
/* la barre : un coup de rouleau qui se remplit */
.voile__piste{position:relative;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(246,243,236,.13);}
.voile__jauge{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--or-fonce),var(--or-vif) 55%,var(--or-clair));
  transition:transform .32s var(--tempo);}
.voile__jauge::after{content:"";position:absolute;right:-2px;top:-3px;bottom:-3px;width:14px;
  background:radial-gradient(closest-side,rgba(233,196,106,.85),transparent);
  filter:blur(2px);}
.voile__etat{margin-top:16px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  font-family:'Jost',sans-serif;color:rgba(246,243,236,.5);
  display:flex;justify-content:space-between;gap:12px;}
.voile__pct{font-variant-numeric:tabular-nums;color:var(--or-clair);}

/* ======================================================= 2. LA NAVIGATION */
.nav{position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;gap:10px;
  height:var(--nav-h);padding:0 clamp(12px,4vw,26px);
  /* La barre ne bouge plus : elle ne fait que poser son fond depoli.
     Elle se retractait au defilement et revenait au moindre recul — mesure
     faite, deux allers-retours par coup de pouce. */
  transition:background-color .5s var(--tempo),box-shadow .5s var(--tempo),
             backdrop-filter .5s,color .5s var(--tempo);}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--trait);opacity:0;
  transition:opacity .5s,background-color .5s var(--tempo);}
.nav.est-pose{background:rgba(252,251,248,.82);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);}
.nav.est-pose::after{opacity:1;}
.nav__marque{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0;}
/* Le logo est noir : sur une section sombre il disparait. Deux fichiers,
   l'un pour le jour l'autre pour la nuit, echanges par la feuille de style —
   ils pesent 5 Ko chacun. max-width:none est indispensable : la regle
   globale img{max-width:100%} comprimerait le logo (largeur reduite, hauteur
   gardee) des que la zone de marque retrecit, sans rien faire deborder. */
.nav__lg{position:relative;display:block;width:34px;height:34px;flex:none;}
.nav__lg img{position:absolute;inset:0;width:34px;height:34px;max-width:none;
  transition:opacity .35s var(--tempo);}
.nav__lg--nuit{opacity:0;}
.nav.sur-nuit .nav__lg--jour{opacity:0;}
.nav.sur-nuit .nav__lg--nuit{opacity:1;}
.nav__mot{font-family:'Jost',sans-serif;font-size:13.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  padding-left:.26em;transition:opacity .35s,max-width .4s;}
.nav__act{display:inline-flex;align-items:center;gap:.45em;height:38px;padding:0 15px;
  border-radius:999px;font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.06em;white-space:nowrap;flex:none;
  border:1px solid var(--trait);transition:all .35s var(--tempo);}
.nav__act:hover{background:rgba(11,11,13,.05);}
.nav__act--or{background:linear-gradient(100deg,var(--or-fonce),var(--or-vif) 55%,var(--or));
  color:#171106;border-color:transparent;box-shadow:0 6px 18px -8px rgba(185,138,38,.8);}
.nav__act--or:hover{filter:brightness(1.07);}
.nav__burger{width:40px;height:40px;flex:none;border-radius:999px;border:1px solid var(--trait);
  display:grid;place-items:center;
  transition:background-color .3s,border-color .5s var(--tempo);}
.nav__burger:hover{background:rgba(11,11,13,.05);}
.nav__burger i{display:block;position:relative;width:16px;height:1.5px;background:currentColor;
  border-radius:2px;transition:transform .4s var(--tempo),background-color .2s;}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:16px;
  height:1.5px;background:currentColor;border-radius:2px;transition:transform .4s var(--tempo);}
.nav__burger i::before{top:-5px;}
.nav__burger i::after{top:5px;}
/* barre posee sur une section sombre : le fond doit suivre le texte, sinon
   un libelle clair se retrouve sur un fond clair et disparait. */
.nav.sur-nuit{color:var(--craie);}
.nav.est-pose.sur-nuit{background:rgba(11,11,13,.80);}
.nav.est-pose.sur-nuit::after{background:var(--trait-nuit);}
.nav.sur-nuit .nav__act,.nav.sur-nuit .nav__burger{border-color:rgba(246,243,236,.26);}
.nav.sur-nuit .nav__act:hover,.nav.sur-nuit .nav__burger:hover{background:rgba(246,243,236,.1);}
.nav.sur-nuit .nav__act--or{border-color:transparent;}
/* Le rabattement de la barre, par paliers mesures. Six elements — marque,
   langue, appel, devis, menu — ne tiennent pas a 360 px : on retire d'abord
   ce qui est redondant (le mot-symbole, que le logo porte deja), puis le
   libelle du bouton d'appel, dont l'icone suffit. Le navigateur ne doit
   JAMAIS avoir a tronquer quoi que ce soit lui-meme. */
@media (max-width:759px){ .nav__mot{display:none;} }
@media (max-width:430px){
  .nav{gap:7px;padding-inline:10px;}
  .nav__act{height:34px;padding:0 11px;font-size:11.5px;}
  .nav__burger{width:36px;height:36px;}
}
@media (max-width:390px){
  .nav__lbl{display:none;}
  .nav__act{padding:0 10px;}
}

/* ------------------------------------------------- 2 bis. LA CARTE MENU --
   Un panneau plein ecran, sur un site qui tient en une page, oblige a
   couvrir l'ecran pour proposer huit ancres. Une carte ancree sous le bouton
   dit la meme chose sans effacer la page — et laisse voir le site derriere,
   ce qui est exactement l'effet recherche.                                */
.cmenu{position:fixed;inset:0;z-index:900;visibility:hidden;}
.cmenu.est-ouvert{visibility:visible;}
.cmenu__v{position:absolute;inset:0;background:rgba(14,12,9,.20);opacity:0;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .45s var(--tempo);}
.cmenu.est-ouvert .cmenu__v{opacity:1;}

.cmenu__c{position:absolute;top:calc(var(--nav-h) + 6px);
  right:clamp(10px,3.6vw,26px);width:min(272px,calc(100vw - 22px));
  max-height:calc(100% - var(--nav-h) - 22px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  border-radius:20px;padding:12px 12px 14px;
  background:rgba(252,251,248,.94);
  -webkit-backdrop-filter:saturate(1.7) blur(22px);backdrop-filter:saturate(1.7) blur(22px);
  border:1px solid rgba(185,138,38,.24);
  box-shadow:0 2px 8px rgba(11,11,13,.08),0 26px 60px -22px rgba(11,11,13,.42);
  transform-origin:100% 0;transform:translate3d(0,-10px,0) scale(.94);opacity:0;
  transition:transform .46s var(--tempo),opacity .34s var(--tempo);}
.cmenu.est-ouvert .cmenu__c{transform:none;opacity:1;}
/* le trait d'or : une passe de rouleau qui traverse la carte a l'ouverture */
.cmenu__c::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  border-radius:22px 22px 0 0;transform-origin:right;transform:scaleX(0);
  background:linear-gradient(90deg,transparent,var(--or-vif) 30%,var(--or-clair) 65%,var(--or));
  transition:transform .6s var(--tempo) .08s;}
.cmenu.est-ouvert .cmenu__c::before{transform:scaleX(1);}

.cmenu__t{display:flex;align-items:center;gap:9px;padding:2px 7px 10px;
  font-family:'Jost',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gris);}
.cmenu__t::after{content:"";flex:1;height:1px;background:var(--trait);}

.cmenu__l{display:flex;align-items:center;gap:11px;padding:8px 9px;
  border-radius:11px;font-family:'Jost',sans-serif;font-size:14.6px;font-weight:500;
  white-space:nowrap;
  letter-spacing:.005em;color:var(--encre);
  opacity:0;transform:translate3d(8px,0,0);
  transition:opacity .4s var(--tempo),transform .4s var(--tempo),
             background-color .25s ease;}
.cmenu.est-ouvert .cmenu__l{opacity:1;transform:none;}
.cmenu__l:hover,.cmenu__l:focus-visible{background:rgba(185,138,38,.09);}
.cmenu__l:active{background:rgba(185,138,38,.16);}
/* la pastille de couleur qui repere chaque entree du menu */
/* La pastille est un <span> : une regle `.cmenu__l span{flex:1}` la touchait
   aussi et l'etirait en barre. Le libelle porte donc sa propre classe. */
.cmenu__p{width:18px;height:18px;border-radius:6px;flex:0 0 18px;background:var(--c,#DDD);
  box-shadow:inset 0 0 0 1px rgba(11,11,13,.12),0 1px 3px rgba(11,11,13,.14);
  position:relative;overflow:hidden;}
.cmenu__p::after{content:"";position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.42),transparent 55%);}
.cmenu__x{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.cmenu__l svg{opacity:0;transform:translateX(-4px);flex:none;color:var(--or);
  transition:opacity .3s,transform .3s var(--tempo);}
.cmenu__l:hover svg{opacity:1;transform:none;}

.cmenu__pied{margin-top:10px;padding-top:11px;border-top:1px solid var(--trait);
  display:grid;gap:8px;}
.cmenu__pied .act{min-height:44px;font-size:14px;}
.cmenu__tel{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;font-size:13.4px;border-radius:999px;border:1px solid var(--trait);
  font-family:'Jost',sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;
  transition:background-color .3s;}
.cmenu__tel:hover{background:rgba(11,11,13,.05);}
.cmenu__inf{margin-top:9px;text-align:center;font-size:11.2px;line-height:1.55;
  color:var(--gris);}

/* le bouton devient une croix */
.nav__burger.est-ouvert i{background:transparent;}
.nav__burger.est-ouvert i::before{transform:translateY(5px) rotate(45deg);}
.nav__burger.est-ouvert i::after{transform:translateY(-5px) rotate(-45deg);}


/* ================================================= 2 ter. LES LANGUES ---
   Un bouton drapeau + code pays, et un panneau ancre dessous. Le drapeau est
   un <use> vers un sprite SVG et non un emoji : sous Windows les emoji
   drapeaux ne sont pas rendus et retombent sur les deux lettres du pays. */
.lng{position:relative;flex:none;}
.lng__t{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 9px 0 7px;
  border-radius:999px;border:1px solid var(--trait);
  transition:background-color .3s,border-color .3s;}
.lng__t:hover{background:rgba(11,11,13,.05);}
.nav.sur-nuit .lng__t{border-color:rgba(246,243,236,.26);}
.nav.sur-nuit .lng__t:hover{background:rgba(246,243,236,.1);}
.lng__b{display:block;width:21px;height:14px;border-radius:2.5px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(11,11,13,.14);flex:none;line-height:0;}
.lng__d{display:block;width:100%;height:100%;}
.lng__c{font-family:'Jost',sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.09em;}
.lng__f{opacity:.55;transition:transform .35s var(--tempo);}
.lng.est-ouvert .lng__f{transform:rotate(180deg);}

.lng__p{position:absolute;top:calc(100% + 9px);left:50%;z-index:20;
  width:186px;padding:6px;border-radius:16px;
  transform:translateX(-50%) translateY(-8px) scale(.94);
  transform-origin:50% 0;opacity:0;visibility:hidden;
  background:rgba(252,251,248,.96);
  -webkit-backdrop-filter:saturate(1.7) blur(20px);backdrop-filter:saturate(1.7) blur(20px);
  border:1px solid rgba(185,138,38,.24);
  box-shadow:0 2px 8px rgba(11,11,13,.08),0 22px 50px -20px rgba(11,11,13,.4);
  transition:opacity .28s var(--tempo),transform .38s var(--tempo),visibility .38s;
  max-height:min(64vh,420px);overflow-y:auto;overscroll-behavior:contain;}
.lng.est-ouvert .lng__p{opacity:1;visibility:visible;transform:translateX(-50%) scale(1);}
.lng__o{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;
  border-radius:10px;text-align:left;color:var(--encre);
  font-family:'Jost',sans-serif;font-size:14px;font-weight:500;
  transition:background-color .22s;}
.lng__o .lng__d{width:21px;height:14px;border-radius:2.5px;flex:none;
  box-shadow:0 0 0 1px rgba(11,11,13,.14);}
.lng__o:hover{background:rgba(185,138,38,.10);}
.lng__o.on{background:rgba(185,138,38,.16);}
.lng__o span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:420px){
  .lng__t{height:34px;padding:0 7px 0 6px;gap:5px;}
  .lng__c{font-size:10.5px;letter-spacing:.05em;}
}
@media (max-width:360px){ .lng__c{display:none;} }

/* ------------------------------------------------------------ l'arabe ---
   Cairo pour l'arabe : les polices latines du site n'ont pas de glyphes
   arabes et le navigateur retomberait sur une police systeme, dont le
   dessin et l'interligne n'ont rien a voir avec le reste. */
   L'arabe est cursif : tout espacement de lettres rompt les ligatures. On
   remet donc letter-spacing a zero PARTOUT, et on bascule la mise en page. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/cairo-600-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
    U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,
    U+FE76-FEFC;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/cairo-700-arabic.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,
    U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,
    U+FE76-FEFC;}
html.est-rtl body{direction:rtl;
  font-family:'Cairo','Manrope',system-ui,sans-serif;}
html.est-rtl h1,html.est-rtl h2,html.est-rtl h3,html.est-rtl h4,
html.est-rtl .titre,html.est-rtl .seq__lg .k,html.est-rtl .act,
html.est-rtl .cmenu__l,html.est-rtl .lng__o{
  font-family:'Cairo','Jost',system-ui,sans-serif;}
html.est-rtl em,html.est-rtl .ital{font-family:'Cairo',serif;font-style:normal;
  font-weight:700;}
html.est-rtl .seq__lg .k{line-height:1.28;}
html.est-rtl .titre{line-height:1.28;}
html.est-rtl .sur,html.est-rtl .titre,html.est-rtl .seq__lg .k,
html.est-rtl .seq__lg .t,html.est-rtl .cmenu__t,html.est-rtl .mth__q,
html.est-rtl .exp__n,html.est-rtl .chn__k,html.est-rtl .res__l,
html.est-rtl .dev__cpt,html.est-rtl .fic__t,html.est-rtl .pied__ti,
html.est-rtl .cmp__u,html.est-rtl .mat__m span,html.est-rtl .res__syn span,
html.est-rtl .seq__mot,html.est-rtl .mth__pas,html.est-rtl .mth__aide,
html.est-rtl .nav__mot,html.est-rtl .pied__lg b,html.est-rtl .voile__nom,
html.est-rtl .lng__c,html.est-rtl .badge,html.est-rtl .curs__e,
html.est-rtl .feuille__s h4,html.est-rtl .sel__l{letter-spacing:0!important;}
html.est-rtl .sur{padding-left:0;padding-right:0;}
html.est-rtl .sur::before{order:2;}
html.est-rtl .seq__lg .t,html.est-rtl .res__l,html.est-rtl .seq__mot,
html.est-rtl .voile__nom,html.est-rtl .nav__mot,html.est-rtl .pied__lg b{padding-left:0;}
html.est-rtl .avi__x::before{content:"\00AB\00A0";}
html.est-rtl .avi__x::after{content:"\00A0\00BB";}
html.est-rtl .exp__p li,html.est-rtl .feuille__ul li{padding-left:0;padding-right:20px;}
html.est-rtl .exp__p li::before,html.est-rtl .feuille__ul li::before{left:auto;right:0;}
html.est-rtl .lienor::after{transform-origin:right;}
html.est-rtl .mth__aide svg,html.est-rtl .exp__go svg,
html.est-rtl .cmenu__l svg,html.est-rtl .dev__ret svg,
html.est-rtl .lienor svg{transform:scaleX(-1);}

/* Elements cales en absolu : le sens de lecture ne les retourne pas tout
   seul, il faut permuter left et right a la main. */
html.est-rtl .exp__n{right:auto;left:26px;}
html.est-rtl .badge{margin-left:0!important;margin-right:auto;}
html.est-rtl .ancre{left:auto;right:0;}

/* Trois mecaniques restent en sens direct : un curseur de mesure, la frise
   horizontale et le carrousel d'avis. Leur logique est geometrique, pas
   textuelle — les inverser casserait le calcul sans rien apporter au
   lecteur. Le texte a l'interieur, lui, reste en droite-a-gauche. */
html.est-rtl .curs__r{direction:ltr;}
html.est-rtl .mth__piste,html.est-rtl .mth__rail{direction:ltr;}
html.est-rtl .mth__c{direction:rtl;}
html.est-rtl .avi__p{direction:ltr;}
html.est-rtl .avi__c{direction:rtl;}
html.est-rtl .ruban__p{direction:ltr;}

/* Numeros et plages horaires : l'algorithme bidi place le « + » a la fin et
   inverse « 07:30 – 19:00 ». Ce sont des suites techniques, pas du texte :
   on les isole en sens direct. */
html.est-rtl a[href^="tel:"],
html.est-rtl .hor__l b,
html.est-rtl .curs__e,
html.est-rtl .cmenu__inf,
html.est-rtl .pied__bas span:last-child{direction:ltr;unicode-bidi:isolate;}
html.est-rtl a[href^="tel:"]{justify-content:flex-end;}
html.est-rtl .hor__l b{text-align:left;}

/* ================================================ 3. SEQUENCE AU DEFILEMENT
   La section est haute de N plateaux ; le plateau est collant. Toutes les
   hauteurs viennent de --stage-h, jamais de dvh ni de innerHeight.
   AUCUN voile, aucun filtre sur l'image : la scene reste celle du film.   */
/* Le fond de la section est celui du plateau, et non le fond de page : si un
   navigateur laissait apparaitre un pixel entre les deux, il serait invisible
   au lieu d'etre une bande blanche. */
.seq{position:relative;background:#E9E5DC;
  height:calc(var(--stage-h) * var(--ecrans,5));}
.seq__stage{position:sticky;top:0;height:var(--stage-h);width:100%;overflow:hidden;
  background:#E9E5DC;}
.seq__cv{position:absolute;inset:0;width:100%;height:100%;}
.seq__txt{position:absolute;inset:0;display:grid;pointer-events:none;}
.seq__lg{grid-area:1/1;align-self:center;justify-self:center;text-align:center;
  width:min(660px,88vw);padding:0 8px;opacity:0;will-change:transform,opacity;
  color:var(--encre);}
.seq__lg .k{display:block;font-family:'Jost',sans-serif;font-weight:500;
  font-size:clamp(31px,10.4vw,68px);line-height:1.03;letter-spacing:-.035em;
  color:var(--encre);}
.seq__lg .k em{color:var(--or);}
.seq__lg .s{margin-top:14px;font-size:clamp(14px,3.9vw,18px);line-height:1.62;
  color:rgba(11,11,13,.74);font-weight:400;}
.seq__lg .t{display:inline-block;margin-bottom:16px;font-family:'Jost',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;
  color:var(--or-fonce);padding-left:.36em;}
/* le titre d'ouverture : boite flexible, JAMAIS de transform — le moteur
   ecrit lui-meme un transform sur chaque legende. */
/* Les chapitres sont poses un peu sous le centre optique : au milieu exact
   ils paraissent trop hauts, et le sujet du film occupe le tiers superieur.
   position:relative et non transform — le moteur ecrit lui-meme un transform
   sur chaque legende. */
.seq__lg--bas{position:relative;top:calc(var(--stage-h) * .085);}
.seq__lg--tete{display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding-top:34px;padding-bottom:8px;}
.seq__lg--tete .k{font-size:clamp(54px,19vw,124px);letter-spacing:.03em;line-height:.98;}
.seq__lg--tete .r{display:block;width:52px;height:2px;margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--or-vif),transparent);}

/* Invitation a defiler.
   Le plateau est haut de --stage-h, c'est-a-dire 100vh : la fenetre SANS la
   barre d'outils. Des que la barre s'affiche, le bas du plateau passe sous le
   pli — une invitation calee sur ce bas-la est donc invisible sur telephone,
   quelle que soit la marge (mesure : masquee sur les cinq appareils testes).
   On la cale donc sur le bas REELLEMENT visible : 100dvh suit la barre, et
   `--stage-h - 100dvh` est exactement la bande cachee. Repli pour les
   navigateurs sans dvh. */
.seq__inv{position:absolute;left:50%;
  bottom:calc(env(safe-area-inset-bottom,0px) + 92px);
  bottom:calc(var(--stage-h) - 100dvh + env(safe-area-inset-bottom,0px) + 22px);
  transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;}
/* Ni pastille ni anneau : la fleche seule, posee sur le film. Sans fond
   pour la porter, c'est une ombre portee qui la garde lisible sur un mur
   clair comme sur un mur sombre. */
.seq__fl{position:relative;width:26px;height:26px;flex:none;
  display:grid;place-items:center;color:var(--encre);}
.seq__fl svg{position:relative;animation:inv-monte 2.6s var(--tempo) infinite;
  filter:drop-shadow(0 0 7px rgba(252,251,248,.95))
         drop-shadow(0 0 15px rgba(252,251,248,.7));}
@keyframes inv-monte{
  0%{transform:translateY(5px);opacity:0}
  22%{transform:translateY(0);opacity:1}
  62%{transform:translateY(-7px);opacity:0}
  100%{transform:translateY(-7px);opacity:0}}
.seq__mot{font-family:'Jost',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.36em;text-transform:uppercase;color:rgba(11,11,13,.62);
  padding-left:.36em;
  text-shadow:0 0 8px rgba(252,251,248,.95),0 0 18px rgba(252,251,248,.75);}

/* Jauge de chapitre : fixee tout en haut de la fenetre, donc toujours
   visible, quoi que fasse la barre d'outils. */
.seq__jauge{position:fixed;top:0;left:0;right:0;height:2px;z-index:850;
  background:rgba(11,11,13,.07);opacity:1;transition:opacity .5s var(--tempo);
  pointer-events:none;}
.seq__jauge.part{opacity:0;}
.seq__jauge i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--or-fonce),var(--or-vif) 60%,var(--or-clair));}

/* ============================================ 4. SECTIONS ET TRANSITIONS
   La revelation est declenchee UNE FOIS par IntersectionObserver, puis jouee
   par une transition CSS. Piloter treize sections image par image au
   defilement coutait cher et, surtout, faisait disparaitre une section
   encore lisible des qu'elle approchait du haut de l'ecran — ce qui se lit
   comme un bug, pas comme un effet.                                        */
.sec{position:relative;}
.sec__mv{transition:opacity 1s var(--tempo),transform 1s var(--tempo);}
html.js .sec__mv{opacity:0;transform:translate3d(0,26px,0);}
html.js .sec__mv.est-vu{opacity:1;transform:none;}
.sec--nuit{background:var(--encre);color:var(--craie);}
.sec--craie{background:var(--craie);}
.sec--papier{background:var(--papier);}
.pad{padding-block:clamp(72px,15vw,132px);}
.pad-s{padding-block:clamp(52px,11vw,92px);}

/* -- le seuil : la passe de rouleau qui ouvre chaque section --------------
   Une passe doree traverse la couture entre deux sections au rythme du
   defilement, puis s'en va : -101 % a gauche, +101 % a droite. Une bande de
   la couleur de la section serait invisible — la section a deja cette
   couleur. Discrete : elle ponctue, elle ne clignote pas.                 */
.seuil{position:absolute;top:0;left:0;right:0;height:clamp(56px,13vw,104px);
  overflow:hidden;pointer-events:none;z-index:3;}
.seuil__b{position:absolute;inset:0;transform:translate3d(-101%,0,0);
  will-change:transform;}
.seuil__b::before{content:"";position:absolute;inset:0 20px 0 0;
  background:linear-gradient(180deg,
    rgba(185,138,38,.42) 0%,rgba(210,160,58,.22) 34%,
    rgba(233,196,106,.08) 66%,rgba(233,196,106,0) 100%);}
.seuil__b::after{content:"";position:absolute;top:0;bottom:0;right:0;width:30px;
  background:repeating-linear-gradient(90deg,
    rgba(210,160,58,.40) 0 2px, rgba(210,160,58,.12) 2px 3px,
    rgba(233,196,106,.34) 3px 5px, rgba(210,160,58,.08) 5px 8px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 45%,transparent 100%);
  transform:skewX(-6deg);}

/* ================================================ 5. MANIFESTE + CHIFFRES */
.mnf{position:relative;overflow:hidden;}
.mnf__grille{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(var(--trait) 1px,transparent 1px),
    linear-gradient(90deg,var(--trait) 1px,transparent 1px);
  background-size:clamp(46px,12vw,86px) clamp(46px,12vw,86px);
  -webkit-mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(80% 60% at 50% 40%,#000,transparent 78%);}
.mnf__st{position:relative;margin-bottom:clamp(30px,7vw,52px);
  font-size:clamp(15.5px,4.1vw,18.5px);line-height:1.62;color:var(--gris);max-width:52ch;}
.mnf__txt{position:relative;font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(23px,6.2vw,40px);line-height:1.30;letter-spacing:-.022em;max-width:19ch;}
.mnf__txt .m{display:inline-block;opacity:.20;transition:opacity .5s var(--tempo),color .5s;}
.mnf__txt .m.on{opacity:1;}
.mnf__txt em{color:var(--or);}
.mnf__sig{margin-top:32px;display:flex;align-items:center;gap:14px;}
.mnf__sig img{width:46px;height:46px;max-width:none;opacity:.9;}
.mnf__sig span{font-size:13.5px;line-height:1.5;color:var(--gris);}
.mnf__sig b{display:block;font-family:'Jost',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.05em;color:var(--encre);}

.cmp{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:clamp(44px,10vw,72px);
  background:var(--trait);border:1px solid var(--trait);border-radius:var(--ray);
  overflow:hidden;}
@media (min-width:760px){.cmp{grid-template-columns:repeat(4,1fr);}}
.cmp__c{background:var(--papier);padding:clamp(20px,5vw,30px) clamp(14px,4vw,22px);
  text-align:center;transition:background-color .4s;}
.cmp__c:hover{background:#fff;}
.cmp__v{font-family:'Jost',sans-serif;font-weight:500;font-size:clamp(30px,8.5vw,46px);
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(150deg,var(--encre) 20%,var(--or) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.cmp__u{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  margin-top:9px;font-family:'Jost',sans-serif;font-weight:500;}

/* ====================================================== 6. LES EXPERTISES */
.exp__tete{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px;
  justify-content:space-between;margin-bottom:clamp(34px,8vw,56px);}
.exp__g{display:grid;gap:clamp(14px,3.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,286px),1fr));}
.exp__c{position:relative;display:flex;flex-direction:column;
  padding:clamp(22px,5.5vw,30px);border-radius:var(--ray-l);
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--trait-nuit);overflow:hidden;isolation:isolate;
  transform-style:preserve-3d;will-change:transform;
  transition:border-color .5s var(--tempo),box-shadow .5s var(--tempo),
             background-color .5s var(--tempo);}
.exp__c::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(340px 240px at var(--px,50%) var(--py,0%),
    rgba(233,196,106,.16),transparent 68%);opacity:0;transition:opacity .5s var(--tempo);}
.exp__c:hover{border-color:rgba(233,196,106,.36);box-shadow:0 30px 70px -40px rgba(0,0,0,.9);}
.exp__c:hover::before{opacity:1;}
.exp__ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(233,196,106,.3);background:rgba(233,196,106,.07);color:var(--or-clair);
  margin-bottom:20px;transition:transform .6s var(--tempo);}
.exp__c:hover .exp__ic{transform:translateZ(26px) rotate(-6deg) scale(1.06);}
.exp__n{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  color:rgba(233,196,106,.62);position:absolute;top:26px;right:26px;}
.exp__t{font-size:clamp(20px,5.2vw,25px);letter-spacing:-.02em;}
.exp__d{margin-top:11px;font-size:14.6px;line-height:1.66;color:rgba(246,243,236,.62);}
.exp__p{margin:18px 0 22px;padding:0;list-style:none;display:grid;gap:7px;}
.exp__p li{position:relative;padding-left:19px;font-size:13.6px;color:rgba(246,243,236,.74);}
.exp__p li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-radius:2px;background:var(--or-vif);transform:rotate(45deg);}
.exp__pied{margin-top:auto;padding-top:18px;border-top:1px solid var(--trait-nuit);
  display:flex;align-items:center;justify-content:space-between;gap:12px;}
.exp__pr{font-family:'Jost',sans-serif;font-size:13px;color:rgba(246,243,236,.56);}
.exp__pr b{display:block;font-size:19px;font-weight:500;color:var(--craie);letter-spacing:-.01em;}
.exp__go{width:40px;height:40px;border-radius:999px;border:1px solid var(--trait-nuit);
  display:grid;place-items:center;flex:none;color:var(--or-clair);
  transition:background-color .4s,transform .4s var(--tempo),border-color .4s;}
.exp__c:hover .exp__go{background:var(--or-vif);color:#171106;border-color:transparent;
  transform:translateX(3px);}

/* ======================================================== 7. LA METHODE
   Frise horizontale pilotee par le defilement vertical.                   */
.mth{position:relative;background:var(--encre);color:var(--craie);
  height:calc(var(--stage-h) * var(--ecrans,5));}
.mth__stage{position:sticky;top:0;height:var(--stage-h);overflow:hidden;
  display:flex;flex-direction:column;
  padding-bottom:calc(var(--stage-h) - var(--vue-h,var(--stage-h)));}
.mth__fond{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.mth__fond::before{content:"";position:absolute;inset:0;opacity:.55;
  background:
    radial-gradient(70% 44% at 12% 6%,rgba(233,196,106,.14),transparent 62%),
    radial-gradient(66% 40% at 92% 96%,rgba(185,138,38,.11),transparent 60%);}
/* Le calque de fond du chapitre « methode » : un releve de chantier qui
   derive, quelques coulures d'or et une lumiere qui balaie. Tout est en CSS
   et mis EN PAUSE hors champ — sur un telephone, une animation qui tourne
   dans une section invisible coute exactement autant qu'une visible. */
.mth__plan{position:absolute;inset:-20%;opacity:.32;
  background-image:
    linear-gradient(rgba(233,196,106,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,196,106,.10) 1px,transparent 1px),
    linear-gradient(rgba(233,196,106,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(233,196,106,.05) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent 78%);
  animation:mth-derive 46s linear infinite;animation-play-state:paused;}
@keyframes mth-derive{to{transform:translate3d(-120px,-120px,0)}}

.mth__coul{position:absolute;inset:0;}
.mth__coul i{position:absolute;top:0;width:2px;border-radius:0 0 2px 2px;
  background:linear-gradient(180deg,rgba(233,196,106,0),rgba(233,196,106,.42) 30%,
    rgba(185,138,38,.10) 88%,transparent);
  transform-origin:top;transform:scaleY(0);
  animation:mth-coule 11s var(--tempo) infinite;animation-play-state:paused;}
.mth__coul i::after{content:"";position:absolute;left:-2px;bottom:-5px;
  width:6px;height:6px;border-radius:999px;background:rgba(233,196,106,.5);
  filter:blur(1px);}
@keyframes mth-coule{
  0%{transform:scaleY(0);opacity:0}
  12%{opacity:1}
  62%{transform:scaleY(1);opacity:1}
  92%{transform:scaleY(1);opacity:0}
  100%{transform:scaleY(1);opacity:0}}
.mth__coul i:nth-child(1){left:9%;height:32%;animation-delay:0s}
.mth__coul i:nth-child(2){left:27%;height:46%;animation-delay:2.6s}
.mth__coul i:nth-child(3){left:63%;height:38%;animation-delay:5.1s}
.mth__coul i:nth-child(4){left:84%;height:52%;animation-delay:7.4s}
.mth__coul i:nth-child(5){left:46%;height:26%;animation-delay:9.2s}

/* la lumiere qui balaie, comme une baladeuse qu'on deplace sur le mur */
.mth__lueur{position:absolute;top:-30%;bottom:-30%;width:52%;
  background:radial-gradient(closest-side,rgba(233,196,106,.13),transparent 72%);
  animation:mth-balaie 19s ease-in-out infinite alternate;animation-play-state:paused;}
@keyframes mth-balaie{from{transform:translateX(-40%)}to{transform:translateX(130%)}}

.mth.est-live .mth__plan,
.mth.est-live .mth__coul i,
.mth.est-live .mth__lueur{animation-play-state:running;}
@media (prefers-reduced-motion:reduce){
  .mth__plan,.mth__coul,.mth__lueur{animation:none!important;display:none;}
}
.mth__tete{position:relative;flex:none;padding:calc(var(--nav-h) + 10px) var(--marge) 0;}
.mth__piste{position:relative;flex:1;display:flex;align-items:center;overflow:hidden;}
.mth__rail{display:flex;gap:clamp(14px,3.6vw,26px);will-change:transform;
  padding-inline:0;}
/* La hauteur suit --stage-h (en pixels, et qui ne fait que grandir) et non
   vh : dans un navigateur integre, une carte en vh changerait de taille a
   chaque aller-retour de la barre d'outils, et les reperes du rail avec. */
.mth__c{position:relative;flex:none;width:min(78vw,330px);
  min-height:min(calc(var(--stage-h) * 0.44),400px);
  display:flex;flex-direction:column;
  padding:clamp(20px,5vw,28px);border-radius:var(--ray-l);
  background:linear-gradient(168deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--trait-nuit);overflow:hidden;
  transition:border-color .5s,background-color .5s;}
.mth__c.on{border-color:rgba(233,196,106,.4);
  background:linear-gradient(168deg,rgba(233,196,106,.13),rgba(255,255,255,.02));}
.mth__n{font-family:'Jost',sans-serif;font-size:clamp(40px,11vw,62px);font-weight:300;
  line-height:.9;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(233,196,106,.5);margin-bottom:16px;
  transition:color .6s var(--tempo);}
.mth__c.on .mth__n{color:rgba(233,196,106,.20);}
.mth__t{font-size:clamp(19px,5vw,23px);letter-spacing:-.018em;}
.mth__d{margin-top:10px;margin-bottom:16px;font-size:14.3px;line-height:1.65;
  color:rgba(246,243,236,.64);}
.mth__q{margin-top:auto;padding-top:16px;border-top:1px solid var(--trait-nuit);
  font-family:'Jost',sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--or-clair);}
.mth__bas{position:relative;flex:none;padding:0 var(--marge)
  calc(env(safe-area-inset-bottom,0px) + 78px);}
@media (min-width:760px){
  .mth__bas{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px);}
}
.mth__jauge{height:2px;background:rgba(246,243,236,.13);border-radius:2px;overflow:hidden;}
.mth__jauge i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--or-fonce),var(--or-clair));}
/* Repere de progression : sans lui, on ne comprend pas que le defilement
   VERTICAL fait avancer les etapes horizontalement, et on croit la page
   bloquee. Il s'efface des que la deuxieme etape est atteinte. */
.mth__aide{position:absolute;left:50%;bottom:calc(100% + 14px);
  transform:translateX(-50%);display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(233,196,106,.30);background:rgba(233,196,106,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:'Jost',sans-serif;font-size:11.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--or-clair);
  transition:opacity .5s var(--tempo),transform .5s var(--tempo);}
.mth__aide.part{opacity:0;transform:translateX(-50%) translateY(6px);}
.mth__aide svg{animation:aide-pousse 1.9s var(--tempo) infinite;}
@keyframes aide-pousse{
  0%,100%{transform:translateX(0);opacity:.55}
  50%{transform:translateX(4px);opacity:1}}
.mth__bas{position:relative;}
.mth__pas{margin-top:12px;display:flex;justify-content:space-between;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,243,236,.42);}

/* ====================================================== 8. LES MATIERES */
.mat__g{display:grid;gap:clamp(14px,3.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));}
.mat__c{position:relative;border-radius:var(--ray-l);overflow:hidden;
  border:1px solid var(--trait);background:var(--papier);
  transition:transform .6s var(--tempo),box-shadow .6s var(--tempo);}
.mat__c:hover{transform:translateY(-5px);box-shadow:var(--ombre-2);}
.mat__ech{position:relative;height:clamp(128px,30vw,168px);background:var(--c,#ddd);overflow:hidden;}
.mat__ech::before{content:"";position:absolute;inset:0;
  background:url("../img/mur-grain.jpg") center/cover;mix-blend-mode:multiply;opacity:.85;}
.mat__ech::after{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,rgba(255,255,255,0) 22%,
    rgba(255,255,255,var(--br,.20)) 46%,rgba(255,255,255,0) 70%);
  transform:translateX(-30%);transition:transform 1.1s var(--tempo);}
.mat__c:hover .mat__ech::after{transform:translateX(30%);}
.mat__i{padding:20px clamp(18px,4.4vw,24px) 24px;}
.mat__t{font-size:19.5px;letter-spacing:-.015em;}
.mat__d{margin-top:8px;font-size:14px;line-height:1.62;color:var(--gris);}
.mat__m{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px;}
.mat__m span{font-family:'Jost',sans-serif;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 10px;border-radius:999px;
  border:1px solid var(--trait);color:var(--gris);}

/* ===================================================== 9. LES CHANTIERS */
.chn__g{display:grid;gap:clamp(12px,3vw,18px);grid-template-columns:repeat(2,1fr);}
@media (min-width:820px){.chn__g{grid-template-columns:repeat(4,1fr);}}
.chn__c{position:relative;border-radius:var(--ray-l);overflow:hidden;display:block;
  background:var(--encre2);aspect-ratio:3/4;}
.chn__c:nth-child(1),.chn__c:nth-child(4){aspect-ratio:3/4;}
@media (min-width:820px){
  .chn__c:nth-child(1){grid-column:span 2;aspect-ratio:16/11;}
  .chn__c:nth-child(4){grid-column:span 2;aspect-ratio:16/11;}
}
.chn__c img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.5s var(--tempo),filter .8s;filter:saturate(.86) contrast(1.04);}
.chn__c:hover img{transform:scale(1.06);}
/* Le film est en haute lumiere : un degrade leger ne suffit pas, le texte
   blanc se perd sur le mur. Voile long et franc, plus une ombre portee sur
   les glyphes eux-memes. */
.chn__c::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,8,10,.90) 0%,rgba(8,8,10,.70) 30%,
    rgba(8,8,10,.34) 56%,rgba(8,8,10,.06) 80%,transparent 100%);}
.chn__i{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,4vw,22px);z-index:2;
  color:var(--craie);text-shadow:0 1px 2px rgba(6,6,8,.6),0 0 14px rgba(6,6,8,.45);}
.chn__k{font-family:'Jost',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or-clair);}
.chn__t{margin-top:6px;font-size:clamp(17px,4.4vw,22px);letter-spacing:-.015em;}
.chn__s{margin-top:5px;font-size:13px;color:rgba(246,243,236,.66);}

/* ========================================================== 10. LE DEVIS */
.dev{position:relative;overflow:hidden;}
.dev__boite{position:relative;border-radius:var(--ray-l);overflow:hidden;
  max-width:780px;margin-inline:auto;
  background:linear-gradient(168deg,var(--encre2),var(--encre));
  border:1px solid rgba(246,243,236,.10);box-shadow:var(--ombre-3);color:var(--craie);}
.dev__tete{padding:clamp(22px,5.4vw,32px) clamp(20px,5vw,34px) 0;}
.dev__jauge{margin-top:20px;height:3px;border-radius:3px;background:rgba(246,243,236,.12);
  overflow:hidden;}
.dev__jauge i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--or-fonce),var(--or-vif) 60%,var(--or-clair));
  transition:transform .6s var(--tempo);}
.dev__cpt{margin-top:11px;display:flex;justify-content:space-between;
  font-family:'Jost',sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,243,236,.45);}
.dev__corps{position:relative;padding:clamp(20px,5vw,32px) clamp(20px,5vw,34px)
  clamp(22px,5.4vw,32px);}
.dev__q{display:none;}
.dev__q.on{display:block;animation:q-entre .55s var(--tempo) both;}
@keyframes q-entre{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.dev__t{font-size:clamp(21px,5.6vw,29px);letter-spacing:-.02em;}
.dev__st{margin-top:8px;font-size:14.4px;color:rgba(246,243,236,.6);}
.dev__ops{margin-top:22px;display:grid;gap:10px;}
.dev__ops--2{grid-template-columns:repeat(2,1fr);}
@media (min-width:620px){.dev__ops--auto{grid-template-columns:repeat(2,1fr);}}
.opt{position:relative;display:flex;align-items:center;gap:14px;text-align:left;
  padding:15px 16px;border-radius:var(--ray);border:1px solid rgba(246,243,236,.13);
  background:rgba(246,243,236,.035);overflow:hidden;
  transition:border-color .35s,background-color .35s,transform .35s var(--tempo);}
.opt::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(120deg,rgba(233,196,106,.16),rgba(233,196,106,.03));
  transition:opacity .4s;}
.opt:hover{border-color:rgba(233,196,106,.34);transform:translateY(-2px);}
.opt.on{border-color:var(--or-vif);}
.opt.on::before{opacity:1;}
.opt__ic{position:relative;width:42px;height:42px;flex:none;border-radius:12px;display:grid;
  place-items:center;border:1px solid rgba(246,243,236,.14);color:var(--or-clair);
  background:rgba(11,11,13,.35);transition:background-color .35s,color .35s;}
.opt.on .opt__ic{background:var(--or-vif);color:#171106;border-color:transparent;}
.opt__x{position:relative;min-width:0;}
.opt__t{display:block;font-family:'Jost',sans-serif;font-size:15.5px;font-weight:500;
  letter-spacing:.01em;line-height:1.3;}
.opt__d{display:block;margin-top:3px;font-size:12.5px;color:rgba(246,243,236,.55);
  line-height:1.45;}
.opt--compact{flex-direction:column;align-items:flex-start;gap:6px;padding:14px;}
.opt--compact .opt__t{font-size:14.5px;}

/* curseur de surface */
.curs{margin-top:24px;}
.curs__v{font-family:'Jost',sans-serif;font-size:clamp(38px,11vw,58px);font-weight:300;
  letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;}
.curs__v small{font-size:.34em;letter-spacing:.08em;color:rgba(246,243,236,.55);
  margin-left:.3em;font-weight:500;}
.curs__r{-webkit-appearance:none;appearance:none;width:100%;height:34px;margin-top:14px;
  background:transparent;}
.curs__r::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--or-vif) var(--p,20%),rgba(246,243,236,.16) var(--p,20%));}
.curs__r::-moz-range-track{height:4px;border-radius:4px;background:rgba(246,243,236,.16);}
.curs__r::-moz-range-progress{height:4px;border-radius:4px;background:var(--or-vif);}
.curs__r::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:999px;
  margin-top:-11px;background:linear-gradient(160deg,var(--or-clair),var(--or));
  border:2px solid var(--encre);box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:grab;}
.curs__r::-moz-range-thumb{width:24px;height:24px;border-radius:999px;
  background:linear-gradient(160deg,var(--or-clair),var(--or));border:2px solid var(--encre);}
.curs__e{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(246,243,236,.4);
  font-family:'Jost',sans-serif;}
.curs__raps{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.curs__raps button{padding:7px 13px;border-radius:999px;font-size:12.5px;
  border:1px solid rgba(246,243,236,.14);color:rgba(246,243,236,.72);
  font-family:'Jost',sans-serif;transition:.3s;}
.curs__raps button:hover{border-color:var(--or-vif);color:var(--craie);}

.dev__nav{display:flex;align-items:center;gap:10px;margin-top:26px;}
.dev__nav .act{flex:1;}
@media (min-width:620px){.dev__nav .act{flex:0 0 300px;}}
.dev__ret{width:52px;min-height:52px;flex:none;border-radius:999px;
  border:1px solid rgba(246,243,236,.16);display:grid;place-items:center;
  transition:background-color .3s;}
.dev__ret:hover{background:rgba(246,243,236,.08);}

/* resultat */
.res{text-align:center;}
.res__l{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--or-clair);padding-left:.28em;}
.res__v{margin-top:16px;font-family:'Jost',sans-serif;font-weight:300;
  font-size:clamp(32px,9.4vw,54px);letter-spacing:-.035em;line-height:1.05;
  font-variant-numeric:tabular-nums;}
/* Pas de degrade clippe ici : la boite du devis vit dans un calque 3D, et
   un background-clip:text y ressort terne. Couleur pleine, plus franche. */
.res__v b{font-weight:500;color:var(--craie);}
.res__u{font-size:14px;color:rgba(246,243,236,.55);margin-top:10px;}
.res__d{margin-top:26px;display:grid;gap:1px;background:rgba(246,243,236,.1);
  border:1px solid rgba(246,243,236,.1);border-radius:var(--ray);overflow:hidden;text-align:left;}
.res__li{display:flex;justify-content:space-between;gap:14px;padding:13px 16px;
  background:var(--encre2);font-size:14px;}
.res__li span{color:rgba(246,243,236,.62);}
.res__li b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.res__li--tot{background:rgba(233,196,106,.10);}
.res__li--tot b{color:var(--or-clair);}
.res--devis .res__d,.res--devis .res__note{display:none;}
.res--devis .res__v b{font-size:.66em;letter-spacing:0;}
.res--devis .res__u{max-width:36ch;margin-inline:auto;}
.res__note{margin-top:16px;font-size:12.6px;line-height:1.6;color:rgba(246,243,236,.46);}
.res__syn{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
.res__syn span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid rgba(246,243,236,.16);
  color:rgba(246,243,236,.66);font-family:'Jost',sans-serif;}

/* ==================================================== 11. LES ENGAGEMENTS */
.eng__g{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--ray-l);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));}
.eng__c{background:var(--papier);padding:clamp(22px,5vw,30px);
  transition:background-color .45s;}
.eng__c:hover{background:#fff;}
.eng__ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(185,138,38,.28);background:rgba(185,138,38,.07);color:var(--or);
  margin-bottom:16px;}
.eng__t{font-size:18.5px;letter-spacing:-.015em;}
.eng__d{margin-top:8px;font-size:14px;line-height:1.62;color:var(--gris);}

/* ========================================================== 12. LES AVIS */
/* Piste pleine largeur. PAS de marge negative : .avi__p est un enfant direct
   de .sec__mv, qui n'a aucune marge interieure a compenser — la negative la
   faisait deborder de 44 px de chaque cote et rendait TOUTE la page
   defilante horizontalement sur grand ecran. */
.avi__p{display:flex;gap:clamp(12px,3vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:14px;
  padding-inline:var(--marge);
  overscroll-behavior-x:contain;   /* le geste ne part pas dans la page */
  scrollbar-width:none;}
.avi__p::-webkit-scrollbar{display:none;}
.avi__c{flex:none;width:min(80vw,352px);scroll-snap-align:center;
  padding:clamp(22px,5vw,28px);border-radius:var(--ray-l);
  background:linear-gradient(168deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--trait-nuit);display:flex;flex-direction:column;}
.avi__e{color:var(--or-clair);letter-spacing:.18em;font-size:13px;}
.avi__x{margin-top:14px;font-size:15.2px;line-height:1.68;color:rgba(246,243,236,.82);flex:1;}
.avi__x::before{content:"« ";color:var(--or);}
.avi__x::after{content:" »";color:var(--or);}
.avi__q{margin-top:18px;padding-top:14px;border-top:1px solid var(--trait-nuit);
  display:flex;align-items:center;gap:11px;}
.avi__a{width:38px;height:38px;border-radius:999px;flex:none;display:grid;place-items:center;
  font-family:'Jost',sans-serif;font-weight:600;font-size:14px;color:#171106;
  background:linear-gradient(150deg,var(--or-clair),var(--or));}
.avi__nm{display:block;font-family:'Jost',sans-serif;font-size:14.5px;font-weight:500;
  line-height:1.25;}
.avi__lc{display:block;font-size:12.4px;color:rgba(246,243,236,.5);line-height:1.35;}
.avi__pts{display:flex;justify-content:center;gap:7px;margin-top:20px;}
.avi__pts i{width:6px;height:6px;border-radius:999px;background:rgba(246,243,236,.24);
  transition:.4s var(--tempo);}
.avi__pts i.on{width:22px;border-radius:999px;background:var(--or-vif);}

/* ======================================================== 13. LE CONTACT */
.ctc__g{display:grid;gap:clamp(18px,4vw,26px);}
@media (min-width:860px){.ctc__g{grid-template-columns:1.1fr .9fr;align-items:start;}}
.fic{padding:clamp(22px,5vw,30px);border-radius:var(--ray-l);border:1px solid var(--trait);
  background:var(--papier);}
.fic + .fic{margin-top:14px;}
.fic__t{display:flex;align-items:center;gap:11px;font-family:'Jost',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gris);}
.fic__v{margin-top:12px;font-family:'Jost',sans-serif;font-size:clamp(18px,4.6vw,22px);
  font-weight:500;letter-spacing:-.01em;line-height:1.35;}
.fic__s{margin-top:7px;font-size:14px;color:var(--gris);line-height:1.6;}
.badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;
  font-family:'Jost',sans-serif;font-size:12px;font-weight:500;letter-spacing:.08em;
  border:1px solid var(--trait);}
.badge i{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none;}
.badge.ouv{color:#1E7A46;background:rgba(30,122,70,.09);border-color:rgba(30,122,70,.24);}
.badge.fer{color:#9A3B27;background:rgba(154,59,39,.08);border-color:rgba(154,59,39,.22);}
.hor{margin-top:14px;display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--ray-s);overflow:hidden;}
.hor__l{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;
  background:var(--papier);font-size:14px;}
.hor__l.on{background:rgba(185,138,38,.09);font-weight:600;}
.hor__l span{color:var(--gris);}
.hor__l.on span{color:var(--encre);}
.carte{position:relative;border-radius:var(--ray-l);overflow:hidden;border:1px solid var(--trait);
  background:var(--craie2);aspect-ratio:4/3;}
.carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:saturate(.72);}

/* ============================================================== 14. FAQ */
.faq__l{border-top:1px solid var(--trait);}
.faq__i{border-bottom:1px solid var(--trait);}
.faq__q{width:100%;display:flex;align-items:flex-start;gap:16px;text-align:left;
  padding:20px 0;font-family:'Jost',sans-serif;font-size:clamp(16.5px,4.2vw,19px);
  font-weight:500;letter-spacing:-.01em;line-height:1.4;transition:color .3s;}
.faq__q:hover{color:var(--or);}
.faq__pm{width:26px;height:26px;flex:none;margin-top:2px;position:relative;
  border-radius:999px;border:1px solid var(--trait);transition:.45s var(--tempo);}
.faq__pm::before,.faq__pm::after{content:"";position:absolute;left:50%;top:50%;
  background:currentColor;transform:translate(-50%,-50%);transition:.45s var(--tempo);}
.faq__pm::before{width:11px;height:1.5px;}
.faq__pm::after{width:1.5px;height:11px;}
.faq__i.on .faq__pm{background:var(--or-vif);border-color:transparent;color:#171106;
  transform:rotate(135deg);}
.faq__i.on .faq__pm::after{opacity:0;}
.faq__r{overflow:hidden;height:0;transition:height .5s var(--tempo);}
.faq__r > div{padding:0 42px 22px 0;font-size:15px;line-height:1.7;color:var(--gris);}

/* ========================================================= 15. LE PIED */
.pied{background:var(--encre);color:var(--craie);
  padding-block:clamp(52px,11vw,80px) calc(env(safe-area-inset-bottom,0px) + 96px);}
@media (min-width:760px){.pied{padding-bottom:clamp(40px,8vw,60px);}}
.pied__h{display:grid;gap:clamp(26px,6vw,44px);}
@media (min-width:760px){.pied__h{grid-template-columns:1.4fr 1fr 1fr;}}
.pied__lg{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.pied__lg img{width:54px;height:54px;max-width:none;}
.pied__lg b{font-family:'Jost',sans-serif;font-size:15px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;padding-left:.24em;}
.pied__d{font-size:14.2px;line-height:1.72;color:rgba(246,243,236,.6);max-width:42ch;}
.pied__ct{margin-top:18px;display:grid;gap:8px;font-size:14.4px;}
.pied__ct a{display:inline-flex;align-items:center;gap:9px;color:rgba(246,243,236,.82);
  transition:color .3s;}
.pied__ct a:hover{color:var(--or-clair);}
.pied__ti{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);margin-bottom:14px;}
.pied__n{display:grid;gap:9px;font-size:14.2px;}
.pied__n a{color:rgba(246,243,236,.66);transition:color .3s;}
.pied__n a:hover{color:var(--craie);}
.pied__bas{margin-top:clamp(34px,8vw,54px);padding-top:22px;
  border-top:1px solid var(--trait-nuit);display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;font-size:12.6px;color:rgba(246,243,236,.42);}
.pied__zn{margin-top:14px;font-size:12.6px;line-height:1.7;color:rgba(246,243,236,.38);}

/* ================================================= 16. BARRE D'ACTION BAS */
.bbas{position:fixed;left:0;right:0;bottom:0;z-index:700;
  display:flex;gap:9px;padding:9px clamp(10px,3.6vw,16px)
  calc(env(safe-area-inset-bottom,0px) + 9px);
  background:rgba(252,251,248,.86);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);
  border-top:1px solid var(--trait);
  transform:translateY(140%);transition:transform .55s var(--tempo);}
.bbas.on{transform:translateY(0);}
.bbas .act{flex:1;min-height:48px;font-size:14px;padding:0 14px;}
@media (min-width:760px){.bbas{display:none;}}

/* ============================================ 17. FEUILLE (fiche detail) */
.feuille{position:fixed;inset:0;z-index:950;display:flex;align-items:flex-end;
  justify-content:center;visibility:hidden;}
.feuille.on{visibility:visible;}
.feuille__v{position:absolute;inset:0;background:rgba(8,8,10,.62);opacity:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:opacity .5s var(--tempo);}
.feuille.on .feuille__v{opacity:1;}
.feuille__p{position:relative;width:min(660px,100%);max-height:92%;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--papier);border-radius:var(--ray-l) var(--ray-l) 0 0;
  transform:translateY(100%);transition:transform .6s var(--tempo);
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 26px);}
@media (min-width:660px){
  .feuille{align-items:center;}
  .feuille__p{border-radius:var(--ray-l);max-height:88%;}
}
.feuille.on .feuille__p{transform:translateY(0);}
.feuille__t{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;
  padding:16px clamp(18px,5vw,28px);background:rgba(252,251,248,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);}
.feuille__t h3{flex:1;font-size:19px;letter-spacing:-.015em;}
.feuille__x{width:36px;height:36px;border-radius:999px;border:1px solid var(--trait);
  display:grid;place-items:center;flex:none;}
.feuille__c{padding:clamp(18px,5vw,28px);}
/* La feuille en mode devis : la boite sombre occupe toute la largeur, on
   retire le rembourrage lateral pour qu'elle respire. */
.feuille--devis .feuille__p{width:min(720px,100%);}
.feuille--devis .feuille__c{padding:12px;}
.feuille--devis .dev__boite{max-width:none;box-shadow:none;}
#devisNid{display:none;}
.feuille__im{border-radius:var(--ray);overflow:hidden;margin-bottom:20px;aspect-ratio:16/10;}
.feuille__im img{width:100%;height:100%;object-fit:cover;}
.feuille__s{margin-top:22px;}
.feuille__s h4{font-family:'Jost',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gris);margin-bottom:10px;}
.feuille__ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;}
.feuille__ul li{position:relative;padding-left:20px;font-size:14.6px;line-height:1.6;}
.feuille__ul li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:2px;background:var(--or-vif);transform:rotate(45deg);}

/* ============================================================== divers -- */
.ancre{position:absolute;top:calc(var(--nav-h) * -1 - 10px);}
.ruban{overflow:hidden;border-block:1px solid var(--trait-nuit);
  padding-block:14px;background:var(--encre2);}
.ruban__p{display:flex;gap:38px;width:max-content;
  animation:rub 34s linear infinite;will-change:transform;}
.ruban__p span{font-family:'Jost',sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(246,243,236,.42);
  display:inline-flex;align-items:center;gap:38px;white-space:nowrap;}
.ruban__p span::after{content:"";width:5px;height:5px;border-radius:2px;
  background:var(--or);transform:rotate(45deg);flex:none;}
@keyframes rub{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .ruban__p,.voile__logo,.seq__inv i::after{animation:none!important;}
  .sec__mv{transform:none!important;opacity:1!important;filter:none!important;}
}