/* ==================================================================
   STYLE MASCULIN IDÉAL — thème commun « Univers »
   Extrait de la page Univers mouton retourné (Phase 0 du chantier).
   Palette : noir profond · brun tabac · cognac · caramel · écru
   Chargé par toutes les pages migrées, AVANT le CSS propre à la page.
   ================================================================== */

/* ---------- polices locales ---------- */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/cormorant-garamond-400.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-500.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/cormorant-garamond-600.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/cormorant-garamond-500-italic.woff2') format('woff2')}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/marcellus-400.woff2') format('woff2')}
/* Cinzel (titres) : police variable (axe wght), un seul fichier par sous-ensemble.
   Auto-hébergée comme les autres — aucune requête vers Google, donc aucune IP de
   visiteur transmise (RGPD). Ne plus ajouter de <link> Google Fonts dans les pages. */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/cinzel-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/cinzel-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --noir:#0b0908;
  --noir2:#131009;
  --noir3:#1a140e;
  --cognac:#8a5a2e;
  --caramel:#c78d4e;
  --caramel2:#d8a869;
  --ecru:#f0e6d4;
  --creme:#e7d9bf;
  --creme2:#ddcba9;
  --encre:#241a12;
  --texte:#cfc4b2;
  --texte-soft:#a49681;
  /* argenté hérité de variables.css (--metallic-silver) : seul froid de la
     palette, réservé au sous-menu pour le distinguer du menu principal. */
  --argent:#C0C0C0;
  --ligne:rgba(199,141,78,.28);
  --ligne-soft:rgba(199,141,78,.14);
  --serif-t:'Cormorant Garamond', Georgia, serif;
  --serif-c:'Marcellus', Georgia, serif;
  --serif-p:Georgia, 'Times New Roman', serif;
  --serif-titre:'Cinzel', Georgia, serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--noir);
  color:var(--texte);
  font-family:var(--serif-p);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--cognac);color:var(--ecru)}

/* ---------- grain global réutilisable ---------- */
.grain{position:relative}
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.16;mix-blend-mode:overlay;
}

/* ---------- barre de progression (optionnelle : présence de #progress) ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cognac),var(--caramel2));
  z-index:100;box-shadow:0 0 12px rgba(216,168,105,.5);
}

/* ---------- navigation par points (optionnelle : présence de #chapnav) ---------- */
#chapnav{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);
  z-index:90;display:flex;flex-direction:column;gap:16px;
}
#chapnav a{
  display:block;width:8px;height:8px;border-radius:50%;
  background:rgba(207,196,178,.22);border:1px solid transparent;
  transition:all .4s ease;position:relative;
}
#chapnav a:hover{background:var(--caramel)}
#chapnav a.actif{background:var(--caramel2);box-shadow:0 0 10px rgba(216,168,105,.6);transform:scale(1.3)}
#chapnav a span{
  position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--serif-c);font-size:.58rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--caramel2);white-space:nowrap;
  opacity:0;transition:opacity .3s;pointer-events:none;
}
#chapnav a:hover span{opacity:1}
@media(max-width:900px){#chapnav{display:none}}

/* ---------- typographie commune ---------- */
.smallcaps{
  font-family:var(--serif-c);font-size:.72rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--caramel);
}
.chapitre-tete{text-align:center;margin-bottom:4.5rem;position:relative;z-index:2}
.chapitre-num{
  font-family:var(--serif-c);font-size:.85rem;letter-spacing:.55em;
  color:var(--cognac);text-transform:uppercase;display:block;margin-bottom:1.4rem;
}
.chapitre-titre{
  font-family:var(--serif-titre);font-weight:600;
  font-size:clamp(2.6rem,5.5vw,4.6rem);line-height:1.06;
  color:var(--ecru);letter-spacing:.02em;
}
.chapitre-sous{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2vw,1.5rem);color:var(--caramel2);
  margin-top:1.2rem;
}
.fleuron{
  font-size:1.5rem;color:var(--cognac);text-align:center;
  margin:3.5rem auto;display:block;
}
/* Colonne de lecture fluide : 680 px sur ecran moyen, jusqu'a 900 px sur
   grand ecran. Le corps du texte grandit du meme pas (--corps), pour que le
   nombre de signes par ligne reste stable pendant que le bloc respire. */
