/* =========================================================
   LCS Performance – mise en page
   Couleurs, espaces et tailles repris de la maquette.
   ========================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("polices/plus-jakarta-sans-latin.woff2") format("woff2");
}

:root {
  --violet: #8b3dff;
  --rose: #d946a8;
  --noir: #0a0a0a;
  --blanc: #f4f4f1;
  --gris-texte: #b9b9b4;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--noir);
  color: var(--blanc);
  line-height: 1.6;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 3px;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn-violet {
  background: var(--violet);
  color: #fff;
}

.btn-violet:hover {
  background: #7a22ff;
}

.btn-line {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}

.btn-line:hover {
  border-color: #fff;
}

/* ---------- Navigation ---------- */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
}

/* Barre du haut : Boutique à gauche, logo au centre, Candidater à droite */
.nav-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 88px;
}

/* Menu et Boutique calés plus à gauche que le reste de la page */
.nav .wrap.nav-in {
  max-width: none;
  padding-left: 32px;
  padding-right: 32px;
}

.nav-in .logo {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}

.nav-links {
  display: contents;
}

#lien-boutique {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}


.logo {
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

#lien-boutique {
  font-size: 15px;
}

.nav-links a:not(.btn) {
  padding: 12px 0;
  transition: color 0.2s;
}

.nav-links a:not(.btn):hover {
  color: #fff;
  opacity: 0.75;
}

/* ---------- Barre du haut fixe (page d'accueil) ---------- */
.nav-fixe {
  position: fixed;
  z-index: 20;
  transition: background-color 0.25s, border-color 0.25s;
  border-bottom: 1px solid transparent;
}

.nav-fixe .nav-in {
  transition: height 0.25s;
}

/* La barre reste transparente ; le texte passe en noir au-dessus des sections claires */
.nav-fixe {
  color: var(--blanc);
}

.nav-fixe .logo,
.nav-fixe .menu-bouton,
.nav-fixe #lien-boutique {
  color: inherit;
  transition: color 0.25s;
}

.nav-fixe.sur-clair {
  color: var(--noir);
}

.nav-fixe.defile .nav-in {
  height: 64px;
}

/* ---------- Menu déroulant des rubriques (en haut à gauche) ---------- */
.nav-gauche {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

.menu {
  position: relative;
}

.menu-bouton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

/* Icône « trois traits » */
.menu-icone,
.menu-icone::before,
.menu-icone::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.menu-icone {
  position: relative;
}

.menu-icone::before,
.menu-icone::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-icone::before {
  top: -6px;
}

.menu-icone::after {
  top: 6px;
}

.menu-liste {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #0e0e0e;
  border: 1px solid #2a2a2a;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.menu-liste a {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--gris-texte);
  transition: color 0.2s, background-color 0.2s;
}

.menu-liste a:hover {
  color: var(--blanc);
  background: #1e1e1e;
}

.menu-liste .menu-boutique {
  display: none;
  margin-top: 6px;
  border-top: 1px solid #2a2a2a;
  border-radius: 0 0 8px 8px;
}

.menu-liste a.actif {
  color: var(--blanc);
  box-shadow: inset 2px 0 0 var(--violet);
}

/* Les rubriques s'arrêtent sous la barre du haut quand on clique dessus */
main > section {
  scroll-margin-top: 64px;
}

/* ---------- Image provisoire (photo manquante) ---------- */
.ph {
  background: #1b1b1b repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.035) 14px 28px);
  color: #8a8a86;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 1px dashed #3a3a3a;
}

/* ---------- Hero (haut de page) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-ph,
.hero-img,
.hero-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-ph {
  border: 0;
  border-bottom: 1px dashed #3a3a3a;
  align-items: flex-start;
  padding-top: 120px;
}

.hero-ph span {
  color: #d6d6d1;
  border: 1px dashed #8a8a86;
  border-radius: 999px;
  padding: 6px 14px;
}

.hero-img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

.hero-veil {
  /* Voile sombre, renforcé en bas à gauche pour la lisibilité du texte */
  background:
    radial-gradient(120% 90% at 0% 100%, rgba(10, 10, 10, 0.55), transparent 70%),
    linear-gradient(to top, rgba(10, 10, 10, 0.35), transparent 60%),
    rgba(10, 10, 10, 0.4);
}

.hero-in {
  position: relative;
  width: 100%;
  padding-top: 140px;
  padding-bottom: 96px;
}

/* Surtitres : en majuscules */
.eyebrow {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rose);
  margin: 0 0 20px 0;
}

/* Titre du haut de page : sur deux lignes */
.h1 {
  font-size: 54px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
  max-width: 720px;
}

/* Accroche : sur une ligne quand l'écran est assez large */
.lead {
  font-size: 16px;
  color: #d6d6d1;
  margin: 0 0 36px 0;
  font-weight: 300;
}

.row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Sections (éléments communs) ---------- */
.sec {
  padding-top: 128px;
  padding-bottom: 128px;
}

.h2 {
  font-size: 44px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 20px 0;
}

.sub {
  font-size: 18px;
  font-weight: 300;
  max-width: 640px;
  margin: 0 0 64px 0;
  color: var(--gris-texte);
}

.h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.p {
  font-size: 16px;
  font-weight: 300;
  margin: 0;
  color: var(--gris-texte);
}

/* Textes justifiés, sans jamais couper un mot en fin de ligne */
.p,
.sub,
.quote {
  text-align: justify;
  -webkit-hyphens: manual;
  hyphens: manual;
  overflow-wrap: normal;
  word-break: normal;
}

.sec-light .p strong {
  font-weight: 600;
  color: var(--noir);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.card {
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 36px;
}

.num {
  font-size: 15px;
  font-weight: 600;
  color: var(--violet);
  margin: 0 0 28px 0;
}

/* ---------- Photos (avec image provisoire en dessous) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
}

.photo .ph,
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.photo .ph {
  padding: 24px;
}

.photo img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
}

/* ---------- Sections claires ---------- */
.sec-light {
  background: var(--blanc);
  color: var(--noir);
}

.sec-light .eyebrow {
  color: #7a22ff;
}

.sec-light .sub,
.sec-light .p {
  color: #4a4a47;
}

.sec-light .ph {
  background-color: #e3e3de;
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0, 0, 0, 0.04) 14px 28px);
  border-color: #bdbdb7;
  color: #6b6b66;
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
}

.card-l {
  border: 1px solid #d8d8d3;
  border-radius: 20px;
  padding: 36px;
  background: #fff;
}

.lien {
  font-weight: 600;
  font-size: 15px;
  color: #7a22ff;
  display: inline-block;
  padding: 10px 0;
}

.lien:hover {
  text-decoration: underline;
}

/* ---------- Le coach ---------- */
.coach-photo {
  height: 620px;
}

