/* Pré-diagnostic cyber THEIA SDN — charte Groupe THEIA 2026, éditorial clair.
   Palette immuable : #E01F94 · #A42593 · #2C3792 · #022179. Mobile d'abord. */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-500.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-700.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url(fonts/dm-sans-400.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 500; font-display: swap; src: url(fonts/dm-sans-500.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url(fonts/dm-sans-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-500.woff2) format("woff2"); }

:root {
  --rose: #E01F94; --violet: #A42593; --bleu: #2C3792; --marine: #022179;
  --degrade: linear-gradient(90deg, #E01F94, #A42593 35%, #2C3792 70%, #022179);
  --fond: #F5F6FA; --blanc: #FFFFFF; --nuit: #050616;
  --texte: #374151; --discret: #6B7280; --bordure: #E4E4EE; --bordure-forte: #C9CBDA;
  --voile-violet: rgba(164, 37, 147, .08); --voile-marine: rgba(2, 33, 121, .06);
  --f-titre: "Space Grotesk", Arial, sans-serif;
  --f-corps: "DM Sans", Arial, Helvetica, sans-serif;
  --f-mono: "IBM Plex Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, .61, .36, 1); --ease-doux: cubic-bezier(.4, 0, .2, 1);
  --rapide: 160ms; --base: 320ms; --lent: 900ms;
  --marge: 16px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 1rem/1.6 var(--f-corps); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--violet); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--marine); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; border-radius: 4px; }

/* Bascule offre ouverte / close : le script pose data-etat sur <html>. */
html[data-etat="ouvert"] [data-si="clos"], html[data-etat="clos"] [data-si="ouvert"] { display: none !important; }

.filet { height: 4px; background: var(--degrade); }

/* En-tête */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1120px; margin: 0 auto; padding: 14px var(--marge);
}
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--marine); }
.marque img { width: 56px; height: auto; }
.nw { white-space: nowrap; }
.evenement { margin: 0; text-align: right; font: 500 .6875rem/1.35 var(--f-mono); letter-spacing: .04em; color: var(--marine); text-transform: uppercase; }
.evenement span { color: var(--discret); }

/* Hero */
.hero { position: relative; max-width: 1120px; margin: 0 auto; padding: 36px var(--marge) 28px; isolation: isolate; overflow: hidden; }
.reseau {
  position: absolute; z-index: -1; width: 340px; right: -150px; top: -10px; opacity: .22;
}
.surtitre {
  margin: 0 0 14px; font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--violet);
}
h1 {
  margin: 0; color: var(--marine); font: 700 clamp(2.125rem, 9.4vw, 4.25rem)/1.02 var(--f-titre); letter-spacing: -.025em;
  max-width: 13ch; text-wrap: balance;
}
h1 em {
  font-style: normal; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.chapo { margin: 18px 0 0; font-size: 1.0625rem; line-height: 1.55; max-width: 34em; color: var(--texte); }
.hero-actions { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.echeance { margin: 0; display: flex; align-items: center; gap: 8px; font: 500 .8125rem/1.3 var(--f-mono); color: var(--marine); }
.point { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(224, 31, 148, .15); }

/* Boutons */
.bouton {
  --ombre: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(2, 33, 121, .55);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(100deg, #A42593, #2C3792 75%, #022179); color: #fff;
  font: 700 1rem/1.2 var(--f-corps); letter-spacing: .01em; text-decoration: none; box-shadow: var(--ombre);
  transition: transform var(--rapide) var(--ease), box-shadow var(--base) var(--ease), filter var(--rapide);
}
.bouton::after { content: "→"; font-family: var(--f-mono); transition: transform var(--base) var(--ease); }
.bouton:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 30px -12px rgba(2, 33, 121, .65); }
.bouton:hover::after { transform: translateX(3px); }
.bouton:active { transform: translateY(1px) scale(.99); box-shadow: 0 4px 10px -6px rgba(2, 33, 121, .6); filter: brightness(.96); }
.bouton[aria-busy="true"] { cursor: progress; filter: saturate(.7); }
.bouton[aria-busy="true"]::after { content: ""; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: tourne .8s linear infinite; }
.bouton-plein { width: 100%; margin-top: 8px; }
@keyframes tourne { to { transform: rotate(1turn); } }

/* Trio */
.trio {
  max-width: 1120px; margin: 8px auto 0; padding: 0 var(--marge);
  display: grid; gap: 0; counter-reset: t;
}
.trio article {
  display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--bordure);
}
.trio article:last-child { border-bottom: 1px solid var(--bordure); }
.chiffre {
  grid-row: span 2; margin: 0; font: 700 2.25rem/1 var(--f-titre); letter-spacing: -.03em;
  background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.trio h2 { margin: 0; font: 700 1.125rem/1.3 var(--f-titre); color: var(--marine); }
.trio p:not(.chiffre) { margin: 4px 0 0; font-size: .9375rem; line-height: 1.5; }

/* Formulaire */
.inscription { max-width: 1120px; margin: 0 auto; padding: 36px var(--marge) 8px; scroll-margin-top: 8px; }
.carte {
  max-width: 640px; margin: 0 auto; background: var(--blanc); border: 1px solid var(--bordure); border-radius: 20px;
  padding: 26px 18px 22px; box-shadow: 0 1px 0 rgba(2, 33, 121, .03), 0 24px 48px -32px rgba(2, 33, 121, .28);
  position: relative; overflow: hidden;
}
.carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--degrade); }
.titre-section { margin: 0; font: 700 1.625rem/1.15 var(--f-titre); color: var(--marine); letter-spacing: -.015em; }
.aide-section { margin: 8px 0 4px; font-size: .9375rem; color: var(--discret); }

