/* ===========================================================================
   DESIGN SYSTEM LABO DAYCO
   ---------------------------------------------------------------------------
   Les jetons de couleur, de typographie et de rayon sont repris tels quels du
   site d'origine (relevé des variables CSS de labodayco.fr le 2026-08-28).
   Rien n'est réinventé ici : l'échelle d'espacement et les niveaux de
   typographie sont ajoutés parce que le site d'origine n'en avait aucun, mais
   ils s'articulent autour des valeurs existantes (80px de header, 120px de
   section, container 1200px).

   Le site alterne délibérément deux fonds : l'encre (#0d0d0d) et le blanc.
   C'est le trait le plus reconnaissable de la marque, il est conservé et
   systématisé via les classes .sur-encre / .sur-blanc.
   =========================================================================== */

:root {
  /* --- Palette d'origine, inchangée --- */
  --encre:            #0d0d0d;
  --encre-alt:        #141414;
  --surface:          #1a1a1a;
  --surface-haut:     #222222;
  --trait:            #2a2a2a;

  --or:               #cda043;
  --or-clair:         #eaca80;
  --or-sombre:        #a68132;

  /* Or de TEXTE. L'or de marque (#cda043) plafonne à 2,41:1 sur blanc : il est
     illisible dès qu'il porte du texte sur fond clair — défaut hérité du site
     d'origine. --or-texte vaut l'or de marque sur fond sombre, et bascule sur
     un or foncé de MÊME teinte (40°) et MÊME saturation (58 %) sur fond clair,
     où il atteint 4,69:1. L'or reste l'or : seule la clarté descend.
     Les aplats (bouton doré, fond de pastille) gardent --or : le texte encre
     sur or plein est déjà à 7,21:1. */
  --or-texte:         var(--or);
  --or-texte-fonce:   #916e27;

  --creme:            #f5f0e8;
  --creme-doux:       #b8b0a4;

  --blanc:            #ffffff;
  --surface-claire:   #fcfbf9;
  --texte-sombre:     #1a1a1a;
  --texte-doux:       #666666;
  --trait-clair:      #eaeaea;

  /* Déclinaisons transparentes de l'or, pour les bordures et les voiles.
     Le site d'origine les codait en dur (#c9a96e1a…) avec un or légèrement
     différent de sa propre variable : incohérence corrigée, tout part de
     --or maintenant. */
  --or-06:  rgba(205, 160, 67, .06);
  --or-10:  rgba(205, 160, 67, .10);
  --or-18:  rgba(205, 160, 67, .18);
  --or-32:  rgba(205, 160, 67, .32);
  --or-55:  rgba(205, 160, 67, .55);

  /* --- Typographie d'origine --- */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique. Les deux extrêmes (h1 clamp 2.5→4rem, corps 1rem)
     viennent du site d'origine ; les paliers intermédiaires les relient. */
  --t-display: clamp(2.75rem, 6vw, 5rem);
  --t-h1:      clamp(2.5rem, 5.5vw, 4rem);
  --t-h2:      clamp(2rem, 4vw, 3rem);
  --t-h3:      clamp(1.35rem, 2.2vw, 1.75rem);
  --t-h4:      1.125rem;
  --t-corps-l: 1.125rem;
  --t-corps:   1rem;
  --t-petit:   .9rem;
  --t-mention: .8rem;
  --t-label:   .75rem;

  /* --- Échelle d'espacement (base 4) --- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 40px;  --e-8: 56px;
  --e-9: 72px;  --e-10: 96px; --e-11: 120px; --e-12: 160px;

  /* Rythme vertical des sections : le site d'origine utilisait 120px fixes,
     ce qui écrasait le mobile. Devient fluide, même valeur haute. */
  --section-y: clamp(72px, 9vw, 120px);
  --section-y-large: clamp(96px, 12vw, 160px);

  /* --- Rayons d'origine --- */
  --r-xs: 4px;  --r-s: 6px;  --r-m: 8px;  --r-l: 12px;  --r-xl: 20px;

  /* --- Ombres --- */
  --ombre-douce: 0 10px 30px rgba(0, 0, 0, .05);
  --ombre-carte: 0 20px 60px rgba(0, 0, 0, .40);
  --ombre-or:    0 12px 40px rgba(205, 160, 67, .28);

  /* --- Mouvement --- */
  --transition: .3s cubic-bezier(.4, 0, .2, 1);
  --transition-lente: .6s cubic-bezier(.16, 1, .3, 1);

  --header-h: 80px;
  --max-l: 1200px;   /* container d'origine */
  --max-xl: 1440px;  /* compositions éditoriales larges */
  --max-texte: 68ch;
}

