@charset "UTF-8";

/* ==========================================================================
   Casa Paradisu - Adaptations
   Les compositions asymetriques deviennent lineaires sans perdre leur
   hierarchie. Chaque palier a ete controle dans le navigateur.
   ========================================================================== */

/* ==========================================================================
   <= 1200px : on resserre les grilles les plus larges
   ========================================================================== */
@media (max-width: 1200px) {
  .around__body { grid-column: 1 / span 7; }
  .around__map  { grid-column: 8 / span 5; }

  .gallery-grid { columns: 3; }
}

/* ==========================================================================
   < 1200px : barre compacte et menu plein ecran
   La navigation complete n'est affichee que lorsque l'espace est reellement
   suffisant. En dessous, la barre se reduit a trois elements : le declencheur
   du menu deja present dans le projet, le logo, la disponibilite. C'est le
   SEUL palier ou la hauteur et la largeur interne de la barre changent :
   aucun autre bloc ne redefinit ces trois valeurs.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }

  :root { --header-h: 54px; }
  .site-header__inner { padding-inline: 20px; }
  .site-header__logo img { width: 96px; }

  /* --- Suite de l'accueil : grille de huit colonnes -------------------------
     Les compositions ne sont pas simplement retrecies : les colonnes sont
     redistribuees pour que chaque bloc garde une mesure de lecture juste. */
  body[data-page="accueil"] {
    --home-cols: 8;
    --home-gap: 20px;
    --home-pad: 32px;
    --home-space: 96px;
  }
  .home-section--open { padding-block: 96px; }

  .home-intro { row-gap: var(--sp-5); }
  .home-intro__label,
  .home-intro__title { grid-column: 1 / -1; }
  .home-intro__aside { grid-column: 3 / -1; margin-top: var(--sp-2); }

  .home-split__media { grid-column: 1 / span 5; }
  .home-split__body  { grid-column: 6 / -1; }
  .home-split--reverse .home-split__body  { grid-column: 1 / span 3; }
  .home-split--reverse .home-split__media { grid-column: 4 / -1; }

  .home-wide__body > .home-title { grid-column: 1 / span 3; }
  .home-wide__body > .home-text  { grid-column: 4 / -1; }

  .home-facts__head { grid-column: 1 / span 3; }
  .home-facts__list { grid-column: 4 / -1; }

  .home-gallery__lead { grid-column: 1 / span 5; }
  .home-gallery__side { grid-column: 6 / -1; }
}

/* ==========================================================================
   <= 1100px : composition centrale resserree
   ========================================================================== */
@media (max-width: 1100px) {
  .hero__progress { right: 40px; }
}

/* ==========================================================================
   <= 1024px : passage au menu mobile, colonnes reduites
   ========================================================================== */
