/* =========================================================
   SERVANT RÉNOVATION — GENERAL.CSS
   Palette : Rouge (primaire) + anthracite + blanc
   Accents RVB rappelant les bandes du pinceau
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --red: #e53935;
  --red-dark:#c72f2b;
  --bg: #131417;           /* fond principal */
  --panel: #181a20;        /* panneaux */
  --ink:#22252c;           /* surcouche */
  --text:#f3f5f7;          /* texte principal */
  --muted:#b8bdc7;         /* texte secondaire */

  /* accents (discrets) */
  --acc-r:#ff4b3a;
  --acc-g:#56d27b;
  --acc-b:#3aa7ff;

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.35);
}

/* ---------- Reset/Global ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(70vw 50vh at 85% -10%, #1b1d23 8%, transparent 60%),
    radial-gradient(60vw 40vh at -10% 90%, #0f1013 12%, transparent 60%),
    var(--bg);
}

.shadow {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.5), 0 6px 20px 0 rgba(200, 200, 200, 0.5);
}

.shadow2 {
    box-shadow: 4px 4px 8px 20px rgb(102 101 98 / 61%), 8px 48px 34px 20px rgb(102 101 98 / 67%);
}

.radius {
    border-radius: 2vh;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
.invisible{ position:absolute; inset:auto; width:1px; height:1px; overflow:hidden; }

/* Containers */
.wrap{ width:min(1180px,92vw); margin-inline:auto; }

