/*
 * CV professionnel — feuille de style unique.
 *
 * Direction artistique : le modèle de CV choisi par Julien Silberstein (2026-10-06) — bandeau bleu royal avec
 * photo ronde, barre de contact noire, colonne latérale bleu pâle, pastilles-icônes rondes, barres de niveau,
 * frise verticale. Le site reprend ce vocabulaire visuel page après page ; le PDF en est la version papier.
 *
 * Règles du projet, vérifiées par tests/Unit/ContrastTest.php et ResponsiveTest.php :
 *  - mobile first : le CSS sans media query est celui du téléphone ; seuils 40, 60 et 80 rem, en min-width ;
 *  - aucun texte sous 16 px (1rem) ; contrastes AAA (7:1) pour tout texte courant ;
 *  - un :hover n'existe que dans @media (hover: hover) ;
 *  - aucune grille dont une piste ne peut pas rétrécir.
 */

@font-face {
    font-family: "Lato";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Lato_300Light-cbnGKGn.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Lato_400Regular-9olGQnE.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/Lato_400Regular_Italic-nepg9CO.ttf") format("truetype");
}

@font-face {
    font-family: "Lato";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/Lato_700Bold-rwvmGqI.ttf") format("truetype");
}

/* ---------------------------------------------------------------------------------------------- 1. Jetons */

