/* Tutoriels de généalogie : mise en page de lecture, aux couleurs de GeneBase (clair et sombre) */

/* ── Barre de progression ── */
.tuto-progression { position: fixed; top: var(--nav-height, 70px); left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.tuto-progression span { display: block; height: 100%; width: 0; background: var(--clr-accent); transition: width 80ms linear; }

/* ── En-tête ── */
.tuto-hero { background: var(--clr-hero-bg); color: var(--clr-hero-text); padding: calc(var(--nav-height, 70px) + var(--space-10)) 0 var(--space-12);
  position: relative; overflow: hidden; }
.tuto-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 30%, rgba(199, 144, 30, 0.16), transparent 55%); }
.tuto-hero__interieur { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; position: relative; z-index: 1; }
.tuto-fil { font-size: var(--text-xs); color: var(--clr-hero-muted); margin-bottom: var(--space-5); }
.tuto-fil a { color: var(--clr-hero-muted); text-decoration: none; }
.tuto-fil a:hover { color: var(--clr-hero-text); }
.tuto-eyebrow { display: inline-block; padding: 4px 12px; border: 1px solid rgba(229, 167, 42, 0.45); border-radius: var(--radius-full);
  color: #E5A72A; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tuto-titre { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.15; margin: var(--space-4) 0 var(--space-4); color: var(--clr-hero-text); }
.tuto-accroche { font-size: var(--text-lg); line-height: 1.6; color: var(--clr-hero-muted); max-width: 560px; margin: 0 0 var(--space-6); }
.tuto-infos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tuto-infos li { padding: 6px 12px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-sm); color: var(--clr-hero-text); }
.tuto-infos span { color: #E5A72A; margin-right: 4px; }
.tuto-hero__dessin svg { width: 100%; height: auto; max-width: 440px; display: block; margin-inline: auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25)); }

/* ── Corps : sommaire + texte ── */
.tuto-corps { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12) var(--space-16); align-items: start; }
.tuto-sommaire { position: sticky; top: calc(var(--nav-height, 70px) + var(--space-6)); }
.tuto-sommaire__boite { background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); }
.tuto-sommaire__titre { font-family: var(--font-serif); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-3); color: var(--clr-text); }
.tuto-sommaire ol { list-style: none; counter-reset: s; margin: 0 0 var(--space-4); padding: 0; }
.tuto-sommaire li { counter-increment: s; }
.tuto-sommaire li a { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 7px 8px; border-radius: var(--radius-md);
  font-size: var(--text-sm); line-height: 1.35; color: var(--clr-text-secondary); text-decoration: none; transition: background var(--ease-fast), color var(--ease-fast); }
.tuto-sommaire li a::before { content: counter(s); font-weight: 700; color: var(--clr-text-muted); }
.tuto-sommaire li a:hover { background: var(--clr-primary-light); color: var(--clr-primary); }
.tuto-sommaire li a.actif { background: var(--clr-primary-light); color: var(--clr-primary); font-weight: 600; }
.tuto-sommaire li a.actif::before { color: var(--clr-accent); }
.tuto-sommaire__arbre { display: block; text-align: center; padding: 10px; border-radius: var(--radius-md); background: var(--clr-primary); color: var(--clr-text-inverse);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
[data-theme="dark"] .tuto-sommaire__arbre { color: #0E1520; }

.tuto-texte { max-width: 780px; font-size: 1.0625rem; line-height: 1.75; color: var(--clr-text); }
.tuto-texte p { margin: 0 0 var(--space-5); }
.tuto-texte a { color: var(--clr-primary); text-decoration: underline; text-decoration-color: var(--clr-accent); text-underline-offset: 3px; }
.tuto-texte a:hover { text-decoration-thickness: 2px; }
.tuto-texte h3 { font-family: var(--font-serif); font-size: var(--text-2xl); margin: var(--space-10) 0 var(--space-3); color: var(--clr-text); }
.tuto-texte ul:not([class]), .tuto-texte ol:not([class]) { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.tuto-texte ul:not([class]) { list-style: disc; }
.tuto-texte ol:not([class]) { list-style: decimal; }
.tuto-texte ul:not([class]) li::marker { color: var(--clr-accent); }
.tuto-retenir ul { list-style: disc; }
.tuto-texte li { margin-bottom: 6px; }
.tuto-texte strong { color: var(--clr-text); }
.tuto-ext { font-size: 0.8em; margin-left: 2px; }
.tuto-chapeau { font-size: var(--text-lg); color: var(--clr-text-secondary); border-left: 4px solid var(--clr-accent); padding-left: var(--space-5); margin-bottom: var(--space-10); }

/* Titre de partie */
.tuto-partie { display: flex; gap: var(--space-4); align-items: center; font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.2;
  margin: var(--space-16) 0 var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--clr-separator); scroll-margin-top: calc(var(--nav-height, 70px) + 20px); color: var(--clr-text); }
.tuto-partie small { display: block; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--clr-text-muted); margin-top: 4px; }
.tuto-partie__numero { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--clr-primary);
  color: var(--clr-text-inverse); font-size: 1.4rem; }
