/* ============================================================
   Parcours Dayclic — ACCUEIL moderne (#cure-home + citation)
   Réutilise le design system du dashboard (--amber, --ink, --sage…).
   Chargé après le <style> du dashboard.
   ============================================================ */

/* ---- Citation d'ouverture : bandeau navy éditorial ---- */
.view[data-view="formation"] > .card.quote{
  background:linear-gradient(135deg,var(--ink) 0%,var(--navy-2) 100%);
  border:0;border-radius:22px;padding:32px 36px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-m);margin-bottom:20px;
}
.view[data-view="formation"] > .card.quote .chead{color:var(--amber);opacity:.85}
.view[data-view="formation"] > .card.quote #dq-text{
  color:#fff;font-family:var(--serif);font-size:clamp(20px,2.3vw,29px);
  line-height:1.34;font-weight:400;font-style:italic;letter-spacing:-0.01em;margin:6px 0 0;
  font-variation-settings:"opsz" 40,"SOFT" 40;position:relative;
}
.view[data-view="formation"] > .card.quote #dq-author{color:rgba(255,255,255,.5);margin-top:12px}
.view[data-view="formation"] > .card.quote .qmark{color:rgba(244,196,48,.16);font-size:160px;top:-30px;right:20px}

/* ---- Rangée CTA : reprendre + passe un test ---- */
.ch-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 30px}
@media(max-width:760px){.ch-cta-row{grid-template-columns:1fr}}
.ch-cta{
  border-radius:18px;padding:22px 24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:5px;cursor:pointer;min-height:150px;
  transition:transform .28s cubic-bezier(0.2,0.8,0.2,1),box-shadow .28s;
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow-s);
}
.ch-cta:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.ch-cta-kick{font:700 11px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--amber-hot)}
.ch-cta-title{font-family:var(--serif);font-size:23px;font-weight:500;color:var(--ink);line-height:1.12;letter-spacing:-0.01em}
.ch-cta-sub{font-size:13.5px;color:var(--mute);line-height:1.5}
.ch-cta-go{margin-top:auto;font:700 13px var(--sans);color:var(--ink);display:inline-flex;align-items:center;gap:7px;padding-top:12px}
.ch-cta-go em{font-style:normal;color:var(--amber-hot);transition:transform .28s}
.ch-cta:hover .ch-cta-go em{transform:translateX(6px)}
/* Reprendre : navy, dominante */
.ch-cta.resume{background:linear-gradient(140deg,var(--ink),var(--navy-2));border-color:transparent}
.ch-cta.resume .ch-cta-kick{color:var(--amber)}
.ch-cta.resume .ch-cta-title{color:#fff}
.ch-cta.resume .ch-cta-sub{color:rgba(255,255,255,.6)}
.ch-cta.resume .ch-cta-go{color:#fff}
.ch-cta.resume .ch-cta-go em{color:var(--amber)}
.ch-cta.resume::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(244,196,48,.14),transparent 70%)}
/* Tests : accent teal */
.ch-cta.tests{border-color:var(--sage-soft);background:linear-gradient(140deg,var(--card),var(--sage-soft))}
.ch-cta.tests .ch-cta-kick{color:var(--sage-deep)}
.ch-cta.tests .ch-cta-go em{color:var(--sage-deep)}

/* ---- Section : les 6 semaines déroulées ---- */
.ch-weeks-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 2px 16px}
.ch-weeks-head h2{font-family:var(--serif);font-size:clamp(20px,2.1vw,26px);font-weight:500;color:var(--ink);margin:0;letter-spacing:-0.01em}
.ch-count{font:700 13px var(--sans);color:var(--mute);white-space:nowrap}
.ch-count b{color:var(--amber-hot)}

.ch-week{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-s);transition:box-shadow .25s;
}
.ch-week:hover{box-shadow:var(--shadow-m)}
.ch-week-head{
  display:flex;align-items:center;gap:14px;padding:17px 22px;
  border-left:4px solid var(--wk-color,var(--sage));background:linear-gradient(90deg,color-mix(in oklab,var(--wk-color,var(--sage)) 6%,transparent),transparent 40%);
}
.ch-week-titles{flex:1;min-width:0}
.ch-week-name{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--ink);line-height:1.15}
.ch-week-ap{font:600 11px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin-top:2px}
.ch-week-prog{display:flex;align-items:center;gap:11px;flex:none}
.ch-week-dots{display:flex;gap:4px}
.ch-week-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background .3s}
.ch-week-dots i.on{background:var(--wk-color,var(--sage))}
.ch-week-frac{font:700 12px var(--sans);color:var(--mute);min-width:26px;text-align:right}

