/* Variante « classique » de l'accueil : mise en page de l'ancien site (en-tête blanc,
   hero pleine largeur centré, vague, bandes alternées blanc cassé / sable).
   Chargée uniquement par pages/accueil-classique.php, après site.css. */


/* En-tête blanc pleine largeur (le fond déborde du conteneur centré). */
.p-classique .entete { color: var(--bleu-marine); position: relative; z-index: 20; padding-top: 14px; padding-bottom: 14px; }
/* Fond blanc pleine largeur par un pseudo-élément, PAS par clip-path : un clip-path rognait le menu
   déroulant mobile (qui sort de l'en-tête), d'où un menu « qui ne fait rien » sur iPhone. */
.p-classique .entete::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--blanc); z-index: -1; box-shadow: 0 1px 0 var(--filet); }
.p-classique .marque, .p-classique .marque:hover { color: var(--bleu-marine); }
.p-classique .marque-lieu { color: var(--bleu-lien); opacity: 1; font-family: var(--titre); }
.p-classique .menu a { color: var(--bleu-marine); font-weight: 400; }
.p-classique .menu a:hover, .p-classique .menu a[aria-current="page"] { background: var(--sable-clair); color: var(--bleu-marine); }
.p-classique .btn-entete { background: var(--bleu-marine); color: var(--blanc); }
.p-classique .btn-entete:hover { background: var(--bleu-marine-fonce); color: var(--blanc); }
.p-classique .menu-bouton { border-color: var(--bleu-marine); background: transparent; color: var(--bleu-marine); }
.p-classique .entete .marque-logo path[stroke="#ffffff"], .p-classique .entete .marque-logo g[stroke="#ffffff"] { stroke: var(--bleu-marine); }
.p-classique .entete .marque-logo path[fill="none"][stroke="#ffffff"] { fill: var(--blanc); }

/* Le panneau devient la page entière, sans carte ni marge. */
.p-classique .panneau { max-width: none; width: 100%; border-radius: 0; padding: 0; box-shadow: none; }
.p-classique .panneau > section { margin-left: 0; margin-right: 0; }

/* ---------- Hero ---------- */
.cl-hero { position: relative; isolation: isolate; min-height: clamp(560px, 82vh, 720px); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--blanc); padding: 70px 20px 130px; overflow: hidden; }
.cl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; z-index: -2; }
.cl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 42, 69, .62), rgba(30, 58, 95, .58) 60%, rgba(21, 42, 69, .7)); }
.cl-hero-contenu { max-width: 1040px; }
.cl-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: var(--rayon-pilule); background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45); backdrop-filter: blur(6px); font-size: .98rem; margin-bottom: 28px; }
.cl-badge .ico { width: 16px; height: 16px; color: var(--dore); }
.cl-hero h1 { color: var(--blanc); font-weight: 700; font-size: clamp(2.6rem, 6.4vw, 4.6rem); line-height: 1.05; margin-bottom: 22px; }
.cl-hero h1 span { color: var(--dore); display: inline-block; }
.cl-hero-texte { font-size: clamp(1.05rem, 1.7vw, 1.3rem); max-width: 40em; margin: 0 auto 34px; color: rgba(255, 255, 255, .95); }
.cl-boutons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 40px; }
.cl-btn { min-height: 56px; padding: .8em 2em; text-transform: uppercase; letter-spacing: .1em; font-size: .92rem; }
.cl-atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; }
.cl-atouts li { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.cl-atouts .ico { width: 20px; height: 20px; color: var(--dore); }
.cl-vague { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 80px); }

/* ---------- Réassurance (sable, 3 colonnes) ---------- */
.cl-reassurance { background: var(--sable-clair); padding: 34px 20px; }
.cl-reassurance ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cl-reassurance li { display: flex; align-items: center; gap: 16px; justify-content: center; }
.cl-reassurance .ico { width: 40px; height: 40px; color: var(--dore); flex: none; }
.cl-reassurance li:last-child .ico { color: var(--bleu-logo); }
.cl-reassurance div { display: flex; flex-direction: column; }
.cl-reassurance strong { color: var(--bleu-marine); font-size: 1.12rem; }
.cl-reassurance span { color: var(--gris-doux); font-size: .95rem; }

/* ---------- Sections ---------- */
.cl-section { padding: clamp(56px, 8vw, 100px) clamp(18px, 5vw, 48px); }
.cl-section > * { max-width: 1160px; margin-left: auto; margin-right: auto; }
.cl-sable { background: var(--sable-clair); }
.cl-centre { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.cl-centre h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); margin-bottom: 14px; }
.cl-centre p { max-width: 56ch; margin: 0 auto; color: var(--gris-doux); }

