/*  Application des parents — pensée pour le pouce, en plein soleil, à une main.
    Les mêmes couleurs que le logiciel de la crèche.                          */

:root {
  --primaire: #2E7D8F;
  --primaire-sombre: #25687A;
  --primaire-claire: #E3F1F4;
  --fond: #F4F6F8;
  --surface: #FFFFFF;
  --texte: #1F2A33;
  --texte-second: #5B6B77;
  --texte-discret: #93A1AC;
  --bordure: #E1E7EB;
  --succes: #2E7D32;
  --succes-clair: #E7F3E8;
  --danger: #C0392B;
  --danger-clair: #FBEAE8;
  --rayon: 14px;
  --ombre: 0 2px 10px rgba(31, 42, 51, .08);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}

body {
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}

.ecran { max-width: 520px; margin: 0 auto; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------- appairage */
.marque { text-align: center; margin: 40px 0 28px; }
.marque .logo {
  display: block; width: 84px; height: 84px; margin: 0 auto 16px;
  filter: drop-shadow(0 8px 14px rgba(31, 95, 114, .28));
}
.marque h1 { margin: 0; font-size: 26px; }
.sous-titre { color: var(--texte-second); margin: 8px 0 0; font-size: 15px; }

form { background: var(--surface); border-radius: var(--rayon); padding: 20px; box-shadow: var(--ombre); }
label { display: block; font-size: 13px; font-weight: 600; color: var(--texte-second); margin-bottom: 8px; }

input[type=text] {
  width: 100%; height: 58px; padding: 0 16px;
  border: 1px solid var(--bordure); border-radius: 12px;
  background: var(--fond); color: var(--texte);
  font-size: 26px; font-weight: 700; letter-spacing: 6px; text-align: center;
  text-transform: uppercase;
}
input[type=text]:focus { outline: none; border-color: var(--primaire); background: var(--surface); }

.note { color: var(--texte-discret); font-size: 13px; text-align: center; margin-top: 16px; }

/* La crèche trouvée pour le code tapé : à reconnaître avant que le code ne parte. */
.creche-trouvee {
  background: var(--surface); border-radius: var(--rayon); padding: 22px 20px;
  box-shadow: var(--ombre); text-align: center;
}
.creche-trouvee-titre {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--texte-second);
  text-transform: uppercase; letter-spacing: .5px;
}
.creche-trouvee-nom { margin: 8px 0 0; font-size: 24px; font-weight: 700; color: var(--primaire-sombre); }
.creche-trouvee-detail { margin: 4px 0 0; font-size: 14px; color: var(--texte-discret); word-break: break-all; }

/* Case à cocher : la zone tactile couvre toute la ligne, libellé compris. */
.case {
  display: flex; align-items: center; gap: 11px;
  margin: 16px 0 0; padding: 6px 2px;
  font-size: 15px; font-weight: 500; color: var(--texte-second);
  cursor: pointer;
}
.case input { width: 22px; height: 22px; accent-color: var(--primaire); flex: 0 0 auto; }

/* --------------------------------------------------------------- boutons */
button { font-family: inherit; cursor: pointer; border: none; }

.principal {
  width: 100%; min-height: 56px; margin-top: 16px;
  border-radius: 12px; background: var(--primaire); color: #fff;
  font-size: 17px; font-weight: 700;
}
.principal:active { background: var(--primaire-sombre); }
.principal:disabled { opacity: .5; }

.secondaire {
  width: 100%; min-height: 50px; margin-top: 10px;
  border-radius: 12px; background: transparent; color: var(--danger);
  border: 1px solid var(--bordure); font-size: 15px; font-weight: 600;
}

.lien { background: none; color: var(--texte-discret); font-size: 14px; text-decoration: underline; }

.icone {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--surface); color: var(--texte-second);
  font-size: 20px; box-shadow: var(--ombre);
}

