/* Police Inter, servie depuis le site (licence SIL OFL 1.1, voir assets/fonts/LICENCE.txt).
   Aucune requête vers Google Fonts : rien n'est transmis à un tiers. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =========================================================================
   AGENTIVIA — Feuille de style
   Identité : argent poli, blanc, gris. Sections graphite pour le contraste.
   Mouvement : soigné et orchestré, jamais gratuit.
   ========================================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Clairs — la base du site */
  --white:#FFFFFF;
  --paper:#F6F7F9;      /* fond de page */
  --mist:#EDEFF3;       /* section alternée */
  --cloud:#E3E6EB;      /* surface enfoncée */

  /* Graphites — texte et sections sombres */
  --graphite-900:#0E1014;
  --graphite-800:#171A20;
  --graphite-700:#242832;
  --graphite-600:#363B47;

  /* Argent */
  --silver-100:#FFFFFF;
  --silver-200:#E7EAEF;
  --silver-300:#C8CED7;
  --silver-400:#A1A9B6;
  --silver-500:#79818F;
  --silver-600:#555D6B;

  /* Texte sur fond clair */
  --text:#14171D;
  --text-muted:#565E6C;
  --text-dim:#828A98;

  /* Lignes */
  --line:#DBDFE6;
  --line-soft:#E6E9EE;
  --line-strong:#C6CCD6;

  /* Chrome sur fond CLAIR : stops sombres, sinon le texte disparaît */
  --metal:linear-gradient(100deg,
    #2E3440 0%, #8D95A2 20%, #3C424E 38%,
    #9BA3B0 56%, #2E3440 76%, #7A828F 92%, #434A56 100%);
  /* Chrome sur fond SOMBRE : stops clairs */
  --metal-bright:linear-gradient(100deg,
    #FFFFFF 0%, #C9CED6 22%, #FFFFFF 44%,
    #AEB5C0 68%, #ECEEF1 88%, #FFFFFF 100%);
  /* Plaque métal pour les surfaces et boutons */
  --metal-plate:linear-gradient(145deg,#FDFDFE 0%,#E4E8EE 38%,#F5F7F9 62%,#D9DEE6 100%);
  --metal-line:linear-gradient(90deg,transparent,var(--silver-400) 18%,var(--silver-300) 50%,var(--silver-400) 82%,transparent);

  /* Ombres — douces, jamais dures sur fond clair */
  --sh-sm:0 1px 2px rgba(20,23,29,.05), 0 2px 8px -4px rgba(20,23,29,.08);
  --sh-md:0 2px 6px rgba(20,23,29,.05), 0 12px 28px -12px rgba(20,23,29,.16);
  --sh-lg:0 4px 12px rgba(20,23,29,.06), 0 28px 60px -22px rgba(20,23,29,.26);

  /* Rayons */
  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* Espacement */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Courbes et durées */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t-mid:280ms; --t-slow:560ms; --t-xslow:900ms;

  --wrap:1200px;
  --gutter:clamp(20px,5vw,64px);
  --header-h:72px;
}

/* Sections graphite : on redéfinit les tokens dans la portée de la section,
   tout le reste du CSS suit sans une seule règle supplémentaire. */
.section--dark{
  --white:var(--graphite-800);
  --paper:var(--graphite-900);
  --mist:var(--graphite-800);
  --cloud:var(--graphite-700);
  --text:#F4F5F7;
  --text-muted:#A7AEBB;
  --text-dim:#848C9A;
  --line:#2B303B;
  --line-soft:#232832;
  --line-strong:#3A4049;
  --metal:var(--metal-bright);
  --metal-plate:linear-gradient(145deg,#F7F8FA 0%,#C9CED6 40%,#EDEFF2 62%,#B6BCC5 100%);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 10px 30px -14px rgba(0,0,0,.7);
  --sh-lg:0 30px 70px -30px rgba(0,0,0,.85);
  background:var(--graphite-900);
  color:var(--text);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-text-size-adjust:100%;
}
body{
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.6;
  color:var(--text);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:'cv11','ss01';
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--graphite-800);color:#fff}

:focus-visible{outline:2px solid var(--graphite-700);outline-offset:3px;border-radius:4px}
.section--dark :focus-visible{outline-color:var(--silver-200)}

.skip-link{
  position:absolute;top:-100px;left:var(--s-4);z-index:3000;
  background:var(--graphite-900);color:#fff;
  padding:12px 20px;border-radius:var(--r-sm);font-weight:600;
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:var(--s-4)}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 3. UTILITAIRES ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,10vw,var(--s-10));position:relative}
.section--alt{background:var(--mist)}

.metal-text{
  background:var(--metal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .metal-text{color:var(--silver-600);-webkit-text-fill-color:currentColor}
  .section--dark .metal-text{color:var(--silver-200)}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);
}
.eyebrow::before{content:'';width:28px;height:1px;background:var(--metal-line);flex:none}
/* Section numérotée : le numéro prend la place du filet, séparé par un trait.
   C'est un repère de document, pas un ornement. */
.eyebrow[data-no]::before{
  content:attr(data-no);
  width:auto;height:auto;background:none;
  font-variant-numeric:tabular-nums;color:var(--text-dim);
  padding-right:12px;margin-right:2px;
  border-right:1px solid var(--line);
}

.section-head{max-width:720px;margin-bottom:clamp(40px,6vw,var(--s-8))}
.section-head h2{
  margin-top:var(--s-4);
  font-size:clamp(1.9rem,4.2vw,3.1rem);
  line-height:1.1;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance;
}
.section-head p{
  margin-top:var(--s-4);
  font-size:clamp(1rem,1.6vw,1.125rem);
  color:var(--text-muted);max-width:62ch;text-wrap:pretty;
}

/* ---------- 4. BOUTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:14px 28px;border-radius:var(--r-pill);
  font-size:.95rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;position:relative;isolation:isolate;overflow:hidden;
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             background-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease);
  white-space:nowrap;
}
.btn svg{width:17px;height:17px;flex:none;transition:transform var(--t-mid) var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* Principal : graphite, le plus contrasté donc le plus cliqué */
.btn--primary{
  color:#fff;background:var(--graphite-900);
  border:1px solid var(--graphite-900);
  box-shadow:var(--sh-md);
}
/* Reflet qui balaie le bouton au survol */
.btn--primary::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform var(--t-slow) var(--ease);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.btn--primary:hover::after{transform:translateX(120%)}
.section--dark .btn--primary{
  color:var(--graphite-900);background:var(--metal-plate);
  border-color:var(--silver-200);
}

/* Argent brossé */
.btn--metal{
  color:var(--graphite-900);
  background:var(--metal-plate);
  border:1px solid var(--line-strong);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, var(--sh-sm);
}
.btn--metal:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,1) inset, var(--sh-md)}

/* Contour */
.btn--ghost{color:var(--text);background:transparent;border:1px solid var(--line-strong)}
.btn--ghost:hover{border-color:var(--graphite-600);background:rgba(20,23,29,.035);transform:translateY(-2px)}
.section--dark .btn--ghost:hover{background:rgba(255,255,255,.06)}

