/* Mises en page communes aux pages du site. Tout vient des tokens. */

/* ── Duos : texte d'un cote, data ou image de l'autre ── */
.duo-texte-data, .duo-texte-image { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 900px) {
  .duo-texte-data { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); }
  .duo-texte-image { grid-template-columns: 1.2fr 0.8fr; gap: var(--space-16); }
}
.figure-data, .figure-portrait { margin: 0; }
.figure-portrait img { width: 100%; filter: grayscale(0.15) contrast(1.05); }

.profil-nom {
  font-family: var(--font-titre);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.duo-radars { display: grid; gap: var(--space-12); margin-top: var(--space-10); }
@media (min-width: 760px) { .duo-radars { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.duo-radars figure { margin: 0; }

.rangee-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-10); }

/* ── Les trois symptomes de la charge invisible ──
   Numeroter serait faux : ce n'est pas une sequence, ce sont trois faces du
   meme probleme. Un filet or les rattache sans les ordonner. */
.symptomes { list-style: none; display: grid; gap: var(--space-10); margin-top: var(--space-12); }
@media (min-width: 900px) { .symptomes { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } }
.symptomes li { border-top: var(--filet-epaisseur) solid var(--accent); padding-top: var(--space-6); }
.symptomes .titre-m { margin-bottom: var(--space-4); }
.symptomes .texte { font-size: var(--text-base); }

/* ── Citation de temoignage ── */
.citation {
  font-family: var(--font-titre);
  font-size: clamp(var(--text-2xl), 4.5vw, var(--text-5xl));
  line-height: 1.02;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  color: var(--text);
  margin-top: var(--space-6);
}
.citation-source {
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
  color: var(--text-faible);
  margin-top: var(--space-6);
}

/* ── Les deux portes ── */
.deux-portes { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .deux-portes { grid-template-columns: 1fr 1fr; } }
.deux-portes .carte { display: flex; flex-direction: column; align-items: flex-start; }
.deux-portes .carte + .carte { margin-top: 0; }
.deux-portes .cta-or, .deux-portes .cta-fantome { margin-top: auto; }

/* ── Listes de livrables ── */
/* Dix livrables empiles en colonne, c'est un ecran de telephone a faire defiler
   dix fois. Sous 620 px la liste se couche en rail : on balaie horizontalement,
   et la carte suivante depasse toujours d'un quart pour qu'on sache qu'elle est
   la. Au-dela, la grille classique reprend. */
.livrables { list-style: none; display: grid; gap: var(--space-6); margin-top: var(--space-10); }
@media (max-width: 619px) {
  .livrables {
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-6);
    padding-bottom: var(--space-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .livrables::-webkit-scrollbar { display: none; }
  .livrables li { scroll-snap-align: start; }
}
@media (min-width: 760px) { .livrables { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.livrables li { border-left: var(--filet-epaisseur) solid var(--accent); padding-left: var(--space-5); padding-block: var(--space-1); }
.livrables h3 { font-family: var(--font-corps); font-size: var(--text-base); font-weight: var(--weight-fort); margin-bottom: 0; line-height: 1.3; }
.livrables p { font-size: var(--text-sm); color: var(--text-faible); line-height: 1.55; margin-top: var(--space-2); }
.carte .livrables p { color: color-mix(in srgb, var(--text) 76%, transparent); }

/* ── Bloc de prix, uniquement sur PREPA STRIKING ── */
.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-8); }
.prix strong { font-family: var(--font-titre); font-size: var(--text-5xl); color: var(--accent-texte); line-height: 1; white-space: nowrap; }
.prix span { font-size: var(--text-sm); color: var(--text-faible); }

/* ── Questions frequentes ── */
.questions { margin-top: var(--space-10); }
.questions details { border-top: 1px solid var(--line); padding: var(--space-5) 0; }
.questions details:last-of-type { border-bottom: 1px solid var(--line); }
.questions summary { font-weight: var(--weight-fort); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-5); }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--accent-texte); font-weight: var(--weight-cta); flex: none; }
.questions details[open] summary::after { content: "–"; }
.questions p { margin-top: var(--space-4); color: var(--text-faible); font-size: var(--text-base); line-height: 1.65; }
.carte .questions p { color: color-mix(in srgb, var(--text) 76%, transparent); }

