/* ============================================================
   POLICES (auto-hébergées, variable fonts — remplace Google Fonts)
   ============================================================ */
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;
  font-weight:200 800;
  src:url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';font-style:normal;font-display:swap;
  font-weight:200 800;
  src:url('fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-display:swap;
  font-weight:300 700;
  src:url('fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-display:swap;
  font-weight:300 700;
  src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   PALETTE RÉTRO 70s
   ============================================================ */
:root{
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-pop:cubic-bezier(.18,.9,.3,1.4);
  --cream:#FFFC00;
  --cream2:#FFE800;
  --paper:#fff;
  --pink:#F63794;
  --pink-deep:#D81B7A;
  --orange:#F0883E;
  --brown:#4A2E24;
  --brown-t:#5A3A2E;
  /* Cartouche · ADN sticker (hero-tag → cards) */
  --cart-bg:#fff;
  --cart-border:4px solid var(--brown);
  --cart-radius:22px;
  --cart-shadow:7px 7px 0 rgba(246,55,148,.78);
  --cart-shadow-hover:11px 11px 0 rgba(246,55,148,.78);
  --cart-shadow-mobile:5px 5px 0 rgba(246,55,148,.78);
  --banner-h:0px;
  --header-h:64px;
  --topbar-h:68px;
  /* Padding unique des cartouches (WhatsApp, téléphone, devis, avis) :
     en em, il suit la taille de police de chaque palier. */
  --pill-pad:.4em 1em;
  /* Écart unique entre les cartouches de la barre du haut. */
  --bar-gap:16px;
  /* Marge latérale de la barre du haut, factorisée : elle sert au padding ET
     au décalage négatif du sélecteur de langue, qui reste ainsi à 8px du bord
     quel que soit le palier. */
  --bar-pad-x:28px;
  /* Écart unique entre accueil, Facebook, Instagram et le devis. */
  --icon-gap:5px;
  /* Fond de la cartouche e-mail — teinte relevée depuis l'échantillon fourni.
     Si la valeur exacte diffère, c'est le SEUL endroit à corriger. */
  --mail-bg:#B8A600;
}
*{margin:0;padding:0;box-sizing:border-box}
/* --hdr est renseigné par un script à partir de la hauteur RÉELLE du <header>
   (barre du haut + nav + barre d'onglets mobile), et remis à jour au
   redimensionnement. Les anciennes variables écrites à la main dérivaient dès
   qu'on touchait à un padding. La valeur de repli sert avant l'exécution du script. */
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr,174px)}
/* Marge de défilement posée directement sur les sections cibles (plus fiable
   que scroll-padding-top seul, notamment sur Safari iOS) : le titre de la
   section reste visible juste sous les barres collantes après un clic de menu. */
/* ATTENTION : scroll-padding-top (ci-dessus, sur html) et scroll-margin-top
   S'ADDITIONNENT. La hauteur du bandeau est déjà portée par scroll-padding ;
   ici on ne met donc QUE le dégagement supplémentaire, jamais --hdr. */
#apropos,#particuliers,#professionnels,#galerie,#videos,#contact{
  scroll-margin-top:10px}
/* Sections précédées d'une vague : on s'arrête AU-DESSUS de la vague (54px de
   haut), pour qu'elle soit entièrement visible sous le bandeau au lieu de
   passer dessous. Le sélecteur `.wave + #id` bat la règle ci-dessus
   (1 identifiant + 1 classe contre 1 identifiant).
   #contact est absent volontairement : sa vague est masquée tant que la
   section Vidéos l'est (voir le bloc TEMPORAIRE en fin de fichier). */
.wave + #particuliers,.wave + #professionnels,.wave + #galerie{
  scroll-margin-top:54px}
body{font-family:'Space Grotesk',sans-serif;font-size:1rem;color:var(--brown-t);background:var(--cream);
  line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  font-feature-settings:"kern","liga","ss01";text-rendering:optimizeLegibility}
h1,h2,h3,.display{font-family:'Bricolage Grotesque',sans-serif;line-height:1.04;font-weight:700;letter-spacing:-.02em;font-feature-settings:"ss01","kern","liga"}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--pink);color:#fff}
.wrap{max-width:1040px;margin:0 auto;padding:0 28px}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:1.22rem;letter-spacing:-.015em;padding:.55em 1.9em;border-radius:var(--cart-radius);cursor:pointer;border:0;
  transition:transform .22s var(--ease), filter .22s var(--ease), box-shadow .3s var(--ease)}
.btn:hover{transform:translateY(-4px) scale(1.03)}
.btn:active{transform:translateY(-1px) scale(.98);transition-duration:.08s}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 10px 22px -8px rgba(216,27,122,.55)}
.cta-band .btn{border:2.5px solid transparent;
  background:linear-gradient(var(--pink),var(--pink)) padding-box,linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 50%,rgba(255,255,255,.95)) border-box;
  box-shadow:none}
.cta-band .btn:hover{box-shadow:0 8px 18px -10px rgba(216,27,122,.55)}
.btn-pink:hover{filter:brightness(1.07);box-shadow:0 22px 40px -10px rgba(216,27,122,.75)}
.btn-line{background:transparent;color:var(--brown);border:2px solid var(--brown)}
.btn-line:hover{background:var(--brown);color:var(--cream)}

/* ============================================================
   NAV
   ============================================================ */
