/* Appli parents NexoCrèche : mêmes couleurs et mêmes formes que la maquette validée.
   Polices : Nunito (français) et Cairo (arabe) si elles sont sur le téléphone,
   sinon la police système (aucune police n'est chargée depuis Internet). */
@font-face { font-family: 'Nunito'; src: local('Nunito'), local('Nunito Regular'); font-weight: 400 900; }
@font-face { font-family: 'Cairo'; src: local('Cairo'), local('Cairo Regular'); font-weight: 400 900; }

:root {
  --teal: #0d9488; --teal-dark: #0f766e; --teal-deep: #042f2e; --teal-mid: #14b8a6;
  --teal-pale: #ccfbf1; --teal-soft: #f0fdfa;
  --amber: #f59e0b; --amber-dark: #b45309; --amber-pale: #fef3c7; --amber-soft: #fffbeb;
  --rose: #d6457a; --rose-dark: #a8295a; --rose-pale: #fde4ee; --rose-soft: #fff4f8;
  --lilas: #7c3aed; --lilas-pale: #ede9fe;
  --fond: #faf8f2; --carte: #ffffff;
  --ink: #0f2e2c; --muted: #5e7a76; --muted-2: #8aa09c; --ligne: #e7e2d6;
  --vert: #16a34a; --vert-bg: #dcfce7;
  --rouge: #b91c1c; --rouge-bg: #fee2e2;
  --page: #efece3;
  /* 13/10/2026 : couleurs de la crèche. couleurs.css (chargée APRÈS cette feuille) redéfinit les --teal*, les neutres,
     les triplets --*-rgb, l'accent et --police-marque. Ici : les valeurs Nexo d'origine, au pixel près. */
  --teal-rgb: 13,148,136; --deep-rgb: 4,47,46; --ink-rgb: 15,46,44;
  --nuit-rgb: 4,20,19;
  --accent: var(--amber); --accent-pale: var(--amber-pale); --accent-texte: var(--amber-dark); --accent-rgb: 245,158,11;
  --ombre: 0 1px 2px rgba(var(--ink-rgb),.06), 0 6px 18px rgba(var(--ink-rgb),.07);
  --police: 'Nunito', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --police-marque: var(--police);
  /* 13/10/2026 : jetons de finition. On en AJOUTE, on n'en renomme jamais (vie.css s'en sert aussi). */
  --teal-survol: #0c6a63;
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 20px; --r-xl: 24px; --r-rond: 999px;
  --ombre-1: 0 1px 2px rgba(var(--ink-rgb),.06), 0 1px 4px rgba(var(--ink-rgb),.04);
  --ombre-2: 0 1px 2px rgba(var(--ink-rgb),.06), 0 6px 18px rgba(var(--ink-rgb),.07);
  --ombre-3: 0 2px 4px rgba(var(--ink-rgb),.06), 0 10px 24px rgba(var(--ink-rgb),.10), 0 18px 40px rgba(var(--ink-rgb),.06);
  --ombre-teal: 0 1px 2px rgba(var(--deep-rgb),.16), 0 6px 14px rgba(var(--teal-rgb),.28);
  --ombre-teal-haut: 0 2px 4px rgba(var(--deep-rgb),.16), 0 10px 22px rgba(var(--teal-rgb),.34);
  --ombre-teal-bas: 0 1px 2px rgba(var(--deep-rgb),.18), 0 2px 6px rgba(var(--teal-rgb),.22);
  --ombre-ic: drop-shadow(0 2px 2px rgba(var(--ink-rgb),.14)) drop-shadow(0 5px 7px rgba(var(--ink-rgb),.10));
  --focus: var(--teal); --focus-clair: #ffffff;
  --anim-rapide: 140ms; --anim: 220ms; --anim-lente: 360ms;
  --courbe: cubic-bezier(.2,.8,.2,1); --courbe-ressort: cubic-bezier(.34,1.56,.64,1); --courbe-sortie: cubic-bezier(.4,0,1,1);
  --leve: translateY(-2px); --leve-fort: translateY(-3px); --presse: scale(.97);
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html[lang="ar"] { --police: 'Cairo', 'Segoe UI', Tahoma, system-ui, -apple-system, Roboto, Arial, sans-serif; }
html[lang="ar"] body { line-height: 1.5; }
html, body { min-height: 100%; }
body { font-family: var(--police); background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; }
[hidden] { display: none !important; }
bdi, .ltr { unicode-bidi: isolate; }
.ltr { direction: ltr; display: inline-block; }

/* ---------- la colonne centrée (écran large) ---------- */
#app { position: relative; width: 100%; max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; background: var(--fond); display: flex; flex-direction: column; }
@media (min-width: 520px) { #app { box-shadow: 0 0 0 1px var(--ligne), 0 24px 60px rgba(var(--ink-rgb),.12); } }
.ecran { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chargement { flex: 1; display: grid; place-items: center; color: var(--muted); font-weight: 700; padding: 40px 20px; text-align: center; }

.tete { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; }
.tete .logo-c { width: 42px; height: 42px; border-radius: 13px; background: var(--teal-deep); padding: 4px; flex: none; object-fit: contain; }
.tete .txt { min-width: 0; flex: 1; }
.tete .txt b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.tete .txt small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.rond { min-width: 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--carte); box-shadow: var(--ombre); display: grid; place-items: center; position: relative; flex: none; color: var(--ink); text-decoration: none; }
.rond i { position: absolute; top: -3px; inset-inline-end: -3px; background: var(--rose); color: #fff; font: 800 10px var(--police); font-style: normal; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; border: 2px solid var(--fond); }
.rond.texte { width: auto; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--teal-dark); }
html[dir="rtl"] .retour svg, html[dir="rtl"] .fleche svg { transform: scaleX(-1); }
.contenu { flex: 1; padding: 2px 14px calc(96px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contenu > * { flex-shrink: 0; }

.nav-bas { position: fixed; bottom: 0; inset-inline: 0; margin: 0 auto; width: 100%; max-width: 480px; z-index: 20; height: calc(66px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--carte); border-top: 1px solid var(--ligne); display: flex; justify-content: space-around; align-items: stretch; }
.nav-bas a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--muted-2); text-decoration: none; position: relative; }
.nav-bas a.on { color: var(--teal-dark); }
/* Images 3D de la barre : ternes au repos, pleine couleur et un peu plus grandes sur l'onglet ouvert. */
.nav-bas a .i3 { width: 28px; height: 28px; object-fit: contain; filter: grayscale(.85); opacity: .55; transition: transform var(--anim) var(--courbe-ressort), opacity var(--anim) var(--courbe), filter var(--anim) var(--courbe); }
.nav-bas a.on .i3 { filter: var(--ombre-ic); opacity: 1; transform: scale(1.12) translateY(-1px); }
.nav-bas a i { position: absolute; top: 4px; inset-inline-start: calc(50% + 6px); background: var(--rose); color: #fff; font: 800 9.5px var(--police); font-style: normal; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; }

.carte { background: var(--carte); border-radius: 20px; box-shadow: var(--ombre); padding: 13px; }
.titre-s { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.titre-s small { font-weight: 700; color: var(--teal-dark); font-size: 12px; }
.pastille { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.p-vert { background: var(--vert-bg); color: var(--vert); }
.p-ambre { background: var(--amber-pale); color: var(--amber-dark); }
.p-teal { background: var(--teal-pale); color: var(--teal-dark); }
.p-rose { background: var(--rose-pale); color: var(--rose-dark); }
.p-gris { background: #eeebe3; color: var(--muted); }
.point { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* bandeaux (hors ligne, données anciennes, erreurs) */
.bandeau { margin: 0 14px 4px; padding: 9px 12px; border-radius: 14px; font-size: 12px; font-weight: 700; line-height: 1.45; background: var(--amber-pale); color: #78350f; }
.bandeau.doux { background: var(--teal-soft); color: var(--teal-dark); }
.bandeau.erreur { background: var(--rouge-bg); color: var(--rouge); }
.vide { text-align: center; color: var(--muted); font-size: 13px; font-weight: 700; padding: 22px 10px; }
.toast { position: fixed; z-index: 60; inset-inline: 0; bottom: calc(86px + env(safe-area-inset-bottom)); margin: 0 auto; width: max-content; max-width: calc(100% - 32px); background: var(--teal-deep); color: #fff; font-size: 13px; font-weight: 800; padding: 11px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(var(--deep-rgb),.3); text-align: center; }
.toast.erreur { background: var(--rouge); }

/* accueil */
.bonjour { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.bonjour h3 { font-size: 22px; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; }
html[lang="ar"] .bonjour h3 { letter-spacing: 0; }
.bonjour p { font-size: 13px; color: var(--muted); font-weight: 600; }
.freres { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.freres button { min-height: 44px; font-size: 13px; font-weight: 800; padding: 0 14px; border-radius: 999px; background: var(--carte); color: var(--muted); box-shadow: var(--ombre); }
.freres button.on { background: var(--teal-dark); color: #fff; }
.enfant { display: flex; align-items: center; gap: 12px; }
.avatar { width: 58px; height: 58px; border-radius: 50%; background: var(--teal-soft); border: 3px solid var(--amber); padding: 6px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: contain; }
.avatar.photo { padding: 0; }
.avatar.photo img { object-fit: cover; }
.enfant > div { min-width: 0; }
.enfant b { font-size: 18px; font-weight: 900; display: block; }
.enfant small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }
.avec { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tuile { display: flex; flex-direction: column; gap: 4px; border-radius: 20px; padding: 12px; min-height: 96px; text-decoration: none; position: relative; overflow: hidden; }
.tuile img { width: 40px; height: 40px; }
.tuile b { font-size: 14.5px; font-weight: 800; line-height: 1.2; }
.tuile small { display: block; font-size: 11px; font-weight: 700; opacity: .8; }
.t-teal { background: var(--teal-pale); color: var(--teal-deep); }
.t-ambre { background: var(--amber-pale); color: #78350f; }
.t-rose { background: var(--rose-pale); color: var(--rose-dark); }
.t-lilas { background: var(--lilas-pale); color: #4c1d95; }
.a-payer { display: flex; align-items: center; gap: 10px; background: var(--amber-soft); border: 1px solid #fde68a; text-decoration: none; min-height: 56px; }
.a-payer.ok { background: var(--teal-soft); border-color: var(--teal-pale); }
.a-payer img { width: 38px; height: 38px; flex: none; }
.a-payer div { flex: 1; min-width: 0; }
.a-payer b { display: block; font-size: 13.5px; font-weight: 800; }
.a-payer small { display: block; font-size: 11.5px; color: var(--amber-dark); font-weight: 700; }
.a-payer.ok small { color: var(--teal-dark); }
/* 13/10/2026 (note de F2) : le chevron des cartes à payer pointe vers la fin de ligne, donc vers la gauche en arabe */
html[dir="rtl"] .a-payer > svg { transform: scaleX(-1); }
.maintenant { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 11px; background: var(--teal-soft); border-radius: 14px; }
.maintenant img { width: 34px; height: 34px; flex: none; }
.maintenant .q { flex: 1; min-width: 0; }
.maintenant small { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--vert); text-transform: uppercase; letter-spacing: .04em; }
html[lang="ar"] .maintenant small { letter-spacing: 0; text-transform: none; }
.maintenant small::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
.maintenant.ensuite small { color: var(--muted); }
.maintenant.ensuite small::before { background: var(--muted-2); box-shadow: none; }
.maintenant b { display: block; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.maintenant .depuis { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; align-self: flex-end; }

/* puces / onglets */
.jours { display: flex; gap: 6px; flex-wrap: wrap; }
.jours button { min-height: 44px; font-size: 12.5px; font-weight: 800; padding: 0 14px; border-radius: 999px; background: var(--carte); color: var(--muted); box-shadow: var(--ombre); }
.jours button.on { background: var(--teal-dark); color: #fff; }
.navjour { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.navjour .fleche { width: 44px; height: 44px; border-radius: 50%; background: var(--carte); box-shadow: var(--ombre); display: grid; place-items: center; flex: none; color: var(--teal-dark); }
.navjour .fleche:disabled { opacity: .35; box-shadow: none; }
.navjour .quand { flex: 1; text-align: center; font-size: 14px; font-weight: 800; }
.navjour .quand small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* journée */
.resume { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.resume div { background: var(--carte); border-radius: 16px; box-shadow: var(--ombre); padding: 8px 3px 9px; text-align: center; min-width: 0; }
.resume img { width: 32px; height: 32px; margin: 0 auto 2px; }
.resume b { display: block; font-size: 13px; font-weight: 900; }
.resume small { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.fil { padding: 4px 12px; }
.ev { display: flex; gap: 10px; position: relative; padding: 7px 0; }
.ev::before { content: ''; position: absolute; inset-inline-start: 44px; top: 0; bottom: 0; width: 2px; background: var(--ligne); }
.ev:first-child::before { top: 50%; } .ev:last-child::before { bottom: 50%; }
.ev:only-child::before { display: none; }
.ev .h { width: 38px; font: 800 11.5px var(--police); color: var(--muted); padding-top: 3px; flex: none; direction: ltr; text-align: end; }
.ev .pt { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 3px solid var(--teal-pale); margin-top: 4px; flex: none; position: relative; z-index: 1; margin-inline-start: -2px; }
.ev .q { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.ev .q b { font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.ev .q small { display: block; width: 100%; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: -2px; }
.ev.en-cours .pt { background: var(--vert); border-color: var(--vert-bg); }
.vignettes { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.vignettes a { width: 56px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--rose-pale); }
.vignettes img { width: 100%; height: 100%; object-fit: cover; }
.mot { background: var(--rose-soft); border: 1px solid var(--rose-pale); border-radius: 18px; padding: 11px 13px; }
.mot small { font-size: 11px; font-weight: 800; color: var(--rose-dark); text-transform: uppercase; letter-spacing: .04em; }
html[lang="ar"] .mot small { letter-spacing: 0; text-transform: none; }
.mot p { font-size: 13px; font-weight: 700; line-height: 1.5; margin: 3px 0; overflow-wrap: anywhere; }
.mot em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* progrès */
.domaine { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--ligne); width: 100%; text-align: start; min-height: 52px; }
.domaine:first-child { border-top: none; }
.domaine .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.domaine .ic img { width: 26px; height: 26px; }
.domaine .q { flex: 1; min-width: 0; }
.domaine .q > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.domaine b { font-size: 13px; font-weight: 800; }
.domaine small { font-size: 11px; color: var(--muted); font-weight: 700; white-space: nowrap; }
.barre { height: 7px; border-radius: 999px; background: #eeebe3; margin-top: 5px; overflow: hidden; display: flex; }
.barre span { display: block; height: 100%; }
.barre span:first-child { border-radius: 999px; }
.barre .encours { opacity: .35; }
.comps { padding: 2px 0 8px 0; border-top: 1px dashed var(--ligne); }
.comp { display: flex; align-items: center; gap: 9px; padding: 6px 0 6px 0; font-size: 12.5px; font-weight: 700; }
.comp .rond-n { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 900 11px var(--police); border: 2px solid var(--ligne); color: #fff; }
.comp.n2 .rond-n { background: var(--vert); border-color: var(--vert); }
.comp.n1 .rond-n { border-color: var(--amber); background: var(--amber-pale); }
.comp.n0 { color: var(--muted); }
.acquis { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--ligne); }
.acquis:first-of-type, .titre-s + .acquis { border-top: none; }
.acquis .ok { width: 24px; height: 24px; border-radius: 50%; background: var(--vert-bg); color: var(--vert); display: grid; place-items: center; font: 900 12px var(--police); flex: none; }
.acquis b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.acquis small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; }
.mesures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mesures > div { background: var(--carte); border-radius: 16px; box-shadow: var(--ombre); padding: 10px 12px; line-height: 1.3; }
.mesures small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); }
.mesures b { display: block; font: 900 19px var(--police); }
.mesures em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--vert); }
.hist { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 700; padding: 7px 0; border-top: 1px solid var(--ligne); }
.hist:first-of-type { border-top: none; }
.hist span:last-child { color: var(--muted); }
.bilan p { font-size: 13px; font-weight: 600; line-height: 1.55; margin: 4px 0; overflow-wrap: anywhere; white-space: pre-line; }
.bilan em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* prévenir */
.intro { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choix button { background: var(--carte); border-radius: 16px; box-shadow: var(--ombre); padding: 9px; border: 2px solid transparent; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; align-items: center; text-align: start; min-height: 56px; }
.choix button.on { border-color: var(--teal); background: var(--teal-soft); }
.choix img { width: 32px; height: 32px; grid-row: span 2; }
.choix b { display: block; font-size: 13px; font-weight: 800; line-height: 1.2; }
.choix small { display: block; font-size: 11px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.choix .large { grid-column: span 2; }
.form-q { font-size: 13.5px; font-weight: 800; margin-bottom: 8px; }
.champ { display: block; margin-top: 10px; }
.champ > span { display: block; font-size: 12px; font-weight: 800; margin-bottom: 4px; color: var(--muted); }
.champ input, .champ textarea { width: 100%; min-height: 48px; padding: 10px 12px; background: var(--fond); border: 2px solid var(--ligne); border-radius: 12px; font-size: 15px; font-weight: 700; outline: none; }
.champ textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.champ input:focus, .champ textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(var(--teal-rgb),.12); }
.champ-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bouton { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; text-align: center; background: var(--teal-dark); color: #fff; font-size: 15px; font-weight: 800; padding: 12px; border-radius: 16px; box-shadow: 0 6px 14px rgba(var(--teal-rgb),.28); text-decoration: none; }
.bouton:disabled { opacity: .6; }
.bouton-clair { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; text-align: center; background: var(--carte); color: var(--teal-dark); font-size: 14px; font-weight: 800; padding: 11px; border-radius: 16px; box-shadow: var(--ombre); text-decoration: none; }
.suivi { padding: 8px 4px; border-top: 1px solid var(--ligne); font-size: 12.5px; font-weight: 700; color: var(--ink); }
.suivi:first-of-type { border-top: none; }
.suivi .ligne { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.suivi .ligne > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.suivi small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.lu { color: var(--teal); font-weight: 800; white-space: nowrap; font-size: 12px; }
.lu.refus { color: var(--rouge); }
.lu.attente { color: var(--amber-dark); }

/* photos */
.prive { display: flex; align-items: center; gap: 8px; background: var(--teal-soft); border-radius: 14px; padding: 9px 11px; font-size: 12px; font-weight: 700; color: var(--teal-dark); }
.galerie h4 { font-size: 13px; font-weight: 800; margin-bottom: 7px; display: flex; justify-content: space-between; gap: 8px; }
.galerie h4 small { color: var(--muted); font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.photo { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(135deg, #fde4ee, #fbcfe0); display: block; width: 100%; padding: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.visionneuse { position: fixed; inset: 0; z-index: 80; background: rgba(var(--nuit-rgb),.96); display: flex; flex-direction: column; touch-action: pan-y; }
.visionneuse .haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; color: #fff; }
.visionneuse .haut span { font-size: 13px; font-weight: 800; opacity: .85; }
.visionneuse .bt { min-width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; padding: 0 12px; text-decoration: none; font-size: 13px; font-weight: 800; }
.visionneuse .scene { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 8px; position: relative; }
.visionneuse .scene img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.visionneuse .pas { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; }
.visionneuse .pas.av { inset-inline-start: 8px; } .visionneuse .pas.ap { inset-inline-end: 8px; }
html[dir="rtl"] .visionneuse .pas svg { transform: scaleX(-1); }
.visionneuse .legende { color: #fff; text-align: center; font-size: 14px; font-weight: 700; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); min-height: 54px; }
.visionneuse .legende small { display: block; opacity: .7; font-size: 12px; margin-top: 2px; }

/* messages */
.ecran-msg { height: 100vh; height: 100dvh; }
.fil-msg { flex: 1; overflow-y: auto; padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.sep { align-self: center; font-size: 11px; font-weight: 800; color: var(--muted); background: var(--carte); padding: 4px 11px; border-radius: 999px; box-shadow: var(--ombre); margin-top: 4px; }
.bulle { max-width: 84%; padding: 9px 12px; border-radius: 18px; font-size: 13.5px; font-weight: 600; line-height: 1.5; position: relative; overflow-wrap: anywhere; white-space: pre-line; }
.bulle small { display: block; font: 700 10.5px var(--police); opacity: .65; margin-top: 3px; text-align: end; direction: ltr; white-space: normal; }
.moi { align-self: flex-end; background: var(--teal-dark); color: #fff; border-end-end-radius: 6px; }
.eux { align-self: flex-start; background: var(--carte); box-shadow: var(--ombre); border-end-start-radius: 6px; }
.eux .par { display: block; font-size: 11px; font-weight: 800; color: var(--rose-dark); margin-bottom: 2px; }
.note-prive { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 0 10px; }
.saisie { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 9px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--carte); border-top: 1px solid var(--ligne); }
.saisie textarea { flex: 1; min-height: 44px; max-height: 120px; background: var(--fond); border: 2px solid transparent; border-radius: 22px; padding: 10px 14px; font-size: 15px; font-weight: 600; line-height: 1.4; resize: none; outline: none; }
.saisie textarea:focus { border-color: var(--teal); }
.saisie .env { width: 46px; height: 46px; border-radius: 50%; background: var(--teal-dark); display: grid; place-items: center; color: #fff; flex: none; }
.saisie .env:disabled { opacity: .5; }
html[dir="rtl"] .saisie .env svg { transform: scaleX(-1); }
.edu { width: 40px; height: 40px; border-radius: 50%; background: var(--rose-pale); color: var(--rose-dark); display: grid; place-items: center; font-weight: 900; font-size: 16px; flex: none; position: relative; }
.edu::after { content: ''; position: absolute; bottom: 0; inset-inline-end: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--vert); border: 2px solid var(--fond); }

/* paiements */
.du { background: linear-gradient(135deg, var(--teal-dark), var(--teal-deep)); color: #fff; border-radius: 22px; padding: 15px; position: relative; overflow: hidden; }
.du small { font-size: 12px; font-weight: 700; opacity: .8; display: block; }
.du b { font: 900 29px var(--police); display: block; margin: 2px 0 5px; padding-inline-end: 70px; }
.du .avant { display: inline-block; font-size: 11.5px; font-weight: 800; background: rgba(245,158,11,.22); color: #fde68a; padding: 3px 10px; border-radius: 999px; }
.du .avant.bon { background: rgba(255,255,255,.18); color: #fff; }
.du img { position: absolute; inset-inline-end: 12px; top: 14px; width: 64px; height: 64px; }
.mois-t { font-size: 12px; font-weight: 800; color: var(--muted); padding: 4px 4px 0; }
.ligne-p { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ligne); }
.ligne-p:first-of-type, .titre-s + .ligne-p { border-top: none; }
.ligne-p .ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.ligne-p .ic img { width: 25px; height: 25px; }
.ligne-p .q { flex: 1; min-width: 0; }
.ligne-p .q b { display: block; font-size: 13px; font-weight: 800; overflow-wrap: anywhere; }
.ligne-p .q small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ligne-p .m { text-align: end; flex: none; }
.ligne-p .m b { display: block; font: 900 13px var(--police); white-space: nowrap; }
.recu { font-size: 11px; font-weight: 800; color: var(--teal-dark); background: var(--teal-soft); padding: 2px 8px; border-radius: 8px; display: inline-block; margin-top: 2px; }
.note { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; padding: 0 8px; }

/* connexion */
.connexion { flex: 1; padding: calc(14px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 13px; }
.connexion > * { flex-shrink: 0; }
.connexion .haut { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin: 10px 0 6px; }
.connexion .haut img { width: 76px; height: 76px; border-radius: 24px; background: var(--teal-deep); padding: 8px; box-shadow: var(--ombre); object-fit: contain; }
.connexion h3 { font-size: 22px; font-weight: 900; }
.connexion .haut p { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: -2px; }
.saisi label { display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 5px; }
.boite { display: flex; align-items: center; gap: 8px; background: var(--carte); border: 2px solid var(--ligne); border-radius: 14px; padding: 0 12px; min-height: 52px; }
.boite:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(var(--teal-rgb),.12); }
.boite svg { color: var(--muted-2); flex: none; }
.boite .i3, .prive .i3 { flex: none; object-fit: contain; }
.boite input { flex: 1; min-width: 0; border: none; outline: none; background: none; font: 800 16px var(--police); padding: 12px 0; direction: ltr; text-align: start; }
html[dir="rtl"] .boite input { text-align: right; }
.boite input::placeholder { color: var(--muted-2); font-weight: 600; }
.boite .oeil { min-width: 44px; height: 44px; margin-inline-end: -8px; display: grid; place-items: center; color: var(--muted-2); }
.rangee-c { display: flex; align-items: center; justify-content: flex-end; font-size: 13px; font-weight: 700; }
.oubli { color: var(--teal-dark); font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; padding: 0 4px; }
.info-wa { display: flex; gap: 10px; align-items: flex-start; background: var(--vert-bg); border-radius: 16px; padding: 11px 13px; font-size: 12.5px; font-weight: 700; color: #14532d; line-height: 1.5; }
.info-wa img { width: 32px; height: 32px; flex: none; }
.info-oubli { background: var(--amber-pale); color: #78350f; }
.erreur-form { background: var(--rouge-bg); color: var(--rouge); border-radius: 14px; padding: 10px 13px; font-size: 13px; font-weight: 800; line-height: 1.45; }
.langues { display: flex; justify-content: center; gap: 6px; margin-top: auto; padding-top: 10px; }
.langues button { min-height: 44px; font-size: 13px; font-weight: 800; padding: 0 16px; border-radius: 999px; background: var(--carte); color: var(--muted); box-shadow: var(--ombre); }
.langues button.on { background: var(--teal-dark); color: #fff; }

/* la page « lien » */
.vitrine { flex: 1; padding: calc(28px + env(safe-area-inset-top)) 20px 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; background: linear-gradient(180deg, var(--teal-soft), var(--fond) 60%); }
.vitrine > * { flex-shrink: 0; }
.vitrine .gros-logo { width: 88px; height: 88px; border-radius: 28px; background: var(--teal-deep); padding: 9px; box-shadow: var(--ombre); object-fit: contain; }
.vitrine h1 { font-size: 22px; font-weight: 900; line-height: 1.2; }
.vitrine .sous { font-size: 13.5px; color: var(--muted); font-weight: 700; margin-top: -6px; }
.dl { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--teal-dark); color: #fff; border-radius: 18px; padding: 12px 14px; text-align: start; box-shadow: 0 6px 14px rgba(var(--teal-rgb),.28); text-decoration: none; min-height: 60px; }
.dl .pic { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.16); display: grid; place-items: center; flex: none; }
.dl b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.dl small { display: block; font-size: 11.5px; font-weight: 700; opacity: .85; }
.dl.clair { background: var(--carte); color: var(--teal-dark); box-shadow: var(--ombre); }
.dl.clair .pic { background: var(--teal-soft); }
.dl.clair small { color: var(--muted); opacity: 1; }
.dl.off { background: #eeebe3; color: var(--muted); box-shadow: none; }
.dl.off .pic { background: rgba(0,0,0,.06); }
.dl .pic .i3 { object-fit: contain; }
.dl.off .pic .i3 { filter: grayscale(1); opacity: .5; }
.etapes { width: 100%; text-align: start; background: var(--carte); border-radius: 18px; box-shadow: var(--ombre); padding: 12px 14px; }
.etapes h2 { font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.etapes ol { padding-inline-start: 22px; font-size: 13px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.etapes li::marker { font-weight: 900; color: var(--teal-dark); }
.astuce { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.5; padding: 0 4px; }
.qr-bloc { width: 100%; display: flex; align-items: center; gap: 14px; background: var(--carte); border-radius: 18px; box-shadow: var(--ombre); padding: 12px; text-align: start; }
.qr-bloc .qr { width: 112px; height: 112px; flex: none; }
.qr-bloc .qr svg { width: 100%; height: 100%; display: block; }
.qr-bloc b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.qr-bloc small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.qr-bloc .adresse { font-size: 11px; font-weight: 800; color: var(--teal-dark); margin-top: 6px; direction: ltr; text-align: start; overflow-wrap: anywhere; }
.pied-web { margin-top: auto; font-size: 11px; font-weight: 700; color: var(--muted-2); }
.imprimer { min-height: 44px; }

@media print {
  body { background: #fff; }
  #app { box-shadow: none; max-width: none; }
  .vitrine { background: #fff; }
  .dl, .etapes, .astuce, .imprimer, .langues, .pied-web, .vitrine .sous { display: none !important; }
  .qr-bloc { box-shadow: none; border: 2px solid var(--teal-deep); flex-direction: column; text-align: center; max-width: 360px; margin: 0 auto; padding: 24px; }
  .qr-bloc .qr { width: 280px; height: 280px; }
  .qr-bloc b { font-size: 20px; } .qr-bloc small { font-size: 14px; } .qr-bloc .adresse { font-size: 15px; text-align: center; }
}

/* 06/10/2026 : écran « Le bus » (375 px, arabe de droite à gauche) */
.a-payer.bus-carte.en-route { background: var(--teal-soft); border-color: var(--teal); }
.a-payer.bus-carte.en-route small { color: var(--teal-dark); }
.bus-etat, .bus-arret { display: flex; flex-direction: column; gap: 10px; }
.bus-etat.en-route { border: 1.5px solid var(--teal-pale); }
.bus-ligne { display: flex; align-items: center; gap: 10px; }
.bus-ligne > div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.bus-ligne b { font-size: 15px; font-weight: 900; }
.bus-ligne small { font-size: 12px; font-weight: 700; color: var(--muted); }
.bus-ligne .i3 { flex: none; object-fit: contain; }
.bus-gros { font-size: 26px; font-weight: 900; color: var(--teal-dark); text-align: center; line-height: 1.2; }
.bus-eta { font-size: 15px; font-weight: 800; text-align: center; }
.bus-info { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.bus-age { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--teal-dark); }
.bus-age .i3 { object-fit: contain; }
.bus-schema { display: flex; justify-content: center; }
.bus-schema svg { width: 200px; height: 200px; max-width: 100%; background: var(--teal-soft); border-radius: 50%; }
.bus-anneau { fill: none; stroke: var(--teal-pale); stroke-width: 1.2; }
.bus-trait { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 4; }
.bus-echelle { font-size: 8px; font-weight: 700; fill: var(--muted); }
.bus-nord { font-size: 11px; font-weight: 900; fill: var(--teal-dark); text-anchor: middle; }
.bus-vide p { margin-top: 6px; line-height: 1.5; }
.bus-vide b { color: var(--teal-dark); font-size: 14px; }
.bus-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bus-arret .bouton { line-height: 1.3; }

/* =====================================================================
   13/10/2026 : finition (boutons, tuiles, cartes, barre du bas, écrans, icônes 3D).
   - transitions sur transform, box-shadow et background-color seulement (jamais « all ») ;
   - le survol ne joue que sur les appareils à souris (@media (hover: hover)) ;
   - au doigt : pas de reflet bleu, une pression visible à la place (:active) ;
   - tout s'arrête avec « réduire les animations » (bloc tout en bas).
   ===================================================================== */

/* --- icônes 3D : taille fixe, jamais déformées, petite ombre portée --- */
.i3 { flex: none; object-fit: contain; filter: var(--ombre-ic); }
.tuile img, .a-payer img, .resume img, .choix img, .du img, .ligne-p .ic img, .domaine .ic img, .maintenant img, .info-wa img, .avatar:not(.photo) img { object-fit: contain; filter: var(--ombre-ic); }
.tuile img, .a-payer img, .choix img, .domaine .ic { transition: transform var(--anim) var(--courbe-ressort); }

/* --- anneau de focus net (clavier seulement) --- */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bouton:focus-visible, .dl:not(.clair):not(.off):focus-visible, .saisie .env:focus-visible { outline-color: var(--teal-deep); }
.visionneuse a:focus-visible, .visionneuse button:focus-visible, .du a:focus-visible, .du button:focus-visible { outline-color: var(--focus-clair); }
.nav-bas a:focus-visible { outline-offset: -5px; border-radius: var(--r-m); }

/* --- boutons pleins (sarcelle) ---
   Une variante colorée n'a qu'à poser --bouton-survol (ex. .bouton.x { background: …; --bouton-survol: … }). */
.bouton, .dl, .saisie .env { transition: transform var(--anim-rapide) var(--courbe), box-shadow var(--anim) var(--courbe), background-color var(--anim) var(--courbe); }
.bouton { box-shadow: var(--ombre-teal); }
.bouton:disabled, .saisie .env:disabled { cursor: not-allowed; box-shadow: none; transform: none; }
.bouton:not(:disabled):active, .dl:not(.off):not(.clair):active, .saisie .env:not(:disabled):active { transform: var(--presse); box-shadow: var(--ombre-teal-bas); transition-duration: 80ms, var(--anim), var(--anim); }
/* envoi en cours : la page pose aria-busy="true" sur le bouton (petit anneau qui tourne) */
.bouton[aria-busy="true"], .bouton-clair[aria-busy="true"] { cursor: progress; pointer-events: none; }
.bouton[aria-busy="true"]::after, .bouton-clair[aria-busy="true"]::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; flex: none; animation: nc-tourne .7s linear infinite; }

/* --- boutons clairs, puces, ronds, flèches, choix --- */
.bouton-clair, .rond, .freres button, .jours button, .langues button, .navjour .fleche, .choix button, .dl.clair, .visionneuse .bt, .visionneuse .pas { transition: transform var(--anim-rapide) var(--courbe), box-shadow var(--anim) var(--courbe), background-color var(--anim) var(--courbe); }
.freres button.on, .jours button.on, .langues button.on { box-shadow: var(--ombre-teal); }
.bouton-clair:active, .rond:active, .navjour .fleche:not(:disabled):active, .choix button:active, .dl.clair:active, .freres button:active, .jours button:active, .langues button:active { transform: var(--presse); box-shadow: var(--ombre-1); transition-duration: 80ms, var(--anim), var(--anim); }
.navjour .fleche:disabled { cursor: not-allowed; }
.choix button.on { box-shadow: 0 0 0 1px var(--teal-pale), var(--ombre-2); }
.visionneuse .bt:active, .visionneuse .pas:active { transform: scale(.92); background-color: rgba(255,255,255,.28); }

/* --- tuiles de l'accueil et cartes cliquables --- */
.tuile, a.carte, .photo, .vignettes a { transition: transform var(--anim) var(--courbe), box-shadow var(--anim) var(--courbe), background-color var(--anim) var(--courbe); }
.tuile { box-shadow: 0 1px 2px rgba(var(--ink-rgb),.05); }
.tuile:active, a.carte:active { transform: scale(.975); box-shadow: var(--ombre-1); transition-duration: 90ms, var(--anim), var(--anim); }
.tuile:active img { transform: scale(.92); }
.photo:active, .vignettes a:active { transform: var(--presse); }
.photo img, .vignettes img { transition: transform var(--anim-lente) var(--courbe); }
.domaine:active .ic { transform: scale(.9); }
.oubli:active, .boite .oeil:active { opacity: .6; }

@media (hover: hover) {
  .bouton:not(:disabled):hover, .dl:not(.off):not(.clair):hover, .saisie .env:not(:disabled):hover { background-color: var(--bouton-survol, var(--teal-survol)); transform: var(--leve); box-shadow: var(--ombre-teal-haut); }
  .bouton-clair:hover, .rond:hover, .navjour .fleche:not(:disabled):hover, .choix button:hover, .dl.clair:hover, .freres button:hover, .jours button:hover, .langues button:hover { transform: var(--leve); box-shadow: var(--ombre-3); }
  .freres button:not(.on):hover, .jours button:not(.on):hover, .langues button:not(.on):hover, .choix button:not(.on):hover { background-color: var(--teal-soft); }
  .visionneuse .bt:hover, .visionneuse .pas:hover { background-color: rgba(255,255,255,.24); }
  .tuile:hover, a.carte:hover { transform: var(--leve-fort); box-shadow: var(--ombre-3); }
  .tuile:hover img { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
  html[dir="rtl"] .tuile:hover img { transform: translateY(-2px) rotate(6deg) scale(1.08); }
  a.carte:hover img, .choix button:hover img { transform: scale(1.08); }
  .photo:hover img, .vignettes a:hover img { transform: scale(1.06); }
  .domaine:hover .ic { transform: scale(1.08); }
  .domaine:hover b, .oubli:hover { color: var(--teal-dark); }
  .oubli:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* --- barre du bas : trait animé au-dessus de l'onglet ouvert, pression visible --- */
.nav-bas { box-shadow: 0 -6px 18px rgba(var(--ink-rgb),.05); }
.nav-bas a::before { content: ''; position: absolute; top: 0; inset-inline: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal-dark); transform: scaleX(0); transition: transform var(--anim) var(--courbe); }
.nav-bas a.on::before { transform: scaleX(1); }
.nav-bas a:active .i3 { transform: scale(.88); }
.nav-bas a.on:active .i3 { transform: scale(1.02); }
@media (hover: hover) { .nav-bas a:not(.on):hover .i3 { opacity: .85; filter: grayscale(.3); transform: translateY(-1px); } }

/* --- arrivée d'un écran : fondu + glissement de 8 px, cartes en légère cascade ---
   app.js peut poser #app.calme pendant un rafraîchissement calme (accueil 60 s, bus 15 s) :
   rien ne bouge alors. L'écran du bus ne joue jamais la cascade (il se redessine toutes les 15 s). */
@keyframes nc-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nc-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes nc-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes nc-monte { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nc-zoom { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nc-tourne { to { transform: rotate(360deg); } }
@keyframes nc-respire { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes nc-brille { from { background-position: 150% 0; } to { background-position: -50% 0; } }
#app:not(.calme) .contenu > * { animation: nc-entree var(--anim) var(--courbe) backwards; }
#app:not(.calme) .contenu > :nth-child(2) { animation-delay: 30ms; }
#app:not(.calme) .contenu > :nth-child(3) { animation-delay: 60ms; }
#app:not(.calme) .contenu > :nth-child(4) { animation-delay: 90ms; }
#app:not(.calme) .contenu > :nth-child(5) { animation-delay: 120ms; }
#app:not(.calme) .contenu > :nth-child(n+6) { animation-delay: 150ms; }
#app:not(.calme) .connexion, #app:not(.calme) .vitrine { animation: nc-fondu var(--anim) var(--courbe) backwards; }
.contenu:has(.bus-etat, .bus-arret, .bus-vide) > * { animation: none !important; }
/* pastilles (non lus) qui « pop » à l'arrivée */
#app:not(.calme) .rond i, #app:not(.calme) .nav-bas a i { animation: nc-pop var(--anim-lente) var(--courbe-ressort) backwards; animation-delay: 160ms; }
/* message bref, visionneuse, chargement */
.toast { animation: nc-monte var(--anim) var(--courbe) backwards; }
.visionneuse { animation: nc-fondu var(--anim) var(--courbe) backwards; }
.visionneuse .scene img { animation: nc-zoom var(--anim-lente) var(--courbe) backwards; }
.chargement { align-content: center; gap: 14px; }
.chargement::before { content: ''; width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--teal-pale); border-top-color: var(--teal); animation: nc-tourne .8s linear infinite; }
/* squelette réutilisable (bloc qui brille pendant un chargement) : <div class="squelette"></div> */
.squelette { min-height: 16px; border-radius: var(--r-s); background: linear-gradient(90deg, #eeebe3 0%, #f7f5ef 40%, #eeebe3 80%); background-size: 200% 100%; animation: nc-brille 1.3s ease-in-out infinite; }
.carte.squelette { min-height: 84px; box-shadow: none; }

/* =====================================================================
   COULEURS DE LA CRÈCHE (13/10/2026)
   couleurs.css (/c/<code>/couleurs.css, liée APRÈS ce fichier) redéfinit les variables de :root.
   Avec le thème Nexo, rien ici ne change l'affichage d'un pixel.
   ===================================================================== */
/* Le code QR suit la couleur la plus sombre de la crèche (le JS écrit fill="#042f2e" = --teal-deep de Nexo) */
.qr-bloc .qr svg path { fill: var(--teal-deep); }
/* Le nom de la crèche prend la police de la marque (titres « classiques ») ; Nexo : var(--police), identique */
.tete .logo-c + .txt b, .tete .retour + .txt small, .connexion h3 { font-family: var(--police-marque, var(--police)); }
/* Vitrine : prête pour le jour où lien.js entourera le nom de <span class="nom-c"> (aujourd'hui noyé dans la phrase) */
.vitrine .nom-c { font-family: var(--police-marque, var(--police)); }
/* Progrès : app.js écrit la sarcelle de Nexo en style inline pour le 1er domaine (#ccfbf1 / #0d9488 = --teal-pale / --teal).
   Pont CSS en attendant que app.js pose les variables lui-même ; Nexo : mêmes valeurs, identique. */
.domaine .ic[style*="#ccfbf1"] { background: var(--teal-pale) !important; }
.barre span[style*="#0d9488"] { background: var(--teal) !important; }
/* Touches d'accent, seulement quand la crèche a ses couleurs : anneau fin du logo, filet sous l'en-tête,
   pastille du nombre de non-lus. Le navigateur qui ne connaît pas @container style() garde l'aspect Nexo. */
@container not (style(--teal-rgb: 13,148,136) and style(--accent-rgb: 245,158,11)) {
  /* 13/10/2026 : fond du logo = couleur principale (la plus sombre virait au noir) ; le blanc y reste lisible (contraste >= 4,5) */
  .tete .logo-c, .connexion .haut img, .vitrine .gros-logo { background: var(--teal); }
  .tete .logo-c { box-shadow: 0 0 0 2px var(--fond), 0 0 0 3.5px rgba(var(--accent-rgb, 245,158,11), .9); }
  .connexion .haut img { box-shadow: 0 0 0 3px var(--fond), 0 0 0 4.5px rgba(var(--accent-rgb, 245,158,11), .9), var(--ombre); }
  .tete { position: relative; }
  .tete::after { content: ''; position: absolute; inset-inline: 16px; bottom: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb, 245,158,11), .55) 18%, rgba(var(--accent-rgb, 245,158,11), .55) 82%, transparent); }
  /* or ou ambre : le blanc y manque de contraste, le chiffre prend la couleur la plus sombre de la crèche */
  .nav-bas a i, .rond i { background: var(--accent, var(--rose)); color: var(--teal-deep); }
  /* 13/10/2026 : tuiles (accueil, vie) dans les tons doux de la crèche ; rose, jaune et violet vifs = Nexo seulement */
  .t-ambre { background: var(--accent-pale); color: var(--accent-texte); }
  .t-rose { background: color-mix(in srgb, var(--accent-pale) 45%, #f6dcd5); color: #7a4536; }
  .t-lilas { background: color-mix(in srgb, var(--teal) 6%, #ffffff); color: var(--teal-deep); }
  .avatar { border-color: var(--accent); }
  /* 13/10/2026 (Said : « trop rose ») : le rose de sens (mot de l'éducatrice, allergie, badges d'alerte) passe en terre cuite douce,
     dans les tons de la carte. Posé sur body : la requête lit html, qui porte les couleurs. Blanc sur --rose : contraste 5,0. */
  body { --rose: #a85a40; --rose-dark: #8c4632; --rose-pale: #f4e0d6; --rose-soft: #fbf2ed; }
}

/* --- réduire les animations : tout est coupé (dernier bloc du fichier, il gagne sur le reste) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* bouton « Télécharger l'application » de la connexion (18/10/2026) */
.tel-zone { display: flex; flex-direction: column; gap: 8px; }
.tel-btn { border: 0; font: inherit; cursor: pointer; background: var(--carte); color: var(--teal-dark); box-shadow: var(--ombre), inset 0 0 0 2px var(--accent, var(--teal-dark)); }
.tel-btn .pic { background: var(--accent-pale, var(--teal-soft)); }
.tel-btn small { color: var(--muted); opacity: 1; }
.tel-aide { font-size: 12.5px; font-weight: 700; line-height: 1.55; color: var(--muted); text-align: start; }
.tel-voile { position: fixed; inset: 0; z-index: 60; background: rgba(var(--deep-rgb, 13,25,24), .55); display: grid; place-items: center; padding: 16px; }
.tel-fenetre { width: min(100%, 360px); max-height: 92vh; overflow-y: auto; background: var(--carte); border-radius: 22px; padding: 20px 18px 18px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); text-align: start; }
.tel-fenetre h2 { font-size: 17px; font-weight: 900; color: var(--teal-dark); margin-bottom: 10px; text-align: center; }
.tel-gestes { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0 0 8px; }
.tel-gestes li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.tel-picto { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal-dark); box-shadow: inset 0 0 0 2px var(--accent, var(--teal-dark)); }
.tel-qr { width: 220px; height: 220px; margin: 12px auto 8px; padding: 8px; border: 1px solid var(--ligne); border-radius: 14px; background: #fff; }
.tel-qr svg { width: 100%; height: 100%; display: block; }
.tel-adresse { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; overflow-wrap: anywhere; margin-bottom: 4px; }
.tel-fermer { width: 100%; margin-top: 10px; }