/* ============================================================
   Larks Solar — feuille de style
   Palette et typographie verrouillées sur le Brand Book officiel.
   Solar Navy 50 % · Clean White 25 % · Amber Energy 15 %
   Slate Grey 7 % · Sky Power 3 %

   Système de rayons : 8 px pour tout ce qui est interactif
   (imposé par le Brand Book), 16 px pour les surfaces.
   ============================================================ */

:root{
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --navy:#1A1A2E;
  /* Le Brand Book ne définit que cinq couleurs. Les surfaces surélevées et
     enfoncées sont donc des voiles de Clean White et de Solar Navy, pas des
     teintes inventées. */
  --lift:rgba(255,255,255,.045);
  --deep:#1A1A2E;          /* la profondeur vient du filet, pas d'une teinte hors palette */
  --amber:#F5A623;
  --amber-warm:#FFB944;
  --white:#FFFFFF;
  --slate:#4A5568;
  --sky:#3B82F6;

  --ink-dark:#F2F3F7;          /* texte sur navy */
  --dim-dark:#B3BACD;          /* relevé pour passer AA sur navy */
  --line-dark:rgba(255,255,255,.13);

  --ink-light:#1A1A2E;         /* texte sur blanc */
  --dim-light:#454F60;
  --line-light:rgba(26,26,46,.14);

  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  --max:1440px;
  --gut:clamp(20px,5vw,80px);
  --r:8px;                     /* rayon des éléments interactifs */
  --r-lg:16px;                 /* rayon des surfaces */
  --ease:cubic-bezier(.16,1,.3,1);

  --bar-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
/* Surtout PAS de scroll-behavior:smooth ici : le défilement inertiel anime
   déjà la position, et le navigateur amortirait une seconde fois par-dessus.
   Les deux se composent, la page traîne, et l'utilisateur croit qu'elle bloque.
   Le repli sans inertie demande le lissage explicitement, au cas par cas. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--navy);
  color:var(--ink-dark);
  font-family:var(--serif);
  font-size:16px;          /* Brand Book : corps 16 px, interligne 1.6 */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.sans{font-family:var(--sans);margin:0}
p{margin:0}

/* Toute cible d'ancre se pose sous la barre fixe, pas derrière elle. Vaut
   pour le défilement natif comme pour les liens du menu. */
[id]{scroll-margin-top:calc(var(--bar-h) + 24px)}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

/* lien d'évitement clavier */
.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--amber);color:var(--navy);
  font-family:var(--sans);font-weight:700;font-size:14px;
  padding:12px 18px;border-radius:0 0 var(--r) 0;text-decoration:none;
}
.skip:focus{left:0}

/* Tout ce qu'on atteint par ancre ou par Tab défilait sous la barre fixe
   de 72 px : le focus arrivait sur un élément invisible. Sur téléphone la
   barre d'actions en bas fait pareil. */
html{scroll-padding-top:calc(var(--bar-h) + 16px)}
@media (pointer:coarse){html{scroll-padding-bottom:96px}}
body.show-bar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* ---------- rideau de chargement ----------
   Il s'efface tout seul par animation CSS. Si le module JS échoue,
   la page reste consultable : rien n'est bloqué derrière le script. */
#loader{
  position:fixed;inset:0;z-index:1000;
  background:var(--navy);
  display:grid;place-items:center;
  animation:loaderOut .6s var(--ease) 1.5s forwards;
}
#loader.is-done{animation:loaderOut .45s var(--ease) forwards}
@keyframes loaderOut{to{opacity:0;visibility:hidden;pointer-events:none}}
#loader svg{
  position:absolute;inset:0;margin:auto;
  width:min(78vmin,560px);height:min(78vmin,560px);
  fill:none;
}
#loader .track{stroke:rgba(255,255,255,.08);stroke-width:2}
#loader .arc{
  stroke:var(--amber);stroke-width:2;
  stroke-dasharray:2168;stroke-dashoffset:2168;
  transform:rotate(-90deg);transform-origin:center;
  animation:arc 1.9s var(--ease) forwards;
}
@keyframes arc{to{stroke-dashoffset:250}}
.loader-word{position:relative;text-align:center}
.l-brand{
  display:block;font-family:var(--sans);font-weight:900;
  font-size:24px;letter-spacing:.34em;
  color:var(--white);text-indent:.34em;
}
.l-num{
  display:block;margin-top:14px;font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:.2em;color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.l-num i{font-style:normal}

/* Le contenu part légèrement voilé et se lève. Si le JS ne répond pas,
   l'animation CSS le révèle quand même. */
main,.topbar,.foot{animation:siteIn .4s var(--ease) 1.6s backwards}
body.is-ready main,body.is-ready .topbar,body.is-ready .foot{animation:siteIn .4s var(--ease) backwards}
@keyframes siteIn{from{opacity:0}to{opacity:1}}

main{position:relative;z-index:1}

/* ============================================================
   SCÈNES CINÉMATIQUES
   Chaque scène est une section haute dont la course de défilement
   pilote un mouvement réel : l'image recule, le voile se resserre,
   la copie se met en place. La hauteur est calibrée sur ce mouvement,
   jamais au-delà : pas un pixel de défilement mort.
   ============================================================ */

.scene{
  position:relative;
  --p:0;                        /* progression 0 → 1, écrite par app.js */
  background:var(--navy);
}
/* La course de chaque scène est calibrée sur la durée de son plan et sur la
   quantité de récit qu'elle porte : la technologie déroule cinq couches, la
   panne n'a qu'un bloc de texte. */
#sc-hero   {height:400vh}
#sc-techno {height:340vh}
#sc-install{height:300vh}
#sc-panne  {height:260vh}

.scene-stage{
  position:sticky;top:0;
  height:100svh;min-height:560px;
  overflow:hidden;
  display:grid;
}
.scene-media{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;
}

#sc-techno .scene-copy h2{font-size:clamp(24px,2.5vw,36px)}
#sc-techno .scene-copy .sub{margin-bottom:18px}

/* Le voile garantit la lisibilité de la copie et se densifie
   à mesure que la scène avance. */

.scene-veil{
  z-index:2;
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(95deg,
      rgba(16,16,33,.98) 0%,
      rgba(16,16,33,.95) 32%,
      rgba(16,16,33,.78) 50%,
      rgba(16,16,33,.34) 74%,
      rgba(16,16,33,.10) 100%),
    linear-gradient(180deg,
      rgba(16,16,33,.72) 0%, rgba(16,16,33,0) 24%,
      rgba(16,16,33,0) 62%, rgba(16,16,33,.80) 100%);
  opacity:calc(.94 + var(--p) * .06);
}
.scene-veil.deep{
  background:
    linear-gradient(95deg,
      rgba(10,10,22,.96) 0%,
      rgba(10,10,22,.90) 30%,
      rgba(10,10,22,.55) 58%,
      rgba(10,10,22,.14) 82%),
    linear-gradient(180deg,
      rgba(10,10,22,.62) 0%, rgba(10,10,22,0) 30%,
      rgba(10,10,22,0) 64%, rgba(10,10,22,.84) 100%);
}

/* La copie ne doit JAMAIS devenir un conteneur de défilement : une boîte
   scrollable posée au milieu d'une scène collante capte la molette et donne
   l'impression que la page est bloquée. On garantit plutôt qu'elle tient
   dans l'écran, en resserrant la composition sur les écrans peu hauts. */
.scene-copy{
  position:relative;z-index:3;
  /* « safe center » centre tant que ça rentre, et bascule en alignement haut
     dès que la copie dépasse la hauteur d'écran. Un centrage simple la fait
     déborder des deux côtés, et le titre passe sous la barre. */
  align-self:safe center;
  width:100%;
  padding:calc(var(--bar-h) + 20px) var(--gut) 72px;
}
.scene-copy .inner{max-width:600px;margin:0 auto 0 0}
.scene-copy .inner.narrow{max-width:660px}

/* Écrans peu hauts (portables 13 pouces, paysage sur mobile) : on resserre
   la scène la plus dense pour qu'elle continue de tenir sans rien couper. */
@media (max-height:940px){
  .scene-copy{padding-top:calc(var(--bar-h) + 10px);padding-bottom:40px}
  .scene-copy h2{font-size:clamp(24px,2.5vw,36px);margin-bottom:12px}
  .scene-copy .sub{margin-bottom:14px;font-size:16px}
  .scene-copy .lede{margin-top:18px;font-size:16px}
  .scene-copy .eyebrow{margin-bottom:16px}
  .scene-copy .actions{margin-top:24px}
  .scene-copy .layer-list{margin-top:16px}
  .scene-copy .layer-list li{padding:10px 0 10px 50px}
  .scene-copy .layer-list li::before{top:13px;font-size:14px}
  .scene-copy .layer-list b{font-size:14px;margin-bottom:2px}
  .scene-copy .layer-list span{font-size:14px;line-height:1.42}
  .scene-copy .steps{margin-top:22px;gap:16px}
  .scene-copy .big-quote{font-size:20px;margin-bottom:18px;padding-left:20px}
  #sc-hero h1{font-size:clamp(48px,4.6vw,64px)}
}

/* Sous 800 px de haut, plus aucune composition ne tient dans un écran sans
   rogner du texte. On abandonne alors la scène collante et on rend la section
   comme un bloc éditorial classique posé sur la photo : rien n'est coupé,
   rien n'est piégé, on perd seulement le mouvement de caméra. */
@media (max-height:800px){
  .scene{height:auto!important}
  .scene-stage{position:static;height:auto;min-height:0}
  .scene-copy{padding-top:96px;padding-bottom:96px}
  .scene-copy .inner{transform:none;opacity:1}
  .scene-media img{transform:none}
  .scene.has-video .poster,.scene.has-video video,
  .scene.has-video .scene-copy .inner,.ambiance{transform:none}
  .scene-frames{display:none}
}

@media (max-width:900px){
  #sc-hero{height:auto}
  #sc-techno{height:230vh}
  #sc-install{height:200vh}
  #sc-panne{height:180vh}
  .scene-copy .inner,.scene-copy .inner.narrow{max-width:none}
  .scene-veil,.scene-veil.deep{
    background:linear-gradient(180deg,
      rgba(16,16,33,.60) 0%, rgba(16,16,33,.88) 40%, rgba(16,16,33,.96) 100%);
  }
}


/* ============================================================
   HÉROS SCRUBÉ AU DÉFILEMENT
   Le film avance quand on descend, recule quand on remonte, et la page
   se pose exactement quand le plan arrive au repos. La hauteur se compte
   en distance de défilement, pas en secondes.
   ============================================================ */

/* Cinq secondes de macro : la cellule monocristalline et le reflet qui
   glisse. Le plan est contemplatif, pas un mouvement de vitesse — il
   supporte donc une densité plus lente, 71 vh par seconde, pour qu'on ait
   le temps de lire la grille des busbars. Le visiteur sait « solaire »
   dès la première image, ce que la plongée d'avant ne donnait qu'à la
   quinzième seconde. */
/* CONTINUITÉ — les cinq films ne sont plus cinq blocs.
   Chaque scène s'ouvre depuis le fond et s'y résorbe : entre deux plans il
   n'y a plus de coupe franche, seulement le même noir qui reprend la main.
   Le facteur 14 fait le fondu sur les 7 premiers et derniers pour cent du
   parcours de la scène, soit environ un quart d'écran. */
.scene.has-video .scene-media{
  opacity:clamp(0, min(calc(var(--p,0) * 30), calc((1 - var(--p,0)) * 14)), 1);
}
/* Le héros est déjà à l'écran au chargement : il ne peut pas naître du noir,
   il ne fait que s'y retirer. Sans cette exception, la page s'ouvrirait
   sur un écran vide. */
#sc-hero .scene-media{
  opacity:clamp(0, calc((1 - var(--p,0)) * 14), 1);
}

