/* =========================================================
   VAPORIA — feuille de style
   Parti pris : épuré, beaucoup de blanc, typographie fine,
   filets discrets. Conçue mobile d'abord (Safari iOS / Chrome).
   ========================================================= */

:root{
  /* Palette : bleu du logo + neutres froids */
  --bleu:#4f8fd1;          /* bleu clair du logo — accents */
  --bleu-clair:#8fbde6;    /* déclinaison claire */
  --bleu-pale:#eaf3fb;     /* fonds très légers */
  --bleu-texte:#2c6699;    /* version lisible sur blanc (contraste AA) */
  --bleu-nuit:#16283a;     /* fonds sombres */

  --rouge:#c0392b;         /* réservé aux offres */
  --rouge-clair:#e05a4a;

  --encre:#14181d;
  --encre-2:#4a545f;
  --encre-3:#7d8894;
  --filet:#e3e7eb;
  --blanc:#ffffff;
  --creme:#f7f8fa;

  --lg:1180px;
  --marge:clamp(1.25rem, 5vw, 3rem);

  /* hauteur d'en-tête, sert aux ancres */
  --h-entete:60px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--h-entete) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--blanc);
  color:var(--encre);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
p{ margin:0 0 1.1em; }
button{ font:inherit; }

h1,h2,h3,h4{
  font-family:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.005em;
  margin:0 0 .5em;
  color:var(--encre);
}
h1{ font-size:clamp(2rem, 7vw, 3.6rem); }
h2{ font-size:clamp(1.6rem, 4.6vw, 2.5rem); }
h3{ font-size:clamp(1.15rem, 2.6vw, 1.4rem); }

strong{ font-weight:600; }

/* ---------- utilitaires ---------- */
.conteneur{ max-width:var(--lg); margin:0 auto; padding:0 var(--marge); }
.centre{ text-align:center; }
.mesure{ max-width:62ch; }
.mesure-centre{ max-width:60ch; margin-left:auto; margin-right:auto; }

.surtitre{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.68rem;
  font-weight:500;
  color:var(--bleu-texte);
  margin:0 0 1rem;
}
.sombre .surtitre{ color:var(--bleu-clair); }

