/* ss-site — CSS commun de squaredsphere.com, extrait de index.html le 2026-11-02.
   Ne pas modifier l'ordre des blocs : il reproduit la cascade de la page unique. */

/* ═══ <style> — index.html ligne 4665 ═══ */

/* Lien « vidéo de présentation » des pages de services */
.svc-video-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  padding:8px 16px;border-radius:980px;cursor:pointer;text-decoration:none;
  font-size:.78rem;font-weight:600;color:var(--accent,#1a6b3c);
  border:1px dashed rgba(26,107,60,.45);background:rgba(26,107,60,.05);
  transition:background .2s,border-color .2s;}
.svc-video-link:hover{background:rgba(26,107,60,.11);border-color:var(--accent,#1a6b3c);}
.svc-video-link em{font-style:normal;font-size:.68rem;font-weight:400;opacity:.72;}
@media(max-width:560px){.svc-video-link{font-size:.72rem;padding:7px 13px;}}

/* Emplacement vidéo en attente, page Corps d'état */
.video-slot-soon{aspect-ratio:16/9;border-radius:14px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;text-align:center;
  background:#f4f6f5;border:1.5px dashed rgba(26,107,60,.35);}
.video-slot-soon .vs-ico{font-size:1.7rem;}
.video-slot-soon .vs-t{font-size:.8rem;font-weight:700;color:var(--accent,#1a6b3c);
  text-transform:uppercase;letter-spacing:.06em;}
.video-slot-soon .vs-s{font-size:.72rem;color:#8a9a90;}
.svc-video-flash{animation:svcVidFlash 1.6s ease-out;border-radius:14px;}
@keyframes svcVidFlash{0%,14%{box-shadow:0 0 0 3px rgba(26,107,60,.55);}
  100%{box-shadow:0 0 0 0 rgba(26,107,60,0);}}

/* ═══ <style> — index.html ligne 4699 ═══ */

/* ── Plan du site : les zones d'intervention en bandeau pleine largeur ──
   La colonne « Zones » contient ~90 communes. Empilees dans une cellule de
   300 px, elles formaient un ruban de 2 700 px de haut a cote de colonnes
   trois fois plus courtes. On sort ce bloc de la grille et on laisse le
   texte couler en colonnes : la meme information tient en un ecran.        */
.sm-zones{grid-column:1 / -1;}
.sm-zones > ul{
  display:block !important;          /* annule le flex-column en ligne */
  columns:5 190px;
  column-gap:28px;
}
.sm-zones > ul > li{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin-bottom:8px;
}
.sm-zones > h3,
.sm-zones > ss-h3{column-span:all;}
@media(max-width:1100px){ .sm-zones > ul{columns:3 170px;column-gap:20px;} }
@media(max-width:760px) { .sm-zones > ul{columns:2 130px;column-gap:16px;} }
@media(max-width:430px) { .sm-zones > ul{columns:1;} }

/* ═══ <style> — index.html ligne 4723 ═══ */

/* ── Communes desservies : pleine largeur sous les trois colonnes ────── */
.zones-texte-large{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--div);
  columns:2 340px;            /* 2 colonnes des que la place le permet */
  column-gap:44px;
  text-align:left;
}
.zones-texte-large p{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  margin:0 0 14px;
  text-align:left;            /* pas de justification : trop de liens courts */
}
@media(max-width:820px){
  .zones-texte-large{columns:1;padding-top:18px;margin-top:20px;}
}

/* ═══ <style> — index.html ligne 4743 ═══ */
/* safe-area-fix : evite le chevauchement avec la barre Safari en bas d'iPhone.
   env(safe-area-inset-bottom) vaut 0 partout sauf iPhone a encoche : aucun effet ailleurs. */
@supports (margin: env(safe-area-inset-bottom)) {
  .social-bar, .cart-footer, .chatbot-panel, .mob-srv-panel, .mc-sheet,
  #shopPanel, .aig-barre, .banc, .sticky-guide,
  .wa-btn, .chatbot-btn, .badge-demo, .vit-fleche {
    margin-bottom: env(safe-area-inset-bottom) !important;
  }
}

/* ═══ <style> — index.html ligne 4773 ═══ */

.tcard-g{display:inline-block;margin-top:10px;font-size:.72rem;font-weight:600;color:#1a73e8;text-decoration:none;border-bottom:1px solid rgba(26,115,232,.35);line-height:1.3}
.tcard-g:hover,.tcard-g:focus-visible{border-bottom-color:#1a73e8}
.avis-cta{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px auto 0;text-align:center;padding:0 16px}
.avis-cta a{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#1d1d1f;font-family:'Outfit',sans-serif;font-size:.9rem;font-weight:600;padding:11px 22px;border:1.5px solid #dadce0;border-radius:980px;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.avis-cta a:hover,.avis-cta a:focus-visible{border-color:#4285F4;box-shadow:0 4px 14px rgba(66,133,244,.18)}
.avis-cta span{font-size:.78rem;color:var(--text-l)}

/* ═══ <style> — index.html ligne 5078 ═══ */

@font-face{font-family:'Marianne';src:url('/img/marianne-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Marianne';src:url('/img/marianne-bold.woff2') format('woff2');font-weight:700;font-display:swap}
.frb{display:flex;align-items:center;gap:28px;width:100%;box-sizing:border-box;min-height:150px;padding:18px 24px;background:#fff;border-top:3px solid #000;border-bottom:3px solid #000;text-decoration:none;color:#161616;font-family:'Marianne',Arial,Helvetica,sans-serif;position:relative;z-index:1}
.frb *{box-sizing:border-box}
/* Nav en position:fixed : elle flotte au-dessus du flux et recouvrirait
   le haut du bandeau. On degage la hauteur de la barre. */

.frb-marques{display:flex;align-items:center;gap:20px;flex-shrink:0}
.frb-rf{height:62px;width:auto;display:block}
.frb-sep{width:1px;height:56px;background:#d4d4d4;flex-shrink:0}
.frb-logo{height:56px;width:auto;display:block}
.frb-txt{margin:0;font-size:15px;line-height:1.4;font-weight:400;color:#161616}
.frb-url{font-weight:700;color:#161616;white-space:nowrap}
.frb-cale{height:0;width:100%;flex:none}
.frb-loi{margin:0;padding:0;background:#f6f6f6;border-bottom:1px solid #e3e3e3;font-family:'Marianne',Arial,Helvetica,sans-serif;color:#6b6b6b;text-align:left}
.frb-loi>summary{list-style:none;cursor:pointer;padding:4px 24px 5px;font-size:9.5px;line-height:1.4;color:#6b6b6b}
.frb-loi>summary::-webkit-details-marker{display:none}
.frb-loi>summary::after{content:" \25BE";font-size:8px}
.frb-loi[open]>summary::after{content:" \25B4"}
.frb-loi>summary:hover{color:#161616}
.frb-loi p{margin:0;padding:0 24px 8px;font-size:9.5px;line-height:1.5}
.frb-loi a{color:#6b6b6b;text-decoration:underline}
@media(max-width:900px){.frb-loi>summary{padding:4px 16px 5px}.frb-loi p{padding:0 16px 8px}}
.frb:hover .frb-url{text-decoration:underline}
/* 31/10/2026 — choix de Grégory : sur téléphone (768 px et moins), le bandeau
   passe sous l'écran d'accueil, après « Nous contacter ». Tant que le script
   placé après #vitrine ne l'a pas déplacé (classe frb-bas), il reste masqué :
   pas de bandeau qui s'affiche en haut puis saute. Ordinateur : inchangé. */
@media(max-width:768px){.frb:not(.frb-bas),.frb-loi:not(.frb-bas){display:none}}
.frb:focus-visible{outline:3px solid #0a76f6;outline-offset:-3px}
@media(max-width:900px){
  .frb{flex-direction:column;align-items:flex-start;gap:14px;padding:16px}
  .frb-rf{height:52px} .frb-logo{height:48px} .frb-sep{height:46px}
  .frb-txt{font-size:13.5px;line-height:1.45}
}

/* ═══ <style> — index.html ligne 5573 ═══ */

/* 31/10/2026 — écran d'accueil sur téléphone : tout doit tenir sur un écran,
   du logo animé jusqu'à « Nous contacter » (demande de Grégory). Placé après
   la vitrine pour passer devant les règles mobiles plus anciennes. */
@media(max-width:640px){
  #vitrine{padding-top:18px!important}
  #vitrine .vit-in > svg,#vitrine svg{max-height:72px!important}
  #vitrine .vit-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px!important}
  #vitrine .vit-btn{min-width:0!important;width:auto!important;padding:12px 8px!important;white-space:nowrap}
  #vitrine .vit-btn-p{grid-column:1/-1}
}
/* Le bandeau ne sépare plus la barre du haut de la vitrine : la barre passe
   alors en mode « sur fond sombre » (icônes blanches). La cale qui la porte
   prend donc le noir de la vitrine, sinon les icônes seraient blanc sur blanc. */
@media(max-width:768px){.frb-cale{background:#050607}}
/* 31/10/2026 — téléphone : plus de flèche « descendre » en bas à droite
   (demande de Grégory), et l'accroche tient toujours sur trois lignes :
   sur un écran de 360 px avec la police système d'Android, « résidentielle,
   coordonnée » passait à la ligne et le titre faisait cinq lignes. La taille
   suit maintenant la largeur de l'écran. */
@media(max-width:768px){.scroll-down-btn,.vit-fleche{display:none!important}}
@media(max-width:640px){
  #vitrine .vit-h1-3{font-size:min(2.3rem,calc((100vw - 32px) / 12.8))!important}
  #vitrine .vit-h1-3 .vit-ligne{white-space:nowrap}
}

/* ═══ <style> — index.html ligne 5940 ═══ */

.ss-reportage-fig{display:flex;align-items:stretch;margin:6px 0 18px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 20% 100%,rgba(43,255,136,.16) 0%,rgba(43,255,136,0) 60%),#0b0e0d;border:1px solid rgba(43,255,136,.22)}
.ss-reportage-fig picture{flex:0 0 40%;display:flex;align-items:flex-end;justify-content:center;padding-top:14px}
.ss-reportage-fig img{display:block;width:100%;max-width:260px;height:auto}
.ss-reportage-fig figcaption{flex:1;padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:8px;-webkit-hyphens:none;hyphens:none}
.ss-reportage-fig .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#2bff88;font-weight:700}
.ss-reportage-fig .t{font-size:19px;line-height:1.3;font-weight:700;color:#f2f5f3;margin:0;text-align:left}
.ss-reportage-fig .d{font-size:14px;line-height:1.55;color:#b9c2bd;margin:0;text-align:left}
@media (max-width:700px){.ss-reportage-fig{flex-direction:column-reverse}.ss-reportage-fig picture{flex:none}.ss-reportage-fig img{max-width:220px}.ss-reportage-fig figcaption{padding:20px 18px 4px}}

/* ═══ <style> — index.html ligne 6406 ═══ */

.rvc-apport{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;
  margin-top:12px;padding:14px 18px;border:1px dashed rgba(147,197,253,.45);border-radius:16px;
  text-decoration:none;color:rgba(255,255,255,.86);background:rgba(255,255,255,.03);transition:background .2s,border-color .2s}
.rvc-apport:hover,.rvc-apport:focus-visible{background:rgba(56,189,248,.09);border-color:#93c5fd}
.rvc-apport-t{grid-column:1;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#93c5fd}
.rvc-apport-b{grid-column:1;font-size:.9rem;line-height:1.5}
.rvc-apport-go{grid-column:2;grid-row:1/3;font-weight:600;font-size:.88rem;color:#fff;white-space:nowrap}
@media(max-width:620px){.rvc-apport{grid-template-columns:1fr}.rvc-apport-go{grid-column:1;grid-row:auto;margin-top:4px}}

/* ═══ <style> — index.html ligne 6417 ═══ */

/* ══════════════════════════════════════════════════════════════════════
   LA PASSERELLE RENOVACIO
   ──────────────────────────────────────────────────────────────────────
   LA BORDURE VIVANTE — deuxième version, et voici pourquoi.
   La première faisait tourner un carré géant rempli d'un dégradé conique
   derrière la carte. C'est joli sur un ordinateur, mais cela impose au
   navigateur une couche quatre fois plus grande que la carte, repeinte à
   chaque image. Sur mobile, c'est la première chose qu'il sacrifie.
   Ici, aucun élément supplémentaire, aucune rotation : la carte porte
   elle-même un dégradé étiré à 300 %, dont on déplace la position. Le
   panneau sombre posé à deux pixels des bords laisse dépasser ce dégradé
   — c'est la bordure, et elle ondule. Même effet, une seule couche, de
   la taille exacte de la carte.

   LA STRUCTURE — une grille, pas une pile.
   Trois colonnes : la boussole, le texte, la flèche. En grand écran le
   texte occupe la colonne du milieu sur quatre rangées. En dessous de
   760 px, l'accroche et les pastilles passent sous les trois colonnes
   au lieu de s'entasser dans une colonne étroite. La carte descend de
   ~300 px à ~180 px de haut sans qu'un seul mot disparaisse.
   ══════════════════════════════════════════════════════════════════ */
.rvc-bridge{position:relative;display:block;margin-top:clamp(14px,2.2vw,24px);
  padding:2px;border-radius:22px;text-decoration:none;
  background:linear-gradient(115deg,#38bdf8 0%,#bae6fd 16%,#1d4ed8 36%,
             #ff6b35 56%,#38bdf8 78%,#bae6fd 100%);
  background-size:300% 300%;
  animation:rvcFlux 9s ease-in-out infinite;
  transition:transform .38s cubic-bezier(.2,.8,.2,1),box-shadow .38s}
@keyframes rvcFlux{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.rvc-bridge:hover,.rvc-bridge:focus-visible{transform:translateY(-5px);
  box-shadow:0 30px 70px rgba(56,189,248,.3);animation-duration:3s}

.rvc-in{position:relative;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:clamp(16px,2.2vw,26px);row-gap:7px;align-items:center;
  border-radius:20px;padding:clamp(16px,2.2vw,24px) clamp(16px,2.4vw,28px);
  overflow:hidden;
  background:radial-gradient(520px 260px at 12% 0%,rgba(56,189,248,.14),transparent 62%),
             linear-gradient(150deg,#060d1e,#0b1730 58%,#111f42)}
.rvc-in::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.11) 50%,transparent 60%);
  transform:translateX(-130%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.rvc-bridge:hover .rvc-in::after{transform:translateX(130%)}

.rvc-mark{grid-column:1;grid-row:1/span 4;align-self:center;
  width:clamp(72px,9vw,96px)}
.rvc-mark svg{width:100%;height:auto;display:block;overflow:visible}
.rvc-anneau {transform-origin:150px 150px;animation:rvcRot 44s linear infinite}
.rvc-anneau2{transform-origin:150px 150px;animation:rvcRot 28s linear infinite reverse}
@keyframes rvcRot{to{transform:rotate(360deg)}}
.rvc-souffle{transform-origin:150px 150px;animation:rvcSouffle 5.5s ease-in-out infinite}
@keyframes rvcSouffle{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.95;transform:scale(1.05)}}
/* Le R se réécrit toutes les neuf secondes : le visiteur arrive à
   n'importe quel moment du défilement, il faut qu'il tombe dessus. */
.rvc-r path{fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:260;animation:rvcEcrire 9s ease-in-out infinite}
@keyframes rvcEcrire{0%{stroke-dashoffset:260}22%,86%{stroke-dashoffset:0}
  100%{stroke-dashoffset:260}}

.rvc-head{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:5px;
  min-width:0;color:#fff}
.rvc-tag{font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#7dd3fc}
.rvc-head b,
.rvc-head ss-b{font-size:clamp(1rem,1.9vw,1.3rem);font-weight:800;letter-spacing:-.02em;
  line-height:1.25;text-shadow:0 0 18px rgba(56,189,248,.4)}
.rvc-head b sup,
.rvc-head ss-b sup{font-size:.5em}

.rvc-go{grid-column:3;grid-row:1/span 4;align-self:center;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;color:#fff;background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.36);transition:transform .3s,background .3s}
.rvc-bridge:hover .rvc-go{transform:translateX(5px);background:rgba(56,189,248,.28)}

.rvc-sub{grid-column:2;grid-row:2;font-size:clamp(.8rem,1.3vw,.9rem);
  color:#b8c8e0;line-height:1.5}
.rvc-kpis{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.rvc-kpis i{font-style:normal;display:inline-flex;align-items:center;gap:7px;
  font-size:.7rem;color:#93a8c8;background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.24);border-radius:980px;padding:5px 12px;
  white-space:nowrap}
.rvc-kpis i b,
.rvc-kpis i ss-b{color:#fff;font-weight:700}
.rvc-kpis i:first-child b,
.rvc-kpis i:first-child ss-b{color:#4ade80}
.rvc-kpis sup{font-size:.75em;color:#7dd3fc;margin-left:2px;top:-.35em}
.rvc-note{grid-column:2;grid-row:4;font-size:.62rem;line-height:1.4;color:#6f819c}

/* ── TÉLÉPHONE ────────────────────────────────────────────────────── */
@media (max-width:760px){
  .rvc-bridge{border-radius:18px;margin-top:14px}
  .rvc-in{column-gap:13px;row-gap:9px;padding:15px 16px;border-radius:16px}
  .rvc-mark{grid-column:1;grid-row:1;width:52px}
  .rvc-head{grid-column:2;grid-row:1;gap:3px}
  .rvc-go{grid-column:3;grid-row:1;width:36px;height:36px;font-size:1rem}
  .rvc-tag{font-size:.56rem;letter-spacing:.12em}
  .rvc-head b,
  .rvc-head ss-b{font-size:.94rem;line-height:1.27}
  /* Les trois blocs du bas prennent toute la largeur : dans la colonne
     du milieu, ils tombaient sur cinq et six lignes. */
  .rvc-sub {grid-column:1/-1;grid-row:2;font-size:.76rem;line-height:1.44}
  .rvc-kpis{grid-column:1/-1;grid-row:3;margin-top:0;gap:6px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .rvc-kpis::-webkit-scrollbar{display:none}
  .rvc-kpis i{font-size:.63rem;padding:4px 10px}
  .rvc-note{grid-column:1/-1;grid-row:4;font-size:.55rem;line-height:1.35}
  /* Le néon allégé : sur un processeur graphique de téléphone, deux
     flous gaussiens recalculés sur douze tracés à chaque image, c'est
     la charge de trop. Le tube et le cœur suffisent, la lueur est
     reprise par une unique ombre portée. */
  .rvc-r>g:nth-child(1),.rvc-r>g:nth-child(2){display:none}
  .rvc-r>g:nth-child(3){stroke-width:10}
  .rvc-r>g:nth-child(4){stroke-width:2.6}
  .rvc-r{filter:drop-shadow(0 0 7px rgba(56,189,248,.85))}
}

/* Quelqu'un qui a coché « supprimer les animations » dans son système
   souffre souvent de troubles vestibulaires : le mouvement lui donne la
   nausée. On coupe tout, et on fige sur une image qui se tient — R
   entièrement tracé, bordure sur une position lisible. Rien ne manque,
   rien ne bouge. */
@media (prefers-reduced-motion:reduce){
  .rvc-bridge,.rvc-anneau,.rvc-anneau2,.rvc-souffle{animation:none}
  .rvc-r path{animation:none;stroke-dashoffset:0}
  .rvc-in::after{display:none}
}

/* ═══ <style> — index.html ligne 7593 ═══ */

    .bsr{max-width:1100px;margin:0 auto 34px;display:grid;gap:14px}
    .bsr-compte{display:flex;align-items:baseline;justify-content:center;gap:12px;margin-bottom:6px}
    .bsr-compte strong,
    .bsr-compte ss-b{font-size:clamp(3rem,7vw,4.6rem);line-height:1;font-weight:800;letter-spacing:-.03em;color:var(--accent,#1a6b3c)}
    .bsr-compte span{font-size:clamp(1.05rem,2.2vw,1.35rem);font-weight:600;color:var(--text,#1d1d1f)}
    .bsr-box{display:flex;align-items:center;gap:10px;background:var(--card,#fff);border:1px solid rgba(0,0,0,.10);border-radius:999px;padding:6px 8px 6px 20px;box-shadow:var(--sh-s,0 2px 20px rgba(0,0,0,.04))}
    .bsr-box:focus-within{border-color:var(--accent,#1a6b3c);box-shadow:0 0 0 4px var(--accent-g,rgba(26,107,60,.10))}
    .bsr-box svg{flex:none;color:var(--text-l,#86868b)}
    .bsr-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--text,#1d1d1f);padding:10px 0}
    .bsr-box button{flex:none;border:0;border-radius:999px;background:transparent;color:var(--text-s,#6e6e73);font:inherit;font-size:.86rem;padding:8px 12px;cursor:pointer}
    .bsr-box button:hover{background:rgba(0,0,0,.05)}
    .bsr-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    .bsr-chips span{font-size:.8rem;color:var(--text-l,#86868b);margin-right:2px}
    .bsr-chips button{border:1px solid rgba(0,0,0,.10);background:var(--card,#fff);color:var(--text,#1d1d1f);border-radius:999px;font:inherit;font-size:.84rem;padding:6px 13px;cursor:pointer;transition:border-color .2s,color .2s}
    .bsr-chips button:hover,.bsr-chips button[aria-pressed="true"]{border-color:var(--accent,#1a6b3c);color:var(--accent,#1a6b3c)}
    .bsr-statut{font-size:.9rem;color:var(--text-s,#6e6e73);min-height:1.3em}
    .bsr-statut b,
    .bsr-statut ss-b{color:var(--text,#1d1d1f)}
    .bsr-som{background:var(--card,#fff);border:1px solid rgba(0,0,0,.08);border-radius:18px;padding:4px 20px}
    .bsr-som summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:.95rem;color:var(--text,#1d1d1f);list-style-position:inside}
    .bsr-som-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 28px;padding:4px 0 18px}
    .bsr-som h4,
    .bsr-som ss-h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--accent,#1a6b3c);margin:12px 0 6px}
    .bsr-som ul{list-style:none;margin:0;padding:0}
    .bsr-som li{margin:0 0 6px;line-height:1.35}
    .bsr-som a{color:var(--text,#1d1d1f);text-decoration:none;font-size:.88rem}
    .bsr-som a:hover{color:var(--accent,#1a6b3c);text-decoration:underline}
    .bsr .bsr-box input,.bsr .bsr-box input:focus{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;-webkit-appearance:none;appearance:none;margin:0 !important;height:auto !important}
    .bsr .bsr-box input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
    .bsr{width:100%;box-sizing:border-box}.bsr>*{min-width:0}.bsr .bsr-box{box-sizing:border-box;width:100%;max-width:100%}
    .bsr .bsr-box input{width:auto !important;flex:1 1 0 !important;min-width:0 !important;max-width:none !important;padding:10px 0 !important}
    .bsr-vide{grid-column:1/-1;text-align:center;color:var(--text-s,#6e6e73);padding:30px 10px}
    
/* ═══ <style> — index.html ligne 11010 ═══ */

/* ═══════════════════════════════════════════════════════════════
   BARRE FIXE — teinte pilotée par le fond survolé
   L'attribut data-fond est posé sur <html> par le script ci-dessous.
   Le !important est nécessaire : plusieurs de ces éléments portent
   leur couleur en style en ligne, qui prime sur toute feuille.
   ═══════════════════════════════════════════════════════════════ */

nav .nav-item > a,
nav .nav-item > a:hover,
nav .nav-lien-txt,
nav .nav-services-mobile,
nav .cart-btn,
nav .nav-account-btn,
nav .nav-logo,
nav .nav-logo span{
  transition:color .35s cubic-bezier(.22,.61,.36,1),
             stroke .35s cubic-bezier(.22,.61,.36,1);
}
nav .nav-account-btn svg,
nav .cart-btn-mobile svg{
  transition:stroke .35s cubic-bezier(.22,.61,.36,1);
}
nav .hamburger span{
  transition:background .35s cubic-bezier(.22,.61,.36,1);
}

/* ── Fond sombre : tout passe en blanc ── */
html[data-fond="sombre"] nav .nav-item > a,
html[data-fond="sombre"] nav .nav-lien-txt,
html[data-fond="sombre"] nav .nav-services-mobile,
html[data-fond="sombre"] nav .cart-btn,
html[data-fond="sombre"] nav .nav-logo{
  color:#ffffff !important;
}
html[data-fond="sombre"] nav .nav-account-btn{color:#ffffff !important}
html[data-fond="sombre"] nav .nav-account-btn svg,
html[data-fond="sombre"] nav .cart-btn-mobile svg{stroke:#ffffff !important}
html[data-fond="sombre"] nav .hamburger span{background:#ffffff !important}
html[data-fond="sombre"] nav .nav-item > a:hover,
html[data-fond="sombre"] nav .nav-lien-txt:hover{
  color:#7dffb4 !important;
}

/* ── Fond clair : encre sombre ── */
html[data-fond="clair"] nav .nav-item > a,
html[data-fond="clair"] nav .nav-lien-txt,
html[data-fond="clair"] nav .nav-services-mobile,
html[data-fond="clair"] nav .cart-btn,
html[data-fond="clair"] nav .nav-logo{
  color:#1a1a1a !important;
}
html[data-fond="clair"] nav .nav-account-btn{color:#3a3a3a !important}
html[data-fond="clair"] nav .nav-account-btn svg,
html[data-fond="clair"] nav .cart-btn-mobile svg{stroke:#3a3a3a !important}
html[data-fond="clair"] nav .hamburger span{background:#1a1a1a !important}
html[data-fond="clair"] nav .nav-item > a:hover,
html[data-fond="clair"] nav .nav-lien-txt:hover{
  color:var(--accent) !important;
}

/* Le bouton d'appel garde son fond vert et son texte blanc */
html[data-fond] nav .nav-cta{color:#ffffff !important}

/* ── Mobile : « Squared » assombri au-dessus d'une zone sombre ──
   Les regles ci-dessus ne visent que .nav-logo ; le mot « Squared »
   est porte par un <span> qui gardait le vert #1a6b3c, trop clair
   sur la pastille grisee par le fond noir. La transparence de la
   pastille n'est pas touchee : seule la teinte du mot change. */
@media (max-width:968px){
  html[data-fond="sombre"] nav .nav-logo span{
    color:#0a3d21 !important;
    -webkit-text-stroke:0.45px #0a3d21;
  }
}

@media (prefers-reduced-motion:reduce){
  nav .nav-item > a,nav .nav-lien-txt,nav .cart-btn,
  nav .nav-account-btn svg,nav .hamburger span{transition:none}
}
/* ═══ SEO : elements decoratifs sortis de la semantique ═══
   .ch-num remplace les <strong> de numerotation des sommaires
   (150 balises d'emphase qui n'emphasaient rien).
   .lc-lab reprend exactement le rendu de .legal-content h2 pour les
   intitules repetes d'une fiche guide a l'autre. */
.ch-num,
/* ═══ SEO : elements decoratifs sortis de la semantique ═══
   .ch-num remplace les <ss-b> de numerotation des sommaires
   (150 balises d'emphase qui n'emphasaient rien).
   .lc-lab reprend exactement le rendu de .legal-content h2 pour les
   intitules repetes d'une fiche guide a l'autre. */
.ch-num,
/* ═══ SEO : elements decoratifs sortis de la semantique ═══
   .ch-num remplace les <ss-b> de numerotation des sommaires
   (150 balises d'emphase qui n'emphasaient rien).
   .lc-lab reprend exactement le rendu de .legal-content h1:where([data-ex-h2]) pour les
   intitules repetes d'une fiche guide a l'autre. */
.ch-num{color:var(--accent);font-weight:700}
.legal-content .lc-lab{font-family:'Outfit',sans-serif;font-size:1.3rem;
  font-weight:700;margin:32px 0 12px;text-align:left;color:inherit}

/* ════════ ESCAMOTAGE DES PASTILLES PENDANT LE BALAYAGE ════════ */
@media(max-width:968px){
  .wa-btn,.chatbot-btn,.scroll-top-btn,.scroll-down-btn,.social-bar,.sticky-guide,.vit-fleche{
    transition:opacity .22s ease,transform .22s ease;
  }
  body.doigt-actif .wa-btn,
  body.doigt-actif .chatbot-btn,
  body.doigt-actif .chatbot-panel,
  body.doigt-actif .scroll-top-btn,
  body.doigt-actif .scroll-down-btn,
  body.doigt-actif .social-bar,
  body.doigt-actif .sticky-guide,
  body.doigt-actif .vit-fleche{
    opacity:0!important;pointer-events:none!important;transform:translateY(14px) scale(.94)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .wa-btn,.chatbot-btn,.scroll-top-btn,.scroll-down-btn,.social-bar,.sticky-guide,.vit-fleche{transition:none;}
  body.doigt-actif .wa-btn,body.doigt-actif .chatbot-btn,body.doigt-actif .scroll-top-btn,
  body.doigt-actif .scroll-down-btn,body.doigt-actif .social-bar,body.doigt-actif .sticky-guide,
  body.doigt-actif .vit-fleche{transform:none!important;}
}

/* ═══ <style id="typo-fix"> — index.html ligne 11622 ═══ */

/* ═══ Correctif typographique global ═══
   Le texte justifié sans césure étire les espaces entre les mots : sur une
   colonne étroite, une ligne de quatre mots produit des blancs béants.
   Deux corrections, aucune ne touche au contenu ni à la structure.
   1. Césure active partout — le navigateur peut couper les mots longs et
      répartir l'espace normalement. Nécessite lang="fr" sur <html>.
   2. Sous 900 px, retour au fer à gauche : sur mobile, aucune césure ne
      suffit à rattraper une justification sur 30 caractères de large.
   Pas de !important sur les sélecteurs génériques : un alignement posé en
   style inline (centrage d'un titre, par exemple) continue de l'emporter.
   Le seul !important vise [style*="justify"], donc uniquement ce qu'on veut
   neutraliser. */
p,li,td,th,dd,dt,blockquote,figcaption,summary,.lead,.wrap,
[style*="text-align:justify"],[style*="text-align: justify"]{
  -webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;
  overflow-wrap:break-word;word-break:normal;text-wrap:pretty;
}
@media (max-width:900px){
  html body p,html body li,html body dd,html body blockquote,
  html body .wrap,html body .lead,html body td{text-align:left;}
  [style*="text-align:justify"],[style*="text-align: justify"]{
    text-align:left !important;
    -webkit-hyphens:none;-ms-hyphens:none;hyphens:none;
  }
}

/* ═══ <style id="footer-lignes"> — index.html ligne 11649 ═══ */

/* ═══ Lignes du pied de page ═══════════════════════════════════════════
   Constat, mesuré sur le site : les colonnes font 317 px et le libellé le
   plus long en fait 257. RIEN ne dépasse en desktop — la troncature n'y a
   jamais été active, elle ne s'applique qu'en dessous de 600 px.

   L'effet de survol qui figurait ici répondait donc à un problème qui
   n'existait pas et faisait apparaître une boîte disgracieuse sur chaque
   lien. Il est retiré.

   Reste le vrai cas : les écrans étroits, où « text-overflow:ellipsis »
   coupait les libellés. On ne coupe plus, on laisse simplement passer à la
   ligne. La seconde ligne est décalée vers la droite, de sorte qu'on lit
   une entrée qui continue et non deux entrées distinctes. */

.footer-col a{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
  text-indent:-8px;
  padding-left:8px;
}

/* ═══ <style id="panier-mobile"> — index.html ligne 11673 ═══ */

/* ══ Panier — lisibilité sur mobile ═══════════════════════════════════
   Le panneau était en height:100vh. Sur mobile, 100vh vaut la hauteur de
   l'écran barres de navigateur DÉPLIÉES : quand elles sont visibles, le
   bas du panneau — c'est-à-dire le total et le bouton de paiement — se
   retrouve hors de la zone visible. Avec plusieurs manuels au panier, la
   liste s'allonge et le bouton devient franchement inatteignable.

   100dvh suit la hauteur réellement disponible. Il est écrit après 100vh :
   les navigateurs qui l'ignorent gardent l'ancienne valeur.
   env(safe-area-inset-bottom) écarte le bouton de la barre gestuelle iOS. */
.cart-panel{height:100vh;height:100dvh;}
.cart-footer{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));}

@media(max-width:768px){
  /* La liste ne mange pas tout : le pied reste visible dès le premier
     coup d'œil, même avec six ouvrages au panier. */
  .cart-items{max-height:none;-webkit-overflow-scrolling:touch;}
  .cart-footer{position:sticky;bottom:0;z-index:2;
    box-shadow:0 -6px 18px rgba(0,0,0,.10);}
  .cart-total strong,
  .cart-total ss-b{font-size:1.35rem;}
}
@media(max-width:768px) and (max-height:640px){
  /* Petits écrans : on resserre pour garder le bouton au-dessus du pli. */
  .cart-items{padding:12px 18px;}
  .cart-footer{padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));}
  .cart-total{margin-bottom:10px;}
  .cart-total strong,
  .cart-total ss-b{font-size:1.2rem;}
}

/* ═══ <style id="vitrine-centrage"> — index.html ligne 11706 ═══ */

/* ═══ Vitrine — centrage du titre et du texte ═════════════════════════
   Le centrage existait déjà, mais dans une règle appliquée seulement en
   dessous de 640 px pour le titre et pas au texte d'accroche en desktop.
   On l'affirme pour les deux, à toutes les largeurs.

   Les styles en ligne du HTML l'emportent normalement sur une feuille :
   c'est pourquoi « !important » est nécessaire ici et seulement ici. */
#vitrine .vit-h1,
#vitrine .vit-lead,
#vitrine .vit-sur,
#vitrine .vit-stat,
#vitrine p{
  text-align:center !important;
}
#vitrine .vit-lead{
  margin-left:auto !important;
  margin-right:auto !important;
  max-width:min(560px,92vw);
}

/* ── Accroche : trois lignes en mobile ────────────────────────────────
   « Un seul interlocuteur… » fait 166 caractères. Mesuré : à 12,8 px il
   occupe quatre lignes, ce qui écrase les boutons en dessous. La taille
   suit désormais la largeur de l'écran — de 9,8 px sur un 320 à 11 px
   sur un grand téléphone — pour tenir sur trois lignes partout.
   L'interligne est resserré d'autant : un texte plus petit n'a pas
   besoin du même espacement. */
@media (max-width:640px){
  #vitrine .vit-lead{
    font-size:clamp(9.8px,2.75vw,11px) !important;
    line-height:1.55 !important;
    max-width:94vw;
  }
}
#vitrine .vit-actions{justify-content:center !important}
#vitrine .vit-inner,
#vitrine .vit-wrap{text-align:center}

/* ── Desktop : la zone passe sous le titre ───────────────────────────
   La pastille est en « inline-flex » : ses deux textes s'alignent donc
   côte à côte. En passant en colonne, « Paris · Île-de-France · 06 »
   se place sous « Coordinateur travaux · Architecte d'intérieur ».

   Le tiret séparateur n'a plus lieu d'être — il servait à articuler deux
   éléments sur une même ligne. La pastille reprend une forme arrondie
   plutôt que de rester un ovale très allongé.

   Uniquement au-dessus de 640 px : en mobile, tout reste sur une ligne
   comme demandé. */
@media (min-width:641px){
  #vitrine .vit-sur{
    flex-direction:column;
    gap:3px;
    padding:9px 22px;
    border-radius:16px;
    line-height:1.25;
  }
  #vitrine .vit-sur b::after,
  #vitrine .vit-sur ss-b::after{content:none}
}

/* ── « Paris · Île-de-France · 06 » : deux fois plus petit ────────────
   Réduire simplement la zone de moitié donnait 5 px : illisible.
   On écarte donc les deux dans le même mouvement — le libellé monte
   d'un quart, la zone descend d'autant. Le rapport est bien de deux et les deux textes restent lisibles :

       « MAÎTRE D'ŒUVRE »              12,6 px en mobile, 14,8 en desktop
       « Paris · Île-de-France · 06 »   6,3 px en mobile,  7,4 en desktop

   L'interlettrage de la zone est resserré : à cette taille, l'espacement
   d'origine détachait les lettres les unes des autres. */
#vitrine .vit-sur b, l'espacement
   d'origine détachait les lettres les unes des autres. */
#vitrine .vit-sur ss-b{
  font-size:1.25em !important;
  letter-spacing:.15em !important;
}

/* « Coordinateur travaux · Architecte d'intérieur » fait 39 caractères en
   capitales. Pour qu'il tienne sur UNE seule ligne jusqu'aux plus petits
   téléphones, il faut descendre à 9,5 px et resserrer l'interlettrage —
   mesuré : 248 px pour 264 px utiles sur un écran de 320.

   La zone en dessous garde son rapport de deux, à 4,8 px : c'est petit,
   mais il s'agit d'une précision géographique, pas d'une information
   qu'on lit mot à mot. */
@media (max-width:640px){
  #vitrine .vit-sur{max-width:min(94vw,340px);padding:6px 13px !important}
  #vitrine .vit-sur b,
  #vitrine .vit-sur ss-b{
    font-size:9.5px !important;
    letter-spacing:.05em !important;
    line-height:1.3;
    white-space:nowrap;
  }
  #vitrine .vit-sur em{
    font-size:4.9px !important;
    letter-spacing:.05em !important;
    white-space:nowrap;
  }
}

/* Écrans très étroits : on descend d'un demi-point plutôt que de casser
   la ligne. */
@media (max-width:340px){
  #vitrine .vit-sur b,
  #vitrine .vit-sur ss-b{font-size:8.8px !important;letter-spacing:.03em !important}
  #vitrine .vit-sur em{font-size:4.5px !important}
}
#vitrine .vit-sur em{
  font-size:.625em !important;
  letter-spacing:.07em !important;
  opacity:.72;
}

/* ── Emblème : descendu de 3 mm ───────────────────────────────────────
   « transform » déplace l'image sans rien changer au flux de la page :
   le titre, l'accroche et les boutons gardent exactement leur place.
   Une marge est retirée en dessous pour que l'espace visuel qui suit
   reste identique — sinon le logo semblerait se rapprocher du titre.

   CSS accepte les millimètres : 3 mm valent ici 11,3 px à l'écran. */
#vitrine .vit-embleme{
  transform:translateY(3mm);
  margin-bottom:calc(clamp(18px,3vw,26px) + 3mm);
}

/* ═══ <style id="bouton-commencer"> — index.html ligne 11835 ═══ */

/* ══ « Commencer ici » — relief néon respirant ════════════════════════
   C'est l'entrée principale du site : il doit se détacher des deux
   autres boutons sans crier.

   Le relief vient de trois couches superposées, pas d'une ombre portée :
     · une lueur extérieure, qui décolle le bouton du fond ;
     · une lueur intérieure sur le bord haut, qui simule un tube de néon
       éclairé par-dessus — c'est elle qui donne le volume ;
     · un très léger fond translucide, pour que le bouton ait une matière.

   La respiration est lente — quatre secondes et demie — et de faible
   amplitude. Un clignotement rapide ferait publicité ; une pulsation
   lente se remarque sans agacer. Elle s'arrête au survol : dès qu'on
   s'intéresse au bouton, il n'a plus besoin d'appeler.

   Le texte porte sa propre lueur : sans elle, il paraît terne au milieu
   d'un cadre lumineux. */

#vitrine .vit-btn-p{
  position:relative;
  font-weight:600;
  letter-spacing:.015em;
  border-width:1.5px;
  background:rgba(43,255,136,.055);
  text-shadow:0 0 10px rgba(43,255,136,.45);
  box-shadow:
    0 0 20px rgba(43,255,136,.30),
    0 0 44px rgba(43,255,136,.14),
    inset 0 1px 0 rgba(180,255,214,.32),
    inset 0 0 22px rgba(43,255,136,.10);
  animation:btnRespire 4.5s ease-in-out infinite;
}

@keyframes btnRespire{
  0%,100%{
    box-shadow:
      0 0 18px rgba(43,255,136,.26),
      0 0 40px rgba(43,255,136,.11),
      inset 0 1px 0 rgba(180,255,214,.28),
      inset 0 0 20px rgba(43,255,136,.09);
    border-color:rgba(43,255,136,.72);
  }
  50%{
    box-shadow:
      0 0 30px rgba(43,255,136,.46),
      0 0 68px rgba(43,255,136,.22),
      inset 0 1px 0 rgba(190,255,220,.46),
      inset 0 0 28px rgba(43,255,136,.16);
    border-color:rgba(43,255,136,1);
  }
}

/* Au survol : la respiration cesse, le relief se fixe au maximum. */
#vitrine .vit-btn-p:hover,
#vitrine .vit-btn-p:focus-visible{
  animation:none;
  transform:translateY(-2px);
  background:rgba(43,255,136,.12);
  border-color:var(--vneon);
  box-shadow:
    0 0 34px rgba(43,255,136,.52),
    0 0 76px rgba(43,255,136,.26),
    inset 0 1px 0 rgba(200,255,226,.55),
    inset 0 0 30px rgba(43,255,136,.18);
  outline:none;
}
#vitrine .vit-btn-p:active{transform:translateY(0) scale(.985)}

/* Les deux autres boutons s'effacent d'un cran : la hiérarchie se voit
   autant par ce qu'on retire que par ce qu'on ajoute. */
#vitrine .vit-btn-s{
  border-color:rgba(255,255,255,.17);
  color:rgba(255,255,255,.78);
}
#vitrine .vit-btn-s:hover{
  border-color:rgba(43,255,136,.6);
  color:rgba(255,255,255,.96);
}

@media (prefers-reduced-motion:reduce){
  #vitrine .vit-btn-p{animation:none}
}

/* ═══ <style> — index.html ligne 11944 ═══ */

.pli{position:relative;overflow:hidden;transition:max-height .45s ease}
.pli-voile{position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;z-index:40}
.pli.pli-ouvert .pli-voile{display:none}
.pli-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:41;
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  border:1px solid rgba(0,0,0,.25);background:#2bff88;color:#050607;cursor:pointer;
  font:600 15px/1.1 'Outfit','Poppins','SF Pro Display',-apple-system,sans-serif;letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(0,0,0,.28);white-space:nowrap}
.pli-btn:hover{filter:brightness(1.08)}
.pli-btn:focus-visible{outline:2px solid #050607;outline-offset:3px}
.pli-btn i{font-style:normal;display:inline-block;transition:transform .3s}
.pli.pli-ouvert .pli-btn i{transform:rotate(180deg)}
.pli.pli-ouvert .pli-btn{bottom:18px}
@media(prefers-reduced-motion:reduce){.pli{transition:none}}
@media print{.pli{max-height:none!important;overflow:visible!important}.pli-voile,.pli-btn{display:none!important}}

/* ═══ <style id="ssv-cadres-mobile"> — index.html ligne 12067 ═══ */

@media (max-width:860px){
  html body .service-accordion .video-slot{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/9!important;}
  html body .service-accordion .video-slot > video{object-fit:contain!important;}
}

/* ═══ <style id="ssv-menus-rapides"> — index.html ligne 12074 ═══ */

/* Ordinateur : menus déroulants Services / Zones / Réalisations (survol). Ouverture immédiate ;
   le menu reste actif 120 ms après la sortie du pointeur, pour passer du lien au menu sans qu'il se referme. */
.mega-menu{transition:opacity 0s,max-height 0s linear .12s,padding 0s linear .12s,visibility 0s linear .12s!important;}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{transition:opacity 0s,max-height 0s,padding 0s,visibility 0s!important;}
.mega-overlay{transition:opacity 0s!important;}
/* Téléphone : panneaux Services / Zones */
.mob-srv-overlay,.mob-srv-panel{transition:opacity 0s,visibility 0s linear .08s!important;}
.mob-srv-overlay.show,.mob-srv-panel.open{transition:opacity 0s,visibility 0s!important;}
.mob-srv-panel.open .mob-srv-item{animation:none!important;animation-delay:0s!important;opacity:1!important;transform:translateY(0)!important;}
/* Menu burger (téléphone et ordinateur) : panneau et rubriques affichés d'emblée */
.mobile-menu{transition:transform 0s,visibility 0s linear .1s!important;}
.mobile-menu.open{transition:transform 0s,visibility 0s!important;}
.mob-overlay{transition:opacity 0s,visibility 0s linear .08s!important;}
.mob-overlay.show{transition:opacity 0s,visibility 0s!important;}
/* état final identique à la fin de l'ancienne animation (le transform sert de repère à la flèche de « Services ») */
.mobile-menu.open .mm-item,.mobile-menu.open .mm-srv-toggle{animation:none!important;animation-delay:0s!important;opacity:1!important;transform:translateY(0) scale(1)!important;filter:blur(0)!important;}
.mm-srv-panel{transition:max-height 0s,visibility 0s linear .1s,opacity 0s!important;}
.mm-srv-panel.open{transition:max-height 0s,visibility 0s,opacity 0s!important;}
.mm-srv-arrow{transition:transform .1s!important;}
/* Pas d'attente de double-toucher sur les boutons de menu */
.hamburger,.nav-services-mobile,.mm-srv-toggle,.mm-item,.mob-srv-item,.nav-item>a{touch-action:manipulation;}

/* ═══ <style id="ssv-lecteur-css"> — index.html ligne 12106 ═══ */

:root{--ssv-accent:#2bff88;}
.ssv-max,.ssv-btn{width:38px;height:38px;padding:0;margin:0;border-radius:50%;border:1.5px solid var(--ssv-accent);background:rgba(10,12,16,.6);color:var(--ssv-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;box-sizing:border-box;flex:0 0 auto;touch-action:manipulation;}
.ssv-max{position:absolute;z-index:12;opacity:.88;transition:opacity .15s,background .15s,color .15s;}
.ssv-max:hover,.ssv-max:focus-visible,.ssv-btn:hover,.ssv-btn:focus-visible{opacity:1;background:var(--ssv-accent);color:#0b0d10;outline:none;}
.ssv-max svg,.ssv-btn svg{width:18px;height:18px;display:block;pointer-events:none;}
.ssv-max[hidden],.ssv-vol[hidden]{display:none!important;}
.ssv-vol{position:absolute;z-index:12;display:flex;align-items:center;gap:6px;padding:0 10px 0 0;border-radius:999px;background:rgba(10,12,16,.6);opacity:.92;box-sizing:border-box;}
.ssv-vol .ssv-btn{border-color:transparent;background:transparent;}
.ssv-vol .ssv-btn:hover,.ssv-vol .ssv-btn:focus-visible{background:var(--ssv-accent);color:#0b0d10;}
.ssv-range{-webkit-appearance:none;appearance:none;width:84px;height:24px;margin:0;padding:0;background:transparent;cursor:pointer;--p:100%;}
.ssv-range:focus{outline:none;}
.ssv-range::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,var(--ssv-accent) 0,var(--ssv-accent) var(--p),rgba(255,255,255,.35) var(--p),rgba(255,255,255,.35) 100%);}
.ssv-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--ssv-accent);border:2px solid #0b0d10;box-shadow:0 0 0 1px rgba(255,255,255,.5);}
.ssv-range::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.35);}
.ssv-range::-moz-range-progress{height:4px;border-radius:4px;background:var(--ssv-accent);}
.ssv-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ssv-accent);border:2px solid #0b0d10;}
.ssv-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(255,255,255,.85);}
.ssv-mention{font:600 11px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff;white-space:nowrap;letter-spacing:.01em;display:none;padding-right:4px;}
.ssv-vol.ssv-lit .ssv-mention{display:inline;}
/* Téléphone, tablette : gros bouton son seul (le volume se règle avec les boutons de l'appareil) */
.ssv-tactile .ssv-max,.ssv-tactile .ssv-btn{width:44px;height:44px;}
.ssv-tactile .ssv-max svg,.ssv-tactile .ssv-btn svg{width:22px;height:22px;}
.ssv-tactile .ssv-vol{padding:0;}
.ssv-tactile .ssv-vol.ssv-lit{padding-right:10px;}
.ssv-tactile .ssv-vol .ssv-btn{border:1.5px solid var(--ssv-accent);background:rgba(10,12,16,.6);color:#fff;}
/* Ordinateur : couche pleine fenêtre, taille donnée par le CSS seul */
.ssv-ov{position:fixed;inset:0;z-index:2147483647;background:#000;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;}
.ssv-scene{position:absolute;top:env(safe-area-inset-top,0px);left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);bottom:calc(20px + env(safe-area-inset-bottom,0px));}
.ssv-ov video.ssv-in{position:absolute!important;inset:0!important;top:0!important;left:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;min-width:0!important;min-height:0!important;margin:0!important;object-fit:contain!important;border:0!important;border-radius:0!important;transform:none!important;filter:none!important;aspect-ratio:auto!important;background:#000!important;display:block!important;opacity:1!important;visibility:visible!important;}
.ssv-barre{position:absolute;top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));z-index:3;display:flex;align-items:center;gap:8px;transition:opacity .2s;}
.ssv-barre .ssv-vol{position:static;opacity:1;}
.ssv-ov .ssv-btn.ssv-close{width:44px;height:44px;color:#fff;background:rgba(10,12,16,.72);}
.ssv-ov .ssv-btn.ssv-close:hover,.ssv-ov .ssv-btn.ssv-close:focus-visible{background:var(--ssv-accent);color:#0b0d10;}
.ssv-ov .ssv-vol .ssv-btn{width:44px;height:44px;}
.ssv-ov .ssv-range{width:min(140px,30vw);height:44px;}
.ssv-ov.ssv-calme .ssv-barre{opacity:0;pointer-events:none;}
.ssv-ov.ssv-calme{cursor:none;}
html.ssv-lock,html.ssv-lock body{overflow:hidden!important;}
/* Téléphone Android, tablette : agrandissement en CSS pur. Le cadre existant de la vidéo passe en position fixe plein écran
   (styles posés en ligne avec !important par le script, ce qui l'emporte sur toutes les règles du site) ; ici, seulement ce qui ne peut pas l'être en ligne. */
html.ssv-agr-on,html.ssv-agr-on body{overflow:hidden!important;}
html body .ssv-agr.ssv-agr::before,html body .ssv-agr.ssv-agr::after{display:none!important;content:none!important;}
html body .ssv-agr.ssv-agr > :not(video):not(.ssv-agr-barre){display:none!important;}
.ssv-agr-barre{position:fixed;top:max(10px,env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));z-index:2147483647;display:flex;align-items:center;gap:10px;}
.ssv-agr-barre .ssv-vol{position:static;opacity:1;}
.ssv-agr-barre .ssv-btn.ssv-close{width:44px;height:44px;color:#fff;background:rgba(10,12,16,.72);border:1.5px solid var(--ssv-accent);}
.ssv-agr-barre .ssv-btn.ssv-close:hover,.ssv-agr-barre .ssv-btn.ssv-close:focus-visible{background:var(--ssv-accent);color:#0b0d10;}
/* Mode diagnostic (?diag=1 seulement) */
.ssv-diag{position:fixed;left:0;right:0;bottom:0;z-index:2147483647;background:rgba(0,0,0,.86);color:#3f3;font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));box-sizing:border-box;pointer-events:none;max-height:46vh;overflow:hidden;}
.ssv-diag-tete{display:flex;align-items:center;gap:6px;margin-bottom:2px;color:#9f9;}
.ssv-diag-tete span{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssv-diag button{pointer-events:auto;font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;color:#000;background:#3f3;border:0;border-radius:4px;padding:6px 9px;cursor:pointer;}
.ssv-diag pre{margin:0;white-space:pre-wrap;word-break:break-all;font:inherit;color:inherit;}
.ssv-diag.ssv-diag-mini pre{max-height:4.1em;overflow:hidden;}
@media (prefers-reduced-motion:reduce){.ssv-max,.ssv-barre{transition:none;}}