/* ═══════════════════════════════════════════════════════════════════════════
   LES MOTIFS — chronologie, liste, arbre, étapes, accordéon, popover, lien,
   bouton scindé, note, chargement, image.

   Tout ce qui était codé en dur sur un écran et vit maintenant dans le système.
   Aucune valeur brute : tout remonte à tokens.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────── CHRONOLOGIE ─────────── */

.chrono { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.chrono li { display: flex; gap: var(--e-3); padding-bottom: var(--e-4); position: relative; }
.chrono li:last-child { padding-bottom: 0; }

/* Le fil relie les pastilles. Il s'arrête à la dernière : un trait qui continue
   sous le dernier point promet une suite qui n'existe pas. */
.chrono--fil li:not(:last-child)::before {
  content: ''; position: absolute; left: 4px; top: 1rem; bottom: 0;
  width: 2px; background: var(--ligne);
}
.chrono .pastille { margin-top: 0.35rem; z-index: 1; box-shadow: 0 0 0 3px var(--surface); }
.chrono__c { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chrono__c strong { font-weight: var(--g-moyen); }
.chrono__q { font-size: var(--t-menu); color: var(--encre-faible); }
.chrono__d { font-size: var(--t-menu); color: var(--encre-douce); margin-top: 2px; }
.chrono--dense li { padding-bottom: var(--e-3); }

/* ────────────────────────────────────────────────────── LISTE ────────── */

.liste { display: flex; flex-direction: column; }
.liste__l {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible); padding: var(--e-2) var(--e-3);
  border-radius: var(--r-controle); text-decoration: none; color: inherit;
  transition: background var(--duree) var(--courbe);
}
/* La ligne ENTIÈRE est la cible, pas un mot dedans : viser « voir » rate une
   fois sur trois au doigt. */
a.liste__l:hover { background: var(--lavis-neutre); }
.liste--separee .liste__l + .liste__l { border-top: 1px solid var(--ligne); border-radius: 0; }
.liste--dense .liste__l { min-height: 0; padding: var(--e-2) 0; }
.liste__t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.liste__t strong { font-weight: var(--g-moyen); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste__t span { font-size: var(--t-menu); color: var(--encre-faible); }
.liste__d { flex: none; font-size: var(--t-menu); color: var(--encre-douce); }

/* ────────────────────────────────────────────────────── ARBRE ────────── */

.arbre { display: flex; flex-direction: column; gap: 1px; }
.arbre__n {
  display: flex; align-items: center; gap: var(--e-2);
  min-height: var(--cible); padding: 0 var(--e-3);
  border: 0; background: none; border-radius: var(--r-controle);
  font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.arbre__n:hover { background: var(--lavis-neutre); }
.arbre__n > span:first-of-type { flex: 1; }
.arbre__n svg { transition: transform var(--duree) var(--courbe); }
.arbre__n[aria-expanded="true"] svg { transform: rotate(90deg); }
.arbre__n--f { padding-left: var(--e-7); }
.arbre__f { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }

/* ───────────────────────────────────────────────────── ÉTAPES ────────── */

.etapes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-3); flex-wrap: wrap; }
.etapes li {
  flex: 1 1 12rem; display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-3); border-radius: var(--r-controle); background: var(--creuse);
}
.etapes li.est-faite    { background: var(--lavis-ok); }
.etapes li.est-courante { background: var(--lavis-accent); }
.etapes__n {
  width: 1.75rem; height: 1.75rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); color: var(--encre-douce);
  font-family: var(--police-chiffre); font-size: var(--t-menu); font-weight: var(--g-fort);
}
.etapes li.est-faite .etapes__n    { background: var(--ok); color: var(--sur-ok); }
.etapes li.est-courante .etapes__n { background: var(--accent); color: var(--sur-accent); }
.etapes strong { display: block; font-weight: var(--g-moyen); }
.etapes span   { font-size: var(--t-menu); color: var(--encre-douce); }

/* ────────────────────────────────────────────────── ACCORDÉON ────────── */

