/* ═══════════════════════════════════════════════════════════════════════════
   SC2R — pages de prestation et de zone
   ═══════════════════════════════════════════════════════════════════════════

   Se charge APRES `legal.css`, dont il reprend tout : couleurs, polices,
   barre, pied de page, titres, listes. Ce fichier n'ajoute que les quelques
   composants que les pages legales n'avaient pas besoin d'avoir.

   POURQUOI CES PAGES N'UTILISENT PAS LE GABARIT DE LA PAGE D'ACCUEIL
   ------------------------------------------------------------------
   `index.html` pese 260 ko, embarque React, GSAP, un hero WebGL et une intro
   animee. C'est justifie pour une page d'accueil qui doit impressionner.
   Ca ne l'est pas pour une page qu'un visiteur atteint depuis Google avec une
   intention precise : il veut sa reponse, pas un spectacle.

   Ces pages font ~10 ko, zero script, zero dependance. Elles s'affichent
   instantanement, y compris en 4G dans un camion. C'est aussi un signal de
   performance que Google mesure (Core Web Vitals).

   ATTENTION EN CAS DE MODIFICATION
   --------------------------------
   Ne rien mettre ici qui change l'apparence des pages legales : elles
   chargent `legal.css` seul, mais une regle trop large recopiee un jour dans
   `legal.css` les casserait. Tout ce qui suit est prefixe par une classe.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───── Fil d'Ariane ─────
   Sert autant au visiteur qu'aux moteurs : il montre ou la page se situe et
   ramene vers l'accueil, qui est la page a positionner en priorite. */
.crumb{margin:0 0 18px;font-family:'JetBrains Mono',monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:#58585A}
.crumb a{color:#98989A;text-decoration:none}
.crumb a:hover{color:#EE1C25}
.crumb span{color:#58585A;padding:0 8px}

/* ───── Tableau de caracteristiques ─────
   Le registre du site est chiffre : epaisseurs, tonnages, portances. Ce
   tableau existe pour que ces valeurs soient lisibles d'un coup d'oeil
   plutot que noyees dans un paragraphe.
   `overflow-x:auto` sur l'enveloppe : sur un telephone, un tableau large
   defile DANS son cadre au lieu de faire deborder la page entiere. */
.specwrap{margin:20px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
.spec caption{text-align:left;font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:#98989A;padding-bottom:12px}
.spec th,.spec td{text-align:left;padding:11px 16px 11px 0;
  border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
.spec thead th{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:#98989A;font-weight:400;border-bottom-color:rgba(255,255,255,.24)}
.spec tbody th{color:#FFFFFF;font-weight:600;padding-right:24px}
.spec td{color:#D4D4D5}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}

/* ───── Chantier de reference ─────
   Un encadre sobre pour une operation reellement livree. Jamais d'exemple
   invente ici : ce bloc n'a de valeur que parce qu'il est verifiable. */
.ref{margin:24px 0 0;border-left:2px solid #EE1C25;background:#2A2A2C;
  padding:18px clamp(16px,2.2vw,24px)}
.ref p{margin:8px 0 0}
.ref p:first-child{margin-top:0}
.ref .meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:#98989A}

/* ───── Appel au devis ─────
   Une seule cible par page, en bas, apres la reponse. Le visiteur qui arrive
   de Google veut d'abord savoir s'il est au bon endroit. */
.cta{margin:clamp(38px,5vw,58px) 0 0;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12)}
.cta h2{margin:0;border:0;padding:0}
.cta .btns{margin:20px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.cta .btns a{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;
  font-family:'JetBrains Mono',monospace;font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none}
.cta .go{background:#EE1C25;color:#FFFFFF}
.cta .go:hover{color:#FFFFFF;transform:translateY(-1px)}
.cta .tel{border:1px solid rgba(255,255,255,.28);color:#FFFFFF}
.cta .tel:hover{border-color:#EE1C25;color:#EE1C25}

/* ───── Pages voisines ─────
   Le maillage interne. Chaque page renvoie vers celles qui traitent d'un
   sujet proche : le visiteur circule, et les moteurs comprennent que ces
   pages forment un ensemble coherent plutot qu'une collection d'isolats. */
.rel{margin:clamp(34px,4.5vw,52px) 0 0;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.12)}
.rel p.lbl{margin:0 0 14px;font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:#98989A}
.rel ul{flex-direction:row;flex-wrap:wrap;gap:9px 20px}
.rel li{display:inline}
.rel li::before{content:none}
.rel a{font-size:.92rem;color:#D4D4D5;text-decoration-color:rgba(255,255,255,.22)}
.rel a:hover{color:#EE1C25}

/* ───── Question / reponse ─────
   Les vraies questions posees au telephone. Alimente le schema FAQPage de la
   page, qui peut sortir en resultat enrichi. */
.qa{margin:22px 0 0}
.qa h3{margin:22px 0 0}
.qa h3:first-child{margin-top:0}