/* ============================================================ PLAISIR PARTAGÉ — Feuille de style du site public ------------------------------------------------------------ Extraite des 56 pages de la maquette de référence, dédupliquée — puis MAINTENUE À LA MAIN. L'extraction était une opération unique : ne pas la rejouer, elle écraserait les correctifs consignés ici. La maquette embarquait 963 Ko de CSS — le même bloc recopié dans chaque fichier. Les sept variables de couleur de la famille vivent désormais dans tokens.css, sous .fam-, et le pont ci-dessous rebranche les noms courts de la maquette dessus. Poser la classe de famille sur le conteneur suffit. Voir § 4.2 du cadrage. ATTENTION — cette en-tête affirmait que les 56 fichiers sont identiques « à UNE ligne près : les sept variables de couleur ». C'EST FAUX, et cette phrase a coûté toute une séance de recette : QUATORZE classes portent des valeurs différentes selon la page. `.talkband` mesure 38 px de fond sur l'accueil et 36 sur les pages métier ; `.numband` 34 px ici et 32 sur qui-sommes-nous ; `section` gagne un filet supérieur sur les 41 pages produit. Aplaties, ces variantes ne cohabitent pas : la dernière écrite gagne, sur toutes les pages à la fois. Elles sont donc cantonnées sous la classe `p-*` que base.html.twig pose sur `body`, à côté de `fam-*`. Ce qui n'est pas cantonné est ce que déclare index.html, c'est-à-dire l'accueil. `tests/Site/FeuilleDeStyleTest.php` tient la règle. ============================================================ */ /* Pont entre les noms courts de la maquette et les jetons du kit. */ :root, .fam-walnut, .fam-location, .fam-booking, .fam-produit-publicitaire, .fam-weekend, .fam-animations, .fam-gestion { --g: var(--pp-fam-degrade); --card: var(--pp-fam-carte); --nbg: var(--pp-fam-carte); --soft: var(--pp-fam-soft); --btn: var(--pp-fam-action); --pale: var(--pp-fam-pale); --inkf: var(--pp-fam-encre); /* Les deux noms que les CARTES de savoir-faire emploient, et qui manquaient au pont : `--mc` pour le filet supérieur et le libellé, `--mtint` pour la teinte du dégradé. Non traduits, ils restaient indéfinis — les six cartes sortaient uniformément brunes, sans leur couleur de famille, et le lien « Faire une demande » en crème au lieu de la teinte du métier. */ --mc: var(--pp-fam-soft); --mtint: var(--pp-fam-action); } /* Ici se trouvait un `:root` TEAL, celui de la page « booking » du kit. Un second, BLEU, se trouvait plus bas. Chaque page de la maquette redéfinit les sept variables de famille dans son propre `:root` — l'aplatissement les a toutes empilées, et la DERNIÈRE écrite gagnait pour tout le site. Ce n'était pas visible : `` porte les valeurs du pont, qui l'emportent par proximité sur tout ce que `:root` déclare. Le jour où un élément sortirait d'un conteneur de famille, il virerait au bleu marine sans que rien ne l'explique. Le pont est la seule source. */ *{margin:0;padding:0;box-sizing:border-box} /* `hidden` NE MASQUE RIEN SANS CETTE LIGNE, et ça m'a mordu TROIS fois : les boutons de parcours du brief, puis les pastilles de paliers. La règle du navigateur, `[hidden]{display:none}`, ne vaut qu'un sélecteur d'attribut. Toute classe qui pose un `display` la bat — et cette feuille en pose partout : `.btn`, `.radio`, `.need`, `.field`… Un élément marqué `hidden` restait donc VISIBLE, ce que ni le HTML ni un test d'attribut ne montrent. `!important` est ici le remède standard, celui des feuilles de normalisation : `hidden` est une intention sans ambiguïté, rien ne doit la contredire. Je l'avais d'abord corrigé au cas par cas sur `.acts` — un rattrapage local pour un défaut général, qui a rejailli deux jours plus tard au premier autre emploi. */ [hidden]{display:none !important} html{scroll-behavior:smooth} body{background:#faf7f3;color:#2c2016;font-family:'Jost',sans-serif;font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased} .wrap{max-width:1160px;margin:0 auto;padding:0 28px} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600} .kick{display:inline-block;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#6f6156;margin-bottom:12px;font-weight:400} header{position:sticky;top:0;z-index:30;background:rgba(250,247,243,.88);backdrop-filter:blur(7px);padding:10px 0} /* Sélecteur SCOPÉ : la maquette n'avait qu'un seul