:root{--corps:clamp(1.08rem,.706rem + .5vw,1.32rem)}
.prose{max-width:clamp(680px,62vw,900px);margin:0 auto;position:relative;z-index:2}
.prose p{
  font-size:var(--corps);line-height:1.86;color:var(--texte);
  margin-bottom:1.65rem;text-align:justify;hyphens:auto;
}
.prose .lead{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  font-size:clamp(1.45rem,1.13rem + .42vw,1.72rem);line-height:1.62;color:var(--creme);
  text-align:left;margin-bottom:2.2rem;
}
.prose h3{
  font-family:var(--serif-t);font-weight:600;
  font-size:clamp(1.75rem,1.42rem + .44vw,2.05rem);
  color:var(--ecru);margin:3.2rem 0 1.2rem;
}
.prose h3 .filet{
  display:inline-block;width:38px;height:1px;background:var(--caramel);
  vertical-align:middle;margin-right:14px;opacity:.7;
}
b{color:#e9d6b3;font-weight:600}
strong{color:var(--caramel2);font-weight:600}
.exergue{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.5;color:var(--creme);
  text-align:center;max-width:clamp(760px,64vw,1020px);margin:4.5rem auto;position:relative;z-index:2;
  padding:0 1.5rem;
}
.exergue::before,.exergue::after{
  content:"";display:block;width:60px;height:1px;
  background:linear-gradient(90deg,transparent,var(--caramel),transparent);
  margin:1.8rem auto;
}

/* ---------- bouton signature ---------- */
.btn-smi{
  display:inline-flex;align-items:center;gap:12px;
  background:none;border:1px solid var(--caramel);border-radius:40px;
  color:var(--caramel2);padding:.9rem 2rem;cursor:pointer;text-decoration:none;
  font-family:var(--serif-c);font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;
  transition:all .4s ease;
}
.btn-smi:hover{background:rgba(199,141,78,.12);box-shadow:0 0 24px rgba(199,141,78,.25);color:var(--caramel2)}

/* ---------- révélations au défilement ---------- */
.rvl{opacity:0;transform:translateY(34px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.22,.8,.3,1)}
.rvl.vu{opacity:1;transform:none}
.rvl-d2{transition-delay:.3s} /* seul délai utilisé (univers) ; d1/d3/d4 retirés au nettoyage 2026-08 */
@media(prefers-reduced-motion:reduce){
  .rvl{opacity:1;transform:none;transition:none}
  *{animation-duration:.01s !important;animation-iteration-count:1 !important}
  html{scroll-behavior:auto}
}

/* ---------- sections génériques ---------- */
section{position:relative;padding:9rem 6vw}
.voile-haut::after{
  content:"";position:absolute;top:0;left:0;right:0;height:180px;
  background:linear-gradient(180deg,var(--noir),transparent);pointer-events:none;
}

/* ---------- pleine largeur ----------
   NB : ne jamais poser un raccourci `margin:` sur un élément .smi-full
   (il écraserait les marges latérales négatives) — utiliser margin-top/bottom. */
.smi-full{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ==================================================================
   EN-TÊTE DU SITE (header-smi.php)
   ================================================================== */
/* align-items:flex-start et non center : le logo reste ÉPINGLÉ EN HAUT quelle
   que soit la hauteur du menu. Avec center, dès que le menu passait sur deux
   lignes, la rangée grandissait et le logo — centré dedans — descendait. */
.smi-site-header{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:flex-start;
  flex-wrap:wrap;justify-content:space-between;gap:.1rem 1rem;padding:.7rem clamp(1rem,4vw,2.6rem);
  transition:background .5s ease,padding .45s ease,border-color .5s;border-bottom:1px solid transparent}
.smi-site-header.scrolled{background:rgba(11,9,8,.82);backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);border-bottom-color:rgba(199,141,78,.18)}
.smi-logo img{height:46px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}

/* ---------- 2e ligne : sous-menu contextuel de la rubrique courante ----------
   .smi-subnav = ligne pleine largeur ; .smi-subnav-in = groupe de liens (largeur
   du contenu) que le JS recentre sous le mot de la rubrique active (desktop). */
.smi-subnav{flex-basis:100%;order:5;display:flex;justify-content:center;margin-top:-.35rem;line-height:1}
.smi-subnav-in{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.25rem 1.1rem;line-height:1;
}
.smi-subnav a{
  font-family:var(--serif-c);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  /* argenté (et non texte-soft comme le menu principal) : le froid détache
     la ligne des sous-pages de la rangée des rubriques, chaude. */
  color:var(--argent);text-decoration:none;transition:color .3s;white-space:nowrap;
}
.smi-subnav a:hover{color:var(--caramel2)}
.smi-subnav a.actif{color:var(--caramel)}
/* variante numéros (forçable via $smi_souspages_num) : liens compacts */
.smi-subnav.num .smi-subnav-in{gap:.25rem .7rem}
.smi-subnav.num a{min-width:1.6em;text-align:center;letter-spacing:.06em;font-size:.66rem}
/* Sous-menus longs (8 entrées et plus : Histoires, Galerie — classe .longue
   posée par header-smi.php). À partir de 1200 px — le seuil où le menu
   principal tient sur une ligne — les NOMS s'affichent, répartis sur deux
   lignes équilibrées par un point de coupure au milieu (même principe que
   .smi-nav-coupe) : l'en-tête fait trois rangées. En dessous, les noms ne
   tiendraient pas même raccourcis (et le menu principal occupe déjà deux
   lignes) : on garde les NUMÉROS compacts d'avant — trois rangées là aussi. */
.smi-subnav-coupe{display:none}
@media(min-width:1200px){
  .smi-subnav.longue .smi-subnav-coupe{display:block;flex-basis:100%;width:100%;height:0;margin:0}
}
@media(max-width:1199.98px){
  .smi-subnav.longue .sp-n{display:none}
  .smi-subnav.longue .sp-c{display:inline}
  .smi-subnav.longue .smi-subnav-in{gap:.25rem .7rem}
  .smi-subnav.longue a{min-width:1.6em;text-align:center;letter-spacing:.06em;font-size:.66rem}
}
/* Inspirations/Vidéos : noms sur grand écran, numéros dès que trop long (mobile) */
.smi-subnav .sp-c{display:none}
@media(max-width:640px){
  .smi-subnav:not(.num) .sp-n{display:none}
  .smi-subnav:not(.num) .sp-c{display:inline}
  .smi-subnav:not(.num) .smi-subnav-in{gap:.25rem .7rem}
  .smi-subnav:not(.num) a{min-width:1.6em;text-align:center;letter-spacing:.06em;font-size:.66rem}
  .smi-subnav-in{transform:none !important}   /* centré sur mobile, pas d'alignement JS */
}
/* Le menu vit SUR LA LIGNE DU LOGO et se replie à l'intérieur de lui-même :
   — flex:1 1 0 : sa largeur souhaitée est nulle, donc il ne bascule jamais
     sous le logo (l'en-tête est en flex-wrap) ; il occupe la place restante
     et c'est son CONTENU qui passe sur deux lignes.
   — justify-content:flex-end : les lignes sont calées à droite, la seconde
     se termine au même pixel que la première.
   — gap : .4rem entre les LIGNES — la coupure (.smi-nav-coupe) formant sa
     propre ligne de hauteur nulle, l'écart réel entre les deux rangées vaut
     DEUX row-gaps, ~13px. L'ancien row-gap unique de ~1.6rem en donnait ~38 :
     les deux rangées flottaient. clamp() entre les mots, comme avant.
   — margin-top:.7rem : cale optiquement la ligne de mots sur le haut du
     logo (46px de haut) au lieu du ras du bord. Deux lignes serrées tiennent
     ainsi dans la hauteur du logo : l'en-tête ne grandit quasiment pas.
   NB : le menu burger (≤860 px) repose en colonne et réaffirme ses propres
   valeurs plus bas — il n'est pas affecté. */
.smi-nav{display:flex;gap:.4rem clamp(.9rem,1.6vw,1.6rem);flex-wrap:wrap;justify-content:flex-end;flex:1 1 0;min-width:0;margin-top:.7rem}
/* Coupure choisie du menu, entre Vidéos et Bombardiers : 6 mots puis 5.
   Sans elle, le retour à la ligne naturel tombe juste avant « Contact », qui
   se retrouve seul sur la seconde ligne.
   L'élément (posé dans header-smi.php) est une ligne vide de hauteur nulle :
   invisible, il occupe toute la largeur et pousse la suite au rang suivant.
   Il ne s'active QUE dans la plage où le menu déborde : au-dessus il tient sur
   une seule ligne, en dessous c'est le burger qui prend le relais.
   Borne haute mesurée : à 1200 px les onze mots tiennent à côté du logo, à
   1180 non — le basculement se fait vers 1191. On arrondit au-dessus, car se
   tromper dans ce sens force un 6/5 déjà propre, alors que se tromper en
   dessous laisserait « Contact » orphelin. */
.smi-nav-coupe{display:none}
@media(min-width:861px) and (max-width:1199px){
  .smi-nav-coupe{display:block;flex-basis:100%;width:100%;height:0;margin:0}
  /* Le sous-menu est tiré vers le haut de .35rem (voir .smi-subnav), un
     réglage fait pour un menu à UNE ligne. Quand le menu en occupe deux, la
     seconde descend au ras du bas de la rangée : la marge négative ferait
     chevaucher le sous-menu avec elle. Dans cette plage on le repousse, il
     devient proprement la 3e ligne. */
  .smi-subnav{margin-top:.3rem}
}
.smi-nav a{font-family:var(--serif-titre);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texte-soft);text-decoration:none;transition:color .35s;white-space:nowrap}
.smi-nav a:hover{color:var(--caramel2)}
.smi-nav a.actif{color:var(--caramel)}
/* align-self:center : l'en-tête est en flex-start (pour le logo), mais le
   burger garde son centrage vertical d'origine face au logo. */
