/* activite-graine-qui-pousse.css */
:root{
  --bg: #f6f8ff;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --line: #e7ecff;

  /* bleu secondaire */
  --blue-50:  #eef4ff;
  --blue-100: #dbe9ff;
  --blue-300: #7fb0ff;
  --blue-500: #2f6bff;
  --blue-700: #1b3fbf;

  --warn-bg: #fff6e6;
  --warn-line: #ffd28a;

  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow2: 0 18px 55px rgba(15, 23, 42, .10);
  --radius: 16px;
  --radius2: 12px;
}

/* ===== Reset ===== */
*{box-sizing:border-box}
html,body{height:100%}
:root{ color-scheme: light; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  line-height:1.55;

  /* ✅ Fond premium + léger “grain” */
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(47,107,255,.18), transparent 60%),
    radial-gradient(1200px 700px at 88% 6%, rgba(127,176,255,.22), transparent 60%),
    radial-gradient(900px 540px at 55% 110%, rgba(47,107,255,.10), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 50%, #ffffff 120%);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.25) 1px, transparent 0);
  background-size: 14px 14px; /* grain doux */
  mix-blend-mode:multiply;
}

/* ===== Container ===== */
.container{
  width:min(1100px, calc(100% - 32px));
  margin-inline:auto;
}

/* ===== HERO (pleine largeur) ===== */
.hero{
  width:100%;
  padding:34px 0 18px;
  border-bottom:1px solid rgba(231,236,255,.9);

  /* ✅ Hero plus qualitatif */
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(47,107,255,.26), transparent 62%),
    radial-gradient(900px 520px at 82% 10%, rgba(127,176,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.75) 65%, rgba(255,255,255,.30) 100%);
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto -20% -120px -20%;
  height:220px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(47,107,255,.18), transparent 60%);
  filter: blur(10px);
  opacity:.9;
}
.hero__inner{
  padding:8px 0 18px;
  position:relative;
  z-index:1;
}
.hero__badge{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  background:#fff;
  border:1px solid var(--line);
  color:var(--muted);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
}
.pill--blue{
  background:var(--blue-50);
  border-color:var(--blue-100);
  color:var(--blue-700);
}

.hero__title{
  margin:0 0 6px;
  font-size:40px;
  letter-spacing:-.02em;
}
.hero__subtitle{
  margin:0 0 16px;
  color:var(--muted);
  max-width:78ch;
}

.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
.meta{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
  backdrop-filter: blur(6px);
}
.meta__label{font-size:12px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.meta__value{font-size:14px; font-weight:800; margin-top:4px}

/* ===== Main / Cards ===== */
main{padding:18px 0 44px}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:18px;
  margin:14px 0;
}
.card h2{
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:-.01em;
}
.card h3{margin:0; font-size:18px}
.card h4{margin:0 0 8px; font-size:15px}

.muted{color:var(--muted)}
.hint{margin:8px 0 0; font-size:13px; color:var(--muted)}
.mini{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed var(--line);
  background:rgba(255,255,255,.7);
  color:var(--muted);
  font-size:13px;
}

.list{margin:10px 0 0; padding-left:18px}
.list.compact{margin-top:8px}
.list li{margin:6px 0}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.panel{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  padding:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78));
}

.callout{
  margin-top:12px;
  border-radius:14px;
  padding:12px 12px;
  border:1px solid var(--line);
  background:#fff;
}
.callout--info{
  background:rgba(47,107,255,.06);
  border-color:rgba(47,107,255,.18);
}
.callout--blue{
  background:linear-gradient(90deg, rgba(47,107,255,.10), rgba(127,176,255,.10));
  border-color:rgba(47,107,255,.22);
}
.callout--warn{
  background:var(--warn-bg);
  border-color:var(--warn-line);
}

/* ===== Protocole ===== */
.protocol{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.protocol__item{
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
}
.check{
  width:18px; height:18px;
  border-radius:6px;
  border:2px solid rgba(47,107,255,.35);
  background:rgba(47,107,255,.08);
  margin-top:2px;
  flex:0 0 auto;
}

/* ===== Version picker (labels) ===== */
.versionPicker{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.vbtn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
}
.vbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
  border-color: rgba(47,107,255,.25);
}
.vbtn:active{ transform: translateY(0px); }

/* ===== Tables ===== */
.tableWrap{
  width:100%;
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--line);
  margin-top:12px;
  background:#fff;
}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:820px;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding:10px 10px;
  vertical-align:top;
  font-size:13px;
}
.table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(180deg, var(--blue-50), #fff);
  color:var(--blue-700);
  font-weight:900;
}
.table tbody tr:hover{background:rgba(47,107,255,.05)}

