/* Appli parents NexoCrèche : écrans « la vie de la crèche » (vie.js, 13/10/2026).
   Lié APRÈS appli.css : mêmes variables, mêmes cartes, mêmes pastilles, aucune couleur à part.
   Propriétés logiques (inline-start / inline-end) : l'arabe se retourne tout seul.
   Les mouvements sont coupés par la règle prefers-reduced-motion d'appli.css. */

/* ---------- communs ---------- */
.v-chev { display: grid; place-items: center; flex: none; color: var(--muted-2); }
html[dir="rtl"] .v-chev svg { transform: scaleX(-1); }
.v-titre { font-size: 14px; font-weight: 800; margin-top: 4px; color: var(--ink); }
.v-vide { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 26px 16px; }
.v-vide p { font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.5; max-width: 30ch; }
.v-vide img { animation: nc-pop var(--anim-lente) var(--courbe-ressort) both; }
.v-lien { color: var(--teal-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; border-radius: var(--r-xs); min-height: 32px; }
.v-ltr { direction: ltr; text-align: start; }
html[dir="rtl"] .v-ltr { text-align: end; }
.v-bandeau { display: flex; align-items: center; gap: 10px; background: var(--rose-pale); color: var(--rose-dark); border-radius: var(--r-m); padding: 10px 12px; font-size: 12.5px; font-weight: 800; line-height: 1.45; }
.v-bandeau img { flex: none; }
.v-bandeau span { min-width: 0; overflow-wrap: anywhere; }

/* Bloc date (jour + mois) des événements */
.v-date { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--r-m); background: var(--teal-pale); color: var(--teal-deep); padding: 6px 0 5px; line-height: 1; }
.v-date b { font-size: 19px; font-weight: 900; }
.v-date small { font-size: 10.5px; font-weight: 800; text-transform: uppercase; margin-top: 3px; letter-spacing: .02em; }

