/* ============================================================================
   NEO-FUGU® Care — feuille de style commune
   ----------------------------------------------------------------------------
   Contient ce qui doit etre IDENTIQUE sur toutes les pages du site :
     - la remise a zero et le conteneur .wrap
     - les tokens de couleur, de rayon et de typographie
     - les composants partages : pastille, badge, champs, formulaire
       d'inscription (avec son etat de confirmation), boutons, pied de page

   Ce qui reste dans le <style> de chaque page : sa mise en page, ses sections,
   et ses animations d'entree propres.

   REGLE : une declaration qui existe a l'identique sur deux pages appartient a
   ce fichier, pas aux pages. Une valeur ecrite en dur dans une page alors qu'un
   token existe est un bug — c'est ce qui avait fait diverger le formulaire de la
   page expo et celui de la page prototype.

   A charger AVANT le <style> de la page, pour qu'elle puisse encore surcharger
   ce qui lui est specifique (marges, positionnement, animations d'entree).

   Pages qui l'utilisent : prototype-site-neofugu-care.html,
   expo-prestige2026.html, expo-prestige2026-en.html.
   ============================================================================ */

:root {
  /* Bleus de marque */
  --blue-800: #0E64C4;
  --blue-700: #0D79C2;
  --blue-500: #2C9BEA;
  --critical: #E46155;
  --ok: #44B987;

  /* Echelle d'elevation, issue de la palette DARK-NEUTRAL du design system.
     Chaque niveau est plus clair que celui qui le porte :
     page < bande < carte < surface interne < bordure.
     --night reste hors palette : les degrades du hero reposent dessus. */
  --night: #05080C;        /* fond de page, partout */
  --band: #151B2A;         /* DARK-NEUTRAL-900 — bandes de section */
  --card: #1A202F;         /* DARK-NEUTRAL-880 — cartes */
  --card-2: #222736;       /* DARK-NEUTRAL-850 — surfaces dans une carte */
  --border: #2A3042;       /* DARK-NEUTRAL-750 — bordures */
  --border-soft: rgba(255, 255, 255, .08);

  /* Texte */
  --ink: #F4F7FA;
  --muted: rgba(244, 247, 250, .66);

  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
  --btn-height: 46px;

  /* RAYONS — quatre valeurs pour tout le site, et rien d'autre. Un rayon ecrit en dur
     dans une page est un bug : c'est ce qui avait fait diverger les blocs (12, 14, 18,
     22px selon l'endroit) alors qu'ils racontent tous la meme chose. */
  --radius-card: 14px;    /* cartes et blocs, partout */
  --radius-panel: 22px;   /* grands panneaux pleine largeur (l'appel final) */
  --radius-field: 5px;    /* champs de formulaire et boutons */
  --radius-pill: 100px;   /* pilules : badges, pastilles d'etape, liens de nav */

  /* PASTILLES D'ICONE — fond bleu PLEIN et glyphe blanc, comme le numero d'une etape
     active. Un seul jeu pour toutes les pastilles rondes du site, quelle que soit leur
     taille. Voir .ico plus bas. */
  --ico-bg: var(--blue-700);
  --ico-border: var(--blue-700);
  --ico-color: #fff;
  /* Variante NEUTRE, reservee a ce qui ne doit porter aucun jugement — la colonne
     « le suivi tel qu'il se pratique » du constat. Meme geometrie, couleur en retrait. */
  --ico-bg-neutral: rgba(255, 255, 255, .06);
  --ico-border-neutral: var(--border);

  /* TEINTE — le bleu TRES dilue. Rien a voir avec les pastilles : il sert de fond aux
     pilules de texte (une etiquette bleue sur bleu plein serait illisible) et aux
     surfaces legerement bleutees, comme la carte « apres » du constat. */
  --tint-bg: rgba(13, 121, 194, .14);
  --tint-border: rgba(44, 155, 234, .32);
}

