/* =============================================================================
   ABC Reservation Pro — Responsive & pleine largeur / pleine hauteur
   -----------------------------------------------------------------------------
   Objectif : rendre TOUTES les sorties du plugin (formulaire, calendrier,
   tarifs, contact) pleinement fluides et adaptables à n'importe quel thème.

   • Par défaut       : le bloc remplit EXACTEMENT la colonne de contenu du
                        thème (100 %, sans plafond de largeur inventé par le
                        plugin) — la police est héritée du thème (voir
                        font-family: inherit dans reservation-form.css,
                        calendar.php, pricing-display.php).
   • .abc-reading-width : plafonne à une largeur de lecture confortable
                        (1200px) — opt-in uniquement, pour les contextes où
                        le site n'a pas déjà sa propre colonne de contenu
                        (ex : section pleine largeur Divi).
   • .abc-full-width  : « full-bleed » — le bloc s'échappe de la colonne du
                        thème et occupe 100 % de la largeur de l'écran.
   • .abc-full-height : le bloc occupe au minimum toute la hauteur de l'écran
                        et centre son contenu verticalement.

   Ces classes sont pilotées par les attributs de shortcode :
     largeur="pleine"   (ou width="full")    -> .abc-full-width
     largeur="lecture"  (ou width="reading") -> .abc-reading-width
     hauteur="plein"    (ou height="full")   -> .abc-full-height

   Chargé APRÈS frontend.css et reservation-form.css : la cascade suffit,
   on limite les !important au strict nécessaire (surcharge de styles inline).
   ========================================================================== */

:root {
    /* Largeur de lecture max par défaut (mode fluide, non full-bleed). */
    --abc-wrap-max: 1200px;
    /* Marge de sécurité latérale pour ne jamais coller aux bords de l'écran. */
    --abc-gutter: clamp(12px, 4vw, 32px);
}

/* ── Wrapper de portée injecté autour de chaque shortcode ─────────────────── */
.abc-resa-scope {
    width: 100%;
    box-sizing: border-box;
}
.abc-resa-scope *,
.abc-resa-scope *::before,
.abc-resa-scope *::after { box-sizing: border-box; }

/* Anti-débordement horizontal universel (images, tableaux, iframes…) */
.abc-resa-scope img,
.abc-resa-scope table,
.abc-resa-scope iframe,
.abc-resa-scope video,
.abc-resa-scope canvas { max-width: 100%; }

/* -----------------------------------------------------------------------------
   1) MODE FLUIDE PAR DÉFAUT
   Par défaut, le plugin n'impose AUCUN plafond de largeur : il remplit
   exactement la colonne de contenu du thème, quelle que soit sa largeur
   réelle (Divi "Largeur du contenu", thème personnalisé, etc.). Le plugin
   ne peut pas deviner cette valeur — mieux vaut hériter que deviner.
----------------------------------------------------------------------------- */
.abc-resa-scope .gite-reservation-form,
.abc-resa-scope .gite-reservation-calendar,
.abc-resa-scope .gite-pricing-table {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   1bis) MODE LARGEUR DE LECTURE (opt-in via largeur="lecture" sur le shortcode)
   Certains contextes (section pleine largeur Divi, sidebar très large...)
   bénéficient d'un plafond confortable façon "colonne de lecture". Ce n'est
   plus le comportement par défaut : à activer explicitement au cas par cas.
----------------------------------------------------------------------------- */
.abc-resa-scope.abc-reading-width .gite-reservation-form,
.abc-resa-scope.abc-reading-width .gite-reservation-calendar,
.abc-resa-scope.abc-reading-width .gite-pricing-table {
    max-width: var(--abc-wrap-max);
    margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   2) MODE PLEINE LARGEUR (full-bleed)
   Technique éprouvée qui fonctionne sur la quasi-totalité des thèmes :
   on tire le bloc jusqu'aux bords de la fenêtre, quelle que soit la colonne
   de contenu du thème.
----------------------------------------------------------------------------- */
.abc-resa-scope.abc-full-width {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* En full-bleed, la carte intérieure occupe toute la largeur (on neutralise
   les max-width et styles inline hérités). */
.abc-resa-scope.abc-full-width .gite-reservation-form,
.abc-resa-scope.abc-full-width .gite-reservation-calendar,
.abc-resa-scope.abc-full-width .gite-pricing-table {
    max-width: none !important;
    margin-inline: 0;
    border-radius: 0;
}

/* Rembourrage latéral confortable pour que le contenu ne touche pas les bords. */
.abc-resa-scope.abc-full-width > .gite-reservation-form,
.abc-resa-scope.abc-full-width > .gite-reservation-calendar,
.abc-resa-scope.abc-full-width > .gite-pricing-table {
    padding-left: var(--abc-gutter);
    padding-right: var(--abc-gutter);
}

/* -----------------------------------------------------------------------------
   3) MODE PLEINE HAUTEUR
   Le bloc occupe au minimum toute la hauteur visible et centre son contenu.
   100dvh gère correctement les barres d'URL mobiles (fallback 100vh).
----------------------------------------------------------------------------- */
.abc-resa-scope.abc-full-height {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--abc-gutter);
    padding-bottom: var(--abc-gutter);
}
.abc-resa-scope.abc-full-height > * { width: 100%; }

