/* =====================================================================
   DEGUELLLE : maquette 2, direction « L'agrandisseur »
   Évolution de la maquette 1 (Planche contact) : même grille, mêmes jetons,
   mêmes polices. Une seule grammaire pour tout le site : une planche de vues
   numérotées et une vue agrandie. Chaque bloc commenté correspond à un
   composant du futur thème WordPress (voir docs/notes.md).

   Règles imposées par le plugin Figma maison :
   pas de pseudo-éléments, pas d'image de fond, pas de dégradé, pas de filtre,
   pas d'italique, majuscules écrites en dur, filets en div de 1 px, focus en
   box-shadow (une seule ombre lue). Le plugin remet à opacity 1 et sans
   transform tout élément qui porte une transition : les états fermés ne
   doivent donc jamais dépendre d'une transformation pour être invisibles
   (ils utilisent l'attribut hidden).
   ===================================================================== */

@font-face { font-family: "Host Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../polices/host-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Host Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../polices/host-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Azeret Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../polices/azeret-mono-latin-400-normal.woff2") format("woff2"); }

/* ---------- Jetons ---------- */
:root {
  /* Couleurs : identiques à la maquette 1 */
  --papier: #ffffff;         /* fond, demandé par le client */
  --encre: #1d1c1a;          /* texte : 17:1 sur papier */
  --gris: #66635e;           /* texte secondaire : 6:1 sur papier */
  --erreur: #c20616;         /* réservé aux erreurs de formulaire */
  --attente: #f2f1ef;        /* passe-partout des tirages, image en attente */
  --filet: #d9d7d3;          /* filets */
  --champ: #8a8781;          /* contour des champs : 3,6:1 */
  --voile: rgba(255, 255, 255, 0.74);  /* voile posé sur la page quand le menu est ouvert */

  /* Typographie : Host Grotesk pour tout, Azeret Mono pour les numéros de vue */
  --police: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --chiffres: "Azeret Mono", "Courier New", monospace;
  --t-num: 12px;
  --t-petit: 13px;
  --t-interface: 15px;
  --t-texte: 17px;
  --t-grand: 22px;
  --t-titre: 40px;
  --t-menu: clamp(19px, 1.5vw, 22px);   /* menu affiné à la demande du client (19/10), avant : 28 à 38 px */
  --interligne-texte: 1.55;
  --interligne-titre: 1.12;

  /* Espacements (grille de 4 px) */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --e7: 48px; --e8: 64px; --e9: 96px; --e10: 144px; --e11: 220px;

  /* Grille */
  --colonnes: 12;
  --gouttiere: 24px;
  --marge: 48px;

  /* En-tête */
  --entete-h: 60px;
  --logo-h: 19px;

  /* Mouvement : trois courbes, pas une de plus */
  --rideau: cubic-bezier(0.32, 0.72, 0, 1);    /* ouverture du menu : rideau d'obturateur */
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);    /* réponses rapides, fermetures */
  --morph: cubic-bezier(0.77, 0, 0.175, 1);    /* transformation du bouton */
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--papier); -webkit-text-size-adjust: 100%; }
html.menu-actif { overflow: hidden; }
body.avec-entete { padding-top: var(--entete-h); }
body { background: var(--papier); color: var(--encre); font-family: var(--police); font-size: var(--t-texte); line-height: var(--interligne-texte); font-weight: 400; }
img { display: block; max-width: 100%; }
/* Photos protégées (demande de la cliente, 02/11) : le clic droit et l'appui long visent la page, pas l'image,
   et l'image ne se glisse pas. Dissuasif seulement. Les clics et survols passent par les conteneurs. */
img { pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3 { font-weight: 400; }
strong, b { font-weight: 500; }
:focus { outline: none; }
::selection { background: var(--encre); color: var(--papier); }
input, textarea { caret-color: var(--encre); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }
.focus { box-shadow: 0 0 0 3px var(--encre); }
.texte-lien { box-shadow: inset 0 -1px 0 currentColor; }
.masque-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.numero { font-family: var(--chiffres); font-size: var(--t-num); line-height: 1.4; letter-spacing: 0.3px; color: var(--gris); }
.filet { height: 1px; background: var(--filet); }
.img { overflow: hidden; background: var(--attente); }
.img img { width: 100%; height: 100%; object-fit: cover; }
.r32 { aspect-ratio: 3 / 2; }
.r23 { aspect-ratio: 2 / 3; }

/* ---------- Composant : lien d'évitement ---------- */
.evitement { position: absolute; left: var(--e2); top: -80px; z-index: 60; background: var(--encre); color: var(--papier); padding: var(--e2) var(--e3); font-size: var(--t-petit); }
.evitement:focus { top: var(--e2); }

/* ---------- Composant : en-tête ---------- */
/* Fixe et non collant : un élément collant retiré par transform fait défiler la page en haut quand il reçoit le focus */
.entete { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--papier); height: var(--entete-h); padding: 0 var(--marge); display: flex; align-items: center; justify-content: space-between; gap: var(--e6); transition: transform 320ms var(--sortie); }
.entete.masque { transform: translateY(-100%); }
.logo { display: block; padding: var(--e2) 0; }
.logo img { height: var(--logo-h); width: auto; }
.entete-droite { display: flex; align-items: center; gap: var(--e6); }
.langues { display: flex; align-items: center; gap: var(--e1); font-size: var(--t-interface); color: var(--gris); }
.langues a { padding: 3px var(--e1); }
.langues a[aria-current="true"] { color: var(--encre); }
.langues a:hover { color: var(--encre); }

