/* Heop — les gabarits de la recette de fusion.
 *
 * Six formes relevees dans les maquettes validees, posees ICI une seule fois et
 * reutilisees partout. Chacune est stylee via les jetons : aucune couleur, aucun
 * rayon, aucune ombre en dur.
 *
 *   chip · badge · CTA · carte · feuille · pastille d'icone
 *
 * Ces classes completent le systeme existant (ui/button.css, ui/card.css,
 * ui/badge.css). Elles ne le remplacent pas : elles portent le vocabulaire
 * « application en poche » que les maquettes ajoutent au site.
 */

/* --- Chip : un filtre, un lieu, un palier de distance -------------------- */

.ui-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--tap-size, 44px);
    padding: 7px 14px;
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-plan-card, #FFFDF7);
    color: var(--ui-color-ink, #1B1D18);
    font-size: var(--ui-font-xs);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.ui-chip--solid {
    border-color: transparent;
    background: var(--ui-color-accent, #C86138);
    color: #FFFFFF;
}

.ui-chip--brand {
    border-color: transparent;
    background: var(--ui-color-brand-soft, #DFE8DC);
    color: var(--ui-color-brand, #245A3B);
}

.ui-chip[aria-pressed="true"],
.ui-chip.is-active {
    border-color: var(--ui-color-brand, #245A3B);
    background: var(--ui-color-brand-soft, #DFE8DC);
    color: var(--ui-color-brand, #245A3B);
}

/* --- Badge : un etat, jamais un compteur de vanite ---------------------- */

.ui-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--ui-radius-chip, 999px);
    background: var(--ui-color-brand-soft, #DFE8DC);
    color: var(--ui-color-brand, #245A3B);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
}

.ui-tag--accent {
    background: #F6E3D6;
    color: var(--ui-color-accent-dark, #A64F31);
}

/* --- CTA : le geste principal d'un ecran -------------------------------- */

.ui-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--tap-size, 44px);
    padding: 13px 20px;
    border: 0;
    border-radius: var(--ui-radius-cta, 12px);
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
    font-family: inherit;
    font-size: var(--ui-font-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ui-cta--accent { background: var(--ui-color-accent, #C86138); color: #FFFFFF; }
.ui-cta--cream  { background: var(--ui-color-cream, #FFF8EC); color: var(--ui-color-brand, #245A3B); }
.ui-cta--block  { width: 100%; }

/* La variante EN TRAIT : le second appel d'un ecran qui en porte deux. Un seul
   aplat plein par ecran — deux boutons pleins cote a cote se lisent comme une
   hesitation, et l'oeil ne sait plus lequel est le geste principal. */
.ui-cta--trait {
    background: transparent;
    color: var(--ui-color-brand, #245A3B);
    box-shadow: inset 0 0 0 1.5px currentColor;
}

.ui-cta--trait:hover,
.ui-cta--trait:focus-visible {
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
}

/* La variante COMPACTE : un appel secondaire loge dans un en-tete de module,
   ou la hauteur de 44px du gabarit plein ecraserait la ligne de titre. */
.ui-cta--compact {
    min-height: 38px;
    padding: 9px 16px;
    font-size: .9rem;
}

/* --- Carte : ce qui flotte au-dessus de la page ------------------------- */

.ui-tile {
    display: block;
    padding: 13px 14px;
    border: 1px solid var(--ui-color-line, #DFD4C3);
    border-radius: var(--ui-radius-card, 14px);
    background: var(--ui-plan-card, #FFFDF7);
    box-shadow: var(--ui-shadow-sm, 0 8px 20px rgba(27, 29, 24, .07));
    color: inherit;
    text-decoration: none;
}

/* La carte heros : vert plein, CTA creme. C'est le seul aplat de marque d'un
   ecran de contenu — il porte l'accroche, pas la decoration. */
.ui-hero {
    padding: 18px 18px 16px;
    border-radius: var(--ui-radius-hero, 18px);
    background: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-cream, #FFF8EC);
    box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
}

.ui-hero__eyebrow {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .84;
}

/* --- Feuille : le tiroir qui monte du bas ------------------------------- */

.ui-sheet {
    border-radius: var(--ui-radius-sheet, 22px) var(--ui-radius-sheet, 22px) 0 0;
    padding: 12px 16px 18px;
    background: var(--ui-plan-sunk, #F4EBD9);
    box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
}

.ui-sheet__grab {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 10px;
    border-radius: 2px;
    background: var(--ui-color-line, #DFD4C3);
}

/* --- Pastille d'icone : l'icone posee sur sa surface douce -------------- */

.ui-ico {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ui-color-brand-soft, #DFE8DC);
    color: var(--ui-color-brand, #245A3B);
}

.ui-ico--accent {
    background: #F6E3D6;
    color: var(--ui-color-accent-dark, #A64F31);
}

.ui-ico .ui-icon {
    width: 16px;
    height: 16px;
}

/* --- Respiration -------------------------------------------------------- */

.ui-stack-lg { display: grid; gap: 18px; }
.ui-stack-md { display: grid; gap: 12px; }

/* =====================================================================
 * LA REPONSE AU GESTE
 *
 * Cette feuille declarait six gabarits communs, charges sur toutes les pages,
 * et pas UN etat : ni survol, ni focus visible, ni transition. Zero. C'est la
 * raison pour laquelle le desktop paraissait mort — pas un seuil mal place,
 * une absence.
 *
 * Au doigt, un element qui ne repond pas passe inapercu : l'ecran a deja
 * change. A la souris, le survol est le seul retour AVANT le clic : sans lui,
 * rien ne dit qu'un objet est cliquable, et l'interface parait figee.
 *
 * Les durees viennent toutes du meme jeton. La doctrine tient : seuls transform
 * et opacity — plus les couleurs, qui ne declenchent pas de recalcul de mise en
 * page — sont animes, aucune boucle, et prefers-reduced-motion coupe tout.
 * ===================================================================== */

.ui-chip,
.ui-tag,
.ui-cta,
.ui-tile,
.ui-ico {
    transition:
        background-color var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease),
        border-color var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease),
        color var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease),
        box-shadow var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease),
        transform var(--ui-motion-response, 220ms) var(--ui-motion-ease, ease);
}

/* Le focus visible, sur TOUS les gabarits et d'un seul coup : c'est le mode par
   defaut d'une partie des visiteurs, pas une option d'accessibilite. */
.ui-chip:focus-visible,
.ui-tag:focus-visible,
.ui-cta:focus-visible,
.ui-tile:focus-visible,
.ui-sheet:focus-visible {
    outline: 2px solid var(--ui-color-brand, #245A3B);
    outline-offset: 2px;
}

/* --- La puce ------------------------------------------------------------ */

.ui-chip:hover,
.ui-chip:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
    color: var(--ui-color-brand, #245A3B);
}

.ui-chip--solid:hover,
.ui-chip--brand:hover {
    /* Sur une puce deja pleine, c'est le fond qui se fonce : reprendre le
       traitement de la puce vide ne se verrait pas. */
    filter: brightness(.94);
}

.ui-chip:active { transform: scale(.97); }

/* --- L'appel a l'action -------------------------------------------------- */

.ui-cta:hover,
.ui-cta:focus-visible {
    box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
    transform: translateY(-1px);
}

/* L'enfoncement repond AU DOIGT, la ou le survol n'existe pas. Sans lui, le
   tactile n'a aucun retour entre l'appui et le changement d'ecran. */
.ui-cta:active {
    transform: translateY(0) scale(.99);
    box-shadow: none;
}

/* --- La tuile ------------------------------------------------------------ */

.ui-tile:hover,
.ui-tile:focus-visible {
    border-color: var(--ui-color-brand, #245A3B);
    box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11));
    transform: translateY(-2px);
}

.ui-tile:active { transform: translateY(0); }

/* --- La pastille d'icone ------------------------------------------------- */
/* Elle est decorative : elle suit son parent au lieu de repondre elle-meme. */

a:hover > .ui-ico,
button:hover > .ui-ico,
label:hover .ui-ico {
    transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .ui-chip,
    .ui-tag,
    .ui-cta,
    .ui-tile,
    .ui-ico {
        transition: none;
    }

    .ui-chip:active,
    .ui-cta:hover,
    .ui-cta:focus-visible,
    .ui-cta:active,
    .ui-tile:hover,
    .ui-tile:focus-visible,
    .ui-tile:active,
    a:hover > .ui-ico,
    button:hover > .ui-ico,
    label:hover .ui-ico {
        transform: none;
    }
}