.smi-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:131;align-self:center}
.smi-burger span{width:26px;height:2px;background:var(--caramel2);border-radius:2px;transition:transform .35s ease,opacity .3s ease}
.smi-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.smi-burger.open span:nth-child(2){opacity:0}
.smi-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .smi-logo img{height:38px}
  .smi-burger{display:flex}
  .smi-nav{position:fixed;top:0;right:0;height:100vh;width:min(80vw,320px);flex-direction:column;
    justify-content:center;align-items:flex-start;gap:1.7rem;padding:2.5rem 2rem;margin:0;
    background:rgba(11,9,8,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:-20px 0 60px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .45s cubic-bezier(.4,.1,.2,1)}
  .smi-nav.open{transform:none}
  .smi-nav a{font-size:1.05rem;letter-spacing:.22em;color:var(--ecru)}
}

/* ==================================================================
   HERO GÉNÉRIQUE (.smi-hero) — lot S0.1
   Pattern promu depuis les heros des index migrés (Phases 0–4), à
   l'identique : fond, veil, marque, h1 en .mot étagés, sous, descendre.
   Usage :  <header class="smi-hero grain" id="mon-hero"> … </header>
   Le CSS de la page ne garde en principe que le cadrage :
       #mon-hero{--hero-pos:center 18%;--hero-pos-etroit:68% 18%}
   Variables disponibles :
     --hero-pos         object-position par défaut        (center 24%)
     --hero-pos-etroit  object-position ≤ 1024 px          (= --hero-pos)
     --hero-h1 / --hero-h1-lh   taille et interlignage du h1
   NB : les 9 pages déjà en ligne gardent leur CSS propre (#xxx-hero)
   et n'utilisent pas ces classes — aucun changement visuel pour elles.
   ================================================================== */
.smi-hero{
  --hero-pos:center 24%;
  --hero-pos-etroit:var(--hero-pos);
  --hero-h1:clamp(1.7rem,4vw,3.4rem);
  --hero-h1-lh:1.12;
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:6rem 6vw 8rem;position:relative;overflow:hidden;
}
/* variante « demi-hero » : pages-listes (collections vidéo, sous-galeries) */
.smi-hero.demi{min-height:68vh;padding:9rem 6vw 6rem}
.smi-hero .fond{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--hero-pos);z-index:0}
@media(max-width:1024px){.smi-hero .fond{object-position:var(--hero-pos-etroit)}}
.smi-hero .veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.55) 0%,rgba(11,9,8,.3) 42%,rgba(11,9,8,.92) 100%),
  radial-gradient(ellipse 82% 62% at 50% 34%,rgba(11,9,8,.08),rgba(11,9,8,.6))}
.smi-hero .marque,.smi-hero h1,.smi-hero .sous{position:relative;z-index:2}
.smi-hero .marque{
  font-family:var(--serif-titre);font-size:.8rem;letter-spacing:.6em;
  text-transform:uppercase;color:var(--caramel);margin-bottom:3rem;
  opacity:0;animation:smiHeroIn 1.4s ease .2s forwards;
}
.smi-hero .marque a{color:inherit;text-decoration:none;transition:color .35s}
.smi-hero .marque a:hover{color:var(--caramel2)}
/* Titre de heros : Cinzel capitales + filet dore, signature de l'accueil.
   La largeur du bloc epouse la plus longue ligne (width:fit-content), donc le
   filet a exactement la largeur du titre, comme sur la page d'accueil. */
