/* ============================================================
   S.I.E TRAVAUX — feuille de style principale
   Palette relevée sur le logo : bleu royal #283A90 (accent),
   navy #1D1D5B (mot-logo), gris #6E7480 (contour de la goutte).
   Les fonds sombres reprennent un navy plus profond (#161B3C) pour
   que les boutons bleu royal s'en détachent.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --blue:#283A90;         /* bleu royal du logo — accent, boutons, liens */
  --blue-600:#1E2C72;     /* survol */
  --blue-050:#EDF0FA;     /* teinte claire */
  --blue-300:#5A78E0;     /* bleu éclairci — dégradé de la barre de lecture */
  --blue-200:#8FA6EE;     /* bleu clair — accents POSÉS SUR FOND SOMBRE */

  /* ── Accents sur fond sombre ──────────────────────────────────────────
     Le bleu royal de la charte (--blue) ne vaut que sur fond clair : sur le
     navy des sections sombres il tombe à 1,8:1, et tout ce qui l'utilise y
     disparaît — c'est ce qui rendait les icônes du bandeau de chiffres
     invisibles. --blue-200 est à 7,2:1 sur ce même fond.

     Sont concernés, et déjà traités : les accents du hero, les icônes du
     bandeau de chiffres, la flèche des cartes de réalisation, les pastilles
     de la section contact, l'astérisque des champs obligatoires, le survol
     des liens du pied de page et de la barre supérieure.

     **Toute nouvelle couleur d'accent posée sur --ink ou --ink-2 doit passer
     par --blue-200.** Sur fond blanc, c'est --blue qui reste la règle. */

  /* Couleurs d'état, volontairement hors charte : elles doivent se distinguer
     de l'accent, pas s'y fondre. Calibrées pour le fond navy du formulaire. */
  --error:#FF8895;
  --ok:#5FD08A;

  /* Navy des fonds sombres. Plus profond que le navy du mot-logo (#1D1D5B)
     pour que l'accent bleu royal reste lisible par-dessus. Les deux nuances
     dérivées servent aux fonds de cartes et aux bordures sur fond sombre. */
  --ink:#161B3C;          /* fond sombre principal */
  --ink-2:#1E2450;        /* fond sombre secondaire */
  --ink-3:#2C3468;        /* bordures sur sombre */
  --ink-rgb:22,27,60;     /* même couleur en composantes, pour les voiles */

  --grey:#6E7480;         /* gris du logo */
  --grey-700:#4A5060;
  --grey-800:#343A4A;
  --text:#1C2233;
  --muted:#5A6172;
  --line:#E3E6EE;
  --soft:#F3F5F9;
  --bg:#FFFFFF;

  --wrap:1240px;
  --r:4px;                /* rayon de base : quasi nul, registre industriel */
  --r-lg:24px;            /* rayon marqué : cartes services et réalisations */
  --shadow:0 1px 2px rgba(22,27,60,.06), 0 12px 32px -12px rgba(22,27,60,.18);
  --shadow-lg:0 2px 4px rgba(22,27,60,.07), 0 24px 60px -20px rgba(22,27,60,.30);

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;

  --f-head:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x sur <html> aussi : `overflow-x:hidden` posé uniquement sur
   <body> n'empêche pas la page de défiler latéralement. Sans ce garde-fou,
   un simple décalage décoratif (transform d'apparition, marge du parallaxe)
   suffit à créer une barre de défilement horizontale. */
html{
  scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);
  -webkit-text-size-adjust:100%;overflow-x:clip;
}
/* Classe posée par main.js quand le défilement inertiel prend la main :
   les deux amortissements se combineraient sinon, et le défilement
   deviendrait mou et imprécis. */
html.smooth-js{scroll-behavior:auto}
body{
  margin:0;font-family:var(--f-body);color:var(--text);background:var(--bg);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* repli pour les navigateurs sans overflow-x:clip */
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 40px, var(--wrap));margin-inline:auto}

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

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

/* ---------- 3. Éléments partagés ---------- */
.eyebrow{
  font-family:var(--f-head);font-weight:700;font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.eyebrow--light{color:#fff}

.sec-title{font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--text)}
.sec-title--light{color:#fff}

.arr{display:inline-block;transition:transform .3s var(--ease)}

.btn{
  --btn-bg:var(--blue);--btn-fg:#fff;--btn-bd:var(--blue);
  display:inline-flex;align-items:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  padding:13px 24px;border-radius:var(--r);cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:.875rem;letter-spacing:.04em;
  text-transform:uppercase;line-height:1;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(4px)}
.btn--primary:hover{--btn-bg:var(--blue-600);--btn-bd:var(--blue-600)}
.btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.btn--ghost:hover{--btn-bg:#fff;--btn-fg:var(--ink);--btn-bd:#fff}
.btn--outline{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:var(--ink-3)}
.btn--outline:hover{--btn-bg:var(--blue);--btn-bd:var(--blue)}
.btn--lg{padding:16px 30px;font-size:.9rem}
.btn--block{width:100%;justify-content:center}

/* Animation d'apparition — n'est armée que si JS est actif,
   sinon le contenu resterait invisible en cas d'échec du script.

   Le décalage en cascade vient de `--rd`, posé par main.js : chaque élément
   reçoit son rang dans sa grille. Plus besoin d'écrire `data-delay` à la
   main dans le HTML — l'attribut reste lu, il l'emporte quand il est là. */
.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--rd,0) * 85ms);
}

