/* ------------------------------------------------------------------
   Site K Nina Photographie — direction : blanc pur, immersif.
   Un seul monde visuel assumé (le site est blanc) : pas de thème
   sombre, chaque couleur est peinte explicitement.
   ------------------------------------------------------------------ */
:root{
  --blanc:#FFFFFF;
  --lin:#FBFAF9;
  --lin-2:#F4F1EE;
  --encre:#1A1817;
  --encre-douce:#4A4540;
  --gris:#857F7A;
  --gris-clair:#7E7873;
  --filet:#E9E4E0;
  --accent:#C0A594;
  --accent-fonce:#96795F;
  --nuit:#26231F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font-family:"Jost","Century Gothic","Avenir Next",sans-serif;
  font-weight:300;font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--encre);text-decoration:none}
a:hover{color:var(--accent-fonce)}

/* ---------- typographie ---------- */
.titre{
  font-family:"Cormorant Garamond",Garamond,"Times New Roman",serif;
  font-weight:300;line-height:1.08;letter-spacing:-.008em;
  text-wrap:balance;margin:0;
}
.h1{font-size:clamp(40px,6vw,82px)}
.h2{font-size:clamp(30px,4vw,52px)}
.h3{font-size:clamp(21px,2.3vw,29px)}
.surtitre{
  font-size:10.5px;font-weight:400;letter-spacing:.4em;text-transform:uppercase;
  color:var(--accent-fonce);margin:0;
}
.chapo{font-size:17px;color:var(--gris);max-width:58ch;margin:0;line-height:1.8}
.corps{font-size:16.5px;color:var(--encre-douce);max-width:62ch;margin:0;line-height:1.9}
p{margin:0}
em{font-family:"Cormorant Garamond",Garamond,serif;font-style:italic;font-size:1.1em}

/* ---------- ossature ---------- */
.page{max-width:1280px;margin:0 auto;padding:0 44px}
.etroit{max-width:1000px;margin:0 auto;padding:0 44px}
section{padding:clamp(76px,10vw,148px) 0}
.pile{display:flex;flex-direction:column}
.g12{gap:12px}.g16{gap:16px}.g24{gap:24px}.g32{gap:32px}.g48{gap:48px}.g72{gap:72px}

/* ---------- navigation : transparente sur le hero, blanche ensuite ---------- */
header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--filet);
  transition:padding .4s ease;
}
.nav{
  max-width:1280px;margin:0 auto;padding:16px 44px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  transition:padding .4s ease;
}
.nav-logo{flex:none;display:block;height:44px}
.nav-logo img{height:44px;width:auto;transition:height .4s ease}
.menu{display:flex;gap:28px;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.menu a{
  background:none;border:0;padding:5px 0;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre);
  border-bottom:1px solid transparent;white-space:nowrap;
  transition:color .3s ease,border-color .3s ease;
}
.menu a:hover{color:var(--accent-fonce)}
.menu a[aria-current="page"]{border-bottom-color:var(--accent)}
.menu a:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:5px}
.tel{
  font-size:12.5px;letter-spacing:.14em;color:var(--gris);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
/* barre resserrée dès qu'on quitte le haut de page */
header.pose .nav{padding:10px 44px}
header.pose .nav-logo,header.pose .nav-logo img{height:36px}

/* ---------- bouton ---------- */
.bouton{
  display:inline-flex;align-items:center;gap:13px;align-self:flex-start;
  padding:17px 36px;background:var(--encre);color:var(--blanc);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:400;
  border:1px solid var(--encre);transition:background .3s,color .3s,border-color .3s;
}
.bouton:hover{background:transparent;color:var(--encre)}
.bouton.clair{background:transparent;color:var(--encre)}
.bouton.clair:hover{background:var(--encre);color:var(--blanc)}
.bouton.sur-photo{background:transparent;color:var(--blanc);border-color:rgba(255,255,255,.55)}
.bouton.sur-photo:hover{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.bouton svg{width:15px;height:15px;flex:none}

/* ---------- HERO : bloc blanc + photo pleine hauteur ---------- */
.hero{
  display:grid;grid-template-columns:1.02fr .98fr;
  min-height:min(84vh,830px);background:var(--blanc);
  border-bottom:1px solid var(--filet);
}
.hero-bloc{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:26px;padding:clamp(56px,6vw,88px) clamp(32px,5vw,80px);
  background:var(--blanc);
}
.hero-bloc img.enseigne{width:clamp(240px,30vw,400px);height:auto;margin-bottom:6px}
.hero-bloc h1{max-width:19ch}
.hero-bloc .accroche{color:var(--gris);font-size:17px;max-width:48ch;line-height:1.8}
.hero-signe{
  display:flex;align-items:center;gap:15px;
  color:var(--accent-fonce);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
}
.hero-signe span{height:1px;width:38px;background:var(--accent);flex:none}
.hero-photo{position:relative;overflow:hidden;background:var(--lin-2);min-height:440px}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
  animation:derive 32s ease-in-out infinite alternate;transform-origin:52% 44%;
}
@keyframes derive{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- manifeste : bande immersive noir et blanc ---------- */
.manifeste{
  position:relative;background:var(--nuit);overflow:hidden;isolation:isolate;
  min-height:min(74vh,660px);display:flex;align-items:center;justify-content:center;
}
.manifeste-fond{position:absolute;inset:0;z-index:-2}
.manifeste-fond img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.manifeste-voile{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,14,12,.52) 0%,rgba(16,14,12,.68) 55%,rgba(16,14,12,.80) 100%);
}
.manifeste .etroit{
  display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;
  padding:clamp(72px,9vw,124px) 44px;
}
.manifeste .surtitre{color:var(--accent)}
.manifeste .phrase{
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:300;color:var(--blanc);
  font-size:clamp(28px,4vw,54px);line-height:1.28;letter-spacing:-.008em;
  max-width:25ch;text-wrap:balance;margin:0;
}
.manifeste .phrase i{font-style:italic;color:#E5CDB9}
.regle{height:1px;width:64px;background:rgba(255,255,255,.42)}

/* ---------- emplacement à fournir (visiblement marqué) ---------- */
.a-fournir{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  height:100%;background:var(--lin-2);border:1px dashed var(--accent-fonce);
  padding:26px;text-align:center;
}
.a-fournir svg{width:34px;height:34px;color:var(--accent-fonce);opacity:.75}
.a-fournir span{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-fonce);
  line-height:1.7;
}

