/*
 * Charte de couleurs DropAI (validée le 19/10/2026) — couleurs tirées du logo, une seule famille de gris (slate).
 * Redéfinit le thème DaisyUI « light » utilisé par toutes les pages (data-theme="light").
 * À charger APRÈS daisyui et daisyui/themes.css.
 */
:root,
[data-theme="light"] {
    --color-primary: #0670C9;          /* bleu DropAI : boutons, liens (contraste AA avec le blanc) */
    --color-primary-content: #FFFFFF;
    --color-secondary: #0B2545;        /* bleu nuit : titres, navigation */
    --color-secondary-content: #FFFFFF;
    --color-accent: #50B0E0;           /* bleu de la goutte : accents légers */
    --color-accent-content: #0B2545;
    --color-neutral: #334155;          /* slate-700 */
    --color-neutral-content: #FFFFFF;

    --color-base-100: #FFFFFF;
    --color-base-200: #F1F5F9;         /* slate-100 */
    --color-base-300: #E2E8F0;         /* slate-200 */
    --color-base-content: #0F172A;     /* slate-900 */

    --color-info: #0284C7;
    --color-info-content: #FFFFFF;
    --color-success: #047857;
    --color-success-content: #FFFFFF;
    --color-warning: #B45309;
    --color-warning-content: #FFFFFF;
    --color-error: #B91C1C;
    --color-error-content: #FFFFFF;
}

/*
 * Fenêtres (modèle unique validé le 19/10/2026).
 * Règles hors couche Tailwind : elles priment sur les retouches locales (justify-center, mt-0…) pour garantir
 * le même rendu partout. Structure recommandée : .modale-entete (pastille + titre + sous-titre + croix),
 * corps, .modal-action (pied gris : « Annuler » puis l'action).
 */
.modal-box {
    border: 1px solid var(--color-base-300);
    box-shadow: 0 24px 48px -16px rgb(15 23 42 / .28);
}
.modal-box .modal-action {
    margin: 1.5rem -1.5rem -1.5rem;
    padding: .875rem 1.5rem;
    gap: .5rem;
    justify-content: flex-end;
    background: color-mix(in oklab, var(--color-base-200) 70%, transparent);
    border-top: 1px solid var(--color-base-300);
    border-radius: 0 0 var(--radius-box) var(--radius-box);
}
.modale-entete { display: flex; align-items: flex-start; gap: .75rem; }
.modale-pastille {
    display: grid; place-items: center; flex-shrink: 0;
    width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background: color-mix(in oklab, currentColor 12%, transparent);
}
/*
 * Tableaux (modèle unique validé le 19/10/2026) : densité petite, en-tête gris clair en petites capitales,
 * trait entre les lignes, teinte au survol, pas de zébrage.
 */
