/* LIZ SAFETY IA – feuille de style
   Charte Group LTT / LIZ subsidiary : rouge LIZ, noir, grège, sable.
   Règle : le rouge est réservé au symbole LIZ et aux messages d'arrêt.
   Le bouton principal est noir. Aucun vert sur une situation. */

:root {
  --rouge: #E4032E;
  --rouge-texte: #C1001F;
  --noir: #111111;
  --nuit: #1A0204;
  --blanc: #FFFFFF;
  --grege: #E9E5DD;
  --grege-clair: #F4F1EC;
  --sable: #BEB091;
  --texte2: #57514B;
  --orange-fond: #FFF1E0;
  --orange-texte: #8A4B00;
  --rayon: 14px;
  --police: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.4;
  color: var(--noir);
  background: var(--grege-clair);
}
img { max-width: 100%; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- en-tête ---------- */
.entete {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  background: var(--blanc);
  border-bottom: 1px solid var(--sable);
  padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
}
.entete-logo { border: 0; background: none; padding: 0; cursor: pointer; display: flex; }
.entete-logo img { height: 34px; width: auto; display: block; }
.entete-titre { flex: 1; font-size: 18px; letter-spacing: .5px; white-space: nowrap; }
.entete-titre .liz { font-weight: 800; }
.entete-titre .nom { font-weight: 300; }
.btn-icone {
  width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--grege);
  background: var(--blanc); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.btn-icone svg { width: 22px; height: 22px; }

/* ---------- conteneur ---------- */
.app { max-width: 640px; margin: 0 auto; padding: 16px 16px 120px; }
.chargement { text-align: center; color: var(--texte2); padding: 40px 0; }
h1 { font-size: 26px; font-weight: 600; line-height: 1.15; margin: 4px 0 8px; }
h2 { font-size: 20px; font-weight: 600; margin: 22px 0 10px; }
h3 { font-size: 17px; font-weight: 600; margin: 16px 0 8px; }
p { margin: 0 0 10px; }
.discret { color: var(--texte2); font-size: 15px; }
.petit { font-size: 13px; }
.sur-titre { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--texte2); margin: 0 0 4px; }

/* ---------- accueil ---------- */
.hero {
  background: radial-gradient(130% 110% at 100% 0%, #E4032E 0%, #7A0A18 36%, #1A0204 72%, #111 100%);
  color: var(--blanc); border-radius: 20px; padding: 22px 20px; margin-bottom: 14px;
}
.hero .titre-app { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 14px; }
.hero .titre-app .liz { font-weight: 800; font-size: 34px; line-height: 1; }
.hero .titre-app .nom { font-weight: 300; font-size: 28px; line-height: 1.05; letter-spacing: 1px; }
.hero .titre-app svg { width: 22px; height: 34px; fill: var(--rouge); stroke: none; margin-bottom: 10px; }
.hero p { color: #EADFD5; margin: 0; font-size: 16px; }
.endossement { font-size: 11px; color: var(--texte2); text-align: right; margin-top: 18px; }
.endossement b { font-weight: 800; }
.endossement span { font-weight: 300; }

/* ---------- boutons ---------- */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; width: 100%; padding: 12px 18px;
  border-radius: var(--rayon); border: 0; cursor: pointer;
  font-size: 18px; font-weight: 600; text-decoration: none; text-align: center;
}
.btn svg { width: 24px; height: 24px; flex-shrink: 0; }
.btn-principal { background: var(--noir); color: var(--blanc); }
.btn-principal:disabled { background: #8f8a84; cursor: not-allowed; }
.btn-secondaire { background: var(--grege); color: var(--noir); }
.btn-contour { background: var(--blanc); color: var(--noir); border: 1.5px solid var(--noir); }
.btn-arret { background: var(--blanc); color: var(--rouge-texte); border: 2px solid var(--rouge); }
.btn-grand { min-height: 88px; justify-content: flex-start; text-align: left; padding: 16px 18px; }
.btn-grand .pastille { width: 52px; height: 52px; border-radius: 14px; background: var(--rouge); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-grand .pastille svg { stroke: var(--blanc); width: 28px; height: 28px; }
.btn-grand .txt { display: flex; flex-direction: column; gap: 2px; }
.btn-grand .txt small { font-size: 14px; font-weight: 400; color: #D9D4CC; }
.btn-lien { background: none; border: 0; color: var(--texte2); text-decoration: underline; cursor: pointer; padding: 10px; font-size: 16px; }
.grille2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pile { display: flex; flex-direction: column; gap: 10px; }
.btn-tuile { min-height: 84px; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; font-size: 16px; padding: 12px 14px; }

/* ---------- bandeau IA ---------- */
.bandeau-ia {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--grege); border-radius: 12px; padding: 10px 12px; margin: 10px 0 14px;
  font-size: 13.5px; line-height: 1.35;
}
.bandeau-ia svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.alerte {
  border: 2px solid var(--rouge); color: var(--rouge-texte); background: #FFF5F6;
  border-radius: 12px; padding: 12px 14px; font-weight: 600; margin: 10px 0;
}
.alerte svg { width: 22px; height: 22px; vertical-align: -5px; margin-right: 4px; }
.info { background: var(--orange-fond); color: var(--orange-texte); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; margin: 10px 0; }

/* ---------- étapes ---------- */
.etapes { display: flex; gap: 4px; margin: 0 0 12px; }
.etapes span { flex: 1; height: 6px; border-radius: 3px; background: var(--sable); opacity: .45; }
.etapes span.fait { background: var(--noir); opacity: 1; }
.etapes span.actif { background: var(--rouge); opacity: 1; }
.barre-bas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  background: var(--blanc); border-top: 1px solid var(--grege);
  padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom));
}
.barre-bas .contenu { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; }
.barre-bas .btn { min-height: 56px; }
.barre-bas .btn-retour { width: 64px; flex-shrink: 0; }