/* ---------- univers ---------- */
.univers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px}
.carte{display:flex;flex-direction:column;gap:22px}
.carte .cadre{overflow:hidden;background:var(--lin-2);aspect-ratio:3/4}
.carte img{width:100%;height:100%;object-fit:cover}
/* 07/09/2026 : le zoom au survol (scale 1.04) est retire. Il faisait deborder
   la photo hors de son cadre, donc il la RECADRAIT. Il est remplace par le
   voile clair de la section EFFETS, qui ne touche pas a l'image. */
.carte .prix{
  font-size:11.5px;letter-spacing:.18em;color:var(--accent-fonce);
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}

/* ---------- galerie mosaïque ---------- */
.galerie{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:186px;gap:14px}
.galerie figure{margin:0;overflow:hidden;background:var(--lin-2)}
.galerie img{width:100%;height:100%;object-fit:cover}
/* 07/09/2026 : idem galerie (scale 1.06 retire). */
.galerie .grand{grid-column:span 2;grid-row:span 2}
.galerie .haut{grid-row:span 2}

/* ---------- bain enveloppé ---------- */
.signature{background:var(--lin);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(42px,6vw,92px);align-items:center}
.duo .visuel{overflow:hidden;background:var(--lin-2);aspect-ratio:4/5}
.duo .visuel img{width:100%;height:100%;object-fit:cover}

/* ---------- portrait ---------- */
.portrait{display:grid;grid-template-columns:5fr 7fr;gap:clamp(42px,6vw,92px);align-items:center}
.portrait .visuel{overflow:hidden;background:var(--lin-2);aspect-ratio:4/5}
.portrait .visuel img{width:100%;height:100%;object-fit:cover}
.signe{
  font-family:"Cormorant Garamond",Garamond,serif;font-style:italic;
  font-size:26px;color:var(--accent-fonce);
}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--filet);border:1px solid var(--filet)}
.avis blockquote{background:var(--blanc);margin:0;padding:40px 32px;display:flex;flex-direction:column;gap:19px}
.avis p{font-size:15.5px;color:#3B3733;line-height:1.85}
.avis footer{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gris)}
.etoiles{display:flex;gap:4px;color:var(--accent)}
.etoiles svg{width:13px;height:13px}