.construction-banner{background:var(--pink);color:#fff;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.18rem;letter-spacing:.02em;padding:6px 16px;line-height:1;position:sticky;top:0;z-index:100}
header{position:sticky;top:var(--banner-h);z-index:90;background:transparent}
.top-bar{background:transparent}
.top-bar-inner{position:relative;z-index:5;max-width:1040px;margin:0 auto;padding:12px var(--bar-pad-x);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:2px;column-gap:var(--bar-gap);background:rgba(255,252,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
nav{display:flex;align-items:center;justify-content:space-between;padding:3px 28px 8px;background:rgba(255,252,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 20px 20px;max-width:1040px;margin:0 auto}
/* Barre d'onglets accueil (mobile/tablette uniquement) : rend les sections
   Photos/Vidéos visibles et accessibles en 1 tap, sans dépendre du burger. */
.home-nav{display:none}
@media (max-width:980px){
  header:has(.home-nav) nav{border-radius:0}
  /* Même style que le menu bureau : texte marron, sans cartouche,
     soulignement rose au survol et sur la section courante. */
  .home-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;padding:8px 14px 10px;
    background:rgba(255,252,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-radius:0 0 20px 20px;max-width:1040px;margin:0 auto;box-shadow:0 6px 16px rgba(74,46,36,.10);
    font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.003em}
  .home-nav a{position:relative;padding:4px 0;font-size:.95rem;color:var(--brown-t);
    transition:color .25s var(--ease)}
  .home-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
    background:var(--pink);border-radius:3px;transform:scaleX(0);transform-origin:left;
    transition:transform .45s var(--ease)}
  .home-nav a:hover{color:var(--pink)}
  .home-nav a:hover::after{transform:scaleX(1)}
  .home-nav a[aria-current="page"]{color:var(--pink)}
  .home-nav a[aria-current="page"]::after{transform:scaleX(1)}
}
@media (max-width:560px){.home-nav{gap:2px 14px;padding:7px 10px 9px}.home-nav a{font-size:.86rem}}
body:has(.page-nav) header nav{border-radius:0}
.nav-logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.55rem;letter-spacing:-.02em;color:var(--pink)}
.nav-logo span{color:var(--brown-t)}
.nav-links{display:flex;align-items:center;gap:30px;font-weight:700;font-size:1.3rem;font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.003em;flex:1}
.nav-links a:not(.btn){position:relative;padding:4px 0;transition:color .25s var(--ease)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--pink);border-radius:3px;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--pink)}
.nav-links a:not(.btn):hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--pink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:12px}
.nav-actions .btn,.btn-in-menu{padding:var(--pill-pad);font-size:1.04rem;
  color:var(--paper);border:2px solid transparent;
  background:linear-gradient(var(--pink),var(--pink)) padding-box,linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 50%,rgba(255,255,255,.95)) border-box;
  /* Mêmes métriques que .nav-wa / .nav-phone : ombre, largeur mini et centrage
     du contenu, pour que les trois cartouches soient rigoureusement identiques. */
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease)}
.nav-actions .btn:hover,.btn-in-menu:hover{transform:translateY(-2px) scale(1.06);
  box-shadow:0 7px 20px rgba(0,0,0,.2)}
.nav-actions .btn:active,.btn-in-menu:active{transform:translateY(0) scale(.97)}
/* Icône retour accueil (mobile uniquement) : remplace le menu burger.
   La navigation mobile passe par .home-nav (accueil) et .page-nav (pages
   prestation) ; cette icône assure le retour à l'accueil en 1 tap. */
.nav-home{display:none;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;background:var(--pink);border:2px solid #fff;
  color:#fff;box-sizing:border-box;
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.nav-home svg{width:20px;height:20px}
.nav-home:hover{transform:translateY(-2px) scale(1.08);filter:brightness(1.06)}
/* Les traits de l'icône (SVG en stroke:currentColor) restent blancs partout,
   y compris au survol. */
.nav-home,.nav-home:hover{color:#fff}

/* Groupe de droite (avis Google + sélecteur de langue) : flotte à droite en
   position absolue au-delà de 1000px, pour que WhatsApp/téléphone restent
   centrés dans la barre (indépendants de sa présence). */
/* Sélecteur de langue : toujours en position absolue dans le coin haut-droit,
   sur toutes les configurations. Hors du flux, il n'entre pas dans le calcul
   du centrage de WhatsApp/téléphone. */
/* Sélecteur de langue : ligne dédiée, alignée à droite, au-dessus des
   cartouches de contact — à toutes les largeurs. flex-basis:100% lui donne la
   ligne entière, order:-1 le place en premier alors qu'il est en dernier dans
   le HTML (rien à changer dans les 39 pages). */
.top-bar-right{order:-1;flex:0 0 100%;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  /* Ramené à 8px du bord et remonté de 4px : il occupe moins de place en haut. */
  margin-right:calc(2px - var(--bar-pad-x));margin-top:-8px}
/* Pas de min-width sur les cartouches : une largeur imposee laisse du jeu aux
   plus courtes (leur contenu est centre) et aucun aux plus longues, ce qui rend
   le blanc percu entre elles inegal. Largeur au contenu = ecart regulier. */
/* Cartouche « Votre avis » (Google) — mêmes métriques que le bouton téléphone */
.nav-review{display:inline-flex;align-items:center;justify-content:center;gap:0;flex:0 0 auto;
  height:38px;padding:0 10px;
  border-radius:19px;background:#fff;border:2px solid var(--pink);box-sizing:border-box;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.94rem;
  color:var(--brown-t);white-space:nowrap;text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.nav-review svg{width:1.2em;height:1.2em;flex-shrink:0}
.nav-review svg+svg{margin-left:-4px}
.nav-review span{margin-left:6px}
.nav-review:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 7px 20px rgba(74,46,36,.2)}
.nav-review:active{transform:translateY(0) scale(.97)}
/* Sélecteur de langue : un petit bouton drapeau, qui ouvre un menu au clic
   pour choisir FR/EN/TR (plutôt que d'afficher les 3 en permanence). */
.nav-lang{position:relative;display:flex;align-items:center}
.nav-lang-btn{display:flex;align-items:center;gap:4px;height:24px;padding:0 4px;
  border-radius:16px;border:0;background:transparent;cursor:pointer;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:.82rem;
  color:var(--brown-t);letter-spacing:.02em;transition:transform .2s var(--ease),background .2s var(--ease)}
.nav-lang-btn .flag{font-size:1rem;line-height:1}
.nav-lang-btn:hover{background:rgba(255,255,255,.4);transform:translateY(-1px)}
.nav-lang.open .nav-lang-btn{background:rgba(255,255,255,.4)}
.nav-lang-menu{position:absolute;top:calc(100% + 8px);right:0;
  display:none;flex-direction:column;gap:2px;min-width:150px;padding:6px;
  background:#fff;border:2px solid var(--pink);border-radius:14px;
  box-shadow:0 8px 24px rgba(74,46,36,.18);z-index:200}
.nav-lang.open .nav-lang-menu{display:flex}
.nav-lang-menu a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.92rem;
  color:var(--brown-t);transition:background .15s var(--ease)}
.nav-lang-menu a span.flag{font-size:1.15rem;line-height:1}
.nav-lang-menu a:hover{background:rgba(246,55,148,.08)}
.nav-lang-menu a[aria-current="true"]{color:var(--pink);background:rgba(246,55,148,.08)}

/* ============================================================
   HERO — rayons soleil + logo
   ============================================================ */
/* Accessibilité / SEO : lu par les lecteurs d'écran et Google, invisible à l'écran */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero{text-align:center;padding:50px 28px 50px;position:relative;overflow:hidden;
  background:var(--cream)}
/* Vague décorative en bas du menu / haut de la 1re section.
   Masque jaune (couleur du menu) : ne recouvre que les pointes des rayons,
   l'éclat central du soleil reste intact. */
.hero::before,.page-hero::before{content:"";position:absolute;top:-1px;left:0;right:0;
  height:clamp(28px,4vw,46px);z-index:3;background:var(--cream);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V30 C1200,6 960,52 720,30 C480,8 240,50 0,28 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V30 C1200,6 960,52 720,30 C480,8 240,50 0,28 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  filter:drop-shadow(0 4px 5px rgba(74,46,36,.12))}
/* Vague en bas du hero : son bord supérieur ondulé vient toucher les rayons.
   Couleur de la section suivante (À PROPOS = cream2), masque collé au bas. */
.hero::after,.page-hero::after{content:"";position:absolute;bottom:-1px;left:0;right:0;
  height:clamp(14px,1.8vw,20px);z-index:3;background:var(--cream2);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C240,52 480,0 720,22 C960,44 1200,52 1440,24 V54 H0 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C240,52 480,0 720,22 C960,44 1200,52 1440,24 V54 H0 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.sun{position:absolute;top:50%;left:50%;width:1500px;height:1500px;transform:translate(-50%,-50%);z-index:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%, rgba(120,50,0,1) 0deg 11deg, transparent 11deg 22deg);
  opacity:.18;border-radius:50%;
  animation:spin 140s linear infinite, sunPulse 8s ease-in-out infinite;will-change:transform,opacity}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes sunPulse{0%,100%{opacity:.15}50%{opacity:.24}}
@media (prefers-reduced-motion: reduce){
  .sun,footer{animation:none}
  .pill,.hero-logo,.hero-tag,.hero-sub,.hero-cta{opacity:1;animation:none}
  .reveal,.reveal-pop{opacity:1;transform:none;transition:none;animation:none}
}
.hero .in{position:relative;z-index:1;max-width:760px;margin:0 auto;width:100%}
.pill{display:inline-block;background:var(--pink);color:#fff;font-family:'Space Grotesk';font-weight:600;
  padding:6px 20px;border-radius:var(--cart-radius);margin-bottom:18px;opacity:0;
  animation:rise .8s .1s var(--ease) both, pillFloat 3.8s 1.2s ease-in-out infinite}
@keyframes pillFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.5deg)}}
.hero-logo{max-width:480px;width:84%;margin:0 auto 24px;
  filter:drop-shadow(0 14px 26px rgba(74,46,36,.22));opacity:0;
  transform-origin:center bottom;
  animation:logoGrow 1.35s .15s cubic-bezier(.18,.9,.3,1.4) both}
