/*============================== DESIGN SYSTEM — VARIABLES DE THÈME ============================== */
:root,
:root[data-theme="dark"]{
    /* Palette éditoriale chaude — terracotta + sauge + crème
       Inspiration : magazines design indépendants, portfolios créatifs.
       Loin des palettes tech sky-violet-amber over-utilisées en 2024. */
    --c-bg: #1a1614;                /* brun-noir terre cuite */
    --c-bg-2: #26211e;              /* terre brûlée */
    --c-surface: rgba(242, 237, 229, 0.04);
    --c-surface-strong: rgba(242, 237, 229, 0.08);
    --c-border: rgba(242, 237, 229, 0.10);
    --c-border-strong: rgba(242, 237, 229, 0.20);

    --c-text: #f2ede5;              /* crème chaud */
    --c-text-muted: rgba(242, 237, 229, 0.72);
    --c-text-subtle: rgba(242, 237, 229, 0.5);

    --c-primary: #d2691e;           /* terracotta cuivré */
    --c-primary-glow: rgba(210, 105, 30, .45);
    --c-accent: #87a878;             /* vert sauge mature */
    --c-accent-glow: rgba(135, 168, 120, .40);
    --c-warm: #e8b447;              /* or doré */

    /* Card overlay — fond opaque pour contraste texte */
    --c-card-bg: rgba(26, 22, 20, 0.65);

    --shadow-glow: 0 0 24px rgba(210, 105, 30, .30), 0 0 60px rgba(135, 168, 120, .2);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(242, 237, 229, 0.05) inset;
    --radius-md: 14px;
    --radius-lg: 22px;
    --blur-glass: 16px;
    --t-fast: 200ms ease;
    --t-base: 350ms cubic-bezier(.45, .05, .55, .95);
}

/* Mode clair — crème + terracotta plus contrasté */
:root[data-theme="light"]{
    --c-bg: #f7f1e8;                /* crème clair */
    --c-bg-2: #ede4d3;              /* sable */
    --c-surface: rgba(255, 255, 255, 0.55);
    --c-surface-strong: rgba(255, 255, 255, 0.78);
    --c-border: rgba(48, 32, 22, 0.10);
    --c-border-strong: rgba(48, 32, 22, 0.18);

    --c-text: #2a1f17;              /* brun-noir */
    --c-text-muted: rgba(42, 31, 23, 0.72);
    --c-text-subtle: rgba(42, 31, 23, 0.5);

    --c-primary: #b8531a;            /* terracotta plus profond pour contraste */
    --c-primary-glow: rgba(184, 83, 26, .30);
    --c-accent: #5e7d52;              /* sauge plus profond */
    --c-accent-glow: rgba(94, 125, 82, .30);
    --c-warm: #c89832;

    --c-card-bg: rgba(255, 252, 247, 0.78);

    --shadow-card: 0 8px 32px rgba(48, 32, 22, 0.08), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}

/* Transitions douces lors du switch de thème */
html, body, header, main > section, .menu, .cours, .ensemble-def,
.btn-voir, .voir-description, .infolettre input, #btninscrire,
.btn-retour-haut, .theme-toggle{
    transition:
        background-color 400ms ease,
        background 400ms ease,
        color 400ms ease,
        border-color 400ms ease,
        box-shadow 400ms ease;
}

/*============================== PARAMÉTRAGE DE STYLE GÉNÉRAL PAR DÉFAUT ============================== */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    width: 100vw;
    height: 100vh;
    font-size: 18px;
    scroll-behavior: smooth;
    background: var(--c-bg);
}
body{
    background: transparent;
    color: var(--c-text);
    overflow-x: hidden;
    position: relative;
}

/* ============================== UTILITY CLASSES (a11y) ============================== */
.visually-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link{
    position: absolute;
    top: -100px;
    left: 1rem;
    padding: .75rem 1.5rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    z-index: 9999;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 600;
    transition: top 200ms ease;
}
.skip-link:focus{
    top: 1rem;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex="0"]:focus-visible,
label[role="button"]:focus-visible,
label[role="tab"]:focus-visible{
    outline: 3px solid #ffd700;
    outline-offset: 3px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
/* Ici, on définit la typographie par défaut des différentes lignes de texte contenues dans ces balises */
h1, h2, h3, h4, h6, a, li{
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}
a, li{
    text-decoration: none;
    list-style: none;
}
/* Ici, on cache l'ensemble des cases à cocher de type "checkbox" ou "rodio" sur la page */
input[type=checkbox], input[type=radio]{
    display: none;
}
/* Ici, on définit le style par défaut de l'ensemble des matérial-icons se trouvant sur la page */
.material-icons{
    color: var(--c-primary);
    filter: drop-shadow(0 0 8px var(--c-primary-glow));
    cursor: pointer;
    font-size: 2rem;
    transition: color var(--t-fast), filter var(--t-fast);
}
.material-icons:hover{
    color: var(--c-accent);
    filter: drop-shadow(0 0 12px var(--c-accent-glow));
}


/*============================== HEADER ============================== */
header{
    width: 100vw;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: var(--c-card-bg);
    backdrop-filter: blur(var(--blur-glass)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(1.5);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 30px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Bouton toggle dark/light */
.theme-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: auto;
    margin-right: .75rem;
    background: var(--c-surface-strong);
    border: 1px solid var(--c-border-strong);
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-primary);
    transition: all var(--t-base);
}
.theme-toggle:hover{
    border-color: var(--c-primary);
    background: rgba(210, 105, 30, 0.1);
    box-shadow: 0 0 16px var(--c-primary-glow);
    transform: scale(1.05);
}
.theme-toggle:active{
    transform: scale(.95);
}
.theme-toggle .theme-toggle-icon{
    font-size: 1.4rem;
    color: var(--c-primary);
    margin: 0;
    filter: drop-shadow(0 0 6px var(--c-primary-glow));
    transition: transform 400ms ease, color 200ms ease;
}
:root[data-theme="light"] .theme-toggle .theme-toggle-icon{
    transform: rotate(360deg);
}

/* Ici, on définit le style des contenus pour mon profil*/
.profil{
    width: 40vw;
    display: flex;
    align-items: center;
}
.photo-profil{
    width: 3rem;
    height: 3rem;
    background-color: black;
    object-fit: cover;
    border-radius: 50%;
}
.photo-profil > img{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
}
.mon-nom{
    font-size: 1rem;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}
.mon-titre{
    font-size: 0.8rem;
    color: var(--c-text-muted);
}
.mon-nom, .mon-titre{
    font-weight: 600;
    margin-left: 0.5rem;
}

/* Ici, on définit le style des contenus de la barre de naigation contenant le menu de navigation */
.barre-navigation{
    display: flex;
}
.navigation{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 100vh;
    background: var(--c-card-bg);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-left: 1px solid var(--c-border);
    position: fixed;
    top: 10vh;
    right: 0;
    opacity: 0;
    translate: 100%;
    transition: translate 500ms, opacity 500ms 100ms, width 1s 150ms;
}
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    width: 60vw;
    height: 2.75rem;
    text-decoration: none;
    color: var(--c-text);
    margin: .75rem 1rem;
    background: var(--c-surface-strong);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    font-weight: 500;
    letter-spacing: .5px;
    position: relative;
    overflow: hidden;
    translate: 0 -300%;
    opacity: 0;
    transition: opacity 1s, translate 500ms, color 250ms ease, border-color 250ms ease, transform 250ms ease;
}
.menu::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    opacity: 0;
    transition: opacity 250ms ease;
    z-index: -1;
}
.menu:hover{
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--c-primary-glow), 0 0 32px var(--c-accent-glow);
}
.menu:hover::before{
    opacity: 1;
}