/* Variantes directionnelles : les deux moitiés d'une section se rejoignent.
   Elles sont déclarées AVANT la règle .is-in — à spécificité égale (0,2,0)
   c'est l'ordre qui tranche, et .is-in doit gagner sinon le bloc reste
   décalé et n'apparaît jamais. */
.js .reveal--left{transform:translateX(-34px)}
.js .reveal--right{transform:translateX(34px)}
@media(max-width:960px){
  /* En une colonne, un glissement latéral n'a plus de sens. */
  .js .reveal--left,.js .reveal--right{transform:translateY(26px)}
}

/* .js .reveal.is-in (0,3,0) : passe devant toutes les variantes ci-dessus,
   quel que soit l'ordre d'ajout de futures variantes. */
.reveal.is-in,
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- 3 bis. Dévoilements de section ----------
   Ces effets se déclenchent avec le bloc `.reveal` qui les contient : aucun
   attribut à ajouter dans le HTML, ils s'appliquent aux titres et aux images
   déjà en place. */

/* Titres : le texte monte derrière un masque plutôt que d'apparaître en fondu.
   L'inset final déborde de 12% en haut et en bas pour ne rogner ni les
   accents ni les jambages. */
.js .reveal .sec-title,
.js .reveal .pdetail__title{
  clip-path:inset(105% 0 -12% 0);
  transition:clip-path .85s var(--ease);
  transition-delay:calc(var(--rd,0) * 85ms + 120ms);
}
.js .reveal.is-in .sec-title,
.js .reveal.is-in .pdetail__title{clip-path:inset(-12% 0 -12% 0)}

/* Images : volet qui remonte, plutôt qu'un simple fondu.
   On anime `clip-path` sur le conteneur, jamais `transform` sur l'image :
   celle-ci garde ainsi son zoom au survol, qui utilise déjà transform. */
.js .card.reveal .card__media,
.js .proj.reveal picture,
.js .about__media.reveal picture{
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
  transition-delay:calc(var(--rd,0) * 85ms + 60ms);
}
.js .card.reveal.is-in .card__media,
.js .proj.reveal.is-in picture,
.js .about__media.reveal.is-in picture{clip-path:inset(0 0 0 0)}

/* Cartes de témoignage : le guillemet arrive après le texte. */
.js .qcard.reveal .qcard__mark{
  opacity:0;transform:translateY(10px) scale(.85);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--rd,0) * 85ms + 260ms);
}
.js .qcard.reveal.is-in .qcard__mark{opacity:.28;transform:none}

/* ---------- 3 bis. Barre de progression de lecture ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;z-index:120;
  height:3px;background:transparent;pointer-events:none;
}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-300));
  transition:width .1s linear;
}

/* ---------- 4. Topbar ---------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.62);font-size:.8rem;border-bottom:1px solid var(--ink-3)}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:20px;height:40px}
.topbar__right{display:flex;gap:26px;align-items:center;margin-left:auto}
.topbar__item{display:inline-flex;align-items:center;gap:7px;transition:color .2s}
a.topbar__item:hover{color:#fff}
.topbar__phone svg{width:14px;height:14px;fill:var(--blue-200)}
@media(max-width:860px){
  .topbar__item--hide-sm{display:none}
  .topbar__right{gap:16px}
}
@media(max-width:560px){
  .topbar__right .topbar__item:not(.topbar__phone){display:none}
}

/* ---------- 5. Header ---------- */
.header{
  position:sticky;top:0;z-index:100;
  background:var(--ink);border-bottom:1px solid var(--ink-3);
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
.header.is-stuck{box-shadow:0 10px 30px -12px rgba(22,27,60,.55)}
.header__inner{display:flex;align-items:center;gap:32px;height:var(--header-h)}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand__mark{width:auto;height:42px}
.brand__text{display:flex;flex-direction:column;font-family:var(--f-head);line-height:1;color:#fff}
.brand__l1{font-weight:800;font-size:1.02rem;letter-spacing:.01em;text-transform:uppercase}
.brand__l2{font-weight:600;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-top:4px;white-space:nowrap}

.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav > a:not(.btn){
  position:relative;font-size:.82rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(255,255,255,.78);transition:color .2s;
}
.nav > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-7px;height:2px;width:0;background:var(--blue);
  transition:width .3s var(--ease);
}
.nav > a:not(.btn):hover,
.nav > a.is-active{color:#fff}
.nav > a:not(.btn):hover::after,
.nav > a.is-active::after{width:100%}
.nav__cta{padding:11px 20px;font-size:.78rem}

.burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;flex-direction:column;justify-content:space-between;
}
.burger span{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

@media(max-width:1080px){
  .burger{display:flex}
  /* absolute plutôt que fixed : le panneau se cale sur le bas réel du header,
     que la topbar soit présente ou non. */
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--ink-3);
    padding:8px 20px 26px;margin:0;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    transition:max-height .4s var(--ease),opacity .25s,visibility .25s;
  }
  .nav.is-open{max-height:calc(100dvh - var(--header-h));opacity:1;visibility:visible;overflow-y:auto}
  .nav > a:not(.btn){padding:16px 4px;border-bottom:1px solid var(--ink-3);font-size:.9rem}
  .nav > a:not(.btn)::after{display:none}
  .nav__cta{margin-top:20px;justify-content:center}
}

