/* --------------------------------------------------------------------------
   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;
}

/* Trois choix tiennent en ligne sur un téléphone tant que les libellés restent
   courts (« Clair », « Sombre », « Appareil »). */
.choix-appareil--trois {
    grid-template-columns: repeat(3, 1fr);
}

/* Le thème, dans les paramètres : un choix qui se fait sur place, au milieu de
   lignes qui, elles, ouvrent un écran. Il prend donc la même carte qu'elles. */
.bloc-theme {
    padding: 14px 16px 16px;
}

.bloc-theme p {
    margin: 0 0 10px;
    font-size: .9rem;
}

.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);
}

/* Photo et avatar : la couleur du membre reste le fond, le dessin par-dessus. */
.pastille--photo,
.pastille--avatar {
    overflow: hidden;
    padding: 0;
}

.pastille--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pastille--avatar .avatar-dessin {
    width: 100%;
    height: 100%;
    /* Le dessin déborde volontairement par le bas : les épaules touchent le
       bord du cercle, comme sur une vraie photo de portrait. Ses couleurs
       sont les siennes (peau, cheveux, vêtement) ; « color » ne sert que de
       filet de sécurité si une forme oubliait la sienne. */
    color: rgba(255, 255, 255, .92);
}

/* Le choix de l'image, sur la fiche d'un membre. */
.choix-avatars {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.choix-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: var(--rayon);
    background: var(--fond-doux);
    box-shadow: none;
    font-size: .72rem;
    color: var(--texte-doux);
    min-height: 0;
}

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

.choix-avatar .pastille {
    width: 46px;
    height: 46px;
    box-shadow: none;
}

/* Deux boutons côte à côte, qui passent l'un sous l'autre à l'étroit. */
.apparence-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.apparence-boutons button {
    flex: 1 1 10rem;
    margin: 0;
}

.apparence-actuelle {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 4px;
}

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

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

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

/* « 3 modifications en attente de votre code » (26/09) : la couleur vient de .doux. */
.profil-attente {
    font-size: .82rem;
    line-height: 1.3;
    text-align: center;
}

/* ------------------------------------------------------------------- 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;
}

/* « OK » : le code fait de 4 à 8 chiffres, on valide soi-même. */
.clavier .touche-valider {
    background: var(--accent);
    color: var(--accent-texte);
    font-size: 1.2rem;
    font-weight: 700;
}

.clavier .touche-valider:disabled {
    background: var(--fond-doux);
    color: var(--texte-doux);
    opacity: 1;
}

/* ------------------------------------------------------ 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;
    /* Un prénom long sans espace ne pousse pas la loupe hors de l'écran (26/09). */
    overflow-wrap: anywhere;
}

/* La loupe et la roue, côte à côte à droite (chantier 7, 26/09). À 375 px,
   il reste environ 171 px au bonjour, qui passe à la ligne entre deux mots. */
.salut-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

/*
 * La météo : ni un module, ni une carte cliquable — un coup d'œil par la
 * fenêtre, posé au-dessus du reste. D'où un fond plus discret que les widgets,
 * et aucun état « appuyé ».
 */
.meteo-bloc {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    font: inherit;
    color: inherit;
    background: var(--fond-carte);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    padding: 14px 16px;
    margin: 0 0 12px;
    cursor: pointer;
    transition: transform var(--duree) var(--courbe);
}

.meteo-bloc:active {
    transform: scale(.985);
}

.meteo-haut {
    display: flex;
    align-items: center;
    gap: 14px;
}

.meteo-dessin {
    flex: 0 0 auto;
    color: var(--attention);
}

.meteo-chiffres {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    flex: 1;
    min-width: 0;
}

.meteo-temp {
    font-size: 2.1rem;
    font-weight: 300;
    line-height: 1;
}

.meteo-libelle {
    font-size: .95rem;
}

.meteo-extremes {
    font-size: .85rem;
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}

.meteo-lieu {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: .8rem;
    color: var(--texte-doux);
    white-space: nowrap;
}

/* Les heures à venir : « et cet après-midi ? » d'un coup d'œil. */
.meteo-heures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
}

