/* ══════════════════════════════════════════════════════════════════════════
   LOC'AIR — LA FEUILLE DE STYLE COMMUNE

   Partagée par la page particuliers (version-b.html) et la page entreprises
   (pro.html). Une seule source : sans ça, les deux pages se seraient
   séparées au premier changement de couleur, et Loc'Air aurait eu deux
   identités au lieu d'une.

   Tout ce qui est propre à une seule page reste dans cette page.
══════════════════════════════════════════════════════════════════════════ */

/* ══ COULEURS — identiques à la version A ══ */
:root{
  --ink:#0E1F35; --ink-2:#57687C;
  /* Mesuré : l'ancien #95A3B3 donnait 2,57 pour 1 sur blanc, très en
     dessous du minimum lisible (4,5 selon WCAG AA). Assombri jusqu'à passer aussi sur le gris clair : 4,86. */
  --ink-3:#5F6E80;
  /* ── LA COULEUR D'ACTION ───────────────────────────────────────────────
     Marine + bleu roi + or, c'est la palette de toutes les banques en
     ligne : rien ne s'y retient. Le bleu roi laisse la place à une
     couleur de l'eau et de l'air froid, exactement ce que Loc'Air vend.
     ── Corrigé une fois : la première sarcelle choisie (#0B6E77, teinte
     185°) se trouvait à TROIS degrés de teinte de celle d'une conciergerie
     niçoise qui utilise aussi l'or — et les conciergeries sont les
     partenaires ambassadeurs de Loc'Air, donc les deux marques se
     retrouvent côte à côte sur un même bien. Mesuré, puis décalé.
     Celle-ci penche vers le vert (172°) : seize degrés d'écart, une autre
     famille à l'œil, et vingt-six degrés du vert de confirmation pour ne
     pas le contredire.
     Marges d'accessibilité : blanc dessus 6,16:1, elle-même en texte sur
     blanc 6,16:1, sur la brume 5,74:1.
     Le nom du jeton dit ce qu'il fait — l'action — et non plus une
     couleur qui a changé. */
  --vif:#086E60; --vif-d:#065A4E; --vif-clair:#E7F3F0;
  --gold:#C9A227;       /* accent — sur fond SOMBRE uniquement */
  /* Le même or sur blanc ne donne que 2,42 pour 1. Sur fond clair on
     utilise cette version assombrie (4,76), qui garde la teinte. */
  /* Mesuré : #8A7016 donnait 4,44:1 sur la brume et 4,39:1 sur la pastille
     d'ouverture de ville (fond doré à 10 %) — sous la norme (4,5). #7A6313
     remonte à 5,40 et 5,30, sans rien perdre de l'or. */
  --gold-txt:#7A6313;
  --paper:#FFFFFF; --mist:#F5F7FA; --line:#E6EBF1; --green:#0F7A3D;
  /* Trois teintes de marine et un ambre étaient écrits en dur dans le
     fichier, sans nom : les surfaces posées SUR le marine, le survol du
     bouton marine, et l'état « complet » du point de livraison. */
  --ink-s:#183253; --ink-s2:#132840; --ink-h:#1A3050; --alerte:#B8860B;
  --pad:24px; --max:1000px;
  /* ── LA MESURE DE LECTURE ────────────────────────────────────────────────
     Toutes les largeurs de texte du site étaient réglées en « ch ». Or 1ch
     n'est PAS la largeur d'un caractère : c'est la largeur du ZÉRO, qui en
     DM Sans est bien plus large qu'une lettre moyenne. Mesuré : max-width:44ch
     sur un paragraphe d'intro donnait 80 signes par ligne, et 40ch sur une
     petite ligne en donnait 88 — alors qu'au-delà de 75 l'œil perd le début
     de la ligne suivante.
     Un seul jeton, mesuré et non deviné : 34ch tombe entre 62 et 70 signes
     selon le texte, c'est-à-dire dans la fourchette confortable. */
  --lire:34ch;
  /* ── COINS ARRONDIS ──
     Huit valeurs écrites à la main cohabitaient (6, 8, 10, 11, 12, 20,
     100px, 50%) sans qu'aucune règle ne dise laquelle utiliser. Quatre
     marches désormais : petit, carte, grande carte, pilule. */
  --r-s:8px; --r:12px; --r-l:20px; --r-f:100px;
  /* ── OMBRES ──
     Douze ombres différentes, toutes écrites à la main : les cartes
     flottaient à douze hauteurs différentes sans que rien ne le justifie.
     Trois niveaux, un par distance : posé, soulevé, flottant. */
  --o-1:0 1px 2px rgba(14,31,53,.05),0 2px 8px rgba(14,31,53,.05);
  --o-2:0 4px 12px rgba(14,31,53,.06),0 12px 32px rgba(14,31,53,.10);
  --o-3:0 8px 24px rgba(14,31,53,.09),0 28px 60px rgba(14,31,53,.16);
  /* ── INTERLETTRAGE ──
     Vingt-trois valeurs, de -.06em à .2em, par pas de deux millièmes.
     Six marches : plus le texte est grand, plus il se resserre ; les
     capitales, elles, s'écartent. */
  --l-1:-.045em; --l-2:-.03em; --l-3:-.015em; --l-4:-.005em;
  --l-5:.07em;   --l-6:.18em;
  /* ── INTERLIGNE ──
     Dix-sept valeurs, de .86 à 1.7. Cinq marches : les très petits
     interlignes (sous 1.05) restent tels quels, ce sont des réglages
     optiques pour les chiffres géants, pas de la conduite de texte. */
  --h-1:1.15; --h-2:1.3; --h-3:1.4; --h-4:1.5; --h-5:1.65;
  /* ── TAILLES DE TEXTE ──
     Les titres avaient leur échelle (--t-1 à --t-6). Tout le reste était
     improvisé : vingt-sept valeurs entre 11 et 27 px, par pas d'un demi-
     pixel. Personne ne distingue 13,5 de 14 — mais l'œil sent le désordre.
     Sept marches, choisies pour tomber sur les tailles les plus utilisées :
     aucun texte ne bouge de plus d'un demi-pixel. */
  --s-1:11.5px; --s-2:13px;   --s-3:14.5px; --s-4:16px;
  --s-5:17.5px; --s-6:19.5px; --s-7:23px;
  /* DM Sans couvre le latin et le cyrillique, mais PAS les idéogrammes :
     le chinois tombait donc sur une police système au hasard. La pile ci-
     dessous nomme explicitement les polices chinoises de chaque système, et
     sert aussi de secours immédiat si Google Fonts n'arrive jamais. */
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',
         'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',
         sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font);background:var(--paper);color:var(--ink);
  font-size:var(--s-5);line-height:var(--h-5);letter-spacing:var(--l-4);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,picture{max-width:100%;height:auto;display:block}
/* ── Tenir dans 320px ──────────────────────────────────────────────────────
   Mesuré : à 320px de large — un vieil iPhone SE, ou n'importe quel écran
   zoomé à 200 %, ce que les règles d'accessibilité imposent de supporter —
   la page débordait de 13px en français et de 28px en russe.
   Deux causes. Une colonne de grille refuse par défaut de devenir plus
   étroite que son contenu ; et un mot russe très long ne se coupe jamais.
   Les deux se règlent ici, une fois pour toutes les grilles de la page. */
.e1-grid>*,.chiffre>*,.prix-grid>*,.specs>*,.metier>*,.conseils>*{min-width:0}
.titre,.dire,.conseil b,.conseil span{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
/* ── L'anneau de focus ─────────────────────────────────────────────────────
   C'est le cadre qui montre où on se trouve quand on navigue au clavier,
   sans souris. Il était bleu partout. Mesuré : bleu sur le fond marine,
   2,61 pour 1 — sous le minimum de 3 exigé ; et bleu sur l'écran bleu,
   1,00 pour 1, c'est-à-dire rien du tout. Sur cet écran, quelqu'un qui
   navigue au clavier ne savait plus où il était.
   L'anneau prend donc la couleur qui se voit sur son fond. Sur le marine
   c'est l'or de la marque : le repère d'accessibilité devient un signe
   de la marque au lieu d'un réglage de navigateur. */
:root{--focus:var(--vif)}                           /* blanc, brume    → 5,98:1 */
/* Toutes les surfaces SOMBRES, y compris celles posées sur un écran clair :
   le calculateur, le pied de page, les cartes vidéo. Sans elles, l'anneau
   restait sarcelle sur du marine — 2,77:1, sous le minimum de 3 exigé pour
   un repère d'accessibilité. C'est le calculateur qui comptait le plus :
   seize commandes s'y règlent au clavier. */
.e-ink,.menu,.cook,.infobar,
.calc,.pied-bloc,.vcard,.vide,.preview-bar,
.tete{--focus:var(--gold)}                          /* marine → 6,86:1 */
.e-blue,.bar{--focus:#fff}                          /* sarcelle, barre → 9,84:1 */
:focus-visible{outline:2.5px solid var(--focus);outline-offset:4px;border-radius:var(--r-s)}
/* ── LES TRÈS GRANDS ÉCRANS ────────────────────────────────────────────────
   Mesuré sur un écran de 1900 px : la colonne de contenu fait 1000 px, soit
   53 % de la largeur. Presque la moitié de l'écran est de la marge, et le
   site paraît posé au milieu d'un vide.
   Au-delà de 1500 px, la colonne passe à 1180. En dessous, RIEN ne change —
   toutes les mesures déjà faites restent valables. */
@media(min-width:1500px){:root{--max:1180px}}

/* [hidden] pose display:none, mais une règle de classe qui vient après
   (.rail{display:flex}, .avis{display:grid}) le gagne : un bloc « masqué »
   continuait alors d'occuper sa place. Une seule règle, une bonne fois. */
[hidden]{display:none!important}

/* ── LES AVIS ──────────────────────────────────────────────────────────────
   Des cartes remplies par /api/google-rating et par rien d'autre. Le bloc
   reste masqué tant que Google ne répond pas : mieux vaut un écran avec son
   seul titre qu'un écran avec trois avis inventés.
   La note est en or, comme les étoiles — c'est le seul endroit de la page
   où l'or dit « quelqu'un d'autre nous a jugés ».
   La mise en forme des cartes est plus bas, avec le rail. */
#e7 .titre{max-width:none}
#e7 .titre em{display:block}
/* Trois titres se coupaient au mauvais endroit : « …pas. Il / se rafraîchit »,
   « Les questions que / vous nous posez », « L'air frais dès / demain matin ».
   Le membre de phrase doit passer sur SA ligne — la convention existait déjà
   pour #e7, #e4b, #e1 et #e3b, elle manquait à trois écrans.
   Sous les seuils indiqués, la phrase est simplement trop longue pour la
   largeur : on laisse alors le navigateur couper où il peut. */
#e6 .titre em{display:block}
#e9b .titre em{display:block}
/* Sous 700 px, « Pensé pour la canicule, pas pour le chantier. » mélangeait
   la fin d'une idée et le début de l'autre sur la même ligne. Quatre lignes
   propres valent mieux que trois lignes déchirées : c'est la règle du site. */
@media(max-width:700px){#e2b .titre em{display:block}}
@media(min-width:761px){
  #e11 .titre{font-size:var(--t-2);max-width:none}
  #e11 .titre em{display:block}
}
@media(min-width:521px){#e12 .titre em{display:block}}
/* Sur téléphone, « sans que nous l'écrivions. » ne rentre pas au plancher de
   --t-3 : le titre passait à trois lignes. 26 px est le plancher de --t-4,
   une valeur qui existe déjà dans l'échelle. */
@media(max-width:430px){#e7 .titre{font-size:26px}}
/* ── LES CARTES D'AVIS, EN CARROUSEL ───────────────────────────────────
   Avant : trois avis en colonnes, séparés par un filet. Google en renvoie
   six ; on n'en montrait que la moitié, et rien ne disait qu'il y en avait
   d'autres.
   Maintenant : un rail qui glisse, comme le rail des vidéos juste en
   dessous — même geste, même gabarit, donc rien de nouveau à apprendre.
   Ce qui change par rapport à la référence envoyée : pas de logo de source
   en couleur (nous n'avons pas le droit de reproduire celui de Google), pas
   d'ombre portée. Une carte blanche, un filet, une pastille sarcelle avec
   l'initiale — les formes de la maison.
   Ce qui NE change pas : le contenu vient de /api/google-rating et de rien
   d'autre, et le bloc reste masqué si Google ne répond pas. */
.avis{
  display:flex;gap:16px;margin-top:var(--e-2);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:2px 0 16px;
  scrollbar-width:thin;scrollbar-color:rgba(14,31,53,.22) transparent;
}
.avis::-webkit-scrollbar{height:5px}
.avis::-webkit-scrollbar-thumb{background:rgba(14,31,53,.22);border-radius:var(--r-f)}
.avis-c{
  flex:0 0 auto;width:clamp(266px,29vw,344px);scroll-snap-align:start;
  display:flex;flex-direction:column;
  padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-l);
  background:#fff;
}
/* En-tête : l'initiale dans une pastille, le nom, la date relative. C'est
   ce qui manquait le plus — un avis sans visage se lit comme un slogan. */
.avis-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.avis-i{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--vif-clair);color:var(--vif-d);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:var(--s-4);line-height:1;
}
.avis-n{min-width:0}
.avis-n b{display:block;font-weight:700;color:var(--ink);font-size:var(--s-3);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avis-n span{display:block;color:var(--ink-2);font-size:var(--s-2);line-height:var(--h-3)}
.avis-c .stars{font-size:var(--s-3);letter-spacing:1.5px}
.avis-t{margin-top:11px;font-size:var(--s-3);line-height:var(--h-4);color:var(--ink)}
.avis-q{margin-top:auto;padding-top:16px;font-size:var(--s-2);color:var(--ink-3)}

/* Les deux flèches. Elles ne s'affichent que si le rail déborde vraiment —
   deux flèches inertes valent moins que pas de flèches du tout. Le rail
   reste utilisable au doigt, à la molette et au clavier sans elles. */
.avis-nav{display:flex;gap:10px;margin-top:4px}
.avis-b{
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background var(--mv-2) var(--mv),border-color var(--mv-2) var(--mv);
}
.avis-b:hover:not(:disabled){background:var(--vif-clair);border-color:var(--vif)}
.avis-b:disabled{opacity:.38;cursor:default}
.avis-b svg{width:19px;height:19px}
@media(prefers-reduced-motion:reduce){.avis{scroll-behavior:auto}}
/* L'invitation à envoyer une vidéo : elle ne dépend d'aucune donnée, donc
   elle tient l'écran même si Google ne répond pas. Une ligne, pas une
   carte — c'est une demande, pas une offre. */
/* max-width limitait la longueur de lecture — mais il raccourcissait du
   même coup le FILET, qui s'arrêtait 380 px avant ceux des avis juste
   au-dessus. Le plafond passe sur le paragraphe ; le filet reprend toute la
   largeur, comme ses voisins. */
.invit{margin-top:var(--e-2);padding-top:18px;border-top:1px solid var(--line);
  font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-2)}
.invit p{max-width:62ch}
.invit b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}

/* ── ACHETER OU LOUER ──────────────────────────────────────────────────────
   Un tableau, pas des cartes : c'est une comparaison ligne à ligne, et un
   tableau se lit dans les deux sens — par critère et par colonne. C'est
   aussi la seule structure qu'un lecteur d'écran restitue correctement,
   d'où les <th scope="row"> et <th scope="col">.
   La colonne Loc'Air est sombre, comme une carte posée par-dessus le
   tableau : on voit où regarder sans avoir à l'écrire.
   Trois marqueurs seulement — non, ça dépend, oui — et ils ne portent
   AUCUNE information à eux seuls : le texte à côté dit tout. Un daltonien
   ne perd donc rien (règle WCAG 1.4.1, ne jamais passer par la seule
   couleur). Ils sont masqués aux lecteurs d'écran pour la même raison. */
/* Le titre tient en deux lignes, une par idée — comme partout ailleurs. */
#e4b .titre{max-width:none}
#e4b .titre em{display:block}
/* Mesuré à 390 px : 298 des 640 px du tableau étaient hors champ, soit 47 %
   — et la colonne cachée était justement la colonne Loc'Air, le sujet de
   l'écran. Rien ne disait que ça glissait : pas d'ascenseur, pas de bord
   estompé. Le rail vidéo du site, lui, montre le sien.
   Trois signes ajoutés : un ascenseur fin, un accrochage colonne par
   colonne, et un bord droit qui s'estompe tant qu'il reste à voir. */
.cmp{margin-top:var(--e-1);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(14,31,53,.28) transparent;
  padding-bottom:6px;scroll-snap-type:x proximity}
.cmp thead th{scroll-snap-align:start}
@media(max-width:680px){
  .cmp{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent);
       mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)}
}
.cmp table{width:100%;border-collapse:collapse;min-width:720px;text-align:left}
.cmp th,.cmp td{padding:12px 18px;vertical-align:top;border-top:1px solid var(--line)}
.cmp thead th{border-top:0;padding-top:0;font-weight:400}
.cmp thead th:first-child{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);
  text-transform:uppercase;color:var(--ink-3)}
.cmp thead b{display:block;font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);color:var(--ink)}
.cmp thead > span,.cmp thead th > span{display:block;margin-top:5px;font-size:var(--s-2);color:var(--ink-2);line-height:var(--h-3)}
.cmp tbody th{font-size:var(--s-3);font-weight:700;color:var(--ink);width:24%}
.cmp td{font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-4)}
/* Le marqueur se pose SUR la case, il n'entre pas dans le flux : sans ça,
   un texte long passait à la ligne et laissait la croix seule au-dessus.
   (Et display:flex sur une cellule détruirait le tableau.) */
