*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fz-md);
       line-height: var(--lh-base); color: var(--fg-default); background: var(--bg-surface);
       -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--font-sans); color: var(--fg-strong);
             line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin: 0; }
h1 { font-size: var(--fz-4xl); font-weight: var(--fw-black); }
h2 { font-size: var(--fz-3xl); font-weight: var(--fw-bold); }
h3 { font-size: var(--fz-2xl); font-weight: var(--fw-semi); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

.conteneur { max-width: 1140px; margin: 0 auto; padding: 0 var(--s-6); }
.lien-evitement { position: absolute; left: -9999px; }
.lien-evitement:focus { left: var(--s-4); top: var(--s-4); z-index: 100;
  background: var(--surface-1); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); }

.bouton { display: inline-block; background: var(--brand); color: var(--fg-onbrand);
  font-size: var(--fz-base); font-weight: var(--fw-semi); padding: var(--s-3) var(--s-6);
  border: 0; border-radius: var(--r-md); cursor: pointer; text-decoration: none;
  transition: background var(--dur-base) var(--ease-in-out); }
.bouton:hover { background: var(--brand-hover); text-decoration: none; }
.bouton:active { background: var(--brand-press); }

.section { padding: var(--s-20) 0; background: var(--surface-1); }
.section--alt { background: var(--surface-2); }
.produit--alt { background: var(--surface-2); }

.carte { background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-6); }

.champ { width: 100%; font-family: var(--font-body); font-size: var(--fz-base);
  color: var(--fg-strong); background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4); box-shadow: var(--inner-1);
  transition: border-color var(--dur-fast) var(--ease-in-out); }
.champ::placeholder { color: var(--fg-muted); }
.champ:focus { border-color: var(--brand); box-shadow: var(--focus-ring); outline: none; }
.champ[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.visuellement-masque { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

.message--erreur, .message--succes { border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  color: var(--fg-strong); font-size: var(--fz-base); margin-bottom: var(--s-4); }
.message--erreur { background: var(--surface-1); border-left: 3px solid var(--danger);
  box-shadow: inset 0 0 0 1px var(--line-1); }
.message--succes { background: var(--surface-1); border-left: 3px solid var(--success);
  box-shadow: inset 0 0 0 1px var(--line-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important;
                           animation-duration: 0.01ms !important; }
}

.entete { background: var(--surface-1); border-bottom: 1px solid var(--line-1); }
.entete--transparent { position: absolute; inset: 0 0 auto 0; z-index: 10;
  background: transparent; border-bottom: 0; }
.entete__inner { display: flex; align-items: center; gap: var(--s-8);
  padding-top: var(--s-4); padding-bottom: var(--s-4); }
.entete__logo { margin-right: auto; }
.entete__nav { display: flex; align-items: center; gap: var(--s-6); }
.entete__nav a { color: var(--fg-default); font-size: var(--fz-base);
  font-weight: var(--fw-semi); }
/* Combinateur d'enfant direct, et non de descendant : sans lui, la règle
   atteint aussi les liens du panneau déroulant des produits, qui s'ouvre sur
   un fond blanc. Elle pèse (0,2,1) contre (0,1,2) pour `.menu-produits ul a`
   plus bas, l'emporte, et le menu sortait en blanc sur blanc sur les deux
   pages à en-tête transparent — l'accueil et /solutions. */
.entete--transparent .entete__nav > a,
.entete--transparent summary { color: var(--fg-onbrand); }
.menu-produits { position: relative; }
.menu-produits summary { cursor: pointer; font-size: var(--fz-base);
  font-weight: var(--fw-semi); color: var(--fg-default); list-style: none; }
.entete--transparent .menu-produits summary { color: var(--fg-onbrand); }
.menu-produits summary::-webkit-details-marker { display: none; }
.menu-produits ul { position: absolute; top: calc(100% + var(--s-3)); left: 0; z-index: 20;
  min-width: 240px; margin: 0; padding: var(--s-2); list-style: none;
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.menu-produits ul a { display: block; padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm); color: var(--fg-default); }
.menu-produits ul a:hover { background: var(--surface-3); text-decoration: none; }

.pied { background: var(--ink-1); color: var(--surface-3); margin-top: 0; }
.pied a { color: var(--surface-3); }
.pied__colonnes { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-12); padding-top: var(--s-16); padding-bottom: var(--s-12); }
.pied__signature { font-size: var(--fz-sm); margin-top: var(--s-4); }
.pied__titre { font-size: var(--fz-md); font-weight: var(--fw-bold);
  letter-spacing: var(--tr-eyebrow); color: var(--fg-onbrand); margin-bottom: var(--s-4); }
.pied address { font-style: normal; font-size: var(--fz-sm); line-height: var(--lh-loose); }
.pied__bas { border-top: 1px solid var(--ink-2); }
.pied__bas-inner { display: flex; justify-content: space-between;
  padding-top: var(--s-5); padding-bottom: var(--s-5); font-size: var(--fz-sm); }
.pied__bas-inner a { margin-left: var(--s-6); }

@media (max-width: 720px) {
  .entete__inner { flex-wrap: wrap; gap: var(--s-4); }
  .pied__colonnes { grid-template-columns: 1fr; gap: var(--s-8); }
  .pied__bas-inner { flex-direction: column; gap: var(--s-3); }
  .pied__bas-inner a { margin-left: 0; margin-right: var(--s-4); }
}

.conteneur--texte { max-width: 760px; }
.prose h2 { font-size: var(--fz-xl); margin: var(--s-10) 0 var(--s-4); }
.prose ul { padding-left: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }

.hero { position: relative; min-height: 100vh; display: flex; align-items: center;
  background-image: url("/static/img/hero-accueil.jpg");
  background-size: cover; background-position: center; padding: var(--s-24) 0 var(--s-16); }
/* Voile calculé pour garantir au moins 4,5:1 entre le texte blanc et la photo. */
.hero__voile { position: absolute; inset: 0; background: var(--brand); opacity: .88; }
.hero__inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: 1.05fr .95fr; gap: var(--s-16); align-items: center; }
.hero__texte { color: var(--fg-onbrand); text-align: center; }
.hero__texte h1 { color: var(--fg-onbrand); font-size: var(--fz-3xl);
  margin-bottom: var(--s-8); }
