/* Écran Rapports et rapport de suivi (lot 30, consignes de Martin du 15/10/2026).
   L'écran suit le thème de l'application (jetons de tokens.css) ; les pages du rapport sont du papier : fond blanc, encre
   profonde, un seul bleu (#1E6FFF), grands chiffres maigres, dans le style des dossiers de l'équipe. Une page fait 16:9 ;
   à l'écran, ses tailles suivent la largeur de son cadre (100cqw / 90 = 16 px pour 1 440 px), à l'impression elle fait
   exactement 1 440 × 810 px, sans marge (page nommée `rapport`). Rien ne s'anime dans une page : elle s'imprime telle
   qu'elle se lit. */

/* --- L'écran ------------------------------------------------------------------------------------------------------ */
.grille-rapports { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; }
/* Collée en haut tant qu'elle tient ; plus haute que l'écran (message, historique), elle défile en elle-même (revue du lot 30). */
.carte-dossier { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1100px) {
  .grille-rapports { grid-template-columns: minmax(0, 1fr); }
  .carte-dossier { position: static; max-height: none; overflow: visible; }
}
/* Petit téléphone (revue du 16/10) : « Télécharger en PDF » ne tient pas à côté du titre sans l'écraser sur trois lignes ;
   le bouton passe sous le titre, sur sa propre ligne. */
@media (max-width: 400px) {
  .carte-rapport .carte-tete { grid-template-columns: minmax(0, 1fr); }
  .carte-rapport .carte-tete > :not(.carte-tete-texte) { grid-column: 1; grid-row: 2; margin-top: 12px; justify-self: start; }
  .carte-rapport .carte-tete .carte-sous { grid-row: 3; }
}
.rapports-aide { margin-top: 6px; font-size: var(--taille-etiquette); line-height: 1.5; color: var(--encre-2); }
.rapports-avertissements {
  display: grid; gap: 6px; margin: 16px 0 20px; padding: 12px 14px;
  border-left: 2px solid var(--bleu); border-radius: 0 var(--rayon-2) var(--rayon-2) 0; background: var(--voile-1);
}
.rapports-avertissements p { max-width: 80ch; font-size: var(--taille-etiquette); line-height: 1.55; color: var(--encre-2); }
.rapports-montee { display: grid; gap: 8px; justify-items: start; }
.rapports-montee-titre { font-weight: var(--graisse-moyenne); color: var(--encre); text-wrap: balance; }

/* L'aperçu : chaque page posée sur l'écran comme une feuille. */
.rp-apercu { display: grid; gap: 18px; }
.rp-cadre {
  container-type: inline-size; overflow: hidden; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 44px rgba(0, 0, 0, 0.42);
}