/* Combinaison pleine largeur + pleine hauteur = vrai plein écran. */
.abc-resa-scope.abc-full-width.abc-full-height {
    align-items: center;
}

/* -----------------------------------------------------------------------------
   4) RENFORT RESPONSIVE — GRILLES INTERNES
   On rend fluides toutes les grilles internes (cartes d'unités, cartes de
   tarifs, lignes de formulaire…) indépendamment des règles historiques.
----------------------------------------------------------------------------- */

/* Cartes de sélection d'unité (formulaire) */
.abc-resa-scope .gite-unit-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 16px;
}

/* Cartes de tarifs */
.abc-resa-scope .gite-pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 20px;
}

/* Grille de détails / suppléments tarifs */
.abc-resa-scope .gite-pricing-details .gite-pricing-grid,
.abc-resa-scope .gite-supplements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

/* Lignes de champs du formulaire : reflow automatique */
.abc-resa-scope .gite-form-row,
.abc-resa-scope .gite-date-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 16px;
}

/* Champs toujours à 100 % de leur cellule (évite les débordements) */
.abc-resa-scope .gite-form-field input,
.abc-resa-scope .gite-form-field select,
.abc-resa-scope .gite-form-field textarea,
.abc-resa-scope .gite-date-field input,
.abc-resa-scope .gite-guest-field select {
    width: 100%;
    max-width: 100%;
}

/* Tableau de tarifs : défilement horizontal plutôt que débordement */
.abc-resa-scope .gite-pricing-table,
.abc-resa-scope .gite-pricing-list-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.abc-resa-scope .gite-pricing-grid table,
.abc-resa-scope table.gite-pricing-list,
.abc-resa-scope table.gite-pricing-grid {
    width: 100%;
    min-width: 480px; /* garde la lisibilité, sinon scroll horizontal */
    border-collapse: collapse;
}

/* Légende & pied du calendrier : passage en colonne sur petit écran */
.abc-resa-scope .gite-legend-items { flex-wrap: wrap; }
.abc-resa-scope .gite-calendar-footer { flex-wrap: wrap; }

/* -----------------------------------------------------------------------------
   5) BREAKPOINTS
----------------------------------------------------------------------------- */

/* Tablette */
@media (max-width: 782px) {
    .abc-resa-scope .gite-calendar-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .abc-resa-scope .gite-calendar-nav,
    .abc-resa-scope .gite-calendar-view-switcher {
        justify-content: center;
    }
    .abc-resa-scope .gite-calendar-actions {
        min-width: 0;
    }
}

/* Mobile */
@media (max-width: 600px) {
    :root { --abc-gutter: clamp(10px, 4vw, 18px); }

    /* Empilement systématique des grilles */
    .abc-resa-scope .gite-unit-cards,
    .abc-resa-scope .gite-pricing-cards,
    .abc-resa-scope .gite-pricing-details .gite-pricing-grid,
    .abc-resa-scope .gite-supplements-grid,
    .abc-resa-scope .gite-form-row,
    .abc-resa-scope .gite-date-picker {
        grid-template-columns: 1fr;
    }

    /* Boutons en pleine largeur */
    .abc-resa-scope .gite-btn,
    .abc-resa-scope .gite-calendar-actions .gite-btn {
        width: 100%;
        min-width: 0;
    }

    /* Anti-zoom iOS : tout champ à >=16px */
    .abc-resa-scope input,
    .abc-resa-scope select,
    .abc-resa-scope textarea {
        font-size: 16px;
    }

    /* Titres un peu plus compacts */
    .abc-resa-scope .gite-form-header h2,
    .abc-resa-scope .gite-calendar-header h2,
    .abc-resa-scope .gite-pricing-header h2 {
        font-size: clamp(20px, 6vw, 26px);
    }

    /* Cellules de calendrier : on garde le carré mais police adaptée */
    .abc-resa-scope .gc-cell { font-size: clamp(10px, 3.2vw, 13px); }
    .abc-resa-scope .gc-dayname { font-size: 10px; }
}

/* Très petits écrans */
@media (max-width: 380px) {
    .abc-resa-scope .gc-grid { gap: 2px; }
    .abc-resa-scope .gite-calendar-legend { padding: 12px; }
}