/* ---------- 6. Hero — carrousel ---------- */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink)}

/* Les diapositives sont empilées dans la même cellule de grille : la hauteur
   du hero est celle de la plus haute, donc rien ne saute au changement. */
.hero__slides{display:grid}
.hero__slide{
  grid-area:1/1;position:relative;
  display:flex;align-items:center;min-height:min(88vh,760px);
  opacity:0;visibility:hidden;
  transition:opacity .55s var(--ease),visibility .55s;
}
.hero__slide.is-active{opacity:1;visibility:visible}

.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}

/* Voile navy : c'est LUI qui garantit le contraste du texte blanc du hero.
   Il est porté par chaque diapositive, entre l'image et le texte.
   Les valeurs sont calibrées sur la diapositive la plus claire (luminance
   moyenne ~202/255 sous la zone de texte) : titre ≈ 8:1, accroche ≈ 5,7:1.
   Éclaircir ce dégradé fait passer l'accroche sous le seuil AA de 4,5:1. */
.hero__slide::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(var(--ink-rgb),.96) 0%,
    rgba(var(--ink-rgb),.88) 42%,
    rgba(var(--ink-rgb),.42) 78%,
    rgba(var(--ink-rgb),.56) 100%);
}
/* En dessous de 900px le texte occupe presque toute la largeur : un dégradé
   latéral laisserait la fin des lignes sur la partie claire de l'image.
   On passe donc à un assombrissement vertical, uniforme d'un bord à l'autre. */
@media(max-width:900px){
  .hero__slide::after{
    background:linear-gradient(180deg,rgba(var(--ink-rgb),.78) 0%,rgba(var(--ink-rgb),.90) 100%);
  }
}

