@charset "UTF-8";
/* ==========================================================================
   AP Global Services - ap-experts.construction

   Le langage visuel du site precedent est conserve tel quel :
     - en-tete blanc, logo au centre, navigation de part et d'autre, appel a
       l'action orange en pilule ;
     - bandeau video pleine largeur avec voile leger et grand titre en Borna ;
     - bandes photo traversees par le nom du service en tres grandes lettres ;
     - titres de section en Nunito Sans, gris ardoise, souligne d'un filet fin ;
     - losanges evides orange et gris en decoration flottante ;
     - boutons rectangulaires a filet fin dans le corps de page ;
     - coches orange en puces de liste ;
     - pied de page clair, logo orange, colonnes separees par des filets ;
     - beaucoup de blanc, aucune zone sombre.

   Ameliorations apportees, sans changer le langage : les titres de service
   etaient en vert vif, rouge et violet sans rapport avec la charte, les
   espacements variaient d'un bloc a l'autre, plusieurs textes passaient sous
   le seuil de contraste, et les blocs apparaissaient sans transition. Tout est
   ramene aux deux couleurs de marque, avec un rythme regulier et des
   apparitions au defilement.
   ========================================================================== */

/* --- Polices --------------------------------------------------------------
   Nunito Sans est une fonte variable : un seul fichier couvre les graisses
   200 a 1000, ce qui evite six telechargements. Borna sert aux titres, comme
   sur le site precedent. */

@font-face {
  font-family: 'Nunito Sans';
  src: url('/assets/fonts/nunito-sans-var-29e389.woff2') format('woff2-variations');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Borna';
  src: url('/assets/fonts/borna-8bcee3.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons --------------------------------------------------------------- */

:root {
  --orange:      #EF8C0A;
  --orange-fonce:#C86F00;
  --orange-clair:#FDF3E4;
  --nuit:        #2C2C54;   /* liens de navigation, comme sur l'ancien site */
  --encre:       #323232;   /* couleur de texte d'origine */
  --encre-doux:  #55565A;
  --gris:        #F4F4F4;
  --gris-bord:   #E4E4E4;
  --blanc:       #FFFFFF;

  --police: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titre:  'Borna', 'Nunito Sans', system-ui, sans-serif;

  --large:   1320px;
  --etroit:  820px;
  --gouttiere: clamp(20px, 4vw, 40px);

  --sortie: cubic-bezier(.22,.61,.36,1);
  --doux:   cubic-bezier(.4,0,.2,1);

  --entete: 90px;   /* hauteur d'en-tete du site precedent */
}

/* --- Bases ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--entete) + 20px);
}

body {
  margin: 0;
  font-family: var(--police);
  font-weight: 300;              /* graisse de texte d'origine */
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--blanc);
  /* Jamais overflow-x:hidden ici : cela casse les animations pilotees par le
     defilement et fige les elements reveles. */
  overflow-x: clip;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 500;
  line-height: 1.3;
  color: var(--encre);
  text-wrap: balance;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--orange); color: #fff; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--encre); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

/* --- Gabarits ------------------------------------------------------------- */

.wrap      { max-width: var(--etroit); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap-wide { max-width: var(--large);  margin-inline: auto; padding-inline: var(--gouttiere); }

/* L'ancien site respirait beaucoup : les sections gardent ce rythme. */
.section        { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section--tight { padding: clamp(32px, 4vw, 52px) 0; }
.section--alt   { background: var(--gris); }
.section--plain { padding-top: calc(var(--entete) + clamp(48px, 8vw, 96px)); }

.center { text-align: center; }
.head   { max-width: 780px; margin-inline: auto; margin-bottom: clamp(44px, 6vw, 68px); }
.head p { color: var(--encre-doux); }

.lead {
  font-size: clamp(16.5px, 1.25vw, 18.5px);
  line-height: 1.7;
  color: var(--encre-doux);
  font-weight: 300;
}

.note {
  font-size: 14.5px; color: var(--encre-doux); margin-top: 22px;
  padding-left: 16px; border-left: 2px solid var(--orange);
}

/* Sur-titre discret, en petites capitales orange. */
.eyebrow {
  display: block;
  font-size: 12.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 12px;
}

/* Repere technique en chasse fixe, tres discret. */
.cote {
  display: block; margin: -4px 0 16px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre-doux); opacity: .6;
}

/* --- Titres de section --------------------------------------------------
   Signature du site : un grand titre en graisse moyenne, suivi d'un filet
   horizontal fin qui court sur toute la largeur du bloc. */

.section h2 {
  font-size: clamp(28px, 3.4vw, 51px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.head h2, .prose > h2 { position: relative; padding-bottom: 22px; }
.head h2::after, .prose > h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--encre); opacity: .55;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--sortie) .15s;
}
html:not(.js) .head h2::after, html:not(.js) .prose > h2::after,
[data-reveal].vu h2::after, .vu .head h2::after,
.secours .head h2::after, .secours .prose > h2::after { transform: scaleX(1); }

/* --- Boutons -------------------------------------------------------------
   Deux formes coexistaient sur l'ancien site : la pilule orange de l'en-tete
   et les boutons rectangulaires du corps de page. Les deux sont conservees. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 30px;
  background: var(--orange); color: #fff;
  border: 1px solid var(--orange);
  font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--sortie);
}
.btn:hover { background: var(--orange-fonce); border-color: var(--orange-fonce); transform: translateY(-2px); }
.btn:active { transform: none; }

/* Pilule : uniquement les appels a l'action de l'en-tete et du pied de page. */
.btn--pill { border-radius: 99px; padding: 13px 28px; font-size: 12.5px; letter-spacing: .06em; font-weight: 600; }

