/* =============================================================================
   base-v7 : socle commun de la refonte 7a.

   Tout est porte par la classe racine .v7. Cette portee sert a isoler la page
   des regles d'element de common.css (section, span, time, ul, li, h1, h2,
   button), qui reste charge globalement par head.tmpl.

   Seule dependance : tokens.css. Aucune valeur de couleur en dur, uniquement
   des var(--ex-*), pour que le mode sombre suive automatiquement.

   Echelle typographique : un cran au-dessus de la maquette (corps 14px au lieu
   de 13, gris les plus clairs remontes d'un niveau) pour le confort de lecture.
   ============================================================================= */

/* --- Gabarit de page --------------------------------------------------------
   Aucune regle sur html ni body : cette feuille est desormais chargee sur tout
   le site, et common.css fournit deja la grille du document, entete, contenu,
   pied. Imposer ici une police ou un fond changerait l'apparence de toutes les
   pages v6 sans qu'on l'ait demande. Le chrome pose donc sa propre police sur
   .entete et .pied, et .v7 sur lui-meme. */

/* L'attribut hidden pilote tous les panneaux repliables de la v7. Il doit primer
   sur les regles de display posees ailleurs : une chronologie en display:grid a
   une specificite superieure a la regle [hidden] du navigateur et resterait
   visible. Le !important est ici le moyen le plus sur, quel que soit l'ordre des
   feuilles. */
.v7 [hidden],
.entete [hidden],
.pied [hidden] { display: none !important; }

/* --- Neutralisation de common.css dans le chrome ----------------------------
   Meme travail que le bloc equivalent sur .v7 plus bas. Il manquait ici : le
   chrome a ete ecrit quand il ne servait qu'aux pages v7, et il est desormais
   pose sur tout le site, donc expose aux regles d'element de common.css.

   Celle qui faisait le plus de degats : li { margin-top: 1em }. Dans un
   conteneur flex en align-items:center, c'est la boite de marge qui est
   centree, donc les liens de navigation descendaient de la moitie de la marge
   sous la ligne du bouton Connexion.

   Ces regles sont volontairement placees avant les regles de chrome : a
   specificite egale, c'est la derniere qui gagne, donc .pied-liens h2 et
   .pied-liens ul gardent la main sur leurs propres valeurs. */
.entete section, .pied section { margin: 0; }
.entete span, .pied span { font-weight: inherit; }
.entete ul, .pied ul { list-style: none; margin: 0; padding: 0; }
.entete li, .pied li { margin: 0; }
.entete p, .pied p { margin: 0; }
.entete h2, .pied h2 { margin: 0; padding: 0; color: inherit; text-align: left; font-size: inherit; }

/* La seule utilitaire de la feuille : masquer sans retirer du flux accessible. */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Entete de site ------------------------------------------------------------
   Variante claire, servie partout sauf sur l'accueil : fond de surface, filet
   ambre clair. Le trait de couleur suffit a rattacher l'entete a l'identite sans
   porter un aplat sur toute la largeur ; l'ambre se retrouve sur la pastille de
   compte.

   Le fond suit --ex-surface, donc l'en-tete s'inverse avec le theme comme le
   reste des pages. */

.entete {
    /* Palette du chrome. Toutes les regles de sous-element ci-dessous ne lisent
       que ces variables : la variante d'accueil plus bas se contente donc de les
       redefinir, sans dupliquer une seule regle. C'est ce qui rend la bascule
       entre les deux en-tetes tenable quand on en ajuste le detail.

       Ici tout vient des echelles --ex-*, donc le mode sombre suit. La variante
       d'accueil, elle, doit passer en valeurs litterales : son ambre n'est pas
       redefini en sombre alors que les gris s'inversent. */
    --entete-fond: var(--ex-surface);
    --entete-filet: var(--ex-amber-300);

    --entete-encre: var(--ex-stone-900);
    --entete-encre-douce: var(--ex-stone-600);
    --entete-attenue: var(--ex-stone-500);

    --entete-contour: var(--ex-stone-200);
    --entete-contour-fort: var(--ex-stone-300);
    --entete-survol: var(--ex-stone-50);

    /* Elements poses sur la bande : champ de recherche, pilule, raccourci. */
    --entete-champ-fond: var(--ex-stone-100);
    --entete-champ-contour: var(--ex-stone-300);
    --entete-surface: var(--ex-surface);

    --entete-pastille-fond: var(--ex-amber-300);
    --entete-pastille-encre: var(--ex-amber-800);
    --entete-pastille-survol: var(--ex-amber-200);
    --entete-vide-fond: var(--ex-stone-100);
    --entete-vide-encre: var(--ex-stone-500);

    font-family: var(--ex-font);
    color: var(--entete-encre);
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 28px;
    background: var(--entete-fond);
    border-bottom: 1px solid var(--entete-filet);
}