/* ---------------------------------------------------------------------------
   REMISE A ZERO ET CONTENEUR
   Le .wrap est la SEULE largeur de contenu du site : 1080px, 24px de gouttiere.
   Chaque page le reutilise tel quel — nav, hero, sections, pied de page.
   --------------------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
a { color: inherit; }
img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------------------
   PASTILLE D'ICONE — le composant rond qui porte une icone ou un chiffre.
   Une seule geometrie (cercle, filet de 1px), un seul fond, une seule couleur.
   Seule la TAILLE change d'un emplacement a l'autre, et elle est fixee sur place.
   Deux variantes semantiques, qui ne changent que la couleur :
     .ico--ok       validation (vert)
     .ico--neutral  constat, volontairement sans jugement (gris)
   --------------------------------------------------------------------------- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ico-bg);
  border: 1px solid var(--ico-border);
  color: var(--ico-color);
}
.ico--ok { background: rgba(68, 185, 135, .16); border-color: rgba(68, 185, 135, .4); color: var(--ok); }
.ico--neutral { background: var(--ico-bg-neutral); border-color: var(--ico-border-neutral); color: var(--muted); }

/* ---------------------------------------------------------------------------
   TYPOGRAPHIE — une seule echelle pour tout le site.
   Les tailles sont en clamp() : plus besoin de media queries par page.
   Les marges restent a la charge de chaque page.
   --------------------------------------------------------------------------- */
h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.5px;
  color: var(--ink);
}

/* Mot mis en avant dans un h1 : degrade anime.
   `em` et `.highlight` sont deux ecritures historiques du meme composant. */
h1 em,
h1 .highlight {
  font-style: normal;
  background: linear-gradient(90deg, var(--ink) 0%, var(--blue-500) 40%, var(--ink) 75%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: titleGradient 9s ease-in-out .8s infinite;
}

@keyframes titleGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

h3.title {
  font-size: clamp(24px, 2.9vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
}
h3.title em { font-style: normal; color: var(--blue-500); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--blue-500);
}

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--blue-500);
}

/* ---------------------------------------------------------------------------
   BADGE — un seul composant, partout.
   Forme en pilule, comme toutes les autres pastilles du site.
   Markup : <p class="badge"><span class="badge-ico">…</span> Texte</p>
   L'icone accepte soit un <svg>, soit un <span class="dot"></span>.
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 7px 16px 7px 8px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}

/* meme pastille que partout ailleurs, en 24px */
.badge-ico {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ico-bg);
  border: 1px solid var(--ico-border);
  color: var(--ico-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge-ico svg { width: 14px; height: 14px; }
.badge-ico .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ico-color);
  display: block;
}

/* ---------------------------------------------------------------------------
   BANDEAU DE NAVIGATION — MEME bandeau sur toutes les pages : fond transparent,
   78px de haut, la marque a gauche, le selecteur de langue a droite.

   Une seule chose reste a la charge de la page, et pour une raison de fond :
     - pages expo      : rien de plus. Elles tiennent sur un ecran, le bandeau
                         est simplement superpose au hero (position: absolute).
     - page prototype  : elle est longue, son bandeau lui sert de SOMMAIRE. Il
                         passe donc en position: fixed, se solidifie au
                         defilement (.is-scrolled) et porte la liste des
                         sections. La geometrie, elle, ne change pas.
   --------------------------------------------------------------------------- */
nav.top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: transparent;
}
/* space-between est sans effet des qu'un enfant porte une marge auto (le
   sommaire du prototype) : les marges auto absorbent l'espace libre en premier.
   La meme regle sert donc les deux pages. */
nav.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 16px;
}

.brand-logo { height: 26px; width: auto; display: block; flex-shrink: 0; }

