/* Plateforme de diagnostic — charte Connexion Coaching */
/* ======================================================================
   PALETTE — deux familles, à ne pas confondre.

   1. MARQUE : l'habillage. Change d'un thème à l'autre.
   2. SENS   : rouge critique, ambre à surveiller, vert favorable. NE CHANGE
      JAMAIS. Ces couleurs disent au client si son score est bon ou mauvais ;
      les repeindre au goût d'un thème rendrait les diagnostics illisibles,
      voire trompeurs.

   Pour ajouter un thème : redéfinir les variables de MARQUE sous un sélecteur
   :root[data-theme="..."], et ne toucher à rien d'autre.
   ====================================================================== */
:root{
  /* --- marque : thème crème (par défaut) --- */
  /* Le kit donne le sable #A98B5E. Trop clair dès qu'il porte du texte
     (2,9:1) : --or est le même sable assombri d'un cran, utilisable partout,
     et --or-clair garde la valeur du logo pour les aplats décoratifs. */
  --or:#806026; --or-fonce:#674C1E; --creme:#F8F4EA; --creme-2:#FCF0DC;
  --vert:#48A884; --vert-fonce:#4E6F57; --encre:#1F2328;
  --gris:#5E626A; --blanc:#fff; --sombre:#17293F;   /* navy du logo */
  --creme-bande:#F1EBDC;     /* grandes bandes de section, pied de page */
  --inerte:#ECE7DA;          /* jauges vides, pastilles neutres */
  --or-clair:#A98B5E;        /* le sable du kit : aplats, haut de dégradé */
  --or-sombre:#C8AB7D;       /* sable clair du kit : doré SUR fond marine */
  --vert-sombre:#7FCFA9;     /* vert éclairci : lisible SUR fond marine */
  --bleu:#3A6EA5; --bleu-fonce:#2E5883;
  /* --vert reste le vert d'accent (filets, bordures) : le contraste n'y compte pas.
     Dès qu'un vert porte du texte blanc (bouton, pastille) ou sert lui-même de
     texte, il faut --vert-plein : 5:1 sur blanc, contre 2,9:1 pour --vert. */
  --vert-plein:#2E7D5B; --vert-plein-fonce:#245F46;

  /* surfaces et traits, autrefois écrits en dur un peu partout */
  --surface:#fff;            /* cartes, champs */
  --surface-2:#FDFCF9;       /* cartes secondaires */
  --bordure:#E4DECE;         /* bordure douce sur fond crème */
  --bordure-fine:#eee;       /* séparateurs discrets */
  --bordure-champ:#d9d2c2;   /* contour des champs de saisie */
  --texte-doux:#3a3f45;      /* paragraphes longs */
  --texte-pale:#B9B2A0;      /* mentions sur fond sombre */

  /* logo : le symbole et les deux couleurs du nom suivent le thème */
  --logo-symbole:url('/static/marque/symbole.svg');
  --logo-symbole-sombre:url('/static/marque/symbole-renverse.svg');
  --nom-1:#17293F;           /* « CONNEXION » — navy du kit */
  --nom-2:#A98B5E;           /* « DIAGNOSTIQUE » — sable du kit */

  /* Une teinte par pilier : c'est une identité, pas un jugement de valeur —
     contrairement aux --score-*, elle peut donc suivre le thème. */
  --p1:#8A6A38; --p2:#3F7A5E; --p3:#4A6B52;
  --p4:#2C5E80; --p5:#55705E; --p6:#8E3A40;

  /* --- sens : identique dans TOUS les thèmes --- */
  --rouge:#C04040;                 /* critique — conservé sous son ancien nom */
  --score-faible:#C04040;   --score-faible-fond:#F7E4E4;
  --score-moyen:#C89038;    --score-moyen-fonce:#A97B2C;  --score-moyen-fond:#FCF0DC;
  --score-bon:#2E7D5B;      --score-bon-fonce:#245F46;    --score-bon-fond:#EAF3EE;
  --score-bon-bord:#cfe3d7;
}