/* ---------- accueil ---------- */
.v-alerte, .v-even { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/* Le bloc date est aussi un div : il garde sa largeur fixe */
.v-alerte > div:not(.v-date), .v-even > div:not(.v-date) { flex: 1; min-width: 0; }
.v-alerte { background: var(--rose-pale); color: var(--rose-dark); box-shadow: none; border: 1px solid var(--rose-soft); }
.v-alerte img { flex: none; animation: nc-respire 2.4s var(--courbe) infinite; }
.v-alerte b { display: block; font-size: 13.5px; font-weight: 900; }
.v-alerte small { display: block; font-size: 12px; font-weight: 700; line-height: 1.45; margin-top: 2px; overflow-wrap: anywhere; }
.v-alerte .v-chev { color: var(--rose-dark); }
.v-even .v-sur { display: block; font-size: 11px; font-weight: 800; color: var(--teal-dark); text-transform: uppercase; letter-spacing: .03em; }
.v-even b { display: block; font-size: 14px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.v-even .v-quand { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.v-tuile .v-tq { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-tuile small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.v-tuile.v-large { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 72px; }
.v-badge { position: absolute; top: 10px; inset-inline-end: 10px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rose); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--carte); animation: nc-pop var(--anim-lente) var(--courbe-ressort) both; }
.v-qr-carte small { color: var(--teal-dark); }
/* 13/10/2026 : avec les couleurs de la crèche, la pastille des annonces non lues prend l'accent (même règle que la barre
   du bas, appli.css). Les pastilles d'alerte (allergie au menu, vaccins en retard) gardent le rose : couleur de sens.
   Thème Nexo ou navigateur sans @container style() : le rose ci-dessus reste partout. */
@container not (style(--teal-rgb: 13,148,136) and style(--accent-rgb: 245,158,11)) {
  .v-tuile[href="#annonces"] .v-badge { background: var(--accent, var(--rose)); color: var(--teal-deep); }
}

/* ---------- annonces ---------- */
.v-ann { display: flex; flex-direction: column; gap: 10px; }
.v-ann.v-epingle { border: 1px solid var(--amber-pale); background: linear-gradient(180deg, var(--amber-soft), var(--carte) 70%); }
.v-ann.v-nonlu { box-shadow: var(--ombre), inset 3px 0 0 var(--teal); }
html[dir="rtl"] .v-ann.v-nonlu { box-shadow: var(--ombre), inset -3px 0 0 var(--teal); }
.v-ann.v-passe { opacity: .78; }
.v-ann-tete { display: flex; align-items: flex-start; gap: 11px; }
.v-ann-tete > img { flex: none; }
.v-ann-q { flex: 1; min-width: 0; }
.v-ann h3 { font-size: 15px; font-weight: 800; line-height: 1.35; margin-top: 5px; overflow-wrap: anywhere; }
.v-puces { display: flex; flex-wrap: wrap; gap: 5px; }
.v-puces .pastille img { width: 14px; height: 14px; }
.v-infos { display: flex; flex-direction: column; gap: 6px; background: var(--fond); border-radius: var(--r-m); padding: 9px 11px; }
.v-info { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; min-width: 0; }
.v-info img { flex: none; }
.v-info span { min-width: 0; overflow-wrap: anywhere; }
.v-texte { font-size: 13.5px; font-weight: 600; line-height: 1.6; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.v-pied { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; font-weight: 700; color: var(--muted); border-top: 1px solid var(--ligne); padding-top: 8px; }

/* ---------- menu ---------- */
/* 13/10/2026 (note de F2) : plus de blanc autour de la bande rose d'un plat touché. L'ancien gap de 4 px passe dans le
   padding des plats (11 au lieu de 9) : le texte reste exactement à sa place, la bande rose remplit l'espace. */
.v-jour { display: flex; flex-direction: column; gap: 0; }
.v-jour .titre-s span:first-child::first-letter { text-transform: uppercase; }
.v-jour.v-auj { box-shadow: var(--ombre), 0 0 0 2px var(--teal-pale); }
.v-repas { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid var(--ligne); }
.v-jour .titre-s + .v-repas { border-top: 0; margin-top: 4px; }
.v-repas:last-child { padding-bottom: 9px; }
.v-repas > img { flex: none; margin-top: 2px; }
.v-repas-q { flex: 1; min-width: 0; }
.v-repas-q small { display: block; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.v-repas-q b { display: block; font-size: 14px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.v-repas.v-touche { background: var(--rose-soft); margin-inline: -13px; padding-inline: 13px; }
/* pas de trait gris collé à la bande ; entre deux plats touchés, un trait rose */
.v-repas.v-touche, .v-repas.v-touche + .v-repas { border-top-color: transparent; }
.v-repas.v-touche + .v-repas.v-touche { border-top-color: var(--rose-pale); }
/* dernier plat touché : la bande descend jusqu'au bord de la carte (padding 13 px, coins de 20 px) */
.v-repas.v-touche:last-child { margin-bottom: -13px; padding-bottom: 22px; border-end-start-radius: var(--r-l); border-end-end-radius: var(--r-l); }
.v-alls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.v-all { font-size: 10.5px; padding: 2px 8px; }
.v-all-alerte { background: var(--rose-pale); color: var(--rose-dark); box-shadow: inset 0 0 0 1px var(--rose); }
.v-allergie { display: flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--rose-dark); }
.v-allergie img { flex: none; }

/* ---------- santé ---------- */
.v-fiche { display: flex; flex-direction: column; }
.v-fiche-tete { display: flex; align-items: center; gap: 11px; padding-bottom: 10px; }
.v-fiche-tete img { flex: none; }
.v-fiche-tete b { display: block; font-size: 15px; font-weight: 800; }
.v-fiche-tete small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.v-ligne { display: grid; grid-template-columns: minmax(84px, 34%) 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--ligne); font-size: 13px; }
.v-ligne > span { font-weight: 800; color: var(--muted); font-size: 12px; padding-top: 1px; }
.v-ligne > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.v-ligne .v-alls { margin-top: 0; }
.v-groupe { display: inline-block; align-self: flex-start; font-size: 15px; font-weight: 900; color: var(--rose-dark); background: var(--rose-pale); border-radius: var(--r-s); padding: 2px 10px; }
.v-note { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: pre-line; }
.v-nr { color: var(--muted-2); font-weight: 700; }
.v-tel { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; min-height: 40px; padding: 6px 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-dark); font-weight: 800; text-decoration: none; transition: transform var(--anim-rapide) var(--courbe), background-color var(--anim) var(--courbe); }
.v-tel img { flex: none; }
.v-tel:active { transform: var(--presse); }
@media (hover: hover) { .v-tel:hover { background: var(--teal-pale); transform: var(--leve); } }
.v-vaccins .titre-s { margin-bottom: 4px; }
.v-frise { list-style: none; position: relative; display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.v-frise::before { content: ''; position: absolute; inset-block: 18px; inset-inline-start: 15px; width: 2px; background: var(--ligne); border-radius: 2px; }
.v-vac { position: relative; display: flex; align-items: flex-start; gap: 11px; padding: 7px 0; }
.v-vac > img { flex: none; position: relative; background: var(--carte); border-radius: 50%; }
.v-vac-q { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.v-vac-q b { font-size: 13.5px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.v-vac-q small { flex-basis: 100%; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.v-vac.v-retard .v-vac-q b { color: var(--rose-dark); }
.v-vac.v-fait .v-vac-q b { color: var(--ink); }
.v-note-vac { margin-top: 8px; text-align: start; padding: 0; }

/* ---------- personnes autorisées ---------- */
.v-pers { display: flex; align-items: center; gap: 11px; }
.v-pers-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v-pers-q b { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.v-pers-q small { font-size: 12px; font-weight: 700; color: var(--muted); }
.v-pers-q .v-tel { min-height: 34px; padding: 4px 10px 4px 8px; font-size: 12.5px; margin-top: 3px; }
.v-pers .pastille { flex: none; align-self: flex-start; }
.v-pers.v-refusee { opacity: .7; }
.v-av { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 17px; font-weight: 900; box-shadow: 0 0 0 3px var(--carte), var(--ombre-1); }
.v-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.v-av.v-grand { width: 76px; height: 76px; }
.v-av.v-grand .i3 { position: static; width: 36px; height: 36px; object-fit: contain; }
.v-c0 { background: var(--teal-pale); color: var(--teal-deep); }
.v-c1 { background: var(--amber-pale); color: #78350f; }
.v-c2 { background: var(--rose-pale); color: var(--rose-dark); }
.v-c3 { background: var(--lilas-pale); color: #4c1d95; }
.v-form { display: flex; flex-direction: column; gap: 2px; animation: nc-monte var(--anim-lente) var(--courbe-sortie) both; }
.v-form .bouton { margin-top: 14px; }
.v-form .v-annuler { margin-top: 8px; }
.v-photo-zone { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.v-lib { font-size: 12px; font-weight: 800; color: var(--muted); }
.v-apercu { display: flex; align-items: center; gap: 12px; min-height: 80px; }
.v-aide, .v-etat { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.45; flex: 1; min-width: 0; }
.v-photo-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v-fichier { position: relative; cursor: pointer; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.25; padding: 10px 8px; min-width: 0; text-align: center; }
.v-fichier span { min-width: 0; overflow-wrap: anywhere; }
.v-fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v-fichier:focus-within { outline: 3px solid var(--focus, var(--teal)); outline-offset: 2px; }
#v-err:empty { display: none; }
#v-err { margin-top: 10px; }

/* ---------- code d'accueil (QR) ---------- */
.v-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 20px; text-align: center; }
.v-qr-nom { display: flex; align-items: center; gap: 10px; align-self: stretch; text-align: start; }
.v-qr-nom img { flex: none; }
.v-qr-nom small { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); }
.v-qr-nom b { display: block; font-size: 18px; font-weight: 900; overflow-wrap: anywhere; }
.v-qr-img { width: min(100%, 264px); aspect-ratio: 1; background: #fff; border-radius: var(--r-l); padding: 6px; box-shadow: 0 0 0 1px var(--ligne), var(--ombre-2); animation: nc-zoom var(--anim-lente) var(--courbe-ressort) both; }
.v-qr-img svg { display: block; width: 100%; height: 100%; }
/* 13/10/2026 : le code suit la couleur la plus sombre de la crèche (vie.js écrit fill="#042f2e" = --teal-deep de Nexo) */
.v-qr-img svg path { fill: var(--teal-deep); }
.v-qr-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 22px; font-weight: 800; letter-spacing: .08em; color: var(--teal-deep); background: var(--teal-soft); border-radius: var(--r-m); padding: 6px 14px; direction: ltr; overflow-wrap: anywhere; }
.v-qr-phrase { font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--ink); max-width: 32ch; }

/* Progrès : la coche texte est devenue l'icône 3D nexo-valide ; on ne la pose plus sur un rond vert */
.comp .rond-n .i3 { width: 20px; height: 20px; }
.comp.n2 .rond-n { background: transparent; border-color: transparent; }
.acquis .ok { background: none; }
/* 13/10/2026 (note de F2) : la coche 3D nexo-valide, orange à l'origine, prend le vert « fait » de l'appli (--vert #16a34a)
   partout : acquis, compétences, vaccins faits. Couleur de sens : elle ne suit pas les couleurs de la crèche. */
img.i3[src$="/nexo-valide.png"] { filter: hue-rotate(104deg) saturate(.9) brightness(1.05) var(--ombre-ic); }

/* Écrans étroits (moins de 360 px) : on resserre sans jamais déborder */
@media (max-width: 359px) {
  .v-photo-bts { grid-template-columns: 1fr; }
  .v-ligne { grid-template-columns: 1fr; gap: 4px; }
  .v-qr-code { font-size: 19px; }
}