/* ==========================================================================
   ADMIREZ-NOUS — Design System V4
   Charte graphique V1.0 (juillet 2026) : Noir 60 / Blanc 30 / Vert signal 10.
   Le vert est un signal, pas un fond : il souligne, il ne remplit pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 — TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Couleurs de marque (charte, page 09) */
  --noir:#0A0A0A;
  --blanc:#FFFFFF;
  --signal:#CCFF00;

  /* Surfaces dérivées du noir encre */
  --surface-1:#111111;
  --surface-2:#171717;
  --surface-3:#1F1F1F;

  /* Texte */
  --text:#FFFFFF;
  --text-2:rgba(255,255,255,.62);
  --text-3:rgba(255,255,255,.38);

  /* Filets (charte, page 11 : hairlines 1px) */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --line-signal:rgba(204,255,0,.32);

  /* Rayon 12 — imposé par la charte (page 05) */
  --r:12px;
  --r-lg:20px;
  --r-pill:999px;

  /* Échelle typographique fluide */
  --t-display:clamp(2.25rem, 10.5vw, 9.5rem);
  --t-h1:clamp(2.6rem, 7vw, 6.2rem);
  --t-h2:clamp(2rem, 4.6vw, 3.9rem);
  --t-h3:clamp(1.25rem, 2vw, 1.75rem);
  --t-h4:clamp(1.05rem, 1.4vw, 1.25rem);
  --t-body:clamp(0.975rem, 1.05vw, 1.0625rem);
  --t-small:0.8125rem;
  --t-kicker:0.6875rem;

  /* Espacement */
  --s-1:.5rem;  --s-2:1rem;   --s-3:1.5rem;  --s-4:2rem;
  --s-5:3rem;   --s-6:4rem;   --s-7:6rem;    --s-8:8rem;
  --section-y:clamp(5rem, 10vw, 9rem);

  /* Grille */
  --maxw:1320px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --header-h:76px;

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-fast:.22s;
  --d:.45s;
  --d-slow:.85s;
}

/* --------------------------------------------------------------------------
   02 — RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px);}
body{
  background:var(--noir);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:none;cursor:pointer;}
::selection{background:var(--signal);color:var(--noir);}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* --------------------------------------------------------------------------
   03 — TYPOGRAPHIE
   Unbounded = titrage / chiffres / accroches, en capitales, tracking serré.
   Inter = tout le reste.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,.display{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.03em;
  line-height:.95;
  text-wrap:balance;
}
h1,.t-h1{font-size:var(--t-h1);font-weight:900;}
h2,.t-h2{font-size:var(--t-h2);}
h3,.t-h3{font-size:var(--t-h3);letter-spacing:-.02em;line-height:1.1;}
h4,.t-h4{font-size:var(--t-h4);letter-spacing:-.01em;line-height:1.2;}
.display{font-size:var(--t-display);font-weight:900;letter-spacing:-.045em;}

p{text-wrap:pretty;}
.lead{font-size:clamp(1.0625rem,1.5vw,1.3125rem);line-height:1.55;color:var(--text-2);max-width:58ch;}
.muted{color:var(--text-2);}
.muted-2{color:var(--text-3);}
.accent{color:var(--signal);}

/* Chiffres : Unbounded, tabulaires, jamais en italique */
.num{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;
}

/* Kicker — Inter SemiBold capitales (charte page 10) */
.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-kicker);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--signal);
}
/* Marqueur de kicker : le trait d'élan du logo, jamais un tiret. */
.kicker::before{
  content:'';width:18px;height:9px;flex:none;
  background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.kicker--plain::before{display:none;}

/* Numérotation de section, en marge (01 — 08) */
.sect-index{
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--t-kicker);
  letter-spacing:.16em;color:var(--text-3);
}

/* --------------------------------------------------------------------------
   04 — LE TRAIT D'ÉLAN
   Signature graphique issue du logo (charte page 11) : sliver effilé, net.
   Utilisé en séparateur, en soulignement et en accent directionnel.
   -------------------------------------------------------------------------- */
.sliver{
  display:block;width:clamp(48px,6vw,88px);height:10px;flex:none;
  background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.sliver--line{
  width:100%;height:1px;background:var(--line);
  clip-path:none;
}
.rule{height:1px;background:var(--line);border:0;}

/* Soulignement animé d'un mot-clé dans un titre */
.underscore{position:relative;display:inline-block;white-space:nowrap;}
.underscore::after{
  content:'';position:absolute;left:0;right:0;bottom:-.2em;height:.06em;
  background:var(--signal);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-slow) var(--ease) .25s;
}
.is-visible .underscore::after,.underscore.is-visible::after{transform:scaleX(1);}

/* --------------------------------------------------------------------------
   05 — LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.wrap--narrow{max-width:900px;}
.section{padding-block:var(--section-y);position:relative;}
.section--tight{padding-block:calc(var(--section-y) * .6);}

/* Grille de fond hairline — structure la page sans la charger (charte p.11) */
.gridlines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.gridlines i{border-left:1px solid rgba(255,255,255,.035);}
.gridlines i:last-child{border-right:1px solid rgba(255,255,255,.035);}
@media (max-width:760px){.gridlines{grid-template-columns:repeat(2,1fr);}}

/* Grain — donne de la matière au noir encre */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:2;}

/* En-tête de section : kicker + titre + lien */
.sect-head{
  display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:var(--s-3) var(--s-5);
  padding-bottom:var(--s-4);margin-bottom:var(--s-6);
  border-bottom:1px solid var(--line);
}
.sect-head .sect-index{align-self:start;padding-top:.3rem;}
.sect-head__title{grid-column:2;}
.sect-head__title h2{margin-top:.6rem;}
.sect-head__link{
  font-size:var(--t-small);color:var(--text-2);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;transition:color var(--d-fast);
}
.sect-head__link:hover{color:var(--signal);}
.sect-head__link svg{width:14px;height:14px;transition:transform var(--d-fast) var(--ease);}
.sect-head__link:hover svg{transform:translateX(4px);}
@media (max-width:760px){
  .sect-head{grid-template-columns:1fr;}
  .sect-head__title{grid-column:1;}
  .sect-head .sect-index{order:-1;}
}

/* --------------------------------------------------------------------------
   06 — BOUTONS
   -------------------------------------------------------------------------- */
.btn{
  --btn-bg:transparent;--btn-fg:var(--blanc);--btn-bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.02em;
  padding:1rem 1.6rem;border-radius:var(--r);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  overflow:hidden;isolation:isolate;
  transition:color var(--d-fast) var(--ease),border-color var(--d-fast),transform var(--d-fast) var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--d) var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:scale(.97);}

/* Remplissage au survol, dans le sens du trait d'élan */
.btn::before{
  content:'';position:absolute;inset:-1px -12%;z-index:-1;
  background:var(--signal);
  transform:translateX(-118%) skewX(-12deg);
  transition:transform var(--d) var(--ease);
}
.btn:hover::before{transform:translateX(0) skewX(-12deg);}

.btn--signal{--btn-bg:var(--signal);--btn-fg:var(--noir);--btn-bd:var(--signal);}
.btn--signal::before{background:var(--blanc);}
.btn--signal:hover{color:var(--noir);}
.btn--ghost:hover{color:var(--noir);border-color:var(--signal);}
.btn--lg{padding:1.25rem 2rem;font-size:.875rem;}
.btn--sm{padding:.7rem 1.1rem;font-size:.6875rem;}
.btn--block{width:100%;}

/* Lien texte : soulignement et flèche signal toujours visibles, pour qu'on
   comprenne au premier coup d'œil que c'est cliquable, pas juste au survol. */
.link-line{
  position:relative;display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;color:var(--blanc);white-space:nowrap;
  padding-bottom:.2rem;border-bottom:1px solid var(--signal);
  transition:color var(--d-fast),gap var(--d-fast);
}
/* Sans dimension explicite, une icône SVG en ligne prend la taille par
   défaut d'un élément remplacé (300x150) et écrase tout le lien. */
.link-line svg{width:15px;height:15px;flex:none;color:var(--signal);transition:transform var(--d) var(--ease);}
.link-line:hover{color:var(--signal);gap:.7rem;}
.link-line:hover svg{transform:translateX(4px);}