.contact{
    width: 60vw;
    height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 1rem;
    translate: 0 300%;
    opacity: 0;
    transition: opacity 1s, translate 500ms;
    list-style: none;
    margin: 0;
}
.coordonnees{
    display: flex;
    align-items: center;
    margin: 0 15px 0 15px;
    font-size: clamp(1rem, 2vw, 9rem);
    cursor: pointer;
    opacity: 0;
    transition: opacity 1s, color var(--t-fast);
    color: var(--c-text-muted);
}
.coordonnees:hover{
    color: var(--c-primary);
}
.coordonnees > .telephone, .courriel, .liens{
    margin: 6px;
}

#bouton-menu-burger:checked ~ header > .barre-navigation > .bouton{
    rotate: 360deg;
    border-radius: 50%;
    border: none;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation{
    opacity: 1;
    translate: 0;
    width: 100vw;
    z-index: 6;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .menu{
    opacity: 1;
    translate: 0 0;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .menu1{
    transition-delay: 300ms;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .menu2{
    transition-delay: 600ms;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .menu3{
    transition-delay: 900ms;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .contact{
    transition-delay: 1200ms;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .contact > .coordonnees{
    transition-delay: 1500ms;
}

#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .contact{
    opacity: 1;
    translate: 0 0;
}
#bouton-menu-burger:checked ~ header > .barre-navigation > .navigation > .contact > .coordonnees{
    opacity: 1;
}
.bouton{
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
    transition: rotate 500ms, border-radius 1s, border 1s;
}
.bouton:hover{
    scale: 1.1;
}
.ligne{
    width: 75%;
    height: 0.1rem;
    background-color: black;
    border-radius: 25px;
    transition: translate 300ms 300ms, background-color 1.2s, width 500ms;
}
#bouton-menu-burger:checked ~ header > .barre-navigation >  .bouton > .ligne1{
    width: 100%;
    background-color: whitesmoke;
}
#bouton-menu-burger:checked ~ header > .barre-navigation >  .bouton > .ligne2{
    width: 80%;
    background-color: whitesmoke;
    rotate: 90deg;
    translate: -60% 225%;
}
#bouton-menu-burger:checked ~ header > .barre-navigation >  .bouton > .ligne3{
    width: 100%;
    translate: 15% -200%;
    background-color: whitesmoke;
}
#bouton-menu-burger:checked ~ header > .barre-navigation >  .bouton > .ligne4{
    width: 100%;
    background-color: whitesmoke;
}


/*============================== MAIN ============================== */
main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    color: var(--c-text);
    position: relative;
    z-index: 1;
}
#moi, #formations, #realisations{
    width: min(92vw, 1280px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: var(--c-card-bg);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin: 4rem auto;
    padding: 3rem 2rem;
}
#moi:hover, #formations:hover, #realisations:hover{
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-card), 0 0 60px var(--c-primary-glow);
}
.titre{
    width: 100vw;
    height: 12vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text);
    text-shadow:
        0 0 6px rgba(255, 255, 255, .4),
        0 0 18px var(--c-primary-glow),
        0 0 40px var(--c-primary-glow),
        0 0 80px var(--c-accent-glow);
    z-index: 1;
    font-family: "Boldonse", system-ui;
    font-weight: 300;
    font-style: normal;
    margin-top: 4rem;
}
.lettre{
    font-size: clamp(2rem, 5vw, 3rem);
    animation: apparition-titre ease-in-out 2s alternate, apparition-roulement ease-in 2s 2s;
}
@keyframes apparition-titre{
    from{
        opacity: 0;
        transform: translateY(-30px);
        z-index: -1;
    }
    to{
        opacity: 1;
        transform: translateY(0);
        z-index: 1;
    }
}

@keyframes apparition-roulement {
    from {
        transform: perspective(100px) rotateY(0deg);
    }
    to{
        transform: perspective(300px) rotateY(360deg);
    }
}