/* --- Le dossier préparé par l'équipe ---------------------------------------------------------------------------- */
.dossier-corps { display: grid; gap: 14px; }
.dossier-formulaire { display: grid; gap: 12px; }
.dossier-precisions { margin-bottom: 6px; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.dossier-formulaire textarea {
  width: 100%; min-height: 84px; resize: vertical; padding: 10px 12px;
  border: 1px solid var(--trait); border-radius: var(--rayon-2); background: var(--voile-1);
  color: var(--encre); font: inherit; font-size: var(--taille-petit); line-height: 1.5;
}
.dossier-formulaire textarea:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
.dossier-envoi .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.dossier-erreur { font-size: var(--taille-petit); line-height: 1.5; color: var(--moins); }
.dossier-erreur:empty { display: none; }
.dossier-contact { font-size: var(--taille-etiquette); line-height: 1.5; color: var(--encre-2); }

/* Le message après la demande : net, bleu, un geste de réussite (sauf mouvement réduit). */
.dossier-confirme {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--rayon-3);
  border: 1px solid var(--bleu-trait); background: linear-gradient(135deg, rgba(30, 111, 255, 0.22), rgba(30, 111, 255, 0.05));
}
.dossier-confirme > div { display: grid; gap: 6px; min-width: 0; }
.dossier-confirme p { font-size: var(--taille-petit); line-height: 1.55; color: var(--encre-2); }
.dossier-confirme-titre { font-size: var(--taille-h3); line-height: 1.3; color: var(--encre); text-wrap: balance; }
.dossier-confirme-titre:focus { outline: none; }
.dossier-confirme-ico {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--bleu); color: #FFFFFF; animation: rp-reussite 520ms var(--courbe) both;
}
.dossier-confirme-ico .ic { width: 20px; height: 20px; }
@keyframes rp-reussite { from { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .dossier-confirme-ico { animation: none; } }

.dossier-historique-titre { margin-bottom: 8px; font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.dossier-liste { display: grid; gap: 8px; }
.dossier-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 10px 12px; border: 1px solid var(--trait); border-radius: var(--rayon-2);
}
.dossier-usage { font-weight: var(--graisse-moyenne); color: var(--encre); }
.dossier-etat { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-size: var(--taille-etiquette); color: var(--encre-2); }
.dossier-point { width: 7px; height: 7px; border-radius: 50%; background: var(--attention); }
.dossier-livre .dossier-point { background: var(--mieux); }
.dossier-date { font-size: var(--taille-etiquette); color: var(--encre-2); }
.dossier-ligne .btn { grid-column: 2; justify-self: end; }

/* --- Les pages du rapport (papier) --------------------------------------------------------------------------------- */
.rp-page {
  --rp-papier: #FFFFFF; --rp-encre: #0B1220; --rp-encre-2: #475467; --rp-encre-3: #667085;
  /* Revue ultra du 16/10 (U6) : #8590A2 (3,2:1) et #1E6FFF (4,4:1) en petit texte étaient sous AA ; --rp-encre-3 passe à
     5,0:1, et le surtitre prend un bleu de texte à 5,3:1 (le bleu vif reste pour les grands chiffres et les barres). */
  --rp-bleu-texte: #1A63E6;
  --rp-trait: #E4E8EF; --rp-bleu: #1E6FFF; --rp-bleu-pale: #A9C3F5; --rp-piste: #EEF2F8;
  /* 11/11/2026 (dossier/38-AGENCES.md), carte de la concurrence : le gris des concurrents (3,2:1 sur le papier : assez
     pour un point, pas pour un texte) et le trait des repères (le zéro, l'axe). Le dessin est un SVG qui écrit ses
     couleurs (une image exportée ne lit aucune feuille) : js/carte-concurrence.js les reprend d'ici, un test les compare. */
  --rp-neutre: #8590A2; --rp-repere: #B4BDCB;
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 100%; aspect-ratio: 16 / 9;
  padding: 3.2em 4em 2.4em; overflow: hidden; background: var(--rp-papier); color: var(--rp-encre);
  font-family: var(--police); font-size: calc(100cqw / 90); line-height: 1.45; text-align: left;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-page * { margin: 0; }
.rp-tete { display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.rp-produit { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.9em; font-weight: 600; letter-spacing: 0.01em; }
.rp-produit::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--rp-bleu); }
.rp-repere { font-family: var(--police-mono); font-size: 0.62em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rp-encre-3); }
.rp-corps { display: flex; flex-direction: column; justify-content: center; gap: 1.5em; min-height: 0; padding-block: 1.4em; }
.rp-pied { padding-top: 0.9em; border-top: 1px solid var(--rp-trait); font-size: 0.62em; color: var(--rp-encre-3); }