/* Pastille icône + libellé pour les liens vers un réseau social externe
   (fiches réalisation) : cohérente avec les icônes du header/footer, mais
   avec le nom du réseau pour rester explicite en plein milieu d'un texte. */
.social-pill{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-size:.875rem;font-weight:600;color:var(--text);
  transition:border-color var(--d-fast),color var(--d-fast),background var(--d-fast);
}
.social-pill svg{width:16px;height:16px;flex:none;}
.social-pill:hover{border-color:var(--signal);color:var(--signal);background:var(--surface-1);}

/* --------------------------------------------------------------------------
   07 — EN-TÊTE
   -------------------------------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(10,10,10,0);
  border-bottom:1px solid transparent;
  transition:background var(--d) var(--ease),border-color var(--d),height var(--d) var(--ease);
}
.site-header.is-stuck{
  background:rgba(10,10,10,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
  height:64px;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);}

.brand{display:inline-flex;align-items:center;gap:.7rem;}
.brand img{height:30px;width:auto;transition:height var(--d) var(--ease);}
.is-stuck .brand img{height:26px;}
.brand__name{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:.9375rem;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
}
@media (max-width:420px){.brand__name{display:none;}}

.nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem);}
.nav a{
  position:relative;font-size:.875rem;font-weight:500;color:var(--text-2);
  padding-block:.4rem;transition:color var(--d-fast);
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--signal);
  transform:scaleX(0);transform-origin:right;transition:transform var(--d) var(--ease);
}
.nav a:hover{color:var(--blanc);}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav a[aria-current="page"]{color:var(--blanc);}
.nav a[aria-current="page"]::after{transform:scaleX(1);}
@media (max-width:1000px){.nav{display:none;}}

.header-actions{display:flex;align-items:center;gap:.75rem;}
/* Sur téléphone, le bouton se coince entre le logo et le menu et passe
   sur deux lignes. On le retire : l'appel à l'action reste accessible
   dans le menu plein écran, avec le même intitulé. */
@media (max-width:600px){.header-actions .btn{display:none;}}

/* Réseaux sociaux : socle commun, repris dans le header, le tiroir et le footer */
.social-links,.nav-social,.drawer-social,.footer-social{display:flex;align-items:center;gap:.95rem;}
/* Blanc plein et non un gris atténué : à 20 px, le tracé fin du logo
   Instagram (carré, cercle, point) devient flou dès que le contraste
   baisse. Le blanc plein garde le pictogramme net à cette taille. */
.social-links__item,.nav-social__item,.drawer-social__item,.footer-social__item{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--blanc);
  transition:color var(--d-fast),transform var(--d-fast) var(--ease);
}
.social-links__item svg,.nav-social__item svg,.drawer-social__item svg,.footer-social__item svg{width:100%;height:100%;}
.social-links__item:hover,.nav-social__item:hover,.drawer-social__item:hover,.footer-social__item:hover{color:var(--signal);transform:translateY(-2px);}

.nav-social{padding-left:.85rem;margin-right:.25rem;border-left:1px solid var(--line-2);}
@media (max-width:1000px){.nav-social{display:none;}}

.drawer-social{width:100%;margin-top:.25rem;gap:1.1rem;}
.drawer-social__item{width:24px;height:24px;color:var(--blanc);}

/* Burger */
.burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:var(--r);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.burger i{display:block;width:18px;height:1.5px;background:var(--blanc);transition:transform var(--d) var(--ease),opacity var(--d-fast);}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
@media (max-width:1000px){.burger{display:flex;}}

/* Menu plein écran */
.drawer{
  position:fixed;inset:0;z-index:99;background:var(--noir);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--d-slow) var(--ease);
  overflow-y:auto;
}
.drawer[data-open="true"]{clip-path:inset(0 0 0 0);}
.drawer nav{display:flex;flex-direction:column;gap:.25rem;}
.drawer nav a{
  font-family:'Unbounded',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(1.75rem,7vw,3rem);letter-spacing:-.03em;line-height:1.1;
  padding-block:.35rem;
  opacity:0;transform:translateY(28px);
  transition:opacity var(--d) var(--ease),transform var(--d) var(--ease),color var(--d-fast);
}
.drawer[data-open="true"] nav a{opacity:1;transform:none;}
.drawer nav a:hover{color:var(--signal);}
.drawer__foot{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);font-size:.875rem;color:var(--text-2);}
body.is-locked{overflow:hidden;}

/* Barre de progression de lecture */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--signal);width:0;z-index:101;transition:width .1s linear;}

/* --------------------------------------------------------------------------
   08 — HERO
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:min(100svh,900px);
  padding-top:calc(var(--header-h) + clamp(3rem,8vh,6rem));
  padding-bottom:var(--s-6);
  display:flex;align-items:center;
  overflow:hidden;
}
/* Halo signal, très contenu : le fluo souligne, il ne remplit pas */
.hero::before{
  content:'';position:absolute;left:50%;top:35%;width:min(90vw,1100px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(204,255,0,.09),transparent 62%);
  pointer-events:none;
}
.hero__inner{position:relative;z-index:2;width:100%;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.25rem);align-items:center;}
.hero__kicker{margin-bottom:var(--s-3);}
/* Accroche sur 3 lignes composées à la main : pas de max-width, c'est le
   retour à la ligne manuel qui tient le rythme. */
.hero h1{font-size:clamp(2.4rem,4.2vw,4rem);line-height:.94;overflow-wrap:break-word;}
/* En deux colonnes, chaque ligne composée à la main reste sur une ligne.
   Sous 980px la mise en page repasse sur une colonne : on laisse respirer. */
@media (min-width:981px){.hero h1 .line > span{white-space:nowrap;}}
/* Sur petit écran, un mot long comme « communication. » dépasse la
   largeur à cette taille de police. On réduit pour qu'il tienne sur une
   ligne avec de la marge ; overflow-wrap ci-dessus reste le filet pour
   les écrans les plus étroits. */
@media (max-width:430px){.hero h1{font-size:1.7rem;}}
.hero h1 .underscore::after{height:.055em;bottom:-.16em;}

/* ---- Mosaïque du hero : la preuve avant le discours ---- */
.hero__media{
  position:relative;aspect-ratio:1/1.18;
  perspective:1200px;
}
.hero__card{
  position:absolute;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line-2);
  background:var(--surface-2);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  animation:float 9s var(--ease) infinite;
}
.hero__card img{width:100%;height:100%;object-fit:cover;}
.hero__card figcaption{
  position:absolute;left:.9rem;bottom:.9rem;
  font-size:var(--t-small);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--noir);background:var(--signal);padding:.4rem .8rem;border-radius:var(--r-pill);
}
/* Grande carte portrait, légèrement redressée */
.hero__card--a{left:0;top:2%;width:64%;height:84%;transform:rotate(-3deg);animation-delay:-.5s;}
/* La carte b (haut-droite) et c (bas-droite) sont plus tardives dans le
   DOM : là où elles chevauchent la grande carte a, elles se peignent
   par-dessus. Ça mange le coin bas-gauche de a — exactement où sa
   pastille se posait par défaut (rapporté : « PHOTO & VIDÉO » caché).
   Le coin haut-gauche de a, lui, n'est jamais recouvert. */
.hero__card--a figcaption{bottom:auto;top:.9rem;}
/* Deux cartes paysage décalées, dans l'axe du trait d'élan */
.hero__card--b{right:0;top:0;width:58%;height:44%;transform:rotate(2.5deg);animation-delay:-3.2s;}
.hero__card--c{right:2%;bottom:0;width:62%;height:48%;transform:rotate(-1.5deg);animation-delay:-6s;}
@keyframes float{
  0%,100%{translate:0 0;}
  50%{translate:0 -14px;}
}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;}
  .hero__media{display:none;}
}
.hero__sub{margin-top:var(--s-3);max-width:52ch;}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-4);}

.hero__foot{
  margin-top:clamp(2.5rem,7vh,5rem);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
  font-size:var(--t-small);color:var(--text-2);
}
.hero__foot strong{color:var(--blanc);font-weight:600;}
.dot{width:4px;height:4px;border-radius:50%;background:var(--signal);flex:none;}

/* Monogramme géant en filigrane */
.hero__mark{
  position:absolute;right:-8vw;top:50%;transform:translateY(-50%) rotate(6deg);
  width:min(48vw,560px);opacity:.035;pointer-events:none;z-index:1;
}
@media (max-width:900px){.hero__mark{display:none;}}

