/* tdah.dreamweavor.com : feuille de style
   Principe directeur : calme visuel. Le public a une sensibilité sensorielle
   souvent plus forte à la surcharge : jamais de mouvement agressif, jamais
   de texte petit, toujours de l'espace pour respirer. */

/* ───────────────────────────────────────────
   Polices auto-hébergées (aucune dépendance externe)
   ─────────────────────────────────────────── */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('polices/poppins-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('polices/poppins-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('polices/poppins-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('polices/lora-normal-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('polices/lora-italic-400.woff2') format('woff2');
}

/* ───────────────────────────────────────────
   Variables de marque
   ─────────────────────────────────────────── */
:root {
    /* Thème sombre et feutré : un fond clair pleine page s'est révélé trop
       lumineux et fatigant à l'usage. On garde la même famille de teintes
       (prune, terracotta, framboise) mais recalibrée pour un fond sombre à
       faible luminosité, dans la continuité du dégradé du hero. */
    --fond: #241E22;
    --carte: #2F2730;
    --carte-haute: #392F3B;
    --bordure-douce: #4A3E48;

    --degrade-hero: linear-gradient(160deg, #4A3B4C 0%, #6B4A5C 55%, #C97B5E 100%);

    --titre: #F1E4DC;
    --sous-titre: #E0899C;
    --accent: #C97B5E;
    --accent-fonce: #E0987A;
    --texte: #E7DFD8;
    --texte-attenue: #AB9E9F;

    --encadre-verifie-fond: #362F26;
    --encadre-verifie-bordure: #55492F;
    --encadre-verifie-label: #D3BD8C;

    --encadre-astuce-fond: #253028;
    --encadre-astuce-bordure: #3C5342;
    --encadre-astuce-label: #9BCBA8;

    --encadre-essentiel-fond: #3B2B20;
    --encadre-essentiel-bordure: #64432A;
    --encadre-essentiel-label: #E3B27C;

    --rayon: 16px;
    --rayon-grand: 24px;
    --ombre: 0 12px 32px rgba(0, 0, 0, 0.35);

    --police-titres: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --police-corps: 'Lora', Georgia, serif;
}

/* ───────────────────────────────────────────
   Base
   ─────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    font-family: var(--police-corps);
    background: var(--fond);
    color: var(--texte);
    font-size: 1.125rem; /* 18px minimum imposé pour tout le corps de texte */
    line-height: 1.7;
}

h1, h2, h3, h4 {
    font-family: var(--police-titres);
    color: var(--titre);
    line-height: 1.3;
    margin: 0 0 0.6em;
}

h1 { font-weight: 700; font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-weight: 600; color: var(--sous-titre); font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-weight: 600; font-size: 1.25rem; }

p { margin: 0 0 1em; }

a { color: var(--accent-fonce); }

.italique-accroche {
    font-family: var(--police-corps);
    font-style: italic;
    color: var(--texte-attenue);
}

.conteneur {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.conteneur-etroit {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
}

section {
    padding: 64px 0;
}

/* ───────────────────────────────────────────
   Apparition douce au défilement
   Une seule micro-animation, jamais plus : fondu + léger décalage.
   Désactivée automatiquement si prefers-reduced-motion.
   ─────────────────────────────────────────── */
.apparition {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.apparition.visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .apparition { opacity: 1; transform: none; }
}

/* ───────────────────────────────────────────
   En-tête : fixe, visible en permanence au défilement
   ─────────────────────────────────────────── */
.entete-site {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 0;
    background: rgba(36, 30, 34, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--bordure-douce);
}
.entete-site .entete-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.logo-site {
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--titre);
    text-decoration: none;
}

.nav-liens {
    display: flex;
    align-items: center;
    gap: 28px;
}
.nav-liens a {
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 1rem;
    color: var(--texte);
    text-decoration: none;
}
.nav-liens a:hover { color: var(--accent-fonce); }

.bouton-menu {
    display: none;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--titre);
}
.bouton-menu svg { width: 26px; height: 26px; display: block; }

@media (max-width: 720px) {
    .bouton-menu { display: block; }
    .nav-liens {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: #241E22;
        border-bottom: 1px solid var(--bordure-douce);
        padding: 8px 24px 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }
    .nav-liens.ouvert { max-height: 240px; }
    .nav-liens a { padding: 12px 0; width: 100%; }
}