.btn--sm{min-height:42px;padding:10px 20px;font-size:.875rem}
.btn--full{width:100%}
.btn:active{transform:translateY(0)}

/* ---------- 5. PRÉCHARGEUR ---------- */
/* Le rideau n'existe que si le script d'amorçage a posé la classe « js ».
   Sans JavaScript, il n'est jamais affiché et la page est utilisable. */
#loader{display:none}
html.js #loader{
  position:fixed;inset:0;z-index:2000;
  background:var(--graphite-900);
  display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
#loader.is-done{transform:translateY(-101%)}
.loader__inner{text-align:center;position:relative}
.loader__word{display:flex;justify-content:center;overflow:hidden;padding-block:4px}
.loader__word span{
  display:inline-block;
  font-size:clamp(2rem,6.5vw,4.6rem);font-weight:700;letter-spacing:.16em;
  background:var(--metal-bright);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  transform:translateY(115%);
  animation:loaderRise .85s var(--ease-out) forwards;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .loader__word span{color:#E7EAEF;-webkit-text-fill-color:currentColor}
}
@keyframes loaderRise{to{transform:translateY(0)}}
.loader__sub{overflow:hidden;margin-top:14px}
.loader__sub span{
  display:block;
  font-size:clamp(.6rem,1.2vw,.8rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--silver-500);font-weight:500;
  transform:translateY(110%);
  animation:loaderRise .8s var(--ease-out) .62s forwards;
}
.loader__bar{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--metal-bright);
}
.loader__count{
  position:absolute;right:clamp(20px,5vw,56px);bottom:clamp(20px,4vw,40px);
  font-size:.95rem;font-weight:600;color:var(--silver-500);
  font-variant-numeric:tabular-nums;
}
/* Tant que le rideau est là, la page ne défile pas. Le verrou est posé par
   le script d'amorçage, qui le retire lui-même au bout de 6 s quoi qu'il
   arrive : aucun échec de script ne peut laisser le visiteur enfermé. */
html.loading, html.loading body{overflow:hidden}

/* ---------- 6. EN-TÊTE ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--header-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background var(--t-slow) var(--ease),
             border-color var(--t-slow) var(--ease);
}
.header.is-scrolled{
  background:rgba(246,247,249,.82);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line);
}
.header__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter);display:flex;align-items:center;gap:var(--s-6);
}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand__mark{
  width:32px;height:32px;border-radius:8px;flex:none;
  box-shadow:var(--sh-sm);
}
.brand__name{font-size:1.02rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:var(--s-6);margin-left:auto}
.nav__link{
  font-size:.9rem;font-weight:500;color:var(--text-muted);
  transition:color var(--t-fast) var(--ease);position:relative;padding-block:6px;
}
.nav__link:hover,.nav__link.is-active{color:var(--text)}
.nav__link::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--metal-line);transform:scaleX(0);
  transition:transform var(--t-mid) var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}

.burger{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);position:relative;transition:background var(--t-fast)}
.burger span::before,.burger span::after{
  content:'';position:absolute;left:0;width:20px;height:1.5px;background:var(--text);
  transition:transform var(--t-mid) var(--ease);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1140px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(246,247,249,.98);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
    padding:var(--s-4) var(--gutter) var(--s-6);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav__link{padding-block:14px;font-size:1rem;border-bottom:1px solid var(--line-soft)}
  .nav__link::after{display:none}
  .nav .btn{margin-top:var(--s-4)}
}

/* ---------- 7. HÉRO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--header-h) + clamp(56px,9vw,116px));
  padding-bottom:clamp(56px,7vw,92px);
  background:
    radial-gradient(ellipse 70% 52% at 50% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(180deg,#FBFCFD 0%,var(--paper) 52%,var(--mist) 100%);
}
/* Un seul filet horizontal sous l'en-tête : une règle de mise en page,
   pas une grille lumineuse. Les halos et les quadrillages sont le cliché
   visuel des sites d'IA — on n'en met aucun. */
.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;top:calc(var(--header-h) + clamp(28px,4vw,56px));height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}
.hero__inner{position:relative;z-index:1;text-align:center}
.hero h1{
  margin-top:var(--s-5);
  font-size:clamp(2.3rem,6.2vw,5rem);
  line-height:1.02;letter-spacing:-.05em;font-weight:600;
}
.hero h1 .line{display:block}
.hero__lead{
  margin:var(--s-6) auto 0;max-width:58ch;
  font-size:clamp(1.02rem,1.8vw,1.22rem);
  color:var(--text-muted);text-wrap:pretty;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;margin-top:var(--s-7)}
.hero__note{margin-top:var(--s-4);font-size:.82rem;color:var(--text-dim)}

/* Bandeau de réassurance */
.trust{
  margin-top:clamp(40px,5vw,var(--s-8));
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overflow:hidden;box-shadow:var(--sh-sm);
}
.trust__item{padding:var(--s-5) var(--s-4);text-align:center;border-left:1px solid var(--line-soft)}
.trust__item:first-child{border-left:0}
.trust__val{
  display:block;font-size:clamp(1rem,1.9vw,1.32rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.25;text-wrap:balance;
}
.trust__lab{
  display:block;margin-top:5px;font-size:.74rem;
  letter-spacing:.07em;color:var(--text-muted);line-height:1.4;
}
@media (max-width:720px){
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust__item:nth-child(3){border-left:0}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}

/* ---------- 7bis. VISUEL DU HÉRO ----------
   La vraie interface, présentée en perspective. Elle se redresse à mesure
   que l'on descend : c'est l'animation d'accueil, et c'est aussi le produit.
   -------------------------------------------------------------------- */
.herovis{
  position:relative;z-index:1;
  margin-top:clamp(48px,6vw,var(--s-8));
  perspective:1800px;perspective-origin:50% 0%;
}
/* Une ombre portée franche, au sol. Pas d'aura. */
.herovis::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:4%;transform:translateX(-50%);
  width:min(820px,88%);height:40px;
  background:radial-gradient(ellipse at center, rgba(20,23,29,.2), transparent 70%);
  filter:blur(18px);
}
.herovis__frame{
  position:relative;z-index:1;
  border-radius:var(--r-lg);
  background:var(--white);
  padding:6px;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,23,29,.05),
             0 24px 60px -24px rgba(20,23,29,.3);
  transform-style:preserve-3d;
  will-change:transform;
}
.herovis__frame img{
  width:100%;height:auto;display:block;
  border-radius:calc(var(--r-lg) - 5px);
}
/* Dégradé de fondu en bas : l'image se fond dans la page */
.herovis__fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:2;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  background:linear-gradient(180deg,transparent,var(--mist) 92%);
  pointer-events:none;
}
.herovis__cap{
  position:relative;z-index:3;margin-top:-18px;text-align:center;
  font-size:.8rem;color:var(--text-dim);
}

/* Entrée : l'appareil monte et se redresse */
html.js .tilt{
  opacity:0;
  transform:perspective(1800px) rotateX(16deg) translateY(54px) scale(.94);
  transition:opacity 1.1s var(--ease-out), transform 1.4s var(--ease-out);
}
html.js .tilt.is-in{opacity:1;transform:perspective(1800px) rotateX(0) translateY(0) scale(1)}

