/* Espace membre Fructify — design repris de l'ancien espace ClickFunnels (capture 7_design-cible.png, 14/10/2026) */
:root{
  --fond:#111111; --fond-2:#1a1a1a; --bordure:rgba(255,255,255,.08);
  --or:#f2b632; --or-fonce:#d99d1a; --or-texte:#3a2a06;
  --blanc:#ffffff; --gris-clair:#f3f4f6; --gris-ligne:#e5e7eb; --texte-carte:#2b2b2b; --texte-doux:#5f6368;
  --vert:#1a9148; --rouge:#ef4444; --texte:#ffffff; --texte-muet:#9ca3af;
  --police:'Open Sans',system-ui,sans-serif; --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--police);line-height:1.5}
a{color:var(--or)}
.conteneur{max-width:1180px;margin:0 auto;padding:24px 16px 48px}
.muted{color:var(--texte-muet);font-size:13px}
.ligne{display:flex;gap:10px;align-items:center}

/* En-tête : logo + rangée de boutons dorés */
.entete{border-bottom:1px solid var(--bordure);background:var(--fond)}
.entete-int{max-width:1180px;margin:0 auto;padding:18px 16px;display:flex;align-items:center;gap:28px}
.logo{color:var(--blanc);text-decoration:none;font-weight:800;font-size:30px;letter-spacing:-.5px;white-space:nowrap}
.logo span{font-size:16px;font-weight:600}
.boutons-entete{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-left:auto}
.boutons-entete form{margin:0}
.bouton-entete{display:inline-block;background:var(--or);color:var(--blanc);border:1px solid var(--or-fonce);border-radius:2px;
  padding:10px 18px;font:700 15px var(--police);text-decoration:none;cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap}
.bouton-entete:hover{background:var(--or-fonce)}

/* Mise en page leçon : sommaire à gauche, carte blanche à droite */
.formation{display:grid;grid-template-columns:325px 1fr;gap:28px;align-items:start}

/* Sommaire : chapitres en barres dorées dépliables */
.sommaire{display:flex;flex-direction:column;gap:10px}
.chapitre{border-radius:var(--r);overflow:hidden;box-shadow:0 0 12px rgba(242,182,50,.18)}
.chapitre summary{list-style:none;cursor:pointer;background:var(--or);color:var(--blanc);font-weight:700;font-size:13px;
  text-transform:uppercase;padding:11px 36px 11px 18px;position:relative;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.chapitre summary::-webkit-details-marker{display:none}
.chapitre summary::after{content:"";position:absolute;right:16px;top:50%;margin-top:-3px;border:5px solid transparent;border-top-color:var(--blanc)}
.chapitre[open] summary::after{margin-top:-8px;border-top-color:transparent;border-bottom-color:var(--blanc)}
.lecons{background:var(--blanc)}
.lecons a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px 10px 20px;
  color:var(--texte-doux);text-decoration:none;font-size:14px;border-top:1px solid var(--gris-ligne)}
.lecons a:hover{background:#fafafa;color:var(--texte-carte)}
.lecons a.active{background:var(--gris-clair);color:var(--texte-carte);font-weight:600}
.coche{color:#5f6368;font-size:12px}
.chevron{color:#b0b3b8;font-size:18px;line-height:1}

/* Carte de leçon */
.lecon-carte{background:var(--blanc);color:var(--texte-carte);border-radius:var(--r);padding:18px 18px 28px}
.titre-lecon{background:var(--gris-clair);border-radius:4px;padding:26px 20px;text-align:center}
.titre-lecon h1{margin:0;font-size:30px;line-height:1.25;font-weight:700;color:var(--texte-carte)}
.cadre-video{margin:40px auto 0;max-width:600px;background:#1b1b1b;padding:8px;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.video{position:relative;padding-top:56.25%;background:#000;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.boutons-lecon{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}
.bouton-lecon{display:inline-block;background:var(--or);color:var(--blanc);border:1px solid var(--or-fonce);border-radius:2px;
  padding:13px 22px;font:700 18px var(--police);text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.bouton-lecon:hover{background:var(--or-fonce)}
.bouton-lecon.contour{background:var(--blanc);color:var(--or-fonce);text-shadow:none}
.texte{max-width:600px;margin:22px auto 0;white-space:pre-wrap;text-align:center;font-size:16px;color:var(--texte-carte)}
.nav-lecon{display:flex;justify-content:space-between;max-width:600px;margin:30px auto 0;font-size:14px}
.lien-nav{color:var(--texte-doux);text-decoration:none;font-weight:600}
.lien-nav:hover{color:var(--or-fonce)}

/* Pages simples (connexion, inscription, mes formations, erreurs) */
.carte{background:var(--blanc);color:var(--texte-carte);border-radius:var(--r);padding:24px;margin:14px 0}
.carte h1,.carte h2,.carte h3{color:var(--texte-carte);margin-top:0}
.carte .muted{color:var(--texte-doux)}
.carte a{color:var(--or-fonce)}
.bouton{display:inline-block;padding:11px 20px;border-radius:2px;background:var(--or);color:var(--blanc);font:700 15px var(--police);
  text-decoration:none;border:1px solid var(--or-fonce);cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.bouton.secondaire{background:var(--blanc);color:var(--or-fonce);text-shadow:none}
input,textarea,select{width:100%;padding:10px;border-radius:4px;border:1px solid var(--gris-ligne);background:var(--blanc);color:var(--texte-carte);font:inherit;margin:4px 0 12px}
label{font-size:14px;color:var(--texte-doux);font-weight:600}
.erreur{background:#fdecec;border:1px solid var(--rouge);color:#7f1d1d;padding:10px;border-radius:4px;margin-bottom:12px}
.ok{background:#e8f5ee;border:1px solid var(--vert);color:#14532d;padding:10px;border-radius:4px;margin-bottom:12px}
.progression{height:8px;background:var(--gris-ligne);border-radius:4px;overflow:hidden}
.progression span{display:block;height:100%;background:var(--or)}
.bonjour{color:var(--blanc)}
table{width:100%;border-collapse:collapse}
td,th{padding:8px;border-bottom:1px solid var(--gris-ligne);text-align:left;font-size:14px}

/* Téléphone : en-tête compact, la leçon passe avant le sommaire */
@media(max-width:900px){
  .entete-int{flex-direction:column;align-items:flex-start;gap:12px;padding:14px 12px}
  .logo{font-size:24px}
  .boutons-entete{margin-left:0;flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:4px;gap:8px}
  .bouton-entete{padding:8px 12px;font-size:13px}
  .formation{grid-template-columns:1fr;gap:20px}
  .lecon-carte{order:-1;padding:12px 12px 22px}
  .titre-lecon{padding:18px 12px}
  .titre-lecon h1{font-size:22px}
  .cadre-video{margin-top:20px;padding:4px}
  .bouton-lecon{font-size:16px;padding:11px 16px}
  .conteneur{padding:16px 12px 40px}
}