/* =============================================================================
   Socle commun DIMOBI — composants
   =============================================================================
   Boutons, formulaires, alertes, badges, avatars, cartes, coquille de
   l'application (barre latérale, liens de navigation et étiquette « Bientôt »,
   profil, en-tête, barre du bas sur téléphone) et tête de page.

   Toute la présentation vit dans les feuilles : aucun attribut style= ni
   <style> dans les gabarits (la CSP de l'espace client les refuse).
   ============================================================================= */

/* ── Boutons ──────────────────────────────────────────────────────────── */
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px; padding: .6rem 1.1rem;
    border: 1px solid transparent; border-radius: 10px;
    background: var(--accent); color: var(--accent-texte);
    font: 600 .95rem/1.1 var(--police);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 1px 2px rgb(48 31 30 / .22);
    transition: background var(--duree), border-color var(--duree), box-shadow var(--duree), transform .08s;
    touch-action: manipulation;
}
.bouton:hover { background: var(--accent-survol); color: var(--accent-texte); }
.bouton:active { transform: translateY(1px); }
.bouton--secondaire {
    background: var(--surface); color: var(--texte);
    border-color: var(--ligne-forte); box-shadow: var(--ombre-1);
}
.bouton--secondaire:hover { background: var(--surface-2); color: var(--texte); border-color: var(--texte-3); }
.bouton--fantome { background: transparent; color: var(--texte-2); box-shadow: none; }
.bouton--fantome:hover { background: var(--creux); color: var(--texte); }
.bouton--danger {
    background: transparent; color: var(--danger); box-shadow: none;
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}
.bouton--danger:hover { background: var(--danger-voile); color: var(--danger); }
.bouton--large { width: 100%; min-height: 50px; font-size: 1rem; }
.bouton--petit { min-height: 36px; padding: .4rem .75rem; font-size: .86rem; border-radius: 9px; }
.bouton-icone {
    display: inline-grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 10px;
    border: 1px solid transparent; background: transparent; color: var(--texte-2);
    cursor: pointer; text-decoration: none;
    transition: background var(--duree), color var(--duree), border-color var(--duree);
}
.bouton-icone:hover { background: var(--creux); color: var(--texte); }
.bouton-icone--cadre { border-color: var(--ligne); background: var(--surface); }
/* Menu d'actions derrière une molette (<details class="menu-actions">) : les actions
   rares d'une ligne (changer le rôle, désactiver…) ne sont montrées qu'à la demande.
   Fonctionne sans JavaScript ; le script de chaque application le referme au clic
   ailleurs et à la touche Échap. */
