@charset "UTF-8";

/* ==========================================================================
   Casa Paradisu - Socle : polices, reinitialisation, typographie, utilitaires
   ========================================================================== */

/* --- Polices auto-hebergees (variables, sous-ensembles unicode) ---------- */

/* Deux familles, six fichiers, auto-hebergees. Aucune autre police n'est
   declaree nulle part dans le projet.

   Inter porte tout le site : 300 pour le texte suivi, 400 pour ce qui doit
   rester net (navigation, liens, labels, texte sur photographie), 500 pour les
   petits titres et les boutons. Un seul fichier variable par sous-ensemble
   couvre tout l'intervalle ; inutile d'en charger trois.

   Libre Baskerville est reservee aux grands titres. Elle est statique : seules
   les graisses 400 et 700 existent, et ce sont les seules declarees. Aucune
   graisse intermediaire n'est demandee au navigateur, qui la synthetiserait. */

/* --- Inter : variable 200-700 -------------------------------------------
   L'axe descend a 200 pour la seule signature du hero, qui demande une graisse
   tres fine. Declare a 300, le navigateur ramenait silencieusement 200 a 300 :
   le titre paraissait plus epais qu'il n'etait ecrit. Aucun autre element du
   site ne descend sous 300. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Libre Baskerville : 400 et 700, statiques -------------------------- */
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/librebaskerville-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/librebaskerville-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/librebaskerville-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/librebaskerville-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Reinitialisation ---------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Pas de `scroll-behavior: smooth` global : sur une page longue, l'animation
     est annulee par le chargement differe des images et l'ancre n'arrive
     jamais. Le defilement vers une ancre est donc immediat — c'est aussi ce
     que demande la lisibilite : la cible doit etre visible tout de suite. */
  scroll-padding-top: var(--anchor-pad);
}

/* Le decalage reel est porte par les cibles elles-memes : c'est la seule
   methode fiable quand plusieurs barres fixes se superposent. Les pages a
   sous-navigation collante en reservent la hauteur en plus. */
main [id] { scroll-margin-top: var(--anchor-pad); }
body[data-subnav] main [id] { scroll-margin-top: var(--anchor-pad-sub); }

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  /* Tout le texte suivi du site herite de cette graisse. Les elements qui
     doivent rester nets (navigation, liens, labels, boutons) la remontent
     explicitement ; aucun ne descend en dessous. */
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Garde-fou contre tout debordement horizontal.
     `clip` et non `hidden` : `overflow-x: hidden` transforme <body> en
     conteneur de defilement, ce qui casse silencieusement les ancres
     (scrollIntoView et saut natif restent sans effet), le `scroll-padding`
     et le comportement collant. `clip` coupe sans creer de conteneur. */
  overflow-x: clip;
}

/* Repli pour les moteurs sans `overflow: clip` : on porte alors le garde-fou
   sur <html>, qui reste l'element defilant. */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: none; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* Exposants ordinaux (2e, 3e semaine). La valeur par defaut du navigateur
   (~0,83em) descendait a 10px dans une cellule de tableau : le plancher de
   12px du site vaut aussi pour eux. */
sup, sub { font-size: max(0.7em, var(--fs-eyebrow)); line-height: 0; }

/* Mise en valeur dans le texte : 500, jamais le gras du navigateur. Un `b`
   ou un `strong` en 700 au milieu d une page composee en 300 forme une tache
   noire ; 500 suffit largement a detacher le mot. */
strong, b { font-weight: var(--fw-medium); }

::selection {
  background-color: var(--c-maquis);
  color: var(--c-ivory);
}

/* REGLE DE LISIBILITE, valable pour tout le site
   La graisse 300 porte le texte suivi, mais elle devient trop maigre en
   dessous de 15px, surtout en gris attenue. Tout ce qui est compose a 14px
   ou moins remonte donc a 400, plutot que d etre grossi : c est la seule
   derogation a la 300 pour du texte de lecture.
   Les micro-labels en capitales (12px, approche 0,12em) montent a 500 : a
   cette taille et avec cet ecartement, une 400 se delave. */

