/* style.css – Portfolio. Variables, base mobile-first, puis overrides par breakpoint. */

/* ============================================================
   VARIABLES
   ============================================================ */
:root {
    /* Le site est pensé en thème clair uniquement : on le déclare pour que les
       navigateurs en mode sombre n'inversent pas d'eux-mêmes scrollbars et contrôles. */
    color-scheme: light;

    /* Couleurs */
    --color-bg:           #ffffff;
    --color-surface:      #ffffff;
    --color-surface-alt:  #F5F5F7;
    --color-border:       #E5E5E5;
    --color-border-alt:   #E2E2E2;
    --color-primary:      #0071E3;
    --color-primary-hover:#0063C7;
    --color-text-main:    #1D1D1F;
    --color-text-muted:   #6E6E73;
    --color-text-subtle:  #76767C; /* 4.51:1 sur blanc — conforme WCAG AA */
    --color-text-badge:   #6E6E73;
    --color-bg-button:    #F3F7FC;
    --color-bg-hover:     #DEEDFF;
    --color-bg-subtle:    #F5F5F7;
    --color-bg-hover-card:#F5F5F7;
    --color-image-placeholder: #c8c8c8;
    /* Effet verre (nav, boutons flottants du carrousel) */
    --color-glass:        rgba(255, 255, 255, 0.72);
    --color-glass-strong: rgba(255, 255, 255, 0.85);
    --color-glass-solid:  #ffffff;
    --color-border-subtle: rgba(0, 0, 0, 0.06);
    /* Ombres & rayons */
    --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-nav:         0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-portrait:    0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.1);
    --radius-card:        22px;
    --radius-pill:        980px;
    /* Typo */
    --font-base:          'Manrope', sans-serif;
    /* Rythme vertical du corps des pages projet : une seule valeur par
       palier, au lieu de sommes de paddings qui variaient d'une page a l'autre. */
    --espace-section:     40px;

    /* Hauteur occupee par la barre de navigation et les marges du hero.
       Retranchee de la hauteur de fenetre, elle donne au hero des pages
       projet exactement un ecran, ni plus ni moins. Elle change par palier
       parce que les marges de la barre changent elles aussi. */
    --hero-reste:         133px;
    /* Transitions */
    --transition-fast:    0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:    0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    font-family: var(--font-base);
    line-height: 1.5;
}

body {
    margin: 0;
    font-family: var(--font-base);
    background-color: var(--color-bg);
    color: var(--color-text-main);
    line-height: 1.5;
}