/* ---------- Composant : bouton du menu (signature : trois traits verticaux, les trois L) ---------- */
.bouton-menu { display: inline-flex; align-items: center; gap: var(--e3); min-height: 44px; min-width: 44px; padding: 0 var(--e1); background: none; border: 0; cursor: pointer; font-size: var(--t-interface); }
.bouton-menu .mot { display: inline-block; min-width: 3.4em; text-align: right; }
.traits { position: relative; display: block; width: 16px; height: 18px; flex: none; transition: transform 160ms var(--sortie); }
.trait { position: absolute; top: 0; display: block; width: 2px; height: 18px; background: var(--encre); transition: transform 300ms var(--morph), opacity 200ms ease; }
.trait.t1 { left: 0; }
.trait.t2 { left: 7px; }
.trait.t3 { left: 14px; }
.bouton-menu:active .traits { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  /* Survol : les trois couches s'écartent d'un cheveu */
  .bouton-menu[aria-expanded="false"]:hover .trait.t1 { transform: translateX(-2px); }
  .bouton-menu[aria-expanded="false"]:hover .trait.t3 { transform: translateX(2px); }
}
/* Version figée du survol, pour la planche d'états et Figma */
.bouton-menu.survol .trait.t1 { left: -2px; }
.bouton-menu.survol .trait.t3 { left: 16px; }
/* Ouvert : les deux traits extérieurs se croisent, celui du milieu se retire */
.bouton-menu[aria-expanded="true"] .trait.t1 { transform: translateX(7px) rotate(45deg); }
.bouton-menu[aria-expanded="true"] .trait.t3 { transform: translateX(-7px) rotate(-45deg); }
.bouton-menu[aria-expanded="true"] .trait.t2 { transform: scaleY(0); opacity: 0; }

/* ---------- Composant : menu (bande horizontale qui descend comme un rideau d'obturateur) ---------- */
.menu { position: fixed; left: 0; right: 0; top: 0; z-index: 25; background: var(--papier); padding: calc(var(--entete-h) + var(--e5)) var(--marge) 0; display: flex; flex-direction: column; gap: var(--e4); clip-path: inset(0 0 100% 0); transition: clip-path 240ms var(--sortie); }
.menu.ouvert { clip-path: inset(0 0 0 0); transition: clip-path 460ms var(--rideau); }
.menu-liste { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e3) var(--e6); }
.menu-liste a { display: block; font-size: var(--t-menu); line-height: 1.2; letter-spacing: -0.1px; padding: var(--e1) 0; }
.menu-liste a .libelle { display: inline-block; padding-bottom: 2px; }
.menu-liste a[aria-current="page"] .libelle { box-shadow: inset 0 -1px 0 var(--encre); }
.menu-liste a:hover { color: var(--gris); }
.menu-bas { display: flex; justify-content: space-between; align-items: center; gap: var(--e5); font-size: var(--t-petit); color: var(--gris); }
.menu-bas ul { display: flex; gap: var(--e5); }
.menu-bas a:hover { color: var(--encre); }
.menu .filet { margin-top: 0; }
.menu .bord-menu { margin: 0 calc(var(--marge) * -1); background: var(--encre); }
/* Les liens se révèlent après le rideau, sans glisser : un fondu court, décalé de 40 ms */
.menu .apparait { opacity: 0; transition: opacity 120ms ease; }
.menu.ouvert .apparait { opacity: 1; transition: opacity 280ms var(--sortie); }
.menu.ouvert .apparait.d1 { transition-delay: 140ms; }
.menu.ouvert .apparait.d2 { transition-delay: 180ms; }
.menu.ouvert .apparait.d3 { transition-delay: 220ms; }
.menu.ouvert .apparait.d4 { transition-delay: 260ms; }
.menu.ouvert .apparait.d5 { transition-delay: 300ms; }
.menu.ouvert .apparait.d6 { transition-delay: 340ms; }
.menu.ouvert .apparait.d7 { transition-delay: 380ms; }
.menu[hidden], .voile-menu[hidden] { display: none; }
.voile-menu { position: fixed; inset: 0; z-index: 20; background: var(--voile); opacity: 0; transition: opacity 240ms var(--sortie); }
.voile-menu.ouvert { opacity: 1; transition: opacity 400ms var(--sortie); }
.menu .langues { display: none; }

/* ---------- Composant : l'agrandisseur (ouverture de la Campagne) ---------- */
.agrandisseur { height: calc(100svh - var(--entete-h)); min-height: 560px; display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: var(--gouttiere); padding: 0 var(--marge); }
.scene { grid-column: 1 / -1; grid-row: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: var(--e4) 0 0; }
.scene .tirage-scene { height: 100%; display: flex; align-items: center; justify-content: center; }
.scene img { height: auto; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: var(--attente); transition: opacity 260ms var(--sortie); }
.scene img.change { opacity: 0; transition: opacity 140ms ease; }
.fiche { grid-column: 1 / span 4; grid-row: 2; align-self: end; display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5) 0 var(--e5); }
.fiche h1 { font-size: var(--t-grand); line-height: 1.25; letter-spacing: -0.2px; max-width: 18em; }
.fiche .credit { font-size: var(--t-petit); color: var(--gris); }
.fiche .compteur { font-family: var(--chiffres); font-size: var(--t-num); color: var(--encre); }
.planche { grid-column: 6 / -1; grid-row: 2; align-self: end; display: grid; grid-template-columns: repeat(7, 1fr); column-gap: 8px; align-items: end; padding: var(--e5) 0 var(--e5); }
/* Ordinateur : trois colonnes parallèles, le titre, la photo sur toute la hauteur, la planche */
@media (min-width: 1101px) {
  .agrandisseur { grid-template-rows: minmax(0, 1fr); }
  .scene { grid-column: 3 / span 8; padding: var(--e4) 0 var(--e5); }
  .fiche { grid-column: 1 / span 2; grid-row: 1; padding: 0 0 var(--e5); }
  .fiche h1 { font-size: var(--t-texte); line-height: 1.35; letter-spacing: 0; }
  .planche { grid-column: 11 / span 2; grid-row: 1; grid-template-columns: repeat(2, 1fr); gap: var(--e4) 10px; padding: 0 0 var(--e5); }
}
.vignette { display: flex; flex-direction: column; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.vignette .cadre { padding: 4px; border: 1px solid transparent; transition: border-color 160ms ease; }
.vignette:hover .cadre { border-color: var(--filet); }
.vignette[aria-pressed="true"] .cadre { border-color: var(--encre); }
.vignette[aria-pressed="true"] .numero { color: var(--encre); }
.vignette .numero { padding-left: 5px; }

/* ---------- Composant : partition des tirages (mise en page libre, éclatée) ---------- */
.partition { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e10) var(--marge) var(--e10); row-gap: var(--e10); }
.tirage { display: flex; flex-direction: column; gap: var(--e3); }
.legende { display: flex; gap: var(--e4); font-size: var(--t-petit); line-height: 1.45; color: var(--gris); max-width: 34em; }
.legende .numero { color: var(--encre); flex: none; }
/* 1. Rupture : la seule image qui sort des marges, bord à bord */
.p-bord { grid-column: 1 / -1; margin: 0 calc(var(--marge) * -1); }
.p-bord .legende { padding: 0 var(--marge); }
/* 2. Texte et portrait : le texte en tête de colonne, l'image descend */
.p-texte { grid-column: 2 / span 4; grid-row: 2; font-size: var(--t-grand); line-height: 1.45; align-self: start; }
.p-portrait { grid-column: 7 / span 5; grid-row: 2 / span 2; margin-top: var(--e11); }
/* 3. Contrepoint (vue 06) : sous le texte, dans la même colonne de départ, posée sur la ligne de pied du portrait.
   Le texte, la 06 et la 04 forment un seul bloc au lieu d'une image isolée au milieu du blanc. */
