/* Polices : <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet"> */

:root {
  /* Couleurs de marque, identité Méthode */
  --lu-blanc: #ffffff;
  --lu-pierre: #eeebe6;
  --lu-noir: #121212;
  --lu-graphite: #5e5b57;
  --lu-sable: #c9b79c;          /* décor uniquement, jamais pour du texte sur clair */
  --lu-bordure: #e3dfd9;
  --lu-survol: #eeebe6;
  --lu-texte-doux-sur-noir: #d8d4ce;
  --lu-label-sur-noir: #c9c5bf;

  /* Usages */
  --fond-principal: var(--lu-blanc);
  --fond-secondaire: var(--lu-pierre);
  --fond-sombre: var(--lu-noir);
  --texte: var(--lu-noir);
  --texte-doux: var(--lu-graphite);
  --texte-sur-sombre: var(--lu-blanc);
  --texte-doux-sur-sombre: var(--lu-texte-doux-sur-noir);
  --bordure: var(--lu-bordure);
  --filet: 2px solid var(--lu-noir);

  /* Polices */
  --font-titre: "Instrument Sans", system-ui, sans-serif;
  --font-texte: "Instrument Sans", system-ui, sans-serif;
  --font-label: "Instrument Serif", Georgia, serif;   /* labels en italique, prix en romain */

  /* Échelle, mobile par défaut */
  --fs-titre-hero: 40px;   --lh-titre-hero: 1.06; --fw-titre: 500; --ls-titre: -0.025em;
  --fs-titre: 30px;        --lh-titre: 1.08;
  --fs-sous-titre: 19px;   --lh-sous-titre: 1.4;
  --fs-texte: 16px;        --lh-texte: 1.6;
  --fs-label: 18px;        --lh-label: 1.3;  --ls-label: -0.01em;
  --fs-prix: 28px;         --lh-prix: 1;

  /* Le cercle coupé du logo : deux arcs d'environ 90 degrés, ouvertures en haut à gauche et en bas à droite */
  --cercle-trait: 1.5px;
  --cercle-rotation: 36deg;

  /* Bouton principal : contour fin, sans fond */
  --bouton-bordure: 1px solid var(--lu-noir);
  --bouton-rayon: 999px;
  --bouton-padding: 13px 25px 13px 21px;
  --bouton-survol: var(--lu-survol);

  /* Espacements */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-section: 96px;
  --max-width: 1160px;

  /* Rayons */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-pill: 999px;
}

@media (min-width: 768px) {
  :root {
    --fs-titre-hero: 64px;
    --fs-titre: 44px;
    --fs-sous-titre: 22px;
    --fs-texte: 17px;
    --fs-label: 19px;
    --fs-prix: 32px;
  }
}

/* Composants de base */
.lu-cercle {
  position: absolute;
  border: var(--cercle-trait) solid var(--lu-noir);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  transform: rotate(var(--cercle-rotation));
  pointer-events: none;
}
.lu-cercle.sur-sombre { border-top-color: var(--lu-blanc); border-bottom-color: var(--lu-blanc); }

.lu-label { font-family: var(--font-label); font-style: italic; font-size: var(--fs-label); line-height: var(--lh-label); letter-spacing: var(--ls-label); color: var(--texte-doux); }
.lu-prix { font-family: var(--font-label); font-size: var(--fs-prix); line-height: var(--lh-prix); }

.lu-bouton {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; color: var(--texte);
  border: var(--bouton-bordure); border-radius: var(--bouton-rayon);
  padding: var(--bouton-padding);
  font-family: var(--font-texte); font-size: 15px; font-weight: 400; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background .3s ease;
}
.lu-bouton::before {
  content: ""; width: 13px; height: 13px; flex: none;
  border: 1.2px solid currentColor; border-left-color: transparent; border-right-color: transparent;
  border-radius: 50%; transform: rotate(var(--cercle-rotation)); transition: transform .45s ease;
}
.lu-bouton:hover { background: var(--bouton-survol); }
.lu-bouton:hover::before { transform: rotate(126deg); }
.lu-bouton:focus-visible { outline: 2px solid var(--lu-noir); outline-offset: 3px; }
.lu-bouton.sur-sombre { color: var(--lu-blanc); border-color: var(--lu-blanc); }
.lu-bouton.sur-sombre:hover { background: rgba(255, 255, 255, .08); }

.lu-lien {
  font-family: var(--font-label); font-style: italic; font-size: 20px; letter-spacing: -0.01em;
  color: var(--texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
}
.lu-lien:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .lu-bouton, .lu-bouton::before { transition: none; }
}