:root {
    /*
     * Le thème « Gouache » (2026-10-07) : les pigments d'une palette de peinture (indigo, outremer, turquoise, vert feuille,
     * carmin, vermillon, ocre), francs mais mats, répartis par rôle : pas un filtre. Un bandeau indigo clair (pervenche, texte
     * foncé dessus), un indigo profond pour le menu, les liens et les boutons, un presque noir bleuté pour la barre de contact, un
     * ocre d'accent, un papier pâle, et six teintes qui se partagent le CV : chaque rubrique a la sienne
     * (pastille, titre, frise, barres, icônes), chaque canal de contact et chaque page du menu aussi. Chaque teinte existe
     * en trois tons : « foncé » (texte et pastilles sur fond clair, 7:1 au moins), « vif » (sur fond sombre : pastilles,
     * contours) et « pâle » (pistes des barres). Le site et le PDF lisent ces lignes (CssPalette) : le PDF ne connaît
     * aucune couleur en dur. Le tableau des teintes et des essais précédents est dans docs/decisions.md.
     */
    --brand: #2b2880;
    --brand-deep: #1b1960;
    --bar: #100e30;
    --band: #9499e6;
    --on-band: #0d0b24;
    --accent: #f0b43c;
    /* Nom exigé par le widget d'accessibilité (assets/accessibility) pour sa couleur d'accent : la même que --accent. */
    --yellow: #f0b43c;
    --panel: #eef0f8;
    --rule: #cdd2ea;
    --track: #dadff0;
    --ink: #1c1838;
    --muted: #4a4560;
    --paper: #ffffff;
    --line: 2px;

    --blue: #2846a9;
    --blue-hi: #97a9e7;
    --blue-soft: #c0caed;
    --violet: #4d2fc6;
    --violet-hi: #afa1e9;
    --violet-soft: #c9c0ed;
    --rose: #912247;
    --rose-hi: #e592ae;
    --rose-soft: #edc0cf;
    --orange: #7f391e;
    --orange-hi: #e19a7e;
    --orange-soft: #edccc0;
    --green: #15591e;
    --green-hi: #62da72;
    --green-soft: #c0edc6;
    --teal: #155658;
    --teal-hi: #62d8da;
    --teal-soft: #c0eced;

    --radius: 0.75rem;
    --gutter: 1rem;
    --font: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Préférence système « contraste renforcé » : noir sur blanc, traits plus épais, teintes plus sombres. */
@media (prefers-contrast: more) {
    :root {
        --brand: #15124a;
        --brand-deep: #0c0a30;
        --band: #c9ccf3;
        --on-band: #000000;
        --panel: #ffffff;
        --rule: #1c1838;
        --track: #b3b8d8;
        --ink: #000000;
        --muted: #000000;
        --line: 3px;
        --blue: #192b69;
        --blue-soft: #7d92da;
        --violet: #301d7c;
        --violet-soft: #907dda;
        --rose: #5b152d;
        --rose-soft: #da7d9c;
        --orange: #502413;
        --orange-soft: #da967d;
        --green: #0d3813;
        --green-soft: #7dda8a;
        --teal: #0d3737;
        --teal-soft: #7dd8da;
    }

    .section-title {
        border-bottom-color: var(--tone);
    }
}

/*
 * Une rubrique = une teinte. Un élément qui porte « tone-xxx » donne à tout ce qu'il contient trois couleurs de travail :
 * --tone (foncé : texte, pastille, frise, barre), --tone-hi (vif : sur fond nuit, soulignement) et --tone-soft (pâle :
 * piste d'une barre). Sans classe, la teinte est le bleu nuit du bandeau.
 */
body {
    --tone: var(--brand);
    --tone-hi: var(--accent);
    --tone-soft: var(--track);
    /* Les sept pigments du bandeau, dans l'ordre d'un nuancier : le trait signature du site. */
    --spectrum: linear-gradient(
        90deg,
        var(--rose-hi) 0 14.28%,
        var(--orange-hi) 14.28% 28.57%,
        var(--accent) 28.57% 42.85%,
        var(--green-hi) 42.85% 57.14%,
        var(--teal-hi) 57.14% 71.42%,
        var(--blue-hi) 71.42% 85.71%,
        var(--violet-hi) 85.71% 100%
    );
    /* Sur le bandeau clair, les tons vifs se confondraient avec le fond : le même trait, en tons foncés. */
    --spectrum-deep: linear-gradient(
        90deg,
        var(--rose) 0 16.66%,
        var(--orange) 16.66% 33.33%,
        var(--green) 33.33% 50%,
        var(--teal) 50% 66.66%,
        var(--blue) 66.66% 83.33%,
        var(--violet) 83.33% 100%
    );
}

.tone-blue {
    --tone: var(--blue);
    --tone-hi: var(--blue-hi);
    --tone-soft: var(--blue-soft);
}

.tone-violet {
    --tone: var(--violet);
    --tone-hi: var(--violet-hi);
    --tone-soft: var(--violet-soft);
}

.tone-rose {
    --tone: var(--rose);
    --tone-hi: var(--rose-hi);
    --tone-soft: var(--rose-soft);
}

.tone-orange {
    --tone: var(--orange);
    --tone-hi: var(--orange-hi);
    --tone-soft: var(--orange-soft);
}

.tone-green {
    --tone: var(--green);
    --tone-hi: var(--green-hi);
    --tone-soft: var(--green-soft);
}

.tone-teal {
    --tone: var(--teal);
    --tone-hi: var(--teal-hi);
    --tone-soft: var(--teal-soft);
}

/* -------------------------------------------------------------------------------------------------- 2. Base */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* La bande du bas est fixe : un élément qui prend le focus, ou une ancre, s'arrête au-dessus d'elle. */
    scroll-padding-bottom: 5rem;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

h1,
h2,
h3 {
    margin: 0;
    line-height: 1.2;
}

p {
    margin: 0 0 1rem;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

small {
    font-size: 1rem;
}

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

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

/* Le bandeau est clair : contour indigo profond. La barre de contact (dans le bandeau) et le menu sont sombres : contour ocre,
   déclaré après pour l'emporter. ContrastTest vérifie chaque couple contour / fond. Ailleurs, le contour indigo par défaut. */
.site-header :focus-visible {
    outline-color: var(--brand-deep);
}

.site-nav :focus-visible,
.contact-bar :focus-visible {
    outline-color: var(--accent);
}

main:focus {
    outline: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -6rem;
    left: var(--gutter);
    z-index: 100;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-weight: 700;
}

.skip-link:focus {
    top: 0.5rem;
}

.wrap {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
}

/* ------------------------------------------------------------------------------------------ 3. En-tête */

.site-header {
    background: var(--band);
    color: var(--on-band);
}

.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 0.75rem;
}

.brand {
    color: var(--on-band);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.01em;
}

/* Bandeau d'une page intérieure : un titre, un trait clair. */
.page-banner {
    padding-block: 1.5rem 2rem;
}

.page-banner h1 {
    font-size: 2rem;
    font-weight: 700;
}

.page-banner .lead {
    max-width: 40rem;
    margin: 0.5rem 0 0;
    color: var(--on-band);
    font-size: 1.125rem;
}

.accent-rule {
    display: block;
    width: 3.5rem;
    height: 4px;
    margin-top: 0.75rem;
    background: var(--spectrum-deep);
    border-radius: 2px;
}

/* Bandeau de l'accueil : la photo ronde, le nom en deux graisses, le rôle. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.25rem;
    padding-block: 1.5rem 2rem;
    text-align: center;
}

.avatar {
    display: grid;
    place-items: center;
    width: min(9rem, 100%);
    height: auto;
    aspect-ratio: 1;
    border: 4px solid var(--paper);
    border-radius: 50%;
    background: var(--accent);
    color: var(--ink);
    font-size: 2.5rem;
    font-weight: 700;
    overflow: hidden;
}

.avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .accent-rule {
    margin-inline: auto;
}

.hero-name {
    display: grid;
    gap: 0.25rem;
    margin: 0;
    font-size: clamp(2.25rem, 9vw, 4rem);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hero-name .first {
    color: var(--brand-deep);
    font-weight: 300;
}

.hero-name .last {
    color: var(--on-band);
    font-weight: 700;
}

.hero-role {
    margin: 0.75rem 0 0;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-search {
    display: inline-block;
    margin: 1rem 0 0;
    padding: 0.4rem 0.9rem;
    background: var(--paper);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 700;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* Barre de contact noire sous le bandeau. */
.contact-bar {
    background: var(--bar);
    color: var(--paper);
}

.contact-bar ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.75rem;
    padding: 0.5rem 0;
}