@media (max-width: 1024px) {
  /* Le CTA fixe apparait, on reserve la place pour ne jamais masquer le contenu.
     La reserve n'est ajoutee que sur les pages qui portent reellement ce CTA :
     la page Contact en est depourvue pour ne pas gener la saisie. */
  .mobile-cta { display: block; }
  body:has(.mobile-cta) { padding-bottom: 4.75rem; }

  /* Une seule colonne : l'ordre du DOM s'applique, soit titre + texte,
     photographie, puis lien. */
  .editorial { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }

  .around__map,
  .around__body { grid-column: 1 / span 12; }
  /* En colonne unique la carte prenait toute la largeur, soit plus de 1100px
     de haut sur une tablette. Elle est plafonnee et reste calee a gauche, sur
     le meme axe que le texte. */
  .around__map .map-editorial { max-width: 30rem; }

  /* La paire editoriale devient une colonne unique, hierarchie preservee */
  .duo,
  .duo--wide-right,
  .duo--wide-left,
  .duo--even {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-7);
  }

  .signature { grid-template-columns: repeat(3, 1fr); }
  .signature__item:nth-child(3n) { border-right: 0; }
  .signature__item:nth-child(-n+3) { border-bottom: 1px solid var(--rule-soft); }

  /* Le resume d'estimation suit immediatement les calendriers, avant les
     explications tarifaires et les conditions. */
  .booking { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-8); }
  .booking__calendar,
  .booking__estimate,
  .booking__details { grid-column: 1; grid-row: auto; }
  .estimate { position: static; }

  /* Contact : sur mobile, le formulaire passe AVANT le resume pratique.
     Le visiteur ne traverse plus une repetition des informations de la villa
     avant d'atteindre le champ « Arrivée ». */
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-aside { position: static; order: 2; }
  .contact-layout > :not(.contact-aside) { order: 1; }

  /* Page Tarifs : le bouton fixe recouvrait une rangee de dates pendant la
     selection. La page porte deja son propre appel a l'action
     (« Continuer vers la demande »), juste sous l'estimation. */
  body[data-page="tarifs"] .mobile-cta { display: none; }
  body[data-page="tarifs"] { padding-bottom: 0; }

  /* Une colonne : le texte de l'espace precede sa photographie, y compris
     dans les sous-parties inversees sur grand ecran. Il faut donc annuler
     leur `grid-template-columns` propre ET leur `grid-row: 1`, sans quoi la
     photographie se superpose au texte sur la premiere rangee. L'ordre de
     lecture est ainsi le meme partout : titre, texte, caracteristiques,
     photographie, lien. */
  .space,
  .space--reverse { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }
  .space__head,
  .space__gallery,
  .space--reverse .space__head,
  .space--reverse .space__gallery { grid-column: 1; grid-row: auto; }

  .place { grid-template-columns: minmax(0, 1fr); }

  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__brand { grid-column: 1 / -1; margin-bottom: var(--sp-6); }

  /* --- Rangees a defilement horizontal ------------------------------------
     Filtres de galerie et sommaire de la page Villa. Des que la fenetre ne
     peut plus les tenir sur une ligne, ils se repartissaient sur deux, trois
     ou quatre lignes selon la largeur : la rangee changeait de forme a chaque
     palier. Ils deviennent une seule ligne qui defile au doigt.
     La navigation au clavier reste entiere : rien n'est masque, le conteneur
     defile de lui-meme quand le focus sort du cadre. */
  /* Le defilement lui-meme est declare en permanence (components.css) : il ne
     reste ici que le debord lateral, qui doit suivre la gouttiere du site pour
     que la rangee parte du meme axe que le reste du contenu. */
  .filters {
    gap: 0 var(--sp-5);
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }
  .filters--sub { margin-top: var(--sp-2); padding-top: var(--sp-2); }

  /* Indice de debord du sommaire de la page Villa. Celui des filtres de
     galerie est declare en permanence (components.css) : leur rangee peut
     deborder bien au-dela de ce palier. */
  .section-nav__list { position: relative; }
  .section-nav__list::after {
    content: "";
    position: absolute;
    top: 0; right: calc(var(--gutter) * -1); bottom: 0;
    width: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to right, rgba(244, 240, 231, 0), rgba(244, 240, 231, 0.94));
    opacity: 1;
    transition: opacity var(--dur) var(--ease);
  }
  .section-nav__list.is-end::after { opacity: 0; }

  .gallery-grid { columns: 2; }
}

/* ==========================================================================
   <= 768px : tablette portrait et grands mobiles
   ========================================================================== */
