/* =========================================================================
   Infitex — feuille de style du site vitrine
   =========================================================================

   Le canevas Claude Design d'origine portait 424 attributs `style=` inline
   pour une seule classe CSS. Tout est repris ici en CSS réel, adossé aux
   tokens du design system (assets/styles/tokens/), qui ne sont pas modifiés.

   Les « molettes » de l'éditeur (ambiance, effets lumineux, style d'en-tête,
   police, partenaires) n'existent plus : leurs valeurs par défaut — celles
   que rend la démo validée — sont figées dans le bloc THÈME ci-dessous.
   ========================================================================= */

@import url("tokens/fonts-y0cABt6.css");
@import url("tokens/colors-3su7_zL.css");
@import url("tokens/typography-V0aILad.css");
@import url("tokens/spacing-R4P-GES.css");
@import url("tokens/elevation-SlfoSMY.css");
@import url("tokens/motion-r9s1SK9.css");
@import url("tokens/base-wPMgOfT.css");

/* Le canevas charge cette famille en plus des trois du design système, et
   surcharge --font-display avec elle au runtime. On reproduit ce choix ici.
   ATTENTION : les consignes écrites (« Titres : Archivo Bold, graisses
   800-900 ») disent Archivo, et les tokens du DS aussi. La démo validée,
   elle, rend en Bricolage Grotesque. Pour revenir à Archivo, il suffit de
   supprimer cet @import et la redéfinition de --font-display plus bas.

   Doit rester group avec les @import ci-dessus, avant toute règle normale :
   la spec CSS invalide silencieusement tout @import qui suit une règle
   ordinaire (ici, [hidden] plus bas) — ce qui a empêché cette police de se
   charger, sur tout le site, jusqu'à ce que ce soit repéré sur le rendu. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap");

/* Un `display` posé par une classe l'emporte sur la règle `[hidden]` du
   navigateur : sans ce garde-fou, tout bloc masqué en JavaScript par
   `element.hidden = true` (bandeau cookies, écran d'alarme du terminal)
   resterait affiché. La règle vaut pour toute la feuille, à poser une fois. */
[hidden] {
  display: none !important;
}

/* =========================================================================
   THÈME — valeurs figées depuis les réglages par défaut du canevas
   ========================================================================= */

:root {
  /* Police d'affichage : voir la note ci-dessus */
  --font-display: "Bricolage Grotesque", Archivo, system-ui, sans-serif;

  /* Ambiance « Halo teal » */
  --page: #04202a;
  --glow: rgba(123, 167, 173, 0.3);
  --wash: rgba(123, 167, 173, 0.16);

  /* Échelle bleu nuit associée */
  --night-900: var(--page);
  --night-800: #072330;
  --night-700: #0b2c3a;
  --night-600: #123c4e;

  /* Habillage : voiles de section, en-tête, pied de page, dégradés */
  --nav-1: rgba(6, 26, 36, 0.72);
  --nav-2: rgba(8, 35, 47, 0.92);
  --veil-1: rgba(123, 167, 173, 0.24);
  --veil-2: rgba(84, 140, 152, 0.28);
  --veil-3: rgba(70, 124, 136, 0.24);
  --foot-1: rgba(12, 52, 68, 0.85);
  --foot-2: rgba(5, 26, 36, 0.95);
  --grad-1: #0a2f3c;
  --grad-2: #185266;
  --grad-3: #35707c;
  --join-1: rgba(38, 92, 112, 0.85);
  --join-2: rgba(14, 48, 64, 0.85);

  /* Accents « Mesurée » — teintes des cartes solutions */
  --acc-1: #e8a063;
  --acc-2: #e08a7f;
  --acc-3: #9cc6cb;
  --acc-4: #7ec49f;
  --acc-5: #bcced6;
  --acc-1-bg: rgba(232, 160, 99, 0.16);
  --acc-2-bg: rgba(224, 138, 127, 0.16);
  --acc-3-bg: rgba(156, 198, 203, 0.16);
  --acc-4-bg: rgba(126, 196, 159, 0.16);
  --acc-5-bg: rgba(188, 206, 214, 0.16);

  /* Rayons */
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 6px;
  --r-ctl: 8px;

  /* Texte sur fond sombre */
  --fg-title: #f2f8f9;
  --fg-strong-alt: #f5fafb;
  --fg-lead: #93aab4;
  --fg-muted: #8fa8b2;
  --fg-on-card: #ccdfe4;
  --fg-on-dark: #a9c1c9;

  /* Verre dépoli (réglage « Marqué », figé) */
  --glass-bg: rgba(10, 40, 53, 0.68);
  --glass-blur: 14px;

  /* Décalage d'ancre = hauteur de l'en-tête collant */
  --anchor-offset: 96px;

  /* Rythme horizontal commun à toutes les sections */
  --gutter: clamp(18px, 4vw, 56px);
  --section-gap: clamp(56px, 8vw, 96px);
}

/* =========================================================================
   BASE
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-sans);
}

[id] {
  scroll-margin-top: var(--anchor-offset);
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--teal);
}

h1,
h2,
h3,
p {
  overflow-wrap: break-word;
}

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

/* Plafond de largeur, posé sur le contenu et sur lui seul.
   Pas sur <body> : il porte `overflow-x: clip`, qui rognerait alors tout ce
   qui doit déborder de ce plafond — les halos décoratifs .bleed, dimensionnés
   en 100vw, s'arrêtaient net à 1800px et laissaient deux bandes sombres sur
   les côtés en ultrawide. L'en-tête reste lui aussi pleine largeur : il est
   frère de <main>, et c'est sa rangée intérieure (.header__row) qui porte le
   même plafond de 1800px pour aligner logo et actions sur le contenu. */
main,
.footer {
  max-width: 1800px;
  margin: 0 auto;
}

