/* ==========================================================================
   eval.sp — mini-site
   Design tokens repris du Figma (variables Figma → custom properties CSS)
   ========================================================================== */

:root {
  /* Couleurs */
  --primary-color-4: #0075fc;
  --text-default: #212529;
  --text-dimmed: #868e96;
  --text-on-emphasis: #ffffff;

  --primary-color-1: #bfdcfe;
  --border-default: #dee2e6;
  --gray-9: #212529;

  --surface-dark: #161c22;
  --surface-darkest: #0a0c0f;
  --surface-blue-deep: #0c4485;

  /* Espacements */
  --spacing-xs: 10px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-section: 40px;

  /* Largeur maximale du contenu des sections */
  --content-max: 1600px;

  /* Gouttière latérale fluide : 24px sur petit écran → 140px (valeur Figma)
     à partir de 1512px de large. Droite passant par (390 → 24) et (1512 → 140). */
  --gutter: clamp(24px, 10.34vw - 16.3px, 140px);

  /* Marge latérale effective : la gouttière, ou davantage si l'écran dépasse
     --content-max, ce qui plafonne le contenu sans conteneur supplémentaire. */
  --side-pad: max(var(--gutter), (100% - var(--content-max)) / 2);

  /* Typographie */
  --font-heading: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  /* Retrait interne des colonnes du formulaire. Indépendant de --gutter et
     de --side-pad : la bande est pleine largeur, chaque colonne gère son
     propre retrait. 40px minimum, 140px maximum (16px en mobile, plus bas). */
  --form-pad: clamp(40px, 10.5vw - 18.8px, 140px);

  /* Échelle des captures (ajustée en media queries) */
  --capture-scale: 1;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, ol, ul {
  margin: 0;
}

ol, ul {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* ==========================================================================
   First part : héro + captures (dégradé sombre → bleu)
   ========================================================================== */

/* Héro à gauche, captures à droite. */
.first-part {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  padding: 120px var(--side-pad);
  overflow: hidden;
  background-image: linear-gradient(
    180deg,
    var(--surface-darkest) 0%,
    var(--surface-dark) 49.038%,
    var(--surface-blue-deep) 82.139%,
    var(--primary-color-4) 100%
  );
}

/* --- Héro --------------------------------------------------------------- */

/* Texte puis bouton, empilés. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-section);
  flex: 1 1 0;
  min-width: 0;
}

.hero__content {
  align-self: stretch;        /* la colonne limite la largeur des titres */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxl);
}

.hero__logo {
  width: 283px;
  height: 64px;
}

.hero__text {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xl);
  word-break: break-word;
}

/* Heading/h1 : Montserrat SemiBold 40 / 48 */
.hero__title {
  max-width: 733px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 40px;
  line-height: 48px;
  color: var(--text-on-emphasis);
}

.hero__baseline {
  max-width: 725px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 60px;
  line-height: 64px;
  color: var(--primary-color-4);
}

/* Heading/h5 : Montserrat SemiBold 16 / 20 */
.cta {
  display: inline-flex;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-radius: 8px;
  background: var(--primary-color-4);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  transition: background-color .2s ease, transform .2s ease;
}

.cta:hover,
.cta:focus-visible {
  background: #0062d6;
}

.cta:active {
  transform: translateY(1px);
}

.cta:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

/* --- Captures d'écran --------------------------------------------------- */

/* Avec le chevauchement, la rangée fait 708.465 × 438px à l'échelle 1
   (232 + 282.987 + 265.478 − 2 × 36). Elle est mise à l'échelle par
   transform : le conteneur reprend la taille réduite pour que la mise en
   page tienne compte de l'encombrement réel. En deux colonnes, elle mord sur
   la gouttière droite pour laisser de la place au texte. */
.captures {
  position: relative;
  flex: 0 0 auto;
  width: calc(708.465px * var(--capture-scale));
  height: calc(438px * var(--capture-scale));
  margin-right: calc(40px - var(--side-pad));
}

