/*
 * Feuille de style du site des CPGE du lycée Brizeux.
 * Charte : trois couleurs (violet, noir, blanc), Source Sans Pro pour les titres
 * et textes courts, Source Serif Pro pour les textes longs.
 */

@font-face {
    font-family: "Source Sans Pro";
    src: url("../fonts/source-sans-semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Source Serif Pro";
    src: url("../fonts/source-serif-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

:root {
    --violet: #472D83;
    --noir: #000;
    --blanc: #fff;
    /* Couleurs secondaires du dépliant, pour les schémas et le tableau des horaires. */
    --beige: #D9AA89;
    --gris: #7B7C7E;
    --gris-clair: #D9DADB;

    --sans: "Source Sans Pro", "Source Sans 3", system-ui, sans-serif;
    --serif: "Source Serif Pro", "Source Serif 4", Georgia, serif;

    --largeur: 72rem;
    --gouttiere: clamp(1rem, 4vw, 2.5rem);
    --espace-section: clamp(4rem, 10vw, 8rem);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Une ancre ne se cache pas sous l'en-tête collant. */
    scroll-padding-top: 5rem;
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    background: var(--blanc);
    color: var(--noir);
    font-family: var(--serif);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    line-height: 1.6;
    /* Un mot très long (adresse, nom d'école) passe à la ligne au lieu de déborder sur un petit écran. */
    overflow-wrap: break-word;
}

h1, h2, h3, .surtitre, .bouton, .menu, nav, label, button, .chiffre, .carte, .lien-fleche {
    font-family: var(--sans);
    font-weight: 600;
}

h1, h2, h3 {
    line-height: 1.1;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

p { margin: 0 0 1rem; }

a { color: inherit; text-underline-offset: 0.2em; }

img, svg { display: block; max-width: 100%; }

/* Internet Explorer ne connaît pas ces éléments : sans cela, ils s'affichent en ligne. */
main, figure, figcaption, nav, header, footer, aside, section { display: block; }
[hidden] { display: none; }

:focus-visible {
    outline: 3px solid var(--violet);
    outline-offset: 3px;
}

.conteneur {
    width: 100%;
    /* Valeurs fixes d'abord, pour les navigateurs qui ignorent les variables ou margin-inline. */
    max-width: 72rem;
    max-width: var(--largeur);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-inline: auto;
    padding-inline: var(--gouttiere);
}

.evitement {
    position: absolute;
    left: -999rem;
}
.evitement:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: var(--blanc);
    padding: 0.5rem 1rem;
}

/* Texte à reprendre du dépliant : repéré en pointillés tant qu'il n'est pas remplacé. */
.a-completer {
    outline: 1px dashed currentColor;
    outline-offset: 2px;
}

/* ---------- Bannière d'événement ---------- */

.banniere {
    background: var(--beige);
    color: var(--violet);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.05rem;
}
.banniere[hidden] { display: none; }
.banniere__interieur {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-block: 0.9rem;
}
.banniere p {
    margin: 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.25rem;
}
.banniere strong {
    font-size: 1.15em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.banniere strong::before {
    content: "";
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
    background: var(--violet);
    border-radius: 0 0 0 100%;
    vertical-align: -0.05em;
}
.banniere__date {
    background: var(--violet);
    color: var(--blanc);
    padding: 0.2rem 0.7rem;
}
.banniere span:not(.banniere__date) { font-weight: 400; color: var(--noir); }
.banniere a {
    color: var(--violet);
    text-underline-offset: 0.2em;
    text-decoration-thickness: 2px;
}
.banniere__fermer {
    background: none;
    border: 0;
    color: inherit;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--blanc);
    color: var(--violet);
    border-bottom: 1px solid transparent;
    overflow-anchor: none;
    transition: border-color 0.3s;
}
/* Le filet violet n'apparaît qu'avec l'en-tête compact. */
.entete--compact { border-bottom-color: var(--violet); }
.entete__interieur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    transition: padding 0.3s ease;
}
/* Le logotype complet en haut de page ; le logo seul, plus petit, une fois la page descendue. */
.entete__logo {
    display: grid;
    align-items: center;
}
.entete__logotype,
.entete__logo-seul {
    display: block;
    grid-area: 1 / 1;
    transition: opacity 0.25s ease;
}
.entete__logo svg {
    display: block;
    height: 6.5rem;
    width: auto;
    transition: height 0.3s ease;
}
.entete__logotype svg { aspect-ratio: 800 / 423.53; }
.entete__logo-seul svg { aspect-ratio: 3 / 5; }
.entete__logo-seul { opacity: 0; }
.entete--compact .entete__interieur { padding-block: 0.6rem; }
.entete--compact .entete__logo svg { height: 2.75rem; }
.entete--compact .entete__logotype { opacity: 0; }
.entete--compact .entete__logo-seul { opacity: 1; }
.menu {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}
.menu ul {
    display: flex;
    gap: clamp(1rem, 3vw, 2.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu a {
    text-decoration: none;
    white-space: nowrap;
    font-size: 1.05rem;
    padding-block: 0.4rem;
    border-bottom: 2px solid transparent;
}
.menu a:hover,
.menu a[aria-current="page"] {
    border-bottom-color: currentColor;
}
/* Réseaux sociaux, à droite du menu. */
.menu .reseaux {
    gap: 0.9rem;
    align-items: center;
    padding-left: clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid var(--gris-clair);
}
.menu .reseaux a, .menu .reseaux span { display: block; border: 0; padding: 0; color: var(--violet); }
.menu .reseaux a:hover { opacity: 0.7; }
.reseau { display: block; height: 1.25rem; width: auto; }
.reseaux__youtube .reseau { height: 1.15rem; }
.entete__menu-bouton {
    display: none;
    background: none;
    border: 2px solid currentColor;
    color: inherit;
    min-height: 2.75rem; /* cible tactile d'au moins 44 px */
    padding: 0.35rem 0.9rem;
    font-size: 1rem;
    cursor: pointer;
}

/* Le menu complet ne tient sur une ligne qu’à partir de 56rem : en dessous (téléphones, tablettes
   en portrait), il se replie derrière le bouton Menu plutôt que de passer sur deux lignes. */
@media (max-width: 56rem) {
    .js .entete__menu-bouton { display: block; }
    .js .menu { display: none; }
    .js .menu.ouvert { display: block; }
    /* Sans JavaScript (ou sur un navigateur trop ancien), le menu reste déplié sous le logo, dans
       le cours de la page : il ne flotte pas par-dessus le contenu et l'en-tête ne colle pas en haut. */
    html:not(.js) .entete { position: relative; }
    html:not(.js) .entete__interieur { flex-wrap: wrap; }
    html:not(.js) .menu { display: block; width: 100%; }
    html:not(.js) .menu ul { padding-left: 0; padding-right: 0; }
    html:not(.js) .menu .reseaux { margin-left: 0; margin-right: 0; }
    .js .menu {
        position: absolute;
        inset: 100% 0 auto;
        background: var(--blanc);
        border-bottom: 1px solid var(--violet);
        box-shadow: 0 1rem 1.5rem -1rem rgb(0 0 0 / 0.25);
        /* Téléphone à l'horizontale : le menu défile s'il est plus haut que l'écran. */
        max-height: calc(100vh - 4rem);
        max-height: calc(100dvh - 4rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .menu ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem var(--gouttiere) 1rem;
    }
    .menu .reseaux {
        flex-direction: row;
        gap: 1.25rem;
        border-left: 0;
        border-top: 1px solid var(--gris-clair);
        margin-inline: var(--gouttiere);
        padding: 1rem 0 1.25rem;
    }
    .reseau { height: 1.5rem; }
    .reseaux__youtube .reseau { height: 1.4rem; }
    .menu a {
        display: block;
        padding-block: 0.75rem;
        font-size: 1.25rem;
    }
}
@media (max-width: 46rem) {
    .entete__interieur { padding-block: 0.9rem; }
    .entete__logo svg { height: 4.75rem; }
    .entete--compact .entete__logo svg { height: 2.5rem; }
}

/* ---------- Éléments communs ---------- */

.surtitre {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    color: var(--violet);
}

.section {
    padding-block: var(--espace-section);
}
.section--violet {
    background: var(--violet);
    color: var(--blanc);
}
.section--violet .surtitre { color: inherit; }
.section--suite { padding-top: 0; }
.section--bordure {
    border-block: 1px solid var(--violet);
}

.deux-colonnes {
    display: grid;
    gap: 2rem clamp(2rem, 6vw, 5rem);
}
@media (min-width: 52rem) {
    .deux-colonnes { grid-template-columns: 1fr 1fr; }
}

.texte-long { max-width: 38rem; }

.boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}
.bouton {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    text-decoration: none;
    font-size: 1.05rem;
    border: 2px solid var(--violet);
    background: var(--violet);
    color: var(--blanc);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.bouton:hover { background: var(--blanc); color: var(--violet); }
.bouton--clair { background: var(--blanc); border-color: var(--blanc); color: var(--violet); }
.bouton--clair:hover { background: transparent; color: var(--blanc); }
.bouton--contour-clair { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.bouton--contour-clair:hover { background: var(--blanc); color: var(--violet); }

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--violet);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 0.15rem;
}
.lien-fleche::after {
    content: "→";
    transition: transform 0.15s;
}
.lien-fleche:hover::after { transform: translateX(0.25rem); }
.lien-document::after { content: "↓"; }
.lien-document:hover::after { transform: translateY(0.15rem); }
.lien-fleche--clair { color: var(--blanc); }

/* Le léger contour referme les jointures entre deux cases voisines. */
.pavage {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 0.02;
}

/* ---------- Accroche (haut de l'accueil) ---------- */

/* Texte sur fond violet à gauche, photo à droite sur toute la hauteur : la photo n'est jamais posée sur le violet. */
.accroche {
    display: grid;
}
@media (min-width: 52rem) {
    .accroche { grid-template-columns: 3fr 2fr; min-height: min(80vh, 44rem); }
}
.accroche__texte {
    background: var(--violet);
    color: var(--blanc);
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 8vw, 6rem);
    padding-inline: var(--gouttiere);
}
@media (min-width: 52rem) {
    .accroche__texte {
        /* Aligne le texte sur la colonne du site. */
        padding-left: max(var(--gouttiere), calc((100vw - var(--largeur)) / 2 + var(--gouttiere)));
        padding-right: clamp(2rem, 5vw, 4rem);
    }
}
.accroche__contenu { max-width: 40rem; }
.accroche h1 {
    font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem);
    text-wrap: balance;
    margin-bottom: 1.5rem;
}
.accroche__chapo {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 1.3em;
    line-height: 1.35;
}
.accroche__photo { margin: 0; }
.accroche__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 52rem) {
    .accroche__photo img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 35%; }
}


