/* =========================================================
   Bérénice Boutareaud — Espace membre et administration
   Design system

   Mêmes fondations que le site public (css/style.css) : terracotta sur
   crème, Cormorant Garamond pour les titres, Jost pour le courant, filets
   fins, angles à peine adoucis. Un espace de travail ne doit pas ressembler
   à un tableau de bord générique posé à côté du site — il doit ressembler
   au site.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --cream:        #faf5ec;
  --cream-deep:   #f1e6d3;
  --sand:         #e4d3ba;
  --terracotta:   #ab5140;
  --terracotta-d: #8a3f31;
  --terracotta-l: #c97b5f;
  --gold:         #b08968;
  --charcoal:     #2b2622;
  --charcoal-70:  rgba(43,38,34,.7);
  --charcoal-45:  rgba(43,38,34,.65);
  --line:         rgba(43,38,34,.12);
  --line-soft:    rgba(43,38,34,.07);
  --white:        #fffdfa;

  --vert:   #6c7f5e;
  --ambre:  #b8873f;
  --rouge:  #a8483c;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  --radius: 2px;
  --ease: cubic-bezier(.19,1,.22,1);
  --barre: 68px;      /* hauteur de la barre haute */
  --nav: 250px;       /* largeur de la navigation latérale */
}

*,*::before,*::after{ box-sizing:border-box; }

/* Un `display` déclaré dans une règle de classe l'emporte sur le [hidden] du
   navigateur : `.champ{display:block}` rendait visible un champ pourtant
   marqué caché. On tranche une fois pour toutes. */
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.7;
  color:var(--charcoal);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; letter-spacing:.01em; }
p{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }

.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--terracotta); font-weight:500;
}
.eyebrow::before{ content:''; width:30px; height:1px; background:var(--terracotta); }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--charcoal); color:var(--cream);
  padding:12px 20px; z-index:999;
}
.skip-link:focus{ left:0; }

/* =========================================================
   Voile de démarrage — le temps de vérifier la session
   ========================================================= */
.boot{
  position:fixed; inset:0; z-index:900;
  background:var(--cream);
  display:flex; align-items:center; justify-content:center;
}
.boot__in{ text-align:center; max-width:440px; padding:0 32px; }
.boot__spin{
  width:32px; height:32px; display:inline-block; border-radius:50%;
  border:1px solid var(--line); border-top-color:var(--terracotta);
  animation:tourne .9s linear infinite;
}
.boot__in p{ margin-top:20px; font-size:13.5px; color:var(--charcoal-45); letter-spacing:.04em; }
.boot--err .boot__spin{ display:none; }
.boot--err p{ color:var(--rouge); }
@keyframes tourne{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .boot__spin{ animation:none; } }

/* =========================================================
   Boutons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border:1px solid var(--charcoal); background:none;
  color:var(--charcoal); border-radius:var(--radius); cursor:pointer;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), opacity .3s;
  white-space:nowrap;
}
.btn:hover{ background:var(--charcoal); color:var(--cream); }
.btn.solid{ background:var(--terracotta); border-color:var(--terracotta); color:var(--white); }
.btn.solid:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.btn.ghost{ border-color:var(--line); color:var(--charcoal-70); }
.btn.ghost:hover{ background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); }
.btn.danger{ border-color:rgba(168,72,60,.4); color:var(--rouge); }
.btn.danger:hover{ background:var(--rouge); border-color:var(--rouge); color:var(--white); }
.btn.small{ padding:9px 16px; font-size:10px; letter-spacing:.18em; }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn svg{ width:15px; height:15px; flex:none; }

.lien{
  border:none; background:none; padding:0; cursor:pointer;
  font-size:12.5px; color:var(--terracotta); letter-spacing:.04em;
  border-bottom:1px solid rgba(171,81,64,.35); transition:border-color .4s var(--ease);
}
.lien:hover{ border-bottom-color:var(--terracotta); }

/* =========================================================
   Champs de formulaire
   ========================================================= */
.champ{ display:block; margin-bottom:20px; }
.champ > span{
  display:block; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--charcoal-45); margin-bottom:9px; font-weight:500;
}
.champ input, .champ select, .champ textarea{
  width:100%; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); font-size:14.5px; font-weight:300;
  transition:border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.champ textarea{ min-height:110px; resize:vertical; line-height:1.65; }