.cmp td{position:relative;padding-left:42px}
.cmp td i{display:block;font-style:normal;font-size:var(--s-2);color:var(--ink-3);margin-top:3px}
/* la colonne qui compte : sombre, arrondie en haut, elle sort du tableau */
.cmp .cmp-nous,.cmp td:last-child{background:var(--ink);color:#fff}
.cmp .cmp-nous{border-radius:var(--r-l) var(--r-l) 0 0;padding-top:20px}
.cmp .cmp-nous b{color:#fff}
.cmp .cmp-nous span{color:rgba(255,255,255,.72)}
.cmp .cmp-nous > i{display:block;font-style:normal;font-size:var(--s-1);font-weight:700;
  letter-spacing:var(--l-5);text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.cmp tbody td:last-child{color:rgba(255,255,255,.88);border-top-color:rgba(255,255,255,.14)}
.cmp tbody td:last-child i{color:rgba(255,255,255,.62)}
.cmp tbody tr:last-child td:last-child{border-radius:0 0 var(--r-l) var(--r-l)}
/* la ligne d'honnêteté : celle où l'achat gagne */
.cmp .cmp-franc th,.cmp .cmp-franc td{border-top-width:2px;border-top-color:var(--ink-3)}
.cmp .cmp-franc td:last-child{border-top-color:rgba(255,255,255,.34)}
/* les trois marqueurs */
.ko,.na,.ok{position:absolute;left:18px;top:12px;width:15px;
  font-weight:700;font-size:var(--s-3);line-height:var(--h-3)}
.ko::before{content:'\2715';color:#B3261E}
.na::before{content:'\2013';color:var(--ink-3)}
.ok::before{content:'\2713';color:var(--vif)}
.cmp td:last-child .ok::before{color:var(--gold)}
.cmp td:last-child .na::before{color:rgba(255,255,255,.55)}
@media(max-width:760px){
  .cmp table{min-width:640px}
  .cmp th{padding:13px 14px}
  .cmp td{padding:13px 14px 13px 38px}
  .ko,.na,.ok{left:14px;top:13px}
  .cmp tbody th{width:30%}
}

/* ── LES EMPLACEMENTS D'IMAGE ──────────────────────────────────────────────
   Le site n'a aucune photo — c'est ce qui lui manque le plus. Les
   emplacements sont donc prêts d'avance :
     · chacun réserve déjà sa proportion, donc rien ne saute quand l'image
       arrive (pas de contenu qui se décale sous les yeux du visiteur) ;
     · le chargement est différé : une photo hors écran ne coûte rien ;
     · l'emplacement RESTE INVISIBLE tant que le fichier n'existe pas. Pas
       de cadre vide, pas d'icône d'image cassée : c'est onload qui révèle
       la figure, et onload ne se déclenche jamais sur un fichier absent.
   Le jour où les fichiers sont déposés dans le dossier, ils apparaissent
   sans qu'on touche au code. Formats et cadrages attendus : VISUELS.md */
/* ── LE TRAITEMENT D'UNE IMAGE ─────────────────────────────────────────────
   Le site a une grammaire visuelle très nette : des FILETS comme seul
   séparateur, presque aucune boîte, beaucoup de blanc, et des blocs marine
   pour appuyer. Une photo posée là sans traitement casserait cette
   grammaire — surtout une photo claire, qui se dissout dans le blanc parce
   que rien ne dit où elle s'arrête.
   D'où trois règles, et pas une de plus :
     1. un FILET INTÉRIEUR d'un pixel, jamais une ombre. Il est invisible
        sur une photo sombre et sauve le bord d'une photo claire. C'est le
        même trait que partout ailleurs sur le site.
     2. le MÊME RAYON que les cartes — un seul arrondi dans toute la page.
     3. un fond gris pendant le chargement, pour qu'aucune case ne clignote
        en blanc.
   Aucune ombre portée, aucun cadre coloré, aucun effet : ce qui fait tenir
   une image ici, c'est le vide autour d'elle. */
.photo{margin:0;overflow:hidden;border-radius:var(--r-l);background:var(--mist);min-width:0;
  position:relative}
.photo img{box-shadow:inset 0 0 0 1px rgba(14,31,53,.07)}
.e-ink .photo img,.e-blue .photo img,.a-photo .photo img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}

/* ── LA LÉGENDE ────────────────────────────────────────────────────────────
   Une photo qui montre une scène réelle mérite qu'on dise ce qu'on regarde
   — c'est ce qui sépare une illustration d'une preuve. La légende reprend
   la goutte de la marque en guise de marqueur : le même signe que les puces
   des guides et que l'apostrophe du nom. Elle n'est jamais obligatoire. */
.photo figcaption,.legende{
  margin-top:11px;padding-left:16px;position:relative;
  font-size:var(--s-2);line-height:var(--h-3);color:var(--ink-3);
}
.photo figcaption::before,.legende::before{
  content:'';position:absolute;left:0;top:.42em;width:6px;height:6px;
  background:var(--vif);border-radius:50% 50% 50% 0;transform:rotate(-25deg);
}
.e-ink .legende,.e-blue .legende{color:rgba(255,255,255,.62)}
.e-ink .legende::before,.e-blue .legende::before{background:var(--gold)}
/* Une légende sort de la boîte à coins arrondis : elle se met SOUS la
   figure, jamais dedans. */
.photo:has(figcaption){overflow:visible;background:none;border-radius:0}
.photo:has(figcaption) img{border-radius:var(--r-l);background:var(--mist)}
.photo[hidden]{display:none}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo-4-5{aspect-ratio:4/5}
.photo-1-1{aspect-ratio:1/1}
.photo-3-2{aspect-ratio:3/2}
/* Sur l'accueil, la photo prend la colonne de droite et le choix des deux
   machines passe en dessous, sur toute la largeur. Tant qu'il n'y a pas de
   photo, la mise en page d'aujourd'hui reste intacte : c'est :has() qui
   bascule, et il ne bascule que si une figure visible existe. */
/* La photo ne dicte PAS la hauteur de l'écran : mesuré, une 4:5 dans une
   colonne de 530 px faisait passer l'accueil de 618 à 1254 px — le double
   d'un écran. Elle prend une hauteur bornée et recadre par le milieu. */
.e1-grid:has(> .photo:not([hidden])){grid-template-columns:1fr .78fr}
.e1-grid > .photo{aspect-ratio:auto;height:clamp(280px,34svh,400px)}
.e1-grid:has(> .photo:not([hidden])) .choix{grid-column:1/-1;flex-direction:row;margin-top:6px}
.e1-grid:has(> .photo:not([hidden])) .mcard{flex:1 1 0}
/* Dans la fiche d'une machine, la photo passe en tête, sous le filet. */
/* Dans la fiche d'une machine, la photo passe en tête, sous le filet. Elle
   sert à RECONNAÎTRE l'objet — surtout le rafraîchisseur, que personne ne
   connaît — pas à faire une affiche : hauteur bornée à 220 px. */
/* ── UNE PAIRE, C'EST TOUT OU RIEN ─────────────────────────────────────────
   Testé avec une seule des deux photos en place : la carte qui en a une
   descend de 206 px, l'autre reste en haut, et l'écran part de travers —
   « Fenêtre fermée » se retrouve au niveau du troisième paragraphe de sa
   voisine. Deux machines présentées côte à côte doivent être présentées de
   la même façon.
   Tant que les DEUX photos ne sont pas là, aucune ne s'affiche. Le jour où
   la seconde arrive, les deux apparaissent ensemble. C'est aussi la seule
   règle qui empêche une photo isolée de casser l'écran sans prévenir. */
.deux:has(> .mach:first-child > .photo[hidden]) .mach > .photo,
.deux:has(> .mach:last-child  > .photo[hidden]) .mach > .photo{display:none}
.mach .photo{aspect-ratio:auto;height:190px;margin:0 0 16px}
@media(max-width:760px){.e1-grid:has(> .photo:not([hidden])){grid-template-columns:1fr}
  .e1-grid:has(> .photo:not([hidden])) .choix{flex-direction:column}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* ══ L'ÉCRAN ══
   Chaque section occupe au moins la hauteur de l'écran et centre son contenu.
   min-height (et non height) : si un écran contient plus que prévu — le
   calculateur, la FAQ — il s'étire au lieu de couper le texte. */
.ecran{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:76px 0 max(76px, env(safe-area-inset-bottom));position:relative;
  scroll-snap-align:center;
}
@supports not (height:100svh){.ecran{min-height:100vh}}
.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);width:100%}
.snap{scroll-snap-type:y proximity}   /* "proximity" et jamais "mandatory" */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.snap{scroll-snap-type:none}}

/* fonds */
.e-ink{background:var(--ink);color:var(--paper)}
.e-blue{background:var(--vif);color:var(--paper)}
.e-mist{background:var(--mist)}

/* ══ TYPOGRAPHIE ══
   Un écran, une phrase. Les tailles sont donc beaucoup plus grandes que sur
   une page classique — c'est ce qui rend le format lisible d'un coup d'œil.

   ── L'échelle ──────────────────────────────────────────────────────────────
   Mesuré : la page utilisait 24 formules de taille différentes, dont 5
   écrites à la main dans le HTML, écran par écran. Vingt-quatre tailles de
   titre, ce n'est pas une marque, c'est une accumulation de décisions prises
   séparément — et ça se voit : deux écrans voisins n'ont aucune raison
   d'avoir des titres à 52 et 54 pixels.

   Six marches pour les textes, trois pour les chiffres, quatre pour les
   écarts. Chaque marche est ~1,2 fois la précédente : c'est le rapport qui
   se lit comme une progression et pas comme un accident.

   Toutes les valeurs sont fluides : la première borne est la taille sur
   téléphone, la dernière la taille sur grand écran. */
:root{
  --t-1: clamp(38px, 7.4vw, 86px);   /* le titre le plus court d'un écran   */
  --t-2: clamp(33px, 5vw,   60px);   /* titre d'accueil, titre à deux temps */
  --t-3: clamp(29px, 4.2vw, 50px);   /* titre d'écran standard              */
  --t-4: clamp(26px, 3.5vw, 42px);   /* titre long, qui doit tenir          */
  --t-5: clamp(22px, 2.4vw, 29px);   /* titre de carte                      */
  --t-6: clamp(18px, 2.1vw, 23px);   /* le paragraphe d'intro               */

  --n-1: clamp(90px, 20vw,  250px);  /* le chiffre spectacle : 0 €          */
  --n-2: clamp(38px, 5.4vw, 68px);   /* un chiffre qui porte l'écran        */
  --n-3: clamp(34px, 4.4vw, 50px);   /* un chiffre dans un bloc             */

  /* ── Le mouvement ────────────────────────────────────────────────────────
     Mesuré : dix durées différentes (.12s, .15s, .16s, .18s, .2s, .22s,
     .25s…) et presque aucune courbe déclarée, donc la courbe par défaut du
     navigateur. Une marque bouge d'une seule façon.
     Trois durées, une seule courbe : elle démarre vite et finit doucement,
     comme un objet qui se pose. */
  --mv: cubic-bezier(.32,.72,.28,1);
  --mv-1: .14s;   /* réaction immédiate : survol, couleur   */
  --mv-2: .24s;   /* déplacement : panneau, menu, bandeau   */
  --mv-3: .68s;   /* l'apparition au défilement             */
  --mv-ar:.42s;   /* l'arrivée du haut de page              */

  --e-1: clamp(22px, 2.4vw, 32px);   /* écart serré : marge intérieure      */
  --e-2: clamp(24px, 2.9vw, 40px);   /* écart moyen : entre colonnes        */
  --e-3: clamp(28px, 3.8vw, 52px);   /* écart large : au-dessus d'un bloc   */
  --e-4: clamp(30px, 4.8vw, 64px);   /* écart de respiration : deux moitiés */
}
.kicker{
  display:block;font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
  text-transform:uppercase;color:var(--vif);margin-bottom:28px;
}
.e-ink .kicker,.e-blue .kicker{color:var(--gold)}
.e-blue .kicker{color:rgba(255,255,255,.82)}
.titre{
  font-size:var(--t-1);font-weight:700;letter-spacing:var(--l-1);
  line-height:1.02;max-width:16ch;
}
/* Une marche de l'échelle, choisie selon la longueur du titre. Avant, la
   taille était écrite à la main dans le HTML de chaque écran. */
.titre.t-2{font-size:var(--t-2)}
.titre.t-3{font-size:var(--t-3)}
.titre.t-4{font-size:var(--t-4)}
.titre em{font-style:normal;color:var(--vif)}
.e-ink .titre em{color:var(--gold)}
.e-blue .titre em,.e-ink.e-alt .titre em{color:#fff}
.dire{font-size:var(--t-6);color:var(--ink-2);line-height:var(--h-4);max-width:var(--lire);margin-top:28px;letter-spacing:var(--l-4)}
.e-ink .dire{color:rgba(255,255,255,.6)}
/* Mesuré sur la sarcelle : le blanc à 78 % donnait 4,31:1, sous la norme.
   À 84 % il remonte à 4,76:1 — et sur le marine il reste à 11,9:1. */
.e-blue .dire{color:rgba(255,255,255,.84)}
.geant{
  font-size:var(--n-1);font-weight:700;letter-spacing:var(--l-1);
  line-height:.86;display:block;
}
.geant small{font-size:.24em;letter-spacing:var(--l-3);font-weight:700}
.mini{font-size:var(--s-3);color:var(--ink-3);margin-top:22px;line-height:var(--h-4);max-width:var(--lire)}
.e-ink .mini{color:rgba(255,255,255,.55)}
.e-blue .mini{color:rgba(255,255,255,.84)}

/* ══ BOUTONS ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:18px 32px;border-radius:var(--r-f);font-weight:700;font-size:var(--s-5);
  letter-spacing:var(--l-4);transition:background var(--mv-1) var(--mv),transform var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv);
}
.btn-1{background:var(--vif);color:#fff}
.btn-1:hover{background:var(--vif-d);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink)}
/* Le bouton de la carte ambassadeur portait une classe qui n'existait
   nulle part : il s'affichait en texte nu, sans forme de bouton. Sur
   fond or, l'encre est ce qui se détache le mieux (6,86 pour 1). */
.btn-2{background:var(--ink);color:#fff}
.btn-2:hover{background:var(--ink-h)}
.btn-light:hover{transform:translateY(-2px)}
.btn-out{border:1.5px solid var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.6)}
.btn-s{padding:12px 22px;font-size:var(--s-3)}

/* ══ APPARITION ══
   Sur un format "un écran = une idée", le contenu doit arriver APRÈS que
   l'écran soit en place, sinon tout est déjà lu avant d'arriver. */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity var(--mv-3) var(--mv),transform var(--mv-3) var(--mv)}
.js .rv.on{opacity:1;transform:none}
.js .rv:nth-child(2){transition-delay:.08s}
.js .rv:nth-child(3){transition-delay:.16s}
.js .rv:nth-child(4){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ══ REPÈRE DE PROGRESSION ══
   Sur un format long, il faut savoir où l'on en est et pouvoir sauter.
   Masqué sur téléphone : la place manque et le pouce l'accrocherait. */
.dots{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:800;display:flex;flex-direction:column;gap:14px}
.dots a{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.18;transition:opacity var(--mv-2) var(--mv),transform var(--mv-2) var(--mv)}
.dots a:hover{opacity:.5}
.dots a.on{opacity:1;transform:scale(1.35)}
.dots.sur-fonce a{background:#fff}
@media(max-width:1180px){.dots{display:none}}

/* ══ EN-TÊTE ET BARRE DE COMMANDE ══ */
/* L'en-tête occupait toute la largeur alors que le contenu est centré dans
   1000 px : sur grand écran le logo se retrouvait seul contre le bord, très
   loin de la colonne de texte. Il suit maintenant la même colonne. */
/* ── LA BARRE EST SOMBRE, TOUT LE TEMPS ────────────────────────────────────
   Elle changeait d'habit trois fois : transparente en haut de page, plaque
   blanche une fois posée sur un écran clair, voile noir sur un écran
   sombre. Trois apparences pour un seul élément — et celui qu'on voit le
   plus souvent, puisqu'il ne quitte jamais l'écran.
   Elle est maintenant toujours marine, comme le bandeau juste au-dessus :
   un seul bloc d'en-tête, une seule couleur, le bouton blanc qui ressort
   de partout. La marque se tient au même endroit, du premier écran au
   dernier. */
.bar{
  position:sticky;top:0;z-index:900;
  background:var(--ink);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow var(--mv-2) var(--mv);
}
.bar.pose{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 30px rgba(6,14,26,.22)}
.bar-in{
  display:flex;align-items:center;gap:14px;
  /* 12 + 48 (le bouton) + 12 = 72 px. Ce n'est pas un chiffre choisi au
     hasard : .e1 réserve déjà calc(100svh - 72px) pour la barre. La barre
     mesurait 80 px, l'écran d'accueil était donc 8 px trop haut depuis le
     début. Les deux sont désormais d'accord. */
  max-width:var(--max);margin:0 auto;padding:12px var(--pad);
}
/* ── La signature ───────────────────────────────────────────────────────────
   « Loc'Air » était composé dans la même police que le reste de la page, avec
   une apostrophe bleue : c'était de la typographie, pas une marque.
   L'apostrophe devient une goutte dorée — elle se lit à la fois comme
   l'apostrophe du nom et comme une goutte d'air frais. La même forme sert de
   point d'état sur l'écran d'accueil : un signe qui revient fait une
   identité, un signe unique ne fait qu'une décoration.
   La lettre reste dans le texte, seulement rendue transparente : le
   copier-coller et les lecteurs d'écran lisent toujours « Loc'Air ». */
.gt{position:relative;color:transparent;margin:0 .06em}
.gt::before{
  content:"";position:absolute;left:50%;top:.21em;
  width:.30em;height:.30em;margin-left:-.15em;
  background:var(--gold-txt);
  /* trois coins ronds, un coin vif : la goutte. Inclinée à -25°, la pointe
     part vers le bas-gauche — exactement le geste d'une apostrophe. */
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);
}
.bar .gt::before,.sur-fonce .gt::before,.menu .gt::before{background:var(--gold)}
/* Le logo ne pousse plus le reste (plus de margin-right:auto ici). Avant,
   le logo ET le sélecteur poussaient chacun de leur côté : le sélecteur se
   retrouvait à flotter au milieu du vide, à une distance qui changeait avec
   la langue (mesuré à 1440 px : il commençait à 398 px en français, 330 en
   russe, 463 en chinois — la barre se réorganisait à chaque traduction).
   Il est maintenant accroché au logo, et tout le vide part au milieu. */
.bar .logo{font-weight:700;font-size:var(--s-6);letter-spacing:var(--l-2)}
.bar .btn-out{border-color:rgba(255,255,255,.35);color:#fff}
/* Sur l'écran bleu, un bouton bleu disparaît dans le fond : sur tout fond
   sombre le bouton principal passe en blanc, ce qui marche aussi bien sur
   l'encre que sur le bleu. */
.bar .btn-1{background:#fff;color:var(--ink)}
.bar .btn-1:hover{background:rgba(255,255,255,.88)}
/* ── L'accès à son compte ──────────────────────────────────────────────────
   « Mon espace → » et le numéro de téléphone quittent la barre. Le numéro
   reste partout où il sert vraiment : le pied de page, le menu, et le bouton
   d'appel de la barre du bas sur téléphone. En haut, il ne faisait
   qu'encombrer — 126 px de chiffres à côté du bouton principal.
   Reste une icône : elle ne se traduit pas (les trois mots « Mon espace »
   devenaient « Мой кабинет » et faisaient déborder la barre en russe), elle
   tient dans 44 px, et elle rejoint la langue et le menu pour former un
   trio d'outils bien séparé de la seule action de la barre. */
.bar-compte{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--mv-1) var(--mv);
}
.bar-compte:hover{background:rgba(14,31,53,.06)}
.bar .bar-compte:hover{background:rgba(255,255,255,.12)}
.bar-compte svg{opacity:.72}
.bar-compte:hover svg{opacity:1}
/* ── Le sélecteur d'offre ──────────────────────────────────────────────────
   Deux pastilles dans une gouttière, comme un interrupteur : on voit
   immédiatement qu'il existe deux offres et laquelle on regarde. Il tient
   dans la barre, donc il ne coûte aucune hauteur. */
.offre{
  display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-f);
  background:rgba(14,31,53,.07);margin-left:6px;margin-right:auto;
}
/* Sur fond sombre, la gouttière était PLUS CLAIRE que le fond : « Pro »
   (blanc à 72 %) tombait alors à 3,18:1 sur l'écran bleu — sous la norme
   d'accessibilité (4,5:1), donc illisible pour une partie des visiteurs.
   Une gouttière plus sombre que le fond remonte le même texte à 5,15:1,
   et se lit d'ailleurs mieux : un rail d'interrupteur est un creux, pas
   un reflet. */
.bar .offre{background:rgba(0,0,0,.18)}
.offre-o{
  padding:6px 14px;border-radius:var(--r-f);font-size:var(--s-2);font-weight:700;
  letter-spacing:var(--l-4);color:var(--ink-2);white-space:nowrap;
  transition:background var(--mv-1) var(--mv),color var(--mv-1) var(--mv);
}
.offre-o:hover{color:var(--ink)}
.offre-o.on{background:var(--paper);color:var(--ink);box-shadow:var(--o-1)}
.bar .offre-o{color:rgba(255,255,255,.72)}
.bar .offre-o:hover{color:#fff}
.bar .offre-o.on{background:rgba(255,255,255,.94);color:var(--ink)}
@media(max-width:900px){
  .offre-o{padding:6px 11px;font-size:var(--s-2)}
}
@media(max-width:560px){
  /* Mesuré : à 320px, « Частным лицам / Бизнесу » faisait déborder la barre
     de 69 pixels. Plutôt que de rogner les mots — le sélecteur est le choix
     le plus structurant de la page et doit rester lisible —, la barre passe
     sur deux lignes et le sélecteur prend toute la largeur, comme un vrai
     interrupteur. */
  .bar-in{flex-wrap:wrap;row-gap:10px}
  .logo{margin-right:auto}
  .offre{order:3;flex:0 0 100%;margin-left:0;margin-right:0;display:flex}
  .offre-o{flex:1 1 0;text-align:center;padding:8px 10px;font-size:var(--s-2)}
}
/* Ce qui disparaît, et quand. La barre s'est beaucoup allégée : le
   sélecteur de langue tient maintenant jusqu'à 430 px au lieu de 1000, ce
   qui compte pour un site qui parle quatre langues à des touristes. Le
   compte et le menu ne disparaissent jamais : le menu ☰ est le seul chemin
   vers /partenaire, /prolongation, /reunion et les mentions légales, et il
   reste donc visible AUSSI sur grand écran. */
@media(max-width:900px){
  /* la barre du bas porte déjà le bouton : inutile de le doubler en haut. */
  .bar .btn{display:none}
}
@media(max-width:430px){.bar .lang{display:none}}

/* ══ BANDEAU APERÇU ══ */
.preview-bar{position:relative;z-index:901;background:var(--ink);color:rgba(255,255,255,.68);font-size:var(--s-2);text-align:center;padding:10px var(--pad)}
.preview-bar strong{color:var(--gold);font-weight:700}
.preview-bar a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
@media(max-width:640px){.preview-bar{font-size:var(--s-1)}.preview-bar .long{display:none}}

/* ══ ÉCRAN 1 : OUVERTURE ══ */
/* --bandeau vaut 0 tant que le bandeau d'info n'est pas affiché ; le script
   y met sa hauteur réelle dès qu'il apparaît. Sans ça, le bas du premier
   écran était systématiquement coupé de 44 px. */
.e1{padding-top:20px;padding-bottom:28px;min-height:calc(100svh - 72px - var(--bandeau, 0px))}
@supports not (height:100svh){.e1{min-height:calc(100vh - 72px - var(--bandeau, 0px))}}
/* Le titre traverse maintenant toute la largeur : enfermé dans une colonne
   de 460 px, il se pliait en quatre lignes. En dessous, les deux seuls
   gestes possibles, côte à côte — donner son adresse, ou choisir sa
   machine. La colonne de gauche est la plus large : c'est celle qui
   convertit. */
.e1-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:var(--e-3);align-items:start;margin-top:var(--e-1)}
.e1-col{min-width:0}
.e1 .addr{margin-top:0}
/* ══ LIGNE D'ÉTAT DE LIVRAISON ══
   Remplace une pastille en capitales qui portait deux messages à la fois et
   débordait sur deux lignes. Elle était le premier élément vu de la page et
   ressemblait à un bandeau technique.
   Une phrase, en casse normale, une seule information. Le point coloré porte
   l'urgence ; le texte n'a pas à crier. */
.etat{
  display:flex;align-items:baseline;gap:11px;margin-bottom:16px;
  font-size:var(--s-4);color:var(--ink-2);line-height:var(--h-4);max-width:48ch;
}
.etat b{color:var(--ink);font-weight:700}
/* ── CE QUE NOUS LOUONS ────────────────────────────────────────────────────
   Une seule ligne, juste sous le titre. Le titre donne l'envie, cette
   ligne donne le métier. Sans elle, l'écran d'accueil ne nommait aucun
   des deux produits — il fallait deviner d'après une photo. */
.quoi{
  font-size:var(--s-5);color:var(--ink-2);line-height:var(--h-4);
  max-width:46ch;margin:16px 0 0;
}
.etat-pt{
  /* même goutte que l'apostrophe du nom, en petit */
  width:9px;height:9px;border-radius:50% 50% 50% 0;background:var(--vif);
  flex-shrink:0;transform:translateY(-1px) rotate(-25deg);
  animation:pulse 2.4s ease-in-out infinite;
}
.etat.complet .etat-pt{background:var(--alerte);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.etat-pt{animation:none}}
/* ── Les prochaines ouvertures ─────────────────────────────────────────────
   Un troisième état, à côté de « livré 7j/7 » et « sur demande » : bientôt.
   En ligne plutôt qu'empilées — trois villes tiennent alors dans la hauteur
   qu'en prenait une seule. */
.ouvertures{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ouv-t{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;
  color:var(--ink-3);margin:0 0 11px}
.ouv-l{display:flex;flex-wrap:wrap;gap:9px}
.ouv{
  display:flex;align-items:baseline;gap:9px;
  padding:9px 15px;border-radius:var(--r-f);
  background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.34);
}
.ouv .gtt{flex-shrink:0;width:9px;height:9px;align-self:center;
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);background:var(--gold-txt)}
.ouv b{font-size:var(--s-4);font-weight:700;letter-spacing:var(--l-3);color:var(--ink)}
.ouv em{font-style:normal;font-size:var(--s-2);color:var(--ink-2)}
.ouv.lien em{color:var(--gold-txt);font-weight:700}
.ouv.lien{transition:background var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv)}
.ouv.lien:hover{background:rgba(201,162,39,.18);border-color:var(--gold-txt)}
@media(max-width:520px){
  .ouv-l{flex-direction:column}
  .ouv{justify-content:flex-start}
}

/* ── La liste d'attente des villes ─────────────────────────────────────────
   Le visiteur d'une autre ville n'avait rien à faire ici : il repartait.
   Maintenant il dit sa ville, et cette demande sert vraiment — elle décide
   de la prochaine ouverture. Le message part sur WhatsApp, donc aucun
   serveur à ajouter et aucune donnée stockée ici. */
.attente{margin-top:18px;padding-top:17px;border-top:1px solid var(--line);max-width:520px}
.attente-l{display:block;font-size:var(--s-4);font-weight:700;color:var(--ink);margin-bottom:10px}
.attente-row{display:flex;gap:10px}
.attente-i{
  /* L'écran est passé sur fond blanc : un champ blanc y disparaissait. */
  flex:1 1 auto;min-width:0;background:var(--mist);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;font:inherit;font-size:var(--s-4);color:var(--ink);
  transition:box-shadow var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv);
}
.attente-i::placeholder{color:var(--ink-3)}
/* Ces deux anneaux étaient restés au bleu roi d'avant (rgba(29,91,191,…)) :
   la seule trace de l'ancienne couleur dans tout le fichier. Ils prennent
   maintenant la couleur qui se voit sur leur fond, comme tout le reste. */
.attente-i:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--vif)}
.attente-b{flex:0 0 auto}
.attente-m{font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-3);margin-top:11px;max-width:var(--lire)}
.attente-ok{color:var(--green);font-weight:700}
@media(max-width:520px){
  .attente-row{flex-wrap:wrap}
  .attente-b{flex:1 1 100%}
}
/* ── Le socle technique ────────────────────────────────────────────────────
   Quatre briques, pas une liste à puces : chacune est une capacité qui
   existe déjà dans le code. Même goutte dorée que le reste de la marque. */
/* ── LA GOUTTE NE DÉCORE PAS ───────────────────────────────────────────────
   La goutte dorée apparaissait dix-huit fois sur la page : au-dessus de
   chaque carte de chaque grille, toujours la même, toujours de la même
   taille. Un signe répété dix-huit fois ne signale plus rien — c'est du
   papier peint.
   Elle ne sert plus que là où elle veut dire quelque chose :
     · l'apostrophe du nom          — la marque elle-même
     · le bloc « Notre engagement » — ce que nous promettons
     · les phrases signées          — la marque qui parle en son nom
     · les points d'état            — une ville ouverte, une livraison en cours
   Six emplois au lieu de dix-huit. */
.socle{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.soc{padding:17px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.soc b{display:block;font-size:var(--s-4);line-height:var(--h-2);letter-spacing:var(--l-4);
  color:#fff;margin-bottom:7px}
.soc span{font-size:var(--s-3);line-height:var(--h-4);color:rgba(255,255,255,.64)}
@media(max-width:760px){
  .socle{grid-template-columns:1fr;gap:12px}
  .soc{padding:16px 18px 18px}
  .soc b{font-size:var(--s-4)}
  }


/* ── Le formulaire de réservation pro ──────────────────────────────────────
   Il vient sous le calculateur : on voit d'abord son prix, on remplit
   ensuite. L'inverse ferait remplir cinq champs pour découvrir un montant. */
.form{margin-top:18px;max-width:var(--max)}
.form-l{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ch{display:flex;flex-direction:column;gap:6px}
.ch span{font-size:var(--s-2);font-weight:700;letter-spacing:var(--l-5);text-transform:uppercase;color:var(--ink-3)}
.ch input{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font:inherit;font-size:var(--s-4);color:var(--ink);width:100%;
  transition:box-shadow var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv);
}
.ch input::placeholder{color:var(--ink-3)}
.ch input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--vif)}
.ch:first-child,.ch:nth-child(2){grid-column:span 1}
.form-b{margin-top:14px}
.form-note{font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-3);margin:11px 0 0;max-width:var(--lire)}
.form-note.form-err{color:var(--vif);font-weight:700}
@media(max-width:700px){
  .form-l{grid-template-columns:1fr}
  .form-b{width:100%;justify-content:center}
}

/* ── Le barème pro ─────────────────────────────────────────────────────────
   Nommé « ptier » et non « tier » : la page particuliers a déjà une grille
   tarifaire qui s'appelle .tier. Dans une feuille partagée par deux pages,
   réutiliser un nom générique fait entrer en collision deux composants qui
   n'ont rien à voir — ça s'est produit, la grille des particuliers a débordé
   de 35 pixels sur un écran de 320. */
.ptiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.ptier{padding:16px 18px;border-radius:var(--r-l);
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12)}
.ptier b{display:block;font-size:30px;font-weight:700;letter-spacing:var(--l-2);
  line-height:1;color:#fff;margin-bottom:7px;font-variant-numeric:tabular-nums}
.ptier span{font-size:var(--s-2);line-height:var(--h-3);color:rgba(255,255,255,.64)}
@media(max-width:760px){
  .ptiers{grid-template-columns:1fr 1fr;gap:10px}
  .ptier{padding:13px 15px}
  .ptier b{font-size:26px}
}

/* ── Les étapes numérotées (page pro) ──────────────────────────────────────
   Un déroulé est une suite : la numérotation dit quelque chose de vrai sur
   le contenu, elle ne décore pas. */
.etapes{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:et}
.etapes li{display:flex;flex-direction:column;gap:6px}
.etape-n{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;margin-bottom:6px;
  font-size:var(--s-3);font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--vif);color:#fff;
}
.etapes b{font-size:var(--s-5);line-height:var(--h-2);letter-spacing:var(--l-3);color:var(--ink)}
.etapes span:not(.etape-n){font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-2)}
.etapes.sombre{grid-template-columns:repeat(4,1fr)}
.etapes.sombre .etape-n{background:var(--gold);color:var(--ink)}
.etapes.sombre b{color:#fff}
.etapes.sombre span:not(.etape-n){color:rgba(255,255,255,.64)}
@media(max-width:820px){
  .etapes,.etapes.sombre{grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:520px){
  .etapes,.etapes.sombre{grid-template-columns:1fr;gap:14px}
}

/* ── Les limites annoncées (page pro) ──────────────────────────────────────
   Traitées comme un contenu positif, pas comme un avertissement : même
   carte, même goutte, même soin que le reste. Une limite qu'on assume ne se
   met pas en petit en bas de page. */
.limites{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
.lim{padding:16px 0 0;border-top:1px solid var(--line)}
.lim b{display:block;font-size:var(--s-4);line-height:var(--h-2);letter-spacing:var(--l-4);
  color:var(--ink);margin-bottom:6px}
.lim span{font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-2)}
@media(max-width:760px){.limites{grid-template-columns:1fr;gap:11px}}

/* Les cartes d'usage, version fond clair */
.pro.clair{border-top-color:var(--line)}
.pro.clair b{color:var(--ink)}
.pro.clair span{color:var(--ink-2)}

/* Les deux boutons de l'accroche pro */
.p-cta{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
@media(max-width:520px){.p-cta .btn{width:100%;justify-content:center}}

/* ── Loc'Air Pro ───────────────────────────────────────────────────────────
   Quatre usages sur deux colonnes, sur fond marine comme l'écran plateforme :
   les deux écrans qui parlent de l'entreprise plutôt que du particulier
   partagent le même fond, ce qui les relie sans qu'on ait à l'écrire. */
.pro-l{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.pro{padding:16px 0 0;border-top:1px solid rgba(255,255,255,.18)}
.pro b{display:block;font-size:var(--s-4);line-height:var(--h-2);letter-spacing:var(--l-4);
  color:#fff;margin-bottom:7px}
.pro span{font-size:var(--s-3);line-height:var(--h-4);color:rgba(255,255,255,.64)}
.pro-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.pro-note{font-size:var(--s-2);line-height:var(--h-4);color:rgba(255,255,255,.6);max-width:42ch}
@media(max-width:760px){
  .pro-l{grid-template-columns:1fr;gap:11px}
  .pro{padding:15px 17px 17px}
  .pro b{font-size:var(--s-4)}
  .pro-cta{gap:13px}
  .pro-cta .btn{width:100%;justify-content:center}
}

/* ── La signature de fermeture ─────────────────────────────────────────────
   Le site se terminait sur un numéro de SIRET. Il se termine sur son nom et
   sur sa promesse — celle-là même que l'engagement garantit. */
.signature{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-top:var(--e-2);padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.signature-n{font-size:27px;font-weight:700;letter-spacing:var(--l-2);color:#fff}
.signature-b{font-size:var(--s-5);color:var(--gold);letter-spacing:var(--l-4)}
@media(max-width:520px){
  .signature{gap:6px}
  .signature-n{font-size:24px}
  .signature-b{font-size:var(--s-4)}
}

/* ── Le pied de page ───────────────────────────────────────────────────────
   Sorti de l'écran de réservation, où il pesait pour moitié dans une hauteur
   de 933 px. Il garde le fond marine pour que la page finisse sombre, mais
   il n'est plus un écran : ni hauteur minimale, ni point de progression. */
.pied-bloc{
  background:var(--ink);color:#fff;
  padding:44px 0 max(38px, env(safe-area-inset-bottom));
  text-align:left;
}
.pied-bloc .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.pied-bloc .pied-grid{margin-top:0;border-top:0;padding-top:0}

/* ── Le bandeau de réassurance ─────────────────────────────────────────────
   Cinq garanties en ligne, juste après l'accroche. Ce n'est pas un écran :
   pas de min-height, pas de point de progression — du mobilier entre deux
   idées. Les pictogrammes sont dessinés au même trait (1,7px, bouts ronds) :
   c'est la famille d'icônes qui manquait à la marque, et elle commence ici. */
/* ── LE BANDEAU DE RÉASSURANCE ─────────────────────────────────────────────
   Cinq icônes bleues posées nues au-dessus de cinq libellés en CAPITALES
   espacées : c'est le « bandeau de confiance » qu'on voit sur tous les
   sites depuis dix ans, et il ne ressemblait à rien du reste de la page.
   Trois corrections :
     · l'icône entre dans le carré doux bleu déjà utilisé par les cartes de
       l'accueil — le site a UN langage d'icône, pas deux ;
     · les capitales espacées deviennent une phrase en casse normale : un
       libellé se lit, il ne se crie pas ;
     · un filet sépare les colonnes. Sans lui, cinq blocs centrés flottaient
       dans le vide sans qu'on sache où l'un finissait.
   Tout est aligné à gauche : un texte centré sur deux lignes oblige l'œil à
   retrouver le début de chaque ligne. */
.rassure{background:var(--mist);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:28px 0}
.rassure-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(5,1fr);
}
.ras{display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:0 20px;position:relative;min-width:0}
.ras:first-child{padding-left:0}
.ras:last-child{padding-right:0}
.ras+.ras::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;
  width:1px;background:var(--line);
}
/* ── LES ICÔNES SORTENT DE LEUR CARRÉ ──────────────────────────────────────
   Chaque icône du site était posée dans un carré bleu pâle arrondi. C'est
   le tic des interfaces logicielles : joli une fois, envahissant vingt
   fois. Une marque épurée pose l'icône seule, plus petite, dans la
   couleur du texte — et laisse l'espace faire le travail que faisait le
   carré. Le bleu n'a plus qu'un seul emploi sur la page : l'action. */
.ras-i{
  width:22px;height:22px;margin-bottom:14px;flex-shrink:0;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.ras-i svg{width:22px;height:22px}
.ras b{font-size:var(--s-3);font-weight:700;letter-spacing:var(--l-3);
  color:var(--ink);line-height:var(--h-2);text-wrap:balance}
.ras span{font-size:var(--s-2);line-height:var(--h-4);color:var(--ink-2)}
.ras i{font-style:normal;font-weight:700;color:var(--gold-txt);white-space:nowrap}

@media(max-width:900px){
  .rassure-in{grid-template-columns:repeat(3,1fr);gap:22px 0}
  /* Trois puis deux : à cinq colonnes sur une tablette, les libellés se
     coupent en trois lignes. Les deux derniers se centrent sous les trois
     premiers plutôt que de laisser un trou à droite. */
  .ras:nth-child(4){grid-column:1/2}
  .ras:nth-child(5){grid-column:2/4}
  .ras:nth-child(4){padding-left:0}
  .ras:nth-child(4)::before{display:none}
}
@media(max-width:620px){
  .rassure{padding:22px 0}
  .rassure-in{grid-template-columns:1fr 1fr;gap:20px 0}
  .ras:nth-child(4),.ras:nth-child(5){grid-column:auto}
  .ras:nth-child(5){grid-column:1/3}
  .ras{padding:0 14px}
  .ras:nth-child(odd){padding-left:0}
  .ras:nth-child(odd)::before{display:none}
  .ras-i{width:34px;height:34px;margin-bottom:9px;border-radius:var(--r-s)}
  .ras-i svg{width:19px;height:19px}
  .ras b{font-size:var(--s-3)}
  .ras span{font-size:var(--s-2)}
}

/* ── L'engagement ──────────────────────────────────────────────────────────
   La page faisait beaucoup de promesses — pas de caution, panne remplacée le
   jour même, annulation gratuite — mais aucune ne disait ce que Loc'Air donne
   quand elle ne tient pas. C'est ça qui sépare un slogan d'un engagement.
   Les conditions sont écrites juste en dessous, en clair et à la même place :
   une garantie dont on voit les limites est plus crédible qu'une garantie
   dont on les devine. */
.engage{
  margin-top:var(--e-1);padding:22px 24px;max-width:40ch;text-align:left;
  border-radius:var(--r-l);background:rgba(201,162,39,.10);
  border:1px solid rgba(201,162,39,.34);
}
.centre .engage{margin-left:auto;margin-right:auto}
.engage-t{display:flex;align-items:baseline;gap:11px;font-size:var(--s-5);
  line-height:var(--h-4);color:var(--ink);font-weight:500}
.engage-t b{font-weight:700}
.engage .gtt{flex-shrink:0;width:11px;height:11px;margin-top:6px;
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);background:var(--gold-txt)}
/* La boîte porte déjà max-width:40ch : ce second plafond n'ajoutait rien
   qu'un deuxième bord droit, 60 px avant celui du texte en gras juste
   au-dessus. */
.engage-c{font-size:var(--s-3);line-height:var(--h-5);color:var(--ink-3);
  margin:12px 0 0 22px}
.e-ink .engage,.e-blue .engage{background:rgba(201,162,39,.13);
  border-color:rgba(201,162,39,.42)}
.e-ink .engage .gtt,.e-blue .engage .gtt{background:var(--gold)}
.e-ink .engage-t,.e-blue .engage-t{color:#fff}
.e-ink .engage-c,.e-blue .engage-c{color:rgba(255,255,255,.62)}
@media(max-width:600px){
  /* Sur téléphone, l'engagement doit rester sur le même écran que la
     promesse qu'il garantit : sans ça, on lit la promesse et on ne voit
     jamais ce qui se passe si elle n'est pas tenue. */
  .engage{padding:16px 17px;margin-top:20px}
  .engage-t{font-size:var(--s-4);gap:9px;line-height:var(--h-4)}
  .engage-c{margin:10px 0 0 20px;font-size:var(--s-2);line-height:var(--h-4)}
  .engage .gtt{width:10px;height:10px;margin-top:5px}
}
/* ── La phrase de la maison ────────────────────────────────────────────────
   Une marque a une voix. Ces deux phrases disent une décision, pas un
   argument — là où le visiteur doute le plus : la caution et la panne.
   Elles ne sont signées de personne : Loc'Air se présente comme une
   entreprise, pas comme un individu. */
.signe{
  display:flex;gap:13px;margin-top:26px;max-width:52ch;
  padding-top:20px;border-top:1px solid var(--line);
}
.signe .gtt{
  flex-shrink:0;width:11px;height:11px;margin-top:6px;
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);background:var(--gold-txt);
}
.signe p{font-size:var(--s-5);line-height:var(--h-5);color:var(--ink-2);font-style:italic;margin:0}
.signe b{display:block;font-style:normal;font-weight:700;font-size:var(--s-2);
  letter-spacing:var(--l-5);color:var(--ink-3);margin-top:9px}
.e-ink .signe,.e-blue .signe{border-top-color:rgba(255,255,255,.18)}
.e-ink .signe .gtt,.e-blue .signe .gtt{background:var(--gold)}
.e-ink .signe p,.e-blue .signe p{color:rgba(255,255,255,.86)}
.e-ink .signe b{color:rgba(255,255,255,.62)}
.e-blue .signe b{color:rgba(255,255,255,.84)}
.e-blue .signe .gtt{background:#fff}
.centre .signe{justify-content:center;text-align:left;margin-left:auto;margin-right:auto}

/* ── L'écran conseils ───────────────────────────────────────────────────────
   Le seul écran de la page qui ne vend rien. Ces quatre gestes marchent que
   le visiteur loue ici, ailleurs, ou nulle part. C'est le prix d'entrée pour
   qu'une marque soit crue quand elle parle d'elle. */
.conseils{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
/* ── UNE CARTE QUI NE CONTIENT QU'UN TITRE ET UNE PHRASE N'EST PAS UNE
   CARTE ──────────────────────────────────────────────────────────────────
   Seize blocs du site portaient un cadre, un fond et un coin arrondi pour
   entourer deux lignes de texte. Le cadre ne disait rien : toutes les
   cartes d'une grille se ressemblaient, aucune n'était cliquable, aucune
   n'avait un état.
   Il ne reste qu'un filet en haut de chaque colonne — assez pour dire « ce
   bloc commence ici », rien de plus. Les cartes qui SE CLIQUENT gardent
   leur contour : là, il veut dire quelque chose. */
.conseil{padding:18px 0 0;border-top:1px solid var(--line)}
.conseil b{display:block;font-size:var(--s-5);line-height:var(--h-2);letter-spacing:var(--l-4);
  color:var(--ink);margin-bottom:8px}
.conseil span{font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-2)}
/* L'écran doit tenir en entier : « une idée par écran » ne marche que si on
   voit l'idée entière sans faire défiler. */
#e8b .dire{max-width:58ch;margin-bottom:0}
@media(max-width:760px){
  .conseils{grid-template-columns:1fr;gap:12px}
  .conseil{padding:17px 18px 18px}
  .conseil b{font-size:var(--s-5)}
  }
/* Deux lignes, une par idée — et garanti dans les quatre langues : chaque
   moitié de la phrase occupe sa propre ligne au lieu de se casser au hasard
   là où la colonne se termine. Le titre se pliait en trois : « Il fait trop
   chaud ? / Plus pour / longtemps. » Un titre plié en trois n'est plus un
   titre. */
.e1 .titre{max-width:none;font-size:var(--t-2)}
.e1 .titre em{display:block}
/* « Livré demain matin. » demande environ 340 px à 33 px de corps : à
   414 px de large le titre tient en deux lignes, à 390 il en fait trois et
   à 360 quatre. Mesuré, puis descendu d'un cran sous 400 px. Posé ICI et
   non plus haut : la règle .e1 .titre ci-dessus a la même force et gagnait
   par sa position dans le fichier. */
@media(max-width:400px){.e1 .titre{font-size:27px}}
@media(max-width:340px){.e1 .titre{font-size:24px}}   /* 320 px : la largeur d.un vieil iPhone SE, et celle d.un écran zoomé à 200 % */
.addr{background:#fff;border-radius:var(--r-l);padding:18px;margin-top:28px;max-width:460px;box-shadow:var(--o-2)}
.addr label{display:block;font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;color:var(--ink-3);margin-bottom:13px}
.addr-row{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:var(--r);padding:15px 17px;transition:box-shadow var(--mv-1) var(--mv)}
.addr-row:focus-within{box-shadow:inset 0 0 0 2px var(--vif)}
.addr-row svg{flex-shrink:0;color:var(--ink-3)}
.addr-row input{flex:1;min-width:0;border:none;outline:none;font:inherit;font-size:var(--s-4);color:var(--ink);background:none}
.addr-row input::placeholder{color:var(--ink-3)}
.addr .btn{width:100%;margin-top:10px}
.addr-note{font-size:var(--s-2);color:var(--ink-3);margin-top:13px;text-align:center}
.preuve1{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px;font-size:var(--s-3);color:var(--ink-2)}
.preuve1 b{color:var(--ink);font-weight:700}
.stars{color:var(--gold-txt);letter-spacing:1.5px;font-size:var(--s-3)}
/* sur fond sombre, l'or clair reprend sa place */
.e-ink .stars,.e-blue .stars,.vcard .stars,.fin-q .stars{color:var(--gold)}
@media(max-width:900px){
  .e1-grid{grid-template-columns:1fr;gap:30px}
  .addr{max-width:none}
}

/* ── Pastille de disponibilité et packs ── */
.forfaits-l{display:grid;gap:8px;margin-top:12px}
.forfait{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.forfait b{font-size:var(--s-4);font-weight:700}
.forfait span{font-size:var(--s-3);color:var(--ink-2);white-space:nowrap}

/* ══ ÉCRAN MATÉRIEL ══
   Chiffres en grand, sans cadre : même langage que l'écran "0 € de caution".
   La photo n'est pas reprise ici — elle est déjà dans le premier écran, la
   remontrer affaiblirait les deux. */
/* ── DEUX MACHINES ─────────────────────────────────────────────────────────
   L'écran ne montrait que le climatiseur, avec ses quatre chiffres et sa
   liste de kit. Un visiteur venu rafraîchir une terrasse ou un garage
   repartait sans savoir qu'on loue aussi des rafraîchisseurs.
   Deux cartes côte à côte : on voit les deux métiers d'un coup d'œil, et
   surtout on comprend en un mot lequel est fait pour soi — fenêtre fermée
   ou fenêtre ouverte. C'est la seule question que le visiteur se pose. */
/* Le titre tient en deux lignes, une par idée — comme celui de l'accueil. */
#e3b .titre em{display:block}
.deux{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-2);margin-top:var(--e-1)}
.mach{padding:20px 0 0;border-top:1.5px solid var(--ink);
  min-width:0;display:flex;flex-direction:column;}
/* « Fenêtre fermée » était une pastille bleue. C'est une condition, pas un
   badge : elle redevient un mot, en petites capitales, au-dessus du nom. */
.mach-e{
  align-self:flex-start;color:var(--ink-3);
  font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);text-transform:uppercase;
}
.mach-t{display:block;font-size:var(--t-5);font-weight:700;letter-spacing:var(--l-2);line-height:var(--h-1);margin-top:15px}
.mach-d{font-size:var(--s-4);color:var(--ink-2);line-height:var(--h-5);margin-top:12px}
.mach-l{margin-top:auto;padding-top:20px;display:flex;flex-direction:column;gap:11px}
/* ── UNE PUCE NE DOIT PAS COUPER LA PHRASE ─────────────────────────────────
   display:flex sur un <li> fait de CHAQUE morceau de contenu un élément de
   la rangée : « <b>10 000 BTU</b>, 30 m²… » devenait deux colonnes séparées
   par la gouttière de 10 px, et « …qui entre : <b>une ouverture doit rester
   ouverte</b> » se retrouvait coupé en deux avec un trou au milieu. Vu à
   l'écran sur « Le matériel ».
   La puce se pose donc SUR la ligne au lieu d'entrer dans le flux — la même
   mécanique que les listes des guides et que les marqueurs du tableau
   comparatif. Le texte redevient une seule phrase.
   Et la puce prend la forme de la goutte : c'est le signe de la marque, il
   n'y a pas de raison qu'il change d'une liste à l'autre. */
.mach-l li{list-style:none;position:relative;padding-left:16px;
  font-size:var(--s-3);line-height:var(--h-4);color:var(--ink)}
.mach-l li::before{content:'';position:absolute;left:0;top:.56em;
  width:6px;height:6px;background:var(--vif);
  border-radius:50% 50% 50% 0;transform:rotate(-25deg)}
.mach-l b{font-weight:700}
@media(max-width:760px){.deux{grid-template-columns:1fr}}

/* ── LE CHOIX, DANS L'ÉCRAN D'ACCUEIL ──────────────────────────────────────
   Mêmes deux machines, en version courte, à la place de la photo. Le trait
   supérieur doré rappelle la goutte du nom : c'est le seul or de l'écran,
   il désigne donc ce qui compte. */
.choix{display:flex;flex-direction:column;gap:14px;min-width:0}
.mcard{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;
  column-gap:15px;row-gap:5px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  padding:20px 22px;position:relative;overflow:hidden;
  transition:border-color var(--mv-2) var(--mv),box-shadow var(--mv-2) var(--mv),transform var(--mv-2) var(--mv);
}
.mcard::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--gold-txt);transform:scaleX(0);transform-origin:left;
  transition:transform var(--mv-2) var(--mv);
}
.mcard:hover{border-color:rgba(14,31,53,.16);box-shadow:var(--o-2);transform:translateY(-2px)}
.mcard:hover::before{transform:scaleX(1)}
.mcard-i{grid-row:1/3;width:24px;height:24px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.mcard-i svg{width:24px;height:24px}
.mcard-t{font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);color:var(--ink);align-self:end}
.mcard-c{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);text-transform:uppercase;color:var(--vif)}
.mcard-d{grid-column:2/3;font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-4);margin-top:6px}
.choix-n{font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-4);padding-left:2px}
/* Sous 900 px la colonne de droite passait sous le formulaire ; le choix,
   lui, doit se lire AVANT — c'est ce qui dit ce qu'on loue. */
@media(max-width:900px){
  .e1-grid{grid-template-columns:1fr}
  .choix{order:-1;margin-bottom:6px}
}
@media(max-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.specs{grid-template-columns:1fr;gap:22px}}

/* ══ ÉCRAN MÉTIER ══
   Quatre points en colonnes, sans cadre : c'est le vide qui sépare. */
/* Quatre colonnes pour quatre éléments : bien. Pour SIX, la deuxième ligne
   n'en porte que deux et laisse un trou de deux cases — l'écran « pour qui »
   se lisait comme une grille cassée. Au-delà de quatre éléments, trois
   colonnes : six se rangent alors en 3 × 2, sans trou.
   Le filet en tête de chaque bloc est le même que celui des avis, des guides
   et des villes : c'est le seul séparateur du site, il doit être partout. */
.metier{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e-2) var(--e-2);margin-top:var(--e-3)}
/* Enfermé dans une requête de largeur, sinon il gagne contre les règles
   responsives : :has() porte la spécificité de son argument, donc
   « .metier:has(...) » bat « .metier » écrit plus bas dans un @media. Sur
   un écran de 320 px la grille restait à trois colonnes et la page
   débordait de 11 px. */
@media(min-width:901px){.metier:has(> :nth-child(5)){grid-template-columns:repeat(3,1fr)}}
.metier > div{border-top:1px solid var(--line);padding-top:16px}
/* Les quatre titres de « Notre métier » font 1, 2 ou 3 lignes : les quatre
   paragraphes démarraient donc à trois hauteurs différentes, 46 px d'écart.
   Chaque bloc adopte les rangées de la grille parente (subgrid) : icône,
   titre et texte s'alignent alors d'une colonne à l'autre.
   Sous @supports : un navigateur sans subgrid garde la disposition
   d'aujourd'hui, qui n'est pas cassée — seulement moins régulière.
   Réservé à #e2b : les blocs de #e2c n'ont que deux enfants et sont déjà
   alignés rangée par rangée (mesuré). */