#sc-hero{height:360vh}
#sc-techno{height:320vh}
#sc-install{height:280vh}
#sc-panne{height:260vh}
@media (max-width:900px){#sc-hero{height:auto}}

.scene.has-video .scene-stage{
  position:sticky;top:0;height:100svh;min-height:520px;
  /* Grille, pas bloc : la copie du héros est en absolu, mais celle des trois
     autres scènes est dans le flux et a besoin de la grille pour se centrer.
     En bloc, elle se collait en haut et passait sous la barre. */
  display:grid;overflow:hidden;
}
.scene.has-video .scene-media{position:absolute;inset:0;z-index:0;background:var(--navy)}
/* L'affiche est une vraie image et non un fond CSS. Un fond ne se décline
   pas : le téléphone recevait le fichier de 1600 px et 206 Ko prévu pour le
   grand écran. En balise, le navigateur choisit la largeur et le format, et
   la même vue passe de 206 à 24 Ko. */
.scene.has-video .poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:opacity .5s var(--ease);
}
#sc-panne .poster{object-position:center 60%}
.scene.has-video video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity .4s var(--ease);
  transform:translateZ(0);          /* couche de composition dédiée */
}
.scene.video-ready video{opacity:1}

/* ---------- profondeur des scènes ----------
   Le passage aux plans vidéo avait fait tomber le mouvement de profondeur :
   les séquences d'images le portaient, le fichier vidéo ne l'a pas repris.
   Il revient ici, mais autrement. Le film fournit déjà son propre mouvement
   de caméra, alors la page n'ajoute pas un second zoom : elle décale
   seulement le plan de quelques centièmes d'écran dans le sens contraire de
   la copie. Le résultat se lit comme une vitre devant un décor, pas comme
   deux caméras qui se disputent la scène.

   L'échelle 1.08 n'est pas décorative : elle donne les 4 vh de débord qu'il
   faut pour que le décalage de 2,5 vh ne découvre jamais un bord. */
.scene.has-video .poster,
.scene.has-video video{
  transform:scale(1.08) translate3d(0,calc((var(--p,0) - .5) * -5vh),0);
  transform-origin:center 45%;
  will-change:transform;
}
.scene.has-video .scene-copy .inner{
  /* La copie avance pendant que le décor recule. Seize pixels en tout :
     assez pour que les deux plans se séparent, assez peu pour que le titre
     garde ses 96 px de dégagement sous la barre. */
  transform:translate3d(0,calc((var(--p,0) - .5) * -16px),0);
  will-change:transform;
}

.scene.video-ready .poster{opacity:0}
.scene.video-failed video{display:none}

.ring{
  position:absolute;right:24px;bottom:24px;z-index:4;
  width:34px;height:34px;color:var(--amber);
  opacity:.9;transition:opacity .4s var(--ease);
  transform:rotate(-90deg);
}
.scene.video-ready .ring,.scene.video-failed .ring{opacity:0}

/* 1 · le voile de base : aucune image n'est jamais brute derrière le texte */
.scene.has-video .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 34% 50%,
    rgba(16,16,33,.72) 0%, rgba(16,16,33,.52) 42%, rgba(16,16,33,.10) 100%);
}

/* les bandes de texte, superposées sur la scène collante */
/* La copie vit DANS la scène collante : en frère, elle se poserait sous la
   ligne de flottaison et le premier écran n'aurait aucun texte. */
.hero-copy{
  position:absolute;inset:0;z-index:3;
  pointer-events:none;
}
.band{
  position:absolute;top:0;left:0;right:0;height:100svh;
  display:flex;align-items:center;
  padding:0 var(--gut);
  opacity:0;
  text-shadow:var(--tshadow);
}
.band .inner{max-width:640px;margin:0 auto 0 0;position:relative;z-index:1}
.band a{pointer-events:auto}

/* 2 · le voile par bande : l'image ne s'assombrit que sous le texte allumé */
.band::before{
  content:"";position:absolute;inset:-4%;pointer-events:none;z-index:0;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 68% 58% at 30% 50%,
    rgba(5,5,10,.66) 0%, rgba(5,5,10,.44) 46%, rgba(5,5,10,0) 76%);
}
.band .btn{text-shadow:none}

