/* ============================================================================= accueil.css — ce que la page d'accueil ajoute à `juridique.css` ============================================================================= ⚠ LA RÈGLE DE CE FICHIER A CHANGÉ LE 3 SEPTEMBRE 2026, ET IL FAUT LE DIRE FRANCHEMENT. Il disait : « elle ne redéfinit rien, elle complète ». C'était vrai, et c'était le défaut : la page d'accueil héritait de la mise en page des MENTIONS LÉGALES — colonne de 68 caractères, `h1` de 25 px, sections séparées par 38 px de marge. Elle ressemblait à un contrat quoi qu'elle dise, et aucun mot ne pouvait corriger ça. CE FICHIER REPREND DONC DEUX CHOSES À `juridique.css` : la largeur de page et l'échelle typographique. Rien d'autre. CE QU'IL NE REPREND PAS, ET C'EST DÉLIBÉRÉ. `juridique.css` reste chargée, et garde les JETONS, l'en-tête, le pied, `.chapo`, `.encadre`, `.detail` et le lien d'évitement. Les dupliquer ici ferait deux définitions de la même couleur, dont l'une dériverait un jour sans que personne le voie — et c'est précisément la page sur laquelle une dérive se remarque. La règle « aucun jeton n'est redéfini ici » tient donc toujours, et elle est le vrai contenu de l'ancien avertissement. POURQUOI PAS UNE FEUILLE AUTONOME. Parce que trois pages de cadre partagent `juridique.css`, et que ce qu'elles partagent est exactement ce qui doit rester commun : les couleurs, la marque, le pied. Ce qui doit diverger — le rythme — diverge ici, en un seul endroit, visible. ========================================================================== */ /* ─── La page reprend sa largeur ──────────────────────────────────────────── 68ch est une bonne colonne de LECTURE, et une mauvaise largeur de PAGE : on ne peut y poser ni deux colonnes ni une capture d'écran. La page va donc à 1080 px, et ce sont les blocs de texte qui gardent la colonne étroite — c'est-à-dire l'inverse de la construction précédente. */ .page{max-width:1080px; padding:24px 24px 88px} .bloc-texte, .chapo, .sous-schema, .final p{max-width:64ch} /* ─── L'échelle ───────────────────────────────────────────────────────────── Le titre passe de 25 px à 30–50 px selon la fenêtre. `clamp` plutôt qu'une requête média : il n'y a pas de palier à maintenir, et le titre suit la largeur au lieu de sauter. `text-wrap:balance` évite le mot seul sur la dernière ligne, qui est ce qui fait qu'un grand titre a l'air raté. */ h1{font-size:clamp(30px, 4.6vw, 50px); line-height:1.04; letter-spacing:-.022em; margin:0 0 14px; text-wrap:balance} h2{font-size:clamp(21px, 2.5vw, 27px); line-height:1.18; letter-spacing:-.014em; margin:0 0 12px; text-wrap:balance} .page main h3{font-size:17px; margin:0 0 8px; line-height:1.3} .chapo{font-size:17px; line-height:1.55; color:var(--txt2)} /* Le rythme vertical est porté par les SECTIONS, plus par les marges des titres : une marge de titre se cumule avec celle du paragraphe qui précède et donne des écarts qu'on ne prévoit pas. */ main > section, main > .encadre{margin:0 0 56px} main > h2.titre-section{margin:0 0 20px} .heros{margin-bottom:28px} /* ─── Le héros ─────────────────────────────────────────────────────────────*/ .heros{padding-top:18px} .fanion{ display:inline-block; margin:0 0 18px; padding:4px 11px; border-radius:100px; font:var(--t-micro) var(--mono); text-transform:uppercase; letter-spacing:.1em; color:var(--acc); border:1px solid var(--line); } /* ─── L'appel ─────────────────────────────────────────────────────────────── UN SEUL GESTE SUR TOUTE LA PAGE, mais il est dit DEUX FOIS : une fois sous le titre, une fois à la fin. Ce n'est pas la même chose que deux gestes — c'est ce que `AC-13` vérifie désormais, en exigeant que tous les boutons partagent destination ET libellé. Le reste de la page n'a que des liens de texte, y compris « Entrer », qui mène pourtant au même endroit et ne doit surtout pas se disputer l'attention avec le bouton. */ .appel{display:flex; align-items:center; gap:10px 22px; flex-wrap:wrap; margin:22px 0 0} .bouton{ display:inline-block; background:var(--acc); color:#1a1206; font-weight:650; font-size:15px; text-decoration:none; padding:12px 24px; border-radius:8px; border:1px solid var(--acc); } .bouton:hover{filter:brightness(1.08); color:#1a1206} .bouton:focus-visible{outline:2px solid var(--acc2); outline-offset:3px} .appel .second{font-size:var(--t-petit); color:var(--txt3)} /* ─── Les captures ────────────────────────────────────────────────────────── `width`/`height` sont sur la balise et le rapport est tenu ici : la place est réservée avant que l'image arrive, donc la page ne saute pas au chargement. Les deux images du bas sont en `loading="lazy"` ; celle du héros ne l'est pas, c'est celle du premier écran. */ .vue{margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg2)} .vue img{display:block; width:100%; height:auto; aspect-ratio:1400/875} .vue-large{margin:0 0 28px} .vue figcaption{ padding:9px 14px; border-top:1px solid var(--line); font:var(--t-petit) var(--mono); color:var(--txt3); } /* ─── La bande de chiffres ────────────────────────────────────────────────── Ces quatre nombres étaient noyés dans des paragraphes. Ils sont l'argument « ce n'est pas un jouet », et ils se lisent d'un coup d'œil ou pas du tout. `auto-fit` : quatre colonnes au large, deux sur un téléphone, sans requête média. */ .compteurs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px; margin:0 0 56px; padding:0; list-style:none; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; } .compteurs li{background:var(--bg); padding:18px 16px; text-align:center} .compteurs b{ display:block; font-size:27px; font-weight:650; color:var(--txt); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; } .compteurs span{ display:block; margin-top:7px; font:var(--t-micro) var(--mono); text-transform:uppercase; letter-spacing:.08em; color:var(--txt3); } /* ─── Une promesse, une capture ───────────────────────────────────────────── Le texte à gauche, l'écran à droite, et l'inverse une ligne sur deux. Sous 860 px la grille tombe à une colonne et `.inverse` cesse de s'appliquer : sur un téléphone, le texte doit TOUJOURS précéder son image, sinon on lit une capture sans savoir ce qu'on regarde. */ .duo{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:32px; align-items:center} .duo.inverse .dit{order:2} .duo.inverse .vue{order:1} .duo p:last-child{margin-bottom:0} /* ─── Les trois qu'on ne montre pas ─────────────────────────────────────────*/ .cartes{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))} .carte{background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:16px 18px} .carte p{margin:0} /* ─── Le périmètre, en deux colonnes ──────────────────────────────────────── Quatre paragraphes et un encadré occupaient la moitié de la page. Le fond était bon — devant des ingénieurs du son, dire ce qu'on ne fait pas est ce qui rend crédible ce qu'on dit qu'on fait — c'est le poids qui était faux. La coche et la croix sont posées par le CSS et non par le texte : un lecteur d'écran lit la liste, pas la ponctuation décorative. */ .perimetre{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr))} .perimetre .colonne{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; } .perimetre ul{margin:0; padding:0; list-style:none} .perimetre li{position:relative; padding-left:24px; margin-bottom:10px; line-height:1.5} .perimetre li:last-child{margin-bottom:0} .perimetre li::before{position:absolute; left:0; top:0; font-weight:700} .perimetre .oui li::before{content:"✓"; color:var(--ok)} .perimetre .non li::before{content:"✕"; color:var(--txt4, var(--txt3)); font-size:.9em} /* ─── La fin ────────────────────────────────────────────────────────────────*/ .final{padding-top:8px} /* ─── Le schéma de normalisation ──────────────────────────────────────────── `width:100%` + `height:auto` sur un `viewBox` : le dessin se met à l'échelle au lieu de déborder, et il reste net à toute taille — c'est la raison d'être du SVG inline plutôt que d'une image. */ .schema{ display:block; width:100%; height:auto; max-width:760px; margin:18px 0 10px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px 0; } .sch-baie rect{fill:var(--bg3); stroke:var(--line); stroke-width:1.5} .sch-pt circle{fill:var(--bg); stroke:var(--txt3); stroke-width:1.5} .sch-txt text{fill:var(--txt3); font-family:inherit; font-size:13px} .sch-leg text{fill:var(--txt2)} /* Les normalisations sont EN POINTILLÉ parce qu'elles ne sont pas des câbles : rien n'est branché, la liaison est interne à la baie. Un trait plein en ferait des cordons, c'est-à-dire l'inverse de ce que le schéma explique. */ .sch-nor path{stroke:var(--ok); stroke-width:2.5; stroke-dasharray:5 4; fill:none} /* Le cordon, lui, est PLEIN et de la couleur d'accent : c'est le geste humain, celui qui rompt la normalisation. */ .sch-cord{stroke:var(--acc); stroke-width:3; fill:none; stroke-linecap:round} .sch-fiche{fill:var(--acc); stroke:var(--bg); stroke-width:2.5} .sous-schema{margin-top:2px} /* ─── Le téléphone ──────────────────────────────────────────────────────────*/ @media (max-width:860px){ .duo{grid-template-columns:1fr; gap:18px} .duo.inverse .dit{order:0} .duo.inverse .vue{order:0} main > section, main > .encadre{margin-bottom:44px} } @media (max-width:600px){ .page{padding:20px 16px 60px} .compteurs li{padding:14px 10px} .compteurs b{font-size:23px} } /* ─── Le papier ───────────────────────────────────────────────────────────── `juridique.css` a déjà des règles d'impression pour ses pages de cadre. Celle-ci ajoute la seule chose qu'elle ne pouvait pas prévoir : trois captures d'écran sombres, qui sur une imprimante donnent trois rectangles noirs et rien d'autre. */ @media print{ .vue, .compteurs, .fanion, .bouton{display:none} .duo{display:block} }