/* --------------------------------------------------------------------------
   Les écrans. Refonte « douce et chaleureuse » du 2026-09-17 : les noms de
   classes sont ceux qu'utilise le JavaScript depuis le lot 0 — seule
   l'apparence a changé.
   -------------------------------------------------------------------------- */

.ecran {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    /* « backwards » et non « both » : une animation qui reste « active » enferme
       les éléments fixes de l'écran (la feuille d'un dîner passait sous la barre). */
    animation: apparition var(--duree) var(--courbe) backwards;
}

.ecran--haut {
    justify-content: flex-start;
}

.entete {
    text-align: center;
    margin-bottom: 8px;
}

.entete h1 {
    font-size: 2rem;
}

/* Écran du code : la pastille de la personne, centrée et bien visible. */
.entete .pastille {
    width: 84px;
    height: 84px;
    font-size: 2.2rem;
    margin: 0 auto 12px;
    box-shadow: var(--ombre-forte);
}

/* ------------------------------------------------ navigation (barre du bas) */

/* Place réservée sous le contenu : la barre fixe ne doit rien masquer. */
body.avec-navigation .application {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.navigation {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--fond-carte) 88%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 -1px 0 var(--bordure);
}

.navigation-onglets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    width: 100%;
    max-width: 520px;
}

.onglet {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    border-radius: 18px;
    background: none;
    box-shadow: none;
    color: var(--texte-doux);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.onglet .icone {
    transition: transform var(--duree) var(--rebond);
}

.onglet[aria-current="page"] {
    color: var(--accent-encre);
    background: var(--accent-fond);
}

.onglet[aria-current="page"] .icone {
    transform: translateY(-1px) scale(1.08);
}

/* Tablette murale ou grand écran : la barre devient un rail à gauche. */
@media (min-width: 900px) {
    body.avec-navigation .application {
        padding-bottom: var(--espace);
        padding-left: calc(112px + var(--espace));
        max-width: calc(820px + 112px);
    }

    .navigation {
        top: 0;
        right: auto;
        width: 104px;
        padding: calc(20px + env(safe-area-inset-top)) 10px 20px calc(10px + env(safe-area-inset-left));
        box-shadow: 1px 0 0 var(--bordure);
    }

    .navigation-onglets {
        grid-template-columns: 1fr;
        align-content: start;
        gap: 10px;
    }

    .onglet {
        min-height: 78px;
        font-size: .8rem;
    }
}

/* ----------------------------------------------------------- écran « Plus » */

.tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.tuile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    min-height: 118px;
    border-radius: var(--rayon-grand);
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
    text-align: left;
}

.tuile-icone {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--fond-carte);
    color: var(--accent);
}

.tuile strong {
    font-size: 1.05rem;
}

.tuile small {
    display: block;
    font-size: .8rem;
    opacity: .8;
    font-weight: 500;
}

/* ------------------------------------------------------------- appairage */

.champ-code {
    text-align: center;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-size: 1.6rem;
    font-weight: 700;
    min-height: 64px;
}

.choix-appareil {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.choix-appareil button {
    padding: 14px;
    line-height: 1.3;
    border-radius: var(--rayon);
}

.choix-appareil button[aria-pressed="true"] {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: inset 0 0 0 2px var(--accent);
    font-weight: 650;
}

.choix-appareil small {
    display: block;
    color: var(--texte-doux);
    font-weight: 400;
}

/* -------------------------------------------------------- choix du profil */

.profils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 14px;
}

.profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 10px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: var(--rayon-grand);
    min-height: 150px;
}

.pastille {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    /* La couleur du membre est fournie par le serveur. */
    box-shadow: 0 0 0 3px var(--fond-carte);
}

.profil .pastille {
    width: 72px;
    height: 72px;
    font-size: 1.9rem;
}

.profil-nom {
    font-weight: 650;
    font-size: 1.05rem;
}

