/* _content/portfolio_siwa/Composants/Global/Footer/Footer.razor.rz.scp.css */
.pied[b-2t2ztgde4q] {
    /* Pas de marge haute : la section qui précède a déjà son propre espace en bas. Les deux
       s'ajoutaient, ce qui laissait un grand vide sous le dernier texte. */
    border-top: 1px solid var(--bordure);
    background: var(--fond-doux);
    padding-block: var(--e5);
    /* Le dernier bloc de la page ne doit pas finir sous la barre gestuelle. */
    padding-bottom: calc(var(--e5) + var(--marge-basse));
}

.pied__contenu[b-2t2ztgde4q] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);
}

.pied p[b-2t2ztgde4q] {
    margin: 0;
    color: var(--texte-discret);
    font-size: var(--t-petit);
}

.pied p a[b-2t2ztgde4q] {
    margin-left: var(--e2);
    color: var(--texte-doux);
}

.pied img[b-2t2ztgde4q] {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 600px) {
    .pied__contenu[b-2t2ztgde4q] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/portfolio_siwa/Composants/Global/NavBar/NavBar.razor.rz.scp.css */
.nav[b-kzlbz3dfgt] {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--hauteur-nav-totale);
    padding-top: var(--marge-haute);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background-color var(--transition), box-shadow var(--transition),
                backdrop-filter var(--transition);
}

/* Classe posée par le JS dès que la page défile. */
.nav.nav--posee[b-kzlbz3dfgt] {
    background: rgba(19, 21, 44, 0.82);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--bordure), var(--ombre-1);
}

.nav__contenu[b-kzlbz3dfgt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e4);
}

/* La marque : la croix occitane, puis le nom. */
.nav__identite[b-kzlbz3dfgt] {
    display: flex;
    align-items: center;
    gap: var(--e1);
    min-width: 0;
}

/* La cible fait 44 px, la croix 28 : le doigt la trouve sans qu'elle prenne de la place. */
.nav__croix[b-kzlbz3dfgt] {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
}

.nav__croix img[b-kzlbz3dfgt] {
    width: 1.75rem;
    height: auto;
    /* Légèrement penchée au repos : elle paraît posée là, pas alignée par un outil. */
    transform: rotate(-14deg);
    /* Le dépassement au milieu de la courbe donne un petit rebond, comme un ressort. */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter var(--transition);
}

/* Encore un peu de rotation quand on la vise, avec une lueur dorée : le seul halo de la barre,
   et seulement à l'interaction. */
.nav__croix:focus-visible img[b-kzlbz3dfgt] {
    transform: rotate(22deg) scale(1.1);
    filter: drop-shadow(0 0 7px rgba(255, 153, 19, 0.55));
}

@media (hover: hover) {
    .nav__croix:hover img[b-kzlbz3dfgt] {
        transform: rotate(22deg) scale(1.1);
        filter: drop-shadow(0 0 7px rgba(255, 153, 19, 0.55));
    }
}

/* Au doigt, il n'y a pas de survol : l'appui suffit à la faire tourner. */
@media (hover: none) {
    .nav__croix:active img[b-kzlbz3dfgt] {
        transform: rotate(30deg) scale(0.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav__croix img[b-kzlbz3dfgt] {
        transition: none;
    }
}

.nav__marque[b-kzlbz3dfgt] {
    display: inline-flex;
    align-items: center;
    /* Le texte seul ferait 29 px de haut : 44 px est la taille minimale d'une cible tactile. */
    min-height: 2.75rem;
    font-family: var(--police-titre);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--texte);
    text-decoration: none;
    white-space: nowrap;
}

.nav__menu[b-kzlbz3dfgt] {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.nav__menu a[b-kzlbz3dfgt] {
    position: relative;
    color: var(--texte-doux);
    font-size: var(--t-petit);
    font-weight: 500;
    text-decoration: none;
    padding-block: 0.5rem;
}

.nav__menu a:hover[b-kzlbz3dfgt] {
    color: var(--texte);
}

/* Soulignement animé, hors bouton CV. */
.nav__menu a:not(.nav__cv)[b-kzlbz3dfgt]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.15rem;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--gradient-accent);
    transition: width var(--transition);
}

