/* ========================================
   Accueil (SEO-064, SEO-067, basculé en SEO-068 ; préfixe de classes « av2- »
   hérité de la version de travail /accueil-v2).
   Variables et composants de styles.css seulement : surtitre .label,
   repères de cadrage .cadrage, boutons, encart de renvoi, témoignage,
   étiquettes .cert-item, livret, FAQ, contact et appel final. Conteneurs de la
   charte : 1200 px pour les grilles, 800 px pour le texte courant ; gouttière
   mobile de 20 px.
======================================== */

.av2-main {
    margin-top: 80px; /* compense la nav fixed, comme .co-main */
}

.av2-container {
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Arrivée par une ancre depuis une autre page (/#contact, /#fondateur,
   /#grilles-de-lecture) : la section se cale sous la barre fixe. */
#contact,
#fondateur,
#grilles-de-lecture,
#livrets,
#faq {
    scroll-margin-top: 80px;
}

.av2-section {
    padding: var(--space-3xl) var(--section-padding-x);
    background: var(--fond);
}



/* ── Premier écran ─────────────────────────────────────────────────
   Bloc graphite sur toute la largeur, texte seul dans la gouttière de
   section. Sur graphite, surtitre en cuivre simple (5,01:1), texte clair. */
.av2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: min(720px, calc(100vh - 80px));
    background: var(--graphite);
    color: var(--texte-clair);
    --focus: var(--cuivre);
}

.av2-hero-texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-3xl) var(--space-2xl) var(--space-3xl) var(--section-padding-x);
}

.av2-hero .label {
    color: var(--cuivre);
}

/* Le H1 est le surtitre à losange : .label fixe famille, taille, graisse,
   capitales et interlettrage ; on neutralise seulement l'interligne du h1. */
.av2-hero h1.label {
    line-height: var(--leading-tight);
}

/* L'accroche est un paragraphe composé à l'échelle H1, sans être un titre */
.av2-hero-accroche {
    font-family: var(--font-titres);
    font-size: var(--text-hero);
    font-weight: var(--weight-black);
    line-height: var(--leading-h1);
    letter-spacing: -0.02em;
    color: var(--texte-clair);
    max-width: 17em;
    margin-bottom: 1.5rem;
}

/* Deux temps : le constat s'affiche d'emblée, la question apparaît dessous
   (opacité et 12 px, 0,4 s, comme l'apparition des sections), après un temps
   de lecture. CSS seul, sans JavaScript : rien ne reste masqué si le script
   ne charge pas, et le constat, affiché tout de suite, porte le LCP. */
.av2-hero-accroche-constat,
.av2-hero-accroche-question {
    display: block;
}

.av2-hero-accroche-question {
    margin-top: 0.3em;
    animation: av2-question 0.4s ease-out 1.2s both;
}

@keyframes av2-question {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* La règle générale de styles.css raccourcit la durée mais pas le délai :
   sans mouvement, la question est là dès l'affichage. */
@media (prefers-reduced-motion: reduce) {
    .av2-hero-accroche-question {
        animation: none;
    }
}

.av2-hero-note {
    margin: 1rem 0 0;
    font-size: var(--text-small);
    color: var(--acier-clair); /* 7,47:1 sur graphite */
}

.av2-hero-chapo {
    font-size: var(--text-large);
    line-height: var(--leading-relaxed);
    color: var(--texte-clair);
    max-width: 34em;
    margin-bottom: var(--space-lg);
}

.av2-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Un seul aplat cuivre par écran : le bouton principal du premier écran est
   cuivre (.btn-primary), et c'est le bouton de l'en-tête qui passe en contour
   tant que le premier écran est visible (classe .av2-premier-ecran sur body,
   posée dans le HTML et retirée par le script de la page dès que le premier
   écran sort de l'écran). Transition de 0,2 s, coupée sous prefers-reduced-motion
   par la règle générale de styles.css. */
.av2-premier-ecran #navbar .cta-nav {
    background: transparent;
    color: var(--texte-clair);
    box-shadow: inset 0 0 0 1px currentColor;
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.av2-premier-ecran #navbar .cta-nav:hover {
    background: var(--texte-clair);
    color: var(--graphite);
}

#navbar .cta-nav {
    transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.av2-hero .btn-secondary {
    color: var(--texte-clair);
    border-color: currentColor;
}

.av2-hero .btn-secondary:hover {
    background: var(--texte-clair);
    border-color: var(--texte-clair);
    color: var(--graphite);
}

/* ── Ce que vous vivez : cinq lignes numérotées ───────────────────
   Numéro à gauche, phrase à droite, filet fin entre chaque ligne, sur la
   colonne de texte courant. */
.av2-vecu-liste {
    list-style: none;
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid var(--filet);
}

.av2-vecu-item {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: 1rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--filet);
}

.av2-vecu-numero {
    font-family: var(--font-titres);
    font-size: var(--text-h3);
    font-weight: var(--weight-black);
    letter-spacing: -0.01em;
    color: var(--graphite);
}

.av2-vecu-item p {
    margin: 0;
    font-size: var(--text-large);
    line-height: 1.5;
    color: var(--graphite);
}