/* Appel a l'action de l'en-tete.
   Le libelle etait en bleu nuit sur l'orange : le selecteur de navigation
   l'emportait sur celui du bouton. Retabli en blanc, avec un liseré qui
   s'ouvre au survol et une fleche qui avance, plutot qu'un simple aplat. */
.hdr__cta {
  color: #fff; text-transform: uppercase; white-space: nowrap;
  padding: 12px 24px; font-size: 11.5px; letter-spacing: .09em;
  box-shadow: 0 8px 18px -10px rgba(200,111,0,.85);
}
.hdr__cta::after { content: none; }
.hdr__cta .btn__arrow { width: 14px; height: 14px; }
.hdr__cta:hover { color: #fff; box-shadow: 0 12px 24px -10px rgba(200,111,0,.95); }
@media (max-width: 1180px) { .hdr__cta { padding: 11px 18px; letter-spacing: .05em; } }

/* Bouton secondaire : filet fin, fond transparent. */
.btn--ligne { background: transparent; color: var(--encre); border-color: var(--gris-bord); }
.btn--ligne:hover { background: var(--encre); border-color: var(--encre); color: #fff; }

/* Sur photo : filet blanc. */
.btn--clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--clair:hover { background: rgba(255,255,255,.18); border-color: #fff; }

.btn--block { width: 100%; }
.btn__arrow { transition: transform .3s var(--sortie); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Barre de progression de lecture -------------------------------------- */

.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 0; background: var(--orange); transition: width .1s linear; }

/* --- Barre superieure ------------------------------------------------------
   Discrete, sur fond clair : elle porte le telephone et les liens secondaires. */

.topbar {
  background: var(--gris); color: var(--encre-doux);
  font-size: 13px; border-bottom: 1px solid var(--gris-bord);
}
.topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 36px; }
.topbar a { color: inherit; text-decoration: none; transition: color .2s; }
.topbar a:hover { color: var(--orange); }
.topbar__tel { font-weight: 600; color: var(--encre); }
.topbar nav { display: flex; gap: 22px; }
@media (max-width: 900px) { .topbar nav { display: none; } .topbar__in { justify-content: center; } }

/* --- En-tete : logo au centre, navigation de part et d'autre --------------- */

.hdr { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow .3s var(--doux); }
.hdr.est-colle { box-shadow: 0 1px 18px -8px rgba(50,50,50,.28); }

.hdr__in {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; min-height: var(--entete);
}
.hdr__logo { justify-self: center; grid-column: 2; line-height: 0; }
.hdr__logo img { width: clamp(132px, 12vw, 170px); height: auto; }

.hdr__nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); flex-wrap: wrap; }
.hdr__nav--gauche { grid-column: 1; justify-content: flex-start; }
.hdr__nav--droite { grid-column: 3; justify-content: flex-end; }

.hdr__nav a:not(.btn), .hdr__has-sub > a {
  position: relative; text-decoration: none; color: var(--nuit);
  font-size: 15px; font-weight: 500; padding: 6px 0; white-space: nowrap;
  transition: color .22s;
}
.hdr__nav a:not(.btn)::after, .hdr__has-sub > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--orange); transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--sortie);
}
.hdr__nav a:not(.btn):hover, .hdr__has-sub:hover > a,
.hdr__nav a:not(.btn)[aria-current] { color: var(--orange); }
.hdr__nav a:not(.btn):hover::after, .hdr__has-sub:hover > a::after,
.hdr__nav a:not(.btn)[aria-current]::after { transform: scaleX(1); transform-origin: left; }

/* Chevron des entrees a sous-menu. */
.hdr__has-sub { position: static; padding-right: 14px; }
.hdr__has-sub > a::before {
  content: ''; position: absolute; right: -13px; top: 50%; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--sortie);
}
.hdr__has-sub:hover > a::before { transform: translateY(-30%) rotate(225deg); }

.submenu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--gris-bord);
  box-shadow: 0 22px 34px -26px rgba(50,50,50,.4);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .26s var(--doux), transform .26s var(--doux), visibility .26s;
}
.hdr__has-sub:hover .submenu, .hdr__has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2px 26px; padding-block: 28px 32px;
}
/* Une colonne par metier, la page pilier en tete et ses prestations dessous :
   les dix sous-pages n'apparaissaient nulle part dans la navigation. */
.submenu__col { display: flex; flex-direction: column; }
.submenu a {
  text-decoration: none; color: var(--nuit); font-size: 14.5px; font-weight: 300;
  padding: 8px 0; transition: color .2s, padding-left .24s var(--sortie);
}
.submenu a:hover { color: var(--orange); padding-left: 8px; }
.submenu__pilier {
  font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); padding-bottom: 12px; margin-bottom: 8px;
  border-bottom: 1px solid var(--gris-bord);
}
.submenu__pilier:hover { padding-left: 0; }
/* Un sous-menu qui ne porte qu'une liste plate reste etroit et cale a gauche. */
.submenu--court .submenu__in { grid-template-columns: repeat(auto-fit, minmax(190px, 210px)); justify-content: end; }

.hdr__cta { justify-self: end; }
.hdr__burger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 11px; flex-direction: column; justify-content: space-between;
  grid-column: 3; justify-self: end;
}
.hdr__burger span {
  display: block; height: 1.5px; background: var(--encre);
  transition: transform .34s var(--sortie), opacity .2s;
}
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__in { grid-template-columns: 44px 1fr 44px; }
  .hdr__logo { grid-column: 2; }
  .hdr__burger { display: flex; grid-column: 3; }
  .hdr__cta { display: none; }
}

/* --- Tiroir mobile -------------------------------------------------------- */

