@charset "UTF-8";

/* CV de Bruno A. : feuille principale (tous médias, print.css la complète)
   Variables nommées comme dans le thème Simone du blog (harmonisation).
   Couleurs en oklch sur une seule teinte, celle de l'ancien bleu #39c :
   oklch(0.648 0.119 235). Contrastes vérifiés (WCAG AA). */

/* Polices (auto-hébergées, licence SIL OFL)
============================================ */
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../font/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../font/AtkinsonHyperlegibleNext-RegularItalic.woff2") format("woff2");
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../font/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
}
@font-face {
    font-family: "Roboto Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../font/RobotoCondensed-SemiBold.woff2") format("woff2");
}

/* Variables
============================================ */
:root {
    color-scheme: light dark;

    /* Palette (valeurs hexadécimales équivalentes en commentaire) */
    --hue: 235;
    --marque: oklch(0.648 0.119 var(--hue));          /* #3399cc, l'ancien bleu */
    --lt-fond: oklch(0.965 0.012 var(--hue));         /* #ecf5fb */
    --lt-carte: oklch(0.995 0.002 var(--hue));        /* #fcfeff */
    --lt-texte: oklch(0.26 0.03 var(--hue));          /* #152631 */
    --lt-attenue: oklch(0.46 0.03 var(--hue));        /* #485b67 */
    --lt-accent: oklch(0.48 0.095 var(--hue));        /* #13658b */
    --lt-accent-fort: oklch(0.38 0.08 var(--hue));    /* #014867 */
    --lt-bandeau: oklch(0.9 0.045 var(--hue));        /* #c2e4f8 */
    --lt-tag: oklch(0.945 0.022 var(--hue));          /* #dff0fa */
    --lt-bordure: oklch(0.86 0.035 var(--hue));       /* #bcd5e5 */
    --lt-pied: oklch(0.3 0.06 var(--hue));            /* #043247 */

    --dt-fond: oklch(0.2 0.02 var(--hue));            /* #0d181e */
    --dt-carte: oklch(0.245 0.025 var(--hue));        /* #14222b */
    --dt-texte: oklch(0.93 0.01 var(--hue));          /* #e2e9ee */
    --dt-attenue: oklch(0.76 0.02 var(--hue));        /* #a5b3bc */
    --dt-accent: oklch(0.78 0.09 var(--hue));         /* #7cc1e9 */
    --dt-barre: oklch(0.36 0.07 var(--hue));          /* #0b425c */
    --dt-barre-fort: oklch(0.3 0.06 var(--hue));      /* #043247 */
    --dt-bandeau: oklch(0.3 0.045 var(--hue));        /* #143141 */
    --dt-tag: oklch(0.31 0.035 var(--hue));           /* #1e3340 */
    --dt-bordure: oklch(0.36 0.03 var(--hue));        /* #2e404b */
    --dt-pied: oklch(0.16 0.025 var(--hue));          /* #030f16 */

    /* Usages : mode clair ou sombre selon le réglage du système */
    --fond: light-dark(var(--lt-fond), var(--dt-fond));
    --carte: light-dark(var(--lt-carte), var(--dt-carte));
    --texte: light-dark(var(--lt-texte), var(--dt-texte));
    --attenue: light-dark(var(--lt-attenue), var(--dt-attenue));
    --accent: light-dark(var(--lt-accent), var(--dt-accent));
    --bandeau: light-dark(var(--lt-bandeau), var(--dt-bandeau));
    --tag: light-dark(var(--lt-tag), var(--dt-tag));
    --bordure: light-dark(var(--lt-bordure), var(--dt-bordure));
    --barre: light-dark(var(--lt-accent), var(--dt-barre));
    --barre-fort: light-dark(var(--lt-accent-fort), var(--dt-barre-fort));
    --pied: light-dark(var(--lt-pied), var(--dt-pied));
    --sur-fonce: var(--lt-carte);                      /* texte sur barre et pied */

    /* Typographie : même échelle fluide que Simone (rapport 1,25) */
    --police-texte: "Atkinson Hyperlegible Next", system-ui, sans-serif;
    --police-titres: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
    --fs-grad: 1.25;
    --fs-step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-step-1: calc(var(--fs-step-0) * var(--fs-grad));
    --fs-step-2: calc(var(--fs-step-1) * var(--fs-grad));
    --fs-step-3: calc(var(--fs-step-2) * var(--fs-grad));
    --fs-step-4: calc(var(--fs-step-3) * var(--fs-grad));

    /* Espacements */
    --spacer: var(--fs-step-0);
    --spacer-s: calc(var(--spacer) / 2);
    --spacer-l: calc(var(--spacer) * 2);

    --largeur: 62rem;
    --hauteur-barre: 3.5rem;
    --rayon: 0.75rem;

    /* Icônes SVG utilisées en masque (colorées par currentColor) */
    --icone-menu: url("../img/menu.svg");
    --icone-haut: url("../img/haut.svg");
    --icone-lien-ext: url("../img/lien-ext.svg");
    --icone-linkedin: url("../img/linkedin.svg");
    --icone-mail: url("../img/mail.svg");
}

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