.bienvenue{
    width: 100%;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mot-bienvenue{
    font-family: "Teko", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(2rem, 3vw, 6rem);
    white-space: nowrap;
    animation: defilement linear 9s 1s infinite alternate;
    z-index: 0;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent), var(--c-warm));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    text-transform: uppercase;
}
@keyframes defilement{
    0%{
        translate: 100vw;
    }
    100%{
        translate: -100vw;
    }
}
.forme{
    opacity: 0;
    translate: 0 -100%;
    transition: opacity 1s, translate 1s;
}
.rectangle1, .rectangle2, .rectangle3{
    width: 90%;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.rectangle2{
    position: absolute;
    top: 15px;
}
.text-moi, .text-formations, .text-realisations{
    display: flex;
    font-size: clamp(1rem, 2vw, 4rem);
    color: var(--c-text);
    text-shadow:
        0 0 4px rgba(255, 255, 255, .35),
        0 0 14px var(--c-primary-glow),
        0 0 28px var(--c-accent-glow);
    font-family: "Boldonse", system-ui;
    font-weight: 300;
    font-style: normal;
    margin-left: 1rem;
}
.description{
    width: 90%;
    height: 84%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1px 1px 6px;
    background-color: whitesmoke;
    position: static;
}
.description > .photo-moi{
    height: 60%;
}
.description > .photo-moi > .photo > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.description-moi{
    margin: 1.5rem auto 0;
    max-width: 760px;
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    line-height: 1.8;
    text-align: center;
    padding: 1.5rem 1.75rem;
    /* Fond opaque dédié pour garantir le contraste sur le glass card +
       l'aurora colorée derrière. La section #moi est déjà semi-transparente,
       donc on renforce localement le contraste pour le bloc texte. */
    background: rgba(15, 12, 10, 0.55);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
}
.description-moi p,
.description-moi h3{
    color: #f8f3ea;
    font-weight: 400;
    font-family: "Josefin Sans", sans-serif;
    letter-spacing: .15px;
}
:root[data-theme="light"] .description-moi{
    background: rgba(255, 252, 247, 0.7);
    border-color: var(--c-border-strong);
}
:root[data-theme="light"] .description-moi p,
:root[data-theme="light"] .description-moi h3{
    color: var(--c-text);
}
.mescours{
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1.5fr;
    gap: 1.5rem;
    align-items: stretch;
    padding: 1rem;
}
@media (max-width: 768px){
    .mescours{
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
.ensemble-cours{
    display: flex;
    flex-direction: column;
    gap: .75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    height: auto;
    width: auto;
}
.ensemble-def{
    width: 100%;
    min-height: 240px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}
.ensemble-def::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-accent), transparent);
}
.cours{
    width: 100%;
    height: auto;
    min-height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--c-surface-strong);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    margin: 0;
    transition: all var(--t-base);
    position: relative;
    overflow: hidden;
}
.cours > .nom-cours{
    flex: 1 1 auto;
    min-width: 0;
}
.cours > .voir-description{
    flex: 0 0 auto;
}
.cours::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
    opacity: 0;
    transition: opacity var(--t-base);
}
.cours:hover{
    border-color: var(--c-primary);
    box-shadow: 0 0 24px var(--c-primary-glow);
    transform: translateX(4px);
    background: rgba(210, 105, 30, 0.06);
}
.cours:hover::before{
    opacity: 1;
}
.nom-cours{
    font-size: clamp(.95rem, 1.2vw, 1.1rem);
    color: var(--c-text);
    font-weight: 500;
    line-height: 1.3;
}
/* Bouton minimaliste : cercle avec chevron — plus de mot "Voir" qui prenait
   trop de place et chevauchait le titre. Le label entier reste cliquable. */
.voir-description{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--c-surface-strong);
    border: 1px solid var(--c-border-strong);
    border-radius: 50%;
    cursor: pointer;
    color: var(--c-primary);
    transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
    flex-shrink: 0;
}
.voir-description:hover{
    transform: scale(1.1);
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
}
/* Le mot "Voir" reste accessible aux lecteurs d'écran mais masqué visuellement */
.voir-description > .mot-voir{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.voir-description > .ouvrir{
    rotate: 0deg;
    transition: rotate 400ms ease;
    color: inherit;
    font-size: 1.4rem;
    filter: none;
    margin: 0;
}
#afficher-description1:checked ~ .ensemble-cours > .cours1 > .voir-description,
#afficher-description2:checked ~ .ensemble-cours > .cours2 > .voir-description,
#afficher-description3:checked ~ .ensemble-cours > .cours3 > .voir-description,
#afficher-description4:checked ~ .ensemble-cours > .cours4 > .voir-description{
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-bg);
}
#afficher-description1:checked ~ .ensemble-cours > .cours1 > .voir-description > .ouvrir,
#afficher-description2:checked ~ .ensemble-cours > .cours2 > .voir-description > .ouvrir,
#afficher-description3:checked ~ .ensemble-cours > .cours3 > .voir-description > .ouvrir,
#afficher-description4:checked ~ .ensemble-cours > .cours4 > .voir-description > .ouvrir{
    rotate: 90deg;
    color: inherit;
}
#afficher-description1:checked ~ .ensemble-cours > .cours1,
#afficher-description2:checked ~ .ensemble-cours > .cours2,
#afficher-description3:checked ~ .ensemble-cours > .cours3,
#afficher-description4:checked ~ .ensemble-cours > .cours4{
    border-color: var(--c-accent);
    background: rgba(135, 168, 120, 0.12);
    box-shadow: 0 0 24px var(--c-accent-glow);
}
#afficher-description1:checked ~ .ensemble-cours > .cours1::before,
#afficher-description2:checked ~ .ensemble-cours > .cours2::before,
#afficher-description3:checked ~ .ensemble-cours > .cours3::before,
#afficher-description4:checked ~ .ensemble-cours > .cours4::before{
    opacity: 1;
}
#afficher-description1:checked ~ .ensemble-def > .description-cours1,
#afficher-description2:checked ~ .ensemble-def > .description-cours2,
#afficher-description3:checked ~ .ensemble-def > .description-cours3,
#afficher-description4:checked ~ .ensemble-def > .description-cours4
{
    display: block;
}
.description-cours{
    width: 100%;
    height: 100%;
    margin: 0;
    display: none;
    transition: display 500ms;
    text-align: left;
    color: var(--c-text);
    line-height: 1.8;
    padding: 0;
    font-size: clamp(.85rem, 1vw, 1rem);
}
.description-cours p{
    color: var(--c-text);
    font-family: "Josefin Sans", sans-serif;
    font-weight: 300;
}

