:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --line:#eee;
  --brand:#e8b9c8;   /* rose clair */
  --brand-2:#e796a9; /* rose plus soutenu */
  --accent:#111;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Reset de base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.65;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{opacity:.85}

/* Layout utilitaires */
.container{max-width:1180px;margin-inline:auto;padding-inline:20px}
.narrow{max-width:860px;margin-inline:auto}
.centered{text-align:center}
.small{font-size:.95rem}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap}

/* ======================= */
/* HEADER (logo centré)    */
/* ======================= */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--line);
}
.nav{
  height:130px;                                 /* un peu plus haut pour le logo doublé */
  display:grid;
  grid-template-columns:1fr auto 1fr;           /* gauche / logo / droite */
  align-items:center;
  column-gap:120px;                              /* <-- 120 px de chaque côté du logo */
  padding-inline:20px;                           /* petite marge sur les bords du viewport */
}
.nav-left,.nav-right{
  display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;
}
.nav-left{ justify-content:flex-end; }           /* les items viennent se caler près du logo */
.nav-right{ justify-content:flex-start; }
.nav-left a,.nav-right a{font-weight:500}



/* === MENU AVEC SOUS-RUBRIQUES (DESKTOP) === */
.nav-left li.has-submenu {
  position: relative;
}

.nav-left li.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 10px 0;
  list-style: none;
  min-width: 220px;
  z-index: 10;
}

.nav-left li.has-submenu:hover .submenu {
  display: block;
}

.nav-left li.has-submenu .submenu li {
  padding: 0;
}

.nav-left li.has-submenu .submenu a {
  display: block;
  padding: 10px 16px;
  white-space: nowrap;
  font-weight: 500;
}

/* === MENU AVEC SOUS-RUBRIQUES (MOBILE) === */
.mobile-drawer li.has-submenu > a::after {
  content: "▸";
  float: right;
  transition: transform 0.3s ease;
}

.mobile-drawer li.has-submenu.open > a::after {
  transform: rotate(90deg);
}

.mobile-drawer li.has-submenu .submenu {
  display: none;
  padding-left: 12px;
}

.mobile-drawer li.has-submenu.open .submenu {
  display: block;
}

.mobile-drawer .submenu a {
  padding: 8px 6px;
}


.brand{display:flex; justify-content:center; align-items:center}
.brand img{
  height:120px;                                  /* desktop : ~x2 */
  width:auto; object-fit:contain;
}

.book-pill{
  background:#000; color:#fff; border-radius:999px;
  padding:.55rem 1rem; font-weight:600; display:inline-flex; align-items:center; justify-content:center;
}

/* Mobile header (un seul bloc !) */
.nav-toggle{display:none;border:0;background:transparent;font-size:22px;cursor:pointer}
@media (max-width:980px){
  .nav{
    grid-template-columns:auto 1fr auto;
    height:88px;
    column-gap:24px;
    padding-inline:20px;
  }
  .nav-left,.nav-right{display:none}
  .nav-toggle{display:block; color:var(--brand-2)}
  .brand img{ height:78px; }                     /* +30% vs ~48px */
  .mobile-drawer[hidden]{display:none}
  .mobile-drawer{
    position:fixed; inset:88px 0 auto 0; background:#fff; border-top:1px solid var(--line);
    box-shadow:var(--shadow); padding:14px 18px; z-index:60;
  }
  .mobile-drawer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
  .mobile-drawer a{padding:10px 6px; display:block; border-radius:6px}
  .mobile-drawer .book-pill{width:max-content}
}


/* ======================= */
/* BOUTONS                  */
/* ======================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:6px;padding:.75rem 1.25rem;font-weight:600;transition:.2s}
.btn.primary{background:var(--brand-2);color:#fff}
.btn.primary:hover{filter:brightness(.96)}
.btn.outline{border:1px solid var(--accent);color:var(--accent);background:transparent}
.btn.outline:hover{background:#f7f7f7}
.btn.small{padding:.6rem 1rem;border-radius:999px}

/* ======================= */
/* HERO                     */
/* ======================= */
.hero{position:relative}
.hero-img{width:100%;height:76vh;min-height:420px;object-fit:cover}
/* Mobile */
@media (max-width: 900px) {
  .hero-img{width:100%;height:54vh;min-height:420px;object-fit:cover}
}
.hero-cta{position:relative}
.cta-card{
  position:relative; margin:-70px auto 0; max-width:760px;
  background:#fff; border:1px solid #f2f2f2; border-bottom:3px solid var(--brand);
  box-shadow:var(--shadow); padding:28px 28px 24px; text-align:center;
}
.cta-card h1{font-weight:700; font-size:28px; line-height:1.2; margin:0 0 10px}
.cta-card p{margin:0 0 18px; color:var(--muted)}
.cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}


