/* ============================================================================
   PAGES DE SERVICE — ce qui s'ajoute a olympus.css

   olympus.css apporte les jetons, la barre de navigation, le tiroir, les boutons
   et le pied de page, a l'identique de la page d'accueil : les pages de service
   ne reinventent pas la maison, elles s'y installent.

   Ici, uniquement ce que la page d'accueil n'a pas.
   ============================================================================ */

/* ── la page ────────────────────────────────────────────────────────────── */
.sv{background:#050506}
.sv main{display:block}

/* ── apparition au defilement ────────────────────────────────────────────
   IntersectionObserver plutot que GSAP : ces pages n'ont aucun defilement
   epingle, charger une bibliotheque d'animation pour un fondu serait payer
   cher un effet qui tient en six lignes. */
.rv{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.rv.vu{opacity:1;transform:none}
.rv-2{transition-delay:.08s} .rv-3{transition-delay:.16s} .rv-4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ── le heros ────────────────────────────────────────────────────────────
   Asymetrique : le titre a gauche, la preuve a droite. Centrer aurait donne
   la meme page quatre fois. */
.sv-hero{position:relative;min-height:100dvh;display:grid;align-items:center;
  padding:clamp(104px,13vh,150px) 0 clamp(64px,8vh,96px);overflow:hidden;isolation:isolate}
.sv-soie{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 96%)}
.sv-soie.on{opacity:.4}
.sv-hero .wrap{position:relative;z-index:1}
.sv-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(36px,5vw,80px);align-items:center}
.sv-h1{font-size:clamp(36px,4.9vw,64px);line-height:1.03;letter-spacing:-.04em;
  font-weight:800;color:var(--ink);max-width:17ch}
.sv-h1 em{font-family:'Playfair Display','Playfair secours',Georgia,serif;
  font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.01em;
  color:var(--gold);line-height:1.12;padding-bottom:.06em}
.sv-sub{margin-top:clamp(20px,2.4vh,30px);font-size:clamp(16px,1.3vw,19px);
  line-height:1.62;color:var(--ink-soft);max-width:46ch}
.sv-actes{margin-top:clamp(28px,3.4vh,42px);display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* la preuve du heros : une image reelle, jamais une maquette dessinee */
.sv-preuve{position:relative;border-radius:20px;overflow:hidden;
  border:1px solid rgba(210,162,117,.22);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.sv-preuve img,.sv-preuve video{display:block;width:100%;height:auto}
.sv-preuve.carre{aspect-ratio:4/5}
.sv-preuve.carre img,.sv-preuve.carre video{height:100%;object-fit:cover}

/* ── sections ────────────────────────────────────────────────────────── */
.sv-sec{padding:clamp(84px,11vh,148px) 0;position:relative}
.sv-sec.papier{background:#EFE8E2;
  --bg:#EFE8E2; --surface:#FBF8F5; --surface-2:#F3EDE7;
  --ink:#14130F; --ink-soft:#5E5A52; --gold:#8A6043; --gold-deep:#6E4B33;
  --line:rgba(20,19,15,.12); --line-2:rgba(20,19,15,.20);
  --grad:linear-gradient(160deg,#A57450,#6E4B33); color:var(--ink)}
.sv-h2{font-size:clamp(28px,3.6vw,50px);line-height:1.08;letter-spacing:-.033em;
  font-weight:700;color:var(--ink);max-width:18ch}
.sv-h2 em{font-family:'Playfair Display','Playfair secours',Georgia,serif;
  font-style:italic;font-weight:400;font-size:1.06em;color:var(--gold);
  line-height:1.12;padding-bottom:.06em}
.sv-lede{margin-top:18px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.65;
  color:var(--ink-soft);max-width:56ch}
.sv-tete{margin-bottom:clamp(40px,5vh,68px)}
.sv-tete.centre{text-align:center;margin-inline:auto;max-width:760px}
.sv-tete.centre .sv-h2{margin-inline:auto} .sv-tete.centre .sv-lede{margin-inline:auto}

/* ── la galerie des sites : tuiles reelles, tailles inegales ─────────────
   Un damier regulier aurait donne le catalogue. Deux grandes tuiles portent
   la section, les autres respirent autour. */
.sv-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,20px)}
.sv-tuile{position:relative;display:block;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-2);background:var(--surface-2);
  transition:transform .5s var(--ease-out), border-color .4s var(--ease)}
.sv-tuile img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease-out)}
.sv-tuile:hover{transform:translateY(-4px);border-color:var(--gold)}
.sv-tuile:hover img{transform:scale(1.04)}
.sv-tuile .lg{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  display:flex;align-items:baseline;gap:9px;color:#F4F1EC;font-size:14.5px;
  background:linear-gradient(180deg,transparent,rgba(6,5,7,.86))}
