/* Garde-robe — Style (htdocs/assets/garderobe/style.css), 20/10/2026. Racine : .ec-style (routes #style et #style/<id>).
   Téléphone d'abord, comme Couleurs : « ‹ Tenues » (ou d'où l'on vient), surtitre, affiche, chapô ; le style demandé
   (.st-vedette, une carte) ; « Votre style » (barres) ; « Les quatorze styles » (cartes) ; la règle de lecture. Bureau
   (1024 et plus) : sans « ‹ » ni barre compacte (la colonne latérale y mène), l'affiche à 34, une colonne de 760 au plus.
   Les teintes de la palette sont des DONNÉES (--c1 posé en ligne, liseré --c-encre de composants.css) ; aucune couleur
   en dur. */

.ec-style { position: relative; padding-bottom: 32px; container-type: inline-size; }
.ec-style :where(.st-texte, .st-h2, .st-h3, .st-vedette-nom, .st-vedette-essence, .st-carte-nom, .st-carte-essence, .st-cle-nom, .st-piece-nom, .st-tenue-nom, .st-note, .st-source) { overflow-wrap: anywhere; }
.ec-style :where(h2, h3)[tabindex="-1"]:focus { outline: none; }
.ec-style :where(h2, h3)[tabindex="-1"]:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 4px; }

/* ---------------- En-tête ---------------- */
.ec-style .st-entete-ligne { margin-left: -10px; }
.ec-style .st-surtitre { margin: 8px 0 0; color: var(--gr-texte-2); }
.ec-style .g-entete > .st-titre { margin: 4px 0 0; }
.ec-style .st-chapo { margin: 10px 0 0; color: var(--gr-texte-2); max-width: 32ch; }

/* ---------------- Corps, sections, textes ---------------- */
.ec-style .st-corps { display: flex; flex-direction: column; gap: 44px; margin-top: 24px; }
.ec-style .st-corps > [data-st-zone="vedette"]:empty { display: none; }
.ec-style .st-section { padding: 0 var(--gr-marge-d) 0 var(--gr-marge); scroll-margin-top: 56px; }
.ec-style .st-h2 { margin: 0 0 12px; font: 400 28px/1.1 var(--gr-serif); }
.ec-style .st-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 10px; font: 600 17px/22px var(--gr-sans); }
.ec-style .st-compte { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-style .st-texte { margin: 0 0 10px; max-width: 62ch; }
.ec-style .st-texte:last-child { margin-bottom: 0; }
.ec-style .st-chapeau { color: var(--gr-texte-2); }
.ec-style .st-bloc .st-chapeau { font: 400 15px/21px var(--gr-sans); }
.ec-style .st-note { margin: 8px 0 0; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); max-width: 62ch; }
.ec-style .st-note > .g-ic { vertical-align: -2px; margin-right: 4px; }
.ec-style .st-resume b { font-weight: 600; }

/* ---------------- Pastilles et vignettes ---------------- */
.ec-style .st-nuance { display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--c1); box-shadow: inset 0 0 0 1px var(--c-encre); }
.ec-style .st-nuance.mini { width: 14px; height: 14px; }
.ec-style .st-vgs { display: flex; flex: none; align-items: center; --vg: 28px; }
.ec-style .st-vgs > * + * { margin-left: -8px; box-shadow: 0 0 0 2px var(--gr-surface); }
.ec-style .st-vgs-plus {
    display: grid; place-items: center; flex: none; width: var(--vg); height: var(--vg); border-radius: 50%; margin-left: -8px;
    background: var(--gr-surface-2); color: var(--gr-texte-2); font: 600 11px/1 var(--gr-sans); font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--gr-surface);
}
.ec-style .st-lien-piece { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--gr-texte); text-decoration: none; }
.ec-style .st-lien-piece:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; border-radius: 6px; }

/* ---------------- Le style demandé (#style/<id>) ---------------- */
.ec-style .st-vedette { margin: 0 var(--gr-marge-d) 0 var(--gr-marge); padding: 16px; border-radius: var(--r-ctrl); background: var(--gr-surface);
    box-shadow: inset 0 0 0 1px var(--gr-ligne); }