.cl-logements { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 34px); }
.cl-logement { background: var(--blanc); border-radius: 22px; overflow: hidden; box-shadow: var(--ombre-douce); display: flex; flex-direction: column; }
.cl-logement-photo { position: relative; display: block; aspect-ratio: 4 / 3; }
.cl-logement-photo img { width: 100%; height: 100%; object-fit: cover; }
.cl-pastille { position: absolute; top: 16px; left: 16px; padding: 7px 14px; border-radius: var(--rayon-pilule); background: var(--dore); color: var(--bleu-marine); font-weight: 700; font-size: .88rem; }
.cl-logement-corps { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cl-logement-corps h3 { font-size: 1.6rem; }
.cl-logement-corps h3 a { color: inherit; text-decoration: none; }
.cl-logement-corps h3 a:hover { color: var(--bleu-lien); }
.cl-logement-corps p { margin: 0; }
.cl-logement-pied { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cl-logement-pied .prix strong { font-size: 2rem; }

.cl-recherche { margin-top: 0; width: 100%; }

.cl-grille-atouts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px; }
.cl-grille-atouts li { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cl-grille-atouts .atout-ico { width: 56px; height: 56px; padding: 14px; border-radius: 50%; background: var(--sable-clair); color: var(--bleu-marine); }
.cl-grille-atouts h3 { font-size: 1.2rem; }
.cl-grille-atouts p { margin: 0; max-width: 30ch; color: var(--gris-texte); }

.cl-note { font-family: var(--titre); font-size: 1.6rem; color: var(--bleu-marine); }
.cl-avis { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.cl-piste { max-width: 1160px; }
.cl-sous-piste { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 26px; margin-bottom: 0; }
.cl-faq { max-width: 820px; }

.p-classique .panneau > .cl-fin { margin: 0; border-radius: 0; padding: clamp(56px, 7vw, 90px) 20px; }

@media (max-width: 860px) {
  .cl-reassurance ul { grid-template-columns: 1fr; gap: 16px; max-width: 360px; }
  .cl-reassurance li { justify-content: flex-start; }
  .cl-logements, .cl-avis { grid-template-columns: 1fr; }
  .cl-grille-atouts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cl-hero { padding: 48px 18px 100px; min-height: 600px; }
  .cl-btn { width: 100%; }
  .cl-grille-atouts { grid-template-columns: 1fr; }
  .cl-atouts { flex-direction: column; align-items: center; gap: 10px; }
}

/* ---------- Pages intérieures : bandeau, conteneur centré, bandes pleine largeur ---------- */
.p-classique .panneau { padding-bottom: clamp(48px, 6vw, 80px); }
.p-accueil .panneau { padding-bottom: 0; }
/* Tout ce qui n'est pas une bande pleine largeur vit dans un conteneur centré. */
.p-classique .panneau > :not(.cl-hero):not(.cl-reassurance):not(.cl-section):not(.cl-fin):not(.pleine):not(.texte-legal) {
  max-width: 1256px; margin-left: auto; margin-right: auto; padding-left: clamp(18px, 5vw, 48px); padding-right: clamp(18px, 5vw, 48px);
}
.p-classique .panneau > .texte-legal { padding: 0 20px; }
.cl-bandeau { min-height: clamp(340px, 50vh, 470px); padding: 60px 20px 110px; }
.cl-bandeau h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); margin-bottom: 16px; }
.cl-bandeau .cl-hero-texte { margin-bottom: 0; max-width: 46em; }
.p-classique .fiche-tete { display: block; margin-top: clamp(24px, 3vw, 40px); }
.p-classique .fiche-tete .faits { margin-bottom: 18px; }
.p-classique .resa-fiche { background: none; border-radius: 0; padding: 0; margin-top: 0; }
.p-classique .cl-section.pleine { margin-top: clamp(48px, 6vw, 80px); }
.cl-dans-sable { margin-top: 0; }
@media (max-width: 560px) {
  .cl-bandeau { min-height: 300px; padding: 44px 18px 80px; }
}

/* ---------- Sélecteur de langue : déroulant compact, coins doux ---------- */
.langue-choix { position: relative; order: 3; margin-left: 4px; }
.langue-choix summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid var(--filet); border-radius: 6px; background: var(--blanc); color: var(--bleu-marine); font-weight: 700; font-size: .9rem; cursor: pointer; }
.langue-choix summary::-webkit-details-marker { display: none; }
.langue-choix summary:hover { border-color: var(--bleu-marine); }
.langue-choix .chevron { width: 11px; height: 8px; transition: transform .2s; }
.langue-choix[open] .chevron { transform: rotate(180deg); }
.drapeau { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.langue-choix ul { list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 170px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 6px; box-shadow: var(--ombre-flottante); }
.langue-choix ul a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 4px; color: var(--bleu-marine); text-decoration: none; font-weight: 400; }
.langue-choix ul a:hover { background: var(--sable-clair); }
.langue-choix ul a[aria-current="true"] { font-weight: 700; background: var(--sable-clair); }
.p-classique .btn-entete { order: 2; }
.p-classique .menu { order: 1; }
@media (max-width: 860px) {
  .langue-choix { order: 0; margin-left: auto; }
  .langue-choix summary { padding: 0 8px; gap: 6px; }
  .p-classique .marque { margin-right: 0; min-width: 0; }
  .menu-bouton { order: 1; flex: none; }
}
@media (max-width: 380px) {
  .p-classique .marque-nom { font-size: 1.12rem; }
  .p-classique .marque-lieu { font-size: .72rem; }
  .p-classique .marque-logo { width: 30px; height: 35px; }
  .p-classique .entete { gap: 8px; }
}

