/* =============================================================
   CABINET MATHILDE LALOUX — Avocat au Barreau d'Arras
   Feuille de style unique — signée Digital Air Media
   Direction : noir laqué, or, grande couture. Aucun arrondi
   décoratif, aucun effet gratuit : le filet d'or fait le luxe.
   ============================================================= */

/* ---------- I. JETONS ---------- */
:root{
  /* Noirs de laque */
  --noir:#08080a;
  --noir-2:#0e0e12;
  --noir-3:#16161c;
  --laque:#12100f;

  /* Encres claires */
  --ivoire:#f0ebe1;
  --ivoire-dim:#b2aa9c;
  --ivoire-faint:#777064;

  /* Or de maison */
  --or:#c9a962;
  --or-clair:#ecd9a8;
  --or-profond:#8a6d33;

  /* Accent unique, réservé à l'urgence pénale */
  --alerte:#8e2f28;

  /* Filets */
  --filet:rgba(201,169,98,.18);
  --filet-fort:rgba(201,169,98,.38);
  --filet-doux:rgba(240,235,225,.07);

  --radius:2px;
  --font-display:"Cormorant Garamond","Didot",Georgia,"Times New Roman",serif;
  --font-body:"Outfit","Segoe UI",Helvetica,Arial,sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soie:cubic-bezier(.16,.84,.24,1);
  --halo:0 0 60px rgba(201,169,98,.16);

  --shell:1240px;
  --gouttiere:clamp(20px,5vw,64px);
  --header-h:76px;
}

/* ---------- II. RÉINITIALISATION ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}
body{
  font-family:var(--font-body);
  font-weight:300;
  font-size:clamp(15px,.55vw + 13.6px,17px);
  line-height:1.75;
  color:var(--ivoire);
  background:var(--noir);
  -webkit-font-smoothing:antialiased;
  /* clip rogne comme hidden mais ne crée pas de conteneur de défilement :
     sans cela, toute position collante de la page cesse de fonctionner.
     La première déclaration sert de repli aux navigateurs anciens. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--or-profond);color:var(--noir)}

/* Barre de défilement */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--noir)}
::-webkit-scrollbar-thumb{background:var(--or-profond);border:3px solid var(--noir)}

/* ---------- III. TYPOGRAPHIE ---------- */
h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--ivoire);
}
h1{font-size:clamp(2.6rem,6.2vw,5.1rem)}
h2{font-size:clamp(2rem,4.2vw,3.5rem)}
h3{font-size:clamp(1.4rem,2.2vw,1.95rem)}
h4{font-size:clamp(1.15rem,1.5vw,1.35rem)}
p{color:var(--ivoire-dim)}
p + p{margin-top:1.1em}
strong,b{color:var(--ivoire);font-weight:500}
em{font-style:italic}

/* Capitale d'attaque — codes de la revue de mode */
.lettrine::first-letter{
  font-family:var(--font-display);
  font-size:4.2em;
  line-height:.78;
  float:left;
  padding:.06em .14em 0 0;
  color:var(--or);
}

/* Surtitre en petites capitales espacées */
.surtitre{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.68rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  font-weight:400;
  color:var(--or);
}
.surtitre::before{
  content:"";width:38px;height:1px;
  background:linear-gradient(90deg,transparent,var(--or));
}
.surtitre.centre::after{
  content:"";width:38px;height:1px;
  background:linear-gradient(90deg,var(--or),transparent);
}

.lede{
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.7;
  color:var(--ivoire-dim);
  font-weight:200;
  max-width:62ch;
}
.or{color:var(--or)}
.italique{font-family:var(--font-display);font-style:italic;font-size:1.12em;color:var(--ivoire)}
.mesure{max-width:70ch}
.centre{text-align:center}
.centre .lede,.centre .mesure{margin-left:auto;margin-right:auto}
.centre .surtitre{justify-content:center}

/* ---------- IV. STRUCTURE ---------- */
.shell{
  width:100%;max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gouttiere);
}
/* Bande élargie : réservée aux rangées de quatre cartes, qui étouffent
   dans la largeur de lecture courante. */
.shell--large{max-width:1480px}
.section{
  position:relative;
  padding:clamp(84px,11vw,158px) 0;
  /* Rogne les ornements débordants (chiffre romain, moiré) sans couper
     les positions collantes des colonnes. */
  overflow:hidden;
  overflow:clip;
}
.section + .section{border-top:1px solid var(--filet-doux)}
.section--laque{background:var(--noir-2)}
.section--profond{background:var(--laque)}

.grille{display:grid;gap:clamp(26px,3.4vw,54px)}
.col-2{grid-template-columns:repeat(2,1fr)}
.col-3{grid-template-columns:repeat(3,1fr)}
.col-4{grid-template-columns:repeat(4,1fr)}
/* Quatre colonnes laissent peu de place au texte : on récupère de la
   largeur sur la gouttière plutôt que sur la ligne. */
.grille.col-4{gap:clamp(16px,1.5vw,24px)}
.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start}
/* Page de rendez-vous : c'est le formulaire qui mérite la largeur, pas
   la colonne d'informations pratiques. */
.split--formulaire{grid-template-columns:minmax(0,1.22fr) minmax(0,.85fr);align-items:start}
.split-inverse{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}

/* ---------- V. CHAPITRES ---------- */
.chapitre-tete{
  position:relative;
  margin-bottom:clamp(38px,5vw,72px);
  max-width:80ch;
}
.chapitre-no{
  display:flex;align-items:baseline;gap:18px;
  margin-bottom:22px;
}
.chapitre-no .romain{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--or);
  letter-spacing:.12em;
}
.chapitre-no .intitule{
  font-size:.66rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.chapitre-no::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--filet),transparent);
  transform:translateY(-6px);
}
.chapitre-tete h2{margin-bottom:22px}
/* Sans chapô, le titre n'a pas à porter sa marge basse : elle s'ajoutait
   à celle du bloc et creusait un blanc de près de cent pixels. */