@supports (grid-template-rows:subgrid){
  @media(min-width:541px){
    #e2b .metier{grid-template-rows:auto auto auto}
    #e2b .metier > div{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  }
}
.e-ink .metier > div,.e-blue .metier > div{border-top-color:rgba(255,255,255,.16)}
.mt-ic{width:22px;height:22px;color:var(--ink);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.metier h3{font-size:var(--s-5);letter-spacing:var(--l-3);margin-bottom:9px;line-height:var(--h-2)}
.metier p{font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-4)}
@media(max-width:900px){.metier{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.metier{grid-template-columns:1fr;gap:24px}}

/* ══ NUMÉROTATION DES ÉCRANS ══
   Sur un format "une idée par écran", le lecteur doit savoir où il en est.
   Le numéro est posé en CSS via une variable renseignée par le script — et
   non dans le texte de l'élément, que le moteur de traduction remplace à
   chaque changement de langue. */
/* ── L'ACTE ────────────────────────────────────────────────────────────────
   Le surtitre affichait « 06 /17 » : un compteur qui dit combien il reste à
   lire. Sur dix-sept écrans, c'est décourageant plus qu'utile — et la
   colonne de points, à droite, dit déjà où l'on en est.
   Il annonce maintenant à quelle question l'écran répond. Trois actes,
   dans l'ordre : pourquoi nous, comment ça marche, combien ça coûte. Le
   visiteur sait toujours dans quelle partie du raisonnement il se trouve. */
.kicker{position:relative;padding-left:0}
.acte{
  font-style:normal;margin-right:13px;padding-right:13px;
  color:var(--ink-3);position:relative;
}
.acte::after{
  content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:1px;height:11px;background:currentColor;opacity:.5;
}
/* Mesuré : le blanc à 42 % donnait 3,97:1 sur le marine et 2,32:1 sur la
   sarcelle — très en dessous de la norme. L'acte prend la même valeur que
   le surtitre : c'est le filet qui les sépare, pas la luminosité. */
.e-ink .acte,.e-blue .acte{color:rgba(255,255,255,.82)}

/* ══ ÉCRANS CENTRÉS ══
   Douze écrans sur treize étaient alignés à gauche, avec la même ossature.
   Les écrans qui n'énoncent qu'une affirmation — la promesse, la garantie —
   passent au centre : ils deviennent des respirations dans le défilement au
   lieu d'une douzième variation du même bloc. */
.centre .in{text-align:center}
.centre .titre{max-width:22ch;margin-left:auto;margin-right:auto}
.centre .dire{margin-left:auto;margin-right:auto}
.centre .creneau{justify-content:center}
@media(max-width:700px){.centre .in{text-align:left}.centre .titre,.centre .dire{margin-left:0}.centre .creneau{justify-content:flex-start}}

/* ── Suggestions d'adresse ── */
.addr-row{position:relative}
.sugg{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  background:#fff;border-radius:var(--r);padding:6px;
  box-shadow:var(--o-3);
  display:none;max-height:262px;overflow-y:auto;
}
.sugg.on{display:block}
.sugg button{display:block;width:100%;text-align:left;padding:11px 13px;border-radius:var(--r-s);
  font-size:var(--s-3);color:var(--ink);line-height:var(--h-2);transition:background var(--mv-1) var(--mv)}
.sugg button:hover,.sugg button[aria-selected="true"]{background:var(--mist)}
.sugg small{display:block;font-size:var(--s-2);color:var(--ink-3);margin-top:2px}

/* ══ ÉCRAN CHIFFRE ══ (aucune caution, note, délai…) */
/* Deux colonnes égales, mais le chiffre géant n'occupait que 224 des 444 px
   de la sienne : il restait 284 px de vide entre lui et le titre, alors que
   l'écart voulu entre les deux moitiés est de 64. La colonne du chiffre
   prend la largeur du chiffre, le reste va au texte. */
.chiffre{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4);align-items:center}
@media(min-width:821px){#e3 .chiffre{grid-template-columns:max-content 1fr}}
#e3 .chiffre{margin-top:var(--e-1)}
@media(max-width:820px){.chiffre{grid-template-columns:1fr;gap:22px}}

/* ══ ÉCRAN LIVRAISON : le créneau ══ */
.creneau{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-top:34px}
.creneau b{font-size:var(--n-3);font-weight:700;letter-spacing:var(--l-1);line-height:1}
.creneau span{font-size:var(--s-5);color:rgba(255,255,255,.55)}

/* ══ ÉCRAN PRIX ══ */
.prix-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--e-3);align-items:start}
/* ── L'ÉCRAN DES TARIFS ────────────────────────────────────────────────────
   Le barème était posé seul dans 62 % de la largeur, la note en dessous dans
   une colonne étroite, et le tiers droit de l'écran restait vide. Les deux
   se mettent côte à côte : le barème garde sa largeur de lecture, la note
   occupe la colonne qui était perdue. */
.e4-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--e-3);
  align-items:start;margin-top:38px}
@media(max-width:900px){.e4-grid{grid-template-columns:1fr;gap:26px}}
.e4-grid .mini{margin-top:0}

/* Une grille, pas une suite de lignes en flex : les remises se rangent alors
   dans leur PROPRE colonne et s'alignent verticalement. En flex, « −17 % »
   flottait derrière un prix dont la largeur changeait à chaque ligne. */
.tiers{display:grid;border-top:1px solid var(--line)}
/* minmax(0,1fr) et non 1fr : une colonne « 1fr » refuse par défaut de devenir
   plus étroite que son contenu. Mesuré à 320 px — la largeur d'un vieil
   iPhone SE, et celle d'un écran zoomé à 200 % — la ligne débordait de
   11 px. Avec minmax(0,1fr) le libellé se coupe, et rien ne dépasse. */
.tier{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;
  column-gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
@media(max-width:420px){
  .tier{column-gap:10px}
  .tier.best{margin:0 -10px;padding-left:10px;padding-right:10px}
  .tier-off{min-width:0}
}
.tier-dur{font-size:var(--s-4);color:var(--ink-2)}
.tier-p{font-size:var(--s-6);font-weight:700;letter-spacing:var(--l-2);white-space:nowrap;
  text-align:right}
.tier-p i{font-style:normal;font-size:var(--s-2);font-weight:500;color:var(--ink-3)}
/* La meilleure tranche : la ligne entière prend la couleur d'action et le
   prix passe en gras appuyé. Avant, seul le libellé changeait de couleur —
   une mise en avant à moitié faite ne se voit pas. */
.tier.best .tier-dur,.tier.best .tier-p{color:var(--vif)}
.tier.best{background:var(--vif-clair);border-bottom-color:var(--vif-clair);
  margin:0 -14px;padding-left:14px;padding-right:14px;border-radius:var(--r-s)}
.tier-off{font-size:var(--s-2);font-weight:700;color:var(--vif);
  min-width:52px;text-align:right}
@media(max-width:900px){.prix-grid{grid-template-columns:1fr;gap:28px}}

/* ══ CALCULATEUR ══ */
.calc{
  /* Deux colonnes : réglages à gauche, prix à droite. La grille bascule en
     une colonne sous 860px — sur téléphone le prix passe alors juste sous
     les réglages, jamais à six écrans de distance. */
  display:grid;grid-template-columns:1.05fr .95fr;gap:0;
  background:var(--ink);color:#fff;border-radius:var(--r-l);
  /* overflow:hidden fait de .calc une ZONE DE DÉFILEMENT. position:sticky
     s'accroche alors à elle — qui ne défile jamais — et non à la page : le
     rappel « Total à payer » restait figé 76 px trop bas, PAR-DESSUS le
     premier réglage, avec une bande vide au-dessus. Mesuré sur téléphone :
     le panneau commence à 1814, la barre à 1890, soit exactement le top:76px.
     overflow:clip coupe les coins arrondis SANS créer de zone de
     défilement. Les deux valeurs sont écrites à la suite : un navigateur qui
     ne connaît pas clip garde hidden et le comportement d'avant. */
  overflow:hidden;overflow:clip;
  margin-top:26px;
}
.calc-g{padding:22px 26px}
.calc-p{
  padding:24px 26px;background:rgba(255,255,255,.05);
  border-left:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;
}
.calc-lbl{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:9px}
.calc-field{margin-bottom:16px}

/* ── La durée ──────────────────────────────────────────────────────────────
   Avant : un « − » et un « + » aux deux bords opposés de la carte, avec le
   nombre au milieu — l'œil et la main devaient traverser toute la largeur à
   chaque jour ajouté. Les deux boutons sont maintenant côte à côte, et la
   barre coulissante fait le gros du chemin d'un seul geste. */
.duree{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:11px}
.duree-n{display:flex;align-items:baseline;gap:9px}
.duree-n b{font-size:44px;font-weight:700;line-height:.9;letter-spacing:var(--l-1);
  font-variant-numeric:tabular-nums}
.duree-n i{font-style:normal;font-size:var(--s-3);color:rgba(255,255,255,.6)}
.duree-pm{display:flex;gap:8px}
.step-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  color:#fff;font-size:var(--s-6);line-height:1;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv)}
.step-btn:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6)}
.step-btn:disabled{opacity:.28;cursor:not-allowed}

.gliss{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer;display:block;margin:0;
}
.gliss::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-f);
  background:rgba(255,255,255,.18)}
.gliss::-moz-range-track{height:6px;border-radius:var(--r-f);background:rgba(255,255,255,.18)}
.gliss::-moz-range-progress{height:6px;border-radius:var(--r-f);background:var(--gold)}
.gliss::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;background:#fff;margin-top:-9px;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:transform var(--mv-1) var(--mv)}
.gliss::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.gliss:hover::-webkit-slider-thumb{transform:scale(1.12)}
.gliss:active::-webkit-slider-thumb{transform:scale(1.2)}

/* Le prix du jour suivant. Le barème est dégressif : savoir ce que coûte le
   jour d'après est l'information la plus utile au moment de choisir. */
.duree-suiv{font-size:var(--s-2);color:rgba(255,255,255,.58);margin:1px 0 11px;line-height:var(--h-4)}
.duree-suiv b{color:var(--gold);font-weight:700}
.duree-suiv sup{font-size:.7em}

.presets{display:flex;gap:8px;flex-wrap:wrap}
.presets.deux{display:grid;grid-template-columns:1fr 1fr}
.chip{border:1.5px solid rgba(255,255,255,.22);border-radius:var(--r-f);padding:9px 16px;
  font-size:var(--s-3);font-weight:500;color:rgba(255,255,255,.78);
  transition:background var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv),color var(--mv-1) var(--mv)}
.chip:hover{border-color:rgba(255,255,255,.6);color:#fff}
.chip[aria-pressed="true"]{background:#fff;border-color:#fff;color:var(--ink);font-weight:700}
.chip-s{padding:7px 13px;font-size:var(--s-2);flex:1 1 auto;text-align:center}
/* Cinq cases carrées : c'est le maximum accepté par le tunnel de paiement
   (api/checkout.js), inutile d'en proposer plus. */
.presets.qte{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.chip-q{padding:8px 0;font-size:var(--s-4);font-weight:700;text-align:center;border-radius:var(--r);
  font-variant-numeric:tabular-nums}
.qte-note{font-size:var(--s-3);line-height:var(--h-4);color:rgba(255,255,255,.62);margin:8px 0 0;max-width:var(--lire)}
.qte-note b{color:var(--gold);font-weight:700}

/* Le prix de l'option est écrit sur l'option. Avant, il fallait choisir puis
   descendre lire le détail pour savoir ce que le choix coûtait. */
.chip-p{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  border-radius:var(--r);padding:10px 14px;text-align:left;line-height:var(--h-2)}
/* Les deux boutons ont la même hauteur, mais leur contenu s'empilait par le
   haut : un libellé sur trois lignes à gauche, une seule à droite, et les
   deux prix se retrouvaient à 38 px l'un de l'autre. Le prix se cale en bas
   des deux côtés. */
.chip-p i{font-style:normal;font-size:var(--s-2);font-weight:700;color:var(--gold);
  margin-top:auto}
.chip-p[aria-pressed="true"] i{color:var(--vif-d)}

/* ── Le panneau du prix ────────────────────────────────────────────────── */
.calc-somme{display:block;font-size:clamp(40px,4.6vw,58px);font-weight:700;
  letter-spacing:var(--l-1);line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.calc-day{font-size:var(--s-3);color:rgba(255,255,255,.6);line-height:var(--h-4);
  max-width:var(--lire);
  padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid rgba(255,255,255,.13)}
.calc-day b{color:#fff;font-weight:700}
.calc-detail{margin-bottom:18px}
.calc-line{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:var(--s-3)}
.calc-line span{color:rgba(255,255,255,.6)}
.calc-line b{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-line.off span,.calc-line.off b{opacity:.34;text-decoration:line-through}
/* margin-top:auto poussait le bouton tout en bas et concentrait TOUT
   l'excédent de hauteur en un seul trou noir de 178 px au milieu du panneau.
   Le vide passe sous le bouton, où il se lit comme une marge. */
.calc .btn{width:100%;margin-top:26px}
.calc-legal{font-size:var(--s-2);color:rgba(255,255,255,.52);margin-top:12px;line-height:var(--h-4);text-align:center}

/* Rien sur grand écran : le total y est déjà à hauteur des yeux. */
.calc-fixe{display:none}

@media(max-width:860px){
  .calc{grid-template-columns:1fr}
  .calc-fixe{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    /* 68px : la hauteur de l'en-tête du site, mesurée. En dessous, le
       rappel se glisserait derrière lui. */
    /* 76 px = la hauteur de l'en-tête (68) plus une marge. Mais SOUS 561 px,
       le sélecteur Particuliers/Pro passe sur une deuxième ligne et l'en-tête
       fait 121 px — mesuré. La barre allait donc se cacher derrière lui. */
    position:sticky;top:76px;z-index:3;margin:-20px -20px 16px;padding:13px 20px;
    background:rgba(14,31,53,.94);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.13);
  }
  .calc-fixe span{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
    text-transform:uppercase;color:rgba(255,255,255,.52)}
  .calc-fixe b{font-size:27px;font-weight:700;letter-spacing:var(--l-2);
    font-variant-numeric:tabular-nums}
  .calc-p{border-left:0;border-top:1px solid rgba(255,255,255,.1)}
  .calc-g,.calc-p{padding:20px}
  .duree-n b{font-size:38px}
  .presets.deux{grid-template-columns:1fr}
}
/* Sous 561 px le sélecteur Particuliers/Pro passe sur une deuxième ligne et
   l'en-tête passe de 68 à 121 px — mesuré. Sans ce rattrapage, la barre de
   total va se cacher derrière lui. Placé APRÈS le bloc 860 px, qui
   redéclare .calc-fixe et gagnerait sinon. */
@media(max-width:560px){.calc-fixe{top:129px}}
@media(max-width:420px){
  .chip-s{font-size:var(--s-2);padding:7px 10px}
}

/* ══ MUR DE VIDÉOS ══ */
/* La couleur de la barre de défilement suivait le fond sombre en dur.
   L'écran des clients est passé sur fond clair : elle y aurait été
   invisible. Elle prend maintenant la couleur du trait courant. */
.rail{display:flex;gap:14px;margin-top:32px;padding:2px 0 16px;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--line-2, rgba(14,31,53,.22)) transparent}
.e-ink .rail,.e-blue .rail{scrollbar-color:rgba(255,255,255,.22) transparent}
.rail::-webkit-scrollbar{height:5px}
.rail::-webkit-scrollbar-thumb{background:rgba(14,31,53,.22);border-radius:var(--r-f)}
.e-ink .rail::-webkit-scrollbar-thumb,.e-blue .rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.vcard{position:relative;flex:0 0 auto;width:clamp(176px,17vw,206px);aspect-ratio:9/16;border-radius:var(--r-l);overflow:hidden;scroll-snap-align:start;background:var(--ink-s)}
.vcard video,.vcard>img{width:100%;height:100%;object-fit:cover}
.vcard::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(8,18,32,.88) 0%,rgba(8,18,32,.1) 44%,transparent 66%)}
.vplay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;width:100%;color:#fff}
.vplay span{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.42);display:flex;align-items:center;justify-content:center;transition:transform var(--mv-2) var(--mv),background var(--mv-2) var(--mv)}
.vplay:hover span{transform:scale(1.08);background:rgba(255,255,255,.3)}
.vcard.is-playing .vplay span{opacity:0}
.vmeta{position:absolute;left:16px;right:16px;bottom:15px;z-index:3;pointer-events:none}
/* Sans couleur déclarée, le prénom héritait de celle de l'écran : blanc
   tant que l'écran était sombre, invisible dès qu'il est devenu clair.
   La carte est sombre en toutes circonstances, le blanc l'est aussi. */
.vmeta b{display:block;font-size:var(--s-3);font-weight:700;letter-spacing:var(--l-3);color:#fff}
.vmeta span{font-size:var(--s-1);color:rgba(255,255,255,.58)}
.vmeta .stars{font-size:var(--s-1);display:block;margin-bottom:4px}
/* « background:none » laissait voir l'écran à travers : sur fond sombre
   c'était une carte creuse, sur fond clair c'était un trou blanc. Elle
   porte maintenant son propre fond, un ton plus clair que les autres
   pour rester lisible comme un emplacement libre. */
.vide{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--ink-s2);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.vide::after{display:none}   /* pas de dégradé : aucun texte à détacher */
.vide p{font-size:var(--s-2);color:rgba(255,255,255,.5);line-height:var(--h-4)}
.vide b{display:block;color:rgba(255,255,255,.85);font-size:var(--s-3);margin-bottom:6px}
@media(max-width:640px){.vcard{width:min(62vw,220px)}}


/* ══ ÉCRAN ZONE ══ */
.villes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--e-4);margin-top:22px}
/* Mesuré : à six villes sur deux colonnes, l'écran faisait déjà 928 px pour
   900 de haut. À neuf villes il passait à 1085 — les prochaines ouvertures
   et la liste d'attente tombaient sous la ligne de flottaison. Trois
   colonnes sur grand écran ramènent la liste à trois rangées. */
@media(min-width:980px){.villes{grid-template-columns:repeat(3,1fr);gap:0 var(--e-2)}}
/* Mesuré : en anglais la page débordait de 18px sur le côté d'un téléphone,
   en russe de 49px — et de 89px sur une tablette de 768px. Cause :
   l'étiquette « Livré 7j/7 » devient « Доставка 7 дней в неделю », deux fois
   plus longue, et refusait à la fois de se réduire et de passer à la ligne.
   Elle a maintenant le droit de descendre en dessous. Sur un grand écran,
   où tout tient sur une ligne, rien ne change. */
/* Les neuf lignes portaient toutes la même étiquette « Livré 7j/7 » : sur le
   nom le plus long elle passait à la ligne et cette ligne-là devenait plus
   haute de 27 px que ses voisines. L'information est dite une seule fois,
   dans l'intro de l'écran ; la ligne n'a plus qu'un nom et un prix, et
   toutes ont exactement la même hauteur. */
.ville{display:block;padding:11px 0;border-bottom:1px solid var(--line)}
.ville>div{min-width:0}
.ville b{font-size:var(--s-6);font-weight:700;letter-spacing:var(--l-3)}
.ville span{font-size:var(--s-2);color:var(--ink-3);display:block;margin-top:2px}
.tag{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);text-transform:uppercase;color:var(--green);flex-shrink:0}
.tag-ask{color:var(--ink-3)}
/* Une ville qui a sa propre page devient cliquable. Le chevron dit que la
   ligne mène quelque part — sans lui, quatre lignes sur neuf seraient des
   liens sans que rien ne le montre. */
.ville-l b{transition:color var(--mv-1) var(--mv)}
.ville-l b::after{content:'\00a0›';color:var(--vif);font-weight:700}
.ville-l:hover b{color:var(--vif)}
@media(max-width:700px){
  .villes{grid-template-columns:1fr}
}

/* ══ ÉCRAN QUESTIONS ══ */
/* La question et son filet faisaient 720 px, la réponse 346 : un décrochage
   de 374 px à chaque ouverture. Le plafond de lecture était posé DEUX fois,
   une fois sur le bloc et une fois sur le paragraphe, et le second était
   bien trop serré.
   Un seul plafond, sur le bloc : question, filet et réponse partagent la même
   largeur, et la ligne reste dans la fourchette confortable. */
.faq{max-width:580px;margin-top:36px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 44px 20px 0;font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);cursor:pointer;list-style:none;position:relative;line-height:var(--h-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--vif);border-bottom:2px solid var(--vif);transform:translateY(-70%) rotate(45deg);transition:transform var(--mv-2) var(--mv)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details[open] summary{color:var(--vif)}
.faq p{padding:0 36px 24px 0;font-size:var(--s-4);color:var(--ink-2);line-height:var(--h-5)}

/* ══ ÉCRAN FINAL ══ */
.fin{text-align:center}
.fin .titre{max-width:none;margin:0 auto}
.fin .dire{margin:26px auto 0}
.fin-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.fin-q{border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:56px auto 0;text-align:left;max-width:560px}
.fin-q p{font-size:var(--s-4);color:rgba(255,255,255,.85);margin-bottom:11px;line-height:var(--h-5)}
.fin-q cite{font-style:normal;font-size:var(--s-2);color:rgba(255,255,255,.55)}
/* Les colonnes du pied et la signature sont alignées à gauche ; la ligne
   légale était centrée toute seule au milieu. Elle rentre dans le rang. */
.pied{font-size:var(--s-3);color:rgba(255,255,255,.52);line-height:var(--h-5);
  margin-top:18px;text-align:left;max-width:var(--lire)}
.pied a{border-bottom:1px solid rgba(255,255,255,.28)}

/* ══ BARRE D'INFO DU HAUT ══
   Reprise du site officiel. Elle affiche la température réelle à Nice et le
   délai de livraison, qui dépend de l'heure : commande avant 20h → livré
   demain, sinon après-demain ; Express (sous 2h) seulement avant 18h.
   Ces deux coupures viennent du code du site, elles ne sont pas inventées. */
