/* ============================================================================
   L'Appart 1925 — Section « Nous contacter » : calendrier Gîtes de France,
   liens de réservation, formulaire de demande.
   Charte reproduite d'après livrables/maquette-home/index.html (référence).
   Crealab — 2026-09-05
   ========================================================================= */

#contact .contenu{
  /* Tokens de la maquette, portés localement : la section n'impose rien au reste */
  --or-filet:#DCA44C;   /* filets — inchangé, c'est la couleur du kit */
  --or-fond:#9B6D27;    /* or assombri, UNIQUEMENT en aplat sous du blanc.
                           Blanc dessus = 4,55:1 → conforme AA. Les filets
                           restent en #DCA44C : sur un trait de 2,5 px le
                           contraste n'est pas en jeu et l'or clair porte mieux.
                           (#A9762A, essayé le 05/09, ne donnait que 3,95:1.) */
  --or-texte:#7F5512;   /* texte   — 6,5:1 sur blanc */
  --gris-texte:#54595F; /* gris    — 7,07:1 (remplace #7A7A7A, sous AA) */
  --blanc:#fff;
  --t-xs:.8vw; --t-s:1vw; --t-base:1.1vw; --t-nav:1.2vw; --t-m:1.6vw;
  --filet-fin:.195vw;   /* 2,5px à 1280 */
  --filet-fort:.39vw;   /* 5px à 1280 */
}

/* ─── 1. Calendrier — cadre et titre ───────────────────────────────────── */
/* Cadre calé sur ce qu'il contient : le mois fait 30em, plus deux flèches de
   2,2em. Avant, 890 px de cadre pour 420 px de mois — 433 px de vide, plus
   large que le mois lui-même, et une flèche à 194 px de l'objet qu'elle pilote.
   ⚠️ Aligné à GAUCHE, pas centré : la section aligne déjà titres, texte et CTA
   sur cet axe. Un cadre centré y aurait créé un TROISIÈME axe vertical.
   Rythme vertical recalé sur une gamme unique (1,4 / 2,1 / 2,8vw) — les quatre
   vides mesurés (31,07 · 21,23 · 31,80 · 46,07 px) n'avaient aucun multiple
   commun, et l'écart haut/bas atteignait +48 %. */
#calendrier-gdf{
  border:var(--filet-fin) solid var(--or-filet);
  padding:2.1vw;
  /* 38em tant que le cadre ne portait QU'UN mois (05/09). Il en porte trois
     depuis le 08/09 : la largeur suit. Reste en `em` — donc indexée sur --t-s,
     lui-même en vw — pour rester dans le système d'échelle du fichier. */
  max-width:74em;
  font-family:'Poiret One',sans-serif;
  font-size:var(--t-s);
  color:var(--gris-texte);
}
/* Titre du widget masqué : « Disponibilités L'Appart 1925 » répétait le h3
   « Disponibilités » au millième (21,232 px les deux, même famille, même
   couleur) — deux items de même rang là où il faut un titre. Le mois devient
   le sujet du bloc (voir la légende du tableau, §3).
   Bonus : le widget compose « L' Appart » (apostrophe droite + espace
   parasite), la faute part avec. */
#calendrier-gdf .itea_widget_dispo_title{display:none}

/* ─── 2. Navigation de mois — le seul geste qui reste actif ────────────── */
#calendrier-gdf .calendItea_navigEtCalend{
  display:flex; align-items:center; justify-content:center; gap:1.2vw;
}
/* Le mois est un item flex : sans ceci il se réduit à sa largeur de contenu
   (mesuré : 142px pour 529px disponibles). */
#calendrier-gdf .div_fiche_calendrierDispo{flex:1 1 auto;min-width:0;margin:0}

/* Trois mois de front (data-nbmois="3" data-nbmois-ligne="3" sur le widget).
   ⚠️ Rectification du 08/09 d'une note du journal : `data-nbmois` avait été
   déclaré INOPÉRANT en mode sanscss. C'est FAUX — la mesure comptait les
   tables RENDUES (toujours 5, quel que soit le paramètre) au lieu des tables
   VISIBLES. Mesuré proprement : sans l'attribut 1 mois visible, avec
   nbmois="3" 3 mois visibles. Le paramètre agit sur l'AFFICHAGE, pas sur le
   rendu — d'où le faux négatif.
   En sanscss aucune CSS d'ITEA n'arrive : les <li> de mois retombent en
   list-item et s'empilent. C'est à nous de les mettre en ligne. */
