/* LPF Réservation — styles
 * ---------------------------------------------------------------------------
 * Palette et typo alignées sur la charte du thème enfant (_variables.scss) :
 *   primaire teal #7bc8c8 · secondaire jaune #f4dd4c · bleu #a5d8e6
 *   texte #666 · titres #2f2b2b · sous-titres #adadad · police Poppins (héritée)
 * Les tokens sont exposés en variables CSS (portée .lpf-reservation) pour rester
 * faciles à ajuster. Fichier écrit à la main (pas de bundler) — cache-bust par
 * filemtime() côté PHP.
 * --------------------------------------------------------------------------- */

.lpf-reservation,
.lpf-account {
    --lpf-teal:       #7bc8c8;
    --lpf-teal-dark:  #5bb3b3;   /* survol / états appuyés */
    --lpf-teal-tint:  #eef8fb;   /* fond sélectionné / actif */
    --lpf-yellow:     #f4dd4c;
    --lpf-blue:       #a5d8e6;
    --lpf-ink:        #2f2b2b;   /* titres */
    --lpf-text:       #666666;   /* corps */
    --lpf-muted:      #adadad;   /* légendes, hints */
    --lpf-line:       #e2ecec;   /* bordures douces */
    --lpf-line-strong:#cfe0e0;
    --lpf-shadow:     rgba(49, 36, 36, .16);
    --lpf-radius:     14px;
    --lpf-radius-sm:  10px;
    /* états sémantiques (disponibilité) — volontairement doux */
    --lpf-ok-bg:   #e8f5e9;  --lpf-ok-fg:   #2e7d32;
    --lpf-full-bg: #fdecec;  --lpf-full-fg: #c0392b;
}

/* Cible du repositionnement auto au changement d'étape (front.js) : on dégage la
   hauteur du header collant du thème pour que le haut du module ne soit pas masqué. */
#lpf-reservation-root { scroll-margin-top: 100px; }
.lpf-reservation { font-family: inherit; max-width: 760px; margin: 0 auto; padding: 1.5rem; color: var(--lpf-text); scroll-margin-top: 100px; }

/* Titres du module */
.lpf-reservation h2 { color: var(--lpf-ink); font-size: 1.4rem; font-weight: 700; margin: 0 0 1.25rem; line-height: 1.2; }
.lpf-reservation h3 { color: var(--lpf-ink); font-size: 1rem; font-weight: 700; }
.lpf-reservation h4 { color: var(--lpf-ink); font-weight: 700; }

