/* AM2 Productions — styles du site (DA « Classement des maillots »)
   Mobile-first. Toutes les valeurs viennent de tokens.css. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-fond);
  color: var(--c-bitume);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.5;
}
body.nav-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--c-bitume); }
a:hover { color: var(--c-bleu-depart); }
:focus-visible { outline: 3px solid var(--c-bleu-depart); outline-offset: 3px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--c-jaune); color: var(--c-bitume);
  padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 18px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- Typo utilitaires ---------- */
.mono {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.display {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: var(--lh-display);
}
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -.01em;
}

/* ---------- Liseré arc-en-ciel ---------- */
.rainbow { display: flex; flex-direction: column; height: var(--rainbow-h); }
.rainbow span { flex: 1; }
.rainbow span:nth-child(1) { background: var(--rb-1); }
.rainbow span:nth-child(2) { background: var(--rb-2); }
.rainbow span:nth-child(3) { background: var(--rb-3); }
.rainbow span:nth-child(4) { background: var(--rb-4); }
.rainbow span:nth-child(5) { background: var(--rb-5); }

/* ---------- Layout ---------- */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 9vw, var(--section-gap));
}
main { display: flex; flex-direction: column; gap: clamp(72px, 9vw, var(--section-gap)); }
main:focus { outline: none; }
section { scroll-margin-top: 24px; }

/* ---------- Header ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; padding: 18px 0; border-bottom: var(--rule);
}
.logo { display: flex; align-items: baseline; gap: 10px; text-decoration: none; position: relative; z-index: 60; }
.logo:hover { color: var(--c-bitume); }
.logo { align-items: center; gap: 14px; }
.logo img { height: 40px; width: auto; }
.logo-nom {
  padding-left: 14px; border-left: 2px solid var(--c-bitume);
  font-family: var(--f-mono); font-size: 11px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
  max-width: 9ch;
}
@media (min-width: 768px) {
  .logo img { height: 56px; }
  .logo-nom { font-size: 12px; max-width: none; }
}
.logo-am2 { font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1; }
.logo-prod { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--c-texte-3); }

.nav-toggle {
  position: relative; z-index: 60;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 12px;
  background: var(--c-fond); border: 2px solid var(--c-bitume); cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em;
}
.nav-toggle-bars { position: relative; width: 20px; height: 14px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--c-bitume);
  transition: transform .2s, opacity .2s;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav { display: none; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav .nav-contact { background: var(--c-jaune); color: var(--c-bitume); padding: 12px 18px; }
.nav .nav-contact:hover { color: var(--c-bitume); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Panneau mobile plein écran */
.nav.is-open {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  position: fixed; inset: 0; z-index: 50;
  background: var(--c-fond);
  padding: 120px var(--gutter) 48px;
  border-top: var(--rainbow-h) solid var(--c-bitume);
  font-family: var(--f-display); font-weight: 400; font-size: clamp(36px, 11vw, 56px);
  line-height: 1.1;
}
.nav.is-open .nav-contact { align-self: flex-start; padding: 6px 18px 8px; border-bottom: 4px solid var(--c-bitume); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 600; }
}

/* ---------- Bouton maillot jaune ---------- */
.btn-maillot {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 26px;
  background: var(--c-jaune); color: var(--c-bitume);
  border: 0; border-bottom: 4px solid var(--c-bitume);
  font-family: var(--f-text); font-weight: 700; font-size: 15px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, border-bottom-width .15s ease, margin-bottom .15s ease;
}
.btn-maillot:hover { color: var(--c-bitume); transform: translateY(-2px); border-bottom-width: 6px; margin-bottom: -2px; }
.btn-maillot svg { flex: none; }

/* ---------- Pastilles & étiquettes de catégorie ---------- */
.pastille { width: 16px; height: 16px; flex: none; }
.pastille--vertical { width: 11px; height: 18px; background: var(--c-vert); border-left: 3px solid var(--c-menthe); }
.pastille--horizontal { width: 20px; height: 12px; outline: 1px solid var(--c-pois); }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 6px 12px 6px 6px;
  background: var(--c-fond); color: var(--c-bitume);
  border: 1.5px solid var(--c-bitume);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
button.tag { cursor: pointer; }
button.tag:hover { border-color: var(--c-bleu-depart); }
button.tag[aria-pressed="true"] { background: var(--c-bitume); color: var(--c-blanc); }


/* ---------- Bannière d'accueil ----------
   Texte et logo à gauche. Emplacement d'image à droite prévu (.banniere-image, coupe en
   diagonale) — vide pour l'instant, en attente du visuel définitif. */
.banniere {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  min-height: clamp(440px, 42vw, 580px);
  margin-bottom: clamp(48px, 6vw, 80px);
  background: var(--c-fond);
}
.banniere-texte {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(28px, 3.5vw, 44px) 0 clamp(24px, 3vw, 36px);
}
.banniere-meta {
  display: flex; align-items: center; gap: 22px; margin: 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-bitume); white-space: nowrap;
}
.banniere-filet { flex: 1 1 auto; min-width: 32px; height: 1px; background: var(--c-bitume); }
.banniere-filet--court { flex: 0 0 56px; }
.tricolore { flex: 0 0 auto; display: flex; width: clamp(120px, 14vw, 200px); height: 3px; }
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--c-bleu-depart); }
.tricolore span:nth-child(2) { background: var(--c-blanc); }
.tricolore span:nth-child(3) { background: var(--c-pois); }
.banniere-logo {
  display: block; width: min(440px, 76%); height: auto; align-self: center;
  /* logo d'origine, fond rendu transparent : se pose sur n'importe quel crème */
}
.banniere-titre {
  align-self: center; margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(36px, 4.3vw, 60px); line-height: 1.12; letter-spacing: -.015em;
}
.banniere-titre-l2 { display: inline-block; padding-left: 1.5em; }
.banniere-image {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 56%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 18% 100%);
}
.banniere-image img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.banniere-signature {
  position: absolute; z-index: 2; top: clamp(28px, 3.5vw, 44px); right: 24px; margin: 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--c-bitume);
}
.banniere-meta--haut { padding-right: 220px; } /* place pour « AM2 Productions » à droite */
@media (max-width: 899px) {
  .banniere { display: block; min-height: 0; }
  .banniere-texte { padding-bottom: 28px; }
  .banniere-meta { white-space: normal; flex-wrap: wrap; gap: 10px 16px; letter-spacing: .2em; font-size: 11px; }
  .banniere-meta--haut .banniere-filet { display: none; }
  .banniere-logo { width: min(420px, 100%); }
  .banniere-titre-l2 { padding-left: 0; }
  .banniere-image { position: relative; width: 100%; height: clamp(200px, 50vw, 320px); clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 100%); }
  .banniere-signature { display: none; }
}

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; gap: 40px; }
.meta-line {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; color: var(--c-texte-3);
  text-transform: uppercase;
}
.h-hero {
  font-family: var(--f-display); font-weight: 400;
  font-size: var(--fs-hero); line-height: 1.12;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.surligne {
  /* Aplat jaune calé sur DM Serif Display (ligne de base à 1.04em du haut, hampes de .72em,
     jambage du « p » de .23em) : de .08em au-dessus des hampes à .01em sous les jambages.
     Avec l'interligne 1.12, il reste ~.09em de vide sous les jambages de la ligne du dessus. */
  background: linear-gradient(var(--c-jaune), var(--c-jaune)) no-repeat 0 .24em / 100% 1.04em;
  padding: 0 .12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px 40px; flex-wrap: wrap; }
.lead { max-width: 520px; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-texte-2); }