/* Texte courant sous une liste ou une grille : colonne de 800 px */
.av2-texte {
    max-width: var(--container-narrow);
    margin: var(--space-2xl) auto 0;
}

.av2-texte p {
    font-size: var(--text-large);
    line-height: var(--leading-relaxed);
    color: var(--texte);
    margin-bottom: 1.25rem;
}

.av2-texte p:last-child {
    margin-bottom: 0;
}

/* Liens dans le texte : cuivre profond, graisse 600, soulignés (charte) */
.av2-texte a {
    color: var(--cuivre-profond);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.av2-texte a:hover {
    color: var(--cuivre-profond-survol);
    text-decoration-thickness: 2px;
}

.av2-texte p.av2-lien {
    margin-top: var(--space-sm);
}

/* Lien isolé sur sa ligne : cible de 44 px */
.av2-texte p.av2-lien a {
    display: inline-block;
    padding: 0.6rem 0;
}

/* ── Trois façons de travailler ensemble : cartes à photo ──────────
   Toute la carte est un lien. Photo 3:2 à repères de cadrage en tête,
   titre, phrase, fourchette de prix calée en bas. Même seuil de trois
   colonnes que les colonnes numérotées. */
.av2-offres-cadre {
    container-type: inline-size;
}

.av2-offres-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.av2-offre {
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    color: var(--graphite);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--transition);
}

.av2-offre:hover {
    color: var(--graphite);
    border-color: var(--graphite);
}

.av2-offre:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.av2-offre-photo {
    --cadrage-retrait: 12px;
    --b: 18px;
}

.av2-offre-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.av2-offre-corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.5rem 1.75rem 1.75rem;
}

.av2-offre h3 {
    margin-bottom: 0.75rem;
    transition: color var(--transition);
}

.av2-offre-corps p {
    font-size: 1rem;
    line-height: var(--leading-relaxed);
    color: var(--texte);
    margin-bottom: 1.25rem;
}

.av2-offre-corps p.av2-offre-prix {
    margin: auto 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid var(--filet);
    font-family: var(--font-titres);
    font-size: 1.125rem;
    font-weight: var(--weight-bold);
    color: var(--graphite);
}

/* Carte des ateliers : une liste à losanges au lieu des deux phrases,
   retrait suspendu pour que les intitulés sur deux lignes restent alignés */
.av2-offre-liste {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.av2-offre-liste li {
    position: relative;
    padding-left: 19px;
    font-size: 1rem;
    line-height: var(--leading-relaxed);
    color: var(--texte);
}

.av2-offre-liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: var(--losange);
    height: var(--losange);
    background: var(--cuivre);
    transform: rotate(45deg);
}

@container (min-width: 1120px) {
    .av2-offres-grille {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: none;
        gap: var(--space-lg);
    }
}

/* Phrase sous les offres : centrée, sur deux lignes en desktop (retour
   forcé après « rythme, »), retour naturel en mobile */
.av2-offres-suite p {
    text-align: center;
}

@media (max-width: 768px) {
    .av2-retour-desktop {
        display: none;
    }
}

/* ── Les quatre grilles de lecture : quatre blocs sur graphite ─────
   Section sombre, texte clair. Chaque bloc : grand numéro A1 à A4 en
   cuivre (5,01:1 sur graphite), pictogramme au trait, titre, phrase.
   Bloc à même le fond, filet graphite clair ; au survol, le bloc
   s'éclaircit (graphite clair) et son filet passe en cuivre. Deux par
   deux dès 760 px de conteneur (48 à 50 caractères par ligne), sinon
   empilés. Les blocs apparaissent l'un après l'autre au défilement
   (script.js pose .apparition sur chaque bloc [data-apparition]). */
.av2-section--graphite {
    background: var(--graphite);
    color: var(--texte-clair);
    --focus: var(--cuivre);
}

.av2-section--graphite .label {
    color: var(--cuivre);
}

.av2-section--graphite .section-intro h2 {
    color: var(--texte-clair);
}

.av2-section--graphite .intro-text {
    color: var(--acier-clair);
}

.av2-grilles-cadre {
    container-type: inline-size;
}

.av2-grilles-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.av2-grille {
    background: var(--graphite);
    border: 1px solid var(--graphite-clair);
    border-radius: var(--rayon);
    padding: 1.5rem 1.75rem 1.75rem;
    transition: background-color var(--transition), border-color var(--transition);
}

.av2-grille:hover {
    background: var(--graphite-clair);
    border-color: var(--cuivre);
}

.av2-grille-tete {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.av2-grille-numero {
    font-family: var(--font-titres);
    font-size: 2.5rem;
    font-weight: var(--weight-black);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cuivre);
}

.av2-grille-picto {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--texte-clair);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.av2-grille h3 {
    color: var(--texte-clair);
    margin-bottom: 0.75rem;
}

.av2-grille p {
    margin: 0;
    font-size: 1rem;
    line-height: var(--leading-relaxed);
    color: var(--texte-clair);
}

/* Apparition décalée d'un bloc au suivant ; les transitions de survol
   gardent leur durée propre, sans délai */
