/* ===================================================================
   VS Villa — Maison de séjour senior · Île Maurice
   Direction "Bleu lagon" : bleu marin + soleil, police Poppins.
   Défilement vertical, sections illustrées par l'image, accessible.
   Gros textes (>=18px), gros boutons, contraste AA, thème clair/sombre.
   =================================================================== */

:root{
  /* --- thème CLAIR (par défaut) --- */
  --bg:          #F4F8FC;
  --surface:     #FFFFFF;
  --surface-2:   #E9F1F9;
  --ink:         #14263B;
  --ink-soft:    #46586D;
  --line:        #D5E2EF;
  --primary:     #15619E;   /* bleu marin — boutons / accents forts */
  --primary-hov: #0F4E82;
  --on-primary:  #FFFFFF;
  --accent:      #0C6098;   /* bleu — liens, surtitres */
  --accent-soft: #E1EDF8;
  --sun:         #F2A53C;   /* soleil — touches chaudes, étoiles (sombre) */
  --sea:         #15619E;

  --radius:      24px;
  --radius-sm:   14px;
  --shadow:      0 10px 30px -14px rgba(20,60,100,.22);
  --shadow-lg:   0 22px 50px -22px rgba(20,60,100,.32);
  --ease:        cubic-bezier(.4,.0,.2,1);
  --header-h:    132px;     /* hauteur en-tête (desktop) — offset d'ancre */
}

[data-theme="dark"]{
  --bg:          #0E1B29;
  --surface:     #15293C;
  --surface-2:   #1B3148;
  --ink:         #EAF3FB;
  --ink-soft:    #B4C6D8;
  --line:        #284158;
  --primary:     #3F9AE0;
  --primary-hov: #5DACE8;
  --on-primary:  #08151F;
  --accent:      #69B6EC;
  --accent-soft: #1B3148;
  --sun:         #F4C063;
  --sea:         #3F9AE0;
  --shadow:      0 10px 30px -14px rgba(0,0,0,.5);
  --shadow-lg:   0 22px 50px -22px rgba(0,0,0,.6);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:18px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
html.text-lg{ font-size:21px; }                 /* bouton A+ */
@media (max-width:560px){ html{ font-size:18px; } html.text-lg{ font-size:21px; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ font-family:"Poppins", system-ui, sans-serif; line-height:1.15; color:var(--ink); font-weight:700; letter-spacing:-.01em; }

a{ color:var(--accent); }
img{ max-width:100%; display:block; }
:where(button,a,input,textarea,select){ font:inherit; }

/* Accessibilité : focus toujours visible */
:focus-visible{ outline:3px solid var(--primary); outline-offset:3px; border-radius:6px; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.skip-link{
  position:fixed; top:-100px; left:12px; z-index:200;
  background:var(--primary); color:var(--on-primary);
  padding:.7rem 1.1rem; border-radius:12px; font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:12px; }

.container{ width:min(1180px, 92vw); margin-inline:auto; }
.container--narrow{ width:min(820px, 92vw); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }   /* jamais de contenu masqué */
}

/* ============================ BOUTONS ============================ */
.btn{
  /* bordure uniforme pour TOUS les boutons : 2px + même rayon */
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:56px; padding:.85rem 1.5rem;
  border:2px solid var(--line); border-radius:14px;
  font-weight:700; font-size:1.02rem; text-decoration:none; cursor:pointer;
  transition:transform .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:22px; height:22px; flex:none; }
.btn-lg{ min-height:62px; padding:1rem 1.9rem; font-size:1.1rem; }

.btn-primary{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); box-shadow:var(--shadow); }
.btn-primary:hover{ background:var(--primary-hov); border-color:var(--primary-hov); box-shadow:var(--shadow-lg); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--primary); color:var(--primary); }