[data-theme="dark"] .tuto-partie__numero { color: #0E1520; }

/* Encadrés */
.tuto-encadre { margin: var(--space-6) 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); border: 1px solid; }
.tuto-encadre__titre { font-weight: 700; margin: 0 0 var(--space-2) !important; }
.tuto-encadre__texte > :last-child { margin-bottom: 0; }
.tuto-encadre__texte { font-size: var(--text-base); }
.tuto-encadre--astuce { background: var(--clr-success-bg); border-color: rgba(45, 106, 79, 0.25); }
.tuto-encadre--astuce .tuto-encadre__titre { color: var(--clr-success); }
.tuto-encadre--attention { background: var(--clr-warning-bg); border-color: rgba(214, 137, 16, 0.3); }
.tuto-encadre--attention .tuto-encadre__titre { color: #A0640A; }
.tuto-encadre--exemple { background: var(--clr-info-bg); border-color: rgba(36, 113, 163, 0.25); }
.tuto-encadre--exemple .tuto-encadre__titre { color: var(--clr-info); }
.tuto-encadre--outil { background: var(--clr-accent-light); border-color: rgba(199, 144, 30, 0.35); }
.tuto-encadre--outil .tuto-encadre__titre { color: var(--clr-primary); }
[data-theme="dark"] .tuto-encadre--attention .tuto-encadre__titre { color: #F0B35A; }
[data-theme="dark"] .tuto-encadre--astuce .tuto-encadre__titre { color: #6FD3A0; }
[data-theme="dark"] .tuto-encadre--exemple .tuto-encadre__titre { color: #7FB8E6; }

/* Étapes */
.tuto-etapes { list-style: none; counter-reset: e; margin: var(--space-6) 0; padding: 0; display: grid; gap: var(--space-3); }
.tuto-etapes li { counter-increment: e; position: relative; padding: var(--space-4) var(--space-5) var(--space-4) 64px; background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg); margin: 0; }
.tuto-etapes li::before { content: counter(e); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--clr-accent-light); color: var(--clr-accent); font-weight: 800; }
.tuto-etapes li > strong { display: block; margin-bottom: 2px; }
.tuto-etapes span strong { color: var(--clr-text); }
.tuto-etapes li > span { display: block; color: var(--clr-text-secondary); font-size: var(--text-base); line-height: 1.6; }

/* Dessins : toujours sur papier clair (lisibles dans les deux thèmes) */
.tuto-figure { margin: var(--space-8) 0; }
.tuto-figure__dessin { background: #FBF8F1; border: 1px solid #E4DCCC; border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.tuto-figure__dessin svg { display: block; width: 100%; height: auto; }
.tuto-figure figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--clr-text-muted); text-align: center; font-style: italic; }
[data-theme="dark"] .tuto-figure__dessin { border-color: #2A3B50; }

/* Cartes vers les outils */
.tuto-outils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.tuto-outil { display: grid; grid-template-columns: 44px 1fr 18px; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); text-decoration: none !important; color: var(--clr-text) !important;
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), border-color var(--ease-fast); }
.tuto-outil:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--clr-accent); }
.tuto-outil__emoji { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--clr-accent-light); font-size: 22px; }
.tuto-outil strong { display: block; font-size: var(--text-base); line-height: 1.3; }
.tuto-outil small { display: block; font-size: var(--text-sm); color: var(--clr-text-secondary); line-height: 1.4; margin-top: 2px; }
.tuto-outil__fleche { color: var(--clr-accent); font-weight: 700; }

/* À retenir */
.tuto-retenir { margin: var(--space-8) 0 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--clr-primary-light);
  border: 1px dashed var(--clr-primary); }
