/* =====================================================================
   brand.css — IDENTITÉ « ENCRE ET ULTRAVIOLET » (2026-10-14)
   ---------------------------------------------------------------------
   Couche de marque chargée EN DERNIER sur toutes les pages (juste avant
   </head>, donc après apple.css ET après les <style> propres aux pages) :
   à spécificité égale, c'est elle qui a le dernier mot.
   Les COULEURS (papier, encre, ultraviolet) vivent dans les variables
   d'apple.css ; ce fichier porte la typographie, les composants et le
   mouvement.

   Trois principes, et rien de plus :
   1. TROIS VOIX — Fraunces = titres, Inter = texte, JetBrains Mono = données.
   2. LA LIGNE SHIFT — une marche « plat, monte, plat » : sous le mot fort
      d'un grand titre, devant les surtitres, dans le chargement. Le « $ »
      du logo est lui-même décalé vers le haut.
   3. SOBRIÉTÉ — une carte = un fond, un filet, une ombre légère. Rien ne
      bouge tout seul ; les animations restent courtes et une seule fois.
   ===================================================================== */

/* ---------- Jetons communs aux deux thèmes ---------- */
html.apple {
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-shift: cubic-bezier(0.65, 0, 0.35, 1);
  /* La ligne Shift sert de MASQUE : sa couleur vient du fond de l'élément,
     elle suit donc le thème. */
  --shift-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M1 8.6H9.2L14.8 1.4H23' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shift-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1 10H92L108 2H199' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
/* Pas de fondu au changement de thème : le fond de la page basculait en
   0,35 s alors que le reste changeait d'un coup, ce qui dessinait une
   démarcation passagère (pied de page, sections). */
html.apple body {
  font-family: var(--font-text);
  text-rendering: optimizeLegibility;
}
html.apple ::selection { background: rgba(var(--accent-rgb), 0.22); }
html.apple { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.4) transparent; }

/* ---------- 1. LA VOIX : titres en Fraunces ---------- */
html.apple h1, html.apple h2,
html.apple .page-hero h1,
html.apple .section-header h2,
html.apple .home-section-heading h2,
html.apple .hero-editorial h1,
html.apple .objectif-line,
html.apple .onboard-title,
html.apple .swift-cta h2,
html.apple .article-related h2,
html.apple .actu-post-title,
html.apple .mini-card-title,
html.apple .curve-label h3,
html.apple .tile-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  text-wrap: balance;
}
html.apple h1, html.apple .page-hero h1 { font-weight: 500; letter-spacing: -0.026em; line-height: 1.06; }
html.apple .page-hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
html.apple h2, html.apple .section-header h2 { font-weight: 500; letter-spacing: -0.02em; }
html.apple .hero-editorial h1 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; font-size: clamp(2.5rem, 4.3vw, 4.6rem); }
html.apple .home-section-heading h2 { font-weight: 450; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.024em; line-height: 1.08; }
html.apple .objectif-line { font-weight: 400; letter-spacing: -0.018em; }
html.apple .swift-cta h2,
html.apple .article-related h2 { font-weight: 500; letter-spacing: -0.018em; }
html.apple .curve-label h3 { font-weight: 500; font-size: 1.12rem; letter-spacing: -0.01em; }

/* Le mot fort d'un grand titre (<em>) : italique ultraviolet + ligne Shift
   dessous, qui se dessine une fois à l'arrivée. `em.ink` reste à l'encre. */
