/* ══════════════════════════════════════════════════════════════
   PORTES MR SOLUTIONS · v2
   Meme palette, meme marque. Ce qui change : la porte du hero est
   construite en 3D et s'ouvre, les services deviennent une vraie porte
   blanche dans un mur de declin, et deux sections passent au clair
   pour que la page respire.
   Pose apres base.css : a specificite egale, ces regles gagnent.
   ══════════════════════════════════════════════════════════════ */

:root{
  --clair:#E9ECEF;
  --clair-2:#DCE0E5;
  --encre-clair:#141922;
  --texte-clair:#3E4654;
  --texte-clair-2:#5B6370;
  --bleu-sur-clair:#1B4FD6;
  /* stuc de la tole : bruit eclaire, pose en multiplication */
  --stuc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='7' stitchTiles='stitch' result='n'/><feDiffuseLighting in='n' lighting-color='%23fff' surfaceScale='1.3'><feDistantLight azimuth='225' elevation='58'/></feDiffuseLighting></filter><rect width='240' height='240' filter='url(%23f)'/></svg>");
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23b)'/></svg>");
}

/* ══ HERO : on se tient dans l'entree, le soir, devant le garage ══
   Une seule scene, d'un bord a l'autre : le revetement, les deux
   lanternes, l'asphalte mouille et la porte. Le texte est pose sur le
   mur de la maison; le haut du titre s'aligne sur le linteau, la ligne
   de preuve sur le sol. L'affiche est la premiere image exacte de la 3D,
   recadree de la meme facon (cover, 60 % 50 %). */
.hero .porte,.hero .porte-sol{display:none}
.porte3d-hote{position:relative;pointer-events:none}
.porte3d-hote canvas.porte3d{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none;opacity:0;transition:opacity .3s ease}
.porte3d-on .porte3d-hote canvas.porte3d{opacity:1}
.porte3d-scene{display:none}
@media(min-width:1000px){
  .hero{min-height:min(100svh,62.5vw);padding:calc(var(--nav-h) + 4vh) 0 3vh}
  .porte3d-scene{display:block;position:absolute;inset:0;z-index:0;
    background:#0b0d11 url('/images/porte-scene-bureau-275.webp') 60% 50%/cover no-repeat}
  .hero-porte,.hero-bg{display:none}
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero h1{font-size:clamp(2.6rem,4.2vw,5rem)}
  .hero-sub{max-width:31em}
  /* le texte vit sur le mur : on assombrit le mur, jamais la porte */
  .hero::after{background:
    linear-gradient(90deg,rgba(11,13,17,.62) 0,rgba(11,13,17,.42) 30%,rgba(11,13,17,.12) 48%,rgba(11,13,17,0) 56%),
    linear-gradient(180deg,rgba(11,13,17,.7) 0,rgba(11,13,17,0) 16%,rgba(11,13,17,0) 86%,rgba(11,13,17,.85) 100%)}
}
@media(min-width:2000px){.hero h1{font-size:clamp(5rem,4.2vw,7rem)}}
@media(max-width:999px){
  .hero-bande{height:clamp(200px,55.5vw,560px);max-height:none}
  .hero-bande .porte3d-hote{position:absolute;inset:0;z-index:2;
    background:#0b0d11 url('/images/porte-scene-tel-274.webp') 50% 50%/cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 9%,#000 90%,transparent)}
}
/* la ligne d'identite du hero : metier et territoire */
.hero-inner .eyebrow{white-space:nowrap}
@media(max-width:420px){.hero-inner .eyebrow{letter-spacing:.2em;font-size:12.5px}}

/* ══ SERVICES : une porte blanche dans un mur de declin ══ */
.svc-facade{position:relative;overflow:hidden;color:var(--encre-clair);
  background:
    radial-gradient(90% 70% at 18% 0%,rgba(255,255,255,.55),transparent 62%),
    radial-gradient(120% 90% at 100% 100%,rgba(20,30,48,.22),transparent 60%),
    repeating-linear-gradient(180deg,#DCDFE2 0,#E3E6E9 20px,#D6DADE 27px,#A8AEB5 28.5px,#C5CACF 30px);
  border-top:1px solid #0d1015;box-shadow:inset 0 18px 30px -18px rgba(0,0,0,.55)}
.svc-facade::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:var(--grain);background-size:160px}
.svc-facade .wrap{position:relative;z-index:1}
.svc-facade .sec-head h2{color:var(--encre-clair);text-shadow:none}
.svc-facade .sec-head h2 em{color:var(--bleu-sur-clair)}
.svc-facade .sec-head p{color:var(--texte-clair)}
.svc-facade .eyebrow{color:var(--bleu-sur-clair)}
.svc-facade .eyebrow::before{background:linear-gradient(90deg,var(--bleu-sur-clair),transparent)}

.pd{position:relative;max-width:1080px;margin:0 auto}
/* le chambranle d'aluminium blanc et l'ombre du linteau sur la porte */
.pd-ouverture{position:relative;padding:16px 16px 0;
  background:linear-gradient(180deg,#F7F8F9,#E4E7EA);
  box-shadow:0 0 0 1px rgba(30,38,50,.18),0 2px 0 rgba(255,255,255,.9) inset,
             0 30px 60px -34px rgba(16,22,34,.55),0 10px 24px -14px rgba(16,22,34,.35)}
.pd-ouverture::before{content:"";position:absolute;left:16px;right:16px;top:16px;height:22px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,26,36,.34),transparent)}
.pd-tablier{position:relative;display:flex;flex-direction:column;background:#EEF0F2;
  box-shadow:inset 0 0 0 1px rgba(20,28,40,.12)}
.pd-tablier::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;mix-blend-mode:multiply;
  background-image:var(--stuc);background-size:240px}
.pd-section{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.2vw,26px);
  padding:clamp(16px,2vw,24px) clamp(16px,2.4vw,30px);
  background:linear-gradient(180deg,#F5F6F7 0%,#EDEFF1 60%,#E3E6E9 100%)}
/* le joint entre deux sections : un creux sombre et son arete claire */
.pd-section+.pd-section{box-shadow:inset 0 3px 0 rgba(26,34,46,.28),inset 0 4px 0 rgba(255,255,255,.95)}
.pd-fenetres{grid-template-columns:repeat(4,1fr);padding-top:clamp(14px,1.6vw,20px);padding-bottom:clamp(14px,1.6vw,20px)}
.pd-vitre{position:relative;display:block;aspect-ratio:3.2/1;border-radius:3px;overflow:hidden;
  background:
    linear-gradient(118deg,transparent 30%,rgba(255,255,255,.16) 38%,transparent 46%),
    radial-gradient(120% 140% at 50% 120%,rgba(255,196,120,.85),rgba(150,96,40,.35) 46%,rgba(14,18,26,.96) 78%),
    #0e131b;
  box-shadow:0 0 0 4px #E8EBEE,0 0 0 5px rgba(20,28,40,.22),inset 0 2px 6px rgba(0,0,0,.6)}
.pd-vitre::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 110%,rgba(255,214,150,.4),transparent 70%);
  animation:vitre-vie 7.3s ease-in-out infinite}
.pd-vitre:nth-child(2)::after{animation-duration:8.9s;animation-delay:-2.1s}
.pd-vitre:nth-child(3)::after{animation-duration:6.7s;animation-delay:-4.4s}
.pd-vitre:nth-child(4)::after{animation-duration:9.6s;animation-delay:-1.3s}
@keyframes vitre-vie{0%,100%{opacity:.7}37%{opacity:1}61%{opacity:.82}}

/* le panneau en relief : une feuille d'acier embossee qui ressort */
.pd-panneau{position:relative;display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,30px) clamp(18px,2vw,24px);
  background:linear-gradient(170deg,#FBFBFC 0%,#F0F2F4 55%,#E6E9EC 100%);
  border-radius:2px;overflow:hidden;color:var(--encre-clair);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.9),
    0 0 0 7px rgba(214,219,224,.55),
    0 0 0 8px rgba(26,34,46,.13),
    inset 2px 2px 0 rgba(255,255,255,.95),
    inset -2px -2px 0 rgba(26,34,46,.1),
    0 6px 14px -8px rgba(16,22,34,.28);
  transition:box-shadow .35s var(--ease)}