/* l'assemblage des caractères, scrubé sur --k, réversible */
.band [data-split] .w{display:inline-block;white-space:nowrap}
.band [data-split] .c{
  display:inline-block;
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)));
}
.band .lede,.band .actions,.band .eyebrow{
  --kc:clamp(0,(var(--k,0) - .05)*2.4,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*18px));
}
.band .actions{--kc:clamp(0,(var(--k,0) - .28)*2.6,1)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Les cinq portes de l'affiche fixe, en CSS. Elles doivent être écrites au
   caractère près comme dans app.js, sinon un côté charge ce que l'autre cache.
   Ici elles garantissent surtout que le texte du héros est visible même si le
   script n'a pas encore tourné. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .band{opacity:1!important;position:relative;height:auto;padding-top:24px;padding-bottom:24px}
  .band [data-split] .c,.band .lede,.band .actions,.band .eyebrow{opacity:1!important;transform:none!important}
  .hero-copy{
    position:relative;height:auto;
    padding:calc(var(--bar-h) + 40px) 0 56px;
  }
  .band{padding-top:0;padding-bottom:0}
  .band:not(:first-child){padding-top:22px}
  .band::before{display:none}
  /* Les hauteurs de scrub (180 à 420 vh) n'ont de sens que si la boucle
     tourne. Ici elle ne tourne pas : sans ce rappel, chaque scène traînait
     un à trois écrans d'espace mort sous sa copie. Et les listes narratives
     s'allument par la boucle, donc elles restent pleines d'office. */
  .scene.has-video{height:auto!important}
  /* Sans scrub, --p reste à 0 : le fondu de continuité éteindrait toutes
     les scènes. Ici les affiches sont fixes, donc pleinement opaques. */
  .scene.has-video .scene-media{opacity:1!important}
  /* Spécificité 0,2,1 : la règle de base (opacity:.42) vit plus bas dans la
     feuille et gagnerait à égalité. */
  .scene-copy .layer-list li,.scene-copy .steps li{opacity:1}
  .scene.has-video .scene-stage{position:static;height:auto;min-height:0;display:block}
  .scene.has-video .scene-media{position:absolute;inset:0}
  .scene.has-video .scrim{
    background:linear-gradient(180deg,
      rgba(16,16,33,.86) 0%, rgba(16,16,33,.74) 42%, rgba(16,16,33,.92) 100%);
  }
  #sc-hero{height:auto}
  .scene.has-video video,.ring{display:none}
  .scene.has-video .poster{transform:none}
  .scene.has-video .scene-copy .inner{transform:none}
  /* La dérive du fond passe par une variable et non par « transform:none » :
     la règle de base est plus bas dans la feuille et gagnerait sur l'ordre.
     Sur téléphone la couche dérive de moitié, elle ne disparaît pas. */
  .ambiance{--amb:-3vh}
}

@media (prefers-reduced-motion:reduce){
  /* Même raison qu'au repli mobile : sans scrub, --p ne bouge pas. */
  .scene.has-video .scene-media{opacity:1!important}
  .band{opacity:1!important;position:relative;height:auto;padding-top:24px;padding-bottom:24px}
  .band [data-split] .c,.band .lede,.band .actions,.band .eyebrow{opacity:1!important;transform:none!important}
  .hero-copy{position:static;height:auto}
  .scene.has-video .scene-stage{position:static;height:auto}
  .scene.has-video .scene-media{position:absolute}
}

/* ---------- scène éclatée ----------
   Même moteur que les autres scènes vidéo. Seule spécificité : la copie
   garde la colonne de gauche, la vue éclatée vit à droite du cadre. */
/* Deux segments enchaînés, dix secondes de film : la hauteur suit, sinon le
   plan défile deux fois plus vite que le héros et perd sa gravité. */
#sc-eclate{height:560vh}
#sc-eclate .inner{max-width:560px;margin:0}
/* ---------- bouton du vent ---------- */
.vent{
  position:absolute;left:24px;bottom:24px;z-index:5;
  width:46px;height:46px;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;
  color:var(--white);background:rgba(16,16,33,.55);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .3s ease,background .3s ease,transform .12s var(--ease-out);
}
/* `hidden` ne fait rien contre un display d'auteur : le bouton restait
   affiché sur téléphone, où aucune vidéo ne joue, et chevauchait le
   bouton « Calculer mes économies ». Mesuré : hidden=true, display=grid. */
.vent[hidden]{display:none}
.vent svg{width:20px;height:20px}
.vent .ondes{opacity:.35;transition:opacity .3s ease}
.vent[aria-pressed="true"]{border-color:var(--amber)}
.vent[aria-pressed="true"] .ondes{opacity:1;color:var(--amber)}
.vent:hover{background:rgba(16,16,33,.75)}
.vent:active{transform:scale(.94)}
.vent:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- barre du haut ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:32px;
  height:var(--bar-h);
  padding:0 var(--gut);
  transition:height .35s var(--ease),background .35s ease,backdrop-filter .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent;
}
.topbar.compact{
  height:60px;
  background:rgba(16,16,33,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-dark);
}
.brand{display:flex;align-items:center}
/* Sans navigation (pages de texte), le bouton se pousse à droite tout seul. */
.topbar > .brand + .cta-top{margin-left:auto}
.brand img{height:24px;width:auto}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{
  display:inline-block;padding:5px 0;   /* cible de 32 px : WCAG 2.5.8 exige 24 */
  font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.03em;text-decoration:none;color:var(--ink-dark);
  opacity:.85;transition:opacity .25s,color .25s;
}
.nav a:hover,.nav a[aria-current="true"]{opacity:1;color:var(--amber)}
.cta-top{
  font-family:var(--sans);font-weight:700;font-size:14px;
  text-decoration:none;color:var(--ink-dark);
  background:transparent;border:1px solid rgba(255,255,255,.34);
  padding:10px 20px;border-radius:var(--r);white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.cta-top:hover{background:rgba(255,255,255,.08);border-color:var(--amber);color:var(--amber)}
/* Une fois le héros dépassé, l'ambre est libre : le bouton le reprend. */
.topbar.compact .cta-top{
  background:var(--amber);color:var(--navy);border-color:var(--amber);
}
.topbar.compact .cta-top:hover{background:var(--amber-warm);color:var(--navy)}
.cta-top:active{transform:translateY(1px)}

/* bouton menu mobile */
.burger{
  display:none;margin-left:auto;
  width:44px;height:44px;padding:0;
  background:none;border:1px solid var(--line-dark);border-radius:var(--r);
  cursor:pointer;position:relative;
}
.burger span{
  position:absolute;left:12px;right:12px;height:2px;background:var(--ink-dark);
  transition:transform .3s var(--ease),opacity .2s;
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.drawer{
  position:fixed;inset:var(--bar-h) 0 0;z-index:55;
  background:rgba(16,16,33,.98);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:32px var(--gut) 48px;
  display:flex;flex-direction:column;gap:4px;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .3s var(--ease),visibility .3s;
}
body.menu-open .drawer{opacity:1;transform:none;visibility:visible}
.drawer a{
  font-family:var(--sans);font-weight:700;font-size:20px;
  text-decoration:none;padding:16px 0;
  border-bottom:1px solid var(--line-dark);
}
.drawer .drawer-cta{
  margin-top:26px;border-bottom:none;
  background:var(--amber);color:var(--navy);
  text-align:center;border-radius:var(--r);font-size:16px;padding:16px 20px;
}
.drawer .drawer-tel{
  border-bottom:none;color:var(--amber);font-size:24px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}

@media (max-width:1000px){
  .nav{display:none}
  .topbar .cta-top{display:none}
  .burger{display:block}
}
@media (min-width:1001px){
  .drawer{display:none}
}

/* ---------- rythme des sections ---------- */
.beat{
  position:relative;
  padding:clamp(88px,11vh,140px) var(--gut);
  background:var(--navy);
}
.inner{width:100%;max-width:var(--max);margin:0 auto}
/* Un seul rail de gauche pour toute la page : les blocs étroits s'alignent
   sur la même gouttière que les blocs pleine largeur et que les scènes. */
.inner.narrow{max-width:760px;margin-left:0;margin-right:auto}

/* Anciennement blanc pur. Deux blocs blancs au milieu d'un parcours
   entièrement sombre lisaient comme deux pages collées : à 17 % et à 90 %
   du défilement, le visiteur sortait du film. La section reste « surélevée »,
   mais dans le même monde — un voile de blanc à 4,5 % sur le navy, pas une
   inversion de thème. La continuité prime sur le contraste de section. */
.beat.light{
  background-color:var(--navy);
  background-image:linear-gradient(180deg,var(--lift),rgba(255,255,255,.012));
  color:var(--ink-dark);
}
.beat.light .inner.narrow{max-width:820px}
.beat.light .sub,.beat.light p{color:var(--dim-dark)}

/* ---------- échelle typographique ---------- */
.section-label{
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);margin-bottom:18px;
}
/* Seule exception documentée à l'échelle fixe du Brand Book : le H1 du héro
   est un display fluide, pour tenir la règle « titre ≥ 3,5× le corps ».
   Il retombe à 48 px, la valeur du Brand Book, sur les écrans étroits. */
h1{
  font-weight:900;
  font-size:clamp(48px,5vw,72px);
  line-height:1.1;letter-spacing:-.03em;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--amber);display:inline-block}
