/* =====================================================================
   26-parametres.css — lignes de réglage.

   Un réglage se lit en trois temps : ce que c'est, ce que ça change, et
   son état actuel. D'où la même structure partout — un intitulé, une
   explication d'une ligne, un contrôle aligné à droite. Un interrupteur
   sans explication oblige à l'essayer pour comprendre ce qu'il fait.
   ===================================================================== */

.ligne-reglage{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-6);
    padding:var(--space-4) 0;
    border-bottom:1px solid var(--border);
}

.ligne-reglage:last-of-type{ border-bottom:none; }

.ligne-reglage > div{ flex:1; min-width:0; }

.ligne-reglage strong{
    display:block;
    font-size:15px;
    font-weight:600;
    margin-bottom:var(--space-1);
}

/* Un réglage verrouillé reste visible et reste expliqué. Le faire
   disparaître laisserait croire qu'il n'existe pas ; l'afficher éteint
   laisserait croire qu'il est coupé. */
.reglage-verrouille{ opacity:.75; }

.etiquette-info{
    display:inline-block;
    margin-left:var(--space-2);
    padding:2px var(--space-2);
    border-radius:var(--radius-full);
    background:var(--surface-accent);
    color:var(--primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    vertical-align:middle;
}

.select-reglage{
    width:auto;
    min-width:150px;
    flex-shrink:0;
}

.sous-titre-reglage{
    margin-top:var(--space-6);
    font-size:15px;
    font-weight:700;
}

.ligne-reglage .secondary-button{ width:auto; flex-shrink:0; }

@media (max-width:640px){
    .ligne-reglage{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--space-3);
    }
}

/* ---------------------------------------------------------------------
   État « en construction ».
   Une page inachevée doit le dire d'elle-même. Griser une entrée de menu
   ne suffit pas : le gris se lit aussi bien comme « désactivé pour vous »
   que comme « pas encore écrit », et l'utilisateur ne sait pas lequel.
   --------------------------------------------------------------------- */
.badge-construction{
    display:inline-block;
    margin-left:var(--space-3);
    padding:var(--space-1) var(--space-3);
    border-radius:var(--radius-full);
    background:var(--surface-warning);
    color:var(--text);
    font-size:12px;
    font-weight:700;
    vertical-align:middle;
}

.etiquette-menu{
    margin-left:auto;
    padding:2px var(--space-2);
    border-radius:var(--radius-full);
    background:var(--surface-muted);
    color:var(--text-light);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.3px;
}

.panel-construction{
    border-style:dashed;
    border-width:1px;
}

.construction-entete{
    display:flex;
    align-items:flex-start;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.construction-entete i{
    font-size:26px;
    color:var(--texte-warning);
    flex-shrink:0;
    margin-top:var(--space-1);
}

.construction-entete h2{ font-size:18px; margin-bottom:var(--space-2); }
.construction-entete p{ font-size:14px; line-height:1.6; color:var(--text-light); }

/* Une carte qui mène quelque part doit se comporter comme un bouton :
   curseur, focus au clavier, et retour visuel au survol. */
.carte-cliquable{
    text-align:left;
    cursor:pointer;
    font:inherit;
    color:inherit;
}

.carte-cliquable:hover{ border-color:var(--primary); }
.carte-cliquable h3{ margin-bottom:var(--space-2); }

/* ---------------------------------------------------------------------
   Zone d'effacement du compte.
   Le rouge n'est pas décoratif : c'est le seul endroit du produit d'où
   l'on ne revient pas. Il est posé sur le panneau entier, pas seulement
   sur le bouton, pour qu'on sache où l'on est avant de lire le bouton.
   --------------------------------------------------------------------- */
.panel-danger{
    border-color:color-mix(in srgb, var(--danger) 40%, var(--border));
}

.panel-danger h2{ color:var(--danger-texte); }

.encart-danger{
    margin:var(--space-4) 0;
    padding:var(--space-4);
    border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--danger) 8%, transparent);
    border:1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    font-size:14px;
    line-height:1.6;
}

.encart-danger ul{
    margin:var(--space-2) 0 0 var(--space-5);
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
}

/* V3, Cycle 25 : ce bouton était ILLISIBLE — 1,28:1.
   Il hérite de `.secondary-button`, dont le fond est plein et gris
   (`var(--text-light)`), et n'en redéfinissait que la couleur du texte.
   Un rouge sur ce gris-là ne se distingue pas. L'intention était un
   bouton de contour — il pose déjà `border-color` — mais le fond
   n'avait jamais été remis à zéro.
   C'est le bouton de la suppression de compte : le geste le plus
   irréversible du produit, et on ne pouvait pas lire ce qu'il faisait. */
.bouton-danger{
    width:auto;
    background:transparent;
    color:var(--danger-texte);
    border-color:color-mix(in srgb, var(--danger) 45%, transparent);
}

.bouton-danger:hover{
    background:color-mix(in srgb, var(--danger) 10%, transparent);
}

/* Le bouton final est plein, et lui seul : c'est le dernier geste. Tant
   que la confirmation n'est pas recopiée, il reste désactivé — visible,
   pour qu'on sache ce qui attend, mais inatteignable. */
.bouton-danger-plein{
    width:auto;
    margin-top:var(--space-4);
    padding:var(--space-3) var(--space-5);
    border:none;
    border-radius:var(--radius-md);
    /* --danger-fond et non --danger : blanc sur le rouge d'accent donne
       3,76:1, sous le seuil AA. Même token qu'au Cycle 25 pour
       `.danger-button`, qui l'avait eu et pas celui-ci. */
    background:var(--danger-fond);
    color:var(--encre-bouton-plein);
    font-size:15px;
    font-weight:600;
    cursor:pointer;
}

.bouton-danger-plein:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.bouton-danger-plein:not(:disabled):hover{
    filter:brightness(.92);
}