/* ==========================================================================
   OROSKI — Design System
   Palette : crème (fond), bleu profond (autorité), beige/laiton (accent rare)
   Display : Fraunces (serif à empattements marqués, élégance intemporelle)
   Body    : Inter (lisibilité, discrétion)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

/* ==========================================================================
   OROSKI — Design System (Quiet Luxury)
   Palette : blanc cassé (fond), bleu canard profond (autorité), pierre grise (accent minéral)
   Display : Cormorant Garamond (serif fin, intemporel)
   Body    : EB Garamond (lisibilité éditoriale)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --cream:        #F6F4F0;
  --cream-soft:   #FBFAF7;
  --cream-deep:   #E9E6DF;
  --ink:          #202422;
  --blue-deep:    #17494E;
  --blue-mid:     #24636A;
  --blue-line:    rgba(14,58,62,0.16);
  --stone:        #8C897F;
  --stone-light:   #C9C6BB;
  --white:        #FFFFFF;

  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
  --font-ui: 'Inter', sans-serif;

  --container: 1180px;
  --edge: clamp(24px, 6vw, 96px);

  --ease: cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; margin:0; color:var(--blue-deep); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--stone);
  outline-offset:3px;
}

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); }

/* ---------- Eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stone);
  font-weight:600;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 30px;
  border-radius:2px;
  font-family:var(--font-ui);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary:hover{ box-shadow:0 14px 28px -14px rgba(14,58,62,.45); }
.btn-primary{
  background:var(--blue-deep);
  color:var(--cream-soft);
  border-color:var(--blue-deep);
}
.btn-primary:hover{ background:var(--cream-soft); border-color:var(--cream-soft); color:var(--blue-deep); }
.btn-ghost{
  background:transparent;
  color:var(--blue-deep);
  border-color:var(--blue-line);
}
.btn-ghost:hover{ border-color:var(--blue-deep); }
.btn-ghost.on-dark{ color:var(--cream-soft); border-color:rgba(246,241,231,0.35); }
.btn-ghost.on-dark:hover{ border-color:var(--cream-soft); }

.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-ui); font-size:14px; letter-spacing:.02em;
  padding-bottom:3px; border-bottom:1px solid currentColor;
}
.link-arrow svg{ width:15px; height:15px; transition:transform .4s var(--ease); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px var(--edge);
  display:flex; align-items:center; justify-content:space-between;
  transition:padding .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.is-scrolled{
  padding:14px var(--edge);
  background:rgba(246,241,231,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--blue-line);
}
.nav-logo{
  position:absolute; left:50%; transform:translateX(-50%);
  align-self:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:33px;
  letter-spacing:.3em;
  color:var(--cream-soft);
  transition:color .5s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center; line-height:1;
}
.nav-logo-sub{
  font-family:var(--font-ui);
  font-size:10px; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--stone-light);
}
.nav.is-scrolled .nav-logo-sub, .nav.on-light .nav-logo-sub{ color:var(--stone); }
.nav.is-scrolled .nav-logo, .nav.on-light .nav-logo{ color:var(--blue-deep); }
.nav-links{
  display:flex; align-items:center; gap:34px;
  list-style:none; margin:0; padding:0;
}
.nav-links-wrap{ display:contents; }
.nav-links a{
  font-family:var(--font-ui);
  font-size:12.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(246,241,231,0.86);
  transition:color .4s var(--ease);
  position:relative;
  padding-bottom:4px;
}
.nav.is-scrolled .nav-links a, .nav.on-light .nav-links a{ color:var(--blue-mid); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor;
  transition:right .4s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-cta{
  padding:11px 22px; font-size:11.5px;
}
.nav-toggle{ display:none; }

@media (max-width: 760px){
  .nav-links-wrap{
    display:block;
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw); height:100vh;
    background:var(--blue-deep);
    padding:120px 40px 40px;
    overflow-y:auto;
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .nav-links-wrap.open{ transform:translateX(0); }
  .nav-links{
    flex-direction:column; align-items:flex-start; gap:22px; flex:none;
  }
  .nav-links-right{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(246,241,231,.16); }
  .nav-links a{ color:var(--cream-soft) !important; font-size:14px; }
  .nav-links .nav-cta{ color:var(--blue-deep) !important; background:var(--cream-soft); border-color:var(--cream-soft); }
  .nav-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; z-index:110; padding:8px;
    margin-left:auto;
  }
  .nav-toggle span{ width:24px; height:1px; background:var(--cream-soft); transition:all .4s var(--ease); }
  .nav.is-scrolled .nav-toggle span, .nav.on-light .nav-toggle span{ background:var(--blue-deep); }
  .nav-toggle.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* ---------- Signature emblem (compass mark) ----------
   Fil rouge visuel : un trait de compas ouvert, dessiné à la main,
   symbole de l'accès sans limite ("nulle part n'est hors d'atteinte").
   Réutilisé : loader, séparateurs de section, filigrane de la page adhésion. */