h2{
  font-weight:900;
  font-size:clamp(24px,2.5vw,36px);
  line-height:1.08;letter-spacing:-.022em;
  text-wrap:balance;margin-bottom:20px;
}
h2 em{font-style:normal;color:var(--amber)}
h3{font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.01em;margin-bottom:10px}
.lede{
  margin-top:24px;max-width:46ch;
  font-size:20px;color:var(--ink-dark);line-height:1.5;   /* H4 du Brand Book */
}
.sub{max-width:58ch;color:var(--dim-dark);margin-bottom:32px}
.beat.light .sub{color:var(--dim-dark)}

/* La surligne se cassait au hasard selon la largeur (deux lignes sur
   desktop, trois sur téléphone). Deux lignes décidées : la catégorie en
   encre pleine, le territoire en retrait. */
.eyebrow-cat,.eyebrow-geo{display:block}
.eyebrow-cat{color:var(--ink-dark)}
.eyebrow-geo{margin-top:3px;text-wrap:balance}  /* sur téléphone, évite « Montréal » seul en bout de ligne */
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim-dark);
  margin-bottom:24px;
}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{
  display:inline-block;font-family:var(--sans);font-weight:700;font-size:16px;
  text-decoration:none;color:var(--navy);background:var(--amber);
  padding:16px 28px;border:1px solid var(--amber);border-radius:var(--r);
  white-space:nowrap;
  transition:background .25s,transform .12s,box-shadow .25s;
}
.btn:hover{background:var(--amber-warm);box-shadow:0 12px 30px -12px rgba(245,166,35,.55)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:rgba(255,255,255,.04);color:var(--ink-dark);
  border-color:rgba(255,255,255,.28);
}
.btn.ghost:hover{background:rgba(255,255,255,.1);border-color:var(--amber);color:var(--amber);box-shadow:none}


/* Relance de fin de section : centrée, détachée du contenu qui la précède. */
.beat-cta{margin:clamp(28px,4vw,48px) 0 0;text-align:center}

/* Petits écrans : les boutons prennent la pleine largeur plutôt que
   de déborder de la gouttière. */
@media (max-width:460px){
  .actions{gap:10px}
  /* white-space:nowrap + width:100 % débordait du cadre à 320 px (zoom 400 %). */
  .btn{white-space:normal;text-align:center}
  .actions .btn{width:100%;padding:15px 18px}
  .form .btn{width:100%;text-align:center}
  h1{font-size:clamp(40px,10vw,48px)}
  .btn{font-size:14px}
}

/* ---------- preuves ---------- */
.proof-grid{
  list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-dark);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);overflow:hidden;
}
@media (max-width:560px){.proof-grid{grid-template-columns:1fr}}
.proof-grid li{background:var(--navy);padding:24px 26px}
.proof-grid b{
  display:block;font-family:var(--sans);font-weight:900;font-size:24px;
  color:var(--amber);letter-spacing:-.02em;line-height:1;
}
.proof-grid span{
  display:block;margin-top:8px;font-family:var(--sans);font-weight:600;
  font-size:12px;color:var(--ink-dark);font-variant-numeric:tabular-nums;
}
.proof-grid i{display:block;margin-top:8px;font-style:normal;font-size:14px;color:var(--dim-dark);line-height:1.45}

/* ---------- cartes de solutions ----------
   Rythme asymétrique : la première carte occupe la pleine largeur
   sur grand écran, les deux autres se partagent la ligne du dessous. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:44px}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .card.lead{grid-column:1 / -1;flex-direction:row;align-items:flex-start;gap:40px}
  .card.lead .card-head{flex:1 1 42%}
  .card.lead .card-body{flex:1 1 58%}
  .card.lead .for{margin-top:20px}
}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
/* Les cartes vivaient en blanc parce que leur section l'était. La section
   ayant rejoint le continuum sombre, une carte blanche redeviendrait la
   coupure qu'on vient de supprimer — en plus petit. L'élévation passe donc
   par un voile, comme le veut la note de palette plus haut. */
.card{
  background-color:var(--navy);
  background-image:linear-gradient(180deg,var(--lift),rgba(255,255,255,.015));
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:30px;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(245,166,35,.55);
  box-shadow:0 20px 44px -24px rgba(5,5,10,.7);
}
.card p{font-size:16px;color:var(--dim-dark)}
.card .card-body p{margin-bottom:20px}
.card .for{
  margin-top:auto;padding-top:16px;border-top:1px solid var(--line-dark);
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--slate);
}



/* ---------- couche d'ambiance ----------
   Le Brand Book propose un motif « panneau et rayons » en fond de section.
   Tuilé derrière du corps de texte, un motif littéral se lit comme du papier
   peint : il ajoute du bruit, pas de la matière, et aucune opacité ne le
   sauve. On garde donc son intention, donner de la présence aux fonds, avec
   ce qui la sert vraiment : un halo ambré unique et fixe derrière toute la
   page, plus un grain fin. La page devient un lieu traversé, au lieu d'une
   pile de sections.
   Écart au Brand Book assumé, et documenté ici plutôt que caché. */
.ambiance{
  /* Débordement vertical volontaire : la couche dérive de 6 vh au fil de la
     page, le débord évite qu'un bord de dégradé n'entre dans le cadre. */
  position:fixed;inset:-8vh 0;z-index:0;pointer-events:none;
  transform:translate3d(0,calc(var(--sp,0) * var(--amb,-6vh)),0);
  will-change:transform;
  background:
    radial-gradient(ellipse 90% 60% at 78% 8%,  rgba(245,166,35,.11) 0%, rgba(245,166,35,0) 62%),
    radial-gradient(ellipse 70% 55% at 12% 92%, rgba(59,130,246,.07) 0%, rgba(59,130,246,0) 60%);
}
.ambiance::after{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,<svg xmlns='http%3A//www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url%28%23g%29' opacity='0.5'/></svg>");
  background-size:160px 160px;
  opacity:.035;mix-blend-mode:overlay;
}
/* La barre garde son propre niveau : lui imposer z-index 1 la ferait
   passer sous le menu et sous la barre d'action. */
main,.foot{position:relative;z-index:1}

/* Le calculateur garde sa chaleur, mais elle vient de sa propre lueur
   pilotée par le curseur, pas d'un motif plaqué. */
.calc{position:relative;overflow:hidden}
.calc::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 82% 0%,
    rgba(245,166,35,calc(.05 + var(--charge,0) * .10)) 0%, rgba(245,166,35,0) 68%);
}
.calc > *{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){.ambiance::after{display:none}}

/* ---------- iconographie ----------
   Brand Book 3.5 : contour, trait 2 px, coins 2 px, 24×24 minimum.
   La couleur vient de currentColor, donc l'icône suit toujours son texte :
   Solar Navy sur fond clair, Clean White sur fond sombre. */
