/* =========================================================================
   SANTÉ BEPT - SYSTÈME DE DESIGN
   =========================================================================
   Feuille unique, écrite de zéro, sans dépendance à Bootstrap.
   Elle alimente le back-office et l'application mobile.

   Sommaire
     1.  Jetons (couleurs, typographie, espacement, rayons, ombres)
     2.  Réinitialisation et bases
     3.  Mise en page (application, contenu, grilles)
     4.  Navigation (barre latérale, en-tête, navigation basse)
     5.  Typographie utilitaire
     6.  Boutons
     7.  Formulaires
     8.  Cartes
     9.  Tableaux et listes
     10. Badges et pastilles d'état
     11. Alertes
     12. États vides
     13. Squelettes de chargement
     14. Panneau latéral et boîtes de dialogue
     15. Utilitaires
     16. Mouvement (entrées de vue, survols)
   ========================================================================= */


/* =========================================================================
   1. JETONS
   ========================================================================= */

:root {
  /* --- Couleurs : mode clair -------------------------------------------- */
  /* Le vert-pétrole évoque le soin sans la froideur hospitalière du bleu.
     Assombri et désaturé : il porte désormais des aplats entiers (barre
     latérale, panneaux) et non plus seulement des détails. */
  --bept-primaire:        #2C554D;
  --bept-primaire-fonce:  #1E3D37;
  --bept-primaire-doux:   #DCE7E4;
  --bept-primaire-contraste: #FFFFFF;

  /* Doré : la couleur de l'action. Réservée à ce sur quoi on veut qu'on
     clique, sinon elle cesse de vouloir dire quoi que ce soit. Toujours en
     aplat sous un texte sombre - du blanc sur ce doré tombe à 2,1:1. */
  --bept-accent:          #D9A441;
  --bept-accent-fonce:    #C28F2C;
  --bept-accent-doux:     #F7EDD8;
  --bept-accent-contraste: #2A2012;

  /* Barre latérale : sombre dans les deux thèmes, d'où ses propres jetons. */
  --bept-barre-fond:      #2C554D;
  --bept-barre-encre:     #E7EFEC;
  --bept-barre-attenue:   #A9C0BA;
  --bept-barre-survol:    rgba(255, 255, 255, .08);
  /* La pastille de page courante prend la couleur du FOND DE PAGE, pas une
     teinte d'accent : elle se lit alors comme une découpe, le contenu perçant
     la barre plutôt qu'un bouton posé dessus. Elle a ses propres jetons parce
     que la relation doit tenir dans les deux thèmes, où le fond de page passe
     du clair au sombre tandis que la barre reste verte. */
  --bept-barre-actif-fond:  #EDF1F0;
  --bept-barre-actif-encre: #12211F;

  /* Panneau sombre : la carte de synthèse de l'accueil mobile. Comme la barre,
     il reste sombre dans les deux thèmes et a donc ses propres jetons -
     --bept-primaire-fonce s'éclaircit en mode sombre et y rendrait le texte
     blanc illisible. */
  --bept-sombre-fond:     #234840;
  --bept-sombre-encre:    #EDF3F1;
  --bept-sombre-attenue:  #A9C0BA;
  --bept-sombre-piste:    rgba(255, 255, 255, .16);

  /* Halos décoratifs du fond de page. Assez dilués pour que le texte reste
     lisible s'il passe dessus. */
  --bept-halo-1: rgba(217, 164, 65, .42);
  --bept-halo-2: rgba(44, 85, 77, .22);

  /* Neutres légèrement teintés de vert : choisis, pas hérités d'un gris pur.
     Le fond descend d'un cran : les cartes blanches doivent s'en détacher. */
  --bept-fond:            #EDF1F0;
  --bept-surface:         #FFFFFF;
  --bept-surface-2:       #EDF1EE;
  --bept-encre:           #12211F;
  --bept-encre-2:         #354643;
  /* Assombri : à #637571 la marge était nulle (4,28:1 sur le fond), et le
     texte secondaire passait sous le seuil dès qu'un halo le teintait.
     Tient maintenant partout, y compris au cœur du halo doré : 6,96:1 sur une
     carte, 6,11:1 sur le fond, 4,64:1 sur le halo. */
  --bept-attenue:         #4C5D59;
  --bept-filet:           #DCE4E0;
  --bept-filet-fort:      #C4D0CB;

  /* Couleurs sémantiques - indépendantes de l'accent. */
  --bept-succes:          #2F6E4A;
  --bept-succes-doux:     #DFEDE4;
  --bept-attention:       #906218;  /* 4.52:1 sur son fond doux - #97671A echouait a 4.17:1 */
  --bept-attention-doux:  #F7EBD8;
  --bept-erreur:          #A3352C;
  --bept-erreur-doux:     #F6E3E0;
  --bept-info:            #2C5F86;
  --bept-info-doux:       #DEE9F1;

  /* --- Typographie ------------------------------------------------------ */
  /* Pile système : aucun téléchargement, affichage instantané, rendu natif. */
  --bept-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Arial, sans-serif;
  --bept-police-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                      monospace;

  /* Échelle : le corps ne descend jamais sous 16 px - public âgé. */
  --bept-t-display:  2.25rem;   /* 36 */
  --bept-t-1:        1.75rem;   /* 28 */
  --bept-t-2:        1.3125rem; /* 21 */
  --bept-t-3:        1.0625rem; /* 17 */
  --bept-t-corps:    1rem;      /* 16 */
  --bept-t-libelle:  0.875rem;  /* 14 */
  --bept-t-legende:  0.8125rem; /* 13 */

  --bept-graisse-normale: 400;
  --bept-graisse-moyenne: 500;
  --bept-graisse-forte:   600;

  /* --- Espacement : base 4 px ------------------------------------------- */
  --bept-e-1:  0.25rem;  /*  4 */
  --bept-e-2:  0.5rem;   /*  8 */
  --bept-e-3:  0.75rem;  /* 12 */
  --bept-e-4:  1rem;     /* 16 */
  --bept-e-5:  1.5rem;   /* 24 */
  --bept-e-6:  2rem;     /* 32 */
  --bept-e-7:  3rem;     /* 48 */
  --bept-e-8:  4rem;     /* 64 */

  /* --- Rayons : généreux, c'est la signature de l'ensemble --------------- */
  --bept-r-1: 8px;
  --bept-r-2: 12px;
  --bept-r-3: 18px;
  --bept-r-4: 24px;
  --bept-r-5: 32px;   /* barre latérale et grands panneaux */
  --bept-r-plein: 999px;

  /* --- Ombres : diffuses, teintées d'encre, jamais noires ----------------
     Elles remplacent les filets pour détacher les surfaces : posées sur un
     fond légèrement teinté, elles font flotter les cartes sans les cerner. */
  --bept-ombre-1: 0 1px 2px rgba(18, 33, 31, .04),
                  0 2px 8px rgba(18, 33, 31, .04);
  --bept-ombre-2: 0 2px 6px rgba(18, 33, 31, .05),
                  0 8px 24px rgba(18, 33, 31, .06);
  --bept-ombre-3: 0 4px 10px rgba(18, 33, 31, .07),
                  0 18px 48px rgba(18, 33, 31, .10);

  /* --- Mouvement -------------------------------------------------------- */
  --bept-courbe: cubic-bezier(.2, .8, .3, 1);
  --bept-duree-1: 120ms;  /* micro-interactions */
  --bept-duree-2: 200ms;  /* transitions de vue */
  --bept-duree-3: 360ms;  /* entrées de contenu */
  /* Décalage entre deux blocs d'une même cascade. Au-delà de 60 ms, l'attente
     devient perceptible sur les écrans chargés de missions. */
  --bept-cascade: 55ms;

  /* --- Gabarit ---------------------------------------------------------- */
  --bept-largeur-barre: 260px;
  --bept-hauteur-entete: 64px;
  --bept-contenu-max: 1180px;
  --bept-cible-tactile: 44px;
}

/* --- Mode sombre : suit le système, surchargé par le sélecteur manuel ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-bept-theme="clair"]) {
    --bept-primaire:        #5FBFAE;
    --bept-primaire-fonce:  #8AD6C7;
    --bept-primaire-doux:   #16302C;
    --bept-primaire-contraste: #06201C;

    /* Le doré s'éclaircit : la version du mode clair vire au brun sur fond
       sombre et perd son rôle d'appel à l'action. */
    --bept-accent:          #E6B95E;
    --bept-accent-fonce:    #F0CB80;
    --bept-accent-doux:     #2E2417;
    --bept-accent-contraste: #251B08;

    /* La barre reste l'élément le plus vert de l'écran, mais doit ici être
       plus claire que le fond pour continuer à s'en détacher. */
    --bept-barre-fond:      #17302B;
    --bept-barre-encre:     #E7EFEC;
    --bept-barre-attenue:   #93AAA4;
    --bept-barre-survol:    rgba(255, 255, 255, .07);
    /* Ici la découpe est plus sombre que la barre, et c'est juste : c'est
       toujours la couleur du fond de page. */
    --bept-barre-actif-fond:  #0D1614;
    --bept-barre-actif-encre: #E8EFEC;
    --bept-halo-1: rgba(230, 185, 94, .10);
    --bept-halo-2: rgba(95, 191, 174, .08);

    /* Le panneau sombre s'assombrit encore : sur un fond déjà noir, la valeur
       du mode clair ressortait comme une tache pâle. */
    --bept-sombre-fond:     #16302B;
    --bept-sombre-encre:    #E8EFEC;
    --bept-sombre-attenue:  #93AAA4;
    --bept-sombre-piste:    rgba(255, 255, 255, .13);

    --bept-fond:            #0D1614;
    --bept-surface:         #131F1D;
    --bept-surface-2:       #1A2826;
    --bept-encre:           #E8EFEC;
    --bept-encre-2:         #C0CCC8;
    --bept-attenue:         #8DA09B;
    --bept-filet:           #263834;
    --bept-filet-fort:      #354A46;

    --bept-succes:          #7DC49A;
    --bept-succes-doux:     #172C21;
    --bept-attention:       #D9A85C;
    --bept-attention-doux:  #2E2417;
    --bept-erreur:          #E8877C;
    --bept-erreur-doux:     #33201D;
    --bept-info:            #8FB9D9;
    --bept-info-doux:       #16262F;

    --bept-ombre-1: 0 1px 2px rgba(0, 0, 0, .3);
    --bept-ombre-2: 0 4px 12px rgba(0, 0, 0, .35);
    --bept-ombre-3: 0 12px 32px rgba(0, 0, 0, .45);
  }
}

:root[data-bept-theme="sombre"] {
  --bept-primaire:        #5FBFAE;
  --bept-primaire-fonce:  #8AD6C7;
  --bept-primaire-doux:   #16302C;
  --bept-primaire-contraste: #06201C;

  --bept-accent:          #E6B95E;
  --bept-accent-fonce:    #F0CB80;
  --bept-accent-doux:     #2E2417;
  --bept-accent-contraste: #251B08;

  --bept-barre-fond:      #17302B;
  --bept-barre-encre:     #E7EFEC;
  --bept-barre-attenue:   #93AAA4;
  --bept-barre-survol:    rgba(255, 255, 255, .07);

  --bept-sombre-fond:     #16302B;
  --bept-sombre-encre:    #E8EFEC;
  --bept-sombre-attenue:  #93AAA4;
  --bept-sombre-piste:    rgba(255, 255, 255, .13);
  --bept-barre-actif-fond:  #0D1614;
  --bept-barre-actif-encre: #E8EFEC;
  --bept-halo-1: rgba(230, 185, 94, .10);
  --bept-halo-2: rgba(95, 191, 174, .08);

  --bept-fond:            #0D1614;
  --bept-surface:         #131F1D;
  --bept-surface-2:       #1A2826;
  --bept-encre:           #E8EFEC;
  --bept-encre-2:         #C0CCC8;
  --bept-attenue:         #8DA09B;
  --bept-filet:           #263834;
  --bept-filet-fort:      #354A46;

  --bept-succes:          #7DC49A;
  --bept-succes-doux:     #172C21;
  --bept-attention:       #D9A85C;
  --bept-attention-doux:  #2E2417;
  --bept-erreur:          #E8877C;
  --bept-erreur-doux:     #33201D;
  --bept-info:            #8FB9D9;
  --bept-info-doux:       #16262F;

  --bept-ombre-1: 0 1px 2px rgba(0, 0, 0, .3);
  --bept-ombre-2: 0 4px 12px rgba(0, 0, 0, .35);
  --bept-ombre-3: 0 12px 32px rgba(0, 0, 0, .45);
}