.coach-sous-titre {
  margin: -6px 0 24px 0;
  font-size: 18px;
  font-weight: 500;
  color: #7a22ff;
}

.coach-bio {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}

.coach-bio .p {
  font-size: 17px;
}

#coach .card-l .h3 {
  font-size: 18px;
}

#coach .card-l .p {
  margin-bottom: 10px;
}

/* ---------- Chiffres clés ---------- */
.stat {
  border-top: 1px solid #2f2f2f;
  padding-top: 28px;
}

.big {
  font-size: 84px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 14px 0;
}

.big em {
  font-style: normal;
  color: var(--rose);
}

/* Photos de course */
.resultats-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 64px;
}

.resultat {
  margin: 0;
  aspect-ratio: 3 / 4;
  max-width: 100%;
  border-radius: 16px;
}

.resultat .ph span {
  font-size: 12px;
}

/* ---------- Pour qui ---------- */
/* Les deux cartes « Notre coaching » ont la même hauteur */
.pour-toi {
  align-items: stretch;
}

.pour-toi-titre {
  margin-bottom: 40px;
}

.pour-toi {
  gap: 48px;
}

.pour-toi .h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.pour-toi ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pour-toi li {
  position: relative;
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid #d8d8d3;
  font-size: 15px;
  font-weight: 300;
}

.pour-toi li::before {
  position: absolute;
  left: 0;
  top: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.liste-oui li::before {
  content: "✓";
  background: var(--violet);
  color: #fff;
}

.liste-non li::before {
  content: "✕";
  background: #e3e3de;
  color: #6b6b66;
}

.pour-toi-non {
  color: #4a4a47;
}

/* ---------- Le parcours ---------- */
/* Fond blanc pur, légèrement teinté de violet et de rose dans les coins,
   pour se distinguer du fond cassé de « L'offre » juste au-dessus */
.sec-parcours {
  background:
    radial-gradient(60% 90% at 100% 0%, rgba(124, 45, 255, 0.12), transparent 70%),
    radial-gradient(50% 80% at 0% 100%, rgba(217, 70, 168, 0.1), transparent 70%),
    #ffffff;
  color: var(--noir);
  border-top: 1px solid #e4e4de;
}

.sec-parcours .eyebrow {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--noir);
  margin: 0;
}

/* Frise : une ligne épaisse continue, un rond par étape */
.parcours-etapes {
  list-style: none;
  margin: 64px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.parcours-etapes li {
  position: relative;
  border-top: 4px solid rgba(124, 45, 255, 0.25);
  padding: 32px 24px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.parcours-etapes li span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6d28d9;
  margin-bottom: 8px;
}

/* Rond sur la ligne, au début de chaque étape */
.parcours-etapes li::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px var(--violet);
}

/* ---------- Pour aller plus loin ---------- */
.titre-mention {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.titre-mention .h2 {
  margin: 0;
}

.mention {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--rose);
  color: var(--rose);
}

.plus-loin-cartes {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.plus-loin-cartes::-webkit-scrollbar {
  display: none;
}

/* Cartes qui se retournent : photo au recto, texte explicatif au verso */
.plus-loin-carte {
  flex: 0 0 calc((100% - 48px) / 3);
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  perspective: 1200px;
  cursor: pointer;
  border-radius: 20px;
  outline-offset: 4px;
}

.plus-loin-interieur {
  position: relative;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.plus-loin-carte.retournee .plus-loin-interieur,
.plus-loin-carte:focus-visible .plus-loin-interieur {
  transform: rotateY(180deg);
}

@media (hover: hover) {
  .plus-loin-carte:hover .plus-loin-interieur {
    transform: rotateY(180deg);
  }
}

.plus-loin-face {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Recto : titre écrit en bas de la photo */
.plus-loin-recto .h3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 64px 24px 22px;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent);
}

.plus-loin-recto .ph span {
  margin-bottom: 48px;
}

/* Photos des cartes : gardées en couleur, titre écrit en bas par le site */
.plus-loin-recto img {
  filter: none;
}

.plus-loin-verso {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 18px 24px;
  border: 1px solid rgba(139, 61, 255, 0.45);
  background: radial-gradient(120% 140% at 100% 0%, rgba(139, 61, 255, 0.22), transparent 60%), #0d0d0d;
}

.plus-loin-verso-titre {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.plus-loin-verso .p {
  font-size: 14px;
  line-height: 1.5;
}

.plus-loin-verso .lien {
  color: #b98aff;
}

/* Carte pas encore disponible : grisée, avec le badge « Bientôt » en haut à droite */
.plus-loin-carte.est-bientot .plus-loin-recto img {
  filter: grayscale(1) brightness(0.5);
}

.plus-loin-carte.est-bientot .plus-loin-recto .h3 {
  color: #b9b9b4;
}

.plus-loin-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(10, 10, 10, 0.75);
}


/* ---------- Ressource gratuite ---------- */
.sec-ressource {
  position: relative;
  overflow: hidden;
  background: #111;
  border-top: 1px solid #222;
}

.sec-ressource .glow-a {
  width: 700px;
  height: 700px;
  right: -300px;
  top: -300px;
}

.ressource {
  position: relative;
  align-items: center;
}

/* Couverture du guide : gardée en couleur */
.ressource-couverture {
  margin-top: 32px;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.ressource-couverture img {
  filter: none;
}

.ressource-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 36px;
  background: rgba(10, 10, 10, 0.6);
}

.ressource-form .mention {
  align-self: flex-start;
}

.ressource-form:not(.est-bientot) .mention {
  display: none;
}

.ressource-form.est-bientot .field,
.ressource-form.est-bientot .consentement,
.ressource-form.est-bientot button {
  opacity: 0.4;
}

/* ---------- Un environnement de performance (fond noir, halos) ---------- */
.glow {
  position: relative;
  overflow: hidden;
  background: #050505;
  padding-top: 160px;
  padding-bottom: 160px;
}

/* Halos : dégradés flous violet et rose (plus légers qu'un filtre de flou) */
.glow-a,
.glow-b {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.glow-a {
  width: 1100px;
  height: 1100px;
  right: -380px;
  top: -400px;
  background: radial-gradient(closest-side, rgba(139, 61, 255, 0.4), rgba(139, 61, 255, 0.2) 60%, transparent);
}

.glow-b {
  width: 820px;
  height: 820px;
  left: -270px;
  bottom: -350px;
  background: radial-gradient(closest-side, rgba(217, 70, 168, 0.28), rgba(217, 70, 168, 0.1) 55%, transparent);
}

.glow-in {
  position: relative;
}

.big-quote {
  font-size: 60px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 32px 0;
  max-width: 900px;
}

.glow .big-quote {
  margin-bottom: 0;
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 72px;
}

.pillar {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 24px;
}

.pillar .p {
  color: #d6d6d1;
}

.groupe-photos {
  margin-top: 72px;
}

/* Même proportions que la photo : personne n'est coupé, quelle que soit la largeur */
.groupe-photo {
  aspect-ratio: 1400 / 674;
  height: auto;
  border-radius: 16px;
}

.glow .ph {
  background-color: rgba(20, 20, 20, 0.7);
}

/* ---------- L'offre ---------- */
.offre-grid {
  align-items: start;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list li {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid #d8d8d3;
  font-size: 17px;
  font-weight: 300;
}

.list li span {
  flex: none;
  width: 24px;
  color: var(--rose);
  font-weight: 600;
}

#offre .grid2 > div > .h3 {
  margin-bottom: 8px;
}

/* Sous-titres plus larges (méthode, offre) */
#methode .sub,
#offre .sub {
  max-width: none;
}

.card-noire {
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}

.sec-light .card-noire .eyebrow {
  color: var(--rose);
}

/* Encart testing : plus compact, un peu plus bas que le haut de la liste */
.card-noire {
  padding: 24px;
}

#offre .card-noire {
  margin-top: 0;
  max-width: 420px;
  justify-self: end;
}