/* ---------- Mot de l'équipe, citations, témoignages ---------- */

.guillemet {
    width: 4.5rem;
    flex: none;
    fill: var(--violet);
}

.mot-equipe {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 46rem) {
    .mot-equipe { grid-template-columns: 5rem 1fr; gap: 3rem; }
}
.mot-equipe blockquote { margin: 0; max-width: 50rem; }
.mot-equipe p {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
    line-height: 1.3;
    color: var(--violet);
}
.mot-equipe footer {
    font-family: var(--sans);
    font-weight: 600;
}
.mot-equipe footer::before { content: "— "; }

.temoignage {
    margin: 0;
    display: grid;
    gap: 1rem;
    align-content: start;
}
.temoignage blockquote { margin: 0; }
.temoignage blockquote p {
    font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    line-height: 1.45;
    color: var(--violet);
    text-align: left;
}
.temoignage figcaption {
    font-family: var(--sans);
    font-weight: 600;
}
.temoignage .guillemet { width: 3.5rem; }

.citation {
    background: var(--violet);
    color: var(--blanc);
    padding-block: var(--espace-section);
}
.citation blockquote { margin: 0; max-width: 56rem; }
.citation p {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
    line-height: 1.25;
}
.citation footer {
    font-family: var(--sans);
    font-weight: 600;
}
.citation footer::before { content: "— "; }

