/* Sobre : une seule couleur d'accent, des filets fins, beaucoup de blanc. */
:root {
    --fond: #f6f5f2;
    --carte: #ffffff;
    --encre: #1b1d21;
    --discret: #6a6f78;
    --filet: #e4e2dc;
    --filet-fort: #cfccc4;
    --accent: #24476b;
    --accent-doux: #eef2f6;
    --ok: #2f6f52;
    --ko: #a8322a;
    --ko-doux: #fbefed;
    --ambre: #a86a12;
    --ambre-doux: #fbf6ea;
    --rayon: 12px;
    --rayon-petit: 8px;
    --mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }
h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
h1:focus { outline: none; }
h2 { font-size: .95rem; font-weight: 600; margin-bottom: .9rem; }
h2 small { font-weight: 400; color: var(--discret); margin-left: .5rem; font-size: .88em; }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Boutons : un plein pour l'action principale, des discrets pour le reste */
button {
    border: 1px solid var(--filet-fort); background: var(--carte); border-radius: var(--rayon-petit);
    padding: .45rem .85rem; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
button:hover:not(:disabled) { border-color: var(--encre); }
button:disabled { opacity: .45; cursor: default; }
button.primaire { background: var(--encre); border-color: var(--encre); color: #fff; font-weight: 600; }
button.primaire:hover:not(:disabled) { background: #000; }
button.discret { border-color: transparent; background: none; color: var(--discret); }
button.discret:hover:not(:disabled) { border-color: transparent; background: var(--accent-doux); color: var(--encre); }
button.petit { padding: .2rem .5rem; font-size: .86rem; }
button.danger { color: var(--ko); }
button.icone { border: 0; background: none; color: var(--discret); padding: .2rem .4rem; border-radius: 6px; line-height: 1; }
button.icone:hover { background: var(--ko-doux); color: var(--ko); }

input[type=text], input[type=search], input[type=number], select, textarea {
    border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); padding: .5rem .7rem; background: var(--carte);
    transition: border-color .12s, box-shadow .12s;
}
input[type=text]:focus, input[type=search]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(36, 71, 107, .14);
}
::placeholder { color: #9a9ea6; }
/* Champs de recherche : pas de loupe ni de croix ajoutées par le navigateur. */
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
input[type=checkbox] { accent-color: var(--accent); width: 1rem; height: 1rem; }
textarea { width: 100%; resize: vertical; line-height: 1.5; display: block; }

kbd {
    font-family: inherit; font-size: .78rem; border: 1px solid var(--filet-fort); border-bottom-width: 2px; border-radius: 5px;
    padding: 0 .35rem; margin: 0 .1rem; background: var(--carte); color: var(--discret);
}

/* Structure */
.entete {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 1360px; margin: 0 auto; padding: 1.4rem 1.6rem .4rem;
}
.marque { display: flex; align-items: center; gap: .9rem; }
.sigle {
    display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 10px; flex: none;
    background: var(--encre); color: #fff; font-family: var(--serif); font-size: 1.55rem; font-style: italic;
}
.entete h1 { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; letter-spacing: -.015em; line-height: 1.15; }
.entete h1 em { font-style: italic; color: var(--accent); }
.sous-titre { color: var(--discret); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-top: .2rem; }

button.nouvelle {
    border: 1.5px solid var(--encre); background: var(--carte); color: var(--encre); font-weight: 600;
    padding: .5rem 1rem; white-space: nowrap;
}
button.nouvelle .plus { font-weight: 400; margin-right: .35rem; }
@media (max-width: 640px) {
    button.nouvelle { width: 2.7rem; height: 2.7rem; padding: 0; border-radius: 50%; flex: none; }
    button.nouvelle .texte { display: none; }
    button.nouvelle .plus { margin: 0; font-size: 1.5rem; line-height: 1; }
}
button.nouvelle:hover:not(:disabled) { background: var(--encre); color: #fff; }

/* Rappel du secret médical : discret, mais toujours sous le titre */
.secret {
    display: flex; gap: .6rem; align-items: flex-start; max-width: 1360px; margin: .9rem auto 0; padding: 0 1.6rem;
    color: var(--discret); font-size: .86rem;
}
.secret svg { flex: none; margin-top: .22rem; color: var(--accent); }
.secret strong { color: var(--encre); font-weight: 600; }
@media (max-width: 1000px) { .secret { padding: 0 1rem; } }

.grille {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.4rem;
    max-width: 1360px; margin: 0 auto; padding: 1rem 1.6rem 3rem; align-items: start;
}
.grille > * { min-width: 0; }
.resultat { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 1000px) {
    .grille { grid-template-columns: 1fr; padding: 1rem; }
    .entete { padding: 1rem 1rem 0; }
    .resultat { position: static; max-height: none; overflow: visible; order: -1; }
}

.bloc { background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 1.15rem 1.25rem; margin-bottom: 1rem; }

.aide { color: var(--discret); font-size: .86rem; }
.actions { display: flex; gap: .6rem; margin-top: .8rem; flex-wrap: wrap; align-items: center; }
.clavier { color: var(--discret); font-size: .84rem; margin: 0 .3rem; }
.chargement, .erreur { padding: 3rem; text-align: center; color: var(--discret); }
.erreur { color: var(--ko); }

.code {
    font-family: var(--mono); font-size: .86rem; font-weight: 600; white-space: nowrap;
    background: var(--accent-doux); color: var(--accent); border-radius: 6px; padding: .08rem .42rem;
}

/* Diagnostics d'un axe : des lignes séparées par un filet, sans cadre */
.ligne { border-top: 1px solid var(--filet); padding: .7rem 0; }
.ligne:first-of-type { border-top: 0; padding-top: 0; }
.ligne-tete { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.ligne-tete .ac { flex: 1 1 16rem; }
.libelle { flex: 1 1 12rem; }

/* Diagnostic principal : une étoile au même endroit sur chaque ligne */
button.principal {
    border: 1px solid var(--filet); background: none; color: var(--discret); border-radius: 999px;
    padding: .12rem .7rem .12rem .5rem; font-size: .84rem; white-space: nowrap;
}
button.principal:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
button.principal.actif { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.principal.actif:hover { color: #fff; }

/* Vérification d'une proposition : un bandeau sous la ligne, avec l'action Confirmer */
.revue {
    margin-top: .6rem; padding: .7rem .85rem; border-radius: var(--rayon-petit);
    background: var(--ambre-doux); border-left: 3px solid var(--ambre);
}
.revue-titre { font-size: .86rem; font-weight: 600; color: var(--ambre); }
.revue-titre .source { font-weight: 400; font-style: italic; color: var(--discret); margin-left: .25rem; }
.revue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .55rem; }
.ou { font-size: .84rem; color: var(--discret); margin: 0 .15rem; }
.candidat {
    text-align: left; font-size: .86rem; padding: .28rem .55rem; background: var(--carte); border-color: var(--filet);
    flex: 0 1 auto; max-width: 100%;
}
.candidat:hover:not(:disabled) { border-color: var(--accent); }
button.confirmer {
    background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; padding: .32rem .9rem; white-space: nowrap;
}
button.confirmer:hover:not(:disabled) { background: #245a42; border-color: #245a42; }
button.confirmer:focus-visible { outline-color: var(--ok); }

.point { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ambre); margin-right: .4rem; }
.etat { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.etat.verifier { color: var(--ambre); }
.etat.manquant { color: var(--ko); border-radius: 6px; padding: .1rem .3rem; }
.etat.manquant .point { background: var(--ko); }
.etat.manquant:focus { outline: 2px solid var(--ko); outline-offset: 2px; }

/* Le champ de recherche prend la place ; les deux raccourcis restent compacts à sa droite. */
.ajout { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.ajout .ac { flex: 1 1 22rem; margin-right: .35rem; }
.ajout button { flex: none; white-space: nowrap; }

/* Autocomplétion */
.ac { position: relative; }
.ac input { width: 100%; }
.ac-liste {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    margin: 0; padding: .3rem; list-style: none; max-height: 21rem; overflow-y: auto;
    background: var(--carte); border: 1px solid var(--filet); border-radius: var(--rayon);
    box-shadow: 0 12px 32px rgba(27, 29, 33, .12), 0 2px 6px rgba(27, 29, 33, .06);
}
.ac-liste.vers-le-haut { top: auto; bottom: calc(100% + 4px); }
.ac-liste li { display: flex; gap: .65rem; align-items: baseline; padding: .42rem .55rem; border-radius: var(--rayon-petit); cursor: pointer; }
.ac-liste li.actif { background: var(--accent-doux); }
.ac-liste li.ac-vide { color: var(--discret); cursor: default; }
.ac-texte { display: flex; flex-direction: column; }
.ac-texte small { color: var(--discret); font-size: .78rem; }
.ac-liste mark { background: none; color: inherit; font-weight: 700; }

/* Liste fermée : même champ, avec le chevron d'un menu déroulant */
.ac-menu input { padding-right: 2.2rem; cursor: pointer; text-overflow: ellipsis; }
.ac-chevron {
    position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
    border: 0; background: none; color: var(--discret); padding: .25rem .45rem; border-radius: 6px; line-height: 1;
}
.ac-chevron:hover { background: var(--accent-doux); color: var(--encre); }
.ac-liste li.ac-groupe {
    cursor: default; padding: .55rem .55rem .15rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--discret);
}

/* Champs simples */
.champ { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; margin-bottom: .6rem; }
.champ:last-child { margin-bottom: 0; }
.champ label { color: var(--discret); flex: 0 0 7.5rem; }
.champ .ac { flex: 1 1 16rem; }
.champ select { min-width: 0; }
.valeur { display: flex; gap: .6rem; align-items: baseline; flex: 1 1 14rem; }
.case { display: flex; gap: .55rem; align-items: center; padding: .2rem 0; }
.case-ligne { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.precision { flex: 1 1 12rem; padding: .25rem .55rem !important; font-size: .9rem; }

h2.repliable { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
button.replier { border: 0; background: none; padding: 0; font-weight: 600; text-align: left; }
button.replier:hover { color: var(--accent); }
.chevron { display: inline-block; width: 1rem; color: var(--discret); }
.resume { color: var(--discret); font-size: .9rem; margin-top: -.4rem; }

/* GAF : curseur coloré et score exact */
.gaf { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .65rem; margin-bottom: .7rem; }
.gaf label { color: var(--discret); }
.gaf-saisie { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.gaf-curseur {
    -webkit-appearance: none; appearance: none; flex: 1 1 12rem; min-width: 0; height: 6px; margin: .7rem 0;
    border-radius: 999px; cursor: pointer;
    background: linear-gradient(to right, hsl(4, 62%, 52%), hsl(30, 72%, 52%), hsl(48, 72%, 50%), hsl(90, 42%, 46%), hsl(150, 45%, 36%));
}
.gaf-curseur::-webkit-slider-thumb {
    -webkit-appearance: none; width: 1.25rem; height: 1.25rem; border-radius: 50%;
    background: var(--carte); border: 4px solid var(--gaf); box-shadow: 0 1px 4px rgba(27, 29, 33, .28);
}
.gaf-curseur::-moz-range-thumb {
    width: .75rem; height: .75rem; border-radius: 50%;
    background: var(--carte); border: 4px solid var(--gaf); box-shadow: 0 1px 4px rgba(27, 29, 33, .28);
}
.gaf-curseur.vide { opacity: .4; }
.gaf-nombre { width: 4.6rem; font-weight: 600; text-align: center; }
@media (max-width: 520px) {
    .gaf { grid-template-columns: 1fr; gap: .1rem; }
    .champ label { flex-basis: 100%; }
}

/* Colonne de droite : texte de départ et conclusion */
.conclusion {
    margin: 0; padding: 1rem 1.1rem; background: #fcfcfb; border: 1px solid var(--filet); border-radius: var(--rayon-petit);
    white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: .84rem; line-height: 1.65;
}
mark.manque { background: var(--ko-doux); color: var(--ko); border-radius: 4px; padding: .05rem .2rem; }
.revue-globale {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
    margin-top: .8rem; padding: .45rem .5rem .45rem .85rem; border-radius: var(--rayon-petit);
    background: var(--ambre-doux); color: var(--ambre); font-size: .92rem;
}
.confirmation {
    border: 1px solid #e6c4c0; border-radius: var(--rayon-petit); padding: .8rem .95rem; margin-top: .8rem;
    background: var(--ko-doux); font-size: .92rem;
}
.confirmation ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.controles { list-style: none; margin: 1rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--filet); font-size: .88rem; }
.controles li { display: flex; gap: .45rem; padding: .12rem 0; }
.marque-controle { flex: none; width: 1rem; text-align: center; font-weight: 700; }
.controles .ok { color: var(--ok); }
.controles .ko { color: var(--ko); }
.controles .facultatif { color: var(--ambre); }
.controles .titre { color: var(--encre); font-weight: 600; padding-bottom: .25rem; }

/* Téléphone */
@media (max-width: 640px) {
    /* Assez haut pour que le texte d'invite s'affiche en entier. */
    #texte-depart { min-height: 16rem; }

    /* En dessous de 16px, iOS zoome sur le champ dès qu'on le touche. */
    input[type=text], input[type=search], input[type=number], select, textarea { font-size: 16px; }

    /* Le libellé prend toute la largeur ; les actions passent dessous, sur une seule rangée, assez hautes pour le doigt. */
    .ligne-tete .libelle { flex-basis: calc(100% - 5.5rem); }
    .ligne-tete button { min-height: 2.5rem; }
    .ligne-tete button.principal { padding: .2rem .9rem .2rem .7rem; }
    .ligne-tete button.icone { margin-left: auto; min-width: 2.5rem; }
    .revue-actions button { min-height: 2.5rem; }
    /* Champ sur toute la largeur ; les deux raccourcis côte à côte en dessous, discrets. */
    .ajout .ac { flex-basis: 100%; margin-right: 0; }
    .ajout button { min-height: 2.2rem; }
}

/* Écran tactile sans clavier : les raccourcis clavier n'ont pas lieu d'être affichés. */
@media (hover: none) and (pointer: coarse) {
    .clavier, .raccourci { display: none; }
}

/* Éléments du gabarit Blazor */
#blazor-error-ui {
    color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

.loading-progress { position: absolute; display: block; width: 6rem; height: 6rem; inset: 22vh 0 auto 0; margin: 0 auto; }
.loading-progress circle { fill: none; stroke: var(--filet); stroke-width: .35rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child {
    stroke: var(--encre);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray .05s ease-in-out;
}
.loading-progress-text { position: absolute; text-align: center; color: var(--discret); font-size: .85rem; inset: calc(22vh + 2.4rem) 0 auto .2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Chargement"); }