/*
 * Thème « Tuiles » : feuille servie SEULEMENT sous l'apparence Tuiles (classe `apparence-tuiles` sur <html>, voir
 * App\Support\Design\Apparence). Aucune règle ne s'applique à l'apparence actuelle.
 *
 * Maquette de référence : version 9.1, validée à 100 % par Michelot le 30/10/2026 (Themes/maquette_theme-tuiles-demonstration).
 * Consignes : Themes/consignes_developpement-theme-tuiles. Les couleurs de l'établissement REMPLACENT l'accent : la barre et le
 * rail viennent de la couleur institutionnelle (--eta-institution), l'accent de la couleur d'accent (--eta-accent). Aucune
 * couleur du modèle déposé ; aucune bande de couleur sur une carte (R-005).
 */
.apparence-tuiles {
    --tu-barre: var(--eta-institution, #1f4e8c);
    --tu-nuit: color-mix(in oklab, var(--tu-barre) 42%, #0b1220);
    --tu-section: color-mix(in oklab, var(--tu-barre) 82%, #ffffff);
    --tu-accent: var(--eta-accent, #b34f08);
    --tu-lien: var(--eta-interactif, var(--tu-barre));
    --tu-accent-teinte: color-mix(in oklab, var(--tu-accent) 12%, #ffffff);
    --tu-fond: color-mix(in oklab, var(--tu-barre) 5%, #ffffff);
    --tu-zone: color-mix(in oklab, var(--tu-barre) 12%, #ffffff);
    --tu-trait: color-mix(in oklab, var(--tu-barre) 14%, #ffffff);
    --tu-texte: color-mix(in oklab, var(--tu-barre) 55%, #0b1220);
    --tu-doux: color-mix(in oklab, var(--tu-texte) 62%, #ffffff);
    --tu-carte: #ffffff;
    --tu-ok: #2f6b3b;
    --tu-ok-fond: #e2f2e4;
    --tu-alerte-fond: color-mix(in oklab, var(--tu-accent) 14%, #ffffff);
    --tu-danger: #a3241d;
    --tu-police-titre: 'Roboto Slab', Georgia, 'Times New Roman', serif;
    --tu-rayon: 8px;
    --tu-ombre: 0 1px 2px color-mix(in srgb, var(--tu-nuit) 8%, transparent);
}

/* ---------------------------------------------------------------- Jetons du portail : le cadre prend la couleur de l'établissement */
.apparence-tuiles .eta-portail.idx-portail.idx-portail,
.apparence-tuiles .eta-portail.idx-tiroir.idx-tiroir {
    --idexa-fond: var(--tu-fond);
    --idexa-surface: var(--tu-carte);
    --idexa-surface-douce: var(--tu-zone);
    --idexa-texte: var(--tu-texte);
    --idexa-texte-doux: var(--tu-doux);
    --idexa-trait: var(--tu-trait);
    --idexa-accent: var(--tu-accent);
    --idexa-accent-contraste: #ffffff;
    --idexa-barre-laterale: var(--tu-nuit);
    --idexa-barre-laterale-texte: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
}

.apparence-tuiles .idx-tiroir [data-sidebar='sidebar'] {
    background: var(--tu-nuit);
}

/* ---------------------------------------------------------------- Accueil en tuiles */
.apparence-tuiles .tu-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.apparence-tuiles .tu-col-g,
.apparence-tuiles .tu-col-d {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.apparence-tuiles .tu-hero {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    min-height: 180px;
    padding: 28px 32px;
    color: #ffffff;
    background: linear-gradient(105deg, color-mix(in oklab, var(--tu-nuit) 96%, transparent) 0%, color-mix(in oklab, var(--tu-nuit) 80%, transparent) 50%, color-mix(in oklab, var(--tu-barre) 60%, transparent) 100%);
}

.apparence-tuiles .tu-hero[data-image='oui'] {
    background-size: cover;
    background-position: center;
}

.apparence-tuiles .tu-hero::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    width: 56%;
    opacity: 0.3;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' fill='none' stroke='white' stroke-width='1.2'><path d='M0 190h400'/><path d='M40 190V90l60-30 60 30v100'/><path d='M180 190V70l80-40 80 40v120'/><path d='M200 190v-80M230 190v-80M260 190v-80M290 190v-80M320 190v-80'/><circle cx='300' cy='18' r='26'/></svg>") right bottom / contain no-repeat;
}

.apparence-tuiles .tu-hero[data-image='oui']::after {
    display: none;
}

.apparence-tuiles .tu-hero__texte {
    position: relative;
    z-index: 1;
    max-width: 62%;
}

.apparence-tuiles .tu-hero__salut {
    display: block;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 0.8125rem;
    opacity: 0.92;
    margin-bottom: 6px;
}

.apparence-tuiles .tu-hero__titre {
    font-family: var(--tu-police-titre);
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 0 8px;
    color: #ffffff;
}

.apparence-tuiles .tu-hero__trait {
    display: block;
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: var(--tu-accent);
    margin: 6px 0 12px;
}

.apparence-tuiles .tu-hero__phrase {
    margin: 0;
    font-size: 1rem;
    opacity: 0.95;
}

/* Prochaine étape : une carte, un geste */
.apparence-tuiles .tu-etape {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--tu-carte);
    border-radius: var(--tu-rayon);
    box-shadow: var(--tu-ombre);
    padding: 14px 18px;
}

.apparence-tuiles .tu-etape__num {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tu-accent-teinte);
    color: var(--tu-accent);
    font-family: var(--tu-police-titre);
    font-weight: 700;
    font-size: 0.9375rem;
}

.apparence-tuiles .tu-etape__texte {
    flex: 1;
    min-width: 220px;
}

.apparence-tuiles .tu-etape__surtitre {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-etape__titre {
    display: block;
    font-family: var(--tu-police-titre);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tu-texte);
    margin: 1px 0 2px;
}

.apparence-tuiles .tu-etape__detail {
    font-size: 0.875rem;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--tu-accent);
    color: #ffffff;
}

.apparence-tuiles .tu-bouton:hover {
    filter: brightness(1.08);
}

.apparence-tuiles .tu-bouton--clair {
    background: var(--tu-carte);
    color: var(--tu-texte);
    border: 1px solid var(--tu-trait);
}

.apparence-tuiles .tu-bouton:focus-visible,
.apparence-tuiles .tu-tuile:focus-visible,
.apparence-tuiles .tu-frise > summary:focus-visible {
    outline: 3px solid var(--tu-accent);
    outline-offset: 2px;
}

/* Cartes */
.apparence-tuiles .tu-carte {
    background: var(--tu-carte);
    border-radius: var(--tu-rayon);
    box-shadow: var(--tu-ombre);
    padding: 16px 18px;
}

.apparence-tuiles .tu-carte__tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.apparence-tuiles .tu-carte__titre {
    margin: 0;
    font-family: var(--tu-police-titre);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-carte__lien {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tu-barre);
    text-decoration: none;
}

/* Tuiles : icône et titre, rien d'autre (image 1 de Michelot) */
.apparence-tuiles .tu-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.apparence-tuiles .tu-tuile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 118px;
    padding: 18px 10px 16px;
    text-align: center;
    text-decoration: none;
    background: var(--tu-carte);
    border: 1px solid var(--tu-trait);
    border-radius: var(--tu-rayon);
    box-shadow: var(--tu-ombre);
    transition: box-shadow 0.15s, transform 0.15s;
}

.apparence-tuiles .tu-tuile:hover {
    box-shadow: 0 4px 12px color-mix(in srgb, var(--tu-nuit) 18%, transparent);
    transform: translateY(-1px);
}

.apparence-tuiles .tu-tuile__icone {
    width: 48px;
    height: 48px;
}

.apparence-tuiles .tu-tuile__titre {
    font-size: 0.9063rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-tuile__compte {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--tu-accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 20px;
}

/* Frise de session (repliable, fermée par défaut) */
.apparence-tuiles .tu-frise {
    background: var(--tu-carte);
    border-radius: var(--tu-rayon);
    box-shadow: var(--tu-ombre);
    padding: 12px 18px;
}

.apparence-tuiles .tu-frise > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 6px;
}

.apparence-tuiles .tu-frise > summary::-webkit-details-marker {
    display: none;
}

.apparence-tuiles .tu-frise__resume {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--tu-doux);
    text-align: right;
}

.apparence-tuiles .tu-frise[open] .tu-frise__resume {
    display: none;
}

.apparence-tuiles .tu-frise__chev {
    flex: none;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--tu-doux);
    border-bottom: 2px solid var(--tu-doux);
    transform: rotate(45deg);
    margin: 0 4px 3px 6px;
}

.apparence-tuiles .tu-frise[open] .tu-frise__chev {
    transform: rotate(-135deg);
    margin-top: 6px;
    margin-left: auto;
}

.apparence-tuiles .tu-frise__defil {
    overflow-x: auto;
    padding: 0 56px;
}

.apparence-tuiles .tu-piste {
    position: relative;
    min-width: 560px;
    height: 150px;
    margin-top: 6px;
}

.apparence-tuiles .tu-piste::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    height: 4px;
    border-radius: 2px;
    background: var(--tu-zone);
}

.apparence-tuiles .tu-piste__fait {
    position: absolute;
    left: 0;
    top: 78px;
    height: 4px;
    border-radius: 2px;
    background: var(--tu-barre);
}

.apparence-tuiles .tu-jalon {
    position: absolute;
    top: 73px;
    width: 0;
}

.apparence-tuiles .tu-jalon i {
    position: absolute;
    left: -8px;
    top: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--tu-zone);
}

.apparence-tuiles .tu-jalon[data-etat='fait'] i {
    background: var(--tu-barre);
    border-color: var(--tu-barre);
}

.apparence-tuiles .tu-jalon[data-etat='aujourdhui'] i {
    background: var(--tu-accent);
    border-color: var(--tu-accent);
    box-shadow: 0 0 0 5px var(--tu-accent-teinte);
}

.apparence-tuiles .tu-jalon span {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    width: 132px;
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.25;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-jalon[data-pos='haut'] span {
    bottom: 34px;
}

.apparence-tuiles .tu-jalon[data-pos='bas'] span {
    top: 28px;
}

.apparence-tuiles .tu-jalon b {
    display: block;
    font-weight: 600;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-jalon[data-etat='aujourdhui'] b {
    color: var(--tu-accent);
}

/* Échéances */
.apparence-tuiles .tu-echeances {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.apparence-tuiles .tu-echeances li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    border-radius: 8px;
    font-size: 0.875rem;
}

.apparence-tuiles .tu-echeances li[data-prochaine='oui'] {
    background: var(--tu-accent-teinte);
}

.apparence-tuiles .tu-echeances__date {
    flex: none;
    width: 48px;
    padding: 6px 0;
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.6875rem;
    line-height: 1.1;
    color: var(--tu-doux);
    background: var(--tu-zone);
}

.apparence-tuiles .tu-echeances__date b {
    display: block;
    font-family: var(--tu-police-titre);
    font-size: 1.1875rem;
    color: var(--tu-texte);
}

/* Visuel de l'établissement (emplacement : l'image est celle de l'établissement) */
.apparence-tuiles .tu-visuel {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 150px;
    border-radius: 12px;
    padding: 20px 22px;
    color: #ffffff;
    background: linear-gradient(160deg, color-mix(in oklab, var(--tu-nuit) 40%, transparent), color-mix(in oklab, var(--tu-nuit) 92%, transparent)), linear-gradient(120deg, var(--tu-section), var(--tu-nuit));
}

.apparence-tuiles .tu-visuel[data-image='oui'] {
    background-size: cover;
    background-position: center;
}

.apparence-tuiles .tu-visuel__titre {
    position: relative;
    font-family: var(--tu-police-titre);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Tableaux */
.apparence-tuiles .tu-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.apparence-tuiles .tu-tableau th {
    text-align: left;
    padding: 9px 12px;
    font-weight: 600;
    color: var(--tu-texte);
    background: color-mix(in oklab, var(--tu-barre) 9%, #ffffff);
    border-bottom: 1px solid var(--tu-trait);
    white-space: nowrap;
}

.apparence-tuiles .tu-tableau td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--tu-trait);
}

.apparence-tuiles .tu-tableau a {
    color: var(--tu-barre);
    font-weight: 600;
    text-decoration: none;
}

.apparence-tuiles .tu-defil {
    overflow-x: auto;
    border-radius: 6px;
}

.apparence-tuiles .tu-vide {
    margin: 0;
    padding: 6px 2px;
    color: var(--tu-doux);
    font-size: 0.875rem;
}

@media (max-width: 1180px) {
    .apparence-tuiles .tu-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .apparence-tuiles .tu-col-d {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 900px) {
    .apparence-tuiles .tu-hero {
        min-height: 150px;
        padding: 20px;
    }

    .apparence-tuiles .tu-hero__texte {
        max-width: 100%;
    }

    .apparence-tuiles .tu-hero__titre {
        font-size: 1.5rem;
    }

    .apparence-tuiles .tu-hero::after {
        width: 80%;
        opacity: 0.16;
    }

    .apparence-tuiles .tu-tuiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .apparence-tuiles .tu-frise__resume {
        display: none;
    }
}

/* ---------------------------------------------------------------- Gestion : le cadre existant (rail, barre) prend les jetons du thème */
:root.apparence-tuiles:not(.dark):root {
    --cadre-fond: var(--tu-fond);
    --panel: #ffffff;
    --ink: var(--tu-texte);
    --soft: var(--tu-doux);
    --line: var(--tu-trait);
    --wash: var(--tu-zone);
    --side: var(--tu-nuit);
}

/* Mode sombre de la gestion : les jetons du thème suivent ceux du cadre (le thème Tuiles est conçu en clair). */
:root.dark.apparence-tuiles {
    --tu-fond: var(--cadre-fond);
    --tu-zone: var(--wash);
    --tu-trait: var(--line);
    --tu-texte: var(--ink);
    --tu-doux: var(--soft);
    --tu-carte: var(--panel);
    --tu-barre: var(--accent);
    --tu-nuit: var(--side);
}

.apparence-tuiles .tu-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.apparence-tuiles .tu-chiffres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0;
}

.apparence-tuiles .tu-chiffres dt {
    font-size: 0.8125rem;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-chiffres dd {
    margin: 0;
    font-family: var(--tu-police-titre);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-petit {
    display: block;
    color: var(--tu-doux);
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------- Portail : barre du haut et page (cadre de la maquette v9.1) */
.apparence-tuiles .idx-entete {
    background: var(--tu-barre);
    color: #ffffff;
    border-bottom: 0;
}

.apparence-tuiles .idx-entete__nom {
    font-family: var(--tu-police-titre);
    font-weight: 700;
    color: #ffffff;
}

.apparence-tuiles .idx-entete__gauche a,
.apparence-tuiles .idx-entete__droite > a,
.apparence-tuiles .idx-entete__droite > button {
    color: #ffffff;
}

.apparence-tuiles .idx-page {
    background: transparent;
}

/* ---------------------------------------------------------------- L2 : fiche à onglets (dossier de la personne) */
.apparence-tuiles .tu-fiche {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-bottom: 14px;
    padding: 18px 22px;
    background: var(--tu-carte);
    border-radius: var(--tu-rayon);
    box-shadow: var(--tu-ombre);
}

.apparence-tuiles .tu-fiche__photo {
    display: grid;
    flex: none;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--tu-section), var(--tu-nuit));
    color: #ffffff;
    font: 700 28px var(--tu-police-titre);
}

.apparence-tuiles .tu-fiche__id {
    min-width: 200px;
}

.apparence-tuiles .tu-fiche__id h2 {
    margin: 0 0 2px;
    color: var(--tu-texte);
    font-family: var(--tu-police-titre);
    font-size: 1.5rem;
}

.apparence-tuiles .tu-fiche__prog {
    margin: 0 0 6px;
    color: var(--tu-doux);
    font-size: 0.9rem;
}

.apparence-tuiles .tu-fiche__mat {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: var(--tu-fond);
    color: var(--tu-doux);
    font-size: 0.75rem;
}

.apparence-tuiles .tu-fiche__faits {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 4px 40px;
    margin: 0 0 0 auto;
}

.apparence-tuiles .tu-fiche__faits dt {
    color: var(--tu-doux);
    font-size: 0.6875rem;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.apparence-tuiles .tu-fiche__faits dd {
    margin: 2px 0 0;
    color: var(--tu-texte);
    font-size: 0.9rem;
    font-weight: 600;
}

.apparence-tuiles .tu-onglets__liste {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--tu-trait);
}

.apparence-tuiles .tu-onglets__liste [role='tab'] {
    margin-bottom: -1px;
    padding: 11px 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    background: none;
    color: var(--tu-doux);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.apparence-tuiles .tu-onglets__liste [role='tab']:hover {
    background: var(--tu-fond);
    color: var(--tu-texte);
}

.apparence-tuiles .tu-onglets__liste [role='tab'][aria-selected='true'] {
    border-bottom-color: var(--tu-accent);
    color: var(--tu-texte);
    font-weight: 700;
}

.apparence-tuiles .tu-onglets__liste [role='tab']:focus-visible {
    outline: 2px solid var(--tu-accent);
    outline-offset: -2px;
}

.apparence-tuiles .tu-onglets__compte {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    border-radius: 10px;
    background: var(--tu-alerte-fond);
    color: var(--tu-texte);
    font-size: 0.75rem;
    font-weight: 700;
}

.apparence-tuiles .tu-onglets__panneau {
    padding-top: 16px;
}

.apparence-tuiles .tu-onglets__panneau[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .apparence-tuiles .tu-fiche {
        gap: 14px;
    }

    .apparence-tuiles .tu-fiche__faits {
        grid-template-columns: 1fr;
        margin: 0;
    }
}

/* ---------------------------------------------------------------- Pleine largeur : la page suit l'écran, sans marges vides */
:root.apparence-tuiles {
    --idexa-largeur-contenu: none;
}

:root.apparence-tuiles .fi-body .fi-main,
:root.apparence-tuiles .fi-body .fi-main.fi-width-7xl,
:root.apparence-tuiles .fi-body .fi-main .fi-page,
:root.apparence-tuiles .fi-body .fi-main [class*='fi-width-'] {
    max-width: none;
}

.apparence-tuiles .tu-contenu {
    max-width: none;
}

/* ---------------------------------------------------------------- Réglages › Identité : aperçu latéral du modèle de documents */
.apparence-tuiles .tu-apercu-lat {
    position: sticky;
    top: 12px;
    padding: 14px;
    border: 1px solid var(--tu-trait);
    border-radius: var(--tu-rayon);
    background: var(--tu-carte);
    box-shadow: var(--tu-ombre);
}

.apparence-tuiles .tu-apercu-lat h3 {
    margin: 0 0 4px;
    color: var(--tu-texte);
    font-family: var(--tu-police-titre);
    font-size: 1.0625rem;
    font-weight: 700;
}

.apparence-tuiles .tu-apercu-sous {
    margin: 0 0 10px;
    color: var(--tu-doux);
    font-size: 0.8125rem;
}

.apparence-tuiles .tu-apercu-bascule {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.apparence-tuiles .tu-apercu-bascule button {
    padding: 5px 10px;
    border: 1px solid var(--tu-trait);
    border-radius: 6px;
    background: var(--tu-carte);
    color: var(--tu-texte);
    font-size: 0.8125rem;
    cursor: pointer;
}

.apparence-tuiles .tu-apercu-bascule button[aria-pressed='true'] {
    border-color: var(--tu-barre);
    background: var(--tu-fond);
    font-weight: 700;
}

.apparence-tuiles .tu-feuille {
    display: flex;
    flex-direction: column;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    border: 1px solid var(--tu-trait);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--tu-nuit) 12%, transparent);
    color: #222222;
    font-size: 9px;
    line-height: 1.35;
}

.apparence-tuiles .tu-feuille-t {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.apparence-tuiles .tu-feuille-logo {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 3px;
    border-radius: 5px;
    background: var(--tu-barre);
    color: #ffffff;
    font-size: 7px;
    font-weight: 700;
}

.apparence-tuiles .tu-feuille-nom {
    font-size: 10px;
    font-weight: 700;
}

.apparence-tuiles .tu-feuille-corps {
    flex: 1;
    padding: 8px 14px;
}

.apparence-tuiles .tu-feuille h4 {
    margin: 6px 0;
    font-size: 12px;
}

.apparence-tuiles .tu-feuille p {
    margin: 0 0 6px;
}

.apparence-tuiles .tu-feuille table {
    width: 100%;
    margin: 4px 0;
    border-collapse: collapse;
}

.apparence-tuiles .tu-feuille td,
.apparence-tuiles .tu-feuille th {
    padding: 2px 4px;
    font-size: 8.5px;
    text-align: left;
}

.apparence-tuiles .tu-feuille-sig {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 12px;
}

.apparence-tuiles .tu-feuille-trait {
    width: 90px;
    padding-top: 2px;
    border-top: 1px solid #222222;
    font-size: 8px;
}

.apparence-tuiles .tu-feuille-sceau {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px dashed #888888;
    border-radius: 50%;
    color: #888888;
    font-size: 6px;
}

.apparence-tuiles .tu-feuille-pied {
    padding: 6px 14px;
    border-top: 1px solid #dddddd;
    color: #666666;
    font-size: 7.5px;
}

.apparence-tuiles .tu-feuille[data-doc='attestation'] .tu-feuille-rel,
.apparence-tuiles .tu-feuille[data-doc='releve'] .tu-feuille-att {
    display: none;
}

.apparence-tuiles .tu-feuille[data-modele='classique'] .tu-feuille-t {
    background: var(--tu-barre);
    color: #ffffff;
}

.apparence-tuiles .tu-feuille[data-modele='classique'] .tu-feuille-logo {
    background: #ffffff;
    color: var(--tu-barre);
}

.apparence-tuiles .tu-feuille[data-modele='academique'] {
    font-family: Georgia, 'Times New Roman', serif;
}

.apparence-tuiles .tu-feuille[data-modele='academique'] .tu-feuille-t {
    flex-direction: column;
    margin: 8px 12px 0;
    padding: 6px 0;
    border-bottom: 3px double #222222;
    text-align: center;
}

.apparence-tuiles .tu-feuille[data-modele='academique'] .tu-feuille-logo {
    border: 1px solid #222222;
    background: none;
    color: #222222;
}

.apparence-tuiles .tu-feuille[data-modele='academique'] h4 {
    padding-bottom: 3px;
    border-bottom: 1px solid #222222;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.apparence-tuiles .tu-feuille[data-modele='moderne'] .tu-feuille-t {
    padding: 18px 14px;
    background: var(--tu-nuit);
    color: #ffffff;
}

.apparence-tuiles .tu-feuille[data-modele='moderne'] .tu-feuille-logo {
    background: var(--tu-accent);
    color: #1b1206;
}

.apparence-tuiles .tu-feuille[data-modele='moderne'] .tu-feuille-nom {
    font-size: 12px;
}

.apparence-tuiles .tu-feuille[data-modele='moderne'] h4 {
    color: var(--tu-nuit);
    font-size: 16px;
}

.apparence-tuiles .tu-feuille[data-modele='sobre'] .tu-feuille-t {
    margin: 8px 12px 0;
    padding: 6px 0;
    border-bottom: 2px solid #000000;
}

.apparence-tuiles .tu-feuille[data-modele='sobre'] .tu-feuille-logo {
    border: 1.5px solid #000000;
    background: none;
    color: #000000;
}

.apparence-tuiles .tu-feuille[data-modele='sobre'] h4 {
    padding-bottom: 3px;
    border-bottom: 1px solid #000000;
}

.apparence-tuiles .tu-feuille[data-modele='sobre'] th {
    border-bottom: 1px solid #000000;
}

/* ---------------------------------------------------------------- Pages en liste du portail : formations, mes cours et formations, documents officiels */
/* Modèle des listes (validé le 30/10) : phrase d'introduction, tableau à en-tête de couleur, chiffres en pastille discrète. */
.apparence-tuiles .tu-onglets__compte--discret {
    min-width: 22px;
    padding: 0 6px;
    border: 1px solid var(--tu-trait);
    border-radius: 5px;
    background: var(--tu-carte);
    color: var(--tu-doux);
    font-weight: 500;
    text-align: center;
}

.apparence-tuiles .tu-onglets__liste [role='tab'][aria-selected='true'] .tu-onglets__compte--discret {
    color: var(--tu-texte);
}

.apparence-tuiles .tu-intro {
    margin: 0 0 10px;
    color: var(--tu-doux);
    font-size: 0.875rem;
}

.apparence-tuiles .tu-liste {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--tu-rayon);
    background: var(--tu-carte);
    box-shadow: var(--tu-ombre);
    font-size: 0.875rem;
}

.apparence-tuiles .tu-liste thead th {
    padding: 9px 14px;
    background: var(--tu-barre);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.apparence-tuiles .tu-liste thead th:first-child {
    border-top-left-radius: var(--tu-rayon);
}

.apparence-tuiles .tu-liste thead th:last-child {
    border-top-right-radius: var(--tu-rayon);
}

.apparence-tuiles .tu-liste td {
    padding: 11px 14px;
    border-top: 1px solid var(--tu-trait);
    overflow-wrap: break-word;
    vertical-align: top;
}

.apparence-tuiles .tu-liste tbody:first-of-type tr:first-child td {
    border-top: 0;
}

.apparence-tuiles .tu-liste .tu-liste__droite {
    text-align: right;
}

.apparence-tuiles .tu-liste tbody tr:hover > td {
    background: color-mix(in oklab, var(--tu-barre) 4%, #ffffff);
}

.apparence-tuiles .tu-liste tbody tr[data-detail='oui']:hover > td {
    background: var(--tu-fond);
}

.apparence-tuiles .tu-liste__titre {
    display: block;
    color: var(--tu-texte);
    font-family: var(--tu-police-titre);
    font-size: 0.95rem;
    font-weight: 700;
}

.apparence-tuiles .tu-liste__doux {
    display: block;
    margin-top: 2px;
    color: var(--tu-doux);
    font-size: 0.78rem;
    font-weight: 400;
}

.apparence-tuiles .tu-liste__prix {
    color: var(--tu-texte);
    font-family: var(--tu-police-titre);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.apparence-tuiles .tu-liste__puces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.apparence-tuiles .tu-puce {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--tu-barre) 9%, #ffffff);
    color: var(--tu-texte);
    font-size: 0.75rem;
    white-space: nowrap;
}

.apparence-tuiles .tu-puce[href] {
    font-weight: 600;
    text-decoration: none;
}

.apparence-tuiles .tu-etat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
}

.apparence-tuiles .tu-etat[data-ton='ok'] {
    background: var(--tu-ok-fond);
    color: var(--tu-ok);
}

.apparence-tuiles .tu-etat[data-ton='attente'] {
    background: var(--tu-alerte-fond);
    color: color-mix(in oklab, var(--tu-accent) 70%, #000000);
}

.apparence-tuiles .tu-etat[data-ton='neutre'] {
    background: color-mix(in oklab, var(--tu-barre) 9%, #ffffff);
    color: var(--tu-texte);
}

.apparence-tuiles .tu-geste {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--tu-barre);
    color: #ffffff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.apparence-tuiles .tu-geste:hover {
    filter: brightness(1.1);
}

.apparence-tuiles .tu-geste:focus-visible {
    outline: 3px solid var(--tu-accent);
    outline-offset: 2px;
}

.apparence-tuiles .tu-geste[data-accent='oui'] {
    background: var(--tu-accent);
}

.apparence-tuiles .tu-geste:disabled,
.apparence-tuiles .tu-geste[aria-disabled='true'] {
    background: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
    color: var(--tu-doux);
    cursor: not-allowed;
    filter: none;
}

.apparence-tuiles .tu-geste--lien {
    padding: 7px 4px;
    background: none;
    color: var(--tu-lien);
    text-decoration: underline;
}

.apparence-tuiles .tu-geste--lien:hover {
    background: none;
}

.apparence-tuiles .tu-liste__detail > td {
    background: var(--tu-fond);
}

.apparence-tuiles .tu-liste__retour {
    margin: 8px 0 0;
    font-size: 0.84rem;
}

.apparence-tuiles .tu-liste__retour:empty {
    display: none;
}

.apparence-tuiles .tu-bande-vide {
    margin-bottom: 14px;
    padding: 22px;
    border-radius: var(--tu-rayon);
    background: var(--tu-carte);
    box-shadow: var(--tu-ombre);
    text-align: center;
}

.apparence-tuiles .tu-bande-vide > strong {
    display: block;
    margin-bottom: 4px;
    color: var(--tu-texte);
    font-family: var(--tu-police-titre);
    font-size: 1.1rem;
    font-weight: 700;
}

.apparence-tuiles .tu-bande-vide > p {
    margin: 0 0 12px;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-gestes-page {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

.apparence-tuiles .tu-bloc-onglet {
    margin-bottom: 14px;
}

.apparence-tuiles .tu-pied-liste {
    margin: 10px 0 0;
}

@media (max-width: 900px) {
    .apparence-tuiles .tu-liste thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .apparence-tuiles .tu-liste,
    .apparence-tuiles .tu-liste tbody,
    .apparence-tuiles .tu-liste tr,
    .apparence-tuiles .tu-liste td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .apparence-tuiles .tu-liste tr {
        padding: 6px 0;
        border-top: 1px solid var(--tu-trait);
    }

    .apparence-tuiles .tu-liste tbody:first-of-type tr:first-child {
        border-top: 0;
    }

    .apparence-tuiles .tu-liste td {
        padding: 4px 14px;
        border-top: 0;
    }

    .apparence-tuiles .tu-liste td[data-label]::before {
        content: attr(data-label);
        display: block;
        color: var(--tu-doux);
        font-size: 0.7rem;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .apparence-tuiles .tu-liste td[data-label='']::before,
    .apparence-tuiles .tu-liste td[data-sans-libelle='oui']::before {
        content: none;
    }

    .apparence-tuiles .tu-liste .tu-liste__droite {
        text-align: left;
    }
}

/* ---------------------------------------------------------------- Mes cours et formations, catalogue : bandeau, filtres, cartes, liste */
/* Modèle validé le 31/10/2026. Les couleurs viennent des jetons du thème ; le soulignement des onglets est un orange foncé fixe. */
.apparence-tuiles {
    --tu-souligne: color-mix(in oklab, var(--tu-accent) 82%, #000000);
    --tu-filtres-fond: color-mix(in oklab, var(--tu-barre) 8%, #ffffff);
    --tu-filtres-trait: color-mix(in oklab, var(--tu-barre) 22%, #ffffff);
    --tu-champ-trait: color-mix(in oklab, var(--tu-texte) 60%, #ffffff);
    --tu-bord-leger: color-mix(in oklab, var(--tu-barre) 12%, #ffffff);
}

/* Bandeau d'en-tête commun */
.apparence-tuiles .tu-ban {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 12px;
    padding: 24px 28px;
    border-radius: 14px;
    background: linear-gradient(100deg, color-mix(in oklab, var(--tu-nuit) 82%, #000000) 0%, var(--tu-nuit) 55%, color-mix(in oklab, var(--tu-nuit) 55%, var(--tu-barre)) 100%);
    color: #ffffff;
}

.apparence-tuiles .tu-ban__barre {
    flex: none;
    align-self: stretch;
    width: 5px;
    border-radius: 3px;
    background: var(--tu-accent);
}

.apparence-tuiles .tu-ban__txt {
    flex: 1;
    min-width: 0;
}

.apparence-tuiles .tu-ban h1 {
    margin: 0;
    color: #ffffff;
    font: 700 30px/1.15 var(--tu-police-titre);
}

.apparence-tuiles .tu-ban p {
    margin: 6px 0 0;
    color: #ffffff;
    font-size: 15.5px;
}

.apparence-tuiles .tu-ban p strong {
    font-weight: 700;
}

.apparence-tuiles .tu-ban__ico {
    flex: none;
    width: 58px;
    height: 58px;
    opacity: 0.92;
    stroke: #ffffff;
    stroke-width: 1.1;
}

.apparence-tuiles .tu-bande-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--tu-accent-teinte);
    color: var(--tu-texte);
    font-size: 0.84rem;
    line-height: 1.35;
}

.apparence-tuiles .tu-bande-info svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: color-mix(in oklab, var(--tu-accent) 70%, #000000);
}

.apparence-tuiles .tu-explique {
    margin: 0 0 14px;
    padding: 9px 14px;
    border-radius: 10px;
    background: var(--tu-accent-teinte);
    color: var(--tu-texte);
    font-size: 0.875rem;
}

/* Onglets posés sur le fond de la page (variante des pages en liste) */
.apparence-tuiles .tu-onglets--fonds .tu-onglets__liste {
    margin: 0 0 16px;
    border-bottom: 1px solid color-mix(in oklab, var(--tu-barre) 30%, #ffffff);
}

.apparence-tuiles .tu-onglets--fonds .tu-onglets__liste [role='tab'] {
    padding: 11px 18px;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-onglets--fonds .tu-onglets__liste [role='tab']:hover {
    background: rgb(255 255 255 / 0.45);
}

.apparence-tuiles .tu-onglets--fonds .tu-onglets__liste [role='tab'][aria-selected='true'] {
    padding-bottom: 10px;
    border-bottom: 4px solid var(--tu-souligne);
}

.apparence-tuiles .tu-onglets--fonds .tu-onglets__panneau {
    padding-top: 0;
}

.apparence-tuiles .tu-onglets--fonds .tu-onglets__compte--discret {
    border-color: color-mix(in oklab, var(--tu-barre) 30%, #ffffff);
    background: #ffffff;
}

/* Zones : filtres sur fond très pâle, résultats sur une surface blanche */
.apparence-tuiles .tu-zones {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.apparence-tuiles .tu-filtres {
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--tu-filtres-fond);
}

.apparence-tuiles .tu-f-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.apparence-tuiles .tu-f-rech {
    display: flex;
    flex: 2 1 220px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.apparence-tuiles .tu-f-rech > label,
.apparence-tuiles .tu-f-choix > label,
.apparence-tuiles .tu-f-vue > span {
    color: var(--tu-doux);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.apparence-tuiles .tu-f-saisie {
    position: relative;
    display: flex;
    align-items: center;
}

.apparence-tuiles .tu-f-saisie > svg {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 18px;
    color: var(--tu-doux);
    pointer-events: none;
}

.apparence-tuiles .tu-f-saisie input,
.apparence-tuiles .tu-f-choix select {
    width: 100%;
    min-width: 0;
    height: 40px;
    border: 1px solid var(--tu-champ-trait);
    border-radius: 8px;
    background: #ffffff;
    color: var(--tu-texte);
    font: inherit;
}

.apparence-tuiles .tu-f-saisie input {
    padding: 0 36px;
}

.apparence-tuiles .tu-f-saisie input::placeholder {
    color: var(--tu-doux);
}

.apparence-tuiles .tu-f-x {
    position: absolute;
    right: 5px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--tu-doux);
    cursor: pointer;
}

.apparence-tuiles .tu-f-x svg {
    width: 16px;
    height: 16px;
}

.apparence-tuiles .tu-f-choix {
    display: flex;
    flex: 1 1 130px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.apparence-tuiles .tu-f-choix select {
    padding: 0 8px;
    text-overflow: ellipsis;
}

.apparence-tuiles .tu-f-vue {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
}

.apparence-tuiles .tu-seg {
    display: inline-flex;
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--tu-champ-trait);
    border-radius: 8px;
    background: #ffffff;
}

.apparence-tuiles .tu-seg button {
    padding: 0 18px;
    border: 0;
    background: #ffffff;
    color: var(--tu-texte);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.apparence-tuiles .tu-seg button + button {
    border-left: 1px solid var(--tu-champ-trait);
}

.apparence-tuiles .tu-seg button[aria-pressed='true'] {
    background: var(--tu-nuit);
    color: #ffffff;
}

.apparence-tuiles .tu-f-bas {
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tu-filtres-trait);
}

.apparence-tuiles .tu-chips {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.apparence-tuiles .tu-chips__lib {
    margin-right: 2px;
    color: var(--tu-doux);
    font-size: 0.8125rem;
    font-weight: 600;
}

.apparence-tuiles .tu-chips button {
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--tu-champ-trait);
    border-radius: 18px;
    background: #ffffff;
    color: var(--tu-texte);
    font: inherit;
    font-size: 0.84rem;
    cursor: pointer;
}

.apparence-tuiles .tu-chips button[aria-pressed='true'] {
    border-color: var(--tu-nuit);
    background: var(--tu-nuit);
    color: #ffffff;
    font-weight: 600;
}

.apparence-tuiles .tu-chips button span {
    margin-left: 6px;
    color: var(--tu-doux);
    font-size: 0.78rem;
}

.apparence-tuiles .tu-chips button[aria-pressed='true'] span {
    color: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
}

.apparence-tuiles .tu-f-fin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.apparence-tuiles .tu-f-compte {
    margin: 0;
    color: var(--tu-doux);
    font-size: 0.875rem;
}

.apparence-tuiles .tu-f-compte b {
    color: var(--tu-texte);
}

.apparence-tuiles .tu-f-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--tu-barre);
    border-radius: 8px;
    background: #ffffff;
    color: var(--tu-barre);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}

.apparence-tuiles .tu-f-reset svg {
    width: 16px;
    height: 16px;
}

.apparence-tuiles .tu-f-reset:disabled {
    border-color: color-mix(in oklab, var(--tu-barre) 26%, #ffffff);
    background: var(--tu-fond);
    color: color-mix(in oklab, var(--tu-texte) 88%, #ffffff);
    cursor: not-allowed;
}

.apparence-tuiles .tu-filtres button:focus-visible,
.apparence-tuiles .tu-filtres input:focus-visible,
.apparence-tuiles .tu-filtres select:focus-visible,
.apparence-tuiles .tu-res button:focus-visible,
.apparence-tuiles .tu-pages button:focus-visible,
.apparence-tuiles .tu-btn-ico:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--tu-accent) 70%, #000000);
    outline-offset: 2px;
}

.apparence-tuiles .tu-res {
    padding: 18px;
    border-radius: 12px;
    background: #ffffff;
}

.apparence-tuiles .tu-res__pied {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tu-trait);
}

.apparence-tuiles .tu-res__pied > div {
    margin-top: 12px;
}

.apparence-tuiles .tu-voir-aussi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 20px;
    margin: 16px 2px 0;
    color: var(--tu-texte);
    font-size: 0.875rem;
}

.apparence-tuiles .tu-voir-aussi a {
    color: var(--tu-texte);
    font-weight: 600;
    text-decoration: underline;
}

/* Cartes */
.apparence-tuiles .tu-cf-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apparence-tuiles .tu-cf-grille > li {
    display: flex;
    min-width: 0;
}

.apparence-tuiles .tu-cf-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--tu-bord-leger);
    border-radius: 10px;
    background: #ffffff;
}

.apparence-tuiles .tu-cf-carte:hover {
    border-color: var(--tu-barre);
}

.apparence-tuiles .tu-cf-carte:focus-within {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--tu-accent) 70%, #000000);
}

.apparence-tuiles .tu-cf-tete {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: color-mix(in oklab, var(--tu-barre) 8%, #ffffff);
}

.apparence-tuiles .tu-cf-pastille,
.apparence-tuiles .tu-statut {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
}

.apparence-tuiles .tu-cf-pastille {
    padding: 2px 11px;
    background: #ffffff;
    color: var(--tu-texte);
}

.apparence-tuiles .tu-statut {
    padding: 1px 9px;
    background: color-mix(in oklab, var(--tu-barre) 9%, #ffffff);
    color: var(--tu-texte);
}

.apparence-tuiles .tu-cf-pastille::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--tu-texte) 62%, #ffffff);
}

.apparence-tuiles .tu-cf-pastille[data-e='en_cours']::before {
    background: var(--tu-barre);
}

.apparence-tuiles .tu-cf-pastille[data-e='termine']::before,
.apparence-tuiles .tu-cf-pastille[data-e='ouverte']::before {
    background: var(--tu-ok);
}

.apparence-tuiles .tu-cf-pastille[data-e='en_attente']::before,
.apparence-tuiles .tu-cf-pastille[data-e='complet']::before {
    background: var(--tu-accent);
}

.apparence-tuiles .tu-statut[data-e='termine'] {
    background: var(--tu-ok-fond);
    color: var(--tu-ok);
}

.apparence-tuiles .tu-statut[data-e='en_attente'],
.apparence-tuiles .tu-statut[data-e='complet'] {
    background: var(--tu-accent-teinte);
    color: color-mix(in oklab, var(--tu-accent) 70%, #000000);
}

.apparence-tuiles .tu-statut[data-e='non_commence'],
.apparence-tuiles .tu-statut[data-e='close'] {
    background: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
    color: var(--tu-texte);
}

.apparence-tuiles .tu-cf-corps {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px 16px;
}

.apparence-tuiles .tu-cf-nature {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--tu-doux);
    font-size: 0.78rem;
    font-weight: 500;
}

.apparence-tuiles .tu-cf-nature::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--tu-texte) 48%, #ffffff);
}

.apparence-tuiles .tu-cf-carte h3 {
    margin: 0;
    color: var(--tu-texte);
    font: 700 17px/1.25 var(--tu-police-titre);
}

.apparence-tuiles .tu-cf-lien {
    color: var(--tu-texte);
    text-decoration: none;
}

.apparence-tuiles .tu-cf-lien::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
}

.apparence-tuiles .tu-cf-carte:hover .tu-cf-lien {
    text-decoration: underline;
}

.apparence-tuiles .tu-cf-reperes {
    margin: 0;
    color: var(--tu-doux);
    font-size: 0.84rem;
}

.apparence-tuiles .tu-cf-pers {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
}

.apparence-tuiles .tu-cf-av {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
    color: var(--tu-texte);
    font-size: 0.72rem;
    font-weight: 700;
}

.apparence-tuiles .tu-cf-pers strong {
    display: block;
    font-weight: 600;
    line-height: 1.15;
}

.apparence-tuiles .tu-cf-pers small {
    display: block;
    color: var(--tu-doux);
    font-size: 0.75rem;
    line-height: 1.15;
}

.apparence-tuiles .tu-cf-bientot,
.apparence-tuiles .tu-cf-res {
    margin: 0;
    color: var(--tu-doux);
    font-size: 0.84rem;
}

.apparence-tuiles .tu-cf-res b {
    color: var(--tu-texte);
    font: 700 16px var(--tu-police-titre);
}

.apparence-tuiles .tu-prog {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--tu-doux);
    font-size: 0.78rem;
}

.apparence-tuiles .tu-prog__piste {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border: 0;
    border-radius: 3px;
    appearance: none;
    background: color-mix(in oklab, var(--tu-barre) 18%, #ffffff);
    overflow: hidden;
}

.apparence-tuiles .tu-prog__piste::-webkit-progress-bar {
    background: color-mix(in oklab, var(--tu-barre) 18%, #ffffff);
}

.apparence-tuiles .tu-prog__piste::-webkit-progress-value {
    border-radius: 3px;
    background: var(--tu-barre);
}

.apparence-tuiles .tu-prog__piste::-moz-progress-bar {
    border-radius: 3px;
    background: var(--tu-barre);
}

.apparence-tuiles .tu-cf-faits {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: var(--tu-doux);
    font-size: 0.84rem;
    list-style: none;
}

.apparence-tuiles .tu-non {
    color: color-mix(in oklab, var(--tu-accent) 70%, #000000);
    font-weight: 600;
}

.apparence-tuiles .tu-cf-puces {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.apparence-tuiles .tu-puce-s {
    color: var(--tu-doux);
    font-size: 0.78rem;
}

.apparence-tuiles .tu-puce-s--lien {
    position: relative;
    z-index: 1;
    font-weight: 600;
    text-decoration: underline;
}

.apparence-tuiles .tu-cf-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 11px;
    border-top: 1px solid var(--tu-trait);
}

.apparence-tuiles .tu-cf-liens {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.apparence-tuiles .tu-lk {
    position: relative;
    z-index: 1;
    color: var(--tu-lien);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: underline;
}

.apparence-tuiles .tu-cf-carte .tu-geste {
    position: relative;
    z-index: 1;
}

.apparence-tuiles .tu-cf-prix {
    margin: 0;
    color: var(--tu-texte);
    font: 700 20px var(--tu-police-titre);
}

.apparence-tuiles .tu-cf-prix--petit {
    font-size: 0.95rem;
}

.apparence-tuiles .tu-cf-fin-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
}

.apparence-tuiles .tu-geste--discret {
    background: color-mix(in oklab, var(--tu-barre) 10%, #ffffff);
    color: var(--tu-texte);
}

/* Liste (tableau) : même socle que le modèle des listes, sans ombre */
.apparence-tuiles .tu-liste--cf {
    border: 1px solid var(--tu-bord-leger);
    box-shadow: none;
}

.apparence-tuiles .tu-liste__lien {
    color: var(--tu-texte);
    font: 700 15px var(--tu-police-titre);
    text-decoration: none;
}

.apparence-tuiles .tu-liste__lien:hover {
    text-decoration: underline;
}

.apparence-tuiles .tu-liste--cf td .tu-cf-nature {
    margin-top: 4px;
}

.apparence-tuiles .tu-liste--cf td .tu-cf-pers {
    font-size: 0.84rem;
}

.apparence-tuiles .tu-liste--cf td .tu-lk {
    display: flex;
    margin: 0 0 3px;
}

.apparence-tuiles .tu-liste--cf td .tu-prog {
    margin-top: 5px;
}

.apparence-tuiles .tu-liste--cf td .tu-cf-liens {
    gap: 3px;
}

.apparence-tuiles .tu-liste--cf td .tu-cf-puces {
    margin-top: 5px;
    gap: 4px 12px;
}

.apparence-tuiles .tu-cf-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Pagination */
.apparence-tuiles .tu-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 0;
}

.apparence-tuiles .tu-pages button {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--tu-champ-trait);
    border-radius: 8px;
    background: #ffffff;
    color: var(--tu-texte);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.apparence-tuiles .tu-pages button svg {
    width: 18px;
    height: 18px;
}

.apparence-tuiles .tu-pages button[aria-current='page'] {
    border-color: var(--tu-barre);
    background: var(--tu-barre);
    color: #ffffff;
}

.apparence-tuiles .tu-pages button:disabled {
    background: var(--tu-fond);
    color: var(--tu-doux);
    cursor: not-allowed;
}

.apparence-tuiles .tu-pages__info {
    margin: 0 8px;
    color: var(--tu-doux);
    font-size: 0.8125rem;
}

/* États vides */
.apparence-tuiles .tu-cf-vide {
    padding: 26px 16px;
    text-align: center;
}

.apparence-tuiles .tu-cf-vide > b {
    display: block;
    margin-bottom: 4px;
    color: var(--tu-texte);
    font: 700 18px var(--tu-police-titre);
}

.apparence-tuiles .tu-cf-vide > p {
    max-width: 560px;
    margin: 0 auto 12px;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-btn-ico {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    background: var(--tu-barre);
    color: #ffffff;
    font: 600 14px var(--tu-police-corps, inherit);
    text-decoration: none;
}

.apparence-tuiles .tu-cf-rien {
    margin: 0;
    padding: 18px 6px;
    color: var(--tu-doux);
}

.apparence-tuiles .tu-cf-rien strong {
    color: var(--tu-texte);
}

.apparence-tuiles .tu-cf-rien .tu-f-reset {
    margin-top: 10px;
}

@media (max-width: 900px) {
    .apparence-tuiles .tu-liste--cf {
        border: 0;
        background: none;
    }

    .apparence-tuiles .tu-liste--cf tbody tr {
        margin: 0 0 12px;
        padding: 8px 0;
        overflow: hidden;
        border: 1px solid var(--tu-bord-leger);
        border-radius: 10px;
        background: #ffffff;
    }

    .apparence-tuiles .tu-liste--cf tbody:first-of-type tr:first-child,
    .apparence-tuiles .tu-liste--cf tbody tr {
        border-top: 1px solid var(--tu-bord-leger);
    }

    .apparence-tuiles .tu-liste--cf .tu-liste__droite,
    .apparence-tuiles .tu-cf-actions {
        align-items: flex-start;
        text-align: left;
    }

    .apparence-tuiles .tu-cf-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

@media (max-width: 600px) {
    .apparence-tuiles .tu-ban {
        gap: 12px;
        padding: 18px 16px;
    }

    .apparence-tuiles .tu-ban h1 {
        font-size: 24px;
    }

    .apparence-tuiles .tu-ban p {
        font-size: 14.5px;
    }

    .apparence-tuiles .tu-ban__ico {
        width: 38px;
        height: 38px;
    }

    .apparence-tuiles .tu-filtres {
        padding: 14px;
    }

    .apparence-tuiles .tu-onglets--fonds .tu-onglets__liste {
        overflow-x: visible;
    }

    .apparence-tuiles .tu-onglets--fonds .tu-onglets__liste [role='tab'] {
        flex: 1 1 0;
        padding: 10px 6px;
        font-size: 0.84rem;
        line-height: 1.25;
        white-space: normal;
    }

    .apparence-tuiles .tu-onglets--fonds .tu-onglets__liste [role='tab'][aria-selected='true'] {
        padding-bottom: 7px;
    }

    .apparence-tuiles .tu-res {
        padding: 12px;
    }

    .apparence-tuiles .tu-f-rech {
        flex: 1 1 150px;
    }

    .apparence-tuiles .tu-f-vue {
        order: 1;
    }

    .apparence-tuiles .tu-f-choix {
        flex: 1 1 92px;
        order: 2;
    }

    .apparence-tuiles .tu-seg button {
        padding: 0 12px;
    }

    .apparence-tuiles .tu-f-fin {
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }

    .apparence-tuiles .tu-cf-grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------- Icônes des tuiles : deux tons tirés de l'identité de l'établissement */
/* Couleur institutionnelle (teintes de --tu-barre) et couleur d'accent (--tu-accent) ; aucune autre teinte. */
.apparence-tuiles .tu-icf-pale {
    fill: color-mix(in oklab, var(--tu-barre) 12%, #ffffff);
}

.apparence-tuiles .tu-icf-accpale {
    fill: color-mix(in oklab, var(--tu-accent) 20%, #ffffff);
}

.apparence-tuiles .tu-icf-acc {
    fill: var(--tu-accent);
}

.apparence-tuiles .tu-icf-fort {
    fill: color-mix(in oklab, var(--tu-barre) 82%, #ffffff);
}

.apparence-tuiles .tu-icf-moy {
    fill: color-mix(in oklab, var(--tu-barre) 40%, #ffffff);
}

.apparence-tuiles .tu-icf-nuit {
    fill: var(--tu-nuit);
}

.apparence-tuiles .tu-ics-acc {
    stroke: var(--tu-accent);
}

.apparence-tuiles .tu-ics-fort {
    stroke: color-mix(in oklab, var(--tu-barre) 82%, #ffffff);
}

.apparence-tuiles .tu-ics-nuit {
    stroke: var(--tu-nuit);
}