/* =====================================================
   A SULANA — STYLES PARTAGÉS — Multi-pages
   ===================================================== */

/* FONTS */
@font-face {
  font-family: 'La Parisienne Sans';
  src: url('assets/fonts/La_Parisienne_Sans_Regular.otf') format('opentype');
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Square Peg';
  src: url('assets/fonts/SquarePeg-Regular.ttf') format('truetype');
  font-weight: normal;
  font-display: swap;
}

/* RESET + VARIABLES */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --tc:   #C4622D;
  --tc-l: #D97B4F;
  --cr:   #F0EAD6;
  --wh:   #FAF7F0;
  --fo:   #4A5A2A;
  --mq:   #5A6B3A;
  --sg:   #8A9E7A;
  --or:   #D4A020;
  --sb:   #E8C97A;
  --bk:   #0D0D0D;
  --ft: 'La Parisienne Sans', sans-serif;
  --fs: 'Cormorant Garamond', serif;
  --fb: 'Raleway', sans-serif;
  --fd: 'Square Peg', cursive;
  --ease: cubic-bezier(.16,1,.3,1);
}
html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--cr); color: var(--bk); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { text-decoration: none; }

/* ─── REVEAL ──────────────────────────────────────── */
.rv {
  opacity:0; transform:translateY(32px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.rv.vis { opacity:1; transform:translateY(0); }
.rv-d1  { transition-delay:.12s }
.rv-d2  { transition-delay:.24s }
.rv-d3  { transition-delay:.38s }
.rv-d4  { transition-delay:.52s }
.rv-l   { opacity:0; transform:translateX(-36px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv-l.vis { opacity:1; transform:translateX(0); }

/* ─── NAVBAR ──────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.8rem 2.5rem;
  transition: background .5s ease, padding .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
  /* Bande floue permanente subtile pour bien voir les onglets sur photos */
  background: linear-gradient(to bottom, rgba(13,13,13,.32), rgba(13,13,13,0));
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.nav.sc {
  background: rgba(240,234,214,.92);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  padding: 1rem 2.5rem;
  box-shadow: 0 6px 24px rgba(13,13,13,.08);
}
.nav-logo { display:flex; flex-direction:column; gap:.1rem; position:relative; text-decoration:none; }
.nav-brand { font-family:var(--ft); font-size:1.1rem; letter-spacing:.15em; color:var(--cr); line-height:1; transition:color .4s ease; }
.nav-sub { font-family:var(--fb); font-size:.45rem; font-weight:300; letter-spacing:.28em; text-transform:uppercase; color:rgba(240,234,214,.6); transition:color .4s ease; }
.nav.sc .nav-brand { color:var(--tc); }
.nav.sc .nav-sub { color:rgba(196,98,45,.5); }

.nav-mid { display:flex; gap:1.4rem; list-style:none; }
.nav-mid a {
  font-family:var(--fb); font-size:.74rem; font-weight:400; letter-spacing:.06em;
  color:#FFFFFF; transition: color .3s ease;
  position:relative;
  text-shadow: 0 1px 8px rgba(0,0,0,.7), 0 0 20px rgba(0,0,0,.4);
}
.nav-mid a::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background:var(--tc); transition:width .3s var(--ease);
}
.nav-mid a:hover::after,
.nav-mid a.active::after { width:100%; }
.nav-mid a.active { color:var(--tc); }
.nav.sc .nav-mid a { color:var(--bk); text-shadow:none; }
.nav.sc .nav-mid a.active { color:var(--tc); }

.nav-end { display:flex; align-items:center; gap:1.6rem; }
.nav-cta-btn {
  font-family:var(--fb); font-size:.65rem; font-weight:400; letter-spacing:.16em;
  text-transform:uppercase; color:#FFFFFF; border:1px solid rgba(255,255,255,.6);
  padding:.65rem 1.6rem; transition: all .3s ease;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.nav.sc .nav-cta-btn { color:var(--tc); border-color:var(--tc); }
.nav-cta-btn:hover { background:var(--tc); color:var(--cr); border-color:var(--tc); }

.burger {
  display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px;
}
.burger span { display:block; width:22px; height:1px; background:var(--cr); transition:background .3s ease; }
.nav.sc .burger span { background:var(--bk); }

/* Mobile overlay */
.mob-menu {
  display:none; position:fixed; inset:0; background:var(--bk); z-index:200;
  flex-direction:column; align-items:center; justify-content:center; gap:2.4rem;
}
.mob-menu.open { display:flex; }
.mob-close {
  position:absolute; top:2rem; right:2rem; background:none; border:none;
  font-size:1.2rem; color:rgba(240,234,214,.5); cursor:pointer; font-family:var(--fb);
}
.mob-menu a {
  font-family:var(--ft); font-size:1.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cr); opacity:.8; transition: color .2s, opacity .2s;
}
.mob-menu a:hover { color:var(--tc); opacity:1; }

/* ─── LOGO HERO PARTAGÉ (icône soleil + main, toutes pages intérieures) ──── */
.hero-page-logo {
  display:block;
  width: clamp(110px, 14vw, 170px);
  height: auto;
  object-fit: contain;
  margin: 0 auto clamp(2.8rem, 5vw, 4.5rem);
  opacity: 0;
  animation: heroFade 1.4s var(--ease) .2s forwards;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
}
@media (max-width: 768px) {
  .hero-page-logo { width: clamp(80px, 22vw, 120px); margin-bottom: 2rem; }
}

/* ─── PAGE HERO (pages intérieures) ──────────────── */
.page-hero {
  position:relative; height:58vh; min-height:400px; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom: clamp(3rem,6vh,5rem);
}
.page-hero-bg { position:absolute; inset:0; }
.page-hero-bg img { will-change:transform; }
.page-hero-dim {
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(13,13,13,.25) 0%, rgba(13,13,13,.08) 20%, rgba(13,13,13,.08) 50%, rgba(13,13,13,.48) 100%);
}
.page-hero-inner {
  position:relative; z-index:2; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  padding-top:9rem;
}
.page-hero-ey {
  font-family:var(--fb); font-size:.78rem; font-weight:300;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(240,234,214,.65);
}
.page-hero-title {
  font-family:var(--ft); font-size:clamp(2.8rem,7vw,5.5rem);
  letter-spacing:.22em; color:var(--cr); line-height:1;
  opacity:0; animation: heroFade 1.2s var(--ease) .2s forwards;
}
.page-hero-rule {
  width:36px; height:1px; background:var(--sb); margin:.4rem 0;
  opacity:0; animation: heroFade .8s ease .8s forwards;
}
.page-hero-sub {
  font-family:var(--fd); font-size:1.6rem; color:var(--sb);
  opacity:0; animation: heroFade .8s ease 1s forwards;
}

@keyframes heroFade { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ─── BOUTONS ─────────────────────────────────────── */
.btn-line {
  font-family:var(--fb); font-size:.68rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tc);
  border:1px solid var(--tc); padding:.82rem 2rem;
  display:inline-block; transition: background .3s ease, color .3s ease;
  border-radius: 50px;
}
.btn-line:hover { background:var(--tc); color:var(--cr); }

.btn-fill {
  font-family:var(--fb); font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cr);
  background:var(--tc); padding:1.1rem 3rem;
  display:inline-block; transition: background .3s ease, transform .15s ease;
  border-radius: 50px;
}
.btn-fill:hover { background:var(--tc-l); }
.btn-fill:active { transform:scale(.97); }

.btn-ghost {
  font-family:var(--fb); font-size:.68rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; color:var(--cr);
  border:1px solid rgba(240,234,214,.3); padding:1rem 2.6rem;
  display:inline-block; transition: background .3s ease, border-color .3s ease;
  border-radius: 50px;
}
.btn-ghost:hover { background:rgba(240,234,214,.1); border-color:rgba(240,234,214,.7); }

.btn-tc {
  font-family:var(--fb); font-size:.68rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tc);
  border:1px solid var(--tc); padding:.82rem 2rem;
  display:inline-block; transition: background .3s ease, color .3s ease;
  border-radius: 50px;
}
.btn-tc:hover { background:var(--tc); color:var(--cr); }