.smi-hero h1{
  font-family:var(--serif-titre);font-weight:600;text-transform:uppercase;
  letter-spacing:.045em;
  font-size:var(--hero-h1);line-height:var(--hero-h1-lh);color:var(--ecru);
  width:fit-content;max-width:min(1180px,88vw);margin-inline:auto;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.smi-hero h1 .mot{display:inline-block;opacity:0;transform:translateY(40px);
  animation:smiHeroIn 1.3s cubic-bezier(.2,.75,.25,1) forwards}
/* nth-of-type (et non nth-child) : le filet <i> s'intercale entre les .mot */
.smi-hero h1 .mot:nth-of-type(1){animation-delay:.5s}
.smi-hero h1 .mot:nth-of-type(2){animation-delay:.8s}
.smi-hero h1 .mot:nth-of-type(3){animation-delay:1.1s}
.smi-hero h1 em{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  text-transform:none;letter-spacing:.005em;font-size:1.06em;
  color:var(--caramel2);
}

/* Filet dore des titres de heros — le meme trait que sous la signature de
   l'accueil ; extremites fondues pour rester juste quelle que soit la ligne. */
.filet-hero{
  display:block;width:100%;height:max(1.5px,.028em);
  margin:.3em auto .26em;
  background:linear-gradient(90deg,rgba(210,180,140,0),#d2b48c 10%,#d2b48c 90%,rgba(210,180,140,0));
  box-shadow:0 2px 7px rgba(0,0,0,.7);
  opacity:0;animation:smiFiletIn 1.1s ease .74s forwards;
}
@keyframes smiFiletIn{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.filet-hero{opacity:1;animation:none}}
.smi-hero .sous{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  font-size:clamp(1.1rem,2.2vw,1.5rem);color:var(--texte-soft);
  margin-top:2.2rem;max-width:min(780px,86vw);
  opacity:0;animation:smiHeroIn 1.4s ease 1.4s forwards;
}
@keyframes smiHeroIn{to{opacity:1;transform:none}}
.smi-hero .descendre{
  position:absolute;bottom:3.5rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;animation:smiHeroInDesc 1.4s ease 2s forwards;z-index:3;
}
/* keyframe dédiée : un `to{transform:none}` annulerait le centrage translateX */
@keyframes smiHeroInDesc{to{opacity:1;transform:translateX(-50%)}}
.smi-hero .descendre .trait{
  width:1px;height:56px;overflow:hidden;position:relative;
  background:rgba(199,141,78,.18);
}
.smi-hero .descendre .trait::after{
  content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;
  background:var(--caramel2);animation:goutte 2.2s ease-in-out infinite;
}
@keyframes goutte{0%{top:-40%}60%,100%{top:110%}}
.smi-hero .descendre span{font-family:var(--serif-c);font-size:.6rem;
  letter-spacing:.45em;text-transform:uppercase;color:var(--texte-soft)}
@media(max-width:640px){.smi-hero .descendre{bottom:2.2rem}}
/* très petits écrans : une marque un peu longue (« Inspirations · Guide III »)
   passait sur deux lignes — on resserre plutôt que de la laisser se casser */
@media(max-width:480px){
  .smi-hero .marque{font-size:.7rem;letter-spacing:.34em;margin-bottom:2.2rem}
}

/* ==================================================================
   MÉDIAS PLEIN CADRE (photos, vidéos, galeries)
   ================================================================== */
.plate{margin-top:5.5rem;margin-bottom:5.5rem;overflow:hidden;background:var(--noir)}
.plate figure{margin:0;position:relative}
.plate img{display:block;width:100%;height:min(88vh,940px);object-fit:cover;object-position:center 30%}
.plate.tall img{height:min(96vh,1120px)}
.plate.soft img{height:min(74vh,720px)}
.plate .voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.32),transparent 20%,transparent 56%,rgba(11,9,8,.86))}
.plate figcaption,.cine figcaption,.duo figcaption{position:absolute;left:0;right:0;bottom:2.2rem;text-align:center;z-index:3;padding:0 1.2rem}
.plate .kick,.cine .kick,.duo .kick{display:block;font-family:var(--serif-c);font-size:.6rem;
  letter-spacing:.42em;text-transform:uppercase;color:var(--caramel);margin-bottom:.7rem}
.plate .ligne,.cine .ligne,.duo .ligne{font-family:var(--serif-t);font-style:italic;
  font-size:clamp(1.2rem,2.6vw,2rem);color:var(--creme);line-height:1.4}

/* ---- cinéma (vidéo plein cadre) ---- */
.cine{margin-top:5.5rem;margin-bottom:5.5rem;overflow:hidden;background:#000;position:relative}
.cine video{display:block;width:100%;height:min(88vh,900px);object-fit:cover}
.cine .voile{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.3),transparent 22%,transparent 58%,rgba(11,9,8,.82))}

/* ---- filmstrip (bande défilante) ---- */
.filmstrip{display:flex;gap:12px;overflow-x:auto;padding:2rem 4vw 2.4rem;
  scroll-snap-type:x mandatory;margin-top:3.5rem;margin-bottom:1rem}
.filmstrip::-webkit-scrollbar{height:6px}
.filmstrip::-webkit-scrollbar-thumb{background:rgba(199,141,78,.4);border-radius:3px}
.filmstrip img{height:min(70vh,640px);width:auto;flex:0 0 auto;object-fit:cover;
  scroll-snap-align:center;border-radius:2px;box-shadow:0 12px 40px rgba(0,0,0,.5)}

/* ---- trio ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4rem;margin-bottom:4rem}
.trio img{width:100%;height:min(58vh,540px);object-fit:cover}
@media(max-width:820px){.trio{grid-template-columns:1fr}.trio img{height:min(52vh,440px)}}

/* ---- montages composés ---- */
.duo{margin-top:5rem;margin-bottom:5rem;position:relative}
.duo img{display:block;width:100%;height:auto}
.matieres-plate{margin-top:4.5rem;margin-bottom:4.5rem}
.matieres-plate img{display:block;width:100%;height:auto}
/* .m-nom/.m-note : légendes de la grille des matières (univers définit
   .matieres-grille dans son CSS de page ; l'ancienne .matieres-legende,
   qu'aucune page n'utilisait, a été retirée au nettoyage de 2026-08). */