.hero-tag{display:inline-block;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(1.037rem,2.65vw,1.67rem);color:var(--brown-t);
  letter-spacing:-.015em;line-height:1.04;
  padding:11px 25px;border:var(--cart-border);border-radius:var(--cart-radius);
  background:var(--cart-bg);box-shadow:var(--cart-shadow);
  rotate:-1.2deg;
  opacity:0;animation:rise .9s .35s cubic-bezier(.2,.8,.2,1) both}
.hero-tag .pk{color:var(--pink);font-style:italic;font-weight:800;display:inline-block;padding-bottom:.06em;line-height:1.12}
.hero-sub{max-width:500px;margin:16px auto 32px;font-weight:500;color:var(--brown-t);font-size:1.08rem;line-height:1.55;
  opacity:0;animation:rise .9s .5s cubic-bezier(.2,.8,.2,1) both}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:rise .9s .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
@keyframes logoGrow{0%{opacity:0;transform:scale(.04) rotate(-14deg)}45%{opacity:1;transform:scale(1.22) rotate(6deg)}68%{transform:scale(.9) rotate(-3deg)}85%{transform:scale(1.06) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
/* margin-bottom négatif : l'élément suivant (section ou footer) remonte d'1px
   et recouvre le joint de rendu en bas du SVG (sinon un fin trait de la couleur
   de fond de la vague apparaît, surtout sur écran Retina). */
.wave{line-height:0;margin-bottom:-1px}.wave svg{display:block;width:100%;height:54px}

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:47px 0}
#prestations{background:var(--cream)}
.sec-head{text-align:center;max-width:620px;margin:-30px auto 48px}
.eyebrow{display:inline-block;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:-.005em;
  color:var(--pink-deep);background:rgba(246,55,148,.12);
  padding:10px 22px;border-radius:var(--cart-radius);margin-bottom:22px}
.sec-head h2{font-size:clamp(1.536rem,3.712vw,2.432rem);color:var(--brown);letter-spacing:-.025em;line-height:1.02;font-weight:800;font-family:'Bricolage Grotesque',sans-serif}
.sec-head p{margin-top:16px;font-weight:500;color:var(--brown-t);font-size:1.05rem;line-height:1.6;max-width:52ch;margin-left:auto;margin-right:auto}

/* À PROPOS */
.about{background:var(--cream2)}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.about-photo{width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--cart-radius);background:var(--cart-bg);
  border:var(--cart-border);
  display:flex;align-items:center;justify-content:center;text-align:center;color:#b08c6f;
  font-family:'Space Grotesk';font-weight:500;box-shadow:var(--cart-shadow);
  rotate:-2deg;overflow:hidden;object-fit:cover;
  transition:transform .55s var(--ease), rotate .55s var(--ease), box-shadow .55s var(--ease)}
/* Carrousel photo du magicien : fondu enchaîné lent + points de navigation */
.about-carousel{position:relative}
.about-carousel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.about-carousel img.on{opacity:1}
.about-dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:9px;z-index:3}
.about-dots button{position:relative;width:12px;height:12px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid var(--brown);background:#fff;box-shadow:2px 2px 0 rgba(74,46,36,.35);
  transition:background .3s var(--ease), transform .3s var(--ease)}