/* ---------------------------------------------------------------- entête */
.entete { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 18px; }
.entete h1 { margin: 2px 0 0; font-size: 24px; }
.bonjour { margin: 0; color: var(--texte-second); font-size: 14px; }

/* --------------------------------------------------------- carte enfant */
.enfant {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 18px; margin-bottom: 14px;
}

.enfant-tete { display: flex; align-items: center; gap: 14px; }

.portrait {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  background: var(--primaire); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.enfant-nom { margin: 0; font-size: 19px; font-weight: 700; }
.enfant-section { margin: 2px 0 0; color: var(--texte-discret); font-size: 14px; }

.etat { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.etat .pastille { width: 9px; height: 9px; border-radius: 50%; }
.etat.present { color: var(--succes); }
.etat.present .pastille { background: var(--succes); }
.etat.absent { color: var(--texte-discret); }
.etat.absent .pastille { background: var(--texte-discret); }

/* Annonce déjà en cours : on rappelle l'heure plutôt que de proposer à nouveau. */
.en-cours {
  margin-top: 14px; padding: 13px 15px; border-radius: 12px;
  background: var(--primaire-claire); color: var(--primaire-sombre);
  font-size: 15px; font-weight: 600;
}

.impossible { margin-top: 14px; color: var(--texte-discret); font-size: 14px; }

/* ------------------------------------------------- vue de la direction */
.onglets {
  display: flex; gap: 6px; margin-bottom: 16px;
  background: var(--surface); border-radius: 12px; padding: 5px;
  box-shadow: var(--ombre);
}
.onglet {
  flex: 1 1 0; min-height: 42px; border-radius: 9px;
  background: transparent; color: var(--texte-second);
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.onglet.actif { background: var(--primaire); color: #fff; }

.compteurs { display: flex; gap: 10px; margin-bottom: 14px; }
.compteur {
  flex: 1 1 0; background: var(--surface); border-radius: 12px;
  box-shadow: var(--ombre); padding: 12px 8px; text-align: center;
  font-size: 12px; color: var(--texte-second);
}
.compteur .chiffre { display: block; font-size: 24px; font-weight: 700; margin-bottom: 2px; }
.compteur.present .chiffre { color: var(--succes); }
.compteur.attendu .chiffre { color: var(--texte-discret); }
.compteur.parti .chiffre { color: var(--primaire); }

/* La recherche des présences : un champ arrondi, loupe à gauche, croix à droite. */
.recherche {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px;
  box-shadow: var(--ombre); padding: 0 6px 0 14px; height: 48px;
  color: var(--texte-discret);
}
.recherche:focus-within { border-color: var(--primaire); color: var(--primaire); }
.recherche input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  color: var(--texte); font-size: 16px; -webkit-appearance: none; appearance: none;
}
.recherche input::-webkit-search-cancel-button { display: none; }
.recherche .effacer {
  width: 36px; height: 36px; border: 0; border-radius: 50%; flex: none;
  background: var(--fond); color: var(--texte-second); font-size: 15px;
}
.vide-detail { margin: 6px 0 0; color: var(--texte-discret); font-size: 14px; }

.presence {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 13px 15px; margin-bottom: 10px;
}
.presence .portrait { width: 44px; height: 44px; font-size: 16px; }
.presence .enfant-nom { font-size: 16px; }

.etiquette-etat {
  flex: 0 0 auto; align-self: center;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
}
.etiquette-etat.present { background: var(--succes-clair); color: var(--succes); }
.etiquette-etat.parti   { background: var(--primaire-claire); color: var(--primaire); }
.etiquette-etat.attendu { background: var(--fond); color: var(--texte-discret); }


.arrivee {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 16px; margin-bottom: 12px;
  border: 1.5px solid transparent;
}
/* La couleur porte l'urgence avant même la lecture. */
.arrivee.imminent { border-color: var(--primaire); }
.arrivee.retard   { border-color: #B8860B; }

.arrivee-qui { flex: 1 1 auto; min-width: 0; }
.arrivee-qui p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.arrivee-delai { flex: 0 0 auto; text-align: right; }
.delai { margin: 0; font-size: 17px; font-weight: 700; color: var(--primaire); }
.arrivee.retard .delai { color: #B8860B; }

.arrivee-actions { display: flex; gap: 10px; margin-top: 14px; }
.arrivee-actions > * { flex: 1 1 0; margin-top: 0; }

.principal.compact, .lien-appel {
  min-height: 46px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
/* « Appeler » et, dessous, qui décroche : deux boutons côte à côte se distinguent. */
.lien-appel {
  flex-direction: column; gap: 1px; line-height: 1.2; padding: 6px 14px;
  text-decoration: none; color: var(--primaire);
}
.lien-appel-qui { font-size: 13px; font-weight: 700; }

.entete-actions { display: flex; gap: 10px; }
.entete-actions .icone { display: flex; align-items: center; justify-content: center; }

/* Notifications bloquées par Android : le seul cas signalé en haut de l'écran. */
.veille {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 14px 16px; margin-bottom: 14px;
  border-left: 4px solid var(--danger);
}
.veille-titre { margin: 0; font-size: 16px; font-weight: 700; color: var(--danger); }
.veille-texte { margin: 4px 0 0; font-size: 14px; color: var(--texte-second); }
.veille-actions .principal { margin-top: 12px; }

/* ------------------------------------------------------------ paramètres */
.reglages-titre {
  margin: 22px 4px 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; color: var(--texte-discret);
}
.reglages {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); overflow: hidden; margin-bottom: 12px;
}

/* Une ligne entière se touche : libellé compris. */
.reglage, .reglage-lien {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; min-height: 64px; padding: 12px 16px; margin: 0;
  background: transparent; text-align: left; cursor: pointer;
  font: inherit; color: var(--texte);
}
.reglage + .reglage, .reglage-lien + .reglage-lien { border-top: 1px solid var(--bordure); }

.reglage-texte { display: flex; flex-direction: column; min-width: 0; }
.reglage-texte b { font-size: 16px; font-weight: 600; color: var(--texte); }
.reglage-texte span { font-size: 13px; color: var(--texte-second); margin-top: 2px; }
.chevron { font-size: 26px; color: var(--texte-discret); line-height: 1; }

#reglage-etat.bloquee { color: var(--danger); font-weight: 600; }
#reglage-etat.active { color: var(--succes); font-weight: 600; }

/* Sans notifications, les sortes ne veulent rien dire : on les montre éteintes. */
.reglages.eteint .reglage { opacity: .45; pointer-events: none; }

/* La pastille de couleur d'une section, devant son nom. */
.pastille-section { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 9px; background: var(--texte-discret); vertical-align: 1px; }
.note-reglage { text-align: left; margin: 8px 4px 0; }

/* Interrupteur : le geste attendu sur un téléphone, plutôt qu'une case. */
.interrupteur {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: 0 0 auto;
  width: 52px; height: 32px; margin: 0; border-radius: 16px;
  background: var(--bordure); transition: background .18s;
  cursor: pointer;
}
.interrupteur::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .18s;
}
.interrupteur:checked { background: var(--primaire); }
.interrupteur:checked::before { transform: translateX(20px); }
.interrupteur:disabled { opacity: .5; }

.vide { text-align: center; padding: 48px 16px; }
.vide-titre { margin: 0; font-size: 17px; font-weight: 600; color: var(--texte-second); }

/* -------------------------------------------------------- confirmation */
.confirmation { text-align: center; padding-top: 34px; }
.coche {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--succes-clair); color: var(--succes);
  display: flex; align-items: center; justify-content: center; font-size: 44px;
}
.confirmation h1 { font-size: 24px; margin: 0; }
.confirmation-enfant { color: var(--texte-second); margin: 6px 0 24px; }

.estimation {
  background: var(--surface); border-radius: var(--rayon);
  box-shadow: var(--ombre); padding: 22px; margin-bottom: 18px;
}
.etiquette { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--texte-discret); }
.minutes { margin: 8px 0 0; font-size: 40px; font-weight: 700; color: var(--primaire); line-height: 1; }
.heure { margin: 8px 0 0; color: var(--texte-second); font-size: 15px; }

/* --------------------------------------------------------------- divers */
.erreur {
  background: var(--danger-clair); color: var(--danger);
  border-radius: 12px; padding: 13px 15px; margin: 16px 0 0;
  font-size: 14px; font-weight: 600;
}

.pied { text-align: center; margin-top: 26px; }

.attente {
  position: fixed; inset: 0; background: rgba(244, 246, 248, .72);
  display: flex; align-items: center; justify-content: center;
}
.rond {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid var(--bordure); border-top-color: var(--primaire);
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #151B21; --surface: #1D242B; --texte: #ECF1F4;
    --texte-second: #A9B7C1; --texte-discret: #7C8B96; --bordure: #2C353D;
    --primaire-claire: #1E3A40; --succes-clair: #1C3020; --danger-clair: #3A2220;
    --ombre: 0 2px 10px rgba(0, 0, 0, .35);
  }
}

/* ----------------------------------------------- la fiche d'un enfant
   Ouverte depuis les Arrivées ou les Présences : lecture seule, sauf les
   rappels que la direction pose sur place. */
.enfant-tete.cliquable { cursor: pointer; }

.fiche-titre { flex: 1 1 auto; min-width: 0; }
.fiche-titre h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fiche-identite {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 16px; margin-top: 4px;
}

.portrait.grand { width: 64px; height: 64px; font-size: 22px; flex: 0 0 auto; }

.fiche-lignes { flex: 1 1 auto; min-width: 0; }
.fiche-ligne {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0; padding: 7px 0;
  border-bottom: 1px solid var(--bordure);
}
.fiche-ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.fiche-ligne span { color: var(--texte-discret); font-size: 13px; }
.fiche-ligne b { font-size: 15px; text-align: right; }

/* Paiement : la couleur donne la réponse avant la lecture. */
.paiement {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-left: 4px solid var(--texte-discret);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 14px 16px; margin-top: 4px;
}
.paiement-signe {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  background: var(--fond); color: var(--texte-discret);
}
.paiement-corps { flex: 1 1 auto; min-width: 0; }
.paiement-titre { margin: 0; font-size: 17px; font-weight: 700; }
.paiement-detail { margin: 2px 0 0; font-size: 14px; color: var(--texte-second); }

.paiement.ajour { border-left-color: var(--succes); }
.paiement.ajour .paiement-signe { background: var(--succes-clair); color: var(--succes); }
.paiement.ajour .paiement-titre { color: var(--succes); }

.paiement.retard { border-left-color: var(--danger); }
.paiement.retard .paiement-signe { background: var(--danger-clair); color: var(--danger); }
.paiement.retard .paiement-titre { color: var(--danger); }

.paiement.regler { border-left-color: var(--primaire); }
.paiement.regler .paiement-signe { background: var(--primaire-claire); color: var(--primaire); }
.paiement.regler .paiement-titre { color: var(--primaire-sombre); }

.fiche-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.fiche-actions > * { flex: 1 1 0; margin-top: 0; }
.fiche-actions .lien { flex: 0 0 auto; }

.fiche-formulaire {
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 16px; margin-top: 12px;
}
.formulaire-titre { margin: 0 0 12px; color: var(--texte-second); font-size: 14px; }
.champ { display: block; margin-bottom: 12px; }
.champ span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--texte-discret); }
.champ input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 16px;
  color: var(--texte); background: var(--fond);
  border: 1px solid var(--bordure); border-radius: 10px;
}
.champ input:focus { outline: 2px solid var(--primaire); outline-offset: -1px; }

