/* ═══════════════════════════════════════════════════════════
   TOKENS
   Palette dérivée de l'app : violet de marque, encre profonde,
   lavande des cartes. L'accent rouge est celui du stylo du prof —
   utilisé uniquement pour les annotations de la courbe.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Échelle des maquettes : un téléphone doit tenir en entier
     sans que le visiteur ait à faire défiler la page. */
  --e: .86;
  --encre: #241640;
  --encre-doux: #5C5175;
  --violet: #7C3AED;
  --violet-fonce: #5B21B6;
  --lavande: #EDE7FB;
  --lavande-pale: #F6F2FE;
  --craie: #FBFAFD;
  --rouge-stylo: #D6273E;
  --blanc: #fff;
  --bord: rgba(124, 58, 237, .14);
  --ombre: 0 2px 4px rgba(36, 22, 64, .04), 0 12px 32px rgba(36, 22, 64, .06);
  --ombre-forte: 0 8px 20px rgba(36, 22, 64, .08), 0 32px 64px rgba(36, 22, 64, .12);
  --r: 18px;
  --max: 1180px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --corps: "Karla", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

@media(max-height:900px) {
  :root {
    --e: .74
  }
}

@media(max-height:800px) {
  :root {
    --e: .66
  }
}

@media(max-height:700px) {
  :root {
    --e: .58
  }
}

@media(max-width:440px) {
  :root {
    --e: .72
  }
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

html,
body {
  overflow-x: hidden;
  max-width: 100%
}

body {
  margin: 0;
  background: var(--craie);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 6px
}

.enveloppe {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.025em;
  margin: 0
}

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem)
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem)
}

h3 {
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3
}

p {
  margin: 0
}

.surtitre {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--violet);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.surtitre::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--violet);
  border-radius: 2px
}

/* ═══════════ BOUTONS ═══════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--corps);
  font-weight: 700;
  font-size: .98rem;
  padding: 15px 28px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn--plein {
  background: var(--violet);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .28)
}

.btn--plein:hover {
  background: var(--violet-fonce);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(124, 58, 237, .34)
}

.btn--vide {
  background: var(--blanc);
  color: var(--encre);
  border-color: var(--bord)
}

.btn--vide:hover {
  border-color: var(--violet);
  color: var(--violet-fonce);
  transform: translateY(-2px)
}

/* ═══════════ EN-TÊTE ═══════════ */
.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 250, 253, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.entete.collee {
  border-bottom-color: var(--bord)
}

.entete__int {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 70px
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -.02em;
  flex: none;
  white-space: nowrap
}

.logo__marque {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  object-fit: cover;
  flex: none;
  box-shadow: 0 3px 10px rgba(124, 58, 237, .22);
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0
}

/* white-space:nowrap → un libellé ne se coupe jamais en deux lignes,
   ce qui faisait grandir la hauteur de l'en-tête et poussait le bouton dehors. */
.nav a {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  color: var(--encre-doux);
  transition: color .16s ease;
  white-space: nowrap;
}

.nav a:hover {
  color: var(--violet-fonce)
}

/* La navigation disparaît AVANT que le bouton ne soit à l'étroit. */
@media(max-width:1180px) {
  .nav {
    display: none
  }
}

.entete .btn {
  flex: none;
  white-space: nowrap;
  padding: 13px 22px
}

/* ═══════════ HÉRO ═══════════ */
.hero {
  padding: 76px 0 96px;
  position: relative;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  top: -320px;
  right: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(124, 58, 237, .11), transparent 66%);
  pointer-events: none;
}

.hero__grille {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  align-items: center;
  position: relative
}

@media(max-width:980px) {
  .hero__grille {
    grid-template-columns: 1fr;
    gap: 52px
  }
}

.hero h1 .accentue {
  position: relative;
  display: inline-block;
  color: var(--violet-fonce);
}

.hero h1 .accentue svg {
  position: absolute;
  left: 0;
  bottom: -.14em;
  width: 100%;
  height: .28em;
  overflow: visible;
}