#calendrier-gdf .calendItea_listMois .calendItea_ul{
  display:flex; gap:2.4vw; align-items:flex-start; justify-content:center;
}
#calendrier-gdf .calendItea_listMois .calendItea_li{flex:1 1 0;min-width:0}
/* Largeur RÉSERVÉE pour la flèche gauche : en septembre elle est en
   display:none et le premier clic sur « > » poussait le mois de 17,5 px. */
#calendrier-gdf .calendItea_navig{flex:0 0 2.2em;font-size:var(--t-nav)}
#calendrier-gdf .calendItea_navig a{
  display:block; width:2.2em; height:2.2em; line-height:2.2em; text-align:center;
  font-size:var(--t-nav); color:var(--or-texte); text-decoration:none;
  border:1px solid var(--or-filet); border-radius:50%;
}
#calendrier-gdf .calendItea_navig a:hover,
#calendrier-gdf .calendItea_navig a:focus-visible{
  background:var(--or-filet); color:var(--blanc);
}
#calendrier-gdf .calendItea_navig a:focus-visible{outline:2px solid var(--or-texte);outline-offset:2px}

/* ─── 3. Le mois — table ───────────────────────────────────────────────── */
#calendrier-gdf .itea_ul{list-style:none;margin:0;padding:0}
#calendrier-gdf table.calend{
  border-collapse:separate; border-spacing:.25em; width:100%; table-layout:fixed;
}
#calendrier-gdf table.calend th,
#calendrier-gdf table.calend td{width:14.2857%}
/* « Septembre 2026 » commande la lecture de toute la grille : il prend la
   taille qu'occupait le titre supprimé (14,6 px → 21,2 px). */
#calendrier-gdf table.calend caption{
  font-family:Limelight,sans-serif; font-size:var(--t-m); font-weight:400;
  color:var(--or-texte); padding:0 0 .8em; text-transform:capitalize;
}
/* `opacity:.75` sur #54595F donnait un #7F8287 effectif = 3,86:1, sous AA
   pour du 10,6 px. Retirée : le gris nu remonte à 7,07:1 et la hiérarchie
   tient déjà par la taille (10,6 contre 13,3 px). */
#calendrier-gdf table.calend th{
  font-weight:400; font-size:var(--t-xs); color:var(--gris-texte); padding:.3em 0;
}
#calendrier-gdf table.calend td{padding:0;text-align:center;vertical-align:middle}
#calendrier-gdf table.calend td span{
  display:block; aspect-ratio:1; line-height:1; padding:.55em 0;
  font-size:var(--t-s);
  /* 2 px et non 1 : le filet or est la SEULE marque de l'état « Libre » et il
     ne mesure que 2,22:1 sur blanc. On épaissit le trait plutôt que d'assombrir
     la couleur — le #DCA44C du kit reste intact. */
  border-width:2px; border-style:solid; border-color:transparent;
}
/* Le widget câble chaque jour vers son propre tunnel : on neutralise le geste,
   pas le lien (retiré aussi côté JS, ceinture et bretelles). */
#calendrier-gdf a.aJourCalendrierItea{
  text-decoration:none; color:inherit; cursor:default; pointer-events:none;
}

/* ─── 4. Les états — libellés repris de la légende ITEA, sans interprétation ─
   ⚠️ Sélecteurs volontairement aussi spécifiques que la règle de base
   `table.calend td span` (1,1,3) : sinon le border-color ne passe pas. */
#calendrier-gdf table.calend td span,
#calendrier-gdf .spanCalendVisuel{
  --etat-fond:transparent; --etat-texte:var(--or-texte); --etat-filet:transparent;
  background:var(--etat-fond); color:var(--etat-texte); border-color:var(--etat-filet);
}
/* Libre, arrivée possible */
#calendrier-gdf table.calend td span.spanCalendCliquable,
#calendrier-gdf .spanCalendVisuel.spanCalendCliquable{
  --etat-filet:var(--or-filet); cursor:default;
}
/* Libre, arrivée possible sur demande */
#calendrier-gdf table.calend td span.spanCalendJour_libre,
#calendrier-gdf .spanCalendVisuel.spanCalendJour_libre{
  --etat-filet:var(--or-filet); --etat-fond:rgba(220,164,76,.10);
}
/* Indisponible — le seul état qui bloquera le sélecteur de dates */
#calendrier-gdf table.calend td span.spanCalendJour_occupe,
#calendrier-gdf .spanCalendVisuel.spanCalendJour_occupe{
  --etat-fond:var(--gris-texte); --etat-texte:var(--blanc); --etat-filet:var(--gris-texte);
}
/* Sur demande — distingué par la FORME (filet tireté) et non par la teinte.
   Mesuré : or 10 % contre or 30 % = 1,16:1, indiscernables. La palette n'offre
   qu'un accent et ses dilutions : on ne séparera jamais trois états par trois
   nuances du même or (WCAG 1.4.1, pas d'information par la couleur seule).
   Trois formes : contour plein · contour tireté · aplat. Zéro couleur en plus. */
