/* ═══════════════════════════════════════════════════════════
   Le Regard — page d'accueil
   Tout est image, bord à bord. Aucun espace, aucun filet.
   Le texte se pose dans les zones sombres, mesurées photo par
   photo (luminance par tiers) avant d'écrire ce fichier.
   Feuille autonome : n'utilise pas css/style.css.
   ═══════════════════════════════════════════════════════════ */
/* Palette veralem — le compte d'auteur, pas l'hôtellerie.
   Le lin remplace l'ivoire (plus chaud, moins blanc), le brun terre
   remplace le noir froid, et l'accent passe du bronze au rose
   poussière : la couleur de la peau et du couchant, celle qui
   n'existe pas dans la palette hôtels. Le bronze survit à un seul
   endroit, le lien Regard — il mène à l'autre monde, il doit le
   dire. */
:root{
  --dark:#2E2620; --cream:#F0E8DC; --accent:#C98E7A; --bronze:#B08D4E;
  --font-serif:'Newsreader',Georgia,serif;
  --font-sans:'Inter Tight',system-ui,-apple-system,sans-serif;
  --font-title:'Special Elite','Courier New',Courier,monospace;
  --pad:clamp(1.6rem,5vw,5.5rem);
  --max:1320px;
  --hd:4.6rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.home{
  margin:0;background:var(--dark);color:var(--cream);
  font-family:var(--font-sans);font-weight:300;font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.home img{display:block}
.home a{color:inherit}
.home figure{margin:0}
/* Titres à la machine à écrire. Une frappe est chasse fixe et encrée :
   elle occupe plus de place qu'une Newsreader à taille égale, d'où des
   corps réduits, une interligne ouverte et un léger interlettrage
   positif — l'inverse du serrage qui allait au serif. */
.home h1,.home h2{font-family:var(--font-title);font-weight:400;margin:0}
.home h1{font-size:clamp(1.9rem,3.5vw,3.4rem);line-height:1.2;letter-spacing:.01em}
.home h2{font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.3;letter-spacing:.015em}
.home .h2--sm{font-size:clamp(1.25rem,1.9vw,1.75rem)}
/* Special Elite n'a qu'un seul style : pas d'italique — et une machine
   à écrire n'en a jamais eu non plus. L'emphase se fait comme sur le
   papier, au soulignement, fin et décollé pour rester discret.
   Le trait passe au rose poussière : c'est là, sur le mot qui porte,
   que l'accent veralem se voit le mieux — et le seul endroit du site
   où cette couleur apparaisse. */
.home h1 em,.home h2 em{font-style:normal;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.24em;text-decoration-color:rgba(201,142,122,.85)}
.home p{margin:0 0 1.1rem}
.home p:last-child{margin-bottom:0}

.label{font-family:var(--font-sans);font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(240,232,220,.62);
  display:block;margin-bottom:1.4rem}
.lede{font-size:1.02rem;color:rgba(240,232,220,.82);max-width:40ch}
/* La phrase qui suit le nom reprend la machine à écrire du titre : les
   deux lignes se lisent d'un seul geste. Special Elite tient plus de
   place à corps égal — le corps descend, l'interligne s'ouvre. */
.home .lede--title{font-family:var(--font-title);font-size:.92rem;
  letter-spacing:.01em;line-height:1.75}
/* Lien dans le corps du texte. Même geste que l'emphase des titres —
   un soulignement fin — pour qu'il se voie sans rompre la ligne.
   Qualifié .home parce que .home a{color:inherit} l'emporterait. */
.home .lede a,.home .mf a{color:var(--cream);
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:rgba(201,142,122,.7);
  transition:text-decoration-color .3s ease}
.home .lede a:hover,.home .mf a:hover{text-decoration-color:var(--accent)}

/* .home a{color:inherit} l'emporte sur .btn (spécificité) : sans le
   préfixe .home ici, le bouton plein héritait du crème sur fond crème
   — texte invisible. Toutes les règles de couleur du bouton sont donc
   qualifiées. */
.home .btn{display:inline-flex;align-items:center;font-family:var(--font-sans);
  font-size:.7rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  padding:.86rem 2.1rem;border:1px solid rgba(240,232,220,.65);color:var(--cream);
  background:transparent;line-height:1;text-decoration:none;text-shadow:none;
  transition:background .35s ease,color .35s ease,border-color .35s ease}
.home .btn:hover{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.home .btn--solid{background:var(--cream);color:var(--dark);border-color:var(--cream)}
.home .btn--solid:hover{background:transparent;color:var(--cream);border-color:rgba(240,232,220,.65)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}

/* Ce pour quoi je travaille, frappé comme la légende d'une planche
   contact : cinq mots séparés d'un point médian se lisent d'un coup,
   là où une phrase se traverse sans rien retenir. Le filet rose
   poussière au-dessus la décroche du titre. */
.home .metier{
  font-family:var(--font-title);font-size:.78rem;
  letter-spacing:.15em;text-transform:uppercase;line-height:2;
  color:rgba(240,232,220,.92);
  margin-top:1.6rem;padding-top:1.3rem;
  border-top:1px solid rgba(201,142,122,.45);
}

/* Appel vers le portfólio. Pas un bouton : un mot frappé à la machine,
   souligné d'un trait rose poussière, avec une flèche qui s'écarte au
   survol. Il revient à trois endroits de la page sans jamais peser —
   l'image reste au premier plan, c'est elle qu'on vient voir.
   Qualifié .home comme le bouton plus haut : sans ça
   .home a{color:inherit} l'emporterait sur la couleur. */
.home .cta{
  display:inline-flex;align-items:baseline;gap:.6rem;
  font-family:var(--font-title);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  padding-bottom:.4rem;
  border-bottom:1px solid rgba(201,142,122,.6);
  transition:border-color .35s ease;
}
.home .cta:hover{border-color:var(--accent)}
.home .cta i{font-style:normal;font-family:var(--font-sans);
  transition:transform .35s ease}
.home .cta:hover i{transform:translateX(.3rem)}
.cta-row{margin-top:1.9rem}

/* ─────────── navigation ─────────── */
.hd{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--hd);
  display:flex;align-items:center;transition:background .5s ease}
.hd::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(20,16,12,.55),rgba(20,16,12,0));
  transition:opacity .5s ease}
