:root {
  --ivoire: #FAF6EF;
  --blanc: #FFFDF9;
  --sable: #D6B499;
  --sable-pale: #F3E7DA;
  --terracotta: #B8684F;
  --terracotta-fonce: #9C5541;
  --terracotta-pale: #F4DFD5;
  /* Olive un peu plus vert que #7D755B : à côté du doré, l'olive d'origine
     tirait sur le kaki et les deux se confondaient. */
  --olive: #6E7A5A;
  --olive-fonce: #535D43;
  --olive-pale: #E6E9DC;
  --or: #A9864F;
  --or-fonce: #7E6131;
  --sauge: #7F9177;
  --sauge-pale: #E4E9DF;
  --eucalyptus: #33463D;
  --texte: #3A3A30;
  --texte-doux: #6B6450;
  --dore: #C2A36B;
  --filet: #E8DCCD;
  --titre: 'Cormorant Garamond', Georgia, serif;
  --corps: 'DM Sans', system-ui, sans-serif;
  --rayon: 16px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta-fonce); }

.conteneur { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ─── En-tête ─────────────────────────────────────────── */
.entete { padding: 18px 0; background: var(--ivoire); border-bottom: 1px solid var(--filet); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--olive-fonce); }
.marque img { width: 28px; height: 28px; flex: none; }
.marque span { font-family: var(--titre); font-size: 25px; font-weight: 600; letter-spacing: .02em; }
.nav { display: flex; gap: 22px; font-size: 15px; }
.nav a { text-decoration: none; color: var(--texte-doux); font-weight: 500; }
.nav a:hover { color: var(--terracotta-fonce); }

/* ─── Accueil ─────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; padding: 92px 0 84px; text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(184,104,79,.20), transparent 42%),
    radial-gradient(circle at 88% 78%, rgba(125,117,91,.24), transparent 46%),
    linear-gradient(180deg, var(--sable-pale), var(--ivoire));
}
.hero .feuille { position: absolute; width: 180px; opacity: .55; pointer-events: none; }
.hero .feuille.gauche { left: -40px; bottom: -30px; transform: rotate(-24deg); }
.hero .feuille.droite { right: -30px; top: 30px; transform: rotate(150deg) scale(.8); }
.sur-titre {
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terracotta-fonce); font-weight: 600; margin: 0 0 18px;
}
.hero h1, .espace-hero h1 {
  font-family: var(--titre); font-weight: 500; line-height: 1.08; color: var(--olive-fonce);
  font-size: clamp(42px, 8vw, 78px); margin: 0 0 26px; letter-spacing: -.005em;
}
.hero h1 em { font-style: italic; color: var(--terracotta); }
.hero h1 { font-size: clamp(48px, 10vw, 96px); line-height: 1.02; }
.hero h1 .h1-petit { display: block; font-size: .42em; line-height: 1.2; margin-bottom: .12em; color: var(--texte-doux); }
.filet-dore { width: 72px; height: 2px; background: var(--terracotta); margin: 0 auto 28px; border: 0; border-radius: 2px; }
.chapo { position: relative; max-width: 640px; margin: 0 auto; font-size: 19px; color: var(--texte-doux); text-wrap: balance; }
/* Lignes équilibrées : pas de mot seul sur la dernière ligne des textes centrés. */
h1, h2, h3, .mot-fin p, .parcours .sous { text-wrap: balance; }
/* Les textes courants sont justifiés, avec la coupure des mots pour éviter
   les grands blancs ; la dernière ligne des textes centrés reste centrée. */
.chapo, .objectifs p, .espace-hero .intro p, .section .section-intro, .paragraphe,
.module-intro, .module-texte p, .module-texte li, .bloc p, .note, .modele p {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty;
}
.chapo { text-align-last: center; }