.meteo-heure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: var(--texte-doux);
}

.meteo-heure-quand {
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.meteo-heure-temp {
    font-size: .95rem;
    font-weight: 650;
    color: var(--texte);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ le bulletin de la semaine */

.meteo-grand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.meteo-grand p {
    margin: 0;
}

.meteo-grand-temp {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1;
}

.meteo-jour {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bordure);
}

.meteo-jour:last-child {
    border-bottom: 0;
}

.meteo-jour-nom {
    flex: 0 0 7.5em;
    font-weight: 650;
}

.meteo-jour-nom::first-letter {
    text-transform: uppercase;
}

.meteo-jour-temps {
    flex: 1;
    min-width: 0;
    color: var(--texte-doux);
    font-size: .9rem;
}

.meteo-jour-degres {
    display: flex;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.meteo-source {
    text-align: center;
    font-size: .8rem;
}

.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;
}

/* Changer la quantité d'un article déjà dans la liste (26/09). */
.article-modifier {
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--texte-doux);
    background: none;
    box-shadow: none;
}

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

.article-edition-quantite {
    display: flex;
    gap: 8px;
}

.article-edition-quantite .champ-quantite {
    flex: 0 0 6em;
}

.article-edition-quantite .champ-unite {
    flex: 1 1 auto;
    min-width: 0;
}

.article-edition-boutons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Les listes (2026-09-23) : des rubans qu'on fait défiler du pouce, sans
   jamais faire défiler la page de côté. */
.listes-rubans {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--espace));
    padding: 2px var(--espace) 4px;
}

.listes-rubans::-webkit-scrollbar {
    display: none;
}

.liste-ruban {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    min-height: 40px;
    max-width: 70vw;
    font-size: .95rem;
    font-weight: 550;
}

.liste-ruban span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.liste-ruban--nouvelle {
    background: none;
    color: var(--accent-encre);
    border: 1.5px dashed var(--bordure);
    box-shadow: none;
}

/* Les modèles, à la création ; les icônes, dans les réglages. */
.modeles-liste {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.modele-liste {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 2px;
    border-radius: var(--rayon);
    font-size: .8rem;
    font-weight: 550;
    line-height: 1.2;
}

.modeles-liste--icones .modele-liste {
    padding: 8px 2px;
}

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

/* « .feuille h2 » met une capitale aux jours (« Mardi 23 ») : pas ici. */
.feuille .feuille-titre {
    text-transform: none;
}

.etiquette-champ {
    font-size: .85rem;
    font-weight: 600;
    color: var(--texte-doux);
}

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

/* Sélecteur plus précis que « label », qui est un bloc avec marges. */
.choix-membres .choix-membre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 14px 0 10px;
    min-height: var(--cible);
    border-radius: 999px;
    background: var(--fond-carte);
    box-shadow: inset 0 0 0 1px var(--bordure);
    color: var(--texte);
    font-size: .95rem;
    font-weight: 550;
    cursor: pointer;
}

.choix-membre input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--accent);
}

.choix-membre:has(input:checked) {
    background: var(--accent-fond);
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

/* « Cachée à… » : cocher, c'est écarter quelqu'un — on le voit. */
.choix-membres--exclure .choix-membre:has(input:checked) {
    background: var(--alerte-fond);
    box-shadow: inset 0 0 0 1.5px var(--alerte);
}

/* ---------------------------------------------------------------- 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;
}

/*
 * Un anniversaire : calculé, pas enregistré. Il ne s'ouvre pas, donc il ne
 * doit pas ressembler à un bouton — ni curseur, ni réaction au survol.
 */
.seance--virtuelle {
    cursor: default;
    box-shadow: var(--ombre), inset 4px 0 0 var(--attention);
}

/* La carte « Premiers pas », en tête de l'Accueil. */
.premiers-pas {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.premiers-pas-entete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.premiers-pas-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.premiers-pas-etape {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--rayon);
    text-align: left;
    background: var(--fond-doux);
    box-shadow: none;
}

.premiers-pas-etape--faite {
    background: transparent;
    color: var(--texte-doux);
}

.premiers-pas-etape--faite .premiers-pas-texte > span {
    text-decoration: line-through;
}

.premiers-pas-coche {
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 2px var(--bordure);
}

.premiers-pas-etape--faite .premiers-pas-coche {
    background: var(--accent);
    color: var(--accent-texte);
    box-shadow: none;
}

.premiers-pas-texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-weight: 600;
}

