/* ============================================================
   Lightworker Collective — Design system (brand.css)
   Source de vérité du site. Aucune couleur ni police codée en
   dur ailleurs : tous les composants consomment ces variables.
   Règle 70/30 : bases neutres pour les fonds et grandes
   surfaces; accents vifs en petites touches seulement.
   (Recréé quasi verbatim de la page « Immersion » — charte §2.)
   ============================================================ */

/* Police de marque « Royal » (fichiers .otf fournis par la cliente).
   Le poids 500 des titres tombe volontairement sur la coupe Semibold
   (font-weight: 500 600) : aucun poids structurant n'est modifié.
   ⚠️ Sans ces fichiers, la pile de repli est Cormorant Garamond, Georgia. */
@font-face {
  font-family: 'Royal';
  src: url('../fonts/ROYALE.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Royal';
  src: url('../fonts/ROYALE-Semibold.woff2') format('woff2');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Royal';
  src: url('../fonts/ROYALE-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     Palette officielle « Visual Universe » (source de vérité).
     Fonds de section : blanc, bleu ou noir UNIQUEMENT.
     Or = accent précieux, désormais DORMANT (rebrand bleu).
     ============================================================ */
  --color-ocean-deep:      #050505;  /* noir profond */
  --color-mermaid-blue:    #173948;  /* bleu sarcelle foncé */
  --color-celestial-tides: #4b6d77;  /* bleu ardoise atténué (texte secondaire) */
  --color-divine-veil:     #f7f9f9;  /* blanc cassé */
  --color-solar-gold:      #CC9C54;  /* ex-accent or — conservé mais plus utilisé (rebrand bleu) */
  --color-celestial-light: #6D9BA8;  /* bleu clair — accents & noms sur fonds sombres/bleus */

  /* --- Alias historiques REPOINTÉS vers la nouvelle palette ---
     Les composants consomment toujours ces noms : le rebrand se fait
     donc ici, sans patch couleur par couleur ailleurs. */
  --charcoal:  var(--color-ocean-deep);      /* base foncée + texte sur clair */
  --aubergine: var(--color-mermaid-blue);    /* sections « bleues » */
  --wine:      var(--color-mermaid-blue);
  --teal:      var(--color-mermaid-blue);
  --sage:      var(--color-celestial-tides); /* ex-accents vifs -> bleu Celestial */
  --cream:     var(--color-divine-veil);     /* base claire + texte sur foncé */
  --white:     #FFFFFF;                       /* blanc pur — reflets « verre » translucides */

  /* Ex-accents vifs -> tous ramenés au bleu Celestial #4B6D77 (seul accent). */
  --powder-blue:  var(--color-celestial-tides);
  --burnt-orange: var(--color-celestial-tides);
  --raspberry:    var(--color-celestial-tides);
  --tan:          var(--color-celestial-tides);

  /* Texte secondaire sur fond clair. */
  --teal-deep: var(--color-celestial-tides);

  /* ============================================================
     Typographie « Visual Universe »
     ============================================================ */
  --font-display:   'Royal', 'Cormorant Garamond', Georgia, serif;   /* gros titres (H1-H4) */
  --font-body:      'Open Sans', system-ui, sans-serif;              /* sous-titres, interface, corps */
  --font-editorial: Georgia, 'Times New Roman', serif;               /* accents éditoriaux */

  /* Alias repointés : étiquettes UI (nav, badges…) -> Open Sans ;
     accents (boutons, chiffres, citations) -> Georgia. */
  --font-title:  var(--font-body);       /* ex-Poppins */
  --font-accent: var(--font-editorial);  /* ex-Cormorant */

  /* Polices HISTORIQUES conservées UNIQUEMENT pour le logotype
     LIGHTWORKER (demande cliente : le garder tel quel). Voir
     components.css .logo-light / .logo-worker / .logo-collective. */
  --font-logo-sans:  'Poppins', sans-serif;
  --font-logo-serif: 'Cormorant Garamond', serif;

  /* Formes et espaces */
  --radius-soft: 20px;      /* blocs, cartes, images */
  --radius-btn:  999px;     /* boutons pleinement arrondis */
  --section-y:   clamp(110px, 15vw, 210px); /* respiration très généreuse — le vide fait partie du design */
  --container:   1180px;

  /* Mouvement — une seule famille d'easing pour tout le site */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------
   Reset doux
   ------------------------------------------------------------ */

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

* { margin: 0; }   /* ⚠️ tue le margin:auto natif du <dialog> : rétabli au §formulaire */

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

/* Coupe tout débordement horizontal AU NIVEAU DE LA FENÊTRE (le `clip` sur
   <body> ne se propage pas toujours au viewport comme `hidden` — d'où la
   bande blanche à droite). `clip` ne casse pas position: sticky. */
html { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--charcoal);
  background: var(--white);
  overflow-x: clip; /* les blooms peuvent déborder sans créer de barre de défilement */
  -webkit-font-smoothing: antialiased;
}

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

a { color: inherit; }

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

/* ------------------------------------------------------------
   Typographie de base
   Branding « Visual Universe » : titres en Royal (serif de marque).
   Les GROS titres (H1/H2) passent en MAJUSCULES espacées, façon
   logotype. Seules la casse et l'interlettrage changent — taille,
   poids et interligne restent identiques.
   ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.22;
  text-transform: none;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Signature Visual Universe : H1/H2 en capitales espacées. */
h1, h2 { text-transform: uppercase; letter-spacing: 0.05em; }

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

/* La touche éditoriale : Georgia italique —
   réservée aux boutons, numéros, grands chiffres, citations. */
.accent-serif,
em.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 600;
}

em.accent {
  font-size: 1.12em;
  line-height: 1;
  font-weight: 100;        /* accent fin (Georgia rend au plus léger dont il dispose) */
  letter-spacing: 1px;
  color: var(--accent-ink, inherit);   /* #4B6D77 sur clair ; bleu clair sur foncé */
}

/* Petites étiquettes / eyebrows — seul endroit où les capitales
   espacées sont permises. */
.eyebrow {
  display: block;
  font-family: var(--font-title);   /* Open Sans (alias repointé) */
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.2em;            /* sous-titres Visual Universe ~0,2em */
  text-transform: uppercase;
  color: var(--eyebrow-ink, var(--teal-deep));
  margin-bottom: 1.4rem;
}

/* ------------------------------------------------------------
   Structure : conteneur et sections
   ------------------------------------------------------------ */

.container {
  width: min(var(--container), 100% - clamp(2.5rem, 8vw, 5rem));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section > .container { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   Thèmes de section — le rythme alterne blanc, cream et aplats
   foncés (blanc / bleu #173948 / noir #050505 UNIQUEMENT).
   Chaque thème expose des variables consommées par les composants
   (texte, boutons, focus, eyebrow) : un composant ne connaît
   jamais une couleur, il s'adapte au fond.
   ------------------------------------------------------------ */

.theme-white {
  background: var(--white);
  color: var(--charcoal);
  --ink: var(--charcoal);
  --ink-soft: color-mix(in srgb, var(--charcoal) 74%, var(--white));
  --accent-ink: var(--teal-deep);
  --eyebrow-ink: var(--teal-deep);
  --btn-bg: var(--charcoal);
  --btn-ink: var(--cream);
  --focus-ring: var(--teal-deep);
  --hairline: color-mix(in srgb, var(--charcoal) 14%, transparent);
}

.theme-cream {
  background: var(--cream);
  color: var(--charcoal);
  --ink: var(--charcoal);
  --ink-soft: color-mix(in srgb, var(--charcoal) 76%, var(--cream));
  --accent-ink: var(--teal-deep);
  --eyebrow-ink: var(--teal-deep);
  --btn-bg: var(--charcoal);
  --btn-ink: var(--cream);
  --focus-ring: var(--teal-deep);
  --hairline: color-mix(in srgb, var(--charcoal) 16%, transparent);
}

.theme-charcoal {
  background: var(--charcoal);
  color: var(--cream);
  --ink: var(--cream);
  --ink-soft: color-mix(in srgb, var(--cream) 82%, var(--charcoal));
  --accent-ink: var(--powder-blue);
  --eyebrow-ink: var(--powder-blue);
  --btn-bg: var(--cream);
  --btn-ink: var(--charcoal);
  --focus-ring: var(--cream);
  --hairline: color-mix(in srgb, var(--cream) 18%, transparent);
}

.theme-aubergine {
  background: var(--aubergine);
  color: var(--cream);
  --ink: var(--cream);
  --ink-soft: color-mix(in srgb, var(--cream) 84%, var(--aubergine));
  --accent-ink: var(--color-celestial-light);   /* #4B6D77 illisible sur bleu -> bleu clair */
  --eyebrow-ink: var(--color-celestial-light);
  --btn-bg: var(--cream);
  --btn-ink: var(--aubergine);
  --focus-ring: var(--cream);
  --hairline: color-mix(in srgb, var(--cream) 18%, transparent);
}

.theme-wine {
  background: var(--wine);
  color: var(--cream);
  --ink: var(--cream);
  --ink-soft: color-mix(in srgb, var(--cream) 84%, var(--wine));
  --accent-ink: var(--color-celestial-light);
  --eyebrow-ink: var(--color-celestial-light);
  --btn-bg: var(--cream);
  --btn-ink: var(--wine);
  --focus-ring: var(--cream);
  --hairline: color-mix(in srgb, var(--cream) 18%, transparent);
}

/* Bande CTA — sur bleu Mermaid. Texte Divine Veil (fort contraste sur #173948),
   eyebrow crème plein, bouton charcoal. */
.theme-teal {
  background: var(--teal);
  color: var(--cream);
  --ink: var(--cream);
  --ink-soft: color-mix(in srgb, var(--cream) 90%, var(--teal));
  --accent-ink: var(--color-celestial-light);
  --eyebrow-ink: var(--cream);
  --btn-bg: var(--charcoal);
  --btn-ink: var(--cream);
  --focus-ring: var(--charcoal);
  --hairline: color-mix(in srgb, var(--cream) 22%, transparent);
}

/* ------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--focus-ring, var(--teal-deep));
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 200;
  padding: 0.6em 1.2em;
  background: var(--charcoal);
  color: var(--cream);
  border-radius: var(--radius-btn);
  font-family: var(--font-title);
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

::selection { background: var(--powder-blue); color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}