/* Grain : profondeur discrète sur l'ensemble de la page */
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Les photos du reportage WTTJ sont harmonisées en température */
.photo {
  filter: sepia(0.16) saturate(1.12) brightness(1.03) hue-rotate(-6deg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   PRIMITIVES DE MISE EN PAGE
   ========================================================================= */

.section {
  position: relative;
  padding: var(--section-gap) var(--gutter) 0;
}

/* Bande décorative pleine largeur, débordant la grille du contenu */
.bleed {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
}

.section__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section__headings {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Sur un fond déjà teal (panneaux « raison d'être », CTA sécurité), le
   eyebrow reprend la teinte plus pâle du texte environnant plutôt que
   l'accent, qui s'y fondrait. */
.eyebrow--pale {
  color: #bfd6d9;
}

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(25px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fg-title);
}

.section__lead {
  margin: 0 0 6px;
  max-width: 430px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-lead);
}

/* Colonne de droite d'un en-tête de section, quand elle porte plus que le
   seul chapô (une mention complémentaire sous le texte). */
.section__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin-bottom: 6px;
}

/* =========================================================================
   BOUTONS
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--r-ctl);
  white-space: nowrap;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.btn--primary {
  background: var(--teal);
  color: #052029;
}

/* Pas d'ombre par défaut : sur la démo, seuls certains boutons (le CTA du
   héros, le Support de l'en-tête) en portent une, et chacun la sienne — voir
   plus bas. Celui-ci sert de base aux boutons de contenu qui n'en ont pas. */
.btn--primary:hover {
  transform: translateY(-1px);
  background: #8ab3b8;
  color: #052029;
}

/* Verre dépoli : fond et flou sont permanents, pas seulement au survol —
   c'est le réglage « Verre : Marqué » du canevas, qui s'applique par défaut. */
.btn--ghost {
  padding: 12px 22px;
  background: rgba(148, 178, 183, 0.12);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  color: #c9dbdf;
  font-weight: 500;
}

.btn--ghost:hover {
  color: #eaf3f4;
}

.btn--sm {
  padding: 11px 20px;
  font-size: 14px;
}

/* Variante discrète, utilisée dans le pied de page */
.btn--soft {
  background: rgba(123, 167, 173, 0.16);
  color: #bfd6d9;
}

.btn--soft:hover {
  background: var(--veil-1);
  color: #dcedef;
}

/* Un bouton dans une colonne flex ne doit pas s'étirer sur toute la largeur */
.btn--start {
  align-self: flex-start;
}

/* =========================================================================
   EN-TÊTE — style « Ligne épurée » (figé)
   ========================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* En haut de page, l'en-tête est une simple ligne posée sur le héros : aucun
   fond, aucun arrondi, un filet bas pour seule séparation. Il ne prend corps
   qu'une fois la page défilée (voir l'état [data-scrolled] plus bas). */
.header__inner {
  pointer-events: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fluide, comme la maquette : 18px sur un grand écran, 10px dès que la
     barre passe en mode compact (mesuré 17,55px à 1200px de fenêtre et
     10,5px à 1000px, plancher à 10px en dessous de ~950px). En gardant
     18px partout, l'en-tête mobile fait 83px au lieu de 67px et pousse le
     contenu de 16px vers le bas, ce qui découvre une bande du fond du body
     entre l'en-tête et le héros des pages intérieures. */
  padding: clamp(10px, 3.52vw - 24.7px, 18px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  transition:
    padding 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Défilé : la barre se compacte et devient opaque pour rester lisible
   par-dessus le contenu qui passe dessous. */
.header[data-scrolled="true"] .header__inner {
  padding: 8px 0;
  background: var(--nav-1);
  border-bottom-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  max-width: 1800px;
  /* Aligne le logo et les actions sur la gouttière des sections */
  padding: 0 var(--gutter);
}

.header__logo {
  flex-shrink: 0;
  display: block;
}

.header__logo img {
  width: 120px;
  height: auto;
  display: block;
}

/* Police « Sans condensé » du canevas (IBM Plex Sans Condensed) : c'est bien
   celle-ci que rend la démo, pas la mono — vérifié sur les styles calculés
   de la page en ligne, pas seulement sur les attributs `data-navpolice`. */
.nav {
  display: flex;
  gap: 2px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b9cdd3;
}

.nav__link {
  padding: 11px 14px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-weight: 700;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.nav__link:hover {
  background: rgba(123, 167, 173, 0.12);
  color: #eaf3f4;
}

.header__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* Ombre propre au bouton Support de l'en-tête, plus discrète que celle du
   CTA du héros */
.header__actions .btn--primary:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* Volontairement en 500 et en bas-de-casse, à la différence des liens de
   section (700, majuscules mono) : c'est une action, pas une entrée de nav.
   Contrairement aux autres liens de l'en-tête, celui-ci ne porte aucun style
   de survol dédié sur la démo : il retombe sur la règle `a:hover` par défaut
   du site (couleur → teal), donc pas de fond ni de couleur sur mesure ici. */
.header__contact {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  /* Couleur de texte figée comme le reste du thème sombre du site (voir le
     bloc THÈME en tête de fichier) : `--fg-body` n'est pas activée ici, sa
     valeur sombre vient du scope `.nocturne` que ce projet n'utilise pas —
     y faire appel retombait silencieusement sur le texte sombre du thème
     clair, quasi invisible sur le fond de l'en-tête. */
  color: #dfe9ec;
  padding: 11px 12px;
  white-space: nowrap;
}

.header__contact:hover {
  color: var(--teal);
}

.header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.07);
  color: #eaf3f4;
  cursor: pointer;
  position: relative;
}

/* Une seule des deux icônes est visible à la fois, superposées : la démo
   change le nom d'icône passé au composant selon l'état ouvert/fermé, ce
   que le CSS ne peut pas piloter — on bascule donc leur visibilité plutôt. */
.header__burger-icon {
  position: absolute;
}

.header__burger-icon--close {
  display: none;
}

.header[data-nav-open="true"] .header__burger-icon--menu {
  display: none;
}

.header[data-nav-open="true"] .header__burger-icon--close {
  display: block;
}

/* Panneau mobile : fermé par défaut, ouvert via [data-nav-open] */
.header__panel {
  display: none;
  flex-direction: column;
  padding-top: 14px;
}

.header[data-nav-open="true"] .header__panel {
  display: flex;
}

.header__panel-link {
  display: block;
  padding: 15px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--fg-title);
  transition: color 0.18s ease;
}

.header__panel-link:last-of-type {
  border-bottom: 0;
}

.header__panel-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.header__panel-actions .btn {
  justify-content: center;
  min-height: 50px;
  font-size: 15.5px;
}

/* =========================================================================
   HÉROS
   ========================================================================= */

.hero {
  position: relative;
  margin: -70px 0 0;
  padding: clamp(112px, 14vw, 150px) var(--gutter) clamp(48px, 7vw, 72px);
  overflow: visible;
}

/* Sur la démo, ce calque n'a que `top`, jamais `bottom` ni `height` — et son
   seul enfant (la tache qui dérive) est lui-même en position absolue, donc
   ne participe pas à une hauteur par contenu. Résultat mesuré : une boîte de
   hauteur 0, entièrement invisible malgré son dégradé. Lui donner une
   hauteur (`bottom:0` + `overflow:hidden`, tenté ici dans une révision
   précédente) rend le dégradé visible mais crée une bordure nette là où la
   boîte s'arrête — une« barre » que la démo n'a pas. On laisse donc ce
   calque sans dimension, fidèle au rendu réel plutôt qu'à l'intention
   apparente du CSS. */
.hero__backdrop {
  top: -107px;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 56px;
  align-items: center;
}

.hero__col {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: min(70px, 10.2cqw);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg-title);
  animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) 170ms both;
}

.hero__title span {
  display: block;
  white-space: nowrap;
  padding: 6px 0;
}

/* Frappe successive des trois lignes du héros */
.hero__title span:nth-child(1) {
  animation: typeline 1s steps(13, end) 250ms both;
}

.hero__title span:nth-child(2) {
  animation: typeline 1.2s steps(16, end) 1250ms both;
}

.hero__title span:nth-child(3) {
  color: var(--teal);
  animation: typeline 1s steps(13, end) 2500ms both;
}

/* Même verre dépoli que les boutons fantômes (.btn--ghost) : fond et flou
   permanents, réglage « Verre : Marqué » du canevas */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  background: rgba(148, 178, 183, 0.12);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  color: #bfd6d9;
  animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

.hero__text {
  margin: 0;
  max-width: 520px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: #9fb6bf;
  animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) 290ms both;
}

.hero__cta {
  display: flex;
  gap: 14px;
  align-items: center;
  animation: rise 0.95s cubic-bezier(0.22, 1, 0.36, 1) 390ms both;
}

/* Seul le CTA du héros porte cette ombre au survol, sur la démo */
.hero__cta .btn--primary:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.hero__media {
  position: relative;
  animation: riseImg 1.2s cubic-bezier(0.22, 1, 0.36, 1) 130ms both;
}

.hero__media-glow {
  position: absolute;
  inset: -24px;
  border-radius: var(--r-md);
  background: radial-gradient(circle at 70% 30%, var(--glow), transparent 62%);
}

.hero__media-frame {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 32px 72px rgba(0, 0, 0, 0.4);
}

.hero__media-frame img {
  width: 100%;
  height: 562px;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
}

/* Fondu vers le bas, pour ancrer la photo dans le fond de page */
.hero__media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 18, 26, 0) 42%, rgba(3, 18, 26, 0.75) 100%);
}

/* =========================================================================
   MÉTIERS
   ========================================================================= */

.metiers {
  padding-top: clamp(40px, 6vw, 56px);
}

/* Première respiration lumineuse de l'arc de page */
.metiers__veil {
  top: 10%;
  bottom: -80px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--veil-2) 30%,
    var(--veil-3) 72%,
    transparent 100%
  );
}

.metiers__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  align-items: stretch;
}

.metier {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.35);
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.metier:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 64px rgba(3, 18, 26, 0.5);
}