.contact-bar li {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
}

.contact-bar a,
.contact-bar span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--paper);
    text-decoration: none;
}

.contact-bar .badge-icon {
    width: 2rem;
    height: 2rem;
    background: var(--tone-hi);
    color: var(--ink);
}

@media (hover: hover) {
    .contact-bar a:hover span:last-child {
        text-decoration: underline;
    }
}

/* ----------------------------------------------------------------------------------------- 4. Composants */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.25rem;
    border: 2px solid var(--brand);
    border-radius: 999px;
    background: var(--paper);
    color: var(--brand);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.btn--primary {
    background: var(--brand);
    color: var(--paper);
}

/* Les deux boutons du bandeau (clair) : un plein indigo profond, un contour. */
.btn--deep {
    border-color: var(--brand-deep);
    background: var(--brand-deep);
    color: var(--paper);
}

.btn--on-band {
    border-color: var(--brand-deep);
    background: transparent;
    color: var(--on-band);
}

@media (hover: hover) {
    .btn:hover {
        background: var(--brand);
        color: var(--paper);
    }

    .btn--primary:hover {
        background: var(--brand-deep);
        border-color: var(--brand-deep);
    }

    .btn--on-band:hover,
    .btn--deep:hover {
        background: var(--paper);
        border-color: var(--paper);
        color: var(--ink);
    }
}

/* Pastille ronde à icône : le repère visuel de chaque section. */
.badge-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--tone);
    color: var(--paper);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--tone-hi);
    color: var(--tone);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.panel {
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--panel);
}

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

.lead-text {
    font-size: 1.125rem;
}

/* Frise verticale. */
.timeline {
    position: relative;
    margin: 0 0 0.5rem 0.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--tone);
}

.timeline > li {
    position: relative;
    padding-bottom: 1.75rem;
}

.timeline > li:last-child {
    padding-bottom: 0.25rem;
}

.timeline > li::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    left: calc(-1.5rem - 0.5rem - 1px);
    width: 1rem;
    height: 1rem;
    border: 3px solid var(--paper);
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 2px var(--tone);
}

.tl-period {
    margin: 0;
    color: var(--muted);
    font-weight: 700;
}