.hd.is-scrolled{background:rgba(38,31,25,.88);backdrop-filter:blur(10px)}
.hd.is-scrolled::before{opacity:0}
.hd__nav{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:2rem;padding:0 var(--pad)}
.hd__links{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.hd__link{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;color:var(--cream);opacity:.78;transition:opacity .3s}
.hd__link:hover,.hd__link.is-active{opacity:1}
/* Regard appartient à la branche hôtelière : il garde le bronze de
   l'autre identité, seul survivant de l'Ivoire & Bronze sur cette
   page. C'est un lien vers ailleurs.
   Qualifié .home pour la même raison que le bouton plus haut :
   .home a{color:inherit} est plus spécifique qu'une classe seule et
   l'emportait — le lien héritait du crème du corps de page et le
   bronze n'était jamais visible. */
.home .hd__link--regard{color:var(--bronze);opacity:.95}
.hd__lang{display:flex;gap:.8rem;font-size:.6rem;letter-spacing:.2em}
.hd__lang a{text-decoration:none;opacity:.5;color:var(--cream)}
.hd__lang a.is-active{opacity:1}
.hd__toggle{display:none;background:none;border:0;cursor:pointer;
  width:26px;height:18px;position:relative;padding:0}
.hd__toggle span{position:absolute;left:0;right:0;height:1px;background:var(--cream);
  transition:transform .3s ease,opacity .3s ease}
.hd__toggle span:nth-child(1){top:0}
.hd__toggle span:nth-child(2){top:50%}
.hd__toggle span:nth-child(3){bottom:0}
.hd.is-open .hd__toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hd.is-open .hd__toggle span:nth-child(2){opacity:0}
.hd.is-open .hd__toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media(max-width:860px){
  .hd__toggle{display:block;order:3}
  .hd__links{position:fixed;inset:var(--hd) 0 auto 0;flex-direction:column;gap:1.4rem;
    background:rgba(38,31,25,.97);padding:2.4rem var(--pad) 2.8rem;
    transform:translateY(-120%);transition:transform .45s ease}
  .hd.is-open .hd__links{transform:none}
  .hd.is-open{background:rgba(38,31,25,.97)}
  .hd__link{font-size:.72rem}
}

/* ═══════════ PANNEAUX ET BANDES ═══════════ */
.panel,.band{position:relative;width:100%;overflow:hidden;background:var(--dark)}
.panel{height:100svh;min-height:560px}
.panel--96{height:96svh}
.panel--88{height:88svh}
.band{display:grid;gap:0}
.band--2{grid-template-columns:1fr 1fr;height:82svh}
.band--3{grid-template-columns:1fr 1fr 1fr;height:70svh}
.band--4{grid-template-columns:repeat(4,1fr);height:92svh}
.tile{position:relative;overflow:hidden;background:var(--dark)}
.tile img,.panel > img{width:100%;height:100%;object-fit:cover;display:block}
.panel > img{position:absolute;inset:0}
/* Les sections qui changent de photo sur téléphone enveloppent leur
   image dans <picture> : le mobile ne télécharge que la verticale.
   Le cadrage est porté par deux variables plutôt qu'en style inline —
   une même photo ne se recadre pas au même endroit en 3:2 et en 9:16,
   et un style inline empêcherait la bascule. */
.panel > picture,.tile > picture{display:block;width:100%;height:100%}
.panel > picture{position:absolute;inset:0}
.panel > picture > img,.tile > picture > img{width:100%;height:100%;
  object-fit:cover;display:block;object-position:var(--dpos,50% 50%)}

/* voiles — orientés selon la zone sombre réelle de chaque photo */
.veil{position:absolute;inset:0;pointer-events:none}
.veil--top{background:linear-gradient(to bottom,rgba(20,16,12,.80) 0%,rgba(20,16,12,.42) 34%,rgba(20,16,12,0) 62%)}
.veil--bottom{background:linear-gradient(to top,rgba(20,16,12,.84) 0%,rgba(20,16,12,.40) 32%,rgba(20,16,12,0) 62%)}
.veil--left{background:linear-gradient(to right,rgba(20,16,12,.86) 0%,rgba(20,16,12,.48) 36%,rgba(20,16,12,0) 68%)}
.veil--right{background:linear-gradient(to left,rgba(20,16,12,.86) 0%,rgba(20,16,12,.48) 36%,rgba(20,16,12,0) 68%)}
.veil--corner-bl{background:linear-gradient(20deg,rgba(20,16,12,.86) 0%,rgba(20,16,12,.30) 40%,rgba(20,16,12,0) 66%)}
.veil--corner-br{background:linear-gradient(340deg,rgba(20,16,12,.86) 0%,rgba(20,16,12,.30) 40%,rgba(20,16,12,0) 66%)}
.veil--soft{background:rgba(20,16,12,.28)}
/* voile plein, pour une phrase posée au milieu d'une bande d'images :
   les mains montent à 85 de luminance, aucun dégradé de bord ne les
   rattrape. L'image passe en atmosphère, la phrase porte. */
.veil--scrim{background:radial-gradient(118% 78% at 50% 52%,
  rgba(20,16,12,.88) 0%,rgba(20,16,12,.72) 38%,
  rgba(20,16,12,.44) 70%,rgba(20,16,12,.26) 100%)}
/* le voile suit le texte, jamais l'inverse : quand le bloc monte en
   w-tc, le foyer du voile monte avec lui */
.veil--scrim.veil--hi{background:radial-gradient(120% 64% at 50% 26%,
  rgba(20,16,12,.88) 0%,rgba(20,16,12,.70) 40%,
  rgba(20,16,12,.40) 72%,rgba(20,16,12,.18) 100%)}
/* taillé pour les buganvílias : franc à gauche, il libère la droite
   du cadre, là où le visage se devine */
.veil--face{background:linear-gradient(to right,
  rgba(20,16,12,.90) 0%,rgba(20,16,12,.72) 26%,rgba(20,16,12,.34) 46%,
  rgba(20,16,12,.08) 62%,rgba(20,16,12,0) 74%)}

/* texte posé dans le panneau */
.words{position:absolute;inset:0;z-index:3;display:flex;
  padding:calc(var(--hd) + var(--pad)) var(--pad) var(--pad)}
.words__in{width:100%;max-width:var(--max);margin:0 auto;display:flex;
  position:relative;z-index:1}
.w-tl .words__in{align-items:flex-start;justify-content:flex-start}
.w-bl .words__in{align-items:flex-end;justify-content:flex-start}
.w-br .words__in{align-items:flex-end;justify-content:flex-end}
.w-ml .words__in{align-items:center;justify-content:flex-start}
.w-mr .words__in{align-items:center;justify-content:flex-end}
.w-c  .words__in{align-items:center;justify-content:center;text-align:center}
/* Ancrage haut-centre — le seul de la page. La bande des laços porte
   ses trois sujets au milieu du cadre : les mains dans l'eau, les
   mains pleines de sable, la bague. Un texte centré tombe droit
   dessus. Il se pose donc au-dessus, dans la mer et le sable plats du
   haut (les mains commencent à 48 % de la photo du milieu). Le
   rembourrage haut se resserre pour gagner cette marge sans venir
   toucher la barre de navigation. */
.w-tc .words__in{align-items:flex-start;justify-content:center;text-align:center}
.w-tc .words__col{max-width:38rem}
.words.w-tc{padding-top:calc(var(--hd) + 2rem)}
/* Décroche un bloc de son ancrage, sans changer d'ancrage. Le
   rembourrage réduit la boîte par le bas : le texte remonte d'autant s'il
   est calé en bas, de la moitié s'il est centré. Réglage de grand écran
   uniquement — sur téléphone c'est m-top/m-mid/m-bot qui décide, et le
   voile suit. */
.words.up .words__in{padding-bottom:11vh}
.words__col{max-width:34rem}
.w-c .words__col{max-width:38rem}
/* Un même texte ne tombe pas au même endroit sur une photo horizontale
   et sur son recadrage vertical : un bloc de mots peut donc n'exister
   que sur un des deux formats, et changer de photo en passant sur
   téléphone. */
.words--m{display:none}
.w-br .words__col,.w-mr .words__col{text-align:right}
.w-br .actions,.w-mr .actions{justify-content:flex-end}

/* titre d'une série, posé en bas d'une bande */
.serie{position:absolute;left:var(--pad);bottom:var(--pad);z-index:3;
  display:flex;align-items:baseline;gap:1rem}
.serie--right{left:auto;right:var(--pad);text-align:right}
.serie__n{font-family:var(--font-sans);font-size:.6rem;font-weight:500;
  letter-spacing:.26em;color:var(--accent)}
.serie__name{font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1;color:var(--cream)}
.serie__note{display:block;font-family:var(--font-sans);font-style:normal;
  font-size:.74rem;letter-spacing:.02em;color:rgba(240,232,220,.6);margin-top:.5rem}

/* citation */
.quote p{font-family:var(--font-serif);font-size:clamp(1rem,1.45vw,1.2rem);
  line-height:1.66;color:rgba(240,232,220,.88)}
.quote p:first-of-type{font-size:clamp(1.5rem,2.7vw,2.25rem);line-height:1.24;
  color:var(--cream);margin-bottom:1.6rem}

/* ─────────── vidéo d'ouverture ─────────── */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--dark)}
.hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.hero__logo{position:absolute;left:0;right:0;top:34%;z-index:3;
  display:flex;justify-content:center;pointer-events:none}