button, input, select, textarea, a { font-family: var(--font-base); }

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.fade-in-up {
    opacity: 0;
    transform: translateY(16px);
}
.fade-in-up.is-visible {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.fade-in-up--delay-1.is-visible { animation-delay: 0.08s; }
.fade-in-up--delay-2.is-visible { animation-delay: 0.16s; }
.fade-in-up--delay-3.is-visible { animation-delay: 0.24s; }
.fade-in-up--delay-4.is-visible { animation-delay: 0.32s; }

/* Respect de « réduire les animations » : on neutralise animations, transitions
   et déplacements au survol, tout en gardant les contenus visibles et lisibles. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in-up { opacity: 1; transform: none; animation: none !important; }

    /* Aucun déplacement / agrandissement au survol ou au focus */
    .projects-content:hover,
    .projects-content:focus-visible,
    .projects-content:hover .work-content_image,
    .projects-content:focus-visible .work-content_image,
    .project-gallery__nav:hover,
    .gallery-lightbox__close:hover,
    .project-gallery__viewport.is-zoomable:hover .project-gallery__image.is-active {
        transform: none;
    }

    .gallery-lightbox__nav:hover { transform: translateY(-50%); }
    .button__contact             { transition: none; }
    .gallery-lightbox__image     { transform: none; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardFadeInUp {
    from { opacity: 0; transform: translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Prévention débordement sur petits écrans */
.body-cards, .body-users, .body-card, .body-user-card { min-width: 0; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
    position: sticky;
    top: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 6px;
    margin-top: 24px;
    margin-bottom: 24px;
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100% - 48px);
    transition: max-width var(--transition-base), padding var(--transition-base),
                margin-top var(--transition-base), box-shadow var(--transition-base);
    background-color: var(--color-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-nav);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border-subtle);
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Barre raccourcie au scroll (accueil uniquement).
   La pilule se resserre sur sa longueur ; hauteur et contenu inchangés.
   Sélecteur à deux classes : .nav seul est redéclaré plus bas et gagnerait.
   ------------------------------------------------------------ */
.nav.nav--reduced {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

@media (min-width: 744px) {
    .nav.nav--reduced { max-width: calc(100% - 180px); }
}

@media (min-width: 992px) {
    .nav.nav--reduced { max-width: calc(100% - 260px); }
}

@media (min-width: 1200px) {
    .nav.nav--reduced { max-width: calc(100% - 380px); }
}

@media (min-width: 1440px) {
    .nav.nav--reduced { max-width: 1000px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav { transition: none; }
}

.nav__logo {
    width: 28px;
    display: block;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
}

.nav__logo img { border-radius: 50%; }

/* Centrés dans la nav indépendamment de la largeur des éléments latéraux
   (logo/Retour à gauche, bouton contact à droite) */
.nav__element,
.nav__toc {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
    z-index: 1;
}

/* Le menu est un repere de navigation. L'enveloppe <nav> reprend a l'identique
   les regles d'affichage de la liste, pour ne rien changer a la mise en page. */
.nav__principale {
    display: none;
}

.nav__element {
    display: none;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
}

.apropos, .experiences, .projets {
    color: var(--color-text-main);
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    margin-right: 36px;
    padding: 6px 0 2px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-base);
}
.apropos:hover, .experiences:hover, .projets:hover,
.apropos:focus-visible, .experiences:focus-visible, .projets:focus-visible,
.apropos.is-active, .experiences.is-active, .projets.is-active {
    border-bottom-color: var(--color-primary);
}

.button__contact {
    display: flex;
    align-items: center;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background-color var(--transition-fast);
}

.button__contact:hover {
    background-color: var(--color-primary-hover);
}

/* Focus clavier : un contour bleu sur un fond bleu ne se voit pas. On intercale
   un anneau blanc, ce qui donne 3:1 contre le bouton comme contre la page.
   box-shadow suit le rayon en pilule, contrairement a outline + border-radius. */
.button__contact:focus-visible {
    outline: 2px solid transparent;   /* garde un repere en contraste force */
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-bg),
                0 0 0 4px var(--color-primary);
}

@media (forced-colors: active) {
    .button__contact:focus-visible { outline-color: Highlight; }
}

.button-icon {
    width: 18px;
    color: #fff;;
    display: inline-block;
}

.button-libelle {
    display: none;
    margin-left: 8px;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem;
    text-align: center;
}

/* Page 404 : elle tient dans la fenetre, sans defilement. Le .hero portait deja
   flex:1 mais le body n'etait pas un conteneur flex, donc rien ne l'etirait.
   svh plutot que vh : sur mobile, vh ignore la barre d'adresse et deborde. */
.page-404 {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

.page-404 .hero {
    flex: 1;
    padding: 24px;
}

/* .hero__text porte flex:1 et s'etire donc sur toute la hauteur du hero :
   sans ce centrage, le message se tasserait en haut de la page. */
.page-404 .hero__text {
    justify-content: center;
}

/* Fenetre basse (navigateur redimensionne, paysage sur telephone) : on resserre
   le rythme vertical plutot que de laisser la page se mettre a defiler. */
@media (max-height: 560px) {
    .page-404 .nav              { margin-top: 8px; margin-bottom: 8px; }
    .page-404 .hero             { padding: 8px 24px; }
    .page-404 .hero-title__text { margin-bottom: 8px; }
    .page-404 .hero__subtitle   { margin-bottom: 12px; }
    .page-404 .container-footer { padding: 10px 24px; }
}

.hero__text {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-titre {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.hero-title__text {
    margin: 0 0 20px;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.28em;
    color: var(--color-text-main);
}

/* Le nom se met au point lettre par lettre : chacune arrive floue et decalee,
   puis se fixe. Le mot reste une unite pour que le retour a la ligne coupe
   entre les mots et jamais au milieu d'un prenom. */
.hero-title__mot {
    display: inline-block;
    white-space: nowrap;
}

.hero-title__lettre {
    display: inline-block;
    /* --i : rang de la lettre dans le nom entier, pose dans le HTML. Le fond
       de cascade (28 ms) reste court pour que les 17 lettres tiennent en ~1,2 s. */
    animation: heroLettreNette 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both;
    animation-delay: calc(0.62s + var(--i) * 0.028s);
}

/* Le hero lui-meme apparait en fondu (fade-in-up--delay-2 : 0,16 s de retard
   + 0,5 s d'animation, soit ~0,66 s). Les lettres doivent demarrer apres, sinon
   elles s'animent alors que le bloc est encore transparent — donc invisibles. */
@keyframes heroLettreNette {
    from { opacity: 0; filter: blur(10px); transform: translateY(14px); }
    to   { opacity: 1; filter: blur(0);    transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-title__lettre {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
    }
}

.hero-title__textTwo {
    color: var(--color-text-main);
}

.hero-title__subtitle {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.hero__subtitle {
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-text-muted);
    /* ~70 caracteres par ligne, comme la prose des pages projet. */
    max-width: 580px;
    margin: 0 auto 40px;
    text-align: center;
}

.hero__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
}

.button__download {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid transparent;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    color: var(--color-primary);
    background-color: var(--color-surface);
    width: max-content;
    transition: background-color var(--transition-base),
                border-color var(--transition-base);
}
/* Bordure au survol : le contour reprend la couleur du libelle. Le bouton
   portait deja 1px transparent, la mise en page ne bouge donc pas d'un pixel. */
.button__download:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-primary);
}

.button__download:focus-visible { background-color: var(--color-bg-hover); }
.button__download .button-icon { width: 16px; }

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    margin-top: 40px;
    text-decoration: none;
    cursor: pointer;
}

.scroll-indicator span {
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-text-main);
    border-bottom: 2px solid var(--color-text-main);
    transform: rotate(45deg);
    opacity: 0;
    background: transparent;
    animation: scrollDown 1.6s infinite ease-in-out;
}

@keyframes scrollDown {
    0%   { opacity: 0; transform: rotate(45deg) translate(0, 0); }
    30%  { opacity: 1; }
    60%  { opacity: 1; transform: rotate(45deg) translate(10px, 10px); }
    100% { opacity: 0; transform: rotate(45deg) translate(18px, 18px); }
}

/* ============================================================
   À PROPOS
   ============================================================ */
.about {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 48px;
    align-items: center;
    flex-wrap: wrap;
    background-color: var(--color-surface);
}

.about__image {
    width: 100%;
    flex: 1;
}

.about__img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid var(--color-surface);
    margin-bottom: 32px;
    object-fit: cover;
    object-position: 50% 20%;
    box-shadow: var(--shadow-portrait);
}

.about__libelle {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 24px;
}

.about-libelle_icon {
    width: 38px;
    margin-right: 12px;
}

.about__title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-text-main);
}