#calendrier-gdf table.calend td span.spanCalendJour_contact,
#calendrier-gdf table.calend td span.spanCalendJour_inconnu,
#calendrier-gdf .spanCalendVisuel.spanCalendJour_contact,
#calendrier-gdf .spanCalendVisuel.spanCalendJour_inconnu{
  --etat-fond:rgba(220,164,76,.14); --etat-filet:var(--or-filet);
  border-style:dashed;
}
/* Libre, départ possible — moitié occupée, moitié libre.
   ⚠️ `!important` OBLIGATOIRE et non négociable : contrairement à ce qu'on
   croyait, `data-sanscss="1"` ne coupe pas la feuille itea_widget.v2.css — elle
   est bien chargée, seules ses règles scopées `.divContentWidgetAvecCss` sont
   neutralisées. `.spanCalendJour_depart` fait partie des rares règles NON
   scopées, et elle est en `!important` (vert #bddf03). Vérifié le 05/09 :
   c'est la SEULE règle tierce qui nous dispute un état. */
#calendrier-gdf table.calend td span.spanCalendJour_depart,
#calendrier-gdf .spanCalendVisuel.spanCalendJour_depart{
  --etat-filet:var(--or-filet);
  background:linear-gradient(135deg,var(--gris-texte) 0 47%,var(--blanc) 47%)!important;
}
/* Dates passées */
#calendrier-gdf table.calend td span.spanCalendJour_avantDatePossible{
  --etat-texte:var(--gris-texte); opacity:.55;   /* .3 donnait 1,59:1 */
}
/* Doublons du 1er de chaque mois (classe _by_lettre_Z, sans état) : le widget
   les masque déjà en inline, on ne les rend jamais visibles par accident. */
#calendrier-gdf table.calend td span.canlendrier_classe_by_lettre_Z{visibility:hidden}

/* ─── 5. Légende ───────────────────────────────────────────────────────── */
/* Le widget masque la légende derrière un bouton « Afficher la légende » :
   on retire le bouton et on montre la légende en permanence — c'est la clé de
   lecture du calendrier, elle ne se mérite pas. (style inline → !important) */
#calendrier-gdf .divBtLegendeCalendrierWidget{display:none}
#calendrier-gdf .calendItea_legende{
  display:block!important;
  margin:2.1vw 0 0;padding:1.4vw 0 0;border-top:1px solid var(--or-filet);
}
/* Écart entre items = 3× l'écart interne d'un item (.45em) : sans ce rapport,
   on ne sait pas à quelle étiquette appartient une pastille. */
#calendrier-gdf .ul_legendeCalend{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6em 1.4em; justify-content:center;
}
/* La légende du widget énumère les CINQ états du catalogue ITEA. Comptés sur
   les 5 mois chargés : « arrivée possible sur demande », « départ possible » et
   la 2ᵉ pastille de « Sur demande » font ZÉRO occurrence, et le mois d'ouverture
   n'en contient que deux. On n'affiche donc que ce qui est à l'écran — c'est le
   cœur du « je ne comprends pas tout ».
   Le filtre porte sur l'HORIZON COMPLET et non sur le mois affiché : sinon la
   légende changerait de hauteur à chaque clic de flèche. Une clé de lecture se
   lit une fois ; une clé mouvante se relit à chaque fois. */