/* Indicateur de défilement : centré, un vrai signal visuel qu'on doit
   voir sans chercher — pas un texte discret planqué dans un coin. Deux
   chevrons signal qui tombent en cascade, façon carets qui rebondissent. */
.scroll-hint{
  position:absolute;left:50%;bottom:1.75rem;z-index:2;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.scroll-hint i{
  width:16px;height:16px;flex:none;
  border-right:3px solid var(--signal);border-bottom:3px solid var(--signal);
  transform:rotate(45deg);
  animation:hint-bounce 1.5s var(--ease) infinite;
}
.scroll-hint i:nth-child(2){margin-top:-10px;animation-delay:.2s;}
@keyframes hint-bounce{
  0%,100%{transform:rotate(45deg) translate(0,0);opacity:.35;}
  50%{transform:rotate(45deg) translate(7px,7px);opacity:1;}
}
@media (max-width:700px){.scroll-hint{display:none;}}

/* --------------------------------------------------------------------------
   09 — MARQUEE / BANDEAU
   -------------------------------------------------------------------------- */
.marquee{
  display:flex;overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{display:flex;flex:none;gap:var(--gap,3rem);padding-right:var(--gap,3rem);align-items:center;animation:slide var(--speed,38s) linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-100%);}}

/* Bandeau signal, en travers — reprend l'angle du trait d'élan */
.band{
  background:var(--signal);color:var(--noir);
  padding-block:.9rem;
  transform:rotate(-1.2deg) scaleX(1.06);
  margin-block:var(--s-5);
}
.band .marquee{-webkit-mask-image:none;mask-image:none;}
.band .marquee__track{--gap:2.5rem;--speed:30s;}
.band span{
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:clamp(.875rem,1.4vw,1.0625rem);
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  display:inline-flex;align-items:center;gap:2.5rem;
}
.band span::after{content:'';width:14px;height:14px;background:var(--noir);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);}

/* Showreel : deux rangées qui se croisent, on voit le travail tout de suite */
.showreel{display:flex;flex-direction:column;gap:clamp(.5rem,1vw,.75rem);padding-block:var(--s-4) 0;}
.showreel__track{--gap:clamp(.5rem,1vw,.75rem);--speed:60s;}
.showreel__track--rev{animation-direction:reverse;--speed:72s;}
.showreel img{
  height:clamp(150px,20vw,260px);width:auto;
  border-radius:var(--r);border:1px solid var(--line);
  object-fit:cover;
  filter:saturate(.9);transition:filter var(--d),transform var(--d) var(--ease);
}
.showreel img:hover{filter:none;transform:scale(1.02);}

/* Bande qui défile en une seule rangée : pages service et secteur, pour
   couper le texte avec de vraies photos plutôt qu'un pavé de plus.
   Mêmes proportions que le showreel de l'accueil pour rester cohérent. */
.photo-strip{margin-top:var(--s-4);}
.photo-strip .marquee__track{--gap:clamp(.5rem,1vw,.75rem);--speed:50s;}
.photo-strip img{
  height:clamp(130px,16vw,190px);width:auto;flex:none;
  border-radius:var(--r);border:1px solid var(--line);
  object-fit:cover;
  filter:saturate(.9);transition:filter var(--d),transform var(--d) var(--ease);
}
.photo-strip img:hover{filter:none;transform:scale(1.02);}
.page-hero + .photo-strip{margin-top:var(--s-5);}

/* Logos clients */
.logos{padding-block:var(--s-6);border-block:1px solid var(--line);}
.logos__track{--gap:clamp(3rem,6vw,6rem);--speed:46s;}
.logos img{height:clamp(38px,4.4vw,58px);width:auto;opacity:.55;filter:grayscale(1) brightness(1.9);transition:opacity var(--d),filter var(--d);}
.logos a:hover img{opacity:1;filter:none;}

/* --------------------------------------------------------------------------
   10 — CARTES & GRILLES
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}

.cell{background:var(--noir);padding:clamp(1.5rem,3vw,2.25rem);position:relative;transition:background var(--d) var(--ease);}
a.cell:hover{background:var(--surface-2);}

/* Pastille d'icône : un repère visuel immédiat sur un item de liste
   (problème, prestation, différenciateur), plutôt qu'un titre en gras nu.
   Bibliothèque partagée avec les CPT Service et Différenciateur. */
.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--signal);background:var(--surface-1);
}
.icon-badge svg{width:22px;height:22px;}
/* Grand format : occupe un emplacement média (carte secteur/service sans
   photo), plutôt qu'un simple repère à côté d'un titre. */
.icon-badge--xl{width:76px;height:76px;}
.icon-badge--xl svg{width:36px;height:36px;}

/* Carte douleur client (structure Ambission) */
.pain{display:flex;flex-direction:column;gap:.9rem;}
.pain__head{display:flex;align-items:center;gap:.85rem;}
.pain__no{font-family:'Unbounded',sans-serif;font-weight:900;font-size:2.5rem;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-2);}
.pain h3{font-size:1.0625rem;text-transform:none;letter-spacing:-.01em;line-height:1.35;}
.pain__res{
  margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  font-size:var(--t-small);color:var(--text-2);
}
.pain__res b{display:block;color:var(--signal);font-weight:600;font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.35rem;}

/* Ligne d'expertise (survol : elle avance) */
.exp{border-top:1px solid var(--line);}
.exp__row{
  display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,3vw,2.25rem) 0;border-bottom:1px solid var(--line);
  position:relative;isolation:isolate;
  transition:padding-inline var(--d) var(--ease);
}
.exp__row::before{
  content:'';position:absolute;inset:0 -1.5rem;z-index:-1;background:var(--surface-2);border-radius:var(--r);
  opacity:0;transform:scaleX(.96);transition:opacity var(--d) var(--ease),transform var(--d) var(--ease);
}
.exp__row:hover::before{opacity:1;transform:none;}
.exp__row:hover{padding-inline:1.5rem;}
.exp__no{
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(2rem,4.5vw,3.5rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  transition:-webkit-text-stroke-color var(--d);
}
.exp__row:hover .exp__no{-webkit-text-stroke-color:var(--signal);}
.exp__body h3{font-size:clamp(1.125rem,2vw,1.5rem);text-transform:none;}
.exp__body p{margin-top:.5rem;color:var(--text-2);font-size:.9375rem;max-width:56ch;}
.exp__go{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;flex:none;
  transition:background var(--d) var(--ease),border-color var(--d),color var(--d);
}
.exp__go svg{width:16px;height:16px;transition:transform var(--d) var(--ease);}
.exp__row:hover .exp__go{background:var(--signal);border-color:var(--signal);color:var(--noir);}
.exp__row:hover .exp__go svg{transform:translateX(3px);}
@media (max-width:700px){
  .exp__row{grid-template-columns:3rem 1fr;gap:1rem;}
  .exp__go{display:none;}
}

/* --------------------------------------------------------------------------
   11 — OFFRES (structure Eclipse : nommées, détaillées, avec prix)
   -------------------------------------------------------------------------- */
.offers{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem);}
.offers--3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1020px){.offers--3{grid-template-columns:1fr;}}
@media (max-width:860px){.offers{grid-template-columns:1fr;}}

