/* ============================================================================
   LaValley — design system « Grand large »
   Direction artistique : archive maritime. Papier crème et grain (esprit du
   film de marque), encre bleu nuit, bleu brume, sable, touches d'or discrètes.
   Serif d'identité (Fraunces) pour les titres, Inter pour le texte.
   Une seule couche : chaque composant est défini ici une fois.
   ========================================================================== */

/* ---------- 1. Fondations : variables, reset, texture ---------- */
:root {
  /* palette maritime */
  --encre: #26201a;          /* texte principal, bleu-noir encre */
  --encre-2: #796e5e;        /* texte secondaire, gris bleuté */
  --papier: #E8DCC0;         /* fond parchemin, papier d'archive chaud */
  --surface: #F6F0E1;        /* planches : cartes, panneaux (plus clairs que le papier) */
  --champ: #FBF7EC;          /* champs de saisie */
  --voile: #FDFBF3;          /* ivoire clair (hover boutons) */
  --marine: #6b5027;         /* accent principal : liens, états actifs */
  --marine-2: #4e3919;       /* marine profond (hover) */
  --brume: #c0b3a0;          /* bleu brume, décor et filets froids */
  --ligne: #E1D7BF;          /* filets discrets (sable) */
  --ligne-forte: #CDBF9F;    /* filets appuyés */
  --or: #A9853F;             /* or discret : kickers, micro-accents */
  --vague: #5F7D74;          /* vert d'eau : direct, succès */
  --alerte: #A03A30;         /* rouge sourd : actions destructrices */

  /* compat : anciens noms encore présents dans quelques gabarits */
  --charbon: var(--encre);
  --ivoire: var(--voile);
  --cardinal: var(--alerte);
  --terra: var(--marine);
  --sable: var(--ligne-forte);
  --sauge: var(--vague);
  --texte-2: var(--encre-2);
  --fond: var(--papier);

  /* ombres teintées encre marine — jamais de noir pur */
  --ombre-1: 0 10px 28px rgba(42,34,27, 0.08);
  --ombre-2: 0 18px 44px rgba(42,34,27, 0.12);

  --max: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lent: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Geist", "Inter", system-ui, sans-serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* échelle z : un seul endroit pour arbitrer les plans */
  --z-decor: 0;
  --z-contenu: 1;
  --z-header: 30;
  --z-menu: 40;
  --z-skip: 100;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html { background: var(--papier); }
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(192,179,160, 0.1), transparent 60%),
    linear-gradient(180deg, #ECE1C7 0%, #E8DCC0 45%, #E3D5B6 100%);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 16px; line-height: 1.65;
  min-height: 100vh; display: flex; flex-direction: column;
}
/* texture parchemin : fibres fines du papier, fixes et présentes mais douces.
   Deux fréquences (fibre fine + trame plus large) pour un vrai grain de vélin,
   en multiply pour se teinter du papier chaud. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: var(--z-decor); pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 180px 180px, 300px 300px;
  mix-blend-mode: multiply; opacity: 0.9;
}
::selection { color: var(--voile); background: var(--marine); }

/* atmosphère + parchemin, en fond de TOUTES les pages.
   Un seul calque fixe de dégradés doux positionnés en % → composition
   IDENTIQUE et propre sur mobile comme sur desktop (pas de blobs en vw).
   Couleurs maritimes discrètes (coins + centre chaud) posées sur des taches
   de vieux papier + un léger halo d'usure sur les bords. La texture fine du
   papier vient du grain global (body::before). Aucun bruit par-dessus la
   couleur → rendu net. */
.page-atmos {
  position: fixed; inset: 0; z-index: var(--z-decor); pointer-events: none;
  /* teinte de couleur UNIQUEMENT dans les coins et très discrète : aucune
     bande froide/chaude au milieu → plus de démarcation quand on scrolle.
     Le fond reste un parchemin uniforme, juste réchauffé aux angles. */
  background:
    radial-gradient(38% 32% at 5% 2%,    rgba(107,80,39, 0.10), transparent 72%),
    radial-gradient(38% 32% at 96% 2%,   rgba(192,179,160, 0.11), transparent 72%),
    radial-gradient(42% 38% at 98% 99%,  rgba(78,57,25, 0.08), transparent 74%),
    radial-gradient(42% 38% at 2% 99%,   rgba(95, 125, 116, 0.08), transparent 74%),
    radial-gradient(140% 130% at 50% 50%, transparent 70%, rgba(120, 100, 62, 0.06));
}
/* papier vergé : fines lignes horizontales régulières, très douces (le motif
   se répète à l'identique partout → uniforme, jamais de couture au scroll) */
.page-atmos::before {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: multiply; opacity: 0.7;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(94, 74, 42, 0.05) 0, rgba(94, 74, 42, 0.05) 0.5px,
    transparent 0.5px, transparent 4px);
}

a { color: var(--marine); }
a:hover { color: var(--marine-2); }
img { max-width: 100%; }

h1, h2, h3, .brand { font-family: var(--display); font-weight: 560; }
h1 { letter-spacing: -0.015em; }
h2 { letter-spacing: -0.008em; }
p { text-wrap: pretty; }
main, .site-footer { position: relative; z-index: var(--z-contenu); }
main { overflow: clip; }

/* navigation clavier : anneau visible partout, lien d'évitement */
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: var(--z-skip);
  padding: 10px 18px; border-radius: 999px;
  background: var(--encre); color: var(--voile);
  font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 12px; color: var(--voile); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
[id] { scroll-margin-top: 92px; }

.wrap { position: relative; z-index: var(--z-contenu); width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

/* kicker : petit repère doré, façon annotation de carte marine */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--or); font-family: var(--sans); font-size: 11.5px; font-weight: 650;
  letter-spacing: 0.2em; text-transform: uppercase;
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--or); opacity: 0.65;
}

/* ---------- 2. En-tête : barre fine, premium, verre discret au défilement ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; align-items: center; gap: 26px;
  width: 100%; min-height: 62px;
  padding: 10px clamp(20px, 4vw, 44px);
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 340ms var(--ease), border-color 340ms var(--ease),
              box-shadow 340ms var(--ease);
}
.site-header.scrolled {
  border-bottom-color: rgba(42,34,27, 0.1);
  background: rgba(242, 236, 222, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(42,34,27, 0.06);
}
.brand {
  display: inline-flex; align-items: baseline; gap: 4px;
  color: var(--encre); font-size: 23px; font-weight: 600; line-height: 1;
  letter-spacing: -0.01em; white-space: nowrap; text-decoration: none;
}
.brand-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--or); transform: translateY(-1px);
}
.site-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.site-nav a {
  color: var(--encre-2); font-size: 13.5px; font-weight: 520;
  letter-spacing: 0.01em; text-decoration: none;
  padding: 9px 13px; border-radius: 999px; position: relative;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.site-nav a:hover { color: var(--encre); background: rgba(192,179,160, 0.14); }
.site-nav a.active { color: var(--marine); }
/* trait d'horizon sous la page courante */
.site-nav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 1px; background: var(--or);
}
.header-cta { margin-left: auto; }
.site-nav + .header-cta { margin-left: 0; }

/* ---------- 3. Boutons : pilule ivoire unique (décision utilisateur ferme :
   aucun bouton rempli couleur, hiérarchie par la position) ---------- */
.primary-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 22px;
  color: var(--marine); font: inherit; font-size: 14px; font-weight: 560;
  line-height: 1; white-space: nowrap; text-decoration: none;
  background: var(--champ);
  border: 1px solid var(--ligne-forte); border-radius: 999px; cursor: pointer;
  box-shadow: 0 1px 0 rgba(42,34,27, 0.04);
  transition: background 200ms var(--ease), border-color 200ms var(--ease),
              color 200ms var(--ease), transform 200ms var(--ease),
              box-shadow 200ms var(--ease);
}
.primary-button:hover, .secondary-button:hover {
  color: var(--marine-2); border-color: var(--brume); background: var(--voile);
  transform: translateY(-1px); box-shadow: var(--ombre-1);
}
.primary-button:active, .secondary-button:active {
  transform: translateY(0) scale(0.98); box-shadow: none;
}
.shine { position: relative; }

.mini-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 13px;
  color: var(--marine); font: inherit; font-size: 12.5px; font-weight: 560;
  line-height: 1; white-space: nowrap; text-decoration: none;
  background: var(--champ); border: 1px solid var(--ligne-forte);
  border-radius: 999px; cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.mini-button:hover { color: var(--marine-2); border-color: var(--brume); }
.mini-danger { color: var(--alerte); border-color: rgba(160, 58, 48, 0.35); }
.mini-danger:hover { color: var(--alerte); border-color: var(--alerte); }

/* ---------- 4. Mouvement ----------
   Home : arrivée immersive. Ailleurs : entrées sobres, révélations au scroll.
   Tout est coupé par prefers-reduced-motion ; sans JS, rien n'est caché. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  .page-head > *, .hero-texte > * {
    animation: rise-in 720ms var(--lent) backwards;
  }
  .page-head > :nth-child(2), .hero-texte > :nth-child(2) { animation-delay: 90ms; }
  .page-head > :nth-child(3), .hero-texte > :nth-child(3) { animation-delay: 180ms; }
  .page-head > :nth-child(4), .hero-texte > :nth-child(4) { animation-delay: 270ms; }
  .page-head > :nth-child(5), .hero-texte > :nth-child(5) { animation-delay: 360ms; }

  .has-js .reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity 760ms var(--lent), transform 760ms var(--lent);
    transition-delay: calc(var(--ri, 0) * 80ms);
  }
  .has-js .reveal.in { opacity: 1; transform: none; }

  @keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(95, 125, 116, 0.45); }
    60% { box-shadow: 0 0 0 6px rgba(95, 125, 116, 0); }
  }
  .live-dot-inline { animation: live-pulse 2.4s ease-out infinite; }
}

/* ---------- 5. Hero immersif : fond atmosphérique en boucle ----------
   Pas d'illustration : des masses de couleur (marine, brume, encre, or)
   fondues dans le crème par mélange « multiply », qui dérivent en boucle
   continue et sans couture. Grain papier par-dessus. Type large au premier
   plan. L'ensemble réagit à la souris par une légère parallaxe d'atmosphère. */
.hero-mer {
  position: relative; overflow: clip;
  display: flex; align-items: center;
  min-height: min(88vh, 780px);
  padding: 72px 0 40px;
}
.hero-aura {
  position: absolute; inset: -12% -8%; z-index: 0; pointer-events: none;
}
.aura-motion { position: absolute; inset: 0; transition: transform 500ms var(--ease); }
.aura-blob {
  position: absolute; border-radius: 50%;
  filter: blur(64px); opacity: 0.74;
  mix-blend-mode: multiply; will-change: transform;
}
/* réparties sur tout l'écran : une masse par coin + une chaude au centre.
   Les masses sombres sont tirées dans les coins → l'aire derrière le texte
   (gauche-centre) reste claire et lisible : « couleur partout, doux sous les mots ». */
.aura-blob.b1 {  /* haut-gauche, marine */
  width: 50vw; height: 50vw; left: -14%; top: -18%;
  background: radial-gradient(closest-side, rgba(107,80,39, 0.8), transparent 72%);
}
.aura-blob.b2 {  /* haut-droite, brume */
  width: 50vw; height: 50vw; right: -12%; top: -16%;
  background: radial-gradient(closest-side, rgba(192,179,160, 0.82), transparent 72%);
}
.aura-blob.b3 {  /* bas-droite, encre profonde */
  width: 52vw; height: 52vw; right: -14%; bottom: -22%;
  background: radial-gradient(closest-side, rgba(78,57,25, 0.6), transparent 72%);
}
.aura-blob.b4 {  /* centre, or chaud (adoucit le milieu, réchauffe la droite du titre) */
  width: 52vw; height: 52vw; left: 30%; top: 24%;
  background: radial-gradient(closest-side, rgba(169, 133, 63, 0.5), transparent 72%);
}
.aura-blob.b5 {  /* bas-gauche, vert d'eau */
  width: 48vw; height: 48vw; left: -14%; bottom: -18%;
  background: radial-gradient(closest-side, rgba(95, 125, 116, 0.48), transparent 72%);
}
/* grain propre à l'aura, un cran plus dense que le grain global */
.aura-grain {
  position: absolute; inset: 0; mix-blend-mode: multiply; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
/* fondu vers le crème en bas : la transition vers le reste de la page */
.hero-aura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 62%, var(--papier));
}

.hero-inner { position: relative; z-index: 2; }
.hero-texte { max-width: 760px; }
.hero-texte h1 {
  margin-top: 22px;
  font-size: clamp(42px, 6.4vw, 78px);
  font-weight: 500; line-height: 1.02;
  max-width: 16ch;
}
.hero-texte h1 .accent { color: var(--marine); font-style: italic; font-weight: 460; }
.hero-sub {
  margin-top: 24px; max-width: 54ch;
  color: var(--encre-2); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-note {
  display: flex; align-items: center; margin-top: 28px;
  color: var(--encre-2); font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  /* arrivée : le texte monte, l'atmosphère se révèle en fondu */
  .hero-aura { animation: aura-in 1600ms var(--lent) both; }
  @keyframes aura-in { from { opacity: 0; } to { opacity: 1; } }

  /* dérives en boucle RÉELLE : chaque blob revient exactement à son point
     de départ (0% == 100%), aucune couture, rythmes et trajets différents */
  .aura-blob.b1 { animation: drift-1 34s ease-in-out infinite; }
  .aura-blob.b2 { animation: drift-2 42s ease-in-out infinite; }
  .aura-blob.b3 { animation: drift-3 38s ease-in-out infinite; }
  .aura-blob.b4 { animation: drift-4 30s ease-in-out infinite; }
  .aura-blob.b5 { animation: drift-5 46s ease-in-out infinite; }
  @keyframes drift-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(6%, 5%) scale(1.1); }
    66% { transform: translate(-5%, 9%) scale(0.95); }
  }
  @keyframes drift-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-9%, 7%) scale(1.14); }
  }
  @keyframes drift-3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(6%, -6%) scale(1.08); }
    75% { transform: translate(-7%, -2%) scale(0.93); }
  }
  @keyframes drift-4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(8%, -7%) scale(1.12); }
  }
  @keyframes drift-5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    45% { transform: translate(-6%, 6%) scale(1.16); }
    80% { transform: translate(5%, -4%) scale(0.9); }
  }
}

/* ---------- 6. Sections ---------- */
.section { padding: 30px 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--ligne);
}
.section-head h2 { font-size: 27px; }
.section-head a {
  color: var(--marine); font-size: 13.5px; font-weight: 560;
  text-decoration: none; white-space: nowrap;
}
.section-head a:hover { color: var(--marine-2); text-decoration: underline; text-underline-offset: 3px; }
.section-head .early-note, .section-head .secondary-button { flex-shrink: 0; }
.section-intro { color: var(--encre-2); font-size: 15.5px; max-width: 62ch; margin-bottom: 8px; }
.section-intro b { color: var(--encre); }

/* ---------- 7. Cartes : les « planches » ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.article-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
  color: inherit; text-decoration: none;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease),
              transform 240ms var(--ease);
}
.article-card:hover {
  border-color: var(--brume);
  box-shadow: var(--ombre-2);
  transform: translateY(-3px);
  color: inherit;
}
.article-card .cover {
  width: 100%; height: 165px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--ligne);
  filter: saturate(0.92) contrast(1.02);
  transition: transform 500ms var(--lent), filter 500ms var(--ease);
}
.article-card:hover .cover { transform: scale(1.025); filter: saturate(1) contrast(1.02); }
.article-card h3 { font-size: 19.5px; font-weight: 560; line-height: 1.25; }
.article-card p {
  color: var(--encre-2); font-size: 14px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.article-card .meta {
  margin-top: auto; padding-top: 12px; color: var(--encre-2); font-size: 12.5px;
  display: flex; align-items: center; gap: 8px;
}
.article-card .meta b { color: var(--marine); font-weight: 560; }
.article-card .meta .badge-new { margin-left: auto; vertical-align: 0; }

/* mosaïque d'actus : l'article à la une prend deux colonnes */
.news-mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-featured { grid-column: span 2; padding: 26px; }
.article-featured h3 { font-size: 26px; }
.article-featured p { font-size: 15px; -webkit-line-clamp: 4; }
.article-featured .cover { height: 230px; }
@media (max-width: 860px) {
  .news-mosaic { grid-template-columns: 1fr; }
  .article-featured { grid-column: auto; padding: 22px; }
  .article-featured h3 { font-size: 21px; }
}

.empty-block {
  padding: 34px; border: 1px dashed var(--ligne-forte); border-radius: 14px;
  text-align: center; color: var(--encre-2); font-size: 14.5px;
}

/* badge « Nouveau » : petit pavillon doré, toujours dans la ligne méta */
.badge-new {
  display: inline-block; vertical-align: 2px; margin-left: 2px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(169, 133, 63, 0.1); border: 1px solid rgba(169, 133, 63, 0.4);
  color: #8A6B33; font-family: var(--sans); font-size: 10.5px; font-weight: 650;
  letter-spacing: 0.05em; text-transform: uppercase;
}