/* Zone tactile agrandie (24px min, WCAG 2.5.8) sans changer la taille visuelle du point */
.about-dots button::before{content:'';position:absolute;top:50%;left:50%;width:26px;height:26px;transform:translate(-50%,-50%)}
.about-dots button:hover{transform:scale(1.25)}
.about-dots button.on{background:var(--pink);transform:scale(1.15)}
.about-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;padding:0;cursor:pointer;
  border:2px solid var(--brown);background:#fff;box-shadow:2px 2px 0 rgba(74,46,36,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:700;line-height:1;color:var(--brown);
  transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.about-arrow:hover{background:var(--pink);color:#fff;transform:translateY(-50%) scale(1.1)}
.about-arrow-prev{left:12px}
.about-arrow-next{right:12px}
@media(max-width:680px){.about-arrow{width:34px;height:34px;font-size:1.15rem}.about-arrow-prev{left:8px}.about-arrow-next{right:8px}}
.about-text .eyebrow{background:rgba(246,55,148,.14);color:var(--pink-deep)}
.about-text h2{font-size:clamp(1.76rem,4vw,2.72rem);margin-bottom:22px;color:var(--brown);letter-spacing:-.022em;line-height:1.0;font-weight:800}
.about-text p{font-weight:500;color:var(--brown-t);margin-bottom:18px;font-size:1.08rem;line-height:1.65;max-width:60ch}
.about-text p.about-frame{
  display:inline-block;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.45;letter-spacing:-.012em;
  color:var(--brown);background:var(--cart-bg);
  padding:22px 32px;border:var(--cart-border);border-radius:var(--cart-radius);
  box-shadow:var(--cart-shadow);
  max-width:48ch;margin-bottom:0;
  rotate:1deg;
}
.about-text .hl{color:var(--pink-deep);font-weight:700}
.about-text:has(.feat-list){background:var(--cart-bg);border:var(--cart-border);border-radius:var(--cart-radius);
  box-shadow:var(--cart-shadow);padding:24px 28px}
.about-text:has(.feat-list) h2{margin-bottom:10px;font-size:clamp(1.5rem,3.2vw,2rem);line-height:1.05}
.about-text:has(.feat-list) .feat-list li{max-width:none}

/* PRESTATIONS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:680px){
  .cards.cards-2{grid-template-columns:1fr 1fr;gap:12px}
  .cards.cards-2 .card{padding:16px 14px;border-radius:16px}
  .cards.cards-2 .card .badge{width:32px;height:32px;font-size:.9rem;margin-bottom:9px;border-width:2px;box-shadow:2px 2px 0 var(--brown)}
  .cards.cards-2 .card h3{font-size:1.02rem;margin-bottom:0;line-height:1.12}
  .cards.cards-2 .card p{display:none}
  .cards.cards-2 .card .tag{margin-top:8px;font-size:.78rem}
  .cards.cards-2 .card:nth-child(1),.cards.cards-2 .card:nth-child(3){rotate:0deg}
}
.card{background:var(--cart-bg);border:var(--cart-border);border-radius:var(--cart-radius);
  padding:18px 22px;box-shadow:var(--cart-shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.card:hover{transform:translate(-4px,-4px) scale(1.015);box-shadow:var(--cart-shadow-hover)}
.card:nth-child(1){rotate:-0.8deg}
.card:nth-child(3){rotate:0.8deg}
.card{transition:transform .35s var(--ease), box-shadow .35s var(--ease), rotate .35s var(--ease), background .35s var(--ease)}
.card:hover{rotate:0deg;background:#FFE3F1}
.card .badge{width:46px;height:46px;border-radius:var(--cart-radius);display:flex;align-items:center;justify-content:center;
  font-family:'Space Grotesk';font-weight:700;font-size:1.1rem;color:var(--pink);
  background:var(--paper);border:3px solid var(--pink);margin-bottom:13px;
  box-shadow:4px 4px 0 var(--brown)}
.card h3{font-size:clamp(1.25rem,2.4vw,1.5rem);margin-bottom:9px;color:var(--brown);letter-spacing:-.02em;line-height:1.08;font-weight:800}
.card p{font-weight:500;color:var(--brown-t);font-size:.97rem;line-height:1.5;max-width:38ch}
.card .tag{display:inline-block;margin-top:12px;font-family:'Space Grotesk';font-weight:600;color:var(--pink-deep)}

/* GALERIE (bandeau menthe) */
.gallery{background:var(--cream)}
.grid-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.photo{position:relative;aspect-ratio:1;border-radius:var(--cart-radius);border:var(--cart-border);background:var(--paper);
  overflow:hidden;cursor:pointer;padding:0;display:block;width:100%;box-shadow:var(--cart-shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.photo .photo-cap{position:absolute;left:12px;bottom:12px;z-index:1;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.8rem;color:var(--brown);letter-spacing:-.01em;
  background:rgba(255,255,255,.92);padding:5px 12px;border-radius:var(--cart-radius);
  box-shadow:0 4px 10px -4px rgba(74,46,36,.4)}
.photo .photo-count{position:absolute;top:12px;right:12px;z-index:1;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:.8rem;color:var(--brown);
  background:rgba(255,255,255,.92);padding:5px 12px;border-radius:var(--cart-radius);
  box-shadow:0 4px 10px -4px rgba(74,46,36,.4)}
.photo:hover{transform:translate(-4px,-4px) scale(1.015);box-shadow:var(--cart-shadow-hover);rotate:0deg}
.photo-social{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);
  display:flex;align-items:center;justify-content:center}
.photo-social svg{width:34%;height:34%;flex:none}
.photo-social .photo-cap{left:0;right:0;bottom:0;top:auto;border-radius:0;background:rgba(0,0,0,.28);
  text-align:center;color:#fff;padding:10px 12px 12px}
.photo-social .photo-count{background:rgba(255,255,255,.92)}
.photo-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Vidéo dans le carrousel */
.lb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
  opacity:0;transition:opacity .3s ease;display:none}
.lb-vid.on{opacity:1;display:block}
.lb.lb-single .lb-prev,.lb.lb-single .lb-next{display:none}
/* Zoom dynamique lié au scroll (natif, GPU, repli statique si non supporté) */
@keyframes photoScrollZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .photo img,.about-photo img{animation:photoScrollZoom linear both;animation-timeline:view();animation-range:cover}
  }
}
.photo:nth-child(1){rotate:-1.2deg}
.photo:nth-child(2){rotate:0.8deg}
.photo:nth-child(3){rotate:-0.6deg}
.photo:nth-child(4){rotate:1.5deg}
.photo:nth-child(5){rotate:-0.4deg}
.photo:nth-child(6){rotate:1deg}
.photo{transition:transform .35s var(--ease), box-shadow .35s var(--ease), rotate .35s var(--ease)}

/* CONTACT */
/* Fond en cream2 : c'est ce qui rend visible la vague qui précède la section.
   Entre deux fonds identiques, une vague n'a rien à séparer. */
.contact{background:var(--cream2);color:var(--brown-t)}
/* La vague du haut du footer imite la section qui le précède : sur l'accueil
   c'est .contact (cream2), sur les sous-pages une .cta-band (cream). */
body:has(.contact) footer::after{background:var(--cream2)}
.contact .btn{border:2.5px solid transparent;
  background:linear-gradient(var(--pink),var(--pink)) padding-box,linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 50%,rgba(255,255,255,.95)) border-box;
  box-shadow:none}