.p-silence { grid-column: 2 / span 3; grid-row: 3; align-self: end; }
/* 4. Paire posée sur la même ligne de base */
.paire { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); align-items: end; }
.paire .a { grid-column: 1 / span 7; }
.paire .b { grid-column: 9 / span 3; }
/* 5. Dernier tirage, nu sur le blanc (le passe-partout gris est retiré à la demande du client, 19/10) */
.p-passe { grid-column: 6 / span 6; }
/* 6. Deuxième bloc de texte, posé à côté du dernier tirage */
.p-texte-2 { grid-column: 1 / span 4; font-size: var(--t-texte); align-self: end; color: var(--encre); max-width: 26em; }
.credit-saison { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--e5); font-size: var(--t-petit); color: var(--gris); }

/* ---------- Composant : rubrique suivante ---------- */
.suite { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--e5); padding: 0 var(--marge) var(--e9); }
.suite .petit { font-size: var(--t-petit); color: var(--gris); }
.suite a { font-size: var(--t-titre); line-height: 1.1; }
.suite a:hover { color: var(--gris); }

/* ---------- Composant : pied de page ---------- */
.pied-filet { margin: 0 var(--marge); }
.pied { padding: var(--e5) var(--marge) var(--e6); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e5); font-size: var(--t-petit); color: var(--gris); }
.pied ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); }
.pied a { display: inline-block; padding: var(--e1) 0; }
.pied a:hover { color: var(--encre); }

/* ---------- Composant : introduction de rubrique ---------- */
.intro { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e9) var(--marge) var(--e7); align-items: end; }
.intro h1 { grid-column: 1 / span 6; font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.intro .surtitre { grid-column: 9 / -1; font-size: var(--t-petit); color: var(--gris); text-align: right; }

/* ---------- Composant : Lookbook (la planche muette : blocs identiques, aucun texte) ---------- */
.looks { padding: 0 var(--marge) var(--e10); display: flex; flex-direction: column; gap: var(--e5); }
.rang { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: var(--gouttiere); }
.look a { display: block; }
.look .cadre { padding: 8px; border: 1px solid transparent; transition: border-color 160ms ease; }
.look a:hover .cadre { border-color: var(--filet); }

/* Vue agrandie d'un look (fenêtre plein écran) : l'agrandisseur appliqué au Lookbook */
.visionneuse { position: fixed; inset: 0; z-index: 45; background: var(--papier); display: grid; grid-template-rows: var(--entete-h) 1fr auto; padding: 0 var(--marge); }
.visionneuse .haut { display: flex; align-items: center; justify-content: space-between; font-size: var(--t-interface); }
.visionneuse .compteur { font-family: var(--chiffres); font-size: var(--t-num); color: var(--encre); }
.visionneuse .corps-vue { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); grid-template-rows: minmax(0, 1fr); column-gap: var(--gouttiere); min-height: 0; padding: var(--e4) 0; }
.visionneuse .principale { grid-column: 1 / span 8; min-height: 0; height: 100%; display: flex; justify-content: center; }
/* Pas de fond gris derrière la photo : elle repose sur le blanc (demande de Denis, 07/11) */
.visionneuse .principale img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
/* Colonne calée en bas ; si les caractéristiques dépliées la font déborder, elle défile (margin-top: auto plutôt que flex-end, qui rognerait le haut) */
.visionneuse .autres { grid-column: 10 / -1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--e4); }
.visionneuse .autres > :first-child { margin-top: auto; }
.visionneuse .autres .vignette { width: 34%; flex: none; }
.visionneuse .fiche-look { display: flex; flex-direction: column; gap: var(--e1); font-size: var(--t-petit); color: var(--gris); }
/* Lien « Caractéristiques » : déplie la description complète de la création */
.lien-caracteristiques { align-self: flex-start; display: inline-flex; align-items: baseline; gap: var(--e2); min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: var(--t-petit); color: var(--encre); }
.lien-caracteristiques > span:first-child { padding-bottom: 2px; box-shadow: inset 0 -1px 0 var(--encre); }
.lien-caracteristiques .signe { color: var(--encre); }
.lien-caracteristiques:hover > span:first-child { box-shadow: inset 0 -1px 0 var(--filet); }
.caracteristiques { display: flex; flex-direction: column; gap: var(--e4); padding: var(--e3) 0 var(--e1); border-top: 1px solid var(--filet); color: var(--encre); line-height: 1.5; }
.caracteristiques[hidden] { display: none; }
/* Caractéristiques dépliées : les trois vues passent en ligne sous le texte, pour rester visibles */
.visionneuse .autres:has(.caracteristiques:not([hidden])) { flex-direction: row; flex-wrap: wrap; align-content: flex-end; column-gap: var(--e3); }
.visionneuse .autres:has(.caracteristiques:not([hidden])) .fiche-look { flex-basis: 100%; }
.visionneuse .autres:has(.caracteristiques:not([hidden])) .vignette { width: calc((100% - 2 * var(--e3)) / 3); }
.caracteristiques .infos { font-size: var(--t-petit); grid-template-columns: max-content 1fr; gap: var(--e1) var(--e4); }
.visionneuse .bas { display: flex; justify-content: space-between; align-items: center; padding: var(--e3) 0 var(--e5); font-size: var(--t-interface); }
.bouton-texte { background: none; border: 0; min-height: 44px; padding: 0 var(--e1); cursor: pointer; font-size: var(--t-interface); }
.bouton-texte:hover { color: var(--gris); }

