/* Les étapes (etapes.js, 13/10) : communes à Ma veille et à la création des piliers. Revues le 13/10 au soir (Lisa) : l'encadré est vert
   sapin, sans ligne sous son titre, sans fond crème dedans ; une barre de progression sous le titre ; une seule étape à l'écran, on avance
   avec « Suivant » et « Précédent » (rien ne glisse). Tout ce qui est posé sur le vert est clair : textes blancs, champs et boutons clairs,
   bouton principal doré. Téléphone d'abord, cibles de 44 px, texte de 14 px au moins, graisse 600 au plus.
   Le principe : dans l'encadré, les couleurs de texte de l'app passent au clair (--bx, --encre2, --or-texte) ; chaque surface claire posée
   dessus (champ, bouton clair, carte blanche, message) les remet au foncé. Pas de ton sur ton. */
.ce { max-width: 760px; margin-bottom: 18px; background: #1F5B52; color: #fff; --bx: #fff; --encre2: rgba(255,255,255,.86); --or-texte: #E7CF8A; --ligne: rgba(255,255,255,.22); --doux: rgba(255,255,255,.14); }
.ce :where(input, select, textarea, .btn.second, .cia-opt, .choix button, .erreur, .iv-prop, .iv-note-ok, .ce-clair) { --bx: #17463F; --encre2: #5E6C67; --or-texte: #8A6820; --ligne: rgba(27,33,31,.10); --doux: rgba(31,91,82,.07); color: #17463F; }
.ce > summary { min-height: 56px; }
.ce[open] > summary { border-bottom: 0; padding-bottom: 6px; }
.ce > summary:focus-visible { outline-color: var(--or); }
.ce > summary .chevron { border-color: #fff; }
.ce > summary:hover .chevron { border-color: #E7CF8A; }
.ce .acc-titre b { font-size: 17px; color: #fff; }
.ce-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ce-etiquettes > * { background: #FAF8F4; color: #17463F; }
.ce-fait { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.ce-fait svg { width: 14px; height: 14px; color: #E7CF8A; }
.ce-corps { padding: 6px 22px 22px; }
.ce-progres { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; }
.ce-progres-barre { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255,255,255,.24); overflow: hidden; }
.ce-progres-barre i { display: block; height: 100%; border-radius: 999px; background: #E7CF8A; transition: width .3s ease; }
.ce-progres-texte { flex: none; font-size: 14px; color: rgba(255,255,255,.86); white-space: nowrap; }
.ce-carte { min-width: 0; animation: ce-entre .22s ease; }
.ce-carte[hidden] { display: none; }
@keyframes ce-entre { from { opacity: 0; } to { opacity: 1; } }
.ce-tete { display: flex; align-items: flex-start; gap: 12px; }
.ce-tete b { display: block; font-family: var(--tight); font-size: 18px; font-weight: 600; line-height: 1.25; padding-top: 3px; color: #fff; }
.ce-tete p { font-size: 15px; color: rgba(255,255,255,.86); margin-top: 4px; max-width: 560px; }
.ce-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #17463F; font-size: 14.5px; font-weight: 600; }
.ce-num.ok { background: #E7CF8A; color: #17463F; }
.ce-num svg { width: 16px; height: 16px; }
.ce-contenu { margin-top: 18px; min-width: 0; }
.ce-suite { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.ce-suite:empty { display: none; }
.ce-suite .btn { min-height: 48px; justify-content: center; text-decoration: none; }
/* Les boutons, sur le vert : le principal est doré, le second est clair, le lien est blanc et souligné. */
.ce .btn:not(.second):not(.lien) { background: #C9A24A; color: #10332E; }
.ce .btn:not(.second):not(.lien):hover { background: #D6B35E; }
.ce .btn.second { background: #fff; border-color: #fff; }
.ce .btn.second:hover { background: #F1ECE2; border-color: #F1ECE2; }
.ce .btn.lien { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ce .btn:focus-visible, .ce input:focus, .ce select:focus, .ce textarea:focus, .ce .cia-opt:focus-visible, .ce .choix button:focus-visible { outline: 2px solid #E7CF8A; outline-offset: 2px; }
.ce-corps a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ce .champ label { color: #fff; }
/* Un choix coché, sur le vert : doré (le vert sapin de l'app ne se verrait pas). */
.ce .cia-opt.on, .ce .choix button.on { background: #E7CF8A; border-color: #E7CF8A; color: #17463F; }
.ce .cia-opt.on .cia-badge { background: #fff; color: #17463F; }
.ce .cia-opt:hover { border-color: #E7CF8A; }
.ce .cia-manque { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); color: #fff; }
.ce .cia-manque .cia-note { color: #E7CF8A; }
.ce .attente .rond { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
.ce .att-barre { background: rgba(255,255,255,.24); }
.ce .att-barre i { background: #E7CF8A; }
.ce .erreur { margin-bottom: 0; }
@media (max-width: 700px) {
  .ce-corps { padding: 4px 16px 18px; }
  .ce-suite .btn { flex: 1 1 auto; padding-left: 14px; padding-right: 14px; }
  .ce-suite .btn.ce-avant { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; }
  .ce-suite .btn.lien { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ce-carte { animation: none; } .ce-progres-barre i { transition: none; } }