/* ─── DÉCORATION SOLEIL ───────────────────────────── */
.deco-sun {
  display:block; margin:0 auto 1.6rem; width:48px; height:48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='62' rx='26' ry='16' fill='%23C4622D' opacity='.9'/%3E%3Cellipse cx='54' cy='55' rx='9' ry='11' fill='%23C4622D' opacity='.6'/%3E%3Cpath d='M50 10 Q54 22 56 28 Q50 24 44 28 Q46 22 50 10Z' fill='%23C4622D'/%3E%3Cpath d='M50 10 Q56 20 60 26' stroke='%23C4622D' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 10 Q62 16 68 20' stroke='%23C4622D' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 10 Q65 10 72 12' stroke='%23C4622D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 10 Q44 20 40 26' stroke='%23C4622D' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 10 Q38 16 32 20' stroke='%23C4622D' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M50 10 Q35 10 28 12' stroke='%23C4622D' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='52' r='6' fill='%23F0EAD6' opacity='.7'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.85;
}
.deco-sun--sm { width:32px; height:32px; margin-bottom:1rem; }
.deco-sun--cr { filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(330deg); }

/* ─── CITATION ───────────────────────────────────── */
.cite {
  padding: clamp(5rem,10vw,10rem) 3.5rem;
  background:var(--cr); text-align:center;
}
.cite-inner { max-width:800px; margin:0 auto; }
.cite-mark {
  font-family:var(--fs); font-size:8rem; line-height:.3;
  color:var(--tc); opacity:.2; display:block; margin-bottom:2.4rem;
}
.cite-text {
  font-family:var(--fs); font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:300; font-style:italic; line-height:1.8; color:var(--bk);
}
.cite-rule { width:36px; height:1px; background:var(--tc); margin:2.6rem auto 1.2rem; opacity:.4; }
.cite-auth { font-family:var(--fd); font-size:1.5rem; color:var(--tc); }