.chapo{
  font-size:clamp(1rem, 2.2vw, 1.12rem);
  color:var(--encre-2);
}
.sombre .chapo{ color:#b9c4cf; }

.filet{ height:1px; background:var(--filet); border:0; margin:0; }
.sombre .filet{ background:rgba(255,255,255,.13); }

/* ---------- accès clavier ---------- */
.lien-evitement{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--encre); color:#fff; padding:.8em 1.2em;
}
.lien-evitement:focus{ left:0; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--bleu-texte); outline-offset:3px; border-radius:2px;
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.entete{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--filet);
}
.barre{
  max-width:var(--lg); margin:0 auto;
  padding:0 var(--marge);
  height:var(--h-entete);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.marque{ display:flex; align-items:center; gap:.55rem; flex:none; }
.marque img{ height:30px; width:auto; }
.marque-texte{ display:flex; flex-direction:column; line-height:1; }
.marque-nom{
  font-family:'Jost', sans-serif; font-weight:400;
  font-size:1.06rem; letter-spacing:.24em; color:var(--encre);
}
.marque-sous{
  font-size:.5rem; letter-spacing:.1em; color:var(--bleu-texte);
  margin-top:.3rem; text-transform:uppercase;
}

/* --- navigation bureau --- */
.nav{ display:none; }
@media (min-width:1000px){
  .nav{ display:flex; align-items:center; gap:1.6rem; }
  .nav > li{ position:relative; }
  .nav > li > a{
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.86rem; color:var(--encre-2);
    padding:.5rem 0; letter-spacing:.02em;
    border-bottom:1px solid transparent;
    transition:color .2s, border-color .2s;
  }
  .nav > li > a:hover{ color:var(--encre); }
  .nav > li > a[aria-current="page"]{ color:var(--encre); border-color:var(--bleu); }
  .nav .offre > a{ color:var(--rouge); font-weight:500; }
  .nav .offre > a:hover{ color:var(--rouge-clair); }
  .nav .chevron{ width:9px; height:9px; opacity:.55; transition:transform .2s; }
  .nav > li:hover .chevron, .nav > li:focus-within .chevron{ transform:rotate(180deg); }

  .sous{
    position:absolute; top:100%; left:50%; transform:translate(-50%, 6px);
    min-width:230px; padding:.5rem;
    background:#fff; border:1px solid var(--filet); border-radius:3px;
    box-shadow:0 22px 40px -26px rgba(20,24,29,.4);
    opacity:0; visibility:hidden; transition:opacity .2s, transform .2s, visibility .2s;
  }
  .nav > li:hover .sous, .nav > li:focus-within .sous{
    opacity:1; visibility:visible; transform:translate(-50%, 0);
  }
  .sous a{
    display:block; padding:.6rem .8rem; font-size:.86rem; color:var(--encre-2);
    border-radius:2px; transition:background .15s, color .15s;
  }
  .sous a:hover{ background:var(--bleu-pale); color:var(--bleu-texte); }
}

.tel-entete{
  display:none; flex:none;
  font-size:.84rem; color:var(--bleu-texte); letter-spacing:.02em;
  border:1px solid var(--bleu-clair); border-radius:2px;
  padding:.45rem .9rem; transition:background .2s, color .2s;
}
.tel-entete:hover{ background:var(--bleu-pale); }
@media (min-width:1000px){ .tel-entete{ display:inline-block; } }

/* --- bouton menu mobile --- */
.bouton-menu{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-right:-8px;
  background:none; border:0; cursor:pointer; color:var(--encre);
  -webkit-tap-highlight-color:transparent;
}
.bouton-menu span{
  position:relative; display:block; width:20px; height:1.5px;
  background:currentColor; transition:transform .3s, background .1s;
}
.bouton-menu span::before, .bouton-menu span::after{
  content:""; position:absolute; left:0; width:20px; height:1.5px;
  background:currentColor; transition:transform .3s, top .2s;
}
.bouton-menu span::before{ top:-6px; }
.bouton-menu span::after{ top:6px; }
.bouton-menu[aria-expanded="true"] span{ background:transparent; }
.bouton-menu[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.bouton-menu[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }
@media (min-width:1000px){ .bouton-menu{ display:none; } }

/* --- tiroir mobile --- */
.tiroir{
  position:fixed; inset:var(--h-entete) 0 0 0; z-index:880;
  background:#fff;
  padding:1.2rem var(--marge) 3rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,.0,.2,1);
  visibility:hidden;
}
.tiroir.ouvert{ transform:none; visibility:visible; }
@media (min-width:1000px){ .tiroir{ display:none; } }

.tiroir-lien{
  display:block; padding:.95rem 0;
  font-family:'Jost', sans-serif; font-size:1.12rem; letter-spacing:.02em;
  color:var(--encre); border-bottom:1px solid var(--filet);
}
.tiroir-lien.offre{ color:var(--rouge); }

.tiroir-groupe{ border-bottom:1px solid var(--filet); }
.tiroir-groupe > summary{
  display:flex; align-items:center; justify-content:space-between;
  padding:.95rem 0; cursor:pointer; list-style:none;
  font-family:'Jost', sans-serif; font-size:1.12rem; color:var(--encre);
}
.tiroir-groupe > summary::-webkit-details-marker{ display:none; }
.tiroir-groupe summary .chevron{ width:11px; height:11px; opacity:.5; transition:transform .25s; }
.tiroir-groupe[open] summary .chevron{ transform:rotate(180deg); }
.tiroir-sous{ padding:0 0 .7rem .1rem; }
.tiroir-sous a{
  display:block; padding:.6rem 0 .6rem 1rem;
  font-size:.95rem; color:var(--encre-2);
  border-left:1px solid var(--filet);
}
.tiroir-contact{ margin-top:2rem; display:grid; gap:.6rem; }
.tiroir-contact a{ font-size:.95rem; color:var(--bleu-texte); }

body.fige{ overflow:hidden; }

/* =========================================================
   BOUTONS
   ========================================================= */
.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Jost', sans-serif; font-size:.82rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  padding:.95rem 1.9rem; border-radius:2px; border:1px solid transparent;
  cursor:pointer; text-align:center;
  transition:background .25s, color .25s, border-color .25s;
  -webkit-tap-highlight-color:transparent;
}
.bouton-plein{ background:var(--bleu-texte); color:#fff; }
.bouton-plein:hover{ background:var(--bleu-nuit); }
.bouton-ligne{ background:transparent; color:var(--encre); border-color:var(--encre); }
.bouton-ligne:hover{ background:var(--encre); color:#fff; }
.sombre .bouton-ligne{ color:#fff; border-color:rgba(255,255,255,.6); }
.sombre .bouton-ligne:hover{ background:#fff; color:var(--bleu-nuit); }
.bouton-rouge{ background:var(--rouge); color:#fff; }
.bouton-rouge:hover{ background:var(--rouge-clair); }
.boutons{ display:flex; flex-wrap:wrap; gap:.75rem; }
@media (max-width:479px){ .boutons .bouton{ width:100%; } }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:clamp(3.5rem, 9vw, 7rem) 0; }
.section-creme{ background:var(--creme); }
.section-bleu{ background:var(--bleu-pale); }
.sombre{ background:var(--bleu-nuit); color:#e8edf2; }
.sombre h1,.sombre h2,.sombre h3,.sombre h4{ color:#fff; }
.sombre p{ color:#b9c4cf; }

.tete{ margin-bottom:clamp(2rem, 5vw, 3.2rem); }
.tete-centre{ text-align:center; margin-left:auto; margin-right:auto; max-width:64ch; }

/* --- bandeau de page intérieure --- */
.bandeau{
  padding:clamp(2.6rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3rem);
  border-bottom:1px solid var(--filet);
}

/* =========================================================
   ACCUEIL — bandeau principal
   ========================================================= */
.heros{
  position:relative;
  min-height:min(84svh, 720px);
  display:flex; align-items:flex-end;
  background:var(--bleu-nuit); overflow:hidden;
}
.heros-image{ position:absolute; inset:0; }
.heros-image img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.heros-image::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,17,24,.06) 0%, rgba(10,17,24,.18) 42%, rgba(10,17,24,.52) 78%, rgba(10,17,24,.66) 100%),
    linear-gradient(90deg, rgba(10,17,24,.42) 0%, rgba(10,17,24,.12) 46%, rgba(10,17,24,0) 74%);
}
.heros-contenu{
  position:relative; z-index:2; width:100%;
  padding:clamp(3rem, 12vw, 6rem) 0 clamp(2.5rem, 7vw, 4.5rem);
}
/* voile propre au bloc de texte : garantit la lisibilité quelle que soit la photo */
.heros-contenu::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,17,24,0) 0%, rgba(10,17,24,.10) 34%, rgba(10,17,24,.28) 72%, rgba(10,17,24,.36) 100%);
}
/* sur mobile la photo est plus haute : on renforce un peu le bas */
@media (max-width:700px){
  .heros-contenu::before{
    background:linear-gradient(180deg, rgba(10,17,24,0) 0%, rgba(10,17,24,.20) 30%, rgba(10,17,24,.44) 68%, rgba(10,17,24,.54) 100%);
  }
}
.heros-contenu h1{
  color:#fff; max-width:14ch; font-weight:300;
  text-shadow:0 2px 22px rgba(6,11,17,.85), 0 1px 4px rgba(6,11,17,.6);
}
.heros-contenu .surtitre{ color:var(--bleu-clair); text-shadow:0 1px 12px rgba(6,11,17,.9); }
.heros-contenu .chapo{ color:#e2e9f0; max-width:46ch; text-shadow:0 1px 14px rgba(6,11,17,.88); }
.heros .boutons{ margin-top:2rem; }

/* =========================================================
   GRILLES
   ========================================================= */
.grille{ display:grid; gap:clamp(1.5rem, 3.5vw, 2.4rem); }
.g2{ grid-template-columns:1fr; }
.g3{ grid-template-columns:1fr; }
.g4{ grid-template-columns:1fr 1fr; }
@media (min-width:700px){
  .g2{ grid-template-columns:1fr 1fr; }
  .g3{ grid-template-columns:repeat(3,1fr); }
  .g4{ grid-template-columns:repeat(4,1fr); }
}
.duo{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr; }
@media (min-width:860px){
  .duo{ grid-template-columns:1fr 1fr; }
  .duo-large{ grid-template-columns:1.15fr .85fr; }
  .duo-inverse > *:first-child{ order:2; }
}

/* --- bloc simple --- */
.bloc h3{ margin-bottom:.35rem; }
.bloc p{ color:var(--encre-2); font-size:.96rem; margin:0; }
.sombre .bloc p{ color:#b0bcc8; }
.bloc-filet{ padding-top:1.3rem; border-top:1px solid var(--filet); }
.sombre .bloc-filet{ border-color:rgba(255,255,255,.14); }

/* --- chiffres --- */
.chiffres{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.2rem; }
.chiffre .val{
  font-family:'Jost', sans-serif; font-weight:300;
  font-size:clamp(1.7rem, 5vw, 2.4rem); color:var(--bleu-texte);
  display:block; line-height:1;
}
.sombre .chiffre .val{ color:var(--bleu-clair); }
.chiffre .lib{ font-size:.76rem; color:var(--encre-3); letter-spacing:.02em; }
.sombre .chiffre .lib{ color:#95a3b1; }

/* --- images --- */
.visuel{ overflow:hidden; background:var(--creme); }
.visuel img{ width:100%; height:auto; }
.visuel-cadre{ aspect-ratio:4/3; }
.visuel-cadre img{ height:100%; object-fit:cover; }

/* --- mosaïque --- */
.mosaique{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media (min-width:760px){ .mosaique{ grid-template-columns:repeat(4,1fr); gap:.9rem; } }
.mosaique figure{ margin:0; overflow:hidden; background:var(--creme); }
.mosaique img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1; transition:transform .7s cubic-bezier(.2,.7,.3,1); }
.mosaique figure:hover img{ transform:scale(1.05); }
.mosaique .haute{ grid-row:span 2; }
.mosaique .haute img{ aspect-ratio:1/2; }
@media (max-width:759px){ .mosaique .haute{ grid-row:span 1; } .mosaique .haute img{ aspect-ratio:1; } }

/* =========================================================
   MARQUES
   ========================================================= */
.marques-groupe + .marques-groupe{ margin-top:2.6rem; padding-top:2.6rem; border-top:1px solid var(--filet); }
.sombre .marques-groupe + .marques-groupe{ border-color:rgba(255,255,255,.14); }
.marques-groupe h3{ font-size:1.05rem; margin-bottom:.25rem; }
.marques-groupe .role{ font-size:.85rem; color:var(--encre-3); margin-bottom:1rem; }
.sombre .marques-groupe .role{ color:#95a3b1; }
.puces{ display:flex; flex-wrap:wrap; gap:.5rem; }
.puce{
  font-size:.84rem; letter-spacing:.02em;
  border:1px solid var(--filet); border-radius:100px;
  padding:.42rem .95rem; color:var(--encre-2);
  transition:border-color .2s, color .2s;
}
.puce:hover{ border-color:var(--bleu); color:var(--bleu-texte); }
.sombre .puce{ border-color:rgba(255,255,255,.2); color:#cdd7e1; }
.sombre .puce:hover{ border-color:var(--bleu-clair); color:#fff; }

/* =========================================================
   OFFRES (rouge) & NOUVEAUTÉS
   ========================================================= */
.etiquette{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:'Jost', sans-serif; font-size:.66rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--rouge); border:1px solid currentColor;
  padding:.35rem .8rem; border-radius:100px; margin-bottom:1rem;
}
.etiquette::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor;
}
.offre-carte{
  border:1px solid var(--filet); background:#fff;
  padding:clamp(1.6rem, 4vw, 2.6rem);
  display:flex; flex-direction:column; gap:.4rem;
}
.offre-carte .prix{
  font-family:'Jost', sans-serif; font-weight:300;
  font-size:clamp(1.8rem, 5vw, 2.6rem); color:var(--rouge); line-height:1.1;
}
.offre-carte .cond{ font-size:.84rem; color:var(--encre-3); }

/* --- carte de fidélité --- */
.fidelite{ border:1px solid var(--filet); background:#fff; padding:clamp(1.5rem,4vw,2.2rem); }
.tampons{ display:grid; grid-template-columns:repeat(5,1fr); gap:.55rem; margin-bottom:1.2rem; }
.tampon{
  aspect-ratio:1; border-radius:50%;
  border:1px dashed var(--filet);
  display:flex; align-items:center; justify-content:center;
}
.tampon img{ width:48%; height:auto; opacity:.28; }
.tampon.pris{ border:1px solid var(--bleu-clair); background:var(--bleu-pale); }
.tampon.pris img{ opacity:1; }

/* =========================================================
   AVIS
   ========================================================= */
.note{ text-align:center; }
.note-val{
  font-family:'Jost', sans-serif; font-weight:200;
  font-size:clamp(3.2rem, 11vw, 5rem); line-height:1; color:#fff;
}
.etoiles{ display:inline-flex; gap:.22rem; margin:.7rem 0 .5rem; }
.etoiles svg{ width:17px; height:17px; fill:#e8b04b; }
.etoiles svg.vide{ fill:rgba(255,255,255,.2); }
.note-meta{ font-size:.8rem; color:#8fa0b0; }

.avis-liste{ display:grid; gap:1rem; margin-top:2.6rem; grid-template-columns:1fr; text-align:left; }
@media (min-width:700px){ .avis-liste{ grid-template-columns:repeat(3,1fr); } }
.avis-carte{ border:1px solid rgba(255,255,255,.14); padding:1.3rem; }
.avis-tete{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.avis-pastille{
  width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--bleu-texte); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Jost', sans-serif; font-size:.95rem;
}
.avis-nom{ font-size:.9rem; color:#fff; }
.avis-date{ font-size:.75rem; color:#8fa0b0; }
.avis-texte{
  font-size:.9rem; color:#b0bcc8; margin:0;
  display:-webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}

/* =========================================================
   INFOS PRATIQUES
   ========================================================= */
.info{ display:flex; gap:.9rem; align-items:flex-start; padding:1.1rem 0; border-bottom:1px solid var(--filet); }
.sombre .info{ border-color:rgba(255,255,255,.13); }
.info svg{ width:19px; height:19px; flex:none; margin-top:.28rem; color:var(--bleu); }
.info h4{ font-size:.95rem; margin:0 0 .15rem; }
.info p, .info a{ margin:0; font-size:.94rem; color:var(--encre-2); }
.sombre .info p{ color:#b0bcc8; }
.info a{ color:var(--bleu-texte); }
.sombre .info a{ color:var(--bleu-clair); }
.info a:hover{ text-decoration:underline; }

.horaires{ width:100%; border-collapse:collapse; font-size:.94rem; }
.horaires tr{ border-bottom:1px solid var(--filet); }
.sombre .horaires tr{ border-color:rgba(255,255,255,.13); }
.horaires td{ padding:.72rem .2rem; }
.horaires td:last-child{ text-align:right; color:var(--encre-2); }
.sombre .horaires td:last-child{ color:#b0bcc8; }
.horaires .ferme td:last-child{ color:var(--encre-3); }

.carte-lieu{ border:1px solid var(--filet); overflow:hidden; }
.carte-lieu iframe{ width:100%; height:clamp(260px, 45vw, 400px); border:0; display:block; }

/* --- questions fréquentes --- */
.question{ border-bottom:1px solid var(--filet); }
.sombre .question{ border-color:rgba(255,255,255,.13); }
.question summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0; cursor:pointer; list-style:none;
  font-family:'Jost', sans-serif; font-size:1.02rem;
}
.question summary::-webkit-details-marker{ display:none; }
.question summary .plus{ flex:none; width:13px; height:13px; opacity:.5; transition:transform .25s; }
.question[open] summary .plus{ transform:rotate(45deg); }
.question p{ margin:0 0 1.15rem; font-size:.95rem; color:var(--encre-2); }
.sombre .question p{ color:#b0bcc8; }

/* --- étapes --- */
.etape{ padding:0 0 1.7rem 1.5rem; border-left:1px solid var(--filet); position:relative; }
.etape:last-child{ padding-bottom:0; }
.etape::before{
  content:""; position:absolute; left:-4px; top:.5rem;
  width:7px; height:7px; border-radius:50%; background:var(--bleu);
}
.etape h4{ font-size:1.02rem; margin:0 0 .25rem; }
.etape p{ margin:0; font-size:.94rem; color:var(--encre-2); }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.pied{ background:var(--bleu-nuit); color:#93a2b1; padding:clamp(2.5rem,6vw,4rem) 0 1.5rem; }
.pied .marque-nom{ color:#fff; }
.pied .marque-sous{ color:var(--bleu-clair); }
.pied-grille{ display:grid; gap:2.2rem; grid-template-columns:1fr; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.13); }
@media (min-width:760px){ .pied-grille{ grid-template-columns:1.4fr 1fr 1fr; } }
.pied h5{
  font-family:'Jost', sans-serif; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.2em; color:#fff; margin:0 0 1rem; font-weight:500;
}
.pied-liste li{ margin-bottom:.6rem; font-size:.92rem; }
.pied a{ color:#93a2b1; }
.pied a:hover{ color:#fff; }
.pied .lien-bleu{ color:var(--bleu-clair); }
.pied .lien-bleu:hover{ color:#fff; }
.pied-mention{ font-size:.76rem; color:#7c8b9a; margin-top:1rem; max-width:56ch; }
.pied-bas{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  padding-top:1.4rem; font-size:.76rem; color:#7c8b9a;
}
.paiements{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.paiement{
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.2); border-radius:2px;
  padding:.3rem .6rem; color:#b0bcc8;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
.apparait{
  opacity:0; transform:translateY(20px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.apparait.vu{ opacity:1; transform:none; }

/* --- rideau d'ouverture --- */
.rideau{
  position:fixed; inset:0; z-index:1500;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s;
}
.rideau.parti{ opacity:0; visibility:hidden; pointer-events:none; }
.rideau-marque{
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  opacity:0; transform:translateY(12px);
  animation:rideauEntree 1s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
.rideau-marque img{ height:66px; width:auto; }
.rideau-nom{
  font-family:'Jost', sans-serif; font-size:1.5rem;
  letter-spacing:.34em; color:var(--encre); padding-left:.34em;
}
.rideau-trait{
  width:0; height:1px; background:var(--bleu);
  animation:rideauTrait .9s cubic-bezier(.2,.7,.3,1) .55s forwards;
}
@keyframes rideauEntree{ to{ opacity:1; transform:none; } }
@keyframes rideauTrait{ to{ width:120px; } }

/* le bandeau d'accueil se pose après le rideau */
.heros-contenu .surtitre,
.heros-contenu h1,
.heros-contenu .chapo,
.heros .boutons{
  opacity:0; transform:translateY(18px);
}
body.rideau-fini .heros-contenu .surtitre,
body.rideau-fini .heros-contenu h1,
body.rideau-fini .heros-contenu .chapo,
body.rideau-fini .heros .boutons{
  animation:posee .9s cubic-bezier(.2,.7,.3,1) forwards;
}
body.rideau-fini .heros-contenu h1{ animation-delay:.09s; }
body.rideau-fini .heros-contenu .chapo{ animation-delay:.18s; }
body.rideau-fini .heros .boutons{ animation-delay:.27s; }
@keyframes posee{ to{ opacity:1; transform:none; } }

body.rideau-fini .heros-image img{ animation:respire 16s ease-out forwards; }
@keyframes respire{ from{ transform:scale(1.06); } to{ transform:scale(1); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .apparait{ opacity:1 !important; transform:none !important; }
  .heros-contenu .surtitre, .heros-contenu h1, .heros-contenu .chapo, .heros .boutons{ opacity:1; transform:none; }
  .rideau{ display:none; }
}

/* =========================================================
   VÉRIFICATION D'ÂGE
   ========================================================= */
html.age-bloque, html.age-bloque body{ overflow:hidden; }
.porte{
  position:fixed; inset:0; z-index:1600;
  display:flex; align-items:center; justify-content:center;
  padding:1.1rem;
  background:rgba(10,16,22,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  animation:fondu .35s ease forwards;
}
.porte.sort{ animation:fonduSortie .35s ease forwards; }
@keyframes fondu{ from{opacity:0} to{opacity:1} }
@keyframes fonduSortie{ from{opacity:1} to{opacity:0} }
.porte-carte{
  width:min(430px,100%); background:#fff; border-radius:4px; overflow:hidden;
  max-height:92svh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:monte .5s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes monte{ from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }
.porte-tete{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1.3rem; border-bottom:1px solid var(--filet);
}
.porte-tete img{ height:30px; width:auto; }
.porte-tete span{ font-family:'Jost', sans-serif; letter-spacing:.24em; font-size:1.02rem; }
.porte-corps{ padding:2rem 1.6rem 1.7rem; text-align:center; }
.porte-age{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:50%;
  border:1px solid var(--bleu); color:var(--bleu-texte);
  font-family:'Jost', sans-serif; font-size:1.2rem; margin-bottom:1.1rem;
}
.porte-age.refus{ border-color:var(--rouge); color:var(--rouge); }
.porte-corps h2{ font-size:1.3rem; margin-bottom:.7rem; }
.porte-corps p{ font-size:.9rem; color:var(--encre-2); }
.porte-boutons{ display:grid; gap:.6rem; margin-top:1.5rem; }
@media (min-width:400px){ .porte-boutons{ grid-template-columns:1fr 1fr; } }
.porte-boutons .bouton{ width:100%; padding:.85rem 1rem; font-size:.74rem; letter-spacing:.1em; }


/* --- lisibilité du bandeau d'accueil sur petit écran --- */
@media (max-width:600px){
  .heros-contenu .surtitre{ letter-spacing:.13em; font-size:.63rem; }
  .heros-contenu h1{ max-width:none; }
  .heros{ min-height:min(88svh, 700px); }
  .heros-image img{ object-position:center 38%; }
}

/* le bouton secondaire du bandeau garde un fond, sinon il se perd sur la photo */
.heros .bouton-ligne{
  color:#fff; border-color:rgba(255,255,255,.7);
  background:rgba(10,17,24,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.heros .bouton-ligne:hover{ background:#fff; color:var(--bleu-nuit); }

/* --- confort tactile : cibles suffisamment hautes sur mobile --- */
@media (max-width:999px){
  .pied-liste li{ margin-bottom:.15rem; }
  .pied-liste a{ display:inline-block; padding:.55rem 0; min-height:44px; }
  .pied-liste li:not(:has(a)){ padding:.4rem 0; }
  .info a{ display:inline-block; padding:.3rem 0; }
  .puce{ padding:.6rem 1.05rem; }
  .lien-evitement{ min-height:44px; }
}
.tiroir-contact a{ padding:.55rem 0; min-height:44px; display:flex; align-items:center; }

/* signature du concepteur */
.signature{
  text-align:center;
  font-size:.72rem;
  color:rgba(255,255,255,.34);
  margin:.9rem 0 0;
  letter-spacing:.02em;
}
.signature a{ color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.16); }
.signature a:hover{ color:rgba(255,255,255,.62); }

/* --- bouton d'appel direct, visible tant que le numéro n'est pas affiché --- */
.tel-icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:none;
  margin-left:auto; margin-right:.15rem;
  color:var(--bleu-texte);
  border:1px solid var(--bleu-clair); border-radius:50%;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s, color .2s, transform .2s;
}
.tel-icone svg{ width:19px; height:19px; }
.tel-icone:active{ transform:scale(.94); }
.tel-icone:hover{ background:var(--bleu-clair); color:#fff; }
/* au-delà de 1000px le numéro complet est déjà affiché : l'icône devient inutile */
@media (min-width:1000px){ .tel-icone{ display:none; } }

/* --- appel flottant sur l'accueil mobile, toujours à portée de pouce --- */
.appel-flottant{
  position:fixed; z-index:60;
  right:max(1rem, env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.25rem;
  background:var(--bleu-clair); color:#fff;
  border-radius:999px; font-size:.92rem; font-weight:500;
  box-shadow:0 10px 26px -10px rgba(10,17,24,.55);
  opacity:0; transform:translateY(14px) scale(.96); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.appel-flottant.visible{ opacity:1; transform:none; pointer-events:auto; }
.appel-flottant svg{ width:17px; height:17px; flex:none; }
.appel-flottant:active{ transform:scale(.96); }
@media (min-width:1000px){ .appel-flottant{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .appel-flottant{ transition:none; }
}

/* --- lisibilité du bandeau sur photo claire --- */
.heros-contenu .surtitre{
  color:#f0f6fc;
  text-shadow:0 1px 3px rgba(6,11,17,.95), 0 2px 16px rgba(6,11,17,.9);
}
/* le bouton principal doit rester visible sur une photo lumineuse */
.heros .boutons .bouton-plein{
  background:var(--bleu);
  border-color:var(--bleu);
  color:#fff;
  box-shadow:0 8px 22px -12px rgba(6,11,17,.8);
}
.heros .boutons .bouton-plein:hover{ background:#3f7fc2; border-color:#3f7fc2; }
.heros .boutons .bouton-ligne{
  border-color:rgba(255,255,255,.88); color:#fff;
  background:rgba(10,17,24,.20);
}
.heros .boutons .bouton-ligne:hover{ background:rgba(255,255,255,.18); }

/* liens en pleine page de texte */
.lien-texte{ color:var(--bleu-texte); text-decoration:underline; text-underline-offset:3px; }
.lien-texte:hover{ color:var(--bleu-nuit); }