.chapitre-tete h2:last-child{margin-bottom:0}
.split > * > .chapitre-tete,
.split-inverse > * > .chapitre-tete{margin-bottom:clamp(26px,3vw,40px)}

/* Chiffre romain en filigrane */
.romain-fantome{
  position:absolute;
  top:clamp(-30px,-3vw,-10px);right:clamp(-10px,2vw,40px);
  font-family:var(--font-display);
  font-size:clamp(11rem,26vw,25rem);
  line-height:.72;
  color:transparent;
  -webkit-text-stroke:1px rgba(201,169,98,.055);
  pointer-events:none;user-select:none;z-index:0;
}
.section > .shell{position:relative;z-index:1}

/* ---------- VI. FILETS ET ORNEMENTS ---------- */
.filet-or{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--filet-fort) 22%,var(--or) 50%,var(--filet-fort) 78%,transparent);
  opacity:.65;
}
.filet-simple{height:1px;border:0;background:var(--filet-doux)}

/* Piqûre de couture : pointillé d'or, code de l'atelier */
.couture{
  height:1px;border:0;
  background-image:linear-gradient(90deg,var(--or) 0 8px,transparent 8px 18px);
  background-size:18px 1px;
  opacity:.35;
}

/* Moiré de soie très discret sur les fonds */
.soie{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(115deg,transparent 0 3px,rgba(201,169,98,.017) 3px 4px),
    radial-gradient(1200px 520px at 78% -10%,rgba(201,169,98,.07),transparent 62%);
}
.soie--bas{
  background:
    repeating-linear-gradient(65deg,transparent 0 3px,rgba(201,169,98,.015) 3px 4px),
    radial-gradient(900px 460px at 12% 108%,rgba(201,169,98,.06),transparent 60%);
}

/* Monogramme gravé */
.sceau{
  position:relative;
  display:grid;place-items:center;
  width:46px;height:46px;
  flex:none;
  border:1px solid var(--filet-fort);
  border-radius:50%;
  font-family:var(--font-display);
  font-size:.95rem;letter-spacing:.06em;
  color:var(--or);
  background:radial-gradient(circle at 32% 28%,rgba(201,169,98,.14),transparent 68%);
  transition:transform .8s var(--ease),border-color .5s var(--ease);
}
.sceau::after{
  content:"";position:absolute;inset:4px;
  border:1px solid rgba(201,169,98,.14);border-radius:50%;
}
a:hover > .sceau{transform:rotateY(180deg);border-color:var(--or)}

/* ---------- VII. BOUTONS ---------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:14px;
  padding:16px 30px;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--filet-fort);
  border-radius:var(--radius);
  color:var(--ivoire);
  overflow:hidden;
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease);
  white-space:nowrap;
}
.btn .fleche{transition:transform .5s var(--ease);font-size:.9rem}
.btn:hover .fleche{transform:translateX(6px)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--or-profond),var(--or) 46%,var(--or-clair) 62%,var(--or) 80%);
  transform:translateY(101%);
  transition:transform .55s var(--ease-soie);
}
.btn:hover{color:var(--noir);border-color:var(--or)}
.btn:hover::before{transform:translateY(0)}
.btn-or{
  color:var(--noir);
  border-color:transparent;
  background:linear-gradient(120deg,var(--or-profond),var(--or) 46%,var(--or-clair) 62%,var(--or) 80%);
}
.btn-or::before{
  background:linear-gradient(120deg,var(--or-clair),#fff6e0 50%,var(--or-clair));
  transform:translateY(101%);
}
.btn-or:hover{color:var(--noir);box-shadow:var(--halo)}
.btn-fantome{border-color:var(--filet);color:var(--ivoire-dim);padding:13px 24px}
.btn-fantome:hover{color:var(--noir)}
.btn-sm{padding:12px 20px;font-size:.64rem;letter-spacing:.2em}
.btn-bloc{width:100%;justify-content:center}
.actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* Lien souligné à l'or */
.lien-or{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--or);
  padding-bottom:5px;
  background-image:linear-gradient(var(--or),var(--or));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .5s var(--ease);
}
.lien-or:hover{background-size:100% 1px}
.lien-or .fleche{transition:transform .5s var(--ease)}
.lien-or:hover .fleche{transform:translateX(5px)}

/* ---------- VIII. BANDEAU D'URGENCE ---------- */
.bandeau{
  position:relative;z-index:60;
  background:var(--laque);
  border-bottom:1px solid var(--filet-doux);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivoire-dim);
}
.bandeau-inner{
  display:flex;align-items:center;justify-content:center;gap:14px;
  min-height:40px;padding:8px var(--gouttiere);text-align:center;
}
.pastille{
  width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--alerte);
  box-shadow:0 0 0 0 rgba(142,47,40,.7);
  animation:pouls 2.6s infinite;
}
@keyframes pouls{
  0%{box-shadow:0 0 0 0 rgba(142,47,40,.65)}
  70%{box-shadow:0 0 0 9px rgba(142,47,40,0)}
  100%{box-shadow:0 0 0 0 rgba(142,47,40,0)}
}
/* Un numéro de téléphone ne se coupe jamais en fin de ligne. */
.bandeau a{color:var(--or);border-bottom:1px solid var(--filet);white-space:nowrap}
.bandeau a:hover{border-color:var(--or)}

/* Bouton d'appel : dans une bande d'urgence, on ne demande pas au
   visiteur de recopier un numéro, on lui donne un geste. */