.nav__menu a:not(.nav__cv):hover[b-kzlbz3dfgt]::after {
    width: 100%;
}

.nav__cv[b-kzlbz3dfgt] {
    color: #fff;
}

/* ===== Sélecteur de langue ===== */
/* Le composant SelecteurLangue porte son propre style. Ici : sa place dans le menu. */
.nav__langues[b-kzlbz3dfgt] {
    margin-left: var(--e2);
    padding-left: var(--e3);
    border-left: 1px solid var(--bordure);
}

.nav__burger[b-kzlbz3dfgt] {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.6rem;
    border: 1px solid var(--bordure);
    border-radius: var(--r-s);
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.nav__burger span[b-kzlbz3dfgt] {
    display: block;
    width: 100%;
    height: 2px;
    flex: 0 0 2px;
    border-radius: 2px;
    background: var(--texte);
    transition: transform var(--transition), opacity var(--transition);
}

/* Croix quand le menu est ouvert. */
.nav__burger[aria-expanded="true"] span:nth-child(1)[b-kzlbz3dfgt] {
    transform: translateY(7px) rotate(45deg);
}

.nav__burger[aria-expanded="true"] span:nth-child(2)[b-kzlbz3dfgt] {
    opacity: 0;
}

.nav__burger[aria-expanded="true"] span:nth-child(3)[b-kzlbz3dfgt] {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
    .nav__burger[b-kzlbz3dfgt] {
        display: flex;
    }

    .nav__menu[b-kzlbz3dfgt] {
        position: absolute;
        /* Accroché au bas de la barre plutôt qu'à une hauteur fixe : il suit
           l'encoche sans qu'on ait à refaire le calcul. */
        top: 100%;
        left: var(--marge-laterale);
        right: var(--marge-laterale);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e2);
        border: 1px solid var(--bordure);
        border-radius: var(--r-m);
        background: var(--fond-doux);
        box-shadow: var(--ombre-2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    }

    .nav__menu.ouvert[b-kzlbz3dfgt] {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .nav__menu li + li[b-kzlbz3dfgt] {
        border-top: 1px solid var(--bordure);
    }

    .nav__menu a[b-kzlbz3dfgt] {
        display: block;
        padding: 0.85rem 0.5rem;
        font-size: 1rem;
    }

    .nav__menu .nav__cv[b-kzlbz3dfgt] {
        margin-top: var(--e2);
        justify-content: center;
    }

    .nav__menu li:has(.nav__cv)[b-kzlbz3dfgt] {
        border-top: none;
    }

    /* Les trois langues se partagent la largeur du menu : des cibles larges au pouce. */
    .nav__menu .nav__langues[b-kzlbz3dfgt] {
        margin-left: 0;
        padding: var(--e2) 0 0;
        border-left: none;
    }

    .nav__langues[b-kzlbz3dfgt]  .langues {
        gap: var(--e2);
    }

    .nav__langues[b-kzlbz3dfgt]  .langue {
        flex: 1;
        border: 1px solid var(--bordure);
    }
}
/* _content/portfolio_siwa/Composants/Global/SelecteurLangue/SelecteurLangue.razor.rz.scp.css */
.langues[b-wyo02a3406] {
    display: flex;
    align-items: center;
    /* 8 px entre deux cibles : assez pour ne pas tomber sur la mauvaise langue au pouce. */
    gap: var(--e1);
}

.langue[b-wyo02a3406] {
    display: grid;
    place-items: center;
    /* 44 px : la taille minimale d'une cible tactile. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: var(--e2);
    border-radius: var(--r-s);
    color: var(--texte-discret);
    font-size: var(--t-petit);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: color var(--transition), background-color var(--transition);
}

.langue:hover[b-wyo02a3406] {
    color: var(--texte);
    background: rgba(255, 255, 255, 0.06);
}

.langue.actif[b-wyo02a3406] {
    color: var(--accent-doux);
    background: rgba(255, 255, 255, 0.06);
}
/* _content/portfolio_siwa/Composants/Layout/MainLayout.razor.rz.scp.css */
main[b-w9ych8cwxm] {
    display: block;
    min-height: 60vh;
}
/* _content/portfolio_siwa/Composants/Sections/APropos.razor.rz.scp.css */
.apropos[b-op95cr0yb6] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}

.apropos__texte[b-op95cr0yb6] {
    color: var(--texte-doux);
    max-width: var(--mesure);
}

/* Le seul halo « d'action » de la page : c'est ici qu'on veut que le visiteur écrive, et la carte
   doit l'appeler du regard. Les couleurs sont celles du site (orange et violet), là où les cartes
   d'organisations portent celles de leurs marques. */
.apropos__contact[b-op95cr0yb6] {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid transparent;
    border-radius: var(--r-l);
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 153, 19, 0.22) 0%, rgba(255, 153, 19, 0) 60%) padding-box,
        radial-gradient(100% 80% at 0% 100%, rgba(141, 125, 221, 0.2) 0%, rgba(141, 125, 221, 0) 60%) padding-box,
        linear-gradient(160deg, var(--surface) 0%, var(--fond-doux) 100%) padding-box,
        linear-gradient(140deg, rgba(141, 125, 221, 0.85) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(255, 153, 19, 0.85) 100%) border-box;
    box-shadow: 0 28px 54px -30px rgba(255, 153, 19, 0.55), var(--ombre-1);
}