.entete .marque,
.entete .marque:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--entete-encre);
    text-decoration: none;
    white-space: nowrap;
}
/* La marque est deja ecrite en toutes lettres a cote : le rond est decoratif,
   donc pose en fond plutot qu'en <img>. Le PNG est detoure, pas de clipping. */
.entete .marque::before {
    content: '';
    width: 22px;
    height: 22px;
    background: url('/images/logo-sqr-brd-128.png') center / contain no-repeat;
    flex-shrink: 0;
}

.entete .recherche {
    flex: 1;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 14px;
    background: var(--entete-champ-fond);
    border: 1px solid var(--entete-champ-contour);
    border-radius: 99px;
    transition: box-shadow .15s var(--ex-ease);
}
.entete .recherche:focus-within { box-shadow: var(--ex-focus-ring); }
.entete .recherche.en-cours { opacity: .6; }
.entete .recherche::before {
    content: '\2315';
    color: var(--entete-attenue);
    font-size: 14px;
    line-height: 1;
}
.entete .recherche input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: none;
    font-family: var(--ex-font);
    font-size: 13px;
    color: var(--entete-encre);
}
.entete .recherche input:focus { outline: none; }
.entete .recherche input::placeholder { color: var(--entete-attenue); }
.entete .recherche input::-webkit-search-cancel-button { display: none; }
.entete .recherche kbd {
    flex-shrink: 0;
    font-family: var(--ex-mono);
    font-size: 10.5px;
    color: var(--entete-attenue);
    background: var(--entete-surface);
    border: 1px solid var(--entete-contour);
    border-radius: 5px;
    padding: 2px 8px;
}

/* Enfant direct uniquement : les menus deroulants de la surface de compte sont
   aussi des <nav>, mais imbriques dans .compte. Sans le >, ils heriteraient de
   la disposition en ligne prevue pour la navigation du site et s'afficheraient
   a plat sur toute la largeur. */
.entete > nav { margin-left: auto; }
.entete > nav ul {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.entete > nav a,
.entete > nav a:visited {
    font-size: 13px;
    font-weight: 500;
    color: var(--entete-encre-douce);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s var(--ex-ease);
}
.entete > nav a:hover { color: var(--entete-encre); }

.entete .connexion,
.entete .connexion:visited {
    flex-shrink: 0;
    padding: 6px 14px;
    border: 1px solid var(--entete-contour);
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--entete-encre-douce);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s var(--ex-ease), color .15s var(--ex-ease), background .15s var(--ex-ease);
}
.entete .connexion:hover {
    border-color: var(--entete-contour-fort);
    background: var(--entete-survol);
    color: var(--entete-encre);
}

/* --- Surface de compte dans l'entete -------------------------------------------
   Deux boutons cote a cote, chacun avec son menu : la pilule porte les
   organisations et leurs actions, la pastille ne porte que le compte. Les deux
   menus sont ancres sur .compte plutot que sur leur bouton, ce qui les aligne
   sur le bord droit de l'entete quel que soit le nom de l'organisation. */

.entete .compte {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* L'entete doit passer au-dessus du contenu : les menus en debordent. */
.entete { position: relative; z-index: 20; }

/* Pastille de type d'organisation. Les trois couleurs sont celles des accents
   de fiche : un lecteur qui a vu une fiche entreprise en indigo retrouve le
   meme code ici. */
.entete .pastille-type {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ex-stone-300);
}
.entete .pastille-type[data-type="association"] { background: var(--ex-amber-400); }
.entete .pastille-type[data-type="entreprise"] { background: var(--ex-indigo-700); }
.entete .pastille-type[data-type="collectivite"] { background: var(--ex-rose-700); }
/* Reseau est la quatrieme valeur de l'enum Organisation.Type. La refonte 7a ne
   lui a pas attribue d'accent, et reseau-public.css n'utilise que des neutres :
   le gris n'est donc pas un defaut de rendu, c'est l'absence assumee d'identite
   chromatique pour ce type. A remplacer le jour ou 7a en definit une. */
