/* California Collection : feuille de style commune (page d'attente, mentions légales, 404) */
@font-face{font-family:"California Display";src:url("fonts/california-display.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-italic.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* Une seule encre : Basalte. Cognac pour les petits repères. Le bleu ne vient que des photos. */
:root{
  --ecume:#F1EEE6; --sable:#BFAA8A; --cognac:#80582F; --basalte:#342019;
  --ink:var(--basalte); --ink-soft:rgba(52,32,25,.72); --line:rgba(52,32,25,.14);
  --pad:max(20px,4.4vw); --hd:80px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --cal:"California Display","Playfair Display",Georgia,serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ecume);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
p,h1,h2,h3,figure,ul{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{font-weight:400}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--cognac);outline-offset:3px}
.kicker{display:block;font-size:12px;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--cognac)}
.cal{font-family:var(--cal);font-weight:400;text-transform:uppercase;letter-spacing:.01em}

/* Page d'attente : un seul écran, la photo très assombrie, une carte de verre en relief façon « Liquid Glass » d'Apple */
body.attente{display:grid;place-items:center;height:100svh;min-height:0;overflow:hidden;background:#0d0a08;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(52px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px))}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.fond{position:fixed;inset:0;z-index:0;overflow:hidden}
.fond img{width:100%;height:100%;object-fit:cover}
.fond::after{content:"";position:absolute;inset:0;background:radial-gradient(115% 88% at 50% 46%,rgba(12,9,7,.62) 0%,rgba(12,9,7,.80) 68%,rgba(12,9,7,.9) 100%)}
.scene{position:relative;z-index:1;display:grid;place-items:center;width:100%;max-height:100%}
/* relief : chaque couche reçoit la même rotation avec sa propre perspective */
.carte{position:relative;width:min(960px,100%);--incl:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));--r:48px}
/* le verre : la photo du fond, à peine floutée, aussi sombre qu'autour et alignée par le script ; près des bords elle est déformée comme par la tranche d'une lentille */
.verre{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;transform:var(--incl);will-change:transform;background:#1c1814;--img:url("img/fond-dunes.jpg");
  box-shadow:0 80px 150px -50px rgba(0,0,0,.95),0 26px 50px -26px rgba(0,0,0,.65)}
.verre .vi{position:absolute;inset:0;background:var(--img) center/cover no-repeat;filter:blur(3px) brightness(.35) saturate(1.1)}
.lentille .verre .vi{filter:url(#lentille) blur(3px) brightness(.35) saturate(1.1)}
/* voile pour la lecture, lumière plus vive en haut, épaisseur : liseré clair au-dessus, ombre interne en dessous */
.verre::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 30%),linear-gradient(135deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.03) 100%);
  box-shadow:inset 2px 2px 1px -1px rgba(255,255,255,.55),inset -2px -2px 1px -1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 22px rgba(255,255,255,.09),inset 0 18px 32px -24px rgba(255,255,255,.3),inset 0 -22px 40px -26px rgba(0,0,0,.5)}
@media (max-width:720px){.verre{--img:url("img/fond-dunes-m.jpg")}}
/* reflet qui suit la lumière (souris) et liseré spéculaire, plus vif en haut à gauche et en bas à droite */
.reflet{position:absolute;inset:0;border-radius:var(--r);pointer-events:none;transform:var(--incl) translateZ(2px);mix-blend-mode:screen;
  background:radial-gradient(48% 40% at var(--hx,32%) var(--hy,22%),rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 46%,rgba(255,255,255,0) 72%)}
.reflet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:linear-gradient(var(--ang,135deg),rgba(255,255,255,.95) 0%,rgba(255,255,255,.4) 12%,rgba(255,255,255,.08) 32%,rgba(255,255,255,.03) 50%,rgba(255,255,255,.08) 68%,rgba(255,255,255,.4) 88%,rgba(255,255,255,.85) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.contenu{position:relative;display:grid;justify-items:center;gap:clamp(10px,2.6svh,28px);padding:clamp(24px,8.4svh,92px) clamp(28px,7.5vw,120px);text-align:center;color:var(--ecume);transform:var(--incl) translateZ(64px);will-change:transform}
.contenu .poincon{display:block;height:clamp(36px,10.6svh,96px);width:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.contenu .logo{display:block;width:min(640px,100%,calc(24svh * 3.24));height:auto;margin-top:clamp(0px,1svh,10px);filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.contenu .filet{display:block;width:52px;height:1px;background:rgba(241,238,230,.45)}
.contenu .ligne{font-family:var(--serif);font-size:clamp(18px,3.1svh,28px);line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.contenu .bientot{font-size:clamp(11px,1.5svh,13px);line-height:1.4;letter-spacing:.32em;text-transform:uppercase;color:var(--sable)}
.pied{position:fixed;left:0;right:0;bottom:0;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:6px 12px;padding:0 20px calc(18px + env(safe-area-inset-bottom,0px));font-size:11px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,238,230,.72)}
.pied a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .3s}
.pied a:hover{color:var(--ecume)}
.motion .scene{animation:monte 1.6s var(--ease) .15s both}
.motion .verre,.motion .reflet,.motion .contenu{animation:fondu 1.4s var(--ease) .15s both}
@keyframes monte{from{transform:translateY(22px) scale(.985)}to{transform:none}}
@keyframes fondu{from{opacity:0}to{opacity:1}}

/* Barre du haut (mentions légales) */
.hd{position:fixed;inset:0 0 auto 0;z-index:10;height:calc(var(--hd) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) max(var(--pad),env(safe-area-inset-right,0px)) 0 max(var(--pad),env(safe-area-inset-left,0px));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;transition:background-color .6s var(--ease),border-color .6s var(--ease),height .5s var(--ease);border-bottom:1px solid transparent}
.hd.solid{--hd:64px;background:rgba(241,238,230,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.hd-l{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.hd-cc{display:block;height:48px;transition:height .5s var(--ease)}
.hd.solid .hd-cc{height:40px}
.hd-cc img{height:100%;width:auto}
.hd-r{justify-self:end;font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:12px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 9px)/0 1px no-repeat;transition:background-size .45s var(--ease),color .3s}
.hd-r:hover{background-size:100% 1px;color:var(--cognac)}

/* Pied de page (mentions légales) */
.ft{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:24px max(var(--pad),env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px));border-top:1px solid var(--line);font-size:13px;color:var(--ink-soft)}
.ft a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.ft a:hover{color:var(--cognac)}

/* Mentions légales */
.legal{max-width:760px;margin:0 auto;padding:calc(var(--hd) + 64px + env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) 96px max(var(--pad),env(safe-area-inset-left,0px))}
.legal h1{font-family:var(--cal);text-transform:uppercase;font-size:clamp(34px,4vw,52px);line-height:1;margin:14px 0 40px}
.legal h2{font-family:var(--serif);font-size:22px;margin:36px 0 10px}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:10px}
.legal a{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Téléphone */
@media (max-width:720px){
  :root{--hd:62px}
  .hd.solid{--hd:56px}
  .hd-cc,.hd.solid .hd-cc{height:36px}
  .carte{--r:32px}
  .ft{flex-direction:column;align-items:center;text-align:center}
}