.btn-wa{ background:#0a7a37; color:#fff; border-color:#0a7a37; }
.btn-wa:hover{ background:#0a6e31; border-color:#0a6e31; }
[data-theme="dark"] .btn-wa{ background:#13a04a; color:#06140b; border-color:#13a04a; }

.btn-block{ width:100%; }

/* ============================ EN-TÊTE ============================ */
.topbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  width:min(1320px, 96vw); margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  padding:.6rem 0;
  flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-mark{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:13px; background:linear-gradient(145deg, var(--sea), var(--primary));
  color:#fff; box-shadow:0 5px 14px -5px rgba(20,80,140,.6);
}
.brand-mark svg{ width:23px; height:23px; }
.brand-name{ display:block; font-weight:700; font-size:1.3rem; letter-spacing:-.01em; }
.brand-sub{ display:block; font-size:.78rem; color:var(--ink-soft); font-weight:500; }

.nav{ display:flex; gap:.35rem; flex-wrap:wrap; order:3; width:100%; }
.nav a{
  text-decoration:none; color:var(--ink-soft); font-weight:600; font-size:.97rem;
  padding:.5rem .9rem; white-space:nowrap;
  min-height:44px; display:inline-flex; align-items:center;
  border-radius:999px; transition:background .15s var(--ease), color .15s var(--ease);
}
.nav a:hover{ color:var(--primary); background:var(--surface-2); }
.nav a.active{ color:var(--on-primary); background:var(--primary); box-shadow:0 6px 14px -7px rgba(20,80,140,.6); }

.topbar-tools{ display:flex; align-items:center; gap:.7rem; }

.phone-pill{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line);
  padding:.4rem .8rem; border-radius:999px; min-height:52px;
}
.phone-pill:hover{ border-color:var(--primary); }
.pp-ico{ display:grid; place-items:center; color:var(--primary); }
.pp-ico svg{ width:22px; height:22px; }
.pp-text{ display:flex; flex-direction:column; line-height:1.15; }
.pp-label{ font-size:.72rem; color:var(--ink-soft); font-weight:500; }
.pp-num{ font-weight:700; font-size:1.02rem; color:var(--primary); }

.btn-wa--top{ min-height:52px; padding:.5rem 1.1rem; }

.util{ display:flex; align-items:center; gap:.5rem; }
.lang-switch{ display:flex; align-items:center; gap:.35rem; color:var(--ink-soft); }
.lang-switch button{
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  font-weight:600; font-size:.92rem; border-radius:8px;
  min-height:48px; min-width:48px; padding:.5rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
.lang-switch button.active{ color:var(--primary); text-decoration:underline; text-underline-offset:4px; }
.flag{ width:22px; height:15px; flex:none; border-radius:3px; overflow:hidden; border:1px solid var(--line); display:inline-block; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.flag svg{ width:100%; height:100%; display:block; }

.icon-btn{
  width:48px; height:48px; flex:none; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  cursor:pointer; color:var(--ink); font-weight:700;
}
.icon-btn:hover{ border-color:var(--primary); color:var(--primary); }
.icon-btn[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--primary); color:var(--primary); }
.ic-sun{ display:none; }
[data-theme="dark"] .ic-moon{ display:none; }
[data-theme="dark"] .ic-sun{ display:block; }

.burger{ display:none; width:48px; height:48px; border:1px solid var(--line); background:var(--surface-2); border-radius:12px; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:22px; height:2.5px; background:var(--ink); border-radius:2px; transition:.2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* barre de progression de défilement, EN HAUT du menu (profondeur du site) */
.scroll-progress{ position:absolute; left:0; right:0; top:0; height:4px; background:transparent; overflow:hidden; }
.scroll-progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--sea), var(--sun)); transition:width .1s linear; }

/* flèche retour en haut (apparaît au défilement) */
.to-top{
  position:fixed; right:18px; bottom:92px; z-index:90;   /* même axe que le WhatsApp (right:18), empilé juste au-dessus */
  width:62px; height:62px; border-radius:50%; cursor:pointer;   /* même gabarit que .wa-float */
  background:var(--surface); color:var(--primary); border:1.5px solid var(--line);
  display:grid; place-items:center; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--primary); background:var(--accent-soft); }
.to-top svg{ width:26px; height:26px; }