.tuto-retenir__titre { font-weight: 800; color: var(--clr-primary); margin: 0 0 var(--space-2) !important; }
.tuto-retenir ul { margin: 0; padding-left: 1.2em; }
.tuto-retenir li { margin-bottom: 4px; }

/* Tableaux */
.tuto-tableau { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--space-6) 0; font-size: var(--text-sm); line-height: 1.5;
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--clr-bg-secondary); }
.tuto-tableau th { text-align: left; background: var(--clr-primary); color: var(--clr-text-inverse); padding: 10px 14px; font-weight: 700; }
[data-theme="dark"] .tuto-tableau th { color: #0E1520; }
.tuto-tableau td { padding: 10px 14px; border-top: 1px solid var(--clr-separator); vertical-align: top; }
.tuto-tableau tr:nth-child(even) td { background: var(--clr-primary-light); }
.tuto-tableau-boite { overflow-x: auto; }

/* Cartes « qui / où » (grilles d'informations) */
.tuto-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-6) 0; }
.tuto-carte { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-top: 4px solid var(--clr-accent); }
.tuto-carte__titre { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 700; margin: 0 0 var(--space-2) !important; }
.tuto-carte p { font-size: var(--text-sm); line-height: 1.6; color: var(--clr-text-secondary); margin: 0 0 var(--space-2); }
.tuto-carte p:last-child { margin-bottom: 0; }

/* Fin : passer à l'action, autres tutoriels */
.tuto-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; margin: var(--space-16) 0 var(--space-10);
  padding: var(--space-8); border-radius: var(--radius-xl); background: var(--clr-hero-bg); color: var(--clr-hero-text); }
.tuto-action p { margin: 0; color: var(--clr-hero-muted); font-size: var(--text-base); }
.tuto-action .tuto-action__titre { font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 700; color: var(--clr-hero-text); margin-bottom: var(--space-2); }
.tuto-action__boutons { display: flex; flex-direction: column; gap: var(--space-2); }
.tuto-action .btn { text-decoration: none; text-align: center; }
.tuto-action .btn--primary { background: #C7901E; border-color: #C7901E; color: #1A1408; }
.tuto-action .btn--outline { border-color: rgba(255, 255, 255, 0.4); color: var(--clr-hero-text); }
.tuto-autres h2 { font-family: var(--font-serif); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.tuto-autres__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tuto-autre { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--clr-bg-secondary);
  border: 1px solid var(--clr-border); text-decoration: none !important; color: var(--clr-text) !important; transition: border-color var(--ease-fast), transform var(--ease-fast); }
.tuto-autre:hover { border-color: var(--clr-accent); transform: translateY(-2px); }
.tuto-autre__icone { flex: 0 0 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--clr-primary-light); color: var(--clr-primary); }
.tuto-autre strong { display: block; font-size: var(--text-sm); line-height: 1.35; }
.tuto-autre small { display: block; font-size: var(--text-xs); color: var(--clr-text-muted); margin-top: 2px; }

/* ── Page d'accueil des tutoriels ── */
.tutos-hero { background: var(--clr-hero-bg); color: var(--clr-hero-text); padding: calc(var(--nav-height, 70px) + var(--space-12)) 0 var(--space-16); position: relative; overflow: hidden; }
.tutos-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% 20%, rgba(199, 144, 30, 0.18), transparent 50%); }
.tutos-hero .container { position: relative; z-index: 1; }
.tutos-hero h1 { font-family: var(--font-serif); font-size: clamp(2.2rem, 5vw, 3.6rem); margin: var(--space-4) 0; color: var(--clr-hero-text); }
.tutos-hero h1 em { color: #E5A72A; }
.tutos-hero p { font-size: var(--text-lg); color: var(--clr-hero-muted); max-width: 640px; line-height: 1.6; margin: 0; }
.tutos-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: calc(-1 * var(--space-10)); position: relative; z-index: 2; }
.tutos-carte { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-xl);
  background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); box-shadow: var(--shadow-md); text-decoration: none !important; color: var(--clr-text) !important;
  transition: transform var(--ease-base), box-shadow var(--ease-base), border-color var(--ease-base); }
.tutos-carte:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); border-color: var(--clr-accent); }
.tutos-carte__dessin { border-radius: var(--radius-lg); background: var(--clr-hero-bg); display: grid; place-items: center; min-height: 150px; padding: var(--space-3);
  background-image: radial-gradient(circle at 70% 30%, rgba(199, 144, 30, 0.22), transparent 60%); }