html.apple h1 em {
  position: relative;
  font-style: italic;
  color: var(--a-accent);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
html.apple h1 em:not(.ink)::after {
  content: '';
  position: absolute; left: 0.02em; right: 0.04em; bottom: -0.1em; height: 0.16em;
  background: currentColor;
  -webkit-mask: var(--shift-line) center / 100% 100% no-repeat;
          mask: var(--shift-line) center / 100% 100% no-repeat;
  opacity: 0.85;
}
@media (prefers-reduced-motion: no-preference) {
  html.apple h1 em:not(.ink)::after {
    clip-path: inset(0 100% 0 0);
    animation: shift-draw 1.1s var(--ease-shift) 0.9s forwards;
  }
}
@keyframes shift-draw { to { clip-path: inset(0 0 0 0); } }
/* Accueil : pas de trait sous « vision » dans le grand titre (demande de
   Sacha, ordinateur et téléphone). Il reste sous les autres grands titres. */
html.apple .hero-editorial h1 em:not(.ink)::after { content: none; display: none; animation: none; }

/* ---------- 2. LA DONNÉE : JetBrains Mono ---------- */
/* Surtitres : mono, capitales espacées, précédés de la marche. */
html.apple .hero-tag,
html.apple .objectif-kicker,
html.apple .onboard-kicker,
html.apple .swift-cta-kicker {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-accent-2);
}
html.apple .page-hero .hero-tag,
html.apple .hero-editorial .hero-tag,
html.apple .objectif-kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--a-accent-2); }
html.apple .page-hero .hero-tag::before,
html.apple .hero-editorial .hero-tag::before,
html.apple .objectif-kicker::before {
  content: ''; flex: 0 0 auto; width: 22px; height: 9px;
  background: currentColor;
  -webkit-mask: var(--shift-glyph) center / contain no-repeat;
          mask: var(--shift-glyph) center / contain no-repeat;
}
html.apple .page-hero .hero-tag { margin-bottom: 22px; }
/* Très petits téléphones : la place réservée au bouton « Retour » ne laisse
   plus assez de largeur à un surtitre d'un seul mot (« TRANSPARENCE » se
   coupait en « TRANSPAREN / CE ») : la marche s'efface, l'espacement se resserre. */
@media (max-width: 374px) {
  html.apple .page-hero .hero-tag { letter-spacing: 0.1em; gap: 0; }
  html.apple .page-hero .hero-tag::before { display: none; }
}

/* Étiquettes, dates, chiffres : mono, chiffres à chasse fixe. */
html.apple .rail-head,
html.apple .hero-stat-label,
html.apple .footer h4,
html.apple .mini-date,
html.apple .rail-actu-date,
html.apple .rail-swift-date,
html.apple .rail-item-cat,
html.apple .watch-badge,
html.apple .hero-stat-value,
html.apple .hero-editorial .hero-stat-value,
html.apple .result-mini-num,
html.apple .result-mini-entry,
html.apple .post-head-pct,
html.apple .post-head-entry,
html.apple .ticker-item,
html.apple .cl-num,
html.apple .onboard-num {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
html.apple .rail-head, html.apple .footer h4 { font-weight: 500; font-size: 0.64rem; letter-spacing: 0.14em; }
html.apple .mini-date, html.apple .rail-actu-date, html.apple .rail-swift-date { font-weight: 500; font-size: 0.68rem; letter-spacing: 0.02em; }
html.apple .hero-editorial .hero-stat-label { font-weight: 500; font-size: 0.6rem; letter-spacing: 0.12em; }
html.apple .hero-editorial .hero-stat-value { font-weight: 500; font-size: 1.85rem; letter-spacing: -0.05em; }
html.apple .result-mini-num { font-weight: 600; letter-spacing: -0.03em; }
html.apple .result-mini-entry, html.apple .post-head-entry { font-weight: 500; letter-spacing: -0.01em; }
/* Fourchette de prix : une seule ligne, toujours (la taille s'adapte en JS,
   ajusterPrixResultats dans sheets.js). Sur téléphone, les cartes du suivi
   gagnent un peu de largeur utile. */
html.apple .result-mini-entry { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.apple .mini-date .date-court { display: none; }
@media (max-width: 600px) {
  html.apple .carousel-rows .result-mini { padding-left: 12px; padding-right: 12px; }
  /* Taille commune un peu plus petite : les fourchettes ont presque toutes la
     même taille d'une carte à l'autre ; seule une très longue est réduite plus. */
  html.apple .carousel-rows .result-mini-entry { font-size: 0.78rem; }
  /* Date courte sur ces cartes étroites : le nom de la catégorie reste entier. */
  html.apple .carousel-rows .result-mini .date-long { display: none; }
  html.apple .carousel-rows .result-mini .date-court { display: inline; }
}
/* Très petits téléphones (< 360 px) : deux colonnes ne laissent plus la place
   à la catégorie, la date et la fourchette de prix ; les résultats passent sur
   une colonne (les autres listes ne changent pas). */
@media (max-width: 359px) {
  html.apple .carousel-rows .carousel-seq:has(> .result-mini) { grid-template-columns: minmax(0, 1fr); }
}
html.apple .ticker-item { letter-spacing: 0; }

/* Catégorie : une pastille de couleur + le nom, sans cadre ni aplat. */
html.apple .mini-badge,
html.apple .mini-badge[class] {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0; border: none; border-radius: 0; background: none;
  font-family: var(--font-data); font-weight: 500;
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--a-accent-2);
}
html.apple .mini-badge::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: currentColor;
}