/* ------------------------------------------------------------------- PIN */

.pin-points {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 4px;
}

.pin-point {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fond-doux);
    box-shadow: inset 0 0 0 2px var(--bordure);
    transition: background-color var(--duree) var(--courbe);
}

.pin-point--plein {
    background: var(--accent);
    box-shadow: none;
    animation: rebond 260ms var(--rebond);
}

.clavier {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
}

.clavier button {
    font-size: 1.65rem;
    font-weight: 550;
    height: 70px;
    border-radius: 22px;
    box-shadow: var(--ombre);
    font-variant-numeric: tabular-nums;
}

.clavier .touche-vide {
    visibility: hidden;
}

/* ------------------------------------------------------ barre d'en-tête */

.barre {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    min-height: 56px;
}

/* Bouton rond à icône : retour, semaine suivante, jour précédent… */
.bouton-rond {
    flex: 0 0 var(--cible);
    width: var(--cible);
    height: var(--cible);
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--fond-carte);
    color: var(--texte);
    box-shadow: var(--ombre);
}

.bouton-rond:hover {
    color: var(--accent);
}

.barre > button {
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    font-weight: 600;
    white-space: nowrap;
}

.barre .pastille {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
}

.barre-titre {
    flex: 1;
    min-width: 0;
}

.barre-titre strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barre-titre .doux {
    font-size: .88rem;
}

/* --------------------------------------------------------------- accueil */

.salut {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 6px;
}

.salut .pastille {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
}

.salut-texte {
    flex: 1;
    min-width: 0;
}

.salut-texte span {
    display: block;
    color: var(--texte-doux);
    font-size: .9rem;
}

.salut-texte span::first-letter {
    text-transform: uppercase;
}

.salut-texte strong {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.15;
}

.widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.widget {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px;
    border-radius: var(--rayon-grand);
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
    text-align: left;
    min-height: 112px;
    width: 100%;
}

.widget--large {
    grid-column: 1 / -1;
}

.widget-etiquette {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    opacity: .85;
}

.widget-titre {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.005em;
}

.widget-detail {
    font-size: .88rem;
    opacity: .85;
}

.widget-membres {
    display: flex;
    margin-top: 4px;
}

.widget-membres .pastille {
    width: 26px;
    height: 26px;
    font-size: .72rem;
    box-shadow: 0 0 0 2px var(--accent-fond);
}

.widget-membres .pastille + .pastille {
    margin-left: -6px;
}

/* Tuiles de l'ancien accueil, gardées pour « Plus ». */
.modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.module {
    padding: 20px var(--espace);
    border-radius: var(--rayon-grand);
    color: var(--texte-doux);
    text-align: center;
    background: none;
    min-height: 92px;
}

.module--actif {
    background: var(--fond-carte);
    color: var(--texte);
    font-weight: 650;
    box-shadow: var(--ombre);
}

/* --------------------------------------------------------- liste de lignes */

.liste-membres {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 20px;
    min-height: 72px;
}

.ligne-texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ligne-texte strong {
    font-weight: 650;
}

.ligne-texte span {
    font-size: .86rem;
}

.chevron {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fond-doux);
    color: var(--texte-doux);
    font-size: 1.2rem;
    line-height: 1;
}

/* ------------------------------------------------------ édition d'un membre */

label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    color: var(--texte-doux);
    margin: 12px 0 4px;
}

.bloc input + input {
    margin-top: 8px;
}