/* ---------- 8. PLATEFORME ---------- */
.platform__head{
  display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-7);align-items:end;
  margin-bottom:clamp(36px,5vw,var(--s-8));
}
.platform__head .section-head{margin-bottom:0}
.platform__aside{
  font-size:.95rem;color:var(--text-muted);
  border-left:1px solid var(--line);padding-left:var(--s-5);
}
@media (max-width:880px){
  .platform__head{grid-template-columns:1fr;gap:var(--s-5)}
  .platform__aside{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--s-4)}
}

.ptabs{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
.ptab{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  font-size:.875rem;font-weight:500;color:var(--text-muted);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.ptab svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.ptab:hover{color:var(--text);border-color:var(--line-strong);transform:translateY(-1px)}
.ptab[aria-selected="true"]{
  color:var(--graphite-900);background:var(--metal-plate);
  border-color:var(--silver-200);font-weight:600;
}

/* Vitrine : captures réelles de l'application, pas une imitation */
/* Pas de cadre : la capture est posée à même la page, sa seule limite est
   une ombre portée profonde. Un contour clair sur fond sombre sonnait faux. */
.shot{position:relative;border-radius:var(--r-lg)}
.shot__img{
  position:relative;aspect-ratio:1400/880;overflow:hidden;
  border-radius:var(--r-lg);
  background:#15121F;
  box-shadow:0 2px 10px rgba(0,0,0,.4),
             0 30px 70px -28px rgba(0,0,0,.85),
             0 1px 0 rgba(255,255,255,.07) inset;
}
.shot__img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transform:scale(1.025);
  transition:opacity .55s var(--ease-out),transform 1s var(--ease-out);
}
.shot__img img.is-on{opacity:1;transform:none}

/* Légende : ce que l'on regarde, en une ligne */
.shotnote{
  display:flex;align-items:flex-start;gap:11px;
  margin-top:var(--s-5);font-size:.92rem;color:var(--text-muted);
  max-width:72ch;min-height:3.2em;
}
.shotnote svg{width:17px;height:17px;flex:none;margin-top:3px;stroke:var(--silver-300);fill:none;stroke-width:1.9}
.shotnote b{color:var(--text);font-weight:600}



/* Capacités de la plateforme */
.pfeat{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--s-6);
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);overflow:hidden;
}
@media (max-width:900px){.pfeat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pfeat{grid-template-columns:1fr}}
.pfeat__item{
  background:var(--paper);padding:var(--s-5);
  transition:background-color var(--t-mid) var(--ease);
}
.pfeat__item:hover{background:var(--mist)}
.pfeat__ico{
  width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;
  margin-bottom:var(--s-4);border:1px solid var(--line);background:rgba(255,255,255,.04);
}
.pfeat__ico svg{width:17px;height:17px;stroke:var(--silver-300);fill:none;stroke-width:1.7}
.pfeat__item h3{font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.pfeat__item p{margin-top:7px;font-size:.86rem;color:var(--text-muted);line-height:1.6}

/* ---------- 9. DIFFÉRENCIATION ---------- */
.versus{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);
  margin-bottom:var(--s-7);
}
@media (max-width:860px){.versus{grid-template-columns:1fr}}
.vcard{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3.4vw,var(--s-7));
  background:var(--white);position:relative;
}
.vcard--them{background:var(--mist);border-style:dashed}
.vcard--us{box-shadow:var(--sh-md);border-color:var(--line-strong)}
.vcard__lab{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:var(--r-pill);
}
.vcard--them .vcard__lab{color:var(--text-dim);background:var(--cloud)}
.vcard--us .vcard__lab{color:#fff;background:var(--graphite-900)}
.vcard h3{margin-top:var(--s-4);font-size:1.25rem;font-weight:600;letter-spacing:-.025em}
.vcard ul{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
/* Pas de flex ici : la puce contient un <strong> suivi de texte, et flex
   en ferait deux colonnes. L'icône est donc positionnée, pas alignée. */
.vcard li{
  display:block;position:relative;padding-left:27px;
  font-size:.92rem;line-height:1.55;
}
.vcard li svg{position:absolute;left:0;top:4px;width:16px;height:16px;fill:none;stroke-width:2.2}
.vcard li strong{font-weight:600;color:var(--text)}
.vcard--them li{color:var(--text-muted)}
.vcard--them li svg{stroke:var(--silver-400)}
.vcard--us li svg{stroke:var(--graphite-800)}

/* Tableau comparatif */
.ctable{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--white);box-shadow:var(--sh-sm);
}
.ctable th,.ctable td{
  padding:var(--s-4) var(--s-5);text-align:left;font-size:.9rem;
  border-bottom:1px solid var(--line-soft);vertical-align:top;
}
.ctable thead th{
  font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;background:var(--mist);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable tbody th{font-weight:600;color:var(--text);width:30%}
.ctable td:last-child{background:rgba(20,23,29,.022);font-weight:500}
.ctable .no{color:var(--text-dim)}
.ctable .yes{color:var(--text)}
.ctable__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){
  .ctable{min-width:580px}
  .ctable th,.ctable td{padding:var(--s-3) var(--s-4);font-size:.85rem}
}

/* ---------- 10. CAPACITÉS ---------- */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
@media (max-width:880px){.caps{grid-template-columns:1fr}}
.cap{
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6);
  background:var(--white);box-shadow:var(--sh-sm);
  transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.cap:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--sh-md)}
.cap__ico{
  width:42px;height:42px;border-radius:var(--r-md);display:grid;place-items:center;
  margin-bottom:var(--s-5);background:var(--metal-plate);
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.cap__ico svg{width:19px;height:19px;stroke:var(--graphite-800);fill:none;stroke-width:1.9}
.cap h3{font-size:1.1rem;font-weight:600;letter-spacing:-.015em}
.cap ul{margin-top:var(--s-4);display:flex;flex-direction:column;gap:9px}
.cap li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text-muted)}
.cap li::before{content:'';width:5px;height:5px;border-radius:50%;flex:none;background:var(--silver-400);margin-top:9px}

/* ---------- 11. AUTOMATISATIONS ---------- */
.autos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
@media (max-width:980px){.autos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.autos{grid-template-columns:1fr}}
.auto{
  background:var(--white);padding:var(--s-6);position:relative;
  transition:background-color var(--t-mid) var(--ease);
}
.auto:hover{background:var(--mist)}
.auto__num{
  position:absolute;top:var(--s-5);right:var(--s-5);
  font-size:.72rem;font-weight:600;color:var(--text-dim);
  font-variant-numeric:tabular-nums;letter-spacing:.06em;
}
.auto__ico{margin-bottom:var(--s-4)}
.auto__ico svg{width:22px;height:22px;stroke:var(--graphite-700);fill:none;stroke-width:1.6}
.auto h3{font-size:1rem;font-weight:600;letter-spacing:-.012em}
.auto p{margin-top:9px;font-size:.875rem;color:var(--text-muted);line-height:1.62}
.auto__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s-4)}
.auto__tags span{font-size:.72rem;color:var(--text-dim);padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}

