/* =========================================================
   NORTHARK STUDIO — v4
   Une seule police (Figtree). Aucun micro-libellé en capitales.
   Rouille #B4531B réservé aux petits titres de section.
   ========================================================= */

:root{
  --deep:      #071F26;
  --brand:     #082C35;
  --tide:      #2F7D8C;
  --night:     #050F14;   /* pied de page, quasi noir */

  --rust:      #B4531B;
  --rust-ink:  #8B3E14;   /* assombri : tient le 4.5:1 sur la photo du hero */

  --mist:      #E4EAEC;
  --porcelain: #F8FAFB;
  --halo:      #FFFFFF;

  --ink-2:     #3D565E;
  --ink-3:     #566F77;
  --on-dark:   #DCE6E9;

  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --gut:  clamp(20px, 4.5vw, 60px);
  --max:  1240px;
  --bay:  clamp(84px, 10vw, 156px);

  --ease: cubic-bezier(.32,.72,0,1);
  --t-in: 820ms var(--ease);
  --t-ui: 420ms var(--ease);

  --r-out: 30px;
  --r-in:  22px;

  --lift:
    0 1px 2px rgba(7,31,38,.035),
    0 10px 26px -14px rgba(7,31,38,.10),
    0 38px 72px -38px rgba(7,31,38,.16);
  --lift-hi:
    0 2px 4px rgba(7,31,38,.05),
    0 18px 40px -18px rgba(7,31,38,.16),
    0 54px 96px -44px rgba(7,31,38,.22);

  --glow: 0 0 0 1px rgba(47,125,140,.28), 0 10px 34px -8px rgba(47,125,140,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:
    radial-gradient(100% 62% at 8% 2%, rgba(255,255,255,.9), transparent 56%),
    var(--mist);
  background-attachment:fixed;
  color:var(--deep);
  font-family:var(--sans);
  font-size:clamp(16px,.42vw + 14.9px,17.2px);
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
h1,h2,h3,p,blockquote,figure{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
dl,dd{ margin:0; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--brand); color:var(--halo); }
:focus-visible{ outline:2px solid var(--tide); outline-offset:3px; border-radius:6px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:80;
  background:var(--brand); color:var(--halo);
  padding:14px 22px; border-radius:0 0 14px 0; text-decoration:none;
}
.skip:focus{ left:0; top:0; }

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.026;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.shell-wide{ width:calc(100% - var(--gut) * 2); max-width:var(--max); margin-inline:auto; }

/* ---------- petit titre de section : seul porteur du rouille ---------- */
.eyebrow{
  display:block; font-size:14.5px; font-weight:600;
  letter-spacing:-.005em; color:var(--rust-ink);
  margin-bottom:clamp(14px,1.8vw,20px);
}
.eyebrow--light{ color:#E5A67C; }

.hero__title{
  font-weight:700; font-size:clamp(2.4rem,5.4vw,4.5rem);
  line-height:1.03; letter-spacing:-.037em; max-width:16ch;
}
.h2{
  font-weight:700; font-size:clamp(1.85rem,3.4vw,2.8rem);
  line-height:1.07; letter-spacing:-.026em; max-width:20ch;
}

/* =========================================================
   NAV
   ========================================================= */
.island{
  /* fixed, pas sticky : en sticky elle occupait une ligne dans le flux
     et repoussait le hero vers le bas, laissant voir une bande de fond
     de page en haut. Hors du flux, l'image démarre à zéro. */
  position:fixed; top:clamp(12px,2vw,22px); left:50%;
  transform:translateX(-50%);
  z-index:40;
  width:max-content; max-width:calc(100% - var(--gut) * 2);
  display:flex; align-items:center; gap:clamp(28px,5vw,64px);
  padding:9px 9px 9px 26px; border-radius:999px;
  background:rgba(248,250,251,.76);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 0 0 1.5px rgba(7,31,38,.05),
    var(--lift);
}
.island__brand{ display:block; line-height:0; }
.island__brand img{ width:clamp(96px,9vw,116px); }
@media (max-width:520px){ .island{ gap:18px; padding-left:20px; } }

/* =========================================================
   BOUTONS
   ========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:14px;
  font-weight:600; text-decoration:none; border-radius:999px;
  background:var(--brand); color:var(--halo);
  padding:7px 7px 7px 20px; min-height:44px; border:0; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--lift);
  transition:transform var(--t-ui), background-color var(--t-ui), box-shadow var(--t-ui);
}
.pill span:first-child{ font-size:14.5px; letter-spacing:-.01em; }
.pill__ico{
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.15);
  display:grid; place-items:center; flex:0 0 auto;
  transition:transform var(--t-ui), background-color var(--t-ui);
}
.pill:hover{ transform:translateY(-2px); background:var(--deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), var(--glow); }
.pill:hover .pill__ico{ transform:translate(2px,-2px) scale(1.06); background:rgba(47,125,140,.5); }
.pill:active{ transform:scale(.985); }
.pill--lg{ padding:9px 9px 9px 26px; min-height:52px; }
.pill--lg span:first-child{ font-size:15.5px; }
.pill--lg .pill__ico{ width:36px; height:36px; }
.pill--sm{ padding:5px 5px 5px 16px; min-height:38px; }
.pill--sm span:first-child{ font-size:13.5px; }
.pill--sm .pill__ico{ width:28px; height:28px; }
.pill--light{ background:var(--halo); color:var(--brand); }
.pill--light .pill__ico{ background:rgba(7,31,38,.08); }
.pill--light:hover{ background:var(--halo); color:var(--brand); }
.pill--light:hover .pill__ico{ background:rgba(47,125,140,.2); }

/* =========================================================
   DOUBLE LISERÉ
   ========================================================= */
.bezel{
  background:rgba(255,255,255,.5);
  padding:7px; border-radius:var(--r-out);
  box-shadow:inset 0 0 0 1px rgba(7,31,38,.06), var(--lift);
  transition:transform var(--t-ui), box-shadow var(--t-ui);
}
.core{
  background:var(--porcelain); border-radius:var(--r-in);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(7,31,38,.05);
  height:100%;
}
.bezel--dark{ background:rgba(7,31,38,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), var(--lift); }
.bezel--dark .core{
  background:var(--brand);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.07);
}
.lift:hover{ transform:translateY(-5px); box-shadow:inset 0 0 0 1px rgba(7,31,38,.07), var(--lift-hi); }

/* =========================================================
   1. HERO — voile allégé
   ========================================================= */
.hero{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 78svh, 860px);
  display:flex; align-items:center;
  padding-top:clamp(80px,11vw,150px);
  padding-bottom:clamp(70px,9vw,130px);
}
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 64%; }
.hero__filter{
  position:absolute; inset:0;
  /* Tenu sur la bande de gauche où se pose le texte, puis chute
     rapide : la ville est bien plus présente sans que le titre
     perde son contraste. */
  background:
    linear-gradient(to right,
      rgba(228,234,236,.90) 0%,
      rgba(228,234,236,.86) 40%,
      rgba(228,234,236,.38) 62%,
      rgba(228,234,236,.14) 82%,
      rgba(228,234,236,.04) 100%),
    linear-gradient(to bottom,
      rgba(228,234,236,.04) 0%,
      rgba(228,234,236,.02) 26%,
      rgba(228,234,236,.06) 62%,
      rgba(228,234,236,.95) 100%);
}
@media (max-width:760px){
  .hero__filter{
    background:linear-gradient(to bottom,
      rgba(228,234,236,.86) 0%,
      rgba(228,234,236,.66) 32%,
      rgba(228,234,236,.74) 66%,
      rgba(228,234,236,.97) 100%);
  }
}
.hero__grid{ display:grid; }
.hero__sub{
  max-width:48ch; color:var(--ink-2);
  font-size:clamp(1.02rem,.5vw + .92rem,1.16rem);
  margin-top:clamp(20px,2.6vw,28px);
}
.hero__cta{ margin-top:clamp(26px,3.2vw,36px); }