.bandeau a.bandeau-appel{
  display:inline-flex;align-items:center;gap:8px;
  flex:none;
  padding:6px 15px;
  border:1px solid transparent;
  border-radius:var(--radius);
  background:linear-gradient(120deg,var(--or-profond),var(--or) 46%,var(--or-clair) 62%,var(--or) 80%);
  color:var(--noir);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.bandeau a.bandeau-appel:hover{
  box-shadow:0 0 20px rgba(201,169,98,.4);
  transform:translateY(-1px);
}
.bandeau a.bandeau-appel svg{width:12px;height:12px;flex:none}

/* ---------- IX. EN-TÊTE ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(8,8,10,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--filet-doux);
  transition:background .5s var(--ease),border-color .5s var(--ease);
}
.site-header.est-fige{background:rgba(8,8,10,.94);border-color:var(--filet)}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:var(--header-h);
  max-width:var(--shell);margin-inline:auto;
  padding-inline:var(--gouttiere);
}
.logo{display:flex;align-items:center;gap:14px}
.griffe{display:flex;flex-direction:column;line-height:1.15}
.griffe .nom{
  font-family:var(--font-display);
  font-size:1.12rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivoire);
}
.griffe .qualite{
  font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivoire-faint);
}

.nav-principale{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-principale > li{position:relative}
.nav-principale a{
  position:relative;display:block;
  padding:10px 2px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivoire-dim);
  transition:color .4s var(--ease);
}
.nav-principale a::after{
  content:"";position:absolute;left:0;bottom:4px;
  width:0;height:1px;background:var(--or);
  transition:width .45s var(--ease);
}
.nav-principale a:hover,.nav-principale a.actif{color:var(--or)}
.nav-principale a:hover::after,.nav-principale a.actif::after{width:100%}

/* Sous-menu des matières */
.a-tiroir > .tiroir{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translate(-50%,10px);
  min-width:280px;
  padding:14px 0;
  background:rgba(14,14,18,.97);
  backdrop-filter:blur(18px);
  border:1px solid var(--filet);
  border-radius:var(--radius);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.a-tiroir:hover > .tiroir,.a-tiroir:focus-within > .tiroir{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.tiroir a{
  padding:11px 26px;
  letter-spacing:.14em;
  display:flex;align-items:center;gap:12px;
}
.tiroir a::after{display:none}
.tiroir a::before{
  content:"";width:0;height:1px;background:var(--or);
  transition:width .4s var(--ease);
}
.tiroir a:hover::before{width:16px}

.header-actions{display:flex;align-items:center;gap:16px}
.bascule-langue{
  display:flex;align-items:center;
  border:1px solid var(--filet);border-radius:var(--radius);
  overflow:hidden;
}
.bascule-langue button{
  padding:7px 11px;
  font-size:.6rem;letter-spacing:.16em;
  color:var(--ivoire-faint);
  transition:color .35s var(--ease),background .35s var(--ease);
}
.bascule-langue button.actif{background:var(--or);color:var(--noir)}
.bascule-langue button:not(.actif):hover{color:var(--or)}

/* Éléments propres au panneau mobile : invisibles dans la barre du bureau */
.fermer-menu,.tiroir-bascule,.nav-pied{display:none}

/* Bouton menu */
.burger{
  display:none;
  width:42px;height:42px;
  border:1px solid var(--filet);border-radius:var(--radius);
  position:relative;flex:none;
}
.burger span{
  position:absolute;left:11px;width:20px;height:1px;background:var(--or);
  transition:transform .45s var(--ease),opacity .3s var(--ease),width .45s var(--ease);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:20.5px;width:14px}
.burger span:nth-child(3){top:26px}
.burger.est-ouvert span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger.est-ouvert span:nth-child(2){opacity:0}
.burger.est-ouvert span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Jauge de lecture */
.jauge{
  position:fixed;top:0;left:0;z-index:70;
  height:2px;width:0;
  background:linear-gradient(90deg,var(--or-profond),var(--or-clair));
  transition:width .12s linear;
}

/* ---------- X. HÉROS ---------- */
.heros{
  position:relative;
  display:flex;align-items:center;
  min-height:clamp(560px,88vh,940px);
  padding:clamp(80px,10vh,120px) 0 clamp(60px,8vh,100px);
  overflow:hidden;
  border-bottom:1px solid var(--filet-doux);
}
.heros--court{min-height:clamp(400px,58vh,620px)}
.heros-3d{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.heros-3d canvas{width:100%;height:100%}
.heros::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% 42%,transparent,rgba(8,8,10,.55) 78%),
    linear-gradient(to bottom,rgba(8,8,10,.35),transparent 26%,transparent 66%,var(--noir));
}
.heros > .shell{position:relative;z-index:2}
.heros-contenu{max-width:76ch}
.heros h1{margin:26px 0 30px}
.heros h1 .ligne{display:block}
.heros .lede{max-width:58ch;margin-bottom:40px}
.heros-mentions{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  margin-top:46px;padding-top:26px;
  border-top:1px solid var(--filet-doux);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.heros-mentions span{display:flex;align-items:center;gap:10px}
.heros-mentions span::before{content:"";width:4px;height:4px;background:var(--or);transform:rotate(45deg)}

/* ---------- X bis. PORTRAIT DU HÉROS ---------- */
/* Le portrait remplace la gemme sur l'accueil : elle reste en fond sous
   forme d'anneaux d'or et de poussière, pour ne pas concurrencer le
   visage. */
.heros--portrait .heros-grille{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  align-items:end;
  gap:clamp(20px,3vw,56px);
}
.heros--portrait .heros-contenu{max-width:60ch}
/* Le titre doit tenir sur deux lignes malgré la colonne réduite par le
   portrait : le corps est plafonné en conséquence. */
.heros--portrait h1{font-size:clamp(2.3rem,4.4vw,4rem)}

.heros-portrait{
  position:relative;
  justify-self:end;align-self:end;
  width:100%;max-width:520px;
  margin:0;
  pointer-events:none;
  will-change:transform;
  transition:transform 1.2s var(--ease-soie);
}
.heros-portrait img{
  display:block;width:100%;height:auto;
  max-height:min(76vh,760px);
  object-fit:contain;object-position:bottom center;
  /* Léger étalonnage : la robe noire se fond dans le fond, le visage et
     le rabat blanc restent nets. */
  filter:grayscale(.14) saturate(.9) contrast(1.06) brightness(.97)
         drop-shadow(0 34px 60px rgba(0,0,0,.65));
  /* Elle émerge du noir plutôt que d'être posée dessus. */
  -webkit-mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.6) 82%,transparent 99%);
  mask-image:linear-gradient(to bottom,#000 56%,rgba(0,0,0,.6) 82%,transparent 99%);
  transition:transform 1.4s var(--ease-soie);
}
/* Halo d'or derrière la silhouette */
.heros-portrait::before{
  content:"";position:absolute;z-index:-1;
  left:50%;top:12%;transform:translateX(-50%);
  width:112%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(201,169,98,.16),rgba(201,169,98,.05) 45%,transparent 68%);
}
/* Repli : sans fichier image, le héros retrouve sa pleine largeur. */
.heros.sans-portrait .heros-grille{grid-template-columns:1fr}
.heros.sans-portrait .heros-portrait{display:none}
.heros.sans-portrait .heros-contenu{max-width:76ch}

/* Invite de défilement */
.invite{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.invite i{display:block;width:1px;height:52px;background:linear-gradient(var(--or),transparent);animation:filer 2.6s var(--ease) infinite}
@keyframes filer{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- XI. PANNEAUX ---------- */
.panneau{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(28px,3vw,42px);
  background:linear-gradient(160deg,rgba(22,22,28,.92),rgba(8,8,10,.92));
  border:1px solid var(--filet-doux);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .55s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease);
  transform-style:preserve-3d;
  will-change:transform;
}
.panneau::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--or),transparent);
  opacity:0;transition:opacity .55s var(--ease);
}
.panneau:hover{border-color:var(--filet);box-shadow:0 30px 60px rgba(0,0,0,.5)}
.panneau:hover::before{opacity:.8}
.panneau .no{
  font-family:var(--font-display);
  font-size:.95rem;letter-spacing:.2em;color:var(--or);
  margin-bottom:20px;
  display:flex;align-items:center;gap:12px;
}
.panneau .no::after{content:"";flex:1;height:1px;background:var(--filet-doux)}
.panneau h3{margin-bottom:14px}
.panneau h3 a{transition:color .4s var(--ease)}
.panneau:hover h3 a{color:var(--or-clair)}
.panneau p{font-size:.95rem}
.panneau .liste{margin-top:20px}
.panneau .btn,.panneau .lien-or{margin-top:auto;align-self:flex-start;padding-top:24px}
.panneau .btn{padding:14px 24px;margin-top:26px}