.entete .pastille-type[data-type="reseau"] { background: var(--ex-stone-400); }

.entete .pilule-orga {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    padding: 6px 14px;
    border: 1px solid var(--entete-contour);
    border-radius: 99px;
    background: var(--entete-surface);
    font-family: var(--ex-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--entete-encre);
    cursor: pointer;
    transition: border-color .15s var(--ex-ease), box-shadow .15s var(--ex-ease);
}
.entete .pilule-orga:hover { border-color: var(--entete-contour-fort); box-shadow: var(--ex-shadow-sm); }
/* Un nom long est tronque plutot que d'ecraser la navigation a sa gauche. */
.entete .pilule-orga .nom-orga {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.entete .pilule-orga .chevron { flex-shrink: 0; }

/* Pastille de compte : initiales derivees, jamais stockees. L'ambre est le meme
   pour tous les comptes, il n'est pas derive d'un hash du nom. */
.entete .pastille-compte {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: var(--entete-pastille-fond);
    color: var(--entete-pastille-encre);
    font-family: var(--ex-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s var(--ex-ease);
}
.entete .pastille-compte:hover { background: var(--entete-pastille-survol); }
/* Compte sans nom ni organisation : neutre, pas ambre. La pastille dit "compte
   incomplet" sans faire croire a une identite. */
.entete .pastille-compte.pastille-vide {
    background: var(--entete-vide-fond);
    color: var(--entete-vide-encre);
    font-weight: 400;
}
.entete .pastille-compte.pastille-vide:hover { background: var(--entete-contour); }

/* --- Menus deroulants ----------------------------------------------------------- */

.entete .menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    /* Une largeur bornee dans les deux sens : sans plafond, un nom
       d'organisation a rallonge etirerait le menu sur toute l'entete. */
    min-width: 280px;
    max-width: 340px;
    padding: 6px 0;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 12px;
    box-shadow: var(--ex-shadow-md);
    font-size: 13.5px;
}

.entete .menu h2 {
    padding: 10px 18px 8px;
    font-family: var(--ex-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}

/* Un compte peut porter beaucoup d'organisations : la liste defile plutot que
   de pousser les actions hors de l'ecran. Le plafond laisse voir environ sept
   entrees, assez pour que le defilement se devine. */
.entete .menu .orgas {
    max-height: 266px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.entete .menu .orga {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 18px;
    border: 0;
    background: none;
    font-family: var(--ex-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--ex-stone-800);
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--ex-ease);
}
.entete .menu .orga:hover { background: var(--ex-stone-50); }

/* Le menu reste ouvert apres selection : l'etat actif doit donc se lire d'un
   coup d'oeil, et se distinguer du simple survol. Un filet d'accent a gauche
   plutot qu'un fond plus soutenu, qui entrerait en concurrence avec le survol
   de la ligne voisine. */
.entete .menu .orga.active {
    background: var(--ex-amber-50);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--ex-amber-400);
}
.entete .menu .orga.active:hover { background: var(--ex-amber-100); }
.entete .menu .orga.active .marque-active { color: var(--ex-amber-700); }
.entete .menu .orga .nom {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Marque l'organisation active. Une coche dirait "coche pour selectionner" ;
   ce chevron mono dit "celle-ci est ouverte". */
.entete .menu .marque-active {
    flex-shrink: 0;
    font-family: var(--ex-mono);
    font-size: 11px;
    color: var(--ex-stone-400);
}

.entete .menu .actions {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ex-stone-100);
}
.entete .menu .actions a,
.entete .menu .actions button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 18px;
    border: 0;
    background: none;
    font-family: var(--ex-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ex-link);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s var(--ex-ease), color .15s var(--ex-ease);
}
.entete .menu .actions a:hover,
.entete .menu .actions button:hover { background: var(--ex-stone-50); color: var(--ex-link-hover); }

/* Nombre d'annonces, cale a droite de son libelle. */
.entete .menu .compteur {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 99px;
    background: var(--ex-stone-100);
    color: var(--ex-stone-600);
    font-family: var(--ex-mono);
    font-size: 11px;
    font-weight: 400;
}

