/* ==========================================================================
   Ammelis — design system « Manufacture » · feuille de style commune du site
   Une seule feuille pour toutes les pages : accueils, pages produit, durabilité.
   Source de référence : kDrive\Website\design-system\ (README, jetons, guide).

   Sommaire
   01 Police            06 Bandeau d'annonce      11 Accueil : sections
   02 Jetons            07 Barre de navigation    12 Pages produit
   03 Base              08 Boutons et flèches     13 Pages durabilité
   04 Typographie       09 Panneaux et motif      14 Pied de page
   05 Structure         10 Apparition au défilement     15 Survols et or de la lampe
   ========================================================================== */

/* 01 — Police : Archivo variable (graisse 100–900, largeur 62–125 %), auto-hébergée */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('fonts/archivo-latin-wdth-normal.woff2') format('woff2');
}

/* 02 — Jetons */
:root {
  color-scheme: dark;

  /* Fonds */
  --black:        #030712;   /* fond du site */
  --black-soft:   #080B14;   /* bande alternée */
  --navy:         #0C111F;   /* panneau marine du master */
  --card:         #0E1320;   /* carte */
  --line:         #1E2433;   /* filet */
  --line-strong:  #2A3142;   /* filet appuyé */

  /* Textes */
  --white:        #FFFFFF;
  --text:         #F4F4F6;
  --text-soft:    #D1D5DB;
  --text-muted:   #9CA3AF;
  --text-dim:     #8A93A3;

  /* Orange Ammelis */
  --orange:        #E89B2C;
  --orange-bright: #F2A83A;
  --orange-deep:   #C97812;
  --orange-ink:    #3A2A08;  /* texte courant sur aplat orange */
  --arc:           #6B4E1F;  /* teinte des arcs une fois posés sur le marine */

  /* Dégradés — les seuls admis : le marine du master et l'or de la lampe */
  --navy-grad:   linear-gradient(135deg, #0B101D 0%, #0C111F 50%, #0E1425 100%);   /* panneaux */
  --card-grad:   linear-gradient(160deg, #0F1525 0%, #0E1320 55%, #0C111D 100%);   /* cartes */
  --orange-grad: linear-gradient(100deg, #EDA235 0%, #F2A83A 50%, #F4AE43 100%);   /* aplats orange */
  --orange-btn:  linear-gradient(180deg, #F4AE43 0%, #F2A83A 50%, #EDA235 100%);   /* bouton principal */
  --orange-text: linear-gradient(180deg, #F5B149 0%, #F2A83A 50%, #EB9F32 100%);   /* promesse, numéros */
  --rule-grad:   linear-gradient(90deg, #F5B149 0%, #F2A83A 55%, #EB9F32 100%);    /* filet court */
  --line-grad:   linear-gradient(90deg, #F2A83A 0%, rgba(242, 168, 58, 0.5) 45%, rgba(242, 168, 58, 0) 100%);  /* filet de survol */
  /* Motif du master : halo orange et trois arcs concentriques */
  --motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1060 1060'%3E%3Cdefs%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23E89B2C' stop-opacity='.17'/%3E%3Cstop offset='.38' stop-color='%23B8741C' stop-opacity='.1'/%3E%3Cstop offset='.75' stop-color='%23876040' stop-opacity='.05'/%3E%3Cstop offset='1' stop-color='%23786E64' stop-opacity='.025'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='530' cy='530' r='432' fill='url(%23h)'/%3E%3Cg fill='none' stroke='%23F2A83A' stroke-opacity='.4'%3E%3Ccircle cx='530' cy='530' r='283' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='530' cy='530' r='396' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='530' cy='530' r='528' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");

  /* Accents produits */
  --blue:           #4E8FE8;
  --blue-bright:    #7CB2F8;
  --green:          #3BB884;
  --green-bright:   #6FE0AE;
  --carmine:        #D9435C;
  --carmine-bright: #E8798C;
  --announce:       #3D0E18;  /* bandeau lie-de-vin */

  /* Accent de la page (orange par défaut, bleu ou vert sur les pages produit) */
  --accent:        var(--orange-bright);
  --accent-bright: var(--orange-bright);

  /* Mesures */
  --max:    1280px;
  --gutter: 32px;
  --section: 112px;
  --radius: 2px;

  /* Typographie */
  --font: 'Archivo', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --wide: 125%;              /* largeur étendue des titres */
  --caps: 0.28em;            /* interlettrage des repères en capitales */

  --t: 0.25s ease;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
}

.accent-blue {
  --accent: var(--blue);
  --accent-bright: var(--blue-bright);
  --rule-grad: linear-gradient(90deg, #86B8F9 0%, #7CB2F8 55%, #6BA6F4 100%);
  --line-grad: linear-gradient(90deg, #7CB2F8 0%, rgba(124, 178, 248, 0.5) 45%, rgba(124, 178, 248, 0) 100%);
}
.accent-green {
  --accent: var(--green);
  --accent-bright: var(--green-bright);
  --rule-grad: linear-gradient(90deg, #7DE4B6 0%, #6FE0AE 55%, #5FD5A2 100%);
  --line-grad: linear-gradient(90deg, #6FE0AE 0%, rgba(111, 224, 174, 0.5) 45%, rgba(111, 224, 174, 0) 100%);
}

/* 03 — Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text-soft);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--orange-bright); outline-offset: 3px; }

/* 04 — Typographie */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--white);
  font-weight: 500;
  font-stretch: var(--wide);
  line-height: 1.14;
  text-wrap: balance;
}
h4 { font-stretch: 100%; font-weight: 600; line-height: 1.4; }
p  { margin: 0 0 1em; color: var(--text-soft); text-wrap: pretty; }
strong { font-weight: 600; }

/* Mise en valeur : jamais d'italique, la graisse et la couleur suffisent */
em { font-style: normal; font-weight: 600; color: var(--accent-bright); }

/* Repère en capitales espacées (intitulé de section, catégorie, source) */
.eyebrow {
  display: block;
  margin: 0 0 20px;
  color: var(--accent-bright);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  line-height: 1.5;
  text-transform: uppercase;
}

.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text-soft); }

/* 05 — Structure */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

section.block {
  padding: var(--section) 0;
  border-top: 1px solid var(--line);
}

.section-head { max-width: 46rem; margin: 0 0 56px; }
.section-head h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.section-head h2 .accent { color: var(--orange-bright); }
.section-head .lead { margin: 20px 0 0; }

/* 06 — Bandeau d'annonce (lie-de-vin Inspectis) */
.announce {
  background: var(--announce);
  color: var(--white);
  padding: 10px var(--gutter);
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.5;
}
.announce strong {
  margin-right: 14px;
  color: var(--carmine-bright);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.24em;
}
.announce .sep { margin: 0 12px; color: rgba(255, 255, 255, 0.4); }
.announce a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.announce a:hover { color: var(--carmine-bright); }

/* 07 — Barre de navigation */
nav.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(3, 7, 18, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
nav.topbar .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 76px;
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  color: var(--text);
  white-space: nowrap;
}
.logo-img { display: block; width: auto; height: 42px; }
.logo-mark .crumb { color: var(--text-dim); font-size: 0.82rem; letter-spacing: 0.04em; }
.logo-mark .crumb b { color: var(--text-soft); font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link {
  padding: 14px 0;
  border-bottom: 1px solid transparent;
  color: var(--text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--t), border-color var(--t);
}
.nav-link:hover { color: var(--white); border-bottom-color: var(--accent-bright); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
}
.lang-switch a { padding: 14px 6px; color: var(--text-muted); transition: color var(--t); }
.lang-switch a:hover { color: var(--white); }
.lang-switch a.active { color: var(--accent-bright); }
.lang-switch a + a::before { content: '/'; margin-right: 12px; color: #4B5263; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--accent-bright);
  border-radius: var(--radius);
  color: var(--accent-bright);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--t), color var(--t);
}
.nav-cta:hover { background: var(--accent-bright); color: var(--navy); }

.mobile-toggle {
  display: none;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 1240px) {
  .mobile-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 16px var(--gutter) 28px;
    background: var(--black-soft);
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open .lang-switch { margin: 6px 0 14px -6px; }
  .nav-links.open .nav-cta { align-self: stretch; justify-content: center; }
}
@media (max-width: 980px) { .logo-mark .crumb { display: none; } }

/* 08 — Boutons et flèches */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-orange, .btn-blue, .btn-green {
  color: var(--navy);
  /* liseré clair en haut, liseré sombre en bas : le bouton prend la lumière comme la lampe */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transition: filter var(--t);
}
.btn-orange { background: var(--orange-bright); background-image: var(--orange-btn); }
.btn-blue   { background: var(--blue);  background-image: linear-gradient(180deg, #5895EA 0%, #4E8FE8 50%, #4888E2 100%); }
.btn-green  { background: var(--green); background-image: linear-gradient(180deg, #44BE8B 0%, #3BB884 50%, #36B07E 100%); }
.btn-orange:hover, .btn-blue:hover, .btn-green:hover { filter: brightness(1.06); }

/* Action secondaire : un lien souligné, pas un second bouton */
.btn-ghost {
  padding: 0;
  color: var(--text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}
.btn-ghost:hover { color: var(--accent-bright); }

.arrow { display: inline-block; transition: transform var(--t); }
a:hover > .arrow, button:hover > .arrow { transform: translateX(4px); }
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  .arrow {
    flex: none;
    width: 16px;
    height: 16px;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    vertical-align: -3px;
    background: currentColor;
    -webkit-mask: var(--arrow) center / contain no-repeat;
            mask: var(--arrow) center / contain no-repeat;
  }
}

/* 09 — Panneaux marine et motif du master (halo orange + arcs) */
.split-panel,
.dash-offer,
.founders-together,
.page-product .cta-banner .inner,
.note {
  position: relative;
  isolation: isolate;
  overflow: hidden;            /* le motif est coupé net par les bords du panneau */
  background: var(--navy);
  background-image: var(--navy-grad);
}

.split-panel::before,
.dash-offer::before,
.founders-together::before,
.page-product .cta-banner .inner::before {
  content: '';
  position: absolute;
  z-index: -1;
  background: var(--motif) center / contain no-repeat;
  pointer-events: none;
}
/* en bas à gauche, coupé par le bord gauche et le bas, comme sur les diapositives de chapitre */
.split-panel::before { left: -289px; bottom: -459px; width: 860px; height: 860px; }
/* en bas à droite */
.dash-offer::before { right: -127px; bottom: -235px; width: 440px; height: 440px; }
.founders-together::before,
.page-product .cta-banner .inner::before { right: -180px; bottom: -320px; width: 600px; height: 600px; }

/* Filet orange court sous un titre clé */
.page-home .hero h1::after,
.page-product .hero h1::after,
.page-doc h1::after,
.split-panel .section-head h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 28px;
  background: var(--rule-grad);
}

/* 10 — Apparition au défilement (discrète) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   11 — Accueil
   ========================================================================== */

/* Hero */
.page-home .hero { padding: 56px 0 96px; background: #040711; }  /* teinte exacte du visuel de la lampe */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
}
.page-home .hero .eyebrow { margin-bottom: 28px; }
.page-home .hero h1 { font-size: clamp(2.1rem, 3.9vw, 3.5rem); font-weight: 300; line-height: 1.08; }
.page-home .hero h1 .accent { display: block; font-weight: 600; color: var(--orange-bright); }
.hero-lead { max-width: 35rem; margin: 28px 0 0; font-size: 1.125rem; line-height: 1.6; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; margin-top: 40px; }
.hero-visual { display: flex; justify-content: center; }
.hv-lamp {
  display: block;
  width: auto;
  height: auto;
  max-height: 640px;
  /* bords fondus : le visuel se confond avec le fond, quelle que soit sa teinte exacte */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 80%, transparent 100%);
}

/* Chiffres clés */
.stats-strip { padding: 104px 0; border-top: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.stat .num {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--white);
  font-size: clamp(3.25rem, 5.8vw, 5.25rem);
  font-weight: 300;
  font-stretch: var(--wide);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stat .num .pct { margin-left: 0.2em; color: var(--orange-bright); font-size: 0.4em; font-weight: 500; }
.stat .label { max-width: 21rem; margin-top: 24px; font-size: 1rem; line-height: 1.55; }
.stat .src {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}

/* Solution : panneau marine à gauche, constat et approche à droite */
section.split { padding: 0; overflow: hidden; }
.split-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.split-panel {
  /* le panneau s'arrête à la marge du contenu : à sa gauche, le fond reste noir */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
  padding: 96px 56px;
}
.split-panel .section-head { margin: 0; }
.split-body { padding: 96px 0 96px 72px; }

.principle blockquote {
  margin: 0;
  color: var(--white);
  font-size: 1.375rem;
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1.4;
}
.principle .highlight { font-weight: 500; color: var(--orange-bright); }
.principle .attrib {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}

.two-col { display: grid; gap: 72px; }
.col-tag {
  display: block;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
.two-col > :nth-child(2) .col-tag { color: var(--orange-bright); }
.col-title { margin: 10px 0 24px; font-size: 1.75rem; line-height: 1.2; }

.point {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.point:last-child { border-bottom: 1px solid var(--line); }
.point-num {
  color: var(--orange-bright);
  font-size: 2.125rem;
  font-weight: 300;
  font-stretch: var(--wide);
  line-height: 1.1;
}
.point-body h4 { margin: 0 0 6px; font-size: 1.125rem; }
.point-body p { margin: 0; font-size: 1rem; line-height: 1.55; }

/* Périmètre : la couche de décision au-dessus des six familles */
.stack-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.stack-tag em { color: var(--orange-bright); font-weight: 500; letter-spacing: 0.16em; }

.decision-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  padding: 28px 32px;
  background: var(--orange-bright);
  background-image: var(--orange-grad);
}
.dl-badge, .fa-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-stretch: var(--wide);
  line-height: 1;
}
.dl-badge { flex: 0 0 52px; width: 52px; height: 52px; font-size: 1.5rem; }
.dl-body { flex: 1 1 320px; min-width: 0; }
.decision-layer h3 { margin: 0 0 6px; color: var(--navy); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; }
.decision-layer p { margin: 0; color: var(--orange-ink); font-size: 0.95rem; line-height: 1.5; }
.dl-pill {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stack-arrows, .fam-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) auto minmax(0, 1.3fr);
  gap: 12px;
}
.stack-arrows { padding: 16px 0 10px; }
.stack-arrows span { color: var(--orange-bright); font-size: 1rem; line-height: 1; text-align: center; }
.fam-grid { align-items: stretch; }

.fam-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px 18px;
  background: var(--card);
  background-image: var(--card-grad);
  border-top: 2px solid var(--fam, var(--orange));
}
.fam-kicker {
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fam-card h4 { margin: 0; font-size: 0.95rem; line-height: 1.25; hyphens: auto; }
@media (min-width: 1201px) { .fam-kicker { min-height: 2.9em; line-height: 1.45; } }
.fam-card p { margin: 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
.fam-vendors {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.45;
}

.fam-or { display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.fam-or span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--orange-bright);
  border-radius: 50%;
  color: var(--orange-bright);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fam-ammelis {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 18px 20px;
  background: var(--orange-bright);
  background-image: linear-gradient(165deg, #F4AE43 0%, #F2A83A 55%, #EDA235 100%);
  text-align: center;
}
.fa-kicker { color: var(--orange-ink); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
.fa-badge { width: 44px; height: 44px; font-size: 1.3rem; }
.fam-ammelis h4 { margin: 0; color: var(--navy); font-size: 1.15rem; font-stretch: var(--wide); line-height: 1.15; }
.fam-ammelis p { margin: 0; color: var(--orange-ink); font-size: 0.84rem; line-height: 1.45; }
.fa-pill { width: 100%; margin-top: auto; padding-top: 14px; }
.fa-pill span {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.35;
  text-transform: uppercase;
}

.trans-layer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 22px;
  padding: 18px 24px;
  background: var(--card);
  background-image: var(--card-grad);
  border-top: 2px solid #6BCD8C;
}
.tl-label { color: #6BCD8C; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.tl-items { color: var(--text-muted); font-size: 0.92rem; }

/* Produits : visuel au milieu de la carte, rangées alignées d'une carte à l'autre */
#produits { background: var(--black-soft); }
.pc-sco  { --pc-accent: var(--blue);    --pc-accent-bright: var(--blue-bright); }
.pc-proc { --pc-accent: var(--green);   --pc-accent-bright: var(--green-bright); }
.pc-ins  { --pc-accent: var(--carmine); --pc-accent-bright: var(--carmine-bright); }

.products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.product-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 28px 24px;
  background: var(--card);
  background-image: var(--card-grad);
}
/* Grand écran : trois cartes dont les rangées s'alignent (titre, accroche, visuel, liste, lien) */
@media (min-width: 1101px) {
  @supports (grid-template-rows: subgrid) {
    .products-grid { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .product-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 20px; }
  }
}
/* Tablette : une carte par ligne, visuel à gauche, texte à droite */
@media (min-width: 701px) and (max-width: 1100px) {
  .product-card {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: 18px 32px;
    padding: 28px;
  }
  .product-card > * { grid-column: 2; }
  .product-card > .pc-shot {
    grid-column: 1;
    grid-row: 1 / -1;
    margin: -28px 0 -28px -28px;
    border: 0;
    border-right: 1px solid var(--line);
  }
  .product-card > .pc-shot img { height: 100%; aspect-ratio: auto; }
  .product-card > .pc-shot-panel { aspect-ratio: auto; }
}

.pc-head { display: flex; align-items: flex-start; gap: 14px; }
.pc-logo { display: none; }
.pc-head > div:not(.pc-logo) { display: flex; flex-direction: column-reverse; gap: 12px; min-width: 0; }
.pc-name { color: var(--white); font-size: 1.375rem; font-weight: 500; font-stretch: var(--wide); line-height: 1.25; }
.pc-domain {
  color: var(--pc-accent-bright);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.5;
  text-transform: uppercase;
}
.pc-badge-new {
  flex: none;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--pc-accent);
  border-radius: var(--radius);
  color: var(--pc-accent-bright);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.pc-tagline { margin: 0; color: var(--text); font-size: 1rem; line-height: 1.55; }
.pc-tagline em { color: var(--pc-accent-bright); }

.pc-shot {
  display: block;
  margin: 4px -28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--navy);
}
.pc-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 569; object-fit: cover; object-position: left top; }
.pc-shot-panel { display: flex; align-items: flex-end; aspect-ratio: 1000 / 569; padding: 24px 28px; background: #1C0D12; }
.panel-inner { display: grid; justify-items: start; gap: 8px; }
.panel-inner svg { display: block; width: 36px; height: 36px; margin-bottom: 6px; }
.panel-label { color: var(--carmine-bright); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.panel-sub { color: var(--text); font-size: 0.9rem; line-height: 1.5; }

.pc-points { margin: 0; padding: 0; list-style: none; }
.pc-points li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.9rem; line-height: 1.5; }
.pc-points li:first-child { padding-top: 0; border-top: 0; }

.pc-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; }
.pc-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  border-bottom: 1px solid var(--pc-accent);
  color: var(--pc-accent-bright);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pc-soon { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); font-size: 0.8rem; }
.pc-soon .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34D399; }

/* Différenciateurs */
.diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.diff-card { padding: 32px 0 40px; border-top: 1px solid var(--line-strong); }
.diff-head { margin-bottom: 20px; }
.diff-num { color: var(--orange-bright); font-size: 2.125rem; font-weight: 300; font-stretch: var(--wide); line-height: 1.1; }
.diff-line { display: none; }
.diff-card h3 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.25; }
.diff-card p { margin: 0; font-size: 1rem; }

/* Questions */
.questions-wrap { padding: var(--section) 0; background: var(--black-soft); border-top: 1px solid var(--line); }
.q-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.q-card { padding: 28px 0 32px; border-top: 1px solid var(--line-strong); }
.q-card .mark { margin-bottom: 12px; color: var(--orange-bright); font-size: 1.6rem; font-weight: 500; line-height: 1; }
.q-card p { margin: 0; color: var(--white); font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.q-answer { margin-top: 14px; color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; }
.q-elipsis { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--line-strong); color: var(--text-muted); font-size: 1rem; }

.dash-offer { margin-top: 56px; padding: 44px 48px; }
.dash-offer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 40px; }
.dash-offer-body { flex: 1 1 460px; min-width: 0; max-width: 44rem; }
.dash-offer-tag {
  margin-bottom: 14px;
  color: var(--orange-bright);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
.dash-offer h3 { margin: 0 0 12px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.dash-offer p { margin: 0; font-size: 1rem; }
.dash-offer p strong { color: var(--white); }
.dash-offer .btn { flex: 0 0 auto; }

/* Concepteurs */
.founder-card {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 48px 0;
  border-top: 1px solid var(--line-strong);
}
.founder-card.flip { grid-template-columns: minmax(0, 1fr) 200px; }
.portrait-wrap { position: relative; aspect-ratio: 1 / 1.1; overflow: hidden; background: var(--navy); }
.portrait-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portrait-initials {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 3rem;
  font-weight: 300;
  font-stretch: var(--wide);
}
.portrait-wrap.fallback .portrait-img { display: none; }
.portrait-wrap.fallback .portrait-initials { display: flex; }

.founder-role {
  margin-bottom: 12px;
  color: var(--orange-bright);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
}
.founder-name {
  margin-bottom: 18px;
  color: var(--white);
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  font-weight: 500;
  font-stretch: var(--wide);
  line-height: 1.15;
}
.founder-body p { max-width: 46rem; margin: 0 0 14px; font-size: 1rem; }
.founder-body p strong { color: var(--white); }
.founder-body p.punch {
  margin: 22px 0;
  color: var(--orange-bright);
  font-size: 1.1875rem;
  font-weight: 300;
  font-stretch: 112%;
  line-height: 1.45;
}
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.tag {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.founder-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.linkedin-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-size: 0.95rem; }
.linkedin-link svg { flex: none; color: var(--orange-bright); }
.linkedin-link svg:not([fill="none"]) { fill: var(--orange-bright); }
.linkedin-link:hover { color: var(--orange-bright); }

.founders-together { margin-top: 8px; padding: 56px; }
.founders-together h3 { max-width: 28ch; margin: 0 0 20px; font-size: clamp(1.5rem, 2.4vw, 2rem); }
.founders-together p { max-width: 58ch; margin: 0; font-size: 1.04rem; }
.founders-together p + p { margin-top: 1em; }

/* Appel à l'action */
.page-home .cta-banner { padding: var(--section) 0; border-top: 1px solid var(--line); }
.page-home .cta-banner .inner { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.cta-banner h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 300; line-height: 1.12; }
.cta-banner h2 em { font-weight: 600; }

/* Contact */
.contact-block { padding: var(--section) 0; background: var(--black-soft); border-top: 1px solid var(--line); }
.contact-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.contact-block h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.contact-block .lead { margin: 20px 0 0; }
.contact-info { margin-top: 40px; }
.info-line {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 1rem;
}
.info-line:last-child { border-bottom: 1px solid var(--line); }
.info-line .ic { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--orange-bright); }
.info-line a { color: var(--white); font-weight: 500; }
.info-line a:hover { color: var(--orange-bright); }

form.contact-form { padding: 44px; background: var(--card); background-image: var(--card-grad); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--black);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--t);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-dim); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--orange-bright); outline: 1px solid var(--orange-bright); outline-offset: 0; }
.form-submit { width: 100%; margin-top: 10px; }
.form-note { margin: 18px 0 0; color: var(--text-dim); font-size: 0.8rem; line-height: 1.5; }
.form-msg { display: none; margin-top: 14px; padding: 14px 16px; font-size: 0.92rem; }
.form-msg.success { display: block; border: 1px solid #2F6B4A; background: #0D1F17; color: #6BCD8C; }

/* ==========================================================================
   12 — Pages produit (accent bleu ou vert via la classe du <body>)
   ========================================================================== */
.page-product .eyebrow { margin-bottom: 18px; }
.page-product .block { padding: var(--section) 0; border-top: 1px solid var(--line); }
.page-product .block h2 { font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.page-product .block h2 + p { margin-top: 20px; }

.page-product .hero { padding: 72px 0 0; }
.hero-inner { max-width: 60rem; }
.badge-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.badge-brand, .badge-new {
  color: var(--accent-bright);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
}
.badge-new { padding: 3px 8px; border: 1px solid var(--accent); border-radius: var(--radius); }
.page-product .hero h1 { font-size: clamp(2rem, 3.9vw, 3.4rem); font-weight: 300; line-height: 1.1; }
.page-product .hero-lead { max-width: 48rem; margin: 28px 0 0; }
.page-product .hero-lead strong { color: var(--white); }
.page-product .cta-row { margin-top: 36px; }

.browser-frame { margin-top: 64px; border: 1px solid var(--line-strong); background: var(--card); }
.browser-frame .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--navy);
}
.browser-frame .bar span { width: 8px; height: 8px; background: var(--line-strong); }
.browser-frame .bar .url {
  width: auto;
  height: auto;
  margin-left: 12px;
  background: none;
  color: var(--text-dim);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.browser-frame img { display: block; width: 100%; height: auto; }
.shot-note { margin-top: 14px; color: var(--text-dim); font-size: 0.8rem; }

.pos-strip { padding: 72px 0 var(--section); }
.pos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.pos-item { padding-top: 24px; border-top: 2px solid var(--accent); }
.pos-item.dim { border-top-color: var(--line-strong); }
.pos-item .k {
  margin-bottom: 10px;
  color: var(--accent-bright);
  font-size: 1.3rem;
  font-weight: 500;
  font-stretch: var(--wide);
  line-height: 1.25;
}
.pos-item.dim .k { color: var(--white); }
.pos-item p { margin: 0; font-size: 0.98rem; }

.btm-wrap, .mech-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.btm-nodes { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.btm-chip {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-soft);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btm-points, .mech-points { margin-top: 28px; }
.btm-point, .mech-point {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.btm-point:last-child, .mech-point:last-child { border-bottom: 1px solid var(--line); }
.btm-point .n, .mech-point .n {
  color: var(--accent-bright);
  font-size: 1.9rem;
  font-weight: 300;
  font-stretch: var(--wide);
  line-height: 1.1;
}
.btm-point h4, .mech-point h4 { margin: 0 0 4px; font-size: 1.0625rem; }
.btm-point p, .mech-point p { margin: 0; font-size: 0.96rem; }
.btm-fig, .mech-fig { padding: 32px; background: var(--navy); background-image: var(--navy-grad); }
.btm-fig svg, .mech-fig svg { display: block; width: 100%; height: auto; }
.btm-fig .cap, .mech-fig .cap { margin-top: 16px; color: var(--text-dim); font-size: 0.6875rem; letter-spacing: 0.16em; text-align: center; }

.flows-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.flow-card { padding: 32px 0 40px; border-top: 1px solid var(--line-strong); }
.flow-card .num {
  display: block;
  margin-bottom: 14px;
  color: var(--accent-bright);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps);
}
.flow-card h3 { margin: 0 0 12px; font-size: 1.3rem; line-height: 1.25; }
.flow-card p { margin: 0; font-size: 0.98rem; }
.flow-card .tags { margin: 18px 0 0; }
.flow-card .tags span {
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.screen-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 88px;
}
.screen-row.flip { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr); }
.screen-row.flip .screen-txt { order: 2; }
.screen-row.flip .screen-img { order: 1; }
.screen-txt h3 { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.2; }
.screen-txt p { margin: 0; font-size: 1rem; }
.screen-txt ul { margin: 20px 0 0; padding: 0; list-style: none; }
.screen-txt li { padding: 10px 0; border-top: 1px solid var(--line); color: var(--text-soft); font-size: 0.94rem; }
.screen-txt li:last-child { border-bottom: 1px solid var(--line); }
.screen-img { border: 1px solid var(--line-strong); background: var(--navy); }
.screen-img img { display: block; width: 100%; height: auto; }

.steps-wrap { padding: 44px; background: var(--navy); background-image: var(--navy-grad); }
.steps-line { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.step { padding-top: 18px; border-top: 1px solid var(--accent); }
.step .s-num {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-bright);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
}
.step h4 { margin: 0 0 6px; font-size: 1.0625rem; }
.step p { margin: 0; font-size: 0.88rem; line-height: 1.5; }
.steps-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
  color: var(--text-soft);
  font-size: 0.94rem;
}
.steps-foot .hil { color: var(--accent-bright); font-weight: 600; }

.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.sec-card { padding: 28px 0 32px; border-top: 1px solid var(--line-strong); }
.sec-card .ico { display: flex; align-items: center; width: 24px; height: 24px; margin-bottom: 16px; color: var(--accent-bright); }
.sec-card .ico svg { width: 22px; height: 22px; }
.sec-card h4 { margin: 0 0 8px; font-size: 1.0625rem; }
.sec-card p { margin: 0; font-size: 0.92rem; }

.tech-strip {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.9;
}
.tech-strip b { color: var(--white); font-weight: 500; }
.tech-strip b { display: inline-block; }
.tech-strip .sep { display: inline-block; margin: 0 12px; color: var(--accent); }
.tech-strip { overflow-wrap: anywhere; }

.cross-band { padding: 0 0 var(--section); }
.cross-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.cross-inner .txt { max-width: 36rem; }
.cross-inner h3 { margin: 0 0 6px; font-size: 1.3rem; }
.cross-inner p { margin: 0; font-size: 0.96rem; }
.cross-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cross-ctas .btn-ghost {
  padding: 0 22px;
  border-color: var(--line-strong);
  text-decoration: none;
}
.cross-ctas .btn-ghost:hover { border-color: var(--accent-bright); }

.page-product .cta-banner { padding: 0 0 var(--section); }
.page-product .cta-banner .inner { padding: 72px 56px; }
.page-product .cta-banner h2 { margin: 0 0 16px; font-size: clamp(1.75rem, 3vw, 2.6rem); }
.page-product .cta-banner p { max-width: 38rem; margin: 0 0 32px; }

/* ==========================================================================
   13 — Pages durabilité
   ========================================================================== */
.page-doc .container { max-width: 820px; }
.page-doc main { padding: 72px 0 24px; }
.page-doc h1 { margin: 0 0 28px; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 300; line-height: 1.1; }
.page-doc h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; font-stretch: 100%; line-height: 1.35; }
.page-doc strong { color: var(--white); }
.note { margin: 28px 0; padding: 22px 26px; font-size: 0.98rem; }
.note p:last-child { margin-bottom: 0; }
.items { margin: 40px 0 12px; }
.item { display: flex; align-items: flex-start; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-strong); }
.item:last-child { border-bottom: 1px solid var(--line-strong); }
.item .ico {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--orange-bright);
  border-radius: var(--radius);
  color: var(--orange-bright);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.item p { margin: 0; font-size: 0.96rem; }