/* Panneau matière avec profondeur 3D */
.panneau--matiere{min-height:340px}
.panneau--matiere .halo{
  position:absolute;inset:auto -30% -40% auto;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,169,98,.13),transparent 68%);
  opacity:0;transition:opacity .7s var(--ease);
}
.panneau--matiere:hover .halo{opacity:1}

/* ---------- XII. LISTES ---------- */
.liste li{
  position:relative;
  padding-left:26px;
  font-size:.94rem;
  color:var(--ivoire-dim);
}
.liste li + li{margin-top:12px}
.liste li::before{
  content:"";position:absolute;left:0;top:.65em;
  width:6px;height:6px;
  border:1px solid var(--or);
  transform:rotate(45deg);
}
.liste--pleine li::before{background:var(--or)}

.liste-numerotee{counter-reset:romain}
.liste-numerotee > li{
  counter-increment:romain;
  position:relative;
  padding-left:64px;
}
.liste-numerotee > li + li{margin-top:30px}
.liste-numerotee > li::before{
  content:counter(romain,upper-roman);
  position:absolute;left:0;top:-2px;
  font-family:var(--font-display);
  font-size:1.2rem;color:var(--or);
  letter-spacing:.1em;
}
.liste-numerotee h4{margin-bottom:8px}

/* ---------- XIII. CARTEL (étiquette de galerie) ---------- */
.cartel{
  border:1px solid var(--filet-doux);
  border-radius:var(--radius);
  background:rgba(18,16,15,.6);
  padding:clamp(24px,2.6vw,34px);
}
.cartel dl{display:grid;grid-template-columns:auto 1fr;gap:14px 26px;align-items:baseline}
.cartel dt{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivoire-faint);white-space:nowrap;
}
.cartel dd{font-size:.95rem;color:var(--ivoire)}
.cartel + .cartel{margin-top:18px}

/* Tête de fiche : le nom en titre, le médaillon à sa droite. */
.cartel-tete{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  margin-bottom:26px;padding-bottom:24px;
  border-bottom:1px solid var(--filet-doux);
}
.cartel-tete h3{
  font-size:clamp(1.2rem,1.7vw,1.55rem);
  line-height:1.18;
}
.cartel-portrait{
  flex:none;
  display:block;
  width:78px;height:78px;
  border-radius:50%;
  overflow:hidden;
  background:var(--noir-2);
  border:1px solid var(--filet-fort);
  /* Double liseré : un cerne noir puis un filet d'or, comme une monture. */
  box-shadow:0 0 0 4px var(--noir),0 0 0 5px rgba(201,169,98,.22),
             0 12px 26px rgba(0,0,0,.55);
}
.cartel-portrait img{
  width:100%;height:100%;
  object-fit:cover;
  /* La photo est cadrée large : un cercle brut montrerait surtout la
     bibliothèque. On agrandit autour du visage, qui se retrouve au
     centre du médaillon. */
  transform-origin:75% 0;
  transform:scale(1.9);
  filter:grayscale(.14) saturate(.9) contrast(1.05);
}