.tutos-carte__dessin svg { width: 100%; height: auto; max-width: 160px; }
.tutos-carte__meta { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clr-accent); }
.tutos-carte h2 { font-family: var(--font-serif); font-size: var(--text-2xl); line-height: 1.2; margin: var(--space-2) 0; }
.tutos-carte p { font-size: var(--text-sm); line-height: 1.6; color: var(--clr-text-secondary); margin: 0 0 var(--space-3); }
.tutos-carte ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tutos-carte li { font-size: var(--text-xs); padding: 3px 9px; border-radius: var(--radius-full); background: var(--clr-primary-light); color: var(--clr-primary); }
.tutos-carte__lire { font-size: var(--text-sm); font-weight: 700; color: var(--clr-primary); }
.tutos-section { padding-block: var(--space-16); }
.tutos-section h2.tutos-titre { font-family: var(--font-serif); font-size: var(--text-3xl); margin: 0 0 var(--space-2); }
.tutos-section .tutos-intro { color: var(--clr-text-secondary); margin: 0 0 var(--space-6); }
.tutos-parcours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); counter-reset: p; }
.tutos-parcours a { counter-increment: p; position: relative; padding: var(--space-5); padding-top: var(--space-10); border-radius: var(--radius-lg);
  background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); text-decoration: none; color: var(--clr-text); }
.tutos-parcours a::before { content: counter(p); position: absolute; top: var(--space-4); left: var(--space-5); font-family: var(--font-serif); font-weight: 700; font-size: var(--text-xl); color: var(--clr-accent); }
.tutos-parcours a:hover { border-color: var(--clr-accent); }
.tutos-parcours strong { display: block; margin-bottom: 4px; }
.tutos-parcours small { color: var(--clr-text-secondary); font-size: var(--text-sm); line-height: 1.5; display: block; }

/* ── Écrans plus petits ── */
@media (max-width: 1100px) {
  .tuto-corps { grid-template-columns: 1fr; gap: var(--space-6); }
  .tuto-sommaire { position: static; }
  .tuto-sommaire ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-3); }
  .tuto-texte { max-width: none; }
  .tutos-parcours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tuto-hero__interieur { grid-template-columns: 1fr; gap: var(--space-6); }
  .tuto-hero__dessin svg { max-width: 300px; }
  .tutos-grille { grid-template-columns: 1fr; }
  .tuto-autres__liste { grid-template-columns: 1fr; }
  .tuto-action { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tuto-outils { grid-template-columns: 1fr; }
  .tuto-sommaire ol { grid-template-columns: 1fr; }
  .tuto-figure__dessin { padding: var(--space-3); }
  .tuto-texte { font-size: 1rem; }
  .tuto-partie__numero { width: 42px; height: 42px; font-size: 1.15rem; }
  .tutos-carte { grid-template-columns: 1fr; }
  .tutos-carte__dessin { min-height: 0; }
  .tutos-carte__dessin svg { max-width: 190px; }
  .tutos-parcours { grid-template-columns: 1fr; }
}

/* ── Page « Vos données et votre arbre » ── */
.conf-garanties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-top: calc(-1 * var(--space-10));
  position: relative; z-index: 2; }
.conf-garantie { background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-md); text-align: center; }
.conf-garantie span { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--space-3); border-radius: 50%;
  background: var(--clr-accent-light); font-size: 26px; }
.conf-garantie strong { display: block; font-family: var(--font-serif); font-size: var(--text-lg); margin-bottom: 4px; }
.conf-garantie small { display: block; color: var(--clr-text-secondary); font-size: var(--text-sm); line-height: 1.5; }
.conf-faq { max-width: 860px; margin-inline: auto; }
.conf-question { background: var(--clr-bg-secondary); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.conf-question summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 700; font-size: var(--text-base); list-style: none;
  display: flex; justify-content: space-between; gap: var(--space-3); }
.conf-question summary::-webkit-details-marker { display: none; }
.conf-question summary::after { content: '+'; color: var(--clr-accent); font-size: 1.4rem; line-height: 1; }
.conf-question[open] summary::after { content: '−'; }
.conf-question p { margin: 0; padding: 0 var(--space-5) var(--space-5); color: var(--clr-text-secondary); line-height: 1.7; }
@media (max-width: 960px) { .conf-garanties { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .conf-garanties { grid-template-columns: 1fr; } }