.tl-title {
    margin: 0.1rem 0 0;
    color: var(--tone);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tl-where {
    margin: 0.1rem 0 0.4rem;
    font-style: italic;
}

.tl-org {
    margin: 0;
    font-weight: 700;
}

.tl-note {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.tl-bullets {
    margin: 0.4rem 0 0;
}

.tl-bullets li {
    position: relative;
    padding-left: 1.1rem;
}

.tl-bullets li::before {
    /* La puce est un dessin : le texte de remplacement vide (après « / ») la garde hors de l'arbre d'accessibilité. */
    content: "•" / "";
    position: absolute;
    left: 0.15rem;
    color: var(--tone);
    font-weight: 700;
}

.tl-diploma {
    display: inline-block;
    margin: 0.4rem 0.4rem 0 0;
    padding: 0.1rem 0.7rem;
    border: 2px solid var(--tone);
    border-radius: 999px;
    color: var(--tone);
    font-weight: 700;
}

.tl-diploma .note {
    font-weight: 400;
}

/* Barres de niveau : un libellé, une piste, une barre. */
.bars {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
}

.bar-label {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.75rem;
    font-weight: 700;
}

.bar-detail {
    color: var(--muted);
    font-weight: 400;
}

.bar {
    height: 0.65rem;
    margin-top: 0.3rem;
    border-radius: 999px;
    background: var(--tone-soft);
}

.bar > span {
    display: block;
    width: var(--p, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--tone);
}

/* Les compétences : une barre, une teinte, comme les couleurs de langages d'un dépôt de code. */
.bars--spectrum > li:nth-child(6n + 1) {
    --tone: var(--teal);
    --tone-soft: var(--teal-soft);
}

.bars--spectrum > li:nth-child(6n + 2) {
    --tone: var(--blue);
    --tone-soft: var(--blue-soft);
}

.bars--spectrum > li:nth-child(6n + 3) {
    --tone: var(--violet);
    --tone-soft: var(--violet-soft);
}

.bars--spectrum > li:nth-child(6n + 4) {
    --tone: var(--rose);
    --tone-soft: var(--rose-soft);
}

.bars--spectrum > li:nth-child(6n + 5) {
    --tone: var(--orange);
    --tone-soft: var(--orange-soft);
}

.bars--spectrum > li:nth-child(6n + 6) {
    --tone: var(--green);
    --tone-soft: var(--green-soft);
}

/* Listes simples à puce ronde. */
.checks {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
}

.checks li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.checks .icon {
    color: var(--tone);
}

/* Centres d'intérêt : icône, puis le nom (toujours écrit). */
.interests {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
}

.interests li {
    display: grid;
    justify-items: center;
    gap: 0.4rem;
    text-align: center;
}

.interests .icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--tone);
    stroke-width: 1.5;
}

/* ----------------------------------------------------------------------------- 5. Disposition des pages */

main {
    display: block;
    padding-bottom: 3rem;
}

.cv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 2rem;
}

.cv-main,
.cv-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 2rem;
}

.cv-side {
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--panel);
}

.block {
    min-width: 0;
}

.more {
    margin-top: 1rem;
}

.more summary {
    min-height: 2.75rem;
    padding: 0.5rem 0;
    color: var(--tone);
    font-weight: 700;
    cursor: pointer;
}

.more[open] summary {
    margin-bottom: 1rem;
}

.page-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    padding-top: 2rem;
}

.domains {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.domain h2 {
    margin-bottom: 1rem;
    color: var(--tone);
    font-size: 1.25rem;
    font-weight: 700;
}

/* Un domaine de compétences, une teinte : elles tournent dans l'ordre du spectre. */
.domains > .domain:nth-child(6n + 1) {
    --tone: var(--teal);
    --tone-hi: var(--teal-hi);
    --tone-soft: var(--teal-soft);
}

.domains > .domain:nth-child(6n + 2) {
    --tone: var(--blue);
    --tone-hi: var(--blue-hi);
    --tone-soft: var(--blue-soft);
}

.domains > .domain:nth-child(6n + 3) {
    --tone: var(--violet);
    --tone-hi: var(--violet-hi);
    --tone-soft: var(--violet-soft);
}

.domains > .domain:nth-child(6n + 4) {
    --tone: var(--rose);
    --tone-hi: var(--rose-hi);
    --tone-soft: var(--rose-soft);
}

.domains > .domain:nth-child(6n + 5) {
    --tone: var(--orange);
    --tone-hi: var(--orange-hi);
    --tone-soft: var(--orange-soft);
}

.domains > .domain:nth-child(6n + 6) {
    --tone: var(--green);
    --tone-hi: var(--green-hi);
    --tone-soft: var(--green-soft);
}

.view-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.view-switch a[aria-current="true"] {
    background: var(--brand);
    color: var(--paper);
}

.channels {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.channel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value";
    align-items: center;
    gap: 0 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--tone-hi);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
}