.sv-tuile .lg i{font-style:normal;font-size:12.5px;color:rgba(244,241,236,.6)}
.sv-t-a{grid-column:span 4;aspect-ratio:16/10}
.sv-t-b{grid-column:span 2;aspect-ratio:3/4}
.sv-t-c{grid-column:span 2;aspect-ratio:1/1}
.sv-t-d{grid-column:span 2;aspect-ratio:1/1}
.sv-t-e{grid-column:span 2;aspect-ratio:1/1}
.sv-t-f{grid-column:span 3;aspect-ratio:16/11}
.sv-t-g{grid-column:span 3;aspect-ratio:16/11}

/* ── le deroule : deux colonnes groupees, pas une liste a puces ─────────
   Plus de cinq lignes empilees sous un filet, c'est le tableau de specs que
   personne ne lit. Regroupees en paires, elles se lisent d'un coup d'oeil. */
.sv-flux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.4vw,56px) clamp(32px,4vw,72px)}
.sv-pas{display:grid;gap:11px;align-content:start}
.sv-pas h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.02em;font-weight:700;
  color:var(--ink);display:flex;align-items:center;gap:12px}
.sv-pas h3 svg{width:20px;height:20px;color:var(--gold);flex:none}
.sv-pas p{font-size:15.5px;line-height:1.66;color:var(--ink-soft);max-width:42ch}

/* ── ce qui est compris : trois blocs, pas dix lignes a filets ─────────── */
.sv-lots{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,2vw,28px)}
.sv-lot{padding:clamp(24px,2.6vw,34px);border-radius:20px;
  border:1px solid var(--line-2);background:var(--surface)}
.sv-lot h3{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink);
  margin-bottom:16px}
.sv-lot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sv-lot li{display:flex;gap:10px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.sv-lot li svg{width:16px;height:16px;color:var(--gold);flex:none;margin-top:3px}

/* ── l'illustration d'un resultat de recherche ─────────────────────────
   Ce n'est pas une capture, c'est un schema : on montre la place qu'occupe
   une annonce au-dessus des resultats. La legende le dit. */
.sv-serp{max-width:660px;margin-inline:auto;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-2);background:#FFFFFF;color:#202124;
  font-family:arial,sans-serif;box-shadow:0 40px 90px -60px rgba(0,0,0,.7)}