.accordeon { background: var(--surface); border-radius: var(--r-carte); box-shadow: var(--ombre-1); overflow: hidden; }
.accordeon__s + .accordeon__s { border-top: 1px solid var(--ligne); }
.accordeon__t {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; min-height: var(--cible); padding: var(--e-3) var(--e-4);
  border: 0; background: none; font: inherit; font-size: var(--t-corps);
  font-weight: var(--g-moyen); color: var(--encre); text-align: left; cursor: pointer;
  transition: background var(--duree) var(--courbe);
}
.accordeon__t:hover { background: var(--creuse); }
.accordeon__t > span { flex: 1; }
.accordeon__fleche { color: var(--encre-faible); transition: transform var(--duree) var(--courbe); }
.accordeon__t[aria-expanded="true"] .accordeon__fleche { transform: rotate(180deg); }
.accordeon__t[aria-expanded="true"] { background: var(--lavis-accent); }
.accordeon__p[hidden] { display: none; }
.accordeon__c { padding: 0 var(--e-4) var(--e-4); color: var(--encre-douce); }

/* ──────────────────────────────────────────────────── POPOVER ────────── */

/* Ancré à son déclencheur, contrairement à la modale qui est ancrée à l'écran.
   Positionné en JS, retourné au-dessus s'il n'y a pas la place en dessous. */
.popover {
  position: fixed; z-index: 110; min-width: 15rem; max-width: min(22rem, calc(100vw - var(--e-5)));
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); overflow: hidden;
  animation: monte var(--duree) var(--courbe);
}
.popover[hidden] { display: none; }
.popover__tete {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-2) var(--e-4);
}
.popover__tete strong { flex: 1; font-weight: var(--g-moyen); }
.popover__corps { padding: 0 var(--e-4) var(--e-4); color: var(--encre-douce); font-size: var(--t-corps); }
.popover__pied { display: flex; gap: var(--e-2); justify-content: flex-end; padding: var(--e-3) var(--e-4); background: var(--creuse); }

/* ─────────────────────────────────────────────────────── LIEN ────────── */

.lien {
  display: inline-flex; align-items: baseline; gap: var(--e-1);
  text-decoration: none; border-radius: 3px;
  /* Souligné par en dessous, décalé : le soulignement natif coupe les jambages
     des lettres et rend « g », « p » et « y » difficiles à lire. */
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.lien:hover { text-decoration-color: currentColor; }
.lien--accent  { color: var(--accent); }
.lien--encre   { color: var(--encre); }
.lien--discret { color: var(--encre-douce); text-decoration-line: none; }
.lien--discret:hover { color: var(--encre); text-decoration-line: underline; }
.lien__ext { opacity: 0.6; align-self: center; }

/* ─────────────────────────────────────────────── BOUTON SCINDÉ ───────── */

.btn-scinde { display: inline-flex; }
.btn-scinde .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-scinde__x {
  width: 2.25rem; padding: 0; flex: none;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  /* Une couture, sinon les deux moitiés se lisent comme un seul bouton large. */
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.25);
}

/* ─────────────────────────────────────────────────────── NOTE ────────── */

.note-bloc { display: inline-flex; align-items: center; gap: var(--e-2); }
.note { display: inline-flex; gap: 1px; }
.note__e { color: var(--ligne); display: inline-flex; }
.note__e.est-pleine { color: var(--alerte); }
/* La demi-étoile est un dégradé sur la même forme : deux SVG superposés
   décaleraient d'un demi-pixel selon le zoom. */
.note__e.est-demie {
  color: var(--alerte);
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
  mask-image: linear-gradient(90deg, #000 50%, transparent 50%);
}
.note__n { font-size: var(--t-menu); color: var(--encre-douce); font-family: var(--police-chiffre); }

/* ─────────────────────────────────────────────── CHARGEMENT ──────────── */

/* La barre de page : 2 px en haut, au-dessus de tout. Elle dit que
   l'APPLICATION travaille — un squelette dit qu'un panneau charge. */
.chargement-barre {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: 2px;
  background: var(--lavis-accent); pointer-events: none;
}
.chargement-barre[hidden] { display: none; }
.chargement-barre span { display: block; height: 100%; width: 0; background: var(--accent); }

.voile-chargement {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-3);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  backdrop-filter: blur(1px);
  font-size: var(--t-menu); color: var(--encre-douce);
}
.voile-chargement[hidden] { display: none; }
.voile-chargement .rouet { width: 1.5rem; height: 1.5rem; border-width: 2px; color: var(--accent); }

