/* ==========================================================================
   LS Plomberie : habillage "atelier"
   Se charge APRES styles.css. Ne touche ni au contenu ni aux couleurs de la
   charte (bordeaux, marine, creme). Change la typo, les formes et les
   composants qui faisaient "genere par IA" (pilules, pastilles, arrondis,
   cartes a double bordure, etiquettes mono).
   Reference visuelle : lettrage de camionnette d'artisan, bon d'intervention,
   plaque emaillee. Angles droits, filets, une seule famille de caracteres.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-italic-latin.woff2') format('woff2');
  font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap;
}

:root {
  /* Une seule famille, Archivo, dans plusieurs largeurs :
     condensee et grasse pour les titres (lettrage), normale pour le texte. */
  --font:   'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-d: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --font-m: 'Archivo', system-ui, sans-serif;

  --r-xl: 6px;
  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 4px;

  --rule:   rgba(26, 30, 56, 0.16);
  --rule-s: rgba(26, 30, 56, 0.28);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --rule:   oklch(0.20 0.035 260 / 0.16);
    --rule-s: oklch(0.20 0.035 260 / 0.28);
  }
}

body { font-size: 1rem; font-variation-settings: "wdth" 100; }

/* ---------- Titres : lettrage condense, gras, serre ---------- */
.hero-title, .section-title, .contact-title, .promo-headline, .explain-title,
.certif-title, .card-body h3, .faq-q, .trust-number, .marquee-item,
.legal-content h1, .legal-content h2, .mobile-link {
  font-family: var(--font-d);
  font-stretch: 78%;
  font-variation-settings: "wdth" 78;
  font-weight: 800;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-title { line-height: 0.98; font-size: clamp(2.4rem, 5.6vw, 4.8rem); }
.section-title { line-height: 0.98; font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.contact-title, .promo-headline { line-height: 1; }
.explain-title { line-height: 1.05; font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.card-body h3 { font-size: 1.55rem; line-height: 1.05; }
.faq-q { font-size: 1.2rem; line-height: 1.15; font-weight: 750; }
.line-accent { font-style: normal; }
.hero-title-ete { font-size: clamp(2.2rem, 5vw, 4.2rem) !important; }
@media (max-width: 768px) {
  .hero-title-ete { font-size: clamp(1.9rem, 8.4vw, 2.6rem) !important; }
}

/* Texte courant : plus grand, plus lisible, colonnes limitees */
.hero-desc, .zone-desc, .contact-desc, .explain-text p, .faq-a,
.card-body p, .certif-desc, .trust-desc, .promo-sub { font-size: 1rem; line-height: 1.65; }
.explain-text p, .faq-a { max-width: 64ch; }
.card-body p { font-size: 0.95rem; }

/* ---------- Etiquettes de section : filet + texte, plus de mono ---------- */
.section-tag, .trust-tag, .explain-tag, .promo-tag, .contact-info-label {
  font-family: var(--font);
  font-variation-settings: "wdth" 100;
  font-size: 0.82rem; font-weight: 650;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.section-tag, .explain-tag, .promo-tag {
  display: inline-flex; align-items: center; gap: 14px;
}
.explain-tag, .promo-tag { display: flex; }
.tag-dot { display: none; }

/* Logo LS PLOMBERIE : lettrage du camion, inchange (polices d'origine figees ici
   car --font et --font-d changent plus haut) */
.nav-logo, .splash-ls { font-family: 'DM Serif Display', Georgia, serif; }
.logo-plomberie, .splash-plomberie { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
/* Menu mobile */
.mobile-link { font-size: 2.6rem; }
.mobile-phone { font-family: var(--font); font-weight: 700; letter-spacing: 0.02em; }

/* ---------- Sections : fonds unis, pas de degrades decoratifs ---------- */
.section-services, .section-certif { background: var(--bg); }
.section-zone { background: var(--bg-raised); }
.section-intro { margin-bottom: 48px; }

/* ---------- Cartes services : image + texte, sans double bordure ---------- */
.services-grid { gap: 48px 32px; }
.card-shell { background: none; border: 0; border-radius: 0; padding: 0; }
.card-inner { background: none; border-radius: 0; box-shadow: none !important; overflow: visible; }
.card-shine { display: none; }
.card-visual { height: 240px; }
.card-body { padding: 20px 0 0; border-top: 0; }
.card-visual::after { border-radius: 0; }

/* Mots-cles des services : texte simple separe par des barres obliques */
.tags { gap: 0; }
.tags span {
  background: none; padding: 0; border-radius: 0;
  font-size: 0.85rem; font-weight: 600; color: var(--navy); letter-spacing: 0;
}
.tags span { white-space: nowrap; line-height: 1.9; }
.tags span:not(:last-child)::after { content: "/"; margin: 0 10px; color: var(--accent); font-weight: 400; }

/* ---------- Bandeau defilant : barre verticale au lieu de pastille ---------- */
.marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; }
.marquee-item { font-size: clamp(1.6rem, 3vw, 2.6rem); opacity: 0.85; text-transform: uppercase; padding: 0 28px; }
.marquee-dot { width: 2px; height: 1.4em; border-radius: 0; opacity: 0.7; }
.marquee-brands { background: var(--bg-card); }

/* ---------- Zone d'intervention : liste de communes, plus de pastilles ---------- */
.zone-img, .zone-overlay, .zone-card::before { border-radius: 0; }
.zone-cities { gap: 4px 0; }
.city {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 2px 0; font-size: 0.9rem; font-weight: 500;
}
.city:not(:last-child)::after { content: "/"; margin: 0 9px; opacity: 0.45; font-weight: 400; display: inline-block; }
.city-main { font-weight: 800; }
.city-accent { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.city.city-link:hover { background: none; text-decoration: underline; text-underline-offset: 4px; }
.city.city-link:focus-visible { border-radius: 0; }
.zone-local-chips { justify-content: flex-start; gap: 6px 0; }
.zone-local-chips .city { font-size: 0.92rem; }
.section-zone-local { padding: 28px 0; }
@media (max-width: 767px) {
  .city { min-height: 32px; }
}

/* ---------- Avis clients : cadres droits ---------- */
.testi-card {
  border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 0; border-top: 1px solid rgba(250,248,245,0.35); border-top: 1px solid oklch(0.97 0.004 80 / 0.35);
  padding: 24px 4px 8px;
}
.testi-card:hover { background: none; border-top-color: var(--accent-h); }
.testi-text { font-size: 0.95rem; }
.testi-author span { font-family: var(--font); font-size: 0.75rem; }

/* ---------- Certifications : bandeau d'attestations, pas de cartes ---------- */
.certif-header { text-align: left; max-width: 960px; margin: 0 auto 28px; }
.certif-desc { margin: 0; max-width: 52ch; }
.certif-grid {
  gap: 0; max-width: 960px;
  border-top: 2px solid var(--navy); border-bottom: 1px solid var(--rule-s);
}
.certif-card { background: none; border: 0; border-radius: 0; padding: 0; }
.certif-card + .certif-card { border-left: 1px solid var(--rule); }
.certif-card:hover { transform: none; box-shadow: none; }
.certif-card-inner {
  background: none; border-radius: 0; min-height: 0;
  padding: 26px 22px 24px; align-items: flex-start; text-align: left; justify-content: flex-start;
}
.certif-logo { height: 52px; max-width: 120px; margin-bottom: 18px; object-position: left center; }
.certif-name {
  font-family: var(--font-d); font-variation-settings: "wdth" 80; font-stretch: 80%;
  font-weight: 800; font-size: 1.25rem; line-height: 1.05; margin-bottom: 6px;
}
.certif-sub { font-size: 0.85rem; line-height: 1.45; }
@media (max-width: 600px) {
  .certif-card:nth-child(odd) { border-left: 0; }
  .certif-card:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .certif-card-inner { padding: 22px 14px 20px; }
}

/* ---------- Chiffres de confiance ---------- */
.trust-number { color: var(--navy); font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
a.trust-item-link { border-radius: 0; }
.trust-grid { gap: 0; }
.trust-item { padding: 8px 20px; }
.trust-item + .trust-item { border-left: 1px solid var(--rule); }
@media (max-width: 768px) {
  .trust-grid { gap: 32px 0; }
  .trust-item:nth-child(odd) { border-left: 0; }
}

/* ---------- Blocs explicatifs ---------- */
.explain-visual { border-radius: 0; }

/* ---------- Questions / contenu local : filets au lieu de cartes ---------- */
.faq-item {
  border: 0; border-top: 1px solid var(--rule-s); border-radius: 0;
  background: none; padding: 22px 0 6px;
}

/* ---------- Contact : numero et mail dans des cadres, pas des pilules ---------- */
.contact-cta, .contact-email {
  font-family: var(--font-d); font-variation-settings: "wdth" 80; font-stretch: 80%; font-weight: 800;
  border-radius: 6px; padding: 20px 20px 20px 24px;
}
.contact-email { border-width: 1.5px; }
.contact-cta:hover, .contact-email:hover { transform: none; box-shadow: none; }
.contact-cta-icon, .contact-cta-arrow, .contact-email-icon, .contact-email-arrow { border-radius: 4px; }
.contact-cta:focus-visible, .contact-email:focus-visible { border-radius: 6px; }
@media (max-width: 600px) {
  .contact-cta, .contact-email { padding: 16px 16px 16px 18px; }
}
.contact-info-label { color: var(--accent-h); }

/* ---------- Maillage "autres services" : index en colonnes ---------- */
.section-services-ville { border-top: 1px solid var(--rule); }
.services-ville-head { text-align: left; }
.svc-group { gap: 10px; }
.svc-group-label { font-size: 0.8rem; letter-spacing: 0.06em; }
.svc-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 32px; border-top: 1px solid var(--rule);
}
.svc-chip {
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; padding: 11px 0; font-size: 0.95rem; font-weight: 550;
  white-space: normal; display: flex; justify-content: space-between; align-items: center;
}
.svc-chip::after { content: "\2192"; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.svc-chip:hover { background: none; color: var(--accent); border-color: var(--accent); }
.svc-chip:hover::after { opacity: 1; transform: none; }
@media (max-width: 768px) {
  .svc-chip { font-size: 0.92rem; min-height: 44px; padding: 10px 0; }
}

/* ---------- Pages legales / 404 / 410 ---------- */
.legal-content h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; }

/* ---------- Focus clavier ---------- */
.card-shell:focus-visible, .certif-card:focus-visible, .testi-card:focus-visible { border-radius: 0; }

/* ---------- Ecran d'accueil (carte de visite) : logo inchange ---------- */
.splash-slogan { font-family: var(--font); font-weight: 600; letter-spacing: 0.08em; }

/* Hero : plus large pour que le lettrage condense tienne sans couper les noms */
.hero-text { max-width: 760px; }
.hero-title .line { text-wrap: nowrap; }
@media (max-width: 600px) { .hero-title .line { text-wrap: balance; } }

/* Listes longues (communes, prestations) : index en colonnes au lieu de texte qui s'enroule */
.zone-local-chips {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0 28px; border-top: 1px solid rgba(250,248,245,0.18);
}
.zone-local-chips .city {
  padding: 10px 0; border-bottom: 1px solid rgba(250,248,245,0.18) !important;
  display: flex; align-items: center; justify-content: space-between;
}
.zone-local-chips .city::after { content: "\2192" !important; margin: 0 !important; opacity: 0 !important; color: var(--accent-h); transition: opacity .2s; }
.zone-local-chips .city:hover::after { opacity: 1 !important; }
.zone-local-chips .city.city-link:hover { text-decoration: none; color: #fff; }
@media (max-width: 767px) {
  .zone-local-chips { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .zone-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
  .zone-cities .city::after { content: none; }
}
.zone-local-chips .city, .zone-cities .city { white-space: normal; min-width: 0; }
.zone-local-chips > *, .zone-cities > *, .svc-chips > * { min-width: 0; }
@media (max-width: 767px) {
  /* Carte de la zone : le cadre grandit avec la liste des communes */
  .zone-card { min-height: 0; }
  .zone-overlay { position: relative; min-height: 340px; padding: 20px; }
}
@media (max-width: 767px) {
  .svc-chips { grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .svc-chip { font-size: 0.88rem; }
  .svc-chip::after { content: none; }
}

/* ---------- Composants de la version hiver ---------- */
.section-expertise .section-title { color: #faf8f5; color: oklch(0.97 0.004 80); }
.stats-grid { gap: 0; border-top: 1px solid rgba(250,248,245,0.25); }
.stat-shell {
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(250,248,245,0.25);
}
.stat-shell:nth-child(odd) { border-right: 1px solid rgba(250,248,245,0.25); }
.stat-shell:hover { background: none; }
.stat-inner { padding: 26px 20px; text-align: left; }
.stat-row { justify-content: flex-start; }
.stat-num, .stat-suffix {
  font-family: var(--font-d); font-variation-settings: "wdth" 80; font-stretch: 80%; font-weight: 800;
}
.stat-label { letter-spacing: 0.06em; font-weight: 600; }
.features-row { gap: 0; border-top: 1px solid rgba(250,248,245,0.2); }
.feature { border: 0; border-radius: 0; border-right: 1px solid rgba(250,248,245,0.15); }
.feature:last-child { border-right: 0; }
.feature:hover { background: none; }
.feature h4 { font-size: 1rem; font-weight: 700; }
.sticky-eyebrow {
  font-family: var(--font); font-size: 0.82rem; font-weight: 650;
  letter-spacing: 0.06em;
}
.sticky-heading {
  font-family: var(--font-d); font-variation-settings: "wdth" 78; font-stretch: 78%;
  font-weight: 800; letter-spacing: -0.015em; line-height: 1;
}
.sticky-card-wrap { background: none; border: 0; border-radius: 0; padding: 0; }
.sticky-card {
  border-radius: 0; box-shadow: none !important;
  border-top: 2px solid var(--navy); background: var(--bg-card);
}
.sticky-card h3, .sticky-card-body h3 {
  font-family: var(--font-d); font-variation-settings: "wdth" 80; font-stretch: 80%; font-weight: 800;
}
.sticky-icon { border-radius: 0; background: none; width: auto; height: auto; justify-content: flex-start; }
.sticky-card-visual, .sticky-card-visual img { border-radius: 0; }
.sticky-progress * { border-radius: 0 !important; }
@media (max-width: 767px) {
  .feature { border-right: 0; border-bottom: 1px solid rgba(250,248,245,0.15); }
}

/* ---------- Boutons et menu : forme d'origine (pilule), texte en Archivo ---------- */
.btn-primary, .btn-ghost, .nav-cta, .nav-links a, .splash-enter { font-weight: 650; letter-spacing: 0.005em; }

/* ---------- Moins d'effets automatiques (13/10) ---------- */
/* Photo du haut fixe, plus de zoom lent ; plus de grain sur toute la page */
.hero-bg-img { animation: none !important; }
.grain { display: none !important; }

/* Petits titres en majuscules : gardes seulement en haut de page, sur le bandeau
   promo, sur "Pourquoi nous confier" et sur le contact. Retires ailleurs. */
.section-services .section-tag,
.section-zone .section-tag,
.section-zone-local .section-tag,
.section-testi .section-tag,
.section-certif .section-tag,
.section-expertise .section-tag,
.section-services-ville .section-tag,
.explain-tag,
.sticky-eyebrow { display: none !important; }

/* ---------- Corrections du 13/10 (retours de Gabin) ---------- */
/* Avis : le fond se decalait au defilement et laissait voir une bande de photo
   sans voile en bas de section. Le fond deborde maintenant largement (coupe par la section). */
.testi-bg { inset: -25% 0; }
.testi-bg-img { top: 0; height: 100%; }
/* Avis : on remet les cartes legerement opaques d'avant (coins un peu arrondis) */
.testi-card {
  background: rgba(250,248,245,0.08); background: oklch(0.97 0.004 80 / 0.08);
  border: 1px solid rgba(250,248,245,0.12); border: 1px solid oklch(0.97 0.004 80 / 0.12);
  border-radius: 6px; padding: 28px 24px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.testi-card:hover {
  background: rgba(250,248,245,0.12); background: oklch(0.97 0.004 80 / 0.12);
  border-color: rgba(250,248,245,0.22); border-color: oklch(0.97 0.004 80 / 0.22);
}
@media (max-width: 767px) { .testi-card { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Partenaires : titre, texte et contenu des cases centres */
.certif-header { text-align: center; }
.certif-desc { margin: 0 auto; }
.certif-card-inner { align-items: center; text-align: center; justify-content: center; }
.certif-logo { object-position: center; }

/* Questions et blocs de texte local : titre et colonne centres dans la page */
.section-services:has(.faq-item) .section-intro { text-align: center; }
.section-services:has(.faq-item) .container > div:has(> .faq-item) { margin-inline: auto; }

/* ---------- "Nos services" / liste de communes : tuiles encadrees, pleine largeur ---------- */
.section-zone-local {
  background: var(--bg-raised);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: clamp(56px, 8vw, 96px) 0 !important;
}
.section-zone-local .section-intro { text-align: center; margin-bottom: 40px !important; }
.section-zone-local .section-title { color: var(--text); text-shadow: none; }
.section-zone-local .section-tag { color: var(--accent); }
.zone-local-chips {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; border: 0;
}
.zone-local-chips .city, .zone-local-chips .city.city-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 14px 18px;
  background: var(--bg-card) !important; color: var(--text) !important;
  border: 1px solid var(--rule) !important; border-radius: 6px !important;
  font-size: 1rem; font-weight: 600; line-height: 1.25;
  transition: border-color .2s, color .2s, transform .2s;
}
.zone-local-chips .city::after {
  content: "\2192" !important; margin: 0 !important; opacity: 1 !important;
  color: var(--accent) !important; flex-shrink: 0; transition: transform .2s;
}
.zone-local-chips .city.city-link:hover {
  border-color: var(--accent) !important; color: var(--accent) !important; text-decoration: none;
}
.zone-local-chips .city.city-link:hover::after { transform: translateX(3px); }
.zone-local-chips .city-main { border-color: var(--accent) !important; }
@media (max-width: 1024px) { .zone-local-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .zone-local-chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .zone-local-chips .city, .zone-local-chips .city.city-link { min-height: 56px; padding: 12px 14px; font-size: 0.92rem; }
}

/* ---------- "Pourquoi me confier votre projet" : tout aligne ---------- */
@media (min-width: 769px) {
  .trust-grid { align-items: stretch; }
  .trust-item, a.trust-item-link {
    display: grid; grid-template-rows: 96px auto 1fr; justify-items: center; align-content: start;
    gap: 10px; padding: 8px 24px; margin: 0;
  }
  .trust-number, .trust-logos { height: 96px; display: flex; align-items: center; justify-content: center; line-height: 1; }
  .trust-number { font-size: 3.4rem; }
  .trust-number small { font-size: 0.45em; align-self: flex-end; margin-bottom: 0.9em; }
  .trust-logo { width: 72px; height: 72px; }
  .trust-label { font-size: 1.05rem; align-self: start; }
  .trust-desc { align-self: start; margin: 0; }
}
@media (max-width: 768px) {
  .trust-item, a.trust-item-link {
    display: grid; grid-template-rows: 64px auto 1fr; justify-items: center; align-content: start;
    gap: 6px; padding: 4px 12px; margin: 0;
  }
  .trust-number, .trust-logos { height: 64px; display: flex; align-items: center; justify-content: center; align-self: auto; }
  .trust-label { align-self: start; }
  .trust-desc { align-self: start; margin: 0; }
}

/* ---------- Pages ville : texte local, questions, zone (13/10) ---------- */
/* Texte local : presentation en deux colonnes, sans aspect questions-reponses */
.section-local .container > div:has(> .faq-item) {
  max-width: none !important; display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px !important;
}
.section-local .faq-item { border: 0; padding: 0; }
.section-local .faq-q {
  font-size: 1.15rem; color: var(--accent); margin-bottom: 8px;
  font-variation-settings: "wdth" 85; font-stretch: 85%;
}
.section-local .faq-a { max-width: none; }
@media (max-width: 767px) {
  .section-local .container > div:has(> .faq-item) { grid-template-columns: 1fr; gap: 28px !important; }
}

/* Questions : fond bleu marine pour couper la suite de fonds clairs */
.section-faq { background: var(--navy) !important; }
.section-faq .section-title { color: #faf8f5; color: oklch(0.97 0.004 80); }
.section-faq .faq-item { border-top-color: rgba(250,248,245,0.22); border-top-color: oklch(0.97 0.004 80 / 0.22); }
.section-faq .faq-q { color: #faf8f5; color: oklch(0.97 0.004 80); }
.section-faq .faq-a { color: #c2c6d8; color: oklch(0.82 0.008 260); }
.section-faq .faq-a a { color: #f0a7b3; color: oklch(0.80 0.09 12); text-decoration-color: currentColor; }

/* Zone d'intervention des pages ville : teinte sable, tuiles plus compactes */
.section-zone-local { background: #ebe4da; background: oklch(0.92 0.012 75); }
.section-zone-local .container:not(:has(.section-intro .section-tag)) .zone-local-chips { gap: 8px; }
.section-zone-local .container:not(:has(.section-intro .section-tag)) .city {
  min-height: 50px; padding: 10px 16px; font-size: 0.95rem;
}
.section-zone-local .section-intro { margin-bottom: 28px !important; }
/* Bloc de tuiles sans titre h2 (217 pages "Nos autres services") : l'etiquette sert de titre */
.section-zone-local .section-intro:not(:has(h2)) { text-align: center; }
.section-zone-local .section-intro:not(:has(h2)) .section-tag {
  display: inline-block !important; color: var(--text);
  font-family: var(--font-d); font-variation-settings: "wdth" 78; font-stretch: 78%;
  font-weight: 800; text-transform: none; letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1; margin: 0;
}