/* ---------- Texte et photo côte à côte ---------- */

.media {
    display: grid;
    gap: 2.5rem clamp(2rem, 6vw, 5rem);
    align-items: start;
}
@media (min-width: 52rem) {
    .media { grid-template-columns: 1.1fr 1fr; }
    .media--inverse > .media__visuel { order: -1; }
    .media--inverse.media--texte-large { grid-template-columns: 1fr 1.25fr; }
}
.media > * { min-width: 0; }
.media__visuel {
    display: grid;
    gap: 2.5rem;
}
.media__visuel img {
    width: 100%;
    height: auto;
    max-height: 34rem;
    object-fit: cover;
}

/* ---------- Chiffres clés ---------- */

.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 2rem;
    margin-block: 2.5rem 4rem;
}
.chiffre {
    border-top: 2px solid var(--violet);
    padding-top: 1rem;
}
.chiffre__valeur {
    display: block;
    font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem);
    line-height: 1;
    color: var(--violet);
}
.chiffre__libelle { display: block; margin-top: 0.75rem; max-width: 18rem; }

.deux-colonnes--marge { margin-top: 1rem; }

/* ---------- Atouts ---------- */

.atouts {
    list-style: none;
    margin: 2.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 0 2.5rem;
}
.atouts li {
    border-top: 1px solid var(--blanc);
    padding-block: 1.25rem;
}
.atouts h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}
.atouts p { margin: 0; }

/* Invitation à l'immersion : une section à part, sur fond beige clair, avec un pavage violet. */
.immersion {
    background: #F4E6DC; /* même teinte, pour les navigateurs sans color-mix() */
    background: color-mix(in srgb, var(--beige) 30%, var(--blanc));
}
.immersion .conteneur {
    display: grid;
    justify-items: start;
    gap: 2rem;
}
.immersion__texte {
    margin: 0;
    max-width: 22ch;
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
    line-height: 1.15;
    color: var(--violet);
    text-wrap: balance;
}
.immersion .pavage-bord { color: var(--violet); }

