/* Cal Fishing — Anthony Cal, moniteur-guide de pêche dans les Hautes-Alpes.
   Identité : une plongée dans Serre-Ponçon. Le fond passe du calcaire des rives à la nuit du lac (Serre-Ponçon compris :
   ni bleu canard ni bleu marine, qu'Anthony n'aimait pas, 30/10/2026) ;
   une jauge de profondeur descend avec la page, comme sur un sondeur. Spectral (titres) et Geologica (texte). */

@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/spectral-300.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap; src: url('../fonts/spectral-300-italique.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/spectral-400.woff2') format('woff2'); }
@font-face { font-family: 'Geologica'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('../fonts/geologica-300-600.woff2') format('woff2'); }

/* Les couleurs changent en douceur d'une section à l'autre. */
@property --fond { syntax: '<color>'; inherits: true; initial-value: #f3f0e8; }
@property --texte { syntax: '<color>'; inherits: true; initial-value: #0e1b26; }
@property --doux { syntax: '<color>'; inherits: true; initial-value: #4f5c66; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #13777e; }
@property --trait { syntax: '<color>'; inherits: true; initial-value: rgba(14, 27, 38, 0.14); }
@property --carte { syntax: '<color>'; inherits: true; initial-value: #fbf9f4; }

:root {
  --calcaire: #f3f0e8;
  --galet: #e7e1d5;
  --nuit: #0a1824;
  --nuit-profonde: #06111a;
  --turquoise: #13777e;
  --turquoise-clair: #6fd0cf;
  --bleu-cal: #004aad;
  --blanc: #f7f6f2;

  --titres: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --texte-police: 'Geologica', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --marge: clamp(16px, 5vw, 64px);
  --entete: 72px;
  --rayon: 6px;
  --doux-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Les ambiances. Sans animation, chaque section porte la sienne ; avec, c'est la page entière qui change. */
html:not(.fond-anime) [data-fond='calcaire'], html.fond-anime[data-fond='calcaire'] {
  --fond: var(--calcaire); --texte: #0e1b26; --doux: #4f5c66; --accent: #13777e; --trait: rgba(14, 27, 38, 0.14); --carte: #fbf9f4;
}
html:not(.fond-anime) [data-fond='galet'], html.fond-anime[data-fond='galet'] {
  --fond: var(--galet); --texte: #0e1b26; --doux: #4b5862; --accent: #106d73; --trait: rgba(14, 27, 38, 0.16); --carte: #f6f2ea;
}
html:not(.fond-anime) [data-fond='nuit'], html.fond-anime[data-fond='nuit'] {
  --fond: var(--nuit); --texte: #eef1ee; --doux: rgba(238, 241, 238, 0.68); --accent: var(--turquoise-clair); --trait: rgba(238, 241, 238, 0.16); --carte: rgba(255, 255, 255, 0.05);
}
html:not(.fond-anime) [data-fond] { background-color: var(--fond); color: var(--texte); }
html.fond-anime { transition: --fond 0.9s ease, --texte 0.9s ease, --doux 0.9s ease, --accent 0.9s ease, --trait 0.9s ease, --carte 0.9s ease; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--nuit); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background-color: var(--fond);
  color: var(--texte);
  font-family: var(--texte-police);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--turquoise-clair); color: var(--nuit); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--blanc); color: var(--nuit); border-radius: 999px; }
.evitement:focus { top: 12px; }
.sans-coupure { white-space: nowrap; }

.enveloppe { width: 100%; max-width: calc(1240px + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.section { position: relative; padding-block: clamp(88px, 11vw, 168px); }

/* ---------- Textes ---------- */
.titre {
  font-family: var(--titres);
  font-weight: 300;
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.titre--moyen { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.mot { font-style: italic; color: var(--accent); }
.etiquette {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 1.6em;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent);
}
.etiquette::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.grand-texte {
  font-family: var(--titres); font-weight: 300;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.4;
  color: var(--texte);
}
.journee__texte p:not(.grand-texte), .lac__grille p:not(.grand-texte), .anthony__texte p:not(.grand-texte):not(.signature) { color: var(--doux); max-width: 34em; }

/* Les titres découpés restent invisibles le temps du découpage (évite un clignement). */
.js [data-split]:not(.est-decoupe) { opacity: 0; }
.ligne { padding-bottom: 0.08em; margin-bottom: -0.08em; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.35s var(--doux-ease), color 0.35s var(--doux-ease), border-color 0.35s var(--doux-ease), transform 0.35s var(--doux-ease);
}
.bouton--plein { background: var(--turquoise-clair); color: var(--nuit); }
.bouton--plein:hover { background: var(--blanc); }
.section[data-fond='calcaire'] .bouton--plein, .section[data-fond='galet'] .bouton--plein { background: var(--nuit); color: var(--blanc); }
.bouton--clair { border-color: currentColor; background: transparent; }
.bouton--clair:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.lien-fleche { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--accent); }
.lien-fleche::after { content: '→'; transition: transform 0.35s var(--doux-ease); }
.lien-fleche:hover::after { transform: translateX(5px); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  height: var(--entete); padding-inline: var(--marge);
  color: var(--texte);
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--trait);
  transition: transform 0.5s var(--doux-ease), background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.entete.sur-photo { background: transparent; color: var(--blanc); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.entete.cache { transform: translateY(-101%); }
.progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.marque { display: flex; flex: none; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marque img { width: 40px; height: 40px; border-radius: 50%; }
.marque__nom { white-space: nowrap; font-family: var(--titres); font-size: 1.3rem; letter-spacing: 0.02em; }
.menu ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.menu a:not(.bouton) { white-space: nowrap; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; position: relative; padding-block: 6px; }
.menu a:not(.bouton)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--doux-ease); }
.menu a:not(.bouton):hover::after { transform: scaleX(1); transform-origin: left; }
.menu__appel { display: none; }
.entete__appel { white-space: nowrap; min-height: 42px; padding: 0 20px; }
.burger { display: none; }

@media (max-width: 1160px) {
  .entete { gap: 12px; }
  .entete__appel { display: none; }
  .burger {
    display: inline-flex; align-items: center; gap: 10px;
    height: 42px; padding: 0 4px 0 12px; border: 0; background: none; cursor: pointer;
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  }
  .burger__traits { position: relative; width: 22px; height: 10px; }
  .burger__traits::before, .burger__traits::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform 0.4s var(--doux-ease), top 0.4s var(--doux-ease); }
  .burger__traits::before { top: 0; }
  .burger__traits::after { top: 9px; }
  .ouvert .burger__traits::before { top: 4.5px; transform: rotate(45deg); }
  .ouvert .burger__traits::after { top: 4.5px; transform: rotate(-45deg); }
  .menu {
    position: fixed; inset: 0; z-index: -1;
    display: flex; flex-direction: column; justify-content: center; gap: 40px;
    padding: calc(var(--entete) + 24px) var(--marge) 48px;
    background: var(--nuit); color: var(--blanc);
    opacity: 0; visibility: hidden; transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .menu ul { flex-direction: column; gap: 6px; }
  .menu a:not(.bouton) { font-family: var(--titres); font-size: clamp(2rem, 9vw, 2.8rem); letter-spacing: 0; text-transform: none; }
  .menu a:not(.bouton)::after { display: none; }
  .menu__appel { display: inline-flex; align-self: flex-start; }
  .entete.ouvert { color: var(--blanc); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entete.ouvert .menu { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
}
@media (max-width: 380px) { .marque__nom { font-size: 1.15rem; } .burger__texte { display: none; } }

/* ---------- Jauge de profondeur (ordinateur) ---------- */
.jauge { display: none; }
@media (min-width: 1100px) {
  .jauge {
    display: block; position: fixed; z-index: 40; right: 26px; top: 50%;
    width: 14px; height: 44vh; transform: translateY(-50%);
    color: var(--texte); opacity: 0.55; pointer-events: none;
    transition: color 0.4s ease, opacity 0.4s ease;
  }
  .jauge.sur-photo { color: var(--blanc); opacity: 0.7; }
  .jauge__graduation {
    position: absolute; inset: 0 0 0 auto; width: 10px;
    background:
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 8)) right / 10px 100% no-repeat,
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px calc(100% / 40)) right / 5px 100% no-repeat;
    border-right: 1px solid currentColor;
  }
  .jauge__curseur { position: absolute; right: 0; top: 0; width: 18px; height: 1px; background: var(--accent); }
  .jauge.sur-photo .jauge__curseur { background: var(--blanc); }
  .jauge__valeur { position: absolute; right: 24px; top: -0.7em; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; font-variant-numeric: tabular-nums; }
}

/* ---------- Haut de page ---------- */
.ouverture {
  position: relative; display: flex; align-items: flex-end;
  min-height: 100vh; min-height: 100svh; padding: calc(var(--entete) + 40px) 0 clamp(56px, 9vh, 104px);
  color: var(--blanc); overflow: hidden; isolation: isolate;
  background: var(--nuit);
}
.ouverture__media { position: absolute; inset: 0; z-index: -1; }
.ouverture__image, .ouverture__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ouverture__video { opacity: 0; transition: opacity 1.2s ease; }
.ouverture__video.lit { opacity: 1; }
.ouverture__voile {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(6, 17, 26, 0.5), transparent 24%),
    linear-gradient(to top, rgba(6, 17, 26, 0.82) 0%, rgba(6, 17, 26, 0.35) 42%, rgba(6, 17, 26, 0.05) 70%),
    linear-gradient(to right, rgba(6, 17, 26, 0.45), transparent 60%);
}
.ouverture__texte { width: 100%; max-width: calc(1240px + 2 * var(--marge)); margin-inline: auto; padding-inline: var(--marge); }
.surtitre { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.92; margin-bottom: 1.4em; }
.ouverture__titre {
  max-width: 13.5em;
  font-family: var(--titres); font-weight: 300;
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 6rem); line-height: 1.01; letter-spacing: -0.015em;
}
.ouverture__titre .mot { color: var(--turquoise-clair); }
.ouverture__chapo { max-width: 32em; margin: 1.6em 0 2.2em; font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.2rem); opacity: 0.92; }
.ouverture__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ouverture .bouton--clair:hover { background: var(--blanc); color: var(--nuit); border-color: var(--blanc); }
.ouverture__suite { position: absolute; left: 50%; bottom: 22px; width: 1px; height: 46px; overflow: hidden; transform: translateX(-50%); }
.ouverture__suite span { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, var(--blanc)); animation: descente 2.4s var(--doux-ease) infinite; }
@keyframes descente { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (max-width: 640px) {
  .ouverture__suite { display: none; }
  .ouverture__voile {
    background:
      linear-gradient(to bottom, rgba(6, 17, 26, 0.5), transparent 20%),
      linear-gradient(to top, rgba(6, 17, 26, 0.88) 0%, rgba(6, 17, 26, 0.6) 55%, rgba(6, 17, 26, 0.12) 85%);
  }
}

/* La section qui suit monte par-dessus le haut de page, avec des coins arrondis. */
.journee { margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--fond); z-index: 1; }

