/* ───────────────────────────────────────────────────────────
   Mélanails — espace formations
   DA reprise du site principal : Cormorant Garamond / Outfit,
   doré #C4A97D sur brun-noir #1C1410.
   ─────────────────────────────────────────────────────────── */

:root {
  --noir:        #1C1410;
  --or:          #C4A97D;
  --or-fonce:    #AD9070;   /* liens et survols — repris du site principal */
  --or-clair:    #E8D5B7;
  --creme:       #FDFBF8;
  --beige:       #F5EFE8;
  --rose:        #F2E0D6;
  --brun:        #7C5C3E;
  --brun-doux:   #6E5A4E;
  --gris:        #B0A093;
  --bord:        #F0E6DA;
  --bord-or:     rgba(196, 169, 125, .35);   /* la bordure des cartes du site */

  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --script: 'Dancing Script', 'Brush Script MT', cursive;

  --r:     14px;
  --large: 1140px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--creme);
  color: var(--noir);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Grain — repris du site principal, c'est lui qui donne le côté « papier »
   de la DA Mélanails. Purement décoratif : hors du flux, inerte au clic.
   z-index volontairement sous le plein écran du lecteur vidéo (1000),
   sinon le grain passerait par-dessus la vidéo. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
}

/* Barre de défilement dorée — reprise du site principal (WebKit seulement,
   Firefox garde la sienne, c'est sans conséquence). */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--beige); }
::-webkit-scrollbar-thumb { background: var(--or); border-radius: 2px; }

/* ─────────────────────────────────────────────── en-tête */

/* Barre fixe translucide, comme sur le site principal : elle laisse passer
   le crème du fond et ne se teinte qu'au défilement (classe .defile posée
   par app.js). Sur mobile le fond est posé d'emblée, sinon les liens
   deviennent illisibles sur une carte claire. */
.entete {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;              /* au-dessus du grain (50), sous le plein écran (1000) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  transition: background .35s ease, box-shadow .35s ease;
}

.entete.defile {
  background: rgba(253, 251, 248, .93);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(28, 20, 16, .07);
}

/* La barre étant fixe, le contenu doit démarrer sous elle. */
#app { padding-top: 78px; }

/* ── Logotype : deux étages, repris à l'identique du site ── */

.logotype {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-decoration: none;
  color: var(--noir);
}

/* Le -mr compense l'interlettrage, qui sinon décentre le mot vers la
   gauche en ajoutant une espace après la dernière lettre. */
.logotype-nom {
  font-size: .98rem;
  font-weight: 300;
  letter-spacing: .42em;
  margin-right: -.42em;
}

.logotype-script {
  margin-top: 2px;
  font-family: var(--script);
  font-size: 1.05rem;
  color: var(--or-fonce);
}

/* ── Liens de navigation ── */

.nav-liens {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-lien {
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--noir);
  text-decoration: none;
  transition: color .2s;
}
.nav-lien:hover,
.nav-lien-actif { color: var(--or-fonce); }

/* L'emplacement d'action, à droite de l'en-tête. Largeur réservée pour que
   la bascule déconnexion / retour au site ne fasse pas sauter la nav. */
.entete-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 150px;
}
.entete-action [hidden] { display: none; }

/* ── Boutons en pilule, comme .btn-dark du site ── */

.btn-pilule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 30px;
  border: 1px solid var(--noir);
  border-radius: 999px;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--sans);
  font-size: .88rem;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.btn-pilule:hover {
  background: var(--or-fonce);
  border-color: var(--or-fonce);
}

.btn-pilule-vide {
  background: none;
  color: var(--noir);
  padding: 9px 22px;
  font-size: .82rem;
}
.btn-pilule-vide:hover {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--creme);
}