/* ---------------------------------------------------------------- Socle --- */

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

html {
  scroll-behavior: smooth;
  /* Compense le header fixe quand on arrive sur une ancre. */
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--encre);
  color: var(--creme);
  font-family: var(--sans);
  font-size: var(--t-corps);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Le focus visible n'existait nulle part sur le site d'origine : le site
   était inutilisable au clavier. Anneau unique, sur les deux fonds. */
:focus-visible {
  /* L'anneau de focus est un élément d'interface : il lui faut 3:1 avec son
     fond. L'or de marque n'y arrive pas sur blanc, d'où --or-texte. */
  outline: 2px solid var(--or-texte);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Lien d'évitement, obligatoire avec une navigation aussi fournie. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--or);
  color: var(--encre);
  padding: 14px 22px;
  font-weight: 600;
  border-radius: 0 0 var(--r-s) 0;
}
.saut-contenu:focus { left: 0; }

.uniquement-lecteur {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------- Conteneurs --- */

.zone {
  width: 100%;
  max-width: var(--max-l);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.zone--large { max-width: var(--max-xl); }
.zone--etroite { max-width: 860px; }

/* Pleine largeur assumée : l'image ou le fond touche les bords de l'écran. */
.pleine-largeur {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

section { position: relative; }

.sur-encre  { background: var(--encre); color: var(--creme); }
.sur-encre-alt { background: var(--encre-alt); color: var(--creme); }
.sur-blanc  { background: var(--blanc); color: var(--texte-sombre); }
.sur-creme  { background: var(--surface-claire); color: var(--texte-sombre); }

/* Sur fond clair, tout l'or porteur de sens passe en version foncée. Le jeton
   étant redéfini ici, chaque composant en hérite sans règle dédiée. */
.sur-blanc, .sur-creme { --or-texte: var(--or-texte-fonce); }

.bloc     { padding-block: var(--section-y); }
.bloc--l  { padding-block: var(--section-y-large); }
.bloc--court { padding-block: clamp(48px, 6vw, 80px); }

/* --------------------------------------------------- Éléments de texte --- */

/* Le libellé de section (trait + petites capitales dorées) est la signature
   typographique du site d'origine. Conservé au pixel près. */
.etiquette {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--or-texte);
  margin-bottom: var(--e-4);
}
.etiquette::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--or-texte);
  flex: 0 0 32px;
}
.etiquette--sans-trait::before { display: none; }

.titre-section { font-size: var(--t-h2); margin-bottom: var(--e-5); }
.titre-display { font-size: var(--t-display); }
.titre-3 { font-size: var(--t-h3); }

.chapo {
  font-size: var(--t-corps-l);
  line-height: 1.8;
  max-width: var(--max-texte);
  color: var(--creme-doux);
}
.sur-blanc .chapo, .sur-creme .chapo { color: var(--texte-doux); }

.texte { line-height: 1.85; max-width: var(--max-texte); color: var(--creme-doux); }
.sur-blanc .texte, .sur-creme .texte { color: var(--texte-doux); }
.texte + .texte { margin-top: var(--e-5); }
.texte strong { color: var(--creme); font-weight: 500; }
.sur-blanc .texte strong, .sur-creme .texte strong { color: var(--texte-sombre); }

/* Le filet dégradé doré, autre signature du site d'origine. */
.filet-or {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--or-texte), transparent);
  margin-block: var(--e-6);
  border: 0;
}

.exergue {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.4;
  font-weight: 400;
  max-width: 22ch;
}

/* --------------------------------------------------------------- Liens --- */

.lien-or {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--or-texte);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: .3px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--or-32);
  transition: border-color var(--transition), gap var(--transition);
}
.lien-or:hover { border-bottom-color: var(--or-texte); gap: 12px; }
.lien-or svg { width: 16px; height: 16px; flex: 0 0 16px; }