.matieres-grille .m-nom{font-family:var(--serif-c);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--caramel)}
.matieres-grille .m-note{font-family:var(--serif-t);font-style:italic;font-size:.9rem;color:var(--texte-soft);margin-top:.35rem}

/* ==================================================================
   PORTAIL (grille de portes vers les rubriques)
   ================================================================== */
.portail{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;
  max-width:clamp(1220px,90vw,1520px);margin:4rem auto 0;
}
@media(max-width:1050px){.portail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portail{grid-template-columns:1fr}}
.porte{
  display:block;text-decoration:none;position:relative;
  border:1px solid var(--ligne-soft);border-radius:6px;
  background:linear-gradient(165deg,#16110b,#0e0b07);
  padding:2rem 1.6rem 1.8rem;overflow:hidden;
  transition:transform .5s ease,border-color .5s ease,box-shadow .5s ease;
}
.porte::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 42%,rgba(240,230,212,.06) 50%,transparent 58%);
  transform:translateX(-80%);transition:transform .9s ease;
}
.porte:hover{transform:translateY(-5px);border-color:var(--ligne);box-shadow:0 24px 44px -24px rgba(0,0,0,.85)}
.porte:hover::after{transform:translateX(80%)}
.porte .p-num{
  font-family:var(--serif-c);font-size:.56rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--cognac);display:block;margin-bottom:1.1rem;
}
.porte h3{
  font-family:var(--serif-t);font-weight:600;font-size:1.45rem;color:var(--ecru);
  margin-bottom:.55rem;transition:color .4s;
}
.porte:hover h3{color:var(--caramel2)}
.porte p{font-size:clamp(.85rem,.75rem + .12vw,.95rem);line-height:1.62;color:var(--texte-soft)}
.porte .fleche{
  position:absolute;right:1.4rem;bottom:1.2rem;color:var(--cognac);
  font-size:1rem;transition:transform .4s ease,color .4s;z-index:2;
}
.porte:hover .fleche{transform:translateX(6px);color:var(--caramel2)}
/* variante avec image de fond */
.porte.a-image{min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding-top:9rem}
.porte.a-image .p-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;
  transition:opacity .5s ease,transform .8s ease}
.porte.a-image:hover .p-bg{opacity:.6;transform:scale(1.04)}
.porte.a-image::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,9,8,.1),rgba(11,9,8,.88) 78%)}
.porte.a-image .p-num,.porte.a-image h3,.porte.a-image p{position:relative;z-index:2}
/* Portail « dix portes » (accueil) : la porte maîtresse (Univers) en tête sur
   toute la largeur, puis les neuf autres en 3x3 — dix cartes sans orphelines,
   là où la grille de 4 laissait deux cartes seules au dernier rang.
   Les fonds sont les HÉROS des rubriques, fortement zoomés : on ne montre pas
   la scène mais la matière — fourrure, cuir, laine. Chaque carte règle son
   grossissement (--zoom) et son point d'ancrage (--foyer, appliqué à la fois
   à object-position et à transform-origin pour que le zoom se fasse sur ce
   point). Le survol pousse le zoom de 5 % de plus, en douceur (la transition
   sur transform vient de .porte.a-image .p-bg). */
.portail.dix{grid-template-columns:repeat(3,1fr)}
.portail.dix .maitresse{grid-column:1/-1;min-height:340px}
.portail.dix .maitresse h3{font-size:1.8rem}
.portail.dix .porte.a-image .p-bg{
  object-position:var(--foyer,50% 30%);
  transform-origin:var(--foyer,50% 30%);
  transform:scale(var(--zoom,2.2));
  opacity:.5;
}
.portail.dix .porte.a-image:hover .p-bg{opacity:.66;transform:scale(calc(var(--zoom,2.2)*1.05))}
@media(max-width:1050px){
  .portail.dix{grid-template-columns:repeat(2,1fr)}
  /* 9 cartes sur 2 colonnes = une orpheline : Contact, la derniere, s'etale
     sur les deux — une « porte finale » pleine largeur plutot qu'un reste. */
  .portail.dix .porte:last-child{grid-column:1/-1}
}
@media(max-width:600px){.portail.dix{grid-template-columns:1fr}}
/* variantes de largeur : portails de 2 ou 3 portes (pieds de page « Continuer ») */
.portail.p2{grid-template-columns:repeat(2,1fr);max-width:clamp(920px,58vw,1120px)}
.portail.p3{grid-template-columns:repeat(3,1fr);max-width:clamp(1080px,74vw,1340px)}
@media(max-width:1050px){.portail.p3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portail.p2,.portail.p3{grid-template-columns:1fr}}

/* ==================================================================
   RUBRIQUES (rangées image/texte alternées — accueil, index de rubriques)
   ================================================================== */
.rubriques{max-width:clamp(1180px,88vw,1520px);margin:4.5rem auto 0;display:flex;flex-direction:column;gap:6rem}
.rubrique{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3.5rem,3.4vw,4.6rem);align-items:center}
.rubrique:nth-child(even) .visuel{order:2}
.rubrique .visuel{margin:0;position:relative}
.rubrique .visuel img{
  /* les visuels sources sont en 16/9 : ratio identique = image entiere, sans recadrage */
  display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center;
  border-radius:6px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(199,141,78,.12);
  transition:transform .6s cubic-bezier(.22,.8,.3,1),box-shadow .6s ease;
}
/* l'image de la rubrique est cliquable (mène à la rubrique) */
.rubrique .visuel a{display:block;border-radius:6px;overflow:hidden}
.rubrique .visuel a:hover img{transform:scale(1.03);box-shadow:0 36px 66px -28px rgba(0,0,0,.92), inset 0 0 0 1px rgba(199,141,78,.22)}
.rubrique .visuel a:focus-visible{outline:2px solid var(--caramel2);outline-offset:4px}
.rubrique .r-num{
  font-family:var(--serif-c);font-size:.62rem;letter-spacing:.45em;
  text-transform:uppercase;color:var(--cognac);display:block;margin-bottom:1rem;
}
.rubrique h3{font-family:var(--serif-t);font-weight:600;font-size:clamp(1.9rem,1.55rem + .46vw,2.2rem);margin-bottom:1.2rem}
.rubrique h3 a{color:var(--ecru);text-decoration:none;transition:color .4s}
.rubrique h3 a:hover{color:var(--caramel2)}
.rubrique p{font-size:clamp(1.02rem,.78rem + .32vw,1.2rem);line-height:1.82;color:var(--texte);text-align:justify;hyphens:auto;margin-bottom:1.1rem}
.rubrique p:last-of-type{margin-bottom:0}
.rubrique .suite{
  display:inline-block;margin-top:1.4rem;font-family:var(--serif-c);font-size:.62rem;
  letter-spacing:.35em;text-transform:uppercase;color:var(--caramel);text-decoration:none;
  border-bottom:1px solid var(--ligne);padding-bottom:3px;transition:color .35s,border-color .35s;
}
.rubrique .suite:hover{color:var(--caramel2);border-color:var(--caramel2)}
@media(max-width:900px){
  .rubrique,.rubrique:nth-child(even){grid-template-columns:1fr;gap:2rem}
  .rubrique:nth-child(even) .visuel{order:0}
  .rubrique .visuel img{aspect-ratio:16/9}
}