/* ---------- 3. LOGO : le « $ » est décalé vers le haut (Up-shift) ---------- */
html.apple .logo { font-family: var(--font-text); font-weight: 700; letter-spacing: -0.045em; color: var(--a-text); }
html.apple .logo .accent {
  display: inline-block;
  color: var(--a-accent);
  transform: translateY(-0.13em);
  margin: 0 0.01em;
  transition: transform .45s var(--ease-out);
}
html.apple a.logo:hover .accent { transform: translateY(-0.26em); }

/* ---------- 4. NAVIGATION ---------- */
html.apple .navbar-slim .nav-container {
  border-color: var(--a-line);
  box-shadow: var(--shadow-nav);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
          backdrop-filter: blur(18px) saturate(170%);
}
html.apple .mobile-toggle span { border-radius: 2px; }

/* Menu ouvert sur ordinateur : trois colonnes lisibles d'un coup d'œil
   (Analyses · Découvrir · Mon espace), toutes les rubriques visibles sans
   second clic. La barre (logo, thème, compte, fermer) reste en haut.
   Téléphone : la liste empilée d'apple.css, inchangée. */
@media (min-width: 901px) {
  html.apple .navbar.open .nav-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto auto;
    grid-template-rows: auto auto auto auto auto auto auto 1fr;
    align-items: start;
    column-gap: 10px; row-gap: 2px;
    padding: 9px 10px 22px 22px;
  }
  html.apple .navbar.open .nav-left,
  html.apple .navbar.open .nav-right { display: contents; }
  html.apple .navbar.open .nav-left > .logo { grid-column: 1; grid-row: 1; align-self: center; justify-self: start; }
  html.apple .navbar.open .theme-toggle { grid-column: 4; grid-row: 1; align-self: center; }
  html.apple .navbar.open .btn-signin { grid-column: 5; grid-row: 1; align-self: center; }
  html.apple .navbar.open .mobile-toggle { grid-column: 6; grid-row: 1; align-self: center; position: static; }
  html.apple .navbar.open .nav-cats { grid-row: 2 / -1; width: auto; margin-top: 18px; }
  html.apple .navbar.open .nav-cats:nth-of-type(1) { grid-column: 1; }
  html.apple .navbar.open .nav-cats:nth-of-type(2) { grid-column: 2; }
  /* En-têtes de colonne (mono) : les deux boutons de menu + « Mon espace ». */
  html.apple .navbar.open .nav-cats-toggle,
  html.apple .navbar.open .nav-container::after {
    display: block; width: auto; min-height: 0; margin: 0 0 8px; padding: 0 12px;
    background: none; border: none; pointer-events: none; text-align: left;
    font: 500 0.66rem/1.6 var(--font-data); letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--a-text-3);
  }
  html.apple .navbar.open .nav-cats-caret { display: none; }
  html.apple .navbar.open .nav-container::after {
    content: 'Mon espace';
    grid-column: 3 / -1; grid-row: 2; margin-top: 18px;
  }
  html.apple .navbar.open .nav-cats .nav-cats-menu {
    display: flex; flex-direction: column; gap: 0;
    margin: 0; padding: 0; background: none; border: none;
  }
  html.apple .navbar.open .nav-cats-link,
  html.apple .navbar.open .nav-search,
  html.apple .navbar.open .nav-follow,
  html.apple .navbar.open .nav-left > .btn-community,
  html.apple .navbar.open .nav-right > .btn-nav-ghost {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: auto; height: auto; min-height: 0; margin: 0; padding: 8px 12px;
    border: none; border-radius: 10px; background: none; box-shadow: none;
    font-size: 0.95rem; font-weight: 500; text-align: left; color: var(--a-text-2);
  }
  html.apple .navbar.open .nav-cats-link:hover,
  html.apple .navbar.open .nav-search:hover,
  html.apple .navbar.open .nav-follow:hover,
  html.apple .navbar.open .nav-left > .btn-community:hover,
  html.apple .navbar.open .nav-right > .btn-nav-ghost:hover { background: var(--a-hover); color: var(--a-text); }
  html.apple .navbar.open .nav-search-label,
  html.apple .navbar.open .nav-follow-label { font-size: inherit; }
  html.apple .navbar.open .nav-search svg,
  html.apple .navbar.open .nav-follow svg,
  html.apple .navbar.open .btn-community svg { width: 16px; height: 16px; color: var(--a-text-3); }
  html.apple .navbar.open .nav-cats-link.is-active { color: var(--a-accent); background: none; }
  html.apple .navbar.open .nav-cats-all { margin-top: 6px; padding-top: 8px; border-top: none; color: var(--a-text); font-weight: 600; }
  /* Colonne « Mon espace » : rechercher, suivis, communauté, à propos, contact. */
  html.apple .navbar.open .nav-search,
  html.apple .navbar.open .nav-follow,
  html.apple .navbar.open .nav-left > .btn-community,
  html.apple .navbar.open .nav-right > .btn-nav-ghost { grid-column: 3 / -1; }
  html.apple .navbar.open .nav-search { order: 1; flex-direction: row-reverse; justify-content: flex-end; }
  html.apple .navbar.open .nav-follow { order: 2; }
  html.apple .navbar.open .nav-left > .btn-community { order: 3; }
  html.apple .navbar.open .nav-right > .btn-nav-ghost { order: 4; }
}

