.p-hero{padding:48px var(--gouttiere) 44px;max-width:900px;} .p-hero h1{font-family:var(--serif);font-size:44px;font-weight:500;line-height:1.08;margin:20px 0 22px;} .p-hero h1 em{color:var(--laiton);font-style:italic;} .p-hero p{font-size:16.5px;color:var(--encre-70);line-height:1.65;max-width:660px;} .subnav{position:sticky;top:0;z-index:15;background:var(--chaux);} .subnav a.on{color:var(--encre);background:var(--chaux-2);box-shadow:inset 0 -2px 0 var(--laiton);} .part{border-top:1px solid var(--encre);margin:0 var(--gouttiere);padding-top:18px;scroll-margin-top:96px;} .part + .section{padding-top:40px;} .part .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--acier);font-weight:500;} .part h2{font-family:var(--serif);font-size:29px;font-weight:500;line-height:1.12;margin-top:8px;} .part .acc{font-size:16px;color:var(--encre-70);margin-top:12px;max-width:640px;line-height:1.6;} .excl{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--encre-15);border:1px solid var(--encre-15);} .excl div{background:var(--chaux);padding:26px 30px;font-size:14px;color:var(--encre-70);line-height:1.6;} .excl div b{display:block;font-family:var(--serif);font-size:17px;color:var(--encre);font-weight:500;margin-bottom:6px;} /* La fiche des critères ne s'échange plus contre une adresse e-mail : le formulaire de téléchargement et son bouton (`.crit-wrap`, `.dl`, `.grille-form`, `.grille-row`, `.grille-dl`) ont quitté la livraison du 2 septembre 2026, et leurs règles avec eux. Vérifié : plus aucun de ces sélecteurs n'a de cible dans le HTML rendu, dans les trois langues. */ .g5{display:grid;grid-template-columns:repeat(5,1fr);} .secpack .sp-i{padding:0 26px;border-right:1px solid var(--chaux-15);display:flex;flex-direction:column;} .secpack .sp-c{margin-top:auto;padding-top:18px;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--chaux-50);} .secpack .sp-c.cond{color:var(--laiton-clair);} .secpack .sp-first{padding-left:0;} .secpack .sp-last{padding-right:0;border-right:none;} .secpack .sp-n{font-family:var(--serif);font-size:16px;color:var(--laiton-clair);} .secpack h3{font-family:var(--serif);font-size:20px;font-weight:500;margin:12px 0 10px;} .secpack p{font-size:13.5px;color:var(--chaux-70);line-height:1.7;} @media (max-width:900px){ /* ── LA SOUS-NAVIGATION SE DÉCOLLE ──────────────────────────────────── Troisième écart de rendu avec la livraison, approuvé le 3 septembre 2026. Sous 900 px, `site.css` fait passer la sous-navigation en COLONNE : les trois sous-parties s'empilent. Restée collante, elle occupe alors trois lignes en haut de l'écran — près de 190 px, soit le quart d'un écran de téléphone, en permanence, par-dessus le contenu qu'on est en train de lire. Une barre collante n'a de sens que tant qu'elle reste une barre. En colonne, elle devient un panneau : on la laisse défiler avec la page. Le script de mise en surbrillance continue de tourner — il ne coûte rien et redevient utile dès qu'on repasse au-dessus de 900 px. */ .subnav{position:static;} .secpack{gap:30px;} .secpack .sp-i{padding:22px 0 0;border-right:none;border-top:1px solid var(--chaux-15);} .part h2{font-size:clamp(23px,2.8vw,29px);} /* ── LA GRILLE À CINQ COLONNES DOIT SE REPLIER ──────────────────────── Seul écart de rendu assumé avec la livraison du 2 septembre 2026, approuvé le 3 septembre. `_responsive.css` replie `.g3` et `.g4` à 900 puis à 620 px, mais ne connaît pas `.g5` — la seule grille à cinq colonnes du site, et c'est celle du security package. Résultat mesuré sur téléphone : cinq colonnes de 94 px à 390 px de large, et les points 04 (délégation d'assurances) et 05 (contrôleur de chantier) rognés hors écran par l'`overflow-x: clip` de `.page` — sans barre de défilement pour le signaler. Deux des cinq sûretés étaient invisibles sur mobile, dans les trois langues. Le repli vit ICI et non dans `_responsive.css` : les quatre feuilles du kit se réécrasent telles quelles à la prochaine livraison. Cette règle, elle, doit survivre — jusqu'à ce que le correctif remonte en amont. */ .g5{grid-template-columns:repeat(2,1fr);} } @media (max-width:620px){ .g5{grid-template-columns:1fr;} } @media (max-width:1180px){.part{margin-left:44px;margin-right:44px;}} @media (max-width:620px){.part{margin-left:22px;margin-right:22px;}} /* ---- alignement des cartes produit ---- */ .prod2 .prod .sub{min-height:0;} /* ---- positionnement : trois encarts différenciés ---- */ .posi{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:20px;align-items:stretch;} .pc{border:1px solid var(--encre-15);background:var(--chaux);padding:32px 30px;display:flex;flex-direction:column;} .pc-hi{background:var(--acier);color:var(--chaux);border-color:var(--acier);} .pc-k{font-family:var(--sans);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--acier);font-weight:600;} .pc-hi .pc-k{color:var(--laiton-clair);} .pc h3{font-family:var(--serif);font-size:25px;font-weight:500;margin:12px 0 22px;} .pc-r{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:15px 0;border-top:1px solid var(--encre-15);font-size:13.5px;line-height:1.5;} .pc-r:nth-of-type(1){border-top:none;padding-top:0;} .pc-r > span{color:var(--encre-50);flex:0 0 auto;} .pc-r > b{font-weight:500;text-align:right;} .pc-hi .pc-r{border-top-color:var(--chaux-15);} .pc-hi .pc-r > span{color:var(--chaux-50);} .pc-hi .pc-r > b{color:var(--chaux);} /* ---- carte des zones : rendu réel, sans test d'adresse ---- */ .carte2{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:start;border:1px solid var(--encre-15);padding:26px 30px 28px;} .carte2-col{min-width:0;} .carte2-img{width:100%;height:auto;display:block;} .exception{margin-top:22px;border:1px solid var(--laiton);border-left-width:3px;background:rgba(154,123,60,.07);padding:24px 30px;} .exception p{font-size:15px;line-height:1.75;color:var(--encre-70);max-width:880px;margin:12px 0 20px;} .exception p b{color:var(--encre);font-weight:500;} .zleg i.sq{border-radius:0;} @media (max-width:1000px){.posi{grid-template-columns:1fr;}.carte2{grid-template-columns:1fr;gap:30px;padding:24px 22px 28px;}} @media (max-width:620px){.carte2{padding:18px 16px 22px;}.exception{padding:22px 20px;}} /* LA CARTE EST DEVENUE UNE IMAGE. La livraison remplace le SVG interactif — survol des 33 marqueurs, filtres urbain / littoral / montagne pilotés par `:has()` — par un tracé statique (`zones-carte.svg`) posé en . Les règles de l'ancienne carte (`.carte`, `.carte-svg`, `.zfil`, et les sélecteurs de filtre `.carte:has(#zf-…)`) n'ont plus de cible : elles sont retirées. Ce qui RESTE vivant juste en dessous : la légende (`.zleg`), la note de source (`.zhint`) et les trois listes de zones (`.zl`), qui accompagnent l'image. Ne pas les confondre avec ce qui précède. */ /* légende : la forme porte la catégorie, jamais la couleur */ .zhint{font-size:12px;color:var(--encre-50);line-height:1.6;margin-top:14px;} .zleg{display:flex;flex-wrap:wrap;gap:22px;margin-top:16px;padding-top:16px;border-top:1px solid var(--encre-15);} .zleg span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-50);} .zleg i{width:9px;height:9px;display:block;background:var(--acier);border-radius:50%;} .zleg i.r{background:var(--chaux);border:1.8px solid var(--acier);} .zleg i.d{border-radius:0;transform:rotate(45deg);} /* listes */ .zl{margin-bottom:24px;} .zl:last-child{margin-bottom:0;} .zl h3{font-family:var(--serif);font-size:19px;font-weight:500;} .zl .cnt{font-family:var(--mono);font-size:10px;color:var(--acier);letter-spacing:.08em;text-transform:uppercase;margin:3px 0 12px;} .zl ul{list-style:none;columns:2;column-gap:22px;} .zl.narrow ul{columns:2;} .zl li{font-size:13px;color:var(--encre-70);padding:3.5px 0;line-height:1.4;break-inside:avoid;} /* ============================================================ SORTIES DES ATTRIBUTS `style=""` DE LA LIVRAISON Reprises déclaration pour déclaration : le rendu est identique. ============================================================ */ /* Sections qui enchaînent sans respiration haute. */ /* ── LA SPÉCIFICITÉ DOIT MONTER, ET CE N'EST PAS UN DÉTAIL ──────────────── `_responsive.css` est chargée EN DERNIER et redéclare `.section{padding:…}` sous 620 px. Le style inline de la livraison gagnait sans effort — un attribut `style` bat toute feuille. Une classe simple, elle, a la même spécificité que `.section` et PERD, parce qu'elle est écrite avant. La règle s'écrit donc avec la classe de base : `.section.section--x`. Sans cela, la respiration haute revient à 64 px sur mobile, et deux sections se décollent de ce qu'elles doivent toucher. Trois pages étaient concernées, et l'écart ne se voyait qu'à 390 px. ──────────────────────────────────────────────────────────────────────── */ .section.section--flush-top{padding-top:0;} /* Le security package est le seul bloc sombre de la page. */ .section.dark{background:var(--encre);color:var(--chaux);} /* Chapeau de la sous-partie Critères. */ .crit-intro{font-size:16px;color:var(--encre-70);line-height:1.7;max-width:840px;} .crit-figs{margin-top:36px;} /* « Comment lire les plafonds » : le cartouche, ses trois jauges. */ .plafonds{border:1px solid var(--encre-15);background:var(--chaux-2);padding:44px 40px;} .plafond-k{font-family:var(--sans);font-size:11.5px;letter-spacing:0;text-transform:none; color:var(--encre-50);margin-bottom:10px;} .plafond-v{font-size:38px;color:var(--acier);} .plafond-v span{font-size:20px;} .plafond-note{font-size:13px;color:var(--encre-70);margin-top:16px;} /* Les trois jauges portent des VALEURS, pas une mise en forme : chaque position est nommée par ce qu'elle mesure. Une valeur qui change se corrige ici, à côté de la légende qui l'annonce, et non dans le gabarit. */ .lame--ltc{width:78%;} .butoir--ltc{left:85%;} .lame--ltgdv{width:61%;} .butoir--ltgdv{left:70%;} .lame--duree{width:66.6%;} .butoir--duree{left:100%;} /* Légende de la carte : les deux pastilles carrées reprennent les teintes du tracé SVG, qui n'appartiennent pas à la palette de la charte. */ .zleg i.sq-departement{background:#EFEBE1;border:1px solid #D6D0C2;} .zleg i.sq-zone{background:#D8DCE8;border:1px solid #9AA0B4;} /* ── LE TABLEAU DE POSITIONNEMENT SE REPLIE SOUS 350 px ─────────────────── Second écart de rendu avec la livraison, de la même famille que celui du security package : sous cette largeur, la mise en page du kit ROGNE du texte, et `.page` étant en `overflow-x: clip`, rien ne le signale. `.pc-r` est une ligne flex dont l'intitulé ne rétrécit pas (`flex:0 0 auto`, voulu) : la valeur prend ce qui reste. Mesuré largeur par largeur, « ce qui reste » ne suffit plus dès 340 px — un mot rogné —, huit à 320 px, neuf à 280 px. « 4 à 6 semaines » s'affichait « sema », « Plateforme » presque plus rien. À 360 px et au-dessus, rien ne dépasse et le rendu est celui de la livraison, au pixel. L'intitulé passe donc au-dessus de la valeur, toutes deux en pleine largeur. `min-width:0` seul ne suffisait pas : il laissait la boîte rétrécir, mais le MOT débordait encore de sa boîte. */ @media (max-width:350px){ .pc-r{flex-direction:column;align-items:flex-start;gap:2px;} .pc-r > b{text-align:left;} }