/* ==========================================================================
   HEMC 7 : page « choisissez vos cadeaux » (acquisition du lancement).
   Même monde que la page HE³C : lait, sable, rose sombre, or, encre.
   Écritures : Prata (titres) + Jost (texte). Pensée d'abord pour le téléphone.
   ========================================================================== */

:root{
  color-scheme: light;
  --lait: #F3EEE6;
  --sable: #E8DFD2;
  --rose-clair: #E3D8C8;
  --rose-profond: #A57A55;
  --rose-sombre: #8A5A38;
  --or: #B8945C;
  --encre: #33271F;
  --encre-douce: rgba(51,39,31, .76);
  --encre-faible: rgba(51,39,31, .5);
  --filet: rgba(184, 148, 92, .32);
  --titre: 'Prata', Georgia, 'Times New Roman', serif;
  --texte: 'Jost', 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --marge: clamp(1rem, 5vw, 4rem);
}

*{ box-sizing: border-box; }
html{ background: var(--lait); scroll-behavior: smooth; }
body{
  margin: 0; background: var(--lait); color: var(--encre);
  font-family: var(--texte); font-weight: 300;
  font-size: clamp(1rem, .4vw + .9rem, 1.12rem); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
[hidden]{ display: none !important; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--rose-profond); outline-offset: 3px; }
h1, h2{ font-family: var(--titre); font-weight: 400; line-height: 1.2; margin: 0 0 .6em; }
h2{ font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); text-align: center; }

.provisoire{
  position: sticky; top: 0; z-index: 10;
  background: var(--encre); color: var(--lait);
  text-align: center; font-size: .82rem; letter-spacing: .04em; padding: .45rem 1rem;
}

/* --- Ouverture ---------------------------------------------------------- */
.ouverture{
  text-align: center;
  padding: clamp(1.5rem, 5vw, 4rem) var(--marge) clamp(2rem, 5vw, 3.5rem);
  background:
    radial-gradient(ellipse at 50% 0%, var(--rose-clair) 0%, rgba(227,216,200,0) 65%),
    var(--lait);
}
.ouverture__logo{ width: 96px; height: auto; margin: 0 auto 1rem; }
.surtitre{
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
  color: var(--rose-sombre); margin: 0 0 1rem; font-weight: 400;
}
h1{ font-size: clamp(2rem, 5vw + 1rem, 3.6rem); }
h1 em{ font-style: normal; color: var(--rose-sombre); }
.chapeau{ max-width: 34rem; margin: 0 auto 2rem; color: var(--encre-douce); }

.compteur{
  max-width: 30rem; margin: 0 auto 2rem;
  background: #fff; border: 1px solid var(--filet); border-radius: 20px;
  padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 18px 40px -24px rgba(94,59,38, .45);
}
.compteur__nombre{
  font-family: var(--titre); font-size: clamp(3rem, 9vw, 4.6rem); line-height: 1;
  margin: 0; color: var(--rose-sombre); font-variant-numeric: tabular-nums;
}
.compteur__nombre.bondit{ animation: bondit .5s ease; }
@keyframes bondit{ 40%{ transform: scale(1.06); } }
.compteur__legende{ margin: .4rem 0 1.1rem; color: var(--encre-douce); }
.jauge{ height: 12px; background: var(--sable); border-radius: 99px; overflow: hidden; }
.jauge__barre{
  height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--rose-profond), var(--or));
  transition: width 1s cubic-bezier(.2,.8,.2,1);
}
.compteur__palier{ margin: .8rem 0 0; font-size: .95rem; }
.compteur__palier b{ font-weight: 500; color: var(--rose-sombre); }
.atteints{ display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .8rem; }
.atteints span{
  font-size: .78rem; background: var(--sable); border-radius: 99px; padding: .2rem .7rem; color: var(--rose-sombre);
}

.bouton{
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 400 1rem var(--texte); letter-spacing: .04em;
  background: var(--rose-sombre); color: #fff; border: 0; border-radius: 99px;
  padding: 1rem 2rem; min-height: 48px;
  box-shadow: 0 10px 24px -12px rgba(94,59,38, .8);
  transition: transform .15s ease, background .15s ease;
}
.bouton:hover{ background: #4A2D1C; transform: translateY(-1px); }
.bouton:disabled{ opacity: .55; cursor: wait; transform: none; }
.bouton--clair{ background: var(--lait); color: var(--rose-sombre); box-shadow: none; border: 1px solid var(--filet); }
.bouton--clair:hover{ background: #fff; }

/* --- Étapes ------------------------------------------------------------- */
.etapes{ background: var(--sable); padding: 1.6rem var(--marge); }
.etapes ol{
  list-style: none; margin: 0 auto; padding: 0; max-width: 56rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: e;
}
.etapes li{ text-align: center; counter-increment: e; font-size: .92rem; color: var(--encre-douce); }
.etapes li::before{
  content: counter(e); display: grid; place-items: center; margin: 0 auto .4rem;
  width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--or);
  font-family: var(--titre); color: var(--rose-sombre);
}
.etapes b{ display: block; font-weight: 500; color: var(--encre); }

/* --- Cadeaux ------------------------------------------------------------ */
.cadeaux{ padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge) 1rem; max-width: 72rem; margin: 0 auto; }
.intro{ text-align: center; color: var(--encre-douce); margin: -.2rem 0 1.8rem; }
.grille{ display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; }
.cadeau{
  position: relative; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  background: #fff; border: 1px solid var(--filet); border-radius: 18px;
  padding: 1.3rem 1.3rem 1.2rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cadeau:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(51,39,31,.5); }