.lang-switch {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
}
.lang-switch a {
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--muted);
  transition: color .2s ease, background .2s ease;
}
.lang-switch a.active { color: #fff; background: rgba(255, 255, 255, .1); }
.lang-switch a:not(.active):hover { color: #fff; }

/* ---------------------------------------------------------------------------
   GRILLE DU HERO — le texte a gauche, le formulaire a droite, et surtout la
   MEME largeur de colonnes sur les deux pages : sans cette regle commune, le
   formulaire faisait 476px sur l'expo et 462px sur le prototype.
   Chaque page garde ses marges verticales et son point de bascule en une
   colonne (860px sur le prototype, 900px sur l'expo).
   --------------------------------------------------------------------------- */
.hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px 56px;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   FOND ANIME DU HERO — rayons de lumiere bleus en Canvas 2D (le script est
   dans chaque page). Le calque est le meme partout : c'est lui qui donne au
   hero du prototype et a celui de l'expo exactement la meme lumiere.
   --------------------------------------------------------------------------- */
#beams-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* ---------------------------------------------------------------------------
   PANNEAU DE FORMULAIRE — identique sur toutes les pages.
   Bordure bleutee + halo bleu dessous, comme les autres blocs mis en avant.
   --------------------------------------------------------------------------- */
.form-panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--tint-border);
  border-radius: var(--radius-card);
  padding: 26px 26px 22px;
  color: var(--ink);
  box-shadow: 0 30px 74px -44px rgba(44, 155, 234, .65);
}

/* ---------------------------------------------------------------------------
   CHAMPS DE FORMULAIRE — partages entre le formulaire d'inscription (expo) et
   le formulaire de prise de contact du prototype : selecteur de profil en
   radio-cartes, champs texte, case de consentement.
   --------------------------------------------------------------------------- */
.section-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}

.profile-radio-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
/* La base de 196px est la largeur qu'il faut au plus long libelle pour tenir sur UNE
   ligne : 137px de texte + la pastille (18) + son ecart (10) + les paddings (26).
   Combinee au flex-wrap du groupe, elle fait que les deux cartes se placent cote a
   cote quand la colonne est assez large, et passent l'une SOUS l'autre des qu'elles ne
   tiennent plus — au lieu de couper « Detaillant / bijoutier » sur deux lignes. */
.profile-radio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 196px;
  padding: 11px 13px;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.profile-radio:hover { border-color: var(--blue-500); background: var(--tint-bg); }
.profile-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--card-2);
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.profile-radio input[type="radio"]:checked { background: var(--blue-700); border-color: var(--blue-700); }
.profile-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.profile-radio span { font-size: 14px; font-weight: 600; color: var(--ink); }
.profile-radio.checked { background: rgba(13, 121, 194, .18); border-color: var(--blue-700); }

.field { margin-bottom: 9px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--ink); }
.field label .req { color: var(--critical); margin-left: 2px; }
.field input {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-field);
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
}
.field input::placeholder { color: rgba(244, 247, 250, .35); }
.field input:focus { border-color: var(--blue-500); }
.field input.field-input--error { border-color: var(--critical); }
.field-msg--error { display: block; color: var(--critical); font-size: 12.5px; margin-top: 6px; }

.consent { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; }
.consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 2px;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--border);
  background: var(--card-2);
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.consent input[type="checkbox"]:checked { background: var(--blue-700); border-color: var(--blue-700); }
.consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}
.consent label { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.consent a { color: var(--blue-500); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   FORMULAIRE D'INSCRIPTION — le composant complet, avec son etat de
   confirmation. C'est LE MEME formulaire sur la page expo et dans le hero de
   la page prototype : meme markup (#signup-card), meme envoi vers
   inscription.php, meme confirmation. Il n'a donc aucune raison d'exister en
   deux exemplaires — tout est ici, rien dans les pages.

   Markup attendu :
     <div id="signup-card" class="form-panel">
       <div id="signup-form-state"> <h2 id="signup-title">…</h2>
         <form id="signup-form" novalidate> … <button id="signup-submit"> </form>
       </div>
       <div id="signup-confirm"> … </div>
     </div>
   --------------------------------------------------------------------------- */
#signup-card h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 12px; }

#signup-submit { width: 100%; font-size: 14.5px; }
.signup-subtext { text-align: center; font-size: 14.5px; color: var(--muted); margin-top: 8px; }

#signup-error {
  display: none;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: var(--radius-field);
  background: rgba(228, 97, 85, .12);
  border: 1px solid rgba(228, 97, 85, .3);
  color: #FCA5A5;
  font-size: 13px;
}
#signup-error.show { display: block; }

/* Confirmation — remplace le formulaire une fois l'inscription enregistree */
#signup-confirm { display: none; text-align: center; }
#signup-confirm.show { display: block; animation: fadeUp .5s cubic-bezier(.2, .7, .2, 1); }
#signup-confirm h2 { margin-bottom: 12px; }
#signup-confirm p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin-bottom: 14px; }
#signup-confirm .linkedin-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--blue-500);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
#signup-confirm .linkedin-cta:hover { color: #fff; }

.confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-800));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iconPop .5s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
.confirm-icon svg { width: 26px; height: 26px; }
/* le crochet se DESSINE, il n'apparait pas d'un coup */
.confirm-icon svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: checkDraw .4s ease-out .35s forwards; }