/* Un rappel médicament se distingue au premier coup d'œil : il ne se manque pas. */
.rappel {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-left: 3px solid var(--texte-discret);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 12px 14px; margin-top: 10px;
}
.rappel.medicament { border-left-color: var(--danger); }
.rappel-sorte { font-size: 20px; flex: 0 0 auto; }
.rappel-corps { flex: 1 1 auto; min-width: 0; }

.parent {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: 12px 14px; margin-top: 10px;
}
.parent-qui { flex: 1 1 auto; min-width: 0; }
.parent-qui p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Largeur au contenu : hérité à 100 % de .secondaire, le bouton chassait le nom
   et le lien hors de la carte, et deux « Appeler » se ressemblaient. */
.parent .lien-appel { flex: 0 0 auto; width: auto; min-width: 118px; margin-top: 0; }

/* ---------------------------------------------------------------- le badge
   Le QR du parent en plein écran, à présenter au lecteur de la porte. Fond
   sombre pour que la carte blanche ressorte et que le lecteur n'ait que le
   motif à lire. La carte arrive par une bascule, comme un badge qu'on sort de
   sa poche et qu'on retourne, un reflet la traverse, puis un halo respire
   derrière elle. Les couleurs de la carte sont fixes : elle reste blanche en
   mode sombre, c'est ce qu'un lecteur attend. */
