/* =========================================================================
   Sitero — premium.css
   Passe de finition, « regard de designer senior ».

   CETTE FEUILLE N'EST QU'UN COMPLÉMENT.
   Elle ne remplace aucun fichier : elle se charge APRÈS style.css et
   corrige des détails de rythme, de graisse, d'alignement, de couleur et
   d'état de survol. Aucun nom de classe n'est inventé : tout ce qui suit
   vise des classes qui existent déjà dans le site.

   OÙ LA BRANCHER (une seule ligne à ajouter par page, EN DERNIER) :
     index.html            <link rel="stylesheet" href="assets/css/premium.css?v=62">
     les 6 pages de pages/   <link rel="stylesheet" href="../assets/css/premium.css?v=62">
     mentions-legales.html et confidentialite.html : ces deux pages portent
     leur propre bloc <style> dans le <head>. Les règles qui les concernent
     sont donc écrites ici avec une spécificité SUPÉRIEURE (« main.lgl … »
     plutôt que « .lgl … ») : elles passent devant même si le lien est
     placé avant le bloc <style>. Rien à réordonner à la main.

   CE QUE CETTE FEUILLE NE TOUCHE JAMAIS, volontairement :
     — LA SÉQUENCE D'INTRODUCTION : .wm, .wmx, .wm__*, .wmx__*, et les
       classes intro-on / intro-finie / wm-vol / wm-plein / hero-arrive /
       wmx-pose. Elle est réglée au quart de seconde près et .wmx__box est
       pilotée par GSAP au défilement : on n'y met pas un doigt, et surtout
       aucune transition ni aucun transform.
     — L'EN-TÊTE ET LE LOGO : .hdr, .logo, .mk, .logo__tx, .nav, .mnav,
       .burger, .hdr__cta, .btn--sm (qui ne sert QUE dans l'en-tête).
       Thibault les refait lui-même en ce moment.
     — LES APPARITIONS AU DÉFILEMENT : .reveal / .vu / [data-an], la
       maquette qui se construit (.mock*), la bande défilante (.ticker).
       Un autre agent en a la charge (anim-sections.css / .js).
     — LA GALERIE : toutes les classes .gal*. Un troisième agent s'en
       occupe (galerie.css / .js). Elle bénéficie quand même des couleurs
       corrigées ici, puisqu'elle utilise les variables du site.

   PERFORMANCE : aucun backdrop-filter ajouté, aucun filter:blur, aucun
   content-visibility, aucun will-change ajouté (on en RETIRE même un).
   Les ombres sont courtes et nettes plutôt que larges et floues.

   CONTRASTES : tous les rapports cités en commentaire ont été mesurés
   (formule WCAG 2.x). Le minimum visé est 4,5:1 pour du texte courant,
   3:1 pour du grand texte, un contour de champ ou une icône porteuse
   de sens.
   ========================================================================= */


/* =========================================================================
   1. LES JETONS AJOUTÉS
   Le site avait déjà ses variables (--tint, --gold, --gut, --r-*, --pad-s).
   On ne les remplace pas : on ajoute les quelques-unes qui manquaient pour
   que les mêmes valeurs reviennent partout au lieu d'être réécrites à la
   main dans chaque bloc (le site comptait une vingtaine de tailles de texte
   différentes entre 0,78 et 1,06 rem — l'œil ne lit pas ça comme une
   hiérarchie, il le lit comme du désordre).
   ========================================================================= */
