/* ══════════════════════════════════════════════════════════════════════════
   Le carrousel de cartes — mobile d'abord.

   PARTI PRIS : la piste défile NATIVEMENT (overflow-x + scroll-snap).
   Pas de carrousel en JavaScript. Conséquences voulues :
     · le glissement au doigt fonctionne sans une ligne de JS ;
     · la tabulation et les lecteurs d'écran parcourent la piste normalement ;
     · l'agent se contente d'un scrollIntoView pour ouvrir une carte.

   HAUTEUR : on n'utilise PAS 100dvh, qui ment sur mobile quand la barre d'URL
   s'anime. La hauteur réelle est posée en pixels par assets/js/cartes.js dans
   --h-ecran, d'après visualViewport. La valeur ci-dessous n'est qu'un repli.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --h-ecran: 100vh;
  --h-barre: 132px;
  --h-entete: 96px;
}

/* ─────────────────────────── L'en-tête ─────────────────────────── */

.entete {
  padding: 14px clamp(16px, 5vw, 40px) 10px;
  display: grid;
  gap: 2px;
}
.entete .marque {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 18px;
  color: var(--ink);
}
.entete .marque span::after { content: ""; }
.sur-titre {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tq);
  font-weight: 700;
}
.entete .titre {
  font-size: clamp(20px, 4.4vw, 30px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 22ch;
}

/* ─────────────────────────── La piste ─────────────────────────── */

.piste {
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: calc(var(--h-ecran) - var(--h-barre) - var(--h-entete));
  scrollbar-width: none;
}
.piste::-webkit-scrollbar { display: none; }

.carte {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /* Une carte porte 200 à 300 mots plus sa FAQ : cela NE TIENT PAS sur un
     téléphone. Elle défile donc en interne — la page, elle, ne défile jamais.
     Le résumé et les chiffres occupent le premier écran ; le texte long est
     dessous, présent dans le DOM, atteignable au doigt. */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px clamp(16px, 5vw, 40px) 32px;
  scrollbar-width: thin;
}

/* ───────────────────────── Le contenu d'une carte ───────────────────────── */

.carte-titre {
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  max-width: 20ch;
}
.carte-resume {
  font-size: clamp(15px, 2.4vw, 18px);
  color: var(--ink);
  padding-left: 16px;
  border-left: 2px solid var(--tq);
  margin-bottom: 18px;
}

.carte-points { list-style: none; display: grid; gap: 8px; margin-bottom: 18px; }
.carte-points li {
  position: relative; padding-left: 22px; color: var(--muted); font-size: 15px;
}
.carte-points li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--tq);
}

.carte-etapes { counter-reset: e; list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.carte-etapes li {
  counter-increment: e; position: relative; padding-left: 38px; color: var(--muted); font-size: 15px;
}
.carte-etapes li::before {
  content: counter(e); position: absolute; left: 0; top: -2px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--stroke);
  display: grid; place-items: center; color: var(--tq); font-weight: 700; font-size: 13px;
}

.carte-chiffres { display: grid; gap: 8px; margin-bottom: 18px; }
.carte-chiffres > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 14px; background: var(--card);
  border: 1px solid var(--stroke); border-radius: 12px;
}
.carte-chiffres dt { color: var(--muted); font-size: 14px; }
.carte-chiffres dd { color: var(--tq-2); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }

.carte-tableau { overflow-x: auto; border: 1px solid var(--stroke); border-radius: 14px; margin-bottom: 18px; }
.carte-tableau table { width: 100%; border-collapse: collapse; font-size: 14px; }
.carte-tableau th, .carte-tableau td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--stroke); }
.carte-tableau thead th { color: var(--ink); font-weight: 600; background: rgba(255,255,255,.03); }
.carte-tableau tbody td { color: var(--muted); }
.carte-tableau tbody tr:last-child td { border-bottom: 0; }

.carte-citation {
  margin-bottom: 18px; padding: 16px 18px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(20,201,192,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(20,201,192,.26);
}
.carte-citation p { font-size: 16px; color: var(--ink); font-style: italic; }
.carte-citation cite { display: block; margin-top: 8px; font-size: 13px; color: var(--tq-2); font-style: normal; }

.carte-code {
  margin-bottom: 18px; padding: 13px 15px; overflow-x: auto;
  background: #060b10; border: 1px solid var(--stroke); border-radius: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--tq-2);
}
.carte-champs { color: var(--muted); font-size: 14px; margin-bottom: 18px; }

.carte-image { margin-bottom: 18px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke); }
.carte-image img { width: 100%; height: auto; display: block; }

.carte-texte p { color: var(--muted); font-size: 15px; line-height: 1.62; margin-bottom: 13px; }
.carte-texte strong { color: var(--ink); font-weight: 600; }
.carte-texte a, .faq-reponse a { color: var(--tq-2); border-bottom: 1px solid rgba(60,240,228,.35); }
.carte-texte a:hover, .faq-reponse a:hover { border-bottom-color: var(--tq-2); }

/* ──────────────────────────── La FAQ ──────────────────────────── */
/* <details> : replié à l'œil, mais le texte est DANS le document — donc lu par
   Google et par les lecteurs d'écran. C'est tout l'intérêt. */