/* Cartes 1 et 3 : panneaux clairs sur la bande lumineuse */
.metier--panel {
  background: linear-gradient(180deg, rgba(52, 110, 128, 0.8), rgba(26, 70, 88, 0.84));
}

.metier__img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  opacity: 0.82;
}

.metier__body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.metier__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c2dce0;
}

.metier__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.metier__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-on-card);
}

.metier__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tag {
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: #dceaed;
}

.tag--strong {
  background: rgba(234, 247, 248, 0.18);
  font-weight: 600;
  color: #f0f8f9;
}

/* Carte 2 : fiche technique volontairement sombre sur la bande claire.
   L'asymétrie est un parti pris, pas un oubli (cf. DESIGN-NOTES V2). */
.metier--spec {
  display: flex;
  flex-direction: column;
  background-color: #06222f;
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.5);
}

.metier--spec .metier__body {
  padding-bottom: 8px;
}

.metier__spec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(123, 167, 173, 0.22);
}

.metier__spec-head .metier__eyebrow {
  color: var(--teal);
}

.metier--spec .metier__text {
  color: var(--fg-lead);
}

.spec {
  position: relative;
  flex: 1;
  padding: 8px 26px 24px;
  display: flex;
  flex-direction: column;
}

.spec__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(123, 167, 173, 0.14);
  min-height: 58px;
}

.spec__num {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--teal);
  width: 26px;
  flex-shrink: 0;
}

.spec__pair {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.spec__label {
  font-size: 15.5px;
  color: #dce9eb;
}

/* Le mécanisme, jamais l'affirmation seule — règle éditoriale du DS */
.spec__mechanism {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.spec__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  transition: color 0.18s ease;
}

.spec__link:hover {
  color: var(--teal);
}

/* =========================================================================
   SOLUTIONS
   ========================================================================= */

.solutions__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3.6vw, 48px);
}

/* Panneau Olymp : le produit maison, mis en avant */
.olymp {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--r-md);
  background: hsla(204, 42%, 66%, 0.13);
}

.olymp__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.olymp__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: hsl(204, 42%, 66%);
}

.olymp__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-strong-alt);
}

.olymp__badge {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: hsla(204, 42%, 66%, 0.13);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(204, 42%, 66%);
}

.olymp__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.olymp__text {
  margin: 0;
  max-width: none;
  font-size: 16.5px;
  line-height: 1.65;
  color: #c3d8dd;
}

/* En-tête de sous-groupe (« autour d'Olymp », « ce que nous raccordons ») */
.subgroup__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(123, 167, 173, 0.34);
}

.subgroup__head--neutral {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.subgroup__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--fg-title);
}

.subgroup__text {
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: 1.62;
  color: var(--fg-lead);
}

/* Modules Olymp : deux colonnes, cartes teintées par module */
.modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.module {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 22px 22px 24px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--module-bg);
}

.module__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 1.9vw, 22px);
  letter-spacing: -0.015em;
  color: var(--fg-title);
}

.module__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--module-accent);
}

.module__text {
  margin: 4px 0 0;
  max-width: none;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-on-dark);
}

/* Solutions intégrées : grille plus dense, pastille de couleur par outil */
.integrations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.integration {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  border-radius: var(--r-md);
  background: var(--integration-bg);
}

.integration__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.integration__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--integration-accent);
}

.integration__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-on-dark);
}

/* Hors catalogue : la ligne « sur mesure » qui clôt la section */
.bespoke {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: baseline;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(123, 167, 173, 0.32);
}

.bespoke__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

.bespoke__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bespoke__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.1vw, 25px);
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.bespoke__text {
  margin: 0;
  max-width: none;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fg-lead);
}

/* =========================================================================
   ÉQUIPE — grande respiration lumineuse et mosaïque
   ========================================================================= */

.equipe__veil {
  top: clamp(24px, 4vw, 48px);
  height: min(1020px, 58%);
  background:
    radial-gradient(1240px 680px at 50% 40%, rgba(123, 167, 173, 0.38), transparent 70%),
    radial-gradient(720px 420px at 16% 78%, rgba(123, 167, 173, 0.2), transparent 66%),
    linear-gradient(
      180deg,
      transparent 0%,
      var(--veil-2) 26%,
      var(--veil-3) 66%,
      transparent 100%
    );
}

.equipe .section__lead {
  max-width: 520px;
}

.mosaic {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 250px 300px;
  gap: 18px;
}

.mosaic__cell {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}

.mosaic__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.mosaic__cell--tall {
  grid-row: span 2;
}

.mosaic__cell--wide {
  grid-column: span 2;
}

.mosaic__cell--tall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 18, 26, 0) 45%, rgba(3, 18, 26, 0.8) 100%);
  pointer-events: none;
}

/* =========================================================================
   VALEURS — bande sombre, rupture après la respiration lumineuse
   ========================================================================= */

.valeurs {
  position: relative;
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(20px, 2.4vw, 30px);
}

.valeurs__head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.valeurs__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-title);
}

.valeurs__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr));
  gap: 18px;
}

/* Alternance carte translucide / bloc opaque, pour casser la répétition */
.valeur {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: var(--r-md);
  background: rgba(123, 167, 173, 0.1);
  transition: background 0.25s ease;
}

.valeur:hover {
  background: rgba(123, 167, 173, 0.16);
}

.valeur--solid {
  padding: 24px 20px;
  background: var(--night-700);
}

.valeur--solid:hover {
  background: var(--night-700);
}

/* Illustration géante (300px) qui déborde du bord droit de la carte, très
   estompée : un fond, pas une icône. La taille et la couleur (slate, pas
   teal) viennent du réglage d'accent « Mesurée », actif par défaut. */
.valeur__icon {
  position: absolute;
  right: -58px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
  line-height: 0;
  color: #3b5364;
  opacity: 0.14;
  pointer-events: none;
}

.valeur__body {
  position: relative;
  z-index: 1;
}

.valeur__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--teal);
}

.valeur__title {
  margin: 10px 0 0;
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0;
  color: #eaf3f4;
}

.valeur__text {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* =========================================================================
   RAISON D'ÊTRE ET CHIFFRES
   ========================================================================= */

.purpose {
  position: relative;
  margin: clamp(28px, 3.5vw, 44px) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.35);
}

.purpose::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    var(--grad-1) 0%,
    var(--grad-2) 38%,
    var(--grad-3) 74%,
    var(--teal) 125%
  );
}

.purpose::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 340px at 22% 12%, rgba(123, 167, 173, 0.21), transparent 62%),
    radial-gradient(560px 300px at 88% 96%, rgba(65, 83, 100, 0.28), transparent 66%);
}

.purpose__inner {
  position: relative;
  z-index: 1;
  padding: clamp(34px, 5vw, 64px) clamp(20px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.purpose__statement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 44px;
  align-items: start;
}

.purpose__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #bfd6d9;
  padding-top: 12px;
  white-space: nowrap;
}

/* Verbatim du document Totem — ne pas reformuler */
.purpose__text {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 3.1vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--fg-strong-alt);
  text-wrap: pretty;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 24px;
  padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.stat__label {
  margin-top: 8px;
  font-size: 16px;
  color: #c4d8db;
  text-align: center;
}

/* =========================================================================
   NOUS REJOINDRE / SUPPORT
   ========================================================================= */

.duo {
  padding: clamp(40px, 6vw, 56px) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.panel {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: var(--r-md);
}

.panel--join {
  background: linear-gradient(130deg, var(--join-1), var(--join-2));
  box-shadow: 0 16px 40px rgba(3, 18, 26, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel--join::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 167, 173, 0.14), transparent 65%);
  pointer-events: none;
}

.panel--support {
  background: rgba(123, 167, 173, 0.1);
}

.panel__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 26px);
  color: var(--fg-title);
}

.panel__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-lead);
}

.panel__note {
  font-size: 12.5px;
  line-height: 1.5;
  color: #7e96a0;
}

/* Le bloc de coordonnées reprend toute la largeur de l'encart, alors que le
   reste du contenu est aligné à gauche. */