/* Pied de fiche : les repères chiffrés appartiennent au cartel, ils ne
   flottent pas en dessous. */
.cartel-pied{
  display:grid;grid-template-columns:1fr 1fr;gap:26px;
  margin-top:30px;padding-top:26px;
  border-top:1px solid var(--filet-doux);
}
.cartel-pied .repere{border-top:0;padding-top:0}
.cartel-pied .valeur{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-bottom:8px}
.cartel-pied .libelle{font-size:.58rem;letter-spacing:.2em;line-height:1.5;display:block}

/* La fiche accompagne la lecture au lieu de laisser un vide en bas de
   colonne. Le parent .rvl n'a plus de transform une fois révélé, la
   position collante fonctionne donc normalement. */
@media (min-width:901px){
  /* Une position collante ne tient que dans son bloc conteneur : la
     colonne doit occuper toute la hauteur de la rangée, sinon la fiche
     repart avec le défilement dès sa propre hauteur dépassée. */
  .colonne-fiche{align-self:stretch}
  .cartel--fiche{position:sticky;top:calc(var(--header-h) + 28px)}
}

/* Bloc fait / repère chiffré (données factuelles uniquement) */
.repere{
  border-top:1px solid var(--filet-doux);
  padding-top:22px;
}
.repere .valeur{
  font-family:var(--font-display);
  font-size:clamp(2rem,3.4vw,3rem);
  color:var(--or);line-height:1;
  display:block;margin-bottom:10px;
}
.repere .libelle{
  font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivoire-faint);
}

/* ---------- XIV. CITATION ---------- */
.declaration{
  position:relative;
  padding:clamp(56px,7vw,96px) 0;
  text-align:center;
}
/* Le bloc doit être optiquement centré entre les deux filets : autant de
   respiration au-dessus de la citation qu'en dessous de la signature. */
.declaration blockquote{margin-top:clamp(44px,5vw,68px)}
.declaration .shell > hr:last-child{margin-top:clamp(44px,5vw,68px)}

.declaration blockquote{
  font-family:var(--font-display);
  font-size:clamp(1.6rem,3.4vw,2.9rem);
  line-height:1.3;
  font-style:italic;
  color:var(--ivoire);
  max-width:26ch;margin-inline:auto;
}
.declaration blockquote .or{font-style:normal}
.declaration cite{
  display:block;margin-top:30px;
  font-style:normal;font-size:.64rem;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--ivoire-faint);
}

/* ---------- XV. ÉTAPES ---------- */
.etape{
  position:relative;
  padding:clamp(24px,1.9vw,30px);
  border:1px solid var(--filet-doux);
  border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(22,22,28,.8),transparent);
  transition:border-color .55s var(--ease),background .55s var(--ease);
}
/* Dans une rangée de quatre, la carte respire par le haut et le bas
   plutôt que par les côtés, où chaque pixel est pris sur la ligne. */