.drawer__scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(50,50,50,.45);
  opacity: 0; transition: opacity .3s var(--doux);
}
.drawer__scrim.ouvert { opacity: 1; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(390px, 88vw); background: #fff;
  padding: 24px 26px calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .42s var(--sortie);
}
.drawer.ouvert { transform: none; }
.drawer a {
  text-decoration: none; color: var(--nuit); font-size: 16px; font-weight: 300;
  padding: 12px 2px; border-bottom: 1px solid var(--gris);
}
.drawer .btn { margin-top: 14px; border-bottom: 0; color: #fff; }
.drawer .btn--ligne { color: var(--encre); }
.drawer__label {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; margin: 22px 0 4px;
}
.drawer__label:first-of-type { margin-top: 6px; }
.drawer__close {
  align-self: flex-end; background: none; border: 0; font-size: 30px; line-height: 1;
  color: var(--encre); cursor: pointer; padding: 4px 8px; margin: -4px -6px 6px 0;
}

/* --- Bandeau : video pleine largeur --------------------------------------
   Le bandeau video est la signature du site. L'image d'attente s'affiche
   immediatement ; la video la recouvre en fondu une fois chargee, et
   uniquement sur grand ecran, hors economie de donnees. */

.hero {
  position: relative;
  min-height: clamp(520px, 82vh, 780px);
  display: flex; align-items: center;
  padding: calc(var(--entete) + 40px) 0 clamp(56px, 8vw, 100px);
  overflow: hidden; color: #fff; isolation: isolate;
}
.hero__media { position: absolute; inset: -20% 0 -8%; z-index: -2; will-change: transform; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
}
.hero__media video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s var(--doux);
}
.hero__media video.prete { opacity: 1; }
/* Voile leger, comme sur l'ancien site, renforce vers le bas pour que le
   texte reste lisible quelle que soit l'image. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(0,0,0,.26) 0%, rgba(0,0,0,.34) 55%, rgba(0,0,0,.48) 100%);
}
.hero__in { position: relative; width: 100%; max-width: 1000px; }
.hero .eyebrow { color: #fff; opacity: .92; font-weight: 500; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero h1 {
  font-family: var(--titre); font-weight: 300; color: #fff;
  font-size: clamp(38px, 6.4vw, 84px); line-height: 1.02; letter-spacing: .01em;
  margin-bottom: .34em; text-shadow: 0 2px 34px rgba(0,0,0,.34);
}
.hero__sub {
  font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65;
  color: rgba(255,255,255,.94); max-width: 660px; margin-bottom: 32px;
  text-shadow: 0 1px 18px rgba(0,0,0,.42);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Page de service : sur-titre « Service » puis grand titre en capitales. */
.hero--service h1 { text-transform: uppercase; letter-spacing: .045em; }

/* Losanges evides qui derivent lentement : motif d'origine, remis au propre. */
.hero__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__deco i {
  position: absolute; display: block;
  border: 1.5px solid rgba(255,255,255,.32);
  transform: rotate(45deg);
  animation: derive 24s var(--doux) infinite alternate;
}
.hero__deco i:nth-child(1) { width: 88px;  height: 88px;  top: 20%; right: 11%; animation-duration: 19s; }
.hero__deco i:nth-child(2) { width: 46px;  height: 46px;  top: 64%; right: 24%; border-color: rgba(239,140,10,.75); animation-duration: 26s; }
.hero__deco i:nth-child(3) { width: 132px; height: 132px; top: 38%; right: 3%;  animation-duration: 32s; }
@keyframes derive {
  from { transform: rotate(45deg) translate3d(0,0,0); }
  to   { transform: rotate(45deg) translate3d(20px,-28px,0); }
}
@media (max-width: 900px) { .hero__deco { display: none; } }

/* Invite a faire defiler, discrete, en bas du bandeau. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  width: 1px; height: 46px; background: rgba(255,255,255,.5); overflow: hidden;
}
.hero__scroll::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  animation: descend 2.4s var(--doux) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 900px) { .hero__scroll { display: none; } }

.h1--ink {
  font-family: var(--titre); font-weight: 300; color: var(--encre);
  font-size: clamp(34px, 5vw, 62px); line-height: 1.06;
}

/* --- Losanges decoratifs dans le corps de page ---------------------------- */

.losanges { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.losanges i {
  position: absolute; display: block; transform: rotate(45deg);
  border: 1.5px solid var(--gris-bord);
  animation: derive 28s var(--doux) infinite alternate;
}
.losanges i:nth-child(1) { width: 60px; height: 60px; top: 9%;  left: 3%; }
.losanges i:nth-child(2) { width: 96px; height: 96px; top: 62%; right: 5%; border-color: rgba(239,140,10,.5); animation-duration: 22s; }
.losanges i:nth-child(3) { width: 34px; height: 34px; top: 33%; right: 15%; animation-duration: 30s; }
.section > .wrap, .section > .wrap-wide { position: relative; z-index: 1; }
@media (max-width: 900px) { .losanges { display: none; } }

/* --- Bandes photo a titre geant ------------------------------------------
   L'element le plus reconnaissable du site : une photo pleine largeur
   traversee par le nom du service en tres grandes lettres claires. */

.bande {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: clamp(300px, 46vw, 620px);
  overflow: hidden; text-decoration: none; color: #fff; isolation: isolate;
}
/* Aucune respiration entre les bandes : elles forment un bloc continu. */
.bande + .bande { margin-top: 0; }
.bande img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; transition: transform 1.2s var(--sortie);
}
.bande::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(0,0,0,.14); transition: background-color .5s;
}
.bande:hover img { transform: scale(1.045); }
.bande:hover::before { background: rgba(0,0,0,.3); }
.bande__titre {
  font-family: var(--police); font-weight: 500;
  font-size: clamp(52px, 13vw, 210px); line-height: 1; letter-spacing: -.02em;
  color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,.3);
  margin: 0; text-align: center; padding-inline: var(--gouttiere);
}
.bande__lien {
  position: absolute; left: 50%; bottom: clamp(16px, 2.6vw, 30px);
  transform: translateX(-50%);
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #fff; opacity: 0;
  transition: opacity .4s var(--sortie), transform .4s var(--sortie);
}
.bande:hover .bande__lien { opacity: .95; transform: translateX(-50%) translateY(-4px); }
@media (hover: none) { .bande__lien { opacity: .88; } }