/* ==================================================================
   LIENS LÉGAUX DU PIED DE PAGE (.smi-legal)
   Discrets mais toujours atteignables : mentions légales, vie privée et
   réouverture du bandeau de consentement.
   ================================================================== */
.smi-legal{
  display:flex;justify-content:center;align-items:center;
  flex-wrap:wrap;gap:.5rem 1.6rem;
  margin:2.4rem auto 0;padding-top:1.6rem;max-width:900px;
  border-top:1px solid var(--ligne-soft);
}
.smi-legal a{
  font-family:var(--serif-titre);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texte-soft);text-decoration:none;
  transition:color .35s;white-space:nowrap;cursor:pointer;
}
.smi-legal a:hover,.smi-legal a:focus-visible{color:var(--caramel2)}

/* ==================================================================
   FAÇADE DE LECTURE YOUTUBE (.smi-yt)
   Habillage du module /assets/smi-youtube.js : au chargement, une simple
   vignette et un bouton de lecture aux couleurs du site — ni logo ni
   pastille rouge YouTube. L'iframe n'apparaît qu'au clic.
   Balisage produit par videos/_clip-youtube.php.
   ================================================================== */
.smi-yt{
  display:block;position:relative;width:100%;aspect-ratio:16/9;
  padding:0;border:0;border-radius:4px;overflow:hidden;cursor:pointer;
  background:var(--noir2);
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
  outline:1px solid rgba(199,141,78,.14);outline-offset:0;
}
.smi-yt-vignette{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;display:block;
  /* la vignette est assombrie et désaturée au repos pour s'accorder à la
     palette du site ; elle reprend vie au survol */
  filter:saturate(.8) brightness(.76);
  transition:filter .55s ease,transform 1.2s ease;
}
.smi-yt-voile{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.3),rgba(11,9,8,.05) 45%,rgba(11,9,8,.62));
}
.smi-yt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74px;height:74px;border-radius:50%;
  border:1px solid var(--caramel);background:rgba(11,9,8,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .45s ease,background .45s ease,box-shadow .45s ease,border-color .45s ease;
}
.smi-yt-play::before{
  content:"";display:block;margin-left:5px;
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--caramel2);
}
.smi-yt:hover .smi-yt-vignette,.smi-yt:focus-visible .smi-yt-vignette{
  filter:saturate(1) brightness(.96);transform:scale(1.035);
}
.smi-yt:hover .smi-yt-play,.smi-yt:focus-visible .smi-yt-play{
  transform:translate(-50%,-50%) scale(1.08);
  background:rgba(199,141,78,.16);border-color:var(--caramel2);
  box-shadow:0 0 30px rgba(199,141,78,.32);
}
.smi-yt:focus-visible{outline:2px solid var(--caramel2);outline-offset:3px}
/* l'iframe injectée au clic (et celle du <noscript>) */
.smi-yt-iframe{
  display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;
  border:0;border-radius:4px;background:#000;
  box-shadow:0 26px 50px -28px rgba(0,0,0,.9);
  outline:1px solid rgba(199,141,78,.14);outline-offset:0;
}
@media(max-width:640px){
  .smi-yt-play{width:58px;height:58px}
  .smi-yt-play::before{border-width:9px 0 9px 14px}
}
@media(prefers-reduced-motion:reduce){
  .smi-yt-vignette,.smi-yt-play{transition:none}
  .smi-yt:hover .smi-yt-vignette,.smi-yt:focus-visible .smi-yt-vignette{transform:none}
}

/* ==================================================================
   LIGHTBOX COMMUNE — lot S0.2
   Habillage du module /assets/smi-lightbox.js (à charger par les pages
   qui contiennent des `.clickable-image` ou des `.miniature`).
   Remplace zoom.js + galerie/script.js + galerie/modal.php.
   ================================================================== */
.clickable-image{cursor:zoom-in}
.miniature{cursor:zoom-in}
.clickable-image:focus-visible,.miniature:focus-visible{
  outline:2px solid var(--caramel2);outline-offset:3px;
}

.smi-lb{
  position:fixed;inset:0;z-index:200;display:none;background:rgba(6,5,4,.975);
  /* bandes réservées : --lb-top pour la barre du haut, --lb-bot pour l'aide */
  --lb-side:clamp(6px,3vw,66px);--lb-top:60px;--lb-bot:54px;
}
.smi-lb.ouvert{display:block}
body.smi-lb-fige{overflow:hidden}

.smi-lb-scene{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  padding:var(--lb-top) var(--lb-side) var(--lb-bot);
}
/* cadre : enveloppe qui épouse EXACTEMENT l'image affichée, pour y caler le
   bouclier et le filigrane. Il se réduit à l'image parce que celle-ci est
   bornée en unités d'écran (pas de dépendance circulaire de hauteur). */