.champ input:focus, .champ select:focus, .champ textarea:focus{
  outline:none; border-color:var(--terracotta);
  box-shadow:0 0 0 3px rgba(171,81,64,.08);
}
.champ select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2622' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:16px;
  padding-right:40px;
}
.champ small{ display:block; margin-top:7px; font-size:12px; color:var(--charcoal-45); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.trio{ display:grid; grid-template-columns:1fr 2fr; gap:0 18px; }
@media (max-width:640px){ .duo,.trio{ grid-template-columns:1fr; } }

.erreur{
  border-left:2px solid var(--rouge); background:rgba(168,72,60,.05);
  padding:13px 16px; font-size:13.5px; color:var(--rouge); margin-bottom:22px;
}
.succes{
  border-left:2px solid var(--vert); background:rgba(108,127,94,.07);
  padding:13px 16px; font-size:13.5px; color:#4f6042; margin-bottom:22px;
}

/* =========================================================
   Page de connexion
   ========================================================= */
.auth{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.auth__visuel{
  position:relative; background:var(--charcoal);
  display:flex; align-items:flex-end; padding:56px;
}
.auth__visuel img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62;
}
.auth__visuel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,17,15,.85), rgba(20,17,15,.15));
}
.auth__mots{ position:relative; z-index:2; color:var(--cream); max-width:460px; }
.auth__mots .eyebrow{ color:var(--terracotta-l); }
.auth__mots .eyebrow::before{ background:var(--terracotta-l); }
.auth__mots h2{
  font-size:clamp(30px,3.2vw,46px); line-height:1.15; margin:20px 0 16px;
  font-weight:300; color:var(--cream);
}
.auth__mots p{ font-size:14.5px; color:rgba(250,245,236,.72); }
.auth__mots .retour{
  display:inline-block; margin-top:30px; font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(250,245,236,.75);
  border-bottom:1px solid rgba(250,245,236,.3); padding-bottom:4px;
}
.auth__mots .retour:hover{ color:var(--cream); border-bottom-color:var(--cream); }

.auth__panneau{
  display:flex; align-items:center; justify-content:center;
  padding:56px 40px; background:var(--cream);
}
.auth__boite{ width:100%; max-width:520px; }
.auth__logo{ display:flex; align-items:center; gap:13px; margin-bottom:40px; }
.auth__logo img{ width:42px; }
.auth__logo b{ font-family:var(--font-display); font-size:19px; font-weight:500; display:block; line-height:1.2; }
.auth__logo span{ font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--charcoal-45); }
.auth__boite h1{ font-size:clamp(28px,3vw,38px); font-weight:300; margin-bottom:10px; }
.auth__boite > p.intro{ font-size:14px; color:var(--charcoal-45); margin-bottom:34px; }

.onglets{ display:flex; gap:28px; border-bottom:1px solid var(--line); margin-bottom:32px; }
/* Sans cette règle, l'attribut hidden resterait sans effet : la déclaration
   display:flex ci-dessus, venant de la feuille d'auteur, l'emporte sur le
   [hidden]{display:none} du navigateur. */
.onglets[hidden]{ display:none; }
.onglets button{
  border:none; background:none; padding:0 0 14px; cursor:pointer;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:var(--charcoal-45); position:relative; transition:color .4s var(--ease);
}
.onglets button::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.onglets button.actif{ color:var(--charcoal); }
.onglets button.actif::after{ transform:scaleX(1); }

.volet{ display:none; }
.volet.actif{ display:block; animation:monte .6s var(--ease) both; }
@keyframes monte{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .volet.actif{ animation:none; } }

.aide-demo{
  margin-top:30px; padding:18px 20px; border:1px solid var(--line);
  background:var(--white); font-size:12.5px; color:var(--charcoal-45); line-height:1.75;
}
.aide-demo b{ color:var(--charcoal); font-weight:500; }
.aide-demo code{
  font-family:var(--font-body); background:var(--cream-deep);
  padding:1px 6px; font-size:12px; letter-spacing:.02em;
}

@media (max-width:900px){
  .auth{ grid-template-columns:1fr; }
  .auth__visuel{ min-height:240px; padding:32px; }
  .auth__panneau{ padding:44px 24px; }
}

/* =========================================================
   Coque de l'espace : barre haute + navigation latérale
   ========================================================= */