.hero__inner{position:relative;z-index:2;padding:clamp(64px,10vw,120px) 0 clamp(96px,12vw,150px)}
.hero__title{font-size:clamp(2.3rem,5.6vw,4.15rem);color:#fff;max-width:16ch}
.hero__title .accent{color:var(--blue-200);display:inline-block}
.hero__lead{color:rgba(255,255,255,.82);max-width:56ch;margin-top:24px;font-size:1.06rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* Le contenu de la diapositive active monte en cascade à chaque changement.
   L'animation est rejouée par le JS, qui retire puis remet la classe. */
.js .hero__slide .hero__inner > *{opacity:0;transform:translateY(22px)}
.js .hero__slide.is-active .hero__inner > *{
  animation:heroIn .6s var(--ease) forwards;
}
.js .hero__slide.is-active .hero__inner > *:nth-child(1){animation-delay:.08s}
.js .hero__slide.is-active .hero__inner > *:nth-child(2){animation-delay:.18s}
.js .hero__slide.is-active .hero__inner > *:nth-child(3){animation-delay:.28s}
.js .hero__slide.is-active .hero__inner > *:nth-child(4){animation-delay:.38s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* Puces de navigation */
.hero__dots{
  position:absolute;left:50%;translate:-50% 0;bottom:34px;z-index:3;
  display:flex;gap:10px;justify-content:flex-start;
}
.hero__dot{
  width:34px;height:4px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.28);position:relative;overflow:hidden;
  transition:background .3s var(--ease);
}
.hero__dot:hover{background:rgba(255,255,255,.5)}
.hero__dot.is-active{background:rgba(255,255,255,.28)}
/* La puce active se remplit en rouge pendant la durée de la diapositive :
   la barre sert d'indicateur du temps restant. */
.hero__dot.is-active::after{
  content:"";position:absolute;inset:0;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  animation:dotFill var(--hero-delay,4s) linear forwards;
}
@keyframes dotFill{to{transform:scaleX(1)}}
/* Carrousel en pause : la barre se fige au lieu de continuer à courir. */
.hero.is-paused .hero__dot.is-active::after{animation-play-state:paused}

.hero__scroll{position:absolute;left:50%;bottom:0;translate:-50% 0;width:1px;height:26px;background:rgba(255,255,255,.2);overflow:hidden;z-index:3}
.hero__scroll span{display:block;width:100%;height:12px;background:var(--blue);animation:scrollDot 2.2s var(--ease) infinite}
@keyframes scrollDot{0%{transform:translateY(-14px)}100%{transform:translateY(30px)}}

@media(max-width:600px){
  .hero__dots{bottom:26px;gap:7px}
  .hero__dot{width:24px}
  .hero__scroll{display:none}
}

/* ---------- 7. Bandeau statistiques ---------- */
.stats{background:var(--ink-2);color:#fff;border-block:1px solid var(--ink-3)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{display:flex;align-items:center;gap:16px;padding:34px 26px;border-left:1px solid var(--ink-3)}
.stat:first-child{border-left:0;padding-left:0}
.stat__ico{
  /* --blue-200 et non --blue : le bandeau est sur fond navy, où le bleu royal
     de la charte est invisible. Voir le bloc « Accents sur fond sombre ». */
  width:34px;height:34px;fill:var(--blue-200);flex-shrink:0;
  transition:transform .4s var(--ease);
}
.stat:hover .stat__ico{transform:scale(1.12)}
.stat__num{display:block;font-family:var(--f-head);font-size:1.95rem;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.stat span{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.52);margin-top:5px}
@media(max-width:880px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:26px 20px}
  .stat:nth-child(odd){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--ink-3)}
}
@media(max-width:460px){
  .stats__grid{grid-template-columns:1fr}
  .stat{border-left:0;padding-left:0}
  .stat:nth-child(n+2){border-top:1px solid var(--ink-3)}
}

/* ---------- 8. Sections génériques ---------- */
.section{padding:clamp(64px,8vw,110px) 0}
.section--tight{padding:clamp(52px,6vw,80px) 0}
.section--soft{background:var(--soft)}
.section--dark{background:var(--ink);color:#fff}

.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:52px}
.sec-head--center{grid-template-columns:1fr;text-align:center;justify-items:center;margin-bottom:38px}
.sec-intro{color:var(--muted);max-width:52ch}
.sec-intro--center{margin-top:18px;margin-inline:auto;text-align:center}

/* ---------- 9. Cartes services ---------- */
/* 6 services : deux rangées de trois, coins franchement arrondis. */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.card__media{aspect-ratio:16/10;overflow:hidden;background:var(--soft)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
.card__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1;gap:10px}
.card__ico{
  width:30px;height:30px;fill:var(--blue);
  transition:transform .4s var(--ease);
}
.card:hover .card__ico{transform:translateY(-3px) rotate(-6deg)}
.card__body h3{font-size:1.16rem;letter-spacing:-.01em}
.card__body p{font-size:.92rem;color:var(--muted);flex:1}
.card__link{
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-family:var(--f-head);font-size:.76rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);
}
.card:hover .card__link .arr{transform:translateX(4px)}

@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:820px){
  .sec-head{grid-template-columns:1fr;align-items:start;gap:18px}
}
@media(max-width:600px){.cards{grid-template-columns:1fr}}

/* ---------- 10. Projets ---------- */
/* En-tête aligné en haut à gauche, puis 6 cartes en deux rangées de trois. */
.projets__head{max-width:56ch;margin-bottom:46px}
.projets__head .sec-title{margin-bottom:16px}
.projets__lead{color:rgba(255,255,255,.6);font-size:.98rem}
/* Trois réalisations : trois colonnes sur une rangée. Les services, eux,
   restent en 2x2 — leurs cartes portent plus de texte. */
.projets__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.projets__foot{margin-top:46px;display:flex;justify-content:center}