.ico{
  width:24px;height:24px;flex:none;
  vertical-align:-4px;margin-right:10px;
  color:currentColor;      /* Brand Book : navy sur clair, blanc sur sombre */
  opacity:.75;
}
.ico-lg{width:32px;height:32px;vertical-align:-5px;margin-right:14px}
h3 .ico{opacity:.55}
.proof-grid li{position:relative;padding-left:26px}
.proof-grid .ico{position:absolute;left:26px;top:25px;margin:0;width:22px;height:22px;color:var(--ink-dark);opacity:.62}
.proof-grid li{padding:24px 26px 24px 60px}
.proof-grid b{margin-top:0}

/* ---------- image des cartes ----------
   Mécanisme 7 de la barre : aucune carte n'est un aplat de texte. */
.card{padding:0;overflow:hidden}
.card-img{
  width:100%;height:200px;object-fit:cover;display:block;
  background:rgba(26,26,46,.06);
}
.card > .card-body,.card > .for{padding-left:30px;padding-right:30px}
.card > .card-body{padding-top:24px}
.card > .for{padding-bottom:26px;margin-left:0;margin-right:0}
/* La carte maîtresse : image à gauche pleine hauteur, texte à droite,
   les deux colonnes s'alignent en haut et le bloc n'a aucun vide. */
.card.lead{padding:0;flex-direction:column}
.card.lead .lead-media{display:block;overflow:hidden}
/* Les photos produit ont un fond studio clair : dans un parcours entièrement
   sombre, elles flashent. Le voile est en « multiply », donc il n'agit que
   sur les zones claires — les intérieurs déjà sombres restent intacts,
   le blanc studio descend vers le navy. */
.card picture,.card .lead-media{position:relative}
.card picture::after,.card .lead-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--navy);mix-blend-mode:multiply;opacity:.42;
}
.card.lead .lead-img{width:100%;height:100%;object-fit:cover;display:block}
.card.lead .lead-text{padding:26px 30px 28px;display:flex;flex-direction:column;flex:1}
.card.lead .lead-text .for{margin-top:auto;padding-top:18px;border-top:1px solid var(--line-dark)}
@media (min-width:1000px){
  .card.lead{display:grid;grid-template-columns:44% 1fr;align-items:stretch}
  .card.lead .lead-media{height:100%}
  .card.lead .lead-img{min-height:300px}
  .card.lead .lead-text{padding:32px 36px 32px 34px;justify-content:center}
}
@media (max-width:760px){.card-img{height:180px}.card.lead .lead-img{min-height:180px;height:180px}}

/* ---------- les cinq couches ----------
   La couche active s'éclaire au fil du défilement de la scène. */
.layer-list{list-style:none;counter-reset:l;margin:22px 0 0;padding:0}
.layer-list li{
  counter-increment:l;position:relative;
  padding:12px 0 12px 54px;
  border-bottom:1px solid var(--line-dark);
  transition:opacity .45s ease;
  opacity:.42;
}
.layer-list li:last-child{border-bottom:none}
.layer-list li.on{opacity:1}
.layer-list li::before{
  content:counter(l,decimal-leading-zero);
  position:absolute;left:0;top:15px;
  font-family:var(--sans);font-weight:900;font-size:14px;
  color:var(--amber);font-variant-numeric:tabular-nums;
}
.layer-list li::after{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--amber);
  /* Tracé par transformation et non par largeur : animer la largeur remet
     en page à chaque image, une échelle reste sur la couche de composition. */
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s var(--ease);
}
.layer-list li.on::after{transform:scaleX(1)}
.layer-list b{display:block;font-family:var(--sans);font-weight:700;font-size:16px;margin-bottom:3px}
.layer-list span{display:block;color:var(--dim-dark);font-size:14px;line-height:1.5;max-width:54ch}

/* ---------- processus ---------- */
.steps{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px}
.steps li{position:relative;padding-top:24px;border-top:2px solid rgba(245,166,35,.35)}
.steps li.on{border-top-color:var(--amber)}
.steps span{
  position:absolute;top:-11px;left:0;
  padding-right:12px;background:var(--navy);
  font-family:var(--sans);font-weight:900;font-size:12px;color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.steps h3{font-size:16px;color:var(--ink-dark)}
.steps p{font-size:14px;color:var(--dim-dark)}

/* ---------- témoignages ---------- */
.quotes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:30px;margin-top:44px;
}
.quote{
  margin:0;
  background:var(--lift);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;
}
.quote blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--ink-dark)}
.quote figcaption{
  margin-top:auto;padding-top:20px;
  font-family:var(--sans);font-size:12px;color:var(--dim-dark);
}
.quote figcaption b{display:block;font-weight:700;font-size:14px;color:var(--ink-dark);margin-bottom:2px}
.stat-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;margin-top:22px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
}
.stat{background:var(--navy);padding:22px 20px}
.stat b{
  display:block;font-family:var(--sans);font-weight:900;
  font-size:36px;line-height:1;color:var(--amber);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--dim-dark);line-height:1.4}

/* ---------- calculateur ---------- */
.calc{
  --charge:0;
  position:relative;
  background:var(--lift);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);
  padding:34px clamp(22px,3.4vw,40px);
  box-shadow:0 0 calc(var(--charge) * 70px) calc(var(--charge) * -18px) rgba(245,166,35,.45);
  transition:box-shadow .4s ease,border-color .4s ease;
  border-color:color-mix(in srgb, var(--amber) calc(var(--charge) * 46%), rgba(255,255,255,.13));
}
.calc > label{
  display:block;font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim-dark);margin-bottom:18px;
}
.slider-row{display:flex;align-items:center;gap:22px}
/* La zone de toucher du curseur faisait 4 px de haut : hors du pouce, la
   piste était intouchable. L'input fait 28 px, la piste est dessinée dedans
   et son remplissage passe par une variable que le script met à jour. */
#bill{
  flex:1;appearance:none;-webkit-appearance:none;height:28px;background:transparent;
  --fill:30%;outline-offset:6px;cursor:pointer;
}
#bill::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) var(--fill),rgba(255,255,255,.18) var(--fill));
}
#bill::-moz-range-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) 0%,var(--amber) var(--fill),rgba(255,255,255,.18) var(--fill));
}
#bill::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-10px;
  background:var(--amber);border:3px solid #1A1A2E;
  box-shadow:0 0 0 1px var(--amber),0 6px 18px -6px rgba(245,166,35,.9);
  cursor:pointer;
}
#bill::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;background:var(--amber);
  border:3px solid #1A1A2E;cursor:pointer;
}
#bill-out{
  font-family:var(--sans);font-weight:900;font-size:24px;
  color:var(--white);font-variant-numeric:tabular-nums;min-width:112px;text-align:right;
}
.results{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  margin-top:30px;background:var(--line-dark);
  border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden;
}
@media (max-width:520px){.results{grid-template-columns:1fr}}
.res{background:var(--navy);padding:22px 20px}
.res.pin{background:rgba(245,166,35,.07)}
/* La subvention est le chiffre qui change tout : elle a droit à son propre
   traitement, pleine largeur, au-dessus des deux colonnes. */
/* Nom distinct de la classe .sub des sous-titres, qui impose un max-width
   et écrasait la largeur de la cellule. */
.res.aide{grid-column:1 / -1;background:rgba(245,166,35,.12);max-width:none}
.res.aide b{font-size:clamp(28px,3vw,36px)}
/* Le voile ambre éclaircit le fond de cette tuile : --dim-dark n'y tenait que
   4,23:1, sous le seuil AA de 4,5. L'encre pleine y rétablit 8,9:1. */
.res.aide span{color:var(--ink-dark)}
.res b{
  display:block;font-family:var(--sans);font-weight:900;
  font-size:24px;line-height:1.05;
  color:var(--amber);font-variant-numeric:tabular-nums;letter-spacing:-.025em;
}
.res span{display:block;margin-top:9px;font-size:14px;color:var(--dim-dark);line-height:1.4}
.disclaimer{margin-top:22px;font-size:14px;color:var(--dim-dark);opacity:.85;max-width:62ch}
#calc-cta{margin-top:22px}

