/* ============================================================
   Justine Delaspre : POP SENSIBLE x MOUVEMENT x PROFONDEUR
   Crème #F5F0E8, nuit #141A33, bleu électrique #2743E3,
   corail #E8604C, jaune #F2B84B. Titres Anton majuscules,
   corps Manrope. Couleurs vives utilisées comme ponctuation.
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-normal-400.912c3c9f2621.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212, U+FEFF;
}
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton-latin-ext-normal-400.ab8365836d69.woff2") format("woff2");
  font-weight: 400; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-normal-800.cd56e2ec63d7.woff2") format("woff2");
  font-weight: 800; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-normal-200_800.938c6e8019b6.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212, U+FEFF;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-latin-ext-normal-200_800.6d36d5bdedfa.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0;
}

:root {
  --creme: #f5f0e8;
  --nuit: #141a33;
  --bleu: #2743e3;
  --corail: #e8604c;
  --jaune: #f2b84b;
  --muet: #5c5f70;
  --filet: rgba(20, 26, 51, 0.18);
  --display: "Anton", "Arial Narrow", sans-serif;
  --fort: "Archivo", "Arial Black", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--creme); color: var(--nuit);
  font-family: "Manrope", "Segoe UI", sans-serif; font-size: 16.5px; line-height: 1.62;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nuit); text-decoration: none; }
a:hover { color: var(--bleu); }
.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.filet-haut { border-top: 1px solid var(--filet); }
.muet { color: var(--muet); }
.centre { text-align: center; }

/* ── Typographie éditoriale ─────────────────────────────── */
h1, .h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem); line-height: 0.98; letter-spacing: 0.5px;
  margin: 0 0 26px;
}
h2, .h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem); line-height: 1.02; margin: 0 0 20px;
}
h3 { font-family: var(--fort); font-size: 1.05rem; text-transform: uppercase;
     letter-spacing: 0.06em; margin: 0 0 10px; }
.corail { color: var(--corail); }
.bleu { color: var(--bleu); }
.sous-titre {
  font-family: var(--fort); color: var(--corail); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.86rem; margin: 0 0 16px;
}
.accroche { font-size: 1.16rem; max-width: 620px; color: var(--nuit); }
.numero-page {
  font-family: var(--fort); font-size: 0.78rem; letter-spacing: 0.2em;
  color: var(--muet); margin-bottom: 26px; display: flex; align-items: center; gap: 14px;
}
.numero-page::after { content: ""; flex: 0 0 64px; height: 1px; background: var(--nuit); }

/* ── Boutons et liens flèche ────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--nuit); color: #fff; font-family: var(--fort);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
  padding: 15px 26px; border-radius: 4px; border: 2px solid var(--nuit);
  cursor: pointer; transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { background: var(--bleu); border-color: var(--bleu); color: #fff; transform: translateY(-2px); }
.btn-contour { background: transparent; color: var(--nuit); }
.btn-contour:hover { background: var(--nuit); color: #fff; transform: translateY(-2px); }
.btn-corail { background: var(--corail); border-color: var(--corail); }
.btn-corail:hover { background: var(--nuit); border-color: var(--nuit); }
.lien-fleche {
  font-family: var(--fort); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.8rem; display: inline-flex; gap: 8px; align-items: center;
  border-bottom: 2px solid var(--nuit); padding-bottom: 3px;
}
.lien-fleche:hover { color: var(--bleu); border-color: var(--bleu); }
.lien-fleche::after { content: "→"; }

/* ── En-tête ────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 40; background: rgba(245, 240, 232, 0.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--filet);
}
.entete-int { display: flex; align-items: center; gap: 18px; height: 76px; min-width: 0; }
.logo { line-height: 1.02; font-family: var(--fort); letter-spacing: 0.04em; flex-shrink: 0; }
.logo span { display: block; text-transform: uppercase; font-size: 0.95rem; }
.logo span + span { display: flex; align-items: center; gap: 8px; }
.logo .trait-logo { width: 26px; height: 4px; background: var(--bleu); display: inline-block; }
.nav-principale { display: none; margin-left: auto; align-items: center; gap: 4px; }
.nav-principale a {
  font-family: var(--fort); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; padding: 9px 11px; border-radius: 3px;
}
.nav-principale a:hover, .nav-principale a.actif { color: var(--bleu); }
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.entete .btn { padding: 11px 16px; font-size: 0.7rem; }
.burger {
  display: inline-flex; background: none; border: 1.5px solid var(--nuit); border-radius: 4px;
  width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer;
  color: var(--nuit);
}
.nav-mobile { display: none; border-top: 1px solid var(--filet); background: var(--creme); padding: 14px 24px 20px; }
.nav-mobile a {
  display: block; padding: 12px 4px; font-family: var(--fort); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.82rem; border-bottom: 1px solid var(--filet);
}
.nav-mobile.ouvert { display: block; }
@media (min-width: 1060px) {
  .nav-principale { display: flex; }
  .burger { display: none; }
  .nav-mobile.ouvert { display: none; }
  .entete-actions { margin-left: 0; }
}
@media (max-width: 480px) {
  .entete .btn { padding: 10px 12px; font-size: 0.64rem; letter-spacing: 0.06em; }
  .logo span { font-size: 0.85rem; }
}

/* ── Signature graphique : pinceau et gribouillis ───────── */
.pinceau-v, .pinceau-h { position: absolute; pointer-events: none; }
.gribouillis { display: inline-block; vertical-align: middle; }
.souligne-corail { position: relative; white-space: nowrap; }
.souligne-corail svg {
  position: absolute; left: 0; right: 0; bottom: -0.18em; width: 100%; height: 0.32em;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { position: relative; padding: 84px 0 72px; overflow: clip; }
.hero-grille { display: grid; gap: 40px; align-items: center; position: relative; }
@media (min-width: 900px) { .hero-grille { grid-template-columns: 1.25fr 0.75fr; } }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; max-width: 380px; height: auto; margin: 0 auto; }
.hero-photo .pinceau-v { top: -30px; right: 6%; height: 115%; width: 74px; }