.channel .badge-icon {
    grid-area: icon;
}

.channel-label {
    grid-area: label;
    color: var(--muted);
    font-weight: 700;
}

.channel-value {
    grid-area: value;
    color: var(--tone);
    font-weight: 700;
}

a.channel:focus-visible {
    border-color: var(--tone);
}

@media (hover: hover) {
    a.channel:hover {
        border-color: var(--tone);
        background: var(--panel);
    }
}

.callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--tone);
    color: var(--paper);
    font-size: 1.125rem;
}

.callout strong {
    display: block;
    color: var(--paper);
    font-size: 1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.callout .badge-icon {
    background: var(--paper);
    color: var(--tone);
}

.about-name {
    margin: 1rem 0 0;
    text-align: center;
    color: var(--brand-deep);
    font-size: 1.125rem;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 2rem;
}

.about-photo {
    width: min(12rem, 100%);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    font-size: 3.5rem;
    border-color: var(--brand);
}

.pdf-frame {
    width: 100%;
    height: 38rem;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    background: var(--panel);
}

.pdf-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.muted {
    color: var(--muted);
}

/* ------------------------------------------------------------------------------------ 6. Formulaires */

.form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 30rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.form-field input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--brand);
    border-radius: 0.5rem;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

/*
 * Le champ du mot de passe et son bouton « œil » : le bouton est posé sur le bord droit du champ (44 px de côté, comme tout bouton
 * du site), le texte du champ lui laisse la place. Il n'apparaît que si le JavaScript l'a branché (voir assets/password-toggle.js).
 */
.password-field {
    position: relative;
}

.password-field input {
    padding-right: 3.25rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: none;
    color: var(--brand);
    cursor: pointer;
}

.password-toggle[hidden] {
    display: none;
}

/* Un seul dessin à la fois : l'œil ouvert propose d'afficher, l'œil barré propose de cacher. */
.password-toggle .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.password-toggle .icon-off,
.password-toggle[aria-pressed="true"] .icon-on {
    display: none;
}

.password-toggle[aria-pressed="true"] .icon-off {
    display: block;
}

.form-error {
    max-width: 30rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 0.5rem;
    background: var(--panel);
    font-weight: 700;
}

.form-hint {
    margin-top: 1.5rem;
}

/* ----------------------------------------------------------------------------- 7. Bande de navigation */

/*
 * Le menu : une bande fine, collée au bas de l'écran, qui ne bouge pas quand on défile. Une pastille par page (icône
 * décorative, nom écrit à côté), la page courante en blanc. Sur un petit écran, six noms de 16 px ne tiennent pas en
 * largeur : la bande défile alors à l'horizontale (au doigt, ou au clavier : chaque lien qui prend le focus s'y montre).
 */
.site-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    border-top: 3px solid var(--accent);
    border-image: var(--spectrum) 1;
    background: var(--brand);
    color: var(--paper);
}

.site-nav ul {
    position: relative;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
}

/* Centrée quand elle tient, calée à gauche et défilante sinon (les marges automatiques ne comptent que s'il reste de la place). */
.site-nav li:first-child {
    margin-left: auto;
}

.site-nav li:last-child {
    margin-right: auto;
}

.site-nav li {
    flex: none;
}

.site-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.2rem 0.95rem 0.2rem 0.25rem;
    border: 2px solid var(--tone-hi);
    border-radius: 999px;
    color: var(--paper);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.site-nav .badge-icon {
    width: 2.1rem;
    height: 2.1rem;
    background: var(--tone-hi);
    color: var(--ink);
}

/* La page courante : la pastille se remplit de sa teinte (le nom reste écrit, aria-current le dit aussi). */
.site-nav a[aria-current="page"] {
    background: var(--tone-hi);
    color: var(--ink);
}

.site-nav a[aria-current="page"] .badge-icon {
    background: var(--ink);
    color: var(--tone-hi);
}

.site-nav .nav-cv a {
    border-style: dashed;
}

@media (hover: hover) {
    .site-nav a:hover {
        border-color: var(--paper);
        background: var(--paper);
        color: var(--ink);
    }

    .site-nav a:hover .badge-icon {
        background: var(--tone);
        color: var(--paper);
    }
}

/* ------------------------------------------------------------------------------------ 8. Pied de page */

