/* braillard — design studio
   Une seule feuille, réécrite à plat (version 6).
   Principes : tout est centré, y compris optiquement ; une seule police, Jost, celle du nom ; un seul fond ;
   un seul gabarit pour toutes les pages intérieures (titre au style du nom, une phrase, le contenu) ;
   même en-tête partout (BRAILLARD | DESIGN STUDIO, puis les villes) ; barre de navigation fixe en bas.
   L'accueil : le nom, la ligne du studio et ses trois axes, rien d'autre.
   Mouvement : uniquement transform, opacity et clip-path (aucun recalcul de mise en page pendant
   une animation), sur une courbe sinusoïdale douce, sans à-coups. */

@font-face { font-family: "Jost"; src: url("fonts/jost.d3fc5b412c.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ============================================================ 1. jetons */
:root {
  --paper: #f4f1ea;   /* blanc cassé chaud (papier) */
  --ink: #22211f;     /* gris graphite très foncé */
  --ink-2: #6b6761;
  --tile: #ece8df;
  --line: #ddd8ce;

  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --t-caps: 0.75rem;
  --caps-ls: 0.22em;              /* espacement des capitales ; rendu à gauche pour un centrage optique exact */
  --t-s: 0.875rem;
  --marque: clamp(0.75rem, 0.45rem + 0.9vw, 0.95rem);   /* taille de BRAILLARD | DESIGN STUDIO */

  --gouttiere: clamp(12px, 1.4vw, 20px);
  --cote: max(20px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* identique à gauche et à droite */
  --space: clamp(72px, 9vw, 128px);
  --maxw: 1320px;
  --tete-haut: clamp(28px, 4vw, 46px);
  --barre-h: 72px;
  --mi-ecran: 50vh;

  --sinus: cubic-bezier(0.37, 0, 0.63, 1);   /* entrée et sortie douces, vitesse régulière au milieu */
  color-scheme: light;
}
@supports (height: 1svh) { :root { --mi-ecran: 50svh; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1c1b19; --ink: #ece8df; --ink-2: #a29d94;
    --tile: #262522; --line: #34322e; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1c1b19; --ink: #ece8df; --ink-2: #a29d94;
  --tile: #262522; --line: #34322e; color-scheme: dark;
}

/* ============================================================ 2. base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); transition: background-color 0.6s var(--sinus), color 0.6s var(--sinus);
  font-family: var(--sans); font-size: 1rem; font-weight: 300; line-height: 1.75;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; text-wrap: balance; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }

.caps { font-size: var(--t-caps); font-weight: 400; letter-spacing: var(--caps-ls); text-transform: uppercase; line-height: 1.6; }
.lisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); }
.skip:focus { left: var(--cote); }

/* Centrage optique : l'espacement des lettres s'ajoute aussi après la dernière lettre,
   ce qui décale tout texte centré d'une demi-espace vers la gauche. On rend cette espace à gauche. */
.barre a, .pied > * { padding-left: var(--caps-ls); }

/* ============================================================ 3. bandes et colonne */
.bande { background: var(--paper); }
.page { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--cote); }
@media (min-width: 1100px) { .page { padding-inline: max(84px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); } }

/* ============================================================ 4. en-tête (toutes les pages) */
.bande--tete { background: var(--paper); view-transition-name: tete; }   /* capturé à part, comme la barre : immobile quand la page change */
.tete { display: grid; justify-items: center; gap: 12px; padding-top: var(--tete-haut); text-align: center; }
.logo { display: flex; justify-content: center; width: 100%; }
.logo-caps {
  --S: 1.55;                      /* agrandissement pendant l'ouverture de l'accueil */
  --descente: calc(var(--mi-ecran) - var(--tete-haut) - 0.5em);
  --course-b: 7.541em;            /* ouverture : trajet du B du monogramme jusqu'au B de BRAILLARD… */
  --course-d: 6.108em;            /* …et du D jusqu'au D de STUDIO (mesurés sur Jost, valables à toutes les tailles) */
  position: relative; display: inline-block;
  font-size: var(--marque); line-height: 1; letter-spacing: 0.2em; font-weight: 300;
  text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
.m-nom { display: inline-block; padding-left: 0.2em; }   /* rend à gauche l'espacement ajouté après la dernière lettre : le nom est centré optiquement */
.m-b, .mo-b { font-weight: 600; }
.m-sep { letter-spacing: 0; padding: 0 0.6em 0 0.4em; }   /* 0,6 em de chaque côté du trait, espacement de la lettre précédente compris */
/* monogramme B | D : seulement pendant l'ouverture de l'accueil ; le trait est exactement au centre */
.m-fin span { display: inline-block; }
.m-mono { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; letter-spacing: 0; pointer-events: none; }
.m-mono > * { opacity: 0; }
.mo-b { justify-self: end; }
.mo-t { padding: 0 0.6em; }
.mo-d { justify-self: start; }
.tete-villes { font-size: 0.6875rem; letter-spacing: 0.28em; padding-left: 0.28em; line-height: 1.6; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 389px) { .logo-caps { --S: 1.3; } }   /* petits téléphones : le nom agrandi tient dans l'écran */
@media (min-width: 600px) { .logo-caps { --S: 2.2; } }
@media (min-width: 1000px) { .logo-caps { --S: 2.6; } }

/* ============================================================ 5. barre de navigation (toutes les pages) */
.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 10px 26px;
  padding: 18px var(--cote) calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  view-transition-name: barre;   /* capturée à part : elle reste immobile quand la page change */
}
.barre a { position: relative; padding-block: 4px; color: var(--ink-2); transition: color 0.6s var(--sinus); }
.barre a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform 0.7s var(--sinus);   /* le trait se déploie depuis le centre */
}
.barre a:hover, .barre a[aria-current="page"], .barre a.actif { color: var(--ink); }
.barre a:hover::after, .barre a[aria-current="page"]::after, .barre a.actif::after { transform: scaleX(1); }
.langues { display: inline-flex; gap: 6px; }
/* sélecteur jour / nuit : cercle à moitié plein (automatique), vide (jour), plein (nuit) */
.theme { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px 0; padding: 0; border: 0; background: none; color: var(--ink-2); cursor: pointer; align-self: center; transition: color 0.6s var(--sinus); }
.theme:hover { color: var(--ink); }
.theme svg { display: block; }
.theme .theme-moitie, .theme .theme-plein { opacity: 0; transition: opacity 0.6s var(--sinus); }
:root[data-theme-choix="auto"] .theme .theme-moitie, :root:not([data-theme-choix]) .theme .theme-moitie { opacity: 1; }
:root[data-theme-choix="dark"] .theme .theme-plein { opacity: 1; }

/* ============================================================ 6. pied (pages intérieures) */
.pied {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  padding: 48px var(--cote) calc(var(--barre-h) + 28px);
  font-size: 0.6875rem; letter-spacing: var(--caps-ls); text-transform: uppercase; color: var(--ink-2);
}
.pied a { border-bottom: 1px solid transparent; transition: border-color 0.6s var(--sinus), color 0.6s var(--sinus); }
.pied a:hover { color: var(--ink); border-color: var(--ink); }

/* ============================================================ 7. accueil */
:root[data-vue="accueil"] .bande--tete { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: transparent; view-transition-name: none; }
:root[data-vue="accueil"] .pied { display: none; }
:root[data-vue="accueil"] body { overflow-x: clip; }   /* garde-fou : l'ouverture ne crée jamais de défilement horizontal */
:root[data-vue="accueil"] .barre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.accueil { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 0 var(--cote); }
.ouverture { display: grid; justify-items: center; gap: 22px; text-align: center; }
.accroche { font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1rem); font-weight: 400; letter-spacing: 0.2em; padding-left: 0.2em; line-height: 1.7; text-transform: uppercase; text-wrap: balance; }
.axes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.6875rem; letter-spacing: 0.2em; line-height: 1.7; text-transform: uppercase; color: var(--ink-2); }
.axes li { padding-left: 0.2em; text-wrap: balance; }