.offer{
  display:flex;flex-direction:column;gap:var(--s-3);
  padding:clamp(1.75rem,3vw,2.5rem);
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:border-color var(--d) var(--ease),transform var(--d) var(--ease);
}
.offer:hover{border-color:var(--line-2);transform:translateY(-3px);}
.offer--feature{border-color:var(--line-signal);background:linear-gradient(180deg,rgba(204,255,0,.05),transparent 45%),var(--surface-1);}
.offer__tag{
  order:-1;align-self:flex-start;margin-bottom:calc(var(--s-3) * -.5);
  font-size:var(--t-kicker);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--noir);background:var(--signal);padding:.35rem .7rem;border-radius:var(--r-pill);
}
.offer__name{font-size:clamp(1.5rem,2.6vw,2rem);}
.offer__for{font-size:var(--t-small);color:var(--signal);font-weight:500;}
.offer__desc{color:var(--text-2);font-size:.9375rem;}
/* Pas de grille tarifaire publique : chaque projet est chiffré au cas par cas. */
.offer__quote{
  margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-kicker);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);
}
.offer__quote::before{
  content:'';width:16px;height:8px;flex:none;background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.offer__list{display:flex;flex-direction:column;gap:.7rem;font-size:.9375rem;color:var(--text-2);}
.offer__list li{display:flex;gap:.7rem;align-items:flex-start;}
.offer__list li::before{
  content:'';width:14px;height:14px;flex:none;margin-top:.28em;
  background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.offer .btn{margin-top:0;}
.offer__list{flex:1;}

/* --------------------------------------------------------------------------
   12 — PREUVES CHIFFRÉES (structure Ambission)
   -------------------------------------------------------------------------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);}
@media (max-width:760px){.kpis{grid-template-columns:repeat(2,1fr);}}
.kpi{background:var(--noir);padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,1.75rem);}
.kpi .num{font-size:clamp(2.25rem,5vw,3.75rem);color:var(--signal);}
.kpi__lbl{margin-top:.6rem;font-size:var(--t-small);color:var(--text-2);line-height:1.4;}

/* Étude de cas */
.case{
  display:grid;grid-template-columns:1.05fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1);
  transition:border-color var(--d);
}
.case:hover{border-color:var(--line-2);}
.case + .case{margin-top:clamp(1rem,2vw,1.5rem);}
.case:nth-of-type(odd){grid-template-columns:1fr 1.05fr;}
.case:nth-of-type(odd) .case__media{order:2;}
.case__media{position:relative;overflow:hidden;min-height:300px;background:var(--surface-3);}
.case__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.case:hover .case__media img{transform:scale(1.05);}
.case__body{padding:clamp(1.75rem,3.4vw,3rem);display:flex;flex-direction:column;gap:var(--s-2);justify-content:center;}
.case__sector{font-size:var(--t-kicker);letter-spacing:.16em;text-transform:uppercase;color:var(--signal);font-weight:600;}
.case__body h3{font-size:clamp(1.375rem,2.6vw,2rem);}
.case__body p{color:var(--text-2);font-size:.9375rem;max-width:48ch;}
.case__kpis{display:flex;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line);}
.case__kpi .num{font-size:clamp(1.5rem,2.6vw,2.125rem);color:var(--signal);}
.case__kpi span{display:block;margin-top:.3rem;font-size:var(--t-kicker);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);}
@media (max-width:820px){
  .case,.case:nth-of-type(odd){grid-template-columns:1fr;}
  .case:nth-of-type(odd) .case__media{order:0;}
  .case__media{min-height:230px;}
}

/* --------------------------------------------------------------------------
   13 — PROCESS
   -------------------------------------------------------------------------- */
/* Colonne titre collante + étapes à droite */
.split{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(2rem,6vw,5rem);align-items:start;}
.split__aside{position:sticky;top:calc(var(--header-h) + 2rem);min-width:0;}
/* Le h2 global (--t-h2, jusqu'à 62px) est taillé pour un titre pleine
   largeur : dans cette colonne étroite (~30-35% du wrap), un mot long en
   capitales comme "INTERVENTION" déborde sur le texte voisin (rapporté
   par Julien). Même échelle que .svc__body h2, prévue pour un titre en
   contexte resserré. */
.split__aside h2{margin-top:.6rem;font-size:clamp(1.75rem,3vw,2.75rem);overflow-wrap:break-word;}
.split__aside p{margin-top:var(--s-2);color:var(--text-2);font-size:.9375rem;max-width:34ch;}
@media (max-width:900px){
  .split{grid-template-columns:1fr;}
  .split__aside{position:static;}
}

.steps{counter-reset:step;position:relative;}
.steps::before{content:'';position:absolute;left:calc(1.5rem - 1px);top:0;bottom:0;width:1px;background:var(--line);}
.step{position:relative;padding:0 0 var(--s-5) clamp(3.75rem,7vw,5.5rem);}
.step:last-child{padding-bottom:0;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:-.2rem;
  width:3rem;height:3rem;border-radius:50%;
  display:grid;place-items:center;
  background:var(--noir);border:1px solid var(--line-2);
  font-family:'Unbounded',sans-serif;font-weight:800;font-size:.8125rem;color:var(--text-3);
  transition:border-color var(--d),color var(--d),background var(--d);
}
.step.is-visible::before{border-color:var(--signal);color:var(--signal);}
.step h3{font-size:clamp(1.125rem,2vw,1.5rem);text-transform:none;}
.step p{margin-top:.5rem;color:var(--text-2);font-size:.9375rem;max-width:60ch;}
.step__out{
  margin-top:.75rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-kicker);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:.4rem .8rem;
}

/* --------------------------------------------------------------------------
   14 — TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.testi{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);}
@media (max-width:900px){.testi{grid-template-columns:1fr;}}
.testi__card{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:clamp(1.5rem,3vw,2.25rem);
  background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;
}
.testi__stars{color:var(--signal);letter-spacing:.15em;font-size:.8125rem;}
.testi__card blockquote{font-size:1rem;line-height:1.65;color:var(--text);}
.testi__who{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);}
.testi__who b{font-family:'Unbounded',sans-serif;font-weight:700;font-size:.8125rem;text-transform:uppercase;letter-spacing:-.01em;}
.testi__who span{display:block;font-size:var(--t-small);color:var(--text-3);margin-top:.2rem;}

/* --------------------------------------------------------------------------
   15 — FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(.9375rem,1.5vw,1.125rem);
  letter-spacing:-.01em;line-height:1.35;
  transition:color var(--d-fast);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--signal);}
.faq summary i{
  position:relative;width:20px;height:20px;flex:none;
}
.faq summary i::before,.faq summary i::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--signal);
  transform:translate(-50%,-50%);transition:transform var(--d) var(--ease);
}
.faq summary i::before{width:14px;height:1.5px;}
.faq summary i::after{width:1.5px;height:14px;}
.faq details[open] summary i::after{transform:translate(-50%,-50%) scaleY(0);}
.faq details p{padding-bottom:clamp(1.1rem,2.2vw,1.6rem);color:var(--text-2);max-width:70ch;font-size:.9375rem;}

/* --------------------------------------------------------------------------
   16 — CTA FINAL
   -------------------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(5rem,12vw,9rem);
}
.cta::before{
  content:'';position:absolute;left:50%;top:50%;width:min(120vw,1200px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(204,255,0,.11),transparent 60%);
  pointer-events:none;
}
.cta .wrap{position:relative;z-index:1;}
.cta h2{font-size:var(--t-display);}
.cta p{margin:var(--s-3) auto 0;max-width:46ch;color:var(--text-2);}
.cta__ctas{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:var(--s-4);}

/* --------------------------------------------------------------------------
   17 — PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface-1);padding-block:var(--s-6) var(--s-4);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-5) var(--s-4);}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand p{margin-top:var(--s-2);color:var(--text-2);font-size:.9375rem;max-width:34ch;}
.footer-col h4{
  font-family:'Inter',sans-serif;font-weight:600;font-size:var(--t-kicker);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-2);
}
.footer-col a,.footer-col address{display:block;font-size:.9375rem;color:var(--text-2);margin-bottom:.65rem;font-style:normal;line-height:1.6;}
.footer-col a{transition:color var(--d-fast);}
.footer-col a:hover{color:var(--signal);}
.footer-social{margin-top:.5rem;}
.footer-bottom{
  margin-top:var(--s-5);padding-top:var(--s-3);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2) var(--s-4);
  font-size:var(--t-small);color:var(--text-3);
}
.footer-bottom a:hover{color:var(--signal);}

/* --------------------------------------------------------------------------
   18 — MOTION
   Toute animation est purement décorative : le contenu reste lisible sans JS.
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.08s;}
.reveal[data-delay="2"]{transition-delay:.16s;}
.reveal[data-delay="3"]{transition-delay:.24s;}
.reveal[data-delay="4"]{transition-delay:.32s;}

/* Révélation ligne par ligne des titres (masque + montée) */
.reveal-lines .line{display:block;overflow:hidden;}
.reveal-lines .line > span{display:block;transform:translateY(105%);transition:transform var(--d-slow) var(--ease);}
.reveal-lines.is-visible .line > span{transform:none;}
.reveal-lines.is-visible .line:nth-child(2) > span{transition-delay:.08s;}
.reveal-lines.is-visible .line:nth-child(3) > span{transition-delay:.16s;}
.reveal-lines.is-visible .line:nth-child(4) > span{transition-delay:.24s;}