/* ---------- Typo utilitaires ---------- */
.section-title{
  margin:3.2rem 0 1.6rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(1.3rem,2.6vw,2rem);
  background:linear-gradient(90deg,#fff,#dfe3ea);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
p{ line-height:1.6; color:var(--muted); }

/* ---------- Boutons ---------- */
.btn{
  --h:48px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--h); padding:0 1.2rem;
  border-radius:999px; font-weight:800; letter-spacing:.04em;
  border:2px solid transparent; transition:.2s ease; text-transform:uppercase;
}
.btn--primary{ background:var(--red); color:#fff; box-shadow:0 10px 24px rgba(229,57,53,.35); }
.btn--primary:hover{ transform:translateY(-2px); filter:saturate(110%); }
.btn--ghost{ background:transparent; color:var(--text); border-color:#ffffff33; }
.btn--ghost:hover{ background:#ffffff14; transform:translateY(-2px); }
.cta-row{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding-top:4.5rem; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__ray{ position:absolute; filter:blur(22px); opacity:.38; mix-blend-mode:screen; }
.ray--r{ background:radial-gradient(45% 45% at 70% 10%, var(--acc-r), transparent 70%); inset:-15% 0 auto 40%; }
.ray--g{ background:radial-gradient(45% 45% at 30% 60%, var(--acc-g), transparent 70%); inset:auto 10% -20% auto; }
.ray--b{ background:radial-gradient(50% 50% at 0% 0%, var(--acc-b), transparent 70%); inset:-10% auto auto -10%; }

.hero__grid{
  display:grid; gap:2.2rem; align-items:center;
  grid-template-columns:1.1fr .9fr;
  padding:6rem 0 4rem;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; padding:4.5rem 0 2rem; } }

.hero__diagonal{
  position:relative; inset:auto 0 0 0; height:110px;
  background:
    linear-gradient(180deg, transparent, #0000 30%),
    linear-gradient(100deg, var(--red), var(--red-dark));
  clip-path:polygon(0 0, 70% 0, 100% 100%, 0% 100%);
  opacity:.95;
}

.hero__brand{ display:flex; align-items:center; gap:1.2rem; }
@media (max-width:640px){ .hero__brand{ flex-direction:column; text-align:center; } }
.brand__logo{ width:min(140px,30vw); filter:drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.brand__title{ font-size:clamp(2.1rem,5.2vw,3.8rem); margin:.1rem 0 .2rem; font-weight:900; line-height:1; }
.brand__tag{ color:#d6d8de; font-weight:600; }

.hero__shot{ display:flex; justify-content:flex-end; }
.shot-card{
  background:linear-gradient(180deg,#1b1d23,#17191e);
  border:1px solid #ffffff1a; border-radius:var(--radius);
  padding:1.6rem 1.4rem; max-width:520px; box-shadow:var(--shadow);
}
.shot-card h2{ margin:0 0 .5rem; font-size:1.35rem; }
.pill-list{ list-style:none; display:flex; gap:.5rem; flex-wrap:wrap; margin:.8rem 0 0; padding:0; }
.pill-list li{ background:#ffffff14; border:1px solid #ffffff22; padding:.35rem .6rem; border-radius:999px; font-size:.9rem; }


/* Étoiles dans about__bullets */
.about__bullets .rating{ display:inline-flex; align-items:center; gap:.45rem; }
.about__bullets .stars{ display:inline-flex; gap:.25rem; line-height:0; color:#ffcc3a; }
.about__bullets .star{ width:1.05em; height:1.05em; filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
/* >>> le point clé : remplir les étoiles pleines avec la couleur courante */
.about__bullets .star path{ fill:currentColor; }
.about__bullets .star--partial path{ fill:none; }          /* on annule pour l’étoile dégradée */
.about__bullets .star--partial path:first-of-type{ fill:url(#sr-grad-49); } /* puis on remet le dégradé */
.about__bullets .rating__text{ color:var(--text); font-weight:800; }

/* =========================================================
   NAVIGATION SERVICES (boutons)
   ========================================================= */
.service-nav{ background:#0f1013; border-block:1px solid #ffffff12; }
.service-nav__row{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:1rem 0;
}
.sn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .9rem; border-radius:999px; font-weight:800;
  background:#ffffff0f; border:1px solid #ffffff24; color:#fff; transition:.2s ease; }
.sn-btn:hover{ background:#ffffff1d; transform:translateY(-2px); }
.sn-btn--cta{ background:var(--red); border-color:transparent; }
.sn-btn--cta:hover{ filter:saturate(112%); }

/* =========================================================
   À PROPOS
   ========================================================= */
.about{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1.2rem; align-items:center;
  margin-top:2.2rem;
}
.about__text p{ margin:.4rem 0; }
.about__bullets{ color:#dfe2e8; font-weight:700; margin-top:.6rem; }
.about__photo{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  border:1px solid #ffffff1a; transform:translateY(10px); opacity:0; transition:.45s ease;
}
.about__photo.in{ transform:none; opacity:1; }
@media (max-width:980px){ .about{ grid-template-columns:1fr; } }

/* =========================================================
   SERVICES — Cartes
   ========================================================= */
.cards{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(5, minmax(210px,1fr));
}
@media (max-width:1280px){ .cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .cards{ grid-template-columns:1fr; } }

.card{
  background:linear-gradient(180deg,#1b1d23,#14161a);
  border:1px solid #ffffff1b; border-radius:var(--radius);
  padding:1.2rem 1.1rem; box-shadow:var(--shadow);
  transform:translateY(8px); opacity:0; transition:.4s ease;
}
.card.in{ transform:none; opacity:1; }
.card h3{ margin:.2rem 0 .4rem; font-size:1.15rem; }
.card p{ margin:0 0 .6rem; }
.card ul{ margin:.2rem 0 0 1.1rem; padding:0; }
.card__ctas{ margin-top:.8rem; }

.card__icon{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; margin-bottom:.35rem;
  background:#ffffff10; border:1px solid #ffffff1a;
}
.card__icon svg{ width:26px; height:26px; fill:#fff; }
.card__icon--ext{ background:linear-gradient(45deg,var(--acc-r),#ff7b73); }
.card__icon--int{ background:linear-gradient(45deg,#ff4fa3,#ff7bd3); }
.card__icon--placo{ background:linear-gradient(45deg,var(--acc-b),#84c9ff); }
.card__icon--sol{ background:linear-gradient(45deg,var(--acc-g),#9ae6b1); }
.card__icon--carrelage{ background:linear-gradient(45deg,#ff9f40,#ffd5a1); }

/* =========================================================
   STRIPE (bande visuelle)
   ========================================================= */
.stripe{
  margin:4rem 0;
  background:
    linear-gradient(135deg, #1a1c21 35%, #0e0f12 35% 36%, #1a1c21 36% 65%, #0e0f12 65% 66%, #1a1c21 66%),
    repeating-linear-gradient(90deg, transparent 0 40px, #ffffff07 40px 41px);
  border-block:1px solid #ffffff10;
}
.stripe__inner{ padding:3rem 0; text-align:center; transform:translateY(10px); opacity:0; transition:.45s ease; }
.stripe__inner.in{ transform:none; opacity:1; }
.stripe__photo{
  margin:1.2rem auto 0; width:25vw; border-radius:16px; overflow:hidden;
  border:1px solid #ffffff1a; box-shadow:var(--shadow);
}

@media (orientation: portrait) {
	.stripe__photo{
width:80vw;
}
}

/* =========================================================
   PARTENAIRES
   ========================================================= */
.partners__frame{
  background:linear-gradient(180deg,#17191e,#121317);
  border:1px solid #ffffff18; border-radius:var(--radius); padding:1rem;
  box-shadow:var(--shadow);
  display: flex;
  justify-content: center;
}

/* =========================================================
   CONTACT + MAP
   ========================================================= */
.contact{
  display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem; margin-bottom:4rem;
}
@media (max-width:980px){ .contact{ grid-template-columns:1fr; } }

/* Empêche la grille du formulaire de rester à 2 colonnes sur mobile */
@media (max-width: 780px){
  .contact .grid{ grid-template-columns:1fr; }
}

/* Évite que les inputs forcent la largeur des colonnes */
label{ min-width:0; }

/* Wrapper recaptcha : bloc fluide */
.recaptcha{ display:flex; justify-content:flex-start; overflow:hidden; }

/* Optionnel : réduire légèrement le widget sur très petits écrans */
@media (max-width: 380px){
  .g-recaptcha{ transform: scale(.9); transform-origin: left top; }
}


.contact__card{
  background:linear-gradient(180deg,#1a1c22,#13151a);
  border:1px solid #ffffff1c; border-radius:var(--radius);
  padding:1.3rem; box-shadow:var(--shadow);
  transform:translateY(10px); opacity:0; transition:.45s ease;
}
.contact__card.in{ transform:none; opacity:1; }

.contact__aside{
  display:grid; gap:1rem; align-content:start;
  transform:translateY(10px); opacity:0; transition:.45s ease;
}
.contact__aside.in{ transform:none; opacity:1; }

.grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.grid--wide{ grid-column:1 / -1; }
label{ display:grid; gap:.35rem; font-weight:700; color:#e7eaee; }
input, textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px;
  border:1px solid #ffffff2a; background:#0f1114; color:#fff; outline:none;
}
input::placeholder, textarea::placeholder{ color:#9aa1aa; }
input:focus, textarea:focus{ border-color:#ffffff66; box-shadow:0 0 0 3px #ffffff14; }
button{ border:0; }

.mini-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.mini-kpis > div{
  background:#0f1114; border:1px solid #ffffff1c; border-radius:12px; padding:.9rem; text-align:center;
}
.mini-kpis strong{ font-size:1.2rem; display:block; }
.mini-kpis span{ color:#c9ced6; font-size:.9rem; }

.mapbox{
  overflow:hidden; border-radius:16px; border:1px solid #ffffff1a; box-shadow:var(--shadow);
  aspect-ratio: 16/10; background:#0b0c0e;
}
.mapbox iframe{ width:100%; height:100%; border:0; }

.as-badge{
  display:flex; align-items:center; gap:.45rem; background:#0f1114; border:1px solid #ffffff1c;
  border-radius:999px; padding:.6rem .9rem; color:#d5d8de; font-weight:700;
}
.dot{ width:.7rem; height:.7rem; border-radius:50%; }
.dot--r{ background:var(--acc-r); } .dot--g{ background:var(--acc-g); } .dot--b{ background:var(--acc-b); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:#0d0e11; border-top:1px solid #ffffff14; padding:1.6rem 0; }
.footer__grid{ display:grid; gap:.8rem; grid-template-columns:1fr auto 1fr; align-items:center; }
.footer__logo img{ width:80px; opacity:.95; filter:grayscale(.05) drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.footer a{ border-bottom:1px dashed #ffffff33; }
.footer .legal{ text-align:right; color:#c7cbd2; }
@media (max-width:780px){
  .footer__grid{ grid-template-columns:1fr; text-align:center; }
  .footer .legal{ text-align:center; }
}

/* =========================================================
   QUICKBAR (mobile only)
   ========================================================= */
.quickbar{
  position:fixed; inset:auto 0 16px 0; display:flex; justify-content:center; gap:.8rem; z-index:50;
  pointer-events:none;
}
.quickbar a{
  pointer-events:auto; display:flex; align-items:center; gap:.45rem; font-weight:900;
  background:#101114; border:1px solid #ffffff22; color:#fff;
  height:44px; padding:0 .9rem; border-radius:999px; box-shadow:var(--shadow);
}
.quickbar svg{ width:18px; height:18px; fill:#fff; }
@media (min-width:980px){ .quickbar{ display:none; } }

/* =========================================================
   Effet "reveal" — la classe .in est ajoutée en JS
   ========================================================= */
.card, .stripe__inner, .contact__card, .contact__aside{ will-change: transform, opacity; }