.tableau {
    background: var(--color-base-100);
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box);
    overflow-x: auto;
}
.table thead th {
    background: color-mix(in oklab, var(--color-base-200) 70%, transparent);
    color: #64748B;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.table tbody tr:hover { background: color-mix(in oklab, var(--color-primary) 4%, transparent); }
.table td.nombre, .table th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Tablette et téléphone : colonnes secondaires masquées */
@media (max-width: 1023.98px) {
    .col-secondaire { display: none !important; }
}
/* Téléphone : chaque ligne devient une fiche ; l'intitulé de la colonne précède chaque valeur (data-label) */
@media (max-width: 639.98px) {
    .tableau:has(.tableau-empilable) { border: 0; background: transparent; overflow: visible; }
    .tableau-empilable thead { display: none; }
    .tableau-empilable, .tableau-empilable tbody, .tableau-empilable tr, .tableau-empilable td { display: block; width: 100%; }
    .tableau-empilable tr {
        background: var(--color-base-100);
        border: 1px solid var(--color-base-300);
        border-radius: var(--radius-box);
        padding: .5rem 0;
        margin-bottom: .75rem;
    }
    .tableau-empilable td {
        display: flex; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .3rem .9rem; border: 0; text-align: right;
    }
    .tableau-empilable td[data-label]::before {
        content: attr(data-label);
        color: #64748B; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
        text-align: left; flex-shrink: 0;
    }
    .tableau-empilable td:first-child { font-weight: 600; }
    .tableau-empilable td:last-child { justify-content: flex-end; }
    .tableau-empilable td:last-child::before { content: none; }   /* les boutons d'action se passent d'intitulé */
    .tableau-empilable td[colspan] { display: block; text-align: center; }
    .tableau-empilable td[colspan]::before { content: none; }

    /* Liste en cartes (22/10/2026, charte mobile) : dès qu'une cellule porte data-role="titre", la ligne devient une
       vraie carte : titre et statut en haut, sous-titre, informations en badges, actions en pied ; les cellules sans
       rôle sont masquées (elles restent sur la fiche détaillée). */
    .tableau-empilable:has(td[data-role="titre"]) { min-width: 0 !important; table-layout: auto; }
    .tableau-empilable tr:has(> td[data-role="titre"]) {
        display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem .5rem; padding: .75rem .9rem;
    }
    .tableau-empilable tr:has(> td[data-role="titre"]) > td { display: none; }
    .tableau-empilable tr:has(> td[data-role="titre"]) > td[data-role] {
        display: block; width: auto; padding: 0; text-align: left; border: 0;
    }
    .tableau-empilable tr:has(> td[data-role="titre"]) > td[data-role]::before { content: none; }
    .tableau-empilable td[data-role="titre"] { order: 1; flex: 1 1 0; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
    .tableau-empilable td[data-role="statut"] { order: 2; flex: 0 0 auto; }
    /* Complément du titre (prénom après le nom) : sur la même ligne que le titre */
    .tableau-empilable tr:has(> td[data-role="complement"]) > td[data-role="titre"] { flex: 0 1 auto; }
    .tableau-empilable tr:has(> td[data-role="titre"]) > td[data-role="complement"] { order: 1; flex: 1 1 0; min-width: 0; font-weight: 600; }
    .tableau-empilable td[data-role="sous-titre"] { order: 3; flex: 0 0 100%; color: #64748B; font-size: .8rem; font-weight: 400; }
    .tableau-empilable td[data-role="info"] { order: 4; flex: 1 1 100%; min-width: 0; font-size: .8rem; }
    /* Une information garde son intitulé en tête (« Effectif : 323 ») */
    .tableau-empilable tr:has(> td[data-role="titre"]) > td[data-role="info"][data-label]::before {
        content: attr(data-label) " : "; color: #64748B; font-size: .7rem; font-weight: 600; text-transform: uppercase;
        letter-spacing: .04em;
    }
    .tableau-empilable tr:has(> td[data-role="titre"]) > td[data-role="actions"] {
        order: 5; flex: 0 0 100%; display: flex; justify-content: flex-end;
        border-top: 1px solid var(--color-base-300); padding-top: .4rem; margin-top: .25rem;
    }

    /* Grille en puces (22/10/2026, lot C2) : grille Jour × Séances ou Question × Lettres ; chaque ligne devient une
       carte, la cellule titre en tête, les autres cellules en puces précédées de leur data-label. */
    .tableau:has(.grille-puces), div:has(> .grille-puces) { border: 0; background: transparent; overflow: visible; }
    .grille-puces { min-width: 0 !important; }
    .grille-puces thead { display: none; }
    .grille-puces, .grille-puces tbody { display: block; width: 100%; }
    .grille-puces tr {
        display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
        background: var(--color-base-100); border: 1px solid var(--color-base-300);
        border-radius: var(--radius-box); padding: .6rem .75rem; margin-bottom: .6rem;
    }
    .grille-puces tr > td {
        display: inline-flex; align-items: center; gap: .35rem; width: auto; padding: .15rem .5rem; border: 0;
        border: 1px solid var(--color-base-300); border-radius: 999px; background: transparent !important;
    }
    .grille-puces tr > td[data-role="titre"] {
        flex: 0 0 100%; border: 0; padding: 0; font-weight: 700; justify-content: flex-start; text-align: left;
    }
    .grille-puces tr > td[data-label]:not([data-role="titre"])::before {
        content: attr(data-label); color: #64748B; font-size: .7rem; font-weight: 600; white-space: nowrap;
    }
    .grille-puces tr > td .btn.w-full { width: auto; min-width: 2.25rem; }

    /* Onglets : une ligne qui défile au lieu d'un empilement vertical */
    .tabs-box { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .tabs-box .tab { white-space: nowrap; flex: none; }

    /* Cartes de ventilation : une ligne de puces qui défile (pilotage/composants/cartes_ventilation.html) */
    .ventilation-cartes { display: none !important; }
    .ventilation-puces { display: flex !important; }

    /* En-tête : actions secondaires dans le menu « ⋯ » */
    .actions-ordinateur { display: none !important; }
}
/* Grille en puces à toute largeur (colonne étroite, ex. CHEF-21) : classe « grille-puces partout » */
.tableau:has(.grille-puces.partout), div:has(> .grille-puces.partout) { border: 0; background: transparent; overflow: visible; }
.grille-puces.partout { min-width: 0 !important; }
.grille-puces.partout thead { display: none; }
.grille-puces.partout, .grille-puces.partout tbody { display: block; width: 100%; }
.grille-puces.partout tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
    background: var(--color-base-100); border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box); padding: .6rem .75rem; margin-bottom: .6rem;
}
.grille-puces.partout tr > td {
    display: inline-flex; align-items: center; gap: .35rem; width: auto; padding: .15rem .5rem; border: 0;
    border: 1px solid var(--color-base-300); border-radius: 999px; background: transparent !important;
}
.grille-puces.partout tr > td[data-role="titre"] {
    flex: 0 0 100%; border: 0; padding: 0; font-weight: 700; justify-content: flex-start; text-align: left;
}
.grille-puces.partout tr > td[data-label]:not([data-role="titre"])::before {
    content: attr(data-label); color: #64748B; font-size: .7rem; font-weight: 600; white-space: nowrap;
}
.grille-puces.partout tr > td .btn.w-full { width: auto; min-width: 2.25rem; }

@media (min-width: 640px) {
    .ventilation-puces, .actions-telephone { display: none !important; }
}
.ventilation-puces { display: none; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1rem; scrollbar-width: none; }
.ventilation-puces a {
    flex: none; white-space: nowrap; border: 1px solid var(--color-base-300); background: var(--color-base-100);
    border-radius: 999px; padding: .3rem .75rem; font-size: .8rem;
}
.ventilation-puces a.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }
.ventilation-puces a b { margin-left: .3rem; font-variant-numeric: tabular-nums; }

.modale-titre { color: var(--color-secondary); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
.modale-sous-titre { color: #64748B; font-size: .875rem; margin-top: .125rem; }

/*
 * Cadre de page commun aux trois espaces (étape 5, validé le 19/10/2026) : commun/layout/_cadre_espace.html.
 * Trois tailles : téléphone < 640 px, tablette 640–1023 px, PC ≥ 1024 px.
 * PC : barre latérale fixe, ouverte par défaut (le bouton menu la replie). Tablette et téléphone : tiroir + voile.
 */
:root { --hauteur-barre: 3.5rem; --largeur-menu: 17.5rem; --marge-page: 2rem; }
.cadre { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--hauteur-barre) minmax(0, 1fr); overflow: hidden; }
.barre-haut {
    display: flex; align-items: center; gap: .375rem; padding: 0 .75rem; min-width: 0;
    background: var(--color-base-100); border-bottom: 1px solid var(--color-base-300); position: relative; z-index: 30;
}
.barre-haut .marque { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }
.barre-haut .marque img { width: 1.75rem; height: 1.75rem; flex-shrink: 0; }
.barre-haut .marque-nom { color: var(--color-secondary); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.barre-haut .marque-espace { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); line-height: 1.2; }
.corps { display: grid; grid-template-columns: var(--largeur-menu) minmax(0, 1fr); min-height: 0; }
.menu-lateral {
    background: var(--color-base-100); border-right: 1px solid var(--color-base-300);
    overflow-y: auto; padding: .75rem .5rem; min-height: 0;
    scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / .15) transparent;
}
.menu-lateral::-webkit-scrollbar { width: 6px; }
.menu-lateral::-webkit-scrollbar-thumb { background: rgb(0 0 0 / .15); border-radius: 3px; }
.zone-contenu { overflow-y: auto; min-width: 0; display: flex; flex-direction: column; background: var(--color-base-100); }
.voile { display: none; }
.cadre.menu-replie .corps { grid-template-columns: 0 minmax(0, 1fr); }
.cadre.menu-replie .menu-lateral { visibility: hidden; padding: 0; border: 0; }
.pied-cadre { margin-top: auto; padding: 1rem var(--marge-page); font-size: .75rem; color: #64748B; border-top: 1px solid var(--color-base-300); }

/* Largeur des pages : fixée par le cadre, jamais par la page (révisée le 19/10/2026 : 1600 px).
   Contenu toujours aligné à gauche, contre le menu ; au-delà de 1600 px, la marge n'apparaît qu'à droite.
   Une page étroite garde le même bord gauche que les autres (son titre ne se décale pas). */
.contenu { width: 100%; padding: var(--marge-page); }
.contenu.largeur-normale,
.contenu.largeur-etroite { max-width: calc(100rem + 2 * var(--marge-page)); }   /* 1600 px */
.contenu.largeur-etroite > :not(dialog) { max-width: 48rem; }                    /* 768 px : formulaires, confirmations (pas les modales) */
.contenu.largeur-pleine { max-width: none; }                                     /* très grandes grilles */

@media (max-width: 1023.98px) {
    :root { --marge-page: 1.5rem; }
    .corps { grid-template-columns: minmax(0, 1fr); }
    .cadre.menu-replie .corps { grid-template-columns: minmax(0, 1fr); }
    .menu-lateral {
        position: fixed; top: 0; bottom: 0; left: 0; width: min(var(--largeur-menu), 85vw); z-index: 50;
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgb(15 23 42 / .25);
        visibility: hidden;
    }
    .cadre.menu-ouvert .menu-lateral { transform: none; visibility: visible; }
    .cadre.menu-ouvert .voile { display: block; position: fixed; inset: 0; background: rgb(15 23 42 / .4); z-index: 40; }
    /* Cibles tactiles : 40 px minimum */
    .btn-sm, .btn-xs { min-height: 2.5rem; height: 2.5rem; }
    .btn-square.btn-sm, .btn-circle.btn-sm, .btn-square.btn-xs, .btn-circle.btn-xs { width: 2.5rem; }
    .menu-lateral .menu a { min-height: 2.5rem; }
}
@media (max-width: 639.98px) {
    :root { --marge-page: 1rem; }
    .barre-haut { padding: 0 .5rem; gap: .25rem; }
    .barre-haut .marque-espace, .barre-haut .annee-longue { display: none; }
}
@media (min-width: 640px) { .barre-haut .annee-courte { display: none; } }

/* Classes prêtes pour le lot 5c : en-tête de page, grilles, barre d'outils */
.entete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.entete-page .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 639.98px) {
    .entete-page .actions { width: 100%; }
    .entete-page .actions > .btn-primary { flex: 1 1 100%; order: -1; }
}
.grille-stats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grille-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grille-formulaire { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grille-formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grille-cartes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.barre-outils { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.barre-outils .recherche { flex: 1 1 16rem; }
@media (max-width: 639.98px) { .barre-outils > * { flex: 1 1 100%; } }

/* Cartes d'informations et « Mon profil » (lot 5c, bloc 2) : carte à en-tête, champs en consultation, bouton discret */
.carte { background: #fff; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--color-base-300); }
.carte-entete h2 { font-weight: 600; color: var(--color-secondary); display: flex; gap: .6rem; align-items: center; }
.carte-entete .ico { width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: .6rem; display: grid; place-items: center; background: color-mix(in oklab, var(--color-primary) 10%, white); color: var(--color-primary); }
.carte-entete .ico svg { width: 1.1rem; height: 1.1rem; }
.carte-corps { padding: 1rem 1.1rem; display: grid; gap: .85rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.carte-corps .sous-titre-carte { grid-column: 1 / -1; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #64748B; margin-top: .25rem; }
.champ .libelle { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #64748B; display: flex; gap: .3rem; align-items: center; }
.champ .valeur { color: #0F172A; margin-top: .1rem; overflow-wrap: anywhere; }
.champ .vide { color: #B45309; font-style: italic; }
.champ.verrou .valeur { color: #475569; }
.champ .libelle svg { width: .75rem; height: .75rem; }
/* Tableaux de bord (lot 5c) : carte statistique (un chiffre + un lien), sections numérotées, « À faire maintenant » */
.section-tdb { margin-top: 1.75rem; }
.section-tdb > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: 1rem; font-weight: 700; color: var(--color-secondary); margin-bottom: .75rem; }
.section-tdb > h2 .num { width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center; font-size: .8rem; background: color-mix(in oklab, var(--color-primary) 12%, white); color: var(--color-primary); }
.section-tdb > h2 small { font-weight: 500; color: #64748B; font-size: .8rem; }
.grille-stat { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .grille-stat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.carte-stat { background: var(--color-base-100); border: 1px solid var(--color-base-200); border-radius: var(--radius-box); box-shadow: 0 1px 3px rgb(15 23 42 / .08); padding: 1.25rem 1.35rem; min-height: 9.5rem; display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; transition: background .2s, box-shadow .2s; }
a.carte-stat:hover { background: var(--color-base-200); box-shadow: 0 10px 20px -8px rgb(15 23 42 / .2); }
.carte-stat .haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.carte-stat .val { font-size: 2.1rem; font-weight: 900; color: var(--color-secondary); line-height: 1.1; }
.carte-stat .val small { font-size: .9rem; font-weight: 700; color: #64748B; }
.carte-stat .ico { width: 2.25rem; height: 2.25rem; flex-shrink: 0; color: var(--color-primary); transition: transform .2s; }
a.carte-stat:hover .ico { transform: scale(1.1); }
.carte-stat .lib { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: color-mix(in oklab, var(--color-base-content) 70%, transparent); }
a.carte-stat:hover .lib { color: var(--color-primary); }
.carte-stat .det { font-size: .8rem; color: #475569; }
.carte-stat.alerte .val { color: #B45309; }
.carte-stat.alerte .ico { color: #D97706; }
.carte-stat.a-venir { background: var(--color-base-200); border-style: dashed; box-shadow: none; }
.carte-stat.a-venir .val, .carte-stat.a-venir .ico { color: #94A3B8; }
.carte-stat.a-venir .det { font-style: italic; }
.tableau-mini .col-nombre { text-align: center; font-variant-numeric: tabular-nums; }
.tableau-mini th.col-nombre .titre-col { justify-content: center; }
.tableau-mini .titre-col { display: inline-flex; align-items: center; gap: .35rem; }
.jauge { display: block; height: .4rem; border-radius: 999px; background: var(--color-base-300); overflow: hidden; margin: .1rem 0 .3rem; }
.jauge > span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); }
/* « À faire maintenant » : une bande fine, chaque élément est un lien (21/10/2026) */
.afaire { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .55rem .9rem; border: 1px solid color-mix(in oklab, var(--color-warning) 45%, white); background: color-mix(in oklab, var(--color-warning) 7%, white); border-radius: var(--radius-box); font-size: .9rem; }
.afaire .titre { display: flex; align-items: center; gap: .4rem; font-weight: 700; color: #92400E; }
.afaire a { color: #0F172A; text-decoration: none; }
.afaire a:hover { text-decoration: underline; color: var(--color-primary); }
.afaire a b { color: #B45309; }
.afaire .sep { color: #D6B98C; }
.tableau-mini { width: 100%; font-size: .85rem; }
.tableau-mini th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #64748B; font-weight: 600; padding: .4rem .5rem; }
.tableau-mini td { padding: .45rem .5rem; border-top: 1px solid var(--color-base-300); }
.graphique-semaines { display: flex; align-items: flex-end; gap: .5rem; min-width: 30rem; height: 12rem; padding-top: 1rem; }
.graphique-semaines .colonne { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; gap: .2rem; opacity: .8; }
.graphique-semaines .colonne.courante { opacity: 1; }
.graphique-semaines .valeur { font-size: .7rem; color: #334155; }
.graphique-semaines .pile { flex: 1; width: 100%; max-width: 2.4rem; display: flex; flex-direction: column; justify-content: flex-end; border-bottom: 1px solid #CBD5E1; }
.graphique-semaines .perm { background: var(--color-primary); border-radius: 3px 3px 0 0; }
.graphique-semaines .vac { background: var(--color-warning); border-radius: 3px 3px 0 0; }
.graphique-semaines .etiquette { font-size: .7rem; color: #64748B; }
@media (max-width: 639.98px) {
    .grille-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .carte-stat { padding: .75rem .8rem; min-height: 0; }
    .carte-stat .val { font-size: 1.35rem; }
}
.modale-pastille svg { width: 1.1rem; height: 1.1rem; }
.champ.manquant { outline: 2px solid color-mix(in oklab, var(--color-warning) 55%, transparent); outline-offset: 3px; border-radius: .4rem; }
.btn-modifier { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--color-primary); padding: .35rem .65rem; border-radius: .5rem; border: 1px solid transparent; background: transparent; cursor: pointer; transition: background .15s, border-color .15s; }
.btn-modifier:hover { background: color-mix(in oklab, var(--color-primary) 8%, white); border-color: color-mix(in oklab, var(--color-primary) 25%, white); }
.btn-modifier svg { width: 1rem; height: 1rem; }
.entete-profil { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; padding: 1.1rem 1.25rem; }
.entete-profil .avatar-profil { width: 3.5rem; height: 3.5rem; flex-shrink: 0; border-radius: 9999px; overflow: hidden; display: grid; place-items: center; font-size: 1.15rem; font-weight: 700; background: color-mix(in oklab, var(--color-primary) 12%, white); color: var(--color-primary); }
.entete-profil h1 { font-size: 1.25rem; font-weight: 700; color: var(--color-secondary); line-height: 1.2; }
.completion { min-width: 11rem; }
.completion .barre { height: .4rem; border-radius: 999px; background: var(--color-base-300); overflow: hidden; }
.completion .barre > span { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); }
.doc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; padding: .55rem .7rem; border: 1px solid var(--color-base-300); border-radius: .6rem; }
@media (max-width: 639.98px) {
    .completion { min-width: 0; width: 100%; }
    .carte-entete .btn-modifier { min-height: 2.5rem; }
}