.infobar{
  background:var(--ink);color:rgba(255,255,255,.82);font-size:var(--s-2);
  display:none;align-items:center;justify-content:center;gap:10px;
  /* padding symétrique : la croix de fermeture réservait 44 px à droite et
     24 à gauche, le texte « centré » était donc décalé de 10 px. */
  padding:11px 44px;position:relative;text-align:center;
}
.infobar.on{display:flex}
.infobar strong{color:#fff;font-weight:700}
.infobar .pt{width:8px;height:8px;border-radius:50% 50% 50% 0;transform:rotate(-25deg);background:var(--gold);flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.infobar-x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;color:rgba(255,255,255,.5);font-size:var(--s-6);line-height:1;display:flex;align-items:center;justify-content:center}
.infobar-x:hover{color:#fff;background:rgba(255,255,255,.1)}
/* La croix fait 30 x 30. J'ai essayé de l'agrandir à 44 px avec une plaque
   invisible : ça ne peut pas marcher. La barre d'info ne mesure que 41 px de
   haut, donc une cible de 44 px déborde forcément sur la barre d'aperçu
   au-dessus et sur l'en-tête en dessous — mesuré, ce sont elles qui
   répondaient au doigt, pas la croix.
   Et la norme demande 24 x 24 (WCAG 2.5.8, niveau AA) : 30 x 30 passe. Aller
   à 44 supposerait d'épaissir le bandeau, ce qui est un choix de dessin, pas
   une correction. On laisse. */
@media(max-width:560px){.infobar{font-size:var(--s-2);padding:10px 38px}.infobar .sec{display:none}}

/* ══ SÉLECTEUR DE LANGUE ══
   Même clé de mémorisation que le site officiel ('locair-lang') : un visiteur
   qui a choisi l'anglais sur locair.fr retrouve l'anglais ici. */
.lang{position:relative;flex-shrink:0}
/* Deux pastilles côte à côte — « Réserver » plein et « FR » cerclé — se
   disputaient le regard : on ne savait plus laquelle était l'action. La
   langue perd son contour et prend le même traitement que le menu ☰ (fond
   au survol) : il ne reste qu'un seul bouton dessiné dans la barre, et
   c'est celui qui compte. Le chevron dit que ça ouvre quelque chose. */
.lang-b{display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:var(--r-f);font-size:var(--s-3);font-weight:700;transition:background var(--mv-1) var(--mv)}
.lang-b:hover{background:rgba(14,31,53,.06)}
.bar .lang-b:hover{background:rgba(255,255,255,.12)}
.lang-b svg{opacity:.55}
.lang-b::after{
  content:"";width:0;height:0;border:4px solid transparent;
  border-top-color:currentColor;opacity:.45;margin-top:4px;
  transition:transform var(--mv-1) var(--mv);
}
.lang-b[aria-expanded="true"]::after{transform:translateY(-4px) rotate(180deg)}
.lang-l{
  position:absolute;top:calc(100% + 8px);right:0;min-width:184px;z-index:20;
  background:#fff;border-radius:var(--r);padding:7px;
  box-shadow:var(--o-3);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--mv-1) var(--mv),transform var(--mv-1) var(--mv),visibility var(--mv-1) var(--mv);
}
.lang-l.on{opacity:1;visibility:visible;transform:none}
.lang-l button{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:var(--r-s);font-size:var(--s-3);color:var(--ink);text-align:left;transition:background var(--mv-1) var(--mv)}
.lang-l button:hover{background:var(--mist)}
.lang-l button[aria-selected="true"]{font-weight:700;background:var(--vif-clair);color:var(--vif)}
.lang-l b{font-size:var(--s-4);line-height:1}
/* dans le menu plein écran, la même liste mais à plat */
.menu-lang{display:flex;gap:8px;flex-wrap:wrap}
.menu-lang button{
  border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r-f);padding:10px 17px;
  font-size:var(--s-3);color:rgba(255,255,255,.75);transition:all var(--mv-1) var(--mv);
}
.menu-lang button:hover{border-color:rgba(255,255,255,.55);color:#fff}
.menu-lang button[aria-selected="true"]{background:#fff;border-color:#fff;color:var(--ink);font-weight:700}

/* ══ MENU ══
   La version B n'avait aucun menu sur téléphone : les espaces client et
   ambassadeur étaient donc inaccessibles. C'est le manque le plus grave. */
.burger{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--mv-1) var(--mv)}
.burger:hover{background:rgba(0,0,0,.06)}
.bar .burger:hover{background:rgba(255,255,255,.12)}
.burger span{display:block;width:19px;height:1.8px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:19px;height:1.8px;background:currentColor}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu{
  position:fixed;inset:0;z-index:960;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;padding:24px var(--pad) max(28px,env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity var(--mv-2) var(--mv),visibility var(--mv-2) var(--mv);
  overflow-y:auto;
}
.menu.on{opacity:1;visibility:visible}
.menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.menu-top .logo{color:#fff}
.menu-x{width:44px;height:44px;border-radius:50%;color:rgba(255,255,255,.7);font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center}
.menu-x:hover{background:rgba(255,255,255,.12);color:#fff}
.menu-grp{margin-bottom:30px}
/* Mesuré : .35 de blanc sur le marine ne donne que 3,17 pour 1, sous le
   minimum de 4,5 exigé pour du petit texte. .52 donne 5,37. */
.menu-t{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:14px}
.menu a.ml{display:block;font-size:var(--s-7);font-weight:700;letter-spacing:var(--l-2);padding:9px 0;transition:color var(--mv-1) var(--mv)}
.menu a.ml:hover{color:var(--gold)}
.menu a.ms{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:var(--s-4);font-weight:500;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.11);transition:color var(--mv-1) var(--mv)}
.menu a.ms:hover{color:var(--gold)}
/* 3,73 pour 1 auparavant : les descriptions du menu étaient sous le seuil. */
.menu a.ms i{font-style:normal;font-size:var(--s-2);color:rgba(255,255,255,.55)}
.menu-cta{margin-top:auto;padding-top:26px;display:grid;gap:10px}
.menu-cta .btn{width:100%}

/* ══ ÉCRAN ESPACES ══ */
.portes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.porte{
  background:var(--ink);color:#fff;border-radius:var(--r-l);padding:var(--e-1);
  display:flex;flex-direction:column;transition:transform var(--mv-2) var(--mv);
}
.porte:hover{transform:translateY(-3px)}
.porte.or{background:var(--gold);color:var(--ink)}
.porte-k{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.porte.or .porte-k{color:rgba(14,31,53,.82)}
.porte h3{font-size:var(--t-5);letter-spacing:var(--l-2);margin-bottom:12px;line-height:var(--h-1)}
.porte>p{font-size:var(--s-3);color:rgba(255,255,255,.6);line-height:var(--h-4);margin-bottom:20px}
.porte.or>p{color:rgba(14,31,53,.84)}
.porte ul{list-style:none;display:grid;gap:9px;margin-bottom:26px}
.porte li{font-size:var(--s-3);color:rgba(255,255,255,.78);line-height:var(--h-4);
  position:relative;padding-left:16px}
.porte li::before{content:'→';color:var(--gold);position:absolute;left:0;top:0}
.porte.or li{color:rgba(14,31,53,.85)}
.porte.or li::before{color:rgba(14,31,53,.55)}
.porte .btn{margin-top:auto;width:100%}
@media(max-width:820px){.portes{grid-template-columns:1fr}}

/* ══ PIED DE PAGE ══ */
/* ── LE HAUT DU PIED DE PAGE ───────────────────────────────────────────
   La marque à gauche, les quatre colonnes de liens à droite. C'est la
   forme des pieds de page des sites de service : on lit d'abord QUI parle
   et ce qu'il fait, ensuite seulement la liste des liens.
   Sous 980 px la marque repasse au-dessus des colonnes — deux colonnes de
   liens de 120 px de large ne sont plus des colonnes. */
.pied-haut{display:grid;grid-template-columns:minmax(210px,.7fr) 3fr;gap:var(--e-2);align-items:start}
.pied-marque{max-width:34ch}
.pied-bl{margin:10px 0 0;font-size:var(--s-5);color:var(--gold);letter-spacing:var(--l-4)}
.pied-pitch{margin:14px 0 0;font-size:var(--s-3);line-height:var(--h-3);color:rgba(255,255,255,.6)}
@media(max-width:980px){
  .pied-haut{grid-template-columns:1fr;gap:var(--e-2)}
  .pied-marque{max-width:none}
}

/* ── LES PREUVES QUI NE VIENNENT PAS DE NOUS ───────────────────────────
   Trois lignes, séparées par un filet du reste. Écrites, pas dessinées :
   les logos De'Longhi, Stripe et Google appartiennent à leurs
   propriétaires et nous n'avons pas leur autorisation.
   Le gras porte le nom, le reste est en retrait — de loin on lit les trois
   noms, de près on lit la phrase entière. */
.preuves{
  list-style:none;margin:var(--e-2) 0 0;padding:22px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:12px 34px;
}
.preuves li{margin:0;font-size:var(--s-2);line-height:var(--h-3);color:rgba(255,255,255,.56)}
/* La ligne légale était bornée à la largeur d'un paragraphe de lecture
   (34 signes) : héritée du temps où elle suivait une signature centrée, elle
   se cassait en quatre lignes de 300 px sous un pied de page large. Un
   SIRET et une adresse ne se lisent pas comme un paragraphe. */
.pied-bloc .pied{max-width:74ch}
.preuves b{font-weight:700;color:rgba(255,255,255,.86)}

.pied-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:52px;padding-top:36px;border-top:1px solid rgba(255,255,255,.14);text-align:left}
/* h3 ET h4 : index.html n'est jamais touché par cette session et garde ses
   h4. Le style vaut donc pour les deux, sinon son pied de page perdrait sa
   mise en forme. */
.pied-grid h3,.pied-grid h4{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);text-transform:uppercase;color:rgba(255,255,255,.52);margin-bottom:14px}
.pied-grid li{list-style:none;margin-bottom:9px}
.pied-grid a{font-size:var(--s-3);color:rgba(255,255,255,.6);transition:color var(--mv-1) var(--mv)}
.pied-grid a:hover{color:#fff}
@media(max-width:880px){.pied-grid{grid-template-columns:repeat(2,1fr);gap:26px}}
@media(max-width:520px){.pied-grid{grid-template-columns:1fr;gap:24px}}
.pied-grid li{font-size:var(--s-3);color:rgba(255,255,255,.6);line-height:var(--h-4)}

/* ══ CONSENTEMENT AUX COOKIES ══
   Obligatoire avant tout dépôt de traceur publicitaire (CNIL). Refuser doit
   être aussi simple qu'accepter : les deux boutons ont donc le même poids
   visuel. Même clé de stockage que le site officiel, un choix fait là-bas
   vaut ici. */
.cook{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:980;
  background:var(--ink);color:rgba(255,255,255,.82);border-radius:var(--r-l);
  padding:20px 22px;max-width:520px;
  box-shadow:var(--o-3);
  display:none;
}
.cook.on{display:block}
.cook p{font-size:var(--s-3);line-height:var(--h-4);margin-bottom:16px}
.cook a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.cook-b{display:flex;gap:10px;flex-wrap:wrap}
.cook-b button{
  flex:1;min-width:120px;padding:12px 18px;border-radius:var(--r-f);
  font-size:var(--s-3);font-weight:700;transition:background var(--mv-1) var(--mv),border-color var(--mv-1) var(--mv);
}
.cook-oui{background:#fff;color:var(--ink)}
.cook-oui:hover{background:rgba(255,255,255,.86)}
.cook-non{border:1.5px solid rgba(255,255,255,.3);color:#fff}
.cook-non:hover{border-color:rgba(255,255,255,.65)}
@media(max-width:900px){.cook{bottom:calc(14px + 76px)}}

/* ══ BARRE MOBILE ══ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:11px var(--pad) calc(11px + env(safe-area-inset-bottom));
  gap:10px;align-items:center;
}
.mbar .btn{flex:1;padding:15px 18px;font-size:var(--s-4)}
.mbar-tel{width:50px;height:50px;border-radius:50%;background:var(--mist);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(max-width:900px){
  .mbar{display:flex}
  .ecran{padding-bottom:calc(76px + 76px)}   /* la barre ne doit rien recouvrir */
}

/* ══════════════════════════════════════════════════════════════════════════
   LE BLOG — LES GUIDES
   ─────────────────────────────────────────────────────────────────────────
   Le site n'avait AUCUNE page de texte. Tout tenait en une seule page qui
   défile, en « noindex » pour la version B — donc Google n'avait qu'une
   seule porte d'entrée à proposer : la page d'accueil, sur le seul mot
   « location climatiseur Nice ». Quelqu'un qui tape « rafraîchisseur ou
   climatiseur », « louer ou acheter une clim », « installer une clim sans
   percer » ne trouvait rien chez nous.

   Ces pages-ci sont l'inverse d'un écran : on ne les fait pas défiler pour
   avancer dans une histoire, on les LIT. Donc :
     · pas de 100svh, pas d'accrochage, pas de points de progression ;
     · une colonne de 680 px — environ 70 signes par ligne, la largeur où
       l'œil retrouve le début de la ligne suivante sans se perdre ;
     · le texte courant passe en --ink (et non --ink-2) : sur un écran on
       lit trois phrases, ici on en lit cent.
   Tout le reste — couleurs, police, barre, pied de page, goutte — vient de
   la même feuille : un guide doit ressembler au site, pas à un blog.
══════════════════════════════════════════════════════════════════════════ */

/* Une page qui se lit n'a pas besoin de l'accrochage au défilement. */
.page{display:block}

/* La barre dit où l'on est. Le filet la sépare du nom : « Loc'Air | Guides »
   se lit comme un chemin, pas comme deux marques. */
.bar-fil{
  margin-left:12px;padding-left:14px;margin-right:auto;
  border-left:1px solid rgba(255,255,255,.2);
  font-size:var(--s-2);font-weight:700;letter-spacing:var(--l-5);
  text-transform:uppercase;color:rgba(255,255,255,.72);white-space:nowrap;
}
.bar-fil:hover{color:#fff}
@media(max-width:560px){.bar-fil{display:none}}

/* ── L'EN-TÊTE ─────────────────────────────────────────────────────────────
   Marine, comme le pied de page : le texte est encadré par les deux bouts
   sombres de la marque, et la lecture se fait sur du blanc entre les deux. */
.tete{background:var(--ink);color:#fff;padding:var(--e-4) 0 var(--e-3)}
.tete .in{max-width:var(--max)}
.tete .kicker{color:var(--gold);margin-bottom:20px}
.tete h1{
  font-size:var(--t-3);font-weight:700;letter-spacing:var(--l-1);
  /* mesuré : 19ch donnait 24 signes par ligne, donc un titre en quatre
     lignes sur les pages de ville. 26ch en donne 34, soit deux lignes. */
  line-height:1.06;max-width:26ch;
}
.tete h1 em{font-style:normal;color:var(--gold)}
.tete .dire{color:rgba(255,255,255,.72);max-width:56ch}
/* La ligne de service d'un guide : date, temps de lecture, rubrique. */
.tete-meta{
  margin-top:26px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-size:var(--s-2);color:rgba(255,255,255,.62);
}
.tete-meta b{font-weight:700;color:rgba(255,255,255,.86)}
/* Le fil d'Ariane : Google l'affiche sous le titre dans ses résultats, et
   il donne au lecteur le chemin du retour. */
.fil{font-size:var(--s-2);color:rgba(255,255,255,.55);margin-bottom:22px}
.fil a{color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:3px}
.fil a:hover{color:#fff}
.fil span{margin:0 7px;color:rgba(255,255,255,.5)}   /* mesuré : .38 donnait 3,50:1, sous la norme */

/* ── LA COLONNE DE LECTURE ─────────────────────────────────────────────────
   680 px : la largeur au-delà de laquelle l'œil saute des lignes. */
.mes{max-width:680px;margin:0 auto;padding:0 var(--pad);width:100%}
.art{padding:var(--e-4) 0 var(--e-4)}
.art > .mes > p{margin-bottom:20px;color:var(--ink);line-height:var(--h-5)}
.art > .mes > p.chapo{font-size:var(--t-6);line-height:var(--h-4);margin-bottom:var(--e-2)}
.art h2{
  font-size:var(--t-5);font-weight:700;letter-spacing:var(--l-2);line-height:var(--h-1);
  margin:var(--e-3) 0 16px;scroll-margin-top:96px;
}
.art h3{font-size:var(--s-6);font-weight:700;letter-spacing:var(--l-3);margin:30px 0 10px}
.art a{color:var(--vif);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.art a:hover{color:var(--vif-d)}
.art b,.art strong{font-weight:700;color:var(--ink)}
/* La puce est la goutte de la marque, en petit. Un signe qui revient fait
   une identité ; une puce ronde ne dit rien. */
.art ul{list-style:none;margin:0 0 24px}
.art li{position:relative;padding-left:26px;margin-bottom:11px;line-height:var(--h-4)}
.art li::before{
  content:"";position:absolute;left:3px;top:.58em;width:7px;height:7px;
  background:var(--vif);border-radius:50% 50% 50% 0;transform:rotate(-25deg);
}
/* ── LE SOMMAIRE ───────────────────────────────────────────────────────────
   Il n'est pas décoratif : il dit en dix secondes si la page répond à la
   question posée, et il évite de faire défiler pour le savoir. */
.som{margin-bottom:var(--e-3);padding:20px 0 4px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.som p{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.som ol{list-style:none;counter-reset:s}
.som li{counter-increment:s;margin-bottom:10px;padding-left:28px;position:relative;
  font-size:var(--s-4);line-height:var(--h-3)}
.som li::before{content:counter(s);position:absolute;left:0;top:1px;
  font-size:var(--s-2);font-weight:700;color:var(--vif);
  font-variant-numeric:tabular-nums;
  /* La goutte des listes du texte ne doit PAS s'appliquer ici : sans cette
     remise à zéro, le chiffre du sommaire s'affichait à l'intérieur d'une
     goutte de 7 px, donc illisible. */
  width:auto;height:auto;background:none;border-radius:0;transform:none}
.som a{color:var(--ink);text-decoration:none;font-weight:500}
.som a:hover{color:var(--vif);text-decoration:underline;text-underline-offset:3px}

/* ── LE CHIFFRE QUI COMPTE ─────────────────────────────────────────────────
   Un filet en haut, comme partout ailleurs sur le site — pas un cadre de
   couleur. Le chiffre est toujours vrai et vérifiable sur le site. */
.chif{margin:var(--e-2) 0;padding-top:18px;border-top:1px solid var(--line)}
.chif b{display:block;font-size:var(--n-3);font-weight:700;letter-spacing:var(--l-1);
  line-height:1.04;color:var(--ink)}
.chif span{display:block;margin-top:8px;font-size:var(--s-3);color:var(--ink-2);
  line-height:var(--h-4);max-width:52ch}

/* ── LE TABLEAU D'UN GUIDE ─────────────────────────────────────────────────
   Même grammaire que le tableau « acheter ou louer » : filets, pas de
   cadres, et il défile tout seul quand l'écran est trop étroit. */
.tab{margin:var(--e-2) 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab table{width:100%;border-collapse:collapse;min-width:520px;text-align:left}
.tab th,.tab td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;
  font-size:var(--s-3);line-height:var(--h-4)}
.tab thead th{border-top:0;padding-top:0;font-size:var(--s-2);font-weight:700;
  letter-spacing:var(--l-5);text-transform:uppercase;color:var(--ink-3)}
.tab tbody th{font-weight:700;color:var(--ink);width:34%}
.tab td{color:var(--ink-2)}
.tab td b{color:var(--ink)}

/* ── L'APPEL DE FIN ────────────────────────────────────────────────────────
   Un guide se termine sur ce qu'on peut faire, pas sur un point final. */
.appel{background:var(--mist);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:var(--e-3) 0}
.appel h2{font-size:var(--t-5);font-weight:700;letter-spacing:var(--l-2);
  line-height:var(--h-1);margin:0 0 12px}
.appel p{color:var(--ink-2);margin-bottom:22px}
.appel .btn{margin-right:10px}
.appel .mini{margin-top:18px}

/* ── LIRE AUSSI ────────────────────────────────────────────────────────────
   Deux guides voisins, choisis à la main. Pas « articles liés » calculés au
   hasard : chaque lien répond à la question que le texte vient d'ouvrir. */
.suite{padding:var(--e-3) 0 var(--e-4)}
.suite > .mes > p{font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.suite-l{display:grid;gap:var(--e-1);grid-template-columns:1fr 1fr}
.suite-l a{padding-top:16px;border-top:1px solid var(--line);display:block;
  transition:border-color var(--mv-1) var(--mv)}
.suite-l a:hover{border-top-color:var(--vif)}
.suite-l b{display:block;font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);
  line-height:var(--h-2);color:var(--ink)}
.suite-l span{display:block;margin-top:7px;font-size:var(--s-3);color:var(--ink-2);
  line-height:var(--h-3)}
.suite-l a:hover b{color:var(--vif)}
@media(max-width:700px){.suite-l{grid-template-columns:1fr}}

/* ── LA LISTE DES GUIDES ───────────────────────────────────────────────────
   Une liste, pas une grille de vignettes : sans photo, une vignette est un
   rectangle gris. Chaque ligne porte sa rubrique, son titre, sa promesse et
   son temps de lecture — de quoi choisir sans cliquer. */
.guides{padding:var(--e-4) 0}
.guide{display:grid;grid-template-columns:1fr auto;gap:8px var(--e-2);align-items:start;
  padding:var(--e-1) 0;border-top:1px solid var(--line);
  transition:border-color var(--mv-1) var(--mv)}
.guide:hover{border-top-color:var(--vif)}
.guide:last-child{border-bottom:1px solid var(--line)}
.guide-k{grid-column:1/-1;font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
  text-transform:uppercase;color:var(--vif)}
.guide h2{font-size:var(--t-5);font-weight:700;letter-spacing:var(--l-2);
  line-height:var(--h-1);max-width:30ch}
.guide:hover h2{color:var(--vif)}
.guide p{grid-column:1;font-size:var(--s-4);color:var(--ink-2);line-height:var(--h-4);
  max-width:60ch}
.guide-t{grid-column:2;grid-row:2;font-size:var(--s-2);color:var(--ink-3);
  white-space:nowrap;padding-top:8px;font-variant-numeric:tabular-nums}
@media(max-width:620px){
  .guide{grid-template-columns:1fr}
  .guide-t{grid-column:1;grid-row:auto;padding-top:0}
}

/* ── LES QUARTIERS D'UNE VILLE ─────────────────────────────────────────────
   Des noms de lieux, pas des liens : une pastille par quartier, à plat.
   C'est la seule liste du site qui se lit en diagonale — on y cherche SON
   quartier, on ne la lit pas en entier. */
.qrt{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px}
.qrt span{
  padding:7px 13px;border-radius:var(--r-f);background:var(--mist);
  border:1px solid var(--line);font-size:var(--s-3);color:var(--ink-2);
  line-height:var(--h-2);
}

/* ── LE HAUT D'UNE PAGE DE VILLE ───────────────────────────────────────────
   Quelqu'un reste deux minutes. Tout ce qui compte doit tenir avant qu'il
   ait fait défiler : ce qu'on loue, ce que ça coûte, et le bouton. Les
   boutons entrent donc DANS l'en-tête sombre, sous les chiffres. */
.tete-act{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tete .btn-1{background:#fff;color:var(--ink)}
.tete .btn-1:hover{background:rgba(255,255,255,.88)}
.tete .btn-out{border:1px solid rgba(255,255,255,.38);color:#fff}
.tete .btn-out:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.tete-meta{margin-top:24px}

/* ── L'ESSENTIEL ───────────────────────────────────────────────────────────
   Cinq lignes, juste sous l'en-tête. C'est la page pour qui n'en lira pas
   plus : si le visiteur repart après ce bloc, il sait déjà l'essentiel —
   le prix, ce qui est inclus, et ce qu'on ne lui demandera pas. */
.essentiel{background:var(--mist);border-bottom:1px solid var(--line);padding:var(--e-2) 0}
.essentiel-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(5,1fr);gap:var(--e-1)}
.essentiel div{border-top:2px solid var(--vif);padding-top:14px;min-width:0}
.essentiel b{display:block;font-size:var(--s-6);font-weight:700;letter-spacing:var(--l-3);
  line-height:var(--h-2);color:var(--ink)}
.essentiel span{display:block;margin-top:5px;font-size:var(--s-2);color:var(--ink-2);
  line-height:var(--h-3)}
@media(max-width:900px){.essentiel-in{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.essentiel-in{grid-template-columns:1fr;gap:16px}}

/* ── QUELQU'UN, PAS UNE ENTREPRISE ─────────────────────────────────────────
   Le site disait « nous » du début à la fin. Or les clients, eux, écrivent
   le prénom d'Aly dans leurs avis Google — c'est lui qui sonne et qui pose.
   Ce bloc est le seul de la page où quelqu'un parle à la première personne.
   L'avis cité est réel et déjà publié sur locair.fr, avec son auteur. */
.mot{padding:var(--e-3) 0}
.mot-in{max-width:680px;margin:0 auto;padding:0 var(--pad)}
.mot p{font-size:var(--t-6);line-height:var(--h-4);color:var(--ink);
  letter-spacing:var(--l-4)}
.mot .mot-q{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:var(--s-3);line-height:var(--h-4);color:var(--ink-2);max-width:var(--lire)}
.mot .mot-q b{color:var(--ink)}
.mot-n{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:var(--s-3);color:var(--ink-2)}
.mot-n b{font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);color:var(--ink)}
.mot-n .stars{color:var(--gold-txt);letter-spacing:1.5px;font-size:var(--s-2)}

/* ── LE SOCLE DU PREMIER ÉCRAN ─────────────────────────────────────────────
   Les cinq garanties entrent DANS l'écran d'accueil. Le bandeau pleine
   largeur sur fond gris devient un socle : pas de fond, pas de bordure
   basse, un seul filet en haut — dans un écran, une bande grise ferait une
   deuxième page collée sous la première.
   Il est poussé en bas de l'écran (margin-top:auto) : l'écran est un flex
   vertical centré, donc le socle se cale sous le pli quel que soit ce qu'il
   y a au-dessus, et le vide se referme par le bas. */
.rassure-socle{
  background:none;border-bottom:0;border-top:1px solid var(--line);
  padding:18px 0 0;margin-top:var(--e-1);
}
/* Dans un écran, l'icône du bandeau respire moins que dans une bande à
   part : dix-sept pixels manquaient pour que les cinq garanties tiennent
   au-dessus du pli sur un portable de 900 px. Mesuré, puis repris ici. */
.rassure-socle .ras-i{margin-bottom:10px}
.rassure-socle .rassure-in{padding:0}
@media(max-width:900px){.rassure-socle{margin-top:var(--e-2);padding-top:20px}}

/* ── LE PREMIER ÉCRAN SE REMPLIT ───────────────────────────────────────────
   Les deux cartes flottaient dans une colonne deux fois plus haute
   qu'elles. Elles s'étirent maintenant sur toute la hauteur de la grille :
   c'est la colonne de gauche (adresse + preuve) qui donne la mesure, et
   plus rien ne pend dans le vide. */
.e1-grid{align-items:stretch}
.e1-grid > .e1-col{display:flex;flex-direction:column}
/* flex:1 1 0 imposait aux deux cartes une hauteur ÉGALE, calculée sans
   tenir compte de leur texte : les deux dernières lignes étaient coupées
   net. Elles gardent leur hauteur naturelle, et c'est l'espace ENTRE elles
   qui absorbe la différence. */
.e1-grid > .choix{display:flex;flex-direction:column;gap:14px;
  justify-content:space-between}
/* margin-top:auto étirait la colonne de gauche jusqu'en bas de la grille et
   repoussait le socle sous le pli. La preuve reste collée à son formulaire. */
.e1 .preuve1{padding-top:18px}

/* ── LA TEMPÉRATURE, LÀ OÙ ELLE SERT ───────────────────────────────────────
   Le site interroge déjà Météo pour Nice — et affichait la réponse dans un
   bandeau tout en haut, celui que les gens ferment. Le degré réel remonte
   à côté de la promesse de livraison : c'est le seul élément de la page qui
   change tout seul selon le jour, et c'est exactement ce qui fait qu'une
   page a l'air vivante plutôt qu'imprimée.
   Masqué tant que l'API n'a pas répondu : pas de case vide, pas de
   « --°C ». */
.etat-t{
  display:inline-flex;align-items:baseline;gap:6px;margin-left:2px;
  padding:3px 11px;border-radius:var(--r-f);
  background:var(--vif-clair);color:var(--vif-d);
  font-size:var(--s-2);font-weight:700;letter-spacing:var(--l-4);
  white-space:nowrap;
}
.etat-t i{font-style:normal;font-weight:400;color:var(--ink-2)}
.etat{flex-wrap:wrap;row-gap:8px}

/* ── L'ENTRÉE ──────────────────────────────────────────────────────────────
   Tout apparaissait d'un bloc. Les six éléments du premier écran entrent
   maintenant l'un après l'autre, 90 ms d'écart : l'œil suit l'ordre de
   lecture au lieu de choisir où se poser. Le socle ferme la séquence.
   Rien ne bouge pour qui a demandé moins d'animation. */
.js .e1 .etat{transition-delay:.05s}
.js .e1 .titre{transition-delay:.14s}
.js .e1 .quoi{transition-delay:.23s}
.js .e1 .addr{transition-delay:.32s}
.js .e1 .choix{transition-delay:.41s}
.js .e1 .preuve1{transition-delay:.50s}
.js .e1 .ras{transition-delay:.59s}
.js .e1 .ras:nth-child(2){transition-delay:.64s}
.js .e1 .ras:nth-child(3){transition-delay:.69s}
.js .e1 .ras:nth-child(4){transition-delay:.74s}
.js .e1 .ras:nth-child(5){transition-delay:.79s}
@media(prefers-reduced-motion:reduce){
  .js .e1 .etat,.js .e1 .titre,.js .e1 .quoi,.js .e1 .addr,
  .js .e1 .choix,.js .e1 .preuve1,.js .e1 .ras{transition-delay:0s}
}

/* ── LE BANDEAU D'UNE PAGE DE VILLE ────────────────────────────────────────
   Il n'existe pas encore : les quatre pages de ville ne montrent pas leur
   ville. L'emplacement est posé d'avance et reste INVISIBLE tant que le
   fichier n'est pas là — même mécanique que les autres photos du site.
   Hauteur bornée : une 3:2 sur 1000 px de large ferait 667 px de haut,
   soit les deux tiers d'un écran avant même la première phrase. */
.banniere{
  max-width:var(--max);margin:0 auto var(--e-2);
  aspect-ratio:auto;height:clamp(190px,26svh,320px);
  border-radius:0;
}
@media(min-width:1048px){.banniere{border-radius:var(--r-l)}}

/* ══ L'ÉCRAN PRO, AVEC SA PHOTO EN ARRIÈRE-PLAN ════════════════════════════
   Un cadre en pointillés « photo à ajouter » annonçait un chantier à des
   visiteurs qui venaient chercher un service. La photo devient le fond de
   l'écran, et le texte passe dessus.

   LE VOILE EST CALCULÉ POUR LE PIRE CAS. Une photo livrée peut être
   sombre — tant mieux — ou presque blanche. Le voile est donc dimensionné
   sur l'hypothèse la plus défavorable (photo entièrement blanche dessous),
   à 0,88 sous le texte :
       titre blanc      11,58:1   (norme 3)
       texte courant     8,38:1   (norme 4,5)
       petite ligne      6,87:1   (norme 4,5)
       or du titre       4,79:1   (norme 4,5)
       bord du bouton    3,71:1   (norme 3)
   À droite, là où il n'y a aucun texte, le voile descend à 0,52 : c'est
   par là que les appareils se voient.

   Tant que le fichier n'existe pas, RIEN de tout cela ne s'applique :
   l'image reste masquée et l'écran garde son apparence claire. */
/* ── LA GRILLE DU HAUT DE LA PAGE PRO ──────────────────────────────────────
   La colonne de droite portait le cadre « photo à ajouter ». Ce cadre est
   parti, mais la grille à deux colonnes est restée : le titre continuait
   d'être enfermé dans la moitié gauche et se pliait en QUATRE lignes, avec
   la moitié droite vide à côté.
   Sans photo, une seule colonne : le titre tient en deux lignes.
   Avec la photo, le texte reprend 62 % de la largeur — assez pour respirer,
   assez pour laisser voir les appareils à droite. */
#p1 .e1-grid{grid-template-columns:1fr}
/* .62fr 1fr donne 38 % au texte et 62 % au vide : les fractions sont
   PROPORTIONNELLES, pas des pourcentages. 1.6fr 1fr donne bien 62/38. */
#p1.a-photo .e1-grid{grid-template-columns:minmax(0,1.6fr) 1fr}
.p1-fond{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center right;z-index:0;
}
.ecran.a-photo{position:relative;overflow:hidden;background:var(--ink)}
.ecran.a-photo::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(14,31,53,.95) 0%, rgba(14,31,53,.88) 46%, rgba(14,31,53,.52) 100%);
}
.ecran.a-photo > .in{position:relative;z-index:2}
/* Sur téléphone le texte prend toute la largeur : le dégradé devient
   vertical et ne descend jamais sous 0,88, sinon la dernière ligne
   passerait sur la partie claire de la photo. */
@media(max-width:880px){
  .ecran.a-photo::before{
    background:linear-gradient(180deg,
      rgba(14,31,53,.95) 0%, rgba(14,31,53,.90) 70%, rgba(14,31,53,.88) 100%);
  }
  .p1-fond{object-position:center}
}
/* Les couleurs du texte sur le voile. Valeurs mesurées ci-dessus. */
.ecran.a-photo{--focus:var(--gold)}
.ecran.a-photo .titre{color:#fff}
.ecran.a-photo .titre em{color:var(--gold)}
.ecran.a-photo .etat{color:rgba(255,255,255,.82)}
.ecran.a-photo .etat b{color:#fff}
.ecran.a-photo .dire{color:rgba(255,255,255,.82)}
.ecran.a-photo .mini{color:rgba(255,255,255,.72)}
/* Le bouton principal passe de « fond sarcelle, texte blanc » à « fond
   blanc, texte marine ». Or .btn anime son fond sur 140 ms, et la couleur
   du texte, elle, bascule d'un coup : pendant ces 140 ms le texte marine
   se trouvait sur un fond encore sarcelle — 2,69:1, sous la norme. Un
   clignotement illisible, attrapé par l'audit de contraste.
   La transition de fond est donc retirée pour ce changement d'état, et
   rendue au survol seulement : perdre un fondu de 140 ms sur un bouton ne
   coûte rien, un clignotement illisible si. */
.ecran.a-photo .btn-1{background:#fff;color:var(--ink);
  transition:transform var(--mv-1) var(--mv)}
.ecran.a-photo .btn-1:hover{background:rgba(255,255,255,.88);
  transition:background var(--mv-1) var(--mv),transform var(--mv-1) var(--mv)}
.ecran.a-photo .btn-out{border:1px solid rgba(255,255,255,.45);color:#fff}
.ecran.a-photo .btn-out:hover{border-color:#fff;background:rgba(255,255,255,.1)}
@media(prefers-reduced-motion:no-preference){
  .p1-fond{animation:fondu .8s var(--mv) both}
}
@keyframes fondu{from{opacity:0}to{opacity:1}}

/* Les deux boutons de l'appel final étaient le seul groupe du site sans
   règle mobile : à 414 px, « Réserver maintenant » faisait 270 px et
   « Être rappelé » 187 — un escalier. .p-cta, .pro-cta et .menu-cta passent
   tous leurs boutons en pleine largeur ; celui-ci le fait aussi. */
@media(max-width:520px){.fin-cta .btn{width:100%;justify-content:center}}

/* Sous un tableau qui prend toute la largeur, la mesure de lecture standard
   (34ch) donnait un ruban de 314 px qui paraissait oublié là. Deux fois plus
   large : la note se lit comme la légende du tableau, ce qu'elle est. */
#e4b .mini{max-width:68ch}

/* ══ LA BANDE — le gabarit d'image qui manquait ═══════════════════════════
   Les emplacements existants sont tous CONTENUS : une photo dans une
   colonne, une vignette dans une carte. Il manquait le geste large — une
   image d'un bord à l'autre, entre deux idées, qui laisse respirer une page
   entièrement faite de texte.
   Ce n'est PAS un écran : pas de min-height, pas de point dans la
   navigation. C'est du mobilier entre deux écrans, comme le bandeau des
   garanties. Les seuls éléments pleine largeur du site sont les blocs
   marine ; une bande photo se range naturellement à côté d'eux.
   Hauteur bornée : une image pleine largeur non bornée ferait 1000 px de
   haut sur un grand écran et volerait la place d'un écran entier.
   Invisible tant que le fichier n'existe pas, comme tout le reste. */
.bande{
  display:block;width:100%;margin:0;overflow:hidden;background:var(--ink);
  height:clamp(200px,38svh,420px);position:relative;
}
.bande[hidden]{display:none}
.bande img{display:block;width:100%;height:100%;object-fit:cover}
/* La légende se pose SUR l'image, en bas à gauche, sur un voile calculé
   pour le pire cas : même si la photo livrée est presque blanche, le texte
   blanc tient à 8,4 pour 1 — la même méthode que l'écran pro. */
.bande figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:56px var(--pad) 18px;
  background:linear-gradient(to top,rgba(14,31,53,.88),rgba(14,31,53,0));
  color:rgba(255,255,255,.88);font-size:var(--s-2);line-height:var(--h-3);
}
.bande figcaption b{color:#fff;font-weight:700}
.bande-in{max-width:var(--max);margin:0 auto}
@media(max-width:620px){.bande{height:clamp(170px,32svh,260px)}}

/* ══ LES TROIS DURÉES — l'écran « Le prix » ═══════════════════════════════
   Trois cartes côte à côte, comme sur les sites qui vendent des forfaits.
   Mais Loc'Air NE VEND PAS de forfaits : le tarif est dégressif à la
   journée. Les trois cartes ne sont donc pas trois offres différentes —
   ce sont les trois durées que les gens prennent, avec leur vrai total.
   Aucun prix n'est écrit en dur : ils sont calculés par le barème du
   calculateur, celui qui vient de /api/pricing-config.

   Identité conservée : pas de dégradé orange, pas de ruban en diagonale.
   La carte recommandée est SOMBRE, exactement comme la colonne Loc'Air du
   tableau comparatif, et son étiquette est l'œil-de-perdrix doré en
   capitales espacées que le site utilise déjà là-bas. */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-1);
  margin-top:var(--e-2)}
.pack{
  display:flex;flex-direction:column;padding:26px 24px 24px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--paper);
  transition:border-color var(--mv-1) var(--mv),transform var(--mv-1) var(--mv);
}
.pack:hover{border-color:var(--vif)}
.pack-d{font-size:var(--s-5);font-weight:700;letter-spacing:var(--l-3);color:var(--ink)}
.pack-j{margin-top:3px;font-size:var(--s-2);color:var(--ink-3)}
.pack-p{margin-top:20px;font-size:var(--n-3);font-weight:700;letter-spacing:var(--l-1);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pack-u{margin-top:9px;font-size:var(--s-2);color:var(--ink-2);line-height:var(--h-3)}
.pack-c{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-4)}
.pack .btn{margin-top:auto;width:100%;justify-content:center}
.pack-b{margin-top:20px}
/* La carte qui compte : sombre, comme la colonne Loc'Air du comparatif. */
.pack.reco{background:var(--ink);border-color:var(--ink);--focus:var(--gold)}
.pack.reco .pack-d,.pack.reco .pack-p{color:#fff}
.pack.reco .pack-j{color:rgba(255,255,255,.62)}
.pack.reco .pack-u{color:rgba(255,255,255,.72)}
.pack.reco .pack-c{color:rgba(255,255,255,.78);border-top-color:rgba(255,255,255,.16)}
.pack.reco:hover{border-color:var(--gold)}
.pack-r{
  display:block;font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);
  text-transform:uppercase;color:var(--gold);margin-bottom:9px;
}
.pack.reco .btn-1{background:#fff;color:var(--ink);
  transition:transform var(--mv-1) var(--mv)}
.pack.reco .btn-1:hover{background:rgba(255,255,255,.88)}
/* Les cartes sans étiquette gardent la même hauteur que celle qui en a une :
   sans ça, les trois prix ne seraient pas sur la même ligne. */
.pack-r-vide{display:block;height:1em;margin-bottom:9px}
@media(max-width:860px){.packs{grid-template-columns:1fr;gap:14px}
  .pack-r-vide{display:none}}

/* ── LES TROIS DURÉES SUR TÉLÉPHONE ────────────────────────────────────
   Mesuré avant : les trois cartes empilées faisaient 977 px de haut, pour
   un écran de 844. Trois prix ne peuvent pas coûter plus d'un écran entier
   à lire — surtout ici, où l'on vient justement comparer.
   On garde les trois cartes et les trois prix. Ce qu'on enlève, c'est ce
   qui se répétait :
     · le nom et le prix passent sur la MÊME ligne, alignés sur la même
       base — c'est la comparaison qu'on vient chercher ;
     · « tout compris, livraison et reprise » était écrit trois fois : il
       n'est plus écrit qu'une fois, sous les trois cartes. Même clé de
       traduction, donc rien de nouveau à traduire ;
     · les trois boutons « Réserver » menaient au même endroit que la
       barre verte fixée en bas de l'écran, toujours visible. Seul celui
       de la carte recommandée reste.
   Mesuré après : 524 px, soit un écran au lieu d'un écran et demi. */
/* Écrite une seule fois sous les trois cartes, et seulement sur téléphone :
   au-dessus de 620 px chaque carte porte déjà la mention. */
.packs-u{display:none;margin:12px 0 0;font-size:var(--s-2);color:var(--ink-2);
  line-height:var(--h-3)}
@media(max-width:620px){
  .packs{gap:11px}
  .pack{
    display:grid;grid-template-columns:1fr auto;
    align-items:baseline;column-gap:14px;row-gap:2px;
    padding:15px 17px 16px;border-radius:var(--r);
  }
  /* La pastille vide reprend du service : sans elle, la carte du milieu
     aurait une rangée de plus que les deux autres et les prix ne
     tomberaient plus à la même hauteur dans la pile. */
  .pack-r-vide{display:block;grid-column:1/-1;grid-row:1;height:0;margin:0}
  .pack-r{grid-column:1/-1;grid-row:1;margin:0 0 5px;font-size:10.5px}
  .pack-d{grid-column:1;grid-row:2}
  .pack-p{grid-column:2;grid-row:2;margin:0;text-align:right;
    font-size:clamp(27px,7.6vw,34px)}
  .pack-j{grid-column:1;grid-row:3}
  .pack-u{display:none}
  .pack-c{grid-column:1/-1;grid-row:4;margin-top:11px;padding-top:10px;
    font-size:var(--s-2)}
  .pack-b{display:none}
  .pack.reco .pack-b{display:block;grid-column:1/-1;grid-row:5;margin-top:13px}
  .pack .btn{margin-top:0}
  .packs-u{display:block}
}

/* ══ LE MOT QUI TOURNE ════════════════════════════════════════════════════
   Un bloc pleine largeur où une colonne de mots défile, celui du milieu
   plein, les autres en contour. C'est un geste emprunté — mais pas la
   couleur : ici le fond est le marine de la marque, pas un orange, et les
   mots sont ceux que le site dit déjà sur l'écran « Pour qui ».
   Il ne remplace pas cet écran : il l'annonce. Ce n'est pas un écran non
   plus — pas de min-height, pas de point de navigation.
   Les mots en contour sont marqués aria-hidden : un lecteur d'écran entend
   la phrase une fois, pas six. Et tout s'arrête pour qui a demandé moins
   d'animation. */
/* Fond sarcelle, pas marine : l'écran juste au-dessus (« nos machines ») est
   déjà marine, et deux blocs marine collés ne font qu'un long bloc sombre —
   on ne voit plus la respiration. Le sarcelle est la troisième couleur de la
   maison, déjà utilisée plus bas ; le blanc dessus tient 6,1:1. */
.mots{
  position:relative;
  background:var(--vif);color:#fff;overflow:hidden;
  padding:var(--e-3) 0;
}
/* La goutte de la marque, en grand et très pâle, coupée par le bord droit.
   Elle remplit la moitié droite du bloc — vide autrement — sans jamais
   croiser un mot : elle commence après la fin du plus long d'entre eux.
   Même dessin que l'apostrophe de « Loc'Air », à l'échelle du bloc. */
.mots-goutte{
  /* Sa taille suit la HAUTEUR du bloc, pas la largeur de l'écran : mesurée
     en vw, elle tenait à 1440 px et mangeait la bande à 1024. En pourcentage
     de la hauteur, elle garde la même proportion partout et ne déborde
     jamais — coupée, une goutte n'est plus une goutte, c'est une tache. */
  position:absolute;top:28%;right:7%;
  height:44%;aspect-ratio:1;
  background:rgba(255,255,255,.062);
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);
  pointer-events:none;
  /* Sous 1200 px, le plus long des mots arrive jusqu'à elle. Mesuré à
     1024 px : il finit à 830, la goutte commencerait à 811. Une décoration
     qui touche un mot n'est plus une décoration — elle s'efface. */
  display:none;
}
@media(min-width:1200px){ .mots-goutte{display:block} }
/* La goutte du logo, en or : elle pointe la ligne du milieu, celle qui
   compte. Même dessin que l'apostrophe de « Loc'Air » — trois coins ronds,
   un coin vif, inclinée à -25°. */
.mots-g{
  flex-shrink:0;width:13px;height:13px;margin-right:calc(var(--e-2) * -.45);
  background:var(--gold);
  border-radius:50% 50% 50% 0;transform:rotate(-25deg);
}
.mots-in{
  position:relative;z-index:1;
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;gap:var(--e-2);
}
.mots-l{
  flex-shrink:0;background:#fff;color:var(--ink);
  padding:8px 16px;border-radius:var(--r-s);
  font-size:var(--s-6);font-weight:700;letter-spacing:var(--l-2);
  text-transform:uppercase;white-space:nowrap;
}
/* Trois lignes visibles, le mot actif AU MILIEU — et un fondu en haut et en
   bas, sinon les mots voisins sont coupés net par le bord du bloc. */
.mots-c{position:relative;flex:1 1 auto;min-width:0;height:3.18em;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
  font-size:clamp(30px,5.4vw,64px);font-weight:700;letter-spacing:var(--l-2);
  line-height:1.06;}
.mots-p{position:absolute;left:0;right:0;top:0;
  transition:transform var(--mv-3) var(--mv)}
.mots-p span{display:block;height:1.06em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.5);
  transition:color var(--mv-2) var(--mv),-webkit-text-stroke-color var(--mv-2) var(--mv)}
.mots-p span.on{color:#fff;-webkit-text-stroke-color:transparent}
@media(max-width:700px){
  /* Sous 700 px les mots prennent toute la largeur : le courant d'air
     passerait derrière eux, et la goutte se retrouverait seule sur sa
     ligne puisque la bande passe en colonne. Les deux s'effacent. */
  .mots-goutte,.mots-g{display:none}
  .mots-in{flex-direction:column;align-items:flex-start;gap:14px}
  /* La fenêtre garde SES TROIS LIGNES sur téléphone aussi. À 2,2 em elle
     n'en tenait que deux : le mot actif, calé sur la ligne du milieu,
     tombait dans le fondu du bas et devenait illisible — mesuré à 390 px,
     il occupait 35 à 69 px d'une fenêtre de 72, dont les 16 derniers sont
     effacés par le masque. Seul le libellé « ON LIVRE » restait visible. */
  /* ── LA BANDE ÉTAIT MUETTE SUR TÉLÉPHONE ────────────────────────────────
     Mesuré à 390 px : la colonne de mots faisait 0 px de large. On ne
     voyait que « ON LIVRE » sur un rectangle sarcelle vide.
     La bande passe en colonne sur téléphone, avec align-items:flex-start :
     la largeur de chaque enfant se règle alors sur son contenu. Or le seul
     contenu de la colonne de mots est positionné en absolu — il ne compte
     pas. Résultat : zéro. Elle doit prendre toute la largeur explicitement. */
  /* La taille descend de 8,4 à 7,2 vw : mesuré, « en urgence, le jour même »
     demandait 368 px pour 342 disponibles à 390 px d'écran, et 304 pour 272
     à 320 px. Il finissait en « … ». Un mot coupé vaut moins qu'un mot plus
     petit — surtout celui qui porte la promesse la plus forte. */
  .mots-c{align-self:stretch;width:100%;font-size:clamp(23px,7.2vw,44px)}
  .mots-l{font-size:var(--s-5)}
}
@media(prefers-reduced-motion:reduce){
  .mots-p{transition:none}
  .mots-p span{color:#fff;-webkit-text-stroke-color:transparent}
  .mots-c{height:auto}
  .mots-p{position:static}
}

/* ══ LE BLOC ASSISTANCE — entre « Vos espaces » et « Questions » ══════════
   Emprunté à un site américain qui met son service client dans un panneau
   sombre avec une photo qui sort du cadre. On garde la structure, pas la
   couleur ni les formes : ici le fond est le marine de la maison.
   Ce n'est PAS un écran — pas de min-height, pas de point de navigation.
   C'est du mobilier, comme la bande photo et le mot qui tourne.
   Rien d'inventé : le numéro, le WhatsApp et les horaires sont ceux que le
   pied de page et la FAQ affichent déjà.
   La photo est facultative. Tant que le fichier n'existe pas, la figure
   reste cachée et le texte occupe naturellement toute la largeur — d'où
   le :has() qui repasse la grille sur une seule colonne. */
/* On ne réinvente ni le fond ni les couleurs : la classe e-ink existe déjà
   et donne le marine, le doré du surtitre et de l'italique, et le gris clair
   du paragraphe. Ici on n'ajoute que la mise en page. */
.eq{overflow:hidden}
.eq-g{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:1fr .84fr;align-items:center;
  gap:var(--e-2);
}
.eq-t{padding:var(--e-3) var(--pad)}
.eq .titre em{display:block}          /* deux idées, deux lignes */
.eq .dire{margin:18px 0 var(--e-1)}

/* Bornée : sans photo la colonne fait toute la largeur du gabarit, et trois
   pastilles de 1200 px de long ne ressemblent plus à des pastilles. */
.eq-l{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:520px}
.eq-l li{margin:0}
.eq-p{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r-f);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;text-decoration:none;
  transition:background var(--mv-2) var(--mv),border-color var(--mv-2) var(--mv);
}
a.eq-p:hover,a.eq-p:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34)}
.eq-p svg{flex:0 0 auto;width:20px;height:20px;color:var(--gold)}
.eq-p b{display:block;font-weight:700;font-size:var(--s-3);line-height:1.25}
.eq-p span{display:block;color:rgba(255,255,255,.74);font-size:var(--s-2);line-height:var(--h-3)}

/* La photo occupe toute la hauteur du bloc, jusqu'au bord de la colonne de
   contenu. Elle ne va pas jusqu'au bord de l'écran comme sur la référence :
   une image qui déborde du gabarit est la première cause de barre de
   défilement horizontale, et le site n'en a aucune. */
.eq-f{margin:0;align-self:stretch;min-height:320px;position:relative}
.eq-f[hidden]{display:none}
.eq-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* Pas de photo livrée : une seule colonne, et le texte respire au centre.
   Le :has() est enfermé dans une requête de largeur, sinon il l'emporte sur
   les règles téléphone qui viennent après — sa spécificité est celle de son
   argument, pas celle d'une pseudo-classe. */
@media(min-width:861px){
  .eq-g:has(> .eq-f[hidden]){grid-template-columns:1fr}
  /* Sans photo, les trois moyens de nous joindre se mettent côte à côte :
     ils occupent la largeur laissée libre au lieu de la laisser vide. */
  .eq-g:has(> .eq-f[hidden]) .eq-l{grid-template-columns:repeat(3,1fr);max-width:none;gap:14px}
  .eq-g:has(> .eq-f[hidden]) .eq-p{align-items:flex-start;padding:16px 18px}
  /* Avec la photo, le texte ne garde sa marge qu'à gauche : sinon la marge
     et l'espace de grille s'additionnent et creusent un trou au milieu. */
  .eq-g:not(:has(> .eq-f[hidden])) .eq-t{padding-right:0}
}
@media(max-width:860px){
  .eq-g{grid-template-columns:1fr}
  .eq-f{min-height:240px;order:-1}
}

/* ══ LE MOT DU FONDATEUR ══════════════════════════════════════════════════
   Un grand cadre citation, guillemets compris, signé d'un nom et d'un rôle.
   Forme demandée par le propriétaire à partir d'une capture.
   Trois choses le distinguent du petit bloc .signe qui existe déjà :
     · il est signé — .signe est une phrase de la maison, celui-ci est la
       phrase de quelqu'un ;
     · il est grand et centré : c'est le seul endroit de la page où une
       phrase occupe l'écran à elle seule ;
     · il n'est PAS un écran — pas de min-height, pas de point de
       navigation. C'est du mobilier, comme la bande photo et le mot qui
       tourne.
   Fond vert très pâle : l'écran d'avant est gris clair et celui d'après est
   marine. Une troisième valeur au milieu, sinon deux clairs se collent.
   Les guillemets sont posés en décor par la feuille de style, pas dans le
   texte : ils ne doivent pas être traduits ni lus deux fois. */
.mot-f{background:var(--vif-clair);overflow:hidden}
.mot-f-in{
  max-width:var(--max);margin:0 auto;
  padding:var(--e-4) var(--pad);text-align:center;
}
.mot-f blockquote{margin:0;position:relative;padding:0 clamp(26px,6.4vw,88px)}
.mot-f blockquote::before,.mot-f blockquote::after{
  position:absolute;font-size:clamp(52px,8.4vw,116px);line-height:1;
  font-weight:700;color:var(--vif);opacity:.32;
}
.mot-f blockquote::before{content:'«';left:0;top:-.08em}
.mot-f blockquote::after{content:'»';right:0;bottom:-.3em}
.mot-f-p{
  margin:0 auto;max-width:25ch;
  font-size:clamp(24px,2.9vw,38px);line-height:1.22;
  font-weight:700;letter-spacing:-.015em;color:var(--ink);
  text-wrap:balance;
}
.mot-f-p b{color:var(--vif-d);font-weight:700}
.mot-f figcaption{margin-top:var(--e-2)}
.mot-f-n{display:block;font-size:var(--s-4);font-weight:700;color:var(--ink)}
.mot-f-r{display:block;margin-top:5px;font-size:var(--s-3);color:var(--ink-2)}
/* Sous 520 px les guillemets mangeraient la moitié de la ligne : ils
   passent au-dessus et en dessous, au centre, plutôt que sur les côtés. */
@media(max-width:520px){
  .mot-f blockquote{padding:44px 0 40px}
  .mot-f blockquote::before{left:50%;transform:translateX(-50%);top:-.1em}
  .mot-f blockquote::after{right:auto;left:50%;transform:translateX(-50%);bottom:-.42em}
}

/* ══ LA POLICE DE TITRAGE ══════════════════════════════════════════════════
   Bricolage Grotesque, pour les titres uniquement. Le texte courant reste en
   DM Sans : deux polices qui se ressemblent trop se gênent, deux polices trop
   différentes se disputent. Celle-ci est de la même famille de formes, en
   plus serré et plus typé.
   Ce qu'elle apporte, mesuré : « Il fait trop chaud ? Livré aujourd'hui, sous
   2 heures. » tient en DEUX lignes au lieu de trois. Sur une langue longue
   comme le français, c'est ce qui décide de la tenue d'un titre.

   Hébergée chez nous, pas chez Google. Trois raisons :
     · une requête et une connexion de moins au chargement ;
     · rien ne part vers un serveur tiers quand un visiteur arrive — la CNIL
       a déjà sanctionné l'appel direct à Google Fonts ;
     · le jour où Google change une URL, le site ne change pas de tête.

   La plage unicode s'arrête au latin : le chinois et le russe retombent
   automatiquement sur DM Sans, qui les couvre. Aucun caractère ne manque. */
@font-face{
  font-family:'Bricolage';
  src:url('/polices/bricolage-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage';
  src:url('/polices/bricolage-latin-ext.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{ --font-titre:'Bricolage', var(--font); }

/* Les titres, les grands nombres et le mot qui tourne. Pas le logo : une
   marque ne change pas de dessin parce qu'on ajoute une police. */
.titre,
h1, h2,
.mots-c,
.pack-p,
.chif-n,
.hA-v{ font-family:var(--font-titre); letter-spacing:-.028em; }

/* ══ LE BANDEAU VIVANT DE L'ACCUEIL ════════════════════════════════════════
   Trois chiffres que le serveur connaît en direct. Ils étaient déjà sur la
   page, en gris et en petit au-dessus du titre ; ici ils tiennent une ligne
   à eux, entre la promesse et le formulaire.
   Une bordure haute et basse, rien d'autre : ce n'est pas une carte, c'est
   une bande de relevé. Les valeurs sont dans la police de titrage, avec des
   chiffres à chasse fixe pour qu'ils ne dansent pas quand ils changent. */
.bord{
  display:flex;flex-wrap:wrap;gap:0 clamp(24px,4vw,56px);
  margin:var(--e-1) 0 0;padding:16px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bord[hidden]{display:none}
.bord-c[hidden]{display:none}
.bord-c{min-width:0}
.bord-v{
  display:block;font-family:var(--font-titre);
  font-size:clamp(24px,2.6vw,32px);line-height:1;font-weight:700;
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.bord-k{
  display:block;margin-top:6px;font-size:var(--s-2);line-height:var(--h-3);
  color:var(--ink-2);
}
/* Le premier chiffre est celui qu'on veut voir en premier : la température,
   c'est la raison d'être de la visite. */
.bord-c:first-child .bord-v{color:var(--vif)}
@media(max-width:520px){
  .bord{gap:0 26px;padding:14px 0}
  .bord-k{font-size:var(--s-1)}
}

/* ══ LES CROQUIS ═══════════════════════════════════════════════════════════
   Aucune photo des machines n'existe encore. Un emplacement vide dit « site
   pas fini » ; une image de stock dit « ce n'est pas chez nous ». Un dessin
   ne prétend rien : on voit que c'est un schéma, et il explique mieux qu'une
   photo — la gaine qui sort, le kit qui bouche, l'eau qui s'évapore.
   Le trait suit currentColor : le même dessin marche sur fond clair et sur
   fond marine, sans deuxième fichier.
   Et il s'efface tout seul le jour où la vraie photo arrive. */
.croquis{margin:0 0 18px;padding:0}
.croquis svg{
  display:block;width:100%;height:auto;
  background:var(--sol-croquis, #fff);
  border:1px solid var(--line);border-radius:var(--r-l);
  color:var(--ink-2);
}
.e-mist .croquis svg{background:#fff}
.e-ink .croquis svg,.e-blue .croquis svg{
  background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.72);
}
.croquis figcaption{
  margin-top:10px;font-size:var(--s-2);line-height:var(--h-3);color:var(--ink-3);
}
.e-ink .croquis figcaption,.e-blue .croquis figcaption{color:rgba(255,255,255,.6)}

/* Le jour où la vraie photo est livrée, le dessin disparaît. Le :has() est
   enfermé dans une requête de largeur : sa spécificité est celle de son
   argument, il l'emporterait sinon sur les règles téléphone qui suivent. */
@media(min-width:1px){
  .mach:has(> .photo:not([hidden])) > .croquis{display:none}
}

/* ══ ET MA FENÊTRE ? ══════════════════════════════════════════════════════
   Un bandeau clair entre la promesse marine et le mot qui tourne sarcelle :
   il coupe deux fonds sombres qui se suivaient, et il répond en dessin à la
   première question du téléphone. Ce n'est pas un écran — pas de min-height,
   pas de point de navigation. */
.kit{background:var(--mist);padding:clamp(48px,7vw,88px) var(--pad)}
.kit-in{max-width:var(--max);margin:0 auto}
.kit-t{font-family:var(--font-titre);font-size:var(--t-4);font-weight:700;
  letter-spacing:-.028em;line-height:var(--h-1);max-width:18ch;text-wrap:balance}
.kit-t em{font-style:normal;color:var(--vif)}
.kit-d{margin-top:18px;max-width:var(--lire);font-size:var(--s-4);
  color:var(--ink-2);line-height:var(--h-5)}
/* Quatre dessins de front sur grand écran, deux par deux sur téléphone.
   auto-fit ferait passer les quatre à trois puis à deux tout seul, mais la
   dernière colonne se retrouverait orpheline : on fixe donc les deux cas. */
.kit-g{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
@media(min-width:760px){.kit-g{grid-template-columns:repeat(4,1fr);gap:20px}}
.kit-f{margin:0;padding:0;min-width:0}
.kit-f svg{display:block;width:100%;height:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
  color:var(--ink-2);padding:10px 0}
.kit-f figcaption{margin-top:10px;text-align:center;
  font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);
  text-transform:uppercase;color:var(--ink-3)}
.kit-p{margin-top:26px;max-width:var(--lire);font-size:var(--s-3);color:var(--ink-3);line-height:var(--h-5)}

/* Le jour où la vraie photo de pose est livrée, la bande cesse d'être
   masquée — et le bandeau dessiné, qui la doublait, s'efface. */
.bande:not([hidden]) + .kit{display:none}

/* ══ LE TRAIT DE CÔTE ═════════════════════════════════════════════════════
   Neuf villes dans leur ordre réel, sur un rail. Ce n'est pas une image :
   c'est du texte posé sur une ligne, donc il se traduit, il grossit avec le
   zoom et il passe le contrôle de contraste comme le reste.
   Sur grand écran le rail est horizontal, d'ouest en est. Sur téléphone il
   se redresse à la verticale : neuf colonnes de 40 px ne sont lisibles pour
   personne. */
.cote{list-style:none;display:grid;grid-template-columns:repeat(9,1fr);
  gap:0;margin:34px 0 0;padding:0;position:relative;min-height:152px}
.cote::before{content:'';position:absolute;left:0;right:0;top:71px;height:2px;
  background:var(--line);border-radius:2px}
/* Le segment coloré couvre les colonnes 3 à 5 sur 9 — Cagnes, Saint-Laurent
   et Nice — c'est-à-dire exactement la zone standard de la liste dessous. */
.cote::after{content:'';position:absolute;top:71px;left:27.78%;width:22.22%;
  height:2px;background:var(--vif);border-radius:2px}
.ct{position:relative;min-width:0}
.ct::before{content:'';position:absolute;top:66px;left:50%;margin-left:-6px;
  width:12px;height:12px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line)}
/* « Saint-Laurent-du-Var » ne tient pas dans un neuvième de la largeur : il
   se cassait en trois lignes. Un nom sur deux passe donc AU-DESSUS du trait.
   Chaque étiquette dispose alors de deux colonnes au lieu d'une — la largeur
   est en pourcentage, donc ça reste vrai à toutes les tailles d'écran. */
.ct b{position:absolute;left:50%;transform:translateX(-50%);width:190%;
  text-align:center;font-size:var(--s-2);font-weight:700;
  line-height:var(--h-3);color:var(--ink-3)}
.ct:nth-child(odd) b{top:90px}
.ct:nth-child(even) b{bottom:96px}
/* Aux deux bouts, une étiquette de deux colonnes déborderait de la page.
   Ces deux noms-là sont courts : une colonne leur suffit. */
.ct:first-child b,.ct:last-child b{width:100%}
.ct-std::before{background:var(--vif);border-color:var(--vif)}
.ct-std b{color:var(--ink)}
/* Nice porte tout : point plus gros, halo, et le seul nom en couleur. */
.ct-hub::before{top:63px;margin-left:-9px;width:18px;height:18px;
  box-shadow:0 0 0 5px var(--vif-clair)}
.ct-hub b{color:var(--vif);font-size:var(--s-4)}
.cote-l{margin-top:20px;font-size:var(--s-2);color:var(--ink-3);line-height:var(--h-3)}
.cote-l b{color:var(--ink-2);font-weight:700}

@media(max-width:759px){
  .cote{grid-template-columns:1fr;gap:0;padding-left:28px;margin-top:28px;min-height:0}
  .cote::before{left:5px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  /* À la verticale chaque nom a toute la largeur : le décalage n'a plus de
     raison d'être, les étiquettes reviennent dans le flux. */
  .ct b{position:static;transform:none;width:auto;text-align:left}
  .ct:nth-child(odd) b,.ct:nth-child(even) b{top:auto;bottom:auto}
  /* Le segment coloré se calait en pourcentage de la hauteur : à la
     verticale les rangées n'ont pas toutes la même hauteur et il glissait.
     Les points pleins suffisent à dire la zone. */
  .cote::after{display:none}
  .ct{padding:7px 0;text-align:left}
  .ct::before{top:9px;left:-28px;margin-left:0}
  .ct-hub::before{top:5px;left:-31px;margin-left:0}
  .ct b{font-size:var(--s-3)}
}

/* ══ L'ARRIVÉE DU HAUT DE PAGE ════════════════════════════════════════════
   Le haut de page utilisait le même mécanisme que le reste : .rv part à
   opacité zéro, et c'est du JavaScript qui la remet à un quand le bloc entre
   dans l'écran. Mesuré : la page s'affiche à 216 ms, le JavaScript ne pose
   sa classe qu'à 341 ms, puis la transition dure 680 ms. Résultat, le titre
   n'est complètement lisible qu'à 1 020 ms — et c'est CE chiffre que Google
   retient comme « plus gros élément affiché ». Cent vingt-cinq millisecondes
   de page blanche, suivies d'un fondu deux fois trop long, pour du contenu
   déjà présent dans le HTML.

   Le haut de page a donc son arrivée à lui : une animation CSS, qui part
   toute seule au premier affichage. Pas de JavaScript dans le chemin, donc
   pas de trou ; pas d'observateur, donc pas de hasard sur le moment ; et une
   durée courte, parce qu'un texte qu'on attend n'est pas un texte élégant.

   Le décalage est de 12 px et non de 24 : au-dessus de la ligne de flottaison
   on accompagne l'arrivée, on ne la met pas en scène.
   Rien ne touche au défilement, ici comme ailleurs.                        */
@keyframes arrivee{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:none}
}
.ar{animation:arrivee var(--mv-ar) var(--mv) both}
/* Les retards sont écrits en clair. L'ancien système les tirait de
   :nth-child, qui compte TOUS les frères : le formulaire et les preuves,
   nichés dans une grille, se retrouvaient tous en premier enfant et
   arrivaient donc en même temps que le tout premier bloc. Mesuré : les six
   éléments du haut de page recevaient leur classe à la même milliseconde.
   Un décalage qui ne décale rien ne sert à rien. */
.ar-1{animation-delay:0ms}
.ar-2{animation-delay:55ms}
.ar-3{animation-delay:110ms}
.ar-4{animation-delay:165ms}
.ar-5{animation-delay:220ms}
/* Le bandeau vivant n'arrive pas avec les autres : il attend ses données.
   Comme il est masqué au départ, son animation ne démarre qu'au moment où il
   cesse de l'être — display:none remet toute animation à zéro. Il se pose
   donc en douceur au lieu d'apparaître d'un coup au milieu du texte. */
.bord:not([hidden]){animation:arrivee var(--mv-ar) var(--mv) both}

@media(prefers-reduced-motion:reduce){
  .ar,.bord:not([hidden]){animation:none;opacity:1;transform:none}
}

/* ══ L'APPUI ══════════════════════════════════════════════════════════════
   Mesuré avant d'écrire ce bloc : 52 règles de survol, une règle de focus
   qui couvre tout, quatre règles de désactivé — et UNE SEULE règle d'appui
   dans les 2 700 lignes de cette feuille. C'était la poignée du curseur de
   durée.

   Or le survol n'existe pas sur un téléphone. L'appui est donc le seul
   retour que le doigt reçoit : sans lui, on ne sait pas si le bouton a
   compris, et le réflexe est d'appuyer une deuxième fois. Sur un bouton de
   réservation, appuyer deux fois n'est pas anodin.

   La grammaire reprend celle du survol, personne n'a rien de nouveau à
   apprendre : ce qui se soulève au survol redescend à l'appui, ce qui est
   rond se serre, ce qui n'a pas de forme à déplacer change de fond.
   Chaque geste a aussi un signe qui ne bouge pas — un assombrissement ou un
   changement de bordure — pour que l'appui reste perceptible quand le
   visiteur a demandé moins d'animation.                                   */

/* 1 · Ce qui se soulève au survol redescend d'un cran sous le doigt. */
.btn:active,.mcard:active,.porte:active,.ouv.lien:active,
.cook-oui:active,.cook-non:active,a.eq-p:active,.guide:active{
  transform:translateY(1px)
}
.btn:active{filter:brightness(.94)}
.mcard:active,.guide:active{border-color:var(--vif)}
.porte:active{filter:brightness(.96)}

/* 2 · Ce qui est rond ou compact se serre. */
.chip:active,.burger:active,.menu-x:active,.lang-b:active,
.infobar-x:active,.bar-compte:active,.mbar-tel:active,
.avis-b:not(:disabled):active,.step-btn:not(:disabled):active{
  transform:scale(.93);filter:brightness(.94)
}
.vplay:active span{transform:scale(.96)}

/* 3 · Les points de progression : trop petits pour se serrer, ils grossissent. */
.dots a:active{transform:scale(1.6);opacity:1}

/* 4 · Ce qui n'a pas de forme à déplacer change de fond. */
summary:active{background:var(--mist)}
.ville-l:active{background:var(--mist)}
.sugg button:active{background:var(--vif-clair)}
.menu a.ml:active,.menu a.ms:active,.offre-o:active,
.pied-grid a:active,.fil a:active,.bar-fil:active,
.som a:active,.art a:active,.suite-l a:active{opacity:.62}

/* L'appui doit se sentir tout de suite : la durée du survol est déjà courte,
   celle de l'appui l'est encore plus. */
.btn,.chip,.mcard,.porte,.burger,.menu-x,.lang-b,.infobar-x,
.bar-compte,.avis-b,.step-btn,.cook-oui,.cook-non,a.eq-p,.ouv.lien{
  transition-duration:var(--mv-1)
}

@media(prefers-reduced-motion:reduce){
  /* Le déplacement disparaît ; l'assombrissement, la bordure et le fond
     restent. L'appui se voit toujours, il ne bouge plus. */
  .btn:active,.mcard:active,.porte:active,.ouv.lien:active,
  .cook-oui:active,.cook-non:active,a.eq-p:active,.guide:active,
  .chip:active,.burger:active,.menu-x:active,.lang-b:active,
  .infobar-x:active,.bar-compte:active,.mbar-tel:active,
  .avis-b:not(:disabled):active,.step-btn:not(:disabled):active,
  .vplay:active span,.dots a:active{transform:none}
  .cook-oui:active,.cook-non:active{filter:brightness(.92)}
  .dots a:active{opacity:1;background:var(--vif)}
}

/* ══ REVENIR EN HAUT ══════════════════════════════════════════════════════
   Dix-huit écrans, et aucun moyen de remonter : vérifié, il n'existait
   aucun bouton de ce genre sur la page. Celui-ci est blanc et cerclé plutôt
   que coloré, parce qu'il traverse des écrans clairs, marine et sarcelle :
   une pastille sarcelle disparaîtrait sur l'écran sarcelle.
   Il se range au-dessus de la barre du bas sur téléphone, et il passe SOUS
   le bandeau cookies, qui a le dernier mot tant qu'on n'y a pas répondu. */
.haut{
  position:fixed;right:22px;bottom:22px;z-index:900;
  width:46px;height:46px;border-radius:50%;
  background:var(--paper);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--o-2);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--mv-1) var(--mv),background var(--mv-1) var(--mv);
}
.haut svg{width:20px;height:20px}
.haut:hover{background:var(--mist);transform:translateY(-2px)}
.haut:active{transform:scale(.93);filter:brightness(.94)}
@media(max-width:900px){
  .haut{right:16px;bottom:calc(20px + 76px + env(safe-area-inset-bottom))}
}
@media(min-width:1181px){.haut{right:26px;bottom:26px}}
@media(prefers-reduced-motion:reduce){
  .haut:hover,.haut:active{transform:none}
}

/* ══ LA QUESTION OUVERTE SE DÉTACHE ═══════════════════════════════════════
   Sur une liste de dix questions, l'ouverte ne se signalait que par un
   changement de couleur du texte — trop discret pour qu'on retrouve où on
   en est. Elle devient un panneau blanc sur le fond clair de l'écran, avec
   une arête sarcelle à gauche, comme le mot du fondateur a la sienne.
   La marge négative compense exactement le rembourrage : le texte ne bouge
   pas d'un pixel quand la question s'ouvre, seul le fond déborde. */
.faq details[open]{
  background:var(--paper);
  box-shadow:inset 2px 0 0 var(--vif);
  border-bottom-color:transparent;
  border-radius:0 var(--r) var(--r) 0;
  margin:0 -16px;padding:0 16px;
}

/* ══ L'ACTION AU BORD DU TITRE ════════════════════════════════════════════
   Les flèches du rail d'avis traînaient sous le rail. Elles montent à la
   hauteur du titre : on lit le titre et on voit dans le même regard qu'il y
   a de quoi faire défiler. Sur téléphone la ligne se replie, le titre
   d'abord. */
.tete-r{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}
.tete-r-t{min-width:0;flex:1 1 340px}
.tete-r .titre{margin-bottom:0}
.tete-r .avis-nav{margin:0 0 6px;flex:none}

/* ══ CE QUI SE PASSE QUAND LA DONNÉE MANQUE ═══════════════════════════════
   Mesuré avant : en coupant toutes les sources, le rail d'avis, ses flèches
   et les trois cellules du bandeau vivant devenaient MASQUÉS — rien du tout,
   sans un mot. Et dans le champ d'adresse, on tapait et il ne se passait
   rien : ni suggestion, ni explication.
   Le silence est le pire des trois états. Il donne à penser que le site est
   cassé, alors qu'il suffisait de dire ce qui se passe.                   */

/* Le champ d'adresse : « je cherche », « rien trouvé », « ça ne répond pas ».
   La ligne ne réserve pas de place tant qu'elle n'a rien à dire — et quand
   elle parle, c'est à la suite d'une frappe, donc jamais un saut subi. */
.addr-m{
  margin:9px 0 0;font-size:var(--s-2);line-height:var(--h-3);color:var(--ink-3);
}
.addr-m-p{color:var(--ink-2)}
.e-ink .addr-m,.e-blue .addr-m{color:rgba(255,255,255,.62)}
.e-ink .addr-m-p,.e-blue .addr-m-p{color:rgba(255,255,255,.82)}

/* L'écran des avis quand Google ne répond pas. Il annonçait « voici ce
   qu'ils en disent » et n'affichait rien dessous. Il explique maintenant, et
   il donne le chemin vers les vrais avis — on n'en fabrique toujours aucun. */
.avis-vide{
  margin:26px 0 0;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--paper);max-width:var(--lire);
  font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-5);
}
.avis-vide a{
  display:inline-block;margin-top:7px;color:var(--vif);font-weight:700;
  border-bottom:1px solid rgba(8,110,96,.34);
}
.avis-vide a:hover{border-bottom-color:var(--vif)}
.avis-vide a:active{opacity:.62}
.e-ink .avis-vide,.e-blue .avis-vide{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.76);
}
.e-ink .avis-vide a,.e-blue .avis-vide a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}

/* ══ LE POUCE ═════════════════════════════════════════════════════════════
   Mesuré sur un téléphone de 390 px : sur 67 cibles visibles, 25 familles
   passaient sous les 44 px de côté qu'il faut à un pouce. Les trois pires :

     · LE CHAMP D'ADRESSE, 26 px de haut — le contrôle le plus important de
       la page. Le cadre gris en fait 56, mais son rembourrage appartenait à
       la BOÎTE et pas au champ : appuyer sur la bordure ne faisait rien.
       C'est le piège classique, et il coûte des réservations ;
     · LES BOUTONS PLUS ET MOINS du calculateur, 40 px — ceux qu'on tape le
       plus souvent, plusieurs fois de suite ;
     · LES LIENS DU PIED DE PAGE, 16 px de haut espacés de 9 — soit un pas
       de 25 px pour une cible de 16. On tape le lien d'à côté.

   Deux méthodes, selon le cas. Pour un bouton isolé, une plaque invisible
   par-dessus : la zone tactile passe à 44 px sans qu'un seul pixel visible
   ne change. Pour une colonne de liens serrés, la plaque ne sert à rien —
   elle mordrait sur le voisin — il faut de la vraie place, donc du
   rembourrage.                                                            */

/* Le champ d'adresse : le rembourrage passe de la boîte au champ. Le cadre
   garde exactement la même taille, mais il devient tapable en entier. */
.addr-row{padding:0 17px}
.addr-row input{padding:15px 0}

/* La plaque invisible. min-height ne rétrécit jamais une grande cible : elle
   ne fait que relever les petites. */
.step-btn,.chip,.offre-o,.logo{position:relative}
.step-btn::after,.chip::after,.offre-o::after,.logo::after,.infobar-x::after{
  content:'';position:absolute;left:50%;top:50%;
  width:100%;height:100%;min-width:44px;min-height:44px;
  transform:translate(-50%,-50%);
}

/* Le curseur de durée : la boîte tapable monte à 44 px, la marge négative
   rend la hauteur au reste de la page. Rien ne bouge à l'écran. */
/* z-index : la marge négative fait déborder la boîte de 9 px sur le bloc
   suivant, et sans lui c'est le bloc suivant qui attrapait le doigt. */
.gliss{height:44px;margin:-9px 0;position:relative;z-index:1}

/* Les colonnes de liens : de la place, pas une plaque. Le pas passe de 25 à
   32 px, et chaque lien de 16 à 30 px de haut. */
.pied-grid li{margin-bottom:2px}
.pied-grid a{display:inline-block;padding:7px 0}
.pied a,.preview-bar a{display:inline-block;padding:5px 0}
.avis-vide a{padding-top:9px;padding-bottom:5px}

/* Le pied de page n'a pas la classe .ecran : il ne recevait donc pas le
   dégagement qui met le contenu hors de portée de la barre du bas. Mesuré :
   tout en bas de la page, trois liens du pied finissaient SOUS la barre — et
   comme on ne peut pas défiler plus loin, ils étaient inatteignables. */
@media(max-width:900px){
  .pied-bloc{padding-bottom:calc(40px + 76px + env(safe-area-inset-bottom))}
}

/* ══ LE HAUT DE PAGE A ENFIN UN SOL ═══════════════════════════════════════
   Constat en regardant la page entière comme une planche : l'écran d'accueil
   — celui que tout le monde voit — est le plus PLAT du site. Tous les autres
   ont une masse sombre ou un grand chiffre qui accroche l'œil : le
   calculateur est un bloc marine, les tarifs ont une carte marine au milieu,
   la promesse est marine d'un bord à l'autre.

   L'accueil, lui, était du blanc sur du blanc : la carte d'adresse est
   blanche, les deux cartes de machines sont blanches, et le fond de page est
   blanc. Trois plans à la même valeur, séparés par un filet d'un pixel. Rien
   ne se détache, donc rien n'attire.

   Le sol passe au clair. Aucun élément ajouté, aucune couleur nouvelle :
   c'est la même teinte que les autres écrans clairs du site. Mais les cartes
   deviennent enfin des cartes — et la carte d'adresse, la seule qui reste
   franchement blanche avec son ombre, devient le point le plus lumineux de
   l'écran. C'est aussi celle qui convertit.                                */
.e1{background:var(--mist)}

/* ══ DE LA RÉSERVATION À LA REPRISE ═══════════════════════════════════════
   La page montrait les machines, la fenêtre, le prix, la zone — jamais le
   DÉROULÉ. C'est pourtant la question qu'on se pose avant de payer : que va-
   t-il se passer, dans quel ordre, et qu'est-ce que j'ai à faire ?

   Le bandeau se pose sur la teinte pâle de la marque, entre la promesse
   marine et le bandeau clair de la fenêtre : trois valeurs qui se suivent au
   lieu de deux fonds clairs collés l'un à l'autre.
   Ce n'est pas un écran — pas de classe .ecran, donc pas de point de
   navigation. C'est du mobilier, comme la bande photo et le mot qui tourne. */
.parcours{background:var(--vif-clair);padding:clamp(52px,7.5vw,92px) var(--pad)}
.parcours-in{max-width:var(--max);margin:0 auto}
.pc-t{font-family:var(--font-titre);font-size:var(--t-4);font-weight:700;
  letter-spacing:-.028em;line-height:var(--h-1);max-width:16ch;text-wrap:balance}
.pc-t em{font-style:normal;color:var(--vif)}
.pc-d{margin-top:16px;max-width:var(--lire);font-size:var(--s-4);
  color:var(--ink-2);line-height:var(--h-5)}

.pas-l{list-style:none;margin:36px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:26px}
@media(min-width:620px){.pas-l{grid-template-columns:1fr 1fr;gap:30px 26px}}
@media(min-width:1000px){.pas-l{grid-template-columns:repeat(4,1fr);gap:24px}}
.pas{min-width:0;position:relative;counter-increment:pas}
/* Le dessin sur un carré blanc : sur la teinte pâle, un trait posé à même le
   fond se perdrait. */
.pas-d{background:var(--paper);border:1px solid rgba(8,110,96,.14);
  border-radius:var(--r-l);padding:8px 0;margin-bottom:16px}
.pas-d svg{display:block;width:100%;height:auto;max-width:170px;margin:0 auto;
  color:var(--ink-2)}
/* Le numéro dit un ordre, et l'ordre est une vraie information ici : on ne
   peut pas récupérer avant d'avoir livré. */
.pas-e{display:flex;align-items:baseline;gap:8px;
  font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-5);
  text-transform:uppercase;color:var(--vif-d)}
.pas-e::before{content:counter(pas);font-size:var(--s-3);letter-spacing:0;
  color:var(--vif);font-variant-numeric:tabular-nums}
.pas-t{margin:9px 0 0;font-size:var(--t-5);font-weight:700;
  letter-spacing:var(--l-2);line-height:var(--h-2);color:var(--ink)}
.pas-p{margin:9px 0 0;font-size:var(--s-3);color:var(--ink-2);line-height:var(--h-5)}
.pas-l{counter-reset:pas}

/* ══ LES COUTURES ═════════════════════════════════════════════════════════
   Mesure de toutes les jonctions, deux à deux, en comparant la luminance des
   fonds : sur 23 coutures, 9 ont un écart inférieur à 1,07 — autant dire
   rien. Mais un écart de 1,07 (blanc contre gris très clair) reste une VRAIE
   marche : discrète, et c'est bien ce qu'on veut entre deux idées voisines.
   Souligner les neuf ferait une page réglée comme un cahier.

   Deux coutures, elles, ont un écart de 1,00 : les deux fonds sont
   RIGOUREUSEMENT identiques, et les sections se fondent en un seul long
   bloc. Celles-là, et celles-là seulement, reçoivent un filet.

   · l'accueil et le calculateur, depuis que l'accueil a son sol clair ;
   · le dernier écran et le pied de page, tous deux marine.               */
.e1 + .e-mist{border-top:1px solid var(--line)}
.e-ink + .pied-bloc{border-top:1px solid rgba(255,255,255,.12)}

/* Et pendant qu'on y est : l'accueil se terminait 48 px plus tôt que tous
   les autres écrans (28 px de dégagement au lieu de 76). Avec un sol de la
   même teinte que l'écran suivant, ça finissait de coller les deux. Il
   rentre dans le rang. */
.e1{padding-bottom:76px}

/* ══ LA CARTE DU LITTORAL ═════════════════════════════════════════════════
   Elle remplace le rail : un rail dit l'ordre, une carte dit la distance.
   Quelqu'un à Cannes voit enfin qu'il est à un bout et Nice au milieu.

   Tout est dessiné, rien n'est emprunté : pas de tuiles à charger, pas de
   bibliothèque, rien qui parte chez un tiers, et les couleurs sont celles
   de la maison au lieu de celles d'un fournisseur de cartes. Le texte reste
   du vrai texte — il se traduit, il grossit au zoom, et Google le lit. */
.carte{margin:32px 0 0;padding:0}
.carte svg{
  display:block;width:100%;height:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);
}
.ct-mer{fill:var(--vif);fill-opacity:.055}
.ct-cote{fill:none;stroke:var(--vif);stroke-width:2.2;stroke-opacity:.62;
  stroke-linecap:round;stroke-linejoin:round}
/* Le halo de la zone standard : un tarif, pas une frontière. Il n'a donc
   pas de bord net — un trait plein donnerait à croire à une limite exacte. */
.ct-zone{fill:var(--vif);fill-opacity:.1;stroke:var(--vif);stroke-opacity:.3;
  stroke-width:1.6;stroke-dasharray:7 7}
.ct-tr{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-opacity:.5}
.ct-p{fill:var(--paper);stroke:var(--ink-3);stroke-width:2.4}
.ct-p-std{fill:var(--vif);stroke:var(--vif)}
.ct-p-hub{fill:var(--vif);stroke:var(--vif);stroke-width:3}
.ct-halo{fill:var(--vif);fill-opacity:.14}
.ct-n{font-family:var(--font);font-size:19px;font-weight:700;fill:var(--ink-2);
  letter-spacing:-.01em}
.ct-n-hub{font-size:27px;fill:var(--vif);font-family:var(--font-titre);letter-spacing:-.03em}
.ct-ech path{fill:none;stroke:var(--ink-3);stroke-width:1.8;stroke-opacity:.55}
.ct-ech-n{font-family:var(--font);font-size:16px;font-weight:600;
  fill:var(--ink-3);letter-spacing:.04em}
/* Le nom de la mer se lit, mais il ne dispute rien aux villes : c'est un
   fond, pas une etiquette. */
.ct-mer-n{font-family:var(--font-titre);font-size:26px;font-weight:500;
  fill:var(--vif);fill-opacity:.42;letter-spacing:.16em}
.carte-l{margin-top:14px;max-width:62ch;font-size:var(--s-2);
  color:var(--ink-3);line-height:var(--h-3)}
.carte-l b{color:var(--ink-2);font-weight:700}
/* Sur téléphone la carte fait 390 px de large : à 19 px dans un cadre de
   1000, une étiquette tombe à 7 px réels. Le texte grossit dans le repère
   de la carte pour retomber sur ses pieds à l'écran. */
@media(max-width:760px){
  .ct-n{font-size:32px}
  .ct-ech-n{font-size:26px}
  .ct-mer-n{font-size:31px}
  .ct-n-hub{font-size:42px}
  .ct-p{stroke-width:4}
  .ct-cote{stroke-width:3.4}
}

/* ══ LE BOUTON QUI ATTEND ══════════════════════════════════════════════════
   Mesure d'origine : aucune règle aria-busy sur toute la page. On appuyait
   sur « Voir les disponibilités », la page suivante mettait une seconde à
   venir sur un réseau lent, et rien ne bougeait — alors on réappuyait.
   Le bouton n'est pas désactivé (désactiver un bouton d'envoi dans la
   seconde annule l'envoi sur certains navigateurs) : il est simplement
   sourd au clic suivant, et il le montre. */
.btn[aria-busy="true"]{
  pointer-events:none;
  opacity:.78;
  position:relative;
  padding-left:calc(1.15em + 22px);
}
.btn[aria-busy="true"]::before{
  content:"";position:absolute;left:1.15em;top:50%;
  width:15px;height:15px;margin-top:-8px;
  border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;
  animation:tourne .7s linear infinite;
}
@keyframes tourne{to{transform:rotate(360deg)}}
/* Qui a demandé moins de mouvement garde le signal, sans la rotation :
   un cercle ouvert immobile dit encore « ça travaille ». */
@media(prefers-reduced-motion:reduce){
  .btn[aria-busy="true"]::before{animation:none}
}

/* La ville qu'on est déjà en train de lire, dans la colonne « Nos villes » :
   elle est nommée mais elle n'est pas un lien — un lien vers la page où l'on
   se trouve déjà ne mène nulle part. Elle se tient un peu plus clair que
   les autres, comme un endroit où l'on est. */
.pied-grid [aria-current="page"]{color:rgba(255,255,255,.86);font-weight:600}

/* ══ RÉSERVER CETTE MACHINE (Booqable) ═════════════════════════════════════
   Le widget vient d'un autre serveur et apporte ses propres styles. On le
   pose sous la fiche de la machine, séparé par un filet — pas dans un cadre
   à lui : ce n'est pas une publicité collée sur la carte, c'est la suite de
   la carte.
   Le bloc est masqué tant que Booqable n'a rien posé dedans (voir le script
   en bas de version-b.html) : une case sans donnée s'efface. */
.loue{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.loue-t{
  font-size:var(--s-1);font-weight:700;letter-spacing:var(--l-6);
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
}
/* On borne ce que le widget peut faire : il ne pousse pas la page de côté,
   et ses images ne débordent pas de la colonne. Le site tient 0 débordement
   horizontal de 320 à 1900 px — un invité ne casse pas ça. */
.loue .booqable-product{max-width:100%;overflow-x:auto}
.loue img,.loue svg{max-width:100%;height:auto}

/* ══ LE PANNEAU D'ACCUEIL ══════════════════════════════════════════════════
   L'accueil devient un panneau plein cadre, sombre, avec une scène dessinée
   à droite.
   TOUT EST ATTACHÉ À `.e1.e-ink`, et pas à `.e1` seul : /pro.html porte
   AUSSI une section .e1. Mesuré, la première version avait déteint dessus —
   fond marine, textes restés sombres, quatre textes sous la norme et deux
   anneaux de focus faibles. Seule version-b porte la classe e-ink. */
.e1.e-ink{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}

/* ── LA BARRE POSEE SUR LE PANNEAU : ESSAYEE, RETIREE ─────────────────────
   La reference met sa navigation SUR la photo. J'ai rendu la barre
   transparente pour faire pareil — puis mesure, et retire, pour deux
   raisons.
   1. CA NE SE VOYAIT PAS. La barre et le panneau sont exactement le meme
      marine : il n'y a aucune couture a cacher. Sur la reference le gain
      vient de la PHOTO qui passe sous la barre ; ici il n'y a pas de photo,
      donc rien ne passe.
   2. CA CASSAIT LES ANNEAUX DE FOCUS. La barre porte un anneau BLANC, choisi
      parce qu'elle est marine (9,84:1). Transparente, elle n'a plus de fond
      a elle : l'audit tombait a 1,00 sur cinq elements. Le rendu restait
      lisible, mais un signal de securite qui ment est pire qu'une
      amelioration invisible.
   Le jour ou une vraie photo arrive, ca vaudra le coup — et il faudra alors
   donner a la barre un anneau qui tienne sur l'image. */

/* ── LE CONTENU S'ANCRE PLUS BAS ──────────────────────────────────────────
   Ca, en revanche, se voit : le titre et le formulaire descendent vers le
   bord bas au lieu de flotter au milieu. C'est la lecture d'une affiche. */

/* ── LE CONTENU S'ANCRE EN BAS A GAUCHE ───────────────────────────────────
   Reference : le titre et les boutons sont poses sur le bord bas, pas
   centres. Le regard part du bas-gauche et remonte — c'est la lecture
   naturelle d'une affiche.
   Le panneau garde ses deux rangees (le contenu, puis les garanties) ;
   c'est la premiere qui cesse d'etre centree. */
.e1.e-ink{align-items:end}
@media(max-width:900px){ .e1.e-ink{align-items:start} }
.e1.e-ink .in{position:relative;z-index:2}

/* La scène occupe les deux tiers droits et se fond vers la gauche : le texte
   doit rester lisible, donc l'image s'efface là où il commence. Elle se
   dissout aussi avant la rangée de garanties, sinon la machine vient couper
   les mots. */
.e1.e-ink .e1-scene{
  position:absolute;right:0;top:0;bottom:0;width:min(56%,760px);
  color:#fff;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34%),
                     linear-gradient(to bottom,#000 0,#000 78%,transparent 96%);
          mask-image:linear-gradient(to right,transparent 0,#000 34%),
                     linear-gradient(to bottom,#000 0,#000 78%,transparent 96%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.e1.e-ink .e1-scene svg{width:100%;height:100%;display:block}

/* Les textes du panneau passent sur fond sombre. */
.e1.e-ink .quoi{color:rgba(255,255,255,.78)}
.e1.e-ink .etat{color:rgba(255,255,255,.66)}
/* Mesuré : le gras de cette ligne restait marine sur marine — contraste 1,0.
   « après-demain matin », c'est-à-dire LA promesse de délai, était purement
   et simplement invisible. */
.e1.e-ink .etat b{color:#fff}
.e1.e-ink .etat .etat-pt{background:var(--gold)}
.e1.e-ink .preuve1{color:rgba(255,255,255,.68)}
.e1.e-ink .preuve1 b{color:#fff}
.e1.e-ink .bord{border-color:rgba(255,255,255,.16)}
.e1.e-ink .bord-k{color:rgba(255,255,255,.6)}
.e1.e-ink .bord-v{color:#fff}
/* La carte d'adresse reste blanche : sur le marine, c'est le point le plus
   lumineux de l'écran — et c'est celui qui convertit. */
.e1.e-ink .addr{background:var(--paper);box-shadow:var(--o-3)}
/* L'anneau de focus suit le fond sur lequel il est réellement tracé — c'est
   déjà le motif du site (.tete passe en or sur le marine). Sur le panneau
   marine : l'or, 6,86:1. Dans la carte blanche du formulaire : le sarcelle,
   5,98:1. Aucune couleur ne tient sur les deux, donc on les sépare. */
.e1.e-ink{--focus:var(--gold)}
.e1.e-ink .addr{--focus:var(--vif)}

/* ── LES CINQ GARANTIES, EN UNE RANGÉE QU'ON VOIT ─────────────────────────
   Mesuré sur la version précédente : elles commençaient à 836 px dans une
   fenêtre de 900, à opacité zéro. Autant dire que personne ne les voyait,
   alors que ce sont les cinq arguments les plus forts de la page.
   Elles deviennent une seule ligne, sans icônes, épinglée au bas du
   panneau. Même texte, mêmes clés : rien n'est perdu, tout devient
   visible. */
.e1.e-ink .rassure-socle{border-top-color:rgba(255,255,255,.16)}
.e1.e-ink .rassure-in{display:flex;flex-wrap:wrap;gap:7px 24px;grid-template-columns:none}
.e1.e-ink .ras{flex:0 1 auto;min-width:0;flex-direction:row;align-items:baseline;
  gap:6px;padding:0;white-space:nowrap}
.e1.e-ink .ras::before{display:none}
.e1.e-ink .ras-i{display:none}
.e1.e-ink .ras b{color:#fff;font-size:var(--s-2)}
.e1.e-ink .ras span{color:rgba(255,255,255,.62);font-size:var(--s-2)}
.e1.e-ink .ras i{color:var(--gold)}

/* ── LES DEUX MACHINES, SOUS LE PANNEAU ──────────────────────────────────── */
.choix-bande{background:var(--mist);border-bottom:1px solid var(--line);
  padding:var(--e-2) 0}
.choix-bande .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.choix-bande .choix{margin:0}

@media(max-width:900px){
  /* Sur téléphone la scène passe derrière le texte : elle recule et se
     décale, sinon elle croise les lignes. */
  .e1.e-ink .e1-scene{width:132%;right:-46%;opacity:.5}
  .e1.e-ink .rassure-in{gap:5px 16px}
}

/* ── LE SURTITRE DU HAUT DE PAGE ──────────────────────────────────────────
   Le panneau ouvrait sur une petite phrase grise, puis le grand titre. Il
   manquait la ligne d'avant : celle qui pose QUI parle et D'OÙ, en deux
   mots, avant qu'on lise quoi que ce soit d'autre.
   Or sur fond sombre — la règle de la maison — capitales espacées, petit
   corps. Les capitales sont posées ICI et non dans le dictionnaire : le
   chinois n'a pas de casse, et un lecteur d'écran ne doit pas épeler des
   majuscules qu'on a écrites à la main.
   Mesuré sur fond marine #0E1F35 : l'or #C9A227 donne 6,86:1, très
   au-dessus de la norme (4,5:1). */
.e1.e-ink .sur{
  margin:0 0 10px;
  color:var(--gold);
  font-family:var(--font);
  font-size:var(--s-1);
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  line-height:1.3;
}
/* Le point médian sépare la marque du territoire : il respire un peu plus
   que le reste, sinon l'espacement des capitales l'écrase contre les mots. */
.e1.e-ink .sur{word-spacing:.06em}
/* Sur téléphone, 17 % d'espacement sur 25 signes dépassent la colonne.
   Mesuré à 320 px : 232 px de texte pour 272 de large — ça passe, mais de
   justesse. L'espacement descend, la ligne tient sans se couper. */
@media(max-width:520px){
  .e1.e-ink .sur{letter-spacing:.12em;font-size:11px}
}

/* ── LA BANDE QUAND CE SONT DES PHRASES, PAS DES NOMS ──────────────────────
   Sur les pages de ville, les mots qui tournent sont des noms de quartier :
   deux ou trois syllabes, 64 px passent. Sur /pro ce sont des phrases
   entières — « L'électricité ne suit pas », 25 signes. Mesuré à 1440 px :
   il en fallait 800 pour une colonne de 600, et trois des quatre finissaient
   en « … ». Le corps descend, et le libellé peut passer à la ligne. */
.mots-phr .mots-c{font-size:clamp(22px,3vw,40px)}
.mots-phr .mots-l{white-space:normal}
@media(max-width:700px){ .mots-phr .mots-c{font-size:clamp(19px,5.4vw,34px)} }

/* ── LA CARTE QUE L'ON SUIT AU DOIGT ──────────────────────────────────────
   Le trait de côte n'est plus une animation qu'on regarde : il est branché
   sur le défilement. On descend, le crayon va de Cannes vers Menton ; on
   remonte, il revient. Les villes s'allument au passage de la pointe.

   Tout ce qui suit ne s'applique QUE sous .carte-suit, une classe posée par
   le JavaScript. Sans JavaScript, sans SVG mesurable, ou pour qui a demandé
   moins d'animation, la classe n'existe pas : la carte est simplement là,
   entière, avec ses neuf villes. Rien à annuler, rien à réparer. */
.carte-suit .ct-v,
.carte-suit .ct-zone{
  opacity:0;
  /* La ville grandit d'un cheveu en se posant : c'est ce qui fait qu'on la
     voit APPARAÎTRE et non simplement exister. 4 % suffisent. */
  transform:scale(.96);
  transform-origin:center;
  transform-box:fill-box;
  transition:opacity .34s var(--mv), transform .34s var(--mv);
}
.carte-suit .ct-v.vu,
.carte-suit .ct-zone.vu{opacity:1;transform:none}

/* LA POINTE DU CRAYON. Elle chevauche le bout du trait pendant qu'il court,
   et disparaît aux deux extrémités : au repos, une carte finie n'a pas de
   curseur qui traîne dessus.
   Un halo très doux et un noyau serré, et non un disque plein : relu en
   capture, le disque plein se confondait avec les points de ville — même
   sarcelle, même taille — et se lisait comme une dixième commune qui
   glissait. Un halo, ça ne se lit pas comme un lieu, ça se lit comme un
   mouvement.
   Sarcelle, pas or : l'or de la maison ne se pose que sur fond sombre, et la
   carte est blanche.
   Les rayons sont posés en ATTRIBUT par le script et non ici : la propriété
   CSS « r » n'existe dans Safari que depuis la 16.4, et une pointe invisible
   sur un iPhone d'avant n'est pas une option. */
.ct-tete{opacity:0;transition:opacity .2s linear;pointer-events:none}
.ct-tete.vu{opacity:1}
.ct-tete-h{fill:var(--vif);fill-opacity:.16}
.ct-tete-c{fill:var(--vif);stroke:var(--paper);stroke-width:2.5}
@media(max-width:760px){ .ct-tete-c{stroke-width:5} }

/* Pour qui a demandé moins d'animation, le script ne pose même pas la
   classe et ne s'abonne à aucun défilement. Ces règles sont une ceinture :
   si la classe arrivait quand même, rien ne bougerait et rien ne serait
   caché. */
@media(prefers-reduced-motion:reduce){
  .carte-suit .ct-v,
  .carte-suit .ct-zone{opacity:1;transform:none;transition:none}
  .carte-suit .ct-cote{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .ct-tete{display:none}
}

/* ── LA PORTE DE L'ESPACE CLIENT, VISIBLE DÈS LE HAUT ─────────────────────
   Quelqu'un qui a déjà loué ne vient pas lire les tarifs : il vient suivre
   sa livraison ou récupérer une facture. Il ne doit pas chercher.
   Le libellé avait été retiré de la barre pour une raison de place. Mesuré
   aujourd'hui : 306 px de libre à 901 px, 405 au-delà — l'argument ne tient
   plus. Il redevient donc visible sur ordinateur.
   Sous 901 px il reste dans le HTML, seulement masqué à l'œil : c'est lui
   qui donne son nom au lien, et le menu prend le relais. */
.bar-compte{width:auto;min-width:44px;gap:8px;padding:0 10px;border-radius:var(--r-f)}
.bar-compte-t{
  font-size:var(--s-2);font-weight:700;letter-spacing:var(--l-3);white-space:nowrap;
}
@media(max-width:900px){
  /* Masqué à l'œil, pas au lecteur d'écran : le lien garde son nom. */
  .bar-compte{width:44px;min-width:0;padding:0}
  .bar-compte-t{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

/* ── LE COMPTE À REBOURS QUI BAT ───────────────────────────────────────────
   « Il reste 3 h 12 » se met à jour toute seule chaque minute — en silence.
   Un battement d'une demi-seconde quand la minute tombe, et on comprend que
   le temps tourne vraiment.
   La case est marquée aria-hidden dans le HTML : elle change sans que
   personne ne soit interrompu (le bandeau porte role="status"). */
#infobar-reste{display:inline}
.ib-bat{animation:battement .5s var(--mv) 1}
@keyframes battement{
  0%   {opacity:.35}
  40%  {opacity:1}
  100% {opacity:1}
}
@media(prefers-reduced-motion:reduce){ .ib-bat{animation:none} }