.card-noire .eyebrow {
  font-size: 13px;
  margin-bottom: 12px;
}

.card-noire .h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.sec-light .card-noire .p {
  color: var(--gris-texte);
  font-size: 15px;
  margin-bottom: 20px;
}

.sec-light .card-noire .ph {
  background-color: #1b1b1b;
  background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(255, 255, 255, 0.035) 14px 28px);
  border-color: #3a3a3a;
  color: #8a8a86;
}

.testing-photo {
  height: 150px;
  border-radius: 14px;
}

.offre-bouton {
  margin-top: 20px;
}

/* ---------- Témoignages ---------- */
figure,
blockquote {
  margin: 0;
}

.quote {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.55;
  margin: 0 0 28px 0;
}

.who {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
}

.ini {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
  background: #1b1b1b;
  border: 1px solid #3a3a3a;
  color: var(--blanc);
}

/* Bande de témoignages qui défile horizontalement */
.tdefile {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.tdefile::-webkit-scrollbar {
  display: none;
}

.tdefile .tcard {
  flex: 0 0 42%;
  scroll-snap-align: start;
}

.fleches {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 28px;
}

.fleche {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, opacity 0.2s;
}

.fleche:hover:not(:disabled) {
  border-color: #fff;
}

.fleche:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Photo de l'athlète en fond de carte, en transparence */
.tcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tcard-fond {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}

/* Dégradé sombre par-dessus la photo pour garder le texte lisible */
.tcard:has(.tcard-fond)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.15) 55%, rgba(10, 10, 10, 0.7));
}

/* Ombre légère sous le texte posé sur une photo */
.tcard:has(.tcard-fond) .quote,
.tcard:has(.tcard-fond) .who {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

.tcard .quote {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.tcard blockquote {
  margin-bottom: 28px;
}

.tcard blockquote .quote:last-child {
  margin-bottom: 0;
}

/* ---------- Candidature ---------- */
.sec-candidature {
  background: #111;
  border-top: 1px solid #222;
}

.candidature-haut {
  align-items: center;
}

.candidature-texte {
  font-size: 15px;
  margin-bottom: 40px;
}

/* Même proportions que la photo : elle n'est jamais coupée, quelle que soit la largeur */
.cta-photo {
  aspect-ratio: 1200 / 774;
  height: auto;
}

/* Page du formulaire (candidature.html) */
.page-form .sec-candidature {
  border-top: 0;
  min-height: 100vh;
  padding-top: 168px;
}

.wrap-etroit {
  max-width: 880px;
}

/* Page boutique (fond clair, barre du haut sur fond noir) */
.nav-fond {
  position: relative;
  z-index: 30;
  background: var(--noir);
}

.page-form .sec-boutique {
  min-height: 100vh;
  padding-top: 72px;
}

/* Phrases de la boutique sur toute la largeur */
.sec-boutique .sub,
.sec-boutique .boutique-texte,
.sec-boutique .encart-coaching p {
  max-width: none;
}

/* Cartes des plans : foncées, pour ressortir sur le fond clair */
.sec-boutique .card {
  /* Léger dégradé : noir avec une lueur violette en haut à droite */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(139, 61, 255, 0.24), transparent 65%),
    linear-gradient(180deg, #161616 0%, #0a0a0a 100%);
  border-color: #0a0a0a;
  color: var(--blanc);
}

.sec-boutique .card .p {
  color: var(--gris-texte);
}

.sec-boutique .article-prix {
  color: var(--rose);
}

.boutique-categorie {
  margin: 40px 0 20px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a22ff;
}

.plans-categories .boutique-categorie:first-child {
  margin-top: 8px;
}

.boutique-partie {
  margin-top: 72px;
}

.boutique-partie > .h3,
.boutique-partie .titre-mention .h3 {
  font-size: 28px;
}

.boutique-texte {
  max-width: none;
  margin-bottom: 32px;
  text-align: left;
}

.articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.article {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}

.article .h3 {
  margin: 0;
}

.article-photo {
  aspect-ratio: 4 / 5;
  max-width: 100%;
  border-radius: 14px;
  margin-bottom: 12px;
}

/* Les articles gardent leurs couleurs pour que l'on voie le produit */
.article-photo img {
  filter: none;
}

.encart-coaching {
  margin-top: 32px;
  padding: 32px 36px;
  border-radius: 20px;
  /* Dégradé rose (avec une touche de violet) sur fond noir */
  border: 1px solid rgba(217, 70, 168, 0.5);
  background:
    radial-gradient(120% 220% at 100% 0%, rgba(217, 70, 168, 0.62), rgba(217, 70, 168, 0.18) 45%, transparent 75%),
    radial-gradient(80% 120% at 0% 100%, rgba(139, 61, 255, 0.22), transparent 60%),
    #0d0d0d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.encart-coaching p {
  margin: 0;
  max-width: 620px;
  font-size: 17px;
  color: var(--blanc);
}

.article-prix {
  margin: 0;
  font-weight: 600;
  color: var(--rose);
}

.article-bouton {
  margin-top: auto;
  align-self: flex-start;
}

.article .p {
  margin-bottom: 16px;
  /* Infos courtes (sport, durée, niveau) : pas justifiées */
  text-align: left;
}

/* Pages légales */
.legal-date {
  font-size: 14px;
  color: #8a8a86;
  margin: 0 0 48px 0;
}

.legal .h3 {
  font-size: 20px;
  margin: 40px 0 12px 0;
}

.legal .p {
  margin: 0 0 10px 0;
}

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 14px;
  color: var(--gris-texte);
}

.field input,
.field select,
.field textarea {
  background: #0a0a0a;
  border: 1px solid #333;
  border-radius: 14px;
  color: var(--blanc);
  font-family: inherit;
  font-size: 16px;
  padding: 14px 16px;
  min-height: 48px;
  width: 100%;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #6b6b66;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--violet);
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.consentement {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--gris-texte);
}

.consentement input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0 0;
  accent-color: var(--violet);
}