:root{

  /* Le blanc intérieur des cartes : une seule valeur pour toutes les cartes
     du site, qui grandit avec l'écran. Avant : 32/28/26 ici, 30→44 là,
     30→40 / 24→34 ailleurs — quatre densités pour quatre cartes qui se
     ressemblent. La valeur retenue est la plus généreuse des quatre : on
     unifie vers le haut, pas vers le bas, la page doit respirer. */
  --pad-card:clamp(28px,3vw,42px);

  /* La place réservée en haut des cartes de prix pour l'étiquette « La plus
     demandée ». Réservée sur les TROIS cartes, avec ou sans étiquette :
     c'est la seule façon d'aligner les trois prix. Voir §7. */
  --pad-badge:36px;

  /* La gouttière des grilles de cartes. Le site en avait cinq différentes
     (14, 16, 20, 26 px et un clamp). On garde le clamp déjà présent comme
     référence unique. */
  --gap-grid:clamp(16px,1.8vw,24px);

  /* --- graisses ------------------------------------------------------- */
  /* Le site utilisait douze graisses : 450, 480, 500, 520, 560, 600, 620,
     640, 650, 660, 680, 700. Entre 620 et 640 personne ne voit rien : ce
     n'est pas de la hiérarchie, c'est de l'imprécision. Quatre suffisent,
     comme chez Apple : normal, moyen, demi-gras, gras. */
  --w-normal:400;
  --w-moyen:500;    /* libellés d'interface, légendes                      */
  --w-demi:600;     /* titres de carte, boutons, surtitres, gros chiffres  */
  --w-gras:700;     /* uniquement les grands titres                        */

  /* --- crénage : il dépend de la TAILLE, pas de l'humeur --------------- */
  /* Plus un texte est gros, plus il faut le resserrer. C'est la règle la
     plus simple de la typographie d'affichage, et c'est elle qui fait
     qu'un titre « tient » au lieu de flotter. */
  --ls-display:-.045em;   /* 3 rem et plus       */
  --ls-titre:-.032em;     /* 2 à 3 rem           */
  --ls-sous:-.022em;      /* 1,2 à 2 rem         */
  --ls-corps:-.011em;     /* texte courant       */
  --ls-ui:-.006em;        /* petits libellés     */
  --ls-caps:.12em;        /* petites capitales   */

  /* --- couleurs de TEXTE accentué -------------------------------------
     Le turquoise de la marque (#0092b5) mesuré sur blanc donne 3,63:1 :
     c'est en dessous du minimum de 4,5:1 exigé pour du petit texte, et
     3,34:1 seulement sur le gris papier. Il reste parfait pour les aplats,
     les traits et les icônes ; il n'était pas lisible en texte. Même chose
     pour le doré (3,18:1).
     On ne change donc PAS la couleur de la marque : on ajoute deux
     variantes réservées au TEXTE, plus foncées de deux crans.
     Mesures : #00738f = 5,46:1 sur blanc et 5,01:1 sur papier
               #9d6210 = 5,01:1 sur blanc et 4,60:1 sur papier */
  --tint-txt:#00738f;
  --gold-txt:#9d6210;

  /* --- gris tertiaire ---------------------------------------------------
     #86868b donnait 3,62:1 sur blanc et 3,33:1 sur le gris papier : sous le
     minimum, alors qu'il porte les sous-titres de formule, les notes de bas
     de section, les mentions RGPD, les légendes de la galerie et tout le
     pied de page. Assombri d'un cran : 5,30:1 sur blanc, 4,87:1 sur papier.
     C'est la correction qui répare le plus d'endroits d'un seul geste,
     puisque tout le site passe déjà par cette variable.
     ATTENTION : là où ce gris clair était un CHOIX de composition et non un
     oubli — la deuxième ligne des grands titres, le « € » à côté du prix —
     on lui rend sa valeur claire d'origine. Voir §8. */
  --ink-3:#6b6b70;

  /* Le contour des champs de formulaire doit se voir : à #d2d2d7 sur le
     gris papier de la carte, il mesurait 1,38:1 — autant dire pas de
     contour du tout. #8a8a8f donne 3,16:1, le minimum pour un élément
     d'interface. */
  --line-champ:#8a8a8f;

  /* --- rayons des CONTRÔLES --------------------------------------------
     Les rayons des cartes (--r-s/m/l/xl) étaient cohérents ; ceux des
     éléments cliquables ne l'étaient pas : bouton 16, onglet 12, champ 12,
     appel à l'action 13. Deux valeurs suffisent. */
  --r-ctl:14px;      /* boutons                          */
  --r-ctl-sm:11px;   /* champs, pastilles, petits objets */

  /* --- ombres ----------------------------------------------------------
     Une ombre courte et nette qui pose l'objet, une seconde plus longue qui
     donne la hauteur. Toutes tirées vers le bleu de l'encre plutôt que vers
     le noir pur : une ombre grise neutre fait « bord découpé », une ombre
     légèrement bleutée fait « lumière ». Aucun rayon de flou démesuré —
     l'ancienne ombre de survol des formules montait à 80 px de flou sur
     quatre couches, c'était la surface la plus coûteuse à dessiner du site. */
  --ombre-1:0 1px 2px rgba(16,24,40,.05);
  --ombre-2:0 1px 2px rgba(16,24,40,.05),0 14px 28px -18px rgba(16,24,40,.28);
  --ombre-3:0 1px 2px rgba(16,24,40,.06),0 26px 46px -24px rgba(16,24,40,.34);

  /* Le dégradé des boutons principaux. L'ancien partait de #00b8de : sous
     du texte blanc, ce coin-là mesurait 2,36:1, franchement illisible. Le
     nouveau garde exactement le même geste (clair en haut à gauche, profond
     en bas à droite) mais chaque arrêt passe le seuil : 4,58 / 5,68 / 7,10.
     C'est le même turquoise, simplement descendu d'un cran de luminosité.
     Cette variable ne sert qu'à .btn--blue : l'appel à l'action de l'en-tête
     déclare sa propre couleur dans style.css et n'est donc pas concerné. */
  --tint-grad:linear-gradient(135deg,#00809f 0%,#00708c 46%,#075f80 100%);

  color-scheme:light;   /* les contrôles natifs restent clairs, même en thème sombre système */
}


/* =========================================================================
   2. LE TEXTE COURANT
   Inter posée telle quelle est un peu lâche à 17 px. Un crénage négatif
   très léger sur tout le corps de texte, et le site prend d'un coup la
   densité tranquille d'une page Apple. Les blocs qui déclarent leur propre
   crénage (surtitres en capitales, grands titres) ne sont pas concernés.
   ========================================================================= */
body{letter-spacing:var(--ls-corps)}

/* Évite les lignes qui finissent sur un mot isolé dans les paragraphes
   longs. C'est le navigateur qui équilibre, ça ne coûte rien. */
.lead,.bc p,.goc p,.op__d,.pbc p,.ac__b p,.st p,.me__note,.exc p,
.ab-me__p,.ab-num__d,.ap__note,.of__note,.pe__rule p,
main.lgl p{text-wrap:pretty}

/* La sélection reprend la couleur de la marque au lieu du bleu système. */
::selection{background:rgba(0,146,181,.16);color:var(--ink)}


/* =========================================================================
   3. LES GRAISSES, RAMENÉES À QUATRE
   Rien ne change de taille : seule la graisse est normalisée. On y gagne
   deux choses. D'abord la cohérence : deux titres de même niveau ont
   désormais exactement le même poids. Ensuite la hiérarchie : les grands
   titres passent à 700 pendant que les gros chiffres redescendent à 600,
   donc le titre domine son chiffre au lieu de lutter avec lui.
   ========================================================================= */

/* les grands titres — les seuls à 700 */
.h2{font-weight:var(--w-gras);letter-spacing:var(--ls-titre)}

/* titres de carte, sous-titres, boutons, surtitres : 600 */
.h4,.bc h3,.goc h3,.st h3,.exc h3,.op__k,.apc__k,.pel h3,.ft__nav h3,
.ab-me__pt b,.ab-me__note h3,.ab-num__k,.ab-me__id b,.opt b,
.eyebrow,.ab-nums__tag,.op__plus-k,.op__badge,.apc__b,
.btn,.ac summary,main.lgl h2,main.lgl h3,
.lgl .note-relire__t{font-weight:var(--w-demi)}

/* les gros chiffres : 600 également. À 3 ou 4 rem, 600 est déjà très
   présent ; 640 ou 660 les rendaient pâteux à côté d'un titre. */
.pbc__n,.op__p span,.apc__p span,.ab-num__n{font-weight:var(--w-demi)}
.pbc__u,.op__p em,.apc__p em,.ab-num__u{font-weight:var(--w-moyen)}

/* interface : libellés, liens de pied de page, liens de retour */
.fld label,.fld legend,.lgl-back,
.apc__go,.goc__go,.frm__rgpd a{font-weight:var(--w-moyen)}

/* les mises en valeur dans le texte : un seul poids, 600, jamais 560 ni 620 */
.lead b,.bc p b,.ac__b b,.me__note b,.ab-me__p b,
.of__note b,.ap__note b,.pe__warn b,.ab-nums__foot b,
main.lgl strong,.lgl .note-relire strong{font-weight:var(--w-demi)}


/* =========================================================================
   4. LE CRÉNAGE SUIT LA TAILLE
   Même logique : plus c'est gros, plus c'est serré. Les valeurs étaient
   déjà à peu près bonnes, mais tirées au jugé (-.012, -.018, -.02, -.022,
   -.024, -.026, -.028, -.03, -.035, -.05…). On les range sur trois paliers.
   ========================================================================= */
.pbc__n,.op__p span,.apc__p span,.ab-num__n{letter-spacing:var(--ls-display)}
.h4,.op__k,.apc__k,.bc h3,.goc h3,.st h3,.exc h3,.pel h3,
.ab-me__pt b,.ab-me__id b,.ab-num__k{letter-spacing:var(--ls-sous)}
.fld label,.btn,.opt b,.apc__go,.goc__go{letter-spacing:var(--ls-ui)}

/* Les surtitres en capitales : 0,14 em était un peu large, on resserre très
   légèrement et on aligne toutes les petites capitales du site sur la même
   valeur — il y en avait trois différentes (.09, .13, .14). */
.eyebrow,.ab-nums__tag,.op__plus-k,.exc__tag,
.lgl .note-relire__t{letter-spacing:var(--ls-caps)}

/* Le petit trait devant le surtitre était optiquement 1 px trop bas :
   « centré » sur une ligne de capitales n'est pas le centre de la boîte de
   texte, mais le milieu de la hauteur des capitales. */
.eyebrow::before{margin-top:-.09em}


/* =========================================================================
   5. LA GAMME DE TAILLES DE TEXTE
   Le site alignait .72, .76, .78, .79, .8, .84, .85, .86, .88, .9, .92,
   .93, .94, .95, .96, .97, .98, .99, 1, 1.01, 1.02 rem… Aucune de ces
   marches n'est perceptible isolément, mais toutes ensemble donnent
   l'impression d'une page composée à la main sans règle. On les range sur
   cinq marches, et là, chaque changement de taille veut dire quelque chose.
       0,6875 rem (11-12 px) — badges, étiquettes
       0,75 rem   (12-13 px) — surtitres en capitales
       0,8125 rem (13-14 px) — mentions, notes de bas de section
       0,875 rem  (14-15 px) — libellés d'interface, texte secondaire
       0,9375 rem (15-16 px) — texte dans les cartes
       1 rem      (16-17 px) — texte de lecture
   ========================================================================= */

/* --- badges et étiquettes --- */
.op__badge,.apc__b,.op__plus-k,.exc__tag,.lgl .note-relire__t{font-size:.6875rem}

/* --- surtitres en capitales --- */
.eyebrow,.ab-nums__tag{font-size:.75rem}

/* --- mentions et notes --- */
.of__note,.ap__note,.frm__rgpd,.ft__nav a,.ft__nav span,.ft__btm,
.pbc cite,.ab-me__id em{font-size:.8125rem}

/* --- libellés d'interface et texte secondaire --- */
.fld label,.fld legend,.rad label,.apc__go,.goc__go,
.opt p,.ab-num__d,.ct__mini,.ft__brand p,.op__s,.apc__s,.lgl-back,
.frm__msg,.ab-me__id span,.op__inc{font-size:.875rem}

/* --- texte dans les cartes --- */
.bc p,.goc p,.exc p,.op__d,.op__l li,.pbc p,.opt b,.pel li,
.ab-me__pt p,.ab-nums__foot p,.ab-me__note p{font-size:.9375rem}

/* --- texte de lecture --- */
.st p,.ac__b p,.me__note,.ab-me__p,.pe__rule p{font-size:1rem}

/* Les titres de carte se rangent aussi : 1,1 / 1,16 / 1,22 / 1,24 / 1,3 rem
   devient une seule valeur pour les petites cartes et une pour les
   grandes. Trois pages différentes affichaient jusqu'ici trois tailles pour
   des titres qui jouent exactement le même rôle. */
.bc h3,.goc h3,.exc h3,.pel h3{font-size:1.125rem}
.op__k,.apc__k,.st h3{font-size:1.25rem}


/* =========================================================================
   6. LE RYTHME VERTICAL
   Presque toutes les sections utilisent --pad-s (jusqu'à 168 px). Quand
   deux sections de la MÊME couleur se suivent — sur l'accueil : « l'offre
   en chiffres » puis « pour aller plus loin » ; sur la page Contact : la
   FAQ puis « qui est derrière » — on obtient 168 + 168 = 336 px de blanc
   sans le moindre repère. Ce n'est pas de la respiration, c'est un trou.
   On garde donc le grand blanc quand la couleur CHANGE (c'est lui qui fait
   la rupture), et on le réduit quand elle ne change pas : la page reprend
   une pulsation régulière au lieu d'alterner plein et vide.

   ⚠ Les exclusions ne sont pas décoratives :
     .ticker et .hero  → collés l'un à l'autre volontairement,
     .band             → a sa propre règle juste en dessous,
     .ft               → le pied de page a son propre rythme (48→68 px) et
                         il suit une section « paper » sur la seule page
                         Contact. Sans cette exclusion, le pied de page de
                         Contact était 30 px plus haut que celui des six
                         autres pages : exactement le genre d'écart qu'on
                         ne sait pas nommer mais qu'on ressent.
   ========================================================================= */
.sec--light + .sec--light:not(.ticker):not(.hero):not(.band):not(.ft),
.sec--paper + .sec--paper:not(.band):not(.ft){padding-top:calc(var(--pad-s) * .58)}

/* La bande d'appel finale utilisait sa propre valeur (64→120 px) sans
   rapport avec le reste, et elle arrive presque toujours après une section
   de la même couleur : on lui donne un blanc réduit, mais ÉGAL en haut et
   en bas — un bloc centré dont les marges ne se répondent pas se voit. */
.band{padding:calc(var(--pad-s) * .62) 0}

/* L'espace sous un chapeau de section : deux valeurs différentes existaient
   (36→60 px pour .shead, 46→76 px pour .of__head), donc les pages ne
   respiraient pas au même rythme. Une seule, entre les deux. */
.shead,.of__head{margin-bottom:clamp(38px,4.6vw,72px)}

/* Les autres pages que l'accueil commencent sous l'en-tête flottant. La
   valeur écrite (66 px) datait de la barre pleine largeur ; la capsule
   actuelle mesure 16 px de marge + 58 px de haut = 74 px. Le contenu passait
   donc 8 px trop haut sur les six pages intérieures.
   (Cette règle porte sur le <main>, pas sur l'en-tête : elle ne gêne pas
   le travail en cours sur le logo.) */
.page{padding-top:74px}

/* Les ancres (#perimetre, #faq) arrivaient sous l'en-tête flottant, qui
   recouvrait le titre visé. 104 px = la capsule plus 30 px d'air. */
section[id],[id]:target{scroll-margin-top:104px}


/* =========================================================================
   7. LES ALIGNEMENTS
   ========================================================================= */

/* --- LE DÉFAUT LE PLUS VISIBLE DU SITE ---------------------------------
   Sur l'accueil, la carte « Visibilité » porte l'étiquette « La plus
   demandée » DANS le flux du texte. Les deux autres cartes n'ont pas cette
   étiquette : leur contenu remonte donc d'une quarantaine de pixels et les
   trois prix ne sont PAS sur la même ligne. La page des formules avait déjà
   résolu le problème (.op__hd réserve la place sur les trois cartes) ;
   l'accueil, non — et les deux pages montrent les mêmes trois formules.
   On applique ici la même solution, et on aligne les deux réserves sur la
   même valeur pour que les deux pages se ressemblent vraiment. */
.apc{
  position:relative;
  padding:calc(var(--pad-card) + var(--pad-badge)) var(--pad-card) var(--pad-card);
}
.apc__b{
  position:absolute;top:var(--pad-card);left:var(--pad-card);
  height:26px;display:inline-flex;align-items:center;
  margin:0;padding:0 13px;
}
.op__hd{padding-top:var(--pad-badge)}

/* Toujours sur ces trois cartes : la ligne « Voir le détail » se calait
   sous un sous-titre qui fait une ou deux lignes selon la largeur. Les
   trois flèches ne tombaient donc pas au même endroit. On laisse le
   sous-titre occuper la place disponible. */
.apc__s{flex:1}

/* La section « Trois formules » est entièrement centrée — surtitre, titre,
   cartes — sauf sa note de bas de bloc, restée alignée à gauche. Sur une
   composition centrée, ça se voit tout de suite. */
.ap__note{text-align:center;margin-inline:auto}

/* Le numéro d'étape est un cercle de 47 px ; le titre à côté commençait
   2 px au-dessus de son centre optique. */
.st h3{margin-top:11px}

/* Les prix en chiffres tabulaires : sans ça un « 1 » est plus étroit qu'un
   « 9 », et les trois prix des trois cartes ne s'alignent pas verticalement
   d'une colonne à l'autre. (Le panneau turquoise le faisait déjà, pas les
   cartes de prix — c'était pourtant là que ça comptait le plus.) */
.op__p span,.apc__p span,.pbc__n{font-variant-numeric:tabular-nums}


/* =========================================================================
   8. LES COULEURS ET LES CONTRASTES
   Tous les chiffres ci-dessous sont des rapports mesurés. Le niveau AA
   demande 4,5:1 pour du texte courant, 3:1 pour du grand texte (à partir
   de 24 px, ou 19 px en gras), 3:1 pour un contour ou une icône qui porte
   du sens.
   ========================================================================= */

/* --- le turquoise en TEXTE, partout où il était sous le seuil ----------
   mesuré avant : 3,63:1 sur blanc et 3,34:1 sur papier — après : 5,46 et 5,01 */
.eyebrow,.apc__go,.goc__go,.opt span,.op__plus-k,.ac summary:hover,
.ac[open] summary .ic,.lgl .note-relire__t,.fld i{color:var(--tint-txt)}
/* Le message de réussite du formulaire garde son VERT : le vert dit
   « c'est parti », le turquoise ne dirait plus rien. Il est simplement
   assombri d'un cran pour passer le seuil sur le gris de la carte
   (4,97 → 5,91). */
.frm__msg.ok{color:#0a6d3c}
.frm__msg.ko{color:#a3231c}

/* le doré en texte : 3,18:1 avant, 5,01:1 après */
.eyebrow--gold{color:var(--gold-txt)}

/* En revanche, sur fond noir ou turquoise foncé, les versions CLAIRES
   restent les bonnes : elles y sont largement au-dessus du seuil.
   On ne touche à rien. */
.sec--dark .eyebrow{color:var(--tint-h)}
.sec--dark .eyebrow--gold{color:var(--gold-l)}

/* --- LES DEUX EXCEPTIONS AU GRIS TERTIAIRE ASSOMBRI ---------------------
   Assombrir --ink-3 répare une vingtaine d'endroits d'un coup (§1), mais
   à deux endroits ce gris clair n'était pas une négligence, c'était le
   dessin : la deuxième ligne des grands titres, et le « € » posé à côté du
   prix. Ce sont deux cas de GRAND texte, où 3:1 suffit et où l'ancien gris
   mesurait déjà 3,62:1. Si on les assombrissait, le titre perdrait son
   effet de dégradé et le « € » se mettrait à concurrencer le chiffre.
   On leur rend donc leur valeur d'origine, et à eux seuls. */
.h2 .dim{color:#86868b}
.sec--dark .h2 .dim{color:#a1a1a6}
.op__p em,.apc__p em{color:#86868b}

/* --- le texte tertiaire sur fond noir ---------------------------------- */
.sec--dark .dim{color:#a1a1a6}

/* --- la source des trois statistiques, sur les cartes noires -----------
   #6e6e73 sur #1c1c1e donnait 3,36:1 : la mention de source, qui est
   précisément ce qui rend le chiffre crédible, était l'élément le moins
   lisible de la carte. Portée à 5,93:1. */
.pbc cite{color:#98989d;letter-spacing:0}

/* --- le panneau turquoise « l'offre en chiffres » ----------------------
   C'était le bloc le moins lisible du site. Sa zone médiane, sous le voile
   cyan, mesurait 3,27:1 sous du texte blanc PLEIN, et les libellés
   descriptifs — posés à 72 % de blanc — tombaient à 2,4:1. Autrement dit :
   le bloc qui énonce les engagements chiffrés était celui qu'on lisait le
   plus mal.
   Le panneau descend de deux crans de luminosité et le voile cyan est
   réduit de 30 % à 12 %. Résultat mesuré, au point le PLUS CLAIR du
   panneau : 6,19:1 en blanc plein, 5,03:1 en blanc à 86 %.
   Il reste franchement turquoise — il devient simplement lisible, et un
   turquoise profond fait plus « fiche technique » qu'un cyan électrique,
   ce qui sert exactement le propos de la section. */
.ab-nums .ab-nums__panel{
  background:
    radial-gradient(120% 130% at 8% 0%,rgba(46,207,230,.12),transparent 58%),
    linear-gradient(145deg,#04424f 0%,#005c74 56%,#07546a 100%);
  box-shadow:0 24px 54px -34px rgba(4,50,62,.7);
}
.ab-nums .ab-num__d{color:rgba(255,255,255,.86)}      /* 5,03:1 */
.ab-nums .ab-nums__tag{color:rgba(255,255,255,.92)}   /* 5,3:1  */
/* L'unité (€, h, j, %) était en cyan clair sur turquoise : 1,94:1, soit
   invisible. En blanc légèrement voilé elle reste secondaire ET lisible. */
.ab-nums .ab-num__u{color:rgba(255,255,255,.92)}
.ab-nums .ab-nums__tag .ic{color:#bff3ff}             /* 5,15:1 */
/* Les filets qui séparent les huit cases étaient à 16 % de blanc, soit
   1,40:1 : on devinait la grille plus qu'on ne la voyait. À 26 % elle se
   lit comme une vraie fiche technique quadrillée. */
.ab-nums .ab-num{border-color:rgba(255,255,255,.26)}

/* --- la liste « jamais compris » ---------------------------------------
   Elle était en gris tertiaire : la moitié du tableau comparatif était donc
   moins lisible que l'autre. Le sens (« ceci n'est pas compris ») est déjà
   porté par la croix rouge du titre ; il n'a pas besoin d'être redit par un
   texte plus pâle. */
.pel--out li{color:var(--ink-2)}

/* --- l'aide de saisie des champs ---------------------------------------
   #a9a9af sur blanc = 2,34:1. C'est le texte qui explique quoi écrire dans
   la zone « votre projet en quelques lignes » : le rendre illisible est le
   contraire de ce qu'on cherche. #767680 = 4,49:1, et reste visiblement
   plus clair qu'une saisie réelle. */
.fld input::placeholder,.fld textarea::placeholder{color:#767680}


/* =========================================================================
   9. LES BOUTONS
   Ils héritaient de l'interligne du corps de texte (1,55), ce qui leur
   donnait 58 px de haut : c'est un bouton de formulaire administratif, pas
   un bouton de site premium. Interligne propre et hauteur ramenée à 51 px,
   très au-dessus de la cible tactile de 44 px.
   ========================================================================= */
.btn{
  padding:15px 26px;line-height:1.2;border-radius:var(--r-ctl);
  font-weight:var(--w-demi);
}

/* Le survol ne changeait QUE la position sur les boutons sombres et
   fantômes : le bouton montait de 2 px sans rien changer d'autre, ce qui
   se lit comme un défaut d'affichage plutôt que comme une réaction. On
   ajoute une vraie réponse de matière, et on réduit le saut à 1 px —
   2 px sur un objet de 51 px, ça sursaute. */
.btn:hover{transform:translateY(-1px)}
.btn--dark:hover{--bg:#000}
.sec--dark .btn--dark:hover,.ft .btn--dark:hover{--bg:#f0f0f2}

/* Le bouton fantôme n'avait quasiment pas de contour : #d2d2d7 sur blanc
   mesure 1,51:1. Posé à côté d'un bouton turquoise plein, il ne ressemblait
   pas à un second choix, il ressemblait à du texte. Un gris à 2,3:1 lui
   rend une existence sans lui donner le poids d'un bouton principal. */
.btn--ghost{--bd:#a9a9b0}
.btn--ghost:hover{--bd:var(--ink);background:rgba(16,24,40,.045)}
.sec--dark .btn--ghost:hover{background:rgba(255,255,255,.08)}

/* L'ombre du bouton principal était très large et très floue (40 px de
   flou au survol) : c'est coûteux à dessiner et ça fait « néon ». Courte
   et nette. */
.btn--blue{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 14px -8px rgba(3,101,126,.7)}
/* Au survol, le bouton s'ENFONCE d'un ton au lieu de s'éclaircir. C'est le
   geste d'Apple, et surtout : l'éclaircir — ce que faisait le filtre
   « saturate/brightness » d'origine — refaisait passer le texte blanc sous
   le seuil de lisibilité, ce que le dégradé sert précisément à éviter. */
.btn--blue:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 20px -8px rgba(3,101,126,.8);
  filter:none;
  background-image:linear-gradient(135deg,#00738f 0%,#006680 46%,#065571 100%);
}
.btn--blue:active{background-image:linear-gradient(135deg,#006680 0%,#005b73 46%,#054c66 100%)}

/* Un état désactivé existait dans le comportement (le formulaire bloque
   l'envoi tant que la clé n'est pas renseignée) mais pas dans le style :
   le bouton restait identique alors qu'il ne répondait plus. */
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.4);
}
.btn[disabled]:hover{transform:none}


/* =========================================================================
   10. LES LIENS DU PIED DE PAGE
   ========================================================================= */

/* Le soulignement était celui du navigateur, collé au texte. Décalé et
   affiné, il devient un détail au lieu d'un défaut.
   (On ne touche pas au « transform » de ces liens : il appartient à
   anim-sections.css.) */
.ft__nav a,.ft__nav span{color:var(--ink-2)}
.ft__nav a:hover{text-decoration-thickness:1px;text-underline-offset:3px}

/* Les liens dans le corps du texte : un filet discret qui se densifie,
   plutôt qu'un soulignement plein en permanence. */
.frm__rgpd a{border-bottom-color:rgba(0,115,143,.35)}
.frm__rgpd a:hover{color:var(--tint-txt);border-bottom-color:var(--tint-txt)}


/* =========================================================================
   11. LES CARTES : MÊME DENSITÉ, MÊME COMPORTEMENT
   ========================================================================= */
.bc,.pbc,.goc,.op,.pel,.ab-me__note{padding:var(--pad-card)}
.opt{padding:calc(var(--pad-card) * .62) calc(var(--pad-card) * .58)}

/* Les gouttières de grille : une seule valeur pour toutes les grilles de
   cartes. La grille des bénéfices garde volontairement son filet de 2 px,
   qui est un parti pris et pas un oubli. */
.pb__cards,.pe__cols,.opt__grid{gap:var(--gap-grid)}

/* --- RÈGLE DE FOND : on ne soulève que ce qui se clique ----------------
   Une carte d'option (« + 90 € ») et une maquette d'exemple ne mènent
   nulle part : ni lien, ni bouton. Les faire décoller de 3 et 8 px au
   survol promet un clic qui n'existe pas — c'est la promesse non tenue la
   plus courante sur les sites de ce genre. On garde une réaction, mais une
   réaction de surface, pas de profondeur.
   Les cartes qui SONT des liens (.apc, .goc) et la carte de formule qui
   contient un bouton (.op) gardent, elles, leur élévation. */
.opt{transition:border-color .35s var(--e-out),background .35s var(--e-out)}
.opt:hover{transform:none;box-shadow:none;border-color:rgba(0,115,143,.4);background:#fbfdfe}
.exc:hover .exc__screen{transform:translateY(-3px)}

/* Sur la page des formules, survoler une carte faisait tomber les deux
   autres à 55 % d'opacité et les réduisait de 1,5 % : les deux prix voisins
   devenaient illisibles au moment précis où le visiteur compare. Le recul
   suffit à 82 %, sans réduction d'échelle. */
.of__grid:hover .op:not(:hover){opacity:.82;transform:none}
.of__grid:hover .op:not(:hover) .op__p span{color:var(--ink)}

/* L'ombre au survol comptait quatre couches dont un halo turquoise de 60 px
   de flou : c'est l'effet d'agence que le cahier des charges écarte, et
   c'est la couche la plus coûteuse à dessiner de tout le site. Une élévation
   nette suffit ; le contour turquoise dit déjà « c'est celle-ci ». */
.apc,.op{box-shadow:var(--ombre-2)}
/* La carte du milieu garde son liseré coloré : sans cette ligne, la règle
   ci-dessus lui volerait son ombre turquoise et les trois cartes
   redeviendraient identiques. */
.op--star{box-shadow:0 0 0 1px rgba(0,146,181,.18),var(--ombre-2)}
.op:hover,.op:focus-within{
  transform:translateY(-6px);
  border-color:rgba(0,115,143,.55);
  box-shadow:0 0 0 1px rgba(0,115,143,.18),var(--ombre-3);
}
.apc:hover{transform:translateY(-4px);box-shadow:var(--ombre-3)}

/* PERFORMANCE : style.css laisse « will-change:transform » posé en
   permanence sur les trois cartes de formule. Le navigateur leur réserve
   donc une couche graphique en mémoire du chargement à la fermeture de
   l'onglet, pour un mouvement qui ne se produit qu'au survol. On le rend
   au navigateur ; l'animation reste identique. */
.op{will-change:auto}


/* =========================================================================
   12. LE FORMULAIRE
   C'est la page qui décide d'un contact : c'est donc celle qui doit être la
   plus soignée du site.
   ========================================================================= */

/* Les champs n'avaient quasiment pas de contour visible (1,38:1 contre le
   gris de la carte) : on devinait où écrire plutôt qu'on ne le voyait. */
.fld input[type=text],.fld input[type=email],.fld input[type=tel],
.fld select,.fld textarea{
  border-color:var(--line-champ);
  border-radius:var(--r-ctl-sm);
  padding:12px 14px;
  transition:border-color .25s var(--e-out),background .25s var(--e-out);
}

/* Au survol, le champ s'annonce avant même d'être cliqué. */
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:#6f6f76}

/* Le champ actif portait DEUX anneaux : le halo turquoise de 4 px défini
   dans style.css, PLUS le contour de focus général du site. Deux anneaux
   concentriques, c'est l'archétype du détail bâclé. On n'en garde qu'un —
   celui du site, le même partout — et le champ signale son activité par son
   contour qui se colore et son fond qui blanchit. */
.fld input:focus,.fld select:focus,.fld textarea:focus{
  border-color:var(--tint-txt);box-shadow:none;background:#fff;
}
.fld.is-bad input,.fld.is-bad select,.fld.is-bad textarea{
  border-color:#c0322a;box-shadow:none;background:#fffafa;
}

/* Les écarts verticaux : 18 px entre deux champs empilés, 16 px entre deux
   champs côte à côte. Même distance, même valeur. */
.fld{margin-bottom:18px}
.frm__r2{gap:18px}
@media (max-width:680px){ .frm__r2{gap:0} }

/* --- les boutons radio -------------------------------------------------
   Le CSS les voulait sur une ligne (« margin-right » entre eux), mais le
   conteneur .fld est une GRILLE : chacun tombait donc sur sa propre ligne
   et les trois réponses occupaient trois fois la hauteur nécessaire, deux
   fois de suite dans le formulaire. On rétablit l'intention d'origine, et
   on en profite pour en faire de vraies pastilles à cocher — la surface
   entière est cliquable, pas seulement le mot de trois lettres. */
.fld--fs{display:block;margin-bottom:18px}
.fld--fs legend{display:block;margin-bottom:10px;padding:0}
.rad{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  margin:0 8px 8px 0;padding:9px 14px 9px 12px;
  background:var(--white);border:1px solid var(--line-champ);
  border-radius:var(--r-ctl-sm);
  transition:border-color .25s var(--e-out),background .25s var(--e-out);
}
.rad:hover{border-color:#6f6f76}
.rad input{width:16px;height:16px;margin:0}
/* La surface entière de la pastille active le libellé : le petit rond seul
   était une cible de 16 px, très en dessous des 44 px recommandés. */
.rad label::after{content:'';position:absolute;inset:0;border-radius:inherit}
.rad:has(input:checked){border-color:var(--tint-txt);background:rgba(0,146,181,.07)}
/* Le contour de focus est porté par la PASTILLE, pas par le petit rond :
   sinon on obtenait de nouveau deux anneaux emboîtés. */
.rad input:focus-visible{outline:none}
.rad:has(input:focus-visible){outline:2.5px solid var(--tint-txt);outline-offset:3px}

/* La case de consentement : le carré était calé 2 px sous le haut du
   libellé, donc légèrement bas par rapport à la première ligne de texte. */
.fld--chk{align-items:start;margin-top:22px}
.fld--chk input{margin-top:.16em}
.fld--chk label{line-height:1.5}

/* Le message de retour garde sa place réservée (déjà prévu dans style.css :
   min-height, pour que la page ne saute pas à l'envoi). */
.frm__msg{margin-top:14px}


/* =========================================================================
   13. LE CONTOUR DE FOCUS
   Un seul contour, la même couleur partout, et surtout : visible sur les
   trois familles de fond du site. Le bleu-lavande prévu pour les surfaces
   sombres (#7fb0ff) ne mesurait que 2,1:1 sur le panneau turquoise —
   autant dire invisible là où on en a le plus besoin.
   ========================================================================= */
:focus-visible{outline:2.5px solid var(--tint-txt);outline-offset:3px}
.sec--dark :focus-visible{outline-color:#fff}
.ab-nums__panel :focus-visible{outline-color:#fff;outline-offset:2px}

/* ⚠ POURQUOI CETTE LISTE DE RAYONS
   style.css écrit « border-radius:6px » DANS la règle :focus-visible. Cette
   déclaration s'applique donc à n'importe quel élément qui prend le focus :
   au clavier, une carte de formule aux angles de 30 px voyait ses quatre
   coins se redresser à 6 px pendant qu'elle était sélectionnée. On rend à
   chaque famille son rayon réel. */
.btn:focus-visible{border-radius:var(--r-ctl)}
.apc:focus-visible,.goc:focus-visible,.op:focus-visible{border-radius:var(--r-xl)}
.bc:focus-visible,.pel:focus-visible,.pbc:focus-visible{border-radius:var(--r-l)}
.opt:focus-visible,.ph:focus-visible{border-radius:var(--r-m)}
.rad:focus-visible,.fld input:focus-visible,
.fld select:focus-visible,.fld textarea:focus-visible{border-radius:var(--r-ctl-sm)}
.ac summary:focus-visible{border-radius:12px}

/* Le lien d'évitement : il apparaît à la première tabulation, c'est la
   toute première chose que voit un visiteur au clavier. Autant qu'elle soit
   soignée plutôt que collée dans l'angle de l'écran. */
.skip:focus{left:var(--gut);top:14px;border-radius:12px;box-shadow:var(--ombre-3)}


/* =========================================================================
   14. L'ACCORDÉON DES QUESTIONS
   La ligne entière est cliquable mais seul le texte réagissait : rien ne
   disait où s'arrêtait la zone sensible. Un fond très pâle sur toute la
   largeur le dit, et la question ouverte s'ancre visuellement à sa réponse.
   ========================================================================= */
.ac summary{
  padding:24px 14px;margin-inline:-14px;border-radius:12px;
  transition:background .3s var(--e-out),color .3s;
}
.ac summary:hover{background:rgba(16,24,40,.035)}
.ac[open] summary{color:var(--ink)}
.ac[open] summary span{font-weight:var(--w-demi)}
.ac__b{padding:0 14px 26px;margin-inline:-14px}
.ac summary .ic{color:var(--ink-3)}


/* =========================================================================
   15. LES PAGES LÉGALES
   Elles portent leur propre feuille de style dans la page. Trois choses y
   décrochent du reste du site. Les sélecteurs sont écrits « main.lgl … »
   pour l'emporter sur le bloc <style> quel que soit l'ordre des liens.
   ========================================================================= */

/* 1. La colonne de lecture fait 760 px et le pied de page de ces deux pages
      est bien calé dessus — mais leur EN-TÊTE est resté sur la largeur du
      site (1240 px). Le logo se retrouvait donc plusieurs centimètres à
      gauche du texte qu'il surplombe. Sur un écran large, c'est le premier
      défaut d'alignement que l'œil attrape. */
.lgl-hdr .lgl-hdr__in{max-width:calc(var(--lgl) + var(--gut) * 2)}

/* 2. Les liens y sont soulignés d'un bleu roi (rgba(10,108,255,…)) hérité
      d'une ancienne palette : c'est la dernière trace de bleu franc du site,
      et le turquoise plein n'y passait pas le seuil de lisibilité. */
main.lgl a{color:var(--tint-txt);border-bottom-color:rgba(0,115,143,.3)}
main.lgl a:hover{border-bottom-color:var(--tint-txt)}

/* 3. Les titres suivent la même échelle que le reste du site. */
main.lgl h1{font-weight:var(--w-gras);letter-spacing:var(--ls-titre)}
main.lgl h2{border-top-color:rgba(0,0,0,.09);letter-spacing:var(--ls-sous)}
main.lgl .lgl__date{font-size:.8125rem}

/* ⚠ ATTENTION AU NOM DE CLASSE : « .ph » désigne DEUX choses différentes
   dans ce site — le surligné jaune des champs à compléter sur ces deux
   pages, et le cadre des photos de métiers sur l'accueil. La règle est donc
   volontairement enfermée dans « main.lgl », sans quoi les photos de
   l'accueil se retrouveraient sur fond jaune.
   (Le jaune est descendu d'un cran : #fff5cf était si pâle qu'un champ à
   compléter passait inaperçu sur du blanc — or c'est précisément son rôle
   d'être repéré avant la mise en ligne.) */
main.lgl .ph{background:#fdf0c4}


/* =========================================================================
   16. DÉTAILS DE FINITION
   ========================================================================= */

/* Les images de la bande « métiers » : le grossissement au survol partait
   d'un point neutre ; en le tirant vers le haut, la photo semble avancer
   plutôt que gonfler. */
.ph img{transform-origin:50% 42%}

/* La barre de progression de lecture faisait 3 px : c'est l'épaisseur d'un
   élément d'interface, pas celle d'un fil. À 2 px elle disparaît quand on
   ne la cherche pas, ce qui est exactement son rôle. */
.fx-jauge{height:2px}

/* Le pied de page : les colonnes du menu étaient serrées à 26 px alors que
   la première en réclame 32 à 72 pour ne pas coller au bloc de marque. */
.ft__nav{gap:32px 24px}
.ft__nav h3{margin-bottom:10px;font-size:.8125rem}

/* Le séparateur du bas de page était le même filet que les cartes ; il
   sépare deux zones de même nature, il peut être plus léger. */
.ft__btm{border-top-color:rgba(0,0,0,.07)}

/* Deux traits de séparation identiques finissaient par se toucher entre la
   note d'un bloc et la section suivante. */
.of__opts{border-top-color:rgba(0,0,0,.09)}


/* =========================================================================
   17. RESPONSIVE — corrections ponctuelles
   ========================================================================= */
@media (max-width:680px){
  /* BUG : en dessous de 680 px, chaque colonne du pied de page reçoit un
     filet de séparation en « var(--dline) », c'est-à-dire du BLANC à 14 %.
     Or le pied de page est gris clair : le filet était donc invisible et
     les trois blocs se touchaient sans séparation sur mobile — l'écran sur
     lequel la majorité des visiteurs arrivera. */
  .ft__nav>div{border-top-color:rgba(0,0,0,.08)}
}


/* =========================================================================
   18. GARDE-FOUS
   Les mêmes que ceux du site : rien de ce qui précède ne doit gêner un
   visiteur qui a demandé moins de mouvement, ni un écran tactile.
   ========================================================================= */
@media (hover:none){
  .btn:hover,.apc:hover,.op:hover,.opt:hover{transform:none}
  .of__grid:hover .op:not(:hover){opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .btn:hover,.apc:hover,.op:hover,.exc:hover .exc__screen{transform:none}
}

/* En impression, les pastilles de choix et les contours renforcés
   n'apportent rien et consomment de l'encre. */
@media print{
  .rad{border:0;padding:0}
  .fld input,.fld select,.fld textarea{border-color:#999}
}
