/* =========================================================================
   site-fixes.css — correctifs appliqués aux pages générées par Astro
   (accueil + les 9 pages du menu). Ces pages sont committées telles quelles
   dans le repo : leur CSS `_astro/gold.*.css` est un build hashé qu'on ne
   modifie pas. Ce fichier surcharge, il ne remplace rien.

   À réappliquer après chaque rebuild Astro (voir README-MAINTENANCE.md).

   1. Navigation mobile : sous 1180px, `.navlinks` est masqué par le build et
      aucun bouton burger n'existe → plus aucune navigation possible.
      Le burger et le panneau sont injectés par /assets/nav-mobile.js.
   2. Vignettes de la galerie d'analyses : le ratio 820/462 rognait les
      bannières (format 40/21), coupant le titre incrusté.
   ========================================================================= */

/* ---------- 1. Navigation mobile ---------- */

.burger-mobile {
  display: none;
  background: none;
  border: 0;
  color: var(--gold-light, #f2dfa8);
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  border-radius: 2px;
}
.burger-mobile:focus-visible { outline: 2px solid var(--gold, #d4a24c); outline-offset: 2px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ink, #0b0a08);
  padding: 84px 24px 32px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.mobile-nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; }

/* Le panneau passe au-dessus du reste, mais la barre de navigation doit
   rester accessible : sans ça le burger (donc la fermeture) est recouvert. */
body.mobile-nav-open .nav {
  z-index: 80;
  background: var(--ink, #0b0a08);
  border-bottom-color: var(--line, #d4a24c2e);
}

.mobile-nav a {
  display: block;
  padding: 13px 2px;
  color: var(--paper, #ede8df);
  font-size: 1.06rem;
  border-bottom: 1px solid var(--line, #d4a24c2e);
}
.mobile-nav a[aria-current="page"] { color: var(--gold-light, #f2dfa8); }
.mobile-nav .mn-group {
  display: block;
  margin: 22px 0 4px;
  color: var(--gold, #d4a24c);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.mobile-nav .mn-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}
.mobile-nav .mn-cta a {
  border: 1px solid var(--line, #d4a24c2e);
  border-radius: 2px;
  text-align: center;
  padding: 14px;
}
.mobile-nav .mn-cta a.is-gold {
  background: var(--gold, #d4a24c);
  border-color: var(--gold, #d4a24c);
  color: var(--ink, #0b0a08);
  font-weight: 500;
}

@media (max-width: 1180px) {
  .burger-mobile { display: block; }
  /* le CTA texte prend toute la place sur petit écran : on garde le burger seul */
  .nav-cta .btn-primary { display: none; }
}
@media (min-width: 1181px) {
  .mobile-nav { display: none; }
}

body.mobile-nav-open { overflow: hidden; }

/* ---------- 2. Vignettes de la galerie d'analyses ---------- */
/* Les bannières d'articles sont au format 40/21 (1600x840, 1200x630).
   Le ratio 820/462 du build rognait ~7% de largeur, donc le titre. */
.tile-img { aspect-ratio: 40 / 21; }
.tile-img img { transform: none; }
.tile:hover .tile-img img { transform: scale(1.06); }

/* ---------- 3. Visuel data-viz — section "Le constat" ---------- */
/* Même technique que .vision-bg (déjà dans le build Astro) : image de fond
   + dégradé de fondu vers --ink. Fondu vertical en px fixes (pas en %) pour
   ne jamais empiéter sur .cards en dessous, quelle que soit la hauteur
   réelle de la section sur chaque viewport. */
#constat { position: relative; }
#constat .constat-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .55;
  background: url(/img/constat-bg.png) 68% 0 / 56% auto no-repeat;
  pointer-events: none;
}
#constat .constat-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 22%, transparent 58%),
    linear-gradient(180deg, transparent 0, transparent 220px, var(--ink) 440px);
}
#constat .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  #constat .constat-bg { opacity: .32; background-size: 78% auto; }
}
@media (max-width: 640px) {
  #constat .constat-bg { display: none; }
}

/* ---------- 4. Effet spotlight au survol — cartes Solutions ---------- */
/* Réutilise la technique déjà en place sur .card (glow radial doré piloté
   par --mx/--my en JS) pour rester cohérent avec le reste du site, plutôt
   que d'introduire un nouvel effet. JS complémentaire : site-fixes.js. */
.solc { position: relative; overflow: hidden; }
.solc::before {
  content: "";
  opacity: 0;
  background: radial-gradient(60% 60% at var(--mx, 50%) var(--my, 50%), #d4a24c21, transparent 70%);
  transition: opacity .45s;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.solc:hover::before { opacity: 1; }
.solc .ic, .solc h3, .solc p, .solc .go { position: relative; }

/* ---------- 5. Visuel data-viz — page /complement-revenu/, section "Définition" ---------- */
/* Même technique que #constat (accueil) : image ancrée en haut à droite,
   fondu vers --ink. Fondu vertical un peu plus bas que sur #constat car
   le lede de cette section est plus long (pose avant .prose, pas .cards). */
#definition { position: relative; overflow: hidden; }
#definition .definition-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background: url(/img/definition-bg.png) 68% 0 / 48% auto no-repeat;
  pointer-events: none;
}
#definition .definition-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--ink) 22%, transparent 58%),
    linear-gradient(180deg, transparent 0, transparent 260px, var(--ink) 500px);
}
#definition .wrap { position: relative; z-index: 1; }

@media (max-width: 900px) {
  #definition .definition-bg { opacity: .3; background-size: 74% auto; }
}
@media (max-width: 640px) {
  #definition .definition-bg { display: none; }
}

/* ---------- 6. Photo preuve — page /complement-revenu/ ---------- */
/* Même esprit que .founder/.founder-media (accueil) : cadre bordé, teinte
   désaturée pour rester dans la charte, dégradé de fondu. Classes propres
   (pas .founder-media) car la photo est un portrait 941x1672 très vertical,
   un aspect-ratio figé la rognerait — on la laisse respirer à sa hauteur. */
.proof {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
  display: grid;
}
@media (max-width: 860px) {
  .proof { grid-template-columns: 1fr; }
}
.proof-media {
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.proof-media img {
  width: 100%;
  display: block;
  filter: saturate(.8) contrast(1.05);
}
.proof-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(200deg, #d4a24c2e, transparent 55%),
    linear-gradient(transparent 72%, #0b0a0899);
}

/* ---------- 7. Encadré "Avertissement sur les risques" (pied de page, 10 pages Astro) ---------- */
/* Le pied de page Astro affichait ce texte en pleine largeur, non encadré.
   Le blog (charte legacy, assets/style.css) a déjà un encadré équivalent —
   on aligne les pages Astro dessus, en gardant les angles droits propres
   à cette charte (pas de border-radius, contrairement au blog). */
.disclaimer {
  max-width: 640px;
  margin: 2.5rem auto 2rem;
  padding: 1.3rem clamp(1rem, 4vw, 1.6rem);
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.6;
  text-align: center;
}

/* ---------- 8. Bloc prix — page /formation/ ---------- */
/* Même esprit que .col.good (accueil, comparatif) : cadre teinté or,
   pour signaler "l'offre" sans casser la charte sobre du site. */
.pricing {
  max-width: 620px;
  margin: 0 auto;
  border: 1px solid #d4a24c6b;
  background: linear-gradient(#d4a24c0f, transparent 60%);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.pricing .price-tag {
  font-family: Bodoni Moda, serif;
  font-weight: 500;
  line-height: 1;
  color: var(--gold-light);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  margin-bottom: 1.6rem;
}
.pricing .price-tag span {
  display: block;
  margin-top: .6rem;
  color: var(--muted);
  font-family: IBM Plex Mono, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .7rem;
}
.pricing ul {
  list-style: none;
  display: grid;
  gap: .7rem;
  margin: 0 auto 1.8rem;
  max-width: 440px;
  text-align: left;
}
.pricing li {
  display: flex;
  gap: .7rem;
  color: #cbc4b8;
  line-height: 1.55;
  font-size: .9375rem;
}
.pricing li::before { content: "—"; color: var(--gold); flex: none; }
.pricing .proof-link {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.6;
}
.pricing .proof-link a { color: var(--gold); }

/* ---------- 9. Grille "Le socle" (6 cartes) — page /formation/ ---------- */
/* .cards utilise grid-template-columns:auto-fit ; avec 6 items ça bascule
   sur 4 colonnes aux grandes largeurs (4+2, dernière rangée décalée à
   gauche). On fixe 3 colonnes pour cette instance précise, sans toucher
   .cards globalement (utilisé ailleurs avec 3 items, jamais concerné). */
#socle-cards { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  #socle-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #socle-cards { grid-template-columns: 1fr; }
}

/* ---------- 10. Sections deux-colonnes alternées — page /formation/ ---------- */
/* Casse la monotonie des sections .sec-head + .prose empilées en pleine
   largeur : titre d'un côté, texte de l'autre, alterné section par section
   via .split-reverse. Pas de pattern équivalent ailleurs sur le site (les
   comparatifs .compare sont symétriques, pas titre/texte) — nouveau, sobre,
   même grammaire visuelle que .founder/.proof (grid 2 colonnes, align:start). */
.split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.split .sec-head { margin-bottom: 0; }
.split.split-reverse { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
.split.split-reverse > :first-child { order: 2; }
.split.split-reverse > :last-child { order: 1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.split-reverse > :first-child,
  .split.split-reverse > :last-child { order: initial; }
  .split .sec-head { margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
}