.consentement a {
  text-decoration: underline;
}

.btn-plein {
  width: 100%;
}

.btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.alerte {
  margin: 0 0 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--rose);
  border-radius: 14px;
  font-size: 15px;
}

/* Champ piège : hors de l'écran */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Pied de page ---------- */
.pied {
  background: #111;
}

.pied-in {
  border-top: 1px solid #222;
  padding-top: 32px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: #8a8a86;
}

.pied a {
  padding: 8px 0;
}

.pied a:hover {
  color: var(--blanc);
}

@media (max-width: 860px) {
  .wrap {
    padding-left: 24px;
    padding-right: 24px;
  }

  .h1 {
    font-size: 42px;
  }

  .hero-in {
    padding-bottom: 72px;
  }

  .h2 {
    font-size: 32px;
  }

  .sec {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .grid3,
  .grid2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .grid2 {
    gap: 40px;
  }

  .coach-photo {
    height: 420px;
  }

  .big {
    font-size: 60px;
  }

  .resultats-photos {
    gap: 10px;
  }

  .sec-parcours .eyebrow {
    font-size: 21px;
  }

  /* Sur téléphone, la frise devient verticale */
  .parcours-etapes {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 40px;
    margin-left: 10px;
  }

  .parcours-etapes li {
    border-top: 0;
    border-left: 4px solid rgba(124, 45, 255, 0.25);
    padding: 0 0 32px 32px;
  }

  .parcours-etapes li:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }

  .parcours-etapes li::before {
    top: 0;
    left: -12px;
  }

  /* Sur téléphone, les cartes sont les unes sous les autres, sur toute la largeur */
  .plus-loin-cartes {
    flex-direction: column;
    gap: 16px;
  }

  .plus-loin-carte {
    aspect-ratio: 16 / 9;
  }

  .ressource-form {
    padding: 28px;
  }

  .glow {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .big-quote {
    font-size: 38px;
  }

  .pillars {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 56px;
  }

  .groupe-photos {
    margin-top: 56px;
  }


  #offre .card-noire {
    margin-top: 0;
    max-width: none;
    justify-self: stretch;
  }

  .offre-bouton {
    margin-top: 24px;
  }

  .tdefile {
    gap: 16px;
  }


  .form {
    grid-template-columns: minmax(0, 1fr);
  }

  .articles {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .boutique-partie {
    margin-top: 56px;
  }

  .article-bouton {
    align-self: stretch;
  }

  .encart-coaching {
    padding: 28px;
  }

  .encart-coaching .btn {
    width: 100%;
  }

  .page-form .sec-candidature {
    padding-top: 128px;
  }

  /* La carte suivante dépasse un peu : on comprend qu'on peut faire glisser */
  .tdefile .tcard {
    flex-basis: 85%;
  }

  .glow-a {
    width: 700px;
    height: 700px;
    right: -380px;
    top: -260px;
  }

  .glow-b {
    width: 600px;
    height: 600px;
    left: -300px;
    bottom: -240px;
  }

}

/* Téléphones : boutons du hero sur toute la largeur, plus faciles à toucher */
@media (max-width: 520px) {
  .h1 {
    font-size: clamp(30px, 9.6vw, 38px);
  }

  .lead {
    font-size: 17px;
  }

  .card,
  .card-l {
    padding: 28px;
  }

  .menu-texte,
  .nav-gauche #lien-boutique {
    display: none;
  }

  .menu-liste .menu-boutique {
    display: block;
  }

  .row .btn,
  .offre-bouton .btn,
  #ouvrir-formulaire {
    width: 100%;
    padding: 12px 20px;
    line-height: 1.3;
  }
}

/* Petits téléphones : on resserre pour que tout tienne sur une ligne */
@media (max-width: 400px) {
  .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .logo {
    font-size: 16px;
  }

  .nav-in {
    gap: 12px;
  }


}

@media (max-width: 380px) {
  .nav-in {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .logo {
    font-size: 15px;
  }


  .nav-gauche {
    gap: 14px;
  }
}

/* Très petits téléphones (moins de 350 px) : place insuffisante pour le lien Boutique */
@media (max-width: 349px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  #lien-boutique {
    display: none;
  }
}

/* =========================================================
   Refonte UX : hiérarchie plus marquée, CTA dominants,
   lisibilité, micro-animations légères
   ========================================================= */

/* Lisibilité : textes un peu plus épais, gris plus contrastés */
.p,
.sub,
.lead,
.list li,
.pour-toi li {
  font-weight: 400;
}

.p,
.sub {
  color: #a8a8a3;
}

.sec-light .sub,
.sec-light .p {
  color: #4a4a46;
}

/* Une seule taille de texte courant sur tout le site */
.p {
  font-size: 16px;
  line-height: 1.65;
}

.coach-bio .p {
  font-size: 16px;
}

/* Le coach : la photo prend toute la hauteur du texte, son haut est aligné avec le surtitre */
#coach .grid2 {
  align-items: stretch;
}

#coach .coach-photo {
  height: auto;
  min-height: 420px;
}

/* Échelle des titres plus contrastée */
.h1 {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
  max-width: 900px;
}

.h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.h3 {
  font-weight: 600;
}

.eyebrow {
  font-weight: 700;
  letter-spacing: 0.14em;
}

.sec {
  padding-top: clamp(88px, 10vw, 144px);
  padding-bottom: clamp(88px, 10vw, 144px);
}

/* Boutons : plus grands, plus visibles, flèche qui glisse au survol */
.btn {
  min-height: 56px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 700;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-violet {
  background: #7c2dff;
  box-shadow: 0 10px 30px -10px rgba(124, 45, 255, 0.75);
}

.btn-violet:hover {
  background: #6a1fe6;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(124, 45, 255, 0.9);
}

.btn-fleche::after {
  content: "→";
  margin-left: 12px;
  transition: transform 0.2s;
}

.btn-fleche:hover::after {
  transform: translateX(4px);
}

.btn-grand {
  min-height: 60px;
  padding: 0 36px;
  font-size: 17px;
}

/* Contour bien visible pour la navigation au clavier */
:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
}

/* ---------- Haut de page ---------- */
.hero-veil {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.96) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.25) 100%);
}

.hero-actions {
  align-items: center;
  gap: 16px 28px;
}

/* ---------- Notre coaching : deux cartes ---------- */
.pour-toi .carte-oui,
.pour-toi .pour-toi-non {
  border: 1px solid #dcdcd6;
  border-radius: 20px;
  padding: clamp(28px, 3vw, 40px);
}