/* ---------- Médias ---------- */
.media {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--c-peloton);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.media > video, .media > img, .media > iframe, .media > .facade {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.media > video, .media > img { object-fit: cover; }
.media--vertical { aspect-ratio: 9 / 16; width: 100%; max-width: 360px; margin: 0 auto; }
.showreel-bloc:has(.media--vertical) { max-width: 360px; margin: 0 auto; }
@media (min-width: 900px) { .hero--vertical .showreel-bloc { max-width: none; margin: 0; } }

/* Accueil avec showreel vertical : le lecteur 9:16 se place à droite du titre */
@media (min-width: 900px) {
  .hero--vertical {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    column-gap: clamp(32px, 5vw, 72px); row-gap: 40px; align-items: start;
  }
  .hero--vertical .meta-line { grid-column: 1 / -1; }
  .hero--vertical .h-hero { grid-column: 1; font-size: clamp(40px, 5.3vw, 76px); align-self: end; }
  .hero--vertical .hero-bas { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; align-self: center; }
  .hero--vertical .showreel-bloc { grid-column: 2; grid-row: 1; }
  .hero--vertical #showreel { max-width: none; }
}
.placeholder {
  padding: 16px; text-align: center;
  font-family: var(--f-mono); font-size: 14px; letter-spacing: .1em; color: var(--c-texte-3);
}
.tag-jaune-sous { font-weight: 400; }
/* Bloc showreel : l'étiquette « maillot jaune » est posée au-dessus de la vidéo,
   pour ne jamais masquer les commandes du lecteur YouTube. */
.showreel-bloc { display: flex; flex-direction: column; width: 100%; }
.showreel-bloc .media { margin: 0; }
.tag-jaune {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  background: var(--c-jaune-vif); color: var(--c-bitume);
  padding: 10px 14px; border-bottom: 3px solid var(--c-bitume);
  font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.media-controls { position: absolute; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; }
.media-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
  background: var(--c-fond); color: var(--c-bitume); border: 2px solid var(--c-bitume); cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.media-btn:hover { border-color: var(--c-bleu-depart); }

/* Façade YouTube / Vimeo */
.facade {
  display: flex; align-items: center; justify-content: center;
  padding: 0; background: var(--c-peloton); cursor: pointer; border: 0;
}
.facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.facade-play {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--c-jaune); color: var(--c-bitume);
  border-bottom: 4px solid var(--c-bitume);
  font-family: var(--f-text); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.facade:hover .facade-play { transform: translateY(-2px); border-bottom-width: 6px; }

/* ---------- En-tête de section ---------- */
.section { display: flex; flex-direction: column; gap: 40px; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  border-bottom: var(--rule); padding-bottom: 20px;
}
.section-intro { max-width: 420px; font-size: var(--fs-body); line-height: 1.5; color: var(--c-texte-2); }
.filtres { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Cartes projet ---------- */
.grille-projets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 48px 32px;
  list-style: none; margin: 0; padding: 0;
}
.grille-projets--vertical { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 40px 20px; }
@media (min-width: 768px) { .grille-projets--vertical { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 48px 32px; } }
[data-cat="vertical"]   { --maillot: var(--c-vert); --maillot-texte: var(--c-vert); }
[data-cat="horizontal"] { --maillot: var(--c-pois); --maillot-texte: var(--c-pois-texte); }

.classement { display: flex; flex-direction: column; gap: 64px; }
.groupe { display: flex; flex-direction: column; gap: 28px; }
.groupe[hidden] { display: none; }
.groupe-titre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--c-filet-clair);
  font-weight: 800; font-size: 22px; line-height: 1.1; text-transform: uppercase;
}
.groupe-num {
  font-family: var(--f-display); font-weight: 400; font-size: 22px; line-height: 1;
  border: 2px solid var(--c-bitume); padding: 2px 8px;
}
.groupe-ratio {
  margin-left: auto;
  font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3);
}

.carte { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--c-bitume); }
.carte:hover { color: var(--c-bitume); }
.carte-media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--c-peloton); border-top: 6px solid var(--maillot);
  display: flex; align-items: center; justify-content: center;
}
.carte-media img, .carte-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-media img { transition: transform .4s ease; }
.carte:hover .carte-media img, .carte:focus-visible .carte-media img { transform: scale(1.03); }
.carte-media video { opacity: 0; transition: opacity .25s; }
.carte.is-playing .carte-media video { opacity: 1; }
.carte-media .placeholder { font-size: 12px; letter-spacing: .08em; }
.carte--vertical .carte-media { aspect-ratio: 9 / 16; }
.carte--vertical .carte-titre { font-size: 18px; }
.carte--vertical .carte-meta { flex-direction: column; gap: 2px; }
.dossard-sm {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--c-fond); border: 2px solid var(--c-bitume);
  padding: 4px 10px;
  font-family: var(--f-display); font-weight: 400; font-size: 24px; line-height: 1;
}
.carte-meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3); text-transform: uppercase;
}
.carte-meta .cat { color: var(--maillot-texte); }
.carte-titre { font-size: 22px; font-weight: 700; line-height: 1.2; }
.carte:hover .carte-titre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.carte-sous { font-size: var(--fs-small); color: var(--c-texte-3); line-height: 1.5; }
.vide { font-family: var(--f-mono); font-size: 13px; color: var(--c-texte-3); }

/* ---------- Profil d'étape ---------- */
.profil { margin: 0; }
.profil-hz { display: none; }
.profil-v { display: block; }
@media (min-width: 1024px) {
  .profil-hz { display: block; }
  .profil-v { display: none; }
}

/* Pictos (parallélogrammes inclinés) */
.picto {
  flex: none; width: 32px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  transform: var(--skew);
}
.picto svg { transform: skewX(10deg); }
.picto--depart { width: 36px; height: 34px; background: var(--c-bleu-depart); }
.picto--sprint { background: var(--c-sprint); }
.picto--ravito { background: var(--c-bleu-depart); }
.picto--cote   { background: var(--c-pois); }
.picto--damier {
  width: 36px; height: 30px; display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: stretch; justify-content: stretch;
  border: 1px solid var(--c-pois); overflow: hidden;
}
.picto--damier span:nth-child(odd)  { background: var(--c-pois); }
.picto--damier span:nth-child(even) { background: var(--c-blanc); }
.picto--damier span:nth-child(n+5):nth-child(-n+8):nth-child(odd)  { background: var(--c-blanc); }
.picto--damier span:nth-child(n+5):nth-child(-n+8):nth-child(even) { background: var(--c-pois); }
.picto--simple { width: 32px; height: 30px; transform: none; }
.picto--simple::before { content: ""; width: 10px; height: 10px; background: var(--c-bitume); }

