/* Charte Ski-Mojo (relevée sur www.ski-mojo.com le 13/11/2026) :
   rouge #E30019 (boutons, accents), noir #000, blanc, gris clair #F5F5F5,
   gris texte #69727D, bordures #D5D8DC, police Manrope. */
:root {
  --bg: #f5f5f5; --card: #fff; --txt: #000; --mute: #69727d;
  --line: #d5d8dc; --acc: #e30019; --acc-soft: #fdebed; --noir: #000;
  --warn: #a15c00; --warn-bg: #fff4e0;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--txt); }
header { position: relative; background: #fff; color: var(--noir); padding: 20px 16px; text-align: center; border-bottom: 4px solid var(--acc); }
/* Menu des langues, en haut à droite de l'en-tête */
.langue { position: absolute; top: 10px; right: 12px; }
.langue select { font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 28px 6px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 10px; appearance: none; cursor: pointer; }
.langue select:hover, .langue select:focus { border-color: var(--noir); outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print { .langue { display: none; } }
.logo { display: block; margin: 0 auto 10px; width: 220px; max-width: 70%; height: auto; }
header h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.sub { margin: 4px 0 0; color: var(--mute); }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
.intro { background: var(--card); border-left: 4px solid var(--acc); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; line-height: 1.5; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
h2 { font-size: 1rem; font-weight: 700; margin: 0 0 12px; }
.row { display: flex; gap: 12px; }
.row label { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--mute); }
input[type=number] { font: inherit; font-size: 1.1rem; padding: 10px; border: 1px solid var(--line); border-radius: 8px; width: 100%; }
input[type=number]:focus { outline: 2px solid var(--acc); border-color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.chip span:hover { border-color: var(--noir); }
.chip input:checked + span { background: var(--noir); color: #fff; border-color: var(--noir); }
.chip input:focus-visible + span { outline: 2px solid var(--acc); }
.btn { width: 100%; padding: 14px; font: inherit; font-size: 1.05rem; font-weight: 700; background: var(--acc); color: #fff; border: 0; border-radius: 8px; cursor: pointer; }
.btn:hover { background: #c40016; }
.erreur { color: var(--acc); font-weight: 600; }
.resultat { border: 2px solid var(--noir); }
.modele { font-size: 1.4rem; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pastille { width: 26px; height: 26px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px rgba(0,0,0,.1); }
.modele small { display: block; font-size: .8rem; color: var(--mute); }
.alt { margin: -6px 0 10px; font-size: .9rem; color: var(--mute); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.alt[hidden] { display: none; }
.badge-reco { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 10px; border-radius: 999px; background: var(--acc); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.rappel { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; padding: 10px 12px; background: var(--bg); border-radius: 8px; font-size: .88rem; font-weight: 700; }
.rappel span { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.rappel small { font-weight: 400; color: var(--mute); margin-right: 2px; }
.btn-lien { font: inherit; font-size: .85rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--noir); background: #fff; color: var(--noir); cursor: pointer; }
.btn-lien:hover { background: var(--noir); color: #fff; }
.bloc { background: var(--bg); border-radius: 10px; padding: 12px 14px; margin-top: 10px; font-size: .92rem; }
.bloc ul { margin: 6px 0 0; padding-left: 18px; }
.bloc li { margin-bottom: 4px; }
.bloc p { margin: 6px 0 0; }
.k { display: block; font-size: .78rem; font-weight: 700; color: var(--acc); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.mute { color: var(--mute); }
.valeur { font-size: 1.1rem; font-weight: 800; margin: 2px 0 0 !important; }
.valeur .mute { font-size: .85rem; font-weight: 400; }
/* Bloc jambe : schéma + repères numérotés */
/* Schéma au centre : repère 1 (ressort) à gauche, repères 2-3 (tiges) à droite */
.jambe { display: grid; grid-template-columns: 1fr 180px 1fr; grid-template-areas: "c23 schema c1"; gap: 12px; align-items: stretch; margin-top: 6px; }
.jambe .col-1 { grid-area: c1; justify-content: center; }
.jambe .col-23 { grid-area: c23; justify-content: space-between; padding: 8px 0 !important; }
.schema { grid-area: schema; position: relative; width: 100%; align-self: center; background: #fff; border-radius: 8px; }
.schema img { display: block; width: 100%; height: auto; }
.schema svg { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 480px) {
  .jambe { grid-template-columns: 1fr; grid-template-areas: "schema" "c1" "c23"; }
  .schema { width: 190px; justify-self: center; }
  .jambe .col-23 { padding: 0 !important; gap: 12px; }
}
.schema .repere line { stroke: var(--acc); stroke-width: 7; }
.schema .repere circle { fill: var(--acc); }
.schema .repere .pt { stroke: #fff; stroke-width: 5; }
.schema .repere text { fill: #fff; font-size: 54px; font-weight: 800; text-anchor: middle; font-family: inherit; }
.reperes { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.reperes li { display: flex; gap: 8px; margin: 0 !important; }
.reperes .num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.reperes li > div { flex: 1; min-width: 0; }
.attention { clear: both; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: .85rem; margin-top: 8px !important; }
/* Fil des grandes phases (sous l'en-tête) */
.parcours { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.parcours ol { display: flex; max-width: 640px; margin: 0 auto; padding: 0 8px; list-style: none; }
.parcours li { flex: 1; position: relative; }
.parcours li + li::before { content: ""; position: absolute; left: -50%; right: 50%; top: 26px; height: 2px; background: var(--line); z-index: 0; }
.parcours li.fait + li::before, .parcours li.actif::before { background: var(--noir); }
.parcours button { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; font: inherit; background: none; border: 0; cursor: pointer; color: var(--mute); }
.parcours button:disabled { cursor: default; }
.pc-num { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line); background: #fff; font-weight: 800; }
.pc-txt { font-size: .78rem; font-weight: 700; text-align: center; line-height: 1.2; }
.pc-txt small { display: block; font-weight: 600; font-size: .68rem; }
.parcours li.actif .pc-num { background: var(--acc); border-color: var(--acc); color: #fff; }
.parcours li.actif .pc-txt { color: var(--noir); }
.parcours li.fait .pc-num { background: var(--noir); border-color: var(--noir); color: #fff; }
.parcours li.fait .pc-txt { color: var(--noir); }
.parcours li.a-venir { opacity: .55; }
.parcours li.a-venir .pc-num { border-style: dashed; }
.parcours button:not(:disabled):hover .pc-txt { text-decoration: underline; }
/* Tête de phase : bandeau noir qui annonce la grande phase en cours */
.phase-tete { background: var(--noir); color: #fff; border-radius: 12px; padding: 14px 16px; margin: 0 0 14px; }
.phase-tete .pt-k { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ff6b7a; }
.phase-tete h2 { margin: 2px 0 2px; font-size: 1.35rem; font-weight: 800; color: #fff; }
.phase-tete p { margin: 0; font-size: .9rem; color: #d5d8dc; }

/* Avertissements « limites du guide » en tête du résultat */
.limites { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.limite { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--warn-bg); border: 2px solid #f0a020; border-radius: 10px; color: #5c3a00; }
.limite .i-attention-ico { color: #c77700; }
.limite p { margin: 0; font-weight: 600; font-size: .92rem; line-height: 1.45; }

/* Vidéo d'étape / de sous-bloc */
.i-video { margin: 0 0 14px; border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.i-video iframe, .i-video video { display: block; width: 100%; height: 100%; border: 0; }
/* Bandeau compact (15/11/2026) : pas d'aperçu, juste « Vidéo disponible » (lien) ou « bientôt disponible » */
.i-video.a-venir, .i-video.dispo { aspect-ratio: auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg); border: 1.5px dashed var(--line); color: var(--mute); font-weight: 600; font-size: .9rem; }
/* Pas de rouge (15/11/2026) : couleurs neutres, trait plein, texte noir */
.i-video.dispo { border-style: solid; color: var(--txt); text-decoration: none; }
.i-video.dispo:hover, .i-video.dispo:focus-visible { background: #ebedef; }
.i-video.dispo .iv-play { background: var(--noir); }
/* Accordéon vidéo (15/11/2026) : bandeau cliquable, vidéo en pleine largeur dans l'app une fois ouvert */
.i-video-acc { margin: 0 0 14px; }
.i-video-acc > summary { list-style: none; cursor: pointer; margin: 0; }
.i-video-acc > summary::-webkit-details-marker { display: none; }
.i-video-acc[open] > summary { border-radius: 10px 10px 0 0; }
.iv-chevron { margin-left: auto; width: 10px; height: 10px; border-right: 2.5px solid var(--txt); border-bottom: 2.5px solid var(--txt); transform: rotate(45deg); margin-top: -4px; transition: transform .2s; }
.i-video-acc[open] .iv-chevron { transform: rotate(-135deg); margin-top: 4px; }
.iv-cadre { width: 100%; background: #000; border: 1.5px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; overflow: hidden; }
.iv-cadre.horizontal { aspect-ratio: 16 / 9; }
/* Vidéo verticale (Shorts) : pleine largeur, hauteur limitée pour rester visible en entier à l'écran */
.iv-cadre.vertical { aspect-ratio: 9 / 16; max-height: 80vh; }
.iv-cadre iframe, .iv-cadre video { display: block; width: 100%; height: 100%; border: 0; }
.iv-play { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: #fff; font-size: .75rem; padding-left: 2px; }

/* Fiche imprimable : invisible à l'écran, seule visible à l'impression */
.fiche { display: none; }
@media print {
  body.impression-fiche > *:not(#fiche) { display: none !important; }
  body.impression-fiche #fiche { display: block; font-family: "Manrope", sans-serif; color: #000; }
  .f-tete { display: flex; align-items: center; gap: 18px; border-bottom: 3px solid #e30019; padding-bottom: 12px; margin-bottom: 16px; }
  .f-tete img { width: 170px; height: auto; }
  .f-tete h1 { margin: 0; font-size: 20pt; }
  .f-tete p { margin: 4px 0 0; color: #555; }
  .fiche h2 { font-size: 13pt; margin: 18px 0 6px; text-transform: uppercase; letter-spacing: .05em; }
  .fiche table { width: 100%; border-collapse: collapse; font-size: 11pt; }
  .fiche th, .fiche td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #ccc; }
  .f-infos th { width: 35%; color: #555; font-weight: 600; }
  .f-reglages thead th { background: #f0f0f0; }
  .f-idem { font-weight: 400; color: #555; }
  .f-avert { margin: 18px 0 0; padding: 10px 12px; border: 2px solid #e30019; border-radius: 8px; font-size: 10.5pt; }
  .f-pied { margin-top: 18px; text-align: center; color: #555; font-size: 9pt; }
}

/* Phase 5 : C'est parti ! */
.c-bloc { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 14px; background: #fff; }
.c-bloc h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; }
.c-bloc ul { margin: 0; padding-left: 20px; }
.c-bloc li { margin: 6px 0; line-height: 1.45; }
.c-bloc.securite { border: 2px solid var(--acc); background: #fdecee; }
.c-bloc.securite h3 { color: var(--acc); text-transform: uppercase; letter-spacing: .04em; font-size: .95rem; }
.c-bloc.securite li { color: #5a0010; font-weight: 600; }
.c-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--noir); color: #fff; font-size: .85rem; }

/* Phase 4 : fiche des réglages définitifs */
.d-intro { margin: 0 0 14px; line-height: 1.5; }
.d-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.d-ligne { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr; gap: 10px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); background: #fff; }
.d-ligne:first-child { border-top: 0; }
.d-entete { background: var(--bg); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); padding: 8px 14px; }
.d-label { font-weight: 700; }
.d-base { color: var(--mute); }
.d-base small, .d-champ small { display: none; }
.d-ligne.fixe .d-label, .d-ligne.fixe .d-base { color: var(--mute); }
.d-champ > span { display: flex; align-items: center; gap: 6px; }
.d-champ select { font: inherit; width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--noir); border-radius: 8px; background: #fff; }
.d-champ input { font: inherit; width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--noir); border-radius: 8px; }
.d-champ input:focus { outline: 2px solid var(--acc); border-color: transparent; }
.d-champ i { font-style: normal; font-size: .85rem; color: var(--mute); }
.d-ok { margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: #eaf6ec; color: #1a7f37; font-weight: 600; }
@media (max-width: 480px) {
  .d-entete { display: none; }
  .d-ligne { grid-template-columns: 1fr 1fr; }
  .d-label { grid-column: 1 / -1; }
  .d-base small, .d-champ small { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); margin-bottom: 2px; }
}
@media print {
  header, .parcours, .i-haut, .i-nav, .d-ok, .avert { display: none !important; }
  body, main { background: #fff; }
  .phase-tete { background: #fff; color: #000; border: 2px solid #000; }
  .phase-tete h2 { color: #000; }
}

/* Fiche connecteur (page de résultat) : photo à gauche, type à droite, bandeau « emplacement » dessous */
.cx { display: grid; grid-template-columns: 116px 1fr; gap: 0; margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cx-photo { display: flex; align-items: center; justify-content: center; padding: 10px; background: #fff; border-right: 1px solid var(--line); }
.cx-photo img { display: block; width: 100%; height: 96px; object-fit: contain; }
.cx-infos { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; }
.cx-k { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.cx-type { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.cx-note { font-size: .82rem; color: var(--mute); }
.cx-note[hidden] { display: none; }
.cx-pos { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-top: 1px solid var(--line); font-weight: 700; font-size: .95rem; }
.cx-picto { flex: 0 0 auto; width: 76px; display: flex; justify-content: center; }
.cx-picto svg { display: block; width: 100%; height: auto; max-height: 44px; }
.cx-pos.a-venir { font-weight: 600; color: var(--mute); }
.cx-pos.a-venir .cx-picto { width: 36px; }
/* ===== Installation pas à pas ===== */
.i-haut { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .85rem; }
.i-progression { display: flex; gap: 4px; margin-bottom: 14px; }
.i-progression i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.i-progression i.fait { background: var(--noir); }
.i-progression i.en-cours { background: var(--acc); }
#installation h2 { font-size: 1.15rem; }
.i-bloc + .i-bloc { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--line); }
.i-bloc h3 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.i-bloc h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--acc); }
.i-images:empty { display: none; }
/* Bloc de contrôle (présentation différente des blocs d'actions) */
.i-bloc-controle h3::before { display: none; }
.i-bloc-controle h3 { color: var(--noir); }
.ico-controle { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--noir); }
.ico-controle svg { width: 26px; height: 26px; display: block; }
.controle { border: 2px solid var(--noir); border-radius: 10px; overflow: hidden; background: #fff; }
.c-ligne { display: grid; grid-template-columns: 130px 1fr; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.c-ligne p { margin: 0; }
.c-k { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; line-height: 1.6; }
.c-consigne { background: var(--bg); }
.c-consigne p { font-weight: 700; }
.c-corriger .c-k { color: #f08a00; }
.c-pourquoi .c-k { color: var(--acc); }
.c-pourquoi p { color: var(--mute); font-size: .9rem; }
.c-ok { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-weight: 700; cursor: pointer; }
.c-ok input { width: 20px; height: 20px; accent-color: #1a7f37; }
.controle.fait { border-color: #1a7f37; }
.controle.fait .c-ok { background: #eaf6ec; color: #1a7f37; }
@media (max-width: 480px) { .c-ligne { grid-template-columns: 1fr; gap: 2px; } }
.i-images { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 12px; }
.i-images figure { margin: 0; flex: 1 1 200px; max-width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.i-images img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.i-images figure.groupe { flex-basis: 100%; max-width: 560px; }
/* Dessins côte à côte à hauteur égale (étape « Installer les jambes ») */
.i-images figure.groupe.meme-hauteur > div { justify-content: space-evenly; align-items: center; gap: 14px; }
/* Même hauteur pour tous les dessins (même échelle visuelle) ; hauteur réduite sur petit écran pour tenir sur une ligne */
.i-images figure.groupe.meme-hauteur img { flex: 0 0 auto; width: auto; height: clamp(120px, 28vw, 190px); max-width: none; object-fit: contain; }
.i-images figure.large { flex-basis: 100%; max-width: 600px; }
.i-images figure.groupe > div { display: flex; gap: 8px; align-items: center; }
.i-images figure.groupe img { flex: 1 1 0; min-width: 0; }
.i-bloc h3 .e-crit { margin-left: 2px; }
/* Point d'attention (sécurité) bien visible */
.i-attention { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; background: #fdecee; border: 2px solid var(--acc); border-radius: 10px; color: #7a0010; }
.i-attention-ico { font-size: 1.6rem; line-height: 1; color: var(--acc); }
.i-attention b { display: block; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; color: var(--acc); }
.i-attention p { margin: 2px 0 0; font-weight: 600; font-size: .95rem; }
/* Même échelle : largeur fixée en JS (ajusterEchelle), pas d'étirement */
.meme-echelle figure { flex: 0 0 auto; max-width: 100%; }
.meme-echelle figure.groupe { flex: 0 0 100%; max-width: 100%; }
.meme-echelle img, .meme-echelle figure.groupe img { flex: none; max-height: none; width: auto; }
.meme-echelle figure.groupe > div { justify-content: center; align-items: flex-end; }
.i-images figcaption { font-size: .78rem; color: var(--mute); text-align: center; margin-top: 4px; }
.i-etapes { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.etape { padding: 10px 12px; background: var(--bg); border-radius: 8px; border-left: 4px solid var(--line); }
.etape.crit-3 { border-left-color: var(--acc); }
.etape.crit-2 { border-left-color: #f08a00; }
.etape.crit-1 { border-left-color: var(--mute); }
.etape::marker { font-weight: 800; }
.e-ligne { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.e-ligne input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #1a7f37; cursor: pointer; }
.e-action { font-weight: 600; }
.etape.fait { background: #eaf6ec; }
.etape.fait .e-action { color: var(--mute); }
.e-pourquoi { margin: 6px 0 0 30px; font-size: .8rem; color: var(--mute); }
.e-pourquoi summary { cursor: pointer; font-weight: 600; color: var(--txt); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.e-pourquoi summary::-webkit-details-marker { display: none; }
.e-pourquoi summary::before { content: "ⓘ"; color: var(--acc); font-size: .95rem; }
.e-pourquoi[open] { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.e-pourquoi[open] summary { margin-bottom: 4px; }
/* Rappel du réglage en haut de l'installation */
.i-reglage { background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.i-reglage-titre { margin: 0 0 6px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--acc); }
.i-reglage-valeurs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; font-size: .9rem; font-weight: 800; }
.i-reglage-valeurs span { background: #fff; border: 1.5px solid var(--noir); border-radius: 8px; padding: 5px 10px; }
.i-reglage-valeurs small, .i-reglage .rappel small { display: block; font-size: .68rem; font-weight: 400; color: var(--mute); }
.i-reglage .rappel { margin: 0; padding: 0; background: none; }
.e-crit { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--mute); vertical-align: middle; }
.crit-3 .e-crit { background: var(--acc); }
.crit-2 .e-crit { background: #f08a00; }
.e-controle { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; font-size: .88rem; cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.e-controle input { margin-top: 3px; accent-color: var(--noir); width: 16px; height: 16px; flex: none; }
.e-impact { margin: 6px 0 0; font-size: .8rem; color: var(--mute); }
.i-fin { list-style: none; font-size: 1rem; font-weight: 600; padding: 12px; background: var(--bg); border-radius: 8px; }
.i-avert { margin: 12px 0 0; background: var(--warn-bg); color: var(--warn); padding: 8px 10px; border-radius: 8px; font-size: .88rem; }
.i-nav { display: flex; gap: 10px; margin-top: 16px; }
.i-nav .btn { flex: 1; }
.btn-sec { background: #fff; color: var(--noir); border: 1.5px solid var(--noir); }
.btn-sec:hover { background: var(--noir); color: #fff; }
[hidden] { display: none !important; }
.btn-suite { margin-top: 16px; }
.explication { margin-top: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: .9rem; }
.exp-bloc { padding: 8px 0; border-bottom: 1px solid var(--line); }
.exp-bloc:first-child { padding-top: 0; }
.exp-bloc b { display: block; margin-bottom: 2px; }
.exp-bloc p { margin: 4px 0 0; }
.exp-fin { margin: 10px 0 0; font-weight: 600; }
.explication details { margin-top: 10px; }
.suite-info { text-align: center; font-size: .85rem; margin: 8px 0 0; }
.conseils { margin: 12px 0 0; padding-left: 18px; font-size: .9rem; }
.jauge { display: flex; gap: 3px; margin-top: 6px; }
.jauge i { font-style: normal; font-size: .7rem; width: 26px; text-align: center; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--mute); }
.jauge i.on { background: var(--noir); color: #fff; border-color: var(--noir); font-weight: 700; }
.alertes { list-style: none; padding: 0; margin: 14px 0 0; }
.alertes li { background: var(--warn-bg); color: var(--warn); padding: 8px 10px; border-radius: 8px; margin-bottom: 6px; font-size: .9rem; }
details { margin-top: 14px; font-size: .85rem; color: var(--mute); }
.avert { text-align: center; font-size: .8rem; color: var(--mute); }