.emblem{ display:block; }
.emblem path, .emblem circle{ vector-effect:non-scaling-stroke; }

.divider{
  display:flex; align-items:center; justify-content:center;
  gap:18px; margin:0 auto;
}
.divider .line{ width:56px; height:1px; background:var(--blue-line); }
.divider .emblem{ width:26px; height:26px; opacity:.75; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  color:var(--cream-soft);
  overflow:hidden;
  background:var(--blue-deep);
}
.hero-media{
  position:absolute; inset:0; overflow:hidden;
}
.hero-media img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,58,62,.32) 0%, rgba(14,58,62,.28) 40%, rgba(14,58,62,.82) 100%);
}
.hero::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background-image:
    linear-gradient(rgba(246,241,231,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,231,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 75%);
  pointer-events:none;
}
.hero-emblem-bg{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(52vw, 640px); height:min(52vw, 640px); opacity:.14; color:var(--stone-light);
  pointer-events:none; z-index:1;
  animation:emblemDrift 40s linear infinite;
  transform-origin:center;
}
@keyframes emblemDrift{ from{ transform:translateY(-50%) rotate(0deg);} to{ transform:translateY(-50%) rotate(360deg);} }
.hero-inner{ position:relative; z-index:2; padding-bottom:22vh; width:100%; }
.hero-eyebrow{ color:var(--stone-light); opacity:0; transform:translateY(14px); animation:heroIn .9s var(--ease) .15s forwards; }
.hero h1{
  color:var(--cream-soft);
  font-size:clamp(40px, 6.2vw, 92px);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.01em;
  max-width:16ch;
  margin-top:22px;
  opacity:0; transform:translateY(20px); animation:heroIn 1s var(--ease) .32s forwards;
}
.hero h1 em{ font-style:italic; color:var(--stone-light); font-weight:300; }
.hero-sub{
  margin-top:26px; max-width:44ch; font-size:17px; color:rgba(246,241,231,.86); font-weight:300;
  opacity:0; transform:translateY(16px); animation:heroIn .9s var(--ease) .52s forwards;
}
.hero-actions{
  margin-top:44px; display:flex; gap:16px; flex-wrap:wrap;
  opacity:0; transform:translateY(16px); animation:heroIn .9s var(--ease) .68s forwards;
}
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
.hero-scroll{
  position:absolute; right:var(--edge); bottom:6vh; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(246,241,231,.7); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll .stem{ width:1px; height:52px; background:rgba(246,241,231,.4); position:relative; overflow:hidden; }
.hero-scroll .stem::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--stone-light);
  animation:scrollLine 2.6s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

.hero-quiet{
  min-height:64vh; display:flex; align-items:flex-end; padding-top:180px;
}

/* ---------- Section rhythm ---------- */
section{ position:relative; }
.section{ padding:128px 0; }
.section-tight{ padding:88px 0; }
.section-head{ max-width:640px; }
.section-head h2{ font-size:clamp(30px,3.6vw,48px); font-weight:400; line-height:1.14; margin-top:16px; }
.section-head p{ margin-top:20px; font-size:16.5px; color:var(--blue-mid); max-width:52ch; }

