/* ============================================================================
   Azimuth Dev — la vitrine, une seule page.

   Une feuille, pas de préprocesseur, pas de dépendance : le site n'a qu'un
   écran et sa mise en page tient dans quelques grilles. Les valeurs viennent
   du design system AdoreDieu (tokens `--ad-*`), avec l'accent #256e97 figé
   ici plutôt que recalculé au chargement — la maquette le proposait, mais un
   accent qui ne change jamais n'a pas besoin de code.
   ========================================================================== */

/* ── Thème ───────────────────────────────────────────────────────────────
   Sombre par défaut, clair quand le système le demande, et le choix explicite
   du visiteur passe devant les deux. L'ordre des règles fait la décision :
   à spécificité égale, la dernière gagne — [data-theme] est donc écrit après
   la requête de média, sans quoi la préférence système l'emporterait sur le
   bouton.

   `--ad-mute` s'écarte d'un cheveu du design system (#6F7779 / #7E8688) :
   ces valeurs tombaient à 4,35:1 sur le fond de page, sous le minimum AA pour
   du petit texte. La page annonce l'accessibilité, elle se doit de la tenir. */
:root {
    --ad-bg: #121517;
    --ad-surface: #1A1E20;
    --ad-surface-hi: #222729;
    --ad-text: #E5E7E8;
    --ad-text-2: #B5BCBE;
    --ad-mute: #868E90;
    --ad-divider: rgba(255, 255, 255, 0.08);
    --ad-divider-gold: rgba(255, 255, 255, 0.22);
    --ad-cyan: #81ABC3;
    --ad-cyan-contrast: #08202B;
    --ad-navy: #81ABC3;
    --ad-shadow: rgba(0, 0, 0, 0.4);

    --ad-font-display: 'Spectral', Georgia, 'Times New Roman', serif;
    --ad-font-body: 'Newsreader', Georgia, serif;
    --ad-font-ui: 'Inter', system-ui, -apple-system, sans-serif;

    --container: 1120px;
    --gutter: 28px;
    --radius-card: 24px;
    --radius-shot: 14px;
    --radius-pill: 100px;

    color-scheme: dark;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --ad-bg: #F5FAFC;
        --ad-surface: #FFFFFF;
        --ad-surface-hi: #EAF4F8;
        --ad-text: #181C1D;
        --ad-text-2: #42494B;
        --ad-mute: #676F71;
        --ad-divider: rgba(0, 0, 0, 0.08);
        --ad-divider-gold: rgba(37, 110, 151, 0.38);
        --ad-cyan: #256E97;
        --ad-cyan-contrast: #FFFFFF;
        --ad-navy: #184862;
        --ad-shadow: rgba(0, 0, 0, 0.10);

        color-scheme: light;
    }
}

:root[data-theme="light"] {
    --ad-bg: #F5FAFC;
    --ad-surface: #FFFFFF;
    --ad-surface-hi: #EAF4F8;
    --ad-text: #181C1D;
    --ad-text-2: #42494B;
    --ad-mute: #676F71;
    --ad-divider: rgba(0, 0, 0, 0.08);
    --ad-divider-gold: rgba(37, 110, 151, 0.38);
    --ad-cyan: #256E97;
    --ad-cyan-contrast: #FFFFFF;
    --ad-navy: #184862;
    --ad-shadow: rgba(0, 0, 0, 0.10);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --ad-bg: #121517;
    --ad-surface: #1A1E20;
    --ad-surface-hi: #222729;
    --ad-text: #E5E7E8;
    --ad-text-2: #B5BCBE;
    --ad-mute: #868E90;
    --ad-divider: rgba(255, 255, 255, 0.08);
    --ad-divider-gold: rgba(255, 255, 255, 0.22);
    --ad-cyan: #81ABC3;
    --ad-cyan-contrast: #08202B;
    --ad-navy: #81ABC3;
    --ad-shadow: rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
    /* L'en-tête collant recouvrirait le titre de la section visée sans cette marge. */
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    background: var(--ad-bg);
    color: var(--ad-text);
    font-family: var(--ad-font-ui);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

a {
    color: var(--ad-cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

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

/* Le focus au clavier doit rester visible partout. Deux règles distinctes et non
   une liste de sélecteurs : `:focus-visible` n'existe qu'à partir de Chrome 86, et
   un sélecteur inconnu invalide toute la liste qui le contient. */
a:focus,
button:focus {
    outline: 2px solid var(--ad-cyan);
    outline-offset: 3px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--ad-cyan);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 40;
    padding: 12px 20px;
    border-radius: 0 0 12px 0;
    background: var(--ad-cyan);
    color: var(--ad-cyan-contrast);
    font-size: 0.78rem;
}

.skip-link:focus {
    left: 0;
    text-decoration: none;
}

/* ── Rôles de texte (design system) ──────────────────────────────────── */
.az-heading {
    font-family: var(--ad-font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ad-navy);
}

.little-gold {
    display: block;
    font-family: var(--ad-font-display);
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ad-cyan);
}

.az-body {
    display: block;
    margin: 0 0 10px;
    font-family: var(--ad-font-body);
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--ad-text);
}