/* Aucun JS chargé : on affiche tout */
.no-js .reveal{opacity:1;transform:none;}
.no-js .reveal-lines .line > span{transform:none;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .reveal{opacity:1;transform:none;}
  .reveal-lines .line > span{transform:none;}
}

/* ==========================================================================
   19 — PAGES INTÉRIEURES
   ========================================================================== */

/* ---- Fil d'Ariane ---- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-size:var(--t-small);color:var(--text-3);
}
.breadcrumb a{color:var(--text-2);transition:color var(--d-fast);}
.breadcrumb a:hover{color:var(--signal);}
.breadcrumb i{
  width:10px;height:6px;flex:none;background:var(--text-3);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.breadcrumb [aria-current]{color:var(--text);}

/* ---- Hero de page intérieure ---- */
.page-hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(2.5rem,6vh,4.5rem));
  padding-bottom:clamp(2.5rem,6vw,4.5rem);
}
.page-hero::before{
  content:'';position:absolute;left:-10%;top:-40%;width:min(80vw,760px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(204,255,0,.08),transparent 62%);pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:1;}

/* Hero avec photo plein cadre (fiches réalisation) : le titre se lit
   directement sur le visuel du projet, comme une couverture, plutôt que
   sur un fond noir suivi de la même photo un peu plus bas. */
.page-hero--photo{padding-bottom:clamp(3.5rem,9vw,6rem);}
.page-hero--photo::before{display:none;}
.page-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;}
.page-hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.8) 45%,var(--noir) 100%);
}
/* Ceinture au survol du texte pour garantir la lisibilité quelle que soit
   la photo (une photo claire ou très texturée ne suffit pas toujours,
   même assombrie par le dégradé). */
.page-hero--photo .breadcrumb{color:rgba(255,255,255,.75);}
.page-hero--photo .breadcrumb a{color:rgba(255,255,255,.9);}
.page-hero--photo .kicker,
.page-hero--photo h1,
.page-hero--photo .page-hero__intro p{text-shadow:0 4px 24px rgba(0,0,0,.7);}
.page-hero--photo .page-hero__intro{border-left-color:rgba(255,255,255,.35);}
.page-hero h1{margin-top:var(--s-2);font-size:clamp(2.25rem,5.6vw,4.5rem);overflow-wrap:break-word;}
/* Sur petit écran, un mot long dans le titre (« Communication »,
   « Signalétique ») dépasse la colonne et se fait rogner par le
   masque de la page. On réduit la taille pour qu'il tienne. */
@media (max-width:430px){.page-hero h1{font-size:1.85rem;}}
.page-hero .kicker{margin-top:var(--s-3);}
.page-hero__head{position:relative;}

/* Amas de 3 éclairs, posé sur l'angle d'une carte ou d'une photo pour la
   dynamiser — même accent repris à plusieurs endroits du site (hero
   d'accueil, photo de l'agence, cartes service/secteur), dans le même
   esprit que les accents posés sur les visuels Instagram de l'agence.
   Le conteneur qui le reçoit doit être en position:relative et ne pas
   couper le débordement (pas d'overflow:hidden), sinon l'éclair qui
   dépasse l'angle serait rogné. */
.corner-bolts{position:absolute;z-index:2;width:74px;height:64px;pointer-events:none;}
.corner-bolts--top-right{top:-18px;right:-18px;}
.corner-bolts--top-left{top:-18px;left:-18px;}
.corner-bolts__i{
  position:absolute;display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.45));
  animation:float 6s var(--ease) infinite;
}
.corner-bolts__i svg{display:block;width:100%;height:100%;}
.corner-bolts__i--a{width:32px;height:32px;top:10px;right:4px;color:var(--signal);transform:rotate(-10deg);animation-delay:-.5s;}
.corner-bolts__i--b{width:24px;height:24px;top:2px;right:30px;color:var(--blanc);transform:rotate(8deg);animation-delay:-2.3s;z-index:1;}
.corner-bolts__i--c{width:22px;height:22px;top:32px;right:52px;color:var(--signal);opacity:.85;transform:rotate(-6deg);animation-delay:-4.4s;}
.corner-bolts--top-left .corner-bolts__i--a{right:auto;left:4px;transform:rotate(10deg);}
.corner-bolts--top-left .corner-bolts__i--b{right:auto;left:30px;transform:rotate(-8deg);}
.corner-bolts--top-left .corner-bolts__i--c{right:auto;left:52px;transform:rotate(6deg);}
@media (max-width:600px){.corner-bolts{display:none;}}
/* Les deux colonnes démarrent toujours au même niveau (align-items:start) :
   un titre court ne se fait plus pousser vers le bas par une intro longue. */
.page-hero__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;}
@media (max-width:900px){.page-hero__grid{grid-template-columns:1fr;gap:0;}}

/* Intro de hero : un bloc annoté, tenu par un filet vertical, et non plus
   un paragraphe gris qui flotte en haut à droite. Décalé vers le bas pour
   s'ancrer visuellement sur le titre, texte remonté en quasi-blanc. */
.page-hero__intro{
  margin-top:clamp(.5rem,3.5vw,2.5rem);
  padding-left:clamp(1.1rem,1.8vw,1.75rem);
  border-left:1px solid rgba(255,255,255,.22);
}
.page-hero__intro p{
  color:rgba(255,255,255,.82);
  font-size:clamp(1rem,1.15vw,1.1875rem);
  line-height:1.62;
  max-width:44ch;
}
@media (max-width:900px){
  .page-hero__intro{
    margin-top:var(--s-4);padding-top:var(--s-4);padding-left:0;
    border-left:0;border-top:1px solid var(--line-2);
  }
  .page-hero__intro p{max-width:56ch;}
}

/* Photo posée dans le hero de page : sur À propos, pour qu'on voie tout
   de suite qu'une vraie équipe se cache derrière l'agence. Le wrapper
   reste sans overflow:hidden pour que l'amas d'éclairs (.corner-bolts)
   puisse déborder sur l'angle de la carte, par-dessus. */
.page-hero__photo-wrap{position:relative;max-width:320px;margin-bottom:var(--s-3);}
.page-hero__photo{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 90px -30px rgba(204,255,0,.35);
}
.page-hero__photo img{width:100%;height:100%;object-fit:cover;}
.page-hero__photo-tag{
  /* max-width borné explicitement : un nom de deux personnes est assez
     long pour dépasser la carte si l'élément ne se dimensionne que sur
     son propre contenu (ça a été le cas ici, débordement à droite). */
  position:absolute;left:.9rem;bottom:.9rem;max-width:calc(100% - 1.8rem);
  display:inline-block;box-sizing:border-box;
  font-family:'Unbounded',sans-serif;font-weight:700;font-size:var(--t-small);letter-spacing:.06em;text-transform:uppercase;
  color:var(--noir);background:var(--signal);padding:.45rem .85rem;border-radius:var(--r-pill);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
@media (max-width:900px){.page-hero__photo-wrap{max-width:220px;}}

/* Un hero de page est immédiatement suivi de son contenu : on ne cumule
   pas le bas du hero et le haut de la section, sinon on obtient un demi
   écran de vide qui laisse croire que la page est finie. */
.page-hero + .section{padding-top:clamp(2rem,4vw,3.5rem);}
.page-hero + .section .svc:first-child{padding-top:0;}

/* Chiffres de rappel en bas de hero de page */
.page-hero__facts{display:flex;flex-wrap:wrap;gap:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);}
.page-hero__facts div .num{font-size:clamp(1.5rem,3vw,2.25rem);color:var(--signal);}
.page-hero__facts div span{display:block;margin-top:.3rem;font-size:var(--t-kicker);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);}

/* ---- Bloc service détaillé (alternance) ---- */
.svc{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line);
  scroll-margin-top:calc(var(--header-h) + 2rem);
}
.svc:last-child{border-bottom:0;}
.svc:nth-of-type(even) .svc__media-wrap{order:-1;}
.svc__no{
  position:relative;display:inline-block;
  font-family:'Unbounded',sans-serif;font-weight:900;font-size:clamp(2.5rem,5vw,4rem);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  transition:-webkit-text-stroke-color var(--d-fast);
}
.svc:hover .svc__no{-webkit-text-stroke-color:var(--signal);}
.svc__body h2{margin-top:var(--s-2);font-size:clamp(1.75rem,3.4vw,2.75rem);text-transform:none;}
.svc__tag{margin-top:var(--s-2);color:var(--signal);font-size:1.0625rem;font-weight:500;max-width:42ch;}
.svc__body > p{margin-top:var(--s-2);color:var(--text-2);max-width:56ch;}
.svc__list{margin-top:var(--s-3);display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.5rem;}
.svc__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.9375rem;color:var(--text-2);}
.svc__list li::before{
  content:'';width:14px;height:7px;flex:none;margin-top:.42em;background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}