.cadeau[aria-checked="true"]{
  border-color: var(--rose-sombre);
  box-shadow: 0 0 0 2px var(--rose-sombre), 0 16px 30px -22px rgba(94,59,38,.8);
  background: linear-gradient(180deg, #fff, var(--lait));
}
.cadeau__format{
  display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--or); margin-bottom: .5rem; font-weight: 400;
}
.cadeau__titre{ display: block; font-family: var(--titre); font-size: 1.18rem; line-height: 1.3; margin-bottom: .5rem; padding-right: 2.2rem; }
.cadeau__texte{ display: block; font-size: .93rem; color: var(--encre-douce); }
.cadeau__rang{
  position: absolute; top: 1rem; right: 1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--filet); color: transparent;
  font-family: var(--titre); font-size: 1rem;
  transition: all .2s ease;
}
.cadeau[aria-checked="true"] .cadeau__rang{ background: var(--rose-sombre); border-color: var(--rose-sombre); color: #fff; }
.cadeau.secoue{ animation: secoue .35s ease; }
@keyframes secoue{ 25%{ transform: translateX(-4px); } 75%{ transform: translateX(4px); } }

/* Rappel collé en bas de l'écran pendant qu'on choisit, sur téléphone. */
.rappel{
  position: sticky; bottom: 0; z-index: 5;
  margin: 1.2rem calc(var(--marge) * -1) 0; padding: .8rem var(--marge) calc(.8rem + env(safe-area-inset-bottom));
  background: rgba(243,238,230, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.rappel p{ margin: 0; font-size: .95rem; }
.rappel .bouton{ padding: .75rem 1.4rem; white-space: nowrap; }
.rappel[hidden]{ display: none; }

/* --- Inscription -------------------------------------------------------- */
.inscription{ padding: clamp(2rem, 5vw, 3.5rem) var(--marge) clamp(3rem, 6vw, 4.5rem); }
#formulaire, .merci{
  max-width: 30rem; margin: 0 auto; background: #fff;
  border: 1px solid var(--filet); border-radius: 22px; padding: clamp(1.4rem, 4vw, 2.2rem);
  box-shadow: 0 18px 40px -26px rgba(94,59,38, .55);
}
#formulaire{ display: grid; gap: 1rem; }
#formulaire h2{ margin-bottom: 0; }
.choisi{ background: var(--sable); border-radius: 14px; padding: .8rem 1rem; font-size: .94rem; }
.choisi ol{ margin: .3rem 0 0; padding-left: 1.3rem; }
.choisi p{ margin: 0; }
.choisi a{ color: var(--rose-sombre); }
label{ display: grid; gap: .3rem; font-size: .9rem; color: var(--encre-douce); }
input{
  font: 400 1rem var(--texte); color: var(--encre);
  padding: .85rem 1rem; border: 1px solid var(--filet); border-radius: 12px; background: var(--lait);
  min-height: 48px; width: 100%;
}
input:focus{ outline: none; border-color: var(--rose-sombre); background: #fff; }
.piege{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.erreur{ color: #9b2c2c; background: #fbeaea; border-radius: 10px; padding: .6rem .9rem; margin: 0; font-size: .92rem; }
.mention{ font-size: .78rem; color: var(--encre-faible); margin: 0; text-align: center; }

.merci{ text-align: center; }
.merci:focus{ outline: none; }
.merci__coeur{ font-size: 2rem; color: var(--or); margin: 0; }
.merci ol{ text-align: left; display: inline-block; margin: .2rem 0 1rem; }
.merci__appel{ font-weight: 400; margin-top: 1.4rem; }
.partage{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.partage a, .partage button{
  font: 400 .95rem var(--texte); text-decoration: none; cursor: pointer;
  border: 1px solid var(--filet); background: var(--lait); color: var(--encre);
  border-radius: 99px; padding: .65rem 1.1rem; min-height: 44px;
}
.partage .partage__natif{ background: var(--rose-sombre); color: #fff; border-color: var(--rose-sombre); width: 100%; }
.copie{ font-size: .85rem; color: var(--rose-sombre); min-height: 1.2em; margin: .6rem 0 0; }

/* --- Sophie ------------------------------------------------------------- */
.sophie{
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 30rem); gap: clamp(1.5rem, 4vw, 3.5rem);
  justify-content: center; align-items: center;
  background: var(--sable); padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge);
}
.sophie img{ border-radius: 22px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: auto; }
.sophie h2{ text-align: left; }
.sophie p{ color: var(--encre-douce); }

footer{
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem;
  padding: 2rem var(--marge) calc(2rem + env(safe-area-inset-bottom)); font-size: .8rem; color: var(--encre-faible);
}
/* Mention Facebook des pages pub (pages-pub.py) : en petit, sous les liens (même sous « Cookies »). */
footer .mention-facebook{ order: 1; flex-basis: 100%; max-width: 40rem; margin: .4rem auto 0; font-size: .68rem; line-height: 1.4; text-align: center; opacity: .85; }

@media (max-width: 40rem){
  .etapes ol{ grid-template-columns: 1fr; gap: .8rem; }
  .etapes li{ display: grid; grid-template-columns: 2rem 1fr; gap: 0 .8rem; text-align: left; align-items: center; }
  .etapes li::before{ margin: 0; grid-row: span 2; }
  .sophie{ grid-template-columns: 1fr; }
  .sophie img{ max-width: 18rem; margin: 0 auto; }
  .sophie h2{ text-align: center; }
  .sophie div{ text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}
.lien-discret{ background:none; border:0; font:inherit; font-size:.82rem; color:var(--encre-faible); text-decoration:underline; cursor:pointer; margin-top:1rem; }

/* Téléphone : le compteur doit se voir sans avoir à faire défiler. */
@media (max-width: 40rem){
  .ouverture{ padding-top: 1.2rem; }
  .ouverture__logo{ width: 64px; margin-bottom: .6rem; }
  .surtitre{ font-size: .68rem; letter-spacing: .14em; margin-bottom: .7rem; }
  h1{ font-size: 1.9rem; }
  .chapeau{ font-size: .95rem; margin-bottom: 1.2rem; }
  .compteur{ padding: 1rem 1.1rem; margin-bottom: 1.4rem; }
  .compteur__legende{ margin: .2rem 0 .8rem; }
}

/* --- L'appli ------------------------------------------------------------ */
.installer{
  display: block; margin: 1rem auto 0; background: none; border: 0; cursor: pointer;
  font: 400 .92rem var(--texte); color: var(--rose-sombre); text-decoration: underline; text-underline-offset: 3px;
}
.aide-ios{
  position: fixed; inset: 0; z-index: 20; background: rgba(51,39,31,.45);
  display: grid; align-items: end; padding: 1rem;
}
.aide-ios__carte{
  background: var(--lait); border-radius: 22px; padding: 1.5rem 1.4rem calc(1.5rem + env(safe-area-inset-bottom));
  max-width: 28rem; width: 100%; margin: 0 auto;
}
.aide-ios__carte h2{ text-align: left; font-size: 1.5rem; }
.aide-ios__carte ol{ padding-left: 1.2rem; margin: 0 0 1.2rem; }
.aide-ios__carte li{ margin-bottom: .5rem; }
.aide-ios__carte .bouton{ width: 100%; }

/* L'image de Sophie ne sert que sur grand écran. */
.ouverture__visuel{ display: none; }

/* --- Ordinateur --------------------------------------------------------- */
@media (min-width: 64rem){
  .ouverture{
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 5rem); align-items: center;
    max-width: 78rem; margin: 0 auto; text-align: left;
    padding-top: 2.5rem; padding-bottom: 3.5rem;
    background: none;
  }
  body{ background: radial-gradient(ellipse 70% 50% at 20% 0%, var(--rose-clair) 0%, rgba(227,216,200,0) 70%) no-repeat, var(--lait); }
  .ouverture__logo{ margin: 0 0 1rem; width: 80px; }
  .ouverture h1{ font-size: clamp(2.4rem, 3.2vw, 3.3rem); }
  .chapeau{ margin-bottom: 1.5rem; }
  .compteur{ margin-bottom: 1.5rem; }
  .chapeau{ margin-left: 0; }
  .compteur{ margin-left: 0; text-align: center; }
  .installer{ margin-left: 0; }
  .ouverture__visuel{
    display: block; margin: 0; position: relative; isolation: isolate;
    width: min(100%, 26rem, 58vh); justify-self: center;
  }
  .ouverture__visuel img{
    width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
    border-radius: 200px 200px 24px 24px;
    box-shadow: 0 40px 80px -40px rgba(94,59,38, .6);
  }
  .ouverture__visuel::before{
    content: ''; position: absolute; inset: -14px 14px 14px -14px;
    border: 1px solid var(--or); border-radius: 210px 210px 28px 28px; z-index: -1;
  }

  .etapes ol{ gap: 2rem; }

  .grille{ grid-template-columns: repeat(4, 1fr); }
  .cadeau{ padding: 1.4rem 1.3rem 1.3rem; }

  /* La barre « Continuer » n'est utile que sur téléphone. */
  .rappel{ position: static; margin: 1.6rem 0 0; background: none; border: 0; justify-content: center; backdrop-filter: none; -webkit-backdrop-filter: none; }

  .inscription{ background: linear-gradient(180deg, var(--lait), var(--sable)); }
  #formulaire, .merci{ max-width: 34rem; }
  .sophie{ background: var(--lait); }
}

.insecable{ white-space: nowrap; }

/* --- Les paliers (frise) ------------------------------------------------ */
.paliers{ background: var(--sable); padding: clamp(2.2rem, 5vw, 3.5rem) var(--marge); }
.paliers__intro, .paliers__astuce{ max-width: 40rem; margin: 0 auto; text-align: center; color: var(--encre-douce); }
.paliers__intro b, .paliers__astuce b{ font-weight: 500; color: var(--encre); }
.paliers__astuce{ font-size: .95rem; margin-top: 1.6rem; }
.frise{
  list-style: none; padding: 0; margin: 1.8rem auto 0; max-width: 60rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem;
}
.frise__palier{
  background: #fff; border: 1px solid var(--filet); border-radius: 18px;
  padding: 1.2rem 1.2rem 1.1rem; display: grid; gap: .15rem; text-align: center; justify-items: center;
}
.frise__rond{
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--or); font-family: var(--titre); color: var(--rose-sombre); margin-bottom: .4rem;
}
.frise__nom{ text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--or); }
.frise__seuil{ font-family: var(--titre); font-size: 1.5rem; line-height: 1.2; }
.frise__cadeau{ font-size: .95rem; }
.frise__statut{ font-size: .8rem; color: var(--encre-faible); margin-top: .3rem; }
.frise__palier--en-cours{ border-color: var(--rose-sombre); box-shadow: 0 0 0 2px var(--rose-sombre); }
.frise__palier--en-cours .frise__rond{ background: var(--rose-sombre); border-color: var(--rose-sombre); color: #fff; }
.frise__palier--en-cours .frise__statut{ color: var(--rose-sombre); font-weight: 400; }
.frise__palier--atteint .frise__rond{ background: var(--or); border-color: var(--or); color: #fff; }
.frise__palier--secret{ background: rgba(255,255,255,.55); }
.frise__palier--secret .frise__seuil{ color: var(--encre-faible); }

/* Sur chaque cadeau choisi : à quel palier il arrive. */
.cadeau__quand{ display: block; margin-top: .6rem; font-size: .8rem; color: var(--rose-sombre); font-weight: 400; }
.cadeau__quand:empty{ display: none; }
.choisi li small, .merci li small{ display: block; font-size: .8rem; color: var(--rose-sombre); }

@media (max-width: 40rem){
  .frise{ gap: .7rem; }
  .frise__palier{ grid-template-columns: 2.4rem 1fr; text-align: left; justify-items: start; column-gap: .9rem; padding: 1rem; }
  .frise__rond{ grid-row: span 5; margin: 0; align-self: center; }
  .frise__seuil{ font-size: 1.25rem; }
}

/* --- Mes cadeaux -------------------------------------------------------- */
.mes-cadeaux{ list-style: none; padding: 0; margin: .8rem 0 1rem; display: grid; gap: .7rem; text-align: left; }
.mon-cadeau{
  display: grid; grid-template-columns: 2.6rem 1fr; gap: .9rem; align-items: center;
  background: var(--lait); border: 1px solid var(--filet); border-radius: 16px; padding: .9rem 1rem;
}
.mon-cadeau__icone{
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--sable); font-size: 1.1rem;
}
.mon-cadeau--ouvert{ border-color: var(--or); background: #fff; }
.mon-cadeau--ouvert .mon-cadeau__icone{ background: var(--or); color: #fff; }
.mon-cadeau__corps{ display: grid; gap: .1rem; justify-items: start; }
.mon-cadeau__format{ font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--or); }
.mon-cadeau__titre{ font-family: var(--titre); font-size: 1.05rem; line-height: 1.3; }
.mon-cadeau__etat{ font-size: .82rem; color: var(--encre-douce); }
.mon-cadeau--ouvert .mon-cadeau__etat{ color: var(--rose-sombre); font-weight: 400; }
.bouton--petit{ padding: .55rem 1.2rem; min-height: 40px; font-size: .9rem; margin-top: .5rem; }
.petit-gris{ font-size: .82rem; color: var(--encre-faible); }

/* --- Barre d'onglets (toutes les pages) -------------------------------- */
.onglets{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(243,238,230, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--filet);
  padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
}
.onglets a{
  display: grid; justify-items: center; gap: .15rem; text-decoration: none;
  font-size: .64rem; letter-spacing: .01em; color: var(--encre-faible); padding: .25rem 0; white-space: nowrap;
}
.onglets svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.onglets a[aria-current="page"]{ color: var(--rose-sombre); font-weight: 500; }
.onglets__marque{ display: none !important; }
body.avec-onglets{ padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
body.avec-onglets .rappel{ bottom: calc(4.1rem + env(safe-area-inset-bottom)); }

@media (min-width: 64rem){
  .onglets{
    position: sticky; top: 0; bottom: auto; border-top: 0; border-bottom: 1px solid var(--filet);
    display: flex; justify-content: center; gap: .3rem; padding: .5rem var(--marge);
  }
  .onglets a{ display: flex; align-items: center; gap: .45rem; font-size: .9rem; padding: .5rem .9rem; border-radius: 99px; }
  .onglets a:hover{ background: var(--sable); color: var(--encre); }
  .onglets a[aria-current="page"]{ background: var(--sable); }
  .onglets svg{ width: 18px; height: 18px; }
  .onglets__marque{ display: flex !important; margin-right: auto; font-family: var(--titre); font-size: 1.1rem !important; color: var(--encre) !important; }
  .onglets__marque img{ border-radius: 6px; }
  .onglets__marque:hover{ background: none !important; }
  body.avec-onglets{ padding-bottom: 0; }
  .provisoire{ position: static; }
}

/* ==========================================================================
   Page de l'école (hemc.html) : la page de vente
   Nuit (encre profonde) + or, comme la page Wix d'origine, dans notre charte.
   ========================================================================== */
.vente{ --nuit: #221a1d; --nuit-2: #2d2327; --or-clair: #d9c3a0; }
.vente h2{ font-size: clamp(1.5rem, 2.2vw + 1rem, 2.4rem); }
.vente h2 em, .vente h1 em{ font-style: italic; }
.v-centre{ text-align: center; max-width: 42rem; margin: 0 auto 1rem; color: var(--encre-douce); }
.v-chute{ font-family: var(--titre); font-size: 1.2rem; line-height: 1.5; margin-top: 1.5rem; }

.v-ouverture{
  position: relative; min-height: min(92vh, 52rem); display: grid; align-items: end;
  background: var(--nuit); color: #fff; overflow: hidden;
}
.v-ouverture__photo{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
  opacity: .75;
}
.v-ouverture::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,26,29,.15) 0%, rgba(34,26,29,.35) 45%, rgba(34,26,29,.95) 100%);
}
.v-ouverture__texte{ position: relative; z-index: 1; padding: 2rem var(--marge) 2.8rem; text-align: center; max-width: 52rem; margin: 0 auto; }
.v-ouverture .surtitre{ color: var(--or-clair); }
.v-date{
  display: inline-block; border: 1px solid var(--or-clair); border-radius: 99px;
  padding: .45rem 1.2rem; margin: 0 0 1.2rem; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem;
}
.v-date b{ font-weight: 500; color: var(--or-clair); }
.v-ouverture h1{ font-size: clamp(1.8rem, 3.5vw + 1rem, 3.4rem); color: #fff; margin-bottom: 1.6rem; }

.v-nuit{ background: var(--nuit); color: rgba(255,255,255,.88); padding: clamp(3rem, 7vw, 5.5rem) var(--marge); text-align: center; }
.v-nuit h2{ color: #fff; max-width: 46rem; margin: 0 auto 1.6rem; }
.v-nuit p{ max-width: 42rem; margin: 0 auto 1rem; line-height: 1.9; }
.v-nuit--liste{ background: var(--nuit-2); }

.coches{ list-style: none; padding: 0; margin: 1.4rem auto 0; max-width: 44rem; display: grid; gap: .7rem; text-align: left; }
.coches li{ position: relative; padding-left: 1.9rem; }
.coches li::before{ content: '✓'; position: absolute; left: 0; top: 0; color: var(--or); font-weight: 500; }
.v-nuit .coches li::before{ color: var(--or-clair); }

.v-duo{ display: grid; grid-template-columns: 1fr; background: var(--sable); }
.v-duo__texte{ padding: clamp(2.5rem, 6vw, 4.5rem) var(--marge); max-width: 40rem; margin: 0 auto; }
.v-duo__texte h2{ text-align: left; }
.v-duo__texte h3{ font-family: var(--titre); font-weight: 400; font-size: 1.25rem; color: var(--rose-sombre); margin: 1.8rem 0 .6rem; }
.v-duo__texte b{ font-weight: 500; }
.v-duo__photo{ width: 100%; height: 100%; min-height: 18rem; max-height: 40rem; object-fit: cover; }

.v-parcours{ padding: clamp(3rem, 7vw, 5rem) var(--marge); }
.modules{ max-width: 46rem; margin: 2rem auto 0; display: grid; gap: .7rem; }
.modules details{ background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 0 1.3rem; }
.modules summary{ cursor: pointer; padding: 1.1rem 0; font-family: var(--titre); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.modules summary::-webkit-details-marker{ display: none; }
.modules summary::after{ content: '+'; color: var(--or); font-family: var(--texte); }
.modules details[open] summary::after{ content: '−'; }
.modules details > *:last-child{ padding-bottom: 1.2rem; }
.modules .a-completer{ border-style: dashed; opacity: .6; }

.pastilles{ list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.pastilles li{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: .9rem 1.1rem .9rem 2.6rem; position: relative; font-size: .97rem; }
.pastilles li::before{ content: '✓'; position: absolute; left: 1rem; top: .9rem; color: var(--or); }

.v-pour{ padding: clamp(3rem, 7vw, 5rem) var(--marge); text-align: center; }
.v-grand{
  font-family: var(--titre); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(1.9rem, 5vw, 3.6rem) !important; line-height: 1.1;
  background: linear-gradient(90deg, #4A2D1C, #A27B5A, #4A2D1C); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v-sous{ font-family: var(--titre); font-size: 1.5rem; margin: 1rem 0 1.2rem; }
.cartes-or{ list-style: none; padding: 0; margin: 0 auto 2.4rem; max-width: 46rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem; }
.cartes-or li, .carte-or{
  background: linear-gradient(135deg, #d8c8ad, #efe5d5 45%, #cdb994); border-radius: 6px;
  padding: 1.4rem 1.3rem; display: grid; place-items: center; font-size: .97rem; line-height: 1.6;
}
.carte-or--seule{ max-width: 32rem; margin: 0 auto; }
.carte-or b{ font-weight: 500; }

.v-maintenant{ padding: clamp(3rem, 7vw, 5rem) var(--marge); background: var(--lait); text-align: center; }
.croix{ list-style: none; padding: 0; margin: 2rem auto 0; max-width: 52rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.croix li{ background: var(--sable); border-radius: 6px; padding: 1.2rem 1.1rem; font-size: .93rem; }
.croix li::before{ content: '✕'; display: block; color: #b33a2e; font-size: 1.3rem; margin-bottom: .3rem; }

.v-tarifs{ background: linear-gradient(180deg, #bfae8f, var(--lait)); padding: clamp(3rem, 7vw, 5rem) var(--marge); }
.v-tarifs__texte{ max-width: 34rem; margin: 0 auto; text-align: center; }
.tarifs{ list-style: none; padding: 0; margin: 1.6rem 0; display: grid; gap: .7rem; }
.tarifs li{
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid rgba(255,255,255,.9); background: rgba(255,255,255,.35); border-radius: 99px; padding: .9rem 1.4rem;
}
.tarifs b{ font-weight: 500; font-size: 1.1rem; }
.v-ouvre{ display: inline-block; background: var(--nuit, #221a1d); color: #fff; border-radius: 99px; padding: .7rem 1.4rem; }
.v-ouvre b{ color: var(--or-clair, #d9c3a0); font-weight: 500; }

.v-vip{ background: var(--nuit); color: rgba(255,255,255,.88); padding: clamp(3rem, 7vw, 5rem) var(--marge); }
.v-vip__texte{ max-width: 40rem; margin: 0 auto; }
.v-vip h2{ color: #fff; text-align: left; }
.v-vip h2 em{ display: block; font-size: .75em; color: var(--or-clair); }
.v-vip__prix{ border: 1px solid var(--or-clair); border-radius: 24px; padding: 1rem 1.4rem; text-align: center; margin: 1.6rem 0 1rem; }
.v-vip__prix b{ font-family: var(--titre); font-weight: 400; font-size: 1.6rem; color: #fff; }
.v-petit{ font-size: .88rem; text-align: center; }
.v-vip a{ color: var(--or-clair); }

@media (min-width: 64rem){
  .v-duo{ grid-template-columns: 1fr 1fr; align-items: stretch; }
  .v-duo__texte{ margin: 0; justify-self: end; }
  .v-duo--inverse .v-duo__texte{ justify-self: start; }
  .v-duo__photo{ max-height: none; }
  .v-ouverture__texte{ padding-bottom: 4rem; }
}

/* --- Pages « bientôt » (témoignages, enseignements, podcasts) ----------- */
.page-simple{ padding: clamp(2rem, 6vw, 4rem) var(--marge) 3rem; max-width: 52rem; margin: 0 auto; }
.page-simple h1{ text-align: center; font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.page-simple .chapeau{ text-align: center; }
.bientot{
  border: 1px dashed var(--or); border-radius: 18px; padding: 1.4rem; text-align: center;
  color: var(--encre-douce); background: #fff; margin: 1.5rem 0;
}
.grille-simple{ display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.carte-simple{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1.3rem; }
.carte-simple h2{ text-align: left; font-size: 1.2rem; margin-bottom: .4rem; }
.carte-simple p{ margin: 0; font-size: .93rem; color: var(--encre-douce); }
.centre{ text-align: center; }
.v-ouverture h1 em, .v-nuit h2 em{ color: var(--or-clair); }
.notifs{ margin: 1.2rem 0 .4rem; } .notifs .petit-gris{ margin: .5rem 0 0; }

/* --- Témoignages -------------------------------------------------------- */
.page-simple:has(#t-ecrits){ max-width: 72rem; }
.t-intro{ max-width: 30rem; margin: 1.5rem auto; text-align: center; background: #fff; border: 1px solid var(--filet);
  border-radius: 18px; padding: 1.6rem 1.4rem; font-family: var(--titre); font-size: 1.05rem; line-height: 1.6; }
.t-intro p{ margin: 0; }
.t-sommaire{ display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.5rem 0 2.5rem; }
.t-sommaire a{ text-decoration: none; border: 1px solid var(--filet); background: #fff; border-radius: 99px; padding: .55rem 1.1rem; font-size: .9rem; }
#ecrits, #podcasts, #videos{ scroll-margin-top: 5rem; margin-bottom: 3rem; }
.t-ecrits{ columns: 1; column-gap: 1rem; }
@media (min-width: 40rem){ .t-ecrits{ columns: 2; } }
@media (min-width: 64rem){ .t-ecrits{ columns: 3; } }
.t-carte{ break-inside: avoid; background: #fff; border: 1px solid var(--filet); border-radius: 16px;
  padding: 1.1rem 1.2rem; margin: 0 0 1rem; font-size: .93rem; line-height: 1.6; }
.t-carte p{ margin: 0 0 .6rem; }
.t-carte p:last-child{ margin-bottom: 0; }
.t-prenom{ font-family: var(--titre); color: var(--rose-sombre); text-align: right; }
.t-podcasts{ display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.t-podcast{ background: var(--sable); border-radius: 16px; padding: 1.2rem 1.3rem; font-size: .92rem; }
.t-podcast h3{ font-family: var(--titre); font-weight: 400; font-size: 1.15rem; margin: 0 0 .3rem; }
.t-podcast p{ margin: 0 0 .5rem; }
.t-duree{ font-size: .8rem; color: var(--rose-sombre); }
.t-fin{ text-align: center; padding: 2rem 0 1rem; }

/* --- Live --------------------------------------------------------------- */
.page-simple.live{ max-width: 76rem; }
.rebours{ display: flex; justify-content: center; gap: .6rem; margin: 1.5rem 0; }
.rebours span{ background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: .8rem .4rem; min-width: 4.6rem;
  display: grid; text-align: center; font-size: .75rem; color: var(--encre-douce); }
.rebours b{ font-family: var(--titre); font-weight: 400; font-size: 2rem; color: var(--rose-sombre); line-height: 1.1; }
.l-zone{ display: grid; gap: 1rem; margin: 1rem 0 1.5rem; }
.l-video{ position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 16px; overflow: hidden; }
.l-video iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.l-chat iframe{ width: 100%; height: 26rem; border: 1px solid var(--filet); border-radius: 16px; background: #fff; }
.l-chat[hidden]{ display: none; }
@media (min-width: 64rem){
  .l-zone{ grid-template-columns: minmax(0, 1fr) 22rem; }
  .l-chat iframe{ height: 100%; min-height: 24rem; }
}
/* Bandeau rouge « en direct » sur toutes les pages */
.bandeau-live{ display: block; text-align: center; text-decoration: none; background: #b3261e; color: #fff;
  padding: .6rem 1rem; font-weight: 500; letter-spacing: .03em; }
.bandeau-live::before{ content: '● '; animation: clignote 1.2s infinite; }
@keyframes clignote{ 50%{ opacity: .3; } }
.l-cta{ margin: 1rem 0 0; } @media (max-width: 63.99rem){ .l-chat iframe{ height: 22rem; } }
.groupe-fb{ background: var(--sable); border-radius: 16px; padding: 1rem 1.1rem; margin: 1.2rem 0 .4rem; font-size: .92rem; } .groupe-fb p{ margin: 0 0 .6rem; } .groupe-fb b{ font-weight: 500; }

/* --- Échanges ----------------------------------------------------------- */
.page-simple.echanges{ max-width: 44rem; }
.e-ecrire{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1rem; margin: 1.5rem 0; }
.e-ecrire textarea, .e-repondre textarea{
  width: 100%; font: 300 1rem var(--texte); color: var(--encre); border: 0; resize: vertical; background: transparent; outline: none; }
.e-ecrire__bas{ display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid var(--filet); padding-top: .6rem; }
.e-ecrire__bas .bouton--petit{ margin-top: 0; }
.e-post{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1rem 1.1rem .6rem; margin-bottom: .9rem; }
.e-post--epingle{ border-color: var(--or); background: linear-gradient(180deg, #fff, var(--lait)); }
.e-epingle{ font-size: .75rem; color: var(--or); margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .08em; }
.e-entete{ display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.e-entete b{ font-weight: 500; }
.e-avatar{ width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sable); color: var(--rose-sombre);
  display: grid; place-items: center; font-family: var(--titre); flex: 0 0 auto; }
.e-avatar--equipe{ background: var(--or); color: #fff; }
.e-texte{ margin: .6rem 0 .3rem; font-size: .97rem; overflow-wrap: anywhere; }
.e-texte p{ margin: 0 0 .35rem; }
.e-actions{ display: flex; flex-wrap: wrap; gap: .2rem; border-top: 1px solid var(--filet); padding-top: .3rem; }
.e-lien{ background: none; border: 0; font: inherit; font-size: .85rem; color: var(--encre-douce); cursor: pointer; padding: .45rem .6rem; border-radius: 99px; min-height: 40px; }
.e-lien:hover{ background: var(--sable); }
.e-reponses:not(:empty){ border-top: 1px solid var(--filet); margin-top: .3rem; padding: .6rem 0 .3rem; }
.e-reponse{ background: var(--lait); border-radius: 14px; padding: .7rem .8rem .2rem; margin: 0 0 .6rem 1rem; }
.e-reponse .e-lien{ font-size: .78rem; min-height: 32px; padding: .2rem .4rem; }
.e-repondre{ display: grid; gap: .4rem; margin-left: 1rem; background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: .6rem .8rem; }
.e-repondre .bouton--petit{ justify-self: end; margin-top: 0; }
.v-temoignages{ display:block; text-align:center; text-decoration:none; background:var(--sable); padding:.9rem var(--marge); font-size:.95rem; } .v-temoignages b{ font-weight:500; color:var(--rose-sombre); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ==========================================================================
   Communauté (echanges.html), façon groupe Facebook
   ========================================================================== */
.page-groupe{ background: #f3ece4; }
.groupe{ max-width: 46rem; margin: 0 auto; padding-bottom: 2rem; }
.g-entete{ background: #fff; border-radius: 0 0 20px 20px; overflow: hidden; box-shadow: 0 10px 30px -24px rgba(51,39,31,.5); }
.g-couverture img{ width: 100%; height: clamp(8rem, 28vw, 14rem); object-fit: cover; object-position: 50% 30%; }
.g-infos{ padding: 1rem 1.2rem 1.2rem; }
.g-infos h1{ font-size: clamp(1.6rem, 3vw + 1rem, 2.2rem); margin: 0 0 .2rem; }
.g-meta{ margin: 0 0 .7rem; font-size: .9rem; color: var(--encre-douce); }
.g-visages{ display: flex; margin-bottom: .8rem; }
.g-visages .avatar{ margin-right: -.5rem; border: 2px solid #fff; }
.g-boutons{ display: flex; gap: .5rem; flex-wrap: wrap; }
.g-boutons .bouton--petit{ margin-top: 0; }
.g-colonne{ padding: 1rem .7rem 0; }
.g-carte{ background: #fff; border-radius: 16px; padding: .9rem 1rem; margin-bottom: .8rem; box-shadow: 0 1px 2px rgba(51,39,31,.08); }
.g-photo-invite{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; background: var(--rose-clair); }
.g-photo-invite p{ margin: 0; font-size: .92rem; flex: 1 1 14rem; }
.g-photo-invite .bouton--petit{ margin-top: 0; }

.avatar{ width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: 0 0 auto; display: inline-grid; place-items: center; overflow: hidden;
  background: var(--sable); color: var(--rose-sombre); font-family: var(--titre); font-size: 1.05rem; }
.avatar img{ width: 100%; height: 100%; object-fit: cover; }
.avatar--petit{ width: 2rem; height: 2rem; font-size: .85rem; }
.avatar--grand{ width: 5.5rem; height: 5.5rem; font-size: 2rem; }
.avatar--equipe{ background: var(--lait); }

.g-ecrire__ligne{ display: flex; gap: .6rem; align-items: flex-start; }
.g-ecrire textarea{ flex: 1; font: 300 1rem var(--texte); color: var(--encre); background: #f3ece4; border: 0; border-radius: 22px;
  padding: .65rem 1rem; resize: none; outline: none; min-height: 2.6rem; }
.g-ecrire__bas{ display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid #efe6dc; }
.g-ecrire__bas .bouton--petit{ margin-top: 0; }
.g-ajout-photo{ cursor: pointer; display: inline-flex; align-items: center; }
.g-apercu{ position: relative; margin: .7rem 0 0 3.1rem; }
.g-apercu img{ max-height: 14rem; border-radius: 12px; }
.g-retirer{ position: absolute; top: .3rem; left: .3rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 1.2rem; cursor: pointer; }

.e-post{ padding-bottom: .3rem; }
.e-post--epingle{ box-shadow: 0 0 0 2px var(--or); }
.e-entete{ display: flex; align-items: center; gap: .6rem; }
.e-qui{ display: flex; flex-direction: column; line-height: 1.25; }
.e-qui b{ font-weight: 500; font-size: .97rem; }
.e-date{ font-size: .78rem; color: var(--encre-faible); }
.e-badge{ align-self: flex-start; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; background: var(--or); color: #fff; border-radius: 99px; padding: .05rem .5rem; margin: .1rem 0; }
.e-texte{ margin: .6rem 0 .4rem; font-size: .98rem; overflow-wrap: anywhere; }
.e-texte p{ margin: 0 0 .3rem; }
.e-voir-plus{ background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--encre); cursor: pointer; }
.e-image{ display: block; width: calc(100% + 2rem); max-width: none; margin: .4rem -1rem; max-height: 32rem; object-fit: cover; cursor: zoom-in; }
.e-compteurs{ display: flex; justify-content: space-between; font-size: .82rem; color: var(--encre-douce); padding: .4rem 0; min-height: 1.6rem; }
.e-actions{ display: flex; border-top: 1px solid #efe6dc; border-bottom: 1px solid #efe6dc; }
.e-actions .e-lien{ flex: 1; text-align: center; border-radius: 8px; }
.e-lien--actif{ color: var(--rose-sombre) !important; font-weight: 500; }
.e-reponses{ padding-top: .5rem; }
.e-reponse{ display: flex; gap: .5rem; margin-bottom: .5rem; }
.e-reponse__col{ min-width: 0; }
.e-bulle{ background: #f3ece4; border-radius: 16px; padding: .5rem .8rem; display: inline-block; max-width: 100%; }
.e-bulle b{ font-weight: 500; font-size: .85rem; }
.e-bulle .e-texte{ margin: .1rem 0 0; font-size: .93rem; }
.e-reponse__bas{ display: flex; gap: .2rem; align-items: center; font-size: .75rem; color: var(--encre-faible); padding-left: .6rem; }
.e-mini{ background: none; border: 0; font: inherit; font-size: .75rem; font-weight: 500; color: var(--encre-douce); cursor: pointer; padding: .3rem .4rem; }
.e-voir{ display: block; padding-left: 0; margin-bottom: .4rem; }
.e-repondre{ display: flex; gap: .5rem; align-items: flex-end; margin: .3rem 0 .6rem; }
.e-repondre textarea{ flex: 1; font: 300 .93rem var(--texte); background: #f3ece4; border: 0; border-radius: 18px; padding: .5rem .9rem; resize: none; outline: none; min-height: 2.2rem; }
.e-envoyer{ border: 0; background: none; color: var(--rose-sombre); font-size: 1.2rem; cursor: pointer; padding: .3rem .4rem; }
.e-epingle{ font-size: .72rem; color: var(--or); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .08em; }

/* Fenêtres (profil, membres, photo en grand) */
.fenetre{ position: fixed; inset: 0; z-index: 30; background: rgba(34,26,29,.55); display: grid; place-items: center; padding: 1rem; }
.fenetre__carte{ background: #fff; border-radius: 20px; padding: 1.4rem; width: min(30rem, 100%); max-height: 88vh; overflow: auto; display: grid; gap: .8rem; }
.fenetre__carte h2{ text-align: left; font-size: 1.5rem; margin: 0; }
.fenetre__bas{ display: flex; justify-content: flex-end; gap: .5rem; align-items: center; }
.fenetre__bas .bouton--petit{ margin-top: 0; }
.f-photo{ display: flex; align-items: center; gap: 1rem; }
.f-photo .bouton--petit{ margin-top: 0; cursor: pointer; }
.fenetre--photo img{ max-width: 100%; max-height: 92vh; border-radius: 8px; }
body.fenetre-ouverte{ overflow: hidden; }
.g-membres{ display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .8rem; }
.g-membre{ display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .82rem; }
.g-membre .avatar{ width: 4rem; height: 4rem; font-size: 1.4rem; }
@media (min-width: 64rem){ .g-colonne{ padding: 1.2rem 0 0; } }
.mon-cadeau--choisir{ border-color: var(--rose-sombre); box-shadow: 0 0 0 2px var(--rose-sombre); background: #fff; }
.mon-cadeau--choisir .mon-cadeau__icone{ background: var(--rose-sombre); }
.mon-cadeau--avenir{ border-style: dashed; }
.choix-palier{ display: grid; gap: .6rem; }
.choix-palier .cadeau{ padding: 1rem; }

/* --- Mon compte (compte.html) ------------------------------------------
   Refonte du 07/10/2026 (« illisible, tout est entassé ») : un en-tête court,
   un sous-menu (Mes cadeaux · Mon profil · Liens), des cartes aérées avec
   une seule pastille d'état et une seule action chacune. */
body[data-page="espace"]{ min-height: 100vh; min-height: 100dvh; }
.espace{ max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 2.5rem; }
.espace .sous-menu{ padding: .4rem 0 1.4rem; }
.espace .sous-menu a{ font-size: .95rem; padding: .55rem 1.1rem; min-height: 44px; display: inline-flex; align-items: center; }

.s-entete{ display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1.1rem; }
.s-entete__photo{ text-decoration: none; border-radius: 50%; }
.s-entete .avatar{ width: 3.6rem; height: 3.6rem; font-size: 1.5rem; background: #fff; border: 2px solid var(--or); }
.s-entete__nom{ min-width: 0; }
.s-entete .surtitre{ margin: 0; font-size: .72rem; }
.s-entete h1{ font-size: 1.65rem; margin: 0; line-height: 1.2; overflow-wrap: anywhere; }

/* Le compteur commun : la seule « grande » info en haut de Mes cadeaux */
.s-compteur{ background: #fff; border-radius: 20px; padding: 1.2rem 1.2rem 1.1rem; margin-bottom: 1.6rem;
  box-shadow: 0 14px 34px -26px rgba(94,59,38,.6); }
.s-compteur__ligne{ margin: 0 0 .7rem; font-size: 1rem; color: var(--encre-douce); }
.s-compteur__ligne b{ font-family: var(--titre); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--rose-sombre); margin-right: .15rem; }
.s-compteur__palier{ margin: .7rem 0 0; font-size: .95rem; }
.s-compteur__palier b{ font-weight: 500; color: var(--rose-sombre); }
.s-compteur__phrase{ margin: .5rem 0 0; font-size: .9rem; color: var(--encre-faible); }

/* Les cartes cadeaux */
.s-cadeaux{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.s-cadeau{ min-width: 0; border-radius: 20px; padding: 1.25rem 1.2rem 1.3rem; background: #fff; box-shadow: 0 1px 2px rgba(51,39,31,.07); }
.s-cadeau__haut{ display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .55rem; }
.s-cadeau__info{ font-size: .86rem; font-weight: 400; letter-spacing: .02em; color: var(--or); line-height: 1.4; min-width: 0; }
.s-cadeau__statut{ flex: none; font-size: .78rem; font-weight: 500; border-radius: 99px; padding: .25rem .7rem; white-space: nowrap; }
.s-cadeau__titre{ font-family: var(--titre); font-weight: 400; font-size: 1.3rem; line-height: 1.3; margin: 0 0 .5rem; }
.s-cadeau__texte{ margin: 0; font-size: .97rem; line-height: 1.6; color: var(--encre-douce); }
.s-cadeau__texte--court{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.s-cadeau__plus{ background: none; border: 0; padding: .35rem 0; min-height: 36px; font: 500 .9rem var(--texte); color: var(--rose-sombre); cursor: pointer; }
.s-cadeau__bas{ margin-top: 1rem; }
.s-cadeau__bas .bouton{ width: 100%; text-align: center; padding: .8rem 1.4rem; }
.s-cadeau__note{ margin: 0; font-size: .93rem; color: var(--encre-douce); }

/* Débloqué : en couleur, liseré or */
.s-cadeau--debloque{ background: linear-gradient(135deg, #fff 0%, #F6F1EA 100%); box-shadow: 0 0 0 1.5px var(--or), 0 14px 30px -22px rgba(184,148,92,.8); }
.s-cadeau--debloque .s-cadeau__statut{ background: var(--or); color: #fff; }
/* À choisir : rose, l'action principale de la page */
.s-cadeau--choisir{ box-shadow: 0 0 0 2px var(--rose-sombre), 0 14px 30px -22px rgba(94,59,38,.8); }
.s-cadeau--choisir .s-cadeau__statut{ background: var(--rose-sombre); color: #fff; }
/* Palier atteint, cadeau en préparation */
.s-cadeau--bientot .s-cadeau__statut{ background: var(--rose-clair); color: var(--rose-sombre); }
/* Verrouillé : contenu grisé, mais le partage reste en couleur */
.s-cadeau--verrou{ background: #faf7f3; box-shadow: inset 0 0 0 1px #e6dccf; }
.s-cadeau--verrou .s-cadeau__info{ color: var(--encre-faible); }
.s-cadeau--verrou .s-cadeau__statut{ background: #ece6df; color: var(--encre-douce); }
.s-cadeau--verrou .s-cadeau__titre{ color: rgba(51,39,31,.62); }
.s-cadeau--verrou .s-cadeau__texte{ color: var(--encre-faible); }
.s-cadeau__manque{ margin-top: 1rem; }
.s-cadeau__manque p{ margin: 0 0 .45rem; font-size: .97rem; font-weight: 400; color: var(--encre); }
.s-cadeau__manque .jauge{ height: 8px; background: #ece6df; }

/* Mon profil */
.s-bloc{ background: #fff; border-radius: 20px; padding: 1.4rem 1.2rem; margin-bottom: 1.1rem; box-shadow: 0 1px 2px rgba(51,39,31,.07); }
.s-bloc__titre{ text-align: left; font-size: 1.25rem; margin: 0 0 .8rem; }
.s-fiche{ display: grid; justify-items: center; text-align: center; gap: .3rem; }
.s-fiche .avatar{ background: #fff; border: 2px solid var(--or); margin-bottom: .4rem; }
.s-fiche__nom{ font-family: var(--titre); font-size: 1.5rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.s-fiche__aide{ margin: 0 0 .7rem; font-size: .93rem; color: var(--encre-faible); max-width: 22rem; }
.s-fiche .bouton{ min-width: 14rem; }
.espace .notifs .bouton{ width: 100%; }
.espace .notifs .petit-gris{ font-size: .9rem; margin: .7rem 0 0; }
.espace .notifs .petit-gris:empty{ display: none; }

/* Le partage quand plus aucun cadeau n'est verrouillé */
.s-partage{ text-align: center; margin-top: 1.6rem; padding: 1.4rem 1.2rem; border-radius: 20px; background: #fff; }
.s-partage h2{ font-size: 1.3rem; margin: 0 0 .4rem; }
.s-partage p{ margin: 0; font-size: .95rem; color: var(--encre-douce); }

/* Liens : une liste façon réglages d'appli */
.s-liens{ display: grid; padding: .3rem 1.2rem; }
.s-liens a{ display: flex; align-items: center; gap: .8rem; min-height: 56px; text-decoration: none; font-size: 1rem; padding: .6rem 0; border-bottom: 1px solid #efe6dc; }
.s-liens a::after{ content: "›"; margin-left: auto; padding-left: .6rem; font-size: 1.4rem; line-height: 1; color: var(--encre-faible); }
.s-liens a:last-child{ border-bottom: 0; }
.s-liens span{ flex: none; width: 1.6rem; text-align: center; }
@media (min-width: 64rem){
  .espace{ padding-top: 1.6rem; }
  .s-entete{ margin-bottom: 1.3rem; }
  .s-entete .avatar{ width: 4.4rem; height: 4.4rem; font-size: 1.8rem; }
  .s-entete h1{ font-size: 2rem; }
  .s-cadeau{ padding: 1.5rem 1.6rem; }
  .s-cadeau__bas .bouton{ width: auto; }
}

/* --- Les mots de Sophie (page de capture) ------------------------------- */
.paroles{ display: grid; gap: 1rem; padding: clamp(2.5rem, 6vw, 4rem) var(--marge); max-width: 66rem; margin: 0 auto; }
.paroles__col{ background: #fff; border: 1px solid var(--filet); border-radius: 20px; padding: 1.4rem 1.4rem .6rem; }
.paroles__col--lumiere{ background: linear-gradient(135deg, #fff, #F6F1EA); border-color: var(--or); }
.paroles blockquote{ margin: 0 0 1rem; font-family: var(--titre); font-size: 1.12rem; line-height: 1.5; }
.paroles__signature{ text-align: right; font-size: .85rem; color: var(--rose-sombre); }
@media (min-width: 52rem){ .paroles{ grid-template-columns: 1fr 1fr; } }
.bienvenue-carte{ display: grid; gap: .2rem; max-width: 40rem; margin: 0 auto 1.6rem; text-align: center;
  background: linear-gradient(135deg, #fff, #F6F1EA); border: 2px solid var(--or); border-radius: 18px; padding: 1.1rem 1.3rem; }
.bienvenue-carte b{ font-family: var(--titre); font-weight: 400; font-size: 1.3rem; }
.bienvenue-carte span:last-child{ font-size: .93rem; color: var(--encre-douce); }
.bienvenue-carte__badge{ font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--or); }
.chapeau b{ font-weight: 500; }

/* Frise : 3 paliers par ligne (demande de Florence), aussi sur téléphone. */
.frise{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40rem){
  .frise{ gap: .45rem; }
  .frise__palier{ display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .7rem .35rem; gap: .05rem; }
  .frise__rond{ grid-row: auto; width: 2rem; height: 2rem; margin: 0 0 .25rem; }
  .frise__nom{ font-size: .62rem; letter-spacing: .08em; }
  .frise__seuil{ font-size: 1rem; }
  .frise__cadeau{ font-size: .74rem; line-height: 1.3; }
  .frise__statut{ font-size: .66rem; line-height: 1.3; }
}

/* --- Frise des paliers sur une ligne ------------------------------------ */
.frise-zone{ max-width: 52rem; margin: 2rem auto 0; }
.ligne-paliers{ position: relative; display: grid; grid-template-columns: repeat(var(--paliers, 6), minmax(0, 1fr)); }
.ligne-paliers__trait{ position: absolute; top: 1.3rem; height: 4px; border-radius: 4px; background: rgba(184,148,92,.25);
  left: calc(100% / var(--paliers, 6) / 2); right: calc(100% / var(--paliers, 6) / 2); }
.ligne-paliers__rempli{ height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rose-profond), var(--or)); transition: width 1s ease; }
.etape-palier{ position: relative; display: grid; justify-items: center; text-align: center; gap: .15rem; }
.etape-palier__rond{ width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 1rem;
  background: #fff; border: 2px solid rgba(184,148,92,.45); }
.etape-palier__nom{ font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-faible); margin-top: .3rem; }
.etape-palier__seuil{ font-family: var(--titre); font-size: 1.15rem; line-height: 1.1; }
.etape-palier--atteint .etape-palier__rond{ background: var(--or); border-color: var(--or); color: #fff; font-weight: 600; }
.etape-palier--en-cours .etape-palier__rond{ background: var(--rose-sombre); border-color: var(--rose-sombre); box-shadow: 0 0 0 6px rgba(94,59,38,.18); animation: pulse 2s infinite; }
.etape-palier--en-cours .etape-palier__nom{ color: var(--rose-sombre); font-weight: 500; }
.etape-palier--secret .etape-palier__rond{ opacity: .75; font-size: .85rem; }
.etape-palier--secret .etape-palier__seuil{ color: var(--encre-faible); }
@keyframes pulse{ 50%{ box-shadow: 0 0 0 10px rgba(94,59,38,.08); } }
.ligne-paliers__detail{ text-align: center; margin: 1.4rem auto 0; max-width: 34rem; font-size: .95rem; }
.ligne-paliers__detail b{ font-weight: 500; color: var(--rose-sombre); }
.ligne-paliers__detail span{ font-size: .82rem; color: var(--encre-faible); }
@media (max-width: 40rem){
  .etape-palier__rond{ width: 2.1rem; height: 2.1rem; font-size: .85rem; }
  .ligne-paliers__trait{ top: 1.05rem; }
  .etape-palier__nom{ font-size: .55rem; letter-spacing: .03em; }
  .etape-palier__seuil{ font-size: .95rem; }
}

/* --- Barres de partage -------------------------------------------------- */
.barre-partage{ margin: 1.2rem auto 0; max-width: 36rem; text-align: center; }
.barre-partage__titre{ font-size: .88rem; color: var(--encre-douce); margin: 0 0 .5rem; }
.barre-partage__boutons{ display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.bp{ font: 400 .85rem var(--texte); text-decoration: none; cursor: pointer; color: var(--encre);
  background: #fff; border: 1px solid var(--filet); border-radius: 99px; padding: .5rem .9rem; min-height: 40px; display: inline-flex; align-items: center; }
.bp:hover{ background: var(--sable); }
.bp--natif{ background: var(--rose-sombre); color: #fff; border-color: var(--rose-sombre); }
.bp--wa{ border-color: #25d366; }
.bp--fb, .bp--ms{ border-color: #1877f2; }
.ouverture .barre-partage{ margin-top: 1.4rem; }
@media (min-width: 64rem){ .ouverture .barre-partage{ margin-left: 0; text-align: left; } .ouverture .barre-partage__boutons{ justify-content: flex-start; } }
/* Partage dans une carte cadeau verrouillée : une seule rangée de pastilles
   en couleur, qui défile au doigt sur téléphone (au lieu de 3 lignes). */
.s-cadeau .barre-partage{ margin: 1.1rem 0 0; max-width: none; text-align: left; padding-top: 1rem; border-top: 1px solid #e6dccf; }
.s-cadeau .barre-partage__titre{ font-size: .93rem; font-weight: 400; color: var(--encre); margin: 0 0 .6rem; }
.s-cadeau .barre-partage__boutons{ justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: .5rem;
  margin: 0 -1.2rem; padding: 0 1.2rem .3rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.s-cadeau .barre-partage__boutons::-webkit-scrollbar{ display: none; }
.s-cadeau .bp{ flex: none; white-space: nowrap; font-weight: 500; min-height: 42px; color: #fff; border: 0; }
.s-cadeau .bp--natif{ background: var(--rose-sombre); }
.s-cadeau .bp--wa{ background: #128C7E; }
.s-cadeau .bp--fb{ background: #1877F2; }
.s-cadeau .bp--ms{ background: #0866FF; }
.s-cadeau .bp--sms{ background: #94733F; }
.s-cadeau .bp--mail{ background: #6E5A55; }
.s-cadeau .bp:not([class*="bp--"]){ background: #fff; color: var(--encre); border: 1px solid var(--filet); }
.s-cadeau .bp:hover{ filter: brightness(1.08); }
@media (min-width: 64rem){
  .s-cadeau .barre-partage__boutons{ flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* --- Contenus : carte du live et vidéos dans les partages ---------------- */
.live-carte{ display: grid; gap: .25rem; justify-items: center; text-align: center; text-decoration: none; color: var(--encre); margin-bottom: 1rem; }
.live-carte__sur{ font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-sombre); }
.live-carte__titre{ font-family: var(--titre); font-weight: 400; font-size: 1.35rem; }
.live-carte__date{ font-size: .95rem; }
.live-carte__date:first-letter{ text-transform: uppercase; }
.live-carte__rebours{ font-size: .88rem; color: var(--encre-faible); }
.live-carte .bouton{ margin-top: .4rem; }
.live-carte--direct{ border: 2px solid #c0392b; }
.live-carte--direct .live-carte__sur{ color: #c0392b; font-weight: 500; }
.live-carte--direct .bouton{ background: #c0392b; }
.e-video{ margin: .7rem 0 .2rem; }
.e-texte a{ color: var(--rose-sombre); word-break: break-all; }
#podcasts h2{ text-align: center; margin-top: 0; }
.e-repondre--invite{ align-items: center; text-decoration: none; }
.e-faux-champ{ flex: 1; font: 300 .93rem var(--texte); color: var(--encre-faible); background: #f3ece4; border-radius: 18px; padding: .5rem .9rem; }
.e-actions .e-lien{ white-space: nowrap; font-size: .88rem; }
.e-actions{ flex-wrap: nowrap; } .e-actions .e-lien{ flex: 1 1 0; padding-left: .2rem; padding-right: .2rem; min-width: 0; }
.e-repondre textarea, .e-faux-champ{ border: 1px solid #DCCFBD !important; }

/* --- Programme des lives (Partages, page du live, inscription) ----------- */
.lives-zone{ margin: 0 0 1rem; }
.lives__titre{ font-size: 1.3rem; text-align: center; margin: 0 0 .7rem; }
.lives{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lives__ligne{ display: flex; align-items: center; gap: .8rem; background: var(--lait); border: 1px solid var(--filet); border-radius: 14px; padding: .55rem .8rem; }
.lives__cal{ flex: none; width: 3.3rem; text-align: center; background: #fff; border: 1px solid var(--or); border-radius: 10px; padding: .25rem 0; line-height: 1.1; }
.lives__cal b{ display: block; font-family: var(--titre); font-weight: 400; font-size: 1.5rem; color: var(--rose-sombre); }
.lives__cal span{ font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-faible); }
.lives__txt{ flex: 1; display: grid; text-align: left; }
.lives__txt b{ font-weight: 500; font-size: .98rem; }
.lives__txt span{ font-size: .88rem; color: var(--encre-faible); }
.lives__etat{ flex: none; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border-radius: 99px; padding: .2rem .6rem; }
.lives__ligne--prochain{ background: #fff; border: 2px solid var(--rose-sombre); }
.lives__ligne--prochain .lives__etat{ background: var(--rose-sombre); color: #fff; }
.lives__ligne--passe{ opacity: .5; }
.lives__ligne--passe .lives__etat{ background: var(--sable); }
.sophie .lives-zone{ margin: 1rem 0; }
.sophie .lives__titre{ text-align: left; }

/* --- Sous-menu de la page Partages ------------------------------------------ */
.sous-menu{ display: flex; gap: .4rem; justify-content: center; padding: .9rem .7rem .2rem; flex-wrap: wrap; }
.sous-menu a{ text-decoration: none; font-size: .92rem; color: var(--encre); background: #fff; border: 1px solid var(--filet); border-radius: 99px; padding: .5rem 1rem; }
.sous-menu a[aria-current="page"]{ background: var(--rose-sombre); border-color: var(--rose-sombre); color: #fff; font-weight: 500; }
.rappel-live{ display: block; text-decoration: none; text-align: center; font-size: .92rem; color: var(--rose-sombre); background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: .65rem .8rem; margin-bottom: 1rem; }
.rappel-live:first-letter{ text-transform: none; }
.rappel-live--direct{ background: #c0392b; border-color: #c0392b; color: #fff; font-weight: 500; }

/* --- Page de vente : bonus de lancement (étapes datées) ------------------- */
.lancement{ list-style: none; margin: 0 auto; padding: 0; max-width: 40rem; display: grid; gap: .9rem; text-align: left; }
.lancement__etape{ position: relative; display: grid; gap: .25rem; background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1.1rem 1.3rem; }
.lancement__quand{ font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-sombre); }
.lancement__etape b{ font-family: var(--titre); font-weight: 400; font-size: 1.35rem; }
.lancement__etape span{ font-size: .95rem; }
.lancement__etat:empty{ display: none; }
.lancement__etat{ justify-self: start; font-size: .72rem !important; letter-spacing: .1em; text-transform: uppercase; border-radius: 99px; padding: .2rem .7rem; background: var(--sable); }
.lancement__etape--actuelle{ border: 2px solid var(--or); box-shadow: 0 14px 30px -22px rgba(51,39,31,.6); }
.lancement__etape--actuelle .lancement__etat{ background: var(--rose-sombre); color: #fff; }
.lancement__etape--passe{ opacity: .45; }
.lancement__etape--passe b{ text-decoration: line-through; }
.lancement__etape--fin b{ color: var(--rose-sombre); }
.lancement-rappel:empty{ display: none; }

/* Frise : l'étape « Inscription » (cadeau déjà reçu) et le palier en cours grisé (pas encore atteint). */
.etape-palier--inscription .etape-palier__nom{ color: var(--or); font-weight: 500; }
.etape-palier--inscription .etape-palier__seuil{ font-family: var(--texte); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--or); padding-top: .25rem; }
.etape-palier--en-cours .etape-palier__rond{ background: #ece6df; border: 2px dashed var(--rose-sombre); box-shadow: none; animation: none; filter: grayscale(1); opacity: .9; }

/* Frise : la bulle du compteur au-dessus du trait (même largeur que le trait). */
.frise-compteur{ position: relative; height: 2.6rem; margin: 0 calc(100% / var(--paliers, 6) / 2); }
.frise-compteur__bulle{ position: absolute; bottom: .55rem; transform: translateX(-50%); white-space: nowrap;
  background: var(--rose-sombre); color: #fff; font-size: .8rem; font-weight: 500; letter-spacing: .02em;
  padding: .28rem .7rem; border-radius: 99px; box-shadow: 0 6px 14px -8px rgba(51,39,31,.6); transition: left 1s ease; }
.frise-compteur__bulle::after{ content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom: 0; border-top-color: var(--rose-sombre); }
@media (max-width: 40rem){ .frise-compteur__bulle{ font-size: .7rem; padding: .22rem .55rem; } }

/* Page de capture : les cadeaux en 3 + 2, centrés (jamais un seul tout seul en bas). */
#grille{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
#grille > .cadeau{ flex: 1 1 100%; }
@media (min-width: 40rem){ #grille > .cadeau{ flex: 0 1 calc((100% - 2rem) / 3); } }

/* --- Accroche en 3 paragraphes (intro, lives, en plus) ------------------ */
.chapeau p{ margin: 0 0 .9rem; }
.chapeau p:last-child{ margin-bottom: 0; }
.chapeau__intro{ font-family: var(--titre); font-size: 1.25em; line-height: 1.4; color: var(--encre); }
.chapeau__intro b{ font-weight: 400; color: var(--rose-sombre); }
.chapeau__lives b{ display: block; font-size: 1.15em; font-weight: 500; color: var(--encre); letter-spacing: .01em; }
.chapeau__lives span{ display: block; font-size: .95em; }
.chapeau__plus{ font-size: .9em; line-height: 1.55; }
.chapeau__plus b{ color: var(--encre); }

/* --- Visuels des cadeaux (couverture du PDF, miniature des vidéos) ------- */
.cadeau__visuel{ display: block; margin: -1.3rem -1.3rem 1rem; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 17px 17px 0 0; background: var(--sable); }
.cadeau__visuel img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cadeau__visuel--couverture img{ object-fit: contain; padding: .8rem 0; }
.cadeau__rang{ z-index: 1; background-color: #fff; }
.choix-palier .cadeau__visuel{ margin: -1rem -1rem .8rem; }
.bienvenue-carte__visuel{ width: 7.5rem; height: auto; margin: 0 auto .6rem; border-radius: 6px; box-shadow: 0 6px 18px rgba(51,39,31,.18); }
.s-cadeau__visuel{ margin: -1.25rem -1.2rem 1rem; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px 20px 0 0; background: var(--sable); }
.s-cadeau__visuel img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.s-cadeau__visuel--couverture img{ object-fit: contain; padding: .7rem 0; }
.s-cadeau--verrou .s-cadeau__visuel img{ filter: grayscale(.6) opacity(.75); }
@media (min-width: 48rem){ .s-cadeau__visuel{ margin: -1.5rem -1.6rem 1.1rem; } }

/* --- Cadeau déjà choisi (personne inscrite) : grisé, impossible à recocher --- */
.cadeau--pris, .cadeau--pris:hover{ cursor: not-allowed; background: var(--sable); border: 1px dashed var(--or); box-shadow: none; transform: none; }
.cadeau--pris .cadeau__visuel img{ filter: grayscale(1) opacity(.55); }
.cadeau--pris .cadeau__titre, .cadeau--pris .cadeau__texte, .cadeau--pris .cadeau__format{ opacity: .6; }
.cadeau--pris .cadeau__rang{ background: var(--or); border-color: var(--or); color: #fff; }
.cadeau--pris .cadeau__quand{ display: block; margin-top: .7rem; font-weight: 500; color: var(--rose-sombre); opacity: 1; }

/* --- Fenêtre de choix : vignette à gauche, texte à droite (plus compact) --- */
.choix-palier .cadeau{ display: grid; grid-template-columns: 5.5rem 1fr; column-gap: .9rem; align-items: start; }
.choix-palier .cadeau > *{ grid-column: 2; }
.choix-palier .cadeau__visuel{ grid-column: 1; grid-row: 1 / span 4; margin: 0; aspect-ratio: 1; border-radius: 12px; }
.choix-palier .cadeau__texte{ font-size: .88rem; }
.cadeau--actuel, .cadeau--actuel:hover{ border: 2px solid var(--rose-sombre); background: #fff; }
.cadeau--actuel .cadeau__visuel img{ filter: none; }
.cadeau--actuel .cadeau__titre, .cadeau--actuel .cadeau__format{ opacity: 1; }

/* --- « Plus que N personnes » : bien visible -------------------------------- */
.s-cadeau__manque{ background: var(--rose-clair); border-radius: 14px; padding: .9rem 1rem 1rem; }
.s-cadeau__manque p{ font-size: 1.02rem; font-weight: 500; color: var(--encre); margin-bottom: .6rem; }
.s-cadeau__nombre{ font-family: var(--titre); font-weight: 400; font-size: 1.7em; line-height: 1; color: var(--rose-sombre); vertical-align: -.08em; }
.s-cadeau__manque .jauge{ height: 12px; background: rgba(255,255,255,.75); }
.s-cadeau__manque .jauge__barre{ background: linear-gradient(90deg, var(--or), var(--rose-sombre)); min-width: 12px; }

/* --- Sous-menus (Mon compte, Partages) : une vraie barre d'onglets, bien visible --- */
.sous-menu, .espace .sous-menu{ display: flex; flex-wrap: nowrap; gap: .3rem; justify-content: stretch;
  max-width: 34rem; margin: .4rem auto 1.4rem; padding: .35rem; background: #fff;
  border: 1px solid var(--filet); border-radius: 99px; box-shadow: 0 4px 16px rgba(51,39,31,.08);
  position: sticky; top: .6rem; z-index: 20; }
.sous-menu a, .espace .sous-menu a{ flex: 1 1 0; justify-content: center; text-align: center; border: 0; background: transparent;
  font-size: 1rem; font-weight: 500; padding: .7rem .6rem; min-height: 46px; display: flex; align-items: center; border-radius: 99px; white-space: nowrap; }
.sous-menu a[aria-current="page"]{ background: var(--rose-sombre); color: #fff; box-shadow: 0 2px 8px rgba(94,59,38,.35); }
@media (min-width: 48rem){ .sous-menu, .espace .sous-menu{ top: 4.4rem; } }
#l-date{ text-align: center; margin-left: auto; margin-right: auto; }
.sous-menu, .espace .sous-menu{ width: calc(100% - 2rem); box-sizing: border-box; }

/* --- Carte « Cadeau du palier N » : le cadeau choisi en petit, sous un grand titre --- */
.s-cadeau__palier{ font-family: var(--titre); font-weight: 400; font-size: 1.55rem; line-height: 1.2; margin: 0; color: var(--encre); }
.s-cadeau__label{ margin: .8rem 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--or); font-weight: 500; }
.s-cadeau__choisi{ display: flex; gap: 1rem; align-items: flex-start; background: var(--lait); border: 1px solid var(--filet); border-radius: 14px; padding: .8rem; }
.s-cadeau__vignette{ flex: none; width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: 10px; }
.s-cadeau__corps{ min-width: 0; }
.s-cadeau__format{ display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--or); margin-bottom: .2rem; }
.s-cadeau__choisi .s-cadeau__titre{ font-size: 1.12rem; margin: 0 0 .3rem; }
.s-cadeau__choisi .s-cadeau__texte{ font-size: .9rem; margin: 0; }
.s-cadeau--verrou .s-cadeau__choisi .s-cadeau__titre, .s-cadeau--verrou .s-cadeau__choisi .s-cadeau__texte{ opacity: 1; color: var(--encre); }
.s-cadeau__choisi .s-cadeau__texte{ color: var(--encre-douce) !important; }
.s-cadeau__changer{ display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: .7rem; }
.s-cadeau__changer span{ font-size: .82rem; color: var(--encre-faible); }

/* --- Mon compte sur une seule page ------------------------------------------ */
.lien-profil{ margin-top: .3rem; padding: .35rem .8rem; font: inherit; font-size: .85rem; color: var(--rose-sombre);
  background: #fff; border: 1px solid var(--filet); border-radius: 99px; cursor: pointer; }
.s-notifs{ text-align: center; margin-bottom: 1.2rem; padding: 1rem; }
.s-notifs .bouton{ width: 100%; max-width: 26rem; }
.s-notifs .petit-gris:empty{ display: none; }

/* ==========================================================================
   Univers pierre et bois (comme les visuels) : fond en pierre claire veinée,
   boutons en noyer, cadres en bois. Plus de rose.
   ========================================================================== */
:root{
  --pierre-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .35 0 0 0 0 .27 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pierre-veines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .011' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .47 0 0 0 0 .38 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --bois-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .35' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .07 0 0 0 0 .03 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --bois: #5E3B26;
  --bois-fonce: #3F2617;
  --rayons: repeating-linear-gradient(118deg, rgba(255,255,255,0) 0 9rem, rgba(255,255,255,.22) 9rem 13rem, rgba(255,255,255,0) 13rem 26rem);
}
html, body{ background: var(--pierre-grain), var(--pierre-veines), var(--lait); }
@media (min-width: 64rem){ body{ background: var(--pierre-grain), var(--pierre-veines), var(--lait); } }
.paliers, .inscription{ background: var(--rayons), var(--pierre-grain), var(--pierre-veines), var(--sable) !important; }
.sophie{ background: var(--pierre-grain), var(--lait) !important; }

/* Titres gravés dans la pierre */
h2{ color: #5A4636; text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(60,40,25,.18); letter-spacing: .01em; }

/* Boutons en noyer */
.bouton{
  background: var(--bois-grain), linear-gradient(180deg, #7A5034 0%, #5E3B26 55%, #4A2D1C 100%);
  background-size: 400px 120px, 100% 100%;
  border: 1px solid #3F2617; color: #F6EEE2; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 22px -12px rgba(63,38,23,.9);
}
.bouton:hover{ background: var(--bois-grain), linear-gradient(180deg, #6B452C 0%, #4F311F 100%); background-size: 400px 120px, 100% 100%; }
.bouton--clair{ background: var(--pierre-grain), #F6F1EA; color: var(--bois); border: 1px solid #A27B5A; text-shadow: none; box-shadow: none; }
.bouton--clair:hover{ background: var(--pierre-grain), #fff; }

/* Jauges : un filet de bronze sur pierre */
.jauge{ background: #DDD2C3; box-shadow: inset 0 1px 2px rgba(63,38,23,.25); }
.jauge__barre{ background: linear-gradient(90deg, #8C6446, #B8945C 70%, #D9BE8C); }

/* --- Haut de page : l'affiche ------------------------------------------- */
.cache-ecran{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ouverture{ padding: 0 0 2rem; background: none; }
.ouverture__affiche{ display: block; margin: 0; }
.ouverture__affiche img{ width: 100%; height: min(100vw, 47svh); object-fit: cover; object-position: 50% 70%; }
.ouverture__texte{ padding: 1rem var(--marge) 0; max-width: 36rem; margin: 0 auto; }
.ouverture__logo{ display: none; }
.ouverture .surtitre{ color: var(--bois); margin-bottom: .6rem; }
.ouverture .chapeau{ margin-bottom: 1rem; }
.ouverture .chapeau p{ margin-bottom: .5rem; }
.ouverture .chapeau__intro{ font-size: 1.15em; }
.ouverture .chapeau__intro b{ color: var(--bois); }
.ouverture > .ouverture__texte > .bouton{ display: block; text-align: center; max-width: 24rem; margin: 0 auto; }
.ouverture .chapeau__plus{ color: var(--encre-douce); margin: 1rem 0 0; }

/* Compteur réduit : nombre et légende sur une ligne */
.ouverture .compteur{
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem;
  max-width: 24rem; margin: 1rem auto 0; padding: .7rem 1rem .75rem; text-align: left; border-radius: 14px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(162,123,90,.35); box-shadow: 0 10px 24px -18px rgba(63,38,23,.6);
}
.ouverture .compteur__nombre{ font-size: 2.2rem; color: var(--bois); }
.ouverture .compteur__legende{ margin: 0; font-size: .95rem; }
.ouverture .compteur .jauge{ grid-column: 1 / -1; height: 8px; margin-top: .45rem; }
.ouverture .compteur__palier{ grid-column: 1 / -1; font-size: .85rem; margin-top: .45rem; line-height: 1.45; }

@media (min-width: 64rem){
  .ouverture{
    display: grid; grid-template-columns: minmax(22rem, 36%) minmax(0, 1fr); grid-template-areas: "texte affiche";
    gap: 0; max-width: none; padding: 0; align-items: center; text-align: left;
  }
  .ouverture__affiche{ grid-area: affiche; align-self: center; }
  .ouverture__affiche img{
    height: auto; aspect-ratio: 1600 / 897; object-fit: cover;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3%); mask-image: linear-gradient(90deg, transparent 0, #000 3%);
  }
  .ouverture__texte{ grid-area: texte; padding: 1.5rem 1rem 1.5rem var(--marge); max-width: 34rem; margin: 0; }
  .ouverture__logo{ display: block; width: 72px; margin: 0 0 .8rem; }
  .ouverture .chapeau__intro{ font-size: 1.3em; }
  .ouverture > .ouverture__texte > .bouton{ display: inline-block; margin: 0; }
  .ouverture .compteur{ margin: 1.1rem 0 0; }
  .ouverture .chapeau__plus{ font-size: .88rem; }
}

/* --- Les lives en affiches encadrées de bois --------------------------- */
.lives{ display: flex; gap: .9rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .3rem .2rem 1rem; -webkit-overflow-scrolling: touch; }
.lives__ligne{
  flex: 0 0 min(78%, 17rem); scroll-snap-align: start; display: grid; grid-template-columns: auto 1fr; gap: .4rem .7rem;
  align-items: center; position: relative; padding: .6rem .6rem .75rem; background: rgba(255,255,255,.7); border-radius: 12px;
}
.lives__visuel{
  grid-column: 1 / -1; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px;
  border: 5px solid var(--bois-fonce); background: var(--bois-grain), #5E3B26; box-shadow: 0 8px 18px -10px rgba(63,38,23,.8);
}
.lives__visuel img{ width: 100%; height: 100%; object-fit: cover; }
.lives__visuel--texte{ display: grid; place-items: center; padding: .8rem; }
.lives__visuel--texte span{
  display: grid; place-items: center; width: 100%; height: 100%; background: var(--pierre-grain), #F6F1EA; padding: .5rem;
  font-family: var(--titre); color: var(--bois-fonce); text-align: center; font-size: 1.05rem; line-height: 1.25;
}
.lives__etat{ position: absolute; top: 1rem; right: 1rem; }
.lives__ligne--passe .lives__etat{ background: rgba(255,255,255,.9); }
.lives__cal{ border-color: #A27B5A; }
.lives__ligne--prochain{ border: 2px solid var(--bois); background: #fff; }

/* --- La frise : une boîte cadeau sous chaque palier --------------------- */
.etape-palier__boite{ order: 9; display: block; width: min(6.5rem, 80%); margin-top: .3rem; }
.etape-palier__boite img{ width: 100%; height: 4.6rem; object-fit: contain; object-position: 50% 100%; mix-blend-mode: multiply; }
.etape-palier--secret .etape-palier__boite img{ opacity: .85; }
@media (max-width: 63.99rem){
  .ouverture__affiche img{ height: min(100vw, 41svh); object-position: 50% 66%; }
  .ouverture__texte{ padding-top: .8rem; }
  .ouverture .surtitre{ font-size: .62rem; letter-spacing: .1em; margin-bottom: .4rem; }
  .ouverture .chapeau__intro{ font-size: 1.08em; line-height: 1.35; }
  .ouverture .chapeau__lives span{ font-size: .88em; }
  .ouverture .chapeau{ margin-bottom: .8rem; }
  .ouverture .bouton{ padding: .85rem 1.5rem; }
}
.sophie > *, .lives-zone{ min-width: 0; max-width: 100%; }
.paliers__escalier{ display: block; width: 100%; max-width: 52rem; margin: 1.6rem auto 0; border-radius: 6px;
  border: 6px solid var(--bois-fonce); box-shadow: 0 18px 36px -20px rgba(63,38,23,.85); }
.cadeaux__tube{ display: block; width: 100%; max-width: 40rem; margin: -.4rem auto 1.2rem; mix-blend-mode: multiply; }
.cadeaux__tube{ height: auto; }
.etape-palier__boite img[src$="boite-4.jpg"]{ -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 50%, transparent 72%); mask-image: radial-gradient(ellipse at 50% 55%, #000 50%, transparent 72%); }

/* Haut de page, version 2 : sur ordinateur, l'affiche verticale remplit toute la
   hauteur à droite ; sur tablette, l'affiche horizontale en bandeau. */
@media (min-width: 40rem) and (max-width: 63.99rem){
  .ouverture__affiche img{ height: min(56vw, 46svh); object-position: 50% 58%; }
}
@media (min-width: 64rem){
  .ouverture{ grid-template-columns: minmax(0, 1fr) minmax(0, 46%); min-height: calc(100svh - 4.5rem); align-items: stretch; }
  .ouverture__texte{ align-self: center; padding: 2rem clamp(1.5rem, 4vw, 4rem) 2rem var(--marge); max-width: 38rem; justify-self: end; width: 100%; }
  .ouverture__logo{ display: none; }
  .ouverture__affiche{ align-self: stretch; position: relative; }
  .ouverture__affiche img{
    position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 72%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%);
  }
  .ouverture .chapeau__intro{ font-size: 1.35em; }
}

/* Fonds effet pierre plus marqués : travertin (veines horizontales et pores)
   et murs en blocs de pierre appareillés, comme dans les visuels. */
:root{
  --travertin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='600'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .04' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .52 0 0 0 0 .43 0 0 0 0 .33 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
  --pores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='turbulence' baseFrequency='.06 .14' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .32 0 0 0 0 .24 0 0 0 -.9 .26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --blocs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='240'%3E%3Cg fill='none' stroke-width='1.5'%3E%3Cpath d='M0 .75H520M0 120.75H520M.75 0V120M260.75 120V240' stroke='rgba(110,85,60,.16)'/%3E%3Cpath d='M0 2.5H520M0 122.5H520M2.5 0V120M262.5 120V240' stroke='rgba(255,255,255,.55)'/%3E%3C/g%3E%3C/svg%3E");
}
html, body{ background: var(--pierre-grain), var(--pores), var(--travertin), var(--lait) !important; }
.paliers, .inscription{ background: var(--rayons), var(--blocs), var(--pierre-grain), var(--pores), var(--travertin), var(--sable) !important; }
.sophie{ background: var(--blocs), var(--pierre-grain), var(--pores), var(--travertin), #EFE8DE !important; }
.compteur, .cadeau, .bienvenue-carte, .lives__ligne, .carte-simple, .g-carte, .s-cadeau{
  background-image: var(--pierre-grain), linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)), var(--travertin) !important;
  background-color: #F8F4EE !important;
}
.lives__ligne--prochain{ background-color: #fff !important; }

/* ==========================================================================
   Pierre : le vrai mur des visuels (pierre crème lisse, rayon de lumière),
   à la place des textures inventées.
   ========================================================================== */
html, body{ background: url("../images/pierre/mur-clair.jpg") 0 0 / 1200px repeat, #F0E8E2 !important; }
.paliers, .inscription, .sophie, .cadeaux{
  background: url("../images/pierre/mur-clair.jpg") 0 0 / 1200px repeat, #F0E8E2 !important;
}
.compteur, .cadeau, .bienvenue-carte, .lives__ligne, .carte-simple, .g-carte, .s-cadeau{
  background-image: none !important; background-color: rgba(253,250,246,.86) !important;
}
.lives__ligne--prochain{ background-color: #fff !important; }

/* La section des lives, sans la photo : une seule colonne. */
.sophie{ grid-template-columns: minmax(0, 46rem) !important; }
.sophie h2, .sophie > div{ text-align: left; }

/* Les lives, les uns sous les autres. */
.lives{ display: grid !important; gap: .9rem; overflow: visible; padding: 0; }
.lives__ligne{
  display: grid; grid-template-columns: minmax(9rem, 15rem) auto minmax(0, 1fr); grid-template-rows: auto;
  gap: .3rem 1rem; align-items: center; padding: .7rem; flex: none;
}
.lives__visuel{ grid-column: 1; grid-row: 1 / span 2; }
.lives__cal{ grid-column: 2; grid-row: 1 / span 2; }
.lives__txt{ grid-column: 3; grid-row: 1 / span 2; }
.lives__etat{ top: 1.1rem; left: 1.1rem; right: auto; }
@media (max-width: 36rem){
  .lives__ligne{ grid-template-columns: auto minmax(0, 1fr); }
  .lives__visuel{ grid-column: 1 / -1; grid-row: 1; }
  .lives__cal{ grid-column: 1; grid-row: 2; }
  .lives__txt{ grid-column: 2; grid-row: 2; }
}

/* Page Live : le prochain live en grand. */
.l-affiche{ margin: 0 auto 1.4rem; max-width: 46rem; }
.l-affiche img{ width: 100%; height: auto; border: 7px solid var(--bois-fonce); border-radius: 6px; box-shadow: 0 24px 50px -24px rgba(63,38,23,.9); }

.page-simple{ background: none !important; }


/* Le mur continue : le haut de page reprend l'ombre et la lumière du visuel,
   et l'affiche se fond dans le mur sur une large bande. */
.ouverture{
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(190,176,168,.45) 0%, rgba(205,193,186,.28) 40%, rgba(253,249,244,0) 78%),
    url("../images/pierre/mur-clair.jpg") 0 0 / 1200px repeat, #F0E8E2 !important;
}
@media (min-width: 64rem){
  .ouverture__affiche img{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 2%, #000 5%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 2%, #000 5%);
  }
}
@media (max-width: 63.99rem){
  .ouverture__affiche img{
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
  }
}

/* « Comment ça marche » : l'escalier à gauche, le texte à droite. */
.paliers__escalier{ height: auto; margin: 0 auto 1.4rem; }
@media (min-width: 56rem){
  .paliers__haut{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; max-width: 72rem; margin: 0 auto; }
  .paliers__haut .paliers__escalier{ margin: 0; max-width: none; }
  .paliers__texte h2, .paliers__texte .paliers__intro{ text-align: left; margin-left: 0; }
}

/* La jauge des paliers : le visuel du tube, avec la bulle du compteur au-dessus. */
.tube{ position: relative; max-width: 56rem; margin: 0 auto; padding-top: 2.8rem; }
.tube__visuel{ width: 100%; height: auto; mix-blend-mode: multiply; }
.tube__bulle{ top: .2rem; bottom: auto; }
.ligne-paliers__detail{ margin-top: .4rem; }

/* Boîtes cadeaux qui flottent autour du texte (grand écran seulement). */
.sophie, .cadeaux, .inscription{ position: relative; }
.flotte{ display: none !important; position: absolute; z-index: 0; width: clamp(70px, 7.5vw, 125px); height: auto; mix-blend-mode: multiply;
  pointer-events: none; will-change: transform; transition: transform .6s cubic-bezier(.2,.7,.2,1); display: none; }
.flotte--g{ left: 2.5%; }
.flotte--d{ right: 2.5%; }
@media (min-width: 64rem){ .flotte{ display: block; } }
.sophie > *:not(.flotte), .cadeaux > *:not(.flotte), .inscription > *:not(.flotte){ position: relative; z-index: 1; }
img.flotte{ width: clamp(70px, 7.5vw, 125px) !important; max-width: none !important; aspect-ratio: auto !important; height: auto !important; border-radius: 0 !important; margin: 0 !important; object-fit: contain !important; }

/* Un seul mur continu : le fond est posé une seule fois, sur toute la page
   (aucune partie ne redémarre le motif), et un filet de bois sépare les blocs. */
html, body{ background: url("../images/pierre/mur-clair.jpg") 0 0 / 1200px repeat, #F0E8E2 !important; }
.paliers, .inscription, .sophie, .cadeaux, .page-simple{ background: none !important; }
.ouverture{
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 66%),
    linear-gradient(180deg, rgba(190,176,168,.45) 0%, rgba(205,193,186,.28) 40%, rgba(253,249,244,0) 78%) !important;
}
.sophie, .paliers, main, .inscription, footer{
  border-top: 6px solid transparent;
  border-image: linear-gradient(180deg, #7A5034 0%, #4A2D1C 45%, #2E1B10 100%) 1;
  box-shadow: inset 0 8px 14px -12px rgba(46,27,16,.5);
}

/* Cartes cadeaux : contenu calé en haut (toutes les images à la même hauteur)
   et chaque image dans un cadre en bois, comme les cadres photo des visuels. */
button.cadeau{ display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
button.cadeau > *{ align-self: stretch; }
button.cadeau .cadeau__format{ align-self: flex-start; }
.cadeau__visuel, .s-cadeau__visuel{
  margin: 0 0 1rem !important; aspect-ratio: 4 / 3; border-radius: 4px !important;
  border: 7px solid #3F2617; outline: 1px solid rgba(255,255,255,.25); outline-offset: -8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 10px 20px -12px rgba(46,27,16,.85);
  background: #F6F1EA;
}
.cadeau__visuel--couverture img, .s-cadeau__visuel--couverture img{ padding: .6rem 0; }


/* Le tube : la bulle colle au tube, et les tiges dorées se remplissent
   au fil des inscriptions (vides = verre dépoli, remplies = or chaud qui brille). */
.tube{ padding-top: 0; }
.tube__cadre{ position: relative; }
.tube__bulle{ top: auto !important; bottom: 74% !important; }
.tube__tige{ position: absolute; top: 40.4%; height: 4.6%; border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, rgba(236,230,224,.92), rgba(214,205,197,.92)); box-shadow: inset 0 1px 2px rgba(51,39,31,.25); }
.tube__liquide{ display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(180deg, #FFE3A3 0%, #E9A13C 45%, #B8651E 100%);
  box-shadow: 0 0 10px 2px rgba(240,170,70,.75); transition: width 1.2s ease; }

/* Le cadeau de bienvenue : visuel à gauche, texte à droite, badge bien visible. */
.bienvenue-carte{ grid-template-columns: auto 1fr; align-items: center; gap: 1.4rem; text-align: left; max-width: 46rem; padding: 1.3rem 1.5rem; }
.bienvenue-carte .bienvenue-carte__visuel{ width: 8.5rem; margin: 0; border: 6px solid #3F2617; border-radius: 4px; box-shadow: 0 10px 20px -12px rgba(46,27,16,.85); }
.bienvenue-carte__texte{ display: grid; gap: .45rem; justify-items: start; }
.bienvenue-carte .bienvenue-carte__badge{ display: inline-block; font-size: .85rem; font-weight: 500; letter-spacing: .1em; color: #fff;
  background: linear-gradient(180deg, #A06A42, #6E4529); padding: .4rem .9rem; border-radius: 99px; box-shadow: 0 6px 14px -8px rgba(46,27,16,.8); }
.bienvenue-carte b{ font-size: 1.45rem; line-height: 1.2; }
.bienvenue-carte__desc{ margin: 0; font-size: .95rem; color: var(--encre-douce); }
@media (max-width: 30rem){
  .bienvenue-carte{ grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .bienvenue-carte__texte{ justify-items: center; }
}

/* Alternance : pierre / aplat beige du menu / pierre / beige / pierre / beige. */
.sophie, main, footer{ background: #F3EEE6 !important; }
.inscription{ background: url("../images/pierre/mur-clair.jpg") 0 0 / 1200px repeat, #F0E8E2 !important; }

/* Logo HEMC by Quintessence dans le menu. */
.onglets__logo{ width: auto !important; height: 3.1rem !important; border-radius: 0 !important; display: block; }

/* Visuel d'accueil : une bande de mur ajoutée à gauche de l'image sert au fondu,
   pour un passage doux vers le mur sans toucher au titre « Manifeste ta vie ». */
@media (min-width: 64rem){
  .ouverture__affiche img{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 17%, #000 23%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.12) 5%, rgba(0,0,0,.4) 11%, rgba(0,0,0,.75) 17%, #000 23%);
  }
}

/* Fonds : pierre (haut) / beige (lives) / pierre continue (comment ça marche + cadeaux)
   / beige (inscription) / pierre (bas de page). Plus de trait entre paliers et cadeaux. */
main{ background: none !important; border-top: 0 !important; box-shadow: none !important; border-image: none !important; }
.inscription{ background: #F3EEE6 !important; }
footer{ background: none !important; }

/* Les cadeaux suspendus comme le mobile du visuel d'accueil : chaque cadre pend
   à un bras en laiton par deux fils, lui-même tenu par un fil qui monte. Rien ne bouge. */
.grille{ padding-top: 4.2rem; row-gap: 5.2rem !important; column-gap: 1.6rem !important; }
button.cadeau{ --fil: 2.1rem; overflow: visible;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 .2rem 1rem !important; }
button.cadeau:hover{ transform: none; }
button.cadeau:hover .cadeau__visuel{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 16px 26px -12px rgba(46,27,16,.9); }
/* les deux fils et le bras en laiton */
button.cadeau::before{ content: ""; position: absolute; left: 14%; right: 14%; top: calc(-1 * var(--fil)); height: var(--fil); pointer-events: none;
  background:
    linear-gradient(180deg, #F6DCA0, #C08A45 55%, #7A5226) top / 100% 5px no-repeat,
    linear-gradient(#4A3526, #4A3526) left 3px top 0 / 1px 100% no-repeat,
    linear-gradient(#4A3526, #4A3526) right 3px top 0 / 1px 100% no-repeat;
  border-radius: 3px; filter: drop-shadow(0 2px 2px rgba(46,27,16,.35)); }
/* le fil qui monte, avec la petite bague en laiton au milieu du bras */
button.cadeau::after{ content: ""; position: absolute; left: calc(50% - 4px); width: 8px; top: calc(-1 * var(--fil) - 3.6rem); height: calc(3.6rem + 7px); pointer-events: none;
  background:
    radial-gradient(circle at 50% calc(100% - 4px), #F6DCA0 0 2px, #9A6A33 2.5px 3.6px, transparent 4px),
    linear-gradient(#4A3526, #4A3526) center top / 1px calc(100% - 7px) no-repeat; }
/* chaque cadre à sa hauteur et légèrement penché, comme sur le mobile */
button.cadeau:nth-child(4n+2){ margin-top: 1.4rem; }
button.cadeau:nth-child(4n+3){ margin-top: .5rem; }
button.cadeau:nth-child(4n+4){ margin-top: 2rem; }
button.cadeau:nth-child(4n+1) .cadeau__visuel{ transform: rotate(-1.4deg); }
button.cadeau:nth-child(4n+2) .cadeau__visuel{ transform: rotate(1.1deg); }
button.cadeau:nth-child(4n+3) .cadeau__visuel{ transform: rotate(-.7deg); }
button.cadeau:nth-child(4n+4) .cadeau__visuel{ transform: rotate(1.6deg); }
button.cadeau:nth-child(4n+1)::before{ transform: rotate(-1.4deg); transform-origin: 50% 100%; }
button.cadeau:nth-child(4n+2)::before{ transform: rotate(1.1deg); transform-origin: 50% 100%; }
button.cadeau:nth-child(4n+4)::before{ transform: rotate(1.6deg); transform-origin: 50% 100%; }
/* le texte sous le cadre, comme un petit cartel de musée */
button.cadeau .cadeau__format, button.cadeau .cadeau__titre, button.cadeau .cadeau__texte, button.cadeau .cadeau__quand{ padding-left: .3rem; padding-right: .3rem; }
/* la pastille de choix reste sur le cadre */
button.cadeau .cadeau__rang{ top: .9rem; right: .9rem; background: rgba(253,250,246,.92); }
/* cadeau choisi : un halo autour du cadre */
button.cadeau[aria-checked="true"] .cadeau__visuel{ box-shadow: 0 0 0 3px #C08A45, 0 14px 26px -12px rgba(46,27,16,.9); }
/* cadeau déjà pris : cadre grisé, pas de carte pointillée */
button.cadeau.cadeau--pris{ background: transparent !important; border: 0 !important; }
@media (max-width: 40rem){
  button.cadeau:nth-child(n){ margin-top: 0; }
  .grille{ row-gap: 5.6rem !important; }
}

/* Lives : visuels plus grands (on reconnaît Sophie et Bruno), et l'étiquette
   « Prochain live » avec son compte à rebours posée sur le visuel. */
.lives__ligne{ grid-template-columns: minmax(13rem, 1.25fr) auto minmax(0, 1fr) !important; gap: .3rem 1.2rem; }
.lives__visuel{ position: relative; }
.lives__etat{ position: absolute !important; top: .6rem !important; left: .6rem !important; right: auto !important; }
.lives__etat--prochain{ display: grid; gap: .1rem; text-transform: none; letter-spacing: 0; line-height: 1.2;
  padding: .45rem .8rem !important; border-radius: 10px !important; background: linear-gradient(180deg, #A06A42, #6E4529) !important; color: #fff !important;
  box-shadow: 0 6px 14px -6px rgba(46,27,16,.8); }
.lives__etat--prochain b{ font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.lives__etat--prochain span{ font-size: .88rem; font-variant-numeric: tabular-nums; }
@media (max-width: 36rem){
  .lives__ligne{ grid-template-columns: auto minmax(0, 1fr) !important; }
}
.l-affiche{ display: none !important; }

/* ===== Page de vente de l'HEMC : même charte pierre et bois que la page cadeaux ===== */
.vente{ --nuit: #2E1B10; --nuit-2: #3A2416; }
/* sections sombres : bois foncé veiné */
.vente .v-nuit, .vente .v-vip{
  background: linear-gradient(180deg, rgba(58,36,22,.55), rgba(30,17,9,.75)), var(--bois-grain), #3A2416 !important; }
.vente .v-nuit--liste{ background: linear-gradient(180deg, rgba(74,45,28,.5), rgba(36,21,12,.7)), var(--bois-grain), #4A2D1C !important; }
.vente .v-ouverture{ background: #2E1B10; }
.vente .v-ouverture::after{ background: linear-gradient(180deg, rgba(46,27,16,.1) 0%, rgba(46,27,16,.35) 45%, rgba(46,27,16,.95) 100%); }
/* sections claires : pierre et aplat beige du menu, en alternance */
.vente .v-temoignages, .vente .v-duo, .vente .v-maintenant, .vente .v-bonus{ background: #F3EEE6 !important; }
.vente .v-parcours, .vente .v-pour, .vente .v-lancement, .vente .v-tarifs{ background: none !important; }
/* un trait de bois entre chaque bloc, comme les cadres photo */
.vente body > section, .vente > section, .vente > footer, .vente > .v-temoignages{
  border-top: 6px solid transparent; border-image: linear-gradient(180deg, #7A5034 0%, #4A2D1C 45%, #2E1B10 100%) 1; }
/* photos encadrées de bois */
.vente .v-duo__photo{ border: 8px solid var(--bois-fonce); box-shadow: 0 24px 40px -24px rgba(46,27,16,.9); }
/* cartes claires sur la pierre */
.vente .v-pour li, .vente .v-maintenant li, .vente .v-lancement li{ background-color: rgba(253,250,246,.88); }

/* ===== Mon compte : moins de scroll =====
   Le cadeau de bienvenue en ligne (couverture à gauche), le palier en cours en
   pleine largeur avec le partage, les paliers suivants en petites cartes côte à côte. */
.s-cadeau--bienvenue{ display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.2rem; align-items: start; }
.s-cadeau--bienvenue .s-cadeau__visuel{ grid-column: 1; grid-row: 1 / span 5; margin: 0 !important; aspect-ratio: 3 / 4; }
.s-cadeau--bienvenue .s-cadeau__visuel--couverture img{ padding: 0; object-fit: cover; }
.s-cadeau--bienvenue > :not(.s-cadeau__visuel){ grid-column: 2; }
.s-cadeau--bienvenue .s-cadeau__titre{ margin-top: .2rem; }
.s-cadeau--bienvenue .s-cadeau__texte{ font-size: .9rem; margin: .2rem 0 .6rem; }
.s-cadeau__manque p{ margin: 0 0 .4rem; font-size: .9rem; }
.s-cadeau:not(.s-cadeau--encours) .s-cadeau__manque{ padding: .6rem .8rem; }
@media (min-width: 56rem){
  .espace{ max-width: 66rem; }
  .s-entete, .s-compteur, .s-notifs{ max-width: 44rem; margin-left: auto; margin-right: auto; }
  .s-cadeaux{ grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .s-cadeau--bienvenue, .s-cadeau--encours, .s-cadeau--choisir{ grid-column: 1 / -1; }
  .s-cadeau--bienvenue{ grid-template-columns: 8.5rem minmax(0, 1fr); }
  .s-cadeau:not(.s-cadeau--bienvenue):not(.s-cadeau--encours){ padding: 1.1rem 1.2rem; }
  .s-cadeau:not(.s-cadeau--bienvenue):not(.s-cadeau--encours) .s-cadeau__titre{ font-size: 1.15rem; }
}
@media (max-width: 55.99rem){
  .s-cadeaux{ gap: .8rem; }
  .s-cadeau:not(.s-cadeau--bienvenue):not(.s-cadeau--encours){ padding: 1rem 1.1rem; }
}

/* ===== La cloche des notifications ===== */
.cloche{ position: relative; display: inline-flex; align-items: center; gap: .4rem; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--encre-douce); padding: .5rem .8rem; border-radius: 99px; }
.cloche svg{ width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cloche:hover{ background: var(--sable); color: var(--encre); }
.cloche__chiffre{ position: absolute; top: .15rem; left: 1.55rem; min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem; border-radius: 99px;
  background: #B2452E; color: #fff; font-size: .72rem; font-weight: 500; line-height: 1.25rem; text-align: center; box-shadow: 0 0 0 2px #F3EEE6; }
.cloche__mot{ display: none; }
/* téléphone : la cloche flotte en haut à droite (la barre d'onglets est en bas) */
@media (max-width: 63.99rem){
  .cloche{ position: fixed; top: max(.6rem, env(safe-area-inset-top)); right: .7rem; z-index: 60; width: 2.9rem; height: 2.9rem; padding: 0; justify-content: center;
    background: rgba(243,238,230,.96); box-shadow: 0 4px 14px -6px rgba(46,27,16,.5); }
  .cloche__chiffre{ top: -.2rem; left: auto; right: -.2rem; }
}
.cloche-panneau{ position: fixed; z-index: 70; top: 4.6rem; right: 1rem; width: min(24rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow: auto;
  background: #FDFAF6; border-radius: 16px; border: 1px solid var(--filet); box-shadow: 0 24px 50px -20px rgba(46,27,16,.55); }
@media (max-width: 63.99rem){ .cloche-panneau{ top: 4rem; right: .7rem; } }
.cloche-panneau__haut{ position: sticky; top: 0; display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; background: #FDFAF6; border-bottom: 1px solid var(--filet); }
.cloche-panneau__haut b{ font-family: var(--titre); font-weight: 400; font-size: 1.15rem; margin-right: auto; }
.cloche-panneau__tout{ border: 0; background: none; color: var(--rose-sombre); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.cloche-panneau__fermer, .cloche-panneau__retirer{ border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--encre-douce); padding: .3rem .45rem; border-radius: 8px; }
.cloche-panneau__fermer:hover, .cloche-panneau__retirer:hover{ background: var(--sable); }
.cloche-panneau ul{ list-style: none; margin: 0; padding: .3rem 0; }
.cloche-panneau li{ display: flex; align-items: flex-start; gap: .3rem; padding: .2rem .5rem .2rem 0; border-left: 3px solid transparent; }
.cloche-panneau li.nouvelle{ border-left-color: #B2452E; background: rgba(178,69,46,.05); }
.cloche-panneau li a{ flex: 1; display: grid; gap: .15rem; padding: .6rem .5rem .6rem .9rem; text-decoration: none; color: var(--encre); }
.cloche-panneau li a b{ font-weight: 500; font-size: .95rem; }
.cloche-panneau li a span{ font-size: .88rem; color: var(--encre-douce); }
.cloche-panneau li a small{ font-size: .75rem; color: var(--encre-faible, #8a7d72); }
.cloche-panneau__vide{ padding: 1.2rem 1rem !important; color: var(--encre-douce); font-size: .92rem; }
@media (max-width: 47.99rem){
  .s-cadeau--bienvenue{ grid-template-columns: 5.2rem minmax(0, 1fr); column-gap: .9rem; }
  .s-cadeau--bienvenue .s-cadeau__haut{ flex-wrap: wrap; gap: .3rem; }
  .s-cadeau--bienvenue .s-cadeau__texte{ font-size: .86rem; }
}

/* ===== Mon compte : installer l'appli, pas à pas (écrans dessinés) ===== */
.installer-guide{ max-width: 44rem; margin: 0 auto 1.2rem; background: rgba(253,250,246,.9); border-radius: 18px; padding: .2rem 1.1rem; border: 1px solid var(--filet); }
.installer-guide summary{ cursor: pointer; padding: .9rem 0; font-weight: 500; color: var(--rose-sombre); list-style: none; }
.installer-guide summary::-webkit-details-marker{ display: none; }
.installer-guide summary::after{ content: '›'; float: right; transform: rotate(90deg); transition: transform .2s; font-size: 1.3rem; line-height: 1; }
.installer-guide[open] summary::after{ transform: rotate(-90deg); }
.installer-guide summary span{ font-weight: 400; color: var(--encre-douce); font-size: .9rem; }
.ig-onglets{ display: inline-flex; gap: .3rem; background: var(--sable); border-radius: 99px; padding: .25rem; margin-bottom: 1rem; }
.ig-onglets button{ border: 0; background: none; font: inherit; padding: .45rem 1.1rem; border-radius: 99px; cursor: pointer; color: var(--encre-douce); }
.ig-onglets button[aria-selected="true"]{ background: #fff; color: var(--encre); font-weight: 500; box-shadow: 0 2px 6px -3px rgba(46,27,16,.5); }
.ig-etapes{ list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 40rem){ .ig-etapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ig-etapes p{ font-size: .86rem; margin: .6rem 0 0; line-height: 1.45; }
.ig-tel{ position: relative; aspect-ratio: 9 / 16; border: 6px solid #2a211c; border-radius: 22px; background: #fff; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 22px -14px rgba(46,27,16,.8); }
.ig-ecran{ flex: 1; position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .7rem; background: #F3EEE6; font-size: .62rem; }
.ig-logo{ width: 38%; margin: .8rem auto .4rem; }
.ig-lignes{ display: block; height: 40%; background: repeating-linear-gradient(180deg, #ddd2c6 0 5px, transparent 5px 12px); border-radius: 4px; margin: 0 .3rem; }
.ig-barre-safari, .ig-barre-chrome{ display: flex; justify-content: space-around; align-items: center; background: #f7f7f7; border-top: 1px solid #ddd; padding: .4rem .2rem; font-size: .8rem; color: #2f7bf6; }
.ig-barre-chrome{ order: -1; justify-content: space-between; border-top: 0; border-bottom: 1px solid #ddd; color: #444; font-size: .58rem; padding: .45rem .5rem; }
.ig-barre-chrome b{ font-size: 1rem; }
.ig-barre-safari svg{ width: 1.1rem; height: 1.1rem; display: block; }
.ig-ecran--menu{ background: rgba(60,50,45,.35); justify-content: flex-end; padding: .5rem; }
.ig-ligne-menu{ background: #fff; border-radius: 6px; padding: .45rem .5rem; display: flex; justify-content: space-between; color: #222; }
.ig-ecran--ajout{ background: #f2f2f2; padding: 0; }
.ig-haut{ display: flex; justify-content: space-between; padding: .5rem .6rem; background: #fff; border-bottom: 1px solid #ddd; color: #2f7bf6; }
.ig-haut--bas{ border: 0; border-top: 1px solid #ddd; margin-top: auto; }
.ig-fiche{ display: flex; align-items: center; gap: .5rem; background: #fff; margin: .6rem; padding: .5rem; border-radius: 8px; color: #222; }
.ig-fiche img{ width: 2.2rem; border-radius: 9px; }
.ig-ecran--accueil{ background: linear-gradient(160deg, #b9a48f, #6f5442); display: grid; grid-template-columns: repeat(3, 1fr); align-content: start; gap: .7rem; padding: 1rem .7rem; }
.ig-app{ aspect-ratio: 1; border-radius: 22%; background: rgba(255,255,255,.35); }
.ig-app--hemc{ background: none; display: grid; justify-items: center; gap: .15rem; aspect-ratio: auto; }
.ig-app--hemc img{ width: 100%; border-radius: 22%; }
.ig-app--hemc i{ font-style: normal; color: #fff; font-size: .55rem; }
/* l'endroit où toucher : entouré et qui pulse doucement */
.ig-cible{ position: relative; outline: 2px solid #B2452E; outline-offset: 2px; border-radius: 6px; animation: ig-pulse 1.8s ease-in-out infinite; }
@keyframes ig-pulse{ 50%{ outline-color: rgba(178,69,46,.25); outline-offset: 5px; } }
@media (prefers-reduced-motion: reduce){ .ig-cible{ animation: none; } }
.ig-note{ font-size: .78rem; margin: 0 0 1rem; }

/* ===== Les cadeaux suspendus par des cordes (comme sur les visuels des lives) =====
   Une fine baguette en bois sous « Choisissez vos cadeaux » tient le guide offert ;
   une seconde baguette tient les 5 cadeaux (3 puis 2, ceux du bas entre ceux du haut). */
:root{
  --corde-motif: repeating-linear-gradient(160deg, #6B4A2B 0 2px, #A47A4C 2px 4px, #7D5733 4px 6px);
  --baguette: linear-gradient(180deg, #9A6A42 0%, #6E4529 45%, #4A2D1C 100%);
}
.cadeaux > h2{ position: relative; padding-bottom: 1.4rem; }
.cadeaux > h2::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(48rem, 94%); height: 9px;
  border-radius: 5px; background: var(--bois-grain), var(--baguette); background-blend-mode: multiply; box-shadow: 0 4px 8px -3px rgba(46,27,16,.6); }
/* le guide offert : deux cordes droites jusqu'à la baguette */
.bienvenue-carte{ position: relative; margin-top: 3.4rem !important; overflow: visible; }
.bienvenue-carte::before, .bienvenue-carte::after{ content: ""; position: absolute; bottom: 100%; width: 5px; height: 3.5rem; border-radius: 3px;
  background: var(--corde-motif); box-shadow: 1px 1px 2px rgba(46,27,16,.35); }
.bienvenue-carte::before{ left: 16%; } .bienvenue-carte::after{ right: 16%; }

/* la baguette des 5 cadeaux */
.grille{ position: relative; display: flex !important; flex-wrap: wrap; justify-content: center; column-gap: 3rem !important; row-gap: 6rem !important;
  padding-top: 5.5rem !important; margin-top: 1.5rem; }
.grille::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 9px; border-radius: 5px;
  background: var(--bois-grain), var(--baguette); background-blend-mode: multiply; box-shadow: 0 4px 8px -3px rgba(46,27,16,.6); }
.grille > button.cadeau{ width: calc((100% - 6rem) / 3 - 2px); flex: none; margin-top: 0 !important; }
@media (max-width: 56rem){ .grille > button.cadeau{ width: calc((100% - 3rem) / 2); } }
@media (max-width: 36rem){ .grille > button.cadeau{ width: 100%; } .grille{ row-gap: 4.5rem !important; } }
/* les deux brins de corde en V depuis les coins du cadre, noués au-dessus */
button.cadeau::before{ content: ""; position: absolute; left: 12%; right: 12%; top: -40px; height: 42px; border-radius: 0; filter: drop-shadow(1px 1px 1px rgba(46,27,16,.35));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 40 L50 3 L99 40' fill='none' stroke='%237D5733' stroke-width='3.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M1 40 L50 3 L99 40' fill='none' stroke='%23B88D5C' stroke-width='1.4' stroke-dasharray='2 2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
  transform: none !important; }
/* la corde qui remonte jusqu'à la baguette, avec un petit nœud */
button.cadeau::after{ content: ""; position: absolute; left: calc(50% - 6px); width: 12px; top: auto !important; bottom: calc(100% + 36px); height: calc(var(--corde, 3rem) + 8px) !important;
  background:
    radial-gradient(circle at 50% calc(100% - 6px), #B88D5C 0 3px, #6B4A2B 3.5px 5.5px, transparent 6px),
    var(--corde-motif) center top / 5px calc(100% - 8px) no-repeat !important;
  filter: drop-shadow(1px 1px 1px rgba(46,27,16,.35)); z-index: -1; }
.grille{ z-index: 0; }

/* ===== Partages : la case de publication de Sophie ===== */
.publier{ display: grid; gap: .8rem; }
.publier__titre{ margin: 0; font-family: var(--titre); font-size: 1.2rem; }
.publier__types{ display: flex; flex-wrap: wrap; gap: .4rem; }
.publier__types button{ border: 1px solid var(--filet); background: #fff; border-radius: 99px; padding: .5rem .9rem; font: inherit; font-size: .92rem; cursor: pointer; min-height: 44px; }
.publier__types button[aria-pressed="true"]{ background: var(--rose-sombre); border-color: var(--rose-sombre); color: #fff; }
.publier textarea{ width: 100%; box-sizing: border-box; font: inherit; padding: .8rem; border: 1px solid var(--filet); border-radius: 12px; background: #fff; resize: vertical; }
.publier__media{ display: grid; gap: .6rem; }
.publier__boutons{ display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.publier__rec{ background: #B2452E !important; animation: ig-pulse 1.4s infinite; }
#pub-camera{ width: 100%; max-height: 22rem; border-radius: 12px; background: #000; transform: scaleX(-1); }
.publier__apercu{ width: 100%; max-height: 22rem; border-radius: 12px; display: block; margin-bottom: .3rem; }
audio.publier__apercu{ height: 3rem; }
.publier__etat{ margin: 0; font-size: .88rem; color: var(--encre-douce); }
.publier__etat:empty{ display: none; }
.publier__bas{ display: flex; gap: .8rem; align-items: center; justify-content: flex-end; }
.publier__bas progress{ flex: 1; height: .6rem; accent-color: var(--rose-sombre); }
.e-media{ display: block; width: 100%; border-radius: 12px; margin: .6rem 0; background: #000; }
audio.e-media{ background: none; height: 3rem; }

/* ===== Masterclass : compte à rebours à droite, Google Agenda, replays ===== */
.lives__ligne{ grid-template-columns: minmax(13rem, 1.25fr) auto minmax(0, 1fr) auto !important; }
.lives__ligne > .lives__etat--prochain{ position: static !important; grid-column: 4; grid-row: 1 / span 2; align-self: center; margin-right: .4rem; text-align: center; }
.lives__agenda, .lives__voir{ display: inline-block; margin-top: .55rem; font-size: .88rem; color: var(--rose-sombre); text-decoration: none;
  border: 1px solid var(--filet); background: #fff; border-radius: 99px; padding: .35rem .8rem; }
.lives__agenda:hover, .lives__voir:hover{ border-color: var(--rose-sombre); }
.lives__txt{ display: grid; justify-items: start; }
@media (max-width: 36rem){
  .lives__ligne{ grid-template-columns: auto minmax(0, 1fr) !important; }
  .lives__ligne > .lives__etat--prochain{ grid-column: 1 / -1; grid-row: auto; justify-self: start; margin: .2rem 0 0; }
}
.lives__visuel--replay{ background: #000 !important; }
.lives__visuel--replay iframe, .lives__visuel--replay video{ width: 100%; height: 100%; border: 0; display: block; }
.lives__visuel--replay audio{ width: 100%; margin-top: 40%; }
.replay-com{ grid-column: 1 / -1; border-top: 1px solid var(--filet); margin-top: .6rem; padding-top: .8rem; display: grid; gap: .5rem; }
.replay-com__titre{ margin: 0; font-weight: 500; font-size: .95rem; }
.replay-com .e-repondre{ margin-top: .2rem; }
.replay-ajout{ margin-top: .6rem; }
.replay-form{ grid-column: 1 / -1; display: grid; gap: .5rem; background: var(--lait); border-radius: 12px; padding: .9rem; margin-top: .6rem; }
.replay-form input[type=url]{ width: 100%; box-sizing: border-box; padding: .6rem; border: 1px solid var(--filet); border-radius: 10px; font: inherit; }
.replay-form p{ margin: 0; }
#grille > button.cadeau{ flex: 0 0 calc((100% - 6rem) / 3 - 2px); }
@media (max-width: 56rem){ #grille > button.cadeau{ flex-basis: calc((100% - 3rem) / 2 - 2px); } }
@media (max-width: 36rem){ #grille > button.cadeau{ flex-basis: 100%; } }
.ig-ecran--accueil{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .ig-app{ min-width: 0; } .ig-app--hemc img{ display: block; }

/* 1er live : même mise en page que les autres ; « Prochain live » + compte à rebours
   posé sur le rebord du cadre, en haut à droite, au-dessus du titre. */
.lives__ligne{ grid-template-columns: minmax(13rem, 1.25fr) auto minmax(0, 1fr) !important; }
.lives__ligne--prochain{ position: relative; margin-top: 1rem; }
.lives__ligne > .lives__etat--prochain{ position: absolute !important; top: 0 !important; right: 1.4rem !important; left: auto !important;
  transform: translateY(-55%); grid-column: auto; grid-row: auto; margin: 0; display: flex; align-items: baseline; gap: .5rem; padding: .4rem .9rem !important; border-radius: 99px !important; z-index: 2; }
@media (max-width: 36rem){ .lives__ligne > .lives__etat--prochain{ right: .8rem !important; flex-wrap: wrap; justify-content: center; } }

/* La bulle des inscrits monte un peu, et un fil la relie au bout du remplissage du tuyau. */
.tube{ padding-top: 1.6rem !important; }
.tube__bulle{ bottom: 86% !important; }
.tube__fil{ position: absolute; top: 14%; height: 28.6%; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, #6E4529, #A06A42); z-index: 1; pointer-events: none; }
.tube__fil::after{ content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: #E9A13C; box-shadow: 0 0 6px 2px rgba(240,170,70,.8); }

/* Sous le tube : texte plus grand, une phrase par ligne, jamais coupée au milieu sur ordinateur. */
.ligne-paliers__detail, .paliers__astuce{ max-width: none !important; text-align: center; }
.ligne-paliers__detail{ margin-top: 1.2rem !important; font-size: 1.12rem !important; line-height: 1.6; }
.ligne-paliers__detail .phrase{ display: block; font-size: 1.02rem; color: var(--encre-douce); }
.ligne-paliers__detail .phrase--forte{ font-size: 1.22rem; color: var(--encre); margin-bottom: .35rem; }
.paliers__astuce{ font-size: 1.15rem !important; line-height: 1.6; margin-top: 1.6rem !important; }
.paliers__astuce .phrase{ display: block; }
@media (min-width: 48rem){ .ligne-paliers__detail .phrase, .paliers__astuce .phrase{ white-space: nowrap; } }
.ligne-paliers__detail .phrase{ font-size: 1.1rem !important; color: var(--encre-douce) !important; } .ligne-paliers__detail .phrase--forte{ font-size: 1.25rem !important; color: var(--encre) !important; }

/* Une seule baguette, sous le titre et sa phrase : toutes les cordes y remontent.
   Le guide offert passe devant les cordes des cadeaux. */
.cadeaux > h2{ padding-bottom: 0 !important; }
.cadeaux > h2::after{ content: none !important; }
#intro-cadeaux{ position: relative; padding-bottom: 1.3rem; margin-bottom: 0; }
#intro-cadeaux::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(66rem, 100%); height: 9px;
  border-radius: 5px; background: var(--bois-grain), var(--baguette); background-blend-mode: multiply; box-shadow: 0 4px 8px -3px rgba(46,27,16,.6); z-index: 2; }
.bienvenue-carte{ z-index: 1; }
.grille::before{ content: none !important; }
.grille{ padding-top: 4.5rem !important; margin-top: 0 !important; }
.bienvenue-carte{ position: relative; z-index: 3 !important; background: #FBF7F1 !important; } #grille{ z-index: 0 !important; }
.cadeaux{ overflow-x: clip; }
@media (max-width: 36rem){
  .lives__ligne{ grid-template-columns: auto minmax(0, 1fr) !important; }
  .lives__visuel{ grid-column: 1 / -1 !important; grid-row: 1 !important; }
  .lives__cal{ grid-column: 1 !important; grid-row: 2 !important; }
  .lives__txt{ grid-column: 2 !important; grid-row: 2 !important; }
}

/* Page de vente : moins de lignes marron (plus de traits entre les blocs ni de cadre
   sur les grandes photos), les fonds alternent seuls ; photos recentrées sur Sophie. */
.vente > section, .vente > footer, .vente > .v-temoignages, .vente > header{ border-top: 0 !important; border-image: none !important; box-shadow: none !important; }
.vente .v-duo__photo{ border: 0 !important; box-shadow: none !important; }
.vente .v-duo__photo[src*="sophie-03-wide"]{ object-position: 19% 30%; }
.vente .v-duo__photo[src*="sophie-strategie-wide"]{ object-position: 82% 25%; }
.vente .v-parcours, .vente .v-pour:not(.v-bonus):not(.v-lancement), .vente .v-bonus, .vente .v-tarifs{ background: none !important; }
.vente .v-duo, .vente .v-maintenant, .vente .v-lancement, .vente .v-temoignages{ background: #F3EEE6 !important; }

/* L'effet « gravé dans la pierre » : la lettre laisse voir la pierre, seuls ses bords marquent le creux. */
.grave{ color: transparent !important; -webkit-text-fill-color: transparent; background: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(60,40,25,.5), -1px 0 0 rgba(60,40,25,.18), 1px 0 0 rgba(255,255,255,.4) !important; }
.grave--accroche{ display: block; font-size: 1.45em; line-height: 1.15; margin-bottom: .2em; }
/* « Cette école n'est pas pour tout le monde » : lisible, sans effet gravé */
.v-grand{ background: none !important; color: #4A3426 !important; -webkit-text-fill-color: #4A3426; text-shadow: none !important; }
/* « Cette école n'est pas une formation classique » : sur fond de pierre */
.vente .v-nuit--liste{ background: none !important; color: var(--encre) !important; }
.vente .v-nuit--liste h2{ color: #4A3426; text-shadow: none; }
.vente .v-nuit--liste h2 em.grave{ font-size: 1.12em; }
.vente .v-nuit--liste p, .vente .v-nuit--liste li{ color: var(--encre-douce) !important; }

/* Marrons plus clairs, pour bien ressortir à côté du noir (demande du 09/10). */
:root{ --rose-sombre: #9A6B42; --rose-profond: #B08560; }
.ouverture .chapeau__intro b, .chapeau__intro b, h1 em{ color: #A9773F !important; }
.surtitre{ color: #9A6B42; }
/* L'accroche gravée : une seule ligne sur ordinateur */
@media (min-width: 64rem){ .grave--accroche{ font-size: 1.32em; white-space: nowrap; } }

/* « Manifeste ta vie » en capitales gravées, comme sur le visuel principal. */
.sophie__titre{ text-transform: uppercase; letter-spacing: .06em; font-size: clamp(2.2rem, 5.5vw, 3.8rem) !important; line-height: 1.05; margin-bottom: .2rem !important; }
.sophie__sous-titre{ font-family: var(--titre); font-size: clamp(1.2rem, 2.4vw, 1.55rem); color: #9A6B42; margin: 0 0 1.4rem; }
.sophie .lives__titre{ font-size: 1.5rem; margin-top: 1.6rem; }
/* Pas d'arrondi à l'intérieur des cadres photo */
.lives__visuel, .lives__visuel img, .l-affiche img, .cadeau__visuel, .cadeau__visuel img, .s-cadeau__visuel, .s-cadeau__visuel img,
.bienvenue-carte__visuel, .s-cadeau__vignette, .paliers__escalier, .e-image{ border-radius: 0 !important; }
.s-connexion{ max-width: 52rem; margin: 0 auto; text-align: center; }
.s-connexion h1{ margin-bottom: 1.4rem; }
.s-connexion__choix{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); text-align: left; }
.s-connexion__choix h2{ font-size: 1.3rem; margin-top: 0; }
.grave{ -webkit-text-fill-color: rgba(125,92,64,.30) !important; color: rgba(125,92,64,.30) !important; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(60,40,25,.6), -1px 0 0 rgba(60,40,25,.22), 1px 0 0 rgba(255,255,255,.5) !important; }
.s-lien{ display: grid; gap: .6rem; margin-top: 1rem; border-top: 1px solid var(--filet); padding-top: 1rem; }
.s-lien input{ display: block; width: 100%; margin-top: .4rem; box-sizing: border-box; }
.s-lien .petit-gris:empty{ display: none; }
.grave{ -webkit-text-fill-color: #8A6A52 !important; color: #8A6A52 !important; text-shadow: 0 1px 0 rgba(255,255,255,.75), 0 -1px 0 rgba(40,25,15,.45), 1px 1px 2px rgba(255,255,255,.35) !important; }
/* Titre de la section lives : « 10 jours… » en grand, puis l'annonce, puis le texte. */
.sophie__sous-titre{ font-size: clamp(1.6rem, 3.6vw, 2.4rem) !important; line-height: 1.2; margin: .1rem 0 .5rem !important; color: #5A4636 !important; }
.sophie__annonce{ font-family: var(--titre); font-size: clamp(1.25rem, 2.4vw, 1.6rem); color: #9A6B42; margin: 0 0 1.4rem; }
.sophie .lives__titre{ display: none; }
.sophie .lives-zone{ margin-top: 1.8rem; }
/* « Vous manifestez depuis toujours. » : le plus gros possible, toujours sur une seule ligne
   (sur ordinateur, la ligne peut déborder un peu sur le mur flouté du visuel). */
.grave--accroche{ white-space: nowrap !important; font-size: calc(6.1vw - 1px) !important; position: relative; z-index: 2; }
@media (min-width: 40rem) and (max-width: 63.99rem){ .grave--accroche{ font-size: min(2.6rem, calc(5.6vw - 2px)) !important; } }
@media (min-width: 64rem){ .grave--accroche{ font-size: min(2.6rem, calc(2.15vw + 7px)) !important; } .ouverture__texte{ position: relative; z-index: 2; } }
/* Effet gravé, version 3 : l'intérieur de la lettre est en creux (plus sombre en haut,
   où l'ombre tombe, plus clair en bas), avec une arête claire sous la lettre et une
   arête sombre au-dessus, comme une lettre taillée dans la pierre. */
.grave{
  background: linear-gradient(180deg, #4E3726 0%, #6F5240 38%, #9A7C62 72%, #B79C82 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 1.5px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(40,25,15,.45)) drop-shadow(1px 0 0 rgba(255,255,255,.35));
}
/* Effet gravé, version 4 : brun uni (sans dégradé), creux plus marqué. */
.grave{
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: #846650 !important; color: #846650 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.95)) drop-shadow(0 -1.5px 0 rgba(35,20,10,.7)) drop-shadow(-1px 0 0 rgba(35,20,10,.35)) drop-shadow(1px 0 0 rgba(255,255,255,.6));
}
/* La taille exacte est ajustée par le script pour tenir sur une ligne sans être coupée. */
.grave--accroche{ display: inline-block !important; max-width: none; }

/* Les cadres se balancent très lentement autour du nœud de leur corde, comme un mobile.
   Le cadre et ses deux brins de corde bougent ensemble ; le texte reste immobile. */
button.cadeau{ --base: 0deg; --balance: 1.3deg; --duree: 9s; --decale: 0s; }
button.cadeau:nth-child(4n+1){ --base: -1.4deg; --duree: 9.5s; --decale: -2s; }
button.cadeau:nth-child(4n+2){ --base: 1.1deg; --duree: 11s; --decale: -6s; }
button.cadeau:nth-child(4n+3){ --base: -.7deg; --duree: 10s; --decale: -4s; }
button.cadeau:nth-child(4n+4){ --base: 1.6deg; --duree: 12s; --decale: -8s; }
button.cadeau .cadeau__visuel{ transform: none !important; rotate: var(--base); transform-origin: 50% -40px; }
button.cadeau::before{ rotate: var(--base); transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference){
  button.cadeau .cadeau__visuel, button.cadeau::before{ animation: balancier var(--duree) ease-in-out var(--decale) infinite alternate; }
}
@keyframes balancier{
  from{ rotate: calc(var(--base) - var(--balance)); }
  to{ rotate: calc(var(--base) + var(--balance)); }
}
.bienvenue-carte .bienvenue-carte__visuel{ transform-origin: 50% 0; }
/* Effet gravé, version 5 (demande du 09/10) : couleur pierre un peu foncée, relief doux. */
.grave{
  background: none !important;
  -webkit-text-fill-color: #BDAE9F !important; color: #BDAE9F !important;
  filter: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 -1px 0 rgba(70,48,30,.45), 0 0 1px rgba(70,48,30,.25) !important;
}
.grave{ -webkit-text-fill-color: #B4A493 !important; color: #B4A493 !important; }
/* La phrase d'accroche passe par-dessus le visuel sur ordinateur. */
@media (min-width: 64rem){
  .ouverture, .ouverture__texte, .chapeau__intro{ overflow: visible !important; }
  .ouverture__texte{ position: relative; z-index: 3 !important; }
  .grave--accroche{ position: relative; z-index: 3; }
}
.insecable{ white-space: nowrap; }
/* Balancement plus visible, irrégulier comme un mobile poussé par l'air. */
button.cadeau{ --balance: 3.2deg; }
button.cadeau:nth-child(4n+1){ --duree: 7.5s; --decale: -1s; }
button.cadeau:nth-child(4n+2){ --duree: 9s; --decale: -5s; }
button.cadeau:nth-child(4n+3){ --duree: 8.2s; --decale: -3s; }
button.cadeau:nth-child(4n+4){ --duree: 10s; --decale: -7s; }
@media (prefers-reduced-motion: no-preference){
  button.cadeau .cadeau__visuel, button.cadeau::before{ animation: mobile var(--duree) ease-in-out var(--decale) infinite !important; }
}
@keyframes mobile{
  0%  { rotate: calc(var(--base) - var(--balance)); }
  22% { rotate: calc(var(--base) + var(--balance) * .8); }
  41% { rotate: calc(var(--base) - var(--balance) * .45); }
  63% { rotate: calc(var(--base) + var(--balance)); }
  82% { rotate: calc(var(--base) - var(--balance) * .7); }
  100%{ rotate: calc(var(--base) - var(--balance)); }
}
/* Sous « Choisissez vos cadeaux » : la consigne en grand, la suite en dessous. */
#intro-cadeaux .intro__fort{ display: block; font-family: var(--titre); font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.25; color: var(--encre); }
#intro-cadeaux .intro__suite{ display: block; margin-top: .35rem; font-size: 1.05rem; color: var(--encre-douce); }
#intro-cadeaux .intro__suite{ font-size: 1.15rem !important; }
/* Le relief du gravé suit la taille du texte (sinon il disparaît sur les grands titres). */
.grave{ text-shadow: 0 .035em 0 rgba(255,255,255,.85), 0 -.03em 0 rgba(70,48,30,.45), 0 0 .02em rgba(70,48,30,.25) !important; }

/* Mobile en papier : le cadre (avec ses deux brins) glisse lentement à gauche et à droite,
   la corde reste accrochée à la baguette et s'incline pour le suivre ; en plus, le cadre
   pivote doucement autour de son nœud. Plus lent qu'avant. */
button.cadeau{ --dx: 10px; --angle-corde: 1deg; --balance: 2.6deg; --pendule: 15s; }
button.cadeau:nth-child(4n+1){ --duree: 12s; --pendule: 15s; --decale: -2s; }
button.cadeau:nth-child(4n+2){ --duree: 14s; --pendule: 17s; --decale: -7s; }
button.cadeau:nth-child(4n+3){ --duree: 13s; --pendule: 16s; --decale: -4s; }
button.cadeau:nth-child(4n+4){ --duree: 15s; --pendule: 18s; --decale: -10s; }
button.cadeau::after{ transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference){
  button.cadeau .cadeau__visuel, button.cadeau::before{
    animation: mobile var(--duree) ease-in-out var(--decale) infinite, glisse var(--pendule) ease-in-out var(--decale) infinite alternate !important; }
  button.cadeau::after{ animation: corde var(--pendule) ease-in-out var(--decale) infinite alternate !important; }
}
@keyframes glisse{ from{ translate: calc(-1 * var(--dx)) 0; } to{ translate: var(--dx) 0; } }
@keyframes corde{ from{ rotate: var(--angle-corde); } to{ rotate: calc(-1 * var(--angle-corde)); } }
.f-installer{ max-width: 52rem !important; width: min(52rem, calc(100vw - 2rem)); max-height: 92vh; overflow: auto; }
.f-installer h2{ margin-top: 0; font-size: 1.4rem; }
.fenetre{ z-index: 90 !important; }
.f-installer .fenetre__bas{ position: sticky; bottom: -1px; background: #FDFAF6; padding: .8rem 0 .2rem; margin-top: .6rem; border-top: 1px solid var(--filet); }

/* ===== Mon compte : « Mes cadeaux », une ligne par cadeau (image à gauche, texte à droite) ===== */
.espace .s-compteur{ display: none !important; }
.s-titre-cadeaux{ max-width: 46rem; margin: .4rem auto 1rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.s-cadeaux{ display: grid !important; grid-template-columns: 1fr !important; gap: 1rem !important; max-width: 46rem; margin: 0 auto; }
.s-cadeaux > .s-cadeau{ grid-column: auto !important; display: grid !important; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.3rem; align-items: start; padding: 1.1rem 1.2rem !important; }
.s-cadeaux .s-cadeau__visuel{ grid-column: 1; margin: 0 !important; aspect-ratio: 4 / 3; width: 100%; }
.s-cadeaux .s-cadeau--bienvenue .s-cadeau__visuel{ aspect-ratio: 3 / 4; }
.s-cadeaux .s-cadeau__visuel img{ width: 100%; height: 100%; object-fit: cover; padding: 0 !important; filter: none; }
.s-cadeaux .s-cadeau--verrou .s-cadeau__visuel img{ filter: grayscale(.35); }
.s-cadeau__visuel--vide{ display: grid !important; place-items: center; background: var(--pierre-grain), #EFE7DC !important; }
.s-cadeau__visuel--vide span{ font-family: var(--titre); font-size: 2.6rem; color: #A88E74; line-height: 1; }
.s-cadeau__droite{ grid-column: 2; min-width: 0; }
.s-cadeau__droite .s-cadeau__haut{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: center; margin: 0 0 .3rem; }
.s-cadeau__droite .s-cadeau__titre{ font-size: 1.2rem; margin: .1rem 0 .3rem; }
.s-cadeau__droite .s-cadeau__texte{ font-size: .92rem; margin: 0 0 .5rem; }
.s-cadeau__droite .s-cadeau__label{ margin: 0; font-size: .72rem; }
.s-cadeau__membres{ margin: 0 0 .3rem !important; font-size: .95rem; }
.s-cadeau__membres b{ font-family: var(--titre); font-weight: 400; font-size: 1.6rem; color: var(--rose-sombre); margin-right: .2rem; }
@media (max-width: 36rem){
  .s-cadeaux > .s-cadeau{ grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: .9rem; padding: .9rem !important; }
  .s-cadeau__visuel--vide span{ font-size: 1.8rem; }
}
.s-cadeaux .s-cadeau .barre-partage__boutons{ flex-wrap: wrap !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }

/* ===== Parallaxe : photo de fond qui défile plus lentement ===== */
.parallaxe{ position: relative; overflow: hidden; }
.parallaxe__fond{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.parallaxe__fond img{ position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; will-change: transform; }

/* À propos (page Cadeaux) : Sophie à droite sur la photo, le texte à gauche sur un voile clair */
.apropos{ min-height: 40rem; display: flex; align-items: center; padding: clamp(3rem, 7vw, 5rem) var(--marge); }
.apropos .parallaxe__fond img{ object-position: 72% 30%; }
.apropos .parallaxe__fond::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(243,238,230,.92) 0%, rgba(243,238,230,.75) 38%, rgba(243,238,230,0) 62%); }
.apropos__carte{ position: relative; z-index: 1; max-width: 34rem; margin-left: max(0px, calc((100% - 70rem) / 2)); }
.apropos__sur{ font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; color: #9A6B42; margin: 0; }
.apropos__titre{ font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 1rem; line-height: 1; font-style: italic; color: #5A4636; }
.apropos__accroche{ font-family: var(--titre); font-size: 1.3rem; line-height: 1.45; color: var(--encre); }
.apropos__carte p{ color: var(--encre); }
.apropos__signature{ font-family: var(--titre); font-style: italic; font-size: 1.6rem; color: #9A6B42 !important; margin-top: 1.2rem; }
@media (max-width: 52rem){
  .apropos{ display: block; min-height: 0; padding: 0; }
  .apropos .parallaxe__fond{ position: relative; height: 68vw; }
  .apropos .parallaxe__fond::after{ background: linear-gradient(180deg, rgba(243,238,230,0) 70%, rgba(243,238,230,1) 100%); }
  .apropos .parallaxe__fond img{ object-position: 62% 30%; }
  .apropos__carte{ margin: 0; max-width: none; padding: 1.2rem var(--marge) 3rem; background: #F3EEE6; }
}

/* Page de vente : une bande photo en parallaxe, et les nouvelles photos de Sophie */
.bande-parallaxe{ height: clamp(18rem, 45vw, 34rem); }
.bande-parallaxe .parallaxe__fond img{ object-position: 50% 40%; }
.vente .v-duo__photo[src*="vente-portable"]{ object-position: 50% 25% !important; }
.vente .v-duo__photo[src*="vente-profil"]{ object-position: 60% 30% !important; }
.vente .v-ouverture__photo{ object-position: 50% 22% !important; }
.apropos__titre, .apropos__sur{ text-align: left !important; }
@media (min-width: 48rem){ body.avec-onglets .cadeaux .rappel{ position: static !important; bottom: auto !important; top: auto !important; margin: 1.8rem auto 0 !important; gap: 1.2rem; } }
@media (max-width: 47.99rem){ body .cadeaux .rappel{ position: sticky !important; } }
/* À propos : la photo n'occupe que la moitié droite (Sophie à droite, jamais sous le texte). */
@media (min-width: 52.01rem){
  .apropos{ background: #F3EEE6; }
  .apropos .parallaxe__fond{ left: 46%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
  .apropos .parallaxe__fond::after{ content: none; }
  .apropos .parallaxe__fond img{ object-position: 62% 25%; }
  .apropos__carte{ max-width: min(34rem, 44%); }
}
/* Couverture de Partages : la photo de Sophie allongée, visible en entier. */
.g-couverture img{ height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
.g-en-ligne{ margin: .2rem 0 0; font-size: .9rem; color: #3E8E5A; } .g-en-ligne:empty{ display: none; }
.lien-profil--sortie{ margin-left: .4rem; color: var(--encre-douce) !important; } .s-entete__nom{ flex-wrap: wrap; }
/* À propos, photo nette : la photo est utilisée à sa taille d'origine (mur de droite coupé),
   Sophie à droite, ses jambes dans l'espace entre le texte et elle. */
@media (min-width: 52.01rem){
  .apropos .parallaxe__fond{ left: 49%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%); mask-image: linear-gradient(90deg, transparent 0, #000 5%); }
  .apropos .parallaxe__fond img{ top: -8% !important; height: 116% !important; object-position: 100% 80% !important; }
}
@media (max-width: 52rem){ .apropos .parallaxe__fond img{ object-position: 70% 80% !important; } }
@media (max-width: 52rem){ .apropos .parallaxe__fond img{ object-position: 70% 45% !important; } .apropos .parallaxe__fond{ height: 80vw !important; } }
@media (min-width: 52.01rem){ .apropos .parallaxe__fond img{ object-position: 20% 80% !important; } }
@media (min-width: 52.01rem){ .apropos .parallaxe__fond img{ top: -3% !important; height: 106% !important; object-position: 50% 85% !important; } }
.publier label.choix{ display: flex !important; flex-direction: row !important; align-items: center; gap: .55rem; font-size: .95rem; color: var(--encre-douce); cursor: pointer; justify-content: flex-start; }
.publier label.choix input[type=checkbox]{ width: 1.1rem !important; height: 1.1rem !important; margin: 0 !important; flex: none; accent-color: var(--rose-sombre); }
.replay-form label.choix{ display: flex; align-items: center; gap: .55rem; } .replay-form label.choix input{ width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--rose-sombre); }
/* Gravé, version 6 : moins de blanc. Ombre fine en haut à gauche (le bord du creux), lumière très légère en bas à droite. */
.grave{ filter: none !important; text-shadow: -.012em -.022em 0 rgba(70,48,30,.5), .01em .02em 0 rgba(255,255,255,.45) !important; }
.apropos__sur{ font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important; letter-spacing: .25em !important; color: #8A6A52 !important; }
.apropos__titre{ font-size: clamp(1.8rem, 3.4vw, 2.5rem) !important; margin: .1rem 0 1rem !important; }
/* À propos : marge pour la parallaxe (la photo entière reste visible, sur fond presque identique). */
@media (min-width: 52.01rem){ .apropos .parallaxe__fond{ background: #F2EFEB; } .apropos .parallaxe__fond img{ top: -18% !important; height: 136% !important; object-fit: contain !important; object-position: 50% 50% !important; } }

/* Page de vente : « Comment cela fonctionne » devient un bloc à part (demande de
   Florence, 09/10/2026). Il suivait « C'est un basculement énergétique », lui aussi
   sur pierre : l'alternance pierre / beige est décalée à partir de là. */
.vente .v-parcours, .vente .v-pour:not(.v-bonus):not(.v-lancement), .vente .v-bonus{ background: #F3EEE6 !important; }
.vente .v-duo--inverse, .vente .v-maintenant, .vente .v-lancement{ background: none !important; }

/* Fini le doré (Florence, 09/10/2026) : cartes en pierre avec un contour bois
   (leurs blocs sont sur l'aplat beige), étape de lancement en cours cerclée de bois. */
.vente .cartes-or li, .vente .carte-or{
  background: var(--pierre-grain), var(--pierre-veines), #EFE7DC !important;
  border: 1.5px solid #8A5E3C; border-radius: 6px; box-shadow: none;
}
.vente .lancement__etape--actuelle{ border-color: #8A5E3C; }
/* « Cette école n'est pas pour tout le monde » : sur deux lignes, plus petit. */
.vente .v-grand--doux{ font-size: clamp(1.4rem, 3vw, 2.2rem) !important; }

/* « MANIFESTE TA VIE » : simplement en marron (Florence, 09/10/2026). Le creux
   ne se voyait pas sur le fond beige uni, il faut de la pierre derrière. */
.sophie .sophie__titre{ background: none !important; -webkit-text-fill-color: #4A3426 !important; color: #4A3426 !important; text-shadow: none !important; filter: none !important; }
/* Une phrase par ligne, un peu aérée (Florence, 09/10/2026 : « on lit pas ce gros pavé »). */
.sophie__phrases{ line-height: 1.75; }
.sophie__phrases span{ display: block; margin-bottom: .6em; }

/* Partages réservés aux inscrits : la carte d'invitation (Florence, 09/10/2026). */
.e-reserve{ text-align: center; padding: 2rem 1.6rem !important; }
.e-reserve p{ margin: 0 0 .8rem; line-height: 1.6; }
.e-reserve__titre{ font-family: var(--titre); font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: #4A3426; }
.e-reserve__boutons{ display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.2rem !important; }

/* « À propos » sur mobile : photo entière (la tête n'est plus coupée), sans parallaxe
   (Florence, 09/10/2026). */
@media (max-width: 52rem){
  .apropos .parallaxe__fond{ position: relative !important; height: auto !important; inset: auto !important; }
  .apropos .parallaxe__fond img{ position: static !important; display: block; width: 100% !important; height: auto !important;
    top: auto !important; object-fit: contain !important; transform: none !important; will-change: auto; }
}

/* Fenêtre « Choisir / Changer de cadeau » : une liste simple (Florence, 09/10/2026). */
.choix-palier{ display: grid; gap: .5rem; }
.choix-ligne{ all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1.6rem 4.2rem 1fr; gap: .8rem; align-items: center;
  width: 100%; padding: .7rem .8rem; border: 1px solid #D9CBBB; border-radius: 10px; background: #FBF8F4; text-align: left; }
.choix-ligne:hover, .choix-ligne:focus-visible{ border-color: #8A5E3C; }
.choix-ligne[aria-checked="true"]{ border: 1.5px solid #8A5E3C; background: #F3EAE0; }
.choix-ligne:disabled{ cursor: default; }
.choix-ligne__case{ width: 1.3rem; height: 1.3rem; border: 1.5px solid #8A5E3C; border-radius: 4px; display: grid; place-items: center;
  font-size: .9rem; line-height: 1; color: #fff; background: #fff; }
.choix-ligne[aria-checked="true"] .choix-ligne__case{ background: #8A5E3C; }
.choix-ligne__image{ width: 4.2rem; height: 4.2rem; border-radius: 6px; overflow: hidden; background: #EFE7DC; display: grid; place-items: center; font-size: 1.6rem; }
.choix-ligne__image img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.choix-ligne__texte{ display: grid; gap: .2rem; font-size: .9rem; line-height: 1.45; color: #6B5848; }
.choix-ligne__texte b{ font-family: var(--titre); font-weight: 400; font-size: 1.05rem; color: #3A2A1E; }
.choix-ligne--actuel .choix-ligne__texte b::after{ content: " · ton choix actuel"; font-family: var(--corps, inherit); font-size: .8rem; color: #8A5E3C; }

/* Commentaires sous un partage : zone limitée qui défile (ouverte sur les plus
   récents) et réponses aux commentaires décalées, comme sur Facebook (09/10/2026). */
.e-reponses{ max-height: 26rem; overflow-y: auto; overscroll-behavior: auto; padding-right: .3rem; scrollbar-width: thin; }
.e-fil-com{ margin-bottom: .2rem; }
.e-reponse--sous{ margin-left: 2.6rem; }
.e-reponse--sous .avatar--petit{ width: 1.7rem; height: 1.7rem; font-size: .75rem; }
.e-repondre--sous{ margin: .3rem 0 .6rem 2.6rem; }
@media (max-width: 40rem){ .e-reponses{ max-height: 20rem; } .e-reponse--sous, .e-repondre--sous{ margin-left: 1.6rem; } }

/* Mon compte sur mobile : la photo du cadeau au-dessus du texte (Florence, 09/10/2026). */
@media (max-width: 40rem){
  .s-cadeaux > .s-cadeau{ grid-template-columns: minmax(0, 1fr) !important; row-gap: .8rem; }
  .s-cadeaux .s-cadeau__visuel{ grid-column: 1 !important; aspect-ratio: 16 / 10 !important; }
  .s-cadeaux .s-cadeau--bienvenue .s-cadeau__visuel{ aspect-ratio: 16 / 10 !important; }
  .s-cadeaux .s-cadeau--bienvenue .s-cadeau__visuel img{ object-position: 50% 25%; }
  .s-cadeau__droite{ grid-column: 1 !important; }
}

/* Poubelle de Sophie en haut à droite de ses partages (Florence, 09/10/2026). */
.e-post{ position: relative; }
.e-poubelle{ position: absolute; top: .8rem; right: .8rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid #D9CBBB;
  background: #FBF8F4; font-size: 1.05rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.e-poubelle:hover, .e-poubelle:focus-visible{ background: #F6E3DC; border-color: #B5523B; }
.e-post--epingle .e-poubelle{ top: 2.4rem; }

/* Commentaires : le nom remonte, à la hauteur de la photo de profil (Florence, 09/10/2026). */
.e-reponse{ align-items: flex-start; }
.e-reponse .e-bulle{ padding: 0 .8rem .5rem; background: transparent; }
.e-reponse .e-bulle b{ display: block; line-height: 2.2rem; margin: 0; }
.e-reponse .e-bulle .e-texte{ margin: 0; }
.e-reponse--sous .e-bulle b{ line-height: 1.7rem; }
.e-reponse--vue{ animation: e-vue 2.4s ease-out; border-radius: 12px; }
@keyframes e-vue{ 0%, 40%{ background: #F3E3CF; } 100%{ background: transparent; } }

/* Recadrer la photo de profil (09/10/2026). */
.recadre{ position: fixed; inset: 0; z-index: 2000; background: rgba(40,28,20,.55); display: grid; place-items: center; padding: 1rem; }
.recadre__carte{ background: #fff; border-radius: 22px; padding: 1.4rem 1.4rem 1rem; width: min(100%, 22rem); text-align: center; }
.recadre__carte h2{ margin: 0 0 .3rem; font-size: 1.5rem; }
.recadre__scene{ position: relative; width: 280px; height: 280px; margin: .8rem auto; overflow: hidden; border-radius: 12px; background: #EFE7DC; touch-action: none; cursor: grab; }
.recadre__scene:active{ cursor: grabbing; }
.recadre__scene img{ position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.recadre__masque{ position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 200px rgba(255,255,255,.6); outline: 2px solid #fff; pointer-events: none; }
.recadre__zoom{ display: flex; align-items: center; gap: .6rem; justify-content: center; color: #6B5848; font-size: 1.2rem; }
.recadre__zoom input{ width: 70%; accent-color: #8A5E3C; }
.recadre .fenetre__bas{ justify-content: flex-end; }

/* Page Cadeaux pour une personne connectée : rien au-dessus de L'Expérience Abondance,
   et plus d'invitation à réserver sa place (Florence, 09/10/2026). */
html.connecte .ouverture, html.connecte .sophie, html.connecte .apropos, html.connecte .pas-connecte{ display: none !important; }

/* « Et en plus, L'Expérience Abondance » plus visible : c'est presque le cœur de
   l'expérience (Florence, 09/10/2026). */
.ouverture .chapeau__plus{ font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important; line-height: 1.5; margin-top: 1.4rem !important; }
.ouverture .chapeau__plus b{ display: block; font-family: var(--titre); font-weight: 400; font-size: 1.45em; line-height: 1.2; color: #4A3426; margin-bottom: .25rem; }

/* Bouton « Mon compte » / « Me connecter » toujours visible (Florence, 09/10/2026).
   Ordinateur : à droite de la barre du haut (qui reste collée en haut).
   Téléphone : flottant en haut à droite ; connecté, une pastille ronde à côté de la cloche. */
.compte-lien{ display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--encre); font-size: .9rem;
  border: 1px solid #A27B5A; border-radius: 99px; padding: .45rem 1rem; background: #FBF8F4; white-space: nowrap; }
.compte-lien svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.compte-lien:hover, .compte-lien[aria-current="page"]{ background: var(--sable); }
@media (min-width: 64rem){
  .onglets .compte-lien{ margin-left: .8rem; padding: .45rem 1rem; color: var(--encre); }
}
@media (max-width: 63.99rem){
  .compte-lien{ position: fixed; z-index: 60; top: max(.6rem, env(safe-area-inset-top)); right: .7rem; height: 2.9rem; padding: 0 .95rem;
    background: rgba(243,238,230,.96); border-color: #C9B39C; box-shadow: 0 4px 14px -6px rgba(46,27,16,.5); font-size: .85rem; }
  .compte-lien--connecte{ width: 2.9rem; padding: 0; justify-content: center; }
  .compte-lien--connecte span{ display: none; }
  .compte-lien--connecte svg{ width: 21px; height: 21px; }
  /* la cloche se range à gauche de la pastille du compte */
  .cloche{ right: 4.1rem !important; }
}
.ouverture .chapeau__plus .chapeau__plus-titre{ white-space: nowrap; width: max-content; max-width: none; }

/* Boutons de partage sur une seule ligne (Florence, 09/10/2026) : plus compacts, et si
   l'écran est vraiment trop étroit, la ligne glisse sur le côté au lieu de passer à la ligne. */
.barre-partage__boutons{ flex-wrap: nowrap !important; justify-content: safe center; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.barre-partage__boutons::-webkit-scrollbar{ display: none; }
.barre-partage__boutons .bp{ flex: 0 0 auto; padding: .45rem .7rem; font-size: .8rem; white-space: nowrap; }
.ouverture .barre-partage{ max-width: none; }
@media (min-width: 64rem){ .ouverture .barre-partage__boutons{ justify-content: flex-start; } }
@media (min-width: 64rem){ .ouverture .barre-partage__boutons{ overflow: visible; width: max-content; position: relative; z-index: 2; } }
@media (max-width: 40rem){ .barre-partage__boutons .bp{ padding: .4rem .6rem; font-size: .78rem; } .barre-partage__boutons{ justify-content: flex-start; } }
/* Téléphone avec le bouton « Partager » (il ouvre le menu du téléphone : Messenger, SMS,
   mail...) : seulement Partager, WhatsApp et Copier le lien, pour tenir sur une ligne. */
@media (max-width: 40rem){
  /* Le bouton « Partager » du téléphone propose déjà toutes les applis : il reste seul (09/10/2026). */
  .barre-partage__boutons--natif .bp:not(.bp--natif){ display: none; }
  .barre-partage__boutons--natif .bp--natif{ padding: .6rem 1.6rem; font-size: .95rem; }
  .barre-partage__boutons--natif{ justify-content: center; }
}

/* « À propos de moi », maintenant tout en bas : le même trait de bois que les autres blocs (09/10/2026). */
section.apropos{ border-top: 6px solid transparent; border-image: linear-gradient(180deg, #7A5034 0%, #4A2D1C 45%, #2E1B10 100%) 1;
  box-shadow: inset 0 8px 14px -12px rgba(46,27,16,.5); }

/* Téléphone : le bouton du compte (et la cloche) flottent en haut à droite. Sur les pages
   qui commencent par du texte, on descend le contenu pour qu'ils ne cachent rien (09/10/2026). */
@media (max-width: 63.99rem){
  body.avec-onglets:not([data-page="cadeaux"]):not([data-page="hemc"]):not([data-page="partages"]):not([data-page="echanges"]){ padding-top: calc(3.9rem + env(safe-area-inset-top)); }
}

/* Témoignages : introduction plus compacte, en 4 paragraphes, pour voir les témoignages
   sans trop défiler ; sous-titre centré (Florence, 09/10/2026). */
.page-simple > .chapeau{ text-align: center; }
.page-simple > .chapeau{ margin-left: auto !important; margin-right: auto !important; max-width: 46rem; }

/* Témoignages vidéos (format portrait) et lecteurs des podcasts (09/10/2026). */
.t-videos{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 52rem; margin: 1.2rem auto 0; }
.t-video{ width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #2E1B10; border-radius: 12px; display: block; }
@media (max-width: 40rem){ .t-videos{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } }
.t-audio{ width: 100%; margin: .4rem 0 .6rem; }

/* « J'aime » sur les commentaires (Florence, 09/10/2026). */
.e-reponse .e-bulle{ position: relative; }
.e-bulle__coeurs{ position: absolute; right: -.4rem; bottom: -.7rem; background: #fff; border: 1px solid var(--filet); border-radius: 99px;
  padding: .05rem .4rem; font-size: .72rem; line-height: 1.4; box-shadow: 0 2px 6px -3px rgba(46,27,16,.35); white-space: nowrap; }
.e-mini--aime{ color: #B2452E !important; font-weight: 500; }

/* Page de vente : « Les portes de l'HEMC ouvrent le 27 octobre » plus gros (Florence, 09/10/2026). */
.vente .v-date{ font-family: var(--titre) !important; font-size: clamp(1.35rem, 2.6vw, 2rem) !important; letter-spacing: .02em !important; text-transform: none !important; line-height: 1.25; }
.vente .v-date b{ font-weight: 500; }
/* Mobile : l'étiquette « Prochain live » (sur 2 lignes) ne recouvre plus le titre au-dessus (09/10/2026). */
@media (max-width: 36rem){ .lives__ligne--prochain{ margin-top: 2.6rem !important; } }

/* Mobile : arrivé en haut ou en bas des commentaires, le doigt fait défiler la page (Florence, 09/10/2026). */
.e-reponses{ overscroll-behavior-y: auto !important; -webkit-overflow-scrolling: touch; }
/* Mobile, pages Masterclass et Témoignages : le titre remonte juste sous le bouton du compte (09/10/2026). */
@media (max-width: 63.99rem){
  body[data-page="live"] main.page-simple, body[data-page="temoignages"] main.page-simple{ padding-top: .4rem !important; }
}
/* Cloche : bouton marron « Activer les notifications » (Florence, 09/10/2026). */
.cloche-panneau__activer{ padding: .9rem 1rem; border-bottom: 1px solid var(--filet); text-align: center; background: #FBF6EF; }
.cloche-panneau__activer .bouton{ margin: 0 0 .4rem; }
.cloche-panneau__activer p{ margin: 0; font-size: .8rem; line-height: 1.45; }
/* Tuto Android : « Installer » plutôt que « Créer un raccourci » (Florence, 09/10/2026). */
.ig-choix{ display: grid; gap: .35rem; margin-top: .6rem; font-size: .62rem; text-align: center; }
.ig-choix b, .ig-choix span{ display: block; padding: .3rem .4rem; border-radius: 6px; background: #fff; }
.ig-choix .ig-barre{ text-decoration: line-through; color: #A0907F; opacity: .8; }

/* Bloc « personnes déjà inscrites » déplacé au-dessus de la jauge (personne connectée). */
.compteur--paliers{ max-width: 34rem; margin: 2.2rem auto 1.4rem !important; }

/* Mêmes styles pour le bloc déplacé au-dessus de la jauge (09/10/2026). */
.paliers .compteur--paliers{
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .7rem;
  max-width: 24rem; margin: 1rem auto 0; padding: .7rem 1rem .75rem; text-align: left; border-radius: 14px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(162,123,90,.35); box-shadow: 0 10px 24px -18px rgba(63,38,23,.6);
}
.paliers .compteur--paliers .compteur__nombre{ font-size: 2.2rem; color: var(--bois); }
.paliers .compteur--paliers .compteur__legende{ margin: 0; font-size: .95rem; }
.paliers .compteur--paliers .jauge{ grid-column: 1 / -1; height: 8px; margin-top: .45rem; }
.paliers .compteur--paliers .compteur__palier{ grid-column: 1 / -1; font-size: .85rem; margin-top: .45rem; line-height: 1.45; }
.paliers .compteur--paliers .compteur__nombre, .paliers .compteur--paliers .compteur__legende{ margin: 0; }
.paliers .compteur--paliers{ max-width: 30rem !important; }
/* Bouton en bas de « À propos de moi » (09/10/2026). */
.apropos__action{ margin: 1.6rem 0 0 !important; }
.apropos__action .bouton{ white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }

/* Notifications lues / non lues (Florence, 09/10/2026) : une lue devient grisée. */
.cloche-panneau li.lue{ opacity: .5; background: transparent !important; }
.cloche-panneau li.lue b{ font-weight: 400; }
.cloche-panneau__marquer{ display: block; margin: -.2rem 0 .5rem 1rem; padding: .15rem 0; border: 0; background: none; font: inherit; font-size: .78rem;
  color: var(--rose-sombre); text-decoration: underline; cursor: pointer; }
.cloche-panneau__lu{ border: 0; background: none; color: var(--rose-sombre); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.cloche-panneau li{ flex-wrap: wrap; }
.cloche-panneau li .cloche-panneau__marquer{ flex-basis: 100%; order: 3; text-align: left; }
.barre-partage--sous-compteur{ margin: -.6rem auto 1.6rem !important; }

/* Personne non connectée : une phrase par ligne sous « L'Expérience Abondance » (Florence, 09/10/2026). */
html:not(.connecte) .paliers__intro .paliers__phrase { display: block; }
html:not(.connecte) .paliers__intro .paliers__phrase + .paliers__phrase { margin-top: .5em; }

/* Tuto iPhone : vraies captures de Safari (Florence, 12/10/2026). */
.ig-tel--photo{ background: #f4efe8; }
.ig-tel--photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.ig-astuce{ display: inline-block; margin-top: .3rem; font-size: .85em; color: var(--gris, #7a6e66); }
@media (min-width: 40.01rem){ .ig-etapes[data-os="iphone"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* iPhone, lien ouvert dans Safari alors que l'appli est installée (12/10/2026). */
.rappel-appli{ position: fixed; left: 50%; bottom: calc(5.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  width: min(30rem, calc(100% - 2rem)); display: flex; gap: .6rem; align-items: flex-start; padding: .8rem .9rem; border-radius: 14px;
  background: #fffaf3; border: 1px solid var(--bois, #6b4a33); box-shadow: 0 12px 28px -14px rgba(46,27,16,.7); font-size: .92rem; line-height: 1.4; }
.rappel-appli p{ margin: 0; flex: 1; }
.rappel-appli button{ border: 0; background: none; font-size: 1rem; cursor: pointer; padding: .1rem .3rem; color: inherit; }
/* Sur les vraies captures : le même repère rouge foncé clignotant que sur les dessins (12/10/2026). */
.ig-cible--photo{ position: absolute; display: block; border-radius: 10px; pointer-events: none; }
/* Tuto : dernière étape, activer les notifications (12/10/2026). */
.ig-ecran--notifs{ align-items: center; gap: .6rem; padding-top: 1rem; }
.ig-n-titre{ font-family: var(--titre, serif); font-size: .8rem; color: #3b2a1f; }
.ig-n-bouton{ background: #6b4a33; color: #fff; border-radius: 999px; padding: .35rem .55rem; font-weight: 500; text-align: center; }
.ig-n-alerte{ margin-top: auto; width: 100%; background: #fff; border-radius: 10px; padding: .5rem .5rem .3rem; text-align: center; color: #222; box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
.ig-n-choix{ display: flex; justify-content: space-around; margin-top: .4rem; border-top: 1px solid #ddd; padding-top: .3rem; color: #2f7bf6; }
.ig-n-choix i{ font-style: normal; }
.ig-etapes[data-os="android"]{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 40rem){ .ig-etapes[data-os="android"]{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40.01rem){ .ig-etapes[data-os="iphone"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Cloche : « Gérer mes notifications » (12/10/2026). */
.cloche-reglages{ border-top: 1px solid rgba(107,74,51,.18); padding: .6rem .9rem .8rem; }
.cloche-reglages__lien{ background: none; border: 0; padding: 0; color: var(--bois, #6b4a33); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cloche-reglages__boite{ margin-top: .6rem; display: grid; gap: .45rem; }
.cloche-reglages__titre{ margin: 0; font-weight: 500; }
.cloche-reglages__case{ display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.cloche-reglages__case input{ width: 1.15rem; height: 1.15rem; accent-color: var(--bois, #6b4a33); flex: none; }
.cloche-reglages .petit-gris{ margin: 0; }
.rappel-appli__icone{ width: 2.6rem; height: 2.6rem; border-radius: 10px; flex: none; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* Mot de passe (12/10/2026). */
.voir-mdp{ display: flex !important; flex-direction: row !important; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 400; cursor: pointer; }
.voir-mdp input{ width: 1.05rem !important; height: 1.05rem; margin: 0 !important; accent-color: var(--bois, #6b4a33); flex: none; }
.s-magique{ margin-top: 1rem; border-top: 1px solid rgba(107,74,51,.18); padding-top: .8rem; }
.s-magique summary{ cursor: pointer; color: var(--bois, #6b4a33); text-decoration: underline; text-underline-offset: 3px; }
.s-magique[open] summary{ margin-bottom: .6rem; }
.s-motdepasse summary{ cursor: pointer; font-weight: 500; }
.s-motdepasse form{ margin-top: .6rem; }

/* --- Nouveaux visuels des cadeaux (12/10) : format 16/9 en entier, sans couper « CADEAU 0X » ;
   dans les vignettes carrées, on cadre sur l'objet (à droite de l'image). --- */
.cadeau__visuel{ aspect-ratio: 16 / 9; }
.choix-palier .cadeau__visuel{ aspect-ratio: 1; }
.choix-palier .cadeau__visuel img, .s-cadeau__vignette{ object-position: 68% 60%; }
/* À propos (12/10) : la photo de Sophie occupe toute la hauteur du bloc, sans bande vide en haut ni en bas. */
@media (min-width: 52.01rem){ .apropos .parallaxe__fond img{ top: 0 !important; height: 100% !important; transform: none !important; } }
/* Liens avec ancre (#apropos…) : le bloc arrive juste sous la barre du haut, pas caché derrière (12/10). */
@media (min-width: 48rem){ #apropos{ scroll-margin-top: 4.5rem; } }
/* Tuto Android (13/10) : 3 étapes par ligne sur ordinateur, comme iPhone, pour des captures plus grandes. */
@media (min-width: 40.01rem){ .ig-etapes[data-os="android"]{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Page de vente : frise des bonus (13/10) : une bande en 3 couleurs (Allure + Souveraine /
   Souveraine / sans bonus), sans flèche, les dates de début de chaque palier dedans, et sous
   chaque palier sa phrase (« Du 27 au 29 octobre inclus… »). Échelle du temps : 3 + 3 + 2 jours. --- */
.frise-bonus{ max-width: 46rem; margin: 2.4rem auto 0; }
.frise-bonus__bande{ position: relative; height: 3.6rem; display: flex; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 22px -16px rgba(51,39,31,.7); }
.frise-bonus__bande i:nth-of-type(1){ flex: 3; background: linear-gradient(90deg, #6E4A30, #8A5E3C); }
.frise-bonus__bande i:nth-of-type(2){ flex: 3; background: linear-gradient(90deg, #A8834F, #C2A06C); }
.frise-bonus__bande i:nth-of-type(3){ flex: 2; background: #E2D8CB; }
.frise-bonus__date{ position: absolute; top: 0; bottom: 0; left: var(--x); padding-left: .7rem; display: flex; flex-direction: column; justify-content: center;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); line-height: 1.2; white-space: nowrap; }
.frise-bonus__date b{ font-family: var(--titre); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #fff; }
.frise-bonus__date--trait{ border-left: 2px solid #33271F; }
.frise-bonus__date--fin{ left: auto; right: 0; padding: 0 .7rem 0 0; text-align: right; color: var(--encre-douce); }
.frise-bonus__date--fin b{ color: var(--encre); }
.frise-bonus__paliers{ list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: 3fr 3fr 2fr; gap: .8rem; }
.vente .v-pour .frise-bonus li{ background: none; border: 0; box-shadow: none; padding: 0 .2rem 0 .7rem; margin: 0; border-radius: 0; }
.frise-bonus__paliers li{ text-align: left; font-size: .9rem; line-height: 1.45; color: var(--encre-douce); border-left: 2px solid #8A5E3C !important; }
.frise-bonus__paliers li:nth-child(2){ border-left-color: #B8945C !important; }
.frise-bonus__paliers li b{ display: block; color: var(--encre); font-weight: 500; margin-bottom: .15rem; }
.frise-bonus__paliers li strong{ color: #8A5E3C; font-weight: 500; }
.frise-bonus__palier--sans{ border-left-color: #D9CFC2 !important; }
.frise-bonus__note{ margin: 1rem 0 0; font-size: .82rem; color: var(--encre-douce); text-align: center; }
@media (max-width: 40rem){
  .frise-bonus__date{ padding-left: .45rem; font-size: .6rem; }
  .frise-bonus__date b{ font-size: .9rem; }
  .frise-bonus__date--fin{ padding: 0 .45rem 0 0; }
  .frise-bonus__date--fin b{ font-size: .9rem; }
  .frise-bonus__paliers{ grid-template-columns: 1fr; gap: .9rem; }
}
.carte-or__jusqua{ display: inline-block; margin-top: .5rem; font-size: .85em; font-weight: 500; color: #8A5E3C; }
/* Prix de l'HEMC (13/10) : 3 500 €, ou 3 333 € en une fois (remise immédiate de 167 €). */
.tarifs-prix{ margin: 1rem 0 0; }
.tarifs-prix b{ font-weight: 500; }
.tarifs__unique span small{ display: block; font-size: .8em; opacity: .85; margin-top: .1rem; }
.tarifs__unique s{ font-weight: 400; font-size: .85em; opacity: .65; margin-right: .35rem; }
.tarifs__unique b{ text-align: right; white-space: nowrap; } .tarifs__unique s{ display: block; margin: 0; }
.frise-bonus__date--clair b{ color: var(--encre); }
@media (min-width: 40.01rem){ .frise-bonus__paliers{ gap: 0; } .vente .v-pour .frise-bonus__paliers li{ padding-right: .9rem; } }
/* Frise (13/10, suite) : plus de dates dans la bande, des traits au début, à la fin et aux deux changements de palier. */
.frise-bonus__ligne{ position: relative; padding: .7rem 0; }
.frise-bonus__trait{ position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #33271F; border-radius: 2px; }
.frise-bonus__trait:first-of-type{ margin-left: 0; } .frise-bonus__trait:last-of-type{ margin-left: -3px; }
.frise-bonus__ligne .frise-bonus__bande{ height: 2.4rem; }
.frise-bonus__paliers{ margin-top: .5rem; }

/* --- Page de vente : cartes des bonus Allure et Souveraine (13/10), mises en avant --- */
.bonus-cartes{ list-style: none; margin: 2rem auto 0; padding: 0; max-width: 50rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.4rem; }
.vente .v-pour .bonus-cartes li.bonus-carte{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.4rem 1.6rem 1.8rem; background: linear-gradient(180deg, #FFFDF9, #F6EEE2) !important; border: 1px solid #C9A46E; border-radius: 4px;
  box-shadow: 0 24px 40px -28px rgba(51,39,31,.55), inset 0 0 0 6px #FFFDF9, inset 0 0 0 7px rgba(201,164,110,.55); }
.bonus-carte__num{ position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: .35rem 1rem; border-radius: 99px;
  background: #8A5E3C; color: #fff; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.vente .bonus-carte__nom{ margin: .2rem 0 .4rem; font-family: var(--titre); font-weight: 400; font-style: italic; font-size: clamp(2.2rem, 4.5vw, 2.9rem); line-height: 1.05; color: #5E3B26; text-transform: none; letter-spacing: 0; }
.bonus-carte__theme{ margin: 0; font-size: 1rem; color: var(--encre-douce); }
.bonus-carte__theme::after{ content: ""; display: block; width: 3rem; height: 1px; margin: 1.1rem auto 1rem; background: #C9A46E; }
.bonus-carte__valeur{ margin: 0; font-family: var(--titre); font-size: 1.7rem; color: var(--encre); line-height: 1.1; }
.bonus-carte__valeur span{ display: block; margin-bottom: .25rem; font-family: inherit; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--encre-douce); font-family: var(--texte); }
.bonus-carte__jusqua{ margin: 1.2rem 0 0; padding: .45rem 1rem; border-radius: 99px; background: rgba(138,94,60,.1); color: #8A5E3C; font-size: .85rem; font-weight: 500; }
.bonus-total{ max-width: 34rem; margin: 1.8rem auto 0; padding: 1.6rem 1.6rem 1.7rem; text-align: center; border-radius: 6px;
  background: linear-gradient(135deg, #3B2A1F, #5E3B26 55%, #3B2A1F); color: rgba(255,255,255,.85); box-shadow: 0 24px 40px -26px rgba(51,39,31,.8); }
.bonus-total__avant{ display: block; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: #E2C79B; }
.bonus-total__montant{ display: block; margin: .3rem 0 .4rem; font-family: var(--titre); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.4rem); line-height: 1; color: #fff; }
.bonus-total__apres{ display: block; font-size: .95rem; }
/* Frise (13/10, suite) : au-dessus de la bande, les 4 dates clés, reliées aux traits. */
.frise-bonus__jalons{ list-style: none; position: relative; container-type: inline-size; height: 5.4rem; margin: 0; padding: 0; }
.vente .v-pour .frise-bonus__jalons li{ position: absolute; bottom: 0; left: var(--x); width: 18cqw; padding: 0 0 .5rem .6rem; border: 0; border-left: 3px solid #33271F; border-radius: 0;
  background: none; box-shadow: none; text-align: left; font-size: .8rem; line-height: 1.35; color: var(--encre-douce); }
.frise-bonus__jalons li:first-child{ margin-left: 0; } 
.vente .v-pour .frise-bonus__jalons li.frise-bonus__jalon--gauche{ left: auto; right: calc(100% - var(--x)); border-left: 0; border-right: 3px solid #33271F; padding: 0 .6rem .5rem 0; text-align: right; }
.vente .v-pour .frise-bonus__jalons li:nth-child(2){ margin-left: -1.5px; } .vente .v-pour .frise-bonus__jalons li:nth-child(3){ margin-right: -1.5px; }
.frise-bonus__jalons b{ display: block; font-family: var(--titre); font-weight: 400; font-size: 1.02rem; color: var(--encre); margin-bottom: .1rem; }
@media (max-width: 40rem){
  .frise-bonus__jalons{ height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin-bottom: .6rem; }
  .vente .v-pour .frise-bonus__jalons li, .vente .v-pour .frise-bonus__jalons li.frise-bonus__jalon--gauche{ position: static; width: auto; margin: 0;
    border: 0; border-left: 3px solid #33271F; border-right: 0; padding: 0 0 0 .55rem; text-align: left; font-size: .76rem; }
  .frise-bonus__jalons b{ font-size: .92rem; }
}
@media (min-width: 40.01rem){
  .vente .v-pour .frise-bonus__jalons li:nth-child(1){ width: 30cqw; } .vente .v-pour .frise-bonus__jalons li:nth-child(4){ width: 23cqw; }
}
.frise-bonus__jalons b{ font-family: var(--texte); font-weight: 500; font-size: .92rem; }
/* Frise (13/10, suite) : les dates centrées au-dessus de leur trait (ordinateur), et l'offre de chaque palier en plus gros. */
@media (min-width: 58rem){
  .vente .v-pour .frise-bonus__jalons li, .vente .v-pour .frise-bonus__jalons li.frise-bonus__jalon--gauche,
  .vente .v-pour .frise-bonus__jalons li:nth-child(1), .vente .v-pour .frise-bonus__jalons li:nth-child(4){
    left: var(--x); right: auto; width: 22cqw; margin: 0; transform: translateX(-50%); border: 0; padding: 0 0 .8rem; text-align: center; }
  .frise-bonus__jalons li::after{ content: ""; position: absolute; left: 50%; bottom: 0; width: 3px; height: .8rem; margin-left: -1.5px; background: #33271F; }
  .vente .v-pour .frise-bonus__jalons li:nth-child(1){ margin-left: 1.5px; } .vente .v-pour .frise-bonus__jalons li:nth-child(4){ margin-left: -1.5px; }
}
.frise-bonus__quoi{ display: block; margin: .15rem 0 .1rem; font-family: var(--titre); font-size: 1.2rem; line-height: 1.25; color: var(--encre); }
.frise-bonus__paliers li strong{ font-size: 1.02rem; }

/* 13/10/2026 : « Des partages et des enseignements de Sophie, des cadeaux, et 5 lives… » plus grand (Florence). */
.ouverture .chapeau__lives > span{ font-size: 1.14em; line-height: 1.45; color: var(--encre); }
.ouverture .chapeau__lives > span span{ font-size: 1em; }
@media (max-width: 63.99rem){ .ouverture .chapeau__lives > span{ font-size: 1.06em; } }

/* 13/10/2026 : formulaire prénom + email seulement, avec l'explication des cadeaux. */
.inscription__explique{ background: var(--sable); border-radius: 14px; padding: .9rem 1.1rem; font-size: .95rem; line-height: 1.5; margin: 0 0 1.2rem; }
.inscription__explique p{ margin: 0 0 .45rem; }
.inscription__explique p:last-child{ margin-bottom: 0; }
#inscription{ scroll-margin-top: 3.2rem; }
@media (min-width: 48rem){ #inscription{ scroll-margin-top: 4.5rem; } }
.cadeaux .cadeau{ cursor: pointer; }

/* 13/10/2026 : sur téléphone, « Me connecter / Mon compte » devient le dernier onglet de la
   barre du bas, tout à droite (Florence). La cloche reste seule en haut à droite. */
@media (max-width: 63.99rem){
  .onglets .compte-lien{ position: static; width: auto; height: auto; display: grid; justify-items: center; gap: .15rem;
    padding: .25rem 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: .64rem; letter-spacing: .01em; color: var(--encre-faible); }
  .onglets .compte-lien span{ display: inline; }
  .onglets .compte-lien svg{ width: 22px; height: 22px; stroke-width: 1.5; }
  .onglets .compte-lien[aria-current="page"]{ color: var(--rose-sombre); font-weight: 500; background: none; }
  .cloche{ right: .7rem !important; }
}

/* 13/10/2026 : pages de publicité (manifeste-ta-vie.html, rejoindre-hemc.html) : pas de menu,
   pas de bouton compte ni de cloche (Florence). */
body[data-sans-menu] .onglets, body[data-sans-menu] .compte-lien, body[data-sans-menu] .cloche{ display: none !important; }
body[data-sans-menu].avec-onglets{ padding-bottom: 0; }

/* 13/10/2026 : bandeau de consentement du pixel Meta. Au-dessus de la barre d'onglets sur téléphone. */
.consentement{ position: fixed; z-index: 80; left: .7rem; right: .7rem; bottom: calc(4.8rem + env(safe-area-inset-bottom)); max-width: 34rem; margin: 0 auto;
  background: #FDFAF6; color: var(--encre); border: 1px solid var(--filet); border-radius: 14px; padding: .8rem 1rem;
  box-shadow: 0 18px 40px -18px rgba(46,27,16,.55); font-size: .84rem; line-height: 1.45; }
.consentement p{ margin: 0 0 .6rem; }
.consentement a{ color: var(--rose-sombre); }
.consentement__boutons{ display: flex; gap: .6rem; justify-content: flex-end; }
.consentement__boutons .bouton{ margin: 0; min-width: 7rem; }
body[data-sans-menu] .consentement{ bottom: calc(.8rem + env(safe-area-inset-bottom)); }
@media (min-width: 64rem){ .consentement{ bottom: 1rem; right: 1rem; left: auto; margin: 0; } }

/* 13/10/2026 : page de confirmation d'inscription (merci.html). */
.merci-page{ max-width: 40rem; text-align: center; }
.merci-page .merci__coeur{ font-size: 2rem; color: var(--or, #B8945C); margin: 0; }
.merci-page__etapes{ text-align: left; margin-top: 1.5rem; }
.merci-page__etapes ol{ margin: 0 0 1.2rem; padding-left: 1.3rem; line-height: 1.55; }
.merci-page__etapes li{ margin-bottom: .6rem; }
.merci-page__etapes h2{ font-size: 1.2rem; margin: 1.2rem 0 .4rem; text-align: center; }
.merci-page__etapes h2:first-child{ margin-top: 0; }
.merci-page__etapes p{ margin: 0 0 .6rem; }

/* Incitation à choisir son cadeau (Florence, 13/10/2026) : pastille sur « Mon compte » et
   bandeau en haut de la page Cadeaux, tant qu'un cadeau est à choisir (js/appli.js). */
.compte-lien{ position: relative; }
.compte-lien--pastille::after{ content: ""; position: absolute; top: .25rem; right: .35rem; width: .62rem; height: .62rem;
  border-radius: 50%; background: #C0392B; box-shadow: 0 0 0 2px #fff; }
.rappel-choix{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .7rem 4rem .7rem 1rem; background: #4A2D1C; color: #fff; text-decoration: none; font-size: .95rem; text-align: center; }
.rappel-choix b{ background: #fff; color: #4A2D1C; border-radius: 99px; padding: .3rem .9rem; font-size: .88rem; }
.rappel-choix:hover b{ background: var(--sable, #F5EBE1); }

/* Teaser vidéo dans le bloc « Manifeste ta vie » (Florence, 15/10/2026) : au-dessus du texte sur mobile,
   à gauche du texte sur ordi. */
.sophie__video{ margin: 0 auto; width: 100%; max-width: 20rem; position: relative; }
.sophie__video video{ display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px;
  background: #3a2a1f; box-shadow: 0 14px 34px rgba(74,52,38,.22); object-fit: cover; }
@media (min-width: 56rem){
  .sophie{ grid-template-columns: minmax(0, 18rem) minmax(0, 46rem) !important; align-items: start !important; }
  .sophie__video{ max-width: none; position: sticky; top: 1.5rem; }
}
/* Sur mobile, le teaser prend toute la largeur de l'écran, sans marges ni coins arrondis (Florence, 15/10/2026). */
@media (max-width: 55.99rem){
  .sophie__video{ max-width: none; width: auto; margin: calc(-1 * clamp(2.5rem, 6vw, 4.5rem)) calc(-1 * var(--marge)) 0; }
  .sophie__video video{ border-radius: 0; box-shadow: none; }
}
/* Bouton « Activer le son » du teaser, quand le navigateur a refusé le son au démarrage automatique. */
.sophie__son{ position: absolute; left: 50%; bottom: 4.2rem; transform: translateX(-50%); z-index: 2;
  border: 0; border-radius: 99px; padding: .7rem 1.3rem; background: rgba(74,45,28,.88); color: #fff;
  font: inherit; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; }
.sophie__son[hidden]{ display: none; }
/* Sur ordi : la vidéo a la hauteur du texte à sa droite (titre jusqu'à « Dix jours... », calculée par
   js/hemc.js) et le même cadre marron que les autres visuels (Florence, 15/10/2026). */
@media (min-width: 56rem){
  .sophie{ grid-template-columns: auto minmax(0, 46rem) !important; }
  .sophie__video{ position: relative; top: 0; width: auto; }
  .sophie__video video{ width: auto; height: var(--haut-teaser, 34rem); border-radius: 4px;
    border: 7px solid #3F2617; outline: 1px solid rgba(255,255,255,.25); outline-offset: -8px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 10px 20px -12px rgba(46,27,16,.85); }
}
/* En plein écran, la vidéo verticale reste entière (bandes sur les côtés), sans être recadrée en paysage
   ni garder le cadre marron (Florence, 15/10/2026). */
.sophie__video video:fullscreen{ object-fit: contain !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #000 !important; width: 100% !important; height: 100% !important; }
.sophie__video video:-webkit-full-screen{ object-fit: contain !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #000 !important; width: 100% !important; height: 100% !important; }

/* --- Espace affiliées (Florence, 16/10/2026) : affiliation.html --------- */
.affil{ max-width: 44rem; }
.affil h2{ font-size: clamp(1.4rem, 1.5vw + 1rem, 1.8rem); margin-top: 2rem; }
.affil h3{ font-family: var(--titre); font-weight: 400; font-size: 1.15rem; margin: 0 0 .4rem; }
.affil__form{ max-width: 34rem !important; margin-top: 1.5rem !important; }
.affil__deux{ display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px){ .affil__deux{ grid-template-columns: 1fr; } }
.affil__option{ color: var(--encre-faible); font-size: .82rem; }
.affil__choix{ border: 1px solid var(--filet); border-radius: 12px; padding: .8rem 1rem; margin: 0; display: grid; gap: .5rem; }
.affil__choix legend{ font-size: .9rem; color: var(--encre-douce); padding: 0 .3rem; }
.affil__radio{ display: flex; align-items: flex-start; gap: .6rem; font-size: .92rem; color: var(--encre); cursor: pointer; }
.affil__radio input{ width: auto; min-height: 0; margin: .2rem 0 0; accent-color: var(--rose-sombre); flex: none; }
.affil__conditions{ background: var(--sable); border-radius: 14px; padding: .9rem 1rem; font-size: .9rem; display: grid; gap: .6rem; }
.affil__conditions p, .affil__conditions ul{ margin: 0; }
.affil__conditions ul{ padding-left: 1.2rem; display: grid; gap: .25rem; }
.affil__bloc{ margin-top: 1.4rem; }
.affil__bloc > h2:first-child{ margin-top: 0; }
.affil__aide{ text-align: center; color: var(--encre-faible); font-size: .88rem; margin: -.3rem 0 1rem; }
.affil__lien, .affil__texte{ margin-bottom: 1rem; }
.affil__copie{ display: flex; gap: .6rem; align-items: center; margin-top: .8rem; }
.affil__copie input{ flex: 1; min-width: 0; font-size: .88rem; }
.affil__copie .bouton{ margin-top: 0; flex: none; }
.affil__corps{ white-space: pre-line; margin-bottom: .6rem !important; }
.affil__visuels{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.affil__visuel{ display: grid; gap: .3rem; text-decoration: none; color: var(--encre-douce); font-size: .85rem; text-align: center; }
.affil__visuel img{ width: 100%; border-radius: 12px; border: 1px solid var(--filet); background: #fff; }
.affil .carte-simple p + p{ margin-top: .6rem; }
.affil .carte-simple a{ color: var(--rose-sombre); }
.affil__corps{ overflow-wrap: anywhere; }
.affil .carte-simple h2{ font-size: 1.25rem; margin-top: 0; }

/* Programme d'affiliation, version complète (Florence, 16/10/2026) */
.affil__intro{ max-width: 36rem; margin: 0 auto; text-align: center; }
.affil__intro p{ margin: 0 0 .7rem; color: var(--encre-douce); }
.affil__etapes{ display: grid; gap: .7rem; padding-left: 1.4rem; margin: 0; }
.affil__etapes a, .affil__faq a, .affil__accepte a, .affil__pied a, .affil-conditions a{ color: var(--rose-sombre); }
.affil__faq{ display: grid; gap: .6rem; }
.affil__faq details{ background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: .9rem 1.1rem; }
.affil__faq summary{ cursor: pointer; font-weight: 500; color: var(--encre); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.affil__faq summary::-webkit-details-marker{ display: none; }
.affil__faq summary::after{ content: "+"; color: var(--rose-sombre); font-size: 1.3rem; line-height: 1; }
.affil__faq details[open] summary::after{ content: "−"; }
.affil__faq details p, .affil__faq details ul{ margin: .7rem 0 0; font-size: .93rem; color: var(--encre-douce); }
.affil__faq details ul{ padding-left: 1.2rem; }
.affil select{ font: 400 1rem var(--texte); color: var(--encre); padding: .85rem 1rem; border: 1px solid var(--filet); border-radius: 12px; background: var(--lait); min-height: 48px; width: 100%; }
.affil__pro{ display: grid; gap: 1rem; background: var(--lait); border-radius: 14px; padding: 1rem; }
.affil__pro[hidden], #bloc-numero-tva[hidden]{ display: none; }
.affil__accepte{ font-size: .9rem; }
.affil__envoye{ max-width: 30rem; margin: 0 auto; text-align: center; }
.affil__envoye p + p{ margin-top: .6rem; }
.affil__pied{ margin-top: 2.5rem; }
.lien-retour{ font-size: .88rem; color: var(--rose-sombre); }
.affil__article{ margin-top: 1rem; }
.affil__article h3{ font-size: 1.05rem; margin: 1rem 0 .3rem; }
.affil__article ul{ margin: .5rem 0; padding-left: 1.2rem; font-size: .93rem; color: var(--encre-douce); display: grid; gap: .25rem; }
.affil__quand{ font-size: .82rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--rose-sombre) !important; margin-bottom: .4rem !important; }

/* Onglets de l'espace */
.affil__onglets{ display: flex; gap: .3rem; justify-content: center; margin: 1.2rem 0 1.4rem; background: #fff; border: 1px solid var(--filet); border-radius: 999px; padding: .3rem; }
.affil__onglets button{ flex: 1; font: 500 .92rem var(--texte); color: var(--encre-douce); background: none; border: 0; border-radius: 999px; padding: .65rem .5rem; cursor: pointer; min-height: 44px; }
.affil__onglets button[aria-selected="true"]{ background: var(--rose-sombre); color: #fff; }

/* La frise des dates clés, de haut en bas */
.afrise{ list-style: none; margin: 0; padding: 0 0 0 1.6rem; position: relative; }
.afrise::before{ content: ""; position: absolute; left: .45rem; top: .4rem; bottom: .4rem; width: 2px; background: var(--filet); }
.afrise__etape{ position: relative; background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
.afrise__etape::before{ content: ""; position: absolute; left: -1.5rem; top: 1.15rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--lait); border: 2px solid var(--or); }
.afrise__etape--passee{ opacity: .55; }
.afrise__etape--passee::before{ background: var(--or); }
.afrise__etape--maintenant{ border-color: var(--rose-sombre); box-shadow: 0 12px 30px -20px rgba(94,59,38,.6); }
.afrise__etape--maintenant::before{ background: var(--rose-sombre); border-color: var(--rose-sombre); box-shadow: 0 0 0 4px rgba(138,90,56,.18); }
.afrise__date{ margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rose-sombre); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.afrise__badge{ background: var(--rose-sombre); color: #fff; border-radius: 999px; padding: .1rem .6rem; font-size: .7rem; letter-spacing: .04em; }
.afrise__etape h3{ font-family: var(--titre); font-weight: 400; font-size: 1.12rem; margin: 0 0 .4rem; }
.afrise__etape > p{ margin: 0 0 .5rem; font-size: .93rem; color: var(--encre-douce); }
.afrise__sous-titre{ font-size: .78rem !important; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-faible) !important; margin: .6rem 0 .2rem !important; }
.afrise__idees{ margin: 0 0 .6rem; padding-left: 1.1rem; font-size: .92rem; color: var(--encre); display: grid; gap: .25rem; }
.afrise__etape .bouton{ white-space: normal; text-align: center; }

/* Ressources */
.affil__visuel{ background: #fff; border: 1px solid var(--filet); border-radius: 14px; padding: .7rem; align-content: start; }
.affil__visuel video{ width: 100%; border-radius: 10px; background: #000; max-height: 360px; }
.affil__visuel b{ font-weight: 500; color: var(--encre); font-size: .9rem; }
.affil__visuel span{ font-size: .78rem; color: var(--encre-faible); }
.affil__visuel .bouton{ margin-top: .3rem; text-decoration: none; }

/* Visuels de la page d'inscription affiliés (Florence, 16/10/2026) */
.affil__hero{ margin: 0 auto 1.6rem; max-width: 44rem; }
.affil__hero img{ display: block; width: 100%; height: clamp(220px, 45vw, 360px); object-fit: cover; object-position: 20% 60%; border-radius: 22px; }
.affil__apercu{ display: grid; grid-template-columns: 1fr 1.6fr; gap: .8rem; align-items: stretch; max-width: 34rem; margin: 0 auto; }
.affil__apercu > img{ width: 100%; height: 100%; object-fit: cover; border-radius: 16px; border: 1px solid var(--filet); }
.affil__apercu > div{ display: grid; gap: .8rem; align-content: center; }
.affil__apercu > div img{ width: 100%; border-radius: 14px; border: 1px solid var(--filet); }
.affil__inscription{ display: grid; gap: 1.2rem; }
.affil__photo-form{ margin: 0 auto; width: 9rem; }
.affil__photo-form img{ display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 15%; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 14px 30px -18px rgba(94,59,38,.6); }
@media (min-width: 52rem){
  .affil__inscription{ grid-template-columns: 15rem 1fr; align-items: start; max-width: 52rem; margin-left: auto; margin-right: auto; }
  .affil__photo-form{ width: 100%; position: sticky; top: 1.5rem; }
  .affil__photo-form img{ aspect-ratio: 2 / 3; border-radius: 20px; object-position: 50% 30%; }
  .affil__inscription .affil__envoye{ grid-column: 2; }
}
/* Hauteur auto : sinon la hauteur écrite dans la balise (ex. 1600) étire l'image. */
.affil__apercu img, .affil__photo-form img{ height: auto; }
.affil__apercu > img{ height: 0; min-height: 100%; }
.affil__accueil{ margin: .4rem 0 1rem; }
.affil__accueil p + p{ margin-top: .6rem; }
.affil__signature{ font-style: italic; }
.affil__liste{ margin: .5rem 0 .6rem; padding-left: 1.2rem; font-size: .93rem; color: var(--encre-douce); display: grid; gap: .25rem; }
.affil__onglets button{ font-size: .86rem; padding: .6rem .3rem; }

/* Introduction de la page affiliés remise en page (Florence, 16/10/2026) */
.affil .affil__intro{ max-width: none; text-align: left; display: grid; gap: 1.5rem; align-items: center; margin: 0 0 1rem; }
.affil__intro-texte{ display: grid; gap: .9rem; }
.affil__intro-texte p{ margin: 0; color: var(--encre-douce); font-size: 1rem; line-height: 1.65; }
.affil__intro-texte b{ color: var(--encre); font-weight: 500; }
.affil__question{ font-family: var(--titre); font-size: clamp(1.35rem, 1.2vw + 1.05rem, 1.75rem) !important; line-height: 1.3 !important; color: var(--encre) !important; }
.affil__souffle{ border-left: 3px solid var(--or); padding: .2rem 0 .2rem 1rem; font-style: italic; }
.affil__souffle b{ font-style: normal; }
.affil__dates{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1.1rem 1.2rem; text-align: center; box-shadow: 0 14px 34px -26px rgba(94,59,38,.55); }
.affil__dates p{ margin: 0; }
.affil__dates-titre{ font-size: .75rem !important; text-transform: uppercase; letter-spacing: .14em; color: var(--rose-sombre) !important; }
.affil__dates-quand{ font-family: var(--titre); font-size: 1.45rem !important; color: var(--encre) !important; margin: .2rem 0 .35rem !important; }
.affil__cta{ text-align: center; margin-top: .3rem !important; }
.affil__intro-photo{ margin: 0; display: none; }
.affil__intro-photo img{ display: block; width: 100%; height: auto; border-radius: 22px; }
.affil__hero img{ object-position: 50% 45%; }
@media (min-width: 46rem){
  .affil .affil__intro{ grid-template-columns: 1.35fr 1fr; }
  .affil__intro-photo{ display: block; position: sticky; top: 1.5rem; }
}

/* Pages affiliés : texte plus gros et page plus large (Florence, 16/10/2026) */
.page-simple.affil{ max-width: 72rem; }
.affil h1{ font-size: clamp(2.2rem, 3.4vw + 1rem, 3.6rem); }
.affil h2{ font-size: clamp(1.6rem, 1.6vw + 1.1rem, 2.2rem); }
.affil .carte-simple h2{ font-size: clamp(1.4rem, 1vw + 1.1rem, 1.8rem); }
.affil h3, .affil__article h3{ font-size: 1.3rem; }
.affil .carte-simple p, .affil__intro-texte p, .affil__faq details p, .affil__faq details ul,
.affil__etapes, .affil__article ul, .affil__liste, .afrise__etape > p, .afrise__idees, .affil__conditions{ font-size: 1.12rem !important; line-height: 1.7; }
.affil__question{ font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.3rem) !important; }
.affil__dates-quand{ font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2rem) !important; }
.affil__dates-titre{ font-size: .85rem !important; }
.affil__faq summary{ font-size: 1.15rem; }
.affil__faq details{ padding: 1.1rem 1.4rem; }
.affil .carte-simple{ padding: clamp(1.3rem, 2.5vw, 2rem); }
.affil__aide, .affil .chapeau{ font-size: 1.05rem !important; }
.affil label, .affil__radio{ font-size: 1.02rem; }
.affil input, .affil select{ font-size: 1.05rem; }
.affil__form{ max-width: 44rem !important; }
.affil__apercu{ max-width: 52rem; }
.affil__hero{ max-width: none; }
.affil__hero img{ height: clamp(240px, 38vw, 480px); }
.affil__onglets{ max-width: 46rem; margin-left: auto; margin-right: auto; }
.affil__onglets button{ font-size: 1rem; }
.afrise{ max-width: 56rem; margin: 0 auto; }
.afrise__etape h3{ font-size: 1.4rem; }
.afrise__date{ font-size: .9rem; }
@media (min-width: 52rem){
  .affil__inscription{ grid-template-columns: 18rem 1fr; max-width: 66rem; }
}
.affil__intro-texte p.affil__question{ font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.3rem) !important; line-height: 1.3; }
.affil__intro-texte .affil__dates p.affil__dates-quand{ font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2rem) !important; }
.affil__intro-texte .affil__dates p.affil__dates-titre{ font-size: .85rem !important; }

/* Encadré « Le lancement, c'est maintenant » (Masterclass Manifeste ta vie), page affiliés (Florence, 16/10/2026) */
.affil__lancement{ background: #fff; border: 1px solid var(--filet); border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px -28px rgba(94,59,38,.6); display: grid; align-self: start; }
.affil__lancement > img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.affil__lancement-texte{ padding: 1.3rem 1.4rem .4rem; text-align: center; display: grid; gap: .5rem; }
.affil__lancement-texte p{ margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--encre-douce); }
.affil__lancement-texte p.affil__dates-titre{ font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rose-sombre); }
.affil__lancement-texte p.affil__lancement-titre{ font-family: var(--titre); font-size: clamp(1.5rem, 1vw + 1.2rem, 1.9rem); line-height: 1.25; color: var(--encre); }
.affil__lancement .affil__dates{ margin: 1rem 1.2rem 1.3rem; background: var(--lait); box-shadow: none; }
.affil__lancement .affil__dates p{ margin: 0; color: var(--encre-douce); font-size: 1.05rem; }
.affil__lancement .affil__dates p.affil__dates-titre{ font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rose-sombre); }
.affil__lancement .affil__dates p.affil__dates-quand{ font-family: var(--titre); font-size: clamp(1.4rem, 1vw + 1.1rem, 1.8rem); color: var(--encre); margin: .2rem 0 .35rem; }
@media (min-width: 46rem){ .affil__lancement{ position: sticky; top: 1.5rem; } }
.affil .affil__intro{ align-items: start; }

/* Visuels du compte à rebours J-7 à J-1 (Florence, 16/10/2026) */
.affil__decompte{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 1fr); gap: .7rem; overflow-x: auto; padding: .2rem .1rem 1rem; margin: 0 auto 1.2rem; max-width: 66rem; scroll-snap-type: x mandatory; }
.affil__decompte img{ width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--filet); scroll-snap-align: start; }
.afrise__visuel{ display: inline-flex; align-items: center; gap: .8rem; margin: .2rem 0 .7rem; color: var(--rose-sombre); font-size: .95rem; text-decoration: underline; }
.afrise__visuel img{ width: 4.5rem; height: auto; border-radius: 8px; border: 1px solid var(--filet); }
.affil__apercu-equipe{ background: #fff4d6; border: 1px solid #e6c97a; border-radius: 12px; padding: .7rem 1rem; text-align: center; font-size: .95rem; }

/* Page affiliés simplifiée : gains en chiffres (Florence, 16/10/2026) */
.affil__jalons{ list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .7rem; }
.affil__jalons li{ background: var(--lait); border-radius: 14px; padding: .8rem 1rem; display: grid; gap: .15rem; }
.affil__jalons b{ font-weight: 500; color: var(--encre); font-size: 1.05rem; }
.affil__jalons span{ font-family: var(--titre); font-size: 1.3rem; color: var(--rose-sombre); }
.affil__lancement-texte p.affil__petit, .affil .affil__petit{ font-size: .95rem !important; color: var(--encre-faible); }
.affil__lancement-texte{ padding-bottom: 1.3rem; }
.affil__gains{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: 1.2rem; }
.affil__gain{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1.3rem 1rem; text-align: center; }
.affil__gain p{ margin: 0; color: var(--encre-douce); font-size: 1.02rem; }
.affil__gain p.affil__gain-mode{ font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rose-sombre); }
.affil__gain p.affil__gain-montant{ font-family: var(--titre); font-size: clamp(2rem, 2vw + 1.4rem, 2.7rem); color: var(--encre); margin: .3rem 0 .2rem; }
.affil__gain small{ font-size: .45em; color: var(--encre-faible); margin-left: .2rem; }
.affil__exemple h3{ margin: 0 0 .6rem; }
.affil__exemple ul{ margin: 0 0 .8rem; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: 1.1rem; color: var(--encre-douce); }
.affil__exemple b{ color: var(--encre); font-weight: 500; }
.affil__alerte{ margin: 0; color: #7a4a1f; font-size: 1.02rem; }
#bloc-achat[hidden]{ display: none; }
.affil__idees-apercu{ display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.affil__idees-apercu .carte-simple p{ margin: 0; }
.affil__idees-apercu p.affil__gain-mode{ font-size: .8rem !important; text-transform: uppercase; letter-spacing: .12em; color: var(--rose-sombre); margin-bottom: .4rem !important; }

/* Frise : un visuel sur le côté de chaque étape, de la hauteur du bloc (Florence, 16/10/2026) */
.afrise__etape--image{ display: grid; grid-template-columns: 1fr clamp(6.5rem, 26%, 15rem); gap: 1.2rem; padding-right: 0; padding-top: 0; padding-bottom: 0; overflow: visible; }
.afrise__etape--image .afrise__corps{ padding: 1rem 0 1rem; }
.afrise__image{ margin: 0; position: relative; min-height: 9rem; }
.afrise__image img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0 15px 15px 0; }
.afrise__etape--passee .afrise__image img{ filter: grayscale(.3); }
@media (max-width: 30rem){ .afrise__etape--image{ gap: .8rem; } }
.afrise__visuel{ margin-right: 1.2rem; }
/* Onglet Visuels : groupes et visuels paysage en grand (Florence, 16/10/2026) */
.affil__visuels{ grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.affil__groupe{ grid-column: 1 / -1; font-family: var(--titre); font-weight: 400; font-size: 1.35rem; margin: 1.2rem 0 0; color: var(--encre); }
.affil__visuels > .affil__groupe:first-child{ margin-top: 0; }
.affil__visuel--paysage{ grid-column: span 2; }
@media (min-width: 46rem){ .affil__visuel--paysage{ grid-column: span 3; } }
/* Onglet Commissions (Florence, 16/10/2026) */
.affil__chiffres{ display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: .8rem; }
.affil__chiffre{ background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 1.3rem 1rem; text-align: center; }
.affil__chiffre p{ margin: 0; color: var(--encre-douce); font-size: 1.05rem; }
.affil__chiffre p.affil__chiffre-nombre{ font-family: var(--titre); font-size: clamp(2.4rem, 3vw + 1.5rem, 3.4rem); color: var(--encre); line-height: 1.1; }
.affil__onglets{ overflow-x: auto; }
.affil__onglets button{ white-space: nowrap; padding-left: .7rem; padding-right: .7rem; }
/* Frise : boutons copier / télécharger en bas de chaque étape (Florence, 16/10/2026) */
.afrise__actions{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.afrise__actions .bouton{ margin-top: 0; text-decoration: none; font-size: .9rem; }

/* Vignettes des visuels dans la frise + visionneuse en grand (Florence, 16/10/2026) */
.afrise__vignettes{ display: flex; flex-wrap: wrap; gap: .7rem; margin: .3rem 0 .4rem; }
.afrise__vignette{ position: relative; display: grid; gap: .3rem; width: 6.5rem; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; text-align: left; }
.afrise__vignette img{ width: 100%; height: 8.5rem; object-fit: cover; border-radius: 10px; border: 1px solid var(--filet); transition: transform .15s; }
.afrise__vignette:hover img{ transform: scale(1.03); box-shadow: 0 10px 22px -14px rgba(94,59,38,.7); }
.afrise__vignette span{ font-size: .78rem; line-height: 1.3; color: var(--encre-douce); }
.afrise__vignette--video::after{ content: "▶"; position: absolute; top: 3.2rem; left: 50%; transform: translateX(-50%); width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(255,255,255,.85); color: var(--rose-sombre); display: grid; place-items: center; font-size: .9rem; }
.visionneuse{ position: fixed; inset: 0; z-index: 1000; background: rgba(30,22,16,.88); display: grid; grid-template-columns: 3rem 1fr 3rem; grid-template-rows: 1fr auto; align-items: center; gap: .5rem; padding: 1rem; }
.visionneuse[hidden]{ display: none; }
.visionneuse__cadre{ margin: 0; grid-column: 2; grid-row: 1; display: grid; place-items: center; height: 100%; min-height: 0; }
.visionneuse__cadre img, .visionneuse__cadre video{ max-width: 100%; max-height: calc(100vh - 8rem); border-radius: 12px; background: #000; }
.visionneuse__fleche{ grid-row: 1; width: 3rem; height: 3rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--encre); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.visionneuse__fleche--g{ grid-column: 1; } .visionneuse__fleche--d{ grid-column: 3; }
.visionneuse__fleche[hidden]{ visibility: hidden; }
.visionneuse__fermer{ position: absolute; top: .8rem; right: .8rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); font-size: 1.1rem; cursor: pointer; z-index: 2; }
.visionneuse__bas{ grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }
.visionneuse__nom{ margin: 0; color: #fff; font-size: 1rem; }
.visionneuse__dl{ margin-top: 0; text-decoration: none; }
body.visionneuse-ouverte{ overflow: hidden; }
@media (max-width: 40rem){ .visionneuse{ grid-template-columns: 2.4rem 1fr 2.4rem; padding: .5rem; } .visionneuse__fleche{ width: 2.4rem; height: 2.4rem; font-size: 1.4rem; } }
/* Onglet Visuels : 6 colonnes sur ordinateur, les visuels paysage 2 par ligne (Florence, 16/10/2026) */
.affil__visuels{ grid-template-columns: repeat(2, 1fr); }
.affil__visuel--paysage{ grid-column: span 2; }
@media (min-width: 46rem){
  .affil__visuels{ grid-template-columns: repeat(6, 1fr); }
  .affil__visuel--paysage{ grid-column: span 3; }
}
.affil__visuel--paysage img{ aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
/* Frise : textes prêts à adapter (Florence, 16/10/2026) */
.afrise__texte{ background: var(--lait); border-radius: 12px; padding: .7rem 1rem; margin: .5rem 0; }
.afrise__texte summary{ cursor: pointer; font-weight: 500; color: var(--rose-sombre); font-size: .98rem; }
.afrise__texte-corps{ white-space: pre-line; overflow-wrap: anywhere; font-size: 1rem !important; color: var(--encre) !important; margin: .6rem 0 !important; }
/* Page affiliés : visuel paysage sous le bouton, encadré des dates seul à droite (Florence, 16/10/2026) */
.affil__paysage{ display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--filet); margin-top: .6rem; box-shadow: 0 18px 40px -28px rgba(94,59,38,.6); }
@media (min-width: 46rem){ .affil__lancement{ align-self: center; } }
.affil__etape-forte{ background: #fff; border: 1px solid var(--rose-sombre); border-radius: 14px; padding: .7rem 1rem; margin-left: -.2rem; list-style-position: inside; }
.affil__etape-forte b{ color: var(--rose-sombre); }

/* Haut de la page affiliés, version propre (Florence, 16/10/2026) */
.affil__accroche{ max-width: 50rem; margin: .5rem auto 2rem; text-align: center; display: grid; gap: 1.1rem; }
.affil__accroche p{ margin: 0; }
.affil__accroche p.affil__question{ font-family: var(--titre); font-size: clamp(1.6rem, 1.6vw + 1.2rem, 2.3rem); line-height: 1.3; color: var(--encre); }
.affil__accroche .affil__souffle{ border: 0; padding: 0; font-style: italic; font-size: 1.15rem; color: var(--encre-douce); }
.affil__accroche .affil__souffle b{ font-style: normal; color: var(--encre); font-weight: 500; }
.affil__accroche-texte{ font-size: 1.15rem; line-height: 1.7; color: var(--encre-douce); }
.affil__accroche-texte b{ color: var(--encre); font-weight: 500; }
.affil__vitrine{ display: grid; gap: 1.2rem; margin-bottom: 1rem; }
.affil__vitrine .affil__paysage{ margin: 0; height: 100%; object-fit: cover; }
.affil__vitrine .affil__lancement{ align-self: stretch; position: static; display: grid; align-content: center; }
@media (min-width: 52rem){ .affil__vitrine{ grid-template-columns: 1.55fr 1fr; align-items: stretch; } }
/* Avant-goût : 5 visuels variés (Florence, 16/10/2026) */
.affil__decompte--5{ grid-auto-columns: minmax(8rem, 1fr); max-width: 56rem; }
@media (min-width: 46rem){ .affil__decompte--5{ grid-auto-flow: initial; grid-template-columns: repeat(5, 1fr); overflow: visible; } }
.affil__ce-qui-attend{ max-width: 46rem; margin: 0 auto; padding-left: 1.3rem; display: grid; gap: .5rem; font-size: 1.12rem; line-height: 1.6; color: var(--encre-douce); }
.affil__ce-qui-attend b{ color: var(--encre); font-weight: 500; }
/* Photo de Sophie tout en haut de la page affiliés (Florence, 16/10/2026) */
.affil__portrait{ margin: 0 auto 1rem; width: clamp(9rem, 18vw, 13rem); }
.affil__portrait img{ display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: 999px 999px 24px 24px; border: 4px solid #fff; box-shadow: 0 18px 40px -24px rgba(94,59,38,.6); }
/* Photo de Sophie à droite du texte d'accroche (Florence, 16/10/2026) */
.affil__haut{ display: grid; gap: 1.2rem; margin-bottom: 2rem; align-items: center; }
.affil__haut .affil__accroche{ margin: 0 auto; }
.affil__haut .affil__portrait{ order: -1; margin: 0 auto; width: clamp(9rem, 40vw, 12rem); }
@media (min-width: 52rem){
  .affil__haut{ grid-template-columns: 1.6fr 1fr; gap: 2.5rem; }
  .affil__haut .affil__accroche{ text-align: left; margin: 0; }
  .affil__haut .affil__cta{ text-align: left; }
  .affil__haut .affil__portrait{ order: 0; width: 100%; max-width: 22rem; }
  .affil__haut .affil__portrait img{ aspect-ratio: 3 / 4; border-radius: 999px 999px 24px 24px; }
}
/* Page affiliés plus aérée (Florence, 16/10/2026) */
.affil > .affil__bloc, .affil > section.affil__bloc{ margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.affil h1{ margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.affil h2{ margin-bottom: 1.2rem; }
.affil__haut{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.affil__accroche{ gap: 1.5rem; }
.affil__vitrine{ margin-bottom: 0; }
.affil__gains{ margin-bottom: 2rem; gap: 1.4rem; }
.affil__etapes{ gap: 1.1rem; }
.affil__decompte{ margin-top: 2rem; margin-bottom: 2rem; }
.affil__faq{ gap: .9rem; }
.affil__ce-qui-attend{ gap: .8rem; }
.affil .affil__aide{ margin-bottom: 1.5rem !important; }
.affil__facture{ border-color: var(--rose-sombre); }
.affil__facture a{ color: var(--rose-sombre); }
.affil__rappel-tva{ margin-top: .8rem !important; background: var(--lait); border-radius: 10px; padding: .6rem .9rem; color: var(--encre) !important; }
.affil__rappel-tva[hidden]{ display: none; }
/* Dépôt des factures dans l'espace affilié (Florence, 16/10/2026) */
.affil__depot{ display: grid; gap: .8rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); }
.affil__depot h3, #bloc-factures h3{ margin: 0; }
.affil__depot input[type=file]{ background: #fff; padding: .6rem; }
.affil__depot .bouton{ justify-self: start; }
.affil__ok{ color: #3d7a3a; background: #eef6ea; border-radius: 10px; padding: .6rem .9rem; margin: 0; }
.affil__ok[hidden], #form-facture[hidden], #bloc-factures[hidden]{ display: none; }
#bloc-factures{ margin-top: 1.4rem; display: grid; gap: .6rem; }
.affil__factures{ list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.affil__factures li{ display: flex; justify-content: space-between; align-items: center; gap: .8rem; background: var(--lait); border-radius: 10px; padding: .5rem .9rem; font-size: 1rem; }
.affil__retirer{ background: none; border: 0; color: #a33; font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem; }
.affil__depot--simple{ margin-top: .6rem; padding-top: 0; border-top: 0; }
#form-paypal[hidden]{ display: none; }
/* Onglets de l'espace affilié : sur plusieurs lignes au lieu d'être coupés (Florence, 16/10/2026) */
.affil__onglets{ overflow: visible; flex-wrap: wrap; justify-content: center; border-radius: 22px; max-width: 60rem; }
.affil__onglets button{ flex: 1 1 auto; white-space: nowrap; }
/* État de l'adresse PayPal (Florence, 19/10/2026) */
.affil__paypal-etat{ margin: .6rem 0 0 !important; border-radius: 10px; padding: .6rem .9rem; font-size: 1rem !important; }
.affil__paypal-etat--ok{ background: #eef6ea; color: #2f6a2c !important; }
.affil__paypal-etat--attente{ background: #fff4d6; color: #7a5a12 !important; }
.affil__paypal-etat[hidden]{ display: none; }
/* Page affiliés (Florence, 19/10/2026) : photo de Sophie rectangulaire avec un filet brun comme sur le
   site de la Masterclass, angles droits pour le visuel « Manifeste ta vie » et l'encadré du lancement. */
.affil__haut .affil__portrait{ padding: .55rem; background: linear-gradient(135deg, rgba(138,90,56,.35), rgba(138,90,56,.08)); border: 1px solid var(--rose-sombre); box-shadow: 0 30px 70px -40px rgba(90,66,38,.5); }
.affil__haut .affil__portrait img, .affil__portrait img{ border-radius: 0 !important; border: 0; box-shadow: none; aspect-ratio: 4 / 5; }
.affil__vitrine .affil__paysage, .affil__vitrine .affil__lancement{ border-radius: 0; }
.affil__vitrine .affil__lancement .affil__jalons li{ border-radius: 0; }
.affil__gain small{ font-size: .4em; }
/* Case « J'accepte les conditions » bien visible (Florence, 19/10/2026) */
.affil__accepte{ background: var(--lait); border: 1px solid var(--rose-sombre); padding: .9rem 1rem; font-size: 1.02rem !important; }
.affil__accepte input{ width: 1.3rem !important; height: 1.3rem; margin-top: .15rem !important; }
.affil__accepte a{ font-weight: 500; }
.affil__obligatoire{ color: #9b2c2c; }
/* Tableau des commissions dans les questions (Florence, 19/10/2026) */
.affil__tableau{ width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: 1rem; background: #fff; }
.affil__tableau th, .affil__tableau td{ border: 1px solid var(--filet); padding: .55rem .7rem; text-align: left; vertical-align: top; color: var(--encre-douce); }
.affil__tableau th{ background: var(--lait); color: var(--encre); font-weight: 500; font-size: .92rem; }
@media (max-width: 40rem){
  .affil__tableau, .affil__tableau tbody, .affil__tableau tr, .affil__tableau td{ display: block; width: 100%; }
  .affil__tableau tr:first-child{ display: none; }
  .affil__tableau tr{ border: 1px solid var(--filet); margin-bottom: .6rem; }
  .affil__tableau td{ border: 0; padding: .3rem .7rem; }
  .affil__tableau td:first-child{ font-weight: 500; color: var(--encre); background: var(--lait); }
  .affil__tableau td:nth-child(2)::before{ content: "Prix payé : "; } .affil__tableau td:nth-child(3)::before{ content: "Hors TVA : "; } .affil__tableau td:nth-child(4)::before{ content: "Ta commission : "; }
}
.affil__mention-obligatoire{ text-align: left; margin-top: -.4rem !important; }
/* Note d'honoraires des particuliers (Florence, 19/10/2026) */
.affil__note{ margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--filet); display: grid; gap: .7rem; }
.affil__note[hidden]{ display: none; }
.affil__note h3{ margin: 0; }
.affil__note-apercu{ background: #fff; border: 1px solid var(--filet); padding: 1.1rem 1.3rem; font: .82rem/1.4 Helvetica, Arial, sans-serif; color: #222; max-width: 30rem; }
.affil__note-apercu p{ margin: 0 0 .6rem !important; font-size: .82rem !important; color: #222 !important; line-height: 1.4 !important; }
.affil__note-titre{ font-weight: 700; font-size: 1rem !important; }
.affil__note-date{ font-weight: 700; }
.affil__note-dest{ margin-left: 45% !important; }
.affil__note-ligne{ display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; border-top: 1px solid #999; border-bottom: 1px solid #ddd; padding: .3rem 0; }
.affil__note-total{ text-align: right; font-weight: 700; }
/* Message de Marine (Florence, 19/10/2026) */
.affil__marine{ border-color: #c0392b; background: #fffaf8; }
.affil__marine-titre{ color: #b03a2e !important; font-weight: 500; text-decoration: underline; margin-bottom: .6rem !important; }
.affil__marine-fort{ color: #b03a2e !important; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
.affil__marine p + p{ margin-top: .6rem; }
.affil__titre-frise{ margin-top: 2.2rem; }
/* 4 chiffres dans l'onglet Commissions (Florence, 19/10/2026) */
.affil__chiffres--4{ grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.affil__chiffres--4 .affil__chiffre-nombre{ font-size: clamp(2rem, 2vw + 1.3rem, 2.8rem) !important; }
#bloc-filleuls[hidden]{ display: none; }
#export-filleuls[hidden]{ display: none; }

/* Coordonnées de l'affilié, modifiables dans l'onglet Facturation (Florence, 19/10/2026). */
.affil__coord label{ display: grid; gap: .3rem; }
.affil__coord .affil__radio{ display: flex; }
.affil__coord-ligne{ display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px){ .affil__coord-ligne{ grid-template-columns: 1fr; } }
.affil__coord-choix{ border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.affil__coord-choix legend{ padding: 0; margin-bottom: .4rem; font-size: 1.02rem; }
#coord-pro{ display: grid; gap: .8rem; }
#coord-pro[hidden]{ display: none; }
/* Tableau des factures et attestations envoyées (Florence, 19/10/2026). */
.affil__tableau-factures td:last-child{ width: 2.5rem; text-align: center; }
.affil__tableau-factures .affil__petit{ display: block; font-size: .85rem; }
@media (max-width: 560px){ .affil__tableau-factures td:last-child{ width: auto; text-align: left; } }

/* Photo de Sophie en haut de /affiliation : même cadre en bois foncé que le visuel des paliers
   de la page d'accueil (Florence, 19/10/2026). */
.affil__haut .affil__portrait{ padding: 0; background: none; border: 7px solid #3F2617; border-radius: 4px; box-shadow: 0 18px 36px -20px rgba(63,38,23,.85); }

/* Les liens en forme de bouton marron gardent un texte blanc lisible (Florence, 19/10/2026). */
.affil a.bouton:not(.bouton--clair), .affil a.bouton:not(.bouton--clair):hover, .affil a.bouton:not(.bouton--clair):visited{ color: #fff !important; }
/* Le TTC sous le montant HT, pour les affiliés qui facturent la TVA (Florence, 19/10/2026). */
.affil__gain-ttc{ margin: -.3rem 0 .4rem !important; font-size: .95rem; color: var(--rose-sombre); font-weight: 500; }
/* Message « À lire avant d'utiliser les textes » : en noir, plus en rouge (Florence, 19/10/2026). */
.affil__marine{ border-color: var(--filet); background: #fff; }
.affil__marine-titre, .affil__marine-fort{ color: var(--encre) !important; }
/* Encadré « Déjà inscrit ? Retrouve ton espace » (Florence, 19/10/2026). */
.affil__retrouver{ max-width: 40rem; margin: 0 auto; display: grid; gap: .6rem; text-align: center; }
.affil__retrouver h2{ margin: 0; }
.affil__retrouver-ligne{ display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.affil__retrouver-ligne input{ flex: 1 1 16rem; max-width: 22rem; }
/* Texte lu par les lecteurs d'écran seulement. Choix PayPal / virement (Florence, 20/10/2026). */
.visuellement-cache{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#choix-paiement{ margin: .4rem 0 .8rem; }
#bloc-iban[hidden], #bloc-paypal[hidden]{ display: none; }
/* Rappels du groupe WhatsApp d'entraide dans l'espace affilié (Florence, 20/10/2026). */
.affil__rappel-wa{ margin: 1rem auto; padding: .7rem 1rem; max-width: 48rem; background: #eef6ea; border: 1px solid #cfe3c8; border-radius: 12px; font-size: .95rem; color: var(--encre); text-align: center; }
.affil__rappel-wa[hidden]{ display: none; }
.affil__rappel-wa a{ color: #1f7a3a; font-weight: 500; white-space: nowrap; }

/* Témoignages sur la page de vente (Florence, 20/10/2026) : 3 vidéos, 4 textes, lien vers la page entière. */
.v-preuves{ padding: clamp(3rem, 7vw, 5rem) var(--marge); background: #F3EEE6; }
.v-preuves h2{ text-align: center; margin: 0 auto 1rem; max-width: 46rem; }
.v-preuves__ecrits{ max-width: 64rem; margin: 2rem auto 1.5rem; text-align: left; }
@media (min-width: 64rem){ .v-preuves__ecrits{ columns: 2; } }
.t-carte--replie{ max-height: 19rem; overflow: hidden; position: relative; }
.t-carte--replie::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5.5rem;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 70%); pointer-events: none; }
.t-suite{ display: none; }
.t-carte--replie .t-suite{ display: block; position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); z-index: 1;
  background: none; border: 0; font: inherit; color: var(--rose-sombre); text-decoration: underline; cursor: pointer; }
/* Téléphone : les 3 vidéos côte à côte, à faire glisser (plus de 3e vidéo seule sur sa ligne). */
@media (max-width: 40rem){
  .v-preuves .t-videos{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; margin-left: calc(-1 * var(--marge)); margin-right: calc(-1 * var(--marge)); padding: 0 var(--marge) .4rem; }
  .v-preuves .t-video{ flex: 0 0 62%; width: 62%; min-width: 0; height: auto; scroll-snap-align: center; }
}
/* Pages de vente (pub, puis organique le 26/10/2026) : le 1er bloc (« La manifestation n'est pas un concept ») sur la pierre au lieu du
   bois foncé, pour ne plus avoir marron sur marron sous la photo (Florence, 21/10/2026). */
.vente .v-nuit:not(.v-nuit--liste){ background: none !important; color: var(--encre) !important; }
.vente .v-nuit:not(.v-nuit--liste) h2{ color: #4A3426; text-shadow: none; }
.vente .v-nuit:not(.v-nuit--liste) h2 em{ color: #9C6B3E; }
.vente .v-nuit:not(.v-nuit--liste) p{ color: var(--encre-douce) !important; }
.t-retour{ text-align: center; margin: 0 0 1.2rem; }
/* Témoignages de la page pub sur le bois foncé (Florence, 21/10/2026). */
.vente .v-preuves{ background: linear-gradient(180deg, rgba(58,36,22,.55), rgba(30,17,9,.75)), var(--bois-grain), #3A2416 !important; }
.vente .v-preuves h2{ color: #fff; }
.vente .v-preuves h2 em{ color: var(--or-clair); }
/* Bouton « Voir le replay » sous un live terminé (Florence, 25/10/2026). */
.lives__replay{ display: inline-block; margin-top: .6rem; padding: .55rem 1.2rem; font-size: .92rem; }
/* Live terminé avec replay : la ligne n'est plus grisée en entier, seul le visuel est adouci,
   pour que le bouton « Voir le replay » reste bien visible (Florence, 25/10/2026). */
.lives__ligne--passe:has(.lives__replay){ opacity: 1; }
.lives__ligne--passe:has(.lives__replay) .lives__visuel img{ opacity: .55; }
/* Encadré « 6 lives de questions-réponses en 2027 » sur la page de vente (Florence, 26/10/2026). */
.v-qa{ margin: 1.6rem 0 1.4rem; padding: 1.3rem 1.4rem 1.2rem; border-radius: 18px; text-align: center;
  background: #fff; border: 2px solid #9C6B3E; box-shadow: 0 18px 34px -22px rgba(46,27,16,.75); }
.v-qa__sur{ margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #9C6B3E; }
.v-qa__titre{ margin: 0 0 .7rem; font-family: var(--titre); font-size: clamp(1.35rem, 1.2vw + 1rem, 1.75rem); line-height: 1.25; color: #4A3426; }
.v-qa__titre em{ color: #9C6B3E; }
.v-qa p:last-child{ margin: 0; line-height: 1.7; }
/* Les autres points de « Ce que vous allez obtenir » prennent la même mise en page que l'encadré
   des lives questions-réponses : bordure bronze et ombre (Florence, 26/10/2026). */
.v-duo--inverse .pastilles li{ border: 2px solid #9C6B3E; box-shadow: 0 18px 34px -22px rgba(46,27,16,.75); }
.v-duo--inverse .pastilles li::before{ color: #9C6B3E; }
/* Message important dans une étape de la frise (Florence, 27/10/2026). */
.afrise__attention{ background: #fdf3e1; border-left: 4px solid #c08a3e; padding: .6rem .8rem; margin: .5rem 0 !important; font-weight: 500; color: var(--encre) !important; }
/* Le message d'attente, bien visible (Florence, 27/10/2026). */
.afrise__attention{ background: #fbe9d0 !important; border: 2px solid #c08a3e !important; border-left-width: 6px !important; border-radius: 10px; padding: .8rem 1rem !important; font-size: 1.05rem !important; font-weight: 600 !important; line-height: 1.5; }
/* Page de vente pub : 4 vidéos témoignages sur une seule ligne à l'ordinateur (Florence, 27/10/2026). */
@media (min-width: 40.01rem){ .v-preuves .t-videos{ grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 60rem; } }
/* Page de vente pub : 10 vidéos témoignages (27/10/2026) -> une seule rangée à faire défiler, aussi à l'ordinateur. */
@media (min-width: 40.01rem){
  .v-preuves .t-videos{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .8rem; max-width: 64rem; padding-bottom: .6rem; }
  .v-preuves .t-video{ flex: 0 0 calc(25% - .6rem); width: calc(25% - .6rem); min-width: 0; height: auto; scroll-snap-align: start; }
}
.v-preuves__glisser{ text-align: center; color: rgba(255,255,255,.75); font-size: .9rem; margin: .6rem 0 0; }
/* Frise des bonus (Florence, 27/10/2026) : fermeture le 8/11 ; sur ordinateur, on garde la répartition 3/3/2, plus lisible. */
.frise-bonus__repere{ display: none; }
/* Sur téléphone : frise VERTICALE (les dates et les traits se décalaient en horizontal). */
@media (max-width: 40rem){
  .frise-bonus__jalons, .frise-bonus__ligne{ display: none !important; }
  .frise-bonus__paliers{ display: block; position: relative; margin-top: 0; padding-left: 1.5rem; }
  .frise-bonus__paliers::before{ content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .9rem; width: 3px; background: #33271F; border-radius: 2px; }
  .vente .v-pour .frise-bonus__paliers li{ display: block; position: relative; border-left: 0 !important; padding: 0 0 1.3rem .9rem; }
  .vente .v-pour .frise-bonus__paliers li:last-child{ padding-bottom: 0; }
  .frise-bonus__paliers li::before{ content: ""; position: absolute; left: -1.38rem; top: .25rem; width: 1rem; height: 1rem; border-radius: 50%; border: 3px solid #33271F; background: #E2D8CB; box-sizing: border-box; }
  .frise-bonus__paliers li.frise-bonus__p1::before{ background: #8A5E3C; }
  .frise-bonus__paliers li.frise-bonus__p2::before{ background: #C2A06C; }
  .frise-bonus__paliers li.frise-bonus__repere::before{ background: #33271F; }
  .frise-bonus__repere b{ font-size: 1rem; }
}
/* Frise ordinateur : le 29 octobre était décalé de 1,5 px par rapport à son trait (Florence, 27/10/2026). */
@media (min-width: 58rem){ .vente .v-pour .frise-bonus__jalons li:nth-child(2), .vente .v-pour .frise-bonus__jalons li:nth-child(3){ margin-left: 0; margin-right: 0; } }
/* Page « adresse de la surprise » (27/10/2026). */
.surprise-page .s-carte{ max-width: 34rem; margin: 1.2rem auto; display: grid; gap: .7rem; }
.surprise-page .s-carte input[type=email], .surprise-page .s-carte input[type=text], .surprise-page .s-carte input[type=tel], .surprise-page .s-carte input:not([type]){ width: 100%; padding: .7rem .8rem; border: 1px solid var(--filet); border-radius: 10px; font: inherit; }
.surprise-page .s-ligne{ display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.surprise-page #s-autre{ display: grid; gap: .6rem; }
.surprise-page #s-autre[hidden]{ display: none; }
.surprise-page .s-titre{ font-weight: 500; margin: 0; }
.surprise-page .s-adresse{ white-space: pre-line; background: #F6F1EA; border-radius: 10px; padding: .8rem 1rem; margin: 0; }
.surprise-page .s-choix{ display: flex; gap: .5rem; align-items: center; }
.surprise-page .s-msg{ margin: 0; color: var(--encre-douce); font-size: .92rem; }

/* Replay joué sur la page live (Florence, 27/10/2026) */
.l-replay{ max-width: 860px; margin: 0 auto 2rem; scroll-margin-top: 80px; }
.l-replay .surtitre{ margin-bottom: .8rem; }

/* Bouton vers le bon de commande sous les tarifs (ouverture des portes, 27/10/2026). */
.v-commander{ margin: 1.4rem 0 1rem; text-align: center; }
.v-commander__bouton{ font-size: 1.1rem; padding: 1rem 2.4rem; }

/* Validation du choix de cadeau dans la fenêtre (28/10/2026) */
.f-choix-msg{ margin: .8rem 0 0; font-size: .92rem; text-align: center; }
.f-choix-msg--erreur{ color: #a33; }
#f-choix .fenetre__bas{ display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* Boutons vers le bon de commande sur la page témoignages (Florence, 28/10/2026) */
.t-cta{ text-align: center; margin: 1.6rem 0 2.4rem; }
/* Total des commissions : chiffre plus petit pour ne pas toucher les bords de la carte (Florence, 29/10/2026). */
#st-total{ font-size: clamp(1.6rem, 3.2vw, 2.3rem) !important; white-space: nowrap; }