.pour-toi .carte-oui {
  background: #fff;
}

.pour-toi li:last-child {
  border-bottom: 0;
}

/* ---------- Cartes : se soulèvent au survol ---------- */
.card,
.card-l {
  transition: transform 0.25s, border-color 0.25s;
}


/* La méthode : grands numéros roses */
#methode .num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--rose);
  margin-bottom: 20px;
}

#methode .card .h3 {
  font-size: 24px;
}

/* ---------- L'offre ---------- */
.offre-cta {
  margin-top: 36px;
}

/* ---------- Le parcours ---------- */
.parcours-cta {
  margin-top: 64px;
}

/* ---------- Chiffres clés ---------- */
.big {
  font-size: clamp(64px, 8vw, 104px);
  font-weight: 800;
  letter-spacing: -0.045em;
}

/* ---------- Témoignages : cartes plus hautes, guillemet rose ---------- */
.tcard {
  min-height: 440px;
  padding-top: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tcard::after {
  content: "“";
  position: absolute;
  top: 18px;
  left: 30px;
  font-size: 88px;
  line-height: 1;
  font-weight: 800;
  color: var(--rose);
  z-index: 1;
}

/* ---------- Un environnement de performance ---------- */
.big-quote {
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.pillar {
  border-top: 2px solid var(--violet);
}

.pillar .h3 {
  font-size: 22px;
}

/* ---------- Candidature : encadré mis en avant ---------- */
.candidature-encadre {
  padding: clamp(32px, 5vw, 64px);
  border-radius: 28px;
  border: 1px solid rgba(124, 45, 255, 0.45);
  background: radial-gradient(90% 120% at 100% 0%, rgba(124, 45, 255, 0.28), transparent 60%), #0d0d0d;
}

/* ---------- Apparition au défilement (scroll reveal) ----------
   - Le script ajoute la classe .reveal-pret sur <html> : sans script, rien n'est masqué.
   - .reveal : un bloc seul. [data-cascade] : ses enfants apparaissent l'un après l'autre
     (délai --delai calculé par le script, 50 ms entre chaque).
   - On anime uniquement opacity et translate (calculés par la carte graphique) :
     pas de recalcul de mise en page. translate est distinct de transform,
     donc les effets de survol (transform) restent indépendants. */
.reveal-pret .reveal,
.reveal-pret [data-cascade] > * {
  opacity: 0;
  translate: 0 12px;
  transition:
    opacity 0.3s ease var(--delai, 0ms),
    translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) var(--delai, 0ms),
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.reveal-pret .reveal.est-visible,
.reveal-pret [data-cascade] > .est-visible {
  opacity: 1;
  translate: none;
}

/* ---------- Survol : léger soulèvement avec ombre ---------- */
.card:hover,
.card-l:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(124, 45, 255, 0.45);
}

.card:hover {
  border-color: rgba(124, 45, 255, 0.6);
}

/* Photos des chiffres clés : léger zoom au survol (l'image reste dans son cadre) */
.resultat img {
  transition: transform 0.5s ease;
}

.resultat:hover img {
  transform: scale(1.04);
}

/* Les personnes qui ont désactivé les animations voient tout immédiatement, sans mouvement */
@media (prefers-reduced-motion: reduce) {
  .reveal-pret .reveal,
  .reveal-pret [data-cascade] > * {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .btn,
  .card,
  .card-l,
  .resultat img,
  .btn-fleche::after {
    transition: none;
  }

  .card:hover,
  .card-l:hover,
  .resultat:hover img {
    transform: none;
  }
}

@media (max-width: 900px) {
  .hero-veil {
    background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.7) 55%, rgba(10, 10, 10, 0.45) 100%);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .offre-cta .btn,
  .parcours-cta .btn {
    width: 100%;
  }
}

/* ---------- Bouton « Rejoindre le coaching » : petite vibration ----------
   Le bouton reste immobile, puis frémit brièvement (≈ 0,5 s) toutes les 3,5 s,
   sur ordinateur comme sur téléphone et tablette.
   Animé uniquement avec transform (carte graphique, compatible avec tous les Safari).
   S'arrête au survol de la souris (pas au toucher, qui laisserait le bouton figé sur iPhone)
   et pour les personnes qui ont réduit les animations. */
#ouvrir-formulaire {
  -webkit-animation: lcs-vibre 3.5s ease-in-out infinite;
  animation: lcs-vibre 3.5s ease-in-out infinite;
}

@media (hover: hover) {
  #ouvrir-formulaire:hover {
    -webkit-animation: none;
    animation: none;
  }
}

@-webkit-keyframes lcs-vibre {
  0%, 84%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  86% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); }
  88% { -webkit-transform: rotate(2deg); transform: rotate(2deg); }
  90% { -webkit-transform: rotate(-1.5deg); transform: rotate(-1.5deg); }
  92% { -webkit-transform: rotate(1.5deg); transform: rotate(1.5deg); }
  94% { -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg); }
  96% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); }
}

@keyframes lcs-vibre {
  0%, 84%, 100% { transform: rotate(0deg); }
  86% { transform: rotate(-2deg); }
  88% { transform: rotate(2deg); }
  90% { transform: rotate(-1.5deg); }
  92% { transform: rotate(1.5deg); }
  94% { transform: rotate(-0.5deg); }
  96% { transform: rotate(0.5deg); }
}

@media (prefers-reduced-motion: reduce) {
  #ouvrir-formulaire {
    -webkit-animation: none;
    animation: none;
  }
}


/* =========================================================
   Retours : haut de page, textes alignés à gauche, détails de l'offre
   ========================================================= */

/* Haut de page : photo plus sombre */
.hero-veil {
  background: linear-gradient(to top, rgba(10, 10, 10, 0.97) 0%, rgba(10, 10, 10, 0.7) 45%, rgba(10, 10, 10, 0.5) 100%);
}

/* Notre coaching : section remontée (moins d'espace au-dessus) */
#pour-toi {
  padding-top: clamp(56px, 6vw, 80px);
}

/* Textes alignés à gauche (sans justification) */
#methode .card .p,
.card-noire .p,
.sec-light .card-noire .p,
.stat .p,
.pillar .p,
.quote {
  text-align: left;
}

/* Ce que comprend l'offre : détail entre parenthèses en dessous, petit et en italique */
.list li .liste-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  width: auto;
  color: inherit;
  font-weight: inherit;
}

.liste-detail {
  font-size: 14px;
  font-style: italic;
  color: #6b6b66;
}