.barre{
  position:fixed; top:0; left:0; right:0; height:var(--barre); z-index:60;
  background:rgba(250,245,236,.94); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.barre__in{ height:100%; display:flex; align-items:center; gap:18px; padding:0 26px; }
.barre__logo{ display:flex; align-items:center; gap:11px; }
.barre__logo img{ width:34px; }
.barre__logo b{ font-family:var(--font-display); font-size:16.5px; font-weight:500; }
.barre__espace{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--terracotta); border:1px solid rgba(171,81,64,.3);
  padding:5px 11px; border-radius:var(--radius);
}
.barre__droite{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.barre__site{
  display:flex; align-items:center; gap:8px; font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--charcoal-45);
  transition:color .4s var(--ease);
}
.barre__site:hover{ color:var(--terracotta); }
.barre__moi{ display:flex; align-items:center; gap:11px; padding-left:14px; border-left:1px solid var(--line); }
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--terracotta); color:var(--white);
  font-size:12.5px; letter-spacing:.06em; font-weight:400;
}
.barre__moi b{ display:block; font-family:var(--font-body); font-size:13px; font-weight:400; line-height:1.35; }
.barre__moi small{ display:block; font-size:11px; color:var(--charcoal-45); }
.barre__sortie{
  border:1px solid var(--line); background:none; width:36px; height:36px;
  border-radius:var(--radius); cursor:pointer; color:var(--charcoal-45);
  display:flex; align-items:center; justify-content:center;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.barre__sortie:hover{ color:var(--terracotta); border-color:var(--terracotta); }
.barre__menu{ display:none; border:1px solid var(--line); background:none; width:36px; height:36px; cursor:pointer; }

.nav{
  position:fixed; top:var(--barre); bottom:0; left:0; width:var(--nav); z-index:50;
  background:var(--white); border-right:1px solid var(--line);
  padding:30px 0; overflow-y:auto;
}
.nav__titre{
  font-size:9.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--charcoal-45); padding:0 26px; margin:26px 0 12px;
}
.nav__titre:first-child{ margin-top:0; }
.nav a{
  display:flex; align-items:center; gap:13px; padding:12px 26px;
  font-size:13.5px; color:var(--charcoal-70); position:relative;
  transition:color .4s var(--ease), background .4s var(--ease);
}
.nav a svg{ width:16px; height:16px; flex:none; opacity:.75; }
.nav a::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--terracotta); transform:scaleY(0); transition:transform .45s var(--ease);
}
.nav a:hover{ color:var(--charcoal); background:var(--cream); }
.nav a.actif{ color:var(--terracotta); background:var(--cream); }
.nav a.actif::before{ transform:scaleY(1); }
.nav .pastille{
  margin-left:auto; min-width:20px; height:20px; padding:0 6px;
  display:flex; align-items:center; justify-content:center;
  background:var(--terracotta); color:var(--white); font-size:10.5px; border-radius:10px;
}
/* `display:flex` l'emporte sur le [hidden] par défaut du navigateur : sans
   cette ligne, une pastille vide reste une pastille visible. Le piège vaut
   pour tout élément à qui l'on donne un `display` explicite — d'où la règle
   générale plus bas. */
.nav .pastille[hidden]{ display:none; }

.zone{ margin-left:var(--nav); padding:calc(var(--barre) + 44px) 44px 90px; }
.vue{ display:none; }
.vue.actif{ display:block; animation:monte .55s var(--ease) both; }
@media (prefers-reduced-motion: reduce){ .vue.actif{ animation:none; } }

.tete{ margin-bottom:38px; }
.tete h1{ font-size:clamp(28px,3.4vw,42px); font-weight:300; margin:14px 0 8px; }
.tete p{ font-size:14.5px; color:var(--charcoal-45); max-width:70ch; }
.tete__ligne{ display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.tete__ligne .actions{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width:1024px){
  .nav{
    transform:translateX(-100%); transition:transform .5s var(--ease);
    box-shadow:0 0 60px rgba(43,38,34,.12);
  }
  .nav.ouverte{ transform:none; }
  .zone{ margin-left:0; padding:calc(var(--barre) + 32px) 24px 72px; }
  .barre__menu{ display:flex; align-items:center; justify-content:center; }
  .barre__moi b, .barre__moi small{ display:none; }
  .barre__site span{ display:none; }
}

/* =========================================================
   Cartes, panneaux, chiffres
   ========================================================= */
.grille{ display:grid; gap:22px; align-items:start; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){ .g4{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.carte{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px;
}
.carte--plat{ padding:0; overflow:hidden; }

.chiffre{ display:flex; align-items:flex-start; gap:16px; }
.chiffre .ic{
  width:44px; height:44px; flex:none; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--terracotta);
  background:var(--cream);
}
.chiffre .ic svg{ width:19px; height:19px; }
.chiffre .n{ font-family:var(--font-display); font-size:38px; line-height:1; font-weight:400; }
.chiffre .l{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--charcoal-45); margin-top:8px;
}

.panneau{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); }
.panneau > h3{
  display:flex; align-items:center; gap:11px;
  font-family:var(--font-body); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:500; color:var(--charcoal-45);
  padding:20px 26px; border-bottom:1px solid var(--line-soft); margin:0;
}
.panneau > h3 svg{ width:15px; height:15px; color:var(--terracotta); }
.panneau > h3 .fin{ margin-left:auto; text-transform:none; letter-spacing:.02em; font-size:12px; }
.panneau__corps{ padding:26px; }
.panneau__corps.serre{ padding:0; }

.vide{
  text-align:center; padding:52px 26px; color:var(--charcoal-45);
}
.vide svg{ width:34px; height:34px; opacity:.35; margin:0 auto 16px; }
.vide b{ display:block; font-family:var(--font-display); font-size:20px; font-weight:400; color:var(--charcoal); margin-bottom:6px; }
.vide p{ font-size:13.5px; max-width:44ch; margin:0 auto; }

/* =========================================================
   Listes et tableaux
   ========================================================= */