.inset{
  margin-top:var(--s-6);display:grid;grid-template-columns:1fr auto;
  gap:var(--s-6);align-items:center;padding:clamp(24px,4vw,var(--s-7));
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  background:var(--metal-plate);box-shadow:var(--sh-sm);
}
.inset h3{font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.025em}
.inset p{margin-top:10px;font-size:.92rem;color:var(--text-muted);max-width:60ch}
@media (max-width:780px){.inset{grid-template-columns:1fr}}

/* ---------- 12. OFFRES ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);align-items:stretch}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.plans{grid-template-columns:1fr}}
.plan{
  display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6);background:var(--white);
  position:relative;box-shadow:var(--sh-sm);
  transition:border-color var(--t-mid) var(--ease),transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
.plan:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--sh-md)}
.plan--featured{border-color:var(--graphite-800);box-shadow:var(--sh-md)}
.plan__badge{
  position:absolute;top:-1px;right:var(--s-5);transform:translateY(-50%);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:var(--graphite-900);padding:5px 12px;border-radius:var(--r-pill);
}
.plan__no{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.plan h3{margin-top:10px;font-size:1.22rem;font-weight:600;letter-spacing:-.02em}
.plan__desc{margin-top:9px;font-size:.875rem;color:var(--text-muted);line-height:1.6}
.plan__prices{
  margin-top:var(--s-5);padding-block:var(--s-4);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:var(--s-3);
}
.plan__price{display:flex;flex-direction:column;gap:3px}
.plan__lab{font-size:.72rem;color:var(--text-dim);letter-spacing:.07em;text-transform:uppercase}
.plan__val{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan__val small{font-size:.76rem;font-weight:500;color:var(--text-muted)}
.plan__val--text{font-size:.88rem;font-weight:500;white-space:normal;line-height:1.45}
.plan ul{margin-top:var(--s-5);display:flex;flex-direction:column;gap:10px;flex:1}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:.86rem;color:var(--text-muted);line-height:1.5}
.plan li svg{width:15px;height:15px;flex:none;margin-top:3px;stroke:var(--graphite-700);fill:none;stroke-width:2.2}
.plan__note{margin-top:var(--s-4);font-size:.76rem;color:var(--text-dim);line-height:1.5}
.plan .btn{margin-top:var(--s-5)}
.plans__note{margin-top:var(--s-5);font-size:.85rem;color:var(--text-dim);text-align:center}

/* ---------- 13. IMPACT ---------- */
.roi{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-5)}
@media (max-width:900px){.roi{grid-template-columns:1fr}}
.roi__panel{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3.5vw,var(--s-7));background:var(--white);box-shadow:var(--sh-sm);
}
.roi__panel h3{font-size:1.1rem;font-weight:600;letter-spacing:-.02em}
.roi__sub{margin-top:7px;font-size:.85rem;color:var(--text-dim)}
.field{margin-top:var(--s-5)}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin-bottom:11px}
.field__lab{font-size:.875rem;color:var(--text-muted)}
.field__val{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--cloud)}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--cloud)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-8px;
  background:var(--metal-plate);border:1px solid var(--line-strong);
  box-shadow:var(--sh-sm);transition:transform var(--t-fast) var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--line-strong);
  background:#EEF1F5;box-shadow:var(--sh-sm);
}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}

.roi__out{
  border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:clamp(24px,3.5vw,var(--s-7));background:var(--metal-plate);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-5);
  box-shadow:var(--sh-md);
}
.roi__lab{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.roi__big{
  margin-top:7px;font-size:clamp(2.1rem,5.4vw,3.2rem);font-weight:600;
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;
}
.roi__big small{font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--text-muted)}
.roi__sep{height:1px;background:var(--metal-line)}
.roi__note{font-size:.85rem;color:var(--text-muted);line-height:1.6}
.roi__note b{color:var(--text);font-variant-numeric:tabular-nums}
.roi__disclaimer{margin-top:var(--s-5);font-size:.76rem;color:var(--text-dim);text-align:center;line-height:1.5}

/* ---------- 14. APPEL FINAL ---------- */
.final{text-align:center;position:relative;overflow:hidden}
/* Une règle fine en haut de section, à la place de l'ancienne aura. */
.final::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--line) 15%,var(--line) 85%,transparent);
}
.final__inner{position:relative;z-index:1;max-width:780px;margin-inline:auto}
.final h2{font-size:clamp(1.9rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.final p{margin-top:var(--s-5);font-size:1.05rem;color:var(--text-muted)}
.final .btn{margin-top:var(--s-7)}
.final__note{margin-top:var(--s-4);font-size:.82rem;color:var(--text-dim)}
.final__note a{color:var(--text);text-decoration:underline;text-underline-offset:3px}

/* ---------- 15. PIED DE PAGE ---------- */
.footer{border-top:1px solid var(--line);padding-block:var(--s-8) var(--s-5);background:var(--mist)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:var(--s-7)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr;gap:var(--s-6)}}
.footer__tag{margin-top:var(--s-4);font-size:.88rem;color:var(--text-muted);max-width:34ch}
.footer__h{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:var(--s-4)}
.footer__list{display:flex;flex-direction:column;gap:11px}
.footer__list a,.footer__list li{font-size:.88rem;color:var(--text-muted);transition:color var(--t-fast) var(--ease)}
.footer__list a:hover{color:var(--text)}
.footer__contact li{display:flex;align-items:center;gap:10px}
.footer__contact svg{width:15px;height:15px;flex:none;stroke:var(--text-dim);fill:none;stroke-width:1.8}
.footer__bottom{
  margin-top:var(--s-8);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--text-dim);
}
.footer__legal{display:flex;gap:var(--s-5);flex-wrap:wrap}
.footer__legal a{transition:color var(--t-fast) var(--ease)}
.footer__legal a:hover{color:var(--text)}

.langswitch{display:flex;gap:2px;align-items:center}
.langswitch button{
  min-width:38px;min-height:32px;padding:5px 9px;border-radius:var(--r-sm);
  font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--text-dim);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.langswitch button:hover:not(:disabled){color:var(--text);background:rgba(20,23,29,.05)}