.ch-days{list-style:none;margin:0;padding:6px 12px 12px}
.ch-day{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .15s}
.ch-day:hover{background:var(--paper)}
.ch-day-check{width:21px;height:21px;border-radius:50%;border:2px solid var(--line-3);flex:none;display:grid;place-items:center;transition:all .2s}
.ch-day.done .ch-day-check{background:var(--sage);border-color:var(--sage)}
.ch-day.done .ch-day-check svg{stroke:#fff;width:11px;height:11px}
.ch-day.reading .ch-day-check{border-color:var(--amber);border-style:dashed}
.ch-day-name{flex:1;font-family:var(--serif);font-size:15.5px;color:var(--ink-soft);line-height:1.3}
.ch-day.done .ch-day-name{color:var(--mute)}
.ch-day-arrow{color:var(--mute-3);flex:none;display:flex;transition:transform .2s,color .2s}
.ch-day:hover .ch-day-arrow{color:var(--amber-hot);transform:translateX(3px)}

/* ---- Apparition au scroll ---- */
.ch-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(0.2,0.8,0.2,1),transform .6s cubic-bezier(0.2,0.8,0.2,1)}
.ch-reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.ch-reveal{opacity:1 !important;transform:none !important;transition:none !important}}

/* ══════════════════════════════════════════════════════════════════════
   REFONTE — 30 juillet 2026, d'après la maquette « Mon parcours »
   Cette couche gouverne l'écran réellement affiché (.ch-*). Elle aligne
   les semaines et les journées sur le système : une seule surface, le
   sauge pour « fait », l'or réservé à la journée du jour.
   Retirable en bloc jusqu'au marqueur FIN REFONTE.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Les deux entrées du haut ─────────────────────────────────────────
   Aplat d'encre plutôt que dégradé : la carte arrête de « couler ».   */
.ch-cta{border-radius:14px;padding:24px;min-height:150px}
.ch-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.ch-cta-title{font-size:24px;font-weight:400;letter-spacing:-.015em}
.ch-cta-sub{font-size:14px;line-height:1.55}
.ch-cta.resume{background:var(--ink)}
.ch-cta.resume .ch-cta-sub{color:rgba(255,255,255,.62)}
.ch-cta.tests{background:var(--card);border-color:var(--line)}
.ch-cta.tests .ch-cta-kick{color:var(--sage)}
.ch-cta.tests .ch-cta-go em{color:var(--sage)}

/* ─── L'en-tête de section ──────────────────────────────────────────── */
.ch-weeks-head{margin-bottom:22px}
.ch-weeks-head h2{font-size:clamp(24px,2.6vw,30px);font-weight:400;letter-spacing:-.018em}
.ch-count{font-weight:500;font-size:13px;color:var(--mute);font-variant-numeric:tabular-nums}
.ch-count b{color:var(--sage);font-weight:700}

/* ─── La semaine ────────────────────────────────────────────────────────
   Plus de lavis coloré derrière le titre : le filet de gauche porte déjà
   la couleur de la phase, c'est une information, pas une décoration.  */
.ch-week{border-radius:14px;margin-bottom:22px}
.ch-week-head{
  padding:17px 24px;gap:16px;
  background:none;
  border-left:3px solid var(--wk-color,var(--sage));
  border-bottom:1px solid var(--line);
}
.ch-week-name{font-size:21px;font-weight:500;letter-spacing:-.01em}
.ch-week-ap{font-size:11px;letter-spacing:.14em;color:var(--mute-2);margin-top:3px}
.ch-week-prog{gap:14px}
.ch-week-dots i{width:7px;height:7px;background:var(--line-3)}
.ch-week-dots i.on{background:var(--sage)}      /* « fait » est toujours sauge */
.ch-week-frac{font-size:13px;font-weight:500;color:var(--mute);font-variant-numeric:tabular-nums;min-width:30px}

/* ─── La journée ────────────────────────────────────────────────────────
   Des lignes, pas des pastilles : on lit une liste, on ne clique pas
   dans un nuage de boutons.                                           */