.on-blue{ background:var(--blue-deep); color:var(--cream-soft); }
.on-blue h2, .on-blue h3, .on-blue h4{ color:var(--cream-soft); }
.on-blue .section-head p{ color:rgba(246,241,231,.78); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-delay-1{ transition-delay:.08s; }
.reveal-delay-2{ transition-delay:.16s; }
.reveal-delay-3{ transition-delay:.24s; }

/* Apparition en fondu-zoom pour les visuels (inspirée des transitions douces entre
   photos plein cadre d'un site de conciergerie de référence) */
.reveal-photo{ opacity:0; transform:scale(1.06); transition:opacity 1.1s var(--ease), transform 1.3s var(--ease); }
.reveal-photo.is-visible{ opacity:1; transform:scale(1); }

/* ---------- Values grid (philosophie) ---------- */
.values-grid{
  margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--blue-line); border:1px solid var(--blue-line);
}
.value-card{ background:var(--cream); padding:44px 32px; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.value-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px -24px rgba(14,58,62,.35); }
.value-card .emblem{ width:30px; height:30px; margin-bottom:26px; color:var(--stone); transition:transform .5s var(--ease); }
.value-card:hover .emblem{ transform:scale(1.12) rotate(-6deg); }
.value-card h3{ font-size:19px; font-weight:500; }
.value-card p{ margin-top:12px; font-size:14.5px; color:var(--blue-mid); line-height:1.65; }
@media (max-width:960px){ .values-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .values-grid{ grid-template-columns:1fr; } }

/* ---------- Numbered features (façon référence : grand chiffre + trait fin) ---------- */
.numbered-grid{
  margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:40px;
}
.numbered-item .num{
  font-family:var(--font-display); font-weight:400; font-size:34px; color:var(--blue-deep); opacity:.85;
}
.numbered-item .rule{ margin-top:18px; height:1px; background:var(--blue-line); }
.numbered-item h3{ margin-top:26px; font-size:18px; font-weight:500; color:var(--blue-deep); }
.numbered-item p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--blue-mid); }
.on-blue .numbered-item .num{ color:var(--cream-soft); }
.on-blue .numbered-item .rule{ background:rgba(246,241,231,.3); }
.on-blue .numbered-item h3{ color:var(--cream-soft); }
.on-blue .numbered-item p{ color:rgba(246,241,231,.72); }
@media (max-width:860px){ .numbered-grid{ grid-template-columns:1fr 1fr; row-gap:48px; } }
@media (max-width:480px){ .numbered-grid{ column-gap:20px; } }
.numbered-grid-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .numbered-grid-3{ grid-template-columns:1fr 1fr; row-gap:48px; } }
@media (max-width:480px){ .numbered-grid-3{ column-gap:20px; } }

/* ---------- Category tiles (mosaïque photo, flèche au survol) ---------- */
.category-tiles{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.category-tile{ display:block; }
.category-tile .cat-label{ font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--blue-deep); margin-bottom:16px; }
.category-tile .cat-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cream-deep);
}
.category-tile .cat-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.category-tile:hover .cat-media img{ transform:scale(1.06); }
.category-tile .cat-arrow{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85);
  width:52px; height:52px; border-radius:50%;
  background:rgba(246,241,231,.16); backdrop-filter:blur(3px);
  border:1px solid rgba(246,241,231,.5);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.category-tile .cat-arrow svg{ width:20px; height:20px; color:var(--cream-soft); }