/* Version horizontale (≥ 1024 px) — étiquettes placées en JS sans chevauchement */
.profil-h {
  --m: 44px; /* = G.marge dans profil.js : départ et arrivée à 44 px des bords */
  position: relative; height: 728px; overflow: hidden;
  background: var(--c-fond); border: 1px solid var(--c-filet-clair);
  color: var(--c-bitume);
}
/* Boutons du profil (étapes cliquables) */
:where(.profil-h button) { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.ph-coin { position: absolute; top: 20px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ph-coin--g { left: 24px; }
.ph-coin--d { right: 24px; align-items: flex-end; text-align: right; }
.ph-coin-titre { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.05; }
.ph-coin-detail { font-size: 17px; }
.ph-coin-pictos { position: absolute; top: 92px; display: flex; flex-direction: column; gap: 6px; }
.ph-coin-pictos--g { left: 26px; }
.ph-coin-pictos--d { right: 26px; }

.ph-point {
  --tx: -50%; --b: 400px;
  position: absolute; bottom: calc(100% - var(--b)); min-height: 92px;
  width: clamp(96px, 9.5vw, 124px);
  left: calc(var(--m) + (100% - 2 * var(--m)) * var(--x) / 100); transform: translateX(var(--tx));
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  text-align: center; font-size: 13px; line-height: 1.25; letter-spacing: -.005em;
}
.ph-point strong { font-weight: 700; }
.ph-point, .ph-coin { transition: opacity .2s; }
.ph-point > span:last-child, .ph-coin-titre { text-decoration: underline transparent 2px; text-underline-offset: 4px; transition: text-decoration-color .15s; }
.ph-point.is-actif > span:last-child, .ph-coin.is-actif .ph-coin-titre { text-decoration-color: var(--c-bitume); }
.ph-point .picto { transition: transform .15s; }
.ph-point.is-actif .picto { transform: var(--skew) scale(1.18); }
/* Pendant le survol, les étapes non actives s'effacent un peu */
.profil-h.is-survol .ph-point:not(.is-actif), .profil-h.is-survol .ph-coin:not(.is-actif) { opacity: .45; }
.ph-ligne.is-actif, .ph-ligne-coin.is-actif { border-left: 2px solid var(--c-bitume); margin-left: -.5px; }

/* Curseur */
.ph-curseur { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 3; }
.profil-h.is-survol .ph-curseur { opacity: 1; }
.ph-curseur::before { content: ""; position: absolute; top: 412px; height: 236px; left: -1px; border-left: 2px solid var(--c-bitume); }
.ph-curseur-point {
  position: absolute; left: -7px; width: 14px; height: 14px; margin-top: -7px;
  background: var(--c-bitume); border: 3px solid var(--c-fond); border-radius: 50%;
}
.ph-curseur.is-gauche .ph-curseur-bulle { left: auto; right: 12px; }
.ph-curseur-bulle {
  position: absolute; left: 12px; margin-top: -34px; white-space: nowrap;
  background: var(--c-bitume); color: var(--c-blanc); padding: 3px 8px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
}
.ph-courbe-reste { opacity: 1; transition: opacity .2s; }
.profil-h.is-survol .ph-courbe-reste { opacity: .35; }

/* Panneau de détail sous le profil */
.ph-detail {
  display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 12px 40px; align-items: start;
  margin-top: -1px; padding: 24px; min-height: 132px;
  background: var(--c-fond); border: 1px solid var(--c-filet-clair); border-top: var(--rule);
}
.ph-detail-tete { display: flex; gap: 16px; align-items: flex-start; }
.ph-detail-picto .picto { margin-top: 4px; }
.ph-detail-titres { display: flex; flex-direction: column; gap: 4px; }
.ph-detail-num { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3); text-transform: uppercase; }
.ph-detail-nom { font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.1; }
.ph-detail-sous { font-weight: 600; color: var(--c-texte-2); }
.ph-detail-desc { font-size: 17px; line-height: 1.55; color: var(--c-texte-2); max-width: 62ch; }
.ph-detail-aide { grid-column: 1 / -1; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: var(--c-texte-3); text-transform: uppercase; }
.ph-point--g { align-items: flex-end; text-align: right; }
.ph-point--d { align-items: flex-start; text-align: left; }
.ph-ligne {
  position: absolute; top: calc(var(--b) + 4px); left: calc(var(--m) + (100% - 2 * var(--m)) * var(--x) / 100);
  height: var(--h); border-left: 1px dashed var(--c-bitume);
}
.ph-ligne-coin { position: absolute; border-left: 1px dashed var(--c-bitume); }
.ph-courbe { position: absolute; top: 432px; left: var(--m); width: calc(100% - 2 * var(--m)); height: 216px; }
.ph-barre { position: absolute; top: 648px; left: 0; width: 100%; height: 26px; background: var(--c-bitume); }
.ph-repere {
  --dx: 0px;
  position: absolute; z-index: 1; top: 652px; left: calc(var(--m) + (100% - 2 * var(--m)) * var(--x) / 100); transform: translateX(calc(-50% + var(--dx)));
  color: var(--c-jaune); font-weight: 700; font-size: 14px; line-height: 18px;
}
.ph-pied { position: absolute; top: 682px; display: flex; flex-direction: column; }
.ph-pied--g { left: 24px; }
.ph-pied--d { right: 24px; align-items: flex-end; }
.ph-pied span:first-child { font-size: 13px; text-transform: uppercase; }
.ph-pied span:last-child { font-weight: 800; font-size: 24px; line-height: 1; }

/* Habillage « infographie du Tour » : vue aérienne des Aravis (rendu 3D maison à partir
   des données d'altitude réelles), assombrie pour que le jaune et les panneaux ressortent. */
.profil-h {
  --ph-encre: #FFFFFF;
  background:
    linear-gradient(180deg, rgba(12, 16, 14, .62) 0%, rgba(12, 16, 14, .48) 45%, rgba(12, 16, 14, .30) 75%, rgba(12, 16, 14, .55) 100%),
    url("../assets/img/profil-fond-aravis-ete.webp") center 35% / cover no-repeat,
    #2E3A33;
  border-color: var(--c-bitume);
  color: var(--ph-encre);
}
.profil-h .ph-ligne, .profil-h .ph-ligne-coin { border-left-color: rgba(255, 255, 255, .8); }
.profil-h .ph-ligne.is-actif, .profil-h .ph-ligne-coin.is-actif { border-left: 2px solid var(--ph-encre); }
.profil-h .ph-point.is-actif > span:last-child, .profil-h .ph-coin.is-actif .ph-coin-titre { text-decoration-color: var(--ph-encre); }
.profil-h .ph-curseur::before { border-left-color: var(--ph-encre); }
.profil-h .ph-curseur-point { background: var(--ph-encre); border-color: var(--c-bitume); }
.profil-h .ph-curseur-bulle { background: var(--ph-encre); color: var(--c-bitume); }
.profil-h .ph-pied { color: var(--ph-encre); }

/* Animation : la courbe se trace, les points apparaissent quand elle les atteint */
.profil.anim .ph-courbe { clip-path: inset(0 100% 0 0); }
.profil.anim .ph-anim { opacity: 0; transform: translateY(6px); }
.profil.anim .ph-point.ph-anim { transform: translate(var(--tx), 6px); }
.profil.anim .ph-repere.ph-anim { transform: translate(calc(-50% + var(--dx)), 6px); }
.profil.anim.is-visible .ph-courbe { clip-path: inset(0 0 0 0); transition: clip-path 2s linear; }
.profil.anim.is-visible .ph-anim {
  opacity: 1; transform: none;
  transition: opacity .35s ease, transform .35s ease;
  transition-delay: calc(var(--x) * 20ms);
}
.profil.anim.is-visible .ph-point.ph-anim { transform: translateX(var(--tx)); }
.profil.anim.is-visible .ph-repere.ph-anim { transform: translateX(calc(-50% + var(--dx))); }

/* Version verticale (< 1024 px) */
.profil-v { position: relative; background: var(--c-fond); border: 1px solid var(--c-filet-clair); padding: 16px 16px 16px 0; }
.pv-legende {
  display: flex; justify-content: space-between; gap: 12px; padding-left: 50px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-3);
}
.pv-corps { position: relative; margin: 12px 0; }
.pv-corps::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38px; background: var(--c-bitume);
}
.pv-courbe { position: absolute; top: 0; left: 38px; width: 72px; height: 100%; }
.pv-liste { position: relative; list-style: none; margin: 0; padding: 0; }
.pv-etape {
  position: relative;
  display: grid; grid-template-columns: 38px 72px 40px 1fr; align-items: center;
  column-gap: 0; min-height: 76px; padding: 10px 0;
}
.pv-pct { grid-column: 1; text-align: center; color: var(--c-jaune); font-weight: 700; font-size: 13px; }
.pv-ligne {
  grid-column: 2; justify-self: end; height: 0;
  width: calc(72px - var(--w, 0px) + 4px);
  border-top: 1px dashed var(--c-bitume);
}
.pv-etape .picto { grid-column: 3; justify-self: center; }
.pv-texte { grid-column: 4; padding-left: 12px; display: flex; flex-direction: column; }
.pv-nom { font-weight: 800; font-size: 17px; line-height: 1.15; text-transform: uppercase; }
.pv-bouton {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 4px 28px 4px 0;
  background: none; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.pv-chevron {
  position: absolute; right: 4px; top: 10px; width: 10px; height: 10px;
  border-right: 2px solid var(--c-bitume); border-bottom: 2px solid var(--c-bitume);
  transform: rotate(45deg); transition: transform .2s;
}
.pv-bouton[aria-expanded="true"] .pv-chevron { transform: rotate(225deg); top: 14px; }
.pv-desc { margin: 8px 0 4px; font-size: 15px; line-height: 1.5; color: var(--c-texte-2); }
.pv-detail { font-size: 15px; color: var(--c-texte-2); }

/* ---------- Bloc contact — ligne d'arrivée ---------- */
.arrivee {
  display: flex; flex-direction: column; gap: 32px;
  background: var(--c-bitume); color: var(--c-blanc);
  padding: clamp(32px, 5vw, 72px);
}
.arrivee-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em;
}
.damier-sm {
  width: 28px; height: 22px; transform: var(--skew);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.damier-sm span:nth-child(1), .damier-sm span:nth-child(3),
.damier-sm span:nth-child(6), .damier-sm span:nth-child(8) { background: var(--c-pois); }
.damier-sm span:nth-child(2), .damier-sm span:nth-child(4),
.damier-sm span:nth-child(5), .damier-sm span:nth-child(7) { background: var(--c-blanc); }
.arrivee-titre {
  font-family: var(--f-display); font-weight: 400; font-size: var(--fs-contact);
  line-height: var(--lh-display); letter-spacing: -.01em;
}
.arrivee-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.arrivee .btn-maillot { border-bottom-color: var(--c-blanc); }
.arrivee .mail { font-family: var(--f-mono); font-size: 15px; color: var(--c-blanc); text-underline-offset: 4px; overflow-wrap: anywhere; }
.arrivee .mail:hover { color: var(--c-blanc); text-decoration-thickness: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3);
}
.site-footer ul { display: flex; gap: 8px 20px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.site-footer a { color: var(--c-texte-3); }
.site-footer a:hover { color: var(--c-bleu-depart); }

/* ---------- Page projet ---------- */
.projet-tete { display: flex; flex-direction: column; gap: 32px; }
.projet-tete-ligne { display: flex; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.dossard-xl {
  position: relative; flex: none;
  width: clamp(176px, 22vw, 220px); aspect-ratio: 220 / 160;
  background: var(--c-fond); border: 2px solid var(--c-bitume); color: var(--c-bitume);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dossard-xl i {
  position: absolute; width: 10px; height: 10px; border: 2px solid var(--c-bitume);
  border-radius: 50%; /* épingles : seule exception à « aucun arrondi », cf. charte */
}
.dossard-xl i:nth-child(1) { top: 10px; left: 10px; }
.dossard-xl i:nth-child(2) { top: 10px; right: 10px; }
.dossard-xl i:nth-child(3) { bottom: 10px; left: 10px; }
.dossard-xl i:nth-child(4) { bottom: 10px; right: 10px; }
.dossard-xl-marque { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; }
.dossard-xl-num { font-family: var(--f-display); font-weight: 400; font-size: clamp(56px, 7vw, 76px); line-height: .95; }
.projet-titre {
  flex: 1 1 320px;
  font-family: var(--f-display); font-weight: 400; font-size: clamp(40px, 6.8vw, 96px);
  line-height: var(--lh-display); letter-spacing: -.01em; overflow-wrap: break-word;
}
.projet-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px; margin: 0; padding: 20px 0;
  border-top: var(--rule); border-bottom: 1px solid var(--c-filet-clair);
}
.projet-meta div { display: flex; flex-direction: column; gap: 4px; }
.projet-meta dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3); text-transform: uppercase; }
.projet-meta dd { margin: 0; font-weight: 600; }
.projet-meta .cat { color: var(--maillot-texte); }

.recit { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .recit { grid-template-columns: repeat(var(--n, 3), 1fr); gap: 32px; } }
.recit-bloc { display: flex; flex-direction: column; gap: 14px; border-top: var(--rule); padding-top: 18px; }
.recit-bloc h2 { font-weight: 800; font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.recit-bloc h2 span { display: block; font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3); margin-bottom: 6px; }
.recit-bloc p { color: var(--c-texte-2); }

.galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 16px; list-style: none; margin: 0; padding: 0;
}
.galerie .media img { transition: transform .4s ease; }

.etape-suivante {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 28px 0; border-top: var(--rule); border-bottom: var(--rule);
  text-decoration: none; color: var(--c-bitume);
}
.etape-suivante:hover { color: var(--c-bitume); }
.etape-suivante-label { font-family: var(--f-mono); font-size: 13px; letter-spacing: .1em; color: var(--c-texte-3); }
.etape-suivante-titre {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 4vw, 52px); line-height: 1.05;
}
.etape-suivante svg { transition: transform .2s; }
.etape-suivante:hover svg { transform: translateX(6px); }