/* ---------- communes ---------- */
.communes{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.communes li{
  list-style:none;padding:9px 19px;border:1px solid var(--filet);
  font-size:12.5px;letter-spacing:.1em;color:var(--gris);
}

/* ---------- contact ---------- */
.contact{background:var(--nuit);color:var(--blanc)}
.contact .titre,.contact a{color:var(--blanc)}
.contact .chapo{color:#B9B1AA}
.contact .surtitre{color:var(--accent)}
.contact .bouton{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.contact .bouton:hover{background:transparent;color:var(--blanc)}
.coord{display:flex;flex-wrap:wrap;gap:46px;font-size:15px;color:#B9B1AA}
.coord b{display:block;color:var(--blanc);font-weight:400;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:8px}
.coord a:hover{color:var(--accent)}

.pied-plan{border-bottom:1px solid var(--filet);padding-bottom:26px;margin-bottom:26px;display:flex;flex-wrap:wrap;gap:34px}
    .pied-plan section{min-width:210px;flex:1 1 260px}
    .pied-plan h2{font-family:"Jost",system-ui,sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-clair);font-weight:400;margin:0 0 12px}
    .pied-plan ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
    .pied-plan a{font-size:12.5px;color:var(--encre-douce);text-decoration:none;line-height:1.9}
    .pied-plan a:hover{color:var(--encre)}
    @media (max-width:680px){.pied-plan{gap:22px}.pied-plan section{flex:1 1 100%}}
    footer.pied{border-top:1px solid var(--filet);padding:38px 0;background:var(--blanc)}
.pied-ligne{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;font-size:12px;color:var(--gris-clair);letter-spacing:.06em}

/* ---------- réseaux sociaux ---------- */
.reseaux{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.reseaux a{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:1px solid var(--filet);
  color:var(--encre);transition:background .3s,color .3s,border-color .3s;
}
.reseaux a:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.reseaux a:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:3px}
.reseaux svg{width:19px;height:19px}
/* sur le bandeau sombre */
.contact .reseaux a{border-color:rgba(255,255,255,.28);color:var(--blanc)}
.contact .reseaux a:hover{background:var(--blanc);color:var(--encre);border-color:var(--blanc)}
.reseaux-note{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-fonce);margin-top:11px;
}
.contact .reseaux-note{color:var(--accent)}
.pied .reseaux a{width:36px;height:36px}
.pied .reseaux svg{width:16px;height:16px}

/* ---------- TARIFS ---------- */
.tarif-tete,.tete-page{border-bottom:1px solid var(--filet)}
.famille{display:grid;grid-template-columns:274px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.famille + .famille{margin-top:clamp(62px,7vw,104px);padding-top:clamp(62px,7vw,104px);border-top:1px solid var(--filet)}
.famille-tete{position:sticky;top:104px;display:flex;flex-direction:column;gap:19px}
.famille-tete .visuel{overflow:hidden;background:var(--lin-2);aspect-ratio:3/4}
.famille-tete img{width:100%;height:100%;object-fit:cover}
.formules{display:flex;flex-direction:column;gap:0}
.formule{
  display:grid;grid-template-columns:1fr auto;gap:20px 44px;align-items:start;
  padding:36px 0;border-bottom:1px solid var(--filet);
}
.formule:first-child{border-top:1px solid var(--filet)}
.formule .intitule{display:flex;flex-direction:column;gap:12px}
.formule h3{
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:400;
  font-size:29px;margin:0;line-height:1.15;
}
.formule .reference{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gris-clair)}
.formule .detail{font-size:15.5px;color:var(--encre-douce);max-width:56ch;line-height:1.78}
.formule .vignette-formule{width:min(260px,100%);aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--lin);margin-bottom:4px}
    .formule .vignette-formule img{width:100%;height:100%;object-fit:cover;display:block}
    .compris{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.compris li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--encre-douce);line-height:1.62}
.compris svg{width:15px;height:15px;flex:none;margin-top:4px;color:var(--accent)}
.compris li.hors{color:var(--gris)}
.compris li.hors svg{color:var(--gris-clair)}
.compris li.phare{color:var(--encre)}
.compris b{font-weight:500}
.montant-bloc{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.montant{
  font-family:"Cormorant Garamond",Garamond,serif;font-size:46px;font-weight:300;
  white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1;
}
.montant-note{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris-clair);white-space:nowrap}
.mise-en-avant{background:var(--lin);margin:0 -30px;padding:36px 30px}
.fanion{
  display:inline-block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blanc);background:var(--accent-fonce);padding:5px 12px;align-self:flex-start;
}
.mention{
  background:var(--lin);border:1px solid var(--filet);
  padding:clamp(26px,3.6vw,42px);display:flex;flex-direction:column;gap:15px;
}
.deux-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,62px)}

.vue[hidden]{display:none !important}

/* ---------- responsive ---------- */
/* zone intermédiaire : le menu de 6 entrées ne tient plus sur une ligne
   à côté du logo et du téléphone — on resserre avant qu'il ne s'empile. */