.captures__row {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  width: 708.465px;
  transform: scale(var(--capture-scale));
  transform-origin: top left;
}

/* Chaque capture est une « fenêtre » qui recadre la copie d'écran complète,
   exactement comme dans le Figma (cadre + décalage vertical de l'image). */
.capture {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 24px 48px rgba(10, 12, 15, .35), 0 4px 12px rgba(10, 12, 15, .2);
  /* Décalage de parallaxe, piloté en JS au scroll */
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

.capture img {
  display: block;
  max-width: none;
  object-fit: cover;
}

/* Émargement — cadre 232 × 279.226, image 232 × 662.941 décalée de -64.64 */
.capture--emargement {
  width: 232px;
  height: 279.226px;
  margin-top: 102px;
  left: -24px;                /* légèrement décalé vers la gauche */
  z-index: 1;
}

.capture--emargement img {
  width: 232px;
  height: 662.941px;
  margin-top: -64.64px;
}

/* Formateur — cadre 282.987 × 427, image 282.987 × 668.943 décalée de -80.65 */
.capture--formateur {
  width: 282.987px;
  height: 427px;
  margin-top: 11px;
  margin-left: -36px;         /* chevauche l'émargement */
  z-index: 2;
}

.capture--formateur img {
  width: 282.987px;
  height: 668.943px;
  margin-top: -80.65px;
}

/* Évaluation — cadre 265.478 × 229, image 265.478 × 588.375 décalée de -72.28 */
.capture--eval {
  width: 265.478px;
  height: 229px;
  margin-top: 36px;
  margin-left: -36px;         /* chevauche le formateur */
  z-index: 3;                 /* au premier plan */
}

.capture--eval img {
  width: 265.478px;
  height: 588.375px;
  margin-top: -72.28px;
}

/* ==========================================================================
   Titres de section
   ========================================================================== */

.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  color: #000000;
}

.section-title--light {
  color: #ffffff;
  line-height: 20px;
}

/* ==========================================================================
   Avantages — « Parcours simplifié »
   ========================================================================== */

.avantages {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxl);
  padding: var(--spacing-section) var(--side-pad);
  background: var(--surface-dark);
  overflow: hidden;
  word-break: break-word;
}

.etapes {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xl);
  width: 100%;
}

.etape {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 0;
  border-top: 2px solid var(--primary-color-4);
}

.etape__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-dimmed);
}

.etape__titre {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  color: #ffffff;
}

/* Text/md : Roboto Regular 16 / 24 */
.etape__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-dimmed);
}

/* ==========================================================================
   Atouts — blocs sous « Parcours simplifié »
   ========================================================================== */

.atouts {
  padding: var(--spacing-section) var(--side-pad);
  background: #ffffff;
  word-break: break-word;
}

.liste-atouts {
  display: flex;
  align-items: stretch;       /* blocs de hauteur égale, comme au Figma */
  gap: var(--spacing-xl);
  width: 100%;
}

.atout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.atout__titre {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--primary-color-4);
}

.atout__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-default);
}

/* ==========================================================================
   Barre fixe — logo + CTA, affichée quand le CTA du héro n'est plus visible
   ========================================================================== */

.topbar {
  position: fixed;
  top: var(--spacing-lg);
  left: var(--side-pad);
  right: var(--side-pad);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg);
  padding: 8px 8px 8px var(--spacing-xl);
  border-radius: 99px;
  background: var(--surface-dark);
  box-shadow: 0 4px 16px rgba(10, 12, 15, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.topbar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.topbar__logo {
  width: 141.5px;
  height: 32px;
}

.cta--topbar {
  width: auto;
  padding: 12px var(--spacing-xl);
  border-radius: 99px;
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .topbar.is-visible { transform: none; }
}

/* --- Bouton d'envoi : attente puis confirmation ---------------------------
   Le bouton ne change pas de couleur, seuls son icône et son libellé varient. */

.cta--submit {
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xs);
}