/* ---------------------------------------------------------------------------
   ANIMATIONS PARTAGEES — utilisees par plusieurs pages, donc definies ici une
   seule fois. Elles etaient redeclarees dans chaque <style>, ce qui laissait
   deriver les durees d'une page a l'autre.
   --------------------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes iconPop {
  from { transform: scale(.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes checkDraw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------------------
   BOUTONS
   .btn est plein par defaut. .btn--secondary est le contour transparent.
   .btn--primary existe encore dans le markup des pages expo : c'est
   desormais un alias sans effet, conserve pour ne rien casser.
   --------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-height);
  padding: 0 26px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-field);
  cursor: pointer;
  background: var(--blue-700);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .15s ease, box-shadow .2s ease;
}
.btn:hover {
  background: var(--blue-500);
  box-shadow: 0 10px 24px -10px rgba(44, 155, 234, .55);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn--secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid var(--border);
}
.btn--secondary:hover { background: var(--blue-700); border-color: var(--blue-700); }

.btn-lg { height: 54px; font-size: 16px; padding: 0 34px; }

/* Bouton porteur d'une fleche qui avance au survol : « Decouvrir la plateforme »
   et « S'inscrire » sont le meme composant, ils doivent bouger pareil. */
.btn--discover { display: inline-flex; align-items: center; gap: 8px; }
.btn--discover svg { width: 17px; height: 17px; transition: transform .2s ease; }
.btn--discover:hover svg { transform: translateX(3px); }

/* Reflet qui balaie les boutons pleins. Jamais sur un bouton transparent. */
.btn:not(.btn--secondary)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -90px;
  width: 58px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: btnSheen 3.6s ease-in-out 1.4s infinite;
}
@keyframes btnSheen {
  0% { left: -90px; }
  55%, 100% { left: 118%; }
}

/* Ripple — retour visuel au clic, centre sur la position de la souris */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  transform: scale(0);
  pointer-events: none;
  animation: rippleOut .5s ease-out forwards;
}
@keyframes rippleOut { to { transform: scale(1); opacity: 0; } }

/* ---------------------------------------------------------------------------
   PIED DE PAGE — MEME pied partout : meme filet, meme typographie, meme
   rembourrage, meme disposition, et le meme contenu (mention de societe a
   gauche, liens legaux a droite).
   Seule la POSITION reste a la page : le pied de l'expo est en absolu, pour se
   poser sur le fond anime du hero d'une page qui tient sur un ecran.
   --------------------------------------------------------------------------- */
footer {
  border-top: 1px solid var(--border-soft);
  background: transparent;
  padding: 14px 0;
}
footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
footer,
footer a { font-size: 12.5px; color: var(--muted); }
footer a { text-decoration: none; }
footer a:hover { color: #fff; }
footer .legal-links { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 640px) {
  nav.top .wrap { height: 64px; }
  .brand-logo { height: 20px; }
  footer .wrap { flex-direction: column; text-align: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  h1 em,
  h1 .highlight { animation: none; background-position: 30% 50%; }
  .btn::after { display: none; }
  #signup-confirm.show,
  .confirm-icon { animation: none; }
  .confirm-icon svg path { stroke-dashoffset: 0; animation: none; }
}