/* ============================================================================ BASE — le craft appliqué. À copier tel quel, à NE PAS réécrire par site. Ce fichier ne contient AUCUN choix esthétique : il ne fait qu'appliquer mécaniquement les règles de 09-bible-web/01-fondamentaux-ui.md (grille, échelle, proximité, lisibilité, états) et de 09-bible-web/07 (les inviolables). Il ne lit que des tokens. Toute l'identité vit dans tokens.css. Pourquoi il existe : l'audit du 07/08/2026 a montré que chaque site reconstruisait sa grille, son échelle et ses états à la main — d'où des valeurs au hasard, des contrastes ratés et des cibles trop petites. Ici, le plancher de qualité est posé une fois pour toutes. ============================================================================ */ /* ---------------------------------------------------- 1. Remise à plat ---- */ *, *::before, *::after { box-sizing: border-box; } /* ⛔ 19/09/2026 : `100vw` inclut la barre de defilement. Les sections pleine largeur debordaient donc de sa largeur sur PC, et la page se decalait lateralement. `clip` coupe sans creer de conteneur de defilement : le collant (`position: sticky`) continue de fonctionner, contrairement a `hidden`. Trouve par Saadou ; invisible en navigateur sans fenetre. */ html { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /* ⚠️ `height: auto` est OBLIGATOIRE : sans lui, les attributs width/height du HTML (1200x900) restent la hauteur rendue et l'image est ÉTIRÉE dès que la colonne est plus étroite. Mesuré le 17/09/2026 sur le hero de Porteclose : 600x900 affichés pour une photo de ratio 1,47. Un bloc qui veut un cadrage pose son aspect-ratio + object-fit. */ img, video, canvas { height: auto; } input, button, textarea, select { font: inherit; color: inherit; max-width: 100%; } button { background: none; border: 0; cursor: pointer; } /* ⛔ INVIOLABLE I05 — le garde-fou mouvement. Toujours en haut, jamais retiré. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } } /* ------------------------------------------------------- 2. Le corps ------ */ body { background: var(--fond); color: var(--encre); font-family: var(--f-texte); font-size: var(--fs-body); /* ⛔ I01 — plancher 19px */ line-height: var(--lh-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------- 3. La grille ----------- */ /* 4 colonnes mobile · 8 tablette · 12 desktop. Rien ne sort de là sans décision écrite (09-bible-web/07, règle F01). */ .wrap { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--e-5); /* 24px : la marge mobile */ } @media (min-width: 768px) { .wrap { padding-inline: var(--e-6); } } @media (min-width: 1024px) { .wrap { padding-inline: var(--e-8); } } /* ⚠️ `minmax(0, 1fr)` et PAS `1fr`. C'est LE piège de CSS Grid : `1fr` vaut `minmax(auto, 1fr)`, donc une colonne ne descend jamais sous la largeur de son contenu — un mot long, une carte dense, et les colonnes se chevauchent au lieu de se partager la largeur. Constaté sur le premier site généré par le socle (07/08/2026) : les 3 cartes de services sortaient à des largeurs différentes. Le `min-width: 0` sur les enfants couvre le même problème en flex. */ .grid { display: grid; gap: var(--gap-grille-m); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap-grille); } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-grille); } } .grid > * { min-width: 0; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-12{ grid-column: 1 / -1; } @media (max-width: 767px) { [class*="col-"] { grid-column: 1 / -1; } } /* Sortir de la grille : un choix assumé, jamais un accident. */ .full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); } /* ------------------------------------------------- 4. Les sections -------- */ .section { padding-block: var(--pad-section); } .section--sombre { background: var(--sombre); color: #fff; } .section--sombre .lead, .section--sombre p { color: rgb(255 255 255 / .82); } .section--surface { background: var(--surface); } .section + .section { border-top: 1px solid var(--ligne); } .section--sombre + .section, .section--sombre { border-top-color: var(--ligne-nuit); } /* ------------------------------------------------- 5. La typographie ------ */ /* ⚠️ `overflow-wrap: break-word` : le plancher de `--fs-titre` est 52 px, et sur un écran de 320 px il ne reste que 272 px utiles. Un mot long (« aujourd'hui, ») sortait de sa boîte et poussait TOUTE la page à 336 px de large — un défilement horizontal sur chaque page, mesuré le 09/09/2026. Un mot coupé est laid ; une page qui glisse latéralement sur un téléphone est cassée. */ h1, h2, h3 { font-family: var(--f-titre); font-weight: 700; text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: var(--fs-titre); line-height: var(--lh-titre); letter-spacing: var(--ls-titre); } /* ⚠️ 09/09/2026 : c'était `var(--fs-h1)` — une variable qui n'existe dans AUCUN fichier de tokens. Le H1 de tous les sites générés depuis le 07/08 se rendait donc à 19 px (la taille du corps), mesuré au navigateur. Le gate ne le voyait pas : il lit les DÉCLARATIONS de tokens.css, pas le rendu. Toute variable utilisée sans valeur de repli doit exister — sinon la règle entière est muette. */ h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.015em; } h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; } /* La règle de proximité : beaucoup avant un titre, peu après. Un titre appartient à ce qui le SUIT (09-bible-web/01 §2.2). */ h2 { margin-block: var(--e-9) var(--e-4); } h3 { margin-block: var(--e-6) var(--e-2); } h2:first-child, h3:first-child { margin-top: 0; } p, li { max-width: var(--w-texte); text-wrap: pretty; } p + p { margin-top: var(--e-4); } .lead { font-size: clamp(18px, 2vw, 21px); color: var(--encre-2); } /* Le label en capitales : letter-spacing OBLIGATOIRE, sinon c'est illisible. */ .label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--encre-2); } a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; } strong, b { font-weight: 700; } /* Les listes à puce du contenu (celles qui n'ont pas de classe) */ :where(ul:not([class]), ol:not([class])) { padding-left: 1.2em; margin-block: 0 var(--e-4); } :where(ul:not([class]), ol:not([class])) li + li { margin-top: var(--e-2); } /* ------------------------------------------------- 6. L'accessibilité ----- */ /* ⛔ I06 — un focus VISIBLE sur tout ce qui se navigue au clavier. */ :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } /* Le lien d'évitement : première chose dans le , invisible jusqu'au Tab */ .skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: var(--e-3) var(--e-5); background: var(--marque); color: #fff; } .skip:focus { left: var(--e-3); top: var(--e-3); } /* Masquer visuellement sans masquer pour un lecteur d'écran */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------- 7. Les boutons --------- */ /* ⛔ I03 — 48px de haut minimum. Les 6 états sont tous définis : sans ça, un composant n'est pas livrable (09-bible-web/02 §7.3). */ .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: var(--min-cible); padding: var(--e-3) var(--e-6); border-radius: var(--r-cta); font-weight: 650; text-decoration: none; text-align: center; transition: transform var(--d-micro) var(--ease-sortie), box-shadow var(--d-micro) var(--ease-sortie), background var(--d-micro), border-color var(--d-micro); } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .btn:active { transform: translateY(0); box-shadow: var(--sh-1); transition-duration: 60ms; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } .btn[data-loading] { pointer-events: none; } .btn[data-loading]::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .btn--primaire { background: var(--marque); color: #fff; } .btn--secondaire{ background: transparent; color: var(--encre); border: 2px solid var(--encre); } .btn--sombre { background: #fff; color: var(--sombre); } /* La flèche qui avance : le détail qui coûte 2 lignes et se voit. */ .btn svg { transition: transform var(--d-etat) var(--ease-retour); } .btn:hover svg { transform: translateX(4px); } /* ------------------------------------------------- 8. Les cartes ---------- */ .card { position: relative; /* pour un badge en absolu */ display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-5); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-bloc); overflow: hidden; /* le rayon s'applique à l'image */ } @media (min-width: 768px) { .card { padding: var(--e-6); } } .card__media { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .card__body { flex: 1 1 auto; } /* pousse le CTA en bas */ .card__badge { position: absolute; top: var(--e-3); right: var(--e-3); } .card--lien:hover { border-color: var(--marque); } /* ------------------------------------------------- 9. Les formulaires ----- */ .field { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-5); } .field > label { font-weight: 600; font-size: var(--fs-small); } .field input, .field textarea, .field select { min-height: var(--min-cible); padding: var(--e-3) var(--e-4); background: #fff; color: var(--encre); border: 2px solid var(--ligne); border-radius: var(--r-cta); transition: border-color var(--d-micro); } .field input:focus, .field textarea:focus { border-color: var(--marque); } .field .aide { font-size: var(--fs-small); color: var(--encre-2); } /* ⛔ I07 — l'erreur ne passe JAMAIS par la couleur seule : icône + texte. */ .field.is-error input, .field.is-error textarea { border-color: var(--danger); } .field.is-error .msg { color: var(--danger); font-size: var(--fs-small); font-weight: 600; } .field.is-error .msg::before { content: "⚠ "; } .field.is-error { animation: shake .35s both; } @keyframes shake { 10%,90% { transform: translateX(-2px) } 30%,70% { transform: translateX(4px) } 50% { transform: translateX(-4px) } } /* ------------------------------------------------- 10. La barre d'appel --- */ /* ⛔ SUPPRIMÉE le 20/09/2026. Saadou : « le truc qui reste tout le temps en bas de l'écran tu me l'enlèves, ON A DÉJÀ LE CTA DANS LA BARRE EN HAUT, PK T'EN METTRAIS UN EN BAS AUSSI ». Il a raison : la barre du haut est `position: sticky`, son bouton d'appel ne quitte jamais l'écran. Deux boutons d'appel permanents, c'est un bouton de trop et 84 px de page mangés en permanence. La doctrine (04 §6) demande UN CTA visible pendant tout le scroll : c'est tenu, par le haut. Ce qui reste interdit, c'est de n'en avoir aucun. Sur le gabarit Pro, les actions de la barre reviennent donc sur téléphone. */ .callbar { display: none !important; } /* ------------------------------------------------- 11. Le reveal ---------- */ /* ⛔ I04 — la classe n'est JAMAIS dans le markup : c'est reveal.js qui pose `.js` sur . Sans JS, rien n'est masqué. Failsafe à 1400 ms. */ .js [data-reveal-item] { opacity: 0; transform: translateY(18px); transition: opacity var(--d-entree) var(--ease-expo), transform var(--d-entree) var(--ease-expo); transition-delay: var(--d, 0ms); } .js [data-reveal].is-in [data-reveal-item] { opacity: 1; transform: none; } /* Variantes — 09-bible-web/02 §4. Une seule par section. */ .js [data-reveal-item].rv-scale { transform: scale(.94); } .js [data-reveal-item].rv-gauche { transform: translateX(-28px); } .js [data-reveal-item].rv-droite { transform: translateX(28px); } .js [data-reveal-item].rv-rideau { opacity: 1; clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-expo); } .js [data-reveal].is-in [data-reveal-item].rv-rideau { clip-path: inset(0); } .js [data-reveal-item].rv-trait { opacity: 1; transform: scaleX(0); transform-origin: left; } .js [data-reveal].is-in [data-reveal-item].rv-trait { transform: scaleX(1); } /* ------------------------------- 11 bis. Les composants du catalogue ------ */ /* Tout ce qu'utilise sections/catalogue.html doit être stylé ICI. Un bloc du catalogue qui s'appuie sur une classe absente produit un site bancal dès la première génération — constaté au premier essai (nav sans espacement, paragraphes collés). */ /* Nav */ .nav { position: sticky; top: 0; z-index: 50; padding-block: var(--e-3); background: color-mix(in srgb, var(--fond) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .marque { display: inline-flex; align-items: center; gap: var(--e-2); font-family: var(--f-titre); font-weight: 700; font-size: 20px; text-decoration: none; } .nav__liens { display: flex; align-items: center; gap: var(--e-5); flex-wrap: wrap; } .nav__liens a { text-decoration: none; font-weight: 600; font-size: var(--fs-small); padding-block: var(--e-2); } .nav__liens a:hover { color: var(--marque); } @media (max-width: 900px) { .nav { position: static; } .nav__liens { display: none; } } /* Hero */ .hero { padding-bottom: var(--pad-section); } .hero .label { display: block; margin-bottom: var(--e-3); } .hero h1 { margin-bottom: var(--e-4); } /* Espacements de texte courants — le « lead » respire, la mention légère aussi */ .lead { margin-bottom: var(--e-5); } .aide { font-size: var(--fs-small); color: var(--encre-2); margin-top: var(--e-3); } .section--sombre .aide { color: rgb(255 255 255 / .7); } /* Citation */ blockquote { margin: 0 0 var(--e-4); padding: var(--e-4) var(--e-5); background: var(--surface); color: var(--encre); border-left: 4px solid var(--accent); border-radius: 0 var(--r-bloc) var(--r-bloc) 0; } /* Figure / vidéo */ figure { margin: 0; } /* ⛔ Le fond d'une figure n'est PAS noir. Tant que l'image ne s'est pas affichée — le temps du chargement, ou pour toujours si le fichier manque — c'est ce fond qu'on voit. Sur la grille des chantiers, huit carrés noirs à la place des huit preuves du travail : un visiteur en conclut que le site n'est pas fini. (Vu par un prospect le 17/09/2026.) */ figure video, figure img { width: 100%; border-radius: var(--r-img); background: var(--surface); } figcaption { margin-top: var(--e-3); font-size: var(--fs-small); color: var(--encre-2); } .section--sombre figcaption { color: rgb(255 255 255 / .7); } /* FAQ —
natif : accessible, indexable, zéro JS */ .faq__item { border-bottom: 1px solid var(--ligne); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: var(--min-cible); padding-block: var(--e-3); cursor: pointer; font-weight: 650; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ LA FAQ QUI S'OUVRE ET QUI SE REFERME --------------------------------------------------------------------------- Saadou, 19/09 : « le texte est trop a gauche », « t'as pas fait une animation de retour ». Les deux etaient des fautes, plus une troisieme que j'ai vue en regardant : le « + » ouvert devenait une BARRE VERTICALE au lieu d'un moins. · L'ALIGNEMENT : la question se decalait de 16 px a l'ouverture, pas la reponse — qui restait collee au filet d'accent. Les deux bougent ensemble. · LE RETOUR : le CSS ouvrait sur [open] ET sur .is-ouvert. Quand le JS retirait .is-ouvert pour fermer en douceur, [open] tenait encore le volet ouvert : rien ne se fermait. Avec JS, c'est .is-ouvert qui decide, seule. Sans JS, [open] reprend la main et la FAQ s'ouvre d'un coup — elle marche. · LA CROIX : on tourne d'un DEMI-tour (180°), pas d'un quart. Une barre horizontale tournee de 90° devient verticale ; tournee de 180° elle reste horizontale. La barre verticale, elle, se retracte. On finit sur un moins. ═══════════════════════════════════════════════════════════════════════════ */ .faq__item { position: relative; max-width: 68ch; transition: background var(--d-etat) var(--ease-sortie); } .faq__item::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 0; background: var(--accent); transition: height .45s var(--ease-expo); } /* le decalage : question ET reponse se deplacent du meme pas */ .faq__item summary, .faq__item .faq__body { padding-inline: 0; transition: padding-inline .45s var(--ease-expo); } /* la croix : deux barres, pas un caractere « + » (qui saute selon la police) */ .faq__item summary::after { content: ""; flex: none; width: 15px; height: 15px; background: linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/2px 100% no-repeat; transition: transform .45s var(--ease-expo), background-size .45s var(--ease-expo); } /* l'ouverture en hauteur : grid 0fr -> 1fr, la seule facon d'animer une hauteur « auto » sans mesurer au JS. */ .faq__body { display: grid; grid-template-rows: 0fr; /* FERMETURE : la hauteur attend que le texte soit parti (.14s) */ transition: grid-template-rows .42s var(--ease-expo) .14s, padding-inline .42s var(--ease-expo) .14s; } .faq__body > * { overflow: hidden; min-height: 0; transform: translateY(6px); opacity: 0; /* FERMETURE : le texte part tout de suite, et vite */ transition: transform .18s ease-in, opacity .16s ease-in; } .faq__body p { padding-bottom: var(--e-4); margin: 0; } /* ── SANS JS : [open] fait tout, d'un coup ─────────────────────────────── */ .faq__item[open] .faq__body { grid-template-rows: 1fr; } .faq__item[open] .faq__body > * { transform: none; opacity: 1; } .faq__item[open]::before { height: 100%; } /* ── AVEC JS : .is-ouvert decide, pour que la FERMETURE ait le temps de jouer ─ */ .js .faq__item[open] .faq__body { grid-template-rows: 0fr; } .js .faq__item[open] .faq__body > * { transform: translateY(8px); opacity: 0; } .js .faq__item[open]::before { height: 0; } .js .faq__item.is-ouvert .faq__body { grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ease-expo), padding-inline .42s var(--ease-expo); } .js .faq__item.is-ouvert .faq__body > * { transform: none; opacity: 1; transition: transform .5s var(--ease-expo) .16s, opacity .34s ease .18s; } .js .faq__item.is-ouvert::before { height: 100%; } .js .faq__item.is-ouvert summary, .js .faq__item.is-ouvert .faq__body, .faq__item[open] summary, .faq__item[open] .faq__body, .faq__item summary:hover { padding-inline: var(--e-4) 0; } .js .faq__item[open]:not(.is-ouvert) summary, .js .faq__item[open]:not(.is-ouvert) .faq__body { padding-inline: 0; } /* la croix devient un moins : demi-tour, et la barre verticale se retracte */ .js .faq__item.is-ouvert summary::after, .faq__item[open] summary::after { transform: rotate(180deg); background: linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/2px 0 no-repeat; } .js .faq__item[open]:not(.is-ouvert) summary::after { transform: none; background: linear-gradient(currentColor 0 0) center/100% 2px no-repeat, linear-gradient(currentColor 0 0) center/2px 100% no-repeat; } @media (prefers-reduced-motion: reduce) { .faq__item::before, .faq__item summary, .faq__item summary::after, .faq__body, .faq__body > * { transition: none !important; } .faq__body > * { transform: none; opacity: 1; } } /* Process — la liste ordonnée sans puces */ ol.grid { list-style: none; padding: 0; counter-reset: etape; } ol.grid > li { max-width: none; } /* Zone d'intervention — la liste de villes EST ce qui référence */ .section ul.row { list-style: none; padding: 0; } .section ul.row li { max-width: none; padding: var(--e-2) var(--e-4); border: 1px solid var(--ligne); border-radius: var(--r-cta); font-size: var(--fs-small); font-weight: 600; } /* Tableaux (pages légales) */ table { width: 100%; border-collapse: collapse; margin-bottom: var(--e-5); font-size: var(--fs-small); font-variant-numeric: tabular-nums; } th, td { text-align: left; padding: var(--e-3); border-bottom: 1px solid var(--ligne); vertical-align: top; } th { font-weight: 700; } /* Le bloc de contenu propre à la page : ses paragraphes gardent la largeur de lecture */ .section > .wrap > div > p { margin-bottom: var(--e-4); } /* ------------------------------------------------- 12. Utilitaires -------- */ .stack > * + * { margin-top: var(--e-4); } .stack-l > * + * { margin-top: var(--e-6); } .row { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; } .center { text-align: center; margin-inline: auto; } .nums { font-variant-numeric: tabular-nums; font-family: var(--f-chiffre); } .hr { border: 0; border-top: 1px solid var(--ligne); margin-block: var(--e-8); } /* Impression : on retire le décor, on garde le contenu et les URL. */ @media print { .callbar, .nav, nav, video, canvas { display: none !important; } body { font-size: 12pt; color: #000; background: #fff; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; } } /* ============================================================================ BLOC C-QUATER — LES COMPOSANTS DE LA REFONTE DU 17/08/2026 Ils remplacent trois blocs qui étaient des grilles de colonnes égales : `services` (3 cartes), `reassurance` (4 colonnes), `process` (3 colonnes). Motif : les cartes égales alignées sont le marqueur générique n°1, et le gate C52 les refuse désormais. Aucun ne perd d'information — même densité, hiérarchie en plus. ============================================================================ */ /* ── LA LISTE DES SERVICES — remplace les trois cartes ────────────────────── */ .liste-services { margin-top: clamp(46px, 7vw, 86px); border-top: 1px solid var(--ligne); } .ls-item { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 40px); align-items: baseline; border-bottom: 1px solid var(--ligne); padding-block: clamp(24px, 3.4vw, 42px); text-decoration: none; color: inherit; position: relative; isolation: isolate; } .ls-num { font-size: var(--fs-label); letter-spacing: var(--ls-label); color: var(--encre-2); font-variant-numeric: tabular-nums; padding-top: .9em; } .ls-titre { font-family: var(--f-titre); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-h2); margin: 0; } .ls-benef { color: var(--encre-2); font-size: var(--fs-small); margin: 11px 0 0; max-width: 44ch; } .ls-prix { font-size: var(--fs-small); color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: .7em; } /* Le voile sombre au survol : peint une fois sur un pseudo-élément, on n'anime QUE son opacity. Travail compositeur, aucun repeint. (02-animations §15) */ .ls-item::before { content: ""; position: absolute; inset-block: 0; inset-inline: -3vw; z-index: -1; background: var(--sombre); opacity: 0; transition: opacity var(--d-micro) var(--ease-sortie); } .ls-item .ls-titre, .ls-item .ls-benef, .ls-item .ls-prix, .ls-item .ls-num { transition: color var(--d-micro); } /* La flèche est une AFFORDANCE, pas un ornement : elle apparaît sur l'item qu'on survole, jamais sur les dix à la fois (règle D3, appliquée le 17/09/2026). Elle est dessinée ici, en pseudo-élément, pour qu'aucune flèche ne traîne dans le HTML. */ .ls-titre::after { content: ""; display: inline-block; width: 0; margin-left: 0; color: var(--accent); opacity: 0; transition: opacity var(--d-micro), transform var(--d-micro); } @media (hover: hover) { .ls-item:hover::before { opacity: 1; } a.ls-item:hover .ls-titre { color: #fff; } a.ls-item:hover .ls-benef, a.ls-item:hover .ls-prix, a.ls-item:hover .ls-num { color: rgb(255 255 255 / .72); } a.ls-item:hover .ls-titre::after, .ls-item:focus-visible .ls-titre::after { content: "\2192"; width: auto; margin-left: .4em; opacity: 1; transform: translateX(6px); } } /* Sur mobile il n'y a pas de survol : la preuve du chantier passe DANS la rangée. On ne perd jamais la photo. */ .ls-vignette { display: none; } @media (max-width: 760px) { .ls-item { grid-template-columns: 1fr auto; gap: 14px; margin-left: 0 !important; } .ls-num { display: none; } .ls-prix { grid-column: 2; grid-row: 1; } .ls-vignette { display: block; grid-column: 1 / -1; width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-top: var(--e-4); border-radius: var(--r-img); } } /* ── LA BANDE DE FAITS — remplace les 4 colonnes égales ───────────────────── */ /* Pleine largeur : c'est elle qui casse la grille au moins une fois (gate C51). */ .bande-faits { background: var(--sombre); color: #fff; padding-block: var(--e-7); margin-inline: calc(50% - 50vw); width: 100vw; } .bf-piste { max-width: var(--w-max); margin-inline: auto; padding-inline: var(--marge-bord); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-5) 0; } /* Les quatre faits n'ont PAS la même largeur : le premier est le plus fort. */ .bf-fait { margin: 0; padding-inline: var(--e-5); flex: 1 1 200px; font-size: var(--fs-small); color: rgb(255 255 255 / .78); border-left: 1px solid var(--ligne-nuit); } .bf-fait:first-child { padding-left: 0; border-left: 0; } .bf-fait--fort { flex: 1.6 1 260px; font-size: var(--fs-body); color: #fff; } .bf-fait--fort b { color: var(--accent); } /* le picto : vif et petit, jamais plus gros que la ligne qu'il illustre */ .bf-ico { display: block; width: 19px; height: 19px; margin-bottom: 7px; fill: var(--accent); flex: none; } .bf-fait--fort .bf-ico { width: 22px; height: 22px; } /* ⭐ 20/09/2026, Saadou : « sur telephone, cette partie-la je l'aimerais plus EN LIGNE qu'en colonne ; t'as qu'a reduire les distances avec les cotes ». Empiles, les quatre faits mangeaient 357 px, un fait par ligne. Deux colonnes, marges resserrees : la bande se lit d'un coup, comme une plaque de chiffres. */ /* le conteneur des tableaux legaux : ils defilent, la page non */ /* ⛔ MESURE du 20/09 : une URL ecrite en entier sortait la page de mentions legales a 408 px sur un ecran de 320. Une adresse n a pas de coupure naturelle : il faut l autoriser explicitement. */ main a { overflow-wrap: anywhere; } .tab-legale { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tab-legale table { min-width: 34rem; } /* ⭐ 20/09/2026, Saadou : « sur telephone, mets du 2 par 2, dans des petits carres, le truc en dessous de la section 1 ». Quatre cases egales, pas une vedette : c'est une plaque de chiffres, chacun porte le meme poids. */ @media (max-width: 760px) { .bf-piste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-inline: var(--e-4); align-items: stretch; } /* ⛔ MESURE du 20/09 : en `display: flex` + `column`, chaque morceau de contenu de la ligne devenait un item a part et le texte sortait un mot par ligne (« Visite et devis : » / « 0 » / « € »). Une carte de fait est un BLOC de texte, pas une colonne flex. */ .bf-fait, .bf-fait--fort { flex: none; grid-column: auto; border: 0; display: block; min-height: 92px; padding: 12px 13px; border-radius: var(--r-img); background: rgb(255 255 255 / .07); font-size: 14px; line-height: 1.26; color: #fff; } .bf-fait--fort b { color: var(--accent); } .bf-ico { width: 18px; height: 18px; margin-bottom: 7px; } } /* ── LA CHAÎNE DU PROCESS — remplace les 3 colonnes ───────────────────────── */ /* Un process est SÉQUENTIEL. Trois cases côte à côte disent « trois choses parallèles » : c'est un contresens, pas seulement une question de goût. */ /* ⚠️ `ol.chaine` et non `.chaine` : la ligne 20 pose `ul[class], ol[class] { margin: 0 }` — spécificité 0,1,1. Une simple classe (0,1,0) perdait, et la marge n'était jamais appliquée (constaté à la mesure, 17/08). */ ol.chaine { list-style: none; margin: clamp(56px, 8vw, 100px) 0 0; padding: 0; } .ch-etape { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 44px); padding-bottom: clamp(28px, 4vw, 56px); position: relative; } .ch-num { font-family: var(--f-chiffre); font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-h2); color: var(--accent); font-variant-numeric: tabular-nums; /* ⚠️ PAS la taille du H2 : un interligne serré sur un si grand corps déborde de sa boîte et percute le titre de section (vu au rendu 17/08). */ } /* le filet qui relie une étape à la suivante — c'est lui qui dit « chaîne » */ .ch-etape::before { content: ""; position: absolute; left: .62em; top: 1.9em; bottom: 0; width: 1px; background: var(--ligne); } .ch-etape:last-child::before { display: none; } .ch-corps h3 { margin: 0 0 var(--e-2); } .ch-corps p { margin: 0; color: var(--encre-2); max-width: 52ch; } .ch-delai { margin-top: var(--e-2) !important; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--encre) !important; } /* ============================================================================ 13. LES COMPOSANTS DE LA DÉMO PRO v4 — entrés dans le socle le 09/09/2026 ---------------------------------------------------------------------------- Validés par Saadou le 08/09/2026 (« les règles ne sont plus des hypothèses mais validées »), en production sur krescia.com/demos/plombier-pro/. Comme tout le reste de ce fichier : AUCUN choix esthétique ici, uniquement des tokens. Un site change d'allure en changeant `tokens.css`, jamais celui-ci. ============================================================================ */ /* ── LA BARRE DU HAUT — menu à gauche, marque au centre, actions à droite ─── */ /* Disposition arrêtée le 09/09 après trois essais. Ce qui l'a emporté : les deux CTA restent à droite quel que soit le nombre de pages, parce que le menu est UN bouton et non une rangée de liens qui pousse tout dehors. */ .barre { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ligne); } .barre__rang { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-4); padding-block: var(--e-3); } .barre__menu { justify-self: start; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--min-cible); padding: 0 var(--e-3); background: none; border: 1px solid var(--ligne); border-radius: var(--r-cta); cursor: pointer; color: inherit; font: inherit; font-size: var(--fs-small); font-weight: 650; } .barre__menu:hover { border-color: var(--marque); } .barre__traits { display: block; width: 16px; height: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .barre__marque { justify-self: center; display: inline-flex; align-items: center; gap: var(--e-3); text-decoration: none; text-align: left; } .barre__marque b { display: block; font-family: var(--f-titre); font-size: 20px; line-height: 1.1; letter-spacing: var(--ls-h2); } .barre__marque small { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--encre-2); } .barre__actions { justify-self: end; display: flex; align-items: center; gap: var(--e-3); } /* Un numéro de téléphone ne se coupe pas en deux lignes : c'est LE geste de la page. (Vu au rendu le 17/09/2026 sur Porteclose, à 1440.) */ .barre__actions .btn { white-space: nowrap; } /* ⛔ Le panneau est OUVERT par défaut : sans JS, les six liens restent dans la page, cliquables et suivis. C'est `reveal.js` qui pose `.est-replie`. */ .barre__panneau { border-top: 1px solid var(--ligne); } .barre__panneau > .wrap { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); padding-block: var(--e-5); } .barre__panneau a { text-decoration: none; font-weight: 650; padding: var(--e-3); border: 1px solid var(--ligne); border-radius: var(--r-bloc); transition: border-color var(--d-micro) var(--ease-sortie); } .barre__panneau a:hover { border-color: var(--marque); } .barre__panneau small { display: block; margin-top: var(--e-1); font-weight: 400; font-size: var(--fs-small); color: var(--encre-2); } .barre__panneau.est-replie { display: none; } /* ⛔ SUR TÉLÉPHONE, PAS DE MENU (décision Saadou, 09/09/2026). La barre du haut se réduit au blason et au nom. Le bouton Menu et son panneau disparaissent : sur un écran de 390 px, « Menu » + la marque + les deux CTA se marchaient dessus et la marque passait sur deux lignes (mesuré le 09/09). Ce qu'ils portaient est repris ailleurs, sans rien perdre : · l'ACTION → les boutons restent dans la barre du haut, qui est collante ; · la NAVIGATION → le pied de page, qui liste les mêmes pages. Un visiteur sur téléphone qui a une fuite ne cherche pas un menu : il appelle. */ @media (max-width: 900px) { .barre { position: static; } .barre__rang { grid-template-columns: 1fr; justify-items: start; } .barre__menu, .barre__panneau { display: none; } /* 20/09/2026 : la barre d'appel du bas n'existe plus, les actions reviennent ici. */ .barre__actions { display: flex; gap: var(--e-3); } .barre__actions .btn { min-height: 44px; } .barre__marque { justify-self: start; } } /* ── LE HERO À DEUX PORTES ────────────────────────────────────────────────── */ .hero-p { padding-block: var(--pad-section) 0; } .hero-p__haut { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end; } .estampille { display: inline-block; margin-bottom: var(--e-4); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--encre-2); border: 1px solid var(--ligne); border-radius: 999px; padding: var(--e-2) var(--e-4); } /* Le H1 dit le BÉNÉFICE ; le métier et la ville descendent d'un cran (règle du 07/09). Ils restent dans le

: Google lit la ligne entière. */ /* Le H1 du hero à deux portes n'est PAS le H1 pleine largeur : il partage sa ligne avec une photo, dans une colonne d'environ 570 px. À `--fs-titre` (168 px) il fait 997 px de haut et écrase tout (mesuré le 09/09). Il reste le plus grand texte de la page — juste au-dessus du H2 de section (76 px). */ .hero-p h1 { font-size: clamp(40px, 5.4vw, 78px); margin-bottom: var(--e-4); } .hero-p__l2 { display: block; margin-top: var(--e-3); font-size: var(--fs-h3); line-height: 1.15; letter-spacing: var(--ls-h2); color: var(--encre-2); } .hero-p__preuve { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: var(--e-4) 0 0; font-size: var(--fs-small); } .hero-p__preuve a { text-decoration: none; } .hero-p__preuve b { font-variant-numeric: tabular-nums; } .etoiles { color: var(--accent); letter-spacing: .08em; } .hero-p__photo { margin: 0; } /* ⚠️ `height: auto` OBLIGATOIRE avec `aspect-ratio` : les attributs width/height de l' (qu'on met pour réserver la place et éviter le décalage au chargement) sont des hints CSS et une hauteur explicite bat l'aspect-ratio. Sans cette ligne, la photo du hero sortait à 516x800 au lieu de 516x344 (mesuré le 09/09/2026). */ .hero-p__photo img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--r-img); } /* Les deux portes. Elles n'ont PAS la même surface : l'urgence est la plus sombre et la plus lourde, parce que c'est elle qui rapporte le jour même. */ .portes { display: grid; gap: var(--e-4); margin-block: clamp(28px, 4vw, 56px); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } /* ⚠️ `a.porte`, pas `.porte` : le gate refuse tout survol dont le sélecteur ne dit pas que la cible est cliquable (I36 / C40). Ce n'est pas une coquetterie du gate — un survol sur un bloc non cliquable promet un clic qui n'existe pas. Ici la porte EST un lien : on l'écrit. */ a.porte { display: block; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-bloc); text-decoration: none; min-height: var(--min-cible); transition: transform var(--d-micro) var(--ease-sortie); } a.porte:hover { transform: translateY(-2px); } .porte b { display: block; font-family: var(--f-titre); font-size: var(--fs-h3); line-height: 1.1; letter-spacing: var(--ls-h2); margin-bottom: var(--e-2); } .porte span { display: block; font-size: var(--fs-small); } .porte--urgence { background: var(--sombre); color: #fff; } .porte--urgence span { color: rgb(255 255 255 / .74); } .porte--projet { background: var(--surface); color: var(--encre); border: 1px solid var(--ligne); } .porte--projet span { color: var(--encre-2); } @media (max-width: 900px) { .hero-p__haut, .portes { grid-template-columns: 1fr; } } /* ── LA BANDE DE LOGOS QUI DÉFILE ─────────────────────────────────────────── */ /* Pleine largeur : elle participe à la casse de grille (gate C51). */ .logos { padding-block: var(--e-7); border-block: 1px solid var(--ligne); margin-inline: calc(50% - 50vw); width: 100vw; overflow: hidden; } .logos__titre { text-align: center; color: var(--encre-2); margin-bottom: var(--e-5); } .logos__piste { display: flex; width: max-content; } .logos__rail { display: flex; align-items: center; gap: clamp(40px, 6vw, 88px); padding-inline: clamp(20px, 3vw, 44px); animation: logos-defile 38s linear infinite; } .logos__rail img { height: 40px; width: auto; opacity: .58; filter: grayscale(1); } /* ⛔ AUCUN survol sur les logos : ils ne sont pas cliquables (I36, gate C40). Un élément qui réagit au survol promet un clic ; ici il n'y en a pas. Le seul survol admis est la PAUSE du défilement, qui n'est pas un affordance de clic mais le droit de lire (WCAG 2.2.2 : toute animation en boucle doit pouvoir s'arrêter). */ .logos__piste:hover .logos__rail { animation-play-state: paused; } @keyframes logos-defile { to { transform: translateX(-50%); } } /* I05 : le garde-fou global coupe déjà les animations en reduced-motion, mais une boucle infinie mérite d'être coupée explicitement — elle ne s'arrête jamais. */ @media (prefers-reduced-motion: reduce) { .logos__rail { animation: none; } } /* ── LA PHOTO PLEIN CADRE ─────────────────────────────────────────────────── */ /* Mesure du 05/09 : les sites qu'on a retenus donnent 45 à 90 % d'un écran à leur plus grande photo. `min-height: 78vh` est le plancher qui tient ça. */ .plein { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; min-height: 78vh; display: grid; overflow: hidden; margin-block: var(--pad-section); } .plein > img { grid-area: 1/1; width: 100%; height: 100%; object-fit: cover; } .plein__texte { grid-area: 1/1; position: relative; display: flex; align-items: end; padding-block: clamp(32px, 5vw, 72px); background: linear-gradient(to top, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .22) 42%, rgb(0 0 0 / 0) 72%); } /* Le voile tombait à 74 % de noir : sur une photo déjà sombre, on ne voyait plus le travail, et c'est justement l'image qui doit faire envie. Ramené à 62 % le 17/09/2026 ; le texte posé dessus reste au-dessus de 7:1, vérifié. */ .plein__texte > .wrap { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; width: 100%; } .plein__texte h2 { color: #fff; margin-bottom: var(--e-4); } .plein__chiffres { display: flex; flex-wrap: wrap; gap: var(--e-5) var(--e-7); } .plein__chiffres b { display: block; font-family: var(--f-chiffre); font-size: var(--fs-h3); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .plein__chiffres span { display: block; margin-top: var(--e-2); font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: rgb(255 255 255 / .74); } @media (max-width: 900px) { .plein__texte > .wrap { grid-template-columns: 1fr; } } /* Le dé-zoom à la révélation. ⚠️ PIÈGE DU 05/09 : la transformation se pose sur l'IMAGE, l'observateur regarde la SECTION. Une image rognée à 100 % n'entre jamais en intersection — les photos plein cadre de la v3 sont restées invisibles pour toujours. D'où `[data-reveal]` parent, jamais l'image seule. */ .js [data-reveal-item].rv-dezoom { opacity: 1; transform: scale(1.08); transition: transform 1.2s var(--ease-expo); } .js [data-reveal].is-in [data-reveal-item].rv-dezoom { transform: scale(1); } /* Le bouton clair — la seule variante posée SUR une photo. */ .btn--clair { background: var(--fond); color: var(--encre); border: 0; } .btn--clair:hover { background: #fff; } /* ── LES CHANTIERS DATÉS ET SITUÉS ────────────────────────────────────────── */ /* Volontairement PAS des cartes égales (gate C52) : pas de fond, pas de bordure, la photo et deux lignes. Le lieu est en gras — c'est lui la preuve. */ /* LA MOSAÏQUE, PAS HUIT CADRES IDENTIQUES. Huit tuiles 4:3 alignées sont le marqueur de gabarit que la règle D4 vise, et la wireframe Porteclose du 17/09 demandait explicitement une « mosaïque irrégulière ». Le premier chantier prend deux colonnes et deux rangs : c'est la preuve principale, elle a la place de l'être. Les autres alternent portrait et paysage. */ .chantiers { display: grid; gap: var(--e-5); margin-top: var(--e-7); grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; grid-auto-flow: dense; align-items: start; } .chantiers figure img { height: auto; aspect-ratio: 4/3; object-fit: cover; } .chantiers > figure:first-child { grid-column: span 2; grid-row: span 2; } .chantiers > figure:first-child img { aspect-ratio: 1 / 1; } .chantiers > figure:nth-child(4) img, .chantiers > figure:nth-child(7) img { aspect-ratio: 3 / 4; } /* Le dernier prend la place qui reste : une mosaique ne finit pas sur un trou. */ .chantiers > figure:last-child { grid-column: span 2; } .chantiers > figure:last-child img { aspect-ratio: 16 / 9; } @media (max-width: 1100px) { .chantiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .chantiers figcaption { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: space-between; } .chantiers figcaption b { color: var(--encre); } /* ── LA RÈGLE DE LA MAISON — les engagements ──────────────────────────────── */ /* Une chaîne de gestes, pas quatre colonnes. Le mot-clé sort dans la marge : c'est ce qui rend la liste lisible en diagonale. */ .engage { margin-top: var(--e-7); border-top: 1px solid var(--ligne); } .engage > div { display: grid; grid-template-columns: minmax(0, 148px) minmax(0, 1fr); gap: var(--e-3) var(--e-6); padding-block: clamp(20px, 2.6vw, 36px); border-bottom: 1px solid var(--ligne); } .engage > div > b { font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); padding-top: var(--e-2); } .engage h3 { margin: 0 0 var(--e-2); } .engage p { margin: 0; color: var(--encre-2); max-width: 62ch; } @media (max-width: 760px) { .engage > div { grid-template-columns: 1fr; } } /* ── L'HÉRITAGE, EN RÉCIT ─────────────────────────────────────────────────── */ .heritage { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } .heritage__photo { position: relative; overflow: hidden; border-radius: var(--r-img); } .heritage__photo img { height: auto; aspect-ratio: 3/2; object-fit: cover; } .heritage__badge { position: absolute; left: var(--e-4); bottom: var(--e-4); margin: 0; padding: var(--e-2) var(--e-4); background: var(--sombre); color: #fff; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; border-radius: var(--r-bloc); } .heritage p { max-width: 62ch; margin-bottom: var(--e-4); } @media (max-width: 900px) { .heritage { grid-template-columns: 1fr; } } /* ── LA ZONE — vraie carte, rayon dessiné ─────────────────────────────────── */ .zone-c { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .zone-c__carte { position: relative; aspect-ratio: 1; border-radius: var(--r-img); overflow: hidden; border: 1px solid var(--ligne); } .zone-c__carte > img { width: 100%; height: 100%; object-fit: cover; } .zone-c__carte > svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* ⭐ 20/09/2026, Saadou : « fais une animation avec la zone d'intervention, genre le rayon qui grossit jusqu'à atteindre ces 30 km ». Le cercle part du point de Civry et s'ouvre au fil du scroll ; le compteur suit en kilomètres ; et chaque commune de la liste s'allume quand le rayon l'a rejointe. C'est le seul mouvement de la section, et il dit exactement ce que la section raconte : jusqu'où il se déplace. ⚠️ `--rayon` est posé par reveal.js entre 0 et 1. Sans JS il vaut 1 : le cercle est dessiné en entier, la carte reste juste. */ .zone-c__rayon { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 14 9; stroke-linecap: round; transform-origin: center; transform-box: fill-box; } .js .zone-c__rayon { transform: scale(var(--rayon, 1)); opacity: calc(.15 + var(--rayon, 1)); } /* le compteur, posé sur la carte */ .zone-c__km { position: absolute; z-index: 2; left: 50%; top: 4.6%; transform: translateX(-50%); margin: 0; display: inline-flex; align-items: baseline; gap: .34em; padding: 7px 17px; border-radius: 999px; /* ⛔ gate C21 : `--accent` peut etre un bleu CLAIR (chez Porteclose #7CC4F5, soit 1,90:1 avec du blanc). Une pastille porte du texte : elle prend la couleur de MARQUE, pas l'accent. */ background: var(--marque); color: #fff; white-space: nowrap; font-size: var(--fs-small); font-weight: 650; line-height: 1.1; box-shadow: 0 2px 10px rgb(0 0 0 / .18); } .zone-c__km b { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; font-size: 1.22em; font-weight: 800; } /* les communes s'allument quand le rayon les a rejointes. `--part` est la part du temps de route le plus long : c'est donc l'ordre dans lequel le cercle les touche. */ /* ⚠️ MESURE du 20/09 : la commune la plus lointaine a `--part: 1`. Avec une difference nue, elle restait a 0,34 meme rayon plein. On ajoute la rampe (4 %) DANS la soustraction : la commune s'allume pile quand le rayon l'atteint. */ .js .zone-c__temps li { opacity: clamp(.34, calc(.34 + (var(--rayon, 1) - var(--part, 0) + .04) * 18), 1); transition: opacity .28s linear; } @media (prefers-reduced-motion: reduce) { .js .zone-c__rayon { transform: none; opacity: 1; } .js .zone-c__temps li { opacity: 1; } } /* Les communes : une pastille + son nom, posées en pourcentages de la carte. */ .zone-c__pt { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: var(--e-2); font-size: var(--fs-small); font-weight: 650; white-space: nowrap; } .zone-c__pt::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--encre); box-shadow: 0 0 0 3px var(--fond); } .zone-c__pt--hub::before { width: 12px; height: 12px; background: var(--accent); } /* Une carte de 370 px ne porte pas neuf etiquettes lisibles. Sous 760 px on ne garde que le point de depart et les extremes ; ecrire plus petit tomberait sous le plancher de lisibilite (gate C20). Reglee le 17/09/2026. */ @media (max-width: 760px) { .zone-c__pt--large { display: none; } } .zone-c__temps { list-style: none; padding: 0; margin: var(--e-5) 0 0; display: grid; gap: 0; } .zone-c__temps li { display: flex; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-3); border-bottom: 1px solid var(--ligne); max-width: none; font-size: var(--fs-small); } .zone-c__temps b { font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .zone-c { grid-template-columns: 1fr; } } /* ── LE SIMULATEUR D'AIDES ────────────────────────────────────────────────── */ .simu { margin-top: var(--e-7); padding: clamp(20px, 3vw, 40px); background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-bloc); } .simu__choix { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } /* ⚠️ Un