/* ---------- cartes / champs ---------- */
.carte { background: var(--blanc); border-radius: 16px; padding: 14px; margin: 10px 0; border: 1px solid var(--grege); }
label.champ { display: block; margin: 12px 0; }
label.champ > span { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
input[type=text], input[type=password], select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid #CFC8BC; background: var(--blanc); font-size: 17px;
}
textarea { min-height: 140px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

.ouinon { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ouinon.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix {
  min-height: 52px; border-radius: 12px; border: 1.5px solid var(--noir); background: var(--blanc);
  font-weight: 600; font-size: 16px; cursor: pointer; padding: 6px 8px;
}
.choix[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }
.choix.non[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  min-height: 46px; border-radius: 23px; border: 1.5px solid var(--noir); background: var(--blanc);
  padding: 8px 14px; cursor: pointer; font-size: 15px; font-weight: 500;
}
.puce[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }
.question-bloc { border-top: 1px solid var(--grege); padding-top: 12px; margin-top: 12px; }
.question-bloc:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.question-titre { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.question-titre b { font-size: 17px; }
.relances { margin-top: 10px; padding-left: 12px; border-left: 3px solid var(--sable); }
.relances .q { font-size: 15px; margin: 10px 0 6px; }

/* ---------- photo ---------- */
.zone-photo { position: relative; border-radius: 16px; overflow: hidden; background: #222; }
.zone-photo canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.photo-vide {
  border: 2px dashed var(--sable); border-radius: 16px; padding: 30px 16px; text-align: center; background: var(--blanc);
}
.photo-vide svg { width: 48px; height: 48px; color: var(--texte2); }
.outils-photo { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.outils-photo .btn { width: auto; flex: 1; min-height: 48px; font-size: 15px; }
.case { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.case input { width: 26px; height: 26px; flex-shrink: 0; accent-color: #111; margin: 0; }

/* ---------- regard du chef ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tuile {
  min-height: 88px; border-radius: 14px; border: 0; background: var(--grege); padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer; font-weight: 600; font-size: 15.5px; line-height: 1.2;
}
.tuile svg { width: 28px; height: 28px; }
.tuile[aria-pressed="true"] { background: var(--noir); color: var(--blanc); }

/* ---------- second regard ---------- */
.carte-ia { border: 2px solid var(--noir); border-radius: 16px; padding: 14px; margin: 12px 0; background: var(--blanc); }
.carte-ia.decidee { border-color: var(--sable); }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.etiquette { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; background: var(--grege); color: var(--noir); }
.etiquette.noire { background: var(--noir); color: var(--blanc); }
.etiquette.corrigee { background: var(--orange-fond); color: var(--orange-texte); }
.rubrique { margin: 8px 0; }
.rubrique .sur-titre { font-size: 11.5px; margin-bottom: 2px; }
.rubrique .texte { font-size: 16.5px; }
.rubrique .texte.fort { font-weight: 600; }
.source { font-size: 13px; color: var(--texte2); margin: 6px 0 10px; }
.decisions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.decisions .choix { font-size: 14.5px; min-height: 56px; line-height: 1.1; }
.liste-nv { margin: 0; padding-left: 20px; }
.liste-nv li { margin: 4px 0; }
.attente { text-align: center; padding: 40px 10px; }
.roue { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--grege); border-top-color: var(--rouge); animation: tourne 1s linear infinite; margin: 0 auto 16px; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roue { animation: none; } }

/* ---------- synthèse / décision ---------- */
.chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.chiffre { border-radius: 12px; padding: 10px; background: var(--grege); }
.chiffre.noir { background: var(--noir); color: var(--blanc); }
.chiffre b { display: block; font-size: 26px; font-weight: 600; }
.chiffre span { font-size: 13px; line-height: 1.2; display: block; }
.action-ligne { display: grid; grid-template-columns: 1fr; gap: 6px; border-bottom: 1px solid var(--grege); padding: 10px 0; }
.action-ligne:last-child { border-bottom: 0; }
.action-ligne .ligne-haut { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }

/* ---------- causerie ---------- */
.causerie-doc { background: var(--blanc); border-radius: 16px; padding: 18px; border: 1px solid var(--grege); }
.causerie-entete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border-bottom: 3px solid var(--noir); padding-bottom: 10px; margin-bottom: 12px; }
.causerie-entete img { height: 40px; }
.causerie-entete .t { font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.causerie-entete .st { font-size: 13px; color: var(--texte2); }
.cs-section { margin: 14px 0; }
.cs-section h3 { margin: 0 0 6px; padding: 6px 10px; background: var(--noir); color: var(--blanc); border-radius: 6px; font-size: 15px; letter-spacing: .5px; text-transform: uppercase; }
.cs-section.risques h3 { background: var(--rouge); }
.cs-section ul { margin: 0; padding-left: 22px; }
.cs-section li { margin: 4px 0; }
.cs-section textarea { min-height: 110px; font-size: 16px; }
.epi-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.epi { border: 1.5px solid var(--grege); border-radius: 12px; padding: 6px; text-align: center; font-size: 12px; background: var(--blanc); cursor: pointer; }
.epi img { width: 56px; height: 56px; object-fit: contain; display: block; margin: 0 auto 4px; }
.epi[aria-pressed="false"] { opacity: .35; }
.emargement-ligne { display: flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--grege); padding: 8px 0; }
.emargement-ligne .nom { flex: 1; }
.emargement-ligne img { height: 40px; width: auto; background: #fafafa; border-radius: 6px; }
.signature-zone { border: 2px dashed var(--sable); border-radius: 12px; background: var(--blanc); touch-action: none; width: 100%; height: 180px; display: block; }
.pied-doc { font-size: 12px; color: var(--texte2); margin-top: 14px; border-top: 1px solid var(--grege); padding-top: 8px; display: flex; justify-content: space-between; gap: 8px; }

/* ---------- bibliothèque / indicateurs ---------- */
.rex-item { display: flex; gap: 12px; align-items: center; background: var(--blanc); border: 1px solid var(--grege); border-radius: 14px; padding: 10px; margin: 8px 0; cursor: pointer; width: 100%; text-align: left; }
.rex-item img, .rex-item .vignette { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--grege); flex-shrink: 0; }
.rex-item .info-rex { flex: 1; min-width: 0; }
.rex-item .info-rex b { display: block; font-size: 16px; }
.rex-item .info-rex span { font-size: 13.5px; color: var(--texte2); }
.badge { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 4px 9px; background: var(--grege); white-space: nowrap; }
.badge.arrete { background: var(--rouge); color: var(--blanc); }
.badge.adapte { background: var(--noir); color: var(--blanc); }
.kpi-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--blanc); border-radius: 14px; padding: 12px; border: 1px solid var(--grege); }
.kpi b { display: block; font-size: 30px; font-weight: 600; line-height: 1.1; }
.kpi span { font-size: 13.5px; color: var(--texte2); }
.barre-kpi { margin: 8px 0; }
.barre-kpi .lib { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 3px; }
.barre-kpi .piste { height: 10px; border-radius: 5px; background: var(--grege); overflow: hidden; display: flex; }
.barre-kpi .piste i { display: block; height: 10px; background: var(--noir); }
.barre-kpi .piste i.ia { background: var(--sable); }
.legende { display: flex; gap: 14px; font-size: 13px; color: var(--texte2); margin: 6px 0; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; background: var(--noir); }
.legende i.ia { background: var(--sable); }

/* ---------- modale / toast ---------- */
.modale { position: fixed; inset: 0; z-index: 50; background: rgba(17,17,17,.55); display: flex; align-items: flex-end; justify-content: center; }
.modale[hidden] { display: none; }
.modale .boite { background: var(--blanc); width: 100%; max-width: 640px; border-radius: 20px 20px 0 0; padding: 18px 16px; padding-bottom: max(18px, env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 60; background: var(--noir); color: var(--blanc); padding: 12px 18px; border-radius: 12px; font-size: 15px; max-width: 90vw; }
.toast[hidden] { display: none; }

/* ---------- parcours simplifié (V1.1) ---------- */
.btn-photo { min-height: 96px; font-size: 20px; }
.btn-photo svg { width: 30px; height: 30px; }
.photo-apercu { display: block; width: 100%; border-radius: 16px; }
.q-grande { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.question-bloc .ouinon { margin-top: 8px; }
.question-bloc .choix { min-height: 58px; font-size: 18px; }
.facultatif { font-weight: 400; color: var(--texte2); }
.choisi { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--noir); color: var(--blanc); border-radius: 14px; padding: 8px 8px 8px 16px; font-weight: 600; font-size: 18px; }
.choisi span { min-width: 0; }
.choisi .btn-lien { color: var(--grege); flex-shrink: 0; }
.tuiles.ops .tuile { min-height: 64px; justify-content: center; font-size: 16px; }
details.plus { background: var(--blanc); border: 1px solid var(--grege); border-radius: 14px; padding: 0 14px; margin: 14px 0; }
details.plus > summary { min-height: 52px; display: flex; align-items: center; font-weight: 600; cursor: pointer; list-style: none; }
details.plus > summary::-webkit-details-marker { display: none; }
details.plus > summary::before { content: "+"; display: inline-block; width: 22px; font-weight: 800; font-size: 20px; }
details.plus[open] > summary::before { content: "–"; }
details.plus[open] { padding-bottom: 14px; }
details.plus .btn { margin-bottom: 10px; }
.carte-titre { margin: 4px 0 6px; font-size: 19px; }
.carte-ia .texte { font-size: 16.5px; margin: 6px 0; }
.carte-ia .texte.fort { font-weight: 600; }
.detail-carte { margin: 4px 0 10px; }
.detail-carte > summary { color: var(--texte2); text-decoration: underline; cursor: pointer; padding: 8px 0; font-size: 15px; }
.decisions.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.decisions.deux .choix { font-size: 17px; min-height: 58px; }
.btn-decision { min-height: 64px; font-size: 19px; }
.btn-decision[aria-pressed="true"] { outline: 4px solid var(--rouge); outline-offset: 3px; }
.cs-lecture .cs-section .imprime { display: block; }
.cs-lecture .epi { cursor: default; }
.fin-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--noir); color: var(--blanc); display: flex; align-items: center; justify-content: center; margin: 24px auto 12px; }
.fin-ok svg { width: 40px; height: 40px; }

/* ---------- photo annotée (V1.4) ----------
   Repères : noir plein = visible sur la photo ; blanc à bord pointillé = à confirmer.
   Aucun vert, aucun symbole de validation : un repère indique où regarder, rien de plus. */
.annot { margin: 12px 0 16px; scroll-margin-top: 76px; }
.annot-cadre { position: relative; margin: 0 auto; line-height: 0; border-radius: 14px; overflow: hidden; background: #222; }
.annot-cadre img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.annot-reperes { position: absolute; inset: 0; line-height: 1.2; }
.annot-reperes[hidden] { display: none; }
.repere {
  position: absolute; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 800 16px/1 var(--police); border: 2.5px solid var(--blanc);
  box-shadow: 0 1px 6px rgba(0,0,0,.55);
}
.repere::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; } /* zone tactile ≈ 48 px */
.repere.visible { background: var(--noir); color: var(--blanc); }
.repere.a-confirmer { background: var(--blanc); color: var(--noir); border: 2.5px dashed var(--noir); }
.repere.sel { width: 42px; height: 42px; font-size: 19px; outline: 4px solid var(--sable); outline-offset: 2px; z-index: 2; }
.repere.mini { position: static; transform: none; width: 26px; height: 26px; font-size: 13px; box-shadow: none; flex-shrink: 0; cursor: inherit; border-width: 2px; }
.repere.mini::after { display: none; }
.repere.mini.visible { border-color: var(--noir); }
.annot-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 6px; }
.annot-outils .btn { min-height: 52px; font-size: 16px; }
.annot-legende { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--texte2); margin: 6px 0 4px; }
.annot-legende .repere.mini:nth-of-type(2) { margin-left: 8px; }
.fiche { background: var(--blanc); border: 2px solid var(--noir); border-radius: 16px; padding: 14px; margin-top: 10px; scroll-margin-top: 76px; }
.fiche-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche h3 { margin: 10px 0 8px; font-size: 19px; }
.fiche-ligne { margin: 0 0 10px; font-size: 16.5px; }
.fiche-ligne .sur-titre { display: block; font-size: 11.5px; margin-bottom: 2px; }
.fiche .decisions { margin-top: 4px; }
.fiche-nav { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; gap: 8px; margin-top: 10px; }
.fiche-nav .btn { min-height: 52px; font-size: 16px; padding: 8px; }
.etiquette.pointille { background: var(--blanc); border: 1.5px dashed var(--noir); }
.chip-repere { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 5px; border-radius: 999px; border: 1.5px solid var(--noir); background: var(--blanc); font: 600 13.5px var(--police); color: var(--noir); cursor: pointer; }
.titre-liste { margin-top: 20px; }
.carte-ia { scroll-margin-top: 76px; }
.carte-ia.sel { border-color: var(--noir); box-shadow: 0 0 0 4px var(--sable); }
/* zoom plein écran */
.modale.modale-zoom { background: #111; align-items: stretch; }
.zoom-boite { display: flex; flex-direction: column; width: 100%; height: 100%; }
.zoom-barre { display: grid; grid-template-columns: 56px auto 56px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: #111; }
.zoom-barre .btn { min-height: 48px; font-size: 22px; padding: 6px; }
.zoom-barre .btn-principal { font-size: 16px; background: var(--blanc); color: var(--noir); }
.zoom-niveau { color: var(--blanc); font-size: 15px; text-align: center; min-width: 56px; }
.zoom-vue { position: relative; flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; align-items: flex-start; }
.zoom-vue .annot-cadre { flex-shrink: 0; border-radius: 0; margin: auto; }
.zoom-fiche { display: flex; gap: 10px; align-items: center; background: var(--blanc); padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.zoom-fiche-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15px; line-height: 1.25; }
.zoom-fiche-texte span { color: var(--texte2); font-size: 14px; }
.zoom-fiche .btn { width: auto; min-height: 48px; font-size: 15px; flex-shrink: 0; }
@media print { .annot-outils, .fiche-nav, .chip-repere { display: none !important; } }

/* ---------- impression de la causerie (A4) ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11.5pt; }
  .entete, .barre-bas, .etapes, .bandeau-ia, .no-print, .btn, .btn-lien, #toast { display: none !important; }
  .app { padding: 0; max-width: none; }
  .causerie-doc { border: 0; padding: 0; }
  .cs-section h3 { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-section textarea { display: none; }
  .cs-section .imprime { display: block !important; }
  .epi[aria-pressed="false"] { display: none; }
  .epi { border: 0; }
  .emargement-ligne { break-inside: avoid; }
}
.cs-section .imprime { display: none; }

/* =====================================================================
   v2 : comptes, actions, pilotage SSE, administration
   (charte : pas de vert ; rouge réservé au symbole et aux arrêts ;
   le retard est signalé en orange, comme les messages d'information)
   ===================================================================== */
.entete[hidden] { display: none; }
.hero-connexion { margin-bottom: 16px; }
.bonjour { font-size: 20px; font-weight: 600; margin: 4px 0 12px; }
.btn-retour-haut { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; margin-bottom: 4px; text-decoration: none; }
.btn-retour-haut svg { width: 18px; height: 18px; }
.rex-item .info-rex > span { display: block; }
a.btn { color: inherit; }
.compteur { display: block; font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--texte2); }
.compteur.retard { color: var(--orange-texte); }
select { width: 100%; min-height: 52px; border: 1.5px solid var(--sable); border-radius: 12px; padding: 10px 12px; background: var(--blanc); font-size: 16px; }
.mini-champ { display: block; }
.mini-champ > span { display: block; font-size: 13px; font-weight: 600; color: var(--texte2); margin-bottom: 4px; }
.mini-champ input, .mini-champ select { min-height: 46px; font-size: 15.5px; }
.mini-champ input { width: 100%; border: 1.5px solid var(--sable); border-radius: 12px; padding: 8px 12px; background: var(--blanc); }
.tuile-chantier small { display: block; font-weight: 400; font-size: 13px; color: inherit; opacity: .75; margin-top: 2px; }
.photo-fiche { border-radius: 14px; width: 100%; display: block; margin: 8px 0; }

/* actions à suivre dans le parcours */
.action-suivi { background: var(--blanc); border: 1px solid var(--grege); border-radius: 14px; padding: 12px; margin: 10px 0; }
.action-texte { font-weight: 600; margin-bottom: 8px; }
.action-libre { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.action-libre input { flex: 1; min-height: 48px; border: 1.5px solid var(--sable); border-radius: 12px; padding: 8px 12px; }
.action-champs { display: grid; grid-template-columns: 1fr; gap: 8px; }
.puces-ech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.puce-ech { border: 1.5px solid var(--sable); background: var(--blanc); border-radius: 999px; padding: 8px 12px; font-size: 14.5px; font-weight: 600; cursor: pointer; min-height: 40px; display: inline-flex; align-items: center; position: relative; }
.puce-ech[aria-pressed="true"] { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.puce-date input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }

/* statuts d'action */
.action-carte { margin: 10px 0; }
.action-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.statut { display: inline-block; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: var(--grege); }
.st-en_cours { background: var(--sable); }
.st-realisee { background: var(--blanc); border: 1.5px solid var(--noir); }
.st-verifiee { background: var(--noir); color: var(--blanc); }
.st-annulee { background: var(--grege); color: var(--texte2); text-decoration: line-through; }
.st-retard { background: var(--orange-fond); color: var(--orange-texte); border: 1.5px solid var(--orange-texte); }
.photo-action { width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; margin: 8px 0; display: block; }
.commentaire { border-left: 3px solid var(--sable); padding-left: 10px; margin: 8px 0; }
.ligne-retard .info-rex b { font-size: 15px; }

/* pilotage */
details.filtres { background: var(--blanc); border: 1px solid var(--grege); border-radius: 14px; padding: 0 14px; margin: 10px 0 14px; }
details.filtres > summary { min-height: 50px; display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
details.filtres[open] { padding-bottom: 6px; }
.grille-filtres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 10px; }
.grille-filtres .case { grid-column: 1 / -1; }
.chiffres5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffre.retard { background: var(--orange-fond); color: var(--orange-texte); }
.recurrence { padding: 10px 12px; margin: 8px 0; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--blanc); border-radius: 12px; overflow: hidden; }
.tableau th, .tableau td { text-align: left; padding: 8px; border-bottom: 1px solid var(--grege); }
.tableau th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texte2); }
.mini-barre { display: inline-block; height: 8px; background: var(--noir); border-radius: 4px; margin-right: 6px; vertical-align: middle; }

