/* Le mini-diagnostic Excel · feuille DE PAGE (septembre 2026).
   Hors de style.css (contrat de poids de l'accueil). Doctrine : CLAUDE.md.
   Tous les jetons sont déclarés dans les DEUX thèmes par style.css. */

.home-diag { --diag-gap: 14px; }

/* ── Les huit pastilles ───────────────────────────────────────────────────── */

.diag-pills {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--diag-gap);
  margin: 0 0 22px 0;
}

.diag-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease;
}

.diag-pill-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--accent);
}
.diag-pill-ico svg { width: 19px; height: 19px; }

/* `min-width: 0` : sans lui un libellé long fait déborder la rangée. */
.diag-pill-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.diag-pill-nom { font-weight: 600; font-size: .95rem; line-height: 1.25; }
.diag-pill-mots {
  font-size: .76rem;
  line-height: 1.3;
  color: var(--muted-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diag-pill.is-on {
  border-color: var(--accent);
  background: var(--paper-2);
}
.diag-pill.is-on .diag-pill-ico { background: var(--accent); color: var(--on-accent); }

/* Survol : pointeur fin seulement (iOS le colle après un tap). */
@media (hover: hover) and (pointer: fine) {
  .diag-pill:hover { border-color: var(--accent); transform: translateY(-1px); }
}

/* ── Le panneau ───────────────────────────────────────────────────────────── */

.diag-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  padding: 22px 24px 20px;
}

.diag-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px 0;
}
.diag-panel-nom { margin: 0; font-size: 1.22rem; line-height: 1.25; }

.diag-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted-3);
  cursor: pointer;
}
.diag-close svg { width: 17px; height: 17px; }

.diag-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.diag-side { min-width: 0; }
.diag-side-titre {
  margin: 0 0 9px 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.diag-arrow { margin: 0; color: var(--muted-3); text-align: center; font-size: 1.5rem; line-height: 1; }

/* La grille de tableur : un DESSIN (aria-hidden), pas un tableau de
   données. Il doit se reconnaître au premier regard. */
.diag-sheet {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .72rem;
}
/* Trois colonnes lisibles, plus la quatrième coupée par le bord : c'est la
   silhouette d'un tableur, celle que tout le monde a sous les yeux. */
.diag-sheet-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 20px; }
.diag-sheet-cell {
  padding: 7px 8px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diag-sheet-row:last-child .diag-sheet-cell { border-bottom: 0; }
.diag-sheet-cell:last-child { border-right: 0; }
.diag-sheet-row--head .diag-sheet-cell {
  background: var(--paper-2);
  color: var(--fg);
  font-weight: 600;
}
/* Les lignes de données sont FIGURÉES par des barres, jamais par du texte :
   on montre la forme du fichier, on n'invente pas son contenu. */
.diag-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

/* Piège [hidden] : aucune règle d'auteur ne pose de `display` ici, mais la
   parade est écrite tout de suite pour que l'ajout d'une règle demain ne la
   fasse pas réapparaître vide. */
.diag-sheet-plus {
  margin: 8px 0 0;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted-3);
  line-height: 1.5;
}
.diag-sheet-plus[hidden] { display: none; }

.diag-screens { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.diag-screens li {
  position: relative;
  padding: 10px 12px 10px 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  font-size: .87rem;
  line-height: 1.35;
}
/* Un chiffre dans une pastille, jamais un glyphe-icône (règle absolue). */
.diag-screens li::before {
  content: counter(diag-n);
  counter-increment: diag-n;
  position: absolute;
  left: 10px;
  top: 10px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: .65rem;
}
.diag-screens { counter-reset: diag-n; }

.diag-douleur {
  margin: 18px 0 0 0;
  padding: 13px 15px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--paper-2);
  font-size: .93rem;
  line-height: 1.5;
}

.diag-gains {
  margin: 14px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.diag-gains li {
  padding-left: 20px;
  position: relative;
  font-size: .87rem;
  line-height: 1.35;
  color: var(--muted-3);
}
/* Coche en masque SVG (la règle absolue interdit le glyphe). `--icon-check`
   est DÉJÀ dans :root et partagé avec cdc.css : source unique. */
.diag-gains li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .28em;
  width: 13px;
  height: 13px;
  background-color: var(--accent);
  -webkit-mask-image: var(--icon-check);
  mask-image: var(--icon-check);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.diag-reserve {
  margin: 14px 0 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--muted-3);
  font-style: italic;
}
/* Piège maison : `[hidden]` ne bat pas un `display` d'auteur. */
.diag-reserve[hidden], .diag-panel[hidden] { display: none; }
/* Patron de tarifs-options.css : avec script, c'est `.is-live` qui masque le
   panneau ; sans script, `[hidden]` ci-dessus. Les deux sont nécessaires. */
.diag:not(.is-live) .diag-panel { display: none; }

.diag-actions {
  margin: 20px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Quatre par rangée au-delà de 1120 px seulement. */
@media (max-width: 1120px) {
  .diag-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Téléphone ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Rail : huit pastilles empilées font un écran. La tranche de la suivante
     reste visible pour que le geste s'annonce (parade du projecteur). */
  .diag-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    /* Pleine largeur sans `100vw`, qui compte la barre de défilement. */
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .diag-pill { flex: 0 0 78%; scroll-snap-align: start; }

  .diag-panel { padding: 18px 16px 16px; }
  /* Empilé, la flèche pointe vers le bas : une rotation, pas une 2e icône. */
  .diag-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .diag-arrow { transform: rotate(90deg); justify-self: center; }
  .diag-gains { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .diag-actions .btn-primary, .diag-actions .btn-secondary { flex: 1 1 100%; text-align: center; }
  /* Zone sûre : barre gestuelle des iPhone. */
  .diag-actions { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Plancher tactile maison : 44 px, croix de fermeture comprise. Les deux
   boutons d'action le réclament ici parce que `.btn-primary` retombe à 40 px
   dans un conteneur étroit : c'est mesuré, et deux boutons préexistants de
   l'accueil (bandeau prix, « Nous contacter ») sont dans le même cas. */
@media (pointer: coarse) {
  .diag-pill { min-height: 66px; }
  .diag-close { width: 44px; height: 44px; }
  .diag-actions .btn-primary, .diag-actions .btn-secondary { min-height: 44px; }
}

/* Remise à plat du survol : en FIN de fichier, seul l'ordre tranche. */
@media (hover: none) {
  .diag-pill:hover { border-color: var(--line); transform: none; }
  .diag-pill.is-on:hover { border-color: var(--accent); }
}

/* « Moins de mouvement » : elle garde sa couleur, elle ne bouge plus. Le
   script honore déjà la préférence ; seule la feuille manquait. */
@media (prefers-reduced-motion: reduce) {
  .diag-pill { transition: none; }
  .diag-pill:hover { transform: none; }
}