@media (max-width:1220px){
  .nav{padding:14px 30px;gap:18px}
  header.pose .nav{padding:9px 30px}
  .menu{gap:18px}
  .menu a{font-size:10.5px;letter-spacing:.14em}
  .nav-logo,.nav-logo img{height:38px}
  header.pose .nav-logo,header.pose .nav-logo img{height:32px}
  .tel{font-size:11.5px;letter-spacing:.08em}
}
@media (max-width:1000px){
  .tel{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-photo{order:-1;min-height:400px;max-height:56vh}
  .hero-bloc{padding:clamp(40px,7vw,64px) clamp(24px,5vw,48px)}
  .manifeste{min-height:0}
  .univers{grid-template-columns:1fr 1fr}
  .galerie{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:168px}
  .avis{grid-template-columns:1fr}
  .duo,.portrait,.deux-col{grid-template-columns:1fr}
  .famille{grid-template-columns:1fr}
  .famille-tete{position:static;flex-direction:row;gap:24px;align-items:center}
  .famille-tete .visuel{width:130px;flex:none}
}
@media (max-width:680px){
  .page,.etroit{padding:0 22px}
  .nav{padding:14px 22px;gap:14px;justify-content:center}
  header.pose .nav{padding:10px 22px}
  .nav-logo,.nav-logo img,header.pose .nav-logo,header.pose .nav-logo img{height:34px}
  .menu{gap:16px;order:3;width:100%;justify-content:center;padding-top:10px}
  .menu a{font-size:10px;letter-spacing:.13em}
  .tel{display:none}
  .hero-bloc{gap:20px}
  .hero-bloc img.enseigne{width:min(260px,72vw)}
  .hero-photo{min-height:330px;max-height:48vh}
  .manifeste .etroit{padding:64px 22px}
  .univers{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:142px;gap:10px}
  .galerie .grand{grid-column:span 2;grid-row:span 2}
  .formule{grid-template-columns:1fr;gap:18px}
  .montant-bloc{align-items:flex-start}
  .montant{font-size:38px}
  .mise-en-avant{margin:0 -22px;padding:28px 22px}
  .coord{gap:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none !important;transition:none !important}
}
/* ================================================================
   AJOUTS v2 — passage en 8 ONGLETS (pages separees)
   ================================================================ */

/* ---------- EN-TETE : logo sur fond blanc, puis la tranche du menu ----------
   Chlomo, 03/09/2026 : « mon logo sur un fond blanc, ensuite sur la tranche
   grise tu as l'accueil, mon parcours, etc. » */
.bandeau-logo{
  background:var(--blanc);display:flex;justify-content:center;align-items:center;
  padding:26px 24px 22px;
}
/* Chlomo, 03/09 : « il est trop petit, mets-le sur cinq, six centimetres de
   largeur » -> on pilote la LARGEUR, pas la hauteur. 300 px ~ 8 cm a l'ecran. */
.bandeau-logo img{width:clamp(260px,30vw,360px);height:auto;transition:width .4s ease}
header.pose .bandeau-logo{padding:11px 24px 9px}
header.pose .bandeau-logo img{width:clamp(150px,17vw,190px)}
@media (max-width:680px){
  .bandeau-logo{padding:20px 20px 16px}
  .bandeau-logo img{width:min(255px,72vw)}
  header.pose .bandeau-logo img{width:min(140px,44vw)}
}

/* ---------- GALERIE : aucune photo recadree ----------
   Chlomo, 03/09 : « il y a beaucoup de photos que tu as coupees pour qu'elles
   rentrent en carre, et des trous blancs. Reprends exactement la galerie de mon
   site. » -> on abandonne la grille a cases fixes (qui impose object-fit:cover,
   donc du recadrage) pour des COLONNES : chaque photo garde ses proportions,
   les colonnes se remplissent d'elles-memes, il n'y a plus ni coupe ni trou. */
/* ---------- GALERIE EN LIGNES JUSTIFIEES ----------
   Chaque ligne est un flex : les photos y recoivent un flex-grow egal a leur
   proportion, donc elles partagent exactement la largeur et prennent la meme
   hauteur. Consequence : la ligne est TOUJOURS pleine — aucun carre blanc —
   et aucune photo n'est recadree, puisque c'est sa propre proportion qui
   decide de sa largeur. Une « grande » pese double dans le partage. */
.galerie{display:flex;flex-direction:column;gap:14px;column-count:auto}
.ligne-photos{display:flex;gap:14px;align-items:flex-start}
.ligne-photos figure{margin:0;min-width:0;overflow:hidden;background:var(--lin-2)}
/* height:auto est ESSENTIEL : c'est la hauteur naturelle de l'image, calculee
   sur une largeur deja proportionnelle a son ratio, qui aligne toute la ligne.
   Avec height:100%, la figure n'ayant pas de hauteur propre, tout s'effondre
   a zero — mesure le 04/09 avant livraison. */
.ligne-photos img{width:100%;height:auto;display:block}
.galerie figure{margin:0}
.galerie .grand,.galerie .haut{grid-column:auto;grid-row:auto}

@media (max-width:680px){
  .galerie{gap:9px}
  .ligne-photos{gap:9px;flex-wrap:wrap}
  /* sur telephone, une ligne de 3 rendrait les photos minuscules : on passe
     a deux par ligne, la derniere prenant toute la largeur si elle est seule */
  .ligne-photos figure{flex:1 1 calc(50% - 5px) !important}
}
/* Effet Tetris — EN ATTENTE des numeros de Chlomo (03/09/2026).
   La premiere version passait automatiquement des photos paysage en pleine
   largeur : trois defauts constates, elles etaient FLOUES (780 px etires sur
   1230), RECADREES par le object-fit:cover, et le column-span laissait des
   CARRES BLANCS dans les colonnes. On revient donc a une galerie propre, et
   les photos en grand seront reprises en haute definition, une fois designees. */
.galerie .pleine{column-span:all;-webkit-column-span:all;margin:2px 0 18px}
.galerie .pleine img{width:100%;height:auto}
@media (max-width:1000px){.galerie{column-count:2}}
@media (max-width:680px){.galerie{column-count:2;column-gap:10px}
  .galerie figure{margin-bottom:10px}
  .galerie .pleine{margin:0 0 12px}}
/* le logo de la barre ne sert que quand le bandeau est replie : ici, jamais */
.nav-logo{display:none}
.nav{
  background:var(--lin-2);border-top:1px solid var(--filet);
  justify-content:center;gap:34px;padding:13px 44px;
}
header.pose .nav{padding:11px 44px}

/* ---------- HERO : la photo reste FIXE, le contenu defile par-dessus ----------
   « la photo dessous reste fixe, et quand tu fais defiler c'est en
   transparence avec les ecritures » — c'est ce qu'il aimait sur son site. */
/* la photo occupe la premiere fenetre, NUE : aucun voile, aucun texte dessus */
.hero-plein{position:relative;min-height:76vh}
.hero-fond{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-2}
.hero-fond img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}