/* =========================================================
   BANDES
   ========================================================= */
.band{ padding-block:0 var(--bay); }
.band--tight,.band--last{ padding-bottom:var(--bay); }

/* =========================================================
   2. APPAREILS — bureau + téléphone en débord
   ========================================================= */
/* --- deux colonnes : argumentaire à gauche, appareils à droite --- */
.showcase{ display:grid; gap:clamp(34px,4.5vw,60px); align-items:center; }
@media (min-width:1000px){
  .showcase{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); }
}
.showcase__lead{ margin-top:clamp(16px,2vw,22px); color:var(--ink-2); max-width:44ch; }
.showcase__marks{ display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(22px,2.8vw,30px); }
.showcase__marks li{
  /* posé sur le fond de page, pas sur une carte : --ink-3 n'y tient
     que 4.39:1. Valeur assombrie, mesurée à 5.01:1. */
  font-size:13.5px; font-weight:500; color:#4E666E;
  padding:8px 15px; border-radius:999px;
  background:rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 1px rgba(7,31,38,.07);
}

.showcase__stage{ position:relative; }
.device__desk{ margin:0; }
.device__core{ overflow:hidden; padding:0; }

.chrome{
  display:flex; align-items:center; gap:12px; padding:11px 15px;
  background:rgba(228,234,236,.7);
  box-shadow:inset 0 -1px 0 rgba(7,31,38,.06);
}
.chrome__dots{ display:inline-flex; gap:5px; flex:0 0 auto; }
.chrome__dots i{ width:8px; height:8px; border-radius:50%; background:rgba(7,31,38,.14); }
.chrome__url{
  font-size:12px; color:var(--ink-2);
  background:rgba(255,255,255,.8); padding:5px 12px; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(7,31,38,.05);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- la fenêtre qui rogne, et l'image qui défile dedans --- */
.screen{ overflow:hidden; background:var(--halo); }
.screen img{ width:100%; height:auto; display:block; }
.screen--desk{ aspect-ratio:16 / 10; }
.screen--phone{ aspect-ratio:9 / 19; border-radius:24px; }

/* Course calculée sur la hauteur propre de chaque capture :
   66.67% pour le bureau, 65.69% pour le téléphone. Les deux durées
   sont premières entre elles, donc les vues ne se recalent jamais. */
.js .screen--desk .scroller{ animation:panDesk 38s cubic-bezier(.44,0,.56,1) infinite alternate; }
.js .screen--phone .scroller{ animation:panPhone 29s cubic-bezier(.44,0,.56,1) infinite alternate; }
@keyframes panDesk{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-66.67%,0); } }
@keyframes panPhone{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(0,-65.69%,0); } }
.showcase__stage:hover .scroller{ animation-play-state:paused; }

.phone{ display:none; }
@media (min-width:640px){
  .phone{
    display:block; position:absolute;
    right:-10px; bottom:-30px;
    width:clamp(126px,12vw,166px);
    filter:drop-shadow(0 26px 48px rgba(7,31,38,.28));
  }
}
.phone__frame{
  position:relative; border-radius:30px;
  background:linear-gradient(160deg,#16323B,#071F26);
  padding:7px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.phone__notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:38%; height:14px; border-radius:99px; background:#071F26; z-index:2;
}

/* =========================================================
   3. THE SWAP
   ========================================================= */
.swap__title{ margin-bottom:0; }
.swap{ display:grid; gap:clamp(16px,2vw,22px); margin-top:clamp(30px,4vw,50px); align-items:stretch; }
@media (min-width:920px){ .swap{ grid-template-columns:1fr auto 1fr; align-items:center; } }
.swap__card{ margin:0; }
.swap__core{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; gap:clamp(14px,1.8vw,20px); }
.swap__label{ font-size:14.5px; font-weight:600; color:var(--ink-3); }
.swap__text{ color:var(--ink-2); max-width:44ch; }
.swap__core--dark .swap__label{ color:#9FB8BF; }
.swap__core--dark .swap__text{ color:var(--on-dark); }
.swap__beats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:clamp(10px,1.4vw,16px); }
.swap__beats li{
  font-size:13.5px; font-weight:500; color:var(--ink-3);
  padding:7px 14px; border-radius:999px;
  background:rgba(7,31,38,.045); box-shadow:inset 0 0 0 1px rgba(7,31,38,.07);
}
.swap__beats--dark li{ color:var(--on-dark); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.swap__pivot{
  display:grid; place-items:center;
  width:46px; height:46px; margin-inline:auto;
  border-radius:50%; color:var(--rust); background:var(--halo);
  box-shadow:inset 0 0 0 1px rgba(180,83,27,.24), var(--lift);
}

/* =========================================================
   4. HOW IT WORKS — onglets qui s'enchaînent
   ========================================================= */
.auto{ display:grid; gap:clamp(20px,2.6vw,32px); margin-top:clamp(30px,4vw,48px); }
@media (min-width:940px){ .auto{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start; } }
.auto__side{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.auto__list{ display:flex; flex-direction:column; width:100%; }

.auto__tab{
  position:relative; width:100%; text-align:left;
  display:grid; grid-template-columns:auto 1fr; column-gap:14px;
  align-items:baseline;
  background:none; border:0; cursor:pointer;
  padding:clamp(15px,1.8vw,19px) 2px calc(clamp(15px,1.8vw,19px) + 4px);
  border-top:1px solid rgba(7,31,38,.1);
  transition:color var(--t-ui);
}
.auto__list .auto__tab:last-of-type{ border-bottom:1px solid rgba(7,31,38,.1); }
.auto__num{ font-size:14px; font-weight:700; color:#4E666E; transition:color var(--t-ui); }
.auto__name{ font-size:clamp(1.02rem,1.3vw,1.16rem); font-weight:600; letter-spacing:-.015em; color:var(--ink-2); transition:color var(--t-ui); }
.auto__tab:hover .auto__name,
.auto__tab.is-on .auto__name{ color:var(--deep); }
.auto__tab.is-on .auto__num{ color:var(--rust-ink); }

.auto__prog{
  position:absolute; left:0; right:0; bottom:0;
  height:2px; background:rgba(7,31,38,.1); overflow:hidden;
}
.auto__prog i{ display:block; height:100%; width:100%; background:var(--rust); transform:scaleX(0); transform-origin:left center; }
.js .auto__tab.is-on .auto__prog i{ animation:fill 6200ms linear forwards; }
@keyframes fill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

.js .auto:hover .auto__tab.is-on .auto__prog i,
.js .auto:focus-within .auto__tab.is-on .auto__prog i,
.js .auto.is-paused .auto__tab.is-on .auto__prog i{ animation-play-state:paused; }

.auto__pause{
  font-size:13.5px; font-weight:600; color:var(--ink-2);
  background:rgba(255,255,255,.6); border:0; cursor:pointer;
  padding:8px 16px; border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(7,31,38,.08);
  transition:color var(--t-ui), box-shadow var(--t-ui);
}
.auto__pause:hover{ color:var(--deep); box-shadow:inset 0 0 0 1px rgba(7,31,38,.2); }

.auto__stage{ margin:0; }
.auto__view{
  position:relative; overflow:hidden;
  padding:clamp(30px,3.6vw,48px);
  min-height:clamp(210px,22vw,270px);
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:clamp(14px,1.8vw,20px);
}
/* Sans JavaScript les trois panneaux restent empilés et lisibles ;
   c'est aussi ce que voit un robot qui n'exécute pas le script. */
.js .auto__panel:not(.is-on){ display:none; }
.auto__big{
  position:absolute; right:clamp(18px,2.4vw,34px); top:clamp(4px,1vw,12px);
  font-size:clamp(5rem,10vw,8.5rem); font-weight:800;
  letter-spacing:-.05em; line-height:1;
  color:rgba(7,31,38,.05); pointer-events:none;
}
.auto__panel p{
  font-size:clamp(1.1rem,1.8vw,1.45rem);
  line-height:1.42; letter-spacing:-.018em;
  max-width:34ch; color:var(--deep); position:relative;
}
.js .auto__panel.is-on{ animation:panelIn 520ms var(--ease) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* =========================================================
   BANDE BLEUE PLEINE LARGEUR
   Casse le gris uni du défilement, au tiers de la page.
   ========================================================= */
.band--dark{
  background:var(--brand);
  color:var(--on-dark);
  padding-block:clamp(64px,8vw,120px);
  margin-bottom:var(--bay);
}
.band--dark .eyebrow{ color:#E5A67C; }
.band--dark .h2{ color:var(--halo); }

.band--dark .auto__tab{ border-top-color:rgba(255,255,255,.16); }
.band--dark .auto__list .auto__tab:last-of-type{ border-bottom-color:rgba(255,255,255,.16); }
.band--dark .auto__num{ color:#9FB8BF; }
.band--dark .auto__name{ color:var(--on-dark); }
.band--dark .auto__tab:hover .auto__name,
.band--dark .auto__tab.is-on .auto__name{ color:var(--halo); }
.band--dark .auto__tab.is-on .auto__num{ color:#E5A67C; }
.band--dark .auto__prog{ background:rgba(255,255,255,.14); }
/* le rouille plein tombe à 2.95:1 sur le bleu : version éclaircie */
.band--dark .auto__prog i{ background:#E5A67C; }

.band--dark .auto__pause{
  color:var(--on-dark);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.band--dark .auto__pause:hover{ color:var(--halo); box-shadow:inset 0 0 0 1px rgba(255,255,255,.34); }

.band--dark .bezel{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 64px -32px rgba(0,0,0,.55);
}
.band--dark .core{
  background:#0B3742;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06);
}
.band--dark .auto__big{ color:rgba(255,255,255,.07); }
.band--dark .auto__panel p{ color:var(--halo); }
.band--dark :focus-visible{ outline-color:#7FC4D4; }

/* =========================================================
   5. BENTO
   ========================================================= */
.bento{
  max-width:var(--max); width:calc(100% - var(--gut) * 2);
  margin:clamp(28px,3.6vw,48px) auto 0;
  display:grid; gap:clamp(14px,1.6vw,20px); grid-template-columns:1fr;
}
@media (min-width:900px){
  .bento--offer{ grid-template-columns:repeat(6,1fr); }
  .bento--offer > .bezel--tall{ grid-column:span 3; grid-row:span 2; }
  .bento--offer > .bezel--dark{ grid-column:span 3; }
  .bento--offer > .bezel:nth-child(n+3){ grid-column:span 1; }
}
.tile{ padding:clamp(24px,2.8vw,34px); display:flex; flex-direction:column; gap:10px; }
.tile__title{ font-weight:700; font-size:clamp(1.16rem,1.6vw,1.35rem); letter-spacing:-.018em; }
.tile p{ color:var(--ink-2); max-width:38ch; }
.tile__kicker{ font-size:14.5px; font-weight:600; color:var(--ink-2); margin-bottom:clamp(14px,1.8vw,20px); }
.tile--dark{ color:var(--on-dark); }
.tile--dark .tile__kicker{ color:rgba(220,230,233,.8); }

.ticks{ display:grid; gap:clamp(13px,1.6vw,17px); }
.ticks li{
  position:relative; padding-left:26px; color:var(--deep);
  font-size:clamp(.98rem,.36vw + .9rem,1.05rem); line-height:1.5;
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:11px; height:7px;
  border-left:1.7px solid var(--tide); border-bottom:1.7px solid var(--tide);
  transform:rotate(-45deg);
}
.ticks--none li{ color:var(--on-dark); }
.ticks--none li::before{ border:0; width:11px; height:1.7px; background:rgba(220,230,233,.55); transform:none; top:.72em; }

.tile--stat{ justify-content:flex-end; gap:4px; min-height:clamp(130px,14vw,176px); }
.stat__val{ font-weight:700; font-size:clamp(2.1rem,3.4vw,2.9rem); letter-spacing:-.027em; line-height:1; }
.stat__lab{ color:var(--ink-2); font-size:14.5px; }

/* =========================================================
   6. WHO
   ========================================================= */
.who__lead{
  margin-top:clamp(16px,2vw,22px);
  font-weight:500; font-size:clamp(1.12rem,.8vw + .95rem,1.42rem);
  line-height:1.35; letter-spacing:-.014em; max-width:42ch;
}
.who__note{ margin-top:clamp(20px,2.6vw,30px); color:var(--ink-2); max-width:44ch; }

/* =========================================================
   7. BANDE DE MÉTIERS
   ========================================================= */
.strip{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.strip__track{ display:flex; width:max-content; gap:clamp(14px,1.6vw,20px); }
.strip__row{ display:flex; gap:clamp(14px,1.6vw,20px); flex:0 0 auto; }
.strip__row li{ flex:0 0 auto; }
.strip__row img{
  width:clamp(178px,21vw,258px);
  aspect-ratio:6 / 7; object-fit:cover; border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(7,31,38,.06), var(--lift);
  filter:saturate(.88) contrast(1.02);
  transition:filter var(--t-ui);
}
.strip:hover .strip__row img{ filter:saturate(1) contrast(1.02); }
.js .strip__track{ animation:slide 46s linear infinite; }
@keyframes slide{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(calc(-50% - clamp(7px,.8vw,10px)),0,0); } }
.strip:hover .strip__track{ animation-play-state:paused; }

/* =========================================================
   8. MOT DU FONDATEUR — blanc, pleine largeur
   ========================================================= */
.word-band{
  background:var(--halo);
  padding-block:clamp(56px,7vw,104px);
  margin-bottom:var(--bay);
  box-shadow:inset 0 1px 0 rgba(7,31,38,.06), inset 0 -1px 0 rgba(7,31,38,.06);
}
.word{ display:grid; gap:clamp(20px,2.6vw,30px); align-items:center; max-width:860px; margin-inline:auto; }
@media (min-width:640px){
  .word{ grid-template-columns:auto minmax(0,1fr); column-gap:clamp(26px,3.4vw,44px); }
  .word__by{ grid-column:2; margin-top:-6px; }
}
.word__photo{
  width:clamp(132px,14vw,168px); height:clamp(132px,14vw,168px);
  border-radius:50%; object-fit:cover; object-position:50% 42%;
  box-shadow:0 0 0 7px rgba(228,234,236,.9), var(--lift);
}
.word__quote p{ font-size:clamp(1.14rem,1.9vw,1.44rem); line-height:1.44; letter-spacing:-.02em; color:var(--deep); }
.word__by{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; font-size:14.5px; }
.word__name{ font-weight:700; }
.word__role{ color:var(--ink-2); }

/* =========================================================
   9. FAQ + CONTACT, deux colonnes
   ========================================================= */
.duo{ display:grid; gap:clamp(30px,4vw,52px); align-items:start; }
@media (min-width:1000px){
  .duo{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  .duo__col--contact{ position:sticky; top:clamp(88px,11vh,120px); }
}

.faq{ margin-top:clamp(22px,2.6vw,32px); }
.qa{ border-top:1px solid rgba(7,31,38,.1); }
.qa:last-child{ border-bottom:1px solid rgba(7,31,38,.1); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(16px,2vw,21px) 2px;
  font-weight:600; font-size:clamp(1rem,1.2vw,1.1rem); letter-spacing:-.012em;
  transition:color var(--t-ui);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--tide); }
.qa summary i{ position:relative; width:15px; height:15px; flex:0 0 auto; }
.qa summary i::before,.qa summary i::after{
  content:""; position:absolute; left:0; top:7px;
  width:15px; height:1.6px; background:var(--ink-2);
  transition:transform var(--t-ui);
}
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0deg); }
.qa__body{ padding:0 2px clamp(18px,2.2vw,24px); max-width:52ch; color:var(--ink-2); }
.js .qa[open] .qa__body{ animation:qaIn 460ms var(--ease) both; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

.contact{
  padding:clamp(34px,4vw,52px) clamp(26px,3vw,44px);
  display:flex; flex-direction:column; align-items:flex-start; color:var(--on-dark);
}
.contact__title{
  font-weight:700; font-size:clamp(1.9rem,3.2vw,2.6rem);
  letter-spacing:-.031em; line-height:1.04; color:var(--halo); margin-bottom:10px;
}
.contact__lead{ margin-bottom:clamp(16px,2vw,22px); }
.contact__mail{
  font-weight:600; font-size:clamp(1.02rem,1.8vw,1.32rem); letter-spacing:-.02em;
  color:var(--halo); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32); padding-bottom:5px;
  margin-bottom:clamp(24px,2.8vw,32px);
  overflow-wrap:anywhere;
  transition:border-color var(--t-ui);
}
.contact__mail:hover{ border-color:var(--halo); }

/* =========================================================
   PIED DE PAGE — quasi noir
   ========================================================= */
.foot{ background:var(--night); color:#8DA2AA; padding-bottom:clamp(24px,3vw,34px); }
.foot__grid{ display:grid; gap:clamp(30px,4vw,56px); padding-top:clamp(46px,5.5vw,72px); }
@media (min-width:760px){ .foot__grid{ grid-template-columns:1fr auto; align-items:start; } }
.foot__brand img{ width:112px; margin-bottom:16px; }
.foot__brand p{ color:#8DA2AA; max-width:34ch; margin-bottom:10px; font-size:15px; }
.foot__brand a{
  color:var(--halo); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:2px; font-size:15px;
  transition:border-color var(--t-ui);
}
.foot__brand a:hover{ border-color:var(--halo); }

/* LegalNotice : invisible tant qu'il est vide, apparaît une fois rempli */
.legal-notice{ display:none; }
.legal-notice:has(dd:not(:empty)){ display:block; }
.legal-notice__title{ font-size:14.5px; font-weight:600; color:#8DA2AA; margin:0 0 12px; }
.legal-notice__list{ font-size:14.5px; }
.legal-notice__list dt{ color:#8DA2AA; font-size:13.5px; }
.legal-notice__list dd{ color:var(--halo); margin-bottom:10px; }

.foot__base{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap;
  margin-top:clamp(30px,3.6vw,46px); padding-top:clamp(18px,2.2vw,24px);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13.5px; color:#8DA2AA;
}
.foot__base a{ color:#8DA2AA; text-decoration:none; border-bottom:1px solid transparent; }
.foot__base a:hover{ color:var(--halo); border-color:var(--halo); }
.foot :focus-visible{ outline-color:#7FC4D4; }

/* =========================================================
   MOUVEMENT
   ========================================================= */
.js [data-reveal]{
  opacity:0; transform:translateY(34px); filter:blur(8px);
  transition:opacity var(--t-in), transform var(--t-in), filter var(--t-in);
}
.js [data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }
.js .bento > .bezel[data-reveal]{ transition-delay:calc(var(--i,0) * 80ms); }
.js .swap > .bezel--dark[data-reveal]{ transition-delay:140ms; }

.js [data-seq]{
  opacity:0; transform:translateY(26px); filter:blur(7px);
  animation:seqIn 900ms var(--ease) forwards;
}
.js [data-seq="1"]{ animation-delay:120ms; }
.js [data-seq="2"]{ animation-delay:220ms; }
.js [data-seq="3"]{ animation-delay:360ms; }
.js [data-seq="4"]{ animation-delay:470ms; }
@keyframes seqIn{ to{ opacity:1; transform:none; filter:blur(0); } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .js .device__desk{
      animation:easeUp linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 42%;
    }
    @keyframes easeUp{ from{ transform:translateY(26px) scale(.985); } to{ transform:none; } }
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal],.js [data-seq]{ opacity:1 !important; transform:none !important; filter:none !important; }
  .js .strip__track{ animation:none; }
  .js .scroller{ animation:none !important; }
  .strip{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  /* Sans animation la barre ne se remplit plus : pas d'enchaînement
     automatique, les onglets restent pilotés à la main. */
  .js .auto__tab.is-on .auto__prog i{ animation:none; transform:scaleX(1); }
  .auto__pause{ display:none; }
  .island{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--porcelain); }
}