.mesprojets{
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.projet{
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--c-border);
}

.descarres{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 1fr;
    place-items: center;
    position: absolute;
    inset: 0;
    gap: .5rem;
    padding: 1rem;
    box-sizing: border-box;
}
.forme-carre{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(210, 105, 30, 0.08);
    border: 1px solid rgba(210, 105, 30, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
        0 0 12px rgba(210, 105, 30, 0.15),
        inset 0 0 12px rgba(210, 105, 30, 0.05);
    animation: changer-taille2 3s infinite alternate;
    transition: box-shadow 400ms, transform 400ms;
}
.forme-carre:nth-child(even){
    background: rgba(135, 168, 120, 0.08);
    border-color: rgba(135, 168, 120, 0.3);
    box-shadow:
        0 0 12px rgba(135, 168, 120, 0.15),
        inset 0 0 12px rgba(135, 168, 120, 0.05);
    animation: changer-taille1 3s infinite alternate;
}
.forme-carre:hover{
    box-shadow:
        0 0 32px rgba(210, 105, 30, 0.5),
        inset 0 0 16px rgba(210, 105, 30, 0.15);
    transform: scale(1.1);
}

#position1, #position2, #position3, #position4{
    position: absolute;
    z-index: -1;
}

.verticale-h, .verticale-b{
    animation: couleur-perspective 3s 300ms infinite alternate;
}
.verticale-h, .verticale-b, .horizontale-g, .horizontale-d{
    width: 0.4rem;
    height: 5rem;
    background: linear-gradient(180deg, var(--c-primary), var(--c-accent));
    border-radius: 999px;
    box-shadow: 0 0 12px var(--c-primary-glow), 0 0 24px var(--c-accent-glow);
}
.horizontale-d, .horizontale-g{
    rotate: 90deg;
    animation: rotation-et-transparence 3s 500ms infinite alternate;
}
.horizontale-g{
    transform-origin: center;
}
.horizontale-d{
    transform-origin: center;
}

@keyframes rotation-et-transparence{
    0%{
        opacity: 0;
        height: 0;
        animation-timing-function: cubic-bezier(.3,.7,.7,.2);
    }
    50%{
        rotate: 720deg;
        scale: 1.2;
    }
    25%, 75%{
        rotate: 1440deg;
    }
    100%{
        opacity: 1;
        height: 8rem;
        background: linear-gradient(180deg, var(--c-warm), var(--c-primary));
        box-shadow: 0 0 18px var(--c-primary-glow), 0 0 36px rgba(251, 191, 36, .4);
        border-radius: 999px;
        animation-timing-function: cubic-bezier(0,1,1,0);
    }
}

@keyframes couleur-perspective{
    0%{
        transform: rotate3d(1, 1, 1, 0deg);
        animation-timing-function: cubic-bezier(0,0,0,1);
    }
    100%{
        background: linear-gradient(180deg, var(--c-accent), var(--c-warm));
        box-shadow: 0 0 18px var(--c-accent-glow);
        transform: rotate3d(-2, -2, -2, 540deg);
        animation-timing-function: cubic-bezier(0,1,0,1);
    }
}
@keyframes changer-taille1{
    0%{
        transform:scale3d(0.5, 0.5, 0.5);
        animation-timing-function: cubic-bezier(1,0,1,0);
    }
    100%{
        transform:scale3d(1, 1, 1);
        animation-timing-function: cubic-bezier(0,1,0,1);
    }
}
@keyframes changer-taille2{
    0%{
        transform:scale3d(1, 1, 1);
        animation-timing-function: cubic-bezier(1,0,1,0);
    }
    100%{
        transform:scale3d(0.5, 0.5, 0.5);
        animation-timing-function: cubic-bezier(0,1,0,1);
        z-index: 1;
    }
}




#bouton-menu-burger:checked ~ main > .btn-retour-haut{
    display: none;
}

.btn-retour-haut {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.85rem;
    background: var(--c-surface-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--c-border-strong);
    border-radius: 50%;
    z-index: 4;
    color: var(--c-primary);
    text-decoration: none;
    transition: all var(--t-base);
    box-shadow: 0 0 24px var(--c-primary-glow);
}
.btn-retour-haut:hover{
    scale: 1.1;
    border-color: var(--c-primary);
    box-shadow: 0 0 40px var(--c-primary-glow);
}