/* ---------- Page à propos ---------- */
.apropos { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .apropos { grid-template-columns: minmax(280px, 5fr) 7fr; gap: 64px; align-items: start; } }
.portrait { aspect-ratio: 4 / 5; }
.apropos-texte { display: flex; flex-direction: column; gap: 20px; font-size: 18px; color: var(--c-texte-2); }
.apropos-texte p:first-child { font-size: var(--fs-lead); color: var(--c-bitume); }

.outils { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.outils li {
  display: grid; grid-template-columns: 1fr; gap: 4px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--c-filet-clair);
}
@media (min-width: 640px) { .outils li { grid-template-columns: 220px 1fr auto; align-items: baseline; } }
.outils-page { font-weight: 800; font-size: 20px; text-transform: uppercase; }
.outils-usage { color: var(--c-texte-2); }
.outils-mod { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--c-texte-3); }

.erreur { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

/* ---------- Page avis ---------- */
.avis-resume { display: flex; }
.avis-resume[hidden] { display: none; }
.note-globale { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 2px solid var(--c-bitume); }
.note-chiffre { font-family: var(--f-display); font-size: 56px; line-height: 1; }
.note-detail { display: flex; flex-direction: column; gap: 6px; }
.note-source { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-3); }
.etoiles { display: inline-flex; gap: 2px; color: var(--c-bitume); }

.avis-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 32px; list-style: none; margin: 0; padding: 0;
}
.avis-carte {
  display: flex; flex-direction: column; gap: 18px;
  padding: 24px; border: 1px solid var(--c-filet-clair); border-top: 6px solid var(--c-bitume);
  background: var(--c-fond);
}
.avis-tete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.avis-num {
  font-family: var(--f-display); font-size: 22px; line-height: 1;
  border: 2px solid var(--c-bitume); padding: 3px 8px;
}
.avis-source { margin-left: auto; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-3); }
.avis-texte { margin: 0; }
.avis-texte p { font-family: var(--f-display); font-size: 22px; line-height: 1.35; }
.avis-texte p::before { content: "« "; }
.avis-texte p::after { content: " »"; }
.avis-auteur { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.avis-auteur span { color: var(--c-texte-3); font-size: var(--fs-small); }
.avis-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-texte-3); }
.avis-meta:empty { display: none; }

.avis-vide {
  grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; align-items: center;
  padding: 32px; border: 1px dashed var(--c-bitume);
}
.avis-vide-num { grid-row: 1 / span 2; font-family: var(--f-display); font-size: 64px; line-height: 1; color: var(--c-texte-3); }
.avis-vide-titre { font-family: var(--f-display); font-size: 28px; line-height: 1.15; }
.avis-vide-texte { color: var(--c-texte-2); }

.btn-avis {
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; border: 0; cursor: pointer;
  background: var(--c-bitume); color: var(--c-blanc); text-decoration: none;
  font-family: var(--f-text); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.btn-avis:hover { color: var(--c-blanc); background: var(--c-bleu-depart); }
.btn-avis[disabled] { opacity: .6; cursor: wait; }

/* Formulaire d'avis */
.form-avis { display: flex; flex-direction: column; gap: 24px; max-width: 880px; }
.form-grille { display: grid; grid-template-columns: 1fr; gap: 20px 24px; }
@media (min-width: 720px) { .form-grille { grid-template-columns: 1fr 1fr; } }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label, .champ-note legend { font-weight: 700; font-size: 15px; }
.champ-aide { font-weight: 400; color: var(--c-texte-3); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--c-bitume);
  background: var(--c-blanc); border: 1.5px solid var(--c-bitume);
}
.champ textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--c-bleu-depart); outline-offset: 1px; }
.champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.champ-note { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.champ-note legend { padding: 0; margin-bottom: 8px; }
/* Étoiles : les boutons radio sont dans l'ordre 5 → 1, affichés de 1 à 5 */
.note-etoiles { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.note-etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.note-etoiles label { cursor: pointer; color: var(--c-filet-clair); line-height: 0; }
.note-etoiles svg { fill: currentColor; stroke: var(--c-bitume); stroke-width: 1; }
.note-etoiles input:checked ~ label,
.note-etoiles label:hover, .note-etoiles label:hover ~ label { color: var(--c-bitume); }
.note-etoiles input:focus-visible + label { outline: 3px solid var(--c-bleu-depart); outline-offset: 2px; }

.champ-case { display: flex; gap: 12px; align-items: flex-start; }
.champ-case input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--c-bitume); flex: none; }
.form-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.form-mention { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-texte-3); }
.form-statut:empty { display: none; }
.form-statut { padding: 14px 16px; border-left: 4px solid var(--c-bitume); background: var(--c-peloton); }
.form-statut--ok { border-left-color: var(--c-sprint); }
.form-statut--erreur { border-left-color: var(--c-pois); }

/* =====================================================================
   CLOSER — appels à l'action, offres, FAQ, réservation intégrée
   ===================================================================== */
.hero-actions { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.lien-fleche {
  font-weight: 700; font-size: 15px; color: var(--c-bitume);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.lien-fleche::after { content: " ↓"; }
.lien-fleche:hover { color: var(--c-bleu-depart); }
.hero-reassure { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-texte-3); }

/* Bouton secondaire (contour) */
.btn-ligne {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 24px; border: 2px solid var(--c-bitume); color: var(--c-bitume); background: transparent;
  font-family: var(--f-text); font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s;
}
.btn-ligne:hover { background: var(--c-bitume); color: var(--c-blanc); }

/* ---------- Offres ---------- */
.offres-grille { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 960px) { .offres-grille { grid-template-columns: repeat(3, 1fr); padding-top: 12px; } }
.offre {
  --maillot: var(--c-bitume);
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px 24px; background: var(--c-blanc);
  border: 1.5px solid var(--c-bitume); border-top: 8px solid var(--maillot);
}
.offre--vert  { --maillot: var(--c-vert); }
.offre--pois  { --maillot: var(--c-pois); }
.offre--jaune { --maillot: var(--c-jaune); border-width: 2px; border-top-width: 8px; }
@media (min-width: 960px) { .offre--reco { transform: translateY(-12px); } }
.offre-reco {
  position: absolute; top: -8px; right: 16px; transform: translateY(-100%);
  background: var(--c-jaune); color: var(--c-bitume); padding: 6px 10px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.offre-sous { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-texte-3); }
.offre-nom { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1; }
.offre-pour { font-size: 15px; line-height: 1.5; color: var(--c-texte-2); min-height: 4.5em; }
.offre-prix { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--c-filet-clair); border-bottom: 1px solid var(--c-filet-clair); }
.offre-des { font-size: 13px; color: var(--c-texte-3); }
.offre-montant { font-family: var(--f-display); font-size: 44px; line-height: 1.05; }
.offre-unite { font-size: 13px; color: var(--c-texte-3); }
.offre-inclus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.offre-inclus li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.offre-coche { flex: none; margin-top: 2px; color: var(--maillot); }
.offre--jaune .offre-coche { color: var(--c-bitume); }
.offre-cta { align-self: stretch; justify-content: center; margin-top: 8px; }
.offres-note { font-size: 15px; color: var(--c-texte-2); }

/* ---------- FAQ ---------- */
.faq-liste { border-top: 1px solid var(--c-bitume); }
.faq-item { border-bottom: 1px solid var(--c-bitume); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 19px; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover span:first-child { text-decoration: underline; text-underline-offset: 5px; }
.faq-signe { position: relative; flex: none; width: 18px; height: 18px; }
.faq-signe::before, .faq-signe::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: var(--c-bitume); transition: transform .2s; }
.faq-signe::after { transform: rotate(90deg); }
.faq-item[open] .faq-signe::after { transform: rotate(0); }
.faq-item p { max-width: 72ch; padding: 0 0 24px; font-size: 17px; line-height: 1.6; color: var(--c-texte-2); }