/* ======================= thème olive ======================= */
/* Tiré du logo olive : bleu marine du nom, vert olive du nœud. */
:root[data-theme="olive"]{
  /* Le kit distingue déjà les deux : olive pour le symbole, olive foncé
     pour le texte sur fond clair. On reprend cette distinction telle quelle. */
  --or:#5F6B3F;              /* olive foncé du kit — porte le texte */
  --or-fonce:#4A5431;
  --creme:#F2F3EC;           /* fond, légèrement verdi */
  --creme-2:#E7EADD;         /* encadrés mis en valeur */
  --creme-bande:#E8EBDE;     /* grandes bandes de section, pied de page */
  --inerte:#E3E7D8;
  --or-clair:#8C9A63;        /* l'olive du kit */
  --or-sombre:#ADB98A;       /* olive clair du kit : doré SUR fond cobalt */
  --vert-sombre:#A9C48E;
  --vert:#7E8F5E;
  --vert-fonce:#5A6B45;
  --encre:#15243A;           /* l'encre tire vers le cobalt du logo */
  --gris:#5C6472;
  --sombre:#123A6B;          /* bandeaux : le cobalt du kit */
  --bleu:#123A6B; --bleu-fonce:#0D2B50;
  --vert-plein:#5C7040; --vert-plein-fonce:#47572F;

  --surface:#fff;
  --surface-2:#FAFBF6;
  --bordure:#D9DECB;
  --bordure-fine:#E8EBE0;
  --bordure-champ:#C6CDB4;
  --texte-doux:#39414C;
  --texte-pale:#AEB6A2;

  --logo-symbole:url('/static/marque/symbole-olive.svg');
  --logo-symbole-sombre:url('/static/marque/symbole-renverse-olive.svg');
  --nom-1:#123A6B;           /* cobalt du kit olive */
  --nom-2:#5F6B3F;           /* olive foncé du kit */

  /* Les six mêmes repères, transposés dans la famille olive/marine, et
     assombris : le surtitre est en petites capitales, il doit rester lisible. */
  --p1:#7A5F2E; --p2:#3F7A5E; --p3:#4A6B52;
  --p4:#123A6B; --p5:#55705E; --p6:#5F6B3F;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Helvetica Neue',Arial,sans-serif;color:var(--encre);
  background:var(--creme);line-height:1.5}
a{color:var(--or-fonce);text-decoration:none}
a:hover{text-decoration:underline}

/* en-tête */
.entete{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px;padding:12px 24px;background:var(--sombre);color:var(--creme);border-bottom:3px solid var(--or-sombre)}
.marque{display:flex;align-items:center;gap:11px;color:var(--creme)}
.marque:hover{text-decoration:none}
.marque-symbole{flex:0 0 auto;width:30px;height:32px;display:block;
  background:var(--logo-symbole-sombre) center/contain no-repeat}
.marque-nom{font-family:'Barlow Condensed',Arial,sans-serif;font-size:18px;
  font-weight:600;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap}
.marque-nom span{font-weight:500;color:var(--or-sombre)}
/* Écran étroit : le nom est en capitales espacées et ne peut pas se couper —
   le symbole seul suffit, et reste cliquable. */
@media(max-width:620px){.marque-nom{display:none}}
.nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;
  gap:18px;font-size:14px}
/* Sur téléphone, le rôle et le nom prennent toute la place et repoussent la
   déconnexion hors cadre : la photo et l'initiale suffisent à savoir qui est
   connecté, le nom complet est déjà sur la page « Mon compte ». */