/* ---------- Composant : Événement (le filigrane et son tirage net) ---------- */
.evenement { position: relative; min-height: calc(100svh - var(--entete-h)); display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e9) var(--marge); align-items: start; }
.evenement .fond { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.evenement .fond img { width: 100%; height: 100%; object-fit: cover; opacity: .10; }
.evenement .contenu { position: relative; z-index: 1; grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--e5); }
.evenement h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.evenement .net { position: relative; z-index: 1; grid-column: 9 / span 4; padding: 32px; background: var(--papier); }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: var(--e2) var(--e5); font-size: var(--t-interface); }
.infos dt { color: var(--gris); }

/* ---------- Composant : Événements (un calendrier tenu comme un journal) ---------- */
.ev-intro { padding-bottom: var(--e8); }
.ev-sommaire { grid-column: 9 / -1; display: flex; justify-content: flex-end; gap: var(--e6); font-size: var(--t-interface); }
.ev-sommaire a { display: inline-flex; align-items: baseline; gap: var(--e2); padding: var(--e1) 0; box-shadow: inset 0 -1px 0 var(--filet); transition: box-shadow 160ms ease; }
.ev-sommaire a:hover { box-shadow: inset 0 -1px 0 var(--encre); }
.ev-section, .calendrier { scroll-margin-top: calc(var(--entete-h) + var(--e5)); }
.archives-annee, .ev-ligne, .evenement.prochain { scroll-margin-top: calc(var(--entete-h) + var(--e5)); }

/* Calendrier : douze mois en ligne ; chaque événement est un trait vertical, comme les trois L */
.calendrier { padding: 0 var(--marge) var(--e10); display: flex; flex-direction: column; gap: var(--e5); }
.cal-tete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e5); }
.cal-annee { font-size: var(--t-grand); color: var(--encre); letter-spacing: 0; }
.cal-legende { display: flex; gap: var(--e5); font-size: var(--t-petit); color: var(--gris); }
.cal-legende .leg { display: inline-flex; align-items: center; gap: var(--e2); }
.leg-trait { display: inline-block; width: 2px; height: 14px; background: var(--encre); }
.leg-trait.passe { background: var(--champ); }
.cal-mois-liste { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2px; }
.cal-mois { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.cal-filet { height: 2px; background: var(--encre); }
.cal-mois.passe .cal-filet { height: 1px; margin-bottom: 1px; background: var(--filet); }
.cal-nom { display: flex; gap: var(--e2); align-items: baseline; font-size: var(--t-petit); padding-right: var(--e2); }
.cal-mois.passe .cal-nom { color: var(--gris); }
.cal-piste { position: relative; height: 64px; }
.cal-marque, .cal-ajd { position: absolute; top: 0; left: calc(var(--j) * 100%); display: flex; flex-direction: column; align-items: flex-start; gap: var(--e1); }
.cal-marque { min-width: 32px; min-height: 44px; }
.cal-trait { display: block; width: 2px; height: 28px; background: var(--encre); transition: height 200ms var(--sortie); }
.cal-marque .numero { color: var(--encre); }
.cal-marque.passe .cal-trait { background: var(--champ); }
.cal-marque.passe .numero { color: var(--gris); }
.cal-ajd-trait { display: block; width: 1px; height: 40px; background: var(--encre); }
.cal-ajd .numero { color: var(--encre); }
.cal-ajd { top: -10px; }
@media (hover: hover) and (pointer: fine) {
  .cal-marque:hover .cal-trait { height: 36px; }
}

/* Sections : À venir, Archives */
.ev-section { padding: 0 var(--marge) var(--e10); display: flex; flex-direction: column; }
.ev-section-tete { display: flex; align-items: baseline; gap: var(--e4); padding-bottom: var(--e4); }
.ev-section-tete h2 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.ev-section-tete .numero { font-size: var(--t-interface); color: var(--gris); }
.ev-section-note { margin-left: auto; font-size: var(--t-petit); color: var(--gris); }
.filet.fort { background: var(--encre); }

/* Le prochain événement : le filigrane et son tirage net, bord à bord */
.evenement.prochain { min-height: 0; margin: 0 calc(var(--marge) * -1); padding: var(--e9) var(--marge); }
.prochain .ev-sur { display: flex; gap: var(--e4); align-items: baseline; font-size: var(--t-petit); }
.prochain .ev-sur .numero { color: var(--encre); }
.ev-date-grande { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -2px; color: var(--encre); margin-top: var(--e2); }
.prochain h3 { font-size: var(--t-grand); line-height: 1.3; max-width: 22em; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e5); }
/* Ajouter à mon agenda : deux liens, le fichier .ics (Apple, Outlook) et Google Agenda */
.ev-agenda { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e5); row-gap: var(--e2); font-size: var(--t-interface); }
.ev-agenda-titre { color: var(--gris); }
/* Zone de clic de 44 px de haut : le trait est un soulignement de texte, pour rester collé au mot */
.ev-agenda a.texte-lien { box-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; padding: var(--e3) 0; }
.prochain .net { align-self: end; }

