/* Feuille de style commune au site public et au backoffice.
   Thème inspiré d'animaux-secours.fr : vert forêt / vert prairie, police
   Inter, boutons peu arrondis, cartes avec légère ombre plutôt que bordure
   lourde. Les teintes exactes viennent des jetons CSS publics de ce site. */

:root {
    color-scheme: light dark;

    /* Palette. Fond « lin » tiré vers le chaud plutôt que du blanc pur : moins
       éblouissant à la journée, et les cartes blanches ressortent d'elles-mêmes
       au lieu de se fondre dans le fond. Le gris-vert des textes secondaires
       remplace les `opacity` d'autrefois, qui rendaient les tableaux illisibles. */
    --couleur-accent: #0E3322;        /* vert forêt — liens, boutons, nav active */
    --couleur-accent-hover: #123f2a;
    --couleur-accent-vif: #77B729;    /* vert prairie — accents, mise en avant */
    --couleur-accent-pale: #EAF5E3;

    /* Texte posé sur la couleur d'accent : blanc quand l'accent est sombre,
       presque noir quand il est clair (thème sombre) — sinon les boutons
       affichaient du blanc sur vert clair (contraste 2,28). */
    --couleur-sur-accent: #FFFFFF;

    --couleur-fond: #F2EFE6;
    --couleur-fond-carte: #FFFDF8;
    --couleur-texte: #17231B;
    --couleur-texte-doux: #4E594F;    /* textes secondaires : lisibles, jamais gris clair */
    --couleur-bordure: #DCD5C6;
    --couleur-fond-douce: #E8E4D7;

    /* Les étoiles d'une note. L'ambre dit « note » à tout le monde ; l'étoile
       vide est un contour du même dessin, jamais un gris invisible. */
    --couleur-etoile: #C08519;
    --couleur-etoile-creux: #C3B79C;

    --couleur-entete-tableau: #0E3322;      /* bandeau des tableaux */
    --couleur-entete-tableau-texte: #F2F5F0;
    --couleur-ligne-paire: #F7F4EC;         /* zébrures, très légères */
    --couleur-survol: #E9F2DC;              /* survol d'une ligne : vert prairie délavé */

    /* Noms utilisés par le planning et les calendriers : ils pointent désormais
       sur les jetons ci-dessus (avant, ces variables n'existaient pas et les
       bordures du planning ne s'affichaient pas). */
    --couleur-principale: var(--couleur-accent);
    --texte-doux: var(--couleur-texte-doux);
    --bordure: var(--couleur-bordure);
    --hauteur-heure: 2.8rem;

    /* Retard d'une tâche sur l'écran de la tablette. */
    --couleur-alerte-fond: #FDECEC;
    --couleur-alerte-bordure: #B91C1C;
    --couleur-alerte-texte: #8A1C1C;

    --rayon-bouton: 4px;
    --rayon-carte: .75rem;
    --ombre-carte: 0 1px 2px rgba(17, 24, 39, .06), 0 1px 6px rgba(17, 24, 39, .05);

    /* Messagerie : l'enveloppe bleue de la pastille et sa bulle de compteur.
       Le bleu est le seul du site, et c'est voulu : il doit se repérer d'un
       coup d'œil, en bas à droite, sur toutes les pages. */
    --couleur-messagerie: #1D4ED8;
    --couleur-sur-messagerie: #FFFFFF;
    --couleur-bulle-messagerie: #B91C1C;
    --couleur-sur-bulle-messagerie: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --couleur-accent: #5FBE8C;
        --couleur-accent-hover: #79cca0;
        --couleur-accent-vif: #9BE85C;
        --couleur-accent-pale: #10261b;
        --couleur-sur-accent: #0F1712;

        --couleur-fond: #121815;
        --couleur-fond-carte: #1a2420;
        --couleur-texte: #F3F4F6;
        --couleur-texte-doux: #AEB8B1;
        --couleur-bordure: #2b3730;
        --couleur-fond-douce: #202b26;

        --couleur-etoile: #E7B657;
        --couleur-etoile-creux: #5E6F64;

        --couleur-entete-tableau: #1f2e26;
        --couleur-entete-tableau-texte: #E7EFE9;
        --couleur-ligne-paire: #1d2721;
        --couleur-survol: #24372c;

        --couleur-alerte-fond: #3A1F1F;
        --couleur-alerte-bordure: #E07A7A;
        --couleur-alerte-texte: #F0B9B9;

        --ombre-carte: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 6px rgba(0, 0, 0, .3);

        /* Messagerie : bleu éclairci en thème sombre, avec un texte foncé
           dessus — du blanc sur ce bleu tomberait sous le seuil de lisibilité. */
        --couleur-messagerie: #4C86F9;
        --couleur-sur-messagerie: #0F1712;
        --couleur-bulle-messagerie: #E07A7A;
        --couleur-sur-bulle-messagerie: #121815;
    }
}

* { box-sizing: border-box; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    max-width: 70rem;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
    line-height: 1.6;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    overflow-x: hidden;   /* évite tout débordement dû aux sections pleine largeur */
}

a { color: var(--couleur-accent); }

/* -- En-tête / navigation -- */
/* Bandeau vert forêt, texte crème. Le corps de page est une colonne centrée :
   un pseudo-élément étale le fond sur toute la largeur de la fenêtre, sans
   toucher à la mise en page du contenu. */
.entete-site {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 1.2rem 0;
    margin-bottom: 1.75rem;
    background: var(--couleur-entete-tableau);
    color: var(--couleur-entete-tableau-texte);
    border-bottom: 0;
}

.entete-site::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: var(--couleur-entete-tableau);
    z-index: -1;
}

.entete-site .logo { font-weight: 700; font-size: 1.2rem; text-decoration: none;
                     color: var(--couleur-entete-tableau-texte);
                     display: flex; align-items: center; gap: .7rem; }
.entete-site .logo img { display: block; border-radius: 50%; }
.entete-site .logo-texte { display: flex; flex-direction: column; line-height: 1.15; }
.entete-site .logo-texte em { color: rgba(255, 255, 255, .72); font-style: normal; }
.entete-site .logo-texte strong { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.entete-site .logo-texte em { font-size: .6rem; font-style: normal; text-transform: uppercase;
                              letter-spacing: .17em; color: var(--couleur-accent-vif); font-weight: 600; margin-top: .15rem; }
.entete-site nav { display: flex; gap: 1.3rem; flex-wrap: wrap; }
/* Sur le bandeau sombre, le texte est crème : la rubrique courante se repère au
   vert prairie, le reste s'éclaircit au survol. */
.entete-site nav a {
    font-size: .9rem; font-weight: 500; text-decoration: none;
    color: var(--couleur-entete-tableau-texte);
    opacity: .78; padding-bottom: .3rem; border-bottom: 2px solid transparent;
}
.entete-site nav a:hover { opacity: 1; }
.entete-site nav a.actif { opacity: 1; color: var(--couleur-accent-vif); border-bottom-color: var(--couleur-accent-vif); }
.entete-site .compte { font-size: .85rem; color: rgba(255, 255, 255, .78); display: flex; align-items: center; gap: .75rem; }
.entete-site .compte a { color: var(--couleur-entete-tableau-texte); font-weight: 500; text-decoration: none; }
.entete-site .compte a:hover { text-decoration: underline; }

/* Cette règle-ci l'emportait sur `.pied-site` (plus précise) et posait sur le
   vert forêt la couleur des textes secondaires — prévue pour un fond clair :
   « Téléphone à renseigner », le copyright et le texte de contact étaient
   illisibles (contraste 1,89). Le pied de page garde donc sa propre couleur. */
footer.pied-site { margin-top: 3rem; padding-top: 1.25rem;
                   font-size: .85rem; color: var(--couleur-entete-tableau-texte); }

/* -- Titres -- */
h1 { font-size: 1.7rem; font-weight: 700; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 .75rem; }
.sous-titre { color: var(--couleur-texte-doux); margin-top: 0; }

/* -- Bandeaux de message -- */
.message { padding: .75rem 1rem; border-radius: var(--rayon-carte); font-size: .9rem; margin: 1rem 0; }
.message.succes { background: var(--couleur-accent-pale); color: #0f5132; }
.message.erreur { background: #fef2f2; color: #b91c1c; }

/* Un écart de budget : ce qui va dans le bon sens ne doit pas se lire comme un
   manque, et l'inverse non plus. Mêmes teintes que les messages ci-dessus. */
.montant-bon { color: #0f5132; }
.montant-mauvais { color: #b91c1c; }

/* -- Formulaires -- */
.formulaire { max-width: 34rem; }
.formulaire .champ { margin-bottom: 1rem; }
.formulaire label { display: block; font-size: .85rem; color: var(--couleur-texte); margin-bottom: .3rem; }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password],
.formulaire input[type=number], .formulaire input[type=date], .formulaire input[type=time],
.formulaire input[type=datetime-local], .formulaire input[type=file],
.formulaire select, .formulaire textarea {
    width: 100%; padding: .55rem .7rem; border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton); font-size: 1rem; font-family: inherit;
    /* background-color (et non le raccourci background) : le navigateur impose un
       fond aux champs, et le raccourci avec var() était ignoré — les champs
       restaient blancs, même en thème sombre. */
    background-color: var(--couleur-fond-carte); color: var(--couleur-texte);
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus {
    outline: none; border-color: var(--couleur-accent); box-shadow: 0 0 0 2px var(--couleur-accent-pale);
}
.formulaire textarea { resize: vertical; min-height: 5rem; }
/* Rangée de champs : les champs se partagent la largeur, et passent à la ligne
   au lieu de s'écraser quand l'un d'eux porte un texte explicatif long (un champ
   réduit à 40 px était illisible). */
.formulaire .ligne { display: flex; gap: 1rem; flex-wrap: wrap; }
.formulaire .ligne > .champ { flex: 1 1 12rem; min-width: 0; }
.formulaire .case { display: flex; align-items: center; gap: .5rem; }
.formulaire .case input { width: auto; }
.formulaire .aide { font-size: .8rem; color: var(--couleur-texte-doux); margin-top: .25rem; }

.bouton, button.bouton, input[type=submit].bouton {
    display: inline-block; padding: .7rem 1.4rem; border: 0; border-radius: var(--rayon-bouton);
    background-color: var(--couleur-accent); color: var(--couleur-sur-accent);
    font-size: .9rem; font-weight: 500;
    cursor: pointer; text-decoration: none; transition: background-color .15s ease;
}
.bouton:hover { background-color: var(--couleur-accent-hover); }
.bouton.secondaire { background: transparent; color: var(--couleur-texte); border: 1px solid var(--couleur-bordure); }
.bouton.secondaire:hover { background-color: var(--couleur-fond-douce); }
/* Un bouton secondaire posé sur un fond sombre (héros, bandeau vert) : son
   texte sombre y serait invisible. */
.hero .bouton.secondaire,
.section-large.fond-vert .bouton.secondaire,
.section-large.fond-vert .bouton.secondaire:hover {
    color: var(--couleur-entete-tableau-texte);
    border-color: rgba(255, 255, 255, .45);
}

/* La déconnexion part en POST, avec le jeton de la session : elle ne peut plus
   être déclenchée par une page tierce. Le bouton garde l'aspect d'un lien de la
   barre du haut ou du pied de page. */
form.deconnexion { display: inline; margin: 0; }
form.deconnexion button {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
    text-decoration: none;
}
form.deconnexion button:hover { text-decoration: underline; }
form.deconnexion button.bouton { padding: .7rem 1.4rem; }

.hero .bouton.secondaire:hover,
.section-large.fond-vert .bouton.secondaire:hover { background-color: rgba(255, 255, 255, .14); }

.bouton.danger { background: #b91c1c; }
.bouton.danger:hover { background: #991b1b; }
.bouton.petit { padding: .35rem .8rem; font-size: .8rem; }

/* -- Tableaux --
   Le bandeau de colonnes est vert forêt sur texte clair : c'est lui qui donne
   la lisibilité (avant, des majuscules grises à 60 % d'opacité sur fond blanc).
   Le tableau se présente comme une carte, avec des zébrures très légères et un
   survol vert prairie pour suivre la ligne du regard. */
table.donnees {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: .9rem;
    color: var(--couleur-texte);
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
}

table.donnees th, table.donnees td {
    text-align: left;
    padding: .65rem .8rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

table.donnees thead th {
    background: var(--couleur-entete-tableau);
    color: var(--couleur-entete-tableau-texte);
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    border-bottom: 0;
}

table.donnees thead th:first-child { border-top-left-radius: calc(var(--rayon-carte) - 1px); }
table.donnees thead th:last-child { border-top-right-radius: calc(var(--rayon-carte) - 1px); }

table.donnees tbody tr:nth-child(even) { background: var(--couleur-ligne-paire); }
table.donnees tbody tr:hover { background: var(--couleur-survol); }
table.donnees tbody tr:last-child td { border-bottom: 0; }
table.donnees tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--rayon-carte) - 1px); }
table.donnees tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--rayon-carte) - 1px); }

/* Fiches en deux colonnes (libellé à gauche, valeur à droite) : les libellés
   sont des cellules d'en-tête dans le corps du tableau, pas un bandeau. */
table.donnees.fiche-caract th {
    background: var(--couleur-fond-douce);
    color: var(--couleur-texte);
    font-size: .85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    width: 12rem;
}
table.donnees.fiche-caract tr:hover { background: transparent; }
.actions-ligne { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Choix d'un box depuis une notification : le libellé du box (« Box 3 —
   Chenil 1 (2 occupé(s)) ») doit se lire en entier. */
.select-box { min-width: 15rem; max-width: 100%; }

/* Actions dans un tableau : compactes. Une ligne de tableau sert à balayer des
   yeux ; un gros bouton par ligne casse ce balayage. Les actions principales
   restent aux formulaires et aux fiches, où elles gardent leur taille. */
table.donnees form { display: inline; margin: 0; }
table.donnees .bouton, table.donnees button {
    padding: .3rem .6rem;
    font-size: .76rem;
    font-weight: 500;
}
table.donnees .bouton + .bouton { margin-left: .2rem; }

/* Le bandeau de colonnes reste visible pendant le défilement d'une longue
   liste : sur une page de cent animaux, on ne se perd plus de colonne. */
table.donnees thead th { position: sticky; top: 0; z-index: 2; }

/* Une date ou un compteur qui se coupe en deux lignes fait sale : ces cellules
   ne passent jamais à la ligne. */
table.donnees td.date, table.donnees td.nombre { white-space: nowrap; }

/* -- Chronologie de la vie d'un animal --
   Une ligne par événement (entrée, sortie, adoption), du plus récent au plus
   ancien : l'histoire se lit d'un coup d'œil sur la fiche. */
.chronologie {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0 0 0 1.1rem;
    border-left: 2px solid var(--couleur-bordure);
}

.chronologie li {
    position: relative;
    padding: .55rem 0 .55rem .2rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.chronologie li:last-child { border-bottom: 0; }

.chronologie li::before {
    content: '';
    position: absolute;
    left: -1.42rem;
    top: 1rem;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--couleur-accent-vif);
    box-shadow: 0 0 0 2px var(--couleur-fond-carte);
}

.chronologie li.chrono-sortie::before { background: #B4611C; }
.chronologie li.chrono-adoption::before { background: var(--couleur-accent); }

.chrono-quand {
    display: inline-block;
    min-width: 10.5rem;
    font-size: .82rem;
    color: var(--couleur-texte-doux);
}

.chrono-detail { display: block; font-size: .84rem; color: var(--couleur-texte-doux); }

/* -- Badges -- */
.badge { display: inline-block; background: var(--couleur-fond-douce); padding: .2rem .6rem; border-radius: 1rem;
         font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
         white-space: nowrap; }
.badge.disponible { background: #d1fae5; color: #047857; }
.badge.reserve { background: var(--couleur-accent-pale); color: var(--couleur-accent); }
.badge.adopte, .badge.definitive { background: #eef2ff; color: #4338ca; }
.badge.en_soin, .badge.en_evaluation, .badge.retour { background: #fef3c7; color: #92400e; }
.badge.en_famille_accueil { background: #e0f2fe; color: #075985; }
.badge.indisponible, .badge.decede, .badge.annule, .badge.refusee,
.badge.renoncee { background: #fef2f2; color: #b91c1c; }
.badge.en_cours { background: var(--couleur-accent-pale); color: var(--couleur-accent); }

/* -- La suite d'une adoption (motif de renoncement, raison d'un retour) se lit
      en pleine largeur sous sa ligne : dans une colonne de tableau, elle se
      coupait mot à mot et devenait illisible. -- */
table.donnees tr.ligne-suite td {
    background: var(--couleur-fond-douce);
    padding-top: .1rem;
    padding-bottom: .5rem;
    font-size: .85rem;
}

/* -- Personne blacklistée : la marque se voit partout où la fiche ressort -- */
.alerte-blacklistage {
    border-left: 4px solid var(--couleur-alerte-bordure);
    background: var(--couleur-alerte-fond);
    color: var(--couleur-alerte-texte);
    font-weight: 500;
}
.alerte-blacklistage strong { text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }

/* -- Cartes (galerie publique) -- */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; margin-top: 1rem; }
.carte-animal {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    overflow: hidden; box-shadow: var(--ombre-carte); transition: box-shadow .15s ease, transform .15s ease;
}
a.carte-animal:hover { box-shadow: 0 4px 14px rgba(17, 24, 39, .12); transform: translateY(-2px); }
.carte-animal .photo { aspect-ratio: 4/3; background: var(--couleur-fond-douce); display: flex; align-items: center;
                        justify-content: center; font-size: .8rem; opacity: .6; }
.carte-animal .photo img { width: 100%; height: 100%; object-fit: cover; }
.carte-animal .infos { padding: 1rem 1.1rem; }
.carte-animal h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .25rem; }
.carte-animal .meta { font-size: .85rem; color: var(--couleur-texte-doux); margin: 0 0 .4rem; }
.carte-animal .lien-fiche { display: inline-block; margin-top: .7rem; font-size: .85rem;
                            font-weight: 600; color: var(--couleur-accent); }
a.carte-animal:hover .lien-fiche { text-decoration: underline; }
/* Rien à afficher : une ligne discrète, pas une grande boîte vide. */
.vide { color: var(--couleur-texte-doux); font-style: italic; font-size: .88rem; padding: .35rem 0; margin: 0; }

/* Une section sans contenu se replie sur une ligne : titre et message côte à
   côte, hauteur minimale. */
.panneau-vide { padding: .85rem 1.15rem; }
.panneau-vide h2 { display: inline; margin: 0; font-size: 1rem; }
.panneau-vide .vide { display: inline; padding: 0; margin: 0 0 0 .5rem; }

/* -- Tableau de bord / cartes de résumé -- */
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 1.25rem 0; }

/* Cinq cartes : le titre en tête, le nombre ensuite et en grand. C'est la carte
   entière qui mène à la liste — plus de chiffre-lien isolé, donc plus de lien
   imbriqué ni de zone cliquable minuscule. */
.carte-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .15rem;
    padding: 1.05rem 1.2rem;
    background-color: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    box-shadow: var(--ombre-carte);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.carte-stat:hover,
.carte-stat:focus-visible {
    border-color: var(--couleur-accent-vif);
    transform: translateY(-2px);
}

.carte-stat .libelle { font-size: 1rem; font-weight: 600; color: var(--couleur-texte); }

/* Le nombre occupe le centre de la carte : les cinq carrés gardent la même
   hauteur et le chiffre tombe au milieu, pas collé sous le titre. */
.carte-stat .valeur {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--couleur-accent);
}
.carte-stat .detail { margin: .35rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--couleur-texte-doux); }

/* -- Bloc repliable (détail du planning sur l'accueil) -- */
.bloc-detaille { margin-top: 2.25rem; }

.bloc-detaille > summary {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    background-color: var(--couleur-fond-douce);
    border: 1px solid var(--couleur-bordure);
    border-radius: .5rem;
    cursor: pointer;
    list-style: none;
}

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

.bloc-detaille > summary::before {
    content: '▸';
    color: var(--couleur-accent);
    font-size: .9rem;
}

.bloc-detaille[open] > summary::before { content: '▾'; }

.bloc-detaille > summary:hover { border-color: var(--couleur-accent-vif); }
.bloc-detaille > summary .titre-detaille { font-size: 1.15rem; font-weight: 600; }
.bloc-detaille > summary .aide { font-size: .8rem; }
.bloc-detaille .contenu-detaille { padding-top: 1rem; }
.bloc-detaille .contenu-detaille h3 { margin: 1.25rem 0 .5rem; }

/* Quand un panneau est replié, son titre vit dans le résumé : pas de doublon. */
.bloc-detaille .contenu-detaille > .panneau > h2 { display: none; }

/* Un titre et son bouton sur la même ligne (par exemple « Actions » et son export). */
.entete-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.bloc-detaille .contenu-detaille h3:first-child { margin-top: 0; }

/* -- Fenêtres du planning (accueil de l'équipe) --
   La journée s'ouvre par-dessus la page, et le formulaire de création
   par-dessus la journée : deux `dialog` natifs, donc Esc, le focus et le fond
   assombri sont gérés par le navigateur, sans bibliothèque. */
.calendrier-case.case-cliquable,
.semaine-colonne.case-cliquable {
    cursor: pointer;
}

.calendrier-case.case-cliquable:hover,
.calendrier-case.case-cliquable:focus-visible,
.semaine-colonne.case-cliquable:hover,
.semaine-colonne.case-cliquable:focus-visible {
    outline: 2px solid var(--couleur-accent-vif);
    outline-offset: -2px;
    background-color: var(--couleur-survol);
}

.dialogue {
    width: min(58rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    padding: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: .7rem;
    background-color: var(--couleur-fond-carte);
    color: var(--couleur-texte);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .28);
}

.dialogue::backdrop { background-color: rgba(12, 32, 22, .55); }

/* Une fenêtre que le serveur a rendue ouverte — les résultats d'une recherche
   arrivés sans JavaScript — se lit comme un bloc dans la page : c'est le script
   qui en fait une vraie fenêtre. Sans cette règle, elle flotterait au milieu de
   la page, à moitié détachée. */
.dialogue-serveur[open] {
    position: static;
    margin: 2rem auto;
    max-height: none;
}

.dialogue-serveur[open] .dialogue-corps { max-height: none; }

.dialogue-entete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.dialogue-entete h2 { margin: 0; font-size: 1.1rem; }
.dialogue-entete .dialogue-fermer {
    padding: .1rem .45rem;
    background: none;
    border: 0;
    font-size: 1.05rem;
    color: var(--couleur-texte-doux);
    cursor: pointer;
}

.dialogue-fermer:hover { color: var(--couleur-accent); }

.dialogue-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .9rem 1.1rem 0;
}

.dialogue-corps {
    padding: 1rem 1.1rem 1.2rem;
    overflow-y: auto;
    max-height: calc(100vh - 15rem);
}

.dialogue .message { margin: .8rem 1.1rem 0; }
.dialogue .jour-agenda { margin-bottom: 0; }
.dialogue .jour-agenda h3 { margin-top: 0; }

/* La notification d'accueil du site public (voir www/inc/annonce.php). */
.dialogue-annonce { width: min(42rem, calc(100vw - 2rem)); }
.dialogue-annonce .dialogue-corps p { margin: 0 0 .8rem; }
.dialogue-annonce .dialogue-corps p:last-child { margin-bottom: 0; }

/* L'image de la notification : elle prend la largeur de la fenêtre, sans
   dépasser, et garde ses proportions. */
.dialogue-annonce .annonce-image {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    border-radius: .5rem;
}

/* L'aperçu de l'image dans l'écran de réglages : montrer ce qui est en place
   sans prendre la moitié de la page. */
.apercu-image-notification {
    display: block;
    max-width: 22rem;
    height: auto;
    margin-top: .5rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: .5rem;
}

/* Le repli sans JavaScript : le même message, posé en haut de la page. */
.annonce-hors-script {
    margin: 0 0 1.5rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--couleur-bordure);
    border-left: .35rem solid var(--couleur-accent);
    border-radius: var(--rayon-carte);
    background-color: var(--couleur-fond-carte);
}
.annonce-hors-script h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.annonce-hors-script p { margin: 0 0 .6rem; }
.annonce-hors-script p:last-child { margin-bottom: 0; }