.av2-grille.apparition {
    --delai: 0s;
    transition: opacity 0.4s ease var(--delai), transform 0.4s ease var(--delai),
                background-color var(--transition), border-color var(--transition);
}

.av2-grille.apparition:nth-child(2) { --delai: 0.12s; }
.av2-grille.apparition:nth-child(3) { --delai: 0.24s; }
.av2-grille.apparition:nth-child(4) { --delai: 0.36s; }

@container (min-width: 760px) {
    .av2-grilles-grille {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Lien sous les blocs, sur graphite : cuivre simple souligné */
.av2-section--graphite .av2-texte a {
    color: var(--cuivre);
}

.av2-section--graphite .av2-texte a:hover {
    color: var(--cuivre-survol);
}

/* ── Bandeau terrain ────────────────────────────────────────────────
   Photo 21:9 sur toute la largeur, encart graphite en surimpression à
   droite. Sous 768 px, l'encart passe sous la photo : en surimpression,
   il la couvrirait presque entière. */
.av2-terrain {
    position: relative;
    background: var(--fond); /* la photo couvre tout ; l'encart porte son propre graphite */
}

.av2-terrain-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 21 / 9;
    object-fit: cover;
}

.av2-terrain-encart {
    position: absolute;
    z-index: 4; /* au-dessus des repères de cadrage (z-index 3) */
    right: var(--section-padding-x);
    top: 50%;
    transform: translateY(-50%);
    max-width: 24rem;
    padding: var(--space-lg) var(--space-xl);
    background: var(--graphite);
    color: var(--texte-clair);
    border-left: 2px solid var(--cuivre);
    border-radius: var(--rayon);
}

.av2-terrain-encart p {
    margin: 0;
    font-family: var(--font-titres);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: 1.3;
}

/* ── Qui vient chez vous ────────────────────────────────────────── */
.av2-fondateur-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.av2-fondateur-photo .cadrage {
    width: 320px;
    max-width: 100%;
    margin: 0 auto;
}

.av2-fondateur-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--rayon);
}

.av2-fondateur-bio h3 {
    font-size: var(--text-h2);
    margin-bottom: 0.5rem;
}

.av2-fondateur-role {
    font-size: var(--text-large);
    font-weight: var(--weight-semibold);
    color: var(--cuivre-profond);
    margin-bottom: 1.5rem;
}

.av2-fondateur-bio p {
    line-height: var(--leading-relaxed);
    color: var(--texte);
}

/* Trois faits, repérés par le losange cuivre de la charte (.losange) */
.av2-faits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: var(--space-lg);
    padding: 0;
}

.av2-faits li {
    font-family: var(--font-texte);
    font-size: 1.0625rem;
    font-weight: var(--weight-semibold);
    color: var(--graphite);
}

@media (min-width: 900px) {
    .av2-fondateur-grille {
        grid-template-columns: 320px minmax(0, 1fr);
        gap: var(--space-3xl);
        max-width: var(--container-max);
        align-items: start;
    }
}

/* ── Preuves ──────────────────────────────────────────────────────── */
.av2-invites {
    max-width: 700px;
    margin: var(--space-2xl) auto 0;
    text-align: center;
}

.av2-invites .label {
    margin-bottom: 1rem;
}

.av2-fondateur-bio .certifications {
    margin-top: var(--space-md);
}

.av2-avis-auteur {
    margin: 0;
    font-size: var(--text-small);
    color: var(--acier);
}

.av2-avis-auteur strong {
    font-size: 1rem;
    color: var(--graphite);
}

.av2-avis-auteur a {
    color: var(--cuivre-profond);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.av2-avis-auteur a:hover {
    color: var(--cuivre-profond-survol);
}

/* Trois lignes en étiquettes typographiques, empilées, centrées */
.av2-invites-liste {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
}

.av2-invites-liste .cert-item {
    text-align: center;
}

/* Lecteur de l'épisode Skill Me Up!, sous la troisième ligne */
.av2-lecteur {
    max-width: 660px;
    margin: var(--space-md) auto 0;
}

/* Case newsletter du livret : facultative, distincte de l'envoi */
.livret-newsletter {
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin-top: 0.75rem;
    font-size: var(--text-small);
    color: var(--texte);
}

/* Note sous le bouton de l'appel final */
.cta-final-container .av2-cta-note {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* ── Mobile : gouttière de 20 px, sans double retrait ─────────────── */
@media (max-width: 768px) {
    .av2-section {
        padding: var(--space-3xl) 20px;
    }

    .av2-hero {
        min-height: 0;
    }

    .av2-hero-texte {
        padding: var(--space-2xl) 20px;
    }

    /* Les deux boutons prennent la largeur, comme .btn-secondary sous 768 px */
    .av2-hero .btn-primary {
        width: 100%;
    }

    .av2-terrain-photo img {
        aspect-ratio: 16 / 9;
    }

    .av2-terrain-encart {
        position: static;
        transform: none;
        max-width: none;
        border-radius: 0;
        padding: var(--space-lg) 20px;
    }

    .av2-offre-corps {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}