/* Section « Une formation réputée » : le pavage blanc est collé au bord droit (zone-pavee). */
.reputee .atouts { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.reputee .atouts p { font-size: 1.15rem; }
.reputee .atouts strong { font-family: var(--sans); font-weight: 600; }

/* ---------- Formation : horaires, rythme ---------- */

.horaires { margin: 0; min-width: 0; overflow-x: auto; }
.horaires figcaption {
    font-size: 0.9rem;
    margin-top: 1rem;
    color: var(--gris);
}
.horaires table {
    border-collapse: collapse;
    width: 100%;
}
.horaires th,
.horaires td {
    padding: 0.3rem 0;
    vertical-align: middle;
}
.horaires th {
    text-align: right;
    color: var(--violet);
    font-family: var(--sans);
    font-weight: 600;
    padding-right: 1rem;
    width: 1%;
    white-space: nowrap;
}
.horaires__points {
    white-space: nowrap;
    line-height: 0;
}
.horaires__points span {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    background: var(--gris-clair);
}
.horaires__points span.plein { background: var(--beige); }
.horaires__points--lettres span.plein { background: var(--violet); }
.horaires__heures {
    text-align: right;
    color: var(--gris);
    font-family: var(--sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-left: 1rem !important;
    white-space: nowrap;
}
/* Petit écran : le nom de la matière passe sur deux lignes et les points rétrécissent, au lieu de
   disparaître en laissant un grand vide entre la matière et ses heures. */
@media (max-width: 30rem) {
    .horaires th { white-space: normal; text-align: left; padding-right: 0.75rem; line-height: 1.25; }
    .horaires th, .horaires td { padding-block: 0.4rem; }
    .horaires__points span { width: 0.55rem; height: 0.55rem; margin-right: 0.18rem; }
    .horaires__heures { padding-left: 0.5rem !important; }
}

.trio {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 2rem;
}
.trio li {
    border-top: 2px solid var(--violet);
    padding-top: 1rem;
}
.trio strong { color: var(--violet); }

/* ---------- Poursuite d'études : répartition ---------- */

.parcours {
    margin: 0;
    max-width: 34rem;
    width: 100%;
}
.parcours svg { width: 100%; height: auto; overflow: visible; }
.parcours text {
    font-family: var(--sans);
    font-weight: 600;
    text-anchor: middle;
}
.parcours__case { fill: var(--blanc); font-size: 15px; }
.parcours__part { font-size: 14px; }
.parcours__part--violet { fill: var(--violet); }
.parcours__part--gris { fill: var(--gris); }
.parcours__violet, .parcours__point-violet { fill: var(--violet); }
.parcours__gris, .parcours__point-gris { fill: var(--gris); }
.parcours__beige, .parcours__point-beige { fill: var(--beige); }
.parcours__principal { stroke: var(--violet); }
.parcours__secondaire { stroke: var(--gris); }

/* ---------- Candidatures ---------- */

/* Deux voies de candidature côte à côte, texte centré, séparées par un filet. */
.postuler { text-align: center; }
.postuler > p { max-width: none; }
.candidatures {
    display: grid;
    gap: 3rem 0;
    margin-top: 3rem;
}
@media (min-width: 46rem) {
    .candidatures { grid-template-columns: 1fr 1fr; }
    .candidature + .candidature { border-left: 1px solid var(--violet); }
}
.candidature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: clamp(1rem, 4vw, 3.5rem);
}
.candidature h3 { color: var(--violet); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); }
.candidature p { max-width: 26rem; }
.candidature .bouton { margin-top: auto; }
.candidature p:last-of-type { margin-bottom: 1.75rem; }

.media--marge { margin-top: var(--espace-section); }
.media__texte { min-width: 0; }
.media__texte p + h3 { margin-top: 2.5rem; }
.temoignage-seul { max-width: 52rem; }
.temoignage figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }

/* ---------- Animation d'arrivée ---------- */

.intro {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 100;
    background: var(--blanc);
    overflow: hidden;
    pointer-events: none;
}
html:not(.js) .intro,
.intro-vue .intro { display: none; }
.intro__piece {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--violet);
    /* Quart de disque : centre dans le coin bas-gauche, comme les motifs du pavage. */
    border-top-right-radius: 100%;
    will-change: transform, opacity;
}
.intro__piece--carre { border-radius: 0; }
/* Les motifs du logo débordent d'un pixel pour se recouvrir : sinon, sur les écrans à zoom
   fractionnaire, le lissage des bords laisse un fin liseré clair entre deux motifs voisins. */
.intro__piece--logo { box-shadow: 0 0 0 1px var(--violet); }

/* ---------- Appel au contact ---------- */

.appel {
    padding-block: var(--espace-section);
    text-align: center;
}
.appel h2 { color: var(--violet); }
.boutons--centre { justify-content: center; }
.bouton--contour { background: transparent; color: var(--violet); }
.bouton--contour:hover { background: var(--violet); color: var(--blanc); }

/* ---------- Pages intérieures ---------- */