.hero__texte p { font-size: var(--fz-md); line-height: var(--lh-loose); }
/* `position: relative` : ancre le panneau de confirmation, qui se superpose
   à la carte en `inset: 0`. */
.hero__carte { position: relative; padding: var(--s-8); box-shadow: var(--shadow-pop); }

.formulaire__titre { font-size: var(--fz-xl); text-align: center; margin-bottom: var(--s-2); }
.formulaire__sous-titre { font-size: var(--fz-sm); color: var(--fg-muted);
  text-align: center; margin-bottom: var(--s-6); }
.formulaire__grille { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-bottom: var(--s-4); }
.formulaire .champ { margin-bottom: 0; }
.bouton--bloc { display: block; width: 100%; margin-top: var(--s-5); }
/* Rouge et non --fg-strong : en noir, un message d'erreur ne se distingue pas
   du texte voisin. Et --fz-sm plutôt que --fz-xs, la plus petite taille du
   site, qui le noyait sous le paragraphe de consentement. */
.champ__erreur { color: var(--danger); font-size: var(--fz-sm);
  font-weight: var(--fw-semi); margin: var(--s-1) 0 0; }

.consentement-bloc { margin-top: var(--s-6); }
/* Le consentement oublié est le refus le plus fréquent, et le plus difficile
   à voir : la case est minuscule et son libellé fait huit lignes de texte
   légal. En erreur, c'est donc tout le bloc qui change d'aspect, pas
   seulement une ligne ajoutée en dessous. */
.consentement-bloc--erreur { background: var(--surface-danger);
  border: 1px solid var(--danger); border-radius: var(--r-md);
  padding: var(--s-4); }
.consentement__alerte { display: flex; align-items: center; gap: var(--s-2);
  margin: 0 0 var(--s-3); color: var(--danger); font-size: var(--fz-base);
  font-weight: var(--fw-bold); }
/* Pastille « ! » dessinée en CSS : le site n'embarque ni image d'icône ni
   police d'icônes, et un test interdit d'en charger une. */
.consentement__alerte::before { content: "!"; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--r-pill);
  background: var(--danger); color: var(--fg-onbrand);
  font-size: var(--fz-sm); font-weight: var(--fw-bold); }

.consentement { display: flex; gap: var(--s-3);
  font-size: var(--fz-xs); line-height: var(--lh-base); color: var(--fg-muted); }
/* Case agrandie : 13 px par défaut, c'est une cible difficile à viser au
   doigt comme à la souris. */
.consentement input { margin-top: var(--s-1); flex: 0 0 auto;
  width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.consentement-bloc--erreur .consentement input { accent-color: var(--danger);
  outline: 2px solid var(--danger); outline-offset: 2px; }
.consentement-bloc--erreur .consentement { color: var(--fg-default); }

.revendeur__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  align-items: center; }

.produit__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  align-items: center; }
.produit__inner--inverse .produit__visuel { order: 2; }
.produit__texte { text-align: center; }
.produit__texte h2 { font-size: var(--fz-2xl); margin-bottom: var(--s-4); }
.produit__accroche { font-weight: var(--fw-bold); color: var(--fg-strong); }
.produit__texte .bouton { margin-top: var(--s-6); }

.dataquality { text-align: center; }
.dataquality h2 { font-size: var(--fz-2xl); }
.dataquality__sous-titre { font-weight: var(--fw-bold); color: var(--fg-strong);
  margin-top: var(--s-2); }