.bouton-badge {
  display: flex; align-items: center; gap: 14px; width: 100%;
  margin: 0 0 16px; padding: 14px 16px; text-align: left;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  box-shadow: var(--ombre);
  transition: transform .12s ease, background .12s ease;
}
.bouton-badge:active { transform: scale(.99); background: var(--fond); }
.bouton-badge-icone {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  background: var(--primaire-claire); color: var(--primaire);
  display: flex; align-items: center; justify-content: center;
}
.bouton-badge-texte { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.bouton-badge-texte b { font-size: 16px; font-weight: 700; }
.bouton-badge-texte span { font-size: 13px; color: var(--texte-second); margin-top: 1px; }
.bouton-badge-action {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px;
  background: var(--primaire); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
}

.badge-voile {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 80% at 50% 0%, #2E7D8F 0%, #173B45 55%, #0E252C 100%);
  animation: badge-voile-entree .35s ease-out both;
}
@keyframes badge-voile-entree { from { opacity: 0; } to { opacity: 1; } }
.badge-voile.sortie { animation: badge-voile-sortie .24s ease-in both; }
@keyframes badge-voile-sortie { to { opacity: 0; } }

.badge-fermer {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px;
}

.badge-scene { position: relative; width: min(100%, 360px); perspective: 1200px; text-align: center; }

.badge-halo {
  position: absolute; left: -40px; right: -40px; top: -30px; height: 110%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 62%);
  filter: blur(10px);
  animation: badge-halo 2.8s ease-in-out .9s infinite;
}
@keyframes badge-halo {
  0%, 100% { transform: scale(.95); opacity: .7; }
  50%      { transform: scale(1.08); opacity: 1; }
}