.proj{
  position:relative;display:block;background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.proj:hover{border-color:var(--blue);transform:translateY(-6px)}
.proj picture{display:block;aspect-ratio:9/7;overflow:hidden}

/* Indice visuel « cliquable » révélé au survol / focus */
.proj__cue{
  position:absolute;top:14px;left:14px;z-index:1;
  background:var(--blue);color:#fff;padding:7px 13px;border-radius:var(--r);
  font-family:var(--f-head);font-weight:700;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.proj:hover .proj__cue,
.proj:focus-visible .proj__cue{opacity:1;transform:none}
.proj img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.proj:hover img{transform:scale(1.06)}
.proj__body{padding:20px 22px 24px}
/* Métier rattaché à la réalisation */
.proj__tag{
  display:inline-block;margin-bottom:10px;padding:5px 11px;border-radius:999px;
  background:rgba(40,58,144,.18);color:#A9BCF5;
  font-family:var(--f-head);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.proj__body h3{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:1.02rem;color:#fff}
.proj__body h3 .arr{color:var(--blue-200);font-size:1.1rem}
.proj:hover .arr{transform:translateX(4px)}
.proj__body p{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:8px}

@media(max-width:980px){.projets__grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:600px){.projets__grid{grid-template-columns:1fr}}

/* ---------- 10 bis. Fiches projets ---------- */
/* Sans JS : les fiches s'affichent en pleine page à la suite des cartes.
   Avec JS : elles sont masquées ici et injectées dans la pop-up. */
.proj-details{padding:clamp(56px,7vw,90px) 0;background:var(--soft);border-bottom:1px solid var(--line)}
.js .proj-details{display:none}
.pdetail + .pdetail{margin-top:72px;padding-top:72px;border-top:1px solid var(--line)}
.pdetail:target{scroll-margin-top:calc(var(--header-h) + 20px)}

.pdetail__head{max-width:64ch;margin-bottom:32px}
.pdetail__cat{font-family:var(--f-head);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.pdetail__title{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:16px}
.pdetail__lead{color:var(--muted);font-size:1.02rem}

.pdetail__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:38px}
.pdetail__gallery figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--line)}
.pdetail__gallery img{width:100%;aspect-ratio:10/7;object-fit:cover;transition:transform .5s var(--ease)}
.pdetail__gallery figure:hover img{transform:scale(1.05)}

.pdetail__cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:48px;align-items:start}
.pdetail__body h3{font-size:1.02rem;margin:28px 0 10px}
.pdetail__body h3:first-child{margin-top:0}
.pdetail__body p{color:var(--muted);font-size:.95rem}
.pdetail__body .ticks{margin:0}

.pdetail__facts{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;position:sticky;top:calc(var(--header-h) + 20px)}
.pdetail__facts h3{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.pdetail__facts dl{margin:0 0 22px}
.pdetail__facts dl > div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line)}
.pdetail__facts dl > div:first-child{border-top:0;padding-top:0}
.pdetail__facts dt{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-shrink:0}
.pdetail__facts dd{margin:0;font-weight:600;font-size:.9rem;text-align:right}

@media(max-width:900px){
  .pdetail__cols{grid-template-columns:1fr;gap:32px}
  .pdetail__facts{position:static}
}
@media(max-width:600px){
  .pdetail__gallery{grid-template-columns:1fr 1fr;gap:10px}
  .pdetail__gallery figure:first-child{grid-column:1 / -1}
}

/* ---------- 10 ter. Pop-up projet ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.arr--back{transition:transform .3s var(--ease)}
.btn:hover .arr--back{transform:translateX(-4px)}

/* grid-template-rows/columns en minmax(0,1fr) : sans cela la piste se
   dimensionne sur le contenu, et le max-height:100% du dialogue se résout
   contre une hauteur trop grande — la pop-up dépasse alors l'écran au lieu
   de faire défiler son contenu. */
.modal{
  position:fixed;inset:0;z-index:200;
  display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);
  place-items:center;padding:clamp(12px,3vw,40px);
}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(22,27,60,.80);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)}
.modal.is-open .modal__backdrop{opacity:1}

.modal__dialog{
  position:relative;width:min(100%,980px);max-height:100%;
  display:flex;flex-direction:column;
  background:var(--bg);border-radius:var(--r);box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(20px) scale(.985);
  transition:opacity .32s var(--ease),transform .32s var(--ease);
}
.modal.is-open .modal__dialog{opacity:1;transform:none}
.modal__dialog:focus{outline:none}