.apropos__contact p[b-op95cr0yb6] {
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.apropos__actions[b-op95cr0yb6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
    margin-bottom: var(--e4);
}

.adresse[b-op95cr0yb6] {
    padding: 0.45rem 0.85rem;
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--r-s);
    background: transparent;
    color: var(--texte-doux);
    font-size: var(--t-petit);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}

.adresse:hover[b-op95cr0yb6] {
    color: var(--texte);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 860px) {
    .apropos[b-op95cr0yb6] {
        grid-template-columns: 1fr;
    }
}
/* _content/portfolio_siwa/Composants/Sections/CarteProjet.razor.rz.scp.css */
.carte[b-lqyrc47zhd] {
    --padding-carte: clamp(1rem, 2.5vw, 1.75rem);

    display: grid;
    /* Le visuel prend plus de place que le texte : c'est lui qui donne envie de lire. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 3.5vw, 3rem);
    padding: var(--padding-carte);
    border: 1px solid transparent;
    border-radius: var(--r-l);
    /* Deux couches : la surface de la carte, et sous elle un dégradé qui ne se voit que dans la
       bordure. Au repos il est neutre ; il prend les couleurs du site quand la carte est visée. */
    background:
        linear-gradient(160deg, var(--surface) 0%, var(--fond-doux) 100%) padding-box,
        linear-gradient(140deg, var(--bord-a, rgba(255, 255, 255, 0.1)) 0%, var(--bord-b, rgba(255, 255, 255, 0.1)) 100%) border-box;
    box-shadow: var(--ombre-1), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    transition: --bord-a var(--transition), --bord-b var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* Elle s'éclaire quand on la vise à la souris, ou qu'on touche un de ses éléments (un bouton,
   un lien) : la récompense arrive avec l'interaction, rien n'est permanent. */
.carte:focus-within[b-lqyrc47zhd] {
    --bord-a: var(--violet);
    --bord-b: var(--accent);
    box-shadow: 0 26px 52px -28px rgba(255, 153, 19, 0.4), var(--ombre-2);
}

@media (hover: hover) {
    .carte:hover[b-lqyrc47zhd] {
        --bord-a: var(--violet);
        --bord-b: var(--accent);
        box-shadow: 0 26px 52px -28px rgba(255, 153, 19, 0.4), var(--ombre-2);
        transform: translateY(-3px);
    }
}

.carte--inverse .carte__visuel[b-lqyrc47zhd] {
    order: 2;
}

.carte__visuel img[b-lqyrc47zhd] {
    width: 100%;
    /* Ratio naturel : recadrer une capture d'écran coupe son interface. */
    height: auto;
    border-radius: var(--r-m);
    border: 1px solid var(--bordure);
}

.carte__titre[b-lqyrc47zhd] {
    margin-block: var(--e2) var(--e1);
}

.carte__contexte[b-lqyrc47zhd] {
    margin-bottom: var(--e3);
    color: var(--texte-discret);
    font-size: var(--t-petit);
}

.carte__resume[b-lqyrc47zhd] {
    color: var(--texte-doux);
    margin-bottom: var(--e4);
}

.carte__liens[b-lqyrc47zhd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

/* Une seule colonne, visuel toujours en tête : même rythme d'un projet à l'autre. */
@media (max-width: 860px) {
    .carte[b-lqyrc47zhd] {
        grid-template-columns: 1fr;
        gap: var(--e4);
    }

    .carte--inverse .carte__visuel[b-lqyrc47zhd] {
        order: 0;
    }

    /* Le visuel vient toucher les bords de la carte : il gagne en présence. */
    .carte__visuel[b-lqyrc47zhd] {
        margin: calc(-1 * var(--padding-carte)) calc(-1 * var(--padding-carte)) 0;
    }

    .carte__visuel img[b-lqyrc47zhd] {
        border-width: 0 0 1px;
        border-radius: calc(var(--r-l) - 1px) calc(var(--r-l) - 1px) 0 0;
    }
}

/* _content/portfolio_siwa/Composants/Sections/CarteProjetCompacte.razor.rz.scp.css */
.compacte[b-vue1lekcuu] {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    padding: clamp(0.9rem, 2vw, 1.25rem);
    border: 1px solid transparent;
    border-radius: var(--r-m);
    /* Même principe que les grandes cartes : bordure neutre au repos, aux couleurs du site quand
       la carte est visée. */
    background:
        linear-gradient(var(--fond-carte, #181b38), var(--fond-carte, #181b38)) padding-box,
        linear-gradient(140deg, var(--bord-a, rgba(255, 255, 255, 0.1)) 0%, var(--bord-b, rgba(255, 255, 255, 0.1)) 100%) border-box;
    transition: --bord-a var(--transition), --bord-b var(--transition), --fond-carte var(--transition), box-shadow var(--transition);
}

.compacte:focus-within[b-vue1lekcuu] {
    --bord-a: var(--violet);
    --bord-b: var(--accent);
    --fond-carte: var(--surface);
    box-shadow: 0 20px 44px -28px rgba(255, 153, 19, 0.35);
}

@media (hover: hover) {
    .compacte:hover[b-vue1lekcuu] {
        --bord-a: var(--violet);
        --bord-b: var(--accent);
        --fond-carte: var(--surface);
        box-shadow: 0 20px 44px -28px rgba(255, 153, 19, 0.35);
    }
}

.compacte__visuel img[b-vue1lekcuu] {
    width: 100%;
    height: auto;
    border-radius: var(--r-s);
    border: 1px solid var(--bordure);
}

.compacte__meta[b-vue1lekcuu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin-bottom: var(--e1);
    color: var(--texte-discret);
    font-size: var(--t-micro);
}

/* Séparateur accroché à la fin du segment précédent : quand la ligne passe à la
   suivante, le point reste en fin de ligne au lieu de pendre au début. */
.compacte__meta span:not(:last-child)[b-vue1lekcuu]::after {
    content: "·";
    margin-left: 0.75rem;
}

.compacte__categorie[b-vue1lekcuu] {
    color: var(--accent-doux);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.compacte__titre[b-vue1lekcuu] {
    font-size: 1.15rem;
    margin-bottom: var(--e1);
}

.compacte__resume[b-vue1lekcuu] {
    margin-bottom: var(--e1);
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

/* ===== Description complète, repliable ===== */
.compacte__plus[b-vue1lekcuu] {
    margin-bottom: var(--e2);
}

.compacte__plus summary[b-vue1lekcuu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--accent-doux);
    font-size: var(--t-petit);
    font-weight: 600;
    cursor: pointer;
    /* Le triangle natif varie d'un navigateur à l'autre : remplacé par un chevron maison. */
    list-style: none;
}

.compacte__plus summary[b-vue1lekcuu]::-webkit-details-marker {
    display: none;
}

.compacte__plus summary[b-vue1lekcuu]::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.2rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition), margin-top var(--transition);
}

.compacte__plus[open] summary[b-vue1lekcuu]::after {
    margin-top: 0.2rem;
    transform: rotate(-135deg);
}

.compacte__complet[b-vue1lekcuu] {
    padding: var(--e2) var(--e3);
    border-left: 2px solid var(--bordure-forte);
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.compacte__complet > :last-child[b-vue1lekcuu] {
    margin-bottom: 0;
}

/* Moins d'air sous les puces qu'en grand format : la bulle reste lisible. */
.compacte .puces[b-vue1lekcuu] {
    margin-bottom: var(--e3);
}

.compacte__liens[b-vue1lekcuu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

@media (max-width: 720px) {
    .compacte[b-vue1lekcuu] {
        grid-template-columns: 1fr;
        gap: var(--e3);
    }
}
/* _content/portfolio_siwa/Composants/Sections/Contacts.razor.rz.scp.css */
.contacts[b-egcvt3xcuu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
}

.contact[b-egcvt3xcuu] {
    display: grid;
    place-items: center;
    /* Cible tactile de 3rem, même si l'icône est plus petite. */
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition), border-color var(--transition);
}

.contact img[b-egcvt3xcuu] {
    width: 1.5rem;
    height: 1.5rem;
}

@media (hover: hover) {
    .contact:hover[b-egcvt3xcuu] {
        transform: translateY(-2px);
        background: var(--surface-haute);
        border-color: var(--bordure-forte);
    }
}
/* _content/portfolio_siwa/Composants/Sections/Hero.razor.rz.scp.css */
.hero[b-bt0lspuej5] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    padding-top: calc(var(--hauteur-nav-totale) + clamp(1.5rem, 6vw, 4rem));
    /* La section suivante a déjà son propre espace en haut : inutile d'en rajouter autant. */
    padding-bottom: var(--e6);
}

/* Halo diffus derrière la photo : réchauffe le haut de page sans rien surcharger. */
.hero[b-bt0lspuej5]::before {
    content: "";
    position: absolute;
    top: -12%;
    right: -6%;
    width: min(46rem, 90%);
    aspect-ratio: 1 / 1;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(255, 153, 19, 0.16) 0%,
        rgba(141, 125, 221, 0.13) 38%,
        transparent 68%);
}

/* La photo est déclarée en premier dans le HTML pour arriver en tête sur mobile,
   c'est le premier écran depuis Instagram. L'ordre la renvoie à droite sur grand écran. */
.hero__photo[b-bt0lspuej5] {
    order: 2;
}

.hero__texte[b-bt0lspuej5] {
    order: 1;
}

/* Un fin anneau du dégradé des boutons : c'est la signature qui relie le haut de page au reste du site.
   Statique, sans lueur ajoutée : le halo diffus derrière la photo suffit. */
.hero__photo[b-bt0lspuej5] {
    width: fit-content;
    padding: 3px;
    border-radius: 50%;
    background: var(--gradient-accent);
    box-shadow: 0 26px 50px -26px rgba(255, 153, 19, 0.5), var(--ombre-2);
}

.hero__photo img[b-bt0lspuej5] {
    width: clamp(11rem, 26vw, 19rem);
    /* Indispensable : sans ça l'attribut height="900" de la balise l'emporte. */
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    /* Un liseré de la couleur du fond détache l'anneau de la photo. */
    border: 3px solid var(--fond);
}

.hero h1[b-bt0lspuej5] {
    margin-block: var(--e3) var(--e2);
}

.hero__role[b-bt0lspuej5] {
    font-family: var(--police-titre);
    font-size: clamp(1.05rem, 2.8vw, 1.35rem);
    color: var(--accent-doux);
    margin-bottom: var(--e4);
}

.hero__accroche[b-bt0lspuej5] {
    color: var(--texte-doux);
    margin-bottom: var(--e5);
}

.hero__accroche p[b-bt0lspuej5] {
    margin-bottom: var(--e3);
}

.hero__accroche p:last-child[b-bt0lspuej5] {
    margin-bottom: 0;
}

.hero__actions[b-bt0lspuej5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e3);
    margin-bottom: var(--e5);
}

@media (max-width: 860px) {
    .hero[b-bt0lspuej5] {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--e4);
    }

    .hero__photo[b-bt0lspuej5] {
        order: 0;
    }

    .hero__accroche[b-bt0lspuej5] {
        margin-inline: auto;
        /* Le titre reste centré, mais un paragraphe centré sur quatre lignes se lit mal. */
        text-align: left;
    }

    .hero__actions[b-bt0lspuej5] {
        justify-content: center;
    }

    /* Tout le haut de page est centré : les icônes de contact restaient seules à gauche. */
    .hero__contacts[b-bt0lspuej5]  .contacts {
        justify-content: center;
    }
}
/* _content/portfolio_siwa/Composants/Sections/Parcours.razor.rz.scp.css */
.parcours[b-4whxbs6613] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e4);
    margin-bottom: var(--e6);
}

