/* ==========================================================================
   Styles partagés — extraits des maquettes template/*.html
   ========================================================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    line-height: 1;
}

.material-symbols-outlined.filled,
.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   TYPOGRAPHIE — Poppins, trois tailles, aucune exception
   ==========================================================================

   Règle unique du site :

     --font-h1    titre de page      (un seul <h1> par page)
     --font-h2    titre de section
     --font-body  tout le reste      (paragraphes, labels, boutons, champs)

   La hiérarchie passe par la graisse, la couleur et l'espacement — jamais
   par une quatrième taille. L'échelle Tailwind est verrouillée en miroir
   dans public/assets/js/tailwind.config.js : `text-sm`, `text-xl`… n'existent
   plus, donc une classe oubliée ne peut pas casser la règle.

   Seules les icônes Material Symbols échappent à l'échelle : leur taille de
   glyphe se pilote par `font-size`, c'est de l'iconographie.
*/

:root {
    --font-sans: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-h1:   clamp(1.75rem, 1.10rem + 2.6vw, 2.5rem);   /* 28 → 40 px */
    --font-h2:   clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);   /* 20 → 24 px */
    --font-body: 1rem;                                       /* 16 px      */
}

html {
    font-family: var(--font-sans);
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-body);
    line-height: 1.6;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Les contrôles de formulaire n'héritent pas de la police : on les force. */
input,
select,
textarea,
button,
optgroup {
    font-family: inherit;
    font-size: var(--font-body);
    line-height: 1.4;
}

/* Défauts sémantiques : un <h1> sans classe est déjà à la bonne taille. */
h1 {
    font-size: var(--font-h1);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h2 {
    font-size: var(--font-h2);
    line-height: 1.3;
    font-weight: 600;
}

/* h3 à h6 restent des repères sémantiques : taille du corps, graisse en plus. */
h3, h4, h5, h6 {
    font-size: var(--font-body);
    line-height: 1.5;
    font-weight: 600;
}

/* `small` réintroduirait sinon une taille réduite via le style du navigateur. */
small { font-size: var(--font-body); }

/* ------------------------------------------------- Troncature multiligne
 * Les textes du back-office n'ont pas de longueur garantie : on borne
 * l'affichage sans toucher au contenu (l'intégralité reste dans `title`).
 */

.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------- Scroll horizontal */

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ------------------------------------------------------------------ Ombres */

.flat-shadow,
.card-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* -------------------------------------------------------- Retour au toucher */

.active-tap { transition: transform 0.1s ease; }
.active-tap:active { transform: scale(0.98); }

/* --------------------------------------------------------------- Accordéon */

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 320px;
    padding-bottom: 1rem;
}

.accordion-item.active .chevron { transform: rotate(180deg); }

/* --------------------------------------------- Barre de progression (tunnel) */

.step-progress-bar {
    height: 6px;
    width: 100%;
    background-color: #E5E7EB;
    overflow: hidden;
}

.step-progress-fill {
    height: 100%;
    background-color: #004099;
    box-shadow: 0 0 8px rgba(0, 64, 153, 0.3);
    transition: width 0.4s ease-out;
}

/* ------------------------------------------------------- Écran de succès */

.success-pulse { animation: success-pulse 2s infinite ease-in-out; }

@keyframes success-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.05); opacity: 0.8; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ------------------------------------------------------------ Menu mobile */

.drawer { transition: transform 0.28s ease; }
.drawer[aria-hidden="true"] { transform: translateX(-100%); }
.drawer-backdrop { transition: opacity 0.28s ease; }
.drawer-backdrop[aria-hidden="true"] { opacity: 0; pointer-events: none; }

body.drawer-open { overflow: hidden; }

/* ------------------------------- Texte riche venant du back-office (API) */

.rich-text p { margin-bottom: 0.75rem; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul,
.rich-text ol { margin: 0.5rem 0 0.75rem 1.25rem; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: 0.25rem; }
.rich-text a { color: rgb(var(--brand-primary)); text-decoration: underline; }
.rich-text strong,
.rich-text b { font-weight: 600; }

/* ------------------------------------------------------------- Combobox
 * Liste longue (171 destinations) transformée en champ de recherche.
 * Le <select> natif reste dans le DOM, masqué : c'est lui qui est soumis.
 */

.cb { position: relative; }

.cb-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* `width` explicite : le <select> remplacé s'étirait via le flex parent,
   l'input, lui, garde sa largeur intrinsèque. */
.cb-input {
    width: 100%;
    padding-right: 2.5rem;
}

.cb-caret {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #737783;
    pointer-events: auto;
    cursor: pointer;
}

.cb-list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem;
    background: #fff;
    border: 1px solid #E2E4E8;
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

.cb-list[hidden] { display: none; }

.cb-option {
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    line-height: 1.3;
}

.cb-option:hover,
.cb-option[data-active="true"] {
    background: rgb(var(--brand-primary) / 0.1);
    color: rgb(var(--brand-primary));
    font-weight: 600;
}

.cb-empty {
    padding: 0.625rem 0.75rem;
    color: #666;
}

/* ---------------------------------------------------------- Carrousel */

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: #c3c6d4;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.carousel-dot[data-active="true"] {
    width: 22px;
    background: rgb(var(--brand-primary));
}