.smi-lb-cadre{position:relative;display:flex;line-height:0;max-width:100%;max-height:100%}
.smi-lb-img{
  display:block;object-fit:contain;
  /* hauteur max = écran moins les deux bandes ; largeur max = écran moins les marges */
  max-width:calc(100vw - 2 * var(--lb-side));
  max-height:calc(100vh - var(--lb-top) - var(--lb-bot));
  width:auto;height:auto;
  box-shadow:0 40px 90px -44px rgba(0,0,0,.95);
  opacity:0;transition:opacity .3s ease;
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.smi-lb-img.prete{opacity:1}
/* bouclier transparent posé sur l'image : capte le clic (navigation) et le
   clic droit à la place de l'image */
.smi-lb-bouclier{position:absolute;inset:0;z-index:2;cursor:pointer;background:transparent}
/* filigrane : logo + url en bas à droite, non cliquable (le clic passe au bouclier) */
.smi-lb-filigrane{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.75));
}
.smi-lb-logo{width:clamp(96px,13vw,148px);height:auto;display:block;opacity:.92;border-radius:3px}
.smi-lb-url{
  font-family:var(--serif-c);font-size:.56rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--caramel2);text-shadow:0 1px 4px rgba(0,0,0,.9);
}
@media(max-width:640px){
  .smi-lb-filigrane{right:7px;bottom:7px;gap:3px}
  .smi-lb-url{font-size:.5rem;letter-spacing:.2em}
}

.smi-lb-barre{
  position:absolute;top:0;left:0;right:0;height:54px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 clamp(.5rem,2vw,1.4rem);
  background:linear-gradient(180deg,rgba(11,9,8,.92),rgba(11,9,8,0));
}
.smi-lb-compteur{
  font-family:var(--serif-c);font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--texte-soft);white-space:nowrap;
}
.smi-lb-vitesses{display:flex;gap:1px}
.smi-lb-vitesses button{
  background:none;border:0;cursor:pointer;padding:6px 7px;
  font-family:var(--serif-c);font-size:.8rem;line-height:1;color:var(--texte-soft);
  border-bottom:1px solid transparent;transition:color .3s,border-color .3s;
}
.smi-lb-vitesses button:hover{color:var(--caramel2)}
.smi-lb-vitesses button.actif{color:var(--caramel2);border-bottom-color:var(--caramel)}
.smi-lb-droite{display:flex;align-items:center;gap:.1rem}
.smi-lb-btn{
  background:none;border:0;cursor:pointer;color:var(--creme);
  font-size:1.45rem;line-height:1;padding:6px 10px;transition:color .3s;
}
.smi-lb-btn:hover{color:var(--caramel2)}
.smi-lb-play.actif{color:var(--caramel2);text-shadow:0 0 14px rgba(216,168,105,.6)}

.smi-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  background:none;border:0;cursor:pointer;color:rgba(240,230,212,.5);
  font-size:2rem;line-height:1;padding:18px 12px;transition:color .3s;
}
.smi-lb-nav:hover{color:var(--caramel2)}
.smi-lb-prec{left:clamp(0px,1vw,16px)}
.smi-lb-suiv{right:clamp(0px,1vw,16px)}
.smi-lb.joue .smi-lb-nav{display:none}

/* aide : dans la bande basse réservée, donc TOUJOURS sous l'image */
.smi-lb-aide{
  position:absolute;left:0;right:0;bottom:18px;z-index:3;text-align:center;
  font-family:var(--serif-c);font-size:.54rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(164,150,129,.5);pointer-events:none;
}
@media(max-width:820px){
  .smi-lb-aide{display:none}
  /* plus d'aide à afficher : on rétrécit la bande basse */
  .smi-lb{--lb-bot:16px}
}
@media(max-width:640px){
  .smi-lb{--lb-side:2px;--lb-top:48px}
  .smi-lb-compteur{font-size:.54rem;letter-spacing:.2em}
  .smi-lb-vitesses button{padding:6px 4px;font-size:.72rem}
  .smi-lb-nav{font-size:1.6rem;padding:14px 6px}
}

/* ==================================================================
   BARRE DE TIRAGE DES GALERIES (moteur galerie/gallery.php)
   Taille reelle du fonds + bouton « nouveau tirage ». Sans JavaScript le
   bouton reste un envoi GET : la page se recharge, le tirage change.
   ================================================================== */