/* Les quatre cartes d'une rangée ont la même hauteur, quelle que soit la longueur de leur texte. */
.parcours > li[b-4whxbs6613] {
    display: flex;
}

.parcours__carte[b-4whxbs6613] {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--e3);
    padding: var(--e4);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--r-l);
    /* Trois couches, de la plus haute à la plus basse : un reflet de la couleur de marque dans le
       coin, la surface de la carte, puis un dégradé de cette même couleur qui ne se voit que dans
       la bordure, seule zone que les deux premières couches ne recouvrent pas. */
    background:
        radial-gradient(130% 85% at 0% 0%, rgba(var(--teinte-rvb), 0.26) 0%, rgba(var(--teinte-rvb), 0) 62%) padding-box,
        linear-gradient(160deg, var(--surface) 0%, var(--fond-doux) 100%) padding-box,
        linear-gradient(140deg, rgba(var(--teinte-rvb), 0.85) 0%, rgba(255, 255, 255, 0.08) 45%, rgba(var(--teinte-rvb), 0.4) 100%) border-box;
    /* L'ombre est colorée : la carte semble éclairée par sa propre marque. */
    box-shadow: 0 24px 46px -28px rgba(var(--teinte-rvb), 0.65), var(--ombre-1);
    transition: transform var(--transition), box-shadow var(--transition);
}