.langswitch button[aria-current="true"]{color:#fff;background:var(--graphite-900)}
.langswitch button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 16. PAGES LÉGALES ---------- */
.legal{padding-top:calc(var(--header-h) + var(--s-8));padding-bottom:var(--s-9)}
.legal__inner{max-width:760px}
.legal h1{font-size:clamp(1.9rem,4.4vw,2.8rem);letter-spacing:-.035em;font-weight:600;line-height:1.1}
.legal__meta{margin-top:var(--s-4);font-size:.85rem;color:var(--text-dim)}
.legal h2{margin-top:var(--s-8);font-size:1.22rem;font-weight:600;letter-spacing:-.02em;
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.legal h3{margin-top:var(--s-6);font-size:1rem;font-weight:600}
.legal p,.legal li{margin-top:var(--s-4);font-size:.95rem;color:var(--text-muted);line-height:1.72}
.legal ul{margin-top:var(--s-2);padding-left:var(--s-5);list-style:disc}
.legal li{margin-top:10px;padding-left:4px}
.legal li::marker{color:var(--silver-400)}
.legal a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--silver-600)}
.legal dl{margin-top:var(--s-4)}
.legal dt{margin-top:var(--s-4);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.legal dd{margin-top:5px;font-size:.95rem;color:var(--text)}
.legal__back{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--s-6);
  font-size:.88rem;color:var(--text-muted);transition:color var(--t-fast) var(--ease);
}
.legal__back:hover{color:var(--text)}
.legal__back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.legal__todo{
  display:inline-block;padding:2px 9px;border-radius:var(--r-sm);
  background:#FFF8E1;border:1px dashed #C9A227;color:#7A6410;
  font-size:.85rem;font-weight:500;
}

/* =========================================================================
   17. MOUVEMENT
   Tout passe par deux classes : .reveal (le bloc) et .reveal-lines (le texte).
   Le JS ajoute .is-in quand l'élément entre dans le champ de vision.
   ========================================================================= */

/* RÈGLE ABSOLUE : rien n'est masqué tant que « html.js » n'est pas posé.
   Sans JavaScript — ou si le script échoue — la page reste entièrement
   lisible. Un texte invisible par défaut est un site mort. */

/* Blocs : montée douce avec un léger agrandissement */
html.js .reveal{
  opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
html.js .reveal.is-in{opacity:1;transform:none}

/* Texte : chaque ligne sort de son masque, façon générique de cinéma */
/* Le masque doit laisser passer les jambages (le « p » de « temps ») :
   on ajoute de la place en bas, puis on la reprend en marge négative
   pour que l'interligne ne bouge pas. */
.reveal-lines .line{
  display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.reveal-lines .line > *{display:block}
html.js .reveal-lines .line > *{
  transform:translateY(105%);
  transition:transform var(--t-xslow) var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:transform;
}
html.js .reveal-lines.is-in .line > *{transform:none}

/* Mots : utilisé sur les grands titres de section */
.reveal-words .word{display:inline-block}
html.js .reveal-words .word{
  opacity:0;transform:translateY(90%) rotate(2deg);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  transition-delay:calc(var(--i,0) * 55ms + var(--d,0ms));
}
html.js .reveal-words.is-in .word{opacity:1;transform:none}

/* Entrée échelonnée des cartes d'une grille */
html.js .stagger > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .62s var(--ease-out),transform .62s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.js .stagger.is-in > *{opacity:1;transform:none}

/* Dérive verticale légère, pilotée par le défilement.
   Le JS écrit « transform » à chaque image : si cette propriété restait en
   transition, chaque pas de défilement traînerait sur une demi-seconde.
   On ne laisse donc ici que l'opacité en transition. */
.drift{will-change:transform}
html.js .reveal.drift{transition:opacity var(--t-slow) var(--ease-out)}

/* Lueur qui balaie une surface métallique au survol */
.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);
  transform:translateX(-130%);
  transition:transform .9s var(--ease);
}
.sheen:hover::after{transform:translateX(130%)}

/* ---------- 18. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  html.js .reveal,html.js .stagger > *,html.js .reveal-words .word{opacity:1;transform:none}
  html.js .reveal-lines .line > *{transform:none}
  .scanline{display:none}
  html.js #loader{display:none}
  html.loading, html.loading body{overflow:auto}
}

/* ---------- 19. IMPRESSION ---------- */
@media print{
  .header,.hero::before,.hero::after,.final::before,.btn,.langswitch,#loader{display:none}
  body{background:#fff;color:#000}
  .metal-text{-webkit-text-fill-color:#000;color:#000}
  .reveal,.stagger > *{opacity:1;transform:none}
}

/* =========================================================================
   20. PAGE À PROPOS
   ========================================================================= */
.about{
  padding-top:calc(var(--header-h) + clamp(48px,7vw,var(--s-9)));
  padding-bottom:clamp(64px,8vw,var(--s-9));
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,.95), transparent 70%),
    linear-gradient(180deg,#FBFCFD 0%,var(--paper) 60%);
}
.about__head{max-width:760px}
.about__head h1{
  margin-top:var(--s-4);
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.05;letter-spacing:-.045em;font-weight:600;text-wrap:balance;
}
.about__head p{margin-top:var(--s-5);font-size:clamp(1rem,1.7vw,1.18rem);color:var(--text-muted);text-wrap:pretty}

/* Fiche du fondateur */
.founder{
  margin-top:clamp(48px,6vw,var(--s-8));
  display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,4vw,var(--s-8));
  align-items:start;
}
@media (max-width:820px){.founder{grid-template-columns:1fr;gap:var(--s-6)}}
.founder__shot{
  position:relative;border-radius:var(--r-lg);
  border:1px solid var(--line-strong);background:var(--metal-plate);
  padding:8px;box-shadow:var(--sh-md);
}
.founder__shot::before{
  content:'';position:absolute;top:0;left:16%;right:16%;height:1px;z-index:2;
  background:var(--metal-line);
}
.founder__shot img{
  width:100%;display:block;border-radius:calc(var(--r-lg) - 7px);
  border:1px solid rgba(20,23,29,.08);
}
.founder__name{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:600;letter-spacing:-.03em}
.founder__role{
  margin-top:7px;font-size:.8rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-dim);
}
.founder__bio{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4)}
.founder__bio p{font-size:1rem;color:var(--text-muted);line-height:1.72;max-width:62ch}
.founder__bio strong{color:var(--text);font-weight:600}
.founder__meta{
  margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-3);
}
.founder__meta a,.founder__meta span{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--white);
  font-size:.875rem;color:var(--text-muted);box-shadow:var(--sh-sm);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.founder__meta a:hover{border-color:var(--line-strong);color:var(--text)}
.founder__meta svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}

/* Principes */
.values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line-soft);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.value{background:var(--white);padding:var(--s-6)}
.value__no{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.value h3{margin-top:var(--s-4);font-size:1.08rem;font-weight:600;letter-spacing:-.018em}
.value p{margin-top:10px;font-size:.9rem;color:var(--text-muted);line-height:1.65}

/* Repères chiffrés */
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);
  margin-top:clamp(40px,5vw,var(--s-7));
}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{
  padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--white);box-shadow:var(--sh-sm);
}
.fact__val{font-size:1.5rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fact__lab{margin-top:5px;font-size:.8rem;color:var(--text-muted);line-height:1.45}

/* =========================================================================
   21. SÉQUENCE « L'ÉQUIPE SE RANGE DANS L'INTERFACE »
   Par défaut (sans script, ou mouvement réduit) : un bloc statique, titre +
   interface. Avec « html.js » : section haute, scène épinglée, et le script
   pilote chaque élément selon la progression du défilement.
   ========================================================================= */
.assemble{
  position:relative;
  background:linear-gradient(180deg,var(--mist) 0%,var(--paper) 22%,var(--paper) 78%,var(--mist) 100%);
}
.assemble__stage{
  padding:clamp(56px,8vw,var(--s-9)) var(--gutter);
  text-align:center;
}
.assemble__head h2{
  margin-top:var(--s-4);
  font-size:clamp(1.7rem,3.8vw,2.9rem);
  line-height:1.08;letter-spacing:-.04em;font-weight:600;text-wrap:balance;
}
.assemble__frame{
  width:min(1040px,100%);margin:var(--s-7) auto 0;
  border-radius:var(--r-lg);background:var(--white);padding:6px;
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,23,29,.05),0 30px 70px -26px rgba(20,23,29,.34);
}
.assemble__frame img{width:100%;height:auto;display:block;border-radius:calc(var(--r-lg) - 5px)}
.assemble__cap{margin-top:var(--s-5);font-size:.9rem;color:var(--text-dim)}
.assemble__agents{display:none}