.category-tile:hover .cat-arrow{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (max-width:860px){ .category-tiles{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .category-tiles{ grid-template-columns:1fr; } }

/* ---------- Watermark letters (grandes lettres en filigrane, façon référence) ---------- */
.section-watermark{ position:relative; overflow:hidden; }
.watermark-letter{
  position:absolute; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:500;
  color:var(--blue-deep); opacity:.06;
  line-height:.8; user-select:none;
}
.watermark-letter-1{ left:0vw; top:-8vw; font-size:34vw; z-index:0; }
.watermark-letter-2{ left:20vw; top:0vw; font-size:30vw; opacity:.055; z-index:0; }
.watermark-letter-3{ left:9vw; top:16vw; font-size:34vw; z-index:0; }
.section-watermark .container{ position:relative; z-index:1; }
@media (max-width:760px){
  .watermark-letter-2{ display:none; }
}

/* ---------- Contact card (panneau centré sur fond photo, façon référence) ---------- */
.contact-photo-section{ position:relative; overflow:hidden; padding:120px 0; }
.contact-photo-section img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.contact-photo-section::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,58,62,.75), rgba(14,58,62,.6));
}
.contact-card{
  position:relative; z-index:2; max-width:460px; margin:0 auto;
  background:rgba(246,241,231,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(246,241,231,.35);
}
.contact-card-row{ padding:30px 34px; border-bottom:1px solid rgba(246,241,231,.25); text-align:center; }
.contact-card-row:last-child{ border-bottom:none; }
.contact-card-row h2{ color:var(--cream-soft); font-size:32px; font-weight:400; }
.contact-card-row p{ color:rgba(246,241,231,.85); font-size:15px; }
.contact-card-links{ display:flex; justify-content:center; gap:36px; flex-wrap:wrap; }
.contact-card-links a{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:13.5px; letter-spacing:.04em; color:var(--cream-soft);
  border-bottom:1px solid rgba(246,241,231,.5); padding-bottom:3px;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.contact-card-links a:hover{ color:var(--stone-light); border-color:var(--stone-light); }
.contact-card-links svg{ width:15px; height:15px; }

.request-form-card{
  position:relative; z-index:2; max-width:820px; margin:0 auto;
  background:rgba(246,241,231,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(246,241,231,.35);
  padding:44px;
}
.request-form-card .field label{ color:rgba(246,241,231,.85); }
.request-form-card .field input, .request-form-card .field textarea{
  background:rgba(246,241,231,.12); border-color:rgba(246,241,231,.35); color:var(--cream-soft);
}
.request-form-card .field input:focus, .request-form-card .field textarea:focus{
  background:rgba(246,241,231,.2); border-color:var(--cream-soft);
}
.request-form-card .field input::placeholder, .request-form-card .field textarea::placeholder{
  color:rgba(246,241,231,.55);
}
.request-form-card .form-note{ color:rgba(246,241,231,.7); }
.request-form-card .form-status{ color:var(--stone-light); }
.request-form-card .btn-ghost{ color:var(--cream-soft); border-color:rgba(246,241,231,.5); }
.request-form-card .btn-ghost:hover{ border-color:var(--cream-soft); }
@media (max-width:640px){ .request-form-card{ padding:28px; } }

/* ---------- Editorial image/text split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{ aspect-ratio:4/5; overflow:hidden; background:var(--cream-deep); }
.split-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.split-media:hover img{ transform:scale(1.05); }
/* Emplacement visuel en attendant vos photographies de marque :
   remplacer le contenu de .img-placeholder par une balise <img>. */
.img-placeholder{
  width:100%; height:100%; position:relative;
  background:
    linear-gradient(135deg, transparent 48%, rgba(14,58,62,.08) 49%, rgba(14,58,62,.08) 51%, transparent 52%),
    var(--cream-deep);
  display:flex; align-items:center; justify-content:center;
}
.img-placeholder .emblem{ width:15%; height:auto; color:var(--blue-deep); opacity:.28; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split.reverse{ direction:ltr; } }

/* ---------- Services teaser / grid ---------- */
.services-list{ margin-top:60px; border-top:1px solid var(--blue-line); }
.service-row{
  display:grid; grid-template-columns:1fr 2.4fr; gap:40px; align-items:center;
  padding:38px 0; border-bottom:1px solid var(--blue-line);
  transition:background .4s var(--ease);
}
.service-row:hover{ background:rgba(140,137,127,0.08); }
.service-row h3{ font-size:22px; font-weight:500; }
.service-row p{ color:var(--blue-mid); font-size:14.5px; }
.service-row .idx{ font-family:var(--font-ui); font-size:13px; color:var(--stone); letter-spacing:.08em; font-weight:600; }
@media (max-width:760px){ .service-row{ grid-template-columns:1fr; gap:10px; } }

/* ---------- Membership cards ---------- */
.plans{ margin-top:64px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--blue-line); border:1px solid var(--blue-line); }
.plans.plans-3{ grid-template-columns:1fr 1fr 1fr; }
.plan{ background:var(--cream-soft); padding:56px 46px; display:flex; flex-direction:column; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.plan:hover{ transform:translateY(-6px); box-shadow:0 24px 48px -28px rgba(14,58,62,.4); z-index:1; }
.plan.plan-signature{ background:var(--blue-deep); color:var(--cream-soft); }
.plan.plan-freeform{ background:var(--cream-deep); }
.plan.plan-freeform .plan-price{ color:var(--stone); font-family:var(--font-display); font-style:italic; font-weight:400; }
.plan.plan-signature h3, .plan.plan-signature .plan-price{ color:var(--cream-soft); }
.plan-eyebrow{ font-family:var(--font-ui); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); }
.plan h3{ margin-top:14px; font-size:26px; font-weight:500; padding-bottom:16px; border-bottom:1px solid var(--blue-line); }
.plan.plan-signature h3{ border-bottom-color:rgba(246,241,231,.25); }
.plan.plan-freeform h3{ border-bottom-color:var(--blue-line); }
.plan-price{ margin-top:22px; font-family:var(--font-display); font-size:44px; color:var(--blue-deep); }
.plan-price span{ font-size:14px; font-family:var(--font-body); color:var(--blue-mid); font-weight:400; }
.plan.plan-signature .plan-price span{ color:rgba(246,241,231,.7); }
.plan-desc{ margin-top:16px; font-size:14.5px; color:var(--blue-mid); }
.plan.plan-signature .plan-desc{ color:rgba(246,241,231,.78); }
.plan-list{ list-style:none; margin:32px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; flex:1; }
.plan-list li{ font-size:14px; padding-left:22px; position:relative; }
.plan-list li::before{ content:'—'; position:absolute; left:0; color:var(--stone); }
.plan .btn{ margin-top:36px; align-self:flex-start; }
@media (max-width:1080px){ .plans.plans-3{ grid-template-columns:1fr 1fr; } .plan-freeform{ grid-column:1/-1; } }
@media (max-width:640px){ .plans{ grid-template-columns:1fr; } .plan-freeform{ grid-column:auto; } }

/* ---------- Quote ---------- */
.quote{ max-width:820px; margin:0 auto; text-align:center; }
.quote p{ font-family:var(--font-display); font-style:italic; font-weight:300; font-size:clamp(24px,3vw,36px); line-height:1.5; color:var(--cream-soft); }
.quote cite{ display:block; margin-top:26px; font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-light); }

/* ---------- Stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:60px; }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(30px,3vw,42px); font-weight:400; color:var(--stone); }
.stat span{ font-family:var(--font-ui); font-size:12.5px; letter-spacing:.06em; color:var(--blue-mid); }
.on-blue .stat span{ color:rgba(246,241,231,.7); }
@media (max-width:760px){ .stats{ grid-template-columns:1fr 1fr; } }

/* ---------- CTA band ---------- */
.cta-band{ padding:100px 0; text-align:center; }
.cta-band h2{ font-size:clamp(28px,3.4vw,44px); max-width:18ch; margin:16px auto 0; }
.cta-band .actions{ margin-top:38px; display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ---------- Form ---------- */
.request-form{ margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:26px 28px; }
@media (max-width:640px){ .request-form{ grid-template-columns:1fr; gap:22px; } }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--font-ui); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-mid); }
.field input, .field select, .field textarea{
  background:var(--cream-soft); border:1px solid var(--blue-line); border-radius:1px;
  padding:14px 16px; font-family:var(--font-ui); font-size:15px; color:var(--ink);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--stone); background:var(--white); outline:none; }