.hero h1 .accentue path {
  fill: none;
  stroke: var(--rouge-stylo);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: tracer 1.1s .85s cubic-bezier(.62, .03, .3, 1) forwards;
}

@keyframes tracer {
  to {
    stroke-dashoffset: 0
  }
}

.hero__chapo {
  font-size: 1.16rem;
  color: var(--encre-doux);
  margin-top: 26px;
  max-width: 31em
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px
}

.hero__preuve {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--bord);
}

.preuve {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .9rem;
  color: var(--encre-doux);
  font-weight: 500
}

.preuve svg {
  flex: none;
  color: var(--violet)
}

/* ── Signature : la courbe de progression sur papier Seyès ── */
.cahier {
  position: relative;
  background: var(--blanc);
  border-radius: var(--r);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-forte);
  padding: 30px 30px 22px;
  transform: rotate(-1.1deg);
}

.cahier::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r);
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 25px, rgba(124, 58, 237, .09) 25px 26px),
    repeating-linear-gradient(to right, transparent 0 25px, rgba(124, 58, 237, .05) 25px 26px);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

.cahier__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  position: relative;
  margin-bottom: 6px
}

.cahier__titre {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.04rem
}

.cahier__matiere {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-doux)
}

.cahier svg.graphe {
  width: 100%;
  height: auto;
  display: block;
  position: relative
}

.courbe {
  fill: none;
  stroke: var(--violet);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 560;
  stroke-dashoffset: 560;
  animation: tracer 1.7s .35s cubic-bezier(.55, .06, .28, 1) forwards;
}

.point {
  fill: var(--blanc);
  stroke: var(--violet);
  stroke-width: 3;
  opacity: 0;
  animation: apparait .35s forwards
}

.note {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--encre);
  opacity: 0;
  animation: apparait .35s forwards
}

.mois {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--encre-doux);
  letter-spacing: .06em
}

@keyframes apparait {
  to {
    opacity: 1
  }
}

.annotation {
  position: absolute;
  right: 20px;
  top: 16px;
  transform: rotate(6deg);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--rouge-stylo);
  border: 2px solid var(--rouge-stylo);
  border-radius: 26px;
  padding: 5px 13px;
  opacity: 0;
  animation: apparait .4s 2.1s forwards;
  background: rgba(255, 255, 255, .9);
}

.cahier__pied {
  position: relative;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--bord);
  font-size: .85rem;
  color: var(--encre-doux);
}

/* ═══════════ BANDEAU DE CONFIANCE ═══════════ */
.bandeau {
  background: var(--encre);
  color: #fff;
  padding: 26px 0
}

.bandeau__int {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 44px;
  text-align: center
}

.bandeau span {
  font-size: .94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .86);
  display: flex;
  align-items: center;
  gap: 9px
}

.bandeau svg {
  color: #C4B5FD;
  flex: none
}

/* ═══════════ SECTIONS ═══════════ */
.section {
  padding: 104px 0
}

.section--lavande {
  background: var(--lavande-pale)
}

.section__tete {
  max-width: 640px;
  margin-bottom: 56px
}

.section__tete p {
  color: var(--encre-doux);
  font-size: 1.08rem;
  margin-top: 18px
}

/* ── Étapes : l'ordre porte du sens, donc numérotées ── */
.etapes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px
}

@media(max-width:860px) {
  .etapes {
    grid-template-columns: 1fr
  }
}

.etape {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 34px 30px;
  box-shadow: var(--ombre);
  position: relative;
}

.etape__num {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  color: var(--violet);
  letter-spacing: .1em;
  margin-bottom: 18px;
  display: block;
}

.etape h3 {
  margin-bottom: 11px
}

.etape p {
  color: var(--encre-doux);
  font-size: .98rem
}

/* ── Duo texte + téléphone ── */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center
}

.duo--inverse .duo__visuel {
  order: -1
}

@media(max-width:940px) {
  .duo {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .duo--inverse .duo__visuel {
    order: 0
  }
}

.liste {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  gap: 20px
}

.liste li {
  display: flex;
  gap: 15px;
  align-items: flex-start
}

.liste__puce {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--lavande);
  display: grid;
  place-items: center;
  color: var(--violet-fonce);
  margin-top: 1px;
}

