/* Pages services (installation, rénovation, tableaux, dépannage, domotique) — même thème que la page Bornes :
   un seul héro, photo du service floutée et assombrie en fond, titre blanc, cartes blanches d'information par-dessus.
   Pages courtes : pas de longues sections d'explication, les détails sont dans les sous-pages. */

.svc-hero { position: relative; overflow: hidden; padding: 160px clamp(40px, 6vw, var(--edg-gutter)) 6rem; background: #1a1a1a; }
.svc-hero::before { content: ""; position: absolute; inset: -30px; background: var(--svc-photo) center / cover no-repeat; filter: blur(6px); }
/* Le bas de la photo s'assombrit toujours jusqu'à la couleur du footer de la page (--footer-bg), sur les 5
   pages service comme sur les 15 fiches détail — en % (pas en px) pour s'adapter à la hauteur du héro,
   qui varie selon qu'il y a la rallonge de 320px (pages avec bloc CTA-photo) ou non. */
.svc-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.74) 35%, rgba(0,0,0,.8) 75%, var(--footer-bg, #192538) 100%); } /* voile plus sombre (demande explicite) : le fond photo ne concurrence plus les photos des cartes */
.svc-hero-inner { position: relative; z-index: 1; max-width: 1260px; margin: 0 auto; text-align: center; }

.svc-hero-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 1rem; }
.svc-hero-title { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #fff; margin: 0 0 6rem; } /* comme « Bornes et prises renforcées » ; pas de sous-titre (doublon avec les cartes) */

/* Cartes blanches, style aligné sur les cartes « packs » de la page Bornes (demande explicite) : contenu centré
   (icône, titre, lien) comme les packs — seuls le texte descriptif et la liste à puces restent alignés à
   gauche (illisibles centrés sur plusieurs lignes, la page Bornes n'a pas cet équivalent). Sur ordinateur,
   effet « carrousel » façon packs Bornes plus bas (jamais de retour à la ligne, même avec 5 cartes comme sur
   Rénovation : une carte active au centre, les autres réduites/floutées, voir initCardFocus dans site-chrome.js). */
.svc-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; text-align: center; max-width: 1220px; margin: 0 auto; --svc-accent: #178bff; --svc-accent-bg: #e6f2ff; } /* même largeur/écart que les 3 cartes « packs » de la page Bornes ; --svc-accent/--svc-accent-bg : couleur de rubrique, redéfinie par page (voir en bas de fichier) */
/* Carte "premium" (demande explicite) : ombre douce et diffuse au repos (pas juste un liseré flou), qui se
   creuse nettement au survol au lieu d'un simple décalage vers le haut. */
.svc-card { flex: 1 1 300px; max-width: 380px; display: flex; flex-direction: column; background: #fff; border-radius: 24px; padding: 2rem 1.9rem 1.9rem; box-shadow: 0 2px 8px rgba(20,20,30,.05), 0 18px 40px rgba(20,20,30,.08); color: #1d1d1f; text-decoration: none; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
a.svc-card:hover { transform: translateY(-6px); box-shadow: 0 4px 12px rgba(20,20,30,.07), 0 30px 60px rgba(20,20,30,.18); }
/* Badge d'icône en dégradé (fond → couleur de rubrique) au lieu d'un gris plat, pour un effet "duotone" léger */
.svc-card-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(145deg, var(--svc-accent-bg, #f1f1f4) 0%, color-mix(in srgb, var(--svc-accent-bg, #f1f1f4) 55%, #fff) 100%); color: var(--svc-accent, #178bff); margin: 0 auto 1.35rem; transition: transform .35s cubic-bezier(.16,1,.3,1); }
a.svc-card:hover .svc-card-icon { transform: translateY(-2px); }
.svc-card-icon svg { width: 28px; height: 28px; }
.svc-card-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 .6rem; }
.svc-card-text { font-size: .95rem; line-height: 1.55; color: #5f5f64; margin: 0 0 1.2rem; text-align: center; }
.svc-card-link { display: inline-flex; align-items: center; align-self: center; gap: .5rem; margin-top: auto; font-size: .95rem; font-weight: 700; color: #178bff; } /* bleu du site partout (pas la couleur de rubrique) : la couleur ne reste que sur le badge d'icône, sinon trop "arc-en-ciel" ; align-self : .svc-card est en flex, un enfant inline-flex y est "blockifié" en flex plein largeur (donc collé à gauche) sans ça */
.svc-card-link svg { transition: transform .25s ease; }
a.svc-card:hover .svc-card-link svg { transform: translateX(4px); }
.svc-card-urgent .svc-card-icon { color: #e00; background: linear-gradient(145deg, #ffe1e1 0%, #fff 100%); }
.svc-card-urgent .svc-card-link { color: #e00; }

/* Effet « carrousel » façon page Bornes (.pack-card) : sur ordinateur, une carte "active" reste à taille normale
   au centre, les autres passent en "side" (réduites, floutées) — clic sur une carte de côté = elle revient au
   centre (JS : initCardFocus dans site-chrome.js, via l'attribut order + FLIP). Avec 5 cartes (Rénovation),
   même principe avec 4 cartes "side" autour de la carte active. Jamais de retour à la ligne sur ordinateur
   (flex-wrap:nowrap) : l'ordre visuel change via `order`, pas d'empilement. */
@media (min-width: 901px) {
  .svc-cards { flex-wrap: nowrap; }
  /* Avec 5 cartes (Rénovation), le conteneur à 1220px (pensé pour 3) forçait flexbox à les comprimer bien en
     dessous de leur flex-basis de 300px — d'où des cartes toutes fines. On élargit le conteneur/le héro pour
     que les 5 gardent la même taille que les cartes des pages à 3 (jusqu'à 380px), pas de retour à la ligne
     ni de scroll ; le zoom/flou de l'effet carrousel (is-active/is-side) vient s'ajouter par-dessus cette
     taille normale, pas remplacer une taille déjà réduite par manque de place. */
  .svc-hero:has(.svc-cards .svc-card:nth-child(4)) .svc-hero-inner { max-width: 2100px; }
  .svc-hero:has(.svc-cards .svc-card:nth-child(4)) { padding-left: clamp(40px, 4vw, 200px); padding-right: clamp(40px, 4vw, 200px); }
  .svc-cards:has(.svc-card:nth-child(4)) { max-width: 2100px; }
  .svc-card { cursor: pointer; transition: transform .6s cubic-bezier(.16,1,.3,1); }
  .svc-card.is-side { transform: scale(.92); } /* plus petite que la carte du milieu, mais lisible d'un coup d'œil (pas d'effet flou/transparent, demande explicite) */
  .svc-card.is-active { transform: scale(1.05); position: relative; z-index: 2; box-shadow: 0 4px 14px rgba(20,20,30,.08), 0 34px 70px rgba(20,20,30,.22); }
}

/* Boutons sous les cartes */
.svc-hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.svc-hero-btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1.15rem 2.4rem; border-radius: 999px; font-size: 1rem; font-weight: 700; text-decoration: none; transition: filter .2s ease, background-color .2s ease; }
.svc-hero-btn-primary { background: #fff; color: #1d1d1f; }
.svc-hero-btn-primary:hover { background: #f1f1f4; }
.svc-hero-btn-urgent { background: #e00; color: #fff; }
.svc-hero-btn-urgent:hover { filter: brightness(1.1); }

@media (min-width: 901px) {
  /* La photo du héro s'étend elle-même sous le bloc CTA (pas de 2e photo) : on l'étire vers le bas via le padding,
     et le bloc CTA vient la recouvrir en négatif (voir site-footer.css, .svc-hero + .site-cta-photo) au lieu
     d'afficher sa propre image. Seulement sur les 5 pages service (celles qui ont ce bloc CTA juste après) —
     pas sur les sous-pages "en savoir plus" (.svc-detail juste après, voir plus bas), dont le héro reste à sa
     hauteur normale. */
  .svc-hero:has(+ .site-cta.site-cta-photo) { padding-bottom: 320px; }

  /* Même hauteur de carte que la référence validée : les 3 « packs » de la page Bornes */
  .svc-card { min-height: 676px; padding: 2.5rem 2.25rem 2.25rem; } /* 676px = hauteur mesurée des 3 packs de la page Bornes (380px de large) */
  /* Sans la liste ni les pastilles, le contenu (icône, titre, phrase, lien) est centré dans la hauteur de la carte au lieu de coller en haut avec le lien tout en bas */
  .svc-card { justify-content: center; }
  .svc-card-link { margin-top: 1.75rem; }
  /* Pages sans mise en avant (data-cards-flat : pas de zoom sur la carte du milieu) : taille des packs « latéraux » de la page Bornes
     (Essentiel / Performance, 380×676 réduits à 92 %) = 350×622, et non celle du pack Confort mis en avant. */
  .svc-cards[data-cards-flat] .svc-card { max-width: 350px; min-height: 622px; }
  /* Symbole et texte à la même taille que la référence (icône du simulateur) : les cartes plus hautes ne doivent
     pas laisser un petit symbole perdu dans le vide */
  .svc-card-icon { width: 92px; height: 92px; border-radius: 26px; margin-bottom: 1.5rem; }
  .svc-card-icon svg { width: 48px; height: 48px; }
  .svc-card-title { font-size: 1.6rem; margin-bottom: .75rem; }
  .svc-card-text { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }
}

/* Sous-pages "en savoir plus" (15 fiches détail) : fond blanc classique (demande explicite) — la photo floutée
   reste seulement dans le héro, pas de fond sombre ni de photo continue derrière le contenu. Les encarts gris
   #f1f1f4 gardent leur couleur d'origine, contraste normal sur fond blanc. */
@media (min-width: 901px) {
  /* Alignement des cartes entre les 2 colonnes de .svc-detail-card : une colonne avec 1 carte et l'autre avec
     2 cartes empilées n'ont pas la même hauteur totale par défaut — la dernière carte de chaque colonne
     s'étire (flex:1) pour que le bas des deux colonnes s'aligne, au lieu de laisser un décalage. */
  .svc-detail-card > div { display: flex; flex-direction: column; }
  .svc-detail-card > div > :is(div, ul):last-child { flex: 1; }
}

@media (max-width: 900px) {
  .svc-hero { padding: 110px 1.25rem 3.5rem !important; }
  .svc-hero-title { margin-bottom: 2rem; }
  /* Carrousel horizontal (swipe) comme les packs de bornes-irve.html, au lieu de cartes empilées verticalement */
  .svc-cards { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1.25rem; padding: .25rem 36px 1rem; scroll-padding: 0 36px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .svc-cards::-webkit-scrollbar { display: none; }
  .svc-card { flex: 0 0 100%; max-width: none; padding: 1.5rem 1.35rem; border-radius: 20px; scroll-snap-align: center; }
  /* Même taille que la carte du pack Bornes au centre du carrousel (343×643 px) : icône, titre et texte au gabarit ordinateur, lien en bas */
  .svc-card { min-height: 643px; padding: 2rem 1.5rem 1.75rem; justify-content: center; } /* contenu centré dans la carte (pas de photo en haut comme les packs) : pas de grand vide sous le lien */
  .svc-card-link { margin-top: 1.25rem; }
  .svc-card-icon { width: 92px; height: 92px; border-radius: 26px; margin-bottom: 1.5rem; }
  .svc-card-icon svg { width: 48px; height: 48px; }
  .svc-card-title { font-size: 1.6rem; margin-bottom: .75rem; }
  .svc-card-text { font-size: 1.05rem; line-height: 1.6; margin-bottom: 1.5rem; }
  /* Photo continue : le héro s'étire sous le bloc CTA qui le recouvre (marge négative) au lieu d'afficher sa propre 2e photo en bas.
     Le CTA garde un fondu vers la couleur du footer, donc une hauteur de texte un peu différente ne laisse jamais de bande claire. */
  .svc-hero:has(+ .site-cta.site-cta-photo) { padding-bottom: 26rem !important; }
  .svc-hero + .site-cta.site-cta-photo { margin-top: -22rem; background: linear-gradient(to bottom, transparent 0%, var(--footer-bg, #192538) 100%); }
  .svc-hero-actions { flex-direction: column; margin-top: 2rem; }
  .svc-hero-btn { justify-content: center; }
  /* Sous-pages "en savoir plus" : la grille 2 colonnes (style inline par page) passe à 1 colonne — sinon
     chaque colonne est écrasée sur une largeur minuscule sur mobile. Le décalage margin-top inline (en px),
     utilisé pour aligner le haut de la 2e colonne sur le bas de la 1re en desktop, n'a plus lieu d'être en
     1 colonne (demande explicite : "trop d'espace"/"pas centré"). */
  .svc-detail-card { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .svc-detail-card > div:nth-child(2) > h3:first-child { margin-top: 0 !important; }
  /* Hauteur fixe inline (construction-neuve.html) pensée pour la colonne desktop : en 1 colonne mobile, le
     contenu doit pouvoir définir sa propre hauteur, sinon il dépasse du cadre ("ça sort des cartes"). */
  .svc-detail-card [style*="height:284px"] { height: auto !important; }
}

/* Déroulement / étapes (sous-pages) : sur mobile, les étapes deviennent des cartes qu'on fait glisser, chacune avec sa couleur
   (mêmes teintes que les packs de la page Bornes) ; sur ordinateur, rien ne change. */
@media (max-width: 900px) {
  .steps-card { background: transparent !important; padding: 0 !important; border-radius: 0 !important; margin-left: -1.25rem; margin-right: -1.25rem; }
  .steps-swipe { flex-direction: row !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: .25rem 1.25rem 1rem !important; scroll-padding: 0 1.25rem; }
  .steps-swipe::-webkit-scrollbar { display: none; }
  .steps-swipe > div { flex: 0 0 82% !important; flex-direction: column !important; gap: .9rem !important; scroll-snap-align: center; border-radius: 20px; padding: 1.5rem 1.35rem; min-height: 190px; background: #e6f2ff; }
  .steps-swipe > div:nth-child(4n+2) { background: #e3f8ec; }
  .steps-swipe > div:nth-child(4n+3) { background: #fff1e3; }
  .steps-swipe > div:nth-child(4n+4) { background: #efeaff; }
  .steps-swipe > div:nth-child(4n+2) > div:first-child { background: #12b85a !important; }
  .steps-swipe > div:nth-child(4n+3) > div:first-child { background: #f5820b !important; }
  .steps-swipe > div:nth-child(4n+4) > div:first-child { background: #7a5af8 !important; }
}

/* ── Cartes des pages service : moitié photo (en haut, hauteur fixe), moitié blanc (titre, phrase, lien), par-dessus le fond photo flouté du héro.
   La photo de chaque carte est donnée par --card-img / --card-pos dans la page ; le symbole n'est plus affiché sur ces cartes.
   Hauteur de photo fixe + texte qui démarre juste dessous : titres alignés d'une carte à l'autre, aucun chevauchement possible. ── */
.svc-card { --photo-h: 310px; position: relative; overflow: hidden; justify-content: flex-start; padding: calc(var(--photo-h) + 1.4rem) 2rem 2rem; }
/* Colorimétrie commune : les photos viennent de sources différentes (nuit bleutée, plein jour doré, noir et blanc) ; on les désature un peu et on
   passe un même voile chaud par-dessus pour qu'elles aient toutes la même ambiance. Un réglage unique pour toutes les cartes. */
.svc-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--photo-h); background: linear-gradient(rgba(58,44,30,.16), rgba(58,44,30,.16)), var(--card-img) var(--card-pos, center) / cover no-repeat; filter: var(--card-filter, saturate(.72) contrast(1.04) brightness(.97)); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
a.svc-card:hover::before { transform: scale(1.04); transform-origin: center top; }
.svc-card > * { position: relative; }
.svc-card-icon { display: none; }
.svc-card-link { margin-top: auto; padding-top: 1.25rem; }
@media (max-width: 900px) {
  .svc-card { padding: calc(var(--photo-h) + 1.4rem) 1.5rem 1.75rem; }
}

/* ── Sous-pages de service (modèle clair, ex. Extension & dépendance). Héro = titre et présentation à gauche, plan de l'extension à droite (fond blanc sur blanc,
   fondu à gauche) — uniquement à la hauteur du héro. ── */
.sp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; gap: 0 2rem; background: #fff; padding: 200px var(--edg-gutter) 2rem; }
.sp-hero-head { grid-column: 1; grid-row: 1; position: relative; z-index: 2; } /* le titre (une seule ligne) peut déborder sur la zone du plan, qui est un fond clair en fondu */
.sp-hero-text { grid-column: 1; grid-row: 2; max-width: 540px; position: relative; z-index: 2; }
.sp-hero-plan { grid-column: 2; grid-row: 1 / span 2; align-self: start; position: relative; margin-right: calc(-1 * var(--edg-gutter)); margin-top: -2.5rem; } /* le plan va jusqu'au bord droit de l'écran */
.sp-hero-plan img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; filter: brightness(1.04); } /* le blanc cassé du plan disparaît dans le blanc de la page */
.sp-hero-plan::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 28%); }
.sp-title { font-size: clamp(2.25rem, 4.6vw, 4rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: #1d1d1f; margin: 0 0 .75rem; white-space: nowrap; }
.sp-tagline { font-size: 1.15rem; color: #5f5f64; line-height: 1.6; margin: 0 0 1.5rem; }
@media (max-width: 900px) {
  /* Mobile : titre et sous-titre posés SUR le dessin (même case de grille), sans voile ; le paragraphe suit dessous */
  .sp-hero { display: grid; grid-template-columns: 1fr; padding: 90px 1.25rem 1rem; }
  .sp-hero-head { grid-area: 1 / 1; z-index: 2; align-self: center; padding: 1.5rem 0; }
  .sp-hero-plan { grid-area: 1 / 1; align-self: stretch; margin: 0 -1.25rem; }
  .sp-hero-plan img { height: 100%; width: 100%; object-fit: cover; object-position: 78% 50%; }
  .sp-hero-plan::before { display: none; } /* pas de fondu : le dessin reste net derrière le texte */
  .sp-hero-head .sp-title, .sp-hero-head .sp-tagline { max-width: 78%; }
  .sp-hero-text { grid-row: 2; max-width: none; }
  .sp-title { white-space: normal; }
  .sp-tagline { margin-bottom: 0; }
}
  /* ── Extension & dépendance : contenu en style « plan d'architecte » — pas de cartes grises, filets fins et bleu du site, comme le héro. ── */
/* Rythme de la page : 4 sections qui alternent blanc / gris clair, même hauteur d'espace partout (5rem), même en-tête (libellé, titre, phrase). */
.sp-sec { padding: 5rem var(--edg-gutter); background: #fff; }
.sp-sec-types { padding-top: 2rem; }
.sp-sec-details { background: #f1f1f4; }
.sp-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #178bff; margin: 0 0 .9rem; }
.sp-h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.1; color: #1d1d1f; margin: 0 0 3rem; }
.sp-h2:has(+ .sp-lead) { margin-bottom: .9rem; }
.sp-lead { font-size: 1.05rem; color: #5f5f64; line-height: 1.6; margin: 0 0 3rem; max-width: 620px; }
.sp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: start; }
.sp-split .sp-h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 2rem; }
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.sp-list li { display: flex; align-items: center; gap: 1.2rem; font-size: 1.05rem; color: #1d1d1f; line-height: 1.4; }
.sp-num { display: grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; color: #178bff; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-equip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 1.75rem 1.5rem; }
.sp-eq { display: flex; flex-direction: column; gap: .25rem; }
.sp-eq svg { box-sizing: content-box; padding: 12px; border-radius: 14px; background: #fff; margin-bottom: .75rem; align-self: flex-start; transition: transform .45s cubic-bezier(.16,1,.3,1); }
.sp-eq:hover svg { transform: translateY(-3px); }
.sp-eq strong { font-size: 1rem; font-weight: 600; color: #1d1d1f; line-height: 1.25; }
.sp-eq span { font-size: .88rem; color: #5f5f64; line-height: 1.4; }
.sp-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.75rem; }
.sp-photo { aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #f1f1f4; margin-bottom: 1.25rem; }
.sp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.sp-type:hover .sp-photo img { transform: scale(1.05); }
.sp-type h3, .sp-step h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #1d1d1f; margin: 0 0 .5rem; }
.sp-type p, .sp-step p { font-size: .98rem; color: #5f5f64; line-height: 1.65; margin: 0; }
.sp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1.75rem; }
.sp-step-n { display: block; font-size: 3.5rem; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #cfe3ff; margin-bottom: 1rem; }
@media (max-width: 900px) {
  .sp-sec { padding: 3rem 1.25rem; }
  .sp-sec-types { padding-top: 1.5rem; }
  .sp-split { grid-template-columns: 1fr; gap: 3rem; }
  .sp-types, .sp-steps { gap: 2rem 1.5rem; }
}
  
/* Variante : photo à droite du héro (au lieu du plan) — fondu sur la gauche et vers le bas, pour qu'elle se pose sur le fond blanc */
.sp-hero-img img { mix-blend-mode: normal; filter: none; height: 520px; object-fit: cover; object-position: var(--hero-pos, 50% 50%); -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 70%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 34%), linear-gradient(to bottom, #000 70%, transparent 100%); mask-composite: intersect; }
.sp-hero-img::before { display: none; }
.sp-photo img { object-position: var(--pos, 50% 50%); }
@media (max-width: 900px) { .sp-hero-img img { height: 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 70%, transparent 100%); } }

/* Sous-pages de service, version courte : héro, puis photo + équipements côte à côte, puis la méthode dans une carte sombre (comme les blocs sombres du site). */
.sp-sec-short { padding: 3rem var(--edg-gutter) 2rem; }
.sp-sec-short + .sp-sec-short { padding-top: 2rem; padding-bottom: 5rem; }
.sp-showcase { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
.sp-showcase-photo { border-radius: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #fff;
  /* fondu blanc sur le haut et les deux côtés, pas en bas : la photo se fond dans le fond blanc de la page, le bas reste net */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 8px);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%), linear-gradient(to bottom, transparent 0, #000 8px); mask-composite: intersect; }
.sp-showcase-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.sp-showcase .sp-h2 { margin-bottom: 1.75rem; }
.sp-equip-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; }
.sp-equip-2 .sp-eq { flex-direction: row; align-items: center; gap: .9rem; }
.sp-equip-2 .sp-eq svg { margin: 0; background: #eef5ff; flex-shrink: 0; }
.sp-equip-2 .sp-eq > div { display: flex; flex-direction: column; gap: .15rem; }
.sp-process { background: #1d1d1f; color: #fff; border-radius: 28px; padding: 3rem 3.25rem; }
.sp-process .sp-eyebrow { color: #6db5ff; }
.sp-process .sp-h2 { color: #fff; margin-bottom: 2rem; }
.sp-process .sp-step-n { color: rgba(255,255,255,.22); font-size: 2.75rem; margin-bottom: .75rem; }
.sp-process .sp-step h3 { color: #fff; }
.sp-process .sp-step p { color: rgba(255,255,255,.68); }
@media (max-width: 900px) {
  .sp-sec-short { padding: 2rem 1.25rem 1rem; }
  .sp-sec-short + .sp-sec-short { padding-bottom: 3rem; }
  .sp-showcase { grid-template-columns: 1fr; gap: 1.75rem; }
  .sp-equip-2 { grid-template-columns: 1fr; }
  .sp-process { padding: 2rem 1.5rem; border-radius: 22px; }
}
.sp-showcase-rev .sp-showcase-photo { order: 2; }
@media (max-width: 900px) { .sp-showcase-rev .sp-showcase-photo { order: 0; } }
.sp-sec-short + .sp-sec-short { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.sp-sec-short:last-of-type { padding-bottom: 5rem; }
html { scroll-behavior: smooth; }
.sp-sec-short[id] { scroll-margin-top: 70px; }

/* Les 3 types d'installation en onglets : un seul visible à la fois (photo + équipements), les deux autres un clic plus loin. */
.sp-tabs { display: flex; width: fit-content; margin-left: auto; margin-right: auto; gap: .35rem; padding: .35rem; background: #f1f1f4; border-radius: 999px; margin-bottom: 2.5rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab { flex-shrink: 0; border: 1.5px solid transparent; background: none; padding: var(--btn-md-pad); border-radius: 999px; font-family: inherit; font-size: var(--btn-md-font); font-weight: 700; line-height: 1.2; color: #5f5f64; cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.sp-tab:hover { color: #1d1d1f; }
.sp-tab[aria-selected="true"] { background: #178bff; color: #fff; transform: scale(1.07); position: relative; z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.12); } /* petite ombre neutre, serrée (pas de halo coloré) : le bouton choisi se décolle légèrement du bloc gris */
.sp-panel[hidden] { display: none; }
.sp-panel:not([hidden]) { animation: sp-panel-in .45s cubic-bezier(.16,1,.3,1); }
@keyframes sp-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Héro centré, sans photo (page de gamme) : libellé bleu, grand titre, sous-titre gris, comme les titres de section du site. */
.sp-hero-center { text-align: center; background: #fff; padding: 190px var(--edg-gutter) 1rem; }
.sp-hero-center .sp-eyebrow { margin-bottom: 1.1rem; }
.sp-hero-center .sp-title { white-space: normal; font-size: clamp(2.4rem, 5vw, 4.25rem); margin: 0 auto 1.25rem; }
.sp-hero-center .sp-tagline { max-width: 640px; margin: 0 auto; font-size: 1.15rem; }
@media (max-width: 900px) { .sp-hero-center { padding: 120px 1.25rem 0; } .sp-hero-center .sp-title { font-size: clamp(2.1rem, 9vw, 3rem); } }

/* Liste à coches (pages de gamme en onglets) */
.sp-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
@media (max-width: 900px) { .sp-checks { grid-template-columns: 1fr; } }
.sp-checks li { display: flex; align-items: flex-start; gap: .75rem; font-size: 1rem; color: #1d1d1f; line-height: 1.45; }
/* Mobile : plus de longue barre grise — des boutons séparés sur une seule ligne qu'on fait glisser. La rangée va d'un bord à l'autre de l'écran : les boutons voisins sont coupés par le bord, à gauche et à droite, ce qui montre qu'il y en a d'autres. L'onglet choisi est recentré (script de chaque page). */
@media (max-width: 900px) {
  .sp-tabs { width: calc(100% + 2.5rem); max-width: none; margin-left: -1.25rem; margin-right: -1.25rem; background: none; border-radius: 0; justify-content: flex-start; gap: .5rem; padding: .5rem 1.25rem; scroll-behavior: smooth; }
  .sp-tab { background: #f1f1f4; }
  .sp-tab[aria-selected="true"] { background: #178bff; }
}

/* Petits symboles devant chaque prestation : l'œil les parcourt plus vite qu'une liste de coches */
.sp-checks li { align-items: center; gap: .9rem; }
.sp-ic { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #eef5ff; display: grid; place-items: center; }

/* Listes à symboles avec titre + courte phrase (page À propos) : une seule colonne, deux lignes par entrée */
.sp-checks-1 { grid-template-columns: 1fr; gap: 1.25rem; }
.sp-checks li strong { display: block; font-size: 1rem; font-weight: 700; color: #1d1d1f; }
.sp-checks li small { display: block; font-size: .9rem; color: #5f5f64; line-height: 1.5; margin-top: .15rem; }
/* Mobile : plus d'air entre le dernier bloc de la page et le bandeau d'appel à l'action (comme sur les pages de simulateur) */
@media (max-width: 900px) {
  .sp-sec-short:not(:has(~ .sp-sec-short)):has(~ .site-cta) { padding-bottom: 4.5rem; }
}

/* Bannière des pages de service : fondu gris en haut de page (même que les estimations) qui se termine en blanc, logo et menu blancs dessus */
.sp-banner.site-hero-wrap { --site-hero-end: #fff; }
.sp-banner + .sp-hero-center { padding-top: 2.5rem; }
@media (max-width: 900px) { .sp-banner + .sp-hero-center { padding-top: 1.5rem; } }
/* Mobile : la bannière fait la hauteur du menu + un fondu court (la règle de 380 px des anciens héros photo, posée dans chaque page, créait un grand vide blanc entre le logo et le titre) */
@media (max-width: 900px) {
  /* le dégradé de la bannière est recalculé en pourcentages : il se termine exactement en blanc au bas de la bannière (sinon la coupure à 110 px laissait un trait net) */
  .sp-banner.site-hero-wrap { height: 130px !important; background: linear-gradient(180deg, #7a7a7f 0%, #818186 11%, #8f8f94 22%, #a3a3a8 35%, #bbbbbf 50%, #d3d3d7 64%, #e6e6e9 79%, #fff 100%) !important; }
  .sp-banner .site-hero-smoke { height: 100% !important; }
}

/* ── Pages de référencement générées (communes, temps de charge : scripts/generate-seo-pages.mjs) ── */
.seo-crumbs { font-size: .85rem; color: #5f5f64; margin: 0 0 1.5rem; }
.seo-crumbs a { color: #5f5f64; text-decoration: none; } .seo-crumbs a:hover { text-decoration: underline; }
.seo-services li strong a { color: #1d1d1f; text-decoration: none; } .seo-services li strong a:hover { color: #178bff; }
.seo-communes { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.seo-communes a { padding: .65rem 1.1rem; border-radius: 999px; background: #f1f1f4; color: #1d1d1f; font-size: .9rem; font-weight: 600; text-decoration: none; transition: background .2s ease, color .2s ease; }
.seo-communes a:hover { background: #178bff; color: #fff; }
.seo-h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; margin: 2rem 0 .75rem; color: #1d1d1f; }
.seo-note { font-size: .875rem; color: #5f5f64; line-height: 1.6; margin: 1.25rem 0 0; max-width: 760px; }
.seo-table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.seo-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.seo-table th { text-align: left; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5f5f64; padding: .75rem 1rem; border-bottom: 2px solid #1d1d1f; }
.seo-table td { padding: .9rem 1rem; border-bottom: 1px solid #e5e5ea; color: #1d1d1f; }
.seo-table td a { color: #178bff; font-weight: 600; text-decoration: none; }
.seo-table .seo-dc td { background: #eef5ff; font-weight: 600; }
.seo-faq { max-width: 860px; margin: 0 auto; }
.seo-faq details { background: #fff; border-radius: 14px; margin-bottom: .75rem; padding: 0 1.4rem; }
.seo-faq summary { cursor: pointer; padding: 1.15rem 0; font-weight: 700; font-size: 1.02rem; list-style: none; }
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after { content: "+"; float: right; color: #178bff; font-size: 1.4rem; line-height: 1; }
.seo-faq details[open] summary::after { content: "–"; }
.seo-faq p { margin: 0 0 1.25rem; color: #5f5f64; line-height: 1.7; }
@media (max-width: 900px) { .seo-table { font-size: .85rem; } .seo-table th, .seo-table td { padding: .7rem .6rem; } }
.seo-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0 0 2rem; max-width: 720px; }
.seo-stats > div { background: #f1f1f4; border-radius: 16px; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .25rem; }
.seo-stats strong { font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: #1d1d1f; line-height: 1.1; }
.seo-stats span { font-size: .85rem; color: #5f5f64; }
@media (max-width: 900px) { .seo-stats { grid-template-columns: 1fr 1fr 1fr; gap: .6rem; } .seo-stats strong { font-size: 1.1rem; } .seo-stats > div { padding: .9rem .7rem; } }
.seo-meta { margin-top: 1.25rem; font-size: .85rem; color: #5f5f64; }
.seo-article { max-width: 760px; }
.seo-article h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; color: #1d1d1f; margin: 2.5rem 0 .9rem; }
.seo-article p { font-size: 1.02rem; line-height: 1.8; color: #3a3a3c; margin: 0 0 1.1rem; }
.seo-article ul { margin: 0 0 1.25rem; padding-left: 1.25rem; } .seo-article li { font-size: 1.02rem; line-height: 1.7; color: #3a3a3c; margin-bottom: .45rem; }
.seo-keypoints { background: #f1f1f4; border-radius: 18px; padding: 1.5rem 1.75rem; margin: 2.5rem 0 1.75rem; } .seo-keypoints strong { display: block; margin-bottom: .6rem; color: #1d1d1f; } .seo-keypoints ul { margin: 0; }
.seo-cta { background: #1d1d1f; color: #fff; border-radius: 22px; padding: 2rem 2rem 2.1rem; margin: 0 0 2rem; } .seo-cta p { color: #fff; font-size: 1.15rem; font-weight: 700; line-height: 1.4; margin: 0 0 1.25rem; }
.seo-sources { font-size: .85rem; color: #5f5f64; } .seo-sources strong { display: block; margin-bottom: .4rem; } .seo-sources ul { padding-left: 1.1rem; margin: 0; } .seo-sources li { font-size: .85rem; line-height: 1.6; margin-bottom: .2rem; } .seo-sources a { color: #5f5f64; }
.seo-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; }
.seo-post { display: flex; flex-direction: column; gap: .6rem; background: #f1f1f4; border-radius: 22px; padding: 1.75rem; text-decoration: none; color: #1d1d1f; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.seo-post:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,20,30,.12); }
.seo-post strong { font-size: 1.2rem; line-height: 1.3; letter-spacing: -.02em; } .seo-post-cat { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #178bff; }
.seo-post-desc { font-size: .95rem; line-height: 1.6; color: #5f5f64; flex: 1; } .seo-post-meta { font-size: .8rem; color: #5f5f64; }
@media (max-width: 900px) { .seo-posts { grid-template-columns: 1fr; } .seo-cta { padding: 1.5rem; } }

/* Accessibilité : contrastes (rapport ≥ 4,5:1) — gris de texte un peu plus foncé et bleu de texte plus soutenu pour les petits libellés. Le bleu de marque #178bff reste celui des boutons et des icônes. */
.sp-lead, .sp-tagline, .seo-note, .seo-communes a, .seo-post-desc, .seo-post-meta, .seo-sources, .seo-sources a, .seo-crumbs, .seo-crumbs a, .seo-stats span, .seo-meta { color: #636366; }
.sp-eyebrow, .seo-post-cat { color: #178bff; }
.seo-table td a { color: #178bff; }
/* Mises en page des pages générées : grilles côte à côte sur ordinateur, pile sur mobile (voir scripts/seo-templates.mjs) */
.seo-grey { background: #f1f1f4; }
.seo-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; }
.seo-split-table { grid-template-columns: 1.7fr 1fr; }
.seo-split-faq { grid-template-columns: 1fr 1.6fr; }
.seo-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.seo-tile { display: flex; flex-direction: column; gap: .35rem; background: #f1f1f4; border-radius: 20px; padding: 1.5rem; text-decoration: none; color: #1d1d1f; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.seo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,20,30,.1); }
.seo-tile .sp-ic { margin-bottom: .6rem; background: #fff; }
.seo-tile strong { font-size: 1.05rem; line-height: 1.3; letter-spacing: -.01em; }
.seo-tile small { font-size: .9rem; color: #636366; line-height: 1.5; }
.seo-grey .seo-stats > div { background: #fff; }
.seo-stats { max-width: none; }
.seo-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: .9rem; align-items: stretch; margin: 0; }
.seo-aside p { margin: 0 0 .25rem; }
.seo-aside .btn { width: 100%; }
.seo-aside-text { font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.8); margin-bottom: .5rem; }
.btn-white { background: #fff; color: #1d1d1f; }
.seo-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.seo-btn-ghost:hover { background: rgba(255,255,255,.12); }
.seo-split-faq .sp-h2 { margin-bottom: 0; }
.seo-grey .seo-faq details { background: #fff; }
.seo-article-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 4rem; align-items: start; }
.seo-article-wrap .seo-article { max-width: 780px; }
.seo-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.25rem; }
.seo-side .seo-keypoints, .seo-side .seo-cta { margin: 0; }
@media (max-width: 1100px) { .seo-article-wrap { grid-template-columns: 1fr; } .seo-side { position: static; } }
@media (max-width: 900px) { .seo-split, .seo-split-table, .seo-split-faq { grid-template-columns: 1fr; gap: 2rem; } .seo-grid3 { grid-template-columns: 1fr 1fr; } .seo-aside { position: static; } }
@media (max-width: 560px) { .seo-grid3 { grid-template-columns: 1fr; } }
/* Pages sombres (Bornes) : le bloc « Nos conseils » prend la couleur du bas de la photo et du footer */
.seo-dark { background: var(--footer-bg, #1c2028); padding-top: 3rem; padding-bottom: 3rem; }
.seo-dark .sp-h2 { color: #fff; }
.seo-dark .seo-communes a { background: rgba(255,255,255,.12); color: #fff; }
.seo-dark .seo-communes a:hover { background: #178bff; }
/* Pages commune : liste des besoins courants */
.seo-needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.seo-needs li { display: flex; flex-direction: column; gap: .2rem; padding-left: 1rem; border-left: 3px solid #178bff; }
.seo-needs strong { color: #1d1d1f; font-size: 1.05rem; }
.seo-needs span { color: #636366; line-height: 1.55; }
/* Blog : boutons des cartes toujours dans la carte, dernière rangée de cartes centrée */
.seo-cta .btn, .seo-aside .btn { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; padding-left: 1.2rem; padding-right: 1.2rem; }
.seo-posts { display: flex; flex-wrap: wrap; justify-content: center; }
.seo-posts .seo-post { flex: 0 0 calc((100% - 3rem) / 3); box-sizing: border-box; }
@media (max-width: 900px) { .seo-posts .seo-post { flex-basis: 100%; } }
/* Bouton d'urgence (rouge, comme sur la page Dépannage) */
.btn-urgence { background: #e00; color: #fff; }
.btn-urgence:hover { background: #c00; }
/* Article de blog : le texte occupe la colonne, plus de grand vide avant la colonne de droite */
.seo-article-wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; }
.seo-article-wrap .seo-article { max-width: none; }
/* Article de blog : texte lisible à gauche, puis « À retenir » et l'appel à l'action côte à côte sous l'article */
.seo-article-wrap { display: block; }
.seo-article-wrap .seo-article { max-width: 780px; }
.seo-article-wrap .seo-side { position: static; max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2.5rem; align-items: stretch; }
.seo-article-wrap .seo-side .seo-sources { grid-column: 1 / -1; }
.seo-article-wrap .seo-side .seo-cta { display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 700px) { .seo-article-wrap .seo-side { grid-template-columns: 1fr; } }
/* FAQ des pages commune : cartes plus hautes, texte avec de l'air en haut et en bas (largeur inchangée) */
.seo-faq summary { padding: 1.5rem 0; }
.seo-faq details p { margin: 0; padding: 0 0 1.75rem; }