@media (hover: hover) {
    .parcours__carte:hover[b-4whxbs6613] {
        transform: translateY(-5px);
        box-shadow: 0 32px 58px -26px rgba(var(--teinte-rvb), 0.9), var(--ombre-2);
    }
}

/* Au doigt, il n'y a pas de survol : l'appui doit se voir lui-même. */
@media (hover: none) {
    .parcours__carte:active[b-4whxbs6613] {
        transform: scale(0.985);
    }
}

.parcours__logo[b-4whxbs6613] {
    width: 100%;
    max-width: 8.75rem;
    height: auto;
    aspect-ratio: 7 / 4;
    border-radius: var(--r-m);
    /* Une plaque posée sur la carte : sa lueur reprend la couleur de la marque. */
    box-shadow: 0 18px 32px -14px rgba(var(--teinte-rvb), 0.8), 0 0 0 1px rgba(255, 255, 255, 0.12);
}

/* Un logo sans fond n'a pas de plaque : c'est lui qui rayonne. */
.parcours__logo--libre[b-4whxbs6613] {
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 0 18px rgba(var(--teinte-rvb), 0.55));
}

.parcours__lieu[b-4whxbs6613] {
    margin: 0;
    color: var(--teinte);
    font-size: var(--t-micro);
    font-weight: 700;
    /* Interligne fixé ici : la réserve de deux lignes plus bas se calcule dessus. */
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.parcours__role[b-4whxbs6613] {
    margin: 0.3rem 0 0;
    font-size: 1.2rem;
    line-height: 1.25;
}

.parcours__presentation[b-4whxbs6613] {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--t-petit);
    line-height: 1.6;
    text-wrap: pretty;
}