.premiers-pas-texte small {
    font-weight: 400;
    font-size: .82rem;
}

.premiers-pas-masquer {
    align-self: flex-end;
    min-height: 36px;
}

/* Écran « Installer l'appli » : les gestes, numérotés. */
.etapes-installation {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-famille--moyen {
    font-size: 1.6rem;
    padding: 12px;
}

/* Écran « Agendas externes » (Paramètres). */
.agenda-entete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agenda-couleur {
    flex: 0 0 14px;
    height: 14px;
    border-radius: 50%;
}

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

.agenda-texte .doux {
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.choix-couleurs-agenda {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pastille-couleur {
    width: 36px;
    min-height: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
}

.pastille-couleur[aria-checked="true"] {
    box-shadow: 0 0 0 3px var(--fond-carte), 0 0 0 5px var(--texte);
}

.aide-agendas summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 0;
}

.aide-agendas p {
    margin: 6px 0 0;
    font-size: .88rem;
}

/* Séance d'un agenda externe (école, club, travail) : lecture seule. Le
   liseré prend la couleur de l'agenda (posée dans le style de l'élément). */
.seance--externe {
    cursor: default;
    background: color-mix(in srgb, var(--fond-carte) 70%, var(--fond-doux));
}

.semaine-seance--externe {
    cursor: default;
    border-left-style: dashed;
    background: var(--fond-doux);
    color: var(--texte);
}

.semaine-puce--externe {
    background: var(--fond-doux);
    color: var(--texte);
}

.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);
}

/* Liste, semaine ou mois : trois boutons accolés, le choix courant en couleur. */
.bascule-vue {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 4px;
    gap: 4px;
    border-radius: 999px;
    background: var(--fond-doux);
}

.bascule-vue button {
    min-height: 40px;
    background: transparent;
    box-shadow: none;
    font-weight: 550;
    color: var(--texte-doux);
}

.bascule-vue button[aria-pressed="true"] {
    background: var(--fond-carte);
    color: var(--accent-encre);
    box-shadow: var(--ombre);
    font-weight: 650;
}

/* La semaine en grille horaire : une gouttière pour les heures, puis sept
   colonnes. Sur un téléphone, une colonne fait moins de 50 px : les blocs
   n'affichent que le début du titre, le reste est dans la fiche. */
.semaine {
    padding: 8px 8px 12px 0;
    border-radius: var(--rayon-grand);
    background: var(--fond-carte);
    box-shadow: var(--ombre);
}

.semaine-ligne {
    display: grid;
    grid-template-columns: 34px repeat(7, minmax(0, 1fr));
}