.entete .menu-compte { min-width: 200px; }
.entete .menu-compte ul { padding: 0; }
.entete .menu-compte a,
.entete .menu-compte button {
    display: block;
    width: 100%;
    padding: 9px 18px;
    border: 0;
    background: none;
    font-family: var(--ex-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ex-link);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s var(--ex-ease);
}
.entete .menu-compte a:hover,
.entete .menu-compte button:hover { background: var(--ex-stone-50); }

/* --- Entete de la page d'accueil ------------------------------------------------
   L'accueil s'ouvre sur une banniere ambre pleine largeur. Une entete claire y
   poserait une marche entre deux aplats : elle prend donc le #ffbb09 de l'ancien
   en-tete (--main-color-green-3 dans common-tweak.css, qui vaut l'ambre malgre
   son nom, soit --ex-amber-400) et se fond dans la banniere. Le filet passe en
   transparent pour la meme raison, le pixel restant dans le flux pour que rien
   ne se decale.

   Cette variante ne redefinit que la palette declaree sur .entete : aucune regle
   de sous-element n'est reecrite ici. Ajuster un detail du chrome se fait donc a
   un seul endroit et vaut pour les deux en-tetes.

   Valeurs litterales, contrairement a la variante claire : --ex-amber-400 n'est
   pas redefini en mode sombre alors que les echelles de gris s'inversent. Sur
   une bande qui reste jaune vif, des gris inverses donneraient du texte clair
   illisible. Meme convention que .pied plus bas, qui declare ses propres neutres.

   Portee par la presence de la banniere et non par une classe de page : toute
   page future qui ouvrirait sur un .hero heriterait du bon en-tete sans cablage. */

body:has(> .hero) .entete {
    --entete-fond: var(--ex-amber-400);
    --entete-filet: transparent;

    --entete-encre: #1c1917;
    --entete-encre-douce: #57443a;
    --entete-attenue: #78716c;

    --entete-contour: rgba(28, 25, 23, .16);
    --entete-contour-fort: #1c1917;
    --entete-survol: rgba(255, 255, 255, .35);

    /* Le champ passe en blanc plein : le gris clair de la variante claire se
       noierait dans l'ambre. */
    --entete-champ-fond: #ffffff;
    --entete-champ-contour: rgba(28, 25, 23, .10);
    --entete-surface: #ffffff;

    /* Une pastille ambre sur fond ambre disparaitrait : fond blanc, initiales
       en ambre fonce. */
    --entete-pastille-fond: #ffffff;
    --entete-pastille-encre: #92400e;
    --entete-pastille-survol: rgba(255, 255, 255, .78);
    --entete-vide-fond: rgba(255, 255, 255, .55);
    --entete-vide-encre: #57443a;
}

/* --- Racine et neutralisation de common.css -------------------------------- */

.v7,
.v7 *,
.v7 *::before,
.v7 *::after { box-sizing: border-box; }

.v7 {
    /* Accent par type d'organisation. Trois variables, une seule regle de
       degrade : les fiches inscrites n'auront qu'a poser data-orga. */
    --accent-clair: var(--ex-amber-400);
    --accent-fonce: var(--ex-accent);
    --accent-titre: var(--ex-amber-700);
    /* Badge du type d'organisation, decline sur la meme echelle que l'accent. */
    --accent-badge-fond: var(--ex-amber-100);
    --accent-badge-texte: var(--ex-amber-800);

    /* width: 100% est indispensable : .v7 est un element de la grille du body,
       et un element de grille dont les marges sont automatiques n'est pas
       etire a la largeur de sa piste, il est dimensionne sur son contenu puis
       centre. Sans cette ligne, max-width n'est qu'un plafond jamais atteint
       et une fiche pauvre s'affiche deux fois plus etroite qu'une fiche
       fournie. */
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 18px 28px 32px;
    font-family: var(--ex-font);
    font-size: 14px;
    color: var(--ex-stone-800);
    -webkit-font-smoothing: antialiased;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    row-gap: 18px;
    column-gap: 26px;
    align-items: start;
    /* Centrer le bloc entier plutot que laisser les lignes s'etirer : sinon
       chaque ligne auto absorbe une part de la hauteur libre et les elements
       se retrouvent isoles les uns des autres, ce qui saute aux yeux des qu'une
       ligne s'ajoute (bandeau d'information). safe evite le debordement en haut
       quand le contenu depasse la hauteur disponible. */
    align-content: safe center;
}

