/* Garde-robe — Réglages (htdocs/assets/garderobe/reglages.css), lot E. Cahier des charges § 8.7.
   Racine : .ec-reglages. Mobile : la liste, puis une sous-page poussée (.g-pousse, accueil.css) ; bureau :
   la liste (220) à gauche, la sous-page (640) à droite. Les feuilles ont leur racine : .rg-f-cat, .rg-f-dest,
   .rg-f-site, .rg-f-import, .rg-f-raccourcis. Aucune couleur en dur. */

/* ---------------- En-tête et liste ---------------- */
.ec-reglages .rg-entete { padding-bottom: 24px; }
.ec-reglages .rg-vers-pieces { margin-left: -6px; }
.ec-reglages .rg-index { display: flex; flex-direction: column; gap: 24px; }
.ec-reglages .rg-index-valeur { max-width: 45%; }
.ec-reglages .rg-zone { min-width: 0; }
/* Libellé long sur mobile, court dans la colonne de bureau (« Depuis un site »). */
.ec-reglages .rg-court { display: none; }

/* ---------------- Une sous-page ---------------- */
.ec-reglages .rg-page { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.ec-reglages .rg-barre { justify-content: flex-start; }
.ec-reglages .rg-page-entete { padding: 4px var(--gr-marge) 0; }
.ec-reglages .rg-page-titre { margin: 0; font: 400 44px/1 var(--gr-serif); letter-spacing: -.01em; outline: none; }
.ec-reglages .rg-contenu { display: flex; flex-direction: column; padding-top: 24px; }
.ec-reglages .rg-intro { margin: 0 var(--gr-marge) 16px; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
.ec-reglages .rg-titre { margin-top: 32px; }
.ec-reglages .rg-espace { margin-top: 24px; }
.ec-reglages .rg-bloc { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.ec-reglages .rg-bloc-titre { display: flex; align-items: center; gap: 12px; margin: 0; }
.ec-reglages .rg-erreur {
    display: flex; gap: 8px; align-items: flex-start; margin: 0 var(--gr-marge) 12px; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans);
}
.ec-reglages .rg-tourne { animation: rg-tourne 800ms linear infinite; }
/* Catégories pas encore chargées : l'erreur, puis « Réessayer ». */
.ec-reglages .rg-recharger { margin: 0 var(--gr-marge); }
.ec-reglages .rg-recharger .g-bouton[aria-disabled="true"] { cursor: progress; }
@keyframes rg-tourne { to { transform: rotate(360deg); } }

/* ---------------- Catégories : rangées de 56, poignée, glisser ---------------- */
.ec-reglages .rg-cats { padding: 0; list-style: none; overflow: visible; }
.ec-reglages .rg-cat, .ec-reglages .rg-cat-plus {
    position: relative; display: flex; align-items: stretch; min-height: 56px; background: var(--gr-surface); border-radius: var(--r-ctrl);
    transition: transform var(--d-court) var(--c-standard), box-shadow var(--d-court);
}
.ec-reglages .rg-cat + li::before { content: ''; position: absolute; top: 0; left: 44px; right: 0; border-top: 1px solid var(--gr-ligne); }
.ec-reglages .rg-cat-plus > .g-rangee { min-height: 56px; }
.ec-reglages .rg-souleve { z-index: 3; box-shadow: var(--gr-o-souleve); transition: box-shadow var(--d-court); }
.ec-reglages .rg-poignee {
    position: relative; flex: none; display: grid; place-items: center; width: 44px; padding: 0; border: 0; background: none;
    color: var(--gr-texte-3); cursor: grab; touch-action: none; border-radius: var(--r-ctrl);
}
.ec-reglages .rg-poignee .g-ic { width: 20px; height: 20px; }
.ec-reglages .rg-cat-ouvrir {
    flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; column-gap: 8px;
    padding: 0 16px 0 0; border: 0; background: none; color: var(--gr-texte); text-align: left; cursor: pointer; border-radius: var(--r-ctrl);
}
.ec-reglages .rg-cat-nom { flex: 1; min-width: 0; font: 500 17px/22px var(--gr-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-reglages .rg-cat-meta { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ec-reglages .rg-cat-ouvrir > .g-chevron { width: 20px; height: 20px; color: var(--gr-texte-3); flex: none; }
.ec-reglages .rg-cat-ouvrir:active { background: var(--gr-presse); }
@media (hover: hover) { .ec-reglages .rg-cat-ouvrir:hover { background: var(--gr-survol); } }

/* ---------------- La journée ---------------- */
.ec-reglages .rg-select > .g-valeur { color: var(--gr-texte-2); }
.ec-reglages .rg-rappel-boutons { margin-top: 12px; }

/* ---------------- Claude ---------------- */
.ec-reglages .rg-claude { display: flex; flex-direction: column; }
.ec-reglages .rg-claude-action { margin: 0 var(--gr-marge); }
.ec-reglages .rg-adresse { padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.ec-reglages .rg-adresse-titre { margin: 0; font: 600 15px/20px var(--gr-sans); }
.ec-reglages .rg-url { margin: 0; font: 400 14px/20px var(--gr-mono); color: var(--gr-texte); overflow-wrap: anywhere; word-break: break-all; }
.ec-reglages .rg-adresse-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-reglages .rg-garde {
    display: flex; gap: 8px; align-items: flex-start; margin: 12px var(--gr-marge) 0; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-attention-doux); color: var(--gr-attention); font: 500 13px/18px var(--gr-sans);
}
.ec-reglages .rg-garde > .g-ic, .ec-reglages .rg-erreur > .g-ic { flex: none; margin-top: 1px; }

/* ---------------- Étapes numérotées (raccourci iPhone, Claude) ---------------- */
.ec-reglages .rg-etapes, .rg-f-site .rg-etapes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.ec-reglages .rg-etapes-page { margin: 0 var(--gr-marge); }
.ec-reglages .rg-etape, .rg-f-site .rg-etape { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; font: 400 16px/22px var(--gr-sans); }
.ec-reglages .rg-etape-n, .rg-f-site .rg-etape-n {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: -1px;
    background: var(--gr-texte); color: var(--gr-inverse); font: 600 13px/1 var(--gr-sans);
}
.rg-f-site .rg-etape .g-bouton { display: flex; width: fit-content; margin-top: 8px; }
.rg-f-site .rg-en-ligne { vertical-align: -3px; }

/* La rangée « Raccourcis clavier » : au bureau seulement. */
.ec-reglages .rg-bureau { display: none; }

/* Une rangée étroite (colonne de bureau serrée) : la rangée et le nombre de pièces passent sous le nom. */
.ec-reglages .rg-contenu { container-type: inline-size; }
@container (max-width: 360px) {
    .ec-reglages .rg-cat-ouvrir { grid-template-columns: minmax(0, 1fr) 20px; grid-template-rows: auto auto; padding-block: 8px; }
    .ec-reglages .rg-cat-meta { grid-row: 2; grid-column: 1; }
    .ec-reglages .rg-cat-ouvrir > .g-chevron { grid-row: 1 / 3; grid-column: 2; }
}

/* ---------------- Bureau (≥ 1024) : liste de 220, contenu de 640 ----------------
   La colonne principale ne fait que 608 px à 1280 (colonne latérale et panneau de 440) : la mise en
   page suit la largeur de l'écran Réglages lui-même. */
@media (min-width: 1024px) {
    .ec-reglages { container-type: inline-size; }
    .ec-reglages .rg-entete { padding: 24px 40px 32px; }
    .ec-reglages .rg-vers-pieces { display: none; }
    .ec-reglages .rg-grille { --gr-marge: 0px; display: grid; grid-template-columns: 184px minmax(0, 640px); gap: 24px; padding: 0 40px; align-items: start; }
    .ec-reglages .rg-index { position: sticky; top: calc(var(--g-haut, 0px) + 24px); gap: 16px; }
    .ec-reglages .rg-index-valeur { display: none; }
    /* La liste sert de navigation (comme la colonne latérale) : la page montrée est surlignée, sans chevron ;
       un libellé ne passe jamais à la ligne (rangées de 48, § 6.5). */
    .ec-reglages .rg-index .g-chevron { display: none; }
    .ec-reglages .rg-index .g-rangee-libelle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ec-reglages .rg-index .rg-long { display: none; }
    .ec-reglages .rg-index .rg-court { display: inline; }
    .ec-reglages .rg-index .g-rangee[aria-current="page"] { background: var(--gr-presse); font-weight: 500; }
    .ec-reglages .rg-barre { display: none; }
    .ec-reglages .rg-page { padding: 0; }
    .ec-reglages .rg-page-entete { padding: 0; }
    .ec-reglages .rg-page-titre { font-size: 34px; line-height: 1.1; }
    .ec-reglages .rg-contenu { padding-top: 20px; }
    .ec-reglages .rg-bureau { display: flex; }
}
@container (min-width: 900px) {
    .ec-reglages .rg-grille { grid-template-columns: 220px minmax(0, 640px); gap: 40px; }
}

/* =====================================================================
   Feuilles
   ===================================================================== */
.rg-f-cat .rg-f-corps, .rg-f-site .rg-f-corps, .rg-f-import .rg-f-corps, .rg-f-raccourcis .rg-f-corps {
    display: flex; flex-direction: column; gap: 8px; padding: 0 var(--gr-marge) 8px;
}
.rg-f-cat .g-libelle { margin: 12px 0 0; }
.rg-f-cat .rg-f-aide, .rg-f-site .rg-f-aide, .rg-f-import .rg-f-aide, .rg-f-raccourcis .rg-f-aide {
    margin: 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2);
}
.rg-f-site .rg-f-texte, .rg-f-import .rg-f-texte { margin: 0; font: 400 16px/22px var(--gr-sans); }
.rg-f-cat .rg-f-alerte, .rg-f-import .rg-f-alerte {
    display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-ctrl);
    background: var(--gr-danger-doux); color: var(--gr-danger); font: 500 15px/21px var(--gr-sans);
}
/* Sous-catégories : puces avec leur nombre de pièces et un « x ». */
.rg-f-cat .rg-sous { padding: 0 2px 0 0; gap: 0; cursor: default; max-width: 100%; }
/* La puce n'est pas un bouton : sa zone de toucher élargie (::before de .g-puce, positionnée) passerait par-dessus le
   nom et le rendrait intouchable. Le nom a la sienne, comme le « x ». Un nom long (40 caractères) se coupe d'une
   ellipse au lieu de pousser la feuille hors de l'écran. */
.rg-f-cat .rg-sous::before { content: none; }
.rg-f-cat .rg-sous-nom {
    position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    height: 36px; padding: 0 6px 0 14px; border: 0; background: none; color: inherit; font: inherit; cursor: text; border-radius: 18px 0 0 18px;
}
.rg-f-cat .rg-sous-nom::before { content: ''; position: absolute; inset: -4px 0; }
.rg-f-cat .rg-sous-x {
    position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--gr-texte-2);
    display: grid; place-items: center; cursor: pointer;
}
.rg-f-cat .rg-sous-x::before { content: ''; position: absolute; inset: -6px; }
.rg-f-cat .rg-sous-x > .g-ic { width: 16px; height: 16px; }
.rg-f-cat .rg-sous-saisie { width: 170px; height: 36px; padding: 0 14px; border-radius: 18px; font-size: 16px; }
.rg-f-cat .rg-position { display: flex; align-items: center; gap: 8px; }
.rg-f-cat .rg-position > span { min-width: 64px; font: 500 15px/20px var(--gr-sans); color: var(--gr-texte-2); }
.rg-f-cat .rg-f-supprimer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; text-align: center; }

/* Déplacer les pièces vers… : rangées-radio. */
.rg-f-dest .rg-dest { margin: 0 var(--gr-marge); background: var(--gr-surface-2); }
.rg-f-dest .rg-dest input { width: 20px; height: 20px; margin: 0; accent-color: var(--gr-texte); flex: none; }
.rg-f-dest .rg-dest-aide { margin-top: 12px; }

/* Le bouton « + Garde-robe » : une pilule encre, à glisser dans les favoris. */
.rg-f-site .rg-favori-ligne { margin: 8px 0; }
.rg-f-site .rg-favori {
    display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px;
    background: var(--gr-texte); color: var(--gr-inverse); font: 600 17px/1 var(--gr-sans); text-decoration: none; cursor: grab;
}
.rg-f-site .g-bouton { align-self: flex-start; }

/* Raccourcis clavier */
.rg-f-raccourcis .rg-r-titre { margin: 12px 0 4px; font: 400 22px/28px var(--gr-serif); }
.rg-f-raccourcis .rg-r-liste { margin: 0; display: flex; flex-direction: column; }
.rg-f-raccourcis .rg-r-liste > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--gr-ligne); }
.rg-f-raccourcis dt, .rg-f-raccourcis dd { margin: 0; font: 400 15px/21px var(--gr-sans); }
.rg-f-raccourcis kbd { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--gr-surface-2); font: 600 13px/20px var(--gr-sans); }

/* ---------------- Simulation (contenu dessiné par GR.simulation.reglages : simulation.css, .sm-r-*) ---------------- */
.ec-reglages .rg-simulation { display: flex; flex-direction: column; min-width: 0; }