/* ---------- Réservation (bloc ligne d'arrivée) ---------- */
.arrivee-sous { max-width: 62ch; font-size: 18px; line-height: 1.55; color: #D8D8D2; }
.resa-form { display: grid; gap: 16px 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .resa-form { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .resa-form { grid-template-columns: repeat(4, 1fr); } }
.resa-champ { display: flex; flex-direction: column; gap: 8px; }
.resa-champ label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #D8D8D2; }
.resa-champ select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 52px; padding: 12px 40px 12px 14px;
  border: 2px solid var(--c-blanc); border-radius: 0; background-color: var(--c-bitume); color: var(--c-blanc);
  font: 500 16px/1.2 var(--f-text); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.resa-champ select:focus-visible { outline: 3px solid var(--c-jaune); outline-offset: 2px; }
.resa-champ select option { background: var(--c-blanc); color: var(--c-bitume); }
.resa-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: 8px; }
.resa-aide { font-size: 14px; color: #BDBDB6; }
.resa-calendrier { background: var(--c-blanc); border-top: 8px solid var(--c-jaune); scroll-margin-top: 24px; }
.resa-calendrier iframe { display: block; width: 100%; height: 760px; border: 0; }
@media (max-width: 767px) { .resa-calendrier iframe { height: 1050px; } }
.arrivee-mail { font-size: 15px; color: #D8D8D2; }

/* ---------- Barre de réservation (mobile) + retour en haut ---------- */
.barre-resa {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  background: var(--c-jaune); color: var(--c-bitume); border-top: 3px solid var(--c-bitume);
  font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  transform: translateY(110%); transition: transform .25s ease;
}
.barre-resa-sous { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; }
.barre-resa.is-visible { transform: none; }
@media (min-width: 768px) { .barre-resa { display: none; } }
body.nav-open .barre-resa { transform: translateY(110%); }

.haut-de-page {
  position: fixed; z-index: 41; right: 18px; bottom: 18px;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: var(--c-bitume); color: var(--c-blanc); border: 2px solid var(--c-blanc); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.haut-de-page.is-visible { opacity: 1; visibility: visible; transform: none; }
.haut-de-page:hover { background: var(--c-bleu-depart); }
.haut-de-page:focus-visible { outline: 3px solid var(--c-bleu-depart); outline-offset: 2px; }
@media (max-width: 767px) { .haut-de-page { bottom: calc(76px + env(safe-area-inset-bottom)); right: 14px; } }
@media (prefers-reduced-motion: reduce) { .barre-resa, .haut-de-page { transition: none; } }

/* =====================================================================
   FONDS — v2 « plein air » (inspiration : grands visuels pleine largeur,
   sections en bandes alternées blanc / beige, pied de page noir).
   Ciel d'été sur les Aravis : rendu 3D maison à partir des données d'altitude réelles.
   ===================================================================== */
:root { --c-fond-chaud: #F6F1E7; --ciel-voile: 6, 28, 58; }
body { background: var(--c-blanc); overflow-x: clip; }
.wrap { padding-bottom: 0; gap: 0; }

/* Bande pleine largeur derrière un bloc resté dans la grille du site */
.plein, .accueil main > section, .site-footer { position: relative; isolation: isolate; }
.plein::before, .accueil main > section::before, .site-footer::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  background: var(--bande, transparent);
}

/* ---------- Accueil : sections en bandes ---------- */
.accueil main { gap: 0; }
.accueil main > section { padding-block: clamp(64px, 8vw, 112px); }
.accueil main > .hero { --bande: var(--c-blanc); }
.accueil main > #travaux { --bande: var(--c-fond-chaud); }
.accueil main > #offres { --bande: var(--c-blanc); }
.accueil main > #methode { --bande: var(--c-fond-chaud); }
.accueil main > #faq { --bande: var(--c-blanc); }
.accueil main > #reserver { --bande: var(--c-bitume); padding-inline: 0; }
.accueil .offre { background: var(--c-blanc); }
.accueil #travaux .tag, .accueil #methode .ph-detail, .accueil #methode .profil-v { background: var(--c-blanc); }

/* ---------- Accueil : bannière d'origine (fond beige, logo noir) ---------- */
.accueil main > .banniere { --bande: var(--c-fond); margin-bottom: 0; overflow: visible; }
.nav a { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .nav { gap: 18px; font-size: 14px; }
  .nav .nav-contact { padding: 10px 12px; }
  .logo-nom { display: none; }
}

/* ---------- Profil d'étape : même ciel d'été, voile plus léger ---------- */
.profil-h {
  background:
    linear-gradient(180deg, rgba(var(--ciel-voile), .38) 0%, rgba(var(--ciel-voile), .30) 50%, rgba(var(--ciel-voile), .14) 80%, rgba(var(--ciel-voile), .45) 100%),
    url("../assets/img/profil-fond-aravis-ign2.webp") center 40% / cover no-repeat,
    #2A6FC9;
}

/* ---------- Pied de page noir en colonnes ---------- */
.site-footer {
  --bande: #0B0B0B;
  display: flex; flex-direction: column; gap: 40px;
  margin-top: 0; padding-block: clamp(56px, 7vw, 88px) 32px;
  color: #CFCFC8; font-family: var(--f-text); font-size: 15px; letter-spacing: 0;
}
.pied-grille { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .pied-grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied-marque { display: flex; flex-direction: column; gap: 18px; max-width: 360px; }
.pied-logo { display: inline-block; align-self: flex-start; padding: 18px 22px; background: var(--c-fond); }
.pied-logo img { width: 200px; height: auto; }
.pied-marque p { line-height: 1.6; }
.pied-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pied-titre { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-blanc); }
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: #CFCFC8; text-decoration: none; }
.site-footer a:hover { color: var(--c-jaune); }
.site-footer .pied-cta { color: var(--c-bitume); border-bottom-color: var(--c-blanc); margin-top: 8px; padding: 14px 20px; font-size: 13px; }
.site-footer .pied-cta:hover { color: var(--c-bitume); }
.pied-bas {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid #2A2A2A;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: #8E8E87;
}
.pied-bas a { color: #8E8E87; }
@media (max-width: 767px) { .site-footer { padding-bottom: 96px; } } /* place pour la barre de réservation */

/* Pages intérieures : un peu d'air avant le pied de page noir */
body:not(.accueil) main { padding-bottom: clamp(64px, 8vw, 112px); }

/* =====================================================================
   PHOTOS DE COURSE (choix : mélange options 1 + 3)
   - bannière : le grimpeur en diagonale à droite, logo noir intact sur sa zone crème ;
   - bande « Du bord de la route à l'écran » : le sprint, léger flou.
   Photos Unsplash, marques floutées localement (aucune marque lisible).
   ===================================================================== */
.accueil main > .banniere { overflow: hidden; }
.accueil main > .banniere::after {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: calc((100% - 100vw) / 2); width: 46vw;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  background: url("../assets/img/fond-grimpeur-net.webp") 24% 42% / cover no-repeat;
}
.accueil .banniere-texte { position: relative; z-index: 1; max-width: 58%; }
@media (max-width: 899px) {
  .accueil main > .banniere::after { display: none; }
  .accueil .banniere-texte { max-width: none; }
}

.bande-photo {
  display: flex; align-items: center; position: relative; isolation: isolate;
  min-height: clamp(320px, 42vw, 540px);
}
.bande-photo::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background: linear-gradient(90deg, rgba(8, 8, 8, .55), rgba(8, 8, 8, .10) 65%),
    url("../assets/img/fond-sprint-net.webp") center 55% / cover no-repeat;
}
.bande-photo-texte {
  font-family: var(--f-display); font-size: clamp(40px, 6vw, 84px); line-height: 1.02; color: var(--c-blanc);
}

/* Mention obligatoire de la licence IGN (photos aériennes du fond du profil) */
.profil-h::after {
  content: "Fond : relief et photos aériennes © IGN"; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .75); pointer-events: none;
}

.accueil .banniere-signature { display: none; }


/* =====================================================================
   RETOUCHES 2026-10-09
   ===================================================================== */
/* Bannière : fond crème et photo jusqu'aux bords de l'écran */
.accueil main > .banniere { overflow: visible; }
.accueil main > .banniere::after { width: 50vw; clip-path: polygon(28% 0, 100% 0, 100% 100%, 10% 100%); }
@media (min-width: 900px) and (max-width: 1199px) { .accueil main > .banniere::after { width: 40vw; } .accueil .banniere-meta--bas { white-space: normal; flex-wrap: wrap; } }

/* Cartes projet : vignette seule */
.carte { gap: 0; }

/* Profil de l'étape : intro aérée (phrase + légende) */
.methode-intro { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.methode-phrase { font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--c-bitume); }
.methode-legende { display: flex; flex-direction: column; gap: 10px; }
.methode-legende li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--c-texte-2); }
.methode-legende strong { display: block; font-family: var(--f-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--c-bitume); }
.ml-puce { flex: none; width: 18px; height: 16px; transform: var(--skew); }
.ml-puce--sprint { background: var(--c-sprint); }
.ml-puce--ravito { background: var(--c-bleu-depart); }
.methode-astuce { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; color: var(--c-texte-3); }

/* FAQ : titre collant à gauche, questions en cartes numérotées à droite */
.faq-grille { display: grid; gap: 40px; grid-template-columns: 1fr; }
.faq-tete { display: flex; flex-direction: column; gap: 20px; }
.faq-tete .section-intro { max-width: 34ch; }
.faq-aide { margin-top: 8px; padding: 22px 24px; background: var(--c-fond-chaud); border-left: 4px solid var(--c-jaune); }
.faq-aide p { font-size: 15px; line-height: 1.5; color: var(--c-texte-2); }
.faq-aide .faq-aide-titre { margin-bottom: 4px; font-weight: 700; font-size: 17px; color: var(--c-bitume); }
.faq-aide .lien-fleche { display: inline-block; margin-top: 12px; }
.faq-aide .lien-fleche::after { content: " →"; }
@media (min-width: 900px) {
  .faq-grille { grid-template-columns: minmax(260px, 4fr) 7fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
  .faq-tete { position: sticky; top: 32px; }
}
.faq-liste { display: flex; flex-direction: column; gap: 12px; border-top: 0; }
.faq-item {
  border: 1px solid var(--c-filet-clair); border-bottom: 1px solid var(--c-filet-clair); border-left: 4px solid transparent;
  background: var(--c-blanc); transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.faq-item:hover { border-color: var(--c-bitume); border-left-color: var(--c-bitume); }
.faq-item[open] { background: var(--c-fond-chaud); border-color: var(--c-fond-chaud); border-left-color: var(--c-jaune); }
.faq-item summary { justify-content: flex-start; gap: 18px; padding: 20px 22px; font-size: 18px; }
.faq-item summary:hover span:first-child { text-decoration: none; }
.faq-item summary:hover .faq-q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.faq-item summary:focus-visible { outline: 3px solid var(--c-bleu-depart); outline-offset: 2px; }
.faq-num { flex: none; min-width: 2ch; font-family: var(--f-mono); font-size: 13px; font-weight: 400; letter-spacing: .08em; color: var(--c-texte-3); }
.faq-item[open] .faq-num { color: var(--c-bitume); }
.faq-q { flex: 1 1 auto; }
.faq-signe { width: 32px; height: 32px; border-radius: 50%; background: var(--c-fond-chaud); transition: background-color .2s, transform .25s; }
.faq-signe::before, .faq-signe::after { left: 9px; top: 15px; width: 14px; }
.faq-item[open] .faq-signe { background: var(--c-jaune); transform: rotate(180deg); }
.faq-r { padding: 0 22px 22px calc(22px + 2ch + 18px); }
.faq-item .faq-r p { max-width: 62ch; padding: 0; font-size: 16px; line-height: 1.65; }
.faq-item[open] .faq-r { animation: faq-ouvre .3s ease both; }
@keyframes faq-ouvre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 599px) {
  .faq-item summary { padding: 18px 16px; gap: 12px; font-size: 16px; }
  .faq-r { padding: 0 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .faq-item[open] .faq-r { animation: none; } }

/* Bannière v2 (2026-10-09) : texte et logo décalés vers la gauche de l'écran, photo plus grande */
@media (min-width: 900px) {
  .accueil .banniere-texte { margin-left: min(0px, calc((100% - 100vw) / 2 + clamp(32px, 5vw, 96px))); }
  .accueil main > .banniere::after {
    width: 56vw; clip-path: polygon(24% 0, 100% 0, 100% 100%, 6% 100%);
    background-image: url("../assets/img/fond-grimpeur-v4.webp"); background-position: 40% 50%;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .accueil main > .banniere::after { width: 46vw; }
}
@media (min-width: 1200px) and (max-width: 1499px) { .accueil main > .banniere::after { width: 43vw; } }
@media (min-width: 1700px) { .accueil main > .banniere::after { width: 60vw; } }

/* Pied de page crème (demande d'Aurélien, 2026-10-09) */
.site-footer { --bande: var(--c-fond); color: var(--c-texte-2); }
.site-footer::before { border-top: 1px solid var(--c-filet-clair); }
.pied-logo { padding: 0; background: none; }
.pied-titre { color: var(--c-bitume); }
.site-footer a { color: var(--c-bitume); }
.site-footer a:hover { color: var(--c-bleu-depart); }
.site-footer .pied-cta { border-bottom-color: var(--c-bitume); }
.pied-bas { border-top-color: var(--c-filet-clair); color: var(--c-texte-3); }
.pied-bas a { color: var(--c-texte-3); }

/* Réservation : texte centré, ligne d'arrivée en damier peinte sur le bitume (2026-10-09) */
.accueil main > #reserver {
  align-items: center; text-align: center;
  padding-bottom: calc(clamp(64px, 8vw, 112px) + 96px);
}
.accueil main > #reserver::before {
  background:
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(180deg, #161616 0%, #0E0E0E 100%);
}
.accueil main > #reserver::after {
  content: ""; position: absolute; z-index: -1; bottom: 28px; left: 50%; width: 100vw; margin-left: -50vw; height: 72px;
  background: repeating-conic-gradient(var(--c-blanc) 0 25%, #0E0E0E 0 50%) 0 0 / 48px 48px;
  border-top: 6px solid var(--c-blanc); border-bottom: 6px solid var(--c-blanc);
  transform: perspective(500px) rotateX(38deg); transform-origin: 50% 100%;
}
#reserver .resa-form { justify-items: center; width: 100%; }
#reserver .resa-actions { justify-content: center; }
#reserver .resa-calendrier { align-self: stretch; text-align: left; }
@media (max-width: 599px) {
  .accueil main > #reserver { padding-bottom: calc(64px + 72px); }
  .accueil main > #reserver::after { height: 48px; background-size: 32px 32px; bottom: 20px; }
}
.accueil .banniere-meta--haut { padding-right: 0; }

/* Réservation v2 : fond « ligne d'arrivée des Mondiaux » (bandes arc-en-ciel UCI sur route blanche) */
.accueil main > #reserver {
  --bande: transparent; color: var(--c-bitume);
  padding-block: clamp(72px, 9vw, 128px); min-height: clamp(380px, 38vw, 520px); justify-content: center;
}
.accueil main > #reserver::before {
  background: linear-gradient(180deg,
    #FAFAF7 0 22%,
    var(--rb-1) 22% 33.2%, var(--rb-2) 33.2% 44.4%, var(--rb-3) 44.4% 55.6%,
    var(--rb-4) 55.6% 66.8%, var(--rb-5) 66.8% 78%,
    #FAFAF7 78% 100%);
}
.accueil main > #reserver::after { display: none; }
.accueil main > #reserver > * { position: relative; }
.accueil main > #reserver .arrivee-kicker,
.accueil main > #reserver .arrivee-titre,
.accueil main > #reserver .resa-form { background: #FAFAF7; }
.accueil main > #reserver .arrivee-kicker { padding: 8px 14px; }
.accueil main > #reserver .arrivee-titre { padding: 4px 28px 10px; }
.accueil main > #reserver .resa-form { width: auto; padding: 14px; }
.accueil main > #reserver .btn-maillot { border-bottom-color: var(--c-bitume); }
.accueil main > #reserver .resa-calendrier { width: 100%; }
@media (max-width: 599px) {
  .accueil main > #reserver { padding-bottom: clamp(72px, 9vw, 128px); }
  .accueil main > #reserver .arrivee-titre { padding-inline: 14px; }
}
/* un seul panneau blanc posé sur les bandes */
.accueil main > #reserver .arrivee-kicker,
.accueil main > #reserver .arrivee-titre,
.accueil main > #reserver .resa-form { background: none; padding: 0; }
.arrivee-panneau {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 72px);
  background: #FAFAF7; box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

/* Bannière : contenu réparti sur toute la hauteur (maquette d'Aurélien, 2026-10-09) */
@media (min-width: 900px) {
  .accueil main > .banniere { padding-block: 0; min-height: clamp(560px, 41.5vw, 820px); }
  .accueil .banniere-texte { justify-content: space-between; padding: clamp(36px, 2.8vw, 54px) 0 clamp(56px, 5vw, 100px); }
}

/* Trait sous l'en-tête sur toute la largeur de l'écran (maquette d'Aurélien, 2026-10-09) */
.site-header { position: relative; border-bottom: 0; }
.site-header::after {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  border-bottom: var(--rule); pointer-events: none;
}
.accueil .banniere-meta--haut .tricolore { margin-left: 14px; }
/* Drapeau de la bannière : un peu plus épais, blanc mieux détaché du crème */
.accueil .banniere-meta--haut .tricolore { height: 5px; }
.accueil .banniere-meta--haut .tricolore span:nth-child(2) { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .14); }

/* Cartes projet : vidéo lisible sur place + titre cliquable vers la page projet (2026-10-09) */
.carte { gap: 14px; }
.carte-media > .media { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; }
.carte-media .dossard-sm { pointer-events: none; }
.carte-media .facade-play { transform: scale(.85); }
.carte-titre { font-size: 20px; font-weight: 700; line-height: 1.25; }
.carte--vertical .carte-titre { font-size: 17px; }
.carte-titre a { color: var(--c-bitume); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .25s; padding-bottom: 2px; }
.carte-titre a::after { content: " →"; }
.carte-titre a:hover, .carte-titre a:focus-visible { background-size: 100% 2px; color: var(--c-bitume); }
.carte:hover .carte-titre { text-decoration: none; }
.carte:hover .carte-media img, .carte:focus-visible .carte-media img { transform: none; }
.carte-media:has(iframe) .dossard-sm, .carte-media:has(video[controls]) .dossard-sm { display: none; } /* ne pas masquer les commandes du lecteur */

/* Cartes projet : formes adoucies (coins arrondis, ombre légère) */
.carte-media {
  border-radius: 16px; border-top: 0;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 10px 26px rgba(17, 17, 17, .12);
  transition: transform .25s ease, box-shadow .25s ease;
}
.carte-media::before { /* rappel de la couleur du maillot : fin liseré en haut */
  content: ""; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 5px; background: var(--maillot); pointer-events: none;
}
.carte:hover .carte-media { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 16px 34px rgba(17, 17, 17, .18); }
.carte-media .dossard-sm { border-radius: 8px; }
.carte-media .facade-play { border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .carte-media, .carte:hover .carte-media { transition: none; transform: none; } }

/* Bouton lecture : rond sombre translucide + triangle blanc (modèle fourni par Aurélien) */
.facade-play, .carte-media .facade-play {
  display: flex; align-items: center; justify-content: center;
  width: clamp(56px, 22%, 84px); aspect-ratio: 1; height: auto; padding: 0;
  border: 0; border-radius: 50%; background: rgba(40, 40, 40, .55); color: #FFFFFF;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transform: none; transition: transform .2s ease, background-color .2s ease;
}
.facade-play svg { width: 46%; height: 46%; margin-left: 7%; }
.facade:hover .facade-play, .facade:focus-visible .facade-play { transform: scale(1.08); background: rgba(20, 20, 20, .7); border-bottom-width: 0; }
.showreel-bloc .facade-play { width: 96px; }

/* Tailles des cartes (2026-10-09) : verticales -20 % (258 → ~206 px), horizontales +50 % (355 → ~530 px) */
@media (min-width: 768px) {
  .grille-projets--vertical { grid-template-columns: repeat(auto-fill, 206px); }
  .grille-projets--horizontal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }
}

