/* =====================================================================
   vcv-ba.fr — feuille de style commune à toutes les pages.
   Direction « Le fil conducteur » validée par Axel le 08/10/2026.
   Palette : prune / bleu nuit / beige rosé (couleurs de VCV by Axel, version haut de gamme).
   ===================================================================== */

/* Polices hébergées sur le site (12/10/2026, accord d'Axel) : plus rapide sur mobile, et aucune adresse de visiteur envoyée à Google.
   Fraunces, Outfit et Mrs Saint Delafield sont sous licence SIL Open Font License. Caractères latins uniquement. */
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/fraunces-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/mrs-saint-delafield-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mrs Saint Delafield';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/mrs-saint-delafield-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/outfit-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/outfit-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/outfit-normal-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;
}
/* latin-ext */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/outfit-normal-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{
  --nuit:#1F2547;
  --nuit-profond:#12152A;
  --prune:#45263E;
  --prune-vif:#6A3A61;
  --beige:#DBCDC7;
  --fil:#C9AFA3;
  --creme:#F7F2EF;
  --encre:#1A1C30;
  --texte-doux:#585A70;
  --sur-sombre:#EFE8E4;
  --sur-sombre-doux:#B6B0BD;
  --filet-clair:rgba(31,37,71,.13);
  --filet-sombre:rgba(219,205,199,.18);
  --largeur:1200px;
  --gouttiere:24px;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --signature:'Mrs Saint Delafield', 'Brush Script MT', cursive;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition:none !important;} }
body{
  font-family:var(--sans); font-weight:300; font-size:18px; line-height:1.65;
  color:var(--encre); background:var(--creme); position:relative;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--beige); outline-offset:3px;}
.clair :focus-visible{outline-color:var(--prune-vif);} /* sur fond clair, le beige ne se voit pas */
h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:1.04; letter-spacing:-.02em; text-wrap:balance;}
h2{font-size:clamp(38px, 5.6vw, 76px);}
em{font-style:italic; font-weight:300;}
.conteneur{max-width:var(--largeur); margin:0 auto; padding-inline:var(--gouttiere); position:relative;}
@media (min-width: 901px){ .conteneur{padding-inline:72px;} }

/* ---------- Le fil conducteur (signature visuelle) ---------- */
#fil{position:absolute; top:0; left:0; pointer-events:none; z-index:5; overflow:visible;}
#fil .trace{fill:none; stroke:var(--fil); stroke-width:1.5; stroke-linecap:round; opacity:.85;}
#fil .plume{fill:var(--beige); filter:drop-shadow(0 0 8px rgba(219,205,199,.9));}

/* ---------- Chapitres ---------- */
.chapitre{position:relative; height:12px; margin-bottom:30px;} /* plus d'étiquette (demande d'Axel, 12/10) : seulement le rond du fil, dans la marge */
.chapitre .noeud{
  position:absolute; left:-44px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-radius:50%; background:var(--creme); border:1.5px solid var(--fil);
}
.sombre .chapitre .noeud, .prune .chapitre .noeud{background:var(--nuit);}
/* Le fil « remplit » le nœud qu'il traverse (demande d'Axel) : la couleur coule du haut vers le bas, au rythme
   de la plume (--rempli de 0 à 1, posé par js/fil.js), puis le nœud garde un léger halo. */
.chapitre .noeud::after, .sommaire .noeud::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:#DBCDC7;
  clip-path:inset(0 0 calc((1 - var(--rempli, 0)) * 100%) 0); transition:clip-path .45s ease-out;
}
.chapitre .noeud, .sommaire .noeud{transition:box-shadow .5s ease;}
.chapitre .noeud.atteint, .sommaire .noeud.atteint{box-shadow:0 0 10px rgba(219,205,199,.55);}
/* ---------- Boutons ---------- */
.bouton{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:15px; font-weight:500; letter-spacing:.03em;
  text-decoration:none; padding:17px 30px; border-radius:999px; cursor:pointer;
  transition:background .25s, color .25s, border-color .25s, transform .25s;
}
.bouton-plein{background:var(--beige); color:var(--nuit-profond); border:1px solid var(--beige);}
.bouton-ligne{background:transparent; color:var(--sur-sombre); border:1px solid var(--filet-sombre);}
.bouton-sombre{background:var(--nuit); color:var(--creme); border:1px solid var(--nuit);}
/* Survols réservés aux écrans à souris : sur téléphone, ils restaient « collés » après un toucher. */
@media (hover: hover){
  .bouton:hover{transform:translateY(-2px);}
  .bouton-plein:hover{background:var(--creme); border-color:var(--creme);}
  .bouton-ligne:hover{border-color:var(--beige); color:var(--beige);}
  .bouton-sombre:hover{background:var(--prune); border-color:var(--prune);}
}
.fleche{font-family:var(--serif); font-size:18px; line-height:1;}

/* ---------- En-tête ---------- */
.entete{position:absolute; top:0; left:0; right:0; z-index:10;}
.entete .conteneur{display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px;}
.signature{font-family:var(--signature); font-size:46px; line-height:1; color:var(--sur-sombre); text-decoration:none; font-weight:400; white-space:nowrap;}
.nav{display:flex; align-items:center; gap:34px;}
.nav a{font-size:14px; letter-spacing:.05em; text-decoration:none; color:var(--sur-sombre-doux); transition:color .2s; padding-block:4px; white-space:nowrap;}
@media (min-width: 901px) and (max-width: 1180px){ .nav{gap:20px;} .entete .signature{font-size:38px;} } /* écrans moyens : le menu tient sur une ligne */
.nav a:hover{color:var(--sur-sombre);}
.nav a[aria-current="page"]{color:var(--sur-sombre); border-bottom:1px solid var(--beige);}
.nav .nav-contact{color:var(--nuit-profond); background:var(--beige); padding:10px 20px; border-radius:999px; white-space:nowrap;}
.nav .nav-contact:hover{background:var(--creme); color:var(--nuit-profond);}
.nav .nav-contact[aria-current="page"]{color:var(--nuit-profond); border-bottom:0;} /* sur la page Contact, le bouton reste lisible */
/* Bouton de langue FR / EN (site bilingue, 12/10) */
.nav .nav-langue{display:inline-block; flex:none; width:22px; height:22px; padding:0; font-size:0; color:transparent; border-radius:50%; overflow:hidden;
  background:center / cover no-repeat; filter:saturate(.8) brightness(.95); opacity:.85;
  box-shadow:0 0 0 2px var(--nuit-profond), 0 0 0 3px rgba(219,205,199,.45); /* pastille ronde, cerclée d'un fin anneau beige (12/10) */
  transition:opacity .25s ease, filter .25s ease, box-shadow .25s ease, transform .25s ease;}
.nav .nav-langue[hreflang="en"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0,0 v30 h60 v-30 z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0,0 v30 h60 v-30 z' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E");} /* drapeau britannique : version anglaise (demande d'Axel, 12/10) */
.nav .nav-langue[hreflang="fr"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23002654'/%3E%3Crect x='1' width='1' height='2' fill='%23fff'/%3E%3Crect x='2' width='1' height='2' fill='%23CE1126'/%3E%3C/svg%3E");} /* drapeau français : version française */
.nav .nav-langue:hover, .nav .nav-langue:focus-visible{opacity:1; filter:none; transform:scale(1.08); box-shadow:0 0 0 2px var(--nuit-profond), 0 0 0 3px var(--beige);}
/* Bouton du menu mobile (caché sur ordinateur) */
.menu-bouton{display:none; position:fixed; top:18px; right:16px; z-index:50; width:48px; height:48px; place-items:center; cursor:pointer;
  border-radius:50%; border:1px solid var(--filet-sombre); background:rgba(18,21,42,.78); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.menu-bouton span, .menu-bouton span::before{display:block; width:20px; height:1.5px; background:var(--beige); transition:transform .3s ease;}
.menu-bouton span{position:relative; transform:translateY(-3.5px);}
.menu-bouton span::before{content:""; position:absolute; left:0; top:7px;}
.menu-ouvert .menu-bouton span{transform:translateY(0) rotate(45deg);}
.menu-ouvert .menu-bouton span::before{top:0; transform:rotate(-90deg);}
.menu-bouton:focus-visible{outline:2px solid var(--beige); outline-offset:3px;}

/* ---------- Ouverture (page d'accueil) ---------- */
.ouverture{
  position:relative; overflow:hidden; color:var(--sur-sombre);
  background:
    radial-gradient(55% 70% at 80% 35%, rgba(106,58,97,.55) 0%, rgba(69,38,62,0) 65%),
    radial-gradient(50% 60% at 0% 100%, rgba(31,37,71,.95) 0%, rgba(31,37,71,0) 70%),
    var(--nuit-profond);
  padding-top:140px;
}
.ouverture-grille{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; align-items:center;}
.ouverture h1{font-size:clamp(54px, 8.2vw, 128px); line-height:.96; margin:28px 0 34px; letter-spacing:-.035em;}
/* « compréhensibles. » : pas d'italique (demande d'Axel) — mis en valeur par la couleur et un trait du fil qui se dessine dessous. */
.ouverture h1 .accent{position:relative; display:block; width:fit-content; color:var(--beige); padding-bottom:.14em;}
.ouverture h1 .accent::after{
  /* Le trait part sous le mot puis remonte vers le point final de « compréhensibles. » sans le toucher.
     Boîte et dessin en em : le dessin reste calé sur le point quelle que soit la taille du titre. */
  content:""; position:absolute; left:0; right:0; top:.70em; height:.48em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 574 48' preserveAspectRatio='none'%3E%3Cpath d='M3 37 C 130 46, 290 26, 470 31 C 520 33, 546 30, 556 20' fill='none' stroke='%23C9AFA3' stroke-width='2.2' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat left top / 100% 100%;
  clip-path:inset(0 100% 0 0); animation:souligner 1.4s cubic-bezier(.6,.1,.2,1) .5s forwards;
}
@keyframes souligner{to{clip-path:inset(0 0 0 0);}}
@media (prefers-reduced-motion: reduce){
  .ouverture h1 .accent::after{animation:none; clip-path:none;}
}
.ouverture .chapeau{font-size:21px; max-width:32ch; color:var(--sur-sombre-doux); margin-bottom:42px;}
.actions{display:flex; flex-wrap:wrap; gap:14px;}
.actions-liens{align-items:center; gap:28px;} /* un bouton plein suivi d'un lien discret */
.insecable{white-space:nowrap;}
.arche{position:relative; justify-self:end; width:100%; max-width:420px;}
.arche-cadre{position:relative; isolation:isolate;} /* repère du halo et du fil = la photo seule, sans la légende */
/* C — Lumière derrière le portrait : un halo prune, comme un projecteur de scène (demande d'Axel, 09/10). */
.arche-cadre::before{
  content:""; position:absolute; z-index:-1; left:50%; top:42%; width:165%; aspect-ratio:1; transform:translate(-50%, -50%);
  background:radial-gradient(closest-side, rgba(106,58,97,.62), rgba(69,38,62,.28) 55%, rgba(69,38,62,0)); pointer-events:none;
}
/* A — Le fil dessine l'arche au chargement, puis la plume s'allume au bout (demande d'Axel, 09/10).
   Repère du dessin = la photo (300 × 430, même proportion que la figure 3/4.3) ; le fil court à 10 unités autour. */
.arche-fil{position:absolute; left:-4%; top:-2.7907%; width:108%; height:105.5814%; overflow:visible; pointer-events:none; z-index:2;}
.arche-fil path{
  fill:none; stroke:var(--fil); stroke-width:1; stroke-linecap:round; opacity:.9; /* pas de vector-effect : avec pathLength, il fausse la longueur du tracé dans Chrome */
  stroke-dasharray:1; stroke-dashoffset:1; animation:arche-trace 2.4s cubic-bezier(.55,.05,.25,1) 1.1s forwards;
}
.arche-fil circle{fill:var(--beige); filter:drop-shadow(0 0 8px rgba(219,205,199,.9)); opacity:0; animation:arche-plume .5s ease 3.4s forwards;}
.arche-legende{margin:30px auto 0; max-width:34ch; text-align:center; font-size:15px; line-height:1.6; color:var(--sur-sombre-doux); text-wrap:balance;}
.arche-legende strong{display:block; margin-bottom:4px; font-weight:500; color:var(--beige); letter-spacing:.02em;}
/* Même fil autour des photos en arche 4:5 (Le narrateur, Sur scène) — repère 300 × 375. */
.arche-fil.f45{top:-3.2%; height:106.4%;}
/* Arche plus bas dans la page : le dessin attend l'arrivée du visiteur (js/arche.js). */
.arche-fil.attente path, .arche-fil.attente circle{animation:none;}
.arche-fil.au-defilement path{animation-delay:.15s;}
.arche-fil.au-defilement circle{animation-delay:2.45s;}
@keyframes arche-trace{to{stroke-dashoffset:0;}}
@keyframes arche-plume{to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .arche-fil path{animation:none; stroke-dashoffset:0;}
  .arche-fil circle{animation:none; opacity:1;}
}
.arche figure{position:relative; border-radius:999px 999px 0 0; overflow:hidden; aspect-ratio:3/4.3; background:#cfcfd2;}
.arche img{width:100%; height:100%; object-fit:cover; object-position:center 8%;}
.arche figcaption{position:absolute; left:0; right:0; bottom:0; padding:60px 22px 18px; background:linear-gradient(to top, rgba(18,21,42,.85), rgba(18,21,42,0)); font-family:var(--signature); font-size:38px; color:var(--sur-sombre); text-align:center;}
.bandeau-preuve{margin-top:72px; border-top:1px solid var(--filet-sombre);}
.bandeau-preuve .conteneur{display:flex; flex-wrap:wrap; gap:10px 44px; padding-block:24px; font-size:14px; color:var(--sur-sombre-doux); letter-spacing:.02em;}
.bandeau-preuve strong{font-weight:500; color:var(--beige);}
.bandeau-preuve a{color:inherit; text-decoration:underline; text-decoration-color:var(--filet-sombre); text-underline-offset:4px; transition:color .2s, text-decoration-color .2s;}
.bandeau-preuve a:hover{color:var(--beige); text-decoration-color:var(--beige);}

/* ---------- Sections ---------- */
section{padding-block:clamp(64px, 7vw, 104px); position:relative;} /* resserré le 10/10 (demande d'Axel : moins d'espaces vides entre les sections) */
.clair{background:var(--creme); color:var(--encre);}
.sombre{background:var(--nuit); color:var(--sur-sombre);}
.prune{background:var(--prune); color:var(--sur-sombre);}

/* ---------- Le sommaire (page d'accueil) ---------- */
.sommaire-titre{max-width:16ch; margin-bottom:64px;}
.sommaire{list-style:none; border-top:1px solid var(--filet-clair);}
.sommaire li{position:relative; border-bottom:1px solid var(--filet-clair);}
.sommaire a{
  display:grid; grid-template-columns:90px 1fr auto; gap:32px; align-items:center;
  padding:44px 8px; text-decoration:none; color:var(--encre);
  transition:padding .35s ease, background .35s ease;
}
.sommaire .noeud{position:absolute; left:-44px; top:50%; width:11px; height:11px; margin-top:-6px; border-radius:50%; background:var(--creme); border:1.5px solid var(--fil);}
.sommaire .num{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--prune-vif); line-height:1;}
.sommaire .titre{display:block; font-family:var(--serif); font-weight:300; font-size:clamp(32px, 4.2vw, 58px); line-height:1.05; letter-spacing:-.02em;}
.sommaire .resume{display:block; margin-top:12px; font-size:17px; color:var(--texte-doux); max-width:56ch;}
.sommaire .prix{font-weight:500; color:var(--prune); white-space:nowrap;}
.sommaire .aller{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--filet-clair);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:22px; color:var(--nuit);
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
@media (hover: hover){ /* pas de survol « collé » après un toucher */
  .sommaire a:hover{padding-left:24px; background:rgba(219,205,199,.22);}
  .sommaire a:hover .aller{background:var(--nuit); color:var(--creme); border-color:var(--nuit); transform:rotate(-45deg);}
}
.sommaire .titre em{color:var(--prune-vif);} /* violet affiché d'emblée, pas seulement au survol (demande d'Axel) */

/* ---------- Pied de page ---------- */
.pied{background:var(--nuit-profond); color:var(--sur-sombre-doux); font-size:14px; padding-block:48px; position:relative; z-index:6;}
.pied .conteneur{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px 32px; align-items:center;}
.pied .signature{font-size:34px;}
.pied nav{display:flex; flex-wrap:wrap; gap:8px 28px;}
.pied nav a{position:relative; text-decoration:none; color:var(--sur-sombre-doux);}
/* Zone de toucher de 44 px (lien de 23 px) : déborde de 14 px sur les côtés (moitié de l'écart) et plus vers le bas que vers le haut,
   pour que la ligne suivante (peinte par-dessus) ne capte jamais un toucher posé sur le texte de la ligne précédente. */
.pied nav a::after{content:""; position:absolute; inset:-7px -14px -14px;}
.pied nav a:hover{color:var(--beige);}
.pied .pied-reseaux{position:relative; display:inline-flex; color:var(--sur-sombre-doux); border-radius:50%; transition:color .25s ease, transform .25s ease;}
.pied .pied-reseaux::after{content:""; position:absolute; inset:-7px;} /* zone de toucher de 44 px autour de l'icône de 30 px */
.pied .pied-reseaux svg{display:block;}
.pied .pied-reseaux:hover{color:#0A66C2; transform:translateY(-2px);} /* bleu LinkedIn officiel au survol */
.pied .pied-reseaux:focus-visible{outline:2px solid var(--beige); outline-offset:3px;}
.pied .identite{flex-basis:100%; border-top:1px solid var(--filet-sombre); padding-top:20px; text-align:center;}
details{background:var(--nuit-profond); color:var(--sur-sombre-doux); border-top:1px solid var(--filet-sombre); position:relative; z-index:6;}
details summary{cursor:pointer; padding-block:18px; font-size:14px; letter-spacing:.05em; list-style:none;}
details summary::-webkit-details-marker{display:none;}
details .legal{padding-bottom:40px; font-size:14px; line-height:1.7; max-width:80ch;}
details h2{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.01em; color:var(--sur-sombre); margin:22px 0 6px;}
.a-completer{color:var(--beige);}

/* =====================================================================
   Pages intérieures
   ===================================================================== */

/* ---------- Ouverture de page (pages 2 à 5) ---------- */
.ouverture-page{
  position:relative; overflow:hidden; color:var(--sur-sombre);
  background:
    radial-gradient(50% 80% at 92% 20%, rgba(106,58,97,.55) 0%, rgba(69,38,62,0) 65%),
    var(--nuit-profond);
  padding-top:170px; padding-bottom:clamp(56px, 6vw, 88px);
}
.ouverture-page h1{font-size:clamp(50px, 7.4vw, 112px); line-height:.98; letter-spacing:-.035em; margin:28px 0 32px; max-width:12ch;}
.ouverture-page h1 em{color:var(--beige);}
.ouverture-page .chapeau{font-size:21px; color:var(--sur-sombre-doux); max-width:46ch; margin-bottom:40px;}
.reperes{list-style:none; display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px;}
.reperes li{border:1px solid var(--filet-sombre); border-radius:999px; padding:10px 20px; font-size:15px; color:var(--sur-sombre);}
.reperes li strong{font-weight:500; color:var(--beige);}
.lien-discret{display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--sur-sombre-doux); text-decoration:none; border-bottom:1px solid var(--filet-sombre); padding-bottom:3px;}
.lien-discret:hover{color:var(--beige); border-color:var(--beige);}

/* ---------- Le point de départ ---------- */
.depart h2{max-width:13ch;}
.depart .grille{display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:56px; align-items:start;}
.depart p{font-size:21px; color:var(--texte-doux); max-width:42ch;}
.citation{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(26px, 2.9vw, 38px); line-height:1.28; color:var(--prune);
  border-left:1px solid var(--fil); padding-left:32px;
}

/* ---------- Le chemin (méthode) ---------- */
.chemin-section h2{max-width:14ch;}
.chemin-section .intro{color:var(--sur-sombre-doux); font-size:21px; max-width:44ch; margin-top:26px;}
.etapes{list-style:none; margin-top:88px; display:grid; grid-template-columns:repeat(5, 1fr); gap:30px; position:relative; counter-reset:etape;}
.etapes::before{content:""; position:absolute; top:7px; left:0; right:0; height:1px; background:var(--fil); opacity:.7;}
.etapes li{position:relative; padding-top:44px; counter-increment:etape;}
.etapes li::before{content:""; position:absolute; top:0; left:0; width:15px; height:15px; border-radius:50%; background:var(--nuit); border:1.5px solid var(--beige);}
.etapes li::after{content:counter(etape, decimal-leading-zero); position:absolute; top:-6px; left:26px; font-family:var(--serif); font-style:italic; font-size:16px; color:var(--beige);}
.etapes h3{font-size:clamp(24px, 2.2vw, 30px); margin-bottom:12px; color:var(--sur-sombre);}
.etapes p{font-size:16px; color:var(--sur-sombre-doux); line-height:1.6;}
/* ---------- « Le chemin » animé (js/chemin.js, demande d'Axel 10/10 ; v2 : cartes, tracé lumineux, slides + fil) ---------- */
.visuellement-cache{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.chemin-section .scene{--doux:cubic-bezier(.22,1,.36,1); margin-top:56px; display:grid; grid-template-columns:1.45fr 1fr; gap:28px 56px; align-items:center;}
.scene-visuel{position:relative; opacity:0; transform:scale(.94); transition:opacity .9s ease, transform 1s var(--doux);}
.scene.a-l-ecran .scene-visuel{opacity:1; transform:none;}
.scene-visuel::before{content:""; position:absolute; inset:-8% -4%; background:radial-gradient(closest-side, rgba(106,58,97,.38), rgba(106,58,97,0)); pointer-events:none;}
.scene-visuel svg{position:relative; display:block; width:100%; height:auto; overflow:visible;}
.scene svg *{transition:opacity .7s ease, fill .8s ease, stroke .8s ease;}
.scene .s-objectif, .scene .s-audience circle, .scene .s-histoire, .scene .s-fantome, .scene .s-plume, .scene .s-faits circle{opacity:0;}
/* 1 — l'objectif */
.s-anneau{fill:none; stroke:var(--beige); stroke-width:1; transform-origin:430px 118px; animation:scene-pouls 2.4s ease-out infinite;}
.s-cible{fill:var(--beige); filter:drop-shadow(0 0 9px rgba(219,205,199,.85));}
.scene.vu1 .s-objectif{opacity:1;}
.scene .etiquette-objectif{fill:var(--beige); font:400 14px var(--sans); letter-spacing:.02em; transition:opacity .5s ease;}
.scene.vu4 .etiquette-objectif{opacity:0;} /* « Arrivée » et « Départ » prennent le relais au même endroit */
/* 2 — l'audience */
.scene .s-audience circle{fill:transparent; stroke:var(--sur-sombre-doux); stroke-width:1.2; transition-delay:calc(var(--i) * 70ms);}
.scene.vu2 .s-audience circle{opacity:.85;}
.scene.compris .s-audience circle{fill:var(--beige); stroke:var(--beige); opacity:1; filter:drop-shadow(0 0 6px rgba(219,205,199,.7)); transition-delay:calc(var(--i) * 45ms);}
/* 3 — l'histoire : le jeu de cartes */
.scene .carte{transform-origin:240px 560px; transform:rotate(0deg) translateY(40px); opacity:0;
  transition:transform 1.1s var(--doux) calc(var(--i) * 90ms), opacity .7s ease calc(var(--i) * 90ms);}
.scene.vu3 .carte{transform:rotate(var(--rot)) translateX(var(--dx)); opacity:1;}
.scene.vu3 .carte-elue{transform:rotate(var(--rot)) translateX(var(--dx)) translateY(-16px); transition-delay:calc(var(--i) * 90ms), calc(var(--i) * 90ms);}
.carte rect{fill:#191D3D; stroke:rgba(219,205,199,.22); stroke-width:1;}
.carte-elue rect{fill:#2C1C2E; stroke:var(--beige); filter:drop-shadow(0 0 10px rgba(219,205,199,.35));}
.carte-num{fill:var(--sur-sombre-doux); font:400 11px var(--sans); letter-spacing:.12em;}
.carte-titre{fill:var(--sur-sombre); font:italic 300 21px var(--serif);}
.carte-elue .carte-num, .carte-elue .carte-titre{fill:var(--beige);}
/* la carte choisie part se poser au point de départ ; les autres retombent */
.scene.choisie .carte{opacity:0; transform:rotate(var(--rot)) translateX(var(--dx)) translateY(40px); transition:transform .9s ease, opacity .6s ease;}
.scene.choisie .carte-elue{transform:translate(-170px, -229px) scale(.08); opacity:0; transition:transform 1.2s cubic-bezier(.6,.05,.3,1), opacity .4s ease .95s;}
.scene.vu4 .carte{transition:none;}
.s-etincelle{fill:var(--beige); filter:drop-shadow(0 0 10px rgba(219,205,199,.9));}
.s-rayons{stroke:var(--beige); stroke-width:1.4; stroke-linecap:round; fill:none; transform-origin:70px 300px; animation:scene-rayons 3s ease-in-out infinite;}
.scene.choisie .s-histoire{opacity:1; transition-delay:1s;}
.scene.vu4 .s-histoire{transition-delay:0s;}
/* 4 — le chemin : tracé lumineux, jalons et légendes */
.scene .s-fantome{fill:none; stroke:rgba(219,205,199,.1); stroke-width:2;}
.scene.vu4 .s-fantome{opacity:1;}
.scene .s-trace{fill:none; stroke:url(#chemin-degrade); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  transition:stroke-dashoffset 1.8s var(--doux) .2s, opacity .5s ease;}
.scene.vu4 .s-trace{stroke-dashoffset:0; opacity:1;}
.scene.vu5 .s-trace{opacity:.28;}
.scene .jalon{fill:var(--sur-sombre); opacity:0; transform:scale(0); transform-box:fill-box; transform-origin:center;
  transition:opacity .6s ease var(--d), transform .6s var(--doux) var(--d);}
.scene .jalon-depart{fill:none; stroke:#8A4A7E; stroke-width:2;}
.scene.vu4 .jalon{opacity:1; transform:scale(1);}
.scene .legende{fill:var(--sur-sombre-doux); font:400 13px var(--sans); letter-spacing:.02em; opacity:0; transition:opacity .6s ease var(--d);}
.scene .legende-arrivee{fill:var(--beige);}
.scene.vu4 .legende{opacity:1;}
.scene.vu5 .legende{opacity:.35; transition-delay:0s;}
/* 5 — le fil conducteur : les slides s'effacent, le fil les traverse */
.slide rect{fill:#151938; stroke:rgba(219,205,199,.42); stroke-width:1;}
.slide line{stroke:rgba(219,205,199,.22); stroke-width:3; stroke-linecap:round;}
.slide line.ligne-forte{stroke:rgba(219,205,199,.42);}
.scene .slide{opacity:0; transform:translateY(10px); transition:opacity .6s ease calc(var(--i) * .15s), transform .6s var(--doux) calc(var(--i) * .15s);}
.scene.vu5 .slide{opacity:1; transform:none;}
.scene.efface .slide{opacity:.22; transition:opacity 1s ease;}
.scene.tri .slide{opacity:0;}
.scene .s-fil{fill:none; stroke:var(--beige); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; transition:opacity .4s ease;}
.scene.vu5 .s-fil{opacity:1;}
.s-plume{fill:var(--beige); filter:drop-shadow(0 0 10px rgba(219,205,199,.95));}
.scene.plume-active .s-plume{opacity:1; transition:opacity .3s ease;}
/* final — raconter, c'est sélectionner (10/10 : fin clarifiée à la demande d'Axel) */
/* 1. on fait le ménage : il ne reste que le fil, le départ, l'arrivée et le public */
.scene.vu6 .legende, .scene.vu6 .jalon, .scene.vu6 .s-fantome, .scene.vu6 .s-trace, .scene.vu6 .slide{opacity:0; transition:opacity .6s ease;}
/* 2. tout ce qui est vrai apparaît */
.scene .s-faits circle{fill:var(--sur-sombre-doux); transition-delay:calc(.5s + var(--i) * 30ms);}
.scene.vu6 .s-faits circle{opacity:.5;}
/* 3. on sélectionne : quatre éléments rejoignent le fil et s'allument, les autres s'effacent */
.scene .s-faits circle.elu{transform:translate(var(--dx), var(--dy)); transform-box:view-box;
  transition:opacity .7s ease .9s, transform 1.2s var(--doux), fill .8s ease, filter .8s ease;}
.scene.tri .s-faits circle{opacity:0; transition-duration:1.2s; transition-delay:calc(var(--i) * 15ms);}
.scene.tri .s-faits circle.elu{opacity:1; transform:none; fill:var(--beige); filter:drop-shadow(0 0 8px rgba(219,205,199,.9));
  transition:opacity .4s ease, transform 1.2s var(--doux) calc(var(--i) * 160ms), fill .8s ease calc(var(--i) * 160ms), filter .8s ease calc(var(--i) * 160ms);}
/* fin de boucle et pause */
.scene.fondu .scene-visuel, .scene.fondu .scene-texte{opacity:0;}
.scene-texte{transition:opacity .8s ease;}
.scene.en-pause *{animation-play-state:paused !important;}
/* Scène hors de l'écran (js/chemin.js) : les animations en boucle s'arrêtent, sans toucher au bouton pause du visiteur. */
.scene.hors-champ .s-anneau, .scene.hors-champ .s-rayons{animation-play-state:paused;}
@keyframes scene-pouls{0%{transform:scale(.6); opacity:.9;} 100%{transform:scale(1.6); opacity:0;}}
@keyframes scene-rayons{0%, 100%{transform:scale(.85) rotate(0deg); opacity:.55;} 50%{transform:scale(1.05) rotate(22deg); opacity:1;}}
/* Texte de l'étape en cours */
.scene-texte{min-height:230px; display:flex; flex-direction:column; justify-content:center;}
.scene-texte > *{transition:opacity .32s ease, transform .32s ease;}
.scene-texte.sortie > *{opacity:0; transform:translateY(8px);}
.scene-num{font-family:var(--serif); font-style:italic; font-size:24px; color:var(--beige); min-height:1.2em;}
.scene-titre{font-family:var(--serif); font-weight:300; font-size:clamp(36px, 4vw, 56px); line-height:1.05; letter-spacing:-.02em; color:var(--sur-sombre); margin-top:10px; text-wrap:balance;}
.scene-texte.final .scene-titre{color:var(--beige);}
.scene-phrase{margin-top:18px; font-size:19px; line-height:1.6; color:var(--sur-sombre-doux); max-width:34ch;}
/* Piste des étapes + pause */
.scene-commandes{grid-column:1 / -1; display:flex; align-items:center; gap:24px; margin-top:8px;}
.scene-piste{list-style:none; flex:1; display:grid; grid-template-columns:repeat(5, 1fr); position:relative;}
.scene-piste::before{content:""; position:absolute; left:6px; right:6px; top:6px; height:1px; background:var(--filet-sombre);}
.scene-piste button{all:unset; cursor:pointer; display:flex; flex-direction:column; gap:12px; align-items:flex-start; position:relative; padding-bottom:4px;}
/* Zone de toucher : 15 px au-dessus et au-dessous du point ; en largeur, le bouton (point + nom) — élargie sur mobile, où le nom est masqué. */
.scene-piste button::after{content:""; position:absolute; top:-15px; bottom:-15px; left:0; right:0;}
.scene-piste .point{width:11px; height:11px; border-radius:50%; border:1.5px solid var(--fil); background:var(--nuit); transition:background .4s ease, box-shadow .4s ease;}
.scene-piste .nom{font-size:14px; color:var(--sur-sombre-doux); transition:color .3s ease;}
.scene-piste li.fait .point{background:var(--fil);}
.scene-piste li.actuel .point{background:var(--beige); border-color:var(--beige); box-shadow:0 0 10px rgba(219,205,199,.8);}
.scene-piste li.actuel .nom, .scene-piste button:hover .nom{color:var(--sur-sombre);}
.scene-piste button:focus-visible{outline:2px solid var(--beige); outline-offset:6px; border-radius:4px;}
.scene-pause{all:unset; position:relative; cursor:pointer; flex:none; width:40px; height:40px; border-radius:50%; border:1px solid var(--filet-sombre); display:grid; place-items:center; transition:border-color .2s;}
.scene-pause::after{content:""; position:absolute; inset:-3px; border-radius:50%;} /* zone de toucher de 44 px, le rond reste à 40 px */
.scene-pause:hover{border-color:var(--beige);}
.scene-pause:focus-visible{outline:2px solid var(--beige); outline-offset:3px;}
.scene-pause span{width:10px; height:12px; border-left:3px solid var(--beige); border-right:3px solid var(--beige); box-sizing:border-box;}
.scene.en-pause .scene-pause span{width:0; height:0; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent var(--beige); margin-left:3px;}
.selection{margin-top:80px; text-align:center;}
.selection strong{display:block; font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(40px, 6vw, 84px); line-height:1; color:var(--beige); letter-spacing:-.02em;}
.selection span{display:block; margin-top:20px; color:var(--sur-sombre-doux); font-size:18px;}

/* ---------- L'arrivée (accompagnement) ---------- */
.arrivee .grille{display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:start;}
.arrivee h2{max-width:14ch; margin-bottom:30px;}
.arrivee .grille > div > p{color:var(--texte-doux); font-size:20px; max-width:46ch;}
.seances{list-style:none; margin-top:48px;}
.seances li{display:grid; grid-template-columns:64px 1fr; gap:18px; align-items:baseline; padding:22px 0; border-top:1px solid var(--filet-clair); font-size:19px;}
.seances li:last-child{border-bottom:1px solid var(--filet-clair);}
.seances .num{font-family:var(--serif); font-style:italic; font-size:28px; color:var(--prune-vif); line-height:1;}
.seances b{font-weight:500;}
.offre{
  background:var(--nuit); color:var(--sur-sombre); padding:48px 44px; border-radius:28px;
  position:sticky; top:32px; overflow:hidden;
}
.offre::before{content:""; position:absolute; width:340px; height:340px; right:-140px; top:-160px; border-radius:50%; background:radial-gradient(circle, rgba(106,58,97,.7), rgba(106,58,97,0) 70%);}
.offre > *{position:relative;}
.offre h3{font-size:34px; margin:14px 0 34px;}
.tarif{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:20px 0; border-top:1px solid var(--filet-sombre);}
.tarif span{font-size:16px; color:var(--sur-sombre-doux);}
.tarif b{font-family:var(--serif); font-weight:300; font-size:46px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.tarif b small{font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.08em; color:var(--beige); margin-left:4px;}
.offre .mentions{font-size:14px; color:var(--sur-sombre-doux); border-top:1px solid var(--filet-sombre); padding-top:20px; margin-bottom:32px;}
.offre .mentions p + p{margin-top:6px;}
.offre .bouton{width:100%; justify-content:center;}
.transformation{display:grid; grid-template-columns:1fr auto 1fr; gap:36px; align-items:center;}
.transformation .etat{font-size:15px; font-weight:500; letter-spacing:.01em; color:var(--texte-doux); display:block; margin-bottom:10px;}
.transformation p{font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(24px, 2.6vw, 34px); line-height:1.25;}
.transformation .avant p{color:var(--texte-doux);}
.transformation .apres p{color:var(--prune);}
.transformation .vers{font-family:var(--serif); font-size:56px; color:var(--fil); line-height:1;}
/* Avant / Après en tête de page, avant le 01 — espaces resserrés au-dessus et en dessous (demande d'Axel, 10/10). */
.depart{padding-top:clamp(56px, 6vw, 88px);}
.depart .transformation{margin:0 0 clamp(56px, 6vw, 80px); padding-bottom:clamp(40px, 4.5vw, 56px); border-bottom:1px solid var(--filet-clair); align-items:start;}
.depart .transformation .vers{align-self:center;} /* « Avant » et « Après » alignés en haut, la flèche reste au milieu */

/* ---------- Le narrateur ---------- */
.narrateur .grille{display:grid; grid-template-columns:.9fr 1.1fr; gap:84px; align-items:center;}
.narrateur figure{position:relative;}
.narrateur figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 22%; border-radius:999px 999px 0 0;} /* 6 — l'arche, forme signature des photos (10/10) */
.narrateur h2{max-width:13ch; margin-bottom:34px;}
.narrateur .anecdote{font-family:var(--serif); font-style:italic; font-weight:300; color:var(--sur-sombre); font-size:clamp(22px, 2.2vw, 27px); line-height:1.4; margin-bottom:24px;}
.narrateur p{color:var(--sur-sombre-doux); font-size:19px; max-width:52ch;}
.preuves{list-style:none; margin-top:48px; display:grid; gap:14px;}
.preuves li{display:grid; grid-template-columns:72px 1fr; gap:20px; align-items:center; padding:14px; border:1px solid var(--filet-sombre); border-radius:18px;}
.preuves img{width:72px; height:72px; object-fit:cover; object-position:30% 70%; border-radius:12px;}
.preuves .pastille{width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:rgba(219,205,199,.1); font-family:var(--serif); font-size:11px; color:var(--beige); text-align:center; line-height:1.35;}
.preuves strong{display:block; font-weight:500; color:var(--sur-sombre); font-size:16.5px;}
.preuves span{font-size:15px; color:var(--sur-sombre-doux);}
.preuves a{color:var(--beige); text-underline-offset:3px;}

/* ---------- Page Conférence : ouverture sur photo de scène ---------- */
.ouverture-scene{position:relative; color:var(--sur-sombre); background:var(--nuit-profond); overflow:hidden;}
.ouverture-scene .scene{position:relative;}
.ouverture-scene .scene img{width:100%; height:auto;}
/* Léger flou sur la diapositive VCV Cloud (demande d'Axel) — en % de la photo d'origine, jamais recadrée. */
/* Mesuré sur la photo (2000×1333) : texte de la diapositive de 8 % à 32 % de la hauteur, tête d'Axel à partir de 34 %. */
.ouverture-scene .flou{position:absolute; left:28%; top:8%; width:33%; height:24.5%; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:4px;}
.ouverture-scene .scene::after{content:""; position:absolute; inset:0; background:
  linear-gradient(to right, rgba(18,21,42,.88) 0%, rgba(18,21,42,.55) 45%, rgba(18,21,42,0) 75%),
  linear-gradient(to top, rgba(18,21,42,.97) 0%, rgba(18,21,42,.6) 38%, rgba(18,21,42,.15) 70%, rgba(18,21,42,.55) 100%);}
.ouverture-scene .texte{position:absolute; left:0; right:0; bottom:0; z-index:2; padding-bottom:clamp(48px, 6vw, 96px);}
.ouverture-scene h1{font-size:clamp(46px, 6.4vw, 100px); line-height:.98; letter-spacing:-.035em; margin:24px 0 26px; max-width:14ch;}
.ouverture-scene h1 em{color:var(--beige);}
.ouverture-scene .chapeau{font-size:20px; color:var(--sur-sombre-doux); max-width:46ch; margin-bottom:32px;}

/* ---------- Page Conférence : les trois questions ---------- */
.questions-intro{font-size:21px; color:var(--texte-doux); max-width:44ch; margin-top:26px;}
.questions{list-style:none; margin-top:72px; counter-reset:question; border-top:1px solid var(--filet-clair);}
.questions li{counter-increment:question; display:grid; grid-template-columns:90px 1fr; gap:24px; align-items:baseline; padding:36px 0; border-bottom:1px solid var(--filet-clair);}
.questions li::before{content:counter(question, decimal-leading-zero); font-family:var(--serif); font-style:italic; font-size:30px; color:var(--prune-vif);}
.questions p{font-family:var(--serif); font-weight:300; font-size:clamp(30px, 3.8vw, 52px); line-height:1.08; letter-spacing:-.02em;}
.test{margin-top:72px; display:grid; grid-template-columns:auto 1fr; gap:16px 40px; align-items:baseline;}
.test span{font-size:15px; font-weight:500; letter-spacing:.01em; color:var(--texte-doux);}
.test strong{font-family:var(--serif); font-weight:300; font-style:italic; font-size:clamp(34px, 4.6vw, 64px); line-height:1.05; color:var(--prune); letter-spacing:-.02em;}
.questions-intro + .questions-intro{margin-top:14px;}
.passerelle{margin-top:56px; padding-top:28px; border-top:1px solid var(--filet-clair); font-size:18px; color:var(--texte-doux);}
.passerelle a{color:var(--prune); font-weight:500; text-decoration:underline; text-decoration-color:var(--fil); text-underline-offset:4px;}
.passerelle a:hover{color:var(--prune-vif); text-decoration-color:var(--prune-vif);}

/* ---------- Page Conférence : sur scène ---------- */
.sur-scene .grille{display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:center;}
.sur-scene figure img{width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 35%; border-radius:999px 999px 0 0;}
.sur-scene figure{position:relative;}
.sur-scene h2{max-width:13ch; margin-bottom:28px;}
.sur-scene p{color:var(--sur-sombre-doux); font-size:19px; max-width:48ch;}

/* ---------- Page Laboratoire : vidéo ---------- */
/* La vidéo YouTube ne se charge qu'au clic (aucun cookie YouTube avant lecture). */
.video{position:relative; aspect-ratio:16/9; border-radius:50% 50% 0 0 / 22% 22% 0 0; overflow:hidden; background:var(--nuit); box-shadow:0 40px 80px -50px rgba(31,37,71,.55);}
.video button{all:unset; position:absolute; inset:0; cursor:pointer; display:block;}
.video button img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.video button::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(18,21,42,.55), rgba(18,21,42,0) 55%);}
/* En bas à gauche plutôt qu'au centre : ne masque pas le titre incrusté dans la miniature. */
.video .lecture{
  position:absolute; left:32px; bottom:32px; z-index:2; width:84px; height:84px;
  border-radius:50%; background:var(--beige); display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease, background .3s;
}
.video .lecture::before{content:""; margin-left:6px; border-style:solid; border-width:15px 0 15px 24px; border-color:transparent transparent transparent var(--nuit-profond);}
.video button:hover img{transform:scale(1.03);}
.video button:hover .lecture{transform:scale(1.08); background:var(--creme);}
.video button:focus-visible{outline:2px solid var(--beige); outline-offset:-6px; border-radius:50% 50% 0 0 / 22% 22% 0 0;}
.video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-legende{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px 32px; margin-top:28px;}
.video-legende h2{font-size:clamp(28px, 3.4vw, 44px);}
.video-legende span{font-size:15px; color:var(--texte-doux);}
.video-legende a{color:var(--prune-vif); font-weight:500; text-underline-offset:3px;}
.video-legende span a{margin-left:18px;}

/* ---------- Page Contact ---------- */
.contact-page .grille{display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start;}
.ensuite{list-style:none; counter-reset:etape; display:grid; gap:0; margin-top:8px;}
.ensuite li{counter-increment:etape; display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:baseline; padding:20px 0; border-top:1px solid var(--filet-clair); font-size:18px;}
.ensuite li:last-child{border-bottom:1px solid var(--filet-clair);}
.ensuite li::before{content:counter(etape); font-family:var(--serif); font-style:italic; font-size:26px; color:var(--prune-vif); line-height:1;}
.direct{margin-top:40px; font-size:16px; color:var(--texte-doux);}
/* Adresse e-mail masquée : bouton qui l'affiche (js/email.js). */
.reveler-email{position:relative; font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline dotted; text-underline-offset:3px;}
.reveler-email::after{content:""; position:absolute; inset:-11px -4px;} /* zone de toucher d'au moins 44 px de haut, le texte garde sa taille */
.reveler-email:hover{text-decoration-style:solid;}
.reveler-email:focus-visible, .email-revele:focus-visible{outline:2px solid var(--prune-vif); outline-offset:3px; border-radius:2px;}
.direct .reveler-email, .direct .email-revele{color:var(--prune); font-weight:500; text-underline-offset:3px;}
.offre .reveler-email, .offre .email-revele{color:var(--beige);}
/* Page Conférence — 03 : modération, présentation, voix off (demande d'Axel, 10/10). */
.services-intro{font-size:21px; color:var(--texte-doux); max-width:46ch; margin-top:26px;}
.services{list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:0 48px; margin-top:64px;}
.services li{border-top:1px solid var(--filet-clair); padding-top:28px;}
.services h3{font-family:var(--serif); font-weight:300; font-size:clamp(28px, 3vw, 40px); line-height:1.1; letter-spacing:-.02em; color:var(--encre);}
.services h3 em{color:var(--prune-vif);}
.services p{margin-top:14px; font-size:17px; color:var(--texte-doux); max-width:34ch;}
.services-pied{margin-top:56px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px;}
.services-pied span{font-size:15px; font-weight:400; letter-spacing:.01em; color:var(--texte-doux);}
.formulaire .champ[hidden]{display:none;} /* champs Ville / Pays masqués quand ils ne servent pas */

.formulaire{
  display:grid; grid-template-columns:1fr 1fr; gap:26px 28px;
  background:#fff; border:1px solid var(--filet-clair); border-radius:28px; padding:48px;
  box-shadow:0 40px 80px -60px rgba(31,37,71,.45);
}
.formulaire .champ{display:flex; flex-direction:column; gap:8px;}
.formulaire .large{grid-column:1 / -1;}
.formulaire label, .formulaire legend{font-size:14.5px; font-weight:500; letter-spacing:.01em; color:var(--texte-doux);}
.formulaire input, .formulaire textarea, .formulaire select{
  font:inherit; font-size:17px; color:var(--encre); background:transparent;
  border:0; border-bottom:1px solid var(--filet-clair); padding:10px 0; border-radius:0;
}
.formulaire input:focus, .formulaire textarea:focus, .formulaire select:focus{outline:none; border-bottom-color:var(--prune-vif);}
.formulaire textarea{resize:vertical; min-height:110px;}
/* Bulle « i » à côté d'une question */
.formulaire .libelle{display:flex; align-items:center; gap:10px;}
.formulaire .info{
  position:relative; flex:none; display:grid; place-items:center; width:22px; height:22px;
  border:1px solid var(--fil); border-radius:50%; background:transparent; color:var(--prune-vif);
  font-family:var(--serif); font-style:italic; font-size:14px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.formulaire .info::after{content:""; position:absolute; inset:-11px;} /* zone de toucher de 44 px */
.formulaire .info[aria-expanded="true"]{background:var(--prune); border-color:var(--prune); color:var(--creme);}
@media (hover: hover){ .formulaire .info:hover{background:var(--prune); border-color:var(--prune); color:var(--creme);} } /* au toucher, seul l'état ouvert colore la bulle */
.formulaire .info:focus-visible{outline:2px solid var(--prune-vif); outline-offset:3px;}
.formulaire .aide{font-size:15px; line-height:1.55; color:var(--texte-doux); background:var(--creme); border-radius:12px; padding:12px 16px; max-width:62ch;}
.formulaire .facultatif{font-weight:300; font-size:13px;}
/* Date : calendrier natif (téléphone et ordinateur) + saisie au clavier */
.formulaire input[type="date"]{-webkit-appearance:none; appearance:none; display:block; width:100%; min-height:47px; text-align:left;}
.formulaire input[type="date"]::-webkit-date-and-time-value{text-align:left;}
.formulaire input[type="date"].vide::-webkit-datetime-edit{color:#A3A4B3;}
.formulaire input[type="date"]::-webkit-calendar-picker-indicator{
  width:20px; height:20px; padding:4px; cursor:pointer; opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A3A61' stroke-width='1.5' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.formulaire input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.formulaire fieldset{border:0; display:flex; flex-wrap:wrap; gap:12px; grid-column:1 / -1;}
.formulaire fieldset legend{width:100%; margin-bottom:10px;}
.formulaire .choix{position:relative;}
.formulaire .choix input{position:absolute; opacity:0; width:1px; height:1px;}
.formulaire .choix span{display:inline-block; padding:12px 22px; border:1px solid var(--filet-clair); border-radius:999px; font-size:15px; color:var(--texte-doux); cursor:pointer; transition:all .2s;}
.formulaire .choix input:checked + span{border-color:var(--nuit); color:var(--creme); background:var(--nuit);}
.formulaire .choix input:focus-visible + span{outline:2px solid var(--prune-vif); outline-offset:3px;}
.formulaire [aria-invalid="true"]{border-bottom-color:#A33A3A;}
/* Champ à corriger bien visible sur téléphone : trait rouge de 2 px (padding réduit d'autant, pas de saut) et libellé en rouge. */
.formulaire input[aria-invalid="true"], .formulaire textarea[aria-invalid="true"], .formulaire select[aria-invalid="true"]{border-bottom-width:2px; border-bottom-color:#A33A3A; padding-bottom:9px;} /* rouge même pendant la saisie (le premier champ fautif reçoit le focus) */
.formulaire .champ.invalide label{color:#A33A3A;} /* classe posée par le script : navigateurs sans :has() */
.formulaire .champ:has([aria-invalid="true"]) label{color:#A33A3A;} /* règle séparée : un :has() non compris annulerait toute la liste */
/* Champ piège invisible pour les robots (jamais rempli par un humain). */
.formulaire .piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.formulaire .verification{grid-column:1 / -1; min-height:65px;}
.formulaire .envoi{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:20px;}
.formulaire .envoi small{font-size:13px; color:var(--texte-doux); max-width:42ch;}
.formulaire .envoi small a{color:inherit;}
.formulaire .message{grid-column:1 / -1; font-size:15px; color:var(--prune);}
.formulaire .message.erreur{color:#A33A3A;}

/* ---------- Appel final (bas des pages intérieures) ---------- */

/* ---------- Mobile ---------- */
@media (max-width: 900px){
  /* Menu mobile (js/menu.js) : plein écran, ouvert par le bouton rond en haut à droite */
  .nav{position:fixed; inset:0; z-index:40; flex-direction:column; align-items:flex-start; justify-content:center; gap:18px;
    padding:96px 32px 56px; background:var(--nuit-profond); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility 0s linear .35s;
    /* Écran bas (iPhone SE, paysage) : le menu défile ; « safe » évite que le centrage coupe les premiers liens (ligne au-dessus = repli). */
    overflow-y:auto; justify-content:safe center;}
  .menu-ouvert .nav{opacity:1; visibility:visible; transition:opacity .35s ease;}
  .menu-ouvert, .menu-ouvert body{overflow:hidden;}
  .nav a{font-family:var(--serif); font-weight:300; font-size:40px; line-height:1.1; letter-spacing:-.02em; color:var(--sur-sombre); padding-block:2px;}
  .nav a[aria-current="page"]{color:var(--beige); border-bottom:0;}
  .nav .nav-contact{font-family:var(--sans); font-weight:500; font-size:17px; letter-spacing:.02em; margin-top:22px; padding:16px 28px;}
  .menu-bouton{display:grid;}
  .nav .nav-langue{width:34px; height:34px; margin-top:16px; padding:0; font-size:0;
    position:relative; overflow:visible;} /* visible : sinon la zone de toucher ci-dessous serait rognée (le rond vient du border-radius) */
  .nav .nav-langue::after{content:""; position:absolute; inset:-5px; border-radius:50%;} /* zone de toucher de 44 px */
  .signature{font-size:36px;}
  .ouverture{padding-top:116px;}
  .ouverture-grille{grid-template-columns:1fr; gap:52px;}
  .ouverture h1{font-size:clamp(36px, 11.2vw, 76px);} /* « compréhensibles. » sans italique doit tenir sur une ligne */
  .arche{justify-self:center; max-width:330px;}
  .bandeau-preuve{margin-top:64px;}
  .chapitre .noeud, .sommaire .noeud{left:-19px;}
  .sommaire a{grid-template-columns:1fr auto; gap:18px; padding:34px 0;}
  .sommaire .num{grid-column:1 / -1; font-size:24px;}
  .sommaire a:hover{padding-left:0; background:none;}
  .sommaire .aller{width:48px; height:48px;}

  .ouverture-page{padding-top:130px;}
  .depart .grille, .arrivee .grille, .narrateur .grille{grid-template-columns:1fr; gap:52px;}
  .etapes{grid-template-columns:1fr; gap:0; margin-top:64px;}
  .chemin-section .scene{grid-template-columns:1fr; gap:20px; margin-top:44px;}
  .scene-texte{min-height:210px;}
  .scene-piste .nom{display:none;}
  .scene-piste button::after{left:-16px; right:-17px;} /* point de 11 px → zone de 44 px ; colonnes d'au moins 41 px à 320 px : pas d'empiètement sur le point voisin */
  .scene .legende{font-size:21px;}
  .scene .etiquette-objectif{font-size:22px;}
  .carte-titre{font-size:24px;}
  .carte-num{font-size:15px;}
  .scene-piste li.actuel .nom{display:block; position:absolute; top:24px; left:0; white-space:nowrap;}
  .scene-commandes{padding-bottom:28px;}
  .etapes::before{top:0; bottom:0; left:7px; right:auto; width:1px; height:auto;}
  .etapes li{padding:0 0 38px 44px;}
  .etapes li::after{top:-4px; left:44px;}
  .etapes h3{margin-top:26px;}
  /* relative, pas static : sinon le halo décoratif de la carte sort du cadre et élargit la page */
  .offre{position:relative; padding:40px 28px;}
  .tarif{flex-wrap:wrap;} /* très petit écran : le prix passe sous le libellé plutôt que d'être rogné par la carte */
  .tarif b{font-size:clamp(30px, 9vw, 40px);}
  .transformation{grid-template-columns:1fr; gap:20px;}
  .transformation .vers{transform:rotate(90deg); justify-self:start;}
  .depart .transformation{margin:0 0 52px; padding-bottom:40px;}
  .depart .transformation .vers{align-self:start;}
  .services{grid-template-columns:1fr; gap:36px; margin-top:44px;}
  .narrateur figure{max-width:440px;}

  /* Conférence : photo entière (le flou reste aligné), texte en dessous */
  .ouverture-scene{padding-top:96px;}
  .ouverture-scene .scene::after{background:linear-gradient(to top, rgba(18,21,42,1) 0%, rgba(18,21,42,0) 40%);}
  .ouverture-scene .texte{position:static; padding-block:8px 72px;}
  .questions li{grid-template-columns:52px 1fr; gap:14px; padding:28px 0;}
  .questions li::before{font-size:22px;}
  .test{grid-template-columns:1fr;}
  .sur-scene .grille{grid-template-columns:1fr; gap:52px;}
  .sur-scene figure{max-width:440px;}
  .video .lecture{width:56px; height:56px; left:16px; bottom:16px;}
  /* minmax(0, 1fr) : une colonne 1fr ne descend pas sous la largeur de son contenu (vérification anti-robot) et élargissait la page. */
  .contact-page .grille{grid-template-columns:minmax(0, 1fr); gap:52px;}
  .formulaire{grid-template-columns:minmax(0, 1fr); padding:30px 22px; border-radius:20px;}
  .video .lecture::before{border-width:11px 0 11px 18px; margin-left:5px;}
}
/* Téléphones étroits (320 à 480 px) : rien ne doit dépasser de l'écran. */
@media (max-width: 480px){
  .insecable{white-space:normal;} /* « comprendriez-vous ? » : l'espace insécable garde le « ? » collé au mot */
}
@media (max-width: 430px){
  .sommaire .prix{white-space:normal;} /* le prix garde ses espaces insécables (« 1 500 € HT ») */
}
@media (max-width: 400px){
  .formulaire{padding:26px 18px;}
}