#calendrier-gdf .calendItea_li_legende{
  display:none; align-items:center; gap:.45em;
  font-size:var(--t-s); color:var(--gris-texte);
}
#calendrier-gdf:has(td span.spanCalendCliquable)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendCliquable),
#calendrier-gdf:has(td span.spanCalendJour_occupe)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendJour_occupe),
#calendrier-gdf:has(td span.spanCalendJour_libre)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendJour_libre),
#calendrier-gdf:has(td span.spanCalendJour_depart)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendJour_depart),
#calendrier-gdf:has(td span.spanCalendJour_contact)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendJour_contact),
#calendrier-gdf:has(td span.spanCalendJour_inconnu)
  .calendItea_li_legende:has(.spanCalendVisuel.spanCalendJour_inconnu){
  display:flex;
}
/* L'item « Sur demande » porte DEUX pastilles séparées par un <span> vide.
   ITEA masque la première de son côté ; on fait pareil. */
#calendrier-gdf .calendItea_li_legende .spanCalendVisuel.spanCalendJour_contact{display:none}
/* ⚠️ `border-width` + `border-style` SÉPARÉS, jamais le raccourci `border`.
   Le raccourci réinitialise `border-color`, et à spécificité égale (1,1,0) avec
   la règle d'état de §4 c'est lui qui gagnait, étant plus bas dans le fichier.
   Résultat mesuré le 06/09 : la pastille « Libre » de la légende était
   INVISIBLE — fond transparent ET bordure transparente, 1,00:1. */
#calendrier-gdf .spanCalendVisuel{
  display:inline-block; width:1.5em; height:1.5em; line-height:1.5em;
  border-width:2px; border-style:solid;
  /* ⚠️ AUCUN `border-color` ici. Même à spécificité égale (1,1,0), cette règle
     est plus bas dans le fichier que celle de §4 qui pose
     `border-color:var(--etat-filet)` : toute couleur écrite ici gagnerait et
     la pastille redeviendrait invisible. C'est exactement le bug du 06/09. */
  text-indent:-9999px; overflow:hidden; flex:0 0 auto;
}
#calendrier-gdf .spanCalendLibOu{display:none}  /* séparateur vide dans le DOM */

/* ─── 6. Le lien partenaire, puis les deux CTA ─────────────────────────
   Ordre voulu par Jocelyn (05/09) : Gîtes de France d'abord, en lien de
   texte ; « Réserver en direct » et « Nous contacter » ensuite, en boutons
   pleins, chacun dépliant SON formulaire. */
.liens-resa{list-style:none;margin:1.4vw 0 0;padding:0;font-size:var(--t-base)}
.liens-resa li{margin:0 0 .6em;padding-left:1em;text-indent:-1em}
.liens-resa li::before{content:"–";color:var(--or-filet);margin-right:.45em}
.liens-resa a{color:var(--or-texte);text-decoration:none;border-bottom:1px solid var(--or-filet)}
.liens-resa a:hover,.liens-resa a:focus-visible{color:var(--gris-texte);border-bottom-color:var(--gris-texte)}
.liens-resa a:focus-visible{outline:2px solid var(--or-texte);outline-offset:3px}
/* (La règle qui grisait le 2e lien inactif a été retirée le 08/09 : ce lien est
   devenu un vrai CTA, « Réserver avec Gîtes de France », qui déplie le widget
   de réservation. `.liens-resa` reste défini, la liste n'est plus utilisée.) */

/* Les CTA. On les fait en <a> et non en <button> : `style.css:129` impose
   `button{background-color:…!important; width:100%!important}` à tout le site,
   qu'on n'a aucune raison de combattre ici. Un lien s'habille librement. */
.cta-resa{display:flex;flex-wrap:wrap;gap:1vw;margin:1.8vw 0 0;justify-content:center}
.cta-resa .cta{
  display:inline-block; font-family:Limelight,sans-serif; font-size:var(--t-nav);
  letter-spacing:.03em; line-height:1.2;
  background:var(--or-texte); color:var(--blanc);       /* 6,54:1 */
  border:1px solid var(--or-texte); text-decoration:none;
  padding:.85em 2.2em; cursor:pointer;
}
.cta-resa .cta::after{content:" ▾";margin-left:.5em;font-family:system-ui,sans-serif}
.cta-resa .cta[aria-expanded="true"]::after{content:" ▴"}
/* Survol ET état ouvert : aplat d'or FONCÉ, texte blanc. L'état ouvert se lit
   par le changement de FOND, pas seulement par le chevron. */
.cta-resa .cta:hover,
.cta-resa .cta:focus-visible,
.cta-resa .cta[aria-expanded="true"]{
  background:var(--or-fond); color:var(--blanc); border-color:var(--or-fond);
}
.cta-resa .cta:focus-visible{outline:2px solid var(--or-texte);outline-offset:3px}