/* Registre des autres dates à venir */
.ev-registre { display: flex; flex-direction: column; }
.ev-ligne { border-top: 1px solid var(--filet); }
.ev-ligne:last-child { border-bottom: 1px solid var(--filet); }
.ev-ligne .ev-l-lien { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); align-items: center; padding: var(--e4) 0; }
.ev-l-date { grid-column: 1 / span 2; font-size: var(--t-interface); color: var(--encre); }
.ev-l-titre { grid-column: 3 / span 5; font-size: var(--t-grand); line-height: 1.3; }
.ev-l-lieu { grid-column: 8 / span 2; font-size: var(--t-petit); color: var(--gris); }
.ev-l-lieu .virgule { display: none; }
.ev-l-img { grid-column: 10 / span 2; display: block; }
.ev-l-img img { transition: transform 600ms var(--sortie); }
.ev-l-j { grid-column: 12; justify-self: end; color: var(--encre); }
/* Les liens d'agenda sous la ligne, alignés sur le titre */
.ev-ligne { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); }
.ev-ligne .ev-l-lien { grid-column: 1 / -1; }
.ev-ligne .ev-agenda { grid-column: 3 / -1; margin-top: calc(var(--e3) * -1); padding-bottom: var(--e2); font-size: var(--t-petit); }
@media (hover: hover) and (pointer: fine) {
  .ev-ligne .ev-l-lien:hover .ev-l-img img { transform: scale(1.04); }
  .ev-ligne .ev-l-lien:hover .ev-l-titre { color: var(--gris); }
}

/* Aucun événement à venir */
.ev-vide { padding: var(--e8) 0; display: flex; flex-direction: column; gap: var(--e3); max-width: 36em; }
.ev-vide-titre { font-size: var(--t-grand); }
.ev-vide p:not(.ev-vide-titre) { color: var(--gris); }

/* Archives : chaque événement passé, un tirage rangé dans son passe-partout */
.archives-annee { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); padding: var(--e7) 0; }
.annee { grid-column: 1 / span 2; align-self: start; position: sticky; top: calc(var(--entete-h) + var(--e5)); font-size: var(--t-titre); line-height: 1; letter-spacing: -1px; color: var(--champ); }
.archives-grille { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e8) var(--gouttiere); align-items: start; }
.archive a { display: flex; flex-direction: column; gap: var(--e3); }
/* Le passe-partout garde sa couleur au survol : seule l'image zoome (demande du client, 19/10) */
.passe-partout { background: var(--attente); padding: var(--e5); }
.passe-partout .img img { opacity: 0.82; transition: opacity 400ms var(--sortie), transform 700ms var(--sortie); }
.archive-meta { display: flex; justify-content: space-between; gap: var(--e3); padding-top: var(--e1); }
.archive h3 { font-size: var(--t-texte); line-height: 1.35; }
.archive-lieu { font-size: var(--t-petit); color: var(--gris); }
.archive-lire { align-self: flex-start; font-size: var(--t-petit); padding-bottom: 2px; box-shadow: inset 0 -1px 0 var(--filet); transition: box-shadow 200ms ease; }
.archive a:hover .passe-partout .img img, .archive a:focus-visible .passe-partout .img img { opacity: 1; }
.archive a:hover .archive-lire, .archive a:focus-visible .archive-lire { box-shadow: inset 0 -1px 0 var(--encre); }
@media (hover: hover) and (pointer: fine) {
  .archive a:hover .passe-partout .img img { transform: scale(1.03); }
}

/* Compte rendu d'un événement passé */
.ev-detail-barre { display: flex; justify-content: space-between; align-items: baseline; padding: var(--e6) var(--marge) 0; font-size: var(--t-interface); }
.ev-detail-tete { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); row-gap: var(--e6); padding: var(--e8) var(--marge) var(--e8); align-items: end; }
.ev-detail-tete .gauche { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: var(--e4); }
.ev-detail-tete h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.ev-detail-tete .droite { grid-column: 9 / -1; }
.ev-detail-tete .chapo { grid-column: 1 / span 7; font-size: var(--t-grand); line-height: 1.45; max-width: 30em; }
.ev-detail .ev-sur { display: flex; gap: var(--e4); align-items: center; font-size: var(--t-petit); }
.tampon-texte { display: inline-block; padding: 2px var(--e2); border: 1px solid var(--encre); font-size: var(--t-petit); }
.ev-detail .agrandisseur { border-top: 1px solid var(--filet); padding-top: var(--e4); }
.ev-detail .fiche h2 { font-size: var(--t-texte); line-height: 1.35; }
.ev-detail-texte { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gouttiere); row-gap: var(--e7); padding: var(--e10) var(--marge) var(--e9); }
.ev-detail-texte section { grid-column: 3 / span 6; display: flex; flex-direction: column; gap: var(--e3); }
.ev-detail-texte h2 { font-size: var(--t-grand); font-weight: 500; line-height: 1.3; }
.ev-voisins { display: grid; grid-template-columns: 1fr 1fr; margin: 0 var(--marge) var(--e9); border-top: 1px solid var(--encre); }
.ev-voisins a { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e5) 0; }
.ev-voisins .suiv { align-items: flex-end; text-align: right; border-left: 1px solid var(--filet); }
.ev-voisins .petit { font-size: var(--t-petit); color: var(--gris); }
.ev-v-titre { font-size: var(--t-grand); line-height: 1.3; max-width: 20em; }
.ev-voisins a:hover .ev-v-titre { color: var(--gris); }

/* ---------- Composant : page de texte (À propos, Réparation) ---------- */
.page-texte { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e9) var(--marge) var(--e10); }
.page-texte h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.page-texte .chapo { font-size: var(--t-grand); line-height: 1.45; max-width: 30em; }
.page-texte h2 { font-size: var(--t-grand); font-weight: 500; line-height: 1.3; }
.page-texte section { display: flex; flex-direction: column; gap: var(--e3); max-width: 36em; }
.page-texte p + p { margin-top: var(--e3); }

/* À propos : le portrait en grand, le texte à côté, sur la même ligne de départ */
.apropos .tete { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: var(--e5); padding-bottom: var(--e9); }
.apropos .portrait { grid-column: 1 / span 6; }
.apropos .texte { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--e7); }
.apropos .citation { font-size: var(--t-grand); font-weight: 500; line-height: 1.3; max-width: 30em; }