/* ---- responsive en-tête ---- */
@media (max-width:1080px){
  :root{ --header-h:74px; }
  .nav{
    order:0; width:100%;
    position:fixed; left:0; right:0; top:var(--header-h);
    flex-direction:column; gap:.2rem;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:.6rem 5vw 1.1rem; box-shadow:var(--shadow-lg);
    transform:translateY(-130%); transition:transform .28s var(--ease);
    max-height:80vh; overflow:auto;
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ font-size:1.12rem; padding:.85rem .95rem; border-radius:10px; }
  .nav a.active{ color:var(--on-primary); background:var(--primary); }
  .burger{ display:flex; }
  /* sur mobile : pas de numéro, juste un bouton-icône d'appel */
  .phone-pill .pp-text{ display:none; }
  .phone-pill{ width:52px; min-width:52px; padding:0; gap:0; justify-content:center; }
  .btn-wa--top{ display:none; }          /* WhatsApp couvert par le bouton flottant */
}
.lang-abbr{ display:none; }
@media (max-width:1080px){
  .lang-full{ display:none; }
  .lang-abbr{ display:inline; }
}
@media (max-width:680px){
  .brand-sub{ display:none; }
  .pp-num{ font-size:.95rem; }
  .util{ gap:.3rem; }
  .lang-switch button{ font-size:.85rem; min-width:44px; }
}

/* ============================ HERO (deux colonnes) ============================ */
.hero{ padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5.5rem);
  background:radial-gradient(125% 120% at 100% 0%, var(--surface-2) 0%, var(--bg) 55%); }
.hero-inner{ display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hero-text{ max-width:600px; }
.hero-eyebrow{ position:relative; display:inline-block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--ink); padding-bottom:.5rem; margin-bottom:1.2rem; }
.hero-eyebrow::after{ content:""; position:absolute; left:0; bottom:0; width:48px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--primary), var(--sun)); }
.hero-title{ color:var(--ink); font-size:clamp(2.25rem, 4.8vw, 3.5rem); font-weight:700; letter-spacing:-.02em; line-height:1.08; text-wrap:balance; }
.hero-sub{ font-size:clamp(1.05rem, 1.5vw, 1.2rem); margin-top:1.2rem; color:var(--ink-soft); line-height:1.6; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:1.7rem; }
.hero-micro{ margin-top:.9rem; font-size:.95rem; color:var(--ink-soft); font-weight:600; }
.hero-trust{ margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line); font-size:.95rem; color:var(--ink-soft); font-weight:500; }

.hero-figure{ position:relative; }
.hero-img{ aspect-ratio:4/5; max-height:560px; border-radius:28px; box-shadow:var(--shadow-lg);
  background:linear-gradient(135deg, var(--sea), var(--primary)); background-size:cover; background-position:center; }
.hero-figure::before{ content:""; position:absolute; inset:auto -16px -16px auto; width:60%; height:58%; background:var(--accent-soft); border-radius:28px; z-index:-1; }
.hero-badge{ position:absolute; left:-14px; bottom:26px; display:flex; align-items:center; gap:.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:.7rem 1rem; box-shadow:var(--shadow-lg); }
.hero-badge-star{ width:30px; height:30px; color:var(--sun); flex:none; }
.hero-badge-txt{ display:flex; flex-direction:column; line-height:1.15; }
.hero-badge-txt strong{ font-size:1.15rem; color:var(--ink); }
.hero-badge-txt span{ font-size:.82rem; color:var(--ink-soft); }

@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; gap:2.2rem; }
  .hero-img{ aspect-ratio:16/10; max-height:360px; }
  .hero-figure::before{ display:none; }
  .hero-badge{ left:12px; }
}

/* ============================ SECTIONS ============================ */
.section{ padding:clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top:calc(var(--header-h) + 12px); }
.section--tint{ background:var(--surface-2); }

.section-head{ max-width:760px; margin-bottom:2.6rem; }
.eyebrow{ position:relative; display:inline-block; font-weight:800; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; color:var(--ink); padding-bottom:.5rem; margin-bottom:1.1rem; }
.eyebrow::after{ content:""; position:absolute; left:0; bottom:0; width:48px; height:3px; border-radius:3px; background:linear-gradient(90deg, var(--primary), var(--sun)); }
.section-title{ font-size:clamp(1.8rem, 4.2vw, 2.7rem); text-wrap:balance; }
.lead{ font-size:clamp(1.08rem, 2vw, 1.22rem); color:var(--ink-soft); margin-top:1rem; line-height:1.6; }

