/* CONF-M — homepage (lead demo, LEAD-2026-025), V2 built from the rework mockups of 2026-09-25.
   styles.css is assembled by qa/genereaza_css.py: this base, then the mockups' own CSS converted (exact
   geometry, nothing measured by eye), then qa/css/03-ajustari.css (what the page changes on purpose).
   One scale for everything: --k = 1 at the mockup widths (390 on the phone, 1600 on PC).
     < 1100 px : the phone mockups, scaled with the screen up to 540 px wide, then centred (tablet);
     >= 1100 px: the PC mockups, scaled with the screen up to 1920 px, then centred; above 1920 the
                 photos, waves and bands that touch the mockup's edge go on to the window's edge (--m).
   Colours from the client's sheet (#2C52A0, black, white) and the mockups' navy shades of that blue.
   Fonts self-hosted, zero external request: Gelasio + Arimo (the free metric twins of the mockups' Georgia
   and Arial; OFL). */

@font-face{font-family:"Gelasio";src:url("assets/fonts/gelasio-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Gelasio";src:url("assets/fonts/gelasio-italic-var-latin.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Arimo";src:url("assets/fonts/arimo-var-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --blue:#2c52a0;              /* the client's main colour (fiche) */
  --blue-hover:#23457f;
  --navy:#142a52;--deep:#0d2246;--ink:#10151d;--muted:#576373;--pale:#eef2f8;--line:#d8e0ec;
  --wa:#25D366;
  --f-titre:"Gelasio",Georgia,"Times New Roman",serif;
  --f-texte:"Arimo",Arial,Helvetica,sans-serif;
}

/* ─── the scale ───────────────────────────────────────── */
html{container-type:inline-size;-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:clamp(56px, calc(64 * min(100vw,540px) / 390), 68px)}   /* the header's height, written out: html cannot see body's --entete-h */
body{
  --k:calc(min(100vw,540px) / 390);
  --sw:calc(390 * var(--k));                               /* scene width */
  --m:max(0px, calc((100vw - var(--sw)) / 2));             /* margin outside the scene, each side */
  --entete-h:clamp(56px, calc(64 * var(--k)), 68px);       /* the mockup's 78 read as too tall (Iulian, 2026-09-26, variant B); capped, or the tablet's scale made it 108 */
}
@supports (width:1cqw){body{--k:calc(min(100cqw,540px) / 390);--m:max(0px, calc((100cqw - var(--sw)) / 2))}}
@media (min-width:1100px){
  body{--k:calc(min(100vw,1920px) / 1600);--sw:calc(1600 * var(--k));--entete-h:clamp(64px, calc(80 * var(--k)), 84px)}   /* mockup 100: 90 → 72 at 1440, 120 → 84 at 1920 */
  html{scroll-padding-top:clamp(64px, calc(80 * min(100vw,1920px) / 1600), 84px)}
  @supports (width:1cqw){body{--k:calc(min(100cqw,1920px) / 1600)}}
}
.scena{position:relative;width:var(--sw);margin:0 auto}
.s{position:relative;overflow:hidden;overflow:clip;width:100%}   /* clip, not hidden: a hidden box is still a scroll container, and
   scrollIntoView / keyboard focus scrolled the whole section inside itself (S03 title lifted 193px out of view) */

/* ─── base ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--f-texte);overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.fleche{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.saut{position:absolute;left:-9999px;top:8px;z-index:200;display:inline-flex;align-items:center;min-height:44px;background:#fff;color:var(--ink);padding:0 14px;border-radius:12px}   /* 44px tap zone; 12px = the page's button radius */
.saut:focus{left:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ─── header: fixed, white, over the top of the hero (the mockup draws it inside S01) ─── */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--entete-h);background:#fff;border-bottom:1px solid #e8eaee}
.entete__barre{position:relative;width:var(--sw);height:100%;margin:0 auto;display:flex;align-items:center;padding:0 calc(20 * var(--k))}
.entete__logo{position:relative;flex:none;display:block;width:calc(var(--entete-h) * .86 * 1.728);height:calc(var(--entete-h) * .86)}   /* 1.728 = the logo's viewBox */
.entete__logo svg{width:100%;height:100%;fill:#2c52a0;overflow:visible}   /* the drawing touches its viewBox bottom: small sizes clipped « RÊVES ET CONFORT » */
.entete__num,.entete__devis{display:none}
.entete__actions{margin-left:auto;display:flex;align-items:center;gap:8px}   /* rule 10: phone + menu hard right */
.entete__tel,.burger{display:grid;place-items:center;width:44px;height:44px;border:0;cursor:pointer}
.entete__tel{border-radius:calc(4 * var(--k));background:var(--blue);color:#fff}
.entete__tel svg{width:22px;height:22px;fill:currentColor}
.burger{background:none;color:var(--ink);grid-template-rows:repeat(3,2px);row-gap:6px;align-content:center;justify-items:center;margin-right:-9px}   /* the lines' right edge sits 20k from the edge, like the logo's left (rule 10) */
.burger span{display:block;width:26px;height:2px;border-radius:1px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
html:not(.js) .burger{display:none}

/* phone / tablet menu: a panel under the header (without JavaScript: hidden; the footer lists the same links) */
.menu{display:none}
.js .menu{display:flex;position:fixed;left:0;right:0;top:var(--entete-h);bottom:0;z-index:49;flex-direction:column;gap:28px;
  padding:24px max(20px, calc(var(--m) + 20 * var(--k))) 40px;background:#fff;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.js .menu.est-ouvert{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease}
.menu__liste{display:grid;border-top:1px solid var(--line)}
.menu__liste li{border-bottom:1px solid var(--line)}
.menu__liste a{display:block;padding:16px 2px;font:600 26px/1.15 var(--f-titre);letter-spacing:-.02em;color:var(--ink)}
.menu__devis{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 20px;border-radius:4px;background:var(--blue);color:#fff;font:700 16px/1.2 var(--f-texte)}
html.menu-ouvert,body.menu-ouvert{overflow:hidden}

@media (min-width:1100px){
  /* PC: the mockup's header (S01 lines 15-25), real logo from the client's PDF */
  .entete{border-bottom-width:max(1px, calc(1 * var(--k)))}
  .entete__barre{padding:0 calc(72 * var(--k))}
  .entete__logo{width:calc(var(--entete-h) * .86 * 1.728 + 14 * var(--k));height:calc(var(--entete-h) * .86)}
  .entete__logo svg{position:absolute;left:calc(7 * var(--k));top:0;width:calc(var(--entete-h) * .86 * 1.728);height:calc(var(--entete-h) * .86)}
  .js .menu,.menu{display:flex;position:static;flex-direction:row;padding:0;margin-left:calc(123 * var(--k));background:none;opacity:1;visibility:visible;transform:none;overflow:visible}
  .menu__liste{display:flex;align-items:center;gap:calc(42 * var(--k));border:0}
  .menu__liste li{border:0}
  .menu__liste a{position:relative;padding:0;font:600 calc(15 * var(--k))/1.15 var(--f-texte);letter-spacing:0;color:var(--ink)}
  .menu__liste a::after{content:"";position:absolute;left:0;right:0;bottom:calc(-13 * var(--k));height:calc(2 * var(--k));background:var(--blue);transform:scaleX(0);transition:transform .2s ease}
  .menu__liste a:hover{color:var(--blue)}
  .menu__liste a:hover::after,.menu__liste a:focus-visible::after{transform:none}
  .menu__devis,.entete__tel,.burger{display:none}
  .entete__actions{gap:calc(26 * var(--k))}
  .entete__num{display:block;min-width:calc(178 * var(--k));font:700 calc(15 * var(--k))/1.15 var(--f-texte);white-space:nowrap}
  .entete__num:hover{color:var(--blue)}
  .entete__devis{display:flex;align-items:center;gap:calc(20 * var(--k));height:min(calc(47 * var(--k)), calc(var(--entete-h) * .62));padding:0 calc(23 * var(--k));border-radius:calc(4 * var(--k));
    background:var(--blue);color:#fff;font:700 calc(14 * var(--k))/1 var(--f-texte);white-space:nowrap;transition:background-color .2s ease}
  .entete__devis .fleche{width:calc(20 * var(--k));height:calc(20 * var(--k))}
  .entete__devis:hover{background:var(--blue-hover)}
}

/* ─── WhatsApp (rule 14): green circle, official mark, bottom right, every width ─── */
.wa-float{position:fixed;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:40;display:grid;place-items:center;
  width:56px;height:56px;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 10px 26px -8px rgba(8,12,16,.6);
  transition:transform .2s ease,box-shadow .2s ease}
.wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 32px -10px rgba(8,12,16,.65)}
.wa-float svg{width:30px;height:30px;fill:currentColor}
.wa-float:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--ink)}   /* visible on white and on the blue contact field (code review 2026-09-26) */
@media (max-width:600px){.wa-float{right:14px;bottom:max(14px,env(safe-area-inset-bottom));width:52px;height:52px}.wa-float svg{width:28px;height:28px}}

/* ═══ Mockup geometry — generated by qa/genereaza_css.py from the rework's own CSS. Do not edit here: change 03-ajustari.css (or the generator) and rerun. ═══ */

/* ---- S01: S01_REWORK_2026-09-25/HERO_DESKTOP_V2.html ---- */
.accueil{background:#fff}
.accueil .scena{position:relative;height:calc(900 * var(--k))}
.accueil .scena::after{content:"";position:absolute;inset:calc(100 * var(--k)) 0 0;z-index:1;pointer-events:none;background:linear-gradient(90deg, #fff 0%, #fff 35%, rgba(255,255,255,.96) 43%, rgba(255,255,255,.48) 54%, transparent 69%)}
.accueil .photo{position:absolute;right:0;top:calc(99 * var(--k));width:calc(1060 * var(--k));height:calc(708 * var(--k));object-fit:cover;object-position:56% center;clip-path:polygon(11% 13%, 42% 0, 100% 0, 100% 100%, 0 100%, 0 26%)}
.accueil .photo-shadow{position:absolute;right:0;top:calc(99 * var(--k));width:calc(1060 * var(--k));height:calc(708 * var(--k));background:linear-gradient(0deg, rgba(4, 17, 33, .36), transparent 28%);clip-path:polygon(11% 13%, 42% 0, 100% 0, 100% 100%, 0 100%, 0 26%);z-index:1}
.accueil .content{position:relative;z-index:3;padding:calc(123 * var(--k)) 0 0 calc(74 * var(--k));width:calc(780 * var(--k))}
.accueil .eyebrow{display:flex;align-items:center;gap:calc(14 * var(--k));font-size:calc(12 * var(--k));font-weight:800;letter-spacing:.2em;color:var(--blue)}
.accueil .eyebrow::before{content:"";width:calc(33 * var(--k));height:calc(2 * var(--k));background:var(--blue)}
.accueil h1{margin:calc(29 * var(--k)) 0 calc(23 * var(--k));font-family:var(--f-titre);font-weight:700;font-size:calc(85 * var(--k));letter-spacing:-.055em;line-height:.99}
.accueil h1 span{color:var(--blue)}
.accueil .sub{max-width:calc(510 * var(--k));font-size:calc(20 * var(--k));line-height:1.42;letter-spacing:-.018em;color:#333b45}
.accueil .actions{display:flex;align-items:center;gap:calc(32 * var(--k));margin-top:calc(34 * var(--k))}
.accueil .main-cta{background:var(--blue);color:white;height:calc(59 * var(--k));padding:0 calc(25 * var(--k));display:flex;align-items:center;gap:calc(31 * var(--k));font-size:calc(15 * var(--k));font-weight:700;border-radius:calc(4 * var(--k));box-shadow:0 calc(9 * var(--k)) calc(24 * var(--k)) rgba(44,82,160,.19)}
.accueil .main-cta b{font-size:calc(25 * var(--k));font-weight:300}
.accueil .second-cta{color:#182944;font-size:calc(15 * var(--k));font-weight:700;border-bottom:calc(1 * var(--k)) solid var(--blue);padding:0 0 calc(7 * var(--k))}
.accueil .second-cta b{color:var(--blue);font-size:calc(20 * var(--k));margin-left:calc(12 * var(--k));font-weight:400}
.accueil .brand-signature{margin-top:calc(48 * var(--k));display:flex;align-items:center;gap:calc(14 * var(--k));color:#637083;font-family:var(--f-titre);font-style:italic;font-size:calc(19 * var(--k))}
.accueil .brand-signature::before{content:"";width:calc(43 * var(--k));height:calc(1 * var(--k));background:var(--blue)}
.accueil .photo-note{position:absolute;z-index:3;left:calc(840 * var(--k));top:calc(571 * var(--k));width:calc(342 * var(--k));min-height:calc(109 * var(--k));color:#fff;display:flex;align-items:center;gap:calc(17 * var(--k));padding:calc(22 * var(--k)) calc(25 * var(--k));background:#183567;box-shadow:0 calc(18 * var(--k)) calc(35 * var(--k)) rgba(9,24,55,.21)}
.accueil .photo-note .line{height:calc(57 * var(--k));width:calc(2 * var(--k));flex:0 0 auto;background:#91b0ec}
.accueil .photo-note small{font-size:calc(10 * var(--k));letter-spacing:.17em;font-weight:800;line-height:2.2}
.accueil .photo-note div:last-child{font-family:var(--f-titre);font-size:calc(20 * var(--k));line-height:1.13}
.accueil .wave{position:absolute;z-index:3;left:0;top:calc(687 * var(--k));width:calc(1600 * var(--k));height:calc(100 * var(--k));pointer-events:none}
.accueil .service-band{position:absolute;z-index:4;left:0;bottom:0;width:100%;height:calc(150 * var(--k));padding:calc(53 * var(--k)) calc(73 * var(--k)) 0;background:#fff;display:flex;align-items:flex-start}
.accueil .band-intro{width:calc(258 * var(--k));flex:0 0 auto}
.accueil .band-intro small{color:var(--blue);font-size:calc(11 * var(--k));letter-spacing:.19em;font-weight:800}
.accueil .band-intro strong{display:block;margin-top:calc(7 * var(--k));font-family:var(--f-titre);font-size:calc(21 * var(--k));line-height:1.1}
.accueil .band-item{width:calc(330 * var(--k));padding-left:calc(33 * var(--k));border-left:calc(1 * var(--k)) solid #d7dce5;min-height:calc(62 * var(--k))}
.accueil .band-item em{color:var(--blue);font-style:normal;font-size:calc(13 * var(--k));font-weight:800;margin-right:calc(11 * var(--k))}
.accueil .band-item strong{font-size:calc(17 * var(--k))}
.accueil .band-item small{display:block;padding-left:calc(34 * var(--k));margin-top:calc(6 * var(--k));color:#666d77;font-size:calc(13 * var(--k))}
@media (max-width:1099px){
  .accueil .scena{height:calc(900 * var(--k))}
  .accueil .scena::after,.accueil .photo-shadow,.accueil .brand-signature{display:none}
  .accueil .content{width:100%;padding:calc(39 * var(--k)) calc(21 * var(--k)) 0}
  .accueil .eyebrow{gap:calc(8 * var(--k));font-size:calc(9 * var(--k));letter-spacing:.14em;white-space:nowrap}
  .accueil .eyebrow::before{width:calc(23 * var(--k))}
  .accueil h1{font-size:calc(56 * var(--k));line-height:.98;margin:calc(24 * var(--k)) 0 calc(16 * var(--k));letter-spacing:-.058em}
  .accueil .sub{max-width:calc(350 * var(--k));font-size:calc(15 * var(--k));line-height:1.42}
  .accueil .actions{margin-top:calc(22 * var(--k));gap:calc(14 * var(--k))}
  .accueil .main-cta{height:calc(45 * var(--k));padding:0 calc(14 * var(--k));gap:calc(7 * var(--k));font-size:calc(11 * var(--k));box-shadow:none}
  .accueil .main-cta b{font-size:calc(18 * var(--k))}
  .accueil .second-cta{font-size:calc(11 * var(--k));padding-bottom:calc(4 * var(--k));white-space:nowrap}
  .accueil .second-cta b{margin-left:calc(2 * var(--k));font-size:calc(14 * var(--k))}
  .accueil .photo{top:calc(414 * var(--k));width:calc(390 * var(--k));height:calc(351 * var(--k));right:0;object-position:72% center;clip-path:polygon(0 10%, 51% 0, 100% 8%, 100% 100%, 0 100%)}
  .accueil .photo-note{left:calc(21 * var(--k));top:calc(637 * var(--k));width:calc(261 * var(--k));min-height:calc(73 * var(--k));gap:calc(11 * var(--k));padding:calc(12 * var(--k)) calc(14 * var(--k))}
  .accueil .photo-note .line{height:calc(45 * var(--k))}
  .accueil .photo-note small{font-size:calc(8 * var(--k));line-height:1.7}
  .accueil .photo-note div:last-child{font-size:calc(15 * var(--k))}
  .accueil .wave{top:calc(736 * var(--k));width:calc(390 * var(--k));height:calc(50 * var(--k))}
  .accueil .service-band{height:calc(138 * var(--k));padding:calc(22 * var(--k)) calc(20 * var(--k)) 0;flex-wrap:wrap;align-content:flex-start}
  .accueil .band-intro{width:100%;height:calc(43 * var(--k))}
  .accueil .band-intro small{font-size:calc(9 * var(--k))}
  .accueil .band-intro strong{display:inline;margin-left:calc(10 * var(--k));font-size:calc(15 * var(--k))}
  .accueil .band-item{width:33.333%;min-height:calc(63 * var(--k));padding-left:calc(9 * var(--k))}
  .accueil .band-item em{font-size:calc(11 * var(--k));margin-right:calc(4 * var(--k))}
  .accueil .band-item strong{font-size:calc(12 * var(--k))}
  .accueil .band-item small{padding-left:0;margin-top:calc(6 * var(--k));font-size:calc(9 * var(--k));line-height:1.22}
}

/* ---- S02: S02_REWORK_2026-09-25/SECTION_02_V2.html ---- */
.metiers{background:#fff}
.metiers .scena{position:relative;height:calc(1100 * var(--k))}
.metiers .stage{position:absolute;left:0;top:0;width:100%;height:calc(475 * var(--k));overflow:hidden;background:#f8f9fa}
.metiers .stage-photo{position:absolute;top:0;right:0;width:calc(1130 * var(--k));height:calc(475 * var(--k));object-fit:cover;object-position:54% center;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%,0 19%)}
.metiers .stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.93) 43%,rgba(255,255,255,.48) 54%,rgba(255,255,255,.03) 73%);pointer-events:none}
.metiers .stage-outline{position:absolute;right:0;top:0;width:calc(1130 * var(--k));height:calc(475 * var(--k));z-index:1;pointer-events:none}
.metiers .stage-content{position:absolute;z-index:2;left:calc(72 * var(--k));top:calc(56 * var(--k));width:calc(760 * var(--k))}
.metiers .eyebrow{display:flex;align-items:center;gap:calc(14 * var(--k));color:var(--blue);font-size:calc(12 * var(--k));font-weight:800;letter-spacing:.19em}
.metiers .eyebrow::before{content:"";display:block;width:calc(34 * var(--k));height:calc(2 * var(--k));background:var(--blue)}
.metiers h2{font-family:var(--f-titre);font-size:calc(76 * var(--k));font-weight:700;letter-spacing:-.053em;line-height:.97;margin:calc(24 * var(--k)) 0 calc(24 * var(--k))}
.metiers h2 span{display:block;color:var(--blue);font-size:calc(59 * var(--k));margin-top:calc(8 * var(--k))}
.metiers .deck{width:calc(525 * var(--k));font-size:calc(18 * var(--k));line-height:1.43;color:#35404c}
.metiers .stage-link{display:inline-flex;align-items:center;gap:calc(30 * var(--k));margin-top:calc(26 * var(--k));border-bottom:calc(1 * var(--k)) solid var(--blue);padding-bottom:calc(7 * var(--k));color:#172f61;font-size:calc(14 * var(--k));font-weight:700}
.metiers .stage-link b{font-size:calc(21 * var(--k));font-weight:400}
.metiers .stage-note{position:absolute;z-index:2;right:calc(75 * var(--k));top:calc(220 * var(--k));width:calc(255 * var(--k));height:calc(105 * var(--k));padding:calc(18 * var(--k)) calc(20 * var(--k));background:rgba(20,42,82,.94);box-shadow:0 calc(15 * var(--k)) calc(30 * var(--k)) rgba(15,32,58,.2);color:#fff}
.metiers .stage-note small{font-size:calc(10 * var(--k));letter-spacing:.16em;font-weight:800;color:#b7c9ea}
.metiers .stage-note strong{display:block;margin-top:calc(15 * var(--k));font-family:var(--f-titre);font-size:calc(25 * var(--k));font-weight:400;line-height:1}
.metiers .entry-curve{position:absolute;z-index:3;left:0;top:calc(322 * var(--k));width:calc(1600 * var(--k));height:calc(90 * var(--k));pointer-events:none}
.metiers .cards{position:absolute;z-index:4;left:calc(64 * var(--k));right:calc(64 * var(--k));top:calc(380 * var(--k));height:calc(480 * var(--k));display:grid;grid-template-columns:1.06fr 1fr 1.13fr 1fr 1.06fr 1fr;gap:calc(15 * var(--k));align-items:start}
.metiers .card{position:relative;background:#fff;box-shadow:0 calc(13 * var(--k)) calc(34 * var(--k)) rgba(19,34,59,.15);height:calc(440 * var(--k));min-width:0;overflow:hidden}
.metiers .card:nth-child(2){transform:translateY(calc(16 * var(--k)))}
.metiers .card:nth-child(3){transform:translateY(calc(-18 * var(--k)))}
.metiers .card:nth-child(4){transform:translateY(calc(8 * var(--k)))}
.metiers .card:nth-child(5){transform:translateY(calc(14 * var(--k)))}
.metiers .card:nth-child(6){transform:translateY(calc(27 * var(--k)))}
.metiers .media{width:100%;height:calc(211 * var(--k));overflow:hidden;background:#e5e5e5}
.metiers .media img{width:100%;height:100%;display:block;object-fit:cover}
.metiers .card:nth-child(1) .media{clip-path:polygon(0 11%,49% 0,100% 8%,100% 100%,0 100%)}
.metiers .card:nth-child(3) .media{clip-path:polygon(0 9%,47% 0,100% 8%,100% 100%,0 100%)}
.metiers .card:nth-child(1) img{object-position:43% 49%}
.metiers .card:nth-child(2) img{object-position:49% 42%}
.metiers .card:nth-child(3) img{object-position:53% 50%}
.metiers .card:nth-child(4) img{object-position:49% 26%}
.metiers .card:nth-child(5) img{object-position:58% 50%}
.metiers .card:nth-child(6) img{object-position:59% 49%}
.metiers .card-body{position:relative;height:calc(229 * var(--k));padding:calc(22 * var(--k)) calc(19 * var(--k)) calc(17 * var(--k));display:flex;flex-direction:column}
.metiers .index{color:var(--blue);font-size:calc(11 * var(--k));font-weight:800;letter-spacing:.16em}
.metiers .card h3{font-family:var(--f-titre);margin:calc(10 * var(--k)) 0 calc(10 * var(--k));font-size:calc(25 * var(--k));line-height:1.04;letter-spacing:-.03em}
.metiers .card p{margin:0;color:#5b6674;font-size:calc(13 * var(--k));line-height:1.4}
.metiers .card .more{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:calc(14 * var(--k));border-top:calc(1 * var(--k)) solid var(--line);color:var(--ink);font-size:calc(12 * var(--k));font-weight:700}
.metiers .card .more b{font-size:calc(20 * var(--k));color:var(--blue);font-weight:400}
.metiers .card.featured{background:#0f284f;color:#fff}
.metiers .card.featured .card-body{background:#0f284f}
.metiers .card.featured .index{color:#b1cafa}
.metiers .card.featured p{color:#d1def2}
.metiers .card.featured .more{color:#fff;border-color:rgba(255,255,255,.27)}
.metiers .card.featured .more b{color:#fff}
.metiers .bottom{position:absolute;left:0;bottom:0;width:100%;height:calc(230 * var(--k));background:var(--navy);color:#fff;padding:calc(62 * var(--k)) calc(72 * var(--k)) 0;display:flex;justify-content:space-between;overflow:hidden}
.metiers .bottom::before{content:"";position:absolute;top:0;left:calc(72 * var(--k));width:calc(91 * var(--k));height:calc(4 * var(--k));background:#88aef4}
.metiers .bottom::after{content:"";position:absolute;right:calc(330 * var(--k));top:calc(-120 * var(--k));width:calc(480 * var(--k));height:calc(480 * var(--k));transform:rotate(45deg);border:calc(1 * var(--k)) solid rgba(176,201,255,.13)}
.metiers .bottom small{font-size:calc(11 * var(--k));color:#b4cbf4;font-weight:800;letter-spacing:.17em}
.metiers .bottom strong{display:block;margin-top:calc(12 * var(--k));font-family:var(--f-titre);font-size:calc(38 * var(--k));letter-spacing:-.03em;line-height:1.05;font-weight:700}
.metiers .bottom-contact{position:relative;z-index:1;width:calc(520 * var(--k));padding-left:calc(45 * var(--k));border-left:calc(1 * var(--k)) solid rgba(255,255,255,.25)}
.metiers .bottom-contact p{margin:0 0 calc(16 * var(--k));font-size:calc(16 * var(--k));color:#e3ebf8}
.metiers .bottom-contact .phone{font-size:calc(23 * var(--k));font-weight:700;letter-spacing:.01em}
.metiers .bottom-contact .cta{display:inline-flex;align-items:center;justify-content:space-between;width:calc(210 * var(--k));margin-left:calc(25 * var(--k));padding:calc(13 * var(--k)) calc(16 * var(--k));background:#fff;color:var(--navy);font-size:calc(12 * var(--k));font-weight:800}
.metiers .bottom-contact .cta b{font-size:calc(17 * var(--k));font-weight:400}
.metiers .disclosure{position:absolute;z-index:5;right:calc(70 * var(--k));bottom:calc(248 * var(--k));font-size:calc(10 * var(--k));color:#69788b}
@media (max-width:1099px){
  .metiers .scena{height:auto}
  .metiers .stage{position:relative;height:calc(510 * var(--k))}
  .metiers .stage-photo{top:calc(275 * var(--k));right:0;width:calc(390 * var(--k));height:calc(235 * var(--k));object-position:64% center;clip-path:polygon(0 12%,49% 0,100% 8%,100% 100%,0 100%)}
  .metiers .stage::after{background:linear-gradient(180deg,#fff 0%,#fff 53%,rgba(255,255,255,.02) 72%)}
  .metiers .stage-outline,.metiers .stage-note{display:none}
  .metiers .stage-content{left:calc(20 * var(--k));top:calc(36 * var(--k));width:calc(350 * var(--k))}
  .metiers .eyebrow{font-size:calc(9 * var(--k));gap:calc(8 * var(--k));letter-spacing:.13em}
  .metiers .eyebrow::before{width:calc(23 * var(--k))}
  .metiers h2{font-size:calc(49 * var(--k));margin:calc(22 * var(--k)) 0 calc(15 * var(--k));line-height:1}
  .metiers h2 span{font-size:calc(37 * var(--k));margin-top:calc(4 * var(--k))}
  .metiers .deck{width:calc(340 * var(--k));font-size:calc(14 * var(--k));line-height:1.42}
  .metiers .stage-link{margin-top:calc(15 * var(--k));font-size:calc(12 * var(--k));gap:calc(16 * var(--k))}
  .metiers .entry-curve{width:calc(390 * var(--k));height:calc(48 * var(--k));top:calc(473 * var(--k))}
  .metiers .cards{position:relative;left:auto;right:auto;top:auto;width:calc(350 * var(--k));height:auto;margin:calc(-26 * var(--k)) calc(20 * var(--k)) 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(14 * var(--k))}
  .metiers .card,.metiers .card:nth-child(2),.metiers .card:nth-child(3),.metiers .card:nth-child(4),.metiers .card:nth-child(5),.metiers .card:nth-child(6){transform:none;height:calc(316 * var(--k))}
  .metiers .card:nth-child(3),.metiers .card:nth-child(6){grid-column:span 2;height:calc(367 * var(--k))}
  .metiers .media{height:calc(178 * var(--k))}
  .metiers .card:nth-child(3) .media,.metiers .card:nth-child(6) .media{height:calc(218 * var(--k))}
  .metiers .card-body{height:calc(138 * var(--k));padding:calc(13 * var(--k)) calc(12 * var(--k)) calc(12 * var(--k))}
  .metiers .card:nth-child(3) .card-body,.metiers .card:nth-child(6) .card-body{height:calc(149 * var(--k));padding:calc(17 * var(--k)) calc(18 * var(--k))}
  .metiers .index{font-size:calc(9 * var(--k))}
  .metiers .card h3{font-size:calc(19 * var(--k));margin:calc(8 * var(--k)) 0}
  .metiers .card:nth-child(3) h3,.metiers .card:nth-child(6) h3{font-size:calc(23 * var(--k))}
  .metiers .card:nth-child(4) h3{font-size:calc(17 * var(--k))}
  .metiers .card p{display:none}
  .metiers .card:nth-child(3) p,.metiers .card:nth-child(6) p{display:block;font-size:calc(11 * var(--k))}
  .metiers .card .more{font-size:calc(10 * var(--k));padding-top:calc(8 * var(--k))}
  .metiers .card .more b{font-size:calc(16 * var(--k))}
  .metiers .bottom{position:relative;height:calc(270 * var(--k));margin-top:calc(39 * var(--k));padding:calc(28 * var(--k)) calc(20 * var(--k));display:block}
  .metiers .bottom::before{left:calc(20 * var(--k));width:calc(55 * var(--k));height:calc(3 * var(--k))}
  .metiers .bottom::after{display:none}
  .metiers .bottom small{font-size:calc(9 * var(--k))}
  .metiers .bottom strong{margin-top:calc(10 * var(--k));font-size:calc(30 * var(--k))}
  .metiers .bottom-contact{width:100%;margin-top:calc(21 * var(--k));border-left:0;border-top:calc(1 * var(--k)) solid rgba(255,255,255,.25);padding:calc(14 * var(--k)) 0 0}
  .metiers .bottom-contact p{margin-bottom:calc(9 * var(--k));font-size:calc(12 * var(--k))}
  .metiers .bottom-contact .phone{font-size:calc(19 * var(--k))}
  .metiers .bottom-contact .cta{width:calc(145 * var(--k));margin-left:calc(10 * var(--k));padding:calc(10 * var(--k));font-size:calc(10 * var(--k))}
  .metiers .disclosure{position:relative;right:auto;bottom:auto;margin:calc(14 * var(--k)) calc(20 * var(--k)) 0;font-size:calc(9 * var(--k))}
}

/* ---- S38: PREMIUM_REWORK_2026-09-25/SECTIONS_03_TO_08.html ---- */
a{color:inherit;text-decoration:none}
.s img{display:block;width:100%;height:100%;object-fit:cover}
.s{position:relative;overflow:hidden;width:100%}
.serif{font-family:var(--f-titre)}
.eyebrow{display:flex;align-items:center;gap:calc(14 * var(--k));color:var(--blue);font-size:calc(12 * var(--k));font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.eyebrow:before{content:"";display:block;width:calc(35 * var(--k));height:calc(2 * var(--k));background:currentColor}
.eyebrow.light{color:#b5cdf7}
.display{font-family:var(--f-titre);font-size:calc(76 * var(--k));line-height:.99;letter-spacing:-.055em;margin:calc(23 * var(--k)) 0 0}
.bodycopy{font-size:calc(18 * var(--k));line-height:1.5;color:#3d4653}
.linkline{display:inline-flex;align-items:center;justify-content:space-between;gap:calc(38 * var(--k));padding-bottom:calc(10 * var(--k));border-bottom:calc(1 * var(--k)) solid currentColor;font-size:calc(14 * var(--k));font-weight:700}
.linkline b{font-size:calc(23 * var(--k));font-weight:400;line-height:1}
.curve{position:absolute;pointer-events:none}
.tiny{font-size:calc(11 * var(--k));font-weight:800;letter-spacing:.17em;text-transform:uppercase}
#demande{background:linear-gradient(120deg,#102852 0%,#152f5c 58%,#0d2246 100%);color:#fff}
#demande .scena{height:calc(905 * var(--k))}
#demande .scena::before{content:"";position:absolute;left:calc(-165 * var(--k));top:calc(335 * var(--k));width:calc(650 * var(--k));height:calc(650 * var(--k));border:calc(1 * var(--k)) solid rgba(183,205,248,.11);transform:rotate(45deg)}
.s03-head{position:absolute;left:calc(74 * var(--k));top:calc(76 * var(--k));z-index:4;width:calc(690 * var(--k))}
.s03-head .display{font-size:calc(78 * var(--k))}
.s03-head .display span{display:block;color:#adc8f6}
.s03-head p{width:calc(515 * var(--k));color:#d8e4f6;font-size:calc(19 * var(--k));line-height:1.5;margin:calc(27 * var(--k)) 0 calc(29 * var(--k))}
.s03-head .linkline{color:#fff}
.s03-line{position:absolute;left:calc(75 * var(--k));top:calc(530 * var(--k));width:calc(410 * var(--k));height:calc(1 * var(--k));background:rgba(255,255,255,.25)}
.s03-note{position:absolute;left:calc(75 * var(--k));top:calc(557 * var(--k));width:calc(380 * var(--k));color:#e2eaf8}
.s03-note .tiny{color:#adc8f6}
.s03-note strong{display:block;margin-top:calc(14 * var(--k));font:calc(34 * var(--k))/1.08 var(--f-titre);letter-spacing:-.03em}
.s03-note p{font-size:calc(14 * var(--k));line-height:1.5;color:#b9cbe8;margin:calc(12 * var(--k)) 0 0}
.s03-main{position:absolute;right:0;top:0;width:calc(765 * var(--k));height:calc(768 * var(--k));clip-path:polygon(22% 0,100% 0,100% 100%,0 100%,0 19%)}
.s03-main img{object-position:54% 52%;filter:contrast(1.04)}
.s03-main:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,30,65,.45),transparent 45%)}
.s03-inset{position:absolute;z-index:3;overflow:hidden;border:calc(7 * var(--k)) solid #142d58;box-shadow:0 calc(25 * var(--k)) calc(55 * var(--k)) rgba(2,14,38,.45)}
.s03-inset.one{left:calc(625 * var(--k));top:calc(514 * var(--k));width:calc(305 * var(--k));height:calc(272 * var(--k))}
.s03-inset.two{right:calc(69 * var(--k));top:calc(530 * var(--k));width:calc(254 * var(--k));height:calc(220 * var(--k))}
.s03-inset img{object-position:center}
.s03-inset .caption{position:absolute;left:0;right:0;bottom:0;padding:calc(11 * var(--k)) calc(15 * var(--k));background:linear-gradient(0deg,rgba(8,26,54,.89),transparent);font-size:calc(12 * var(--k));font-weight:700}
.s03-main-label{position:absolute;z-index:2;right:calc(77 * var(--k));top:calc(81 * var(--k));color:white;font-size:calc(11 * var(--k));font-weight:800;letter-spacing:.18em;transform:rotate(90deg);transform-origin:right top}
.s03-bottom{position:absolute;left:0;right:0;bottom:0;height:calc(105 * var(--k));background:#fff;clip-path:polygon(0 72%,38% 91%,70% 56%,100% 72%,100% 100%,0 100%)}
.s03-curve{left:0;bottom:calc(51 * var(--k));width:calc(1600 * var(--k));height:calc(100 * var(--k));z-index:5}
#realisations{background:#fff}
#realisations .scena{height:calc(1190 * var(--k));padding:calc(60 * var(--k)) calc(74 * var(--k)) 0}
.s04-top{display:flex;align-items:end;justify-content:space-between}
.s04-top .display{margin-top:calc(16 * var(--k))}
.s04-top .intro{width:calc(425 * var(--k));padding-bottom:calc(7 * var(--k));font-size:calc(17 * var(--k));line-height:1.45;color:#485464}
.s04-disclosure{margin:calc(23 * var(--k)) 0 calc(29 * var(--k));color:#51637c;font-size:calc(12 * var(--k));font-weight:700}
.s04-disclosure:before{content:"*";margin-right:calc(6 * var(--k));color:var(--blue)}
.gallery{position:relative;height:calc(850 * var(--k));display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:calc(456 * var(--k)) calc(350 * var(--k));gap:calc(15 * var(--k))}
.gallery:after{content:"";position:absolute;left:25%;top:calc(453 * var(--k));width:30%;height:calc(2 * var(--k));background:var(--blue);transform:rotate(-4deg);pointer-events:none}
.gitem{position:relative;overflow:hidden;background:#dce5ec}
.gitem img{transition:transform .3s}
.gitem:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,18,36,.75));pointer-events:none}
.gitem .lab{position:absolute;z-index:2;left:calc(22 * var(--k));right:calc(22 * var(--k));bottom:calc(18 * var(--k));display:flex;align-items:end;justify-content:space-between;color:#fff}
.gitem .lab small{display:block;color:#bed1f3;font-size:calc(10 * var(--k));font-weight:800;letter-spacing:.15em;margin-bottom:calc(5 * var(--k))}
.gitem .lab strong{font:calc(31 * var(--k))/1 var(--f-titre);letter-spacing:-.025em}
.gitem .lab b{font-size:calc(23 * var(--k));font-weight:400}
.gitem.p{grid-column:1/7;grid-row:1}
.gitem.i{grid-column:7/10;grid-row:1}
.gitem.c{grid-column:10/13;grid-row:1}
.gitem.f{grid-column:1/4;grid-row:2}
.gitem.t{grid-column:4/9;grid-row:2}
.gitem.m{grid-column:9/13;grid-row:2}
.gitem.i .lab strong,.gitem.c .lab strong,.gitem.f .lab strong{font-size:calc(24 * var(--k))}
.gitem.p img{object-position:54%}
.gitem.i img{object-position:52%}
.gitem.c img{object-position:50%}
.s04-foot{display:flex;align-items:center;justify-content:space-between;margin-top:calc(31 * var(--k));padding-top:calc(18 * var(--k));border-top:calc(1 * var(--k)) solid var(--line)}
.s04-foot span{font-family:var(--f-titre);font-size:calc(19 * var(--k))}
.s04-foot .linkline{color:var(--blue)}
#savoir-faire{background:#f4f6fa}
#savoir-faire .scena{height:calc(940 * var(--k))}
.s05-header{padding:calc(77 * var(--k)) calc(74 * var(--k)) 0;display:flex;justify-content:space-between;align-items:end}
.s05-header .display{font-size:calc(69 * var(--k))}
.s05-header .display span{color:var(--blue)}
.s05-header p{width:calc(385 * var(--k));color:#485566;font-size:calc(17 * var(--k));line-height:1.45;margin:0 0 calc(3 * var(--k))}
.s05-band{position:absolute;left:0;right:0;top:calc(330 * var(--k));height:calc(367 * var(--k));background:var(--navy);overflow:hidden}
.s05-band:before{content:"";position:absolute;width:calc(800 * var(--k));height:calc(800 * var(--k));border:calc(1 * var(--k)) solid rgba(255,255,255,.1);transform:rotate(45deg);right:calc(-230 * var(--k));top:calc(-422 * var(--k))}
.s05-route{position:absolute;left:0;top:calc(53 * var(--k));width:calc(1600 * var(--k));height:calc(110 * var(--k))}
.s05-steps{position:absolute;left:calc(75 * var(--k));right:calc(75 * var(--k));top:calc(150 * var(--k));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(30 * var(--k));color:#fff}
.s05-step{padding:0 calc(20 * var(--k)) 0 0;border-right:calc(1 * var(--k)) solid rgba(255,255,255,.26)}
.s05-step:last-child{border-right:0}
.s05-step small{color:#a9c5f7;font-size:calc(11 * var(--k));font-weight:800;letter-spacing:.15em}
.s05-step h3{font:calc(39 * var(--k))/1.02 var(--f-titre);letter-spacing:-.04em;margin:calc(19 * var(--k)) 0 calc(16 * var(--k))}
.s05-step p{margin:0;color:#d7e3f4;font-size:calc(15 * var(--k));line-height:1.35}
.s05-photo{position:absolute;overflow:hidden;box-shadow:0 calc(17 * var(--k)) calc(36 * var(--k)) rgba(20,42,82,.14)}
.s05-photo.one{left:calc(74 * var(--k));bottom:calc(51 * var(--k));width:calc(551 * var(--k));height:calc(277 * var(--k))}
.s05-photo.two{left:calc(648 * var(--k));bottom:calc(51 * var(--k));width:calc(365 * var(--k));height:calc(213 * var(--k))}
.s05-photo.one img{object-position:50% 47%}
.s05-photo.two img{object-position:45%}
.s05-final{position:absolute;right:calc(76 * var(--k));bottom:calc(93 * var(--k));width:calc(385 * var(--k))}
.s05-final .tiny{color:var(--blue)}
.s05-final p{font:calc(32 * var(--k))/1.12 var(--f-titre);letter-spacing:-.035em;margin:calc(11 * var(--k)) 0 calc(21 * var(--k))}
.s05-final .linkline{color:var(--blue)}
#apropos{background:#fff}
#apropos .scena{height:calc(925 * var(--k))}
.s06-mark{position:absolute;left:calc(73 * var(--k));top:calc(71 * var(--k))}
.s06-title{position:absolute;left:calc(73 * var(--k));top:calc(124 * var(--k));z-index:2;width:calc(705 * var(--k))}
.s06-title .display{font-size:calc(86 * var(--k))}
.s06-title .display span{color:var(--blue)}
.s06-title p{width:calc(480 * var(--k));margin:calc(29 * var(--k)) 0 calc(24 * var(--k));font-size:calc(19 * var(--k));line-height:1.48;color:#465261}
.s06-title .linkline{color:var(--blue)}
.s06-wood{position:absolute;right:calc(72 * var(--k));top:calc(81 * var(--k));width:calc(558 * var(--k));height:calc(617 * var(--k));clip-path:polygon(29% 0,100% 0,100% 100%,0 100%,0 17%)}
.s06-wood img{object-position:54%}
.s06-wood:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,23,44,.44),transparent 38%)}
.s06-plaster{position:absolute;left:calc(75 * var(--k));bottom:calc(72 * var(--k));width:calc(664 * var(--k));height:calc(341 * var(--k));overflow:hidden;clip-path:polygon(0 16%,29% 0,100% 0,100% 100%,0 100%)}
.s06-plaster img{object-position:50%}
.s06-image-note{position:absolute;right:calc(100 * var(--k));top:calc(613 * var(--k));color:#fff;font:calc(24 * var(--k)) var(--f-titre)}
.s06-caption{position:absolute;left:calc(770 * var(--k));bottom:calc(136 * var(--k));width:calc(470 * var(--k));padding-left:calc(22 * var(--k));border-left:calc(2 * var(--k)) solid var(--blue);font:calc(27 * var(--k))/1.27 var(--f-titre);color:#1d3357}
.s06-caption small{display:block;margin-top:calc(18 * var(--k));font:700 calc(11 * var(--k)) var(--f-texte);letter-spacing:.17em;color:var(--blue)}
.s06-wave{left:0;bottom:0;width:calc(1600 * var(--k));height:calc(85 * var(--k))}
#contact{background:var(--blue);color:#fff}
#contact .scena{height:calc(865 * var(--k))}
.s07-head{position:absolute;left:calc(74 * var(--k));top:calc(72 * var(--k));z-index:2}
.s07-head .display{font-size:calc(77 * var(--k));margin-top:calc(19 * var(--k))}
.s07-head p{font-size:calc(18 * var(--k));color:#dce8fa;line-height:1.4;width:calc(670 * var(--k));margin:calc(21 * var(--k)) 0 0}
.s07-watermark{position:absolute;right:calc(-40 * var(--k));top:calc(16 * var(--k));width:calc(470 * var(--k));height:calc(470 * var(--k));border:calc(1 * var(--k)) solid rgba(255,255,255,.17);transform:rotate(45deg)}
.s07-sheet{position:absolute;left:0;right:0;top:calc(334 * var(--k));bottom:0;background:#fff;color:var(--ink);clip-path:polygon(0 10%,33% 0,67% 11%,100% 0,100% 100%,0 100%)}
.s07-sheet-inner{position:absolute;left:calc(74 * var(--k));right:calc(74 * var(--k));top:calc(457 * var(--k));display:grid;grid-template-columns:1.24fr 1fr 1.05fr;gap:0}
.s07-contact{min-height:calc(250 * var(--k));padding:calc(10 * var(--k)) calc(43 * var(--k));border-left:calc(1 * var(--k)) solid var(--line)}
.s07-contact:first-child{padding-left:0;border-left:0}
.s07-contact small{font-size:calc(11 * var(--k));color:var(--blue);font-weight:800;letter-spacing:.16em}
.s07-contact strong{display:block;margin-top:calc(24 * var(--k));font:calc(31 * var(--k))/1.12 var(--f-titre);letter-spacing:-.025em}
.s07-contact p{font-size:calc(16 * var(--k));color:#5b6776;line-height:1.45;margin:calc(17 * var(--k)) 0 calc(29 * var(--k))}
.s07-contact .linkline{color:var(--blue);font-size:calc(14 * var(--k))}
.s07-foot{position:absolute;left:calc(74 * var(--k));right:calc(74 * var(--k));bottom:calc(52 * var(--k));border-top:calc(1 * var(--k)) solid var(--line);padding-top:calc(23 * var(--k));display:flex;justify-content:space-between;color:#5e6b7b;font-size:calc(13 * var(--k))}
.s07-foot span:last-child{color:var(--blue);font-weight:800}
#pied{background:#fff}
#pied .scena{height:calc(560 * var(--k))}
.s08-upper{height:calc(461 * var(--k));padding:calc(69 * var(--k)) calc(73 * var(--k)) 0;display:grid;grid-template-columns:1.55fr .8fr .78fr .95fr;gap:calc(45 * var(--k))}
.footer-logo{width:calc(205 * var(--k));height:calc(112 * var(--k));position:relative;overflow:hidden}
.footer-logo img{position:absolute;width:calc(320 * var(--k));height:auto;max-width:none;left:calc(-58 * var(--k));top:calc(-35 * var(--k));object-fit:contain}
.s08-brand p{font:calc(28 * var(--k))/1.23 var(--f-titre);letter-spacing:-.025em;margin:calc(12 * var(--k)) 0 calc(25 * var(--k));width:calc(305 * var(--k))}
.s08-brand .tiny{color:var(--blue)}
.s08-col h3{font:calc(26 * var(--k)) var(--f-titre);margin:calc(15 * var(--k)) 0 calc(25 * var(--k))}
.s08-col a,.s08-col span{display:block;color:#516071;font-size:calc(15 * var(--k));line-height:1.55;margin:0 0 calc(10 * var(--k))}
.s08-col a:hover{text-decoration:underline}
.s08-col .phone{font-size:calc(19 * var(--k));color:var(--blue);font-weight:800}
.s08-rule{position:absolute;left:calc(73 * var(--k));right:calc(73 * var(--k));top:calc(447 * var(--k));height:calc(1 * var(--k));background:var(--line)}
.s08-bottom{position:absolute;bottom:0;left:0;right:0;height:calc(99 * var(--k));background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 calc(74 * var(--k));color:#e6efff;font-size:calc(12 * var(--k))}
.s08-bottom span:nth-child(2){color:#b8cbec}
.s08-bottom strong{font:calc(24 * var(--k)) var(--f-titre);color:#fff;font-weight:400}
@media (max-width:1099px){
  .eyebrow{gap:calc(8 * var(--k));font-size:calc(9 * var(--k));letter-spacing:.12em}
  .eyebrow:before{width:calc(23 * var(--k))}
  .display{font-size:calc(48 * var(--k));line-height:1.02}
  .bodycopy{font-size:calc(14 * var(--k))}
  .linkline{font-size:calc(12 * var(--k));gap:calc(22 * var(--k))}
  #demande .scena{height:calc(1170 * var(--k))}
  .s03-head{left:calc(21 * var(--k));top:calc(43 * var(--k));width:calc(348 * var(--k))}
  .s03-head .display{font-size:calc(49 * var(--k));margin-top:calc(18 * var(--k))}
  .s03-head p{width:calc(333 * var(--k));font-size:calc(14 * var(--k));line-height:1.46;margin:calc(17 * var(--k)) 0 calc(18 * var(--k))}
  .s03-main{top:calc(362 * var(--k));right:0;width:calc(390 * var(--k));height:calc(454 * var(--k));clip-path:polygon(0 12%,51% 0,100% 10%,100% 100%,0 100%)}
  .s03-main-label{display:none}
  .s03-line{left:calc(21 * var(--k));top:calc(895 * var(--k));width:calc(348 * var(--k))}
  .s03-note{left:calc(21 * var(--k));top:calc(915 * var(--k));width:calc(340 * var(--k))}
  .s03-note strong{font-size:calc(28 * var(--k));margin-top:calc(10 * var(--k))}
  .s03-note p{font-size:calc(12 * var(--k));margin-top:calc(8 * var(--k))}
  .s03-inset.one{left:calc(21 * var(--k));top:calc(732 * var(--k));width:calc(181 * var(--k));height:calc(157 * var(--k));border:calc(4 * var(--k)) solid #142d58}
  .s03-inset.two{right:calc(21 * var(--k));top:calc(745 * var(--k));width:calc(158 * var(--k));height:calc(140 * var(--k));border:calc(4 * var(--k)) solid #142d58}
  .s03-inset .caption{padding:calc(8 * var(--k));font-size:calc(10 * var(--k))}
  .s03-bottom{height:calc(48 * var(--k));clip-path:polygon(0 70%,40% 83%,75% 42%,100% 62%,100% 100%,0 100%)}
  .s03-curve{width:calc(390 * var(--k));height:calc(44 * var(--k));bottom:calc(23 * var(--k))}
  #realisations .scena{height:auto;padding:calc(44 * var(--k)) calc(20 * var(--k)) calc(48 * var(--k))}
  .s04-top{display:block}
  .s04-top .display{margin-top:calc(17 * var(--k))}
  .s04-top .intro{width:calc(340 * var(--k));font-size:calc(13 * var(--k));margin:calc(18 * var(--k)) 0 0}
  .s04-disclosure{font-size:calc(10 * var(--k));line-height:1.4;margin:calc(15 * var(--k)) 0 calc(20 * var(--k))}
  .gallery{height:auto;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:calc(420 * var(--k)) calc(230 * var(--k)) calc(230 * var(--k)) calc(250 * var(--k));gap:calc(10 * var(--k))}
  .gallery:after{display:none}
  .gitem.p{grid-column:1/3;grid-row:1}
  .gitem.i{grid-column:1;grid-row:2}
  .gitem.c{grid-column:2;grid-row:2}
  .gitem.f{grid-column:1;grid-row:3}
  .gitem.t{grid-column:2;grid-row:3}
  .gitem.m{grid-column:1/3;grid-row:4}
  .gitem .lab{left:calc(12 * var(--k));right:calc(12 * var(--k));bottom:calc(12 * var(--k))}
  .gitem .lab small{font-size:calc(8 * var(--k))}
  .gitem .lab strong,.gitem.i .lab strong,.gitem.c .lab strong,.gitem.f .lab strong{font-size:calc(19 * var(--k))}
  .gitem.p .lab strong,.gitem.m .lab strong{font-size:calc(26 * var(--k))}
  .gitem .lab b{font-size:calc(16 * var(--k))}
  .s04-foot{display:block;margin-top:calc(22 * var(--k));padding-top:calc(16 * var(--k))}
  .s04-foot span{display:block;font-size:calc(17 * var(--k));margin-bottom:calc(15 * var(--k))}
  #savoir-faire .scena{height:calc(1335 * var(--k))}
  .s05-header{padding:calc(47 * var(--k)) calc(20 * var(--k)) 0;display:block}
  .s05-header .display{font-size:calc(47 * var(--k))}
  .s05-header p{width:calc(340 * var(--k));font-size:calc(13 * var(--k));margin-top:calc(17 * var(--k))}
  .s05-band{top:calc(297 * var(--k));height:calc(556 * var(--k))}
  .s05-route{left:0;top:calc(26 * var(--k));width:calc(390 * var(--k));height:calc(515 * var(--k))}
  .s05-steps{left:calc(69 * var(--k));right:calc(18 * var(--k));top:calc(27 * var(--k));display:grid;grid-template-columns:1fr;gap:0}
  .s05-step{height:calc(122 * var(--k));border-right:0;padding:0 0 0 calc(16 * var(--k))}
  .s05-step small{font-size:calc(9 * var(--k))}
  .s05-step h3{font-size:calc(26 * var(--k));margin:calc(7 * var(--k)) 0 calc(6 * var(--k))}
  .s05-step p{font-size:calc(11 * var(--k))}
  .s05-photo.one{left:calc(20 * var(--k));top:calc(874 * var(--k));bottom:auto;width:calc(350 * var(--k));height:calc(197 * var(--k))}
  .s05-photo.two{left:calc(20 * var(--k));top:calc(1083 * var(--k));bottom:auto;width:calc(165 * var(--k));height:calc(190 * var(--k))}
  .s05-final{right:calc(20 * var(--k));bottom:calc(50 * var(--k));width:calc(173 * var(--k))}
  .s05-final .tiny{font-size:calc(9 * var(--k))}
  .s05-final p{font-size:calc(19 * var(--k));line-height:1.15;margin:calc(10 * var(--k)) 0 calc(12 * var(--k))}
  .s05-final .linkline{font-size:calc(10 * var(--k));gap:calc(8 * var(--k))}
  #apropos .scena{height:calc(1075 * var(--k))}
  .s06-mark{left:calc(20 * var(--k));top:calc(45 * var(--k))}
  .s06-title{left:calc(20 * var(--k));top:calc(81 * var(--k));width:calc(350 * var(--k))}
  .s06-title .display{font-size:calc(54 * var(--k))}
  .s06-title p{width:calc(334 * var(--k));font-size:calc(14 * var(--k));margin:calc(17 * var(--k)) 0 calc(18 * var(--k))}
  .s06-wood{right:0;top:calc(391 * var(--k));width:calc(390 * var(--k));height:calc(377 * var(--k));clip-path:polygon(0 11%,53% 0,100% 10%,100% 100%,0 100%)}
  .s06-plaster{left:calc(20 * var(--k));bottom:calc(94 * var(--k));width:calc(165 * var(--k));height:calc(204 * var(--k));clip-path:polygon(0 12%,45% 0,100% 0,100% 100%,0 100%)}
  .s06-image-note{right:calc(20 * var(--k));top:calc(709 * var(--k));font-size:calc(15 * var(--k))}
  .s06-caption{left:calc(206 * var(--k));bottom:calc(139 * var(--k));width:calc(165 * var(--k));padding-left:calc(11 * var(--k));font-size:calc(17 * var(--k));line-height:1.18}
  .s06-caption small{font-size:calc(8 * var(--k));margin-top:calc(10 * var(--k))}
  .s06-wave{width:calc(390 * var(--k));height:calc(55 * var(--k))}
  #contact .scena{height:calc(1065 * var(--k))}
  .s07-head{left:calc(20 * var(--k));top:calc(48 * var(--k));width:calc(350 * var(--k))}
  .s07-head .display{font-size:calc(50 * var(--k))}
  .s07-head p{width:calc(325 * var(--k));font-size:calc(14 * var(--k));margin-top:calc(15 * var(--k))}
  .s07-watermark{width:calc(250 * var(--k));height:calc(250 * var(--k));top:calc(130 * var(--k));right:calc(-170 * var(--k))}
  .s07-sheet{top:calc(274 * var(--k));clip-path:polygon(0 3%,51% 0,100% 4%,100% 100%,0 100%)}
  .s07-sheet-inner{left:calc(20 * var(--k));right:calc(20 * var(--k));top:calc(338 * var(--k));display:block}
  .s07-contact{min-height:0;padding:calc(20 * var(--k)) 0 calc(21 * var(--k));border-left:0;border-top:calc(1 * var(--k)) solid var(--line)}
  .s07-contact:first-child{border-top:0;padding-top:0}
  .s07-contact small{font-size:calc(9 * var(--k))}
  .s07-contact strong{font-size:calc(25 * var(--k));margin-top:calc(9 * var(--k))}
  .s07-contact p{font-size:calc(12 * var(--k));margin:calc(8 * var(--k)) 0 calc(12 * var(--k))}
  .s07-contact .linkline{font-size:calc(11 * var(--k));padding-bottom:calc(5 * var(--k))}
  .s07-foot{left:calc(20 * var(--k));right:calc(20 * var(--k));bottom:calc(29 * var(--k));padding-top:calc(13 * var(--k));font-size:calc(10 * var(--k));line-height:1.4;display:block}
  .s07-foot span:last-child{display:block;margin-top:calc(6 * var(--k))}
  #pied .scena{height:calc(1025 * var(--k))}
  .s08-upper{height:calc(942 * var(--k));padding:calc(32 * var(--k)) calc(20 * var(--k)) 0;display:grid;grid-template-columns:1fr 1fr;gap:calc(19 * var(--k)) calc(17 * var(--k));grid-template-rows:calc(276 * var(--k)) calc(260 * var(--k)) calc(310 * var(--k))}
  .s08-brand{grid-column:1/3}
  .footer-logo{width:calc(178 * var(--k));height:calc(103 * var(--k))}
  .footer-logo img{width:calc(285 * var(--k));left:calc(-51 * var(--k));top:calc(-31 * var(--k))}
  .s08-brand p{font-size:calc(25 * var(--k));width:calc(300 * var(--k));margin:calc(8 * var(--k)) 0 calc(13 * var(--k))}
  .s08-brand .tiny{font-size:calc(9 * var(--k))}
  .s08-col h3{font-size:calc(21 * var(--k));margin:calc(7 * var(--k)) 0 calc(16 * var(--k))}
  .s08-col a,.s08-col span{font-size:calc(12 * var(--k));line-height:1.36;margin-bottom:calc(10 * var(--k))}
  .s08-col:last-child{grid-column:1/3;border-top:calc(1 * var(--k)) solid var(--line);padding-top:calc(20 * var(--k))}
  .s08-col .phone{font-size:calc(17 * var(--k))}
  .s08-rule{left:calc(20 * var(--k));right:calc(20 * var(--k));top:calc(926 * var(--k))}
  .s08-bottom{height:calc(99 * var(--k));padding:calc(18 * var(--k)) calc(20 * var(--k));display:block;font-size:calc(10 * var(--k))}
  .s08-bottom span{display:block;margin-bottom:calc(4 * var(--k))}
  .s08-bottom strong{font-size:calc(16 * var(--k));position:absolute;right:calc(20 * var(--k));top:calc(31 * var(--k))}
}
.s07-sheet-inner{color:var(--ink)}
.s05-route-mobile{display:none}
@media (max-width:1099px){
  .s05-route{display:none}
  .s05-route-mobile{display:block;position:absolute;left:calc(9 * var(--k));top:0;width:calc(62 * var(--k));height:calc(556 * var(--k))}
  #contact .scena{height:calc(950 * var(--k))}
  #pied .scena{height:calc(880 * var(--k))}
  .s08-upper{height:calc(781 * var(--k));padding-top:calc(28 * var(--k));gap:calc(16 * var(--k)) calc(17 * var(--k));grid-template-rows:calc(230 * var(--k)) calc(230 * var(--k)) calc(235 * var(--k))}
  .s08-rule{top:calc(765 * var(--k))}
}

/* ═══ Adjustments — what the page changes on purpose, after the mockups' geometry (hand-written) ═══
   1. the details Iulian cut (❌, inventar-macheta.md): gone, and whatever sat under them stays where the
      mockup has it (the numbers are the removed label's line + its margin);
   2. the new texts (✏️): S03 « Préparer votre demande », S06 who runs CONF-M + SIRET;
   3. edges: whatever touches the mockup's edge goes on to the window's edge when the scene is centred
      (--m > 0: tablet above 540px, PC above 1920px). Clip-paths of those photos are written in lengths
      from their fixed side, so the roof keeps its slope however wide the photo gets;
   4. links, hover, focus, reduced motion, print. */

/* ─── S01 hero ─── */
.accueil{background:#fff}
.accueil .entete-loc{height:var(--entete-h)}                  /* the fixed header sits here, as in the mockup */
.accueil .content{padding-top:calc(140 * var(--k))}           /* 123 + the removed eyebrow (17) */
.accueil .band-intro strong{margin-top:0}                     /* label gone: aligned with the three verbs */
.accueil .band-item{padding-left:calc(61 * var(--k))}         /* numbers gone: the verb stays where it was */
.accueil .band-item small{padding-left:0}
.accueil .sub{line-height:1.5}                                /* 1.42 in the mockup; 1.5 is the floor for running text */
.accueil .main-cta,.accueil .second-cta{transition:background-color .2s ease,color .2s ease}
.accueil .main-cta:hover{background:var(--blue-hover)}
.accueil .second-cta:hover{color:var(--blue)}
.accueil .main-cta b,.accueil .second-cta b{display:inline-flex}
@media (min-width:1100px){
  .accueil .photo,.accueil .photo-shadow{right:calc(-1 * var(--m));width:calc(1060 * var(--k) + var(--m));
    clip-path:polygon(calc(116.6 * var(--k)) calc(92.04 * var(--k)),calc(445.2 * var(--k)) 0,100% 0,100% 100%,0 100%,0 calc(184.08 * var(--k)));
    top:var(--entete-h)}   /* the header is shorter than the mockup's 99 (2026-09-26): the photo starts under it. Height stays
                              708k: 02-rotunjiri's shape mixes k and % for that box; the bottom (H + 708k) stays under the band (750k) */
  .accueil .scena::after{top:var(--entete-h)}
  .accueil .service-band{left:calc(-1 * var(--m));width:calc(100% + 2 * var(--m));padding-left:calc(73 * var(--k) + var(--m))}
}
@media (max-width:1099px){
  .accueil .content{padding-top:calc(52 * var(--k))}         /* 39 + the removed eyebrow (13) */
  .accueil .photo{left:calc(-1 * var(--m));right:auto;width:calc(390 * var(--k) + 2 * var(--m))}
  .accueil .service-band{left:calc(-1 * var(--m));width:calc(100% + 2 * var(--m));padding-left:calc(20 * var(--k) + var(--m));padding-right:calc(20 * var(--k) + var(--m))}
  .accueil .band-intro strong{margin-left:0}
  .accueil .band-item{padding-left:calc(9 * var(--k))}
}

/* S01 — /revizie-sectiuni (2026-09-26): the mockups scale their text with the screen, so below the
   mockup widths it drops under the readable floor (7–10px at 320 and on 1100–1360px laptops).
   Floors, not new sizes: at the mockup widths nothing moves except what fell under the floor. */
/* the photo block (photo, note, wave): on PC it does not exist as a box (its children sit on the scene, as in the
   mockup); on the phone it follows the text, so a CTA that wraps to a second line pushes the photo down instead of
   landing on it (320px, 2026-09-26). Numbers are the mockup's, measured from the photo's top (435). */
.accueil__media{display:contents}
@media (max-width:1099px){
  .accueil .scena{height:auto}
  .accueil__media{display:block;position:relative;height:calc(327 * var(--k));margin-top:calc(46 * var(--k))}
  .accueil .photo{top:0;height:calc(330 * var(--k))}                        /* crop 37% → 34% */
  .accueil .photo-note{top:calc(202 * var(--k))}
  .accueil .service-band{position:relative;bottom:auto;left:auto;width:auto;margin:0 calc(-1 * var(--m))}   /* in the flow: full-bleed by negative margins */
  .accueil .sub{font-size:max(16px, calc(15 * var(--k)))}
  .accueil .actions{flex-wrap:wrap;row-gap:calc(8 * var(--k))}
  .accueil .main-cta{min-height:44px;font-size:max(13px, calc(11 * var(--k)))}
  .accueil .second-cta{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(11 * var(--k)));
    background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 calc(100% - 10px) / 100% 1px}   /* the underline stays under the words, the tap zone grows to 44px */
  .accueil .band-intro strong{font-size:max(14px, calc(15 * var(--k)))}
  .accueil .band-item strong{font-size:max(13px, calc(12 * var(--k)))}
  .accueil .band-item small{font-size:max(12px, calc(9 * var(--k)));line-height:1.3}
}
@media (min-width:1100px){
  .menu__liste a{font-size:max(13px, calc(15 * var(--k)))}
  .entete__num{font-size:max(13px, calc(15 * var(--k)))}
  .entete__devis{font-size:max(13px, calc(14 * var(--k)))}
  .accueil .main-cta,.accueil .second-cta{font-size:max(13px, calc(15 * var(--k)))}
  .accueil .sub{font-size:max(15px, calc(20 * var(--k)))}
  .accueil .band-item strong{font-size:max(13px, calc(17 * var(--k)))}
  .accueil .band-item small{font-size:max(12px, calc(13 * var(--k)))}
}

/* S01 — the band under the hero becomes a plain deep-blue ribbon (Iulian, 2026-09-26: variant B of 3, waves softened
   to 65 %, then « scoate liniile »: the two wave strokes are gone from the HTML).
   Colour = the photo note's #183567, so the two dark blocks are one blue.
   Top edge: .wave-fond, filled from the mockup's wave curve down (the old .wave box: PC 687k, phone 301k in the photo).
   Bottom edge: the same curve, drawn by S02 (.metiers-val, below) over the top of its photo — no white strip between. */
.accueil .wave-fond{position:absolute;z-index:2;left:0;top:calc(687 * var(--k));width:calc(1600 * var(--k));height:calc(100 * var(--k));fill:#183567;pointer-events:none}
.accueil .service-band{z-index:2;background:#183567}
.accueil .band-intro strong,.accueil .band-item strong{color:#fff}
.accueil .band-item{border-left-color:rgba(255,255,255,.3)}
.accueil .band-item small{color:#c9d7f0}                    /* 8.3:1 on #183567 */
@media (min-width:1100px){
  .accueil .wave-fond{left:calc(-1 * var(--m));width:calc(1600 * var(--k) + 2 * var(--m))}
}
@media (max-width:1099px){
  .accueil .wave-fond{top:calc(301 * var(--k));left:calc(-1 * var(--m));width:calc(390 * var(--k) + 2 * var(--m));height:calc(50 * var(--k))}
  .accueil .service-band{height:auto;padding-bottom:calc(23 * var(--k))}   /* 16 of air + the curve's highest point (13.75 × 0.5) */
}

/* S01 phone + tablet — « trop de blanc » (Iulian, 2026-09-26: variant B of 2, qa/revizie/_variante-erou-tel/).
   The text sits on the ribbons' deep blue; the photo rises under the buttons and melts into it from the top (mask, no
   edge), then the ribbon. The white fields above the title (76px) and under the link (~100px) are gone; photo on the
   first screen 271 → 353px at 390×750. Contrast on the real pixels: link 10.4:1 over the melt, text 9.7:1. */
@media (max-width:1099px){
  .accueil{background:#183567}
  .accueil h1{color:#fff}
  .accueil h1 span{color:#9db8ef}
  .accueil .sub{color:#dce8fa}
  .accueil .main-cta{background:#fff;color:#183567}
  .accueil .main-cta:hover{background:#e6edfa}
  .accueil .second-cta,.accueil .second-cta b{color:#fff}
  .accueil .second-cta:hover{color:#dce8fa}
  .accueil .second-cta{background-image:linear-gradient(#fff,#fff)}   /* the underline, white */
  .accueil a:focus-visible{outline-color:#fff}
  .accueil .content{padding-top:calc(30 * var(--k))}
  .accueil__media{margin-top:calc(-14 * var(--k));height:calc(430 * var(--k))}
  .accueil .accueil__media .photo{height:calc(430 * var(--k));clip-path:none;   /* beats the roof shape of 02-rotunjiri */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 40%);
            mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 14%, #000 40%)}
  .accueil .photo-note{top:calc(302 * var(--k))}
  .accueil .wave-fond{top:calc(401 * var(--k))}
}

/* S01 band on phone + tablet — « textul prea mic » (Iulian, 2026-09-26: variant B of 2, qa/revizie/_variante-banda-erou/).
   The mockup's three columns held 13 / 12px text (under the page's 16px) and broke « Isolation · Faux plafonds » on
   three lines at 320: one verb per row, its trades on the right, 19 / 17 / 15px. The band grows 151 → 211px at 390. */
@media (max-width:1099px){
  .accueil .band-intro{height:auto;margin-bottom:calc(10 * var(--k))}
  .accueil .band-intro strong{font-size:max(19px, calc(19 * var(--k)))}
  .accueil .band-item{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:0;
    padding:calc(12 * var(--k)) 0;border-left:0;border-top:1px solid rgba(255,255,255,.22)}
  .accueil .band-item strong{font-size:max(17px, calc(16 * var(--k)))}
  .accueil .band-item small{margin-top:0;font-size:max(15px, calc(13 * var(--k)));text-align:right}
}
/* … and on PC (Iulian, 2026-09-26: « fă mai mare și la PC »): the same ~30% as the phone — 19 / 15 / 12px → 24 / 20 / 14
   at 1440; the floors keep 1100–1280 laptops readable. */
@media (min-width:1100px){
  .accueil .band-intro{width:calc(310 * var(--k))}   /* 258 left the bigger title touching the first rule; the band had ~200 spare on the right */
  .accueil .band-intro strong{font-size:max(20px, calc(27 * var(--k)))}
  .accueil .band-item strong{font-size:max(16px, calc(22 * var(--k)))}
  .accueil .band-item small{font-size:max(14px, calc(16 * var(--k)));margin-top:calc(8 * var(--k))}
}

/* ─── S02 Nos métiers ─── */
/* the foot of S01's blue ribbon, laid over the top of the stage photo (2026-09-26: no white strip between the wave and
   the photo). Same curve as the ribbon's top, so both edges run parallel; lifted by the curve's highest point (13 units)
   so the blue starts flush with S01's straight bottom. On the phone the stage opens on white (title first): same foot. */
.metiers .metiers-val{position:absolute;z-index:3;left:0;top:calc(-13 * var(--k));width:100%;height:calc(60 * var(--k));fill:#183567;pointer-events:none}
@media (max-width:1099px){.metiers .metiers-val{top:calc(-6.5 * var(--k));height:calc(30 * var(--k))}}
/* the « Parlons de vos espaces. » band = the same ribbon (Iulian, 2026-09-26, variant 1 of 2): S01's blue, a wavy top
   (.parlons-sus: white above the curve, cut into the band, which clips it) and a foot drawn by S03 (.demande-val).
   The mid-section wave strokes (.entry-curve) are gone from the HTML. The band grows by 34 so its text keeps its air. */
.metiers .bottom{background:#183567}
.metiers .bottom-contact .cta{color:#183567}
.metiers .parlons-sus{position:absolute;z-index:0;left:0;top:calc(-13 * var(--k));width:100%;height:calc(60 * var(--k));fill:#fff;pointer-events:none}
@media (min-width:1100px){
  .metiers .scena{height:calc(1134 * var(--k))}
  .metiers .bottom{height:calc(264 * var(--k));padding-top:calc(96 * var(--k))}
}
@media (max-width:1099px){
  .metiers .parlons-sus{top:calc(-6.5 * var(--k));height:calc(30 * var(--k))}
  .metiers .bottom{padding-top:calc(45 * var(--k))}
}
.metiers .stage-note strong{margin-top:0}
.metiers .card-body{padding-top:calc(37 * var(--k))}          /* 22 + the removed « 0N / MÉTIER » (15) */
.metiers .bottom::before{display:none}                         /* ❌ the light-blue bar */
.metiers .bottom strong{margin-top:calc(30.4 * var(--k))}      /* 12 + the removed « UN PROJET EN TÊTE ? » line */
.metiers .stage-link:hover{color:var(--blue)}
.metiers .bottom-contact .phone:hover{text-decoration:underline}
.metiers .bottom-contact .cta{transition:background-color .2s ease}
.metiers .bottom-contact .cta:hover{background:#e6edfa}
.metiers .stage-link b,.metiers .bottom-contact .cta b{display:inline-flex}
@media (min-width:1100px){
  .metiers .stage-note{display:flex;align-items:center}       /* its label is gone: the signature sits in the middle (phone: hidden, as in its mockup) */
  .metiers .stage-content{top:calc(73 * var(--k))}           /* 56 + the removed eyebrow */
  .metiers .stage{left:calc(-1 * var(--m));width:calc(100% + 2 * var(--m))}
  .metiers .stage::after{background:linear-gradient(90deg,#fff 0,#fff calc(var(--m) + 544 * var(--k)),rgba(255,255,255,.93) calc(var(--m) + 688 * var(--k)),rgba(255,255,255,.48) calc(var(--m) + 864 * var(--k)),rgba(255,255,255,.03) calc(var(--m) + 1168 * var(--k)))}
  .metiers .stage-photo{width:calc(1130 * var(--k) + var(--m));clip-path:polygon(calc(146.9 * var(--k)) 0,100% 0,100% 100%,0 100%,0 calc(90.25 * var(--k)))}
  .metiers .stage-content{left:calc(72 * var(--k) + var(--m))}
  .metiers .stage-note{right:calc(75 * var(--k) + var(--m))}
  .metiers .bottom{left:calc(-1 * var(--m));width:calc(100% + 2 * var(--m));padding-left:calc(72 * var(--k) + var(--m));padding-right:calc(72 * var(--k) + var(--m))}
  .metiers .bottom::after{right:calc(330 * var(--k) + var(--m))}
}
@media (max-width:1099px){
  .metiers .stage-content{top:calc(49 * var(--k));left:calc(20 * var(--k) + var(--m))}
  .metiers .stage{width:auto;margin:0 calc(-1 * var(--m))}
  .metiers .stage-photo{width:calc(390 * var(--k) + 2 * var(--m))}
  /* cards as tall as what they hold: with « En savoir plus » gone, the mockup's fixed heights left a white
     block under every title (Iulian, 2026-09-26); the two cards of a row keep the same height */
  .metiers .cards{align-items:stretch}
  .metiers .card,.metiers .card:nth-child(2),.metiers .card:nth-child(3),.metiers .card:nth-child(4),.metiers .card:nth-child(5),.metiers .card:nth-child(6){height:auto}
  .metiers .card-body{height:auto;padding:calc(14 * var(--k)) calc(12 * var(--k)) calc(16 * var(--k))}
  .metiers .card:nth-child(3) .card-body,.metiers .card:nth-child(6) .card-body{height:auto;padding:calc(18 * var(--k)) calc(18 * var(--k)) calc(20 * var(--k))}
  .metiers .card h3{margin-top:0}
  /* 39 + the removed « Visuels d’illustration » line (14 + 10.35), which sat in the flow on the phone */
  .metiers .bottom{width:auto;margin-top:calc(63.35 * var(--k));margin-left:calc(-1 * var(--m));margin-right:calc(-1 * var(--m));padding-left:calc(20 * var(--k) + var(--m));padding-right:calc(20 * var(--k) + var(--m))}
  .metiers .bottom strong{margin-top:calc(28.4 * var(--k))}
}

/* S02 — /revizie-sectiuni (2026-09-26) */
.metiers .media picture{display:contents}                      /* phone crops of the card photos (<picture>), laid out as the <img> */
@media (max-width:1099px){
  /* the stage follows its text: with readable sizes the title and text grew, and at 320 they ran 21px into the
     cards. The stage's box is now the text plus the photo's visible part; the photo hangs from its bottom
     (sliding 45px under the text, as in the mockup) and runs on 26px under the cards. The white fade over
     the photo's top moves from the stage onto the photo itself (mask). */
  .metiers .stage::after{display:none}
  .metiers .stage{height:auto;overflow:visible;background:#fff;
    padding:calc(49 * var(--k)) 0 calc(164 * var(--k) + .28 * var(--m))}   /* = photo height − the 45px it slides under the text − the 26px the cards cover */
  .metiers .stage-content{position:relative;top:auto;left:auto;margin-left:calc(20 * var(--k) + var(--m))}
  .metiers .stage-photo{top:auto;right:auto;left:0;bottom:calc(-26 * var(--k));
    height:calc(235 * var(--k) + .28 * var(--m));   /* tablet: the photo spans the window, so it grows a little: cut 44% → 33% */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(92 * var(--k)));mask-image:linear-gradient(180deg,transparent 0,#000 calc(92 * var(--k)))}
  .metiers .cards{margin-top:0}                                  /* the stage now ends where the cards start; the photo runs on under them */
  .metiers .deck{font-size:max(16px, calc(14 * var(--k)));line-height:1.5}
  .metiers .stage-link{min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(12 * var(--k)));
    background:linear-gradient(var(--blue),var(--blue)) no-repeat 0 calc(100% - 10px) / 100% 1px}
  .metiers .card:nth-child(3) p,.metiers .card:nth-child(6) p{font-size:max(16px, calc(11 * var(--k)));line-height:1.5}
  .metiers .bottom{height:auto;min-height:calc(270 * var(--k))}
  .metiers .bottom-contact p{font-size:max(13px, calc(12 * var(--k)))}
  .metiers .bottom-contact .phone{display:inline-flex;align-items:center;min-height:44px;margin-right:calc(10 * var(--k))}
  .metiers .bottom-contact .cta{width:auto;min-height:44px;margin-left:0;gap:calc(12 * var(--k));padding:0 calc(14 * var(--k));font-size:max(13px, calc(10 * var(--k)))}
}
@media (min-width:1100px){
  .metiers .deck{font-size:max(15px, calc(18 * var(--k)));line-height:1.5;width:max(calc(525 * var(--k)), 430px)}   /* 1100px: at its floor size the text took 3 lines and pushed the link under the cards */
  .metiers .stage-link{font-size:max(13px, calc(14 * var(--k)))}
  .metiers .card p{font-size:max(13px, calc(13 * var(--k)));line-height:1.5}
  .metiers .bottom-contact p{font-size:max(13px, calc(16 * var(--k)))}
  .metiers .bottom-contact .cta{width:auto;min-width:calc(210 * var(--k));gap:calc(16 * var(--k));font-size:max(13px, calc(12 * var(--k)))}
}

@media (min-width:1100px) and (max-width:1299px){.metiers .stage-link{margin-top:calc(16 * var(--k))}}
@media (min-width:1100px){
  /* PC cards as tall as what they hold (Iulian, 2026-09-26, same as on the phone); their mockup offsets stay */
  .metiers .card{height:auto}
  .metiers .card-body{height:auto;padding-bottom:calc(24 * var(--k))}
}   /* small laptops: the floor-size text is taller, the link kept touching the first card */

/* ─── S03 Préparer votre demande (approved structure: what to send, then WhatsApp) ─── */
/* the foot of the « Parlons » ribbon (S02), same curve, over S03's top and its photo; above the photo (z 6) */
.demande .demande-val{position:absolute;z-index:6;left:calc(-1 * var(--m));top:calc(-13 * var(--k));width:calc(100% + 2 * var(--m));height:calc(60 * var(--k));fill:#183567;pointer-events:none}
@media (max-width:1099px){.demande .demande-val{top:calc(-6.5 * var(--k));height:calc(30 * var(--k))}}
.demande .s03-head .display{margin-top:calc(40 * var(--k))}   /* 23 + the removed eyebrow */
.demande .s03-head .linkline:hover{color:#dce8fa}
.demande .linkline b{display:inline-flex}
/* « Les envoyer sur WhatsApp »: the WhatsApp mark instead of the arrow (Iulian, 2026-09-26); solid, so a little smaller
   than the thin arrow it replaces. The S03 bottom wave strokes (.s03-curve) are gone from the HTML; the white edge stays. */
.demande .ico-wa{display:block;width:.8em;height:.8em;fill:currentColor}
.s03-liste{top:calc(530 * var(--k))}                           /* starts on the removed rule's line */
.s03-liste li{padding:calc(11 * var(--k)) 0;border-top:1px solid rgba(255,255,255,.25);font:400 calc(22 * var(--k))/1.25 var(--f-titre);letter-spacing:-.01em;color:#e2eaf8}
.s03-liste li:last-child{border-bottom:1px solid rgba(255,255,255,.25)}
@media (min-width:1100px){
  .demande .s03-main{right:calc(-1 * var(--m));width:calc(765 * var(--k) + var(--m));clip-path:polygon(calc(168.3 * var(--k)) 0,100% 0,100% 100%,0 100%,0 calc(145.92 * var(--k)))}
  .demande .s03-main::after{background:linear-gradient(90deg,rgba(10,30,65,.45),transparent calc(344.25 * var(--k)))}
  .demande .s03-bottom{left:calc(-1 * var(--m));right:calc(-1 * var(--m))}
}
@media (max-width:1099px){
  .demande .s03-head .display{margin-top:calc(31 * var(--k));font-size:calc(46 * var(--k))} /* 18 + the removed eyebrow; 46: « votre demande. » needs 47.8 to hold on one line */
  .s03-liste{top:calc(895 * var(--k))}
  .s03-liste li{padding:calc(8 * var(--k)) 0;font-size:calc(18 * var(--k))}
  .demande .s03-main{left:calc(-1 * var(--m));right:auto;width:calc(390 * var(--k) + 2 * var(--m))}
  .demande .s03-bottom{left:calc(-1 * var(--m));right:calc(-1 * var(--m))}
}

/* S03 — /revizie-sectiuni (2026-09-26) */
.s{overflow:clip}                                              /* the mockup CSS sets overflow:hidden later in the file: see 01-baza */
@media (min-width:1100px){.metiers .stage{overflow:clip}}      /* (on the phone the stage lets its photo hang below: visible) */
.demande .s03-main picture{display:contents}                   /* phone crop of the big photo (<picture>), laid out as the <img> */
.parallaxe picture{display:contents}
@media (max-width:1099px){
  .demande .s03-head p{font-size:max(16px, calc(14 * var(--k)));line-height:1.5}
  .demande .s03-head .linkline{min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(12 * var(--k)));
    background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px) / 100% 1px}   /* the underline stays, the tap zone grows to 44px */
}
@media (min-width:1100px){
  .demande .s03-head p{font-size:max(15px, calc(19 * var(--k)));line-height:1.5}
  .demande .s03-head .linkline{font-size:max(13px, calc(14 * var(--k)))}
}

/* ─── S04 Nos réalisations ─── */
.realisations .s04-top .display{margin-top:calc(33 * var(--k))}  /* 16 + the removed eyebrow */
.realisations .gallery{margin-top:calc(66 * var(--k))}           /* the removed « Visuels d’illustration » line */
.realisations .gallery::after{display:none}                      /* ❌ the diagonal accent */
.realisations figure{margin:0}
.realisations .linkline:hover{color:var(--blue-hover)}
.realisations .linkline b{display:inline-flex}
@media (max-width:1099px){
  .realisations .s04-top .display{margin-top:calc(30 * var(--k))}
  .realisations .gallery{margin-top:calc(49 * var(--k))}
}

/* S04 — /revizie-sectiuni (2026-09-26) */
.realisations picture{display:contents}                        /* upright crops of the gallery photos for the tall cells */
@media (max-width:1099px){
  .realisations .s04-top .intro{font-size:max(16px, calc(13 * var(--k)));line-height:1.5}
  .realisations .s04-foot .linkline{min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(12 * var(--k)));
    background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px) / 100% 1px}
}
@media (min-width:1100px){
  .realisations .s04-top .intro{font-size:max(15px, calc(17 * var(--k)));line-height:1.5}
  #realisations .scena{height:auto;padding-bottom:calc(22 * var(--k))}   /* 1100px: the floor-size intro grew and pushed the last line out of the fixed-height section; at 1600 still 1190 */
  .realisations .s04-foot .linkline{font-size:max(13px, calc(14 * var(--k)))}
}

/* ─── S05 De la structure aux finitions ─── */
.savoir-faire .s05-header .display{margin-top:calc(40 * var(--k))}
.savoir-faire .linkline:hover{color:var(--blue-hover)}
.savoir-faire .linkline b{display:inline-flex}
@media (min-width:1100px){
  .s05-band::before{display:none}                                /* ❌ the diagonal across the band */
  .s05-band{left:calc(-1 * var(--m));right:calc(-1 * var(--m))}
  .s05-steps{left:calc(75 * var(--k) + var(--m));right:calc(75 * var(--k) + var(--m))}
}
@media (max-width:1099px){
  .savoir-faire .s05-header .display{margin-top:calc(36 * var(--k))}
  .s05-band{left:calc(-1 * var(--m));right:calc(-1 * var(--m))}
  .s05-steps{left:calc(69 * var(--k) + var(--m));right:calc(18 * var(--k) + var(--m))}
  .s05-band::before{right:calc(-230 * var(--k) + var(--m))}
}

/* S05 — /revizie-sectiuni (2026-09-26) */
.s05-photo picture{display:contents}                           /* phone / tablet crops of the corridor (<picture>), laid out as the <img> */
@media (max-width:1099px){
  /* the scene follows its content: with readable sizes the intro grows (10.7 → 16px at 320) and ran into the band,
     which the mockup pins at 297. Header, band, closing line in the flow, with the mockup's gaps (band 61 under the text). */
  #savoir-faire .scena{height:auto;display:grid;grid-template-columns:calc(20 * var(--k)) 1fr calc(20 * var(--k));padding-bottom:calc(56 * var(--k))}
  .s05-header{grid-area:1/1/2/-1}
  /* Iulian, 2026-09-26 (variant A of three shown): the corridor becomes the band's background, the painted wall
     leaves the phone (it stays on PC), the closing line and its link go under the band, full width.
     The veil is the band's own background, so it never covers the verbs. Navy at .82 over a pure white photo still
     gives the 13px trade names (#d7e3f4) 6.2:1: it holds for the photo that will replace this provisional one. */
  .s05-band{grid-area:2/1/3/-1;position:relative;z-index:1;top:auto;left:auto;right:auto;margin:calc(61 * var(--k)) calc(-1 * var(--m)) 0;background:rgba(20,42,82,.82)}
  .s05-photo.one{grid-area:2/1/3/-1;position:relative;z-index:0;top:auto;left:auto;width:auto;height:auto;margin:calc(61 * var(--k)) calc(-1 * var(--m)) 0;border-radius:0;box-shadow:none}
  .s05-photo.two{display:none}
  .s05-final{grid-area:3/2/4/3;position:relative;right:auto;bottom:auto;width:auto;margin-top:calc(36 * var(--k))}
  .s05-header p{font-size:max(16px, calc(13 * var(--k)));line-height:1.5}
  .s05-step p{font-size:max(13px, calc(11 * var(--k)))}
  .s05-final p{font-size:max(16px, calc(19 * var(--k)));line-height:1.5;text-wrap:balance}
  .s05-final .linkline{min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(10 * var(--k)));
    background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px) / 100% 1px}   /* the underline stays, the tap zone grows to 44px */
}
@media (min-width:1100px){
  .s05-header p{font-size:max(15px, calc(17 * var(--k)));line-height:1.5}
  .s05-step p{font-size:max(13px, calc(15 * var(--k)))}
  .s05-final .linkline{font-size:max(13px, calc(14 * var(--k)))}
}

/* S05 — the ribbon (after S05's own phone rules above, which it overrides) */
/* the verbs' band = the page's ribbon (Iulian, 2026-09-26): S01's blue, wavy top and foot cut in the section's own grey
   (.s05-val-sus / -jos); the double wave strokes (.s05-route, and the phone's vertical .s05-route-mobile) are gone.
   The foot runs 2px past the band's edge: the band clips it on a whole pixel, else the SVG's soft edge and the band's
   snapped one left a grey row at 320px. PC: the two photos (variant B of 3) sit under the band, same height, tops
   aligned, instead of dipping into it by different amounts (85k and 21k). */
.s05-band{background:#183567}
.s05-val-sus,.s05-val-jos{position:absolute;z-index:1;left:0;width:100%;height:calc(60 * var(--k));fill:#f4f6fa;pointer-events:none}
.s05-val-sus{top:calc(-13 * var(--k))}
.s05-val-jos{bottom:-2px}
@media (min-width:1100px){
  #savoir-faire .scena{height:calc(1030 * var(--k))}
  .s05-photo.one,.s05-photo.two{top:calc(735 * var(--k));bottom:auto;height:calc(250 * var(--k))}
  .s05-photo.one{left:calc(74 * var(--k));width:calc(551 * var(--k))}
  .s05-photo.two{left:calc(648 * var(--k));width:calc(390 * var(--k))}
  .s05-final{bottom:calc(100 * var(--k))}
}
@media (max-width:1099px){
  .s05-band{background:rgba(24,53,103,.82)}                  /* the ribbon's blue as the veil over the corridor */
  .s05-val-sus,.s05-val-jos{height:calc(30 * var(--k))}
  .s05-val-sus{top:calc(-6.5 * var(--k))}
  .s05-photo.one{height:calc(556 * var(--k))}                 /* exactly the band's height: 1px of photo showed under the foot */
}
/* the four verbs: centred in the ribbon's visible blue, no separators, a filled icon above each (Iulian, 2026-09-26;
   idei-alese: icon_style « plin »). The steps box spans the band minus its waves (blue starts ~17k in, ends ~30k before
   the bottom on PC; 8.5 / 15 on the phone), and its rows are centred inside it. */
.s05-step{border-right:0;padding:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.s05-ico{flex:none;width:calc(54 * var(--k));height:calc(54 * var(--k));fill:#a9c5f7;color:#a9c5f7}   /* 40 → 54: « fă iconițele mai mari » (2026-09-26) */
.savoir-faire .s05-step h3{margin-top:calc(14 * var(--k))}
@media (min-width:1100px){
  .s05-steps{top:calc(17 * var(--k));bottom:calc(30 * var(--k));align-content:center}
}
@media (max-width:1099px){
  .s05-steps{top:calc(8.5 * var(--k));bottom:calc(15 * var(--k));left:calc(20 * var(--k) + var(--m));right:calc(20 * var(--k) + var(--m));grid-template-rows:repeat(4,1fr)}   /* the vertical wave's column is gone: same margins as the title */
  .s05-step{height:auto;justify-content:center}
  .s05-ico{width:calc(38 * var(--k));height:calc(38 * var(--k))}
  .savoir-faire .s05-step h3{margin-top:calc(8 * var(--k))}
}

/* ─── S06 Rêves & confort (the « who runs CONF-M » line left on 2026-09-26, see the layout block below) ─── */
.apropos .linkline:hover{color:var(--blue-hover)}
.apropos .linkline b{display:inline-flex}
@media (max-width:1099px){
  .apropos .s06-wood{left:calc(-1 * var(--m));right:auto;width:calc(390 * var(--k) + 2 * var(--m))}
}

/* S06 — /revizie-sectiuni (2026-09-26) */
@media (max-width:1099px){
  /* Iulian, 2026-09-26 (variant C of three shown): the title, its line and its link are written on the oak photo,
     under a navy veil (as S05's band); the plaster photo leaves the phone (it stays on PC). The photo is the title's background: it is as tall as the title block and,
     on wide tablets, at least as tall as before, so its crop stays under 35% (cut 33% at 1099).
     Veil .75, lighter over the free strip under the link: over a pure white photo the 16px line (#d7e3f4) still has
     4.9:1 and « confort. » (#a9c5f7, large) 3.7:1, so it holds on the wall's white corner. */
  #apropos .scena{height:auto;display:grid;grid-template-columns:calc(20 * var(--k)) 1fr calc(20 * var(--k));padding-bottom:calc(94 * var(--k))}
  .apropos .s06-wood{grid-area:1/1/2/-1;position:relative;z-index:0;top:auto;left:auto;right:auto;width:auto;height:auto;margin:0 calc(-1 * var(--m));
    min-height:calc(377 * var(--k) + .34 * var(--m))}
  .apropos .s06-wood::after{background:linear-gradient(180deg,rgba(20,42,82,.75) 0,rgba(20,42,82,.75) 78%,rgba(20,42,82,.5) 100%)}
  .apropos .s06-title{grid-area:1/2/2/3;position:relative;z-index:2;left:auto;top:auto;width:auto;align-self:start;margin:calc(81 * var(--k)) 0 calc(64 * var(--k))}
  .apropos .s06-title .display{color:#fff}
  .apropos .s06-title .display span{color:#a9c5f7}
  .apropos .s06-title p{color:#d7e3f4;font-size:max(16px, calc(14 * var(--k)));line-height:1.5}
  .apropos .s06-title .linkline{color:#fff;min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(12 * var(--k)));
    background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px) / 100% 1px}   /* the underline stays, the tap zone grows to 44px */
  .apropos .s06-title .linkline:hover{color:#dce8fa}
  .apropos .s06-title :focus-visible{outline-color:#fff}
  .apropos .s06-plaster{display:none}
}
@media (min-width:1100px){
  .apropos .s06-title p{font-size:max(15px, calc(19 * var(--k)));line-height:1.5}
  .apropos .s06-title .linkline{font-size:max(13px, calc(14 * var(--k)))}
}

/* S06 — new layout (Iulian, 2026-09-26: variant B of 3). The « CONF-M est dirigée par Igor Crismaru » line + SIRET left
   the section (« ne se potrivește aici »; the SIRET stays in the footer), and the two wave strokes gave way to S07's blue
   rising in a wave (.s06-val, the page's ribbon curve), 2px past the edge so the section clips it on a whole pixel.
   PC: the tall oak photo on the left; on the right the title, then the wide plaster photo; tops and bottoms aligned. */
.apropos .s06-val{position:absolute;z-index:3;left:calc(-1 * var(--m));bottom:-2px;width:calc(100% + 2 * var(--m));height:calc(60 * var(--k));fill:#2c52a0;pointer-events:none}
@media (min-width:1100px){
  #apropos .scena{height:calc(840 * var(--k))}
  .apropos .s06-wood{left:calc(73 * var(--k));right:auto;top:calc(70 * var(--k));width:calc(500 * var(--k));height:calc(660 * var(--k))}
  .apropos .s06-title{left:calc(650 * var(--k));top:calc(70 * var(--k));width:calc(877 * var(--k))}
  .apropos .s06-title p{width:calc(560 * var(--k))}
  .apropos .s06-plaster{left:calc(650 * var(--k));top:calc(490 * var(--k));bottom:auto;width:calc(877 * var(--k));height:calc(240 * var(--k))}
}
@media (max-width:1099px){
  .apropos .s06-val{height:calc(30 * var(--k))}
  #apropos .scena{padding-bottom:0}                            /* the wave rises over the oak photo's foot: no white strip */
}

/* ─── S07 Contact ─── */
.contact .s07-head .display{margin-top:calc(36 * var(--k))}    /* 19 + the removed eyebrow */
.contact .s07-contact strong{margin-top:calc(42.4 * var(--k))}  /* 24 + the removed « 0N / … » line */
.contact .s07-sheet{left:calc(-1 * var(--m));right:calc(-1 * var(--m))}
.contact .linkline:hover{color:var(--blue-hover)}
.contact .linkline b{display:inline-flex}
@media (max-width:1099px){
  .contact .s07-head .display{margin-top:calc(32 * var(--k))}
  .contact .s07-contact strong{margin-top:calc(27.4 * var(--k))}
}

/* S07 — /revizie-sectiuni (2026-09-26) */
/* filled phone / envelope / pin beside each value (Iulian, 2026-09-26: variant B of three; idei-alese: icon_style « plin »).
   Paths: Material Icons « call », « mail », « place » (Apache License 2.0), inline in the page's sprite. */
.contact .s07-val{display:flex;align-items:center;gap:calc(14 * var(--k));margin-top:calc(42.4 * var(--k))}
.contact .s07-val strong{margin-top:0}
.s07-ico{flex:none;width:calc(26 * var(--k));height:calc(26 * var(--k));fill:var(--blue)}
@media (max-width:1099px){
  .contact .s07-val{margin-top:calc(27.4 * var(--k));gap:calc(10 * var(--k))}
  .s07-ico{width:max(20px, calc(22 * var(--k)));height:max(20px, calc(22 * var(--k)))}
}
@media (max-width:1099px){
  /* the scene follows its content: with readable sizes the white line under the title would have run onto the white
     sheet (at 320), and the three contacts into the footer line. Title, sheet, contacts, footer line in the flow, with
     the mockup's gaps (sheet 38 under the text, contacts 64 into the sheet, footer 47 under them, 29 to the end). */
  #contact .scena{height:auto;display:grid;grid-template-columns:calc(20 * var(--k)) 1fr calc(20 * var(--k))}
  .contact .s07-head{grid-area:1/2/2/3;position:relative;left:auto;top:auto;width:auto;margin-top:calc(48 * var(--k))}
  .contact .s07-sheet{grid-area:2/1/4/-1;position:relative;top:auto;bottom:auto;left:auto;right:auto;margin:calc(38 * var(--k)) calc(-1 * var(--m)) 0}
  .contact .s07-sheet-inner{grid-area:2/2/3/3;position:relative;left:auto;right:auto;top:auto;margin-top:calc(102 * var(--k))}
  .contact .s07-foot{grid-area:3/2/4/3;position:relative;left:auto;right:auto;bottom:auto;margin:calc(47 * var(--k)) 0 calc(29 * var(--k))}
  .contact .s07-head p{font-size:max(16px, calc(14 * var(--k)));line-height:1.5}
  .contact .s07-contact p{font-size:max(16px, calc(12 * var(--k)));line-height:1.5}
  .contact .s07-contact .linkline{min-height:44px;padding-bottom:0;border-bottom:0;font-size:max(13px, calc(11 * var(--k)));
    background:linear-gradient(currentColor,currentColor) no-repeat 0 calc(100% - 8px) / 100% 1px}   /* the underline stays, the tap zone grows to 44px */
  .contact .s07-foot{font-size:max(12px, calc(10 * var(--k)))}
}
@media (min-width:1100px){
  .contact .s07-head p{font-size:max(15px, calc(18 * var(--k)));line-height:1.5;width:calc(600 * var(--k));text-wrap:balance}   /* 670 held ~81 characters a line and left « intérieurs. » alone */
  .contact .s07-contact p{font-size:max(13px, calc(16 * var(--k)));line-height:1.5}
  .contact .s07-contact .linkline{font-size:max(13px, calc(14 * var(--k)))}
  .contact .s07-foot{font-size:max(12px, calc(13 * var(--k)))}
  .contact .s07-head{top:calc(64 * var(--k))}   /* line-height 1.4 → 1.5 lowered the white line onto the white sheet's peak (1px at 1600): up 8 */
}
@media (min-width:1100px) and (max-width:1299px){.contact .s07-head{top:calc(53 * var(--k))}}

/* S07 — the three contacts become boxes you can tap anywhere (Iulian, 2026-09-26: « butoane mari », variant B of 2,
   qa/revizie/_variante-s07/): the phone number leads in the page's blue, e-mail and address on the pale blue.
   The link's ::after covers its box; the actions sit on the boxes' floor, so the three links share one line (the
   address's two lines used to drop « Voir l'adresse » 21px under the others). Corners: the page's 22. */
.contact .s07-contact,.contact .s07-contact:first-child{position:relative;display:flex;flex-direction:column;border:0;
  border-radius:calc(22 * var(--k));background:var(--pale);transition:background-color .2s ease}
.contact .s07-contact:hover{background:#e3eaf5}
.contact .s07-contact .linkline{align-self:flex-start}
.contact .s07-contact .linkline::after{content:"";position:absolute;inset:0;border-radius:calc(22 * var(--k))}
.contact .s07-contact .linkline:focus-visible{outline:0}
.contact .s07-contact .linkline:focus-visible::after{outline:2px solid var(--blue);outline-offset:3px}
.contact .linkline b{transition:transform .2s ease}
.contact .s07-contact:hover .linkline b{transform:translate(3px,-3px)}
.contact .s07-contact:first-child{background:var(--blue);color:#fff}
.contact .s07-contact:first-child:hover{background:var(--blue-hover)}
.contact .s07-contact:first-child .s07-ico{fill:#fff}
.contact .s07-contact:first-child p{color:#dce8fa}
.contact .s07-contact:first-child .linkline{color:#fff}
@media (min-width:1100px){
  .contact .s07-sheet-inner{grid-template-columns:repeat(3,1fr);gap:calc(24 * var(--k))}
  .contact .s07-contact,.contact .s07-contact:first-child{min-height:calc(300 * var(--k));padding:calc(38 * var(--k)) calc(40 * var(--k)) calc(34 * var(--k))}
  .contact .s07-val{flex-direction:column;align-items:flex-start;gap:calc(22 * var(--k));margin-top:0}   /* the icon above the value */
  .s07-ico{width:calc(40 * var(--k));height:calc(40 * var(--k))}
  .contact .s07-contact p{margin:calc(14 * var(--k)) 0 calc(28 * var(--k))}
  .contact .s07-contact .linkline{margin-top:auto}
}
@media (max-width:1099px){
  .contact .s07-sheet-inner{display:grid;grid-template-columns:1fr;row-gap:calc(12 * var(--k))}
  .contact .s07-contact,.contact .s07-contact:first-child{padding:calc(20 * var(--k)) calc(20 * var(--k)) calc(8 * var(--k))}
  .contact .s07-val{margin-top:0}
  .contact .s07-contact p{margin:calc(8 * var(--k)) 0 calc(2 * var(--k))}
  .contact .s07-sheet{margin-bottom:-2px}   /* the section ends on a fraction of a pixel: a 1px blue seam at 768; 2px past it, clipped */
}

/* S07 — quote form in the blue (Iulian, 2026-09-26: « un formular simplu », then « mai complicat: e-mail, téléphone,
   type de service, code postal » → B of 2, the white card; qa/revizie/_variante-formular/). It sends nothing (demo,
   as PV88): script.js says so on submit; the fields have no name. The blue grows to hold the card on PC; the
   diamond outline leaves (it would run behind the card). The select's arrow is #i-chevron from the sprite (no data:). */
.s07-form{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:calc(18 * var(--k)) calc(20 * var(--k));
  padding:calc(34 * var(--k)) calc(36 * var(--k)) calc(30 * var(--k));background:#fff;border-radius:calc(22 * var(--k));color:var(--ink)}
.s07-champ{margin:0;display:grid;gap:calc(8 * var(--k));min-width:0}
.s07-champ--large,.s07-form-pied{grid-column:1 / -1}
.s07-champ--liste{position:relative}
.s07-champ label{font-size:max(13px, calc(14 * var(--k)));font-weight:700}
.s07-champ input,.s07-champ select,.s07-champ textarea{width:100%;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:var(--pale);
  border:1px solid transparent;border-radius:calc(12 * var(--k));padding:0 calc(18 * var(--k));height:max(44px, calc(56 * var(--k)))}   /* 16px: no zoom on iPhone */
.s07-champ textarea{height:max(80px, calc(100 * var(--k)));padding-top:calc(14 * var(--k));resize:vertical;line-height:1.4}
.s07-champ select{padding-right:calc(48 * var(--k));-webkit-appearance:none;appearance:none;cursor:pointer}
.js .s07-champ select:not(.a-valeur){color:var(--muted)}   /* reads as a placeholder until a service is chosen */
.s07-chevron{position:absolute;right:calc(18 * var(--k));bottom:calc(max(44px, calc(56 * var(--k))) / 2 - 11px);width:22px;height:22px;
  fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.s07-champ [aria-invalid="true"]{border-color:#b3261e}
.s07-form-pied{display:flex;flex-wrap:wrap;align-items:center;gap:calc(12 * var(--k)) calc(20 * var(--k));margin-top:calc(4 * var(--k))}
.s07-envoi{display:inline-flex;flex:none;align-items:center;gap:calc(16 * var(--k));min-height:44px;height:calc(58 * var(--k));padding:0 calc(26 * var(--k));
  border:0;border-radius:calc(12 * var(--k));background:var(--blue);color:#fff;font:700 max(13px, calc(15 * var(--k))) var(--f-texte);
  cursor:pointer;transition:background-color .2s ease}
.s07-envoi:hover{background:var(--blue-hover)}
.s07-envoi b{display:inline-flex;font-size:calc(22 * var(--k))}
.s07-oblig{margin:0;color:var(--muted);font-size:max(13px, calc(14 * var(--k)))}   /* what the asterisks mean (code review 2026-09-26) */
.s07-retour{grid-column:1 / -1;margin:0;font-size:max(14px, calc(15 * var(--k)));line-height:1.45}
.s07-retour:empty{display:none}
@media (min-width:1100px){
  /* the scene follows its content, as on the phone: title and card in the first row, the white sheet under the taller of
     the two. With fixed heights the card ran onto the sheet at 1100–1280 (the fields' 44px floors), and the line
     written under the button after a submit pushed it 74px further. Gaps = the fixed layout's at 1440. */
  #contact .scena{height:auto;display:grid;grid-template-columns:calc(74 * var(--k)) minmax(0, 1fr) calc(660 * var(--k)) calc(74 * var(--k));align-items:start}
  .contact .s07-head{grid-area:1/2/2/3;position:relative;left:auto;top:auto;margin-top:calc(64 * var(--k))}
  .s07-form{grid-area:1/3/2/4;margin-top:calc(56 * var(--k))}
  .contact .s07-sheet{grid-area:2/1/4/-1;align-self:stretch;position:relative;top:auto;bottom:auto;left:auto;right:auto;
    margin:calc(60 * var(--k)) calc(-1 * var(--m)) -2px}   /* -2px: the section may end on a fraction of a pixel (see the phone) */
  .contact .s07-sheet-inner{grid-area:2/2/3/4;position:relative;left:auto;right:auto;top:auto;margin-top:calc(166 * var(--k))}   /* 60 + 106 into the sheet */
  .contact .s07-foot{grid-area:3/2/4/4;position:relative;left:auto;right:auto;bottom:auto;margin:calc(69 * var(--k)) 0 calc(52 * var(--k))}
  .s07-watermark{display:none}
}
@media (max-width:1099px){
  /* phone / tablet: the card follows the title in the blue, one field per row; the sheet and the boxes move a row down */
  .s07-form{grid-area:2/2/3/3;margin-top:calc(28 * var(--k));padding:calc(22 * var(--k)) calc(20 * var(--k));gap:calc(14 * var(--k)) calc(12 * var(--k))}
  .s07-champ--nom,.s07-champ--mail{grid-column:1 / -1}   /* name and e-mail full width; phone and postcode share a row */
  .contact .s07-sheet{grid-area:3/1/5/-1}
  .contact .s07-sheet-inner{grid-area:3/2/4/3}
  .contact .s07-foot{grid-area:4/2/5/3}
}

/* ─── S08 footer ─── */
.pied .footer-logo{display:block;overflow:visible}
.pied .s08-col h3 a{display:inline;margin:0;font:inherit;color:inherit}   /* the only link to S02 without JavaScript on the phone (code review 2026-09-26) */
.pied .s08-col h3 a:hover{color:var(--blue)}
.pied .footer-logo svg{position:absolute;left:calc(8.8 * var(--k));top:calc(-3.7 * var(--k));width:calc(186.3 * var(--k));height:calc(107.9 * var(--k));fill:#225BAA}
.pied .s08-bottom{left:calc(-1 * var(--m));right:calc(-1 * var(--m));padding-left:calc(74 * var(--k) + var(--m));padding-right:calc(74 * var(--k) + var(--m))}
@media (max-width:1099px){
  .pied .footer-logo svg{left:calc(8.5 * var(--k));top:calc(-3.1 * var(--k));width:calc(165.9 * var(--k));height:calc(96.1 * var(--k))}
  .pied .s08-bottom{padding-left:calc(20 * var(--k) + var(--m));padding-right:calc(20 * var(--k) + var(--m))}
}

/* S08 — /revizie-sectiuni (2026-09-26) */
@media (max-width:1099px){
  /* the footer follows its content: every link of the lists is now a 44px row (they were 16–26px), so the columns grow;
     the mockup's rows stay as minimum heights, the rule and the navy band follow in the flow (10 and 15 as in the mockup). */
  #pied .scena{height:auto}
  .s08-upper{height:auto;padding-bottom:calc(10 * var(--k));
    grid-template-rows:minmax(calc(230 * var(--k)), auto) minmax(calc(230 * var(--k)), auto) minmax(calc(235 * var(--k)), auto)}
  .pied .s08-col h3{display:flex;align-items:center;min-height:44px;margin:calc(3 * var(--k)) 0 0}
  .pied .s08-col h3 a{display:flex;align-items:center;min-height:44px}
  .pied .s08-col a,.pied .s08-col > span{display:flex;align-items:center;min-height:44px;margin:0;line-height:1.3;font-size:max(13px, calc(12 * var(--k)))}
  .s08-rule{position:relative;top:auto;left:auto;right:auto;margin:0 calc(20 * var(--k))}
  /* the band: its two lines stacked on the left; at 320 the first line may take two rows */
  .pied .s08-bottom{position:relative;bottom:auto;left:auto;right:auto;height:auto;min-height:calc(99 * var(--k));margin:calc(15 * var(--k)) calc(-1 * var(--m)) 0;
    display:grid;grid-template-columns:minmax(0, 1fr);row-gap:calc(4 * var(--k));align-content:center;font-size:max(12px, calc(10 * var(--k)))}
  .pied .s08-bottom span{margin:0;text-wrap:balance}   /* 320: « réservés » was left alone on the second row */
}
@media (min-width:1100px){
  .s08-col a,.s08-col span{font-size:max(13px, calc(15 * var(--k)))}
  .pied .s08-bottom{font-size:max(12px, calc(12 * var(--k)))}
}

/* S08 without its Contact column and without the band's « Rêves et confort. » (Iulian, 2026-09-26: the three contacts
   stood twice, one above the other — S07's boxes keep them; the signature sat under the WhatsApp button).
   PC: brand left, the two lists at the right edge; the SIRET stays centred in the band. Phone: the lists side by side,
   « Explorer » is now the last column — the mockup's full-width last row (border on top) no longer applies. */
@media (min-width:1100px){
  .s08-upper{grid-template-columns:1fr calc(300 * var(--k)) calc(240 * var(--k))}
  .pied .s08-bottom{display:grid;grid-template-columns:1fr auto 1fr}
}
@media (max-width:1099px){
  .s08-upper > .s08-col:last-child{grid-column:auto;border-top:0;padding-top:0}
}

/* S08 — shorter footer (2026-09-26, Iulian chose variant C of 3: 504 → 322 at 1440, 961 → 732 at 390).
   PC: the mockup's fixed 560 box left ~100px empty under the lists; the footer now follows its content.
   Phone: the plain words of « Nos métiers » (not links) drop to 32px rows; links stay 44px (tap zone). */
.pied .footer-logo svg{overflow:visible}   /* the drawing touches its viewBox bottom: small sizes clip « RÊVES ET CONFORT » */
@media (min-width:1100px){
  #pied .scena{height:auto}
  .s08-upper{height:auto;padding:calc(40 * var(--k)) calc(73 * var(--k)) calc(32 * var(--k))}
  .s08-brand p{font-size:calc(24 * var(--k));margin:calc(10 * var(--k)) 0 0}
  .s08-col h3{margin:calc(4 * var(--k)) 0 calc(16 * var(--k))}
  .s08-col a,.s08-col span{margin-bottom:calc(5 * var(--k))}
  .pied .footer-logo{width:calc(165 * var(--k));height:calc(90 * var(--k))}
  .pied .footer-logo svg{left:calc(7 * var(--k));top:calc(-3 * var(--k));width:calc(149 * var(--k));height:calc(86.3 * var(--k))}
  .s08-rule{position:relative;top:auto;left:auto;right:auto;margin:0 calc(73 * var(--k))}
  .pied .s08-bottom{position:relative;bottom:auto;left:auto;right:auto;height:calc(52 * var(--k));min-height:44px;margin:calc(10 * var(--k)) calc(-1 * var(--m)) 0}
}
@media (max-width:1099px){
  .s08-upper{grid-template-rows:auto auto;padding-top:calc(24 * var(--k));padding-bottom:calc(16 * var(--k));row-gap:calc(10 * var(--k))}
  .s08-brand p{font-size:calc(21 * var(--k));margin-bottom:calc(4 * var(--k))}
  .pied .s08-col > span{min-height:32px}
  .pied .footer-logo{width:calc(150 * var(--k));height:calc(87 * var(--k))}
  .pied .footer-logo svg{left:calc(7 * var(--k));top:calc(-2.6 * var(--k));width:calc(139.8 * var(--k));height:calc(81 * var(--k))}
  .pied .s08-bottom{min-height:calc(60 * var(--k));margin-top:calc(10 * var(--k))}
}

/* ─── Images v2 (2026-09-26): the set generated from 08_PROMPTURI_IMAGINI_2026-09-26.md (qa/integreaza.py).
   Most files are cut to the ratio of their box, so they need no framing; these are the ones that serve several box
   shapes with one file and say where their subject is. ─── */
.accueil picture{display:contents}                              /* hero: phone / tablet / PC files, laid out as the <img> */
.metiers .stage picture{display:contents}                       /* band: phone / tablet / PC files, laid out as the <img> */
.metiers .stage-photo{object-position:50% 50%}                  /* PC file cut to the box (2.38): the glove above the « Rêves et confort. » box */
@media (max-width:1099px){.metiers .stage-photo{object-position:50% 0%}}   /* phone and tablet: the trowel just under the white fade at the top */
.metiers .card:nth-child(1) img{object-position:60% 50%}        /* plâtrier and the logo on his back */
.metiers .card:nth-child(2) img{object-position:45% 50%}        /* the two gloves in the wool */
.metiers .card:nth-child(3) img{object-position:52% 50%}        /* the corridor and the artisan */
.metiers .card:nth-child(4) img{object-position:60% 20%}        /* the board he lifts against the ceiling grid */
.metiers .card:nth-child(5) img{object-position:55% 40%}        /* the roller on the wall */
.metiers .card:nth-child(6) img{object-position:45% 45%}        /* the carpenter, his logo and the hinge */
.gitem.p img,.gitem.i img,.gitem.c img,.s05-photo.two img,.s06-wood img{object-position:50% 50%}

/* ─── parallax (idei-alese #13): inside its house-shaped frame the photo moves ~6% slower than the page.
   PC only, never with reduced motion (the comparison runs with reduced motion: the mockups are still).
   The picture is 12% taller than its frame, so the movement (capped at 6% of the frame) never shows an edge. ─── */
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .js .parallaxe img{position:absolute;left:0;top:-6%;height:112%;will-change:transform}
}

/* ─── logo: the client's own blue, from its PDF (CMYK 91/70/0/0) — never recoloured ─── */
.entete__logo svg{fill:#225BAA}

/* ─── focus on dark fields ─── */
.demande :focus-visible,.contact .s07-head :focus-visible,.metiers .bottom :focus-visible,.pied .s08-bottom :focus-visible{outline-color:#fff}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important}
  .parallaxe img{transform:none !important}
  .wa-float:hover{transform:none}
}
@media print{
  .wa-float,.entete__actions,.burger{display:none}
  .entete{position:static}
  .accueil .entete-loc{display:none}
}

/* ═══ Motion — GSAP + Lenis (Iulian, 2026-09-27: probe A of 2, 09_PROBE_ANIMATII_2026-09-27/; « totul ca pe PC » on the
   phone too). Everything sits behind .a-anim, which script.js puts on <html> only without reduced motion and takes
   back if animatii.js has not started within 3 s: the reduced-motion visitor, the no-JS visitor and a failed load all
   get the page as it was. Past the house limit of 0.8 s on purpose (up to ~2 s) — the premium probe Iulian chose. ═══ */

/* Loading screen with the logo (/lead-animatii rule 8 — Iulian, 2026-09-27: at every load, 2–3 s, no skipping). The
   markup sits right after <body> (the paths of #logo-conf-m, copied). Shown only under .a-anim. The drawing is CSS from
   the first paint (it does not wait for the libraries, whose loading it covers) and the logo is whole at ~1.9 s;
   animatii.js reads that moment from these animations, wipes the screen away with the trowel's arc (the hero's own
   gesture) and removes it (~2.9 s). Hard cap: a-ecran-plasa hides it 3.5 s after it appeared whatever happens, and
   script.js gives the scroll back at the same time. The logo in negative on its own blue (theme-color); the line
   width is in viewBox units: 1.5 px × 1239.75 / 340 px (PC) and / 240 px (phone) — never non-scaling-stroke, which
   with pathLength draws only part of the line. */
:root{--a-ecran-fond:#2c52a0;--a-ecran-cerneala:#fff;--a-ecran-l:340px;--a-ecran-sw:5.5}
@media (max-width:599px){:root{--a-ecran-l:240px;--a-ecran-sw:7.75}}
.a-ecran{display:none}
.a-anim .a-ecran{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:center;justify-content:center;
  background:var(--a-ecran-fond);animation:a-ecran-plasa 1ms linear 3.5s forwards}
.a-ecran-gata .a-ecran{pointer-events:none}
/* a set width, not 100 %: an inline SVG centred in a flex/grid box otherwise falls back to its intrinsic size */
.a-ecran__logo{display:block;width:var(--a-ecran-l);height:auto;overflow:visible;
  animation:a-ecran-apropie 1.9s cubic-bezier(.2,.7,.2,1) both}
/* every outline is traced (pathLength="1" on each path), then the shape fills and the line dissolves */
.a-ecran__logo path{fill:var(--a-ecran-cerneala);fill-opacity:0;stroke:var(--a-ecran-cerneala);stroke-opacity:1;
  stroke-width:var(--a-ecran-sw);stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;
  animation:a-ecran-traseaza .95s cubic-bezier(.65,0,.35,1) .1s forwards,a-ecran-umple .5s ease 1.05s forwards}
.a-ecran__semn path:nth-child(4n+2){animation-delay:.16s,1.09s}
.a-ecran__semn path:nth-child(4n+3){animation-delay:.22s,1.13s}
.a-ecran__semn path:nth-child(4n){animation-delay:.28s,1.17s}
.a-ecran__nume path{animation-delay:.3s,1.25s}
.a-ecran__nume path:nth-child(4n+2){animation-delay:.36s,1.29s}
.a-ecran__nume path:nth-child(4n+3){animation-delay:.42s,1.33s}
.a-ecran__nume path:nth-child(4n){animation-delay:.48s,1.37s}
/* « RÊVES ET CONFORT » is too fine to trace: it rises once the name is drawn */
.a-ecran__rest{animation:a-ecran-urca .6s cubic-bezier(.2,.7,.2,1) 1.25s both}
.a-ecran__rest path{fill-opacity:1;stroke:none;animation:none}
@keyframes a-ecran-traseaza{to{stroke-dashoffset:0}}
@keyframes a-ecran-umple{to{fill-opacity:1;stroke-opacity:0}}
@keyframes a-ecran-urca{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes a-ecran-apropie{from{scale:.94}to{scale:1}}
@keyframes a-ecran-plasa{to{visibility:hidden;opacity:0}}

/* Lenis (smooth wheel; touch scrolling stays native): its own required rules, and the page's CSS smooth scrolling
   must step aside for it */
html.lenis,html.lenis body{height:auto}
html.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}

/* the hero waits hidden for its entrance (released by .a-pret, the moment animatii.js has set its first frame) */
.a-anim:not(.a-pret) .accueil :is(h1,.sub,.actions,.brand-signature,.photo,.photo-shadow,.photo-note,.wave-fond,.service-band > div),
.a-anim:not(.a-pret) .entete{visibility:hidden}

/* the hero's photo and its shade in one block, which carries the trowel pass's mask at the entrance (wrapper added by
   animatii.js, covering the photo's own containing block — the stage on PC, the media box on the phone — so the photo
   keeps its place, its roof clip and its phone melt mask) */
.a-anim .a-erou-poza{position:absolute;inset:0;pointer-events:none}

/* curtains injected in front of shaped photos */
.a-anim .a-rideau{position:absolute;z-index:6;display:block;pointer-events:none}

/* parallax photos, every width: 20 % taller than their frame (script.js's own parallax steps aside under .a-anim).
   Each frame keeps its size without the photo: absolute with a set height (S03), or the title's grid row (S06 phone) */
.a-anim .parallaxe img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover}

/* GSAP writes transform on every frame: the page's CSS transition on it would drag behind */
.a-anim .gitem img{transition:scale .6s cubic-bezier(.2,.7,.2,1)}

/* SplitText's line masks: a clip-path reaching a little past the line (accents, descenders) replaces its inline
   overflow:clip — no padding, which would grow the title (adjacent block margins collapse) */
.a-anim .a-ligne-mask{overflow:visible !important;clip-path:inset(-.25em -.1em -.28em -.1em)}

/* the answer to the mouse (the buttons are magnetic in animatii.js) */
@media (hover:hover){
  .a-anim .metiers .card{transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .a-anim .metiers .card:hover{translate:0 -8px;box-shadow:0 calc(24 * var(--k)) calc(50 * var(--k)) rgba(19,34,59,.24)}
  .a-anim :is(.realisations .gitem,.savoir-faire .s05-photo):hover img{scale:1.05}
  .a-anim .savoir-faire .s05-photo img{transition:scale .6s cubic-bezier(.2,.7,.2,1)}
}

/* printing mid-page: every element shows in its place, whatever the scroll had reached */
@media print{
  .a-ecran,.a-anim .a-rideau{display:none !important}
  .a-anim [style*="opacity"]{opacity:1 !important}
  .a-anim [style*="visibility"]{visibility:visible !important}
  .a-anim main [style*="transform"],.a-anim .entete[style*="transform"]{transform:none !important}
  .a-anim main [style*="clip-path"]{clip-path:none !important}
}

/* ═══ Rounded corners — generated by qa/rotunjiri.py (R = 22px at the mockup widths). ═══ */
:root{--r-coin:22;--r-bouton:12}
.metiers .card,.accueil .photo-note,.metiers .stage-note,.demande .s03-inset,.realisations .gitem,.s05-photo{border-radius:calc(22 * var(--k))}
.accueil .main-cta,.entete__devis,.metiers .bottom-contact .cta,.menu__devis,.entete__tel{border-radius:calc(12 * var(--k))}
.entete__tel{border-radius:max(6px, calc(12 * var(--k)))}
@supports (clip-path:shape(from 0 0, line to 1px 1px)){
  @media (min-width:1100px){
    .accueil .photo,.accueil .photo-shadow{clip-path:shape(from calc(99.332 * var(--k)) calc(105.671 * var(--k)), line to calc(424.015 * var(--k)) calc(5.934 * var(--k)), curve to calc(429.269 * var(--k) + 3.578%) 0 with calc(445.2 * var(--k)) 0, line to 100% 0, line to 100% 100%, line to 2.075% 100%, curve to 0 calc(7.73 * var(--k) + 95.801%) with 0 100%, line to 0 calc(176.35 * var(--k) + 4.199%), curve to calc(17.268 * var(--k)) calc(170.449 * var(--k)) with 0 calc(184.08 * var(--k)), line to calc(99.332 * var(--k)) calc(105.671 * var(--k)), curve to calc(137.785 * var(--k)) calc(86.106 * var(--k)) with calc(116.6 * var(--k)) calc(92.04 * var(--k)), close)}
    .metiers .stage-photo{clip-path:shape(from 100% 0, line to 100% 100%, line to 1.947% 100%, curve to 0 calc(5.16 * var(--k) + 94.282%) with 0 100%, line to 0 calc(85.09 * var(--k) + 5.718%), curve to calc(18.745 * var(--k)) calc(78.734 * var(--k)) with 0 calc(90.25 * var(--k)), line to calc(128.155 * var(--k)) calc(11.516 * var(--k)), curve to calc(143.613 * var(--k) + 2.238%) 0 with calc(146.9 * var(--k)) 0, line to 100% 0, close)}
    .metiers .card:nth-child(1) .media{clip-path:shape(from 0 21.427%, line to 39.897% 2.043%, curve to 58.193% 1.442% with 49% 0, line to 90.807% 6.558%, curve to 100% 18.427% with 100% 8%, line to 100% 100%, line to 0 100%, line to 0 21.427%, curve to 9.103% 8.957% with 0 11%, close)}
    .metiers .card:nth-child(3) .media{clip-path:shape(from 0 19.427%, line to 38.413% 1.644%, curve to 55.628% 1.302% with 47% 0, line to 91.372% 6.698%, curve to 100% 18.427% with 100% 8%, line to 100% 100%, line to 0 100%, line to 0 19.427%, curve to 8.587% 7.356% with 0 9%, close)}
    .demande .s03-main{clip-path:shape(from 100% 0, line to 100% 100%, line to 2.876% 100%, curve to 0 calc(5.16 * var(--k) + 96.463%) with 0 100%, line to 0 calc(140.76 * var(--k) + 3.537%), curve to calc(16.622 * var(--k)) calc(131.508 * var(--k)) with 0 calc(145.92 * var(--k)), line to calc(151.678 * var(--k)) calc(14.412 * var(--k)), curve to calc(162.095 * var(--k) + 3.687%) 0 with calc(168.3 * var(--k)) 0, line to 100% 0, close)}
    .demande .s03-bottom{clip-path:shape(from 0 72%, line to 36.626% 90.313%, curve to 39.371% 89.5% with 38% 91%, line to 68.629% 57.5%, curve to 71.374% 56.733% with 70% 56%, line to 100% 72%, line to 100% 100%, line to 0 100%, line to 0 72%, close)}
    .apropos .s06-wood{clip-path:shape(from 65% 0, line to 96.057% 0, curve to 100% 3.566% with 100% 0, line to 100% 96.434%, curve to 96.057% 100% with 100% 100%, line to 3.943% 100%, curve to 0 96.434% with 0 100%, line to 0 20.566%, curve to 3.308% 15.061% with 0 17%, line to 25.692% 1.939%, curve to 32.943% 0 with 29% 0, line to 65% 0, close)}
    .apropos .s06-plaster{clip-path:shape(from 65% 0, line to 96.687% 0, curve to 100% 6.452% with 100% 0, line to 100% 93.548%, curve to 96.687% 100% with 100% 100%, line to 3.313% 100%, curve to 0 93.548% with 0 100%, line to 0 22.452%, curve to 3.188% 14.241% with 0 16%, line to 25.812% 1.759%, curve to 32.313% 0 with 29% 0, line to 65% 0, close)}
    .contact .s07-sheet{clip-path:shape(from 0 10%, line to 31.632% 0.415%, curve to 34.367% 0.442% with 33% 0, line to 65.633% 10.558%, curve to 68.367% 10.544% with 67% 11%, line to 100% 0, line to 100% 100%, line to 0 100%, line to 0 10%, close)}
  }
  @media (max-width:1099px){
    .accueil .photo{clip-path:shape(from 0 10%, line to 45.445% 1.089%, curve to 56.581% 0.911% with 51% 0, line to 100% 8%, line to 100% 100%, line to 0 100%, line to 0 10%, close)}
    .metiers .stage-photo{clip-path:shape(from 0 12%, line to 43.419% 1.367%, curve to 54.616% 0.881% with 49% 0, line to 100% 8%, line to 100% 100%, line to 0 100%, line to 0 12%, close)}
    .metiers .card:nth-child(1) .media{clip-path:shape(from 0 23.36%, line to 36.26% 2.86%, curve to 61.918% 2.026% with 49% 0, line to 87.082% 5.974%, curve to 100% 20.36% with 100% 8%, line to 100% 100%, line to 0 100%, line to 0 23.36%, curve to 12.74% 8.14% with 0 11%, close)}
    .metiers .card:nth-child(3) .media{clip-path:shape(from 0 19.092%, line to 40.759% 1.195%, curve to 53.258% 0.945% with 47% 0, line to 93.742% 7.055%, curve to 100% 18.092% with 100% 8%, line to 100% 100%, line to 0 100%, line to 0 19.092%, curve to 6.241% 7.805% with 0 9%, close)}
    .demande .s03-main{clip-path:shape(from 0 12%, line to 45.559% 1.28%, curve to 56.488% 1.12% with 51% 0, line to 100% 10%, line to 100% 100%, line to 0 100%, line to 0 12%, close)}
    .demande .s03-bottom{clip-path:shape(from 0 70%, line to 34.363% 81.168%, curve to 45.583% 76.46% with 40% 83%, line to 69.417% 48.54%, curve to 80.614% 46.491% with 75% 42%, line to 100% 62%, line to 100% 100%, line to 0 100%, line to 0 70%, close)}
    .apropos .s06-wood{clip-path:shape(from 0 11%, line to 47.469% 1.148%, curve to 58.525% 1.176% with 53% 0, line to 100% 10%, line to 100% 100%, line to 0 100%, line to 0 11%, close)}
    .apropos .s06-plaster{clip-path:shape(from 0 22.784%, line to 32.337% 3.377%, curve to 58.333% 0 with 45% 0, line to 86.667% 0, curve to 100% 10.784% with 100% 0, line to 100% 89.216%, curve to 86.667% 100% with 100% 100%, line to 13.333% 100%, curve to 0 89.216% with 0 100%, line to 0 22.784%, curve to 12.663% 8.623% with 0 12%, close)}
    .contact .s07-sheet{clip-path:shape(from 0 3%, line to 45.388% 0.33%, curve to 56.585% 0.456% with 51% 0, line to 100% 4%, line to 100% 100%, line to 0 100%, line to 0 3%, close)}
  }
}