.modal__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0;
  background:var(--bg);border-radius:var(--r) var(--r) 0 0;
}
.modal__eyebrow{font-family:var(--f-head);font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.modal__close{
  display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
}
.modal__close:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.modal__close svg{width:17px;height:17px;fill:currentColor}

.modal__content{overflow-y:auto;overscroll-behavior:contain;padding:0;flex:1}

/* La pop-up ne montre que le visuel de la réalisation, plus une légende. */
.modal__figure{margin:0;display:flex;flex-direction:column}
.modal__figure picture{display:block;background:var(--soft)}
/* Le visuel est plafonné pour laisser voir qu'il y a du texte en dessous :
   sans cela l'image occupe toute la pop-up et rien n'invite à faire défiler. */
.modal__figure img{
  width:100%;display:block;background:var(--soft);
  max-height:min(46vh,420px);height:auto;object-fit:cover;
}
.modal__caption{
  display:flex;flex-direction:column;gap:5px;
  padding:20px clamp(18px,3vw,28px) 20px;
  border-bottom:1px solid var(--line);
}
.modal__cat{
  font-family:var(--f-head);font-weight:700;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blue);
}
.modal__name{font-family:var(--f-head);font-weight:800;font-size:1.25rem;letter-spacing:-.01em}
.modal__loc{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Fiche injectée sous l'image : elle perd sa mise en page pleine largeur. */
.modal__content .pdetail{margin:0;padding:clamp(20px,3vw,30px) clamp(18px,3vw,28px);border:0}
.modal__content .pdetail__head{margin-bottom:0;max-width:none}
.modal__content .pdetail__lead{font-size:.96rem}
.modal__content .pdetail__cols{gap:28px;margin-top:22px}
.modal__content .pdetail__facts{position:static;background:var(--soft)}
@media(max-width:820px){
  .modal__content .pdetail__cols{grid-template-columns:1fr}
}

.modal__nav{
  display:flex;gap:12px;justify-content:space-between;flex-shrink:0;
  padding:16px 20px;border-top:1px solid var(--line);background:var(--bg);
  border-radius:0 0 var(--r) var(--r);
}
.modal__nav .btn{--btn-fg:var(--text);--btn-bd:var(--line)}
.modal__nav .btn:hover{--btn-fg:#fff}
.modal__nav .btn[disabled]{opacity:.35;pointer-events:none}

@media(max-width:560px){
  .modal{padding:0}
  .modal__dialog{width:100%;height:100%;max-height:100%;border-radius:0}
  .modal__bar,.modal__nav{border-radius:0}
  .modal__nav .btn{flex:1;justify-content:center;padding:13px 12px;font-size:.72rem}
}

/* Blocage du défilement de la page pendant l'ouverture */
body.is-locked{overflow:hidden}

/* ---------- 11. Processus ---------- */
/* Cinq étapes alignées horizontalement, le numéro chevauchant le haut de
   la carte. Aucun trait ne relie les numéros : la séquence est portée par
   la numérotation et par l'ordre d'apparition. */
.timeline{
  position:relative;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;
  padding-top:32px;
}

/* Les numéros surgissent l'un après l'autre, dans l'ordre des étapes. */
.js .tstep__marker{transform:scale(.4);opacity:0;transition:transform .5s var(--ease),opacity .4s var(--ease),background .35s var(--ease)}
.timeline.is-drawn .tstep__marker{transform:scale(1);opacity:1}
.timeline.is-drawn .tstep:nth-child(1) .tstep__marker{transition-delay:.15s}
.timeline.is-drawn .tstep:nth-child(2) .tstep__marker{transition-delay:.4s}
.timeline.is-drawn .tstep:nth-child(3) .tstep__marker{transition-delay:.65s}
.timeline.is-drawn .tstep:nth-child(4) .tstep__marker{transition-delay:.9s}
.timeline.is-drawn .tstep:nth-child(5) .tstep__marker{transition-delay:1.15s}
/* Le survol ne doit pas être bloqué par le délai d'apparition. */
.timeline.is-drawn .tstep:hover .tstep__marker{transition-delay:0s}

.tstep{position:relative;display:flex;flex-direction:column;align-items:center}

.tstep__marker{
  position:relative;z-index:1;
  display:grid;place-items:center;width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:var(--blue);color:#fff;box-shadow:0 0 0 8px var(--soft);
  font-family:var(--f-head);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.tstep:hover .tstep__marker{transform:scale(1.08);background:var(--blue-600)}

.tstep__card{
  flex:1;width:100%;margin-top:-32px;padding:56px 22px 24px;text-align:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.tstep:hover .tstep__card{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}

.tstep__card h3{font-size:1.05rem;margin-bottom:9px}
/* Trois lignes au plancher pour la description, deux pour l'encart : les cinq
   cartes présentent ainsi le même bloc de texte, quel que soit le nombre de
   lignes réellement occupé. Réécrire une étape plus longue que trois lignes
   impose de monter cette valeur pour les cinq. */
.tstep__card > p:not(.tstep__out){min-height:4.8em}
.tstep__card > p{font-size:.88rem;color:var(--muted)}
.tstep__out{
  margin-top:auto;padding-top:14px;
  font-size:.82rem;color:var(--text);
}
/* Deux lignes au plancher : c'est ce qui maintient les cinq libellés
   « Ce que vous obtenez » sur la même ligne d'une carte à l'autre. Si vous
   allongez un texte au point qu'il passe à trois lignes, montez cette valeur
   pour les cinq — sinon l'alignement se défait. */
.tstep__out span{display:block;min-height:3.2em}
.tstep__out b{
  display:block;font-family:var(--f-head);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin-bottom:4px;
}
/* Le filet est décoratif : il ne doit pas s'étirer sur toute la carte. */
.tstep__out::before{
  content:"";display:block;width:36px;height:1px;background:var(--line);
  margin:0 auto 14px;
}

@media(max-width:1080px){
  .timeline{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
@media(max-width:720px){
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .timeline{grid-template-columns:1fr;gap:14px}
  .tstep__card{padding:52px 20px 22px}
}

/* ---------- 12. À propos ---------- */
.about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.about__media{position:relative}
.about__media img{width:100%;border-radius:var(--r)}
.about__badge{
  position:absolute;right:-18px;bottom:-18px;background:var(--blue);color:#fff;
  padding:20px 24px;border-radius:var(--r);box-shadow:var(--shadow);
}
.about__badge b{display:block;font-family:var(--f-head);font-size:2.1rem;font-weight:800;line-height:1}
.about__badge span{display:block;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;margin-top:6px;opacity:.9}
.about__text .sec-title{margin-bottom:20px}
/* :not(.eyebrow) est nécessaire : `.about__text > p` (0,1,1) l'emporterait
   sinon sur `.eyebrow` (0,1,0) et repasserait le sur-titre en gris. */
.about__text > p:not(.eyebrow){color:var(--muted)}
.ticks{margin:26px 0 30px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;font-size:.94rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;
  background:var(--blue-050);
  box-shadow:inset 0 0 0 2px var(--blue);
}
.ticks li::after{
  content:"";position:absolute;left:6px;top:.62em;width:5px;height:9px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(42deg);
}
@media(max-width:960px){
  .about{grid-template-columns:1fr;gap:52px}
  .about__badge{right:16px;bottom:-16px}
}

/* ---------- 13. Marquee partenaires ---------- */
/* Deux bandeaux superposés, défilant en sens opposés.
   Présentation volontairement nue : fond blanc, aucune bordure, logos en
   niveaux de gris très espacés — les marques doivent respirer, pas être
   enfermées dans un cadre. */
.bands{display:grid;gap:26px}
.marquee{
  position:relative;overflow:hidden;padding:14px 0;background:var(--bg);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Durées volontairement courtes : le défilement doit être franchement
   perceptible. Réduire encore ces valeurs accélère le mouvement. */
.marquee__track{display:flex;align-items:center;gap:96px;width:max-content;animation:slide 26s linear infinite}
.marquee--reverse .marquee__track{animation-direction:reverse;animation-duration:30s}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track img{
  height:54px;width:auto;object-fit:contain;flex-shrink:0;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s;
}
.marquee__track img:hover{filter:none;opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 48px))}}

@media(max-width:600px){
  .bands{gap:18px}
  .marquee{padding:10px 0}
  .marquee__track{gap:60px}
  .marquee__track img{height:42px}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 30px))}}
}