.hero__logo img{width:min(280px,40vw);height:auto}
/* titre lu par les moteurs et les lecteurs d'écran, jamais affiché :
   le film d'ouverture reste nu */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─────────── fragments du manifeste ───────────
   Le manifeste ne fait jamais bloc : il se dépose morceau par morceau
   sur les images, au fil du défilement, jamais deux fois au même
   endroit du cadre. Serif, sans label — c'est une voix, pas une
   rubrique. L'ombre portée tient la lisibilité là où le voile seul
   ne suffit pas. */
.mf{font-family:var(--font-serif);font-weight:300;
  font-size:clamp(1.06rem,1.5vw,1.34rem);line-height:1.58;
  color:rgba(240,232,220,.92);max-width:36rem;margin-bottom:1.3rem;
  text-shadow:0 1px 26px rgba(20,16,12,.6)}
.mf--close{font-style:italic;color:var(--accent);margin-top:1.5rem;
  font-size:clamp(1rem,1.35vw,1.2rem)}
/* le texte posé sur une bande n'a pas de grand aplat sombre sous lui :
   il lui faut son propre poids */
.band .words__col{text-shadow:0 1px 26px rgba(20,16,12,.6)}

/* ─────────── pied ─────────── */
.ft{padding:3.2rem var(--pad) 3.6rem;background:var(--dark)}
.ft__in{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:1rem;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,232,220,.45)}
.ft a{text-decoration:none}
.ft a:hover{color:var(--cream)}