/* --- Texte redactionnel ---------------------------------------------------- */

.prose h2 { margin-bottom: .8em; }
.prose h3 { font-size: clamp(19px, 1.6vw, 23px); margin: 2.2em 0 .6em; font-weight: 500; }
.prose > p, .prose li { color: var(--encre-doux); }
.prose strong { color: var(--encre); font-weight: 600; }
.prose a { color: var(--orange-fonce); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--orange); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1.2em; }
.prose li { margin-bottom: .55em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; }
/* Coche orange : la puce du site precedent. */
.prose ul li::before {
  content: ''; position: absolute; left: 2px; top: .38em;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--orange); border-bottom: 1.8px solid var(--orange);
  transform: rotate(-45deg);
}
.prose figure { margin: 2em 0; }
.prose figcaption { font-size: 13.5px; color: var(--encre-doux); margin-top: 10px; }
.prose .rappel {
  background: var(--gris); border-left: 3px solid var(--orange);
  padding: 20px 24px; margin: 1.8em 0; font-size: 15.5px;
}
.prose .rappel strong { color: var(--encre); }

/* --- Grilles --------------------------------------------------------------- */

.grid { display: grid; gap: clamp(22px, 2.6vw, 34px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--media { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 72px); }
@media (max-width: 900px) { .grid--media { grid-template-columns: 1fr; } }

/* --- Cartes ----------------------------------------------------------------
   Sobres, sans ombre ni bordure complete : un simple filet superieur, dans
   l'esprit aere de l'ancien site. */

.card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 0 0; border-top: 1px solid var(--gris-bord);
  text-decoration: none; color: inherit; transition: border-color .3s;
}
.card:hover { border-color: var(--orange); }
.card h3 { font-size: clamp(20px, 1.8vw, 25px); font-weight: 500; margin: 0; transition: color .25s; }
.card:hover h3 { color: var(--orange); }
.card p { font-size: 15px; color: var(--encre-doux); margin: 0; flex: 1; line-height: 1.65; }
.card__num {
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .14em;
  color: var(--orange); font-weight: 600;
}
.card__link {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre); margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
}
.card__link span { transition: transform .3s var(--sortie); }
.card:hover .card__link { color: var(--orange); }
.card:hover .card__link span { transform: translateX(5px); }

.card--art { padding: 0; border-top: 0; }
.card--art img { aspect-ratio: 16/9; object-fit: cover; width: 100%; transition: transform .9s var(--sortie); }
.card--art > :first-child { overflow: hidden; }
.card--art:hover img { transform: scale(1.05); }
.card__body {
  padding: 22px 0 0; display: flex; flex-direction: column; gap: 10px; flex: 1;
  border-top: 1px solid var(--gris-bord); margin-top: 20px; transition: border-color .3s;
}
.card--art:hover .card__body { border-color: var(--orange); }
.card__body h2, .card__body h3 { font-size: 19px; line-height: 1.35; }
.card__meta { font-size: 13px; color: var(--encre-doux); margin-top: auto; padding-top: 8px; }

/* --- Chiffres -------------------------------------------------------------- */

.stats { text-align: left; }
.stat { padding: 26px 0 0; border-top: 1px solid var(--gris-bord); }
.stat__n {
  display: block; font-family: var(--titre); font-weight: 300;
  font-size: clamp(42px, 4.6vw, 62px); line-height: 1; color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.stat__l {
  display: block; margin: 14px 0 8px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange);
}
.stat__p { display: block; font-size: 14.5px; line-height: 1.6; color: var(--encre-doux); }

/* --- Bandeau defilant ------------------------------------------------------ */

.marquee {
  margin-top: clamp(48px, 6vw, 76px); overflow: hidden;
  border-top: 1px solid var(--gris-bord); border-bottom: 1px solid var(--gris-bord);
  padding: 20px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__piste { display: flex; gap: 44px; width: max-content; animation: defile 46s linear infinite; }
.marquee__piste span {
  font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-doux); white-space: nowrap;
  display: flex; align-items: center; gap: 44px;
}
.marquee__piste span::after {
  content: ''; width: 5px; height: 5px; background: var(--orange); transform: rotate(45deg); flex: none;
}
.marquee:hover .marquee__piste { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }

/* --- Engagements ----------------------------------------------------------- */

.perk { border-top: 1px solid var(--gris-bord); padding-top: 26px; }
.perk h3 { font-size: 18px; font-weight: 600; margin-bottom: .6em; }
.perk p  { font-size: 14.8px; color: var(--encre-doux); margin: 0; line-height: 1.68; }