/* ---------- autonomie ---------- */
.big-quote{
  font-size:24px;line-height:1.45;
  color:var(--ink-dark);max-width:30ch;
  border-left:2px solid var(--amber);padding-left:24px;margin:8px 0 26px;
}

/* ---------- questions ---------- */
@media (min-width:1000px){
  /* La moitié droite était vide. L'intitulé tient la colonne de gauche et
     suit le défilement pendant qu'on parcourt les questions. */
  #questions .inner.narrow{max-width:var(--max);display:grid;grid-template-columns:36% 1fr;column-gap:64px;row-gap:0;align-items:start}
  #questions h2{position:sticky;top:calc(var(--bar-h) + 40px);margin-bottom:0}
  #questions .faq{grid-column:2;margin-top:0}
}
.faq{margin-top:34px;border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.35;
  /* Était --ink-light : encre sombre sur fond désormais sombre, soit un
     contraste de 1:1. La question était purement invisible. */
  color:var(--ink-dark);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:32px;
  width:12px;height:12px;
  border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--slate)}
.faq p{padding:0 0 26px;color:var(--dim-dark);max-width:62ch;font-size:16px}
.faq b{color:var(--ink-dark);font-weight:600}

/* ---------- formulaire ---------- */
.form{display:grid;gap:18px;margin-top:34px;max-width:640px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.form .row{grid-template-columns:1fr}}
.form label{
  display:grid;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim-dark);
}
.form input,.form select{
  font-family:var(--serif);font-size:16px;color:var(--ink-dark);
  background:var(--lift);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r);padding:14px 16px;width:100%;
  transition:border-color .25s,background .25s;
}
.form input::placeholder{color:rgba(242,243,247,.5)}
/* outline:none retirait l'anneau de focus : il ne restait qu'un changement
   de bordure d'un pixel, invisible au clavier. L'anneau global reprend. */
.form input:focus,.form select:focus{border-color:var(--amber);background:var(--deep)}
/* Écrit après toute règle input{outline:none} : l'anneau au clavier gagne. */
.form input:focus-visible,.form select:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.form input[readonly]{opacity:.75;cursor:default}
.form input[aria-invalid="true"]{border-color:#FF6B70}
.form select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--amber) 50%),linear-gradient(135deg,var(--amber) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form .field-err{
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:none;color:#FF9B9F;min-height:0;
}
.form .btn{justify-self:start;cursor:pointer;font-size:14px;border:1px solid var(--amber)}
.form .btn[disabled]{opacity:.6;cursor:progress}
.form-note{font-size:14px;min-height:1.4em}
.form-note.ok{color:var(--amber)}
.form-note.err{color:#FF9B9F}
.consent{
  font-family:var(--serif);font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--dim-dark);max-width:56ch;
}

@media (min-width:1000px){
  /* Le bloc « parler à quelqu'un » remonte à côté du formulaire : il comble
     le vide de droite et met le téléphone à hauteur d'œil au lieu de
     l'enterrer sous le bouton d'envoi. */
  .beat.contact .inner.narrow{max-width:var(--max);display:grid;grid-template-columns:1fr 360px;column-gap:72px;row-gap:0;align-items:start}
  .beat.contact .section-label,.beat.contact h2,.beat.contact .sub{grid-column:1 / -1}
  .beat.contact .form{margin-top:8px}
  .beat.contact .direct{
    margin-top:8px;padding:28px 30px;border-top:none;
    border:1px solid var(--line-dark);border-radius:var(--r-lg);
    background:rgba(255,255,255,.03);
  }
}
.direct{margin-top:44px;padding-top:30px;border-top:1px solid var(--line-dark)}
.direct p{color:var(--dim-dark);font-size:14px}
.tel{
  display:inline-block;margin:12px 20px 0 0;
  font-family:var(--sans);font-weight:900;font-size:36px;
  color:var(--amber);text-decoration:none;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tel:hover{color:var(--amber-warm)}
.mail{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;
  color:var(--ink-dark);text-decoration:none;border-bottom:1px solid var(--line-dark);
}
.mail:hover{color:var(--amber);border-color:var(--amber)}
.hours{margin-top:16px;font-size:14px;color:var(--dim-dark);opacity:.85}

/* ---------- cibles tactiles ----------
   Au doigt, tout ce qui se clique fait au moins 44 px de haut. On agrandit la
   zone sensible sans toucher à la mise en page : les liens de texte gardent
   leur taille visuelle et gagnent une zone cliquable par pseudo-élément. */
@media (pointer:coarse){
  .btn,.cta-top,.drawer a,.actionbar a{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .brand{min-height:44px;display:inline-flex;align-items:center}
  /* Les liens empilés du pied de page : on écarte les lignes pour que chaque
     lien ait sa bande de 44 px, plutôt que de gonfler des zones qui se
     chevaucheraient et provoqueraient des taps sur le mauvais lien. */
  .foot p{line-height:1.4}
  .foot p a{display:inline-flex;align-items:center;min-height:44px}
  .direct .mail{min-height:44px;display:inline-flex;align-items:center}
  /* le curseur du calculateur : 4 px de piste, mais 44 px de prise */
  .slider-row{padding:20px 0}
  #bill{height:32px}
  #bill::-webkit-slider-thumb{margin-top:-12px}
  #bill::-webkit-slider-thumb{width:28px;height:28px}
  #bill::-moz-range-thumb{width:26px;height:26px}
}

/* ---------- barre d'action mobile ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:58;
  display:none;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(16,16,33,.96);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-dark);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
body.show-bar .actionbar{transform:none}
.actionbar a{
  flex:1;text-align:center;text-decoration:none;
  font-family:var(--sans);font-weight:700;font-size:14px;
  padding:14px 10px;border-radius:var(--r);
}
.actionbar .ab-call{background:rgba(255,255,255,.07);color:var(--ink-dark);border:1px solid rgba(255,255,255,.2)}
.actionbar .ab-quote{background:var(--amber);color:var(--navy)}
@media (max-width:1000px){
  .actionbar{display:flex}
  body{padding-bottom:0}
  .beat.contact{padding-bottom:120px}
}
body.menu-open .actionbar{transform:translateY(110%)}

/* ---------- pages de texte : confidentialité, conditions, 404 ---------- */
.page-texte{padding-top:0}
.page-texte main.beat{padding-top:calc(var(--bar-h) + 72px);min-height:70vh}
.page-titre{font-weight:900;font-size:clamp(28px,3vw,36px);line-height:1.2;letter-spacing:-.02em;margin-bottom:16px}
.page-texte h2{font-size:20px;margin-top:36px;margin-bottom:10px}
.page-texte p{margin-bottom:14px;max-width:64ch;color:var(--dim-dark)}
.page-texte p a{color:var(--ink-dark);border-bottom:1px solid var(--line-dark)}
.page-texte p a:hover{color:var(--amber);border-color:var(--amber)}
.avis{
  margin-top:36px;padding:18px 20px;
  border:1px solid rgba(245,166,35,.34);border-radius:var(--r-lg);
  background:rgba(245,166,35,.06);color:var(--ink-dark);font-size:14px;
}
.avis b{color:var(--amber)}
.foot-lic{margin-top:12px;font-size:14px;opacity:.8}
.copy a{margin-left:18px;border-bottom:1px solid transparent}
.copy a:hover{color:var(--amber);border-color:var(--amber)}
@media (max-width:560px){.copy a{display:inline-block;margin:8px 18px 0 0}}

/* ---------- pied de page ---------- */
.foot{
  position:relative;z-index:1;
  background:var(--deep);border-top:1px solid var(--line-dark);
  padding:60px var(--gut) 40px;
}
.foot .inner{max-width:var(--max)}
/* Trois blocs au lieu du mur de liens en quatre colonnes. */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot-logo{height:22px;width:auto;margin-bottom:14px}
.tagline{font-size:16px;color:var(--amber)}
/* Le pied de page portait des h4 après un h2 : un rang sauté, que le lecteur
   d'écran signale comme une hiérarchie cassée. Ce sont des titres de section
   du pied, donc des h2, et l'apparence tient à la classe. */
.foot h4,.foot .foot-h{
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim-dark);margin-bottom:12px;
}
.foot p{font-size:14px;color:var(--dim-dark);line-height:1.75}
.foot a{text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot a:hover{color:var(--amber);border-color:var(--amber)}
.copy{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line-dark);
  font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.04em;color:var(--dim-dark);opacity:.8;
}
@media (max-width:1000px){.foot{padding-bottom:110px}}


/* ============================================================
   SYSTÈME DE MOUVEMENT
   Règle de conduite : une à deux choses bougent par écran, jamais tout.
   Uniquement transform et opacity. Rien au-dessus de 0,4 s. Toute boucle
   se met en pause quand l'onglet passe en arrière-plan.
   ============================================================ */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* --- 1 · entrées en cascade -------------------------------------------
   Chaque groupe arrive en séquence plutôt qu'en bloc. Le délai est porté
   par une variable d'index, écrite une seule fois au chargement. */
.reveal{
  opacity:0;
  transform:translate3d(0,20px,0);
  transition:opacity .42s var(--ease-out), transform .42s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.reveal.in{opacity:1;transform:none}
/* Une fois entré, on retire le délai : sinon chaque survol traîne. */
.reveal.settled{transition-delay:0ms}

/* --- 2 · personnalité d'entrée par famille ---------------------------- */
.card.reveal{transform:translate3d(0,28px,0) scale(.985)}
.card.reveal.in{transform:none}
.quote.reveal{transform:translate3d(0,24px,0) rotate(-.4deg)}
.quote.reveal.in{transform:none}
.stat.reveal{transform:translate3d(0,16px,0)}
.proof-grid li.reveal{transform:translate3d(-14px,0,0)}
.proof-grid li.reveal.in{transform:none}

/* --- 3 · les icônes se tracent -----------------------------------------
   Le jeu du Brand Book est en trait : on peut le dessiner à l'entrée. */
.ico [stroke],.ico path,.ico circle,.ico rect{
  stroke-dasharray:var(--len,120);
  stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset .7s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms + 120ms);
}
.reveal.in .ico [stroke],.reveal.in .ico path,
.reveal.in .ico circle,.reveal.in .ico rect,
.in > .ico path,.in > .ico circle,.in > .ico rect{stroke-dashoffset:0}

/* --- 4 · jauge de progression du défilement ---------------------------- */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:70;
  width:100%;transform-origin:0 50%;
  transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,var(--amber),var(--amber-warm));
  pointer-events:none;
  opacity:0;transition:opacity .3s ease;
}
body.show-bar .progress{opacity:1}

