/* Motifs de la charte (plaquette v3). Chargé par les 12 pages (étapes 6a à 6e) ; démonstration : docs/motifs-charte.html.
   Les cercles se tracent une fois au scroll (src/motion/circles.js, masque dans motion.css).
   Dépend des tokens de site.css (--petrole, --sauge, --sable, --bronze, --nuit, --blanc, --fs-*).

   Règles communes
   - Ornements uniquement : pseudo-éléments, ou <span aria-hidden="true"> (jamais h1–h3, p, img, a,
     button, li, th, td : l'outil d'annotations les compte).
   - ::before porte le cercle ou le voile ; pour les combiner, utiliser les formes en <span>
     (.lu-cercle-forme, .lu-voile-forme, .lu-arc).
   - Pas d'axe vertical (arbitrage du 12 octobre 2026) : le fil de 1 px de la plaquette marquait la
     séparation des pages imprimées, il ne fait pas partie de la charte du site.
   - La sauge ne sert jamais au texte (contraste insuffisant sur fond clair) : filets, cercles et cadres seulement.
   - Le bronze en texte (3,2:1 sur clair ou pétrole, 2,6:1 sur sable) : 24 px minimum, jamais sur sable. */

/* ---------- Conteneur : coupe les motifs au bord, aucun défilement horizontal ---------- */
.lu-motif {position: relative; isolation: isolate; overflow: hidden; overflow: clip}

/* ---------- Cercle : trait 1 px, jamais rempli, 60 à 90 % de la hauteur, coupé par le bord ---------- */
.lu-cercle {
  --cercle-taille: 75%;            /* part de la hauteur du conteneur */
  --cercle-x: 85%;                 /* centre horizontal */
  --cercle-y: 50%;                 /* centre vertical */
  --cercle-couleur: var(--sauge);
}
.lu-cercle::before, .lu-cercle-forme {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--cercle-x);
  top: var(--cercle-y);
  height: var(--cercle-taille);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid var(--cercle-couleur);
  border-radius: 50%;
  background: none;
  pointer-events: none;
}
/* La forme en <span> lit les mêmes variables, posées sur elle ou sur son conteneur. */
.lu-cercle-forme {--cercle-taille: 75%; --cercle-x: 85%; --cercle-y: 50%; --cercle-couleur: var(--sauge)}

/* Couleurs */
.lu-cercle--blanc {--cercle-couleur: color-mix(in srgb, var(--blanc) 70%, transparent)}  /* sur photo */
.lu-cercle--sauge {--cercle-couleur: var(--sauge)}                                       /* fond sombre ou clair */
.lu-cercle--sable {--cercle-couleur: var(--sable)}                                       /* sur intérieurs */
/* Sur photo (blanc, sable) : le cercle passe au-dessus de l'image, sinon elle le cache */
.lu-cercle--blanc::before, .lu-cercle--sable::before, .lu-cercle-forme:is(.lu-cercle--blanc, .lu-cercle--sable) {z-index: 1}
/* Tailles */
.lu-cercle--60 {--cercle-taille: 60%}
.lu-cercle--75 {--cercle-taille: 75%}
.lu-cercle--90 {--cercle-taille: 90%}
/* Positions : le centre sur un bord coupe le cercle */
.lu-cercle--droite {--cercle-x: 100%}
.lu-cercle--gauche {--cercle-x: 0%}
.lu-cercle--centre {--cercle-x: 50%}
.lu-cercle--haut {--cercle-y: 0%}
.lu-cercle--bas {--cercle-y: 100%}

/* ---------- Voile : bande verticale ~23 %, dégradé translucide pétrole sur photo ---------- */
.lu-voile {--voile-x: 7%; --voile-largeur: 23%}
.lu-voile::before, .lu-voile-forme {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--voile-x, 7%);
  width: var(--voile-largeur, 23%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--petrole) 88%, transparent),
    color-mix(in srgb, var(--petrole) 62%, transparent));
  pointer-events: none;
}
.lu-voile--droite {--voile-x: 70%}
/* Le texte posé sur le voile passe au-dessus */
.lu-voile > :not(img):not(picture):not(.lu-voile-forme) {position: relative; z-index: 2}