/* le texte arrive ENSUITE, dans un cartouche clair qui defile sur la photo */
.hero-carte{
  position:relative;min-height:54vh;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(20px,5vw,60px) clamp(48px,7vw,96px);
}
.carte-claire{
  /* Chlomo, 03/09, deux fois : « pas assez transparent la ou il y a
     l'ecriture », puis « je peux mettre vraiment une opacite a meme 30 % ».
     On est a 34 %, compense par un flou fort et un liseré clair : la photo
     traverse largement, le texte reste lisible. */
  background:rgba(255,255,255,.20);
  backdrop-filter:blur(22px) saturate(.85) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(.85) brightness(1.06);
  border:1px solid rgba(255,255,255,.42);
  padding:clamp(34px,4.6vw,58px) clamp(28px,4.4vw,64px);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;
  max-width:760px;box-shadow:0 24px 70px rgba(20,17,15,.16);
}
.carte-claire h1{max-width:16ch;color:var(--encre)}
.carte-claire .accroche{color:var(--encre-douce);font-size:17px;max-width:50ch;line-height:1.8}
.carte-claire .hero-signe{color:var(--accent-fonce)}
.carte-claire .hero-signe span{background:var(--accent)}
.carte-claire .bouton{align-self:center}
@media (max-width:680px){
  .hero-plein{min-height:64vh}
  .hero-carte{min-height:0;padding-bottom:40px}
  .carte-claire{gap:17px}
}

/* tout ce qui suit doit etre opaque, sinon la photo fixe transparait dessous */
.apres-hero{position:relative;z-index:1;background:var(--blanc)}
.hero-centre{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:24px;padding:clamp(56px,8vw,104px) clamp(24px,5vw,64px);
  max-width:940px;
}
.hero-centre .enseigne{
  width:clamp(240px,32vw,420px);height:auto;
  background:rgba(255,255,255,.94);padding:20px 30px;
  box-shadow:0 18px 60px rgba(20,17,15,.18);
}
.hero-centre h1{color:var(--blanc);max-width:17ch;text-shadow:0 2px 26px rgba(20,17,15,.42)}
.hero-centre .accroche{
  color:rgba(255,255,255,.93);font-size:17px;max-width:52ch;line-height:1.8;
  text-shadow:0 1px 18px rgba(20,17,15,.5);
}
.hero-centre .hero-signe{color:var(--blanc);opacity:.92}
.hero-centre .hero-signe span{background:rgba(255,255,255,.72)}
@media (max-width:680px){
  .hero-plein{min-height:min(80vh,640px)}
  .hero-centre{gap:19px}
  .hero-centre .enseigne{width:min(250px,70vw);padding:15px 20px}
}

/* --- entete de page : chaque onglet porte son H1 ---
   La regle generale section{padding:...} s'applique aussi ici : on la remet a
   zero, sinon le padding de la section et celui du .page s'additionnent et
   creusent 240 px de vide sous la barre de navigation. */
.tete-page{border-bottom:1px solid var(--filet);padding:0}
.tete-page .page{padding-top:clamp(58px,7vw,96px);padding-bottom:clamp(46px,5.5vw,74px)}
.fil{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gris-clair)}

/* --- menu 8 entrees : burger sous 1100px --- */
.burger{
  display:none;background:none;border:0;padding:8px;cursor:pointer;
  color:var(--encre);line-height:0;
}
.burger svg{width:24px;height:24px}
.burger:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:3px}

@media (max-width:1100px){
  .burger{display:block;order:3}
  .tel{display:none}
  .menu{
    order:4;width:100%;display:none;flex-direction:column;align-items:flex-start;
    gap:0;padding:10px 0 6px;border-top:1px solid var(--filet);margin-top:12px;
  }
  .menu.ouvert{display:flex}
  .menu li{width:100%}
  .menu a{
    width:100%;text-align:left;padding:13px 2px;font-size:12px;letter-spacing:.18em;
    border-bottom:1px solid var(--filet);
  }
  .menu li:last-child a{border-bottom:0}
  .menu a[aria-current="page"]{color:var(--accent-fonce);border-bottom-color:var(--filet)}
  .nav{flex-wrap:wrap;padding:14px 30px}
  header.pose .nav{padding:10px 30px}
}
@media (max-width:680px){
  .nav{padding:14px 22px;justify-content:space-between}
  header.pose .nav{padding:10px 22px}
  .menu{order:4}
}

/* --- note Google : le chiffre porte la reassurance, il tient seul --- */
.note-globale{
  display:flex;align-items:center;gap:clamp(22px,3.5vw,44px);flex-wrap:wrap;
  padding-bottom:8px;
}
.note-chiffre{
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:300;
  font-size:clamp(62px,9vw,104px);line-height:.9;color:var(--encre);
  font-variant-numeric:tabular-nums;
}
.note-detail{display:flex;flex-direction:column;gap:11px}
.note-detail .etoiles svg{width:19px;height:19px}
.note-texte{font-size:16.5px;color:var(--encre-douce);line-height:1.7;max-width:44ch}
.note-texte b{font-weight:500;color:var(--encre)}
@media (max-width:680px){
  .note-globale{gap:18px}
}