/* Réparation : trois étapes séparées par trois traits verticaux, comme le bouton du menu */
.reparation .tete { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: var(--e5); }
.reparation .matiere { grid-column: 7 / -1; grid-row: 1; align-self: start; }
.reparation .bloc-etapes { grid-column: 1 / -1; max-width: none; margin-top: var(--e10); display: flex; flex-direction: column; gap: var(--e6); }
.reparation .etapes { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gouttiere); }
.reparation .etape { display: grid; grid-template-columns: 1px 1fr; column-gap: var(--e5); }
.reparation .trait-v { background: var(--encre); }
.reparation .etape-texte { display: flex; flex-direction: column; gap: var(--e3); padding: var(--e1) 0 var(--e2); max-width: 24em; }
.reparation .etape h3 { font-weight: 500; }
.reparation .suite-texte { grid-column: 1 / -1; margin-top: var(--e9); display: flex; flex-direction: column; gap: var(--e7); }
/* Le texte en trois colonnes équilibrées, calées sur les marges du titre et de la photo */
.reparation .corps { display: block; max-width: none; columns: 3; column-gap: var(--e7); column-rule: 1px solid var(--filet); }
.reparation .corps p { orphans: 3; widows: 3; }
/* La seconde photo, verticale, sous la dernière colonne du texte */
.reparation .matiere-2 { align-self: flex-end; width: calc((100% - 2 * var(--e7)) / 3); }


/* ---------- Composant : bouton d'action ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--e5); background: var(--encre); color: var(--papier); border: 1px solid var(--encre); font-size: var(--t-interface); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--sortie); }
.bouton:hover { background: var(--papier); color: var(--encre); }
.bouton:active { transform: scale(0.98); }

/* ---------- Composant : formulaire de contact (repris de la maquette 1) ---------- */
.contact-grille { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e9) var(--marge) var(--e10); }
.contact-grille .gauche { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--e6); }
.contact-grille .droite { grid-column: 7 / span 5; }
.contact-grille h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.coordonnees { display: flex; flex-direction: column; gap: var(--e4); font-size: var(--t-grand); }
.coordonnees a { box-shadow: inset 0 -1px 0 currentColor; }
.mise-a-jour { font-size: var(--t-petit); color: var(--gris); }
.formulaire { display: flex; flex-direction: column; gap: var(--e5); max-width: 36em; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label { font-size: var(--t-interface); font-weight: 500; }
.champ .aide { font-size: var(--t-petit); color: var(--gris); }
.champ input, .champ textarea, .champ select { width: 100%; min-height: 48px; padding: var(--e3); font-size: 16px; background: var(--papier); border: 1px solid var(--champ); border-radius: 0; }
.champ textarea { min-height: 160px; resize: vertical; line-height: 1.5; }
.champ input:hover, .champ textarea:hover { border-color: var(--encre); }
.case { display: grid; grid-template-columns: 24px 1fr; gap: var(--e3); align-items: start; font-size: var(--t-interface); }
.case input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--encre); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Planche d'états du menu ---------- */
.etats { padding: var(--e9) var(--marge) var(--e10); display: flex; flex-direction: column; gap: var(--e8); }
.etats h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.etats .chapo { font-size: var(--t-grand); line-height: 1.45; max-width: 34em; }
.etats-boutons { display: grid; grid-template-columns: repeat(5, 1fr); column-gap: var(--gouttiere); row-gap: var(--e6); }
.etat { display: flex; flex-direction: column; gap: var(--e4); }
.etat .scene-etat { height: 120px; border: 1px solid var(--filet); display: flex; align-items: center; justify-content: center; }
.etat p { font-size: var(--t-petit); color: var(--gris); max-width: 22em; }
.etat h2 { font-size: var(--t-interface); font-weight: 500; }
.etats .apercu { border: 1px solid var(--filet); overflow: hidden; position: relative; }
.etats .apercu .entete, .etats .apercu .menu { position: relative; }
.etats .apercu .menu { clip-path: none; }
.etats .apercu .menu-liste a { font-size: var(--t-menu); }