/* ─── CTA SECTION ────────────────────────────────── */
.cta-section {
  position:relative; padding:clamp(7rem,12vw,11rem) 3.5rem; overflow:hidden;
}
.cta-bg { position:absolute; top:0;left:0;right:0;bottom:0; overflow:hidden; }
.cta-bg img { filter:brightness(.45) saturate(.7); }
.cta-bg video { display:block; position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translateX(-50%) translateY(-50%); filter:brightness(.45) saturate(.7); }
.cta-dim { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(13,13,13,.35),rgba(13,13,13,.68)); }
.cta-inner {
  position:relative; z-index:2;
  max-width:680px; margin:0 auto; text-align:center;
}
.cta-script { font-family:var(--fd); font-size:2.2rem; color:var(--sb); margin-bottom:.6rem; }
.cta-h2 {
  font-family:var(--fs); font-size:clamp(2.2rem,5vw,4rem);
  font-weight:300; font-style:italic; color:var(--cr); line-height:1.18; margin-bottom:1.4rem;
}
.cta-p {
  font-family:var(--fb); font-size:.88rem; font-weight:300;
  line-height:1.9; color:rgba(240,234,214,.65); margin-bottom:3rem;
}
.cta-btns { display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }

/* ─── FOOTER ─────────────────────────────────────── */
footer {
  background:var(--bk); padding:5rem 3.5rem 2.5rem;
}
.ft-grid {
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:4rem;
  padding-bottom:3.5rem; border-bottom:1px solid rgba(240,234,214,.06);
}
.ft-brand {
  font-family:var(--ft); font-size:1.5rem; letter-spacing:.2em;
  color:var(--tc); line-height:1; margin-bottom:.25rem;
}
.ft-brand-sub {
  font-family:var(--fb); font-size:.64rem; font-weight:300;
  letter-spacing:.4em; text-transform:uppercase; color:rgba(240,234,214,.3);
  margin-bottom:1.4rem;
}
.ft-tag { font-family:var(--fd); font-size:.95rem; color:rgba(240,234,214,.35); margin-bottom:1.4rem; }
.ft-line {
  font-family:var(--fb); font-size:.76rem; font-weight:300;
  color:rgba(240,234,214,.4); line-height:1.7;
}
.ft-col-label {
  font-family:var(--fb); font-size:.72rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--tc);
  margin-bottom:1.4rem;
}
.ft-links { list-style:none; display:flex; flex-direction:column; gap:.8rem; }
.ft-links a {
  font-family:var(--fb); font-size:.76rem; font-weight:300;
  color:rgba(240,234,214,.4); transition:color .2s ease;
}
.ft-links a:hover { color:var(--cr); }
.ft-bottom {
  max-width:1400px; margin:2rem auto 0;
  display:flex; justify-content:space-between; align-items:center;
}
.ft-copy {
  font-family:var(--fb); font-size:.65rem; font-weight:300;
  color:rgba(240,234,214,.2); letter-spacing:.04em;
}
.ft-legal { display:flex; gap:1.8rem; }
.ft-legal a {
  font-family:var(--fb); font-size:.65rem; font-weight:300;
  color:rgba(240,234,214,.2); transition:color .2s ease;
}
.ft-legal a:hover { color:rgba(240,234,214,.55); }