/* ─── Indicateur d'étapes (pastilles numérotées reliées) ──────────────────── */
.lpf-steps { display: flex; gap: 0; list-style: none; margin: 0 0 2.25rem; padding: 0; counter-reset: step; }
.lpf-step-dot {
    flex: 1; position: relative; counter-increment: step;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    font-size: .8rem; color: var(--lpf-muted); text-align: center;
}
.lpf-step-dot::before {
    content: counter(step);
    position: relative; z-index: 1;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid var(--lpf-line-strong);
    color: var(--lpf-muted); font-weight: 700; font-size: .9rem;
    transition: background .2s, border-color .2s, color .2s;
}
/* trait de liaison entre pastilles */
.lpf-step-dot::after {
    content: ""; position: absolute; top: 1rem; right: 50%;
    width: 100%; height: 2px; background: var(--lpf-line-strong); z-index: 0;
}
.lpf-step-dot:first-child::after { display: none; }
.lpf-step-dot--active { color: var(--lpf-ink); font-weight: 700; }
.lpf-step-dot--active::before { border-color: var(--lpf-teal); color: var(--lpf-teal); box-shadow: 0 0 0 4px var(--lpf-teal-tint); }
.lpf-step-dot--done { color: var(--lpf-teal-dark); }
.lpf-step-dot--done::before { background: var(--lpf-teal); border-color: var(--lpf-teal); color: #fff; }
.lpf-step-dot--done::after { background: var(--lpf-teal); }

/* ─── Cartes de choix (lieu, formule) ─────────────────────────────────────── */
.lpf-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.lpf-card {
    background: #fff; border: 2px solid var(--lpf-line); border-radius: var(--lpf-radius);
    padding: 1.2rem; cursor: pointer; text-align: left;
    transition: border-color .2s, box-shadow .2s, transform .1s;
    display: flex; flex-direction: column; gap: .3rem; color: var(--lpf-ink); font-weight: 600;
}
.lpf-card:hover { border-color: var(--lpf-teal); box-shadow: 0 6px 18px var(--lpf-shadow); transform: translateY(-1px); }
.lpf-card--active { border-color: var(--lpf-teal); background: var(--lpf-teal-tint); }
/* Option visible mais non réservable (ex. centre bloqué par le panier). On grise
   plutôt que de masquer : savoir que l'autre centre existe est une information,
   et une carte qui disparaît ressemble à un bug. */
.lpf-card--disabled { opacity: .45; cursor: not-allowed; background: var(--lpf-line); border-style: dashed; }
.lpf-card--disabled:hover { border-color: var(--lpf-line-strong); }
.lpf-card strong { display: block; font-size: 1rem; }
.lpf-card span { font-size: .85rem; color: var(--lpf-text); font-weight: 400; }
.lpf-card-icon { font-size: 1.1em; margin-right: .15rem; }

/* ─── Liste de semaines ───────────────────────────────────────────────────── */
.lpf-semaines { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.lpf-semaine-item {
    display: flex; align-items: center; gap: 1rem; padding: .8rem 1rem;
    border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius-sm);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.lpf-semaine-item:hover { border-color: var(--lpf-teal); background: var(--lpf-teal-tint); }
.lpf-semaine-item input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--lpf-teal); }
.lpf-semaine-item--complet { opacity: .55; cursor: not-allowed; background: #f7f9f9; }
.lpf-semaine-item--complet:hover { border-color: var(--lpf-line); background: #f7f9f9; }
.lpf-semaine-item--passe { opacity: .4; }
/* Semaine contenant un jour déjà réservé pour cet enfant — même bleu que les jours. */
.lpf-semaine-item--reserve { opacity: 1; background: #eaf5fb; border-color: var(--lpf-blue); border-style: dashed; cursor: not-allowed; }
.lpf-semaine-item--reserve:hover { border-color: var(--lpf-blue); background: #eaf5fb; }
.lpf-semaine-label { flex: 1; font-weight: 600; color: var(--lpf-ink); }
.lpf-semaine-nb-jours { font-size: .8rem; color: var(--lpf-muted); }
.lpf-semaine-places { font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--lpf-ok-bg); color: var(--lpf-ok-fg); }
.lpf-places--complet { background: var(--lpf-full-bg); color: var(--lpf-full-fg); }
.lpf-places--reserve { background: #d9edf7; color: #5b86a0; }
/* Période réservée aux adhérents (ou fermée) : jaune de la charte, comme le
   régime végé sur les fiches — un signal d'ATTENTION, ni un manque de place
   (gris) ni un doublon (bleu). La famille doit comprendre que ce n'est pas
   « plein » mais « pas pour vous, pas encore ». */
.lpf-places--verrouille { background: #fdf3d7; color: #8a6d1f; }
.lpf-semaine-item--verrouille {
    opacity: 1; background: #fffcf2; border-color: #e8d9a8;
    border-style: dashed; cursor: not-allowed;
}
.lpf-semaine-item--verrouille:hover { border-color: #e8d9a8; background: #fffcf2; }

/* ─── Calendrier ──────────────────────────────────────────────────────────── */
.lpf-calendrier { margin-bottom: 1.5rem; }
.lpf-calendrier-mois { margin-bottom: 1.5rem; }
.lpf-calendrier-mois h3 { font-size: 1rem; margin: 0 0 .6rem; text-transform: capitalize; }
.lpf-calendrier-grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.lpf-cal-header { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--lpf-muted); padding: .25rem; }
.lpf-cal-day {
    border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius-sm);
    padding: .55rem; text-align: center; cursor: pointer; background: #fff;
    font-size: .9rem; font-weight: 600; color: var(--lpf-ink);
    transition: background .15s, border-color .15s, color .15s;
}
.lpf-cal-day:hover:not(:disabled) { background: var(--lpf-teal-tint); border-color: var(--lpf-teal); }
.lpf-cal-day--selected { background: var(--lpf-teal); color: #fff; border-color: var(--lpf-teal); box-shadow: 0 3px 10px var(--lpf-shadow); }
.lpf-cal-day--complet { background: #f5f7f7; color: #bbb; cursor: not-allowed; }
.lpf-cal-day--passe { opacity: .4; cursor: not-allowed; }
/* Période réservée aux adhérents (ou fermée) : même jaune que les semaines, avec
   un cadenas d'angle. Le jour RESTE dans la grille — le retirer décalerait les
   suivants (cf. le férié), et laisserait croire à un trou dans le calendrier. */
.lpf-cal-day--verrouille {
    position: relative; background: #fffcf2; color: #a89354;
    border-color: #e8d9a8; border-style: dashed; cursor: not-allowed;
}
.lpf-cal-day--verrouille::after {
    content: "🔒"; position: absolute; top: 0; right: 2px;
    font-size: .55rem; line-height: 1;
}
/* Déjà réservé pour cet enfant (doublon interdit) : bleu de la charte + ✓ d'angle,
   visuellement distinct du férié (hachuré) et du complet (gris). */
.lpf-cal-day--reserve {
    position: relative; background: #eaf5fb; color: #5b86a0;
    border-color: var(--lpf-blue); border-style: dashed; cursor: not-allowed;
}
.lpf-cal-day--reserve::after {
    content: "✓"; position: absolute; top: 0; right: 3px;
    font-size: .62rem; font-weight: 700; color: var(--lpf-blue); line-height: 1;
}
/* Le « déjà réservé » prime visuellement sur le « férié » si les deux coïncident. */
.lpf-cal-day--reserve.lpf-cal-day--ferie { text-decoration: none; }
/* Jour férié : le centre est fermé. Grisé et barré — présent dans la grille pour
   ne pas décaler les jours suivants, mais visiblement non réservable. */
.lpf-cal-day--ferie {
    background: repeating-linear-gradient(-45deg, #f5f7f7, #f5f7f7 4px, #eef1f1 4px, #eef1f1 8px);
    color: #b3bcbc; border-color: var(--lpf-line); border-style: dashed;
    text-decoration: line-through; cursor: not-allowed;
}
.lpf-cal-day--empty { border: none; background: transparent; cursor: default; }

/* Légende des états du calendrier — pastilles reprenant le style des cases. */
.lpf-cal-legend { list-style: none; margin: 0 0 1.5rem; padding: .75rem 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; background: #fbfdfd; border: 1px solid var(--lpf-line); border-radius: var(--lpf-radius-sm); }
.lpf-cal-legend-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--lpf-text); }
.lpf-cal-legend-swatch { width: 22px; height: 22px; min-width: 22px; padding: 0; border-radius: 6px; pointer-events: none; }
.lpf-cal-legend-swatch::after { top: -2px; right: 2px; } /* recale le ✓ du swatch --reserve */

/* ─── Formulaire enfant ───────────────────────────────────────────────────── */
.lpf-enfant-form { border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius); padding: 1.25rem; margin-bottom: 1rem; }
.lpf-enfant-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.lpf-enfant-header h3 { margin: 0; font-size: 1rem; }
.lpf-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .75rem; font-size: .9rem; }
.lpf-field label { font-weight: 600; color: var(--lpf-ink); }
.lpf-field input,
.lpf-field select { padding: .5rem .7rem; border: 1.5px solid var(--lpf-line-strong); border-radius: var(--lpf-radius-sm); font-size: .95rem; width: 100%; box-sizing: border-box; background: #fff; color: var(--lpf-ink); transition: border-color .15s, box-shadow .15s; }
.lpf-field input:focus,
.lpf-field select:focus { outline: none; border-color: var(--lpf-teal); box-shadow: 0 0 0 3px var(--lpf-teal-tint); }
/* Selects : le thème Uncode pose une flèche SVG en background avec
   background-repeat: repeat → elle se répète sur toute la largeur. On neutralise
   (appearance:none + no-repeat) et on pose une flèche unique propre à droite.
   !important requis pour battre la spécificité d'Uncode (pattern établi ici). */
.lpf-field select,
.lpf-child-edit-form select,
.lpf-upload-form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%237bc8c8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
    background-size: 10px 6px !important;
    padding-right: 1.9rem !important;
}
.lpf-fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Le thème (Uncode/WooCommerce) impose aux <input>/<select> un fond gris #f7f7f7
   et une bordure transparente, avec une spécificité supérieure : les champs se
   fondaient dans le fond de page (contraste insuffisant). On rétablit un fond
   blanc + une bordure douce visible. !important requis pour battre le thème
   (pattern Uncode établi dans ce projet). Scopé sous .lpf-reservation/.lpf-account
   pour ne toucher que nos formulaires. */
.lpf-reservation .lpf-field input,
.lpf-reservation .lpf-field select,
.lpf-account .lpf-child-edit-form input,
.lpf-account .lpf-child-edit-form select,
.lpf-account .lpf-upload-form input[type="text"],
.lpf-account .lpf-upload-form select {
    background-color: #fff !important;
    border: 1.5px solid var(--lpf-line-strong) !important;
}
.lpf-reservation .lpf-field input:focus,
.lpf-reservation .lpf-field select:focus,
.lpf-account .lpf-child-edit-form input:focus,
.lpf-account .lpf-child-edit-form select:focus,
.lpf-account .lpf-upload-form input:focus,
.lpf-account .lpf-upload-form select:focus {
    border-color: var(--lpf-teal) !important;
}

/* ─── Enfants sauvegardés ─────────────────────────────────────────────────── */
.lpf-saved-section { margin-bottom: 1.5rem; }
.lpf-saved-hint { font-size: .85rem; color: var(--lpf-text); margin-bottom: .75rem; }
.lpf-saved-empty { font-size: .85rem; color: var(--lpf-muted); font-style: italic; }
.lpf-loading-text { font-size: .85rem; color: var(--lpf-muted); }
.lpf-saved-cards { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; }
.lpf-saved-card { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border: 2px solid var(--lpf-line); border-radius: var(--lpf-radius); background: #fff; cursor: pointer; transition: border-color .2s, background .2s; text-align: left; }
.lpf-saved-card:hover { border-color: var(--lpf-teal); }
.lpf-saved-card--selected { border-color: var(--lpf-teal); background: var(--lpf-teal-tint); }
.lpf-saved-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--lpf-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.lpf-saved-info { display: flex; flex-direction: column; }
.lpf-saved-info strong { font-size: .9rem; color: var(--lpf-ink); }
.lpf-saved-info span { font-size: .8rem; color: var(--lpf-muted); }
.lpf-saved-check { margin-left: .5rem; color: var(--lpf-teal-dark); font-weight: 700; }
.lpf-enfants-forms { margin-top: 1.5rem; }
.lpf-enfants-forms h3 { font-size: .95rem; color: var(--lpf-text); margin-bottom: .75rem; }
.lpf-enfant-header h4 { margin: 0; font-size: 1rem; }

/* ─── Options repas ───────────────────────────────────────────────────────── */
.lpf-options-repas { margin: 1.5rem 0; }
.lpf-options-repas h3 { font-size: .95rem; margin-bottom: .75rem; }
.lpf-options-row { display: flex; align-items: center; gap: 1.5rem; padding: .7rem 1rem; background: var(--lpf-teal-tint); border-radius: var(--lpf-radius-sm); margin-bottom: .5rem; }
.lpf-options-row strong { flex: 1; font-size: .85rem; color: var(--lpf-ink); }
.lpf-options-row label { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.lpf-options-row input { accent-color: var(--lpf-teal); }

/* Demi-journée : créneau matin/après-midi (requis) + repas filtrés */
.lpf-options-row--demi { flex-direction: column; align-items: stretch; gap: .6rem; }
.lpf-options-row--demi strong { flex: none; }
.lpf-creneau { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lpf-creneau-legend { font-size: .82rem; color: var(--lpf-text); font-weight: 600; }
.lpf-creneau-btns { display: inline-flex; gap: .4rem; }
.lpf-creneau-btn { padding: .35rem .85rem; border: 1.5px solid var(--lpf-line-strong); background: #fff; border-radius: 999px; font-size: .85rem; line-height: 1.2; color: var(--lpf-text); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.lpf-creneau-btn:hover { border-color: var(--lpf-teal); background: var(--lpf-teal-tint); }
.lpf-creneau-btn--active { border-color: var(--lpf-teal) !important; background: var(--lpf-teal) !important; color: #fff !important; font-weight: 600; }
.lpf-creneau-hint { font-size: .82rem; color: var(--lpf-muted); font-style: italic; }
.lpf-repas-choices { display: inline-flex; gap: 1.2rem; flex-wrap: wrap; }
.lpf-repas-choice { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.lpf-repas-choice input { accent-color: var(--lpf-teal); }
.lpf-selection-warning { font-size: .85rem; color: var(--lpf-full-fg); background: var(--lpf-full-bg); border-radius: var(--lpf-radius-sm); padding: .5rem .8rem; margin: .5rem 0; }

/* Bloc « Options repas » GLOBAL à toute la réservation (déjeuner / goûter / végé
   choisis une seule fois). Encadré pour signaler qu'il vaut pour l'ensemble. */
.lpf-meals-global { padding: 1rem 1.1rem; background: var(--lpf-teal-tint); border: 1.5px solid var(--lpf-line-strong); border-radius: var(--lpf-radius-sm); }
.lpf-meals-global h3 { margin-bottom: .35rem; }
.lpf-meals-global-hint { font-size: .82rem; color: var(--lpf-muted); margin: 0 0 .75rem; }
.lpf-meals-global .lpf-repas-choices { gap: 1.4rem; }
.lpf-meals-global .lpf-creneau-hint { display: block; margin-top: .6rem; }

/* Récapitulatif tarifaire temps réel */
.lpf-price-summary { margin: 1.25rem 0; padding: 1rem 1.2rem; background: #fff; border: 2px solid var(--lpf-teal); border-radius: var(--lpf-radius); box-shadow: 0 2px 10px var(--lpf-shadow); }
.lpf-price-lines { display: flex; flex-direction: column; gap: .35rem; }
.lpf-price-line { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--lpf-text); }
.lpf-price-line--discount { color: var(--lpf-ok-fg); font-weight: 600; }
.lpf-price-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--lpf-line); }
.lpf-price-total span { font-size: 1rem; font-weight: 700; color: var(--lpf-ink); }
.lpf-price-total strong { font-size: 1.5rem; color: var(--lpf-teal-dark); line-height: 1; }
.lpf-price-note { margin: .5rem 0 0; font-size: .75rem; color: var(--lpf-muted); font-style: italic; }

/* Badge remise fratrie sur une ligne de panier/commande */
.lpf-discount-badge { display: inline-block; background: var(--lpf-ok-bg); color: var(--lpf-ok-fg); font-size: .72rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; vertical-align: middle; margin-left: .3rem; }
.lpf-options { background: var(--lpf-teal-tint); border-radius: var(--lpf-radius-sm); padding: .75rem 1rem; margin-top: .5rem; }
.lpf-options strong { display: block; font-size: .85rem; margin-bottom: .4rem; color: var(--lpf-ink); }
.lpf-options label { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1rem; font-size: .9rem; cursor: pointer; }

/* ─── Boutons ─────────────────────────────────────────────────────────────── */
.lpf-step-actions { display: flex; gap: 1rem; margin-top: 1.75rem; }
.lpf-btn { padding: .7rem 1.5rem; border: none; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .95rem; font-weight: 600; transition: background .2s, box-shadow .2s, transform .1s; }
.lpf-btn:active { transform: translateY(1px); }
.lpf-btn--back { background: #eef2f2; color: var(--lpf-ink); }
.lpf-btn--back:hover { background: #e2e9e9; }
.lpf-btn--next, .lpf-btn--submit { background: var(--lpf-teal); color: #fff; margin-left: auto; box-shadow: 0 4px 12px var(--lpf-shadow); }
.lpf-btn--next:hover, .lpf-btn--submit:hover { background: var(--lpf-teal-dark); }
.lpf-btn--next:disabled, .lpf-btn--submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
/* Ajouter un enfant : action douce, style « tuile pointillée » sur le bleu LPF */
.lpf-btn--add-child { background: var(--lpf-teal-tint); color: var(--lpf-teal-dark); border: 1.5px dashed var(--lpf-teal); width: 100%; margin-top: .5rem; border-radius: var(--lpf-radius); }
.lpf-btn--add-child:hover { background: #e3f3f3; }
.lpf-btn--remove { background: transparent; color: var(--lpf-full-fg); font-size: .8rem; padding: .2rem .5rem; border-radius: var(--lpf-radius-sm); }

/* ─── Messages ────────────────────────────────────────────────────────────── */
.lpf-message { padding: .8rem 1rem; border-radius: var(--lpf-radius-sm); margin-top: 1rem; }
.lpf-message--success { background: var(--lpf-ok-bg); color: var(--lpf-ok-fg); }
.lpf-message--error   { background: var(--lpf-full-bg); color: var(--lpf-full-fg); }
.lpf-loading { text-align: center; color: var(--lpf-muted); padding: 1rem; }

/* Mention remise fratrie — encart doux jaune de la charte */
.lpf-discount-hint { font-size: .85rem; color: #7a6a1e; background: #fdf6d6; border: 1.5px solid var(--lpf-yellow); border-radius: var(--lpf-radius-sm); padding: .65rem .9rem; margin: .75rem 0 .5rem; }

/* ─── Extrascolaire (souhaits de garde) ──────────────────────────────────────
   Module mutualisé avec le tunnel vacances : ne restent ici que ses éléments
   spécifiques (bandeau de solde forfait, récapitulatif, historique). */
.lpf-empty { color: var(--lpf-muted); font-style: italic; padding: 1rem 0; }

/* Titre d'étape : h3 (sous le h2 « Souhaits de garde »), gardé lisible. */
.lpf-step > h3 { font-size: 1.2rem; margin: 0 0 1rem; color: var(--lpf-ink); }

/* Bandeau « solde forfait » (vert par défaut, orangé si bas, rouge si épuisé) */
.lpf-forfait-bande { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; border-radius: var(--lpf-radius-sm); margin-bottom: 1rem; font-size: .88rem; background: var(--lpf-ok-bg); color: var(--lpf-text); }
.lpf-forfait-bande strong { color: var(--lpf-ok-fg); }
.lpf-forfait-bande--warn  { background: #fff3e0; }
.lpf-forfait-bande--warn strong { color: #e65100; }
.lpf-forfait-bande--empty { background: var(--lpf-full-bg); }
.lpf-forfait-bande--empty strong { color: var(--lpf-full-fg); }
.lpf-forfait-bande-count { font-weight: 700; color: var(--lpf-ink); }

/* Récapitulatif de la demande */
.lpf-recap { background: #fff; border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius); padding: 1.2rem; margin-bottom: 1.25rem; }
.lpf-recap p { margin: 0 0 .6rem; font-size: .92rem; color: var(--lpf-text); }
.lpf-recap strong { color: var(--lpf-ink); }
.lpf-recap-jours { margin: 0; padding-left: 1.2rem; font-size: .88rem; column-count: 2; }

/* Historique des souhaits soumis */
.lpf-historique { margin-top: 3rem; border-top: 1px solid var(--lpf-line); padding-top: 1.5rem; }
.lpf-historique h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.lpf-souhait-card { border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius); padding: 1rem; margin-bottom: .75rem; background: #fff; }
.lpf-souhait-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.lpf-souhait-head strong { font-size: .95rem; color: var(--lpf-ink); }
.lpf-souhait-date { font-size: .82rem; color: var(--lpf-muted); margin: 0 0 .5rem; }
.lpf-souhait-jours { display: flex; flex-wrap: wrap; gap: 4px; }
.lpf-souhait-jour { font-size: .78rem; padding: .15rem .45rem; background: var(--lpf-teal-tint); border-radius: var(--lpf-radius-sm); color: var(--lpf-ink); }

/* Pastille de statut */
.lpf-tag { font-size: .78rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; white-space: nowrap; }
.lpf-tag--ok   { background: var(--lpf-ok-bg);   color: var(--lpf-ok-fg); }
.lpf-tag--warn { background: #fff3e0;            color: #e65100; }
.lpf-tag--err  { background: var(--lpf-full-bg); color: var(--lpf-full-fg); }

/* ─── Mon Compte — Mes enfants & Mes documents ───────────────────────────── */
.lpf-account { max-width: 760px; color: var(--lpf-text); }
.lpf-account h2 { font-size: 1.3rem; color: var(--lpf-ink); margin-bottom: .5rem; }
.lpf-account-intro { color: var(--lpf-text); font-size: .9rem; margin-bottom: 1.5rem; }
.lpf-empty { color: var(--lpf-muted); font-style: italic; margin-bottom: 1.5rem; }

/* Notifications */
/* pre-line : les messages viennent de la page d'options (textarea). Sans cela, les
   retours à la ligne saisis par l'équipe seraient aplatis en un seul paragraphe. */
.lpf-notice { padding: .75rem 1rem; border-radius: var(--lpf-radius-sm); margin-bottom: 1rem; font-size: .9rem; white-space: pre-line; }
.lpf-notice--success { background: var(--lpf-ok-bg); color: var(--lpf-ok-fg); }
.lpf-notice--error   { background: var(--lpf-full-bg); color: var(--lpf-full-fg); }
/* Information neutre — ni succès ni erreur : l'internaute n'a rien fait de mal,
   on lui explique une contrainte (ex. un seul centre par panier). */
.lpf-notice--info    { background: var(--lpf-teal-tint); color: var(--lpf-ink); border: 1px solid var(--lpf-line-strong); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.lpf-notice-link     { color: var(--lpf-teal-dark); font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* Fiche enfant (liste) */
.lpf-children-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.lpf-child-card { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; border: 1.5px solid var(--lpf-line); border-radius: var(--lpf-radius); background: #fff; }
.lpf-child-card--editing { border-color: var(--lpf-teal); flex-direction: column; align-items: stretch; }
.lpf-child-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lpf-teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; flex-shrink: 0; }
.lpf-child-info { flex: 1; }
.lpf-child-info strong { display: block; font-size: .95rem; color: var(--lpf-ink); }
.lpf-child-info span { font-size: .82rem; color: var(--lpf-muted); }
.lpf-child-actions { display: flex; gap: .5rem; flex-shrink: 0; }

/* Formulaire enfant (ajout / édition — même structure de champs) */
.lpf-child-edit-form .lpf-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.lpf-child-edit-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 600; color: var(--lpf-ink); }
.lpf-child-edit-form input,
.lpf-child-edit-form select { padding: .5rem .7rem; border: 1.5px solid var(--lpf-line-strong); border-radius: var(--lpf-radius-sm); font-size: .9rem; background: #fff; }
.lpf-child-edit-form input:focus,
.lpf-child-edit-form select:focus { outline: none; border-color: var(--lpf-teal); box-shadow: 0 0 0 3px var(--lpf-teal-tint); }
.lpf-field-full { grid-column: 1 / -1; }
.lpf-child-card--editing h3,
.lpf-add-child-section h3 { font-size: 1rem; margin-bottom: 1rem; }
.lpf-add-child-section { border-top: 1px solid var(--lpf-line); padding-top: 1.5rem; margin-top: .5rem; }

/* Boutons Mon Compte — reset du style WC/thème, aligné sur la charte */
.lpf-account .button,
.lpf-account button[type="submit"] {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1.1rem; border-radius: 999px; font-family: inherit; font-size: .85rem; font-weight: 600;
    cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
    border: 1.5px solid var(--lpf-line-strong); background: #fff; color: var(--lpf-ink);
    box-shadow: none; line-height: 1.4;
}
.lpf-account .button:hover { background: var(--lpf-teal-tint); border-color: var(--lpf-teal); color: var(--lpf-ink); }

/* Bouton primaire (Enregistrer, Ajouter) */
.lpf-account .button-primary,
.lpf-account button.button-primary {
    background: var(--lpf-teal); border-color: var(--lpf-teal); color: #fff;
}
.lpf-account .button-primary:hover { background: var(--lpf-teal-dark); border-color: var(--lpf-teal-dark); color: #fff; }

/* Boutons d'action icône seule (fiche enfant, ligne document).
   Classe dédiée plutôt que .button : le thème (Uncode) impose son propre style
   aux liens/boutons .button avec une spécificité comparable, ce qui donnait un
   "Modifier" en gros bouton plein et un "Supprimer" resté quasi nu — deux
   formes différentes pour deux actions équivalentes. */
.lpf-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; flex-shrink: 0;
    border-radius: 50%; border: 1.5px solid var(--lpf-line-strong); background: #fff;
    font-size: 1rem; line-height: 1; cursor: pointer;
    text-decoration: none; box-shadow: none;
    transition: background .15s, border-color .15s;
}
.lpf-icon-btn:hover { background: var(--lpf-teal-tint); border-color: var(--lpf-teal); }
/* !important : un style bouton générique (WooCommerce/Uncode) gagne sinon sur
   .lpf-icon-btn--delete pour l'élément <button> (même mécanisme déjà vu sur
   le padding du tableau de bord — voir styles.scss du thème enfant). */
.lpf-icon-btn--delete { border-color: #f3c9cd !important; color: var(--lpf-full-fg) !important; }
.lpf-icon-btn--delete:hover { background: var(--lpf-full-bg) !important; border-color: #e79aa0 !important; }

/* Table documents */
.lpf-documents-table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; font-size: .9rem; }
.lpf-documents-table th { text-align: left; padding: .55rem .75rem; background: var(--lpf-teal-tint); border-bottom: 2px solid var(--lpf-line); font-size: .78rem; letter-spacing: .02em; text-transform: uppercase; color: var(--lpf-text); }
.lpf-documents-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--lpf-line); vertical-align: middle; }
.lpf-documents-table a { color: var(--lpf-teal-dark); text-decoration: none; font-weight: 600; }
.lpf-documents-table a:hover { text-decoration: underline; }

/* Formulaire upload */
.lpf-upload-section { border-top: 1px solid var(--lpf-line); padding-top: 1.5rem; }
.lpf-upload-section h3 { font-size: 1rem; margin-bottom: 1rem; }
.lpf-upload-form .lpf-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1rem; }
.lpf-upload-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; font-weight: 600; color: var(--lpf-ink); }
.lpf-upload-form input[type="text"],
.lpf-upload-form select { padding: .5rem .7rem; border: 1.5px solid var(--lpf-line-strong); border-radius: var(--lpf-radius-sm); font-size: .9rem; background: #fff; }
.lpf-upload-form input[type="file"] { font-size: .85rem; }
.lpf-upload-form small { font-size: .78rem; color: var(--lpf-muted); }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════════════════════════════════════
   Le reste de la feuille est fluide et tient déjà sur un téléphone (calendrier
   compris). Ce bloc ne traite que ce qui casse réellement en dessous de 600px.
   Vaut pour les DEUX modules : les composants sont mutualisés (src/shared.js).
*/
@media (max-width: 600px) {

    /* Cartes enfant — sans ceci, `.lpf-saved-cards` étant un flex wrap, chaque
       carte se dimensionne sur la longueur du prénom : une colonne en escalier
       (156px pour « Zoé », 209px pour « Jeremy »). En pleine largeur, l'alignement
       est net et la cible tactile identique pour tous. */
    .lpf-saved-card { width: 100%; }

    /* Champs — sous 16px, iOS zoome automatiquement à la prise de focus et
       l'internaute doit repincer pour revenir. Le .95rem hérité = 15.2px. */
    .lpf-field input,
    .lpf-field select,
    .lpf-child-edit-form input,
    .lpf-child-edit-form select,
    .lpf-upload-form input[type="text"],
    .lpf-upload-form select { font-size: 16px; }

    /* Navigation — « ← Centre » / « Choisir les jours → » cassaient sur deux
       lignes (68px de haut) faute de place. Empilés, ils restent lisibles et
       pleinement cliquables. */
    .lpf-step-actions { flex-direction: column-reverse; gap: .6rem; }
    .lpf-step-actions .lpf-btn { width: 100%; margin-left: 0; }

    /* Cibles tactiles — 44px est le minimum recommandé (iOS/Android). */
    .lpf-cal-day { min-height: 44px; }
    .lpf-repas-choices label { min-height: 44px; align-items: center; }
}

/* ─── Murs d'accès (connexion, forfait) ─────────────────────────────────────
   Rendu par CarteAcces (src/shared.js) ET par lpf_render_souhaits_block()
   en PHP, là où React n'est pas chargé : les deux DOIVENT produire le même
   balisage, sans quoi seul l'un des deux serait stylé. */
.lpf-acces {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--lpf-radius-sm);
  margin-bottom: 1.25rem;
}
/* Souple : le tunnel reste utilisable dessous — ton informatif, pas d'alerte. */
.lpf-acces--souple { background: var(--lpf-teal-tint); border: 1px solid var(--lpf-line-strong); }
/* Dur : la carte REMPLACE le formulaire — on assume un cadre plus affirmé. */
.lpf-acces--dur    { background: var(--lpf-teal-tint); border: 2px solid var(--lpf-teal-dark); }

.lpf-acces-corps  { flex: 1 1 20rem; }
.lpf-acces-titre  { margin: 0 0 .25rem; font-weight: 700; color: var(--lpf-ink); }
.lpf-acces-texte  { margin: 0; font-size: .9rem; color: var(--lpf-ink); }

.lpf-acces-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lpf-acces-btn {
  display: inline-block; padding: .55rem 1.1rem;
  border-radius: var(--lpf-radius-sm);
  border: 1px solid var(--lpf-teal-dark);
  color: var(--lpf-teal-dark); background: #fff;
  font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap;
}
.lpf-acces-btn--primaire { background: var(--lpf-teal-dark); color: #fff; }
.lpf-acces-btn:hover     { opacity: .85; }