/* ---------- Dates : iOS Safari donne une largeur minimale propre aux champs date ---------- */
input[type="date"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: block; width: 100%; max-width: 100%; min-width: 0; height: 50px; line-height: 50px; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.recherche input[type="date"] { height: 44px; line-height: 44px; }
.recherche-duo > div, .champ { min-width: 0; }
@media (max-width: 520px) {
  .recherche-duo { grid-template-columns: 1fr; gap: 6px; }
  .champs-sejour { grid-template-columns: 1fr; }
}

/* ---------- Bloc final et pied de page : moins de vide ---------- */
.p-classique .pied { padding-top: clamp(28px, 4vw, 44px); padding-bottom: 28px; }
.p-classique .pied-bas { margin-top: clamp(20px, 3vw, 32px); padding-top: 18px; }
.p-classique .panneau > .cl-fin { padding: clamp(40px, 5vw, 64px) 20px; }
@media (max-width: 760px) {
  .p-classique .pied-scene { gap: 10px 16px; }
  .p-classique .tampon { width: 92px; }
  .p-classique .signature { font-size: 1.8rem; }
}

/* ---------- Mobile : un seul bouton dans le hero, la suite se devine, barre d'action après le bandeau ---------- */
@media (max-width: 760px) {
  .cl-hero:not(.cl-bandeau) { min-height: 0; padding: 36px 18px 76px; }
  .cl-hero .cl-btn + .cl-btn { display: none; }
  .cl-boutons { margin-bottom: 22px; }
  .cl-hero h1 { font-size: clamp(2.3rem, 10vw, 3rem); margin-bottom: 14px; }
  .cl-hero-texte { margin-bottom: 22px; font-size: 1.02rem; }
  .cl-badge { margin-bottom: 18px; padding: 8px 16px; font-size: .9rem; }
  .cl-atouts { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
  .cl-atouts li { font-size: .9rem; }
  .barre-mobile { transform: translateY(110%); transition: transform .25s ease; }
  .apres-bandeau .barre-mobile { transform: none; }
}

/* Un numéro de téléphone ne se coupe jamais. */
a[href^="tel:"] { white-space: nowrap; }

/* ---------- Calendrier robuste (WebKit iOS) : colonnes qui peuvent rétrécir, cases à hauteur fixe ----------
   aspect-ratio + min-height dans une grille 7 colonnes en 1fr : iOS élargissait les cases au-delà de
   leur colonne, elles se chevauchaient et sortaient du cadre. Vérifié avec le moteur WebKit, pas Chromium. */
.cal { width: 100%; min-width: 0; overflow: hidden; }
.cal-grilles, .cal-mois { min-width: 0; }
.cal-jours, .cal-jours-sem { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-jours { gap: 3px; }
.jour { aspect-ratio: auto; min-height: 0; height: 44px; width: 100%; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none; font-size: .92rem; line-height: 1; }
.jour.vide { height: 44px; }
@media (max-width: 700px) {
  .jour, .jour.vide { height: clamp(38px, 10.5vw, 48px); min-height: 0; font-size: .88rem; }
  .cal { padding: 12px 10px; }
  .cal-jours-sem span { font-size: .72rem; }
}

/* ---------- Champs date : visibles et lisibles même vides ---------- */
.date-champ { position: relative; display: block; min-width: 0; }
.date-champ input[type="date"] { background: var(--blanc); border: 1.5px solid #cfc5b3; border-radius: 6px; padding: 0 12px; color: var(--gris-texte); font-size: 1rem; }
.date-champ.vide input[type="date"] { color: transparent; }
.date-aide { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #77706a; pointer-events: none; font-size: 1rem; }
.date-champ:not(.vide) .date-aide { display: none; }
.recherche .date-champ input[type="date"] { height: 42px; line-height: 42px; border-radius: 6px; margin-top: 4px; }
.recherche .date-aide { top: calc(50% + 2px); font-size: .95rem; }

/* ---------- Champs obligatoires ---------- */
.obligatoire { color: #b42318; font-weight: 700; }
.mention-obligatoire { grid-column: 1 / -1; margin: 0; font-size: .92rem; color: var(--gris-doux); }
@media (max-width: 760px) { .recherche select, .recherche input, .date-champ input[type="date"], .champ input, .champ select, .champ textarea { font-size: 16px; } }
/* Listes déroulantes du formulaire : apparence native de WebKit neutralisée, même hauteur que les autres champs. */
.champ select { -webkit-appearance: none; appearance: none; height: 50px; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%231e3a5f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }