/* =========================================================
   Tokens / Base
========================================================= */
:root{
  --bg:#0d0d0e; --surface:#131316; --muted:#181a1d; --line:#23252a;
  --text:#f2f2f4; --text-dim:#b9bac1; --accent:#ffffff;
  --radius:18px; --radius-xl:32px; --shadow:0 14px 42px rgba(0,0,0,.45);
  --container:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding:0 24px}
.section{padding:96px 0; border-top:1px solid var(--line)}

/* Typo titres : échelle sémantique propre */
h1,h2,h3{
  font-family:"Cormorant Garamond", serif;
  font-weight:600; text-align:center; padding-bottom:30px;
}
h1{ font-size:clamp(36px, 5vw, 44px) }
h2{ font-size:clamp(28px, 3.2vw, 34px) }
h3{ font-size: clamp(22px, 2.6vw, 28px) }

.panel h3 {
  padding-bottom: 0; /* annule le padding global */
  margin: 4px 0;     /* rapproche les titres entre eux */
}

.panel h3:last-of-type {
  margin-bottom: 30px; /* remet l’espace normal avant le paragraphe */
}

/* =========================================================
   Header / Navbar
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:rgba(10,10,11,.55); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; height:100px}
.brand{display:flex; align-items:center}
.brand__image{
  height:145px; width:auto; display:block;
  filter:drop-shadow(0 6px 18px rgba(255,255,255,.25));
  padding:10px;
}
.nav__links{display:flex; align-items:center; gap:18px}
.nav__links a{
  color:var(--text-dim); padding:10px 12px; border-radius:12px; border:1px solid transparent;
}
.nav__links a:hover{color:var(--text); background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.06)}

/* Hamburger (SVG) */
.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; padding:0; font-size:0;
  background:linear-gradient(180deg,#1b1c1f,#131316);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.menu-toggle:hover{ background:#16171a; border-color:rgba(255,255,255,.16); transform:translateY(-1px) }
.menu-toggle:active{ transform:translateY(0) }
.menu-toggle:focus-visible{ outline:2px solid #ff41ae; outline-offset:3px }
.menu-toggle .hamb line{
  stroke:currentColor; stroke-width:2.6; stroke-linecap:round;
  transition:transform .22s ease, opacity .18s ease;
}
/* Animation en X (ajoute .is-open sur .site-header côté JS) */
.site-header.is-open .menu-toggle .l1{ transform-origin:12px 12px; transform:rotate(45deg) }
.site-header.is-open .menu-toggle .l2{ opacity:0 }
.site-header.is-open .menu-toggle .l3{ transform-origin:12px 12px; transform:rotate(-45deg) }

.btn{
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,#1b1c1f,#131316);
  color:var(--text); padding:10px 16px; border-radius:14px;
  font-weight:600; transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent}

/* Icônes dans la navbar */
.nav__icons{ display:flex; gap:10px; margin-left:6px; }

/* =========================================================
   Icon buttons + Tooltips (tel / calendrier / insta)
========================================================= */
.icon-btn{
  --size:48px; width:var(--size); height:var(--size);
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;
}
.icon-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); transform:translateY(-2px) }
.icon-btn:focus-visible{ outline:2px solid #ff41ae; outline-offset:2px }
.icon-btn svg{ width:24px; height:24px }
.icon-btn--phone svg{ width:26px; height:26px }
.icon-btn--insta{
  padding:10px; border-radius:12px; background:transparent;
  border:1px solid rgba(255,255,255,.08); color:var(--text);
}
.icon-btn--insta:hover{ opacity:.85; background:rgba(255,255,255,.08); transform:translateY(-2px) }

/* Tooltip générique (apparaît sous l’icône) */
.tooltip{
  position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(-4px);
  background:rgba(20,20,22,.92); color:#fff;
  font-size:14px; padding:6px 10px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:20;
}
.icon-btn:hover .tooltip{ opacity:1; transform:translateX(-50%) translateY(0) }
.tooltip::after{
  content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-bottom-color:rgba(20,20,22,.92);
}

/* ===== Bouton Instagram (même style que tel / calendrier) ===== */
.icon-btn--insta {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.icon-btn--insta:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

.icon-btn--insta svg {
  width: 24px;
  height: 24px;
}


/* =========================================================
   HERO
========================================================= */
.hero{ position:relative; isolation:isolate; overflow:hidden; min-height:66vh; background:#000; z-index:0; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 65% }
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.88) 85%);
  z-index:1; pointer-events:none;
}
.hero__wrap{ position:relative; padding:220px 0 160px; z-index:2; }
.hero__panel{
  margin:auto; max-width:800px; text-align:center;
  border-radius:32px; background:rgba(20,20,22,.18);
  border:1px solid rgba(255,255,255,.08); box-shadow:var(--shadow);
  padding:50px; backdrop-filter:blur(10px) saturate(120%);
}
.hero__panel p{ text-align:justify; text-justify:inter-word; margin-inline:auto; max-width:72ch; }
.cta-icons{display:flex; justify-content:center; align-items:center; gap:14px; margin-top:10px}