/* ---------- Carte encadrée : bordure 1 px sauge, fond pétrole ou nuit translucide, angles droits ---------- */
.lu-carte-encadree {
  padding: 32px;
  border: 1px solid var(--sauge);
  border-radius: 0;
  background: color-mix(in srgb, var(--petrole) 88%, transparent);
  color: var(--blanc);
}
.lu-carte-encadree--nuit {background: color-mix(in srgb, var(--nuit) 85%, transparent)}
.lu-carte-encadree :is(h2, h3) {color: var(--blanc)}
.lu-carte-encadree p {color: var(--sable)}

/* ---------- Fiche technique : libellés pétrole, valeurs bronze (24 px : grand corps), filets sauge ---------- */
.lu-fiche {margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sauge)}
.lu-fiche > :is(div, li) {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 24px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--sauge)}
.lu-fiche :is(dt, .lu-fiche-libelle) {color: var(--petrole); font: 600 14px/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase}
.lu-fiche :is(dd, .lu-fiche-valeur) {margin: 0; color: var(--bronze); font: 400 24px/1.3 var(--serif)}
/* Version liste (éléments annotables) : <ul class="lu-fiche"><li><span class="lu-fiche-libelle">…</span><span class="lu-fiche-valeur">…</span></li></ul>
   Version compacte pour les cartes : lignes resserrées, valeurs toujours en 24 px. */
.lu-fiche--carte > :is(div, li) {padding: 8px 0}
/* Sur fond nuit : libellés sable (le pétrole ne se lit pas sur fond sombre), valeurs bronze (4,9:1) */
.lu-fiche--nuit :is(dt, .lu-fiche-libelle) {color: var(--sable)}

/* ---------- Colonne d'icônes : bande pétrole, icônes au trait bronze dans des carrés encadrés ---------- */
.lu-icones {display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 32px 24px; list-style: none;
  background: var(--petrole); color: var(--blanc)}
.lu-icones > * {display: flex; align-items: center; gap: 16px; font: 500 14px/1.5 var(--sans)}
.lu-icone {flex: none; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--sauge); color: var(--bronze)}
.lu-icone svg {width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.25}

/* ---------- Arc de liaison : arc sauge qui relie deux visuels ---------- */
.lu-liaison {position: relative}
.lu-arc {
  --arc-de: 25%;        /* point de départ (centre du premier visuel) */
  --arc-a: 25%;         /* distance du point d'arrivée au bord droit */
  --arc-hauteur: 96px;
  position: absolute;
  left: var(--arc-de);
  right: var(--arc-a);
  bottom: 100%;
  height: var(--arc-hauteur);
  border: 1px solid var(--sauge);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}
.lu-arc--bas {top: 100%; bottom: auto; border: 1px solid var(--sauge); border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%}

/* ---------- Tablette : la colonne d'icônes passe en ligne ---------- */
@media (max-width: 1000px) {
  .lu-icones {flex-direction: row; flex-wrap: wrap; gap: 16px 32px; padding: 24px}
}

/* ---------- Mobile : cercles réduits (ou masqués), voile élargi, arcs masqués ---------- */
@media (max-width: 760px) {
  .lu-cercle::before, .lu-cercle-forme {height: calc(var(--cercle-taille) * .6)}
  .lu-cercle--masque-mobile::before, .lu-cercle-forme.lu-cercle--masque-mobile {display: none}
  .lu-voile {--voile-x: 0%; --voile-largeur: 100%}
  .lu-voile::before, .lu-voile-forme {background: linear-gradient(90deg,
    color-mix(in srgb, var(--petrole) 85%, transparent),
    color-mix(in srgb, var(--petrole) 35%, transparent))}
  .lu-carte-encadree {padding: 24px}
  .lu-fiche > :is(div, li) {grid-template-columns: 1fr; gap: 4px}
  .lu-arc {display: none}
}