/* Sous 860px : les liens tombent, on garde le logotype et l'action. */
@media (max-width: 860px) {
  .entete {
    background: rgba(253, 251, 248, .95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(28, 20, 16, .06);
  }
  .nav-liens { display: none; }
}

/* ─────────────────────────────────────────────── structure */

#app { flex: 1; }

.vue[hidden] { display: none; }

.conteneur {
  max-width: var(--large);
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.centre {
  max-width: var(--large);
  margin: 0 auto;
  padding: 80px 24px;
  text-align: center;
}

.surtitre {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--or);
}

/* ── Signatures de la DA Mélanails ──
   Le site principal n'ouvre pas ses sections sur un surtitre en capitales
   espacées mais sur un surtitre manuscrit en Dancing Script doré, en
   minuscules. C'est sa marque la plus reconnaissable, avec le filet doré
   qui suit le titre. */

.script {
  margin: 0 0 2px;
  font-family: var(--script);
  font-size: 1.9rem;
  line-height: 1;
  font-weight: 500;
  color: var(--or-fonce);
}

/* ── Écran d'accès ──
   Une seule colonne étroite, alignée à gauche, posée haut dans la page
   plutôt que centrée verticalement : le regard tombe sur le titre, puis
   descend au champ. Pas de carte, pas d'encadré, pas de visuel — le fond
   crème et un halo suffisent. */

#v-acces {
  position: relative;
  overflow: hidden;
}

/* Un seul halo, en haut à droite, très diffus. */
.halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.halo-a {
  width: 460px;
  height: 460px;
  top: -180px;
  right: -140px;
  background: rgba(232, 213, 183, .5);
}

.acces {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 72px 24px 90px;
  text-align: left;
}

.titre-hero {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(42px, 8vw, 62px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--noir);
}

/* Le filet doré sous le titre — présent sur toutes ses ouvertures. */
.filet {
  display: block;
  width: 56px;
  height: 1px;
  margin-bottom: 24px;
  background: var(--or);
}

/* Le formulaire est posé à même le fond. Le champ prend toute la largeur
   et le bouton se place dessous : empilés, ils ne peuvent pas se
   comprimer l'un l'autre comme le faisait la version en ligne. */
#form-acces { margin: 30px 0 0; }

@media (max-width: 600px) {
  .acces { padding: 48px 24px 72px; }
}

.titre-page {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  letter-spacing: .01em;
}

.chapo {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--brun-doux);
}

.sous-titre {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
}

/* ─────────────────────────────────────────────── attente */

.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 20px;
  border: 2px solid var(--bord);
  border-top-color: var(--or);
  border-radius: 50%;
  animation: tourne .7s linear infinite;
}

@keyframes tourne { to { transform: rotate(360deg); } }

.attente {
  margin: 0;
  font-size: 14px;
  color: var(--gris);
  letter-spacing: .03em;
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
}

/* ─────────────────────────────────────────────── formulaire */

.carte-form {
  background: var(--creme);
  border: 1px solid var(--bord-or);
  border-radius: var(--r);
  padding: 28px;
  text-align: left;
}

/* Casse normale, pas de capitales espacées : celles-ci étaient la marque du
   gabarit d'origine, le site de Mélanails n'en utilise nulle part. */
.label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 300;
  color: var(--brun-doux);
}