/* --------------------------------------------------- Sélecteur de dates
 *
 * Composant maison (public/assets/js/datepicker.js) : pas de dépendance,
 * et surtout un rendu identique sur tous les navigateurs, contrairement au
 * calendrier natif de <input type="date">.
 *
 * Les couleurs viennent des variables de marque injectées par l'API, donc
 * le composant se reteinte tout seul d'un site à l'autre.
 */

.dp { position: relative; }

.dp-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    height: 52px;
    padding: 0 1rem;
    background: #fff;
    border: 1px solid #E2E4E8;
    border-radius: 0.5rem;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dp-trigger:hover { border-color: rgb(var(--brand-primary) / 0.4); }

.dp-trigger:focus-visible,
.dp[data-open="true"] .dp-trigger {
    outline: none;
    border-color: rgb(var(--brand-primary));
    box-shadow: 0 0 0 2px rgb(var(--brand-primary) / 0.2);
}

.dp-trigger[aria-invalid="true"] { border-color: #ba1a1a; }
.dp-trigger .dp-icon { color: rgb(var(--brand-primary)); font-size: 20px; flex-shrink: 0; }
.dp-value { font-size: 16px; color: #1b1c1c; line-height: 1.2; }
.dp-value[data-empty="true"] { color: #737783; }

/* --- Panneau ------------------------------------------------------------ */

/* Rattaché au <body> et positionné en JS : ancré dans le champ, il serait
   rogné par le `overflow-hidden` du hero. */
.dp-panel {
    position: fixed;
    z-index: 60;
    width: 320px;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: #fff;
    border: 1px solid #E2E4E8;
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.14);
}

.dp-panel[hidden] { display: none; }

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.dp-title {
    font-size: 18px;
    font-weight: 700;
    color: rgb(var(--brand-primary));
    text-transform: capitalize;
}

.dp-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    color: rgb(var(--brand-primary));
    transition: background-color 0.15s ease;
}

.dp-nav:hover:not(:disabled) { background: rgb(var(--brand-primary) / 0.08); }
.dp-nav:disabled { color: #c3c6d4; cursor: not-allowed; }

.dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dp-weekday {
    padding-bottom: 0.5rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #666;
    text-align: center;
}

/* --- Jours -------------------------------------------------------------- */

.dp-day {
    position: relative;
    height: 40px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    color: #1b1c1c;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.dp-day:hover:not([data-disabled]):not([data-selected="true"]) {
    background: rgb(var(--brand-primary) / 0.1);
}

.dp-day:focus-visible {
    outline: 2px solid rgb(var(--brand-primary));
    outline-offset: -2px;
}

/* Jours des mois voisins : présents pour garder la grille, mais en retrait. */
.dp-day[data-outside="true"] { color: #b9bcc6; font-weight: 400; }

/* Jours fermés : `aria-disabled`, pas `disabled`, pour rester focusables. */
.dp-day[data-disabled] {
    color: #d4d6dd;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.dp-day[data-today="true"]::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: rgb(var(--brand-primary));
}

/* Nuit(s) comprise(s) entre l'arrivée et le retour. */
.dp-day[data-in-range="true"] {
    background: rgb(var(--brand-primary) / 0.1);
    border-radius: 0;
}

.dp-day[data-selected="true"] {
    background: rgb(var(--brand-primary));
    color: #fff;
    font-weight: 700;
}

/* Jour d'arrivée vu depuis le calendrier du retour : non sélectionnable, mais
   affiché comme le début du séjour et non comme un jour fermé. */
.dp-day[data-disabled][data-selected="true"] {
    color: #fff;
    text-decoration: none;
    cursor: default;
}

.dp-day[data-selected="true"][data-today="true"]::after { background: #fff; }

.dp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #E2E4E8;
}

.dp-hint { font-size: 12px; color: #666; }

.dp-clear {
    font-size: 13px;
    font-weight: 600;
    color: rgb(var(--brand-primary));
}

.dp-clear:hover { text-decoration: underline; }

/* Sur mobile, le panneau devient une feuille centrée : ancré sous le champ,
   il déborderait de l'écran sur les champs de droite. */
@media (max-width: 480px) {
    /* !important : le positionnement desktop est écrit en style inline. */
    .dp-panel {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 2rem));
    }

    .dp-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgb(0 0 0 / 0.4);
    }
}

/* ------------------------------------------------------------- Impression */

@media print {
    header, footer, nav, .drawer, .drawer-backdrop,
    [data-promo-bar], [data-summary-toggle], button {
        display: none !important;
    }

    body { background: #fff; }
    main { max-width: none !important; padding: 0 !important; }
}

/* ----------------------------------------------------- Préférences système */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}