/* Showreel (2026-10-09) : coins arrondis comme les cartes, lecteur plus petit, section resserrée */
.showreel-bloc {
  border-radius: 16px; overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 12px 30px rgba(17, 17, 17, .14);
}
.accueil main > .hero { padding-block: clamp(40px, 4.5vw, 64px); }
@media (min-width: 900px) {
  .hero--vertical {
    grid-template-columns: minmax(0, 560px) 260px;
    justify-content: center; column-gap: clamp(48px, 7vw, 120px);
  }
}
.showreel-bloc:has(.media--vertical) { max-width: 260px; }

/* Raccourcis de format : liens qui font défiler jusqu'au groupe (plus de filtre) */
.tag-lien { text-decoration: none; color: var(--c-bitume); cursor: pointer; transition: border-color .2s, background-color .2s; }
.tag-lien:hover, .tag-lien:focus-visible { border-color: var(--c-bitume); background: var(--c-fond-chaud) !important; color: var(--c-bitume); }
.tag-lien::after { content: "↓"; margin-left: 2px; }
.groupe-titre { scroll-margin-top: 24px; }
.ph-point .ph-sous { font-weight: 400; }

/* Réservation v3 : damier noir et blanc + liseré arc-en-ciel des champions du monde au milieu */
.accueil main > #reserver::before { background: #FAFAF7; }
.accueil main > #reserver::after {
  display: block; content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; margin-left: -50vw;
  top: 22%; bottom: 22%; height: auto; border: 0; transform: none;
  background:
    linear-gradient(180deg,
      var(--rb-1) 0 20%, var(--rb-2) 20% 40%, var(--rb-3) 40% 60%, var(--rb-4) 60% 80%, var(--rb-5) 80% 100%)
      center / 100% 30px no-repeat,
    repeating-conic-gradient(#111111 0 25%, #FFFFFF 0 50%) center / 64px 64px;
  box-shadow: inset 0 1px 0 #111111, inset 0 -1px 0 #111111;
}
@media (max-width: 599px) {
  .accueil main > #reserver::after { background-size: 100% 20px, 40px 40px; }
}
/* damier calé sur des cases entières : 4 rangées, centré verticalement sur le panneau */
.accueil main > #reserver::after { top: 50%; bottom: auto; height: 256px; margin-top: -128px; background-position: center, center top; }
@media (max-width: 599px) {
  .accueil main > #reserver::after { height: 160px; margin-top: -80px; }
}