/* ─── 7. Le formulaire, en dépliant sous le calendrier ─────────────────── */
#contact .bloc-form{margin-top:2vw;border-top:var(--filet-fin) solid var(--or-filet);padding-top:1.6vw}
#contact .bloc-form[hidden]{display:none}

/* ─── 7bis. Le formulaire WPForms à la charte ──────────────────────────
   Le site sert le markup MODERNE de WPForms (`wpforms-render-modern`) :
   il s'habille par variables CSS. Noms relevés dans
   wp-content/plugins/wpforms/assets/css/frontend/modern/*.css — pas de mémoire. */
#contact .bloc-form .wpforms-container{
  --wpforms-field-border-color:var(--or-filet);
  --wpforms-field-border-size:1px;
  --wpforms-field-border-radius:3px;
  --wpforms-field-background-color:var(--blanc);
  --wpforms-field-text-color:var(--gris-texte);
  --wpforms-label-color:var(--gris-texte);
  --wpforms-label-sublabel-color:var(--or-texte);
  --wpforms-label-error-color:#7F5512;      /* était le rouge #d63637 */
  --wpforms-button-background-color:var(--or-texte);
  --wpforms-button-border-radius:0;
  --wpforms-button-border-size:0;
  --wpforms-button-text-color:var(--blanc);
  --wpforms-button-background-color-alt:var(--or-filet);
  --wpforms-button-text-color-alt:#000;
  margin:0; padding:0;
}
#contact .bloc-form .wpforms-field-label{font-family:'Poiret One',sans-serif}
/* Le bouton. Deux règles tierces se disputent son fond, toutes deux mesurées
   le 05/09 :
     · WPForms peint l'état AU REPOS avec `--wpforms-button-…-color-alt`
       (et non la variable de base) ;
     · surtout, style.css:129 du thème enfant impose `button{background-color:
       var(--e-global-color-6142f10) !important}` — l'or #DCA44C sur TOUS les
       boutons du site. Blanc sur cet or = 2,22:1, très en dessous de AA (4,5).
   On suit ici la MAQUETTE pour l'état au repos : bronze/blanc (6,54:1).
   Le survol passe en or foncé #A9762A, texte blanc. Le `!important`
   sert uniquement à passer devant la règle globale du thème ; on ne touche ni
   à sa taille, ni à sa largeur, ni à ses marges.
   ⚠️ Les AUTRES boutons du site restent en blanc sur or : point à arbitrer
   globalement avec Jocelyn, hors périmètre de cette section. */
#contact .bloc-form button.wpforms-submit{
  font-family:Limelight,sans-serif; letter-spacing:.03em;
  background-color:var(--or-texte)!important; color:var(--blanc)!important;
}
#contact .bloc-form button.wpforms-submit:hover,
#contact .bloc-form button.wpforms-submit:focus-visible{
  background-color:var(--or-fond)!important; color:var(--blanc)!important;
}
/* Les champs eux-mêmes. WPForms remet `border:0` sur tout le contenu du
   conteneur (`div.wpforms-container-full *`), si bien que les champs de ce
   formulaire n'ont AUCUNE bordure visible : mesuré le 05/09, `0px none`,
   19px de haut, une simple ligne de texte sans boîte. On applique le
   traitement de la maquette : filet or, 3px de rayon, respiration interne. */
#contact .bloc-form .wpforms-container input[type="text"],
#contact .bloc-form .wpforms-container input[type="email"],
#contact .bloc-form .wpforms-container input[type="tel"],
#contact .bloc-form .wpforms-container input[type="url"],
#contact .bloc-form .wpforms-container input[type="number"],
#contact .bloc-form .wpforms-container select,
#contact .bloc-form .wpforms-container textarea{
  border:1px solid var(--or-filet); border-radius:3px;
  padding:.7em .85em; background:var(--blanc); color:var(--gris-texte);
  width:100%; box-sizing:border-box; line-height:1.3;
}
#contact .bloc-form .wpforms-container textarea{min-height:6em}
#contact .bloc-form .wpforms-container input:focus,
#contact .bloc-form .wpforms-container select:focus,
#contact .bloc-form .wpforms-container textarea:focus{
  outline:2px solid var(--or-texte); outline-offset:1px; border-color:var(--or-texte);
}
/* L'astérisque des champs obligatoires était en rouge vif (#d63637) :
   même correction que celle passée sur la maquette le 22/08. */
