/* ============================================================
   Palette dérivée du produit :
   --halation = teinte de halation du plugin (1.0, 0.62, 0.25)
   --froid    = 199°, teinte mesurée des ombres de CinePerfect 2
   ============================================================ */
:root {
  --base:      #F3F1ED;
  --surface:   #FFFFFF;
  --surface-2: #EAE6E0;
  --line:      #D8D2C9;
  --ink:       #1A1613;
  --ink-2:     #4A423A;
  --muted:     #7C7267;
  --halation:  #B26A15;
  --froid:     #3A6A72;
  --grain:     0.015;

  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --f-data:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --mesure: 34rem;
  --pas: clamp(3.5rem, 7vw, 6.5rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --base:      #13100D;
    --surface:   #1B1713;
    --surface-2: #241F1A;
    --line:      #322B24;
    --ink:       #EFE9E1;
    --ink-2:     #C4BAAD;
    --muted:     #8A8073;
    --halation:  #E89A4A;
    --froid:     #6FA3AB;
    --grain:     0.035;
  }
}
:root[data-theme="dark"] {
  --base:      #13100D;
  --surface:   #1B1713;
  --surface-2: #241F1A;
  --line:      #322B24;
  --ink:       #EFE9E1;
  --ink-2:     #C4BAAD;
  --muted:     #8A8073;
  --halation:  #E89A4A;
  --froid:     #6FA3AB;
  --grain:     0.035;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--base);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* grain d'émulsion, très discret — cohérent avec le sujet */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--halation); outline-offset: 3px; border-radius: 2px; }

.enveloppe { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.prose { max-width: var(--mesure); }

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: -.012em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.14; }
h3 { font-size: 1.28rem; line-height: 1.3; }
p { margin: 0; }

.eyebrow {
  font-family: var(--f-data); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

section { padding-block: var(--pas); }
.pile { display: flex; flex-direction: column; }
.g-1 { gap: .5rem } .g-2 { gap: 1rem } .g-3 { gap: 1.75rem } .g-4 { gap: 2.75rem }

/* ---------------------------------------------------- en-tête */
header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--base) 86%, transparent);
  border-bottom: 1px solid var(--line);
}
.barre { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; }
.marque { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -.01em; text-decoration: none; }
.marque b { font-weight: 400; }
.nav { display: flex; gap: 1.6rem; font-size: .9rem; }
.nav a { color: var(--ink-2); text-decoration: none; transition: color .18s; }
.nav a:hover { color: var(--halation); }
@media (max-width: 720px) { .nav { display: none } }

/* sélecteur de langue, en tête — reste visible sur mobile */
.tete-droite { display: flex; align-items: center; gap: 1.6rem; }
.langues-tete {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-data); font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; padding: .3rem .7rem;
  border: 1px solid var(--line); border-radius: 2px;
}
.langues-tete a { color: var(--muted); text-decoration: none; transition: color .18s; }
.langues-tete a:hover { color: var(--ink); }
.langues-tete a[aria-current="true"] { color: var(--halation); }
.langues-tete span { color: var(--line); }

/* ---------------------------------------------------- hero */
.hero { position: relative; padding-block: clamp(4rem, 11vw, 8.5rem) var(--pas); overflow: hidden; }
#courbe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
/* Sur écran étroit la courbe ne peut pas rester en fond : elle passerait
   derrière le texte. Elle devient un bloc à part, sous le titre — pleine
   largeur, donc plus lisible qu'en filigrane. */