/* Menu ouvert sur téléphone / tablette : une seule forme de ligne (même
   hauteur, même rayon, texte à gauche) pour Analyses, Découvrir,
   Communauté, Rechercher et Suivi ; les sous-listes en liens simples. */
@media (max-width: 900px) {
  html.apple .navbar.open .nav-cats-toggle,
  html.apple .navbar.open .nav-left > .btn-community,
  html.apple .navbar.open .nav-search,
  html.apple .navbar.open .nav-follow {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: 100%; height: auto; min-height: 48px; padding: 0 16px;
    border-radius: 12px; border: 1px solid var(--a-line); background: var(--surface-card);
    font-size: 1rem; font-weight: 500; color: var(--a-text); text-align: left;
  }
  html.apple .navbar.open .nav-cats-toggle .nav-cats-caret { margin-left: auto; }
  html.apple .navbar.open .nav-search { flex-direction: row-reverse; justify-content: flex-end; }
  html.apple .navbar.open .nav-search-label,
  html.apple .navbar.open .nav-follow-label { font-size: inherit; }
  html.apple .navbar.open .nav-search svg,
  html.apple .navbar.open .nav-follow svg,
  html.apple .navbar.open .btn-community svg { width: 17px; height: 17px; color: var(--a-text-3); }
  html.apple .navbar.open .nav-cats-menu { border: none; background: none; padding: 2px 0 6px; margin-top: 2px; }
  html.apple .navbar.open .nav-cats-link {
    justify-content: flex-start; text-align: left; min-height: 44px;
    padding: 0 16px; font-size: 0.98rem; font-weight: 500; color: var(--a-text-2);
  }
  html.apple .navbar.open .nav-cats-all { border-top: none; margin-top: 0; padding-top: 0; color: var(--a-text); }
}