/* Ouverture, 6,3 s, autour de l'axe de l'écran, une seule courbe douce par mouvement :
   0 → 1,2 s     B | D apparaît au centre, le trait sur l'axe
   1,6 → 4,3 s   le trait s'efface, puis le B et le D s'écartent ensemble, du même mouvement ; derrière eux, le nom
                 se découvre du centre vers les bords, comme un rideau. Aucune lettre ne disparaît : le B se pose
                 sur le B de BRAILLARD, le D sur le D de STUDIO, et ils y restent ; puis les lettres I et O sortent
                 l'une après l'autre de derrière le D, dans la continuité des lettres qui se découvrent (3,8 → 4,4 s)
   4,85 → 6,3 s  le nom monte à sa place dans l'en-tête et prend sa taille définitive
   puis les villes, la ligne du studio, ses trois axes et enfin la barre du bas apparaissent en fondu
   (sur les autres pages, la barre ne bouge jamais).
   Les trajets sont en em et les bords du rideau en % de la largeur du nom, mesurés sur Jost. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-vue="accueil"]:not([data-intro="fin"]) .logo-caps { animation: marque 6.3s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .m-nom { animation: rideau 6.3s var(--sinus) both, nom-fondu 6.3s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .m-fin span { animation: fin-1 6.3s both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .m-fin span + span { animation-name: fin-2; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .mo-b { animation: mono-gauche 6.3s var(--sinus) both, mono-fondu 6.3s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .mo-d { animation: mono-droite 6.3s var(--sinus) both, mono-fondu 6.3s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .mo-t { animation: mono-trait 6.3s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .tete-villes { animation: apparait 1.4s 6.1s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .accroche { animation: apparait 1.6s 6.4s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .axes { animation: apparait 1.6s 6.8s var(--sinus) both; }
  :root[data-vue="accueil"]:not([data-intro="fin"]) .barre { animation: apparait 1.6s 7.2s var(--sinus) both; }
}
@keyframes marque {
  0%, 77%   { transform: translateY(var(--descente)) scale(var(--S)); }
  100%      { transform: translateY(0) scale(1); }
}
@keyframes rideau {   /* part du centre et suit le B et le D, juste derrière eux */
  /* deux fenêtres : le rideau, qui s'ouvre depuis le centre, et les lettres IO à droite du D (toujours ouverte : elles ont leur propre mouvement) */
  0%, 25%   { clip-path: polygon(48.8% -1em, 51.2% -1em, 51.2% calc(100% + 1em), 91.8% calc(100% + 1em), 91.8% -1em, 100% -1em, 100% calc(100% + 1em), 48.8% calc(100% + 1em)); }
  68%       { clip-path: polygon(5.2% -1em, 87% -1em, 87% calc(100% + 1em), 91.8% calc(100% + 1em), 91.8% -1em, 100% -1em, 100% calc(100% + 1em), 5.2% calc(100% + 1em)); }   /* juste derrière le B (à gauche) et le D (à droite), posés */
  75%, 100% { clip-path: polygon(0% -1em, 91.8% -1em, 91.8% calc(100% + 1em), 91.8% calc(100% + 1em), 91.8% -1em, 100% -1em, 100% calc(100% + 1em), 0% calc(100% + 1em)); }
}
/* I puis O : chaque lettre sort de derrière le D qui se pose et glisse à sa place, dans le sens du mouvement,
   à la cadence des lettres qui se découvrent (… S 3,4 s, T 3,6 s, U 3,9 s, I 4,0 s, O 4,2 s) */