.semaine-entete {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 6px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.semaine-entete small {
    font-size: .7rem;
    font-weight: 650;
    color: var(--texte-doux);
}

.semaine-entete strong {
    font-size: .95rem;
    font-weight: 600;
}

.semaine-entete--aujourdhui small,
.semaine-entete--aujourdhui strong {
    color: var(--accent);
    font-weight: 750;
}

.semaine-journee {
    padding: 4px 0;
    border-top: 1px solid var(--bordure);
}

.semaine-puces {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 1px;
}

.semaine-puce {
    min-height: 0;
    padding: 2px 4px;
    border-radius: 6px;
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: none;
    font-size: .68rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.semaine-puce--anniversaire {
    background: color-mix(in srgb, var(--attention) 18%, transparent);
    color: var(--attention);
}

.semaine-corps {
    position: relative;
    border-top: 1px solid var(--bordure);
}

.semaine-heures {
    position: relative;
}

.semaine-heure {
    font-size: .65rem;
    color: var(--texte-doux);
    text-align: right;
    padding-right: 5px;
    font-variant-numeric: tabular-nums;
}

.semaine-heures .semaine-heure {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
}

/* Une ligne par heure : le pas (44 px) est PIXELS_PAR_HEURE dans calendrier.js. */
.semaine-colonne {
    position: relative;
    border-left: 1px solid var(--bordure);
    background: repeating-linear-gradient(
        to bottom,
        var(--bordure) 0 1px,
        transparent 1px 44px
    );
}

.semaine-seance {
    position: absolute;
    min-height: 0;
    padding: 2px 3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    border-radius: 6px;
    border-left: 3px solid var(--accent);
    background: var(--accent-fond);
    color: var(--accent-encre);
    box-shadow: 0 0 0 1px var(--fond-carte);
    font-size: .68rem;
    line-height: 1.2;
    text-align: left;
}

/* Retour à la ligne entre les mots seulement : un mot trop long pour la
   colonne est coupé au bord plutôt qu'empilé lettre par lettre. */
.semaine-seance-titre {
    flex-shrink: 0;
    max-width: 100%;
    font-weight: 650;
    overflow: hidden;
}

.semaine-seance-heure {
    opacity: .8;
    font-variant-numeric: tabular-nums;
}

.semaine-maintenant {
    position: absolute;
    left: -1px;
    right: 0;
    height: 2px;
    background: var(--alerte);
    pointer-events: none;
}

.semaine-maintenant::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--alerte);
}

/* La grille du mois. Sept colonnes qui tiennent sur un petit téléphone :
   les cases ne portent qu'un numéro et des points, le détail est en dessous. */
.mois {
    padding: 8px;
    border-radius: var(--rayon-grand);
    background: var(--fond-carte);
    box-shadow: var(--ombre);
}

.mois-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.mois-entetes span {
    padding: 4px 0 6px;
    text-align: center;
    font-size: .75rem;
    font-weight: 650;
    color: var(--texte-doux);
}

/* « mercredi 23 septembre » : seule la première lettre prend une majuscule. */
.agenda--mois .jour-titre {
    text-transform: none;
}

.agenda--mois .jour-titre::first-letter {
    text-transform: uppercase;
}

.mois-jour {
    min-height: 48px;
    padding: 6px 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
    font-variant-numeric: tabular-nums;
}

.mois-jour--hors {
    color: var(--texte-doux);
    opacity: .55;
}

.mois-numero {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: .9rem;
    font-weight: 550;
}

.mois-jour--aujourdhui .mois-numero {
    color: var(--accent);
    font-weight: 750;
    box-shadow: inset 0 0 0 1.5px var(--accent);
}

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

.mois-points {
    display: flex;
    align-items: center;
    gap: 3px;
    min-height: 8px;
}

.mois-point {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

.mois-point--anniversaire {
    background: var(--attention);
}

.mois-plus {
    font-size: .65rem;
    font-weight: 650;
    line-height: 1;
    color: var(--texte-doux);
}

.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;
}

/* « coché par un parent », sous-titre d'un membre sans compte (28/09). */
.puce-membre .puce-precision {
    font-size: .75rem;
    font-weight: 400;
}

.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;
}

/* « Tous ensemble » (28/09) : une carte, une ligne par participant. Sur la
   carte d'un enfant, sa propre ligne ressort encore un peu. */
.tache-parts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tache-part {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--bordure);
}

.tache-part--a-moi {
    font-weight: 650;
}

.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; }

/* « Bonus ou retrait » s'ouvre sous la ligne du membre, sur toute la largeur
   (24/09 : deux vrais champs à la place des fenêtres de saisie). */
.demande--pliable {
    flex-wrap: wrap;
}

.demande--pliable > .pliable {
    flex: 1 0 100%;
    padding-top: 4px;
}