.about-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about__text {
    font-weight: 400;
    font-size: 32px;
    line-height: 1.5;
    flex: 2;
    color: var(--color-text-main);
}

.about__text-logiciels {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.about__text-logiciels-titre {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.about-text__text {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-main);
    margin-bottom: 24px;
}

.about-badge {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Competences et logiciels partagent la meme colonne : la mise en deux
   colonnes de la section A propos (>=992px) reste inchangee. */
.about__tags {
    display: flex;
    flex-direction: column;
    gap: 28px;
    flex: 1;
}

/* Badge sans icone : meme pilule, padding equilibre a gauche et a droite. */
.badge--texte {
    padding: 5px 12px;
}

.badge {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 5px 10px;
    background-color: transparent;
    width: fit-content;
}

.badge_icon { width: 14px; }

.badge_libelle {
    font-weight: 500;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-main);
}

/* ============================================================
   EXPÉRIENCES & FORMATIONS
   ============================================================ */
.container-history {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background-color: var(--color-surface);
    gap: 32px;
}

.container-history_exp {
    width: 100%;
}

.exp-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.exp-title_icon { width: 38px; }

.exp-title_libelle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-text-main);
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

.timeline-column_label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 16px;
}

@media (min-width: 744px) {
    .timeline-columns { grid-template-columns: 1fr 1fr; gap: 40px; }
}

.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 0px;
    width: 2px;
    background-color: var(--color-border);
    border-radius: 2px;
}

.timeline-item {
    position: relative;
    padding-left: 50px;
}

.timeline-dot {
    position: absolute;
    left: 12px;
    top: 18px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-bg);
    border: 3px solid var(--color-bg);
    outline: 1.5px solid var(--color-border-alt);
    z-index: 1;
    transition: outline-color var(--transition-fast), background-color var(--transition-fast);
}

.timeline-item.is-expanded .timeline-dot {
    background-color: var(--color-primary);
    outline-color: var(--color-primary);
}

.timeline-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 20px;
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.timeline-card:hover,
.timeline-card:focus-within {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-card);
}

.timeline-item.is-expanded .timeline-card {
    border-color: var(--color-primary);
}

.timeline-card_head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.timeline-card_titlerow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.timeline-card_toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -10px -10px -10px 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--color-text-muted);
}
.timeline-card_toggle:hover,
.timeline-card_toggle:focus-visible { background: var(--color-surface-alt); }

.timeline-card_toggle svg {
    transition: transform var(--transition-fast);
}

.timeline-item.is-expanded .timeline-card_toggle svg {
    transform: rotate(180deg);
}

/* Repli/dépli animé sur la hauteur réelle du contenu (grid-template-rows 1fr → 0fr),
   au lieu d'un max-height arbitraire qui rendait la fermeture molle. */
.timeline-card_collapse {
    display: grid;
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
    transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
}

.timeline-card_collapse > .timeline-card_list {
    overflow: hidden;
    min-height: 0;
}

.timeline-item:not(.is-expanded) .timeline-card_collapse {
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
}

.timeline-card_meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-card_title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text-main);
}

.timeline-card_company {
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.timeline-card_date {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--color-border-alt);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
    background-color: transparent;
    white-space: nowrap;
    height: max-content;
    flex-shrink: 0;
}

.headbadge_ellipse {
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.timeline-card_list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-card_list li {
    position: relative;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-main);
    padding-left: 14px;
}

.timeline-card_list li::before {
    content: '•';
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 500;
    color: var(--color-primary);
}

/* ============================================================
   PROJETS
   ============================================================ */
.container-projects {
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
}

.container-work__title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    

}

.title-icon { width: 38px; }

.title-icon_libelle {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--color-text-main);
}