/* ---- Version animée ---- */
html.js .assemble{height:560vh}
html.js .assemble__stage{
  position:sticky;top:0;height:100vh;height:100svh;
  padding:0;overflow:hidden;
  perspective:1300px;perspective-origin:50% 42%;
}
html.js .assemble__head{
  position:absolute;left:0;right:0;z-index:3;
  top:calc(var(--header-h) + clamp(14px,3vh,36px));
  padding-inline:var(--gutter);
  will-change:opacity,transform;
}
html.js .assemble__frame{
  position:absolute;left:50%;top:50%;margin:0;z-index:1;
  /* Jamais plus haute que l'écran : la largeur se déduit aussi de la hauteur. */
  width:min(1040px,88vw,calc((100vh - 210px) * 1.58));
  opacity:0;will-change:transform,opacity;
  transform-style:preserve-3d;
}
html.js .assemble__cap{
  position:absolute;left:0;right:0;bottom:clamp(14px,3.2vh,34px);z-index:3;
  margin:0;opacity:0;will-change:opacity;
}
html.js .assemble__agents{
  display:block;position:absolute;inset:0;z-index:2;
  transform-style:preserve-3d;pointer-events:none;
}

/* Un agent : ancré au centre de la scène, déplacé par le script. */
.ag{
  position:absolute;left:50%;top:50%;
  width:84px;height:84px;margin:-42px 0 0 -42px;
  opacity:0;will-change:transform,opacity;
  transform-style:preserve-3d;
}
/* Le flottement vit sur un calque à part : il ne se bat pas avec le script. */
.ag__float{animation:agFloat 5.2s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes agFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.ag__av{display:block;width:84px;height:84px;filter:drop-shadow(0 14px 16px rgba(20,23,29,.2))}
.ag__av svg{width:100%;height:100%;display:block;overflow:visible}

/* La bulle de parole, sous l'avatar. */
.ag__bubble{
  position:absolute;left:50%;top:calc(100% + 12px);
  width:max-content;max-width:236px;
  transform:translateX(-50%) translateY(8px) scale(.94);
  transform-origin:50% 0%;
  padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.96);border:1px solid var(--line);
  box-shadow:0 8px 26px -10px rgba(20,23,29,.28);
  font-size:.82rem;line-height:1.42;color:var(--text-muted);text-align:left;
  opacity:0;
  transition:opacity .32s var(--ease-out),transform .42s var(--ease-out);
}
.ag__bubble::before{
  content:'';position:absolute;left:50%;top:-6px;width:10px;height:10px;
  margin-left:-5px;background:inherit;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);
}
.ag__bubble b{display:block;color:var(--text);font-weight:600;font-size:.78rem;margin-bottom:1px}
.ag.is-talking .ag__bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}

@media (max-width:720px){
  .ag,.ag__av{width:60px;height:60px}
  .ag{margin:-30px 0 0 -30px}
  .ag__bubble{max-width:124px;font-size:.7rem;padding:7px 9px;top:calc(100% + 9px)}
  .ag__bubble b{font-size:.68rem}
  html.js .assemble__frame{width:min(94vw,calc((100vh - 230px) * 1.58))}
}

/* ---- Deuxième vague de la séquence : ce que les agents pilotent ---- */
.wg{
  position:absolute;left:50%;top:50%;opacity:0;
  will-change:transform,opacity;white-space:nowrap;
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  box-shadow:0 10px 30px -12px rgba(20,23,29,.3);
  color:var(--text);text-align:left;
}
.wg--stat{padding:14px 18px;border-radius:16px;min-width:168px}
.wg--stat small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.wg--stat strong{display:block;font-size:1.9rem;font-weight:600;letter-spacing:-.04em;line-height:1.15;font-variant-numeric:tabular-nums}
.wg--stat span{display:block;font-size:.74rem;color:var(--text-muted)}
.wg--chip{
  display:flex;align-items:center;gap:8px;padding:9px 16px 9px 13px;
  border-radius:var(--r-pill);font-size:.82rem;color:var(--text-muted);
}
.wg--chip b{color:var(--text);font-weight:600}
.wg--chip i{width:8px;height:8px;border-radius:50%;background:#22C58B;box-shadow:0 0 0 3px rgba(34,197,139,.18)}
.wg--set{display:flex;align-items:center;gap:16px;padding:12px 16px;border-radius:16px}
.wg--set b{display:block;font-size:.86rem;font-weight:600}
.wg--set small{display:block;font-size:.72rem;color:var(--text-muted);white-space:normal;max-width:210px;line-height:1.35}
.wg--set em{
  position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:var(--graphite-900);
}
.wg--set em::after{content:'';position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:50%;background:#fff}


/* =========================================================================
   22. SÉQUENCE v2 : équipes, directeur, liens
   ========================================================================= */
/* Sans script, seul le premier titre existe. */
.assemble__head--b{display:none}
html.js .assemble__head--b{display:block;opacity:0}

/* Tailles : agent 72 px, directeur 112 px. */
.ag,.ag__av{width:72px;height:72px}
.ag{margin:-36px 0 0 -36px}
.ag--dir,.ag--dir .ag__av{width:112px;height:112px}
.ag--dir{margin:-56px 0 0 -56px;z-index:2}
.ag--dir .ag__float{animation-duration:6.4s}
.ag--dir .ag__av{filter:drop-shadow(0 18px 22px rgba(245,165,36,.34))}
.ag--dir .ag__bubble{top:calc(100% + 40px);max-width:250px}

/* Étiquette « Directeur » sous la couronne. */
.ag__tag{
  position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%) translateY(6px);
  padding:4px 12px;border-radius:var(--r-pill);
  background:var(--graphite-900);color:#fff;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  opacity:0;transition:opacity .3s var(--ease-out),transform .4s var(--ease-out);
}
.ag.is-tagged .ag__tag{opacity:1;transform:translateX(-50%) translateY(0)}

/* Nom d'une équipe, sous son groupe d'agents. */
.tl{
  position:absolute;left:50%;top:50%;opacity:0;will-change:transform,opacity;
  display:flex;align-items:baseline;gap:8px;white-space:nowrap;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.97);border:1px solid var(--line);
  box-shadow:0 8px 24px -12px rgba(20,23,29,.3);
  font-size:.84rem;color:var(--text);
}
.tl b{font-weight:600}
.tl span{font-size:.72rem;color:var(--text-dim)}

