@charset "UTF-8";

/* =============================================================================
   Casa Paradisu — Le hero de « Autour », une photographie en profondeur
   -----------------------------------------------------------------------------
   Chargée par cette seule page. Elle remplace le hero piloté au défilement :
   `hero-scrub.css` et `hero-scrub.js` ne sont plus demandés ici.

   LE PRINCIPE, ET SA LIMITE ASSUMÉE
   Une photographie plate n'a pas de carte de profondeur. On ne peut donc pas
   en détourer les arbres ou les rochers sans laisser des contours artificiels
   — exactement ce qu'il fallait éviter.

   Mais la prise de vue est AÉRIENNE : la profondeur y suit l'axe vertical, du
   ciel en haut à la mer proche en bas. Les trois plans sont donc des BANDES
   à bords fondus, larges de 140 à 200 px, pour un écart de mouvement entre
   deux plans qui ne dépasse jamais 15 px. Le fondu est dix fois plus large
   que le décalage : la séparation ne peut pas se voir.

   L'ARCHITECTURE QUI INTERDIT LES TROUS
   Le plan du fond n'a AUCUN masque — c'est l'image entière, opaque. Les deux
   autres sont des bandes posées par-dessus. Là où deux plans se chevauchent,
   on voit un fondu entre deux copies légèrement décalées ; là où il n'y en a
   qu'un, on voit l'image pleine. Aucun pixel ne peut manquer, quelle que soit
   l'amplitude du mouvement.

   TOUT EST EN `transform` ET EN `opacity`
   Y compris l'ouverture du cadre : ce ne sont pas `width`/`height` ni un
   `clip-path` qui s'animent, mais quatre volets de fond crème qui glissent
   hors champ. Le compositeur fait tout, rien n'est remis en page.
   ========================================================================== */

/* Repli pour les moteurs sans `svh`, à l'identique du hero de l'accueil. */
@supports not (height: 100svh) {
  .plage { --hero-screen: 100vh; }
}

/* --------------------------------------------------------------------------
   La section
   `.hero` est une boîte flexible d'une hauteur d'écran qui coupe son
   débordement. Les trois sont à défaire : un ancêtre qui coupe le débordement
   désactive silencieusement `position: sticky` chez ses descendants.
   -------------------------------------------------------------------------- */

.plage {
  display: block;
  min-height: 0;
  height: auto;
  overflow: visible;

  /* Réglages, repris par le script. La piste vaut UN écran par défaut : sans
     JavaScript, sous mouvement réduit ou si l'image manque, la section est un
     hero photographique ordinaire. */
  --plage-ecrans: 1;

  /* La hauteur utile n'est PAS celle de la fenêtre. Le `body` réserve déjà
     `--header-h` pour passer sous la barre fixe, et cette barre est un aplat
     blanc opaque sur cette page — rien ne peut se voir dessous. Une scène
     d'un écran entier débordait donc de 84 px sous la fenêtre, et le cadre
     éditorial s'en trouvait décentré : marge haute pleine, marge basse
     rognée aux trois quarts. */
  --plage-haut: calc(var(--hero-screen, 100svh) - var(--header-h));

  /* Marges du cadre éditorial, en pourcentage de la scène. */
  --plage-marge-x: 9%;
  --plage-marge-y: 12%;
}
.plage::before { content: none; }   /* le voile de `.hero` défilerait */

.plage__track {
  position: relative;
  height: calc(var(--plage-haut) * var(--plage-ecrans, 1));
}

.plage__stage {
  position: sticky;
  top: var(--header-h);
  height: var(--plage-haut);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-page);
}

/* --------------------------------------------------------------------------
   Les trois plans
   -------------------------------------------------------------------------- */

/* La caméra : un seul mouvement d'ensemble, au-dessus duquel chaque plan
   ajoute le sien. Deux transformations imbriquées plutôt qu'une somme
   calculée en JavaScript — c'est le navigateur qui compose. */
.plage__cam {
  position: absolute;
  inset: 0;
  transform: translate3d(var(--cam-x, 0px), var(--cam-y, 0px), 0) scale(var(--cam-s, 1));
}

/* Sept pour cent de débord de chaque côté, et ce n'est pas une marge de
   confort prise au hasard.

   Au maximum de séparation, le plan du fond se déplace de 10 px et la caméra
   de 18 — soit 28 px vers le haut — pendant que les deux agrandissements le
   font croître de 7 %. Sur une scène de 536 px, le compte tombait à cinq
   pixels PRÈS du bord : une ligne de crème serait apparue en bas. Avec ce
   débord, la couverture est assurée jusqu'à une scène de 438 px de haut,
   bien en deçà de tout ce qui existe.

   Conséquence assumée : les bandes des masques, exprimées en pourcentage du
   plan, se décalent d'au plus 3 % par rapport à la scène. Sur des fondus de
   quatorze points, cela ne se voit pas. */
.plage__plan {
  position: absolute;
  inset: -7%;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--ps, 1));
}
.plage__plan img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--plage-focal, 50% 50%);
}