/* ─────────── apparition ─────────── */
.fi{opacity:0;transform:translateY(18px);transition:opacity 1.1s ease,transform 1.1s ease}
.fi.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fi{opacity:1;transform:none;transition:none}}

/* ─────────── mobile ─────────── */
@media(max-width:860px){
  .panel,.panel--96,.panel--88{height:88svh;min-height:520px}
  /* Sur téléphone chaque bande se réduit à une seule photo verticale,
     plein cadre : une grille de vignettes n'a aucune force sur 375px
     de large. Les autres tuiles sortent du flux. */
  .band--2,.band--3,.band--4{grid-template-columns:1fr;height:88svh;min-height:520px}
  .band .tile{height:100%}
  .tile--alt{display:none}
  .panel > picture > img,.tile > picture > img{
    object-position:var(--mpos,var(--dpos,50% 50%))}
  .words--d{display:none}
  .words--m{display:flex}
  .words.up .words__in{padding-bottom:0}
  .words{padding:calc(var(--hd) + 1.2rem) var(--pad) 2.4rem}
  .w-c .words__in{text-align:left;justify-content:flex-start}
  .w-br .words__col,.w-mr .words__col{text-align:left}
  .w-br .actions,.w-mr .actions{justify-content:flex-start}
  .serie,.serie--right{left:var(--pad);right:auto;bottom:1.4rem;text-align:left}

  /* ─── Ancrage du texte, photo par photo ───
     Les voiles du desktop sont taillés tiers par tiers sur des photos
     horizontales : recadrés en vertical ils tombent à côté, et le texte
     finit sur les visages. Chaque section déclare donc où se trouve la
     zone libre de SA photo. Zone libre = bande plate et sombre (faible
     écart-type de luminance) ; une bande contrastée, c'est un corps ou
     un visage, on n'y écrit pas. Le voile suit l'ancrage, jamais
     l'inverse. */
  .words::before{content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(20,16,12,.95) 0%,rgba(20,16,12,.80) 32%,
      rgba(20,16,12,.32) 64%,rgba(20,16,12,0) 90%)}
  .words.m-top .words__in{align-items:flex-start}
  .words.m-mid .words__in{align-items:center}
  .words.m-bot .words__in{align-items:flex-end}
  .words.m-top::before{background:linear-gradient(to bottom,rgba(20,16,12,.95) 0%,
    rgba(20,16,12,.80) 30%,rgba(20,16,12,.32) 62%,rgba(20,16,12,0) 88%)}
  .words.m-mid::before{background:linear-gradient(to bottom,rgba(20,16,12,0) 0%,
    rgba(20,16,12,.32) 12%,rgba(20,16,12,.88) 30%,rgba(20,16,12,.88) 70%,
    rgba(20,16,12,.32) 88%,rgba(20,16,12,0) 100%)}
  .words.m-bot::before{background:linear-gradient(to top,rgba(20,16,12,.95) 0%,
    rgba(20,16,12,.80) 32%,rgba(20,16,12,.32) 64%,rgba(20,16,12,0) 90%)}
  /* Deux paragraphes sur une seule photo, en haut et en bas.
     Sur téléphone la bande des laços se réduit à m-05, et deux
     sections desktop (la technique, les laços) doivent y tenir : la
     photo précédente est un baiser en gros plan, on n'écrit pas
     dessus. m-05 a justement deux zones plates — le feuillage sombre
     du haut, le sable du bas — et le visage entre les deux.
     Les voiles pleine hauteur se recouvriraient et noieraient la
     photo : ceux-ci meurent avant la mi-hauteur, le visage reste
     dégagé et encadré par les deux blocs. */
  .words--half.m-top::before{background:linear-gradient(to bottom,
    rgba(20,16,12,.95) 0%,rgba(20,16,12,.80) 20%,
    rgba(20,16,12,.28) 38%,rgba(20,16,12,0) 50%)}
  .words--half.m-bot::before{background:linear-gradient(to top,
    rgba(20,16,12,.95) 0%,rgba(20,16,12,.80) 20%,
    rgba(20,16,12,.28) 38%,rgba(20,16,12,0) 50%)}
  /* le bloc du haut ne doit pas intercepter ce qui se passe en bas */
  .words--half{pointer-events:none}

  /* sur 375px tout revient à gauche, quel que soit l'ancrage desktop */
  .words__in{justify-content:flex-start;text-align:left}
  .words__col{text-align:left;max-width:none}
  .actions{justify-content:flex-start}
  /* la variante haute doit être neutralisée nommément : deux classes
     l'emportent sur une, elle repasserait devant */
  .veil--scrim,.veil--scrim.veil--hi{background:none}

  /* Le bloc hôtels porte plus de texte que sa photo n'a de place : le
     visage tient le haut du cadre, la main à la bague le milieu, et il
     ne reste pas 400px d'un seul tenant. Le texte déborde donc sous la
     section, sur le haut de l'image suivante, en emportant son voile
     avec lui — la bague reste dégagée. */
  #hoteis{overflow:visible;z-index:2}
  #hoteis .words{bottom:-160px}
}