#contact .bloc-form .wpforms-required-label{color:var(--or-texte)}

/* 16px minimum sur les champs : en dessous, Safari iOS zoome au focus. */
#contact .bloc-form .wpforms-container input,
#contact .bloc-form .wpforms-container select,
#contact .bloc-form .wpforms-container textarea{font-size:16px}

/* Filet de sécurité sur la hauteur des <select>.
   `style.css` lignes 184, 185 et 190 portaient des sélecteurs multiples dont
   seul le PREMIER était scopé sur `#elementor-popup-modal-1724` : tous les
   champs WPForms du site héritaient de tailles en vw calibrées pour le desktop
   (select à 10 px de haut sur un iPhone, libellés de radio à 3,4 px).
   ✅ Corrigé à la source le 05/09 — les trois règles sont désormais scopées sur
   la popup. On garde cette surcharge : elle ne coûte rien et met la section à
   l'abri si quelqu'un ré-ouvre la brèche. */
#contact .bloc-form .wpforms-container select{
  padding:.7em .85em!important; line-height:1.3!important;
  height:auto!important; min-height:0!important;
}

/* ─── 7ter. La durée du séjour, grisée tant que la date n'est pas choisie ─
   Elle se rouvre une fois la date connue, avec les seules durées tenables. */
#contact .bloc-form .wpforms-container select:disabled{
  background:#F4F2EE; color:#8A8A8A; border-color:#D8D2C6; cursor:not-allowed;
}
#contact .bloc-form .aide-duree{
  margin:.4em 0 0; font-size:var(--t-xs); line-height:1.35; color:var(--or-texte);
}
#contact .bloc-form .aide-duree:empty{display:none}

/* ─── 8. Mobile — la typo en vw devient illisible sous 1024px ──────────── */
@media(max-width:1024px){
  #contact .contenu{
    --t-xs:2.6vw; --t-s:3.2vw; --t-base:4vw; --t-nav:4vw; --t-m:5vw;
    --filet-fin:2px; --filet-fort:4px;
  }
  /* Sur mobile, la CSS du site ramène h2 et h3 à la même taille : la
     hiérarchie s'aplatit. On rétablit l'écart de la maquette (5,8 / 5 vw). */
  #contact h2{font-size:5.8vw!important;line-height:1.15}
  #contact .bloc-form .aide-duree{font-size:var(--t-s)}
  #calendrier-gdf{padding:4vw;min-height:0}
  .cta-resa{gap:3vw;margin:5vw 0 0}
  .cta-resa .cta{flex:1 1 100%;text-align:center;padding:1em 1.2em}
  /* La légende en 2,6vw tombait à 9,75px sur un iPhone : sous le seuil de
     lisibilité. On la repasse à la taille du corps de texte mobile. */
  #calendrier-gdf .calendItea_li_legende{font-size:var(--t-s)}
  #calendrier-gdf .ul_legendeCalend{gap:.6em 1em}
  /* Trois mois de front sont intenables sous 1024px : on les empile. Les trois
     restent lisibles et la navigation continue de paginer par trois — mieux
     qu'en masquer deux, qui ferait sauter le calendrier de 3 mois en n'en
     montrant qu'un. */
  #calendrier-gdf .calendItea_listMois .calendItea_ul{flex-direction:column;gap:6vw}
}

/* ═══ La boîte de réservation Gîtes de France ═══════════════════════════
   Repliée par `height:0;overflow:hidden`, jamais par `display:none`.
   Raison mesurée le 08/09 : le script d'ITEA rend bien le widget dans les
   deux cas, mais sous `display:none` le `scrollHeight` du conteneur vaut 0 —
   la hauteur cible devient impossible à lire, donc pas de dépliage animé
   possible, ni maintenant ni plus tard. Sous `height:0` elle vaut déjà 752.
   ⚠️ Et surtout : le <div data-widget-itea="resa"> DOIT être présent dans le
   HTML servi. Le script d'ITEA scanne le DOM UNE SEULE FOIS au chargement et
   ne re-scanne jamais — un widget injecté au clic ne se rend pas du tout
   (testé : 0 jour rendu). On replie, on n'injecte pas.

   Amélioration progressive, comme les deux autres blocs : la boîte est
   OUVERTE dans le HTML servi et c'est le JS qui la replie. Sans JS, le widget
   de réservation reste accessible et les CTA redeviennent de simples ancres. */
