/* ============================================================================
   Cartano — la page d'accueil (refonte du 18/10/2026).

   Chargée APRÈS `site.css`, et seulement par `index.html` et `en/index.html` :
   les jetons, la barre, le pied et les boutons restent ceux de tout le site ;
   ce fichier n'ajoute que la mise en scène de l'accueil. Les autres pages ne
   peuvent donc pas en hériter une régression.

   Trois partis pris :
     1. le PRODUIT d'abord — une vraie capture, grande, dès le héros ;
     2. un rythme clair / sombre — la section du « juge » passe en encre, c'est
        l'argument qui distingue, il doit se voir en faisant défiler ;
     3. moins de mots par bloc, et des chiffres qui se recomptent.
   ========================================================================= */

.acc { --encre: #17140f; --encre2: #221e18; --sur-encre: #f2eee7; --sur-encre2: #a99f90; }

/* ── Héros ─────────────────────────────────────────────────────────────── */
.acc .acc-hero {
  position: relative;
  padding: 72px 0 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
.acc-hero::after {
  /* Le quadrillage s'efface vers le bas : il cadre le titre, pas la capture. */
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.acc-hero .wrap { position: relative; z-index: 1; }
.acc-hero-text { max-width: none; }
.acc-hero h1 {
  /* Une seule ligne sur écran large (retour du 18/10) : la taille suit la
     largeur, plafonnée pour tenir dans la colonne de 1 092 px. */
  font-size: clamp(34px, 4.5vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  font-weight: 700;
  white-space: nowrap;
}
.acc-hero h1 .doux { font-weight: 400; color: var(--ink2); }
@media (max-width: 760px) { .acc-hero h1 { white-space: normal; } }
.acc-hero h1 .glow { color: var(--accent); }
/* Hiérarchie du héros (retour du 18/10) : le TITRE dit ce qu'est le produit,
   le sous-titre ce qu'il contient, et l'accroche commerciale vient ensuite. */
.acc-hero h1 { margin-bottom: 14px; }
.acc-soustitre {
  margin: 0 0 30px;
  font-family: var(--font-mono); font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.acc-argument {
  margin: 0 0 18px; max-width: none;
  font-size: clamp(24px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -0.02em; font-weight: 600;
}
.acc-argument .glow { color: var(--accent); }
.acc-hero .lede { font-size: clamp(17px, 1.6vw, 20px); max-width: none; margin-bottom: 30px; }
.acc-hero .cta-row { margin-bottom: 14px; }
.acc-note { font-size: 13.5px; color: var(--ink2); margin: 0; }

/* La fenêtre du produit — la capture, cadrée comme une application. */
.acc-fenetre {
  position: relative;
  margin: 54px auto 0;
  max-width: 1180px;
  border-radius: 14px 14px 0 0;
  border: 1px solid var(--line2);
  border-bottom: 0;
  background: var(--panel);
  box-shadow: 0 -2px 0 rgba(255,255,255,.4) inset, 0 30px 80px -20px rgba(40, 28, 10, .35);
  overflow: hidden;
}
.acc-fenetre-barre {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2);
}
.acc-fenetre-barre i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); display: inline-block; }
.acc-fenetre-barre span { margin-left: 10px; }
.acc-fenetre img { width: 100%; }

/* Les étiquettes posées sur la capture — du texte, pas de l'image : nettes,
   traduites, et lisibles par un lecteur d'écran. */
.acc-repere {
  position: absolute; z-index: 2;
  display: flex; gap: 10px; align-items: flex-start;
  max-width: 300px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--encre); color: var(--sur-encre);
  font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.45);
}
.acc-repere b { color: #f3b867; font-weight: 600; }
.acc-repere .pastille {
  flex: none; margin-top: 5px;
  width: 9px; height: 9px; border-radius: 50%; background: #f3b867;
  box-shadow: 0 0 0 0 rgba(243,184,103,.7);
  animation: acc-pouls 2.4s infinite;
}
@keyframes acc-pouls { 70% { box-shadow: 0 0 0 10px rgba(243,184,103,0); } 100% { box-shadow: 0 0 0 0 rgba(243,184,103,0); } }
.acc-repere.r1 { right: 3%; top: 16%; }
.acc-repere.r2 { right: 3%; bottom: 13%; }
@media (max-width: 900px) {
  .acc-repere { position: static; max-width: none; border-radius: 0; box-shadow: none; }
}

/* ── Bande de chiffres ─────────────────────────────────────────────────── */
.acc-chiffres { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.acc-chiffres .wrap { display: grid; grid-template-columns: repeat(5, 1fr); }
.acc-chiffre { padding: 26px 18px; border-left: 1px solid var(--line); }
.acc-chiffre:first-child { border-left: 0; }
.acc-chiffre .n { font-family: var(--font-mono); font-size: 34px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.acc-chiffre .l { margin-top: 8px; font-size: 13.5px; color: var(--ink2); line-height: 1.35; }
@media (max-width: 900px) {
  .acc-chiffres .wrap { grid-template-columns: repeat(2, 1fr); }
  .acc-chiffre { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Sections ──────────────────────────────────────────────────────────── */
.acc section { padding: 96px 0; }
.acc .kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 14px;
}
.acc h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
.acc .sub { font-size: 18px; }

/* ── Les quatre portes ─────────────────────────────────────────────────── */
.acc-portes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.acc-porte {
  display: flex; flex-direction: column;
  padding: 24px 22px 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  transition: border-color .2s ease, transform .2s ease;
}
.acc-porte:hover { border-color: var(--accent); transform: translateY(-2px); }
.acc-porte .qui { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.acc-porte h3 { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; margin: 10px 0 12px; }
.acc-porte .douleur { font-size: 14.5px; color: var(--ink2); font-style: italic; margin: 0 0 14px; }
.acc-porte ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; font-size: 14.5px; }
.acc-porte li { position: relative; padding-left: 18px; }
.acc-porte li::before { content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--accent); }
.acc-porte .aller { margin-top: auto; font-weight: 600; color: var(--accent); }
.acc-porte .aller::after { content: ' →'; }
@media (max-width: 1080px) { .acc-portes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .acc-portes { grid-template-columns: 1fr; } }

/* ── Le juge : la section en encre ─────────────────────────────────────── */
.acc .acc-juge { background: var(--encre); color: var(--sur-encre); }
.acc-juge .sub { color: var(--sur-encre2); }
.acc-juge .kicker { color: #f3b867; }
.acc-boucle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 44px 0 46px; counter-reset: pas; }
.acc-pas {
  position: relative; padding: 20px 18px;
  border: 1px solid #3a342b; border-radius: 12px; background: var(--encre2);
  counter-increment: pas;
}
.acc-pas::before {
  content: counter(pas, decimal-leading-zero);
  display: block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 12px; color: #f3b867;
}
.acc-pas h3 { font-size: 17px; margin: 0 0 8px; letter-spacing: -0.01em; }
.acc-pas p { font-size: 14px; color: var(--sur-encre2); margin: 0; line-height: 1.5; }
.acc-pas.cle { border-color: #f3b867; }
.acc-juge-bas { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.acc-juge-bas figure { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid #3a342b; }
.acc-juge-bas figcaption { padding: 10px 14px; font-size: 13px; color: var(--sur-encre2); background: var(--encre2); }
.acc-disciplines { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.acc-disciplines li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #3a342b; font-size: 15px; }
.acc-disciplines li span { font-family: var(--font-mono); font-size: 12px; color: var(--sur-encre2); white-space: nowrap; }
.acc-garanties { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-garanties li { padding: 6px 11px; border: 1px solid #3a342b; border-radius: 999px; font-size: 13px; color: var(--sur-encre); }
@media (max-width: 1080px) {
  .acc-boucle { grid-template-columns: repeat(2, 1fr); }
  .acc-juge-bas { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .acc-boucle { grid-template-columns: 1fr; } }

/* ── La chaîne : du pourquoi à la colonne ──────────────────────────────── */
.acc-chaine {
  display: flex; align-items: stretch; gap: 0;
  margin: 40px 0 34px; padding-bottom: 6px;
  overflow-x: auto; scrollbar-width: thin;
}
.acc-maillon {
  flex: 1 1 0; min-width: 104px;
  position: relative;
  padding: 16px 14px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
  margin-right: 20px;
}
.acc-maillon:last-child { margin-right: 0; border-color: var(--accent); }
.acc-maillon:not(:last-child)::after {
  content: '→'; position: absolute; right: -18px; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-weight: 600;
}
.acc-maillon .quoi { font-weight: 600; font-size: 15px; line-height: 1.25; }
.acc-maillon .ou { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink2); line-height: 1.35; }
.acc-trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.acc-trois h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
.acc-trois p { margin: 0; color: var(--ink2); font-size: 15px; }
@media (max-width: 900px) { .acc-trois { grid-template-columns: 1fr; } }

/* ── Les familles de canevas ───────────────────────────────────────────── */
.acc-familles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.acc-famille {
  padding: 22px 22px 20px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.acc-famille .tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.acc-famille h3 { font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.acc-famille .nb { font-family: var(--font-mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
.acc-famille .nota { margin: 4px 0 12px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink2); }
.acc-famille p { margin: 0; font-size: 14.5px; color: var(--ink2); }
.acc-famille.large { grid-column: 1 / -1; background: var(--accent-soft); border-color: transparent; }
.acc-famille.large p { color: var(--ink); }
@media (max-width: 980px) { .acc-familles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .acc-familles { grid-template-columns: 1fr; } }

/* ── Les preuves ───────────────────────────────────────────────────────── */
.acc-preuves { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.acc-preuves figure { margin: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.acc-preuves figure:first-child { grid-column: 1 / -1; }
.acc-preuves img { width: 100%; }
.acc-preuves figcaption { padding: 12px 16px; font-size: 14px; color: var(--ink2); border-top: 1px solid var(--line); }
.acc-preuves figcaption b { color: var(--ink); }
@media (max-width: 900px) { .acc-preuves { grid-template-columns: 1fr; } }

/* ── Ouvert : ce qui entre, ce qui sort ────────────────────────────────── */
.acc-io { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.acc-io > div { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.acc-io h3 { font-size: 19px; margin: 0 0 6px; }
.acc-io p { margin: 0 0 16px; color: var(--ink2); font-size: 15px; }
.acc-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acc-formats li {
  padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line2);
  font-family: var(--font-mono); font-size: 12.5px; background: var(--panel2);
}
@media (max-width: 900px) { .acc-io { grid-template-columns: 1fr; } }

/* ── Confiance : gouvernance et hébergement ────────────────────────────── */
.acc-confiance { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.acc-confiance > div { padding: 24px 24px 22px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
.acc-confiance > div:nth-child(3n+1) { border-left: 0; }
.acc-confiance > div:nth-child(-n+3) { border-top: 0; }
.acc-confiance h3 { font-size: 17px; margin: 0 0 6px; letter-spacing: -0.01em; }
.acc-confiance p { margin: 0; font-size: 14.5px; color: var(--ink2); }
@media (max-width: 900px) {
  .acc-confiance { grid-template-columns: 1fr; }
  .acc-confiance > div { border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .acc-confiance > div:first-child { border-top: 0 !important; }
}

/* ── Les refus ─────────────────────────────────────────────────────────── */
.acc-refus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.acc-refus h3 { font-size: 17px; margin: 0 0 8px; }
.acc-refus h3::before { content: '⊘ '; color: var(--accent); }
.acc-refus p { margin: 0; font-size: 14.5px; color: var(--ink2); }
@media (max-width: 900px) { .acc-refus { grid-template-columns: 1fr; } }

/* ── Trajectoire ───────────────────────────────────────────────────────── */
.acc-frise { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.acc-frise::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line2); }
.acc-jalon { position: relative; padding: 30px 26px 0 0; }
.acc-jalon::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line2);
}
.acc-jalon.maintenant::before { background: var(--accent); border-color: var(--accent); }
.acc-jalon .quand { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.acc-jalon h3 { font-size: 18px; margin: 6px 0 8px; }
.acc-jalon p { margin: 0; font-size: 14.5px; color: var(--ink2); }
@media (max-width: 900px) { .acc-frise { grid-template-columns: 1fr; gap: 22px; } .acc-frise::before { display: none; } }

/* ── Appel final ───────────────────────────────────────────────────────── */
.acc .acc-final { background: var(--encre); color: var(--sur-encre); text-align: center; }
.acc-final h2 { margin-inline: auto; }
.acc-final .sub { color: var(--sur-encre2); margin-inline: auto; }
.acc-final .cta-row { justify-content: center; }
.acc-final .btn-ghost { color: var(--sur-encre); border-color: #4a4338; }

@media (prefers-color-scheme: dark) {
  .acc { --encre: #0c0a08; --encre2: #17140f; }
  .acc-fenetre { box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
}
@media (max-width: 620px) {
  .acc section { padding: 68px 0; }
  .acc .acc-hero { padding-top: 48px; }
}

/* L'en-tête de section de `site.css` est une grille à deux colonnes (titre à
   gauche, sous-titre à droite) : ici le petit titre, le titre et le
   sous-titre se lisent en une colonne, de haut en bas. */
.acc .sec-head { display: block; max-width: none; margin-bottom: 40px; }
.acc .sec-head h2 { margin: 0 0 16px; }
.acc .sec-head .sub { max-width: none; }
@media (max-width: 900px) { .acc-chiffre:last-child { grid-column: 1 / -1; } }

/* Coupures de ligne (retour du 18/10 : « les textes sont coupés prématurément »).
   Les blocs de texte étaient bornés trop étroit — un titre laissait son dernier
   mot seul sur une ligne, la moitié droite de l'écran vide. Bornes élargies, et
   le navigateur ÉQUILIBRE les titres (aucun mot orphelin) et soigne la fin des
   paragraphes. */
/* Ni `balance` ni `pretty` : tous deux coupent AVANT la fin de la ligne pour
   équilibrer, et c'est précisément le retour à la ligne prématuré signalé.
   Les textes occupent toute la largeur de leur colonne. */
.acc .sub, .acc .lede { max-width: none; }

/* ── Tutoriels (18/10) ─────────────────────────────────────────────────── */
.acc-tuto-vedette { display: grid; grid-template-columns: 1.7fr 1fr; gap: 36px; align-items: center; }
.acc-tuto-vedette video { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line2); background: #000; box-shadow: 0 24px 60px -24px rgba(40,28,10,.4); }
.acc-tuto-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.acc-tuto-points li { position: relative; padding-left: 20px; color: var(--ink2); }
.acc-tuto-points li::before { content: ''; position: absolute; left: 0; top: .7em; width: 9px; height: 2px; background: var(--accent); }
@media (max-width: 980px) { .acc-tuto-vedette { grid-template-columns: 1fr; } }
.acc-tuto-langue { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13px; color: var(--ink2); }
.acc-tuto-langue span { margin-right: 4px; }
.acc-tuto-langue button { font: inherit; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); cursor: pointer; }
.acc-tuto-langue button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600; }