.liste strong {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 3px
}

.liste span {
  color: var(--encre-doux);
  font-size: .95rem;
  line-height: 1.55
}

/* ═══════════ TÉLÉPHONE (maquettes recréées) ═══════════
   Pour remplacer par une vraie capture Figma :
   <div class="tel"><img src="images/mon-ecran.png" alt="…"></div>
   ═══════════════════════════════════════════════════════ */
.duo__visuel {
  display: flex;
  justify-content: center
}

/* Boîte à la taille RÉELLE occupée après mise à l'échelle : sans elle,
   la page réserverait la place du téléphone à sa taille d'origine. */
.tel-boite {
  width: calc(300px * var(--e));
  height: calc(686px * var(--e));
  flex: none
}

/* ── Captures réelles de l'application ──────────────────────────
   Largeur uniforme (le pas du carrousel reste constant), hauteur
   libre : les captures n'ont pas toutes exactement le même cadrage. */
.coverflow .diapo {
  width: calc(320px * var(--e))
}

/* Les mockups sont des PNG transparents avec châssis déjà dessiné :
   pas de coins à arrondir, juste une ombre portée qui suit la silhouette. */
.coverflow .diapo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(36, 22, 64, .22));
}

.coverflow .diapo--actif img {
  filter: drop-shadow(0 22px 44px rgba(36, 22, 64, .3))
}

.capture {
  width: calc(420px * var(--e));
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(36, 22, 64, .18));
}

.capturep {
  width: calc(720px * var(--e));
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 18px 40px rgba(36, 22, 64, .18));
}

.tel {
  width: 300px;
  height: 686px;
  transform: scale(var(--e));
  transform-origin: top left;
  background: #12091F;
  border-radius: 42px;
  padding: 11px;
  box-shadow: var(--ombre-forte);
  position: relative;
}

.tel__ecran {
  background: #F7F6FB;
  border-radius: 32px;
  overflow: hidden;
  height: 664px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.tel__encoche {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 22px;
  background: #12091F;
  border-radius: 100px;
  z-index: 5;
}

.tel__statut {
  display: flex;
  justify-content: space-between;
  padding: 13px 22px 6px;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 700;
  color: var(--encre);
}

.tel__barre {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  color: var(--violet-fonce);
}

.tel__corps {
  flex: 1;
  overflow: hidden;
  padding: 0 15px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.tel__section {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--violet);
  font-weight: 700;
  margin: 5px 0 -3px 4px;
}

.carte {
  background: #fff;
  border-radius: 15px;
  padding: 12px 13px;
  border: 1px solid rgba(124, 58, 237, .09);
  box-shadow: 0 1px 3px rgba(36, 22, 64, .05);
}

.carte--prof {
  display: flex;
  gap: 11px;
  align-items: center
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  flex: none;
  background: linear-gradient(145deg, #DDD1FA, #C4B0F5);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  color: var(--violet-fonce);
  font-size: 1rem;
}

.avatar--rond {
  border-radius: 50%
}

.carte__nom {
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.25
}

.carte__meta {
  font-size: .66rem;
  color: var(--encre-doux);
  line-height: 1.4;
  margin-top: 2px
}

.carte__prix {
  margin-left: auto;
  text-align: right;
  font-family: var(--display);
  font-weight: 800;
  font-size: .86rem;
  color: var(--violet-fonce);
  flex: none;
}

.etoiles {
  font-size: .62rem;
  color: #E8A317;
  font-weight: 700
}

.chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px
}

.chip {
  background: var(--lavande);
  color: var(--violet-fonce);
  font-size: .58rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
}

.rangee {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 4px
}

.rangee+.rangee {
  border-top: 1px solid rgba(124, 58, 237, .07)
}

.rangee__ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--lavande);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--violet-fonce);
}

.rangee__txt {
  flex: 1;
  min-width: 0
}