.v7[data-orga="entreprise"] {
    --accent-clair: var(--ex-indigo-300);
    --accent-fonce: var(--ex-indigo-700);
    --accent-titre: var(--ex-indigo-700);
    --accent-badge-fond: var(--ex-indigo-100);
    --accent-badge-texte: var(--ex-indigo-700);
}

.v7[data-orga="collectivite"] {
    --accent-clair: var(--ex-rose-300);
    --accent-fonce: var(--ex-rose-700);
    --accent-titre: var(--ex-rose-700);
    --accent-badge-fond: var(--ex-rose-100);
    --accent-badge-texte: var(--ex-rose-700);
}

/* Seules la colonne principale et la laterale occupent une colonne : tout autre
   enfant direct (fil d'Ariane, bandeau d'information) traverse la grille. Sans
   cette regle, un bandeau ajoute a la racine prendrait une seule cellule et
   decalerait main et aside d'une colonne. */
.v7 > :not(main):not(aside) { grid-column: 1 / -1; }

.v7 > main,
.v7 > aside {
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0;
}

.v7 section { margin: 0; }
.v7 span { font-weight: inherit; }
/* ol autant que ul : l'omission est restee invisible tant que le seul ol de la
   v7 etait le fil d'Ariane, qui se neutralise lui-meme. Toute liste ordonnee
   ajoutee ensuite ressortait avec ses puces natives en plus de sa numerotation
   de presentation. */
.v7 ul,
.v7 ol { list-style: none; margin: 0; padding: 0; }
.v7 li { margin: 0; }
.v7 p { margin: 0; }
.v7 p::first-letter { text-transform: none; }
.v7 h1,
.v7 h2,
.v7 h3 { margin: 0; padding: 0; color: inherit; text-align: left; font-size: inherit; }
.v7 h2::first-letter { text-transform: none; }
.v7 address { font-style: normal; }
.v7 dl, .v7 dd { margin: 0; }
.v7 time { font-weight: inherit; font-family: var(--ex-mono); }
.v7 button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: inherit;
}

/* --- Liens ----------------------------------------------------------------- */

.v7 a,
.v7 a:visited {
    color: var(--ex-link);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s var(--ex-ease);
}
.v7 a:hover { color: var(--ex-link-hover); }

/* Seule la prose souligne. Les puces et le fil d'Ariane restent nus. */
.v7 .chapeau a,
.v7 .prose a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--ex-link) 30%, transparent);
    text-underline-offset: 2px;
}
.v7 .chapeau a:hover,
.v7 .prose a:hover { text-decoration-color: var(--ex-link-hover); }

.v7 .lien-action { color: var(--ex-link-action); }
.v7 .lien-action:hover { color: var(--ex-link-action-hover); }
.v7 .lien-discret { color: var(--ex-stone-600); font-size: 12.5px; }
.v7 .lien-discret:hover { color: var(--ex-stone-800); }

/* --- Focus ----------------------------------------------------------------- */

.v7 button:focus { box-shadow: none; }
.v7 :focus-visible {
    outline: 2px solid var(--ex-accent);
    outline-offset: 2px;
    box-shadow: var(--ex-focus-ring);
}

/* --- Fil d'Ariane ---------------------------------------------------------- */

.v7 .fil-ariane { font-size: 12px; color: var(--ex-stone-600); }
.v7 .fil-ariane ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Chaque segment reste d'un bloc : c'est le fil qui passe a la ligne, pas les
   libelles, sinon les segments longs se chevauchent. */