.titre-page {
    background: var(--violet);
    color: var(--blanc);
}
.titre-page > .conteneur { padding-block: clamp(3rem, 7vw, 5rem); }
.titre-page .surtitre { color: inherit; }
.titre-page h1 { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); max-width: 18ch; text-wrap: balance; }
.titre-page p { max-width: 36rem; }

.contenu {
    padding-block: var(--espace-section);
}
.contenu h2 { margin-top: 0; }

.bloc {
    padding-block: 3.5rem;
    border-top: 1px solid var(--violet);
    scroll-margin-top: 6rem;
}
.bloc:first-child { border-top: 0; padding-top: 0; }
.bloc h2 { color: var(--violet); }
.bloc h3 { margin-top: 1rem; }

.liens-eleve { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.liens-eleve li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.liens-eleve span { color: var(--gris); }
.texte-long .liens-eleve { margin-top: 1.5rem; }
.onglets { margin-top: 1.5rem; }
.onglets__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.onglets__bouton {
    font: 600 1rem/1.2 var(--sans); color: var(--violet); background: transparent;
    border: 2px solid var(--violet); padding: 0.6rem 1.1rem; cursor: pointer;
}
.onglets__bouton:hover { background: var(--violet-pale, #EDE9F4); }
.onglets__bouton[aria-selected="true"] { background: var(--violet); color: var(--blanc); }
.onglets .onglets { margin-top: 0; }
.onglets .liens-eleve { margin-top: 0; }

.liste-points {
    list-style: none;
    padding: 0;
    margin: 0;
}
.liste-points li {
    padding-block: 1rem;
    border-top: 1px solid var(--violet);
}
.liste-points strong {
    font-family: var(--sans);
    color: var(--violet);
}

/* ---------- Formulaire ---------- */

.formulaire {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 40rem;
}
.formulaire > * { grid-column: 1 / -1; min-width: 0; }
.formulaire > .champ--demi { grid-column: auto; }
@media (max-width: 30rem) {
    .formulaire > .champ--demi { grid-column: 1 / -1; }
}
.requis { color: var(--violet); }
.champ label {
    display: block;
    margin-bottom: 0.35rem;
}
.champ input,
.champ select,
.champ textarea {
    width: 100%;
    font: inherit;
    padding: 0.7rem 0.85rem;
    border: 2px solid var(--noir);
    border-radius: 0;
    background: var(--blanc);
    color: var(--noir);
}
.champ textarea { min-height: 10rem; resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 1px var(--violet);
}
.champ[hidden] { display: none; }
.champ input[type="file"] {
    padding: 1rem;
    border: 2px dashed var(--gris);
    background: #FAF5F1;
    background: color-mix(in srgb, var(--beige) 12%, var(--blanc));
    cursor: pointer;
}
.champ input[type="file"]::file-selector-button {
    font: inherit;
    margin-right: 1rem;
    padding: 0.5rem 1rem;
    border: 0;
    background: var(--violet);
    color: var(--blanc);
    cursor: pointer;
}
.champ .note { margin: 0.5rem 0 0; color: var(--gris); }
/* Sans JavaScript, un champ conditionnel reste affiché : sa condition est écrite à côté du libellé. */
.champ__condition { font-family: var(--serif); font-weight: 400; font-size: 0.9rem; color: var(--gris); }
.js .champ__condition { display: none; }
.champ--piege {
    position: absolute;
    left: -999rem;
}
.formulaire .bouton { justify-self: start; }
.note { font-size: 0.9rem; }

.message {
    padding: 1rem 1.25rem;
    border: 2px solid var(--violet);
    margin-bottom: 2rem;
    max-width: 40rem;
}
.message--succes { background: var(--violet); color: var(--blanc); }
.message ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }

/* ---------- Pied de page : discret, sur fond blanc ---------- */

.pied {
    border-top: 1px solid var(--violet);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--violet);
}
.pied__interieur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    padding-block: 1.5rem;
}
.pied p { margin: 0; flex: 1; min-width: min(16rem, 100%); }
.pied ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; margin: 0; padding: 0; }
.pied ul a { display: inline-block; padding-block: 0.6rem; } /* cibles tactiles plus hautes */
.pied a { text-decoration: none; }
.pied a:hover { text-decoration: underline; }
.pied__logo svg {
    width: auto;
    height: 2rem;
    aspect-ratio: 3 / 5;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}
@media (max-width: 52rem) { .accroche__contenu p br, .titre-page p br, .reputee h2 br { display: none; } }

/* ---------- Pavage collé au bord droit d'une zone, sur toute sa hauteur ---------- */
/* La zone réserve à droite la largeur du pavage ; site.js arrondit sa hauteur à un nombre entier
   de cases pour qu'aucun motif ne soit coupé en bas. */