.panel__contact {
  width: 100%;
}

.panel__actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* =========================================================================
   MODALE SUPPORT
   ========================================================================= */

.dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: clamp(26px, 3vw, 38px);
  border: 0;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, #0b3040 0%, #072330 100%);
  color: var(--fg-on-dark);
  overflow: visible;
}

.dialog::backdrop {
  background: rgba(2, 12, 18, 0.72);
  backdrop-filter: blur(3px);
}

.dialog__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(520px 260px at 88% -10%, rgba(123, 167, 173, 0.13), transparent 62%);
  pointer-events: none;
}

.dialog__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.07);
  color: #d7e5e8;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.dialog__close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.dialog__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.dialog__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.dialog__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg-lead);
}

.dialog__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 20px 0;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 15px;
}

.dialog__details .contact__key {
  width: 74px;
  padding-top: 3px;
}

/* =========================================================================
   BANDEAU COOKIES
   ========================================================================= */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: clamp(12px, 2vw, 22px);
  /* Le conteneur laisse passer les clics ; seule la carte les capte, pour ne
     pas bloquer le bas de page pendant la lecture du bandeau. */
  pointer-events: none;
  animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cookies__card {
  pointer-events: auto;
  width: min(780px, 100%);
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  background: rgba(8, 35, 47, 0.97);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
}

.cookies__text {
  flex: 1 1 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cookies__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.cookies__text p {
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  line-height: 1.55;
  color: #b4c7cd;
}

.cookies__text a {
  color: var(--teal);
  white-space: nowrap;
}

.cookies__text a:hover {
  color: #9fc3c8;
}

.cookies__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* Seul bouton primaire du site à ne pas se soulever au survol : posé dans un
   bandeau bas de page, pas une carte, le mouvement n'apportait rien */
.cookies__actions .btn--primary:hover {
  transform: none;
}

/* =========================================================================
   TERMINAL IBM i — easter egg (« 5250 », « as400 », « olymp »)
   ========================================================================= */

.crt {
  width: min(1000px, 96vw);
  height: min(660px, 90vh);
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: transparent;
  /* Surtout pas d'`overflow: hidden` ici : les deux liserés de la coque sont
     des ombres portées à l'extérieur de l'écran, ils seraient rognés. */
  overflow: visible;
}

.crt::backdrop {
  background: rgba(1, 6, 3, 0.86);
  backdrop-filter: blur(3px);
}

/* Le boîtier : deux liserés sombres imitent la coque d'un moniteur */
.crt__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 255, 102, 0.02), rgba(0, 255, 102, 0.02)),
    radial-gradient(120% 130% at 50% 50%, #04140a 40%, #010a05 100%);
  box-shadow:
    0 0 0 12px #0c0f0c,
    0 0 0 15px #1b1f1b,
    0 40px 120px rgba(0, 0, 0, 0.7),
    0 0 70px rgba(0, 255, 102, 0.1);
  animation: crton 0.55s ease both;
}

/* Lignes de balayage */
.crt__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.28) 0px,
    rgba(0, 0, 0, 0.28) 1px,
    transparent 2px,
    transparent 3px
  );
}

/* Vignettage du tube */
.crt__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, 0.75);
}

.crt__inner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  padding: 22px clamp(16px, 3vw, 32px) 16px;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.55vw, 15.5px);
  line-height: 1.42;
  color: #46ff7d;
  text-shadow: 0 0 5px rgba(90, 255, 150, 0.35);
  animation: crtflicker 5s infinite;
}

.crt__head,
.crt__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.crt__head-key {
  color: #7ea2ff;
}

.crt__head-title {
  color: #eafff0;
}

.crt__accent {
  color: #46ff7d;
}

.crt__log {
  flex: 1;
  overflow-y: auto;
  margin-top: 8px;
  white-space: pre;
}

/* Sur un vrai 5250 une ligne vide occupe une ligne d'écran. Sans cette
   hauteur minimale les séparations du menu et des réponses disparaissent et
   tout le contenu remonte. */
.crt__log > div {
  min-height: 1.42em;
}

.crt__prompt {
  margin-top: 6px;
}

.crt__input-row {
  display: flex;
  align-items: center;
}

.crt__caret-prefix {
  white-space: pre;
  color: #46ff7d;
}

.crt__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: inherit;
  color: #46ff7d;
  text-shadow: 0 0 5px rgba(90, 255, 150, 0.45);
  text-transform: uppercase;
  /* Le curseur natif est remplacé par le bloc clignotant ci-dessous */
  caret-color: transparent;
}

/* Le halo de focus global encadrerait le champ d'un rectangle bleu en plein
   milieu de l'écran vert. Le curseur bloc clignotant tient ce rôle ici, et le
   champ est le seul élément focusable du terminal. */
.crt__input:focus-visible {
  outline: none;
}

.crt__caret {
  width: 9px;
  height: 1.05em;
  margin-left: -4px;
  background: #46ff7d;
  box-shadow: 0 0 8px rgba(90, 255, 150, 0.7);
  animation: crtblink 1.05s step-end infinite;
}

.crt__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(90, 255, 150, 0.4);
  font-size: 0.82em;
  color: #7ea2ff;
}

.crt__keys kbd {
  padding: 0 3px;
  background: #cfe0d8;
  color: #02180b;
  font: inherit;
}

.crt__foot {
  margin-top: 5px;
  font-size: 0.82em;
}

.crt__foot-hint {
  opacity: 0.75;
}

/* Alerte PWRDWNSYS : l'écran vire au rouge et clignote */
.crt__alert {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 6px solid #6b0d06;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.45);
  animation: crtalarm 0.55s steps(1) infinite;
}

.crt__alert-body {
  text-align: center;
  padding: 30px;
  max-width: 88%;
  color: #0a0000;
}

.crt__alert-icon {
  font-family: var(--font-mono);
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
}

.crt__alert-code {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(15px, 2.4vw, 24px);
  letter-spacing: 0.16em;
}

.crt__alert-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 5.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.crt__alert-text {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.7vw, 15px);
  letter-spacing: 0.08em;
  color: #1a0000;
}

.crt__alert-hint {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.1em;
  color: rgba(10, 0, 0, 0.7);
}

/* =========================================================================
   PARTENAIRES — « Bandeau défilant » (figé)
   ========================================================================= */

.partners__marquee {
  position: relative;
  overflow: hidden;
  /* Fondu sur les bords, pour que les logos entrent et sortent en douceur */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Pas de pause au survol : la démo porte bien une règle `:hover` pour ça,
   mais son élément anime via un style inline (`animation: partmarquee ...`),
   qui réinitialise `animation-play-state` à `running` — un style inline
   l'emporte sur une règle externe sans `!important`. La pause n'a donc
   jamais lieu dans le rendu réel ; ne pas la reproduire ici. */
.partners__track {
  display: flex;
  width: max-content;
  gap: 24px;
  animation: partmarquee 36s linear infinite;
}

/* Sans fond ni bordure : c'est le rendu de « Bandeau défilant », le réglage
   par défaut du canevas. Le fond gris (rgba(240,250,252,0.06)) n'appartient
   qu'à la variante « Grille encadrée », non retenue ici. */
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 92px;
  padding: 20px 26px;
}

/* La hauteur est posée en ligne (elle diffère par logo, voir
   Partner::$height) ; tout le reste est commun. */
.partner img {
  max-width: 84%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.82;
  /* Les logos arrivent en couleurs hétérogènes : brightness(0) les écrase en
     noir, invert(1) les retourne en blanc — la forme reste, la couleur part.
     Sans ça, le bandeau devient une mosaïque bariolée sur le fond sombre.
     Sans exception, et c'est le sujet de la règle : c'est la liste des
     partenaires qu'on lit, pas un logo en particulier. Un logo qui ne survit
     pas à l'aplat se remplace par une version en silhouette pleine. */
  filter: brightness(0) invert(1);
  transition: opacity 0.25s ease;
}

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.4);
}