@media(max-width:620px){
  .entete{padding:10px 14px}
  .nav{gap:12px;font-size:13px}
  .nav .util em{display:none}
  .nav .util{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.nav a{color:var(--creme)}
.nav .util{color:var(--texte-pale)}
.nav .util em{color:var(--or-sombre);font-style:normal;text-transform:capitalize}

.contenu{max-width:1000px;margin:0 auto;padding:28px 24px 60px}
.pied{text-align:center;color:var(--gris);font-size:12px;padding:20px}

h1{font-family:Georgia,serif;font-size:26px;margin:0}
.barre-titre{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}

/* boutons */
.bouton{display:inline-block;background:var(--vert-plein);color:var(--surface);border:none;
  padding:10px 20px;border-radius:24px;font-weight:700;cursor:pointer;font-size:14px}
.bouton:hover{background:var(--vert-plein-fonce);text-decoration:none}
/* Bouton discret. Par défaut lisible sur fond clair (le cas courant) ;
   c'est l'en-tête sombre qui redéfinit la couleur, et non l'inverse. */
.bouton-ghost{border:1px solid var(--or);border-radius:20px;padding:5px 14px;
  color:var(--or-fonce);background:transparent;cursor:pointer;font-size:14px}
.bouton-ghost:hover{background:var(--creme-2);text-decoration:none}
.entete .bouton-ghost{color:var(--creme);border-color:var(--or-sombre)}
.entete .bouton-ghost:hover{background:color-mix(in srgb,var(--creme) 12%,transparent)}

/* auth */
/* Sur le gabarit public, aucun conteneur ne ménage de marge latérale — .contenu
   en avait une, .v-contenu non. Sans ce plafond en vw, la carte toucherait les
   deux bords sur un téléphone. */
.vitrine .carte-auth{max-width:min(380px,90vw)}
.vitrine .carte-inscription{max-width:min(720px,90vw)}

.carte-auth{max-width:380px;margin:8vh auto;background:var(--surface);border-top:4px solid var(--or);
  border-radius:8px;padding:32px;box-shadow:0 8px 30px rgba(0,0,0,.08)}
.carte-auth h1{margin-bottom:4px}
.sous-titre{color:var(--gris);margin:0 0 20px}
.formulaire{display:flex;flex-direction:column;gap:14px}
.formulaire label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  font-weight:600;color:var(--gris)}
.formulaire input{padding:10px;border:1px solid var(--bordure-champ);border-radius:6px;font-size:15px}
.formulaire input:focus{outline:none;border-color:var(--or)}
.formulaire .bouton{margin-top:8px}
.alerte-erreur{background:var(--score-faible-fond);border-left:4px solid var(--rouge);
  padding:10px 12px;border-radius:4px;margin-bottom:16px;font-size:14px}

/* tableau */
.tableau{width:100%;border-collapse:collapse;background:var(--surface);border-radius:8px;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,0,0,.05)}
.tableau th{background:var(--creme-2);text-align:left;padding:12px 14px;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.tableau td{padding:12px 14px;border-top:1px solid var(--bordure-fine);font-size:14px}
.tableau tbody tr{cursor:pointer}
.tableau tbody tr:hover{background:var(--creme-2)}

.pastille-statut{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;color:var(--surface)}
.s-brouillon{background:var(--gris)} .s-collecte{background:var(--or)}
.s-analyse{background:var(--vert-fonce)} .s-complete{background:var(--vert-plein)}
.s-archive{background:#9a9a9a}

.vide{text-align:center;padding:60px 20px;color:var(--gris)}
.vide p{margin-bottom:16px}

/* formulaire large (2 colonnes) */
.formulaire-large{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--surface);
  padding:24px;border-radius:8px;border-top:4px solid var(--or);box-shadow:0 2px 12px rgba(0,0,0,.05)}
/* min-width:0 — sans lui, un item de grille refuse de rétrécir sous la largeur
   intrinsèque d'un <input> (≈ 20 caractères) et les champs débordent de la carte
   sur petit écran. width:100% les fait suivre la colonne. */
.formulaire-large label{display:flex;flex-direction:column;gap:4px;font-size:13px;
  font-weight:600;color:var(--gris);min-width:0}
.formulaire-large input,.formulaire-large select{padding:10px;border:1px solid var(--bordure-champ);
  border-radius:6px;font-size:15px;background:var(--surface);width:100%;min-width:0;max-width:100%}
.formulaire-large input:focus,.formulaire-large select:focus{outline:none;border-color:var(--or)}
.formulaire-large .pleine-largeur{grid-column:1 / -1}
@media(max-width:640px){.formulaire-large{grid-template-columns:1fr}}

/* cartes profil du dossier */
.cartes-profil{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0 8px}
.carte-info{background:var(--surface);border:1px solid var(--bordure);border-top:3px solid var(--or);
  border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.carte-info .etiq{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gris)}
.carte-info .val{font-family:Georgia,serif;font-size:16px;font-weight:700}
@media(max-width:640px){.cartes-profil{grid-template-columns:1fr}}

.titre-section{font-family:Georgia,serif;font-size:19px;margin:28px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--or)}

/* liste des étapes */
.etapes{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.etape{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--bordure-fine);
  border-radius:8px;padding:12px 16px}
.etape .num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--inerte);
  color:var(--gris);font-weight:700;display:flex;align-items:center;justify-content:center}
.etape.faite{border-left:4px solid var(--vert)}
.etape.faite .num{background:var(--vert-plein);color:var(--surface)}
a.etape{cursor:pointer}
a.etape:hover{background:var(--creme-2);text-decoration:none}
.etape strong{color:var(--encre)}

/* bannière succès */
.banniere-ok{background:var(--score-bon-fond);border-left:4px solid var(--vert);padding:10px 14px;
  border-radius:4px;margin-bottom:16px;font-size:14px;color:var(--vert-fonce)}