.tableau{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tableau th{
  text-align:left; font-weight:500; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--charcoal-45);
  padding:14px 20px; border-bottom:1px solid var(--line);
}
.tableau td{ padding:16px 20px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.tableau tr:last-child td{ border-bottom:none; }
.tableau tbody tr{ transition:background .3s var(--ease); }
.tableau tbody tr:hover{ background:var(--cream); }
.tableau .droite{ text-align:right; }
.tableau .actions{ display:flex; gap:8px; justify-content:flex-end; }
.tableau b{ font-weight:500; }
.tableau small{ display:block; color:var(--charcoal-45); font-size:12px; }
/* Un tableau à cinq ou six colonnes dans une colonne étroite se replie sur
   lui-même et devient illisible. On lui impose une largeur plancher : il
   défile horizontalement plutôt que de s'écraser. */
.tableau-enrobe{ overflow-x:auto; }
.tableau-enrobe .tableau{ min-width:720px; }

.personne{ display:flex; align-items:center; gap:12px; }
.personne .avatar{ width:34px; height:34px; font-size:11.5px; background:var(--cream-deep); color:var(--terracotta); }

/* =========================================================
   Badges et jauges
   ========================================================= */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:5px 11px; border:1px solid; border-radius:var(--radius); white-space:nowrap;
}
.badge--attente{ color:var(--ambre); border-color:rgba(184,135,63,.35); background:rgba(184,135,63,.06); }
.badge--ok{ color:var(--vert); border-color:rgba(108,127,94,.35); background:rgba(108,127,94,.07); }
.badge--non{ color:var(--rouge); border-color:rgba(168,72,60,.3); background:rgba(168,72,60,.05); }
.badge--info{ color:var(--terracotta); border-color:rgba(171,81,64,.3); background:rgba(171,81,64,.05); }
.badge--off{ color:var(--charcoal-45); border-color:var(--line); background:var(--cream); }

.jauge{ height:2px; background:var(--line); position:relative; overflow:hidden; }
.jauge i{
  position:absolute; inset:0 auto 0 0; background:var(--terracotta);
  transition:width 1s var(--ease);
}

/* =========================================================
   Progression du parcours (immersions)
   ========================================================= */
.parcours{ display:grid; gap:0; }
.etape{
  display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:flex-start;
  padding:22px 0; border-bottom:1px solid var(--line-soft); position:relative;
}
.etape:last-child{ border-bottom:none; }
.etape__puce{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--white); color:var(--charcoal-45); font-size:12.5px;
  font-family:var(--font-display); font-size:15px;
}
.etape--faite .etape__puce{ background:var(--terracotta); border-color:var(--terracotta); color:var(--white); }
.etape--faite .etape__puce svg{ width:15px; height:15px; }
.etape h4{ font-size:18px; font-weight:500; margin-bottom:4px; }
.etape p{ font-size:13.5px; color:var(--charcoal-45); }
.etape__date{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--charcoal-45); text-align:right; white-space:nowrap;
}
.etape__note{
  margin-top:10px; font-size:13px; font-style:italic; color:var(--charcoal-70);
  border-left:2px solid var(--sand); padding-left:14px;
}
@media (max-width:640px){
  .etape{ grid-template-columns:auto 1fr; }
  .etape__date{ grid-column:2; text-align:left; margin-top:6px; }
}

/* =========================================================
   Certificats
   ========================================================= */
.certif{
  border:1px solid var(--line); background:var(--white);
  padding:30px 32px; position:relative; overflow:hidden;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.certif::before{
  content:''; position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(to bottom, var(--terracotta), var(--gold));
}
.certif:hover{ border-color:var(--sand); transform:translateY(-2px); }
.certif__num{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--charcoal-45);
}
.certif h4{ font-size:22px; font-weight:400; margin:10px 0 8px; line-height:1.3; }
.certif p{ font-size:13.5px; color:var(--charcoal-45); }
.certif__pied{
  display:flex; align-items:center; gap:16px; margin-top:22px;
  padding-top:20px; border-top:1px solid var(--line-soft); flex-wrap:wrap;
}
.certif__mention{
  font-family:var(--font-display); font-size:17px; color:var(--terracotta);
}

/* =========================================================
   Calendrier
   ========================================================= */
.evt{
  display:grid; grid-template-columns:74px 1fr auto; gap:22px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line-soft);
}
.evt:last-child{ border-bottom:none; }
.evt__date{
  text-align:center; border:1px solid var(--line); padding:10px 0; background:var(--cream);
}
.evt__date b{ display:block; font-family:var(--font-display); font-size:26px; line-height:1; font-weight:400; }
.evt__date span{
  display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--charcoal-45); margin-top:5px;
}
.evt h4{ font-size:19px; font-weight:500; margin-bottom:5px; }
.evt__meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--charcoal-45); }
.evt__meta span{ display:flex; align-items:center; gap:6px; }
.evt__meta svg{ width:13px; height:13px; opacity:.7; }
.evt__droite{ display:flex; align-items:center; gap:10px; }

/* Variante resserrée : dans une colonne étroite (tableau de bord, colonne de
   droite), la ligne complète se casse en morceaux illisibles. On garde la
   date, le titre et une seule ligne de détail. */