/* =========================================================================
   2. RÉINITIALISATION ET BASES
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden ne tient pas tout seul : « [hidden] { display: none } »
   vient de la feuille du navigateur, et toute règle d'auteur déclarant display
   l'emporte sur elle, spécificité mise à part. Nos composants masqués par
   défaut (alertes, états vides, cartes de vérification) sont justement en
   display: flex - sans cette ligne ils restent tous visibles. Le !important
   est nécessaire : la règle doit gagner contre les classes de composant. */
[hidden] { display: none !important; }

/* La toile de fond du navigateur.
   Le thème sombre ne venait que de la feuille de style. Or le navigateur
   peint sa propre toile avant que le premier octet de CSS ne s'applique, et
   entre deux documents lors d'une navigation : sans « color-scheme », cette
   toile est blanche. D'où l'éclair blanc à chaque changement de page en mode
   sombre - il n'avait rien à voir avec la transition d'onglet, il se
   produisait déjà avant elle.
   La déclarer fait aussi suivre au thème ce que la feuille ne contrôle pas :
   barres de défilement, contrôles de formulaire natifs, sélecteurs de date. */
:root { color-scheme: light dark; }
:root[data-bept-theme="clair"]  { color-scheme: light; }
:root[data-bept-theme="sombre"] { color-scheme: dark; }

/* Le fond est aussi posé sur html, et pas seulement sur body : la couleur de
   body ne remonte à la toile qu'une fois le corps construit. */
html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--bept-fond);
}

body {
  margin: 0;
  background-color: var(--bept-fond);
  color: var(--bept-encre);
  font-family: var(--bept-police);
  font-size: var(--bept-t-corps);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Deux halos posés dans les angles - doré en haut à gauche, vert en bas à
   droite - sur lesquels l'application mobile vient flotter. Ils restent très
   pâles et fixes : le contenu défile par-dessus sans jamais devoir se lire sur
   une zone colorée, ce qui compte pour un public âgé.

   Ils s'arrêtent au téléphone. Le back-office a une barre latérale verte
   pleine hauteur : le halo doré affleurait juste à son bord droit, et le
   raccord entre le vert franc et le sable délavé se voyait comme une salissure
   plutôt que comme une lumière. Un fond d'un seul ton laisse la barre trancher
   nettement, ce qui est bien ce qu'on lui demande. */
body:not(:has(.bept-app)) {
  /* Les aplats de la maquette sont francs : la teinte tient jusqu'aux deux
     tiers du rayon avant de s'éteindre, au lieu de se diluer dès le centre. */
  background-image:
    radial-gradient(circle at 3% 0%,    var(--bept-halo-1) 0%, var(--bept-halo-1) 16%, transparent 34%),
    radial-gradient(circle at 98% 94%,  var(--bept-halo-2) 0%, var(--bept-halo-2) 14%, transparent 32%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: 1.25;
  font-weight: var(--bept-graisse-forte);
  text-wrap: balance;
}

p { margin: 0; }

img, svg { max-width: 100%; display: block; }

/* Les liens se signalent par leur couleur, jamais par un soulignement au
   survol : celui-ci apparaissait sur tout, y compris les tuiles et les lignes
   de liste, dont le titre se soulignait au passage de la souris.
   Le focus clavier garde son contour, lui : c'est le seul repère de qui ne se
   sert pas d'une souris. */
a { color: var(--bept-primaire); text-decoration: none; }

/* Le focus doit rester visible sur TOUT élément interactif. */
:focus-visible {
  outline: 2px solid var(--bept-primaire);
  outline-offset: 2px;
  border-radius: var(--bept-r-1);
}

/* Lien d'évitement pour la navigation au clavier. */
.bept-evitement {
  position: absolute;
  left: var(--bept-e-4);
  top: calc(-1 * var(--bept-e-8));
  z-index: 100;
  padding: var(--bept-e-2) var(--bept-e-4);
  background: var(--bept-surface);
  color: var(--bept-encre);
  border-radius: var(--bept-r-2);
  box-shadow: var(--bept-ombre-2);
  transition: top var(--bept-duree-2) var(--bept-courbe);
}
.bept-evitement:focus { top: var(--bept-e-4); }

/* Réservé aux lecteurs d'écran. */
.bept-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Le délai compte autant que la durée : sans cette ligne, les cascades de
       la section 16 laisseraient les blocs invisibles le temps de leur tour. */
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =========================================================================
   3. MISE EN PAGE
   ========================================================================= */

/* La barre ne touche plus les bords : l'application est posée sur le fond
   plutôt que collée à la fenêtre. */
.bept-app {
  display: grid;
  grid-template-columns: var(--bept-largeur-barre) minmax(0, 1fr);
  gap: var(--bept-e-4);
  padding: var(--bept-e-4);
  min-height: 100vh;
}

.bept-principal { display: flex; flex-direction: column; min-width: 0; }

.bept-contenu {
  flex: 1;
  width: 100%;
  max-width: var(--bept-contenu-max);
  margin: 0 auto;
  /* Un enfant de conteneur flex reçoit min-width: auto et refuse donc de
     descendre sous la largeur de son contenu. Un tableau large élargissait
     ainsi toute la page, et son conteneur à overflow-x n'avait jamais
     l'occasion de défiler. */
  min-width: 0;
  padding: var(--bept-e-6) var(--bept-e-5) var(--bept-e-8);
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-6);
}

/* Lien de retour. Il était rendu en légende - la classe des mentions
   secondaires - alors qu'il porte une navigation : trop pâle pour se
   remarquer, surtout posé sur un halo. */
.bept-retour {
  display: inline-flex;
  align-items: center;
  gap: var(--bept-e-1);
  align-self: flex-start;
  font-size: var(--bept-t-libelle);
  font-weight: var(--bept-graisse-moyenne);
  color: var(--bept-primaire);
  text-decoration: none;
  padding: var(--bept-e-1) var(--bept-e-2);
  margin-left: calc(var(--bept-e-2) * -1);
  border-radius: var(--bept-r-2);
  transition: background var(--bept-duree-1) var(--bept-courbe);
}
.bept-retour:hover {
  background: var(--bept-primaire-doux);
  text-decoration: none;
}

/* En-tête de page : titre, description, actions. */
.bept-entete-page {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bept-e-4);
}
.bept-entete-page__texte { display: flex; flex-direction: column; gap: var(--bept-e-1); }
.bept-entete-page h1 { font-size: var(--bept-t-1); letter-spacing: -.015em; }
.bept-entete-page__desc { color: var(--bept-attenue); font-size: var(--bept-t-libelle); }
.bept-entete-page__actions { display: flex; flex-wrap: wrap; gap: var(--bept-e-2); }

/* Grille générique. */
.bept-grille {
  display: grid;
  gap: var(--bept-e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

@media (max-width: 1024px) {
  .bept-app { grid-template-columns: minmax(0, 1fr); }
  .bept-contenu { padding: var(--bept-e-5) var(--bept-e-4) var(--bept-e-8); }
}


/* =========================================================================
   4. NAVIGATION
   ========================================================================= */

/* --- Barre latérale ----------------------------------------------------- */
/* Panneau vert plein, aux angles largement arrondis : c'est lui qui donne le
   ton, le reste de l'écran se contente de blanc et de gris. */
.bept-barre {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-5);
  padding: var(--bept-e-5) var(--bept-e-3);
  background: var(--bept-barre-fond);
  color: var(--bept-barre-encre);
  border-radius: var(--bept-r-5);
  position: sticky;
  top: var(--bept-e-4);
  height: calc(100vh - var(--bept-e-4) * 2);
  /* Ne rogne pas : l'onglet actif doit pouvoir déborder sur le contenu.
     « overflow-y: auto » rendait l'axe horizontal « auto » à son tour - la
     règle veut qu'une valeur « visible » face à une valeur qui ne l'est pas
     bascule elle aussi - et tout dépassement était coupé. */
  overflow: visible;
}

/* Sur une fenêtre courte, huit entrées ne tiennent plus : la barre redevient
   défilante, et renonce au débordement, qui y serait rogné de toute façon. */
@media (max-height: 40rem) {
  .bept-barre { overflow-y: auto; }
  .bept-nav__lien[aria-current="page"] { margin-right: 0; padding-right: var(--bept-e-3); }
}

.bept-marque {
  display: flex;
  align-items: center;
  gap: var(--bept-e-3);
  padding: 0 var(--bept-e-2);
  color: var(--bept-barre-encre);
  text-decoration: none;
}
.bept-marque img { width: 36px; height: 36px; object-fit: contain; }
.bept-marque__nom {
  font-weight: var(--bept-graisse-forte);
  font-size: var(--bept-t-3);
  letter-spacing: -.01em;
}

.bept-nav { display: flex; flex-direction: column; gap: var(--bept-e-1); }

.bept-nav__groupe {
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-forte);
  color: var(--bept-barre-attenue);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: var(--bept-e-4) var(--bept-e-3) var(--bept-e-1);
}

.bept-nav__lien {
  display: flex;
  align-items: center;
  gap: var(--bept-e-3);
  min-height: var(--bept-cible-tactile);
  padding: var(--bept-e-2) var(--bept-e-3);
  border-radius: var(--bept-r-plein);
  color: var(--bept-barre-encre);
  font-size: var(--bept-t-libelle);
  font-weight: var(--bept-graisse-moyenne);
  letter-spacing: .02em;
  text-decoration: none;
  transition: background var(--bept-duree-1) var(--bept-courbe),
              color var(--bept-duree-1) var(--bept-courbe);
}
.bept-nav__lien:hover {
  background: var(--bept-barre-survol);
  color: var(--bept-barre-encre);
  text-decoration: none;
}
/* La page courante s'inverse : pastille claire sur le vert, elle se repère
   avant même d'être lue. */
/* L'onglet actif sort de la barre.
   Il ne se contente pas de changer de couleur : il franchit le bord et se
   pose sur le contenu, ce qui dit « vous êtes ici » par la forme et non par
   la seule teinte - lisible aussi pour qui distingue mal les couleurs.
   Le débordement vaut le rembourrage droit de la barre, plus de quoi passer
   son angle arrondi. */
.bept-nav__lien[aria-current="page"] {
  background: var(--bept-barre-actif-fond);
  color: var(--bept-barre-actif-encre);
  font-weight: var(--bept-graisse-forte);
  margin-right: calc((var(--bept-e-3) + 18px) * -1);
  padding-right: calc(var(--bept-e-3) + 18px);
}
.bept-nav__lien[aria-current="page"]:hover {
  background: var(--bept-barre-actif-fond);
  color: var(--bept-barre-actif-encre);
}
.bept-nav__icone { width: 20px; height: 20px; flex: none; }

/* Compteur discret aligné à droite d'un lien. */
.bept-nav__compteur {
  margin-left: auto;
  font-size: var(--bept-t-legende);
  font-variant-numeric: tabular-nums;
  color: var(--bept-barre-attenue);
}
.bept-nav__lien[aria-current="page"] .bept-nav__compteur { color: inherit; }

.bept-barre__pied { margin-top: auto; }