.az-body--muted {
    color: var(--ad-text-2);
}

.az-note {
    display: block;
    margin: 0;
    font-family: var(--ad-font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--ad-text-2);
}

.az-ui-label {
    font-family: var(--ad-font-ui);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--ad-bg);
    border-bottom: 1px solid var(--ad-divider);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.brand {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    color: var(--ad-text);
}

.brand:hover {
    text-decoration: none;
}

.brand__mark {
    display: block;
    width: 40px;
    height: 40px;
}

.brand__name {
    font-family: var(--ad-font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.brand__accent {
    color: var(--ad-cyan);
}

.nav {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    white-space: nowrap;
}

.nav__link {
    font-size: 0.78rem;
    color: var(--ad-text-2);
}

.nav__link:hover {
    color: var(--ad-cyan);
    text-decoration: none;
}

.theme-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--ad-divider);
    border-radius: var(--radius-pill);
    background: var(--ad-surface-hi);
    color: var(--ad-text-2);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--ad-divider-gold);
    color: var(--ad-cyan);
}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
}

.btn:hover {
    text-decoration: none;
}

.btn--sm {
    height: 46px;
    padding: 0 22px;
}

.btn--solid {
    background: var(--ad-cyan);
    color: var(--ad-cyan-contrast);
}

.btn--solid:hover {
    filter: brightness(1.08);
}

.btn--outline {
    border: 1px solid var(--ad-divider-gold);
    color: var(--ad-cyan);
}

.btn--outline:hover {
    background: var(--ad-surface-hi);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 32px;
}

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

/* ── Héros ───────────────────────────────────────────────────────────── */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: center;
    padding: 88px 0 68px;
}

.hero__name {
    margin: 12px 0 18px;
    font-family: var(--ad-font-display);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--ad-text);
}

.hero .little-gold {
    font-size: 1.05rem;
}

.hero__intro {
    max-width: 56ch;
    font-size: 1.2rem;
}

.hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__logo img {
    width: 100%;
    max-width: 300px;
    height: auto;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.28));
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.pill {
    padding: 9px 16px;
    border: 1px solid var(--ad-divider);
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    color: var(--ad-text-2);
}

/* ── Bande de chiffres ───────────────────────────────────────────────
   Les filets viennent du `gap` posé sur un fond sombre, et non de bordures :
   c'est ce qui donne une grille d'un pixel sans doubler les traits aux
   jonctions, quel que soit le nombre de colonnes rendues. */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1px;
    overflow: hidden;
    background: var(--ad-divider);
    border: 1px solid var(--ad-divider);
    border-radius: var(--radius-card);
}

.stat {
    padding: 26px 24px;
    background: var(--ad-surface);
}

.stat__value {
    display: block;
    font-family: var(--ad-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ad-navy);
}

.stat__value--tight {
    white-space: nowrap;
}

.stat .az-note {
    margin-top: 6px;
}

/* ── Sections ────────────────────────────────────────────────────────── */
.section {
    padding-top: 96px;
}

.section--contact {
    padding-bottom: 110px;
}

.section__title {
    margin: 8px 0 32px;
    font-size: 2rem;
}

/* ── Parcours ────────────────────────────────────────────────────────── */
.timeline {
    display: flex;
    flex-direction: column;
}

.entry {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 34px;
    align-items: baseline;
    padding: 26px 0;
    border-top: 1px solid var(--ad-divider);
}

.timeline .entry:last-child {
    border-bottom: 1px solid var(--ad-divider);
}

.entry--plain {
    margin-top: 34px;
    border-top: 0;
}

.entry__date {
    display: block;
    font-size: 0.78rem;
    color: var(--ad-cyan);
}

.entry__date--mute {
    color: var(--ad-mute);
}

.entry__org {
    margin-top: 4px;
    font-size: 0.85rem;
}

.tag {
    display: inline-block;
    margin-top: 8px;
    padding: 5px 10px;
    border: 1px solid var(--ad-divider-gold);
    border-radius: var(--radius-pill);
    background: var(--ad-surface-hi);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    color: var(--ad-cyan);
}

.entry__title {
    margin: 0 0 8px;
    font-family: var(--ad-font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ad-text);
}

.entry__what .az-body {
    max-width: 70ch;
    margin: 0;
}

.entry--plain .az-body {
    margin-bottom: 4px;
}