/* ───────────────────────────────────────────
   Hero sombre, écran d'introduction de l'accueil
   ─────────────────────────────────────────── */
.hero-degrade {
    background: var(--degrade-hero);
    color: #fff;
    padding-bottom: 72px;
}
.hero-degrade h1 { color: #fff; }
.hero-degrade .accroche {
    font-family: var(--police-corps);
    font-style: italic;
    font-size: 1.3rem;
    color: #F3E6DD;
    max-width: 620px;
    margin: 0 auto 32px;
}
.hero-contenu {
    text-align: center;
    padding-top: 24px;
}

/* ───────────────────────────────────────────
   Boutons, un seul accent, calme, sans mouvement au survol
   ─────────────────────────────────────────── */
.bouton {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 1.05rem;
    padding: 16px 34px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}
.bouton:hover { background: var(--accent-fonce); }
.bouton:active { transform: scale(0.99); }
.bouton-large { width: 100%; text-align: center; }

.bouton-fantome {
    display: inline-block;
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.6);
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s ease;
}
.bouton-fantome:hover { background: rgba(255,255,255,0.12); }

/* ───────────────────────────────────────────
   Mission
   ─────────────────────────────────────────── */
.section-mission {
    text-align: center;
}
.section-mission .conteneur-etroit p {
    font-size: 1.2rem;
}

/* ───────────────────────────────────────────
   Vidéo : pas de lecture automatique, l'affiche sert d'aperçu calme
   jusqu'à ce que la personne clique elle-même sur lecture.
   ─────────────────────────────────────────── */
.cadre-video {
    border-radius: var(--rayon-grand);
    overflow: hidden;
    box-shadow: var(--ombre);
    border: 1px solid var(--bordure-douce);
}
.cadre-video video {
    display: block;
    width: 100%;
    height: auto;
    background: #000;
}

/* ───────────────────────────────────────────
   Grille des guides
   ─────────────────────────────────────────── */