.section-cta{ margin-top:2.2rem; }

/* ---- cartes illustrées par image (piliers / villa / quotidien / sécurité) ---- */
.features{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); }
.feature{
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.feature:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.feature-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg, var(--sea), var(--primary)); }
.feature-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.feature:hover .feature-media img{ transform:scale(1.05); }
.feature-tag{
  position:absolute; left:12px; top:12px; z-index:1;
  background:rgba(10,25,42,.72); color:#fff; font-weight:700; font-size:.8rem;
  padding:.3rem .7rem; border-radius:999px; backdrop-filter:blur(4px);
}
.feature-body{ padding:1.35rem 1.5rem 1.6rem; }
.feature-body h3{ font-size:1.22rem; margin-bottom:.45rem; }
.feature-body p{ color:var(--ink-soft); font-size:1rem; }

/* ---- sous-titre de bloc à l'intérieur d'une section ---- */
.subhead{ margin:2.8rem 0 1.4rem; }
.subhead h3{ font-size:clamp(1.4rem, 3vw, 1.9rem); }
.subhead p{ color:var(--ink-soft); margin-top:.4rem; max-width:700px; font-size:1.05rem; }

/* ---- LAYOUT « tuiles » : titre incrusté sur l'image (section POURQUOI) ---- */
.tiles{ display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit, minmax(225px, 1fr)); }
.tile2{ display:flex; flex-direction:column; gap:.9rem; }
.tile2-media{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:linear-gradient(135deg, var(--sea), var(--primary)); }
.tile2-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.tile2:hover .tile2-media img{ transform:scale(1.05); }
.tile2-overlay{ position:absolute; inset:auto 0 0 0; padding:1.4rem 1rem 1rem; background:linear-gradient(transparent, rgba(8,18,30,.85)); }
.tile2-overlay h3{ color:#fff; font-size:1.18rem; line-height:1.2; }
.tile2-text{ color:var(--ink-soft); padding:0 .15rem; font-size:.98rem; }

/* ---- LAYOUT « alterné » : image et texte côte à côte, en zigzag (section LA VILLA) ---- */
.splits{ display:grid; gap:1.7rem; }
.split{ display:grid; grid-template-columns:1fr 1fr; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.split-media{ aspect-ratio:16/11; background:linear-gradient(135deg, var(--sea), var(--primary)); }
.split-media img{ width:100%; height:100%; object-fit:cover; }
.split-body{ padding:clamp(1.4rem,3vw,2.2rem); }
.split-body h3{ font-size:1.4rem; margin-bottom:.5rem; }
.split-body p{ color:var(--ink-soft); }
.split:nth-child(even) .split-media{ order:2; }     /* alterne le côté de l'image */
@media (max-width:760px){ .split{ grid-template-columns:1fr; } .split:nth-child(even) .split-media{ order:0; } }

/* ---- LAYOUT « liste à vignettes » : rangées compactes (section SÉCURITÉ) ---- */
.medialist{ display:grid; gap:1.1rem; }
.mediarow{ display:grid; grid-template-columns:150px 1fr; align-items:center; gap:1.4rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow); padding-right:1.5rem; }
.mediarow-img{ aspect-ratio:1/1; background:linear-gradient(135deg, var(--sea), var(--primary)); }
.mediarow-img img{ width:100%; height:100%; object-fit:cover; }
.mediarow-body{ padding:1.1rem 0; }
.mediarow-body h3{ font-size:1.2rem; margin-bottom:.3rem; }
.mediarow-body p{ color:var(--ink-soft); font-size:.98rem; }
@media (max-width:560px){ .mediarow{ grid-template-columns:92px 1fr; gap:1rem; padding-right:1rem; } .mediarow-body{ padding:.9rem 0; } }

/* ---- séparation des deux sous-groupes du menu ---- */
.nav-sep{ width:1px; align-self:center; height:22px; background:var(--line); margin:0 .45rem; }
.nav-label{ display:none; }
@media (max-width:1080px){
  .nav-sep{ width:100%; height:1px; margin:.6rem 0; }
  .nav-label{ display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); padding:.3rem .8rem 0; }
}