@keyframes fin-1 {
  0%, 60%   { opacity: 0; transform: translateX(-0.3em); animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1); }
  67%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes fin-2 {
  0%, 62.5%   { opacity: 0; transform: translateX(-0.3em); animation-timing-function: cubic-bezier(0.3, 0.4, 0.5, 1); }
  69.5%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes nom-fondu {
  0%, 29%   { opacity: 0; }
  40%, 100% { opacity: 1; }
}
@keyframes mono-gauche {
  0%, 25%   { transform: translateX(0); }
  68%, 100% { transform: translateX(calc(-1 * var(--course-b))); }
}
@keyframes mono-droite {
  0%, 25%   { transform: translateX(0); }
  68%, 100% { transform: translateX(var(--course-d)); }
}
@keyframes mono-fondu {
  0%        { opacity: 0; }
  19%, 75%  { opacity: 1; }
  77%, 100% { opacity: 0; }   /* relais invisible : la vraie lettre du nom est exactement dessous */
}
@keyframes mono-trait {
  0%        { opacity: 0; }
  19%, 24%  { opacity: 1; }
  29%, 100% { opacity: 0; }
}
@keyframes apparait { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================ 8. gabarit des pages intérieures
   Toujours le même ordre : titre (capitales espacées, comme le nom), une phrase, puis le contenu.
   Tout est centré. Les capitales espacées reçoivent à gauche l'espace ajoutée après leur dernière lettre. */
main .page { padding-bottom: var(--space); }
.entete-page { display: grid; justify-items: center; gap: 18px; padding: clamp(72px, 10vw, 136px) 0 clamp(48px, 6vw, 80px); text-align: center; }
.titre { font-size: clamp(0.95rem, 0.75rem + 0.6vw, 1.2rem); font-weight: 300; letter-spacing: 0.2em; padding-left: 0.2em; line-height: 1.6; text-transform: uppercase; }
.titre b { font-weight: 600; }
.sous { max-width: 32rem; color: var(--ink-2); line-height: 1.75; text-align: center; }
.surtitre, .titre-section, .tuile-titre, .filtres a, .voisins-sens {
  font-size: var(--t-caps); font-weight: 400; letter-spacing: var(--caps-ls); padding-left: var(--caps-ls); text-transform: uppercase;
}
.note, .fiche dt, .legal dt, .visuel figcaption {
  font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.14em; padding-left: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.surtitre { color: var(--ink-2); border-bottom: 1px solid transparent; transition: color 0.6s var(--sinus), border-color 0.6s var(--sinus); }
.surtitre:hover { color: var(--ink); border-color: var(--ink); }
.note { text-align: center; }
.section { display: grid; justify-items: center; gap: 28px; padding-top: var(--space); text-align: center; }
.liste, .ligne { margin: 0; padding: 0; list-style: none; }
.liste { display: grid; gap: 10px; }
.ligne { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; }
.lien { border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color 0.6s var(--sinus); }
.lien:hover { border-color: var(--ink); }

/* ============================================================ 9. galeries */
/* trois vignettes par ligne ; une ligne incomplète (ou une pratique à deux projets) reste centrée */
.grille { --cols: 3; --gx: var(--gouttiere); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(44px, 5vw, 64px) var(--gx); }
.grille > .tuile { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--gx)) / var(--cols)); min-width: 0; }
.tuile { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.tuile figure { width: 100%; margin-bottom: 10px; overflow: hidden; background: var(--tile); aspect-ratio: 3 / 2; }
.tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--sinus); }
.tuile:hover img { transform: scale(1.02); }
.tuile-info { font-size: 0.8125rem; color: var(--ink-2); }
.exemple { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; }
.filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: clamp(44px, 5vw, 64px); }
.filtres a { color: var(--ink-2); border-bottom: 1px solid transparent; transition: color 0.6s var(--sinus), border-color 0.6s var(--sinus); }
.filtres a:hover, .filtres a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }

/* ============================================================ 10. projet */
.visuel { display: grid; gap: 14px; max-width: 960px; margin: 0 auto; }
.visuel img { width: 100%; height: auto; background: var(--tile); }   /* photos et captures : proportions d'origine, jamais rognées */
.visuel img.art { aspect-ratio: 3 / 2; object-fit: cover; }          /* dessins générés : format 3:2 */
.visuel figcaption { text-align: center; }
.entete-page + .note { margin: -24px 0 32px; }
.fiche { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 48px; max-width: 46rem; margin: var(--space) auto 0; padding: 0; }
.fiche div { display: grid; gap: 4px; text-align: center; }
.fiche dd { margin: 0; font-size: var(--t-s); }
.prose { display: grid; gap: 1.1em; max-width: 34rem; margin: var(--space) auto 0; text-align: center; line-height: 1.8; }
.fiche + .prose { margin-top: clamp(40px, 5vw, 64px); }
.entete-page + .prose { margin-top: 0; }
.prose h2 { font-size: var(--t-caps); font-weight: 400; letter-spacing: var(--caps-ls); padding-left: var(--caps-ls); text-transform: uppercase; margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.planches { display: grid; gap: clamp(44px, 5vw, 72px); padding-top: var(--space); }
.voisins { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 clamp(18px, 3vw, 36px); max-width: 46rem; margin: 0 auto; padding-top: var(--space); }
.voisins a { display: grid; gap: 4px; }
.voisins a:first-child { justify-items: end; text-align: right; }
.voisins a:last-child { justify-items: start; text-align: left; }
.voisins--seul { grid-template-columns: minmax(0, 1fr); }
.voisins--seul a:first-child { justify-items: center; text-align: center; }
.voisins-sens { color: var(--ink-2); }
.voisins-titre { font-size: var(--t-s); border-bottom: 1px solid transparent; transition: border-color 0.6s var(--sinus); }
.voisins a:hover .voisins-titre { border-color: var(--ink); }
.voisins-trait { color: var(--ink-2); }

/* ============================================================ 11. studio, contact, mentions, 404 */
/* studio : portrait en noir et blanc, méthode en trois temps (une ligne chacun, sans numéro) */
.portrait { max-width: 720px; margin-bottom: clamp(48px, 6vw, 80px); }
.portrait img { filter: grayscale(1); }
.entete-page + .portrait + .prose { margin-top: 0; }
.methode { display: grid; gap: 26px; max-width: 30rem; margin: 0; padding: 0; list-style: none; }
.methode li { display: grid; justify-items: center; gap: 6px; }
.methode-titre { font-size: var(--t-caps); font-weight: 400; letter-spacing: var(--caps-ls); padding-left: var(--caps-ls); text-transform: uppercase; }
.methode-texte { color: var(--ink-2); }

/* formulaire de contact : une colonne centrée, champs soulignés d'un trait */
.formulaire { display: grid; justify-items: center; gap: 30px; max-width: 30rem; margin: 0 auto; text-align: center; }
.champ { display: grid; gap: 8px; width: 100%; }
.champ label { font-size: 0.6875rem; letter-spacing: 0.14em; padding-left: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 8px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-weight: 300; text-align: center; text-align-last: center;
  transition: border-color 0.6s var(--sinus);
}
.champ select { appearance: none; -webkit-appearance: none; cursor: pointer; }
.champ textarea { resize: vertical; min-height: 9rem; line-height: 1.7; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--ink); }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: none; border-color: var(--ink); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.note-formulaire { max-width: 26rem; font-size: 0.8125rem; color: var(--ink-2); line-height: 1.6; }
.etat { min-height: 1.6em; font-size: var(--t-s); color: var(--ink-2); }
.bouton:disabled { opacity: 0.5; cursor: progress; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 22px 0 calc(22px + var(--caps-ls));
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-size: var(--t-caps); font-weight: 400; letter-spacing: var(--caps-ls); text-transform: uppercase;
  cursor: pointer; transition: background-color 0.6s var(--sinus), color 0.6s var(--sinus);
}
.bouton:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.legal { display: grid; gap: 28px; max-width: 34rem; margin: 0 auto; padding: 0; text-align: center; }
.legal div { display: grid; gap: 6px; }
.legal dd { margin: 0; font-size: var(--t-s); }
.a-completer { border-bottom: 1px dashed var(--ink-2); }
.introuvable { display: grid; justify-items: center; gap: 14px; text-align: center; }

