/* ══════════════════════════════════════════════════════════════════════
   GLOSSPRINT — LA CHARTE
   Source unique du site. Couleurs, typographies, en-tête, pied,
   boutons, champs, respirations.

   RÈGLE : ce fichier est le seul endroit où vivent les valeurs de la
   charte. Changer --or ici doit recolorer le site entier. Si une
   couleur ou une police apparaît en dur dans une page, c'est un bug.

   Verrous de marque (Design Spec v2 §10) :
     · jamais de gras sur le serif — le poids vient de la taille
     · jamais de blanc pur — l'ivoire, toujours
     · le vide est le sujet : ne jamais réduire une respiration
       pour faire tenir du contenu au-dessus de la ligne de flottaison
   ══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── 1. VARIABLES ────────────────────────── */
:root{
  /* Couleurs — verrouillées */
  --nuit:#14142B;
  --nuit-2:#1A1A2E;
  --nuit-clair:#1F1F3A;
  --ivoire:#F5EDE0;
  --or:#C9A24B;
  --or-clair:#F0D48A;
  --framboise:#D81B60;          /* une seule apparition par page, jamais en aplat */

  /* Dérivées — toujours exprimées à partir de l'ivoire */
  --filet:rgba(245,237,224,.12);
  --filet-fort:rgba(245,237,224,.15);
  --sourdine:rgba(245,237,224,.62);
  --sourdine-2:rgba(245,237,224,.45);

  /* Respirations — Spec v2 §4. Le vide est le sujet. */
  --souffle-xl:260px;
  --souffle-l:200px;
  --souffle-m:120px;
  --souffle-s:60px;

  /* Typographies */
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
}

@media(max-width:760px){
  :root{
    --souffle-xl:110px;
    --souffle-l:90px;
    --souffle-m:70px;
    --souffle-s:40px;
  }
}

/* ─────────────────────────── 2. SOCLE ────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}

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

body{
  background:var(--nuit);
  color:var(--ivoire);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* dégradé radial très léger vers le haut-centre — Spec v2 §2 */
  background-image:radial-gradient(ellipse 95% 55% at 50% 0%, var(--nuit-clair) 0%, var(--nuit) 68%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

.wrap{max-width:960px;margin:0 auto;padding:0 28px}
.wrap-etroit{max-width:840px;margin:0 auto;padding:0 28px}

::selection{background:rgba(201,162,75,.28);color:var(--ivoire)}

:focus-visible{outline:1px solid var(--or);outline-offset:3px}

/* ─────────────────── 3. BARRE D'ANNONCE (40 px) ──────────────────── */
.annonce{
  height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(245,237,224,.7);
  text-align:center;padding:0 16px;
}

/* ───────────────────── 4. NAVIGATION (72 px) ─────────────────────── */
.nav{
  height:72px;
  border-bottom:1px solid var(--filet);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 28px;
}
.nav a{color:inherit;text-decoration:none}
.nav-gauche,.nav-droite{
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;align-items:center;gap:26px;
}
.nav-droite{justify-content:flex-end}

/* cibles tactiles ≥ 44 px : obtenues par le padding vertical, pas par la taille du texte */
.nav a:not(.wordmark){
  display:inline-block;padding:14px 0;line-height:16px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .4s ease,color .4s ease;
}
.nav a:not(.wordmark):hover,
.nav a:not(.wordmark):focus-visible{box-shadow:inset 0 -1px 0 currentColor}
.nav .or{color:var(--or-clair)}
.nav a[aria-current]{box-shadow:inset 0 -1px 0 rgba(245,237,224,.45)}

.wordmark{
  font-family:var(--serif);font-weight:400;
  font-size:26px;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;display:inline-block;padding:8px 0;
}

/* ───────────────────────── 5. TYPOGRAPHIE ────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.04em;line-height:1.25}
/* jamais de gras sur le serif — verrou de marque */
h1 b,h2 b,h3 b,h1 strong,h2 strong,h3 strong{font-weight:400}

.eyebrow{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--or);
}
.tampon{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,237,224,.65);
}
.italique{font-family:var(--serif);font-style:italic}

/* ────────────────────────── 6. FILETS ────────────────────────────── */
.filet-or{width:100px;height:1px;background:var(--or);opacity:.6;border:0;margin:0 auto}
.filet-large{width:100%;height:1px;background:var(--filet-fort);border:0}

/* ───────────────────── 7. LIENS ET BOUTONS ──────────────────────── */
/* Registre maison : des liens soulignés, pas des boutons arrondis.
   Les boutons arrondis appartiennent au registre e-commerce (Spec v2 §0). */