/* --- En-tête ------------------------------------------------------------ */
.bept-entete {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  min-height: var(--bept-hauteur-entete);
  padding: 0 var(--bept-e-5);
  /* Posée sur le fond, sans surface ni filet : la barre latérale et les cartes
     suffisent à structurer l'écran. */
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Le voile ne concerne que l'application mobile.
   Là, l'en-tête porte un titre et la grille de tuiles fait défiler des photos
   pleine largeur dessous : sans fond, ce titre devenait illisible. Le
   back-office n'a pas ce problème - son en-tête ne porte pas de titre, juste
   deux commandes tout à droite - et le fond n'y protégeait donc rien : il
   dessinait une bande vide de soixante-quatre pixels en haut de chaque page.
   D'où cette portée limitée à l'enveloppe mobile. */
body:not(:has(.bept-app)) .bept-entete {
  background: color-mix(in srgb, var(--bept-fond) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@supports not (backdrop-filter: blur(1px)) {
  body:not(:has(.bept-app)) .bept-entete { background: var(--bept-fond); }
}
.bept-entete__actions { margin-left: auto; display: flex; align-items: center; gap: var(--bept-e-2); }

/* Bouton d'ouverture du menu - masqué sur grand écran.
   Le sélecteur est doublé de .bept-btn : à spécificité égale, « .bept-btn {
   display: inline-flex } » gagnerait, étant déclaré plus bas dans la feuille,
   et le bouton resterait affiché sur toutes les tailles d'écran. */
.bept-btn.bept-menu-bouton { display: none; }

/* Le voile reste hors de la requête média : le script peut l'avoir posé avant
   un agrandissement de la fenêtre, et il doit rester couvrant plutôt que de
   retomber en bouton gris au fil du texte. */
.bept-voile {
  position: fixed;
  inset: 0;
  background: rgba(18, 33, 31, .45);
  z-index: 30;
  border: 0;
  padding: 0;
}

@media (max-width: 1024px) {
  .bept-btn.bept-menu-bouton { display: inline-flex; }
  .bept-barre {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--bept-largeur-barre);
    z-index: 40;
    transform: translateX(-100%);
    transition: transform var(--bept-duree-2) var(--bept-courbe);
    box-shadow: var(--bept-ombre-3);
  }
  .bept-barre[data-ouvert="true"] { transform: translateX(0); }
}

/* --- Navigation basse (mobile) ------------------------------------------ */
/* Barre de navigation flottante.
   Détachée des trois bords plutôt que collée au bas de l'écran : elle
   surplombe le contenu au lieu de le clore, et le peu de page qu'on aperçoit
   au-dessous indique qu'il reste à défiler. La marge basse ajoute la zone
   sûre de l'iPhone à l'écart voulu - sans elle, la barre se poserait sur la
   barre d'accueil du système. */
.bept-nav-basse {
  position: fixed;
  inset: auto var(--bept-e-4) calc(var(--bept-e-4) + env(safe-area-inset-bottom)) var(--bept-e-4);
  z-index: 30;
  display: flex;
  gap: var(--bept-e-1);
  padding: var(--bept-e-2);
  border-radius: var(--bept-r-plein);
  /* Verre : la page transparaît, floutée. La teinte reste celle des surfaces,
     la barre n'a pas à inventer une couleur de plus. */
  background: color-mix(in srgb, var(--bept-surface) 74%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--bept-filet) 55%, transparent);
  box-shadow: var(--bept-ombre-3);
}

/* Sans flou d'arrière-plan, le verre devient illisible : on retombe sur un
   aplat opaque plutôt que sur un voile qui laisse tout passer. */
@supports not (backdrop-filter: blur(1px)) {
  .bept-nav-basse { background: var(--bept-surface); }
}

.bept-nav-basse__lien {
  position: relative;
  isolation: isolate;
  overflow: hidden;          /* le halo ne déborde pas de la pastille */
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px;
  padding: var(--bept-e-2) var(--bept-e-1);
  border-radius: var(--bept-r-plein);
  color: var(--bept-attenue);
  font-size: 0.6875rem;      /* 11 px : libellé court sous l'icône */
  font-weight: var(--bept-graisse-moyenne);
  text-align: center;
  transition:
    background-color .18s ease,
    color .18s ease,
    /* Détente élastique : la courbe dépasse 1 puis revient, ce qui donne au
       relâchement le rebond d'une matière souple plutôt que d'un ressort
       mécanique. */
    transform .45s cubic-bezier(.22, 1.35, .36, 1);
}

/* Le halo de pression. Un dégradé radial posé sous le texte - z-index -1 dans
   un contexte isolé peint au-dessus du fond de la pastille et sous son
   contenu. Il se dilate à l'appui et se résorbe lentement au relâchement :
   l'aller est vif, le retour traîne, c'est ce décalage qui fait le liquide. */
.bept-nav-basse__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--bept-primaire) 42%, transparent) 0%,
    color-mix(in srgb, var(--bept-primaire) 12%, transparent) 55%,
    transparent 72%
  );
  opacity: 0;
  transform: scale(.3);
  pointer-events: none;
  transition: opacity .55s ease-out, transform .55s cubic-bezier(.22, 1.2, .36, 1);
}

.bept-nav-basse__lien:active::after {
  opacity: 1;
  transform: scale(1.25);
  transition-duration: .13s, .13s;
}

/* L'onglet s'enfonce à peine. Au-delà de deux ou trois pour cent, le libellé
   devient illisible pendant l'appui. */
.bept-nav-basse__lien:active { transform: scale(.94); }

/* Le verre s'épaissit sous le doigt : la barre entière trouble davantage le
   fond le temps de l'appui, puis se raffermit. C'est la matière qui réagit,
   pas seulement le bouton. */
.bept-nav-basse:has(.bept-nav-basse__lien:active) {
  backdrop-filter: blur(28px) saturate(2);
  -webkit-backdrop-filter: blur(28px) saturate(2);
  transform: scale(1.012);
}

.bept-nav-basse {
  transition:
    backdrop-filter .35s ease,
    -webkit-backdrop-filter .35s ease,
    transform .45s cubic-bezier(.22, 1.35, .36, 1);
}

/* L'onglet courant porte sa propre pastille pleine. La couleur seule ne
   suffisait pas : elle distingue mal un onglet actif d'un onglet qu'on
   survole, et disparaît pour qui ne perçoit pas la nuance de vert. */
.bept-nav-basse__lien[aria-current="page"] {
  background: var(--bept-primaire);
  color: var(--bept-primaire-contraste);
}

.bept-nav-basse__lien:hover:not([aria-current="page"]) {
  background: var(--bept-surface-2);
  color: var(--bept-encre-2);
}

.bept-nav-basse__lien svg { width: 22px; height: 22px; }

/* --- Glissement de la pastille d'un onglet à l'autre ---------------------- */
/* Chaque onglet est un lien : cliquer change de page, et deux documents
   n'ont aucun moyen de s'animer l'un vers l'autre. Sauf à le demander.
   « @view-transition » fait prendre au navigateur une image de la page qui
   part et de celle qui arrive, puis interpole entre les deux tout élément
   portant le même nom des deux côtés.
   La pastille active en porte un : le navigateur la voit à gauche avant, à
   droite après, et la fait glisser - sans une ligne de JavaScript, et sans
   rien casser là où l'API manque, où la page change simplement d'un coup. */
@view-transition { navigation: auto; }

.bept-nav-basse__lien[aria-current="page"] {
  view-transition-name: bept-onglet-actif;
}

/* La courbe dépasse son but avant d'y revenir : la pastille arrive, déborde
   d'un cheveu, puis se pose. C'est ce dépassement qui donne la matière. */
::view-transition-group(bept-onglet-actif) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.34, 1.32, .42, 1);
}

/* Le libellé de l'ancien onglet s'efface vite, celui du nouveau se révèle
   plus lentement : sans cela on lit les deux mots superposés pendant que la
   pastille voyage.
   Les deux portent en plus la déformation de la goutte. Le groupe, lui, est
   animé par le navigateur, qui l'emmène d'un onglet à l'autre : les échelles
   posées ici se composent avec ce déplacement au lieu de le remplacer. */
::view-transition-old(bept-onglet-actif) {
  animation:
    bept-fondu-sortie .16s ease-out forwards,
    bept-goutte-depart .5s cubic-bezier(.34, 1.32, .42, 1);
}
::view-transition-new(bept-onglet-actif) {
  animation:
    bept-fondu-entree .42s ease-in .1s backwards,
    bept-goutte-arrivee .5s cubic-bezier(.34, 1.32, .42, 1);
}

/* La goutte.
   Ce qui fait qu'un liquide se lit comme un liquide n'est pas la vitesse mais
   la conservation du volume : ce qui s'allonge s'amincit, ce qui s'écrase
   s'élargit. Les deux échelles varient donc toujours en sens inverse.
   Au départ la pastille s'étire dans le sens du voyage et se pince - c'est le
   détachement. À l'arrivée elle s'aplatit contre sa nouvelle place, puis
   revient sur elle-même en dépassant une fois, comme une goutte qui se
   reforme. Le léger flou du milieu du trajet fait le reste : une masse qui se
   déplace vite n'a pas de bord net. */
@keyframes bept-goutte-depart {
  0%   { transform: scale(1, 1);       filter: blur(0); }
  55%  { transform: scale(1.55, .68);  filter: blur(3px); }
  100% { transform: scale(1.75, .58);  filter: blur(4px); }
}

@keyframes bept-goutte-arrivee {
  0%   { transform: scale(1.7, .6);    filter: blur(4px); }
  35%  { transform: scale(1.25, .82);  filter: blur(2px); }
  58%  { transform: scale(.82, 1.16);  filter: blur(.6px); }
  78%  { transform: scale(1.08, .95);  filter: blur(0); }
  90%  { transform: scale(.97, 1.02);  filter: blur(0); }
  100% { transform: scale(1, 1);       filter: blur(0); }
}

/* Le fondu de la page, ramené à un battement de cil.
   L'image de l'ancienne page n'est pas décorative : elle fait le pont
   pendant que le nouveau document se peint. La retirer - en ôtant son nom -
   supprimait ce pont, et laissait voir la toile nue le temps d'une image.
   On la garde donc, mais on abrège son croisement : à cent millisecondes,
   le mélange des deux surfaces ne se perçoit plus, et le relais reste
   assuré. Le voyage de la pastille, lui, dure sa demi-seconde par-dessus. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .1s;
}

@keyframes bept-fondu-sortie { to   { opacity: 0; } }
@keyframes bept-fondu-entree { from { opacity: 0; } }

/* Qui a demandé moins de mouvement garde le changement d'état, pas la
   matière : la couleur suffit à dire que l'appui a été pris, et la page se
   substitue sans glissement ni fondu. */
@media (prefers-reduced-motion: reduce) {
  .bept-nav-basse,
  .bept-nav-basse__lien,
  .bept-nav-basse__lien::after { transition: none; }
  .bept-nav-basse__lien:active { transform: none; }
  .bept-nav-basse:has(.bept-nav-basse__lien:active) { transform: none; }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}


/* =========================================================================
   5. TYPOGRAPHIE UTILITAIRE
   ========================================================================= */

.bept-display { font-size: var(--bept-t-display); letter-spacing: -.02em; }
.bept-t1 { font-size: var(--bept-t-1);  letter-spacing: -.015em; }
.bept-t2 { font-size: var(--bept-t-2);  letter-spacing: -.01em; }
.bept-t3 { font-size: var(--bept-t-3); }
.bept-legende { font-size: var(--bept-t-legende); color: var(--bept-attenue); }
.bept-attenue  { color: var(--bept-attenue); }
.bept-nombre { font-variant-numeric: tabular-nums; }


/* =========================================================================
   6. BOUTONS
   ========================================================================= */