.pd-panneau::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:var(--stuc);background-size:240px}
/* la lumiere rasante qui traverse le panneau au survol */
.pd-panneau::after{content:"";position:absolute;top:-40%;bottom:-40%;width:42%;left:-60%;pointer-events:none;
  transform:skewX(-14deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  opacity:0;transition:left .9s var(--ease),opacity .4s}
a.pd-panneau:hover::after,a.pd-panneau:focus-visible::after{left:120%;opacity:1}
a.pd-panneau:hover,a.pd-panneau:focus-visible{box-shadow:
    0 0 0 1px rgba(255,255,255,.9),0 0 0 7px rgba(214,219,224,.55),0 0 0 8px rgba(27,79,214,.45),
    inset 2px 2px 0 #fff,inset -2px -2px 0 rgba(26,34,46,.1),0 12px 24px -12px rgba(16,22,34,.35)}
.pd-panneau>*{position:relative;z-index:1}
.pd-ico{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;margin-bottom:14px;
  color:var(--bleu-sur-clair);background:linear-gradient(160deg,rgba(27,79,214,.12),rgba(27,79,214,.03));border:1px solid rgba(27,79,214,.22)}
.pd-ico svg{width:22px;height:22px}
.pd-panneau h3{font-size:clamp(1.3rem,1.9vw,1.6rem);color:var(--encre-clair);letter-spacing:0;line-height:1}
.pd-panneau p{margin-top:9px;color:var(--texte-clair);font-size:15.5px;line-height:1.55;max-width:44ch}
.pd-lien{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu-sur-clair);transition:gap .25s}
.pd-lien svg{width:16px;height:16px}
a.pd-panneau:hover .pd-lien{gap:13px}
.pd-tag{position:absolute;top:clamp(16px,2vw,22px);right:clamp(16px,2vw,22px);font-family:var(--font-display);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--bleu-sur-clair);padding:4px 9px;border-radius:50px}
/* le coupe-froid de caoutchouc et la dalle de l'entree */
.pd-coupe-froid{display:block;height:9px;background:linear-gradient(180deg,#2a2f37,#0c0e11);border-radius:0 0 2px 2px}
.pd-sol{height:clamp(26px,3vw,40px);margin:0 -4%;
  background:radial-gradient(60% 100% at 50% 0,rgba(10,14,22,.35),transparent 70%),linear-gradient(180deg,#B9BDC2,#CDD1D5 60%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
@media(max-width:760px){
  .pd-ouverture{padding:10px 10px 0}
  .pd-sol{margin:0}
  /* au telephone, la porte garde sa forme de porte : chaque panneau
     devient une section pleine largeur, a panneau long, et le joint
     passe entre deux sections comme sur une vraie porte etroite */
  .pd-section:not(.pd-fenetres){display:contents}
  .pd-fenetres{gap:8px;padding:12px}
  .pd-section:not(.pd-fenetres)>.pd-panneau{border-radius:0;padding:24px 22px 22px;
    background:linear-gradient(180deg,#F5F6F7 0%,#EDEFF1 60%,#E3E6E9 100%);
    box-shadow:inset 0 3px 0 rgba(26,34,46,.28),inset 0 4px 0 rgba(255,255,255,.95),
      inset 0 0 0 12px rgba(238,240,242,.0),inset 12px 16px 0 -2px rgba(255,255,255,.0)}
  .pd-section:not(.pd-fenetres)>.pd-panneau>.pd-cadre{display:block}
  a.pd-panneau:hover,a.pd-panneau:focus-visible{box-shadow:inset 0 3px 0 rgba(26,34,46,.28),inset 0 4px 0 rgba(255,255,255,.95),inset 0 0 0 2px rgba(27,79,214,.45)}
}
/* le relief du panneau long, au telephone seulement */
.pd-cadre{display:none;position:absolute!important;z-index:0!important;inset:12px 10px 10px;border-radius:2px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(26,34,46,.12),inset 2px 2px 0 rgba(255,255,255,.95),inset -2px -2px 0 rgba(26,34,46,.09)}

/* ══ POURQUOI : Marc au travail ══ */
.why-chantier{position:absolute;z-index:3;left:-14%;bottom:-6%;width:46%;aspect-ratio:3/4;margin:0;border-radius:10px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(214,224,240,.14),0 24px 50px -18px rgba(0,0,0,.95);transform:rotate(-2deg)}
.why-chantier img{width:100%;height:100%;object-fit:cover}
.why-chantier figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;font-size:11.5px;line-height:1.3;color:#E6ECF6;
  background:linear-gradient(180deg,transparent,rgba(8,10,14,.88))}
.why-visual-wrap{position:relative;justify-self:end;width:100%;max-width:420px;grid-area:visual}
.why-visual-wrap .why-visual{justify-self:auto}
@media(max-width:999px){.why-chantier{left:auto;right:-3%;top:-5%;bottom:auto;width:38%;transform:rotate(2deg)}}

/* ══ TERRITOIRE : le camion sur la route ══ */
.zones{padding-top:0}
.route{position:relative;margin:0 0 clamp(36px,4.5vw,60px);height:clamp(340px,50vw,900px);overflow:hidden;background:#141821}
.route img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 100%}
.route::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,18,23,.35) 0,transparent 18%,transparent 58%,rgba(15,18,23,.78) 80%,var(--ink-2) 100%)}
.route-txt{position:absolute;z-index:2;left:max(4vw,calc((100vw - 1240px)/2));right:max(4vw,calc((100vw - 1240px)/2));bottom:clamp(20px,3vw,48px);text-align:left;
  display:grid;grid-template-columns:auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:end}
.route-txt h2{grid-column:1}
.route-txt .eyebrow{grid-column:1}
.route-txt p{grid-column:2;grid-row:2;justify-self:end;max-width:30ch;text-align:right}
.route-txt h2{font-size:clamp(2.2rem,4.4vw,3.6rem);color:var(--paper);margin-top:16px;text-shadow:0 2px 0 rgba(0,0,0,.35),0 6px 30px rgba(0,0,0,.7)}
.route-txt h2 em{font-style:normal;color:var(--blue-hi)}
.route-txt p{margin-top:14px;color:#E3E9F2;font-size:17px;text-shadow:0 1px 12px rgba(0,0,0,.85)}
@media(max-width:700px){
  .route{height:auto;aspect-ratio:auto;overflow:visible;background:none}
  .route picture{display:block;position:relative;height:58vw;overflow:hidden}
  .route img{object-position:30% 60%}
  .route::after{display:none}
  .route picture::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,var(--ink-2))}
  .route-txt{position:relative;left:auto;right:auto;bottom:auto;display:block;margin:-34px auto 0;width:min(1240px,92vw)}
  .route-txt p{text-align:left}
}