/* --- Tableaux --------------------------------------------------------------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
caption { caption-side: top; text-align: left; padding: 0 0 16px; font-size: 13.5px; color: var(--encre-doux); }
th, td { padding: 15px 20px 15px 0; text-align: left; border-bottom: 1px solid var(--gris-bord); vertical-align: top; }
thead th {
  font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--encre); border-bottom: 1px solid var(--encre);
}
tbody th { font-weight: 600; color: var(--encre); }
tbody tr { transition: background-color .2s; }
tbody tr:hover { background: var(--orange-clair); }
table a { color: var(--orange-fonce); text-decoration: none; font-weight: 600; }
table a:hover { text-decoration: underline; }

/* --- Listes a coche --------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 22px 0 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; color: var(--encre-doux); }
.ticks li::before {
  content: ''; position: absolute; left: 3px; top: .38em;
  width: 12px; height: 7px;
  border-left: 1.8px solid var(--orange); border-bottom: 1.8px solid var(--orange);
  transform: rotate(-45deg);
}
.ticks a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--gris-bord); }
.ticks a:hover { color: var(--orange); border-color: var(--orange); }

/* --- Puces cliquables -------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-block; padding: 10px 20px; border: 1px solid var(--gris-bord);
  font-size: 14px; text-decoration: none; color: var(--encre);
  transition: background-color .24s, color .24s, border-color .24s;
}
.chip:hover { background: var(--encre); color: #fff; border-color: var(--encre); }

/* --- Etapes ------------------------------------------------------------------ */

.steps { list-style: none; padding: 0; margin: 0; display: grid; }
.step {
  display: grid; grid-template-columns: 84px 1fr; gap: clamp(16px, 2.6vw, 34px);
  align-items: start; padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--gris-bord);
}
.step:last-child { border-bottom: 1px solid var(--gris-bord); }
.step__n {
  font-family: var(--titre); font-weight: 300; font-size: clamp(34px, 3.6vw, 50px);
  line-height: .9; color: var(--gris-bord); transition: color .4s var(--doux);
}
.step:hover .step__n { color: var(--orange); }
.step h3 { font-size: clamp(19px, 1.7vw, 23px); margin-bottom: .4em; font-weight: 500; }
.step p  { color: var(--encre-doux); margin: 0; }
@media (max-width: 620px) { .step { grid-template-columns: 56px 1fr; } }

/* --- Media illustre ----------------------------------------------------------- */

.media { margin: 0; position: relative; }
.media img { width: 100%; }
.media figcaption { font-size: 13.5px; color: var(--encre-doux); margin-top: 12px; }
/* Angle orange en surimpression, rappel du motif geometrique. */
.media::after {
  content: ''; position: absolute; left: -16px; bottom: 40px; width: 58px; height: 58px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  pointer-events: none;
}

/* --- Galeries ------------------------------------------------------------------ */

/* Le pavage repose sur un motif de cinq vignettes : une grande de deux
   colonnes sur deux rangs, calee a gauche, et quatre normales qui remplissent
   la moitie droite. Cinq vignettes occupent donc exactement deux rangs, et
   toute galerie dont le nombre de photos est un multiple de cinq se termine
   sur un rectangle plein. C'est ce qui manquait : la grande vignette finale
   descendait d'un rang de plus que ses voisines et laissait un trou a gauche.
   Sur deux colonnes, la grande occupe la largeur sur un seul rang, et le motif
   tient toujours. */
.gallery {
  display: grid; grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;
  gap: 12px;
}
.gallery figure:nth-child(5n+1) { grid-column: span 2; }
.gallery figure { margin: 0; position: relative; overflow: hidden; background: var(--gris); }
.gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .9s var(--sortie); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position: absolute; inset: auto 0 0; padding: 34px 18px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.82), transparent);
  color: #fff; font-size: 13.5px; line-height: 1.4;
  transform: translateY(8px); opacity: 0;
  transition: transform .4s var(--sortie), opacity .4s;
}
.gallery figure:hover figcaption { transform: none; opacity: 1; }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .gallery figure:nth-child(5n+1) { grid-column: 1 / span 2; grid-row: span 2; }
}

.vid { margin: 0; }
.vid video { width: 100%; background: #000; }
.vid figcaption { font-size: 13.5px; color: var(--encre-doux); margin-top: 10px; }

/* --- Synthese citable ---------------------------------------------------------- */

.tldr {
  border-top: 1px solid var(--encre); border-bottom: 1px solid var(--gris-bord);
  padding: 26px 0 28px; position: relative;
}
.tldr__label {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.tldr__resume { font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.68; color: var(--encre); }
.tldr__points { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tldr__points li { position: relative; padding-left: 26px; font-size: 15px; color: var(--encre-doux); }
.tldr__points li::before {
  content: ''; position: absolute; left: 3px; top: .42em;
  width: 11px; height: 6px;
  border-left: 1.8px solid var(--orange); border-bottom: 1.8px solid var(--orange);
  transform: rotate(-45deg);
}
.tldr__meta { margin: 18px 0 0; font-size: 13.5px; color: var(--encre-doux); }

.synthese { border-left: 3px solid var(--orange); padding: 4px 0 4px 26px; }
.synthese h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: .6em; padding-bottom: 0; }
.synthese h2::after { display: none; }
.synthese p { color: var(--encre-doux); font-size: clamp(16px, 1.15vw, 17.5px); line-height: 1.75; }

/* --- Questions frequentes -------------------------------------------------------- */

.faq { border-top: 1px solid var(--gris-bord); }
.faq__item { border-bottom: 1px solid var(--gris-bord); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 24px 2px; font-size: clamp(16px, 1.25vw, 17.5px); font-weight: 500; color: var(--encre);
  transition: color .22s;
}
.faq__q:hover { color: var(--orange); }
.faq__chev { flex: none; width: 12px; height: 12px; position: relative; transition: transform .38s var(--sortie); }
.faq__chev::before, .faq__chev::after { content: ''; position: absolute; background: var(--orange); transition: opacity .3s; }
.faq__chev::before { left: 0; right: 0; top: 5px; height: 1.5px; }
.faq__chev::after  { top: 0; bottom: 0; left: 5px; width: 1.5px; }
.faq__q[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__chev::after { opacity: 0; }
/* La reponse reste dans le document et lisible sans JavaScript. */
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--sortie); }
.faq__a > div { overflow: hidden; }
.faq__a > div > p { padding: 0 2px 26px; color: var(--encre-doux); margin: 0; max-width: 68ch; }
.faq__item.ouvert .faq__a { grid-template-rows: 1fr; }
html:not(.js) .faq__a { grid-template-rows: 1fr; }

.faqgroup { margin-bottom: clamp(44px, 5vw, 68px); }
.faqgroup > h2 { font-size: clamp(22px, 2.2vw, 30px); padding-bottom: 18px; position: relative; }
.faqgroup > h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--encre); opacity: .55;
}