/* Damier v2 : cases de 24 px, jamais coupées.
   - 7 rangées ; la ligne arc-en-ciel occupe exactement la 4e (au centre) ;
   - largeur du damier = multiple de 96 px, centré : une frontière de case tombe au milieu de l'écran,
     et le panneau (largeur multiple de 96 px) a ses bords pile entre deux cases ;
   - plus de liseré noir autour. */
.accueil main > #reserver::after {
  --case: 24px;
  height: calc(var(--case) * 7); margin-top: calc(var(--case) * -3.5);
  width: 100vw; width: round(down, 100vw, calc(var(--case) * 4));
  left: 50%; margin-left: 0; transform: translateX(-50%);
  background:
    linear-gradient(180deg,
      var(--rb-1) 0 20%, var(--rb-2) 20% 40%, var(--rb-3) 40% 60%, var(--rb-4) 60% 80%, var(--rb-5) 80% 100%)
      0 calc(var(--case) * 3) / 100% var(--case) no-repeat,
    repeating-conic-gradient(#111111 0 25%, #FFFFFF 0 50%) 0 0 / calc(var(--case) * 2) calc(var(--case) * 2);
  box-shadow: none;
}
.accueil main > #reserver .arrivee-panneau { box-sizing: border-box; width: min(100%, 1056px); width: round(down, min(100%, 1056px), 96px); }
@media (max-width: 599px) {
  .accueil main > #reserver::after { --case: 16px; background-size: 100% var(--case), calc(var(--case) * 2) calc(var(--case) * 2); }
  .accueil main > #reserver .arrivee-panneau { width: round(down, 100%, 64px); }
}

/* FAQ : environ 15 % d'espace vertical en moins (112 → 95 px en haut et en bas sur grand écran) */
.accueil main > #faq { padding-block: clamp(54px, 6.8vw, 95px); }
.accueil main > #reserver .arrivee-panneau { width: min(100%, 1152px); width: round(down, min(100%, 1152px), 96px); padding-inline: clamp(20px, 3vw, 48px); }
@media (max-width: 599px) { .accueil main > #reserver .arrivee-panneau { width: round(down, 100%, 64px); } }

/* Pied de page : icônes des réseaux */
.site-footer a.reseau { display: inline-flex; align-items: center; gap: 10px; }
.reseau-icone { display: inline-flex; flex: none; transition: transform .2s; }
.reseau-icone svg { display: block; }
.site-footer a.reseau:hover .reseau-icone { transform: scale(1.1); }
.offres-note:empty { display: none; }

/* Formules (2026-10-09) : coins arrondis comme les cartes projets, couleurs du maillot plus présentes.
   Vert = sprinteur, jaune = leader, Grand Tour = maillot blanc à pois rouges. */
.offre, .offre--jaune {
  border: 0; border-radius: 16px; overflow: hidden; padding-top: 34px;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 12px 30px rgba(17, 17, 17, .10);
}
.offre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: var(--maillot); }
.offre--pois::before {
  height: 16px; background-color: #FFFFFF; border-bottom: 1px solid rgba(225, 37, 27, .25);
  background-image: radial-gradient(circle, var(--c-pois) 0 3.2px, transparent 3.7px);
  background-size: 14px 14px; background-position: 3px 1px;
}
.offre--vert .offre-nom { color: var(--c-vert); }
.offre--pois .offre-nom { color: var(--c-pois-texte); }