@media (max-width: 767.98px) {

  /* --- En-tete sur mobile ---------------------------------------------------
     La hauteur, la largeur interne et le logo sont deja fixes par le palier
     compact. Ne reste ici que le libelle court de la disponibilite, seul
     moyen de garder les trois zones sans collision. */
  .site-header__inner { gap: var(--sp-2); }
  .header-availability { gap: 8px; }
  .header-availability__long { display: none; }
  .header-availability__short { display: inline; }
  .header-availability__arrow { width: 14px; }

  /* --- Suite de l'accueil : grille de quatre colonnes -----------------------
     Tout s'empile, dans l'ordre de lecture voulu : la photographie d'abord,
     le contenu ensuite, y compris la ou le bureau inverse les deux. */
  body[data-page="accueil"] {
    --home-cols: 4;
    --home-gap: 16px;
    --home-pad: 20px;
    --home-space: 80px;
  }
  .home-section--open { padding-block: 80px; }

  /* Chaque placement du palier tablette est annule NOMMEMENT : une regle
     generique sur `.home-grid > *` serait moins specifique et laisserait
     certains blocs sur une seule colonne, trop etroite pour leur contenu. */
  .home-grid > *,
  .home-intro__label,
  .home-intro__title,
  .home-intro__aside,
  .home-split__media,
  .home-split__body,
  .home-wide__body > .home-title,
  .home-wide__body > .home-text,
  .home-facts__head,
  .home-facts__list,
  .home-gallery__lead { grid-column: 1 / -1; }

  /* Les deux echelles descendent d'un cran : a 40px, « contemporaine » tient
     dans une colonne de 335px sans etre coupe. L'interlignage se resserre en
     valeur absolue, comme sur le titre du hero. */
  .home-title {
    font-size: 40px;
    font-weight: var(--fw-light);
    line-height: 38px;
    letter-spacing: -1px;
  }
  .home-title--m {
    font-size: 36px;
    font-weight: var(--fw-light);
    line-height: 36px;
    letter-spacing: -1px;
  }

  .home-intro { row-gap: var(--sp-5); }
  .home-intro__aside { margin-top: var(--sp-2); gap: var(--sp-5); }

  .home-split { row-gap: 40px; }
  .home-split__body { align-self: start; }
  .home-split--reverse .home-split__media { order: -1; }

  .home-wide__media { height: auto; aspect-ratio: 4 / 5; }
  .home-wide__body { row-gap: var(--sp-5); }

  .home-facts { row-gap: 40px; }
  .home-facts__row { padding-block: 24px; }

  .home-gallery__head { margin-bottom: var(--sp-6); }
  .home-gallery__lead { grid-row: auto; }
  .home-gallery__side { grid-column: span 2; }

  .home-final { min-height: 0; padding-block: 96px; }
  .home-final__actions { gap: var(--sp-5); }

  /* --- Signature de marque -------------------------------------------------- */
  .hero-intro__title {
    max-width: calc(100vw - 32px);
    font-size: 40px;
    font-weight: var(--fw-light);
    line-height: 38px;
    letter-spacing: -1px;
  }
  .hero-intro__discover {
    width: auto;
    min-width: 170px;
    height: auto;
    min-height: 38px;
    margin-top: 30px;
    padding: 9px 15px;
    gap: 10px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.3px;
  }
  .hero-intro__discover svg { width: 18px; height: 18px; }

  /* --- Informations chiffrees des photographies ----------------------------
     Le libelle recoit une mesure : les deux formulations longues passent alors
     sur deux lignes, sous elles-memes, le chiffre restant a gauche et aligne
     sur le haut de la premiere ligne. */
  /* L'echelle reste portee par la ligne : le chiffre suit automatiquement a la
     moitie, sans seconde valeur a tenir a jour. */
  .hero-stat__line { gap: 8px; max-width: calc(100vw - 40px); font-size: 32px; }
  .hero-stat__label {
    max-width: 245px;
    line-height: 0.92;
    letter-spacing: -1px;
  }
  .hero__progress { right: 22px; gap: 8px; }
  .hero__progress span { height: 18px; }
  .hero__progress span.is-active { height: 28px; }
  .hero { min-height: 88svh; }
  .hero__content { max-width: 100%; }
  .hero__intro { max-width: 100%; }
  .hero__actions { gap: var(--sp-3); }
  .hero__actions .btn { flex: 1 1 auto; min-width: 0; }
  /* La commande de lecture reste en bas a droite, seulement rapprochee du
     bord : elle ne doit jamais etre confondue avec l'appel a l'action. */
  .hero__videobtn { bottom: var(--sp-5); right: var(--sp-4); }

  /* A 34px, l ombre calee pour un titre de 76px devient perceptible : elle est
     reduite de moitie. */
  .hero__title { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 4px 14px rgba(0, 0, 0, 0.14); }

  /* Le bloc de texte occupe ici pres de 70 % de la hauteur du hero, contre 40 %
     sur grand ecran : le degrade doit donc monter beaucoup plus haut, sinon le
     surtitre se retrouve exactement la ou il s eteint. Sa composante
     horizontale, elle, est reduite : sur une colonne unique, assombrir le bord
     gauche n a plus de sens. Mesure sous les lignes de texte : le surtitre
     passe de 1,22:1 a 1,98:1 et le titre de 3,56:1 a 5,54:1. */
  /* Sur la photographie d ouverture, un reflet clair traverse la ligne du
     surtitre : sous les lignes de texte, sa mediane est a 7:1 mais son 95e
     centile tombe a 1,9:1. Assombrir davantage reglerait ce seul reflet en
     eteignant toute la photographie ; l ombre du surtitre est donc renforcee,
     ce qui le detache du reflet sans toucher a l image. */
  .hero__eyebrow { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.4); }

  .hero__scrim,
  .hero--page .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(7, 12, 13, 0.72) 0%,
        rgba(7, 12, 13, 0.42) 50%,
        rgba(7, 12, 13, 0) 95%),
      linear-gradient(to right,
        rgba(7, 12, 13, 0.30) 0%,
        rgba(7, 12, 13, 0.14) 48%,
        rgba(7, 12, 13, 0) 76%);
  }

  /* Le hero sequentiel garde son voile directionnel, mais sur une colonne
     unique le texte occupe presque toute la hauteur : la composante verticale
     doit monter beaucoup plus haut, la composante horizontale n a plus de
     sens. La droite de l image reste malgre tout plus claire qu avant. */
  .hero--sequence .hero__panel:first-child .hero__scrim {
    background:
      linear-gradient(to top,
        rgba(7, 10, 8, 0.70) 0%,
        rgba(7, 10, 8, 0.40) 52%,
        rgba(7, 10, 8, 0) 92%),
      linear-gradient(90deg,
        rgba(7, 10, 8, 0.22) 0%,
        rgba(7, 10, 8, 0.06) 55%,
        rgba(7, 10, 8, 0) 85%);
  }

  /* Repere de progression compacte : segments plus courts, plus pres du bord,
     pour ne pas empieter sur une composition deja etroite. */
  .hero__progress { right: calc(var(--gutter) - 0.5rem); gap: var(--sp-2); }
  .hero__progress span { height: 1.25rem; }
  .hero__progress span.is-active { height: 1.75rem; }

  .facts__row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }

  .field-row { grid-template-columns: minmax(0, 1fr); }

  .calendar__months { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }


  .lightbox__nav--prev { left: var(--sp-2); }
  .lightbox__nav--next { right: var(--sp-2); }

  .rate-table th,
  .rate-table td { padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; }

  .space__gallery { gap: var(--sp-3); }
  .space__gallery .gallery-item--lead { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   <= 560px : mobile
   ========================================================================== */
@media (max-width: 560px) {
  /* La barre fixe se resserre ; le rythme vertical, lui, reste celui de
     l'echelle commune. `--section-y` descend deja a 56px sous 520px, ce qui
     correspond au palier mobile voulu (56 a 72px) : aucune surcharge locale
     n'est necessaire, et c'est ce qui garantit que le mobile suit la meme
     logique d'espacement que le bureau, simplement reduite. */
  /* La hauteur de la barre ne bouge plus ici : elle vaut 54px sur tout le
     domaine compact. Seule la sous-navigation se resserre. */
  :root { --subnav-h: 48px; }

  .signature { grid-template-columns: repeat(2, 1fr); }
  .signature__item { padding-right: var(--sp-3); }
  .signature__item:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
  .signature__item:nth-child(2n) { border-right: 0; }
  .signature__item:nth-child(-n+4) { border-bottom: 1px solid var(--rule-soft); }
  .signature__label { max-width: none; }

  .gallery-grid { columns: 1; column-gap: 0; }
  .gallery-item { margin-bottom: var(--sp-3); }

  /* Chambres : grille comparative a deux colonnes plutot que six fiches
     empilees. Les caracteristiques passent en libelle au-dessus de la valeur
     pour rester lisibles dans une colonne etroite ; la photographie complete
     reste a une tape, via « Toutes les photos ». */
  .rooms-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-3);
  }
  .room-card__name { margin-top: var(--sp-4); font-size: var(--fs-small); }
  .room-card__tag { display: block; margin: var(--sp-1) 0 0; }
  .room-card__specs div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: var(--sp-2);
  }
  /* 12px : plancher typographique du site, jamais moins. */
  .room-card__specs dt { font-size: var(--fs-eyebrow); font-weight: var(--fw-medium); letter-spacing: var(--ls-eyebrow); line-height: var(--lh-ui); text-transform: uppercase; }
  .room-card__link { padding-top: var(--sp-4); min-height: 44px; font-size: var(--fs-fine); font-weight: var(--fw-regular); }

  /* Les trois colonnes s empilent : la respiration horizontale devient
     verticale et double inutilement la hauteur. On la ramene a l echelle. */
  .site-footer { padding-block: var(--sp-6) var(--sp-5); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-bottom: var(--sp-6); }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  /* Aucune reduction du retrait des boutons : leur gabarit est le meme sur
     tous les ecrans, comme leur hauteur. */


  .lightbox__bar { padding-inline: var(--sp-4); }
  .lightbox__stage { padding-inline: var(--sp-2); }

  .legal li { padding-left: var(--sp-4); }
}