.contact__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #0a2f40 0%, #124459 45%, #1e5a70 100%);
}

.contact__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 320px at 88% 6%, rgba(123, 167, 173, 0.22), transparent 62%);
}

.contact__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  padding: clamp(24px, 3.2vw, 56px);
}

.contact__side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--fg-strong-alt);
}

.contact__title span {
  color: var(--teal);
}

.contact__text {
  margin: 0;
  max-width: 400px;
  font-size: 16px;
  line-height: 1.6;
  color: #a9c0c7;
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact__row {
  display: flex;
  gap: 20px;
}

.contact__key {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--teal);
  width: 80px;
  padding-top: 4px;
  flex-shrink: 0;
}

.contact__value {
  color: #eaf3f4;
  transition: color 0.18s ease;
}

a.contact__value:hover,
button.contact__value:hover {
  color: var(--teal);
}

.contact__photo {
  margin-top: 12px;
  width: 100%;
  height: 330px;
  object-fit: cover;
  border-radius: var(--r-ctl);
  opacity: 0.9;
}

.contact__form {
  border-radius: var(--r-md);
  padding: clamp(24px, 2.6vw, 36px);
  background: rgba(4, 22, 31, 0.82);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 16px 20px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* line-height serré : le libellé est une étiquette d'une ligne, pas du texte
   courant. Sans cela il hérite du 1.55 du corps et chaque champ gagne 8 px. */
.field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.05;
  color: #ffffff;
}

/* Vérifié sur le rendu réel du formulaire de contact de la démo : le champ
   est encadré (fond + filet + coin arrondi), pas souligné — corrigé d'une
   première implémentation qui avait pris l'inverse. */
.field__control {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(144, 165, 178, 0.22);
  border-radius: 4px;
  background: var(--night-700);
  color: #dfe9ec;
  font-family: var(--font-sans);
  font-size: 16px;
  transition: border-color 0.18s ease;
}

.field__control::placeholder {
  color: #6f8894;
}

.field__control:focus {
  outline: none;
  border-color: var(--teal);
}

/* Le message fait exception : encadré et sur fond, parce qu'un bloc de
   plusieurs lignes a besoin d'une limite visible. */
.field__control--textarea {
  height: auto;
  min-height: 146px;
  padding: 10px 12px;
  border: 1px solid rgba(144, 165, 178, 0.22);
  border-radius: 4px;
  background: var(--night-700);
  resize: vertical;
}

.field__control--textarea:focus {
  border-color: var(--teal);
}

/* Symfony rend les erreurs en <ul><li> ; on les remet au format du formulaire
   plutôt que d'écrire un thème de formulaire complet pour un seul cas. */
.contact__form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact__form ul li {
  font-size: 13px;
  line-height: 1.45;
  color: #e08a7f;
}

/* Sujet : boutons radio présentés en pastilles */
.subjects {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.subjects__options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.subject {
  position: relative;
  display: inline-block;
}

.subject input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subject span {
  display: inline-block;
  padding: 11px 15px;
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #a9c0c7;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

.subject span:hover {
  background: rgba(123, 167, 173, 0.16);
}

/* Sélection en teal translucide, pas en aplat : la pastille reste une pastille,
   elle ne se transforme pas en bouton d'action. */
.subject input:checked + span {
  background: rgba(123, 167, 173, 0.3);
  color: #f0f8f9;
}

.subject input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.contact__submit {
  width: 100%;
  justify-content: center;
  padding: 14px 26px;
}

.contact__legal {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #7791a0;
}

.alert {
  padding: 13px 16px;
  border-radius: var(--r-ctl);
  font-size: 14.5px;
  line-height: 1.5;
}

.alert--success {
  background: rgba(126, 196, 159, 0.14);
  color: #b7e5cd;
}

.alert--error {
  background: rgba(224, 138, 127, 0.14);
  color: #f0bdb6;
}

/* =========================================================================
   CONNEXION AU BACK-OFFICE

   Écran d'outil, servi hors du gabarit du site : il ne reprend que les briques
   déjà définies plus haut (.field, .alert, .btn) et n'ajoute que sa mise en
   page. Aucun composant nouveau — cette page ne doit pas se mettre à vivre sa
   propre vie graphique.
   ========================================================================= */

.login {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px;
}

.login__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 380px;
  padding: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--ink-raise);
}

.login__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--fg-on-ink);
}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */

.footer {
  padding: var(--section-gap) var(--gutter) 24px;
}

.footer__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--foot-1) 0%, var(--foot-2) 100%);
}

.footer__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(680px 300px at 12% -10%, rgba(123, 167, 173, 0.11), transparent 64%);
  pointer-events: none;
}

.footer__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 40px;
  padding: clamp(28px, 4vw, 56px) clamp(20px, 3.4vw, 48px) clamp(28px, 4vw, 40px);
  background-color: #091721;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__brand img {
  height: 60px;
  width: 65px;
}

.footer__brand p {
  margin: 0;
  max-width: 300px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-lead);
}

.footer__brand-links {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

/* Plus petits que les autres .btn--sm du site (Support de l'en-tête, bandeau
   cookies) : la démo leur donne 13px/11px 16px, pas les 14px/11px 20px
   communs aux autres boutons de cette taille. */
.footer__brand-links .btn {
  padding: 11px 16px;
  font-size: 13px;
}

/* À la différence des autres boutons fantômes du site (Nos 3 métiers,
   téléchargements), celui-ci n'a pas de verre dépoli permanent sur la
   démo : pas de fond tant qu'on ne le survole pas, et le texte ne change
   pas de couleur au survol (seul le fond apparaît). */
.footer__brand-links .btn--ghost {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.footer__brand-links .btn--ghost:hover {
  background: rgba(123, 167, 173, 0.12);
  color: #d7e5e8;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 14px;
  color: #a9c0c7;
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}

.footer__col a {
  transition: color 0.18s ease;
}

/* Bandeau réseau : appartenance affichée entre les colonnes et la ligne légale */
.footer__network {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 26px clamp(20px, 3.4vw, 48px) 30px;
  background-color: rgba(9, 23, 33, 0.41);
}

.footer__network img {
  height: 42px;
  width: 133px;
  /* `cover`, pas `contain` : le fichier (viewBox 140×85) est bien plus large
     que la case 133×42. En `contain` il rétrécit pour tenir dans la
     hauteur et laisse de grands vides de chaque côté — visiblement plus
     petit que sur la démo, qui le fait déborder en largeur (léger rognage
     haut/bas, invisible car le logo a de la marge dans son propre viewBox). */
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.footer__network:hover img {
  opacity: 0.8;
}

.footer__network span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(159, 182, 191, 0.5);
  text-align: center;
}

/* Comme le reste des libellés techniques du site (nav, éléments de section) :
   mono, petit, espacé, tout en capitales — pas un paragraphe ordinaire. */
.footer__legal {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px clamp(20px, 3.4vw, 48px) 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background-color: #091721;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e8c97;
}

.footer__legal-links {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

/* =========================================================================
   MENTIONS LÉGALES
   ========================================================================= */

.legal-hero {
  position: relative;
  margin: -70px 0 0;
  padding: clamp(112px, 14vw, 150px) var(--gutter) clamp(32px, 4vw, 48px);
  overflow: hidden;
}

.legal-hero__glow {
  top: -80px;
  bottom: 0;
  background:
    radial-gradient(760px 460px at 82% 4%, var(--glow), transparent 62%),
    radial-gradient(640px 420px at 6% 70%, var(--wash), transparent 66%),
    var(--page);
}

.legal-hero__inner {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--fg-title);
}

.legal-hero__date {
  margin: 0;
  font-size: 14px;
  color: #7791a0;
}

.legal {
  position: relative;
  padding: 0 var(--gutter) clamp(40px, 6vw, 72px);
}

.legal__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.legal__section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal__section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  color: var(--fg-title);
}

.legal__section-title--lg {
  font-size: clamp(24px, 3.2vw, 38px);
}

.legal__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #a9c0c7;
}

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