/* écran données financières */
.grille-finances{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
@media(max-width:820px){.grille-finances{grid-template-columns:1fr}}
.col-saisie fieldset{border:1px solid var(--bordure);border-radius:8px;padding:14px 16px;margin-bottom:14px;background:var(--surface)}
.col-saisie legend{font-family:Georgia,serif;font-weight:700;color:var(--or-fonce);padding:0 6px}
.champ{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;font-size:13px;font-weight:600;color:var(--gris)}
.champ .unite{font-weight:400;font-style:normal;color:#aa9}
.champ input{padding:9px;border:1px solid var(--bordure-champ);border-radius:6px;font-size:15px}
.champ input:focus{outline:none;border-color:var(--or)}

.col-analyse{position:sticky;top:16px;background:var(--surface);border-top:4px solid var(--vert);
  border-radius:8px;padding:16px 18px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.col-analyse h3{font-family:Georgia,serif;margin:0 0 10px}
.col-analyse h4{margin:16px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ms{background:var(--creme-2);border-radius:6px;padding:8px 10px;display:flex;flex-direction:column}
.ms span{font-size:11px;color:var(--gris)}
.ms strong{font-family:Georgia,serif;font-size:16px}
.tableau-reperes{width:100%;border-collapse:collapse;font-size:12.5px}
.tableau-reperes th{text-align:left;color:var(--gris);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;border-bottom:2px solid var(--or);padding:4px 6px}
.tableau-reperes td{padding:5px 6px;border-bottom:1px solid var(--bordure-fine)}
.tableau-reperes td.nb{font-family:Georgia,serif;font-weight:700}
.lec{font-weight:700}
.lec-favorable{color:var(--score-bon)} .lec-defavorable{color:var(--score-faible)}
.lec-conforme{color:var(--vert-fonce)} .lec-neutre{color:var(--gris);font-style:italic}
.petit{font-size:11px}

/* écran de notation */
.grille-notation{display:grid;grid-template-columns:1fr 240px;gap:24px;align-items:start}
@media(max-width:820px){.grille-notation{grid-template-columns:1fr}}
.bloc-pilier{margin-bottom:8px}
.indic{background:var(--surface);border:1px solid var(--bordure-fine);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.indic-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.indic-nom{font-weight:600;font-size:14px}
.indic-nom .poids{font-weight:400;font-style:normal;color:#aa9;font-size:11px;margin-left:6px}
/* sélecteur 0-5 segmenté */
.segments{display:inline-flex;border:1px solid var(--bordure-champ);border-radius:6px;overflow:hidden}
.segments input{display:none}
.segments label{padding:6px 12px;cursor:pointer;font-weight:700;font-size:14px;color:var(--gris);
  border-left:1px solid var(--bordure-fine);background:var(--surface)}
.segments label:first-of-type{border-left:none}
.segments input:checked + label{background:var(--vert-fonce);color:var(--surface)}
.segments input#\30 :checked + label,.segments input[id$="_0"]:checked + label,
.segments input[id$="_1"]:checked + label,.segments input[id$="_2"]:checked + label{background:var(--score-faible)}
.segments input[id$="_3"]:checked + label{background:var(--score-moyen)}
.rubrique{margin:8px 0 0}
.rubrique summary{cursor:pointer;font-size:12px;color:var(--or-fonce);font-weight:600}
.rub-grille{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:8px;font-size:12px;color:#444}
@media(max-width:640px){.rub-grille{grid-template-columns:1fr}}
.rub-niv{display:block;font-weight:700;margin-bottom:2px;font-size:11px}
.rub-bas{color:var(--score-faible)} .rub-moy{color:var(--score-moyen-fonce)} .rub-haut{color:var(--score-bon)}
.justif{width:100%;margin-top:8px;border:1px solid var(--bordure-champ);border-radius:6px;padding:7px;
  font-family:inherit;font-size:13px;resize:vertical;min-height:34px}
.justif:focus{outline:none;border-color:var(--or)}

.col-scores{position:sticky;top:16px;background:var(--surface);border-top:4px solid var(--vert);border-radius:8px;
  padding:14px 16px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.col-scores h3{font-family:Georgia,serif;margin:0 0 10px}
.score-ligne{display:flex;align-items:baseline;justify-content:space-between;padding:6px 0;
  border-bottom:1px solid var(--bordure-fine);font-size:13px}
.score-ligne strong{font-family:Georgia,serif;font-size:16px}
.score-ligne.total{margin-top:8px;border-top:2px solid var(--or);border-bottom:none;padding-top:10px}
.score-ligne.total strong{font-size:22px;color:var(--vert-fonce)}
.score-ligne .sur{color:var(--gris);font-size:12px}

/* saisie de données brutes par pilier */
.champs-bruts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
@media(max-width:640px){.champs-bruts{grid-template-columns:1fr}}
.champ-brut{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:600;color:var(--gris)}
.champ-brut .unite{font-weight:400;font-style:normal;color:#aa9}
.champ-brut input,.champ-brut select{padding:8px;border:1px solid var(--bordure-champ);border-radius:6px;font-size:14px;background:var(--surface)}
.champ-brut input:focus,.champ-brut select:focus{outline:none;border-color:var(--or)}
/* panneau scores calculés */
.score-indic{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 0;border-bottom:1px solid var(--bordure-fine);font-size:13px}
.si-nom{color:var(--encre)}
.si-score{font-family:Georgia,serif;font-weight:700;font-size:17px;color:var(--surface);border-radius:6px;
  padding:1px 9px;min-width:38px;text-align:center}
.si-score small{font-size:10px;font-weight:400;opacity:.8}
.si-score.vide{background:var(--inerte);color:var(--gris)}
.si-score.t0,.si-score.t1,.si-score.t2{background:var(--score-faible)}
.si-score.t3{background:var(--score-moyen)}
.si-score.t4,.si-score.t5{background:var(--score-bon)}

.liens-piliers{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.lien-pilier{background:var(--creme-2);border:1px solid var(--bordure);border-radius:16px;
  padding:4px 12px;font-size:13px;font-weight:600;color:var(--or-fonce)}
.lien-pilier:hover{background:var(--or);color:var(--surface);text-decoration:none}
.lien-pilier.auto{background:var(--score-bon-fond);color:var(--vert-fonce);border-color:var(--score-bon-bord);font-weight:400}

/* barre de navigation Précédent / Enregistrer / Suivant */
.nav-saisie{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--bordure)}
.bouton-nav{background:var(--surface);border:1px solid var(--or);color:var(--or-fonce);border-radius:24px;
  padding:9px 18px;font-weight:700;cursor:pointer;font-size:14px}
.bouton-nav:hover{background:var(--creme-2)}
/* Retour à l'étape précédente. Bleu : se distingue du vert (enregistrer /
   avancer) et reste lisible sur fond clair, contrairement à .bouton-ghost
   qui est prévu pour l'en-tête sombre. */
.bouton-prec{background:var(--bleu);color:var(--surface);border:none;border-radius:24px;
  padding:10px 20px;font-weight:700;cursor:pointer;font-size:14px}
.bouton-prec:hover{background:var(--bleu-fonce);text-decoration:none}
.bouton-suiv{background:var(--vert-plein-fonce)}
.bouton-suiv:hover{background:var(--vert-plein)}


/* --- étape 3 : carnets d'entrevue ------------------------------------- */
.intro-carnet{color:var(--gris);font-size:14px;max-width:75ch;margin:0 0 14px}
.legende-carnet{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  background:var(--surface);border:1px solid var(--bordure);border-radius:8px;padding:10px 14px;
  margin-bottom:18px;font-size:12.5px;color:var(--gris)}
.legende-carnet .avancement{margin-left:auto;color:var(--or-fonce);font-size:13px}
.puce-coeur{color:var(--or);font-style:normal;font-weight:700}
.puce-appro{color:var(--texte-pale);font-style:normal;font-weight:700}

.form-carnet fieldset{border:1px solid var(--bordure);border-radius:8px;padding:14px 18px 6px;
  margin:0 0 16px;background:var(--surface)}
.form-carnet legend{font-family:Georgia,serif;font-weight:700;color:var(--or-fonce);padding:0 6px}
.form-carnet .section-miroir{border-left:3px solid var(--or)}
.note-section{margin:0 0 6px;font-size:12.5px;color:var(--gris);font-style:italic}
.indic-section{margin:0 0 12px}

.entete-carnet{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.entete-carnet legend{grid-column:1/-1}
@media(max-width:640px){.entete-carnet{grid-template-columns:1fr}}

.question{margin-bottom:14px}
.question label{display:block;font-size:14px;font-weight:600;margin-bottom:5px;line-height:1.4}
.question.q-appro label{font-weight:400;color:var(--gris)}
/* hauteur pilotée par le script d'ajustement : pas de défilement interne */
.question textarea{width:100%;padding:9px;border:1px solid var(--bordure-champ);border-radius:6px;
  font-size:14.5px;font-family:inherit;line-height:1.5;resize:vertical;background:var(--surface);
  min-height:4.4em;overflow-y:hidden}
.question textarea:focus{outline:none;border-color:var(--or)}
.question.q-appro textarea{background:var(--surface-2)}
.reponse-miroir{margin:0 0 6px;padding:7px 10px;background:var(--creme-2);
  border-left:3px solid var(--or);border-radius:0 4px 4px 0;font-size:13px;color:var(--encre)}
.reponse-miroir strong{color:var(--or-fonce)}

.cloture-carnet{background:var(--score-bon-fond);border-left:4px solid var(--vert);padding:12px 16px;
  border-radius:0 6px 6px 0;margin-bottom:18px;font-size:13.5px}
.cloture-carnet strong{color:var(--vert-fonce)}
.cloture-carnet p{margin:4px 0 0;color:var(--gris)}

/* --- chronomètre d'entretien ------------------------------------------- */
.chrono{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  background:var(--surface);border:1px solid var(--bordure);border-radius:8px;
  padding:12px 16px;margin-bottom:18px}
.chrono-actif{border-color:var(--bleu);box-shadow:0 0 0 3px rgba(58,110,165,.10)}
.bouton-debut,.bouton-fin{border:none;border-radius:24px;padding:10px 20px;
  font-weight:700;cursor:pointer;font-size:14px;color:var(--surface)}
.bouton-debut{background:var(--bleu)}
.bouton-debut:hover{background:var(--bleu-fonce)}
.bouton-fin{background:var(--rouge)}
.bouton-fin:hover{background:#A03434}
.chrono-lecture{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap}
.chrono-live{font-family:Georgia,serif;font-size:24px;font-variant-numeric:tabular-nums;
  color:var(--bleu-fonce);font-weight:700}
.chrono-etiq{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--rouge)}
.chrono-total{font-size:13.5px;color:var(--gris)}
.chrono-total strong{color:var(--encre);font-size:15px}
.chrono-detail{width:100%;font-size:13px;color:var(--gris)}
.chrono-detail summary{cursor:pointer;color:var(--or-fonce)}
.chrono-detail ul{margin:6px 0 0;padding-left:20px}
.chrono-detail li{font-variant-numeric:tabular-nums}
.chrono-alerte{width:100%;margin:0;padding:7px 10px;background:#FDF3E7;
  border-left:3px solid var(--or);border-radius:0 4px 4px 0;font-size:13px;color:var(--encre)}

/* Lien d'action vert dans la liste des étapes (génération du rapport). */
.lien-rapport{background:var(--vert-plein);color:var(--surface);border:none}
.lien-rapport:hover{background:var(--vert-plein-fonce);color:var(--surface)}

/* --- étape 5 : journal d'observations ----------------------------------- */
.actions-titre{display:flex;align-items:center;gap:8px}

.form-note{background:var(--surface);border:1px solid var(--bordure);border-top:3px solid var(--or);
  border-radius:8px;padding:14px 16px;margin-bottom:20px}
.form-note textarea{width:100%;padding:10px;border:1px solid var(--bordure-champ);border-radius:6px;
  font-size:15px;font-family:inherit;line-height:1.5;resize:vertical;
  min-height:4.4em;overflow-y:hidden}
.form-note textarea:focus{outline:none;border-color:var(--or)}
.form-note-bas{display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;margin-top:10px}
.champ-inline{display:flex;flex-direction:column;gap:3px;margin-right:auto;
  font-size:12.5px;font-weight:600;color:var(--gris)}
.champ-inline select{padding:8px;border:1px solid var(--bordure-champ);border-radius:6px;
  font-size:14px;background:var(--surface)}

.journal{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.note{background:var(--surface);border:1px solid var(--bordure-fine);border-radius:8px;padding:12px 16px}
.note-pilier{border-left:4px solid var(--or)}
.note-tete{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:12.5px;color:var(--gris);margin-bottom:6px}
.note-date{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.etiquette-pilier{background:var(--creme-2);border:1px solid var(--bordure);border-radius:12px;
  padding:1px 10px;font-size:11.5px;font-weight:600;color:var(--or-fonce)}
.note-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.note-actions form{display:inline}
.lien-danger{background:none;border:none;padding:0;cursor:pointer;font-size:12.5px;
  color:var(--rouge);font-family:inherit}
.lien-danger:hover{text-decoration:underline}
/* les notes sont saisies au fil de l'eau : on respecte les retours à la ligne */
.note-texte{margin:0;white-space:pre-wrap;font-size:14.5px}

/* --- accès du client (côté analyste) ------------------------------------ */
.carte-client{background:var(--surface);border:1px solid var(--bordure);border-top:3px solid var(--bleu);
  border-radius:8px;padding:14px 16px}
.client-ligne{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
.client-actions{display:flex;gap:8px;flex-wrap:wrap}
.client-actions form{display:inline}
.form-client{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:10px}
@media(max-width:640px){.form-client{grid-template-columns:1fr}}
.form-client .champ{margin-bottom:0}
.form-client input{padding:9px;border:1px solid var(--bordure-champ);border-radius:6px;font-size:15px}

/* Mot de passe temporaire : visible une seule fois, donc impossible à manquer. */
.carte-mdp{background:var(--creme-2);border:1px solid var(--or);border-left:4px solid var(--or);
  border-radius:6px;padding:14px 16px;margin-bottom:18px}
.carte-mdp strong{display:block;color:var(--or-fonce);margin-bottom:8px}
.carte-mdp .mdp{display:inline-block;background:var(--surface);border:1px solid var(--bordure-champ);border-radius:6px;
  padding:8px 16px;font-family:'Courier New',monospace;font-size:19px;font-weight:700;
  letter-spacing:.10em;user-select:all}
.carte-mdp p{margin:8px 0 0;font-size:13px;color:var(--gris)}

/* --- espace client -------------------------------------------------------- */
.marque-analyste{display:block;font-style:normal;font-weight:400;font-size:11.5px;
  color:var(--bleu);margin-top:2px}
.depot{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end}
@media(max-width:640px){.depot{grid-template-columns:1fr}}
.depot .champ{margin-bottom:0}
.depot input[type=file]{padding:8px;border:1px dashed var(--bordure-champ);border-radius:6px;
  background:var(--creme-2);font-size:13.5px}
.depot input[type=text]{padding:9px;border:1px solid var(--bordure-champ);border-radius:6px;font-size:15px}

.liste-documents{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.doc-ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--surface);border:1px solid var(--bordure-fine);border-left:3px solid var(--bleu);
  border-radius:8px;padding:10px 14px}
.doc-info a{font-weight:600}

/* lecture seule des réponses du client (vue analyste) */
.qr-lecture{margin-bottom:12px}
.q-lecture{margin:0 0 3px;font-size:13.5px;font-weight:700;color:var(--gris)}
.r-lecture{margin:0;font-size:14.5px;white-space:pre-wrap;padding-left:12px;
  border-left:3px solid var(--creme-2)}

/* --- inscription libre et forfaits --------------------------------------- */
.carte-inscription{max-width:720px;margin:5vh auto;background:var(--surface);
  border-top:4px solid var(--or);border-radius:8px;padding:32px;
  box-shadow:0 8px 30px rgba(0,0,0,.08)}
.carte-inscription h1{margin-bottom:4px}
.carte-inscription .formulaire-large{box-shadow:none;border-top:none;padding:0;background:none}
/* Le bouton porte un libellé long (« …— forfait Accompagné ») : sans contrainte
   il déborde de la carte sur petit écran. */
.carte-inscription .pleine-largeur{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.formulaire-large button{max-width:100%}
/* Bandeau du forfait choisi (arrivée depuis la page Forfaits).
   Nom distinct de .bandeau-forfait, déjà utilisé par l'espace client : les deux
   règles se seraient écrasées l'une l'autre. */
.bandeau-forfait-choisi{display:flex;align-items:center;gap:14px;background:var(--creme-2);
  border:1px solid var(--bordure);border-left:4px solid var(--or);border-radius:8px;
  padding:12px 16px;margin:10px 0 4px}
.bandeau-forfait-choisi strong{display:block;font-size:15px}
.bandeau-forfait-choisi p{margin:0;font-size:13px;color:var(--gris)}
.deja-membre{font-size:13.5px;color:var(--gris);margin:10px 0 14px}
/* astérisque explicative (ETP / chiffre d'affaires à l'inscription) */
.asterisque{color:var(--or-fonce);font-weight:700}
.note-asterisque{margin:2px 0 0;line-height:1.5}

.carte-verrou{background:var(--surface);border:1px solid var(--bordure);border-top:4px solid var(--or);
  border-radius:8px;padding:24px 28px}
.carte-verrou h2{font-family:Georgia,serif;margin:0 0 6px}
.carte-verrou h3{font-family:Georgia,serif;font-size:15px;color:var(--or-fonce);
  margin:22px 0 8px}
.formules{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.formules li{background:var(--creme-2);border-radius:6px;padding:12px 14px}
.formules strong{display:block;color:var(--or-fonce);margin-bottom:2px}
.formules span{font-size:13.5px;color:var(--gris)}
.verrou-action{margin-top:22px;padding-top:16px;border-top:1px solid var(--bordure-fine);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.verrou-action p{margin:0;flex:1;min-width:240px;font-size:13.5px}

.bandeau-forfait{margin-top:20px;padding:12px 16px;background:var(--creme-2);
  border-left:3px solid var(--or);border-radius:0 6px 6px 0;
  display:flex;flex-direction:column;gap:4px;font-size:13.5px}
.form-client .pleine-largeur{grid-column:1 / -1}

/* ===================================================== compte de l'équipe */
/* Photo dans l'en-tête : elle identifie le compte connecté d'un coup d'œil. */
.util-photo{width:26px;height:26px;border-radius:50%;object-fit:cover;
  vertical-align:middle;margin-right:6px;border:1px solid var(--or-sombre)}
.nav .util{display:inline-flex;align-items:center}

.onglets-compte{display:flex;gap:4px;margin:0 0 22px;border-bottom:1px solid var(--bordure)}
.oc-lien{padding:9px 18px;font-weight:600;font-size:14px;color:var(--gris);
  border-bottom:3px solid transparent;margin-bottom:-1px}
.oc-lien:hover{color:var(--encre);text-decoration:none}
.oc-lien.actif{color:var(--encre);border-bottom-color:var(--or)}

/* Une colonne à gauche pour la photo, le reste à droite : l'identité et le mot
   de passe se lisent l'un sous l'autre, la photo reste visible à côté. */
.compte-grille{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
@media(max-width:820px){.compte-grille{grid-template-columns:1fr}}
.carte-compte{background:var(--surface);border:1px solid var(--bordure);
  border-top:4px solid var(--or);border-radius:8px;padding:22px 24px;
  box-shadow:0 2px 12px rgba(0,0,0,.05)}
.carte-compte h2{font-family:Georgia,serif;font-size:17px;margin:0 0 14px}
.carte-photo{grid-row:span 2}
@media(max-width:820px){.carte-photo{grid-row:auto}}

.cp-apercu{display:flex;justify-content:center;margin-bottom:16px}
.cp-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:3px solid var(--creme-2)}
/* Sans photo : l'initiale, plutôt qu'une silhouette générique. */
.cp-initiale{width:120px;height:120px;border-radius:50%;background:var(--creme-2);
  color:var(--or-fonce);font-family:Georgia,serif;font-size:46px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.cp-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.cp-choix input[type=file]{width:100%;font-size:12.5px;padding:7px;
  border:1px dashed var(--bordure-champ);border-radius:6px;background:var(--surface-2)}
.carte-compte .bouton-ghost{display:inline-block;margin-top:6px}

/* Le formulaire vit déjà dans une carte : il ne doit pas en dessiner une seconde. */
.formulaire-nu{background:none;border-top:none;box-shadow:none;padding:0}
.formulaire-large textarea{padding:10px;border:1px solid var(--bordure-champ);
  border-radius:6px;font-size:14px;font-family:inherit;line-height:1.55;resize:vertical}
.formulaire-large textarea:focus{outline:none;border-color:var(--or)}
.formulaire-large select{padding:10px;border:1px solid var(--bordure-champ);
  border-radius:6px;font-size:15px;background:var(--surface)}

/* --------------------------------------------------- paiements des clients */
.note-encaissement{background:var(--creme-2);border-left:4px solid var(--or);
  padding:11px 15px;border-radius:4px;font-size:13.5px;margin:0 0 18px;
  color:var(--texte-doux)}
.bloc-saisie{background:var(--surface);border:1px solid var(--bordure);
  border-radius:8px;margin-bottom:22px}
.bloc-saisie > summary{cursor:pointer;padding:13px 18px;font-weight:700;font-size:14px;
  list-style:none}
.bloc-saisie > summary::-webkit-details-marker{display:none}
.bloc-saisie > summary::before{content:"＋ ";color:var(--or-fonce);font-weight:700}
.bloc-saisie[open] > summary::before{content:"− "}
.bloc-saisie[open] > summary{border-bottom:1px solid var(--bordure-fine)}
.bloc-saisie .formulaire-large{padding:18px}
.total-encaisse{font-size:15px;margin:0 0 12px}
.col-nombre{text-align:right}
.mono{font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;font-size:13px}

.p-paye{background:var(--score-bon)} .p-en_attente{background:var(--or)}
.p-rembourse{background:var(--gris)} .p-echoue{background:var(--score-faible)}

/* Huit colonnes ne tiennent pas sous 800 px, et chacune sert à retrouver un
   paiement : la table défile dans son cadre plutôt que de pousser la page. */
.tableau-defilant{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:8px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.tableau-defilant .tableau{box-shadow:none;min-width:760px}
.tableau-defilant .bouton-ghost{white-space:nowrap}

/* Identité du client sur la fiche de dossier : photo à gauche quand elle
   existe, coordonnées à droite. Le bloc reste aligné sans elle. */
.client-identite{display:flex;align-items:center;gap:12px;min-width:0}
.client-photo{width:42px;height:42px;border-radius:50%;object-fit:cover;
  flex:0 0 auto;border:1px solid var(--bordure)}