/* --- Page Solutions --- */
.hero--solutions { background-image: url("/static/img/hero-solutions.jpg"); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  align-items: center; }
/* Sur l'original, le visuel de la deuxième section passe à gauche du texte.
   L'ordre du HTML garde le titre avant l'image pour les lecteurs d'écran. */
.duo--inverse .duo__visuel { order: -1; }
.duo ul { padding-left: var(--s-6); margin: 0 0 var(--s-4); }
.duo li { margin-bottom: var(--s-2); }
.duo h2 { font-size: var(--fz-2xl); margin-bottom: var(--s-4); }
.duo .bouton { margin-top: var(--s-2); }
.duo__visuel img { border-radius: var(--r-lg); box-shadow: var(--shadow-3); }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-3); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__affiche { display: block; position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: transparent; cursor: pointer; }
.video__affiche img { width: 100%; height: 100%; object-fit: cover; }
.video__lecture { position: absolute; top: 50%; left: 50%; width: 88px; height: 88px;
  transform: translate(-50%, -50%); border-radius: var(--r-pill);
  background: var(--fg-onbrand); box-shadow: var(--shadow-pop);
  transition: transform var(--dur-base) var(--ease-out); }
/* Triangle de lecture : bordures obliques, aucune image ni police d'icônes. */
.video__lecture::before { content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%); width: 0; height: 0;
  border-top: 15px solid transparent; border-bottom: 15px solid transparent;
  border-left: 26px solid var(--brand); }
.video__affiche:hover .video__lecture { transform: translate(-50%, -50%) scale(1.06); }

.documents { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.documents li { display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line-2); }
.documents li:first-child { border-top: 1px solid var(--line-2); }
.documents a { font-weight: var(--fw-semi); }
.documents__meta { margin-left: auto; font-size: var(--fz-xs); color: var(--fg-muted);
  background: var(--surface-3); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); }

@media (max-width: 1024px) {
  .hero__inner, .revendeur__inner, .produit__inner, .duo { grid-template-columns: 1fr; }
  .produit__inner--inverse .produit__visuel { order: 0; }
  .duo--inverse .duo__visuel { order: 0; }
  .hero { min-height: 0; }
}
@media (max-width: 720px) {
  .formulaire__grille { grid-template-columns: 1fr; }
  h1 { font-size: var(--fz-2xl); }
}

.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-6); font-size: var(--fz-sm); color: var(--fg-muted); }
.fil-ariane span[aria-hidden] { color: var(--fg-faint); }

.autres-produits { display: flex; flex-wrap: wrap; gap: var(--s-3);
  list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.autres-produits a { display: block; padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-1); border-radius: var(--r-pill);
  background: var(--bg-surface); font-size: var(--fz-sm);
  font-weight: var(--fw-semi); transition: border-color var(--dur-base) var(--ease-out); }
.autres-produits a:hover { border-color: var(--brand); }

/* Confirmation d'envoi : un panneau qui recouvre entièrement la carte du
   formulaire, puis s'efface au bout de cinq secondes (js/notification.js).
   Sans JavaScript il reste en place — une confirmation qui s'attarde vaut
   mieux qu'une confirmation qui ne s'affiche jamais.

   `inset: 0` se calcule sur la carte, d'où le `position: relative` posé sur
   .hero__carte : sans lui, le panneau se placerait sur le premier ancêtre
   positionné, c'est-à-dire le hero tout entier. */
/* `inset` non nul, et non `0` : à ras de la carte, le halo se dessinerait par
   dessus le bleu du hero, qui l'avale. Rentré de quelques pixels, il tombe
   sur le blanc de la carte et se voit. Le formulaire reste entièrement
   couvert : son contenu commence 32 px plus à l'intérieur (padding de la
   carte). */
.confirmation { position: absolute; inset: var(--s-3); z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4); padding: var(--s-8); text-align: center;
  background: var(--bg-surface); border-radius: var(--r-lg);
  /* Halo diffus plutôt qu'un liseré latéral, trop dur à cette échelle. */
  box-shadow: var(--halo-succes);
  animation: confirmation-entree var(--dur-slow) var(--ease-out); }
.confirmation__logo { width: 83px; height: 45px; }
.confirmation__titre { margin: 0; color: var(--fg-strong);
  font-size: var(--fz-xl); font-weight: var(--fw-bold); }
.confirmation p { margin: 0; color: var(--fg-default);
  font-size: var(--fz-base); line-height: var(--lh-base); }
.confirmation--partie { opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out); }
/* La règle prefers-reduced-motion plus haut ramène déjà toute animation à
   0,01 ms : l'entrée est alors immédiate, sans traitement particulier ici. */
@keyframes confirmation-entree { from { opacity: 0; transform: scale(.98); } }