.evt--compact{ grid-template-columns:56px 1fr; gap:16px; padding:16px 0; }
.evt--compact h4{ font-size:16.5px; }
.evt--compact .evt__date b{ font-size:21px; }
.evt--compact .evt__meta{ gap:10px; font-size:12px; }

@media (max-width:720px){
  .evt{ grid-template-columns:60px 1fr; }
  .evt__droite{ grid-column:2; }
}

/* =========================================================
   Modale
   ========================================================= */
.modale{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(30,26,23,.55); backdrop-filter:blur(3px); padding:26px;
  animation:fondu .35s ease both;
}
@keyframes fondu{ from{ opacity:0; } to{ opacity:1; } }
.modale__boite{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto; padding:38px 40px;
  position:relative; animation:monte .5s var(--ease) both;
}
.modale__boite.large{ max-width:820px; }
.modale__x{
  position:absolute; top:18px; right:18px; width:32px; height:32px;
  border:1px solid var(--line); background:none; cursor:pointer; color:var(--charcoal-45);
  display:flex; align-items:center; justify-content:center;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.modale__x:hover{ color:var(--terracotta); border-color:var(--terracotta); }
.modale__boite h3{ font-size:26px; font-weight:400; margin-bottom:8px; padding-right:40px; }
.modale__boite > p{ font-size:14px; color:var(--charcoal-45); margin-bottom:26px; }
.modale__actions{
  display:flex; gap:12px; justify-content:flex-end; margin-top:30px;
  padding-top:24px; border-top:1px solid var(--line-soft); flex-wrap:wrap;
}
@media (prefers-reduced-motion: reduce){
  .modale,.modale__boite{ animation:none; }
}

/* =========================================================
   Message éphémère
   ========================================================= */
.info{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,20px); z-index:300;
  background:var(--charcoal); color:var(--cream);
  padding:14px 24px; border-radius:var(--radius); font-size:13px;
  display:flex; align-items:center; gap:10px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease);
  max-width:calc(100vw - 40px);
}
.info.visible{ opacity:1; transform:translate(-50%,0); }
.info svg{ width:15px; height:15px; color:var(--terracotta-l); flex:none; }

/* =========================================================
   Éditeur d'actualités : aperçu côte à côte
   ========================================================= */
.editeur{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:1200px){ .editeur{ grid-template-columns:1fr; } }
.apercu{
  border:1px solid var(--line); background:var(--white); overflow:hidden;
  position:sticky; top:calc(var(--barre) + 24px);
}
.apercu__tete{
  display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--line-soft); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--charcoal-45);
}
.apercu iframe{ width:100%; height:640px; border:none; display:block; background:var(--cream); }

/* =========================================================
   Divers
   ========================================================= */
.filtres{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.filtres button{
  border:1px solid var(--line); background:var(--white); cursor:pointer;
  padding:9px 17px; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--charcoal-45); border-radius:var(--radius);
  transition:all .4s var(--ease);
}
.filtres button:hover{ border-color:var(--charcoal-45); color:var(--charcoal); }
.filtres button.actif{ background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); }

.paire{ display:flex; align-items:center; gap:10px; }
.pousse{ margin-left:auto; }
.fin{ font-size:12.5px; color:var(--charcoal-45); }
.mt{ margin-top:26px; }
.mb{ margin-bottom:26px; }

.bascule{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:13.5px; }
.bascule input{ position:absolute; opacity:0; width:0; height:0; }
.bascule .piste{
  width:40px; height:22px; border-radius:11px; background:var(--line);
  position:relative; transition:background .4s var(--ease); flex:none;
}
.bascule .piste::after{
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border-radius:50%; background:var(--white); transition:transform .4s var(--ease);
  box-shadow:0 1px 3px rgba(43,38,34,.2);
}
.bascule input:checked + .piste{ background:var(--terracotta); }
.bascule input:checked + .piste::after{ transform:translateX(18px); }
.bascule input:focus-visible + .piste{ box-shadow:0 0 0 3px rgba(171,81,64,.15); }

/* =========================================================
   Formations en ligne — lecteur de cours

   Reprise en CSS natif du rendu du composant React fourni : un panneau sombre
   au coin droit très arrondi qui s'ouvre en poussant sa largeur, et une vidéo
   qui apparaît en fondu avec un léger zoom et une remontée. Les durées et les
   courbes sont celles du composant (0,4 s pour le panneau, 0,2 s avec 0,3 s de
   retard pour la vidéo, courbe .04/.62/.23/.98).
   ========================================================= */

.lecteur{ display:grid; gap:26px; }

