/* * MOD-IA 2026-09-02 : bloc déplacé tel quel depuis assets/css/style.css * (lignes 8 à 113 avant déplacement) dans le cadre du découpage CSS de la * charte graphique (page-charte.php). Aucune valeur n'a changé — seul * l'emplacement du bloc a bougé. Un renvoi d'une ligne reste à l'ancien * emplacement dans style.css. * * Ce fichier ne contient QUE la base : reset, conteneur, lien d'évitement, * focus visible. Rien de spécifique à un composant ne doit y entrer — voir * la règle de routage CSS dans la charte graphique. */ /* ---------- Reset de base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var( --font-body ); font-size: var( --text-body-size ); line-height: var( --text-body-lh ); letter-spacing: var( --tracking-tight ); color: var( --color-text ); background: var( --color-surface ); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var( --font-heading ); font-weight: var( --weight-semibold ); letter-spacing: var( --tracking-tight ); } p { margin: 0 0 var( --space-md ); } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Conteneur ---------- */ .container { width: 100%; max-width: var( --container-max ); margin-inline: auto; padding-inline: var( --space-lg ); } @media ( max-width: 767px ) { .container { padding-inline: 15px; /* Marge mobile observée dans toutes les frames Figma "SP". */ } } /* ---------- Rythme vertical de la zone de contenu ---------- */ /* MOD-IA 2026-09-21 : G3 — espace après le header et avant le footer, sur toutes les pages. Jusqu'ici `.site-main` n'était stylé NULLE PART : chaque gabarit fabriquait son propre espace, et il manquait là où aucune section n'en posait. Valeurs relevées dans Figma (voir docs/feedback_20260921/00-RELEVE-FIGMA.md §1), pas choisies : le contenu démarre à y=205 pour un menu principal qui se termine à y=155 — soit 50px — sur homepage 1:10, Page - bons commerçant 121:748 et Page - Bons valeur 247:1713 ; et le footer est posé 80px sous la dernière section sur ces trois frames comme sur Page - détail commerçant 170:3861 (seule frame à porter 80px en haut plutôt que 50). En mobile, contenu à y=97 sous un header de 72 — soit 25px — et 40px avant le footer (435:1510, 450:1982). Le back-office est exclu : servi par get_header( 'minimal' ), il colle son bandeau noir en haut de page et porte son propre rythme. La carte (page-carte.php) n'est pas concernée : son

ne porte pas .site-main. */ .site-main { padding-block: 0px 80px; } .site-main.tdb-bo { padding-block: 0; } /* MOD-IA 2026-09-21 : G3 — exception à l'exception. Tous les gabarits du back-office (`page-tableau-de-bord.php`, `page-mon-compte.php`, `page-suivi-bons.php`, …) enveloppent leur contenu dans `.tdb-bo__layout`, qui porte déjà `padding-block: 50px var( --space-3xl )` (style.css) : d'où la neutralisation ci-dessus. `page-contact.php` est le seul à faire exception. Il garde la classe `tdb-bo` — c'est elle qui habille ses blocs `.tdb-contact` — mais c'est une page PUBLIQUE depuis le 07.09.2026 : en-tête public et, surtout, aucun `.tdb-bo__layout` autour de son contenu. D'où le drapeau `tdb-bo--public`, posé sur son `

`, qui lui rend le rythme commun. Le drapeau, et non `body.page-template-…` : ce gabarit n'est pas choisi dans l'administration, il est résolu par le slug (`page-contact.php` → page « contact »). WordPress met donc `page-template-default` sur le , et un sélecteur de gabarit ne mordrait pas — vérifié le 21.09.2026 sur /contact/. Même spécificité que la règle neutralisante ci-dessus (0-2-0) : c'est l'ORDRE qui tranche, cette règle doit rester après elle. */ .site-main.tdb-bo--public { padding-block: 50px 80px; } @media ( max-width: 767px ) { .site-main { padding-block: 25px 40px; } .site-main.tdb-bo--public { padding-block: 25px 40px; } } /* ---------- Lien d'évitement ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var( --color-surface ); color: var( --color-text ); padding: var( --space-sm ) var( --space-md ); border-radius: 0 0 var( --radius-sm ) 0; } .skip-link:focus { left: 0; top: 0; } /* Focus visible cohérent sur tous les éléments interactifs. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var( --color-primary ); outline-offset: 2px; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect( 1px, 1px, 1px, 1px ); white-space: nowrap; }