.bept-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bept-e-2);
  min-height: var(--bept-cible-tactile);
  padding: var(--bept-e-2) var(--bept-e-5);
  border: 1px solid transparent;
  /* En gélule : la forme s'accorde aux grands arrondis des panneaux. */
  border-radius: var(--bept-r-plein);
  font-family: inherit;
  font-size: var(--bept-t-libelle);
  font-weight: var(--bept-graisse-forte);
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--bept-duree-1) var(--bept-courbe),
              border-color var(--bept-duree-1) var(--bept-courbe),
              transform var(--bept-duree-1) var(--bept-courbe);
}
.bept-btn:active { transform: translateY(1px); }
/* Bouton indisponible.
   L'opacité seule le rendait illisible : appliquée à un libellé déjà gris, sur
   un fond clair, elle n'en laissait qu'un fantôme. Un bouton refusé doit
   pourtant se lire - c'est lui qui dit ce qui n'est pas permis. Il garde donc
   un fond et une encre francs, et n'annonce son indisponibilité que par
   l'absence de relief et le curseur. */
.bept-btn:disabled,
.bept-btn[aria-disabled="true"] {
  background: var(--bept-surface-2);
  border-color: transparent;
  color: var(--bept-attenue);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.bept-btn svg { width: 18px; height: 18px; flex: none; }

/* Une seule action principale par écran : elle seule porte le plein.
   Elle est dorée, sous un texte sombre - le seul endroit où cette couleur
   apparaît en aplat, et donc où elle garde sa force d'appel. */
.bept-btn--principal {
  background: var(--bept-accent);
  color: var(--bept-accent-contraste);
}
.bept-btn--principal:hover { background: var(--bept-accent-fonce); }

.bept-btn--secondaire {
  background: var(--bept-surface);
  color: var(--bept-encre);
  border-color: var(--bept-filet-fort);
}
.bept-btn--secondaire:hover { background: var(--bept-surface-2); }

.bept-btn--discret {
  background: transparent;
  color: var(--bept-encre-2);
}
.bept-btn--discret:hover { background: var(--bept-surface-2); }

.bept-btn--danger {
  background: var(--bept-erreur);
  color: #FFFFFF;
}
.bept-btn--danger:hover { filter: brightness(.92); }

/* --- Bouton à deux états (filtres) --------------------------------------- */
/* Le filtre retenu se lit à la couleur, pas à une nuance de gris que le survol
   du voisin imite déjà. On s'accroche à aria-pressed plutôt qu'à une classe :
   l'état est porté par l'attribut, et le script des filtres réécrit className
   à chaque clic. */
.bept-btn[aria-pressed="true"] {
  background: var(--bept-primaire);
  border-color: var(--bept-primaire);
  color: var(--bept-primaire-contraste);
}
.bept-btn[aria-pressed="true"]:hover {
  background: var(--bept-primaire-fonce);
  border-color: var(--bept-primaire-fonce);
}
/* Le compteur reste en retrait sans repasser à la teinte atténuée, illisible
   sur le fond plein. */
.bept-btn[aria-pressed="true"] .bept-attenue { color: inherit; opacity: .75; }

.bept-btn--pleine-largeur { width: 100%; }

/* Bouton réduit à une icône : le libellé accessible reste obligatoire. */
.bept-btn--icone {
  padding: var(--bept-e-2);
  min-width: var(--bept-cible-tactile);
}

/* Indicateur de chargement intégré au bouton. */
.bept-btn[data-chargement="true"] { pointer-events: none; opacity: .7; }
.bept-btn[data-chargement="true"]::before {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: bept-rotation .6s linear infinite;
}

@keyframes bept-rotation { to { transform: rotate(360deg); } }


/* =========================================================================
   7. FORMULAIRES
   ========================================================================= */

.bept-form { display: flex; flex-direction: column; gap: var(--bept-e-5); }

.bept-champ { display: flex; flex-direction: column; gap: var(--bept-e-2); }

.bept-libelle {
  font-size: var(--bept-t-libelle);
  font-weight: var(--bept-graisse-moyenne);
  color: var(--bept-encre);
}
.bept-libelle__facultatif {
  color: var(--bept-attenue);
  font-weight: var(--bept-graisse-normale);
}

.bept-input,
.bept-select,
.bept-textarea {
  width: 100%;
  min-height: var(--bept-cible-tactile);
  padding: var(--bept-e-2) var(--bept-e-3);
  background: var(--bept-surface);
  color: var(--bept-encre);
  border: 1px solid var(--bept-filet-fort);
  border-radius: var(--bept-r-2);
  font-family: inherit;
  font-size: var(--bept-t-corps);   /* 16 px : évite le zoom auto sur iOS */
  line-height: 1.5;
  transition: border-color var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe);
}
.bept-textarea { min-height: 6rem; resize: vertical; }

.bept-input::placeholder,
.bept-textarea::placeholder { color: var(--bept-attenue); }

.bept-input:focus,
.bept-select:focus,
.bept-textarea:focus {
  outline: none;
  border-color: var(--bept-primaire);
  box-shadow: 0 0 0 3px var(--bept-primaire-doux);
}

.bept-input[aria-invalid="true"],
.bept-select[aria-invalid="true"],
.bept-textarea[aria-invalid="true"] { border-color: var(--bept-erreur); }
.bept-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bept-erreur-doux); }

/* Aide et erreur : l'erreur remplace l'aide, jamais les deux à la fois. */
.bept-aide { font-size: var(--bept-t-legende); color: var(--bept-attenue); }
.bept-erreur-champ {
  display: flex;
  align-items: center;
  gap: var(--bept-e-1);
  font-size: var(--bept-t-legende);
  color: var(--bept-erreur);
  font-weight: var(--bept-graisse-moyenne);
}

/* Groupe de champs sur une ligne, repliable en colonne. */
.bept-champs-ligne {
  display: grid;
  gap: var(--bept-e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* Section de formulaire : regroupe et hiérarchise sans surcharger. */
.bept-section {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-4);
  padding-top: var(--bept-e-5);
  border-top: 1px solid var(--bept-filet);
}
.bept-section:first-child { padding-top: 0; border-top: none; }
.bept-section__titre { font-size: var(--bept-t-3); }

/* Barre d'actions de formulaire. */
.bept-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bept-e-2);
  padding-top: var(--bept-e-4);
  border-top: 1px solid var(--bept-filet);
}


/* =========================================================================
   8. CARTES
   ========================================================================= */

/* Les surfaces se détachent par l'ombre et non par un filet : sur le fond
   teinté, elles flottent au lieu d'être découpées. */
.bept-carte {
  background: var(--bept-surface);
  border: 1px solid transparent;
  border-radius: var(--bept-r-4);
  box-shadow: var(--bept-ombre-1);
  padding: var(--bept-e-5);
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-4);
  /* Même raison que pour .bept-contenu : sans cela, la carte s'étire à la
     largeur de son contenu le plus large au lieu de le laisser défiler. */
  min-width: 0;
}

/* Une carte qui porte un tableau se referme sur lui.
   Un tableau large est déjà clippé par son conteneur à overflow-x, mais il
   continue de compter dans la largeur calculée de ses ancêtres : la page
   gagnait ainsi un défilement horizontal vers une zone vide. Le confinement
   ne s'applique qu'à ces cartes-là, aucune autre n'ayant à déborder. */
.bept-carte:has(.bept-tableau-conteneur) { overflow: hidden; }

/* Carte qui n'enveloppe qu'une liste : les lignes touchent les bords, c'est
   à elles de respirer.
   Le découpage n'est pas décoratif. Sans lui, le fond de survol d'une ligne
   se peint par-dessus les angles arrondis de la carte, qui paraissent alors
   carrés le temps du survol - et franchement carrés sur la première et la
   dernière ligne, dont le fond déborde les quatre coins. */
.bept-carte--liste {
  padding: 0;
  overflow: hidden;
}

.bept-carte__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bept-e-3);
}
.bept-carte__titre { font-size: var(--bept-t-3); }

/* Carte cliquable : elle doit avoir l'air cliquable. */
.bept-carte--lien {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe),
              transform var(--bept-duree-1) var(--bept-courbe);
}
.bept-carte--lien:hover {
  text-decoration: none;
  border-color: var(--bept-filet-fort);
  box-shadow: var(--bept-ombre-2);
  transform: translateY(-2px);
}
/* L'appui ramène la carte au ras de la page : le clic se sent. */
.bept-carte--lien:active { transform: translateY(0); }

/* --- Galerie horizontale -------------------------------------------------
   Rangée de tuiles-images que l'on fait défiler latéralement. Réservée aux
   collections courtes et visuelles - les spécialités - où l'image identifie
   mieux que le texte. Le défilement est natif : la molette, le doigt, la
   tabulation et les touches fléchées fonctionnent sans un octet de script. */
.bept-galerie {
  /* Repère de positionnement des tuiles : sans lui, leur offsetLeft se mesure
     depuis un ancêtre lointain et le script ne sait plus laquelle est en vue. */
  position: relative;
  display: flex;
  gap: var(--bept-e-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* De quoi laisser respirer l'ombre des tuiles, que le débordement
     rognerait sinon. */
  padding: var(--bept-e-2) var(--bept-e-1) var(--bept-e-5);
  /* Le calage aligne la tuile sur le bord utile et non sur le bord du padding :
     sans cela, la galerie s'ouvre déjà légèrement défilée. */
  scroll-padding-inline-start: var(--bept-e-1);
  scrollbar-width: thin;
}

.bept-galerie__tuile {
  position: relative;
  flex: none;
  width: 17rem;
  aspect-ratio: 1;
  scroll-snap-align: start;
  border-radius: var(--bept-r-4);
  overflow: hidden;
  box-shadow: var(--bept-ombre-1);
  /* Repli sous l'image : une fiche sans visuel, ou dont le fichier a disparu,
     reste une tuile verte lisible plutôt qu'un rectangle vide. */
  background: var(--bept-primaire);
  color: #FFFFFF;
  text-decoration: none;
  transition: transform var(--bept-duree-2) var(--bept-courbe),
              box-shadow var(--bept-duree-2) var(--bept-courbe);
}
/* La tuile visée domine ses voisines, comme la vignette avancée d'une
   devanture. */
.bept-galerie__tuile:hover,
.bept-galerie__tuile:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--bept-ombre-3);
  text-decoration: none;
}

.bept-galerie__image {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Repli le temps qu'une vraie photo existe : une icône plutôt qu'une image
   cassée, sur le même aplat que .bept-galerie__tuile. */
.bept-galerie__image--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
}
.bept-galerie__image--vide svg { width: 35%; height: 35%; }

/* Voile dégradé : le titre reste lisible quelle que soit la photo, ce qu'une
   ombre portée sur le texte ne garantit pas. */
.bept-galerie__corps {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--bept-e-5) var(--bept-e-4) var(--bept-e-4);
  background: linear-gradient(to top,
              rgba(10, 20, 18, .92) 0%,
              rgba(10, 20, 18, .70) 45%,
              rgba(10, 20, 18, 0) 100%);
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
}
.bept-galerie__titre {
  font-size: var(--bept-t-2);
  font-weight: var(--bept-graisse-forte);
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.bept-galerie__desc {
  font-size: var(--bept-t-legende);
  color: rgba(255, 255, 255, .82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Progression de la galerie ------------------------------------------- */
.bept-galerie-pied {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  flex-wrap: wrap;
}
.bept-galerie-piste {
  flex: 1;
  min-width: 6rem;
  height: 3px;
  border-radius: var(--bept-r-plein);
  background: var(--bept-filet);
  overflow: hidden;
}
.bept-galerie-piste__avancement {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--bept-accent);
  transition: width var(--bept-duree-2) var(--bept-courbe);
}
.bept-galerie-pied__numeros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bept-e-2);
  /* Sans ça, un flex-item garde la largeur intrinsèque de son contenu : avec
     une vingtaine de numéros sur une seule ligne, le pied déborde de la
     carte au lieu de passer à la ligne. */
  min-width: 0;
}
.bept-galerie-pied__numero {
  min-width: var(--bept-cible-tactile);
  min-height: var(--bept-cible-tactile);
  padding: 0 var(--bept-e-2);
  border: 0;
  background: none;
  border-radius: var(--bept-r-plein);
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--bept-attenue);
  cursor: pointer;
  transition: color var(--bept-duree-1) var(--bept-courbe),
              background var(--bept-duree-1) var(--bept-courbe);
}
.bept-galerie-pied__numero:hover { background: var(--bept-surface-2); color: var(--bept-encre); }
.bept-galerie-pied__numero[aria-current="true"] {
  color: var(--bept-encre);
  font-weight: var(--bept-graisse-forte);
  font-size: var(--bept-t-2);
}

