/*
 * Corrections de rendu — la seule feuille du site écrite à la main.
 *
 * `lcp.css` et `lcp-blocks.css` sont *extraits* des maquettes auditées, et
 * régénérés par `app:extract:css` : une règle ajoutée là-dedans disparaîtrait à
 * la prochaine extraction. Les quelques défauts de rendu relevés pendant
 * l'audit — corrigés à l'époque dans la version Next, où ils vivaient dans le
 * CSS des composants — vivent donc ici, chargés après les deux feuilles
 * générées.
 *
 * Règles du lieu :
 *
 * 1. **Uniquement de l'ajout.** Aucune règle auditée n'est réécrite ; chaque
 *    correctif se pose sur un sélecteur plus spécifique (`#lcp-popup…`) ou sur
 *    un sélecteur qui n'existe nulle part ailleurs (`.dropdown:hover`), pour
 *    gagner la cascade sans dépendre de l'ordre de chargement.
 * 2. **Un commentaire par correctif**, disant ce qui était cassé. Sans lui, la
 *    règle ressemble à une divergence avec les maquettes, et quelqu'un la
 *    supprimera pour « revenir à l'audit ».
 * 3. Si une maquette est un jour corrigée à la source, le correctif
 *    correspondant part d'ici.
 */

/* ══ Le sous-menu se fermait avant qu'on l'atteigne ══════════════════════════
 *
 * Le menu déroulant du header est en `:hover` pur, posé 8 px sous son entrée
 * (`.dropdown{top:calc(100% + 8px)}`) et affiché par `.nav__item:hover
 * .dropdown`. Traverser ces 8 px fait sortir le pointeur de `.nav__item` : le
 * menu se refermait sous le curseur, et les entrées à deux niveaux étaient
 * inatteignables à la souris.
 *
 * Deux ajouts : garder le menu ouvert tant que le pointeur est dessus, et
 * combler la gouttière par une bande transparente. Ni `.dropdown:hover` ni
 * `.dropdown::before` n'existent dans les maquettes — rien n'est écrasé.
 */
.nav__item .dropdown:hover {
  display: block;
}

.nav__item .dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 8px;
}

/* ══ Le popup collait au bord gauche ═════════════════════════════════════════
 *
 * `.lcp-popup{padding:20px}` centre la carte, mais son bouton de fermeture est
 * posé à `right:-14px` : sur grand écran la carte touchait le bord gauche de la
 * fenêtre et la croix débordait à droite. On élargit la gouttière, sans toucher
 * à la feuille mobile (`@media(max-width:600px){.lcp-popup{padding:0}}`) qui
 * fait du popup une feuille collée en bas de l'écran.
 */
@media (min-width: 601px) {
  #lcp-popup.lcp-popup {
    padding-left: 48px;
    padding-right: 24px;
  }
}

/* ══ Les boutons du hero étaient centrés sur les 63 pages qui en portent ═════
 *
 * `.hero__cta{justify-content:center}` n'est écrit que par **une** maquette :
 * `404.html`, dont le hero est effectivement centré. L'arbitrage pèse des
 * déclarations et non des blocs — une propriété déclarée par une seule page est
 * « unanime », d'une seule voix — et cette valeur est donc partie sur les 64
 * pages qui affichent un `.hero__cta`. Les 63 autres n'ont jamais rien déclaré :
 * leurs boutons doivent rester au fer à gauche, sous le titre et l'accroche.
 *
 * La production le confirme, et elle est nette : `normal` sur l'accueil, les
 * villes, les placements, la FAQ, les simulateurs, `qui-sommes-nous` et
 * `optimisation-fiscale` — `center` sur la seule 404.
 *
 * `normal` et non `flex-start` : c'est la valeur initiale de la propriété, donc
 * exactement ce que rend une page qui ne la déclare pas. Écrire `flex-start`
 * rendrait la même chose mais ferait diverger la valeur calculée, et le harnais
 * signalerait un écart à chaque mesure.
 *
 * `.err__content` n'existe que dans `404.html` : la seconde règle, plus
 * spécifique, rend son centrage à la seule page qui l'a demandé. Les deux
 * passent devant `.hero__cta` seul, y compris dans le résidu de page émis après
 * cette feuille.
 *
 * Même famille que le curseur des simulateurs, plus bas : deux déclarations que
 * l'arbitrage a séparées de leur page d'origine.
 */
.hero .hero__cta {
  justify-content: normal;
}

.hero .err__content .hero__cta {
  justify-content: center;
}