/* administration */
.ligne-personne { border-bottom: 1px solid var(--grege); }
.fiche-compte { background: var(--blanc); border: 1px solid var(--sable); border-radius: 16px; padding: 16px; }
.fc-grand { font-size: 22px; font-weight: 700; word-break: break-all; margin-bottom: 12px; }
.fc-mdp { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .5px; }
.journal-ligne { background: var(--blanc); border-radius: 10px; padding: 8px 10px; margin: 6px 0; font-size: 14px; line-height: 1.35; }
.journal-ligne > span { display: block; }
.journal-ligne.alerte-ligne { border-left: 4px solid var(--rouge); }
code { background: var(--grege); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
@media (max-width: 380px) { .grille-filtres, .chiffres5 { grid-template-columns: 1fr 1fr; } }
@media print {
  .fiche-compte { border: 0; padding: 0; font-size: 13pt; }
  .fiche-compte .fc-grand { font-size: 20pt; }
}

/* =====================================================================
   v2.1 : premier regard, rapprochement, progression
   ===================================================================== */
.decisions.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.decisions.trois .choix { font-size: 15px; padding-left: 4px; padding-right: 4px; }
.point-chef { display: flex; align-items: center; gap: 10px; background: var(--blanc); border: 1px solid var(--grege); border-radius: 12px; padding: 8px 10px; margin: 6px 0; }
.point-chef > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--texte2); }
.point-chef > span { flex: 1; min-width: 0; }
.point-chef .btn-icone { width: 38px; height: 38px; }
.ajout-point { display: flex; gap: 8px; margin: 8px 0; }
.ajout-point input { flex: 1; min-width: 0; min-height: 52px; border: 1.5px solid var(--sable); border-radius: 12px; padding: 10px 12px; background: var(--blanc); font-size: 16px; }
.ajout-point .btn { width: 56px; min-height: 52px; padding: 0; flex-shrink: 0; }
.corr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; margin: 0 0 8px; }
.corr .btn-lien { padding: 4px 0; font-size: 14px; }
.corr-vu { background: var(--grege-clair); border-radius: 10px; padding: 6px 10px; }
.corr-vu > svg { width: 18px; height: 18px; flex-shrink: 0; }
.corr-vu > span { flex: 1; min-width: 60%; }
.corr-attente { color: var(--texte2); font-style: italic; }
.point-propre.ecarte { opacity: .6; }
.bilan-regard .bilan-ligne { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--grege); }
.bilan-regard .bilan-ligne b { font-size: 24px; min-width: 32px; text-align: right; }
.bilan-regard .bilan-ligne.commun b, .bilan-regard .bilan-ligne.propre b { color: var(--noir); }
.bilan-regard .bilan-ligne.ecarte { color: var(--texte2); }
.bilan-regard p.discret { margin-top: 8px; }
.indicateur { margin: 12px 0; }
.indic-valeur { font-size: 30px; font-weight: 600; margin: 2px 0 4px; }
.evol { font-weight: 600; margin-top: 8px; }
.puce-ech.statique { cursor: default; background: var(--grege); border-color: var(--grege); }
.info > svg { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.defile-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } .defile-x .tableau { font-size: 13px; } .defile-x .tableau th, .defile-x .tableau td { padding: 6px 5px; }