.svc__cta{margin-top:var(--s-3);}

/* Vignette façon mosaïque du hero : légère bascule, halo de couleur, pastille.
   Le wrapper reste sans overflow:hidden pour laisser l'amas d'éclairs de la
   première carte déborder sur son angle (voir .corner-bolts). */
.svc__media-wrap{position:relative;}
.svc__media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3.2;background:var(--surface-2);
  box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 90px -30px rgba(204,255,0,.35);
  transform:rotate(-1.4deg);
  transition:transform var(--d) var(--ease),box-shadow var(--d) var(--ease);
}
.svc:nth-of-type(even) .svc__media{transform:rotate(1.4deg);}
.svc:hover .svc__media{transform:rotate(0deg);box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 110px -25px rgba(204,255,0,.5);}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.svc:hover .svc__media img{transform:scale(1.03);}
.svc__badge{
  position:absolute;left:1rem;bottom:1rem;z-index:1;
  font-family:'Unbounded',sans-serif;font-size:var(--t-small);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--noir);background:var(--signal);padding:.5rem 1rem;border-radius:var(--r-pill);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
@media (max-width:860px){
  .svc,.svc:nth-of-type(even){grid-template-columns:1fr;}
  .svc:nth-of-type(even) .svc__media-wrap{order:0;}
  .svc__list{grid-template-columns:1fr;}
  .svc__media,.svc:nth-of-type(even) .svc__media{transform:none;}
}

/* ---- Cartes secteur ---- */
.sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);}
@media (max-width:980px){.sectors{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.sectors{grid-template-columns:1fr;}}
.sector{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-1);
  position:relative;overflow:hidden;
  transition:border-color var(--d),transform var(--d) var(--ease);
}
.sector:hover{border-color:var(--line-signal);transform:translateY(-3px);}
.sector__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2);}
.sector__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.sector:hover .sector__media img{transform:scale(1.05);}
/* Repli sans photo (service sans image mise en avant) : une pastille
   d'icône sur fond dégradé plutôt qu'un rectangle vide — la carte garde
   un vrai temps fort visuel même sans preuve photo. */
.sector__media--icon{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,var(--surface-2),var(--noir));}
.sector:hover .sector__media--icon .icon-badge{border-color:var(--line-signal);}
.sector__badge{
  position:absolute;left:.85rem;bottom:.85rem;z-index:1;
  font-family:'Unbounded',sans-serif;font-size:var(--t-kicker);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--noir);background:var(--signal);padding:.4rem .75rem;border-radius:var(--r-pill);
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.sector__body{display:flex;flex-direction:column;gap:var(--s-2);padding:clamp(1.25rem,2.6vw,1.75rem);flex:1;}
.sector__no{font-size:var(--t-kicker);letter-spacing:.16em;color:var(--text-3);}
.sector h2,.sector h3{font-size:clamp(1.25rem,2.2vw,1.625rem);}
.sector p{color:var(--text-2);font-size:.9375rem;flex:1;}
.sector__go{
  display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-small);color:var(--signal);
}
.sector__go svg{width:14px;height:14px;transition:transform var(--d-fast) var(--ease);}
.sector:hover .sector__go svg{transform:translateX(4px);}

/* ---- Portfolio ---- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s-4);}
.filter{
  font-size:var(--t-small);font-weight:500;color:var(--text-2);
  padding:.6rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-pill);
  transition:border-color var(--d-fast),color var(--d-fast),background var(--d-fast);
}
.filter:hover{border-color:var(--line-2);color:var(--text);}
.filter[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--noir);font-weight:600;}

.folio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,1.5vw,1.25rem);}
@media (max-width:960px){.folio{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.folio{grid-template-columns:1fr;}}
.folio__item[hidden]{display:none;}
.folio__item{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--line);aspect-ratio:4/5;background:var(--surface-2);
}
.folio__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.folio__item:hover img{transform:scale(1.05);}
.folio__info{
  position:absolute;inset:auto 0 0 0;padding:clamp(1rem,2vw,1.5rem);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.9) 72%);
}
.folio__info .case__sector{margin-bottom:.35rem;}
.folio__info h3{font-size:clamp(1rem,1.6vw,1.25rem);}
.folio__empty{padding:var(--s-6) 0;text-align:center;color:var(--text-3);}

/* ---- Fiche projet ---- */
.project-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/7;background:var(--surface-2);border:1px solid var(--line);}
.project-hero img{width:100%;height:100%;object-fit:cover;}
/* Fiche d'identité + photos, côte à côte : sans ça, le bloc client/
   secteur/prestation restait seul sur toute la largeur avec beaucoup de
   vide autour — plus flagrant encore quand le projet n'avait aucune
   photo de galerie pour occuper l'espace. */
.project-brief{display:grid;gap:clamp(2rem,4vw,3rem);align-items:start;}
.project-brief--with-photos{grid-template-columns:minmax(260px,360px) 1fr;}
@media (max-width:860px){.project-brief--with-photos{grid-template-columns:1fr;}}

/* auto-fit et non repeat(4,1fr) : un projet sans "Résultat chiffré" n'a
   que 3 cases à remplir, et un 4e bloc figé restait vide (rapporté sur
   Assentis). auto-fit retire les colonnes qu'aucune case n'occupe.
   Largeur de case plafonnée (et non 1fr) et bloc en largeur de contenu :
   sans ça, sur un grand écran, 3 cases s'étirent chacune pour combler
   toute la largeur du wrap et paraissent vides (signalé par Julien). */
.project-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,190px));width:fit-content;max-width:100%;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:var(--s-4);}
@media (max-width:760px){.project-meta{grid-template-columns:1fr 1fr;width:100%;}}
.project-meta div{background:var(--noir);padding:clamp(1rem,2vw,1.5rem);}
.project-meta dt{font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.project-meta dd{margin-top:.4rem;font-family:'Unbounded',sans-serif;font-weight:700;font-size:.9375rem;}

/* La preuve (site, Instagram, Facebook qu'on anime) : sous la fiche
   d'identité du projet, pas noyée en bas d'un pavé de texte. */
.project-proof{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:var(--s-4);}

/* Mosaïque à côté de la fiche d'identité : la 1ère photo prend toute la
   hauteur en colonne 1 dès qu'il y en a 3 ou plus, les suivantes
   s'empilent en colonne 2 — évite une grille plate et uniforme. */
.project-shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,1.6vw,1.25rem);}
.project-shots__item{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--surface-2);aspect-ratio:4/3;}
.project-shots__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.project-shots__item:hover img{transform:scale(1.05);}
.project-shots:has(.project-shots__item:only-child){grid-template-columns:1fr;}
.project-shots:has(.project-shots__item:only-child) .project-shots__item{aspect-ratio:16/10;}
/* :nth-child(3) seul matche « au moins 3 » : avec 4 photos, la même règle
   s'appliquait à tort et laissait la 4e case vide en bas à droite (grille
   3x2 pour 4 éléments). :last-child restreint le traitement « 1 grande +
   2 empilées » au cas exact à 3 photos ; à 4, la grille 2x2 par défaut
   suffit et reste pleine. */
.project-shots:has(.project-shots__item:nth-child(3):last-child) .project-shots__item:first-child{grid-row:1 / 3;aspect-ratio:auto;}
@media (max-width:600px){
  .project-shots:has(.project-shots__item:nth-child(3):last-child) .project-shots__item:first-child{grid-row:auto;aspect-ratio:4/3;}
  .project-shots{grid-template-columns:1fr 1fr;}
}

/* Galerie de la fiche projet : le reste des photos (au-delà des 4 posées
   à côté de la fiche d'identité), pour les rares projets qui en ont plus. */
