@charset "UTF-8";

/* ==========================================================================
   Casa Paradisu - Jetons de conception
   Source unique des couleurs, rythmes typographiques et espacements.
   ========================================================================== */

:root {
  /* --- Couleurs de base ------------------------------------------------- */
  --c-ivory:        #F4F0E7;
  --c-charcoal:     #20231F;
  /* Le charbon du pied de page, un cran sous le charbon courant. Il existait
     deja en trois exemplaires ecrits a la main (`components.css`, la fin des
     degrades de `pages.css` et `hero-scrub.css`) ; il est nomme ici depuis que
     la cloture de l'accueil s'y aligne aussi. */
  --c-charcoal-deep: #171A16;
  --c-maquis:       #4B5845;
  --c-stone:        #D5C8B6;
  --c-gold:         #B99A5F;
  /* Le meme or, assombri de 31 %, pour tout ce qui se pose sur l'IVOIRE.
     `--c-gold` donne 5,94:1 sur le charbon — largement lisible — mais
     seulement 2,35:1 sur l'ivoire, sous le seuil de 4,5 exige pour du texte
     et sous les 3,0 exiges pour un element graphique porteur de sens.
     Celui-ci donne 4,55:1. Meme famille, meme lecture, contraste tenu. */
  --c-gold-ink:     #806A42;
  --c-terracotta:   #A95743;

  /* Declinaisons destinees au TEXTE sur fond clair.
     L'or de marque (#B99A5F) n'offre que 2,35:1 sur l'ivoire : il reste
     reserve aux filets, aux bordures et au texte sur fond sombre.
     Ces deux variantes depassent 4,5:1 sur ivoire, ivoire clair et fond creuse. */
  --gold-ink:       #7F6228;   /* 5,02:1 sur ivoire */
  --terracotta-ink: #9E4E3B;   /* 5,12:1 sur ivoire */

  /* Variantes derivees (opacites et melanges pre-calcules) */
  --c-ivory-warm:   #FAF8F3;
  --c-ivory-deep:   #EBE5D8;
  --c-charcoal-90:  rgba(32, 35, 31, 0.90);
  --c-charcoal-70:  rgba(32, 35, 31, 0.70);
  --c-charcoal-55:  rgba(32, 35, 31, 0.55);
  --c-charcoal-16:  rgba(32, 35, 31, 0.16);
  --c-charcoal-08:  rgba(32, 35, 31, 0.08);
  --c-ivory-70:     rgba(244, 240, 231, 0.78);   /* 9,55:1 sur charbon */
  --c-ivory-40:     rgba(244, 240, 231, 0.62);   /* 6,45:1 sur charbon */
  --c-ivory-16:     rgba(244, 240, 231, 0.16);
  --c-gold-40:      rgba(185, 154, 95, 0.40);
  --c-gold-20:      rgba(185, 154, 95, 0.20);

  /* --- Roles semantiques ------------------------------------------------ */
  --bg-page:        var(--c-ivory);
  --bg-raised:      var(--c-ivory-warm);
  --bg-sunken:      var(--c-ivory-deep);
  --bg-dark:        var(--c-charcoal);

  --text-strong:    var(--c-charcoal);
  --text-body:      rgba(32, 35, 31, 0.82);   /* 8,14:1 */
  --text-muted:     rgba(32, 35, 31, 0.68);   /* 5,17:1 — 0,55 ne donnait que 3,54:1 */
  --text-on-dark:   var(--c-ivory);
  --text-on-dark-muted: var(--c-ivory-70);

  --rule:           var(--c-charcoal-16);
  /* Filet un cran plus lisible, pour les separations qui structurent vraiment
     un bloc : bandeau de caracteristiques, tableaux, encadre de la carte,
     boutons secondaires. Les filets internes gardent `--rule`. */
  --rule-strong:    rgba(32, 35, 31, 0.24);
  --rule-soft:      var(--c-charcoal-08);
  --rule-gold:      var(--c-gold-40);
  --rule-on-dark:   var(--c-ivory-16);
  /* Filet de l en-tete, volontairement plus discret que `--rule` : la barre
     doit se detacher du contenu sans poser une ligne franche en travers de
     l ecran, et sans qu on ait besoin d une ombre portee. */
  --rule-header:    rgba(30, 35, 32, 0.10);

  /* Sur fond clair l'accent textuel est l'or fonce ; les blocs `.on-dark`
     rebasculent sur l'or de marque, parfaitement lisible sur charbon (5,94:1). */
  --accent:         var(--gold-ink);
  --focus:          var(--c-maquis);

  /* --- Typographie ------------------------------------------------------ */
  /* SOURCE UNIQUE du systeme typographique. Deux familles, pas une de plus.
     Inter porte tout le site ; Libre Baskerville est reservee aux grands
     titres. Les replis ne reintroduisent aucune ancienne police du projet. */
  --font-display: "Libre Baskerville", Georgia, serif;
  --font-text:    "Inter", Arial, Helvetica, sans-serif;
  /* Troisieme pile, volontairement limitee a l'en-tete et a la signature du
     hero. Aucun fichier n'est ajoute au projet : Helvetica Neue n'est utilisee
     que si elle est deja installee sur l'appareil, sinon Inter prend le relais,
     ce qui est le cas sur Windows et Android. */
  --font-hero:    "Helvetica Neue LT", "Helvetica Neue", Inter, Helvetica, Arial, sans-serif;
  /* Pile complete de la direction artistique sans serif, SOURCE UNIQUE pour
     toute la page d'accueil. Elle reprend `--font-hero` et lui ajoute les
     replis systeme. Aucun fichier n'est ajoute au projet : Helvetica Neue LT
     n'est utilisee que si elle est deja installee sur l'appareil, sinon Inter,
     qui est auto-hebergee, prend le relais. `--font-hero` est laissee telle
     quelle : l'en-tete et le hero ne doivent pas changer d'un caractere. */
  --font-azimut:  "Helvetica Neue LT", "Helvetica Neue", Inter, Helvetica, Arial,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- Echelle typographique ---------------------------------------------
     UNE SEULE echelle pour tout le site. Un element qui joue le meme role a
     exactement la meme taille, la meme graisse et le meme interlignage, quelle
     que soit la page. Aucune taille ne doit etre choisie localement.

     Deux registres :
       display-*  Libre Baskerville. Les quatre H1 et le H2 editorial, rien
                  d autre. Jamais un menu, un bouton, un label, un titre de
                  carte, une cellule de calendrier ni le pied de page.
       heading-*  Inter. Tout le reste de la hierarchie.

     Libre Baskerville a une chasse tres large : la borne basse de chaque
     clamp est calee sur 375px pour que les titres n y explosent pas en
     lignes ; les paliers hauts sont ceux du cahier des charges. */

  /* Quatre corps de H1, un par nature de page. Un H1 pose sur une
     photographie plein ecran n'a pas le meme poids qu'un H1 de page juridique :
     leur donner la meme valeur etait une facilite, pas une hierarchie. */
  --fs-display-home:  clamp(2.125rem, 1.05rem + 4.6vw, 4.75rem);   /* accueil  : 34 -> 76px */
  --fs-display-photo: clamp(2rem, 1.1rem + 3.85vw, 4rem);          /* hero photo : 32 -> 64px */
  --fs-display-page:  clamp(1.875rem, 1.1rem + 3.3vw, 3.75rem);    /* page fonctionnelle : 30 -> 60px */
  --fs-display-legal: clamp(1.75rem, 1.05rem + 3vw, 3.5rem);       /* page juridique : 28 -> 56px */

  /* H2 editorial : le seul autre emploi de Libre Baskerville. Les six titres
     de section de l'accueil appartiennent tous a ce cran. */
  --fs-heading-editorial: clamp(1.75rem, 1.15rem + 2.55vw, 2.625rem);  /* 28 -> 42px */

  /* Titres en Inter. Ils s'arretent volontairement sous le registre serif :
     les grands corps appartiennent a Libre Baskerville seule. */
  --fs-heading-functional: clamp(1.5rem, 1.4rem + 0.42vw, 1.75rem);      /* H2 : 24 -> 28px */
  --fs-heading-card:       clamp(1.1875rem, 1.14rem + 0.2vw, 1.3125rem); /* H3, carte : 19 -> 21px */
  --fs-heading-s:          1.125rem;                                      /* sous-titre : 18px */

  /* Textes. Le paragraphe reste a 16px sur tous les ecrans, mobile compris. */
  --fs-lead:       clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem);  /* chapeau : 17 -> 20px */
  --fs-body:       1rem;        /* 16px : paragraphe courant */
  --fs-small:      0.9375rem;   /* 15px : texte secondaire, navigation, boutons */
  --fs-fine:       0.875rem;    /* 14px : notes, legendes, tableaux */
  --fs-micro:      0.8125rem;   /* 13px : exception, jamais du texte suivi */
  --fs-eyebrow:    0.75rem;     /* 12px : surtitres et labels en capitales */

  /* Chiffres-reperes de la bande signature : un role a part, qui ne rentre ni
     dans le registre serif ni dans les titres Inter. Deux crans seulement. */
  --fs-figure:     clamp(1.75rem, 1.2rem + 1.9vw, 2.75rem);   /* 28 -> 44px */
  --fs-figure-sm:  clamp(1.35rem, 1rem + 1.2vw, 2rem);        /* 22 -> 32px */

  /* Interlignages : cinq valeurs, une par famille d'usage. Aucune valeur
     locale ne doit rendre une page plus dense qu'une autre. */
  --lh-display:    1.08;   /* grands titres serif */
  --lh-title:      1.2;    /* titres Inter */
  --lh-body:       1.62;   /* paragraphes */
  --lh-secondary:  1.5;    /* textes secondaires, notes, legendes */
  --lh-ui:         1.2;    /* navigation, boutons, cellules */

  --ls-display:    -0.005em;   /* la Baskerville ne supporte pas d'etre serree */
  --ls-title:      -0.012em;   /* Inter gagne a etre legerement resserree */
  --ls-eyebrow:    0.12em;
  --ls-button:     0.01em;

  /* --- Graisses ----------------------------------------------------------
     Libre Baskerville : 400 seule (la 700 reste declaree mais n'est appelee
     nulle part). Inter : 300 pour tout le texte suivi, 400 pour ce qui doit
     rester net (navigation, liens, labels, texte sur photographie), 500 pour
     les petits titres et les boutons. Aucun texte courant en 600 ou 700, et
     aucune graisse synthetique. */
  --fw-light:    300;
  /* Graisse intermediaire, reservee aux longs textes juridiques : la 300 y
     devient trop pale sur plusieurs ecrans de suite, la 400 alourdit la page. */
  --fw-book:     350;
  --fw-regular:  400;
  --fw-medium:   500;

  /* --- Espacement --------------------------------------------------------
     Echelle unique : 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 120 px.
     Usages types :
       label -> titre            sp-3   (12px)
       titre -> paragraphe       sp-5   (24px)
       paragraphe -> paragraphe  sp-4   (16px)
       paragraphe -> bouton      sp-6   (32px)
       interieur d'une carte     sp-6   (32px)
       entre deux colonnes       --grid-gap (32 -> 80px)
       entre deux sections       --section-y (56 -> 102px) */
  --sp-1:   0.25rem;   /*   4 */
  --sp-2:   0.5rem;    /*   8 */
  --sp-3:   0.75rem;   /*  12 */
  --sp-4:   1rem;      /*  16 */
  --sp-5:   1.5rem;    /*  24 */
  --sp-6:   2rem;      /*  32 */
  --sp-7:   3rem;      /*  48 */
  --sp-8:   4rem;      /*  64 */
  --sp-9:   5rem;      /*  80 */
  --sp-10:  6rem;      /*  96 */
  --sp-11:  7.5rem;    /* 120 */

  /* Respiration verticale des sections. La valeur est un DEMI-ecart : deux
     sections consecutives portent chacune la leur, et c'est leur somme que
     l'oeil percoit. Ecart total obtenu :
       375px  -> 56px      (palier mobile   : 56 a 72)
       768px  -> 73px      (palier tablette : 72 a 96)
       1024px -> 84px
       1440px -> 102px     (palier bureau   : 96 a 120)
       >=1786px -> 120px, plafond. */
  --section-y:       clamp(1.75rem, 1.25rem + 2.15vw, 3.75rem);
  --section-y-tight: clamp(1.25rem, 0.875rem + 1.6vw, 2.5rem);

  /* Rythme interne d'un bloc de contenu : les memes trois valeurs partout. */
  --gap-label:   var(--sp-3);   /* surtitre -> titre */
  --gap-title:   var(--sp-5);   /* titre -> paragraphe */
  --gap-text:    var(--sp-4);   /* paragraphe -> paragraphe */
  --gap-action:  var(--sp-6);   /* dernier paragraphe -> bouton */
  --pad-card:    var(--sp-6);   /* interieur d'une carte */

  /* --- Mise en page ----------------------------------------------------- */
  --page-max:    1440px;
  --content-max: 1180px;
  /* Longueurs de ligne : 55 a 70 signes au corps concerne. */
  --measure:      34rem;   /* 544px : ~68 signes a 16px */
  --measure-legal: 46rem;  /* 736px : colonne de lecture des pages juridiques */
  --measure-lead: 38rem;   /* 608px : ~61 signes a 20px */
  --measure-sm:   28rem;   /* 448px : ~56 signes a 16px */

  --gutter:      clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem);
  --grid-gap:    clamp(2rem, 1.2rem + 2.6vw, 5rem);   /* 32 -> 80px */

  /* --- Dimensions communes des composants -------------------------------- */
  --btn-h:       48px;         /* boutons ET champs de formulaire */
  --btn-px:      var(--sp-5);  /* 24px de part et d'autre du libelle */
  --field-gap:   var(--sp-5);  /* entre deux champs d'un formulaire */

  /* Hauteur de la barre fixe. Une seule valeur, deux paliers seulement :
     84px des que la navigation complete tient (>= 1200px), 54px en dessous,
     ou la barre se reduit au menu, au logo et a la disponibilite. */
  --header-h:    84px;
  /* 48px : la barre reste confortable et le cumul avec l en-tete descend de
     124 a 120px, ce qui degage d autant les titres vises par une ancre. */
  --subnav-h:    48px;

  /* Decalage applique aux cibles d'ancre : en-tete + sous-navigation + air.
     Une ancre doit toujours arriver sous les barres fixes, jamais dessous. */
  --anchor-pad:  calc(var(--header-h) + var(--sp-6));
  --anchor-pad-sub: calc(var(--header-h) + var(--subnav-h) + var(--sp-5));

  /* --- Gabarits de page ------------------------------------------------- */
  /* Deux familles seulement : hero photographique (Accueil, Villa, Autour)
     et introduction sur fond creme (Galerie, Tarifs, Contact, pages legales). */
  --hero-h:        92svh;
  /* Le contenu editorial du hero interieur demarrait a 62px sous la barre de
     navigation : le surtitre se lisait presque sur la meme ligne que le logo.
     Le gabarit est allonge pour degager une vraie respiration sous l en-tete,
     sans devenir un hero plein ecran comme celui de l accueil. */
  --hero-h-page:   clamp(440px, 60svh, 580px);
  --intro-pt:      calc(var(--header-h) + clamp(2.75rem, 4.5vw, 4.5rem));
  --intro-pb:      clamp(2.25rem, 3.6vw, 3.25rem);

  /* --- Formes ----------------------------------------------------------- */
  --radius:      2px;
  --radius-lg:   3px;
  --border:      1px solid var(--rule);
  --border-soft: 1px solid var(--rule-soft);

  /* --- Elevation (discrete, jamais lourde) ------------------------------ */
  --shadow-sm: 0 1px 2px rgba(32, 35, 31, 0.05);
  --shadow-md: 0 6px 24px -12px rgba(32, 35, 31, 0.22);
  --shadow-lg: 0 18px 48px -24px rgba(32, 35, 31, 0.30);

  /* --- Mouvement -------------------------------------------------------- */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur:         320ms;
  --dur-slow:    480ms;
  --dur-reveal:  300ms;   /* apparition : breve, jamais bloquante */

  /* --- Couches ---------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   40;
  /* La barre est sortie du flux et posee sur le media : elle monte a 100.
     L'ordre relatif ne change pas, seules les valeurs sont decalees au-dessus
     d'elle pour que le menu plein ecran et la visionneuse restent devant. */
  --z-header:   100;
  --z-menu:     110;
  --z-lightbox: 130;
}

/* Blocs sombres : on bascule les roles plutot que de reecrire chaque regle. */
/* Sur fond sombre, la graisse 300 se delave beaucoup plus vite que sur
   ivoire : les petits textes y remontent d un cran, et les deux niveaux de
   gris ont ete legerement eclaircis. La hierarchie entre texte principal et
   texte secondaire reste nette, le bloc ne devient pas contraste. */
.on-dark {
  --bg-page:     var(--c-charcoal);
  --text-strong: var(--c-ivory);
  --text-body:   var(--c-ivory-70);
  --text-muted:  var(--c-ivory-40);
  --accent:      var(--c-gold);          /* 5,94:1 sur charbon */
  --rule:        var(--rule-on-dark);
  --rule-soft:   rgba(244, 240, 231, 0.09);
  color: var(--text-body);
  background-color: var(--bg-page);
}