/* =====================================================================
   SKGENIUS — pages de service
   ---------------------------------------------------------------------
   Registre : éditorial. La hiérarchie se construit avec la graisse,
   l'interlettrage, l'échelle et le vide — jamais avec un filet sous un
   titre, une bordure gauche ou basse, une pastille arrondie posée
   au-dessus d'un titre, une coche verte ou un titre centré.

   Grille : une colonne d'intitulé étroite à gauche, le contenu à droite.
   C'est cette asymétrie qui donne le ton, pas un ornement.
   Préfixe de classe : .sp-
   ===================================================================== */

/* ---------------------------------------------------------- en-tête --- */
.sp-tete{padding:56px 0 44px}
.sp-tete .sp-sur{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);font-weight:700;display:block;
  margin-bottom:22px}
.sp-tete h1{font-family:var(--disp);font-size:clamp(2.1rem,4.4vw,3.4rem);
  font-weight:800;line-height:1.06;letter-spacing:-.03em;color:var(--ink);
  max-width:19ch;margin:0}
.sp-tete .sp-chapo{margin-top:24px;max-width:62ch;font-size:1.12rem;
  line-height:1.62;color:var(--ink2)}
.sp-tete .sp-repere{margin-top:30px;display:flex;flex-wrap:wrap;gap:0 46px}
.sp-tete .sp-repere div{padding:0}
.sp-tete .sp-repere dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:700;margin-bottom:6px}
.sp-tete .sp-repere dd{margin:0;font-family:var(--disp);font-size:1.5rem;
  font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sp-tete .sp-repere dd .u{font-size:.86rem;font-weight:600;color:var(--ink2);
  letter-spacing:0;margin-left:3px}

/* ------------------------------------------------- section à grille --- */
.sp-sec{padding:52px 0}
.sp-g{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0 56px;
  align-items:start}
.sp-g>.sp-lab{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);font-weight:700;line-height:1.5;
  padding-top:9px}
.sp-g>.sp-lab .n{display:block;font-size:1.6rem;letter-spacing:-.02em;
  color:var(--line2);font-weight:800;margin-bottom:8px;font-family:var(--disp)}
.sp-h2{font-family:var(--disp);font-size:clamp(1.5rem,2.5vw,2.05rem);
  font-weight:800;line-height:1.16;letter-spacing:-.025em;color:var(--ink);
  margin:0 0 18px;max-width:24ch;text-align:left}
.sp-txt{max-width:66ch;color:var(--ink2);font-size:1.02rem;line-height:1.68}
.sp-txt p{margin:0 0 15px}
.sp-txt p:last-child{margin-bottom:0}
.sp-txt strong{color:var(--ink);font-weight:600}
.sp-txt a{color:var(--teal);font-weight:500}
.sp-txt a:hover{color:var(--signal)}

/* ---------------------------------------------- étapes numérotées --- */
.sp-etapes{list-style:none;margin:0;padding:0;counter-reset:e}
.sp-etapes li{counter-increment:e;display:grid;
  grid-template-columns:64px minmax(0,1fr);gap:0 22px;padding:20px 0 22px}
.sp-etapes li+li{background:linear-gradient(var(--line),var(--line)) top left/100% 1px no-repeat}
.sp-etapes li::before{content:counter(e,decimal-leading-zero);
  font-family:var(--disp);font-size:1.35rem;font-weight:800;color:var(--line2);
  letter-spacing:-.02em;line-height:1.3}
.sp-etapes h3{font-family:var(--disp);font-size:1.08rem;font-weight:700;
  color:var(--ink);margin:0 0 7px;line-height:1.35}
.sp-etapes p{margin:0;color:var(--ink2);font-size:.97rem;line-height:1.62;
  max-width:60ch}
.sp-etapes .sp-delai{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal);font-weight:700;
  display:block;margin-top:9px}

/* --------------------------------------------------- bloc tarifaire ---
   Un aplat plein, pas une carte à bordure. Le prix est traité comme un
   titre : c'est l'information la plus lue de la page.                   */
.sp-prix{background:var(--night);color:var(--on-dark);padding:44px 0 40px;
  margin:8px 0 0}
.sp-prix .sp-g>.sp-lab{color:rgba(231,242,243,.55)}
.sp-prix .sp-g>.sp-lab .n{color:rgba(231,242,243,.22)}
.sp-prix .sp-h2{color:#fff}
.sp-prix .sp-txt{color:rgba(231,242,243,.80)}
.sp-prix .sp-txt strong{color:#fff}
.sp-prix .sp-txt a{color:var(--teal-l)}
.sp-montants{display:flex;flex-wrap:wrap;gap:14px 54px;margin:0 0 24px}
.sp-montants div{margin:0}
.sp-montants dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(231,242,243,.55);font-weight:700;
  margin-bottom:8px}
.sp-montants dd{margin:0;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.03em;color:#fff;
  line-height:1}
.sp-montants dd .apd{display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--teal-l);margin-bottom:7px}
.sp-montants dd .dev{font-size:.9rem;font-weight:600;letter-spacing:0;
  color:rgba(231,242,243,.72);margin-left:4px}

/* ------------------------------------------- inclus / non inclus ---
   Deux colonnes de texte plein. Pas de coche, pas de croix, pas d'icône :
   c'est l'intitulé qui porte le sens.                                   */