.project-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(.75rem,1.6vw,1.25rem);}
.project-gallery:has(.project-gallery__item:only-child){grid-template-columns:1fr;max-width:640px;}
.project-gallery--rest{margin-top:clamp(1.5rem,3vw,2.5rem);}
.project-gallery__item{
  margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  aspect-ratio:4/3;background:var(--surface-2);
}
.project-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease);}
.project-gallery__item:hover img{transform:scale(1.05);}
.prose{max-width:68ch;}
.prose h2{font-size:clamp(1.375rem,2.4vw,1.875rem);margin-top:var(--s-5);margin-bottom:var(--s-2);text-transform:none;}
.prose h2:first-child{margin-top:0;}
.prose p{color:var(--text-2);margin-bottom:var(--s-2);line-height:1.75;}
.prose ul,.prose ol{margin:0 0 var(--s-2);display:flex;flex-direction:column;gap:.6rem;}
.prose li{display:flex;gap:.7rem;color:var(--text-2);}
.prose li::before{
  content:'';width:14px;height:7px;flex:none;margin-top:.5em;background:var(--signal);
  clip-path:polygon(0 62%, 100% 0, 100% 38%, 0 100%);
}

/* ---- Formulaire ---- */
.form-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
@media (max-width:940px){.form-grid{grid-template-columns:1fr;}}
.field{margin-bottom:var(--s-3);}
.field label{display:block;font-size:var(--t-small);color:var(--text-2);margin-bottom:.5rem;}
.field label b{color:var(--signal);font-weight:600;}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r);
  padding:.9rem 1rem;font-size:.9375rem;color:var(--text);
  transition:border-color var(--d-fast);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--signal);}
.field textarea{resize:vertical;min-height:150px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);}
@media (max-width:620px){.field-row{grid-template-columns:1fr;}}
.form-consent{display:flex;gap:.75rem;align-items:flex-start;font-size:var(--t-small);color:var(--text-2);margin-bottom:var(--s-3);}
.form-consent input{width:18px;height:18px;flex:none;margin-top:.15rem;accent-color:var(--signal);}

.aside-card{
  padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-1);
}
.aside-card + .aside-card{margin-top:var(--s-3);}
.aside-card h2,.aside-card h3{font-size:1.125rem;text-transform:none;margin-bottom:var(--s-2);}
.contact-line{display:flex;align-items:center;gap:.75rem;padding-block:.6rem;font-size:.9375rem;}
.contact-line svg{width:16px;height:16px;flex:none;color:var(--signal);}
.contact-line:hover{color:var(--signal);}

/* ---- Blog ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);}
@media (max-width:960px){.posts{grid-template-columns:1fr 1fr;}}
@media (max-width:620px){.posts{grid-template-columns:1fr;}}
.post{
  display:flex;flex-direction:column;gap:var(--s-2);
  padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-1);transition:border-color var(--d),transform var(--d) var(--ease);
}
.post:hover{border-color:var(--line-signal);transform:translateY(-3px);}
.post__date{font-size:var(--t-kicker);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);}
.post h2,.post h3{font-size:1.125rem;text-transform:none;line-height:1.3;}
.post p{color:var(--text-2);font-size:.9375rem;flex:1;}

/* ---- Équipe & valeurs (page agence) ----
   La photo de la direction est déjà posée dans le hero juste au-dessus :
   cette section porte donc la citation en grande citation éditoriale,
   avec un guillemet géant en filigrane, plutôt qu'une seconde vignette
   qui ferait doublon avec le hero. */
.direction{position:relative;max-width:52rem;}
.direction__quote{
  position:relative;
  font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.6vw,2.75rem);line-height:1.3;
  max-width:28ch;
}
.direction__quote::before{
  content:'“';position:absolute;left:-.15em;top:-.4em;
  font-size:4em;line-height:1;color:var(--signal);opacity:.18;
  font-family:'Unbounded',sans-serif;z-index:-1;
}
.direction__signature{margin-top:var(--s-4);}
.team__role{color:var(--signal);font-size:.9375rem;font-weight:500;margin-top:.4rem;}
.direction__bio{margin-top:var(--s-3);max-width:60ch;}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);}
@media (max-width:760px){.values{grid-template-columns:1fr;}}
.value{padding-top:var(--s-3);border-top:2px solid var(--signal);}
.value h3{font-size:1.25rem;text-transform:none;}
.value p{margin-top:.75rem;color:var(--text-2);font-size:.9375rem;line-height:1.7;}

/* ---- Logos clients, mur en mosaïque (page clients) ----
   Colonnes de largeur égale, décalées verticalement par --arc (calculé en
   PHP selon la distance au centre). Purement statique — comme le mur
   photo de référence, aucun scroll ni marquee ne pilote la mise en page,
   c'est la mosaïque elle-même qui donne le rythme. */
.client-mur{overflow:hidden;padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,7vw,5rem);}
.client-mur__colonnes{display:flex;gap:clamp(.75rem,1.6vw,1.4rem);align-items:flex-start;}
.client-mur__colonne{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;gap:clamp(.75rem,1.6vw,1.4rem);
  margin-top:calc((var(--arc,1) - .7) * 2.4rem);
}

.logo-chip{
  width:100%;height:clamp(84px,9vw,116px);flex:none;
  /* flex, pas grid : en grid, une ligne implicite en auto ne donne jamais
     une hauteur "définie" à un enfant en pourcentage (piège classique de
     CSS Grid), donc height:100% sur l'image ne se résolvait pas — elle
     gardait son ratio naturel et débordait de la carte (Ace Padel Club,
     Blossom...). En flex, le pourcentage se résout sans ce problème. */
  display:flex;align-items:center;justify-content:center;padding:clamp(.85rem,1.8vw,1.5rem);
  background:var(--surface-1);
  border:1px solid var(--line);
  border-radius:var(--r);
  transition:background var(--d),border-color var(--d),transform var(--d);
}
.logo-chip img{
  width:100%;height:100%;object-fit:contain;
  opacity:.6;filter:grayscale(1) brightness(1.4);
  transition:opacity var(--d),filter var(--d);
}
.logo-chip:hover{background:var(--surface-2);border-color:var(--line-signal);transform:translateY(-3px);}
.logo-chip:hover img{opacity:1;filter:none;}

/* ---- 404 ---- */
.notfound{min-height:70svh;display:grid;place-items:center;text-align:center;}
.notfound .num{font-size:clamp(5rem,18vw,12rem);color:var(--signal);}