/* ======================= */
/* CTA STICKY (MOBILE)     */
/* ======================= */

#cta-sticky { display: none; } /* contrôlé par JS */

@media (max-width: 900px) {
  #cta-sticky {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex; /* quand visible */
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.98);
    border-top: 1px solid var(--line, #eee);
    box-shadow: 0 -8px 20px rgba(0,0,0,.08);
    z-index: 70;
  }
  #cta-sticky .btn { flex: 1; min-width: 0; }

  /* évite que la barre recouvre le contenu */
  body.has-sticky-cta { padding-bottom: 76px; } /* ajuste si besoin */
}


/* ======================= */
/* WELCOME / INTRO          */
/* ======================= */
.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.9rem;margin:18px 0 4px}
.display{font-weight:800;font-size:52px;margin:4px 0 8px; line-height:1.15}
.pink-underline{display:block;width:56px;height:6px;background:var(--brand-2);border-radius:999px;margin:12px auto 22px}

.intro{padding:28px 20px 10px}
.intro-text{max-width:780px;margin:0 auto 18px}
.intro-text p{margin:.65rem 0}
.intro-photo{max-width:460px;margin:14px auto 0;border:1px solid var(--line);box-shadow:var(--shadow)}

/* ======================= */
/* SERVICES (tuiles)        */
/* ======================= */
.services{padding:46px 0; background:#f9edf0}
.service-row{display:grid;grid-template-columns:1fr;gap:30px;padding:20px 0}
@media (min-width:900px){.service-row{grid-template-columns:repeat(3,1fr)}}

/* l’ancre doit être un bloc et le conteneur de positionnement */
.service-row a.service-tile{
  display:block;
  position:relative;
  inset:auto;          /* sécurité si un style hérité traîne */
}

/* assure l’empilement: l’image sous, le cadre au-dessus */
.service-row a.service-tile img{
  position:relative;
  z-index:1;
}

.service-row a.service-tile .tile-frame{
  position:absolute;
  inset:8%;
  z-index:2;
  pointer-events:none;
  -webkit-transform:translateZ(0); /* iOS: force compositing */
  transform:translateZ(0);
}


.service-tile{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:12px;box-shadow:0 15px 30px rgba(0,0,0,.08)}
.service-tile img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.service-tile:hover img{transform:scale(1.05)}

.service-tile .service-link{display:block;position:relative;height:100%}

/* Remplace ce bloc */
.tile-frame{
  position: absolute;
  inset: 8%;                       /* bordure intérieure centrée, iOS-safe */
  display: grid;
  place-items: center;             /* centre le libellé */
  border: 2px solid #fff;
  outline: 1px solid rgba(255,255,255,.5);
  pointer-events: none;            /* clic passe à travers */
  z-index: 2;                      /* au-dessus de l'image */
  will-change: transform;
  -webkit-backdrop-filter: brightness(.9);
  backdrop-filter: brightness(.9);
}
/* On applique le backdrop-filter sur un pseudo-élément derrière le texte */
.tile-frame::before{
  content: "";
  position: absolute;
  inset: 0;
  -webkit-backdrop-filter: brightness(.9);
  backdrop-filter: brightness(.9);
  border-radius: inherit;
  z-index: 0;
}
.tile-frame span{
  position: relative;              /* passe devant ::before */
  z-index: 1;
  background: rgba(255,255,255,.9);
  padding: .75rem 1.25rem;
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  line-height: 1.25;
  letter-spacing: .03em;
  border-radius: 6px;
  display: inline-block;
  max-width: calc(100% - 24px);
  white-space: normal;
}




/* =============== TESTIMONIALS =============== */
.testimonials{
  background:#fff; /* tu peux garder ton background-image inline si tu veux */
  background-image: url('/images/testimonials-bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left center;  
}
.testimonials-inner {
  display: flex;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  column-gap: 48px;
  min-height: 80vh;
  padding: 96px 20px;
}

/* Colonne image (gauche) : BACKGROUND uniquement */
.testi-image {
  flex: 1;
  min-height: 60vh;
  background-image: url('/images/testimonials-bg.jpgtestimonials-bg.jpg');
  background-size: cover;
  background-position: center left;
  background-repeat: no-repeat;
  display: block; /* ✅ bien visible sur desktop */
}

.testi-content {
  flex: 1; /* texte */
}


/* Desktop uniquement */
@media (min-width: 901px) {
  .testi-quotes {
    max-width: 660px;
    text-align: center;
    background: rgba(255, 255, 255, 0.88); /* optionnel : fond blanc semi-transparent si lisibilité difficile */
    padding: 20px;
    border-radius: 10px;
    margin-left: 250px;
  }
}

/* Mobile */
@media (max-width: 900px) {
  .testi-quotes {
    margin-left: 0;
    text-align: center;    
  }
}


.quote-heading{
  font-weight:600; font-size:28px; color:#333; margin:0 0 18px; position:relative;
}
.quote-heading::before{
  content:"”"; display:block; font-size:54px; line-height:1; color:#e1e1e1; margin-bottom:8px;
}
.quote-heading::after{
  content:""; display:block; width:56px; height:6px; border-radius:999px; margin:12px auto 0;
  background: var(--brand-2);
}
.quote{ margin-top:22px; }
.quote-text{ font-style:italic; font-size:20px; line-height:1.75; letter-spacing:.01em; color:#222; margin:0 0 24px; }
.quote-author{ font-weight:700; margin:0 0 14px; }
.quote-dots{ display:flex; gap:8px; justify-content:center; align-items:center; margin:10px 0 16px; }
.quote-dots .dot{ width:10px; height:10px; border-radius:50%; border:2px solid #222; background:transparent; display:inline-block; cursor: pointer;}
.quote-dots .dot.active{ background:#222; }
.quote-source{ font-style:italic; color:#444; margin:0; }

/* ----- Mobile : on ne voit que le témoignage ----- */
@media (max-width: 900px){
  .testimonials-inner {
    flex-direction: column;
    padding: 48px 20px;
    min-height: 50px;
  }
  .testi-image {
    display: none;
  }

  .testi-image {
    display: none;         /* ✅ Garde ceci pour masquer complètement l'image */
  }

  .quote-text {
    font-size: 18px;       /* Optionnel : légèrement plus petit sur mobile */
  }
}

/* ======================= */
/* CONTACT / HOURS / MAP    */
/* (identique au modèle)    */
/* ======================= */
.contact-section{background:#f7f7f7; padding:0; padding-top: 28px;}
.contact-inner{
  max-width:1200px;margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr 1.6fr; gap:60px; align-items:start;
  min-height:520px; padding:0 20px;
}
/* colonnes */
.contact-column,.hours-column { position: relative; z-index: 10; }
.hours-column a { pointer-events: auto; }

@media (min-width: 901px) {
  .contact-section-global .contact-inner-global .contact-column-global {
    padding-left: 60px; /* ajuste cette valeur si besoin */
    padding-top: 100px;
  }
}

.map-column{padding:0;margin:0}
.map-column iframe{width:100%;height:100%;min-height:420px;border:0;display:block}

/* Titres + filet rose */
.contact-title{
  text-transform:uppercase; font-weight:700; font-size:1rem; letter-spacing:.05em;
  margin:0 0 12px; position:relative;
}
.contact-title::after{
  content:""; display:block; width:40px; height:3px; background:var(--brand-2);
  border-radius:999px; margin-top:8px;
}

/* Icônes + lignes */
.contact-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:12px}
.icon-line{display:flex;gap:12px;align-items:flex-start}
.icon-line svg{width:18px;height:18px;fill:#222;opacity:.8;flex:0 0 18px;margin-top:3px}
.icon-line a{color:inherit}

/* Horaires (pointillés) */
.hours{display:grid;gap:10px;margin:8px 0 18px}
.hours>div{display:flex;justify-content:space-between;border-bottom:1px dashed #e2e2e2;padding:6px 0}

@media (max-width:980px){
  .contact-inner{grid-template-columns:1fr; gap:24px; padding:20px}
  .contact-column,.hours-column{padding:0}
  .map-column iframe{min-height:300px}
}

/* Desktop only: align "Horaires" with "Me contacter" */
@media (min-width: 981px) {
  .hours-column { 
    padding-top: 100px;   /* 32–60px OK; match your left column look */
  }
}


/* ======================= */
/* GALERIE (style Insta)   */
/* ======================= */
.insta {
  padding: 42px 0;
}

.insta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);   /* par défaut mobile : 2 colonnes */
}

@media (min-width: 900px) {
  .insta-grid {
    grid-template-columns: repeat(4, 1fr); /* desktop : 4 colonnes */
  }
}

.insta-grid img {
  width: 100%;
  aspect-ratio: 1 / 1;        /* carré parfait */
  object-fit: cover;          /* recadrage sans déformation */
  border-radius: 6px;         /* optionnel : coins arrondis */
  box-shadow: var(--shadow);  /* même ombre que le reste */
}

.insta-btn {
  display: flex;
  justify-content: center;   /* centre horizontalement */
  margin-top: 24px;          /* espace au-dessus */
}



/* ======================= */
/* FAQ            */
/* ======================= */

.faq-section {
  padding: 80px 20px;
  background: #fff;
}

.faq-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
  text-transform: uppercase;
  position: relative;
}

.faq-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: var(--brand-2);
  border-radius: 999px;
  margin: 16px auto 0;
}

.faq-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.faq-item {
  border-bottom: 1px solid #eee;
}

.faq-question {
  background: none;
  border: none;
  padding: 18px 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
  cursor: pointer;
  position: relative;
  color: #222;
}

.faq-question::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--brand-2);
}

.faq-question[aria-expanded="true"]::after {
  content: "–";
}

.faq-answer {
  display: none;
  padding-bottom: 18px;
  color: #444;
  line-height: 1.6;
}


@media (max-width: 900px) {
  .testimonials {
    background: #fff; /* ✅ fond blanc ou autre neutre sur mobile */
  }

  .testimonials-inner {
    padding: 60px 20px;
    flex-direction: column;
  }

}



/* ======================= */
/* CONTACT FORM            */
/* ======================= */
.contact-column form { max-width: 760px; }

.form-row { display: block; margin-top: 14px; }
.form-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) {
  .form-row.two { grid-template-columns: 1fr; }
}

/* Field wrapper keeps labels aligned if you show them later */
.field { display: flex; flex-direction: column; }

/* Inputs & textarea */
.contact-column input[type="text"],
.contact-column input[type="email"],
.contact-column input[type="tel"],
.contact-column input[type="date"],
.contact-column textarea {
  width: 100%;
  appearance: none;
  border: 1px solid #e5e5e5;
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  font: inherit;
  line-height: 1.3;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.02) inset;
}
.contact-column textarea { resize: vertical; min-height: 140px; }