/* À quatre colonnes, « Institut occitan de l'Aveyron » passe sur deux lignes : sans réserve,
   son titre partirait plus bas que les trois autres. */
@media (min-width: 1081px) {
    .parcours__lieu[b-4whxbs6613] {
        min-height: 2.6em;
    }
}

@media (max-width: 1080px) {
    .parcours[b-4whxbs6613] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Sur téléphone, une colonne : le logo à gauche du titre, la présentation dessous en pleine largeur. */
@media (max-width: 640px) {
    .parcours[b-4whxbs6613] {
        grid-template-columns: 1fr;
        gap: var(--e3);
    }

    .parcours__carte[b-4whxbs6613] {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--e3);
        padding: var(--e3);
    }

    .parcours__logo[b-4whxbs6613] {
        width: 6rem;
    }

    .parcours__presentation[b-4whxbs6613] {
        grid-column: 1 / -1;
    }
}
/* _content/portfolio_siwa/Pages/Error.razor.rz.scp.css */
/* Même présentation que la page d'erreur de statut : le CSS isolé ne traverse
   pas d'un composant à l'autre, ces quelques règles vivent donc en double. */
.statut[b-sh7l73izzo] {
    padding-top: var(--hauteur-nav-totale);
}

.statut h1[b-sh7l73izzo] {
    margin-block: var(--e3) var(--e3);
}