.cta--submit[disabled] {
  cursor: default;
}

.cta__spinner,
.cta__check {
  display: none;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.cta--submit.is-sending .cta__spinner { display: block; }
.cta--submit.is-sent .cta__check { display: block; }

.cta__spinner {
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: cta-spin .6s linear infinite;
}

.cta__check {
  color: #ffffff;
}

@keyframes cta-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cta__spinner { animation-duration: 1.6s; }
}

/* ==========================================================================
   Partenaires — « En partenariat avec »
   ========================================================================== */

.partenaires {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl) var(--spacing-section);
  padding: var(--spacing-section) var(--side-pad);
  background: #ffffff;
  border-top: 1px solid var(--border-default);
}

.partenaires__titre {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--text-default);
}

.partenaires__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl) var(--spacing-section);
}

.partenaires__logos img {
  width: auto;
}

/* ==========================================================================
   Formulaire — « Demander une démo »
   ========================================================================== */

/* Contrairement aux autres sections, la bande formulaire n'est pas plafonnée :
   les deux colonnes se partagent toute la largeur de l'écran et gèrent leur
   propre retrait via --form-pad. */
.form {
  background: var(--primary-color-1);
}

.form__inner {
  display: flex;
  align-items: stretch;
}

.form__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;        /* le bloc de texte est centré dans la colonne */
  flex: 0 0 40.74%;           /* 616 / 1512 : proportion du Figma */
  padding: var(--spacing-xs) var(--form-pad);
  background: var(--primary-color-4);
  color: var(--text-on-emphasis);
}

/* Le bloc est centré dans la colonne, mais son texte reste ferré à gauche. */
.form__intro-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xs);
}

.form__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}

.form__subtitle {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

.form__fields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;        /* le formulaire est centré dans la colonne */
  flex: 1 1 0;
  min-width: 0;
  padding: var(--spacing-section) var(--form-pad);
}

.form__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* champs et bouton ferrés à gauche du bloc */
  gap: var(--spacing-lg);
  width: 100%;
  max-width: 736px;           /* largeur des champs dans le Figma */
}

.form__row {
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
}

.form__row .field {
  flex: 1 1 0;
  min-width: 0;
}

.field {
  width: 100%;
}

/* Champ : 56px de haut (16px de padding + 24px de line-height) */
.field__control {
  display: block;
  width: 100%;
  /* Bordure transparente de 1.5px compensée sur le padding : le champ garde
     ses 56px et son texte ne bouge pas quand StaticForms pose sa bordure. */
  padding: 14.5px 22.5px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  background: #ffffff;
  color: var(--text-default);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

.field__control::placeholder {
  color: var(--text-dimmed);
  opacity: 1;
}

.field__control:focus-visible {
  outline: 2px solid var(--primary-color-4);
  outline-offset: 2px;
}

/* Liste déroulante : chevron du Figma en image de fond */
.field__control--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 58.5px;      /* 22.5 (retrait) + 24 (chevron) + 12 (respiration) */
  background-image: url("../img/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 22.5px center;
  background-size: 24px 24px;
}

/* Tant qu'aucun département n'est choisi, l'intitulé garde la couleur
   d'un placeholder (le select est `required`, donc `:invalid`). */
.field__control--select:invalid {
  color: var(--text-dimmed);
}

.field__control--select option {
  color: var(--text-default);
}

/* Libellés réservés aux lecteurs d'écran (le Figma n'affiche que les
   placeholders, mais les champs doivent rester nommés). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  display: flex;
  gap: var(--spacing-section);
  padding: var(--spacing-xxl) var(--side-pad);
  background: var(--gray-9);
  color: var(--text-dimmed);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
}

.footer__apps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-lg);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.footer__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: #ffffff;
}

.footer__link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   Page « Mentions légales »
   ========================================================================== */

.legal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxl);
  padding: 64px var(--side-pad) 48px;
  background-image: linear-gradient(180deg, var(--surface-darkest) 0%, var(--surface-dark) 100%);
  color: var(--text-on-emphasis);
}