/* --- Titres et texte ----------------------------------------------------- */

/* Par defaut, TOUS les titres sont en Inter Medium. Libre Baskerville ne
   s'applique que par une classe explicite : elle reste ainsi un choix
   editorial, jamais un automatisme. 500 est la graisse la plus forte du site :
   un titre n'est jamais en 600 ni en 700. */
h1, h2, h3, h4 {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}

/* --- Registre Libre Baskerville : les H1 et le H2 editorial --------------
   Le corps du H1 depend de la nature de la page, pas de la classe : un titre
   pose sur une photographie plein ecran, un titre de page fonctionnelle et un
   titre de page juridique n'ont pas le meme poids editorial. La taille est
   donc portee par le contexte (`.hero`, `.page-head`, `body[data-page]`), la
   classe ne portant que la famille, la graisse et le rythme. */
.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.display-xl { font-size: var(--fs-display-home); }        /* H1 de l'accueil */
.display-l  { font-size: var(--fs-display-page); }        /* H1, valeur par defaut */
.display-m  { font-size: var(--fs-heading-editorial); }   /* H2 editorial */

/* --- Registre Inter : titres fonctionnels -------------------------------- */
.heading-l { font-size: var(--fs-heading-functional); }  /* H2 fonctionnel */
.heading-m { font-size: var(--fs-heading-card); }        /* H3, titre d'espace */
.heading-s {                                              /* titre de carte, sous-titre */
  font-size: var(--fs-heading-s);
  letter-spacing: -0.005em;
}

/* Aucune regle d'italique sur les grands titres : Libre Baskerville n'est
   chargee qu'en romain, et aucun titre du site ne contient de <em>. La regle
   qui existait ici n'aurait pu produire qu'un italique synthetique. */

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  color: var(--text-body);
  /* Au corps du chapeau, --measure ne ferait que 54 signes : trop etroit. */
  max-width: var(--measure-lead);
}

/* Rythme vertical du texte courant : une seule regle pour tout le site,
   plutot que des marges reposees bloc par bloc.
     paragraphe -> paragraphe  16px
     paragraphe -> bouton      32px
     titre -> paragraphe       24px */
main p + p,
main p + ul,
main ul + p { margin-top: var(--gap-text); }

main p + .actions,
main ul + .actions { margin-top: var(--gap-action); }

main h2 + p,
main h3 + p,
main h2 + ul,
main h3 + ul { margin-top: var(--gap-title); }

.prose > * + * { margin-top: var(--gap-text); }
.prose > * + h2,
.prose > * + h3 { margin-top: var(--sp-7); }
.prose h2 + *,
.prose h3 + * { margin-top: var(--gap-title); }
.prose p { max-width: var(--measure); }

/* Tout paragraphe garde une longueur de ligne lisible, meme hors `.prose`. */
main p { max-width: var(--measure); }
main .lead { max-width: var(--measure-lead); }

.text-muted { color: var(--text-muted); }
.fine {
  font-size: var(--fs-fine);
  font-weight: var(--fw-regular);
  line-height: var(--lh-secondary);
  max-width: var(--measure-sm);
}

/* Sur-titre : petite capitale espacee, jamais decorative sans raison.
   Seule exception a la regle des 400 pour les labels : a 12px, en capitales
   et avec 0,12em d'approche, une 400 se delave. 500 lui rend son trait sans
   la faire lire comme un gras. */
.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--lh-ui);
}
.eyebrow--gold { color: var(--accent); }

/* Etiquette de section : un seul motif pour tout le site.
   Elle nomme la section, elle ne la numerote pas — la numerotation
   systematique donnait au site un air de gabarit repete. */
.section-index {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-index::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background-color: var(--c-gold);
}
.on-dark .section-index { color: var(--text-on-dark-muted); }

/* --- Mise en page -------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow { max-width: calc(var(--content-max) - 180px); }
.shell--content { max-width: var(--content-max); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Fond legerement creuse : sert a marquer un chapitre, pas chaque section.
   Deux emplois sur l'accueil, jamais deux bandes creusees consecutives. */