.menu-actions { position: relative; }
.menu-actions > summary { list-style: none; }
.menu-actions > summary::-webkit-details-marker { display: none; }
.menu-actions[open] > summary { background: var(--creux); color: var(--texte); border-color: var(--ligne-forte); }
.menu-actions-panneau {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30;
    display: grid; gap: .55rem; min-width: 16rem; max-width: min(22rem, 86vw);
    padding: .8rem; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--ligne-forte); box-shadow: var(--ombre-3);
}
.menu-actions-panneau form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; }
.menu-actions-panneau form > .bouton { flex: 1 1 auto; justify-content: center; }
.menu-actions-panneau .separateur { margin: .15rem 0; }
.lien-bouton {
    background: none; border: 0; padding: 0; font: inherit; color: var(--lien);
    cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.lien-fleche { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.lien-fleche .icone { transition: transform var(--duree) var(--ressort); }
.lien-fleche:hover .icone { transform: translateX(3px); }

/* ── Formulaires ──────────────────────────────────────────────────────── */
.formulaire { display: grid; gap: 1.1rem; }
.formulaire label, .champ-libelle { display: grid; gap: .4rem; font-weight: 600; font-size: .9rem; color: var(--texte); }
.aide { font-weight: 400; font-size: .83rem; color: var(--texte-3); }
.formulaire-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
/* Case à cocher : la case et son libellé sur une même ligne. */
.case-a-cocher { display: flex !important; align-items: center; gap: .55rem; font-weight: 500 !important; }
.case-a-cocher input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 520px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], select, textarea {
    width: 100%; min-height: 46px;
    padding: .65rem .85rem;
    font: 400 1rem/1.3 var(--police);
    color: var(--texte);
    background: var(--surface);
    border: 1px solid var(--ligne-forte);
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgb(48 31 30 / .04);
    transition: border-color var(--duree), box-shadow var(--duree), background var(--duree);
}
textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--texte-3); }
input:hover, select:hover, textarea:hover { border-color: var(--texte-3); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 20%, transparent);
}
input[readonly] { background: var(--creux); color: var(--texte-2); }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
select {
    appearance: none; padding-right: 2.4rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2384766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
.champ-icone { position: relative; display: block; }
.champ-icone > .icone { position: absolute; left: .85rem; top: 50%; translate: 0 -50%; color: var(--texte-3); pointer-events: none; }
.champ-icone input { padding-left: 2.6rem; }
.champ-mdp { position: relative; display: block; }
.champ-mdp input { padding-right: 3rem; }
.bascule-mdp {
    position: absolute; right: 4px; top: 50%; translate: 0 -50%;
    display: grid; place-items: center; width: 40px; height: 40px;
    border: 0; border-radius: 8px; background: transparent; color: var(--texte-3); cursor: pointer;
}
.bascule-mdp:hover { color: var(--texte); background: var(--creux); }
.code-saisie {
    font-family: var(--police-mono) !important; font-size: 1.5rem !important;
    letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums;
}

/* ── Messages, badges, avatars ────────────────────────────────────────── */
.alerte {
    display: flex; gap: .7rem; align-items: flex-start;
    margin: 0 0 1.25rem; padding: .8rem 1rem;
    border: 1px solid transparent; border-radius: 12px;
    font-size: .93rem; line-height: 1.45;
}
.alerte > .icone { margin-top: 1px; }
.alerte--succes { background: var(--succes-voile); color: var(--succes); border-color: color-mix(in srgb, var(--succes) 22%, transparent); }
.alerte--erreur { background: var(--danger-voile); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.alerte--info { background: var(--info-voile); color: var(--info); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.alerte--attention { background: var(--attention-voile); color: var(--attention); border-color: color-mix(in srgb, var(--attention) 22%, transparent); }

.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .55rem; border-radius: 999px;
    font: 600 .75rem/1.3 var(--police); white-space: nowrap;
    background: var(--creux); color: var(--texte-2);
}
.badge--administrateur { background: var(--info-voile); color: var(--info); }
.badge--super_administrateur { background: var(--accent-voile); color: var(--lien); }
.badge--succes { background: var(--succes-voile); color: var(--succes); }
.badge--danger { background: var(--danger-voile); color: var(--danger); }
.badge--vous { background: var(--texte); color: var(--surface); }
.pastille { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.avatar {
    display: grid; place-items: center; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    font: 700 .8rem/1 var(--police-titre); letter-spacing: .02em;
    color: #2a1a12;
    background: linear-gradient(140deg, var(--cuivre-clair), var(--cuivre) 70%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25);
}
.avatar--l { width: 64px; height: 64px; font-size: 1.25rem; }
.avatar--gris { background: linear-gradient(140deg, #d7cec7, #a99c93); }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.carte {
    background: var(--surface);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon-l);
    box-shadow: var(--ombre-1);
    padding: clamp(1.1rem, 2vw, 1.5rem);
}
.carte + .carte { margin-top: 1rem; }
.carte-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.1rem; }
.carte-tete h2 { font-size: 1.1rem; }
.carte-tete p { color: var(--texte-3); font-size: .88rem; margin-top: .2rem; }
.separateur { height: 1px; background: var(--ligne); margin: 1.25rem 0; border: 0; }

/* ── Coquille de l'application ────────────────────────────────────────── */
.coquille { display: grid; grid-template-columns: var(--barre-largeur) minmax(0, 1fr); min-height: 100dvh; }
@media (min-width: 1024px) {
    .coquille { background: linear-gradient(to right, var(--humus) var(--barre-largeur), transparent 0); }
    /* Sur grand écran, c'est la ZONE qui défile, pas la page : la barre latérale
       et l'en-tête tiennent d'eux-mêmes, et une page à peine plus haute que
       l'écran ne décale plus tout le site (demande de Noé du 2026-09-12). */
    .coquille { height: 100dvh; overflow: hidden; }
    .barre { position: static; height: 100%; }
    .zone { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
}

.barre {
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    display: flex; flex-direction: column; gap: 1.25rem;
    padding: 1.25rem .9rem 1rem;
    background:
        radial-gradient(90% 40% at 0% 0%, rgb(184 112 74 / .12), transparent 70%),
        var(--humus);
    color: var(--sur-humus);
    scrollbar-width: thin;
    view-transition-name: barre;
}
/* La carotte : un liseré de strates court le long de la barre, la nappe en bleu. */
.barre::after {
    content: ""; position: absolute; top: 0; right: 0; width: 3px; height: 100%;
    background: linear-gradient(to bottom,
        var(--strate-3) 0 13%, var(--strate-2) 13% 27%, var(--strate-1) 27% 42%,
        var(--strate-5) 42% 57%, var(--nappe-vive) 57% 57.8%,
        var(--strate-4) 57.8% 73%, var(--strate-6) 73% 100%);
    opacity: .9;
}
.barre-marque { display: block; padding: .3rem .45rem 0; }
.barre-marque img { width: 100%; height: auto; }
.barre-organisation {
    display: grid; align-content: center; gap: .4rem; min-height: 72px;
    padding: .75rem .9rem; border-radius: 12px;
    background: rgb(255 255 255 / .035);
    border: 1px solid rgb(255 255 255 / .06);
}
.barre-organisation .surtitre { color: var(--sur-humus-3); }
.barre-organisation .surtitre { line-height: 1; }
.barre-organisation strong {
    display: block; margin: 0;
    font: 650 1rem/1.1 var(--police-titre); letter-spacing: -.01em; color: var(--sur-humus);
}
.barre-nav { display: grid; gap: 2px; }
.barre-groupe { padding: .9rem .8rem .35rem; color: var(--sur-humus-3); }
.lien-nav {
    position: relative;
    display: flex; align-items: center; gap: .75rem;
    min-height: 42px; padding: .55rem .8rem;
    border-radius: 10px;
    color: var(--sur-humus-2); text-decoration: none;
    font-weight: 560; font-size: .95rem;
    transition: background var(--duree), color var(--duree);
}
.lien-nav:hover { background: rgb(255 255 255 / .05); color: #fff; }
.lien-nav[aria-current="page"] {
    background: linear-gradient(90deg, rgb(184 112 74 / .24), rgb(184 112 74 / .05));
    color: #fff;
}
.lien-nav[aria-current="page"]::before {
    content: ""; position: absolute; left: -.9rem; top: 9px; bottom: 9px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--cuivre);
}
.lien-nav[aria-current="page"] .icone { color: var(--cuivre-clair); }
.lien-nav--bientot, .lien-nav--bientot:hover { color: var(--sur-humus-3); background: none; cursor: default; }
.etiquette {
    margin-left: auto;
    padding: .28rem .45rem; border-radius: 6px;
    font: 600 .62rem/1 var(--police-mono); letter-spacing: .08em; text-transform: uppercase;
    background: rgb(255 255 255 / .07); color: var(--sur-humus-3);
}
.barre-pied { margin-top: auto; display: grid; gap: .2rem; padding-top: .9rem; border-top: 1px solid rgb(255 255 255 / .07); }
.barre-pied form { margin: 0; }
.barre-pied .lien-nav { width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; }
.barre-pied .lien-nav:hover { background: rgb(255 255 255 / .05); }
.profil {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .6rem; border-radius: 12px;
    color: inherit; text-decoration: none;
    transition: background var(--duree);
}
.profil:hover { background: rgb(255 255 255 / .05); color: inherit; }
.profil[aria-current="page"] { background: rgb(255 255 255 / .06); }
.profil-texte { min-width: 0; display: grid; }
.profil-nom { color: var(--sur-humus); font-weight: 620; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-role { color: var(--sur-humus-3); font-size: .78rem; }

.zone { min-width: 0; display: flex; flex-direction: column; }
.entete {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 1rem;
    /* Jamais comprimé : dans la colonne flexible de `.zone`, une page plus haute
       que l'écran le réduisait à la hauteur du champ de recherche. */
    flex-shrink: 0;
    height: var(--entete-hauteur);
    padding: 0 clamp(1rem, 3vw, 2.5rem);
    background: color-mix(in srgb, var(--fond) 80%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--ligne);
}
.entete-marque { display: none; align-items: center; gap: .6rem; min-width: 0; color: var(--texte); text-decoration: none; }
.entete-marque img { height: 30px; width: auto; }
.entete-marque span { font: 650 .95rem/1.1 var(--police-titre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche-globale { flex: 1; max-width: 520px; margin: 0; }
.recherche-globale input { min-height: 42px; background: var(--surface); border-radius: 12px; padding-right: 3rem; }
.touche {
    position: absolute; right: .6rem; top: 50%; translate: 0 -50%;
    padding: .15rem .45rem; border-radius: 6px; border: 1px solid var(--ligne-forte);
    font: 500 .72rem/1.2 var(--police-mono); color: var(--texte-3); pointer-events: none;
}
.entete-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.lien-aide {
    display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .75rem; border-radius: 10px;
    color: var(--texte-2); text-decoration: none; font-weight: 600; font-size: .88rem;
}
.lien-aide:hover { background: var(--creux); color: var(--texte); }
.mobile-seulement, .mobile-seulement-bloc { display: none; }

.contenu {
    flex: 1; width: 100%; max-width: 1360px; margin: 0 auto;
    padding: clamp(1.1rem, 2.4vw, 1.9rem) clamp(1rem, 3vw, 2.5rem) clamp(1.25rem, 2.4vw, 2rem);
    view-transition-name: contenu;
}

.nav-mobile {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem;
    padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--humus) 94%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgb(255 255 255 / .07);
    view-transition-name: nav-mobile;
}
.nav-mobile a {
    display: grid; justify-items: center; align-content: center; gap: 3px;
    min-height: 54px; padding: .35rem .25rem; border-radius: 12px;
    color: var(--sur-humus-2); text-decoration: none; font-size: .72rem; font-weight: 600;
}
.nav-mobile a[aria-current="page"] { color: #fff; background: rgb(184 112 74 / .2); }
.nav-mobile a[aria-current="page"] .icone { color: var(--cuivre-clair); }

@media (max-width: 1023.98px) {
    .coquille { grid-template-columns: minmax(0, 1fr); }
    .barre { display: none; }
    .entete-marque { display: flex; }
    .mobile-seulement { display: inline-grid; }
    .mobile-seulement-bloc { display: block; }
    .recherche-globale, .lien-aide { display: none; }
    .nav-mobile { display: grid; }
    .contenu { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ── En-tête de page ──────────────────────────────────────────────────── */
.tete-page {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem 2rem; margin-bottom: 1.75rem;
}
.tete-page .surtitre { display: block; margin-bottom: .55rem; }
.tete-page .chapo { margin-top: .55rem; }
.tete-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.chapo.mono { font-size: .85rem; letter-spacing: .01em; color: var(--texte-3); }
@media (max-width: 560px) {
    .tete-actions { flex-wrap: nowrap; width: 100%; }
    .tete-actions .bouton { flex: 1 1 auto; }
    .tete-actions .bouton--icone-mobile { flex: 0 0 auto; padding-inline: .8rem; }
    .bouton--icone-mobile .texte-bouton {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}