/* ============================================================
   OPTIVVIA — site vitrine — import fidèle de la maquette Figma
   ============================================================ */

:root{
  --blue:#2f6bff;
  --blue-dark:#1f5486;
  --yellow:#f4cc2f;
  --white:#fbfcff;
  --ink:#313336;
  --ink2:#27292b;
  --gray:#828282;
  --gray2:#6b7280;
  --lightblue:#f0f6ff;
  --line:#f5f5f5;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter',sans-serif;
  color:#000;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
img{display:block;}
a{text-decoration:none;color:inherit;}

.site{
  width:1440px;
  margin:0;
  position:relative;
  overflow:hidden;
}

/* ---- helpers ---- */
.brand-blue{color:var(--blue);}
.brand-yellow{color:var(--yellow);}
.brand-black{font-weight:900;}
.light{font-weight:300;}
.eyebrow{
  font-style:italic;
  font-size:12px;
  letter-spacing:.6px;
  color:var(--blue-dark);
  margin:0;
  text-transform:uppercase;
}

/* ============================ HERO ============================ */
.hero{
  position:relative;
  width:1440px;
  /* Premier écran : la hauteur suit la hauteur visible de la fenêtre, exprimée en
     unités de maquette par fitStage() (le hero est zoomé comme le reste du site).
     min-height:fit-content garantit qu'une fenêtre basse ne rogne jamais le
     contenu — le hero devient alors simplement un peu plus haut que l'écran. */
  height:var(--screen-h,1000px);
  min-height:fit-content;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;z-index:0;
}
/* ---- barre de navigation ----
   Vit hors de .site (voir index.html) : un position:fixed placé sous un ancêtre
   transformé se positionne par rapport à cet ancêtre et non à la fenêtre. Elle
   échappe du même coup au zoom du canevas et garde des tailles réelles, ce qui
   est le comportement attendu d'une barre fixe — elle ne doit pas grossir avec
   la fenêtre. */
.menu{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,4vw,64px);
  transition:background .25s, box-shadow .25s, padding .25s;
}
.menu__logo{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.wordmark{
  font-family:'Inter',sans-serif;font-weight:400;font-size:20px;
  letter-spacing:4px;color:var(--white);text-transform:uppercase;
  white-space:nowrap;transition:color .25s;
}
/* Le point de la maquette est remplacé par la marque Optivvia. Elle porte son
   propre disque bleu et sa transparence : ni fond ni arrondi à poser ici. 26 px
   et non les 13 px du point — en dessous, la feuille n'est plus identifiable.
   Le logo complet, lui, reste réservé au pied de page : bleu foncé sur gris, il
   ne se lirait pas sur le hero, et son format horizontal ne laisse pas la place
   aux trois liens sous 480 px. */
.wordmark__mark{
  width:26px;height:26px;flex:0 0 auto;
  display:block;object-fit:contain;
}
/* Les liens, le selecteur de langue et le bouton de menu forment un bloc : la
   typographie est portee ici, et non sur la liste, pour que le selecteur en
   herite alors qu'il en est sorti (il reste visible quand la liste se replie). */
.menu__droite{
  display:flex;align-items:center;gap:11px;
  font-family:'Instrument Sans',sans-serif;
  font-size:18px;color:var(--white);
  transition:color .25s;
}
.menu__nav{
  display:flex;gap:11px;align-items:center;
  list-style:none;margin:0;padding:0;
}
.menu__nav a{display:block;padding:8px;border-radius:8px;white-space:nowrap;transition:opacity .2s;}
.menu__nav a:hover{opacity:.7;}

/* Bouton de menu : masque tant que les liens tiennent sur la barre. */
.menu__burger{
  display:none;
  width:44px;height:44px;padding:0;margin:0;
  border:none;background:none;color:inherit;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.menu__burger span{
  display:block;width:22px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s, opacity .2s;
}
/* les trois barres deviennent une croix : 2 px de trait et 5 px d'ecart, les
   traits extremes sont donc a 7 px du centre */
.menu--ouvert .menu__burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu--ouvert .menu__burger span:nth-child(2){opacity:0;}
.menu--ouvert .menu__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Selecteur de langue. La langue courante n'est pas un lien : renvoyer vers la
   page ou l'on se trouve deja n'apporte rien, et le contraste de graisse suffit
   a montrer laquelle est active. */
.menu__langues{display:flex;align-items:center;margin-left:6px;flex:0 0 auto;}
.menu__langue-active{padding:8px 5px;font-weight:700;}
.menu__langues-sep{opacity:.45;}
.menu__langues a{padding:8px 5px;opacity:.7;}
.menu__langues a:hover{opacity:1;}

/* Passé le hero, la barre survole des sections blanches : l'encre blanche y
   disparaîtrait. Elle prend donc un fond opaque et une encre sombre. */
.menu--scrolled{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 12px rgba(0,0,0,.09);
  padding-top:10px;padding-bottom:10px;
}
.menu--scrolled .wordmark{color:var(--blue-dark);}
.menu--scrolled .menu__droite{color:var(--ink);}

/* la barre recouvre le haut de la fenêtre : sans cette réserve, une ancre
   amènerait le titre de section juste dessous, à moitié masqué */
html{scroll-padding-top:80px;}

.hero__textes{
  position:relative;z-index:2;
  width:742px;
  /* la barre de navigation n'est plus dans le flux du hero : sa hauteur est
     reprise en réserve haute, sinon le bloc remonterait sous la barre */
  padding:72px 40px 32px 80px;
  display:flex;flex-direction:column;gap:28px;
  /* occupe l'espace restant sous le menu et s'y centre : le bloc reste équilibré
     quelle que soit la hauteur d'écran */
  flex:1;justify-content:center;
}
.hero__title{
  margin:0;
  font-weight:600;
  font-size:64px;
  line-height:76px;
  color:var(--white);
  width:576px;
}
.hero__subtitle{
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:24px;line-height:35px;
  color:var(--white);width:532px;font-weight:400;
}
.hero__subtitle .brand-yellow{font-weight:900;}
.hero__subtitle strong{font-weight:600;}
.hero__boutons{display:flex;gap:40px;padding:16px 0 0;}
.btn{
  height:44px;border-radius:12px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Sans',sans-serif;
  font-size:18px;color:var(--white);width:246px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:transform .15s, filter .15s;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);}
.btn--video{background:var(--blue);}
.btn--demo{background:var(--yellow);}
.hero__video{
  /* ancrée en bas à droite (et non plus à un "top" fixe) pour suivre la hauteur
     variable du hero — 291px = 1440 - 903 - 246, sa position d'origine */
  position:absolute;z-index:2;right:291px;bottom:100px;
  width:246px;height:138px;border:2px solid #fff;border-radius:14px;
  overflow:hidden;padding:0;background:none;cursor:pointer;
  transition:transform .15s;
}
.hero__video:hover{transform:scale(1.03);}
.hero__video img{width:100%;height:100%;object-fit:cover;}
.hero__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.55);
}
.hero__play::before{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:10px 0 10px 17px;
  border-color:transparent transparent transparent #fff;
}