.v7 .fil-ariane li {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
.v7 .fil-ariane li + li::before { content: '/'; color: var(--ex-stone-300); }
.v7 .fil-ariane a { font-weight: 400; }
.v7 .fil-ariane [aria-current] {
    color: var(--ex-stone-700);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Carte ----------------------------------------------------------------- */

.v7 .carte {
    position: relative;
    background: var(--ex-surface);
    border: 1px solid var(--ex-stone-200);
    border-radius: 14px;
    box-shadow: var(--ex-shadow-sm);
    overflow: hidden;
}

/* Bandeau d'accent 3px, en pseudo-element pour ne pas ajouter d'element. */
.v7 .carte-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* Aplat de l'accent du type sur les fiches de donnees publiques : l'orange
       qui occupait le centre ajoutait une seconde couleur a une bande de 3px,
       la ou une seule suffit a dire le type.

       Les fiches inscrites gardent le degrade complet et s'en servent comme
       marqueur : organisation-v7.css le retablit sur .fiche-inscrite. La bande
       distingue donc au premier coup d'oeil une fiche tenue par la structure
       d'une fiche construite sur les donnees publiques. */
    background: var(--accent-clair);
}

/* --- Rangee label / valeur -------------------------------------------------- */

.v7 .rangee {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ex-stone-100);
    align-items: baseline;
}
/* --- Les deux seuls styles de titre de la v7 ---------------------------------
   Titre de carte : capitales, accent du type d'organisation. Il nomme un bloc
   autonome, carte de donnees ou carte de colonne.
   Label de rangee : capitales grises. Il nomme un champ a l'interieur d'un bloc.
   Toute nouvelle rubrique doit tomber dans l'une ou l'autre, sans troisieme
   voie : c'est ce qui tient la hierarchie lisible. */

.v7 .titre-carte {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-titre);
    line-height: 1.4;
}

.v7 .rangee > h2,
.v7 .rangee > h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ex-stone-500);
}
.v7 .rangee-accent > h2,
.v7 .rangee-accent > h3 { color: var(--accent-titre); }

/* Tout ce qui n'est pas le label occupe la colonne de valeur, ce qui autorise
   plusieurs blocs par rangee sans conteneur intermediaire. */
.v7 .rangee > :not(h2):not(h3) { grid-column: 2; }

/* --- Puce (chip) ------------------------------------------------------------ */

.v7 .puces { display: flex; flex-wrap: wrap; gap: 8px; }
/* Une liste vide occuperait quand meme une ligne de la rangee et pousserait le
   message qui la suit sous le label. On la retire tant qu'elle n'a rien ;
   la regle cesse de s'appliquer des que le JS y ajoute une puce. */
.v7 .puces:not(:has(li)) { display: none; }
.v7 .puces > li { min-width: 0; max-width: 100%; }

.v7 .puce {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    border: 1px solid var(--ex-stone-200);
    background: var(--ex-stone-50);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ex-link);
    /* Une puce longue revient a la ligne plutot que de deborder de la carte.
       Le separateur reste insecable grace aux &nbsp; qui l'encadrent dans le
       template, ce qui suffit a tenir la regle du handoff. */
    white-space: normal;
    overflow-wrap: break-word;
    transition: border-color .15s var(--ex-ease), box-shadow .15s var(--ex-ease), color .15s var(--ex-ease);
}
.v7 .puce:hover {
    border-color: var(--ex-stone-300);
    box-shadow: var(--ex-shadow-sm);
    color: var(--ex-link-hover);
}

/* Puce masquee : reserve pour les fiches entreprise et collectivite (etape 2). */
.v7 .puce-masquee {
    border: 1px dashed var(--ex-stone-300);
    background: none;
    color: var(--ex-stone-600);
}

/* --- Sorties ------------------------------------------------------------------
   Rangee de tuiles de navigation posee apres la fiche : ce sont des portes de
   sortie, pas du contenu. Le territoire titre la tuile parce qu'il est court et
   de longueur comparable d'une tuile a l'autre ; l'activite, variable et
   parfois longue, passe en sous-titre. Les tuiles restent donc alignees. */

.v7 .sorties ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.v7 .sorties a {
    display: block;
    height: 100%;
    padding: 12px 34px 12px 14px;
    position: relative;
    border: 1px solid var(--ex-stone-200);
    border-radius: 10px;
    background: var(--ex-surface);
    transition: border-color .15s var(--ex-ease), box-shadow .15s var(--ex-ease), transform .15s var(--ex-ease);
}
.v7 .sorties a::after {
    content: '\2192';
    position: absolute;
    top: 12px;
    right: 14px;
    color: var(--ex-stone-400);
    font-family: var(--ex-mono);
    transition: color .15s var(--ex-ease), transform .15s var(--ex-ease);
}
.v7 .sorties a:hover {
    border-color: var(--ex-stone-300);
    box-shadow: var(--ex-shadow-sm);
    transform: translateY(-1px);
}
.v7 .sorties a:hover::after { color: var(--accent-titre); transform: translateX(2px); }

