/* i1.css — design I1 « couverture de rapport » + personnage (validé le 27/09/2026).
   Maquettes : tasks/lens-design-i1-2026-09-27/ (home.html, analyse.html).
   Chargé APRÈS legacy-override.css : il gagne sur le pont à spécificité égale.
   Trois portées :
   - .i1-*            composants de la home et blocs injectés par le build ;
   - body.i1-analyse  gabarit des pages d'analyse (hero + content-section), posé
                      par build-pages.py ;
   - le reste du chrome (entête, pied) vit dans shell.css.
   Navy profond pour la une, les en-têtes, les agents et le pied ; crème pour la
   lecture. Le GOLD ne se pose que sur fond sombre. */

.i1-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--page-gutter); }
.i1-kick { font-family: var(--font-data); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent-deep); }
.i1-dark .i1-kick, .i1-une .i1-kick, .i1-letter .i1-kick, .i1-agents .i1-kick { color: var(--color-data); }
.i1-full { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); }

/* ============ HOME · la une ============ */
body.sr-canon main.i1-home { max-width: none; padding: 0; margin: 0; }
.i1-une.hero-stat { margin-inline: 0; padding-inline: 0; padding: 0; }
.i1-une-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-xl); align-items: center; padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.i1-une h1 { font-size: clamp(2.1rem, 4.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.02em; max-width: 18ch; margin: var(--space-sm) 0 var(--space-sm); color: var(--color-ink-on-dark); }
.i1-une .hero-figure { font-size: clamp(3rem, 7vw, 5.5rem); }
.i1-une .i1-une-pic { width: 100%; height: auto; border: 1px solid rgba(212, 169, 68, 0.25); }
.i1-une .btn-secondary { border-color: var(--color-data); color: var(--color-data-bright); background: transparent; }
.i1-une .btn-secondary:hover { background: var(--color-data); color: var(--color-navy-deep); }

/* ============ zones papier ============ */
.i1-paper { background: var(--color-paper); color: var(--color-ink); }
.i1-sec { padding: var(--space-xl) 0; }
.i1-sec h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.i1-sec-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-md); }
.i1-sec-head a { font-weight: 500; color: var(--color-accent-deep); }
.i1-two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-xl); }

/* mis à jour (liste injectée par le build depuis le manifeste) */
.i1-list a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--color-rule); text-decoration: none; color: var(--color-ink); }
.i1-list a:last-child { border-bottom: 1px solid var(--color-rule); }
.i1-list img { width: 120px; height: 80px; object-fit: cover; border: 1px solid var(--color-rule); }
.i1-list b { display: block; font-size: 1.1rem; line-height: 1.3; font-weight: 500; }
.i1-list a:hover b { color: var(--color-accent-deep); }
.i1-list .i1-kick { display: block; margin-bottom: 4px; }

/* la lettre */
.i1-letter { background: var(--color-navy-deep); color: var(--color-ink-on-dark); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); align-self: start; }
.i1-letter h3 { margin: 0; font-size: 1.35rem; color: var(--color-ink-on-dark); }
.i1-letter p { margin: 0; color: var(--color-muted-on-dark); font-size: 0.95rem; }

/* étagère des livrets */
.i1-shelf-sec { background: var(--color-paper-2); }
.i1-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.i1-book { display: flex; flex-direction: column; gap: var(--space-xs); }
.i1-book .i1-cov { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--color-ink); box-shadow: 8px 8px 0 var(--color-paper-3); }
.i1-book .i1-cov img { width: 100%; height: 100%; object-fit: cover; }
.i1-book .i1-cov span { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(15, 28, 38, 0.92) 40%); color: var(--color-ink-on-dark); padding: 40px 16px 14px; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.i1-book .i1-st { font-family: var(--font-data); font-size: 0.75rem; color: var(--color-accent-deep); }
.i1-book p { margin: 0; font-size: 0.95rem; color: var(--color-ink-2); }
.i1-book .i1-next { font-size: 0.9rem; font-weight: 500; color: var(--color-accent-deep); }