fieldset { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
legend {
  padding: 0; margin-bottom: 10px; font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--violet);
  display: flex; align-items: center; gap: 10px; width: 100%;
}
legend::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }

.champ { margin-bottom: 14px; }
.duo { display: grid; gap: 0 12px; }
label, .libelle { display: block; margin: 0 0 6px; font: 500 .9375rem/1.3 var(--f-corps); color: var(--nuit); }
.facultatif { font: 500 .6875rem var(--f-mono); color: var(--discret); text-transform: uppercase; letter-spacing: .06em; margin-left: 6px; }
input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--bordure-forte); border-radius: 12px;
  background: var(--blanc); color: var(--nuit); font: 400 1rem/1.4 var(--f-corps); /* 16 px : pas de zoom iOS */
  transition: border-color var(--rapide), box-shadow var(--base) var(--ease), background-color var(--rapide);
  -webkit-appearance: none; appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23022179' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}
input::placeholder, textarea::placeholder { color: #9A9FB0; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--bleu); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px var(--voile-violet); }
[aria-invalid="true"] { border-color: var(--violet) !important; background-color: #FDF7FC !important; }
.aide { margin: 6px 0 0; font-size: .8125rem; color: var(--discret); }
.aide-droite { text-align: right; font-family: var(--f-mono); font-size: .75rem; }
.erreur { margin: 6px 0 0; font-size: .875rem; font-weight: 500; color: var(--violet); display: none; }
.erreur:not(:empty) { display: flex; gap: 7px; align-items: flex-start; }
.erreur:not(:empty)::before {
  content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--violet); color: #fff; font: 700 .75rem/1 var(--f-mono);
}

/* Pastilles (choix exclusifs) */
.pastilles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pastille { position: relative; margin: 0; }
.pastille input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pastille span {
  display: grid; place-items: center; min-height: 50px; padding: 8px 6px; border: 1.5px solid var(--bordure-forte); border-radius: 12px;
  text-align: center; font: 500 .875rem/1.2 var(--f-corps); color: var(--marine); background: var(--blanc);
  transition: border-color var(--rapide), background-color var(--rapide), color var(--rapide), box-shadow var(--base) var(--ease), transform var(--rapide) var(--ease);
}
.pastille:hover span { border-color: var(--bleu); }
.pastille input:active + span { transform: scale(.98); }
.pastille input:focus-visible + span { box-shadow: 0 0 0 4px var(--voile-violet); border-color: var(--violet); }
.pastille input:checked + span {
  border-color: transparent; color: #fff; font-weight: 700;
  background: linear-gradient(120deg, #A42593, #2C3792); box-shadow: 0 8px 18px -10px rgba(44, 55, 146, .8);
}
[aria-invalid="true"] .pastille span { border-color: var(--violet); }

/* Pot de miel : hors écran, jamais vu par un humain */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Consentement */
.consentement { margin-top: 20px; padding: 14px; border-radius: 12px; background: var(--fond); }
.case { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 0; font: 400 .875rem/1.5 var(--f-corps); color: var(--texte); cursor: pointer; }
.case input {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid var(--bordure-forte); border-radius: 7px;
  background: var(--blanc) center/14px no-repeat; cursor: pointer; transition: background-color var(--rapide), border-color var(--rapide);
}
.case input:hover { border-color: var(--bleu); }
.case input:checked {
  border-color: var(--bleu); background-color: var(--bleu);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='m2.5 7.5 3 3 6-7' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.case input:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

.statut { margin-top: 12px; font-size: .9375rem; }
.statut:empty { display: none; }
.alerte { padding: 12px 14px; border-radius: 12px; background: var(--voile-violet); border-left: 3px solid var(--violet); color: var(--nuit); font-size: .9375rem; }
.alerte p { margin: 0; }
.alerte p + p { margin-top: 6px; }

/* Confirmation */
.merci { text-align: center; padding: 18px 4px 8px; outline: none; }
.merci p { max-width: 30em; margin: 12px auto 0; }
.coche { width: 64px; height: 64px; margin: 0 auto 16px; }
.coche circle { fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-dasharray: 140; stroke-dashoffset: 140; animation: trace var(--lent) var(--ease) forwards; }
.coche path { fill: none; stroke: var(--marine); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 34; stroke-dashoffset: 34; animation: trace 500ms var(--ease) 500ms forwards; }
.reference { font: 500 .8125rem var(--f-mono); color: var(--discret); letter-spacing: .04em; }
.reference span { color: var(--marine); }
.lien-retour { display: inline-block; margin-top: 18px; font-weight: 500; }
@keyframes trace { to { stroke-dashoffset: 0; } }

/* Données personnelles */
.donnees { max-width: 640px; margin: 0 auto; padding: 36px var(--marge) 8px; scroll-margin-top: 8px; }
.donnees h2 { margin: 0 0 14px; font: 700 1.125rem/1.3 var(--f-titre); color: var(--marine); }
.donnees dl { margin: 0; font-size: .875rem; line-height: 1.55; }
.donnees dt { margin-top: 12px; font: 500 .6875rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.donnees dd { margin: 3px 0 0; }

.pied { max-width: 1120px; margin: 28px auto 0; padding: 22px var(--marge) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordure); font-size: .75rem; line-height: 1.55; color: var(--discret); }
.pied p { margin: 0 0 6px; max-width: 72em; }

/* Mouvement : le réseau se connecte, une seule fois. */
@media (prefers-reduced-motion: no-preference) {
  .liens path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 1600ms var(--ease) 150ms forwards; }
  .noeuds circle { transform-box: fill-box; transform-origin: center; animation: apparait 700ms var(--ease) both; }
  .noeuds circle:nth-child(3n) { animation-delay: 300ms; } .noeuds circle:nth-child(3n+1) { animation-delay: 550ms; } .noeuds circle:nth-child(3n+2) { animation-delay: 800ms; }
  .reseau { animation: orbite 120s linear 1.6s infinite; }
  .hero > :not(.reseau) { animation: monte 720ms var(--ease) both; }
  .hero > h1 { animation-delay: 80ms; } .hero > .chapo { animation-delay: 160ms; } .hero > .hero-actions { animation-delay: 240ms; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .coche circle, .coche path { stroke-dashoffset: 0; } }
@keyframes apparait { from { opacity: 0; transform: scale(.4); } }
@keyframes orbite { to { transform: rotate(1turn); } }
@keyframes monte { from { opacity: 0; transform: translateY(12px); } }

/* Tablette et plus */
@media (min-width: 560px) {
  :root { --marge: 28px; }
  .duo { grid-template-columns: 1fr 1fr; }
  .carte { padding: 34px 32px 28px; }
  .marque img { width: 64px; }
  .reseau { width: 420px; right: -120px; }
}
@media (min-width: 900px) {
  .hero { padding: 72px var(--marge) 48px; }
  .reseau { width: 520px; right: -10px; top: 10px; opacity: .9; }
  .chapo { font-size: 1.1875rem; }
  .hero-actions { flex-direction: row; align-items: center; gap: 22px; }
  .trio { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .trio article { grid-template-columns: 1fr; border-bottom: 1px solid var(--bordure); padding: 22px 0; }
  .chiffre { grid-row: auto; font-size: 3rem; margin-bottom: 10px; }
  .inscription { padding-top: 64px; }
}