/* Une ligne d'historique : la date devant, le nombre qui ne se coupe pas. */
.mouvement-texte {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mouvement-date {
    margin-right: 8px;
    font-size: .85rem;
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mouvement > strong {
    flex: 0 0 auto;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------ argent de poche (24/09) */

/* La tirelire : la carte des points, un chiffre plus petit — « 1 234,50 € »
   doit tenir sur un téléphone de 375 px. */
.solde--tirelire .solde-nombre {
    font-size: 2.6rem;
}

.solde-titre {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
}

/* « [10] points = 1,00 € », « 1 point = [10] centimes » : le nombre se tape
   au milieu de la phrase. */
.ligne-conversion,
.ligne-taux {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ligne-conversion input,
.ligne-taux input {
    flex: 0 0 88px;
    width: 88px;
    text-align: center;
}

.apercu-conversion {
    font-variant-numeric: tabular-nums;
}

/* Les mots tout faits d'un « Donné » : un appui remplit le mot court. */
.puces-mots {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.puce-mot {
    padding: 0 16px;
    font-size: .92rem;
}

/* Un enfant dans la liste des tirelires : pastille, prénom, solde. */
.tirelire-tete {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tirelire-solde {
    font-size: 1.2rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pastille--moyenne {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
    box-shadow: none;
}

/* --------------------------------------------------------------- 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;
}

/* Une adresse, pas un code : elle est plus longue et se lit en entier. */
/* Lu par les lecteurs d'écran, invisible à l'œil — et hors de la sélection :
   copié, le code famille ne doit pas emporter sa version épelée. */
.pour-lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    user-select: none;
}

/* L'écart entre les deux moitiés du code : un espacement, pas une espace
   (copié, le code se colle d'un seul tenant). */
.code-famille-suite {
    margin-left: .45em;
}

.code-famille--petit {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .02em;
    word-break: break-all;
    padding: 12px;
}

/* -------------------------------------------------------- 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);
}

/* ------------------------------------------------------- bandeau d'abonnement */

.bandeau {
    order: -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    margin-bottom: 12px;
    border-radius: var(--rayon-grand);
    background: var(--accent-fond);
    color: var(--accent-encre);
    font-weight: 550;
    font-size: .92rem;
}

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

.bandeau button {
    background: var(--fond-carte);
    box-shadow: none;
    color: inherit;
    font-weight: 650;
}


/* ------------------------------------------- import d'une recette (2026-09-22) */

/* Une ligne d'ingrédient proposé : case, quantité, unité, nom. Le nom prend
   toute la place restante — c'est lui qu'on relit, pas les chiffres. */
.ligne-import {
    display: grid;
    grid-template-columns: auto 4.5rem 4rem 1fr;
    gap: 8px;
    align-items: center;
}

.ligne-import input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--accent);
}

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

.ligne-convives label {
    flex: 1;
}

.lien-source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 550;
    text-decoration: none;
}

/* ------------------------------------- catalogue de recettes (2026-09-29) */

/* Les catégories défilent sur une ligne : dix boutons ne tiennent pas sur
   un téléphone, et les empiler repousserait les recettes sous le pli. */
.filtres-catalogue {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scrollbar-width: none;
}

.filtres-catalogue .filtre {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}

.liste-catalogue {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.etapes-recette {
    margin: 0;
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    line-height: 1.5;
}

/* ------------------------------------------------------ garde alternée */

/* Sur l'Accueil : une ligne discrète, qui ouvre l'agenda. */
.garde-accueil {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: var(--rayon);
    background: var(--fond-carte);
    box-shadow: var(--ombre);
    line-height: 1.35;
}

.garde-accueil .icone {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--texte-doux);
}

.garde-accueil-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 550;
}

/* Dans l'agenda : sous le titre du jour. */
.garde-bandeau {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--fond-doux);
    color: var(--texte-doux);
    font-size: .88rem;
    font-weight: 550;
}

.garde-bandeau .icone {
    flex: 0 0 auto;
}

/* Le mois : un trait sous le numéro, les nuits où un enfant dort ailleurs. */
.mois-jour--garde .mois-numero {
    border-bottom: 2px dashed var(--texte-doux);
    border-radius: 50% 50% 40% 40%;
}

/* L'enfant qui vit surtout chez l'autre foyer : ses nuits ICI, sur un fond
   teinté (le trait, lui, reste aux nuits d'un enfant d'ici passées ailleurs). */
.mois-jour--ici {
    background: var(--accent-fond);
}

.semaine-garde .semaine-puces {
    justify-content: center;
}

/* Sa pastille, les nuits ici : un anneau à sa couleur, pas une pastille
   pleine (pleine = une nuit ailleurs). La couleur arrive par --couleur-membre. */
.pastille--ici {
    color: var(--couleur-membre);
    box-shadow: inset 0 0 0 2px var(--couleur-membre);
}

.pastille--ici.pastille--photo,
.pastille--ici.pastille--avatar {
    box-shadow: 0 0 0 2px var(--fond-carte), 0 0 0 4px var(--couleur-membre);
}

/* L'écran de réglage. */
.garde-resume {
    padding: 12px 16px;
    border-radius: var(--rayon);
    background: var(--accent-fond);
    color: var(--accent-encre);
    font-weight: 600;
}

.garde-resume p {
    margin: 0;
}

.garde-rythmes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.garde-rythme {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .93rem;
    line-height: 1.35;
}

.garde-rythme > span {
    flex: 1;
    min-width: 0;
}

.garde-formulaire {
    margin-top: 10px;
}

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

.garde-semaine-titre {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texte-doux);
    margin-bottom: 4px;
}