.legal-header__home {
  display: inline-block;
  border-radius: 4px;
}

.legal-header__home:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.legal-header__logo {
  width: 141.5px;
  height: auto;
}

.legal-header__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}

.legal-header__date {
  margin-top: 8px;
  color: var(--text-dimmed);
}

.legal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-section);
  max-width: calc(800px + 2 * var(--side-pad));
  padding: 56px var(--side-pad) 80px;
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.legal__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.legal__back {
  align-self: flex-start;
  color: var(--primary-color-4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__link {
  color: var(--primary-color-4);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal__back:focus-visible,
.legal__link:focus-visible {
  outline: 2px solid var(--primary-color-4);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 560px) {
  .legal-header { padding: 40px var(--side-pad) 32px; }
  .legal-header__title { font-size: 28px; line-height: 36px; }
  .legal { padding: 40px var(--side-pad) 56px; }
}

/* ==========================================================================
   Adaptations écran
   ========================================================================== */

@media (max-width: 1400px) {
  :root { --capture-scale: .82; }

  .hero__baseline { font-size: 48px; line-height: 54px; }
}

/* En dessous, plus la place pour deux colonnes : captures sous le héro,
   rognées par le bas de la bande comme avant. */
@media (max-width: 1200px) {
  :root { --capture-scale: 1; }

  .first-part {
    flex-direction: column;
    align-items: stretch;
    gap: 56px;
    padding: 64px var(--side-pad) 0;
  }

  .hero { gap: var(--spacing-xxl); }

  /* overflow: clip et non hidden : rogne le bas sans couper les ombres
     sur les côtés grâce à overflow-clip-margin. */
  .captures {
    align-self: center;
    margin-right: 0;
    overflow: clip;
    overflow-clip-margin: 48px;
  }

  .hero__title { font-size: 34px; line-height: 42px; }
  .hero__baseline { font-size: 48px; line-height: 54px; }

  .captures { height: 380px; }
}

@media (max-width: 820px) {
  :root { --capture-scale: .78; }

  .captures { height: 300px; }

  .etapes,
  .liste-atouts {
    flex-direction: column;
    gap: var(--spacing-xxl);
  }

  /* La bande formulaire passe en deux blocs empilés */
  .form__inner { flex-direction: column; }

  .form__intro {
    flex: 0 0 auto;
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
  }

  /* Empilés, les blocs ne forment plus deux colonnes : on recale à gauche. */
  .form__intro,
  .form__fields { align-items: flex-start; }

  .form__title { font-size: 32px; line-height: 40px; }

  .footer {
    flex-direction: column;
    gap: var(--spacing-xxl);
  }
}

@media (max-width: 560px) {
  :root { --capture-scale: .54; }

  .first-part { padding-top: 48px; gap: 40px; }

  .hero__logo { width: 212px; height: 48px; }

  .hero__title { font-size: 26px; line-height: 34px; }
  .hero__baseline { font-size: 32px; line-height: 38px; }

  .section-title { font-size: 20px; line-height: 26px; }

  .cta { width: 100%; }

  .topbar {
    top: var(--spacing-xs);
    left: var(--spacing-xs);
    right: var(--spacing-xs);
    padding-left: var(--spacing-lg);
  }

  .topbar__logo { width: 106px; height: 24px; }

  .cta--topbar { width: auto; padding: 10px var(--spacing-lg); font-size: 14px; }

  /* Mobile : retrait resserré, sous le plancher de 40px de la clamp. */
  :root { --form-pad: 16px; }

  .form__title { font-size: 26px; line-height: 34px; }

  .form__row { flex-direction: column; gap: var(--spacing-lg); }

  .captures { height: 215px; }

  .avantages,
  .atouts { padding-top: 40px; padding-bottom: 40px; }
}