.lien{
  color:var(--ivoire);text-decoration:none;
  font-size:17px;letter-spacing:.02em;
  display:inline-block;padding:12px 2px;min-height:44px;
  box-shadow:inset 0 -1px 0 rgba(245,237,224,.55);
  transition:box-shadow .4s ease;
}
.lien:hover,.lien:focus-visible{box-shadow:inset 0 -1px 0 rgba(245,237,224,1)}
.lien-or{
  color:var(--or-clair);font-size:16px;text-decoration:none;
  display:inline-block;padding:12px 2px;min-height:44px;
  box-shadow:inset 0 -1px 0 rgba(201,162,75,.6);
  transition:box-shadow .4s ease;
}
.lien-or:hover,.lien-or:focus-visible{box-shadow:inset 0 -1px 0 var(--or-clair)}
.lien-discret{
  background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-weight:300;font-size:13.5px;
  color:var(--sourdine);text-decoration:none;
  display:inline-block;padding:12px 2px;min-height:44px;
  box-shadow:inset 0 -1px 0 rgba(245,237,224,.22);
  transition:box-shadow .4s ease,color .4s ease;
}
.lien-discret:hover,.lien-discret:focus-visible{
  color:var(--ivoire);box-shadow:inset 0 -1px 0 rgba(245,237,224,.7);
}

/* Le seul encadré autorisé : l'appel unique d'une page (le Composer). */
.bouton{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:16px 44px;
  border:1px solid var(--or);color:var(--or-clair);background:transparent;
  font-family:var(--sans);font-weight:300;
  font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color .4s ease,color .4s ease;
}
.bouton:hover,.bouton:focus-visible{background:var(--or);color:var(--nuit)}

/* ──────────────────────── 8. CHAMPS ─────────────────────────────── */
/* 16 px minimum : en dessous, iOS zoome au focus. */
.champ label{
  display:block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sourdine-2);margin-bottom:14px;
}
.champ input,.champ textarea{
  width:100%;background:transparent;color:var(--ivoire);
  border:0;border-bottom:1px solid rgba(245,237,224,.22);
  font-family:var(--sans);font-weight:300;
  font-size:16px;line-height:1.7;padding:12px 2px;resize:none;
  transition:border-color .4s ease;
}
.champ input:focus,.champ textarea:focus{outline:0;border-bottom-color:var(--or)}
.champ input::placeholder,.champ textarea::placeholder{color:rgba(245,237,224,.28)}

/* ─────────────────────── 9. PIED DE PAGE ────────────────────────── */
.pied{
  border-top:1px solid var(--filet);
  padding:44px 28px 60px;text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(245,237,224,.5);line-height:2.2;
}
.pied-ligne{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  column-gap:14px;max-width:860px;margin:0 auto;
}
.pied-ligne > *{white-space:nowrap}
.pied-ligne .sep{opacity:.4}
.pied a{
  color:inherit;text-decoration:none;
  display:inline-block;padding:14px 2px;line-height:16px;
  box-shadow:inset 0 -1px 0 rgba(245,237,224,.22);
  transition:box-shadow .4s ease;
}
.pied a:hover,.pied a:focus-visible{box-shadow:inset 0 -1px 0 rgba(245,237,224,.6)}
.pied-bas{margin-top:4px}
/* .62 minimum : en dessous, le contraste tombe sous 4,5:1 sur fond nuit. */
.pied-bas a{font-size:10.5px;color:rgba(245,237,224,.62);letter-spacing:.2em}

/* ────────────────── 10. APPARITION AU DÉFILEMENT ────────────────── */
/* Seule animation autorisée avec le fondu d'arrivée : fondu + 18 px, 1 s. */
.rev{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}
.rev.vu{opacity:1;transform:none}

/* Fondu d'arrivée. Sans fill-mode : si l'animation ne se joue pas
   (navigateur ancien, moteur de rendu headless), la page reste visible
   au lieu de rester bloquée à l'opacité zéro. */
.entree{animation:entree 800ms ease}
@keyframes entree{from{opacity:0}to{opacity:1}}

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

/* ────────────────────────── 11. MOBILE ──────────────────────────── */
@media(max-width:760px){
  .wrap,.wrap-etroit{padding:0 22px}
  .annonce{font-size:9.5px;letter-spacing:.22em}
  .nav{padding:0 20px}
  .nav-gauche,.nav-droite{font-size:10px;letter-spacing:.14em;gap:16px}
  .wordmark{font-size:17px;letter-spacing:.14em}
  .bouton{width:100%;padding:16px 24px;letter-spacing:.16em}
}

/* ───────────────────────── 12. IMPRESSION ───────────────────────── */
@media print{
  body{background:#fff;color:#111;background-image:none}
  .nav,.annonce{display:none}
}