/* ===== Quiz / Inputs ===== */
.quiz{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
.quiz--one{grid-template-columns:1fr}
.q{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.92);
}

.field{display:block; margin-top:10px}

/* ✅ Texte saisi lisible */
.input,
.textarea,
select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
  color:var(--text);
  caret-color: var(--blue-700);
}
.input::placeholder,
.textarea::placeholder{
  color: rgba(71, 85, 105, .75);
}
.input:focus,
.textarea:focus,
select:focus{
  border-color:rgba(47,107,255,.45);
  box-shadow: 0 0 0 4px rgba(47,107,255,.12);
}

/* ✅ Autofill Chrome */
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0px 1000px #fff inset;
}

.answers{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(47,107,255,.06);
  color: var(--text);
}
.answers summary{
  cursor:pointer;
  font-weight:900;
  color:var(--blue-700);
}

.checklist{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.tick{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  color:var(--muted);
  font-size:14px;
}
.tick input{margin-top:3px}

.footerNote{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--line);
  color:var(--muted);
  font-size:12px;
}

/* =========================================================
   ✅ SWITCH SANS JS (RADIOS) — IMPORTANT POUR TON SYSTÈME
   ========================================================= */
.tabs{margin-top:12px; position:relative}

/* radios invisibles mais présents */
.tabRadio{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Contenus versions : cachés par défaut */
.versions .versionBlock{display:none; margin:14px 0 0}

/* Affichage selon radio checked */
#tab-temoin:checked ~ .versions #v-temoin{display:block}
#tab-lumiere:checked ~ .versions #v-lumiere{display:block}
#tab-eau:checked ~ .versions #v-eau{display:block}
#tab-temperature:checked ~ .versions #v-temperature{display:block}
#tab-graines:checked ~ .versions #v-graines{display:block}

/* Bouton actif selon radio checked */
#tab-temoin:checked ~ .versionPicker label[for="tab-temoin"],
#tab-lumiere:checked ~ .versionPicker label[for="tab-lumiere"],
#tab-eau:checked ~ .versionPicker label[for="tab-eau"],
#tab-temperature:checked ~ .versionPicker label[for="tab-temperature"],
#tab-graines:checked ~ .versionPicker label[for="tab-graines"]{
  color: var(--blue-700);
  border-color: rgba(47,107,255,.35);
  background: linear-gradient(90deg, rgba(47,107,255,.10), rgba(127,176,255,.10));
  box-shadow: 0 12px 28px rgba(47,107,255,.14);
}

/* Optionnel : petite ligne “version actuelle” */
.versionReadout{margin-top:10px}
.versionReadout .vr{display:none; font-weight:900; color:var(--blue-700)}
#tab-temoin:checked ~ .versionReadout .vr--temoin{display:inline}
#tab-lumiere:checked ~ .versionReadout .vr--lumiere{display:inline}
#tab-eau:checked ~ .versionReadout .vr--eau{display:inline}
#tab-temperature:checked ~ .versionReadout .vr--temperature{display:inline}
#tab-graines:checked ~ .versionReadout .vr--graines{display:inline}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 920px){
  .hero__meta{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .quiz{grid-template-columns:1fr}
  .hero__title{font-size:32px}
}

/* Bouton retour (cadre bleu) */
.btn-return {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.6rem 1.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--svs-blue, #2563eb);
  background-color: #f1f5f9;
  border: 2px solid var(--svs-blue, #2563eb);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-return:hover {
  background-color: var(--svs-blue, #2563eb);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.btn-return:focus-visible {
  outline: 3px solid rgba(37,99,235,0.35);
  outline-offset: 2px;
  border-color: var(--svs-blue, #2563eb);
}


/* ================= Barre de progression de lecture (identique cours) ================= */

/* Utilisée pour placer la barre juste sous le header */
:root{
  --svs-header-h: 64px;
}

/* Conteneur fixe en haut de l'écran */
.course-progress-floating{
  position: fixed;
  top: var(--svs-header-h, 64px); /* juste sous ton header */
  left: 0;
  right: 0;
  z-index: 80;
  pointer-events: none; /* ne bloque pas les clics */
}

/* Si tu veux une barre pure : masque le texte (comme sur tes cours) */
.course-progress-label{
  display: none;
}

/* La barre : fine ligne sur toute la largeur */
.course-progress-track{
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(148,163,184,.35);
  overflow: hidden;
}

/* Le remplissage */
.course-progress-inner{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  transition: width .18s ease-out;
}

@media (max-width: 480px){
  .course-progress-track{ height: 3px; }
}