/* ==========================================================================
   Accueil v3 — /preview/landing-v3
   --------------------------------------------------------------------------
   Complément de offres.css (charte, cartes, boutons, verre) pour les
   sections propres à l'accueil : preuve sociale du hero, établissements
   par familles, chiffres vivants, matières, aperçu du catalogue, lecteur
   de témoignages, gabarits de témoignages écrits. Mêmes variables --of-*.
   ./check_css.py : aucune couleur littérale ici, tout passe par offres.css.
   ========================================================================== */

/* Hero en deux colonnes : texte 55 % à gauche, illustration 45 % à droite,
   centrée verticalement ; sous 900 px, empilé, l'illustration SOUS le texte
   (ordre DOM), le titre reste la première chose vue. Les formes floutées
   restent derrière : .of-wrap est en z-index 1 (offres.css). */
.v3-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 900px) {
    .v3-hero-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); gap: 48px; align-items: center; }
}
.v3-hero-copy { margin-bottom: 0; }
/* h1 à 60 px sur une colonne de 55 % : trois à quatre lignes et un mot orphelin ;
   48 px au maximum sur bureau garde le titre sur trois lignes équilibrées. */
.offres .v3-hero-copy h1 { font-size: clamp(36px, 4vw, 48px) !important; }
.offres .v3-hero-copy p.of-hero-prices { font-size: 14px; padding: 8px 16px; }
.offres .v3-hero-copy.of-head--left .of-actions { justify-content: flex-start; }
.v3-hero-visual { min-width: 0; display: flex; justify-content: center; align-items: center; }
.v3-hero-visual img { display: block; width: 100%; max-width: 520px; height: auto; }
@media (max-width: 899px) { .v3-hero-visual img { max-width: 420px; } }

/* Établissements : deux bandeaux de logos en sens inverses --------------
   Chaque piste porte deux séries identiques (la seconde aria-hidden) et
   glisse de 0 à −50 % (ligne du haut) ou de −50 % à 0 (ligne du bas) en
   transform seul ; le padding-right de chaque série égale l'espacement,
   donc −50 % tombe sur la couture. Pause des deux lignes au survol de la
   section ; fondu par mask-image. Sous prefers-reduced-motion : grille
   statique centrée, une seule série par ligne. */
.offres .v3-schools { background: var(--of-surface); }   /* fond blanc : les écussons colorés se détachent mieux que sur le crème teinté */
.v3-schools .of-head { margin-bottom: 32px; }
.v3-logos {
    --v3-logo-h: 78px;                   /* 56 px + 40 % */
    --v3-logo-gap: 48px;
    display: grid;
    gap: 24px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 96px, rgba(0, 0, 0, 1) calc(100% - 96px), rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 96px, rgba(0, 0, 0, 1) calc(100% - 96px), rgba(0, 0, 0, 0) 100%);
}
.v3-logos__row { overflow: hidden; }   /* clip-ok : bandeau défilant */
.v3-logos__track { display: flex; width: max-content; will-change: transform; }
.v3-logos__row--left .v3-logos__track { animation: v3-logos-left 70s linear infinite; }   /* ≈ 33 px/s */
.v3-logos__row--right .v3-logos__track { animation: v3-logos-right 84s linear infinite; }
.v3-logos:hover .v3-logos__track { animation-play-state: paused; }
.v3-logos__set { list-style: none; margin: 0; padding: 0 var(--v3-logo-gap) 0 0; display: flex; align-items: center; gap: var(--v3-logo-gap); flex: 0 0 auto; }
.v3-logos__set li { flex: 0 0 auto; }
.v3-logos__set img { display: block; height: var(--v3-logo-h); width: auto; }
@keyframes v3-logos-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes v3-logos-right { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
    .v3-logos { -webkit-mask-image: none; mask-image: none; padding: 0 24px; }
    .v3-logos__track { animation: none !important; width: auto; display: block; }
    .v3-logos__set { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: 24px; }
    .v3-logos__set[aria-hidden="true"] { display: none; }
}
@media (max-width: 680px) {
    .v3-logos { --v3-logo-h: 62px; --v3-logo-gap: 32px; gap: 16px; }
}