/* ==========================================================================
   20 — BANNIÈRE DE CONSENTEMENT
   « Refuser » et « Accepter » ont exactement le même poids visuel : c'est
   une exigence de la CNIL, pas une préférence esthétique.
   ========================================================================== */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:var(--gutter);
  display:flex;justify-content:center;
  pointer-events:none;
}
.consent[hidden]{display:none;}
.consent__boite{
  pointer-events:auto;
  width:100%;max-width:560px;
  background:var(--surface-1);
  border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(1.25rem,3vw,1.75rem);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:.85rem;
  animation:consent-entree var(--d-slow) var(--ease);
}
@keyframes consent-entree{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.consent__titre{font-size:1rem;letter-spacing:-.01em;}
.consent__texte{font-size:.9375rem;color:var(--text-2);line-height:1.55;}
.consent__texte a{color:var(--signal);text-underline-offset:3px;text-decoration:underline;}
.consent__actions{display:flex;gap:.6rem;flex-wrap:wrap;}
/* Les deux boutons occupent la même place, aucun n'est mis en retrait. */
.consent__actions .btn{flex:1 1 140px;justify-content:center;}
@media (prefers-reduced-motion:reduce){.consent__boite{animation:none;}}

/* Lien de révocation, discret mais permanent */
.footer-bottom [data-consent-rouvrir]{
  background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.footer-bottom [data-consent-rouvrir]:hover{color:var(--signal);}

/* ==========================================================================
   21 — CONFORT TACTILE
   Recette mobile : plusieurs liens et boutons descendaient sous 44 px,
   la taille minimale recommandée pour être touchés sans se tromper.
   ========================================================================== */

/* Le lien d'évitement doit redevenir visible et cliquable au clavier.
   Il restait à 1x1 pixel même une fois focalisé, donc inutilisable. */
.sr-only:focus,
.sr-only:focus-visible{
  position:fixed;top:.75rem;left:.75rem;
  width:auto;height:auto;z-index:300;
  clip:auto;overflow:visible;
  padding:.75rem 1.15rem;
  background:var(--signal);color:var(--noir);
  font-weight:600;border-radius:var(--r);
}

/* Le logo du haut de page ne faisait que 31 pixels de haut. */
.brand{min-height:44px;}

@media (max-width:760px){
  /* Boutons compacts : lisibles et atteignables au pouce */
  .btn--sm{min-height:44px;font-size:.75rem;padding-inline:1rem;}

  /* Liens du pied de page : ils se touchaient les uns les autres */
  .footer-col a{
    display:flex;align-items:center;min-height:44px;
    margin-bottom:0;
  }
  .footer-col address{padding-block:.5rem;}
  .footer-bottom{gap:.75rem var(--s-4);}
  .footer-bottom a,
  .footer-bottom [data-consent-rouvrir]{
    display:inline-flex;align-items:center;min-height:40px;
  }

  /* Lien « voir tout » des en-têtes de section */
  .sect-head__link{min-height:44px;}

  /* Fil d'Ariane et liens de relance dans le contenu */
  .breadcrumb a,
  .breadcrumb span{display:inline-flex;align-items:center;min-height:40px;}
  .link-line{min-height:44px;}

  /* Coordonnées de la page Contact */
  .contact-line{min-height:44px;}

  /* Safari sur iPhone zoome tout seul quand on touche un champ dont le
     texte fait moins de 16 px. Le formulaire devient alors désagréable :
     la page saute, il faut dézoomer à la main entre chaque champ. */
  .field input,
  .field select,
  .field textarea{font-size:16px;}
  .field input,
  .field select{min-height:48px;}

  /* La case à cocher du consentement était trop petite pour le pouce. */
  .form-consent{padding-block:.35rem;}
  .form-consent input{width:22px;height:22px;}

  /* Liens du tiroir de navigation : déjà grands, on garantit l'espacement */
  .drawer nav a{min-height:52px;display:flex;align-items:center;}
  .drawer__foot a{min-height:44px;display:inline-flex;align-items:center;}

  /* Filtres du portfolio */
  .filter{min-height:44px;display:inline-flex;align-items:center;}

  /* Le point médian entre deux liens du pied de page devenait illisible
     une fois les liens passés en blocs. */
  .footer-bottom span{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
}

/* Sur écran tactile sans survol, les commandes qui n'apparaissaient qu'au
   survol doivent être visibles en permanence. */
@media (hover:none){
  .exp__go{opacity:1;}
  .sect-head__link svg,
  .link-line svg{transform:none;}
}

/* ==========================================================================
   22 — PAGE AGENCE
   ========================================================================== */

/* Déclaration de positionnement, en pleine largeur.
   Le texte était enfermé dans une colonne de 669 px au milieu d'un écran
   de 1440 : deux marges noires inégales, et une page qui paraissait vide. */
.statement{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  padding-bottom:var(--s-4);border-bottom:1px solid var(--line);
}
.statement__titre{
  font-size:clamp(1.75rem,3.8vw,3rem);
  text-transform:none;letter-spacing:-.03em;line-height:1.06;
}
.statement__texte{
  color:var(--text-2);font-size:clamp(1rem,1.3vw,1.125rem);
  line-height:1.6;max-width:46ch;
}
@media (max-width:820px){
  .statement{grid-template-columns:1fr;align-items:start;}
}

/* Bande de trois visuels, bord à bord */
.bande-visuels{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  margin-block:0 var(--section-y);
}
/* Une fiche fraîchement créée a rarement trois visuels le premier jour.
   Plutôt que d'imposer ce nombre ou de laisser des cases vides dans la
   grille, la bande s'adapte à ce qui est réellement renseigné. */
.bande-visuels:has(.bande-visuels__item:only-child){grid-template-columns:1fr;}
.bande-visuels:has(.bande-visuels__item:nth-child(2):last-child){grid-template-columns:repeat(2,1fr);}
@media (max-width:760px){
  .bande-visuels{grid-template-columns:1fr;}
  .bande-visuels__item:nth-child(n+3){display:none;}
}
.bande-visuels__item{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;background:var(--surface-2);
}
.bande-visuels__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform var(--d-slow) var(--ease),filter var(--d);
  filter:saturate(.92);
}
.bande-visuels__item:hover img{transform:scale(1.04);filter:none;}
.bande-visuels__item span{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(1rem,2vw,1.5rem);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 72%);
  font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:clamp(.8125rem,1.2vw,1rem);text-transform:uppercase;letter-spacing:-.01em;
}

/* Dans la colonne de droite du split, le texte n'a plus besoin d'être
   bridé à 68ch : la colonne fait déjà la bonne largeur. */
.split .prose{max-width:none;}
.split .prose h2:first-child{margin-top:0;}

/* ==========================================================================
   23 — CORRECTIFS DE RECETTE
   ========================================================================== */

/* Les réponses de FAQ sont le contenu de la fiche : elles arrivent donc
   en paragraphes, pas en texte brut. */
.faq__reponse{padding-bottom:clamp(1.1rem,2.2vw,1.6rem);}
.faq__reponse p{color:var(--text-2);max-width:70ch;font-size:.9375rem;line-height:1.7;}
.faq__reponse p + p{margin-top:.75rem;}

/* La bande de chiffres flottait au milieu de deux sections très espacées :
   on la resserre et on lui donne un fond, pour qu'elle se lise comme un
   bloc et non comme un trou entre deux parties. */
.section--chiffres{padding-block:0;}
.kpis{
  background:var(--surface-1);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
}
.kpis .kpi{background:transparent;position:relative;}
.kpis .kpi + .kpi::before{
  content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line);
}
@media (max-width:760px){
  .kpis .kpi + .kpi::before{display:none;}
  .kpis .kpi:nth-child(n+2){border-top:1px solid var(--line);}
}

/* ------------------------------------------------------------------ */
/* Pages service                                                       */
/* ------------------------------------------------------------------ */

/* Texte d'introduction d'un service : un cran plus grand que le corps
   courant, parce que c'est souvent le seul paragraphe réellement lu. */
.prose--large{max-width:62ch;}
.prose--large p{font-size:clamp(1rem,1.5vw,1.125rem);color:var(--text-2);}
.prose--large p:first-child{color:var(--text);}

/* Prestation : un titre et son explication, dans une cellule de grille.
   La version précédente était une simple puce, qui laissait le visiteur
   deviner ce que « Direction artistique » recouvrait vraiment. */
.offre__item{display:flex;flex-direction:column;gap:.7rem;}
.offre__item h3{
  font-size:1.0625rem;text-transform:none;letter-spacing:-.01em;line-height:1.35;
  display:flex;gap:.75rem;align-items:center;
}
.offre__item p{
  font-size:var(--t-small);color:var(--text-2);line-height:1.6;
  padding-left:calc(44px + .75rem);
}

/* Bande de visuels : sur une page service elle suit immédiatement le
   titre, donc elle ne prend pas la marge haute qu'elle a ailleurs. */
.page-hero + .bande-visuels{margin-top:var(--s-5);}

@media (max-width:620px){
  .offre__item p{padding-left:0;}
}

/* Introduction d'un service : le texte garde sa largeur de lecture, la
   colonne de droite porte la relance plutôt que de rester vide. */
.svc-intro{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:clamp(2rem,4vw,4rem);align-items:start;
  margin-bottom:var(--s-5);
}
.svc-intro__relance{position:sticky;top:calc(var(--header-h,72px) + 1.5rem);}
.svc-intro__relance h3{font-size:1.125rem;text-transform:none;letter-spacing:-.01em;}
.svc-intro__relance p{margin:.6rem 0 var(--s-3);font-size:var(--t-small);line-height:1.6;}
.svc-intro__relance .contact-line{margin-top:var(--s-2);}

@media (max-width:900px){
  .svc-intro{grid-template-columns:1fr;}
  .svc-intro__relance{position:static;}
}

/* Intertitres tapés en gras plutôt qu'en vrai <h2>. C'est le format que
   produisent les outils de rédaction externes dont le contenu des fiches
   est collé : un paragraphe qui commence par un mot en gras, pas une
   vraie balise de titre. Plutôt que d'imposer un nouveau format de
   saisie, on donne à ce premier gras l'allure d'un intertitre. */
.prose > p > b:first-child{
  display:block;
  margin:var(--s-4) 0 .5rem;
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.375rem);
  color:var(--text);
}
.prose > p:first-child > b:first-child{margin-top:0;}