/*============================== FOOTER============================== */
footer{
    width: 100vw;
    background: linear-gradient(180deg, var(--c-bg-2), var(--c-bg));
    border-top: 1px solid var(--c-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    color: var(--c-text-muted);
    padding: 3rem 0 1rem;
    position: relative;
}
footer::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-primary), var(--c-accent), transparent);
    opacity: .6;
}
#partie1{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.rs-infos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.logo > a > img{
    width: 3rem;
    height: 3rem;
    margin: 5px;
}
.logo > a > img:hover{
    scale: 1.1;
}
.rsociaux{
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}
.rsociaux > li{
    display: inline-flex;
}
.rsociaux > li > a > img,
.rsociaux > a > img{
    width: 2rem;
    height: 2rem;
    margin: 5px;
    padding: .35rem;
    background: var(--c-surface-strong);
    border: 1px solid var(--c-border);
    border-radius: 50%;
    transition: all var(--t-base);
    filter: brightness(.9);
}
.rsociaux > li > a > img:hover,
.rsociaux > a > img:hover{
    scale: 1.15;
    border-color: var(--c-primary);
    box-shadow: 0 0 16px var(--c-primary-glow);
    filter: brightness(1.2);
}
.infolettre{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
}
.infolettre > label{
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(.85rem, 1vw, 9rem);
    text-wrap: nowrap;
    color: var(--c-text-muted);
    letter-spacing: .5px;
}
#courriel{
    padding: .65rem 1rem;
    margin-bottom: 0;
    border-radius: 8px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text);
    font-family: "Josefin Sans", sans-serif;
    font-size: .9rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    width: 16rem;
    max-width: 100%;
}
#courriel::placeholder{
    color: var(--c-text-subtle);
}
#courriel:focus{
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(210, 105, 30, 0.15);
}
#btninscrire{
    width: auto;
    padding: .55rem 1.5rem;
    height: auto;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    color: #ffffff;
    font-size: .85rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: .5px;
    transition: all var(--t-base);
    box-shadow: 0 0 16px var(--c-primary-glow);
}
#btninscrire:hover{
    scale: 1.05;
    box-shadow: 0 0 32px var(--c-primary-glow), 0 0 64px var(--c-accent-glow);
    color: #ffffff;
}
.reprise-menu > ul{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
}
.titre-section{
    font-size: clamp(1.5rem, 2vw, 9rem);
    font-weight: 700;
    margin-left: 3px;
    color: var(--c-text);
    background: linear-gradient(135deg, var(--c-primary), var(--c-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 1px;
}
.reprise-menu > ul > li{
    margin-top: 1rem;
}
.reprise-menu > ul > li > a,
.reprise-menu > ul > a{
    text-decoration: none;
    color: var(--c-text-muted);
    font-size: clamp(.95rem, 1.3vw, 9rem);
    display: inline-block;
    transition: scale 200ms ease, color 200ms ease;
}
.reprise-menu > ul > li > a:hover,
.reprise-menu > ul > a:hover{
    scale: 1.05;
    color: var(--c-primary);
}
#reprises-contact{
    display: flex;
    flex-direction: column;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
#reprises-contact > li > a{
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
#reprises-contact > li > a:hover{
    color: var(--c-primary);
}
.contact > li > a{
    color: inherit;
    text-decoration: none;
    transition: color 200ms ease;
}
.contact > li > a:hover{
    color: var(--c-primary);
}
.reprise-coordonnees{
    font-size: clamp(.95rem, 1.3vw, 9rem);
    display: flex;
    align-items: center;
    color: var(--c-text-muted);
    margin-bottom: .5rem;
}
.reprise-coordonnees:hover{
    color: var(--c-primary);
}
.reprise-coordonnees > .telephone-pied, .courriel-pied, .liens-pied{
    margin: 6px;
    font-size: clamp(1rem, 1.5vw, 9rem);
}


#partie2{
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-border-strong), transparent);
    margin: 2rem 0 1rem;
    border: none;
}

#partie3{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mention-legale{
    color: var(--c-text-subtle);
    font-size: .85rem;
    text-align: center;
    letter-spacing: .5px;
}


/* ============================== ANIMATION D'ARRIÈRE-PLAN — AURORA + PARTICULES NÉON ============================== */
/*
 * Esthétique 2024-2025 : aurora boréale (multi radial-gradient géants qui dérivent
 * et muent en couleur) en arrière-plan, sur laquelle se superposent des particules
 * lumineuses en mix-blend-mode: plus-lighter (les couleurs s'additionnent dans les
 * zones de chevauchement → effet "liquid light" caractéristique des UI modernes).
 *
 * 2 couches : #animation::before (aurora drift) + #animation > particules (80 spots).
 */

#animation{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    isolation: isolate;
    pointer-events: none;
    overflow: hidden;
}

/* COUCHE 1 — Aurora : nuages chauds qui dérivent en boucle.
   Palette terracotta + sauge + or — tons éditoriaux chauds, pas la palette
   sky-violet-pink over-utilisée par tous les sites IA en 2024. */
#animation::before{
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 60vw 50vh at 15% 25%, rgba(210, 105, 30, 0.45), transparent 60%),
        radial-gradient(ellipse 55vw 45vh at 85% 70%, rgba(135, 168, 120, 0.40), transparent 60%),
        radial-gradient(ellipse 65vw 55vh at 50% 90%, rgba(232, 180, 71, 0.35), transparent 60%),
        radial-gradient(ellipse 50vw 40vh at 75% 15%, rgba(184, 83, 26, 0.40), transparent 60%),
        radial-gradient(ellipse 60vw 50vh at 25% 80%, rgba(94, 125, 82, 0.40), transparent 60%);
    background-repeat: no-repeat;
    filter: blur(40px) saturate(1.3);
    animation: aurora-drift 28s cubic-bezier(.45, .05, .55, .95) infinite alternate;
    will-change: transform, background-position;
    z-index: -2;
}

@keyframes aurora-drift{
    0%{
        transform: translate(0, 0) rotate(0deg) scale(1);
        background-position: 0% 0%, 100% 100%, 50% 50%, 30% 70%, 70% 30%;
    }
    33%{
        transform: translate(2vw, -3vh) rotate(3deg) scale(1.1);
        background-position: 30% 10%, 70% 90%, 80% 20%, 50% 50%, 20% 80%;
    }
    66%{
        transform: translate(-2vw, 2vh) rotate(-2deg) scale(1.05);
        background-position: 60% 30%, 40% 60%, 20% 80%, 80% 20%, 50% 50%;
    }
    100%{
        transform: translate(1vw, -1vh) rotate(1deg) scale(1.15);
        background-position: 100% 50%, 0% 50%, 60% 0%, 0% 100%, 100% 0%;
    }
}

/* COUCHE 2 — Particules : petits spots lumineux en blend-mode additif.
   Les zones de chevauchement deviennent quasi-blanches → effet liquid light. */
.carrer, .cercle, .ligne1triangle, .ligne2triangle, .ligne1trapeze, .ligne2trapeze{
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    opacity: .85;
    mix-blend-mode: plus-lighter;
    will-change: transform, opacity, filter;

    /* Bokeh photographique — point de lumière hors focus */
    background: radial-gradient(circle at 50% 50%, currentColor 0%, currentColor 30%, transparent 75%);
    background-color: transparent !important;

    /* Glow extrême — 4 couches successivement plus larges (jusqu'à 100px de halo) */
    filter:
        blur(2px)
        drop-shadow(0 0 14px currentColor)
        drop-shadow(0 0 36px currentColor)
        drop-shadow(0 0 72px currentColor)
        drop-shadow(0 0 100px currentColor);
}