html {
    scroll-padding-top: calc(var(--hauteur-barre) + var(--spacer));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Colonne pleine hauteur : le pied reste en bas même sur une page courte */
body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    margin: 0;
    background-color: var(--fond);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: var(--fs-step-0);
    line-height: 1.6;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--police-titres);
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
}

p,
ul,
ol {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: underline 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 0.15s;

    &:hover {
        text-decoration-thickness: 2px;
    }
}

:focus-visible {
    outline: 3px solid var(--marque);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Lien d'évitement : visible seulement au clavier */
.evitement {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 20;
    padding: 0.5rem 1rem;
    background: var(--carte);
    border-radius: var(--rayon);
    transform: translateY(-200%);

    &:focus {
        transform: none;
    }
}

/* Icônes en masque */
.icone {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    mask: var(--icone) center / contain no-repeat;
    vertical-align: -0.125em;
}
.icone-menu { --icone: var(--icone-menu); }
.icone-haut { --icone: var(--icone-haut); }
.icone-linkedin { --icone: var(--icone-linkedin); }
.icone-mail { --icone: var(--icone-mail); }

/* Lien externe : petite icône après le texte */
a.ext::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-inline-start: 0.25em;
    background-color: currentColor;
    mask: var(--icone-lien-ext) center / contain no-repeat;
}

/* Barre de navigation fixe
============================================ */
.barre {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--barre);
    color: var(--sur-fonce);
    box-shadow: 0 0.125rem 0.5rem oklch(0 0 0 / 0.25);

    a {
        color: inherit;
        text-decoration: none;
    }

    :focus-visible {
        outline-color: var(--sur-fonce);
    }
}

.barre-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacer);
    max-width: var(--largeur);
    min-height: var(--hauteur-barre);
    margin: 0 auto;
    padding: 0 var(--spacer);
}

.barre-nom {
    font-family: var(--police-titres);
    font-size: var(--fs-step-1);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0;
    list-style: none;

    a {
        display: block;
        padding: 0.375rem 0.75rem;
        border-radius: 0.375rem;
        transition: background-color 0.15s;

        &:hover {
            background-color: var(--barre-fort);
        }
    }
}

.menu-bouton {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    color: inherit;
    font: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 0.375rem;
    cursor: pointer;

    &[aria-expanded="true"] {
        background-color: var(--barre-fort);
    }

    .icone {
        font-size: 1.25em;
    }
}

/* Petit écran : le menu se replie derrière un bouton.
   Seulement si JavaScript est actif ; sinon le menu reste affiché. */
@media (width < 60rem) and (scripting: enabled) {
    .menu-bouton {
        display: inline-flex;
    }

    .menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        padding: var(--spacer-s) var(--spacer) var(--spacer);
        background-color: var(--barre);
        box-shadow: 0 0.5rem 0.75rem oklch(0 0 0 / 0.25);

        a {
            padding: 0.625rem 0.75rem;
        }

        &:not(.ouvert) {
            display: none;
        }
    }
}

/* Page
============================================ */
.page {
    flex: 1 0 auto;
    display: grid;
    align-content: start;
    gap: var(--spacer-l);
    width: 100%;
    max-width: var(--largeur);
    margin: 0 auto;
    padding: var(--spacer-l) var(--spacer) calc(var(--spacer) * 3);
}

/* En-tête du CV : nom, titre, contacts */
.entete {
    padding: var(--spacer-l);
    background-color: var(--bandeau);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);

    h1 {
        display: flex;
        flex-direction: column;
        gap: var(--spacer-s);
    }
}

.entete-nom {
    font-size: var(--fs-step-4);
    color: var(--texte);
}

.entete-titre {
    font-size: var(--fs-step-2);
    color: var(--accent);
}

.entete-accroche {
    max-width: 65ch;
    margin-top: var(--spacer);
    line-height: 1.6;
}

.entete-liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacer-s) var(--spacer);
    margin-top: var(--spacer-l);
    padding: 0;
    list-style: none;

    a {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--carte);
        border: 1px solid var(--bordure);
        border-radius: 999px;
        text-decoration: none;
        font-weight: 700;
        transition: border-color 0.15s;

        &:hover {
            border-color: var(--accent);
        }
    }
}

/* Sections */
.section {
    padding: var(--spacer-l);
    background-color: var(--carte);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
}