/* Bouton « Retour » : il suit la page au lieu de flotter par-dessus le
   contenu pendant le défilement (il masquait le bord des cartes). */
html.apple .global-back { position: absolute; top: 84px; }

/* ---------- 5. BOUTONS ----------
   Action principale = ultraviolet plein. Au survol, la flèche « shifte » :
   elle pivote vers le haut (→ devient ↗). */
html.apple .hero-cta,
html.apple .navbar .btn-nav.btn-signin,
html.apple .onboard-btn,
html.apple .swift-cta-btn,
html.apple .btn-submit {
  background: var(--a-accent);
  color: var(--on-accent);
  font-weight: 600;
  letter-spacing: -0.005em;
  border: none;
  box-shadow: 0 1px 2px rgba(19,17,24,0.16), 0 8px 20px -10px rgba(var(--accent-rgb), 0.7);
  transition: background .25s ease, transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
html.apple .hero-cta:hover,
html.apple .navbar .btn-nav.btn-signin:hover,
html.apple .onboard-btn:hover,
html.apple .btn-submit:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}
html.apple .hero-cta svg,
html.apple .rail-go svg,
html.apple .home-section-link span[aria-hidden],
html.apple .swift-cta-btn span[aria-hidden] {
  display: inline-block;
  transition: transform .45s var(--ease-out);
}
html.apple .hero-cta:hover svg,
html.apple .rail-go:hover svg,
html.apple .home-section-link:hover span[aria-hidden],
html.apple .swift-cta:hover .swift-cta-btn span[aria-hidden] {
  transform: translate(2px, -2px) rotate(-45deg);
}

/* « Tout voir » : bouton discret, à l'encre au survol. */
html.apple .home-section-link {
  background: transparent; border: 1px solid var(--a-line-2);
  color: var(--a-text); font-weight: 500;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.apple .home-section-link:hover { background: var(--a-text); color: var(--a-bg); border-color: var(--a-text); transform: none; }

/* ---------- 6. CARTES ----------
   Une carte = papier, filet fin, ombre légère. Au survol : elle s'éclaire
   d'un filet ultraviolet sur son bord haut (analyses, actualités, Swift,
   carrés d'actifs ET résultats). Les cartes « résultat » disent leur état
   par la couleur du verdict et du chiffre, sans bordure colorée. */
html.apple .mini-card,
html.apple .result-mini,
html.apple .tile {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--a-line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
}
html.apple .mini-card,
html.apple .result-mini,
html.apple .tile { overflow: hidden; }
html.apple .mini-card::before,
html.apple .result-mini::before,
html.apple .tile::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2;
  background: var(--a-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease-out);
  pointer-events: none;
}
html.apple .mini-card:hover::before,
html.apple .mini-card:focus-visible::before,
html.apple .result-mini:hover::before,
html.apple .result-mini:focus-visible::before,
html.apple .tile:hover::before,
html.apple .tile:focus-visible::before { transform: scaleX(1); }
html.apple .mini-card:hover,
html.apple .tile:hover,
html.apple .result-mini:hover,
html.apple .result-mini-invalidee:hover,
html.apple .result-mini-moinsvalue:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  box-shadow: var(--shadow-card-hover);
}
html.apple .result-mini-invalidee,
html.apple .result-mini-moinsvalue { background: var(--surface-card); border-color: var(--a-line); }
/* Dans un carrousel, la carte qui monte au survol était rognée par le bord
   haut du carrousel (le filet ultraviolet disparaissait, l'ombre aussi). On
   donne de l'air au-dessus et au-dessous, compensé par des marges négatives :
   la mise en page ne bouge pas d'un pixel. */
@media (min-width: 601px) {
  html.apple .carousel .carousel-seq { padding-top: 10px; padding-bottom: 26px; }
  html.apple .carousel { margin-top: -10px; margin-bottom: -26px; }
}