/* --- Carte statistique --------------------------------------------------- */
.bept-stat {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
  padding: var(--bept-e-5);
  background: var(--bept-surface);
  border: 1px solid transparent;
  border-radius: var(--bept-r-4);
  box-shadow: var(--bept-ombre-1);
}
/* La tuile n'est pas cliquable : elle se détache légèrement au survol pour
   accompagner la lecture, sans le décollement qui promettrait un clic. */
.bept-stat {
  transition: border-color var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe);
}
.bept-stat:hover {
  border-color: var(--bept-filet-fort);
  box-shadow: var(--bept-ombre-1);
}
.bept-stat__libelle {
  font-size: var(--bept-t-libelle);
  color: var(--bept-attenue);
  font-weight: var(--bept-graisse-moyenne);
}
.bept-stat__valeur {
  font-size: var(--bept-t-display);
  font-weight: var(--bept-graisse-forte);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bept-stat__detail { font-size: var(--bept-t-legende); color: var(--bept-attenue); }

/* --- Tuiles teintées par état -------------------------------------------
   Chaque état garde d'un écran à l'autre la couleur que lui donnent déjà les
   badges : la rangée de compteurs se lit alors sans lire les libellés. Le
   fond reste une teinte douce - le chiffre porte la couleur pleine, jamais
   l'inverse, sans quoi la rangée virerait au panneau d'alerte. */
.bept-stat--attention { background: var(--bept-attention-doux); }
.bept-stat--attention .bept-stat__valeur { color: var(--bept-attention); }

.bept-stat--info { background: var(--bept-info-doux); }
.bept-stat--info .bept-stat__valeur { color: var(--bept-info); }

.bept-stat--succes { background: var(--bept-succes-doux); }
.bept-stat--succes .bept-stat__valeur { color: var(--bept-succes); }

.bept-stat--neutre { background: var(--bept-surface-2); }

/* Tuile cliquable : elle mène à la liste de ce qu'elle compte. */
.bept-stat--lien {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe);
}
.bept-stat--lien:hover,
.bept-stat--lien:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--bept-ombre-2);
  text-decoration: none;
}
.bept-stat--lien:active { transform: translateY(0); }

/* Sur ces fonds teintés, le gris des libellés perd son contraste : on remonte
   d'un cran vers l'encre. */
.bept-stat--attention .bept-stat__libelle,
.bept-stat--info .bept-stat__libelle,
.bept-stat--succes .bept-stat__libelle,
.bept-stat--neutre .bept-stat__libelle { color: var(--bept-encre-2); }

.bept-stat--attention .bept-stat__detail,
.bept-stat--info .bept-stat__detail,
.bept-stat--succes .bept-stat__detail,
.bept-stat--neutre .bept-stat__detail { color: var(--bept-encre-2); }


/* =========================================================================
   9. TABLEAUX ET LISTES
   ========================================================================= */

/* Le tableau défile dans son propre conteneur : la page ne part jamais
   en défilement horizontal. */
.bept-tableau-conteneur {
  overflow-x: auto;
  /* Sans min-width, un enfant de conteneur flex refuse de descendre sous la
     largeur de son contenu : le tableau élargissait la carte au lieu de
     défiler à l'intérieur, et l'overflow-x ci-dessus ne servait à rien. */
  min-width: 0;
  background: var(--bept-surface);
  border: 1px solid var(--bept-filet);
  border-radius: var(--bept-r-3);
}

.bept-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bept-t-libelle);
}
.bept-tableau th,
.bept-tableau td {
  text-align: left;
  padding: var(--bept-e-3) var(--bept-e-4);
  border-bottom: 1px solid var(--bept-filet);
  vertical-align: middle;
}
.bept-tableau th {
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-forte);
  color: var(--bept-attenue);
  background: var(--bept-surface-2);
  white-space: nowrap;
}
.bept-tableau tbody tr:last-child td { border-bottom: none; }
.bept-tableau tbody tr:hover { background: var(--bept-surface-2); }
.bept-tableau__nombre { font-variant-numeric: tabular-nums; text-align: right; }

/* Cellule identité : avatar + nom. */
.bept-identite { display: flex; align-items: center; gap: var(--bept-e-3); }
.bept-avatar {
  width: 36px; height: 36px;
  border-radius: var(--bept-r-plein);
  object-fit: cover;
  background: var(--bept-surface-2);
  flex: none;
}
.bept-avatar--lg { width: 56px; height: 56px; }
.bept-avatar--xl { width: 72px; height: 72px; }

/* Anneau doré, repris de la maquette : il distingue la photo de la personne
   connectée des vignettes de listes, qui restent nues. Deux ombres portées
   plutôt qu'une bordure - celle-ci mangerait la photo, l'image étant
   dimensionnée au pixel près. */
.bept-avatar--anneau {
  box-shadow: 0 0 0 2px var(--bept-accent),
              0 0 0 4px var(--bept-surface);
}
/* Sur le vert de la barre, l'anneau extérieur reprend le fond du panneau :
   du blanc y ferait une pastille. */
.bept-barre .bept-avatar--anneau,
.bept-connexion .bept-avatar--anneau {
  box-shadow: 0 0 0 2px var(--bept-accent),
              0 0 0 4px var(--bept-barre-fond);
}
.bept-identite__nom { font-weight: var(--bept-graisse-moyenne); color: var(--bept-encre); }
.bept-identite__meta { font-size: var(--bept-t-legende); color: var(--bept-attenue); }


/* --- Note et avis --------------------------------------------------------
   La note se lit en un coup d'œil : les étoiles donnent l'ordre de grandeur,
   le chiffre la précision, le décompte la confiance qu'on peut y accorder -
   4,8 sur trois avis ne vaut pas 4,8 sur cent. */
/* La note accompagne une ligne de méta - nom du centre, numéro INAMI - qui
   est en taille légende. À la taille libellé, elle dépassait sa voisine et
   tirait l'œil plus que la ligne qu'elle complète : elle prend donc la même.
   Et elle ne se met plus en travers du retour à la ligne : nowrap dans un
   conteneur à min-width: 0 poussait la carte au-delà de l'écran étroit. */
.bept-note {
  display: inline-flex;
  align-items: center;
  gap: var(--bept-e-1);
  font-size: var(--bept-t-legende);
  flex-wrap: wrap;
}
/* Les étoiles, elles, ne se coupent jamais en deux lignes. */
.bept-note__etoiles { white-space: nowrap; }
.bept-note__etoiles {
  position: relative;
  display: inline-block;
  color: var(--bept-filet-fort);
  letter-spacing: .08em;
}
/* La portion remplie est un calque superposé, dont la largeur porte la note.
   Cinq caractères découpés au pourcentage rendent les demi-étoiles sans image
   ni police particulière. */
.bept-note__remplies {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--bept-accent-fonce);
  white-space: nowrap;
}
.bept-note__valeur {
  font-weight: var(--bept-graisse-forte);
  font-variant-numeric: tabular-nums;
  color: var(--bept-encre);
}
.bept-note__total { color: var(--bept-attenue); font-size: var(--bept-t-legende); }

/* Sans avis, on le dit plutôt que d'afficher cinq étoiles vides, qui se
   liraient comme une mauvaise note. */
.bept-note--vide { color: var(--bept-attenue); font-size: var(--bept-t-legende); }

/* --- Saisie de la note --------------------------------------------------- */
.bept-etoiles-saisie {
  display: flex;
  gap: var(--bept-e-1);
}
.bept-etoiles-saisie__bouton {
  background: none;
  border: 0;
  padding: var(--bept-e-1);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--bept-filet-fort);
  transition: color var(--bept-duree-1) var(--bept-courbe),
              transform var(--bept-duree-1) var(--bept-courbe);
}
.bept-etoiles-saisie__bouton[aria-checked="true"] { color: var(--bept-accent-fonce); }
.bept-etoiles-saisie__bouton:hover { transform: scale(1.15); }

/* --- Listes de réglages --------------------------------------------------
   Groupes de lignes réunis dans une même surface arrondie, séparés par des
   filets internes plutôt que par des marges : la parenté des réglages se voit
   avant d'être lue. Sert aussi bien aux lignes de navigation qu'aux champs
   d'un formulaire, dont le libellé passe alors à gauche et le champ à droite. */
.bept-reglages {
  background: var(--bept-surface);
  border-radius: var(--bept-r-4);
  box-shadow: var(--bept-ombre-1);
  overflow: hidden;
}

.bept-reglages__titre {
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-forte);
  color: var(--bept-attenue);
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: var(--bept-e-5) var(--bept-e-2) var(--bept-e-2);
}

.bept-reglages__ligne {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  min-height: var(--bept-cible-tactile);
  padding: var(--bept-e-4) var(--bept-e-5);
  border-bottom: 1px solid var(--bept-filet);
  color: inherit;
  text-decoration: none;
}
.bept-reglages__ligne:last-child { border-bottom: none; }

/* Seules les lignes qui mènent quelque part réagissent au survol. */
a.bept-reglages__ligne,
button.bept-reglages__ligne {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--bept-duree-1) var(--bept-courbe);
}
a.bept-reglages__ligne:hover,
button.bept-reglages__ligne:hover {
  background: var(--bept-surface-2);
  text-decoration: none;
}

.bept-reglages__icone {
  width: 20px; height: 20px; flex: none;
  color: var(--bept-attenue);
}
.bept-reglages__libelle {
  font-weight: var(--bept-graisse-moyenne);
  flex: none;
  min-width: 9rem;
}
.bept-reglages__aide {
  display: block;
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-normale);
  color: var(--bept-attenue);
}
/* Le champ occupe tout ce que le libellé laisse. */
.bept-reglages__valeur { flex: 1; min-width: 0; }
.bept-reglages__valeur .bept-input,
.bept-reglages__valeur .bept-select,
.bept-reglages__valeur .bept-textarea { width: 100%; }

/* La déconnexion se distingue des autres lignes : c'est la seule qui fasse
   quitter l'application. */
.bept-reglages__libelle--sortie { color: var(--bept-erreur); }

.bept-reglages__chevron {
  margin-left: auto;
  width: 18px; height: 18px; flex: none;
  color: var(--bept-attenue);
}

/* Sous 640 px, le libellé repasse au-dessus du champ : côte à côte, il ne
   resterait pas assez de largeur pour saisir une adresse. */
@media (max-width: 640px) {
  .bept-reglages__ligne { flex-wrap: wrap; gap: var(--bept-e-2); }
  .bept-reglages__libelle { min-width: 100%; }
}

/* Actions de ligne : discrètes par défaut, pour ne pas concurrencer
   l'action principale de l'écran. */
.bept-actions-ligne { display: flex; gap: var(--bept-e-1); justify-content: flex-end; }

/* --- Liste (préférée au tableau sur mobile) ------------------------------ */
.bept-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bept-liste__item {
  display: flex;
  align-items: center;
  gap: var(--bept-e-3);
  padding: var(--bept-e-3) var(--bept-e-4);
  border-bottom: 1px solid var(--bept-filet);
  color: inherit;
  text-decoration: none;
  min-height: var(--bept-cible-tactile);
}
.bept-liste__item:last-child { border-bottom: none; }
/* Le fond s'installe au lieu de claquer ; les lignes non cliquables ne bougent
   pas, seules celles qui portent un lien se décalent. */