/* ══ La colonne Score du popup n'avait aucune gouttière ══════════════════════
 *
 * Les 405 maquettes qui portent le popup écrivent son `padding` **dans la
 * feuille mobile** — `@media(max-width:600px){.lcp-popup__gauche{padding:30px
 * 26px;…}}` — et rien au niveau supérieur. Au-dessus de 600 px, la seule règle
 * qui s'applique est donc `*{padding:0}` : le nom de l'outil, le « 67 /100 » et
 * les quatre barres touchaient les bords du dégradé, sur toutes les pages sauf
 * en vue mobile, où la maquette rendait juste.
 *
 * La production corrige exactement de cette façon — `#lcp-popup
 * .lcp-popup__gauche{padding:30px 26px}` — et c'est la valeur que la feuille
 * mobile écrit déjà : le correctif ne change donc rien sous 600 px, il rend la
 * même gouttière aux largeurs où elle manquait.
 *
 * Mesuré par `tools/audit-rendu/popup.mjs`, qui ouvre le popup des deux côtés :
 * `audit.mjs` le masque pour que sa superposition n'écrase pas le diff pixel de
 * chaque page, il n'était donc comparé nulle part.
 */
#lcp-popup .lcp-popup__gauche {
  padding: 30px 26px;
}

/* ══ Les deux boutons du popup ne réagissaient pas pareil ════════════════════
 *
 * `.lcp-popup__btn-score` se soulève au survol (`translateY(-2px)` + ombre),
 * `.lcp-popup__btn-rdv` se contentait d'un fondu d'opacité : côte à côte, le
 * second avait l'air désactivé. On aligne le rendez-vous sur le score.
 */
#lcp-popup .lcp-popup__btn-rdv {
  transition: all 0.2s;
}

#lcp-popup .lcp-popup__btn-rdv:hover {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(27, 73, 98, 0.15);
}

/* ══ Le libellé touchait sa note ═════════════════════════════════════════════
 *
 * `.lcp-popup__b-haut` est la ligne « Diversification — 17 / 25 », en
 * `justify-content:space-between` sans gouttière : sur carte étroite, le nom du
 * critère venait coller sa valeur.
 */
#lcp-popup .lcp-popup__b-haut {
  gap: 0.5rem;
}

/* ══ Le curseur des simulateurs n'était centré nulle part ════════════════════
 *
 * Deux sliders cohabitent dans l'audit, et ils sont incompatibles :
 *
 *  - 60 maquettes stylent l'entrée elle-même — `height:4px`, dégradé sur
 *    l'entrée, pouce de 16 px, **aucun** `::-webkit-slider-runnable-track` et
 *    **aucun** `margin-top`. Sans piste déclarée, Chrome centre le pouce tout
 *    seul, et c'est juste.
 *  - `/simulateurs/` déclare une piste (`runnable-track`, 6 px) sur une entrée
 *    de 24 px, avec un pouce de 22 px calé à la main par `margin-top:-8px`.
 *
 * L'arbitrage du corpus se fait **déclaration par déclaration** : la hauteur
 * (4 px) et la taille du pouce (16 px) viennent des 60 pages, tandis que la
 * piste, `touch-action`, `padding`, `margin` et le `margin-top:-8px` n'existant
 * que sur une page ont été retenus à l'unanimité — d'une seule voix. La feuille
 * sert donc un slider qu'aucune maquette n'a jamais écrit, et `-8px` centre un
 * pouce de 22 px, pas un de 16.
 *
 * Dès qu'une piste est déclarée, Chrome cale le pouce sur *son* bord haut : la
 * valeur juste est (hauteur de piste − hauteur du pouce) / 2, soit
 * (6 − 16) / 2 = −5px. Vérifié au pixel, et tenu par
 * tests/Css/SliderThumbTest.php — si l'extraction change l'une des deux
 * hauteurs, ce correctif devient faux en silence.
 *
 * Sélecteur volontairement redondant : le CSS résiduel de chaque page est émis
 * *après* cette feuille, donc l'ordre de chargement ne suffit pas ici.
 */
.sg input[type=range][type=range]::-webkit-slider-thumb {
  margin-top: -5px;
}

/* ══ Un paragraphe vide poussait les certifications de 18 px ═════════════════
 *
 * Les maquettes écrivent `<p class="certifs__intro"></p>` sans rien dedans, et
 * la règle `.certifs__intro{margin:18px auto 0}` s'y applique quand même : 385
 * pages portaient une gouttière de 18 px que la production n'a pas — son build
 * avait laissé tomber l'élément vide.
 *
 * `:empty` plutôt qu'une réécriture du contenu stocké : la correction vaut pour
 * le fragment de bas d'article comme pour les 43 villes, elle ne touche pas à
 * du balisage audité, et un intro réellement rédigé n'est pas concerné.
 */
.certifs__intro:empty {
  display: none;
}