/* ── Applications ────────────────────────────────────────────────────── */
.app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 34px;
    border: 1px solid var(--ad-surface-hi);
    border-radius: var(--radius-card);
    background: var(--ad-surface);
}

.app + .app {
    margin-top: 64px;
}

.app__head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app__icon {
    width: 60px;
    height: 60px;
    border: 1px solid var(--ad-divider);
    border-radius: 15px;
    background: #FFFFFF;
}

.app__name {
    margin: 0;
    font-family: var(--ad-font-display);
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ad-navy);
}

.app__meta {
    margin: 4px 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--ad-mute);
}

.app__rating {
    white-space: nowrap;
}

.app__star {
    color: var(--ad-cyan);
}

.lede {
    max-width: 44ch;
    margin: 24px 0 12px;
    font-family: var(--ad-font-body);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.45;
    color: var(--ad-cyan);
}

.points {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Le tiret cadratin est décoratif : posé en `::before` plutôt qu'en balise, il
   ne se retrouve pas lu par un lecteur d'écran devant chaque ligne. */
.points li {
    display: flex;
    gap: 12px;
}

.points li::before {
    content: "\2014";
    flex: 0 0 auto;
    color: var(--ad-cyan);
}

.badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

.badge {
    display: flex;
    align-items: center;
}

.badge:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* Les deux applications ne sont pas au même point : les liens de « Ma liste de
   courses » n'existeront qu'à sa publication. Un badge éteint dit cela mieux
   qu'un lien qui ne mène nulle part. */
.badge--soon {
    opacity: 0.5;
}

/* La même pastille que « En parallèle » dans le parcours : les badges éteints
   disent où, elle dit quand. Sa marge haute vient de son usage dans la frise, où
   elle se pose sous une date ; ici elle s'aligne sur les badges. */
.badges .tag {
    margin-top: 0;
}

/* Les visuels officiels des boutiques, tels que Google et Apple les fournissent.
   La marge négative rattrape la zone de protection incluse dans l'image Google,
   sans quoi le badge paraît plus petit que celui d'Apple. */
.badge__google {
    height: 64px;
    width: auto;
    margin: -9px -10px;
}

.badge__apple {
    height: 46px;
    width: auto;
}

/* Le badge Apple existe en noir et en blanc : le thème décide, en CSS, pour que
   le bon visuel soit là dès le premier rendu et même sans JavaScript. */
.badge__apple--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge__apple--light {
        display: none;
    }

    :root:not([data-theme="light"]) .badge__apple--dark {
        display: block;
    }
}

:root[data-theme="dark"] .badge__apple--light {
    display: none;
}

:root[data-theme="dark"] .badge__apple--dark {
    display: block;
}

:root[data-theme="light"] .badge__apple--light {
    display: block;
}

:root[data-theme="light"] .badge__apple--dark {
    display: none;
}

.shots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.shots figure {
    margin: 0;
}

.shots img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ad-divider);
    border-radius: var(--radius-shot);
}

.shots figcaption {
    margin-top: 10px;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: var(--ad-mute);
}

/* ── Savoir-faire ────────────────────────────────────────────────────── */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* Sept cartes dans une grille qui en range trois ou deux par ligne : la dernière
   se retrouve seule, avec un trou à sa droite. Elle prend donc la ligne entière.
   Lui donner le double de largeur ne suffirait pas — à trois colonnes, le trou
   reste, simplement plus étroit ; et la centrer obligerait à recopier le calcul
   de la grille dans une `max-width`, qui se décalerait au premier changement de
   gouttière.
   Cela tombe juste par ailleurs : c'est la seule carte qui énumère un catalogue
   plutôt qu'un savoir-faire, et ses neuf puces tiennent alors sur une ligne ou
   deux au lieu de six.

   Le seuil vaut la largeur à laquelle la grille passe à deux colonnes :
   2 × 300 + 20 de gouttière = 620, plus 2 × 20 de marge de page. En dessous, une
   seule colonne, et la règle ne doit pas s'appliquer — un `span` de trop y
   créerait une colonne implicite et ferait déborder la page. */
@media (min-width: 660px) {
    .cards > .card:last-child {
        grid-column: 1 / -1;
    }

}

/* En pleine largeur, les puces et la phrase se lisent côte à côte plutôt que l'une
   sous l'autre, sans quoi la carte s'étire en bandeau presque vide. Seulement à
   partir de trois colonnes : plus tôt, la colonne de droite serait si étroite que
   la phrase y tomberait en huit lignes. */
@media (min-width: 900px) {
    .card--quiet {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 8px 28px;
        align-items: start;
    }

    .card--quiet .card__title {
        grid-column: 1 / -1;
    }

    .card--quiet .az-note {
        margin-top: 0;
    }
}

.card {
    padding: 28px;
    border: 1px solid var(--ad-surface-hi);
    border-radius: var(--radius-card);
    background: var(--ad-surface);
}