/* Mode clair : passer en multiply pour effet aquarelle au lieu d'effet néon plus-lighter */
:root[data-theme="light"] .carrer,
:root[data-theme="light"] .cercle,
:root[data-theme="light"] .ligne1triangle,
:root[data-theme="light"] .ligne2triangle,
:root[data-theme="light"] .ligne1trapeze,
:root[data-theme="light"] .ligne2trapeze{
    mix-blend-mode: multiply;
    opacity: .55;
    filter:
        blur(3px)
        drop-shadow(0 0 12px currentColor)
        drop-shadow(0 0 28px currentColor);
}

/* Mode clair : aurora plus subtile pour ne pas saturer le fond clair */
:root[data-theme="light"] #animation::before{
    opacity: .55;
    filter: blur(50px) saturate(1.2);
}

/* Palette terracotta + sauge + or — tons chauds éditoriaux */
@keyframes changement-couleur{
    0%   { color: #d2691e; }   /* terracotta */
    25%  { color: #e8b447; }   /* or doré */
    50%  { color: #87a878; }   /* vert sauge */
    75%  { color: #b8531a; }   /* terre brûlée */
    100% { color: #c89832; }   /* or moutarde */
}

/* Pulse — respiration discrète qui anime même quand l'élément est statique en trajectoire */
@keyframes changement-taille{
    0%   { scale: 0.4; }
    50%  { scale: 0.85; }
    100% { scale: 0.55; }
}

/* ===== Parallax 3 groupes : chaque type de forme a 3 vitesses différentes ===== */

/* Carrés (gauche → droite) */
.carrer{
    left: 0;
    color: #d2691e;
    animation:
        deplacement-carre-horizontal 28s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1),
        modification-forme-carre 18s 500ms infinite alternate ease-in-out,
        changement-couleur 16s 500ms infinite alternate ease-in-out,
        changement-taille 11s infinite alternate ease-in-out;
}
.carre1, .carre4, .carre7, .carre10, .carre13, .carre16, .carre19{
    animation-duration: 36s, 22s, 20s, 14s; /* groupe lent — gros bokeh d'arrière-plan */
}
.carre2, .carre5, .carre8, .carre11, .carre14, .carre17, .carre20{
    animation-duration: 24s, 16s, 14s, 9s;  /* groupe rapide — bokeh proche */
}

/* Cercles (droite → gauche) */
.cercle{
    right: 0;
    color: #e8b447;
    animation:
        deplacement-cercle-horizontal 30s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1),
        modification-forme-cercle 18s 500ms infinite alternate ease-in-out,
        changement-couleur 16s 500ms infinite alternate ease-in-out,
        changement-taille 11s infinite alternate ease-in-out;
}
.cercle1, .cercle4, .cercle7, .cercle10, .cercle13, .cercle16, .cercle19{
    animation-duration: 38s, 22s, 20s, 14s;
}
.cercle2, .cercle5, .cercle8, .cercle11, .cercle14, .cercle17, .cercle20{
    animation-duration: 26s, 16s, 14s, 9s;
}

/* Triangles (descendent ↓) */
.ligne1triangle{
    top: 0;
    color: #87a878;
    animation:
        changement-taille 13s infinite alternate ease-in-out,
        changement-couleur 16s infinite alternate ease-in-out,
        modification-forme-triangle 18s infinite alternate ease-in-out,
        deplacement-vertical-ligne1triangle 38s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1);
}

/* Triangles (montent ↑) */
.ligne2triangle{
    bottom: 0;
    color: #b8531a;
    animation:
        changement-taille 13s infinite alternate ease-in-out,
        changement-couleur 16s infinite alternate ease-in-out,
        modification-forme-triangle 18s infinite alternate ease-in-out,
        deplacement-vertical-ligne2triangle 38s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1);
}

/* Trapèzes (descendent ↓) */
.ligne1trapeze{
    top: 0;
    color: #c89832;
    animation:
        changement-taille 13s infinite alternate ease-in-out,
        modification-forme-trapeze 6s infinite alternate ease-in-out,
        changement-couleur 16s infinite alternate ease-in-out,
        deplacement-vertical-ligne1trapeze 42s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1);
}

/* Trapèzes (montent ↑) */
.ligne2trapeze{
    bottom: 0;
    color: #5e7d52;
    animation:
        changement-taille 13s infinite alternate ease-in-out,
        modification-forme-trapeze 6s infinite alternate ease-in-out,
        changement-couleur 16s infinite alternate ease-in-out,
        deplacement-vertical-ligne2trapeze 42s 500ms infinite alternate cubic-bezier(.37, 0, .63, 1);
}