.carte-faq { margin-top: 26px; border-top: 1px solid var(--stroke); padding-top: 18px; }
.faq-titre { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tq); margin-bottom: 10px; }
.faq-item { border-bottom: 1px solid var(--stroke); }
.faq-item summary {
  cursor: pointer; padding: 11px 0; color: var(--ink); font-size: 15px; font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--tq); font-size: 19px; line-height: 1; flex: 0 0 auto; }
.faq-item[open] summary::after { content: "−"; }
.faq-reponse p { color: var(--muted); font-size: 14.5px; line-height: 1.6; padding-bottom: 13px; }

/* ──────────────────────── La barre du bas ──────────────────────── */

.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(15,20,27,.94); backdrop-filter: blur(12px);
  border-top: 1px solid var(--stroke);
  padding: 9px clamp(12px, 4vw, 28px) calc(9px + env(safe-area-inset-bottom));
}
.barre-intro { font-size: 12.5px; color: var(--muted); margin-bottom: 7px; }
.barre-intro strong { color: var(--tq); font-weight: 700; }

.barre-liens {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 7px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.barre-liens::-webkit-scrollbar { display: none; }
.barre-lien {
  flex: 0 0 auto; padding: .42em .85em; border-radius: 30px; font-size: 13px; font-weight: 600;
  color: var(--muted); background: var(--card); border: 1px solid var(--stroke);
  transition: color .2s, border-color .2s, background .2s;
}
.barre-lien:hover { color: var(--tq-2); border-color: var(--tq); }
.barre-lien[aria-current="true"] { color: #04211f; background: var(--tq); border-color: var(--tq); }

.barre-saisie { display: flex; gap: 8px; align-items: center; }
.barre-saisie input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; /* 16px : pas de zoom iOS */
  padding: .62em .9em; border-radius: 30px; color: var(--ink);
  background: rgba(255,255,255,.05); border: 1px solid var(--stroke);
}
.barre-saisie input:focus { outline: none; border-color: var(--tq); box-shadow: 0 0 0 3px rgba(20,201,192,.16); }
.barre-micro, .barre-envoi {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; transition: transform .2s;
}
.barre-micro { background: var(--tq); box-shadow: 0 0 0 0 rgba(20,201,192,.5); }
.barre-envoi { background: var(--card); border: 1px solid var(--stroke); }
.barre-micro:hover, .barre-envoi:hover { transform: scale(1.06); }
.barre-micro::before, .barre-envoi::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--ic) center/contain no-repeat; mask: var(--ic) center/contain no-repeat;
}
.barre-micro { color: #04211f; --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M6 11a6 6 0 0012 0M12 17v4'/%3E%3C/svg%3E"); }
.barre-envoi { color: var(--tq-2); --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2-6-8-2z'/%3E%3C/svg%3E"); }

/* ───────────────── La bascule vers le mode lecture ───────────────── */

.bascule-lecture {
  position: fixed; right: clamp(12px, 4vw, 28px); z-index: 31;
  bottom: calc(var(--h-barre) + 10px + env(safe-area-inset-bottom));
  padding: .5em 1em; border-radius: 30px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); background: rgba(15,20,27,.92); border: 1px solid var(--stroke);
  cursor: pointer; backdrop-filter: blur(8px); transition: color .2s, border-color .2s;
}
.bascule-lecture:hover { color: var(--tq-2); border-color: var(--tq); }

/* ═══════════════ MODE LECTURE : les cartes s'empilent ═══════════════
   Une seule classe sur <body> suffit — aucune manipulation du DOM.
   C'est aussi le rendu obtenu si le JavaScript ne s'exécute pas du tout. */

body.mode-lecture .piste {
  display: block; height: auto; overflow: visible; scroll-snap-type: none;
}
body.mode-lecture .carte {
  overflow: visible; height: auto;
  border-bottom: 1px solid var(--stroke); padding-bottom: 46px; margin-bottom: 46px;
}
body.mode-lecture .carte:last-child { border-bottom: 0; }
body.mode-lecture { padding-bottom: calc(var(--h-barre) + 20px); }

/* ─────────────────────────── Grands écrans ─────────────────────────── */

@media (min-width: 900px) {
  :root { --h-barre: 120px; --h-entete: 108px; }
  .carte { padding-left: 0; padding-right: 0; }
  .carte > * { max-width: 760px; margin-left: auto; margin-right: auto; }
  .carte-titre, .carte-resume { max-width: 760px; }
  body.mode-lecture .carte > * { max-width: 760px; }
}

/* ───────────────────── Mouvement réduit ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .piste { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ── Les suggestions renvoyées par l'agent ── */
.barre-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.barre-chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: .42em .85em; border-radius: 30px;
  color: var(--tq-2); background: rgba(20,201,192,.10); border: 1.4px solid var(--tq);
  transition: background .2s, color .2s;
}
.barre-chip:hover { background: var(--tq); color: #04211f; }
.barre-pense { opacity: .65; font-style: italic; }
/* Micro actif : l'onde pulse — le visiteur doit voir que ça écoute. */
.barre-micro-actif { animation: barre-ecoute 1.4s ease-in-out infinite; }
@keyframes barre-ecoute {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20,201,192,.55); }
  50%      { box-shadow: 0 0 0 9px rgba(20,201,192,0); }
}
@media (prefers-reduced-motion: reduce) { .barre-micro-actif { animation: none; } }