.field textarea{ resize:vertical; min-height:140px; }
.form-note{ grid-column:1/-1; font-size:12.5px; font-family:var(--font-ui); color:var(--blue-mid); opacity:.8; }
.form-submit{ grid-column:1/-1; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-status{ font-size:13px; font-family:var(--font-ui); color:var(--stone); }

/* ---------- Contact/coords ---------- */
.contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--blue-line); border:1px solid var(--blue-line); margin-top:60px; }
.contact-info div{ background:var(--cream-soft); padding:34px; }
.contact-info .eyebrow{ display:block; margin-bottom:10px; }
@media (max-width:760px){ .contact-info{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.footer{ background:var(--blue-deep); color:rgba(246,241,231,.75); padding:80px 0 34px; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(246,241,231,.14); }
.footer-brand .nav-logo{ color:var(--cream-soft); align-items:flex-start; text-align:left; }
.footer-brand p{ margin-top:0; font-size:13.5px; max-width:32ch; color:rgba(246,241,231,.6); }
.footer h4{ color:var(--cream-soft); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--font-ui); font-weight:600; margin-bottom:20px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.footer a{ font-family:var(--font-ui); font-size:13.5px; color:rgba(246,241,231,.72); transition:color .3s var(--ease); }
.footer a:hover{ color:var(--stone-light); }
.footer-bottom{ padding-top:30px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--font-ui); font-size:12px; color:rgba(246,241,231,.5); }
@media (max-width:860px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ---------- Page header (pages secondaires) ---------- */
.page-header{
  position:relative; overflow:hidden;
  padding:180px 0 90px; background:var(--blue-deep); color:var(--cream-soft);
  background-image:radial-gradient(ellipse at 85% 0%, rgba(201,198,187,.14), transparent 55%);
}
.page-header .container{ position:relative; z-index:1; }
.page-header h1{ color:var(--cream-soft); font-size:clamp(34px,5.2vw,76px); font-weight:400; margin-top:16px; max-width:42ch; position:relative; }
.page-header h1 em{ font-style:italic; font-weight:300; color:var(--stone-light); }
.page-header p{ margin-top:20px; max-width:46ch; color:rgba(246,241,231,.78); font-size:16px; position:relative; }

.page-header-light{ background:var(--cream); background-image:none; color:var(--blue-deep); }
.page-header-light .eyebrow{ color:var(--stone); }
.page-header-light h1{ color:var(--blue-deep); }
.page-header-light h1 em{ color:var(--stone); }
.page-header-light p{ color:var(--blue-mid); }

.page-header-photo{ background:var(--blue-deep); background-image:none; }
.page-header-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.page-header-media img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.page-header-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(23,73,78,.92) 0%, rgba(23,73,78,.72) 42%, rgba(23,73,78,.38) 100%);
}

