:root{ /* Palette 3 — les noms metier d abord, les alias historiques ensuite. */ --ivoire:#F7F5F1; --sable:#EDE7DE; --anthracite:#14110F; --noir:#0A0908; --gris:#5F5A52; --trait:#DED8CE; --or:#8A6A34; /* Alias : des gabarits ecrits avant le 31/08 lisent encore ces noms. */ --blanc:var(--ivoire); --brume:var(--sable); --encre:var(--anthracite); --nuit:var(--noir); --accent:var(--or); /* Deux familles : serif a fort contraste pour les titres, sans neutre pour la lecture. */ --ft:"Instrument Serif",Georgia,"Times New Roman",serif; --f:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --fd:"Instrument Serif",Georgia,"Times New Roman",serif; --colonne:1240px; --lecture:36rem; } *,*::before,*::after{box-sizing:border-box;min-width:0} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--blanc);color:var(--encre);font-family:var(--f); font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto;display:block} a{color:inherit} /* ⚠️ SERIF A FORT CONTRASTE POUR LES TITRES, SANS NEUTRE POUR LE CORPS. Le brief du user : la typographie porte davantage le positionnement que la palette. Instrument Serif est didone, donc contraste — mais l interlettrage negatif d une grotesque lui va mal : on le remet a zero, sinon les deliés se touchent. */ h1,h2,h3,h4{font-family:var(--ft);font-weight:400;line-height:1.08;margin:0;letter-spacing:-.005em} h1{letter-spacing:-.012em} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} /* ============================================================================ SIMULATEUR DIAGLUX — styles propres, prefixe dl- pour ne rien croiser. ============================================================================ ATTENTION : le prefixe est dl- et non sim-, qui appartient au simulateur partage des 15 autres sites. Deux prefixes distincts garantissent qu aucune regle ne fuit d un site a l autre, meme si les deux feuilles se retrouvaient un jour sur la meme page. ATTENTION : padding-top ou padding-bottom, jamais le raccourci padding a deux valeurs sur un conteneur — regle du projet, deja payee ailleurs. */ .dl-barre{height:2px;background:var(--trait);margin-bottom:10px} .dl-barre-in{height:2px;background:var(--anthracite);transition:width .3s ease} .dl-etape{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);margin-bottom:26px} .dl-q{font-family:var(--ft);font-size:clamp(1.5rem,4.4vw,2.05rem);line-height:1.12;margin-bottom:10px;outline:none} .dl-sous{color:var(--gris);margin-bottom:24px;max-width:34rem} .dl-opts{display:grid;gap:10px;margin-bottom:20px} @media(min-width:640px){.dl-opts{grid-template-columns:repeat(2,1fr)}} .dl-opt{display:flex;align-items:center;min-height:62px;padding-left:20px;padding-right:20px; background:transparent;border:1px solid var(--trait);color:var(--anthracite); font-family:var(--f);font-size:1rem;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease} /* ⚠️ LE CADRE EST CE QUI FAIT LIRE L OUTIL COMME UN OUTIL. Pose a plat sur le fond de page, le simulateur se confondait avec l article qui le suit : le user est arrive dessus sans comprendre qu il fallait cliquer. Un fond distinct, un filet, du souffle — et la separation franche avec le texte qui vient apres. */ /* ============================================================================ MENU MOBILE — sans JavaScript, ferme par defaut. ============================================================================ Voir le commentaire de l en-tete dans render-prestige.mjs : sur telephone, il n y avait AUCUNE navigation. Ce menu la retablit sur la plateforme majoritaire. Il disparait au-dela de 1000 px, ou la navigation horizontale prend le relais. */ .pr-cta-long{display:none} @media(min-width:600px){.pr-cta-court{display:none}.pr-cta-long{display:inline}} .pr-menu{margin-left:14px;position:relative} @media(min-width:1000px){.pr-menu{display:none}} .pr-menu>summary{display:flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none; border:1px solid var(--trait);color:var(--encre);font-size:.75rem; letter-spacing:.12em;text-transform:uppercase} .pr-menu>summary::-webkit-details-marker{display:none} .pr-menu>summary:active{background:var(--sable)} .pr-menu[open]>summary{background:var(--encre);color:var(--blanc);border-color:var(--encre)} /* La liste se pose SOUS l en-tete, pleine largeur : sur un ecran etroit, un menu flottant de 200 px oblige a viser. Pleine largeur, chaque entree fait 52 px. */ /* ⚠ MEME PIEGE QUE LE PIED : on ne s appuie pas sur le masquage natif du
. Les liens du menu etaient RENDUS en permanence, en position absolue, superposes au contenu. La sonde tactile a signale une cible du menu a 1 px d une option du simulateur — c est-a-dire un doigt qui pouvait toucher l un pour l autre. Le masquage se declare. */ .pr-menu:not([open]) .pr-menu-liste{display:none} .pr-menu-liste{position:absolute;right:0;top:calc(100% + 10px);z-index:60; min-width:min(78vw,320px);display:flex;flex-direction:column; background:var(--ivoire);border:1px solid var(--trait); box-shadow:0 12px 30px rgba(10,9,8,.10)} .pr-menu-liste a{display:flex;align-items:center;min-height:52px;padding:0 18px; color:var(--encre);text-decoration:none;font-size:.9375rem; border-bottom:1px solid var(--trait)} .pr-menu-liste a:last-child{border-bottom:none;background:var(--sable);font-weight:500} .pr-menu-liste a:active{background:var(--sable);color:var(--or)} .pr-devis-tete{max-width:820px} .pr-devis-sous{margin-top:14px;color:var(--gris);max-width:44rem} .pr-devis-cadre{margin-top:28px;padding:26px 20px;background:var(--ivoire); border:1px solid var(--trait);box-shadow:0 1px 0 var(--trait)} @media(min-width:700px){.pr-devis-cadre{padding:38px 40px}} /* Le texte explicatif ne doit pas commencer dans la foulee : il repond a des objections, il vient APRES la tentative, pas a cote d elle. */ .pr-devis-tete + .pr-sec{margin-top:18px;border-top:1px solid var(--trait);padding-top:56px} /* ============================================================================ RETOUR AU TOUCHER — la moitie manquante, et c est celle qui compte ici. ============================================================================ ⚠️ MESURE DU 01/09 : 20 elements interactifs portaient un etat :hover, ZERO un etat :active. Or le survol n existe pas sur telephone. Sur la plateforme qui apporte la majorite du trafic, chaque bouton et chaque lien ne donnait donc AUCUN retour au toucher : on tape, rien ne bouge, et on retape. Le user, 01/09 : « arrete avec tes effets, tu l optimises pour l ordinateur ». Il avait raison, et le defaut etait plus large que le simulateur. ⚠️ REGLE POUR LA SUITE : tout element qui recoit un :hover doit recevoir un :active. audit-code-diagluxe.mjs le verifie desormais. */ /* Le halo gris par defaut d Android/iOS deborde des boites et fait « casse ». On le supprime pour le remplacer par un retour qu on maitrise. */ a,button,[role=button]{-webkit-tap-highlight-color:transparent} /* Options du simulateur : la cible s enfonce visiblement. */ .dl-opt:active{background:var(--sable);border-color:var(--anthracite);transform:scale(.995)} /* Le chevron avance AU TOUCHER, pas seulement au survol : sur telephone c est le seul moment ou il peut confirmer que le tap a ete pris. */ .dl-opt:active .dl-opt-fl{transform:translateX(5px);color:var(--anthracite)} .dl-cta:active{background:var(--noir);transform:scale(.99)} .dl-retour:active{color:var(--anthracite)} /* Boutons du site. */ .pr-bouton:active{background:var(--noir);border-color:var(--noir);color:var(--blanc);transform:scale(.99)} .pr-bouton-clair:active{background:var(--sable);border-color:var(--encre)} .pr-hdr-cta:active{background:var(--noir)} /* Liens de navigation et de listes. */ .pr-nav a:active,.pr-fil a:active,.pr-liste a:active,.pr-marque:active{color:var(--or)} .pr-pied a:active,.pr-pied-courriel:active{color:var(--blanc)} .pr-communes a:active,.pr-fille:active{background:var(--sable)} /* Liens du corps de texte et des tableaux : le seul retour possible au toucher est la couleur du soulignement, mais il faut qu il existe. */ .pr-texte a:active,.pr-tbl td a:active{text-decoration-color:var(--or);color:var(--or)} .pr-fille:active b{color:var(--or)} /* ⚠️ LE MOUVEMENT AU SURVOL NE DOIT JAMAIS PORTER SEUL UNE INFORMATION. Le chevron est VISIBLE AU REPOS — c est lui qui dit « ca se clique et ca avance ». Son deplacement au survol est un bonus pour l ordinateur, pas le signal. */ @media(hover:none){ /* Sur un ecran tactile, les etats de survol peuvent rester « colles » apres un tap. On les neutralise pour que seul :active parle. */ .dl-opt:hover{border-color:var(--trait);background:transparent} .pr-bouton:hover{background:var(--encre);color:var(--blanc)} .pr-bouton-clair:hover{background:transparent;color:var(--encre)} } .dl-opt-t{flex:1 1 auto} /* ⚠️ LE CHEVRON DIT DEUX CHOSES : que ca se clique, et que ca fait AVANCER. Sans lui, les options se lisaient comme des encadres d information — le user est arrive sur la page sans comprendre qu il fallait cliquer. Il est discret au repos et se deplace au survol : le mouvement est ce qui signale l interactivite, pas la couleur. */ .dl-opt-fl{flex:0 0 auto;margin-left:14px;color:var(--gris);font-size:1.05rem;line-height:1; transition:transform .18s ease,color .18s ease} .dl-opt:hover .dl-opt-fl{transform:translateX(4px);color:var(--anthracite)} /* Choix multiple : une case, pas une fleche — ici le clic selectionne sans avancer. */ .dl-opt-case{flex:0 0 auto;margin-left:14px;width:18px;height:18px;border:1px solid var(--trait); border-radius:2px;transition:border-color .15s ease,background .15s ease} .dl-opt-on .dl-opt-case{border-color:var(--anthracite);background:var(--anthracite)} .dl-opt-on .dl-opt-case::after{content:"";display:block;width:5px;height:9px;margin:2px auto 0; border:solid var(--ivoire);border-width:0 2px 2px 0;transform:rotate(45deg)} .dl-opt:hover{border-color:var(--anthracite);background:var(--ivoire)} .dl-opt-on{border-color:var(--anthracite);background:var(--sable)} /* La consigne : plus discrete que la question, plus lisible qu une note de bas de page. */ .dl-consigne{display:block;margin-top:6px;font-size:.8125rem;letter-spacing:.02em;color:var(--anthracite)} .dl-opt-on::after{content:"";margin-left:auto;width:8px;height:8px;background:var(--or);border-radius:50%} .dl-champs{display:grid;gap:16px;margin-bottom:18px;max-width:30rem} .dl-champs label{display:block;font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)} .dl-champs input{display:block;width:100%;margin-top:7px;min-height:52px;padding-left:14px;padding-right:14px; background:var(--ivoire);border:1px solid var(--trait);color:var(--anthracite); font-family:var(--f);font-size:1.0625rem} .dl-champs input:focus{outline:2px solid var(--anthracite);outline-offset:-2px;border-color:var(--anthracite)} /* Aplat unique de l etape : anthracite sur ivoire, 17,3:1 mesure. */ .dl-cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px; padding-left:30px;padding-right:30px;background:var(--anthracite);color:var(--ivoire);border:none; font-family:var(--f);font-size:1rem;letter-spacing:.06em;cursor:pointer;transition:background .18s ease} .dl-cta:hover{background:var(--noir)} .dl-cta[disabled]{opacity:.55;cursor:default} /* ⚠️ 44 px, ET C EST LE BOUTON LE PLUS FACILE A OUBLIER. « Retour » etait a 46x19 px, sur les cinq etapes du simulateur — c est-a-dire sur le seul parcours du site qui produit une demande de devis. Il n apparait dans aucun fichier HTML : il est ecrit par le script au clic, donc invisible a tout controle qui ne lit que le rendu initial. C est pour cette raison que verif-tactile-diaglux.mjs parcourt le simulateur ecran par ecran. Il reste un CTA secondaire — souligne, sans aplat : seule sa surface change. */ .dl-retour{display:inline-flex;align-items:center;min-height:44px;margin-top:10px; background:none;border:none;padding:0;color:var(--gris);font-family:var(--f); font-size:.9375rem;text-decoration:underline;cursor:pointer} /* ⚠️ RANGEE DE NAVIGATION — correction du chevauchement releve par le user le 01/09. « Continuer » et « Retour » se recouvraient entierement a l etape 5 : le retour, passe en inline-flex pour ses 44 px tactiles, se posait SUR le bouton precedent. Un conteneur en space-between, avec un span de remplissage quand il n y a pas de retour, garantit deux choses : aucun recouvrement possible, et le bouton principal TOUJOURS au meme endroit d une etape a l autre — ce qui compte autant, car un bouton qui se deplace d une etape a l autre fait hesiter. */ .dl-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px} .dl-nav .dl-cta{flex:0 0 auto} .dl-nav .dl-retour{margin-top:0} @media(max-width:479px){ /* Sur petit ecran le bouton principal prend toute la largeur restante : c est la cible la plus grande possible, et le retour reste atteignable sans etre mis en avant. */ .dl-nav{gap:12px} .dl-nav .dl-cta{flex:1 1 auto} } /* Mention « facultatif » : elle doit se lire comme une permission, pas comme une etiquette. */ .dl-fac{font-weight:400;text-transform:none;letter-spacing:0;color:var(--gris);font-size:.8125rem} /* Champ en erreur : le message seul ne suffit pas, il faut designer le champ. */ .dl-champ-ko{border-color:#9B2C2C !important;outline:2px solid #9B2C2C;outline-offset:-2px} .dl-err{margin-top:12px;color:#9B2C2C;font-size:.9375rem} .dl-legal{margin-top:16px;font-size:.8125rem;color:var(--gris);max-width:32rem} .dl-ok{font-family:var(--ft);font-size:clamp(1.5rem,4.4vw,2.05rem);line-height:1.12;margin-bottom:10px} .dl-liste{counter-reset:d;margin-top:8px;margin-bottom:22px} .dl-liste li{counter-increment:d;position:relative;padding-left:38px;padding-top:14px;padding-bottom:14px; border-top:1px solid var(--trait)} .dl-liste li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:16px; font-family:var(--ft);font-size:.875rem;color:var(--or)} .dl-liste strong{display:block;font-weight:500} .dl-liste span{display:block;margin-top:4px;color:var(--gris);font-size:.9375rem} /* Heros court : les sous-pages n ont pas besoin de la hauteur de l accueil. */ .pr-heros-court img{max-height:38vh;object-fit:cover} @media(min-width:900px){.pr-heros-court img{max-height:44vh}} /* Liste des communes d un hub — une liste, pas une grille de vignettes. */ /* ⚠️ LES ATTRIBUTS width ET height SONT DEJA SUR LA BALISE (voir figure() dans prestige-visuel.mjs) : la boite est reservee avant le chargement, rien ne saute. aspect-ratio ne sert que de secours si une image future arrivait sans dimensions. ⚠️ AUCUN BACKTICK DANS CE FICHIER : la feuille entiere vit dans un litteral gabarit, un seul accent grave la referme et casse le build. C est ce que verifie verif-css-backtick.mjs. */ .pr-bref{margin-top:14px;margin-bottom:28px} .pr-bref dt{padding-top:12px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)} .pr-bref dd{margin:0;padding-bottom:12px;border-bottom:1px solid var(--trait);color:var(--anthracite)} .pr-fig{margin:0} .pr-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} /* ⚠ PROSE = 16 px MINIMUM SUR TELEPHONE, y compris dans les legendes, les mentions et la signature. Elles portent des PHRASES, pas des etiquettes : on les lit, donc elles fatiguent si elles sont petites. Mesure du 01/09 : legendes a 14 px, signature a 13. Une etiquette courte peut descendre a 12 px, une phrase non. */ .pr-fig figcaption{margin-top:10px;font-size:1rem;line-height:1.5;color:var(--gris)} .pr-liste{margin-top:14px;margin-bottom:24px} /* ⚠️ .pr-liste EST UNE LISTE A FILETS, PAS A PUCES — et elle vit dans .pr-texte, qui pose un tiret en ::before sur tout
  • . Les deux se cumulaient : le tiret restait a left:0 et top:.78em, calcule depuis le bord du
  • , lequel a maintenant 9px de rembourrage haut. Resultat visible sur la capture du user le 01/09 : un tiret flottant en haut a gauche de chaque ligne, detache de son texte, a 20px de lui. Le filet EST le separateur de cette liste. Le tiret est donc annule ici, pas deplace : deux marqueurs pour une meme ligne, c est un de trop. */ .pr-liste li{padding-top:9px;padding-bottom:9px;border-bottom:1px solid var(--trait);color:var(--gris)} .pr-texte .pr-liste li{padding-left:0;margin-bottom:0} .pr-texte .pr-liste li::before{content:none} .pr-liste a{color:var(--anthracite);text-decoration:none;border-bottom:1px solid var(--or)} .pr-liste a:hover{border-bottom-color:var(--anthracite)} /* Questions frequentes — visibles, pas seulement balisees. */ .pr-questions{margin-top:44px;padding-top:32px;border-top:1px solid var(--trait)} .pr-questions > h2{margin-bottom:22px} .pr-question{padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--trait)} .pr-question h3{font-family:var(--ft);font-size:1.1875rem;line-height:1.25;margin-bottom:8px} .pr-question p{color:var(--gris)} /* Date de publication — signal d autorite, discret. */ /* ⚠️ CETTE DATE EST DANS LE PIED, DONC SUR FOND NOIR (#0A0908) — mesure, pas supposition. --gris n y donnait que 2,91:1, sous le seuil AA de 4,5, sur les 68 pages. Ma premiere correction a mis --encre : anthracite sur noir, soit 1,06:1, c est-a-dire INVISIBLE. J avais suppose un fond clair au lieu de le mesurer, et j ai transforme un defaut de lisibilite en texte inexistant. ⚠️ NE JAMAIS CHOISIR UNE COULEUR DE TEXTE SANS AVOIR MESURE SON FOND EFFECTIF. Ici : blanc a 72 % donne 10:1, et s aligne sur les autres liens du pied. La date est une information de confiance au sens de la reference E-E-A-T : illisible, elle ne vaut pas mieux qu absente. */ .pr-date{font-size:1rem;color:rgba(255,255,255,.72);margin-bottom:6px} /* Petit code technique cite dans les textes legaux. */ .pr-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em; background:var(--sable);padding:1px 5px;border-radius:2px} /* --- conteneurs ------------------------------------------------------------- */ .pr-col{max-width:var(--colonne);margin:0 auto;padding:0 22px} @media(min-width:900px){.pr-col{padding:0 48px}} .pr-sec{padding:56px 0} @media(min-width:900px){.pr-sec{padding:96px 0}} /* ⚠️ DECALAGE DE NOMMAGE TROUVE LE 01/09 — la feuille disait brume, les gabarits ecrivent papier. Resultat : sur 28 pages, des sections censees alterner de fond ne changeaient pas, et la regle brume ne servait plus rien. Personne ne voit ce defaut dans le CSS source ni dans le HTML : il n apparait qu en croisant les DEUX, ce que fait desormais audit-code-diagluxe.mjs. Le nom des gabarits fait foi — il est employe 3 fois, contre 0 pour l ancien. */ .pr-sec-papier{background:var(--brume)} /* Mention discrete : delai, precision, renvoi legal. Meme famille que .pr-label mais en casse normale, car ce sont des phrases et non des etiquettes. ⚠️ Elle etait employee 10 fois dans les gabarits SANS AUCUNE REGLE : ces phrases sortaient a la taille du corps de texte, ce qui leur donnait un poids qu elles ne doivent pas avoir. */ .pr-mention{font-size:1rem;line-height:1.6;color:var(--gris);margin:14px 0 0} .pr-mention a{color:var(--encre);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--trait)} /* En-tete de section : une etiquette au-dessus d un titre. */ .pr-sec-tete{margin-bottom:30px} .pr-sec-tete h2{margin:8px 0 0} /* --- wordmark : capitales espacees, aucun symbole --------------------------- C est le choix du user, et celui de tout le secteur. Un logo en texte pur est net a toutes les tailles, ne peut pas mal vieillir, et surtout ne peut pas etre confondu avec un symbole genere. Le seul reglage qui compte est l interlettrage. */ /* ⚠️ 44 px DE HAUTEUR CLIQUABLE, PAS 21. Mesure du 31/08 au format 390x844 : le logo offrait une cible de 88x21 px en en-tete et 46x15 px en pied. Le seuil des Human Interface Guidelines d Apple et de Material Design est 44x44 ; le WCAG 2.2 (2.5.8) exige 24x24 au minimum. La majorite du trafic vient du telephone : un lien de retour a l accueil qu on rate au pouce est une friction sur chaque page du site. Le rembourrage vertical ne change RIEN a l apparence — la boite grandit, pas le texte. */ .pr-marque{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem; font-weight:500;letter-spacing:.34em;text-transform:uppercase;text-decoration:none; color:var(--encre);white-space:nowrap} .pr-marque:hover{color:var(--accent)} /* --- en-tete ---------------------------------------------------------------- */ /* ⚠ EN-TETE COLLANT — demande du user du 01/09, et le raisonnement est juste : le bouton de devis doit rester atteignable au moment ou l envie nait, pas au moment ou l on remonte le chercher. Sur telephone, remonter en haut d une page de 3 000 px est un abandon deguise. ⚠ LA REGLE DE L APLAT UNIQUE N EST PAS ROMPUE : verif-cta-diaglux compte les aplats PAR SECTION du corps, apres . Le bouton de l en-tete est du mobilier persistant, pas un element de la section lue — il ne se dispute pas l attention avec le CTA du corps. backdrop-filter avec repli opaque : sans le repli, un navigateur qui ne le gere pas laisserait le texte de la page traverser l en-tete. */ .pr-hdr{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--trait); background:var(--blanc);background:color-mix(in srgb,var(--blanc) 92%,transparent); -webkit-backdrop-filter:saturate(1.6) blur(10px);backdrop-filter:saturate(1.6) blur(10px)} @supports not (backdrop-filter:blur(1px)){.pr-hdr{background:var(--blanc)}} .pr-hdr-in{display:flex;align-items:center;gap:20px;min-height:72px} .pr-nav{display:none;margin-left:auto;gap:30px} .pr-nav a{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none; color:var(--gris);padding:8px 0} .pr-nav a:hover{color:var(--encre)} /* ⚠️ UN SEUL APLAT PAR ECRAN — regle du brief, et c est elle qui fait converger l attention (effet Von Restorff). Le bouton de l en-tete est present sur toutes les pages : c est donc LUI l aplat, et les CTA de corps de page restent en lien souligne. Anthracite sur ivoire : 17,3:1 mesure, tres au-dessus du seuil AA de 4,5:1. */ .pr-hdr-cta{margin-left:auto;display:inline-flex;align-items:center;min-height:44px; padding:0 20px;background:var(--anthracite);color:var(--ivoire);font-size:.8125rem; letter-spacing:.08em;text-transform:uppercase;text-decoration:none; transition:background .18s ease} .pr-hdr-cta:hover{background:var(--noir)} @media(min-width:1000px){.pr-nav{display:flex}.pr-hdr-cta{margin-left:30px}} /* --- heros photographique --------------------------------------------------- L image porte la page. Le texte passe dessus, sur un voile sombre qui garantit le contraste quelle que soit la photographie — une legende blanche sur un ciel clair serait illisible. */ .pr-heros{position:relative;background:var(--nuit)} .pr-heros img{width:100%;height:clamp(340px,58vh,620px);object-fit:cover;opacity:.86} .pr-heros-txt{position:absolute;inset:auto 0 0 0;padding:0 0 38px; background:linear-gradient(to top,rgba(12,12,14,.82),rgba(12,12,14,.34) 55%,transparent)} .pr-heros-txt .pr-col{color:var(--blanc)} .pr-heros h1{color:var(--blanc);font-size:clamp(1.9rem,5.2vw,3.4rem);font-weight:400; letter-spacing:-.02em;max-width:20ch} .pr-heros .pr-label{color:rgba(255,255,255,.78)} /* Le credit photo est masque sur telephone : place sous le titre, il se lisait comme une ligne de texte de la page et non comme une legende. Sur grand ecran il a la place de se tenir a l ecart, dans l angle. */ .pr-heros-legende{display:none} @media(min-width:900px){.pr-heros-legende{display:block;position:absolute;right:48px;bottom:12px; font-size:.6875rem;letter-spacing:.08em;color:rgba(255,255,255,.45)}} /* --- etiquettes et titres --------------------------------------------------- L echelle est le seul ornement : de tres petites capitales tres espacees contre de grands titres de graisse moyenne. C est ce qui distingue une page tenue d une page decoree. */ /* 11px en capitales espacees, c est lisible a l ecran d un bureau et penible sur un telephone tenu a bout de bras. 12,5px reste une etiquette, sans la fatigue. */ .pr-label{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase; color:var(--gris);margin:0 0 16px} .pr-titre{font-size:clamp(1.75rem,4.4vw,2.9rem);font-weight:400;margin:0 0 20px; letter-spacing:-.02em;text-wrap:balance} .pr-chapeau{font-size:1.125rem;line-height:1.58;color:var(--gris);max-width:40rem} .pr-ouv{padding-top:44px} /* ⚠️ LE FIL D ARIANE VISE 24 px, PAS 44 — ET LA DIFFERENCE EST RAISONNEE. Le WCAG 2.2 fixe le minimum a 24x24 (critere 2.5.8, niveau AA) et prevoit une exception pour les cibles EN LIGNE, prises dans un flux de texte : c est exactement ce qu est un fil d Ariane. Le porter a 44 px doublerait la hauteur de la ligne sur chaque page pour un element de reperage, pas d action. On tient donc le minimum normatif sans deformer la mise en page — les liens D ACTION, eux, restent a 44. Mesure avant correction : 15 px de haut, sous le minimum AA. */ .pr-fil{font-size:.75rem;color:var(--gris);padding-top:14px} /* min-width autant que min-height : « Var » ne faisait que 19 px de large. Le WCAG mesure la plus petite dimension de la cible, pas seulement sa hauteur. */ .pr-fil a{display:inline-flex;align-items:center;justify-content:center;min-height:24px; min-width:24px;color:var(--gris);text-decoration:none} .pr-fil a:hover{color:var(--encre);text-decoration:underline} .pr-fil span[aria-current]{color:var(--encre)} /* --- chiffres du marche ----------------------------------------------------- Ils viennent de DVF et personne d autre ne les affiche : ils sont donc traites comme du contenu. Pas de cadre, pas de fond — un simple alignement et beaucoup d air. */ /* ⚠️ minmax(0,1fr) ET NON 1fr. Une piste de grille en 1fr a min-width:auto : elle s elargit pour contenir son mot le plus long, meme si le conteneur est plus etroit. Le bloc chiffres affiche aussi la COMMUNE LA PLUS ACTIVE, donc un nom, et a 2,125rem « Paris 16e Arrondissement » demandait 223px dans une cellule de 159 : la page debordait de 59px sur 390px de large. minmax(0,...) autorise la piste a retrecir, overflow-wrap coupe le mot plutot que la mise en page. */ .pr-chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 28px;margin:40px 0 0; padding-top:34px;border-top:1px solid var(--trait)} @media(min-width:760px){.pr-chiffres{grid-template-columns:repeat(4,minmax(0,1fr))}} .pr-chiffre b{display:block;font-size:2.125rem;font-weight:400;line-height:1.05;overflow-wrap:anywhere;hyphens:auto; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pr-chiffre span{display:block;font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase; color:var(--gris);margin-top:12px;line-height:1.5} .pr-source{font-size:1rem;color:var(--gris);margin:22px 0 0;line-height:1.6} .pr-source a{color:var(--gris)} /* --- corps de texte --------------------------------------------------------- */ .pr-texte{max-width:var(--lecture);font-size:1.0625rem;color:var(--encre)} .pr-texte h2{font-size:clamp(1.375rem,2.8vw,1.75rem);font-weight:500;margin:52px 0 16px} .pr-texte h2:first-child{margin-top:0} .pr-texte h3{font-size:1.0625rem;font-weight:500;margin:32px 0 10px} .pr-texte p{margin:0 0 19px} .pr-texte p:last-child{margin-bottom:0} .pr-texte strong{font-weight:500;color:var(--encre)} .pr-texte a{color:var(--encre);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--trait)} .pr-texte a:hover{text-decoration-color:var(--encre)} .pr-texte ul{margin:0 0 19px} .pr-texte li{position:relative;padding-left:20px;margin-bottom:11px} /* La puce sort du flux : un li commencant par un strong ne doit pas devenir un element flex, defaut deja rencontre sur les guides du national. */ .pr-texte li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:1px; background:var(--gris)} .pr-exergue{margin:36px 0;padding:0 0 0 24px;border-left:1px solid var(--encre); font-size:1.1875rem;line-height:1.5;color:var(--encre);max-width:var(--lecture)} /* --- grille de page --------------------------------------------------------- */ .pr-grille{display:grid;gap:44px} @media(min-width:1040px){ .pr-grille{grid-template-columns:minmax(0,1fr) 280px;gap:88px;align-items:start} .pr-aside{position:sticky;top:36px} } .pr-aside{padding-top:26px;border-top:1px solid var(--encre)} .pr-aside h3{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--gris);margin:0 0 22px} .pr-aside dl{margin:0 0 28px} .pr-aside dt{font-size:.75rem;color:var(--gris);margin-top:18px;letter-spacing:.02em} .pr-aside dd{margin:4px 0 0;font-size:1.375rem;font-weight:400;font-variant-numeric:tabular-nums; letter-spacing:-.02em} /* --- encart ------------------------------------------------------------------ */ .pr-encart{background:var(--brume);padding:26px 24px;margin:34px 0} .pr-encart-t{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:var(--gris);margin:0 0 14px} .pr-encart p{font-size:1rem;color:var(--gris);margin:0 0 10px;line-height:1.6} .pr-encart p:last-child{margin:0} /* --- tableau ----------------------------------------------------------------- */ .pr-tbl-w{overflow-x:auto;margin:30px 0} .pr-tbl{width:100%;border-collapse:collapse;font-size:.9375rem} .pr-tbl th,.pr-tbl td{padding:0;text-align:left;border-bottom:1px solid var(--trait)} .pr-tbl th{font-size:.6875rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--gris);padding:0 18px 14px 0} .pr-tbl td{padding:16px 18px 16px 0} .pr-tbl td:last-child,.pr-tbl th:last-child{text-align:right;padding-right:0; font-variant-numeric:tabular-nums} /* Cible tactile : un lien de cellule fait la hauteur de sa ligne, soit ~22 px — sous le pouce on rate. Mesure du 15/08 sur /regions/ : 26 liens sous 32 px. */ .pr-tbl td a{display:flex;align-items:center;min-height:44px;margin:-14px 0; text-decoration:none} .pr-tbl td a:hover{color:var(--accent)} /* --- cartes de navigation ---------------------------------------------------- ⚠️ CE BLOC REND LES PAGES FILLES EXPLORABLES. Sur alefdiag.fr, 268 001 URL — 58 % du site — n etaient liees depuis aucune page. Toute famille ajoutee au generateur doit apparaitre ici le meme jour. */ /* ⚠️ .pr-filles habille DEUX balisages : un
    de liens (blocFilles, pages de commune) et une
      de
    • (/prestations/, ou les 9 fiches forment reellement une liste). list-style et padding-left neutralisent la puce sans effet sur la version
      . */ .pr-filles{display:grid;gap:0;margin:38px 0;border-top:1px solid var(--trait);list-style:none;padding-left:0} .pr-filles>li{display:flex} .pr-filles>li>.pr-fille{flex:1} @media(min-width:700px){.pr-filles{grid-template-columns:1fr 1fr}} .pr-fille{display:block;padding:26px 0;border-bottom:1px solid var(--trait);text-decoration:none} @media(min-width:700px){.pr-fille:nth-child(odd){padding-right:34px} .pr-fille:nth-child(even){padding-left:34px;border-left:1px solid var(--trait)}} .pr-fille b{display:block;font-size:1.0625rem;font-weight:500;margin-bottom:7px} .pr-fille span{display:block;font-size:.875rem;color:var(--gris);line-height:1.55} .pr-fille:hover b{color:var(--accent)} /* --- listes de communes ------------------------------------------------------ */ .pr-communes{columns:210px;column-gap:34px;margin:26px 0} .pr-communes a{display:block;padding:9px 0;min-height:44px;text-decoration:none; break-inside:avoid;font-size:.9375rem} .pr-communes a:hover{color:var(--accent)} .pr-communes a small{display:block;font-size:.75rem;color:var(--gris);margin-top:2px} /* --- boutons ------------------------------------------------------------------ */ .pr-bouton{display:inline-flex;align-items:center;justify-content:center;min-height:52px; padding:15px 34px;background:var(--encre);color:var(--blanc);font-size:.8125rem; font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none; border:1px solid var(--encre);transition:background .18s,color .18s} /* ⚠️ CE BLOC EXISTE A CAUSE D UN BUG DE CASCADE, PAS PAR GOUT. .pr-texte a a une specificite de 0-1-1 ; .pr-bouton de 0-1-0. Un bouton place dans un article recevait donc color: var(--encre) — texte anthracite sur fond anthracite — et le soulignement clair de .pr-texte a traversait le bloc noir de part en part. Mesure du 31/08 : contraste de 1.00, c est-a-dire strictement invisible, sur 16 pages et aux deux formats. Le user l a vu sur une capture ; douze controles automatiques ne l avaient pas vu, parce qu aucun ne regardait le RENDU CALCULE. D ou verif-visuel-diagluxe. ⚠️ NE PAS « SIMPLIFIER » EN SUPPRIMANT CES SELECTEURS : ils ne sont pas redondants, ils remontent la specificite au-dessus de .pr-texte a. Sans eux, le bug revient tel quel. */ .pr-texte a.pr-bouton,.pr-texte a.pr-bouton-clair,a.pr-bouton,a.pr-bouton-clair{text-decoration:none} .pr-texte a.pr-bouton,a.pr-bouton{color:var(--blanc);background:var(--encre);border-color:var(--encre)} .pr-texte a.pr-bouton-clair,a.pr-bouton-clair{color:var(--encre);background:transparent;border-color:var(--trait)} .pr-texte a.pr-bouton:hover,a.pr-bouton:hover{background:transparent;color:var(--encre)} .pr-texte a.pr-bouton-clair:hover,a.pr-bouton-clair:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre)} .pr-bouton:hover{background:transparent;color:var(--encre)} .pr-bouton-clair{background:transparent;color:var(--encre);border-color:var(--trait)} .pr-bouton-clair:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre)} .pr-actions{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 0} /* --- pied --------------------------------------------------------------------- */ /* Rembourrages resserres sur telephone : 64 px de tete et 88 px de marge etaient calibres pour un grand ecran, ou ils font respirer ; sur 390 px ils allongent une page deja longue. */ .pr-pied{background:var(--nuit);color:rgba(255,255,255,.72);padding:40px 0 24px;margin-top:56px} .pr-pied .pr-marque{color:var(--blanc)} /* ⚠ SUR TELEPHONE, LA GRILLE ELLE-MEME PASSE SUR DEUX COLONNES. Empilees, quatre sections font plus de 1 000 px de pied. Cote a cote, deux rangees suffisent. Le bloc de marque garde toute la largeur : il porte la description, qui ne se lit pas en colonne etroite. Les listes de liens repassent sur UNE colonne, sinon on empile deux niveaux de grille et les intitules se decalent. */ .pr-pied-grille{display:grid;grid-template-columns:1fr 1fr;gap:26px 20px} .pr-pied-grille>div:first-child{grid-column:1 / -1} /* ⚠ DEUX COLONNES DE LIENS SUR TELEPHONE. Empiles, douze liens font douze rangees de 44 px, soit plus de 500 px a traverser. En deux colonnes, six rangees : la meme information dans la moitie de la hauteur, sans rien retirer et sans mecanisme fragile. */ .pr-pied-liens{display:grid;grid-template-columns:1fr;gap:0} @media(min-width:780px){.pr-pied-grille{grid-template-columns:2fr 1fr 1fr;gap:44px} .pr-pied{padding:64px 0 30px;margin-top:88px}} min-height:52px;cursor:pointer;list-style:none; border-bottom:1px solid rgba(255,255,255,.14)} /* ⚠ NE PAS DECLARER SUR L ENFANT DIRECT D UN
      FERME : cela defait le masquage natif, et les trois blocs restaient ouverts sur telephone — 22 liens et 1 004 px de pied, exactement ce qu on voulait supprimer. On ne le declare que quand le bloc est OUVERT, et sur grand ecran ou tout doit l etre. */ /* ⚠ MASQUAGE DECLARE EXPLICITEMENT, ET NON LAISSE AU NAVIGATEUR. Mesure du 01/09 : le
      etait bien ferme (open === false) et son contenu s affichait quand meme — 22 liens et 1 004 px de pied sur telephone. Le masquage natif d un
      ferme se fait sur un pseudo-element interne, que des regles d auteur posees sur les descendants peuvent defaire sans prevenir. On ne s appuie donc pas dessus : on l ecrit. */ @media(min-width:780px){ /* Sur grand ecran, le repli n a pas de sens : tout est ouvert et le marqueur disparait. */ } .pr-pied h4{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; color:rgba(255,255,255,.5);margin:0 0 16px} /* ⚠️ 44 px, PAS 37. Il y a 22 liens de navigation dans ce pied, empiles verticalement sur telephone. Mesure du 31/08 : 346x37 px chacun, sous le seuil de 44 des Human Interface Guidelines. Le rembourrage vertical ne change pas la typographie, seulement la surface que le pouce atteint — et il ecarte du meme coup les liens voisins, ce qui evite d en toucher deux. */ .pr-pied a{display:flex;align-items:center;font-size:.875rem;color:rgba(255,255,255,.72); text-decoration:none;padding:11px 0;min-height:44px} .pr-pied a:hover{color:var(--blanc)} .pr-pied-desc{font-size:1rem;color:rgba(255,255,255,.6);max-width:28rem;margin:18px 0; line-height:1.65} /* ⚠️ L OR EN FILET, JAMAIS EN APLAT NI EN TEXTE COURANT. Mesure : or sur ivoire = 2,2:1, tres en dessous du seuil AA. Ici il ne porte aucune information — il souligne. */ .pr-pied-courriel{font-size:1.0625rem;color:var(--ivoire);text-decoration:none; letter-spacing:.04em;border-bottom:1px solid var(--or);padding-bottom:2px} .pr-pied-courriel:hover{border-bottom-color:var(--ivoire)} .pr-signature{margin:0 0 10px;font-size:1rem;color:rgba(255,255,255,.72)} .pr-signature a{color:rgba(255,255,255,.92);text-decoration:underline;display:inline;min-height:0;padding:0} /* ⚠ 12 px POUR DES PHRASES ENTIERES, ET SUR FOND NOIR : la mention d apporteur d affaires et la citation des sources sont des informations de CONFIANCE, comptees comme telles par la reference E-E-A-T. Les servir a 12 px en blanc a 45 % sur un telephone revient a les cacher tout en pretendant les afficher. 15 px et un blanc a 62 % : discret, mais reellement lisible. */ .pr-pied-legal{display:flex;flex-wrap:wrap;gap:0 20px;margin-bottom:10px} .pr-pied-legal a{display:inline-flex;align-items:center;min-height:44px;padding:0; color:rgba(255,255,255,.72);text-decoration:underline;text-underline-offset:3px} .pr-pied-bas{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:20px; font-size:1rem;color:rgba(255,255,255,.62);line-height:1.7} .pr-pied-bas a{display:inline;color:rgba(255,255,255,.6);padding:0;min-height:0} /* --- accessibilite ------------------------------------------------------------- */ .pr-saut{position:absolute;left:-9999px} .pr-saut:focus{left:22px;top:12px;position:fixed;z-index:120;background:var(--encre); color:var(--blanc);padding:14px 22px} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}