/* Les bandes. Le plan du fond n'en a pas : il est la plaque pleine.

   Les bornes ont été posées en superposant les bandes sur la photographie,
   pas au jugé : 0-26 % le ciel et les collines, 40-56 % la plage et les pins,
   70-100 % la mer proche et le bateau. Entre les deux, les fondus. */
.plage__plan--milieu {
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, #000 36%, #000 58%, transparent 72%);
          mask-image: linear-gradient(to bottom, transparent 20%, #000 36%, #000 58%, transparent 72%);
}
.plage__plan--avant {
  -webkit-mask-image: linear-gradient(to bottom, transparent 56%, #000 72%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 56%, #000 72%, #000 100%);
}

/* --------------------------------------------------------------------------
   Les volets — l'ouverture et la fermeture du cadre
   Chacun mesure la moitié de la scène et se tient hors champ, décalé de sa
   propre hauteur. Le script ne fait que réduire ce décalage : la part qui
   dépasse est exactement la marge crème. Aucune remise en page.
   -------------------------------------------------------------------------- */

.plage__volet {
  position: absolute;
  z-index: 3;
  background-color: var(--bg-page);
  pointer-events: none;
}
.plage__volet--haut,
.plage__volet--bas   { left: 0; right: 0; height: 50%; }
.plage__volet--gauche,
.plage__volet--droite { top: 0; bottom: 0; width: 50%; }

.plage__volet--haut   { top: 0;    transform: translate3d(0, calc(-100% + var(--v-haut, 0px)), 0); }
.plage__volet--bas    { bottom: 0; transform: translate3d(0, calc(100% - var(--v-bas, 0px)), 0); }
.plage__volet--gauche { left: 0;   transform: translate3d(calc(-100% + var(--v-gauche, 0px)), 0, 0); }
.plage__volet--droite { right: 0;  transform: translate3d(calc(100% - var(--v-droite, 0px)), 0, 0); }

/* Pas de voile sous l'en-tête, contrairement aux heros de l'accueil et de
   « La villa » : la scène s'arrête AU RAS de la barre, qui est un aplat blanc
   opaque. Il n'y a rien à protéger, et une bande sombre posée là se serait lue
   comme une erreur. */

/* --------------------------------------------------------------------------
   Le titre — il tient la première phase puis s'efface
   -------------------------------------------------------------------------- */

.plage .hero-intro__content {
  z-index: 5;
  opacity: var(--plage-titre, 1);
}

/* --------------------------------------------------------------------------
   Les trois mentions
   Une seule colonne, à gauche, jamais sur la plage. Leur HAUTEUR suit le
   sujet : basse pour la mer, médiane pour les plages, haute pour le maquis —
   le regard monte avec la caméra.
   -------------------------------------------------------------------------- */

.plage__notes {
  position: absolute;
  inset: 0;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.plage__note {
  position: absolute;
  left: var(--gutter);
  top: var(--haut);
  /* Une mesure en `ch` se serait réglée sur la taille du `li`, pas sur celle
     du texte qu'il porte : vingt signes donnaient une colonne de 158 px et
     une phrase de six mots sur trois lignes. */
  max-width: min(26rem, 72vw);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  will-change: opacity, transform;
}
.plage__note-t {
  display: block;
  font-family: var(--font-hero);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--c-ivory);
}
.plage__note-s {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  line-height: var(--lh-title);
  color: var(--c-ivory);
}
/* Les deux tiennent sur une photographie claire : une ombre portée, pas un
   aplat derrière eux. Même dispositif que les titres de hero du site. */
.plage__note-t,
.plage__note-s {
  text-shadow:
    0 1px 2px rgba(10, 14, 12, 0.40),
    0 4px 18px rgba(10, 14, 12, 0.34);
}

/* --------------------------------------------------------------------------
   Écrans étroits
   Une photographie de format 3:2 ne peut pas remplir un écran de téléphone
   sans qu'on en perde les trois quarts. Le cadre s'ouvre donc en LARGEUR mais
   reste une fenêtre paysage : la mer, la plage et le relief restent tous les
   trois lisibles, ce qui est le but.
   -------------------------------------------------------------------------- */

/* Le cadrage centré tient sur un écran de téléphone, et ce n'est pas un
   hasard : la scène est diagonale, du coin haut-droit au coin bas-gauche. Une
   coupe verticale au centre garde donc les collines, les pins, la plage, la
   mer et les rochers — les cinq. Une photographie plus frontale aurait dû
   être recadrée à la main. */
@media (max-width: 860px) {
  .plage { --plage-marge-x: 7%; --plage-marge-y: 15%; }
  .plage__note-s { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   La piste retombe à un écran, les volets restent ouverts, les plans sont
   alignés : il ne reste qu'une photographie, et son titre.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .plage { --plage-ecrans: 1; }
  .plage__cam,
  .plage__plan { transform: none; }
  .plage__volet { display: none; }
  .plage__note { display: none; }
  .plage .hero-intro__content { opacity: 1; }
}