/* --- Mon parcours : plus d'entete separee, le portrait EST l'entete --- */
.parcours-tete{padding-top:clamp(52px,6vw,86px)}
.parcours-tete .signe{margin-top:6px}

/* --- les 3 autres photos du bain, en bande --- */
.trio-bain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.trio-bain figure{margin:0;overflow:hidden;background:var(--lin-2);aspect-ratio:3/4}
.trio-bain img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:680px){.trio-bain{grid-template-columns:1fr 1fr;gap:11px}}

/* --- Cartes cadeaux et Séances sur mesure : toute la largeur, centrés ---
   Chlomo, 04/09 : « c'est quand même assez important ». */
.mention.pleine-largeur{
  align-items:center;text-align:center;
  padding:clamp(32px,4.4vw,54px) clamp(26px,4vw,60px);
}
.mention.pleine-largeur .corps{max-width:74ch}
.mention.pleine-largeur h2{font-size:clamp(24px,3vw,34px)}

/* --- les 4 cartes cadeaux, en rangée large : on doit lire ce qu'il y a dessus --- */
.rangee-cadeaux{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;margin-bottom:20px;width:100%;
}
.rangee-cadeaux figure{margin:0;overflow:hidden;background:var(--lin-2);border:1px solid var(--filet)}
.rangee-cadeaux img{width:100%;height:auto;display:block}
@media (max-width:680px){.rangee-cadeaux{grid-template-columns:1fr 1fr;gap:11px}}

/* --- carte cadeau : sa photo revient (demande Chlomo 03/09) --- */
.visuel-cadeau{
  aspect-ratio:16/10;overflow:hidden;background:var(--lin-2);
  margin:0 0 6px;
}
.visuel-cadeau img{width:100%;height:100%;object-fit:cover;display:block}
.visuel-cadeau .a-fournir{height:100%}

/* --- bouton d'appel centre en bas de bloc (accueil) --- */
.centre{display:flex;justify-content:center}
.centre .bouton{align-self:center}

/* --- FAQ : accordeon natif, sans JS --- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--filet)}
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{
  list-style:none;cursor:pointer;padding:29px 46px 29px 0;position:relative;
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:400;
  font-size:clamp(19px,2vw,25px);line-height:1.34;color:var(--encre);
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-fonce)}
.faq summary:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:4px}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:13px;height:13px;margin-top:-8px;
  border-right:1px solid var(--accent-fonce);border-bottom:1px solid var(--accent-fonce);
  transform:rotate(45deg);transition:transform .35s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .reponse{padding:0 60px 33px 0;display:flex;flex-direction:column;gap:15px}
.faq .reponse p{font-size:16px;color:var(--encre-douce);line-height:1.9;max-width:68ch}

/* --- bloc "en attente de Nina" : visible, jamais confondu avec du contenu --- */
.attente{
  background:var(--lin-2);border:1px dashed var(--accent-fonce);
  padding:clamp(24px,3.2vw,38px);display:flex;flex-direction:column;gap:16px;
}
.attente .surtitre{color:var(--accent-fonce)}
.attente ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:11px}
.attente li{font-size:15.5px;color:var(--encre-douce);line-height:1.72}
.attente li b{font-weight:500;color:var(--encre)}

/* --- BLOG --- */
.articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.article{
  display:flex;flex-direction:column;gap:17px;
  border:1px solid var(--filet);padding:0 0 30px;background:var(--blanc);
}
.article .cadre{aspect-ratio:16/10;overflow:hidden;background:var(--lin-2)}
.article .cadre img{width:100%;height:100%;object-fit:cover}
.article .dedans{display:flex;flex-direction:column;gap:12px;padding:0 26px}
.article .etiquette{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--blanc);background:var(--accent-fonce);padding:5px 11px;align-self:flex-start;
}
.article h3{
  font-family:"Cormorant Garamond",Garamond,serif;font-weight:400;font-size:23px;
  margin:0;line-height:1.28;
}
.article p{font-size:15px;color:var(--gris);line-height:1.8}
.article .cible{
  font-size:11px;letter-spacing:.1em;color:var(--accent-fonce);
  border-top:1px solid var(--filet);padding-top:12px;margin-top:4px;
}

/* --- CONTACT : page dediee --- */
.contact-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(38px,5vw,80px);align-items:start}
.fiche{border:1px solid var(--filet);padding:clamp(28px,3.4vw,42px);display:flex;flex-direction:column;gap:26px}
.fiche-ligne{display:flex;flex-direction:column;gap:7px}
.fiche-ligne b{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-fonce);font-weight:400}
.fiche-ligne span,.fiche-ligne a{font-size:16.5px;color:var(--encre)}
.fiche-ligne a:hover{color:var(--accent-fonce)}

