/* ══════════════════════════════════════════════════════════════
   SiteServi v4 : Thème ÉLÉGANCE (coiffeur, esthétique, fleuriste)
   Fork fidèle de style.css prod. Typo: Cormorant Garamond + Jost.
   Ambiance: boudoir clair, lignes fines, beaucoup d'air.
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{color-scheme:light only}

body{
  font-family:"Jost","Inter",system-ui,-apple-system,sans-serif;
  color:#33291f;
  background:#f1e9e1;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.kicker{font-family:"Cormorant Garamond","Georgia",serif;font-weight:500}

.container{max-width:960px;margin:0 auto;padding:0 1.4rem}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto;display:block}

/* ═══ HERO FULLSCREEN : voile clair + flou artistique doux ═══ */
.hero{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden;background:#f3ede6;width:100%}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}
/* La regle globale `img{max-width:100%}` plafonnait la largeur de la photo
   du hero. Les themes qui la posent a 114% avec un decalage de -7% se
   retrouvaient donc avec une image large de 100% commencant a -7% : il
   manquait 7% a DROITE, ou le fond creme du hero apparaissait -- le cadre
   n'etait pas rempli. max-width et width sont deux proprietes distinctes,
   la specificite du selecteur n'y change rien : max-width gagne toujours.
   On leve explicitement le plafond ici. */
.hero-bg img{max-width:none;
  position:absolute;top:-5%;left:-5%;width:110%;height:110%;
  object-fit:cover;object-position:center 30%;
  filter:blur(0.6px) saturate(1.12) brightness(1.0) contrast(1.04);
  transition:transform 8s ease-out;
}
.hero:hover .hero-bg img{transform:scale(1.03)}
.hero-overlay{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(to top, rgba(250,247,244,.95) 0%, rgba(250,247,244,.88) 50%, rgba(250,247,244,.72) 78%, rgba(250,247,244,.34) 100%);
}
.hero-content{position:relative;z-index:2;padding:2rem 0 2.8rem;max-width:680px}

.kicker{
  text-transform:uppercase;letter-spacing:.3em;font-size:.66rem;font-weight:500;
  font-family:"Jost",sans-serif;color:var(--primary);margin-bottom:1rem;
  display:inline-flex;align-items:center;gap:.6rem;
}
.kicker::before{content:"";width:32px;height:1px;background:currentColor;opacity:.6}
.hero h1{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:500;line-height:1.2;color:#33291f;margin-bottom:.7rem;letter-spacing:0}
.hero h1 em{font-style:italic;color:var(--primary)}
.hero .lead{color:#8c7d6f;font-size:1.02rem;margin-bottom:1.7rem;font-weight:300;max-width:520px}

/* ═══ HERO GRADIENT (sans photo) ═══ */
.hero-gradient{position:relative;min-height:42vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(140deg,#f6f1ea 0%,#ece3d8 100%);border-bottom:none}
.hero-gradient::before{content:"";position:absolute;top:-20%;right:-12%;width:520px;height:520px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent),transparent 45%) 0%,transparent 70%);pointer-events:none}
.hero-gradient::after{content:"";position:absolute;bottom:-30%;left:-8%;width:380px;height:380px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--primary),transparent 70%) 0%,transparent 70%);pointer-events:none;opacity:.5}
.hero-gradient .hero-content{padding:4.5rem 0 4rem;max-width:640px;position:relative;z-index:1}
.hero-gradient h1{color:#33291f}
.hero-gradient .lead{color:#8c7d6f}
.hero-gradient .btn-outline{color:#33291f;border-color:rgba(51,41,31,.25);background:transparent}
.hero-gradient .btn-outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}

/* ═══ BUTTONS ═══ */
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.75rem 1.7rem;border-radius:2px;font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-family:"Jost",sans-serif;transition:all .28s cubic-bezier(.25,.46,.45,.94);cursor:pointer;border:none;text-decoration:none}
.btn-primary{background:#33291f;color:#faf7f4}
.btn-primary:hover{background:var(--primary);transform:translateY(-2px)}
.btn-outline{background:transparent;color:#33291f;border:1px solid #33291f}
.btn-outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn:not(.btn-primary):not(.btn-outline):not(.btn-cta){background:#33291f;color:#faf7f4}
.btn:not(.btn-primary):not(.btn-outline):not(.btn-cta):hover{background:var(--primary);transform:translateY(-2px)}
.btn-cta{position:relative;overflow:hidden;background:#33291f;color:#faf7f4;font-size:.82rem;padding:.75rem 1.7rem;border-radius:2px}
.btn-cta:hover{background:var(--primary);transform:translateY(-2px)}

/* ═══ INFO STRIP ═══ */
.info-strip{background:#fff;border-bottom:1px solid #eae2da}
.info-strip-grid{display:flex;align-items:stretch}
.info-cell{flex:1;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:1.2rem 1.4rem;border-right:1px solid #eae2da;min-width:0}
.info-cell:last-child{border-right:none}
.info-icon{font-size:1.15rem;flex-shrink:0;opacity:.75}
.info-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.info-body strong{font-size:.6rem;text-transform:uppercase;letter-spacing:.24em;color:#8c7d6f;font-family:"Jost",sans-serif;font-weight:500}
.info-body span,.info-body a{font-size:.88rem;color:#33291f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-body a{color:var(--primary)}
.info-body a:hover{text-decoration:underline}

/* ═══ GRID & CARDS ═══ */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;padding:3rem 0 3rem}
.card{background:#fffcf6;border-radius:2px;padding:1.9rem;border:1px solid #eae2da;box-shadow:none;transition:transform .3s ease}
.card:hover{transform:translateY(-2px)}
.card h2{font-size:1.55rem;font-weight:500;margin-bottom:1.1rem;color:#33291f;display:flex;align-items:center;gap:.8rem;padding-bottom:0}
.card h2::after{content:"";flex:1;height:1px;background:#eae2da}
.card-icon{display:none}
.card-wide{grid-column:1/-1}

/* ═══ LOGO CARD ═══ */
.logo-card{display:inline-block;padding:0;margin:0;background:#fff;border-radius:2px;overflow:hidden;width:fit-content;height:fit-content;align-self:start;grid-column:1;border:1px solid #eae2da;line-height:0}
.logo-img{display:block;max-width:220px;max-height:170px;width:auto;height:auto;object-fit:contain}

/* ═══ ABOUT TEXT ═══ */
.about-text{font-size:1.28rem;font-family:"Cormorant Garamond",serif;font-weight:500;line-height:1.55;color:#33291f;max-width:56ch}

/* ═══ GALLERY : rythme éditorial ═══ */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-top:.5rem}
.gallery img{width:100%;height:230px;object-fit:cover;border-radius:2px;transition:filter .35s ease}
.gallery img:hover{filter:brightness(1.05)}

/* ═══ HOURS ═══ */
.hours-list{list-style:none;padding:0}
.hours-list li{padding:.6rem 0;border-bottom:1px solid #eae2da;font-size:.9rem;color:#8c7d6f;display:flex;justify-content:space-between;gap:.5rem}
.hours-list li:last-child{border-bottom:none}

/* ═══ REVIEWS ═══ */
.review-header{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.2rem;flex-wrap:wrap}
.review-score{font-size:3rem;font-weight:500;font-style:italic;font-family:"Cormorant Garamond",serif;color:var(--primary);line-height:1}
.review-meta{display:flex;flex-direction:column;gap:.2rem}
.review-stars{font-size:.95rem;letter-spacing:2px}
.star.filled{color:#c9a679}
.star.empty{color:#e2d8ca}
.review-count{font-size:.82rem;color:#8c7d6f;margin:0}
.review-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);background:none;padding:0;border-radius:0;width:fit-content}
.review-strip{display:flex;gap:1.4rem;overflow-x:auto;padding:.5rem 0 .8rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.review-strip::-webkit-scrollbar{display:none}
.review-mini{flex:0 0 260px;scroll-snap-align:start;background:transparent;border-radius:0;padding:1rem 0 0;border:none;border-top:2px solid #33291f;transition:none}
.review-mini-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.review-mini-stars{color:#c9a679;font-size:.75rem;letter-spacing:2px}
.review-mini-author{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#33291f}
.review-mini-text{font-size:1.02rem;line-height:1.5;color:#8c7d6f;font-family:"Cormorant Garamond",serif;font-style:normal;margin:0}

/* ═══ MAP ═══ */
.map-wrapper{margin-top:.8rem;border-radius:2px;overflow:hidden;border:1px solid #eae2da;filter:saturate(.7)}

/* ═══ LANGUAGE SWITCH ═══ */
.lang-switch{position:absolute;top:0;right:-72px;z-index:6;line-height:0}
/* Ancre sur le hero (position:relative) : `top:0` fait coincider le bord
   superieur du drapeau avec la ligne haute du cadre photo. `line-height:0`
   supprime l'espace de ligne parasite qui decalait le drapeau de 2-3px
   vers le bas. `right:-72px` l'ecarte franchement du cadre : a -46px il
   le touchait et semblait mordre sur la photo. Sous 1100px le hero
   occupe toute la largeur, il n'y a plus de marge exterieure : le
   drapeau repasse a l'interieur. */
@media (max-width:1100px){.lang-switch{right:10px;top:10px;line-height:normal}}
.lang-link{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.3);border-radius:2px;text-decoration:none;backdrop-filter:blur(8px);transition:background .2s, transform .2s}
.lang-link:hover{background:rgba(0,0,0,.5);transform:translateY(-1px)}
/* DRAPEAUX DU SELECTEUR DE LANGUE.
   Dessines en SVG integre, exactement comme sur siteservi.com : memes
   proportions 3:2, memes couleurs officielles, meme rendu net a toutes les
   definitions. Remplace flag-icons, qui etait charge depuis un CDN tiers sur
   CHAQUE site client pour deux pastilles de 24 px : une requete reseau
   externe, une dependance qu'on ne maitrise pas, et un rendu date.
   Les deux drapeaux sont en 3:2 et la pastille aussi, donc `cover` ne
   recadre rien. Un Union Jack officiel est en 2:1 ; recadre dans une
   pastille plus carree, ses diagonales ressortaient dissymetriques. */
.lang-flag{
  display:inline-block;width:24px;height:16px;border-radius:3px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.lang-flag-fr{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Crect%20width%3D%223%22%20height%3D%222%22%20fill%3D%22%23ED2939%22%2F%3E%3Crect%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23002395%22%2F%3E%3C%2Fsvg%3E")}
.lang-flag-gb{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30%2C20%20h30%20v20%20z%20v20%20h-30%20z%20h-30%20v-20%20z%20v-20%20h30%20z%22%2F%3E%3C%2FclipPath%3E%3Cpath%20d%3D%22M0%2C0%20v40%20h60%20v-40%20z%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C40%20M60%2C0%20L0%2C40%22%20stroke%3D%22%23fff%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C40%20M60%2C0%20L0%2C40%22%20clip-path%3D%22url%28%23t%29%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%225.3%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v40%20M0%2C20%20h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2213.3%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v40%20M0%2C20%20h60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%228%22%2F%3E%3C%2Fsvg%3E")}

/* ═══ CTA BANNER ═══ */
.cta-banner{background:#33291f;text-align:center;padding:4.4rem 1.4rem;position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;top:-30%;right:-10%;width:400px;height:400px;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--accent),transparent 65%) 0%,transparent 70%);pointer-events:none}
.cta-banner h2{font-size:2rem;font-weight:500;font-family:"Cormorant Garamond",serif;color:#faf7f4;margin-bottom:.6rem;position:relative}
.cta-banner>div>p{color:rgba(250,247,244,.65);font-size:.92rem;margin-bottom:1.6rem}
.cta-sub{font-size:.8rem;color:rgba(250,247,244,.5);margin-top:.5rem;position:relative}

.pricing-cards{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0;position:relative}
.pricing-card{background:rgba(250,247,244,.04);border:1px solid rgba(250,247,244,.16);border-radius:2px;padding:1.9rem;width:260px;text-align:center;position:relative;transition:transform .2s;color:#faf7f4}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-card-premium{background:rgba(250,247,244,.09);border-color:rgba(250,247,244,.35)}
.pricing-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#faf7f4;color:#33291f;font-size:.62rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 14px;border-radius:0;white-space:nowrap}
.pricing-card h3{margin:.8rem 0 .5rem;font-size:1.35rem;color:#faf7f4;font-family:"Cormorant Garamond",serif;font-weight:500}
.pricing-amount{font-size:1.4rem;margin:.3rem 0 .9rem;color:#faf7f4}
.pricing-amount strong{font-size:2.2rem;font-family:"Cormorant Garamond",serif;font-weight:500}
.pricing-card ul{list-style:none;padding:0;margin:0 0 1.1rem;text-align:left;font-size:.85rem}
.pricing-card li{padding:.32rem 0;position:relative;color:rgba(250,247,244,.8)}
/* Puce de liste : demi-cadratin, pas cadratin. C'est la seule chaine de ce
   fichier qui atteint l'ecran d'un client. Les quatre autres themes emploient
   une coche ; ici le trait fin fait partie du parti pris graphique, et le
   demi-cadratin reste la puce correcte en typographie francaise. */
.pricing-card li::before{content:"– ";color:var(--accent)}
.btn-premium{background:#faf7f4!important;color:#33291f!important;border:none!important}

/* ═══ FOOTER ═══ */
.site-footer{text-align:center;padding:2rem 1.4rem;font-size:.8rem;color:#a9967e;border-top:1px solid #eae2da;background:#faf7f4}
.site-footer a{color:var(--primary);font-weight:500}
.footer-legal{font-size:.72rem;color:#c2b8a9;margin-bottom:.5rem;line-height:1.4}
.footer-legal a{color:#c2b8a9;text-decoration:underline}
.footer-legal a:hover{color:var(--primary)}

/* ═══ SCROLL REVEAL ═══ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .55s cubic-bezier(.25,.46,.45,.94), transform .55s cubic-bezier(.25,.46,.45,.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.card:nth-child(1){transition-delay:.04s}
.card:nth-child(2){transition-delay:.08s}
.card:nth-child(3){transition-delay:.12s}
.card:nth-child(4){transition-delay:.16s}
.card:nth-child(5){transition-delay:.20s}
.card:nth-child(6){transition-delay:.24s}

/* ═══ WHATSAPP FLOATING ═══ */
.wa-float{position:fixed;bottom:1.4rem;right:1.4rem;z-index:999;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.3);transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;animation:wa-bounce 2s ease-in-out 3s 3}
.wa-float:hover{transform:scale(1.1);box-shadow:0 8px 28px rgba(37,211,102,.4)}
@keyframes wa-bounce{0%,100%{transform:translateY(0)}25%{transform:translateY(-6px)}50%{transform:translateY(0)}75%{transform:translateY(-3px)}}
.wa-float svg{display:block}

/* ═══ MENU GRID (prestations coiffure/esthétique) ═══ */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.menu-grid article h3{font-size:1.05rem;font-weight:600;font-family:"Cormorant Garamond",serif;color:var(--primary);margin-bottom:.4rem}
.menu-grid ul{list-style:none;padding:0}
.menu-grid li{padding:.3rem 0;font-size:.86rem;color:#8c7d6f;border-bottom:1px solid #f1ece5}
.menu-grid li:last-child{border-bottom:none}

.pricing-card-premium .btn-cta{background:#faf7f4!important;color:#33291f!important}

/* ═══ RESPONSIVE ═══ */
@media(max-width:700px){
  .grid{grid-template-columns:1fr}
  .menu-grid{grid-template-columns:1fr}
  .info-strip-grid{flex-direction:column}
  .info-cell{border-right:none;border-bottom:1px solid #eae2da;padding:.9rem 1rem;justify-content:flex-start}
  .info-cell:last-child{border-bottom:none}
  .review-strip{gap:1rem}
  .review-mini{flex:0 0 230px}
  .hero{min-height:38vh}
  .hero-gradient{min-height:36vh}
}
@media(max-width:480px){
  .hero{min-height:32vh}
  .hero-gradient{min-height:30vh}
  .hero-gradient .hero-content{padding:3rem 0 2.5rem}
  .review-score{font-size:2.3rem}
  .logo-img{max-width:180px;max-height:140px}
  .cta-banner{padding:3.2rem 1rem}
  .wa-float{width:52px;height:52px;bottom:1rem;right:1rem}
  .wa-float svg{width:24px;height:24px}
  /* TEST: hero texte centre sur mobile (au lieu de cale a gauche) */
  .hero-content{text-align:center;margin:0 auto}
  .kicker{justify-content:center}
  .kicker::before{display:none}
  .hero-actions{justify-content:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .trust-badges{justify-content:center;margin-top:1.8rem;gap:.7rem}
}

/* ── Mock reviews ─────────────────────────────── */
.mock-label-badge{display:inline-block;font-size:.58rem;font-weight:500;background:#F3F4F6;color:#6B7280;border:1px solid #D1D5DB;border-radius:2px;padding:.15em .5em;vertical-align:middle;text-transform:uppercase;letter-spacing:.1em;margin-left:.5rem}
.mock-score{color:#9CA3AF!important}
.star.mock-filled{color:#D1D5DB}
.review-mini-stars.mock-stars{color:#D1D5DB}
.review-mini-date{font-size:.68rem;color:#9CA3AF;margin-left:auto;white-space:nowrap}
.mock-badge-pill{background:#F3F4F6!important;color:#6B7280!important;border:1px solid #D1D5DB!important}
.review-mock-disclaimer{font-size:.72rem;color:#9CA3AF;font-style:italic;margin-top:.9rem;padding:.4rem .6rem;background:#F9FAFB;border-radius:0;border-left:2px solid #E5E7EB;line-height:1.4}

/* CTA note */
.cta-note{font-size:.78rem;color:rgba(250,247,244,.45);margin-top:.5rem;letter-spacing:.02em;line-height:1.5}

/* ═══ LIGHTBOX PHOTOS ═══ */
.gallery img{cursor:zoom-in}
.lightbox{
  display:none;position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;
}
.lightbox.active{display:flex}
.lightbox-img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:4px}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:background .2s;line-height:1;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25)}
.lightbox-close{top:1.2rem;right:1.2rem;width:44px;height:44px;font-size:1.7rem}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}
.lightbox-prev{left:1rem}
.lightbox-next{right:1rem}
@media(max-width:640px){
  .lightbox-prev,.lightbox-next{width:42px;height:42px;font-size:1.5rem}
  .lightbox-close{width:38px;height:38px;font-size:1.4rem}
}

/* ═══ BARRE D'ACTION MOBILE STICKY ═══ */
.mobile-cta-bar{display:none}
@media(max-width:640px){
  .mobile-cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:998;
    background:var(--surface);box-shadow:0 -4px 20px rgba(0,0,0,.15);
    padding:.6rem .8rem;gap:.6rem;
  }
  .mobile-cta-btn{
    flex:1;display:flex;align-items:center;justify-content:center;gap:.4rem;
    padding:.75rem 1rem;border-radius:10px;font-weight:600;font-size:.92rem;
    text-decoration:none;background:var(--primary);color:#fff;
  }
  .mobile-cta-btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
  body{padding-bottom:4.6rem}
  .wa-float{bottom:4.9rem}
}

/* ═══ TRUST BADGES (dans le hero) ═══ */
.trust-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.trust-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.4rem .8rem;border-radius:100px;font-size:.78rem;font-weight:600;
  background:color-mix(in srgb, currentColor 12%, transparent);
  border:1px solid color-mix(in srgb, currentColor 22%, transparent);
  color:inherit;
}

/* ═══ BANDEAU DONNEES INCOMPLETES/MOCKEES ═══ */
.incomplete-data-banner{
  background:color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-bottom:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.incomplete-data-inner{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem 1.4rem;
}
.incomplete-data-inner svg{flex-shrink:0;margin-top:.15rem;color:var(--primary)}
.incomplete-data-inner strong{display:block;font-size:.85rem;margin-bottom:.15rem}
.incomplete-data-inner p{margin:0;font-size:.82rem;opacity:.85;line-height:1.4}

/* ═══ ILLUSTRATION DECORATIVE (hero sans vraie photo) ═══ */
.hero-illustration{
  position:absolute;top:50%;right:-4%;transform:translateY(-50%) rotate(-6deg);
  width:280px;height:280px;opacity:.16;pointer-events:none;z-index:0;
}
@media(max-width:700px){
  .hero-illustration{width:180px;height:180px;right:-8%}
}
@media(max-width:480px){
  .hero-illustration{width:130px;height:130px;opacity:.1}
}

/* ═══ LEGENDE SUR L ILLUSTRATION DECORATIVE ═══ */
.hero-illustration-caption{
  position:absolute;bottom:14%;right:2%;z-index:1;
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  color:var(--ink);
  padding:.35rem .7rem;border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  max-width:180px;text-align:right;
}
@media(max-width:700px){
  .hero-illustration-caption{font-size:.66rem;bottom:10%;right:1%;max-width:130px;padding:.3rem .55rem}
}
@media(max-width:480px){
  .hero-illustration-caption{display:none}
}

/* lot 3 -- audit 2026-07-25 : bandeau photos d'illustration */
.hero-stock-photo-notice{position:absolute;z-index:3;top:1rem;left:1rem;display:inline-flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(2px)}


/* ══════════════════════════════════════════════════════════════
   CORRECTIFS LISIBILITE & LARGEUR -- 2026-07-31
   Ajoutes en fin de fichier pour surcharger les regles ci-dessus
   sans les reecrire (les 6 themes sont des forks : une surcharge
   commune evite 6 divergences).
   ══════════════════════════════════════════════════════════════ */

/* 1. HERO EN COLONNE -- le hero s'etendait sur 100% de la largeur de
   l'ecran alors que tout le reste du site est contenu dans 960px : sur
   grand ecran la photo debordait visuellement du site. Il suit desormais
   la meme colonne que le contenu. */
.hero{
  max-width:960px;
  margin:1.4rem auto 0;
  border-radius:18px;
  width:auto;
}
@media (max-width:1000px){
  .hero{margin:0;border-radius:0;max-width:none}
}

/* 2. BADGES DE CONFIANCE LISIBLES -- le fond etait derive de
   currentColor a 12% d'opacite : sur le hero, texte blanc => fond blanc
   quasi transparent, donc "4,5/5 Google" et "168 avis verifies"
   illisibles des que la photo etait claire. On pose un fond sombre reel,
   independant de la couleur du texte et de la photo. */
.hero .trust-badge,
.hero-content .trust-badge{
  background:rgba(12,14,18,.62);
  border:1px solid rgba(255,255,255,.30);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}

/* 3. OFFRES LISIBLES -- .cta-banner derive son fond de --primary, qui
   change selon le metier. Sur les palettes claires, le texte blanc des
   cartes devenait illisible. On garantit un fond suffisamment sombre
   quelle que soit la palette. */
.cta-banner{
  background:linear-gradient(140deg,
    color-mix(in srgb, var(--primary), #000 28%) 0%,
    color-mix(in srgb, var(--primary), #000 62%) 100%);
}
.pricing-card{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
}
.pricing-card li{color:rgba(255,255,255,.94)}
.cta-banner h2,.cta-banner p,.pricing-card h3,.pricing-amount{
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* 4. BANDEAU "CONTENU PROVISOIRE" -- etait une petite pastille discrete
   en coin, que le commercant ne remarquait pas : il pouvait croire que
   les photos affichees etaient les siennes. Devient un vrai bandeau
   pleine largeur, lisible, place en tete de page. */
/* Bandeau volontairement COMPACT (2026-08-02) : il occupait ~3 lignes en
   tete de page et ecrasait le hero, alors que son role est d'avertir, pas
   de dominer la page. Une seule ligne sur desktop, la precision passe en
   texte secondaire sur la meme ligne. */
.provisional-banner{
  display:block;
  background:#854F0B;
  color:#fff;
  text-align:center;
  padding:.34rem 1.2rem;
  font-size:.8rem;
  line-height:1.35;
  font-weight:600;
}
.provisional-banner strong{color:#ffd7a8}
.provisional-banner .pb-sub{
  display:inline;
  font-weight:400;
  font-size:.78rem;
  opacity:.82;
  margin-top:0;
}
/* Sur mobile la phrase complete tiendrait sur 4 lignes : on garde
   l'avertissement principal (opposable) et on masque la precision. */
@media (max-width:640px){
  .provisional-banner{font-size:.74rem;padding:.3rem .8rem}
  .provisional-banner .pb-sub{display:none}
}
/* Le bloc @media (max-width:600px) qui vivait ici REGONFLAIT le bandeau sur
   telephone (police .88rem, marge .75rem) alors que la regle 640px juste
   au-dessus venait de le rendre compact (.74rem, .3rem). Les deux
   s'appliquaient sous 600px, la seconde gagnait : le bandeau etait donc PLUS
   gros sur un telephone que sur un ecran de 620px, l'inverse de l'intention.
   C'etait un reste d'avant la compaction du 02/08/2026, jamais retire.
   Signale le 08/08/2026 : le bandeau "rendait comme si le site etait bugue"
   sur mobile. La regle 640px suffit seule. */

/* Icones reseaux : couleurs de marque UNIQUEMENT quand le lien est reel.
   Les emplacements inertes restent gris -- une icone Instagram coloree mais
   non cliquable laisserait croire que le reseau est deja branche. */
.social-icons-row a[aria-label="Instagram"]{color:#E1306C}
.social-icons-row a[aria-label="Facebook"]{color:#1877F2}
.social-icons-row a[aria-label="Tiktok"]{color:#010101}
.social-icons-row a[aria-label="Linkedin"]{color:#0A66C2}
.footer-social a[aria-label="Instagram"]{color:#E1306C}
.footer-social a[aria-label="Facebook"]{color:#1877F2}
.footer-social a[aria-label="Tiktok"]{color:#010101}
.footer-social a[aria-label="Linkedin"]{color:#0A66C2}
.social-icons-row a:hover,.footer-social a:hover{opacity:.78}

/* Le selecteur de langue est en position fixe : sans ce decalage il
   flottait PAR-DESSUS le bandeau d'apercu provisoire, melangeant un
   element du vrai site avec un avertissement temporaire. Il descend donc
   sous le bandeau quand celui-ci est present (selecteur ~ : le bandeau le
   precede dans le DOM). Valeurs genereuses car le texte du bandeau passe
   sur 2 lignes en desktop et jusqu'a 4 sur petit ecran. */
/* position:absolute (et non fixed) quand le bandeau est present : en fixed
   le drapeau restait colle a 88px du haut de l'ECRAN, donc il flottait au
   milieu du contenu des qu'on descendait dans la page. En absolute il est
   pose une fois pour toutes sous le bandeau et defile avec le site. */
body{position:relative}

/* Vraies photos du commerce : aucun flou. Le flou de 2px sur .hero-bg img
   est un parti pris esthetique acceptable pour une image d'illustration
   generique, mais absurde sur la devanture reelle d'un client qui paie --
   il rendait sa propre photo moins nette que l'illustration qu'elle
   remplace. Legere mise a l'echelle conservee pour l'effet de profondeur. */
/* FLOU : desormais l'EXCEPTION, plus la regle (2026-07-31).
   Le flou de 2px etait applique a toute image de hero. Or :
   - les vraies photos d'un client n'ont aucune raison d'etre floutees ;
   - les photos d'illustration du cache sont selectionnees en bonne
     definition et bon cadrage, elles n'en ont pas besoin non plus.
   Il ne reste justifie que pour rattraper une image sous le seuil de
   definition, qui parait pixelisee etalee sur un bandeau plein ecran.
   Cote rendu, seule la classe .hero-lowres (posee quand la photo est
   sous le seuil) declenche l'adoucissement. */
.hero-bg img{filter:none}
.hero-bg.hero-lowres img{filter:blur(5px)}

/* SCEAU "apercu" -- remplace l'ancienne pastille texte (2026-07-31).
   Demande : un vrai sceau facon macaron de concours, plus valorisant
   qu'une simple etiquette grise. Il n'apparait QUE sur les sites non
   actives : des qu'un client est actif (photos Google ou photos qu'il a
   lui-meme televersees), il disparait entierement. */
.hero-seal{
  position:absolute;z-index:3;top:1.15rem;left:-1.35rem;
  /* Legere inclinaison : un tampon appose a la main n'est jamais droit.
     -7deg suffit a le rendre vivant sans donner l'impression d'un defaut
     d'affichage. Anime en "tampon" a l'affichage (voir @keyframes
     seal-stamp) -- purement CSS, aucune image de tampon, juste le
     mouvement d'impression sur le macaron dore existant. Depasse a
     gauche du hero (left negatif) pour rester visible meme sur les
     pages qui recadrent tres serre sur le hero. */
  transform:rotate(-7deg);
  animation:seal-stamp .55s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:.15s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* ELLIPSE ET NON CERCLE, ET PLUS GRAND QU'AVANT.
     Le macaron faisait 92 px de diametre et n'annoncait que « photos
     d'exemple ». Or sur un site non active, ce ne sont pas seulement les
     photos qui sont fictives : quand la fiche Google n'a pas ete retrouvee,
     le nom affiche, le texte de presentation, les horaires et les avis le
     sont aussi. Un visiteur qui lit « photos d'exemple » en deduit que le
     RESTE est vrai, exactement l'inverse de ce que ce macaron doit dire.
     Le libelle complet ne tient pas dans un cercle de 92 px : on passe donc
     a une ellipse large. `border-radius:50%` sur une boite non carree donne
     une ellipse, qui garde l'aspect tampon sans devenir un pave. */
  width:176px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #fdf6e6 0%, #f3e2bd 62%, #e6cf9c 100%);
  border:2px solid #b78b3a;
  box-shadow:0 2px 10px rgba(0,0,0,.28), inset 0 0 0 3px rgba(255,255,255,.55);
  color:#6b4a12;text-align:center;
  font-size:.56rem;font-weight:700;letter-spacing:.04em;line-height:1.25;
  text-transform:uppercase;
  padding:.4rem 1.3rem;
}
.hero-seal::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px dashed rgba(140,102,32,.55);
}
.hero-seal-top{font-size:.52rem;opacity:.9}
.hero-seal-main{font-size:.9rem;font-weight:800;letter-spacing:.02em;margin:.12rem 0}
.hero-seal-sub{font-size:.48rem;opacity:.9;font-weight:600;line-height:1.3;letter-spacing:.02em}
@media (max-width:600px){
  .hero-seal{width:150px;height:92px;top:.8rem;left:-.9rem;padding:.35rem 1rem}
  .hero-seal-main{font-size:.78rem}
  .hero-seal-sub{font-size:.44rem}
}
/* L'utilisateur peut demander a reduire les animations (vertige, migraine) :
   on respecte ce choix, le macaron apparait alors directement a sa place
   finale sans mouvement. */
@media (prefers-reduced-motion:reduce){
  .hero-seal{animation:none}
}
@keyframes seal-stamp{
  0%{opacity:0;transform:rotate(-7deg) scale(2.4)}
  55%{opacity:1;transform:rotate(-11deg) scale(.92)}
  78%{transform:rotate(-4deg) scale(1.05)}
  100%{transform:rotate(-7deg) scale(1)}
}

/* Infobulle du macaron -- confort DESKTOP uniquement.
   Elle ne remplace pas le bandeau : `hover` n'existe pas au doigt, et le
   bandeau reste le seul avertissement lisible sur mobile (majorite du
   trafic) comme la mention opposable en cas de litige. La media query
   (hover:hover) evite l'infobulle collee au premier tap sur tactile. */
@media (hover:hover) and (pointer:fine){
  .hero-seal{cursor:help}
  .hero-seal::after{
    content:attr(data-tip);
    /* Ancree a GAUCHE du macaron, pas centree : le macaron est a 1.15rem du
       bord, une infobulle centree debordait donc hors du hero et se
       retrouvait coupee (constate le 2026-07-31). */
    position:absolute;top:calc(100% + 10px);left:0;
    transform:rotate(7deg);
    width:250px;max-width:78vw;padding:.55rem .7rem;
    background:rgba(17,20,26,.95);color:#fff;
    font-size:.68rem;font-weight:500;line-height:1.45;
    letter-spacing:0;text-transform:none;text-align:left;
    border-radius:8px;opacity:0;visibility:hidden;
    transition:opacity .18s ease;pointer-events:none;z-index:5;
  }
  .hero-seal:hover::after{opacity:1;visibility:visible}
}

/* Le hero est en overflow:hidden (indispensable : il contient l'image de
   fond mise a l'echelle). L'infobulle du macaron s'y trouvait donc rognee
   des qu'elle depassait. On autorise le debordement UNIQUEMENT pendant le
   survol du macaron -- l'image de fond, elle, reste contenue par son propre
   conteneur .hero-bg. */
/* Le macaron depasse desormais en permanence a gauche du hero (pas
   seulement au survol comme l'infobulle) : le hero doit rester en
   overflow:visible en continu des qu'un macaron est present. L'image
   de fond reste cadree independamment par .hero-bg (son propre
   overflow:hidden), donc l'ouvrir ici ne la fait pas deborder. */
.hero{overflow:visible}
/* L'image de fond reste cadree par .hero-bg (overflow:hidden +
   border-radius:inherit) : ouvrir le hero ne la fait pas deborder. */

/* ═══ BOUTON "VOIR SANS LES REPERES" (12/08/2026) ═══
   Le bandeau d'avertissement et le macaron d'apercu recouvrent exactement ce
   que le commercant vient juger : il decide de garder son site sans avoir
   jamais vu la page telle qu'elle sera une fois payee. Ce bouton les efface
   TANT QU'ON LE MAINTIENT enfonce et les remet des qu'on relache, donc
   aucun etat "avertissements eteints" ne peut subsister.
   Meme ambre que le bandeau : il se lit comme faisant partie de
   l'avertissement, pas comme une fonction du commerce.
   Coin BAS GAUCHE parce que le bas droit est deja pris par le bouton
   WhatsApp flottant (.wa-float), present sur une partie des sites. */
.peek-toggle{
  position:fixed;left:1.4rem;bottom:1.4rem;z-index:998;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;
  border:0;border-radius:999px;
  background:#854F0B;color:#fff;
  font-family:inherit;font-size:.78rem;font-weight:600;line-height:1.2;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  /* Au doigt, un appui long selectionne le texte du bouton ou ouvre le menu
     de copie : les deux interrompent l'appui maintenu, donc les reperes
     reapparaissaient avant que le commercant ait eu le temps de regarder. */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  transition:opacity .12s ease,background .2s ease;
}
.peek-toggle svg{display:block;flex:0 0 auto}
.peek-toggle:hover{background:#6d4009}
.peek-toggle:focus-visible{outline:3px solid #ffd7a8;outline-offset:2px}
@media (max-width:600px){
  .peek-toggle{left:.9rem;bottom:.9rem;font-size:.74rem;padding:.45rem .75rem}
}

/* Le bandeau sort du flux (display:none) : il occupe une bande en tete de
   page, et le laisser en place invisible afficherait un ruban blanc a la
   place, donc pas le vrai rendu. */
body.peek-on .provisional-banner{display:none}
/* Le macaron, lui, est en position absolue : il ne prend aucune place dans
   le flux, visibility suffit. On evite ainsi de relancer son animation de
   tampon (seal-stamp) a chaque relachement, qui ferait clignoter le hero
   chez qui appuie plusieurs fois de suite. */
body.peek-on .hero-seal{visibility:hidden}
/* Le bouton s'efface aussi (il fait partie des reperes), mais JAMAIS en
   display:none : l'element retire du rendu perd le focus clavier, et le
   keyup qui remet les reperes n'arriverait alors nulle part, laissant la
   page sans avertissement. Il reste donc present, transparent et
   intraversable au pointeur. */
/* PAS de pointer-events:none ici. Corrige le 16/08/2026.
   Sur telephone, le navigateur decide de la cible du clic au moment ou le
   doigt se leve, pas au moment ou il se pose. Le bouton etant rendu
   intraversable PENDANT l'appui, le test de survol au relachement tombait sur
   ce qu'il y a dessous, c'est-a-dire une photo du site : le commercant
   relachait le bouton et se retrouvait dans la visionneuse d'images.
   Le bouton reste donc capteur, simplement invisible. La classe peek-on
   n'existe que pendant l'appui, il ne bloque donc rien le reste du temps, et
   le clic ainsi capte est avale par le gestionnaire de base.html. */
body.peek-on .peek-toggle{opacity:0}

/* ═══ BOUTON D'APERCU AU-DESSUS DE LA BARRE D'ACTION MOBILE ═══
   MESURE DU 15/08/2026 (Playwright, profil iPhone 13, page reelle).

   Le bouton « Voir sans les avertissements » etait bien rendu sur telephone,
   a 14 px du bord gauche et dans l'ecran. Mais elementFromPoint() en son
   centre renvoyait .mobile-cta-btn : la barre d'appel a l'action, fixee en
   bas d'ecran au meme z-index 998 et declaree apres lui, le recouvrait
   entierement. Le doigt tapait la barre, jamais le bouton. Vu du
   commercant, le bouton n'existait pas sur telephone -- et c'est le seul
   moyen qu'il a de voir son site tel qu'il sera une fois paye.

   .wa-float avait deja ete remonte pour exactement cette raison ;
   .peek-toggle a ete oublie lors de son ajout le 12/08.

   CE BLOC DOIT RESTER EN FIN DE FICHIER. Une premiere correction avait ete
   posee a cote de .wa-float, plus haut : le bloc @media (max-width:600px)
   qui repositionne .peek-toggle vient APRES et la remettait a .9rem. A
   specificite egale, c'est la derniere regle qui gagne.

   La borne est 640px et non 600px : c'est celle de .mobile-cta-bar. Entre
   601 et 640px la barre existe deja, et une borne a 600 laissait une bande
   de 40px ou le bouton restait recouvert. */
@media (max-width:640px){
  .peek-toggle{bottom:4.9rem;z-index:999}
}