.champ {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--bord-or);
  border-radius: var(--r);
  background: var(--creme);
  font-family: var(--sans);
  font-size: 15px;
  color: var(--noir);
  transition: border-color .15s;
}
.champ:focus {
  outline: none;
  border-color: var(--or);
}
.champ::placeholder { color: #C9BCB0; }

/* Nom issu du paiement : affiché mais non modifiable. */
.champ-verrouille {
  background: var(--bord);
  color: var(--brun-doux);
  cursor: default;
}
.champ-verrouille:focus { border-color: var(--bord); }

/* Boutons en pilule, casse normale, survol doré : la facture du site
   principal (.btn-dark / .btn-outline). Volontairement PAS de capitales
   espacées — c'était la marque du gabarit d'origine. */
.bouton {
  width: 100%;
  margin-top: 16px;
  padding: 14px 30px;
  border: 1px solid var(--noir);
  border-radius: 999px;
  background: var(--noir);
  color: var(--creme);
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 400;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, opacity .3s;
}
.bouton:hover {
  background: var(--or-fonce);
  border-color: var(--or-fonce);
}
.bouton:disabled { opacity: .5; cursor: default; }

/* Variante claire — le bouton du certificat, dans le lecteur. */
.bouton-clair {
  background: var(--or);
  border-color: var(--or);
  color: var(--noir);
}
.bouton-clair:hover {
  background: var(--or-clair);
  border-color: var(--or-clair);
  color: var(--noir);
}

/* Sortie vers le catalogue du site principal : présent mais en retrait,
   pour ne pas concurrencer la connexion. */
.bouton-secondaire {
  display: block;
  margin-top: 10px;
  background: transparent;
  color: var(--noir);
  border: 1px solid var(--noir);
  text-decoration: none;
  text-align: center;
}
.bouton-secondaire:hover {
  background: var(--noir);
  border-color: var(--noir);
  color: var(--creme);
}

/* Avis Google, dans le bloc certificat. Le logo garde ses couleurs de
   marque : c'est ce qui le rend identifiable au premier coup d'œil. */
.bouton-avis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 22px;
  font-size: .85rem;
}
.icone-google {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* Le lien vers le guide, sous le programme. Le [hidden] est explicite :
   .bouton-secondaire pose display:block, qui sinon écrase l'attribut. */
.bouton-guide {
  display: inline-flex;      /* .bouton-secondaire est en block : il prendrait
                                toute la largeur sous le programme */
  width: auto;
  margin-top: 22px;
  padding: 12px 28px;
}
.bouton-guide[hidden] { display: none; }

.message {
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--brun-doux);
  min-height: 1px;
}
.message.erreur { color: #A8503C; }
.message.succes { color: #5B7355; }

.note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}
.note a { color: var(--brun); }

/* ─────────────────────────────────────────────── grille */

.grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* ── Carte de module ──
   Calquée sur .formation-card du site principal : fond crème, bordure
   dorée fine, radius 14px, tout en texte. L'action est poussée en bas par
   margin-top:auto pour que des cartes de hauteurs inégales alignent
   quand même leurs boutons. */

.fcarte {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.75rem;
  background: var(--creme);
  border: 1px solid var(--bord-or);
  border-radius: var(--r);
  overflow: hidden;
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.fcarte:hover {
  border-color: rgba(196, 169, 125, .7);
  box-shadow: 0 14px 34px rgba(28, 20, 16, .07);
  transform: translateY(-2px);
}

/* La photo d'ambiance en haut de carte. Le dégradé de masque s'éteint plus
   bas et moins vite qu'avant, pour qu'on distingue vraiment le visuel
   derrière le titre sans gêner la lecture. */
.fcarte-ambiance {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 190px;
  background-size: cover;
  background-position: center;
  opacity: .34;
  mask-image: linear-gradient(to bottom, #000 42%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent);
  pointer-events: none;
}

.fcarte-script {
  position: relative;
  margin: 0 0 .25rem;
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--or-fonce);
}

.fcarte-titre {
  position: relative;
  margin: 0 0 .75rem;
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--noir);
}

.fcarte-accroche {
  position: relative;
  margin: 0 0 1.25rem;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--brun-doux);
}

/* Le prix, en gros Cormorant doré — c'est la signature de ses cartes.
   padding-top : il respire après l'accroche même quand celle-ci est courte. */
.fcarte-prix {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--or-fonce);
}

.fcarte-prix-note {
  margin: .35rem 0 0;
  font-size: .72rem;
  font-weight: 300;
  color: var(--gris);
}

/* Tout le bas de carte — prix, mention, bouton — dans un bloc unique
   poussé en bas par margin-top:auto. Les boutons s'alignent ainsi d'une
   carte à l'autre, et les écarts internes sont de simples marges entre
   frères : elles tiennent même quand l'accroche est courte, là où `auto`
   aurait écrasé une marge posée sur le bouton lui-même. */
.fcarte-pied {
  margin-top: auto;
  padding-top: 1.75rem;
  width: 100%;
}

.fcarte-action {
  width: 100%;
  margin-top: 1.15rem;   /* l'air entre « Paiement unique » et le bouton */
}

/* Module possédé : pas de prix au-dessus, le bouton ouvre le pied. */
.fcarte-pied > .fcarte-action:first-child { margin-top: 0; }

/* La légende sous le bouton — « Accès à vie ». */
.fcarte-mention {
  margin: .6rem 0 0;
  font-size: .72rem;
  font-weight: 300;
  text-align: center;
  color: var(--gris);
}

.fcarte-attente {
  font-family: var(--script);
  font-size: 1.15rem;
  color: var(--gris);
}

/* Module à venir : grisé, inerte. */
.fcarte-indispo {
  cursor: default;
  background: var(--beige);
  border-color: rgba(196, 169, 125, .2);
}
.fcarte-indispo:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(196, 169, 125, .2);
}
.fcarte-indispo .fcarte-titre { color: var(--brun-doux); }
.fcarte-indispo .fcarte-ambiance { filter: grayscale(1); opacity: .08; }

/* séparateur "compléter ma formation" */
.separateur {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 26px;
}
.separateur::before,
.separateur::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bord);
}
.separateur span {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
}


/* ─────────────────────────────────────────────── lecteur */

.retour {
  margin-bottom: 26px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--brun-doux);
  cursor: pointer;
  letter-spacing: .04em;
}
.retour:hover { color: var(--noir); }

.lecteur-entete { margin-bottom: 26px; }

.titre-lecteur {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.2;
}

.video-cadre {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--noir);
  box-shadow: 0 14px 40px rgba(28, 20, 16, .14);
}

.video-ratio {
  position: relative;
  aspect-ratio: 16 / 9;
}

/* Les mini-modules sont tournés au téléphone : vidéo verticale (9/16).
   La largeur se déduit de la hauteur disponible — borner la hauteur sans
   toucher la largeur laisserait le cadre plus large que l'image, d'où des
   bandes noires sur les côtés. */
.video-cadre.vertical {
  width: min(420px, 100%, calc(72vh * 9 / 16));
  margin: 0 auto;
}
.video-cadre.vertical .video-ratio {
  aspect-ratio: 9 / 16;
}
.video-ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.video-ratio iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Lecteur YouTube — voir chargerYoutube() dans app.js.
   L'iframe est dessinée en taille HD (--larg × --haut) puis réduite par --k ;
   elle dépasse de --marge en haut et en bas, où tombent titre et logo. */
.yt-cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.video-ratio .yt-cadre iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  width: var(--larg) !important;
  height: var(--haut) !important;
  transform-origin: 0 0;
  transform: scale(var(--k, .25)) translateY(calc(-1 * var(--marge)));
  pointer-events: none;
}
.yt-voile { position: absolute; inset: 0; cursor: pointer; }

/* Avant la première lecture, le tap va à YouTube (exigé sur iPhone). */
.yt.amorce .yt-cadre iframe { pointer-events: auto; }
.yt.amorce .yt-voile { display: none; }

.yt-barre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 10px 8px;
  background: linear-gradient(transparent, rgba(28, 20, 16, .75));
  color: var(--creme);
  font: 12px var(--sans);
}
.yt-barre button {
  background: none;
  border: 0;
  padding: 4px;
  color: var(--creme);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.yt-barre input { accent-color: var(--or); min-width: 0; }
.yt-pos { flex: 1; }
.yt-tps { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* En vertical le cadre est étroit : on garde l'essentiel. */
.video-cadre.vertical .yt-tps { display: none; }

/* Plein écran : natif (:fullscreen) ou simulé en CSS sur iPhone (.plein-ecran). */
.video-cadre.plein-ecran,
.video-cadre:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: auto;
  margin: 0;
  border-radius: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-cadre.plein-ecran .video-ratio,
.video-cadre:fullscreen .video-ratio { width: min(100vw, 100dvh * 16 / 9); }
.video-cadre.vertical.plein-ecran .video-ratio,
.video-cadre.vertical:fullscreen .video-ratio { width: min(100vw, 100dvh * 9 / 16); }
.video-cadre.plein-ecran .yt-tps { display: initial; }
html.sans-defilement { overflow: hidden; }

/* Le fond du cadre n'a plus à être noir : il ne doit jamais se voir, et
   s'il affleure d'un pixel, autant qu'il se fonde dans la page. */
.video-cadre { background: var(--beige); }

.lecteur-bas {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.programme p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--brun-doux);
}

.bloc-certificat {
  background: var(--beige);
  border: 1px solid var(--bord-or);
  border-radius: var(--r);
  padding: 26px;
}

.note-certif {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--brun-doux);
}

/* ─────────────────────────────────────────────── pied */

.pied {
  padding: 30px 24px 36px;
  border-top: 1px solid var(--bord);
  text-align: center;
  font-size: 12.5px;
  color: var(--gris);
}
.pied p { margin: 4px 0; }
.pied a { color: var(--or-fonce); }
.pied a:hover { color: var(--noir); }

/* ─────────────────────────────────────────────── mobile */

@media (max-width: 860px) {
  .lecteur-bas {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 560px) {
  .conteneur { padding: 40px 16px 56px; }
  .centre    { padding: 56px 16px; }
  .entete    { padding: 15px 16px; }
  .grille    { grid-template-columns: 1fr; gap: 18px; }
  .carte-form { padding: 22px; }
  .marque-nom { display: none; }
}