.zone-pavee {
    --cellule: clamp(4rem, 2rem + 3vw, 5.5rem);
    --colonnes: 4;
    position: relative;
}
/* Le contenu garde l'alignement des autres sections, mais s'arrête avant le pavage. */
.zone-pavee > .conteneur {
    padding-right: max(var(--gouttiere), calc(var(--cellule) * var(--colonnes) + var(--gouttiere) - max(0px, (100vw - var(--largeur)) / 2)));
}
.pavage-bord {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(var(--cellule) * var(--colonnes));
    overflow: hidden;
    color: var(--blanc);
}
.pavage-bord .pavage {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(var(--cellule) * 4);
    max-width: none; /* sinon, sur mobile, les 4 colonnes se tassent dans la largeur de 2 */
}
/* Pavage du bas : seulement sur petit écran (voir plus bas). */
.pavage-bord--bas { display: none; }

/* Petit écran : le texte prend toute la largeur et le pavage du bord droit disparaît. À sa place,
   un bloc de pavage pleine largeur, 8 cases sur 5 lignes, ferme la zone en bas (sauf les bandeaux de titre) : assez grand pour
   reproduire le logo (3 × 5) et trouver l'easter egg. */
@media (max-width: 46rem) {
    .zone-pavee:not(.titre-page) > .conteneur { padding-right: var(--gouttiere); }
    .zone-pavee:not(.titre-page) { min-height: 0 !important; }
    .zone-pavee:not(.titre-page) > .pavage-bord:not(.pavage-bord--bas) { display: none; }
    /* Les bandeaux de titre gardent leur pavage sur le côté, réduit à 2 colonnes : un bloc en bas
       les rendrait trop hauts. */
    .titre-page { --cellule: 2.75rem; --colonnes: 2; }
    .zone-pavee:not(.titre-page) > .pavage-bord--bas {
        display: block;
        position: static;
        width: 100%;
        touch-action: manipulation; /* touchers rapides sans zoom */
    }
    .pavage-bord--bas .pavage { position: static; width: 100%; }
    .section.zone-pavee { padding-bottom: 0; }
    .section.zone-pavee > .conteneur { padding-bottom: clamp(2.5rem, 8vw, 4rem); }
}

/* ---------- Témoignages en vidéo ---------- */

.carrousel { margin-top: var(--espace-section); }
.carrousel:first-child { margin-top: 0; }
.carrousel__entete {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}
.carrousel__entete h2 { margin: 0; }
.carrousel__boutons { display: flex; gap: 0.5rem; }
/* Sans JavaScript, les flèches ne feraient rien : la piste défile à la main. */
html:not(.js) .carrousel__boutons, html:not(.js) .banniere__fermer { display: none; }
.carrousel__bouton {
    width: 3rem;
    height: 3rem;
    border: 2px solid var(--violet);
    background: var(--blanc);
    color: var(--violet);
    font: 600 1.25rem/1 var(--sans);
    cursor: pointer;
}
.carrousel__bouton:hover:not(:disabled) { background: var(--violet); color: var(--blanc); }
.carrousel__bouton:disabled { opacity: 0.3; cursor: default; }
.carrousel__piste {
    list-style: none;
    margin: 0;
    padding: 0 0 1rem;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max(14rem, calc((100% - 4rem) / 3));
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--beige) transparent;
}
@media (prefers-reduced-motion: reduce) {
    .carrousel__piste { scroll-behavior: auto; }
}
.video {
    scroll-snap-align: start;
    display: grid;
    gap: 1.25rem;
    align-content: start;
}
.video__miniature {
    position: relative;
    display: block;
    color: inherit;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    overflow: hidden;
    cursor: pointer;
}
.video__miniature img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 0.4s;
}
.video__miniature:hover img,
.video__miniature:focus-visible img { transform: scale(1.04); }
/* Bouton lecture : un triangle blanc sur un grand quart de disque violet, dans le coin. */
.video__lecture {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
    height: 40%; /* la miniature est carrée */
    background: var(--violet);
    border-top-left-radius: 100%;
    transition: opacity 0.3s;
}
.video__lecture::after {
    content: "";
    position: absolute;
    right: 24%;
    bottom: 24%;
    border-left: 1.6rem solid var(--blanc);
    border-block: 1rem solid transparent;
}
/* Au survol : l'image se grise et une pastille ronde de lecture apparaît au centre. */
.video__miniature img { transition: transform 0.4s, filter 0.3s; }
.video__miniature:hover img,
.video__miniature:focus-visible img { filter: grayscale(1) brightness(0.65); }
.video__pastille {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background: var(--violet);
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.video__pastille::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 1.6rem solid var(--blanc);
    border-block: 1rem solid transparent;
}
.video__miniature:hover .video__pastille,
.video__miniature:focus-visible .video__pastille { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.video__miniature:hover .video__lecture,
.video__miniature:focus-visible .video__lecture { opacity: 0; }
.video__ecole {
    display: block;
    font-weight: 400;
    color: var(--gris);
}

/* Lecteur en surimpression : page assombrie, vidéo au centre. */
.lecteur {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.85);
    background: rgb(0 0 0 / 0.85);
    animation: lecteur-apparition 0.25s ease-out;
}
.lecteur[hidden] { display: none; }
@keyframes lecteur-apparition { from { opacity: 0; } }
.lecteur__cadre {
    position: relative;
    width: 100%;
    max-width: 64rem;
    width: min(100%, 64rem, (100vh - 8rem) * 16 / 9);
    width: min(100%, 64rem, (100dvh - 8rem) * 16 / 9);
    aspect-ratio: 16 / 9;
}
/* Navigateurs sans aspect-ratio (Safari d'avant 2021) : sinon le cadre, sans hauteur, cache la vidéo. */
@supports not (aspect-ratio: 1) {
    .lecteur__cadre { height: 0; padding-bottom: 56.25%; }
}
.lecteur__cadre iframe {
    position: absolute;
    top: 0;
    left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}