.garde-nuits {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.garde-nuit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 0;
    min-height: 58px;
    border-radius: 12px;
    font-size: .72rem;
    line-height: 1.15;
}

.garde-nuit strong {
    font-size: .95rem;
}

.garde-nuit span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--texte-doux);
}

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

.garde-nuit[aria-pressed="true"] span {
    color: inherit;
}

/* Les heures de départ et d'arrivée, « À partir du » : l'étiquette au-dessus
   de son champ. */
.ligne-champs .garde-champ {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

/* Les deux heures restent alignées, même si une étiquette passe sur deux
   lignes sur un téléphone. */
.ligne-champs.garde-heures {
    align-items: flex-end;
}

.garde-ajout summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--accent-encre);
    padding: 6px 0;
}

/* ------------------------------------------------------------- invités */

/* Paramètres › Invités (24/09). Le texte d'accueil et l'annonce d'un geste :
   l'écran espace déjà ses blocs, pas de marge en plus ; vide, l'annonce
   ne prend pas de place. */
.invite-intro,
.invite-annonce {
    margin: 0;
}

.invite-annonce:empty {
    display: none;
}

/* Le prénom et son état sur une même ligne ; l'étiquette passe dessous
   quand le prénom est long, sur un téléphone. */
.invite-tete {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* « .ligne-texte span » grossirait l'étiquette : on la remet à sa taille. */
.invite-tete .etiquette {
    font-size: .75rem;
}

/* Plusieurs lignes de détail : la rangée grandit, le chevron reste centré. */
.invite-ligne {
    padding-top: 14px;
    padding-bottom: 14px;
}

.invite-ligne .ligne-texte {
    gap: 2px;
}

/* La fiche : un peu d'air avant chaque rubrique, sinon tout se suit au même pas. */
.invite-fiche .etiquette-champ {
    margin-top: 8px;
}

/* Le message à envoyer : des mots entiers, le lien coupé où il faut, et sur
   sa propre ligne (le saut de ligne du texte est gardé). */
.bloc-lien--message {
    white-space: pre-line;
    word-break: normal;
    overflow-wrap: anywhere;
    font-size: .9rem;
    line-height: 1.45;
}

/* Ce qui compte avant d'agir : un accès terminé, un partage qui va se perdre. */
.invite-alerte {
    padding: 10px 14px;
    border-radius: var(--rayon);
    background: color-mix(in srgb, var(--attention) 14%, var(--fond-carte));
    color: var(--attention);
    font-weight: 600;
}

/* Les rendez-vous partagés, l'état côté invité : des listes courtes. */
.invite-rdv,
.invite-etat {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .93rem;
    line-height: 1.35;
}

/* L'écran « fermée » d'un parent (27/09) : un invité par ligne, son prénom
   et « Retirer l’accès » ; un prénom long passe à la ligne, pas le bouton. */
.invite-fermee {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.invite-fermee strong {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 650;
}

.invite-fermee button {
    flex-shrink: 0;
}

/* Un invité dans le formulaire d'un événement : une icône à la place de la
   pastille — il n'a ni photo, ni avatar, ni couleur (décision 3). */
.puce-invite {
    padding-left: 12px;
}

.puce-invite .icone {
    color: var(--texte-doux);
}

.puce-invite[aria-pressed="true"] .icone {
    color: inherit;
}

/* ------------------------------------ Infos pratiques (chantier 6, 26/09) */

/* Un numéro : toute la rangée appelle (tel:, ou sms: pour le 114). Ni
   soulignement ni bleu de lien : c'est une rangée qu'on touche, cerclée
   comme un bouton. Fond de carte, pas « fond-doux » : le texte doux y
   garderait moins de 4,5:1 de contraste. */
.numero-ligne {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: var(--cible);
    padding: 8px 14px;
    border-radius: var(--rayon);
    background: var(--fond-carte);
    box-shadow: inset 0 0 0 1px var(--bordure);
    color: inherit;
    text-decoration: none;
}

a.numero-ligne:active {
    background: var(--accent-fond);
}

.numero-texte {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.numero-texte .doux {
    font-size: .86rem;
}

/* Le libellé et, pour un parent, « Parents seulement » juste après. */
.numero-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

/* Des chiffres de même largeur, jamais coupés entre deux paires. */
.numero-valeur {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--accent-encre);
}

/* Les urgences : le numéro d'abord, en grand, dans la couleur du module. */
.numero-ligne--urgence .numero-valeur {
    flex: 0 0 auto;
    min-width: 3ch;
    font-size: 1.6rem;
    line-height: 1.1;
    text-align: center;
    color: var(--accent);
}

/* Le crayon d'un parent, à côté de la rangée et jamais dedans. */
.infos-numero {
    display: flex;
    align-items: center;
    gap: 8px;
}

.infos-numero .numero-ligne {
    flex: 1;
    min-width: 0;
}

/* L'étiquette au-dessus du champ, sans la marge des autres « label ». Le
   champ garde ses 16 px : plus petit, l'iPhone zoome à la saisie. */
.infos-champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    min-width: 0;
}

.infos-champ input {
    font-size: 1rem;
    font-weight: 400;
}

.infos-formulaire {
    padding: 12px;
    border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1.5px var(--accent-fond);
}

/* Un membre : pastille et prénom, ses trois cases, la date. Un trait entre
   deux membres, pas avant le premier. */
.taille-membre {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bordure);
}