/* Placeholder */
.contact-column ::placeholder { color: #999; }

/* Focus & invalid */
.contact-column input:focus,
.contact-column textarea:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(231,150,169,.18);
  background: #fff;
}
.contact-column input:invalid:focus,
.contact-column textarea:invalid:focus {
  border-color: #d33;
  box-shadow: 0 0 0 3px rgba(221,51,51,.12);
}

/* Submit button spacing */
/* Forcer l'apparence custom du bouton sur iPhone */
.contact-column .btn.primary {
  -webkit-appearance: none;   /* enlève le style par défaut iOS */
  appearance: none;           /* standard */
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 8px;
  display: inline-block;      /* ou block si tu veux pleine largeur */
  width: auto;                /* mettre 100% si tu veux largeur totale */
}



/* Champ date custom (icône + label) */
/* Harmonisation avec les autres inputs */
/* Champ date custom (icône + label) */
.date-field { 
  position: relative;           /* ← repère pour l'overlay */
  overflow: hidden; 
}
.date-field, .date-field * { box-sizing: border-box; }

/* L'input date invisible mais cliquable, pile au-dessus du bouton visuel */
.date-overlay {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0; border: 0; background: transparent;
  z-index: 2;                   /* au-dessus du bouton visuel */
  pointer-events: auto;         /* capte le clic pour ouvrir le picker */
  appearance: auto;
  -webkit-appearance: auto;     /* ← on laisse l'apparence native */
}