/* Les étapes : 5 étapes sur une ligne (ordinateur et tablette) */
@media (min-width: 861px) {
  .parcours-etapes {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* « Pas un simple coaching. » sur une seule ligne */
.big-quote {
  font-size: min(80px, 6.6vw);
  white-space: nowrap;
}

/* Chiffres clés : visuels de résultats (texte intégré), en couleur et sans recadrage du texte */
.resultats-photos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resultat {
  aspect-ratio: 4 / 5;
}

.resultat img {
  filter: none;
  object-position: left top;
}

@media (max-width: 860px) {
  .resultats-photos {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* Notre coaching : cadre « est fait pour toi si » mis en avant
   (fond noir, dégradé violet, contour rose, ombre violette) */
.pour-toi .carte-oui {
  background: radial-gradient(120% 120% at 100% 0%, rgba(139, 61, 255, 0.35), transparent 60%), #0d0d0d;
  border: 1px solid rgba(217, 70, 168, 0.6);
  color: var(--blanc);
  box-shadow: 0 24px 60px -24px rgba(139, 61, 255, 0.55);
}

.pour-toi .carte-oui li {
  border-bottom-color: #2a2a2a;
}

/* Haut de page : « Coaching triathlon » en badge contour rose, avec un point qui pulse */
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 7px 14px 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(217, 70, 168, 0.7);
  background: rgba(10, 10, 10, 0.35);
  color: #fff;
  font-size: 13px;
}

.hero .eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose);
  animation: lcs-point 1.8s ease-out infinite;
}

@keyframes lcs-point {
  0% {
    box-shadow: 0 0 0 0 rgba(217, 70, 168, 0.7);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(217, 70, 168, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow::before {
    animation: none;
  }
}


/* =========================================================
   Retours : bandeau noir après la photo, encarts, ressource, boutique
   ========================================================= */

/* Bandeau du haut : transparent sur la photo, noir avec texte blanc ensuite */
.nav-fixe.defile {
  background: rgba(10, 10, 10, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: #222;
  color: var(--blanc);
}

/* Notre coaching : cadre « n'est pas fait pour toi » légèrement grisé */
.pour-toi .pour-toi-non {
  background: #e8e8e3;
  border-color: #d6d6d0;
}

/* Ce que comprend l'offre : tous les blocs à la même hauteur */
#offre .list {
  display: grid;
  grid-auto-rows: 1fr;
}

#offre .list li {
  align-items: center;
}

/* Les étapes : chaque intitulé sur une seule ligne (ordinateur ; sur tablette, la place manque) */
@media (min-width: 960px) {
  .parcours-etapes li {
    white-space: nowrap;
    padding-right: 12px;
  }
}

/* Candidature : retour à la ligne avant « Remplis ce formulaire » */
.candidature-texte {
  white-space: pre-line;
}

/* Le coach : photo à la hauteur du texte, encart « L'équipe s'agrandit » sur toute la largeur */
#coach .coach-bio {
  margin-bottom: 0;
}

.equipe-encart {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 20px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(139, 61, 255, 0.45), transparent 60%), #0d0d0d;
  border: 1px solid rgba(217, 70, 168, 0.6);
  color: var(--blanc);
  box-shadow: 0 24px 60px -24px rgba(139, 61, 255, 0.55);
}

.equipe-texte {
  flex: 1 1 420px;
}

.equipe-texte .h3 {
  font-size: 22px;
  color: var(--blanc);
}

.equipe-texte .p {
  text-align: left;
  color: #d4d4d0;
}

.equipe-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 360px;
}

.equipe-mail {
  margin: 0;
  font-size: 14px;
  color: #b8b8b3;
}

.equipe-mail strong {
  color: var(--blanc);
  font-weight: 600;
  -webkit-user-select: all;
  user-select: all;
}

/* Quand aucune messagerie ne s'est ouverte : message bien visible */
.equipe-mail.en-avant {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(217, 70, 168, 0.18);
  border: 1px solid rgba(217, 70, 168, 0.7);
  color: var(--blanc);
}

/* Pour aller plus loin : textes au dos alignés à gauche */
.plus-loin-verso .p {
  text-align: left;
}

/* Ressource gratuite : un seul bloc blanc avec la couverture et le formulaire */
.ressource-bloc {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 24px;
  background: #fff;
  color: var(--noir);
  align-items: center;
}

.ressource-bloc .ressource-couverture {
  margin-top: 0;
  max-width: 380px;
  width: 100%;
  justify-self: center;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.35);
}

.ressource-bloc .ressource-form {
  border: 0;
  padding: 0;
  background: transparent;
}

.ressource-bloc .field label,
.ressource-bloc .consentement {
  color: #4a4a46;
}

.ressource-bloc .field input {
  background: #fff;
  color: var(--noir);
  border-color: #c9c9c3;
}

.ressource-bloc .consentement a {
  color: #6d28d9;
}