.titre-section + .taille-membre {
    padding-top: 0;
    border-top: none;
}

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

.taille-tete strong {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Haut, Bas, Pointure : trois colonnes égales, qui tiennent sur 375 px. */
.tailles-grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.taille-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure);
    text-align: center;
    line-height: 1.3;
}

.taille-case span {
    font-size: .8rem;
    color: var(--texte-doux);
}

.taille-case strong {
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.tailles-grille input {
    padding: 0 8px;
    text-align: center;
}

/* ------------------------------------- Recherche (chantier 7, 26/09) */

/* Le champ prend la barre à côté du retour : environ 285 px à 375. Sans
   « appearance », Safari dessine le champ de recherche à sa façon. */
.recherche-champ {
    flex: 1;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* L'appareil d'abord, puis ce que le serveur ajoute : un groupe par module,
   dans sa couleur (teinte-*). */
.recherche-resultats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

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

/* Un titre de rendez-vous ou un nom d'article sans espace passe à la ligne. */
.recherche-resultats .ligne-texte {
    overflow-wrap: anywhere;
}

/* « Déjà passés », « D’autres résultats », « Rien trouvé » et la phrase des
   agendas externes : du petit texte doux, jamais une alerte. */
.recherche-sous-titre,
.recherche-plus,
.recherche-vide,
.recherche-pied {
    margin: 0;
    font-size: .85rem;
    color: var(--texte-doux);
}

.recherche-sous-titre {
    margin-top: 4px;
    font-weight: 600;
}

.recherche-vide,
.recherche-pied {
    text-align: center;
}

.recherche-pied {
    margin-top: 18px;
}