/* ══ AVIS : au clair, sur la tole ══ */
.reviews.clair{position:relative;background:
    radial-gradient(80% 60% at 50% 0,rgba(255,255,255,.7),transparent 70%),
    linear-gradient(180deg,#E7EAED,#DDE1E5);
  border-top:1px solid #0d1015;box-shadow:inset 0 18px 30px -20px rgba(0,0,0,.5)}
.reviews.clair::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.38;mix-blend-mode:multiply;background-image:var(--stuc);background-size:240px}
.reviews.clair .wrap{position:relative;z-index:1}
.reviews.clair .eyebrow{color:var(--bleu-sur-clair)}
.reviews.clair .eyebrow::before{background:linear-gradient(90deg,var(--bleu-sur-clair),transparent)}
.reviews.clair .sec-head h2{color:var(--encre-clair);text-shadow:none}
.reviews.clair .sec-head h2 em{color:var(--bleu-sur-clair)}
:is(.reviews.clair,.bloc.clair) .rev-rating{color:var(--texte-clair)}
:is(.reviews.clair,.bloc.clair) .rev-rating b{color:var(--encre-clair)}
:is(.reviews.clair,.bloc.clair) .rev{background:linear-gradient(180deg,#FFFFFF,#F7F8FA);box-shadow:0 0 0 1px rgba(20,28,40,.08),0 1px 0 #fff inset,0 18px 36px -24px rgba(16,24,40,.45)}
:is(.reviews.clair,.bloc.clair) .rev:hover{background:#fff;box-shadow:0 0 0 1px rgba(20,28,40,.1),0 26px 46px -24px rgba(16,24,40,.5)}
:is(.reviews.clair,.bloc.clair) .rev p{color:#262D38}
:is(.reviews.clair,.bloc.clair) .rev-by{border-top-color:rgba(20,28,40,.09)}
:is(.reviews.clair,.bloc.clair) .rev-by b{color:var(--encre-clair)}
:is(.reviews.clair,.bloc.clair) .rev-by span{color:var(--texte-clair-2)}
:is(.reviews.clair,.bloc.clair) .rev-stars svg,:is(.reviews.clair,.bloc.clair) .rev-rating-stars svg{color:#E8A80C}
:is(.reviews.clair,.bloc.clair) .rev-all{background:#fff;color:var(--encre-clair);border-color:rgba(232,168,12,.7);box-shadow:0 10px 24px -14px rgba(16,24,40,.4)}
:is(.reviews.clair,.bloc.clair) .rev-all .ar{color:#B07F00}
:is(.reviews.clair,.bloc.clair) .rev-all:hover{background:#fff;border-color:#E8A80C}

/* ══ FAQ : l'etiquette d'avertissement du ressort ══ */
.etiquette{display:flex;gap:12px;align-items:flex-start;margin:4px 22px 22px;padding:12px 14px 12px 12px;max-width:520px;border-radius:3px;
  background:linear-gradient(180deg,#FFD84A,#F2C318);color:#16130a;transform:rotate(-.6deg);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 20px -12px rgba(0,0,0,.8)}
.etiquette svg{flex:none;width:30px;height:30px}
.etiquette b{display:block;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.08em;text-transform:uppercase;line-height:1.1}
.etiquette span{display:block;font-size:13px;line-height:1.35;margin-top:3px;font-weight:600}
@media(max-width:600px){.etiquette{margin:2px 18px 18px}}

/* ══ PAGES DE SERVICE ══ */
.ph{position:relative;overflow:hidden;padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(48px,6vw,84px);
  background:radial-gradient(70% 90% at 12% 30%,rgba(46,107,255,.14),transparent 66%),var(--ink)}
.ph::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:screen;background-image:var(--grain);background-size:160px}
.ph-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--paper-mute);margin-bottom:22px}
.crumbs a{color:var(--paper-dim);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--paper)}
.ph h1{font-size:clamp(2.4rem,5vw,4.4rem);color:var(--paper);text-shadow:var(--title-shadow)}
.ph h1 em{font-style:normal;color:var(--blue-hi)}
.ph-sub{margin-top:20px;color:var(--paper-dim);font-size:clamp(16px,1.5vw,18.5px);max-width:36em}
.ph .hero-cta{justify-content:flex-start;margin-top:30px}
.ph-media{position:relative;justify-self:end;width:100%;max-width:480px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(214,224,240,.12),0 40px 80px -36px rgba(0,0,0,.95)}
.ph-media img,.ph-media video{width:100%;height:100%;object-fit:cover;display:block}
.ph-media figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:13px;color:#E3E9F2;background:linear-gradient(180deg,transparent,rgba(8,10,14,.9))}
@media(max-width:860px){.ph-grid{grid-template-columns:1fr}.ph-media{justify-self:stretch;max-width:none;aspect-ratio:4/3}}
.bloc{padding:clamp(56px,7vw,96px) 0;border-top:1px solid var(--line)}
.bloc.clair{background:linear-gradient(180deg,#E9ECEF,#DEE2E6);color:var(--encre-clair);border-top-color:#0d1015;position:relative}
.bloc.clair::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:var(--stuc);background-size:240px}
.bloc.clair>.wrap{position:relative}
.bloc.clair .eyebrow{color:var(--bleu-sur-clair)}
.bloc.clair .eyebrow::before{background:linear-gradient(90deg,var(--bleu-sur-clair),transparent)}
.bloc.clair h2{color:var(--encre-clair);text-shadow:none}
.bloc.clair h2 em{color:var(--bleu-sur-clair)}
.bloc.clair p,.bloc.clair li{color:var(--texte-clair)}
.bloc h2{font-size:clamp(2rem,3.8vw,3rem);color:var(--paper);margin-top:16px}
.bloc h2 em{font-style:normal;color:var(--blue-hi)}
.bloc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.bloc p{color:var(--paper-dim);margin-top:16px;max-width:60ch}
.liste-pieces{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.liste-pieces li{position:relative;padding:14px 16px 14px 44px;border-radius:10px;font-size:15.5px;line-height:1.45;
  background:var(--card-grad);box-shadow:var(--card-edge),var(--card-shadow);color:var(--paper)}
.liste-pieces li b{display:block;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper);margin-bottom:2px}
.liste-pieces li::before{content:"";position:absolute;left:16px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(46,107,255,.18)}
.bloc.clair .liste-pieces li{background:#fff;box-shadow:0 0 0 1px rgba(20,28,40,.08),0 12px 26px -20px rgba(16,24,40,.45);color:var(--texte-clair)}
.bloc.clair .liste-pieces li b{color:var(--encre-clair)}
.bloc.clair .liste-pieces li::before{background:var(--bleu-sur-clair);box-shadow:0 0 0 4px rgba(27,79,214,.14)}
@media(max-width:860px){.bloc-grid{grid-template-columns:1fr}.liste-pieces{grid-template-columns:1fr}}
.etapes{list-style:none;counter-reset:e;display:grid;gap:0;margin-top:8px}
.etapes li{counter-increment:e;position:relative;padding:20px 0 20px 64px;border-bottom:1px solid var(--line-soft)}
.etapes li:last-child{border-bottom:0}
.etapes li::before{content:counter(e);position:absolute;left:0;top:18px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--blue-hi);background:rgba(46,107,255,.1);border:1px solid rgba(46,107,255,.35)}
.etapes h3{font-family:var(--font-display);font-size:1.3rem;text-transform:none;font-weight:700;color:var(--paper)}
.etapes p{margin-top:4px;font-size:15.5px}
.avis-page{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,3vw,40px)}
@media(max-width:900px){.avis-page{grid-template-columns:1fr}}
.liens-services{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.liens-services a{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:50px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper);background:var(--card-grad);border:1px solid var(--line);transition:border-color .25s,transform .2s}
.liens-services a:hover{border-color:rgba(46,107,255,.6);transform:translateY(-2px)}
.liens-services svg{width:15px;height:15px;color:var(--blue-hi)}

@media(prefers-reduced-motion:reduce){
  .pd-vitre::after{animation:none}
  .pd-panneau::after{transition:none}
  .porte3d-hote canvas.porte3d{transition:none}
}

.zones-aussi{margin-top:14px;font-size:13.5px;color:var(--paper-dim);line-height:1.55;max-width:46ch}
.liste-pieces li a{color:var(--blue-hi);text-decoration:underline;text-underline-offset:3px}
.bloc.clair .liste-pieces li a,.bloc.clair p a{color:var(--bleu-sur-clair)}
.bloc p a{color:var(--blue-hi);text-decoration:underline;text-underline-offset:3px}

/* revue UX : focus lisible sur le clair, fil d'Ariane, video, ligne d'identite etroite */
:is(.svc-facade,.reviews.clair,.bloc.clair) :is(a,button):focus-visible{outline-color:var(--bleu-sur-clair)}
.crumbs{color:var(--paper-dim)}
.crumbs a{display:inline-block;padding:6px 0}
.ph .hero-rating{margin-top:22px}
.ph-media{position:relative}
.video-pause{position:absolute;z-index:3;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(8,10,14,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px)}
.video-pause svg{width:18px;height:18px}
.video-pause[aria-pressed="true"] svg path{d:path("M8 5v14l11-7z")}
@media(max-width:359px){.hero-inner .eyebrow{white-space:normal}}
.nav-tel{width:44px;height:44px}

/* ══ revue DA ══ */
/* la barre suit la largeur du hero aux grands paliers */
@media (min-width:1500px) and (max-width:1999.98px){.nav .wrap{width:min(1640px,93vw)}}
@media (min-width:2000px){.nav .wrap{width:min(2120px,88vw)}}
/* les titres se cassent en lignes egales */
h1,h2{text-wrap:balance}
/* la porte des services s'arrete sur la dalle */
.svc-facade{padding-bottom:0}
.pd-sol{height:clamp(56px,6vw,90px);margin:0 calc(50% - 50vw);-webkit-mask-image:none;mask-image:none;position:relative;
  background:
    radial-gradient(42% 70% at 50% 0,rgba(8,12,20,.45),transparent 72%),
    linear-gradient(180deg,#9EA3A9 0,#B4B8BD 30%,#A9AEB4 100%)}
.pd-sol::before{content:"";position:absolute;inset:0;opacity:.55;mix-blend-mode:multiply;background-image:var(--stuc);background-size:180px}
.pd-sol::after{content:"";position:absolute;left:0;right:0;top:58%;height:1px;background:rgba(40,46,56,.35);box-shadow:0 1px 0 rgba(255,255,255,.35)}
@media(max-width:760px){.pd-sol{margin:0 -4vw}}
/* la lueur des fenetres tombe du plafond, et le reflet traverse la rangee d'un trait */
.pd-vitre{background:
    linear-gradient(118deg,transparent 30%,rgba(255,255,255,.14) 38%,transparent 46%),
    radial-gradient(140% 120% at 50% -30%,rgba(255,196,120,.85),rgba(150,96,40,.35) 46%,rgba(14,18,26,.96) 80%),
    #0e131b;background-size:400% 100%,100% 100%,auto}
.pd-vitre:nth-child(1){background-position:0 0,0 0,0 0}
.pd-vitre:nth-child(2){background-position:33% 0,0 0,0 0}
.pd-vitre:nth-child(3){background-position:66% 0,0 0,0 0}
.pd-vitre:nth-child(4){background-position:100% 0,0 0,0 0}
.pd-vitre::after{background:radial-gradient(70% 90% at 50% -10%,rgba(255,214,150,.4),transparent 70%)}
/* Marc reste lisible : la photo de chantier passe en haut a gauche */
@media(min-width:1000px){.why-chantier{left:-16%;top:-5%;bottom:auto;transform:rotate(-2deg)}}
@media(max-width:999px){.why-chantier{right:8px;width:34%}}
/* les initiales des avis */
:is(.reviews.clair,.bloc.clair) .rev-by .rev-av{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.25)}
/* au telephone, trois avis puis le lien vers tous les avis */
@media(max-width:700px){.reviews.clair .rev-grid .rev:nth-child(n+4){display:none}}
/* textes gris trop pales sur le sombre */
.cta-band-txt p,.faq-foot,.bt-head p{color:var(--paper-dim)}
/* la photo d'installation garde son format paysage */
.ph-media-large{aspect-ratio:4/3;max-width:560px}
/* territoire au telephone : la phrase sous le titre, alignee */
@media(max-width:700px){.route-txt p{justify-self:start;max-width:none}}
/* l'etiquette est collee sur une plaque d'acier rivetee */
.plaque-acier{display:inline-block;margin:6px 22px 22px;padding:14px 16px;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),linear-gradient(180deg,#5d6672,#3c434d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(0,0,0,.4),0 14px 26px -16px rgba(0,0,0,.9);position:relative}
.plaque-acier::before,.plaque-acier::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;top:6px;
  background:radial-gradient(circle at 35% 35%,#d7dde5,#6c7480 60%,#2b3038);box-shadow:0 1px 1px rgba(0,0,0,.6)}
.plaque-acier::before{left:6px}.plaque-acier::after{right:6px}
.plaque-acier .etiquette{margin:0;transform:rotate(-.4deg)}
.bloc .plaque-acier{margin:20px 0 6px}
@media(max-width:600px){.plaque-acier{margin:2px 18px 18px}}

/* ══ SERVICES, v2.1 : la porte blanche dans le declin de nuit ══
   Le mur clair ne tenait pas apres le hero de nuit : on reste devant la
   meme maison, le soir. Le declin bleu nuit du hero porte la porte
   blanche, qui devient l'objet le plus clair de l'ecran. */
.svc-facade{color:var(--paper);
  background:
    radial-gradient(55% 48% at 50% 64%,rgba(140,170,230,.13),transparent 72%),
    radial-gradient(120% 70% at 50% 0%,rgba(4,6,10,.45),transparent 62%),
    repeating-linear-gradient(180deg,#232b37 0,#29323f 21px,#222935 26.5px,#0e1218 28.2px,#1b222c 30px)}
.svc-facade::before{opacity:.22;mix-blend-mode:overlay}
.svc-facade .sec-head h2{color:var(--paper);text-shadow:0 4px 24px rgba(0,0,0,.45)}
.svc-facade .sec-head h2 em{color:var(--blue-hi)}
.svc-facade .sec-head p{color:var(--paper-dim)}
.svc-facade .eyebrow{color:var(--blue-hi)}
.svc-facade .eyebrow::before{background:linear-gradient(90deg,var(--blue-hi),transparent)}
/* l'ombre de la porte sur le mur et sur l'entree */
.pd-ouverture{box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.9) inset,
  0 34px 70px -30px rgba(0,0,0,.85),0 0 90px -20px rgba(150,180,235,.18)}
.pd-sol{background:
    radial-gradient(46% 80% at 50% 0,rgba(0,0,0,.55),transparent 72%),
    radial-gradient(60% 120% at 50% 0,rgba(150,180,235,.08),transparent 70%),
    linear-gradient(180deg,#16191e 0,#1c2026 35%,#15181c 100%)}
.pd-sol::before{opacity:.18;mix-blend-mode:overlay}
.pd-sol::after{background:rgba(0,0,0,.45);box-shadow:0 1px 0 rgba(255,255,255,.05)}
/* une vraie porte a longs panneaux : quatre sections, deux panneaux par
   section, et la rangee vitree aligne une fenetre longue sur chaque
   panneau. Plus large et plus basse, elle retrouve les proportions
   d'une porte simple de 9 pi sur 7 pi. */
.pd{max-width:1200px}
.pd-fenetres{grid-template-columns:1fr 1fr}
.pd-vitre{aspect-ratio:5.2/1;background-size:200% 100%,100% 100%,auto}
.pd-vitre:nth-child(1){background-position:0 0,0 0,0 0}
.pd-vitre:nth-child(2){background-position:100% 0,0 0,0 0}
.pd-section:not(.pd-fenetres){padding-top:clamp(12px,1.4vw,18px);padding-bottom:clamp(12px,1.4vw,18px)}
.pd-panneau{padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,30px) clamp(16px,1.8vw,20px)}
@media(max-width:760px){.pd-vitre{aspect-ratio:3.6/1}}
/* le texte fait partie de la tole : imprime dans l'acier, eclaire par la
   meme lumiere que le relief (haut gauche). Le grain et la lumiere
   rasante passent PAR-DESSUS le texte, comme sur une vraie porte. */
.pd-panneau::before,.pd-panneau::after{z-index:2}
.pd-panneau::before{opacity:.38}
.pd-ico{width:auto;height:auto;margin-bottom:16px;background:none;border:0;border-radius:0;color:#8a919c;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(20,28,40,.28))}
.pd-ico svg{width:28px;height:28px;stroke-width:2.2}
.pd-panneau h3{color:#262c36;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(20,28,40,.12)}
.pd-panneau p{color:#4a5261;text-shadow:0 1px 0 rgba(255,255,255,.75)}
.pd-lien{text-shadow:0 1px 0 rgba(255,255,255,.8)}
/* l'urgence : un autocollant de vinyle pose sur la tole, pas une pastille d'interface */
.pd-tag{border-radius:3px;padding:5px 10px 4px;letter-spacing:.14em;
  background:linear-gradient(180deg,#2f63e6 0%,#1d4fd2 52%,#1846c2 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.35),0 1px 1.5px rgba(10,16,30,.35)}
/* le reflet du ciel glisse sur les deux vitres au defilement, d'un seul trait */
.pd-fenetres{--rp:-400px}
.pd-vitre{background-image:
    linear-gradient(104deg,transparent 0,transparent 40%,rgba(220,232,255,.2) 45%,rgba(220,232,255,.07) 48.5%,transparent 53%,transparent 100%),
    radial-gradient(140% 120% at 50% -30%,rgba(255,196,120,.85),rgba(150,96,40,.35) 46%,rgba(14,18,26,.96) 80%),
    linear-gradient(#0e131b,#0e131b);
  background-repeat:no-repeat;background-size:var(--rw,1100px) 100%,100% 100%,100% 100%}
.pd-vitre:nth-child(1),.pd-vitre:nth-child(2){background-position:calc(var(--rp) - var(--ox,0px)) 0,0 0,0 0}
/* la porte du hero se saisit au curseur et au doigt */
.hero::before,.hero::after,.hero-bande::after{pointer-events:none}
.p3d-prise{position:absolute;z-index:3;pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.p3d-prise.tenue{cursor:grabbing}
@media(min-width:1000px){.hero-inner{pointer-events:none}.hero-inner>*{pointer-events:auto}}
/* le bas de la porte : le coupe-froid de caoutchouc ecrase sur la dalle,
   l'ombre de contact, puis la dalle de beton mouillee qui reflete la
   porte blanche et s'eteint vers le bas */
.pd-coupe-froid{height:11px;border-radius:0;
  background:linear-gradient(180deg,#9aa1aa 0,#9aa1aa 2px,#2a2e35 2px,#16181c 55%,#0a0b0d 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.05)}
.pd-sol{height:clamp(84px,8vw,130px);border-bottom:1px solid rgba(255,255,255,.04);
  background:
    linear-gradient(180deg,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 14%) center top/min(1200px,100% - 8vw) 100% no-repeat,
    linear-gradient(180deg,rgba(214,222,232,.13) 0,rgba(214,222,232,.05) 38%,rgba(214,222,232,0) 72%) center top/min(1168px,100% - 8vw) 100% no-repeat,
    radial-gradient(55% 90% at 50% 0,rgba(150,175,215,.10),transparent 75%),
    linear-gradient(180deg,#252a32 0,#1d2128 45%,#14171b 100%)}
.pd-sol::before{opacity:.28;mix-blend-mode:overlay}
.pd-sol::after{top:62%;background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.06)}
@media(max-width:760px){.pd-sol{height:64px;background-size:100% 100%,100% 100%,auto,auto}}
/* v2.2 : une seule dalle sous la porte, reflet doux sans arete, et la
   fondation de beton de chaque cote, comme sur la facade du hero */
.pd-sol{background:
    radial-gradient(40% 26% at 50% 0,rgba(0,0,0,.7),transparent 100%),
    radial-gradient(46% 95% at 50% 0,rgba(214,222,232,.12),rgba(214,222,232,.04) 45%,transparent 80%),
    linear-gradient(180deg,#272c34 0,#1e2229 40%,#15181c 100%);
  background-size:100% 100%;background-repeat:no-repeat}
.pd-sol{position:relative}
.pd-sol>i{display:none}
.svc-facade .pd{position:relative}
.svc-facade .pd::after{content:"";position:absolute;z-index:-1;left:calc(50% - 50vw);right:calc(50% - 50vw);
  bottom:calc(clamp(84px,8vw,130px) - 1px);height:clamp(22px,2.2vw,32px);pointer-events:none;
  background:linear-gradient(180deg,#3c414a 0,#353a42 70%,#2b2f36 100%);
  box-shadow:inset 0 2px 0 rgba(0,0,0,.45),inset 0 3px 0 rgba(255,255,255,.04)}
@media(max-width:760px){.svc-facade .pd::after{bottom:63px;height:18px}.pd-sol{background-size:100% 100%}}
/* le formulaire a l'horizontale sur grand ecran : l'en-tete sur une
   ligne, puis les six champs sur deux rangees de trois, la description
   a droite, les consentements cote a cote et le bouton sous la description.
   Memes champs, memes noms, meme ordre de tabulation. */
@media(min-width:1400px){
  .contact-grid{grid-template-columns:1fr;gap:clamp(36px,3vw,56px)}
  .contact-left{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;column-gap:clamp(40px,4vw,80px);align-items:end}
  .contact-left>.eyebrow,.contact-left>h2,.contact-left>p{grid-column:1}
  .contact-left>.contact-perks{grid-column:2;grid-row:1/span 3;margin-top:0;align-self:end}
  .contact-left>.contact-phone{grid-column:3;grid-row:1/span 3;align-self:end;margin-top:0}
  .form-card #quoteForm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);column-gap:16px;row-gap:14px;align-items:start}
  #quoteForm .frow{display:contents}
  #quoteForm>h3{grid-column:1/-1;grid-row:1}
  #quoteForm>.fsub{grid-column:1/-1;grid-row:2;margin-top:-6px;margin-bottom:6px}
  #quoteForm>.ffield{grid-column:4;grid-row:3/span 2;display:flex;flex-direction:column;align-self:stretch;margin:0}
  #quoteForm>.ffield textarea{flex:1;min-height:0;resize:none}
  #quoteForm .frow>.ffield{margin:0}
  #quoteForm>.consent{grid-column:1/4;grid-row:5;margin-top:4px;grid-template-columns:1fr 1fr;align-items:stretch}
  #quoteForm>.fbtn{grid-column:4;grid-row:5;align-self:end;margin-top:0}
  #quoteForm>.fnote{grid-column:1/-1;grid-row:6}
}
/* telephone : des blocs de texte serres. Sur 390 px, un interligne de
   1,6 a 1,7 ecarte les lignes au point de defaire le paragraphe. */
@media(max-width:760px){
  :is(p,li,.contact-perk,.rev p){line-height:1.46!important}
  :is(.faq-a p,.prose p,.prose li){line-height:1.5!important}
  :is(.zones-note,.zones-aussi,.fnote,.fsub,.consent-item label,.hero-appui){line-height:1.4!important}
}
/* un numero de telephone ne se coupe jamais */
a[href^="tel:"]{white-space:nowrap}
/* ══ SERVICES AU TELEPHONE : la vraie porte, en petit ══
   Six sections de texte empilees faisaient une porte de six etages. Au
   telephone, la porte garde ses proportions (deux panneaux par section,
   trois sections et la rangee vitree); chaque panneau porte son icone et
   son nom. On touche un panneau : il s'enfonce, et sa fiche s'affiche
   sur l'entree, sous la porte. */
.pd-fiches{display:none}
@media(max-width:760px){
  .pd-section:not(.pd-fenetres){display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 9px}
  .pd-section:not(.pd-fenetres)>.pd-panneau{border-radius:2px;padding:10px 8px;align-items:center;justify-content:center;text-align:center;aspect-ratio:2.35/1;
    background:linear-gradient(170deg,#FBFBFC 0%,#F0F2F4 55%,#E6E9EC 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 4px rgba(214,219,224,.55),0 0 0 5px rgba(26,34,46,.13),inset 2px 2px 0 rgba(255,255,255,.95),inset -2px -2px 0 rgba(26,34,46,.1);
    cursor:pointer;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s,background .25s}
  .pd-section:not(.pd-fenetres)>.pd-panneau>:is(p,.pd-lien,.pd-tag,.pd-cadre){display:none}
  .pd-section:not(.pd-fenetres)>.pd-panneau .pd-ico{margin:0 0 6px}
  .pd-section:not(.pd-fenetres)>.pd-panneau .pd-ico svg{width:21px;height:21px}
  .pd-section:not(.pd-fenetres)>.pd-panneau h3{font-size:14.5px;letter-spacing:.04em}
  .pd-section:not(.pd-fenetres)>.pd-panneau.actif{background:linear-gradient(170deg,#E9ECEF 0%,#E3E6EA 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 4px rgba(214,219,224,.55),0 0 0 5px rgba(27,79,214,.55),inset 2px 2px 0 rgba(26,34,46,.14),inset -1px -1px 0 rgba(255,255,255,.9)}
  .pd-section:not(.pd-fenetres)>.pd-panneau.actif .pd-ico{color:var(--bleu-sur-clair)}
  .pd-fenetres{gap:8px;padding:9px}
  .pd-vitre{aspect-ratio:4.2/1}
  .pd-fiches{display:block;margin:0 -4vw;padding:6px 4vw 34px;background:#15181c}
  .pd-fiche{position:relative;background:var(--card-grad);border:1px solid var(--line-soft);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--card-edge),0 18px 40px -24px rgba(0,0,0,.9)}
  .pd-fiche[hidden]{display:none}
  .pd-fiche h3{font-size:1.3rem;color:var(--paper);letter-spacing:.01em}
  .pd-fiche p{margin-top:8px;color:var(--paper-dim);font-size:15.5px}
  .pd-fiche .pd-lien{color:var(--blue-hi);text-shadow:none;margin-top:12px;padding-top:0}
  .pd-fiche .pd-tag{position:static;display:inline-block;margin-bottom:10px}
}
/* telephone : le bas de la porte touche le sol. Le coupe-froid de 11 px,
   encadre par les montants blancs, se lisait comme une autre fenetre. */
@media(max-width:760px){
  .pd-coupe-froid{height:5px;background:linear-gradient(180deg,#202328,#08090b);box-shadow:none}
  .pd-sol{background:
    linear-gradient(180deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 10px),
    radial-gradient(60% 90% at 50% 0,rgba(214,222,232,.10),transparent 80%),
    linear-gradient(180deg,#2a2f37 0,#1e2229 45%,#15181c 100%)}
}
@media(max-width:760px){
  .pd-coupe-froid{height:4px}
  .pd-sol{background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 6px) center top/calc(100% - 8vw) 100% no-repeat,
    linear-gradient(180deg,#3d424b 0,#2c3037 30%,#1a1d22 75%,#15181c 100%)}
}
/* le surtitre respire au-dessus de son titre, partout (18 px, comme les autres sections) */
.contact-left>.eyebrow+h2,.ph .eyebrow+h1{margin-top:18px}
/* Marc reste lisible au telephone : la photo de chantier se decale vers le coin, hors du visage */
@media(max-width:999px){.why-chantier{right:-10px;width:29%;top:-9%}}
/* hero bureau : un bloc de texte plus serre, de la hauteur de l'ouverture (linteau au sol) */
@media(min-width:1000px){
  .hero-inner .eyebrow{margin-bottom:14px}
  .hero-sub{margin-top:16px}
  .hero-cta{margin-top:28px}
  .hero-rating{margin-top:16px}
  .hero-appui{margin-top:10px}
  .hero-sub .sub-2{display:block}
}
@media(max-width:999px){.hero-sub{text-wrap:balance}}

/* ══ hero bureau : boutons et preuve a l'echelle du sous-titre, pour que le bloc
   tienne entre le haut de la porte et la fondation sans rapetisser le texte ══ */
@media(min-width:1000px) and (max-width:1999px){
  .hero .hero-sub{margin-top:14px}
  .hero .hero-cta{margin-top:24px;gap:14px}
  .hero .hero-cta .btn-primary{padding:11px 24px;gap:10px}
  .hero .hero-cta .btn-ghost{padding:13.5px 24px;gap:10px;font-size:16.5px}
  .hero .hero-cta .btn-main{font-size:16.5px}
  .hero .hero-cta .btn-sub{font-size:10.5px}
  .hero .hero-cta svg{width:19px;height:19px}
  .hero .hero-rating{margin-top:14px;font-size:13.5px;padding:7px 14px 7px 16px}
  .hero .hero-appui{margin-top:9px}
}

/* sous-titre : la phrase au bureau, les trois services en une ligne au telephone */
.hero-sub .sub-court{display:none}
@media(max-width:999px){
  .hero-sub .sub-long{display:none}
  .hero-sub .sub-court{display:inline;white-space:nowrap}
}

/* telephone : les deux boutons tiennent dans le premier ecran, sans defiler */
@media(max-width:999px){
  .hero .hero-sub{margin-top:16px}
  .hero .hero-cta{margin-top:22px;gap:11px}
  .hero .hero-cta .btn-primary{padding-top:10px;padding-bottom:10px}
  .hero .hero-cta .btn-ghost{padding-top:13.5px;padding-bottom:13.5px}
}

/* bureau : la photo de chantier passe au coin bas droit du portrait, epinglee en
   biais; le visage et le nom de Marc restent degages */
@media(min-width:1000px){
  .why-chantier{left:auto;top:auto;right:-11%;bottom:-8%;width:40%;transform:rotate(2.5deg)}
}

.fond-coupe-froid{background-image:url('/blog/images/coupe-froid.jpg')}