.grille-guides {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.carte-guide {
    background: var(--carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.carte-guide .public-vise {
    font-size: 0.95rem;
    color: var(--texte-attenue);
    margin-bottom: 4px;
}

.carte-guide .accroche-tome {
    font-family: var(--police-corps);
    font-style: italic;
    color: var(--sous-titre);
    margin-bottom: 16px;
}

/* Prix volontairement discret : un chiffre en gras et imposant se lit comme
   "c'est cher". Le prix est présenté ici comme une information parmi
   d'autres, pas comme l'élément qui doit capter le regard en premier :
   c'est le bouton d'action qui doit rester le plus visible. */
.carte-guide .prix-tome {
    font-family: var(--police-corps);
    font-weight: 400;
    font-size: 1.05rem;
    color: var(--texte-attenue);
    margin: 4px 0 18px;
}

.carte-guide .bouton { margin-top: auto; }

.carte-guide.indisponible {
    opacity: 0.65;
}
.badge-bientot {
    display: inline-block;
    align-self: flex-start;
    background: var(--encadre-verifie-fond);
    color: var(--encadre-verifie-label);
    border: 1px solid var(--encadre-verifie-bordure);
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 999px;
    margin-top: auto;
}

/* ───────────────────────────────────────────
   Blocs de contenu avec icône
   ─────────────────────────────────────────── */
.grille-contenu {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.bloc-contenu {
    background: var(--carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon);
    padding: 28px;
}
.bloc-contenu .icone {
    width: 40px;
    height: 40px;
    color: var(--accent);
    margin-bottom: 14px;
}
.bloc-contenu h3 { margin-bottom: 8px; }
.bloc-contenu p { color: var(--texte-attenue); margin-bottom: 0; font-size: 1rem; }

/* ───────────────────────────────────────────
   Encadrés pédagogiques (utilisés dans le PDF, montrés en exemple ici)
   ─────────────────────────────────────────── */
.encadre {
    border-radius: var(--rayon);
    border: 1px solid;
    padding: 20px 24px;
    margin: 0 0 20px;
}
.encadre .label-encadre {
    display: block;
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}
.encadre p:last-child { margin-bottom: 0; }

.encadre-verifie {
    background: var(--encadre-verifie-fond);
    border-color: var(--encadre-verifie-bordure);
}
.encadre-verifie .label-encadre { color: var(--encadre-verifie-label); }

.encadre-astuce {
    background: var(--encadre-astuce-fond);
    border-color: var(--encadre-astuce-bordure);
}
.encadre-astuce .label-encadre { color: var(--encadre-astuce-label); }

.encadre-essentiel {
    background: var(--encadre-essentiel-fond);
    border-color: var(--encadre-essentiel-bordure);
}
.encadre-essentiel .label-encadre { color: var(--encadre-essentiel-label); }

/* ───────────────────────────────────────────
   Page produit
   ─────────────────────────────────────────── */
.hero-produit {
    text-align: center;
    padding: 56px 0 40px;
}
.hero-produit .public-vise {
    display: inline-block;
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--accent-fonce);
    background: var(--encadre-essentiel-fond);
    border: 1px solid var(--encadre-essentiel-bordure);
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.hero-produit .accroche-tome {
    font-family: var(--police-corps);
    font-style: italic;
    font-size: 1.3rem;
    color: var(--sous-titre);
    margin-bottom: 28px;
}

.carte-produit {
    background: var(--carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    padding: 36px;
    max-width: 460px;
    margin: 0 auto;
    text-align: center;
}
.carte-produit .prix {
    font-family: var(--police-corps);
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--texte-attenue);
    margin: 4px 0 20px;
}
.mentions-paiement {
    margin-top: 16px;
    font-size: 0.95rem;
    color: var(--texte-attenue);
}

.section-probleme p {
    font-size: 1.15rem;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

/* ───────────────────────────────────────────
   FAQ : accordéon natif HTML, aucun JavaScript nécessaire
   ─────────────────────────────────────────── */
.faq-item {
    background: var(--carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon);
    margin-bottom: 14px;
    padding: 4px 24px;
}
.faq-item summary {
    font-family: var(--police-titres);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--titre);
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--accent);
    transition: transform 0.2s ease;
    margin-left: 16px;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
    padding-bottom: 18px;
    color: var(--texte-attenue);
}

/* ───────────────────────────────────────────
   Aperçu du PDF (image fournie par Norbert, sinon espace réservé sobre)
   ─────────────────────────────────────────── */
.apercu-pdf {
    max-width: 420px;
    margin: 0 auto 8px;
    border-radius: var(--rayon);
    overflow: hidden;
    box-shadow: var(--ombre);
}
.apercu-pdf img { display: block; width: 100%; height: auto; }
.apercu-pdf-reserve {
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 3 / 4;
    border-radius: var(--rayon);
    border: 1px dashed var(--bordure-douce);
    background: var(--carte);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texte-attenue);
    font-size: 0.95rem;
    text-align: center;
    padding: 20px;
}

/* ───────────────────────────────────────────
   Fil d'ariane discret vers le hub
   ─────────────────────────────────────────── */
.retour-hub {
    text-align: center;
    padding: 8px 0 48px;
}
.retour-hub a {
    color: var(--texte-attenue);
    text-decoration: none;
    font-size: 1rem;
}
.retour-hub a:hover { color: var(--accent-fonce); }

/* ───────────────────────────────────────────
   Pied de page
   ─────────────────────────────────────────── */
footer.pied {
    border-top: 1px solid var(--bordure-douce);
    padding: 40px 0;
    text-align: center;
    color: var(--texte-attenue);
    font-size: 1rem;
}
footer.pied a { color: var(--texte-attenue); }
footer.pied .liens-pied {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* ───────────────────────────────────────────
   Pages d'état (merci / erreur)
   ─────────────────────────────────────────── */
.page-etat {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}
.page-etat .carte-etat {
    background: var(--carte);
    border: 1px solid var(--bordure-douce);
    border-radius: var(--rayon-grand);
    box-shadow: var(--ombre);
    padding: 48px 40px;
    max-width: 540px;
}
.lien-retour {
    display: inline-block;
    margin-top: 24px;
    color: var(--accent-fonce);
    font-family: var(--police-titres);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 480px) {
    .carte-produit, .page-etat .carte-etat { padding: 26px; }
    section { padding: 48px 0; }
}