/* ---------- 14. Témoignage ---------- */
/* Six témoignages : deux rangées de trois. */
.quotes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.qcard{
  margin:0;position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px 26px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.qcard:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.qcard__mark{font-family:var(--f-head);font-size:3.4rem;line-height:.6;color:var(--blue);opacity:.28;margin-bottom:12px}
.qcard blockquote{margin:0;flex:1}
.qcard blockquote p{font-size:.98rem;line-height:1.62}
.qcard figcaption{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.qcard__avatar{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--grey);color:#fff;
  font-family:var(--f-head);font-weight:800;font-size:.82rem;letter-spacing:.02em;
}
.qcard__who{display:flex;flex-direction:column;line-height:1.35}
.qcard__who b{font-size:.92rem}
.qcard__who small{font-size:.8rem;color:var(--muted)}
.qcard__todo{
  margin-top:14px;font-size:.72rem;font-style:italic;color:var(--blue);
  letter-spacing:.05em;text-transform:uppercase;
}

@media(max-width:980px){.quotes__grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:640px){.quotes__grid{grid-template-columns:1fr}}

/* ---------- 15. Contact ---------- */
/* Titre en pleine largeur, puis deux colonnes :
   à gauche les coordonnées en blocs + la carte, à droite le formulaire. */
.contact__head{max-width:56ch;margin-bottom:clamp(34px,4vw,52px)}
.contact__head .sec-title{margin-bottom:18px}
.contact__lead{color:rgba(255,255,255,.62)}

.contact{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:28px;align-items:start}
.contact__aside{display:grid;gap:14px;align-content:start}

/* Chaque coordonnée est un bloc identifiable, pas une ligne flottante. */
.contact__list{display:grid;gap:14px}
.contact__list li{
  display:flex;gap:16px;align-items:center;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-lg);
  padding:18px 20px;transition:border-color .25s var(--ease);
}
.contact__list li:hover{border-color:var(--blue)}
.contact__ico{
  display:grid;place-items:center;flex-shrink:0;
  width:44px;height:44px;border-radius:50%;background:rgba(40,58,144,.18);
}
.contact__ico svg{width:20px;height:20px;fill:var(--blue-200)}
.contact__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact__txt small{
  font-family:var(--f-head);font-weight:700;font-size:.66rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
}
.contact__txt > span,.contact__txt > a{
  font-size:.95rem;color:#fff;overflow-wrap:anywhere;
}
.contact__txt a:hover{color:var(--blue-200)}