/* ---------- Une sortie avec moi ---------- */
.journee__grille { display: grid; gap: 40px; }
@media (min-width: 900px) { .journee__grille { grid-template-columns: 5fr 6fr; gap: 8vw; align-items: end; } }
.atouts { display: grid; gap: 0; margin-top: clamp(64px, 8vw, 112px); }
.atouts li { display: grid; gap: 6px; padding: 26px 0; border-top: 1px solid var(--trait); color: var(--doux); }
.atouts__titre { font-family: var(--titres); font-size: 1.5rem; color: var(--texte); line-height: 1.2; }
@media (min-width: 760px) { .atouts { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- Vous êtes au bon endroit si… ---------- */
.pour-vous { padding-top: 0; }
.pour-vous__grille { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .pour-vous__grille { grid-template-columns: 5fr 6fr; gap: 7vw; } }
.cadre { overflow: hidden; border-radius: var(--rayon); }
.cadre .rideau { overflow: hidden; height: 100%; }
.cadre img { width: 100%; height: 100%; object-fit: cover; }
.pour-vous__photo { aspect-ratio: 4 / 5; }
.pour-vous__photo img { object-position: 22% center; }
.coches { margin-top: 36px; }
.coches li {
  position: relative; padding: 18px 0 18px 46px;
  border-top: 1px solid var(--trait);
  font-family: var(--titres); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.35;
}
.coches li:last-child { border-bottom: 1px solid var(--trait); }
.coches li::before { content: ''; position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin-top: -12px; border: 1px solid var(--accent); border-radius: 50%; transition: background-color 0.5s var(--doux-ease); }
.coches li::after {
  content: ''; position: absolute; left: 8px; top: 50%; width: 7px; height: 12px; margin-top: -8px;
  border: solid var(--fond); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) scale(0.4); opacity: 0;
  transition: transform 0.5s var(--doux-ease), opacity 0.3s ease;
}
html:not(.js) .coches li::before, .coches li.cochee::before, .mouvement-reduit .coches li::before { background: var(--accent); }
html:not(.js) .coches li::after, .coches li.cochee::after, .mouvement-reduit .coches li::after { transform: rotate(45deg) scale(1); opacity: 1; }
.coches__fin { font-style: italic; color: var(--accent); }

/* ---------- Les sorties ---------- */
.sorties__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; margin-bottom: clamp(44px, 6vw, 80px); }
.sorties__entete .titre { max-width: 11em; }
.choix { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--trait); border-radius: 999px; }
.choix__legende { padding: 0 10px 0 14px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--doux); }
.choix__option { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 0.86rem; transition: background-color 0.35s ease, color 0.35s ease; }
.choix__option[aria-pressed='true'] { background: var(--texte); color: var(--fond); }
@media (max-width: 420px) { .choix__legende { display: none; } }
.cartes { display: grid; gap: clamp(18px, 2vw, 28px); }
@media (min-width: 700px) { .cartes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cartes { grid-template-columns: repeat(3, 1fr); } }
.carte { display: flex; flex-direction: column; background: var(--carte); border-radius: var(--rayon); overflow: hidden; }
.carte__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.carte__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--doux-ease); }
.carte:hover .carte__photo img { transform: scale(1.04); }
.carte__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.4vw, 32px); }
.carte__corps > p:not(.carte__lieu):not(.carte__note) { color: var(--doux); font-size: 0.96em; }
.carte__lieu { margin-bottom: 0.6em; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.carte__titre { font-family: var(--titres); font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem); line-height: 1.1; margin-bottom: 0.5em; }
.tarifs { margin: auto 0 0; padding-top: 22px; }
.tarifs div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--trait); }
.tarifs dt { font-size: 0.9rem; color: var(--doux); }
.tarifs dd { margin: 0; font-family: var(--titres); font-size: 1.3rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte__note { margin: 10px 0 0; font-size: 0.84rem; color: var(--doux); }
.sorties__suite { margin-top: clamp(36px, 4vw, 56px); font-family: var(--titres); font-size: 1.35rem; }
.sorties__suite a { color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ---------- Serre-Ponçon ---------- */
.lac { padding-top: 0; }
.lac__panorama { height: clamp(320px, 58vw, 780px); border-radius: 0; margin-bottom: clamp(64px, 8vw, 120px); }
.lac__grille { display: grid; gap: 36px; }
@media (min-width: 900px) { .lac__grille { grid-template-columns: 5fr 6fr; gap: 8vw; } }
.milieux { display: grid; gap: 40px; margin-top: clamp(64px, 8vw, 112px); }
@media (min-width: 760px) { .milieux { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.milieu__photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--rayon); margin-bottom: 22px; }
.milieu__photo img { width: 100%; height: 100%; object-fit: cover; }
.milieu h3 { font-family: var(--titres); font-size: 1.55rem; margin-bottom: 0.35em; }
.milieu p { color: var(--doux); font-size: 0.96em; }

/* ---------- Le bateau ---------- */
.bateau__grille { display: grid; gap: 56px; align-items: center; }
@media (min-width: 900px) { .bateau__grille { grid-template-columns: 5fr 6fr; gap: 7vw; } }
.bateau__texte .grand-texte { margin: 1.4em 0 2em; }
.fiche div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--trait); }
@media (min-width: 560px) { .fiche div { grid-template-columns: 9.5em 1fr; gap: 20px; } }
.fiche dt { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); padding-top: 0.3em; }
.fiche dd { margin: 0; color: var(--doux); }
.bateau__photos { position: relative; padding-bottom: 18%; }
.bateau__photo--grande { aspect-ratio: 16 / 10; }
.bateau__photo--petite { position: absolute; right: -2%; bottom: 0; width: 56%; aspect-ratio: 4 / 3; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6); }