/* --- Signature d'article --------------------------------------------------------- */

.byline { border-top: 1px solid var(--gris-bord); padding-top: 26px; }
.byline p { font-size: 15px; color: var(--encre-doux); }
.byline__date, .byline__note { font-size: 13.5px; }
.byline__note { opacity: .85; margin-bottom: 0; }

/* --- Fil d'Ariane ----------------------------------------------------------------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 20px 0; font-size: 13px; color: var(--encre-doux); }
.crumbs a { text-decoration: none; color: var(--encre-doux); transition: color .2s; }
.crumbs a:hover { color: var(--orange); }
.crumbs ol { display: contents; margin: 0; padding: 0; }
.crumbs li { list-style: none; display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: '/'; color: var(--gris-bord); }
.crumbs [aria-current] { color: var(--encre); }

/* --- Formulaires ------------------------------------------------------------------ */

.form { display: grid; gap: 22px; }
.form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 22px; }
.form legend {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); padding: 0; margin-bottom: 2px;
}
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--large { grid-column: 1 / -1; }
.champ > label, .champ-legende { font-size: 14px; font-weight: 600; color: var(--encre); }
.champ-legende { display: block; padding: 0; }
.champ .aide, .aide { font-size: 13px; color: var(--encre-doux); font-weight: 300; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 16px; color: var(--encre);
  padding: 13px 14px; border: 1px solid var(--gris-bord); border-radius: 0;
  background: #fff; width: 100%;
  transition: border-color .22s, box-shadow .22s;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: 0; border-color: var(--orange); box-shadow: 0 0 0 2px rgba(239,140,10,.18);
}
.erreur { color: #A93226; font-size: 13.5px; }
.obligatoire { color: var(--orange); }

.groupe { border: 0; padding: 0; margin: 0; }
.options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.option {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border: 1px solid var(--gris-bord);
  background: #fff; cursor: pointer; font-size: 14.5px;
  transition: border-color .2s, background-color .2s, color .2s;
}
.option:hover { border-color: var(--orange); }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option .marque {
  width: 15px; height: 15px; border: 1.5px solid var(--gris-bord);
  flex: none; position: relative; transition: border-color .2s, background-color .2s;
}
.option input[type="radio"] ~ .marque { border-radius: 50%; }
.option .marque::after {
  content: ''; position: absolute; inset: 3px; border-radius: inherit;
  background: #fff; transform: scale(0); transition: transform .24s var(--sortie);
}
.option:has(input:checked) { border-color: var(--orange); background: var(--orange-clair); color: var(--orange-fonce); font-weight: 600; }
.option:has(input:checked) .marque { border-color: var(--orange); background: var(--orange); }
.option:has(input:checked) .marque::after { transform: scale(1); }
.option:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

.conditionnel { display: none; }
.conditionnel.visible { display: grid; gap: 20px; animation: apparait .42s var(--sortie); }
@keyframes apparait { from { opacity: 0; transform: translateY(-8px); } }

.consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--encre-doux); line-height: 1.55; }
.consentement input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--orange); }

.depot { border: 1px dashed var(--gris-bord); padding: 22px; transition: border-color .24s, background-color .24s; }
.depot:hover, .depot.survol { border-color: var(--orange); background: var(--orange-clair); }

.formbox { background: #fff; border: 1px solid var(--gris-bord); padding: clamp(26px, 3.4vw, 46px); }
.pot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alerte { padding: 16px 20px; font-size: 15px; margin-bottom: 24px; border-left: 3px solid; }
.alerte--ko { background: #FDF1F0; border-color: #C0392B; color: #922B21; }
.alerte--ok { background: #EEF9F0; border-color: #27AE60; color: #1E7E45; }
.alerte ul { margin: 8px 0 0; padding-left: 20px; }

.grid--form { grid-template-columns: 320px 1fr; gap: clamp(30px, 4.5vw, 64px); align-items: start; }
@media (max-width: 1000px) { .grid--form { grid-template-columns: 1fr; } }
.grid--form aside { position: sticky; top: calc(var(--entete) + 24px); }
@media (max-width: 1000px) { .grid--form aside { position: static; } }
.grid--form aside h2 { font-size: clamp(22px, 2.2vw, 29px); padding-bottom: 18px; position: relative; }
.grid--form aside h2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--encre); opacity: .5;
}
.grid--form aside p { color: var(--encre-doux); font-size: 15.5px; }
.aside__tel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--gris-bord); font-size: 15px; color: var(--encre-doux); }
.aside__tel a { color: var(--orange-fonce); font-weight: 700; font-size: 20px; text-decoration: none; }

/* --- Coordonnees ------------------------------------------------------------- */

.nap { font-style: normal; }
.coord { display: grid; }
.coord__ligne { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--gris-bord); }
.coord__ligne:first-child { border-top: 1px solid var(--gris-bord); }
.coord__cle {
  flex: none; width: 116px; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--orange); padding-top: 3px;
}
.coord__val a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--gris-bord); }
.coord__val a:hover { color: var(--orange); border-color: var(--orange); }

/* --- Bande d'appel a l'action ---------------------------------------------------
   Reprise du bloc « DEMANDEZ VOTRE DEVIS GRATUIT » : trois colonnes sur fond
   blanc, encadrees de filets fins. */