/* Les animations par images clées pour les classes de div 'carrer' et 'cercle'*/
@keyframes modification-forme-carre{
    0%, 10%{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    11%, 20%{
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    }
    21%, 30%{
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }
    31%, 40%{
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    41%, 50%{
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    }
    51%, 60%{
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }
    61%, 70%{
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
    71%, 80%{
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    }
    81%, 90%{
        clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    }
    91%, 100%{
        clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    }
}

@keyframes modification-forme-cercle{
    0%, 10%{
        clip-path: circle(50% at 50% 50%);
    }
    11%, 20%{
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    }
    21%, 30%{
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
    31%, 40%{
        clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    }
    41%, 50%{
        clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
    }
    51%, 60%{
        clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
    }
    61%, 70%{
        clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
    }
    71%, 80%{
        clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    }
    81%, 90%{
        clip-path: circle(50% at 50% 50%);
    }
    91%, 100%{
        clip-path: ellipse(50% 50% at 50% 50%);
    }
}

@keyframes deplacement-carre-horizontal{
    from{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(50vw, -1.5vh);
    }
    to{
        transform: translate(100vw, 0);
    }
}

@keyframes deplacement-cercle-horizontal{
    from{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(-50vw, 1.5vh);
    }
    to{
        transform: translate(-100vw, 0);
    }
}
/* Ensemble des carrées*/
.carre1{
    top: 0;
    animation-delay: 50ms;
}
.carre2{
    top: 17vh;
    animation-delay: 100ms;
}
.carre3{
    top: 34vh;
    animation-delay: 150ms;
}
.carre4{
    top: 51vh;
    animation-delay: 200ms;
}
.carre5{
    top: 68vh;
    animation-delay: 250ms;
}
.carre6{
    top: 85vh;
    animation-delay: 300ms;
}
.carre7{
    top: 102vh;
    animation-delay: 350ms;
}
.carre8{
    top: 119vh;
    animation-delay: 400ms;
}
.carre9{
    top: 136vh;
    animation-delay: 450ms;
}
.carre10{
    top: 153vh;
    animation-delay: 500ms;
}
.carre11{
    top: 170vh;
    animation-delay: 550ms;
}
.carre12{
    top: 187vh;
    animation-delay: 600ms;
}
.carre13{
    top: 204vh;
    animation-delay: 650ms;
}
.carre14{
    top: 221vh;
    animation-delay: 700ms;
}
.carre15{
    top: 238vh;
    animation-delay: 750ms;
}
.carre16{
    top: 255vh;
    animation-delay: 800ms;
}
.carre17{
    top: 272vh;
    animation-delay: 850ms;
}
.carre18{
    top: 289vh;
    animation-delay: 900ms;
}
.carre19{
    top: 306vh;
    animation-delay: 950ms;
}
.carre20{
    top: 323vh;
    animation-delay: 1s;
}

/* Ensemble des cercles*/
.cercle1{
    top: 0;
    animation-delay: 50ms;
}
.cercle2{
    top: 17vh;
    animation-delay: 100ms;
}
.cercle3{
    top: 34vh;
    animation-delay: 150ms;
}
.cercle4{
    top: 51vh;
    animation-delay: 200ms;
}
.cercle5{
    top: 68vh;
    animation-delay: 250ms;
}
.cercle6{
    top: 85vh;
    animation-delay: 300ms;
}
.cercle7{
    top: 102vh;
    animation-delay: 350ms;
}
.cercle8{
    top: 119vh;
    animation-delay: 400ms;
}
.cercle9{
    top: 136vh;
    animation-delay: 450ms;
}
.cercle10{
    top: 153vh;
    animation-delay: 500ms;
}
.cercle11{
    top: 170vh;
    animation-delay: 550ms;
}
.cercle12{
    top: 187vh;
    animation-delay: 600ms;
}
.cercle13{
    top: 204vh;
    animation-delay: 650ms;
}
.cercle14{
    top: 221vh;
    animation-delay: 700ms;
}
.cercle15{
    top: 238vh;
    animation-delay: 750ms;
}
.cercle16{
    top: 255vh;
    animation-delay: 800ms;
}
.cercle17{
    top: 272vh;
    animation-delay: 850ms;
}
.cercle18{
    top: 289vh;
    animation-delay: 900ms;
}
.cercle19{
    top: 306vh;
    animation-delay: 950ms;
}
.cercle20{
    top: 323vh;
    animation-delay: 1s;
}


/* Animations verticales — descentes/montées organiques avec oscillation et rotation */
@keyframes deplacement-vertical-ligne1triangle{
    0%{
        transform: translate(0, -10vh) rotate(0deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    25%{
        transform: translate(2vw, 75vh) rotate(90deg);
    }
    50%{
        transform: translate(-2vw, 165vh) rotate(180deg);
    }
    75%{
        transform: translate(2vw, 250vh) rotate(270deg);
    }
    100%{
        transform: translate(0, 330vh) rotate(360deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
}
@keyframes deplacement-vertical-ligne2triangle{
    0%{
        transform: translate(0, 230vh) rotate(0deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    25%{
        transform: translate(-2vw, 105vh) rotate(-90deg);
    }
    50%{
        transform: translate(2vw, -20vh) rotate(-180deg);
    }
    75%{
        transform: translate(-2vw, -145vh) rotate(-270deg);
    }
    100%{
        transform: translate(0, -270vh) rotate(-360deg);
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
}
@keyframes modification-forme-triangle{
    0%, 25%{
        clip-path: polygon(0 0, 0% 100%, 100% 50%);
        animation-timing-function: cubic-bezier(1,0,0,0);
    }
    26%, 50%{
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        animation-timing-function: cubic-bezier(1,1,0,1);
    }
    51%, 75%{
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        animation-timing-function: cubic-bezier(1,.4,0,.6);
    }
    76%, 100%{
        clip-path: circle(50% at 50% 50%);
        animation-timing-function: cubic-bezier(1,0,0,0);
    }
}
/* Ensemble des triangles*/
.triangle1{
    left: 0;
    animation-delay: 50ms;
}
.triangle2{
    left: 10vw;
    animation-delay: 100ms;
}
.triangle3{
    left: 20vw;
    animation-delay: 150ms;
}
.triangle4{
    left: 30vw;
    animation-delay: 200ms;
}
.triangle5{
    left: 40vw;
    animation-delay: 250ms;
}
.triangle6{
    left: 50vw;
    animation-delay: 300ms;
}
.triangle7{
    left: 60vw;
    animation-delay: 350ms;
}
.triangle8{
    left: 70vw;
    animation-delay: 400ms;
}
.triangle9{
    left: 80vw;
    animation-delay: 450ms;
}
.triangle10{
    left: 90vw;
    animation-delay: 500ms;
}
.triangle11{
    left: 0;
    animation-delay: 550ms;
}
.triangle12{
    left: 10vw;
    animation-delay: 600ms;
}
.triangle13{
    left: 20vw;
    animation-delay: 650ms;
}
.triangle14{
    left: 30vw;
    animation-delay: 700ms;
}
.triangle15{
    left: 40vw;
    animation-delay: 750ms;
}
.triangle16{
    left: 50vw;
    animation-delay: 800ms;
}
.triangle17{
    left: 60vw;
    animation-delay: 850ms;
}
.triangle18{
    left: 70vw;
    animation-delay: 900ms;
}
.triangle19{
    left: 80vw;
    animation-delay: 950ms;
}
.triangle20{
    left: 90vw;
    animation-delay: 1s;
}


/* Trapèzes — mouvement vertical fluide avec dérive horizontale et rotation inverse */
@keyframes deplacement-vertical-ligne1trapeze{
    0%{
        transform: translate(0, 0) rotate(0deg);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
    25%{
        transform: translate(-1.5vw, 80vh) rotate(-45deg);
    }
    50%{
        transform: translate(1.5vw, 165vh) rotate(-90deg);
    }
    75%{
        transform: translate(-1.5vw, 250vh) rotate(-135deg);
    }
    100%{
        transform: translate(0, 330vh) rotate(-180deg);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
}
@keyframes deplacement-vertical-ligne2trapeze{
    0%{
        transform: translate(0, 600vh) rotate(0deg);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
    25%{
        transform: translate(2vw, 425vh) rotate(45deg);
    }
    50%{
        transform: translate(-2vw, 250vh) rotate(90deg);
    }
    75%{
        transform: translate(2vw, 75vh) rotate(135deg);
    }
    100%{
        transform: translate(0, -100vh) rotate(180deg);
        animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    }
}
@keyframes modification-forme-trapeze{
    0%, 25%{
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        animation-timing-function: cubic-bezier(1,0,0,0);
    }
    26%, 50%{
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        animation-timing-function: cubic-bezier(1,1,0,1);
    }
    51%, 75%{
        clip-path: inset(5% 20% 15% 10%);
        animation-timing-function: cubic-bezier(0,1,1,1);
    }
    76%, 100%{
        clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
        animation-timing-function: cubic-bezier(1,0,0,0);
    }
}
/* Ensemble des trapèzes */
.trapeze1{
    right: 0;
    animation-delay: 50ms;
}
.trapeze2{
    right: 10vw;
    animation-delay: 100ms;
}
.trapeze3{
    right: 20vw;
    animation-delay: 150ms;
}
.trapeze4{
    right: 30vw;
    animation-delay: 200ms;
}
.trapeze5{
    right: 40vw;
    animation-delay: 250ms;
}
.trapeze6{
    right: 50vw;
    animation-delay: 300ms;
}
.trapeze7{
    right: 60vw;
    animation-delay: 350ms;
}
.trapeze8{
    right: 70vw;
    animation-delay: 400ms;
}
.trapeze9{
    right: 80vw;
    animation-delay: 450ms;
}
.trapeze10{
    right: 90vw;
    animation-delay: 500ms;
}
.trapeze11{
    right: 0;
    animation-delay: 550ms;
}
.trapeze12{
    right: 10vw;
    animation-delay: 600ms;
}
.trapeze13{
    right: 20vw;
    animation-delay: 650ms;
}
.trapeze14{
    right: 30vw;
    animation-delay: 700ms;
}
.trapeze15{
    right: 40vw;
    animation-delay: 750ms;
}
.trapeze16{
    right: 50vw;
    animation-delay: 800ms;
}
.trapeze17{
    right: 60vw;
    animation-delay: 850ms;
}
.trapeze18{
    right: 70vw;
    animation-delay: 900ms;
}
.trapeze19{
    right: 80vw;
    animation-delay: 950ms;
}
.trapeze20{
    right: 90vw;
    animation-delay: 1s;
}


/*============================== MÉDIAS QUERY ============================== */
/*------------------------------ MÉDIAS QUERY POUR UNE TAILLE MAXIMUM DU VIEWPORT ------------------------------ */
/* Ici, ces paramètres permettent d'enlever la section des contacts dans le 'footer' puiqu'elle se trouve dans
le menu de navigation du bouton burger */
@media (max-width: 575px){
    #reprises-contact{
        display: none;
    }
}

/* ============================== DESKTOP — 768px et + ============================== */
/* Refonte propre : navigation horizontale dans le header, burger caché,
   sections Moi/Formations/Réalisations gardent leur layout grid déjà défini
   au niveau base. Aucune surcharge "width: 30%/45%/50%" qui cassaient le rendu. */
@media (min-width: 768px){

    /* La barre navigation prend tout l'espace dispo dans le header */
    .barre-navigation{
        flex: 1;
        align-items: center;
        justify-content: flex-end;
        gap: 1rem;
    }

    /* Navigation : panneau fixe → liste horizontale inline dans le header.
       !important pour battre la spécificité du sélecteur #bouton-menu-burger:checked
       qui pourrait sinon imposer width: 100vw même en desktop. */
    .navigation{
        position: static !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: flex-end;
        gap: .5rem;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: none;
        opacity: 1 !important;
        translate: 0 !important;
        transition: none;
    }

    /* Menus : pills compactes sans gradient persistant — soulignement animé au hover */
    .menu{
        position: relative;
        width: auto !important;
        height: auto !important;
        padding: .5rem 1.25rem;
        background: transparent !important;
        border: 1px solid transparent;
        border-radius: 999px;
        opacity: 1 !important;
        translate: 0 !important;
        font-size: clamp(.9rem, 1.1vw, 1rem);
        color: var(--c-text);
        font-weight: 500;
        margin: 0;
        transition: color 250ms ease, border-color 250ms ease, background 250ms ease;
    }
    /* On désactive le ::before gradient en desktop (visible uniquement en panneau mobile) */
    .menu::before{
        display: none;
    }
    .menu::after{
        content: "";
        position: absolute;
        left: 50%;
        bottom: 4px;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--c-primary), var(--c-warm));
        transform: translateX(-50%);
        transition: width 300ms ease;
    }
    .menu:hover{
        color: var(--c-primary);
        background: var(--c-surface-strong);
        border-color: var(--c-border);
        transform: none;
        box-shadow: none;
    }
    .menu:hover::after{
        width: 50%;
    }

    /* Coordonnées et burger : cachés en desktop (présents dans le panneau mobile uniquement) */
    .contact,
    .coordonnees,
    .bouton{
        display: none;
    }

    /* Section Formations : ne pas surcharger le grid 2 cols déjà défini.
       On laisse le base CSS gérer (grid-template-columns: minmax(280px, 1fr) 1.5fr) */
}