/* ---------- Le film ---------- */
.film__entete { margin-bottom: clamp(36px, 4vw, 56px); }
.film__lecteur { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--rayon); background: #000; }
.film__image, .film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__video { object-fit: contain; background: #000; }
.film__lecteur::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 17, 26, 0.7), transparent 55%); pointer-events: none; transition: opacity 0.5s ease; }
.film__lecteur.lecture::after { opacity: 0; }
.film__lire {
  position: absolute; left: clamp(18px, 4vw, 48px); bottom: clamp(18px, 4vw, 44px); z-index: 1;
  display: flex; align-items: center; gap: 18px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--blanc); text-align: left;
  font-family: var(--titres); font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem); line-height: 1.15;
}
.film__duree { display: block; font-family: var(--texte-police); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; margin-top: 6px; }
.film__rond { display: grid; place-items: center; flex: none; width: clamp(56px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); transition: background-color 0.4s ease, color 0.4s ease, transform 0.5s var(--doux-ease); }
.film__rond svg { margin-left: 3px; }
.film__lire:hover .film__rond { background: var(--blanc); color: var(--nuit); transform: scale(1.06); }
.film__lecteur.lecture .film__lire, .film__lecteur.lecture .film__image { display: none; }

/* ---------- Anthony ---------- */
.anthony__grille { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .anthony__grille { grid-template-columns: 6fr 5fr; gap: 7vw; } }
.anthony__photo { aspect-ratio: 4 / 5; }
.anthony__texte .grand-texte { margin-top: 1.4em; }
.signature { font-family: var(--titres); font-style: italic; font-size: 2.2rem; color: var(--accent); margin-top: 0.6em; }