.choix-role {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.choix-role button {
    padding: 12px;
    line-height: 1.3;
    border-radius: var(--rayon);
}

.choix-role button[aria-pressed="true"] {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: inset 0 0 0 2px var(--accent);
    font-weight: 650;
}

.choix-role small {
    display: block;
    color: var(--texte-doux);
    font-weight: 400;
}

.couleurs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.puce-couleur {
    width: var(--cible);
    height: var(--cible);
    border-radius: 50%;
    padding: 0;
    box-shadow: none;
}

.puce-couleur[aria-pressed="true"] {
    box-shadow: 0 0 0 3px var(--fond-carte), 0 0 0 5px var(--texte);
    animation: rebond 260ms var(--rebond);
}

.bouton-danger {
    color: var(--alerte);
}

/* -------------------------------------------------------------- courses */

.selecteur-liste {
    font: inherit;
    font-size: 1.35rem;
    font-weight: 700;
    background: none;
    border: none;
    padding: 0;
    color: var(--texte);
    max-width: 100%;
    min-height: var(--cible);
}

.saisie {
    display: flex;
    gap: 8px;
    padding: 6px;
    border-radius: 999px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
}

.saisie input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border-radius: 999px;
}

.saisie input:focus {
    background: var(--fond-doux);
    border-color: transparent;
}

/* Sélecteur plus précis que « .saisie input », sinon le flex: 1 de celui-ci
   l'emporte et la quantité occupe la moitié de la barre de saisie. */
.saisie .champ-quantite {
    flex: 0 0 72px;
    text-align: center;
    background: var(--fond-doux);
}

.bouton-ajouter {
    flex: 0 0 var(--cible);
    font-size: 1.6rem;
    line-height: 1;
    background: var(--accent);
    color: var(--accent-texte);
    box-shadow: none;
}

/* Propositions issues du catalogue, pendant la frappe. */
.propositions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.proposition,
.habitude {
    padding: 0 16px;
    min-height: 40px;
    border-radius: 999px;
    background: var(--fond-carte);
    box-shadow: inset 0 0 0 1px var(--bordure);
    font-size: .95rem;
}

.habitude {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
    font-weight: 550;
}

/* Mode « retirer des suggestions » : on voit tout de suite qu'un appui retire. */
.habitude--retrait {
    color: var(--alerte);
    background: var(--alerte-fond);
    box-shadow: none;
}

.proposition {
    box-shadow: inset 0 0 0 1.5px var(--accent);
    color: var(--accent-encre);
    font-weight: 600;
}

/* Les habitudes de la maison, ajoutables d'un seul appui. */
.habitudes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.liste-articles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.vide {
    text-align: center;
    padding: 32px 16px;
    border-radius: var(--rayon-grand);
    background: var(--fond-doux);
}

.article-ligne {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.article {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 10px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 18px;
    min-height: 60px;
}

.article--coche {
    background: var(--fond-doux);
    box-shadow: none;
    color: var(--texte-doux);
}

.article--coche .article-nom {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.case {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--bordure);
    display: grid;
    place-items: center;
    font-size: .95rem;
    line-height: 1;
    transition: background-color var(--duree) var(--courbe);
}

.case--cochee {
    background: var(--accent);
    box-shadow: none;
    color: var(--accent-texte);
    animation: rebond 300ms var(--rebond);
}

.article-nom {
    flex: 1;
    min-width: 0;
    font-weight: 550;
}

.article-quantite {
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: .9rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--fond-doux);
}

.pastille--mini {
    width: 26px;
    height: 26px;
    font-size: .72rem;
    box-shadow: none;
}