/* ---------- Section avec photo de fond en transparence (derrière des cartes) ---------- */
.section-bg-photo{ position:relative; overflow:hidden; }
.section-bg-media{ position:absolute; inset:0; z-index:0; }
.section-bg-media img{ width:100%; height:100%; object-fit:cover; opacity:.6; }
.section-bg-media::after{ content:''; position:absolute; inset:0; background:var(--cream); opacity:.22; }
.section-bg-photo .container{ position:relative; z-index:1; }

.page-header .floral{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  width:100%; height:auto; opacity:.16; color:var(--stone-light);
  pointer-events:none;
}

/* ---------- Photo band (bande photo plein cadre) ---------- */
.photo-band{ position:relative; height:56vh; min-height:380px; overflow:hidden; }
.photo-band img{ width:100%; height:100%; object-fit:cover; }
.photo-band-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:40px var(--edge);
  background:linear-gradient(0deg, rgba(14,58,62,.82), transparent);
  color:var(--cream-soft);
}
.photo-band-caption p{ margin-top:10px; font-family:var(--font-display); font-size:clamp(19px,2vw,26px); font-style:italic; font-weight:400; max-width:44ch; }

/* ---------- utility ---------- */
.mt-xl{ margin-top:64px; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* ---------- Pages légales ---------- */
.legal-block{ margin-bottom:44px; }
.legal-block h2{ font-size:19px; font-weight:500; margin-bottom:14px; }
.legal-block p{ color:var(--blue-mid); font-size:15px; line-height:1.75; }
.legal-block a{ color:var(--blue-deep); text-decoration:underline; text-underline-offset:2px; }
.to-fill{ color:var(--stone); font-style:italic; background:rgba(140,137,127,.12); padding:1px 6px; border-radius:2px; }