.sp-perim{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 46px}
.sp-perim h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:700;margin:0 0 14px}
.sp-perim .oui h3{color:var(--teal)}
.sp-perim .non h3{color:var(--dim)}
.sp-perim ul{list-style:none;margin:0;padding:0}
.sp-perim li{padding:8px 0;font-size:.97rem;line-height:1.55;color:var(--ink2)}
.sp-perim li+li{background:linear-gradient(var(--line),var(--line)) top left/100% 1px no-repeat}
.sp-perim .oui li{color:var(--ink)}

/* -------------------------------------------------------- tableau --- */
.sp-tab{width:100%;border-collapse:collapse;margin:6px 0 0;font-size:.95rem}
.sp-tab caption{text-align:left;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding-bottom:12px}
.sp-tab th{text-align:left;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  font-weight:700;padding:0 18px 11px 0}
.sp-tab td{padding:12px 18px 12px 0;color:var(--ink2);line-height:1.5;
  vertical-align:top}
.sp-tab tbody tr:nth-child(odd) td{background:var(--paper2)}
.sp-tab tbody tr td:first-child{color:var(--ink);font-weight:600;
  padding-left:12px}
.sp-tab tbody tr td:last-child{padding-right:12px}

/* ----------------------------------------------------------- image ---
   Emplacement typé : rapport fixe, pas de cadre, pas d'ombre.
   La légende porte le crédit, elle n'est pas décorative.               */
.sp-fig{margin:0}
.sp-fig img{display:block;width:100%;height:auto;background:var(--paper3);
  aspect-ratio:16/7;object-fit:cover}
.sp-fig figcaption{margin-top:10px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.08em;color:var(--dim);line-height:1.5}

/* ------------------------------------------------------------- FAQ --- */
.sp-faq{margin:0}
.sp-faq details{padding:0;background:none}
.sp-faq details+details{margin-top:2px}
.sp-faq summary{cursor:pointer;list-style:none;padding:17px 44px 17px 18px;
  background:var(--paper2);font-family:var(--disp);font-weight:700;
  font-size:1rem;color:var(--ink);line-height:1.4;position:relative}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary::after{content:"";position:absolute;right:20px;top:50%;
  width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--dim);
  border-bottom:2px solid var(--dim);transform:rotate(45deg);
  transition:transform .22s}
.sp-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.sp-faq details[open] summary{background:var(--paper3)}
.sp-faq .rep{padding:16px 18px 22px;color:var(--ink2);font-size:.98rem;
  line-height:1.66;max-width:70ch;background:var(--paper2)}
.sp-faq .rep p{margin:0 0 12px}
.sp-faq .rep p:last-child{margin:0}

/* ----------------------------------------------------- deux portes ---
   « Je veux un devis » et « je veux parler à quelqu'un ». Aplats pleins,
   pas de carte flottante.                                              */
.sp-portes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  margin-top:10px}
.sp-porte{padding:32px 30px 30px;background:var(--paper2)}
.sp-porte.devis{background:var(--ink);color:var(--on-dark)}
.sp-porte h3{font-family:var(--disp);font-size:1.22rem;font-weight:800;
  margin:0 0 10px;letter-spacing:-.02em;line-height:1.25}
.sp-porte.devis h3{color:#fff}
.sp-porte p{margin:0 0 20px;font-size:.96rem;line-height:1.6;color:var(--ink2);
  max-width:42ch}
.sp-porte.devis p{color:rgba(231,242,243,.80)}
.sp-porte .lien{display:inline-block;font-family:var(--mono);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--teal)}
.sp-porte.devis .lien{color:var(--teal-l)}
.sp-porte .lien:hover{color:var(--signal)}
.sp-porte.devis .lien:hover{color:#fff}
.sp-porte .rep24{display:block;margin-top:14px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sp-porte.devis .rep24{color:rgba(231,242,243,.5)}

/* --------------------------------------------------- liens de silo --- */
.sp-liens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px}
.sp-liens a{display:block;padding:0}
.sp-liens a .t{display:block;font-family:var(--disp);font-size:1.02rem;
  font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:6px}
.sp-liens a .d{display:block;font-size:.92rem;color:var(--ink2);line-height:1.55}
.sp-liens a:hover .t{color:var(--teal)}

/* ------------------------------------------------------ responsive --- */
@media (max-width:900px){
  .sp-g{grid-template-columns:1fr;gap:0}
  .sp-g>.sp-lab{padding:0 0 14px}
  .sp-g>.sp-lab .n{display:inline;margin:0 10px 0 0;font-size:1rem}
  .sp-perim,.sp-portes,.sp-liens{grid-template-columns:1fr}
  .sp-liens{gap:22px}
  .sp-sec{padding:40px 0}
  .sp-tete{padding:40px 0 34px}
  .sp-montants{gap:20px 34px}
}
@media (max-width:560px){
  .sp-etapes li{grid-template-columns:1fr;gap:0}
  .sp-etapes li::before{display:block;margin-bottom:6px}
  .sp-tab{font-size:.9rem}
}

/* Sous-titre à l'intérieur d'une section, sous le .sp-h2. Ni filet ni bordure :
   la rupture se fait à la graisse et au blanc, comme partout ailleurs ici. */
.sp-h3{font-size:1.06rem;font-weight:700;color:var(--ink);
  margin:30px 0 10px;line-height:1.35;letter-spacing:-.005em}
.sp-txt .sp-h3:first-child{margin-top:0}