.lecteur__fermer {
    position: absolute;
    top: -3.25rem;
    right: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    background: var(--blanc);
    color: var(--violet);
    font: 600 1.5rem/1 var(--sans);
    cursor: pointer;
}
body.lecteur-ouvert { overflow: hidden; }
.temoignage--court blockquote p { font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem); }
.temoignage--court .guillemet { width: 2.5rem; }

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Photo sous un texte, dans une colonne. */
.photo-bloc {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 2rem;
}

/* ---------- Écrans tactiles et petits écrans ---------- */

/* Sur un écran tactile, le survol « colle » après un toucher : la miniature resterait grisée au
   retour de la vidéo. Les effets de survol ne s'appliquent donc qu'avec une souris. */
@media (hover: none) {
    .video__miniature:hover img { transform: none; filter: none; }
    .video__miniature:hover .video__pastille { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    .video__miniature:hover .video__lecture { opacity: 1; }
    .bouton:hover { background: var(--violet); color: var(--blanc); }
    .bouton--clair:hover { background: var(--blanc); color: var(--violet); }
    .bouton--contour:hover { background: transparent; color: var(--violet); }
    .bouton--contour-clair:hover { background: transparent; color: var(--blanc); }
    .carrousel__bouton:hover:not(:disabled) { background: var(--blanc); color: var(--violet); }
    .onglets__bouton:hover:not([aria-selected="true"]) { background: transparent; }
}

@media (max-width: 46rem) {
    /* Bannière plus compacte : elle ne mange plus la moitié du premier écran. */
    .banniere { font-size: 0.95rem; }
    .banniere__interieur { padding-block: 0.65rem; gap: 0.5rem; align-items: start; }
    .banniere p { gap: 0.35rem 0.75rem; line-height: 1.4; }
    .banniere strong { font-size: 1.05em; }
    .banniere__date { padding: 0.15rem 0.5rem; }
    .banniere__fermer { min-width: 2.75rem; min-height: 2.75rem; margin: -0.5rem -0.75rem -0.5rem 0; }
    /* Boutons pleine largeur : plus faciles à toucher, et leur texte ne se coupe pas mal. */
    .boutons .bouton, .candidature .bouton, .immersion .bouton { width: 100%; text-align: center; }
    .bouton { padding: 0.85rem 1.25rem; }
    /* Schéma de la poursuite d'études : textes agrandis, sinon illisibles une fois le schéma réduit. */
    .parcours__case { font-size: 18px; }
    .parcours__part { font-size: 17px; }
    .carrousel__entete h2 { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 1.75rem); }
    .carrousel__piste { grid-auto-columns: min(78%, 18rem); gap: 1.25rem; }
    .titre-page h1 { max-width: none; }
}

/* ---------- Easter egg : BRAVO (voir site.js) ---------- */
.bravo-fige, .bravo-fige body { overflow: hidden; }
.bravo {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 200;
    cursor: pointer;
}
.bravo--couvert { background: var(--blanc); }
.bravo svg { display: block; width: 100%; height: 100%; max-width: none; }
/* Le léger contour referme les jointures entre deux cases voisines, comme sur les autres pavages. */
.bravo__fonds { fill: var(--blanc); stroke: var(--blanc); stroke-width: 0.03; }
.bravo__motifs { fill: var(--violet); stroke: var(--violet); stroke-width: 0.03; }
.bravo__fonds rect, .bravo__apparition { animation: bravo-apparition 0.35s ease-out both; }
.bravo__fonds rect { animation-name: bravo-fond; }
.bravo__lettre { animation: bravo-lettre 0.4s ease-out both; }
@keyframes bravo-fond { from { opacity: 0; } }
@keyframes bravo-apparition { from { opacity: 0; transform: scale(0.4); } }
@keyframes bravo-lettre { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }
/* La citation de Feynman, dans un bloc de cases vides sous BRAVO. */
.bravo__citation {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.75rem 1rem;
    color: var(--violet);
    cursor: default;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-out, visibility 0s 1.2s;
}
.bravo--cite .bravo__citation { opacity: 1; visibility: visible; transition: opacity 1.2s ease-out; }
.bravo__citation blockquote { margin: 0; }
.bravo__citation blockquote p {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.2rem);
    line-height: 1.4;
    text-wrap: balance;
}
.bravo__auteur {
    margin: 0.4rem 0 0.9rem;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gris);
}
.bravo__appel { margin: 0; line-height: 1.6; }
.bravo__citation .lien-fleche { display: inline; }
.bravo__citation .lien-fleche::after { margin-left: 0.4rem; }