.cta {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: clamp(28px, 5vw, 72px); align-items: center;
  padding: clamp(40px, 5vw, 62px) 0;
  border-top: 1px solid var(--gris-bord); border-bottom: 1px solid var(--gris-bord);
}
.cta h2 {
  font-size: clamp(21px, 2vw, 26px); font-weight: 700; margin: 0;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1.35; padding-bottom: 0;
}
.cta h2::after { display: none; }
.cta .ticks { margin: 0; }
.cta__actions { display: flex; flex-direction: column; gap: 12px; min-width: 230px; }
.cta__note { font-size: 13px; color: var(--encre-doux); text-align: center; }
.cta__note a { color: var(--orange-fonce); text-decoration: none; }
@media (max-width: 980px) { .cta { grid-template-columns: 1fr; } .cta__actions { min-width: 0; } }

/* --- Pied de page ---------------------------------------------------------------
   Fond clair, logo orange, colonnes separees par des filets : la structure du
   site precedent. */

.ftr { background: #fff; color: var(--encre-doux); padding: 0 0 28px; font-size: 15px; }
.ftr a { color: var(--encre-doux); text-decoration: none; transition: color .2s; }
.ftr a:hover { color: var(--orange); }
.ftr h2 { font-size: 17px; font-weight: 500; color: var(--encre); margin-bottom: 18px; padding-bottom: 0; }
.ftr h2::after { display: none; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }

.ftr__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(26px, 3.4vw, 52px);
  padding: clamp(44px, 5vw, 72px) 0 clamp(34px, 4vw, 52px);
}
.ftr__cols > div + div { border-left: 1px solid var(--gris-bord); padding-left: clamp(20px, 2.6vw, 42px); }
@media (max-width: 900px) {
  .ftr__cols { grid-template-columns: 1fr 1fr; }
  .ftr__cols > div + div { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) { .ftr__cols { grid-template-columns: 1fr; } }
.ftr__logo { width: 168px; margin-bottom: 22px; }
.ftr__cols strong { color: var(--encre); font-weight: 600; }

.ftr__legal {
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
  font-size: 13px; color: var(--encre-doux);
  padding-top: 24px; border-top: 1px solid var(--gris-bord);
}

/* --- Page de confirmation --------------------------------------------------------- */

.merci { text-align: center; }
.merci__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border: 1px solid var(--orange);
  color: var(--orange); font-size: 30px; margin-bottom: 28px;
  transform: rotate(45deg); animation: surgit .6s var(--sortie) both;
}
.merci__icone > span { transform: rotate(-45deg); }
@keyframes surgit { from { transform: rotate(45deg) scale(.5); opacity: 0; } }
.merci h2 { margin-top: 48px; }
.merci .steps { text-align: left; margin-top: 24px; }
.merci__urgence { margin-top: 36px; font-size: 15.5px; color: var(--encre-doux); }
.merci__urgence a { color: var(--orange-fonce); font-weight: 700; text-decoration: none; }
.merci__liens { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* --- Bouton d'appel flottant --------------------------------------------------------- */

/* Bouton d'appel flottant.
   Version precedente : une pilule portant le numero en toutes lettres, visible
   des le premier ecran et jusqu'au dernier. Elle recouvrait la fin de chaque
   ecran, jusqu'au champ d'adresse du simulateur. Il devient un disque a la
   seule icone, il n'apparait qu'une fois le bandeau passe, et il s'efface des
   qu'un formulaire ou l'appel a l'action final entre dans le champ : a cet
   endroit-la, le visiteur a deja mieux sous la main. */
.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: none; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange); color: #fff; text-decoration: none;
  font-size: 22px; line-height: 1;
  box-shadow: 0 10px 26px -10px rgba(200,111,0,.9);
  opacity: 0; transform: scale(.7) translateY(10px); pointer-events: none;
  transition: opacity .3s var(--doux), transform .3s var(--sortie);
}
.fab__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fab.visible { opacity: 1; transform: none; pointer-events: auto; }
.fab:active { transform: scale(.94); }
@media (max-width: 780px) { .fab { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .fab { transition: opacity .2s; transform: none; } }

/* --- Simulateur de toiture ------------------------------------------------------------ */

.simulateur-cadre { position: relative; }
.sim--attente::after {
  content: 'Chargement du simulateur…';
  position: absolute; inset: auto 0 auto 0; top: 50%; transform: translateY(-50%);
  text-align: center; font-size: 14px; color: var(--encre-doux);
  background: rgba(255,255,255,.9); padding: 14px; pointer-events: none;
}

/* ==========================================================================
   Animations d'apparition
   Rien n'est masque tant que la classe .js n'est pas posee sur <html> : sans
   JavaScript, ou si le script echoue, tout le contenu reste visible. Un filet
   de securite remet tout en place au bout de trois secondes.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0; transform: translateY(20px);
    transition: opacity .85s var(--sortie), transform .85s var(--sortie);
  }
  html.js [data-reveal].vu { opacity: 1; transform: none; }

  html.js [data-stagger] > * {
    opacity: 0; transform: translateY(24px);
    transition: opacity .8s var(--sortie), transform .8s var(--sortie);
    transition-delay: calc(var(--n, 0) * 90ms);
  }
  html.js [data-stagger].vu > * { opacity: 1; transform: none; }

  /* Titre revele mot a mot : le texte reste du texte brut pour les moteurs. */
  html.js [data-reveal] .w {
    display: inline-block;
    opacity: 0; transform: translateY(.42em);
    transition: opacity .75s var(--sortie), transform .75s var(--sortie);
    transition-delay: calc(var(--i) * 60ms);
  }
  html.js [data-reveal].vu .w { opacity: 1; transform: none; }

  /* Les bandes photo montent legerement en entrant a l'ecran. */
  html.js .bande { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--sortie), transform .9s var(--sortie); }
  html.js .bande.vu { opacity: 1; transform: none; }
}