.legal__rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.legal__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 15px;
}

.legal__key {
  color: #7791a0;
}

.legal__value {
  color: #eaf3f4;
  text-align: right;
}

.legal__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.legal__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: #eaf3f4;
}

.legal__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.legal__card {
  border-radius: var(--r-md);
  padding: 24px;
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legal__card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #eaf3f4;
}

.legal__card-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-lead);
}

.legal__card-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}

.legal__card-label {
  color: #eaf3f4;
  font-weight: 600;
}

.legal__card-text {
  color: var(--fg-lead);
}

.legal__rights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 8px 24px;
}

.legal__right {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 15px;
  color: #c9dbdf;
}

.legal__right span:first-child {
  color: var(--teal);
}

.legal__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 167, 173, 0.3), transparent);
}

.legal__cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: var(--r-md);
  border: 1px solid rgba(123, 167, 173, 0.24);
  background: rgba(123, 167, 173, 0.05);
}

.legal__cta-text {
  font-size: 15px;
  color: #a9c0c7;
}

.legal__cta .btn {
  margin-left: auto;
}

/* =========================================================================
   PAGE 404
   ========================================================================= */

.notfound {
  position: relative;
  margin: -70px 0 0;
  padding: clamp(104px, 11vw, 150px) var(--gutter) clamp(40px, 5vw, 72px);
  overflow: hidden;
}

.notfound__glow {
  top: -80px;
  bottom: 0;
  background:
    radial-gradient(760px 460px at 78% 2%, var(--glow), transparent 62%),
    radial-gradient(640px 420px at 4% 76%, var(--wash), transparent 66%),
    var(--page);
}

.notfound__inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 34px);
}

/* Curseur en croix : invite à pousser les chiffres, pas à cliquer dessus. */
.notfound__digits {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, 1vw, 18px);
  padding: clamp(10px, 2vw, 26px) 0;
  cursor: crosshair;
  touch-action: none;
}

.notfound__digit {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(110px, 22vw, 300px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--fg-title);
  will-change: transform;
}

.notfound__digit--accent {
  color: var(--teal);
}

.notfound__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.notfound__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--fg-title);
}

.notfound__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.72;
  color: #a9c0c7;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* Le bouton fuit le curseur (contrôleur notfound-flee) : il lui faut sa
   propre transition, plus lente que le hover standard des .btn. */
.notfound__actions [data-controller="notfound-flee"] {
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--fg-lead);
}

.notfound__links a {
  transition: color 0.18s ease;
}

.notfound__links a:hover {
  color: var(--teal);
}

/* =========================================================================
   GABARIT DES PAGES INTÉRIEURES (Sécurité numérique, Recrutement)

   Héros et sections communs aux pages qui ne sont pas l'accueil. Nommés
   page-* et non secu-* : les deux pages les partagent réellement, et un
   préfixe emprunté à l'une d'elles laissait croire qu'on pouvait la
   restyler sans toucher à l'autre.
   ========================================================================= */

.page-hero {
  position: relative;
  margin: -70px 0 0;
  padding: clamp(98px, 10vw, 126px) var(--gutter) clamp(20px, 2.4vw, 32px);
  overflow: hidden;
}

.page-hero__glow {
  top: -80px;
  bottom: 0;
  background:
    radial-gradient(760px 460px at 82% 4%, var(--glow), transparent 62%),
    radial-gradient(640px 420px at 6% 70%, var(--wash), transparent 66%),
    var(--page);
}

.page-hero__grid {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: center;
}

.page-hero__col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.page-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--fg-title);
}

.page-hero__text {
  margin: 0;
  max-width: 660px;
  font-size: 16.5px;
  line-height: 1.72;
  color: #a9c0c7;
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* Sur cette page, le bouton secondaire du héros porte un filet (vérifié sur
   le rendu de la démo) — contrairement au .btn--ghost par défaut, sans filet,
   qui reste correct ailleurs (CTA secondaire du héros de l'accueil). */
.page-hero__actions .btn--ghost {
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #d7e5e8;
}

.page-hero__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.4);
}

.page-hero__media img {
  width: 100%;
  height: clamp(300px, 34vw, 520px);
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

.page-hero__media-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 18, 26, 0) 46%, rgba(3, 18, 26, 0.72) 100%);
  pointer-events: none;
}

.page-section {
  position: relative;
  padding: clamp(32px, 3.6vw, 52px) var(--gutter) 0;
}

.page-section--cta {
  padding-bottom: clamp(28px, 3.4vw, 48px);
}

.page-section__inner {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}

/* .section__head porte sa propre marge basse (36px), pensée pour .section
   sur l'accueil qui n'a pas de gap de parent. Ici .page-section__inner
   espace déjà ses enfants — sans ce correctif, les deux s'additionnent et
   l'écart entre un titre de section et ce qui suit devient presque le
   double de celui de la démo. */
.page-section__inner > .section__head {
  margin-bottom: 0;
}

.page-section__title {
  font-size: clamp(23px, 2.6vw, 31px);
  line-height: 1.14;
}

.secu-aside-text {
  max-width: 412px;
  margin: 0;
  font-size: 15px;
  line-height: 1.66;
}

.secu-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
  align-items: stretch;
}

.secu-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.35);
  display: flex;
  flex-direction: column;
}

.secu-card--protect {
  background: linear-gradient(180deg, rgba(52, 110, 128, 0.8), rgba(26, 70, 88, 0.84));
}

.secu-card--backup {
  background: linear-gradient(180deg, #06222f, #041a24);
  box-shadow: 0 24px 56px rgba(3, 18, 26, 0.5);
}

.secu-card--support {
  background: linear-gradient(160deg, rgba(123, 167, 173, 0.2), rgba(18, 60, 78, 0.86));
}

.secu-card__icon {
  position: absolute;
  color: #ffffff;
  pointer-events: none;
  display: flex;
}

.secu-card__icon--protect {
  right: -40px;
  top: -30px;
  opacity: 0.09;
}

.secu-card__icon--backup {
  right: -38px;
  bottom: -40px;
  opacity: 0.06;
}

.secu-card__icon--support {
  right: -34px;
  top: -26px;
  opacity: 0.1;
}

.secu-card__head {
  position: relative;
  padding: 26px 26px 6px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.secu-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}

.secu-card__eyebrow--light {
  color: #c2dce0;
}

.secu-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.secu-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-lead);
}

.secu-card__text--light {
  color: #ccdfe4;
}

.secu-card__text--pale {
  color: #cfe2e6;
}

.secu-card__body {
  position: relative;
  padding: 14px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.secu-card__body--steps {
  flex: 1;
  gap: 0;
}

.secu-card__body--support {
  flex: 1;
  gap: 14px;
  justify-content: space-between;
}

.secu-feature {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.secu-feature__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.secu-feature__name {
  font-size: 15.5px;
  font-weight: 600;
  color: #f0f8f9;
}

.secu-feature__badge {
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(234, 247, 248, 0.18);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #f0f8f9;
  white-space: nowrap;
}

.secu-feature__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #c2dce0;
}

.secu-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-top: 1px solid rgba(123, 167, 173, 0.14);
  min-height: 58px;
}

.secu-step__letter {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--teal);
  width: 26px;
  flex-shrink: 0;
}

.secu-step__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.secu-step__title {
  font-size: 15.5px;
  color: #dce9eb;
}

.secu-step__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa8b2;
}

.secu-support-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
}

.secu-support-row {
  display: flex;
  gap: 16px;
}

.secu-support-row__key {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #bfd6d9;
  width: 86px;
  padding-top: 3px;
  flex-shrink: 0;
}

.secu-support-row__value {
  color: #e7f2f3;
}

.secu-support-row__value--link {
  color: #f0f8f9;
  transition: color 0.18s ease;
}

.secu-support-row__value--link:hover {
  color: #052029;
}

.secu-support-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-ctl);
  background: #f2f8f9;
  color: #052029;
  font-family: inherit;
  font-weight: 600;
  font-size: 14.5px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.secu-support-cta:hover {
  transform: translateY(-1px);
  background: #ffffff;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-card {
  border-radius: var(--r-md);
  padding: 22px 24px;
  background: rgba(123, 167, 173, 0.09);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Variante bordée, fond neutre — carte « Alternance et stages » de la page
   Recrutement, à côté de la carte teinte réutilisée telle quelle. */
.info-card--outline {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.info-card__link {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #7ba7ad;
  transition: color 0.18s ease;
}

.info-card__link:hover {
  color: #a6c8cc;
}

.info-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.info-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-lead);
}

.secu-rules {
  display: flex;
  flex-direction: column;
}

.secu-rule {
  display: grid;
  grid-template-columns: 104px 116px 1fr;
  gap: 20px 30px;
  align-items: start;
  padding: 26px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.secu-rule:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.secu-rule__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: rgba(242, 248, 249, 0.72);
}

.secu-rule__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 115px;
  height: 115px;
  border-radius: 12px;
}

.secu-rule__icon--1 {
  background: var(--acc-1-bg);
  color: var(--acc-1);
}

.secu-rule__icon--2 {
  background: var(--acc-2-bg);
  color: var(--acc-2);
}

.secu-rule__icon--3 {
  background: var(--acc-3-bg);
  color: var(--acc-3);
}

.secu-rule__icon--4 {
  background: var(--acc-4-bg);
  color: var(--acc-4);
}

.secu-rule__icon--5 {
  background: var(--acc-5-bg);
  color: var(--acc-5);
}

.secu-rule__body {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.secu-rule__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

/* Neutralise le plafond de longueur de ligne global (p { max-width: 70ch }) :
   ces textes occupent toute la colonne de droite de la règle, comme dans la
   maquette (mesuré : 1408px contre 586px imposés par le plafond). */
.secu-rule__text {
  margin: 0;
  max-width: none;
  font-size: 15.5px;
  line-height: 1.7;
  color: #a9c0c7;
}

.secu-rule__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal);
  transition: color 0.18s ease;
}

.secu-rule__link:hover {
  color: #a6c8cc;
}

.secu-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.secu-resource {
  border-radius: var(--r-md);
  padding: 24px;
  background: rgba(255, 255, 255, 0.035);
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  transition: background 0.2s ease, transform 0.2s ease;
}

.secu-resource:hover {
  background: rgba(123, 167, 173, 0.1);
  transform: translateY(-2px);
  color: inherit;
}

.secu-resource--highlight {
  background: rgba(123, 167, 173, 0.09);
}

.secu-resource--highlight:hover {
  background: rgba(123, 167, 173, 0.16);
}

.secu-resource__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 12px;
}

.secu-resource__icon--1 {
  background: var(--acc-1-bg);
  color: var(--acc-1);
}

.secu-resource__icon--3 {
  background: var(--acc-3-bg);
  color: var(--acc-3);
}

.secu-resource__icon--4 {
  background: var(--acc-4-bg);
  color: var(--acc-4);
}

.secu-resource__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.secu-resource__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-lead);
}

.secu-resource__cta {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
}

.secu-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(30, 90, 112, 0.55);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

.secu-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 300px at 90% -10%, rgba(123, 167, 173, 0.16), transparent 62%);
  pointer-events: none;
}

.secu-cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(24px, 3vw, 44px);
  align-items: center;
}

.secu-cta__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.secu-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #f5fafb;
}

.secu-cta__text {
  margin: 0;
  max-width: 560px;
  font-size: 16px;
  line-height: 1.7;
  color: #cfe2e6;
}

.secu-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* Filet plus marqué ici (panneau teal, vérifié sur la démo) que celui du
   héros de la page Recrutement — deux contextes, deux opacités de filet. */
.secu-cta__actions .btn--ghost {
  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #e7f2f3;
}

.secu-cta__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--r-md);
  background: rgba(4, 22, 31, 0.62);
  font-size: 15px;
}

.secu-cta__key {
  width: 86px;
}

.secu-cta__value--muted {
  color: var(--fg-lead);
  line-height: 1.55;
}

.secu-cta__value--btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.secu-cta__row--client {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================================
   RECRUTEMENT

   Le héros et les enveloppes de section reprennent .page-hero et
   .page-section (page Sécurité numérique) telles quelles : même mise en
   page (titre/texte/CTA à gauche, photo à droite ; rythme vertical des
   sections), pas de raison d'en dupliquer les règles ici.
   ========================================================================= */

.recrut-metiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.recrut-metier {
  border-radius: var(--r-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.recrut-metier--highlight {
  background: linear-gradient(150deg, rgba(38, 92, 112, 0.72), rgba(14, 48, 64, 0.82));
}

.recrut-metier:not(.recrut-metier--highlight) {
  background: rgba(123, 167, 173, 0.09);
}

.recrut-metier__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #7ba7ad;
}

.recrut-metier--highlight .recrut-metier__num {
  color: #bfd6d9;
}

.recrut-metier__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.recrut-metier__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--fg-lead);
}

.recrut-metier--highlight .recrut-metier__text {
  color: #c2dce0;
}

.recrut-purpose {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  padding: clamp(24px, 2.8vw, 36px);
  background: linear-gradient(130deg, var(--join-1), rgba(14, 48, 64, 0.9));
}

.recrut-purpose__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(560px 260px at 88% -20%, rgba(123, 167, 173, 0.16), transparent 62%);
  pointer-events: none;
}

.recrut-purpose__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 840px;
}

.recrut-purpose__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.recrut-values {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 18px;
}

.recrut-value {
  border-radius: var(--r-md);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.recrut-value__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

.recrut-value__icon--1 {
  background: var(--acc-1-bg);
  color: var(--acc-1);
}

.recrut-value__icon--2 {
  background: var(--acc-2-bg);
  color: var(--acc-2);
}

.recrut-value__icon--4 {
  background: var(--acc-4-bg);
  color: var(--acc-4);
}

.recrut-value__icon--5 {
  background: var(--acc-5-bg);
  color: var(--acc-5);
}

.recrut-value__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.recrut-value__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.recrut-savoir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 3.4vw, 48px);
  align-items: start;
}

.recrut-savoir__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.perks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.perk {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.perk:last-child {
  border-bottom: 0;
}

.perk__icon {
  color: var(--acc-3, #7ba7ad);
  display: flex;
  padding-top: 2px;
}

.perk__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: #c6d9de;
}

.recrut-photos {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.recrut-photo-main {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

.recrut-photo-main img {
  width: 100%;
  height: clamp(230px, 26vw, 360px);
  object-fit: cover;
  display: block;
}

.recrut-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.recrut-photo-grid img {
  width: 100%;
  height: clamp(150px, 16vw, 220px);
  object-fit: cover;
  display: block;
  border-radius: var(--r-md);
}

.recrut-qualities {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(32px, 4.5vw, 80px);
  align-items: start;
}

.recrut-qualities__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pull-quote {
  margin: 14px 0 0;
  padding: 26px 28px;
  border-left: 3px solid var(--teal);
  background: rgba(123, 167, 173, 0.07);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.pull-quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #e4eff1;
}

.pull-quote__cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  font-style: normal;
}

.jobs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.jobs-counter {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6e8c97;
}

.jobs-empty {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--r-md);
  border: 1px solid rgba(123, 167, 173, 0.22);
  background: rgba(123, 167, 173, 0.05);
}

.jobs-empty__icon {
  color: var(--teal);
  display: flex;
}

.jobs-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.jobs-empty__text {
  margin: 0;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--fg-lead);
}

.job-offers {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-offer {
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.job-offer__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(17px, 2vw, 22px);
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.job-offer__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.job-offer__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 25px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.job-offer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.job-offer__tag {
  padding: 5px 11px;
  border-radius: 4px;
  background: rgba(123, 167, 173, 0.12);
  font-size: 12.5px;
  color: #bfd6d9;
}

.job-offer__apply {
  align-self: flex-start;
}

.job-offer__chevron {
  flex-shrink: 0;
  display: flex;
  color: #7ba7ad;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.job-offer.is-open .job-offer__chevron {
  transform: rotate(180deg);
}

.job-offer__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.job-offer.is-open .job-offer__body {
  grid-template-rows: 1fr;
}

/* Vérifié sur le rendu de la démo : le panneau replié à 0fr ne tombe pas à
   une hauteur nulle — le padding de son seul enfant direct compte dans sa
   taille minimale automatique quel que soit min-height, et il en résulte une
   carte fermée haute d'environ une ligne, qui laisse deviner le tout début du
   texte d'introduction sous le filet. Une seule animation, continue, plutôt
   que deux éléments distincts (aperçu + panneau) qui se relaient — c'est
   délibérément repris tel quel plutôt que « corrigé ». */
.job-offer__body-content {
  min-height: 0;
  padding: 22px clamp(20px, 2.4vw, 28px) clamp(24px, 2.6vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.job-offer__intro {
  margin: 0;
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.7;
  color: #a9c0c7;
}

.job-offer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 40px;
}

.job-offer__col {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.job-offer__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-offer__block-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7ba7ad;
}

.job-offer__list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: #a9c0c7;
}

.job-offer__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.66;
  color: #93aab4;
}

.job-offer__note {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: #93aab4;
}

.job-offer__tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-offer__skill-tag {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(123, 167, 173, 0.28);
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: #c6d9de;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 18px;
}

.process-step {
  border-radius: var(--r-md);
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.process-step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #7ba7ad;
}

.process-step__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: var(--fg-title);
}

.process-step__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-lead);
}

/* =========================================================================
   CANDIDATURE

   Champs plus hauts, coins plus ronds, fond et filet plus clairs que le
   formulaire de contact général (.field__control) : vérifié sur le rendu de
   la démo, les deux formulaires n'ont vraiment pas la même feuille de style
   — ce n'est pas un oubli à corriger, juste deux formulaires différents.
   ========================================================================= */

.candidature-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: rgba(4, 22, 31, 0.82);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.35);
}

.candidature-card__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 300px at 90% -10%, rgba(123, 167, 173, 0.12), transparent 62%);
  pointer-events: none;
}

.candidature-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(24px, 2.8vw, 44px);
  padding: clamp(22px, 2.6vw, 38px);
}

.candidature-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.candidature-info__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--fg-lead);
}

.candidature-photo {
  margin-top: 8px;
  width: 100%;
  height: clamp(240px, 20vw, 300px);
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
}

.candidature-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field__control--candidature {
  height: 46px;
  padding: 0 14px;
  font-size: 15px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-ctl);
  background: rgba(255, 255, 255, 0.04);
}

.field__control--candidature:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(123, 167, 173, 0.25);
}

.field__control--candidature.field__control--textarea {
  height: auto;
  min-height: 0;
  padding: 14px;
  line-height: 1.6;
}

.cv-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cv-dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--r-ctl);
  border: 1px dashed rgba(123, 167, 173, 0.42);
  background: rgba(123, 167, 173, 0.05);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.cv-dropzone:hover {
  border-color: var(--teal);
  background: rgba(123, 167, 173, 0.09);
}

.cv-dropzone__icon {
  color: var(--teal);
  display: flex;
  flex-shrink: 0;
}

.cv-dropzone__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cv-dropzone__name {
  font-size: 15px;
  color: #eaf3f4;
}

.cv-dropzone__hint {
  font-size: 13px;
  color: #6e8c97;
}

.cv-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.candidature-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-lead);
}

.candidature-consent input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--teal);
  flex-shrink: 0;
}

.candidature-submit {
  align-self: flex-start;
}

/* =========================================================================
   ANIMATIONS
   ========================================================================= */

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, -2%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes typeline {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes riseImg {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes partmarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Allumage du tube : la ligne s'étire à l'écran puis se stabilise */
@keyframes crton {
  0% {
    transform: scale(1, 0.006);
    opacity: 0.2;
    filter: brightness(3);
  }
  40% {
    transform: scale(1, 0.006);
    opacity: 0.6;
  }
  60% {
    transform: scale(1, 1);
    opacity: 1;
    filter: brightness(1.6);
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
    filter: brightness(1);
  }
}

/* Instabilité du phosphore */
@keyframes crtflicker {
  0% { opacity: 0.97; }
  3% { opacity: 0.83; }
  6% { opacity: 0.97; }
  40% { opacity: 0.95; }
  42% { opacity: 0.86; }
  44% { opacity: 0.97; }
  100% { opacity: 0.96; }
}

@keyframes crtblink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes crtalarm {
  0%,
  100% {
    background: #ff2f22;
  }
  50% {
    background: #b3140b;
  }
}

/* Apparition au défilement, pilotée par le contrôleur Stimulus `reveal`.
 *
 * L'état masqué est conditionné à la classe `js`, posée sur <html> par un
 * script en tête de page. Sans JavaScript — script bloqué, erreur de
 * chargement, navigateur restreint — la règle ne s'applique pas et le contenu
 * est simplement lisible. Masquer par défaut ferait disparaître dix-neuf blocs
 * de la page d'accueil à la première erreur de chargement. */
/* La descente d'entrée utilise la propriété `translate` (et non `transform`)
   pour ne jamais entrer en conflit avec le `transform` du survol : une carte
   .metier reste ainsi soulevable au survol une fois révélée. `.reveal.is-
   visible` aurait sinon la spécificité pour geler `transform` à `none` et
   neutraliser l'animation de survol des cartes. */
.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

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

  .js .reveal {
    opacity: 1;
    translate: 0 0;
  }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .integrations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero__grid,
  .contact__grid {
    gap: 36px;
  }
}

@media (max-width: 900px) {
  :root {
    --anchor-offset: 84px;
  }

  .nav,
  .header__actions {
    display: none;
  }

  .header__burger {
    display: inline-flex;
  }

  .hero__grid,
  .purpose__statement,
  .contact__grid,
  .duo {
    grid-template-columns: 1fr;
  }

  .hero {
    padding-top: clamp(80px, 12vw, 120px);
  }

  .hero__title {
    font-size: min(56px, 12cqw);
  }

  .hero__media-frame img {
    height: clamp(280px, 50vw, 460px);
  }

  .olymp {
    grid-template-columns: 1fr;
  }

  .modules {
    grid-template-columns: 1fr;
  }

  /* Une seule colonne, quatre vignettes de même hauteur : c'est ce que fait
     la maquette en mobile (mesuré 361px de large sur 220px de haut, quatre
     fois). La grille en deux colonnes était la seule grille du site à
     conserver sa disposition desktop sous ce point de rupture. */
  .mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 220px);
  }

  .mosaic__cell--tall,
  .mosaic__cell--wide {
    grid-row: span 1;
    grid-column: span 1;
  }

  .bespoke {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact__key {
    width: 64px;
  }

  .page-hero__grid,
  .info-grid,
  .secu-cta__grid,
  .recrut-savoir,
  .recrut-qualities,
  .candidature-grid,
  .job-offer__grid {
    grid-template-columns: 1fr;
  }

  .secu-rule {
    grid-template-columns: 48px 1fr;
    gap: 16px 18px;
    align-items: center;
    padding: 22px 0;
  }

  .secu-rule__icon {
    width: 76px;
    height: 76px;
  }

  .secu-rule__body {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .integrations {
    grid-template-columns: 1fr;
  }

  .section__head {
    gap: 20px;
  }

  .panel {
    padding: 26px;
  }

  .footer__legal {
    flex-direction: column;
    gap: 12px;
  }

  /* Une seule colonne de lignes, mais chaque ligne garde son libellé et sa
     valeur côte à côte, comme la maquette (mesuré 50px de haut par ligne).
     Les empiler verticalement portait chaque ligne à 77px, soit +54 %, et
     rallongeait le bloc « Éditeur du site » de plus de 200px. */
  .legal__rows {
    grid-template-columns: 1fr;
  }
}