/* ────────────────────────────────────────────────────── IMAGE ────────── */

/* Le rapport est réservé AVANT le chargement : sans lui la page saute quand
   l'image arrive, et l'utilisateur clique sur ce qui vient de bouger. */
.img { margin: 0; }
.img img {
  display: block; width: 100%; aspect-ratio: var(--rapport);
  background: var(--creuse);
}
.img--carte img    { border-radius: var(--r-carte); }
.img--controle img { border-radius: var(--r-controle); }
.img--rond img     { border-radius: 50%; }
.img--aucun img    { border-radius: 0; }
.img figcaption { margin-top: var(--e-2); font-size: var(--t-menu); color: var(--encre-douce); }

/* ──────────────────────────────────────────────── CHAMP DATE ─────────── */

/* Un déclencheur, pas un `<input type="date">`. Il affiche le français long ;
   la valeur ISO vit dans un input caché, que le formulaire soumet. */
.date-champ { position: relative; }
.date-champ__b {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; min-height: var(--h-controle); padding: var(--e-1) var(--e-3);
  background: var(--surface); border: 0; border-radius: var(--r-controle);
  box-shadow: inset 0 0 0 1px var(--bord-controle);
  font: inherit; font-size: var(--t-corps); color: var(--encre);
  text-align: left; cursor: pointer;
  transition: box-shadow var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.date-champ__b:hover:not(:disabled) { background: var(--creuse); }
.date-champ__b[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.date-champ__b:disabled { opacity: 0.55; cursor: not-allowed; }
.date-champ__b svg { color: var(--encre-faible); }
.date-champ__lib { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-champ.est-vide .date-champ__lib { color: var(--encre-faible); }

/* ═════════════════════════════════ EXPLORATEUR D'ICÔNES ═══════════════ */

.ix { display: flex; flex-direction: column; gap: var(--e-3); }
.ix-barre { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.ix-onglets { display: flex; gap: var(--e-1); background: var(--creuse); border-radius: var(--r-puce); padding: 3px; }
.ix-onglets button {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: calc(var(--h-controle) - 0.375rem); padding: 0 var(--e-3);
  border: 0; border-radius: var(--r-puce); background: none;
  font: inherit; font-size: var(--t-menu); font-weight: var(--g-moyen);
  color: var(--encre-douce); cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.ix-onglets button:hover { color: var(--encre); }
.ix-onglets button.est-actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }
.ix-onglets small { font-weight: var(--g-normal); color: var(--encre-faible); }

.ix-compte { margin-left: auto; font-size: var(--t-menu); color: var(--encre-faible);
             font-family: var(--police-chiffre); }

.ix-etat { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-controle);
           background: var(--lavis-neutre); color: var(--encre-douce); font-size: var(--t-menu); }
.ix-etat--danger { background: var(--lavis-danger); color: var(--danger); }
.ix-etat[hidden] { display: none; }

/* La zone défile sur elle-même : le défilement infini ne doit pas allonger la
   page sans fin, sinon la barre de la fenêtre ment sur ce qui reste. */
.ix-zone { max-height: 26rem; overflow-y: auto; border-radius: var(--r-carte);
           background: var(--creuse); padding: var(--e-3); }
.ix-grille { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }

.ix-case {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  min-height: 5rem; padding: var(--e-3) var(--e-2);
  border: 0; border-radius: var(--r-controle);
  background: var(--surface); color: var(--encre); cursor: pointer; font: inherit;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.ix-case:hover { background: var(--lavis-accent); color: var(--accent); }
.ix-case.est-absente { opacity: 0.35; cursor: not-allowed; }
.ix-svg { display: grid; place-items: center; height: 1.5rem; }
.ix-i { width: 1.5rem; height: 1.5rem; }
.ix-nom { font-size: 0.6875rem; color: var(--encre-faible); text-align: center;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ix-case:hover .ix-nom { color: var(--accent-fort); }

.ix-suite { display: grid; place-items: center; padding: var(--e-4); color: var(--encre-faible);
            font-size: var(--t-menu); }
.ix-suite[hidden] { display: none; }

/* Le facteur d'agrandissement de l'explorateur. La tuile suit l'icône : à ×8 on
   veut voir le dessin, pas huit icônes serrées dans des cases de 6 rem. */
.ix { --ix-z: 1; }
.ix-grille { grid-template-columns: repeat(auto-fill, minmax(calc(6.5rem * var(--ix-z)), 1fr)); }
.ix-svg { height: calc(1.5rem * var(--ix-z)); }
.ix-i    { width: calc(1.5rem * var(--ix-z)); height: calc(1.5rem * var(--ix-z)); }
.ix-case { min-height: calc(5rem * var(--ix-z)); }
.ix-zone { max-height: 26rem; }

.ix-zoom { display: flex; gap: 2px; background: var(--creuse); border-radius: var(--r-puce); padding: 3px; }
.ix-zoom button {
  min-width: 2.25rem; height: calc(var(--h-controle) - 0.375rem);
  border: 0; border-radius: var(--r-puce); background: none;
  font: inherit; font-size: var(--t-menu); font-weight: var(--g-moyen);
  font-family: var(--police-chiffre); color: var(--encre-douce); cursor: pointer;
  transition: background var(--duree) var(--courbe), color var(--duree) var(--courbe);
}
.ix-zoom button:hover { color: var(--encre); }
.ix-zoom button.est-actif { background: var(--surface); color: var(--accent-fort); box-shadow: var(--ombre-1); }

/* ═══════════════════════════ MÉDIA — écran 46 ══════════════════════════ */

/* Le format est RÉSERVÉ par la grille, pas par l'image : la mise en page tient
   avant que le premier octet n'arrive. */
.galerie {
  display: grid; gap: var(--e-3);
  grid-template-columns: repeat(var(--gal-col, 3), minmax(0, 1fr));
}
@media (max-width: 40rem) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.galerie__c { margin: 0; }
.galerie__b {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: var(--creuse); border-radius: var(--r-carte); overflow: hidden;
}
.galerie__c img {
  display: block; width: 100%; aspect-ratio: var(--gal-rapport, 4/3); object-fit: cover;
  border-radius: var(--r-carte); background: var(--creuse);
}
.galerie__loupe {
  position: absolute; inset: auto var(--e-2) var(--e-2) auto;
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--surface); color: var(--encre); opacity: 0; transform: translateY(4px);
  transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}
.galerie__b:hover .galerie__loupe,
.galerie__b:focus-visible .galerie__loupe { opacity: 1; transform: none; }
.galerie__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.galerie__c figcaption { margin-top: var(--e-2); font-size: var(--t-menu); color: var(--encre-douce); }

/* L'emplacement : un cadre qui dit ce qu'on attend de lui. */
.empl-img {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e-1); aspect-ratio: var(--rapport, 4/3);
  border: 1.5px dashed var(--bord-controle); border-radius: var(--r-carte);
  background: var(--creuse); color: var(--encre-faible); text-align: center; padding: var(--e-3);
}
.empl-img__l { font-size: var(--t-menu); font-weight: var(--g-moyen); color: var(--encre-douce); }
.empl-img__t { font-size: var(--t-menu); }

/* La visionneuse — UNE par page. */
.lightbox {
  position: fixed; inset: 0; z-index: 1300;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-3);
  padding: var(--e-4); background: color-mix(in srgb, var(--voile) 88%, transparent);
}
.lightbox[hidden] { display: none; }
.lightbox__f { grid-column: 2; margin: 0; display: grid; justify-items: center; gap: var(--e-3); min-width: 0; }
.lightbox__f img {
  max-width: 100%; max-height: 78vh; border-radius: var(--r-carte);
  background: var(--surface); object-fit: contain;
}
.lightbox__f figcaption { color: #fff; font-size: var(--t-menu); text-align: center; }
.lightbox__x, .lightbox__nav {
  display: grid; place-items: center; width: var(--cible); height: var(--cible);
  border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, #fff 16%, transparent); color: #fff;
  transition: background var(--duree) var(--courbe);
}
.lightbox__x:hover, .lightbox__nav:hover { background: color-mix(in srgb, #fff 30%, transparent); }
.lightbox__x:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox__x { position: absolute; top: var(--e-4); right: var(--e-4); }
.lightbox__nav--p { grid-column: 1; }
.lightbox__nav--s { grid-column: 3; }
.i--rot { transform: rotate(180deg); }

/* À l'impression : la page se réduit à ce qu'on imprime. */
@media print {
  .flanc, .barre-haute, .toile__lavis, .nav-basse, [data-imprimer], .lightbox { display: none !important; }
  .toile, .toile__defile { height: auto !important; overflow: visible !important; }
  .carte, .bloc { break-inside: avoid; box-shadow: none; }
}

/* ═══════════════════════════ GUIDAGE — écran 47 ════════════════════════ */

.tour[hidden] { display: none; }
.tour__voile {
  position: fixed; inset: 0; z-index: 1250;
  background: color-mix(in srgb, var(--voile) 55%, transparent);
}
/* Le trou : l'élément désigné reste éclairé, tout le reste s'assombrit. Une
   bulle sans trou explique un endroit qu'on ne trouve pas. */
.est-designe {
  position: relative; z-index: 1260;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px color-mix(in srgb, var(--voile) 55%, transparent);
  border-radius: var(--r-controle);
}
.tour__bulle {
  position: fixed; z-index: 1270; width: min(22rem, calc(100vw - 2rem));
  background: var(--surface); border-radius: var(--r-carte);
  box-shadow: var(--ombre-3); padding: var(--e-4);
}
.tour__pas { margin: 0 0 var(--e-1); font-size: var(--t-menu); color: var(--encre-faible); letter-spacing: .06em; }
.tour__bulle h3 { margin: 0 0 var(--e-2); font-size: var(--t-sous); }
.tour__txt { margin: 0; font-size: var(--t-corps); color: var(--encre-douce); line-height: 1.55; }
.tour__pied { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.tour__pied [data-tour-quitter] { margin-right: auto; }

/* Le coachmark : une pastille qui bat, et qui se tait dès qu'on la touche. */
.coachmark { position: relative; display: inline-flex; }
.coachmark__p {
  position: absolute; z-index: 5; width: 1.25rem; height: 1.25rem; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
}
.coachmark--haut-droite .coachmark__p { top: -.35rem; right: -.35rem; }
.coachmark--haut-gauche .coachmark__p { top: -.35rem; left: -.35rem; }
.coachmark__p span {
  display: block; width: .7rem; height: .7rem; margin: auto; border-radius: 999px;
  background: var(--accent); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: coach-bat 2.2s ease-out infinite;
}
.coachmark__p:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
@keyframes coach-bat {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 .55rem color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* Menu contextuel — le même objet que le menu, posé aux coordonnées du clic. */
.menu--ctx { position: fixed; z-index: 1280; min-width: 12rem; }
.menu--ctx[hidden] { display: none; }

/* Navigation basse — elle REMPLACE le flanc sous le point de bascule. */
.nav-basse {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface); border-top: 1px solid var(--ligne);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.nav-basse__i {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--cible); padding: var(--e-2) var(--e-1);
  color: var(--encre-douce); text-decoration: none; font-size: var(--t-menu);
  transition: color var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.nav-basse__i:hover { background: var(--creuse); color: var(--encre); }
.nav-basse__i:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-basse__i.est-actif { color: var(--accent); background: var(--lavis-accent); }
.nav-basse__ic { position: relative; display: grid; place-items: center; }
.nav-basse__n {
  position: absolute; top: -.3rem; right: -.55rem; min-width: 1.05rem; height: 1.05rem;
  display: grid; place-items: center; padding: 0 .25rem; border-radius: 999px;
  background: var(--danger-plein); color: var(--sur-danger);
  font-size: var(--t-menu); font-weight: var(--g-fort); line-height: 1;
}
.nav-basse__l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 48rem) { .nav-basse { display: grid; } }

@media (prefers-reduced-motion: reduce) {
  .coachmark__p span { animation: none; }
  .galerie__loupe { transition: none; }
}

/* Une liste sans puces, dont chaque ligne porte son icône. Utilisée pour dire
   ce qui reste et ce qui part — une puce ronde ne distingue pas les deux. */
.liste-nue { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.liste-nue li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-corps); color: var(--encre-douce); }
.liste-nue li .i { flex: none; color: var(--encre-faible); }

/* La pastille du coachmark : 20 px à l'œil, --cible au doigt. §141.6.1 */
.coachmark__p { position: absolute; }
.coachmark__p::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--cible); height: var(--cible); transform: translate(-50%, -50%);
}