/* ---- semaine-type ---- */
.week-wrap{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.6rem; box-shadow:var(--shadow); overflow:hidden; }
.week-cap{ font-weight:700; color:var(--accent); padding:1rem 1.1rem .4rem; font-size:.92rem; text-transform:uppercase; letter-spacing:.05em; }
.week{ list-style:none; }
.week li{ display:flex; gap:1rem; align-items:baseline; padding:1rem 1.1rem; border-top:1px solid var(--line); }
.week li:first-child{ border-top:none; }
.week .w-day{ flex:none; width:120px; font-weight:700; color:var(--primary); font-size:1.05rem; }
.week .w-act{ color:var(--ink); }
@media (max-width:520px){ .week li{ flex-direction:column; gap:.2rem; } .week .w-day{ width:auto; } }

/* ============================ TARIFS ============================ */
.pricing{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.price-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.6rem; box-shadow:var(--shadow);
}
.price-card.featured{ border:2px solid var(--primary); box-shadow:var(--shadow-lg); }
.price-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--primary); color:var(--on-primary); font-weight:700; font-size:.82rem;
  padding:.4rem .9rem; border-radius:999px; white-space:nowrap;
}
.price-name{ font-size:1.35rem; margin-bottom:.2rem; }
.price-period{ color:var(--ink-soft); font-size:.95rem; font-weight:500; margin-bottom:1rem; }
.price-box{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:.9rem 1rem; margin-bottom:1.1rem; }
.price-eur{ font-size:1.4rem; font-weight:800; color:var(--ink); }
.price-rs{ font-size:1rem; color:var(--ink-soft); font-weight:600; margin-top:.15rem; }
.price-features{ list-style:none; margin-bottom:1.4rem; display:grid; gap:.6rem; }
.price-features li{ position:relative; padding-left:1.7rem; color:var(--ink-soft); }
.price-features li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }
.price-card .btn{ margin-top:auto; }

.pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.pill{ display:inline-flex; align-items:center; gap:.45rem; background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.92rem; padding:.5rem .9rem; border-radius:999px; }
.pill svg{ width:18px; height:18px; color:var(--accent); flex:none; }

.subfaq{ margin-top:2.4rem; }