/* ---------- Le panneau sombre ---------- */
.panneauv{
  background:#171412;
  border-radius:0 44px 44px 0;
  width:100%;
  overflow:hidden;
  transition:width .4s cubic-bezier(.19,1,.22,1);
}
.panneauv--ferme{ width:min(320px, 100%); }
.panneauv__tete{
  display:flex; align-items:center; gap:16px;
  padding:14px 18px 14px 26px;
}
.panneauv__titre{
  font-family:var(--font-display); font-size:clamp(22px,2.4vw,34px);
  font-weight:400; line-height:1.1;
  background:linear-gradient(to top, #e9ded0, #b9a894);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.panneauv__bouton{
  margin-left:auto; flex:none;
  border:1px solid rgba(250,245,236,.25); background:rgba(250,245,236,.06);
  color:var(--cream); cursor:pointer;
  padding:14px 24px; border-radius:33px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.panneauv__bouton:hover{ background:rgba(250,245,236,.14); border-color:rgba(250,245,236,.45); }
.panneauv__corps{ padding:0 18px 18px; }

/* ---------- La vidéo ---------- */
.scenev{
  width:100%; aspect-ratio:16/9; max-height:72vh;
  background:#000; border-radius:16px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  animation:videoEntre .2s cubic-bezier(.04,.62,.23,.98) .3s both;
}
@keyframes videoEntre{
  from{ opacity:0; transform:scale(.9) translateY(30px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .scenev{ animation:none; }
  .panneauv{ transition:none; }
}
.scenev video, .scenev iframe{ width:100%; height:100%; border:none; display:block; }

/* Chapitre sans vidéo encore téléversée : on montre un cadre, pas un trou. */
/* Sans vidéo, garder un cadre 16/9 laisse un grand rectangle noir vide :
   on le ramène à la hauteur de son message. */
.scenev--vide{
  aspect-ratio:auto; min-height:240px;
  flex-direction:column; gap:14px; color:rgba(250,245,236,.55);
  background:radial-gradient(120% 120% at 50% 0%, #241f1b 0%, #100e0c 70%);
  text-align:center; padding:32px;
}
.scenev--vide svg{ width:34px; height:34px; opacity:.5; }
.scenev--vide b{ font-family:var(--font-display); font-size:22px; color:rgba(250,245,236,.85); font-weight:400; }
.scenev--vide p{ font-size:13px; max-width:44ch; }

/* ---------- Le sommaire, dans le panneau ---------- */
.sommaire{ display:grid; gap:2px; }
.sommaire__mod{
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(250,245,236,.4); padding:16px 12px 8px;
}
.chap{
  display:grid; grid-template-columns:auto 1fr auto; gap:13px; align-items:center;
  width:100%; text-align:left; cursor:pointer;
  background:none; border:none; border-radius:12px;
  padding:13px 14px; color:rgba(250,245,236,.78);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.chap:hover{ background:rgba(250,245,236,.06); color:var(--cream); }
.chap.actif{ background:rgba(171,81,64,.28); color:var(--cream); }
.chap__puce{
  width:26px; height:26px; border-radius:50%; flex:none;
  border:1px solid rgba(250,245,236,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:rgba(250,245,236,.6);
}
.chap--fait .chap__puce{ background:var(--terracotta); border-color:var(--terracotta); color:#fff; }
.chap--fait .chap__puce svg{ width:13px; height:13px; }
.chap__titre{ display:block; font-size:14px; line-height:1.4; }
.chap__meta{ display:block; font-size:11px; color:rgba(250,245,236,.42); margin-top:2px; }
.chap__duree{ font-size:11px; color:rgba(250,245,236,.42); white-space:nowrap; }
.chap__cadenas{ opacity:.45; }

/* ---------- Sous la vidéo ---------- */
.souslecteur{ display:grid; gap:22px; }
.souslecteur h2{ font-size:clamp(24px,2.6vw,32px); font-weight:400; }
.souslecteur .texte{ display:grid; gap:14px; color:var(--charcoal-70); font-size:15.5px; line-height:1.85; }

.doc{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border:1px solid var(--line); background:var(--white);
  transition:border-color .4s var(--ease);
}
.doc:hover{ border-color:var(--sand); }
.doc svg{ width:18px; height:18px; color:var(--terracotta); flex:none; }
.doc b{ font-weight:400; font-size:14.5px; }
.doc .fin{ margin-left:auto; }

/* ---------- Quiz ---------- */
.quiz__q{ padding:24px 0; border-bottom:1px solid var(--line-soft); }
.quiz__q:last-of-type{ border-bottom:none; }
.quiz__q h4{ font-size:20px; font-weight:500; margin-bottom:14px; }
.quiz__opt{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  padding:12px 16px; border:1px solid var(--line); background:var(--white);
  margin-bottom:8px; transition:border-color .35s var(--ease), background .35s var(--ease);
  font-size:14.5px;
}
.quiz__opt:hover{ border-color:var(--sand); }
.quiz__opt input{ margin-top:4px; accent-color:var(--terracotta); }
.quiz__opt.est-choisi{ border-color:var(--terracotta); background:rgba(171,81,64,.04); }
.quiz__score{
  text-align:center; padding:34px; border:1px solid var(--sand); background:var(--white);
}
.quiz__score b{ display:block; font-family:var(--font-display); font-size:44px; font-weight:400; }
.quiz__score .l{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--charcoal-45); }

/* ---------- Cartes de module ---------- */
.modcarte{
  border:1px solid var(--line); background:var(--white); overflow:hidden;
  display:flex; flex-direction:column; cursor:pointer;
  transition:border-color .5s var(--ease), transform .5s var(--ease);
}
.modcarte:hover{ border-color:var(--sand); transform:translateY(-3px); }
.modcarte__img{ aspect-ratio:16/9; overflow:hidden; background:var(--cream-deep); }
.modcarte__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.modcarte:hover .modcarte__img img{ transform:scale(1.05); }
.modcarte__corps{ padding:26px 28px 28px; display:flex; flex-direction:column; gap:11px; flex:1; }
.modcarte h3{ font-size:23px; font-weight:500; line-height:1.3; }
.modcarte p{ font-size:14px; color:var(--charcoal-45); }
.modcarte__pied{ margin-top:auto; padding-top:16px; }

/* ---------- Téléversement ---------- */
.depot{
  border:1px dashed var(--line); background:var(--cream);
  padding:26px; text-align:center; cursor:pointer;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.depot:hover, .depot.survol{ border-color:var(--terracotta); background:var(--white); }
.depot svg{ width:26px; height:26px; color:var(--terracotta); margin:0 auto 10px; }
.depot b{ display:block; font-size:14.5px; font-weight:400; }
.depot small{ display:block; margin-top:5px; font-size:12px; color:var(--charcoal-45); }
.depot input[type=file]{ display:none; }
.avancement{ height:2px; background:var(--line); margin-top:14px; overflow:hidden; }
.avancement i{ display:block; height:100%; width:0; background:var(--terracotta); transition:width .25s linear; }

/* Sur un téléphone, les marges confortables d'une modale de bureau mangent la
   moitié de l'écran. Bérénice publie ses actualités depuis son téléphone :
   c'est un usage principal, pas un cas limite. */
@media (max-width:640px){
  .modale{ padding:12px; align-items:flex-end; }
  .modale__boite{ padding:28px 20px; max-height:94vh; border-radius:2px; }
  .modale__boite h3{ font-size:23px; }
  .modale__actions{ position:sticky; bottom:0; background:var(--cream); margin-bottom:-28px;
                    padding-bottom:28px; }
  .modale__actions .btn{ flex:1; }
  .tete__ligne .actions{ width:100%; }
  .tete__ligne .actions .btn{ flex:1; }
  .depot{ padding:20px 14px; }
}

/* =========================================================
   Modules payants — le verrou

   Le principe tient en une image : la couverture du module est bien là, mais
   floutée, comme vue à travers une vitre dépolie. On devine ce qu'il y a
   derrière, sans le voir. Par-dessus, un cadenas fin et le prix, dans la même
   typographie que les titres du site. Rien de criard : c'est une invitation,
   pas une barrière de péage.
   ========================================================= */
.modcarte--verrou{ cursor:default; }
.modcarte--verrou .modcarte__img{ position:relative; }
.modcarte--verrou .modcarte__img img{
  filter:blur(18px) saturate(.7) brightness(.85);
  transform:scale(1.18);
}
.modcarte--verrou:hover .modcarte__img img{ transform:scale(1.18); }

.verrou{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(180deg, rgba(30,25,22,.42) 0%, rgba(30,25,22,.66) 100%);
  color:var(--cream); text-align:center; padding:20px;
}
.verrou__rond{
  width:50px; height:50px; border-radius:50%;
  border:1px solid rgba(250,245,236,.45);
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,245,236,.08);
  backdrop-filter:blur(2px);
}
.verrou__rond svg{ width:20px; height:20px; }
.verrou__mot{
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(250,245,236,.75);
}
.verrou__prix{
  font-family:var(--font-display); font-size:34px; line-height:1; font-weight:400;
}
.verrou__etat{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(250,245,236,.4); padding:6px 14px; border-radius:999px;
  color:rgba(250,245,236,.9);
}

/* Bandeau d'achat, sous la carte : le geste doit rester à portée de pouce. */
.modcarte__achat{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:14px; margin-top:auto;
}
.modcarte__achat .btn{ flex:1; }

/* Le même verrou, en grand, dans le lecteur : quand un module payant est
   ouvert sur son chapitre offert, les suivants restent fermés. */
.scenev--verrou{
  aspect-ratio:16/9; position:relative; overflow:hidden;
  background:#100e0c;
}
.scenev--verrou img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:blur(22px) saturate(.7) brightness(.7); transform:scale(1.2);
}
.scenev--verrou .verrou{ gap:14px; }
.scenev--verrou .verrou p{ font-size:13.5px; max-width:46ch; color:rgba(250,245,236,.72); }

/* Sommaire : un chapitre fermé garde sa place, avec son cadenas. */
.chap--ferme{ opacity:.55; cursor:default; }
.chap--ferme:hover{ background:none; color:rgba(250,245,236,.78); }
.chap__offert{
  font-size:9px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--terracotta-l); border:1px solid rgba(201,123,95,.5);
  padding:2px 7px; border-radius:999px; margin-left:8px; white-space:nowrap;
}

/* Prix affiché dans les listes de l'administration. */
.prix{ font-family:var(--font-display); font-size:19px; color:var(--terracotta); }

/* =========================================================
   Formulaire de paiement

   Reprise en natif de la maquette fournie, sans PayPal : les moyens rapides
   en haut, un séparateur, puis les champs de carte. Deux différences
   assumées avec le modèle d'origine — les couleurs et la typographie sont
   celles du site, et les champs de carte ne nous appartiennent pas : ce sont
   des cadres Stripe insérés ici. Le numéro et le cryptogramme ne touchent
   jamais ce site.
   ========================================================= */
.paiement{ display:grid; gap:22px; }

.paiement__express{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.paiement__express:empty{ display:none; }
.paiement__rapide{
  height:56px; border:1px solid var(--line); background:var(--white);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:13px; letter-spacing:.04em; cursor:pointer;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.paiement__rapide:hover{ border-color:var(--charcoal-45); }
.paiement__rapide svg{ width:20px; height:20px; }
.paiement__rapide[disabled]{ opacity:.5; cursor:default; }

.paiement__sep{
  display:flex; align-items:center; gap:14px;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--charcoal-45);
}
.paiement__sep::before, .paiement__sep::after{
  content:''; flex:1; height:1px; background:var(--line);
}

.paiement__champs{ display:grid; gap:16px; }
.paiement__ligne{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .paiement__ligne, .paiement__express{ grid-template-columns:1fr; } }

/* Le cadre qui accueille les champs Stripe. On l'habille exactement comme nos
   propres champs pour que la couture ne se voie pas. */
.paiement__cadre{
  border:1px solid var(--line); background:var(--white);
  border-radius:var(--radius); padding:13px 15px; min-height:48px;
}
.paiement__cadre.est-actif{ border-color:var(--terracotta); box-shadow:0 0 0 3px rgba(171,81,64,.08); }

.paiement__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding-top:18px; border-top:1px solid var(--line);
}
.paiement__total .l{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--charcoal-45);
}
.paiement__total .n{ font-family:var(--font-display); font-size:32px; color:var(--terracotta); }

.paiement__mention{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12px; color:var(--charcoal-45); line-height:1.65;
}
.paiement__mention svg{ width:14px; height:14px; flex:none; margin-top:3px; color:var(--vert); }

/* =========================================================
   Abonnement

   Une seule offre, présentée comme une page de vente courte : le prix en
   grand, ce qu'elle contient en quatre lignes, un bouton. Le fond sombre la
   détache du reste de l'espace sans crier.
   ========================================================= */
.offre{
  background:#171412; color:var(--cream);
  border-radius:2px 44px 44px 2px;
  padding:44px 48px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:820px){
  .offre{ grid-template-columns:1fr; padding:32px 26px; border-radius:2px 28px 28px 2px; gap:26px; }
}
.offre .eyebrow{ color:var(--terracotta-l); }
.offre .eyebrow::before{ background:var(--terracotta-l); }
.offre h2{
  font-size:clamp(28px,3.2vw,40px); font-weight:400; color:var(--cream);
  margin:16px 0 12px; line-height:1.15;
}
.offre p{ color:rgba(250,245,236,.72); font-size:15px; }
.offre__liste{ display:grid; gap:11px; margin-top:24px; }
.offre__liste div{
  display:flex; align-items:flex-start; gap:11px;
  font-size:14px; color:rgba(250,245,236,.86);
}
.offre__liste svg{ width:15px; height:15px; flex:none; margin-top:4px; color:var(--terracotta-l); }

.offre__prix{
  border:1px solid rgba(250,245,236,.18); border-radius:2px;
  padding:32px; text-align:center; background:rgba(250,245,236,.04);
}
.offre__prix .n{ font-family:var(--font-display); font-size:56px; line-height:1; }
.offre__prix .p{
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(250,245,236,.6); margin-top:10px;
}
.offre__prix .btn{
  width:100%; margin-top:24px;
  background:var(--terracotta); border-color:var(--terracotta); color:var(--white);
}
.offre__prix .btn:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.offre__prix .fin{ color:rgba(250,245,236,.5); margin-top:14px; display:block; font-size:11.5px; }

/* État d'un abonnement en cours. */
.abo{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.abo__pastille{
  width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(108,127,94,.4); color:var(--vert); background:rgba(108,127,94,.07);
}
.abo__pastille--alerte{ border-color:rgba(184,135,63,.45); color:var(--ambre); background:rgba(184,135,63,.07); }
.abo__pastille svg{ width:19px; height:19px; }

/* Sur une carte verrouillée par le palier « inscrits », on ne se contente
   plus de dire non : on montre par où entrer. */
.verrou__offre{
  margin-top:4px; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(250,245,236,.75);
}