/* ── Cartes d'entrées (4 univers) ───────────────────────── */
.entrees { display: grid; gap: 1px; background: var(--filet); border: 1px solid var(--filet); }
@media (min-width: 720px) { .entrees { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .entrees { grid-template-columns: repeat(4, 1fr); } }
.entree { background: var(--creme); padding: 30px 26px 34px; position: relative; transition: background 0.2s ease; }
.entree:hover { background: #fff; }
.entree .indice { font-family: var(--fort); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--muet); }
.entree h3 { font-size: 1.25rem; margin: 14px 0 10px; font-family: var(--display); letter-spacing: 0.04em; }
.entree p { font-size: 0.94rem; color: var(--muet); margin: 0 0 40px; }
.entree .lien-fleche { position: absolute; bottom: 26px; left: 26px; border-bottom: none; }

/* ── Sections éditoriales ───────────────────────────────── */
.deux-colonnes { display: grid; gap: 46px; align-items: center; }
@media (min-width: 880px) { .deux-colonnes { grid-template-columns: 1fr 1fr; } }
.photo-cadre { position: relative; }
.photo-cadre img { width: 100%; height: auto; }
.photo-cadre::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1.5px solid var(--nuit); z-index: -1;
}
.liste-offres { border-top: 1px solid var(--filet); }
.offre { border-bottom: 1px solid var(--filet); padding: 26px 0; display: grid; gap: 8px 30px; }
@media (min-width: 780px) { .offre { grid-template-columns: 240px 1fr auto; align-items: center; } }
.offre h3 { margin: 0; font-size: 1rem; }
.offre p { margin: 0; color: var(--muet); font-size: 0.95rem; }
.badge-statut {
  display: inline-block; font-family: var(--fort); font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 12px;
  border: 1.5px solid var(--nuit); border-radius: 999px; white-space: nowrap;
}
.badge-statut.avenir { border-color: var(--corail); color: var(--corail); }
.badge-statut.ouvert { background: var(--nuit); color: #fff; }

/* ── Bloc nuit (citation, footer, CTA) ──────────────────── */
.bloc-nuit { background: var(--nuit); color: #fff; }
.bloc-nuit h2, .bloc-nuit h3 { color: #fff; }
.bloc-nuit .muet { color: rgba(255, 255, 255, 0.66); }
.bloc-nuit a { color: #fff; }
.bloc-nuit a:hover { color: var(--jaune); }
.citation {
  font-family: var(--display); text-transform: uppercase; font-size: clamp(1.7rem, 4vw, 2.9rem);
  line-height: 1.12; position: relative; max-width: 800px;
}
.citation .guillemet { color: var(--jaune); font-size: 1.4em; line-height: 0; vertical-align: -0.25em; }
.signature-citation { font-family: var(--fort); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; margin-top: 22px; color: rgba(255,255,255,0.66); }

/* ── Tableaux tarifs ────────────────────────────────────── */
.tarifs-table { width: 100%; border-collapse: collapse; }
.tarifs-table th {
  text-align: left; font-family: var(--fort); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; padding: 14px 12px;
  border-bottom: 2px solid var(--nuit);
}
.tarifs-table td { padding: 18px 12px; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.tarifs-table .prix { font-family: var(--display); font-size: 1.5rem; white-space: nowrap; }

/* ── Formulaires ────────────────────────────────────────── */
form .champ { margin-bottom: 18px; }
label {
  display: block; font-family: var(--fort); text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 0.7rem; margin-bottom: 7px;
}
input, select, textarea {
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--nuit); border-radius: 4px;
  background: #fff; font: inherit; color: var(--nuit);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(39, 67, 227, 0.35); }
.grille-form { display: grid; gap: 0 18px; }
@media (min-width: 720px) { .grille-form { grid-template-columns: 1fr 1fr; } }
.radio-cartes { display: grid; gap: 12px; }
@media (min-width: 720px) { .radio-cartes { grid-template-columns: repeat(3, 1fr); } }
.radio-carte {
  border: 1.5px solid var(--nuit); border-radius: 4px; padding: 16px; cursor: pointer;
  display: block; background: #fff; position: relative;
}
.radio-carte input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-carte strong { font-family: var(--fort); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; display: block; }
.radio-carte .desc-radio { font-size: 0.85rem; color: var(--muet); }
.radio-carte:has(input:checked) { background: var(--nuit); color: #fff; }
.radio-carte:has(input:checked) .desc-radio { color: rgba(255,255,255,0.7); }
.radio-carte.desactivee { opacity: 0.45; cursor: not-allowed; }

/* ── Coches et pastilles ────────────────────────────────── */
.coches { list-style: none; padding: 0; margin: 18px 0; }
.coches li { padding-left: 30px; position: relative; margin-bottom: 10px; }
.coches li::before {
  content: "→"; position: absolute; left: 0; color: var(--bleu); font-weight: 800;
}

/* ── Cartes atelier / session ───────────────────────────── */
.carte-atelier { border: 1.5px solid var(--nuit); background: #fff; padding: 34px 32px; position: relative; }
.carte-atelier + .carte-atelier { margin-top: 34px; }
.carte-atelier .intention {
  font-family: var(--display); text-transform: uppercase; font-size: 1.5rem;
  line-height: 1.1; margin: 6px 0 16px;
}
.infos-pratiques { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.infos-pratiques span {
  border: 1.5px solid var(--nuit); border-radius: 999px; padding: 6px 14px;
  font-family: var(--fort); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em;
}
.session-ligne {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  border-top: 1px solid var(--filet); padding: 16px 0;
}
.session-ligne .quand { font-family: var(--fort); font-size: 0.85rem; text-transform: uppercase; }

/* ── Toasts ─────────────────────────────────────────────── */
.toasts { position: fixed; top: 90px; right: 18px; z-index: 90; display: grid; gap: 10px; max-width: 380px; }
.toast {
  background: var(--nuit); color: #fff; padding: 15px 18px; border-radius: 4px;
  font-size: 0.92rem; border-left: 5px solid var(--bleu); box-shadow: 0 12px 30px rgba(20, 26, 51, 0.3);
}
.toast-erreur { border-left-color: var(--corail); }

/* ── Pied de page nuit avec citation ────────────────────── */
.pied { background: var(--nuit); color: #fff; padding: 70px 0 34px; margin-top: 80px; }
.pied-citation {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); line-height: 1.14; max-width: 640px; margin-bottom: 54px;
}
.pied-citation .guillemet { color: var(--jaune); }
.pied-grille { display: grid; gap: 34px; padding-top: 34px; border-top: 1px solid rgba(255,255,255,0.2); }
@media (min-width: 860px) { .pied-grille { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.pied h3 { color: rgba(255,255,255,0.55); font-size: 0.72rem; letter-spacing: 0.16em; }
.pied a { display: block; padding: 4px 0; font-size: 0.95rem; }
.pied .legal { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.8rem; color: rgba(255,255,255,0.55); }
.pied .legal a { display: inline; font-size: 0.8rem; color: rgba(255,255,255,0.66); }

/* ── Divers ─────────────────────────────────────────────── */
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: 12px; top: 12px; background: var(--nuit); color: #fff; padding: 10px 16px; z-index: 100; }
.respiration { height: 26px; }
.gestalt-bloc { max-width: 760px; }
.gestalt-bloc + .gestalt-bloc { margin-top: 54px; }
.etapes-guide { counter-reset: etape; border-top: 1px solid var(--filet); }
.etape-guide { border-bottom: 1px solid var(--filet); padding: 30px 0 30px 92px; position: relative; counter-increment: etape; }
.etape-guide::before {
  content: "0" counter(etape); position: absolute; left: 0; top: 24px;
  font-family: var(--display); font-size: 2.6rem; color: var(--bleu);
}
.respiration-petite { height: 40px; }
.radio-carte .rc-titre { font-family: var(--fort); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.08em; display: block; }
.radio-carte .rc-duree { display: block; font-size: 0.85rem; color: var(--muet); margin-top: 4px; }
.radio-carte .rc-prix { display: block; font-family: var(--display); font-size: 1.15rem; margin-top: 10px; letter-spacing: 0.02em; }
.radio-carte:has(input:checked) .rc-duree { color: rgba(255,255,255,0.7); }
.radio-carte:has(input:checked) .rc-prix { color: var(--jaune); }
.radio-cartes.canaux { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 719px) { .radio-cartes.canaux { grid-template-columns: 1fr; } }
.gribouillis { vertical-align: middle; margin-left: 6px; }
@media print { .entete, .toasts, .pied, .burger { display: none !important; } }