.v3-center { justify-content: center; }

/* Matières : cartes compactes, nombre de cours. */
.v3-subjects { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.v3-subject { padding: 24px; text-align: center; }
.v3-subject h3 { margin-bottom: 6px; }
.offres p.v3-subject__count { margin: 0; font-size: 14px; color: var(--of-mute); }

/* Explorez nos cours — structure de la maquette : grand titre à gauche, une
   rangée de pilules, une rangée de quatre cartes (bandeau de matière, photo
   en bandeau avec logo en cadre blanc, titre, fournisseur, méta en bas),
   bouton contour centré. Quatre colonnes fixes dès 1024 px pour que la rangée
   soit toujours complète ; deux sur tablette, une sur mobile. */
.offres h2.v3-explore__title { font-size: clamp(34px, 4.5vw, 60px) !important; line-height: 1.1; margin: 0 0 28px; text-align: left; }
.v3-filters { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0 0 32px; overflow-x: auto; /* clip-ok : défilement horizontal des pilules sur mobile */ scrollbar-width: none; padding: 2px; }
.v3-filters::-webkit-scrollbar { display: none; }
.v3-filter {
    flex: 0 0 auto;
    padding: 10px 18px;
    border-radius: 9999px;
    border: 1px solid var(--of-surface);
    background: var(--of-surface);
    color: var(--of-ink);
    font-family: var(--of-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.v3-filter:hover { border-color: var(--of-accent-light); }
.v3-filter.is-active { border-color: var(--of-ink); box-shadow: inset 0 0 0 1px var(--of-ink); }
.v3-filter:focus-visible { outline: 2px solid var(--of-accent); outline-offset: 2px; }
.v3-explore__grid { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.v3-ccard { min-width: 0; }
.v3-ccard[hidden] { display: none; }
.offres a.v3-ccard__link {
    position: static;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 460px;
    background: var(--of-surface);
    border: 1px solid var(--of-line);
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--of-shadow);
    transition: transform .2s var(--of-ease), box-shadow .2s var(--of-ease);
}
.offres a.v3-ccard__link::after { content: none; }
.offres a.v3-ccard__link:hover { transform: translateY(-3px); box-shadow: var(--of-shadow-lg); }
.v3-ccard__band { display: block; padding: 12px 20px; color: var(--of-ink); font-size: 16px; font-weight: 700; line-height: 1.2; }
.v3-ccard__band--1 { background: var(--of-bg-tinted); }
.v3-ccard__band--2 { background: var(--of-secondary-bg); }
.v3-ccard__band--3 { background: var(--of-accent-bg); }
.v3-ccard__visual { position: relative; display: block; height: 112px; background: var(--of-bg-tinted); overflow: hidden; }
.v3-ccard__visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-ccard__logo { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: block; width: 72px; height: 72px; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--of-ink) 35%, transparent)); }
.v3-ccard__logo img { width: 100%; height: 100%; object-fit: contain; }
.v3-ccard__body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 22px 20px 24px; }
.v3-ccard h3.v3-ccard__title { font-size: 22px !important; line-height: 1.35; margin: 0 0 8px; min-height: calc(2 * 1.35em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v3-ccard__provider { font-size: 17px; color: var(--of-mute); }
.v3-ccard__meta { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; color: var(--of-ink); }
.v3-ccard__meta > span { display: inline-flex; align-items: center; gap: 12px; }
.v3-ccard__meta svg { flex: 0 0 auto; color: var(--of-ink); }
.offres p.v3-explore__empty { margin: 0 0 32px; text-align: center; color: var(--of-mute); }
@media (max-width: 1023px) { .v3-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .offres a.v3-ccard__link { min-height: 0; } }
@media (max-width: 599px) { .v3-explore__grid { grid-template-columns: minmax(0, 1fr); } .v3-ccard__meta { padding-top: 22px; } }

/* Témoignages vidéo : lecteur à gauche (16:9), playlist à droite. */
.v3-player-grid { display: grid; gap: 24px; }
@media (min-width: 900px) { .v3-player-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.v3-player-grid > * { min-width: 0; }
.v3-player-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--of-radius); overflow: hidden; background: var(--of-ink); box-shadow: var(--of-shadow); }
.v3-player-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.offres a.v3-player-poster { position: absolute; inset: 0; display: block; }
.offres a.v3-player-poster::after { content: none; }
.v3-player-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--of-accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--of-shadow-lg); transition: transform .2s var(--of-ease), background-color .2s; }
.v3-player-poster:hover .v3-play, .v3-player-poster:focus-visible .v3-play { transform: scale(1.06); background: var(--of-accent-dark); }
.offres p.v3-player-meta { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.v3-player-school { font-size: 15px; font-weight: 600; color: var(--of-ink); }
.v3-playlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.offres a.v3-playlist-item { position: static; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; border: 1px solid var(--of-line); background: var(--of-surface); color: inherit; text-decoration: none; transition: border-color .2s, background-color .2s; }
.offres a.v3-playlist-item::after { content: none; }
.offres a.v3-playlist-item:hover, .offres a.v3-playlist-item:focus-visible { border-color: var(--of-accent-light); }
.offres a.v3-playlist-item[aria-current="true"] { border-color: var(--of-accent); background: var(--of-accent-bg); }
.v3-playlist-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--of-ink); }
.v3-playlist-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-playlist-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-playlist-school { font-size: 15px; font-weight: 600; color: var(--of-ink); }
.v3-playlist-hint { font-size: 13px; color: var(--of-mute); }   /* mesuré 2026-09-12 : le discret ne faisait que 2,8:1 sur le voile orange de l'entrée active ; 5,5 ici */