.rangee__titre {
  font-weight: 700;
  font-size: .76rem;
  line-height: 1.3
}

.rangee__sous {
  font-size: .63rem;
  color: var(--encre-doux);
  line-height: 1.35;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.fleche {
  color: #C9C2DA;
  flex: none
}

.bulle {
  max-width: 78%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: .7rem;
  line-height: 1.45
}

.bulle--eux {
  background: #fff;
  border: 1px solid rgba(124, 58, 237, .09);
  align-self: flex-start;
  border-bottom-left-radius: 5px
}

.bulle--moi {
  background: var(--violet);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 5px
}

.tel__legende {
  text-align: center;
  font-size: .82rem;
  color: var(--encre-doux);
  margin-top: 20px;
  font-family: var(--mono);
  letter-spacing: .04em;
}

/* ═══════════ SÉCURITÉ ═══════════ */
.securite {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px
}

@media(max-width:820px) {
  .securite {
    grid-template-columns: 1fr
  }
}

.bouclier {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 32px;
  box-shadow: var(--ombre);
}

.bouclier__ico {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--lavande);
  display: grid;
  place-items: center;
  color: var(--violet-fonce);
  margin-bottom: 20px;
}

.bouclier h3 {
  margin-bottom: 10px
}

.bouclier p {
  color: var(--encre-doux);
  font-size: .97rem
}

/* ═══════════ TARIF ═══════════ */
.tarif {
  background: var(--encre);
  color: #fff;
  border-radius: 26px;
  padding: 60px 52px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}

@media(max-width:860px) {
  .tarif {
    grid-template-columns: 1fr;
    padding: 42px 30px;
    gap: 38px
  }
}

.tarif h2 {
  color: #fff
}

.tarif p {
  color: rgba(255, 255, 255, .76);
  margin-top: 20px;
  font-size: 1.05rem
}

.calcul {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r);
  padding: 26px
}

.calcul__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 0;
  font-size: .95rem
}

.calcul__ligne+.calcul__ligne {
  border-top: 1px solid rgba(255, 255, 255, .11)
}

.calcul__ligne span:first-child {
  color: rgba(255, 255, 255, .72)
}

.calcul__ligne span:last-child {
  font-family: var(--mono);
  font-weight: 700
}

.calcul__ligne--total {
  margin-top: 6px;
  border-top: 2px solid rgba(196, 181, 253, .5) !important;
  padding-top: 16px
}

.calcul__ligne--total span {
  color: #fff !important;
  font-size: 1.16rem;
  font-weight: 800
}

.calcul__ligne--total span:last-child {
  color: #C4B5FD !important
}

/* ═══════════ FAQ ═══════════ */
.faq {
  max-width: 800px;
  margin: 0 auto
}

.question {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: 15px;
  margin-bottom: 12px;
  overflow: hidden
}

.question summary {
  padding: 22px 26px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
}

.question summary::-webkit-details-marker {
  display: none
}

.question summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--violet);
  flex: none;
  transition: transform .22s ease;
  line-height: 1;
}

.question[open] summary::after {
  transform: rotate(45deg)
}

.question p {
  padding: 0 26px 24px;
  color: var(--encre-doux);
  font-size: .99rem;
  max-width: 66ch
}

/* ═══════════ APPEL FINAL ═══════════ */
.final {
  padding: 110px 0;
  text-align: center;
  position: relative;
  overflow: hidden
}

.final::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, .13), transparent 62%);
}

.final__int {
  position: relative;
  max-width: 660px;
  margin: 0 auto
}

.final p {
  color: var(--encre-doux);
  font-size: 1.12rem;
  margin-top: 22px
}

.final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 38px
}

/* ═══════════ PIED ═══════════ */
.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, .62);
  padding: 56px 0 34px;
  font-size: .92rem
}

.pied__haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 34px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .11)
}

.pied__col h4 {
  font-family: var(--display);
  color: #fff;
  font-size: .94rem;
  margin: 0 0 14px;
  font-weight: 600
}