#bloc-gdf{margin-top:1.8vw;padding-top:1.6vw;
  border-top:var(--filet-fin) solid var(--or-filet)}
/* (repli déplacé plus bas, en max-height — voir « Dépliage animé ») */

/* Le widget de réservation garde SA propre charte — on ne le repeint pas.
   C'est un tunnel qui manipule des dates, des coordonnées et de l'argent :
   le jour où Gîtes de France change sa CSS, une surcharge de notre part
   casserait le formulaire sans qu'on le voie. Le visiteur doit d'ailleurs
   VOIR qu'il change de maison. Seule la boîte autour est à nous. */
#bloc-gdf .bloc-gdf__intro{
  font-size:var(--t-base); color:var(--gris-texte); line-height:1.5;
  margin:0 0 1.2vw; padding-left:.9em; border-left:var(--filet-fort) solid var(--or-filet);
}
#bloc-gdf .bloc-gdf__intro strong{color:var(--or-texte);font-weight:600}

/* SEULE entorse à « on ne touche pas à leur widget » : leur conteneur est en
   `margin:auto`, donc centré. Or toute la section — titres, texte, cadre du
   calendrier, CTA — est calée sur UN axe à gauche, choix explicite du 05/09
   pour ne pas créer un troisième axe vertical. On replace la boîte sur cet
   axe, et rien d'autre : c'est du POSITIONNEMENT, pas de l'habillage. Leurs
   couleurs, leurs typos et leur mise en page interne restent les leurs. */
#bloc-gdf .widgetIteaCalendrierDispo{
  margin-left:0; margin-right:0;
  /* ⚠️ Et une LIMITE de largeur, sans quoi le widget s'étire à 100 % du bloc :
     sur un écran large les deux mois deviennent énormes pendant que les
     sélecteurs et le bouton « Réserver » restent à leur largeur naturelle —
     l'ensemble se disloque (constaté par Jocelyn le 08/09 au soir).
     Valeur RÉGLÉE PAR JOCELYN dans le navigateur le 08/09 : 65vw, et non un
     multiple de --t-s comme ailleurs dans ce fichier. C'est délibéré — ne pas
     « harmoniser » en em. Le repli mobile plus haut (width/max-width:100%)
     passe après dans la cascade et continue de gagner sous 1024px. */
  max-width:65vw;
  width:100%;
}

/* Le calendrier d'affichage se replie quand la boîte GDF s'ouvre : le widget
   de réservation embarque son PROPRE calendrier, et deux calendriers côte à
   côte donnent deux sources de vérité à l'écran. */
/* (repli déplacé plus bas, en max-height — voir « Dépliage animé ») */

/* ═══ Dépliage animé (slide) ════════════════════════════════════════════
   Fait en `max-height` et non en `height` : une hauteur ne s'anime pas depuis
   `auto`, il faudrait la mesurer en JS puis la poser en pixels — et cette
   mécanique casse dès que la page n'est pas composée (onglet en arrière-plan) :
   `requestAnimationFrame` ne tourne pas, le bloc reste figé fermé. Reproduit le
   08/09. `max-height` n'a pas ce défaut : au pire l'animation est sautée, mais
   le bloc s'ouvre toujours.
   Le plafond est réglé un peu au-dessus de la hauteur réelle de chaque bloc :
   trop haut, la fin du glissement se ferait dans le vide. */
#calendrier-gdf,
#bloc-gdf,
#contact .bloc-form{
  overflow:hidden;
  transition:max-height .40s cubic-bezier(.4,0,.2,1),
             opacity .26s ease,
             padding .40s cubic-bezier(.4,0,.2,1),
             margin .40s cubic-bezier(.4,0,.2,1),
             border-width .40s cubic-bezier(.4,0,.2,1);
}
#calendrier-gdf{max-height:1400px}
#bloc-gdf{max-height:1400px}
#contact .bloc-form{max-height:2400px}   /* les formulaires sont les plus hauts */

#calendrier-gdf.replie,
#bloc-gdf.replie,
#contact .bloc-form.replie{max-height:0;opacity:0}

/* Le repli doit aussi effacer cadres et espacements, sinon un bloc « fermé »
   laisse un liseré et une gouttière derrière lui. */
#calendrier-gdf.replie{border-width:0;padding:0;margin:0}
#bloc-gdf.replie{margin:0;padding:0;border-top-width:0}
#contact .bloc-form.replie{padding-top:0;margin-top:0;border-top-width:0}