.bept-liste__item {
  transition: background var(--bept-duree-1) var(--bept-courbe),
              padding-left var(--bept-duree-1) var(--bept-courbe);
}
.bept-liste__item:hover { background: var(--bept-surface-2); }
a.bept-liste__item:hover { padding-left: var(--bept-e-5); }
.bept-liste__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bept-liste__titre {
  font-weight: var(--bept-graisse-moyenne);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bept-liste__meta { font-size: var(--bept-t-legende); color: var(--bept-attenue); }

/* Date de fin de ligne - le début prévu d'une mission en cours. Du texte,
   pas un badge : un badge répétant "En cours" sur chaque ligne d'une section
   déjà titrée "En cours" ne distingue rien, ici la date le fait. */
.bept-liste__date {
  flex: none;
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-moyenne);
  color: var(--bept-primaire);
  font-variant-numeric: tabular-nums;
  text-align: right;
}


/* =========================================================================
   10. BADGES ET PASTILLES D'ÉTAT
   ========================================================================= */

/* L'état n'est jamais porté par la seule couleur : teinte + libellé,
   et une pastille pour les daltoniens. */
.bept-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bept-e-1);
  padding: var(--bept-e-1) var(--bept-e-2);
  border-radius: var(--bept-r-1);
  font-size: var(--bept-t-legende);
  font-weight: var(--bept-graisse-forte);
  white-space: nowrap;
  background: var(--bept-surface-2);
  color: var(--bept-encre-2);
}
.bept-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.bept-badge--succes    { background: var(--bept-succes-doux);    color: var(--bept-succes); }
.bept-badge--attention { background: var(--bept-attention-doux); color: var(--bept-attention); }
.bept-badge--erreur    { background: var(--bept-erreur-doux);    color: var(--bept-erreur); }
.bept-badge--info      { background: var(--bept-info-doux);      color: var(--bept-info); }
.bept-badge--neutre    { background: var(--bept-surface-2);      color: var(--bept-attenue); }

/* La pastille des états vivants - mission en cours, message non lu - respire.
   Seule celle-ci bouge : si toutes les pastilles pulsaient, la liste
   entière deviendrait du bruit et le signal ne dirait plus rien.
   Le cycle est lent (1,8 s, ~0,55 Hz) : il attire l'œil sans jamais
   approcher des trois éclats par seconde qui posent problème aux
   personnes photosensibles. Le bloc « prefers-reduced-motion » de la
   section 2 l'immobilise sur son état plein. */
.bept-badge--info::before {
  animation: bept-pouls 1.8s var(--bept-courbe) infinite;
}
@keyframes bept-pouls {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}


/* =========================================================================
   11. ALERTES
   ========================================================================= */

.bept-alerte {
  display: flex;
  gap: var(--bept-e-3);
  padding: var(--bept-e-4);
  border-radius: var(--bept-r-3);
  border: 1px solid transparent;
  font-size: var(--bept-t-libelle);
}
.bept-alerte__corps { display: flex; flex-direction: column; gap: var(--bept-e-1); }
.bept-alerte__titre { font-weight: var(--bept-graisse-forte); }
.bept-alerte svg { width: 20px; height: 20px; flex: none; }

.bept-alerte--succes {
  background: var(--bept-succes-doux);
  border-color: var(--bept-succes);
  color: var(--bept-succes);
}
.bept-alerte--attention {
  background: var(--bept-attention-doux);
  border-color: var(--bept-attention);
  color: var(--bept-attention);
}
.bept-alerte--erreur {
  background: var(--bept-erreur-doux);
  border-color: var(--bept-erreur);
  color: var(--bept-erreur);
}
.bept-alerte--info {
  background: var(--bept-info-doux);
  border-color: var(--bept-info);
  color: var(--bept-info);
}


/* =========================================================================
   12. ÉTATS VIDES
   ========================================================================= */

/* Un état vide oriente : il explique et propose une action.
   Il ne se contente pas d'annoncer l'absence de données. */
.bept-vide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--bept-e-3);
  padding: var(--bept-e-8) var(--bept-e-5);
}
.bept-vide__icone {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--bept-r-plein);
  background: var(--bept-primaire-doux);
  color: var(--bept-primaire-fonce);
  margin-bottom: var(--bept-e-1);
}
.bept-vide__icone svg { width: 24px; height: 24px; }
.bept-vide__titre { font-size: var(--bept-t-3); }
.bept-vide__texte {
  color: var(--bept-attenue);
  font-size: var(--bept-t-libelle);
  max-width: 42ch;
}


/* =========================================================================
   13. SQUELETTES DE CHARGEMENT
   ========================================================================= */

.bept-squelette {
  background: linear-gradient(
    90deg,
    var(--bept-surface-2) 25%,
    var(--bept-filet) 37%,
    var(--bept-surface-2) 63%
  );
  background-size: 400% 100%;
  animation: bept-scintillement 1.4s ease infinite;
  border-radius: var(--bept-r-1);
}
.bept-squelette--texte { height: 1em; margin: .25em 0; }
.bept-squelette--titre { height: 1.5em; width: 40%; }
.bept-squelette--avatar { width: 36px; height: 36px; border-radius: var(--bept-r-plein); }

@keyframes bept-scintillement {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}


/* =========================================================================
   14. PANNEAU LATÉRAL ET BOÎTES DE DIALOGUE
   ========================================================================= */

/* <dialog> natif : gestion du focus et de la touche Échap par le navigateur,
   sans bibliothèque tierce. */
.bept-dialogue {
  padding: 0;
  border: none;
  border-radius: var(--bept-r-3);
  background: var(--bept-surface);
  color: var(--bept-encre);
  box-shadow: var(--bept-ombre-3);
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
}
.bept-dialogue::backdrop { background: rgba(18, 33, 31, .45); }
.bept-dialogue__corps {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-4);
  padding: var(--bept-e-5);
}
.bept-dialogue__titre { font-size: var(--bept-t-2); }
.bept-dialogue__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--bept-e-2);
}

/* Panneau latéral : création et édition sans quitter la liste. */
.bept-panneau {
  padding: 0;
  border: none;
  background: var(--bept-surface);
  color: var(--bept-encre);
  box-shadow: var(--bept-ombre-3);
  margin: 0 0 0 auto;
  height: 100vh;
  max-height: 100vh;
  width: min(30rem, 100vw);
}
.bept-panneau::backdrop { background: rgba(18, 33, 31, .45); }
.bept-panneau__corps {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-5);
  padding: var(--bept-e-5);
  height: 100%;
  overflow-y: auto;
}


/* =========================================================================
   15. UTILITAIRES
   ========================================================================= */

.bept-pile   { display: flex; flex-direction: column; }
/* Le retour à la ligne est le défaut : sans lui, une rangée de boutons - les
   filtres de la liste des missions - poussait la carte au-delà de l'écran et
   entraînait toute la page en défilement horizontal. */
.bept-ligne  { display: flex; align-items: center; flex-wrap: wrap; }
.bept-espace { margin-left: auto; }

.bept-g-1 { gap: var(--bept-e-1); }
.bept-g-2 { gap: var(--bept-e-2); }
.bept-g-3 { gap: var(--bept-e-3); }
.bept-g-4 { gap: var(--bept-e-4); }
.bept-g-5 { gap: var(--bept-e-5); }

/* Marge basse réservée à la navigation fixe du mobile. */
/* La barre flotte : la réserve doit couvrir sa hauteur, l'écart qui la
   sépare du bas, et la zone sûre du téléphone. Sans les trois, la dernière
   ligne de contenu se lit derrière le verre. */
.bept-marge-nav-basse {
  padding-bottom: calc(68px + var(--bept-e-4) + var(--bept-e-5) + env(safe-area-inset-bottom));
}


/* =========================================================================
   16. MOUVEMENT
   =========================================================================
   Le mouvement sert la lecture : il donne un sens d'arrivée au contenu et
   confirme ce qui répond au doigt. Rien ne bouge sans raison, et rien ne dure
   assez longtemps pour retarder quelqu'un qui connaît déjà son chemin.

   Le bloc « prefers-reduced-motion » de la section 2 neutralise tout ceci :
   les durées tombent à .01 ms et chaque bloc s'affiche d'emblée plutôt que de
   rester invisible.

   Le mode de remplissage est « backwards » et non « both » : il couvre le délai
   d'attente (le bloc reste invisible jusqu'à son tour) sans verrouiller l'état
   final. Avec « both », l'animation garderait la main sur transform après la
   fin et les élévations au survol ci-dessous n'auraient aucun effet.
   ========================================================================= */

/* --- Entrée de vue ------------------------------------------------------- */
/* Une montée de 10 px : assez pour installer un sens de lecture, trop peu pour
   donner l'impression que la page se remonte à chaque visite. */
@keyframes bept-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.bept-contenu > *,
.bept-contenu > .bept-grille > * {
  animation: bept-entree var(--bept-duree-3) var(--bept-courbe) backwards;
}

/* La grille entre par ses cartes, pas d'un seul bloc. */
.bept-contenu > .bept-grille { animation: none; }

/* Cascade. Au-delà du sixième bloc tout arrive ensemble : faire attendre le bas
   d'une longue liste de missions n'apporte rien. */
.bept-contenu > *:nth-child(2)  { animation-delay: calc(var(--bept-cascade) * 1); }
.bept-contenu > *:nth-child(3)  { animation-delay: calc(var(--bept-cascade) * 2); }
.bept-contenu > *:nth-child(4)  { animation-delay: calc(var(--bept-cascade) * 3); }
.bept-contenu > *:nth-child(5)  { animation-delay: calc(var(--bept-cascade) * 4); }
.bept-contenu > *:nth-child(n+6) { animation-delay: calc(var(--bept-cascade) * 5); }

/* Les cartes statistiques suivent l'en-tête de page, une par une. */
.bept-contenu > .bept-grille > *:nth-child(1) { animation-delay: calc(var(--bept-cascade) * 1); }
.bept-contenu > .bept-grille > *:nth-child(2) { animation-delay: calc(var(--bept-cascade) * 2); }
.bept-contenu > .bept-grille > *:nth-child(3) { animation-delay: calc(var(--bept-cascade) * 3); }
.bept-contenu > .bept-grille > *:nth-child(4) { animation-delay: calc(var(--bept-cascade) * 4); }
.bept-contenu > .bept-grille > *:nth-child(n+5) { animation-delay: calc(var(--bept-cascade) * 5); }

/* Les lignes d'une liste arrivent après la carte qui les porte, sans cascade :
   elles sont trop nombreuses pour que le décalage reste lisible. */
@keyframes bept-fondu {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.bept-liste__item {
  animation: bept-fondu var(--bept-duree-2) var(--bept-courbe) backwards;
  animation-delay: var(--bept-duree-2);
}


/* =========================================================================
   17. ÉCRANS D'ENTRÉE (MOBILE)
   ========================================================================= */

/* Colonne centrée : l'introduction, qui n'a qu'une chose à dire. */
.bept-auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bept-e-6);
  padding: var(--bept-e-6) var(--bept-e-5);
  max-width: 28rem;
  margin: 0 auto;
}

/* --- Connexion -----------------------------------------------------------
   Bandeau de marque en haut, formulaire sur une surface claire qui remonte
   par-dessus. La marque occupe le haut de l'écran, là où le pouce ne va pas,
   et laisse le bas - la zone atteignable - à la saisie. */
.bept-connexion {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bept-barre-fond);
}

.bept-connexion__entete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bept-e-3);
  text-align: center;
  color: var(--bept-barre-encre);
  /* Marge basse doublée du chevauchement de la carte. */
  padding: var(--bept-e-8) var(--bept-e-5) var(--bept-e-7);
}
.bept-connexion__logo {
  width: 72px; height: 72px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: var(--bept-r-plein);
  padding: var(--bept-e-2);
}
.bept-connexion__titre { font-size: var(--bept-t-1); letter-spacing: -.015em; }
.bept-connexion__accroche {
  color: var(--bept-barre-attenue);
  font-size: var(--bept-t-libelle);
  max-width: 30ch;
}