/* trois profondeurs : livret → teaser → question */
.i1-depth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--color-ink); background: var(--color-paper); }
.i1-depth > div { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); }
.i1-depth > div + div { border-left: 1px solid var(--color-ink); }
.i1-depth h3 { margin: 0; font-size: 1.25rem; }
.i1-depth p { margin: 0; font-size: 0.95rem; color: var(--color-ink-2); flex-grow: 1; }
.i1-depth .i1-n { font-family: var(--font-data); font-size: 0.75rem; color: var(--color-accent-deep); }
.i1-depth img { width: 100%; height: 150px; object-fit: cover; border: 1px solid var(--color-rule); }
.i1-depth .btn { align-self: flex-start; }
.i1-depth.i1-depth-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* agents (bande sombre) */
.i1-agents { background: var(--color-navy-deep); color: var(--color-ink-on-dark); }
.i1-agents .i1-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); align-items: center; padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.i1-agents h2 { margin: 10px 0 12px; font-size: 2rem; letter-spacing: -0.02em; color: var(--color-ink-on-dark); }
.i1-agents p { color: var(--color-muted-on-dark); margin: 0 0 var(--space-sm); }
.i1-agents code { display: block; background: #16283A; border: 1px solid rgba(212, 169, 68, 0.3); padding: 14px; font: 0.8rem/1.6 var(--font-data); color: var(--color-data-bright); overflow-wrap: anywhere; white-space: normal; }
.i1-agents a { color: var(--color-data-bright); }
.i1-agents img { width: 100%; height: auto; }

/* l'ancien contenu de la home, gardé mot pour mot, dans une colonne de lecture */
.i1-read { max-width: 1120px; margin: 0 auto; padding: 0 var(--page-gutter) var(--space-xl); }

/* ============ PAGES D'ANALYSE (body.i1-analyse) ============ */
/* En-tête sombre : les variables du gabarit legacy sont redéfinies sur la
   section, le pont les avait inversées pour le crème. */
body.i1-analyse section.hero {
  --cream: #EDE3D2; --cream-light: #F0E4D0; --cream-dark: #9BAAB5;
  --gold: #D4A944; --gold-bright: #E8C84A; --terracotta-light: #C97A4F;
  background: var(--color-navy-deep);
  color: var(--color-ink-on-dark);
  text-align: left;
  padding: var(--space-lg) 0 var(--space-lg);
  margin: 0;
}
body.i1-analyse section.hero .container { max-width: 1040px !important; }
body.i1-analyse section.hero h1 { color: var(--color-ink-on-dark) !important; font-size: clamp(1.9rem, 3.8vw, 3.1rem) !important; line-height: 1.06 !important; letter-spacing: -0.02em; max-width: 24ch; margin: var(--space-sm) 0 var(--space-sm) !important; }
body.i1-analyse section.hero h1 .highlight { color: var(--color-data-bright) !important; }
body.i1-analyse section.hero .hero-tagline { color: var(--color-muted-on-dark) !important; margin-left: 0 !important; max-width: 60ch !important; font-size: 1.05rem !important; font-weight: 400 !important; }
body.i1-analyse section.hero .hero-author,
body.i1-analyse section.hero .hero-author a { color: var(--color-muted-on-dark) !important; opacity: 1 !important; }
body.i1-analyse section.hero .hero-author a { color: var(--color-data-bright) !important; }
body.i1-analyse section.hero .breadcrumb,
body.i1-analyse section.hero .breadcrumb a { color: var(--color-muted-on-dark) !important; opacity: 1 !important; }
body.i1-analyse section.hero .drop-badge { background: transparent !important; border-color: rgba(212, 169, 68, 0.5) !important; color: var(--color-data) !important; }
body.i1-analyse section.hero .drop-badge .dot { background: var(--color-data) !important; animation: none !important; }
body.i1-analyse section.hero .stats-row { justify-content: flex-start !important; border-top: 1px solid rgba(212, 169, 68, 0.35); padding-top: var(--space-xs); gap: var(--space-lg) !important; }
body.i1-analyse section.hero .stat-item { text-align: left !important; background: transparent !important; border: 0 !important; padding: 0 !important; }
body.i1-analyse section.hero .stat-val { color: var(--color-data-bright) !important; font-size: 1.6rem !important; font-weight: 500 !important; }
body.i1-analyse section.hero .stat-lbl { color: var(--color-muted-on-dark) !important; }
body.i1-analyse section.hero *:focus-visible { outline-color: var(--color-data-bright); }
/* Le gabarit legacy pose la bande sur toute la largeur par sa section ; on
   garde le corps en colonne de lecture crème. */
body.i1-analyse .cta-haut { margin-top: 0; }

/* chapeau entités / questions */
.i1-chapeau { border: 1px solid var(--color-ink); padding: 16px 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: var(--space-md) 0; font-size: 0.95rem; color: var(--color-ink); }
.i1-chapeau .i1-kick { display: block; margin-bottom: 4px; font-size: 0.72rem; }

/* graphique SVG réel */
.i1-chart { border-top: 1px solid var(--color-ink); padding-top: 14px; margin: var(--space-sm) 0 var(--space-md); }
.i1-chart svg { width: 100%; height: auto; display: block; }
.i1-chart figcaption { font-size: 0.85rem; color: var(--color-ink-2); margin-top: 6px; }

/* citer cette page */
.i1-cite { background: var(--color-paper-2); padding: 14px 16px; font-size: 0.88rem; display: flex; flex-direction: column; gap: 6px; margin: var(--space-md) 0; color: var(--color-ink); overflow-wrap: anywhere; }
.i1-cite .i1-kick { font-size: 0.72rem; }
.i1-cite button { align-self: flex-start; font: 500 0.85rem var(--font-display); color: var(--color-accent-deep); background: none; border: 1px solid var(--color-accent); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; }
.i1-cite button:hover { background: var(--color-accent-deep); color: var(--color-accent-ink); }

/* aller plus loin, en fin d'analyse */
.i1-further { margin: var(--space-xl) 0 var(--space-md); }
.i1-further h2 { font-size: 1.5rem; letter-spacing: -0.01em; margin: 0 0 var(--space-sm); }

@media (max-width: 980px) {
  .i1-une-grid, .i1-agents .i1-in, .i1-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .i1-shelf, .i1-depth, .i1-depth.i1-depth-2, .i1-chapeau { grid-template-columns: minmax(0, 1fr); }
  .i1-depth > div + div { border-left: 0; border-top: 1px solid var(--color-ink); }
  .i1-list a { grid-template-columns: 88px minmax(0, 1fr); }
  .i1-list img { width: 88px; height: 59px; }
  .i1-sec { padding: var(--space-lg) 0; }
  .i1-shelf { gap: var(--space-lg); }
  .i1-book .i1-cov { max-width: 320px; }
  .i1-une .i1-une-pic { max-height: 260px; object-fit: cover; object-position: 60% 40%; }
  .i1-agents img { max-height: 220px; object-fit: cover; }
  body.i1-analyse section.hero .stats-row { gap: var(--space-sm) !important; }
}
body:has(main.i1-home) footer.page-footer { margin-top: 0; }
footer.page-footer { text-align: left; }