/* ---------- Panorama des écoles intégrées (Poursuite d'études) ---------- */

.panorama { margin-top: var(--espace-section); }
.panorama h2 { margin-bottom: 0.25rem; }
.panorama__periode {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--gris);
    font-size: 1.15rem;
    margin-bottom: 2rem;
}
.panorama__exemple {
    display: inline-block;
    font-family: var(--sans);
    font-size: 0.95rem;
    background: var(--beige);
    padding: 0.3rem 0.8rem;
    margin: -1rem 0 2rem;
}

.logo-ecole {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Tant que le logo n'est pas fourni : le nom de l'école, en violet. */
.logo-ecole--texte {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--violet);
    line-height: 1.15;
    text-align: center;
    font-size: 1.05rem;
}

/* Carrousel des logos : bande qui défile sans fin, arrêtée au survol. */
.defilement {
    display: flex;
    overflow: hidden;
    padding-block: 1.5rem;
    border-block: 1px solid var(--gris-clair);
    margin-bottom: 3rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.defilement__piste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex: none;
    animation: defilement calc(var(--logos) * 3s) linear infinite;
}
.defilement__piste li {
    flex: none;
    width: 11rem;
    height: 5rem;
    margin-right: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.defilement:hover .defilement__piste { animation-play-state: paused; }
@keyframes defilement { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
    .defilement { overflow-x: auto; }
    .defilement__piste { animation: none; }
    .defilement__piste[aria-hidden] { display: none; }
}

/* Mosaïque : un groupe par concours, des cadres carrés. */
/* Les groupes se placent côte à côte tant qu'il y a la place, chacun gardant ses cadres ensemble. */
.mosaiques {
    --case: 10.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 3rem;
}
.mosaique { flex: 0 1 auto; min-width: 0; }
.mosaique__concours {
    color: var(--violet);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Petit quart de disque devant le nom du concours, comme dans la charte. */
.mosaique__concours::before {
    content: "";
    width: 0.8em;
    height: 0.8em;
    background: var(--violet);
    border-radius: 0 0 0 100%;
}
.mosaique__grille {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.integre {
    width: var(--case);
    position: relative;
    aspect-ratio: 1;
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--blanc);
    overflow: hidden;
}
.integre__logo {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.25rem 0.5rem;
}
.integre__eleve {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.6rem 0.9rem 0.8rem;
}
.integre__prenom { display: block; font-size: 1.15rem; }
.integre__promo { display: block; font-size: 0.9rem; color: var(--gris); }

/* Proposition 1 : cadre fin violet, prénom en bas à gauche. */
.mosaique--cadre .integre { border: 2px solid var(--violet); }
.mosaique--cadre .integre__prenom { color: var(--violet); }

/* Proposition 2 : cadre gris clair, grand quart de disque violet dans le coin portant l'année. */
.mosaique--coin .integre { border: 1px solid var(--gris-clair); }
.mosaique--coin .integre__logo { padding: 1.25rem 2.5rem 0.25rem 1.25rem; }
.mosaique--coin .integre__promo {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.6rem;
    height: 3.6rem;
    background: var(--violet);
    color: var(--blanc);
    border-radius: 0 0 0 100%;
    font-size: 0;
    text-align: right;
    padding: 0.45rem 0.5rem 0 0;
}
.mosaique--coin .integre__promo::after {
    content: attr(data-annee);
    font-size: 0.85rem;
}
.mosaique--coin .integre__prenom { color: var(--noir); }

/* Proposition 3 : logo sur blanc, bandeau violet en bas avec le prénom et la promotion. */
.mosaique--bandeau .integre { border: 1px solid var(--violet); }
.mosaique--bandeau .integre__eleve {
    background: var(--violet);
    color: var(--blanc);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.mosaique--bandeau .integre__prenom { display: inline; font-size: 1.05rem; }
.mosaique--bandeau .integre__promo { display: inline; white-space: nowrap; color: var(--beige); font-size: 0.85rem; }

@media (max-width: 30rem) {
    .mosaiques { --case: calc((100vw - 2 * var(--gouttiere) - 0.75rem) / 2); }
    .mosaique { flex-basis: 100%; }
    .mosaique__grille { gap: 0.75rem; }
    .integre__prenom { font-size: 1rem; }
    .defilement__piste li { width: 8rem; height: 4rem; margin-right: 2rem; }
}