/* ====================== VISION GLOBALE ======================
   Dimensions resserrées par rapport à la maquette 1440x∞ : chaque section doit
   tenir dans une hauteur de fenêtre (~700 unités) tout en occupant la pleine
   largeur. Les proportions internes sont conservées, seuls les blancs et les
   corps de texte sont réduits. */
.vision{
  background:#fff;
  padding:44px 60px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start;
}
.vision .eyebrow{width:100%;}
.vision__container{
  width:100%;
  border-radius:32px;
  box-shadow:0 8px 4px rgba(0,0,0,.04);
  background-image:linear-gradient(0.8deg, rgba(47,107,255,.048) 1%, rgba(31,84,134,0) 97%);
  padding:44px 48px;
  display:flex;flex-direction:column;gap:20px;align-items:center;
}
.vision__bloc{width:100%;display:flex;flex-direction:column;align-items:center;padding:0;}
.vision__title{
  margin:0;font-weight:600;font-size:48px;line-height:1.1;
  text-align:center;width:100%;
}
.vision__text{
  margin:0;font-size:24px;line-height:1.4;width:100%;color:var(--ink);
}
.vision__text .brand-black{font-weight:900;}
.vision__icones{
  display:flex;gap:20px;justify-content:center;width:100%;padding:0;
}
.vicon{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;
  filter:drop-shadow(0 4px 2px rgba(0,0,0,.25));
}
.vicon__img{height:124px;display:flex;align-items:center;justify-content:center;}
.vicon__img img{height:124px;width:auto;object-fit:contain;}
.vicon__label{margin:0;font-weight:800;font-size:15px;text-align:center;color:#000;}
.vision__cards{
  display:flex;gap:20px;justify-content:center;width:100%;padding:0;
}
.vcard{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 4px 4px rgba(0,0,0,.1);padding:16px;
  min-height:108px;display:flex;align-items:center;justify-content:center;
}
.vcard p{
  margin:0;font-weight:600;font-style:italic;font-size:19px;
  color:var(--blue-dark);text-align:center;width:100%;line-height:1.2;
}

/* ======================= ÉCOSYSTÈME =======================
   Le schéma fait 1086 unités de haut à lui seul : empilé sous le texte, il rend
   la section trois fois trop haute. On passe donc en deux colonnes — texte à
   gauche, schéma à droite — et le schéma est réduit d'un bloc.
   Ce facteur porte sur .ecosysteme__visuel, qui garde son repère interne de
   1240x1086 : les six étiquettes restent positionnées aux coordonnées d'origine,
   aucune n'a besoin d'être recalculée. */
.ecosysteme{
  background:#fff;padding:40px 60px;
  display:flex;flex-direction:row;gap:48px;align-items:center;
}
.ecosysteme__intro{display:flex;flex-direction:column;gap:20px;padding:0;width:520px;flex:0 0 520px;}
.ecosysteme__title{
  margin:0;font-weight:700;font-size:40px;line-height:1.2;
  letter-spacing:1.2px;width:100%;
}
.ecosysteme__text{
  margin:0;font-size:19px;line-height:1.45;letter-spacing:.6px;
  width:100%;color:var(--ink2);
}
.ecosysteme__text .brand-black{font-weight:900;}
.ecosysteme__schema{
  flex:1;height:620px;padding:0;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.ecosysteme__visuel{
  position:relative;width:1240px;height:1086px;overflow:hidden;
  flex:0 0 auto;
  transform:scale(.57);          /* 1240x1086 -> ~707x619, tient dans la colonne */
  transform-origin:center center;
}
.ecosysteme__image{
  position:absolute;left:-59px;top:43px;width:1283px;height:1027px;
  object-fit:contain;pointer-events:none;
}
.eco-label{
  position:absolute;background:var(--lightblue);border-radius:20px;
  padding:8px 16px;text-align:center;
}
.eco-label strong{display:block;font-weight:700;font-size:24px;letter-spacing:1.68px;color:#000;line-height:1.2;}
.eco-label span{display:block;font-weight:500;font-size:20px;letter-spacing:1.4px;color:var(--ink);line-height:1.4;margin-top:6px;}
.eco-label--assure{left:94px;top:223px;width:224px;}
.eco-label--controle{left:10px;top:593px;width:336px;}
.eco-label--reassureur{left:233px;top:877px;width:286px;}
.eco-label--courtiers{left:764px;top:938px;width:286px;}
.eco-label--ingenieur{left:939px;top:311px;width:266px;}
.eco-label--assureurs{left:602px;top:59px;width:200px;}

/* ======================= RÉFÉRENCES ======================= */
.references{
  /* seul le blanc vertical est réduit (100 -> 60) : la section tenait déjà
     presque dans un écran, elle passe ainsi à --fit = 1, pleine largeur */
  background:#fff;padding:60px 80px;
  display:flex;flex-direction:column;gap:56px;align-items:flex-start;
}
.references .eyebrow{width:100%;}
.references__cards{display:flex;gap:32px;width:100%;padding:10px;}
.ref-card{
  flex:1;background:var(--lightblue);border-radius:24px;height:174px;padding:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;color:#000;
}
.ref-card__num{font-weight:700;font-size:64px;letter-spacing:3.2px;line-height:1;width:100%;}
.ref-card__label{margin:0;font-weight:700;font-size:20px;letter-spacing:1px;width:100%;}
.ref-card__big{font-weight:700;font-size:54px;line-height:40px;text-align:center;letter-spacing:1px;}
.ref-card--plain .ref-card__label{margin-top:8px;}

.logo-slider{width:100%;overflow:hidden;padding:10px 0;}
.logo-track{display:flex;gap:80px;align-items:center;width:max-content;animation:marquee 40s linear infinite;}
.logo-slider:hover .logo-track{animation-play-state:paused;}
.logo{height:200px;width:230px;flex:0 0 auto;opacity:.75;}
.logo img{height:200px;width:230px;object-fit:contain;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ======================= CAS D'USAGES ======================= */
.usages{
  padding:28px 40px;
  /* le dégradé est porté par .screen--usages pour rester pleine largeur même
     quand la section est réduite pour tenir dans un écran */
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
/* titre et paragraphe côte à côte : empilés, l'accroche mangeait à elle seule
   un tiers de la hauteur disponible et écrasait le slider */
.usages__intro{
  background:transparent;padding:0;width:100%;
  display:flex;flex-wrap:wrap;gap:10px 48px;align-items:flex-start;
}
.usages__intro .eyebrow{flex:0 0 100%;}
.usages__title{margin:0;font-weight:700;font-size:40px;line-height:1.15;flex:0 0 600px;width:auto;}
.usages__text{margin:0;font-size:19px;line-height:1.45;flex:1;min-width:320px;width:auto;color:var(--ink);}
.usages__text .brand-black{font-weight:900;}

.slider{width:100%;display:flex;flex-direction:column;gap:12px;}
.slider__viewport{
  width:100%;overflow:hidden;border-radius:24px;
  background:var(--white);box-shadow:0 16px 40px rgba(0,0,0,.06);padding:16px;
  /* le navigateur garde le défilement vertical et le zoom à deux doigts ;
     seul le geste horizontal revient au script (balayage entre les slides) */
  touch-action:pan-y pinch-zoom;
}
/* évite qu'un glissé du doigt n'attrape une icône au lieu de faire défiler */
.slider__viewport img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;}
.slider__track{display:flex;transition:transform .5s ease;}
.slide{
  position:relative;flex:0 0 100%;height:420px;border-radius:12px;overflow:hidden;
  background-image:var(--slide-bg);background-size:cover;background-position:center;
  display:flex;align-items:flex-start;
}
.slide__panel{
  position:relative;z-index:2;margin:20px;
  background:rgba(255,255,255,.1);border:2px solid #fff;border-radius:16px;
  padding:16px 18px;color:#fff;width:400px;display:flex;flex-direction:column;gap:12px;
}
.slide__panel--light{
  background:rgba(255,255,255,.7);border:none;color:#000;width:440px;
  padding:22px 18px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.slide__title{margin:0;font-weight:700;font-size:26px;line-height:1.1;}
.slide__title--dark{color:#000;}
.slide__title--center{text-align:center;}
.slide__lead{margin:0;font-weight:400;font-size:15px;line-height:19px;}
.slide__detail{
  position:relative;z-index:2;margin:20px 20px 20px 0;align-self:center;
  background:#fff;border-radius:20px;box-shadow:0 8px 4px rgba(0,0,0,.08);
  padding:16px 24px 16px 16px;width:440px;
}
.slide__detail p{margin:0 0 6px;font-size:14px;line-height:20px;color:#000;}
.slide__detail strong{font-weight:700;font-size:16px;}
.slide__bullets{margin:0;font-weight:700;font-size:14px;line-height:20px;color:#000;}

.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.checks li{display:flex;gap:12px;align-items:center;}
.checks li img{width:26px;height:26px;flex:0 0 26px;}
.checks li span{font-weight:700;font-size:14px;line-height:19px;color:#000;}
.checks--blue li span{color:var(--blue);}

.benefit{
  display:flex;gap:8px;align-items:center;border-radius:14px;padding:10px 12px;
}
.benefit--blue{background:var(--blue);color:#fff;justify-content:center;text-align:center;}
.benefit--blue span{font-weight:700;font-size:14px;line-height:19px;}
.benefit--soft{background:rgba(47,107,255,.18);color:var(--blue-dark);}
.benefit--soft span{font-weight:700;font-size:14px;line-height:19px;}
.benefit__icon{width:44px;height:44px;flex:0 0 44px;}
.benefit b{font-weight:900;}

.slider__nav{display:flex;align-items:center;justify-content:center;gap:18px;}
.slider__arrow{
  border:none;background:var(--blue);color:#fff;width:38px;height:38px;border-radius:10px;
  font-size:18px;cursor:pointer;transition:filter .15s, transform .15s;
}
.slider__arrow:hover{filter:brightness(1.1);transform:scale(1.05);}
.slider__counter{font-weight:600;font-size:16px;color:#000;min-width:80px;text-align:center;}

/* ======================= QUI SOMMES NOUS ======================= */
.equipe{
  padding:32px 60px;
  /* dégradé porté par .screen--equipe (voir .usages) */
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
/* même principe que les cas d'usage : accroche sur une ligne, titre et
   paragraphe côte à côte, pour laisser la hauteur aux trois fiches */
.equipe__intro{
  display:flex;flex-wrap:wrap;gap:14px 48px;padding:0;width:100%;align-items:flex-start;
}
.equipe__intro .eyebrow{flex:0 0 100%;}
.equipe__title{margin:0;font-weight:700;font-size:38px;line-height:1.15;letter-spacing:1.2px;flex:0 0 560px;}
.equipe__text{margin:0;font-weight:700;font-size:18px;line-height:1.45;letter-spacing:.5px;color:var(--gray2);flex:1;min-width:320px;}
.equipe__text .light{color:var(--ink);}
.equipe__text strong{color:var(--ink);font-weight:600;}
.equipe__text .brand-black{color:var(--blue);}
.equipe__grid{display:flex;gap:24px;padding:0;background:transparent;width:100%;justify-content:center;}
.member{
  position:relative;
  background:#fff;border-radius:24px;box-shadow:0 16px 40px rgba(0,0,0,.08);
  width:400px;padding:20px 22px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;
}
/* en absolu dans l'angle : la section tient tout juste dans une hauteur d'écran,
   une ligne supplémentaire dans le flux la ferait déborder. Toutes les fiches
   n'ont pas de profil, l'absence du lien ne décale donc rien. */
.member__linkedin{
  position:absolute;top:14px;right:14px;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  opacity:.6;transition:opacity .15s, transform .15s;
}
.member__linkedin:hover{opacity:1;transform:scale(1.12);}
.member__linkedin img{width:22px;height:22px;}
/* le fond sert de pastille d'attente quand une fiche n'a pas encore de portrait :
   bleu clair de la palette plutôt qu'un gris qui ferait image cassée */
.member__avatar{width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--lightblue);}
.member__avatar img{width:104px;height:104px;object-fit:cover;border-radius:50%;}
.member__name{margin:0;font-weight:600;font-size:22px;letter-spacing:.8px;text-align:center;width:100%;}
.member__role{margin:0;font-weight:600;font-size:17px;letter-spacing:.6px;text-align:center;width:100%;}
.member__role--sm{font-size:13px;letter-spacing:.4px;}
.member__pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;width:100%;padding:0;}
.pill{
  background:var(--lightblue);border-radius:999px;padding:6px 10px;
  font-weight:600;font-size:12px;letter-spacing:.4px;color:var(--blue-dark);text-align:center;
}
.member__bio{margin:0;font-weight:400;font-size:15px;line-height:1.5;letter-spacing:.3px;color:#000;text-align:left;}

/* ======================= CONTACT =======================
   Texte, visuel et formulaire étaient empilés (≈1600 unités). Ils passent en
   trois colonnes sur une seule rangée, ce qui ramène la section à une hauteur
   d'écran sans réduire aucun des trois blocs. */
.contact{background:#fff;padding:32px 60px;}
.contact__about{position:relative;}
.contact__head{display:flex;justify-content:space-between;align-items:flex-start;gap:36px;}
.contact__copy{width:400px;flex:0 0 400px;display:flex;flex-direction:column;gap:14px;}
.contact__title{margin:0;font-weight:700;font-size:38px;letter-spacing:-.6px;line-height:1.1;}
.contact__lead{margin:0;font-size:17px;line-height:1.5;color:var(--gray);}
.contact__lead strong{font-weight:700;color:var(--gray);}
.contact__desc{margin:0;font-size:14px;line-height:1.5;color:var(--ink);}
.contact__image{width:340px;height:470px;flex:0 0 340px;border-radius:8px;overflow:hidden;background:#f7f7f7;}
.contact__image img{width:100%;height:100%;object-fit:cover;}
.contact__formcol{flex:1;min-width:380px;display:flex;flex-direction:column;}
.contact__formtitle{margin:0 0 14px;font-weight:600;font-size:22px;}
.contact__form{
  display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-start;width:100%;
}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-weight:500;font-size:13px;color:#000;}
.field--half{width:calc(50% - 10px);}
.field--full{width:100%;}
.field input,.field textarea{
  border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.05);
  padding:8px 12px;font-family:'Inter',sans-serif;font-size:14px;width:100%;background:#fff;
}
.field input{height:38px;}
.field textarea{height:96px;resize:vertical;}
.contact__submit{
  background:#000;color:#fff;border:none;border-radius:8px;padding:11px 24px;
  font-family:'Inter',sans-serif;font-weight:500;font-size:16px;cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,.05);transition:filter .15s;width:100%;
}
.contact__submit:hover{filter:brightness(1.3);}
.contact__submit:disabled{opacity:.5;cursor:default;filter:none;}
/* pot de miel : retiré du flux sans display:none ni visibility:hidden, que
   certains robots détectent pour ignorer le champ */
.field--pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact__statut{
  width:100%;margin:4px 0 0;font-size:13px;line-height:1.4;min-height:18px;
}
.contact__statut--ok{color:#1e7a3c;}
.contact__statut--ko{color:#b3261e;}
/* information RGPD au point de collecte (article 13) */
.contact__rgpd{
  width:100%;margin:2px 0 0;font-size:11px;line-height:1.45;color:var(--gray2);
}
.contact__rgpd a{color:var(--blue-dark);text-decoration:underline;}

/* ------- footer ------- */
/* remis en flux (l'ancienne version positionnait tout en absolu sur 200 unités
   de haut) ; la liste footer__items, restée à l'état de gabarit Figma
   « Topic / Pae / Page », a été retirée */
.footer{
  position:relative;margin-top:24px;padding-top:20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.footer__divider{position:absolute;top:0;left:0;right:0;height:1px;background:#e6e6e6;}
/* Le nom en texte est remplacé par le logo complet. En SVG : le canevas du site
   est agrandi par transform au-delà de 1440 px, un PNG y perdrait en netteté. */
.footer__brand{display:flex;align-items:center;}
.footer__brand img{display:block;height:30px;width:auto;}
/* placés dans la rangée existante du footer : n'ajoutent aucune hauteur à une
   section qui tient tout juste dans un écran */
.footer__legal{display:flex;gap:24px;font-size:13px;}
.footer__legal a{color:#454545;text-decoration:underline;}
.footer__legal a:hover{color:var(--blue);}
.footer__social{display:flex;gap:8px;}
.social{width:36px;height:36px;border-radius:4px;display:flex;align-items:center;justify-content:center;}
.social img{width:22px;height:22px;}

/* ===================== MISE À L'ÉCHELLE PLEINE PAGE =====================
   La maquette est un canevas fixe de 1440 px. Plutôt que de la centrer avec
   des bandes blanches au-delà de cette largeur, on la met à l'échelle de la
   largeur réelle de la fenêtre — réduction ET agrandissement — pour qu'elle
   occupe toujours 100 % de la page, dans les proportions exactes du Figma.
   Le facteur est calculé par fitStage() dans script.js et injecté en --scale. */
html,body{margin:0;width:100%;}
.stage{width:100%;overflow:hidden;}
.site{
  transform-origin:top left;      /* le zoom part du bord gauche, pas du centre */
  transform:scale(var(--scale,1));
}

/* ===================== UNE SECTION = UN ÉCRAN =====================
   Chaque section est enfermée dans un écran de la hauteur de la fenêtre
   (--screen-h, en unités de maquette). Une section plus haute que l'écran est
   réduite d'un bloc — facteur --fit calculé par fitScreens() dans script.js —
   et centrée : le contenu garde ses proportions exactes, il devient simplement
   moins large. Le fond de section, lui, reste sur toute la largeur puisqu'il
   est porté par .screen et non par la section réduite. */
.screen{
  /* repli "auto" et non une hauteur fixe : si le script ne s'exécute pas, les
     sections gardent leur hauteur naturelle au lieu d'être rognées */
  height:var(--screen-h,auto);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.screen > section{
  flex:0 0 auto;
  width:1440px;
  transform:scale(var(--fit,1));
  transform-origin:center center;
}
.screen--usages{background:linear-gradient(to bottom, rgba(47,107,255,0) 25%, rgba(47,107,255,.11) 100%);}
.screen--equipe{background:linear-gradient(to bottom, rgba(47,107,255,.11) 0%, rgba(47,107,255,0) 21%);}

/* ===================== LECTEUR VIDÉO =====================
   Volontairement en dehors de .site : un élément en position:fixed placé sous un
   ancêtre transformé se positionne par rapport à cet ancêtre et non à la fenêtre.
   Hors du canevas, la vidéo s'affiche donc à la taille réelle de l'écran, sans
   subir le zoom appliqué à la maquette. */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;padding:5vh 5vw;
}
.lightbox[hidden]{display:none;}
.lightbox__frame{
  width:min(1180px,100%);aspect-ratio:16/9;
  background:#000;border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lightbox__frame iframe{width:100%;height:100%;border:0;display:block;}
.lightbox__close{
  position:absolute;top:24px;right:32px;width:48px;height:48px;
  border:none;border-radius:50%;background:rgba(255,255,255,.15);
  color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .15s;
}
.lightbox__close:hover{background:rgba(255,255,255,.3);}

/* =====================================================================
   TÉLÉPHONES ET TABLETTES — moins de 1024 px
   =====================================================================
   Tout ce qui précède décrit un canevas fixe de 1440 px que l'on zoome pour
   remplir la fenêtre. Sur un grand écran c'est fidèle à la maquette ; sur un
   téléphone c'est intenable : ramener 1440 px à 390 divise TOUT par 3,7, les
   corps de texte comme le reste (19 px rendus à 5 px). Un zoom uniforme ne
   reflue jamais le contenu.

   Sous 1024 px on quitte donc le canevas : le site redevient un document fluide
   en une colonne, avec des tailles de texte réelles. fitStage() dans script.js
   sort au même seuil et remet --scale, --fit et --screen-h au neutre.

   Rien ici ne s'applique au-delà de 1024 px : le rendu PC est inchangé.
   ===================================================================== */
/* 1023.98 et non 1023 : sous un zoom navigateur fractionnaire la largeur peut
   valoir 1023,5 px, que clientWidth arrondit à 1023. Le seuil décimal garantit
   que la feuille de style et fitStage() basculent sur la même fenêtre. */
@media (max-width:1023.98px){

  /* ---------- sortie du canevas ---------- */
  html,body{overflow-x:hidden;}
  /* la hauteur de .stage est posée en style en ligne par fitStage() ; le
     !important couvre le cas d'un script.js resté en cache */
  .stage{height:auto !important;overflow:visible;}
  .site{width:100%;transform:none;overflow:visible;}
  /* une section n'est plus enfermée dans un écran : elle prend sa hauteur */
  .screen{height:auto;overflow:visible;display:block;}
  .screen > section{width:100%;transform:none;}

  .eyebrow{font-size:13px;}

  /* ---------- hero ---------- */
  .hero{
    width:100%;
    height:auto;
    min-height:100vh;
    min-height:100svh;   /* évite le saut à l'apparition de la barre d'URL */
  }
  /* la barre doit tenir sur une ligne à 360 px : marque et liens resserrés,
     white-space:nowrap posé plus haut empêche « Cas d'usage » de passer à la ligne
     et de doubler la hauteur de la barre */
  html{scroll-padding-top:66px;}
  .menu{padding:10px 14px;gap:8px;}
  .menu--scrolled{padding-top:8px;padding-bottom:8px;}
  .wordmark{font-size:15px;letter-spacing:2px;}
  .wordmark__mark{width:22px;height:22px;}
  .menu__droite{gap:0;font-size:13px;}
  .menu__nav{gap:0;}
  .menu__nav a{padding:11px 5px;}   /* hauteur de cible tactile */
  .menu__langues{margin-left:2px;}
  .menu__langues a,.menu__langue-active{padding:11px 4px;}

  .hero__textes{width:100%;padding:86px 20px 32px;gap:20px;}
  .hero__title{width:100%;font-size:clamp(30px,8.2vw,46px);line-height:1.15;}
  .hero__subtitle{width:100%;font-size:clamp(16px,4.2vw,19px);line-height:1.5;}
  .hero__boutons{flex-direction:column;gap:12px;padding:4px 0 0;}
  .btn{width:100%;height:48px;font-size:16px;}
  /* la vignette était ancrée à right:291px : hors écran. Elle revient dans le
     flux, sous les boutons. */
  .hero__video{
    position:relative;right:auto;bottom:auto;align-self:center;
    width:min(320px,calc(100% - 40px));height:auto;aspect-ratio:16/9;
    margin:0 0 36px;
  }

  /* ---------- vision globale ---------- */
  .vision{padding:44px 16px;gap:12px;}
  .vision__container{padding:24px 16px;gap:18px;border-radius:20px;}
  .vision__title{font-size:clamp(24px,6.4vw,34px);}
  .vision__text{font-size:clamp(16px,4.2vw,18px);line-height:1.5;}
  /* six éléments sur une rangée feraient 60 px de large : on passe en grille */
  .vision__icones{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 8px;}
  .vicon__img,.vicon__img img{height:66px;}
  .vicon__label{font-size:12px;}
  .vision__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
  .vcard{min-height:0;padding:14px 10px;}
  .vcard p{font-size:15px;}

  /* ---------- écosystème ---------- */
  .ecosysteme{flex-direction:column;align-items:stretch;padding:44px 16px;gap:24px;}
  .ecosysteme__intro{width:100%;flex:0 0 auto;gap:14px;}
  .ecosysteme__title{font-size:clamp(24px,6.4vw,34px);letter-spacing:.6px;}
  .ecosysteme__text{font-size:clamp(16px,4.2vw,18px);line-height:1.5;letter-spacing:normal;}
  .ecosysteme__schema{height:auto;width:100%;overflow:visible;}
  /* Le repère absolu de 1240x1086 n'a plus de sens une fois ramené à la largeur
     d'un téléphone : le réduire d'un bloc rendrait les étiquettes à 3 px. On le
     déplie donc — l'illustration en pleine largeur, puis les six étiquettes en
     liste. L'image ne porte aucun texte, rien n'est perdu à ce dépliage. */
  .ecosysteme__visuel{
    position:static;width:100%;height:auto;transform:none;overflow:visible;
    display:flex;flex-direction:column;gap:10px;
  }
  .ecosysteme__image{position:static;width:100%;height:auto;margin-bottom:6px;}
  .eco-label,
  .eco-label--assure,.eco-label--controle,.eco-label--reassureur,
  .eco-label--courtiers,.eco-label--ingenieur,.eco-label--assureurs{
    position:static;width:100%;
    text-align:left;padding:12px 16px;border-radius:14px;
  }
  .eco-label strong{font-size:17px;letter-spacing:.4px;}
  .eco-label span{font-size:15px;letter-spacing:normal;margin-top:2px;}

  /* ---------- références ---------- */
  .references{padding:44px 16px;gap:28px;}
  .references__cards{flex-direction:column;gap:14px;padding:0;}
  .ref-card{height:auto;padding:20px 16px;border-radius:18px;}
  .ref-card__num{font-size:clamp(38px,11vw,52px);letter-spacing:1.5px;}
  .ref-card__big{font-size:clamp(30px,9vw,42px);line-height:1.1;}
  .ref-card__label{font-size:16px;letter-spacing:.5px;}
  .logo-track{gap:36px;}
  .logo,.logo img{height:96px;width:124px;}

  /* ---------- cas d'usage ---------- */
  .usages{padding:44px 16px;gap:16px;}
  .usages__intro{gap:10px 0;}
  .usages__title{flex:0 0 100%;font-size:clamp(24px,6.4vw,34px);}
  .usages__text{flex:0 0 100%;min-width:0;font-size:clamp(16px,4.2vw,18px);line-height:1.5;}

  .slider__viewport{padding:0;border-radius:18px;}
  /* Les panneaux flottaient au-dessus de l'image, côte à côte. À cette largeur
     ils se chevaucheraient : l'image devient un bandeau d'en-tête (::before) et
     les panneaux s'empilent en dessous, sur un fond opaque. */
  .slide{
    display:block;height:auto;background-image:none;background-color:#fff;
    border-radius:18px;
  }
  .slide::before{
    content:"";display:block;height:180px;
    background-image:var(--slide-bg);background-size:cover;background-position:center;
  }
  .slide__panel{
    width:auto;margin:16px;padding:16px;
    /* le panneau translucide sur fond blanc ne se lirait plus : fond plein.
       Celui-ci reste sombre (texte blanc, accent jaune de la maquette). */
    background:var(--blue-dark);border:none;
  }
  .slide__panel--light{
    width:auto;background:var(--lightblue);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .slide__title{font-size:clamp(20px,5.6vw,24px);}
  .slide__lead{font-size:16px;line-height:1.5;}
  .slide__detail{width:auto;margin:0 16px 16px;padding:16px;align-self:auto;}
  .slide__detail p{font-size:15px;line-height:1.5;}
  .slide__detail strong{font-size:16px;}
  .slide__bullets{font-size:15px;line-height:1.5;}
  .checks li img{width:22px;height:22px;flex:0 0 22px;}
  .checks li span{font-size:15px;line-height:1.4;}
  /* seul le bénéfice de la première diapositive est hors panneau */
  .slide > .benefit{margin:0 16px 16px;}
  .benefit{padding:12px;}
  .benefit--blue span,.benefit--soft span{font-size:15px;line-height:1.4;}
  .benefit__icon{width:36px;height:36px;flex:0 0 36px;}

  /* Flèches ramenées sur les bords de la diapositive. Sous la diapositive, elles
     imposaient de faire défiler tout un contenu devenu haut avant de pouvoir
     changer de volet. Elles se posent au centre du bandeau d'image (180 px de
     haut, cf. .slide::before), donc jamais par-dessus du texte. La rangée du bas
     ne garde que le compteur. */
  .slider{position:relative;}
  /* Blanc opaque et non un bleu translucide : les cinq photos de fond sont des
     scènes sombres à dominante bleue, un bouton bleu foncé s'y confondait au
     point d'être invisible. Le blanc tranche sur n'importe quelle image. */
  .slider__arrow{
    position:absolute;top:90px;z-index:3;
    width:46px;height:46px;border-radius:50%;font-size:22px;line-height:1;
    background:#fff;color:var(--blue-dark);
    /* deux ombres : un filet qui détoure le cercle sur les illustrations claires,
       puis l'ombre portée qui le détache des photos sombres */
    box-shadow:0 0 0 1px rgba(31,84,134,.22), 0 3px 12px rgba(0,0,0,.38);
    transform:translateY(-50%);
  }
  .slider__arrow[data-dir="-1"]{left:10px;}
  .slider__arrow[data-dir="1"]{right:10px;}
  /* sans ce rappel, le survol remplacerait le translateY et ferait sauter la
     flèche de 22 px */
  .slider__arrow:hover{transform:translateY(-50%) scale(1.06);}
  .slider__counter{font-size:15px;}

  /* ---------- équipe ---------- */
  .equipe{padding:44px 16px;gap:20px;}
  .equipe__intro{gap:10px 0;}
  .equipe__title{flex:0 0 100%;font-size:clamp(24px,6.4vw,34px);letter-spacing:.6px;}
  .equipe__text{flex:0 0 100%;min-width:0;font-size:clamp(16px,4.2vw,18px);line-height:1.5;letter-spacing:normal;}
  .equipe__grid{flex-direction:column;gap:16px;}
  .member{width:100%;padding:20px 18px 22px;}
  .member__linkedin{width:44px;height:44px;top:6px;right:6px;}
  .member__name{font-size:19px;}
  .member__role{font-size:15px;}
  .member__role--sm{font-size:14px;}
  .pill{font-size:13px;padding:6px 12px;}
  .member__bio{font-size:15px;line-height:1.55;}

  /* ---------- contact ---------- */
  .contact{padding:44px 16px;}
  .contact__head{flex-direction:column;gap:24px;}
  .contact__copy{width:100%;flex:0 0 auto;}
  .contact__title{font-size:clamp(26px,7vw,36px);}
  .contact__lead{font-size:17px;line-height:1.55;}
  .contact__desc{font-size:15px;line-height:1.6;}
  /* le portrait fait 470 px de haut : en pleine largeur il repousserait le
     formulaire d'un écran entier. Il devient un bandeau. */
  .contact__image{width:100%;flex:0 0 auto;height:200px;}
  .contact__image img{object-position:center 30%;}
  .contact__formcol{width:100%;min-width:0;flex:0 0 auto;}
  .contact__formtitle{font-size:20px;}
  .field--half{width:100%;}
  .field label{font-size:14px;}
  /* 16 px au minimum : en dessous, iOS zoome tout seul à la prise de focus et
     laisse le visiteur sur une page décadrée */
  .field input,.field textarea{font-size:16px;padding:10px 12px;}
  .field input{height:46px;}
  .field textarea{height:120px;}
  .contact__submit{min-height:48px;font-size:16px;}
  .contact__statut{font-size:14px;}
  .contact__rgpd{font-size:13px;line-height:1.5;}

  /* ---------- pied de page ---------- */
  .footer{
    flex-direction:column;align-items:center;text-align:center;
    gap:14px;margin-top:32px;padding-top:24px;
  }
  .footer__brand img{height:26px;}
  .footer__legal{flex-direction:column;gap:12px;font-size:14px;}
  .social{width:44px;height:44px;}

  /* ---------- lecteur vidéo ---------- */
  .lightbox{padding:20px 16px;}
  .lightbox__close{top:12px;right:16px;}
}

/* ---------------------------------------------------------------------
   Affinage tablette — 600 à 1023 px (même régime fluide)
   En une colonne sur 768 px de large, une ligne de texte atteint 95 caractères
   là où la lecture confortable s'arrête vers 75. On ne change pas la mise en
   page, on resserre la colonne à 720 px en la centrant.
   --------------------------------------------------------------------- */
@media (min-width:600px) and (max-width:1023.98px){
  .vision,.ecosysteme,.references,.usages,.equipe,.contact{
    padding-left:max(24px,calc((100% - 720px) / 2));
    padding-right:max(24px,calc((100% - 720px) / 2));
  }
  .hero__textes{padding-left:max(20px,calc((100% - 720px) / 2));}
  .hero__title,.hero__subtitle{max-width:700px;}
  .hero__boutons{max-width:520px;}
  .hero__video{width:min(400px,calc(100% - 40px));}
  /* la fiche membre et le bandeau photo n'ont plus besoin de toute la largeur */
  .member{max-width:560px;align-self:center;}
  .contact__image{height:240px;}
}

/* ---------------------------------------------------------------------
   Barre de navigation sur les tres petits ecrans — moins de 480 px
   Marque, trois liens et selecteur de langue demandent 401 px pour 390
   disponibles. Plutot que de sacrifier la marque, ce sont les trois liens qui
   se replient derriere un bouton : marque et bascule de langue restent lues
   d'un coup d'oeil, et les liens gagnent des cibles tactiles pleine largeur.
   --------------------------------------------------------------------- */
@media (max-width:479.98px){
  .menu__burger{display:flex;}
  .menu__nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    padding:4px 0 8px;
    /* blanc plein et non translucide : le titre du hero, blanc sur fond sombre,
       transparaissait derriere les liens meme a 97 % d'opacite */
    background:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.12);
    color:var(--ink);
  }
  .menu--ouvert .menu__nav{display:flex;}
  .menu__nav a{padding:14px 20px;border-radius:0;font-size:16px;}
  /* la barre prend son fond des l'ouverture : un panneau opaque suspendu sous
     une barre transparente donnerait un bandeau flottant sans attache */
  .menu--ouvert{background:#fff;}
  .menu--ouvert .wordmark{color:var(--blue-dark);}
  .menu--ouvert .menu__droite{color:var(--ink);}
}