.projects {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.projects-content {
    position: relative;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: 0;
    overflow: hidden;
    flex-grow: 1;
    width: 100%;
    text-decoration: none;
    opacity: 0;
    animation: cardFadeInUp 0.7s ease-out forwards;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.projects-content:nth-child(1) { animation-delay: 0.10s; }
.projects-content:nth-child(2) { animation-delay: 0.18s; }
.projects-content:nth-child(3) { animation-delay: 0.26s; }
.projects-content:nth-child(4) { animation-delay: 0.34s; }
.projects-content:nth-child(5) { animation-delay: 0.42s; }
.projects-content:nth-child(6) { animation-delay: 0.50s; }
.projects-content:hover,
.projects-content:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.work-content_image {
    background-color: var(--color-image-placeholder);
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.projects-content:hover .work-content_image,
.projects-content:focus-visible .work-content_image { transform: scale(1.04); }

.work-content_title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text-main);
    text-decoration: none;
    margin: 24px 24px 8px;
}

.work-content_desc {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0 24px 14px;
}

.work-content_badge {
    display: inline-flex;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-badge);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    width: fit-content;
    text-decoration: none;
}

/* Annonce le contenu qui suit : ces cartes ouvrent une étude de cas détaillée,
   rien ne le signalait jusque-là. */
/* Pied de carte : catégorie à gauche, appel à l'action poussé à droite. */
.work-content_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 24px 24px;
}

.work-content_cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.work-content_cta svg {
    transition: transform var(--transition-base);
}

.projects-content:hover .work-content_cta svg,
.projects-content:focus-visible .work-content_cta svg {
    transform: translateX(3px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.container-footer {
    display: flex;
    flex-direction: row;
    padding: 12px 24px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.footer-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ============================================================
   TEMPLATE PRODUIT — BOUTONS & HERO
   ============================================================ */
.button-back {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.5;
    border: 1px solid transparent;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    background-color: var(--color-surface);
    color: var(--color-primary);
    width: max-content;
    transition: background-color var(--transition-base), border-color var(--transition-base);
}
.button-back:hover {
    background-color: var(--color-bg-hover);
    border-color: var(--color-primary);
}

.button-back:focus-visible { background-color: var(--color-bg-hover); }

.logiciels-badge {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-produit {
    display: flex;
    margin: 24px;
    gap: 48px;
    flex-wrap: wrap;
    align-items: center;
    /* svh plutot que vh : sur mobile, vh ignore la barre d'adresse et
       pousserait la section suivante hors de vue au premier chargement. */
    min-height: calc(100vh - var(--hero-reste));
    min-height: calc(100svh - var(--hero-reste));
}

.hero-produit-text { flex: 1; }

/* .hero-produit_titleText et .logiciels-titre : stylées uniquement via
   .hero-produit--figma (seule variante utilisée sur le site, cf. plus bas) */

.container-image {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    height: 500px;
    width: 500px;
    display: none;
}

.hero-produit_image {
    height: auto;
    display: flex;
}

/* ============================================================
   TEMPLATE PRODUIT — BODY SECTIONS
   ============================================================ */
.container-body {
    display: flex;
    flex-direction: column;
    gap: var(--espace-section);
    padding-top: var(--espace-section);
    /* 550px de texte a 17px font environ 70 caracteres par ligne, au coeur
       de la fourchette recommandee. Avec 80px de marge de chaque cote
       au-dela de 1200px, cela fait 710px de conteneur. */
    max-width: 710px;
    margin-inline: auto;
}

.container-body_section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 0;
    margin: 0 24px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--color-text-main);
    max-width: 100%;
}

.container-body_item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.container-content {
    display: flex;
    flex-direction: row;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.5;
    color: var(--color-text-main);
    margin-bottom: 16px;
}

/* .item-titre et .item-content : stylées uniquement via .hero-produit--figma */

/* Longueur de ligne : la recommandation typographique est de 45 a 75
   caracteres. En Manrope, 1ch vaut environ 0,65 caractere moyen — 52ch
   place les lignes autour de 66 caracteres, a toutes les tailles de police. */
/* Le texte remplit son conteneur : c'est donc la largeur du conteneur qui
   fixe la longueur de ligne, et la taille de police qui determine combien
   de caracteres y tiennent. 17px permet une colonne plus large qu'a 14px
   pour un meme nombre de caracteres. */
.container-body p,
.container-body li {
    max-width: none;
    /* Sur petit ecran la colonne est etroite : 17px y ferait tomber la ligne
       sous 40 caracteres. 15px la ramene dans la fourchette. */
    font-size: 15px;
    line-height: 1.6;
}

@media (min-width: 744px) {
    .container-body p,
    .container-body li {
        font-size: 17px;
    }
}

/* Listes reelles : le tiret vit dans ::before et sort du flux, donc les lignes
   qui passent a la ligne s'alignent sous le texte et non sous le tiret. */
.container-body ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.container-body li {
    position: relative;
    padding-left: 16px;
}

.container-body li::before {
    content: '\2013';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.item-text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
}

.container-body_section--overview .container-body_item {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}
.container-body_section--overview .item-text {
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}
.container-body_section--overview .item-text + .item-text { margin-top: 0; }

.body-intro {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

/* Grille de cartes problème */
.body-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
}

.body-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
}

.body-card_eyebrow {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
}

.body-card_title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0 0 6px;
}