/* ---------- Mouvement réduit : plus de déplacement, des fondus courts seulement ---------- */
@media (prefers-reduced-motion: reduce) {
  .entete, .trait, .traits, .bouton { transition: none; }
  .menu, .menu.ouvert { clip-path: none; transition: opacity 160ms ease; }
  .menu:not(.ouvert) { opacity: 0; }
  .menu .apparait, .menu.ouvert .apparait { transition: none; opacity: 1; }
  .scene img, .scene img.change { transition: none; }
}
/* Révélation lente de la vue agrandie au premier chargement : la seule animation non déclenchée */
@media (prefers-reduced-motion: no-preference) {
  .scene img.revele { animation: revelation 1.2s var(--sortie) both; }
}
@keyframes revelation { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Très grands écrans ---------- */
@media (min-width: 2000px) {
  :root { --t-texte: 19px; --t-interface: 16px; --t-titre: 52px; --t-menu: 24px; --marge: 80px; --gouttiere: 32px; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  :root { --t-menu: 20px; }
  .planche { grid-column: 5 / -1; }
  .reparation .corps { columns: 2; }
  .reparation .matiere-2 { width: calc((100% - var(--e7)) / 2); }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  :root { --marge: 20px; --gouttiere: 12px; --t-titre: 30px; --t-grand: 19px; --t-menu: 24px; --entete-h: 56px; --logo-h: 17px; --colonnes: 6; --e10: 96px; --e11: 64px; }
  .entete-droite > .langues { display: none; }
  .menu { height: 100dvh; padding: calc(var(--entete-h) + var(--e6)) var(--marge) var(--e6); gap: var(--e6); justify-content: space-between; }
  .menu-liste { flex-direction: column; align-items: flex-start; gap: var(--e1); }
  .menu-liste a { min-height: 48px; display: flex; align-items: center; }
  .menu .filet { display: none; }
  .menu-bas { flex-direction: column; align-items: flex-start; gap: var(--e4); }
  .menu .langues { display: flex; }
  .menu .langues a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .agrandisseur { height: auto; min-height: 0; padding: 0; grid-template-rows: auto auto auto; column-gap: 0; }
  .scene { padding: 0; }
  .scene .tirage-scene { width: 100%; height: auto; }
  .scene img { width: 100%; height: auto; max-height: calc(100svh - var(--entete-h) - 150px); object-fit: contain; }
  .fiche { grid-column: 1 / -1; grid-row: 3; padding: 0 var(--marge) var(--e5); }
  .planche { grid-column: 1 / -1; grid-row: 2; column-gap: 5px; padding: var(--e4) var(--marge) var(--e5); }
  .vignette .cadre { padding: 2px; }
  .vignette .numero { padding-left: 2px; font-size: 10px; }
  .partition { padding: var(--e7) var(--marge) var(--e9); row-gap: var(--e9); }
  .menu { padding-bottom: 0; }
  .menu .bord-menu { display: none; }
  .p-bord { grid-column: 1 / -1; }
  .p-texte { grid-column: 1 / -1; }
  .p-portrait { grid-column: 2 / -1; margin-top: 0; }
  .p-texte, .p-portrait, .p-silence { grid-row: auto; }
  .p-silence { grid-column: 1 / span 4; align-self: start; }
  .etats .apercu .menu { height: auto; }
  .paire { row-gap: var(--e7); }
  .paire .a { grid-column: 1 / -1; }
  .paire .b { grid-column: 1 / span 3; }
  .p-passe { grid-column: 1 / -1; }
  .p-texte-2 { grid-column: 1 / -1; }
  .credit-saison { flex-direction: column; gap: var(--e2); }
  .suite { flex-direction: column; gap: var(--e1); }
  .suite a { font-size: 28px; }
  .pied { flex-direction: column; gap: var(--e4); }
  .intro { padding: var(--e7) var(--marge) var(--e6); row-gap: var(--e3); }
  .intro h1, .intro .surtitre { grid-column: 1 / -1; text-align: left; }
  .rang { grid-template-columns: repeat(2, 1fr); row-gap: var(--e5); }
  .look .cadre { padding: 4px; }
  .visionneuse .bas { flex-wrap: wrap; gap: var(--e2); }
  .evenement { padding: var(--e8) var(--marge); min-height: 0; row-gap: var(--e7); }
  .evenement .contenu { grid-column: 1 / -1; }
  .evenement .net { grid-column: 2 / -1; padding: var(--e4); }
  .page-texte { padding: var(--e7) var(--marge) var(--e9); }
  .apropos .tete, .apropos .portrait, .apropos .texte { grid-column: 1 / -1; }
  .apropos .tete { padding-bottom: var(--e7); }
  .apropos .texte { margin-top: var(--e7); }
  .reparation .tete, .reparation .matiere, .reparation .suite-texte, .reparation .bloc-etapes { grid-column: 1 / -1; grid-row: auto; }
  .reparation .matiere { margin-top: var(--e7); }
  .reparation .etapes { grid-template-columns: 1fr; row-gap: var(--e6); }
  .reparation .corps { columns: 1; }
  .reparation .matiere-2 { width: 100%; }
  .contact-grille { padding: var(--e7) var(--marge) var(--e9); row-gap: var(--e8); }
  .contact-grille .gauche, .contact-grille .droite { grid-column: 1 / -1; }
  .etats-boutons { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Vue d'un look : tablette, mobile et petits écrans ----------
   La photo et le texte s'empilent. La hauteur de la photo ne dépend que de l'écran :
   déplier les caractéristiques ne la réduit jamais, le texte s'ajoute dessous et la vue défile. */
@media (max-width: 1100px), (max-aspect-ratio: 1/1) {
  .visionneuse .corps-vue { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: auto; overflow-y: auto; overscroll-behavior: contain; row-gap: var(--e5); }
  .visionneuse .principale, .visionneuse .autres { grid-column: 1 / -1; }
  /* min-height: auto : sans lui, la grille écrase la photo dès que le texte déplié manque de place */
  .visionneuse .principale, .visionneuse .autres { min-height: auto; }
  .visionneuse .principale { height: auto; justify-content: flex-start; align-items: flex-start; }
  .visionneuse .principale img { width: auto; height: auto; max-width: 100%; max-height: max(60svh, calc(100svh - var(--entete-h) - 210px)); }
  .visionneuse .autres,
  .visionneuse .autres:has(.caracteristiques:not([hidden])) { overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: var(--e4) var(--e3); }
  .visionneuse .autres > :first-child { margin-top: 0; }
  .visionneuse .fiche-look { flex-basis: 100%; max-width: 640px; }
  .visionneuse .autres .vignette,
  .visionneuse .autres:has(.caracteristiques:not([hidden])) .vignette { width: calc((100% - 2 * var(--e3)) / 3); max-width: 150px; }
}

/* ---------- Événements : tablette et mobile ---------- */
@media (max-width: 1100px) {
  .archives-grille { grid-template-columns: repeat(2, 1fr); }
  .ev-l-titre { grid-column: 3 / span 6; }
  .ev-l-lieu { grid-column: 9 / span 2; }
  .ev-l-img { display: none; }
  .ev-l-j { grid-column: 11 / span 2; }
}
@media (max-width: 760px) {
  .ev-sommaire { grid-column: 1 / -1; justify-content: flex-start; }
  .calendrier { padding-bottom: var(--e9); }
  .cal-mois-liste { grid-template-columns: repeat(6, 1fr); row-gap: var(--e5); }
  .cal-piste { height: 56px; }
  .cal-nom { font-size: 11px; gap: var(--e1); flex-direction: column; }
  .ev-section { padding-bottom: var(--e9); }
  .ev-section-tete { flex-wrap: wrap; }
  .ev-section-note { margin-left: 0; flex-basis: 100%; }
  .evenement.prochain { padding: var(--e7) var(--marge); }
  .ev-ligne .ev-l-lien { grid-template-columns: repeat(6, 1fr); row-gap: var(--e1); align-items: baseline; }
  .ev-ligne .ev-agenda { grid-column: 1 / -1; margin-top: calc(var(--e2) * -1); }
  .ev-agenda { row-gap: 0; }
  .ev-agenda-titre { flex-basis: 100%; }
  .ev-l-date { grid-column: 1 / span 4; grid-row: 1; }
  .ev-l-j { grid-column: 5 / span 2; grid-row: 1; }
  .ev-l-titre { grid-column: 1 / -1; grid-row: 2; }
  .ev-l-lieu { grid-column: 1 / -1; grid-row: 3; }
  .ev-l-lieu br { display: none; }
  .ev-l-lieu .virgule { display: inline; }
  .archives-annee { padding: var(--e6) 0; row-gap: var(--e5); }
  .annee { grid-column: 1 / -1; position: static; font-size: var(--t-titre); }
  .archives-grille { grid-column: 1 / -1; grid-template-columns: 1fr; row-gap: var(--e7); }
  .archive a { display: grid; grid-template-columns: 5fr 6fr; column-gap: var(--e4); row-gap: var(--e1); align-items: start; }
  .archive .passe-partout { grid-row: 1 / span 4; padding: var(--e2); }
  .archive h3 { font-size: var(--t-interface); }
  .archive-meta { padding-top: 0; flex-direction: column; gap: 0; }
  .passe-partout .img img { opacity: 0.9; }
  .ev-detail-tete { padding: var(--e7) var(--marge); }
  .ev-detail-tete .gauche, .ev-detail-tete .droite, .ev-detail-tete .chapo { grid-column: 1 / -1; }
  .ev-detail-texte { padding: var(--e9) var(--marge) var(--e8); }
  .ev-detail-texte section { grid-column: 1 / -1; }
  .ev-voisins { grid-template-columns: 1fr; }
  .ev-voisins .suiv { align-items: flex-start; text-align: left; border-left: 0; border-top: 1px solid var(--filet); }
}
@media (prefers-reduced-motion: reduce) {
  .passe-partout .img img, .ev-l-img img, .cal-trait { transition: none; }
  .archive a:hover .passe-partout .img img, .ev-ligne .ev-l-lien:hover .ev-l-img img { transform: none; }
}

/* ---------- Impression ---------- */
@media print {
  .entete, .menu, .voile-menu, .pied, .suite, .evitement { display: none; }
  .agrandisseur { height: auto; }
}

/* =====================================================================
   Ajouts du thème WordPress (au-delà de la maquette 2)
   ===================================================================== */

/* Liens qui remplacent les boutons de la visionneuse : ils marchent sans script */
a.bouton-texte { display: inline-flex; align-items: center; }

/* Texte à remplir : visible seulement pour qui est connecté et peut le modifier */
.dg-a-remplir { color: var(--gris); box-shadow: inset 0 -1px 0 var(--filet); }

/* Partition adaptative : une photo verticale à une place prévue horizontale, ou l'inverse */
.p-bord.autre-orientation { grid-column: 4 / span 6; margin: 0; }
.p-bord.autre-orientation .legende { padding: 0; }
.p-portrait.autre-orientation { grid-column: 6 / -1; margin-top: var(--e10); }
.p-silence.autre-orientation { grid-column: 2 / span 4; }
.paire .a.autre-orientation { grid-column: 2 / span 4; }
.paire .b.autre-orientation { grid-column: 7 / span 5; }
.p-passe.autre-orientation { grid-column: 7 / span 4; }
.surtitre-saison { display: block; font-size: var(--t-petit); color: var(--gris); }

/* Formulaire : erreurs et confirmation (le rouge est réservé aux erreurs, jamais en encadré) */
.champ.erreur input, .champ.erreur textarea { border: 2px solid var(--erreur); }
.message-erreur { font-size: var(--t-petit); color: var(--erreur); }
.alerte { padding: var(--e4) 0; border-top: 2px solid var(--encre); font-size: var(--t-interface); }
.alerte ul { margin-top: var(--e2); display: flex; flex-direction: column; gap: var(--e1); color: var(--erreur); }
.alerte a { box-shadow: inset 0 -1px 0 currentColor; }
.alerte:focus, .confirmation:focus { outline: none; }
.confirmation { padding: var(--e5) 0; border-top: 2px solid var(--encre); display: flex; flex-direction: column; gap: var(--e3); }
.confirmation-titre { font-size: var(--t-grand); }
.formulaire .case a { white-space: nowrap; }

/* Page 404 */
.erreur404 { display: grid; grid-template-columns: repeat(var(--colonnes), 1fr); column-gap: var(--gouttiere); padding: var(--e9) var(--marge) var(--e10); align-items: end; }
.erreur404 .case-vide { grid-column: 2 / span 3; display: flex; flex-direction: column; gap: var(--e2); }
.erreur404 .cadre { padding: 8px; border: 1px solid var(--filet); }
.erreur404 .manquante { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; font-size: var(--t-petit); color: var(--gris); }
.erreur404 .texte { grid-column: 6 / span 5; display: flex; flex-direction: column; gap: var(--e5); }
.erreur404 h1 { font-size: var(--t-titre); line-height: var(--interligne-titre); letter-spacing: -0.4px; }
.erreur404 ul { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); font-size: var(--t-interface); }

/* Pages légales */
.legale .tete { grid-column: 1 / span 8; padding-bottom: var(--e7); }
.texte-legal { grid-column: 3 / span 7; display: flex; flex-direction: column; gap: var(--e3); max-width: 40em; }
.texte-legal h2 { margin-top: var(--e6); }

/* Événements : presse, page d'un événement à venir */
.ev-presse { display: flex; flex-direction: column; gap: var(--e2); }
.ev-detail-a-venir .evenement.prochain { margin: var(--e5) 0 0; }

/* Saisons précédentes */
.saisons-grille { grid-column: 1 / -1; padding-top: var(--e7); }
.archive-titre { font-size: var(--t-grand); line-height: 1.3; }

@media (max-width: 760px) {
  .p-bord.autre-orientation, .p-portrait.autre-orientation, .p-silence.autre-orientation, .p-passe.autre-orientation { grid-column: 1 / -1; margin-top: 0; }
  .paire .a.autre-orientation { grid-column: 1 / span 4; }
  .paire .b.autre-orientation { grid-column: 1 / -1; }
  .erreur404 { padding: var(--e7) var(--marge) var(--e9); row-gap: var(--e6); }
  .erreur404 .case-vide { grid-column: 1 / span 3; }
  .erreur404 .texte, .legale .tete, .texte-legal { grid-column: 1 / -1; }
}