/* ==========================================================================
   <= 420px : la comparaison a deux colonnes n'est plus lisible
   A 375px, une fiche de chambre ne fait plus que 160px de large : la
   photographie devient une vignette, le nom passe sur trois lignes et les
   caracteristiques se cassent mot par mot. On repasse en colonne unique et
   chaque fiche reprend sa hauteur naturelle.
   ========================================================================== */
@media (max-width: 420px) {
  .rooms-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .room-card__media { aspect-ratio: 3 / 2; }
  .room-card__name { margin-top: var(--sp-4); font-size: var(--fs-heading-s); }
  .room-card__tag { display: inline-block; margin: 0 0 0 var(--sp-3); }
  /* La fiche est de nouveau assez large : les caracteristiques retrouvent leur
     presentation en deux colonnes, libelle a gauche, valeur a droite. */
  .room-card__specs div {
    grid-template-columns: minmax(6.5rem, 8rem) 1fr;
    gap: var(--sp-4);
    padding-block: var(--sp-2);
  }
  .room-card__specs dt {
    font-size: var(--fs-fine);
    font-weight: var(--fw-regular);
    letter-spacing: normal;
    text-transform: none;
  }
  .room-card__link { font-size: var(--fs-small); }
}

/* ==========================================================================
   Ecrans tres etroits (<= 390px) : on protege les cibles tactiles
   ========================================================================== */