.site-footer {
    /* Réserve la hauteur de la bande fixe du bas (3,75 rem) : la dernière ligne du pied de page ne passe pas dessous. */
    padding-bottom: 3.75rem;
    margin-top: auto;
    background: var(--panel);
    color: var(--ink);
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.footer-inner p {
    margin: 0;
}

/* ------------------------------------------------------------------------------- 9. Écrans plus larges */

@media (min-width: 40rem) {
    :root {
        --gutter: 1.5rem;
    }

    .page-banner h1 {
        font-size: 2.5rem;
    }

    .hero {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        gap: 2rem;
        text-align: left;
    }

    .hero-actions {
        justify-content: flex-start;
    }

    .hero .accent-rule {
        margin-inline: 0;
    }

    .avatar {
        width: 11rem;
        height: 11rem;
    }

    .bars--two,
    .checks--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem 2rem;
    }

    .interests {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-bar ul {
        justify-content: flex-start;
    }

    .channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 60rem) {
    .cv-grid {
        grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
        grid-template-areas: "side main";
        gap: 2.5rem;
        align-items: start;
    }

    .cv-side {
        grid-area: side;
    }

    .cv-main {
        grid-area: main;
    }

    .interests {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .domains {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-grid {
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        gap: 2.5rem;
        align-items: start;
    }

    .avatar {
        width: 12.5rem;
        height: 12.5rem;
    }
}

@media (min-width: 80rem) {
    .wrap {
        max-width: 78rem;
    }

    .page-banner h1 {
        font-size: 3rem;
    }
}

/* ------------------------------------------------------------------------------------- 10. Mouvement */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------------------------------------------------------------- 11. Contraste élevé de Windows */

/*
 * En mode « contraste élevé » (forced-colors), le système impose ses couleurs et efface les fonds : ce qu'un fond seul disait
 * disparaît (page courante du menu et du filtre, remplissage des barres de niveau). Ces règles le redisent par un trait, avec les
 * couleurs du système (Canvas, CanvasText, Highlight) : elles suivent le thème choisi par la personne.
 */
@media (forced-colors: active) {
    .site-nav a[aria-current="page"],
    .view-switch a[aria-current="true"] {
        border-width: 4px;
        text-decoration: underline;
        text-decoration-thickness: 3px;
        text-underline-offset: 0.2em;
    }

    .bar {
        height: 0.9rem;
        border: 2px solid CanvasText;
        background: Canvas;
    }

    .bar > span {
        forced-color-adjust: none;
        background: Highlight;
    }
}

/* ------------------------------------------------------------------------------- 12. Impression */

/*
 * Imprimer la page en grand est un recours pour qui lit mal à l'écran (le PDF est l'autre). Le menu fixe et l'outil
 * d'accessibilité n'ont pas de sens sur papier. Les navigateurs n'impriment pas les fonds : tout texte clair sur fond sombre
 * passe en encre sur papier, cerné d'un trait ; les barres de niveau, elles, gardent leur remplissage.
 */
@media print {
    @page {
        margin: 1.2cm;
    }

    html {
        scroll-padding-bottom: 0;
    }

    .site-nav,
    .skip-link,
    #accessibility-widget,
    .pdf-frame {
        display: none;
    }

    .site-footer {
        padding-bottom: 0.5rem;
    }

    .contact-bar,
    .contact-bar a,
    .contact-bar span,
    .callout,
    .callout strong,
    .btn,
    .btn--primary,
    .btn--deep,
    .btn--on-band,
    .view-switch a[aria-current="true"] {
        background: none;
        color: var(--ink);
    }

    .btn,
    .callout,
    .view-switch a {
        border: 2px solid var(--ink);
    }

    .badge-icon,
    .contact-bar .badge-icon,
    .callout .badge-icon {
        border: 2px solid var(--ink);
        background: none;
        color: var(--ink);
    }

    /* Une adresse d'une page de texte s'écrit à côté de son lien : sur papier, rien ne se clique. */
    main a[href^="http"]:not(.btn)::after {
        content: " (" attr(href) ")";
        overflow-wrap: anywhere;
    }

    .bar,
    .bar > span {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    h1,
    h2,
    h3 {
        break-after: avoid;
    }

    .timeline > li,
    .bars > li,
    .channel {
        break-inside: avoid;
    }
}