/* utilitaires.css : pages légales, plan du site et page 404, système Arche.

   Ces pages se lisent plus qu'elles ne se regardent : on leur donne le même
   seuil que l'accueil (baie cintrée qui s'ouvre, moulure de pierre, rameau
   en filigrane, titre qui monte) puis une lecture calme sur l'enduit.

   Le héros réutilise la mise en page .edito-hero de core.css (CSS critique)
   et ne fait ici que la recaler sur la maquette Arche : surtitre à petite
   arche, texte centré face à la baie, légende italique sous la baie, baie
   verticale sur tablette. Les colonnes restent celles de core.css sur
   bureau : le premier affichage ne saute pas.

   Le geste propre à la famille : « le fil de lecture ». Un fil de pierre
   relie les numéros des articles et se trace au défilement (data-fil), et
   la niche du sommaire suit l'article lu (point d'argile en arche, posé par
   un petit script de la page, aria-current). Sans JavaScript, le sommaire
   reste une liste d'ancres complète.

   Aucune règle ne cache de contenu en attendant une animation. */

@layer components {
  /* ======================================================================
     Le héros commun : décor seulement, la grille est dans core.css
     ====================================================================== */
  /* Le texte passe au-dessus du rameau en filigrane (z-index 0 dans core). */
  .utile-hero .edito-hero__grille { position: relative; z-index: 1; }
  .utile-hero__meta { font: italic 1.15rem / 1.35 var(--serif); color: var(--argile); }
  /* La légende sous la baie, comme au héros de l'accueil : italique, le nom
     de la matière en argile. Elle reprend le texte alternatif. */
  .utile-legende { max-width: none; font: 1.02rem / 1.3 var(--serif); color: var(--encre-doux); }
  .utile-legende em { color: var(--argile); }

  /* La baie garde les mesures de core.css. Toutes les feuilles de pages sont
     chargées partout : celle de la famille éditoriale règle .edito-hero pour
     ses propres pages (baie plus haute, décalée à 88 % sur téléphone). On
     fige ici nos valeurs, avec une spécificité plus forte, pour que nos
     héros ne dépendent pas d'une autre famille.

     Dès 700 px, deux colonnes comme la maquette Arche : le texte, centré
     verticalement face à la baie (rangées 1fr de part et d'autre), et la
     baie à droite, sa légende dessous. Sous 700 px, la pile de core.css :
     surtitre, titre, baie, chapo et boutons. */
  @media (min-width: 700px) {
    /* display: grid explicite : sous 900 px, editorial.css passe la grille
       .edito-hero__grille en flex colonne pour ses propres pages. */
    .utile-hero .edito-hero__grille { display: grid; grid-template-rows: 1fr auto auto auto 1fr auto; align-items: start; }
    .utile-hero .edito-hero__grille > .surtitre { grid-column: 1; grid-row: 2; margin-bottom: 1.1rem; }
    .utile-hero .edito-hero__grille > h1 { grid-column: 1; grid-row: 3; align-self: start; padding-top: 0; }
    .utile-hero .edito-hero__grille > .edito-hero__intro { grid-column: 1; grid-row: 4; margin-top: var(--esp-l); }
    .utile-hero .edito-hero__grille > .edito-hero__panneau { grid-column: 2; grid-row: 1 / 6; }
    /* La légende colle à la baie même quand la colonne de texte est plus
       haute qu'elle : elle couvre toutes les rangées, décalée de la hauteur
       de la baie. */
    .utile-hero .edito-hero__grille > .utile-legende { grid-column: 2; grid-row: 1 / -1; align-self: start; margin-top: calc(var(--baie-y, 0px) + var(--baie-h) + 1.1rem); }
    /* La moulure de pierre qui suit la baie à 16 px, base ouverte, comme au
       héros de l'accueil. Même cellule que la baie ; son opacité suit
       --moulure, que la séquence d'ouverture fait monter. */
    .utile-moulure {
      display: block; grid-column: 2; grid-row: 1 / 6; align-self: start; justify-self: stretch;
      height: calc(var(--baie-h) + 16px); margin: -16px -16px 0;
      border: 1px solid var(--pierre); border-bottom: 0; border-radius: var(--cintre);
      opacity: var(--moulure, 1); pointer-events: none;
    }
  }
  @media (min-width: 900px) {
    .utile-hero { --baie-h: clamp(440px, 72svh, 700px); }
    .utile-hero .edito-hero__grille > .edito-hero__panneau { width: 100%; height: var(--baie-h); margin: 0; }
  }
  /* Tablette : une baie verticale (4 / 5) à droite du titre. Pleine largeur
     et basse, elle devenait un demi-disque écrasé de 544 × 333 px. */
  @media (min-width: 700px) and (max-width: 899px) {
    .utile-hero { --baie-l: clamp(15rem, 36vw, 19rem); --baie-h: calc(var(--baie-l) * 1.25); --baie-y: 16px; }
    .utile-hero .edito-hero__grille { grid-template-columns: minmax(0, 1fr) var(--baie-l); column-gap: clamp(2rem, 5vw, 2.75rem); }
    .utile-hero .edito-hero__grille > .edito-hero__panneau { width: var(--baie-l); height: var(--baie-h); margin: var(--baie-y) 0 0; }
    .utile-moulure { margin-top: 0; }
  }
  @media (max-width: 699px) {
    .utile-hero .edito-hero__grille > .edito-hero__panneau { order: 2; width: min(100%, 34rem); height: clamp(240px, 37svh, 400px); margin: var(--esp-m) 0 0; }
    .utile-hero .edito-hero__grille > h1 { order: 1; }
    .utile-hero .edito-hero__grille > .edito-hero__intro { order: 3; }
    .utile-hero .edito-hero__grille > .surtitre { margin-bottom: .7rem; }
    /* Sur téléphone, la légende s'efface : le chapo et les boutons doivent
       rester dans le premier écran. */
    .utile-legende, .utile-moulure { display: none; }
  }
  /* Sur téléphone et tablette, le rameau se fait plus petit : il reste en
     haut, derrière le titre, et ne passe pas sous le chapo. (Aucune taille
     de texte n'est changée ici : cette feuille est différée, le héros ne
     doit pas bouger.) */
  @media (max-width: 899px) {
    .utile-hero .rameau--hero { width: 70vw; height: 70vw; top: -2%; left: -24%; }
  }

  /* ======================================================================
     Pages légales : la niche du sommaire, le fil, les articles
     ====================================================================== */
  .legale-corps { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; padding-block: var(--section-y-s) var(--section-y); }
  @media (min-width: 900px) {
    .legale-corps { grid-template-columns: minmax(250px, 3fr) minmax(0, 8fr); }
    .legale-sommaire { position: sticky; top: calc(var(--h-entete) + 2rem); }
  }

  /* Le sommaire dans une niche d'enduit clair : haut en anse de panier, bas arrondi. */
  .legale-sommaire {
    padding: 2.6rem clamp(1.25rem, 2vw, 1.8rem) 1.2rem;
    border-radius: 50% 50% var(--rayon) var(--rayon) / 92px 92px var(--rayon) var(--rayon);
    background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55), var(--ombre-douce);
  }
  .legale-sommaire__titre { margin: 0 auto 1rem; font: italic 500 1.2rem / 1.3 var(--serif); color: var(--argile); text-align: center; }
  .legale-sommaire ol { display: grid; margin: 0; padding: 0; list-style: none; border-top: var(--filet); }
  .legale-sommaire li { max-width: none; }
  /* Les liens d'index (sommaire, plan, registre) ne sont pas des liens de
     texte : ils n'héritent ni du demi-gras ni du filet de la couche base. */
  .legale-sommaire a, .plan-liste a, .plan-communes a, .utile-registre .registre__titre a { font-weight: 400; background: none; }
  .legale-sommaire a {
    position: relative; display: flex; align-items: baseline; gap: .8rem; min-height: var(--cible);
    padding: .72rem 0 .72rem 1.1rem; border-bottom: var(--filet);
    font-size: var(--fs-petit); line-height: 1.4; color: var(--encre-doux);
    transition: color var(--dur-survol) var(--doux);
  }
  .legale-sommaire li:last-child a { border-bottom: 0; }
  .legale-sommaire .u-num { flex: none; min-width: 1.4rem; font-size: .8rem; color: var(--argile); }
  /* Le point d'argile en petite arche : il se pose devant l'article lu. */
  .legale-sommaire a::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 9px; margin-top: -4.5px;
    border-radius: 999px 999px 1px 1px; background: var(--argile);
    opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-survol) var(--doux), transform var(--dur-survol) var(--doux);
  }
  .legale-sommaire a:is(:hover, :focus-visible, [aria-current]) { color: var(--encre); }
  .legale-sommaire a:is(:hover, :focus-visible, [aria-current])::before { opacity: 1; transform: none; }
  .legale-sommaire a[aria-current] .u-num { color: var(--encre); }

  /* Les articles et leur fil. Le fil passe derrière les numéros, qui ont le
     fond de la page : on lit une ligne de pierre qui relie chaque arche. */
  .legale-articles { position: relative; display: grid; gap: var(--esp-xl); }
  /* Un fil plein : en dégradé vers le transparent, il s'effaçait entre les
     deux derniers numéros et le fil de lecture cassait avant la fin. */
  .legale-fil { position: absolute; left: 19.5px; top: 24px; bottom: 0; width: 1px; background: var(--pierre); pointer-events: none; }
  /* Il s'arrête au dernier numéro : sous la dernière arche, une bande
     d'enduit de la largeur de la colonne des numéros le recouvre (elle
     vient après le fil dans le document, donc passe devant). */
  .legale-articles > .legale-article:last-child::after { content: ""; position: absolute; left: 0; top: 48px; bottom: 0; width: 40px; background: var(--chaux); pointer-events: none; }
  .legale-article { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start; scroll-margin-top: calc(var(--h-entete) + 1.5rem); }
  .legale-article__num {
    position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 48px; padding-top: 6px; max-width: none;
    border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; background: var(--chaux);
    font-size: .9rem; color: var(--argile);
  }
  .legale-article__corps { min-width: 0; padding-top: .3rem; }
  .legale-article__corps > * + * { margin-block-start: var(--esp-s); }
  .legale-article__corps h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
  .legale-article__corps p, .legale-article__corps li { color: var(--encre-doux); max-width: var(--mesure); }
  .legale-article__corps strong { color: var(--encre); font-weight: var(--fw-appui); }
  /* Les liens dans le texte (téléphone, e-mail, formulaire) : une cible de
     44 px au moins sans bouger les lignes. Le rembourrage agrandit la zone
     cliquable, la marge négative rend la place prise. Le filet du survol
     (couche base) reste sous le texte : il se cale sur la boîte de contenu. */
  .legale-article__corps a { display: inline-block; padding-block: .6rem; margin-block: -.6rem; background-origin: content-box; }
  /* Sans arrondi : le rayon de .table-wrap rognait les extrémités du
     dernier filet, rentré de 10 px de chaque côté. */
  .legale-article__corps .table-wrap { margin-top: var(--esp-m); border-radius: 0; }
  /* La durée tient sur une ligne (« Durée de la session »). */
  @media (min-width: 700px) { .table-stockages td:nth-child(3) { white-space: nowrap; } }

  /* Le tableau des traitements : un bloc par ligne sur téléphone, le libellé
     de colonne repris en italique devant chaque valeur (attribut data-l). */
  @media (max-width: 699px) {
    .legale-article table.data, .legale-article table.data tbody, .legale-article table.data tr, .legale-article table.data td { display: block; width: 100%; }
    .legale-article table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .legale-article table.data tr { padding: 1rem 1.1rem; margin-bottom: .8rem; border-radius: var(--rayon-s); background: var(--chaux-clair); box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .55); }
    .legale-article table.data td { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: .8rem; padding: .45rem 0; border: 0; }
    .legale-article table.data td + td { border-top: var(--filet); }
    .legale-article table.data td::before { content: attr(data-l); font: italic 1rem / 1.35 var(--serif); color: var(--argile); }
    .legale-article table.data td:first-child { font-weight: var(--fw-appui); color: var(--encre); }
  }

  /* ---- Les autres pages d'information : enduit, registre à numéros en arche ---- */
  .legale-suite { padding-block: var(--section-y); }
  .legale-suite__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .legale-suite__titre { font-size: var(--fs-h2-s); max-width: 12em; }
  @media (min-width: 900px) { .legale-suite__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

  /* Registre de la famille : le numéro dans une petite arche de pierre. */
  /* Le numéro s'aligne sur la première ligne du titre, et non sur le
     milieu du bloc titre + description (décalé de 44 px sur téléphone). */
  .utile-registre .registre__ligne { padding-block: 1.35rem; align-items: start; }
  .utile-registre .registre__ligne > .u-num:first-child {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; padding-top: 6px;
    border: 1px solid var(--pierre); border-radius: 999px 999px 4px 4px; font-size: .84rem; color: var(--argile);
    transition: background-color var(--dur-survol) var(--doux), border-color var(--dur-survol) var(--doux);
  }
  .utile-registre .registre__ligne:is(:hover, :focus-within) > .u-num:first-child { border-color: var(--argile); background: var(--chaux-clair); }
  .utile-registre .registre__titre a { display: inline-block; min-height: var(--cible); padding-block: .35rem .1rem; }

  /* ======================================================================
     Plan du site
     ====================================================================== */
  .plan-reperes { padding-block: 0 var(--section-y-s); }
  .plan-reperes .stats { padding-block: var(--bloc-y); border-block: var(--filet); }

  .plan-section { padding-block: var(--section-y-s); scroll-margin-top: var(--h-entete); }
  .plan-section + .plan-section { border-top: var(--filet); }
  .plan-section__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--esp-m) var(--esp-xl); margin-bottom: var(--esp-xl); }
  .plan-section__tete h2 { font-size: var(--fs-h2-s); max-width: 14em; }
  .plan-section__tete > div > .surtitre { margin-bottom: .8rem; }

  .plan-grille { display: grid; gap: var(--esp-xl) clamp(2rem, 4vw, 4.5rem); }
  @media (min-width: 900px) {
    .plan-grille { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .plan-grille--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .plan-colonne { display: grid; gap: var(--esp-xl); align-content: start; min-width: 0; }
  .plan-groupe { min-width: 0; }
  .plan-groupe__titre, .plan-niveau__titre {
    display: flex; align-items: baseline; gap: .7rem; margin-bottom: .3rem; padding-bottom: var(--esp-s);
    border-bottom: var(--filet-plein); font-size: var(--fs-h4);
  }
  :is(.plan-groupe__titre, .plan-niveau__titre) .u-num { font-size: .8rem; color: var(--argile); }

  /* Chaque page est une ligne d'index sur filet, 48 px de haut : le nom
     glisse de 6 px au survol, une flèche d'argile apparaît à droite. */
  .plan-liste { display: grid; margin: 0; padding: 0; }
  @media (min-width: 720px) { .plan-liste--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.2rem; } }
  .plan-liste li { max-width: none; border-bottom: var(--filet); }
  .plan-liste a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding-block: .6rem;
    font-size: var(--fs-petit); line-height: 1.4; color: var(--encre);
    transition: color var(--dur-survol) var(--doux);
  }
  .plan-liste a > span { transition: transform var(--dur-survol) var(--doux); }
  .plan-liste a::after { content: ""; flex: none; width: .95em; height: .6em; background: var(--fleche) center / contain no-repeat; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-survol) var(--doux), transform var(--dur-survol) var(--doux); }
  .plan-liste a:is(:hover, :focus-visible) { color: var(--argile); }
  .plan-liste a:is(:hover, :focus-visible) > span { transform: translateX(6px); }
  .plan-liste a:is(:hover, :focus-visible)::after { opacity: 1; transform: none; }
  .plan-liste strong { font-weight: var(--fw-appui); }

  /* Les communes : un répertoire en colonnes, nom en serif, déclinaisons en sans. */
  .plan-niveau + .plan-niveau { margin-top: var(--esp-xl); }
  .plan-communes { margin: 0; padding: .6rem 0 0; columns: 2; column-gap: 1.6rem; }
  /* Deux colonnes jusqu'à 1 099 px : à trois colonnes (768 px), les quatre
     pilules d'une commune passaient sur deux rangées, « moquette » seule
     dessous, dans les quatorze cartes. */
  @media (min-width: 720px) { .plan-communes { column-gap: 2.2rem; } }
  @media (min-width: 1100px) { .plan-communes { columns: 4; } }
  .plan-communes > li { break-inside: avoid; max-width: none; padding-bottom: .2rem; }
  .plan-communes > li > a {
    display: inline-flex; align-items: center; min-height: var(--cible); padding-block: .3rem;
    font: 400 1.14rem / 1.25 var(--serif); color: var(--encre); overflow-wrap: anywhere;
    transition: color var(--dur-survol) var(--doux);
  }
  /* Les déclinaisons d'une commune : de petites pilules de lin côte à côte,
     à toutes les largeurs (en minuscules sous un filet, elles faisaient
     liste technique sur bureau). Cible de 44 px conservée. */
  .plan-croisees { display: flex; flex-wrap: wrap; gap: 6px; margin: .1rem 0 .9rem; padding: 0; }
  .plan-croisees li { max-width: none; }
  .plan-communes .plan-croisees a {
    display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 .85rem;
    border-radius: var(--pill); background: var(--lin); font-size: var(--fs-mini); line-height: 1.2; color: var(--encre);
    transition: box-shadow var(--dur-survol) var(--doux), color var(--dur-survol) var(--doux);
  }
  .plan-communes > li > a:is(:hover, :focus-visible) { color: var(--argile); }
  .plan-communes .plan-croisees a:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--argile); color: var(--argile); }

  /* Les 30 ports : une bande de niches, au doigt avec aimantation sur
     téléphone. Sur bureau, la bande n'est une piste horizontale que sous
     .js-galerie, posée par motion.js au moment d'épingler la section
     (data-horizontal) : sans JavaScript ou en mouvement réduit, les 30
     niches s'affichent en grille, aucune n'est cachée hors de l'écran. */
  .plan-ports { padding-block: var(--section-y-s); overflow: hidden; }
  .plan-ports__tete { min-width: 0; }
  /* scroll-padding : l'aimantation garde la marge, la première niche ne colle pas au bord. */
  .plan-ports__bande { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--marge); scrollbar-width: none; }
  .plan-ports__bande::-webkit-scrollbar { display: none; }
  /* Deux rangées remplies ligne à ligne (--colonnes, posé par la page, vaut
     la moitié du compte) : la rangée du haut se lit 01, 02, 03… et non plus
     01, 03, 05 comme en remplissage par colonnes. */
  .plan-ports__piste { display: grid; grid-auto-flow: row; grid-template-columns: repeat(var(--colonnes, 15), 13.5rem); gap: 16px; width: max-content; margin: 0; padding: .5rem var(--marge) 1.5rem; }
  .plan-ports__piste > li { width: 13.5rem; scroll-snap-align: start; max-width: none; }
  @media (min-width: 900px) {
    .plan-ports:not(.js-galerie) .plan-ports__bande { overflow: visible; }
    .plan-ports:not(.js-galerie) .plan-ports__piste { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); width: auto; }
    .plan-ports:not(.js-galerie) .plan-ports__piste > li { width: auto; }
  }
  /* Texte centré et posé en bas : il reste sous le cintre, jamais hors de la niche. */
  .plan-ports__escale {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .3rem; height: 100%; min-height: 11rem;
    padding: 1.4rem 1.1rem 1.3rem; border-radius: var(--niche); background: var(--chaux-clair); text-align: center;
    box-shadow: inset 0 0 0 1px rgba(205, 184, 149, .6);
    transition: box-shadow var(--dur-survol) var(--doux), transform var(--dur-survol) var(--doux);
  }
  .plan-ports__escale:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--argile), var(--ombre-douce); transform: translateY(-4px); }
  .plan-ports__escale > .u-num { font-size: .78rem; color: var(--argile); }
  /* Deux lignes réservées au nom, texte calé en bas : numéros et communes
     restent alignés d'une niche à l'autre, nom court ou long. */
  .plan-ports__nom { display: flex; align-items: flex-end; justify-content: center; min-height: 2.4em; font: 400 1.22rem / 1.2 var(--serif); color: var(--encre); }
  .plan-ports__commune { font: italic 1rem / 1.3 var(--serif); color: var(--encre-doux); }

  /* ======================================================================
     Page 404 : plus de grand chiffre sous l'en-tête. Le code est une ligne
     italique dans la colonne de texte ; les entrées principales en registre.
     ====================================================================== */
  .introuvable__suite { padding-block: var(--section-y-s) var(--section-y); }
  .introuvable__grille { display: grid; gap: var(--esp-xl) clamp(2.5rem, 6vw, 7rem); align-items: start; }
  .introuvable__tete h2 { font-size: var(--fs-h2-s); max-width: 12em; }
  .introuvable__tete > p:not(.surtitre) { margin-top: var(--esp-m); color: var(--encre-doux); }
  @media (min-width: 900px) {
    .introuvable__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .introuvable__tete { position: sticky; top: calc(var(--h-entete) + 2rem); }
  }
  .introuvable__entrees { margin: 0; }
}