/* =====================================================================
   v2.2 : Ma progression visuelle, première utilisation
   ===================================================================== */
.prog-carte { background: var(--blanc); border-radius: 18px; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; margin: 6px 0 12px; }
.prog-carte h2 { margin: 0; font-size: 21px; line-height: 1.2; }
.tendance { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; }
.tendance svg { width: 16px; height: 16px; stroke-width: 2.2; }
.t-progres { background: var(--noir); color: var(--blanc); }
.t-stable { background: var(--grege); }
.t-recul { background: var(--orange-fond); color: var(--orange-texte); }
.t-confirmer { border: 1.5px solid var(--sable); padding: 5px 11px; }
.pastilles-ligne { display: flex; flex-direction: column; gap: 6px; }
.pastilles-tete { display: flex; justify-content: space-between; font-size: 14px; color: var(--texte2); }
.pastilles-tete b { color: var(--noir); }
.pastilles { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.pastille-p { display: inline-block; height: 24px; border-radius: 12px; border: 2px solid var(--sable); box-sizing: border-box; }
.pastille-p.vu { background: var(--noir); border-color: var(--noir); }
.pastille-p.moitie { background: linear-gradient(90deg, var(--noir) 50%, var(--blanc) 50%); border-color: var(--noir); }
.pastille-p.mini { width: 12px; height: 12px; border-radius: 6px; }
.bilan-pt .pastille-p { width: 20px; height: 20px; border-radius: 10px; flex-shrink: 0; }
.legende-p { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--texte2); }
.legende-p > span { display: inline-flex; align-items: center; gap: 6px; }
.mois-bloc { border-top: 1px solid var(--grege); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.mois-barres { display: grid; gap: 14px; align-items: end; height: 110px; }
.mois-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.mois-col b { font-size: 15px; }
.mois-col span { width: 100%; background: var(--noir); border-radius: 6px 6px 0 0; min-height: 2px; }
.mois-col.peu span { background: var(--sable); }
.mois-noms { display: grid; gap: 14px; font-size: 13px; color: var(--texte2); text-align: center; }
.confirme { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.confirme svg, .bilan-pt svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2; }
.rappel-ia { display: flex; gap: 10px; align-items: flex-start; background: var(--grege); border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.35; margin-bottom: 6px; }
.rappel-ia svg { width: 20px; height: 20px; flex-shrink: 0; }
.tuiles-fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tuiles-fam.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuile-fam { background: var(--blanc); border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.tuile-fam svg { width: 30px; height: 30px; }
.tuile-fam b { font-size: 14.5px; line-height: 1.2; }
.tuile-fam span { font-size: 13px; color: var(--texte2); }
.tuile-fam.alerte { background: var(--orange-fond); }
.tuile-fam.alerte svg, .tuile-fam.alerte span { color: var(--orange-texte); }
.prog-propres > div { display: flex; align-items: baseline; gap: 10px; }
.prog-propres > div b { font-size: 30px; font-weight: 600; }
.prog-propres > div span { font-size: 16px; font-weight: 600; }
.btn-niveau2 { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 54px; background: var(--blanc); border: 1px solid var(--grege); border-radius: 14px; padding: 0 14px; font-size: 16px; font-weight: 600; cursor: pointer; margin: 12px 0 6px; }
.centre { text-align: center; }
.prog-vide { align-items: center; text-align: center; }
.prog-ico { width: 48px; height: 48px; color: var(--texte2); stroke-width: 1.6; }
.jauge { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
.jauge span { height: 12px; border-radius: 6px; background: var(--grege); }
.jauge span.plein { background: var(--noir); }
.jauge-txt { font-size: 16px; font-weight: 600; margin: 0; }
.bilan-pt { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 15px; }
.bilan-pt b { font-size: 20px; min-width: 18px; }
.h2-carte { margin: 0 0 8px; font-size: 18px; }
.premiere { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.premiere h1 { font-size: 28px; }
.qui { background: var(--blanc); border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.qui > div { display: flex; flex-direction: column; gap: 4px; }
.qui > div b { font-size: 17px; }
.qui > div span { font-size: 15px; color: var(--texte2); line-height: 1.35; }
.qui-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--grege); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qui-ico svg { width: 24px; height: 24px; }
.qui-ico.noir { background: var(--noir); color: var(--blanc); }
.encadre { background: var(--grege); border-radius: 12px; padding: 12px; font-size: 14.5px; margin: 0; }
@media (max-width: 360px) { .tuiles-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-transfert { background: var(--grege); color: var(--texte2); border: 1.5px dashed var(--sable); }
.kpi-grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-alerte { background: var(--orange-fond); border-color: var(--orange-fond); }
.kpi-alerte b, .kpi-alerte span { color: var(--orange-texte); }
.export-ligne { display: flex; flex-direction: column; gap: 8px; }
.export-ligne.remplace { opacity: .75; }
.export-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.export-tete > div { display: flex; flex-direction: column; gap: 2px; }
.pill-exp { border-radius: 999px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pill-exp.ok { background: var(--noir); color: var(--blanc); }
.pill-exp.attente { background: var(--orange-fond); color: var(--orange-texte); border: 1.5px solid var(--orange-texte); }
.pill-exp.gris { background: var(--grege); color: var(--texte2); }
.puce-ech:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 420px) { .kpi-grille.trois { grid-template-columns: 1fr; } }

/* v2.4 : version et nouveautés */
.lien-version { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 0; min-height: 44px; background: none; border: 0; font: inherit; font-size: 13px; color: var(--texte2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.point-nouveau { width: 8px; height: 8px; border-radius: 50%; background: var(--noir); display: inline-block; }
.nouveaute-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.nouveaute .liste-nv { margin: 0; }

/* v2.5 : situations dangereuses */
.carte-lien { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--grege); }
.carte-lien b { display: block; margin: 2px 0 4px; font-size: 16px; }
.sd-ligne .discret { display: block; }
.choix-type { margin: 4px 0 8px; }
.tuile-type { min-height: 72px; justify-content: center; font-size: 15.5px; }
.action-sd { border: 1px solid var(--grege); }
.sd-rappel { border-left: 4px solid var(--noir); }
.sd-rappel .sur-titre { display: flex; align-items: center; gap: 6px; }
.sd-rappel .sur-titre svg { width: 18px; height: 18px; }
.fiche-sd h1 { margin-top: 12px; }
@media print { .fiche-sd .causerie-entete { margin-bottom: 8px; } .fiche-sd .carte { break-inside: avoid; } }
label.champ input[type=date], label.champ input[type=datetime-local] { width: 100%; min-height: 52px; border: 1.5px solid var(--sable); border-radius: 12px; padding: 10px 12px; background: var(--blanc); font-size: 16px; }
.aide-champ { margin: -6px 0 10px; }

/* v2.6 : visites terrain */
.tuile-type small { display: block; font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.section-visite { padding: 14px; }
.section-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-tete h2 { margin: 0; font-size: 17px; }
.point-visite { border-top: 1px solid var(--grege); padding: 12px 0; }
.point-visite > p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.35; }
.reponses-visite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rep { min-height: 46px; border-radius: 10px; border: 1.5px solid var(--sable); background: var(--blanc); font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 6px; }
.rep-ok[aria-pressed="true"] { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.rep-ecart[aria-pressed="true"] { background: var(--orange-texte); color: var(--blanc); border-color: var(--orange-texte); }
.rep-na[aria-pressed="true"] { background: #57514B; color: var(--blanc); border-color: #57514B; }
.observation { margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--orange-fond); border: 1px solid #E8CBA4; }
.observation .photo-apercu { margin-top: 4px; }
.identite-visite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 12px 0; }
.identite-visite > div { display: flex; flex-direction: column; min-width: 0; }
.identite-visite b { font-weight: 600; overflow-wrap: anywhere; }
.table-visite { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; background: var(--blanc); }
.table-visite th { text-align: left; background: var(--grege); padding: 6px; font-size: 12.5px; }
.table-visite td { border-top: 1px solid var(--grege); padding: 6px; vertical-align: top; overflow-wrap: anywhere; }
.table-visite th:not(:first-child), .table-visite td.marque { text-align: center; width: 13%; font-weight: 700; }
.table-visite.rapport th:first-child, .table-visite.rapport td:first-child { width: 9%; }
.photos-visite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.photos-visite img { width: 100%; border-radius: 8px; }
.photos-visite figcaption { font-size: 12.5px; color: var(--texte2); }
@media print { .fiche-visite .table-visite { break-inside: auto; } .fiche-visite tr { break-inside: avoid; } .photos-visite figure { break-inside: avoid; } }

/* v2.6 : fiche de visite lisible sur téléphone, colonnes complètes à l'impression */
a.btn.btn-principal { color: var(--blanc); }
.table-visite .court, .legende-visite { display: none; }
@media screen and (max-width: 640px) {
  .table-visite:not(.rapport) .long { display: none; }
  .table-visite:not(.rapport) .court, .legende-visite { display: inline; }
  .legende-visite { display: block; }
  .table-visite:not(.rapport) th:not(:first-child), .table-visite:not(.rapport) td.marque { width: 2.6rem; padding: 6px 2px; }
}

/* v2.7 : hors connexion */
.bandeau-hl { position: sticky; top: 58px; z-index: 9; display: flex; align-items: center; gap: 8px; background: var(--orange-fond); color: var(--orange-texte); border-bottom: 1px solid #F0D9BC; padding: 6px 16px; font-size: 14px; }
.bandeau-hl[hidden] { display: none; }
.bandeau-hl.fort { font-weight: 700; }
.bandeau-hl .hl-texte { flex: 1; text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: 4px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bandeau-hl .hl-envoyer { border: 0; border-radius: 10px; background: var(--noir); color: var(--blanc); font: inherit; font-weight: 600; font-size: 13.5px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.alerte-hl { background: var(--orange-fond); color: var(--orange-texte); border: 2px solid var(--orange-texte); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; margin: 10px 0; font-weight: 600; }
.avert-hl { color: var(--orange-texte); font-weight: 600; font-size: 14.5px; }
.attente-hl { border-left: 4px solid var(--orange-texte); }
.attente-texte { color: var(--orange-texte); font-weight: 600; }

/* v2.8 : envoi vers COCKPIT depuis une fiche */
.bloc-cockpit .etapes-cockpit { margin: 6px 0 10px; padding-left: 20px; color: var(--texte2); }
.bloc-cockpit .etapes-cockpit li { margin: 3px 0; }

/* v2.10 : règles d'or d'un client */
.regles-client summary { cursor: pointer; list-style: none; }
.regles-client summary::-webkit-details-marker { display: none; }
.regles-client summary::after { content: "Voir les règles ›"; display: block; margin-top: 6px; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.regles-client[open] summary::after { content: "Masquer"; }
.liste-regles { margin: 10px 0 0; padding-left: 22px; }
.liste-regles li { margin: 6px 0; }

/* v3.0 : type d'analyse, thématiques de progression */
.type-analyse { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--noir); color: var(--blanc); font-size: 11.5px; font-weight: 700; vertical-align: 2px; }
.themes-bloc { margin-top: 18px; }
.themes { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .themes { grid-template-columns: 1fr 1fr; } }
.theme { background: var(--blanc); border-radius: var(--rayon); padding: 12px 14px; border: 1px solid var(--grege); }
.theme.fort { border-left: 5px solid var(--noir); }
.theme.axe { border-left: 5px solid var(--orange-texte); }
.theme-tete { display: flex; align-items: center; gap: 8px; }
.theme-tete svg { width: 22px; height: 22px; flex-shrink: 0; }
.jauge-theme { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 10px 0 6px; }
.jauge-theme span { height: 10px; border-radius: 5px; background: var(--grege); }
.theme.fort .jauge-theme span.vu { background: var(--noir); }
.theme.axe .jauge-theme span.vu { background: var(--orange-texte); }
.theme-chiffre { margin: 0; font-size: 13.5px; color: var(--texte2); }
.theme-chiffre b { color: var(--noir); }
.theme-piste { display: flex; gap: 6px; margin: 8px 0 0; font-size: 13.5px; color: var(--orange-texte); background: var(--orange-fond); border-radius: 10px; padding: 8px 10px; }
.theme-piste svg { width: 18px; height: 18px; flex-shrink: 0; }
.puce-theme { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--grege); font-size: 13px; }