.band-soft { background-color: var(--bg-sunken); }

/* Ecart entre l'en-tete d'une section et son contenu : une seule valeur,
   prise sur l'echelle (48px sur mobile, 64px au-dela). */
.section-head { margin-bottom: var(--sp-7); }
@media (min-width: 769px) { .section-head { margin-bottom: var(--sp-8); } }

/* Appel a l'action de fin de section : toujours au meme endroit, aligne sur
   l'axe gauche du contenu, jamais centre au milieu du vide. */
.section-cta { margin-top: var(--gap-action); }

/* Rythme interne d un en-tete : surtitre 12px sous, titre 24px sous. */
.section-head .display-m,
.section-head .display-l,
.section-head .heading-l { margin-top: var(--gap-label); }
.section-head .lead { margin-top: var(--gap-title); }

/* Un titre de section tire sur 1330px reste seul sur sa ligne et se detache du
   paragraphe qu il annonce. Une mesure le ramene a une ou deux lignes
   equilibrees, sur le meme axe que le chapeau qui le suit. */
.section-head .display-m { max-width: 26ch; }

.rule { height: 1px; background-color: var(--rule); border: 0; margin: 0; }

/* --- Accessibilite ------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-dark :focus-visible,
.skip-link:focus-visible { outline-color: var(--c-gold); }

.skip-link {
  position: fixed;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 100;
  padding: var(--sp-3) var(--sp-5);
  background-color: var(--c-charcoal);
  color: var(--c-ivory);
  font-size: var(--fs-small);
  line-height: var(--lh-secondary);
  border-radius: var(--radius);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Reveal au defilement -------------------------------------------------
   Regle absolue : aucun contenu ne depend d'une animation pour exister.

   L'effet ne subsiste que sur DOUZE elements dans tout le site, et ce sont
   tous des compositions photographiques : la grande photographie de
   l'architecture, la grille des six apercus, les deux cartes du secteur et
   les huit galeries d'espace de la page Villa. Aucun paragraphe, aucun titre
   fonctionnel, aucune carte repetee, aucun bouton, aucun formulaire, aucun
   tableau, aucune cellule de calendrier, aucun tarif, aucune page juridique,
   aucun element du pied de page et aucun filtre n'apparait en fondu : sur un
   defilement rapide, ces contenus arrivaient attenues ou momentanement
   absents, ce qui est exactement l'effet que l'on cherche a supprimer.

   `main.is-revealed` (pose par le script des qu'il demarre, ou par le
   garde-fou de secours) rend tout visible en une seule regle.
   -------------------------------------------------------------------------- */

/* Une seule transition courte, un seul deplacement de 6px. Le contenu est
   deja lisible avant la fin de l'effet : c'est une amelioration, pas une
   condition d'affichage. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in,
.reveal.is-forced,
.is-revealed .reveal {
  opacity: 1;
  transform: none;
}
/* Retire la composition GPU une fois l'animation finie : evite le texte flou */
.reveal.is-settled { transform: none; transition: none; }

/* Un seul decalage possible, court : pas de cascade a trois ou quatre temps. */
.reveal-delay-1 { transition-delay: 60ms; }

/* Si JS est absent, rien ne doit rester invisible */
.no-js .reveal { opacity: 1; transform: none; transition: none; }

/* Cible d'ancre : le bloc vise et tout ce qu'il contient sont revele
   immediatement, sans attendre l'observateur de defilement. */
:target,
:target .reveal { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Le contenu est visible immediatement, et AUCUNE animation non
     essentielle ne subsiste : ni apparition, ni fondu d image, ni zoom au
     survol, ni glissement de fleche. */
  .reveal { opacity: 1; transform: none; transition: none; }
  .frame > img,
  .frame > img.is-loading { opacity: 1; transition: none; }
  .zoomable:hover > img,
  .link-line:hover .arrow { transform: none; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

@media print {
  .site-header, .site-footer, .mobile-cta, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
}