/* Liens directeur → équipes. */
.assemble__links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.assemble__links line{
  stroke:var(--silver-400);stroke-width:1.5;stroke-dasharray:4 6;stroke-linecap:round;opacity:0;
}

@media (max-width:720px){
  .ag,.ag__av{width:52px;height:52px}
  .ag{margin:-26px 0 0 -26px}
  .ag--dir,.ag--dir .ag__av{width:78px;height:78px}
  .ag--dir{margin:-39px 0 0 -39px}
  .ag--dir .ag__bubble{top:calc(100% + 34px);max-width:170px}
  .tl{font-size:.7rem;padding:4px 9px}
  .ag__bubble{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .tl span{display:none}
}


/* =========================================================================
   23. FINITIONS
   ========================================================================= */

/* Sur-titre centré : un filet de chaque côté, sinon le texte paraît décalé.
   L'interlettrage ajoute un blanc après la dernière lettre ; on le reprend
   sur le filet de droite pour que les deux écarts soient identiques. */
.hero__inner > .eyebrow::after,
.assemble__head .eyebrow::after{
  content:'';width:28px;height:1px;flex:none;
  background:var(--metal-line);margin-left:-.16em;
}

/* Bandeau du héro. */
.trust__ico{
  width:20px;height:20px;margin:0 auto 12px;display:block;
  stroke:var(--silver-500);fill:none;stroke-width:1.6;
}
.trust__val{color:var(--text)}
.trust__lab{letter-spacing:.005em;font-size:.8rem}
.trust__item{padding:var(--s-5) var(--s-4) calc(var(--s-5) + 2px);transition:background-color var(--t-mid) var(--ease)}
.trust__item:hover{background:rgba(255,255,255,.9)}

/* Progression de lecture : un trait graphite sous l'en-tête. */
.header__progress{
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--graphite-800);transform:scaleX(0);transform-origin:0 50%;
  opacity:0;transition:opacity var(--t-slow) var(--ease);
}
.header.is-scrolled .header__progress{opacity:1}

/* Pages légales : pas de menu déroulant, les liens restent en ligne. */
@media (max-width:1140px){
  .nav.nav--inline{
    position:static;flex-direction:row;align-items:center;gap:var(--s-5);
    background:none;border:0;padding:0;opacity:1;transform:none;pointer-events:auto;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .nav--inline .nav__link{border:0;padding-block:6px;font-size:.88rem}
}

/* Titres : jamais un mot orphelin sur la dernière ligne. */
.section-head h2,.final h2,.assemble__head h2,.about__head h1,.inset h3,.vcard h3{text-wrap:balance}
.section-head p,.founder__bio p,.value p,.auto p,.pfeat__item p,.plan__desc,.roi__note,.shotnote{text-wrap:pretty}

/* Chiffres alignés partout où ils se comparent. */
.ctable,.plan__prices,.roi,.auto__num,.value__no{font-variant-numeric:tabular-nums}

/* Cartes : même courbe, même retenue au survol sur tout le site. */
.cap,.plan,.vcard--us,.fact,.value{transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
.fact:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-strong)}

/* Onglets de la plateforme : défilement horizontal propre sur petit écran,
   plutôt que quatre pastilles empilées sur trois lignes. */
@media (max-width:640px){
  .ptabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ptabs::-webkit-scrollbar{display:none}
  .ptab{flex:none}
}

/* Tableau comparatif : la colonne AGENTIVIA se distingue sans crier. */
.ctable thead th:last-child{color:var(--text);background:var(--cloud)}
.ctable td:last-child{border-left:1px solid var(--line-soft)}
.ctable tbody tr{transition:background-color var(--t-fast) var(--ease)}
.ctable tbody tr:hover{background:rgba(20,23,29,.018)}

/* Liens de texte : soulignement fin et régulier. */
.legal a,.final__note a{text-decoration-thickness:1px}