@media (max-width: 860px) {
  /* flex + order : la thèse d'abord, la courbe ensuite. En flux normal le
     canvas passerait avant, puisqu'il vient en premier dans le HTML. */
  .hero { display: flex; flex-direction: column; padding-block: 3rem 0; }
  .hero > .enveloppe { order: 1; }
  #courbe { order: 2; position: static; height: 230px; margin-top: 2.25rem; opacity: 1; }
}
.hero > .enveloppe { position: relative; z-index: 1; }
.these {
  font-family: var(--f-display);
  font-size: clamp(2.35rem, 6.2vw, 4.6rem);
  line-height: 1.06; letter-spacing: -.022em; max-width: 20ch; margin: 0;
}
.these em { font-style: italic; color: var(--halation); }
.sous { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-2); max-width: 42ch; }
.signature { font-family: var(--f-data); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.bouton {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-body); font-size: .95rem; font-weight: 500;
  padding: .78rem 1.5rem; border-radius: 2px; text-decoration: none;
  border: 1px solid transparent; transition: background .18s, border-color .18s, color .18s;
}
.bouton.plein { background: var(--halation); color: var(--base); }
.bouton.plein:hover { background: var(--ink); }
.bouton.vide { border-color: var(--line); color: var(--ink-2); }
.bouton.vide:hover { border-color: var(--halation); color: var(--halation); }

/* ---------------------------------------------------- le trajet de la lumière */
.trajet { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid var(--line); }
.etage {
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.4rem;
  padding-block: 1.15rem; border-bottom: 1px solid var(--line);
  transition: background .2s;
}
.etage:hover { background: var(--surface); }
.etage .n {
  font-family: var(--f-data); font-size: .82rem; color: var(--muted);
  padding-top: .28rem; font-variant-numeric: tabular-nums;
}
.etage .t { font-weight: 500; }
.etage .d { color: var(--muted); font-size: .93rem; }
.etage[data-cle="oui"] .n { color: var(--halation); }
.etage[data-cle="oui"] .t { color: var(--halation); }

/* ---------------------------------------------------- mesures */
.mesures { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.mesure { background: var(--base); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.mesure .val { font-family: var(--f-data); font-size: 1.85rem; font-weight: 500; color: var(--halation); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mesure .lib { font-size: .93rem; color: var(--ink-2); }
.mesure .note { font-family: var(--f-data); font-size: .76rem; color: var(--muted); }

/* ---------------------------------------------------- looks */
.looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.look { display: flex; flex-direction: column; gap: .55rem; }
.look .bande { height: 3.2rem; display: flex; }
.look .bande i { flex: 1; }
.look .nom { font-weight: 500; font-size: .97rem; }
.look .car { font-size: .88rem; color: var(--muted); }

/* ---------------------------------------------------- média (démos à venir) */
.media {
  border: 1px dashed var(--line); background: var(--surface);
  aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .5rem;
  text-align: center; padding: 2rem; margin-top: 2.5rem;
}
.media .ic { font-family: var(--f-data); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.media p { color: var(--muted); font-size: .93rem; max-width: 32ch; }

/* ---------------------------------------------------- prix */
.prix-bloc { border: 1px solid var(--line); background: var(--surface); padding: clamp(1.8rem, 4vw, 3rem); margin-top: 2.5rem; display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .prix-bloc { grid-template-columns: 1fr auto; align-items: center; } }
.tarif { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.tarif .actuel { font-family: var(--f-data); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 500; letter-spacing: -.03em; color: var(--halation); }
.tarif .barre-prix { font-family: var(--f-data); font-size: 1.15rem; color: var(--muted); text-decoration: line-through; }
.tarif .dev { font-family: var(--f-data); font-size: .95rem; color: var(--muted); }
.inclus { display: grid; gap: .45rem; margin-top: 1.2rem; font-size: .93rem; color: var(--ink-2); }
.inclus li { list-style: none; padding-left: 1.3rem; position: relative; }
.inclus li::before { content: "—"; position: absolute; left: 0; color: var(--halation); }
.inclus { padding: 0; margin-block: 1.2rem 0; }

/* ---------------------------------------------------- pied */
footer { border-top: 1px solid var(--line); padding-block: 2.5rem 3.5rem; color: var(--muted); font-size: .88rem; }
.pied { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.langues { display: flex; gap: .9rem; font-family: var(--f-data); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.langues a { text-decoration: none; color: var(--muted); }
.langues a[aria-current="true"] { color: var(--halation); }
.langues a:hover { color: var(--ink); }

.regle { border: 0; border-top: 1px solid var(--line); margin: 0; }
strong { font-weight: 600; }
.dat { font-family: var(--f-data); font-variant-numeric: tabular-nums; }