.pied__col a {
  display: block;
  text-decoration: none;
  padding: 5px 0;
  transition: color .16s ease
}

.pied__col a:hover {
  color: #C4B5FD
}

.pied__bas {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  font-size: .86rem
}

.pied .logo {
  color: #fff;
  margin-bottom: 14px
}




/* ═══════════ VISITE : carrousel d'écrans ═══════════ */
.visite {
  padding: 84px 0 96px;
  background: var(--lavande-pale);
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
}

.visite__tete {
  max-width: 560px;
  margin: 0 auto 44px;
  text-align: center
}

.visite__tete p {
  color: var(--encre-doux);
  margin-top: 16px
}

.carrousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px
}

@media(max-width:720px) {
  .carrousel {
    gap: 6px
  }
}

.carrousel__fleche {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--blanc);
  border: 1.5px solid var(--bord);
  color: var(--violet-fonce);
  display: grid;
  place-items: center;
  box-shadow: var(--ombre);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.carrousel__fleche:hover {
  border-color: var(--violet);
  background: var(--violet);
  color: #fff;
  transform: scale(1.08)
}

.carrousel__fleche:active {
  transform: scale(.96)
}

@media(max-width:720px) {
  .carrousel__fleche {
    width: 42px;
    height: 42px
  }
}

/* ── Piste coverflow : l'écran actif au centre, ses voisins réduits ──
   touch-action:pan-y → le glissement horizontal pilote la piste,
   le vertical continue de faire défiler la page normalement. */
.coverflow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 26px 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.piste {
  display: flex;
  align-items: center;
  gap: 26px;
  transition: transform .5s cubic-bezier(.28, .72, .26, 1);
  will-change: transform;
}

.coverflow .diapo {
  flex: none;
  cursor: pointer;
  transform: scale(.74);
  opacity: .4;
  transition: transform .5s cubic-bezier(.28, .72, .26, 1), opacity .45s ease;
}

.coverflow .diapo:hover {
  opacity: .66
}

.coverflow .diapo--actif {
  transform: scale(1);
  opacity: 1;
  cursor: default
}

.coverflow .diapo--actif:hover {
  opacity: 1
}

.coverflow .diapo--voisin {
  transform: scale(.82);
  opacity: .62
}

.coverflow .diapo .tel {
  box-shadow: var(--ombre)
}

.coverflow .diapo--actif .tel {
  box-shadow: var(--ombre-forte)
}

/* Dans la piste, chaque écran est toujours affiché : il a son propre téléphone */
/* Chaque écran empile son contenu VERTICALEMENT et occupe toute la
   hauteur du cadre. Sans flex-direction, tout se mettait côte à côte. */
.ecran {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0
}

/* Garde-fou : les téléphones des sections de contenu ne sont PAS des diapos.
   Ni réduction, ni transparence, ni transition ne doivent les atteindre. */
.duo__visuel .tel {
  transform: none;
  opacity: 1;
  transition: none;
  box-shadow: var(--ombre-forte)
}

@media(max-width:720px) {
  .piste {
    gap: 14px
  }

  .coverflow .diapo {
    transform: scale(.7)
  }

  .coverflow .diapo--voisin {
    transform: scale(.78)
  }
}

@media(prefers-reduced-motion:reduce) {

  .piste,
  .coverflow .diapo {
    transition: none !important
  }
}

.carrousel__legende {
  text-align: center;
  margin-top: 34px;
  min-height: 74px
}

.carrousel__legende h3 {
  font-size: 1.32rem;
  font-weight: 800;
  margin-bottom: 8px
}

.carrousel__legende p {
  color: var(--encre-doux);
  max-width: 44ch;
  margin: 0 auto;
  font-size: 1rem
}

.pastilles {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 22px
}

.pastille {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(124, 58, 237, .24);
  border: none;
  transition: width .24s ease, background .24s ease;
}

.pastille:hover {
  background: rgba(124, 58, 237, .5)
}

.pastille--actif {
  width: 30px;
  border-radius: 100px;
  background: var(--violet)
}