/* ---------- Les deux galeries ---------- */
.galerie__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.galerie__entete .titre { max-width: 12em; }
.galerie__chapo { max-width: 22em; color: var(--doux); font-family: var(--titres); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.4; }
.agrandir { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--rayon); background: none; overflow: hidden; cursor: zoom-in; position: relative; }
.agrandir img { -webkit-user-drag: none; user-select: none; transition: transform 1.2s var(--doux-ease), opacity 0.6s ease; }
.agrandir:hover img { transform: scale(1.035); }
.agrandir::after {
  content: ''; position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(6, 17, 26, 0.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 2v12M2 8h12' stroke='%23f7f6f2' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(0.8); transition: opacity 0.4s ease, transform 0.5s var(--doux-ease);
}
.agrandir:hover::after, .agrandir:focus-visible::after { opacity: 1; transform: none; }

/* Mes grands poissons : un carrousel qui déborde à droite, chaque photo dans son format. */
.galerie--records { padding-top: clamp(16px, 3vw, 48px); }
.carrousel__commandes { display: flex; align-items: center; gap: 10px; }
.carrousel__compteur { margin: 0 14px 0 0; font-family: var(--titres); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.carrousel__sur { font-size: 1rem; color: var(--doux); }
.carrousel__fleche {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 1px solid var(--trait); border-radius: 50%; background: none; cursor: pointer;
  transition: background-color 0.35s var(--doux-ease), color 0.35s var(--doux-ease), border-color 0.35s var(--doux-ease), opacity 0.35s ease;
}
.carrousel__fleche:hover:not(:disabled) { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.carrousel__fleche:disabled { opacity: 0.35; cursor: default; }
.carrousel { --bord: max(var(--marge), calc((100% - 1240px) / 2)); }
.carrousel__piste {
  --h: clamp(280px, 64vh, 680px);
  display: flex; gap: clamp(12px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: var(--bord); scroll-padding-inline: var(--bord);
  scrollbar-width: none; position: relative;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__piste.glisse { scroll-snap-type: none; cursor: grabbing; }
.carrousel__piste.glisse .agrandir { cursor: grabbing; }
.carrousel__photo { flex: none; scroll-snap-align: start; }
.carrousel__photo .agrandir { width: auto; height: auto; }
.carrousel__photo img { width: auto; height: var(--h); max-width: min(86vw, 1100px); object-fit: cover; }
.carrousel--actif .carrousel__photo:not(.actif) img { opacity: 0.5; }
.legende { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); }
.carrousel__piste, .mur { counter-reset: photo; }
.legende::before { counter-increment: photo; content: '0' counter(photo); font-family: var(--titres); font-size: 1.1rem; letter-spacing: 0; color: var(--accent); }
.carrousel__barre { position: relative; height: 1px; margin: clamp(28px, 3vw, 40px) var(--bord) 0; background: var(--trait); }
.carrousel__barre span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0.125); transform-origin: left; transition: transform 0.4s var(--doux-ease); }
.galerie__pied { display: flex; justify-content: flex-end; margin-top: clamp(22px, 2.6vw, 34px); }
@media (max-width: 640px) {
  .carrousel__piste { --h: calc(86vw * 0.75); }
  .galerie__pied { justify-content: flex-start; }
  .carrousel__compteur { font-size: 1.5rem; margin-right: auto; }
  .carrousel__commandes { width: 100%; }
  .carrousel__fleche { width: 46px; height: 46px; }
}

/* Les grands poissons pris en guidage : une mosaïque, deux grandes photos en quinconce. */
.mur { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(8px, 1.2vw, 18px); }
.mur__photo { display: flex; flex-direction: column; }
.mur__photo .agrandir { flex: none; height: auto; aspect-ratio: 4 / 3; }
.mur__photo--grande, .mur__photo--moitie { grid-column: span 2; }
.mur__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.mur .legende { margin-top: 10px; }
@media (min-width: 760px) {
  .mur { grid-template-columns: repeat(12, 1fr); }
  .mur__photo--grande .agrandir { flex: 1; min-height: 0; aspect-ratio: auto; }
  .mur__photo--moitie .agrandir { aspect-ratio: 3 / 2; }
  .mur__photo:nth-child(1) { grid-area: 1 / 1 / 3 / 9; }
  .mur__photo:nth-child(2) { grid-area: 1 / 9 / 2 / 13; }
  .mur__photo:nth-child(3) { grid-area: 2 / 9 / 3 / 13; }
  .mur__photo:nth-child(4) { grid-area: 3 / 1 / 4 / 5; }
  .mur__photo:nth-child(5) { grid-area: 4 / 1 / 5 / 5; }
  .mur__photo:nth-child(6) { grid-area: 3 / 5 / 5 / 13; }
  .mur__photo:nth-child(7) { grid-area: 5 / 1 / 6 / 7; }
  .mur__photo:nth-child(8) { grid-area: 5 / 7 / 6 / 13; }
}

/* La visionneuse : une photo en grand, sur la nuit du lac. */
.visionneuse {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--nuit-profonde); color: var(--blanc); overflow: hidden;
}
.visionneuse::backdrop { background: transparent; }
.visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; animation: apparition 0.4s ease; }
@keyframes apparition { from { opacity: 0; } }
.visionneuse__haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px var(--marge); }
.visionneuse__titre { margin: 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247, 246, 242, 0.7); }
.visionneuse__titre span { font-family: var(--titres); font-size: 1.1rem; letter-spacing: 0; color: var(--turquoise-clair); margin-right: 10px; }
.visionneuse__scene { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; padding: 0 var(--marge); touch-action: pan-y; }
.visionneuse__scene img { max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 4px; transition: opacity 0.3s ease; }
.visionneuse__scene img.charge { opacity: 0; }
.visionneuse__legende { margin: 0; padding: 14px var(--marge) calc(18px + env(safe-area-inset-bottom)); text-align: center; font-family: var(--titres); font-size: 1.15rem; color: rgba(247, 246, 242, 0.85); }
.visionneuse button { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(247, 246, 242, 0.3); border-radius: 50%; background: rgba(6, 17, 26, 0.4); color: var(--blanc); cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease; }
.visionneuse button:hover { background: var(--blanc); color: var(--nuit); }
.visionneuse__fleche { position: absolute; top: 50%; margin-top: -26px; z-index: 1; }
.visionneuse__fleche--avant { left: calc(var(--marge) / 2); }
.visionneuse__fleche--apres { right: calc(var(--marge) / 2); }
@media (min-width: 900px) { .visionneuse__scene { padding: 0 calc(var(--marge) + 64px); } }
@media (max-width: 640px) { .visionneuse__fleche { display: none !important; } }