@media (max-width: 390px) {
  :root { --gutter: 1.25rem; }
  /* A 390px les trois zones se touchent presque : seuls l'interlettrage et la
     fleche de la disponibilite sont resserres. La hauteur, la largeur interne
     et le logo restent ceux du palier compact, valeur unique. */
  .header-availability { gap: 6px; letter-spacing: 1px; }
  .header-availability__arrow { width: 12px; }
  /* 13px et 12px : le plancher typographique du site. On ne descend pas
     plus bas, meme dans une case de calendrier. */
  .day { min-height: 40px; font-size: var(--fs-micro); font-weight: var(--fw-regular); }
  .month__dow { font-size: var(--fs-eyebrow); }
  .filter { padding-inline: var(--sp-3); }
}

/* ==========================================================================
   320 a 359px : seule adaptation autorisee du titre
   Il descend juste assez pour rester sur une ligne unique, sans passer sous
   32px et sans depasser la valeur mobile de 40px.
   ========================================================================== */
@media (max-width: 359.98px) {
  .hero-intro__title { font-size: clamp(32px, 10.25vw, 40px); }

  /* Deux vignettes cote a cote ne laissent plus assez de matiere a voir : la
     galerie passe en colonne unique. */
  .home-gallery__side { grid-column: 1 / -1; }

  .home-title { font-size: 32px; line-height: 34px; letter-spacing: -0.8px; }

  .hero-stat__line { font-size: 28px; }
  .hero-stat__label { max-width: 220px; }

  /* En dessous de 360px, le libelle court chevauche le logo. La demande de
     disponibilite passe alors dans le menu plein ecran, qui la porte deja :
     rien n'est perdu, et les trois zones cessent de se toucher. */
  .header-availability { display: none; }
}

/* ==========================================================================
   Ecrans larges : on evite que les mesures de texte s'etirent
   ========================================================================== */
@media (min-width: 1600px) {
  /* La gouttiere s'elargit, et elle s'elargit POUR TOUT LE MONDE. En ne la
     surchargeant que sur `.shell` et `.hero__inner`, l'en-tete et le pied de
     page restaient a 56px du bord pendant que le contenu partait a 96px : le
     logo ne tombait plus sur l'axe des titres. */
  :root { --gutter: clamp(3.5rem, 6vw, 6rem); }
}

/* ==========================================================================
   Pointeur grossier : cibles confortables
   ========================================================================== */
@media (pointer: coarse) {
  .nav__link,
  .site-footer__nav a { min-height: 44px; display: inline-flex; align-items: center; }
  /* La disponibilite ne mesure que 14px de haut : sa cible est portee a 44px
     par une zone invisible, sans agrandir le texte ni deplacer son filet. */
  .header-availability::before {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }
  .filter { min-height: 44px; }
  .day { min-height: 44px; }
}

/* ==========================================================================
   Hauteur reduite en paysage mobile : le hero ne doit pas ecraser le texte
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 460px; }
  .hero--page { min-height: 320px; }
}