.objectifs { padding: 64px 0 72px; }
.objectifs-boite {
  display: grid; gap: 28px; grid-template-columns: 1fr 1.3fr; align-items: center;
  background: var(--olive); color: #FFFDF9; border-radius: var(--rayon);
  padding: 44px clamp(22px, 5vw, 56px); max-width: 960px; margin: 0 auto;
}
.objectifs h2 { font-family: var(--titre); font-weight: 500; font-size: 38px; line-height: 1.1; margin: 0; }
.objectifs ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 12px; }
.objectifs li { display: flex; gap: 14px; align-items: baseline; font-size: 18px; }
.objectifs li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sable); flex: none; transform: translateY(-2px); }
.objectifs p { margin: 0; color: #F1EDE2; }

.parcours { padding: 8px 0 88px; }
.parcours h2, .section h2 {
  font-family: var(--titre); font-weight: 500; font-size: clamp(32px, 5vw, 42px);
  margin: 0 0 8px; text-align: center; color: var(--olive-fonce);
}
.parcours .sous { text-align: center; color: var(--texte-doux); margin: 0 0 40px; }
.grille-parcours { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.carte-parcours {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--rayon);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.carte-parcours:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -20px rgba(97,90,68,.55); }
.carte-parcours .bandeau { position: relative; padding: 26px 26px 22px; color: #FFFDF9; background: var(--couleur, var(--terracotta)); }
.carte-parcours .etiquette { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: .92; }
.carte-parcours h3 { font-family: var(--titre); font-size: 31px; font-weight: 600; margin: 6px 0 0; line-height: 1.12; }
.carte-parcours .cadenas { position: absolute; top: 22px; right: 22px; width: 20px; height: 20px; opacity: .85; }
.carte-parcours .corps { padding: 22px 26px 24px; display: flex; flex-direction: column; flex: 1; }
.carte-parcours p { margin: 0; color: var(--texte-doux); flex: 1; }
.carte-parcours .aller { margin-top: 18px; font-weight: 600; color: var(--couleur-texte, var(--terracotta-fonce)); }
.c-clients { --couleur: var(--terracotta); --couleur-texte: var(--terracotta-fonce); }
.c-niveau1 { --couleur: var(--olive); --couleur-texte: var(--olive-fonce); }
/* Doré assez profond pour que le texte blanc reste lisible dessus. */
.c-niveau2 { --couleur: var(--or); --couleur-texte: var(--or-fonce); }

.mot-fin { padding: 72px 0; text-align: center; background: var(--terracotta); color: #FFFDF9; }
.mot-fin p { font-family: var(--titre); font-style: italic; font-size: clamp(26px, 4vw, 36px); line-height: 1.3; max-width: 720px; margin: 0 auto; }

.pied { padding: 26px 0; font-size: 14px; color: var(--texte-doux); background: var(--sable-pale); }
.pied .conteneur { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pied a { color: var(--texte-doux); }

/* ─── Écran du mot de passe ───────────────────────────── */
.porte {
  min-height: calc(100vh - 150px); display: grid; place-items: center; padding: 48px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(184,104,79,.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(125,117,91,.2), transparent 45%);
}
.porte-boite {
  width: 100%; max-width: 440px; background: var(--blanc); border: 1px solid var(--filet);
  border-top: 6px solid var(--couleur, var(--terracotta));
  border-radius: var(--rayon); padding: 40px 32px; text-align: center;
  box-shadow: 0 20px 40px -28px rgba(97,90,68,.5);
}
.porte-boite h1 { font-family: var(--titre); font-weight: 500; font-size: 36px; margin: 0 0 10px; line-height: 1.15; color: var(--olive-fonce); }
.porte-boite p { color: var(--texte-doux); margin: 0 0 26px; }
.porte-boite form { display: grid; gap: 12px; }
.porte-boite input {
  font: inherit; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--filet);
  background: var(--ivoire); color: var(--texte); text-align: center;
}
.porte-boite input:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: var(--terracotta); }
.bouton {
  font: inherit; font-weight: 600; border: 0; border-radius: 10px; padding: 14px 20px; cursor: pointer;
  background: var(--terracotta-fonce); color: #fff; transition: background .2s;
}
.bouton:hover { background: #84452F; }
.bouton:disabled { opacity: .6; cursor: wait; }
.erreur { color: #9A3B2C; font-size: 15px; min-height: 1.4em; margin: 4px 0 0 !important; }

/* ─── Espace de formation ─────────────────────────────── */
.espace-hero { padding: 64px 0 44px; text-align: center; background: var(--couleur, var(--terracotta)); color: #FFFDF9; }
.espace-hero .sur-titre { color: #FFFDF9; opacity: .9; }
.espace-hero h1 { color: #FFFDF9; }
.espace-hero .filet-dore { background: var(--sable); }
.espace-hero .intro { max-width: 720px; margin: 0 auto; text-align: left; color: #FBF5EC; }
.espace-hero .intro p { margin: 0 0 14px; }

.sommaire { position: sticky; top: 0; z-index: 5; background: rgba(250,246,239,.95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--filet); }
.sommaire .conteneur { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.sommaire .conteneur::-webkit-scrollbar { display: none; }
/* Sur ordinateur, tous les chapitres restent visibles : ils passent à la ligne
   au lieu de filer hors de l'écran (sans barre de défilement, on ne pouvait pas
   les atteindre à la souris). Sur téléphone, on les fait glisser du doigt. */
@media (min-width: 701px) {
  .sommaire .conteneur { flex-wrap: wrap; overflow-x: visible; }
}
.sommaire a {
  flex: none; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--olive-fonce);
  padding: 7px 14px; border-radius: 999px; background: var(--olive-pale); white-space: nowrap;
}
.sommaire a:hover { background: var(--terracotta-pale); color: var(--terracotta-fonce); }

.section { padding: 56px 0 8px; scroll-margin-top: 64px; }
.section h2 { text-align: left; display: flex; align-items: center; gap: 14px; }
.section h2::before { content: ''; width: 28px; height: 3px; border-radius: 3px; background: var(--terracotta); flex: none; }
.section:nth-of-type(even) h2::before { background: var(--olive); }
.section .section-intro { color: var(--texte-doux); max-width: 720px; margin: 0 0 24px; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: 22px; }
.carte {
  display: flex; flex-direction: column; gap: 6px; text-align: left; font: inherit; color: inherit;
  background: var(--blanc); border: 1px solid var(--filet); border-left: 4px solid var(--accent, var(--terracotta));
  border-radius: 12px; padding: 18px 18px 16px;
  text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.carte:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(97,90,68,.6); }
.carte.t-video { --accent: var(--terracotta); --accent-texte: var(--terracotta-fonce); }
.carte.t-quiz { --accent: var(--dore); --accent-texte: #8A6E3A; }
.carte.t-doc { --accent: var(--olive); --accent-texte: var(--olive-fonce); }
.carte.t-lien { --accent: var(--sauge); --accent-texte: #56684F; }
.carte .type { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-texte); font-weight: 600; }
.carte .type svg { width: 15px; height: 15px; }
.carte strong { font-family: var(--titre); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--olive-fonce); }
.carte span.texte { font-size: 15px; color: var(--texte-doux); }
.carte.inactive { cursor: default; opacity: .6; }
.carte.inactive:hover { transform: none; box-shadow: none; }
.carte.t-module { --accent: var(--olive); --accent-texte: var(--olive-fonce); }
.carte.t-audio { --accent: var(--or); --accent-texte: var(--or-fonce); }

.groupe { margin-top: 36px; }
.groupe h3 { font-family: var(--titre); font-weight: 600; font-size: 27px; margin: 0 0 6px; color: var(--terracotta-fonce); }
.groupe h4 { font-family: var(--titre); font-weight: 600; font-size: 22px; margin: 0 0 4px; color: var(--olive-fonce); }
.groupe .groupe { margin-top: 26px; }
.paragraphe { max-width: 760px; margin: 0 0 14px; }
.etapes { max-width: 780px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: etape; display: grid; gap: 10px; }
.etapes li { counter-increment: etape; position: relative; padding: 14px 16px 14px 58px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; }
.etapes li::before {
  content: counter(etape); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--couleur, var(--terracotta)); color: #fff; font-weight: 600; font-size: 14px; display: grid; place-items: center;
}
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pastille {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 15px; color: var(--texte);
  background: var(--blanc); border: 1px solid var(--filet); border-radius: 999px; padding: 7px 14px 7px 10px;
  text-decoration: none; cursor: pointer; transition: border-color .2s, background .2s;
}
.pastille:hover { border-color: var(--terracotta); background: var(--terracotta-pale); }
.pastille .puce { display: inline-flex; width: 16px; height: 16px; color: var(--terracotta); }
.pastille .puce svg { width: 16px; height: 16px; }
.pastille.inactive { cursor: default; opacity: .55; }
.pastille.inactive:hover { border-color: var(--filet); background: var(--blanc); }
/* ─── Vignettes (ateliers, documents) ─────────────────── */
.pastilles.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.pastille.vignette {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  border-radius: 12px; background: var(--blanc); border: 1px solid var(--filet); text-align: left;
  transition: transform .2s, box-shadow .2s;
}
.pastille.vignette:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(83,93,67,.6); background: var(--blanc); border-color: var(--filet); }
.vignette-titre { padding: 10px 12px 12px; font-size: 15px; line-height: 1.35; color: var(--texte); font-weight: 500; }
.visuel { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sable-pale); }
.visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel-fond { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,253,249,.92); }
.visuel-fond svg { width: 34px; height: 34px; }
.v-video .visuel-fond { background: linear-gradient(135deg, #C98670, var(--terracotta)); }
.v-doc .visuel-fond, .v-module .visuel-fond { background: linear-gradient(135deg, #8E9A77, var(--olive)); }
.v-lien .visuel-fond, .v-audio .visuel-fond, .v-quiz .visuel-fond { background: linear-gradient(135deg, #C4A36E, var(--or)); }
.lecture { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(184,104,79,.92); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); }
.lecture svg { width: 22px; height: 22px; margin-left: 2px; }
.carte.avec-image { padding-top: 0; overflow: hidden; }
.carte.avec-image .visuel { margin: 0 -18px 10px; }
@media (max-width: 640px) {
  .pastilles.vignettes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .vignette-titre { font-size: 14px; padding: 8px 10px 10px; }
}

/* ─── Modules et QCM ──────────────────────────────────── */
.progression { margin: 24px 0 14px; max-width: 520px; }
.progression-texte { color: var(--texte-doux); margin-bottom: 6px; }
.progression-texte strong { color: var(--olive-fonce); font-size: 20px; }
.progression-barre, .qcm-barre { height: 8px; border-radius: 99px; background: var(--olive-pale); overflow: hidden; }
.progression-barre span, .qcm-barre span { display: block; height: 100%; background: var(--olive); border-radius: 99px; transition: width .4s; }
.grille-modules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.module-carte { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px; text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.module-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -18px rgba(83,93,67,.6); }
.module-numero { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--olive); color: #fff; font-family: var(--titre); font-size: 22px; font-weight: 600; }
.module-carte.valide .module-numero { background: var(--terracotta); }
.module-corps { display: grid; gap: 2px; }
.module-corps strong { font-family: var(--titre); font-size: 21px; font-weight: 600; color: var(--olive-fonce); line-height: 1.2; }
.etat { font-size: 14px; color: var(--texte-doux); }
.etat.ok { color: var(--terracotta-fonce); font-weight: 600; }
.certificat { margin-top: 22px; padding: 20px 22px; border-radius: 14px; background: var(--sable-pale); max-width: 720px; }
.certificat h3 { margin: 0 0 6px; font-family: var(--titre); font-size: 24px; color: var(--terracotta-fonce); }
.certificat p { margin: 0 0 12px; color: var(--texte-doux); }
.certificat.verrouille { opacity: .75; }
.certificat-form { display: flex; gap: 10px; flex-wrap: wrap; }
.certificat-form input { flex: 1 1 220px; font: inherit; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--filet); background: var(--blanc); }

.module-page { padding-top: 32px; padding-bottom: 64px; max-width: 860px; }
.module-page h1 { font-family: var(--titre); font-weight: 500; color: var(--olive-fonce); font-size: clamp(36px, 6vw, 54px); margin: 0 0 18px; line-height: 1.1; }
.module-page h2 { font-family: var(--titre); font-weight: 500; color: var(--olive-fonce); font-size: 32px; margin: 40px 0 10px; }
.module-page .sur-titre { margin-bottom: 8px; }
.retour { display: inline-block; margin-bottom: 22px; color: var(--terracotta-fonce); font-weight: 500; text-decoration: none; }
.module-intro { font-size: 19px; color: var(--texte-doux); white-space: pre-line; }
.module-texte { margin: 26px 0; }
.module-texte h3 { font-family: var(--titre); font-size: 27px; font-weight: 600; color: var(--terracotta-fonce); margin: 0 0 8px; }
.module-texte p { margin: 0 0 10px; }
.module-tableau { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; overflow: hidden; font-size: 15px; }
.module-tableau thead th { background: var(--olive); color: #fff; text-align: left; padding: 10px 14px; font-weight: 600; }
.module-tableau tbody th { text-align: left; vertical-align: top; padding: 12px 14px; color: var(--terracotta-fonce); font-family: var(--titre); font-size: 19px; font-weight: 600; width: 22%; }
.module-tableau td { vertical-align: top; padding: 12px 14px; }
.module-tableau tbody tr:nth-child(even) { background: var(--ivoire); }
.module-tableau tbody tr + tr > * { border-top: 1px solid var(--filet); }
@media (max-width: 700px) {
  .module-tableau thead { display: none; }
  .module-tableau, .module-tableau tbody, .module-tableau tr, .module-tableau th, .module-tableau td { display: block; width: auto; }
  .module-tableau tbody th { padding-bottom: 4px; width: auto; }
  .module-tableau tbody tr + tr > * { border-top: 0; }
  .module-tableau tbody tr + tr { border-top: 1px solid var(--filet); }
  .module-tableau td { padding-top: 4px; }
  .module-tableau td::before { content: attr(data-col) " : "; font-weight: 600; color: var(--olive-fonce); }
}
.module-texte ul { margin: 0 0 12px; padding-left: 22px; }
.module-texte li { margin: 0 0 6px; }
.module-texte li::marker { color: var(--terracotta); }
.module-figure img { cursor: zoom-in; }
.figure-titre { font-family: var(--titre); font-size: 22px; font-weight: 600; color: var(--olive-fonce); margin-bottom: 8px; }
.module-video { margin: 24px 0; }
.qcm { margin-top: 48px; padding: 28px clamp(18px, 4vw, 34px); background: var(--blanc); border: 1px solid var(--filet); border-top: 6px solid var(--olive); border-radius: 16px; }
.qcm h2 { margin-top: 0 !important; }
.qcm-compteur { margin: 0 0 6px; font-size: 14px; color: var(--texte-doux); }
.qcm-question { font-family: var(--titre); font-size: 26px; font-weight: 600; color: var(--olive-fonce); margin: 18px 0 6px; line-height: 1.25; }
.qcm-aide { margin: 0 0 6px; font-size: 14px; color: var(--texte-doux); }
.qcm-options { display: grid; gap: 10px; margin: 14px 0; }
.qcm-option { font: inherit; text-align: left; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--filet); background: var(--ivoire); color: var(--texte); cursor: pointer; transition: border-color .15s, background .15s; }
.qcm-option:hover:not(:disabled) { border-color: var(--olive); }
.qcm-option[aria-pressed="true"] { border-color: var(--olive); background: var(--olive-pale); font-weight: 500; }
.qcm-option:disabled { cursor: default; }
.qcm-option.bonne { border-color: #5E8A4F; background: #E5F0DF; color: #2F4A26; font-weight: 600; }
.qcm-option.fausse { border-color: #B8684F; background: var(--terracotta-pale); color: #84452F; text-decoration: line-through; }
.qcm-retour { min-height: 1.5em; margin: 6px 0 14px; padding: 0; }
.qcm-retour.ok, .qcm-retour.ko { padding: 12px 14px; border-radius: 10px; }
.qcm-retour.ok { background: #E5F0DF; color: #2F4A26; }
.qcm-retour.ko { background: var(--terracotta-pale); color: #84452F; }
.qcm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.qcm-score { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px; border-radius: 14px; margin-bottom: 18px; }
.qcm-score.ok { background: #E5F0DF; color: #2F4A26; }
.qcm-score.ko { background: var(--terracotta-pale); color: #84452F; }
.qcm-score-chiffre { font-family: var(--titre); font-size: 54px; font-weight: 600; line-height: 1; }
.qcm-correction h3 { font-family: var(--titre); font-size: 24px; color: var(--olive-fonce); margin: 0 0 10px; }
.qcm-erreur { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--filet); }
.qcm-erreur span { color: var(--texte-doux); }
.qcm-expl { font-size: 15px; }
.module-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; }
.bouton-secondaire { display: inline-block; padding: 12px 18px; border-radius: 10px; border: 1px solid var(--olive); color: var(--olive-fonce); text-decoration: none; font-weight: 500; }
.bouton-secondaire:hover { background: var(--olive-pale); }

.fiches { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 16px; }
.fiche { background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.fiche strong { font-family: var(--titre); font-size: 21px; font-weight: 600; color: var(--olive-fonce); line-height: 1.2; }
.fiche span { font-size: 15px; color: var(--texte-doux); }
/* ─── Les kits : bandeau et flacons ───────────────────── */
.kit-bandeau {
  display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 26px; align-items: center;
  margin: 14px 0 18px; padding: 20px; border-radius: 18px;
  background: linear-gradient(135deg, var(--sable-pale), var(--blanc) 70%); border: 1px solid var(--filet);
}
.kit-bandeau.sans-photo { grid-template-columns: 1fr; }
.kit-photo { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; background: #fff; overflow: hidden; }
.kit-photo img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.kit-photo.eventail { display: flex; justify-content: center; align-items: flex-end; padding: 14px 10px 6px; }
.kit-photo.eventail img { position: static; width: auto; height: 74%; margin: 0 -16px; }
.kit-photo.eventail img:nth-child(odd) { transform: translateY(-6px); }
.kit-accroche { margin: 0 0 6px; font-family: var(--titre); font-size: 23px; line-height: 1.3; color: var(--olive-fonce); text-wrap: balance; }
.kit-compte { margin: 0 0 14px; font-size: 14px; color: var(--texte-doux); }
.kit-liens { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-lien {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  padding: 7px 14px 7px 10px; border-radius: 999px; text-decoration: none;
  background: var(--blanc); color: var(--terracotta-fonce); border: 1px solid var(--terracotta);
}
.kit-lien:hover { background: var(--terracotta-pale); }
.kit-lien .puce { display: inline-flex; width: 16px; height: 16px; }

.flacons { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-top: 6px; }
.flacon {
  display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet);
  border-radius: 16px; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.flacon:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(83,93,67,.55); }
.flacon-photo {
  height: 170px; display: grid; place-items: center; padding: 14px 0 8px;
  background: radial-gradient(circle at 50% 62%, #fff 0 34%, var(--sable-pale) 72%);
}
.flacon-photo img { height: 148px; width: auto; max-width: 88%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(60,50,30,.18)); }
.flacon-photo img.sans-photo { height: 58px; opacity: .55; filter: none; }
.flacon-corps { padding: 12px 16px 16px; display: grid; gap: 8px; align-content: start; }
.flacon h5 { margin: 0; font-family: var(--titre); font-size: 22px; font-weight: 600; line-height: 1.15; color: var(--olive-fonce); }
.flacon p { margin: 0; font-size: 15px; color: var(--texte-doux); }
.flacon .flacon-compo { font-size: 13.5px; }
.flacon .flacon-compo span { font-weight: 600; color: var(--texte); }
.etiquettes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.etiquettes li { font-size: 13px; line-height: 1.3; padding: 4px 9px; border-radius: 999px; background: var(--olive-pale); color: var(--olive-fonce); }
.etiquettes li::first-letter { text-transform: uppercase; }

@media (max-width: 700px) {
  .kit-bandeau { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .kit-accroche { font-size: 21px; }
  .flacons { grid-template-columns: 1fr; gap: 10px; }
  .flacon { flex-direction: row; }
  .flacon:hover { transform: none; }
  .flacon-photo { flex: none; width: 96px; height: auto; min-height: 120px; padding: 10px 0; }
  .flacon-photo img { height: 100px; }
  .flacon-corps { padding: 12px 14px; }
  .flacon h5 { font-size: 20px; }
}

.bloc { background: var(--blanc); border: 1px solid var(--filet); border-radius: 12px; margin-top: 10px; max-width: 860px; }
.bloc summary { cursor: pointer; padding: 14px 18px; font-weight: 600; color: var(--olive-fonce); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bloc summary::-webkit-details-marker { display: none; }
.bloc summary::after { content: '+'; color: var(--terracotta); font-size: 20px; line-height: 1; }
.bloc[open] summary::after { content: '–'; }
.bloc p { margin: 0 18px 12px; color: var(--texte); font-size: 16px; }
.modele { background: var(--sable-pale); border-radius: 14px; padding: 20px 22px; margin-top: 16px; max-width: 820px; }
.modele-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.modele-haut strong { font-family: var(--titre); font-size: 22px; color: var(--terracotta-fonce); }
.modele p { margin: 0 0 8px; }
.copier { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--terracotta); color: var(--terracotta-fonce); background: var(--blanc); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.copier:hover { background: var(--terracotta-pale); }
.note { max-width: 820px; margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--or); background: var(--blanc); border-radius: 0 10px 10px 0; font-size: 15px; color: var(--texte-doux); }
.recherche {
  width: 100%; max-width: 480px; font: inherit; padding: 12px 16px; margin: 14px 0 4px;
  border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc); color: var(--texte);
}
.recherche:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.figure { margin: 18px 0 0; max-width: 860px; }
.figure img { width: 100%; border-radius: 12px; border: 1px solid var(--filet); background: #fff; }
.figure figcaption { font-size: 14px; color: var(--texte-doux); margin-top: 6px; }

.bientot { margin-top: 18px; padding: 18px 20px; background: var(--sable-pale); border-radius: 12px; color: var(--texte-doux); font-size: 15px; }

/* ─── Le chemin (niveau 2) : étapes et parties repliées ─── */
.chemin-section { padding-top: 40px; }
.chemin { display: grid; gap: 18px; }
.chevron {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--couleur, var(--terracotta)); transition: transform .25s;
}
.chevron::before {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg);
}
details[open] > summary .chevron { transform: rotate(180deg); }

.etape { background: var(--blanc); border: 1px solid var(--filet); border-radius: 20px; overflow: hidden; scroll-margin-top: 70px; }
.etape > summary { list-style: none; cursor: pointer; }
.etape > summary::-webkit-details-marker { display: none; }
.etape-carte { display: grid; grid-template-columns: minmax(220px, 34%) 1fr; align-items: stretch; }
.etape-photo { position: relative; min-height: 190px; background: var(--sable-pale); overflow: hidden; }
.etape-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.etape-carte:hover .etape-photo img { transform: scale(1.04); }
.etape-texte { display: grid; align-content: center; gap: 6px; padding: 22px 28px; }
.etape-numero { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--couleur-texte, var(--terracotta-fonce)); }
.etape-texte strong { font-family: var(--titre); font-size: 31px; font-weight: 600; line-height: 1.1; color: var(--olive-fonce); }
.etape-accroche { color: var(--texte-doux); font-size: 16px; max-width: 560px; }
.etape-ouvrir { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--couleur-texte, var(--terracotta-fonce)); }
.etape .si-ouvert, .etape[open] .si-ferme { display: none; }
.etape[open] .si-ouvert { display: inline; }
.etape[open] { box-shadow: 0 18px 40px -30px rgba(83,93,67,.6); }
.etape-corps { padding: 6px 28px 26px; display: grid; gap: 10px; border-top: 1px solid var(--filet); background: var(--ivoire); }
.etape-corps > :first-child { margin-top: 20px; }
.etape-corps.etape-directe { display: block; padding-bottom: 28px; }
/* La lignée : de gauche à droite, de ta marraine jusqu'à la plus haute upline */
.lignee { list-style: none; margin: 22px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr)); gap: 0 4px; }
.lignee li { position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 8px; }
.lignee li::before { content: ''; position: absolute; top: 37px; left: calc(-50% + 40px); right: calc(50% + 40px); height: 2px; background: linear-gradient(90deg, var(--sable), var(--or)); }
.lignee li:first-child::before { display: none; }
.lignee li:nth-child(2)::before { background: repeating-linear-gradient(90deg, var(--or) 0 5px, transparent 5px 9px); }
.lignee-photo { width: 76px; height: 76px; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, var(--sable-pale), var(--or)); box-shadow: 0 8px 18px -12px rgba(60,50,30,.6); }
.lignee-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #fff; }
.lignee li.moi .lignee-photo { background: linear-gradient(135deg, var(--terracotta), var(--or)); }
.lignee-texte { display: grid; gap: 1px; line-height: 1.25; }
.lignee-texte strong { font-family: var(--titre); font-size: 17px; font-weight: 600; color: var(--olive-fonce); }
.lignee-rang { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--or-fonce); font-weight: 600; }
.lignee li.sans-photo .lignee-photo img { object-fit: contain; padding: 16px; background: var(--ivoire); }
.lignee-mot { font-size: 12.5px; font-style: italic; color: var(--texte-doux); }
.lignee li.moi .lignee-mot { color: var(--terracotta-fonce); font-weight: 500; }
.lignee-texte a { font-size: 11.5px; color: var(--terracotta-fonce); text-decoration: none; word-break: break-all; }
.lignee-texte a:hover { text-decoration: underline; }
.lignee-sens { text-align: center; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-fonce); font-weight: 600; margin: 14px 0 0; }
@media (min-width: 701px) and (max-width: 1000px) { .lignee { --n: 5 !important; row-gap: 22px; } }
@media (max-width: 700px) {
  .lignee { grid-template-columns: 1fr; gap: 0; padding-left: 4px; }
  .lignee li { grid-template-columns: 78px 1fr; justify-items: start; text-align: left; align-items: center; gap: 14px; padding: 6px 0; }
  .lignee li::before { top: -16px; left: 38px; right: auto; width: 2px; height: 28px; }
  .lignee li:nth-child(2)::before { background: repeating-linear-gradient(180deg, var(--or) 0 5px, transparent 5px 9px); }
}

/* Les grandes parties du chemin */
.chemin-partie { text-align: center; margin: 26px 0 4px; scroll-margin-top: 130px; }
.chemin-partie:first-child { margin-top: 0; }
.chemin-partie-sur { display: block; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--couleur-texte, var(--terracotta-fonce)); }
.chemin-partie h2 { display: block; text-align: center; margin: 4px 0 6px; font-family: var(--titre); font-size: clamp(30px, 4vw, 40px); font-weight: 600; color: var(--olive-fonce); }
.chemin-partie h2::before { display: none; }
.chemin-partie p { margin: 0 auto; max-width: 620px; color: var(--texte-doux); text-wrap: balance; }

/* Des façons de faire, côte à côte */
.voies { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.voie { background: var(--blanc); border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; }
.voie[open] { grid-column: 1 / -1; }
.voie > summary { list-style: none; cursor: pointer; display: grid; }
.voie > summary::-webkit-details-marker { display: none; }
.voie-photo { position: relative; aspect-ratio: 16 / 7; background: var(--sable-pale); overflow: hidden; }
.voie-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.voie-texte { display: grid; gap: 4px; padding: 14px 18px 16px; }
.voie-texte strong { font-family: var(--titre); font-size: 25px; font-weight: 600; color: var(--terracotta-fonce); line-height: 1.15; }
.voie-texte > span:not(.etape-ouvrir) { color: var(--texte-doux); font-size: 15px; }
.voie[open] .voie-photo { aspect-ratio: 16 / 4; }
.voie-corps { display: grid; gap: 10px; padding: 4px 16px 18px; border-top: 1px solid var(--filet); background: var(--ivoire); }
.voie-corps > :first-child { margin-top: 14px; }
@media (max-width: 700px) { .voies { grid-template-columns: 1fr; } }

.chemin-annexe { margin: 26px 0 -4px; font-family: var(--titre); font-size: 24px; color: var(--texte-doux); text-align: center; }
.etape.annexe { border-style: dashed; }

.partie { background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px; scroll-margin-top: 80px; }
.partie > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 15px 18px; font-family: var(--titre); font-size: 23px; font-weight: 600; line-height: 1.2; color: var(--terracotta-fonce);
}
.partie > summary::-webkit-details-marker { display: none; }
.partie > summary:hover { background: var(--sable-pale); border-radius: 14px; }
.partie[open] > summary { border-bottom: 1px solid var(--filet); border-radius: 14px 14px 0 0; }
.partie-corps { padding: 4px 18px 20px; }
.partie-corps > .section-intro:first-child, .partie-corps > .etapes:first-child, .partie-corps > .grille:first-child { margin-top: 16px; }

@media (max-width: 700px) {
  .etape-carte { grid-template-columns: 1fr; }
  .etape-photo { min-height: 150px; }
  .etape-texte { padding: 16px 18px 18px; }
  .etape-texte strong { font-size: 26px; }
  .etape-corps { padding: 4px 12px 16px; }
  .partie > summary { font-size: 20px; padding: 13px 14px; }
  .partie-corps { padding: 4px 12px 16px; }
}

/* ─── L'application ───────────────────────────────────── */
.appli { position: relative; display: flex; gap: 16px; align-items: flex-start; margin: 26px 0 0; padding: 18px 46px 18px 18px; border-radius: 16px; background: var(--blanc); border: 1px solid var(--filet); box-shadow: 0 14px 30px -26px rgba(83,93,67,.7); }
.appli img { flex: none; border-radius: 14px; box-shadow: 0 6px 14px -8px rgba(60,50,30,.5); }
.appli-texte { display: grid; gap: 6px; }
.appli-texte strong { font-family: var(--titre); font-size: 22px; font-weight: 600; color: var(--olive-fonce); }
.appli-texte p { margin: 0; font-size: 15px; color: var(--texte-doux); }
.appli-texte .bouton { justify-self: start; margin-top: 4px; }
.appli-texte .bouton[hidden] { display: none; }
.appli-fermer { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--texte-doux); cursor: pointer; padding: 4px 8px; }
.hors-ligne .espace-hero::after { content: 'Hors connexion : tu lis la dernière version enregistrée. Les vidéos et les documents demandent internet.'; display: block; margin: 18px auto 0; max-width: 640px; font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.18); }
.pied-liens a { white-space: nowrap; }
@media (display-mode: standalone) { .entete { padding-top: max(18px, env(safe-area-inset-top)); } }

/* ─── Bouton « remonter en haut » ──────────────────────── */
.haut-de-page {
  position: fixed; right: 22px; bottom: 22px; z-index: 15; width: 50px; height: 50px; border-radius: 50%;
  border: 0; cursor: pointer; display: grid; place-items: center; color: #fff;
  background: var(--couleur, var(--terracotta)); box-shadow: 0 10px 24px -10px rgba(60,50,30,.6);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s;
}
.haut-de-page.visible { opacity: 1; transform: none; pointer-events: auto; }
.haut-de-page:hover { filter: brightness(.92); }
.haut-de-page svg { width: 24px; height: 24px; }
@media (max-width: 700px) { .haut-de-page { right: 14px; bottom: 14px; width: 44px; height: 44px; } }

/* ─── Lecteur vidéo ───────────────────────────────────── */
.lecteur { position: fixed; inset: 0; z-index: 20; background: rgba(40,36,26,.85); display: none; place-items: center; padding: 20px; }
.lecteur.ouvert { display: grid; }
.lecteur-boite { width: 100%; max-width: 960px; }
.lecteur-haut { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; margin-bottom: 10px; }
.lecteur-haut strong { font-family: var(--titre); font-size: 24px; font-weight: 500; }
.lecteur-haut button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.cadre-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.cadre-video.document { aspect-ratio: auto; height: min(82vh, 1100px); background: #fff; }
.lecteur-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lecteur-actions a { color: #fff; font-size: 14px; text-decoration: underline; }
.lecteur-actions a[hidden] { display: none; }
.cadre-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
  .objectifs-boite { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .conteneur { padding: 0 16px; }
  .nav { display: none; }
  .hero { padding: 60px 0 52px; }
  .hero .feuille { width: 110px; opacity: .3; }
  .hero .feuille.gauche { left: -50px; bottom: -40px; }
  .chapo { font-size: 17px; }
  .objectifs-boite { padding: 28px 20px; }
  .porte-boite { padding: 32px 20px; }
}

.qcm-date { font-size: 14px; font-weight: 600; letter-spacing: .04em; }


.mentions h1 { font-family: var(--titre); font-weight: 500; font-size: clamp(36px, 6vw, 52px); color: var(--olive-fonce); margin: 0 0 10px; }
.mentions h2 { margin-top: 30px; font-size: 26px; }
.mentions p { max-width: 760px; }
.pied .conteneur { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }


/* Pourquoi dōTERRA : trois piliers */
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.pilier { background: var(--blanc); border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.pilier img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.pilier-corps { padding: 14px 18px 18px; display: grid; gap: 8px; align-content: start; flex: 1; }
.pilier-corps h4 { margin: 0; font-family: var(--titre); font-size: 23px; font-weight: 600; color: var(--olive-fonce); line-height: 1.2; }
.pilier-corps p { margin: 0; font-size: 15px; color: var(--texte-doux); }
.pilier-corps .kit-lien { justify-self: start; margin-top: 4px; }
@media (max-width: 860px) { .piliers { grid-template-columns: 1fr; } }


/* ─── Installer l'application (page d'accueil) ─────────── */
.installer { padding: 64px 0; background: var(--sable-pale); scroll-margin-top: 20px; }
.installer h2 { margin: 0 0 8px; text-align: center; font-family: var(--titre); font-weight: 500; font-size: clamp(30px, 4.5vw, 40px); color: var(--olive-fonce); }
.installer .sous { text-align: center; color: var(--texte-doux); margin: 0 auto 26px; max-width: 620px; text-wrap: balance; }
.installer-onglets { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.installer-onglets button { font: inherit; font-weight: 600; font-size: 15px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--terracotta); background: var(--blanc); color: var(--terracotta-fonce); cursor: pointer; }
.installer-onglets button[aria-selected="true"] { background: var(--terracotta); color: #fff; }
.installer-pas { list-style: none; counter-reset: pas; margin: 0 auto; padding: 0; max-width: 680px; display: grid; gap: 10px; }
.installer-pas li { counter-increment: pas; position: relative; display: grid; gap: 3px; padding: 14px 18px 14px 64px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 14px; }
.installer-pas li::before { content: counter(pas); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--terracotta); color: #fff; font-weight: 600; }
.installer-pas strong { font-family: var(--titre); font-size: 21px; font-weight: 600; color: var(--olive-fonce); }
.installer-pas span { color: var(--texte-doux); font-size: 15.5px; }
.icone-ios { width: 22px; height: 22px; vertical-align: -5px; color: #0A84FF; margin: 0 2px; }
.installer-note { max-width: 680px; margin: 18px auto 0; text-align: center; font-size: 14px; color: var(--texte-doux); }

.appli-aide { font-size: 14px; font-weight: 600; color: var(--terracotta-fonce); }

.installer-pas[hidden], .installer[hidden] { display: none; }