.contact .btn:hover{box-shadow:0 8px 18px -10px rgba(216,27,122,.55)}
.contact .sec-head h2{display:inline-block;background:var(--pink);color:#fff;padding:.7em .9em;border-radius:var(--cart-radius);box-shadow:0 10px 22px -8px rgba(216,27,122,.55);font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(0.96rem,2.32vw,1.52rem)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;max-width:1000px;margin:0 auto}
.form-card{background:var(--cart-bg);border:var(--cart-border);border-radius:var(--cart-radius);
  padding:32px;box-shadow:var(--cart-shadow)}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Space Grotesk';font-weight:700;color:var(--brown);margin-bottom:8px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.field:has(input[required]) label::after,.field:has(select[required]) label::after,.field:has(textarea[required]) label::after{content:' ✦';color:var(--pink)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:2px solid var(--pink);
  background:var(--paper);color:var(--brown);font-family:'Space Grotesk';font-weight:500;font-size:1.02rem;letter-spacing:-.003em;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--pink-deep);
  background:#FFF8FB;
  box-shadow:0 0 0 4px rgba(246,55,148,.18)}
.contact-aside .line{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-family:'Space Grotesk';font-weight:600;font-size:1.08rem;letter-spacing:-.005em}
.contact-aside .line .dot{width:48px;height:48px;border-radius:14px;background:var(--paper);color:var(--pink);
  border:2.5px solid var(--pink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.contact-aside .line .dot svg{width:22px;height:22px;display:block}
.contact-aside .line a:hover{color:var(--pink)}
.contact-aside .muted{color:var(--brown);opacity:.7;font-weight:600;margin-top:8px}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:50px;height:50px;border-radius:14px;background:var(--paper);color:var(--pink);
  border:2.5px solid var(--pink);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.socials a:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 18px -10px rgba(216,27,122,.55)}

/* Soleil du pied de page : rayons peints DIRECTEMENT en fond du footer
   (pas d'élément géant hors-cadre => plus de disparition au retour d'onglet).
   Le centre du cône est en bas au milieu : effet soleil à l'horizon. */
@property --foot-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
footer{--foot-ang:0deg;color:#fff;position:relative;overflow:hidden;min-height:240px;display:flex;align-items:flex-end;justify-content:center;
  background:repeating-conic-gradient(from var(--foot-ang) at 50% 100%, rgba(255,255,255,.16) 0deg 11deg, rgba(255,255,255,0) 11deg 22deg), var(--pink-deep);
  animation:footSpin 150s linear infinite}
@keyframes footSpin{to{--foot-ang:360deg}}
footer::after{content:"";position:absolute;top:-1px;left:0;right:0;height:clamp(26px,3.6vw,44px);z-index:2;background:var(--cream);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V32 C1380,30 1260,52 1080,42 C720,14 360,46 0,28 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 54' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V32 C1380,30 1260,52 1080,42 C720,14 360,46 0,28 Z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.foot{position:relative;z-index:1;text-align:center;padding:24px 28px;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:.95rem;letter-spacing:-.005em}
@media(max-width:680px){footer{min-height:200px}}
.foot b{color:var(--cream)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(42px);transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Cartouches : apparition "pop" élastique (sticker/bonbon) — n'affecte pas le survol */
@keyframes cartouchePop{0%{opacity:0;transform:translateY(26px) scale(.95)}55%{opacity:1;transform:translateY(-6px) scale(1.02)}100%{opacity:1;transform:translateY(0) scale(1)}}
.reveal-pop{opacity:0}
.reveal-pop.in{opacity:1;animation:cartouchePop .6s cubic-bezier(.34,1.5,.64,1) backwards}
.cards .reveal-pop:nth-child(2).in{animation-delay:.06s}
.cards .reveal-pop:nth-child(3).in{animation-delay:.12s}
.cards .reveal-pop:nth-child(4).in{animation-delay:.18s}
.grid-photos .reveal-pop:nth-child(2).in{animation-delay:.05s}
.grid-photos .reveal-pop:nth-child(3).in{animation-delay:.1s}
.grid-photos .reveal-pop:nth-child(4).in{animation-delay:.15s}
.grid-photos .reveal-pop:nth-child(5).in{animation-delay:.2s}

.grid-photos .reveal-pop:nth-child(6).in{animation-delay:.25s}

/* RESPONSIVE */
@media(max-width:880px){
  .about-grid{grid-template-columns:1fr;gap:34px}
  .cards{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:34px}
}
@media(max-width:680px){
  .sec{padding:18px 0}
  .cta-band{padding:48px 28px}
  .grid-photos{grid-template-columns:repeat(2,1fr)}
  .sun{width:1100px;height:1100px}
  .hero-tag{padding:9px 16px;border-width:3px;border-radius:18px;box-shadow:var(--cart-shadow-mobile)}
  .about-text p.about-frame{padding:18px 22px;border-width:3px;border-radius:18px;box-shadow:var(--cart-shadow-mobile);font-size:0.95rem}
  .card,.about-photo,.photo,.form-card,.about-text:has(.feat-list),.review-card{border-width:3px;box-shadow:var(--cart-shadow-mobile)}
  .about-text:has(.feat-list){padding:22px 22px}
  .card:hover,.photo:hover,.review-card:hover{box-shadow:var(--cart-shadow-hover)}
}

/* ============================================================
   SOCIALS HEADER · simple round icons
   ============================================================ */
.nav-socials{display:flex;align-items:center;gap:var(--icon-gap)}
.nav-social{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  color:var(--pink);
  transition:transform .25s var(--ease), filter .25s var(--ease);
}
.nav-social svg{width:100%;height:100%;display:block}
.nav-phone,.nav-wa,.nav-mail{display:inline-flex;align-items:center;gap:8px;color:var(--brown);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1rem;letter-spacing:-.015em;white-space:nowrap;text-decoration:none;transition:color .25s var(--ease)}
.nav-phone svg,.nav-wa svg,.nav-mail svg{width:20px;height:20px;flex-shrink:0}
.top-bar .nav-wa,.top-bar .nav-phone,.top-bar .nav-mail{font-size:1.04rem;font-weight:800;color:#fff;padding:var(--pill-pad);border-radius:var(--cart-radius);box-shadow:0 4px 14px rgba(0,0,0,.15);transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);justify-content:center}
.top-bar .nav-wa svg,.top-bar .nav-phone svg,.top-bar .nav-mail svg{width:1.2em;height:1.2em}
.top-bar .nav-wa{border:2px solid transparent;background:linear-gradient(#25D366,#25D366) padding-box,linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 50%,rgba(255,255,255,.95)) border-box}
.top-bar .nav-phone{border:2px solid transparent;background:linear-gradient(var(--brown),var(--brown)) padding-box,linear-gradient(120deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 50%,rgba(255,255,255,.95)) border-box}
/* E-mail : jaune sombre, contour et texte blancs. Contraste 2,47:1 — encore
   sous le minimum de 4,5:1, mais deux fois meilleur que le premier essai.
   Le rose reste réservé au bouton d'action « Devis ». */
.top-bar .nav-mail{color:#fff;background:var(--mail-bg);border:2px solid #fff}
.top-bar .nav-mail:hover{color:#fff}
.top-bar .nav-wa:hover,.top-bar .nav-phone:hover,.top-bar .nav-mail:hover{color:#fff;transform:translateY(-2px) scale(1.06);box-shadow:0 7px 20px rgba(0,0,0,.2)}
.top-bar .nav-wa:active,.top-bar .nav-phone:active,.top-bar .nav-mail:active{transform:translateY(0) scale(.97)}
.nav-phone:hover{color:var(--pink)}
.nav-wa:hover{color:#25D366}
.nav-social:hover{transform:translateY(-2px) scale(1.08);filter:brightness(1.06)}
.nav-social:active{transform:translateY(0) scale(.96)}
@media (max-width:980px){
  /* Menu burger dès 980px : 5 liens texte + icônes + CTA ne tiennent plus en ligne en dessous */
  nav{gap:var(--icon-gap)}
  .nav-socials{order:1}
  /* .nav-left étant dissous (display:contents), la cartouche d'avis doit
     recevoir le même `order` que les réseaux pour rester juste après eux. */
  .nav-review{order:1}
  .nav-social,.nav-home{width:34px;height:34px}.nav-home svg{width:18px;height:18px}
  /* Plus de burger : les liens de section passent par .home-nav / .page-nav.
     .nav-links passe en display:contents pour laisser sortir l'icône accueil
     qu'il contient ; seuls les liens texte sont masqués. */
  .nav-links,.nav-left{display:contents}
  .nav-links>a{display:none}
  .nav-actions{gap:8px;order:2;margin-left:auto}
  .nav-home{display:flex;order:0;position:static}
}
/* Tablette (681–1000px) : mise en page identique au bureau.
   - barre du haut : WhatsApp, téléphone, avis Google et langue sur une ligne
   - barre de nav : liens du menu + réseaux sociaux + « Demande de devis »
     sur une ligne (on annule le repli mobile du bloc 980px ci-dessus). */
@media (min-width:681px) and (max-width:1000px){
  :root{--bar-pad-x:12px}
  .nav-review{height:34px;padding:0 8px;font-size:.9rem}
  /* Menu texte de nouveau visible, resserré pour tenir sur une ligne */
  nav{padding-left:14px;padding-right:14px}
  .nav-links{display:flex;gap:18px;font-size:.92rem;white-space:nowrap}
  .nav-actions{order:0;margin-left:0;gap:8px}
  .nav-social,.nav-home{width:34px;height:34px}
  .nav-home svg{width:18px;height:18px}
  /* La barre d'onglets mobile et l'icône « retour accueil » redeviennent inutiles */
  .home-nav{display:none}
  .nav-home{display:none}
  header:has(.home-nav) nav{border-radius:0 0 20px 20px}
}
/* Barre de nav sur deux lignes (desktop + tablette) :
   - ligne 1 : accueil + Facebook + Instagram + devis, groupés et centrés
   - ligne 2 : le menu, centré */
@media (min-width:681px){
  :root{--header-h:106px}
  /* Grille à une colonne, large de la plus grande des deux rangées et centrée :
     les deux rangées partagent donc le MÊME bord gauche, ce qui place l'icône
     accueil exactement au-dessus de « Le Magicien », quelle que soit la langue.
     Une flexbox en wrap ne le permet pas : chaque rangée y est centrée
     indépendamment, donc leurs bords gauches diffèrent. */
  nav{display:grid;justify-content:center;row-gap:6px;padding-top:6px}
  /* Ligne 1 : accueil + Facebook + Instagram + devis, 5px d'écart, centrés. */
  .nav-left{order:0;display:flex;align-items:center;gap:var(--icon-gap)}
  /* Les enfants du groupe reprennent l'ordre du document : le bloc mobile
     ≤980px leur applique des `order` et `margin-left:auto` qui n'ont de sens
     que quand .nav-left est dissous (display:contents). */
  .nav-left>*{order:0;margin:0}
  /* Le devis est poussé au bord droit de la colonne : son bord droit tombe
     donc sur celui du dernier élément du menu. La marge sur la cartouche
     d'avis garantit un dégagement minimum de 50px même si la rangée du bas
     est plus courte que celle du haut. */
  .nav-left>.nav-actions{margin-left:auto}
  .nav-left>.nav-review{margin-right:45px}
  .nav-home{display:flex;margin:0}
  .nav-actions{margin-left:0;gap:var(--icon-gap)}
  /* Ligne 2 : le menu, en largeur de son contenu et centré. */
  .nav-links{display:flex;order:2;margin:0;padding-left:0;justify-content:space-between}
  .nav-links>a{display:block}
  .nav-links>.btn-in-menu{display:none}
}
@media (min-width:681px) and (max-width:1000px){
  :root{--header-h:96px}
}
@media (max-width:680px){
  :root{--topbar-h:60px}
  /* Marge latérale et écart entre cartouches resserrés : c'est la place
     rendue aux trois cartouches WhatsApp / téléphone / e-mail. */
  :root{--bar-pad-x:6px}
  :root{--bar-gap:6px}
  .nav-social,.nav-home{width:32px;height:32px}
  .nav-home svg{width:17px;height:17px}
  /* Le <nav> gardait ses 28px de marge du bureau : à 320px il ne restait
     plus assez de largeur et « Demande de devis » passait sur deux lignes. */
  nav{padding-left:12px;padding-right:12px}
  /* Mêmes métriques verticales que les cartouches de la barre du haut,
     pour que les trois aient exactement la même hauteur. */
  .nav-actions .btn{font-size:.84rem}
  :root{--pill-pad:.4em .7em}
  /* WhatsApp, téléphone et e-mail sur UNE seule ligne, à TOUTES les largeurs
     mobiles — y compris 320px, où la rangée mesure au total :
       3 x (icone 1.2em + gap 4px + padding 0.9em + bordures 4px)
       + les 3 libelles (24,97em cumules, letter-spacing compris)
       + 2 ecarts de 6px + 2 marges de 6px
       = 31,27 x taille-de-police + 48px
     Resoudre « ce total <= largeur d'ecran » donne la police ci-dessous.
     Elle est FLUIDE plutot que par paliers : un palier fixe ne peut pas
     tenir sur toute une plage de largeurs, la ligne casse toujours a un
     bout. Le plancher .52rem correspond a 320px, le plafond .8rem est
     atteint vers 560px et au-dela. Consequence assumee : sur les tres
     petits telephones l'adresse est ecrite petit — c'est le prix de
     l'alignement sur une ligne. */
  .top-bar .nav-wa,.top-bar .nav-phone,.top-bar .nav-mail{flex:0 0 auto;
    font-size:clamp(.52rem,calc(3.19vw - 1.8px),.8rem);
    padding:.34em .45em;gap:4px;white-space:nowrap}
  .nav-review{height:32px;padding:0 7px}
  .nav-lang-menu{right:0;left:auto}
}
/* Petits écrans : un cran de plus pour tenir sur la ligne. Le palier est à
   430px et non 380px — entre les deux, le téléphone touchait le sélecteur. */
@media (max-width:430px){
  :root{--topbar-h:55px}
  /* Plus de palier de police ici : la formule fluide ci-dessus s'en charge. */
  .nav-review{height:30px;padding:0 6px;font-size:.86rem}
  .nav-social,.nav-home{width:30px;height:30px}
  .nav-actions .btn{font-size:.7rem}
}
/* Palier intermédiaire : à 681px la police des cartouches passait d'un coup de
   .8rem à 1.04rem, l'adresse regagnait 65px et la rangée débordait jusqu'à
   695px. Une marche à .9rem lisse la transition. */
@media (min-width:681px) and (max-width:780px){
  .top-bar .nav-wa,.top-bar .nav-phone,.top-bar .nav-mail{font-size:.9rem}
}
/* L'adresse est TOUJOURS affichée, à toutes les largeurs (choix assumé), ET
   les trois cartouches restent sur une seule ligne : c'est la police fluide
   du bloc ≤680px qui concilie les deux. Si un jour l'adresse devient trop
   petite à votre goût sur les petits téléphones, le réglage est le plancher
   du clamp() — pas un nouveau palier de media query. */
/* Petits téléphones (≤360px) : le padding ne bouge pas (il est proportionnel),
   c'est la taille de police qui descend d'un cran pour dégager la place. */
@media (max-width:360px){
  :root{--topbar-h:52px}
  .nav-actions .btn{font-size:.62rem}
}
.btn-in-menu{display:none}

/* ============================================================
   SOUS-PAGES PRESTATIONS (titre visible, listes, FAQ, fil d'ariane)
   ============================================================ */
.page-hero{text-align:center;padding:50px 28px;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--cream);position:relative;overflow:hidden}
.page-hero .in{max-width:760px;margin:0 auto;position:relative;z-index:1}
.page-hero .sun{animation:spinPage 140s linear infinite,sunPulse 8s ease-in-out infinite}
@keyframes spinPage{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Accroche + CTA hors du soleil : on garde le hero léger, juste le gros titre rayonne */
.page-intro{text-align:center;padding:24px 28px 40px;background:var(--cream)}
/* Fil d'ariane au-dessus du soleil */
.page-crumbs{margin:0;padding:18px 28px 0;background:var(--cream);text-align:center}
/* Navigation prestations au-dessus du soleil */
.page-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:4px 16px;background:rgba(255,252,0,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:var(--hdr,174px);z-index:40;box-shadow:0 6px 16px rgba(74,46,36,.10);border-radius:0 0 20px 20px;max-width:1040px;margin:0 auto}
.page-nav a{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(.96rem,2vw,1.1rem);color:var(--brown-t);padding:4px 13px;border:2px solid var(--brown);border-radius:var(--cart-radius);background:#fff;box-shadow:2px 2px 0 var(--brown);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s}
.page-nav a:hover{transform:translate(-2px,-2px) scale(1.05);box-shadow:4px 4px 0 var(--brown)}
.page-nav a[aria-current="page"]{background:var(--pink);color:#fff;box-shadow:2px 2px 0 var(--pink-deep);cursor:default}
.page-nav a[aria-current="page"]:hover{transform:none;box-shadow:2px 2px 0 var(--pink-deep)}
@media(max-width:560px){.page-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;padding:7px 8px;position:static;top:auto;border-radius:0}.page-nav a{padding:5px 11px;font-size:.86rem;box-shadow:2px 2px 0 var(--brown)}.page-nav a[aria-current="page"]{box-shadow:2px 2px 0 var(--pink-deep)}}
.page-title{font-size:clamp(3rem,7vw,5rem);color:var(--brown);letter-spacing:-.025em;line-height:1.04;font-weight:800;margin:10px 0 16px}
.page-title .pk{color:var(--pink)}
.page-title.is-logo{margin:0}
.page-h1{font-size:clamp(1.6rem,4.4vw,2.6rem);color:var(--brown);font-weight:800;letter-spacing:-.015em;line-height:1.14;text-align:center;margin:0 auto 28px;max-width:24ch}
/* Breadcrumb visible masqué : le SEO est assuré par le JSON-LD BreadcrumbList
   (données structurées indépendantes que Google lit pour le fil d'Ariane
   dans les résultats). La page-nav sous le header donne déjà le contexte. */
.breadcrumb{display:none}
.breadcrumb a{color:inherit;text-decoration:none;opacity:.85}
.breadcrumb a:hover{opacity:1;text-decoration:underline}
.breadcrumb .sep{margin:0 .45em;opacity:.5}
.breadcrumb [aria-current="page"]{font-weight:700;color:var(--brown)}
.hero-logo{display:block;width:clamp(280px,42vw,460px);height:auto;margin:0 auto;filter:drop-shadow(0 8px 22px rgba(74,46,36,.18))}
@media(max-width:680px){.hero-logo{width:min(62vw,285px)}}
.page-lead{max-width:620px;margin:0 auto 26px;font-weight:700;color:var(--brown-t);font-size:1.65rem;line-height:1.5}
.crumbs{font-family:'Space Grotesk',sans-serif;font-size:1.38rem;font-weight:600;color:var(--brown-t)}
.crumbs a{color:var(--pink-deep);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.feat-list{list-style:none;margin:2px 0 0;padding:0}
.feat-list li{position:relative;padding:5px 0 5px 28px;font-weight:500;color:var(--brown-t);font-size:1rem;line-height:1.38;max-width:60ch}
.feat-list li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:13px;border-radius:50%;
  background:var(--pink);box-shadow:0 0 0 3px rgba(246,55,148,.18)}
.about-grid.rev .about-photo{order:2}
.faq-wrap{max-width:760px;margin:0 auto}
.faq-item{background:var(--cart-bg);border:var(--cart-border);border-radius:18px;padding:18px 22px;margin-bottom:16px;
  box-shadow:var(--cart-shadow-mobile)}
.faq-item h3{font-size:1.12rem;color:var(--brown);font-weight:800;margin-bottom:8px;letter-spacing:-.01em}
.faq-item p{font-weight:500;color:var(--brown-t);font-size:1.02rem;line-height:1.6;margin:0}
.cta-band{text-align:center;padding:64px 28px}
.cta-band h2{font-size:clamp(1.44rem,3.52vw,2.24rem);color:var(--brown);font-weight:800;margin-bottom:20px;letter-spacing:-.02em}
@media (max-width:760px){.about-grid.rev .about-photo{order:0}}

/* ============================================================
   LIGHTBOX GALERIE
   ============================================================ */
.lb{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  background:rgba(74,46,36,.93);padding:28px;overflow:hidden}
.lb.open{display:flex;animation:lbFade .25s var(--ease)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
/* Carrousel : crossfade (2 images empilées) — aucun mouvement, zéro saut */
/* .lb-frame : MOBILE = cadre fixe 4:5 (photos en cover, paysages rognés).
   DESKTOP = taille libre pilotée en JS (le cadre épouse chaque photo) avec morphing animé. */
.lb-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(90vw,66vh);aspect-ratio:4/5;
  border-radius:18px;border:4px solid #fff;background:#fff;box-sizing:border-box;
  box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden;
  transition:width .42s var(--ease), height .42s var(--ease)}
.lb.open .lb-frame{animation:lbFramePop .42s var(--ease-pop,cubic-bezier(.18,.9,.3,1.4)) both}
@keyframes lbFramePop{from{transform:translate(-50%,-50%) scale(.86);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.lb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;z-index:1;transition:opacity .35s ease}
.lb-img.on{opacity:1;z-index:2;animation:lbImgIn .5s var(--ease) both}
@keyframes lbImgIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.lb-frame,.lb-img{transition:none;animation:none}}
.lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}
.lb-btn{position:absolute;z-index:2;background:rgba(255,255,255,.14);border:2px solid #fff;color:#fff;
  width:54px;height:54px;border-radius:50%;cursor:pointer;line-height:1;
  font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease), transform .2s var(--ease)}
.lb-btn:hover{background:var(--pink);transform:scale(1.08)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lb-prev:hover,.lb-next:hover{transform:translateY(-50%) scale(1.08)}
@media (max-width:680px){
  .lb{padding:14px}
  /* cadre un peu plus petit ; on réserve le bas pour la rangée de flèches */
  .lb-frame{width:min(86vw,52vh)}
  .lb-btn{width:44px;height:44px;font-size:1.3rem}
  .lb-close{top:12px;right:12px}
  /* flèches en rangée centrée SOUS la photo */
  .lb-prev,.lb-next{top:auto;bottom:16px;transform:none}
  .lb-prev{left:calc(50% - 52px);right:auto}
  .lb-next{left:calc(50% + 8px);right:auto}
  .lb-prev:hover,.lb-next:hover{transform:scale(1.08)}
  .lb-cap{bottom:74px;font-size:1rem}
}

/* ============================================================
   Anciens boutons flottants — désactivés.
   Le contact WhatsApp + téléphone est désormais dans la barre
   du haut (.top-bar), aussi bien sur ordinateur que sur mobile.
   ============================================================ */
.phone-float,.wa-float{display:none}

/* Date picker */
input[type="date"]{color-scheme:light;appearance:auto;box-sizing:border-box;min-width:0;max-width:100%;width:100%}
@media(max-width:680px){
  /* iOS Safari impose une largeur intrinsèque au champ date et ignore width:100%,
     ce qui le fait déborder à droite. appearance:none lui fait respecter le conteneur.
     Le picker natif s'ouvre quand même au toucher ; on ré-ajoute juste une icône. */
  input[type="date"]{-webkit-appearance:none;appearance:none;font-size:16px;padding:14px 16px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23D81B7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center}
  input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
  input[type="date"]::-webkit-calendar-picker-indicator{opacity:0}
}

/* Google Maps autocomplete dropdown */
.pac-container{border-radius:14px;border:2px solid var(--pink);box-shadow:0 8px 24px rgba(74,46,36,.14);font-family:'Space Grotesk',sans-serif;margin-top:4px;overflow:hidden}
.pac-item{padding:10px 16px;font-size:.95rem;color:var(--brown-t);cursor:pointer}
.pac-item:hover,.pac-item-selected{background:rgba(246,55,148,.08)}
.pac-item-query{color:var(--brown);font-weight:700}
.pac-icon{display:none}

/* ============================================================
   AVIS CLIENTS (Google)
   ============================================================ */
.reviews-score{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin-top:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;color:var(--brown-t)}
.reviews-score .stars{color:#F5A623;letter-spacing:2px;font-size:1.15rem}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:32px}
.review-card{background:var(--cart-bg);border:var(--cart-border);border-radius:var(--cart-radius);
  padding:22px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--cart-shadow);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), rotate .35s var(--ease)}
.review-card:hover{transform:translate(-4px,-4px) scale(1.015);box-shadow:var(--cart-shadow-hover);background:#FFE3F1}
.review-card:nth-child(odd){rotate:-0.6deg}
.review-card:nth-child(even){rotate:0.6deg}
.review-card:hover{rotate:0deg}
.review-stars{color:#F5A623;letter-spacing:2px;font-size:1rem}
.review-text{font-weight:500;color:var(--brown-t);font-size:.98rem;line-height:1.55;flex:1}
.review-author{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--brown);font-size:.92rem}
.reviews-actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px}
@media(max-width:680px){.reviews-grid{grid-template-columns:1fr}}


/* ============================================================
   TEMPORAIRE : section Vidéos masquée (menu + contenu), sur les
   3 langues. Pour la remettre : supprimer ce bloc.
   ============================================================ */
/* On masque aussi les deux vagues qui encadrent la section : sans elles,
   Photos et Contact ont le même fond (#FFFC00) et s'enchaînent sans raccord
   visible. Les garder afficherait deux vagues collées l'une à l'autre. */
/* La vague qui SUIT la section reste affichée : elle assure la transition
   Photos → Demande de devis. Seule celle d'entrée est masquée.
   ATTENTION en remettant les Vidéos : cette vague (la dernière avant
   #contact, ligne ~275 des 3 accueils) a été repassée en background:#FFFC00
   pour partir de Photos. Il faudra lui rendre son background:#FFE800, la
   section Vidéos étant en cream2. */
a[href$="#videos"],#videos,.wave:has(+ #videos){display:none!important}