.ch-days{padding:0}
.ch-day{
  padding:13px 24px;border-radius:0;gap:16px;
  border-bottom:1px solid color-mix(in oklab,var(--line) 60%,transparent);
}
.ch-day:last-child{border-bottom:0}
.ch-day:hover{background:var(--card-2)}
.ch-day-check{width:19px;height:19px;border-width:1.8px;border-color:var(--line-3)}
.ch-day.done .ch-day-check{background:var(--sage);border-color:var(--sage)}
.ch-day-name{font-family:"Newsreader",Georgia,serif;font-size:18px;color:var(--ink);line-height:1.35}
.ch-day.done .ch-day-name{color:var(--mute)}
.ch-day-arrow{color:var(--mute-3)}
.ch-day:hover .ch-day-arrow{color:var(--sage);transform:translateX(3px)}

/* La journée en cours : un filet or à gauche, pas un aplat qui hurle. */
.ch-day.reading{
  background:#FFFBEA;
  box-shadow:inset 3px 0 0 var(--amber);
}
.ch-day.reading .ch-day-name{font-weight:500;color:var(--ink)}
.ch-day.reading .ch-day-check{border-color:var(--amber);border-style:solid;background:#fff}
.ch-day.reading .ch-day-arrow{color:var(--amber-hot)}

@media(max-width:720px){
  .ch-week-head{padding:15px 18px}
  .ch-day{padding:12px 18px;gap:13px}
  .ch-day-name{font-size:17px}
}
/* ═══════════════════════════ FIN REFONTE ═══════════════════════════ */

/* ─── Le ruban et le numéro de semaine (maquette « Mon parcours ») ─────
   Le ruban rejoue les perles du rail à l'échelle du parcours entier :
   un seul motif graphique répond partout à « où j'en suis ».         */
.ch-ruban{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 22px;margin:0 0 26px;box-shadow:var(--shadow-s);
}
.ch-ruban-beads{display:flex;gap:3px;flex:1;min-width:220px}
.ch-ruban-beads i{
  flex:1;height:6px;border-radius:3px;background:var(--line-2);
  max-width:26px;transition:background .3s;
}
.ch-ruban-beads i.on{background:var(--sage)}
.ch-ruban-beads i.now{background:var(--amber)}
.ch-ruban-lab{font:500 13px var(--sans);color:var(--mute);white-space:nowrap}

.ch-week-num{
  font-family:var(--serif);font-size:13px;font-weight:600;letter-spacing:.08em;
  color:var(--mute-2);width:26px;flex:none;text-align:left;
}
@media(max-width:720px){
  .ch-ruban{padding:14px 16px;gap:12px}
  .ch-week-num{display:none}
}

/* ─── Le fil des moments de la journée (maquette « Aujourd'hui ») ──────
   Même motif que le fil de la leçon et que les perles du rail : un trait
   vertical, une perle par moment. Aucun état par moment n'est affiché —
   l'application ne le connaît pas.                                    */
.ch-jour{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:24px 26px;margin:0 0 22px;box-shadow:var(--shadow-s);
}
.ch-jour-head{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.ch-jour-k{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute-2)}
.ch-jour-head h2{
  font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.015em;
  color:var(--ink);margin:6px 0 4px;line-height:1.15;
}
.ch-jour-head p{margin:0;font-size:13.5px;color:var(--mute)}
.ch-jour-head .btn{margin-left:auto;flex:none}
.ch-jour-fil{list-style:none;margin:0;padding:0 0 0 30px;position:relative}
.ch-jour-fil::before{
  content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;
  background:var(--line-2);border-radius:2px;
}
.ch-jour-fil li{position:relative;display:flex;align-items:baseline;gap:14px;padding:0 0 18px}
.ch-jour-fil li:last-child{padding-bottom:0}
.ch-jour-fil li::before{
  content:"";position:absolute;left:-30px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-3);box-sizing:border-box;
}
.ch-jour-fil li:first-child::before{
  background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,204,0,.22);
}
.ch-jour-fil b{
  font:700 12px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);
}
.ch-jour-fil span{font-size:13px;color:var(--mute-2);font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .ch-jour{padding:20px 18px}
  .ch-jour-head .btn{margin-left:0}
}