/* ════════════════════════════════════════════════════════════ page.css · gabarit des pages intérieures Complète figma.css. Structure relevée sur « D · 1440 Desktop large/domaine.pdf » : bandeau bleu pleine largeur portant le titre en blanc, fil d'Ariane dessous à gauche, chapô sur une mesure courte, trois repères, puis le corps de page. ════════════════════════════════════════════════════════════ */ /* ---------- marqueur de relecture ---------- */ .todo{background:#FFE9A8;box-shadow:0 0 0 2px #FFE9A8;border-radius:2px; font-style:normal;color:#5A4300} .todo::before{content:"À confirmer · ";font-family:var(--ui);font-size:.72em; font-weight:600;letter-spacing:.08em;text-transform:uppercase} /* ---------- bandeau bleu des pages intérieures ---------- Le titre est posé dans la bande, en blanc ; le fil d'Ariane passe dessous, sur le blanc de la page. La bande ne remonte pas sous l'en-tête, contrairement à celle de l'accueil : sur les pages intérieures l'en-tête reste blanche, les deux ne se recouvrent jamais. Relevé sur la maquette à 1440 : bande de 234 px, titre centré. */ .bandeau-page{position:relative;overflow:hidden;background:var(--navy); margin-top:0;padding:0;min-height:0; height:clamp(132px,16.25vw,234px); display:flex;align-items:center;justify-content:center} .bandeau-page>.wrap{position:relative;z-index:1} .bandeau-page h1{text-align:center;max-width:none;margin:0 auto;color:#fff; text-wrap:balance;line-height:1.08;font-size:var(--t-h1-page)} /* ---------- fil d'Ariane, sous la bande ---------- */ .titre{position:relative;padding-top:var(--r1)} .titre .ariane{position:relative;z-index:1} /* Monogramme en filigrane, en haut à droite, débordant du cadre. Il passe derrière le chapô sans qu'on ait à régler de z-index : le chapô vient après dans le HTML, il se peint donc par-dessus. html porte overflow-x:hidden, le débordement ne crée pas de barre de défilement. */ .filigrane{position:absolute;z-index:0;pointer-events:none; top:calc(-1 * clamp(8px,1vw,14px)); right:calc(-1 * clamp(20px,3.3vw,48px)); width:clamp(230px,33vw,476px);height:auto;opacity:.05} /* titres de section : une seule ligne tant que la mesure le permet */ .erreurs h2,.faq-bande h2,.corps.duo h2,.soeurs h2{max-width:none;text-wrap:balance} #avis .sec-head h2{max-width:none;text-wrap:balance} /* Le fil d'Ariane ne porte plus de marge basse : le titre est monté dans la bande, c'est le chapô qui ouvre maintenant l'espace sous lui. */ .ariane{font-family:var(--ui);font-size:var(--t-mini);color:var(--mute); margin-bottom:0} .ariane a{text-decoration:none} .ariane a:hover{text-decoration:underline;text-underline-offset:4px} .ariane span{padding:0 var(--e2);opacity:.55} /* ---------- chapô et repères ---------- */ .chapo{padding-top:var(--r3);padding-bottom:var(--r3)} .chapo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px); column-gap:var(--r3);align-items:start} .chapo p{max-width:36em} /* Listes du chapô, pages Assistance éducative et Droit de la famille. Même puce que le corps, un rond marine, et le même écart entre les points : la liste se lit d'un bloc, sans saut de ligne entre les items. */ .chapo .txt ul{list-style:none;max-width:36em;margin-top:var(--e4)} .chapo .txt ul li{position:relative;padding-left:var(--e4);margin-top:var(--e2)} .chapo .txt ul li::before{content:"";position:absolute;left:0;top:calc(.62em - 2px); width:5px;height:5px;border-radius:50%;background:var(--navy)} .chapo .actions,.corps .actions{display:flex;gap:var(--e4);margin-top:var(--r2);flex-wrap:wrap} /* sans portrait : le chapô occupe la largeur, sur deux colonnes de texte */ .chapo-grid.sans-photo{grid-template-columns:minmax(0,1fr)} .sans-photo .txt{columns:2;column-gap:var(--r4)} .sans-photo .txt p{max-width:none;break-inside:avoid} .sans-photo .txt p+p{margin-top:var(--saut-p-col)} /* variante : un seul bloc, pleine largeur */ .chapo-grid.une-col .txt{columns:1} .chapo-grid.une-col .txt p{max-width:none} /* suite de texte dans la colonne du chapô (page À propos) */ .chapo .suite{margin-top:var(--r2)} .chapo .suite h2{margin-bottom:var(--e4);font-size:var(--t-h2-s);font-weight:500} .chapo .suite p{max-width:36em} .chapo-media{position:relative} /* portrait détouré : silhouette entière, posée sur un fond neutre */ .chapo-media img{display:block;width:100%;height:clamp(300px,37vw,540px); object-fit:contain;object-position:50% 100%;background:var(--gris)} /* photographie : elle occupe tout le cadre, recadrée sur le visage */ .chapo-media.plein img{object-fit:cover;object-position:50% 20%;background:none} .chapo-media figcaption{font-family:var(--ui);font-size:var(--t-micro);color:var(--mute); margin-top:var(--e3)} .reperes3{display:flex;flex-wrap:wrap; border:1px solid var(--rule);margin-top:var(--r2); width:max-content;max-width:calc(100vw - 2*var(--pad))} .reperes3 div{padding:var(--e4) var(--e5);border-left:1px solid var(--rule)} .reperes3 div:first-child{border-left:0} .reperes3 span{display:block;font-family:var(--ui);font-size:var(--t-mini);letter-spacing:.06em; text-transform:uppercase;color:var(--mute)} .reperes3 strong{display:block;font-family:var(--ui);font-size:var(--t-base);font-weight:600;margin-top:var(--e2)} /* ---------- corps de page ---------- */ .corps{padding-bottom:var(--r4)} .corps .mesure{max-width:680px} .corps h2{margin-top:var(--r3);margin-bottom:var(--e4); font-size:var(--t-h2-s);font-weight:500} .corps h2:first-child{margin-top:0} .corps h3{margin-top:var(--r2);margin-bottom:var(--e3);font-size:var(--t-h4)} .corps ul{list-style:none;margin-top:var(--e4)} .corps ul li{position:relative;padding-left:var(--e4);margin-top:var(--e2)} /* La puce est un rond marine. Diamètre en pixels entiers et non en em : à 4,9 px le navigateur rendait un rond flou, d'un point à l'autre de la même liste. La position reste en em pour suivre la hauteur de ligne. */ .corps ul li::before{content:"";position:absolute;left:0;top:calc(.62em - 2px); width:5px;height:5px;border-radius:50%;background:var(--navy)} .corps .src{font-family:var(--ui);font-size:var(--t-mini);color:var(--mute);margin-top:var(--e3)} /* ---------- source citée dans le texte ---------- La citation du Monde dans la biographie. Le lien suit le paragraphe sur sa propre ligne : à l'intérieur de la phrase il aurait percé la mesure. */ .src-lien{display:inline-block;margin-top:var(--e2);font-family:var(--ui); font-size:var(--t-mini);color:var(--mute);text-decoration:none; border-bottom:1px solid var(--rule)} .src-lien:hover{color:var(--navy);border-bottom-color:var(--navy)} /* ---------- pages légales : texte plus petit, plus aéré ---------- Mentions légales et politique de confidentialité. On lit ces pages pour y chercher une information, pas d'un bout à l'autre : le texte descend d'un cran et les sections respirent davantage. */ .corps.legal{padding-top:var(--r2); font-size:var(--t-courant-s);line-height:1.72} .corps.legal .mesure{max-width:620px} .corps.legal h2{font-size:var(--t-h4);font-weight:500; margin-top:var(--r4);margin-bottom:var(--e4)} .corps.legal p+p{margin-top:var(--saut-p-col)} .corps.legal ul{margin-top:var(--e4)} .corps.legal ul li{margin-top:var(--e3);padding-left:var(--e4)} /* texte plus petit : rond d'un pixel de moins, sinon il pèse trop */ .corps.legal ul li::before{top:calc(.72em - 2px);width:4px;height:4px} /* le titre visé par une ancre ne doit pas se coller au haut de la fenêtre */ .corps.legal h2{scroll-margin-top:clamp(64px,7vw,104px)} /* ---------- corps sur deux colonnes ---------- */ .corps.duo .mesure{max-width:none;display:grid;grid-template-columns:1fr 1fr; column-gap:var(--r4);align-items:start} .corps.duo h2{margin-top:0;margin-bottom:var(--e4);font-size:var(--t-h2);font-weight:400} .corps.duo .col>p+p{margin-top:var(--saut-p-col)} /* ---------- corps placé en haut de page ---------- Sur Honoraires le corps suit directement le titre et le fil d'Ariane, sans chapô entre les deux. .corps ne porte qu'un padding bas, il lui faut donc ici l'ouverture que le chapô donnait avant lui, à la même valeur pour que l'attaque du texte tombe à la même hauteur que sur les autres pages. */ .corps.haut{padding-top:var(--r3)} /* ---------- bande des trois repères ---------- Les repères ne suivent plus un texte d'accroche, ils ferment le corps en rappel. Le margin-top de .reperes3 servait à les décoller du paragraphe du chapô, il n'a plus d'objet ici : c'est le padding bas du corps qui tient l'écart. */ .bande-reperes .reperes3{margin-top:0} /* ---------- justification ---------- Charlotte demande des textes justifiés : un bloc au bord net plutôt qu'une rive droite en dents de scie. En français, justifier sans césure creuse des rivières de blanc entre les mots, donc hyphens:auto accompagne chaque bloc justifié, et le lang="fr" posé par build.py fournit au navigateur le dictionnaire de coupure. Seule la prose est concernée. Les libellés, les sources, les chiffres des repères, les cartes d'erreurs et les champs de formulaire gardent leur rive libre : sur une mesure courte, la justification casse plus qu'elle n'aligne. La présentation de l'accueil est stylée dans figma.css, mais la règle de justification reste ici : c'est une décision de typographie qui vaut pour tout le site, elle se lit mieux en un seul endroit. La justification ne dépend d'aucun palier : un bloc justifié à 1440 l'est aussi à 360. C'est une demande d'Alex du 19 octobre 2026, qui remplace les deux levées que portait ce fichier, l'une sous 480 px, l'autre sur la bande où Honoraires passe en colonnes étroites. Ce qui change avec la largeur, c'est la finesse de la coupure, réglée juste en dessous. */ .bio-grid>div>p, .chapo .txt p, .chapo .txt li, .chapo .suite p, .corps .mesure p, .corps .mesure li, .qr .rep p{text-align:justify;text-justify:inter-word; -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3} /* la source est une ligne de référence, pas un bloc de texte */ .corps .mesure p.src{text-align:left;-webkit-hyphens:manual;hyphens:manual} /* Alignement choisi paragraphe par paragraphe dans l'éditeur. Le justifié ci-dessus reste la règle du site et ne porte aucune classe : seuls les paragraphes qu'on en sort en gagnent une. La césure part avec la justification, elle n'avait de raison d'être que pour elle. Les sélecteurs sont doublés de la classe pour passer devant la liste ci-dessus, qui compte deux niveaux de spécificité. */ .chapo .txt p.al-gauche, .chapo .suite p.al-gauche, .corps .mesure p.al-gauche, .qr .rep p.al-gauche, .bio-grid>div>p.al-gauche{text-align:left; -webkit-hyphens:manual;hyphens:manual} .chapo .txt p.al-centre, .chapo .suite p.al-centre, .corps .mesure p.al-centre, .qr .rep p.al-centre, .bio-grid>div>p.al-centre{text-align:center; -webkit-hyphens:manual;hyphens:manual} .chapo .txt p.al-droite, .chapo .suite p.al-droite, .corps .mesure p.al-droite, .qr .rep p.al-droite, .bio-grid>div>p.al-droite{text-align:right; -webkit-hyphens:manual;hyphens:manual} /* Césure plus fine sur mesure courte. « 6 3 3 » ne coupe qu'un mot de six lettres ou plus, et laisse au moins trois lettres de chaque côté : sur une ligne large c'est le bon réglage, peu de coupures et aucun fragment illisible. Sur une ligne courte il ne trouve presque aucun point de coupure, et la justification doit alors écarter les mots. « 5 2 2 » ouvre les mots de cinq lettres et accepte deux lettres en bout : le navigateur a plus d'endroits où couper, donc moins de blanc à répartir. Fragments acceptés en connaissance de cause. Deux cas de mesure courte, et seulement ces deux-là. Sous 480 px la mesure tombe à 320 px, une quarantaine de caractères. Et de 1024 à 1098 px les deux colonnes d'Honoraires restent sous 480 px de large : 445 px à 1024, 480,5 px à 1098, 481 px à 1100, relevés au navigateur. Si l'écart des colonnes change dans .corps.duo, c'est la borne haute qu'il faut remesurer. */ @media(max-width:480px){ .bio-grid>div>p, .chapo .txt p, .chapo .txt li, .chapo .suite p, .corps .mesure p, .corps .mesure li, .qr .rep p{hyphenate-limit-chars:5 2 2} } @media(min-width:1024px) and (max-width:1098px){ .corps.duo .mesure p,.corps.duo .mesure li{hyphenate-limit-chars:5 2 2} } /* ---------- encadré d'urgence ---------- */ .urgence{background:var(--navy);color:#fff;padding:var(--r2); margin-top:var(--r2);max-width:680px} .urgence h2{margin-top:0;color:#fff} .urgence p{color:rgba(255,255,255,.88)} .urgence .btn{margin-top:var(--e5);border-color:#fff;background:#fff;color:var(--navy)} .urgence .btn:hover{background:#F0EFEA} /* ---------- erreurs fréquentes ---------- */ .erreurs{padding-top:var(--r4);padding-bottom:var(--r4)} .erreurs h2{text-align:center;font-size:var(--t-h2-l); margin-bottom:var(--r3)} .err{display:grid;grid-template-columns:repeat(2,1fr); column-gap:var(--r4);row-gap:var(--r2)} .err article{padding:2px 0 2px var(--e4);border:0; border-left:2px solid var(--navy);margin:0} .err h3{font-family:var(--ui);font-size:var(--t-courant);font-weight:600; line-height:1.35;margin-bottom:var(--e3)} .err p{color:var(--navy);opacity:.8;font-size:var(--t-courant-s);line-height:1.55} /* ---------- questions fréquentes ---------- */ .faq-bande{background:var(--creme); padding-top:var(--r4);padding-bottom:var(--r4)} .faq-bande h2{margin-bottom:var(--r3)} /* La typographie de la FAQ, titre compris, vit dans figma.css, en sélecteurs groupés avec celle de l'accueil. Il ne reste ici que le fond crème et les respirations de la bande, qui sont plus serrées qu'à l'accueil : ce bloc est posé juste avant le pied de page, il n'a pas besoin des 110 px de la section d'accueil. Ne pas redéclarer de corps ni de police ici. Deux endroits pour la même chose, et les deux FAQ repartiraient chacune de leur côté, ce qui est exactement ce que nous venons de défaire. */ /* ---------- pages sœurs ---------- */ .soeurs{padding-top:var(--r4);padding-bottom:var(--r4)} .soeurs h2{margin-bottom:var(--r3)} .soeurs .lst{display:grid;grid-template-columns:repeat(3,1fr);gap:0} .soeurs a{display:block;padding:var(--e5);border:1px solid var(--rule); margin:0 -1px -1px 0;text-decoration:none} .soeurs a:hover{background:#FCFCFB} .soeurs a strong{display:block;font-family:var(--serif);font-size:var(--t-h3); font-weight:500} .soeurs a span{display:block;font-family:var(--ui);font-size:var(--t-mini);color:var(--mute);margin-top:var(--e2)} /* Le tableau des honoraires, six règles .tarifs, a été retiré le 15 octobre 2026 avec la fonction tarifs() de build.py. Charlotte avait écarté l'affichage de montants ; les règles survivaient sans aucun élément à habiller, et un futur .tarifs aurait hérité d'une mise en forme dont personne n'aurait su d'où elle venait. */ /* ---------- fiche contact ---------- */ .coord{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--r2); border-top:1px solid var(--rule);padding-top:var(--r2)} .coord .coord-t{font-family:var(--ui);font-size:var(--t-mini);letter-spacing:.09em;text-transform:uppercase; color:var(--mute);font-weight:500;margin-bottom:var(--e3)} .coord p{font-size:var(--t-courant)} .coord a{text-decoration:none;border-bottom:1px solid rgba(1,16,79,.3)} /* ---------- formulaire de contact ---------- */ .form .champ>label{display:block;font-family:var(--ui);font-size:var(--t-micro);font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:var(--e2)} .form .champ select{width:100%;height:44px;border:1px solid var(--mute);background:#fff; font-family:var(--ui);font-size:var(--t-base);padding:0 var(--e3);color:var(--navy); -webkit-appearance:none;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%), linear-gradient(135deg,var(--navy) 50%,transparent 50%); background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px,6px 6px;background-repeat:no-repeat} /* La mention de confidentialité tenait sur une ligne à 12 px. À 13 px elle passe sur deux lignes, et la première se remplissait jusqu'au bout en laissant un mot seul en dessous : text-wrap équilibre les deux lignes. */ .form .champ small{display:block;font-family:var(--ui);font-size:var(--t-mini);color:var(--mute); margin-top:var(--e2);line-height:1.5;text-wrap:balance} .form .duo{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--e4);row-gap:0} .form .duo .champ{margin-top:var(--e4)} .form .champ.case{display:grid;grid-template-columns:20px 1fr;gap:var(--e3);align-items:start; margin-top:var(--e5)} .form .champ.case input{width:20px;height:20px;margin-top:1px;accent-color:var(--navy)} .form .champ.case label{font-family:var(--ui);font-size:var(--t-mini);line-height:1.55;color:var(--navy); text-transform:none;letter-spacing:0;font-weight:400;margin:0} .form button{margin-top:var(--e5)} /* formulaire pleine largeur : chaque champ sur une ligne */ .form-large .champ,.form-large .champ input,.form-large .champ textarea{max-width:none} .form-large .champ small{max-width:88ch} @media(max-width:1023px){ .corps.duo .mesure{grid-template-columns:1fr;row-gap:var(--r2)} .chapo-grid{grid-template-columns:minmax(0,1fr);row-gap:var(--r2)} .chapo-media img{height:clamp(300px,42vw,380px);max-width:min(100%,300px);margin-inline:auto} .soeurs .lst{grid-template-columns:1fr} .coord{grid-template-columns:1fr 1fr} } @media(max-width:767px){ .sans-photo .txt{columns:1} /* Sur mobile la bande se resserre et le titre reste centré dedans : un titre blanc aligné à gauche sur une bande courte tirait l'œil dans un coin. Le filigrane, lui, disparaît : à cette largeur il couvrirait le texte au lieu de l'accompagner. */ .bandeau-page{height:clamp(118px,30vw,170px)} .filigrane{display:none} .reperes3{width:100%} .reperes3 div{flex:1 1 100%} .reperes3 div{border-left:0;border-top:1px solid var(--rule)} .reperes3 div:first-child{border-top:0} .err{grid-template-columns:1fr} .coord{grid-template-columns:1fr} .form .duo{grid-template-columns:1fr;gap:0} /* « Exposer votre situation » et « Me contacter » côte à côte sur une ligne, le 16 octobre 2026. Aux valeurs de l'échelle ils mesuraient 213 et 143 px plus 18 d'écart, soit 374 pour 350 disponibles à 390 px de large : ils se repliaient. Le remplissage horizontal tombe au pas au-dessous et l'écart le rejoint, total 312 px, ce qui tient jusqu'à 352 px de large. La hauteur de 53 px ne bouge pas, la cible tactile reste entière. Les deux boutons gardent leur largeur naturelle : les égaliser à moitié chacun laisserait 4 px de marge au plus long. */ .chapo .actions,.corps .actions{gap:var(--e3)} .chapo .actions .btn,.corps .actions .btn{padding-left:var(--e3);padding-right:var(--e3)} } /* La levée de justification sous 480 px était ici. Elle a été retirée le 19 octobre 2026 : la justification vaut maintenant à toutes les largeurs. Ce que ce palier faisait de bien, refermer les blancs sur une mesure courte, est repris plus haut par un réglage de césure plus fin, dans la section « justification ». */ /* piège à robots : invisible à l'écran comme aux lecteurs d'écran */ .pot{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0} /* ---------- page 404 ---------- Bloc centré, sans bandeau. Le logo remplace la photo : sur une erreur, une image de façade ferait décor et retarderait la sortie. */ .p404{text-align:center;padding-top:var(--r5); padding-bottom:var(--r5)} .p404-logo{width:clamp(72px,8vw,104px);height:auto;margin:0 auto} .p404-code{font-family:var(--ui);font-size:var(--t-micro);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--mute); margin-top:var(--r1)} .p404 h1{font-size:var(--t-h1-page);font-weight:400;line-height:1.14; margin-top:var(--e3)} .p404-txt{max-width:44ch;margin:var(--r1) auto 0; color:var(--mute);line-height:1.68} .p404 .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e3); margin-top:var(--r2)} .p404-liens{display:flex;flex-wrap:wrap;justify-content:center; gap:var(--e3) var(--r1);max-width:640px; margin:var(--r3) auto 0;padding-top:var(--r1); border-top:1px solid var(--rule); font-family:var(--ui);font-size:var(--t-mini)} .p404-liens a{color:var(--mute);text-decoration:none} .p404-liens a:hover{color:var(--navy);text-decoration:underline} /* en-tête de la 404 : sans