/* Boutique : encadré « Rejoindre le coaching » tout rose, plus d'espace avec les plans */
.sec-boutique .encart-coaching {
  margin-top: 64px;
  background: linear-gradient(120deg, #d946a8 0%, #c2338f 100%);
  border-color: transparent;
}

.sec-boutique .encart-coaching p {
  color: #fff;
}

.sec-boutique .encart-coaching .btn {
  background: #fff;
  color: #9d1a73;
  box-shadow: none;
}

.tenues-bientot .titre-mention {
  margin-bottom: 12px;
}

.tenues-bientot .h3 {
  margin: 0;
}

.sec-boutique .mention {
  color: #b5168a;
  border-color: #b5168a;
}

/* Boutique : titres des plans un peu plus petits (« Approche » reste sur la 1re ligne) */
.article .h3 {
  font-size: 20px;
}

/* Chiffres clés : visuels qui défilent (3 visibles sur ordinateur, 1 et un bout du suivant sur téléphone) */
.resultats-carrousel {
  margin-top: 64px;
}

.resultats-carrousel .resultats-photos {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: none;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  margin-top: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.resultats-carrousel .resultats-photos::-webkit-scrollbar {
  display: none;
}

.resultats-carrousel .resultat {
  scroll-snap-align: start;
}

.carrousel-fleches {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.carrousel-fleche {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--blanc);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
}

.carrousel-fleche:hover:not(:disabled) {
  background: #7c2dff;
  border-color: #7c2dff;
}

.carrousel-fleche:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 860px) {
  .resultats-carrousel .resultats-photos {
    grid-template-columns: none;
    grid-auto-columns: 84%;
    gap: 12px;
  }
}

/* Photos en cours de chargement : fond discret qui scintille, sans texte.
   « Image provisoire » ne s'affiche que si le fichier de la photo manque. */
:is(.photo, .hero):has(img) > .ph {
  border: 0;
  background: #161616 linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 200% 100%;
  animation: lcs-chargement 1.4s linear infinite;
}

.sec-light :is(.photo, .hero):has(img) > .ph {
  background-color: #e9e9e4;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
}

:is(.photo, .hero):has(img) > .ph span {
  visibility: hidden;
}

@keyframes lcs-chargement {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.images-js :is(.photo img, .hero-img) {
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.images-js :is(.photo img, .hero-img).chargee {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  :is(.photo, .hero):has(img) > .ph {
    animation: none;
  }

  .images-js :is(.photo img, .hero-img) {
    transition: none;
  }
}

/* Ressource gratuite : prénom et nom côte à côte, message après l'envoi */
.ressource-intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #4a4a46;
}

.ressource-noms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}

.ressource-alerte {
  margin: 0;
  color: var(--noir);
}

.ressource-alerte.est-ok {
  border-color: #7c2dff;
  background: #f3ecff;
}

.ressource-alerte.est-erreur {
  border-color: #d946a8;
  background: #fdeef7;
}

/* Une fois envoyé : on ne garde que le message */
.ressource-form.est-envoye > :not(.ressource-alerte):not(.ressource-form-titre) {
  display: none;
}

@media (max-width: 520px) {
  .ressource-noms {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================================
   Ressources gratuites : lien du haut, rubrique de l'accueil, espace ressources
   ========================================================= */

/* Lien « Ressources gratuites » dans la barre du haut */
.lien-ressources {
  font-size: 15px;
  font-weight: 700;
  color: #b9a3fa;
  white-space: nowrap;
  transition: color 0.2s, opacity 0.2s;
}

.nav-fixe .lien-ressources {
  color: #b9a3fa;
}

.nav-fixe.sur-clair:not(.defile) .lien-ressources {
  color: #6d28d9;
}

.lien-ressources:hover {
  opacity: 0.75;
}

.lien-ressources .lien-court {
  display: none;
}

/* Tablette : texte court pour ne pas toucher le nom du site */
@media (max-width: 1080px) {
  .lien-ressources .lien-long {
    display: none;
  }

  .lien-ressources .lien-court {
    display: inline;
  }
}

/* Pages sans menu : le lien se place à droite de la barre */
.nav-links .lien-ressources {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* Accueil et boutique : version téléphone, cachée sur ordinateur */
.nav-links .lien-ressources-mobile {
  display: none;
}

@media (max-width: 760px) {
  .nav-gauche .lien-ressources {
    display: none;
  }

  .nav-links .lien-ressources-mobile {
    display: inline;
  }
}

/* Rubrique de l'accueil : visuel du pack (texte à gauche, fiches et calculateur à droite) */
.sec-ressource {
  background: #18031f;
  border-top: 0;
  overflow: hidden;
}

.sec-ressource.sec {
  padding-top: 44px;
  padding-bottom: 44px;
}

/* Ordinateur : 2/3 texte (visuel en transparence derrière), 1/3 formulaire */
.pack {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.pack-texte {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pack-badge {
  align-self: flex-start;
  margin-bottom: 46px !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: #d6c8fa;
  color: #18031f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pack-titre {
  margin: 0;
  font-size: clamp(38px, 3.9vw, 52px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--blanc);
}

.pack-titre > span {
  display: block;
}

.pack-sous-titre {
  margin-top: 10px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: #a98bfa;
}

.pack-intro {
  margin: 0;
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.5;
  color: #d9d0e3;
}

.pack-chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 340px;
  gap: 10px;
  margin-top: 4px;
}

.pack-chiffre {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #2a1540;
  font-size: 13px;
  color: #d9d0e3;
}

.pack-chiffre-n {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--blanc);
}

.pack-points {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #f3eef8;
}

.pack-points li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.pack-points svg {
  flex: none;
  color: #a98bfa;
}

/* Visuel : positions reprises de la maquette (zone de 628 × 650),
   placé en transparence derrière le texte, côté droit */
.pack-visuel {
  position: relative;
  z-index: 0;
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  width: min(62%, 560px);
  aspect-ratio: 628 / 650;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
  mask-image: linear-gradient(to right, transparent 0%, #000 35%);
}

.pack-texte {
  grid-column: 1;
  grid-row: 1;
}

.ressource-acces {
  grid-column: 2;
  grid-row: 1;
}

.pack-halo {
  position: absolute;
  left: 11%;
  top: 9%;
  width: 83%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 53, 245, 0.55) 0%, rgba(115, 53, 245, 0.18) 45%, rgba(24, 3, 31, 0) 70%);
}

.pack-fiche {
  position: absolute;
  width: 26.75%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 26px 50px rgba(0, 0, 0, 0.6);
}

.pack-fiche-1 { left: 4.8%; top: 12%; transform: rotate(-12deg); }
.pack-fiche-2 { left: 21%; top: 7.1%; transform: rotate(-6deg); }
.pack-fiche-3 { left: 37.6%; top: 5.2%; }
.pack-fiche-4 { left: 54.1%; top: 7.1%; transform: rotate(6deg); }
.pack-fiche-5 { left: 70.7%; top: 12%; transform: rotate(12deg); }

.pack-ecran {
  position: absolute;
  left: 12.6%;
  top: 23%;
  width: 74.8%;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transform: perspective(1400px) rotateY(-14deg) rotateX(9deg) rotateZ(-1deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 40px 80px rgba(0, 0, 0, 0.7), 0 12px 24px rgba(0, 0, 0, 0.45);
}

.pack-ecran-barre {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: #eee8fd;
}

.pack-ecran-barre span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b49cf6;
}

.pack-ecran-barre span:nth-child(2) {
  background: #8e63f1;
}

.pack-ecran-barre span:nth-child(3) {
  background: #6230d6;
}

.pack-ecran-barre em {
  margin-left: 10px;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  color: #6e6478;
  white-space: nowrap;
}

.pack-ecran img {
  display: block;
  width: 100%;
  height: auto;
}

.pack-gratuit {
  position: absolute;
  right: 0;
  top: 70.5%;
  margin: 0;
  padding: 12px 20px;
  border-radius: 999px;
  background: #7335f5;
  color: var(--blanc);
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

/* Formulaire d'accès : carte blanche (3e colonne sur ordinateur) */
.ressource-acces {
  position: relative;
  z-index: 3;
  padding: 28px;
  border-radius: 22px;
  background: #fff;
  color: #18031f;
}

.ressource-acces .ressource-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
}

.ressource-acces .ressource-noms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.ressource-acces .field {
  gap: 6px;
}

.ressource-form-titre {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #18031f;
}

.ressource-acces .field label {
  color: #4a4a46;
}

.ressource-acces .field input {
  background: #fff;
  color: var(--noir);
  border-color: #d9d0e3;
}

.ressource-acces .consentement {
  font-size: 13px;
  line-height: 1.45;
  color: #3b2b47;
}

.ressource-acces .consentement a {
  color: #6d28d9;
}

.ressource-note {
  margin: 0;
  font-size: 12px;
  color: #6e6478;
}

.ressource-deja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.ressource-deja .ressource-form-titre {
  flex: 1 1 320px;
}

.ressource-autre {
  padding: 4px 0;
  border: 0;
  background: none;
  color: #6d28d9;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

/* Tablette : le formulaire passe sous le texte, en bandeau */
@media (max-width: 1000px) {
  .pack {
    grid-template-columns: minmax(0, 1fr);
  }

  .ressource-acces {
    grid-column: 1;
    grid-row: 2;
  }

  .ressource-acces .ressource-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: end;
  }

  .ressource-acces .ressource-form > * {
    grid-column: 1 / -1;
  }

  .ressource-acces .ressource-noms {
    display: contents;
  }

  .ressource-acces .ressource-form > .field {
    grid-column: auto;
  }

  .ressource-acces .ressource-form > button {
    grid-column: 1 / 2;
  }

  .ressource-acces .ressource-form > .ressource-note {
    grid-column: 2 / -1;
    align-self: center;
  }
}

@media (max-width: 760px) {
  .pack-visuel {
    width: 80%;
    align-self: start;
    opacity: 0.5;
  }

  .ressource-acces .ressource-form {
    display: flex;
    align-items: stretch;
  }

  .ressource-acces .ressource-noms {
    display: grid;
  }
}

@media (max-width: 520px) {
  .ressource-acces {
    padding: 20px;
  }

  .ressource-acces .ressource-noms {
    grid-template-columns: minmax(0, 1fr);
  }

  .pack-ecran-barre em {
    display: none;
  }

  .pack-gratuit {
    padding: 8px 14px;
  }
}

/* Espace ressources (page cachée) */
.page-espace {
  background: #f7f5f2;
}

.espace-entete {
  background: #18031f;
  color: var(--blanc);
  padding: 48px 0 56px;
}

.espace-entete .eyebrow {
  color: #b9a3fa;
}

.espace-entete .sub {
  max-width: 62ch;
  text-align: left;
  color: #d9d0e3;
}

.espace-bienvenue {
  max-width: 62ch;
  margin: 24px 0 0;
  border-color: #b9a3fa;
  background: rgba(185, 163, 250, 0.12);
  color: var(--blanc);
}

.espace-corps {
  padding: 40px 0 72px;
  color: #18031f;
}

.espace-corps .wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.espace-calculateur {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
  background: #fff;
  border: 1px solid #e6e1ea;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
}

.espace-calculateur img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid #e6e1ea;
}

.espace-calculateur-texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.espace-surtitre {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7335f5;
}

.espace-titre {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
}

.espace-texte {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #3b2b47;
}

.espace-fiches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}

.espace-fiche {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #e6e1ea;
  border-radius: 16px;
  padding: 16px;
}

.espace-fiche img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(24, 3, 31, 0.18);
}