/* =========================================================
   Galerie / Carousel (portrait par défaut)
========================================================= */
.carousel{ position:relative; width:min(980px,100%); margin:0 auto }
.carousel__viewport{ overflow:hidden }
.carousel__track{
  display:flex; gap:18px; overflow-x:auto; overflow-y:hidden;
  padding:10px 12px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth; scroll-padding:0 12px; touch-action:pan-x pinch-zoom;
}
.carousel__track::-webkit-scrollbar{ display:none }

.card{
  flex:0 0 48%;
  max-width:560px; min-width:420px;
  aspect-ratio:4/5; border-radius:22px; overflow:hidden;
  background:var(--muted); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  scroll-snap-align:center;
  transition:transform .25s ease, filter .25s ease, opacity .25s ease;
}
.card img{ width:100%; height:100%; object-fit:cover; transition:transform .25s ease, filter .25s ease, opacity .25s ease }
.card.dim img{ transform:none; filter:none; opacity:1; }
.card.active img{ filter:none; opacity:1; transform:none }

.carousel__ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(18,18,20,.85); border:1px solid rgba(255,255,255,.08);
  z-index:5;
}
.carousel__ctrl--prev{ left:-6px }
.carousel__ctrl--next{ right:-6px }

.dots{ display:flex; gap:8px; justify-content:center; margin-top:12px }
.dot{ width:8px; height:8px; border-radius:50%; background:#34353b; border:1px solid rgba(255,255,255,.06) }
.dot.active{ background:#f2f2f4 }

/* =========================================================
   Services (grille + captions sur images)
========================================================= */
.grid-section h2{ margin:0 0 24px } /* hérite de h2 */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px }
.media{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg,#141416,#101012);
  border-radius:20px;
}
.media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(12%) saturate(.9) contrast(1.02) }
.media .caption{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.65) 100%);
  color:#fff; padding:10px 14px; text-align:center;
  font-family:"Cormorant Garamond", serif; font-size:18px; letter-spacing:.3px;
  text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.panel{
  background:linear-gradient(180deg,#141416,#101012);
  border:1px solid rgba(255,255,255,.06); border-radius:20px;
  padding:26px 28px; box-shadow:0 10px 28px rgba(0,0,0,.3)
}
.panel h3{ margin:0 0 10px; font-size:24px }
.panel p{
  margin:0; color:var(--text-dim); line-height:1.7;
  text-align:justify; text-justify:inter-word; hyphens:auto; overflow-wrap:break-word; width:85%;
}
.grid-section .panel{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:32px }

/* =========================================================
   À propos / Footer
========================================================= */
/* ===== À propos ===== */
#apropos .narrow{
  max-width:820px;
  margin:0 auto;
  padding:0 26px;              /* petite marge interne pour éviter les bords collés */
}

#apropos h3{
  letter-spacing:.2px;
  margin-bottom:22px;          /* espace sous le titre */
  /* la taille vient déjà de h3 global, on la garde */
}

#apropos p{
  font-size:16.5px;
  line-height:1.85;
  color:var(--text-dim);

  /* Justification propre, sans grands trous */
  text-align:justify;
  text-justify:inter-word;
  word-spacing:normal;
  hyphens:auto;
  -webkit-hyphens:auto; /* iOS/Safari */
  -ms-hyphens:auto;     /* vieux Edge */

  margin:0 0 18px;
}

#apropos strong,
#apropos em{
  color:var(--text);
  opacity:.9;
  font-weight:600;
}

/* (Optionnel) sur mobile étroit, tu peux désactiver la justification */
@media (max-width:480px){
  #apropos p{ text-align:left; }
}

/* ===== Bouton Politique de confidentialité ===== */
#apropos .legal-link {
  margin-top: 60px;
  margin-bottom: -30px;  /* rapproche du bas */
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Style du bouton */
.btn-legal {
  display: inline-block;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 500;
  transition: all .25s ease;
  backdrop-filter: blur(8px) saturate(120%);
  text-decoration: none;
}