.rp-titre { max-width: 28ch; font-size: 2.5em; font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.rp-chapeau { max-width: 72ch; font-size: 1.02em; color: var(--rp-encre-2); }
.rp-sous-titre { margin-bottom: 0.8em; font-size: 0.8em; font-weight: 600; color: var(--rp-encre-3); }
.rp-texte { margin-top: 0.5em; max-width: 40ch; font-size: 0.85em; color: var(--rp-encre-2); }
.rp-conclusion { max-width: 62ch; font-size: 1.02em; font-weight: 500; }

/* Couverture */
.rp-page-couverture .rp-corps { justify-content: space-between; }
.rp-couverture { display: grid; gap: 1.1em; padding-top: 2em; }
.rp-surtitre { font-size: 0.9em; font-weight: 500; color: var(--rp-bleu-texte); }
.rp-grand-titre { max-width: 15ch; font-size: 4.3em; font-weight: 600; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; }
.rp-fiche { display: flex; flex-wrap: wrap; gap: 1em 3.5em; padding-top: 1.2em; border-top: 1px solid var(--rp-trait); }
.rp-fiche dt { font-size: 0.7em; color: var(--rp-encre-3); }
.rp-fiche dd { font-weight: 500; }
.rp-avertissement { max-width: 92ch; font-size: 0.72em; line-height: 1.5; color: var(--rp-encre-2); }

/* Grands chiffres */
.rp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4em; }
.rp-trio > * + * { padding-left: 2.4em; border-left: 1px solid var(--rp-trait); }
.rp-chiffre-valeur { font-size: 4.4em; font-weight: 300; line-height: 1; letter-spacing: -0.03em; color: var(--rp-bleu); font-variant-numeric: tabular-nums; }
.rp-chiffre-legende { max-width: 22ch; margin-top: 0.5em; font-size: 1.02em; font-weight: 600; text-wrap: balance; }
.rp-lexique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6em; padding-top: 1em; border-top: 1px solid var(--rp-trait); }
.rp-lexique dt { font-size: 0.72em; font-weight: 600; }
.rp-lexique dd { font-size: 0.68em; color: var(--rp-encre-2); }

/* Barres horizontales */
.rp-barres { display: grid; gap: 0.8em; padding: 0; list-style: none; }
.rp-serre { gap: 0.55em; }
.rp-ligne { display: grid; grid-template-columns: minmax(10em, 17em) minmax(0, 1fr) 6.5em; align-items: center; gap: 1.2em; font-size: 0.95em; }
.rp-ligne-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-ligne.rp-moi .rp-ligne-nom { font-weight: 600; }
.rp-rang { display: inline-block; min-width: 2.6em; color: var(--rp-encre-3); font-variant-numeric: tabular-nums; }
.rp-ligne-piste { height: 0.7em; overflow: hidden; border-radius: 999px; background: var(--rp-piste); }
.rp-barre { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit; background: var(--rp-bleu-pale); }
.rp-barre.rp-moi { background: var(--rp-bleu); }
.rp-ligne-valeur { font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3em; align-items: start; }
.rp-colonne .rp-ligne { grid-template-columns: minmax(0, 1fr) 4.5em max-content; gap: 1em; font-size: 0.85em; }

/* Tableau des questions */
.rp-tableau { width: 100%; border-collapse: collapse; font-size: 0.82em; }
.rp-tableau th { padding: 0 1em 0.6em 0; border-bottom: 1px solid var(--rp-trait); font-size: 0.8em; font-weight: 600; text-align: left; color: var(--rp-encre-3); }
.rp-tableau td { padding: 0.55em 1em 0.55em 0; border-bottom: 1px solid var(--rp-trait); vertical-align: top; }
.rp-question { font-weight: 500; }
.rp-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Relevé après relevé */
.rp-colonnes { display: flex; align-items: stretch; gap: 1.2em; height: 15em; padding: 0; list-style: none; border-bottom: 1px solid var(--rp-trait); }
.rp-colonnes li { display: grid; flex: 1 1 0; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 0.4em; min-width: 0; }
.rp-colonnes-piste { display: flex; align-items: flex-end; width: 100%; max-width: 3.2em; }
.rp-colonnes-barre { width: 100%; height: calc(var(--v) * 100%); border-radius: 0.3em 0.3em 0 0; background: var(--rp-bleu-pale); }
.rp-colonnes li.rp-moi .rp-colonnes-barre { background: var(--rp-bleu); }
.rp-colonnes-valeur { font-size: 0.78em; font-weight: 500; font-variant-numeric: tabular-nums; }
.rp-colonnes-nom { padding-bottom: 0.4em; font-size: 0.72em; color: var(--rp-encre-3); }

