.entete{display:flex;align-items:center;gap:.9rem;padding:.95rem 1rem;border-bottom:1px solid rgba(20,33,61,.10);background:#fff;position:sticky;top:0;z-index:5}
/* La marque est DESSINEE (logoSvg.mjs, 25/09) : plus de police, deux SVG de 22 px de haut. Le mot
   au-dela de 560 px, le symbole (les deux yeux) en dessous, comme l application. */
.entete-marque{display:flex;align-items:center;min-height:24px;flex-shrink:0;text-decoration:none}
.marque{position:relative;display:inline-flex;align-items:center}
.marque>svg{display:block;height:22px;width:auto}
/* Le MOT remonte de 2 px, à l oeil (06/10) : une boite centree, un poids en bas (cf. AppShell). */
.marque>.marque-mot{transform:translateY(-2px)}
.marque>.marque-symbole{display:none}
.entete-cherche{flex:0 1 22.5rem;min-width:9rem;display:flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border:1px solid rgba(20,33,61,.14);border-radius:999px;background:#fff}
.entete-cherche>svg{flex-shrink:0;color:rgba(20,33,61,.65)}
.entete-cherche>input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.86rem;color:var(--ink,#14213D)}
.entete-cherche>button{flex-shrink:0;border:0;background:transparent;cursor:pointer;padding:.15rem .35rem;color:rgba(20,33,61,.55);font-size:.9rem}
/* Le mode courant en pastille teintee, dans la couleur de son univers (30/09) : le dessin de
   AppShell (PASTILLE_SECTION). C etait un soulignement de deux pixels. */
.entete-sections{display:flex;align-items:center;gap:.25rem;flex-shrink:0}
.entete-sections>a,.entete-sections .sect>a{white-space:nowrap;font-size:.86rem;font-weight:600;color:rgba(20,33,61,.75);text-decoration:none;padding:.375rem .75rem;border-radius:999px}
.entete-sections>a:hover,.entete-sections .sect>a:hover{color:var(--accent,#1D4ED8)}
.entete-sections a[data-section="ecoles"]:hover{color:#9A3412}
.entete-sections a[data-section="investir"]:hover{color:#0F766E}
.entete-sections a[data-section][aria-current]{background:rgba(29,78,216,.1);color:var(--accent,#1D4ED8)}
.entete-sections a[data-section="ecoles"][aria-current]{background:rgba(194,65,12,.1);color:#9A3412}
.entete-sections a[data-section="investir"][aria-current]{background:rgba(15,118,110,.1);color:#0F766E}
.entete-icone{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:999px;color:rgba(20,33,61,.7)}
.entete-icone:hover{background:rgba(20,33,61,.05);color:var(--ink,#14213D)}
/* ⚠️ NOWRAP, SINON LE BOUTON MORD SUR LE CHAMP (capture de Vincent, 24/09, a 1 268 px) : la zone
   de droite se dimensionnait sur son MOT le plus long (« classement »), puis ses liens, qui ne
   retrecissent pas, debordaient de 33 px sur la recherche. Insecables, ils fixent la largeur
   minimale de la zone, et c est la recherche qui cede. */
/* TROIS ZONES, CALÉES SUR LA PAGE (23/09 au soir) : marque à gauche, recherche au centre, le reste
   au bord droit, dans la largeur de la fiche (72 rem, marges de 1,25 rem) ; les deux côtés se
   partagent la place à parts égales, ce qui centre la recherche. Les écrans à carte gardent
   toute la largeur. Même règle que l en-tête de l application (AppShell). */
/* PLEINE LARGEUR PARTOUT (20/10, decision de Vincent) : la marque et le menu ne bougent plus
   d une page a l autre ; data-large ne change plus rien et reste pour la coquille des cartes. */
/* GRAND ECRAN (22/10, decision de Vincent), la regle de l application (styles/index.css) : des
   1 440 px, la rangee se cale sur le conteneur commun de 1 440 px, marges de 48 px, et ne grandit
   plus ; les coquilles des ecrans a carte (data-large) gardent toute la largeur, a 48 px du bord. */
@media (min-width:1440px){.entete{padding-left:max(3rem,calc(50% - 672px));padding-right:max(3rem,calc(50% - 672px))}.entete[data-large]{padding-left:3rem;padding-right:3rem}}
.entete-gauche,.entete-droite{flex:1 1 0;display:flex;align-items:center;gap:.9rem}
.entete-droite{justify-content:flex-end}
/* Les deux écrans ouvrent le menu, comme dans l application (NavMenu). */
.menu-ecrans{display:grid;gap:2px;padding:.5rem .5rem .45rem;border-bottom:1px solid var(--trait,rgba(20,33,61,.12))}
.menu-ecran{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 .75rem;border-radius:8px;text-decoration:none;font-size:15px;color:rgba(20,33,61,.8)}
.menu-ecran>svg{flex-shrink:0;color:rgba(20,33,61,.65)}
.menu-ecran[aria-current]{font-weight:600;background:rgba(20,33,61,.04)}
.menu-ecran[aria-current]>svg{color:currentColor}
.menu-ecran:hover{background:rgba(29,78,216,.08)}
/* Les sections des 640 px, comme AppShell (30/09 : seul selecteur de mode) ; le partage quitte le telephone. */
.entete-sections .sect{position:relative}.entete-sections .sect>a{display:inline-flex;align-items:center;gap:.2rem}.entete-sections .sect>a>svg{opacity:.6;margin:0}
.sect-menu{display:none;position:absolute;left:0;top:100%;z-index:25;width:18rem;max-width:92vw;padding-top:.4rem}
.sect-menu>.menu-grille{background:#fff;border:1px solid var(--trait,rgba(20,33,61,.12));border-radius:var(--r-carte,14px);padding:.5rem;box-shadow:0 12px 32px -14px rgba(20,33,61,.35)}
.sect:hover>.sect-menu,.sect:focus-within>.sect-menu{display:block}
/* Le grand menu porte de nouveau TOUS les univers, au bureau aussi (16/10) : l en-tete ne montre que le courant. */
@media (max-width:639px){.entete-sections{display:none}}
/* ⚠️ AU TÉLÉPHONE, LES TROIS SECTIONS EN TÊTE DU MENU (05/10). Le menu ne répète plus les outils
   (Vincent : « c'est redondant ») — l'en-tête les porte dès 640 px ; en dessous, ces pages n'ont
   pas la barre du bas de l'application, et le menu reste leur seule porte vers les outils. */
.entete-sections.menu-sections{display:none}
@media (max-width:639px){.entete-sections.menu-sections{display:flex;flex-wrap:wrap;padding:.55rem .5rem .45rem;border-bottom:1px solid var(--trait,rgba(20,33,61,.12))}}
@media (max-width:560px){.entete-icone[data-partager]{display:none}}
/* Deux DESSINS aria-hidden qui s echangent : display:none est sans risque ici, le nom vit dans le
   texte masque par clip (TEXTE_MARQUE), qui, lui, reste dans le document a toute largeur. */
@media (max-width:560px){.marque>.marque-mot{display:none}.marque>.marque-symbole{display:block}}
@media (max-width:560px){.menu-titre,.menu-h{font-size:13px;line-height:1.35}}
.menu-stat{position:relative;flex-shrink:0}
/* LE MENU DE L APPLICATION (09/10) : l icône et le mot, sans cadre, une pastille au survol (NavMenu). */
/* Les trois liens de droite, une forme (17/10) : avant les media queries, qui les masquent au telephone. */
.entete-lien,.menu-stat>summary{display:flex;align-items:center;gap:.375rem;height:2.25rem;padding:0 .625rem;border-radius:999px;font-size:.875rem;font-weight:500;color:rgba(20,33,61,.75);white-space:nowrap;text-decoration:none}
.entete-lien:hover,.menu-stat>summary:hover{background:rgba(20,33,61,.05);color:var(--ink,#14213D)}
.entete-lien[aria-current]{color:var(--accent,#1D4ED8)}
.entete-ic{position:relative;display:flex}
.entete-ic .entete-compte{right:-.5rem;top:-.375rem;height:16px;min-width:16px;font-size:10px}
.entete-ic:has(.entete-compte:not([hidden]))+.entete-mot{margin-left:.5rem}
.menu-stat>summary{list-style:none;cursor:pointer}
.menu-stat>summary::-webkit-details-marker{display:none}
.menu-stat[open]>summary{color:var(--accent,#1D4ED8)}
/* Le compte des favoris sur le cœur, le dessin de LienFavoris. */
.entete-favoris{position:relative}
.entete-compte{position:absolute;right:-2px;top:-2px;display:flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 4px;border-radius:999px;background:var(--accent,#1D4ED8);color:#fff;font-size:11px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.entete-compte[hidden]{display:none}
/* Le partage à côté du titre (posé par partage.js) : une pastille discrète, comme sur la fiche. */
.partage-titre{display:flex;align-items:flex-start;gap:.5rem}
.partage-titre>h1,.partage-titre>.titre-i{flex:1;min-width:0}
/* La pilule « Carte » à gauche du partage (15/10) : même hauteur, l'action d'un bleu plein. */
.partage-titre>a.pilule-carte{width:auto;gap:.4rem;padding:0 .95rem;border-color:var(--accent,#1D4ED8);background:var(--accent,#1D4ED8);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap}
.partage-titre>a.pilule-carte:hover{filter:brightness(1.1);color:#fff}
@media (max-width:520px){.partage-titre>a.pilule-carte{width:44px;padding:0}.partage-titre>a.pilule-carte span{display:none}}
.partage-titre>a{position:relative;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--trait,rgba(20,33,61,.12));border-radius:999px;color:var(--ink,#14213D);background:#fff}
.partage-titre>a:hover{border-color:var(--accent,#1D4ED8);color:var(--accent,#1D4ED8)}
.partage-titre>a.copie::after{content:attr(data-copie);position:absolute;top:100%;right:0;margin-top:.35rem;white-space:nowrap;padding:.25rem .6rem;border-radius:.5rem;background:var(--ink,#14213D);color:#fff;font-size:.8rem;font-weight:600}
.menu-stat>summary:focus-visible{outline:2px solid var(--accent,#1D4ED8);outline-offset:2px}
.menu-stat>nav{position:absolute;right:0;top:calc(100% + .45rem);z-index:20;width:19rem;max-width:92vw;background:#fff;border:1px solid var(--trait,rgba(20,33,61,.12));border-radius:var(--r-carte,14px);padding:0 0 .5rem;box-shadow:0 12px 32px -14px rgba(20,33,61,.35);max-height:calc(100dvh - 5.5rem);overflow-y:auto;overscroll-behavior:contain}
.menu-titre{margin:0;padding:.55rem .8rem .15rem;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faible,rgba(20,33,61,.65))}
.menu-grille{display:grid;gap:2px;padding:0 .5rem}
.menu-ligne{display:flex;align-items:flex-start;gap:6px;padding:.35rem .5rem;border-radius:8px;text-decoration:none;color:var(--ink,#14213D);min-height:24px}
.menu-ligne:hover{background:rgba(29,78,216,.08)}.menu-ligne[aria-current]{background:rgba(20,33,61,.04)}
.menu-ligne>svg{flex-shrink:0;margin-top:2px;color:var(--accent,#1D4ED8)}
.menu-l{display:block;font-size:13px;font-weight:500;line-height:1.25}
.menu-h{display:block;font-size:11px;line-height:1.25;color:var(--ink-faible,rgba(20,33,61,.65))}
/* UN SEUL EN-TÊTE AU TÉLÉPHONE, CELUI DE L APP (2026-09-22) : marque, loupe, menu. Le champ
   de 180 px n y montrait ni son invite ni ce qu on tapait ; la loupe ouvre le même formulaire
   sous la barre, sans script (un details natif, comme le menu). */
.entete-loupe{display:none;flex-shrink:0;margin-left:auto}
.entete-loupe>summary{list-style:none}
.entete-loupe>summary{cursor:pointer;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;color:rgba(20,33,61,.65)}
.entete-loupe>summary::-webkit-details-marker{display:none}
.entete-loupe>summary:focus-visible{outline:2px solid var(--accent,#1D4ED8);outline-offset:2px}
.entete-loupe>form{position:absolute;left:0;right:0;top:100%;display:flex;gap:.4rem;padding:.6rem 1rem;background:#fff;border-bottom:1px solid rgba(20,33,61,.10);box-shadow:0 12px 24px -16px rgba(20,33,61,.35)}
.entete-loupe>form>input{flex:1;min-width:0;font:inherit;font-size:16px;padding:.5rem .8rem;border:1px solid rgba(20,33,61,.18);border-radius:999px;background:#fff;color:var(--ink,#14213D)}
.entete-loupe>form>button{flex-shrink:0;border:0;border-radius:999px;background:var(--accent,#1D4ED8);color:#fff;font:inherit;font-size:.9rem;font-weight:600;padding:0 1rem}
.menu-ico{display:none}
@media (max-width:560px){.entete-cherche{display:none}.entete-loupe{display:block}.menu-stat>summary{padding:0;width:2.25rem;justify-content:center}.menu-txt{display:none}}
.barre-bas-stat{display:none}
/* Au téléphone, le menu des pages statiques prend le gabarit de celui de l'application (12/10) :
   lignes de 48 px en 16 px, icônes de 20 px, plus de titres en capitales — un filet sépare. */
@media (max-width:639px){.menu-stat .menu-titre{font-size:12px;line-height:1.3;padding:.75rem 1.25rem .25rem;margin:0;border-top:1px solid var(--trait,rgba(20,33,61,.12))}.menu-stat .menu-ligne{align-items:center;gap:.75rem;min-height:48px;padding:0 .75rem;border-radius:.75rem}.menu-stat .menu-ligne>svg{width:20px;height:20px;margin-top:0}.menu-stat .menu-l{font-size:16px}}
@media (max-width:639px){.barre-bas-stat{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(255,255,255,.97);border-top:1px solid rgba(20,33,61,.10);padding:.375rem .5rem max(.25rem,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.barre-bas-stat>a,.barre-bas-stat>button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-height:48px;font:inherit;font-size:13px;color:rgba(20,33,61,.65);background:none;border:0;text-decoration:none;cursor:pointer}.barre-bas-stat>[aria-current],.barre-bas-stat>[aria-expanded=true]{color:var(--accent,#1D4ED8);font-weight:600}.barre-bas-stat .entete-compte{top:.1rem;right:calc(50% - 1.4rem)}body:has(.barre-bas-stat){padding-bottom:calc(4.25rem + env(safe-area-inset-bottom))}.entete-favoris{display:none}.menu-stat>summary{display:none}.menu-stat>nav{position:fixed;left:0;right:0;top:auto;bottom:calc(4rem + env(safe-area-inset-bottom));width:auto;max-width:none;border-radius:1rem 1rem 0 0;max-height:75dvh}}
/* Sous 1 280 px, la loupe a la place du champ, comme AppShell (16/10 : le champ compact a rejoint
   le bord droit, et la pastille centree ne laisse plus sa place a un champ etrangle).
   APRES la regle de base de la loupe (display:none) : posee avant, elle perdait la cascade. */
@media (max-width:1279px){.entete-cherche{display:none}.entete-loupe{display:block}}
.menu-sep{border:0;border-top:1px solid var(--trait,rgba(20,33,61,.12));margin:.45rem 0 .35rem}
/* LES DEUX PORTES (16/10, « Resserrer », OngletsPortes dans l application) : Où vivre · Écoles,
   la porte de la page allumée dans sa couleur ; « Vivre · Écoles » au téléphone. */
.portes{display:inline-flex;flex-shrink:0;gap:2px;padding:3px;border-radius:999px;background:rgba(20,33,61,.07)}
.portes>a{display:inline-flex;align-items:center;min-height:34px;padding:0 1rem;border-radius:999px;white-space:nowrap;text-decoration:none;font-family:var(--police-titre,'Plus Jakarta Sans',Inter,sans-serif);font-weight:700;font-size:15px;color:rgba(20,33,61,.65)}
.portes>a:hover{color:var(--ink,#14213D)}
.portes>a[aria-current]{background:#fff;color:var(--accent,#1D4ED8);box-shadow:0 1px 4px rgba(20,33,61,.15)}
.portes>a[data-porte="ecoles"][aria-current]{color:#9A3412}
.portes>a:focus-visible{outline:2px solid var(--accent,#1D4ED8);outline-offset:1px}
.portes .p-court{display:none}
@media (max-width:639px){.portes>a{padding:0 .75rem;font-size:14px}.portes .p-long{display:none}.portes .p-court{display:inline}}
/* « Mon classement » au bord droit, comme l application (lg) : la rangee d outils qui le portait est retiree. */
@media (max-width:1023px){.entete-classement{display:none}.entete-mot{display:none}}
/* La hauteur de l en-tete, pour ce qui se colle dessous (cartes des hubs). */
:root{--haut-entete:4.5rem}
a[class="suite"]{color:var(--accent,#1D4ED8);font-weight:600;text-decoration:none!important}a[class="suite"]:hover,a[class="suite"]:focus-visible{text-decoration:underline!important;text-underline-offset:3px}a.suite::after{content:"\203A";display:inline-block;margin-left:.3em;font-weight:600;transition:transform .15s ease}a.suite:hover::after,a.suite:focus-visible::after{transform:translateX(2px)}@media (prefers-reduced-motion:reduce){a.suite::after{transition:none}}
.menu-langue{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(20,33,61,.08);margin-top:.45rem;padding:.5rem .8rem 0;font-size:13px;color:rgba(20,33,61,.7)}
.menu-bascule{display:inline-flex;align-items:center;border:1px solid rgba(20,33,61,.15);border-radius:999px;padding:2px;font-size:12px;font-weight:600}
.menu-bascule>*{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 .4rem;border-radius:999px;text-decoration:none;color:rgba(20,33,61,.65)}
.menu-bascule>[aria-current]{background:var(--accent,#1D4ED8);color:#fff}
.menu-bascule>a:hover{color:var(--ink,#14213D)}
.menu-bascule>a:focus-visible{outline:2px solid var(--accent,#1D4ED8);outline-offset:2px}