/* Section « certificat d'engagement » des règles d'adoption : les sous-titres
   `h3` n'ont pas de style global, on les pose ici pour ne rien changer ailleurs. */
#certificat-engagement h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
    color: var(--couleur-accent);
}
#certificat-engagement ul { margin: .5rem 0 1rem 1.2rem; }
#certificat-engagement li { margin-bottom: .35rem; }

/* ------------------------------------------------ le plan des locaux
   Un carreau = un mètre. Les couleurs des régimes sont volontairement
   distinctes (refuge, pension, fourrière, commun) : c'est ce qui permet de
   lire le plan d'un coup d'œil. Elles sont translucides pour rester justes
   sur les deux thèmes. */
.plan-cadre { display: flex; gap: 1.25rem; align-items: flex-start; }
.plan-zone { flex: 1 1 auto; min-width: 0; }
.plan-schema { display: block; width: 100%; height: auto; max-height: 70vh;
    border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    background-color: var(--couleur-fond-carte); }
.plan-schema text { font-family: inherit; }
.plan-fond { fill: var(--couleur-fond-carte); }
.plan-carreaux-motif { pointer-events: none; }
.plan-carreau { fill: none; stroke: rgba(14, 51, 34, .08); stroke-width: 2; }

/* Les salles, par régime */
.plan-salle > rect:first-child { stroke-width: 5; }
.plan-salle.est-inactive > rect:first-child { stroke-dasharray: 24 14; }
.regime-refuge > rect:first-child    { fill: rgba(119, 183, 41, .22); stroke: #4c7a22; }
.regime-pension > rect:first-child   { fill: rgba(59, 110, 165, .20); stroke: #2f5c8f; }
.regime-fourriere > rect:first-child { fill: rgba(198, 116, 28, .20); stroke: #a05c10; }
.regime-commun > rect:first-child    { fill: rgba(110, 110, 110, .14); stroke: #6b6b6b; }
.plan-nom-salle { font-weight: 700; fill: var(--couleur-accent); }

/* Les box et ce qu'ils contiennent */
.plan-box > rect:first-child { fill: rgba(255, 255, 255, .8); stroke: rgba(14, 51, 34, .38); stroke-width: 2; }
.plan-box.est-occupe > rect:first-child { fill: rgba(119, 183, 41, .3); stroke: #4c7a22; }
.plan-numero { fill: rgba(14, 51, 34, .17); font-weight: 700; }
.plan-animal { fill: var(--couleur-accent); cursor: pointer; }
.plan-animal:hover { text-decoration: underline; }
.plan-plus { fill: var(--couleur-accent); cursor: pointer; font-weight: 700; text-decoration: underline; }

/* Couloirs, murs, portes, étiquettes */
.plan-couloir > rect:first-child { fill: rgba(120, 120, 120, .18); stroke: rgba(90, 90, 90, .5); stroke-width: 2; }
.plan-mur > rect:first-child { fill: #4a4a4a; stroke: #333; }
.plan-porte > rect:first-child { fill: #ffffff; stroke: #7a4a13; stroke-width: 3; }
.plan-texte > rect:first-child { fill: none; stroke: none; }
.plan-texte .plan-libelle { font-weight: 600; fill: var(--couleur-texte-doux); }
.plan-libelle { fill: var(--couleur-texte); }

/* En modification : la poignée du coin, et ce qui est sélectionné */
.plan-poignee { fill: var(--couleur-accent-vif); stroke: #ffffff; stroke-width: 2; cursor: nwse-resize; }
.plan-modifiable .plan-salle, .plan-modifiable .plan-box, .plan-modifiable .plan-element { cursor: move; }
.plan-schema .est-choisi > rect:first-child { stroke: var(--couleur-accent-vif); stroke-width: 7; }

.plan-cotes { flex: 0 0 15rem; border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    padding: .75rem 1rem; background-color: var(--couleur-fond-douce); }
.plan-cotes h3 { margin: 0 0 .5rem; font-size: 1rem; }
.plan-cotes label { display: block; font-size: .85rem; color: var(--couleur-texte-doux); margin-top: .5rem; }
.plan-cotes input { width: 100%; }
.plan-champs { display: flex; gap: .5rem; margin: .25rem 0; }
.plan-pastille { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem;
    vertical-align: -2px; margin-right: .3rem; }
.plan-pastille.regime-refuge { background-color: rgba(119, 183, 41, .5); border: 2px solid #4c7a22; }
.plan-pastille.regime-pension { background-color: rgba(59, 110, 165, .45); border: 2px solid #2f5c8f; }
.plan-pastille.regime-fourriere { background-color: rgba(198, 116, 28, .45); border: 2px solid #a05c10; }
.plan-pastille.regime-commun { background-color: rgba(110, 110, 110, .3); border: 2px solid #6b6b6b; }
.plan-legende { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; font-size: .9rem; }
.plan-palette { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.plan-feuille { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; }
.plan-feuille input { width: 6rem; }

/* En lecture : ni palette, ni cotes, ni bouton de validation. */
.plan-editeur[data-plan-mode="lecture"] .plan-palette,
.plan-editeur[data-plan-mode="lecture"] .plan-feuille,
.plan-editeur[data-plan-mode="lecture"] [data-plan-publier],
.plan-editeur[data-plan-mode="lecture"] .plan-cotes { display: none; }

@media (max-width: 900px) {
    .plan-cadre { flex-direction: column; }
    .plan-cotes { flex: 1 1 auto; width: 100%; }
}
.dialogue-second { width: min(44rem, calc(100vw - 3rem)); }
.dialogue-fiche { width: min(42rem, calc(100vw - 2rem)); }

/* -- Fiche d'une personne (personnel), en lecture seule --
   La photo à gauche, l'information à droite, en texte : aucun champ à remplir. */
.fiche-personne {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.fiche-personne-photo { flex: 0 0 9.5rem; }
.fiche-personne-photo img,
.vignette-fiche {
    width: 9.5rem;
    height: 9.5rem;
    object-fit: cover;
    border-radius: .6rem;
    border: 1px solid var(--couleur-bordure);
    background-color: var(--couleur-fond-douce);
}

/* Aperçu du séjour de pension dans la fiche animal : le détail ligne par ligne,
   tel qu'il sera enregistré. Les retours à la ligne sont conservés. */
.detail-sejour {
    white-space: pre-line;
    margin-top: .5rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--accent, #2f7d4f);
    background: rgba(47, 125, 79, .07);
    border-radius: .35rem;
    font-size: .95rem;
}

/* Champs alignés sur une même ligne (tarif journalier par espèce, paliers de
   remise) : ils s'enroulent sur les écrans étroits. */
.champs-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: .75rem;
}

.champs-ligne .champ {
    margin: 0;
}

/* Miniature d'une ligne de tableau (listes du backoffice) : la photo principale
   de l'animal, à côté de son nom. La case reste vide quand il n'y en a pas —
   la colonne garde sa largeur grâce aux autres lignes. */
table.donnees .vignette-liste {
    display: block;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: .5rem;
    border: 1px solid var(--couleur-bordure);
    background-color: var(--couleur-fond-douce);
}

.fiche-personne-photo .vide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 9.5rem;
    height: 9.5rem;
    margin: 0;
    border: 1px dashed var(--couleur-bordure);
    border-radius: .6rem;
    font-size: .85rem;
    color: var(--couleur-texte-doux);
    text-align: center;
}

.fiche-personne-infos { flex: 1 1 17rem; margin: 0; }
.fiche-personne-infos dt {
    margin-top: .8rem;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--couleur-texte-doux);
}

.fiche-personne-infos dt:first-child { margin-top: 0; }

/* Un nom cliquable : l'aspect d'un lien, même au milieu d'un tableau. */
.lien-fiche-personne {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--couleur-accent);
    text-decoration: none;
    cursor: pointer;
}

.lien-fiche-personne:hover,
.lien-fiche-personne:focus { text-decoration: underline; }

/* Les deux boutons du bas de la fiche, et la photo sur la page complète. */
.actions-fiche-personne { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }
.photo-fiche-personne {
    width: 9.5rem;
    height: 9.5rem;
    object-fit: cover;
    border-radius: .6rem;
    border: 1px solid var(--couleur-bordure);
}
.fiche-personne-infos dd { margin: .15rem 0 0; }
.vignette-fiche { width: 4.5rem; height: 4.5rem; }

/* L'invite suit l'état : « afficher » replié, « replier » ouvert. */
.bloc-detaille .quand-ouvert { display: none; }
.bloc-detaille[open] .quand-replie { display: none; }
.bloc-detaille[open] .quand-ouvert { display: inline; }

/* -- Fiche animal publique -- */
.fiche-animal { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem; margin-top: 1rem; }
@media (max-width: 42rem) { .fiche-animal { grid-template-columns: 1fr; } }
.fiche-photo-principale { aspect-ratio: 4/3; background: var(--couleur-fond-douce); border-radius: var(--rayon-carte);
                           overflow: hidden; display: flex; align-items: center; justify-content: center;
                           font-size: .9rem; opacity: .6; }
.fiche-photo-principale img { width: 100%; height: 100%; object-fit: cover; }
.fiche-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: .5rem; margin-top: .6rem; }
.fiche-vignettes img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--rayon-bouton); }
.fiche-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
table.fiche-caract td, table.fiche-caract th { padding: .4rem .3rem; }
.encart-adoption { background: var(--couleur-accent-pale); border-radius: var(--rayon-carte); padding: 1.2rem 1.4rem; margin-top: 1.5rem; }
.encart-adoption h3 { margin-top: 0; color: var(--couleur-accent); }

/* -- Agenda (planning) -- */
.jour-agenda { margin-bottom: 1.25rem; }
.jour-agenda h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .5rem; opacity: .85; }
.creneau { background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
           padding: .8rem 1rem; margin-bottom: .5rem;
           display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.creneau .details strong { display: block; }
.creneau .occupation { font-size: .8rem; color: var(--couleur-texte-doux); }

/* ==========================================================================
   PAGE D'ACCUEIL PUBLIQUE — sections riches
   (hero, cartes d'action, bandeaux, témoignage, actualités, dons)
   ========================================================================== */

/* -- Hero : grand bandeau vert pleine largeur -- */
.hero {
    position: relative;
    margin: 0 calc(50% - 50vw) 2.5rem;
    padding: 4rem calc(50vw - 50% + 1.5rem) 4.5rem;
    background:
        linear-gradient(135deg, #0E3322 0%, #14512f 55%, #1c6b3d 100%);
    color: #fff;
    overflow: hidden;
}
.hero::after {
    content: "";
    position: absolute; inset: 0;
    background: url("/assets/img/motif-pattes.svg") repeat;
    opacity: .5; pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 3.1rem);
    line-height: 1.15; font-weight: 500; color: #fff;
    margin: 0 0 1.1rem; max-width: 46rem; letter-spacing: -.02em;
}
.hero h1 strong { font-weight: 700; color: #9BE85C; }
.hero .chapeau {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    max-width: 42rem; opacity: .92; margin: 0 0 1.9rem;
}
.hero .actions { display: flex; gap: .9rem; flex-wrap: wrap; }

/* -- Cartes d'action (Adopter / Don / Bénévolat) -- */
.cartes-actions {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.5rem; margin: -4.5rem 0 3rem; position: relative; z-index: 2;
}
.carte-action {
    background: var(--couleur-fond-carte); border-radius: var(--rayon-carte);
    padding: 1.9rem 1.7rem; box-shadow: 0 4px 18px rgba(17, 24, 39, .10);
    border-top: 4px solid var(--couleur-accent-vif);
    display: flex; flex-direction: column;
    transition: transform .15s ease, box-shadow .15s ease;
}
.carte-action:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(17, 24, 39, .15); }
.carte-action .icone {
    width: 2.9rem; height: 2.9rem; border-radius: .7rem;
    background: var(--couleur-accent-pale); color: var(--couleur-accent);
    display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.carte-action .icone svg { width: 1.6rem; height: 1.6rem; }
.carte-action h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .2rem; color: var(--couleur-texte); }
.carte-action .accroche {
    font-size: .8rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: .07em; color: var(--couleur-accent); margin: 0 0 .8rem;
}
.carte-action p.texte { font-size: .93rem; opacity: .8; margin: 0 0 1.4rem; flex: 1; }
.carte-action .bouton { align-self: flex-start; }

/* -- Sections pleine largeur, alternance de fonds -- */
.section-large {
    margin: 0 calc(50% - 50vw);
    padding: 3.5rem calc(50vw - 50% + 1.5rem);
    background: var(--couleur-fond-carte);   /* blanc : alterne avec .fond-gris */
}
.section-large.fond-gris { background: var(--couleur-fond); }
.section-large.fond-vert { background: #0E3322; color: #fff; }
.section-large.fond-vert h2, .section-large.fond-vert h3 { color: #fff; }
.section-large.fond-vert .sous-titre { color: rgba(255,255,255,.8); }

/* -- En-tête de section (titre + intro centrés) -- */
.entete-section { text-align: center; max-width: 46rem; margin: 0 auto 2.4rem; }
.entete-section h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; margin: 0 0 .6rem; letter-spacing: -.01em; }
.entete-section .sous-titre { font-size: 1rem; opacity: .75; margin: 0; }

/* -- Bloc « deux colonnes » (texte + visuel) -- */
.bloc-duo {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2.5rem; align-items: center;
}
.bloc-duo .visuel {
    border-radius: var(--rayon-carte); overflow: hidden; min-height: 16rem;
    background: linear-gradient(135deg, #77B729 0%, #0E3322 100%);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.bloc-duo .visuel img { width: 100%; height: 100%; object-fit: cover; }

/* -- Bandeau de dons (montants) -- */
.bandeau-dons { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.don-palier {
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--rayon-carte); padding: 1.5rem 1.4rem; text-align: center;
}
.don-palier .montant {
    font-size: 2rem; font-weight: 700; color: #9BE85C;
    margin: 0 0 .6rem; letter-spacing: -.02em;
}
.don-palier p { font-size: .92rem; opacity: .9; margin: 0; }

/* -- Témoignage -- */
.temoignage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem; align-items: center;
    background: var(--couleur-fond-carte); border-radius: var(--rayon-carte);
    padding: 2rem; box-shadow: var(--ombre-carte);
}
@media (max-width: 44rem) { .temoignage { grid-template-columns: 1fr; } }
.temoignage .portrait {
    aspect-ratio: 4/3; border-radius: var(--rayon-carte); overflow: hidden;
    background: var(--couleur-fond-douce);
    display: flex; align-items: center; justify-content: center; opacity: .7;
}
.temoignage .portrait img { width: 100%; height: 100%; object-fit: cover; }
.temoignage blockquote { margin: 0 0 .9rem; font-size: 1.15rem; font-style: italic; line-height: 1.55; }
.temoignage .auteur { font-weight: 600; font-size: .92rem; color: var(--couleur-accent); }

/* -- Actualités -- */
.grille-actus { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; }
.carte-actu {
    background: var(--couleur-fond-carte); border-radius: var(--rayon-carte);
    overflow: hidden; box-shadow: var(--ombre-carte); display: flex; flex-direction: column;
}
.carte-actu .visuel { aspect-ratio: 16/9; background: var(--couleur-fond-douce); }
.carte-actu .visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-actu .corps { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.carte-actu h3 { font-size: 1.05rem; margin: 0 0 .5rem; line-height: 1.35; }
.carte-actu p { font-size: .9rem; opacity: .75; margin: 0 0 1rem; flex: 1; }
.carte-actu .lien { font-weight: 600; font-size: .88rem; }
.carte-actu .date-actu { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
                         opacity: .6; margin: 0 0 .45rem; font-weight: 600; }

/* Les nouvelles d'une pension : un fil, une par ligne, la date d'abord. La
   mosaïque des actualités laisse des trous quand les nouvelles n'ont pas
   toutes une photo, et la chronologie s'y lit mal. */
.grille-actus.fil-pension { display: flex; flex-direction: column; gap: 1.25rem; }
.grille-actus.fil-pension .carte-actu { flex-direction: row; align-items: stretch; }
.grille-actus.fil-pension .carte-actu .visuel { flex: 0 0 13rem; aspect-ratio: 4 / 3; }
.grille-actus.fil-pension .carte-actu .corps { justify-content: flex-start; }
@media (max-width: 34rem) {
    .grille-actus.fil-pension .carte-actu { flex-direction: column; }
    .grille-actus.fil-pension .carte-actu .visuel { flex: none; }
}

/* -- Article d'actualité (page détail) -- */
.article-actu { max-width: 46rem; margin: 0 auto; }
.fil-ariane { font-size: .9rem; margin: 0 0 1.2rem; }
.article-actu h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .35rem; }
.article-actu .date-actu { color: var(--couleur-texte-doux); font-size: .88rem; margin: 0 0 1.6rem; }
.image-article { width: 100%; border-radius: var(--rayon-carte); margin-bottom: 1.6rem; }
.chapeau-article { font-size: 1.12rem; opacity: .88; font-style: italic;
                   border-left: 3px solid var(--couleur-accent-vif);
                   padding-left: 1rem; margin: 0 0 1.6rem; }
.contenu-article p { margin: 0 0 1.1rem; }

/* ==========================================================================
   ESPACE ÉQUIPE (backoffice)
   ========================================================================== */

.compte-nom { text-decoration: none; color: inherit; font-weight: 600; }

/* Espace équipe : beaucoup de rubriques → menu regroupé par catégorie.
   Chaque groupe se déplie au survol (et au clavier, par focus) : le menu tient
   sur une ligne tout en gardant les écrans à portée de clic. */
.entete-equipe { gap: 1.4rem; }

/* Dernière ligne du bandeau : la personne connectée à gauche, la déconnexion à
   droite, sur la même ligne. La ligne des rubriques reste dégagée. */
.entete-equipe .compte-bas {
    flex: 1 0 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.entete-equipe .compte-bas .compte-nom { font-size: .84rem; }
.entete-equipe .logo img { width: 34px; height: 34px; }
.entete-equipe nav { gap: .2rem; align-items: center; }
.entete-equipe nav > a { font-size: .84rem; padding: .35rem .5rem; }
.entete-equipe .compte { font-size: .8rem; gap: .6rem; flex-wrap: wrap; }

/* -- Menu : bandeau sur ordinateur, panneau dépliant sur petit écran --
   Disposition reprise du menu dépliant « responsive » de Bedimcode : un bouton
   burger ouvre un panneau plein largeur dans lequel chaque groupe se déplie
   comme un accordéon ; sur grand écran, les groupes s'ouvrent au survol (et au
   clavier) avec un léger glissement. */

.menu-bascule {
    display: none;
    position: relative;
    width: 2.7rem;
    height: 2.7rem;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--rayon-bouton);
    cursor: pointer;
}

.menu-bascule-barres,
.menu-bascule-barres::before,
.menu-bascule-barres::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.15rem;
    height: 2px;
    background: var(--couleur-entete-tableau-texte);
    border-radius: 2px;
    transform: translate(-50%, -50%);
    transition: transform .3s ease, background-color .2s ease;
}

.menu-bascule-barres::before { transform: translate(-50%, calc(-50% - 5px)); }
.menu-bascule-barres::after { transform: translate(-50%, calc(-50% + 5px)); }
.menu-bascule.est-ouvert .menu-bascule-barres { background: transparent; }
.menu-bascule.est-ouvert .menu-bascule-barres::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-bascule.est-ouvert .menu-bascule-barres::after { transform: translate(-50%, -50%) rotate(-45deg); }

.menu-groupe { position: relative; }

.menu-groupe > .menu-titre {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .5rem;
    font-size: .84rem;
    font-weight: 500;
    color: var(--couleur-entete-tableau-texte);
    opacity: .78;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.menu-groupe > .menu-titre::after {
    content: '▾';
    font-size: .7em;
    opacity: .7;
    transition: transform .25s ease;
}

.menu-groupe.actif > .menu-titre,
.menu-groupe:hover > .menu-titre {
    color: var(--couleur-accent-vif);
    border-bottom-color: var(--couleur-accent-vif);
    opacity: 1;
}

.menu-liste {
    flex-direction: column;
    min-width: 16rem;
    padding: .4rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: .55rem;
    box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .16);
}

.menu-liste a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .5rem .6rem;
    font-size: .83rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--couleur-texte);
    border-radius: .35rem;
}

/* Survol et entrée courante : un jeton de couleur, valable en clair comme en
   sombre. Le vert forêt translucide d'avant disparaissait sur une carte sombre. */
.menu-liste a:hover { background: var(--couleur-survol); }
.menu-liste a.actif { background: var(--couleur-survol); color: var(--couleur-accent); }

/* Les liens du bandeau vert reçoivent leur couleur de `.entete-site nav a`, plus
   précise que `.menu-liste a` : les listes dépliantes s'affichaient donc en crème
   sur la carte claire — invisible, sur ordinateur comme dans le panneau du
   téléphone (contraste mesuré 1,08). Ces règles-ci, plus précises encore,
   rendent la main aux couleurs de carte, à toutes les largeurs. */
.entete-site nav .menu-liste a,
.entete-equipe nav .menu-liste a {
    color: var(--couleur-texte);
    opacity: 1;
}

.entete-site nav .menu-liste a.actif,
.entete-equipe nav .menu-liste a.actif {
    color: var(--couleur-accent);
}

/* Accès de l'équipe : présent dans le menu, plus discret que les rubriques
   publiques. */
.entete-site nav > a.lien-equipe {
    color: rgba(255, 255, 255, .62);
    font-size: .82rem;
}

/* Un badge posé sur le bandeau sombre : pastille claire, texte d'accent. Les
   jetons s'inversent avec le thème — un blanc translucide surmonté du vert
   clair du mode sombre donnait un texte à peine lisible (contraste 2,28). */
.entete-site .badge {
    background-color: var(--couleur-accent-pale);
    color: var(--couleur-accent);
}

/* Petit écran (téléphone, tablette) : un tableau de gestion ne tient pas dans
   la largeur. `display: block` sur la table laisse ses lignes alignées tout en
   la rendant défilable horizontalement — sinon `overflow-x: hidden` du body
   coupait purement et simplement les dernières colonnes. */
@media (max-width: 900px) {
    table.donnees {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Bandeau sur téléphone : on garde le nom, on retire le sous-titre qui prenait
   la place du burger et cassait le logo sur deux lignes. */
@media (max-width: 600px) {
    .entete-site { padding: 1rem 0; gap: .5rem; }
    .entete-site .logo { font-size: 1.05rem; gap: .5rem; }
    .entete-site .logo img { width: 32px; height: 32px; }
    .entete-site .logo-texte em { display: none; }
    .entete-site .compte { font-size: .78rem; }
    .entete-equipe .compte { gap: .5rem; }
}

/* Petit écran : le panneau remplace le bandeau, les groupes deviennent des
   accordéons. Le seuil (1118px) est celui de la référence, et le même que dans
   assets/js/menu.js. */
@media (max-width: 1118px) {
    .entete-site, .entete-equipe { position: relative; flex-wrap: nowrap; align-items: center; }

    /* Sur petit écran, pas de seconde ligne : la déconnexion tient dans le
       bandeau, à côté du bouton du menu. */
    .entete-equipe .compte-bas { flex: 0 0 auto; gap: 1rem; }
    .entete-equipe .compte-bas .compte-nom { font-size: .78rem; }
    .entete-equipe .compte-bas .compte-nom .badge { display: none; }
    .menu-bascule { display: inline-flex; order: 3; }

    /* Sur petit écran, le menu n'est plus dans le bandeau vert : c'est une carte
       posée sous l'en-tête. Elle prend donc les couleurs de la carte, et surtout
       PAS le crème du bandeau — dont les titres héritaient, ce qui donnait du
       texte crème sur fond blanc (contraste mesuré : 1,08 — illisible). */
    .entete-site nav, .entete-equipe nav {
        color: var(--couleur-texte);
        position: absolute;
        top: calc(100% + .45rem);
        left: 0;
        right: 0;
        z-index: 90;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
        padding: .35rem .5rem .7rem;
        background: var(--couleur-fond-carte);
        border: 1px solid var(--couleur-bordure);
        border-radius: var(--rayon-carte);
        box-shadow: 0 .9rem 2rem rgba(0, 0, 0, .18);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-.5rem);
        transition: opacity .25s ease, transform .25s ease, visibility .25s;
    }

    .entete-site nav.est-ouvert, .entete-equipe nav.est-ouvert {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .entete-site nav > a, .entete-equipe nav > a {
        padding: .85rem .6rem;
        font-size: .95rem;
        color: var(--couleur-texte);
        border-bottom: 1px solid var(--couleur-bordure);
    }

    .menu-groupe > .menu-titre {
        padding: .85rem .6rem;
        font-size: .95rem;
        justify-content: space-between;
        color: var(--couleur-texte);
        opacity: 1;
        border-bottom: 1px solid var(--couleur-bordure);
    }

    .menu-liste {
        position: static;
        display: none;
        min-width: 0;
        padding: 0 0 .35rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .menu-groupe.est-deplie > .menu-titre,
    .menu-groupe.actif > .menu-titre {
        color: var(--couleur-accent);
        border-bottom-color: var(--couleur-accent);
    }

    /* Tous les liens du panneau portent la couleur du texte de carte, entrée
       courante comprise : le vert prairie du bandeau ne se lit pas sur fond
       clair. La règle est répétée ici parce que `.entete-site nav a` (posée pour
       le bandeau vert) est plus précise que `.menu-liste a`. */
    .entete-site nav a, .entete-equipe nav a {
        color: var(--couleur-texte);
        opacity: 1;
    }

    .entete-site nav a.actif, .entete-equipe nav a.actif {
        color: var(--couleur-accent);
        border-bottom-color: var(--couleur-accent);
    }

    /* Deux détails posés pour le bandeau sombre, à reprendre sur la carte : le
       lien « Espace équipe » (blanc translucide) et les pastilles de compteur
       (blanches), invisibles sur un fond clair. */
    .entete-site nav > a.lien-equipe {
        color: var(--couleur-texte-doux);
        /* Dans le panneau dépliant, « tout à droite » n'existe pas : l'accès de
           l'équipe se détache en fin de liste, sous forme de pastille. */
        margin: .9rem .6rem .3rem;
        padding: .5rem .9rem;
        border: 1px solid var(--couleur-bordure);
        border-radius: 999px;
        align-self: flex-start;
        opacity: 1;
    }

    .menu-groupe.est-deplie .menu-liste { display: flex; }
    .menu-groupe.est-deplie > .menu-titre::after { transform: rotate(180deg); opacity: 1; }
    .menu-liste a { padding: .7rem .6rem .7rem 1.5rem; font-size: .9rem; }
}

/* Grand écran : groupes au survol, clavier compris. */
@media (min-width: 1119px) {
    .menu-bascule { display: none; }

    .menu-liste {
        position: absolute;
        top: calc(100% + .45rem);
        left: 0;
        z-index: 60;
        display: flex;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-.4rem);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }

    .menu-groupe:hover .menu-liste,
    .menu-groupe:focus-within .menu-liste {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    /* Grand écran : le titre est posé sur le bandeau vert forêt. La couleur
       d'accent du panneau clair y est identique au fond — au survol, le mot
       disparaissait (contraste 1,00). Le vert prairie reste lisible, en clair
       comme en sombre. */
    .menu-groupe:hover > .menu-titre,
    .menu-groupe:focus-within > .menu-titre { color: var(--couleur-accent-vif); }

    .menu-groupe:hover > .menu-titre::after,
    .menu-groupe:focus-within > .menu-titre::after { transform: rotate(180deg); opacity: 1; }

    /* Titre de sous-ensemble dans une liste dépliante du backoffice (« Ajout »
   sous « Paramètres ») : c'est ce qui fait le sous-menu. */
.menu-liste .menu-sous-titre {
    margin-top: .3rem;
    padding: .5rem .6rem .2rem;
    border-top: 1px solid var(--couleur-bordure);
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--couleur-texte-doux);
}

/* L'accès de l'équipe n'est pas une rubrique publique : il est poussé tout à
       droite du bandeau, derrière un trait de séparation (la barre occupe toute
       la largeur restante, d'où le `flex: 1`). */
    .entete-site nav { flex: 1; }

    /* La barre est presque pleine : on resserre légèrement les rubriques pour
       que l'accès de l'équipe tienne sur la même ligne, tout à droite. */
    .entete-site nav { gap: .9rem; }

    .entete-site nav a { font-size: .86rem; }

    .entete-site nav > a.lien-equipe {
        margin-left: auto;
        /* Une pastille plutôt qu'un trait : posé seul en fin de barre, le trait
           vertical faisait penser à un reste de séparation. */
        padding: .3rem .85rem;
        border: 1px solid currentColor;
        border-radius: 999px;
        opacity: .8;
    }

    .entete-site nav > a.lien-equipe:hover { opacity: 1; }
}

/* ==========================================================================
   CALENDRIER MENSUEL (planning bénévoles, rendez-vous vétérinaires)
   Inspiration Google Agenda : grille 7 colonnes, aujourd'hui mis en avant,
   un code couleur par type d'activité.
   ========================================================================== */

.calendrier {
    border: 1px solid var(--bordure);
    border-radius: .7rem;
    overflow: hidden;
    background: var(--couleur-fond-carte);
}

.calendrier-barre {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bordure);
    background: var(--couleur-fond-douce);
}

.calendrier-navigation { display: flex; gap: .3rem; }
.calendrier-titre { margin: 0; font-size: 1.05rem; flex: 1; text-align: center; }
.calendrier-compteur { margin: 0; font-size: .8rem; color: var(--texte-doux); }

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

.calendrier-entete-jour {
    padding: .5rem .3rem; text-align: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--texte-doux);
    background: var(--couleur-fond-douce);
    border-bottom: 1px solid var(--bordure);
}
.calendrier-entete-jour.weekend { background: var(--couleur-fond-douce); color: var(--couleur-texte-doux); }

.calendrier-case {
    min-height: 6.5rem;
    padding: .3rem .35rem .5rem;
    border-right: 1px solid var(--bordure);
    border-bottom: 1px solid var(--bordure);
    display: flex; flex-direction: column; gap: .18rem;
    overflow: hidden;
}
.calendrier-grille > .calendrier-case:nth-child(7n) { border-right: none; }
.calendrier-case.hors-mois { background: var(--couleur-fond-douce); }
.calendrier-case.hors-mois .calendrier-numero { color: var(--couleur-texte-doux); opacity: .75; font-weight: 500; }
.calendrier-case.weekend { background: var(--couleur-ligne-paire); }
.calendrier-case.hors-mois.weekend { background: var(--couleur-fond-douce); }
.calendrier-case.aujourdhui { background: var(--couleur-survol); box-shadow: inset 0 0 0 2px var(--couleur-accent-vif); }

.calendrier-numero {
    display: flex; align-items: baseline; gap: .3rem;
    font-size: .78rem; font-weight: 600; color: var(--texte-doux);
    margin-bottom: .05rem;
}
.calendrier-case.aujourdhui .calendrier-numero { color: var(--couleur-accent); }
.calendrier-marqueur { font-size: .58rem; text-transform: uppercase; letter-spacing: .05em; }

.calendrier-evenement {
    display: block; font-size: .7rem; line-height: 1.3;
    padding: .16rem .32rem;
    border-radius: .25rem;
    border-left: 3px solid #6B7570;
    background: var(--couleur-fond-douce); color: var(--couleur-texte);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calendrier-evenement:hover { filter: brightness(.95); text-decoration: none; }
.calendrier-heure { font-weight: 700; margin-right: .12rem; }

.calendrier-plus {
    font-size: .67rem; color: var(--texte-doux);
    text-decoration: none; padding-left: .12rem;
}
.calendrier-plus:hover { text-decoration: underline; }

.calendrier-legende {
    display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
    padding: .7rem 1rem;
    border-top: 1px solid var(--bordure);
    background: var(--couleur-fond-douce);
    font-size: .78rem; color: var(--texte-doux);
}
.calendrier-legende-item { display: inline-flex; align-items: center; gap: .4rem; }
.pastille { width: .7rem; height: .7rem; border-radius: .2rem; background: #546E7A; display: inline-block; flex: none; }

/* Étiquette d'alerte : une personne blacklistée se repère d'un coup d'œil. */
.etiquette-alerte {
    display: inline-block; vertical-align: middle;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .12rem .45rem; border-radius: .25rem;
    background: var(--couleur-alerte-fond); color: var(--couleur-alerte-texte);
    border: 1px solid var(--couleur-alerte-bordure);
}

/* Étiquette de statut (rendez-vous vétérinaires) */
.etiquette {
    display: inline-block; vertical-align: middle;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    padding: .12rem .42rem; border-radius: .25rem;
    background: #E9ECE6; color: #333B36;
}
.etiquette[data-statut="planifie"] { background: #E3EDF6; color: #1B3D58; }
.etiquette[data-statut="realise"] { background: #E7F1DA; color: #2A4218; }
.etiquette[data-statut="annule"] { background: #E9E5DE; color: #55503F; }

/* Couleurs par type de créneau */
.calendrier-evenement[data-type="promenade"] { border-left-color: #4E7F2E; background: #E7F1DA; color: #2A4218; }
.pastille[data-type="promenade"] { background: #2E7D32; }
.calendrier-evenement[data-type="nettoyage"] { border-left-color: #2C5F8A; background: #E3EDF6; color: #1B3D58; }
.pastille[data-type="nettoyage"] { background: #1565C0; }
.calendrier-evenement[data-type="soin"] { border-left-color: #6A3E7A; background: #EFE8F3; color: #3F2649; }
.pastille[data-type="soin"] { background: #6A1B9A; }
.calendrier-evenement[data-type="accueil_public"] { border-left-color: #B4611C; background: #FAEADC; color: #6B390E; }
.pastille[data-type="accueil_public"] { background: #EF6C00; }
.calendrier-evenement[data-type="transport"] { border-left-color: #1F6B66; background: #DEF0EE; color: #123B38; }
.pastille[data-type="transport"] { background: #00838F; }
.calendrier-evenement[data-type="autre"] { border-left-color: #6B7570; background: #E9ECE6; color: #333B36; }
.pastille[data-type="autre"] { background: #546E7A; }

/* Couleurs par statut de rendez-vous vétérinaire */
.calendrier-evenement[data-type="planifie"] { border-left-color: #2C5F8A; background: #E3EDF6; color: #1B3D58; }
.pastille[data-type="planifie"] { background: #1565C0; }
.calendrier-evenement[data-type="realise"] { border-left-color: #4E7F2E; background: #E7F1DA; color: #2A4218; }
.pastille[data-type="realise"] { background: #2E7D32; }
.calendrier-evenement[data-type="annule"] { border-left-color: #8A8375; background: #E9E5DE; color: #55503F; text-decoration: line-through; }
.pastille[data-type="annule"] { background: #9AA39D; }

/* Vue semaine : axe horaire à gauche, une colonne par jour */
.semaine { overflow-x: auto; }

.semaine-entetes {
    display: grid; grid-template-columns: 4.5rem repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--bordure); background: var(--couleur-fond-douce);
}
.semaine-coin { border-right: 1px solid var(--bordure); }
.semaine-entete {
    padding: .4rem .3rem; text-align: center;
    border-right: 1px solid var(--bordure);
}
.semaine-entete:last-child { border-right: none; }
.semaine-entete.weekend { background: var(--couleur-fond-douce); }
.semaine-entete.aujourdhui { background: var(--couleur-survol); }
.semaine-jour-nom {
    display: block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux);
}
.semaine-entete.aujourdhui .semaine-jour-nom { color: var(--couleur-accent); }
.semaine-jour-numero { display: block; font-size: .98rem; font-weight: 700; color: var(--couleur-texte); }

.semaine-corps { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); }
.semaine-heures { border-right: 1px solid var(--bordure); background: var(--couleur-fond-douce); }
.semaine-heure {
    height: var(--hauteur-heure);
    padding-right: .5rem; text-align: right;
    font-size: .67rem; color: var(--texte-doux);
}

.semaine-colonnes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.semaine-colonne {
    position: relative;
    border-right: 1px solid var(--bordure);
    background-image: linear-gradient(to bottom, var(--bordure) 1px, transparent 1px);
    background-size: 100% var(--hauteur-heure);
}
.semaine-colonne:last-child { border-right: none; }
.semaine-colonne.weekend { background-color: var(--couleur-ligne-paire); }
.semaine-colonne.aujourdhui { background-color: var(--couleur-survol); }

.semaine-evenement {
    position: absolute;
    display: flex; flex-direction: column; overflow: hidden;
    padding: .18rem .32rem;
    font-size: .68rem; line-height: 1.25;
    border-radius: .25rem; border-left: 3px solid #6B7570;
    background: var(--couleur-fond-douce); color: var(--couleur-texte); text-decoration: none;
}
.semaine-evenement:hover { filter: brightness(.95); text-decoration: none; }
.semaine-evenement-heure { font-weight: 700; }
.semaine-evenement-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.semaine-evenement[data-type="promenade"] { border-left-color: #4E7F2E; background: #E7F1DA; color: #2A4218; }
.semaine-evenement[data-type="nettoyage"] { border-left-color: #2C5F8A; background: #E3EDF6; color: #1B3D58; }
.semaine-evenement[data-type="soin"] { border-left-color: #6A3E7A; background: #EFE8F3; color: #3F2649; }
.semaine-evenement[data-type="accueil_public"] { border-left-color: #B4611C; background: #FAEADC; color: #6B390E; }
.semaine-evenement[data-type="transport"] { border-left-color: #1F6B66; background: #DEF0EE; color: #123B38; }
.semaine-evenement[data-type="autre"] { border-left-color: #6B7570; background: #E9ECE6; color: #333B36; }
.semaine-evenement[data-type="planifie"] { border-left-color: #2C5F8A; background: #E3EDF6; color: #1B3D58; }
.semaine-evenement[data-type="realise"] { border-left-color: #4E7F2E; background: #E7F1DA; color: #2A4218; }
.semaine-evenement[data-type="annule"] { border-left-color: #8A8375; background: #E9E5DE; color: #55503F; }

/* Barre d'outils du calendrier : bascule de vue + sélecteur de période */
.calendrier-outils { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.calendrier-bascule { display: inline-flex; border: 1px solid var(--bordure); border-radius: .45rem; overflow: hidden; }
.calendrier-bascule a {
    padding: .3rem .8rem; font-size: .8rem; font-weight: 600;
    color: var(--texte-doux); text-decoration: none; background: var(--couleur-fond-carte);
}
.calendrier-bascule a + a { border-left: 1px solid var(--bordure); }
.calendrier-bascule a:hover { background: var(--couleur-survol); text-decoration: none; }
.calendrier-bascule a.actif { background: #1B5E20; color: #fff; }
.calendrier-choix { display: inline-flex; align-items: center; gap: .4rem; }
.calendrier-choix .champ-inline { font-size: .78rem; color: var(--texte-doux); }
.calendrier-choix input { font: inherit; font-size: .8rem; padding: .25rem .4rem; border: 1px solid var(--bordure); border-radius: .35rem; }

/* Bandeau de places (ex. « 1/2 ») dans une pastille d'événement */
.places { font-weight: 700; opacity: .85; margin-left: .15rem; }
.places.complet { color: #B71C1C; opacity: 1; }

/* États vus par le bénévole : déjà inscrit / complet (non sélectionnable) */
.calendrier-evenement[data-type="participe"],
.semaine-evenement[data-type="participe"] { border-left-color: #4E7F2E; background: #D8EAC2; color: #2A4218; font-weight: 600; }
.pastille[data-type="participe"] { background: #1B5E20; }

.calendrier-evenement[data-type="complet"],
.semaine-evenement[data-type="complet"] { border-left-color: #A79F8E; background: #EDEAE3; color: #6B6455; cursor: not-allowed; }
.pastille[data-type="complet"] { background: #B0BEC5; }

.calendrier-evenement[data-type="libre"] { border-left-color: #4E7F2E; background: #EEF4E4; color: #2A4218; }
.pastille[data-type="libre"] { background: #66BB6A; }
.calendrier-evenement[data-type="libre"]:hover { background: #D8EAC2; }

/* Panneau encadré : regroupe un formulaire et son explication */
/* Bloc de texte technique : aperçu d'une publication, journal de simulation. */
.bloc-technique {
    white-space: pre-wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    line-height: 1.5;
    background: rgba(127, 127, 127, .08);
    border-radius: .4rem;
    padding: 1rem;
    overflow-x: auto;
}

/* Barres de statistiques : longueur proportionnelle, lisible sur un tableur
   comme sur une tablette. */
.barre {
    display: inline-block;
    height: .7rem;
    min-width: 2px;
    vertical-align: middle;
    border-radius: .35rem;
    background: var(--couleur-principale, #2f6f4f);
    margin-right: .4rem;
}

.barre.verte {
    background: #4caf7d;
}

.panneau {
    background: var(--couleur-fond-carte); border: 1px solid var(--bordure); border-radius: .6rem;
    padding: 1.5rem; max-width: 60rem;
}
.panneau > h2:first-child { margin-top: 0; }
.panneau .formulaire { max-width: none; }

/* Message d'avertissement (configuration incomplète) */
.message.avertissement { background: #FFF8E1; border: 1px solid #FFE082; color: #7A5B00; }

/* Trace technique repliable : sert au diagnostic d'envoi de mail */
.trace-technique { margin: .5rem 0 1.5rem; }
.trace-technique summary { cursor: pointer; font-size: .85rem; }
.trace-technique pre {
    background: var(--couleur-ligne-paire); border: 1px solid var(--bordure); border-radius: .4rem;
    padding: .75rem; margin-top: .5rem; overflow-x: auto;
    font-size: .72rem; line-height: 1.5; max-height: 22rem;
}

/* Bandeau de consentement aux cookies (site public) */
.cookies-bandeau {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
    background: var(--couleur-fond-carte); border-top: 1px solid var(--bordure);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .08);
    padding: 1.1rem 1.25rem; max-height: 90vh; overflow-y: auto;
}
.cookies-bandeau.detaille { top: 0; max-height: 100vh; }
.cookies-form { max-width: 68rem; margin: 0 auto; }
.cookies-texte strong { display: block; font-size: 1rem; margin-bottom: .3rem; }
.cookies-texte p { margin: 0 0 .35rem; font-size: .88rem; line-height: 1.5; opacity: .85; }
.cookies-rappel { font-size: .8rem; color: var(--couleur-texte-doux); }

.cookies-categories { margin: 1rem 0 .25rem; display: grid; gap: .5rem; }
.cookies-categorie {
    display: flex; gap: .7rem; align-items: flex-start;
    border: 1px solid var(--bordure); border-radius: .5rem; padding: .7rem .85rem;
    cursor: pointer;
}
.cookies-categorie:hover { background: var(--couleur-fond-douce); }
.cookies-categorie input { width: auto; margin-top: .25rem; flex: none; }
.cookies-categorie strong { display: block; font-size: .88rem; }
.cookies-categorie em { display: block; font-style: normal; font-size: .79rem; color: var(--couleur-texte-doux); line-height: 1.45; }

.cookies-actions {
    display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; align-items: center;
}
.cookies-actions .bouton { margin: 0; }

/* Lien permanent de gestion, dans le pied de page */
.lien-cookies { font-size: .82rem; }

@media (max-width: 760px) {
    .cookies-actions { flex-direction: column; align-items: stretch; }
    .cookies-actions .bouton { text-align: center; justify-content: center; }
}

/* Sur petit écran : on garde la lisibilité en laissant défiler */
@media (max-width: 760px) {
    .calendrier { overflow-x: auto; }
    .calendrier-grille, .calendrier-barre, .calendrier-legende { min-width: 40rem; }
    .calendrier-case { min-height: 5.5rem; }
    .semaine-entetes, .semaine-corps { min-width: 46rem; }
}

.bandeau-role {
    max-width: 70rem; margin: 1.25rem auto 0;
    padding: .85rem 1.15rem; border-radius: .6rem;
    background: #E8F3EC; color: #14512f; font-size: .9rem; line-height: 1.5;
    border-left: 4px solid var(--couleur-accent-vif);
}

.contenu-backoffice { padding-top: .5rem; }

.pied-equipe {
    margin: 3.5rem calc(50% - 50vw) 0;
    padding: 2rem calc(50vw - 50% + 1.5rem) 1.5rem;
    background: #0E3322; color: rgba(255, 255, 255, .8); font-size: .88rem;
}
.pied-equipe-haut {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1.5rem; flex-wrap: wrap;
}
.pied-equipe-haut strong { color: #fff; margin-right: .6rem; }
.pied-equipe-haut span { opacity: .7; }
.pied-equipe a { color: #fff; margin-left: 1.1rem; }
.pied-equipe a:first-child { margin-left: 0; }
.pied-equipe-bas {
    margin: 1.25rem 0 0; padding-top: 1rem; opacity: .65;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.colonnes-profil {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 2.5rem; align-items: start; margin-top: 1.5rem;
}
.colonnes-profil h2 { font-size: 1.1rem; margin: 0 0 1rem; }

/* -- Pied de page complet -- */
.pied-site {
    margin: 3.5rem calc(50% - 50vw) 0;
    padding: 3rem calc(50vw - 50% + 1.5rem) 1.5rem;
    background: #0E3322; color: rgba(255,255,255,.82); font-size: .92rem;
}
/* Un lien dans une section à fond vert forêt ne peut pas garder la couleur
   d'accent : elle est identique au fond (contraste 1). */
/* `:not(.bouton)` : un bouton posé là a déjà ses propres couleurs. */
.section-large.fond-vert a:not(.bouton) { color: var(--couleur-accent-vif); }

.pied-site a:not(.bouton) { color: #fff; text-decoration: none; }
/* Le bouton du pied de page vit sur un fond vert forêt : ni la couleur d'accent
   (identique au fond en thème clair), ni le blanc sur vert clair (thème sombre)
   ne conviennent. Il prend donc le vert prairie, avec un texte sombre. */
.pied-site .bouton { background-color: var(--couleur-accent-vif); color: #0E3322; }
.pied-site a:hover { text-decoration: underline; }
.pied-site .appel { text-align: center; margin-bottom: 2.5rem; }
.pied-site .appel h2 { color: #fff; font-size: 1.5rem; font-weight: 600; margin: 0 0 .4rem; }
.pied-site .appel p { margin: 0 0 1.3rem; opacity: .8; }
.pied-site .colonnes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.15);
}
.pied-site .colonne h3 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
    color: #9BE85C; margin: 0 0 .9rem; font-weight: 700;
}
.pied-site .colonne ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.pied-site .colonne .contact-ligne { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .6rem; }
.pied-site .colonne .contact-ligne svg { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; margin-top: .15rem; opacity: .85; }
.pied-site .bas-de-page {
    padding-top: 1.25rem; display: flex; justify-content: space-between;
    align-items: center; gap: 1rem; flex-wrap: wrap; font-size: .82rem; opacity: .75;
}
.pied-site .bas-de-page nav { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

@media (prefers-color-scheme: dark) {
    .carte-action, .temoignage, .carte-actu { box-shadow: var(--ombre-carte); }
    .hero { background: linear-gradient(135deg, #0a2418 0%, #103d24 55%, #16512f 100%); }
    .section-large.fond-vert, .pied-site { background: #0a2418; }
}

/* ------------------------------------------------------------------ */
/* Main courante (backoffice) et mode tablette                        */
/* ------------------------------------------------------------------ */
.liste-mc { display: grid; gap: .7rem; }

/* Liste courte de fiches existantes (création d'une fiche animal) : le lien
   d'abord, la précision en gris à côté. */
.liste-simple {
    margin: .6rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .35rem;
}

.liste-simple li {
    padding: .5rem .7rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: .4rem;
    background-color: var(--couleur-fond-douce);
}

.liste-simple a { font-weight: 600; }

.carte-mc {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--couleur-fond-douce); border-radius: var(--rayon-carte);
    padding: .9rem 1.1rem; margin: 0;
}
.carte-mc-texte { flex: 1 1 14rem; display: grid; gap: .2rem; min-width: 12rem; }
.carte-mc-valider { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.carte-mc-annuler { display: flex; align-items: center; }
.carte-mc-qui { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.carte-mc-qui span { color: var(--couleur-texte-doux); }
.carte-mc-qui select { min-width: 12rem; }

.pagination { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.pagination a, .pagination strong { padding: .2rem .6rem; border-radius: 6px; }
.pagination strong { background: var(--couleur-accent-pale); }

/* Mode tablette : gros boutons, lisible à bout de bras, utilisable avec des
   gants. C'est l'affichage du compte `main_courante` laissé sur la tablette. */
.mode-tablette { font-size: 1.05rem; }
.mode-tablette h1 { font-size: 1.6rem; }
.mode-tablette .carte-mc { flex-direction: column; align-items: stretch; padding: 1.2rem; gap: .9rem; }
.mode-tablette .carte-mc strong { font-size: 1.2rem; }
.mode-tablette .carte-mc-valider { flex-direction: column; align-items: stretch; }
.mode-tablette .carte-mc-annuler { display: none; }
.mode-tablette .carte-mc .bouton { width: 100%; padding: 1rem 1.4rem; font-size: 1.05rem; }
.mode-tablette .carte-mc-qui { flex-direction: column; align-items: stretch; }
.mode-tablette .carte-mc-qui select { width: 100%; min-height: 3rem; font-size: 1.05rem; }
.mode-tablette .formulaire { max-width: none; }
.mode-tablette .formulaire textarea { min-height: 8rem; font-size: 1.05rem; }
.mode-tablette table.donnees th, .mode-tablette table.donnees td { padding: .7rem .6rem; }

/* La tablette n'affiche que la main courante : on masque ce qui n'a pas de
   sens pour elle (menu déjà vide, pied de page allégé). */
.mode-tablette .pied-equipe { display: none; }

/* Courbe de poids (fiche santé) : un SVG engendré par le serveur, sans
   bibliothèque externe — la condition pour tenir sur un mutualisé. */
.courbe-poids {
    display: block; width: 100%; height: auto; max-height: 260px;
    margin: 1rem 0 .5rem; padding: .5rem; background: var(--couleur-fond-douce);
    border-radius: var(--rayon-carte); color: var(--couleur-accent);
    overflow: visible;
}
.courbe-poids text { fill: var(--couleur-texte-doux); }

/* En-tête d'une fiche animal : où en est l'animal (bandeau) et sa photo, avant
   le formulaire — on doit pouvoir répondre « il est là, à quoi il ressemble »
   sans rien ouvrir d'autre. */
.fiche-entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 1.25rem; margin-bottom: 1.5rem; }
.fiche-entete-texte { flex: 1 1 22rem; min-width: 0; }
.fiche-entete h1 { margin-bottom: .6rem; }

.etat-presence { display: inline-flex; align-items: center; gap: .55rem; margin: 0;
    padding: .5rem 1rem; border-radius: 999px; font-size: .95rem; font-weight: 600; }
.etat-presence .pastille { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.etat-presence.refuge { background: #d1fae5; color: #047857; }
.etat-presence.fourriere { background: #fef3c7; color: #92400e; }
.etat-presence.pension { background: #ede9fe; color: #5b21b6; }
.etat-presence.famille { background: #e0f2fe; color: #075985; }
.etat-presence.sorti { background: var(--couleur-fond-douce); color: var(--couleur-texte-doux); font-weight: 500; }

.fiche-photo { margin: 0; flex: 0 0 auto; text-align: center; }
.fiche-photo img { display: block; width: 190px; height: 190px; object-fit: cover;
    border-radius: var(--rayon-carte); border: 1px solid var(--couleur-bordure);
    background: var(--couleur-fond-douce); }
.fiche-photo figcaption { margin-top: .4rem; font-size: .78rem; color: var(--couleur-texte-doux); }
.fiche-sans-photo { margin: 0; flex: 0 0 auto; }

/* Raccourcis d'une fiche animal (photos, santé, documents, rendez-vous) : des
   boutons alignés, qui se replient sur téléphone. */
.actions-fiche { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem; }

/* Lecture d'une puce : un lecteur USB ou Bluetooth écrit le numéro comme un
   clavier. Le champ de lecture est visuellement à part du champ de saisie, et
   l'état de la lecture s'affiche juste en dessous (en attente, lue, incomplète). */
.lecture-puce { background: var(--couleur-accent-pale); border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte); padding: 1rem 1.1rem .6rem; margin-bottom: 1.25rem; }
.lecture-puce-champ { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.lecture-puce-champ input { flex: 1 1 12rem; min-width: 0; font-variant-numeric: tabular-nums; }
.etat-lecture { margin: .5rem 0 .4rem; font-size: .85rem; color: var(--couleur-texte-doux); }
.etat-lecture.attente { color: var(--couleur-accent); font-weight: 600; }
.etat-lecture.ok { color: var(--couleur-accent); font-weight: 600; }
.etat-lecture.avertissement { color: #92400e; font-weight: 600; }

/* Cadre I-CAD (fiche animal, et invitation quand l'animal n'est pas en base) :
   le numéro de puce est prêt à copier pour le coller sur le site du fichier
   national, dans un autre onglet. */
.recherche-icad { background: var(--couleur-accent-pale); border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte); padding: 1rem 1.1rem .75rem; margin-top: 1.25rem; }
.recherche-icad h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.numero-puce { margin: .4rem 0 .8rem; }
.numero-puce code { font-size: 1.1rem; font-weight: 700; letter-spacing: .05em;
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton); padding: .3rem .55rem; user-select: all; }

/* Propriétaire d'une fiche animal : pas de liste déroulante de plusieurs
   milliers d'entrées — on cherche par nom, on choisit entre les homonymes. */
.proprietaire-champ { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    background: var(--couleur-fond-douce); padding: .75rem .9rem .5rem; }
.proprietaire-connu { font-weight: 600; }
.proprietaire-recherche { margin-top: .6rem; }
.proprietaire-bouton { flex: 0 0 auto; }
.proprietaire-candidats { display: grid; gap: .5rem; margin: .6rem 0 .4rem; }
.proprietaire-candidat { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    justify-content: space-between; background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-bouton);
    padding: .6rem .75rem; }
.proprietaire-candidat-infos { display: grid; gap: .15rem; min-width: 0; }
.proprietaire-candidat-infos strong { font-size: .95rem; }
.proprietaire-vide { background: var(--couleur-fond-carte); border: 1px dashed var(--couleur-bordure);
    border-radius: var(--rayon-bouton); padding: .8rem; margin: .6rem 0 .3rem; }
.proprietaire-vide p { margin: 0 0 .6rem; }
.proprietaire-choisi { margin: .6rem 0 .4rem; }

/* Fenêtre de création d'une fiche propriétaire (élément <dialog> natif). */
dialog.dialogue { border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    background: var(--couleur-fond-carte); color: var(--couleur-texte);
    padding: 1.25rem; max-width: 46rem; width: min(46rem, 92vw); box-shadow: var(--ombre-carte); }
dialog.dialogue::backdrop { background: rgba(14, 51, 34, .45); }
dialog.dialogue h2 { margin-top: 0; }

/* Une fenêtre de résultats est plus large : des tableaux à six colonnes se
   lisent mal dans la largeur d'un formulaire. La règle générique ci-dessus
   (`dialog.dialogue`) est plus spécifique que `.dialogue-large` : la variante
   se réécrit donc ici, au même niveau de spécificité. */
dialog.dialogue-large { width: min(74rem, 94vw); max-width: min(74rem, 94vw); }

/* Choix de l'accueil d'une nouvelle fiche animal : trois cartes cliquables,
   assez grandes pour être visées au doigt sur une tablette. */
.choix-activite {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin: 1.1rem 0 .6rem;
}

.carte-activite {
    flex: 1 1 13rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .9rem 1rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background: var(--couleur-fond);
    border: 2px solid var(--couleur-bordure);
    border-radius: .6rem;
    cursor: pointer;
}

.carte-activite:hover,
.carte-activite:focus-visible {
    border-color: var(--couleur-accent);
    background: var(--couleur-accent-pale);
}

.carte-activite strong {
    font-size: 1.05rem;
}

.carte-activite span {
    font-size: .88rem;
    color: var(--couleur-texte-doux);
}

.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--couleur-accent);
    text-decoration: underline;
    cursor: pointer;
}
.obligatoire { color: #b91c1c; }

/* Masquer par l'attribut `hidden` doit l'emporter sur la mise en page des
   classes : sans cela une « ligne » de champs (display: flex) restait affichée
   alors que le script venait de la cacher. */
[hidden] { display: none !important; }

/* Rubriques repliables : une fiche complète devient longue, chaque partie peut
   se replier pour ne laisser que son titre. Le repli passe par une classe — et
   non par l'attribut `hidden`, qui sert déjà aux rubriques liées à une activité,
   sans quoi les deux mécanismes se contrediraient. */
.repliable {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.repliable::before {
    content: '▾';
    font-size: .8em;
    line-height: 1;
    color: #6b7280;
}

.repliable[data-replie="1"]::before { content: '▸'; }

.repliable[data-replie="1"] { opacity: .7; }

.repliable:hover, .repliable:focus-visible { color: var(--couleur-primaire, #1f6f43); }

.repliable:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.rubrique-repliee { display: none !important; }

.barre-rubriques {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 .75rem;
}

/* Accueil de l'équipe : l'encadré de lecture des puces, en haut de page. */
.lecture-puce-accueil { margin-bottom: 1.5rem; }
.lecture-puce-accueil .champ > label { font-weight: 600; }


/* =========================================================================
   Écran de la tablette (tablette.php)
   Des carrés que l'on touche du doigt, à bout de bras, sans jamais quitter
   l'écran. Rien ne dépend du survol, tout se fait au clic : c'est une tablette
   Android tenue à la main, souvent avec des gants.
   ========================================================================= */
.tablette-ecran { padding: .25rem 0 2rem; }

.carres-tablette {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.carre-tablette {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    min-height: 9rem;
    padding: 1.4rem 1.5rem;
    border: 2px solid var(--couleur-bordure);
    border-radius: 1rem;
    background-color: var(--couleur-fond-carte);
    color: var(--couleur-texte);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.carre-tablette:hover,
.carre-tablette:focus-visible {
    border-color: var(--couleur-accent);
    background-color: var(--couleur-survol);
}

.carre-tablette-nom { font-size: 1.45rem; font-weight: 700; }
.carre-tablette-compte { font-size: 1rem; color: var(--couleur-texte-doux); }

.carre-tablette.est-vide { border-style: dashed; }
.carre-tablette.est-vide .carre-tablette-compte { color: var(--couleur-accent); }

.tablette-actions-basses { margin-top: 1rem; }
.carre-note { min-height: 6rem; }

.tablette-total { margin: 1.2rem 0 0; color: var(--couleur-texte-doux); font-size: .95rem; }
.tablette-vide { color: var(--couleur-texte-doux); }

/* Liste des tâches d'une catégorie : une tâche = un grand bouton. */
.liste-taches {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.tache-ligne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 3.6rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: .7rem;
    background-color: var(--couleur-fond-carte);
    color: var(--couleur-texte);
    font: inherit;
    font-size: 1.05rem;
    text-align: left;
    cursor: pointer;
}

.tache-ligne:hover,
.tache-ligne:focus-visible { border-color: var(--couleur-accent); }
.tache-ligne-libelle { font-weight: 600; }
.tache-ligne-meta { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--couleur-texte-doux); }
.tache-ligne.est-en-attente { border-style: dashed; }

.pastille-attente {
    padding: .15rem .55rem;
    border-radius: 1rem;
    background-color: var(--couleur-fond-douce);
    font-size: .82rem;
}

/* Fenêtre d'une tâche : les directives bien lisibles, puis les deux gestes. */
#dialogue-categorie,
#dialogue-tache { width: min(48rem, calc(100vw - 2rem)); }

.tache-meta { margin: 0; color: var(--couleur-texte-doux); font-size: .9rem; }
.tache-sous-titre { margin: 1rem 0 .35rem; font-size: 1rem; }
.tache-directives { margin: 0 0 1.3rem; font-size: 1.05rem; line-height: 1.55; }

.tache-gestes { display: flex; flex-wrap: wrap; gap: .7rem; }
.tache-gestes .bouton { min-height: 3.2rem; padding: .8rem 1.4rem; font-size: 1.05rem; }

.tache-question { margin: 0; font-size: 1.1rem; font-weight: 600; }
.tache-rappel {
    margin: .6rem 0 1.3rem;
    padding: .8rem 1rem;
    border-left: .3rem solid var(--couleur-accent);
    border-radius: .4rem;
    background-color: var(--couleur-fond-douce);
    font-size: 1.15rem;
}

/* La note libre s'ouvre en HAUT de l'écran : le clavier tactile de la tablette
   occupe le bas, la zone de saisie doit rester visible. Les hauteurs en dvh
   (viewport réel, clavier déduit) gardent les boutons accessibles pendant la
   saisie ; les règles en vh ci-dessus servent de repli. */
.dialogue-haut { margin-top: 1.2rem; margin-bottom: auto; }

.dialogue-haut,
.dialogue-haut .dialogue-corps { max-height: calc(100dvh - 3rem); }
.dialogue-haut .dialogue-corps { max-height: calc(100dvh - 9rem); }

/* Téléphone : un carré par ligne, on garde de la place pour le doigt. */
@media (max-width: 700px) {
    .carres-tablette { grid-template-columns: 1fr; }
    .carre-tablette { min-height: 7rem; }
    .carre-tablette-nom { font-size: 1.25rem; }
}


/* -------------------------------------------------------------------------
   Interrupteur « À notifier » et note de la tablette
   Le vrai champ reste une case à cocher (clavier, lecteurs d'écran) : le
   curseur et le mot d'état ne sont que son habillage.
   ------------------------------------------------------------------------- */
.notifier-champ { margin-top: 1rem; }

/* Plus précis que `.formulaire label`, qui imposerait `display: block` et
   empilerait le curseur et la mention. */
.formulaire .interrupteur,
.interrupteur {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    cursor: pointer;
    font-weight: 600;
}

.interrupteur input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.interrupteur-curseur {
    position: relative;
    flex: none;
    width: 3.4rem;
    height: 1.9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 1rem;
    background-color: var(--couleur-fond-douce);
    transition: background-color .2s;
}

.interrupteur-curseur::after {
    content: '';
    position: absolute;
    top: .18rem;
    left: .2rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background-color: var(--couleur-fond-carte);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .2s, background-color .2s;
}

.interrupteur input:checked + .interrupteur-curseur {
    background-color: var(--couleur-accent);
    border-color: var(--couleur-accent);
}

.interrupteur input:checked + .interrupteur-curseur::after {
    transform: translateX(1.45rem);
    background-color: var(--couleur-sur-accent);
}

.interrupteur input:focus-visible + .interrupteur-curseur {
    outline: 3px solid var(--couleur-accent-vif);
    outline-offset: 2px;
}

.interrupteur-mention { font-size: 1.05rem; }
.interrupteur input:checked ~ .interrupteur-mention { color: var(--couleur-accent); }

.interrupteur-etat::after { content: 'Désactivé'; color: var(--couleur-texte-doux); font-size: .9rem; font-weight: 500; }
.interrupteur input:checked ~ .interrupteur-etat::after { content: 'Activé'; color: var(--couleur-accent); font-weight: 600; }

/* La zone de texte de la note libre : large, on écrit avec les doigts. */
#note-tablette { min-height: 14rem; }

/* Note signalée, sur la page « Aujourd'hui ». */
.carte-note-tablette { border-left: .35rem solid var(--couleur-accent); }


/* -------------------------------------------------------------------------
   Heure en direct et retard (écran de la tablette)
   Le mot « en retard » est écrit par la feuille de style, à partir de la seule
   classe : le rouge apparaît donc aussi quand le retard survient pendant que la
   page est ouverte, sans doublon avec le rendu du serveur.
   ------------------------------------------------------------------------- */
.tablette-horloge { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 1.1rem; }
.tablette-heure { font-size: 2.6rem; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tablette-jour { color: var(--couleur-texte-doux); font-size: .95rem; }

.carre-tablette.est-en-retard {
    border-color: var(--couleur-alerte-bordure);
    background-color: var(--couleur-alerte-fond);
}

.carre-tablette.est-en-retard .carre-tablette-nom { color: var(--couleur-alerte-texte); }

.carre-tablette.est-en-retard .carre-tablette-compte::after {
    content: ' · en retard';
    color: var(--couleur-alerte-texte);
    font-weight: 600;
}

.tache-ligne.est-en-retard { border-color: var(--couleur-alerte-bordure); }
.tache-ligne.est-en-retard .tache-ligne-libelle { color: var(--couleur-alerte-texte); }

.tache-ligne.est-en-retard .tache-ligne-meta::after {
    content: 'En retard';
    padding: .15rem .55rem;
    border: 1px solid var(--couleur-alerte-bordure);
    border-radius: 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--couleur-alerte-texte);
}

.tache-supprimer { border-color: var(--couleur-alerte-bordure); color: var(--couleur-alerte-texte); }

/* Sortie du mode tablette : en bas de l'écran, à droite. */
.tablette-sortie { display: flex; justify-content: flex-end; margin: 2rem 0 0; }


/* -------------------------------------------------------------------------
   Bénévoles présents (page Aujourd'hui)
   Le planning dit qui devait venir, un salarié constate qui est là.
   ------------------------------------------------------------------------- */
.panneau-presences { margin-bottom: 2rem; }

.presences-moment {
    padding: .15rem .6rem;
    border-radius: 1rem;
    background-color: var(--couleur-accent-pale);
    font-size: .85rem;
    font-weight: 600;
}

.presences-colonnes { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.presences-colonne { flex: 1 1 18rem; }

.presences-colonne h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .6rem;
    font-size: 1rem;
}

.presences-compte {
    padding: .1rem .5rem;
    border-radius: 1rem;
    background-color: var(--couleur-fond-douce);
    font-size: .85rem;
    font-weight: 600;
}

.presences-liste { display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 0; list-style: none; }

.presence-ligne {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
}

.presence-ligne-prete { border-left: 4px solid var(--couleur-accent); }
.presence-nom { flex: 1 1 auto; font-weight: 600; }
.presence-detail { color: var(--couleur-texte-doux); font-size: .9rem; }
.presence-valider, .presence-retirer { flex: 0 0 auto; }

.presence-etiquette {
    padding: .05rem .45rem;
    border-radius: 1rem;
    background-color: var(--couleur-fond-douce);
    font-size: .8rem;
}

.presences-recherche { margin-top: 1.25rem; }
.presences-recherche-rang { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.presences-recherche-rang input { flex: 1 1 14rem; max-width: 22rem; }
.presences-resultats { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.presence-resultat { width: 100%; text-align: left; }
.presences-resultat-vide { color: var(--couleur-texte-doux); }

@media (max-width: 640px) {
    .presence-ligne { flex-wrap: wrap; }
    .presence-nom { flex: 1 1 100%; }
}


/* ------------------------------------------------------------------
   Signer un geste : les personnes, puis le clavier du code.

   Des rectangles plutôt qu'une liste : sur une tablette, une case large se
   touche du premier coup. Le code est vérifié par le serveur — le navigateur
   ne connaît jamais le code de personne.
   ------------------------------------------------------------------ */
.grille-personnes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: .9rem;
    margin-top: 1rem;
}

.personne-tuile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .3rem;
    min-height: 5.5rem;
    padding: 1rem;
    text-align: left;
    font: inherit;
    color: inherit;
    background-color: var(--couleur-fond-douce);
    border: 1px solid var(--couleur-bordure);
    border-radius: .6rem;
    cursor: pointer;
}

.personne-tuile:hover,
.personne-tuile:focus-visible { border-color: var(--couleur-accent-vif); }

.personne-tuile-nom { font-size: 1.2rem; font-weight: 600; }
.personne-tuile-role { font-size: .85rem; color: var(--couleur-texte-doux); }

/* Porte de sortie : discrète, mais toujours là. */
.personne-tuile-sans-nom { opacity: .72; }

.pin-corps { text-align: center; }
.pin-consigne { margin: 0; color: var(--couleur-texte-doux); }

.pin-points {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.1rem 0 .35rem;
}

.pin-point {
    width: 1.15rem;
    height: 1.15rem;
    border: 2px solid var(--couleur-accent);
    border-radius: 50%;
}

.pin-point-rempli { background-color: var(--couleur-accent); }

.pin-erreur { margin: .6rem 0 0; }

.pin-clavier {
    display: grid;
    grid-template-columns: repeat(3, minmax(4.5rem, 1fr));
    gap: .7rem;
    max-width: 23rem;
    margin: 1.1rem auto 0;
}

.pin-touche {
    padding: 1.15rem 0;
    font-size: 1.6rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: inherit;
    background-color: var(--couleur-fond-douce);
    border: 1px solid var(--couleur-bordure);
    border-radius: .6rem;
    cursor: pointer;
}

.pin-touche:hover,
.pin-touche:focus-visible { border-color: var(--couleur-accent-vif); }

.pin-touche-fonction { font-size: 1rem; font-weight: 500; }

/* Code refusé : le clavier tremble, l'œil comprend avant de lire. */
@keyframes pin-secousse {
    0 %, 100 % { transform: translateX(0); }
    20 % { transform: translateX(-.5rem); }
    40 % { transform: translateX(.5rem); }
    60 % { transform: translateX(-.35rem); }
    80 % { transform: translateX(.35rem); }
}

.pin-secoue { animation: pin-secousse .35s ease-in-out; }

/* Le bouton de verrouillage vit dans la ligne du compte, à côté de Déconnexion.
   Elle est sur le bandeau foncé : même traitement clair que les boutons
   secondaires posés sur un fond vert, sinon le texte disparaît. */
.poste-verrouiller { display: inline; margin: 0 0 0 .75rem; }
.compte-bas .poste-verrouiller button {
    color: var(--couleur-entete-tableau-texte);
    border-color: rgba(255, 255, 255, .5);
}
.compte-bas .poste-verrouiller button:hover { background-color: rgba(255, 255, 255, .14); }
.poste-accueil .panneau { max-width: 52rem; }
.poste-verrouille { border-left: .35rem solid var(--couleur-accent); }

/* ------------------------------------------------------------------ */
/* Messagerie interne                                                  */
/* ------------------------------------------------------------------ */

/* La pastille : une enveloppe bleue, en bas à droite, qui suit le défilement
   (`fixed`). Elle n'est affichée que s'il y a un message non lu ; le script la
   fait apparaître et disparaître sans recharger la page. */
.pastille-messagerie {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    /* Au-dessus du bandeau des cookies (999) : sinon la pastille passe
       derrière lui au premier passage d'un visiteur sur le site public. Le
       script la remonte en plus, pour qu'elle ne le chevauche pas. */
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 50%;
    background-color: var(--couleur-messagerie);
    color: var(--couleur-sur-messagerie);
    box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .3);
}

/* `display: inline-flex` l'emporterait sur le `hidden` du navigateur. */
.pastille-messagerie[hidden] { display: none; }

.pastille-messagerie:hover { filter: brightness(1.12); }
.pastille-messagerie svg { width: 1.6rem; height: 1.6rem; display: block; }

.pastille-messagerie-nombre {
    position: absolute;
    top: -.3rem;
    right: -.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background-color: var(--couleur-bulle-messagerie);
    color: var(--couleur-sur-bulle-messagerie);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3rem;
    text-align: center;
}
.pastille-messagerie-nombre[hidden] { display: none; }

@media (max-width: 640px) {
    .pastille-messagerie { right: .9rem; bottom: .9rem; width: 2.8rem; height: 2.8rem; }
}

.messagerie-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 1rem 0 1.1rem; }

.messagerie-onglets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

.messagerie-onglet {
    padding: .45rem .9rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 999px;
    background-color: var(--couleur-fond-carte);
    color: var(--couleur-texte);
    text-decoration: none;
}

.messagerie-onglet:hover,
.messagerie-onglet:focus-visible { border-color: var(--couleur-accent-vif); }

.messagerie-onglet.actif {
    background-color: var(--couleur-accent);
    border-color: var(--couleur-accent);
    color: var(--couleur-sur-accent);
}

.messagerie-onglet-non-lus { font-size: .78rem; font-weight: 600; }

.messagerie-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.message-interne {
    border: 1px solid var(--couleur-bordure);
    border-left: .35rem solid transparent;
    border-radius: .5rem;
    background-color: var(--couleur-fond-carte);
}

.message-interne.est-non-lu { border-left-color: var(--couleur-messagerie); }

.message-interne-ligne {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .15rem 1rem;
    padding: .7rem .9rem;
    color: inherit;
    text-decoration: none;
}

.message-interne-ligne:hover,
.message-interne-ligne:focus-visible { background-color: var(--couleur-survol); }

.message-interne-de { font-weight: 600; }
.message-interne-quand { color: var(--couleur-texte-doux); font-size: .85rem; white-space: nowrap; }
.message-interne-sujet,
.message-interne-etat { grid-column: 1 / -1; }
.message-interne-etat { color: var(--couleur-texte-doux); font-size: .8rem; }
.message-interne.est-non-lu .message-interne-etat { color: var(--couleur-messagerie); font-weight: 600; }

.message-interne-meta { margin: 0 0 .6rem; color: var(--couleur-texte-doux); font-size: .85rem; }
.message-interne-titre { margin: .2rem 0 .6rem; }

.message-interne-texte {
    padding: .8rem 1rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: .5rem;
    background-color: var(--couleur-fond-douce);
}

.message-interne-reponse { margin-top: 1.4rem; }
.message-interne-ranger { margin-top: .4rem; }

.messagerie-choix {
    border: 1px solid var(--couleur-bordure);
    border-radius: .5rem;
    padding: .7rem .9rem;
}

.messagerie-choix legend { padding: 0 .4rem; font-weight: 600; }
.messagerie-choix-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; }

.messagerie-contacts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .3rem .9rem;
    max-height: 16rem;
    overflow-y: auto;
}

/* `.formulaire label` impose `display: block` : la règle doit être au moins
   aussi précise, sinon la case et le nom s'empilent au lieu de s'aligner. */
.formulaire .messagerie-contact { display: flex; align-items: center; gap: .5rem; font-weight: 400; }

.messagerie-destinataires-recus { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.messagerie-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: 1rem; }

/* --- Trouver un nom pour mon compagnon (page publique) --- */

/* L'encart de la lettre de l'année : la première chose qu'on lit. */
.encart-lettre {
    background: var(--couleur-accent-pale);
    border-radius: var(--rayon-carte);
    padding: 1.2rem 1.4rem;
    margin: 1.6rem 0 2rem;
}
.encart-lettre p { margin: 0 0 .6rem; }
.encart-lettre p:last-child { margin-bottom: 0; }
.encart-lettre-titre { font-size: 1.15rem; font-weight: 600; }
.encart-lettre-titre strong {
    font-size: 1.7rem;
    line-height: 1;
    color: var(--couleur-accent);
    vertical-align: -.1em;
}

/* Le formulaire de recherche : plus large que les formulaires courants, à
   cause de l'alphabet — mais qui reste sur une colonne, comme le reste. */
.formulaire-prenoms { max-width: 44rem; }
.formulaire-prenoms fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
.formulaire-prenoms legend {
    font-weight: 600; font-size: .95rem; color: var(--couleur-texte);
    margin-bottom: .6rem; padding: 0;
}

/* Cases déguisées en pastilles : la case reste dans le formulaire (accessible
   au clavier, envoyée avec le formulaire), seule son étiquette se voit. */
.choix-lettres { display: flex; flex-wrap: wrap; gap: .4rem; }
.choix-lettres input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
.choix-lettres label {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem 1rem; cursor: pointer;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-bouton);
    font-size: .95rem; font-weight: 500; color: var(--couleur-texte);
}
.choix-lettres label:hover { background: var(--couleur-survol); }
.choix-lettres input:focus-visible + label { outline: 2px solid var(--couleur-accent-vif); outline-offset: 2px; }
.choix-lettres input:checked + label {
    background: var(--couleur-accent); border-color: var(--couleur-accent);
    color: var(--couleur-sur-accent); font-weight: 600;
}
.choix-lettres input:disabled + label {
    opacity: .35; cursor: not-allowed; text-decoration: line-through;
}
.choix-especes label { padding: .7rem 1.4rem; }

/* L'alphabet : une grille régulière, la lettre de l'année marquée d'un point
   vert — elle est déjà sélectionnée à l'ouverture de la page. */
.alphabet { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: .35rem; }
.alphabet label { padding: .55rem .2rem; position: relative; }
.alphabet .toutes-les-lettres { grid-column: 1 / -1; padding: .55rem 1rem; margin-top: .2rem; }
.puce-annee {
    width: .45rem; height: .45rem; border-radius: 50%;
    background: var(--couleur-accent-vif);
}
.choix-lettres input:checked + label .puce-annee { background: var(--couleur-sur-accent); }

/* Les résultats : une liste de prénoms en cartes, deux ou trois par ligne. */
.resultats-prenoms { margin-top: 2.5rem; }
.liste-prenoms {
    list-style: none; margin: 1.2rem 0; padding: 0;
    display: grid; gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.prenom {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    padding: .6rem .9rem;
}
.prenom-donne { border-color: var(--couleur-accent-vif); }
.prenom-nom { font-weight: 600; }
.prenom-details {
    margin-left: auto; font-size: .78rem; color: var(--couleur-texte-doux);
    display: flex; gap: .6rem; white-space: nowrap;
}
.prenom-marque {
    flex-basis: 100%; font-size: .74rem; color: var(--couleur-accent);
}
/* La famille du prénom, rappelée sous le nom quand on cherche « toutes les
   familles » : discrète, elle sert surtout à savoir d'où vient un prénom. */
.prenom-famille {
    flex-basis: 100%; font-size: .74rem; color: var(--couleur-texte-doux);
    text-transform: lowercase;
}

/* La navigation entre les pages d'une liste : prénoms, galerie, gestion. */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .6rem 1rem;
    margin: 1.4rem 0 .6rem;
}
.pagination-compte {
    margin: 0; font-size: .84rem; color: var(--couleur-texte-doux);
}
.pagination-liens {
    list-style: none; display: flex; align-items: center; flex-wrap: wrap;
    gap: .35rem; margin: 0; padding: 0;
}
.pagination-lien {
    display: inline-block; min-width: 2.2rem; padding: .35rem .6rem;
    text-align: center; text-decoration: none;
    font-size: .86rem; line-height: 1.2;
    color: var(--couleur-texte);
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
}
.pagination-lien:hover { border-color: var(--couleur-accent-vif); }
.pagination-courante {
    font-weight: 700; color: #fff;
    background: var(--couleur-accent);
    border-color: var(--couleur-accent);
}
.pagination-vide { padding: .35rem .2rem; color: var(--couleur-texte-doux); }
@media (max-width: 520px) {
    .pagination { justify-content: center; }
    .pagination-lien { min-width: 2rem; padding: .35rem .5rem; }
}

/* Le bloc des deux structures : l'association et la pension, sur les pages
   publiques. Il ne s'affiche que si la dissociation est réglée et connue. */
.deux-structures {
    border: 1px solid var(--couleur-bordure, #dfe4e0);
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    background: #fafbfa;
}
.deux-structures h2 { font-size: 1.05rem; margin-top: 0; }
.deux-structures ul { margin: .75rem 0 0; padding-left: 1.25rem; }
.deux-structures li { margin-bottom: .5rem; }

/* `.aide` n'existait que dans les formulaires ; les pages publiques s'en
   servent aussi (prénoms, encarts), on lui donne donc une règle générale. */
.aide { font-size: .82rem; color: var(--couleur-texte-doux); }

/* Une case à cocher et son libellé sur une seule ligne, dans un tableau :
   `.case` du formulaire s'empile, ici on veut du texte qui suit la case. */
.etiquette-case {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .8rem; white-space: nowrap;
}
.etiquette-case input { width: auto; }

/* ---------------------------------------------------------------------------
   Bandeau du statut, en tête d'une fiche animal : où en est l'animal et ce
   qu'on peut décider depuis sa fiche (prolonger un délai, passer au refuge,
   conclure une adoption, remettre l'animal dans nos locaux).
   --------------------------------------------------------------------------- */
.bandeau-statut {
    border-left: 4px solid var(--couleur-primaire, #2f6f4f);
}
.situation-statut {
    margin: .2rem 0 1rem;
}
.etiquette-statut {
    display: inline-block;
    margin-right: .4rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--fond-doux, #eef3ee);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.actions-statut {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    align-items: flex-end;
}
.forme-statut {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
    align-items: center;
    margin: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--bordure, #d5dcd5);
    border-radius: .5rem;
}
.forme-statut label {
    font-size: .88rem;
}
.forme-statut input[type="number"] {
    width: 4.5rem;
}

/* L'enveloppe de la messagerie, sur la ligne du pseudo : elle remplace le
   lien du menu. Toujours visible (la boîte resterait sinon introuvable quand
   tout est lu), avec le nombre de messages non lus à sa droite. */
.compte-bas .lien-messagerie {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    /* Poussée à droite : l'enveloppe reste collée à « Déconnexion », au lieu
       de flotter au milieu de la ligne quand il n'y a pas de bouton de poste. */
    margin-left: auto;
    text-decoration: none;
}
.compte-bas .lien-messagerie svg {
    width: 1.15rem;
    height: 1.15rem;
}
.compte-bas .lien-messagerie:hover svg { opacity: .75; }
.compte-bas .lien-messagerie.actif svg { opacity: 1; }
.compte-bas .lien-messagerie .badge { font-size: .68rem; }

/* -- La caméra du box, vue par le propriétaire (lien privé) --
   L'image est fournie par la caméra : la page lui laisse toute la largeur, avec
   un fond sombre, parce qu'une image de caméra est souvent sombre elle-même. */
.bloc-camera {
    margin: 1rem 0 0;
    padding: 0;
    background: #111827;
    border-radius: .6rem;
    overflow: hidden;
}
.bloc-camera img, .bloc-camera video, .bloc-camera iframe {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #111827;
    border: 0;
}
.bloc-camera iframe { height: 60vh; }
.bloc-camera figcaption {
    padding: .5rem .75rem;
    color: #f9fafb;
    font-size: .85rem;
}

/* -- Les adresses de caméra : deux par caméra, chacune avec son test -- */
.champ-adresse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: .3rem 0;
}
/* Le champ d'adresse prend la place qui reste, et le bouton « Tester » se range
   à côté : sans cela, le champ en pleine largeur repousse le bouton dessous. */
.champ-adresse input {
    flex: 1 1 12rem;
    width: auto;
    min-width: 0;
}
/* Dans le tableau des caméras, l'étiquette passe au-dessus de sa ligne : la
   colonne est étroite, et trois éléments côte à côte s'enrouleraient. */
#liste-cameras td { vertical-align: top; }
#liste-cameras .champ-adresse {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
}
#liste-cameras .champ-adresse .etiquette-champ {
    grid-column: 1 / -1;
    min-width: 0;
}
#liste-cameras .champ-adresse input { width: 100%; }
.etiquette-champ {
    min-width: 7rem;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--couleur-texte-doux);
}
.avertissement-adresse { color: #7A5B00; }
.resultat-test { color: var(--couleur-texte-doux); }
.resultat-test.reussi { color: #0f5132; }
.resultat-test.rate { color: #b91c1c; }

/* -- Le mur des caméras : toutes les images d'un coup d'œil -- */
.mur-cameras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.mur-camera {
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    overflow: hidden;
    background: var(--couleur-carte);
}
.mur-camera-entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .75rem;
    font-size: .9rem;
}
.mur-camera-box { color: var(--couleur-texte-doux); font-size: .8rem; }
.mur-camera .bloc-camera { margin: 0; border-radius: 0; }
/* Une vignette garde sa place même quand l'image ne répond pas : le cadre
   sombre montre alors qu'il n'y a rien, au lieu d'un blanc qu'on prend pour un
   écran en cours de chargement. */
.mur-camera .bloc-camera img,
.mur-camera .bloc-camera video {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: 16rem;
}
.mur-camera-pied { padding: .5rem .75rem; font-size: .8rem; color: var(--couleur-texte-doux); }

/* -- Le suivi d'adoption, vu par l'adoptant (lien privé) --
   L'historique se lit comme une frise : la date à gauche, ce qui s'est passé
   ensuite. Sur téléphone la date passe au-dessus, et le texte garde toute la
   largeur. */
#suivi-adoption .suivi-jours {
    list-style: none;
    margin: 0;
    padding: 0;
}
#suivi-adoption .suivi-jours li {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .15rem 1rem;
    padding: .6rem 0;
    border-top: 1px solid var(--couleur-bordure);
}
#suivi-adoption .suivi-jours li:first-child { border-top: 0; }
#suivi-adoption .suivi-date { color: var(--couleur-texte-doux); font-size: .9rem; }
#suivi-adoption .suivi-quoi { font-weight: 600; }
#suivi-adoption .suivi-detail {
    grid-column: 2;
    color: var(--couleur-texte-doux);
    font-size: .9rem;
}
@media (max-width: 640px) {
    #suivi-adoption .suivi-jours li { grid-template-columns: 1fr; }
    #suivi-adoption .suivi-detail { grid-column: 1; }
}
#suivi-adoption .panneau-attention {
    border-left: 4px solid var(--couleur-alerte-bordure);
    background: var(--couleur-alerte-fond);
}
#suivi-adoption .panneau-attention h2 { color: var(--couleur-alerte-texte); }
#suivi-adoption .motif-relu {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-left: 3px solid var(--couleur-bordure);
    background: var(--couleur-fond-douce);
}

/* Celui qui demande à son système moins d'animation est respecté : tout devient
   instantané (accessibilité, et confort sur les appareils modestes). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Les pages légales : mentions, confidentialité, cookies, accessibilité ---
   Elles ont leur propre vocabulaire (définitions, tableaux de durées) : ces
   quelques règles évitent d'inventer une mise en page page par page. */

/* Au clavier, ce lien saute le menu ; à la souris, il ne se voit pas. */
.lien-evitement {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--couleur-principale);
    color: var(--couleur-sur-accent);
    border-radius: 0 0 var(--rayon-carte) 0;
    text-decoration: none;
}

.lien-evitement:focus {
    left: 0;
}

/* Une information légale qui reste à renseigner. Visible de tous : mieux vaut
   un repère honnête qu'une mention inventée sur une page légale. */
.a-completer {
    display: inline-block;
    padding: .05rem .45rem;
    border: 1px dashed var(--couleur-alerte-bordure);
    border-radius: 5px;
    background: var(--couleur-alerte-fond);
    color: var(--couleur-alerte-texte);
    font-size: .85em;
}

.liste-legale {
    max-width: 80ch;
    margin: 1rem 0 1.5rem;
}

.liste-legale dt {
    margin-top: 1rem;
    font-weight: 600;
}

.liste-legale dt:first-child {
    margin-top: 0;
}

.liste-legale dd {
    margin: .2rem 0 0;
    color: var(--couleur-texte-doux);
}

.tableau-legal {
    width: 100%;
    margin: 1rem 0 1.5rem;
    border-collapse: collapse;
    font-size: .95rem;
}

.tableau-legal th,
.tableau-legal td {
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--couleur-bordure);
    text-align: left;
    vertical-align: top;
}

.tableau-legal thead th {
    background: var(--couleur-entete-tableau);
    color: var(--couleur-entete-tableau-texte);
}

.tableau-legal tbody tr:nth-child(even) {
    background: var(--couleur-ligne-paire);
}

.tableau-legal code {
    padding: .05rem .35rem;
    border-radius: 4px;
    background: var(--couleur-fond-douce);
    font-size: .95em;
}

.liens-legaux {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.4rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--couleur-bordure);
}

@media (max-width: 700px) {
    .tableau-legal,
    .tableau-legal thead,
    .tableau-legal tbody,
    .tableau-legal tr,
    .tableau-legal th,
    .tableau-legal td {
        display: block;
    }

    .tableau-legal thead {
        display: none;
    }

    .tableau-legal tr {
        margin-bottom: 1rem;
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--couleur-bordure);
    }
}



/* =====================================================================
   La page du QR code d'un box (www/box.php) : lue debout, sur un
   téléphone, souvent d'une main. Gros boutons, une seule colonne.
   ===================================================================== */
#box-gestes .etiquette-zone {
    display: inline-block;
    margin-left: .4rem;
    font-size: .55em;
    font-weight: 500;
    color: var(--couleur-texte-doux);
    vertical-align: middle;
}

#box-gestes .liste-hors-box {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: grid;
    gap: .5rem;
}

#box-gestes .liste-hors-box li {
    background: #FFF7E4;
    border: 1px solid #E7D6A6;
    border-radius: .5rem;
    padding: .6rem .8rem;
}

#box-gestes fieldset {
    border: 0;
    margin: 0 0 1.2rem;
    padding: 0;
    min-width: 0;
}

#box-gestes legend,
#box-gestes fieldset > label {
    font-weight: 600;
    margin-bottom: .5rem;
}

#box-gestes .choix {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 0;
    font-size: 1.05rem;
}

#box-gestes .choix input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}

#box-gestes .boutons-gestes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .6rem;
    margin: 1rem 0;
}

#box-gestes .bouton.geste {
    min-height: 3.4rem;
    font-size: 1rem;
}

#box-gestes .bouton.geste.retour {
    grid-column: 1 / -1;
}

/* Le bandeau du suivi de pension : l'animal est sorti de son box. */
.bandeau-absence {
    background: #FFF7E4;
    border: 1px solid #E7D6A6;
    border-left: .35rem solid #C79A2E;
    border-radius: .5rem;
    padding: .8rem 1rem;
    margin: 0 0 1.2rem;
}

/* =====================================================================
   Les affiches des portes de box (www/backoffice/locaux.php) : le QR code
   qui ouvre la page des gestes, sur un écran comme sur papier.
   ===================================================================== */
.affiche-box {
    text-align: center;
    border: 1px solid #d8ddd9;
    border-radius: .5rem;
    padding: 1rem;
    background: #fff;
}
.affiche-titre {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 .7rem;
}
.affiche-qr {
    width: 240px;
    max-width: 100%;
    margin: 0 auto;
}
.affiche-qr svg {
    width: 100%;
    height: auto;
    display: block;
}
.affiche-consigne {
    margin: .8rem 0 .3rem;
    font-weight: 600;
}
.affiche-lien {
    margin: 0;
    font-size: .75rem;
    color: #5b6660;
    word-break: break-all;
}

/* L'affiche d'adoption : une feuille A4 punaisée chez le vétérinaire ou à la
   boulangerie. Elle se lit de loin — le nom d'abord, la photo ensuite — et le
   QR code en bas, à hauteur de téléphone. */
.affiche-adoption {
    text-align: center;
    border: 1px solid #d8ddd9;
    border-radius: .5rem;
    padding: 1.5rem 1.2rem;
    background: #fff;
    color: #17231B;
}
.affiche-accroche {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #4E594F;
}
.affiche-adoption .affiche-titre {
    font-size: 3rem;
    line-height: 1.1;
    margin: .2rem 0 .3rem;
}
.affiche-identite {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: #4E594F;
}
.affiche-photo {
    display: block;
    width: 100%;
    max-width: 520px;
    max-height: 420px;
    object-fit: cover;
    margin: 0 auto 1rem;
    border-radius: .5rem;
}
.affiche-texte {
    max-width: 620px;
    margin: 0 auto 1.4rem;
    font-size: 1rem;
    text-align: left;
}
.affiche-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    border-top: 1px solid #d8ddd9;
    padding-top: 1rem;
    text-align: left;
}
.affiche-pied .affiche-qr {
    width: 190px;
    margin: 0;
}
.affiche-contact { max-width: 320px; }
.affiche-refuge {
    margin: .5rem 0 0;
    font-weight: 700;
    font-size: 1.05rem;
}

/* À l'impression, seule l'affiche sort — et elle sort en grand. */
@media print {
    body * {
        visibility: hidden;
    }
    #affiche-impression,
    #affiche-impression * {
        visibility: visible;
    }
    #affiche-impression {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border: 0;
    }
    .affiche-titre {
        font-size: 2.4rem;
    }
    .affiche-qr {
        width: 320px;
    }
    .dialogue::backdrop {
        display: none;
    }
}

/* Le résumé « Pour qui ? » et la fenêtre du choix des animaux (www/box.php).
   La fenêtre s'ouvre au clic sur un geste quand le box héberge plusieurs
   animaux — un seul, plusieurs, ou tous d'un coup. */
#box-gestes .qui-concerne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    background: #F3F7F4;
    border: 1px solid #D8DED9;
    border-radius: .5rem;
    padding: .7rem .9rem;
    margin-bottom: 1rem;
}
#box-gestes .resume-qui { margin: 0; }

#dialogue-qui { padding: 1rem 1.1rem 1.2rem; }
#dialogue-qui h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
#dialogue-qui > .aide { margin: 0 0 1rem; }
#dialogue-qui .choix-animaux { border: 0; padding: 0; margin: 0 0 .8rem; }
#dialogue-qui .titre-champ {
    padding: 0;
    margin-bottom: .5rem;
    font-weight: 600;
}
#dialogue-qui .choix {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .2rem;
    font-size: 1.05rem;
}
#dialogue-qui .choix input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
}
#dialogue-qui .actions-ligne { margin: 0 0 .6rem; }
#dialogue-qui .bouton { width: 100%; }

/* Sans JavaScript, la fenêtre s'affiche dans la page : on peut toujours cocher
   les animaux et valider, au lieu de rester devant rien. */
html:not(.js) #dialogue-qui {
    position: static;
    width: auto;
    max-width: none;
    margin: 1rem 0;
    box-shadow: none;
}
html:not(.js) #dialogue-qui .actions-ligne { display: none; }

/* Le contrat d'adoption signé au doigt : le cadre de signature et l'image
   recueillie. Le canvas est tactile (`touch-action: none` empêche le
   navigateur de faire défiler la page pendant que le doigt trace). */
.signature-zone {
    display: block;
    width: 100%;
    height: 12rem;
    margin-top: .5rem;
    background: #fff;
    border: 1px dashed var(--couleur-bordure);
    border-radius: .5rem;
    touch-action: none;
    cursor: crosshair;
}

.signature-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .4rem;
}

.signature-image {
    max-width: 22rem;
    background: #fff;
    border: 1px solid var(--couleur-bordure);
    border-radius: .5rem;
}

#affiche-impression h3 { margin-bottom: .2rem; }
#affiche-impression p { margin-top: .2rem; }

/* La carte de box : une fiche par box occupé, accrochée à la porte. Elle se
   nourrit de l'affectation (qui est là) et du séjour de pension (la sortie
   prévue, le régime, le propriétaire). À l'impression, seule la zone
   `#affiche-impression` sort, et chaque carte part sur sa propre page. */
.carte-box {
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    background: var(--couleur-fond-carte);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
}

.carte-box-entete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .4rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid var(--couleur-bordure);
}

.carte-box-numero { font-size: 1.6rem; font-weight: 700; margin: 0; }
.carte-box-entete .aide { margin: 0; }

.carte-box-animal {
    padding-bottom: .6rem;
    margin-bottom: .6rem;
    border-bottom: 1px dashed var(--couleur-bordure);
}

.carte-box-animal:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.carte-box-nom { font-size: 1.3rem; font-weight: 700; margin: 0 0 .3rem; }

.carte-box-ligne { margin: .15rem 0; font-size: .92rem; }

.carte-box-ligne strong {
    display: inline-block;
    min-width: 9rem;
    margin-right: .5rem;
    color: var(--couleur-texte-doux);
    font-weight: 600;
}

@media print {
    .carte-box {
        border: 0;
        page-break-after: always;
        break-after: page;
    }

    .carte-box:last-child { page-break-after: auto; break-after: auto; }
}

/* La signature d'une sortie d'animal : le cadre, la case « refuse de signer »,
   et la fiche de sortie qui en reste au dossier. Un refus se repère au premier
   regard (bordure rouge à gauche), parce que c'est l'information qu'on cherche
   quand quelque chose s'est mal passé. */
.bloc-signature-sortie {
    margin-top: 1rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--couleur-bordure);
}

.bloc-signature-sortie .case { font-weight: normal; }

.sortie-signee {
    margin-top: .8rem;
    padding: .6rem .8rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte, .5rem);
    background: var(--couleur-fond-carte);
}

.sortie-signee.sortie-refusee { border-left: .35rem solid var(--couleur-alerte-bordure); }

.sortie-signee .titre-sortie { margin: 0 0 .3rem; font-weight: 600; }

.sortie-signee .signature-image { max-width: 18rem; }

.sortie-signee .signature-au-dossier { margin: .4rem 0 0; font-size: .9em; color: var(--couleur-texte-doux); }

/* Sans JavaScript, le motif du refus reste affiché : la personne peut l'écrire à
   la main, et le serveur l'exige de toute façon quand le refus est coché. */
html:not(.js) [data-motif-refus][hidden] { display: block; }

/* La liste de souhaits : ce dont le refuge a besoin. */
.etiquettes { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .2rem; }
.etiquette.urgent { background: #F6E0E0; color: #8A2A2A; }
.carte-souhait {
    display: flex; flex-direction: column; gap: .55rem;
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: .6rem; padding: 1.1rem 1.2rem;
}
.carte-souhait h3 { margin: 0; font-size: 1.05rem; }
.carte-souhait p { margin: 0; font-size: .92rem; }
.jauge { height: .5rem; border-radius: 1rem; background: var(--couleur-fond-douce); overflow: hidden; }
.jauge-part { height: 100%; background: var(--couleur-accent-vif); }
.avancement { font-size: .85rem; color: var(--couleur-texte-doux); }
.champ-court { width: 5.5rem; }

/* L'aperçu du fichier comptable : les zones séparées par des tabulations. */
.apercu-fec {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: .3rem; padding: .8rem; overflow-x: auto; white-space: pre;
    font-size: .78rem; line-height: 1.5; margin: 0;
}

/* Le verdict d'une évaluation comportementale, et le rapprochement avec un foyer. */
.etiquette[data-niveau="ok"] { background: #E7F1DA; color: #2A4218; }
.etiquette[data-niveau="attention"] { background: #FBF0D9; color: #6B4E12; }
.etiquette[data-niveau="incompatible"] { background: #F6E0E0; color: #8A2A2A; }
.etiquette[data-niveau="inconnu"] { background: #E9ECE6; color: #333B36; }
.encart-rapprochement {
    border-left: .3rem solid var(--couleur-bordure);
    background: var(--couleur-fond-douce);
    padding: .7rem .9rem; border-radius: .2rem; margin: .8rem 0;
}
.encart-rapprochement[data-niveau="ok"] { border-left-color: #4E7F2E; }
.encart-rapprochement[data-niveau="attention"] { border-left-color: #B8860B; }
.encart-rapprochement[data-niveau="incompatible"] { border-left-color: #A33; }

/* ------------------------------------------------------------------
   Annonces perdu / trouvé
   ------------------------------------------------------------------ */

.message.information { background: #EEF3FB; color: #1E3A5F; }
.petite-note { color: var(--couleur-texte-doux); font-size: .82rem; }
.appel-action { margin: 1.2rem 0; }
.etapes { padding-left: 1.2rem; }
.etapes li { margin-bottom: .5rem; }
.partage { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }

.grille-annonces { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.carte-annonce {
    background: var(--couleur-fond-carte); border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte); padding: .8rem; overflow: hidden;
}
.carte-annonce a { text-decoration: none; color: inherit; }
.carte-annonce h2 { font-size: 1rem; margin: .6rem 0 .3rem; }
.carte-annonce p { margin: .2rem 0; font-size: .88rem; }
.carte-annonce img { width: 100%; height: 190px; object-fit: cover; border-radius: var(--rayon-carte); display: block; }
.sans-photo {
    display: flex; align-items: center; justify-content: center; height: 120px;
    background: var(--couleur-fond-douce); color: var(--couleur-texte-doux);
    border-radius: var(--rayon-carte); font-size: .8rem;
}

.fiche-annonce { display: grid; gap: 1.2rem; margin: 1.2rem 0; }
.photos-annonce { display: flex; gap: .6rem; flex-wrap: wrap; }
.photos-annonce img { max-width: min(100%, 420px); border-radius: var(--rayon-carte); }
.description-annonce { margin-top: 1rem; }

.carte-correspondance {
    display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: start;
    border: 1px solid var(--couleur-bordure); border-radius: var(--rayon-carte);
    padding: 1rem; margin: 1rem 0; background: var(--couleur-fond-carte);
}
.carte-correspondance img { width: 100%; border-radius: var(--rayon-carte); }
.carte-correspondance h3 { margin-top: 0; }
.raisons { margin: .5rem 0; padding-left: 1.1rem; color: var(--couleur-texte-doux); font-size: .85rem; }
.liste-annonces { padding-left: 1.1rem; }
.signalement { border-top: 1px solid var(--couleur-bordure); padding: .7rem 0; }
.signalement p { margin: .3rem 0; }

@media (max-width: 620px) {
    .carte-correspondance { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
   Annonces perdu / trouvé : la carte
   ------------------------------------------------------------------ */

.carte-pt {
    height: 380px;
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon-carte);
    background: var(--couleur-fond-douce);
}

.carte-choix { height: 300px; margin-bottom: .5rem; }

.carte-repli { padding-left: 1.1rem; }
.carte-repli li { margin-bottom: .3rem; }

.leaflet-container { font: inherit; }

html:not(.js) [data-carte-pt] { display: none; }
html:not(.js) [data-carte-repli][hidden] { display: block; }

@media (max-width: 600px) {
    .carte-pt { height: 300px; }
}

/* ------------------------------------------------------------------
   L'affiche à imprimer d'une annonce
   ------------------------------------------------------------------ */

.ligne-boutons { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }

.affiche-annonce {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.6rem;
    background: #ffffff;
    color: #111111;
    border: 2px solid #111111;
    border-radius: var(--rayon-carte);
}

.affiche-titre {
    margin: 0;
    font-size: 1.6rem;
    letter-spacing: .18em;
    font-weight: 700;
    color: #b00020;
}

.affiche-nom { margin: .2rem 0 .4rem; font-size: 2rem; color: #111111; }
.affiche-quand { margin: 0 0 1rem; font-size: 1.05rem; }

.affiche-corps { display: grid; grid-template-columns: 260px 1fr; gap: 1.2rem; align-items: start; }
.affiche-photo img { width: 100%; border-radius: 6px; display: block; }
.affiche-infos { font-size: 1.05rem; }
.affiche-infos p { margin: 0 0 .7rem; }

.affiche-pied {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.2rem;
    align-items: center;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 2px solid #111111;
}

.affiche-qr svg { width: 150px; height: 150px; }
.affiche-lien { font-weight: 700; word-break: break-all; }
.affiche-annonce .petite-note { color: #444444; }

@media (max-width: 640px) {
    .affiche-corps, .affiche-pied { grid-template-columns: 1fr; }
}

@media print {
    .affiche-annonce { border-width: 3px; }
    .affiche-nom { font-size: 2.6rem; }
}


/* ------------------------------------------------------------------ */
/* Les étoiles d'une note — avis de pension                            */
/*                                                                     */
/* Le dessin est un SVG posé dans la page par Refuge\Support\Etoiles :  */
/* pas d'image à charger, pas de police d'émoji, pas de bibliothèque.   */
/* ------------------------------------------------------------------ */

.etoiles {
    display: inline-flex;
    align-items: center;
    gap: .12rem;
    vertical-align: -.18em;
}

.etoiles .etoile {
    display: block;
    width: 1.05em;
    height: 1.05em;
}

.etoile .etoile-creux {
    fill: none;
    stroke: var(--couleur-etoile-creux);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.etoile .etoile-plein {
    fill: var(--couleur-etoile);
}

.etoile--vide .etoile-plein { display: none; }
.etoile--demie .etoile-plein { clip-path: inset(0 50% 0 0); }

.etoiles--grand { gap: .25rem; }
.etoiles--grand .etoile { width: 1.9rem; height: 1.9rem; }

/* La moyenne : les étoiles à côté du chiffre, qui dit la valeur exacte. */
.moyenne-note {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}
.moyenne-note .chiffre { font-size: 1.5rem; font-weight: 700; line-height: 1; }

/* La saisie d'une note : cinq étoiles qui sont cinq boutons radio. Un
   visiteur au clavier se déplace avec les flèches, comme dans toute liste de
   boutons radio ; chaque étoile porte son sens écrit pour les lecteurs
   d'écran, et la légende sous la ligne dit ce que chaque note veut dire. */
.note-etoiles {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin: .3rem 0 .2rem;
}

.note-etoiles label {
    display: block;
    cursor: pointer;
    padding: .1rem;
    border-radius: .3rem;
}

/* Le bouton radio existe et se commande au clavier, mais ne se voit pas : ici,
   c'est l'étoile qu'on touche. */
.note-etoiles input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
}

.note-etoiles .etoile { width: 2.1rem; height: 2.1rem; }

.note-etoiles input:focus-visible + .hors-ecran + .etoile,
.note-etoiles input:focus-visible + .etoile {
    outline: 3px solid var(--couleur-accent-vif);
    outline-offset: 2px;
    border-radius: .3rem;
}

/* L'étoile touchée et celles d'avant s'allument : la note se lit dans la
   ligne elle-même, sans qu'on ait besoin de compter. */
.note-etoiles label:hover .etoile .etoile-plein,
.note-etoiles label:has(input:checked) .etoile .etoile-plein,
.note-etoiles label:has(~ label input:checked) .etoile .etoile-plein {
    display: block;
}

.note-legende { margin: .2rem 0 0; }

/* Un texte qui n'existe que pour les lecteurs d'écran : il ne prend pas de
   place à l'écran, et ne se perd pas au clavier. */
.hors-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------------ */
/* Le registre des entrées et sorties — la feuille d'un contrôle       */
/*                                                                     */
/* Douze colonnes qui se serrent à l'impression : sur papier, une      */
/* ligne du registre doit tenir sans être coupée. La page réutilise le */
/* tableau « donnees » du site ; seules la taille et les marges        */
/* changent sur le papier.                                             */
/* ------------------------------------------------------------------ */
.registre-officiel {
    margin-top: 1.5rem;
}

.registre-titre {
    margin: 0 0 .35rem;
    font-size: 1.15rem;
}

.registre-mentions {
    margin: 0 0 1rem;
    font-size: .85rem;
    color: var(--couleur-texte-doux);
}

@media print {
    .registre-tableau {
        font-size: 7.5pt;
    }

    .registre-tableau th,
    .registre-tableau td {
        padding: .12rem .22rem;
    }
}

/* Le registre à l'écran : douze colonnes ne tiennent pas dans la largeur, et
   `overflow-x: hidden` du body couperait les dernières. Le bloc défile donc
   horizontalement. À l'impression, les colonnes secondaires s'effacent : la
   feuille doit tenir sur une page, et l'arrêté ne demande que la date, la
   provenance ou la destination et l'identification. */
.registre-officiel {
    overflow-x: auto;
}

@media print {
    .registre-tableau .col-secondaire {
        display: none;
    }
}