.badge-carte {
  position: relative; overflow: hidden;
  background: #fff; color: #1F2A33; border-radius: 22px; padding: 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .35) inset;
  transform-origin: 50% 60%;
  animation: badge-arrivee .9s cubic-bezier(.2, .9, .25, 1.25) both;
}
@keyframes badge-arrivee {
  0%   { opacity: 0; transform: translateY(60px) rotateY(-95deg) scale(.86); }
  55%  { opacity: 1; transform: translateY(-6px) rotateY(12deg) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) rotateY(0) scale(1); }
}

/* Le reflet qui traverse la carte une fois posée. */
.badge-brillance {
  position: absolute; top: -40%; left: -60%; width: 50%; height: 180%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(8deg); pointer-events: none;
  animation: badge-brillance 1.1s ease-out .75s both;
}
@keyframes badge-brillance { to { left: 130%; } }

/* Le contenu monte en place, ligne après ligne, une fois la carte posée. */
.badge-carte > :not(.badge-brillance):not(.badge-fente) { animation: badge-monte .5s ease-out both; }
.badge-carte .badge-entete  { animation-delay: .45s; }
.badge-carte .badge-corps   { animation-delay: .55s; }
.badge-carte .badge-porteur { animation-delay: .66s; }
.badge-carte .badge-pied    { animation-delay: .74s; }
@keyframes badge-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* La fente du cordon, comme sur une carte qu'on porte au cou. */
.badge-fente {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 54px; height: 9px; border-radius: 5px; background: #B9C6CE;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .9);
  pointer-events: none;
}