/* Témoignages écrits : cartes pleines terracotta (blanc dessus : 5,6:1),
   grand guillemet translucide, étoiles, prénom en Lora, rôle en gras ;
   carrousel horizontal à scroll-snap piloté par deux flèches. Disques et
   traits décoratifs de la palette autour, à la place de photos. */
.v3-testimonials { position: relative; overflow: hidden; }
.v3-testimonials > .of-wrap { position: relative; z-index: 1; }
.v3-testimonials__deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.v3-deco { position: absolute; border-radius: 50%; }
.v3-deco--1 { width: 200px; height: 200px; left: -40px; top: 120px; background: var(--of-accent-bg); border: 14px solid var(--of-accent-light); }
.v3-deco--2 { width: 150px; height: 150px; left: 90px; bottom: 60px; background: var(--of-bg-tinted); border: 12px solid var(--of-accent); }
.v3-deco--3 { width: 220px; height: 220px; right: -60px; top: 80px; background: var(--of-secondary-bg); border: 14px solid var(--of-secondary-light); }
.v3-deco--4 { width: 130px; height: 130px; right: 110px; bottom: 90px; background: var(--of-accent-bg); border: 12px solid var(--of-accent); }
.v3-deco-line { position: absolute; width: 120px; height: auto; color: var(--of-secondary); }
.v3-deco-line--a { left: 200px; top: 60px; color: var(--of-accent); }
.v3-deco-line--b { right: 40px; bottom: 30px; width: 90px; }   /* hors de la zone des flèches */
@media (max-width: 1100px) { .v3-testimonials__deco { display: none; } }

