/* Systeme de styles Sentiers — partage par toutes les pages.
   Repris a l'identique du bloc <style> de SENTIERS.dc.html. */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #2d3329; -webkit-font-smoothing: antialiased; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }
a { color: #EFEAD9; text-decoration: none; }
a:hover { color: #8A9278; }
@keyframes sentiers-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sentiers-marquee-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes sentiers-pref { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.f-pref-txt { color: #2d3329; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .f-pref-txt {
    background: linear-gradient(90deg, #2d3329 0%, #666935 25%, #2d3329 50%, #666935 75%, #2d3329 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: sentiers-pref 3.4s linear infinite;
  }
}
@media (prefers-reduced-motion: reduce) { .f-pref-txt { animation: none; } }
.club-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px,1.4vw,18px); }
.club-box { background: #2d3329; border: 1px solid rgba(239,234,217,.14); border-radius: 22px;
  padding: clamp(22px,2.2vw,32px) clamp(16px,1.8vw,26px) clamp(28px,3vw,40px); }
@media (max-width: 900px) { .club-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ps-titre { font-size: clamp(28px, 5.5vw, 68px); }
@media (max-width: 360px) { .ps-titre { font-size: 24px; } }
.t-wall { display: flex; justify-content: center; align-items: flex-start; gap: clamp(24px,3vw,48px); max-height: clamp(520px,64vh,660px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%); }
.t-col { flex: 1 1 0; min-width: 0; max-width: 460px; }
.t-track { display: flex; flex-direction: column; will-change: transform; animation: sentiers-marquee-up var(--t-dur,48s) linear infinite; }
.t-wall:hover .t-track { animation-duration: calc(var(--t-dur,48s) * 2); }
.t-item { margin-bottom: clamp(16px,1.8vw,24px); }
@media (max-width: 900px) { .t-col-b { display: none; } }
@media (max-width: 1199px) { .t-col-c { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .t-track { animation: none; }
  .t-wall { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}
image-slot[id="hero"]::part(empty) { justify-content: flex-start; padding-top: 18vh; }

/* --- pages legales --- */
.legal h2 { font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.05; font-size: clamp(20px,2.4vw,28px); margin: 0 0 18px; color: #EFEAD9; }
.legal h3 { font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 14px; letter-spacing: .04em; margin: 26px 0 10px; color: #EFEAD9; }
.legal p, .legal li { font-size: 13.5px; line-height: 1.85; color: #878C88; margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 20px; }
.legal li { margin: 0 0 8px; }
.legal a { color: #8A9278; text-decoration: underline; text-underline-offset: 3px; }
.legal section { padding: 30px 0; border-top: 1px solid rgba(239,234,217,.14); }
.legal section:first-of-type { border-top: 0; }
.legal dl { margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 10px 24px; }
.legal dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #8A9278;
  font-family: 'Archivo', sans-serif; font-weight: 700; padding-top: 4px; }
.legal dd { margin: 0; font-size: 13.5px; line-height: 1.7; color: #EFEAD9; }
@media (max-width: 640px) { .legal dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal dd { margin-bottom: 14px; } }
.a-completer { display: inline-block; background: rgba(138,146,120,.18); border: 1px dashed #8A9278;
  border-radius: 8px; padding: 1px 8px; color: #EFEAD9; font-style: normal; }

/* --- lueur qui parcourt le contour d'un bouton --- */
.etincelle { position: relative; overflow: hidden; isolation: isolate; }
.etincelle > .etincelle-lueur {
  position: absolute; top: 0; left: 0; width: var(--lueur-taille, 110px); aspect-ratio: 1;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, var(--lueur, #EFEAD9), transparent 70%);
  offset-path: var(--chemin); offset-distance: 0%; offset-rotate: 0deg; }
.etincelle.est-prete > .etincelle-lueur {
  opacity: var(--lueur-force, .85);
  animation: etincelle var(--lueur-duree, 3.4s) linear infinite; }
.etincelle > .etincelle-texte {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 14px; }
@keyframes etincelle { to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .etincelle.est-prete > .etincelle-lueur { animation: none; opacity: 0; } }

/* ==========================================================================
   Correctifs mobile — audit du 18 août 2026
   Uniquement des tailles, des espacements et des points de rupture :
   ni couleur, ni police, ni structure ne changent.
   ========================================================================== */

/* --- 1. Le contenu passait sous l'en-tête fixe ----------------------------
   La <nav> est en flex-wrap : elle tombe sur deux puis trois lignes quand
   l'écran se resserre, et l'en-tête dépasse alors les 60 px de retrait
   appliqués au <main>. Hauteurs relevées au banc de mesure :
     320→94   375→96   388→97   392→69   480→73   600→78   700→57
   Le retrait suit désormais ces paliers. */
:root { --haut-entete: 60px; }
/* Depuis le passage au menu déroulant, l'en-tête mobile tient sur une seule
   ligne : 69 px mesurés à 320 comme à 767. Le retrait suit. */
@media (max-width: 767px) { :root { --haut-entete: 72px; } }

/* --- 2. Zoom automatique de Safari iOS ------------------------------------
   iOS agrandit la page dès qu'un champ descend sous 16 px, en pleine saisie :
   la page se décale et l'utilisateur perd le fil. Sur un formulaire relié à
   une campagne, c'est un abandon de plus. Seule la taille change.
   Le palier va jusqu'à 1024 px : l'iPad zoome lui aussi. */
@media (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}

/* --- 3. Grilles à deux colonnes sur écran étroit --------------------------
   À 320 px, chaque carte tombait à 134 px de large pour du texte de 11,5 px :
   deux ou trois mots par ligne. Une seule colonne sous 480 px. */
@media (max-width: 480px) {
  .grille-2 { grid-template-columns: minmax(0,1fr) !important; }
  /* Date de naissance : jour et année tombaient à 64 px, soit 26 px utiles
     une fois le rembourrage déduit — « Jour » et « Année » n'y tenaient pas. */
  .grille-date { grid-template-columns: minmax(0,1fr) !important; }
}

/* ==========================================================================
   En-tête : menu déroulant sur écran étroit
   Sur ordinateur, rien ne change — le burger et le logo mobile sont masqués.
   ========================================================================== */
.entete-burger, .entete-logo-mobile { display: none; }

@media (max-width: 767px) {
  .entete { position: fixed; }

  /* burger à gauche, cible tactile de 44 px */
  .entete-burger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; flex: none; margin-left: -10px;
    background: none; border: 0; padding: 0 10px; cursor: pointer;
  }
  .entete-burger > span {
    display: block; height: 2px; width: 22px; background: #EFEAD9;
    border-radius: 2px; transition: transform .18s ease, opacity .18s ease;
  }
  .entete.menu-ouvert .entete-burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .entete.menu-ouvert .entete-burger > span:nth-child(2) { opacity: 0; }
  .entete.menu-ouvert .entete-burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* logo au centre */
  .entete-logo-mobile { display: flex; align-items: center; justify-content: center; flex: 1; }
  .entete-logo-mobile img { height: 20px; width: auto; display: block; }

  /* le logo qui vivait au milieu des liens n'a plus lieu d'être */
  .entete-logo-bureau { display: none !important; }

  /* icône compte à droite */
  .entete-compte { flex: none; }

  /* les liens deviennent un panneau déroulant sous l'en-tête */
  .entete-nav {
    display: none !important;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; flex-wrap: nowrap !important;
    align-items: stretch !important; gap: 0 !important;
    background: #666935; border-bottom: 1px solid rgba(239,234,217,.22);
    padding: 6px 0 10px;
    box-shadow: 0 18px 40px rgba(24,28,20,.35);
  }
  .entete.menu-ouvert .entete-nav { display: flex !important; }
  .entete-nav > a {
    display: flex; align-items: center; min-height: 48px;
    padding: 0 clamp(16px,4vw,56px);
    font-size: 12px !important; letter-spacing: .18em;
    border-top: 1px solid rgba(239,234,217,.14);
  }
  .entete-nav > a:first-child { border-top: 0; }
}

/* ==========================================================================
   Pied de page sur écran étroit
   Une seule colonne, tout aligné à gauche : intitulés de rubrique en gras et
   plus grands, liens empilés dessous. Rien n'est centré ni ferré à droite —
   sur un écran étroit, un bord gauche commun est le seul repère de lecture.
   ========================================================================== */
@media (max-width: 767px) {
  .pied-rangee {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(28px,6vw,40px) !important;
  }
  .pied-col {
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
  }
  /* intitulé de rubrique : plus grand, plus lourd, dans la couleur crème */
  .pied-col > div:first-child {
    width: 100% !important;
    text-align: left !important;
    font-size: 15px !important;
    letter-spacing: .08em !important;
    color: #EFEAD9 !important;
    margin-bottom: 4px !important;
  }
  .pied-col > div:first-child b { font-weight: 700; }
  .pied-col a { font-size: 15px !important; line-height: 1.6; }

  /* le logo géant mange l'écran sur un téléphone */
  footer > div > div:first-child img { max-width: 78% !important; }
}

/* Le copyright passe sur deux lignes centrées. */
.pied-copyright { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5ch; }
@media (max-width: 767px) {
  .pied-copyright > span { flex: 0 0 100%; }
  .pied-copyright { text-align: left; justify-content: flex-start; }
}

/* ==========================================================================
   Duos de boutons : même largeur et même hauteur sur écran étroit
   Les deux CTA sont en inline-flex, ils se dimensionnaient donc sur la
   longueur de leur texte — « Rejoins le club » et « Les formules » côte à
   côte n'avaient ni la même largeur ni tout à fait la même hauteur, l'un
   portant une bordure de 2 px que l'autre n'a pas.
   ========================================================================== */
@media (max-width: 767px) {
  .duo-cta { display: grid !important; grid-template-columns: 1fr; gap: 12px !important; }
  .duo-cta > a {
    display: flex !important;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 52px;
    padding-top: 0 !important; padding-bottom: 0 !important;
    align-items: center;
  }
}

/* Titre « Les volcans comme terrain d'entraînement » : « d'entraînement » fait
   14,3 em de large. Sous 360 px, même à 23 px il ne tient pas sur une ligne. */
@media (max-width: 360px) {
  .titre-volcans, .titre-volcans span { font-size: 19px !important; }
}

/* Fiche coach — « En bref » : les cinq pastilles s'empilent sous 768 px. */
@media (max-width: 767px) {
  .bref-grille { grid-template-columns: minmax(0,1fr) !important; }
  .bref-grille > div { grid-column: auto !important; }
}

/* ==========================================================================
   Accueil, section « Pourquoi Sentiers » — ajustements mobile
   ========================================================================== */
/* Le saut ajouté ne sert que sur mobile : sur ordinateur la phrase respire
   déjà sur deux lignes, il ne doit pas en créer une troisième. */
.saut-mobile { display: none; }
@media (max-width: 767px) {
  .saut-mobile { display: inline; }
  /* La première ligne imposée mesure 25,2 em : à 14 px elle fait 353 px pour
     335 disponibles, et repartait sur une quatrième ligne. */
  .chapo-pourquoi { font-size: 13px !important; }
  /* « 2 ENTRAÎNEMENTS » mesure 9,69 em, la colonne n'offre que 130 px :
     il faut descendre à 13 px pour que le titre tienne sur deux lignes. */
  .bulle-titre-long { font-size: 13px !important; letter-spacing: 0 !important; }
}

/* Bloc « Pré-inscriptions » de la page d'accueil.
   La valeur « 4 séances offertes » est bien plus longue que l'ancien
   « Offert » : mesurée, la ligne la plus large demande 296 px, et le bloc
   n'en offre que 280 sur un écran de 320. En dessous de 360 px la valeur
   passe donc sous son libellé ; au-dessus, la mise en page reste inchangée. */
@media (max-width: 359px) {
  .pi-ligne { flex-direction: column; gap: 6px !important; }
}

/* Le bloc d'engagement de la page Inscription est justifié : sur une colonne
   de 280 px et en chasse fixe, la justification creuse des rivières entre les
   mots. On revient au fer à gauche sur mobile. */
@media (max-width: 767px) {
  .bloc-engagement p { text-align: left !important; }
}