.v7 .sorties .territoire {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ex-link);
}
.v7 .sorties .precision {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--ex-stone-500);
}

/* --- Micro-etiquette et separateur mono ------------------------------------- */

.v7 .etiquette {
    font-family: var(--ex-mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ex-stone-500);
}

.v7 .sep {
    font-family: var(--ex-mono);
    font-size: 11.5px;
    color: var(--ex-stone-500);
    white-space: nowrap;
}

/* --- Badges ----------------------------------------------------------------- */

.v7 .badges { display: flex; flex-wrap: wrap; gap: 7px; }

.v7 .badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.v7 .badge-actif { background: var(--ex-green-100); color: var(--ex-green-900); }
.v7 .badge-inactif { background: var(--ex-red-100); color: var(--ex-red-900); }
.v7 .badge-distinction { background: var(--ex-amber-100); color: var(--ex-amber-800); }
/* Le lieu et l'activite sont deux facettes du meme rangement : meme allure. */
.v7 .badge-lieu,
.v7 .badge-activite { background: var(--ex-indigo-100); color: var(--ex-indigo-700); }
.v7 a.badge-lieu:hover,
.v7 a.badge-activite:hover { background: var(--ex-indigo-200); color: var(--ex-indigo-800); }
.v7 .badge-date,
.v7 .badge-id {
    background: var(--ex-stone-100);
    color: var(--ex-stone-600);
    font-family: var(--ex-mono);
    font-weight: 400;
    font-size: 11.5px;
}
.v7 a.badge-id:hover { background: var(--ex-stone-200); color: var(--ex-stone-800); }

/* Badge qui declenche l'ouverture d'un panneau ailleurs dans la page. */
.v7 .badge-lien { transition: background .15s var(--ex-ease), color .15s var(--ex-ease); }
.v7 .badge-lien:hover { background: var(--ex-amber-100); color: var(--ex-amber-800); }

/* --- Prose ------------------------------------------------------------------ */

.v7 .chapeau {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ex-stone-700);
    /* La carte s'elargit avec le conteneur, pas la ligne de lecture : au-dela
       d'environ 80 signes l'oeil perd le debut de la ligne suivante. 68rem
       plafonne la mesure sans contraindre la carte. */
    max-width: 68rem;
}
/* L'objet social arrive en minuscules depuis le RNA. */
.v7 .chapeau::first-letter { text-transform: uppercase; }

.v7 .prose { font-size: 13.5px; line-height: 1.7; color: var(--ex-stone-700); }
.v7 .prose + .prose { margin-top: 4px; }

.v7 .meta { font-size: 12px; color: var(--ex-stone-600); }

/* --- Boutons ---------------------------------------------------------------- */

.v7 .bouton-primaire {
    display: block;
    text-align: center;
    background: var(--ex-amber-400);
    color: var(--ex-text-on-accent);
    font-size: 14px;
    font-weight: 700;
    padding: 11px;
    border-radius: 8px;
    box-shadow: var(--ex-shadow-golden);
    transition: background .15s var(--ex-ease), transform .15s var(--ex-ease);
}
.v7 .bouton-primaire:hover {
    background: var(--ex-accent);
    color: var(--ex-text-on-accent);
    transform: translateY(-1px);
}

/* --- Pied de page ------------------------------------------------------------
   La bande sombre reste sombre dans les deux themes : elle ne peut donc pas
   piocher dans les echelles de tokens.css, qui s'inversent en mode sombre. Ses
   six neutres sont declares ici, une fois, et consommes par var(). L'ambre vient
   bien des tokens : --ex-amber-400 n'est pas redefini en sombre. */

.pied {
    --pied-fond: #1c1917;
    --pied-texte: #d6d3d1;
    --pied-attenue: #a8a29e;
    --pied-discret: #78716c;
    --pied-separateur: #57534e;
    --pied-marque: #fafaf9;
    --pied-filet: rgba(255, 255, 255, .08);

    font-family: var(--ex-font);
    -webkit-font-smoothing: antialiased;
    /* common.css est charge sur tout le site et pose sur l'element footer un
       text-align: center et un margin-top qui, sans ces deux lignes,
       centreraient les colonnes et ouvriraient un blanc au-dessus de la bande
       sombre.
       user-select: auto est defensif : la regle a ete retiree de common.css,
       mais common-tweak.css en garde une copie et peut etre charge par une
       page. Un pied doit rester copiable. */
    text-align: left;
    margin: 0;
    user-select: auto;
    display: grid;
    /* La marque absorbe l'espace libre, les trois colonnes de liens se
       dimensionnent sur leur contenu et se groupent a droite. Avec quatre
       pistes egales elles s'etalaient sur toute la largeur et chaque libelle
       flottait seul au depart d'une piste de 460px. */
    grid-template-columns: 1fr auto auto auto;
    gap: 28px 56px;
    padding: 34px 28px 18px;
    background: var(--pied-fond);
    color: var(--pied-texte);
    font-size: 12.5px;
}