/* Pied de page : la marque ne doit pas se déformer si l'image tarde. */
.brand__mark{object-fit:cover;background:#000}

/* ---- Finitions, suite ---- */
/* Colonnes réellement égales : « 1fr » seul s'élargit au contenu insécable
   (les fourchettes de prix), et la grille des offres débordait à droite. */
.plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.caps,.autos,.pfeat,.values{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts,.trust{grid-template-columns:repeat(4,minmax(0,1fr))}
.versus{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.autos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.pfeat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:880px){.caps{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.values,.versus{grid-template-columns:minmax(0,1fr)}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.plans,.autos{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.pfeat{grid-template-columns:minmax(0,1fr)}}

/* La barre de progression doit se lire sur fond clair comme sur fond sombre. */
.header__progress{background:var(--silver-500)}

/* Héro : un texte d'accroche un peu plus large, donc une ligne de moins. */
.hero__lead{max-width:66ch}

/* Sur-titres centrés sur petit écran : texte plus serré pour tenir sur une
   ligne ; et si l'écran est vraiment étroit, on retire les filets plutôt que
   de les laisser flotter à mi-hauteur d'un texte sur deux lignes. */
@media (max-width:560px){
  .hero__inner > .eyebrow,.assemble__head .eyebrow{font-size:.66rem;letter-spacing:.12em;gap:8px}
  .hero__inner > .eyebrow::before,.hero__inner > .eyebrow::after,
  .assemble__head .eyebrow::before,.assemble__head .eyebrow::after{width:18px}
  .hero__inner > .eyebrow::after,.assemble__head .eyebrow::after{margin-left:-.12em}
}
@media (max-width:400px){
  .hero__inner > .eyebrow{font-size:.6rem;letter-spacing:.1em}
  .hero__inner > .eyebrow::before,.hero__inner > .eyebrow::after{width:12px}
}

/* L'icône d'une automatisation est un <span> : sans display:block, sa marge
   basse était ignorée et l'icône collait au titre. */
.auto__ico{display:block;margin-bottom:14px}

/* Le lien de retour des pages légales n'est pas un lien de texte courant. */
.legal a.legal__back{text-decoration:none;color:var(--text-muted)}
.legal a.legal__back:hover{color:var(--text)}
@media (max-width:1140px){.nav.nav--inline{gap:var(--s-4)}}

/* Offres côte à côte : les quatre cartes partagent les mêmes rangées
   (sous-grille). Numéro, titre, description, prix, liste, note et bouton
   tombent donc sur la même ligne d'une carte à l'autre, quelle que soit la
   longueur des textes. Sans prise en charge, les cartes restent en colonne. */
@supports (grid-template-rows:subgrid){
  @media (min-width:1081px){
    .plans{grid-template-rows:repeat(7,auto)}
    .plan{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;align-content:start}
    .plan__note{grid-row:6}
    .plan .btn{grid-row:7;align-self:end}
  }
}


/* ---- Notes de transparence (comparaison, démonstration, prix) ---- */
.legalnote{
  margin-top:var(--s-5);font-size:.78rem;line-height:1.6;color:var(--text-dim);
  max-width:86ch;text-wrap:pretty;
}
.legalnote--center{margin-inline:auto;text-align:center}
.assemble__cap small{display:block;margin-top:4px;font-size:.74rem;opacity:.85}

/* Sélecteur de langue : ce sont maintenant de vrais liens. */
.langswitch a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;min-height:32px;padding:5px 9px;border-radius:var(--r-sm);
  font-size:.76rem;font-weight:600;letter-spacing:.05em;color:var(--text-dim);
  transition:color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.langswitch a:hover{color:var(--text);background:rgba(20,23,29,.05)}
.langswitch a[aria-current="true"]{color:#fff;background:var(--graphite-900)}

/* Encadrés de la page À propos : un libellé long (« Ein Ansprechpartner ») passe
   à la ligne au lieu de pousser la page hors de l'écran. */
.fact__val{line-height:1.2;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
@media (max-width:1100px){.fact__val{font-size:1.25rem}}
@media (max-width:520px){.fact__val{font-size:1rem}}
@media (max-width:350px){.facts{grid-template-columns:minmax(0,1fr)}}

/* Titre découpé en mots : chaque mot argenté porte le dégradé. Sur fond sombre,
   --metal vaut --metal-bright, donc il reste lisible. */
.reveal-words .word.metal-text{padding-bottom:.08em;margin-bottom:-.08em}
/* Titre sur fond sombre : le chrome clair (--metal-bright) est presque blanc et se
   confond avec le reste du titre. Ici, des bandes gris acier alternent avec des
   reflets clairs : le passage se lit nettement « argenté », comme sur fond clair. */
.section--dark h2 .metal-text{
  background:linear-gradient(100deg,
    #8B939F 0%, #E8EBEF 18%, #A3AAB5 36%, #F5F6F8 52%,
    #868E9A 70%, #D3D7DD 86%, #9AA1AC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}


/* =========================================================================
   24. PAGE VIDÉO
   L'affiche est une image servie par le site. La vidéo (YouTube ou Vimeo)
   n'est chargée dans .player__frame qu'après un clic sur « Lire ».
   ========================================================================= */
.video__head{max-width:820px}
.cinema{margin-top:clamp(36px,5vw,var(--s-8));max-width:1120px}
.cinema__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}

/* Choix de la langue du film */
.vtabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.vtab{
  min-height:36px;padding:6px 18px;border-radius:var(--r-pill);
  font-size:.86rem;font-weight:500;color:var(--text-muted);
  transition:color var(--t-fast) var(--ease),background var(--t-mid) var(--ease);
}
.vtab:hover{color:var(--text)}
.cinema[data-lang="fr"] .vtab[data-vlang="fr"],
.cinema[data-lang="en"] .vtab[data-vlang="en"]{background:var(--graphite-900);color:#fff}
.cinema__time{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.cinema__time svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* L'écran */
.player{
  position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden;
  border-radius:var(--r-lg);background:#0B0C0F;
  box-shadow:0 1px 2px rgba(20,23,29,.08),0 44px 90px -36px rgba(20,23,29,.55);
}
.player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.cinema[data-lang="fr"] .player__poster[data-vlang="fr"],
.cinema[data-lang="en"] .player__poster[data-vlang="en"]{display:block}
.player::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 62% at 50% 46%,rgba(8,9,12,.34),rgba(8,9,12,.08) 70%);
  transition:opacity var(--t-mid) var(--ease);
}
.player__play{position:absolute;inset:0;z-index:2;width:100%;display:grid;place-items:center;cursor:pointer}
.player__btn{
  display:inline-flex;align-items:center;gap:14px;padding:10px 26px 10px 10px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.95);color:#14171D;
  font-size:.98rem;font-weight:600;letter-spacing:-.01em;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 18px 40px -14px rgba(0,0,0,.7);
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.player__btn i{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#14171D}
.player__btn svg{width:20px;height:20px;fill:#fff;margin-left:2px}
.player__play:hover .player__btn{transform:scale(1.045)}
.player__play:focus-visible{outline:none}
.player__play:focus-visible .player__btn{outline:2px solid #fff;outline-offset:4px}
.player__play:hover ~ .player__frame,.player:hover::after{opacity:.75}

/* Langue dont la vidéo n'est pas encore en ligne : pas de bouton, un mot d'attente. */
.player__soon{
  display:none;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 22px;border-radius:var(--r-pill);background:rgba(255,255,255,.93);color:#14171D;
  font-size:.92rem;font-weight:600;white-space:nowrap;
}
.cinema[data-lang="fr"] .player[data-src-fr=""] .player__play,
.cinema[data-lang="en"] .player[data-src-en=""] .player__play{display:none}
.cinema[data-lang="fr"] .player[data-src-fr=""] .player__soon,
.cinema[data-lang="en"] .player[data-src-en=""] .player__soon{display:block}

/* La vidéo, une fois lancée */
.player__frame{position:absolute;inset:0;z-index:3;display:none;background:#000}
.player.is-playing .player__frame{display:block}
.player__frame iframe{display:block;width:100%;height:100%;border:0}

/* Sous l'écran */
.cinema__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-5);margin-top:var(--s-4)}
.cinema__note{display:flex;gap:10px;max-width:62ch;font-size:.84rem;line-height:1.55;color:var(--text-dim)}
.cinema__note svg{width:16px;height:16px;flex:none;margin-top:3px;stroke:var(--silver-500);fill:none;stroke-width:1.8}
.cinema__note a{color:var(--text-muted);text-decoration:underline;text-underline-offset:3px}
.cinema__note a:hover{color:var(--text)}
.cinema__ext{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:.84rem;font-weight:500;color:var(--text-muted);white-space:nowrap}
.cinema__ext[hidden]{display:none}
.cinema__ext:hover{color:var(--text)}
.cinema__ext svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* Six repères au lieu de trois */
.values--six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.values--six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.values--six{grid-template-columns:minmax(0,1fr)}}

@media (max-width:620px){
  .player{border-radius:var(--r-md)}
  .player__btn{gap:10px;padding:7px 18px 7px 7px;font-size:.88rem}
  .player__btn i{width:38px;height:38px}
  .player__btn svg{width:17px;height:17px}
  .cinema__foot{flex-direction:column;gap:var(--s-3)}
}

/* Lien « Vidéo » du bouton d'accueil : petit triangle de lecture */
.btn__play{width:16px;height:16px;fill:currentColor;stroke:none;flex:none}
.player__frame video{display:block;width:100%;height:100%;background:#000}
.cinema__note[hidden]{display:none}
.section-head--wide{max-width:940px}

/* Menu à sept entrées : il passe en menu déroulant sous 1141 px, et se resserre
   entre 1141 et 1320 px pour qu'aucun libellé ne passe à la ligne (allemand compris). */
@media (min-width:1141px){.nav__link{white-space:nowrap}}
@media (min-width:1141px) and (max-width:1320px){
  .nav{gap:20px}
  .nav__link{font-size:.9rem}
  .nav .btn--sm{padding-inline:16px}
}