@media (max-width:1000px){
  .articles{grid-template-columns:1fr 1fr}
  .contact-grille{grid-template-columns:1fr}
}
@media (max-width:680px){
  .articles{grid-template-columns:1fr}
  .faq summary{padding:24px 40px 24px 0}
  .faq .reponse{padding:0 8px 28px 0}
}

/* ================================================================
   EFFETS — portes de la maquette PROPOSITION (07/09/2026, demande de
   Nina : « je garde cette maquette, mais je veux ses petits effets »).
   Regles tenues : sobres, fluides (opacity/transform seulement, 60 im/s),
   jamais gratuits, coupes par prefers-reduced-motion, rien qui cache ni
   ne retarde le contenu, AUCUNE photo recadree ni alteree.
   Le HTML n'a pas bouge : tout ce qui s'ajoute (curseur, ligne de lecture,
   visionneuse) est cree par le script des effets.
   ================================================================ */
:root{
  --court:.25s;
  --moyen:.5s;
  --lent:.9s;
  --courbe:cubic-bezier(.16,.84,.26,1);
}

/* ---------- MENU : le trait dore se deploie sous l'onglet survole ----------
   La page courante garde son trait plein (border-bottom accent) ; le survol
   fait courir un second trait, plus fonce, de gauche a droite. */
.menu a{position:relative}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent-fonce);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--moyen) var(--courbe);
}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--accent-fonce)}

/* la ligne de lecture : elle avance au bas de l'en-tete, au fil du defilement */
.progression-lecture{
  position:absolute;left:0;bottom:-1px;width:100%;height:2px;z-index:3;
  background:var(--accent-fonce);transform:scaleX(0);transform-origin:left center;
  pointer-events:none;
}
header.pose{box-shadow:0 10px 30px rgba(20,17,15,.06)}

/* ---------- BOUTONS : un reflet traverse, un halo dore se pose ---------- */
.bouton{
  position:relative;overflow:hidden;isolation:isolate;
  transition:background .3s,color .3s,border-color .3s,
             box-shadow var(--moyen) var(--courbe),transform var(--moyen) var(--courbe);
}
.bouton::after{
  content:"";position:absolute;inset:-1px;z-index:-1;pointer-events:none;
  background:linear-gradient(115deg,transparent 36%,rgba(192,165,148,.55) 50%,transparent 64%);
  transform:translateX(-130%);transition:transform .9s var(--courbe);
}
.bouton:hover::after{transform:translateX(130%)}
.bouton:hover{box-shadow:0 14px 38px rgba(150,121,95,.26),0 0 0 5px rgba(192,165,148,.13)}
.bouton svg{transition:transform var(--moyen) var(--courbe)}
.bouton:hover svg{transform:translateX(6px)}

/* ---------- LIENS : le filet se deploie sous le mot ---------- */
.coord a,.fiche-ligne a,.pied-ligne a{position:relative}
.coord a::after,.fiche-ligne a::after,.pied-ligne a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;opacity:.6;
  transition:transform var(--moyen) var(--courbe);
}
.coord a:hover::after,.fiche-ligne a:hover::after,.pied-ligne a:hover::after{transform:scaleX(1)}
.reseaux a{transition:background var(--moyen),color var(--moyen),border-color var(--moyen),transform var(--court) var(--courbe)}
.reseaux a:hover{transform:translateY(-2px)}

/* ---------- PHOTOS : un voile clair et un lisere, JAMAIS un zoom ----------
   Le zoom des vignettes (scale 1.04 / 1.06) a ete retire le 07/09 : il
   recadrait la photo en la debordant du cadre. Ici rien ne bouge dans
   l'image : un voile de lin a 14 % et un filet blanc a l'interieur. */
.ligne-photos figure,.galerie figure,.trio-bain figure,.rangee-cadeaux figure,
.carte .cadre,.visuel-cadeau,.article .cadre{position:relative}
.ligne-photos figure::after,.galerie figure::after,.trio-bain figure::after,.rangee-cadeaux figure::after,
.carte .cadre::after,.article .cadre::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(251,250,249,0);box-shadow:inset 0 0 0 0 rgba(255,255,255,0);
  transition:background var(--moyen) var(--courbe),box-shadow var(--moyen) var(--courbe);
}
.ligne-photos figure:hover::after,.ligne-photos figure:focus-visible::after,
.galerie figure:hover::after,.galerie figure:focus-visible::after,
.trio-bain figure:hover::after,.trio-bain figure:focus-visible::after,
.rangee-cadeaux figure:hover::after,.rangee-cadeaux figure:focus-visible::after,
.carte:hover .cadre::after,.article:hover .cadre::after{
  background:rgba(251,250,249,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);
}
[data-lb]{cursor:zoom-in}
[data-lb]:focus-visible{outline:2px solid var(--accent-fonce);outline-offset:3px}

/* ---------- CARTES : elles se soulevent d'un cheveu ---------- */
.article,.mention{transition:transform var(--moyen) var(--courbe),box-shadow var(--moyen) var(--courbe)}
.article:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(20,17,15,.08)}
.carte h3,.article h3{transition:color var(--court) ease}
.carte:hover h3,.article:hover h3{color:var(--accent-fonce)}
.formule{transition:background var(--moyen) var(--courbe)}
.formule:hover{background:var(--lin)}
.communes li{transition:color var(--court),border-color var(--court)}
.communes li:hover{color:var(--encre);border-color:var(--accent)}