/* ═══════════ RETOUR EN HAUT ═══════════ */
.haut {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  background: var(--violet);
  color: #fff;
  border: none;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(124, 58, 237, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s, background .18s ease;
}

.haut--visible {
  opacity: 1;
  visibility: visible;
  transform: none
}

.haut:hover {
  background: var(--violet-fonce);
  transform: translateY(-3px)
}

@media(max-width:720px) {
  .haut {
    right: 16px;
    bottom: 16px;
    width: 46px;
    height: 46px
  }
}

/* ── Tuiles de l'accueil ── */
.tuile {
  border-radius: 14px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff
}

.tuile--vert {
  background: linear-gradient(120deg, #3E9E5F, #2F7F4B)
}

.tuile--bleu {
  background: linear-gradient(120deg, #5B72C4, #4A5FAE)
}

.tuile--video {
  background: linear-gradient(125deg, #7C3AED, #9333EA);
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 26px 13px;
  position: relative;
  overflow: hidden;
}

.tuile--video::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -14px;
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .09);
  transform: rotate(18deg);
}

.tuile__ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  flex: none
}

.tuile__titre {
  font-weight: 700;
  font-size: .76rem;
  line-height: 1.25
}

.tuile__sous {
  font-size: .6rem;
  opacity: .85;
  line-height: 1.35;
  margin-top: 1px
}

.tuile__fleche {
  opacity: .8;
  font-size: 1rem
}

.lecture {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--violet);
  display: grid;
  place-items: center;
  font-size: .9rem;
  padding-left: 3px;
  position: relative;
  z-index: 1;
}

/* ── Carte de séance : le liseré de statut est DROIT à gauche
      (angles carrés), comme dans l'application. ── */
.carte--seance {
  border-radius: 0 14px 14px 0 !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
}

/* ── Calendrier ── */
.mois-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #F6EFFB;
  padding: 9px 16px;
  font-size: .72rem;
  color: var(--violet-fonce);
  font-weight: 700;
}

.bande-jours {
  display: flex;
  gap: 5px;
  padding: 9px 12px 10px;
  border-bottom: 1px solid rgba(124, 58, 237, .08);
  overflow: hidden
}

.jour {
  flex: none;
  width: 38px;
  text-align: center;
  padding: 6px 0;
  border-radius: 11px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, .08);
  position: relative;
}

.jour span {
  display: block;
  font-size: .5rem;
  color: var(--encre-doux);
  font-weight: 700
}

.jour b {
  font-size: .8rem;
  font-family: var(--display);
  color: var(--violet-fonce)
}

.jour i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
  margin: 2px auto 0
}

.jour--actif {
  background: var(--violet);
  border-color: var(--violet)
}

.jour--actif span,
.jour--actif b {
  color: #fff
}

.jour--actif i {
  background: #fff
}

/* ── Paiements ── */
.budget {
  background: linear-gradient(125deg, #6D28D9, #8B3FD9);
  border-radius: 15px;
  padding: 14px;
  color: #fff
}

.budget__barre {
  height: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .25);
  margin-top: 12px;
  overflow: hidden
}

.budget__barre i {
  display: block;
  width: 0;
  height: 100%;
  background: #fff;
  border-radius: 100px
}

.sous-onglets {
  display: flex;
  gap: 22px;
  padding: 4px 4px 8px;
  border-bottom: 1px solid rgba(124, 58, 237, .1);
  font-size: .68rem;
  font-weight: 700;
  color: var(--encre-doux)
}

.sous-onglets--actif {
  color: var(--violet-fonce);
  border-bottom: 2px solid var(--violet);
  padding-bottom: 6px;
  margin-bottom: -9px
}

.ligne-paie {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FDF5FA;
  border-radius: 13px;
  padding: 10px 11px
}

.ligne-paie__ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FEF0C7;
  display: grid;
  place-items: center;
  font-size: .65rem;
  flex: none
}

.montant {
  background: var(--violet);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 9px;
  flex: none
}