/* Méthode et avertissements */
.rp-methode { display: grid; gap: 0.8em; max-width: 84ch; font-size: 0.95em; color: var(--rp-encre-2); }
.rp-avertissements { display: grid; gap: 0.6em; padding-top: 1em; border-top: 1px solid var(--rp-trait); }

/* Logos (11/11/2026, Martin : « dans le pdf à télécharger les logos des concurrents n'apparaissent pas ») : des disques,
   comme dans l'application (js/rapport-logos.js). L'initiale vient de `data-initiales` : décorative, elle ne s'ajoute pas
   au texte de la page (le nom est écrit à côté). L'image du proxy ne se montre qu'une fois arrivée (`.rp-logo-image`),
   sur un disque blanc cerné d'un trait : un logo clair ne flotte pas sur le papier ; celui de la marque suivie garde son
   bleu au bord. Démonstration : le tracé officiel à l'encre, en blanc sur le bleu pour la marque suivie. Aucune
   transition : un logo qui apparaîtrait en fondu sortirait transparent sur la page imprimée. Les fonds s'impriment
   tels quels : `print-color-adjust: exact` s'hérite de .rp-page (sans lui, le navigateur les efface à l'impression). */
.rp-logo {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  width: 2em; height: 2em; margin-right: 0.6em; overflow: hidden; vertical-align: middle;
  border: 1px solid transparent; border-radius: 50%; background: var(--rp-piste); color: var(--rp-encre-2);
}
.rp-logo::before { content: attr(data-initiales); font-size: 0.66em; font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.rp-logo.rp-moi { background: var(--rp-bleu); color: #FFFFFF; }
.rp-logo img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; opacity: 0; }
.rp-logo.rp-logo-image { border-color: var(--rp-trait); background: #FFFFFF; }
.rp-logo.rp-logo-image.rp-moi { border-color: var(--rp-bleu); }
.rp-logo.rp-logo-image::before { content: none; }
.rp-logo.rp-logo-image img { opacity: 1; }
.rp-logo-trace { color: var(--rp-encre); }
.rp-logo-trace::before { content: none; }
.rp-logo-trace .logo-trace { display: block; width: 60%; height: 60%; }
/* Le classement : la colonne des noms s'élargit de la place que prend le logo (un nom long ne se coupe pas plus tôt). */
.rp-page-concurrents .rp-ligne { grid-template-columns: minmax(12em, 19.6em) minmax(0, 1fr) 6.5em; }
/* « Cités à votre place » : un logo tient au premier mot de son nom, jamais seul en fin de ligne ; plus petit, à la
   taille du tableau. */
.rp-nomme { white-space: nowrap; }
.rp-tableau .rp-logo { width: 1.7em; height: 1.7em; margin-right: 0.45em; }

/* --- L'impression --------------------------------------------------------------------------------------------------- */
#rp-impression { display: none; }
@page rapport { size: 1440px 810px; margin: 0; }
@media print {
  html.impression-rapport, html.impression-rapport body { margin: 0; padding: 0; background: #FFFFFF; }
  html.impression-rapport body > :not(#rp-impression) { display: none !important; }
  html.impression-rapport #rp-impression { display: block; }
  #rp-impression .rp-page { page: rapport; width: 1440px; height: 810px; aspect-ratio: auto; font-size: 16px; break-after: page; break-inside: avoid; }
  #rp-impression .rp-page:last-child { break-after: auto; }
}

/* 02/11/2026 : la ligne des pages consultées sans être citées, sous les deux colonnes des sources. */
.rp-consultees { margin-top: 1.2em; }

/* 11/11/2026 (dossier/38-AGENCES.md) : la page « Carte de la concurrence ». Le dessin (1 312 × 400 unités) prend la largeur
   du corps : à l'impression, une unité fait un pixel ; dans l'aperçu, il se réduit avec la page, textes compris. */
.rp-carte svg { display: block; width: 100%; height: auto; }
.rp-carte-note { max-width: 92ch; margin-top: 0; }