.ec-style .st-vedette-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ec-style .st-vedette-titre { display: flex; flex-direction: column; gap: 2px; margin: 0; font: inherit; }
.ec-style .st-vedette-titre > .t-surtitre { color: var(--gr-texte-2); }
.ec-style .st-vedette-nom { font: 400 40px/1.05 var(--gr-serif); }
.ec-style .st-vedette-fermer { margin: -8px -8px 0 0; }
.ec-style .st-vedette-essence { margin: 10px 0 12px; font: 500 17px/24px var(--gr-sans); }
.ec-style .st-bloc { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--gr-ligne); }
/* Sa palette : pastilles nommées ; soulignées, celles d'une pièce à vous. */
.ec-style .st-palette-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.ec-style .st-palette-item { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/20px var(--gr-sans); color: var(--gr-texte-2); }
.ec-style .st-palette-item.portee { color: var(--gr-texte); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
/* Ses pièces clés : coche (trouvée, avec la pièce) ou cercle pointillé (à trouver). */
.ec-style .st-cles { list-style: none; margin: 0; padding: 0; }
.ec-style .st-cle { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: start; padding: 10px 0; }
.ec-style .st-cle + .st-cle { border-top: 1px solid var(--gr-ligne); }
.ec-style .st-cle-ic { width: 22px; height: 22px; margin-top: 1px; }
.ec-style .st-cle.ok .st-cle-ic { color: var(--gr-ok); }
.ec-style .st-cle.manque .st-cle-ic { color: var(--gr-texte-3); }
.ec-style .st-cle-texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ec-style .st-cle-nom { font: 600 15px/20px var(--gr-sans); }
.ec-style .st-cle .st-lien-piece { --vg: 28px; font: 500 14px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-style .st-cle .st-lien-piece > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ec-style .st-cle-manque { font: italic 500 14px/18px var(--gr-sans); color: var(--gr-texte-2); }
/* Vos pièces : une grille de vignettes nommées. */
.ec-style .st-pieces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 10px; }
.ec-style .st-pieces .st-lien-piece { display: flex; width: 100%; flex-direction: column; align-items: stretch; gap: 6px; }
.ec-style .st-pieces .g-vg { width: 100%; height: auto; aspect-ratio: 1; }
.ec-style .st-piece-nom { font: 500 13px/17px var(--gr-sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-style .st-plus { margin-top: 10px; }
/* Vos tenues : leurs planches. */
.ec-style .st-tenues { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.ec-style .st-tenue { display: flex; width: 100%; flex-direction: column; gap: 6px; color: var(--gr-texte); text-decoration: none; }
.ec-style .st-tenue .g-planche { width: 100%; padding: 8px; }
.ec-style .st-tenue:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; border-radius: var(--r-tirage); }
.ec-style .st-tenue-nom { font: 500 13px/17px var(--gr-sans); }
/* Ses marques : les vôtres en puces (liens), les autres en texte. */
.ec-style .st-marques { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }
.ec-style span.st-marque { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 18px;
    box-shadow: inset 0 0 0 1px var(--gr-ligne); font: 500 14px/1 var(--gr-sans); color: var(--gr-texte-2); }
.ec-style a.st-marque.vue { box-shadow: inset 0 0 0 1.5px var(--gr-texte); background: transparent; font-weight: 600; }
.ec-style .st-idee { font: italic 400 17px/24px var(--gr-sans); }
.ec-style .st-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ec-style .st-evoluer { margin-top: 6px; gap: 6px; }
.ec-style .st-lien-evoluer { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--gr-texte); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------------- Votre style : barres ---------------- */
.ec-style .st-barres { list-style: none; margin: 8px 0 0; padding: 0; }
.ec-style .st-barre {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; grid-template-areas: "nom nb chev" "piste piste chev" "jours jours chev";
    column-gap: 10px; row-gap: 4px; align-items: center; padding: 12px 0; color: var(--gr-texte); text-decoration: none;
}
.ec-style .st-barres > li + li .st-barre { border-top: 1px solid var(--gr-ligne); }
.ec-style .st-barre:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; border-radius: 6px; }
.ec-style .st-barre-nom { grid-area: nom; font: 600 16px/20px var(--gr-sans); }
.ec-style .st-barre-nb { grid-area: nb; font: 500 14px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-style .st-barre-piste { grid-area: piste; display: block; height: 8px; border-radius: 4px; background: var(--gr-surface-2); overflow: hidden; }
.ec-style .st-barre-piste > i { display: block; height: 100%; border-radius: 4px; background: var(--gr-texte); }
.ec-style .st-barre-jours { grid-area: jours; font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); }
.ec-style .st-barre-jours:empty { display: none; }
.ec-style .st-barre-chevron { grid-area: chev; width: 18px; height: 18px; color: var(--gr-texte-3); }
@media (hover: hover) { .ec-style .st-barre:hover .st-barre-nom { text-decoration: underline; text-underline-offset: 3px; } }
.ec-style .st-faits { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--gr-ligne); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ec-style .st-faits > li { display: flex; align-items: baseline; gap: 8px; font: 500 14px/20px var(--gr-sans); color: var(--gr-texte-2); }
.ec-style .st-fait-nb { font: 400 28px/1 var(--gr-serif); color: var(--gr-texte); font-variant-numeric: tabular-nums; }
.ec-style .st-sans { margin-top: 12px; }
.ec-style .st-sans > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; font: 600 15px/20px var(--gr-sans); }
.ec-style .st-sans > summary::-webkit-details-marker { display: none; }
.ec-style .st-sans-chevron { width: 18px; height: 18px; transition: transform var(--d-court) var(--c-standard); }
.ec-style .st-sans[open] .st-sans-chevron { transform: rotate(90deg); }
.ec-style .st-sans-liste { list-style: none; margin: 8px 0 0; padding: 0; --vg: 28px; }
.ec-style .st-sans-liste > li { padding: 6px 0; }
.ec-style .st-sans-liste .st-lien-piece { font: 500 15px/20px var(--gr-sans); }
.ec-style .st-sans-marque { color: var(--gr-texte-2); font-weight: 400; }

/* ---------------- Les quatorze styles : cartes ---------------- */
.ec-style .st-cartes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ec-style .st-carte {
    display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 14px 16px; border-radius: var(--r-ctrl); background: var(--gr-surface);
    box-shadow: inset 0 0 0 1px var(--gr-ligne); color: var(--gr-texte); text-decoration: none;
    transition: box-shadow var(--d-court) var(--c-standard), transform var(--d-instant) var(--c-standard);
}
.ec-style .st-carte:active { transform: scale(.99); }
.ec-style .st-carte.active { box-shadow: inset 0 0 0 2px var(--gr-texte); }
.ec-style .st-carte:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 2px; }
@media (hover: hover) { .ec-style .st-carte:hover { box-shadow: inset 0 0 0 1px var(--gr-ligne-forte); } .ec-style .st-carte.active:hover { box-shadow: inset 0 0 0 2px var(--gr-texte); } }
.ec-style .st-carte-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ec-style .st-carte-nom { font: 400 22px/1.15 var(--gr-serif); }
.ec-style .st-carte-nb { flex: none; font: 600 13px/18px var(--gr-sans); font-variant-numeric: tabular-nums; }
.ec-style .st-carte-nb.zero { font-weight: 500; color: var(--gr-texte-3); }
.ec-style .st-carte-essence { font: 400 14px/20px var(--gr-sans); color: var(--gr-texte-2); }
.ec-style .st-carte-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-height: 28px; }
.ec-style .st-carte-palette { display: flex; gap: 4px; }