/* L'en-tête aux couleurs de la crèche : son logo, son nom. */
.badge-entete {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 28px 20px 14px;
  background: linear-gradient(180deg, #F3F8FA 0%, #FFFFFF 100%);
  border-bottom: 1px solid #E6EEF1;
}
.badge-logo {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px;
  background: #fff; border: 1px solid #E6EEF1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--primaire);
}
.badge-logo img { width: 100%; height: 100%; object-fit: contain; }
.badge-creche { min-width: 0; }
.badge-creche span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1.8px; color: var(--primaire); }
.badge-creche b {
  display: block; margin-top: 2px; font-size: 16px; line-height: 1.2; color: #1F2A33;
  overflow: hidden; text-overflow: ellipsis;
}

.badge-corps { padding: 18px 26px 6px; }
.badge-qr { width: 100%; aspect-ratio: 1 / 1; background: #fff; }
.badge-qr svg { display: block; width: 100%; height: 100%; }
.badge-attente { display: flex; align-items: center; justify-content: center; height: 100%; }
.badge-code {
  margin: 10px 0 0; color: #1F2A33; letter-spacing: 2px;
  font: 700 21px/1 ui-monospace, Consolas, "Courier New", monospace;
}

.badge-porteur { padding: 12px 20px 16px; }
.badge-nom { margin: 0; font-size: 17px; font-weight: 700; color: #1F2A33; }
.badge-enfants { margin: 3px 0 0; font-size: 13.5px; color: #5B6B77; }

/* Le bandeau de pied, dans la couleur de la crèche. */
.badge-pied {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; background: var(--primaire); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 1.4px;
}
.badge-pied span:last-child {
  font-weight: 600; letter-spacing: .2px; opacity: .92; margin-left: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------------------- le bouton de départ, réglable
   Le parent choisit, dans ses paramètres, de montrer ou non le bouton
   « Je viens chercher mon enfant ». Quand il revient, le bouton se présente :
   il monte en place et s'allume un instant. */
.annonce-bouton.apparait { animation: bouton-apparait .6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes bouton-apparait {
  0%   { opacity: 0; transform: translateY(14px) scale(.96); box-shadow: 0 0 0 0 rgba(46, 125, 143, 0); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 24px rgba(46, 125, 143, .35); }
  100% { opacity: 1; transform: none; box-shadow: 0 0 0 0 rgba(46, 125, 143, 0); }
}

/* L'aperçu des paramètres : le bouton se déplie et se replie avec l'interrupteur. */
.apercu {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .45s cubic-bezier(.2, .9, .3, 1), opacity .3s ease;
}
.apercu.cache { grid-template-rows: 0fr; opacity: 0; }
.apercu > div { overflow: hidden; }
.apercu-cadre {
  background: var(--surface); border: 1px dashed var(--bordure);
  border-radius: var(--rayon); padding: 12px 16px 16px; margin-top: 10px;
}
.apercu-titre { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--texte-discret); }
.apercu-bouton { pointer-events: none; margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .annonce-bouton.apparait { animation: none; }
  .apercu { transition: none; }
}
.badge-conseil { margin: 22px 0 0; color: rgba(255, 255, 255, .78); font-size: 14px; line-height: 1.5; }
.badge-voile .erreur { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .badge-voile, .badge-carte, .badge-halo, .badge-brillance,
  .badge-carte > :not(.badge-brillance) { animation: none !important; }
}