/* --- 5 · projecteur sur les cartes ------------------------------------
   La bordure s'éclaire là où le curseur passe. Pointeur fin seulement :
   au doigt, il n'y a pas de survol. */
@media (hover:hover) and (pointer:fine){
  .card,.quote{position:relative}
  .card::after,.quote::after{
    content:"";position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;transition:opacity .3s ease;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
      rgba(245,166,35,.16), transparent 62%);
  }
  .card:hover::after,.quote:hover::after{opacity:1}
}

/* --- 6 · une vie discrète par section, en pause si l'onglet est masqué -- */
@keyframes respire{0%,100%{opacity:.5}50%{opacity:1}}
.pouls{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);margin-right:10px;vertical-align:2px;
  animation:respire 4.5s ease-in-out -1.2s infinite;
}
body.paused *,body.paused *::before,body.paused *::after{
  animation-play-state:paused!important;
}

/* --- 7 · retour tactile ------------------------------------------------ */
.btn,.cta-top,.card,.actionbar a{transition-timing-function:var(--ease-out)}
.btn:active,.cta-top:active,.actionbar a:active{transform:translateY(1px) scale(.985)}

@media (prefers-reduced-motion:reduce){
  .reveal,.card.reveal,.quote.reveal,.stat.reveal,.proof-grid li.reveal{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  .ico [stroke],.ico path,.ico circle,.ico rect{stroke-dashoffset:0!important}
  .progress{display:none}
  .pouls{animation:none}
}


/* ================================================================
   PLATEAU ET PLAQUE

   Une carte posée à plat sur le fond a l'air d'un rectangle. La même
   carte assise dans un plateau a l'air d'un objet. C'est la différence
   entre une vignette et une pièce d'équipement, et pour un installateur
   de panneaux c'est le bon registre : ce qu'il vend est du matériel
   monté dans un cadre d'aluminium.

   Le plateau est dessiné à l'ombre portée et non par un élément
   supplémentaire. Trois raisons, toutes vérifiées :
   - l'étalement d'une ombre suit le rayon de la boîte et l'agrandit
     d'autant, donc les deux courbes sont concentriques sans calcul ;
   - une ombre portée se peint hors de la boîte et échappe au
     « overflow:hidden » qui découpe les images des cartes, ce qu'un
     pseudo-élément ne fait pas ;
   - aucune boîte ajoutée, donc aucun décalage de mise en page.
   ================================================================ */
.card,.quote,.results{
  --plateau:6px;
  --lueur:inset 0 1px 0 rgba(255,255,255,.5);
}
.card{
  box-shadow:
    0 0 0 var(--plateau) rgba(26,26,46,.045),
    0 0 0 calc(var(--plateau) + 1px) rgba(26,26,46,.085),
    var(--lueur);
}
.quote,.results{
  --lueur:inset 0 1px 0 rgba(255,255,255,.07);
  box-shadow:
    0 0 0 var(--plateau) rgba(255,255,255,.04),
    0 0 0 calc(var(--plateau) + 1px) rgba(255,255,255,.09),
    var(--lueur);
}
/* Au survol, la plaque monte dans son plateau : c'est le plateau qui
   s'éclaircit, pas la carte qui grossit. */
.card:hover{
  box-shadow:
    0 0 0 var(--plateau) rgba(26,26,46,.075),
    0 0 0 calc(var(--plateau) + 1px) rgba(245,166,35,.45),
    0 18px 40px -24px rgba(26,26,46,.5),
    var(--lueur);
}
.quote:hover{
  box-shadow:
    0 0 0 var(--plateau) rgba(255,255,255,.07),
    0 0 0 calc(var(--plateau) + 1px) rgba(245,166,35,.4),
    var(--lueur);
}
.quote{transition:box-shadow .4s var(--ease),transform .4s var(--ease)}

/* ---------- pastille des appels à l'action ----------
   La flèche ne flotte jamais nue à côté du texte : elle a son propre
   disque, calé sur le bord intérieur du bouton. Au survol elle part en
   diagonale, ce qui met le bouton sous tension sans le déformer. */
.btn.go,.cta-top.go{display:inline-flex;align-items:center;gap:12px}
.btn.go{padding-right:8px}
.cta-top.go{padding-right:7px}
.pip{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;flex:0 0 auto;
  font-size:15px;line-height:1;
  background:rgba(26,26,46,.12);
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.cta-top .pip{width:26px;height:26px;font-size:13px;background:rgba(255,255,255,.16)}
.btn.ghost .pip{background:rgba(255,255,255,.14)}
.btn.go:hover .pip,.cta-top.go:hover .pip{transform:translate(2px,-2px) scale(1.06)}
.cta-top.go:hover .pip{background:rgba(26,26,46,.14)}

/* ---------- étiquette de section ----------
   L'œil doit savoir en un coup d'œil qu'il s'agit d'un repère et non
   d'une phrase. La pastille le dit mieux que les majuscules seules. */
/* Le contour, pas la couleur : la règle des deux ambres par écran est déjà
   dépensée par le chiffre et le bouton. L'étiquette prend donc sa précision
   de sa forme, et laisse l'accent aux éléments qui le méritent. */
.eyebrow,.section-label{
  display:inline-block;
  padding:5px 13px 6px;
  border:1px solid var(--line-dark);border-radius:999px;
}
/* L'étiquette rend son ambre. Le contrôle de la barre est de deux éléments
   ambre par écran : sur la scène technologie il y en avait quatre, l'étiquette,
   les chiffres, les soulignements et le bouton. Chiffres et soulignements sont
   un seul système, alors c'est l'étiquette qui cède. Elle ne perd rien : sa
   forme dit déjà qu'elle est un repère, et l'ambre retrouve son sens, la chose
   qu'on explique et la chose sur laquelle on clique. */
.section-label{color:var(--dim-dark)}
.beat.light .section-label{color:var(--dim-dark)}
.beat.light .eyebrow,.beat.light .section-label{border-color:var(--line-dark)}

/* Le bouton de la barre est masqué sous 1000 px par une règle plus haut dans
   la feuille. Poser « display:inline-flex » sur .cta-top.go la battait à
   égalité de spécificité et le faisait réapparaître sur téléphone, où il
   écrasait le menu. On le remasque ici, explicitement : l'appel à l'action
   reste de toute façon en bas de l'écran en permanence. */
@media (max-width:1000px){
  .topbar .cta-top.go{display:none}
}
/* Une étiquette qui passe à la ligne dans une pastille aux bouts ronds a
   l'air cassée : le second rang est court et flotte. Sous 600 px on resserre
   l'interlettrage et on adoucit le rayon, la forme redevient volontaire. */
@media (max-width:600px){
  .eyebrow,.section-label{
    border-radius:14px;font-size:11px;letter-spacing:.13em;padding:6px 12px 7px;
  }
}

@media (prefers-reduced-motion:reduce){
  .pip{transition:none}
  .btn.go:hover .pip,.cta-top.go:hover .pip{transform:none}
}

/* ---------- révélations ---------- */


/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  #loader{display:none}
  main,.topbar,.foot{animation:none;opacity:1}
  .scene-media img{transform:none}
  .layer-list li{opacity:1}
  .scene-copy .inner{transform:none;opacity:1}
  #sc-hero,#sc-techno,#sc-install,#sc-panne{height:auto}
  .scene-stage{position:static;height:auto;min-height:0}
  .scene-copy{max-height:none;overflow:visible;padding-top:96px;padding-bottom:96px}
  .scene-media{position:absolute}
}

/* ---------- impression ---------- */
@media print{
  .topbar,.actionbar,.drawer,#loader,.scene-media,
.scene-veil{
  z-index:2;display:none!important}
  body{background:#fff;color:#000}
  .scene,.scene-stage{height:auto;position:static}
}

/* ====================================================================
   PAGES DOCUMENTAIRES — guides et régions.
   Elles héritent du continuum sombre : aucune couleur nouvelle, aucun
   composant nouveau. Ce bloc ne fait que donner un rythme de lecture
   à du texte long, ce que la page d'accueil n'avait pas à porter.
   ==================================================================== */
.page-doc{background:var(--navy);color:var(--ink-dark)}
.page-doc main{padding-top:var(--bar-h)}

.beat.doc{padding-top:clamp(32px,5vw,64px)}
.beat.doc .inner.narrow{max-width:720px}

/* Fil d'Ariane — il double le JSON-LD, donc il doit rester lisible et
   discret. Pas de séparateur en image : un caractère suffit. */
.fil{margin:0 0 clamp(20px,3vw,32px)}
.fil ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 6px;
  font-family:var(--sans);font-size:13px;color:var(--dim-dark)}
.fil li+li::before{content:"›";margin-right:6px;color:var(--dim-dark)}
.fil a{color:var(--dim-dark);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{color:var(--amber);border-bottom-color:currentColor}
.fil [aria-current]{color:var(--ink-dark)}

/* Le résumé porte la réponse en une phrase, avant tout développement :
   c'est ce qu'un moteur ou un lecteur pressé lira en premier. */
.resume{
  font-family:var(--serif);font-size:clamp(18px,2.1vw,21px);line-height:1.55;
  color:var(--ink-dark);margin:0 0 clamp(28px,4vw,44px);padding-left:18px;
  border-left:2px solid var(--amber);text-wrap:pretty;
}
.resume b{color:var(--amber);font-weight:600}

.beat.doc h1{margin-bottom:clamp(18px,2.4vw,26px);text-wrap:balance}
.beat.doc h2{
  font-family:var(--sans);font-weight:700;font-size:clamp(19px,2.2vw,23px);
  letter-spacing:-.015em;margin:clamp(34px,4.5vw,52px) 0 14px;text-wrap:balance;
}
.beat.doc p{
  font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--dim-dark);
  max-width:65ch;margin:0 0 16px;text-wrap:pretty;
}
.beat.doc p b{color:var(--ink-dark);font-weight:600}
.beat.doc a{color:var(--amber);text-decoration:none;border-bottom:1px solid rgba(245,166,35,.4)}
.beat.doc a:hover{border-bottom-color:var(--amber)}

/* Listes de liens des hubs et du maillage interne. Chaque entrée porte
   son titre et sa description : le lien se comprend sans le survoler. */
.liste-liens{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.liste-liens a{
  display:block;padding:18px 20px;border-radius:var(--r);
  background-color:var(--navy);
  background-image:linear-gradient(180deg,var(--lift),rgba(255,255,255,.012));
  border:1px solid var(--line-dark);text-decoration:none;
  transition:border-color .25s ease,transform .25s var(--ease);
}
.liste-liens a:hover{border-color:rgba(245,166,35,.55);transform:translateY(-2px)}
.liste-liens b{
  display:block;font-family:var(--sans);font-weight:700;font-size:16px;
  color:var(--ink-dark);margin-bottom:5px;
}
.liste-liens span{
  display:block;font-family:var(--serif);font-size:15px;line-height:1.5;
  color:var(--dim-dark);
}

/* Municipalités desservies : une grille, pas une énumération à puces —
   la liste est longue et se lit mieux en colonnes. */
.villes{
  list-style:none;margin:0 0 20px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px;
}
.villes li{
  font-family:var(--sans);font-size:14px;color:var(--dim-dark);
  padding:10px 14px;border:1px solid var(--line-dark);border-radius:var(--r);
}

.autres-regions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.autres-regions a{
  font-family:var(--sans);font-size:14px;padding:9px 14px;border-radius:var(--r);
  border:1px solid var(--line-dark);color:var(--dim-dark);text-decoration:none;
  transition:border-color .25s ease,color .25s ease;
}
.autres-regions a:hover{border-color:var(--amber);color:var(--amber)}

.beat.cta-doc{padding-top:clamp(28px,4vw,44px)}

/* Le lien du menu de la section courante. Sans cette marque, un visiteur
   arrivé par un moteur ne sait pas où il se trouve dans le site. */
.nav a[aria-current]{color:var(--amber)}
.drawer a[aria-current]{color:var(--amber)}

@media (max-width:600px){
  .villes{grid-template-columns:1fr 1fr}
}


/* ---------- bandeau de confiance (remplace la grille de preuves) ---------- */
.beat.trust{padding-top:clamp(26px,3.5vw,40px);padding-bottom:clamp(26px,3.5vw,40px)}
.trust-strip{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
}
.trust-strip li{display:flex;align-items:flex-start;gap:12px;padding:18px 20px 18px 0}
.trust-strip li+li{padding-left:20px;border-left:1px solid var(--line-dark)}
.trust-strip .ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--dim-dark)}
.trust-strip b{
  display:block;font-family:var(--sans);font-weight:700;font-size:14px;
  letter-spacing:-.005em;color:var(--ink-dark);font-variant-numeric:tabular-nums;
}
.trust-strip small{
  display:block;margin-top:3px;font-family:var(--serif);font-size:13px;
  line-height:1.45;color:var(--dim-dark);
}
@media (max-width:900px){
  .trust-strip{grid-template-columns:1fr 1fr}
  .trust-strip li{padding:16px 16px 16px 0}
  .trust-strip li+li{padding-left:16px}
  .trust-strip li:nth-child(3){padding-left:0;border-left:0;border-top:1px solid var(--line-dark)}
  .trust-strip li:nth-child(4){border-top:1px solid var(--line-dark)}
}
@media (max-width:520px){
  .trust-strip{grid-template-columns:1fr}
  .trust-strip li,.trust-strip li+li{padding:14px 0;border-left:0}
  .trust-strip li+li{border-top:1px solid var(--line-dark)}
}