/* ─── RESPONSIVE PARTAGÉ ─────────────────────────── */
@media(max-width:1100px) {
  .ft-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media(max-width:768px) {
  .nav { padding:1.2rem 1.4rem; }
  .nav.sc { padding:.8rem 1.4rem; }
  .nav-mid, .nav-cta-btn { display:none; }
  .burger { display:flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .page-hero { height:52vh; min-height:360px; }
  .page-hero-inner { padding-top:8rem; }
  footer { padding:3.5rem 1.4rem 2rem; }
  .ft-grid { grid-template-columns:1fr; gap:2rem; }
  .ft-bottom { flex-direction:column; gap:.8rem; text-align:center; }
  .cite { padding:4rem 1.4rem; }
  .cta-section { padding:5rem 1.4rem; }
  /* Boutons : taille tactile minimum (Google recommendation) */
  .btn-fill, .btn-line, .btn-ghost, .btn-tc { min-height:44px; padding-top:.95rem; padding-bottom:.95rem; }
  /* Liens du menu mobile : zone tactile généreuse */
  .mob-menu a { padding:.8rem 1.2rem; min-height:44px; display:flex; align-items:center; }
  .mob-close { min-width:44px; min-height:44px; padding:.8rem; }
  /* Évite le zoom auto Safari iOS sur les inputs */
  input, textarea, select { font-size:16px !important; }
  /* Logo nav mobile : un peu plus petit */
  .nav-logo-img { height:54px; }
}

/* ─── ACCESSIBILITÉ : Reduced Motion ─────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .rv, .rv-l { opacity:1 !important; transform:none !important; }
}

/* ─── PRINT STYLES ─────────────────────────────────── */
@media print {
  .nav, .mob-menu, .burger, .hero-vid, .cta-bg video, footer { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  a { color:#000 !important; text-decoration:underline; }
}

/* ─── LOGO NAV — IMAGE CIRCULAIRE ─────────────── */
.nav-logo-img {
  height: 68px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: opacity .4s ease;
}
.nav-logo-dark {
  mix-blend-mode: screen;
}
.nav-logo-light {
  display: none;
  mix-blend-mode: multiply;
}
.nav.sc .nav-logo-dark { display: none; }
.nav.sc .nav-logo-light { display: block; }

/* ─── SOLEIL — PUCES GLOBALES ─────────────────── */
.sun-list { list-style: none; display:flex; flex-direction:column; gap:.5rem; }
.sun-list li {
  display: flex; align-items: flex-start; gap: .65rem;
}
.sun-list li::before {
  content: '';
  display: inline-block;
  width: 15px; height: 15px;
  min-width: 15px;
  background: url('assets/soleil-or.png') center/contain no-repeat;
  margin-top: .1rem;
  flex-shrink: 0;
}
.sun-list-cr li::before {
  background-image: url('assets/soleil-creme-sun.png');
}
.sun-list-sb li::before {
  background-image: url('assets/soleil-or.png');
}