/* -------------------------------------------------------------- Boutons --- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: var(--r-xs);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
  text-align: center;
}
.bouton svg { width: 18px; height: 18px; flex: 0 0 18px; }

.bouton--or {
  background: var(--or);
  color: var(--encre);
}
.bouton--or:hover { background: var(--or-clair); box-shadow: var(--ombre-or); }

.bouton--fantome {
  color: var(--or-texte);
  border-color: var(--or-32);
  font-weight: 500;
}
.bouton--fantome:hover { border-color: var(--or-texte); background: var(--or-06); }

/* Sur fond blanc, le contour clair devient illisible : variante encre. */
.sur-blanc .bouton--fantome,
.sur-creme .bouton--fantome {
  color: var(--texte-sombre);
  border-color: rgba(26, 26, 26, .22);
}
.sur-blanc .bouton--fantome:hover,
.sur-creme .bouton--fantome:hover {
  border-color: var(--texte-sombre);
  background: transparent;
}

.bouton--large { width: 100%; }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-7);
}

/* --------------------------------------------------------------- Cartes --- */

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-7) var(--e-6);
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.carte:hover { border-color: var(--or-32); background: var(--surface-haut); }

.sur-blanc .carte, .sur-creme .carte {
  background: var(--surface-claire);
  border-color: var(--trait-clair);
}
.sur-blanc .carte:hover, .sur-creme .carte:hover {
  border-color: var(--or-32);
  box-shadow: var(--ombre-douce);
  background: var(--blanc);
}

.carte__titre { font-size: var(--t-h4); font-family: var(--serif); margin-bottom: var(--e-3); }
.carte__texte { font-size: var(--t-petit); line-height: 1.75; color: var(--creme-doux); }
.sur-blanc .carte__texte, .sur-creme .carte__texte { color: var(--texte-doux); }

.icone {
  width: 44px;
  height: 44px;
  color: var(--or-texte);
  margin-bottom: var(--e-5);
}
.icone svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------- Badges --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--or-32);
  border-radius: 999px;
  font-size: var(--t-mention);
  letter-spacing: .4px;
  color: var(--or-texte);
  background: var(--or-06);
}
.badge--sobre {
  border-color: var(--trait);
  color: var(--creme-doux);
  background: transparent;
}
.sur-blanc .badge--sobre, .sur-creme .badge--sobre {
  border-color: var(--trait-clair);
  color: var(--texte-doux);
}
.rangee-badges { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Marqueur des informations que Labo Dayco doit encore fournir. Volontairement
   visible : une donnée manquante doit se voir, pas se deviner. */
.a-fournir {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed var(--or-texte);
  border-radius: var(--r-xs);
  font-family: var(--sans);
  font-size: var(--t-mention);
  font-weight: 500;
  letter-spacing: .4px;
  color: var(--or-texte);
  background: var(--or-06);
  white-space: nowrap;
}

/* --------------------------------------------------------------- Grilles --- */

.grille { display: grid; gap: var(--e-5); }
.grille--2 { grid-template-columns: repeat(2, 1fr); }
.grille--3 { grid-template-columns: repeat(3, 1fr); }
.grille--4 { grid-template-columns: repeat(4, 1fr); }
.grille--large { gap: var(--e-7); }

/* Duo asymétrique : sert de base à la plupart des compositions éditoriales. */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.duo--texte-large { grid-template-columns: 1.15fr .85fr; }
.duo--visuel-large { grid-template-columns: .85fr 1.15fr; }
.duo--haut { align-items: start; }
.duo--inverse > :first-child { order: 2; }

/* ------------------------------------------------------------- Révélation --- */

.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
}
.rv.vu { opacity: 1; transform: none; }
.rv-2 { transition-delay: .08s; }
.rv-3 { transition-delay: .16s; }
.rv-4 { transition-delay: .24s; }

/* Une animation d'entrée sur l'élément LCP le plafonne : Chrome ne compte pas
   un élément à l'opacité 0. Les héros sont donc exclus de .rv par principe. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ Responsive --- */

@media (max-width: 1024px) {
  .grille--4 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --header-h: 68px; }
  .duo, .duo--texte-large, .duo--visuel-large { grid-template-columns: 1fr; }
  .duo--inverse > :first-child { order: 0; }
  .grille--2, .grille--3, .grille--4 { grid-template-columns: 1fr; }
  .carte { padding: var(--e-6) var(--e-5); }
  .groupe-boutons { gap: var(--e-3); }
  .groupe-boutons .bouton { flex: 1 1 100%; }
}