/* dessins d'exemple : inversés la nuit */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .art { filter: invert(0.9) hue-rotate(180deg); } }
:root[data-theme="dark"] .art { filter: invert(0.9) hue-rotate(180deg); }

/* ============================================================ 12. passage d'une page à l'autre
   Doux, en deux temps : l'ancienne page s'efface, puis la nouvelle apparaît en remontant de quelques pixels.
   L'en-tête et la barre ne bougent pas ; seul le trait de l'onglet actif se trace, depuis son centre. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sort 0.35s var(--sinus) both; }
::view-transition-new(root) { animation: entre 0.8s 0.3s var(--sinus) both; }
::view-transition-group(barre), ::view-transition-group(tete) { animation: none; }
::view-transition-old(barre), ::view-transition-old(tete) { display: none; }
::view-transition-new(barre), ::view-transition-new(tete) { animation: none; }
@keyframes sort { to { opacity: 0; } }
@keyframes entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-vue="accueil"]) .barre a[aria-current="page"]::after { animation: trait 0.9s 0.35s var(--sinus) both; }
  .barre a:active { opacity: 0.55; }
  /* aperçu en une page : chaque vue rejoue l'entrée quand elle s'affiche */
  :root[data-mode="apercu"] main > div[data-vue]:not([data-cle="accueil"]) { animation: entre 0.8s var(--sinus) both; }
}
@supports not (view-transition-name: none) {   /* navigateurs sans transition entre pages (Firefox, anciens Safari) */
  @media (prefers-reduced-motion: no-preference) { :root:not([data-vue="accueil"]):not([data-mode="apercu"]) main { animation: entre 0.8s var(--sinus) both; } }
}

/* ============================================================ 13. adaptations */
@media (max-width: 900px) { .grille { --cols: 2; } }
@media (max-width: 760px) {
  :root { --barre-h: 104px; }
  .barre { gap: 6px 14px; padding-top: 14px; }
  .barre .caps { font-size: 0.6875rem; letter-spacing: 0.16em; }
  .barre a { padding-left: 0.16em; }
}
@media (max-width: 600px) {
  .grille { --cols: 1; }
  .voisins { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .voisins a:first-child, .voisins a:last-child { justify-items: center; text-align: center; }
  .voisins-trait { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  .barre, .skip, .formulaire { display: none !important; }
  .pied { padding-bottom: 24px; }
}