/* ---------------- Règle de lecture ---------------- */
.ec-style .st-source { margin: 0 var(--gr-marge-d) 0 var(--gr-marge); padding-top: 16px; border-top: 1px solid var(--gr-ligne);
    font: 500 13px/19px var(--gr-sans); color: var(--gr-texte-2); max-width: 62ch; }
.ec-style .st-source p { margin: 0; }

/* ---------------- États ---------------- */
.ec-style .st-attente { margin: 0 var(--gr-marge-d) 0 var(--gr-marge); display: flex; flex-direction: column; }
.ec-style .st-sq { height: 104px; margin-top: 24px; border-radius: var(--r-ctrl); }
.ec-style .st-sq:first-child { margin-top: 0; }
.ec-style .st-erreur { margin: 16px var(--gr-marge-d) 0 var(--gr-marge); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-style .st-erreur-texte { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }

/* ---------------- Colonne large ---------------- */
@container (min-width: 560px) {
    .ec-style .st-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .ec-style :where(.st-carte, .st-sans-chevron) { transition: none; } }

/* ---------------- Bureau (1024 et plus) ---------------- */
@media (min-width: 1024px) {
    .ec-style { padding-top: 24px; }
    .ec-style .st-compacte, .ec-style .st-entete-ligne { display: none; }
    .ec-style .st-entete { padding-top: 0; }
    .ec-style .st-surtitre { margin-top: 0; }
    .ec-style .g-entete > .st-titre { margin: 2px 0 0; font-size: 34px; line-height: 40px; }
    .ec-style .st-chapo { max-width: 44ch; }
    .ec-style .st-h2 { font-size: 34px; }
    .ec-style :where(.st-section, .st-vedette, .st-source, .st-attente) { max-width: 760px; }
    .ec-style .st-vedette { max-width: calc(760px - var(--gr-marge) - var(--gr-marge-d)); }
}