/* ---------- Contact ---------- */
.contact__grille { display: grid; gap: 56px; }
@media (min-width: 960px) { .contact__grille { grid-template-columns: 5fr 6fr; gap: 7vw; align-items: start; } }
.contact__texte .grand-texte { margin: 1.4em 0 2em; color: var(--doux); }
.contact__liens { display: flex; flex-wrap: wrap; gap: 12px; }
.formulaire { padding: clamp(24px, 3.4vw, 48px); border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--carte); }
.formulaire__apercu { margin-bottom: 26px; padding: 12px 16px; border-radius: 4px; background: rgba(111, 208, 207, 0.12); color: var(--accent); font-size: 0.86rem; }
.champ { display: grid; gap: 6px; margin-bottom: 22px; }
.champs-duo { display: grid; gap: 0 22px; }
@media (min-width: 560px) { .champs-duo { grid-template-columns: 1fr 1fr; } }
.champ label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); }
.facultatif { text-transform: none; letter-spacing: 0; font-weight: 300; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 46px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: transparent;
  font-size: 1rem; transition: border-color 0.3s ease;
}
.champ textarea { resize: vertical; min-height: 110px; }
.champ select { appearance: none; -webkit-appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236fd0cf' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.champ select option { color: #0e1b26; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--doux); opacity: 0.6; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--accent); }
.champ.erreur input, .champ.erreur textarea { border-bottom-color: #ff9c8a; }
.champ__erreur { font-size: 0.84rem; color: #ffb3a6; }
.formulaire__envoyer { width: 100%; margin-top: 8px; }
.formulaire__retour { margin-top: 18px; color: var(--accent); }
.formulaire__retour:empty { display: none; }

/* ---------- Pied de page ---------- */
.pied { padding: clamp(64px, 8vw, 104px) 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--trait); }
.pied__grille { display: grid; gap: 36px; color: var(--doux); font-size: 0.94rem; }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 2fr 1fr 1fr; gap: 6vw; } }
.pied__marque { font-family: var(--titres); font-size: 2rem; color: var(--texte); margin-bottom: 0.4em; }
.pied__liens li { margin-bottom: 8px; }
.pied__liens a { text-decoration: none; }
.pied__liens a:hover { color: var(--texte); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--trait); font-size: 0.8rem; color: var(--doux); }
.pied__bas a { text-decoration: none; letter-spacing: 0.06em; }
.pied__bas a:hover { color: var(--texte); }