/* Bouton « Réserver un appel » aux couleurs de la formule */
.offre .offre-cta { border-radius: 10px; border-width: 2px; transition: transform .15s, filter .15s, box-shadow .15s; }
.offre .offre-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17, 17, 17, .18); }
.offre--vert .offre-cta { background: var(--c-vert); border-color: var(--c-vert); color: #FFFFFF; }
.offre--vert .offre-cta:hover { background: #084A2F; color: #FFFFFF; }
.offre--jaune .offre-cta { background: var(--c-jaune); border-color: var(--c-jaune); color: var(--c-bitume); }
.offre--jaune .offre-cta:hover { background: #F2C900; color: var(--c-bitume); }
.offre--pois .offre-cta {
  border-color: var(--c-pois); color: var(--c-pois-texte); background-color: #FFFFFF;
  background-image: radial-gradient(circle, var(--c-pois) 0 4px, transparent 4.6px);
  background-size: 20px 20px; background-position: 5px 4px;
  text-shadow: 0 0 3px #FFF, 0 0 3px #FFF, 0 0 4px #FFF, 0 0 6px #FFF;
}
.offre--pois .offre-cta:hover { background-color: #FFF4F3; color: var(--c-pois-texte); }
/* Panneau « Réservez un appel gratuit » : ombre portée plus marquée */
.accueil main > #reserver .arrivee-panneau { box-shadow: 0 2px 6px rgba(0, 0, 0, .10), 0 18px 40px rgba(0, 0, 0, .22), 0 40px 80px rgba(0, 0, 0, .16); }
.offre-cta-txt { display: inline-flex; align-items: center; gap: 14px; }
.offre--pois .offre-cta { text-shadow: none; padding-block: 12px; }
.offre--pois .offre-cta-txt { background: #FFFFFF; padding: 6px 16px; border-radius: 999px; box-shadow: 0 0 0 2px #FFFFFF; }

/* Logos Instagram / YouTube : un peu plus grands, avec ombre portée */
.reseau-icone svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) drop-shadow(0 4px 8px rgba(0, 0, 0, .18)); }
/* Grand Tour : pois en quinconce (comme le maillot), texte du bouton en noir */
.offre--pois .offre-cta {
  color: var(--c-bitume);
  background-image: radial-gradient(circle, var(--c-pois) 0 3.6px, transparent 4.2px), radial-gradient(circle, var(--c-pois) 0 3.6px, transparent 4.2px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
}
.offre--pois .offre-cta:hover { color: var(--c-bitume); }
.offre--pois::before {
  background-image: radial-gradient(circle, var(--c-pois) 0 2.6px, transparent 3.1px), radial-gradient(circle, var(--c-pois) 0 2.6px, transparent 3.1px);
  background-size: 16px 16px, 16px 16px; background-position: 0 0, 8px 8px;
}
/* Grand Tour : bandeau du haut en rouge plein (les pois restent sur le bouton) */
.offre--pois::before { height: 12px; background: var(--c-pois); border-bottom: 0; }

/* =====================================================================
   COINS LÉGÈREMENT ARRONDIS PARTOUT (2026-10-09)
   Petits éléments : 8 px · blocs : 14-16 px. Les bandes pleine largeur (bannière, photo) restent droites.
   ===================================================================== */
.btn-maillot, .btn-ligne, .nav .nav-contact, .btn-avis, .media-btn,
.tag, .tag-lien, .groupe-num, .haut-de-page, .barre-resa,
.champ input, .champ select, .champ textarea, .resa-champ select,
.form-statut, .placeholder { border-radius: 8px; }
.surligne { border-radius: 4px; }
.faq-item { border-radius: 12px; overflow: hidden; }
.faq-tete .section-intro { border-radius: 0; }
.avis-carte, .form-avis, .avis-vide, .note-globale, .recit-bloc, .etape-suivante,
.media, .portrait, .galerie img, .dossard-xl, .resa-calendrier, .profil-v { border-radius: 14px; overflow: hidden; }
.arrivee, .accueil main > #reserver .arrivee-panneau { border-radius: 16px; }
.accueil main > #reserver { border-radius: 0; }
/* Profil d'étape : bloc carte + panneau de détail collés = un seul bloc arrondi */
.profil-h { border-radius: 16px 16px 0 0; }
.ph-detail { border-radius: 0 0 16px 16px; }
/* Le showreel et les cartes projets gardent leurs 16 px */
.showreel-bloc .media, .carte-media .media { border-radius: 0; }
/* Bouton Grand Tour : texte noir directement sur les pois, sans pastille blanche */
.offre--pois .offre-cta-txt { background: none; padding: 0; box-shadow: none; }
.offre--pois .offre-cta { padding-block: 16px; font-weight: 800; }
/* Échappée : jaune plus clair, celui du maillot jaune (même jaune que l'étiquette du showreel) */
.offre--jaune { --maillot: var(--c-jaune-vif); }
.offre--jaune .offre-cta { background: var(--c-jaune-vif); border-color: var(--c-jaune-vif); }
.offre--jaune .offre-cta:hover { background: #F7DE00; border-color: #F7DE00; }
/* Bouton Grand Tour : les pois s'effacent sous le texte (fondu doux, pas de bandeau), restent sur les côtés */
.offre--pois .offre-cta { position: relative; isolation: isolate; background-image: none; background-color: #FFFFFF; }
.offre--pois .offre-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(circle, var(--c-pois) 0 3.6px, transparent 4.2px), radial-gradient(circle, var(--c-pois) 0 3.6px, transparent 4.2px);
  background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px;
  -webkit-mask-image: linear-gradient(90deg, #000 0 22%, transparent 30% 70%, #000 78% 100%);
          mask-image: linear-gradient(90deg, #000 0 22%, transparent 30% 70%, #000 78% 100%);
}
.offre--pois .offre-cta:hover { background-color: #FFF4F3; }
/* zone sans pois de largeur fixe autour du texte, quelle que soit la largeur du bouton */
.offre--pois .offre-cta::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 128px), transparent calc(50% - 104px), transparent calc(50% + 104px), #000 calc(50% + 128px), #000 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(50% - 128px), transparent calc(50% - 104px), transparent calc(50% + 104px), #000 calc(50% + 128px), #000 100%);
}
/* FAQ : cadres fermés sur les 4 côtés (l'accent jaune de la question ouverte passe en ombre intérieure) */
.faq-item, .faq-item:hover, .faq-item[open] { border: 1px solid var(--c-filet-clair); }
.faq-item:hover { border-color: var(--c-bitume); }
.faq-item[open] { border-color: #E9E1CF; box-shadow: inset 4px 0 0 var(--c-jaune-vif); }
/* Pois du bouton Grand Tour : dessinés en SVG par js/offres.js (aucun pois sur le texte) */
.offre--pois .offre-cta { overflow: hidden; }
.offre--pois .offre-cta::before { display: none; }
.pois-svg { position: absolute; inset: 0; z-index: -1; pointer-events: none; fill: var(--c-pois); }
/* Échappée : coches en jaune maillot (fin contour sombre pour rester lisibles sur le blanc) */
.offre--jaune .offre-coche { color: var(--c-jaune-vif); filter: drop-shadow(0 0 .5px #6B5B00) drop-shadow(0 0 .5px #6B5B00); }
/* Bouton lecture v2 : rond plus petit et plus clair, triangle plus grand, centré sur son centre de gravité */
.facade-play, .carte-media .facade-play { width: clamp(44px, 15%, 62px); background: rgba(30, 30, 30, .32); }
.showreel-bloc .facade-play { width: 68px; }
.facade-play svg { width: 60%; height: 60%; margin-left: 0; }
.facade:hover .facade-play, .facade:focus-visible .facade-play { background: rgba(20, 20, 20, .5); }

/* Classement par formule : couleurs du maillot de chaque formule */
[data-formule="sprint"]     { --maillot: var(--c-vert); --maillot-texte: var(--c-vert); }
[data-formule="echappee"]   { --maillot: var(--c-jaune-vif); --maillot-texte: #8A6D00; }
[data-formule="grand-tour"] { --maillot: var(--c-pois); --maillot-texte: var(--c-pois-texte); }
.pastille--sprint { width: 11px; height: 18px; background: var(--c-vert); border-left: 3px solid var(--c-menthe); border-radius: 2px; }
.pastille--echappee { width: 11px; height: 18px; background: var(--c-jaune-vif); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); border-radius: 2px; }
.groupe-vide { font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; color: var(--c-texte-3); padding: 8px 0; }
/* Inversion : Échappée = maillot à pois, Grand Tour = maillot jaune */
[data-formule="echappee"]   { --maillot: var(--c-pois); --maillot-texte: var(--c-pois-texte); }
[data-formule="grand-tour"] { --maillot: var(--c-jaune-vif); --maillot-texte: #8A6D00; }
.pastille--grand-tour { width: 11px; height: 18px; background: var(--c-jaune-vif); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); border-radius: 2px; }
/* Grand Tour : nom en jaune maillot, fin contour sombre pour rester lisible sur le blanc */
.offre--jaune .offre-nom { color: var(--c-jaune-vif); -webkit-text-stroke: 1px #6B5B00; paint-order: stroke fill; text-shadow: 0 2px 0 rgba(107, 91, 0, .25); }
/* Grand Tour : nom en noir surligné jaune maillot (comme « profil d'étape » dans la bannière) — lisible et bien jaune */
.offre--jaune .offre-nom {
  color: var(--c-bitume); -webkit-text-stroke: 0; text-shadow: none;
  align-self: flex-start; background: var(--c-jaune-vif); padding: 4px 10px 6px; border-radius: 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Noms des 3 formules surlignés à la couleur de leur maillot (même idée que Grand Tour) */
.offre .offre-nom {
  align-self: flex-start; padding: 4px 10px 6px; border-radius: 4px;
  -webkit-text-stroke: 0; text-shadow: none;
}
.offre--vert .offre-nom { background: var(--c-vert); color: #FFFFFF; }
.offre--pois .offre-nom { background: var(--c-pois); color: #FFFFFF; }
.offre--jaune .offre-nom { background: var(--c-jaune-vif); color: var(--c-bitume); }

/* Bannière mobile (2026-10-09) : le cycliste reste visible sous le texte, en bandeau diagonal pleine largeur */
@media (max-width: 899px) {
  .accueil main > .banniere::after {
    display: block; position: relative; top: auto; right: auto; bottom: auto;
    width: 100vw; margin-left: calc((100% - 100vw) / 2);
    height: clamp(240px, 68vw, 460px);
    clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    background: url("../assets/img/fond-grimpeur-v4.webp") 55% 50% / cover no-repeat;
  }
  .accueil main > .banniere { padding-bottom: 0; }
}


/* =====================================================================
   PROFIL D'ÉTAPE SUR MOBILE (2026-10-10) : version verticale (complète d'un coup d'œil)
   habillée comme la carte d'ordinateur : vue aérienne IGN, textes blancs, relief en facettes.
   ===================================================================== */
.accueil #methode .profil-v, .profil-v {
  --ph-encre: #FFFFFF;
  background:
    linear-gradient(180deg, rgba(10, 28, 52, .62) 0%, rgba(14, 26, 22, .58) 45%, rgba(10, 16, 14, .66) 100%),
    url("../assets/img/profil-fond-aravis-ign2.webp") 30% 50% / cover no-repeat,
    #2A6FC9;
  border: 0; border-radius: 16px; color: var(--ph-encre);
}
.profil-v .pv-legende { color: rgba(255, 255, 255, .82); }
.profil-v .pv-ligne { border-top-color: rgba(255, 255, 255, .8); }
.profil-v .pv-nom { color: #FFFFFF; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.profil-v .pv-detail, .profil-v .pv-desc { color: rgba(255, 255, 255, .86); }
.profil-v .pv-chevron { border-color: #FFFFFF; }
.profil-v .pv-etape.is-ouvert .pv-nom { text-decoration: underline 2px; text-underline-offset: 4px; }
.profil-v::after {
  content: "Fond : relief et photos aériennes © IGN"; display: block; padding: 6px 0 0 50px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em; color: rgba(255, 255, 255, .7);
}

/* Avis réservés aux clients (sans lien d'invitation) */
.avis-reserve { max-width: 62ch; padding: 18px 20px; border: 1.5px solid var(--c-bitume); background: var(--c-blanc); font-size: 16px; line-height: 1.55; }
.form-avis[hidden] { display: none !important; }