.pastille-nav {
  position: absolute;
  top: -3px;
  right: 4px;
  background: #DC2626;
  color: #fff;
  font-size: .42rem;
  font-weight: 700;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-style: normal;
}

/* ═══════════ MAQUETTES : chrome de l'app ═══════════ */
.app__tete {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 16px 12px
}

.app__salut {
  font-family: var(--display);
  font-weight: 800;
  font-size: .86rem;
  color: var(--encre);
  line-height: 1.2
}

.app__espace {
  font-size: .6rem;
  color: var(--violet);
  font-weight: 700;
  margin-top: 1px
}

.app__titre {
  font-family: var(--display);
  font-weight: 800;
  font-size: .78rem;
  color: var(--violet-fonce);
  margin: 4px 0 -3px 2px
}

.recherche {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(124, 58, 237, .1);
  border-radius: 13px;
  padding: 11px 13px;
  font-size: .66rem;
  color: #B9A8E0;
}

.bascule {
  display: flex;
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 11px;
  overflow: hidden;
  background: #fff
}

.bascule__opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 0;
  font-size: .65rem;
  font-weight: 700;
  color: var(--violet-fonce);
}

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

.chip--contour {
  background: #fff;
  border: 1px solid rgba(124, 58, 237, .2);
  color: var(--encre);
  font-weight: 600;
  padding: 5px 11px;
  flex: none
}

.chip--actif {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet)
}

.chip--bleu {
  background: #3B4CA8;
  border-color: #3B4CA8
}

.app__nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 9px 4px 13px;
  border-top: 1px solid rgba(124, 58, 237, .08);
  background: #fff;
}

.app__nav span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: .5rem;
  font-weight: 600;
  color: #B9A8E0;
}

.app__nav svg {
  width: 15px;
  height: 15px
}

.app__nav--actif {
  color: var(--violet-fonce) !important
}

.app__nav--actif svg {
  background: var(--lavande);
  border-radius: 100px;
  padding: 3px 9px;
  width: 33px;
  height: 21px;
  box-sizing: content-box
}

/* ── Annales ── */
.annale {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FDF7FB;
  border: 1px solid rgba(124, 58, 237, .07);
  border-radius: 13px;
  padding: 11px 12px;
}

.annale__ico {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #E5E9FB;
  display: grid;
  place-items: center;
  flex: none
}

.annale__titre {
  font-weight: 700;
  font-size: .7rem;
  line-height: 1.25;
  color: var(--encre)
}

.annale__tags {
  display: flex;
  gap: 4px;
  margin-top: 5px;
  flex-wrap: wrap
}

.tag {
  font-size: .5rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px
}

.tag--pays {
  background: #DCFCE7;
  color: #15803D
}

.tag--niv {
  background: #FEF3C7;
  color: #B45309
}

.tag--an {
  background: #DBEAFE;
  color: #1D4ED8
}

.annale__dl {
  color: var(--violet);
  flex: none
}

/* ═══════════ PASTILLE DE STATUT ═══════════ */
.statut {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  background: var(--lavande);
  color: var(--violet-fonce);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--bord);
}

.statut__pastille {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  flex: none;
  box-shadow: 0 0 0 0 rgba(124, 58, 237, .55);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(124, 58, 237, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0)
  }
}

/* ═══════════ SECTION PROJET ═══════════ */
.projet {
  background: var(--encre);
  color: #fff;
  padding: 104px 0;
  overflow: hidden
}

.projet h3 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.1rem
}

.specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

@media(max-width:960px) {
  .specs {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:660px) {
  .specs {
    grid-template-columns: 1fr
  }
}

.spec {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: var(--r);
  padding: 28px 26px;
}

.spec__cle {
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C4B5FD;
  display: block;
  margin-bottom: 14px;
}

.spec p {
  color: rgba(255, 255, 255, .68);
  font-size: .93rem;
  line-height: 1.6
}

.projet__aparte {
  margin-top: 32px;
  padding: 28px 30px;
  border-radius: var(--r);
  border: 1px dashed rgba(196, 181, 253, .35);
  background: rgba(124, 58, 237, .09);
}

.projet__aparte p {
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 82ch
}

.projet__aparte strong {
  color: #fff
}

/* ═══════════ FORMULAIRE LISTE D'ATTENTE ═══════════ */
.inscription {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  justify-content: center;
  margin-top: 36px;
}

.inscription__champ {
  font-family: var(--corps);
  font-size: .98rem;
  color: var(--encre);
  padding: 15px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--bord);
  background: var(--blanc);
  min-width: 230px;
  transition: border-color .18s ease;
}