html.secours [data-reveal],
html.secours [data-stagger] > *,
html.secours [data-reveal] .w,
html.secours .bande { opacity: 1 !important; transform: none !important; }

/* --- Transitions entre pages -------------------------------------------------------- */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: sortie .24s var(--doux) both; }
  ::view-transition-new(root) { animation: entree .32s var(--sortie) both; }
}
@keyframes sortie { to   { opacity: 0; } }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .head h2::after, .prose > h2::after { transform: scaleX(1) !important; }
}

/* --- Impression --------------------------------------------------------------------- */

@media print {
  .topbar, .hdr, .drawer, .drawer__scrim, .fab, .progress, .cta, .hero__deco, .losanges, .bande { display: none !important; }
  .hero { min-height: auto; color: var(--encre); padding: 0 0 20px; }
  .hero::before, .hero__media { display: none; }
  .hero h1, .hero__sub { color: var(--encre); text-shadow: none; }
  body { font-size: 11pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  .faq__a { grid-template-rows: 1fr !important; }
  .head h2::after, .prose > h2::after { transform: scaleX(1) !important; }
}

/* --- Illustrations dans le corps de page -----------------------------------
   Le site precedent alternait des blocs de texte et des visuels animes. Le
   principe est repris : un bloc sur deux porte une photo, cote a cote avec le
   propos, et le sens s'inverse d'un bloc a l'autre. */

.grid--media--inverse > :first-child { order: 2; }
.grid--media--inverse .media::after { left: auto; right: -16px; border-left: 0; border-right: 2px solid var(--orange); }
@media (max-width: 900px) { .grid--media--inverse > :first-child { order: 0; } }

/* --- Confort tactile ---------------------------------------------------------
   Au doigt, un lien de 20 px de haut se rate une fois sur trois. Les liens de
   contact, les seuls qu'on cherche vraiment sur telephone, recoivent une zone
   de touche d'au moins 44 px sans changer d'apparence. */

@media (max-width: 900px) {
  .topbar__tel { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; }
  .topbar__in  { min-height: 44px; }
  .ftr .nap a, .ftr li > a, .ftr__legal a { display: inline-block; padding: 5px 0; }
}

/* Liens de contact isoles : ils portent une action, pas une lecture. Ils
   recoivent donc une zone de touche, contrairement aux liens pris dans une
   phrase, que la norme d'accessibilite dispense expressement. */
.cta__note a, .coord__val a, .coord__val + p a {
  display: inline-block; padding: 9px 0; min-height: 24px;
}
@media (max-width: 900px) {
  .ftr__legal a { padding: 7px 0; }
  .form__legal a { display: inline-block; padding: 4px 0; }
}

/* Bandeau defilant sur telephone : avec l'espacement du grand ecran, un
   ecran de 390 px n'en montrait qu'un mot et demi, tranche net au bord. On
   resserre le pas et on allonge le fondu, pour que la coupe se lise comme un
   defilement et non comme un texte tronque. */
@media (max-width: 700px) {
  .marquee { padding: 15px 0; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
  .marquee__piste { gap: 26px; }
  .marquee__piste span { font-size: 12px; letter-spacing: .1em; gap: 26px; }
}

/* Tiroir mobile : la hierarchie se lit au retrait et a la graisse, sans
   accordeon a deplier. Tout est atteignable en un seul geste de defilement.
   Les selecteurs portent « .drawer a » : sans cela, la regle generale des
   liens du tiroir, plus specifique, ecrasait retrait et graisse et les deux
   niveaux devenaient indiscernables. */
.drawer a.drawer__pilier {
  font-weight: 600; font-size: 16.5px; color: var(--encre);
  padding-top: 16px; border-bottom-color: var(--gris-bord);
}
.drawer a.drawer__enfant {
  padding-left: 20px; font-size: 14.5px; font-weight: 300;
  color: var(--encre-doux); position: relative;
}
.drawer a.drawer__enfant::before {
  content: ''; position: absolute; left: 2px; top: 50%; width: 10px; height: 1px;
  background: var(--orange); opacity: .55;
}
.drawer a.drawer__enfant:hover, .drawer a.drawer__enfant:focus-visible { color: var(--orange); }

/* Colonnes de metiers sans sous-page : on y indique ce que le metier couvre,
   en texte simple, pour que la colonne ne reste pas vide sous son titre. */
.submenu__note { font-size: 14.5px; font-weight: 300; color: var(--encre-doux); padding: 8px 0; }

/* --- Grille de cinq elements -------------------------------------------------
   Cinq cartes dans une grille de quatre colonnes laissaient la cinquieme seule
   sur sa ligne, avec trois colonnes vides a sa droite. Sur six colonnes, trois
   cartes de deux colonnes forment la premiere ligne et deux cartes de trois
   colonnes la seconde : les deux lignes sont pleines, et la difference de
   largeur se lit comme un parti pris. */
.grid--cinq { grid-template-columns: repeat(6, 1fr); }
.grid--cinq > * { grid-column: span 2; }
.grid--cinq > :nth-child(4), .grid--cinq > :nth-child(5) { grid-column: span 3; }

@media (max-width: 1080px) {
  .grid--cinq { grid-template-columns: repeat(2, 1fr); }
  .grid--cinq > *, .grid--cinq > :nth-child(4) { grid-column: span 1; }
  .grid--cinq > :nth-child(5) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .grid--cinq { grid-template-columns: 1fr; }
  .grid--cinq > *, .grid--cinq > :nth-child(4), .grid--cinq > :nth-child(5) { grid-column: span 1; }
}