html.apple .mini-card-title { font-weight: 500; font-size: 1.13rem; line-height: 1.28; letter-spacing: -0.012em; color: var(--a-text); }
html.apple .mini-card .mini-card-title { min-height: calc(2em * 1.28); }
html.apple .mini-card-body { color: var(--a-text-2); font-weight: 400; }
html.apple .mini-card-go { font-size: 0.82rem; font-weight: 600; color: var(--a-accent-2); }

/* Carrés d'actifs : le nom en Fraunces ; un nom long (« STMicroelectronics »)
   passe à la ligne au lieu de déborder du carré. */
html.apple .tile-name {
  font-weight: 500; font-size: 1.06rem; letter-spacing: -0.012em; line-height: 1.2;
  overflow-wrap: normal; hyphens: manual; min-width: 0; max-width: 100%;
}
html.apple .tile.tile-is-new { border-color: rgba(var(--accent-rgb), 0.55); }
/* « Suivi » (badges, bouton d'une analyse suivie) et rôle « Co-fondateur »
   du chat : l'or de la catégorie Métaux, lisible dans les deux thèmes (le
   jaune vif d'origine tombait sous 2:1 sur le papier). */
html.apple .plan-tag.cofondateur,
html.apple .mini-followed-badge,
html.apple .tile-followed-badge,
html.apple .article-follow.is-followed { color: var(--cat-metal); }
html.apple .article-follow.is-followed svg { fill: var(--cat-metal); stroke: var(--cat-metal); }
html.apple .watch-unfollow:hover { color: var(--bad); }
/* L'étoile « Suivre » : discrète au repos (elle était une pastille grise sur
   chaque carré), dorée une fois l'actif suivi. */