.galerie-barre{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.8rem 1.9rem;max-width:1560px;margin:0 auto 1.5rem;
}
.galerie-compte{
  margin:0;font-family:var(--serif-c);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--texte-soft);
}
.galerie-compte b{color:var(--caramel2);font-weight:400}
.galerie-rejouer-f{margin:0}
.galerie-rejouer{
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:1px solid var(--ligne);border-radius:40px;
  color:var(--caramel2);padding:.5rem 1.35rem;cursor:pointer;
  font-family:var(--serif-c);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.galerie-rejouer:hover{background:rgba(199,141,78,.12);border-color:var(--caramel);
  box-shadow:0 0 22px rgba(199,141,78,.22)}
.galerie-rejouer:focus-visible{outline:2px solid var(--caramel2);outline-offset:3px}
.galerie-rejouer[disabled]{opacity:.55;cursor:progress}
.galerie-rejouer .g-rond{font-size:1rem;line-height:1;display:inline-block}
.galerie-rejouer.tourne .g-rond{animation:smiTirage .9s linear infinite}
@keyframes smiTirage{to{transform:rotate(360deg)}}

/* ==================================================================
   GRILLE DES GALERIES — planche contact a tuiles fixes
   Remplace la rangee souple d'origine, ou chaque tuile recevait une
   hauteur fixe et une largeur calculee depuis le format de sa source.
   Les rangees ne tombaient juste que sur les collections homogenes, et
   par hasard ; les collections en paysage n'affichaient que six tuiles
   par rangee, d'ou des pages interminables.

   Ici toutes les tuiles sont rigoureusement identiques et le recadrage
   est assume. Deux choix meritent d'etre expliques :

   - La hauteur de rangee est CALCULEE depuis la hauteur de l'ecran, pas
     fixee : `(100svh - 21rem) / 4` laisse la place a l'en-tete et a la
     barre de tirage, puis divise le reste en quatre. Sur un grand ecran
     les tuiles montent a 14rem ; sur un ecran plus bas elles se
     reduisent d'elles-memes, et les quarante planches continuent de
     tenir dans un seul ecran, sans defilement.
   - Le nombre de colonnes est toujours un DIVISEUR DE 40 (10, 8, 5, 4)
     pour que la derniere rangee ne soit jamais incomplete. 6 colonnes
     donneraient 6 rangees et 4 orphelines.
   ================================================================== */
.galerie{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-auto-rows:clamp(8rem, calc((100svh - 21rem) / 4), 14rem);
  gap:6px;
  background:var(--noir2);padding:6px;
  border:1px solid var(--ligne-soft);border-radius:6px;
  max-width:1560px;margin:0 auto;
  transition:opacity .26s ease;
}
.galerie .miniature{
  width:100%;height:100%;
  object-fit:cover;
  /* cadrage sur le buste plutot que sur le centre geometrique : sur un
     portrait recadre, c'est la difference entre voir le col et voir la
     ceinture. */
  object-position:center 22%;
  display:block;border-radius:4px;background:var(--noir);
  transition:transform .55s cubic-bezier(.22,.8,.3,1),filter .55s ease,box-shadow .55s ease;
}
.galerie .miniature:hover{
  transform:translateY(-4px) scale(1.02);
  filter:brightness(1.14) saturate(1.04);
  box-shadow:0 18px 34px -20px rgba(0,0,0,.95);
  position:relative;z-index:2;
}
/* 8, 5 et 4 sont, comme 10, des DIVISEURS DE 40 : quel que soit
   l'ecran, le tirage remplit exactement ses rangees. 6 colonnes
   donneraient 6 rangees et 4 orphelines, 3 colonnes en laisseraient
   une — d'ou l'arret a 4 sur telephone plutot qu'a 3. */
@media(max-width:1400px){.galerie{grid-template-columns:repeat(8,1fr)}}
@media(max-width:1024px){.galerie{grid-template-columns:repeat(5,1fr)}}
@media(max-width:760px) {.galerie{grid-template-columns:repeat(4,1fr)}}
@media(max-width:520px) {.galerie{gap:4px;padding:4px}}
@media(prefers-reduced-motion:reduce){
  .galerie .miniature{transition:none}
  .galerie .miniature:hover{transform:none}
}
/* taille du fonds sur les cartes de collection (index de la galerie) */
.porte .porte-fonds{
  display:block;margin-top:.7rem;font-family:var(--serif-c);font-size:.56rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--cognac);
}
.porte:hover .porte-fonds{color:var(--caramel)}
.galerie-total{
  margin:1.4rem auto 0;text-align:center;
  font-family:var(--serif-c);font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--texte-soft);
}
.galerie-total b{color:var(--caramel2);font-weight:400}
@media(prefers-reduced-motion:reduce){.galerie-rejouer.tourne .g-rond{animation:none}}

/* ==================================================================
   PIED DE PAGE (footer-smi.php)
   ================================================================== */
.smi-footer{
  background:var(--noir);text-align:center;
  padding:6rem 6vw 4rem;border-top:1px solid var(--ligne-soft);
}
.smi-footer .fleuron{margin:0 auto 2.5rem}
.smi-footer .citation{
  font-family:var(--serif-t);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.65;color:var(--creme);
  max-width:clamp(720px,52vw,880px);margin:0 auto 3rem;
}
.smi-footer .site a{
  font-family:var(--serif-c);font-size:.72rem;letter-spacing:.45em;
  text-transform:uppercase;color:var(--caramel);text-decoration:none;
  border-bottom:1px solid var(--ligne);padding-bottom:4px;transition:color .4s,border-color .4s;
}
.smi-footer .site a:hover{color:var(--caramel2);border-color:var(--caramel2)}
.smi-plan{
  max-width:clamp(1080px,84vw,1400px);margin:4rem auto 0;padding-top:3rem;
  border-top:1px solid var(--ligne-soft);text-align:left;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2.2rem;
}
@media(max-width:900px){.smi-plan{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.smi-plan{grid-template-columns:1fr}}
.smi-plan .col-titre{
  display:block;font-family:var(--serif-c);font-size:.66rem;letter-spacing:.35em;
  text-transform:uppercase;color:var(--caramel);text-decoration:none;margin:1.2rem 0 .8rem;
  transition:color .35s;
}
.smi-plan .col-titre:first-child{margin-top:0}
.smi-plan .col-titre:hover{color:var(--caramel2)}
.smi-plan ul{list-style:none}
.smi-plan li a{
  display:block;font-size:.86rem;line-height:2;color:var(--texte-soft);
  text-decoration:none;transition:color .35s;
}
.smi-plan li a:hover{color:var(--creme)}
.smi-footer .dedicace{
  margin-top:4rem;font-family:var(--serif-c);font-size:.58rem;
  letter-spacing:.35em;text-transform:uppercase;color:#5d5142;
}

/* ---------- hero : vidéo de fond en relais de l'image ----------
   La vidéo porte la classe .fond, donc toutes les règles de cadrage déjà
   écrites pour l'image (object-fit, object-position, y compris les variantes
   mobiles) s'appliquent à elle sans être dupliquées. Il ne reste ici que le
   fondu d'apparition. Insérée après l'image dans le DOM, elle se place
   naturellement au-dessus d'elle et sous le .veil (z-index 1). */
.fond-video{opacity:0;transition:opacity 1s ease;pointer-events:none}
.fond-video.vue{opacity:1}

/* si l'utilisateur demande moins de mouvement, la vidéo ne s'affiche pas,
   même dans le cas où elle aurait tout de même été insérée. */
@media(prefers-reduced-motion:reduce){
  .fond-video{display:none}
}