/* Titre de section (h2 du CV, h1 des mentions légales) */
.section-titre {
    position: relative;
    margin-bottom: var(--spacer-l);
    padding-bottom: var(--spacer-s);
    font-size: var(--fs-step-3);
    color: var(--accent);

    /* trait court sous le titre, comme dans Simone */
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 3rem;
        height: 3px;
        background-color: var(--marque);
        border-radius: 3px;
    }
}

/* Texte courant (mentions légales) */
.texte {
    h2 {
        margin: var(--spacer-l) 0 var(--spacer-s);
        font-size: var(--fs-step-1);
    }

    .section-titre + h2 {
        margin-top: 0;
    }

    p {
        max-width: 70ch;
    }
}

@media (width < 40rem) {
    .entete,
    .section {
        padding: var(--spacer-l) var(--spacer);
    }
}

/* Frise (expériences, formations)
============================================ */
.frise {
    display: grid;
    gap: var(--spacer-l);
    padding: 0;
    list-style: none;
}

.etape {
    display: grid;
    gap: 0.25rem;

    @media (width >= 40rem) {
        grid-template-columns: 8.5rem 1fr;
        gap: var(--spacer-l);
    }
}

.etape-date {
    font-family: var(--police-titres);
    font-weight: 600;
    color: var(--accent);
    line-height: 1.5;

    @media (width >= 40rem) {
        text-align: right;
    }
}

.etape-corps {
    position: relative;
    padding-left: var(--spacer);
    border-left: 2px solid var(--bordure);

    /* pastille sur la ligne de la frise */
    &::before {
        content: "";
        position: absolute;
        top: 0.45em;
        left: calc(-0.375rem - 1px);
        width: 0.75rem;
        height: 0.75rem;
        background-color: var(--marque);
        border: 2px solid var(--carte);
        border-radius: 50%;
    }
}

.etape-titre {
    font-size: var(--fs-step-1);
}

.etape-titre em {
    font-family: var(--police-texte);
    font-size: var(--fs-step-0);
    font-weight: 400;
    color: var(--attenue);
}

.etape-lieu {
    margin-top: 0.125rem;
    color: var(--attenue);
}

.etape-taches {
    margin-top: var(--spacer-s);
    padding-left: 1.25em;

    li::marker {
        color: var(--marque);
    }
}

/* Étiquettes (technologies) */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: var(--spacer-s);
    padding: 0;
    list-style: none;
    font-size: 0.875em;

    li {
        padding: 0.0625rem 0.625rem;
        background-color: var(--tag);
        color: var(--accent);
        border-radius: 999px;

        &::before {
            content: "#";
            opacity: 0.7;
        }
    }
}

/* Compétences
============================================ */
.competences {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    grid-auto-rows: 1fr; /* toutes les cartes à la hauteur de la plus haute */
    gap: var(--spacer);
}

.competence {
    padding: var(--spacer) var(--spacer) var(--spacer) calc(var(--spacer) - 3px);
    background-color: var(--tag);
    border-left: 3px solid var(--marque);
    border-radius: 0.5rem;

    h3 {
        margin-bottom: 0.25rem;
        font-size: var(--fs-step-1);
        color: var(--accent);
    }

    ul {
        padding: 0;
        list-style: none;
    }
}

/* Qualités et centres d'intérêt : côte à côte sur grand écran
============================================ */
.duo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--spacer-l);
}

.liste {
    display: grid;
    gap: var(--spacer-s);
    padding-left: 1.25em;

    li::marker {
        color: var(--marque);
    }
}

/* Pied de page
============================================ */
.pied {
    padding: var(--spacer-l) var(--spacer);
    background-color: var(--pied);
    color: var(--sur-fonce);
    text-align: center;
    font-size: 0.875rem;

    a {
        color: inherit;
    }

    :focus-visible {
        outline-color: var(--sur-fonce);
    }

    p + p {
        margin-top: 0.25rem;
        opacity: 0.85;
    }
}

/* Bouton retour en haut
============================================ */
.haut {
    position: fixed;
    right: var(--spacer);
    bottom: var(--spacer);
    z-index: 10;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--barre);
    color: var(--sur-fonce);
    border-radius: var(--rayon);
    box-shadow: 0 0.125rem 0.5rem oklch(0 0 0 / 0.3);
    font-size: 1.25rem;
    transition: opacity 0.3s, visibility 0.3s, background-color 0.15s;

    &:hover {
        background-color: var(--barre-fort);
    }
}

/* Avec JavaScript, le bouton n'apparaît qu'après un peu de défilement */
@media (scripting: enabled) {
    .haut:not(.visible) {
        opacity: 0;
        visibility: hidden;
    }
}