/* ---------- 8. Bandeau + formulaire newsletter ---------- */
.nl-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 30px 34px; margin: 12px 0;
  border: 1px solid var(--ligne); border-radius: 18px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(192,179,160, 0.14), transparent 55%),
    var(--surface);
  box-shadow: var(--ombre-1);
}
.nl-banner h2 { font-size: 27px; }
.nl-banner p { color: var(--encre-2); font-size: 14.5px; margin-top: 8px; max-width: 52ch; }
.nl-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nl-row { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-consent {
  display: flex; align-items: flex-start; gap: 8px;
  max-width: 46ch; color: var(--encre-2); font-size: 12px; line-height: 1.5;
}
.nl-consent input { margin-top: 2px; accent-color: var(--marine); }
.nl-consent a { color: var(--marine); }
.nl-form input[type=email] {
  min-width: 240px; min-height: 46px; padding: 0 18px;
  border: 1px solid var(--ligne-forte); border-radius: 999px;
  background: var(--champ);
  color: var(--encre); font: inherit; font-size: 14.5px; outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.nl-form input[type=email]::placeholder { color: #aea69a; }
.nl-form input[type=email]:focus {
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(107,80,39, 0.12);
}
.nl-hero-form { margin-top: 26px; }
.reassure { margin-top: 14px !important; font-size: 13px !important; opacity: 0.85; }
.early-note {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(95, 125, 116, 0.1); border: 1px solid rgba(95, 125, 116, 0.35);
  color: #4C665E; font-size: 12.5px; font-weight: 500; line-height: 1.45;
}
.early-note .ico { flex-shrink: 0; }

/* ---------- 9. Pied de page ---------- */
.site-footer {
  margin-top: auto; padding: 30px 0 36px;
  border-top: 1px solid var(--ligne);
  background: rgba(247, 242, 229, 0.6);
}
.site-footer .in {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  color: var(--encre-2); font-size: 13.5px;
}
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer a { color: var(--encre-2); text-decoration: none; }
.site-footer a:hover { color: var(--marine); }

/* ---------- 10. En-têtes de page, fil d'ariane, prose ---------- */
.page-head { padding: 44px 0 10px; }
.page-head h1 {
  font-size: clamp(34px, 4.6vw, 48px); line-height: 1.08;
  margin-top: 16px; max-width: 26ch;
}
.page-head p { margin-top: 16px; max-width: 68ch; color: var(--encre-2); font-size: 16.5px; }
.accent-text { color: var(--marine); font-style: italic; font-weight: 500; }

.page-banner {
  width: 100%; height: 210px; object-fit: cover; display: block;
  border: 1px solid var(--ligne-forte); border-radius: 10px;
  margin: 26px 0 0;
  filter: saturate(0.92);
}

.crumbs {
  color: var(--encre-2); font-size: 13px; margin-bottom: 18px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumbs a { color: var(--marine); text-decoration: none; }
.crumbs a:hover { color: var(--marine-2); }
.crumbs span { margin: 0 7px; opacity: 0.5; }

.prose-page { max-width: 760px; padding: 44px 0 34px; }
.prose-page h1 { font-size: clamp(32px, 4.4vw, 42px); line-height: 1.12; }
.prose-meta {
  color: var(--encre-2); font-size: 14px; margin: 14px 0 6px;
  padding-bottom: 20px; border-bottom: 1px solid var(--ligne);
}
.prose-meta b { color: var(--marine); font-weight: 560; }
.prose-cover {
  width: 100%; max-height: 400px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--ligne); margin: 22px 0 4px;
  filter: saturate(0.92);
}
.prose { margin-top: 22px; color: #4d4334; font-size: 16.5px; line-height: 1.78; }
.prose h2 { color: var(--encre); font-size: 26px; margin: 38px 0 12px; }
.prose h3 { color: var(--encre); font-size: 20px; margin: 26px 0 10px; }
.prose p { margin: 14px 0; }
.prose b, .prose strong { color: var(--encre); }
.prose ul, .prose ol { margin: 14px 0; padding-left: 26px; }
.prose li { margin: 8px 0; }
.prose img { border-radius: 10px; border: 1px solid var(--ligne); }
.prose blockquote {
  margin: 18px 0; padding: 6px 20px;
  border-left: 2px solid var(--or);
  background: rgba(169, 133, 63, 0.05);
  color: var(--encre); font-size: 17px;
  font-family: var(--display); font-style: italic;
}
.prose code {
  font-family: var(--mono); font-size: 0.88em;
  background: rgba(42,34,27, 0.05); border: 1px solid var(--ligne);
  border-radius: 4px; padding: 1px 6px;
}
.prose pre {
  margin: 16px 0; padding: 14px 16px; border-radius: 10px; overflow-x: auto;
  background: var(--encre); border: 1px solid var(--encre);
}
.prose pre code { background: none; border: 0; padding: 0; color: #f2eee8; font-size: 13px; }
.prose hr { border: 0; height: 1px; background: var(--ligne); margin: 30px 0; }

/* ---------- 11. Tweet-cards (reconstituées à la main) ---------- */
.tweet-strip { display: grid; gap: 14px; margin: 30px 0 6px; }
.tweet-card {
  padding: 18px 20px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface); box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
}
.tweet-card .tw-head { display: flex; align-items: center; gap: 11px; }
.tweet-card .tw-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tweet-card .tw-fb {
  background: var(--marine); display: grid; place-items: center;
  color: var(--voile); font-weight: 600; font-size: 17px;
}
.tweet-card .tw-head b { display: block; color: var(--encre); font-size: 15px; line-height: 1.25; }
.tweet-card .tw-head span { color: var(--encre-2); font-size: 13px; }
.tweet-card .tw-x { margin-left: auto; color: var(--encre-2); opacity: 0.55; }
.tweet-card blockquote {
  margin: 12px 0 0; color: var(--encre); font-size: 15.5px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.tweet-card figcaption { display: flex; gap: 14px; margin-top: 12px; color: var(--encre-2); font-size: 12.5px; }
.tweet-card figcaption a { color: var(--marine); text-decoration: none; }

/* ---------- 12. Éditions newsletter ---------- */
.edition-list { display: flex; flex-direction: column; gap: 10px; }
.edition-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 24px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
.edition-row:hover {
  border-color: var(--brume); box-shadow: var(--ombre-1);
  transform: translateY(-2px); color: inherit;
}
.edition-row h3 { font-size: 19px; font-weight: 560; }
.edition-row p {
  color: var(--encre-2); font-size: 13.5px; margin-top: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.edition-row time { color: var(--encre-2); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.edition-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.edition-side .badge-new { margin: 0; vertical-align: 0; }
.debate { margin-top: 44px; padding-top: 8px; }

/* composants riches utilisés dans le corps des éditions */
.prose .nl-img { width: 100%; border-radius: 10px; border: 1px solid var(--ligne-forte); margin: 6px 0 2px; }
.prose .nl-kicker {
  display: block; margin: 30px 0 -6px; color: var(--or);
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; font-style: normal;
}
.prose .callout {
  margin: 18px 0; padding: 16px 20px; border-radius: 12px;
  border: 1px solid; font-size: 15px;
  font-family: var(--sans); font-style: normal;
}
.prose .callout p { margin: 6px 0; }
.prose .callout-terra { border-color: rgba(169, 133, 63, 0.4); background: rgba(169, 133, 63, 0.07); }
.prose .callout-sauge { border-color: rgba(95, 125, 116, 0.4); background: rgba(95, 125, 116, 0.08); }
.prose .callout-sable { border-color: var(--ligne-forte); background: rgba(205, 191, 159, 0.16); }
.prose .callout b:first-child { display: block; margin-bottom: 2px; font-family: var(--display); font-style: normal; }
.prose .nl-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; margin: 16px 0;
}
.prose .nl-tool {
  padding: 14px 16px; border: 1px solid var(--ligne); border-radius: 12px;
  background: var(--surface); font-size: 14px;
  font-family: var(--sans); font-style: normal;
}
.prose .nl-tool b { display: block; font-family: var(--display); font-size: 15.5px; }
.prose .nl-tool p { margin: 4px 0 8px; color: var(--encre-2); font-size: 13px; line-height: 1.5; }
.prose .nl-tool a { font-size: 13px; font-weight: 560; text-decoration: none; }
.prose .nl-tool a:hover { text-decoration: underline; }

/* ---------- 13. Page « Rejoindre » : avantages, étapes, sécurité ---------- */
.perk {
  padding: 22px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface); box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
}
.perk-ico {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--ligne-forte); border-radius: 12px;
  color: var(--encre); background: rgba(192,179,160, 0.12);
}
.ico { flex-shrink: 0; }
.card-grid .perk:nth-child(4n+1) .perk-ico { color: var(--marine); }
.card-grid .perk:nth-child(4n+2) .perk-ico { color: var(--vague); }
.card-grid .perk:nth-child(4n+3) .perk-ico { color: var(--or); }
.card-grid .perk:nth-child(4n) .perk-ico { color: var(--encre); }
.card-grid:has(.perk) { grid-template-columns: repeat(2, 1fr); }
.card-grid:has(.perk) .perk {
  display: grid; grid-template-columns: 42px 1fr;
  column-gap: 16px; row-gap: 4px; align-items: start; padding: 24px;
}
.card-grid:has(.perk) .perk-ico { grid-row: 1 / span 2; margin-top: 2px; }
@media (max-width: 700px) {
  .card-grid:has(.perk) { grid-template-columns: 1fr; }
}
.perk h3 { font-size: 18px; font-weight: 560; }
.perk p { color: var(--encre-2); font-size: 14px; line-height: 1.55; }

.steps {
  list-style: none; padding: 0; margin: 22px 0 0; counter-reset: step;
  display: flex; flex-direction: column; gap: 14px;
}
.steps li {
  counter-increment: step; position: relative;
  padding: 20px 22px 20px 66px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface);
}
.steps li::before {
  content: counter(step, decimal); position: absolute; left: 20px; top: 20px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--marine);
  color: var(--marine); font-family: var(--display); font-weight: 600; font-size: 14.5px;
  background: var(--champ);
}
.steps h3 { font-size: 17.5px; font-weight: 560; }
.steps p { color: var(--encre-2); font-size: 14.5px; margin-top: 6px; line-height: 1.6; }
.steps-illustrated li { display: grid; grid-template-columns: 1fr 250px; gap: 22px; align-items: start; }
.steps-illustrated .step-text h3 {
  font-size: 17.5px; font-weight: 560;
  min-height: 30px; display: flex; align-items: center;
}

/* mockups maison (fenêtres façon macOS, aucune vraie capture) */
.mock {
  border: 1px solid var(--ligne-forte); border-radius: 10px; overflow: hidden;
  background: var(--voile); font-family: var(--sans); font-size: 11.5px;
}
.mock-bar {
  display: flex; align-items: center; gap: 5px; padding: 7px 10px;
  border-bottom: 1px solid var(--ligne); background: rgba(205, 191, 159, 0.2);
}
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; }
.mock-bar i:nth-child(1) { background: #FF5F57; }
.mock-bar i:nth-child(2) { background: #FEBC2E; }
.mock-bar i:nth-child(3) { background: #28C840; }
.mock-bar span { margin-left: 6px; color: var(--encre-2); font-size: 10.5px; }
.mock-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mock-title { font-weight: 600; font-size: 12.5px; }
.mock-field {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 9px;
  border: 1px solid var(--ligne); border-radius: 7px; background: var(--champ);
}
.mock-field label {
  color: var(--encre-2); font-size: 9px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.mock-field span { color: var(--encre); }
.mock-btn {
  padding: 8px 0; border-radius: 7px; text-align: center;
  background: var(--marine); color: var(--voile); font-weight: 600; font-size: 11.5px;
}
.mock-btn-sauge { background: var(--vague); }
.mock-mail {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 9px;
  border: 1px solid var(--ligne); border-radius: 7px; background: var(--champ);
}
.mock-mail span { color: var(--encre-2); }
.mock-guild {
  display: flex; align-items: center; gap: 9px; padding: 8px 9px;
  border: 1px solid var(--ligne); border-radius: 7px; background: var(--champ);
}
.mock-guild span { display: block; color: var(--encre-2); font-size: 10.5px; }
.mock-guild b { font-size: 12px; }
.mock-logo {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--encre); color: var(--voile) !important; font-weight: 700; font-size: 12px !important;
}
.mock-msg { display: flex; gap: 8px; align-items: flex-start; }
.mock-msg b { display: block; margin-bottom: 1px; }
.mock-msg span { color: var(--encre-2); }
.mock-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ligne-forte);
  flex-shrink: 0; object-fit: cover; overflow: hidden;
}
.mock-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mock-mention {
  color: #f2b75b !important; background: rgba(242,183,91, 0.14);
  border-radius: 4px; padding: 0 3px; font-weight: 500;
}
.mock-banner {
  display: block; width: 100%; height: 58px; object-fit: cover;
  border-bottom: 1px solid var(--ligne);
}
.mock-logo-img {
  width: 42px; height: 42px; border-radius: 11px;
  flex-shrink: 0; border: 1px solid var(--ligne);
  overflow: hidden; display: block;
}
.mock-logo-img img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translate(5%,8%) scale(1.55); transform-origin: center; display: block;
}
/* avatar LaValley : le bateau zoome pour remplir le cercle comme un vrai avatar */
.mock-av-lv { background: none; overflow: hidden; }
.mock-av-lv img { transform: translate(5%,-1%) scale(1.72); transform-origin: center; }

@media (max-width: 700px) {
  .steps-illustrated li { grid-template-columns: 1fr; }
  .mock { width: 100%; max-width: 340px; }
  .steps li { padding: 18px 16px 18px 56px; }
  .steps li::before { left: 14px; top: 18px; width: 28px; height: 28px; font-size: 13px; }
  .security-box { padding: 22px 18px; }
}

.security-box {
  padding: 28px 30px; border: 1px solid rgba(95, 125, 116, 0.4); border-radius: 16px;
  background: rgba(95, 125, 116, 0.07);
}
.security-box .ico { color: var(--vague); }
.security-box .section-head { margin-bottom: 10px; border-bottom: 0; padding-bottom: 0; }
.security-list { margin: 14px 0; padding-left: 22px; color: var(--encre-2); font-size: 14.5px; }
.security-list li { margin: 10px 0; line-height: 1.6; }
.security-list b { color: var(--encre); }
.early-note .ico, .reassure .ico { vertical-align: -3px; margin-right: 3px; color: var(--vague); }
.section-head h2 .ico { vertical-align: -3px; margin-right: 6px; }

/* ---------- 14. Le direct + débats ---------- */
.live-dot-inline {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--vague); margin-right: 7px;
}
.chat-wrap { max-width: 820px; }
.chat-feed {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 62vh; max-height: 62dvh; overflow-y: auto; padding: 22px;
  border: 1px solid var(--ligne); border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
}
.debate-feed { max-height: 48vh; max-height: 48dvh; margin-top: 6px; }
.msg { display: flex; gap: 12px; }
.msg-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.msg-fb {
  background: var(--marine); display: grid; place-items: center;
  color: var(--voile); font-weight: 600; font-size: 15px;
}
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.msg-meta b { font-size: 14.5px; font-weight: 600; color: var(--encre); }
.msg-meta time { color: var(--encre-2); font-size: 11.5px; opacity: 0.8; }
.msg-meta .src {
  font-size: 10px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 1px 8px; border-radius: 999px;
}
.msg-meta .src.discord { background: rgba(242,183,91, 0.12); color: #c8984e; }
.msg-meta .src.web { background: rgba(169, 133, 63, 0.12); color: #8A6B33; }
.msg-content {
  color: #4d4334; font-size: 14.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}

.chat-compose { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.chat-compose textarea {
  flex: 1; min-height: 54px; padding: 14px 16px; resize: vertical;
  border: 1px solid var(--ligne-forte); border-radius: 14px;
  background: var(--champ); color: var(--encre);
  font: inherit; font-size: 14.5px; outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.chat-compose textarea:focus {
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(107,80,39, 0.12);
}
.chat-note { color: var(--encre-2); font-size: 12.5px; margin-top: 10px; }
.chat-note b { color: var(--vague); }
.chat-login {
  margin-top: 16px; padding: 22px 26px;
  border: 1px dashed var(--ligne-forte); border-radius: 14px;
}
.chat-login p { color: var(--encre-2); font-size: 14.5px; margin-bottom: 14px; }
.sent-banner {
  padding: 16px 20px; margin-bottom: 14px;
  border: 1px solid rgba(95, 125, 116, 0.45); border-radius: 12px;
  background: rgba(95, 125, 116, 0.09); color: var(--encre-2); font-size: 14px;
}
.sent-banner b { color: #4C665E; }
.sent-banner a { color: var(--marine); }

/* ---------- 15. Chip utilisateur + menu profil ---------- */
.user-chip { gap: 8px; padding-left: 6px !important; }
.user-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.chip-fb {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--marine); color: var(--voile);
  font-size: 14px; font-weight: 600;
}
.user-menu { position: relative; }
.user-menu > summary { list-style: none; cursor: pointer; }
.user-menu > summary::-webkit-details-marker { display: none; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: var(--z-menu);
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--ligne-forte);
  border-radius: 12px; box-shadow: var(--ombre-2);
}
.menu-pop a {
  padding: 10px 13px; border-radius: 8px;
  color: var(--encre); font-size: 14px; font-weight: 500; text-decoration: none;
}
.menu-pop a:hover { background: rgba(192,179,160, 0.16); color: var(--encre); }
.menu-pop a.menu-danger { color: var(--alerte); }

/* ---------- 16. Profil ---------- */
.profile-col { max-width: 720px; }
.profile-col .page-head { padding-bottom: 0; }
.profile-col .section { padding: 18px 0; }
.nl-status { flex-wrap: wrap; justify-content: space-between; align-items: center; }
.nl-status p { font-size: 14px; max-width: 46ch; }
.profile-card {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface);
}
.profile-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.profile-card h3 { font-size: 21px; }
.profile-card p { color: var(--encre-2); font-size: 14px; margin-top: 3px; }

/* ---------- 17. Bibliothèque de ressources ---------- */
.res-layout { display: flex; gap: 40px; align-items: flex-start; padding-bottom: 30px; }
.res-sidebar {
  position: sticky; top: 88px; flex-shrink: 0; width: 210px;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 0;
}
.res-sidebar a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-radius: 999px;
  color: var(--encre-2); font-size: 14px; font-weight: 500; text-decoration: none;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.res-sidebar a:hover { color: var(--encre); background: rgba(192,179,160, 0.14); }
.res-sidebar a.active { color: var(--marine); background: rgba(107,80,39, 0.08); font-weight: 600; }
.res-sidebar a:nth-child(1) .ico, .res-cat:nth-of-type(1) h2 .ico { color: var(--marine); }
.res-sidebar a:nth-child(2) .ico, .res-cat:nth-of-type(2) h2 .ico { color: var(--vague); }
.res-sidebar a:nth-child(3) .ico, .res-cat:nth-of-type(3) h2 .ico { color: var(--or); }
.res-cat h2 .ico { width: 24px; height: 24px; }
.res-side-muted { opacity: 0.75; }
.res-content { flex: 1; min-width: 0; }
.res-cat { padding: 14px 0 22px; scroll-margin-top: 92px; }
.res-cat h2 { font-size: 24px; }
.res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 13px; }
.res-item {
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 20px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
}
a.res-item:hover {
  border-color: var(--brume); box-shadow: var(--ombre-1);
  transform: translateY(-2px); color: inherit;
}
.res-head { display: flex; align-items: center; gap: 9px; }
.res-head h3 { font-size: 17px; font-weight: 560; }
.res-tag {
  padding: 2px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 650;
  background: rgba(205, 191, 159, 0.28); color: #7A6A45; letter-spacing: 0.03em;
}
.res-lock { margin-left: auto; color: var(--encre-2); }
.res-item p { color: var(--encre-2); font-size: 13.5px; line-height: 1.55; }
.res-link { margin-top: auto; padding-top: 4px; color: var(--marine); font-size: 13px; font-weight: 560; }
.res-locked { position: relative; overflow: hidden; }
.res-locked .res-veil {
  display: flex; flex-direction: column; gap: 7px;
  filter: blur(8px); opacity: 0.55;
  user-select: none; pointer-events: none;
}
.res-spoiler {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--encre); color: var(--voile);
  font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
}
.res-spoiler .ico { color: var(--brume); }
.res-conseil {
  display: flex; align-items: baseline; gap: 7px; margin-top: 14px;
  color: #4C665E; font-size: 13.5px;
}
.res-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap;
  margin: 18px 0 8px; padding: 28px 32px;
  border: 1px solid rgba(95, 125, 116, 0.4); border-radius: 18px;
  background: rgba(95, 125, 116, 0.07);
}
.res-cta h2 { font-size: 25px; }
.res-cta > div > p { color: var(--encre-2); font-size: 14.5px; margin-top: 6px; }
.res-perks { margin: 12px 0 0; padding-left: 20px; color: var(--encre-2); font-size: 13.5px; }
.res-perks li { margin: 5px 0; }

/* ---------- 18. Avis ---------- */
.reviews { padding: 26px 0 46px; scroll-margin-top: 92px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 13px; }
.review-card {
  padding: 16px 18px; border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface);
}
.review-card blockquote {
  color: #4d4334; font-size: 13.5px; line-height: 1.6;
}
.review-card figcaption {
  margin-top: 10px; display: flex; align-items: center; gap: 8px;
  color: var(--encre-2); font-size: 12.5px;
}
.review-card b { color: var(--encre); }
.review-note { margin-top: 14px; color: var(--encre-2); font-size: 13px; }
.review-form { margin-top: 16px; }
.review-form summary { cursor: pointer; color: var(--marine); font-size: 13.5px; font-weight: 560; }
.review-form form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 12px; }
.review-form textarea {
  width: min(100%, 520px); padding: 12px 14px;
  border: 1px solid var(--ligne-forte); border-radius: 12px; background: var(--champ);
  color: var(--encre); font: inherit; font-size: 14px; outline: none; resize: vertical;
}
.review-form textarea:focus {
  border-color: var(--marine); box-shadow: 0 0 0 3px rgba(107,80,39, 0.12);
}

/* ---------- 19. Connexion, inscription, bandeaux ---------- */
.auth-col { max-width: 880px; padding-bottom: 50px; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.auth-card {
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding: 26px 28px; border: 1px solid var(--ligne); border-radius: 16px;
  background: var(--surface); box-shadow: 0 1px 0 rgba(253, 251, 243, 0.8) inset;
}
.auth-card h2 { font-size: 20px; }
.auth-card h2 .ico { vertical-align: -3px; margin-right: 6px; color: var(--marine); }
.auth-card > p { color: var(--encre-2); font-size: 14.5px; }
.auth-discord { border-color: rgba(95, 125, 116, 0.4); background: rgba(95, 125, 116, 0.06); }
.auth-note { color: var(--encre-2); font-size: 12.5px; line-height: 1.55; }
.auth-note a { color: var(--marine); }
.auth-error {
  margin-top: 14px; padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(160, 58, 48, 0.35); background: rgba(160, 58, 48, 0.06);
}
.auth-form { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.auth-form label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--encre); font-size: 13.5px; font-weight: 600;
}
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password] {
  min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--ligne-forte); border-radius: 10px;
  background: var(--champ); color: var(--encre);
  font: inherit; font-size: 14.5px; font-weight: 400; outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.auth-form input:focus {
  border-color: var(--marine); box-shadow: 0 0 0 3px rgba(107,80,39, 0.12);
}
.auth-form .nl-consent { font-weight: 400; flex-direction: row; }
.auth-form button { align-self: flex-start; }
.auth-form input[type=file] { color: var(--encre-2); font-weight: 400; font-size: 13px; }
.auth-form input[type=file]::file-selector-button,
.admin-form input[type=file]::file-selector-button {
  margin-right: 10px; min-height: 36px; padding: 0 16px;
  color: var(--marine); font: inherit; font-size: 13px; font-weight: 560;
  background: transparent; border: 1px solid rgba(107,80,39, 0.4);
  border-radius: 999px; cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.auth-form input[type=file]::file-selector-button:hover,
.admin-form input[type=file]::file-selector-button:hover {
  color: var(--marine-2); background: rgba(107,80,39, 0.06);
}

.join-banner {
  margin: 14px 0; padding: 18px 22px;
  border: 1px solid rgba(169, 133, 63, 0.4); border-radius: 14px;
  background: rgba(169, 133, 63, 0.06);
}
.join-banner p { color: var(--encre-2); font-size: 14px; }
.join-banner b { color: var(--encre); }
.join-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.join-actions form { display: inline; }

/* ---------- 20. Back-office ---------- */
.admin-shell { display: flex; gap: 34px; padding: 46px 0 60px; align-items: flex-start; }
.admin-nav {
  display: flex; flex-direction: column; gap: 4px; width: 190px; flex-shrink: 0;
  position: sticky; top: 92px;
}
.admin-nav a {
  color: var(--encre-2); font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 10px 14px; border-radius: 999px;
  transition: color 200ms var(--ease), background 200ms var(--ease);
}
.admin-nav a:hover { color: var(--encre); background: rgba(192,179,160, 0.14); }
.admin-nav a.active { color: var(--marine); background: rgba(107,80,39, 0.08); font-weight: 600; }
.admin-body { flex: 1; min-width: 0; }
.admin-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.admin-head h1 { font-size: 31px; }
.admin-sub { font-size: 19px; font-weight: 560; font-family: var(--display); margin: 30px 0 12px; }
.admin-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }

.stat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.stat-tile {
  min-width: 150px; padding: 18px 22px;
  border: 1px solid var(--ligne); border-radius: 14px;
  background: var(--surface);
}
.stat-tile b {
  display: block; font-size: 27px; font-weight: 560;
  font-family: var(--display); font-variant-numeric: tabular-nums;
}
.stat-tile span { color: var(--encre-2); font-size: 12.5px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left; color: var(--or); font-size: 11.5px; font-weight: 650;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 12px;
  border-bottom: 1px solid var(--ligne-forte);
}
.admin-table td { padding: 12px; border-bottom: 1px solid var(--ligne); color: var(--encre-2); }
.admin-table td:first-child { color: var(--encre); font-weight: 520; }
.admin-table a { color: var(--marine); text-decoration: none; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.badge {
  display: inline-block; font-size: 11px; font-weight: 650; padding: 3px 10px;
  border-radius: 999px; background: rgba(42,34,27, 0.06); color: var(--encre-2);
}
.badge.published { background: rgba(95, 125, 116, 0.14); color: #4C665E; }
.badge.draft { background: rgba(205, 191, 159, 0.3); color: #7A6A45; }

.admin-form { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.admin-form label {
  display: flex; flex-direction: column; gap: 6px;
  color: var(--encre); font-size: 13.5px; font-weight: 600; flex: 1;
}
.admin-form label small { color: var(--encre-2); font-weight: 400; font-size: 12px; }
.admin-form input[type=text], .admin-form input[type=password], .admin-form input[type=email],
.admin-form textarea, .admin-form select {
  min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--ligne-forte); border-radius: 10px;
  background: var(--champ); color: var(--encre);
  font: inherit; font-size: 14.5px; font-weight: 400; outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.admin-form textarea { line-height: 1.6; resize: vertical; }
.admin-form textarea.mono { font-family: var(--mono); font-size: 13.5px; }
.admin-form select {
  appearance: none; -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2326476B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.admin-form select option { background: var(--champ); color: var(--encre); }
.form-row { display: flex; gap: 14px; }
.form-row > label { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) { .form-row { flex-direction: column; } }
.admin-form input[type=date] { color: var(--encre); }
.admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus {
  border-color: var(--marine);
  box-shadow: 0 0 0 3px rgba(107,80,39, 0.12);
}
.admin-form input[type=file] { color: var(--encre-2); font-weight: 400; font-size: 13px; }
.tweet-workbench { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.tweet-workbench .admin-form { flex: 1 1 380px; max-width: 560px; }
.tweet-preview { flex: 1 1 320px; max-width: 460px; position: sticky; top: 92px; }
.tweet-strip-compact { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tweet-strip-compact .tweet-card { padding: 12px 14px; }
.tweet-strip-compact .tweet-card blockquote {
  font-size: 12.5px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.tweet-strip-compact .tw-av { width: 30px; height: 30px; }
.tweet-strip-compact .tw-head b { font-size: 13px; }
.tweet-strip-compact .tw-head span { font-size: 11.5px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.form-error { color: var(--alerte); font-size: 13.5px; }
.danger-zone { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--ligne); }
.danger-link {
  background: none; border: 0; color: var(--alerte); font: inherit;
  font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline;
}
.danger-link:hover { opacity: 0.8; }

.date-trio { display: flex; gap: 8px; }
.date-trio select { flex: 1; min-width: 0; }

.chart-bars {
  display: flex; align-items: stretch; gap: 6px;
  height: 150px; max-width: 760px;
  padding: 14px 16px 10px;
  border: 1px solid var(--ligne); border-radius: 14px; background: var(--surface);
}
.chart-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 4px;
}
.chart-n { color: var(--encre-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.chart-bar {
  width: 100%; max-width: 26px; min-height: 2px;
  background: var(--marine); border-radius: 4px 4px 2px 2px; opacity: 0.85;
}
.chart-day { color: var(--encre-2); font-size: 10px; opacity: 0.7; }
.dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 8px; }
@media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr; } }
.hint { color: var(--encre-2); font-size: 13.5px; margin: 14px 0; max-width: 68ch; }
.hint a { color: var(--marine); }

@media (max-width: 900px) {
  /* stretch indispensable : sinon les tableaux imposent leur largeur et débordent */
  .admin-shell { flex-direction: column; gap: 18px; align-items: stretch; padding-top: 26px; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; position: static; }
  .admin-nav a {
    padding: 8px 13px; font-size: 13.5px; white-space: nowrap;
    border: 1px solid var(--ligne); background: var(--surface);
  }
  .admin-nav a.active { border-color: var(--ligne-forte); }
  .admin-body { width: 100%; overflow-x: hidden; }
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------- 21. Responsive global ---------- */
.nav-toggle { display: none; }
.nav-ico { display: none; }

@media (max-width: 860px) {
  .res-layout { flex-direction: column; gap: 8px; }
  .res-sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .res-sidebar a {
    padding: 8px 13px; font-size: 13px;
    border: 1px solid var(--ligne); background: var(--surface);
  }
}

@media (max-width: 760px) {
  .site-header {
    flex-wrap: wrap; gap: 10px;
    min-height: 58px; padding: 8px 16px;
    border-bottom-color: rgba(42,34,27, 0.08);
    background: rgba(242, 236, 222, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .brand { font-size: 21px; }
  .header-cta { margin-left: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    color: var(--encre); background: var(--champ);
    border: 1px solid var(--ligne-forte); border-radius: 50%; cursor: pointer;
    transition: background 200ms var(--ease);
  }
  .nav-toggle:active { background: var(--surface); }
  .nav-toggle .ico-close { display: none; }
  .nav-open .nav-toggle .ico-burger { display: none; }
  .nav-open .nav-toggle .ico-close { display: block; }

  .site-nav { display: none; }
  .nav-open .site-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    order: 4; width: 100%; margin: 8px 0 4px; padding: 10px 2px 6px;
    border-top: 1px solid var(--ligne);
  }
  .nav-open .site-nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px; font-size: 15.5px; border-radius: 12px;
  }
  .nav-open .site-nav a.active::after { display: none; }
  .nav-open .nav-ico { display: inline-flex; color: var(--marine); }

  .chip-name { display: none; }
  .user-chip { padding-right: 8px !important; }
  .secondary-button, .primary-button { font-size: 14px; padding: 0 16px; }

  /* mobile : hero plein écran pour que l'atmosphère respire, et blobs
     redimensionnés en vw (l'écran est étroit → il faut de grandes masses,
     réparties dans le cadre visible et pas coincées dans les coins) */
  .hero-mer { min-height: 84vh; min-height: 84dvh; padding: 30px 0 30px; }
  .hero-sub { font-size: 15.5px; }
  .hero-cta { gap: 10px; margin-top: 22px; }
  .aura-blob { filter: blur(46px); opacity: 0.92; }
  .aura-blob.b1 { width: 100vw; height: 100vw; left: -34%; top: -8%; }
  .aura-blob.b2 { width: 82vw; height: 82vw; right: -26%; top: 2%; }
  .aura-blob.b3 { width: 120vw; height: 120vw; right: -34%; bottom: -16%; }
  .aura-blob.b4 { width: 82vw; height: 82vw; right: -14%; top: 42%; }
  .aura-blob.b5 { width: 78vw; height: 78vw; left: -6%; bottom: 4%; }

  .nl-banner { padding: 22px 18px; }
  .nl-form { width: 100%; }
  .nl-row { width: 100%; }
  .nl-form input[type=email] { min-width: 0; flex: 1 1 auto; width: 100%; }
  .section { padding: 18px 0; }
  .wrap { width: calc(100% - 32px); }

  .page-head { padding: 28px 0 6px; }
  .page-head p { font-size: 15px; }
  .prose { font-size: 15.5px; }
  .prose-page { padding: 30px 0 26px; }
  .prose-cover { max-height: 240px; }
  .page-banner { height: 150px; border-radius: 10px; }
  .edition-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .auth-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 22px 18px; }
  .chat-feed { padding: 16px 14px; gap: 14px; max-height: 56vh; max-height: 56dvh; }
  .chat-compose textarea { min-width: 0; }
  .chat-compose .primary-button { padding: 0 16px; }
  .tweet-workbench { gap: 18px; }
  .tweet-preview { position: static; }
  .stat-tile { min-width: calc(50% - 7px); flex: 1; }
  .site-footer .in { flex-direction: column; gap: 14px; }
  .res-cta { padding: 22px 18px; }
  .review-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .res-list { grid-template-columns: 1fr; }
  .prose .nl-tools { grid-template-columns: 1fr; }

  /* iOS zoome sur les champs < 16px : 16px garantis partout au doigt */
  input[type=text], input[type=email], input[type=password], textarea, select {
    font-size: 16px !important;
  }
}

/* =====================================================================
   THEME CARNET DE BORD (16 juillet 2026) : bascule sombre du site entier.
   Socle moderne (nappes de couleur lentes, aucune ligne) + accents de
   carnet (decoupes collees, notes manuscrites, vagues gravees au footer).
   Le hero eau 3D de l'accueil est servi depuis /hero-da/graybox-eau3d/.
   Couche ajoutee en fin de fichier : elle gagne la cascade sans toucher
   aux regles historiques (le theme clair reste au-dessus, dormant).
   ===================================================================== */
:root{
  --fond:#171210;          /* charbon chaud — le socle de la vallee */
  --surface:#221a15;
  --champ:#1d1512;
  --voile:#2b211a;
  --encre:#F2EADD;         /* ivoire */
  --encre-2:#B3A796;
  --marine:#D9A94E;        /* accent principal devenu or */
  --marine-2:#E8C98F;
  --charbon:#F0EADB;
  --cardinal:#C2492E;      /* accent vif : CTA, point du wordmark */
  --ligne:rgba(191,173,148,.15);
  --ligne-forte:rgba(191,173,148,.30);
}
html{background:#171210}
body{background:transparent;color:var(--encre);overflow-x:clip}
/* atmosphere papier du theme clair : retiree */
.page-atmos{display:none}
/* Grain limite aux fonds atmospheriques : jamais sur le hero, les panneaux,
   les textes ou le footer. */
body::before{display:none}
.atmos::after,.atmos-home::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.055;mix-blend-mode:soft-light}

/* --- en-tete : claire sur le fond sombre, verre sombre une fois defilee --- */
.site-header .brand,.site-header .site-nav a,
.site-header .header-cta .secondary-button,.site-header .nav-toggle{color:#f3ead6}
.site-header .site-nav a:hover{color:#fff;background:rgba(246,241,230,.14)}
.site-header .header-cta .secondary-button{
  background:rgba(246,241,230,.12);border-color:rgba(244,232,203,.42)}
.site-header{background:transparent;border-bottom-color:transparent}
.site-header.scrolled,.site-header.past-hero,.site-header.nav-open{
  border-bottom-color:rgba(192,179,160,.14);
  background:rgba(23,17,9,.86);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.menu-pop{background:#1e1713;border-color:var(--ligne-forte)}

/* --- plus de tiret decoratif devant les kickers --- */
.kicker::before{display:none}

/* --- typo : Geist (grotesque moderne, pool taste-skill) en display.
   Look unaite : titres gras et serres. --- */
h1,h2,h3,.brand{font-weight:700;letter-spacing:-.02em}
/* mots accentues et citations : couleur conservee, mais MEME typo que le
   reste (plus aucun italique herite de l'ancienne DA serif) */
.accent-text,.hero-texte h1 .accent{font-style:normal;font-weight:inherit}
.prose blockquote{font-style:normal;font-weight:500}

/* --- fond vivant : nappes lisses en derive (aucune ligne, aucun neon) --- */
.atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%}
.blob.b1{left:-26vw;top:-14vh;width:88vw;height:60vw;
  background:radial-gradient(closest-side,rgba(128,93,43,.58),rgba(128,93,43,.22) 55%,transparent 74%)}
.blob.b2{right:-28vw;top:30vh;width:80vw;height:56vw;
  background:radial-gradient(closest-side,rgba(95,125,116,.38),rgba(95,125,116,.13) 55%,transparent 72%)}
.blob.b3{left:24vw;bottom:-30vh;width:66vw;height:44vw;
  background:radial-gradient(closest-side,rgba(169,133,63,.17),rgba(169,133,63,.05) 55%,transparent 72%)}
.blob.b4{right:-4vw;top:-8vh;width:42vw;height:30vw;
  background:radial-gradient(closest-side,rgba(192,179,160,.12),transparent 68%)}
@media (prefers-reduced-motion: no-preference){
  .blob{will-change:transform;animation:blob-derive var(--t,90s) ease-in-out infinite alternate}
  .blob.b1{--t:84s}.blob.b2{--t:118s;animation-direction:alternate-reverse}
  .blob.b3{--t:96s}.blob.b4{--t:74s;animation-direction:alternate-reverse}
  @keyframes blob-derive{
    from{transform:translate3d(0,0,0) scale(1)}
    to{transform:translate3d(4vw,-3vh,0) scale(1.09)}
  }
}

/* --- composants sur sombre --- */
.article-card,.edition-row{box-shadow:0 10px 30px rgba(0,0,0,.28)}
.article-card:hover,.edition-row:hover{
  border-color:var(--marine);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.article-card .cover{border-color:rgba(192,179,160,.18)}
.nl-banner{box-shadow:0 12px 34px rgba(0,0,0,.3)}
.nl-form input[type=email]::placeholder{color:#9a8f80}
.badge-new{background:rgba(201,168,106,.14);
  border-color:rgba(201,168,106,.5);color:#d8bd86}
.primary-button,.secondary-button{
  background:#F6F1E6;color:#6b5027;border-color:rgba(42,34,27,.14)}
.primary-button:hover,.secondary-button:hover{
  background:#fff;color:#4e3919;border-color:#c0b3a0}

/* --- footer : vagues gravees en encre claire --- */
.site-footer{position:relative;overflow:hidden;
  background:transparent;border-top-color:rgba(192,179,160,.14)}
.site-footer::before{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;
  background:url(/hero-da/graybox-eau3d/mer-gravure.jpg) repeat-x center bottom/auto 190px;
  filter:invert(.9) sepia(.25) brightness(.85);mix-blend-mode:screen;opacity:.18;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  pointer-events:none}
.site-footer .wrap{position:relative;z-index:1}

/* --- decoupes collees + notes manuscrites (accents, jamais sous le texte) --- */
.frag{position:absolute;pointer-events:none;z-index:3;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.5)) drop-shadow(0 3px 6px rgba(0,0,0,.35))}
.frag img{display:block;width:100%;height:auto;
  clip-path:polygon(2% 3%,12% 0%,27% 2%,41% 1%,55% 3%,68% 0%,82% 2%,95% 1%,100% 8%,
    98% 22%,100% 38%,97% 52%,99% 67%,97% 81%,100% 93%,90% 100%,76% 98%,60% 100%,
    45% 98%,30% 100%,15% 97%,4% 100%,0% 88%,2% 72%,0% 55%,3% 40%,0% 25%,2% 10%);
  filter:sepia(.22) saturate(.88) brightness(.94) contrast(1.02)}
.tape{position:absolute;width:72px;height:24px;
  background:linear-gradient(180deg,rgba(222,210,178,.36),rgba(222,210,178,.20));
  border-left:1px dashed rgba(255,255,255,.16);border-right:1px dashed rgba(255,255,255,.16);
  box-shadow:0 1px 2px rgba(0,0,0,.22)}
.frag .tape{left:24px;top:-11px;transform:rotate(-6deg)}
.note-marge{position:absolute;pointer-events:none;z-index:3;
  font-family:'Segoe Print','Bradley Hand',cursive;font-size:14px;line-height:1.3;
  color:rgba(233,223,202,.78);transform:rotate(-2.5deg)}
.note-marge .fleche{display:block;margin:7px auto 0;overflow:visible;opacity:.92;
  filter:drop-shadow(0 2px 2px rgba(7,4,0,.72))}
/* sous-pages : decoupes RETIREES (retour user 16/07 : posees dans le vide de
   la gouttiere, elles s'incrustaient mal — sans appui compositionnel, contrairement
   a l'accueil ou la rose s'appuie sur le hero et la section). Le DOM reste dans
   les templates : reactivables plus tard avec de vrais assets penses par page. */
.page-head{position:relative}
.page-head .frag-page,.page-head .note-page{display:none}

/* --- accueil : hero eau 3D (canvas fixe, contenu par-dessus) --- */
#gl{position:fixed;inset:0;width:100vw;height:100svh;height:100dvh;display:block;z-index:1}
#poster{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#191411 url(/hero-da/graybox-eau3d/poster.jpg) center/cover no-repeat}
.hero3d{position:relative;height:100svh;height:100dvh;z-index:2;overflow:hidden;
  pointer-events:none}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:66svh;height:70dvh;z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(28,22,14,0) 0%,rgba(28,22,14,.10) 30%,rgba(28,21,13,.28) 52%,
    rgba(28,21,12,.52) 70%,rgba(28,20,11,.78) 85%,rgba(28,20,10,.93) 94%,#191411 100%)}
#hero-sentinel{position:absolute;left:0;bottom:34vh;width:1px;height:1px}
.hero3d .hero{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
  padding:0 20px;color:#f3ead6;transform:translateY(-6vh);
  text-shadow:0 2px 24px rgba(18,13,5,.55);
  background:radial-gradient(ellipse 62% 46% at 50% 46%,
    rgba(21,15,7,.36),rgba(21,15,7,.15) 46%,transparent 72%)}
.hero3d .hero>*{position:relative}
.hero3d .hero .k{font-family:var(--sans);font-size:clamp(13.5px,1.05vw,16px);font-weight:650;
  letter-spacing:.2em;text-transform:uppercase;color:#e6c98a;margin-bottom:1rem}
.hero3d .hero h1{font-family:var(--display);font-weight:750;margin:0;
  font-size:clamp(3rem,8.5vw,6rem);line-height:1;letter-spacing:-.03em;
  text-shadow:0 0 14px rgba(252,247,234,.34),0 0 40px rgba(233,205,155,.26),
    0 0 90px rgba(214,175,116,.18)}
.hero3d .hero .s{font-family:var(--sans);font-size:clamp(1rem,2.1vw,1.2rem);
  line-height:1.55;margin:1.1rem auto 0;max-width:46ch;color:#e9dfca;opacity:.94}
.hero3d .hero .hero-cta{pointer-events:auto;justify-content:center}
.hero3d .hero .hero-note{color:#cbd7d0;opacity:.85;
  text-shadow:0 1px 6px rgba(16,10,3,.6)}
.site-content{position:relative;z-index:2;overflow-x:clip;
  background:linear-gradient(180deg,#191411 0%,#191411 22%,#161110 70%,#141010 100%)}
.site-content>.section{position:relative;z-index:2}
.site-content .atmos-home{position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
  /* aucune lumiere pres de la charniere hero->contenu (sinon ligne visible) :
     le fond vivant ne s'allume qu'apres les premiers ~500px du contenu */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 140px,#000 560px);
  mask-image:linear-gradient(180deg,transparent 0,transparent 140px,#000 560px)}
.site-content .atmos-home .blob{position:absolute}
.site-content .nl-banner{position:relative;z-index:2}
/* accueil : la rose, son releve et sa fleche forment un SEUL objet anime.
   Le parent reprend exactement le centrage historique dans la gouttiere. */
.rose-callout{position:absolute;z-index:3;
  right:34px;top:4px;width:126px}
.rose-callout .frag-rose{position:relative;right:auto;top:auto;width:108px;
  margin:0 auto;transform:rotate(5.5deg)}
.rose-callout .note-actus{position:relative;right:auto;top:auto;width:126px;
  margin-top:18px;text-align:center;font-size:13.5px;line-height:1.25}
@media (max-width:1280px){
  .rose-callout{right:10px;top:8px;width:88px}
  .rose-callout .note-actus{display:none}
  .rose-callout .frag-rose{width:88px}
}
@media (min-width:1400px){
  .rose-callout{
    right:max(calc(277px - 25vw),calc(714px - 50vw));
  }
}
/* cartouches de navigation des navires (portees de phase4) */
.boat-tag-link{position:fixed;inset:0;z-index:3;width:100vw;height:100svh;
  overflow:visible;pointer-events:none;opacity:0;transition:opacity .35s}
.boat-tag-link path{fill:none;stroke:rgba(218,188,124,.62);stroke-width:.9;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(7,4,0,.72)) drop-shadow(0 0 3px rgba(211,177,105,.2))}
.boat-tag-link .boat-tag-arrowhead{fill:none;stroke:rgba(230,203,145,.82);
  stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(7,4,0,.78)) drop-shadow(0 0 3px rgba(211,177,105,.24))}
.boat-tag-link circle{fill:rgba(230,198,132,.88);stroke:rgba(20,14,7,.82);
  stroke-width:.8;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 1px 2px rgba(6,4,0,.88)) drop-shadow(0 0 3px rgba(211,177,105,.28))}
.boat-tag{position:fixed;left:0;top:0;z-index:4;width:184px;box-sizing:border-box;
  pointer-events:none;overflow:hidden;padding:8px 10px 9px 12px;
  border:0;background:none;box-shadow:none;
  font-family:ui-monospace,'SFMono-Regular',Consolas,monospace;color:#cdc8bf;
  filter:none;transition:opacity .35s;will-change:transform,opacity}
.tag-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:13px;row-gap:7px}
.tag-cell{min-width:0;padding:0}
.tag-label{display:block;font-size:6.5px;line-height:1;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(188,180,169,.78);
  text-shadow:0 1px 2px rgba(7,4,0,.98)}
.tag-value{display:block;margin-top:3px;overflow:hidden;white-space:nowrap;
  font-size:10.5px;line-height:1.08;letter-spacing:.03em;font-weight:520;
  font-variant-numeric:tabular-nums;color:rgba(226,186,112,.98);
  text-shadow:0 1px 2px rgba(7,4,0,1),0 0 5px rgba(218,169,86,.24)}
.tag-cell:nth-child(1) .tag-value{font-weight:650}
@media (max-width:640px){
  .boat-tag{width:152px;padding:6px 7px 7px 9px}
  .tag-grid{column-gap:9px;row-gap:5px}
  .tag-label{font-size:5.5px;letter-spacing:.14em}
  .tag-value{font-size:8.75px;margin-top:2px}
  .boat-tag-link path{stroke-width:.8}
  .boat-tag-link .boat-tag-arrowhead{stroke-width:.95}
}
body.hero-passed .boat-tag,body.hero-passed .boat-tag-link{display:none}
#view-controls{display:none}
@media (max-width:640px){
  .hero3d .hero .hero-cta{flex-direction:column;align-items:center;width:100%}
  .hero3d .hero .hero-cta .primary-button,
  .hero3d .hero .hero-cta .secondary-button{width:min(300px,80vw)}
  .hero3d .hero .s{max-width:32ch}
}

/* ===== Passe UI 17/07 : contraste corps de texte + boussole reactive ===== */
/* corps de texte lisible sur fond sombre (remplace le #4d4334 code en dur) */
.prose,.msg-content,.review-card blockquote{color:var(--encre)}
/* Boussole + releve + fleche : un seul mouvement, declenche sur tout le groupe. */
@media (hover:hover) and (min-width:1281px){
  .rose-callout{pointer-events:auto;transition:transform .5s cubic-bezier(.34,1.35,.5,1);
    will-change:transform}
  .rose-callout .frag-rose,.rose-callout .note-actus{pointer-events:none}
  .rose-callout:hover{transform:translateY(-7px) rotate(-1.6deg)}
}
@keyframes rose-callout-sway{
  0%{transform:rotate(0) translateY(0)}
  22%{transform:rotate(-2.3deg) translateY(-10px)}
  50%{transform:rotate(2.1deg) translateY(-4px)}
  76%{transform:rotate(-1deg) translateY(-7px)}
  100%{transform:rotate(-.3deg) translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .rose-callout:hover{transform:translateY(-4px)}
}

/* pastilles / tampons (web, discord, Nouveau) : petit frisson au survol */
@media (hover:hover){
  .msg-meta .src,.badge-new,figcaption .src{transition:transform .28s cubic-bezier(.34,1.5,.5,1)}
  .msg-meta .src:hover,.badge-new:hover,figcaption .src:hover{transform:translateY(-1px) rotate(-3deg) scale(1.06)}
}

/* ===== Tache 1 : micro-vie au survol des avis uniquement ===== */
@media (hover:hover){
  .review-card{transition:transform 240ms cubic-bezier(.22,1,.36,1),
    border-color 240ms ease,box-shadow 240ms ease}
  .review-card:hover{transform:translateY(-3px);
    border-color:var(--marine);box-shadow:0 16px 40px rgba(0,0,0,.4)}
}
/* ===== Tache 2 : hierarchie de lisibilite du chat ===== */
.chat-feed{gap:0}
.msg{padding:14px 0}
.msg+.msg{border-top:1px solid rgba(192,179,160,.10)}
.msg-meta{margin-bottom:4px}
.msg-meta time{opacity:.6}
.msg-content{line-height:1.6}
/* ===== Tache 3 : accents dores centralises via --or + lisibilite pastille web ===== */
:root{--or:#d9b878}
.msg-meta .src.web{color:var(--or);background:rgba(217,184,120,.14)}
.badge-new{color:var(--or)}

/* ===== LaValley : titre hero (ex-Horizon) en blanc ===== */
.hero3d .hero h1{color:#fff;
  text-shadow:0 0 10px rgba(255,255,255,.16),0 0 26px rgba(240,230,215,.10)}

/* ===== Mobile portrait : hero moins haut + contenu qui suit de plus pres ===== */
@media (orientation: portrait) and (max-width: 900px){
  .hero3d{height:82svh}
  .hero3d .hero{transform:translateY(-2vh)}
  .hero-fade{height:58svh}
}

/* ===== Mobile : menu (Se connecter + hamburger) aligne a DROITE ===== */
@media (max-width: 760px){
  .site-nav + .header-cta{margin-left:auto}
}

/* ===== Ressources : membres révélées (connecté) + résumé compact ; bi-ton doré ===== */
.res-item-member .res-link-discord{color:var(--marine);display:inline-flex;align-items:center;gap:5px}
.res-more{display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px 18px;
  border:1px dashed var(--ligne-forte);border-radius:14px;background:rgba(217,184,120,.06);
  color:var(--encre-2);text-decoration:none;font-size:14px;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.res-more:hover{transform:translateY(-2px);border-color:var(--or);background:rgba(217,184,120,.10)}
.res-more .res-more-ic{color:var(--or);display:inline-flex}
.res-more b{color:var(--encre);font-weight:600}
.res-more .res-more-cta{margin-left:auto;color:var(--or);font-weight:600;white-space:nowrap}
.accent-or{color:var(--or)}

/* ===== Passe 17/07 : corps justifié, titres équilibrés, point live visible ===== */
.prose p,.prose li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
h1,h2,.section-head h2,.hero3d .hero .s{text-wrap:balance}
.live-dot-inline{width:9px;height:9px;background:#3fd98a;vertical-align:0;
  box-shadow:0 0 7px rgba(63,217,138,.85),0 0 0 3px rgba(63,217,138,.16)}
@media (prefers-reduced-motion: no-preference){
  .live-dot-inline{animation:live-pulse-bright 2.2s ease-out infinite}
}
@keyframes live-pulse-bright{
  0%{box-shadow:0 0 7px rgba(63,217,138,.85),0 0 0 0 rgba(63,217,138,.5)}
  70%{box-shadow:0 0 7px rgba(63,217,138,.85),0 0 0 9px rgba(63,217,138,0)}
  100%{box-shadow:0 0 7px rgba(63,217,138,.85),0 0 0 0 rgba(63,217,138,0)}
}

/* ===== Footer retravaillé : fond fixe profond, soigné ===== */
.site-footer{margin-top:56px;background:#110e0b;
  border-top:1px solid rgba(192,179,160,.16);padding:44px 0 40px}
.site-footer .in{align-items:flex-start;gap:34px}
.site-footer .in>div:first-child{max-width:44ch;line-height:1.65}
.site-footer nav{gap:12px 22px}
.site-footer::before{height:150px;opacity:.16}
.foot-base{margin-top:26px;padding-top:18px;
  border-top:0;
  color:var(--encre-2);font-size:12.5px;opacity:.85}

/* ===== Justifié élargi à tout le corps de texte (départ + fin de ligne alignés) ===== */
.page-head p,.section-intro,.step-text p,.perk p,.res-item p,.res-cta p,
.nl-banner p,.prose p,.prose li,.reassure,.prose-page p{
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto}

/* ===== Mobile : justifié CONSERVÉ + texte collé au bord (numéro d'étape au-dessus) ===== */
@media (max-width: 700px){
  .wrap{width:calc(100% - 28px)}
  .steps li{padding:16px 16px}
  .steps li::before{position:static;margin:0 0 10px}
  .steps-illustrated .step-text h3{min-height:0}
}

/* ===== Footer = bas de page naturel (fond fondu, pas de bloc noir), grain, plus de trou/bateau ===== */
.site-footer{margin-top:auto;background:#141010;
  border-top:1px solid rgba(192,179,160,.12);padding:40px 0 40px}
.site-footer::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)'/%3E%3C/svg%3E");
  background-size:180px 180px;opacity:.20;mix-blend-mode:overlay}
.site-footer>*{position:relative;z-index:1}

/* ===== Logo officiel : icône dans le header + wordmark en titre de hero ===== */
.brand{display:inline-flex;align-items:center;gap:8px}
.brand-mark{height:32px;width:auto;display:block;flex-shrink:0}
@media (max-width:760px){ .brand-mark{height:29px} }
.hero3d .hero h1.hero-wm{text-shadow:none;line-height:0}
.hero3d .hero h1.hero-wm img{display:block;margin:0 auto;width:min(78vw,430px);height:auto}
/* bas de page : marge de sécurité (barre Safari / home indicator) */
.site-footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}

/* ===== Logo header plus grand + wordmark hero incrusté (ombre) + espacement réduit ===== */
.brand-mark{height:42px}
@media (max-width:760px){ .brand-mark{height:38px} }
.hero3d .hero h1.hero-wm img{
  filter:drop-shadow(0 5px 20px rgba(15,10,3,.55)) drop-shadow(0 2px 5px rgba(15,10,3,.5))}
.hero3d .hero .k{margin-bottom:.2rem}
.hero3d .hero .s{margin-top:.35rem}

/* ===== Bandeau principal LaValley : fond uni + emblème vraiment lisible =====
   Le PNG carré contient une large marge transparente. Le scale agrandit le
   dessin sans gonfler artificiellement la hauteur de la barre. */
.site-header,
.site-header.scrolled,
.site-header.past-hero,
.site-header.nav-open{
  min-height:76px;
  background:#171210;
  border-bottom-color:rgba(192,179,160,.18);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  isolation:isolate;
}
.site-header::before,
.site-header::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.site-header::before{
  background:
    radial-gradient(560px 110px at 18% -35%,rgba(171,135,84,.13),transparent 72%),
    radial-gradient(460px 100px at 82% 0%,rgba(217,184,120,.045),transparent 74%);
}
.site-header::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.09;
  mix-blend-mode:overlay;
}
.site-header>*{position:relative;z-index:1}
.site-header .brand{
  gap:2px;
  font-size:26px;
}
.site-header .brand-mark{
  width:62px;
  height:62px;
  object-fit:contain;
  transform:translateX(-18px) scale(1.55);
  transform-origin:center;
}
@media (max-width:760px){
  .site-header,
  .site-header.scrolled,
  .site-header.past-hero,
  .site-header.nav-open{
    min-height:66px;
    padding-top:4px;
    padding-bottom:4px;
  }
  .site-header .brand{gap:0;font-size:22px}
  .site-header .brand-mark{
    width:50px;
    height:50px;
    transform:translateX(-7px) scale(1.5);
  }
}

/* Inscription. Une seule surface par colonne et un axe commun pour les étapes. */
.auth-grid.auth-grid-register{
  grid-template-columns:minmax(0,1.28fr) minmax(310px,.72fr);
  gap:24px;
  align-items:start;
}

.auth-grid-register .auth-card{
  padding:34px 36px;
  border:1px solid rgba(220,195,159,.26);
  border-radius:12px;
  background:#1e1712;
  box-shadow:none;
}

.auth-grid-register .auth-card::before{
  display:none;
}

.auth-grid-register .account-create-form{
  gap:32px;
}

.account-create-form .auth-form-section{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  column-gap:14px;
  row-gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.account-create-form .auth-section-heading{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:0 0 11px;
}

.account-create-form .auth-section-heading h2{
  display:block;
  margin:0;
  font-size:19px;
  line-height:1.2;
}

.account-create-form .auth-section-heading p{
  max-width:none;
  margin-top:4px;
  font-size:13px;
}

.account-create-form .auth-step{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border:1px solid rgba(225,189,108,.46);
  border-radius:50%;
  font-size:15px;
  line-height:1;
}

.account-create-form .auth-form-section > :where(label,input,textarea,.field-help,.avatar-fieldset){
  grid-column:2;
}

.account-create-form .avatar-fieldset{
  display:grid;
  gap:8px;
  width:100%;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.account-create-form .avatar-preset-grid{
  margin:0 0 16px;
}

.account-create-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  min-width:0;
  margin-left:46px;
}

.auth-grid-register .account-create-actions .account-age-consent{
  width:100%;
  padding:12px 14px;
  border:0;
  border-radius:8px;
  background:rgba(26,18,8,.32);
}

.account-create-actions .primary-button{
  min-width:190px;
}

.account-create-actions .auth-note{
  margin:0;
  padding:0;
  border:0;
}

.account-create-aside{
  align-self:start;
  gap:0;
}

.account-create-aside > .kicker{
  margin-bottom:9px;
}

.account-create-aside > h2{
  margin:0 0 27px;
}

.account-create-aside .account-benefits{
  display:grid;
  gap:24px;
  margin:0;
  padding:0;
  list-style:none;
}

.account-create-aside .account-benefits li{
  display:block;
  margin:0;
  padding:0;
}

.account-create-aside .account-benefits strong{
  display:block;
  color:#eee6d8;
  font-size:15px;
  line-height:1.35;
}

.account-create-aside .account-benefits p{
  margin-top:6px;
  color:#bdb4a7;
  font-size:13.5px;
  line-height:1.55;
}

.account-create-aside .account-security-note{
  margin-top:30px;
  padding:0;
  border-radius:0;
  background:transparent;
}

.account-create-aside .account-security-note p{
  margin-top:9px;
}

@media (max-width:760px){
  .auth-grid.auth-grid-register{
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  .auth-grid-register .auth-card{
    padding:25px 22px;
    border-radius:10px;
  }

  .auth-grid-register .account-create-form{
    gap:28px;
  }

  .account-create-form .auth-form-section,
  .account-create-form .auth-section-heading{
    grid-template-columns:28px minmax(0,1fr);
    column-gap:10px;
  }

  .account-create-form .auth-step{
    width:27px;
    height:27px;
    font-size:14px;
  }

  .account-create-actions{
    margin-left:38px;
  }

  .account-create-actions .primary-button{
    width:100%;
    min-width:0;
  }
}
/* ===== CALQUE TITRE MASSIF v2 (Claude 17/07) — wordmark hero : plus GROS, centrage optique,
   nappe ombre+lueur derrière le titre, « ai » plus lumineux, bloom étoile.
   Append-only ; zones Codex (.brand-mark, .site-header) intactes.
   NB : les glyphes « LaValley » sont au centre ~45 % du PNG (l'étoile occupe la droite),
   d'où le translateX pour centrer optiquement le texte. */
.hero3d .hero h1.hero-wm{
  position:relative;width:fit-content;margin-inline:auto;
  margin-top:clamp(-8px,-.5vw,-5px);
  margin-bottom:clamp(-22px,-1.4vw,-12px);
  transform:translateX(2.8%);
}
.hero3d .hero h1.hero-wm img{
  width:min(86vw,560px);
  filter:
    drop-shadow(0 2px 3px rgba(12,8,3,.64))
    drop-shadow(0 6px 13px rgba(12,8,3,.50))
    drop-shadow(0 17px 38px rgba(10,7,2,.40))
    drop-shadow(0 32px 72px rgba(10,7,2,.28))
    drop-shadow(0 0 24px rgba(255,243,218,.16));
}
.hero3d .hero .hero-star-rays{
  position:absolute;left:86.6%;top:26.5%;z-index:3;
  width:clamp(62px,8vw,92px);aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(ellipse 50% 1.25% at 50% 50%,rgba(255,239,198,.82),rgba(255,211,129,.34) 38%,rgba(255,201,108,0) 78%),
    radial-gradient(ellipse 1.25% 50% at 50% 50%,rgba(255,239,198,.78),rgba(255,211,129,.31) 38%,rgba(255,201,108,0) 78%),
    linear-gradient(45deg,transparent 46.8%,rgba(255,213,135,.18) 48.7%,rgba(255,239,198,.42) 50%,rgba(255,213,135,.18) 51.3%,transparent 53.2%) center/42% 42% no-repeat,
    linear-gradient(-45deg,transparent 46.8%,rgba(255,213,135,.16) 48.7%,rgba(255,239,198,.38) 50%,rgba(255,213,135,.16) 51.3%,transparent 53.2%) center/42% 42% no-repeat;
  opacity:.72;mix-blend-mode:screen;
  filter:drop-shadow(0 0 5px rgba(255,202,111,.24));
}
/* derrière le titre : nappe d'ombre profonde qui assoit le wordmark sur la mer
   + bloom externe doré de l'étoile. inset -22 % => coordonnées recalées :
   centre img (50/52) -> (50/52) ; étoile (86.5/26) -> (75.3/33.3). */
.hero3d .hero h1.hero-wm::before{
  content:"";position:absolute;inset:-22%;pointer-events:none;z-index:-1;
  background:
    radial-gradient(48% 60% at 50% 52%, rgba(11,8,2,.55), rgba(11,8,2,0) 72%),
    radial-gradient(34% 44% at 50% 52%, rgba(255,240,214,.10), rgba(255,240,214,0) 70%),
    radial-gradient(7% 13% at 75.3% 33.3%, rgba(255,201,118,.12), rgba(255,201,118,0) 72%);
}
/* lueur DANS les lettres (masquée par le wordmark) : « ai » bleu renforcé (halo + cœur),
   or sur l'étoile + écho sur la traînée ; respire doucement si motion autorisée */
.hero3d .hero h1.hero-wm::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(/static/img/wordmark-lavalley.png) center/contain no-repeat;
  mask:url(/static/img/wordmark-lavalley.png) center/contain no-repeat;
  background:
    radial-gradient(44% 78% at 53.5% 52%, rgba(245,208,152,.80), rgba(245,208,152,0) 74%),
    radial-gradient(18% 34% at 53.5% 52%, rgba(255,231,196,.58), rgba(255,231,196,0) 70%),
    radial-gradient(13% 26% at 86.5% 26%, rgba(255,205,120,.40), rgba(255,205,120,0) 75%),
    radial-gradient(9% 19% at 84% 48%, rgba(255,205,120,.14), rgba(255,205,120,0) 75%);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion: no-preference){
  .hero3d .hero h1.hero-wm::after{animation:wm-glow-breathe 5.2s ease-in-out infinite}
  @keyframes wm-glow-breathe{0%,100%{opacity:.82}50%{opacity:1}}
  .hero3d .hero .hero-star-rays{animation:hero-star-shimmer 4.6s ease-in-out infinite}
  @keyframes hero-star-shimmer{
    0%,100%{opacity:.62;transform:translate(-50%,-50%) scale(.94)}
    48%{opacity:.86;transform:translate(-50%,-50%) scale(1.05)}
  }
}

/* raccord HAUT du hero (Claude 17/07) : fondu d ombre sous le bandeau solide du header,
   meme esprit que .hero-fade en bas — supprime la couture nette bandeau -> mer 3D */
.hero3d::after{content:"";position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  height:clamp(200px,32svh,340px);
  background:linear-gradient(180deg,
    #171210 0%,rgba(26,19,9,.94) 5%,rgba(26,19,9,.90) 10%,rgba(26,19,9,.78) 15%,
    rgba(26,19,9,.52) 30%,rgba(26,19,9,.28) 48%,
    rgba(26,19,9,.10) 70%,rgba(26,19,9,0) 100%)}

/* bandeau header sans liseré bas (Claude 17/07, demande user) : la border 1px cassait
   le fondu bandeau -> mer du hero. L ombre portee du bandeau (calque Codex) est conservee. */
.site-header,.site-header.scrolled,.site-header.past-hero,.site-header.nav-open{
  border-bottom-color:transparent}

/* home uniquement : pas d ombre portee du bandeau au-dessus du hero (elle creait une
   bande sombre mesurable rgb 8,20,28 sous le header, cassant le fondu). L ombre Codex
   revient des que le header passe en .past-hero (defilement dans le contenu). */
body:has(.hero3d) .site-header:not(.past-hero){box-shadow:none}

/* ===== ANCRE UNICORN LIVE : canvas de securite 1680x1200 =====
   La reserve autour du plan Unicorn absorbe le parallax X/Y sans recadrage.
   Le fond reste transparent pour laisser vivre l atmosphere de la page. */
.lavalley-unicorn-scene{
  position:relative;z-index:2;width:100%;height:576px;
  margin:0 auto;overflow:hidden;background:transparent}
.lavalley-unicorn-native{
  position:absolute;left:0;top:0;z-index:1;width:1680px;height:1200px;
  transform:scale(var(--unicorn-scale,1));transform-origin:0 0}
.lavalley-unicorn-native>[data-us-project]{width:1680px;height:1200px}
.lavalley-unicorn-native>[data-us-project]>canvas{
  filter:drop-shadow(3px 12px 14px rgba(8,5,1,.78))
         drop-shadow(10px 42px 44px rgba(8,5,1,.60))
         drop-shadow(16px 82px 90px rgba(8,5,1,.38))
         drop-shadow(0 0 30px rgba(211,180,109,.09))!important}
.lavalley-unicorn-native [data-us-text]{
  text-shadow:none;
  filter:drop-shadow(2px 10px 12px rgba(8,5,1,.76))
         drop-shadow(8px 34px 38px rgba(8,5,1,.52))
         drop-shadow(0 0 26px rgba(211,180,109,.10))}
.lavalley-unicorn-fallback{
  position:absolute;left:50%;top:4%;z-index:0;display:block;
  width:auto;height:75%;max-width:70%;transform:translateX(-50%);
  filter:drop-shadow(0 18px 40px rgba(10,7,2,.45));
  opacity:1;transition:opacity .25s ease}
.lavalley-unicorn-scene.unicorn-ready .lavalley-unicorn-fallback{opacity:0}
@media (prefers-reduced-motion:reduce){.lavalley-unicorn-native{display:none}}

/* ===== Nappes lumineuses globales : retour au bleu profond =====
   Le grain porte maintenant le fond. Les nappes ne sont plus que des accents :
   la bleue subsiste, le vert recule et les masses chaude/grise s'effacent. */
.atmos>.blob.b1,
.atmos-home>.blob.b1{opacity:.20}
.atmos>.blob.b2,
.atmos-home>.blob.b2{opacity:.10}
.atmos>.blob.b3,
.atmos-home>.blob.b3{opacity:.045}
.atmos>.blob.b4,
.atmos-home>.blob.b4{opacity:.06}

/* ===== CALQUE PLEINES LIGNES DESKTOP (Claude 17/07, demande user) — sur PC les
   paragraphes justifies vont au bout de la ligne ; mobile inchange (viewport = limite).
   Le justifie (calque "Justifie elargi") continue de s appliquer. */
@media (min-width:761px){
  .page-head p{max-width:none}
  .section-intro{max-width:none}
  .nl-banner p{max-width:none}
  .site-footer .in>div:first-child{max-width:none}
  .prose-page{max-width:960px}
}

/* ============================================================================
   CALQUE "DA SOMBRE UNIFORME + COULEURS QUI RESSORTENT" (Claude 17/07, demande user)
   ========================================================================== */
.atmos>.blob.b1,.atmos-home>.blob.b1{opacity:.05}
.atmos>.blob.b2,.atmos-home>.blob.b2{opacity:.018}
.atmos>.blob.b3,.atmos-home>.blob.b3{opacity:.01}
.atmos>.blob.b4,.atmos-home>.blob.b4{opacity:.01}
.lavalley-unicorn-native>[data-us-project]>canvas{
  filter:
    drop-shadow(0 7px 11px rgba(8,5,1,.74))
    drop-shadow(0 20px 30px rgba(8,5,1,.52))
    drop-shadow(0 46px 72px rgba(8,4,1,.34))!important}
:root{--vague:#79c6a6}
.chat-note b{color:var(--vague);font-weight:600}
.chat-note a{color:var(--marine);text-decoration:underline;text-underline-offset:2px}
.badge.published{background:rgba(121,198,166,.16);color:#8fd8b6}
.badge.draft{background:rgba(217,184,120,.20);color:#e7c47c}
@media (min-width:761px){ .nl-consent{max-width:none} }

/* ===== CALQUE ÉTOILE v2 (Claude 17/07, demande user) — remplace les 4 rayons en
   gradients de Codex (H/V radiaux + diagonaux linéaires = pointes désalignées) par UN
   seul SVG de rayons, parfaitement symétrique, plus brillant, aligné sur l'étoile du PNG.
   « logique des traits » conservée (rayons fins), mais géométrie exacte. Override
   append-only du bloc Codex : mêmes propriétés de position, seul le dessin change. */
.hero3d .hero .hero-star-rays{
  left:87.1%;top:28.3%;
  width:clamp(70px,9vw,104px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='50' y1='2' x2='50' y2='98' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffd98f'/%3E%3Cstop offset='.5' stop-color='%23fff7e6'/%3E%3Cstop offset='1' stop-color='%23ffcf81'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='2' y1='50' x2='98' y2='50' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffcf81'/%3E%3Cstop offset='.5' stop-color='%23fff7e6'/%3E%3Cstop offset='1' stop-color='%23ffd98f'/%3E%3C/linearGradient%3E%3CradialGradient id='c'%3E%3Cstop offset='0' stop-color='%23fffdf8'/%3E%3Cstop offset='.55' stop-color='%23fff2d4' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffe6b8' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='15' fill='url(%23c)'/%3E%3Cpath d='M50 13 L52.6 47.4 L87 50 L52.6 52.6 L50 87 L47.4 52.6 L13 50 L47.4 47.4 Z' fill='url(%23v)'/%3E%3Cpath d='M50 24 L51.4 48.6 L76 50 L51.4 51.4 L50 76 L48.6 51.4 L24 50 L48.6 48.6 Z' fill='url(%23h)' opacity='.5' transform='rotate(45 50 50)'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.9;mix-blend-mode:screen;
  filter:drop-shadow(0 0 4px rgba(255,232,180,.55)) drop-shadow(0 0 12px rgba(255,201,111,.34));
}
@media (prefers-reduced-motion: no-preference){
  .hero3d .hero .hero-star-rays{animation:hero-star-shimmer2 4.6s ease-in-out infinite}
  @keyframes hero-star-shimmer2{
    0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.96) rotate(0deg)}
    50%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(0deg)}
  }
}

/* ============================================================================
   Passe editoriale — 20/07/2026
   Composants plus sobres, filtres utiles et lecture longue structuree.
   ========================================================================== */

/* Les cartes publiques restent cliquables sans effet de levitation ni zoom. */
.article-card,
.perk,
.review-card,
.res-item,
.edition-row,
.res-more,
.tweet-card,
.res-cta{
  border-radius:6px;
}

.article-card,
.article-card .cover,
.perk,
.review-card,
.res-item,
.edition-row,
.res-more{
  transition:none!important;
  will-change:auto!important;
}

.article-card,
.edition-row{
  box-shadow:none;
}

.article-card:hover,
.review-card:hover,
a.res-item:hover,
.edition-row:hover,
.res-more:hover{
  transform:none!important;
  box-shadow:none!important;
}

.article-card:hover{
  border-color:rgba(217,184,120,.58);
  color:inherit;
}

.article-card .cover,
.article-card:hover .cover{
  transform:none!important;
  filter:none!important;
}

.review-card:hover,
a.res-item:hover,
.edition-row:hover,
.res-more:hover{
  border-color:rgba(192,179,160,.48);
  color:inherit;
}

.primary-button,
.secondary-button,
.mini-button{
  border-radius:5px;
}

.primary-button:hover,
.secondary-button:hover,
.primary-button:active,
.secondary-button:active{
  transform:none;
  box-shadow:none;
}

.nl-form input[type=email],
.tool-query-row input{
  border-radius:5px;
}

/* Newsletter : mots concrets, une seule separation et reperes typographiques. */
.nl-hero-points li{
  grid-template-columns:132px minmax(0,1fr);
  gap:18px;
  padding:11px 0;
}

.nl-editorial .section-head{
  margin-bottom:0;
}

.nl-briefing{
  border-top:0;
}

.nl-briefing li{
  grid-template-columns:52px minmax(0,1fr);
  gap:17px;
  padding:27px 28px 28px 0;
}

.nl-briefing-index{
  display:block;
  color:#dfc27f;
  font-family:var(--display);
  font-size:32px;
  font-weight:720;
  line-height:.9;
  letter-spacing:-.05em;
}

.nl-free-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:30px;
  padding:24px 0;
  border-bottom:1px solid rgba(192,179,160,.20);
}

.nl-free-cta strong{
  display:block;
  margin-top:6px;
  color:#eee6d8;
  font-size:18px;
  line-height:1.35;
}

.nl-free-cta p{
  max-width:74ch;
  margin-top:6px;
  color:#b5ac9e;
  font-size:13.5px;
  line-height:1.55;
  text-align:left!important;
}

.nl-free-cta .secondary-button{
  white-space:nowrap;
}

/* Bibliotheque : navigation editoriale et filtres multichoix. */
.res-sidebar a{
  padding:9px 12px;
  border-left:2px solid transparent;
  border-radius:3px;
  transition:none;
}

.res-sidebar a:hover{
  background:rgba(192,179,160,.08);
}

.res-sidebar a.active{
  border-left-color:currentColor;
  background:rgba(107,80,39,.12);
}

.res-sidebar .ico-tools,
.res-cat#outils .section-head .ico-tools{
  color:#e2c59c;
}

.res-sidebar .ico-certificate,
.res-cat#certifications .section-head .ico-certificate{
  color:#dfc27f;
}

.resource-filters{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 15px;
  padding:13px 0;
  border-top:1px solid rgba(192,179,160,.15);
  border-bottom:1px solid rgba(192,179,160,.15);
}

.resource-filters-label{
  margin-right:7px;
  color:#9d9180;
  font-size:11px;
  font-weight:720;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.resource-filters button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:5px 10px;
  border:1px solid rgba(192,179,160,.24);
  border-radius:3px;
  background:transparent;
  color:#aba090;
  font:600 12px/1.2 var(--sans);
  cursor:pointer;
}

.resource-filters button span{
  color:#8d7f6a;
  font-size:10px;
}

.resource-filters button[aria-pressed="true"]{
  border-color:rgba(217,184,120,.52);
  background:rgba(217,184,120,.09);
  color:#eee6d8;
}

.resource-filters button[aria-pressed="true"] span{
  color:#dfc27f;
}

.resource-filters button:focus-visible{
  outline:2px solid #e5cdaa;
  outline-offset:2px;
}

.resource-filter-status{
  min-height:18px;
  margin-top:9px;
  color:#908472;
  font-size:11.5px;
  text-align:left!important;
}

.res-item p{
  text-align:left!important;
  text-justify:auto!important;
  hyphens:none!important;
}

/* Articles et editions : sommaire lateral, medias contenus et sections marquees. */
.prose-page{
  max-width:1180px;
}

.article-head{
  max-width:820px;
}

.article-head h1{
  max-width:22ch;
  font-size:clamp(37px,4.6vw,54px);
}

.edition-head .kicker{
  display:block;
  margin-bottom:16px;
}

.article-cover-frame{
  max-width:820px;
  margin-top:31px;
}

.article-cover-frame .prose-cover{
  max-height:460px;
  border-radius:4px;
  box-shadow:none;
}

.reading-shell{
  display:grid;
  grid-template-columns:190px minmax(0,760px);
  justify-content:center;
  align-items:start;
  gap:54px;
  max-width:1040px;
  margin:48px auto 0;
}

.reading-shell>.prose{
  width:100%;
  max-width:760px;
  margin:0;
}

.article-toc-inner{
  position:sticky;
  top:100px;
  padding:16px 0 14px;
  border-top:2px solid var(--or);
  border-bottom:1px solid rgba(192,179,160,.18);
}

.article-toc-kicker{
  display:block;
  margin-bottom:11px;
  color:#dfc27f;
  font-size:10.5px;
  font-weight:760;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.article-toc nav{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.article-toc nav a{
  display:block;
  padding:7px 8px 7px 10px;
  border-left:1px solid rgba(192,179,160,.18);
  color:#ada190;
  font-size:12px;
  line-height:1.42;
  text-decoration:none;
}

.article-toc nav a.toc-level-3{
  padding-left:20px;
  font-size:11.5px;
}

.article-toc nav a:hover,
.article-toc nav a.active{
  border-left-color:var(--or);
  color:#eee6d8;
}

.article-toc-source{
  display:block;
  margin-top:13px;
  color:#e5cdaa;
  font-size:11.5px;
  text-decoration:none;
}

.article-toc[hidden]+.prose{
  grid-column:1/-1;
  margin-inline:auto;
}

.reading-body{
  counter-reset:reading-section;
}

.prose-page .reading-body h2{
  position:relative;
  counter-increment:reading-section;
  margin-top:2.35em;
  padding-top:22px;
  border-top:1px solid rgba(192,179,160,.20);
  scroll-margin-top:105px;
}

.prose-page .reading-body h2::before{
  content:"0" counter(reading-section);
  display:block;
  margin-bottom:9px;
  color:#d8bb78;
  font:720 11px/1 var(--mono);
  letter-spacing:.12em;
}

.prose-page .reading-body h3{
  scroll-margin-top:105px;
}

.prose-page .reading-body :is(video,iframe){
  display:block;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  margin:2em 0;
  border:1px solid rgba(192,179,160,.22);
  border-radius:4px;
  background:#110e0b;
}

.prose-page .reading-body figure:not(.tweet-card){
  margin:2em 0;
}

.prose-page .reading-body figure:not(.tweet-card) img,
.prose-page .reading-body>img,
.prose-page .reading-body>p>img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
  border-radius:4px;
}

.prose-page .reading-body figure:not(.tweet-card) figcaption{
  margin-top:8px;
  color:#9c9181;
  font-size:12px;
  line-height:1.45;
}

/* Un tweet dans une edition n'est pas une image de couverture. */
.prose-page .reading-body .tweet-card{
  max-width:640px;
  margin:1.8em auto;
  padding:18px 20px;
  border-radius:5px;
  box-shadow:none;
}

.prose-page .reading-body .tweet-card .tw-av{
  display:block;
  flex:0 0 42px;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  border-radius:50%!important;
  object-fit:cover;
}

.prose-page .reading-body .tweet-card blockquote{
  margin:14px 0 0;
  padding:0;
  border:0;
  color:#d9dfdc;
  font-size:15.5px;
  font-weight:500;
  line-height:1.65;
}

.prose-page .reading-body .tweet-card figcaption{
  margin-top:13px;
}

/* Le direct explique son usage avant le flux. */
.direct-purpose{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:32px 58px;
  margin-top:18px;
  padding-top:30px;
  padding-bottom:30px;
  border-top:1px solid rgba(192,179,160,.18);
  border-bottom:1px solid rgba(192,179,160,.18);
}

.direct-purpose-head h2{
  margin-top:10px;
  color:#eee6d8;
  font-size:clamp(25px,2.6vw,35px);
  line-height:1.16;
}

.direct-purpose-head p{
  margin-top:13px;
  color:#b5ac9e;
  font-size:14.5px;
  line-height:1.68;
  text-align:left!important;
}

.direct-use-list{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(192,179,160,.17);
}

.direct-use-list li{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:13px;
  padding:14px 0;
  border-bottom:1px solid rgba(192,179,160,.14);
}

.direct-use-list li>span{
  color:#d8bb78;
  font:720 22px/1 var(--display);
}

.direct-use-list b{
  color:#e9e2d4;
  font-size:14.5px;
}

.direct-use-list p{
  margin-top:4px;
  color:#aba090;
  font-size:13px;
  line-height:1.5;
  text-align:left!important;
}

.direct-sync-note{
  grid-column:1/-1;
  margin:0;
  padding:13px 0 0;
  border-top:1px dashed rgba(217,184,120,.30);
  color:#b5ac9e;
  font-size:13px;
  line-height:1.55;
  text-align:left!important;
}

.direct-sync-note b{
  color:#dfc27f;
}

@media (max-width:1050px){
  .reading-shell{
    grid-template-columns:minmax(0,760px);
    gap:28px;
  }

  .article-toc-inner{
    position:static;
  }

  .article-toc nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px 18px;
  }
}

@media (max-width:900px){
  .direct-purpose{
    grid-template-columns:1fr;
    gap:25px;
  }
}

@media (max-width:700px){
  .nl-hero-points li{
    grid-template-columns:1fr;
    gap:4px;
  }

  .nl-editorial .section-head{
    padding-bottom:14px;
  }

  .nl-briefing li,
  .nl-briefing li+li{
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
    padding:20px 0;
  }

  .nl-briefing-index{
    font-size:26px;
  }

  .nl-free-cta{
    grid-template-columns:1fr;
    gap:18px;
  }

  .nl-free-cta .secondary-button{
    width:100%;
  }

  .resource-filters{
    align-items:stretch;
  }

  .resource-filters-label{
    width:100%;
    margin-bottom:2px;
  }

  .resource-filters button{
    flex:1 1 auto;
    justify-content:center;
  }

  .article-head h1{
    font-size:clamp(33px,10vw,44px);
  }

  .article-cover-frame{
    margin-top:24px;
  }

  .reading-shell{
    gap:24px;
    margin-top:31px;
  }

  .article-toc nav{
    grid-template-columns:1fr;
  }

  .prose-page .reading-body h2{
    padding-top:18px;
  }

  .prose-page .reading-body .tweet-card{
    margin:1.5em 0;
    padding:16px;
  }
}

/* Compte membre. Les choix sont visuels, stables et sans animation décorative. */
.auth-page-head{
  max-width:760px;
}

.auth-page-head p{
  max-width:68ch;
}

.account-create-form{
  gap:22px;
}

.auth-grid-register .auth-card{
  background:#1e1712;
}

.auth-form-section{
  display:grid;
  gap:8px;
  padding:20px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.055);
}

.auth-section-heading{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin:0 0 7px;
  padding:0;
  border:0;
}

.auth-section-heading h2,
.auth-section-heading strong{
  display:block;
  color:#eee6d8;
  font-family:var(--display);
  font-size:18px;
  font-weight:680;
  line-height:1.25;
}

.auth-section-heading p,
.auth-section-heading small{
  display:block;
  margin-top:3px;
  color:#aea394;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:450;
  line-height:1.45;
}

.auth-step{
  flex:0 0 auto;
  color:#e1bd6c;
  font-family:var(--display);
  font-size:22px;
  font-weight:720;
  line-height:1.05;
}

.auth-form textarea{
  width:100%;
  min-height:108px;
  padding:12px 14px;
  border:1px solid rgba(220,195,159,.30);
  border-radius:10px;
  background:rgba(34,24,13,.72);
  color:var(--encre);
  font:400 14.5px/1.55 var(--sans);
  outline:none;
  resize:vertical;
}

.auth-form textarea:focus{
  border-color:var(--marine);
  box-shadow:0 0 0 3px rgba(107,80,39,.12);
}

.field-help,
.profile-form-footer small{
  color:#9f9484;
  font-size:11.5px;
  line-height:1.45;
}

.avatar-fieldset{
  min-width:0;
  margin:0;
  padding:20px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.055);
}

.avatar-preset-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(58px,1fr));
  gap:8px;
  margin:7px 0 17px;
}

.avatar-preset-option{
  display:block!important;
  min-width:0;
  cursor:pointer;
}

.avatar-preset-option input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.avatar-preset-visual{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:6px;
  padding:7px 4px 6px;
  border:1px solid transparent;
  border-radius:8px;
  background:rgba(26,18,8,.28);
  color:#aa9f90;
  font-size:11px;
  font-weight:560;
  line-height:1.2;
  text-align:center;
  transition:none;
}

.avatar-preset-visual img{
  display:block;
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
}

.avatar-preset-option input:checked + .avatar-preset-visual{
  border-color:rgba(225,189,108,.72);
  background:rgba(217,184,120,.09);
  color:#eee5d5;
}

.avatar-preset-option input:focus-visible + .avatar-preset-visual{
  outline:2px solid #dcc39f;
  outline-offset:2px;
}

.account-age-consent{
  margin:0;
}

.honeypot-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
}

.account-create-aside{
  align-self:start;
}

.account-benefits{
  display:grid;
  gap:22px;
  margin:3px 0 0;
  padding:0;
  list-style:none;
}

.account-benefits li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:12px;
}

.account-benefits li>span{
  color:#e1bd6c;
  font-family:var(--display);
  font-size:23px;
  font-weight:720;
  line-height:1;
}

.account-benefits strong{
  color:#e9e2d6;
  font-size:15px;
}

.account-benefits p{
  margin-top:5px;
  color:#bcb3a6;
  font-size:13.5px;
  line-height:1.6;
}

.account-security-note{
  margin-top:5px;
  padding:18px;
  border-radius:9px;
  background:rgba(121,198,166,.065);
}

.account-security-note h3{
  display:flex;
  align-items:center;
  gap:8px;
  color:#dce8e2;
  font-size:15px;
}

.account-security-note p{
  margin-top:10px;
  color:#b9b3aa;
  font-size:13px;
  line-height:1.6;
}

.account-security-note a{
  display:inline-block;
  margin-top:12px;
  color:#acd6c5;
  font-size:12.5px;
  font-weight:630;
}

/* Profil et paramètres. */
.profile-col{
  max-width:1120px;
  padding-bottom:55px;
}

.profile-page-head{
  max-width:760px;
  padding-bottom:23px;
}

.profile-feedback{
  margin:0 0 18px;
  padding:12px 15px;
  border-radius:8px;
  font-size:13.5px;
}

.profile-feedback-ok{
  background:rgba(121,198,166,.10);
  color:#b7dfcf;
}

.profile-feedback-error{
  background:rgba(202,104,91,.11);
  color:#efb5ad;
}

.profile-overview{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:26px 28px;
  border-radius:10px;
  background:#262019;
}

.profile-overview>img{
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
}

.profile-account-type{
  color:#d8c69d;
  font-size:12px;
  font-weight:650;
}

.profile-overview h2{
  margin-top:5px;
  color:#f0e8d9;
  font-size:28px;
}

.profile-overview p{
  max-width:66ch;
  margin-top:7px;
  color:#c8c1b7;
  font-size:14px;
  line-height:1.6;
}

.profile-overview small{
  display:block;
  margin-top:7px;
  color:#9e9282;
  font-size:11.5px;
}

.profile-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:16px;
}

.profile-panel{
  min-width:0;
  padding:25px 26px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.055);
  box-shadow:none;
  transform:none;
  transition:none;
}

.profile-panel-heading{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:13px;
  align-items:start;
  margin-bottom:20px;
}

.profile-panel-icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  color:#e6cdaa;
}

.profile-panel-heading h2{
  color:#eee6d8;
  font-size:19px;
}

.profile-panel-heading p{
  margin-top:4px;
  color:#aba090;
  font-size:12.5px;
  line-height:1.45;
}

.profile-form{
  gap:9px;
}

.profile-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:4px;
}

.profile-form-footer button{
  flex:0 0 auto;
}

.profile-avatar-fieldset{
  padding:0;
  background:transparent;
}

.profile-avatar-fieldset legend{
  color:#e6ded1;
  font-size:13.5px;
  font-weight:600;
}

.profile-avatar-fieldset .avatar-preset-grid{
  grid-template-columns:repeat(7,minmax(46px,1fr));
}

.profile-avatar-fieldset .avatar-preset-visual img{
  width:40px;
  height:40px;
}

.profile-access-panel{
  grid-column:1 / -1;
}

.account-private-data{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
}

.account-private-data>div{
  padding:15px 17px;
  border-radius:8px;
  background:rgba(26,18,8,.33);
}

.account-private-data dt{
  color:#9f9383;
  font-size:11.5px;
  font-weight:600;
}

.account-private-data dd{
  margin-top:5px;
  color:#e3ded3;
  font-size:14px;
  overflow-wrap:anywhere;
}

.password-change-form{
  margin-top:23px;
  padding-top:0;
}

.password-change-form h3{
  color:#dcd5ca;
  font-size:16px;
}

.password-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.password-fields>div{
  display:grid;
  gap:7px;
}

.profile-provider-note,
.profile-newsletter-panel>p{
  color:#bcb3a6;
  font-size:14px;
  line-height:1.6;
}

.profile-inline-actions{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:16px;
}

.profile-newsletter-panel>a,
.profile-session-panel>a{
  margin-top:16px;
}

.text-button{
  padding:8px 0;
  border:0;
  background:transparent;
  color:#d0bca0;
  font:600 13px var(--sans);
  cursor:pointer;
}

/* Newsletter. Une session est nécessaire avant de demander l'adresse de réception. */
.nl-email-field{
  display:flex;
  min-width:min(100%,260px);
  flex:1 1 260px;
  flex-direction:column;
  gap:6px;
  color:#d3cec7;
  font-size:12px;
  font-weight:600;
}

.nl-row{
  align-items:flex-end;
}

.nl-auth-gate{
  display:grid;
  gap:15px;
  padding:17px 18px;
  border-radius:8px;
  background:rgba(26,18,8,.30);
}

.nl-auth-gate p{
  color:#c3bbb0;
  font-size:13.5px;
  line-height:1.58;
}

.nl-auth-gate .primary-button{
  justify-self:start;
}

@media (max-width:900px){
  .profile-settings-grid{
    grid-template-columns:1fr;
  }

  .profile-access-panel{
    grid-column:auto;
  }

  .password-fields{
    grid-template-columns:1fr;
  }
}

@media (max-width:700px){
  .auth-form-section,
  .avatar-fieldset,
  .profile-panel{
    padding:19px 17px;
  }

  .avatar-preset-grid,
  .profile-avatar-fieldset .avatar-preset-grid{
    grid-template-columns:repeat(4,minmax(52px,1fr));
  }

  .profile-overview{
    grid-template-columns:70px minmax(0,1fr);
    gap:16px;
    padding:22px 19px;
  }

  .profile-overview>img{
    width:70px;
    height:70px;
  }

  .profile-overview h2{
    font-size:24px;
  }

  .profile-settings-grid{
    gap:12px;
  }

  .account-private-data{
    grid-template-columns:1fr;
  }

  .profile-form-footer,
  .profile-inline-actions{
    align-items:stretch;
    flex-direction:column;
  }

  .profile-form-footer button,
  .profile-inline-actions .secondary-button{
    width:100%;
  }
}

/* ===== TITRE HERO TEXTE VIVANT (Claude 18/07, demande user) ==========================
   Remplace le wordmark PNG + paillette + glow par du TEXTE Geist net, raccord avec la
   typo du reste du site. Motif : le hero « glossy magique » (étoile ✦, « ai » bleu écran,
   halo) jurait avec la DA gravure/carnet et faisait daté/pas-pro. Le signe de modernité,
   c'est la mer 3D animée derrière — le titre doit juste être net et confiant.
   Append-only. Le markup n'a plus d'<img> ni de .hero-star-rays => les calques image/étoile
   précédents sont inertes ; ici on cible .hero-type et on reset ce qui restait sur h1. */
.hero3d .hero h1.hero-wm.hero-type{
  font-family:var(--display);
  font-weight:830;
  letter-spacing:-.04em;
  line-height:.9;
  font-size:clamp(3.9rem,14vw,11.5rem);
  color:#f4ede0;                                   /* ivoire mat, pas de blanc pur */
  width:auto;margin-inline:auto;
  margin-top:.35rem;margin-bottom:.25rem;
  transform:none;
  /* pas de glow : juste une ombre SOMBRE serrée pour asseoir le titre sur la mer (matière) */
  text-shadow:0 1px 2px rgba(12,8,3,.55),0 4px 22px rgba(10,7,2,.45);
}
/* on coupe les pseudo-éléments (nappe/bloom + masque PNG) des anciens calques */
.hero3d .hero h1.hero-wm.hero-type::before,
.hero3d .hero h1.hero-wm.hero-type::after{content:none;background:none;-webkit-mask:none;mask:none}
/* accent « ai » : vert d'eau maritime discret, PAS de bleu écran */
.hero3d .hero h1.hero-wm.hero-type .wm-ai{
  color:var(--wm-bleu);   /* bleu marine profond partage (var --wm-bleu) */
  font-weight:830;
}
/* kicker desature (retour user : #e6c98a candy = enfantin) + boutons plus proches */
.hero3d .hero .k{color:#c4b696;font-weight:600;letter-spacing:.26em;
  font-size:clamp(12px,.95vw,14px);opacity:.82;margin-bottom:.5rem}
.hero3d .hero .hero-cta{margin-top:18px}

/* ===== ACCENT « ai » BLEU MARINE PROFOND — variable partagee (Claude 18/07, retour user) =====
   Une seule source de verite pour l'accent : hero « ai », logo header « ai », et mots
   accentues des titres de section (.accent-text = « actualites »/« newsletter »/etc). */
:root{--wm-bleu:#C2492E}  /* le point cardinal du wordmark */
.wm-ai{color:var(--wm-bleu)}          /* header + hero */
.accent-text{color:var(--wm-bleu)}    /* titres de section : meme bleu fonce */

/* fix (18/07, retour user) : liens « Toutes les … » des section-head passaient en
   var(--marine)=#dcc39f (bleu clair) qui jurait avec le nouvel accent fonce.
   -> sable neutre (meme ton que le kicker) : lien « meta » discret, le bleu ne sert
   plus qu'a l'accent. hover corrige (l'ancien hover --marine-2 partait en tres sombre). */
.section-head a{color:#c4b696}
.section-head a:hover{color:#ded3b8;text-decoration:underline;text-underline-offset:3px}

/* ===== Lisibilite newsletter + cartes de certifications (18/07) =====
   La note de confidentialite respire davantage sous le consentement. Les
   etiquettes de niveau gagnent un vrai contraste et une couleur semantique. */
.nl-hero-form + .reassure{
  margin-top:26px!important;
  line-height:1.65;
}
.nl-form > .nl-row + .nl-consent{
  margin-top:12px;
}
.newsletter-head + .nl-value{
  padding-top:12px;
}
.nl-hero-form + .reassure .ico{
  margin:0 7px 0 0;
  vertical-align:-3px;
  color:var(--vague);
}

.res-item{
  border-color:rgba(220,195,159,.22);
  background:linear-gradient(145deg,rgba(45,34,22,.98),rgba(39,29,18,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.res-item p{color:#c8c0b5}
.res-link,.res-item-member .res-link-discord{color:#e5cdaa}
.res-head{align-items:flex-start}
.res-head h3{flex:1;min-width:0}
.res-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:22px;
  margin-left:auto;
  padding:3px 10px;
  border:1px solid rgba(220,195,159,.30);
  background:rgba(180,143,89,.15);
  color:#efdfc7;
  font-size:11px;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
#certifications .res-tag[data-tag^="Débutant"]{
  border-color:rgba(121,198,166,.34);
  background:rgba(74,151,123,.17);
  color:#a8dfc7;
}
#certifications .res-tag[data-tag="Pratique"],
#certifications .res-tag[data-tag="Cloud"]{
  border-color:rgba(220,182,128,.36);
  background:rgba(177,135,74,.18);
  color:#efd9b9;
}
#certifications .res-tag[data-tag="Avancé"],
#certifications .res-tag[data-tag="Certification pro"],
#certifications .res-tag[data-tag="Exigeant"],
#certifications .res-tag[data-tag="Spécialisation"]{
  border-color:rgba(217,184,120,.38);
  background:rgba(169,133,63,.18);
  color:#ead09a;
}
#certifications .res-tag[data-tag="Débutant à avancé"]{
  max-width:108px;
  white-space:normal;
}

@media (max-width:700px){
  .nl-hero-form + .reassure{margin-top:22px!important}
}


/* HEADER-LOGO-REDUCE-CLAUDE-20260718 */
/* Demande user 18/07 : diminuer un peu l icone bateau du header (pas le nom).
   Override append-only de la regle Codex .site-header .brand-mark (solid-header). */
.site-header .brand-mark{
  width:56px; height:56px;
  transform:translateX(-13px) scale(1.28);
}
@media (max-width:760px){
  .site-header .brand-mark{
    width:46px; height:46px;
    transform:translateX(-5px) scale(1.26);
  }
}

/* Titre de la page Discord : une ligne nette sur ordinateur, retour naturel
   sur les ecrans etroits. */
.page-head h1.discord-title{max-width:none}
@media (min-width:900px){
  .page-head h1.discord-title{
    white-space:nowrap;
    font-size:clamp(28px,3vw,40px);
    letter-spacing:-.025em;
  }
}
.security-box .security-title{color:var(--vague)}

/* ===== PROFIL : largeur + icones + lisibilite (demande user 18/07) ===== */
.profile-col{max-width:1040px}
.profile-col .section{padding:10px 0}
.profile-col .section-head{margin-bottom:12px;padding-bottom:9px}
.profile-col .section-head h2 .ico{color:#c4b696;vertical-align:-4px;margin-right:9px}
.profile-col .hint{max-width:none}
/* badge membre + statut newsletter : couleurs lisibles en theme sombre */
.early-note{background:rgba(121,198,166,.14);border-color:rgba(121,198,166,.45);color:#a8dfc7}
.early-note .ico{color:#79c6a6}
.early-note-off{background:rgba(192,179,160,.12);border-color:rgba(192,179,160,.34);color:#dad2c7}
.early-note-off .ico{color:#dad2c7}

/* Newsletter : promesse editoriale et benefices d inscription. */
.nl-value{padding-bottom:18px}
.nl-value-head{align-items:center}
.nl-free{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border:1px solid rgba(121,198,166,.34);
  border-radius:999px;
  background:rgba(74,151,123,.14);
  color:#a8dfc7;
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
  white-space:nowrap;
}
.nl-value-lead{
  max-width:none;
  margin:0 0 20px;
  color:#c8c0b5;
  font-size:15.5px;
  line-height:1.7;
}
@media (min-width:1000px){.nl-value-lead{white-space:nowrap}}
.nl-value-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.nl-value-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:16px;
  padding:22px;
  border:1px solid rgba(220,195,159,.20);
  border-radius:15px;
  background:linear-gradient(145deg,rgba(45,34,22,.96),rgba(37,27,16,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform 220ms var(--ease),border-color 220ms var(--ease),box-shadow 220ms var(--ease);
}
.nl-value-card:first-child{grid-column:1/-1}
.nl-value-card:hover{
  transform:translateY(-2px);
  border-color:rgba(220,195,159,.38);
  box-shadow:0 14px 32px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
}
.nl-value-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(220,195,159,.26);
  border-radius:13px;
  background:rgba(180,143,89,.12);
  color:#efd9b9;
}
.nl-value-card:nth-child(2) .nl-value-icon,
.nl-value-card:nth-child(4) .nl-value-icon{
  border-color:rgba(121,198,166,.30);
  background:rgba(74,151,123,.13);
  color:#a8dfc7;
}
.nl-value-card:nth-child(3) .nl-value-icon,
.nl-value-card:nth-child(5) .nl-value-icon{
  border-color:rgba(217,184,120,.32);
  background:rgba(169,133,63,.13);
  color:#ead09a;
}
.nl-value-label{
  display:block;
  margin-bottom:4px;
  color:#d3b992;
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.nl-value-card h3{
  color:var(--encre);
  font-size:18px;
  line-height:1.3;
}
.nl-value-card p{
  margin-top:7px;
  color:#c8c0b5;
  font-size:14px;
  line-height:1.65;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.nl-value-signup{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:start;
  gap:34px;
  margin-top:20px;
  padding:26px;
  border:1px solid rgba(121,198,166,.25);
  border-radius:15px;
  background:radial-gradient(80% 140% at 100% 0%,rgba(74,151,123,.13),transparent 62%),#1d1611;
}
.nl-value-signup-copy .kicker{color:#a8dfc7}
.nl-value-signup-copy h3{margin-top:7px;color:var(--encre);font-size:26px;line-height:1.2}
.nl-value-signup-copy p{margin-top:10px;color:#cbc3b8;font-size:15.5px;line-height:1.68}
.nl-value-signup-form{width:100%;max-width:500px;min-width:0;justify-self:end}
.nl-value-signup .reassure{display:flex;align-items:flex-start;gap:7px}
.nl-value-signup .reassure .ico{flex:0 0 auto;margin:.22em 0 0}
.nl-value-signup .reassure span{min-width:0}
.nl-value-signup .nl-hero-form{margin-top:0}
.nl-value-signup .nl-form,.nl-value-signup .nl-row{width:100%}
.nl-value-signup .nl-form input[type=email]{
  flex:0 0 48px;
  width:100%;
  min-width:0;
  min-height:48px;
  height:48px;
}
.nl-value + .section{padding-top:18px}

@media (max-width:900px){
  .nl-value-signup{grid-template-columns:1fr;gap:22px}
  .nl-value-signup-form{max-width:none;justify-self:stretch}
}

@media (max-width:700px){
  .nl-value-grid{grid-template-columns:1fr}
  .nl-value-card:first-child{grid-column:auto}
  .nl-value-card{grid-template-columns:42px minmax(0,1fr);gap:13px;padding:18px}
  .nl-value-icon{width:42px;height:42px}
  .nl-value-signup{gap:20px;padding:20px 18px}
  .nl-value-signup .nl-row .primary-button{width:100%}
}

/* Connexion et inscription : panneaux plus structures et plus lisibles. */
.auth-col{max-width:980px}
.auth-grid{gap:18px;margin-top:26px;align-items:stretch}
.auth-grid-register{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.auth-card{
  position:relative;
  overflow:hidden;
  gap:18px;
  padding:29px 30px;
  border-color:rgba(220,195,159,.24);
  border-radius:19px;
  background:
    radial-gradient(90% 75% at 100% 0%,rgba(180,143,89,.11),transparent 62%),
    linear-gradient(145deg,rgba(44,34,21,.98),rgba(35,26,14,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
.auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,rgba(220,195,159,.78),rgba(220,195,159,0));
  pointer-events:none;
}
.auth-card.auth-discord{
  border-color:rgba(121,198,166,.30);
  background:
    radial-gradient(90% 75% at 100% 0%,rgba(74,151,123,.13),transparent 62%),
    linear-gradient(145deg,rgba(40,31,20,.98),rgba(33,24,14,.98));
}
.auth-card.auth-discord::before{
  background:linear-gradient(90deg,rgba(121,198,166,.82),rgba(121,198,166,0));
}
.auth-card h2{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:21px;
  line-height:1.25;
}
.auth-card h2 .ico{
  box-sizing:content-box;
  width:19px;
  height:19px;
  margin:0;
  padding:8px;
  border:1px solid rgba(220,195,159,.28);
  border-radius:11px;
  background:rgba(180,143,89,.11);
  color:#efd9b9;
}
.auth-card.auth-discord h2 .ico{
  border-color:rgba(121,198,166,.30);
  background:rgba(74,151,123,.13);
  color:#a8dfc7;
}
.auth-card > p,
.auth-card .auth-note{
  width:100%;
  color:#c8c0b5;
  font-size:14.5px;
  line-height:1.68;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.auth-info-card > p + p{
  margin-top:2px;
  padding-top:18px;
  border-top:1px solid rgba(121,198,166,.17);
}
.auth-form{gap:16px}
.auth-form label{gap:7px;font-size:13.5px}
.auth-form input[type=text],
.auth-form input[type=email],
.auth-form input[type=password]{
  min-height:48px;
  padding:11px 14px;
  border-color:rgba(220,195,159,.30);
  border-radius:12px;
  background:rgba(34,24,13,.72);
}
.auth-form input[type=text]:hover,
.auth-form input[type=email]:hover,
.auth-form input[type=password]:hover{border-color:rgba(220,195,159,.48)}
.auth-form .nl-consent{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:9px;
  padding:11px 12px;
  border:1px solid rgba(220,195,159,.16);
  border-radius:12px;
  background:rgba(26,18,8,.26);
  line-height:1.5;
}
.auth-form .nl-consent input{margin-top:4px}
.auth-form .field-label{display:inline;font:inherit;color:inherit}
.auth-form .field-optional{color:#aca090;font-weight:500}
.auth-avatar-choice{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:13px;
  margin-top:2px;
}
.auth-avatar-choice > img{
  width:54px;
  height:54px;
  display:block;
  border:1px solid rgba(220,195,159,.30);
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.auth-avatar-input{display:flex;min-width:0;flex-direction:column;gap:5px}
.auth-avatar-input input[type=file]{width:100%;min-width:0}
.auth-avatar-input small{color:#aca090;font-size:11.5px;font-weight:450;line-height:1.45}
.auth-card-form > .auth-note,
.auth-provider-card > .auth-note,
.auth-email-card form + .auth-note{
  margin-top:2px;
  padding-top:16px;
  border-top:1px solid rgba(220,195,159,.17);
}
.auth-card .primary-button,
.auth-card .secondary-button{box-shadow:0 7px 18px rgba(0,0,0,.16)}

@media (max-width:760px){
  .auth-grid-register{grid-template-columns:1fr}
  .auth-card{padding:23px 19px;border-radius:16px}
  .auth-card h2{font-size:20px}
}

/* ===== Banner /discord : incrustation (fondu des bords dans le fond, sans cadre) — user 18/07 =====
   Le cadre (bordure + coins) faisait "photo posee". On dissout les bords haut/bas
   dans le fond sombre (comme le hero) + leger assombrissement -> l eau fait partie de la page. */
.page-banner{
  border:0;
  border-radius:0;
  height:250px;
  filter:saturate(.9) brightness(.84);
  margin:32px 0 -8px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 80%,transparent 100%),linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect;
}
@media (max-width:760px){ .page-banner{height:170px} }

/* =====================================================================
   BACK-OFFICE 2026 — pilotage clair, sombre et concentre sur l essentiel
   ===================================================================== */
.admin-shell{
  display:grid;
  width:min(calc(100% - 40px),1720px);
  grid-template-columns:230px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding:36px 0 64px;
}
.admin-sidebar{
  position:sticky;
  top:88px;
  padding:22px 16px 16px;
  border:1px solid rgba(220,195,159,.18);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(43,32,20,.97),rgba(31,22,12,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.03);
}
.admin-sidebar-head{padding:2px 8px 19px;border-bottom:1px solid rgba(220,195,159,.13)}
.admin-sidebar-head .kicker{font-size:9.5px;color:#d3b992}
.admin-sidebar-head strong{display:block;margin-top:5px;font-family:var(--display);font-size:25px;line-height:1.15;letter-spacing:-.025em}
.admin-sidebar-head p{margin-top:7px;color:#aca090;font-size:11.5px;line-height:1.5}
.admin-nav{position:static;width:auto;display:flex;flex-direction:column;gap:15px;margin-top:18px}
.admin-nav-group{display:flex;flex-direction:column;gap:4px}
.admin-nav-label{
  padding:0 10px 4px;
  color:#958772;
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.admin-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:11px;
  color:#c3bbae;
  font-size:13.5px;
  font-weight:570;
  line-height:1.2;
}
.admin-nav a .ico{flex:0 0 auto;color:#ac9a80}
.admin-nav a:hover{color:#f1e8d7;border-color:rgba(220,195,159,.16);background:rgba(220,195,159,.07)}
.admin-nav a.active{
  color:#f9f2e8;
  border-color:rgba(220,195,159,.26);
  background:linear-gradient(90deg,rgba(180,143,89,.20),rgba(180,143,89,.08));
  box-shadow:inset 3px 0 0 #dcc39f;
}
.admin-nav a.active .ico{color:#efd9b9}
.admin-nav-tools{padding-top:13px;border-top:1px solid rgba(220,195,159,.11)}
.admin-site-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:18px 7px 0;
  padding-top:15px;
  border-top:1px solid rgba(220,195,159,.13);
  color:#b5a792;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
}
.admin-site-link:hover{color:#eadcc8}
.admin-body{min-width:0;width:100%}

.admin-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}
.admin-page-head > div:first-child{min-width:0}
.admin-page-head h1{margin-top:3px;color:var(--encre);font-size:clamp(30px,4vw,42px);line-height:1.08;letter-spacing:-.035em}
.admin-page-head p{
  max-width:720px;
  margin-top:10px;
  color:#c3bbae;
  font-size:14.5px;
  line-height:1.7;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.admin-eyebrow{
  display:block;
  color:#d3b992;
  font-size:9.5px;
  font-weight:760;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.admin-head-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;flex:0 0 auto}
.admin-count-badge,.admin-panel-note{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 11px;
  border:1px solid rgba(220,195,159,.22);
  border-radius:999px;
  background:rgba(180,143,89,.10);
  color:#ddceb9;
  font-size:11.5px;
  font-weight:680;
  white-space:nowrap;
}
.admin-count-badge.has-alert{border-color:rgba(217,184,120,.34);background:rgba(169,133,63,.13);color:#ead09a}

.admin-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.admin-kpis-small{grid-template-columns:repeat(3,minmax(0,1fr));max-width:780px}
.admin-kpi{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  min-height:94px;
  padding:17px;
  border:1px solid rgba(220,195,159,.19);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(44,33,20,.96),rgba(33,24,14,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.admin-kpi-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(220,195,159,.25);border-radius:11px;background:rgba(180,143,89,.11);color:#efd9b9}
.admin-kpi b{display:block;color:#f0e8d8;font-family:var(--display);font-size:25px;line-height:1;font-variant-numeric:tabular-nums}
.admin-kpi span:not(.admin-kpi-icon){display:block;margin-top:5px;color:#ada292;font-size:11px;line-height:1.3}
.admin-kpi-green{border-color:rgba(121,198,166,.22)}
.admin-kpi-green .admin-kpi-icon{border-color:rgba(121,198,166,.28);background:rgba(74,151,123,.13);color:#a8dfc7}
.admin-kpi-gold{border-color:rgba(217,184,120,.22)}
.admin-kpi-gold .admin-kpi-icon{border-color:rgba(217,184,120,.28);background:rgba(169,133,63,.13);color:#ead09a}

.admin-quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:18px}
.admin-quick-card{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:16px;
  border:1px solid rgba(220,195,159,.19);
  border-radius:15px;
  background:rgba(40,30,18,.78);
  color:var(--encre);
  text-decoration:none;
  transition:transform 180ms var(--ease),border-color 180ms var(--ease),background 180ms var(--ease);
}
.admin-quick-card:hover{transform:translateY(-2px);border-color:rgba(220,195,159,.38);background:rgba(46,34,21,.92);color:var(--encre)}
.admin-quick-card > .ico{color:#ae9674}
.admin-quick-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(180,143,89,.13);color:#efd9b9}
.admin-quick-card b{display:block;font-size:13.5px;line-height:1.35}
.admin-quick-card small{display:block;margin-top:3px;color:#ada292;font-size:11.5px;line-height:1.4}
.admin-quick-green .admin-quick-icon{background:rgba(74,151,123,.14);color:#a8dfc7}
.admin-quick-gold .admin-quick-icon{background:rgba(169,133,63,.14);color:#ead09a}

.admin-panel{
  min-width:0;
  padding:22px;
  border:1px solid rgba(220,195,159,.18);
  border-radius:17px;
  background:linear-gradient(145deg,rgba(42,32,20,.96),rgba(32,23,13,.97));
  box-shadow:0 14px 34px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.025);
}
.admin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:17px}
.admin-panel-head h2,.admin-section-title h2{margin-top:3px;color:var(--encre);font-size:19px;line-height:1.2;letter-spacing:-.02em}
.admin-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.85fr);gap:16px;margin-top:16px}
.admin-dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
.admin-chart-panel .chart-bars{height:190px;max-width:none;padding:18px 10px 6px;border:0;border-radius:0;background:transparent}
.admin-chart-panel .chart-bar{background:linear-gradient(180deg,#dcc39f,#9b7e53);box-shadow:0 0 12px rgba(193,158,107,.15)}
.admin-chart-panel .chart-n{color:#b2a592}
.admin-chart-panel .chart-day{color:#958772}
.admin-priority-list{display:flex;flex-direction:column;gap:8px}
.admin-priority-list a{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid rgba(220,195,159,.12);
  border-radius:12px;
  background:rgba(26,18,8,.22);
  color:var(--encre);
  text-decoration:none;
}
.admin-priority-list a:hover{border-color:rgba(220,195,159,.28);background:rgba(180,143,89,.08)}
.admin-priority-list a > span:first-child{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(180,143,89,.11);color:#e5cdaa}
.admin-priority-list a > .ico{color:#9f8b6f}
.admin-priority-list b{display:block;font-size:12.5px;line-height:1.35}
.admin-priority-list small{display:block;margin-top:2px;color:#a49785;font-size:10.5px;line-height:1.35}
.admin-compact-list{display:flex;flex-direction:column}
.admin-compact-list > div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 2px;border-bottom:1px solid rgba(220,195,159,.11);color:#c3bbae;font-size:12.5px}
.admin-compact-list > div:last-child{border-bottom:0}
.admin-compact-list > div > span{min-width:0;overflow-wrap:anywhere}
.admin-compact-list b{color:#e9dfce;font-variant-numeric:tabular-nums}
.admin-community-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.admin-community-stats div{padding:17px 12px;border:1px solid rgba(121,198,166,.16);border-radius:12px;background:rgba(74,151,123,.07);text-align:center}
.admin-community-stats b{display:block;color:#a8dfc7;font-size:22px;line-height:1}
.admin-community-stats span{display:block;margin-top:6px;color:#8fa59f;font-size:10.5px}

.admin-summary-row{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 18px}
.admin-summary-row > span{display:inline-flex;gap:5px;padding:6px 11px;border:1px solid rgba(220,195,159,.17);border-radius:999px;background:rgba(180,143,89,.07);color:#b5aa9b;font-size:11.5px}
.admin-summary-row b{color:#ede6dc}
.admin-summary-row .is-green{border-color:rgba(121,198,166,.22);background:rgba(74,151,123,.08)}
.admin-summary-row .is-green b{color:#a8dfc7}
.admin-summary-row .is-gold{border-color:rgba(217,184,120,.22);background:rgba(169,133,63,.08)}
.admin-summary-row .is-gold b{color:#ead09a}
.admin-table-panel{padding:0;overflow:hidden}
.admin-table-panel > .admin-panel-head{padding:21px 22px 0}
.admin-table-wrap{width:100%;overflow-x:auto}
.admin-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.admin-table th{padding:11px 15px;border-bottom:1px solid rgba(220,195,159,.18);color:#baa280;background:rgba(23,16,6,.22);font-size:9.5px;letter-spacing:.12em}
.admin-table td{padding:14px 15px;border-bottom:1px solid rgba(220,195,159,.10);color:#bfb7aa;vertical-align:middle}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table tbody tr:hover td{background:rgba(180,143,89,.035)}
.admin-table td:first-child{color:#ebe3d4;font-weight:520}
.admin-table strong{font-weight:650}
.admin-type{color:#d0c5b6}
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;white-space:nowrap}
.row-actions form{display:inline-flex;margin:0}
.badge{display:inline-flex;align-items:center;min-height:23px;padding:3px 9px;border:1px solid rgba(220,195,159,.18);background:rgba(180,143,89,.09);color:#c8bdae;font-size:9.5px;font-weight:730;letter-spacing:.035em;text-transform:uppercase}
.badge.published{border-color:rgba(121,198,166,.28);background:rgba(74,151,123,.12);color:#a8dfc7}
.badge.draft{border-color:rgba(217,184,120,.27);background:rgba(169,133,63,.12);color:#ead09a}
.mini-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:4px 10px;
  border:1px solid rgba(220,195,159,.24);
  border-radius:999px;
  background:rgba(180,143,89,.08);
  color:#e1d1ba!important;
  font-size:10.5px;
  font-weight:680;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
}
.mini-button:hover{border-color:rgba(220,195,159,.42);background:rgba(180,143,89,.16)}
.mini-danger{border-color:rgba(198,106,97,.25);background:rgba(160,58,48,.09);color:#e4aaa3!important}
.mini-success{border-color:rgba(121,198,166,.30);background:rgba(74,151,123,.11);color:#a8dfc7!important}
.admin-message-cell{min-width:280px;max-width:470px;line-height:1.55;text-align:justify;text-justify:inter-word;hyphens:auto}

.admin-info-callout{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:start;
  gap:11px;
  max-width:820px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid rgba(220,195,159,.18);
  border-radius:13px;
  background:rgba(180,143,89,.07);
  color:#c3bbae;
}
.admin-info-callout > .ico{box-sizing:content-box;padding:8px;border-radius:10px;background:rgba(180,143,89,.11);color:#efd9b9}
.admin-info-callout p{font-size:12.5px;line-height:1.65;text-align:justify;text-justify:inter-word;hyphens:auto}
.admin-info-callout b{color:#e7dfd0}
.admin-info-green{border-color:rgba(121,198,166,.20);background:rgba(74,151,123,.07)}
.admin-info-green > .ico{background:rgba(74,151,123,.12);color:#a8dfc7}

.admin-section-block{margin-top:27px}
.admin-section-title{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}
.admin-section-title > span{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border:1px solid rgba(220,195,159,.18);border-radius:999px;color:#c5b9a9;font-size:11px;font-weight:700}
.admin-review-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.admin-review-item{padding:18px;border:1px solid rgba(121,198,166,.18);border-radius:15px;background:linear-gradient(145deg,rgba(41,32,20,.95),rgba(32,23,13,.97))}
.admin-review-item.is-pending{border-color:rgba(217,184,120,.25);background:linear-gradient(145deg,rgba(38,34,30,.33),rgba(32,24,14,.97))}
.admin-review-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.admin-review-meta strong{color:#ebe3d4;font-size:13.5px}
.admin-review-meta span{color:#a29583;font-size:10.5px;text-align:right}
.admin-review-item p{color:#c3bbae;font-size:13px;line-height:1.65;text-align:justify;text-justify:inter-word;hyphens:auto}
.admin-review-actions{display:flex;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(220,195,159,.10)}
.admin-review-actions form{display:inline-flex}
.admin-compose{max-width:680px;margin-bottom:24px;border:1px solid rgba(220,195,159,.17);border-radius:14px;background:rgba(39,29,18,.72)}
.admin-compose summary,.admin-options summary{display:flex;align-items:center;gap:9px;padding:14px 16px;color:#e1d6c6;font-size:12.5px;font-weight:680;cursor:pointer;list-style:none}
.admin-compose summary::-webkit-details-marker,.admin-options summary::-webkit-details-marker{display:none}
.admin-compose[open] summary,.admin-options[open] summary{border-bottom:1px solid rgba(220,195,159,.13)}
.admin-compose .admin-form{max-width:none;padding:18px}

.admin-form{gap:17px;max-width:760px}
.admin-form-wide{max-width:1200px}
.admin-form-card{display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid rgba(220,195,159,.18);border-radius:17px;background:linear-gradient(145deg,rgba(42,32,20,.97),rgba(32,23,13,.98));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.admin-form-card-head{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(220,195,159,.12)}
.admin-form-card-head > span{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(220,195,159,.24);border-radius:11px;background:rgba(180,143,89,.11);color:#efd9b9}
.admin-form-card-head h2{font-size:17px;line-height:1.2}
.admin-form-card-head p{margin-top:3px;color:#aca08f;font-size:11.5px;line-height:1.45;text-align:justify;text-justify:inter-word}
.admin-form label{gap:7px;color:#e8e0d1;font-size:12.5px;font-weight:680}
.admin-form label small{display:block;color:#a29583;font-size:10.5px;font-weight:450;line-height:1.45}
.admin-form input[type=text],.admin-form input[type=password],.admin-form input[type=email],.admin-form textarea,.admin-form select{
  min-height:48px;
  padding:11px 14px;
  border-color:rgba(220,195,159,.27);
  border-radius:11px;
  background:rgba(28,20,9,.68);
  color:#ede5d6;
  font-size:13.5px;
}
.admin-form textarea{line-height:1.65}
.admin-form textarea:not(.mono){text-align:justify;text-justify:inter-word;hyphens:auto}
.admin-form input::placeholder,.admin-form textarea::placeholder{color:#897c69}
.admin-form input:focus,.admin-form textarea:focus,.admin-form select:focus{border-color:#c5a980;box-shadow:0 0 0 3px rgba(180,143,89,.14)}
.admin-options{border:1px solid rgba(220,195,159,.16);border-radius:14px;background:rgba(34,26,14,.78)}
.admin-options-body{display:flex;flex-direction:column;gap:17px;padding:19px}
.admin-save-bar{position:sticky;bottom:12px;z-index:4;justify-content:flex-end;padding:12px;border:1px solid rgba(220,195,159,.20);border-radius:14px;background:rgba(28,20,9,.90);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.28)}
.admin-back-link{display:inline-block;margin-bottom:13px;color:#c0ad92;font-size:11.5px;font-weight:650;text-decoration:none}
.admin-back-link:hover{color:#eadcc8}
.admin-related-panel{max-width:1200px;margin-top:25px}
.admin-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1200px;margin-top:20px;padding:17px 19px;border:1px solid rgba(198,106,97,.18);border-radius:14px;background:rgba(160,58,48,.055)}
.admin-danger-zone b{color:#e8c7c3;font-size:12.5px}
.admin-danger-zone p{margin-top:3px;color:#9f8585;font-size:10.5px;line-height:1.45;text-align:justify;text-justify:inter-word}

.admin-empty{display:flex;min-height:260px;flex-direction:column;align-items:center;justify-content:center;padding:30px;border:1px dashed rgba(220,195,159,.22);border-radius:17px;background:rgba(39,29,18,.42);text-align:center}
.admin-empty > .ico{box-sizing:content-box;padding:11px;border-radius:13px;background:rgba(180,143,89,.10);color:#e5cdaa}
.admin-empty h2{margin-top:13px;font-size:18px}
.admin-empty p{max-width:420px;margin:6px auto 15px;color:#aca090;font-size:12.5px}
.admin-empty-small{min-height:110px;padding:20px}
.admin-empty-small p{margin:8px 0 0}

.admin-editor-panel{padding:22px;margin-bottom:25px}
.admin-editor-panel .admin-sub{margin-top:0}
.tweet-preview{top:90px}
.tweet-preview .admin-sub{margin-top:0}

@media (min-width:1180px){
  .admin-editor-panel.tweet-workbench{
    display:grid;
    grid-template-columns:minmax(520px,1.15fr) minmax(340px,.85fr);
    gap:30px;
    align-items:start;
  }
  .admin-editor-panel.tweet-workbench .admin-form,
  .admin-editor-panel.tweet-workbench .tweet-preview{
    width:100%;
    max-width:none;
  }
}

.admin-login-shell{display:grid;place-items:center;min-height:calc(100vh - 150px);padding:55px 0}
.admin-login-card{width:min(100%,470px);padding:34px;border:1px solid rgba(220,195,159,.22);border-radius:21px;background:radial-gradient(90% 80% at 100% 0%,rgba(180,143,89,.13),transparent 62%),linear-gradient(145deg,rgba(44,33,20,.98),rgba(32,23,13,.99));box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)}
.admin-login-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border:1px solid rgba(220,195,159,.26);border-radius:14px;background:rgba(180,143,89,.12);color:#efd9b9}
.admin-login-card h1{margin-top:6px;font-size:31px;line-height:1.12}
.admin-login-card > p{margin:11px 0 23px;color:#bfb7aa;font-size:13.5px;line-height:1.68;text-align:justify;text-justify:inter-word;hyphens:auto}
.admin-login-card .admin-form{max-width:none}
.admin-login-card .primary-button{align-self:flex-start}
.admin-login-back{display:inline-block;margin-top:20px;color:#b5a690;font-size:11.5px}

@media (max-width:1100px){
  .admin-shell{grid-template-columns:205px minmax(0,1fr);gap:20px}
  .admin-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-quick-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .admin-shell{display:block;padding-top:24px}
  .admin-sidebar{position:static;margin-bottom:22px;padding:17px}
  .admin-sidebar-head{display:flex;align-items:center;gap:12px;padding:0 3px 14px}
  .admin-sidebar-head .kicker,.admin-sidebar-head p{display:none}
  .admin-sidebar-head strong{margin:0;font-size:21px}
  .admin-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
  .admin-nav-group{gap:4px}
  .admin-nav-tools{padding:0;border:0}
  .admin-site-link{display:none}
  .admin-dashboard-grid,.admin-dashboard-bottom{grid-template-columns:1fr}
}
@media (max-width:700px){
  .admin-page-head{flex-direction:column;gap:16px}
  .admin-page-head .primary-button,.admin-page-head .secondary-button{width:100%}
  .admin-head-actions{width:100%;display:grid;grid-template-columns:1fr}
  .admin-kpis,.admin-kpis-small{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-kpi{min-height:82px;padding:13px}
  .admin-kpi-icon{width:34px;height:34px}
  .admin-kpi b{font-size:21px}
  .admin-review-list{grid-template-columns:1fr}
  .admin-community-stats{grid-template-columns:repeat(3,1fr)}
  .admin-form-card{padding:19px 16px}
  .admin-save-bar{position:static;display:grid;grid-template-columns:1fr}
  .admin-save-bar button{width:100%}
  .admin-danger-zone{align-items:flex-start;flex-direction:column}
  .admin-table-wrap{overflow:visible}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table thead{display:none}
  .admin-table tr{margin:0 0 11px;padding:12px;border:1px solid rgba(220,195,159,.16);border-radius:13px;background:rgba(32,23,13,.72)}
  .admin-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:11px;padding:8px 2px;border:0!important;background:transparent!important;white-space:normal}
  .admin-table td::before{content:attr(data-label);color:#9c8b74;font-size:9px;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
  .admin-table td.row-actions{display:grid;align-items:start}
  .admin-table td.row-actions > *{justify-self:start}
  .admin-message-cell{min-width:0;max-width:none}
}
@media (max-width:520px){
  .admin-nav{grid-template-columns:1fr}
  .admin-nav-group{padding-bottom:8px;border-bottom:1px solid rgba(220,195,159,.10)}
  .admin-nav-group:last-child{border-bottom:0}
  .admin-kpis,.admin-kpis-small{grid-template-columns:1fr}
  .admin-quick-card{grid-template-columns:38px minmax(0,1fr) auto;padding:13px}
  .admin-quick-icon{width:38px;height:38px}
  .admin-panel{padding:17px 15px}
  .admin-chart-panel .chart-bars{height:160px;padding-left:0;padding-right:0;gap:3px}
  .admin-chart-panel .chart-day{font-size:8px}
  .admin-community-stats{grid-template-columns:1fr}
  .admin-login-card{padding:26px 20px}
}

/* ===== Etiquettes carnet scotchees sur les bandes (guides/actus) — user 18/07 =====
   Le fragment papier + note manuscrite sont ancres au coin de la bande-image
   (appui compositionnel qui manquait quand ils flottaient dans la gouttiere vide). */
.band-wrap{position:relative;--band-label-right:clamp(48px,5vw,76px)}
.band-wrap .frag-band{position:absolute;top:-12px;right:var(--band-label-right);width:110px;transform:rotate(4.5deg);z-index:4}
.band-wrap .note-band{position:absolute;right:calc(var(--band-label-right) - 24px);width:158px;text-align:center;line-height:1.25;transform:rotate(-2.5deg);z-index:4}
.band-guides .note-band{top:150px}
.band-actus .note-band{top:78px}
@media (max-width:900px){
  .band-wrap .frag-band{width:92px;right:14px;top:-14px}
  .band-wrap .note-band{display:none}
}

/* positions note etiquette : discord (rose 1:1) + newsletter (mouette 0.67) */
.band-discord .note-band{top:128px}
.band-newsletter .note-band{top:78px}

/* Site public plus ample : les grilles utilisent l ecran, les textes gardent
   une longueur de ligne confortable pour rester faciles a lire. */
:root{--max:1360px}
@media (min-width:761px){
  .page-head p,
  .section-intro{max-width:88ch}
  .nl-banner p{max-width:76ch}
  .site-footer .in>div:first-child{max-width:72ch}
}

/* ===== Etiquettes carnet en MARGE haut-droite (style rose des vents accueil) — Claude 18/07 =====
   Le user veut le placement de l accueil (marge), PAS scotche sur une bande.
   Bandes retirees de guides/actus/newsletter ; .band-wrap/.frag-band/.note-band = mortes. */
.page-note{position:absolute;z-index:5;top:calc(100% + 40px);bottom:auto;right:calc((var(--max) - 100vw)/4 - 55px);width:110px;pointer-events:none}
.page-note .frag{position:relative;right:auto;top:auto;left:auto;bottom:auto;width:112px;margin:0 auto;transform:rotate(5deg)}
.page-note .note-marge{position:relative;right:auto;top:auto;left:auto;bottom:auto;width:112px;margin:22px auto 0;text-align:center}
@media (max-width:1560px){ .page-note{display:none} }

/* etiquette au-dessus des sections suivantes (sinon les cartes se peignent par-dessus) */
.page-head:has(.page-note){position:relative;z-index:6}
.page-note{z-index:20}

/* etiquettes .page-note : meme animation de survol que la rose de l accueil */
@media (hover:hover) and (min-width:1281px){
  .page-note{pointer-events:auto;transition:transform .5s cubic-bezier(.34,1.35,.5,1);will-change:transform}
  .page-note .frag,.page-note .note-marge{pointer-events:none}
  .page-note:hover{transform:translateY(-7px) rotate(-1.6deg)}
}
@media (prefers-reduced-motion:reduce){
  .page-note:hover{transform:translateY(-4px)}
}

/* etiquette : hauteur calee sur la 1ere carte de chaque page (offsets mesures) */
.pn-actus{top:auto;bottom:-30px}
.pn-discord{top:auto;bottom:-106px}
.pn-newsletter{top:auto;bottom:-134px}
.pn-guides{top:auto;bottom:-144px}

/* ===== Admin : passe de finition esthetique (Claude 18/07, carte blanche user) ===== */
.admin-kpi b{font-size:27px}
.admin-chart-panel .chart-bar{border-radius:5px 5px 0 0;transition:filter .2s ease,box-shadow .2s ease}
.admin-chart-panel .chart-col{cursor:default}
.admin-chart-panel .chart-col:hover .chart-bar{filter:brightness(1.18) saturate(1.05);box-shadow:0 0 18px rgba(205,171,122,.42)}
.admin-chart-panel .chart-col:hover .chart-n{color:#efe7db}
.admin-quick-card > .ico,.admin-priority-list a > .ico{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.admin-quick-card:hover > .ico,.admin-priority-list a:hover > .ico{transform:translateX(4px)}

/* ===== Admin : direction "carnet maritime" (labels sable/or + actif chaleureux) — Claude 18/07 ===== */
.admin-nav-label,.admin-eyebrow{color:#c4b696}
.admin-nav a.active{box-shadow:inset 3px 0 0 #c4b696;
  background:linear-gradient(90deg,rgba(196,182,150,.14),rgba(180,143,89,.05))}
.admin-nav a.active .ico{color:#e6d3a6}
.admin-sidebar-head{position:relative}
.admin-sidebar-head::before{content:"";position:absolute;left:8px;right:8px;top:-6px;height:34px;
  pointer-events:none;background:radial-gradient(120px 34px at 20% 0,rgba(217,184,120,.10),transparent 72%)}

/* ===== Admin nav : refonte EPUREE monochrome (retour user : style/couleurs+comportement) ===== */
.admin-nav-label{color:#a09586;font-weight:700;letter-spacing:.14em}
.admin-sidebar-head::before{background:none}
.admin-nav a{border:0;color:#bfb7aa;transition:background .17s ease,color .17s ease}
.admin-nav a .ico{color:#9c9080;transition:color .17s ease}
.admin-nav a:hover{border:0;box-shadow:none;color:#f0f2ec;background:rgba(255,255,255,.045)}
.admin-nav a:hover .ico{color:#ded6cb}
.admin-nav a.active{border:0;box-shadow:none;font-weight:640;color:#f4efe4;
  background:rgba(255,255,255,.085)}
.admin-nav a.active .ico{color:#eef1ea}

/* Veille IA : suivi éditorial et preuves dans le back-office. */
.admin-summary-row .is-blue{border-color:rgba(207,165,104,.25);background:rgba(169,128,69,.10)}
.admin-summary-row .is-blue b{color:#f1d5ac}
.ai-watch-overview{margin-bottom:18px;background:linear-gradient(135deg,rgba(44,32,18,.98),rgba(33,23,12,.98))}
.ai-watch-overview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ai-watch-overview-grid>div{padding:13px 14px;border:1px solid rgba(220,195,159,.13);border-radius:12px;background:rgba(25,16,7,.23)}
.ai-watch-overview-grid b{display:block;color:#eae3d5;font-size:12.5px;line-height:1.35}
.ai-watch-overview-grid span{display:block;margin-top:4px;color:#aea290;font-size:10.5px;line-height:1.45;text-align:justify;text-justify:inter-word}
.admin-content-table{table-layout:fixed}
.admin-content-table th:nth-child(1){width:54%}
.admin-content-table th:nth-child(2){width:10%}
.admin-content-table th:nth-child(3){width:11%}
.admin-content-table th:nth-child(4){width:13%}
.admin-content-table th:nth-child(5){width:12%}
.admin-article-heading{display:flex;align-items:center;gap:11px;min-width:0}
.admin-article-heading>strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-watch-origin{display:inline-flex;align-items:center;flex:0 0 auto;margin:0;color:#d2b790;font-size:9.5px;font-weight:650;letter-spacing:.02em;white-space:nowrap}
.ai-watch-review{margin-bottom:18px;border-color:rgba(111,178,155,.24);background:linear-gradient(145deg,rgba(42,30,16,.98),rgba(33,23,12,.98))}
.ai-watch-score{display:flex;align-items:baseline;gap:2px;color:#aee1c9;font-size:25px;font-weight:760;letter-spacing:-.04em}
.ai-watch-score small{color:#76998d;font-size:10px;letter-spacing:0}
.ai-watch-review-intro{max-width:930px;margin:-3px 0 15px;color:#bfb7aa;font-size:12px;line-height:1.65;text-align:justify;text-justify:inter-word}
.ai-watch-checks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:17px}
.ai-watch-checks>span{display:flex;align-items:center;gap:8px;min-height:42px;padding:9px 11px;border:1px solid rgba(121,198,166,.17);border-radius:10px;background:rgba(74,151,123,.07);color:#8fd8b6}
.ai-watch-checks b{color:#c8ddd4;font-size:10.5px;line-height:1.35}
.ai-watch-review-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;padding-top:17px;border-top:1px solid rgba(220,195,159,.12)}
.ai-watch-review-grid h3{margin-bottom:9px;color:#e9e2d4;font-size:12px}
.ai-watch-review-grid ul{margin:0;padding-left:17px;color:#bfb7aa;font-size:11px;line-height:1.65}
.ai-watch-source-list{display:flex;flex-direction:column;gap:7px;padding:0!important;list-style:none}
.ai-watch-source-list li{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid rgba(220,195,159,.09)}
.ai-watch-source-list a{color:#efd9ba;font-weight:680}
.ai-watch-source-list span{color:#9b8d79;font-size:9.5px;text-align:right}
.ai-watch-limit-title{margin-top:14px}

@media (max-width:900px){
  .admin-content-table{table-layout:auto}
  .admin-article-heading{align-items:flex-start;flex-direction:column;gap:4px}
  .admin-article-heading>strong{overflow:visible;white-space:normal}
}
@media (max-width:1050px){
  .ai-watch-overview-grid,.ai-watch-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .ai-watch-overview-grid,.ai-watch-checks,.ai-watch-review-grid{grid-template-columns:1fr}
  .ai-watch-source-list li{display:block}
  .ai-watch-source-list span{margin-top:2px;text-align:left}
}

/* avatar Nova (PP dediee, pleine) dans le mock presentations */
.mock-av-nova img{transform:none;object-fit:cover}

/* ============================================================================
   Passe audit UX — 20/07/2026
   Images d'actualité, lecture article, newsletter orientée inscription et
   assistant local pour choisir un outil IA.
   ========================================================================== */

.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}

/* Actualités : l'image porte la carte, sans changer la structure de la landing. */
.news-mosaic .article-card,
.card-grid .article-card{
  gap:0;padding:0;overflow:hidden;
}
.article-card .cover{
  display:block;width:100%;height:auto;aspect-ratio:16/9;max-width:none;
  object-fit:cover;border:0;border-radius:0;
}
.article-card-body{
  display:flex;flex:1;min-width:0;flex-direction:column;gap:10px;padding:20px 21px 19px;
}
.article-card-body .meta{width:100%}
.news-mosaic .article-featured{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(250px,.78fr);
  grid-template-rows:minmax(0,1fr);padding:0;
}
.news-mosaic .article-featured .cover{
  width:100%;height:100%;min-height:350px;aspect-ratio:auto;
}
.news-mosaic .article-featured .article-card-body{padding:30px 28px}
.news-mosaic .article-featured h3{font-size:clamp(24px,2.1vw,31px);line-height:1.16}
.news-mosaic .article-featured p{font-size:15px;line-height:1.68}

/* Article : une colonne de lecture calme et jamais justifiée. */
.prose-page{max-width:1180px;padding:54px 0 44px}
.article-head{max-width:880px;margin:0 auto}
.article-head .crumbs{margin-bottom:24px;color:#ada292}
.article-head h1{
  max-width:19ch;color:var(--encre);font-size:clamp(38px,5.2vw,60px);
  line-height:1.06;letter-spacing:-.035em;text-wrap:balance;
}
.article-lead{
  max-width:760px;margin:22px 0 0;color:#cec7bd;font-size:clamp(18px,1.7vw,22px);
  line-height:1.58;text-align:left!important;hyphens:none!important;
}
.article-head .prose-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;
  margin:27px 0 0;padding:18px 0 0;border-top:1px solid rgba(192,179,160,.18);
  border-bottom:0;color:#ada292;font-size:13.5px;
}
.article-head .prose-meta b{color:#e9e2d4}
.article-head .prose-meta a{color:#edd8b9;text-underline-offset:3px}
.article-cover-frame{max-width:1040px;margin:38px auto 0}
.article-cover-frame .prose-cover{
  display:block;width:100%;max-height:none;aspect-ratio:16/9;margin:0;
  object-fit:cover;border:1px solid rgba(192,179,160,.22);border-radius:3px;
  filter:saturate(.96) contrast(1.02);box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.prose-page .prose{
  max-width:750px;margin:44px auto 0;color:#d7ddd9;font-size:18px;line-height:1.82;
}
.prose-page .prose p,
.prose-page .prose li{
  text-align:left!important;text-justify:auto!important;hyphens:none!important;
  -webkit-hyphens:none!important;
}
.prose-page .prose p{margin:0 0 1.35em}
.prose-page .prose>p:first-of-type{color:#e8e3d9;font-size:19.5px;line-height:1.78}
.prose-page .prose h2{
  margin:2.1em 0 .65em;color:#f0e8d9;font-size:clamp(28px,3vw,35px);
  line-height:1.18;letter-spacing:-.02em;text-wrap:balance;
}
.prose-page .prose h3{
  margin:1.8em 0 .55em;color:#e9e2d4;font-size:23px;line-height:1.28;
}
.prose-page .prose a{color:#edd8b9;text-decoration-thickness:1px;text-underline-offset:3px}
.prose-page .prose ul,
.prose-page .prose ol{margin:0 0 1.5em;padding-left:1.35em}
.prose-page .prose li{margin:.55em 0;padding-left:.25em}
.prose-page .prose blockquote{
  margin:2em 0;padding:5px 0 5px 25px;border-left:3px solid var(--or);
  background:none;color:#e9e2d4;font-size:20px;line-height:1.62;
}
.prose-page .prose img{display:block;width:100%;margin:2em 0;border-radius:3px}
.article-extras{max-width:750px;margin:42px auto 6px}

/* Newsletter : l'inscription est la première action, les bénéfices deviennent
   trois repères éditoriaux au lieu d'une grille de cellules arrondies. */
.newsletter-head{padding:clamp(48px,7vw,84px) 0 38px}
.newsletter-head .nl-hero-grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;gap:clamp(44px,7vw,92px);
}
.newsletter-head .nl-hero-copy h1{
  display:block;max-width:12ch;margin-top:15px;color:var(--encre);
  font-size:clamp(44px,6vw,72px);line-height:.98;letter-spacing:-.045em;
}
.newsletter-head .nl-hero-lead{
  max-width:54ch;margin:24px 0 0;color:#cec7bd;font-size:18px;line-height:1.65;
  text-align:left!important;text-justify:auto;hyphens:none;
}
.nl-hero-points{margin:27px 0 0;padding:0;list-style:none;border-top:1px solid rgba(192,179,160,.16)}
.nl-hero-points li{
  display:grid;grid-template-columns:95px 1fr;gap:15px;padding:10px 0;
  border-bottom:1px solid rgba(192,179,160,.11);font-size:13.5px;
}
.nl-hero-points b{color:#e9e2d4;font-weight:680}
.nl-hero-points span{color:#b5ac9e}
.nl-signup-first{
  padding:30px 31px 29px;border:1px solid rgba(217,184,120,.30);
  border-left:3px solid var(--or);border-radius:2px;
  background:linear-gradient(135deg,rgba(41,30,17,.98),rgba(32,22,11,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
.nl-signup-eyebrow{
  display:inline-flex;align-items:center;gap:8px;color:#d9c290;
  font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;
}
.nl-signup-first h2{margin-top:10px;color:#f0e8d9;font-size:31px;line-height:1.16}
.nl-signup-first>p{
  margin-top:10px;color:#c3bbae;font-size:14px;line-height:1.6;
  text-align:left!important;text-justify:auto!important;hyphens:none!important;
}
.nl-signup-first .nl-hero-form{margin-top:22px}
.nl-signup-first .nl-form,.nl-signup-first .nl-row{width:100%}
.nl-signup-first .nl-form input[type=email]{
  flex:0 0 48px;
  width:100%;
  min-width:0;
  min-height:48px;
  height:48px;
}
.nl-signup-first .reassure{display:flex;align-items:flex-start;gap:8px;margin-top:18px!important}
.nl-signup-first .reassure .ico{flex:0 0 auto;margin-top:.2em;color:var(--vague)}
.nl-signup-first .nl-subscriber-proof{color:#a8dfc7;font-weight:650}
.nl-editorial{padding-top:40px}
.nl-reading-time{color:#aa9f90;font-size:12.5px}
.nl-briefing{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;
  border-top:1px solid rgba(192,179,160,.20);border-bottom:1px solid rgba(192,179,160,.20);
  list-style:none;
}
.nl-briefing li{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:25px 28px 26px 0}
.nl-briefing li+li{padding-left:28px;border-left:1px solid rgba(192,179,160,.16)}
.nl-briefing-index{color:var(--or);font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.nl-briefing h3{color:#eee6d8;font-size:21px;line-height:1.2}
.nl-briefing p{
  margin-top:8px;color:#c3bbae;font-size:14px;line-height:1.58;
  text-align:left!important;text-justify:auto!important;hyphens:none!important;
}
.nl-preview-row{
  display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:22px;
  padding:19px 0;border-bottom:1px solid rgba(192,179,160,.20);
  color:#c3bbae;text-decoration:none;transition:color .2s ease,border-color .2s ease;
}
.nl-preview-row:hover{color:#e8e2d7;border-color:var(--or)}
.nl-preview-label{color:var(--or);font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}
.nl-preview-row strong{color:#e9e2d4;font-weight:640}

/* Bibliothèque : logos de marque et boussole conversationnelle. */
.res-head{align-items:center}
.res-head h3{align-self:center}
.res-logo,
.tool-result-logo{
  flex:0 0 auto;width:42px;height:42px;padding:7px;object-fit:contain;
  border:1px solid rgba(192,179,160,.24);border-radius:10px;
  background:#f4efe3;
}
#youtube .res-logo{padding:0;border-radius:50%}
.tool-guide{
  margin:24px 0 26px;padding:27px 0 25px;
  border-top:1px solid rgba(217,184,120,.32);border-bottom:1px solid rgba(192,179,160,.20);
}
.tool-guide-intro{display:grid;grid-template-columns:minmax(230px,.62fr) minmax(0,1.38fr);column-gap:34px}
.tool-guide-intro .kicker{grid-row:1/3;align-self:start;margin-top:8px}
.tool-guide-intro h3{color:#f0e8d9;font-size:clamp(25px,2.5vw,34px);line-height:1.12}
.tool-guide-intro p{
  max-width:66ch;margin-top:9px;color:#b6ad9f;font-size:14px;line-height:1.6;
  text-align:left!important;text-justify:auto!important;hyphens:none!important;
}
.tool-guide-form{margin-top:23px}
.tool-query-row{display:flex;align-items:stretch;gap:10px}
.tool-query-row input{
  min-width:0;flex:1;padding:0 18px;border:1px solid rgba(192,179,160,.30);
  border-radius:999px;background:rgba(23,15,5,.58);color:#f0e8d9;font:inherit;
}
.tool-query-row input::placeholder{color:#8f8372}
.tool-query-row input:focus{border-color:#e5cdaa;outline:2px solid rgba(220,182,128,.18);outline-offset:2px}
.tool-examples{display:flex;align-items:center;flex-wrap:wrap;gap:6px 13px;margin-top:12px;color:#908473;font-size:12px}
.tool-examples button{
  padding:2px 0;border:0;border-bottom:1px solid rgba(192,179,160,.35);
  border-radius:0;background:none;color:#c8bcaa;font:inherit;cursor:pointer;
}
.tool-examples button:hover{border-color:var(--or);color:#e0d5bd}
.tool-answer{margin-top:25px;padding-top:22px;border-top:1px dashed rgba(192,179,160,.24)}
.tool-answer-title{color:#e3ded7;font-size:16px;font-weight:520;line-height:1.5}
.tool-answer-title strong{color:#f0e8d9;font-weight:720}
.tool-results{margin:14px 0 0;padding:0;list-style:none}
.tool-result{
  display:grid;grid-template-columns:30px 44px minmax(0,1fr) auto;align-items:center;
  gap:14px;padding:15px 0;border-top:1px solid rgba(192,179,160,.12);
}
.tool-result-rank{color:#938572;font-family:var(--mono);font-size:11px}
.tool-result-logo{width:44px;height:44px}
.tool-result-heading{display:flex;align-items:center;gap:10px}
.tool-result-heading h5{color:#ece5d8;font-size:16px}
.tool-result-heading .res-tag{margin-left:0}
.tool-result-copy p{
  margin-top:4px;color:#b6ad9f;font-size:13px;line-height:1.5;
  text-align:left!important;text-justify:auto!important;hyphens:none!important;
}
.tool-result-link{color:#edd8b9;font-size:12.5px;font-weight:650;text-decoration:none;white-space:nowrap}
.tool-result-link:hover{color:#e5d7b7;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .news-mosaic .article-featured{display:flex;grid-column:auto;flex-direction:column}
  .news-mosaic .article-featured .cover{height:auto;min-height:0;aspect-ratio:16/9}
  .newsletter-head .nl-hero-grid{grid-template-columns:1fr;gap:32px}
  .newsletter-head .nl-hero-copy h1{max-width:none}
  .nl-briefing{grid-template-columns:1fr}
  .nl-briefing li{padding:20px 0}
  .nl-briefing li+li{padding-left:0;border-top:1px solid rgba(192,179,160,.14);border-left:0}
}

@media (max-width:700px){
  .prose-page{padding:30px 0 28px}
  .article-head h1{font-size:clamp(34px,10vw,46px)}
  .article-lead{margin-top:17px;font-size:17.5px;line-height:1.55}
  .article-head .prose-meta{margin-top:21px;padding-top:14px}
  .article-cover-frame{margin-top:27px}
  .article-cover-frame .prose-cover{border-radius:2px}
  .prose-page .prose{margin-top:32px;font-size:16.8px;line-height:1.78}
  .prose-page .prose>p:first-of-type{font-size:17.8px}
  .prose-page .prose h2{margin-top:1.8em;font-size:27px}
  .prose-page .prose blockquote{padding-left:18px;font-size:18px}
  .newsletter-head{padding:35px 0 24px}
  .newsletter-head .nl-hero-copy h1{font-size:clamp(43px,14vw,58px)}
  .newsletter-head .nl-hero-lead{margin-top:18px;font-size:16px}
  .nl-hero-points{margin-top:20px}
  .nl-hero-points li{grid-template-columns:78px 1fr;gap:10px;font-size:12.5px}
  .nl-signup-first{padding:23px 18px 22px}
  .nl-signup-first h2{font-size:26px}
  .nl-signup-first .nl-row{align-items:stretch;flex-direction:column}
  .nl-signup-first .nl-email-field{flex:none;width:100%;min-width:0}
  .nl-signup-first .nl-form input[type=email]{flex-basis:auto;min-height:48px}
  .nl-signup-first .nl-row .primary-button{width:100%}
  .nl-editorial{padding-top:28px}
  .nl-reading-time{width:100%}
  .nl-preview-row{grid-template-columns:1fr auto;gap:7px 12px}
  .nl-preview-label{grid-column:1/-1}
  .nl-preview-row strong{font-size:14px}
  .tool-guide{margin-top:18px;padding-top:22px}
  .tool-guide-intro{display:block}
  .tool-guide-intro .kicker{margin-bottom:12px}
  .tool-query-row{flex-direction:column}
  .tool-query-row input{min-height:48px}
  .tool-query-row .primary-button{width:100%}
  .tool-result{grid-template-columns:24px 40px minmax(0,1fr);gap:10px}
  .tool-result-logo{width:40px;height:40px}
  .tool-result-link{grid-column:3;justify-self:start}
  .tool-result-heading{align-items:flex-start;flex-direction:column;gap:5px}
  .tool-result-heading .res-tag{align-self:flex-start}
  .res-head{align-items:flex-start;flex-wrap:wrap}
  .res-logo{width:40px;height:40px}
}

/* ===== Lignes pleines sur les pages publiques — Codex 20/07 =====
   Les anciennes bornes en `ch` coupaient les introductions alors que la
   grille disposait encore de place. `pretty` pouvait aussi remonter un mot
   sur la ligne suivante. Les articles longs conservent leur colonne de
   lecture dediee via `.prose` et `.article-lead`. */
@media (min-width:761px){
  main p,
  .site-footer p{
    text-wrap:wrap;
  }

  .page-head p,
  .section-intro,
  .nl-banner p,
  .site-footer .in>div:first-child,
  .newsletter-head .nl-hero-lead,
  .tool-guide-intro p{
    max-width:none;
  }
}

/* Couche finale : ces regles doivent rester apres les anciennes passes UX. */
.newsletter-head .nl-hero-points li{
  grid-template-columns:132px minmax(0,1fr);
  gap:18px;
  padding:11px 0;
}

.nl-editorial .nl-briefing{
  border-top:0;
}

.nl-editorial .nl-briefing li{
  grid-template-columns:52px minmax(0,1fr);
  gap:17px;
  padding:27px 28px 28px 0;
}

.nl-editorial .nl-briefing li+li{
  padding-left:28px;
}

.nl-editorial .nl-briefing-index{
  display:block;
  color:#dfc27f;
  font-family:var(--display);
  font-size:32px;
  font-weight:720;
  line-height:.9;
  letter-spacing:-.05em;
}

.tool-query-row input{
  border-radius:5px;
}

.prose-page .article-head{
  max-width:820px;
}

.prose-page .article-head h1{
  max-width:22ch;
  font-size:clamp(37px,4.6vw,54px);
}

.prose-page .article-cover-frame{
  max-width:820px;
  margin-top:31px;
}

.prose-page .article-cover-frame .prose-cover{
  width:100%;
  height:auto!important;
  max-height:460px;
  aspect-ratio:16/9;
  border-radius:4px;
  filter:none;
  box-shadow:none;
}

.prose-page .reading-shell>.reading-body{
  width:100%;
  max-width:760px;
  margin:0;
}

@media (max-width:900px){
  .nl-editorial .nl-briefing li,
  .nl-editorial .nl-briefing li+li{
    padding:20px 0;
  }
}

@media (max-width:700px){
  .newsletter-head .nl-hero-points li{
    grid-template-columns:1fr;
    gap:4px;
  }

  .nl-editorial .nl-briefing li,
  .nl-editorial .nl-briefing li+li{
    grid-template-columns:38px minmax(0,1fr);
    gap:14px;
    padding:20px 0;
  }

  .nl-editorial .nl-briefing-index{
    font-size:26px;
  }

  .prose-page .article-head h1{
    font-size:clamp(33px,10vw,44px);
  }

  .prose-page .article-cover-frame{
    margin-top:24px;
  }
}

/* Dans une edition, un long post reste complet mais se lit comme une etude de
   cas editoriale, pas comme une immense carte de reseau social. */
.prose-page .reading-body .tweet-strip{
  display:block;
  margin:1.7em 0;
}

.prose-page .reading-body .tweet-card{
  max-width:none;
  margin:0;
  padding:20px 0;
  border-width:1px 0;
  border-radius:0;
  background:transparent;
}

.prose-page .reading-body .tweet-card blockquote{
  columns:2 270px;
  column-gap:32px;
  column-rule:1px solid rgba(192,179,160,.16);
  font-size:14.5px;
  line-height:1.62;
  white-space:pre-line;
}

@media (max-width:700px){
  .prose-page .reading-body .tweet-card blockquote{
    columns:1;
  }
}

/* Equilibre des angles : doux sans revenir aux capsules generiques. */
.article-card,
.perk,
.review-card,
.res-item,
.edition-row,
.res-more,
.res-cta,
.nl-signup-first{
  border-radius:10px;
}

.primary-button,
.secondary-button,
.mini-button,
.resource-filters button,
.res-sidebar a{
  border-radius:9px;
}

.nl-form input[type=email],
.tool-query-row input{
  border-radius:10px;
}

.prose-page .article-cover-frame .prose-cover,
.prose-page .reading-body :is(video,iframe),
.prose-page .reading-body figure:not(.tweet-card) img{
  border-radius:8px;
}

/* Hierarchie plus calme : moins de filets, davantage d'espace et de contraste. */
main .section-head{
  margin-bottom:20px;
  padding-bottom:0;
  border-bottom:0;
}

.newsletter-head .nl-hero-points{
  display:grid;
  gap:3px;
  border-top:0;
}

.newsletter-head .nl-hero-points li{
  border-bottom:0;
}

.nl-editorial .nl-briefing{
  gap:clamp(18px,3vw,42px);
  border:0;
}

.nl-editorial .nl-briefing li,
.nl-editorial .nl-briefing li+li{
  padding-left:0;
  padding-right:0;
  border:0;
}

.nl-free-cta{
  margin-top:10px;
  padding:22px 24px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.055);
}

.resource-filters{
  margin-top:13px;
  padding:4px 0;
  border:0;
}

.resource-filters button{
  border-color:transparent;
  background:rgba(192,179,160,.075);
}

.resource-filters button[aria-pressed="true"]{
  border-color:transparent;
  background:rgba(217,184,120,.14);
}

.tool-guide{
  padding:25px 26px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.045);
}

.res-more{
  border:0;
  background:rgba(217,184,120,.075);
}

.article-card,
.perk,
.review-card,
.res-item,
.edition-row,
.res-cta{
  border-color:rgba(192,179,160,.22);
}

.article-toc-inner{
  border-bottom:0;
}

.article-toc nav a{
  border-left-color:transparent;
}

.prose-page .reading-body h2{
  padding-top:0;
  border-top:0;
}

.direct-purpose{
  padding-top:18px;
  border:0;
}

.direct-purpose-head{
  padding-left:20px;
  border-left:3px solid rgba(217,184,120,.55);
}

.direct-use-list{
  display:grid;
  gap:13px;
  border-top:0;
}

.direct-use-list li{
  padding:7px 0;
  border-bottom:0;
}

.direct-sync-note{
  padding:12px 15px;
  border:0;
  border-radius:8px;
  background:rgba(217,184,120,.07);
}

@media (max-width:700px){
  .nl-editorial .nl-briefing li,
  .nl-editorial .nl-briefing li+li{
    border:0;
  }

  .nl-free-cta,
  .tool-guide{
    padding-left:18px;
    padding-right:18px;
  }
}

/* Repères éditoriaux : de vrais sous-titres, sans capitales ni tracking décoratif. */
.page-head .kicker,
.edition-head .kicker,
.tool-guide-intro .kicker,
.direct-purpose-head .kicker,
.auth-card .kicker{
  color:#d8c69d;
  font-size:13.5px;
  font-weight:620;
  line-height:1.4;
  letter-spacing:-.005em;
  text-transform:none;
}

.nl-signup-eyebrow,
.nl-preview-label,
.resource-filters-label,
.article-toc-kicker,
.prose .nl-kicker{
  color:#cdbd9a;
  font-size:12.5px;
  font-weight:620;
  line-height:1.4;
  letter-spacing:0;
  text-transform:none;
}

/* Passe de cohérence : interactions, parcours newsletter et lecture longue. */

/* Toutes les ressources répondent de la même façon, sans mouvement ni zoom. */
.res-item{
  transition:background-color 180ms ease,border-color 180ms ease!important;
}

.res-item:hover,
a.res-item:hover,
.res-item-member:hover{
  transform:none!important;
  border-color:rgba(229,205,170,.48)!important;
  background:rgba(73,55,30,.96);
  box-shadow:none!important;
  color:inherit;
}

/* Navigation latérale : état actif typographique, sans capsule ni coche. */
.res-sidebar a{
  position:relative;
  padding:9px 10px 9px 16px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

.res-sidebar a::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:2px;
  background:transparent;
}

.res-sidebar a:hover{
  color:#e5e1dc;
  background:transparent!important;
}

.res-sidebar a.active{
  color:#f0e8d9;
  background:transparent!important;
  font-weight:650;
}

.res-sidebar a.active::before{
  background:#d8bb78;
}

.resource-filters button{
  gap:0;
}

/* Newsletter : une promesse, un fil de lecture, puis les éditions. */
.nl-hero-summary{
  max-width:58ch;
  margin-top:27px;
  color:#c3bbae;
  font-size:14.5px;
  line-height:1.65;
}

.nl-hero-summary b{
  color:#e9e2d4;
  font-weight:680;
}

.nl-editorial{
  margin-top:26px;
  padding:34px 36px 31px;
  border-radius:10px;
  background:rgba(192,179,160,.055);
}

.nl-editorial-intro{
  display:grid;
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  column-gap:clamp(36px,6vw,82px);
  align-items:end;
}

.nl-editorial-intro .kicker{
  grid-column:1;
  color:#d8c69d;
  font-size:13.5px;
  font-weight:620;
  letter-spacing:-.005em;
  text-transform:none;
}

.nl-editorial-intro h2{
  grid-column:1;
  max-width:18ch;
  margin-top:9px;
  color:#f0e8d9;
  font-size:clamp(27px,3vw,37px);
  line-height:1.14;
}

.nl-editorial-intro p{
  grid-column:2;
  grid-row:1/3;
  max-width:62ch;
  color:#c0b8ab;
  font-size:15px;
  line-height:1.72;
}

.nl-editorial .nl-briefing{
  margin-top:34px;
  gap:clamp(24px,4vw,54px);
}

.nl-editorial .nl-briefing li,
.nl-editorial .nl-briefing li+li{
  display:block;
  padding:0;
}

.nl-editorial .nl-briefing-index{
  margin-bottom:13px;
  font-size:26px;
}

.nl-editorial .nl-briefing h3{
  font-size:19px;
}

.nl-editorial-close{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:30px;
}

.nl-editorial-close p{
  max-width:70ch;
  color:#b1a798;
  font-size:13.5px;
  line-height:1.6;
}

.nl-editorial-close strong{
  color:#e5ddcf;
}

.nl-editorial-close .secondary-button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Direct : un seul bloc explicatif et trois usages immédiatement lisibles. */
.direct-purpose{
  display:block;
  margin-top:24px;
  padding:34px 36px 30px;
  border:0;
  border-radius:10px;
  background:rgba(192,179,160,.05);
}

.direct-purpose-head{
  max-width:880px;
  padding:0;
  border:0;
}

.direct-purpose-head h2{
  max-width:23ch;
  font-size:clamp(27px,3.2vw,39px);
}

.direct-purpose-head p{
  max-width:75ch;
  font-size:15px;
}

.direct-use-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(26px,4vw,54px);
  margin-top:31px;
}

.direct-use-list li{
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  gap:12px;
  padding:0;
}

.direct-use-list li>.ico{
  margin-top:1px;
  color:#d8bb78;
}

.direct-use-list b{
  font-size:15px;
}

.direct-use-list p{
  margin-top:6px;
  font-size:13.5px;
  line-height:1.58;
}

.direct-sync-note{
  margin-top:27px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

/* Avantages Discord : surfaces tonales, aucune bordure blanche ni réaction au survol. */
.discord-benefits .card-grid{
  gap:14px;
}

.discord-benefits .perk{
  padding:25px 26px;
  border:0!important;
  background:rgba(192,179,160,.065);
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
}

.discord-benefits .perk-ico{
  width:34px;
  height:34px;
  border:0;
  border-radius:0;
  background:transparent;
}

.discord-benefits .card-grid:has(.perk) .perk{
  grid-template-columns:34px 1fr;
  column-gap:15px;
}

/* Sommaire plus présent, réellement synchronisé avec la lecture. */
.reading-shell{
  grid-template-columns:250px minmax(0,760px);
  gap:64px;
  max-width:1074px;
}

.article-toc-inner{
  padding:19px 18px 18px;
  border:0;
  border-radius:8px;
  background:rgba(192,179,160,.055);
}

.article-toc-kicker{
  margin-bottom:13px;
  font-size:13.5px;
}

.article-toc nav{
  max-height:calc(100vh - 235px);
  gap:2px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(192,179,160,.28) transparent;
}

.article-toc nav a,
.article-toc nav a.toc-level-3{
  padding:8px 5px 8px 13px;
  border-left:2px solid transparent;
  color:#afa494;
  font-size:13.5px;
  line-height:1.42;
}

.article-toc nav a.toc-level-3{
  padding-left:24px;
  font-size:12.5px;
}

.article-toc nav a:hover{
  border-left-color:rgba(217,184,120,.4);
  color:#e0ddd9;
}

.article-toc nav a.active{
  border-left-color:#d8bb78;
  color:#f0e8d9;
  font-weight:650;
}

.article-toc-source{
  margin-top:15px;
  font-size:12.5px;
}

.prose-page .reading-body h2{
  margin-top:3.2em;
  padding-top:0;
  border:0;
}

.prose-page .reading-body h2::before{
  content:"Partie " counter(reading-section);
  margin-bottom:11px;
  color:#d8c69d;
  font-family:var(--sans);
  font-size:13px;
  font-weight:620;
  line-height:1.35;
  letter-spacing:0;
}

.prose-page .reading-body h2+p{
  color:#e1e3dd;
}

@media (max-width:1120px){
  .reading-shell{
    grid-template-columns:minmax(0,760px);
    gap:30px;
  }

  .article-toc-inner{
    position:static;
  }

  .article-toc nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none;
    overflow:visible;
  }
}

@media (max-width:800px){
  .nl-editorial-intro{
    display:block;
  }

  .nl-editorial-intro h2{
    max-width:none;
  }

  .nl-editorial-intro p{
    margin-top:16px;
  }

  .direct-use-list{
    grid-template-columns:1fr;
    gap:22px;
  }
}

@media (max-width:700px){
  .nl-editorial,
  .direct-purpose{
    padding:25px 20px;
  }

  .nl-editorial .nl-briefing{
    grid-template-columns:1fr;
    gap:24px;
  }

  .nl-editorial .nl-briefing-index{
    margin-bottom:8px;
    font-size:23px;
  }

  .nl-editorial-close{
    align-items:stretch;
    flex-direction:column;
    gap:17px;
  }

  .nl-editorial-close .secondary-button{
    width:100%;
  }

  .article-toc nav{
    grid-template-columns:1fr;
  }
}

/* Le sommaire complet suit la lecture. Un sticky place sur son enfant restait
   prisonnier d'un aside de la meme hauteur et ne pouvait donc pas se deplacer. */
.article-toc{
  position:sticky;
  top:92px;
  align-self:start;
}

.article-toc-inner{
  position:static;
}

/* Respirations editoriales inserees dans les actus longues. */
.prose-page .reading-body .article-keypoints{
  margin:2em 0 2.35em;
  padding:22px 24px;
  border-radius:8px;
  background:rgba(192,179,160,.075);
}

.prose-page .reading-body .article-keypoints>strong,
.prose-page .reading-body .article-action>strong{
  display:block;
  margin-bottom:10px;
  color:#eddfc6;
  font-family:var(--display);
  font-size:18px;
  font-weight:660;
}

.prose-page .reading-body .article-keypoints ul{
  margin:0;
  padding-left:1.2em;
}

.prose-page .reading-body .article-keypoints li{
  margin:.45em 0;
  color:#d4d0cb;
  font-size:15px;
  line-height:1.58;
}

.prose-page .reading-body .article-signals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:2.1em 0 2.5em;
}

.prose-page .reading-body .article-signals>div{
  min-width:0;
  padding:17px 18px;
  border-radius:8px;
  background:rgba(217,184,120,.075);
}

.prose-page .reading-body .article-signals strong{
  display:block;
  color:#e5c77f;
  font-family:var(--display);
  font-size:clamp(23px,3vw,31px);
  font-weight:680;
  line-height:1.05;
}

.prose-page .reading-body .article-signals span{
  display:block;
  margin-top:7px;
  color:#b7ad9f;
  font-size:12.5px;
  line-height:1.45;
}

.prose-page .reading-body .article-action{
  margin:2.25em 0;
  padding:5px 0 5px 22px;
  border-left:3px solid rgba(126,198,166,.72);
}

.prose-page .reading-body .article-action p{
  margin:0;
  color:#cbd5d2;
  font-size:15.5px;
  line-height:1.65;
}

@media (max-width:1120px){
  .article-toc{
    position:static;
  }
}

@media (max-width:700px){
  .prose-page .reading-body .article-keypoints{
    padding:19px 18px;
  }

  .prose-page .reading-body .article-signals{
    grid-template-columns:1fr;
  }
}

/* Une seule voix typographique pour tout le texte courant public. */
main :where(p,li,blockquote,figcaption,dd,dt,td,th,label,input,textarea){
  font-family:var(--sans) !important;
}

/* Lecture plus continue : les parties restent distinctes sans grands vides. */
.prose-page .prose p{
  margin-bottom:1.05em;
}

.prose-page .prose ul,
.prose-page .prose ol{
  margin-bottom:1.15em;
}

.prose-page .reading-body h2{
  margin-top:1.55em;
  margin-bottom:.58em;
}

.prose-page .reading-body h3{
  margin-top:1.35em;
  margin-bottom:.48em;
}

.prose-page .reading-body .article-keypoints,
.prose-page .reading-body .article-signals,
.prose-page .reading-body .article-action{
  margin-top:1.55em;
  margin-bottom:1.75em;
}

.prose-page .reading-body .article-diagram,
.prose-page .reading-body .article-video{
  margin:1.65em 0 1.9em;
}

.prose-page .reading-body .article-diagram img{
  width:100%;
  margin:0;
  border-radius:8px;
}

.prose-page .reading-body .article-diagram figcaption,
.prose-page .reading-body .article-video figcaption{
  margin-top:9px;
  color:#aba090;
  font-size:12.5px;
  line-height:1.5;
}

.prose-page .reading-body .article-video iframe{
  margin:0;
  border:0;
}

.prose-page .reading-body .article-resources{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin:1.65em 0 1.9em;
}

.prose-page .reading-body .article-resources>a{
  display:block;
  padding:16px 17px;
  border-radius:8px;
  background:rgba(192,179,160,.065);
  color:#d9e1df;
  text-decoration:none;
}

.prose-page .reading-body .article-resources>a:hover{
  background:rgba(192,179,160,.105);
  color:#f0e8d9;
}

.prose-page .reading-body .article-resources span{
  display:block;
  margin-bottom:5px;
  color:#d8c69d;
  font-size:12px;
  font-weight:650;
}

.prose-page .reading-body .article-resources b{
  display:block;
  font-size:14px;
  line-height:1.45;
}

@media (max-width:700px){
  .prose-page .reading-body h2{
    margin-top:1.3em;
  }

  .prose-page .reading-body .article-resources{
    grid-template-columns:1fr;
  }
}

/* Justification editoriale par defaut, comme un paragraphe Word justifie.
   La derniere ligne reste naturellement alignee au debut. */
:root .public-site :is(main,.site-footer) :is(p,li,blockquote,figcaption,dd){
  text-align:justify !important;
  text-align-last:auto;
  text-justify:inter-word !important;
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
  overflow-wrap:break-word;
}

/* Titres de chapitres : le titre porte seul la hierarchie editoriale.
   Le retour normal remplit la ligne au lieu d'equilibrer artificiellement
   deux lignes courtes. */
.prose-page .reading-shell{
  grid-template-columns:250px minmax(0,820px);
  max-width:1134px;
}

.prose-page .reading-shell>.reading-body{
  max-width:820px;
}

.prose-page .reading-body h2{
  display:block;
  max-width:none;
  margin-top:1.65em;
  margin-bottom:.62em;
  padding:0;
  color:#f3ebdc;
  font-size:clamp(29px,2.2vw,31px);
  font-weight:680;
  line-height:1.1;
  letter-spacing:-.032em;
  text-wrap:wrap;
}

.prose-page .reading-body h2::before{
  content:none;
  display:none;
}

@media (max-width:700px){
  .prose-page .reading-body h2{
    margin-top:1.45em;
    font-size:clamp(26px,7vw,28px);
    line-height:1.13;
    letter-spacing:-.026em;
  }
}

@media (max-width:1120px){
  .prose-page .reading-shell{
    grid-template-columns:minmax(0,820px);
    max-width:820px;
  }
}

/* Newsletter : une seule composition lisible au lieu de zones flottantes. */
.nl-editorial{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  grid-template-areas:
    "intro briefing"
    "close briefing";
  column-gap:clamp(54px,7vw,108px);
  row-gap:26px;
  align-items:start;
  padding:clamp(38px,4.5vw,58px) clamp(32px,4.5vw,64px);
}

.nl-editorial-intro{
  display:block;
  grid-area:intro;
}

.nl-editorial-intro h2{
  max-width:17ch;
  margin:0;
  color:#f0e8d9;
  font-size:clamp(30px,3vw,40px);
  font-weight:680;
  line-height:1.08;
  letter-spacing:-.032em;
  text-wrap:wrap;
}

.nl-editorial-intro p{
  max-width:48ch;
  margin-top:20px;
  color:#c7bfb3;
  font-size:15px;
  line-height:1.68;
}

.nl-editorial .nl-briefing{
  display:flex;
  grid-area:briefing;
  flex-direction:column;
  align-self:center;
  gap:29px;
  margin:0;
  padding:0;
}

.nl-editorial .nl-briefing li,
.nl-editorial .nl-briefing li+li{
  display:block;
  margin:0;
  padding:0;
}

.nl-editorial .nl-briefing h3{
  color:#eee6d8;
  font-size:20px;
  font-weight:680;
  line-height:1.25;
  letter-spacing:-.018em;
}

.nl-editorial .nl-briefing p{
  max-width:58ch;
  margin-top:7px;
  color:#c0b7aa;
  font-size:14.5px;
  line-height:1.62;
}

.nl-editorial-close{
  display:block;
  grid-area:close;
  align-self:end;
  margin:0;
}

.nl-editorial-close p{
  max-width:46ch;
  color:#b5ac9e;
  font-size:13.5px;
  line-height:1.62;
}

.nl-editorial-close .secondary-button{
  display:inline-flex;
  width:auto;
  margin-top:18px;
}

@media (max-width:900px){
  .nl-editorial{
    grid-template-columns:1fr;
    grid-template-areas:
      "intro"
      "briefing"
      "close";
    row-gap:30px;
  }

  .nl-editorial-intro h2,
  .nl-editorial-intro p,
  .nl-editorial .nl-briefing p,
  .nl-editorial-close p{
    max-width:none;
  }
}

@media (max-width:700px){
  .nl-editorial{
    padding:28px 20px;
    row-gap:27px;
  }

  .nl-editorial-intro h2{
    font-size:clamp(28px,8.2vw,33px);
  }

  .nl-editorial .nl-briefing{
    gap:23px;
  }

  .nl-editorial-close .secondary-button{
    width:100%;
  }
}

/* Corrections de lecture du 20 juillet 2026.
   Les états actifs restent strictement stables et les contenus longs
   retrouvent une hiérarchie éditoriale plus nette. */
.article-toc nav a,
.article-toc nav a.toc-level-3,
.article-toc nav a:hover,
.article-toc nav a:focus-visible,
.article-toc nav a.active{
  box-sizing:border-box;
  border-left:0 !important;
  font-weight:580;
  transform:none !important;
  transition:none !important;
}

.article-toc nav a,
.article-toc nav a:hover,
.article-toc nav a:focus-visible,
.article-toc nav a.active{
  padding:8px 10px 8px 12px;
}

.article-toc nav a.toc-level-3,
.article-toc nav a.toc-level-3:hover,
.article-toc nav a.toc-level-3:focus-visible,
.article-toc nav a.toc-level-3.active{
  padding-left:22px;
}

.article-toc nav a.active{
  background:rgba(217,184,120,.075);
  color:#f0e8d9;
}

.article-toc nav a:hover,
.article-toc nav a:focus-visible{
  background:rgba(192,179,160,.055);
  color:#e3e0dc;
}

.prose-page .reading-body .nl-kicker{
  display:block;
  margin:1.8em 0 .55em;
  color:#e4bd68;
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:740;
  line-height:1.35;
  letter-spacing:-.012em;
  text-transform:none;
}

.prose-page .reading-body .nl-kicker+h2{
  margin-top:0;
}

.prose-page .reading-body h3{
  color:#e8d5ba;
  font-size:clamp(20px,1.75vw,24px);
  font-weight:680;
  line-height:1.22;
  letter-spacing:-.02em;
}

.prose-page .reading-body .tweet-card{
  width:min(100%,660px);
  max-width:660px;
  margin:1.8em auto 2em;
  padding:21px 22px 18px;
  border:1px solid rgba(192,179,160,.36);
  border-radius:12px;
  background:#1d1611;
  box-shadow:0 14px 34px rgba(10,7,2,.16);
}

.prose-page .reading-body .tweet-card .tw-head{
  gap:11px;
}

.prose-page .reading-body .tweet-card .tw-av{
  width:44px;
  height:44px;
}

.prose-page .reading-body .tweet-card .tw-platform{
  margin-left:auto;
  color:#afa290;
  font-size:12px;
  font-weight:620;
  white-space:nowrap;
}

.prose-page .reading-body .tweet-card .tw-x{
  flex:0 0 auto;
  margin-left:2px;
  color:#e6e2dc;
  opacity:.8;
}

.prose-page .reading-body .tweet-card blockquote{
  columns:auto;
  column-gap:normal;
  column-rule:0;
  margin:18px 0 0;
  color:#e3e0dc;
  font-size:16px;
  font-weight:450;
  line-height:1.58;
  text-align:left !important;
  text-align-last:auto;
  hyphens:none !important;
  white-space:pre-line;
}

.prose-page .reading-body .tweet-card figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding-top:13px;
  border-top:1px solid rgba(192,179,160,.16);
  color:#a19583;
  font-size:12.5px;
}

.prose-page .reading-body .tweet-card figcaption a{
  color:#dec9aa;
  font-weight:640;
}

.direct-purpose-head,
.direct-purpose-head h2,
.direct-purpose-head p{
  width:100%;
  max-width:none;
}

.direct-purpose-head h2{
  text-wrap:wrap;
}

.direct-purpose-head .kicker{
  font-size:15px;
  font-weight:690;
}

.discord-benefits .perk{
  border-color:transparent !important;
  background:rgba(192,179,160,.065) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  transition:none !important;
}

.discord-benefits .perk .perk-ico{
  filter:none !important;
  transform:none !important;
}

.discord-benefits .perk,
.discord-benefits .perk *,
.discord-benefits .perk::before,
.discord-benefits .perk::after{
  animation:none !important;
  transition:none !important;
}

.nl-editorial .nl-briefing li,
.nl-editorial .nl-briefing li+li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:16px;
  align-items:start;
}

.nl-editorial .nl-briefing-index{
  display:block;
  margin-top:1px;
  color:#e2bd68;
  font-family:var(--display);
  font-size:29px;
  font-weight:720;
  line-height:1;
  letter-spacing:-.04em;
}

.nl-editorial-close .nl-free-word{
  color:#e7c36f;
  font-weight:820;
  letter-spacing:.035em;
}

@media (max-width:700px){
  .prose-page .reading-body .tweet-card{
    padding:18px 17px 16px;
  }

  .prose-page .reading-body .tweet-card .tw-platform{
    display:none;
  }

  .nl-editorial .nl-briefing li,
  .nl-editorial .nl-briefing li+li{
    grid-template-columns:35px minmax(0,1fr);
    gap:13px;
  }

  .nl-editorial .nl-briefing-index{
    font-size:26px;
  }
}

/* La grille du profil garde sa largeur éditoriale après les anciennes règles. */
.profile-col{
  max-width:1120px;
}

@media (max-width:760px){
  .auth-grid,
  .auth-grid-register{
    width:100%;
    min-width:0;
    grid-template-columns:minmax(0,1fr);
  }

  .auth-grid .auth-card,
  .account-create-form,
  .auth-form-section,
  .avatar-fieldset{
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .account-create-form :is(input[type=text],input[type=email],input[type=password],input[type=file],textarea){
    width:100%;
    min-width:0;
    max-width:100%;
  }

  .account-benefits p,
  .account-security-note p{
    overflow-wrap:anywhere;
  }
}

/* Confirmation newsletter. Le message reste centré malgré la justification globale. */
.nl-result{
  padding:90px 0 60px;
  text-align:center;
}

.nl-result h1,
.nl-result > .nl-result-message{
  margin-right:auto;
  margin-left:auto;
}

.public-site main .page-head.nl-result > p.nl-result-message{
  text-align:center !important;
  text-align-last:center;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

.nl-result .hero-cta{
  justify-content:center;
}

@media (max-width:700px){
  .nl-result{
    padding:54px 0 42px;
  }
}

/* Profil : une seule action apparaît après une modification réelle. */
.profile-save-bar[hidden]{display:none}

.profile-col:has(.profile-save-bar:not([hidden])){
  padding-bottom:140px;
}

.profile-save-bar{
  position:fixed;
  right:0;
  bottom:18px;
  left:0;
  z-index:30;
  display:flex;
  width:min(calc(100% - 32px),1088px);
  margin:0 auto;
  padding:14px 15px 14px 18px;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  border:1px solid rgba(217,184,120,.42);
  border-radius:10px;
  background:#251c14;
  box-shadow:0 18px 44px rgba(19,12,3,.38);
}

.profile-save-bar p{
  display:grid;
  gap:2px;
  color:#c0b7aa;
  font-size:12.5px;
  line-height:1.4;
}

.profile-save-bar strong{
  color:#f0e8d9;
  font-size:13.5px;
}

.profile-save-bar .primary-button{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Fiche communautaire ouverte depuis le bouton Discord. */
.member-profile-page{
  display:grid;
  width:min(calc(100% - 40px),780px);
  min-height:calc(100dvh - 62px);
  padding:clamp(48px,8vh,90px) 0;
  align-content:center;
  gap:18px;
}

.member-profile-back{
  width:max-content;
  color:#c9b991;
  font-size:13px;
  font-weight:650;
  text-decoration:none;
}

.member-profile-back:hover{
  color:#f0e8d9;
  text-decoration:underline;
  text-underline-offset:4px;
}

.member-profile-back:active{
  transform:translateY(1px);
}

.member-profile-card{
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  gap:30px;
  align-items:center;
  padding:clamp(28px,5vw,46px);
  border:1px solid rgba(192,179,160,.17);
  border-radius:10px;
  background:#262019;
  box-shadow:0 20px 50px rgba(19,12,3,.24);
}

.member-profile-avatar{
  width:132px;
  height:132px;
  border:1px solid rgba(240,232,217,.24);
  border-radius:50%;
  object-fit:cover;
}

.member-profile-copy{
  min-width:0;
}

.member-profile-label{
  color:#c9b991;
  font-size:12px;
  font-weight:650;
}

.member-profile-copy h1{
  margin-top:5px;
  color:#f0e8d9;
  font-size:clamp(30px,5vw,43px);
  line-height:1.12;
  overflow-wrap:anywhere;
}

.member-profile-bio{
  max-width:58ch;
  margin-top:15px;
  color:#d1cbc3;
  font-size:15px;
  line-height:1.7;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

.member-profile-empty{
  color:#aca192;
  font-style:italic;
}

@media (max-width:620px){
  .member-profile-page{
    width:min(calc(100% - 32px),780px);
    min-height:calc(100dvh - 58px);
    padding:38px 0 54px;
    align-content:start;
  }

  .member-profile-card{
    grid-template-columns:minmax(0,1fr);
    gap:21px;
    padding:26px 22px 29px;
  }

  .member-profile-avatar{
    width:96px;
    height:96px;
  }

  .member-profile-copy h1{
    font-size:30px;
  }
}

.nl-subscribed-state{
  display:grid;
  width:100%;
  gap:5px;
  padding:15px 16px;
  border-left:3px solid #79c6a6;
  border-radius:8px;
  background:rgba(121,198,166,.09);
  color:#c4bbae;
  font-size:13px;
  line-height:1.5;
}

.nl-subscribed-state strong{
  color:#c7e4d8;
  font-size:14px;
}

.profile-save-bar-noscript{
  position:static;
  width:100%;
  margin-top:16px;
  justify-content:flex-end;
}

@media (max-width:700px){
  .chat-compose{
    align-items:stretch;
    flex-direction:column;
  }

  .chat-compose textarea{
    width:100%;
    min-height:92px;
  }

  .chat-compose .primary-button{
    width:100%;
    min-height:48px;
  }

  .profile-save-bar{
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    left:12px;
    width:auto;
    padding:12px;
  }

  .profile-save-bar p{
    display:none;
  }

  .profile-save-bar .primary-button{
    width:100%;
    padding-right:15px;
    padding-left:15px;
  }
}


/* =====================================================================
   SYSTEME LAVALLEY.XYZ (21 aout 2026)
   Le portail parle la langue de la landing lavalley.xyz — memes tokens,
   meme typographie (Inter en display leger 440, tracking serre), meme
   header pill de verre, memes boutons pill au degrade cardinal avec
   balayage lumineux, meme fond (grille 96px quasi invisible + nappes
   radiales faibles). Une seule couche, une seule voix. Remplace les
   couches DA/EDITION du 21/08 (retirees).
   Source de verite du systeme : /var/www/lavalley.xyz/styles.css.
   ===================================================================== */
:root{
  --charbon-x:#11100f;      /* tokens exacts de la landing */
  --ink:#080807;
  --ivory:#f7f3e9;
  --ivory-muted:#d8d0c2;
  --sand:#d9c4a1;
  --gold-x:#d99052;
  --cardinal-x:#9e2b24;
  --cardinal-hot:#c33a2f;
  --ember:#ef7d52;
  --sage-x:#6f8a6b;
  --line-x:rgba(247,243,233,.14);
  --line-strong-x:rgba(247,243,233,.32);
  --surface-x:rgba(28,28,30,.82);
  --surface-solid:#171514;
  --ease-x:cubic-bezier(.22,1,.36,1);

  /* mapping vers les variables historiques du portail */
  --fond:var(--charbon-x);
  --surface:var(--surface-solid);
  --champ:#151312;
  --voile:#201d1b;
  --encre:var(--ivory);
  --encre-2:var(--ivory-muted);
  --marine:var(--sand);
  --marine-2:var(--ivory);
  --charbon:var(--ivory);
  --or:var(--gold-x);
  --vague:var(--sage-x);
  --cardinal:var(--cardinal-x);
  --ligne:var(--line-x);
  --ligne-forte:var(--line-strong-x);
  --wm-bleu:var(--cardinal-hot);
  --max:1200px;
}
html{background:var(--charbon-x)}
::selection{color:var(--ivory);background:var(--cardinal-x)}

/* --- fond : grille discrete + nappes radiales, comme la landing --- */
.atmos,.atmos-home{display:none}
.public-site::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(247,243,233,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,243,233,.022) 1px, transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent)}
.public-site::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background:
    radial-gradient(circle at 18% 24%, rgba(158,43,36,.14), transparent 26%),
    radial-gradient(circle at 82% 76%, rgba(111,138,107,.11), transparent 30%),
    linear-gradient(90deg, rgba(158,43,36,.08), transparent 42%, rgba(217,144,82,.07))}
.public-site main,.public-site .site-footer{position:relative;z-index:1}

/* --- typographie : Inter, display leger, tracking serre --- */
.public-site main h1{
  font-family:var(--sans);font-weight:440;letter-spacing:-.03em;line-height:1.02;
  color:var(--ivory)}
.public-site main h2,.public-site .section-head h2{
  font-family:var(--sans);font-weight:440;letter-spacing:-.02em;color:var(--ivory)}
.public-site main h3{font-weight:520;letter-spacing:-.01em}
.public-site main h1 .accent-text,
.public-site main h2 .accent-text{color:inherit}
.title-dot{color:var(--cardinal-hot)}

/* eyebrows : sable, petites capitales, comme la landing */
.hero3d .hero .k,.une-kicker,.page-kicker,
.section-head .kicker{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-indent:0;text-transform:uppercase;color:var(--sand);opacity:1}

/* --- header : pill de verre flottant --- */
.site-header{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  width:min(calc(100% - 32px),var(--max));min-height:58px;
  display:flex;align-items:center;gap:20px;
  padding:8px 8px 8px 20px;
  border:1px solid rgba(247,243,233,.14);border-radius:40px;
  background:rgba(12,11,10,.34);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:none;z-index:30;
  transition:background .22s var(--ease-x),border-color .22s var(--ease-x),
    box-shadow .22s var(--ease-x),border-radius .22s var(--ease-x)}
.site-header.scrolled,.site-header.past-hero{
  border-color:rgba(247,243,233,.24);background:rgba(12,11,10,.76);
  box-shadow:0 18px 44px rgba(0,0,0,.24)}
.site-header .brand{gap:5px;align-items:baseline}
.site-header .brand-mark{display:none}       /* la landing : texte + point, pas d'icone */
.site-header .brand-text{color:var(--ivory);font-size:20px;font-weight:500;line-height:1}
.wm-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--cardinal-hot);margin-left:2px;
  box-shadow:0 0 18px rgba(195,58,47,.68);
  transform-origin:center}
@media (prefers-reduced-motion: no-preference){
  .wm-dot{animation:ember-pulse 2.8s var(--ease-x) infinite}
  @keyframes ember-pulse{
    0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(195,58,47,.5)}
    50%{transform:scale(1.25);box-shadow:0 0 22px rgba(195,58,47,.85)}
  }
}
.site-header .site-nav{gap:6px}
.site-header .site-nav a{
  color:rgba(247,243,233,.78);font-size:14px;border-radius:999px;padding:10px 12px;
  transition:color .18s var(--ease-x),background .18s var(--ease-x)}
.site-header .site-nav a:hover,.site-header .site-nav a.active{
  color:var(--ivory);background:rgba(247,243,233,.08);border-bottom:none}
.site-header .site-nav a .nav-ico{display:none}   /* la landing : du texte, pas d'icones */
.site-header .header-cta .secondary-button{
  min-height:42px;padding:0 18px;border-radius:999px;
  color:var(--ivory);background:rgba(247,243,233,.1);
  border:1px solid rgba(247,243,233,.12);font-size:14.5px}
.site-header .header-cta .secondary-button:hover{
  border-color:rgba(247,243,233,.3);background:rgba(247,243,233,.14);color:var(--ivory)}
.site-header.nav-open{border-radius:24px}
/* la page respire sous le header flottant */
.public-site main{padding-top:0}
body.public-site{padding-top:0}

/* --- boutons : pills, degrade cardinal, balayage lumineux --- */
.primary-button,.secondary-button{
  position:relative;overflow:hidden;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:999px;
  font-size:15px;font-weight:520;line-height:1;white-space:nowrap;
  transition:transform .18s var(--ease-x),background .18s var(--ease-x),
    border-color .18s var(--ease-x),color .18s var(--ease-x),box-shadow .18s var(--ease-x)}
.primary-button::before,.secondary-button::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.18) 44%,transparent 64%);
  opacity:0;transform:translateX(-120%);
  transition:opacity .18s var(--ease-x),transform .56s var(--ease-x)}
.primary-button:hover::before,.secondary-button:hover::before{
  opacity:1;transform:translateX(120%)}
.primary-button{
  padding:0 24px;color:var(--ivory);
  background:linear-gradient(135deg,var(--cardinal-x),var(--cardinal-hot) 58%,var(--ember));
  box-shadow:0 14px 34px rgba(158,43,36,.24)}
.primary-button:hover{
  color:#fff;background:linear-gradient(135deg,var(--cardinal-hot),var(--ember));
  transform:translateY(-2px);box-shadow:0 20px 48px rgba(195,58,47,.28)}
.secondary-button{
  padding:0 22px;color:var(--ivory);
  background:rgba(247,243,233,.1);border-color:rgba(247,243,233,.12)}
.secondary-button:hover{
  color:var(--ivory);border-color:rgba(247,243,233,.3);background:rgba(247,243,233,.14)}

/* --- hero vallee --- */
.hero3d{height:min(100svh,1000px)}
#poster{background:
  #11100f url(/hero-da/graybox-vallee/poster.jpg) center/cover no-repeat}
.hero3d .hero h1.hero-wm.hero-type{
  font-family:var(--sans);font-weight:440;letter-spacing:-.03em;line-height:.98;
  font-size:clamp(44px,7vw,92px);color:var(--ivory);
  text-shadow:0 18px 46px rgba(0,0,0,.34);max-width:820px}
.hero3d .hero .hero-copy{
  max-width:600px;margin:4px 0 0;color:rgba(247,243,233,.84);
  font-size:clamp(17px,1.5vw,20px);line-height:1.5}
.hero3d .hero .hero-cta{margin-top:14px;gap:12px}
.hero3d .hero .hero-note{color:rgba(247,243,233,.62);font-size:13.5px}
.hero-fade{height:260px;background:linear-gradient(180deg,
  rgba(17,16,15,0) 0%, rgba(17,16,15,.6) 60%, var(--charbon-x) 100%)}

/* --- sections --- */
.section{padding:52px 0}
.site-content .section:first-of-type{padding-top:10px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:18px;margin-bottom:26px;padding-top:0}
.section-head::before{content:none}
.section-head h2{font-size:clamp(28px,3.4vw,44px)}
.section-head a{font-family:var(--sans);font-size:14px;color:rgba(247,243,233,.66);
  position:static;transition:color .18s var(--ease-x)}
.section-head a::after{content:" \2192"}
.section-head a:hover{color:var(--ivory);text-decoration:none}

/* --- la une + liste journal --- */
.une{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;
  text-decoration:none;color:inherit}
.une-media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:16px;border:1px solid var(--line-x);
  transition:transform .5s var(--ease-x)}
.une:hover .une-media img{transform:scale(1.012)}
.une-body h3{font-weight:440;letter-spacing:-.02em;
  font-size:clamp(26px,2.6vw,38px);line-height:1.08;margin:12px 0 12px;color:var(--ivory)}
.une-body p{color:var(--ivory-muted);font-size:16px;line-height:1.55;max-width:46ch}
.une .meta{margin-top:16px;font-size:13px;color:var(--ivory-muted)}
.une .meta b{color:var(--sand);font-weight:560}
.une:hover .une-body h3{color:#fff}
.journal{list-style:none;margin:38px 0 0;padding:0}
.journal li{border-top:1px solid var(--line-x)}
.journal a{display:grid;grid-template-columns:40px 1fr auto;gap:18px;
  align-items:baseline;padding:18px 10px;margin:0 -10px;border-radius:14px;
  text-decoration:none;color:inherit;
  transition:background .18s var(--ease-x)}
.journal a:hover{background:rgba(247,243,233,.05)}
.journal .jnum{font-size:13px;font-weight:560;color:var(--sand)}
.journal h4{font-weight:520;letter-spacing:-.01em;font-size:17.5px;line-height:1.3;
  margin:0;color:var(--ivory)}
.journal .jex{color:var(--ivory-muted);font-size:14px;line-height:1.5;margin:4px 0 0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.journal time{font-size:13px;color:rgba(247,243,233,.55);white-space:nowrap}

/* --- cartes contenus (actus, editions, avis) : sobres, filets, verre au survol --- */
.article-card,.edition-row,.review-card{
  background:transparent;border:none;border-radius:16px;box-shadow:none;padding:0}
.article-card:hover,.edition-row:hover{transform:none;box-shadow:none;background:transparent}
.article-card .cover{border-radius:14px;border:1px solid var(--line-x);filter:none}
.article-card:hover .cover{transform:scale(1.015);filter:none}
.article-card .article-card-body{padding:14px 2px 0}
.article-card h3{font-size:18px;font-weight:520;line-height:1.3;color:var(--ivory)}
.article-card:hover h3{color:#fff;text-decoration:none}
.article-card .meta{font-size:13px;color:var(--ivory-muted)}
.article-card .meta b{color:var(--sand);font-weight:560}
.article-featured{padding:0}
.article-featured h3{font-size:24px;font-weight:480;letter-spacing:-.015em}
.news-mosaic{gap:36px 28px}
.edition-row{border-top:1px solid var(--line-x);border-radius:0;padding:20px 10px;margin:0 -10px}
.edition-row:hover{background:rgba(247,243,233,.05);border-radius:14px}
.edition-row h3{font-weight:520;font-size:18px}
.edition-row time,.edition-side time{font-size:13px;color:rgba(247,243,233,.55)}
.review-card{border-top:1px solid var(--line-x);padding:22px 2px 0}
.review-card blockquote{font-size:16.5px;line-height:1.6;color:var(--ivory)}
.review-card figcaption{font-size:13px;color:var(--ivory-muted)}

/* --- revelations : cascade sobre de la landing --- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(14px)}
  .reveal.in{opacity:1;transform:none;
    transition:opacity .6s var(--ease-x),transform .7s var(--ease-x);
    transition-delay:calc(var(--ri,0)*70ms)}
}

/* --- footer --- */
.site-footer{border-top:1px solid var(--line-x)}
.site-footer .foot-base{font-size:13px;color:rgba(247,243,233,.5);letter-spacing:0}

@media (max-width: 900px){
  .une{grid-template-columns:1fr;gap:20px}
  .journal a{grid-template-columns:32px 1fr;gap:12px}
  .journal time{display:none}
  .site-header{padding:8px 8px 8px 16px}
}

/* les pages sans hero respirent sous le pill flottant */
.public-site main{padding-top:110px}
.public-site main:has(.hero3d){padding-top:0}

/* neutralisation des calques historiques du header (fond opaque + lueurs +
   grain) : le pill de verre reprend la main */
.site-header,.site-header.scrolled,.site-header.past-hero,.site-header.nav-open{
  min-height:58px;background:rgba(12,11,10,.34);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.site-header.scrolled,.site-header.past-hero{
  background:rgba(12,11,10,.76);box-shadow:0 18px 44px rgba(0,0,0,.24)}
body:has(.hero3d) .site-header:not(.past-hero){box-shadow:none}
.site-header::before,.site-header::after{content:none}
/* grille landing : marque | nav centree | action */
.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-header .brand{justify-self:start}
.site-header .site-nav{justify-self:center}
.site-header .header-cta{justify-self:end}
@media (max-width: 900px){
  .site-header{display:flex}
}
.hero3d .hero .hero-copy{text-align:center;margin-inline:auto}