.v3-carousel { position: relative; max-width: calc(var(--bs-wrap-max) - 200px); margin: 0 auto; }   /* 960 px sur le conteneur de 1160 */
.v3-carousel__track {
    list-style: none;
    margin: 0;
    padding: 8px 4px 16px;
    display: flex;
    gap: 24px;
    overflow-x: auto;                        /* clip-ok : carrousel à défilement natif */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.v3-carousel__track::-webkit-scrollbar { display: none; }
.v3-carousel__track:focus-visible { outline: 2px solid var(--of-accent); outline-offset: 4px; border-radius: 12px; }
.v3-testimonial {
    flex: 0 0 min(460px, 85%);
    scroll-snap-align: start;
    background: var(--of-secondary);
    color: #fff;
    border-radius: 24px;
    padding: 36px 40px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.offres p.v3-testimonial__stars { margin: 0 0 20px; display: flex; gap: 4px; color: rgba(255, 255, 255, .35); }
.v3-testimonial__stars svg.is-on { color: var(--of-accent-light); }
.offres p.v3-testimonial__stars--empty { color: rgba(255, 255, 255, .7); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.v3-testimonial__quote { margin: 0 0 24px; position: relative; }
.v3-testimonial__mark { position: absolute; left: -8px; top: -34px; font-family: var(--of-serif); font-size: 120px; line-height: 1; color: rgba(255, 255, 255, .18); pointer-events: none; }
.offres .v3-testimonial__quote p { position: relative; margin: 0; font-size: 17px; line-height: 1.65; color: #fff; }
.offres p.v3-testimonial__name { margin: auto 0 4px; font-family: var(--of-serif); font-style: italic; font-size: 30px; line-height: 1.2; color: var(--of-accent-light); }
.offres p.v3-testimonial__role { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.v3-carousel__nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.v3-carousel__btn {
    width: 72px;
    height: 40px;
    border-radius: 9999px;
    border: 0;
    background: var(--of-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s;
}
.v3-carousel__btn:hover, .v3-carousel__btn:focus-visible { background: var(--of-accent-dark); }
.v3-carousel__btn:focus-visible { outline: 2px solid var(--of-accent); outline-offset: 3px; }
@media (max-width: 680px) {
    .v3-testimonial { padding: 28px 24px 32px; }
    .offres p.v3-testimonial__name { font-size: 26px; }
}

/* ── Définition, chiffres clés, enseignant, FAQ ─────────────────────────
   Blocs ajoutés pour le référencement et les moteurs de réponse. Ils
   réutilisent les tokens --of-* de la page d'offres ; aucune couleur en dur. */

.v3-definition .of-wrap { max-width: var(--bs-wrap-max, 1180px); }
.offres h2.v3-definition__title { font-size: clamp(26px, 3.2vw, 38px) !important; margin: 0 0 16px; }
.offres p.v3-definition__text {
    max-width: 62ch;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.7;
    color: var(--of-ink);
    margin: 0 0 32px;
}

.v3-figures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.v3-figure {
    min-width: 0;
    padding: 20px 24px;
    background: var(--of-surface);
    border: 1px solid var(--of-line);
    border-radius: 12px;
    text-align: center;
}
.v3-figure__n {
    display: block;
    font-family: var(--of-font);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--of-secondary);   /* 5,7:1 sur le blanc des cartes ; --of-accent-dark n'atteint que 4,46:1 */
}
.v3-figure__l { display: block; margin-top: 6px; font-size: 15px; color: var(--of-mute); }

.v3-teacher__wrap { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.v3-teacher__photo {
    flex: 0 0 auto;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--of-accent-light);
}
.v3-teacher__body { flex: 1 1 420px; min-width: 0; }
.offres p.v3-teacher__lead { font-size: 19px; margin: 12px 0 8px; color: var(--of-ink); }
.v3-teacher__links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }

.v3-faq__list { margin: 0; padding: 0; }
.v3-faq__item {
    padding: 22px 0;
    border-bottom: 1px solid var(--of-line);
}
.v3-faq__item:last-child { border-bottom: 0; }
.v3-faq__list dt { margin: 0; }
.offres h3.v3-faq__q {
    font-size: 19px !important;
    line-height: 1.35;
    margin: 0 0 8px;
    color: var(--of-ink);
}
.v3-faq__list dd.v3-faq__a {
    margin: 0;
    max-width: 78ch;
    font-size: 16px;
    line-height: 1.7;
    color: var(--of-mute);
}

@media (max-width: 860px) {
    .v3-figures { grid-template-columns: 1fr; gap: 12px; }
    .v3-figure { padding: 16px 20px; }
    .v3-teacher__wrap { gap: 20px; }
}

/* Même correction de contraste pour les liens des blocs enseignant et FAQ. */
.v3-teacher__links a,
.v3-faq__a a { color: var(--of-secondary); }
.v3-teacher__links a:hover,
.v3-faq__a a:hover { color: var(--of-secondary-dark); }