.body-card_content {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
}
.body-card_content p { margin: 0 0 8px; }
.body-card_content p:last-child { margin-bottom: 0; }

/* Utilisateurs cibles */
.body-users {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.body-user-card {
    flex: 1 1 0;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface);
}

.body-user-card_block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body-user-card_role {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0;
}

.body-user-card_desc {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

.body-user-card_subtitle {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

.body-user-card_list {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
}
.body-user-card_list p { margin: 0 0 8px; }
.body-user-card_list p:last-child { margin-bottom: 0; }

/* Démarche de design */
.body-demarche {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.body-demarche_block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.body-demarche_step {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0;
}

.body-demarche_content {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
}
.body-demarche_content p { margin: 0 0 12px; }
.body-demarche_content p:last-child { margin-bottom: 0; }

/* Résultats & apprentissages */
.body-resultats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.body-resultats_block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.body-resultats_step {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0;
}

.body-resultats_text {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

.body-resultats_list {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
}
.body-resultats_list { margin: 0; }

/* ============================================================
   HERO PRODUIT — VARIANTE FIGMA
   ============================================================ */
.hero-produit--figma {
    margin: 24px;
    gap: 24px;
    align-items: flex-start;
}

.hero-produit--figma .hero-produit-text {
    display: flex;
    flex-direction: column;
    gap: 38px;
    flex: 1 0 0;
    min-width: 0;
}

.hero-produit--figma .hero-produit_titleText {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
}

.hero-produit--figma .container-image {
    display: none;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.hero-produit--figma .container-image .hero-produit_image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

.hero-produit_meta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.hero-produit--figma .container-content {
    display: flex;
    flex-direction: row;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    font-size: unset;
    line-height: 1.5;
    margin-bottom: 0;
}

.hero-produit--figma .container-content_item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hero-produit--figma .item-titre {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0;
    margin-bottom: 0;
}

.hero-produit--figma .item-content {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

.hero-produit--figma .logiciels-titre {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}

.hero-produit--figma .container-logiciels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero-produit--figma .logiciels-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ============================================================
   SOMMAIRE FUSIONNÉ DANS LA NAV (pages projet)
   ============================================================ */
.nav__toc {
    display: none;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.nav__toc::-webkit-scrollbar { display: none; }

@keyframes navTocIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (min-width: 744px) {
    .nav--toc-visible { flex-wrap: nowrap; }
    .nav--toc-visible .nav__toc {
        display: flex;
        animation: navTocIn var(--transition-base);
    }
}

.project-nav_thumb {
    flex-shrink: 0;
    width: 56px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    background-color: var(--color-surface-alt);
    display: none;
}

/* ============================================================
   BREAKPOINT 744px — Tablette
   ============================================================ */
@media (min-width: 744px) {

    /* Nav */
    .nav              { margin-top: 48px; margin-bottom: 48px; max-width: calc(100% - 64px); }
    .nav__logo        { width: 30px; margin-right: 0; }
    .nav__principale  { display: flex; }
    .nav__element     { display: flex; }
    .button__contact  { font-size: 16px; line-height: 1.5; }
    .button-libelle   { display: inline; }
    .project-nav_thumb { display: block; }

    /* Cartes Problème & Contexte */


    /* Hero */
    .hero                  { padding: 100px 0; }
    .hero-title__text      { font-size: 64px; line-height: 1.05; }
    .hero-title__subtitle  { font-size: 14px; line-height: 1.5; }
    .hero__subtitle        { font-size: 17px; line-height: 1.5; }

    /* À propos */
    .about                        { padding: 24px 32px; }
    .about__text-logiciels-titre  { font-size: 12px; }

    /* Expériences & Timeline */
    .container-history         { flex-direction: row; padding: 32px; }
    .exp-title                 { margin-bottom: 24px; }
    .timeline-card_company     { font-size: 13px; }

    /* Projets */
    .container-projects    { padding: 32px; }
    .title-icon_libelle    { font-size: 17px; line-height: 1.5; }
    .about__title          { font-size: 17px; line-height: 1.5; }
    .exp-title_libelle     { font-size: 17px; line-height: 1.5; }
    .projects-content      { width: 40%; }

    /* Footer */
    .container-footer  { padding: 24px 48px; }

    :root { --espace-section: 56px; --hero-reste: 182px; }

    /* Template produit */
    .hero-produit              { margin: 24px 48px; }
    .container-image           { flex: 1; display: none; }
    .container-body_section    { margin: 0 32px; }

    /* Variante Figma */
    .hero-produit--figma                        { margin: 24px 32px; gap: 32px; }
    .hero-produit--figma .hero-produit_titleText { font-size: 32px; }
    .hero-produit--figma .container-image        { display: flex; }
    .hero-produit--figma .item-titre             { font-size: 12px; }
    .hero-produit--figma .item-content           { font-size: 15px; line-height: 1.5; }
    .hero-produit--figma .logiciels-titre        { font-size: 12px; }
}

/* ============================================================
   BREAKPOINT 992px — Desktop intermédiaire
   ============================================================ */
@media (min-width: 992px) {

    /* Nav */
    .nav { padding: 8px; max-width: calc(100% - 96px); }
    .apropos, .experiences, .projets { font-size: 15px; }

    /* Cartes Problème & Contexte */


    /* À propos */
    .about        { padding: 48px; }
    .about-content { flex-direction: row; gap: 32px; }
    .about-text__text { flex: 1; }

    /* Expériences & Timeline / Projets */
    .container-history   { padding: 48px; }
    :root { --espace-section: 64px; --hero-reste: 194px; }

    .container-projects  { padding: 48px; }

    /* Template produit */
    .container-body_section { margin: 0 48px; }

    /* Textes body : pas d'escalade, on reste sur l'échelle de base */

    /* Variante Figma */
    .hero-produit--figma                         { margin: 32px 48px; gap: 38px; }
    .hero-produit--figma .container-image         { max-width: 500px; }
    .hero-produit--figma .item-titre              { font-size: 13px; }
    .hero-produit--figma .item-content            { font-size: 15px; line-height: 1.5; }
    .hero-produit--figma .logiciels-titre         { font-size: 13px; }
}

/* ============================================================
   BREAKPOINT 1200px — Desktop large
   ============================================================ */
@media (min-width: 1200px) {

    /* Nav */
    .nav              { margin-top: 80px; margin-bottom: 80px; padding: 10px; max-width: calc(100% - 160px); }
    .nav__logo        { width: 32px; }
    .button__contact  { font-size: 15px; line-height: 1.5; padding: 10px 18px; }
    .button-icon      { margin-right: 8px; }
    .button-libelle   { display: flex; }

    /* Hero */
    .hero-title__text { font-size: 76px; }

    /* À propos */
    .about                       { flex-direction: row; padding: 60px 80px; }
    .about__image                { display: flex; justify-content: center; }
    .about__title                { font-size: 18px; line-height: 1.5; }
    .about-text__text            { display: flex; flex-direction: row; }
    .about__text-logiciels-titre { font-size: 13px; }
    .badge_libelle               { font-size: 12px; line-height: 1.5; }

    /* Expériences & Timeline */
    .container-history         { padding: 60px 80px; }
    .exp-title                 { margin-bottom: 20px; }
    .exp-title_libelle         { font-size: 18px; line-height: 1.5; }
    .timeline-card_company     { font-size: 13px; }
    .timeline-card_date        { font-size: 12px; }
    .timeline-card_list li     { font-size: 14px; }

    /* Projets */
    .container-projects   { padding: 60px 80px; }
    .title-icon_libelle   { font-size: 18px; line-height: 1.5; }
    .projects             { gap: 24px; }
    .projects-content     { width: 30%; }

    /* Footer */
    .container-footer { padding: 24px 80px; }

    /* Template produit */
    .button-back           { padding: 13px 18px; line-height: 1.5; }
    .hero-produit          { margin: 60px 80px; }
    .container-image       { width: 100%; height: auto; max-width: 500px; display: flex; }
    .hero-produit_image    { border-radius: var(--radius-card); width: 100%; height: auto; }
    .container-body_section { margin: 0 80px; }

    :root { --espace-section: 80px; --hero-reste: 293px; }

    /* Variante Figma */
    .hero-produit--figma                         { margin: 60px 80px; gap: 38px; }
    .hero-produit--figma .hero-produit_titleText  { font-size: 32px; }
    .hero-produit--figma .item-titre              { font-size: 13px; }
    .hero-produit--figma .item-content            { font-size: 15px; }
    .hero-produit--figma .logiciels-titre         { font-size: 13px; }
}

/* ============================================================
   GALERIE PROJET (carousel)
   ============================================================ */
.project-gallery {
    margin: var(--espace-section) 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-gallery__frame {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-alt);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-gallery__viewport {
    position: relative;
    width: 100%;
    min-height: 280px;
}

.project-gallery__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: min(68vh, 680px);
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.4s ease, transform var(--transition-base);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.project-gallery__image.is-active {
    opacity: 1;
    pointer-events: auto;
}

.project-gallery__viewport.is-zoomable {
    cursor: zoom-in;
}

.project-gallery__viewport.is-zoomable:hover .project-gallery__image.is-active {
    transform: scale(1.015);
}

.project-gallery__viewport.is-zoomable:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
    border-radius: 8px;
}

.project-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--color-glass-strong);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    color: var(--color-text-main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}
.project-gallery__nav:hover { background: var(--color-glass-solid); transform: translateY(-50%) scale(1.06); }

.project-gallery__nav:focus-visible,
.project-gallery__thumb:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.project-gallery__nav svg    { width: 18px; height: 18px; }
.project-gallery__nav--prev  { left: 16px; }
.project-gallery__nav--next  { right: 16px; }

.project-gallery__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.project-gallery__thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
    flex: 1 1 auto;
    min-width: 0;
}

.project-gallery__counter {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
}

.project-gallery__thumb {
    flex: 0 0 100px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface-alt);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    aspect-ratio: 1.36 / 1;
}
.project-gallery__thumb:hover    { opacity: 0.85; }
.project-gallery__thumb.is-active {
    opacity: 1;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}
.project-gallery__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (min-width: 744px) {
    .project-gallery           { margin: var(--espace-section) 32px 48px; gap: 24px; }
    .project-gallery__viewport { min-height: 460px; }
}

@media (min-width: 992px) {
    .project-gallery           { margin: var(--espace-section) 48px 60px; }
    .project-gallery__viewport { min-height: 540px; }
}

@media (min-width: 1200px) {
    .project-gallery           { margin: var(--espace-section) 80px 60px; gap: 20px; }
    .project-gallery__viewport { min-height: 560px; }
}

@media (max-width: 480px) {
    .project-gallery           { margin: var(--espace-section) 24px 32px; }
    .project-gallery__frame    { min-height: 260px; padding: 16px; }
    .project-gallery__viewport { min-height: 220px; }
    .project-gallery__nav      { width: 34px; height: 34px; }
    .project-gallery__nav--prev { left: 12px; }
    .project-gallery__nav--next { right: 12px; }
    .project-gallery__thumb    { flex-basis: 112px; border-radius: 10px; }
}

/* Entre 1200 et 1440px, la barre prend 80px de marge en haut et en bas,
   contre 24px au-dela. Sur une fenetre basse (portable 1280x800), cela ne
   laisse plus un ecran entier au hero : on y resserre ses marges. */
@media (min-width: 1200px) and (max-height: 900px) {
    :root { --hero-reste: 217px; }
    /* Cible la barre des pages projet uniquement : l'accueil garde la sienne. */
    .nav[data-project-nav] { margin-top: 24px; margin-bottom: 24px; }
}

/* ============================================================
   MAX-WIDTH 1440px — contenu centré, backgrounds pleine largeur
   ============================================================ */
@media (min-width: 1440px) {

    /* La barre retrouve des marges de 24px : le jeton du hero suit. */
    :root { --hero-reste: 217px; }

    /* Nav : pilule centrée, largeur fixe */
    .nav { max-width: 1280px; margin-top: 24px; margin-bottom: 24px; }

    /* Sections sans fond coloré : conteneur contraint */
    .hero               { max-width: 1440px; margin-inline: auto; }
    .container-projects { max-width: 1440px; margin-inline: auto; }

    /* Sections avec fond pleine largeur : padding dynamique
       Formule : (100vw - 1440px) / 2 + 80px
       — à 1440px : 0 + 80px = 80px (identique au breakpoint 1200px)
       — à 1920px : 240px + 80px = 320px → contenu = 1280px centré */
    .about,
    .container-history {
        padding-left:  calc((100vw - 1440px) / 2 + 80px);
        padding-right: calc((100vw - 1440px) / 2 + 80px);
    }

    .container-footer {
        padding-left:  calc((100vw - 1440px) / 2 + 80px);
        padding-right: calc((100vw - 1440px) / 2 + 80px);
    }

    /* Pages produit : éléments avec margin horizontal */
    .hero-produit,
    .hero-produit--figma    { max-width: 1280px; margin-left: auto; margin-right: auto; }

    .project-gallery        { max-width: 1280px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-card);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition-base), transform var(--transition-base),
                visibility var(--transition-base), background-color var(--transition-fast);
    z-index: 10;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Meme survol que .button__contact : les deux boutons pleins bleus du site
   assombrissent d'un cran, pas de deux. */
.back-to-top:hover,
.back-to-top:focus-visible {
    background-color: var(--color-primary-hover);
}

/* ============================================================
   NAVIGATION PROJET PRÉCÉDENT / SUIVANT
   ============================================================ */
.project-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
    max-width: 1280px;
    margin: 48px auto 40px;
    padding: 0 24px;
}

@media (min-width: 744px) {
    .project-nav { padding: 0 32px; margin-bottom: 48px; }
}

@media (min-width: 992px) {
    .project-nav { padding: 0 48px; margin-bottom: 60px; }
}

@media (min-width: 1200px) {
    .project-nav { padding: 0 80px; margin-bottom: 60px; }
}

@media (min-width: 1440px) {
    .project-nav { padding: 0; }
}

.project-prev,
.project-next {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--color-text-main);
    transition: border-color var(--transition-base), background-color var(--transition-base);
}

.project-prev:hover,
.project-next:hover,
.project-prev:focus-visible,
.project-next:focus-visible {
    border-color: var(--color-primary);
    background-color: var(--color-bg-hover);
}

.project-next {
    justify-content: flex-end;
    text-align: right;
}

.project-prev svg,
.project-next svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.project-nav_text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-nav_label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.project-nav_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-prev.is-disabled {
    color: var(--color-text-subtle);
    opacity: 0.4;
    pointer-events: none;
}

.nav__toc a {
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color var(--transition-base), color var(--transition-base);
}

.nav__toc a:hover,
.nav__toc a:focus-visible,
.nav__toc a.is-active {
    background-color: var(--color-bg-hover-card);
    color: var(--color-text-main);
    font-weight: 600;
}

/* ============================================================
   LIEN D'ÉVITEMENT (accessibilité clavier)
   ============================================================ */
.skip-link {
    position: absolute;
    top: -48px;
    left: 16px;
    z-index: 2000;
    padding: 12px 20px;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    text-decoration: none;
    transition: top var(--transition-fast);
}
.skip-link:focus {
    top: 16px;
}

/* ============================================================
   LIGHTBOX GALERIE (aperçu plein écran des écrans de projet)
   ============================================================ */
html.gallery-lightbox-open,
html.gallery-lightbox-open body {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(8, 8, 10, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-lightbox.is-visible {
    opacity: 1;
}

.gallery-lightbox__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 64px 24px;
}

.gallery-lightbox__image {
    max-width: min(92vw, 1400px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    transform: scale(0.98);
    transition: transform 0.2s ease;
}

.gallery-lightbox.is-visible .gallery-lightbox__image {
    transform: scale(1);
}

.gallery-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.gallery-lightbox__close:hover { background-color: rgba(255, 255, 255, 0.2); transform: scale(1.06); }
.gallery-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.gallery-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.gallery-lightbox__nav:hover { background-color: rgba(255, 255, 255, 0.2); transform: translateY(-50%) scale(1.06); }
.gallery-lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gallery-lightbox__nav--prev { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }

.gallery-lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 743px) {
    .gallery-lightbox__nav { width: 38px; height: 38px; }
    .gallery-lightbox__nav--prev { left: 8px; }
    .gallery-lightbox__nav--next { right: 8px; }
    .gallery-lightbox__figure { padding: 48px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-lightbox,
    .gallery-lightbox__image { transition: none; }
}

/* ============================================================
   SECTION CONTACT (fin de parcours accueil)
   ============================================================ */
.container-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 24px 60px;
    gap: 24px;
}

/* Le titre de section est une ligne icône + libellé : on la centre aussi,
   uniquement ici (les autres sections restent alignées à gauche). */
.container-contact .container-work__title {
    justify-content: center;
}

.contact__intro {
    margin: 0 auto;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.contact__mail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* L'adresse est un <button> (cliquer = copier) : on neutralise l'apparence
   native du bouton pour conserver le rendu d'un lien. */
.contact__mail-link {
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text-main);
    background: none;
    border: none;
    border-bottom: 2px solid var(--color-primary);
    padding: 0 0 2px;
    cursor: pointer;
    transition: color var(--transition-base);
}

.contact__mail-link:hover,
.contact__mail-link:focus-visible { color: var(--color-primary); }


@media (min-width: 744px) {
    .container-contact { padding: 32px 32px 60px; gap: 28px; }
    .contact__intro    { font-size: 16px; }
    .contact__mail-link { font-size: 24px; }
}

@media (min-width: 992px) {
    .container-contact { padding: 48px 48px 60px; }
}

@media (min-width: 1200px) {
    .container-contact  { padding: 60px 80px; }
    .contact__mail-link { font-size: 26px; }
}

@media (min-width: 1440px) {
    .container-contact {
        padding-left:  calc((100vw - 1440px) / 2 + 80px);
        padding-right: calc((100vw - 1440px) / 2 + 80px);
    }
}

/* Confirmation de copie : pastille qui monte depuis le bas, sous l'adresse.
   En absolu pour ne rien décaler quand elle apparaît. */
.contact__mail { position: relative; }

.contact__feedback {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 600;
    color: #0F7B3D;
    background-color: #E6F6EC;
    border: 1px solid #BFE6CE;
    opacity: 0;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.contact__feedback.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============================================================
   CHIFFRES-CLÉS (section À Propos)
   Occupent l'espace laissé libre sous les deux colonnes et apportent
   de la preuve là où il n'y avait que de la description.
   ============================================================ */
.about__chiffres {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 48px;
    width: 100%;
    margin-top: 32px;
    /* Bandeau : deux filets identiques, avec le meme espacement au-dessus
       et en dessous, sinon la rangee parait posee sur la ligne du bas. */
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.about__chiffre {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.about__chiffre-valeur {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
}

.about__chiffre-libelle {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* En trois colonnes égales à partir de 744px : la rangée occupe alors toute
   la largeur, en écho aux deux colonnes situées au-dessus. */
@media (min-width: 744px) {
    .about__chiffres {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        gap: 24px 32px;
    }
}

@media (min-width: 1200px) {
    .about__chiffres { margin-top: 40px; padding-top: 32px; padding-bottom: 32px; }
    .about__chiffre-valeur { font-size: 30px; }
}

/* ============================================================
   COLONNE UNIQUE (pages projet)
   Tout s'empile : une carte par ligne, une fiche par ligne, une etape
   par ligne. Comme le texte occupe toute la largeur disponible, c'est
   le conteneur qui fixe la longueur de ligne : sa largeur est calee sur
   la fourchette typographique de 45 a 75 caracteres.
   ============================================================ */