/* FaunaFlow — suite visuelle 06.02
   Bleu, crème et rose pêche pour les bandeaux ; le pied de page reste vert. */
:root {
  --blue: #3e557e;
  --green: var(--blue);
  --rose-dark: #994b56;
  --muted: #5f6762;
  --booking-green: var(--blue) !important;
  --sage: var(--blue) !important;
}

/* Bandeaux qui remplaçaient l’ancien vert */
.first-cta,
.dark-section,
.home-quote,
.home-page .home-quote,
.legal-page > header,
.contact-card,
.account-shell > aside,
.cookie-banner {
  color: var(--cream);
  background: var(--blue);
}

.admin-login {
  background: linear-gradient(135deg, var(--blue), #385984);
}

.admin-shell > aside {
  color: var(--cream);
  background: var(--blue);
}

/* Lecture des textes sur fond bleu */
.first-cta h2,
.dark-section h2,
.home-quote h2,
.legal-page > header h1,
.first-cta > p:not(.eyebrow),
.dark-section > div > p:not(.eyebrow),
.home-quote > div > p:not(.eyebrow),
.first-cta .trust-line,
.contact-card p,
.contact-card small {
  color: var(--cream);
}

.first-cta .eyebrow,
.dark-section .eyebrow,
.home-quote .eyebrow,
.legal-page > header .eyebrow,
.dark-section strong,
.home-quote strong {
  color: #f7d8d0;
}

/* Actions lisibles et cohérentes avec la nouvelle palette */
.button-primary,
.nav-cta {
  color: var(--cream);
}

.first-cta .button-primary {
  color: var(--rose-dark);
  background: var(--cream);
}

.first-cta .button-secondary {
  color: var(--cream);
  border-color: var(--cream);
}

.cookie-banner button.button-primary {
  color: var(--rose-dark);
  background: var(--cream);
}

.home-page .first-cta .final-pet-label {
  color: #f7d8d0;
}

.contact-card hr {
  border-top-color: var(--rose);
}

/* Interfaces réservation et administration : aucune réintroduction de vert. */
.admin-reservations-notice,
.distance-status.verified,
.editor-notice,
.editor-button-quiet {
  color: #31486f !important;
  border-color: #9cabc3 !important;
  background: #eef2f8 !important;
}

.admin-action-accept,
.admin-save-change,
.editor-button-primary {
  color: var(--cream) !important;
  background: var(--blue) !important;
}

.admin-slot-grid input {
  accent-color: var(--blue) !important;
}

.booking-head,
.quote-total {
  background: var(--blue) !important;
}

.booking-message.success,
.distance-status.verified,
.preferred-slots-count {
  color: #31486f !important;
  border-color: #9cabc3 !important;
  background: #eef2f8 !important;
}

.availability-legend .free {
  background: var(--blue) !important;
}

.calendar-grid button.outside,
.calendar-grid button.busy,
.calendar-grid button:disabled {
  color: #68645f !important;
}

/* La photo de présentation garde désormais son cadrage complet. */
.portrait-frame img {
  aspect-ratio: auto;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: center;
}

/* Protection explicite du pied de page demandé en vert */
.full-footer {
  color: #dfe7e2;
  background: #183d36;
}

/* Les anciennes bordures vertes compilées deviennent bleu ardoise.
   Le pied de page reste le seul emplacement vert du site. */
.service-card,
.service-card div,
.service-detail,
.price-sheet > div,
.rate-strip article,
.supplement-grid > div,
.tag-cloud span,
.value-grid article,
.zone-list details,
.review-call-to-action,
.rating-field,
.button-secondary,
.booking-head,
.booking-story,
.booking-lines article,
.booking-panel fieldset,
.booking-modal-close,
.calendar-card,
.calendar-card > header button,
.calendar-switch button,
.success-card,
.summary-card > div,
input,
select,
textarea {
  border-color: rgba(62, 85, 126, 0.2) !important;
}

.service-card div,
.service-detail,
.price-sheet > div,
.supplement-grid > div,
.zone-list details,
.booking-head,
.booking-panel hr,
.price-details .total {
  border-top-color: rgba(62, 85, 126, 0.2) !important;
  border-bottom-color: rgba(62, 85, 126, 0.2) !important;
}

.quote-zone > summary > span {
  color: #7d3845 !important;
}

/* La page Boutique n'avait aucune gouttière dans son gabarit.
   Une marge fluide évite toute rupture au changement de largeur. */
.public-reference-page:has(a.button[href="/contact"]) {
  width: 100%;
  padding-right: clamp(22px, 6vw, 88px);
  padding-left: clamp(22px, 6vw, 88px);
}

/* Keep the admin shortcut out of the public footer without mutating React DOM. */
.full-footer a[href="/connexion/?role=admin"] { display: none; }

/* Palette globale automatique — mode sombre uniquement. Les images restent
   naturelles : cette couche ne pose aucun filtre sur les photos ou les logos. */
html { color-scheme: light dark; }
:root {
  --bg: #f5f0e6;
  --surface: #fffdf8;
  --surface-soft: #f8f2e8;
  --text: #263e60;
  --text-muted: #626b73;
  --border: rgba(62, 85, 126, .22);
  --accent: #d39a45;
  --accent-soft: #f4dfb5;
  --navy: #263957;
  --danger: #a7443a;
  --success: #2f6858;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #172337;
    --surface: #202d42;
    --surface-soft: #283952;
    --text: #f5f0e7;
    --text-muted: #d3c9b9;
    --border: #45536a;
    --accent: #ffbd4a;
    --accent-soft: #725b35;
    --navy: #263957;
    --danger: #f09a8d;
    --success: #9fd3b4;
  }

  html { color-scheme: dark !important; background: var(--bg) !important; }
  body,
  body:not(.booking-page) {
    color: var(--text) !important;
    background: var(--bg) !important;
    background-image: none !important;
  }
  body a { color: inherit; }
  body p, body li, body label, body legend, body dt, body dd,
  body small, body .muted, body .booking-muted { color: var(--text-muted); }
  body h1, body h2, body h3, body h4, body strong, body b { color: var(--text); }

  .site-header,
  .portal-topbar,
  .editor-bar {
    color: var(--text) !important;
    background: #1d2a40 !important;
    border-bottom-color: var(--border) !important;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .22) !important;
  }
  .site-header nav a,
  .site-header .brand,
  .portal-brand,
  .portal-topbar a,
  .editor-brand { color: var(--text) !important; }
  .site-header nav,
  .site-header nav.open { background: #1d2a40 !important; }
  .site-header .menu-button,
  .site-header .site-account-control,
  .portal-topbar .button-secondary,
  .icon-button,
  .editor-icon,
  .editor-button-save {
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  .site-header .site-account-label { color: var(--text) !important; }
  .site-header .menu-button { background-image: linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)), linear-gradient(var(--text), var(--text)) !important; }

  .full-footer,
  .site-footer,
  .portal-sidebar,
  .admin-shell > aside { color: #fff4db !important; background: #16243a !important; }
  .full-footer a, .site-footer a, .portal-sidebar a, .portal-sidebar button,
  .admin-shell > aside a, .admin-shell > aside button { color: #fff4db !important; }

  .public-reference-page,
  .public-reference-page > section:not(.dark-section),
  .home-page,
  .home-page .hero,
  .home-page .services-preview,
  .legal-page,
  .contact-page,
  .auth-page,
  .client-reference-page,
  .client-reference-page .portal-main,
  .booking-page .reservation-page {
    color: var(--text) !important;
    background: var(--bg) !important;
    background-image: none !important;
  }
  .home-page .hero h1,
  .home-page .services-preview h2,
  .home-page .section-heading h2,
  .home-page .service-card h3,
  .home-page .zone-preview h2,
  .home-page .gallery-preview h2 { color: var(--text) !important; }
  .home-page .hero h1 em { color: #e88c61 !important; }
  .home-page .hero-lead,
  .home-page .section-heading > p,
  .home-page .service-card p,
  .home-page .story-visual figcaption,
  .home-page .zone-preview p,
  .home-page .gallery-preview p { color: var(--text-muted) !important; }
  .auth-page h1,
  .auth-page h2,
  .auth-page h3,
  .auth-page label,
  .auth-page .field-label { color: var(--text) !important; }
  .auth-page label,
  .auth-page .field-label { color: var(--text-muted) !important; }
  .dark-section,
  .first-cta,
  .home-quote,
  .contact-card,
  .legal-page > header,
  .booking-head,
  .booking-page .quote-total { color: #fff4db !important; background: #263957 !important; }
  .dark-section *, .first-cta *, .home-quote *, .contact-card *,
  .legal-page > header *, .booking-head *, .booking-page .quote-total * { color: #fff4db !important; }

  .service-card, .service-detail, .price-sheet > div, .rate-strip article,
  .supplement-grid > div, .tag-cloud span, .value-grid article, .zone-list details,
  .review-call-to-action, .booking-story, .booking-panel, .booking-head + *,
  .summary-card > div, .success-card, .summary-card, .panel, .data-card,
  .reservation-card, .list-table, .calendar-card, .calendar-card > header button,
  .booking-card, .booking-line, .booking-panel fieldset, .animal-selection,
  .animal-slot, .animal-details-card, .registered-animal-option,
  .preferred-slots, .preferred-slot-option, .service-specific-details,
  .service-detail-fieldset, .service-care-card, .quote-details, .quote-distance div,
  .quote-deposit, .quote-preferences, .info-callout, .price-details,
  .auth-card, .editor-modal, .admin-reservations-shell, .admin-reservation-card,
  .reviews-shell, .review-card, .review-confirm-dialog, .admin-suite-shell,
  .client-detail, .client-card, .client-item, .stats-card, .stats-panel {
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
  }
  .service-card *, .service-detail *, .price-sheet > div *, .panel *, .data-card *,
  .reservation-card *, .list-table *, .auth-card *, .admin-reservation-card *,
  .reviews-shell *, .admin-suite-shell *, .client-detail *, .stats-card *, .stats-panel * {
    border-color: var(--border);
  }

  input, select, textarea,
  .field input, .field select, .field textarea,
  .toolbar input, .toolbar select, .inline-input,
  .booking-page input, .booking-page select, .booking-page textarea,
  .admin-editor-grid input, .admin-editor-grid select,
  .admin-reservation-editor textarea, .admin-refusal-panel textarea,
  .admin-suite-toolbar input, .editor-modal textarea {
    color: var(--text) !important;
    caret-color: var(--accent) !important;
    background: #1c2a40 !important;
    border-color: var(--border) !important;
  }
  input::placeholder, textarea::placeholder { color: #bfb5a8 !important; opacity: 1; }
  option { color: var(--text); background: #1c2a40; }
  input:focus, select:focus, textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(255, 189, 74, .22) !important; }
  button, .button, .editor-button, .admin-reservation-actions button,
  .admin-reservation-form-actions button { border-color: var(--border); }
  .button-primary, .button-danger, .tabs button.active, .admin-action-accept,
  .admin-save-change, .admin-suite-nav-button.is-current { color: #172337 !important; background: var(--accent) !important; border-color: var(--accent) !important; }
  .button-secondary, .button-quiet, .calendar-switch button,
  .calendar-card > header button, .booking-page .button-secondary,
  .admin-action-modify, .admin-action-cancel, .editor-button-quiet { color: var(--text) !important; background: var(--surface-soft) !important; border-color: var(--border) !important; }
  .admin-action-refuse, .button-danger { color: #fff4db !important; background: #8c3f49 !important; }
  .notice, .booking-message.success, .distance-status.verified,
  .admin-reservations-notice, .admin-recalculation { color: #d7f0df !important; background: #27483f !important; border-color: #4d806d !important; }
  .notice.error, .booking-message.error, .distance-status.error,
  .admin-reservations-notice.error, .notice.warning { color: #ffd8d1 !important; background: #512e36 !important; border-color: #9e5b64 !important; }
  .status, .review-status { color: var(--text) !important; background: #33445b !important; }
  .status.pending, .status.manual_review, .review-status-en_attente { color: #ffdf92 !important; background: #554425 !important; }
  .status.accepted, .review-status-publie { color: #c3f0d0 !important; background: #285044 !important; }
  .status.refused, .status.cancelled, .review-status-masque { color: #ffd0ca !important; background: #512e36 !important; }
  .status.in_progress { color: #c7defe !important; background: #294664 !important; }
  .status.completed { color: #e1e1e1 !important; background: #454b55 !important; }

  .portal-sidebar { background: #16243a !important; }
  .portal-nav button:hover, .portal-nav a:hover, .portal-nav .active { background: rgba(255, 189, 74, .18) !important; }
  .admin-reservations-backdrop, .reviews-backdrop, .review-confirm-backdrop,
  .admin-suite-backdrop, .editor-modal-backdrop { background: rgba(5, 12, 24, .76) !important; }
  .admin-previsit, .admin-line, .admin-recalculation, .client-info-box,
  .stats-page-track { background: var(--surface-soft) !important; }
  .editor-intro { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }
  .editor-intro p { color: var(--text-muted) !important; }
  .admin-previsit h3, .admin-previsit-free, .text-link, .client-contact a,
  .stats-business-row strong, .stats-page-row strong { color: #ffc86a !important; }
  .calendar-grid button, .registered-animal-option, .preferred-slot-option,
  .quote-table td, .quote-table th { color: var(--text) !important; background: var(--surface) !important; }
  .calendar-grid button.outside, .calendar-grid button.busy,
  .calendar-grid button:disabled { color: #8f98a5 !important; background: #2b3443 !important; }
  .calendar-grid button.in-range, .preferred-slot-option.selected { color: var(--text) !important; background: #594557 !important; border-color: #d9869b !important; }
  .calendar-grid button.selected { color: #172337 !important; background: var(--accent) !important; border-color: var(--accent) !important; }
  .booking-actions { background: rgba(23, 35, 55, .96) !important; box-shadow: 0 -8px 18px rgba(0, 0, 0, .28) !important; }
  /* Revue visuelle sombre : surfaces publiques et sections secondaires. */
  .home-page .zone-preview,
  .home-page .gallery-preview,
  .home-page .confidence,
  .public-reference-page .page-hero,
  .public-reference-page .content-section,
  .public-reference-page .zone-intro,
  .public-reference-page .zone-list,
  .public-reference-page .gallery-section,
  .public-reference-page .reviews-section,
  .public-reference-page .quote-zone {
    color: var(--text) !important;
    background: var(--surface) !important;
    background-image: none !important;
  }
  .home-page .zone-preview,
  .public-reference-page .zone-intro,
  .public-reference-page .quote-zone { background: #263957 !important; }
  .home-page .gallery-preview,
  .public-reference-page .gallery-section,
  .public-reference-page .reviews-section { background: #1d2a40 !important; }
  .home-page .zone-preview h2,
  .home-page .gallery-preview h2,
  .home-page .zone-preview p,
  .home-page .gallery-preview p,
  .public-reference-page .page-hero h1,
  .public-reference-page .page-hero p,
  .public-reference-page .content-section h1,
  .public-reference-page .content-section h2,
  .public-reference-page .content-section h3,
  .public-reference-page .content-section p,
  .public-reference-page .content-section li,
  .public-reference-page .content-section dt,
  .public-reference-page .content-section dd,
  .public-reference-page .quote-zone * { color: var(--text) !important; }
  .home-page .zone-preview p,
  .home-page .gallery-preview p,
  .public-reference-page .page-hero p,
  .public-reference-page .content-section p,
  .public-reference-page .content-section li,
  .public-reference-page .content-section dd { color: var(--text-muted) !important; }
  .home-page .paper-note p,
  .home-page .story-visual figcaption,
  .public-reference-page .story-visual figcaption { color: #445875 !important; }
  .home-page .trust-line { color: #d8cdbb !important; }
  .home-page .trust-line i { background: #e6a8b2 !important; }
  .public-reference-page .eyebrow,
  .home-page .zone-preview .eyebrow,
  .home-page .gallery-preview .eyebrow { color: #f0b574 !important; }
  .public-reference-page .empty-reviews,
  .public-reference-page .review-call-to-action,
  .public-reference-page .review-card,
  .public-reference-page .masonry-gallery,
  .public-reference-page .zone-list details,
  .public-reference-page .tag-cloud span,
  .public-reference-page .calculation-note {
    color: var(--text) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16) !important;
  }
  .public-reference-page .empty-reviews *,
  .public-reference-page .review-call-to-action *,
  .public-reference-page .review-card *,
  .public-reference-page .calculation-note * { color: inherit !important; }
  .public-reference-page .empty-reviews svg { color: #d8899c !important; }
  .public-reference-page .review-call-to-action .button,
  .public-reference-page .button.pink-button { color: #172337 !important; background: #d8899c !important; border-color: #d8899c !important; }  /* Prestations : le texte de l’encart reste clair sur sa surface bleu nuit. */
  .public-reference-page .split-feature.soft-pink > div > p:not(.eyebrow) {
    color: #d8ccb9 !important;
  }

  /* Le bouton rose conserve une teinte pastel lisible dans le bandeau sombre. */
  .public-reference-page .dark-section .button.pink-button,
  .public-reference-page .dark-section .button.pink-button:hover,
  .public-reference-page .dark-section .button.pink-button:focus-visible,
  .public-reference-page .dark-section .button.pink-button:active {
    color: #172337 !important;
    background: #e6a8b2 !important;
    border-color: #e6a8b2 !important;
  }

  /* Prestations : descriptions lisibles et tarifs moins agressifs. */
  .public-reference-page .service-detail,
  .public-reference-page .service-detail p,
  .public-reference-page .service-detail li,
  .public-reference-page .service-detail .check-list,
  .public-reference-page .service-detail .large-copy,
  .public-reference-page .supplement-note { color: var(--text-muted) !important; }
  .public-reference-page .service-detail h2,
  .public-reference-page .service-detail h3,
  .public-reference-page .service-detail strong { color: var(--text) !important; }
  .public-reference-page .price-sheet,
  .public-reference-page .price-sheet > div,
  .public-reference-page .price-sheet table,
  .public-reference-page .supplement-grid > div,
  .public-reference-page .service-index,
  .public-reference-page .split-feature.soft-pink {
    color: var(--text) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
  }
  .public-reference-page .price-sheet td,
  .public-reference-page .price-sheet th,
  .public-reference-page .price-sheet span,
  .public-reference-page .price-sheet small { color: var(--text-muted) !important; }
  .public-reference-page .price-sheet strong,
  .public-reference-page .price-sheet .price,
  .public-reference-page .price-sheet .amount { color: #ffd17a !important; }

  /* Espace client : cartes en niveaux de bleu/rose poudré. */
  .client-reference-page .portal-main .panel,
  .client-reference-page .portal-main .data-card,
  .client-reference-page .portal-main .reservation-card,
  .client-reference-page .portal-main .list-table,
  .client-reference-page .portal-main .dialog,
  .client-reference-page .portal-main .empty {
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--border) !important;
  }
  .client-reference-page .portal-main .data-card p,
  .client-reference-page .portal-main .data-card small,
  .client-reference-page .portal-main .panel .muted,
  .client-reference-page .portal-main .list-row small { color: var(--text-muted) !important; }
  .client-reference-page .portal-main .summary-card { color: #fff8eb !important; background: #3e5b82 !important; }
  .client-reference-page .portal-main .summary-card:nth-child(2) { background: #674650 !important; }
  .client-reference-page .portal-main .summary-card:nth-child(3) { background: #405875 !important; }
  .client-reference-page .portal-main .summary-card:nth-child(4) { background: #454b55 !important; }
  .client-reference-page .portal-main .summary-card * { color: #fff8eb !important; }

  /* Réservation : aucune carte blanche ne doit subsister en sombre. */
  body.booking-page,
  .booking-page .reservation-page,
  .booking-page .booking-shell,
  .booking-page .booking-body,
  .booking-page .booking-panel,
  .booking-page .booking-story,
  .booking-page .booking-success {
    color: var(--text) !important;
    background: var(--surface) !important;
    background-image: none !important;
  }
  .booking-page .booking-story { background: #263957 !important; }
  .booking-page .booking-step h1,
  .booking-page .booking-step h2,
  .booking-page .booking-step h3,
  .booking-page .booking-step p,
  .booking-page .booking-step label,
  .booking-page .booking-step legend,
  .booking-page .booking-story p { color: var(--text) !important; }
  .booking-page .booking-step .large-copy,
  .booking-page .booking-step label small,
  .booking-page .booking-muted,
  .booking-page .availability-legend,
  .booking-page .calendar-card > p,
  .booking-page .address-fieldset > p,
  .booking-page .booking-service-note,
  .booking-page .quote-note { color: var(--text-muted) !important; }
  .booking-page .service-detail-check,
  .booking-page .service-detail-fieldset,
  .booking-page .service-care-card,
  .booking-page .service-checklist,
  .booking-page .animal-selection,
  .booking-page .animal-slot,
  .booking-page .preferred-slot-option,
  .booking-page .registered-animal-option,
  .booking-page .quote-summary,
  .booking-page .quote-details,
  .booking-page .quote-deposit,
  .booking-page .quote-preferences,
  .booking-page .info-callout,
  .booking-page .calendar-card,
  .booking-page .address-fieldset,
  .booking-page .booking-step fieldset {
    color: var(--text) !important;
    background: var(--surface-soft) !important;
    border-color: var(--border) !important;
  }
  .booking-page .service-detail-check:hover,
  .booking-page .service-detail-check:has(input:checked),
  .booking-page .preferred-slot-option.selected,
  .booking-page .registered-animal-option.selected,
  .booking-page .animal-slot.selected { background: #3b4f6c !important; border-color: var(--accent) !important; }
  .booking-page .service-detail-check *,
  .booking-page .service-detail-fieldset *,
  .booking-page .service-care-card *,
  .booking-page .service-checklist * { color: inherit !important; }
  .booking-page .calendar-grid button,
  .booking-page .calendar-card > header button { color: var(--text) !important; background: #25364e !important; border-color: var(--border) !important; }
  .booking-page .calendar-grid button.in-range { background: #4b405c !important; border-color: #d8899c !important; }
  .booking-page .calendar-grid button.selected { color: #172337 !important; background: var(--accent) !important; }
  .booking-page .booking-message { color: #ffe4a8 !important; background: #4c3542 !important; border-color: #a86b79 !important; }
  .booking-page .booking-message.success { color: #d7f0df !important; background: #27483f !important; border-color: #4d806d !important; }

  /* Header et actions : garder les éléments graphiques sans rectangle ajouté. */
  .site-header .site-account-control { background: transparent !important; border-color: transparent !important; }
  .button-primary,
  .button.button-primary,
  .booking-page .button-primary { color: #172337 !important; background: var(--accent) !important; border-color: var(--accent) !important; }
  .button-primary:hover,
  .button.button-primary:hover { background: #ffd275 !important; border-color: #ffd275 !important; }
  .button-secondary:hover,
  .button-quiet:hover,
  .booking-page .button-secondary:hover { color: var(--text) !important; background: #344863 !important; border-color: #657894 !important; }
  button:focus-visible,
  a:focus-visible,
  input:focus,
  select:focus,
  textarea:focus { outline-color: var(--accent) !important; }

  /* Empêcher les bandes claires des conteneurs et des actions collantes. */
  .booking-page .booking-actions { background: rgba(23, 35, 55, .97) !important; }
  .booking-page .booking-modal,
  .booking-page .modal,
  .booking-page [role="dialog"] { color: var(--text) !important; background: var(--surface) !important; border-color: var(--border) !important; }

  /* Les libellés posés sur les visuels clairs restent sombres et lisibles. */
  .home-page .quote-art-label,
  .home-page .art-link-label,
  .home-page .hero-cat-label,
  .home-page .services-details-label,
  body:has(.home-page) .account-art-label { color: #3c3834 !important; }

  /* Isoler les illustrations claires des textes et fonds bleu nuit. */
  .booking-page .booking-story img,
  .booking-page .booking-story picture { background: #f8f2e8 !important; border-radius: 14px; padding: 12px; }
  .booking-page #calendar-title,
  .booking-page .calendar-card > header strong { color: var(--text) !important; }
  .booking-page #booking-message:not(.error):not(.success),
  .booking-page .distance-status.loading { color: var(--text-muted) !important; background: #33435b !important; border-color: var(--border) !important; }

  /* Garantir que les sections publiques ne forcent pas de débordement horizontal. */
  .public-reference-page .page-hero,
  .public-reference-page .content-section,
  .home-page .home-quote,
  .home-page .zone-preview,
  .home-page .gallery-preview { min-width: 0 !important; overflow-x: hidden !important; }

  /* Responsive sombre : supprimer les largeurs héritées qui débordent sur 375–390 px. */
  @media (max-width: 620px) {
    html, body { width: 100% !important; min-width: 0 !important; overflow-x: hidden !important; }
    .site-header { width: 100% !important; min-width: 0 !important; gap: 8px !important; padding-inline: 12px !important; overflow: hidden !important; }
    .site-header .brand { min-width: 0 !important; flex: 1 1 auto !important; gap: 8px !important; }
    .site-header .brand span { min-width: 0 !important; }
    .site-header .brand strong { font-size: 15px !important; }
    .site-header .site-account-control { flex: 0 0 64px !important; width: 64px !important; max-width: 64px !important; min-width: 0 !important; }
    .site-header .site-account-control::before { color: #fff4db !important; }
    .site-header nav { display: none !important; }
    .site-header nav.open { display: flex !important; }
    .site-header nav:not(.open) a { display: none !important; }
    .home-page, .home-page .hero, .home-page .hero-copy, .home-page .hero-visual { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
    .home-page .hero { padding-inline: 18px !important; }
    .home-page .hero h1 { max-width: 100% !important; font-size: clamp(34px, 10vw, 42px) !important; line-height: 1.04 !important; overflow-wrap: anywhere !important; white-space: normal !important; }
    .home-page .hero-lead { max-width: 100% !important; overflow-wrap: anywhere !important; white-space: normal !important; }
    .home-page .hero .hero-cat-actions { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    .home-page .hero .hero-cat-button,
    .home-page .hero .hero-cat-art { max-width: 100% !important; }

    body.client-portal-route, body.client-portal-route > #main-content, .client-reference-page, .auth-page, .auth-card { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; margin-inline: 0 !important; }
    .auth-page { padding-inline: 12px !important; }
    .auth-card { padding-inline: 16px !important; overflow: hidden !important; }
    .auth-card > *, .auth-card h1, .auth-card p, .auth-card form { max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    .auth-switch { width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .auth-switch button { width: 100% !important; min-width: 0 !important; padding-inline: 8px !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    .auth-card form, .auth-card .field, .auth-card input, .auth-card select, .auth-card textarea { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }

    body.booking-page, body.booking-page > #main-content, .reservation-runtime, .reservation-page, .booking-shell, .booking-head, .booking-body, .booking-panel, .booking-step { width: 100vw !important; min-width: 0 !important; max-width: 100vw !important; }
    .booking-head { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; padding: 12px 14px !important; }
    .booking-heading { min-width: 0 !important; grid-template-columns: auto minmax(0, 1fr) !important; gap: 10px !important; }
    .booking-heading p { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere !important; }
    .progress-track { width: 100% !important; min-width: 0 !important; }
    .estimate-box { width: 100% !important; min-width: 0 !important; grid-template-columns: minmax(0, 1fr) !important; text-align: left !important; overflow-wrap: anywhere !important; }
    .estimate-box strong { min-width: 0 !important; overflow-wrap: anywhere !important; }
    .booking-panel { padding-inline: 16px !important; }
    .booking-step h1, .booking-step h2, .booking-step h3, .booking-step p { max-width: 100% !important; overflow-wrap: anywhere !important; white-space: normal !important; }
    .booking-step h1 { font-size: clamp(1.65rem, 8.4vw, 2.3rem) !important; line-height: 1.08 !important; word-break: break-word !important; }
    .booking-step .large-copy { font-size: 1.05rem !important; }
    .booking-page .form-grid, .booking-page .booking-date-grid, .booking-page .address-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .booking-page .form-grid > *, .booking-page .address-grid > *, .booking-page input, .booking-page select, .booking-page textarea { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }
    .booking-page .booking-actions { min-width: 0 !important; flex-wrap: wrap !important; gap: 10px !important; }
    .booking-page .booking-actions .button { min-width: 0 !important; max-width: 100% !important; }
    .booking-page #calendar-title,
    .booking-page .calendar-card > header h2,
    .booking-page .calendar-card > header h3,
    .booking-page .calendar-card > header strong { color: var(--text) !important; }
    .booking-page .calendar-card { padding-inline: 10px !important; }
    .home-page .hero-decor-gecko { opacity: .24 !important; transform: translate(-4px, 14px) scale(.82) !important; transform-origin: top left !important; }
  }

  img, picture, svg { filter: none !important; }
}

/* Inscription : aligner les deux contrôles de mot de passe sur une même ligne. */
.auth-page #register-form .field:has(> .password-control) {
  align-content: start !important;
}

.auth-page #register-form .field:has(> .password-control) > .password-control {
  height: 46px !important;
  min-height: 46px !important;
  align-self: start !important;
  box-sizing: border-box;
}

/* Le lien de demande conserve son ancien modèle si l’éditeur a aplati son contenu. */
.home-page .quote-art-button:not(:has(.art-link-media)) {
  color: transparent !important;
  font-size: 0 !important;
  background: url("/home-backgrounds/quote-cta-hamster.png?v=1") center / contain no-repeat !important;
}

.home-page .quote-art-button:not(:has(.art-link-media)) .quote-art-label {
  display: none !important;
}

.home-page .quote-art-button:not(:has(.art-link-media))::after {
  content: "Expliquer mon besoin";
  z-index: 1;
  color: #3c3834;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  width: 73%;
  font: 500 14px/1.15 Arial, Helvetica, sans-serif;
  position: absolute;
  top: 54%;
  left: 23%;
  transform: translateY(-50%);
}

/* Passe ciblée compte + CTA animaux : lisibilité et suppression des encarts. */
.home-page .hero .hero-cat-label,
.home-page .hero .hero-cat-label:hover,
.home-page .hero .hero-cat-button:focus-visible .hero-cat-label,
.home-page .first-cta .final-pet-label,
.home-page .first-cta .final-pet-button:hover .final-pet-label,
.home-page .first-cta .final-pet-button:focus-visible .final-pet-label {
  color: #263e60 !important;
  text-shadow: none !important;
}
.home-page .hero .hero-cat-button:hover .hero-cat-label { color: #1b2d49 !important; }

.client-reference-page .dashboard-card--action,
.client-reference-page .dashboard-card--stat {
  color: #263e60 !important;
}
.client-reference-page .dashboard-card--action h3,
.client-reference-page .dashboard-card--stat h3,
.client-reference-page .dashboard-card--stat p:not(.dashboard-value),
.client-reference-page .dashboard-card--action > div > p:not(.eyebrow) {
  color: #263e60 !important;
}
.client-reference-page .dashboard-card--action > div > p:not(.eyebrow),
.client-reference-page .dashboard-card--stat > div > p.muted {
  color: #5f6773 !important;
}
.client-reference-page .dashboard-card--action .eyebrow,
.client-reference-page .dashboard-card--stat .eyebrow { color: #994b56 !important; }

.client-reference-page .data-card footer {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.client-reference-page .data-card footer .button { margin: 0 !important; }
.client-reference-page .data-card footer .button-secondary { color: #fff8eb !important; background: #263e60 !important; border-color: #263e60 !important; }
.client-reference-page .data-card footer .button-danger { color: #fff8eb !important; background: #994b56 !important; border-color: #994b56 !important; }
.client-reference-page .data-card footer .button-secondary:hover,
.client-reference-page .data-card footer .button-secondary:focus-visible { color: #fff8eb !important; background: #34547f !important; }
.client-reference-page .data-card footer .button-danger:hover,
.client-reference-page .data-card footer .button-danger:focus-visible { color: #fff8eb !important; background: #b95d69 !important; }

@media (max-width: 620px) {
  .client-reference-page .data-card footer { flex-wrap: wrap !important; }
}

/* Réservation : corriger les textes hérités sur les surfaces claires persistantes. */
.booking-page .new-animals-section,
.booking-page .new-animals-section h3,
.booking-page .new-animals-section p,
.booking-page .new-animals-section .booking-muted,
.booking-page .supplement-grid label,
.booking-page .guided-time-picker,
.booking-page .guided-time-picker > p,
.booking-page .previsit-intro,
.booking-page .previsit-proposal {
  color: #263e60 !important;
}

.booking-page .new-animals-section p.booking-muted,
.booking-page .guided-time-picker > p,
.booking-page .previsit-intro,
.booking-page .previsit-proposal small {
  color: #5f6773 !important;
}

.booking-page .supplement-grid label,
.booking-page .guided-time-option,
.booking-page .previsit-proposal {
  color: #263e60 !important;
}

.booking-page .preferred-slots-count {
  color: #263e60 !important;
  -webkit-text-fill-color: #263e60 !important;
  background: #eef2f8 !important;
}
.booking-page .preferred-slots-count.incomplete {
  color: #7d3650 !important;
  -webkit-text-fill-color: #7d3650 !important;
  background: #fff0f3 !important;
}

/* Pré-visite : contraste explicite sur les cartes claires, en clair comme en sombre. */
.booking-page #previsit-proposals .previsit-intro,
.booking-page #previsit-proposals .previsit-proposal,
.booking-page #previsit-proposals .previsit-proposal strong,
.booking-page #previsit-proposals .previsit-proposal > span:last-child,
.booking-page #previsit-proposals .previsit-proposal:hover,
.booking-page #previsit-proposals .previsit-proposal:focus-visible,
.booking-page #previsit-proposals .previsit-proposal:disabled,
.booking-page #previsit-proposals .previsit-proposal.selected {
  color: #263e60 !important;
  -webkit-text-fill-color: #263e60 !important;
}

.booking-page #previsit-proposals .previsit-proposal small {
  color: #5f6773 !important;
  -webkit-text-fill-color: #5f6773 !important;
}

/* Administration : les surfaces de l'interface restent claires dans le
   rendu actuel ; leurs textes doivent donc rester bleu nuit en sombre. */
@media (prefers-color-scheme: dark) {
  .admin-dashboard {
    --admin-navy: #263e60;
    --admin-cream: #f5f0e6;
    --admin-paper: #fffdfa;
    --admin-line: #d4dbe5;
    --admin-muted: #5f6773;
    --admin-coral: #a94f5f;
    --admin-gold: #9b681b;
    color: #263e60 !important;
    background: #f5f0e6 !important;
  }

  .admin-dashboard h1,
  .admin-dashboard h2,
  .admin-dashboard h3,
  .admin-dashboard b,
  .admin-dashboard strong,
  .admin-dashboard .admin-metric,
  .admin-dashboard .admin-load-item,
  .admin-dashboard .admin-watch,
  .admin-dashboard .admin-shortcut {
    color: #263e60 !important;
  }

  .admin-dashboard p,
  .admin-dashboard span,
  .admin-dashboard small,
  .admin-dashboard time {
    color: #5f6773 !important;
  }

  .admin-dashboard .admin-dashboard-eyebrow,
  .admin-dashboard .admin-section-kicker {
    color: #a94f5f !important;
  }

  .admin-dashboard .admin-panel,
  .admin-dashboard .admin-metric,
  .admin-dashboard .admin-action-card,
  .admin-dashboard .admin-load-item,
  .admin-dashboard .admin-watch,
  .admin-dashboard .admin-shortcut,
  .admin-dashboard .admin-empty {
    border-color: #d4dbe5 !important;
    background: #fffdfa !important;
  }

  .admin-dashboard .admin-panel-link {
    color: #345a8c !important;
  }

  .admin-dashboard .admin-live-date {
    color: #263e60 !important;
    background: rgba(255, 253, 250, .9) !important;
    border-color: #d4dbe5 !important;
  }

  .admin-dashboard .admin-live-date i {
    background: #3d9a75 !important;
  }

  .admin-dashboard .admin-action-meta,
  .admin-dashboard .admin-timeline-main span,
  .admin-dashboard .admin-timeline-main small,
  .admin-dashboard .admin-load-main span,
  .admin-dashboard .admin-watch span,
  .admin-dashboard .admin-shortcut span,
  .admin-dashboard .admin-empty {
    color: #5f6773 !important;
  }

  .admin-dashboard .admin-empty strong {
    color: #263e60 !important;
  }

  .admin-dashboard .admin-timeline-time,
  .admin-dashboard .admin-load-date {
    color: #405a7d !important;
  }

  .admin-dashboard .admin-load-count,
  .admin-dashboard .admin-shortcut-icon {
    color: #365a88 !important;
    background: #eaf0f8 !important;
  }

  .admin-dashboard .admin-load-item:hover,
  .admin-dashboard .admin-watch:hover,
  .admin-dashboard .admin-shortcut:hover {
    background: #f3f7fc !important;
  }

  .admin-dashboard .admin-button {
    color: #263e60 !important;
    background: #fffdfa !important;
    border-color: #c8d1df !important;
  }

  .admin-dashboard .admin-button.primary {
    color: #fffaf3 !important;
    background: #3e557e !important;
    border-color: #3e557e !important;
  }

  .admin-dashboard .admin-button.danger {
    color: #8e3d45 !important;
    background: #fff7f6 !important;
    border-color: #dba19c !important;
  }

  .admin-dashboard .admin-status.pending,
  .admin-dashboard .admin-status.manual_review,
  .admin-dashboard .admin-status.awaiting_deposit {
    color: #875b18 !important;
    background: #fff0d9 !important;
  }

  .admin-dashboard .admin-status.accepted,
  .admin-dashboard .admin-status.confirmed {
    color: #266b58 !important;
    background: #dff1e9 !important;
  }

  .admin-dashboard .admin-status.cancel {
    color: #9d3e38 !important;
    background: #fbe3e0 !important;
  }

  /* Agenda et détail de journée : titres et libellés sur papier clair. */
  .agenda-shell,
  .agenda-day-shell {
    color: #263e60 !important;
    background: #fffdfa !important;
    border-color: #d4dbe5 !important;
  }

  .agenda-shell h1,
  .agenda-shell h2,
  .agenda-shell h3,
  .agenda-day-shell h1,
  .agenda-day-shell h2,
  .agenda-day-shell h3,
  .agenda-toolbar strong,
  .agenda-day,
  .agenda-week-day-header,
  .agenda-week-detail h2,
  .agenda-slot h3,
  .agenda-day b,
  .agenda-week-day-header b,
  .agenda-week-entry b,
  .agenda-slot-metrics b,
  .agenda-summary b,
  .agenda-reservations article b,
  .agenda-reservations article strong {
    color: #263e60 !important;
  }

  .agenda-shell p,
  .agenda-shell span,
  .agenda-shell small,
  .agenda-day-shell p,
  .agenda-day-shell span,
  .agenda-day-shell small,
  .agenda-legend,
  .agenda-weekdays,
  .agenda-slot p,
  .agenda-slot-metrics small,
  .agenda-summary small,
  .agenda-reservations article span,
  .agenda-week-free,
  .agenda-week-entry small {
    color: #5f6773 !important;
  }

  .agenda-shell .agenda-eyebrow,
  .agenda-day-shell .agenda-eyebrow {
    color: #a94f5f !important;
  }

  .agenda-day,
  .agenda-week-day,
  .agenda-week-detail,
  .agenda-slot,
  .agenda-summary span,
  .agenda-block-form,
  .agenda-manual-line,
  .agenda-new-animal,
  .agenda-slot-checks label,
  .agenda-client-results button {
    color: #263e60 !important;
    background: #fffdfa !important;
    border-color: #d4dbe5 !important;
  }

  .agenda-week-entry,
  .agenda-week-day-header {
    color: #263e60 !important;
    border-color: #d4dbe5 !important;
  }

  .agenda-week-entry.agenda-service--visit { background: #eef3fb !important; }
  .agenda-week-entry.agenda-service--walk { background: #edf7f1 !important; }
  .agenda-week-entry.agenda-service--boarding { background: #f4eef9 !important; }
  .agenda-week-entry.agenda-service--grooming { background: #fcf0e7 !important; }
  .agenda-week-entry.agenda-service--transport { background: #eaf5f6 !important; }
  .agenda-week-entry.agenda-restriction--block { color: #6e353b !important; background: #f9ecec !important; }
  .agenda-week-entry.agenda-restriction--partial { color: #514e49 !important; background: #f0efec !important; }

  .agenda-action,
  .agenda-reservation-actions button,
  .agenda-client-results button {
    color: #2b5d50 !important;
    background: #fffdfa !important;
    border-color: #aec3b8 !important;
  }

  .agenda-action.block { color: #8c3f49 !important; background: #f6e5e5 !important; }
  .agenda-action.unblock { color: #2b5d50 !important; background: #e8f3ed !important; }

  .agenda-manual-form > label,
  .agenda-manual-form section > label,
  .agenda-manual-line label,
  .agenda-new-animal label,
  .agenda-block-form label {
    color: #405a66 !important;
  }

  .agenda-summary span { background: #edf5f0 !important; }
  .agenda-message { color: #225247 !important; background: #e8f2ee !important; }
  .agenda-message.error { color: #8c353d !important; background: #fae6e7 !important; }
  .agenda-status { color: #425b53 !important; background: #eef1ee !important; }
  .agenda-status.pending,
  .agenda-status.manual_review { color: #875f21 !important; background: #f7e3c7 !important; }

  /* Clients, statistiques, avis et réservations : surfaces sombres,
     avec une hiérarchie de texte explicite dans chaque carte. */
  .admin-suite-shell,
  .reviews-shell,
  .review-confirm-dialog,
  .admin-reservations-shell {
    color: #f5f0e7 !important;
    background: #202d42 !important;
    border-color: #45536a !important;
  }

  .admin-suite-shell h1,
  .admin-suite-shell h2,
  .admin-suite-shell h3,
  .reviews-shell h1,
  .reviews-shell h2,
  .reviews-shell h3,
  .admin-reservations-shell h1,
  .admin-reservations-shell h2,
  .admin-reservations-shell h3,
  .review-confirm-dialog h1,
  .review-confirm-dialog h2,
  .review-confirm-dialog h3 {
    color: #f5f0e7 !important;
  }

  .admin-suite-shell p,
  .admin-suite-shell span,
  .admin-suite-shell small,
  .reviews-shell p,
  .reviews-shell span,
  .reviews-shell small,
  .admin-reservations-shell p,
  .admin-reservations-shell small,
  .review-confirm-dialog p {
    color: #c3cddd !important;
  }

  .admin-suite-shell .admin-suite-eyebrow,
  .admin-reservations-head p,
  .agenda-eyebrow {
    color: #e39aa1 !important;
  }

  .admin-suite-shell .client-card,
  .admin-suite-shell .client-detail,
  .admin-suite-shell .client-item,
  .admin-suite-shell .stats-card,
  .admin-suite-shell .stats-panel,
  .reviews-shell .review-card,
  .admin-reservations-shell .admin-reservation-card {
    color: #f5f0e7 !important;
    background: #283952 !important;
    border-color: #45536a !important;
  }

  .admin-suite-shell .client-card span,
  .admin-suite-shell .client-subtitle,
  .admin-suite-shell .client-info-box small,
  .admin-suite-shell .client-item span,
  .admin-suite-shell .stats-card small,
  .admin-suite-shell .stats-card span,
  .admin-suite-shell .stats-note,
  .reviews-shell .review-meta,
  .reviews-shell .review-card-head small,
  .admin-reservation-summary p,
  .admin-cancellation-history,
  .admin-previsit ul {
    color: #c3cddd !important;
  }

  .admin-suite-shell .client-info-box,
  .admin-suite-shell .stats-page-track,
  .admin-reservations-shell .admin-line,
  .admin-reservations-shell .admin-recalculation {
    color: #f5f0e7 !important;
    background: #283952 !important;
    border-color: #45536a !important;
  }

  .reviews-shell .review-text,
  .admin-reservations-shell label,
  .admin-reservations-shell .admin-reservation-editor h3,
  .admin-reservations-shell .admin-refusal-panel h3,
  .admin-reservations-shell .admin-slot-grid label {
    color: #f5f0e7 !important;
  }

  .reviews-shell .review-status { color: #e1e1e1 !important; background: #33445b !important; }
  .reviews-shell .review-status-en_attente { color: #ffdf92 !important; background: #554425 !important; }
  .reviews-shell .review-status-publie { color: #c3f0d0 !important; background: #285044 !important; }
  .reviews-shell .review-status-masque { color: #ffd0ca !important; background: #512e36 !important; }

  .admin-suite-shell .stats-card strong,
  .admin-suite-shell .stats-page-row strong,
  .admin-suite-shell .stats-business-row strong,
  .admin-previsit h3,
  .admin-previsit-free,
  .client-contact a {
    color: #ffc86a !important;
  }
}

/* Header public : utiliser le logo clair prévu pour les fonds sombres. */
@media (prefers-color-scheme: dark) {
  body > .site-header .brand img {
    content: url('/faunaflow-email-logo-dark.png');
  }
}

/* Mobile : le compte utilise les flex-items DOM réels, sans pseudo-texte. */
@media (max-width: 620px) {
  .site-header .menu-button[aria-expanded] {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    line-height: 0 !important;
    background-image: none !important;
  }

  .site-header .menu-button[aria-expanded] > span {
    display: block !important;
    flex: 0 0 3px !important;
    width: 24px !important;
    height: 3px !important;
    margin: 0 !important;
    background: currentColor !important;
  }

  .site-header .site-account-control[aria-label] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 clamp(104px, 34vw, 140px) !important;
    width: clamp(104px, 34vw, 140px) !important;
    min-width: clamp(104px, 34vw, 140px) !important;
    max-width: clamp(104px, 34vw, 140px) !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    gap: 6px !important;
    padding: 0 !important;
    line-height: 0 !important;
    position: static !important;
    transform: none !important;
    background-image: none !important;
    background-position: initial !important;
  }

  .site-header .site-account-control[aria-label]::before {
    content: none !important;
    display: none !important;
  }

  .site-header .site-account-control[aria-label] .site-account-frame {
    display: block !important;
    position: static !important;
    inset: auto !important;
    flex: 0 0 22px !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: contain !important;
  }

  .site-header .site-account-control[aria-label] .site-account-label {
    display: inline-flex !important;
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    align-items: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}/* Fiche réservation dans le tiroir admin : le parent réel est .admin-reservation-drawer. */
@media (prefers-color-scheme: dark) {
  .admin-reservation-drawer .admin-reservation-card .admin-reservation-summary h2 {
    color: #f5f0e7 !important;
  }

  .admin-reservation-drawer .admin-reservation-card .admin-reservation-summary p,
  .admin-reservation-drawer .admin-reservation-card .admin-previsit p,
  .admin-reservation-drawer .admin-reservation-card .admin-previsit li,
  .admin-reservation-drawer .admin-reservation-card .admin-cancellation-history,
  .admin-reservation-drawer .admin-reservation-card .admin-booking-details p,
  .admin-reservation-drawer .admin-reservation-card .admin-booking-details li {
    color: #d3c9b9 !important;
  }

  .admin-reservation-drawer .admin-reservation-card .admin-reservation-summary p strong,
  .admin-reservation-drawer .admin-reservation-card .admin-previsit p strong,
  .admin-reservation-drawer .admin-reservation-card .admin-previsit li strong,
  .admin-reservation-drawer .admin-reservation-card .admin-booking-details summary,
  .admin-reservation-drawer .admin-reservation-card .admin-booking-details li strong {
    color: #fff4db !important;
  }

  .admin-reservation-drawer .admin-reservation-card .admin-previsit h3,
  .admin-reservation-drawer .admin-reservation-card .admin-previsit-free {
    color: #ffc86a !important;
  }

  .admin-reservation-drawer .admin-reservation-card .admin-reservation-status {
    color: #ffdf92 !important;
    background: #554425 !important;
  }
}

/* Administration sombre : hiérarchie lisible des libellés de réservation et de pré-visite. */
@media (prefers-color-scheme: dark) {
  .admin-reservations-shell .admin-reservation-summary h2 {
    color: #f5f0e7 !important;
  }

  .admin-reservations-shell .admin-reservation-summary p,
  .admin-reservations-shell .admin-previsit p,
  .admin-reservations-shell .admin-previsit li,
  .admin-reservations-shell .admin-cancellation-history,
  .admin-reservations-shell .admin-booking-details p,
  .admin-reservations-shell .admin-booking-details li {
    color: #c3cddd !important;
  }

  .admin-reservations-shell .admin-reservation-summary p strong,
  .admin-reservations-shell .admin-previsit p strong,
  .admin-reservations-shell .admin-previsit li strong,
  .admin-reservations-shell .admin-booking-details summary,
  .admin-reservations-shell .admin-booking-details li strong {
    color: #fff4db !important;
  }

  .admin-reservations-shell .admin-previsit h3,
  .admin-reservations-shell .admin-previsit-free {
    color: #ffc86a !important;
  }

  .admin-reservations-shell .admin-reservation-status {
    color: #ffdf92 !important;
    background: #554425 !important;
  }
}
/* Portail client mobile : le bouton Compte utilise les éléments DOM réels. */
@media (max-width: 780px) {
  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 88px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 13px !important;
    font-size: 0 !important;
    line-height: 1 !important;
    position: static !important;
    transform: none !important;
  }

  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu::before,
  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu::after {
    content: none !important;
    display: none !important;
  }

  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu > .mobile-menu-icon,
  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu > .mobile-menu-label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    line-height: 1 !important;
  }

  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu > .mobile-menu-icon {
    font-size: 17px !important;
  }

  .client-reference-page > .portal-topbar:has(> .mobile-menu) .mobile-menu > .mobile-menu-label {
    font-size: 11px !important;
    font-weight: 800 !important;
  }
}

/* Compte mobile : conserver le cadre graphique complet avec le libellé à l’intérieur. */
@media (max-width: 620px) {
  .site-header .site-account-control[aria-label] {
    display: inline-block !important;
    align-items: initial !important;
    justify-content: initial !important;
    flex: 0 0 clamp(118px, 34vw, 140px) !important;
    width: clamp(118px, 34vw, 140px) !important;
    min-width: clamp(118px, 34vw, 140px) !important;
    max-width: clamp(118px, 34vw, 140px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 662 / 208 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    position: relative !important;
    transform: none !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .site-header .site-account-control[aria-label]::before {
    content: none !important;
    display: none !important;
  }

  .site-header .site-account-control[aria-label] .site-account-frame {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    flex: none !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
    object-fit: fill !important;
    object-position: center !important;
    pointer-events: none !important;
  }

  .site-header .site-account-control[aria-label] .site-account-label {
    display: flex !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    flex: none !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    color: #263e60 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 620px) and (prefers-color-scheme: dark) {
  .site-header .site-account-control[aria-label] .site-account-frame {
    filter: brightness(0) invert(1) opacity(0.84) !important;
  }

  .site-header .site-account-control[aria-label] .site-account-label {
    color: #fff4db !important;
  }
}
/* Mode sombre : tarifs lisibles sur un bleu cohérent. */
@media (prefers-color-scheme: dark) {
  .home-page .home-rates {
    color: #f5e7d3 !important;
    background: #263957 !important;
  }

  .home-page .home-rates > div:nth-child(2) .eyebrow {
    color: #efb574 !important;
  }

  .home-page .home-rates > div:nth-child(2) h2 {
    color: #f5e7d3 !important;
  }

  .home-page .home-rates .rate-strip article {
    color: #f5e7d3 !important;
    background: #202d42 !important;
    border-right-color: rgba(216, 204, 185, .18) !important;
  }

  .home-page .home-rates .rate-strip article span,
  .home-page .home-rates .rate-strip article small,
  .home-page .home-rates > .legal-note {
    color: #d8ccb9 !important;
  }

  .home-page .home-rates .rate-strip article strong {
    color: #e9cda8 !important;
  }

  .home-page .home-rates > .rates-companions {
    opacity: .10 !important;
  }

  .home-page .home-rates > .rates-companions img {
    mix-blend-mode: screen !important;
  }
}
/* Réseaux sociaux du pied de page : liens accessibles et cohérents avec les deux thèmes. */
.full-footer .footer-socials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.full-footer .footer-social-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 244, 219, .38) !important;
  border-radius: 999px;
  color: #fff4db !important;
  background: rgba(255, 244, 219, .08) !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.full-footer .footer-social-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: currentColor;
}

.full-footer .footer-social-link span {
  color: inherit !important;
  font-size: inherit !important;
}

.full-footer .footer-social-link:hover,
.full-footer .footer-social-link:focus-visible {
  color: #172337 !important;
  background: #ffc86a !important;
  border-color: #ffc86a !important;
}

@media (max-width: 620px) {
  .full-footer .footer-socials { gap: 8px; }
  .full-footer .footer-social-link { min-height: 34px; padding: 7px 10px; }
}

/* Suppression de compte : parcours explicite, réversible jusqu'à la dernière étape. */
.account-deletion-panel {
  margin-top: 24px;
  border-top: 4px solid var(--danger) !important;
}

.account-deletion-head h2,
.account-outcome h2 {
  margin: 0 0 8px;
  color: var(--text) !important;
}

.account-deletion-head p:not(.eyebrow),
.account-outcome p:not(.eyebrow) {
  color: var(--text-muted) !important;
}

.account-deletion-form fieldset {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.account-deletion-form legend {
  padding: 0 6px;
  color: var(--text) !important;
  font-weight: 700;
}

.account-deletion-details { margin-top: 6px; }
.account-deletion-details textarea { min-height: 92px; }
.account-deletion-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.account-deletion-error { margin: 12px 0 0; color: var(--danger) !important; font-weight: 700; }

.account-outcome {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px;
  text-align: center;
}

.account-outcome img {
  display: block;
  width: min(180px, 60vw);
  max-height: 220px;
  object-fit: contain;
}

.admin-account-content .account-outcome img { width: min(220px, 60vw); }
.admin-account-content .account-outcome h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.editor-button-danger { color: #fff8eb !important; background: #a7443a !important; border-color: #a7443a !important; }

@media (max-width: 620px) {
  .account-deletion-actions > * { flex: 1 1 100%; }
  .account-outcome { padding: 16px; }
}

/* Message final de suppression de compte : encart centré et lisible. */
.portal-shell > .account-outcome {
  grid-column: 1 / -1;
  width: min(720px, calc(100% - 48px));
  margin: clamp(24px, 5vw, 64px) auto;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 42px);
}

.portal-shell > .account-outcome h2,
.portal-shell > .account-outcome p {
  max-width: 560px;
}

.portal-shell > .account-outcome img {
  width: min(220px, 48vw);
  max-height: 240px;
}

@media (max-width: 620px) {
  .portal-shell > .account-outcome {
    width: calc(100% - 32px);
    margin: 24px auto 40px;
    padding: 24px 18px;
  }
  .portal-shell > .account-outcome img {
    width: min(190px, 62vw);
  }
}

/* Menu mobile : laisser le panneau déroulant dépasser sous l'en-tête. */
@media (max-width: 620px) {
  .site-header {
    overflow: visible !important;
  }
  .site-header nav {
    z-index: 100 !important;
  }
}

/* Connexion en mode sombre : champs mot de passe sans encart blanc. */
@media (prefers-color-scheme: dark) {
  .auth-page .password-control {
    color: #9ed8ff !important;
    background: #1c2a40 !important;
    border-color: var(--border) !important;
  }
  .auth-page .password-control input {
    color: var(--text) !important;
    background: transparent !important;
  }
  .auth-page .password-toggle {
    color: #9ed8ff !important;
    background: transparent !important;
    border-color: transparent !important;
  }
  .auth-page .password-toggle:hover {
    background: rgba(158, 216, 255, .14) !important;
  }
  .auth-page .password-toggle:focus-visible {
    outline-color: rgba(158, 216, 255, .78) !important;
  }
  .auth-page .password-control:focus-within {
    border-color: #8bcfff !important;
    box-shadow: 0 0 0 3px rgba(139, 207, 255, .22) !important;
  }
}

/* Tableau de bord admin : surfaces bleu nuit et contraste renforcé en sombre. */
@media (prefers-color-scheme: dark) {
  body.admin-dashboard-active { background: #172337 !important; }
  .admin-dashboard {
    --admin-navy: #f5f0e7;
    --admin-navy-deep: #fff8eb;
    --admin-cream: #172337;
    --admin-paper: #202d42;
    --admin-coral: #ffb4a9;
    --admin-gold: #ffd27a;
    --admin-line: #45536a;
    --admin-muted: #b8c6d9;
    --admin-shadow: 0 14px 35px rgba(0,0,0,.24);
    color: #f5f0e7 !important;
    background: #172337 !important;
  }
  .admin-dashboard .admin-dashboard-hero { border-bottom-color: #45536a !important; }
  .admin-dashboard h1,
  .admin-dashboard h2,
  .admin-dashboard h3,
  .admin-dashboard b,
  .admin-dashboard strong,
  .admin-dashboard .admin-metric,
  .admin-dashboard .admin-load-item,
  .admin-dashboard .admin-watch,
  .admin-dashboard .admin-shortcut { color: #f5f0e7 !important; }
  .admin-dashboard p,
  .admin-dashboard span,
  .admin-dashboard small,
  .admin-dashboard time { color: #b8c6d9 !important; }
  .admin-dashboard .admin-dashboard-eyebrow,
  .admin-dashboard .admin-section-kicker { color: #ffb4a9 !important; }
  .admin-dashboard .admin-panel,
  .admin-dashboard .admin-metric,
  .admin-dashboard .admin-action-card,
  .admin-dashboard .admin-load-item,
  .admin-dashboard .admin-watch,
  .admin-dashboard .admin-shortcut,
  .admin-dashboard .admin-empty {
    border-color: #45536a !important;
    background: #202d42 !important;
    box-shadow: 0 14px 35px rgba(0,0,0,.24) !important;
  }
  .admin-dashboard .admin-panel-link,
  .admin-dashboard .admin-panel-link:visited { color: #9ed8ff !important; }
  .admin-dashboard .admin-panel-link:hover,
  .admin-dashboard .admin-panel-link:focus-visible { color: #d6f0ff !important; }
  .admin-dashboard .admin-live-date {
    color: #f5f0e7 !important;
    background: #263957 !important;
    border-color: #657894 !important;
  }
  .admin-dashboard .admin-live-date i {
    background: #8bd8b8 !important;
    box-shadow: 0 0 0 4px rgba(139,216,184,.16) !important;
  }
  .admin-dashboard .admin-action-list,
  .admin-dashboard .admin-load-list { border-top-color: #45536a !important; }
  .admin-dashboard .admin-action-card { border-bottom-color: #45536a !important; }
  .admin-dashboard .admin-action-card p,
  .admin-dashboard .admin-action-meta,
  .admin-dashboard .admin-timeline-main span,
  .admin-dashboard .admin-timeline-main small,
  .admin-dashboard .admin-load-main span,
  .admin-dashboard .admin-watch span,
  .admin-dashboard .admin-shortcut span,
  .admin-dashboard .admin-empty { color: #b8c6d9 !important; }
  .admin-dashboard .admin-empty strong { color: #fff8eb !important; }
  .admin-dashboard .admin-timeline-time,
  .admin-dashboard .admin-load-date { color: #9ed8ff !important; }
  .admin-dashboard .admin-timeline-item:not(:last-child)::after { background: #45536a !important; }
  .admin-dashboard .admin-timeline-dot {
    border-color: #202d42 !important;
    background: #78b7e8 !important;
    box-shadow: 0 0 0 2px #657894 !important;
  }
  .admin-dashboard .admin-load-item:hover,
  .admin-dashboard .admin-watch:hover,
  .admin-dashboard .admin-shortcut:hover { background: #2b405e !important; }
  .admin-dashboard .admin-load-count,
  .admin-dashboard .admin-shortcut-icon { color: #172337 !important; background: #9ed8ff !important; }
  .admin-dashboard .admin-button {
    color: #f5f0e7 !important;
    background: #263957 !important;
    border-color: #657894 !important;
  }
  .admin-dashboard .admin-button:hover,
  .admin-dashboard .admin-button:focus-visible {
    color: #fff8eb !important;
    background: #304764 !important;
    border-color: #9ed8ff !important;
  }
  .admin-dashboard .admin-button.primary {
    color: #172337 !important;
    background: #ffbd4a !important;
    border-color: #ffbd4a !important;
  }
  .admin-dashboard .admin-button.primary:hover,
  .admin-dashboard .admin-button.primary:focus-visible { background: #ffd275 !important; }
  .admin-dashboard .admin-button.danger {
    color: #ffd8d1 !important;
    background: #5b3036 !important;
    border-color: #a96164 !important;
  }
  .admin-dashboard .admin-button.danger:hover,
  .admin-dashboard .admin-button.danger:focus-visible { background: #713b42 !important; }
  .admin-dashboard .admin-status { color: #d7e7f7 !important; background: #304764 !important; }
  .admin-dashboard .admin-status.pending,
  .admin-dashboard .admin-status.manual_review,
  .admin-dashboard .admin-status.awaiting_deposit { color: #ffe6a9 !important; background: #5b4824 !important; }
  .admin-dashboard .admin-status.accepted,
  .admin-dashboard .admin-status.confirmed { color: #d7f0df !important; background: #27483f !important; }
  .admin-dashboard .admin-status.cancel { color: #ffd8d1 !important; background: #5b3036 !important; }
  .admin-dashboard .admin-status.in_progress { color: #d9eaff !important; background: #29466b !important; }
  .admin-dashboard .admin-reservation-drawer,
  .admin-dashboard .admin-drawer-head { background: #202d42 !important; border-color: #45536a !important; }
  .admin-dashboard .admin-drawer-head { background: #263957 !important; }
  .admin-dashboard .admin-dashboard-loading { color: #b8c6d9 !important; }
  .admin-dashboard .admin-dashboard-loading i { border-color: #657894 !important; border-top-color: #9ed8ff !important; }
  .admin-dashboard input,
  .admin-dashboard select,
  .admin-dashboard textarea {
    color: #f5f0e7 !important;
    background: #1c2a40 !important;
    border-color: #657894 !important;
  }
  .admin-dashboard input::placeholder,
  .admin-dashboard textarea::placeholder { color: #9fb0c7 !important; }
  .admin-dashboard button:focus-visible,
  .admin-dashboard a:focus-visible,
  .admin-dashboard input:focus-visible,
  .admin-dashboard select:focus-visible,
  .admin-dashboard textarea:focus-visible {
    outline-color: #9ed8ff !important;
    box-shadow: 0 0 0 3px rgba(158,216,255,.24) !important;
  }
}

/* Boutique en préparation : composition centrée, sans illustration provisoire. */
main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]),
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: center !important;
  min-height: min(760px, calc(100vh - 92px)) !important;
  padding: clamp(64px, 9vh, 112px) clamp(22px, 7vw, 96px) !important;
  text-align: center !important;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > figure.story-visual,
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > figure.story-visual {
  display: none !important;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div,
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div {
  display: flex !important;
  width: min(920px, 100%) !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 0 auto !important;
  text-align: center !important;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) .eyebrow,
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) .eyebrow {
  margin: 0 0 16px !important;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) h1,
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) h1 {
  max-width: 1000px !important;
  margin: 0 auto !important;
  line-height: 1.06 !important;
  text-wrap: balance;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > p:not(.eyebrow),
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > p:not(.eyebrow) {
  max-width: 760px !important;
  margin: 22px auto 0 !important;
  line-height: 1.7 !important;
}

main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > a.button-primary,
main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > a.button-primary {
  margin: 28px auto 0 !important;
}

@media (max-width: 620px) {
  main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]),
  main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) {
    min-height: min(700px, calc(100svh - 76px)) !important;
    padding: 64px 22px 76px !important;
  }

  main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) h1,
  main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) h1 {
    font-size: clamp(40px, 10vw, 58px) !important;
  }

  main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > p:not(.eyebrow),
  main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > p:not(.eyebrow) {
    margin-top: 18px !important;
    font-size: 16px !important;
  }

  main#main-content > .public-reference-page:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > a.button-primary,
  main.coming-soon:has(> div > a.button-primary[href="/contact"]):has(> figure.story-visual img[src="/histoire-09-lapin-dort.jpg"]) > div > a.button-primary {
    margin-top: 24px !important;
  }
}

/* Liens sociaux dans la présentation de Florence. */
.page-hero .about-socials {
  display: grid;
  justify-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 18px;
}

.page-hero .about-socials-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-muted) !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.page-hero .about-socials-label span {
  color: var(--accent) !important;
  font-size: 18px;
  line-height: 1;
}

.page-hero .about-socials-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
}

.page-hero .about-social-button {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(14, 28, 47, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.page-hero .about-social-button.facebook { background: #1877f2 !important; }
.page-hero .about-social-button.instagram { background: linear-gradient(140deg, #6f42c1, #a832a8) !important; }

.page-hero .about-social-button svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: currentColor;
}

.page-hero .about-social-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(14, 28, 47, .25);
  filter: brightness(1.08);
}

.page-hero .about-social-button:focus-visible {
  outline: 3px solid #ffd27a;
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .page-hero .about-socials { margin-top: 16px; }
  .page-hero .about-social-button { width: 48px; height: 48px; }
}

/* -------------------------------------------------------------------------
   Page « Qui suis-je ? » — direction artistique éditoriale
   Le contenu et le fonctionnement restent inchangés : cette couche ne
   retouche que la composition, les couleurs et le comportement responsive.
   ------------------------------------------------------------------------- */

body:has(.portrait-story) {
  --about-pink: #f6e5e9;
  --about-paper: #fffdf8;
  --about-ink: #263f67;
  --about-muted: #536074;
  --about-accent: #a95561;
  background: var(--about-pink);
}

body:has(.portrait-story) #main-content,
body:has(.portrait-story) .public-reference-page {
  background: var(--about-pink);
}

body:has(.portrait-story) .public-reference-page {
  position: relative;
  isolation: isolate;
  color: var(--about-ink);
  overflow: clip;
}

body:has(.portrait-story) .page-hero {
  position: relative;
  grid-template-columns: minmax(0, 1.04fr) minmax(280px, .72fr);
  width: min(1240px, 100%);
  min-height: 590px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) clamp(22px, 8vw, 108px);
  background: transparent;
  overflow: visible;
}

body:has(.portrait-story) .page-hero > div:first-child,
body:has(.portrait-story) .portrait-story > div:last-child,
body:has(.portrait-story) .split-feature > div:last-child {
  position: relative;
  z-index: 2;
}

body:has(.portrait-story) .page-hero h1,
body:has(.portrait-story) h2,
body:has(.portrait-story) h3,
body:has(.portrait-story) .value-grid h3 {
  color: var(--about-ink);
}

body:has(.portrait-story) .page-hero h1 {
  max-width: 690px;
  font-size: clamp(3.1rem, 4.8vw, 4.6rem);
  line-height: .94;
  text-wrap: balance;
}

body:has(.portrait-story) .eyebrow {
  color: var(--about-accent);
}

body:has(.portrait-story) .hero-lead,
body:has(.portrait-story) .large-copy,
body:has(.portrait-story) .portrait-story p,
body:has(.portrait-story) .split-feature > div > p:not(.eyebrow) {
  color: var(--about-muted);
}

body:has(.portrait-story) .hero-lead {
  max-width: 640px;
  margin-top: 28px;
  line-height: 1.72;
}

/* Les images restent dans leur ratio natif : aucun remplissage forcé ni
   recadrage de la photo de Florence. */
body:has(.portrait-story) .story-visual,
body:has(.portrait-story) .portrait-frame {
  background: var(--about-paper);
  border: 1px solid rgba(38, 63, 103, .08);
  box-shadow: 0 22px 55px rgba(54, 47, 53, .12);
}

body:has(.portrait-story) .story-visual {
  width: min(100%, 430px);
  padding: clamp(16px, 2vw, 24px);
}

body:has(.portrait-story) .story-visual img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
}

body:has(.portrait-story) .story-visual figcaption {
  color: var(--about-ink);
}

body:has(.portrait-story) .portrait-story {
  position: relative;
  grid-template-columns: minmax(260px, .7fr) minmax(0, 1fr);
  width: min(1160px, calc(100% - 44px));
  padding: clamp(34px, 5vw, 84px) 0 clamp(88px, 10vw, 144px);
  gap: clamp(42px, 8vw, 116px);
}

body:has(.portrait-story) .portrait-frame {
  width: min(100%, 390px);
  justify-self: center;
  padding: 18px 18px 58px;
}

body:has(.portrait-story) .portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 680px;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

body:has(.portrait-story) blockquote {
  color: var(--about-ink);
  border-left-color: var(--about-accent);
}

body:has(.portrait-story) .values-section {
  position: relative;
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto clamp(80px, 10vw, 150px);
  padding: clamp(58px, 7vw, 98px) clamp(20px, 5vw, 72px);
  background: var(--about-paper);
  border: 1px solid rgba(38, 63, 103, .08);
  box-shadow: 0 18px 45px rgba(54, 47, 53, .06);
}

body:has(.portrait-story) .section-heading {
  margin-bottom: clamp(34px, 4vw, 56px);
}

body:has(.portrait-story) .section-heading h2 {
  max-width: 720px;
  margin-inline: auto;
}

body:has(.portrait-story) .value-grid article {
  background: rgba(255, 253, 248, .7);
  border-color: rgba(38, 63, 103, .16) !important;
}

body:has(.portrait-story) .value-grid article span {
  color: var(--about-accent);
}

body:has(.portrait-story) .value-grid p {
  color: var(--about-muted);
}

body:has(.portrait-story) .split-feature {
  position: relative;
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1fr);
  width: min(1160px, calc(100% - 44px));
  margin: 0 auto;
  padding: 0 0 clamp(100px, 12vw, 180px);
  gap: clamp(44px, 9vw, 132px);
  background: transparent;
}

body:has(.portrait-story) .split-feature .story-visual {
  max-width: 390px;
}

body:has(.portrait-story) .split-feature .button-primary {
  color: #fff;
  background: var(--about-ink);
}

/* Deux illustrations séparées, positionnées comme des touches de collage.
   La multiplication neutralise le blanc du fichier source sans le redessiner. */
body:has(.portrait-story) .page-hero::after,
body:has(.portrait-story) .portrait-story::after {
  position: absolute;
  z-index: 1;
  width: clamp(130px, 16vw, 220px);
  height: clamp(130px, 17vw, 220px);
  content: "";
  pointer-events: none;
  opacity: .5;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 470% auto;
  mix-blend-mode: multiply;
}

body:has(.portrait-story) .page-hero::after {
  right: clamp(6px, 11vw, 170px);
  bottom: clamp(-94px, -7vw, -46px);
  transform: rotate(7deg);
  background-image: url("/home-backgrounds/a-propos-hand-reference.png");
}

body:has(.portrait-story) .portrait-story::after {
  right: clamp(10px, 27vw, 360px);
  top: clamp(-34px, -3vw, -12px);
  transform: rotate(-12deg);
  background-image: url("/home-backgrounds/a-propos-butterfly-reference.png");
}

/* Lisibilité en thème sombre, y compris si le site reçoit un attribut
   data-theme d'un futur sélecteur. */
@media (prefers-color-scheme: dark) {
  body:has(.portrait-story) {
    --about-pink: #1d3033;
    --about-paper: #263d3d;
    --about-ink: #f8eef0;
    --about-muted: #d8d5d8;
    --about-accent: #f1aeb8;
  }

  body:has(.portrait-story) .story-visual,
  body:has(.portrait-story) .portrait-frame {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .2);
  }

  body:has(.portrait-story) .story-visual img {
    background: #fff;
  }

  body:has(.portrait-story) .value-grid article {
    background: rgba(255, 255, 255, .035);
    border-color: rgba(255, 255, 255, .18) !important;
  }

  body:has(.portrait-story) .split-feature .button-primary {
    color: #1d3033;
    background: #f1aeb8;
  }

  body:has(.portrait-story) .page-hero::after,
  body:has(.portrait-story) .portrait-story::after {
    opacity: .62;
    filter: invert(1) sepia(.2) saturate(.6) hue-rotate(150deg);
    mix-blend-mode: screen;
  }
}

html[data-theme="dark"] body:has(.portrait-story),
body[data-theme="dark"]:has(.portrait-story),
body.dark-theme:has(.portrait-story) {
  --about-pink: #1d3033;
  --about-paper: #263d3d;
  --about-ink: #f8eef0;
  --about-muted: #d8d5d8;
  --about-accent: #f1aeb8;
}

html[data-theme="dark"] body:has(.portrait-story) .page-hero::after,
html[data-theme="dark"] body:has(.portrait-story) .portrait-story::after,
body[data-theme="dark"]:has(.portrait-story) .page-hero::after,
body[data-theme="dark"]:has(.portrait-story) .portrait-story::after,
body.dark-theme:has(.portrait-story) .page-hero::after,
body.dark-theme:has(.portrait-story) .portrait-story::after {
  opacity: .62;
  filter: invert(1) sepia(.2) saturate(.6) hue-rotate(150deg);
  mix-blend-mode: screen;
}

html[data-theme="dark"] body:has(.portrait-story) .split-feature .button-primary,
body[data-theme="dark"]:has(.portrait-story) .split-feature .button-primary,
body.dark-theme:has(.portrait-story) .split-feature .button-primary {
  color: #1d3033;
  background: #f1aeb8;
}

html[data-theme="light"] body:has(.portrait-story),
body[data-theme="light"]:has(.portrait-story),
body.light-theme:has(.portrait-story) {
  --about-pink: #f6e5e9;
  --about-paper: #fffdf8;
  --about-ink: #263f67;
  --about-muted: #536074;
  --about-accent: #a95561;
}

html[data-theme="light"] body:has(.portrait-story) .page-hero::after,
html[data-theme="light"] body:has(.portrait-story) .portrait-story::after,
body[data-theme="light"]:has(.portrait-story) .page-hero::after,
body[data-theme="light"]:has(.portrait-story) .portrait-story::after,
body.light-theme:has(.portrait-story) .page-hero::after,
body.light-theme:has(.portrait-story) .portrait-story::after {
  opacity: .5;
  filter: none;
  mix-blend-mode: multiply;
}

html[data-theme="light"] body:has(.portrait-story) .value-grid article,
body[data-theme="light"]:has(.portrait-story) .value-grid article,
body.light-theme:has(.portrait-story) .value-grid article {
  background: rgba(255, 253, 248, .7);
}

@media (max-width: 900px) {
  body:has(.portrait-story) .page-hero,
  body:has(.portrait-story) .portrait-story,
  body:has(.portrait-story) .split-feature {
    grid-template-columns: 1fr;
  }

  body:has(.portrait-story) .page-hero {
    min-height: 0;
    gap: 54px;
  }

  body:has(.portrait-story) .page-hero > div:first-child {
    max-width: 720px;
  }

  body:has(.portrait-story) .story-visual,
  body:has(.portrait-story) .portrait-frame {
    width: min(100%, 430px);
  }

  body:has(.portrait-story) .portrait-story {
    padding-top: 18px;
  }

  body:has(.portrait-story) .portrait-frame {
    justify-self: center;
  }

  body:has(.portrait-story) .split-feature .story-visual {
    justify-self: center;
  }

  body:has(.portrait-story) .page-hero::after {
    right: 3vw;
    bottom: -105px;
  }

  body:has(.portrait-story) .portrait-story::after {
    right: 7vw;
    top: -56px;
  }
}

@media (max-width: 560px) {
  body:has(.portrait-story) .page-hero,
  body:has(.portrait-story) .portrait-story,
  body:has(.portrait-story) .split-feature {
    width: min(100% - 32px, 720px);
  }

  body:has(.portrait-story) .page-hero {
    padding: 62px 0 82px;
  }

  body:has(.portrait-story) .page-hero h1 {
    font-size: clamp(2.8rem, 13vw, 4.2rem);
  }

  body:has(.portrait-story) .hero-lead,
  body:has(.portrait-story) .large-copy,
  body:has(.portrait-story) .portrait-story p,
  body:has(.portrait-story) .split-feature > div > p:not(.eyebrow) {
    font-size: 16px;
  }

  body:has(.portrait-story) .values-section {
    width: min(100% - 32px, 720px);
    padding: 54px 16px;
  }

  body:has(.portrait-story) .value-grid {
    grid-template-columns: 1fr;
  }

  body:has(.portrait-story) .value-grid article {
    padding: 28px 24px;
  }

  body:has(.portrait-story) .page-hero::after,
  body:has(.portrait-story) .portrait-story::after {
    width: 118px;
    height: 118px;
    opacity: .36;
  }

  body:has(.portrait-story) .page-hero::after {
    right: -16px;
    bottom: -70px;
  }

  body:has(.portrait-story) .portrait-story::after {
    right: -14px;
    top: -34px;
  }
}


/* 11 - Réparation À propos: les illustrations restent éditables depuis l’admin. */
body:has(.portrait-story) .page-hero,
body:has(.portrait-story) .portrait-story { position: relative; }

body:has(.portrait-story) .page-hero::after,
body:has(.portrait-story) .portrait-story::after { display: none !important; content: none !important; }

body:has(.portrait-story) .a-propos-editable-art-slot {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(130px, 16vw, 220px);
  height: clamp(130px, 17vw, 220px);
  margin: 0;
  overflow: hidden;
  pointer-events: auto;
  opacity: .5;
  mix-blend-mode: multiply;
}

body:has(.portrait-story) .a-propos-editable-art-slot--hand {
  right: clamp(6px, 11vw, 170px);
  bottom: clamp(-94px, -7vw, -46px);
  transform: rotate(7deg);
}

body:has(.portrait-story) .a-propos-editable-art-slot--butterfly {
  right: clamp(10px, 27vw, 360px);
  top: clamp(-34px, -3vw, -12px);
  transform: rotate(-12deg);
}

body:has(.portrait-story) .a-propos-editable-art-slot > .a-propos-editable-art,
body:has(.portrait-story) .a-propos-editable-art-slot > .visual-image-editable {
  position: absolute !important;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
  line-height: 0;
}

body:has(.portrait-story) .a-propos-editable-art-slot .a-propos-editable-art {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 470%;
  height: auto;
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  object-fit: initial;
}

@media (max-width: 680px) {
  body:has(.portrait-story) .a-propos-editable-art-slot--hand { right: 0; }
  body:has(.portrait-story) .a-propos-editable-art-slot--butterfly { right: 8px; }
}