.col-4 .etape{padding:clamp(26px,2.2vw,34px) clamp(20px,1.6vw,26px)}
.etape:hover{border-color:var(--filet)}
.etape .temps{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:22px;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.etape .temps .romain{
  font-family:var(--font-display);font-size:1.35rem;
  color:var(--or);letter-spacing:.08em;text-transform:none;
}
.etape h3{font-size:1.35rem;margin-bottom:12px}
.etape p{font-size:.93rem}

/* ---------- XVI. ACCORDÉON ---------- */
.accordeon{border-top:1px solid var(--filet-doux)}
.accordeon-item{border-bottom:1px solid var(--filet-doux)}
.accordeon-tete{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:26px 0;
  text-align:left;
  font-family:var(--font-display);
  font-size:clamp(1.08rem,1.6vw,1.3rem);
  color:var(--ivoire);
  transition:color .4s var(--ease);
}
.accordeon-tete:hover{color:var(--or)}
.accordeon-tete .croix{
  position:relative;flex:none;
  width:18px;height:18px;margin-top:6px;
}
.accordeon-tete .croix::before,.accordeon-tete .croix::after{
  content:"";position:absolute;background:var(--or);
  transition:transform .45s var(--ease),opacity .45s var(--ease);
}
.accordeon-tete .croix::before{top:8.5px;left:0;width:18px;height:1px}
.accordeon-tete .croix::after{left:8.5px;top:0;width:1px;height:18px}
.accordeon-item.est-ouvert .croix::after{transform:rotate(90deg);opacity:0}
.accordeon-corps{
  overflow:hidden;
  max-height:0;
  transition:max-height .6s var(--ease-soie);
}
.accordeon-corps > div{padding:0 0 30px;max-width:80ch}
.accordeon-corps p{font-size:.96rem}

/* ---------- XVII. FORMULAIRE ---------- */
.formulaire{
  display:grid;gap:22px;
}
.champ{position:relative;display:flex;flex-direction:column;gap:9px}
.champ label{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.champ label .requis{color:var(--or)}
.champ input,.champ textarea,.champ select{
  width:100%;
  padding:15px 16px;
  background:rgba(22,22,28,.6);
  border:1px solid var(--filet-doux);
  border-radius:var(--radius);
  color:var(--ivoire);
  font-size:.95rem;font-weight:300;
  transition:border-color .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease);
}
.champ select{appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--or) 50%),linear-gradient(135deg,var(--or) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}
.champ select option{background:var(--noir-2);color:var(--ivoire)}
.champ textarea{min-height:170px;resize:vertical;line-height:1.7}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--or);
  background:rgba(22,22,28,.9);
  box-shadow:0 0 0 3px rgba(201,169,98,.08);
}
.champ input::placeholder,.champ textarea::placeholder{color:var(--ivoire-faint);opacity:.55}
.champ-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.consentement{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.82rem;line-height:1.6;color:var(--ivoire-faint);
}
.consentement input{
  appearance:none;flex:none;
  width:17px;height:17px;margin-top:3px;
  border:1px solid var(--filet-fort);border-radius:var(--radius);
  cursor:pointer;transition:background .3s var(--ease);
}
.consentement input:checked{background:var(--or) center/10px no-repeat url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.6' fill='none' stroke='%2308080a' stroke-width='2'/%3E%3C/svg%3E")}
.form-note{font-size:.78rem;color:var(--ivoire-faint);line-height:1.6}
.form-retour{
  display:none;padding:16px 20px;
  border:1px solid var(--filet);border-radius:var(--radius);
  background:rgba(201,169,98,.06);
  font-size:.88rem;color:var(--or-clair);
}
.form-retour.est-visible{display:block}

/* ---------- XVIII. ENCADRÉ D'ALERTE ---------- */
.encadre{
  position:relative;
  padding:clamp(24px,2.6vw,34px);
  padding-left:clamp(30px,3vw,42px);
  border:1px solid var(--filet-doux);
  border-left:2px solid var(--or);
  border-radius:var(--radius);
  background:rgba(201,169,98,.035);
}
.encadre--urgence{border-left-color:var(--alerte);background:rgba(142,47,40,.05)}
.encadre h4{margin-bottom:12px}
.encadre p{font-size:.94rem}

/* ---------- XIX. PIED ---------- */
.site-footer{
  position:relative;
  background:var(--laque);
  border-top:1px solid var(--filet);
  padding:clamp(64px,7vw,100px) 0 34px;
  overflow:hidden;
}
.footer-grille{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(32px,4vw,56px);
  position:relative;z-index:1;
}
.footer-grille h4{
  font-family:var(--font-body);
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--or);margin-bottom:24px;font-weight:400;
}
.footer-grille p{font-size:.88rem}
.footer-liens li + li{margin-top:12px}
.footer-liens a{
  font-size:.88rem;color:var(--ivoire-dim);
  transition:color .4s var(--ease),padding-left .4s var(--ease);
}
.footer-liens a:hover{color:var(--or);padding-left:8px}
.footer-contact{font-size:.88rem;color:var(--ivoire-dim);font-style:normal}
.footer-contact a{transition:color .4s var(--ease)}
.footer-contact a:hover{color:var(--or)}
.footer-contact li + li{margin-top:14px}
.footer-bas{
  margin-top:clamp(46px,5vw,70px);
  padding-top:26px;
  border-top:1px solid var(--filet-doux);
  display:flex;flex-wrap:wrap;gap:14px 30px;
  align-items:center;justify-content:space-between;
  font-size:.72rem;color:var(--ivoire-faint);
  position:relative;z-index:1;
}
.footer-bas a:hover{color:var(--or)}
.signature{display:flex;align-items:center;gap:10px;font-size:.68rem;letter-spacing:.14em}
.signature a{color:var(--ivoire-dim);display:inline-flex;align-items:center;gap:7px}
.signature a:hover{color:var(--or)}
/* Sceau de la maison, discret : il signe sans se montrer. */
.sceau-dam{
  width:14px;height:14px;flex:none;
  opacity:.8;
  transition:opacity .4s var(--ease);
}
.signature a:hover .sceau-dam{opacity:1}

/* ---------- XX. FIL D'ARIANE ---------- */
.ariane{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivoire-faint);
}
.ariane a{transition:color .4s var(--ease)}
.ariane a:hover{color:var(--or)}
.ariane span[aria-hidden]{color:var(--or-profond)}

/* ---------- XXI. NAVIGATION ENTRE MATIÈRES ---------- */
.paire-nav{
  display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--filet-doux);
}
.paire-nav a{
  padding:clamp(30px,4vw,50px) clamp(20px,3vw,40px);
  transition:background .5s var(--ease);
}
.paire-nav a:first-child{border-right:1px solid var(--filet-doux)}
.paire-nav a:hover{background:rgba(201,169,98,.04)}
.paire-nav .sens{
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ivoire-faint);margin-bottom:12px;display:block;
}
.paire-nav .titre{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.7rem);color:var(--ivoire);transition:color .4s var(--ease)}
.paire-nav a:hover .titre{color:var(--or)}
.paire-nav a:last-child{text-align:right}

/* ---------- XXII. APPARITIONS ---------- */
.rvl{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease-soie),transform 1s var(--ease-soie);
}
.rvl.est-vu{opacity:1;transform:none}
.rvl-d1{transition-delay:.09s}
.rvl-d2{transition-delay:.18s}
.rvl-d3{transition-delay:.27s}
.rvl-d4{transition-delay:.36s}
.rvl-d5{transition-delay:.45s}

/* Lever de rideau sur les titres */
.rideau{display:block;overflow:hidden}
.rideau > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease-soie);
}
.est-vu .rideau > span,.rideau.est-vu > span{transform:none}
.rideau:nth-child(2) > span{transition-delay:.1s}
.rideau:nth-child(3) > span{transition-delay:.2s}

/* ---------- XXIII. ADAPTATIF ---------- */
/* En dessous de cette largeur, quatre colonnes deviennent illisibles :
   on passe à deux bien avant la bascule mobile. */
@media (max-width:1280px){
  .col-4{grid-template-columns:repeat(2,1fr)}
  .shell--large{max-width:var(--shell)}
}

@media (max-width:1080px){
  .footer-grille{grid-template-columns:1fr 1fr}
}

@media (max-width:900px){
  :root{--header-h:66px}

  /* ⚠️ Un élément portant backdrop-filter devient bloc conteneur pour
     ses descendants en position fixed : le panneau de menu se trouvait
     enfermé dans la hauteur de l'en-tête au lieu de couvrir l'écran.
     Sur mobile, on remplace le flou par un fond opaque. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(8,8,10,.96)}
  .site-header.est-fige{background:var(--noir)}
  .site-header{z-index:56}

  /* Le panneau est un descendant de l'en-tête : élever le conteneur ne
     suffit pas, le panneau monterait avec lui. Ce sont le monogramme et
     le sélecteur de langue qu'il faut positionner au-dessus, pour rester
     accessibles menu ouvert. */
  .header-inner{position:relative;z-index:57}
  .logo,.header-actions{position:relative;z-index:58}

  /* Menu ouvert : la barre se vide. Le monogramme et le sélecteur de
     langue disparaissent, laissant une respiration entre le bandeau et
     la première entrée. */
  .logo,.bascule-langue{
    transition:opacity .35s var(--ease);
  }
  body.menu-ouvert .logo,
  body.menu-ouvert .bascule-langue{
    opacity:0;
    pointer-events:none;
  }

  /* Une seule commande de fermeture : la croix ronde remplace le
     hamburger, qui s'efface dès l'ouverture. */
  .burger.est-ouvert{opacity:0;pointer-events:none}

  .burger{display:block}

  .nav-principale{
    position:fixed;inset:0;z-index:55;
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    gap:0;
    padding:calc(var(--header-h) + 46px) var(--gouttiere) 60px;
    background:var(--noir);
    /* Le panneau ne défile que verticalement : sans ces trois lignes, un
       balayage latéral au doigt fait glisser le menu hors de l'écran et
       entraîne la page derrière lui. */
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    touch-action:pan-y;
    /* Barre de défilement masquée : elle rétrécissait la largeur utile du
       panneau, décalant le chevron de dix pixels par rapport à la croix,
       qui est calée sur la fenêtre. Le panneau défile toujours. */
    scrollbar-width:none;
    clip-path:circle(0 at calc(100% - 46px) 40px);
    transition:clip-path .75s var(--ease-soie);
    pointer-events:none;
  }
  .nav-principale.est-ouverte{
    clip-path:circle(150% at calc(100% - 46px) 40px);
    pointer-events:auto;
  }
  /* Monogramme en filigrane, au fond du panneau. */
  .nav-principale::after{
    content:"ML";
    position:absolute;right:-4vw;bottom:-2vh;
    font-family:var(--font-display);
    font-size:44vw;line-height:.8;
    color:transparent;
    -webkit-text-stroke:1px rgba(201,169,98,.05);
    pointer-events:none;z-index:-1;
  }

  /* Les entrées sont numérotées comme les chapitres du site. */
  .nav-principale{counter-reset:menu}
  .nav-principale > li:not(.nav-pied){counter-increment:menu}
  .nav-principale > li{width:100%;border-bottom:1px solid var(--filet-doux)}
  /* Le pied du panneau porte un bouton : il ne doit pas hériter du
     traitement des grandes entrées de menu. */
  .nav-principale > li:not(.nav-pied) > a{
    position:relative;
    padding:22px 0 22px 46px;
    font-family:var(--font-display);
    font-size:clamp(1.75rem,7.4vw,2.3rem);
    letter-spacing:.02em;text-transform:none;line-height:1.1;
    color:var(--ivoire);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s),color .3s;
  }
  .nav-principale > li:not(.nav-pied) > a::before{
    content:counter(menu,upper-roman);
    position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    font-size:.8rem;letter-spacing:.14em;
    color:var(--or);
    opacity:.75;
  }
  .nav-principale.est-ouverte > li:not(.nav-pied) > a{opacity:1;transform:none}
  .nav-principale > li > a::after{display:none}

  /* Pied du panneau */
  .nav-pied{
    border-bottom:0 !important;
    padding:34px 0 10px;
    display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    opacity:0;transform:translateY(16px);
    transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;
  }
  .nav-principale.est-ouverte .nav-pied{opacity:1;transform:none}
  /* Sélecteur volontairement plus précis que « .nav-principale a », qui
     impose des capitales espacées à toute la navigation : une adresse
     électronique se lit en minuscules. */
  .nav-principale a.nav-pied-mail{
    text-transform:none;letter-spacing:0;
    font-size:1rem;
    color:var(--or);
    padding-bottom:4px;
    background-image:linear-gradient(var(--or),var(--or));
    background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  }
  .nav-pied-adresse{
    font-size:.86rem;line-height:1.6;color:var(--ivoire-dim);
  }
  .nav-pied-urgence{
    font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
    color:var(--or);
  }

  /* Croix de fermeture, franche et à portée de pouce. */
  .fermer-menu{
    display:block;
    /* Position fixe et calculée, alignée sur la première entrée du menu :
       la caler sur la hauteur de l'en-tête la faisait descendre dès que
       le bandeau changeait de hauteur ou disparaissait au défilement. */
    position:fixed;top:calc(var(--header-h) + 61px);right:var(--gouttiere);
    z-index:57;
    width:46px;height:46px;
    border:1px solid var(--filet);
    border-radius:50%;
    background:rgba(8,8,10,.6);
    /* Pas d'animation de visibility : opacité et pointer-events suffisent
       à masquer la croix, sans dépendre d'une propriété discrète dont la
       transition se comporte différemment selon les moteurs. */
    opacity:0;pointer-events:none;transform:scale(.85);
    transition:opacity .35s var(--ease) .2s,transform .45s var(--ease) .2s,
               border-color .4s var(--ease);
  }
  .fermer-menu.est-visible{opacity:1;pointer-events:auto;transform:none}
  .fermer-menu:hover,.fermer-menu:focus-visible{border-color:var(--or)}
  .fermer-menu span{
    position:absolute;left:13px;top:22px;
    width:20px;height:1px;background:var(--or);
  }
  .fermer-menu span:nth-child(1){transform:rotate(45deg)}
  .fermer-menu span:nth-child(2){transform:rotate(-45deg)}

  /* Le sous-menu est replié par défaut et s'ouvre au chevron : la liste
     des cinq matières, dépliée d'office, repoussait les entrées
     suivantes hors de l'écran. */
  .tiroir-bascule{
    display:grid;place-items:center;
    position:absolute;right:0;top:16px;
    width:46px;height:46px;
    border:1px solid var(--filet);
    border-radius:50%;
    background:rgba(8,8,10,.4);
    transition:border-color .4s var(--ease),background .4s var(--ease);
  }
  .tiroir-bascule:hover,.tiroir-bascule:focus-visible{border-color:var(--or)}
  .tiroir-bascule .chevron{
    width:9px;height:9px;
    margin-top:-4px;
    border-right:1px solid var(--or);
    border-bottom:1px solid var(--or);
    transform:rotate(45deg);
    transition:transform .45s var(--ease);
  }
  .a-tiroir.est-deplie .tiroir-bascule .chevron{transform:rotate(225deg);margin-top:3px}

  .a-tiroir > .tiroir{
    position:static;transform:none;
    visibility:visible;pointer-events:auto;
    min-width:0;width:100%;
    max-height:0;opacity:0;overflow:hidden;
    padding:0;
    background:none;border:none;box-shadow:none;
    backdrop-filter:none;
    transition:max-height .55s var(--ease-soie),opacity .4s var(--ease),padding .4s var(--ease);
  }
  .a-tiroir.est-deplie > .tiroir{
    max-height:360px;opacity:1;
    padding:2px 0 20px;
  }
  /* ⚠️ Au doigt, effleurer l'entrée déclenche :hover et :focus-within :
     le sous-menu reprenait alors le décalage de -50 % prévu pour le
     menu déroulant du bureau, et sortait de l'écran. */
  .a-tiroir:hover > .tiroir,
  .a-tiroir:focus-within > .tiroir{transform:none}

  .nav-principale::-webkit-scrollbar{width:0;height:0}
  .tiroir a{padding:9px 0 9px 18px;font-size:.78rem;letter-spacing:.14em}
  .tiroir a::before{width:10px}

  .split,.split-inverse,.col-2,.col-3,.col-4{grid-template-columns:1fr}

  /* Le portrait passe sous le texte : sur un téléphone, ce que l'on vient
     chercher d'abord, c'est le message et le bouton d'appel. */
  .heros--portrait .heros-grille{grid-template-columns:1fr;gap:0}
  .heros--portrait .heros-contenu{max-width:none}
  .heros-portrait{
    justify-self:center;
    max-width:min(74vw,330px);
    margin-top:clamp(28px,6vw,48px);
  }
  .heros-portrait img{max-height:52vh}
  .heros--portrait .heros-mentions{margin-top:34px}
  .footer-grille{grid-template-columns:1fr;gap:38px}
  .paire-nav{grid-template-columns:1fr}
  .paire-nav a:first-child{border-right:none;border-bottom:1px solid var(--filet-doux)}
  .paire-nav a:last-child{text-align:left}
  .romain-fantome{font-size:clamp(8rem,34vw,14rem);opacity:.7}
  .champ-2{grid-template-columns:1fr}
  .heros-mentions{gap:8px 18px;font-size:.58rem}
  .declaration blockquote{max-width:none}
  .cartel dl{grid-template-columns:1fr;gap:6px}
  .cartel dd + dt{margin-top:14px}
}

@media (max-width:560px){
  /* Le bloc de marque doit tenir sur une seule ligne : sur 375 px,
     un retour à la ligne double la hauteur de l'en-tête collant. */
  .griffe .nom{font-size:.84rem;letter-spacing:.08em;white-space:nowrap}
  .griffe .qualite{font-size:.46rem;letter-spacing:.16em;white-space:nowrap}
  .logo{gap:10px}
  .sceau{width:38px;height:38px;font-size:.78rem}
  .header-actions{gap:8px}
  .bascule-langue button{padding:6px 8px;font-size:.56rem;letter-spacing:.1em}
  .burger{width:38px;height:38px}
  .burger span{left:9px;width:19px}
  .burger span:nth-child(1){top:13px}
  .burger span:nth-child(2){top:18.5px;width:13px}
  .burger span:nth-child(3){top:24px}
  .btn{padding:14px 22px;font-size:.66rem;letter-spacing:.2em}
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{justify-content:center}
  .bandeau-inner{font-size:.58rem;letter-spacing:.14em;gap:10px}
  .lettrine::first-letter{font-size:3.2em}
  .cartel-pied{grid-template-columns:1fr;gap:20px;margin-top:24px;padding-top:22px}
  .cartel-portrait{width:64px;height:64px}
  .cartel-tete{gap:16px;margin-bottom:22px;padding-bottom:20px}
  .footer-bas{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------- XXIV. IMPRESSION & ACCESSIBILITÉ ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .rvl{opacity:1;transform:none}
  .rideau > span{transform:none}
}

:focus-visible{
  outline:1px solid var(--or);
  outline-offset:3px;
}
.saut-contenu{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 22px;background:var(--or);color:var(--noir);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.saut-contenu:focus{left:0}

@media print{
  .site-header,.bandeau,.heros-3d,.invite,.jauge,.paire-nav{display:none}
  body{background:#fff;color:#000}
  .section{padding:20px 0}
}