.statut p[b-sh7l73izzo] {
    color: var(--texte-doux);
}

.statut code[b-sh7l73izzo] {
    font-size: var(--t-petit);
    word-break: break-all;
}
/* _content/portfolio_siwa/Pages/Index/Index.razor.rz.scp.css */
.liste-projets[b-d8urp3fd61] {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
}

.titre-sous-section[b-d8urp3fd61] {
    margin-top: var(--e7);
    margin-bottom: var(--e4);
    color: var(--texte-doux);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.liste-compacte[b-d8urp3fd61] {
    display: grid;
    gap: var(--e3);
}
/* _content/portfolio_siwa/Pages/MentionsLegales.razor.rz.scp.css */
.legales[b-o4k1p2ckf5] {
    padding-top: var(--hauteur-nav-totale);
}

.legales h1[b-o4k1p2ckf5] {
    margin-bottom: var(--e5);
}

.legales h2[b-o4k1p2ckf5] {
    font-size: 1.2rem;
    margin-top: var(--e5);
    margin-bottom: var(--e2);
}

.legales p[b-o4k1p2ckf5] {
    color: var(--texte-doux);
}
/* _content/portfolio_siwa/Pages/StatutErreur.razor.rz.scp.css */
.statut[b-lhde74uj1e] {
    padding-top: var(--hauteur-nav-totale);
}

.statut h1[b-lhde74uj1e] {
    margin-block: var(--e3) var(--e3);
}

.statut p[b-lhde74uj1e] {
    color: var(--texte-doux);
}