/* La surface claire remonte sur le bandeau : le raccord se voit, l'écran se
   lit en deux temps plutôt qu'en un dégradé indistinct. */
.bept-connexion__corps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-5);
  background: var(--bept-fond);
  border-radius: var(--bept-r-5) var(--bept-r-5) 0 0;
  padding: var(--bept-e-6) var(--bept-e-5);
  /* Marge basse pour les gestes système des téléphones sans bouton. */
  padding-bottom: calc(var(--bept-e-6) + env(safe-area-inset-bottom, 0px));
}

.bept-connexion__contenu {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-5);
}

.bept-connexion__aide {
  margin-top: auto;
  text-align: center;
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
}

/* --- Accueil prestataire ------------------------------------------------- */
.bept-accueil-presta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bept-e-3);
}
.bept-accueil-presta__salut {
  font-size: var(--bept-t-1);
  font-weight: var(--bept-graisse-forte);
  letter-spacing: -.015em;
}

/* --- Compteurs d'accueil (mobile) ----------------------------------------
   Trois pavés sur une ligne. Empilés, ils repoussaient hors de vue tout ce
   qui suit ; côte à côte, l'écran se lit d'un coup d'œil. */
.bept-compteurs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bept-e-3);
}

.bept-compteur {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
  padding: var(--bept-e-4) var(--bept-e-3);
  border-radius: var(--bept-r-4);
  background: var(--bept-surface);
  box-shadow: var(--bept-ombre-1);
  color: inherit;
  text-decoration: none;
  min-height: var(--bept-cible-tactile);
  transition: transform var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe);
}
.bept-compteur:hover,
.bept-compteur:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--bept-ombre-2);
  text-decoration: none;
}
.bept-compteur:active { transform: translateY(0); }

.bept-compteur__valeur {
  font-size: var(--bept-t-1);
  font-weight: var(--bept-graisse-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bept-compteur__libelle {
  font-size: var(--bept-t-legende);
  color: var(--bept-encre-2);
  line-height: 1.25;
}

/* Mêmes teintes que les tuiles du tableau de bord : un état garde sa couleur
   d'un écran à l'autre. */
.bept-compteur--attention { background: var(--bept-attention-doux); }
.bept-compteur--attention .bept-compteur__valeur { color: var(--bept-attention); }
.bept-compteur--info      { background: var(--bept-info-doux); }
.bept-compteur--info .bept-compteur__valeur { color: var(--bept-info); }
.bept-compteur--succes    { background: var(--bept-succes-doux); }
.bept-compteur--succes .bept-compteur__valeur { color: var(--bept-succes); }

/* Carte d'une mission à prendre. L'image de la spécialité tient lieu de
   repère : sur un téléphone, on reconnaît une vignette avant de lire un
   intitulé. */
.bept-mission-carte {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  padding: var(--bept-e-3);
  background: var(--bept-surface);
  border-radius: var(--bept-r-4);
  box-shadow: var(--bept-ombre-1);
  color: inherit;
  text-decoration: none;
  transition: transform var(--bept-duree-1) var(--bept-courbe),
              box-shadow var(--bept-duree-1) var(--bept-courbe);
}
.bept-mission-carte:hover,
.bept-mission-carte:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--bept-ombre-2);
  text-decoration: none;
}
.bept-mission-carte:active { transform: translateY(0); }

.bept-mission-carte__image {
  width: 64px; height: 64px;
  flex: none;
  border-radius: var(--bept-r-3);
  object-fit: cover;
  background: var(--bept-primaire);
}
.bept-mission-carte__corps {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bept-mission-carte__titre {
  font-weight: var(--bept-graisse-forte);
  line-height: 1.3;
}
.bept-mission-carte__meta {
  font-size: var(--bept-t-libelle);
  color: var(--bept-encre-2);
}
.bept-mission-carte__lieu {
  display: flex;
  align-items: center;
  gap: var(--bept-e-1);
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
}
.bept-mission-carte__lieu svg { width: 14px; height: 14px; flex: none; }

.bept-mission-carte__fleche {
  flex: none;
  color: var(--bept-attenue);
}
.bept-mission-carte__fleche svg { width: 20px; height: 20px; }

/* --- Mention de version --------------------------------------------------
   Discrète mais présente : elle sert au moment d'un signalement, jamais à la
   lecture courante. */
.bept-version {
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
  text-align: center;
  padding: var(--bept-e-3) var(--bept-e-2) var(--bept-e-1);
}
.bept-barre .bept-version {
  color: var(--bept-barre-attenue);
  text-align: left;
  padding-left: var(--bept-e-3);
}

/* Œil de révélation du mot de passe. */
.bept-mdp { position: relative; }
.bept-mdp .bept-input { padding-right: 3.25rem; }
.bept-mdp__bascule {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bept-attenue);
}

/* ==========================================================================
   Accueil mobile
   ==========================================================================
   Trois blocs pour un écran qui répond dans l'ordre : où j'en suis, ce qui
   m'engage, ce que je peux prendre.
   -------------------------------------------------------------------------- */

/* --- En-tête : une salutation, puis ce dont il s'agit --------------------- */
.bept-accueil__tete {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
  margin-bottom: var(--bept-e-5);
}

.bept-accueil__salut {
  margin: 0;
  font-size: var(--bept-t-libelle);
  color: var(--bept-attenue);
}

/* Le titre porte l'écran : c'est la seule grande taille de la page, et le
   doré n'y touche qu'un mot - la spécialité, seule chose qui distingue cet
   accueil de celui du confrère d'à côté. */
.bept-accueil__titre {
  margin: 0;
  font-size: var(--bept-t-1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--bept-encre);
  text-wrap: balance;
}

.bept-accueil__titre-accent {
  color: var(--bept-accent-fonce);
}

/* --- Carte de synthèse ---------------------------------------------------- */
/* Sombre dans les deux thèmes : elle doit trancher sur la page, où tout le
   reste est posé sur des surfaces claires. */
.bept-synthese {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  flex-wrap: wrap;
  padding: var(--bept-e-5);
  margin-bottom: var(--bept-e-6);
  border-radius: var(--bept-r-4);
  background: var(--bept-sombre-fond);
  color: var(--bept-sombre-encre);
  box-shadow: var(--bept-ombre-2);
}

.bept-synthese__texte {
  flex: 1 1 11rem;
  /* Un enfant de conteneur flex reçoit min-width: auto et refuse de descendre
     sous la largeur de son contenu. Sans ceci, une phrase longue élargit la
     carte au-delà de l'écran. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bept-e-3);
}

.bept-synthese__phrase {
  margin: 0;
  font-size: var(--bept-t-2);
  font-weight: 650;
  line-height: 1.25;
  color: var(--bept-sombre-encre);
  text-wrap: balance;
}

.bept-synthese__detail {
  margin: 0;
  font-size: var(--bept-t-libelle);
  color: var(--bept-sombre-attenue);
}

.bept-synthese__action {
  margin-top: var(--bept-e-1);
}

/* --- Anneau de progression ------------------------------------------------ */
/* Un dégradé conique et un masque : pas d'image, pas de SVG, pas de script.
   La valeur est portée par --bept-anneau-part, posée dans le gabarit. */
.bept-anneau {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
}

/* L'anneau lui-même, sur un pseudo-élément.
   Le masque d'un élément découpe tous ses descendants, et « mask: none » sur
   un enfant n'y échappe pas : porté par le conteneur, il effaçait la valeur
   avec le trou central. Il ne s'applique donc qu'à cette couche. */
.bept-anneau::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--bept-r-plein);
  background:
    conic-gradient(
      var(--bept-accent) calc(var(--bept-anneau-part, 0) * 1%),
      var(--bept-sombre-piste) 0
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
}

.bept-anneau__valeur {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-size: var(--bept-t-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bept-sombre-encre);
}

.bept-anneau__pourcent {
  font-size: var(--bept-t-legende);
  font-weight: 600;
  color: var(--bept-sombre-attenue);
}

/* --- Grille des missions à prendre ---------------------------------------- */
/* Deux colonnes dès le plus petit écran : une tuile par ligne redonnerait la
   liste verticale qu'on remplace. auto-fill garde deux colonnes tant que la
   place le permet, et passe à trois sur les grands téléphones. */
.bept-tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--bept-e-3);
}

.bept-tuile {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
  min-width: 0;
  padding: var(--bept-e-4);
  border-radius: var(--bept-r-3);
  background: var(--bept-surface);
  box-shadow: var(--bept-ombre-1);
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.bept-tuile:hover,
.bept-tuile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--bept-ombre-2);
}

/* L'image de la spécialité, jusqu'ici vignette de liste, porte la tuile. */
.bept-tuile__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--bept-r-2);
  margin-bottom: var(--bept-e-2);
  background: var(--bept-primaire-doux);
}

.bept-tuile__titre {
  font-size: var(--bept-t-libelle);
  font-weight: 650;
  line-height: 1.3;
  color: var(--bept-encre);
}

/* Pictogramme de métadonnée. Dimensionné en em : il suit la taille du texte
   qu'il accompagne au lieu de flotter à côté. flex: 0 0 auto l'empêche d'être
   comprimé par un nom de centre trop long. */
.bept-ico {
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
}

/* Le nom du centre peut passer à la ligne : le pictogramme se cale sur la
   première, pas au milieu du bloc. */
.bept-tuile__centre {
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
}

.bept-tuile__centre .bept-ico { margin-top: 0.18em; }

/* La durée ferme la tuile, détachée du reste : c'est la donnée qu'on compare
   d'une mission à l'autre. */
.bept-tuile__duree {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  padding-top: var(--bept-e-2);
  font-size: var(--bept-t-legende);
  font-weight: 600;
  color: var(--bept-primaire);
}

@media (prefers-reduced-motion: reduce) {
  .bept-tuile { transition: none; }
  .bept-tuile:hover,
  .bept-tuile:focus-visible { transform: none; }
}

/* --- Articles ------------------------------------------------------------- */
/* Vignette de la liste back-office : format fixe, sinon chaque ligne prend la
   hauteur de son image et la liste ondule. */
.bept-article-vignette {
  width: 4rem;
  height: 3rem;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--bept-r-1);
  background: var(--bept-surface-2);
}

/* Repli quand l'article n'a pas de couverture : un aplat et un pictogramme
   valent mieux qu'un cadre vide, qui se lit comme une image cassée. */
.bept-article-vignette--vide {
  display: grid;
  place-items: center;
  color: var(--bept-attenue);
}
.bept-article-vignette--vide svg { width: 1.5rem; height: 1.5rem; }

/* Aperçu du formulaire : plus grand, mêmes proportions que la tuile mobile
   pour que l'on voie ce que l'on prépare. */
.bept-article-apercu {
  width: 10rem;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--bept-r-2);
  background: var(--bept-surface-2);
}

/* Résumé d'article sur sa tuile. Borné à trois lignes : au-delà, une tuile
   pousse sa voisine et la grille perd son alignement de rangée. */
.bept-tuile__chapo {
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Article sans couverture : un aplat teinté et un pictogramme, plutôt qu'un
   cadre vide qui se lit comme une image cassée. */
.bept-tuile__image--vide {
  display: grid;
  place-items: center;
  color: var(--bept-primaire);
  background: var(--bept-primaire-doux);
}
.bept-tuile__image--vide svg { width: 2rem; height: 2rem; }

/* --- Profil en lecture ---------------------------------------------------- */
.bept-profil-tete {
  display: flex;
  align-items: center;
  gap: var(--bept-e-4);
  margin-bottom: var(--bept-e-5);
}
.bept-profil-tete__texte { min-width: 0; }
.bept-profil-tete h1 { margin: 0; }

.bept-profil-actions { margin-bottom: var(--bept-e-5); }

/* Liste de couples libellé / valeur. En colonne : sur 390 px, deux colonnes
   laissent aux valeurs une largeur où « Chaussée de Bruxelles 145 » passe à
   la ligne trois fois. */
.bept-fiche {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-4);
}
.bept-fiche__ligne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bept-fiche__libelle {
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
}
.bept-fiche__valeur {
  margin: 0;
  color: var(--bept-encre);
  overflow-wrap: anywhere;   /* une adresse électronique longue ne déborde pas */
}
/* Un renseignement manquant se dit. Une ligne vide ne distingue pas ce qui
   n'a pas été saisi de ce que l'écran a échoué à afficher. */
