/* ══════════════════════════════════════════════════════════════
   SiteServi v4 : Thème CONFIANCE MÉTIER (artisan, garage, pressing,
   et fallback "generic"). Fork fidèle de style.css prod.
   Typo: Archivo (titres + corps). Ambiance: atelier, sérieux.
   ══════════════════════════════════════════════════════════════ */

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

body{
  font-family:"Archivo","Inter",system-ui,-apple-system,sans-serif;
  color:#1c2430;
  background:#e8eaef;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:"Fraunces","DM Serif Display","Georgia",serif;font-weight:550;letter-spacing:-.012em}
.kicker{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.08em}

.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 : flou artistique assombri (chantier/atelier) ═══ */
.hero{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden;background:#1c2430;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:-6%;left:-6%;width:112%;height:112%;
  object-fit:cover;object-position:center 30%;
  filter:blur(0.6px) saturate(1.1) brightness(.62) contrast(1.05);
  transition:transform 8s ease-out;
}
.hero:hover .hero-bg img{transform:scale(1.04)}
.hero-overlay{
  position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(to top, rgba(28,36,48,.94) 0%, rgba(28,36,48,.86) 50%, rgba(28,36,48,.70) 78%, rgba(28,36,48,.32) 100%);
}
.hero-content{position:relative;z-index:2;padding:2rem 0 2.8rem;max-width:680px}

.kicker{
  text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:800;
  font-family:"Archivo",sans-serif;color:#1c2430;background:var(--accent);
  margin-bottom:.9rem;display:inline-flex;align-items:center;gap:.4rem;
  padding:.3rem .8rem;border-radius:6px;
}
.hero h1{font-size:clamp(2.1rem,6vw,3.4rem);font-weight:550;line-height:1.18;color:#fff;margin-bottom:.7rem;letter-spacing:-.005em}
.hero .lead{color:rgba(255,255,255,.82);font-size:1.05rem;margin-bottom:1.6rem;font-weight:400;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,#232d3c 0%,#1c2430 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 60%) 0%,transparent 70%);pointer-events:none;opacity:.6}
.hero-gradient .hero-content{padding:4.5rem 0 4rem;max-width:640px;position:relative;z-index:1}
.hero-gradient h1{color:#fff}
.hero-gradient .lead{color:rgba(255,255,255,.72)}
.hero-gradient .btn-outline{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.08)}
.hero-gradient .btn-outline:hover{background:rgba(255,255,255,.16);border-color:#fff;transform:translateY(-2px)}

/* ═══ BUTTONS ═══ */
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem;align-items:center}
.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.8rem 1.6rem;border-radius:10px;font-weight:800;font-size:.92rem;font-family:"Archivo",sans-serif;transition:all .22s ease;cursor:pointer;border:none;text-decoration:none}
.btn-primary{background:var(--accent);color:#1c2430;box-shadow:0 8px 24px color-mix(in srgb, var(--accent), transparent 60%)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.4)}
.btn-outline:hover{border-color:#fff;transform:translateY(-2px)}
/* Bouton externe Google Maps du widget carte (fond clair .map-fallback), meme correctif que style.css (audit 2026-07-24). */
.map-fallback .btn-outline{background:transparent;color:var(--primary);border-color:var(--primary)}
.map-fallback .btn-outline:hover{background:var(--primary);color:#fff}
.map-fallback .btn-outline:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn:not(.btn-primary):not(.btn-outline):not(.btn-cta){background:var(--accent);color:#1c2430}
.btn:not(.btn-primary):not(.btn-outline):not(.btn-cta):hover{filter:brightness(1.05);transform:translateY(-2px)}
.btn-cta{position:relative;overflow:hidden;background:var(--accent);color:#1c2430;font-size:.95rem;padding:.8rem 1.7rem;border-radius:10px}
.btn-cta:hover{filter:brightness(1.05);transform:translateY(-2px)}

/* ═══ INFO STRIP ═══ */
.info-strip{background:#fff;border-bottom:1px solid #e2e5ea;box-shadow:0 2px 12px rgba(28,36,48,.06)}
.info-strip-grid{display:flex;align-items:stretch}
.info-cell{flex:1;display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.4rem;border-right:1px solid #e2e5ea;min-width:0}
.info-cell:last-child{border-right:none}
.info-icon{font-size:1.15rem;flex-shrink:0;width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 10%,white);border-radius:10px}
.info-body{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.info-body strong{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:#5b6675;font-family:"Archivo",sans-serif;font-weight:800}
.info-body span,.info-body a{font-size:.9rem;color:#1c2430;font-weight:700;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.4rem;padding:2.4rem 0 3rem}
.card{background:#fff;border-radius:12px;padding:1.7rem;border:1px solid #e2e5ea;box-shadow:0 1px 4px rgba(28,36,48,.04);transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(28,36,48,.1)}
.card h2{font-size:1.2rem;font-weight:550;margin-bottom:1rem;color:#1c2430;display:flex;align-items:center;gap:.5rem;padding-bottom:.6rem;border-bottom:2px solid color-mix(in srgb,var(--primary),transparent 82%)}
.card-icon{font-size:1.05rem;width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--primary) 10%,white);border-radius:8px;flex-shrink:0}
.card-wide{grid-column:1/-1}

/* ═══ LOGO CARD ═══ */
.logo-card{display:inline-block;padding:0;margin:0;background:#fff;border-radius:12px;overflow:hidden;width:fit-content;height:fit-content;align-self:start;grid-column:1;border:1px solid #e2e5ea;box-shadow:0 2px 12px rgba(28,36,48,.06);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:1rem;line-height:1.75;color:#5b6675}
.about-text strong{color:#1c2430}

/* ═══ GALLERY ═══ */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;margin-top:.5rem}
.gallery img{width:100%;height:210px;object-fit:cover;border-radius:8px;border:1px solid #e2e5ea;transition:transform .3s ease}
.gallery img:hover{transform:scale(1.02)}

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

/* ═══ REVIEWS ═══ */
.review-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.review-score{font-size:2.6rem;font-weight:800;font-family:"Archivo",sans-serif;color:var(--primary);line-height:1}
.review-meta{display:flex;flex-direction:column;gap:.2rem}
.review-stars{font-size:1rem;letter-spacing:1px}
.star.filled{color:#FBBC04}
.star.empty{color:#dde1e7}
.review-count{font-size:.85rem;color:#5b6675;margin:0}
.review-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:800;color:#2e7d43;background:#e7f3ea;padding:.2rem .6rem;border-radius:6px;width:fit-content}
.review-strip{display:flex;gap:.8rem;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:#f4f5f7;border-radius:10px;padding:.9rem 1rem;border:1px solid #e2e5ea;transition:transform .3s ease}
.review-mini:hover{transform:translateY(-3px)}
.review-mini-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.review-mini-stars{color:#FBBC04;font-size:.85rem;letter-spacing:1px}
.review-mini-author{font-size:.78rem;font-weight:800;color:#1c2430}
.review-mini-text{font-size:.85rem;line-height:1.5;color:#5b6675;font-style:normal;margin:0}

/* ═══ MAP ═══ */
.map-wrapper{margin-top:.8rem;border-radius:10px;overflow:hidden;border:1px solid #e2e5ea}

/* ═══ 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:.78rem;font-weight:700;letter-spacing:.05em;color:#fff;background:rgba(0,0,0,.35);border-radius:8px;text-decoration:none;backdrop-filter:blur(8px);transition:background .2s, transform .2s}
.lang-link:hover{background:rgba(0,0,0,.55);transform:translateY(-1px)}
/* DRAPEAUX DU SELECTEUR DE LANGUE (SVG integre, aucune requete reseau).
   Remplace flag-icons, charge depuis un CDN tiers sur chaque site client.
   A DUPLIQUER DANS LES SIX THEMES : chaque site embarque UNE seule feuille,
   celle de son theme. Le 12/08/2026 le style n'avait ete ajoute qu'a
   style-elegance.css : le HTML portait bien la classe, aucun des deux sites
   temoins n'utilisait ce theme, et les drapeaux avaient purement disparu. */
.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:#1c2430;text-align:center;padding: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 55%) 0%,transparent 70%);pointer-events:none}
.cta-banner h2{font-size:1.7rem;font-weight:550;color:#fff;margin-bottom:.5rem;position:relative}
.cta-banner>div>p{color:rgba(255,255,255,.65);font-size:.95rem;margin-bottom:1.5rem}
.cta-sub{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:.5rem;position:relative}

.pricing-cards{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0;position:relative}
.pricing-card{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:1.6rem;width:260px;text-align:center;position:relative;transition:transform .2s,box-shadow .2s;color:#fff}
.pricing-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.pricing-card-premium{background:rgba(255,255,255,.12);border-color:var(--accent);box-shadow:0 8px 32px rgba(0,0,0,.25)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#1c2430;font-size:.72rem;font-weight:800;padding:3px 14px;border-radius:20px;white-space:nowrap}
.pricing-card h3{margin:.8rem 0 .4rem;font-size:1.1rem;color:#fff;font-family:"Archivo",sans-serif;font-weight:800}
.pricing-amount{font-size:1.5rem;margin:.3rem 0 .8rem;color:#fff}
.pricing-amount strong{font-size:2rem;font-family:"Archivo",sans-serif;font-weight:800}
.pricing-card ul{list-style:none;padding:0;margin:0 0 1rem;text-align:left;font-size:.87rem}
.pricing-card li{padding:.3rem 0 .3rem 1.4rem;position:relative;color:rgba(255,255,255,.78)}
.pricing-card li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.btn-premium{background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.4)!important;color:#fff!important}

/* ═══ FOOTER ═══ */
.site-footer{text-align:center;padding:1.8rem 1.4rem;font-size:.82rem;color:#8a93a0;border-top:1px solid #e2e5ea;background:#fff}
.site-footer a{color:var(--primary);font-weight:700}
.footer-legal{font-size:.75rem;color:#aab1bc;margin-bottom:.5rem;line-height:1.4}
.footer-legal a{color:#aab1bc;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:58px;height:58px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(37,211,102,.35);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.12);box-shadow:0 8px 28px rgba(37,211,102,.45)}
@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 (peu utilisé côté artisan, gardé pour compat) ═══ */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.menu-grid article h3{font-size:.95rem;font-weight:800;font-family:"Archivo",sans-serif;color:var(--primary);margin-bottom:.4rem}
.menu-grid ul{list-style:none;padding:0}
.menu-grid li{padding:.25rem 0;font-size:.88rem;color:#5b6675;border-bottom:1px solid #eceef2}
.menu-grid li:last-child{border-bottom:none}

.pricing-card-premium .btn-cta{background:#fff!important;color:var(--primary)!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 #e2e5ea;padding:.85rem 1rem}
  .info-cell:last-child{border-bottom:none}
  .review-strip{gap:.6rem}
  .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.1rem}
  .logo-img{max-width:180px;max-height:140px}
  .cta-banner{padding:3rem 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:.6rem;font-weight:800;background:#F3F4F6;color:#6B7280;border:1px solid #D1D5DB;border-radius:4px;padding:.15em .5em;vertical-align:middle;text-transform:uppercase;letter-spacing:.06em;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:.7rem;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:.74rem;color:#9CA3AF;font-style:italic;margin-top:.9rem;padding:.45rem .7rem;background:#F9FAFB;border-radius:6px;border-left:3px solid #E5E7EB;line-height:1.4}

/* CTA note */
.cta-note{font-size:.8rem;color:rgba(255,255,255,.55);margin-top:.5rem;letter-spacing:.01em;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;
  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:.01em;margin:.1rem 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}
}