/* ── Index des ressources ── */
/* Onze ressources en une colonne, c'etait onze ecrans de telephone a faire
   defiler pour un index. Deux colonnes des le plus petit ecran, trois des qu'il
   y a la place. Sur telephone la carte ne garde que son titre : sur 170 px de
   large, un resume de vingt mots triple la hauteur de la tuile sans aider a
   choisir, alors que les titres, eux, disent deja de quoi il s'agit. Le resume
   reste dans la page, il se lit des qu'il y a la largeur pour. */
.ressources-grille { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-10); }
@media (min-width: 620px) { .ressources-grille { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
@media (min-width: 1100px) { .ressources-grille { gap: var(--space-6); } }
.ressources-grille a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: var(--space-4);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .1s ease-out;
}
.ressources-grille a:active { transform: scale(0.98); }
@media (min-width: 620px) {
  .ressources-grille a { display: block; padding: var(--space-6); }
}
.ressources-grille a:hover, .ressources-grille a:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.ressources-grille h3 { font-family: var(--font-titre); font-size: var(--text-lg); line-height: 1.05; text-transform: uppercase; }
.ressources-grille p { display: none; }
@media (min-width: 620px) {
  .ressources-grille h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
  .ressources-grille p { display: block; font-size: var(--text-sm); color: var(--text-faible); line-height: 1.55; }
}

/* ── Corps d'une page de ressource ── */
.contenu-ressource h2 { font-family: var(--font-titre); font-size: var(--titre-l); text-transform: uppercase; margin: var(--space-16) 0 var(--space-5); }
.contenu-ressource h3 { font-family: var(--font-titre); font-size: var(--titre-m); text-transform: uppercase; margin: var(--space-12) 0 var(--space-5); }
.contenu-ressource h4 { font-family: var(--font-corps); font-weight: var(--weight-fort); font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
/* Ce qui etait une citation dans la source : le blockquote empeche de copier-coller,
   on garde un paragraphe marque par un filet. */
.contenu-ressource .souligne {
  border-left: var(--filet-epaisseur) solid var(--accent);
  padding-left: var(--space-5);
  margin: var(--space-6) 0;
  color: color-mix(in srgb, var(--text) 88%, transparent);
}
.contenu-ressource code { font-family: ui-monospace, monospace; font-size: 0.92em; background: color-mix(in srgb, var(--text) 8%, transparent); padding: 0 var(--space-1); }
.contenu-ressource a { color: var(--accent-texte); }
.contenu-ressource p, .contenu-ressource li { max-width: var(--mesure); font-size: var(--text-base); line-height: 1.7; }
.contenu-ressource p { margin-bottom: var(--space-4); }
.contenu-ressource ul, .contenu-ressource ol { margin: 0 0 var(--space-6) var(--space-6); }
.contenu-ressource li { margin-bottom: var(--space-2); }
.contenu-ressource strong { font-weight: var(--weight-fort); }
/* Un tableau ne deborde jamais de l'ecran : il defile dans sa propre boite.
   Sur mobile il garde une largeur minimale lisible plutot que d'ecraser ses
   colonnes en colonnes d'un mot. */
.contenu-ressource table { width: 100%; min-width: 460px; border-collapse: collapse; margin-bottom: var(--space-6); font-size: var(--text-sm); }
.contenu-ressource th, .contenu-ressource td { border: 1px solid var(--line); padding: var(--space-3); text-align: left; }
.contenu-ressource th { font-weight: var(--weight-ui); background: color-mix(in srgb, var(--text) 6%, transparent); }
.tableau-large {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-6);
  /* un degrade sur le bord droit signale qu'il reste du contenu a faire defiler */
  background: linear-gradient(to left, var(--voile), transparent 24px);
}
.contenu-ressource .tableau-large table { margin-bottom: 0; }

/* ── Avant et apres chiffres. Pas d'image ici : certains athletes consentent aux
   chiffres et pas aux photos, et c'est le cas de la piece la plus parlante. ── */
.chiffres { list-style: none; margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.chiffres li {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: baseline;
  gap: var(--space-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.chiffres .mesure { font-size: var(--text-sm); color: var(--text-faible); }
.carte .chiffres .mesure { color: color-mix(in srgb, var(--text) 76%, transparent); }
.chiffres .avant { font-family: var(--font-titre); font-size: var(--text-2xl); color: var(--text-faible); }
.chiffres .fleche { color: var(--accent); font-weight: var(--weight-cta); }
.chiffres .apres { font-family: var(--font-titre); font-size: var(--text-3xl); color: var(--accent-texte); }
@media (max-width: 520px) {
  .chiffres li { grid-template-columns: 1fr auto auto auto; gap: var(--space-2); }
  .chiffres .apres { font-size: var(--text-2xl); }
}

/* ── Page de commande ── */
.commande { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .commande { grid-template-columns: 0.9fr 1.1fr; } }
.commande .carte + .carte { margin-top: 0; }

.recap { list-style: none; margin-top: var(--space-8); display: grid; gap: var(--space-3); }
.recap li { padding-left: var(--space-6); position: relative; font-size: var(--text-base); }
.recap li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--space-4); height: 2px; background: var(--accent); }

.total {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.total span { font-size: var(--text-sm); font-weight: var(--weight-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faible); }
.total strong { font-family: var(--font-titre); font-size: var(--text-5xl); color: var(--accent-texte); line-height: 1; }

/* Le consentement est un acte explicite : la case est grande et cliquable en entier. */
.consentement {
  display: flex; gap: var(--space-4); align-items: flex-start;
  margin-top: var(--space-10);
  padding: var(--space-5);
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.consentement + .consentement { margin-top: var(--space-3); }
.consentement:hover { border-color: var(--accent); }
.consentement input {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-width: 22px;
  border: 2px solid var(--line);
  background: transparent;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.consentement input:checked { background: var(--accent); border-color: var(--accent); }
.consentement input:checked::after {
  content: ""; position: absolute; left: 6px; top: 1px;
  width: 6px; height: 12px;
  border: 2px solid var(--sur-accent); border-top: none; border-left: none;
  transform: rotate(45deg);
}
.consentement a { color: var(--accent-texte); }

.moyens { display: grid; gap: var(--space-4); margin-top: var(--space-8); justify-items: stretch; }
.moyens .paiement { justify-content: center; }
.moyens .verrou-note { display: none; font-size: var(--text-sm); color: var(--text-faible); text-align: center; }
/* Nommer les moyens acceptes AVANT le clic : dans le paiement Stripe, PayPal
   n'apparait qu'une fois la page ouverte, et celui qui le cherche sur la page
   de vente repartirait en croyant qu'il n'y est pas. */
.moyens .moyens-acceptes {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faible);
}
.carte .moyens .moyens-acceptes { color: color-mix(in srgb, var(--text) 68%, transparent); }
.moyens.verrouille .moyens-acceptes { opacity: 0.35; }

.moyens.verrouille .paiement { opacity: 0.35; pointer-events: none; }
.moyens.verrouille .verrou-note { display: block; }

.rassurances { list-style: none; margin-top: var(--space-10); display: grid; gap: var(--space-4); }
.rassurances li { font-size: var(--text-sm); color: var(--text-faible); line-height: 1.6; padding-left: var(--space-6); position: relative; }
.rassurances li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: var(--space-4); height: 2px; background: var(--accent); }
.carte .rassurances li { color: color-mix(in srgb, var(--text) 76%, transparent); }

/* ── Temoignage filme ──
   Une facecam envoyee par un athlete, tournee au telephone : elle arrive donc en
   9:16. Aucun recadrage, aucun ratio force : `height: auto` laisse la video a son
   format natif, c'est la largeur seule qui la contient. Un `object-fit: cover`
   ici couperait l'image, et sur une preuve on ne recadre pas la personne.
   Rien ne se telecharge avant que le visiteur clique, seule l'image d'attente
   est chargee.

   La FIGURE prend toute la largeur disponible, seule la VIDEO est bridee. Sans
   cette separation, la legende heriterait des 190 px du lecteur et se casserait
   en cinq lignes etroites. */
.figure-video { margin: 0; text-align: center; }
.figure-video video {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  margin-inline: auto;
  background: var(--surface-bas);
  box-shadow: var(--ombre-lg);
}
.figure-video figcaption {
  font-size: var(--text-sm);
  color: var(--text-faible);
  margin: var(--space-5) auto 0;
  max-width: 32ch;
  line-height: 1.5;
}
.carte .figure-video figcaption { color: color-mix(in srgb, var(--text) 72%, transparent); }

/* ── Deux temoignages filmes cote a cote ──
   Sur la page qui vend le suivi, la preuve filmee vaut mieux qu'une citation :
   c'est l'athlete qui parle. Deux colonnes sur grand ecran, empilees en dessous. */
.videos-preuve { display: grid; gap: var(--space-12); margin-top: var(--space-12); }
@media (min-width: 760px) { .videos-preuve { grid-template-columns: 1fr 1fr; } }

/* ── Le tas de preuves ──
   Sur la page qui parle de Tom, les retours ne se lisent pas : ils se comptent.
   Des captures jetees en vrac, comme une pile posee sur une table, chacune
   legerement tournee et debordant sur sa voisine. Aucun cadre ni fond : elles
   sont posees a meme la page, ce qui laisse le zoom au survol depasser librement
   au lieu d'etre coupe par un bord.
   Sous 620 px, la pile ne se superpose pas : elle se couche. Empilees sur un
   ecran de telephone les captures ne seraient qu'une bouillie, et alignees en
   grille sage elles perdaient tout l'effet. Elles deviennent donc un rail qu'on
   balaie du doigt, gardant leurs rotations et se decalant une sur deux en
   hauteur, pour que le vrac survive au petit ecran. */
.tas-preuves {
  position: relative;
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: var(--space-6);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tas-preuves::-webkit-scrollbar { display: none; }
.tas-preuves img { scroll-snap-align: center; }
/* Toutes les planches font le meme 3 sur 4 : plus besoin de plafonner ni de
   recadrer, et le rang garde une hauteur constante. C'est ce qui manquait avant,
   ou des captures d'une ligne cotoyaient des captures de vingt lignes et
   laissaient des trous qu'on prenait pour un bug d'affichage. */
.tas-preuves img {
  display: block;
  flex: 0 0 58%;
  transform: rotate(var(--r));
}
/* Les planches portent deja leur ombre, dessinee capture par capture. Seules
   les affiches video, opaques et rectangulaires, en recoivent une du CSS. */
.tas-preuves img[src$=".jpg"] { box-shadow: var(--ombre-lg); }
@media (min-width: 620px) {
  .tas-preuves {
    display: block;
    aspect-ratio: 16 / 10;
    overflow-x: visible;
    padding-block: 0;
    margin-top: var(--space-10);
  }
  .tas-preuves img {
    position: absolute;
    width: var(--l);
    left: var(--x);
    top: var(--y);
    transform: rotate(var(--r));
    transition: transform .18s ease;
  }
  /* Au survol, la piece se redresse, grandit et se souleve : elle sort de la
     pile pour qui veut vraiment la lire. */
  .tas-preuves img:hover { transform: rotate(0deg) scale(1.4); z-index: 5; }
}
@media (prefers-reduced-motion: reduce) {
  .tas-preuves img { transition: none; }
  .tas-preuves img:hover { transform: rotate(var(--r)); }
}

/* ── Date de mise a jour d'une fiche ──
   Sur une fiche qui cite des etudes datees, savoir quand elle a ete revue fait
   partie de l'argument. */
.fiche-date {
  font-size: var(--text-xs);
  font-weight: var(--weight-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faible);
  margin-top: var(--space-6);
}
.carte .fiche-date { color: color-mix(in srgb, var(--text) 60%, transparent); }

/* ── Reperage des rails horizontaux ──
   Un contenu coupe net a droite se lit comme un defaut d'affichage. Le fondu
   dit qu'il continue, la mention dit comment y aller. Les deux disparaissent
   des que le rail a bouge ou qu'il touche son extremite : une indication qui
   reste apres avoir servi devient du bruit. */
.a-suivre {
  /* Un masque ne lit que l'opacite, jamais la teinte : n'importe quelle couleur
     opaque du systeme fait l'affaire, et aucune valeur n'est ecrite en dur. */
  -webkit-mask-image: linear-gradient(to right, var(--text) 82%, transparent 100%);
  mask-image: linear-gradient(to right, var(--text) 82%, transparent 100%);
}
.indice-rail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faible);
}
.indice-rail::after {
  content: "";
  width: var(--space-8);
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  animation: glisse 1.8s ease-in-out infinite;
}
@keyframes glisse {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50% { transform: translateX(6px); opacity: 1; }
}
.carte .indice-rail { color: color-mix(in srgb, var(--text) 62%, transparent); }
@media (min-width: 760px) { .indice-rail { display: none; } }
@media (prefers-reduced-motion: reduce) { .indice-rail::after { animation: none; } }