/* Effet au survol */
.btn-legal:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:32px 0; color:#a7a7ad; text-align:center; font-size:14px;
}
.site-footer p{ margin:0; line-height:1.6 }
.site-footer a{ color:#fff; opacity:0.8; text-decoration:none }
.site-footer a:hover{ opacity:1 }

/* =========================================================
   Responsive
========================================================= */
@media (max-width:980px){
  .section{ padding:72px 0 }
  .hero{ min-height:60vh }
  .hero__wrap{ padding:110px 0 90px }
  .hero h1{ font-size:36px }

  .nav__links{ display:none }
  .menu-toggle{ display:inline-flex }

  .grid{ grid-template-columns:1fr }

  /* Galerie en mobile */
  .card{
    flex-basis:88%; max-width:88%; min-width:85vw;
    aspect-ratio:3/4;
  }

  /* Menu mobile ouvert */
  .site-header.is-open .nav__links{
    display:flex !important; flex-direction:column;
    position:absolute; top:80px; right:16px;
    background:#141416; border:1px solid rgba(255,255,255,.06);
    border-radius:14px; padding:10px; gap:8px;
    box-shadow:0 14px 42px rgba(0,0,0,.45); z-index:9999;
  }
}

@media (max-width:640px){
  .nav{ height:92px }
  .brand__image{ height:130px; padding:6px }
  .menu-toggle{ width:50px; height:50px; border-radius:12px }
  .menu-toggle .hamb{ width:24px; height:24px }

  .hero{ min-height:100dvh }
  .hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.68) 75%) }

  .hero__wrap{
    min-height:calc(100dvh - 72px);
    display:grid; place-content:center;
    padding:clamp(16px,5vw,24px);
    padding-top:max(16px, env(safe-area-inset-top, 0px));
  }
  .hero__panel{
    max-width:min(88vw,520px);
    padding:20px 18px 18px; border-radius:22px;
    background:rgba(16,16,18,.44);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 36px rgba(0,0,0,.38);
    backdrop-filter:blur(9px) saturate(115%);
    text-align:center;
  }
  .hero h1{ font-size:clamp(24px,6vw,28px); line-height:1.18; letter-spacing:.2px; margin:8px 0 12px }
  .hero__panel p{
    font-size:15px;
    line-height:1.6;
    max-width:36ch;
    margin-inline:auto;

    text-align:justify;
    text-justify:inter-word;
    word-spacing:normal;
    hyphens:auto;
    -webkit-hyphens:auto; /* iOS/Safari */
    -ms-hyphens:auto;     /* vieux Edge */
  }

  .cta-icons{ gap:14px; margin-top:12px }
  .icon-btn{ --size:44px }
  .icon-btn svg{ width:22px; height:22px }
  .icon-btn--phone svg{ width:24px; height:24px }
}

@media (max-width:380px){
  .hero__panel{
    padding:16px 14px 16px;
    border-radius:18px;
  }
  .hero h1{
    font-size:22px;
  }
  .hero__panel p{
    font-size:14.5px;
    max-width:32ch;
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;           /* coupe les mots pour éviter les gros trous */
    word-spacing:normal;    /* empêche les espaces exagérés */
    line-height:1.6;        /* lisibilité améliorée */
  }
  .icon-btn{
    --size:42px;
  }
}

/* ===== Services : mapping explicite en desktop ===== */
@media (min-width:981px){
  .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:28px;
  }
  .grid > :nth-child(1){ grid-column:1; grid-row:1 }  /* media */
  .grid > :nth-child(2){ grid-column:2; grid-row:1 }  /* panel */
  .grid > :nth-child(3){ grid-column:2; grid-row:2 }  /* media -> droite */
  .grid > :nth-child(4){ grid-column:1; grid-row:2 }  /* panel -> gauche */
  .grid > :nth-child(5){ grid-column:1; grid-row:3 }  /* media */
  .grid > :nth-child(6){ grid-column:2; grid-row:3 }  /* panel */
  .grid > :nth-child(7){ grid-column:2; grid-row:4 }  /* media -> droite */
  .grid > :nth-child(8){ grid-column:1; grid-row:4 }  /* panel -> gauche */
  .grid > :nth-child(9){ grid-column:1; grid-row:5 }  /* media -> gauche */
  .grid > :nth-child(10){ grid-column:2; grid-row:5 } /* panel -> droite */
}

/* Ajustement de cadrage mobile du hero */
@media (max-width:980px){
  .hero-bg img{ object-position:top }
}

/* Centrage vertical tablette (641–980) */
@media (min-width:641px) and (max-width:980px){
  .hero{ min-height:90vh }
  .hero__wrap{
    min-height:calc(100vh - 100px);
    display:grid; place-content:center; padding:32px 0;
  }
  .hero__panel{ margin-inline:clamp(16px, 5vw, 36px); max-width:min(90vw, 720px) }
}