.bept-fiche__valeur--vide {
  color: var(--bept-attenue);
  font-style: italic;
}

/* Les deux actions du profil passent à la ligne plutôt que de déborder :
   « Modifier mes informations » et « Changer la photo » côte à côte
   demandent 419 px, l'écran en offre 343. Elles s'étirent pour occuper la
   largeur au lieu de se serrer à gauche. */
.bept-profil-actions {
  flex-wrap: wrap;
  justify-content: stretch;
}
.bept-profil-actions > .bept-btn {
  flex: 1 1 12rem;
  justify-content: center;
}

/* --- Portail du back-office ----------------------------------------------- */
/* La connexion web et celle de l'application se ressemblaient au point qu'on
   se trompait de porte. Celle-ci prend l'aplat vert du back-office - que
   l'écran mobile n'emploie jamais à la connexion - et se nomme. */
.bept-auth__portail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bept-e-3);
  padding: var(--bept-e-6) var(--bept-e-5);
  border-radius: var(--bept-r-4);
  background: var(--bept-sombre-fond);
  color: var(--bept-sombre-encre);
  text-align: center;
}
.bept-auth__portail .bept-auth__marque { gap: var(--bept-e-3); }
.bept-auth__portail h1 { color: var(--bept-sombre-encre); margin: 0; }

.bept-auth__portail-desc {
  margin: 0;
  font-size: var(--bept-t-libelle);
  color: var(--bept-sombre-attenue);
}

/* Dit où vont les autres, plutôt que de laisser un prestataire buter sur un
   refus après avoir saisi ses identifiants. */
.bept-auth__portail-note {
  margin: 0;
  font-size: var(--bept-t-legende);
  color: var(--bept-sombre-attenue);
}

.bept-auth__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bept-e-1);
  padding: 4px var(--bept-e-3);
  border-radius: var(--bept-r-plein);
  background: var(--bept-accent);
  color: var(--bept-accent-contraste);
  font-size: var(--bept-t-legende);
  font-weight: 700;
  letter-spacing: .02em;
}
.bept-auth__badge svg { width: 15px; height: 15px; }

/* Pendant mobile : une étiquette discrète, la même fonction. */
.bept-connexion__espace {
  display: inline-block;
  padding: 3px var(--bept-e-3);
  border-radius: var(--bept-r-plein);
  background: var(--bept-primaire-doux);
  color: var(--bept-primaire);
  font-size: var(--bept-t-legende);
  font-weight: 650;
}

/* --- Grille de la semaine -------------------------------------------------- */
.bept-semaine {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-2);
}

/* Le nom du jour au-dessus de ses moments, et non à côté : sur 390 px, une
   colonne de libellés ne laisse pas trois boutons lisibles à sa droite. */
.bept-semaine__jour {
  display: flex;
  flex-direction: column;
  gap: var(--bept-e-1);
  padding-bottom: var(--bept-e-2);
  border-bottom: 1px solid var(--bept-filet);
}
.bept-semaine__jour:last-child { border-bottom: 0; padding-bottom: 0; }

.bept-semaine__nom {
  font-size: var(--bept-t-legende);
  font-weight: 650;
  color: var(--bept-attenue);
}

.bept-semaine__moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bept-e-2);
}

/* La case elle-même est retirée du flux sans être retirée du clavier : elle
   reste focalisable, et son étiquette porte l'apparence. display: none la
   rendrait inatteignable au clavier comme au lecteur d'écran. */
.bept-creneau__case {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.bept-creneau {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;          /* la cible tactile recommandée */
  padding: var(--bept-e-2);
  border: 1px solid var(--bept-filet-fort);
  border-radius: var(--bept-r-2);
  background: var(--bept-surface);
  color: var(--bept-attenue);
  font-size: var(--bept-t-legende);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.bept-creneau__case:checked + .bept-creneau {
  background: var(--bept-primaire);
  border-color: var(--bept-primaire);
  color: var(--bept-primaire-contraste);
}

/* Le focus clavier doit se voir sur l'étiquette, la case étant invisible. */
.bept-creneau__case:focus-visible + .bept-creneau {
  outline: 2px solid var(--bept-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .bept-creneau { transition: none; }
}

/* Le chevron du lien de retour.
   Aucune règle ne le dimensionnait, et les gabarits ne posaient pas d'attribut
   width : un SVG sans taille intrinsèque prend celle que le navigateur lui
   invente - assez large pour comprimer « Retour aux réglages » en trois
   lignes. Ce qui suit vaut pour tous les écrans qui portent ce lien. */
.bept-retour svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
/* Et le libellé ne se coupe pas : c'est trois mots. */
.bept-retour { white-space: nowrap; }

/* --- Bouton d'affichage du mot de passe ------------------------------------ */
/* L'icône était la même dans les deux états : rien ne disait si le mot de
   passe était affiché ou masqué. La barre n'apparaît qu'une fois révélé, et
   c'est l'attribut aria-pressed qui la commande - l'état est donc porté au
   même endroit pour l'œil et pour le lecteur d'écran, et ne peut pas
   diverger. */
.bept-oeil__barre {
  opacity: 0;
  transition: opacity .14s ease;
}
[aria-pressed="true"] .bept-oeil__barre { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bept-oeil__barre { transition: none; }
}

/* --- Choix de la langue ---------------------------------------------------- */
/* Sur l'écran de connexion, avant identification : qui ne lit pas le français
   doit pouvoir changer de langue sans deviner où se range ce réglage. */
.bept-langues {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: var(--bept-e-4);
}
/* Plus petit que la légende : ce sélecteur est un recours, pas une action
   qu'on propose. Assez discret pour ne pas concurrencer le formulaire, assez
   lisible pour qu'on reconnaisse sa langue - et sur 390 px, les cinq entrées
   tiennent alors sur une seule ligne au lieu de deux. */
.bept-langues__choix {
  padding: var(--bept-e-1) 8px;
  border-radius: var(--bept-r-plein);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bept-attenue);
}
.bept-langues__choix:hover { background: var(--bept-surface-2); color: var(--bept-encre-2); }
/* La langue en cours se marque, sinon on ne sait pas laquelle on lit. */
.bept-langues__choix[aria-current="true"] {
  background: var(--bept-primaire);
  color: var(--bept-primaire-contraste);
}

/* --- Entrée des écrans de connexion ---------------------------------------- */
/* Le mouvement sert à guider, pas à retenir : cet écran n'a qu'une fonction,
   qu'on en sorte. Les blocs arrivent donc dans l'ordre où on les lit, en un
   peu moins d'une demi-seconde au total, et une seule fois.
   Pas de boucle, pas d'ambiance : un écran vu dix fois par semaine ne doit
   rien avoir à faire oublier. */
@keyframes bept-entree {
  from { opacity: 0; transform: translateY(10px); }
}

/* backwards : l'élément est déjà à l'état de départ avant que son délai ne
   s'écoule. Sans cela, tout s'affiche puis disparaît pour revenir. */
.bept-entree > * {
  animation: bept-entree .38s cubic-bezier(.22, .9, .3, 1) backwards;
}
.bept-entree > *:nth-child(1) { animation-delay: .05s; }
.bept-entree > *:nth-child(2) { animation-delay: .13s; }
.bept-entree > *:nth-child(3) { animation-delay: .21s; }
.bept-entree > *:nth-child(4) { animation-delay: .28s; }

/* Le trouble vestibulaire n'est pas une abstraction dans un service de santé.
   Ceux qui ont demandé moins de mouvement reçoivent l'écran tel quel. */
@media (prefers-reduced-motion: reduce) {
  .bept-entree > * { animation: none; }
}

/* --- Fond animé de la connexion -------------------------------------------- */
/* La toile occupe l'écran, derrière tout. Le contenu de la page reste au-dessus
   par son ordre naturel : aucun z-index n'est posé sur la carte, elle n'en a
   pas besoin tant que la toile est en position fixe et sans empilement. */
.bept-nebuleuse {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Avant que WebGL n'ait rendu sa première image - et pour toujours s'il
     manque - c'est le fond de page ordinaire qu'on voit. */
  background: var(--bept-fond);
  pointer-events: none;
}

/* Le formulaire passe devant.
   Ce n'est pas qu'une question d'ordre : la toile est un élément positionné,
   et un élément positionné peint au-dessus du contenu resté statique, même
   déclaré avant lui. Sans les règles ci-dessous, seul le champ mot de passe
   restait visible - il porte un position: relative de son côté et échappait
   donc à la règle, ce qui rendait le défaut d'autant plus déroutant.
   Les conteneurs de contenu sont donc positionnés à leur tour, au-dessus.

   L'écran mobile n'a pas de nébuleuse, et ce n'est pas un oubli : sur 390 px
   la carte occupe tout l'écran, il ne reste aucun vide où l'effet puisse se
   voir. L'y mettre revenait à faire tourner une boucle de rendu derrière des
   fonds opaques - de la batterie dépensée pour rien, sur l'appareil où cela
   compte le plus. Il reste au back-office, où la carte flotte au milieu. */
.bept-auth,
.bept-connexion { position: relative; }

.bept-auth__boite,
.bept-connexion__entete,
.bept-connexion__corps {
  position: relative;
  z-index: 1;
}

/* --- Boîte de notifications ------------------------------------------------ */
/* Deux actions côte à côte : tout marquer lu, et régler ce qu'on reçoit.
   Elles passent l'une sous l'autre quand la largeur manque, plutôt que de
   rétrécir jusqu'à devenir des cibles trop petites pour un doigt. */
.bept-notif-actions {
  margin-bottom: var(--bept-e-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bept-e-2);
}

/* Le pictogramme dit la famille - mission, message, alerte - avant que le
   titre ne soit lu. */
.bept-notif__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--bept-r-plein);
  background: var(--bept-surface-2);
  color: var(--bept-attenue);
}
.bept-notif__icone svg { width: 19px; height: 19px; }

.bept-notif__date {
  font-size: var(--bept-t-legende);
  color: var(--bept-attenue);
}

/* Une notification non lue se signale par trois choses à la fois : un fond,
   une graisse et une pastille. Une seule suffit rarement - la couleur échappe
   à qui la distingue mal, la graisse se remarque peu sur un téléphone. */
.bept-notif--non-lue { background: var(--bept-primaire-doux); }
.bept-notif--non-lue .bept-liste__titre { font-weight: 700; }
.bept-notif--non-lue .bept-notif__icone {
  background: var(--bept-primaire);
  color: var(--bept-primaire-contraste);
}

.bept-notif__pastille {
  flex: 0 0 auto;
  align-self: center;
  width: 9px;
  height: 9px;
  border-radius: var(--bept-r-plein);
  background: var(--bept-accent);
}

/* La cloche de l'en-tête mobile. */
.bept-cloche {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bept-r-plein);
  color: var(--bept-encre-2);
}
.bept-cloche:hover { background: var(--bept-surface-2); }
.bept-cloche svg { width: 21px; height: 21px; }

/* La pastille porte un nombre, pas un simple point : « trois choses vous
   attendent » se décide autrement que « quelque chose vous attend ». */
.bept-cloche__pastille {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--bept-r-plein);
  background: var(--bept-accent);
  color: var(--bept-accent-contraste);
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Détache la pastille de l'icône quel que soit le fond derrière. */
  box-shadow: 0 0 0 2px var(--bept-fond);
}