/* ---------- FAQ : la reponse arrive en fondu ---------- */
.faq details[open] .reponse{animation:fondu-reponse .5s var(--courbe)}
@keyframes fondu-reponse{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- APPARITIONS AU DEFILEMENT ----------
   Rien n'est cache au premier ecran : le script ne pose « reveal » que sur
   ce qui se trouve SOUS la ligne de flottaison. Sans JS, tout reste visible. */
.js .reveal{
  opacity:0;transform:translateY(24px);
  transition:opacity var(--lent) var(--courbe),transform var(--lent) var(--courbe);
  transition-delay:calc(var(--i,0)*70ms);
}
.js .reveal.vu{opacity:1;transform:none}

/* le titre de page monte mot a mot */
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mot > span{display:inline-block;transition:transform var(--lent) var(--courbe);transition-delay:calc(var(--m,0)*38ms)}
.js .lignes:not(.vu) .mot > span{transform:translateY(112%)}

/* ---------- CURSEUR : un anneau accompagne la souris ----------
   Il ne remplace pas le curseur systeme, il l'accompagne ; absent au tactile. */
.curseur{
  position:fixed;left:0;top:0;width:22px;height:22px;border-radius:50%;z-index:300;
  pointer-events:none;border:1px solid var(--accent-fonce);opacity:0;
  transform:translate(-100px,-100px);
  transition:width .35s var(--courbe),height .35s var(--courbe),
             background .35s,opacity .3s,border-color .3s;
}
.curseur.actif{opacity:1}
.curseur.lien{width:40px;height:40px;background:rgba(192,165,148,.16)}
.curseur.photo{width:70px;height:70px;border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.16)}
@media (hover:none),(pointer:coarse){.curseur{display:none}}

/* ---------- VISIONNEUSE : la photo part de sa vignette ----------
   Jamais agrandie au-dela de sa taille reelle (var --nat), donc jamais floue,
   et jamais recadree : c'est la photo entiere qui s'affiche. */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(26,24,23,.95);
  display:flex;align-items:center;justify-content:center;padding:64px 76px;
  opacity:0;transition:opacity .34s var(--courbe);
}
.lb[hidden]{display:none}
.lb.visible{opacity:1}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}
.lb img{
  max-width:min(100%,var(--nat,100%));max-height:calc(100vh - 176px);
  width:auto;height:auto;display:block;background:var(--nuit);
  box-shadow:0 34px 90px rgba(0,0,0,.5);transform-origin:center center;
  transition:opacity .28s ease;
}
.lb img.vole{transition:transform .62s var(--courbe),opacity .28s ease}
.lb img.change{opacity:0}
.lb figcaption{
  font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;
}
.lb button{
  position:absolute;background:none;border:0;color:var(--blanc);cursor:pointer;
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
  opacity:.72;transition:opacity var(--court),transform var(--court) var(--courbe);
}
.lb button:hover{opacity:1}
.lb button:focus-visible{outline:2px solid var(--blanc);outline-offset:2px}
.lb svg{width:26px;height:26px}
.lb-fermer{top:16px;right:16px}
.lb-prec{left:12px;top:50%;margin-top:-28px}
.lb-suiv{right:12px;top:50%;margin-top:-28px}
.lb-prec:hover{transform:translateX(-3px)}
.lb-suiv:hover{transform:translateX(3px)}
body.lb-ouverte{overflow:hidden}
@media (max-width:680px){
  .lb{padding:56px 10px 44px}
  .lb img{max-height:calc(100vh - 130px)}
  .lb button{width:48px;height:48px}
  .lb-prec{left:0}.lb-suiv{right:0}
}

/* ---------- mouvement reduit : on coupe tout ---------- */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important}
  .js .lignes:not(.vu) .mot > span{transform:none !important}
  .curseur{display:none !important}
  .progression-lecture{display:none !important}
}

/* --- pages annexes (villes, thematiques, blog) : texte courant dans la typographie de la maquette --- */
.texte-annexe{max-width:820px}
.texte-annexe h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;font-size:clamp(26px,3vw,34px);line-height:1.2;margin:44px 0 12px}
.texte-annexe h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(21px,2.2vw,25px);line-height:1.25;margin:30px 0 8px}
.texte-annexe p,.texte-annexe li{font-size:15.5px;line-height:1.75;color:var(--encre-douce);margin:0 0 12px}
.texte-annexe ul{padding-left:20px;margin:0 0 14px}
.texte-annexe blockquote{margin:22px 0;padding:14px 20px;border-left:2px solid var(--accent);background:var(--lin);color:var(--encre);font-size:15px;line-height:1.7}
.texte-annexe a{color:var(--accent-fonce);text-decoration:underline;text-underline-offset:3px}
.photo-annexe{margin:28px 0}.photo-annexe img{width:100%;height:auto;display:block;border-radius:2px}

/* --- site statique : les boutons du menu sont des liens --- */
.menu a{text-decoration:none;display:inline-block;line-height:normal}
.tel{text-decoration:none}