/* ---------- Formulaire : piège à robots (invisible) et note sur les données ---------- */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulaire__note { margin-top: 16px; font-size: 0.8rem; color: var(--doux); }
.formulaire__envoyer:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Mentions légales et confidentialité ---------- */
.entete__retour { white-space: nowrap; min-height: 42px; padding: 0 18px; }
.legal { padding-top: calc(var(--entete) + clamp(56px, 8vw, 112px)); }
.legal__in { max-width: calc(46em + 2 * var(--marge)); }
.legal .titre { margin-bottom: clamp(32px, 4vw, 56px); }
.legal h2 { scroll-margin-top: calc(var(--entete) + 24px); margin: 2.2em 0 0.7em;font-family: var(--titres); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.25; }
.legal p { color: var(--doux); overflow-wrap: anywhere; }
.legal strong { color: var(--texte); font-weight: 500; }
.legal a { color: var(--accent); }
.legal__refus { color: var(--doux); font-size: 0.94rem; }
.legal__refus:empty { display: none; }

/* ---------- Bouton d'appel sur téléphone ---------- */
.appel-mobile { display: none; }
@media (max-width: 760px) {
  .appel-mobile {
    position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px;
    border-radius: 999px; background: var(--turquoise-clair); color: var(--nuit); text-decoration: none;
    font-size: 0.8rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
    box-shadow: 0 14px 34px -10px rgba(6, 17, 26, 0.55);
    transform: translateY(160%); transition: transform 0.6s var(--doux-ease);
  }
  html:not(.js) .appel-mobile, .appel-mobile.visible { transform: none; }
  .pied { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ---------- Sans animation ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .ouverture__suite { display: none; }
}