/* La carte du catalogue prend déjà toute la largeur : elle n'a pas besoin, en plus,
   d'un fond qui la fasse avancer. Fond transparent — donc celui de la page — et un
   simple filet : elle est en creux là où les autres sont posées dessus, et la taille
   suffit à la distinguer. Le design system la donnait « inversée », c'est-à-dire plus
   claire en sombre ; à pleine largeur, cela la mettait deux fois en avant. */
.card--quiet {
    border-color: var(--ad-divider);
    background: transparent;
}

.card__title {
    margin: 0 0 14px;
    font-family: var(--ad-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ad-navy);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: var(--ad-surface-hi);
    font-size: 0.72rem;
    color: var(--ad-text-2);
}

.card--quiet .chip {
    background: var(--ad-surface);
}

.card .az-note {
    margin-top: 16px;
}

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact {
    padding: 52px 40px;
    border: 1px solid var(--ad-surface-hi);
    border-radius: 28px;
    background: var(--ad-surface);
    box-shadow: 0 8px 24px var(--ad-shadow);
    text-align: center;
}

.contact__title {
    margin: 10px 0 14px;
    font-family: var(--ad-font-display);
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--ad-text);
}

.contact__text {
    max-width: 52ch;
    margin: 0 auto 30px;
}

/* ── Pied de page ────────────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--ad-divider);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.site-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-footer__brand img {
    display: block;
    width: 28px;
    height: 28px;
}

/* ── Apparition au défilement ────────────────────────────────────────
   L'état masqué est posé par `site.js` en styles en ligne, jamais ici : sans
   JavaScript — ou si le script tombe —, la page reste entièrement lisible au
   lieu de rester blanche. */
.is-revealing {
    opacity: 0;
    transform: translateY(70px) scale(0.965);
    filter: blur(7px);
}

.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ── Écrans étroits ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
    :root {
        --gutter: 20px;
    }

    .hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        padding: 56px 0 48px;
    }

    .hero__logo {
        order: -1;
        justify-content: flex-start;
    }

    .hero__logo img {
        max-width: 140px;
    }

    .app {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 24px;
    }

    .section {
        padding-top: 64px;
    }
}

@media (max-width: 800px) {
    /* Quatre ancres vers une page qui se parcourt au pouce : les liens partent,
       le CV et le thème restent. Le lien d'évitement, lui, ne dépend pas d'eux. */
    .nav__link {
        display: none;
    }
}

@media (max-width: 700px) {
    .entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .entry__when {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .entry__org,
    .tag {
        margin-top: 0;
    }

    .contact {
        padding: 36px 20px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 520px) {
    /* Le mot-symbole part, le logo reste : sous cette largeur, « Azimuth Dev » en
       toutes lettres poussait le bouton du CV hors de l'écran et faisait défiler
       la page en travers. */
    .brand__name {
        display: none;
    }

    .site-header__inner {
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .btn {
        width: 100%;
    }

    /* Sauf dans l'en-tête, où deux boutons pleine largeur n'auraient aucun sens. */
    .site-header .btn {
        width: auto;
    }

    .app__head {
        flex-wrap: wrap;
    }
}

/* ── Mouvement réduit ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .is-revealing,
    .is-revealed {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ── Impression ──────────────────────────────────────────────────────
   La page est un CV : elle doit sortir sur papier proprement. Fond blanc,
   une colonne, et tout ce qui ne s'imprime pas — navigation, badges de
   boutique, captures d'écran — est retiré plutôt que réduit. */
@media print {
    :root {
        --ad-bg: #FFFFFF;
        --ad-surface: #FFFFFF;
        --ad-surface-hi: #FFFFFF;
        --ad-text: #000000;
        --ad-text-2: #1A1A1A;
        --ad-mute: #444444;
        --ad-divider: rgba(0, 0, 0, 0.25);
        --ad-divider-gold: rgba(0, 0, 0, 0.25);
        --ad-cyan: #17415B;
        --ad-navy: #17415B;
        --ad-shadow: transparent;
    }

    .site-header,
    .skip-link,
    .badges,
    .shots,
    .hero__logo,
    .actions {
        display: none;
    }

    .app,
    .card,
    .contact {
        border-color: var(--ad-divider);
        box-shadow: none;
    }

    .app,
    .entry,
    .card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .section {
        padding-top: 24px;
    }

    .section--contact {
        padding-bottom: 0;
    }

    .hero {
        display: block;
        padding: 0 0 12px;
    }

    .app {
        display: block;
    }

    .contact::after {
        content: "matthieu.fereyre@gmail.com — https://azimuthdev.net/";
        display: block;
        font-family: var(--ad-font-body);
        font-size: 0.95rem;
    }
}