.inscription__champ:focus {
  outline: none;
  border-color: var(--violet)
}

.inscription__champ--select {
  min-width: 186px;
  cursor: pointer
}

.inscription__retour {
  min-height: 1.4em;
  margin-top: 16px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--violet-fonce);
}

.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;
}

/* ═══════════ APPARITION AU DÉFILEMENT ═══════════ */
.revele {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .68s cubic-bezier(.2, .7, .3, 1), transform .68s cubic-bezier(.2, .7, .3, 1)
}

.revele.vu {
  opacity: 1;
  transform: none
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important
  }

  .revele {
    opacity: 1;
    transform: none
  }

  .courbe,
  .hero h1 .accentue path {
    stroke-dashoffset: 0
  }

  .point,
  .note,
  .annotation {
    opacity: 1
  }

  html {
    scroll-behavior: auto
  }
}

/* ═══════════════════════════════════════════════════════════
   SITE MULTI-PAGES
   ═══════════════════════════════════════════════════════════ */

/* Onglet actif dans la barre de navigation */
.nav--actif {
  color: var(--violet-fonce) !important;
  font-weight: 700;
  position: relative
}

.nav--actif::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -24px;
  height: 2px;
  background: var(--violet);
  border-radius: 2px;
}

/* En-tête de page intérieure */
.page-tete {
  padding: 64px 0 44px
}

.page-tete h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.1rem);
  max-width: 18ch
}

.page-tete p {
  color: var(--encre-doux);
  font-size: 1.08rem;
  margin-top: 18px;
  max-width: 56ch
}

/* Sur une page dédiée, la visite n'a plus besoin de son propre titre
   ni de ses bordures : elle enchaîne directement sous l'en-tête. */
.visite--page {
  padding: 8px 0 72px;
  background: transparent;
  border: none
}

/* ═══════════ MENU MOBILE ═══════════ */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  cursor: pointer;
  background: var(--blanc);
  border: 1.5px solid var(--bord);
  border-radius: 12px;
  color: var(--violet-fonce);
  place-items: center;
}

.burger:hover {
  border-color: var(--violet)
}

.burger svg {
  display: block
}

.burger__fermer {
  display: none
}

.burger[aria-expanded="true"] .burger__ouvrir {
  display: none
}

.burger[aria-expanded="true"] .burger__fermer {
  display: block
}

@media(max-width:1180px) {
  .burger {
    display: grid
  }

  /* Le menu devient un panneau déroulant sous l'en-tête */
  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--blanc);
    border-bottom: 1px solid var(--bord);
    box-shadow: var(--ombre);
    padding: 8px 24px 18px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, visibility .3s, padding .3s ease;
  }

  .nav--ouvert {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible
  }

  .nav a {
    padding: 14px 2px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(124, 58, 237, .08);
  }

  .nav a:last-child {
    border-bottom: none
  }

  .nav--actif::after {
    display: none
  }

  .entete {
    position: sticky
  }

  .entete__int {
    position: relative
  }

  /* Sur mobile, le bouton d'action passe dans le panneau pour libérer la barre */
  .entete>.enveloppe>.btn {
    display: none
  }

  .nav .btn {
    margin-top: 12px;
    border-bottom: none;
    text-align: center;
    background: var(--violet);
    color: #fff;
    padding: 14px 22px;
  }
}

@media(min-width:1181px) {
  .nav .btn {
    display: none
  }
}

/* Champ leurre : invisible pour l'humain, rempli par les robots.
   On ne l'affiche pas avec display:none, que certains robots détectent. */
.piege {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}