.espace-fiche-num {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7335f5;
}

.espace-fiche-titre {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
}

.espace-fiche-pages {
  margin: 0;
  font-size: 13px;
  color: #6e6478;
}

.espace-fiche-bouton {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid #18031f;
  border-radius: 999px;
  color: #18031f;
  font-size: 13.5px;
  white-space: nowrap;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}

.espace-fiche-bouton:hover {
  background: #18031f;
  color: var(--blanc);
}

.espace-suite {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #18031f;
  color: var(--blanc);
  border-radius: 20px;
  padding: 28px 32px;
}

.espace-suite-titre {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 800;
}

.espace-suite-texte {
  margin: 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.5;
  color: #d9d0e3;
}

.espace-suite-bouton {
  background: var(--blanc);
  color: #18031f;
}

@media (max-width: 860px) {
  .espace-calculateur {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  /* Fiches en format horizontal : miniature à gauche, texte à droite */
  .espace-fiche {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
  }

  .espace-fiche img {
    grid-row: 1 / span 4;
  }

  .espace-fiche-bouton {
    margin-top: 8px;
    justify-self: start;
  }

  .espace-suite {
    padding: 24px 20px;
  }

  .espace-suite-bouton {
    width: 100%;
  }
}

/* Visuel en transparence : les 5 fiches ressortent, le calculateur reste discret */
.pack-visuel .pack-fiche {
  opacity: 0.95;
  /* Fiches un peu éclaircies et séparées par une ombre portée, sans contour */
  filter: brightness(1.55) saturate(1.1);
  box-shadow: -10px 6px 24px rgba(0, 0, 0, 0.7);
}

.pack-visuel .pack-ecran {
  opacity: 0.45;
}

.pack-visuel .pack-halo {
  opacity: 0.7;
}

/* Ressources gratuites : un seul panneau qui réunit texte, visuel et formulaire */
.pack {
  position: relative;
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: 28px;
  background:
    radial-gradient(55% 80% at 70% 30%, rgba(115, 53, 245, 0.3), transparent 70%),
    linear-gradient(160deg, #250a33 0%, #14021a 100%);
  border: 1px solid rgba(185, 163, 250, 0.16);
  overflow: hidden;
}

.pack-halo {
  display: none;
}

/* Titre en haut du panneau, avec de l'espace avant « des outils… » */
.pack-sous-titre {
  margin-top: 22px;
}

/* Chiffres en pastilles compactes */
.pack-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: none;
}

.pack-chiffre {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(185, 163, 250, 0.12);
  border: 1px solid rgba(185, 163, 250, 0.25);
  font-size: 14px;
  color: #e6e0ee;
}

.pack-chiffre-n {
  font-size: 18px;
  color: #d6c8fa;
}

/* Formulaire : carte qui ressort, bouton avec flèche, mentions plus discrètes */
.ressource-acces {
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
}

.ressource-acces .consentement {
  font-size: 12.5px;
}

.ressource-note {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ressource-note::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

@media (max-width: 760px) {
  .pack {
    padding: 22px;
  }
}

/* Ressources gratuites : texte plus aéré, calculateur plus grand */
.pack-texte {
  gap: 26px;
}

.pack-sous-titre {
  margin-top: 18px;
}

.pack-intro {
  line-height: 1.6;
}

.pack-chiffres {
  gap: 12px;
}

.pack-points {
  gap: 14px;
}

@media (min-width: 761px) {
  .pack-visuel {
    width: min(78%, 640px);
    margin-right: -40px;
  }
}

/* Cadre du visuel ajusté au calculateur (les fiches ont été retirées) */
.pack-visuel {
  aspect-ratio: 628 / 420;
}

.pack-visuel {
  align-self: end;
}

.pack-visuel .pack-ecran {
  top: 6%;
}

/* Pastilles et points un peu plus bas, pour plus d'espace sous la phrase */
.pack-chiffres {
  margin-top: 20px;
}

/* Boutique : phrase des plans sur une seule ligne (ordinateur) */
@media (min-width: 1180px) {
  .boutique-partie[aria-labelledby="titre-plans"] .boutique-texte {
    font-size: 15.5px;
    white-space: nowrap;
  }
}