/* Respect du réglage système « réduire les animations » : dépliage instantané
   pour qui en a besoin — vestibulaire, migraine, préférence. */
@media(prefers-reduced-motion:reduce){
  #calendrier-gdf,
  #bloc-gdf,
  #contact .bloc-form{transition:none}
}

/* ─── Les rangées de sélecteurs du widget de réservation ───────────────
   Réglage de Jocelyn (08/09) : `display:flex` en GARDANT le `max-width:400px`
   d'ITEA. Le formulaire reste donc à sa largeur d'origine, centré sous le
   calendrier — on ne l'étire pas à la largeur du calendrier (essayé, écarté).
   Ce qu'on corrige : ces deux rangées retombaient en `display:block`, et les
   trois listes (jour/mois/année, adultes/enfants/bébé) s'empilaient les unes
   sous les autres au lieu de tenir sur une ligne.
   ⚠️ Surcharge de LEUR widget, limitée à la géométrie : pas une couleur, pas
   une typo, pas un état. Si Gîtes de France remanie sa CSS, le pire est un
   formulaire mal aligné — jamais un tunnel cassé. */
#bloc-gdf .div_itea_widget_resa_datedeb,
#bloc-gdf .div_itea_widget_resa_capa{
  display:flex; max-width:400px; gap:.5em;
}
#bloc-gdf .div_itea_widget_resa_datedeb > select,
#bloc-gdf .div_itea_widget_resa_capa > select{flex:1 1 0;min-width:0}

/* ─── Repli mobile du widget de réservation ────────────────────────────
   ⚠️ DOIT rester APRÈS `#bloc-gdf .widgetIteaCalendrierDispo{max-width:65vw}`.
   Les deux règles ont la même spécificité (un id + une classe) : à égalité,
   c'est la DERNIÈRE écrite qui gagne. Placée plus haut — sa position d'origine —
   elle était écrasée par la règle de base, et 65vw donnait un calendrier de
   244 px de large sur un iPhone. Ne pas la remonter avec les autres règles
   mobiles du § 8. */
@media(max-width:1024px){
  #bloc-gdf .widgetIteaCalendrierDispo{width:100%;max-width:100%}
}

/* ═══ 6. Page /reservation/ — tout tient dans un écran ══════════════════
   Demande de Jocelyn, 11/09/2026 : pas de scroll à l'arrivée sur la page
   de réservation, et plus de filet doré en haut de page.
   ⚠️ On ne touche QU'AUX ESPACEMENTS et aux deux bordures hautes.
   Aucune couleur, aucune typographie, aucune taille de texte n'est modifiée.
   Les valeurs sont en clamp() : elles se resserrent sur les écrans courts
   et retrouvent leur ampleur sur les grands. Sur un écran vraiment trop
   court, la page redevient scrollable plutôt que de rogner le contenu
   (`min-height`, jamais `height`).
   Retour arrière : supprimer ce bloc §6. */

/* Les deux filets dorés du haut (5px, empilés sur les deux conteneurs). */
/* Spécificité : Elementor sort `.elementor-1870 .elementor-element.elementor-element-XXX`
   (0,3,0). Il faut donc doubler la classe pour passer devant. */
body.page-id-1870 .elementor-element.elementor-element-1d2fe89,
body.page-id-1870 .elementor-element.elementor-element-35e98b7{border-top-width:0}

/* Le conteneur occupe l'écran et centre son contenu verticalement. */
body.page-id-1870 .elementor-element-1d2fe89,
body.page-id-1870 .elementor-element-35e98b7{min-height:100vh}
body.page-id-1870 .elementor-element-35e98b7{
  justify-content:center;
  padding-top:clamp(.5rem,2vh,2.5rem);
  padding-bottom:clamp(.5rem,2vh,2.5rem)}

/* Resserrement des respirations, du plus haut au plus bas. */
body.page-id-1870 .elementor-element-74c4bd0 .elementor-widget-container{margin-bottom:clamp(.25rem,1.2vh,1.7rem)}
body.page-id-1870 #calendrier-gdf{
  padding-top:clamp(.35rem,1.2vh,1.8rem);
  padding-bottom:clamp(.35rem,1.2vh,1.8rem)}
body.page-id-1870 .cta-resa{margin-top:clamp(.5rem,1.6vh,1.6rem)}