.article-retirer {
    flex: 0 0 var(--cible);
    font-size: 1.4rem;
    color: var(--texte-doux);
    background: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------- repas */

.semaine {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* « case-repas » et non « case » : .case désigne déjà la case à cocher des
   courses, et la règle la plus tardive l'emporterait. */
.case-repas {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 12px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 20px;
    min-height: 64px;
}

.case-repas--aujourdhui {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
}

.case-jour {
    flex: 0 0 88px;
    color: var(--texte-doux);
    font-size: .88rem;
    font-weight: 600;
    text-transform: capitalize;
}

.case-repas--aujourdhui .case-jour {
    color: inherit;
}

.case-plat {
    flex: 1;
    min-width: 0;
    font-weight: 650;
}

.case-plat--vide {
    font-weight: 400;
    color: var(--texte-doux);
}

.saisie .champ-unite {
    flex: 0 0 76px;
    text-align: center;
    background: var(--fond-doux);
}

/* Feuille qui remonte du bas : le pouce est en bas de l'écran, pas en haut. */
.voile {
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 10, .42);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    z-index: 10;
    animation: apparition-voile var(--duree) var(--courbe) both;
}

.feuille {
    background: var(--fond);
    border-radius: 28px 28px 0 0;
    padding: 12px 18px calc(20px + env(safe-area-inset-bottom));
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: var(--ombre-forte);
    animation: montee 320ms var(--courbe) both;
}

/* La poignée : on comprend qu'on peut refermer. */
.feuille::before {
    content: "";
    align-self: center;
    width: 40px;
    height: 5px;
    border-radius: 999px;
    background: var(--bordure);
    margin-bottom: 4px;
}

@media (min-width: 700px) {
    .voile {
        align-items: center;
        padding: var(--espace);
    }

    .feuille {
        border-radius: 28px;
    }

    .feuille::before {
        display: none;
    }
}

@keyframes montee {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@keyframes apparition-voile {
    from { opacity: 0; }
    to { opacity: 1; }
}

.feuille h2 {
    margin: 0;
    font-size: 1.3rem;
    text-transform: capitalize;
}

.feuille-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ----------------------------------------------------------- calendrier */

.outils {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
}

.filtre {
    padding: 0 16px;
    font-weight: 550;
}

.filtre[aria-pressed="true"] {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: inset 0 0 0 1.5px var(--accent);
    font-weight: 650;
}

.bouton-compact {
    width: auto;
    padding: 0 18px;
}

.agenda {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.jour-titre {
    font-size: .9rem;
    font-weight: 650;
    text-transform: capitalize;
    color: var(--texte-doux);
    margin: 0 0 8px;
    padding-left: 4px;
}

.jour--aujourdhui .jour-titre {
    color: var(--accent);
}

.jour--aujourdhui .jour-titre::after {
    content: " · aujourd’hui";
    font-weight: 500;
}

.jour-vide {
    font-size: .88rem;
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--fond-doux);
}

.seances {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.seance {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 16px 12px 14px;
    background: var(--fond-carte);
    box-shadow: var(--ombre), inset 4px 0 0 var(--accent);
    border-radius: 18px;
    min-height: 64px;
}

.seance-heure {
    flex: 0 0 60px;
    font-variant-numeric: tabular-nums;
    color: var(--accent-encre);
    font-size: .9rem;
    font-weight: 650;
}

.seance-texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.seance-texte strong {
    font-weight: 650;
}

.seance-texte .doux {
    font-size: .85rem;
}

.seance-qui {
    display: flex;
}

.seance-qui .pastille + .pastille {
    margin-left: -6px;
}

.seance-qui .pastille {
    box-shadow: 0 0 0 2px var(--fond-carte);
}

.marques {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.marque {
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--accent-fond);
    color: var(--accent-encre);
}

/* ---------------------------------------------------------- formulaire */

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.formulaire h2 {
    margin: 0;
}

.formulaire p {
    margin: 0;
}

.ligne-champs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ligne-champs input {
    flex: 1;
    min-width: 0;
}

select,
textarea {
    padding: 10px 16px;
}

textarea {
    resize: vertical;
    min-height: 96px;
}

.case-a-cocher {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1rem;
    font-weight: 550;
    color: var(--texte);
    min-height: var(--cible);
}

/* L'interrupteur à droite, le libellé à gauche : comme dans les réglages d'un téléphone. */
.case-a-cocher {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.participants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.puce-membre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 0 6px;
    border-radius: 999px;
}

.puce-membre .pastille {
    box-shadow: none;
}

.puce-membre[aria-pressed="true"] {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: inset 0 0 0 2px var(--accent);
    font-weight: 650;
}

.lien-bouton {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: var(--accent-encre);
    background: var(--accent-fond);
    border-radius: 999px;
    min-height: var(--cible);
    font-weight: 600;
}

details.carte > summary {
    cursor: pointer;
    font-weight: 650;
    min-height: var(--cible);
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

details.carte > summary::-webkit-details-marker {
    display: none;
}

details.carte > summary::after {
    content: "›";
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fond-doux);
    color: var(--texte-doux);
    font-size: 1.2rem;
    transition: transform var(--duree) var(--courbe);
}

details.carte[open] > summary::after {
    transform: rotate(90deg);
}

details.carte[open] > summary {
    margin-bottom: 12px;
}

.bloc-lien {
    word-break: break-all;
    font-size: .85rem;
    padding: 12px 14px;
    border-radius: var(--rayon);
    background: var(--fond-doux);
    user-select: all;
}

/* ------------------------------------------------------------- tâches */

.liste-taches {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tache {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 22px;
}

/* Sur la tablette, l'enfant repère la sienne d'un coup d'œil. */
.tache--a-moi {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
}

.tache-tete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tache-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.jours-semaine {
    display: flex;
    gap: 5px;
}

.puce-jour {
    /* Les sept jours tiennent sur une ligne, même sur un petit téléphone. */
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--cible);
    aspect-ratio: 1;
    min-height: 40px;
    padding: 0;
    font-weight: 650;
}

.puce-jour[aria-pressed="true"] {
    background: var(--accent);
    color: var(--accent-texte);
    box-shadow: none;
}

.rang-tour {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-texte);
    font-size: .8rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- points */

.solde {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding: 24px 16px;
    border-radius: var(--rayon-grand);
    background: var(--accent-fond);
    color: var(--accent-encre);
}

.solde-nombre {
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    animation: rebond 420ms var(--rebond);
}

.demande {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--bordure);
}

.demande:first-of-type {
    border-top: none;
}

.mouvement {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--bordure);
}

.points-plus { color: var(--accent); font-weight: 650; }
.points-moins { color: var(--alerte); font-weight: 650; }

/* --------------------------------------------------------------- budget */

.totaux {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.total {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.total:first-child {
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
}

.total strong {
    font-size: 1.5rem;
    font-weight: 750;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.ligne-budget {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.ligne-budget-tete {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
}

.montant {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 600;
}

.montant--depasse {
    color: var(--alerte);
    font-weight: 750;
}

.montant--revenu {
    color: var(--accent);
}

.jauge {
    height: 10px;
    border-radius: 999px;
    background: var(--fond-doux);
    overflow: hidden;
}

.jauge-remplie {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width 600ms var(--courbe);
}

.jauge--depasse {
    background: var(--alerte);
}

/* ------------------------------------------------------------ documents */

.pastille--famille {
    background: var(--texte-doux);
}

.apercu-document {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--rayon-grand);
    background: var(--fond-doux);
}

/* --------------------------------------------------- relier un appareil */

/* Lisible à bout de bras et à voix haute. */
.code-famille {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    font-variant-numeric: tabular-nums;
    margin: 8px 0;
    padding: 18px 12px;
    border-radius: var(--rayon-grand);
    background: var(--accent-fond);
    color: var(--accent-encre);
    user-select: all;
}

/* -------------------------------------------------------- notifications */

.etat-push {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--rayon);
    background: var(--fond-doux);
}

.etat-push--ok {
    background: var(--accent-fond);
    color: var(--accent-encre);
    font-weight: 600;
}

/* ------------------------------------------------------ qui est prévenu */

.resume-prevenus {
    font-weight: 650;
    padding: 14px 16px;
    border-radius: var(--rayon-grand);
    margin: 0;
}

.resume--ok {
    background: var(--accent-fond);
    color: var(--accent-encre);
}

.resume--alerte {
    background: var(--alerte-fond);
    color: var(--alerte);
}

.etiquette {
    font-size: .75rem;
    font-weight: 650;
    padding: 4px 11px;
    border-radius: 999px;
    white-space: nowrap;
    background: var(--fond-doux);
}

.etiquette--ok { color: var(--accent-encre); background: var(--accent-fond); }
.etiquette--alerte { color: var(--alerte); background: var(--alerte-fond); }
.etiquette--attention { color: var(--attention); background: color-mix(in srgb, var(--attention) 14%, var(--fond-carte)); }
.etiquette--neutre { color: var(--texte-doux); }

.liste-envois {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.envoi {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 18px;
}

.envoi .doux {
    font-size: .85rem;
}

/* ------------------------------------------------------------- réglages */

.liste-reglages {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reglage {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    border-radius: 20px;
}

.reglage label {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--texte);
}

/* Interrupteur : plus lisible qu'une case pour « activé / désactivé ». */
.case-a-cocher input[type="checkbox"],
.reglage input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 52px;
    height: 32px;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--fond-doux);
    box-shadow: inset 0 0 0 1px var(--bordure);
    position: relative;
    cursor: pointer;
    transition: background-color var(--duree) var(--courbe);
}

.case-a-cocher input[type="checkbox"]::after,
.reglage input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform var(--duree) var(--rebond);
}

.case-a-cocher input[type="checkbox"]:checked,
.reglage input[type="checkbox"]:checked {
    background: var(--accent);
    box-shadow: none;
}

.case-a-cocher input[type="checkbox"]:checked::after,
.reglage input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

.pied {
    margin-top: auto;
    padding-top: var(--espace);
    text-align: center;
    color: var(--texte-doux);
    font-size: .85rem;
}

.etat-synchro:empty {
    display: none;
}

.etat-synchro {
    text-align: center;
    font-size: .85rem;
    color: var(--texte-doux);
    min-height: 1.4em;
}

/* ------------------------------------------------------------- confettis */

.confettis {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    overflow: hidden;
}

.confetti {
    position: absolute;
    top: -12px;
    width: 9px;
    height: 14px;
    border-radius: 3px;
    animation: chute 1400ms cubic-bezier(.2, .6, .4, 1) forwards;
}

@keyframes chute {
    to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .confettis { display: none; }
}

/* --------------------------------------------------- tablette murale */

/* Lu à un ou deux mètres : texte un cran plus grand, résumé sur 4 colonnes. */
@media (min-width: 900px) {
    html {
        font-size: 17px;
    }

    body.avec-navigation .application {
        max-width: calc(1040px + 112px);
    }

    .widgets {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .widget {
        min-height: 150px;
        padding: 20px;
    }

    .widget--large {
        grid-column: span 2;
    }

    .widget-titre {
        font-size: 1.35rem;
    }

    .salut-texte strong {
        font-size: 2.1rem;
    }

    .tuiles {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ------------------------------------------------------ titres de section */

.titre-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 0;
    font-size: 1rem;
}

.titre-section-icone {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--accent-fond);
    color: var(--accent);
}

/* Le nom d'un événement ou d'un plat : c'est la première chose qu'on lit. */
.champ-titre {
    font-size: 1.25rem;
    font-weight: 650;
    min-height: 56px;
}

/* Plusieurs sections dans une même carte : un peu d'air entre elles. */
.formulaire > .titre-section:not(:first-child),
.carte > .titre-section:not(:first-child) {
    margin-top: 14px;
}

/* ----------------------------------------------------- lignes d'action */

.ligne-action {
    min-height: 64px;
}

.ligne-action .chevron {
    background: none;
}

.operation-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.operation-actions select {
    flex: 1;
    min-width: 0;
}

.bouton-rond--danger {
    color: var(--alerte);
    box-shadow: none;
    background: var(--alerte-fond);
}