.item .dl {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 2px;
  color: var(--orange-bright);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.item .dl:hover { color: var(--white); }
.contact-line { margin: 0 0 0.5em; }
.contact-line a { color: var(--orange-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   14 — Pied de page
   ========================================================================== */
footer { border-top: 1px solid var(--line); background: var(--black); color: var(--text-muted); }
footer a:hover { color: var(--accent-bright); }

.page-home footer { padding: 72px 0 36px; }
.footer-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
footer h4 {
  margin: 0 0 18px;
  color: var(--orange-bright);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--caps);
  text-transform: uppercase;
}
footer .foot-block p { max-width: 36ch; margin: 20px 0 0; color: var(--text-muted); font-size: 0.92rem; }
footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
footer ul li { color: var(--text-soft); font-size: 0.94rem; }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 0.82rem;
}
.foot-bottom a { text-decoration: underline; text-underline-offset: 3px; }

.page-product footer, .page-doc footer { padding: 32px 0 44px; color: var(--text-dim); font-size: 0.88rem; }
.page-doc footer { margin-top: 56px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.foot-row a { color: var(--text-soft); }

/* ==========================================================================
   15 — Survols et or de la lampe
   Des effets discrets au passage de la souris : un filet qui se déploie,
   un voile marine, un halo. Rien ne saute, rien ne clignote.
   ========================================================================== */

/* L'or de la lampe : dégradé vertical très serré sur la promesse et les numéros */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-home .hero h1 .accent,
  .point-num,
  .diff-num {
    background: var(--orange-text);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* Cases à filet : voile marine + filet de couleur qui se déploie de gauche à droite */
.diff-card, .q-card, .sec-card, .flow-card, .pos-item,
.point, .btm-point, .mech-point, .item, .founder-card { position: relative; isolation: isolate; }

.diff-card::after, .q-card::after, .sec-card::after, .flow-card::after, .pos-item::after,
.point::after, .btm-point::after, .mech-point::after, .item::after, .founder-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  background: linear-gradient(180deg, rgba(17, 26, 51, 0.5) 0%, rgba(12, 17, 31, 0.25) 60%, rgba(12, 17, 31, 0) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
.diff-card::before, .q-card::before, .sec-card::before, .flow-card::before,
.point::before, .btm-point::before, .mech-point::before, .item::before, .founder-card::before,
.stat .num::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -20px;
  right: -20px;
  height: 1px;
  background: var(--line-grad);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.stat .num { position: relative; }
.stat .num::after { top: auto; bottom: -1px; left: 0; right: 0; }

/* Carte produit : filet d'accent, halo dans l'angle, visuel qui s'approche à peine */
.pc-sco  { --pc-glow: rgba(78, 143, 232, 0.08); }
.pc-proc { --pc-glow: rgba(59, 184, 132, 0.07); }
.pc-ins  { --pc-glow: rgba(217, 67, 92, 0.07); }
.product-card { position: relative; isolation: isolate; overflow: hidden; }
.product-card::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pc-accent) 0%, transparent 90%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.product-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(560px circle at 0% 100%, var(--pc-glow), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.pc-shot { overflow: hidden; }
.pc-shot img, .portrait-img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Familles de logiciels : la carte se soulève de 3 px, un voile à sa couleur apparaît */
.fam-card, .fam-ammelis { position: relative; isolation: isolate; transition: transform 0.35s ease; }
.fam-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(60, 84, 150, 0.14) 0%, transparent 70%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--fam, #3C5496) 13%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.tag, .btm-chip, .screen-img { transition: border-color var(--t), color var(--t); }

@media (hover: hover) {
  .diff-card:hover::after, .q-card:hover::after, .sec-card:hover::after, .flow-card:hover::after, .pos-item:hover::after,
  .point:hover::after, .btm-point:hover::after, .mech-point:hover::after, .item:hover::after, .founder-card:hover::after,
  .product-card:hover::after, .fam-card:hover::after { opacity: 1; }

  .diff-card:hover::before, .q-card:hover::before, .sec-card:hover::before, .flow-card:hover::before,
  .point:hover::before, .btm-point:hover::before, .mech-point:hover::before, .item:hover::before, .founder-card:hover::before,
  .stat:hover .num::after, .product-card:hover::before { transform: scaleX(1); }

  .product-card:hover .pc-shot img { transform: scale(1.035); }
  .founder-card:hover .portrait-img { transform: scale(1.04); }
  .fam-card:hover, .fam-ammelis:hover { transform: translateY(-3px); }
  .tag:hover, .btm-chip:hover { border-color: var(--accent-bright); color: var(--white); }
  .screen-img:hover { border-color: var(--accent); }
  .page-home .nav-cta:hover, .page-doc .nav-cta:hover { background-image: var(--orange-btn); }
}

/* ==========================================================================
   Adaptations aux écrans étroits
   ========================================================================== */
@media (max-width: 1200px) {
  .fam-grid, .stack-arrows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stack-arrows span:nth-child(n+4) { display: none; }
  .fam-or { grid-column: 1 / -1; padding: 6px 0; }
  .fam-ammelis { grid-column: 1 / -1; }
  .q-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .products-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  :root { --section: 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hv-lamp { max-height: 480px; }
  .stats-strip { padding: 72px 0; }
  .stats-grid { grid-template-columns: minmax(0, 1fr); }

  .split-grid { grid-template-columns: minmax(0, 1fr); }
  .split-panel { gap: 48px; padding: 72px 48px; }
  .split-panel::before { left: -208px; bottom: -331px; width: 620px; height: 620px; }
  .split-body { padding: 64px 0 72px; }

  .diff-grid, .pos-grid, .flows-grid { grid-template-columns: minmax(0, 1fr); }
  .pos-grid { gap: 32px; }
  .sec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .btm-wrap, .mech-wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .screen-row, .screen-row.flip { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-bottom: 64px; }
  .screen-row.flip .screen-txt { order: 1; }
  .screen-row.flip .screen-img { order: 2; }
  .footer-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 800px) {
  .founder-card, .founder-card.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .founder-card.flip .portrait-wrap { order: -1; }
  .portrait-wrap { max-width: 160px; }
  .founders-together { padding: 36px 28px; }
}

@media (max-width: 700px) {
  :root { --gutter: 22px; --section: 72px; }
  .announce .sep, .announce .hide-mobile { display: none; }
  .logo-img { height: 38px; }
  .page-home .hero { padding: 40px 0 72px; }
  .cta-row { gap: 12px 28px; }
  .btn { padding: 0 22px; }
  .btn-ghost { padding: 0; }
  .decision-layer { padding: 24px 20px; }
  .dl-pill { flex: 0 1 auto; max-width: 100%; text-align: center; }
  .dash-offer::before, .founders-together::before { display: none; }
  .split-panel { padding: 56px 28px; }
  .trans-layer { padding: 18px 20px; }
  .dash-offer { padding: 32px 24px; }
  .dash-offer .btn { flex: 1 1 auto; width: 100%; }
  form.contact-form { padding: 32px 24px; }
  .form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps-wrap { padding: 30px 24px; }
  .steps-line { grid-template-columns: minmax(0, 1fr); }
  .page-product .cta-banner .inner { padding: 48px 28px; }
  .page-product .hero { padding-top: 48px; }
  .browser-frame { margin-top: 44px; }
}

@media (max-width: 640px) {
  .fam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack-arrows { display: none; }
  .q-grid { grid-template-columns: minmax(0, 1fr); }
  .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .point, .btm-point, .mech-point { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .footer-row { grid-template-columns: minmax(0, 1fr); }
}