html.apple .tile-follow {
  background: var(--surface-badge); border-color: transparent; color: var(--a-text-3);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.apple .tile-follow:hover { color: var(--a-text); border-color: var(--a-line-2); }
@media (max-width: 600px) {
  html.apple .carousel-tiles .tile { padding: 8px 6px; }
  html.apple .carousel-tiles .tile-name { font-size: 0.8rem; }
}
/* Très petits téléphones : 2 carrés par rangée au lieu de 3, sinon un nom
   d'un seul mot long ne tient pas même en petit. */
@media (max-width: 374px) {
  html.apple .carousel-tiles .carousel-seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 7. EN-TÊTES DE PAGE : papier millimétré + entrée ---------- */
html.apple .page-hero { position: relative; }
html.apple .page-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center -1px;
  -webkit-mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(55% 90% at 50% 0%, #000 0%, transparent 75%);
}
html.apple .page-hero .container { position: relative; z-index: 1; }
html.apple .page-hero .hero-sub { color: var(--a-text-2); font-weight: 400; line-height: 1.6; max-width: 580px; }

@keyframes brand-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html.apple .page-hero .hero-tag,
  html.apple .page-hero .crumb,
  html.apple .page-hero h1,
  html.apple .page-hero .hero-sub { animation: brand-rise .7s var(--ease-out) backwards; }
  html.apple .page-hero h1        { animation-delay: .08s; }
  html.apple .page-hero .hero-sub { animation-delay: .16s; }
}

/* ---------- 8. ACCUEIL ---------- */
/* Les chiffres du hero s'alignent sur le texte (ils étaient centrés à part). */
html.apple .hero-editorial .hero-stats {
  display: flex; align-self: stretch; margin-left: 0; margin-right: 0;
  border-top-color: var(--a-line);
}
html.apple .hero-editorial .hero-sub { color: var(--a-text-2); }
html.apple .curve-label .cl-num { border-radius: 7px; font-weight: 600; font-size: 0.8rem; }
html.apple .swift-cta { border-radius: 16px; box-shadow: var(--shadow-card); }
html.apple .swift-cta:hover { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: var(--shadow-card-hover); }
html.apple .swift-cta-spark { font-family: var(--font-data); font-weight: 600; letter-spacing: -0.04em; }
html.apple .hero-editorial .hero-ticker .ticker-item { font-size: 0.7rem; }

/* ---------- 9. PIED DE PAGE : fondu dans la page ----------
   Demande de Sacha (déjà en août, redite le 2026-10-14) : AUCUNE
   délimitation entre le contenu et le pied de page, quel que soit le thème.
   Même fond que la page, pas de liseré ni d'ombre ; seul le filet interne
   au-dessus des mentions reste (il sépare deux blocs du pied de page). */
html.apple .footer {
  background: var(--a-bg);
  border-top: none;
  box-shadow: none;
}
/* Même règle ailleurs : le ruban de cours de l'accueil n'a plus de filet
   au-dessus, et la bande en dégradé des pages À propos / Notre méthode
   reprend le fond de la page. */
html.apple .hero-editorial .hero-ticker { border-top: none; }
html.apple .apropos-section { background: none; }
/* Plus de filet qui traverse l'écran : au-dessus des mentions du pied de
   page, avant « Analyses similaires » et avant la date de mise à jour des
   pages légales (l'espace suffit à séparer). Les
   traits INTERNES d'une carte ou d'une liste (lexique, compte) restent. */
html.apple .footer-bottom { border-top: none; padding-top: 12px; }
html.apple .article-related,
html.apple .legal-updated { border-top: none; }

/* ---------- 10. PUBLICATIONS (page d'une analyse) ---------- */
html.apple .feed-post { background: var(--surface-card); border: 1px solid var(--a-line); box-shadow: var(--shadow-card); }
html.apple .feed-post::before { display: none; }
html.apple .feed-post::after { width: 2px; opacity: 1; background: linear-gradient(180deg, var(--a-accent) 0%, rgba(var(--accent-rgb), 0) 100%); }
html.apple .feed-post-body p strong,
html.apple .feed-post-body p b { color: var(--a-text); font-weight: 600; }
/* En-tête de publication : fond neutre ; le statut est porté par le point
   et le libellé, en couleurs thémées (les anciennes, prévues pour le sombre,
   tombaient à 1,4:1 en clair pour « En cours »). */
html.apple .post-head-validee,
html.apple .post-head-invalidee,
html.apple .post-head-encours,
html.apple .post-head-moinsvalue { background: none; border-bottom-color: var(--a-line); }
html.apple .post-head-validee .post-head-verdict { color: var(--good); }
html.apple .post-head-invalidee .post-head-verdict { color: var(--warn); }
html.apple .post-head-encours .post-head-verdict { color: var(--cat-metal); }
html.apple .post-head-moinsvalue .post-head-verdict,
html.apple .post-head-moinsvalue .post-head-pct { color: var(--bad); }
html.apple .post-head-validee .result-dot { background: var(--good); box-shadow: none; }
html.apple .post-head-invalidee .result-dot { background: var(--warn); box-shadow: none; }
html.apple .post-head-encours .result-dot { background: var(--cat-metal); box-shadow: none; }
html.apple .post-head-moinsvalue .result-dot { background: var(--bad); box-shadow: none; }
html.apple .post-head-apology { background: var(--surface-badge); border-color: var(--a-line); }

/* Sous l'analyse : encadrés neutres (plus d'aplats teintés empilés), et les
   « analyses similaires » en 2 × 2 au lieu de 3 + 1 orpheline. */
html.apple .feed-insta-cta,
html.apple .article-note {
  background: var(--surface-card);
  border: 1px solid var(--a-line);
  box-shadow: none;
}
html.apple .feed-insta-cta:hover { border-color: rgba(var(--accent-rgb), 0.3); transform: none; }
html.apple .article-related h2 { font-family: var(--font-display); font-weight: 500; }
html.apple .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { html.apple .related-grid { grid-template-columns: 1fr; } }

/* ---------- 11. FINITIONS ---------- */
html.apple :focus-visible { outline: 2px solid var(--a-accent); outline-offset: 3px; border-radius: 6px; }
html.apple .tile-search:focus-within,
html.apple input:focus, html.apple textarea:focus, html.apple select:focus {
  border-color: var(--a-accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
html.apple .crumb a:last-child { color: var(--a-text); }

/* Chargement : la marche de la ligne Shift se « charge » d'ultraviolet en
   boucle, à la place de la roue (arrivée sur une page + clic sur un lien). */
html.apple:not(.upshift-ready)::after,
html.apple .nav-loader .spinner {
  width: 64px; height: 26px;
  border: none; border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.16) 0 35%, var(--a-accent) 50%, rgba(var(--accent-rgb), 0.16) 65% 100%);
  background-size: 300% 100%;
  -webkit-mask: var(--shift-glyph) center / contain no-repeat;
          mask: var(--shift-glyph) center / contain no-repeat;
  animation: shift-sweep 1.15s var(--ease-shift) infinite;
}
html.apple:not(.upshift-ready)::after { margin: -13px 0 0 -32px; }
@keyframes shift-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Moins d'animations : tout ce qui bouge s'arrête. */
@media (prefers-reduced-motion: reduce) {
  html.apple .mini-card::before, html.apple .result-mini::before, html.apple .tile::before,
  html.apple .logo .accent { transition: none; }
  html.apple:not(.upshift-ready)::after, html.apple .nav-loader .spinner { animation-duration: 2.4s; }
}

/* =====================================================================
   LARGEURS SELON L'ÉCRAN (2026-10-18)
   Avant : tout le site plafonnait à 1120 px, même sur un écran de 27".
   Désormais la largeur utile suit des paliers d'écran standards
   (1366 / 1440, 1600 / 1680, 1920, 2560 et plus) : plus l'écran est grand,
   plus le contenu s'étale, sans jamais coller aux bords. Les colonnes de
   TEXTE suivie restent plus étroites (confort de lecture : ~75 caractères),
   mais grandissent un peu elles aussi.
   ===================================================================== */
:root {
  --page-max: 1120px;     /* listes, grilles, carrousels, en-têtes, pied de page */
  --lecture-max: 760px;   /* pages de texte (compte, mentions, guide…) */
  --post-max: 800px;      /* publication simple */
  --analyse-max: 1000px;  /* analyse en deux colonnes (texte + fiche) */
  --chat-max: 900px;      /* communauté */
}
@media (min-width: 1360px) { :root { --page-max: 1240px; --analyse-max: 1120px; } }
@media (min-width: 1600px) { :root { --page-max: 1400px; --lecture-max: 840px; --post-max: 860px; --analyse-max: 1240px; --chat-max: 1000px; } }
@media (min-width: 1880px) { :root { --page-max: 1560px; --lecture-max: 900px; --post-max: 900px; --analyse-max: 1360px; --chat-max: 1080px; } }
@media (min-width: 2400px) { :root { --page-max: 1760px; --lecture-max: 960px; --post-max: 960px; --analyse-max: 1480px; --chat-max: 1160px; } }

html.apple .container { max-width: var(--page-max); }
html.apple .navbar-slim .nav-container { max-width: min(calc(var(--page-max) + 160px), 92vw); }
html.apple .carousel-rows .carousel-track.carousel-static .carousel-seq { max-width: var(--page-max); }
html.apple .article-feed { max-width: var(--analyse-max); }
html.apple .feed-post { max-width: var(--post-max); }
html.apple .feed-post-split { max-width: var(--analyse-max); }
html.apple .comm-wrap { max-width: var(--chat-max); }
html.apple .lexique-filtres, html.apple .lexique-liste { max-width: var(--lecture-max); }

/* Titres de section de l'accueil CENTRÉS à toutes les largeurs (comme sur
   téléphone) : avec le contenu élargi, un titre calé à gauche et un lien
   « Tout voir » à l'autre bout de l'écran paraissaient décentrés. */
html.apple .home-section-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
html.apple .home-section-heading { width: 100%; text-align: center; }
html.apple .home-section-heading h2 { text-align: center; }
html.apple .home-section-link { align-self: center; }

/* Chiffres de l'accueil (membres, analyses, publications) centrés sous le texte. */
html.apple .hero-editorial .hero-stats { justify-content: center; }
html.apple .hero-editorial .hero-stat { align-items: center; text-align: center; }