.pied a,
.pied a:visited { color: var(--pied-texte); text-decoration: none; font-weight: 400; }
.pied a:hover { color: var(--pied-marque); }
.pied .sep { color: var(--pied-separateur); font-family: var(--ex-mono); }

.pied .marque {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--pied-marque);
}
.pied .marque::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('/images/logo-sqr-brd-128.png') center / contain no-repeat;
    flex-shrink: 0;
}
.pied .baseline {
    margin: 10px 0 0;
    max-width: 240px;
    line-height: 1.6;
    color: var(--pied-attenue);
}
.pied .sources {
    margin: 14px 0 0;
    font-family: var(--ex-mono);
    font-size: 11px;
    color: var(--pied-discret);
}

.pied-liens h2 {
    margin: 0 0 12px;
    font-family: var(--ex-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ex-amber-400);
}
/* 12px, et non les 9px d'origine : la marge fantome des li ajoutait 16px a
   l'espacement reel depuis toujours. On garde l'aspect valide en le declarant,
   au lieu de laisser les colonnes se resserrer d'un coup. */
.pied-liens ul { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

.pied-bas {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 8px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--pied-filet);
    font-size: 11.5px;
}
.pied-bas .copyright { color: var(--pied-discret); }
.pied-bas .legal a { color: var(--pied-attenue); }
.pied-bas .legal a:hover { color: var(--pied-texte); }

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 968px) {
    .entete { flex-wrap: wrap; gap: 12px 18px; padding: 10px 16px; }
    .entete .recherche { order: 3; flex-basis: 100%; max-width: none; }
    .entete nav ul { gap: 16px; }

    .v7 {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 14px;
        padding: 12px 16px 24px;
    }

    .pied { grid-template-columns: 1fr 1fr; gap: 24px; padding: 26px 18px 16px; }
    .pied-marque { grid-column: 1 / -1; }
    .pied .baseline { max-width: none; }
}

@media (max-width: 640px) {
    /* Le fil se replie sur ses deux derniers segments, les precedents sont
       resumes par des points de suspension. Une seule ligne, jamais de
       chevauchement. */
    .v7 .fil-ariane ol { flex-wrap: nowrap; }
    .v7 .fil-ariane li:not(:nth-last-child(-n + 2)) { display: none; }
    .v7 .fil-ariane li:nth-last-child(2):not(:first-child)::before { content: '\2026 /'; }

    .v7 .rangee { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .v7 .rangee > :not(h2):not(h3) { grid-column: 1; }

    .v7 .sorties ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }

    .v7 .chapeau { font-size: 15px; line-height: 1.65; }

    .entete { gap: 10px 14px; }
    .entete .marque { font-size: 17px; }
    .entete .marque::before { width: 20px; height: 20px; }
    .entete nav ul { gap: 14px; }
    .entete nav a { font-size: 12.5px; }
    .entete .recherche kbd { display: none; }

    /* La pilule se reduit a sa pastille de type : le nom de l'organisation est
       la premiere chose a sacrifier, il est repete dans le menu juste dessous.
       Les deux surfaces restent distinctes, comme en large. */
    .entete .pilule-orga { padding: 6px 10px; gap: 6px; }
    .entete .pilule-orga .nom-orga { display: none; }
    .entete .pastille-compte { width: 32px; height: 32px; font-size: 11.5px; }
    /* Ancres sur le bord de l'ecran plutot que sur .compte, sinon un menu de
       280px deborde a droite sur les petites largeurs. */
    .entete .menu { right: -8px; min-width: min(280px, calc(100vw - 32px)); }

    .pied { grid-template-columns: 1fr; }
    .pied-bas { justify-content: flex-start; }
}