.sv-serp-barre{display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid #E8EAED}
.sv-serp-ch{flex:1;display:flex;align-items:center;gap:10px;padding:10px 16px;
  border:1px solid #DFE1E5;border-radius:24px;font-size:14.5px;color:#3C4043}
.sv-serp-ch svg{width:15px;height:15px;color:#9AA0A6;flex:none}
.sv-serp-res{padding:20px 22px 24px;display:grid;gap:22px}
.sv-serp-item{display:grid;gap:4px}
.sv-serp-spon{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:700;color:#202124}
.sv-serp-url{font-size:12.5px;color:#5F6368}
.sv-serp-t{font-size:19px;line-height:1.3;color:#1A0DAB;font-weight:400}
.sv-serp-d{font-size:13.5px;line-height:1.58;color:#4D5156;max-width:56ch}
.sv-serp-item.vous{position:relative}
.sv-serp-item.vous::before{content:"";position:absolute;left:-14px;top:-10px;bottom:-10px;
  width:3px;border-radius:2px;background:#8A6043}
.sv-serp-sep{height:1px;background:#E8EAED}
.sv-leg{margin-top:16px;text-align:center;font-size:14px;color:var(--ink-soft)}

/* ── la fiche Google ──────────────────────────────────────────────────── */
.sv-fiche{max-width:420px;margin-inline:auto;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);background:#FFFFFF;color:#202124;
  font-family:arial,sans-serif;box-shadow:0 40px 90px -60px rgba(0,0,0,.7)}
.sv-fiche-img{aspect-ratio:16/9;background:#EFE8E2;display:block;width:100%;object-fit:cover}
.sv-fiche-in{padding:18px 20px 22px;display:grid;gap:12px}
.sv-fiche-n{font-size:20px;font-weight:500;letter-spacing:-.01em}
.sv-fiche-note{display:flex;align-items:center;gap:8px;font-size:14px;color:#5F6368}
.sv-fiche-etoiles{display:inline-flex;gap:1px;color:#E7711B}
.sv-fiche-etoiles svg{width:15px;height:15px}
.sv-fiche-l{display:flex;gap:10px;font-size:14px;color:#3C4043;line-height:1.5}
.sv-fiche-l svg{width:16px;height:16px;color:#5F6368;flex:none;margin-top:2px}
.sv-fiche-l b{font-weight:700;color:#188038}
.sv-fiche-btn{display:flex;gap:8px;margin-top:4px}
.sv-fiche-btn span{flex:1;text-align:center;padding:9px 0;border-radius:20px;
  font-size:13.5px;font-weight:500;border:1px solid #DADCE0;color:#1A73E8}
.sv-fiche-btn span.plein{background:#1A73E8;color:#fff;border-color:#1A73E8}

/* ── le rappel final ─────────────────────────────────────────────────── */
.sv-fin{text-align:center}
.sv-fin .sv-h2{margin-inline:auto} .sv-fin .sv-lede{margin-inline:auto}
.sv-fin .sv-actes{justify-content:center;margin-top:34px}

/* ── telephone ───────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sv-grille{grid-template-columns:1fr;gap:clamp(30px,5vh,46px)}
  .sv-h1{max-width:none}
  .sv-flux{grid-template-columns:1fr}
  .sv-lots{grid-template-columns:1fr}
  .sv-gal{grid-template-columns:repeat(2,1fr)}
  .sv-t-a,.sv-t-f,.sv-t-g{grid-column:span 2;aspect-ratio:16/10}
  .sv-t-b,.sv-t-c,.sv-t-d,.sv-t-e{grid-column:span 1;aspect-ratio:1/1}
}
@media(max-width:640px){
  .sv-hero{min-height:auto;padding:clamp(96px,14vh,124px) 0 clamp(48px,7vh,72px)}
  .sv-actes{width:100%}
  .sv-actes > *{flex:1 1 auto;justify-content:center}
  .sv-serp{font-size:.94em}
}


/* ============================================================================
   LE VOILE DU TIROIR.

   Il manquait sur les quatre pages de service, et ce n'etait pas qu'un defaut
   visuel : service.js commence par
       if(!burg||!panel||!back) return;
   Sans l'element #drawerBack, le script sortait AVANT d'attacher le moindre
   ecouteur. Le burger ne faisait donc rien du tout, le tiroir restait decale de
   377 px hors de l'ecran, et aucun lien de menu n'etait atteignable depuis une
   page de service. Sur telephone, ou le tiroir est la seule navigation, ca voulait
   dire qu'on ne pouvait plus quitter la page autrement qu'avec le bouton retour.

   Les regles ci-dessous sont copiees a l'identique de la page d'accueil : le
   comportement doit etre rigoureusement le meme d'une page a l'autre.
   ============================================================================ */
.drawer-back{position:fixed;inset:0;z-index:90;background:rgba(3,3,4,.72);
  opacity:0;visibility:hidden;
  transition:opacity .2s linear,visibility .2s linear}
.nav-open .drawer-back{opacity:1;visibility:visible;
  transition:opacity .26s linear,visibility .26s linear}

/* ============================================================================
   LE FORMULAIRE DÉDIÉ DES PAGES DE SERVICE.

   Il vit dans la section finale, qui est sur PAPIER (#EFE8E2) et non sur le fond
   sombre du reste de la page. Toutes les couleurs sont donc celles du mode clair :
   encre sur papier, et surtout pas l'inverse. Je m'étais trompé au premier essai
   en reprenant les valeurs du thème sombre — les champs étaient blancs sur blanc
   et les libellés invisibles.

   Deux partis pris de forme :
   — les champs font 52 px de haut et le texte 16 px. En dessous de 16, Safari sur
     iPhone zoome tout seul dès qu'on tape, la page saute, et on perd des gens sur
     ce simple saut ;
   — l'erreur s'affiche SOUS le champ concerné, jamais groupée en tête. Une erreur
     en haut oblige à chercher lequel des six champs est en cause, et c'est
     exactement le moment où on abandonne.
   ============================================================================ */
.fs-form{margin-top:clamp(30px,3.6vh,44px);max-width:640px;margin-inline:auto;text-align:left}
.fs-champ{margin-bottom:clamp(15px,1.9vh,20px)}
.fs-lab{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  color:#14130F;margin-bottom:8px}
.fs-fac{font-weight:400;color:#8C877E;font-size:13px}
.fs-form textarea,.fs-form input[type=text],.fs-form input[type=email],.fs-form input[type=tel]{
  width:100%;min-height:52px;padding:14px 16px;font-family:inherit;font-size:16px;
  color:#14130F;background:#FBF8F5;
  border:1px solid rgba(20,19,15,.16);border-radius:13px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.fs-form textarea{resize:vertical;line-height:1.55}
.fs-form textarea::placeholder,.fs-form input::placeholder{color:#9A948A}
.fs-form textarea:focus,.fs-form input:focus{outline:none;
  border-color:#8A6043;box-shadow:0 0 0 3px rgba(138,96,67,.14)}
.fs-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){ .fs-duo{grid-template-columns:1fr;gap:0} }

.fs-chips{display:flex;flex-wrap:wrap;gap:9px}
.fs-chip{padding:11px 16px;min-height:46px;font-family:inherit;font-size:14.5px;font-weight:500;
  color:#403B33;background:#FBF8F5;
  border:1px solid rgba(20,19,15,.16);border-radius:999px;cursor:pointer;
  transition:border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease)}
.fs-chip:hover{border-color:rgba(138,96,67,.5);color:#14130F}
.fs-chip[aria-pressed=true]{background:rgba(138,96,67,.12);
  border-color:#8A6043;color:#6E4B33;font-weight:600}

.fs-err{margin:7px 0 0;font-size:13px;color:#B4442B;line-height:1.4}
.fs-err:empty{margin:0}

/* le pot de miel : hors de l'écran mais pas display:none — les robots sérieux
   évitent ce qui est explicitement caché */
#fsPot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.fs-bas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(20px,2.6vh,26px)}
.fs-note{margin:0;font-size:13.5px;color:#6E6A62}
.fs-envoi[disabled]{opacity:.55;pointer-events:none}

.fs-merci{margin-top:20px;padding:22px 24px;border-radius:16px;
  background:rgba(138,96,67,.09);border:1px solid rgba(138,96,67,.28)}
.fs-merci-t{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#6E4B33;margin-bottom:6px}
.fs-merci p{margin:0;font-size:15px;line-height:1.6;color:#403B33}