.form{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-lg);padding:clamp(24px,3.5vw,38px);display:grid;gap:18px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.field label span{color:var(--blue-200)}
.field input,.field select,.field textarea{
  background:var(--ink);border:1.5px solid var(--ink-3);border-radius:var(--r);
  padding:13px 14px;color:#fff;font-size:.95rem;width:100%;
  transition:border-color .2s,background .2s;
}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236D757D'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:22px;padding-right:40px;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none}
.field.has-error input,.field.has-error textarea{border-color:var(--error)}
.field__err{color:var(--error);font-size:.78rem;min-height:0;display:none}
.field.has-error .field__err{display:block}
.form__status{font-size:.9rem;min-height:1.4em}
.form__status.is-ok{color:var(--ok)}
.form__status.is-ko{color:var(--error)}

/* Carte : l'iframe n'est injectée qu'au clic, d'où l'écran de consentement. */
/* width:100% est indispensable : avec width:auto, le min-height rend la
   hauteur définie et aspect-ratio en déduit alors la largeur (320 × 21/8
   = 840px), ce qui fait déborder le conteneur. */
/* La carte vit sous les coordonnées, dans la colonne de gauche du contact.
   width:100% est indispensable : sans lui, le min-height rend la hauteur
   définie et aspect-ratio en déduit la largeur, ce qui fait déborder. */
/* Format choisi pour que la colonne de gauche (3 blocs + carte) arrive à peu
   près à la même hauteur que le formulaire à droite. */
.map{
  margin-top:0;
  position:relative;width:100%;aspect-ratio:12/7;min-height:290px;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r-lg);overflow:hidden;
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.map__link{
  display:inline-block;margin-top:12px;
  font-size:.82rem;color:rgba(255,255,255,.6);
  text-decoration:underline;text-underline-offset:3px;
}
.map__link:hover{color:#fff}

@media(max-width:960px){.contact{grid-template-columns:1fr;gap:44px}}
@media(max-width:640px){.map{aspect-ratio:3/2;min-height:0}}
@media(max-width:520px){.form__row{grid-template-columns:1fr}}

/* ---------- 16. Footer ---------- */
.footer{background:var(--ink);color:rgba(255,255,255,.62);padding-top:clamp(52px,6vw,78px);border-top:1px solid var(--ink-3)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:52px}
.footer__brand > p{margin-top:20px;font-size:.9rem;max-width:38ch}
.footer__col h4{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer__col a{display:block;font-size:.9rem;padding:5px 0;transition:color .2s}
.footer__col a:hover{color:var(--blue-200)}
.footer__contact p{font-size:.9rem;margin-bottom:12px}
.footer__contact a{display:inline}
.footer__contact .btn{margin-top:10px;color:#fff}
.footer__contact .btn:hover{color:#fff}

.social{display:flex;gap:10px;margin-top:24px}
.social a{
  display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--ink-3);
  border-radius:var(--r);transition:background .25s,border-color .25s;
}
.social a:hover{background:var(--blue);border-color:var(--blue)}
.social svg{width:16px;height:16px;fill:currentColor}

.footer__bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--ink-3);padding:22px 0;font-size:.82rem;
}
.footer__bottom a:hover{color:#fff}

@media(max-width:960px){.footer__grid{grid-template-columns:repeat(2,1fr);gap:38px}}
@media(max-width:560px){
  .footer__grid{grid-template-columns:1fr}
  .footer__bottom{justify-content:center;text-align:center}
}

/* ---------- 17. Bouton retour haut ---------- */
.totop{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--blue);color:#fff;font-size:1.15rem;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s,background .25s;
}
.totop.is-visible{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue-600)}

/* ---------- 18. Accessibilité — mouvement réduit ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important;
  }
  .js .reveal{opacity:1;transform:none}
  /* Les éléments animés à l'entrée doivent rester visibles sans animation.
     Les masques doivent être ouverts, sinon titres et images restent
     invisibles pour les personnes qui demandent moins de mouvement. */
  .js .tstep__marker{opacity:1;transform:none}
  .js .reveal .sec-title,
  .js .reveal .pdetail__title{clip-path:none}
  .js .card.reveal .card__media,
  .js .proj.reveal picture,
  .js .about__media.reveal picture{clip-path:none}
  .js .qcard.reveal .qcard__mark{opacity:.28;transform:none}
  .progress{display:none}
}

/* ---------- 19. Impression ---------- */
@media print{
  .header,.topbar,.totop,.hero__scroll,.marquee,.form{display:none}
  body{color:#000}
  .section--dark,.stats{background:#fff;color:#000}
}