/* ============================ AVIS ============================ */
.testimonials{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.tcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.stars{ color:#C77A12; font-size:1.15rem; letter-spacing:2px; margin-bottom:.8rem; }
[data-theme="dark"] .stars{ color:var(--sun); }
.tquote{ font-size:1.05rem; line-height:1.55; color:var(--ink); }
.tquote::before{ content:"“"; color:var(--primary); font-size:2.2rem; line-height:0; vertical-align:-.35em; margin-right:.1rem; font-weight:800; }
.tauthor{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:.8rem; }
.tavatar{ width:46px; height:46px; flex:none; border-radius:50%; background:linear-gradient(145deg, var(--sea), var(--primary)); color:#fff; display:grid; place-items:center; font-weight:700; }
.tname{ font-weight:700; color:var(--ink); }
.trole{ font-size:.9rem; color:var(--ink-soft); }

/* ============================ GALERIE ============================ */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:1.8rem; }
.filters button{ background:var(--surface); border:1px solid var(--line); color:var(--ink); font-weight:600; padding:.6rem 1.1rem; border-radius:999px; cursor:pointer; min-height:48px; }
.filters button:hover{ border-color:var(--primary); }
.filters button.active{ background:var(--primary); color:var(--on-primary); border-color:var(--primary); }

.gallery-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.tile{ position:relative; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; background:var(--surface-2); box-shadow:var(--shadow); aspect-ratio:4/3; border:none; padding:0; text-align:left; }
.tile img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.tile:hover img{ transform:scale(1.06); }
.tile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.4rem .9rem .7rem; color:#fff; background:linear-gradient(transparent, rgba(8,18,30,.8)); display:flex; flex-direction:column; }
.tile-title{ font-weight:700; font-size:1rem; }
.tile-cat{ font-size:.82rem; opacity:.9; }

/* ============================ FAQ (accordéon) ============================ */
.accordion{ display:grid; gap:.9rem; }
.qa{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; }
.qa summary{ list-style:none; cursor:pointer; padding:1.2rem 1.3rem; font-weight:700; font-size:1.1rem; color:var(--ink); display:flex; gap:1rem; align-items:flex-start; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; margin-left:auto; flex:none; color:var(--primary); font-weight:900; font-size:1.5rem; line-height:1; transition:transform .2s var(--ease); }
.qa[open] summary::after{ transform:rotate(45deg); }
.qa .qa-body{ padding:0 1.3rem 1.3rem; color:var(--ink-soft); }
.qa .qa-body p{ line-height:1.6; }

/* ============================ CONTACT ============================ */
.contact-grid{ display:grid; gap:2rem; grid-template-columns:1.05fr .95fr; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-methods{ display:grid; gap:1rem; }
.cmethod{ display:flex; gap:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:1.2rem 1.3rem; box-shadow:var(--shadow); text-decoration:none; color:inherit; align-items:flex-start; }
.cmethod:hover{ border-color:var(--primary); }
.cm-ico{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:14px; background:var(--accent-soft); color:var(--primary); }
.cm-ico svg{ width:25px; height:25px; }
.cmethod h3{ font-size:1.15rem; margin-bottom:.25rem; }
.cmethod p{ color:var(--ink-soft); font-size:.96rem; }
.contact-extra{ margin-top:1.2rem; color:var(--ink-soft); font-size:.96rem; }
.contact-extra a{ font-weight:600; }

.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow); display:grid; gap:1.1rem; }
.contact-form h3{ font-size:1.35rem; }
.field{ display:grid; gap:.4rem; }
.field span{ font-weight:600; font-size:.98rem; }
.field input, .field textarea{
  width:100%; padding:.9rem 1rem; min-height:54px;
  border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color:var(--primary); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
.form-note{ font-size:.95rem; color:var(--accent); font-weight:600; min-height:1.2em; }

/* ============================ FOOTER ============================ */
.footer{ background:var(--ink); color:#e8f1fb; padding:3rem 0 2.4rem; }
[data-theme="dark"] .footer{ background:#0A1622; }
.footer-inner{ display:grid; gap:1rem; }
.footer-brand{ display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.2rem; }
.footer-brand .brand-mark{ width:36px; height:36px; }
.footer-brand .brand-mark svg{ width:19px; height:19px; }
.footer-tag{ font-size:.85rem; opacity:.8; font-weight:500; }
.footer-note{ opacity:.82; max-width:680px; font-size:.96rem; }
.footer-legal{ opacity:.6; font-size:.85rem; }

/* ============================ WhatsApp flottant ============================ */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:90;
  width:62px; height:62px; border-radius:50%;
  background:#0a7a37; color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 30px -8px rgba(10,90,40,.6); text-decoration:none;
  animation:wa-pop .4s var(--ease) both;
}
.wa-float:hover{ background:#0a6e31; }
[data-theme="dark"] .wa-float{ background:#13a04a; color:#06140b; }
@keyframes wa-pop{ from{ transform:scale(.6); opacity:0; } }

/* ============================ LIGHTBOX ============================ */
.lightbox{ position:fixed; inset:0; z-index:150; background:rgba(8,18,30,.93); display:none; align-items:center; justify-content:center; padding:4vw; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:80vh; border-radius:12px; box-shadow:var(--shadow-lg); }
.lb-close, .lb-nav{ position:absolute; background:rgba(255,255,255,.14); color:#fff; border:none; cursor:pointer; border-radius:50%; width:54px; height:54px; font-size:1.6rem; display:grid; place-items:center; }
.lb-close:hover, .lb-nav:hover{ background:rgba(255,255,255,.28); }
.lb-close{ top:20px; right:20px; }
.lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lb-next{ right:16px; top:50%; transform:translateY(-50%); }
.lb-caption{ position:absolute; bottom:22px; left:0; right:0; text-align:center; color:#fff; font-weight:600; padding:0 1rem; }

/* apparition douce des sections au scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }