/* La Voix Dévoilée — feuille unique. Voir DESIGN.md.
   Aucune dépendance, aucune étape de compilation. */

/* ---------- 1. Jetons ---------- */
:root {
  --papier:    #FBF9F6;
  --lin:       #F2EDE7;
  --encre:     #33302E;
  --gris:      #6B6560;
  --grenat:    #762449;   /* prune, échantillonné sur le logo de Morgane */
  --grenat-cl: #9C4A6E;
  --profond:   #2A2523;
  --filet:     #E3DAD2;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pas: 8px;
  --mesure: 62ch;
  --large: 1120px;
  --duree: 700ms;
  --courbe: cubic-bezier(.22,.61,.36,1);
  --hauteur-entete: 77px;   /* 76 px de barre + 1 px de filet */

  --rayon: 12px;            /* arrondi des photos et des cartes */
  --rayon-petit: 4px;       /* boutons, champs, tableaux */
  --ombre-photo: 0 18px 36px -22px rgba(42, 37, 35, .55);
  --ombre-photo-survol: 0 26px 48px -22px rgba(42, 37, 35, .58);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.75 var(--sans);
  font-synthesis-weight: none;
  overflow-x: hidden;
}
img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: var(--grenat); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--grenat-cl); }
:focus-visible { outline: 2px solid var(--grenat); outline-offset: 3px; border-radius: var(--rayon-petit); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--grenat);
  line-height: 1.18;
  margin: 0 0 calc(var(--pas) * 2);
  letter-spacing: .005em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); }
h4 { font-size: 1.15rem; color: var(--encre); }
p  { margin: 0 0 calc(var(--pas) * 2); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--encre); }
blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--filet); margin: calc(var(--pas) * 6) 0; }

.saut-contenu {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--grenat); color: #fff; padding: 12px 20px;
}
.saut-contenu:focus { left: 12px; top: 12px; }

/* ---------- 3. Trame ---------- */
.enveloppe { width: min(100% - 2.5rem, var(--large)); margin-inline: auto; }
.mesure { max-width: var(--mesure); margin-inline: auto; }
.bande { padding: clamp(2.25rem, 4.5vw, 4.5rem) 0; }
/* Deux bandes de même fond qui se suivent forment un même bloc : sans cette
   règle, leurs marges s'additionnent et l'on obtient près de 180 px de vide —
   une vidéo se retrouvait ainsi très loin du texte qu'elle illustre. */
.bande:not(.bande--lin):not(.bande--profond) + .bande:not(.bande--lin):not(.bande--profond),
.bande--lin + .bande--lin,
.bande--profond + .bande--profond { padding-top: 0; }
.bande--lin { background: var(--lin); }
.bande--profond { background: var(--profond); color: #E6DFD9; }
.bande--profond h2, .bande--profond h3 { color: #E8C9D8; }
.centre { text-align: center; }

/* Filet grenat qui ouvre chaque titre de section — la signature du site. */
.titre-section { position: relative; padding-top: calc(var(--pas) * 3); }
.titre-section::before {
  content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 1px;
  background: var(--grenat);
}
.centre .titre-section::before { left: 50%; transform: translateX(-50%); }

/* ---------- 4. En-tête ---------- */
/* Pas de backdrop-filter ici : il emprisonnerait tout descendant en position fixed. */
.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 246, .96);
  border-bottom: 1px solid var(--filet);
}
.entete__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--pas) * 3); min-height: 76px;
  width: min(100% - 2.5rem, 1300px);
}
.marque {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600;
  color: var(--grenat); text-decoration: none; line-height: 1.1; white-space: nowrap;
}
.marque__mot { display: block; }
.marque__mot span {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gris); margin-top: 3px;
}

.menu { display: flex; align-items: center; gap: calc(var(--pas) * 2.5); list-style: none; margin: 0; padding: 0; flex-wrap: nowrap; }
.menu a {
  position: relative; display: inline-block; padding: 6px 0;
  font-size: .7rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--encre); text-decoration: none; white-space: nowrap;
}
.menu a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--grenat); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--courbe);
}
.menu a:hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--grenat); }

.bouton-menu {
  display: none; background: none; border: 0; padding: 10px; cursor: pointer;
  font: inherit; color: var(--encre);
}
.bouton-menu svg { display: block; }

/* Voile mobile : dialog natif, placé hors de l'en-tête. */
#voile-menu {
  border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  background: var(--papier); color: var(--encre);
}
#voile-menu::backdrop { background: rgba(42,37,35,.5); }
.voile__contenu { display: flex; flex-direction: column; height: 100%; padding: calc(var(--pas) * 3); }
.voile__fermer { align-self: flex-end; background: none; border: 0; padding: 12px; cursor: pointer; color: var(--encre); }
.voile__liens { list-style: none; margin: auto 0; padding: 0 calc(var(--pas) * 2); display: grid; gap: calc(var(--pas) * 2.5); }
.voile__liens a { font-family: var(--serif); font-size: 1.7rem; color: var(--grenat); text-decoration: none; }

@media (max-width: 1120px) {
  .menu { display: none; }
  .bouton-menu { display: block; }
}

/* ---------- 5. Bandeau ---------- */
.bandeau { position: relative; isolation: isolate; overflow: hidden; }
.bandeau__image {
  width: 100%; height: clamp(340px, 58vh, 620px); object-fit: cover; object-position: 50% 35%;
  animation: respire 14s var(--courbe) forwards;
}
@keyframes respire { from { transform: scale(1.06); } to { transform: scale(1); } }
.bandeau__voile {
  position: absolute; inset: -2px 0;
  background: linear-gradient(180deg, rgba(42,37,35,.45) 0%, rgba(42,37,35,.22) 38%, rgba(42,37,35,.78) 100%);
}
.bandeau__texte {
  position: absolute; inset: auto 0 0 0; padding: clamp(1.5rem, 4vw, 3.5rem) 0;
  color: #fff; text-align: center;
}
.bandeau__texte h1 { color: #fff; margin-bottom: var(--pas); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.bandeau__texte p { color: rgba(255,255,255,.94); font-size: 1.02rem; max-width: 46ch; margin-inline: auto; }

/* ---------- 6. Boutons ---------- */
.bouton {
  display: inline-block; padding: 14px 30px; border: 1px solid var(--grenat); border-radius: var(--rayon-petit);
  background: var(--grenat); color: #fff; text-decoration: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  transition: background 260ms var(--courbe), color 260ms var(--courbe);
  cursor: pointer; font-family: var(--sans);
}
.bouton:hover { background: transparent; color: var(--grenat); }
.bouton--clair { background: transparent; color: var(--grenat); }
.bouton--clair:hover { background: var(--grenat); color: #fff; }
.bouton--blanc { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.bouton--blanc:hover { background: #fff; color: var(--profond); border-color: #fff; }

/* ---------- 7. Blocs de contenu ---------- */
.bloc { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 860px) {
  .bloc--cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bloc--cote.bloc--inverse > :first-child { order: 2; }
}
.bloc__image { overflow: hidden; border-radius: var(--rayon); box-shadow: var(--ombre-photo); }
.bloc__image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.bloc__image--portrait img { aspect-ratio: 3/4; }

/* 250 px et non 280 : c'est ce qui permet à quatre cartes de tenir sur une
   seule ligne dans la mesure du site, plutôt que de laisser la quatrième
   seule en dessous. En deçà de 260 px de place, la grille replie d'elle-même. */
.cartes { display: grid; gap: calc(var(--pas) * 4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.carte {
  display: flex; flex-direction: column; background: var(--papier);
  border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden;
  box-shadow: var(--ombre-photo);
  transition: border-color 300ms var(--courbe), transform 300ms var(--courbe),
              box-shadow 300ms var(--courbe);
}
.bande--lin .carte { background: #fff; }
.carte:hover, .carte.vu:hover {
  border-color: var(--grenat); transform: translateY(-4px); box-shadow: var(--ombre-photo-survol);
}
.carte img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.carte__corps { padding: calc(var(--pas) * 3); display: flex; flex-direction: column; flex: 1; }
.carte__corps h3 { margin-bottom: var(--pas); }
.carte__corps p { color: var(--gris); font-size: .95rem; }
.carte__lien {
  margin-top: auto; padding-top: calc(var(--pas) * 2);
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; align-self: flex-start;
}
.carte__lien::after { content: " \2192"; }

/* Témoignages */
.temoignage {
  background: var(--papier); border: 1px solid var(--filet); border-radius: var(--rayon);
  padding: clamp(1.75rem, 4vw, 3rem);
}
/* Les témoignages sont longs : centrés, ils deviennent illisibles. */
.temoignage blockquote { max-width: 68ch; margin-inline: auto; }
.temoignage--bref { text-align: center; }
.temoignage--bref blockquote p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.5; color: var(--grenat); }
.temoignage figcaption { max-width: 68ch; margin: calc(var(--pas) * 3) auto 0; text-align: right; }
.bande--lin .temoignage { background: #fff; }
.temoignage p { color: var(--gris); font-size: 1rem; }
.temoignage__signature { font-weight: 600; color: var(--encre); }
.temoignage__role { color: var(--grenat); font-size: .88rem; }
.temoignages-pile { display: grid; gap: calc(var(--pas) * 4); }

/* Listes */
.liste-nette { list-style: none; margin: 0 0 calc(var(--pas) * 3); padding: 0; display: grid; gap: calc(var(--pas) * 1.5); }
.liste-nette li { position: relative; padding-left: calc(var(--pas) * 3); }
.liste-nette li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 1px; background: var(--grenat);
}

/* Tableau (dates et tarifs) */
.tableau-enveloppe { overflow-x: auto; }
table.tarifs { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.tarifs th, table.tarifs td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--filet); vertical-align: top; }
table.tarifs thead th { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
table.tarifs tbody th { font-weight: 600; color: var(--encre); }
table.tarifs td strong { color: var(--grenat); }

/* Vidéos — le sélecteur porte sur le conteneur, pas sur une liste de balises. */
.videos { display: grid; gap: calc(var(--pas) * 4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.video-cadre {
  position: relative; aspect-ratio: 16/9; background: var(--profond);
  border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre-photo);
}
.video-cadre > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 8. Formulaires ---------- */
.champ { display: grid; gap: 6px; margin-bottom: calc(var(--pas) * 2.5); text-align: left; }
.champ label { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ textarea, .champ select {
  font: inherit; font-size: .98rem; color: var(--encre);
  padding: 12px 14px; border: 1px solid var(--filet); border-radius: var(--rayon-petit); background: #fff; width: 100%;
}
.champ input:focus, .champ textarea:focus { border-color: var(--grenat); outline: none; box-shadow: 0 0 0 2px rgba(118,36,73,.16); }
.champ textarea { min-height: 160px; resize: vertical; }
.consentement { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: var(--gris); margin-bottom: calc(var(--pas) * 2.5); text-align: left; }
.consentement input { margin-top: 4px; flex: none; width: auto; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message { padding: 14px 18px; border-radius: var(--rayon-petit); margin-bottom: calc(var(--pas) * 3); font-size: .95rem; text-align: left; }
.message--ok { background: #EDF3ED; border: 1px solid #BBD3BB; color: #2E5233; }
.message--ko { background: #FBEDF2; border: 1px solid #E2BFCE; color: var(--grenat); }

/* ---------- 9. Pied de page ---------- */
.pied { background: var(--profond); color: #C9C1BA; padding: clamp(3rem, 6vw, 5rem) 0 2rem; font-size: .92rem; }
.pied a { color: #E8C9D8; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille { display: grid; gap: calc(var(--pas) * 4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.pied h4 { color: #fff; font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: calc(var(--pas) * 2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied__bas {
  margin-top: calc(var(--pas) * 5); padding-top: calc(var(--pas) * 3);
  border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2);
  justify-content: space-between; font-size: .84rem; color: #9A918A;
}

/* ---------- 10. Apparition au défilement ---------- */
.paraitre { opacity: 0; transform: translateY(22px); transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe); }
.paraitre.vu { opacity: 1; transform: none; }
/* Sans JavaScript, la classe .js n'est jamais posée et tout reste visible. */
html:not(.js) .paraitre { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .paraitre { opacity: 1; transform: none; }
}

/* ---------- 11. Journal et articles ---------- */
.actions { margin-top: calc(var(--pas) * 4); display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2); }
.centre .actions, .actions.centre { justify-content: center; }

.fil { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); margin-bottom: var(--pas); }
.fil a { color: var(--gris); text-decoration: none; }
.fil a:hover { color: var(--grenat); }

.article h1 { margin-bottom: var(--pas); }
.article__meta { color: var(--gris); font-size: .88rem; margin-bottom: calc(var(--pas) * 4); }
.article .chapo {
  font-size: 1.14rem; line-height: 1.7; color: var(--encre);
  padding-left: calc(var(--pas) * 3); border-left: 2px solid var(--grenat);
  margin-bottom: calc(var(--pas) * 5);
}
.bloc-article { margin-bottom: calc(var(--pas) * 4); }
.bloc-article h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-top: calc(var(--pas) * 5); }
.bloc-article.faq dt { font-weight: 600; color: var(--encre); margin-top: calc(var(--pas) * 3); }
.bloc-article.faq dd { margin: var(--pas) 0 0; color: var(--gris); }
.illustration { margin: calc(var(--pas) * 4) 0; }
.illustration img { width: 100%; border-radius: var(--rayon); box-shadow: var(--ombre-photo); }
.illustration figcaption { margin-top: var(--pas); font-size: .86rem; color: var(--gris); }
.illustration .credit { opacity: .75; }

/* ---------- 12. Témoignages filmés et visionneuse ---------- */
.vignettes-video {
  display: grid; gap: calc(var(--pas) * 3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.vignette-video {
  position: relative; display: block; overflow: hidden; border-radius: var(--rayon);
  background: var(--profond); text-decoration: none; color: #fff;
  aspect-ratio: 4/5; box-shadow: var(--ombre-photo);
  transition: transform 320ms var(--courbe), box-shadow 320ms var(--courbe);
}
.vignette-video img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--courbe), opacity 400ms var(--courbe);
}
.vignette-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(42,37,35,.05) 30%, rgba(42,37,35,.88) 100%);
}
.vignette-video:hover img { transform: scale(1.04); }
.vignette-video__lire {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  color: rgba(255,255,255,.92);
  transition: color 260ms var(--courbe), transform 260ms var(--courbe);
}
.vignette-video:hover .vignette-video__lire { color: #fff; transform: scale(1.07); }
.vignette-video__nom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: calc(var(--pas) * 2); color: #fff;
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.2;
}
.vignette-video__nom small {
  display: block; margin-top: 3px; font-family: var(--sans); font-size: .68rem;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.78);
}

#visionneuse {
  border: 0; padding: 0; background: transparent; color: #fff;
  width: fit-content; max-width: 96vw; max-height: 96vh; overflow: visible;
}
#visionneuse::backdrop { background: rgba(20,16,15,.88); }
.visionneuse__cadre { display: grid; place-items: center; }
.visionneuse__cadre video {
  display: block; max-width: min(92vw, 1000px); max-height: 76vh;
  width: auto; height: auto; background: #000; border-radius: var(--rayon-petit);
}
/* « display: block » ci-dessus l'emporte sur le display:none natif de [hidden] :
   sans cette ligne, le lecteur du site reste un rectangle noir derrière la
   vidéo YouTube. Vaut pour les deux cadres. */
.visionneuse__cadre video[hidden],
.visionneuse__externe[hidden] { display: none !important; }
.visionneuse__fermer {
  position: absolute; top: -46px; right: 0; z-index: 2;
  background: none; border: 0; padding: 8px; cursor: pointer; color: #fff;
}
.visionneuse__nom {
  margin: calc(var(--pas) * 2) 0 0; text-align: center;
  font-family: var(--serif); font-size: 1.2rem; color: #fff;
}
.visionneuse__pas { display: flex; justify-content: center; gap: calc(var(--pas) * 2); margin-top: var(--pas); }
.visionneuse__pas button {
  background: none; border: 1px solid rgba(255,255,255,.4); border-radius: var(--rayon-petit);
  color: #fff; padding: 8px 16px; cursor: pointer;
  font: 500 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.visionneuse__pas button:hover { border-color: #fff; background: rgba(255,255,255,.12); }
.visionneuse__pas button[disabled] { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  .visionneuse__fermer { top: -40px; }
  .visionneuse__cadre video { max-height: 64vh; }
}

/* ---------- 13. Accord de l'ouverture (composant jolihero) ---------- */
/* Le composant arrive avec ses propres couleurs : on le branche sur celles
   du site. Rien d'autre n'est touché — sa mécanique reste intacte. */
.jolihero {
  --jh-fond: var(--profond);
  --jh-encre: #F4EFE9;
  --jh-accent: #E8C9D8;
  --jh-voile: 0.46;
  --jh-desat: 0.55;
  /* Un geste garantit désormais sa pleine durée d'affichage quelle que soit la
     vitesse à laquelle on scrolle (voir jolihero.js) : ce réglage n'est donc
     plus qu'une question de goût, pas un correctif de vitesse. Un peu plus
     long que le défaut (1100ms) pour laisser le temps de lire la légende. */
  --jh-glisse: 1700ms;
}
/* site.css colore tous les h1 en prune : illisible sur une photo sombre. */
.jolihero__titre {
  color: var(--jh-encre);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}
.jolihero__sous-titre { font-family: var(--sans); }

/* Les légendes du composant montent à 54 px : trop bavard pour un site sobre.
   L'ombre portée les tient lisibles même sur la photo la plus claire. */
.jolihero__legende {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.95rem);
  line-height: 1.25;
  max-inline-size: 24ch;
  text-shadow: 0 2px 20px rgba(20, 16, 15, .75), 0 1px 3px rgba(20, 16, 15, .6);
}
.jolihero__titre { text-shadow: 0 2px 40px rgba(20, 16, 15, .5); }

/* --- L'en-tête au-dessus de l'ouverture ---------------------------------
   Une barre crème en travers d'une ouverture plein écran ressemble à un
   accident. Tant que la scène occupe l'écran, l'en-tête se fait transparent
   et clair ; dès qu'on l'a quittée, il redevient lui-même. La bascule est
   posée par site.js, et sans JavaScript l'en-tête reste dans son état normal
   — lisible, donc jamais cassé. */
/* L'ouverture passe SOUS l'en-tête : autrement, la bande de 76 px réservée à
   celui-ci laisse voir le fond papier en travers d'une scène plein écran. */
body.avec-ouverture main { margin-top: calc(-1 * var(--hauteur-entete)); }
body.avec-ouverture .jolihero__scene { min-height: 100svh; }

body.avec-ouverture .entete {
  background: transparent;
  border-bottom-color: transparent;
  transition: background 400ms var(--courbe), border-color 400ms var(--courbe);
}
body.avec-ouverture .entete .marque,
body.avec-ouverture .entete .menu a,
body.avec-ouverture .entete .bouton-menu { color: #F4EFE9; }
body.avec-ouverture .entete .marque span { color: rgba(244, 239, 233, .72); }
body.avec-ouverture .entete .menu a::after { background: #F4EFE9; }
body.avec-ouverture .entete,
body.avec-ouverture .entete .marque,
body.avec-ouverture .entete .menu a { text-shadow: 0 1px 14px rgba(20, 16, 15, .55); }

/* état « posé » : on a dépassé l'ouverture */
body.avec-ouverture .entete.entete--pose { background: rgba(251, 249, 246, .96); border-bottom-color: var(--filet); }
body.avec-ouverture .entete--pose .marque,
body.avec-ouverture .entete--pose .menu a,
body.avec-ouverture .entete--pose .bouton-menu { color: var(--encre); text-shadow: none; }
body.avec-ouverture .entete--pose .marque { color: var(--grenat); }
body.avec-ouverture .entete--pose .marque span { color: var(--gris); }
body.avec-ouverture .entete--pose .menu a::after { background: var(--grenat); }
body.avec-ouverture .entete--pose { text-shadow: none; }

/* ---------- 14. Les photos : arrondi, ombre douce, zoom retenu ---------- */
/* Un seul geste pour tout le site : le cadre découpe, la photo grandit un peu.
   Le survol reste discret — 4 % suffisent à donner de la vie sans agiter la page. */
.bloc__image img,
.carte img,
.vignette-video img,
.admin-media img {
  transition: transform 700ms var(--courbe);
}
.bloc__image:hover img,
.carte:hover img,
.admin-media:hover img { transform: scale(1.045); }
.vignette-video:hover, .vignette-video.vu:hover { transform: translateY(-4px); box-shadow: var(--ombre-photo-survol); }

/* Le bandeau et l'ouverture restent à bords perdus : les arrondir les
   transformerait en vignettes, ce n'est pas leur rôle. */
.bandeau, .jolihero { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  .bloc__image:hover img, .carte:hover img, .admin-media:hover img { transform: none; }
}

/* ---------- 15. Les tableaux sur petit écran ---------- */
/* À 390 px, trois colonnes serrées donnent un mot par ligne : illisible.
   En dessous de 640 px, chaque ligne devient une petite fiche, et l'intitulé
   de colonne passe au-dessus de la valeur. */
@media (max-width: 640px) {
  table.tarifs thead { position: absolute; left: -9999px; }
  table.tarifs tr {
    display: block; margin-bottom: 12px; padding: 16px 18px;
    border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--papier);
  }
  .bande--lin table.tarifs tr { background: #fff; }
  table.tarifs th, table.tarifs td { display: block; border: 0; padding: 0 0 10px; }
  table.tarifs tr > :last-child { padding-bottom: 0; }
  table.tarifs tbody th {
    font-family: var(--serif); font-size: 1.2rem; line-height: 1.25;
    color: var(--grenat); text-transform: none; letter-spacing: 0;
    margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--filet);
  }
  table.tarifs tbody th strong { color: inherit; font-weight: 600; }
  table.tarifs tbody th::before { display: none; }
  table.tarifs td::before {
    content: attr(data-libelle); display: block;
    font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gris); margin-bottom: 3px;
  }
}

/* La visionneuse accueille aussi une vidéo hébergée ailleurs (YouTube). */
/* Largeur explicite, et non 100 % : quand le lecteur du site est masqué, ce
   cadre est le seul contenu du dialogue — en pourcentage, il n'aurait aucune
   dimension de référence et toute la visionneuse s'effondrerait à zéro. */
.visionneuse__externe {
  position: relative; width: min(92vw, 1000px); max-height: 76vh; aspect-ratio: 16 / 9;
}
.visionneuse__externe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Une vidéo seule : la grille des témoignages est faite pour des films
   verticaux en trois colonnes. Isolée, la vignette se retrouvait étroite,
   collée à gauche et rognée en portrait. Seule, elle prend donc toute la
   mesure du texte, centrée, au format d'un film. */
.vignettes-video--seule { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.vignettes-video--seule .vignette-video { aspect-ratio: 16 / 9; }
/* Film tourné au téléphone, donc debout : à 760 px de large il ferait plus de
   1300 px de haut. On le ramène à une largeur de portrait. */
.vignettes-video--debout { max-width: 400px; }
.vignettes-video--debout .vignette-video { aspect-ratio: 9 / 16; }