/* Bouton visuel */
.date-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #e5e5e5;
  background: #fff;
  position: relative; z-index: 1;
  cursor: pointer;
}
.date-trigger svg { flex: 0 0 auto; opacity: .9; }
.date-text { display: flex; flex-direction: column; }
.date-text strong { font-weight: 600; color: #333; line-height: 1.2; }
.date-value { font-style: normal; color: #666; margin-top: 2px; font-size: .95rem; }

/* Focus visible quand l'input (overlay) reçoit le focus */
.date-overlay:focus + .date-trigger {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(231,150,169,.18);
}


/* Alerts (success / error) */
.alert {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.alert.success { background: #ecfbf4; border: 1px solid #b7ead5; color: #116b47; }
.alert.error   { background: #fff3f3; border: 1px solid #f0caca; color: #8a1f1f; }


  /* empêche les conflits : on scope sur .contact-section */
  .contact-section-global .contact-inner-global {
    display: grid;
    gap: 32px;
    grid-template-columns: 1.2fr 1fr 1.6fr;
    align-items: start;
    padding-left: 40px;
    padding-right: 20px;
  }
 
  @media (max-width: 900px) {
    .contact-section-global .contact-inner-global {
      grid-template-columns: 1fr;
      padding: 20px; /* padding global sur mobile */
    }
  }

  @media (min-width: 901px) {
    .contact-section-global .contact-inner-global .hours-column-global {
      padding-left: 60px;   /* same as .contact-column-global */
      padding-top: 60px;    /* optional: match vertical rhythm */
    }
  }

  .map-fullwidth{ margin-top:32px; }
  .map-fullwidth .map-embed{
    width:100%; min-height:420px; border:0; display:block;
  }


/* reCAPTCHA alignment */
.g-recaptcha { transform: scale(1); transform-origin: 0 0; }

/* Ensure the 2/3 – 1/3 columns on contact page */
.contact-section .contact-inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 2fr 1fr;  /* 2/3 form – 1/3 infos */
  align-items: start;
}
@media (max-width: 900px){
  .contact-section .contact-inner { grid-template-columns: 1fr; }
}

/* Map full width section alignment */
.map-fullwidth { margin-top: 32px; }
.map-fullwidth .map-embed { width: 100%; min-height: 420px; border: 0; display: block; }





/* ======================= */
/* MODALE SERVICE           */
/* ======================= */
.modal {
  position: fixed; inset: 0; z-index: 999;
  display: none; align-items: center; justify-content: center;
  /* évite que l’overlay colle sous l’encoche ou la barre du bas */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

@media (max-width: 768px) {
  .modal img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }
}

.modal.open { display: flex; }

.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

/* ---- Boîte de dialogue ---- */
.modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1000px, 92vw);
  max-height: 90svh;              /* svh = small viewport height (iOS) */
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 22px;
  padding: 22px;
  overflow: auto;                  /* scroll interne si besoin */
}

/* ---- Bouton fermer (desktop) ---- */
.modal-close {
  position: absolute;
  top: 10px; right: 12px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 28px; line-height: 1; color: #444; z-index: 2;
}

.modal-media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 10px;
}



.modal-content { padding-right: 12px; }
.modal-content h3 { margin: 0 0 6px; font-size: 28px; font-weight: 800; }
.modal-price { margin: 0 0 10px; font-weight: 700; color: var(--brand-2); }
.modal-content p { margin: 0 0 12px; color: var(--text); }

.modal-actions { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.modal-actions .btn { /* réutilise .btn existant */ }

/* ---- Mobile plein écran & croix toujours accessible ---- */
@media (max-width: 900px){
  .modal-dialog {
    width: 100vw;
    height: 100dvh;               /* d = dynamic (corrige le bug de 100vh sur iOS) */
    max-height: none;
    border-radius: 0;
    padding: calc(env(safe-area-inset-top) + 16px) 16px
             calc(env(safe-area-inset-bottom) + 16px) 16px;
    grid-template-columns: 1fr;   /* image au-dessus, texte dessous */
  }

  /* La croix est FIXÉE au viewport, sous l’encoche */
  .modal-close {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    right: calc(env(safe-area-inset-right) + 12px);
    font-size: 32px;
  }
}

/* Bloque le scroll du body quand la modale est ouverte */
body.modal-open { overflow: hidden; }





/* ======================= */
/* PIED DE PAGE             */
/* ======================= */
.site-footer{border-top:1px solid var(--line);padding:18px 0;background:#fafafa}
.site-footer p{margin:0;text-align:center;color:#666}