/**
*   Site : complète style.css pour le contenu saisi dans l'admin (projets, formations, expériences,
*   compétences, services, articles du blog, témoignages), les formulaires de contact et de témoignage, et les
*   bulles des résultats d'actions.
*/

:root {
    --danger: #FF5C5C;
    --success: #00A34C;
}

/* La phrase d'accroche en en-tête de section (partials/_section_intro.html.twig) : le cadre du texte qui
   défilait dans le template, sur toute la place libre, avec la phrase fixe, sur plusieurs lignes au besoin */
.section-header .section-intro {
    flex: 1;
}
/* Phrase sur deux lignes : le titre ou le bouton, étirés à sa hauteur, gardent leur texte centré */
.section-header:has(.section-intro) > :is(.subtitle, .theme-btn) {
    justify-content: center;
}
.section-intro p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(249, 249, 249, 0.70);
}
@media (max-width: 809px) {
    /* Sous le titre, sur toute la largeur, comme le template le fait pour l'en-tête des projets */
    .section-header:has(.section-intro) {
        flex-wrap: wrap;
    }
    .section-header .section-intro {
        flex-basis: 100%;
        order: 3;
    }
}

/* Les projets : la page qui les liste et « D'autres projets » prennent toute la largeur, comme les
   sections de l'accueil */
.project2-area {
    width: 100%;
}
/* Les images envoyées, de toutes proportions : recadrées comme celles du template (601 × 512), pour
   des cartes de même hauteur */
.project-area .project-slider-box .project-img img,
.project2-area .project-slider-box .project-img img {
    aspect-ratio: 601 / 512;
    object-fit: cover;
}
/* Sans image : un cadre de la même taille, avec une icône */
.project-slider-box .project-img-empty {
    aspect-ratio: 601 / 512;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.75px dashed rgba(252, 252, 252, 0.1);
}
.project-slider-box .project-img-empty i {
    font-size: 40px;
    color: var(--primary);
    opacity: .5;
}
/* Les cartes à flèche (projets, articles de l'accueil) : un titre long passe à la ligne avant la flèche, au lieu de
   glisser dessous comme ceux, courts, du template. La flèche (33 px, à 24 px du bord de la carte, dont 7 px de marge
   intérieure) laisse au texte la place jusqu'à 8 px d'elle */
.project-slider-box .project-content {
    padding-right: 58px;
}
.project-slider-box .project-content h3 {
    line-height: 1.25;
}
.page-message {
    padding: 50px 20px;
    text-align: center;
}
.page-message p {
    margin: 0;
    font-size: 14px;
    color: rgb(249 249 249 / 60%);
}
.page-message .theme-btn {
    margin-top: 22px;
}

/* La page introuvable (templates/bundles/TwigBundle/Exception/error404.html.twig) */
.error404 {
    padding: 50px 30px;
    text-align: center;
}
/* Le code, en traits comme le logo : bleus, effacés vers le bas */
.error404-code {
    margin: 0 0 18px;
    font-size: clamp(110px, 16vw, 190px);
    font-weight: 500;
    line-height: .9;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--primary);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 115%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 115%);
}
.error404-title {
    margin: 0 0 12px;
    font-size: 24px;
    letter-spacing: -0.75px;
    color: #F9F9F9;
}
.error404-text {
    max-width: 460px;
    margin: 0 auto 30px;
    font-size: 14px;
    line-height: 1.6;
    color: rgb(249 249 249 / 60%);
}
/* Les rubriques du site, dans des cases comme les chiffres de l'accueil (.project-experience) */
.error404-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 880px;
    margin: 0 auto 30px;
    padding: 0;
    list-style: none;
    text-align: left;
}
.error404-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px;
    border: .75px solid rgba(252, 252, 252, 0.05);
    background: linear-gradient(270deg, rgba(0, 170, 255, 0.04) 0%, rgba(0, 170, 255, 0.02) 100%);
    transition: border-color .5s;
}
.error404-links a:hover {
    border-color: rgb(14 133 198 / 30%);
}
.error404-link-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: .75px solid rgba(251, 251, 251, 0.1);
}
.error404-link-icon i {
    font-size: 20px;
    color: var(--primary);
}
.error404-link-title {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: #F9F9F9;
}
.error404-link-text {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #8E8E8E;
}
@media (max-width: 1181px) {
    .error404-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Sur un téléphone : toujours deux par ligne, le titre seul, pour garder le bouton de l'accueil en vue */
@media (max-width: 575px) {
    .error404 {
        padding: 40px 20px;
    }
    .error404-links {
        gap: 12px;
    }
    .error404-links a {
        gap: 10px;
        padding: 12px;
    }
    .error404-link-icon {
        width: 40px;
        height: 40px;
    }
    .error404-link-title {
        margin-bottom: 0;
    }
    .error404-link-text {
        display: none;
    }
}
/* Le filtre par catégorie de la page des projets, dans son en-tête : des cases comme le titre, celle de la
   catégorie affichée en bleu (comme les choix de l'admin) */
.project-filters {
    align-self: center;
}
.project-filters ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.project-filters a {
    display: inline-flex;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1;
    letter-spacing: .23px;
    color: rgb(249 249 249 / 60%);
    border: .75px solid rgb(252 252 252 / 5%);
    background: radial-gradient(51% 51% at 49% 48%, rgba(253, 253, 253, .05) 0%, rgba(253, 253, 253, 0) 100%);
    transition: .5s;
}
.project-filters a:hover {
    color: #F9F9F9;
    border-color: rgb(252 252 252 / 10%);
}
.project-filters a.is-active {
    color: var(--primary);
    border-color: rgb(0 170 255 / 40%);
    background: rgb(0 170 255 / 8%);
}
@media (max-width: 809px) {
    /* Sous le titre, sur toute la largeur */
    .section-header:has(.project-filters) {
        flex-wrap: wrap;
    }
    .project-filters {
        flex-basis: 100%;
    }
    .project-filters ul {
        justify-content: flex-start;
    }
}
/* Le détail d'un projet : son titre est le h1 de la page, avec le style que le template donne au h2 */
.project-detail-top .project-top-content h1 {
    color: #F9F9F9;
    font-size: 30px;
    letter-spacing: -0.75px;
    line-height: 1;
    margin: 0 0 20px;
}
.project-address-lists li .content a {
    color: var(--primary);
}
/* L'image principale ne dépasse pas la hauteur de l'écran, même pour une capture en portrait */
.project-details-hero-wrap .project-details-hero-img img {
    max-height: 75vh;
}
@media (max-width: 809px) {
    /* Les images des cartes ont alors une hauteur fixe (responsive.css) : le cadre la suit */
    .project-slider-box .project-img-empty {
        aspect-ratio: auto;
        height: 100%;
    }
}

/* Le blog : les images envoyées des cartes de l'accueil, recadrées comme celles du template (512 × 437, les
   proportions des projets) ; sur la page du blog, sans image, une icône à la hauteur de l'image */
.blog-area .project-slider-box .project-img img {
    aspect-ratio: 601 / 512;
    object-fit: cover;
}
.blog-box .img-box .blog-img-empty {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.75px dashed rgba(252, 252, 252, 0.1);
}
.blog-box .img-box .blog-img-empty i {
    font-size: 40px;
    color: var(--primary);
    opacity: .5;
}
/* La page d'un article : le contenu sur toute la largeur, un bloc de code trop large défilant dans son cadre */
.blog-detail-col-1 .problem-solution-box {
    flex: 1;
    min-width: 0;
}
/* Le contenu, converti du Markdown (filtre markdown) : les paragraphes gardent le style du template, le reste
   (titres, listes, liens, code, citations, tableaux) suit ses couleurs */
.blog-detail-col-1 .article-content > :first-child {
    margin-top: 0;
}
.blog-detail-col-1 .article-content > :last-child {
    margin-bottom: 0;
}
.blog-detail-col-1 .article-content :is(h2, h3, h4, h5, h6) {
    color: #F9F9F9;
    letter-spacing: -0.5px;
    line-height: 1.3;
    font-weight: 500;
    margin: 32px 0 14px;
}
.blog-detail-col-1 .article-content h2 {
    font-size: 22px;
}
.blog-detail-col-1 .article-content h3 {
    font-size: 18px;
}
.blog-detail-col-1 .article-content :is(h4, h5, h6) {
    font-size: 15px;
}
.blog-detail-col-1 .article-content :is(ul, ol) {
    margin: 0 0 20px;
    padding-left: 22px;
    font-size: 13px;
    line-height: 22.5px;
    letter-spacing: 0.23px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
}
.blog-detail-col-1 .article-content ul {
    list-style: disc;
}
.blog-detail-col-1 .article-content ol {
    list-style: decimal;
}
.blog-detail-col-1 .article-content li + li {
    margin-top: 6px;
}
.blog-detail-col-1 .article-content li > :is(ul, ol) {
    margin: 6px 0 0;
}
.blog-detail-col-1 .article-content li::marker {
    color: var(--primary);
}
.blog-detail-col-1 .article-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-detail-col-1 .article-content strong {
    color: #F9F9F9;
    font-weight: 500;
}
.blog-detail-col-1 .article-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
.blog-detail-col-1 .article-content :not(pre) > code {
    color: #F9F9F9;
    padding: 2px 6px;
    border: .75px solid rgba(252, 252, 252, 0.1);
    background: rgba(0, 170, 255, 0.06);
}
.blog-detail-col-1 .article-content pre {
    margin: 0 0 20px;
    padding: 18px;
    overflow-x: auto;
    border: .75px solid rgba(252, 252, 252, 0.1);
    background: rgb(0 0 0 / 35%);
    font-size: 12px;
    line-height: 1.6;
    color: #E6E6E6;
}
.blog-detail-col-1 .article-content blockquote {
    margin: 0 0 20px;
    padding: 4px 0 4px 18px;
    border-left: 2px solid var(--primary);
}
.blog-detail-col-1 .article-content blockquote p {
    color: rgba(255, 255, 255, 0.75);
    font-style: italic;
}
.blog-detail-col-1 .article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 20px;
    border: .75px solid rgba(252, 252, 252, 0.1);
}
.blog-detail-col-1 .article-content hr {
    margin: 28px 0;
    border: 0;
    border-top: 1px solid rgba(252, 252, 252, 0.15);
    opacity: 1;
}
/* Un tableau trop large défile, comme un bloc de code */
.blog-detail-col-1 .article-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 20px;
    border-collapse: collapse;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}
.blog-detail-col-1 .article-content :is(th, td) {
    padding: 10px 12px;
    border: .75px solid rgba(252, 252, 252, 0.1);
    text-align: left;
}
.blog-detail-col-1 .article-content th {
    color: #F9F9F9;
    font-weight: 500;
    background: rgba(0, 170, 255, 0.05);
}

/* La page À propos (about/index.html.twig), avec l'en-tête « Hero 2 » du template : la présentation, convertie du
   Markdown, garde le style des paragraphes de l'en-tête, dans une carte qui prend toute la place même quand elle est
   courte ; à côté, les chiffres dans le cadre des compteurs de l'accueil */
.hero2-area .hero-content-bottom .hero-content {
    flex: 1;
}
.about-bio > :last-child {
    margin-bottom: 0;
}
.about-bio :is(ul, ol) {
    margin: 0 0 22px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 26.7px;
    letter-spacing: 0.23px;
    font-weight: 300;
}
.about-bio ul {
    list-style: disc;
}
.about-bio ol {
    list-style: decimal;
}
.about-bio li::marker {
    color: var(--primary);
}
.about-bio a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.about-bio strong {
    color: #F9F9F9;
    font-weight: 500;
}
.about-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.about-facts .project-experience strong {
    display: block;
    color: #F9F9F9;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.75px;
    margin-bottom: 9px;
}
.about-facts .project-experience span {
    display: block;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.23px;
    color: #8E8E8E;
}
@media (max-width: 855px) {
    /* La carte des chiffres suit son contenu, au lieu des 300 px prévus pour le globe de l'accueil */
    .hero2-area .hero-content-bottom .hero-map-wrap {
        height: auto;
    }
}

/* Les logos envoyés : l'image entière dans le carré de 60 px, quelles que soient ses proportions
   (ceux du template, carrés, ne changent pas) */
.edc-and-exp-box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Sans logo : une icône, encadrée comme celles des services */
.edc-and-exp-box .img-box.is-icon {
    border: 0.75px solid rgba(252, 252, 252, 0.1);
    background: linear-gradient(180deg, rgba(0, 163, 255, 0.04) 0%, rgba(0, 163, 255, 0.02) 100%);
}
.edc-and-exp-box .img-box.is-icon i {
    font-size: 26px;
    color: var(--primary);
}

/* Les compteurs de l'accueil, dans leur propre section depuis le retrait des partenaires du template : le cadre que
   celle-ci leur donnait, comme aux autres sections */
.counters-area {
    width: 100%;
}
.counters-area .custom-container {
    border: 0.75px solid rgba(252, 252, 252, 0.05);
    background: linear-gradient(180deg, rgba(0, 163, 255, 0.05) 0%, rgba(0, 163, 255, 0.02) 100%);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}
/* Les compteurs de l'accueil : celui des années d'expérience mène au parcours (formations et expériences), sur la page
   À propos, et s'éclaire au survol comme les cartes */
a.project-experience {
    display: block;
    transition: border-color .5s;
}
a.project-experience:hover,
a.project-experience:focus-visible {
    border-color: rgb(14 133 198 / 30%);
}
.project-experience .project-experience-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1;
    color: var(--primary);
}
.project-experience .project-experience-more i {
    transition: transform .3s;
}
a.project-experience:hover .project-experience-more i {
    transform: translateX(3px);
}

/* Les services : titre et description s'arrêtent avant l'icône placée en haut à droite de la carte
   (les textes courts du template ne l'atteignaient pas) */
.service-box h3,
.service-box p {
    padding-right: 45px;
}

/* La page Contact : les erreurs du formulaire (contact/_form_theme.html.twig) en rouge comme dans l'admin, celles
   d'un champ dans la marge qui le suit, et le champ piège masqué pour tout le monde */
.contact-inner .contact-form form .contact-field.has-error :is(input, textarea) {
    border-color: rgb(255 92 92 / 45%);
}
.contact-errors {
    margin: -16px 0 24px;
}
.contact-errors li {
    font-size: 12px;
    line-height: 1.5;
    color: #FF7A7A;
}
.contact-errors.is-global {
    margin: 0 0 24px;
    padding: 14px 16px;
    border: .75px solid rgb(255 92 92 / 25%);
    background: rgb(255 92 92 / 4%);
}
.contact-trap {
    display: none;
}
/* Les coordonnées : des cases de même largeur, même au texte court (deux réseaux), comme le template les a sur
   mobile ; deux lignes d'une case (téléphone et e-mail, deux réseaux) espacées dans toutes les cases, une ligne
   seule sans espace (le template ne prévoyait que sa dernière case, avec deux lignes) */
.contact-infos ul li .content {
    flex: 1;
}
.contact-infos ul li .content p + p {
    margin-top: 10px;
}
.contact-infos ul li:last-child .content h3 + p:last-child {
    margin-top: 0;
}
.contact-infos ul li .content p a i {
    font-size: 15px;
    vertical-align: -2px;
}

/* Les témoignages (testimonial/_card.html.twig) : dans le carrousel, des cartes de même hauteur, quelle que soit la
   longueur des textes saisis ; le nom et la fonction s'arrêtent avant le logo, placé en haut à droite de la carte */
.testimonial-slider .swiper-slide {
    height: auto;
}
.testimonial-box {
    height: 100%;
}
.testimonial-box .content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.testimonial-box .content .content-bottom {
    flex: 1;
}
.testimonial-box .content .content-top {
    padding-right: 72px;
}
.testimonial-box .content .content-top h3 {
    line-height: 1.2;
}
.testimonial-box .content .content-top span {
    line-height: 1.4;
}
/* Une photo envoyée, de toutes proportions, recadrée en carré ; sans photo, les initiales */
.testimonial-box .img-box img {
    height: 100%;
}
.testimonial-box .img-box.is-initials {
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .5px;
    color: var(--primary);
}
/* Le logo de l'entreprise, ou des guillemets à défaut, dans le cadre que dessinaient les icônes du template */
.testimonial-box .content .content-top .icon {
    border: .75px solid rgba(252, 252, 252, 0.05);
    background: linear-gradient(180deg, rgba(0, 163, 255, 0.04) 0%, rgba(0, 163, 255, 0.02) 100%);
}
.testimonial-box .content .content-top .icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.testimonial-box .content .content-top .icon i {
    font-size: 22px;
    color: var(--primary);
}
.testimonial-box blockquote {
    margin: 0;
}
/* Le projet dont parle le témoignage, sous son texte */
.testimonial-project {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 12px;
    line-height: 1.4;
    color: rgb(249 249 249 / 70%);
    transition: .5s;
}
.testimonial-project i {
    font-size: 15px;
    color: var(--primary);
}
.testimonial-project:hover {
    color: var(--primary);
}
/* Sans carrousel (page d'un projet, remerciements) : deux cartes par ligne comme dans le carrousel, une seule sous
   1200 px comme lui aussi */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.testimonial-thanks-area .page-message {
    margin-bottom: 18px;
}
@media (max-width: 1199px) {
    .testimonial-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Le formulaire du lien d'invitation à témoigner (testimonial/write.html.twig) : celui de la page Contact, avec la photo
   et la case d'accord, qui gardent leur libellé à l'écran (testimonial/_form_theme.html.twig) */
/* Un texte de plusieurs lignes : l'interligne des champs d'une ligne (1) les serrerait */
.testimonial-write-area .contact-inner .contact-form form textarea {
    height: 170px;
    line-height: 1.6;
}
/* « Comment ça marche », dans les cases des coordonnées : des phrases, que le template coupait n'importe où (pour
   les adresses e-mail longues), avec le lien vers la page Contact dans la phrase, même sur mobile */
.testimonial-write-area .contact-infos ul li .content {
    word-break: normal;
    overflow-wrap: break-word;
}
.testimonial-write-area .contact-infos ul li .content p a {
    display: inline;
    text-decoration: underline;
}
.contact-inner .contact-form form .contact-field-file,
.contact-inner .contact-form form .contact-field-checkbox {
    margin-bottom: 24px;
}
.contact-field-file label {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    color: rgb(249 249 249 / 60%);
}
.contact-inner .contact-form form input[type="file"] {
    margin-bottom: 0;
    padding: 10px;
    font-size: 12px;
    line-height: normal;
    color: rgb(249 249 249 / 60%);
    cursor: pointer;
    border-style: dashed;
    border-color: rgba(252, 252, 252, 0.1);
}
/* Le bouton du fichier, comme celui de l'admin */
.contact-inner .contact-form form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 10px 14px;
    font: inherit;
    font-size: 13px;
    color: #F9F9F9;
    cursor: pointer;
    border: .75px solid rgba(252, 252, 252, 0.1);
    background: linear-gradient(270deg, rgba(0, 170, 255, 0.05) 0%, rgba(0, 170, 255, 0.04) 100%);
    transition: .5s;
}
.contact-inner .contact-form form input[type="file"]::file-selector-button:hover {
    color: var(--primary);
    border-color: rgb(14 133 198 / 30%);
}
.contact-field-file .help-text {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: rgb(249 249 249 / 45%);
}
.contact-field-checkbox {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}
.contact-inner .contact-form form input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    padding: 0;
    cursor: pointer;
    accent-color: var(--primary);
}
.contact-field-checkbox label {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgb(249 249 249 / 80%);
    cursor: pointer;
}
.contact-field-file .contact-errors,
.contact-field-checkbox .contact-errors {
    flex-basis: 100%;
    margin: 8px 0 0;
}

/* La sidebar sans réseaux sociaux (aucun lien dans Mes informations) : le copyright, seul en bas, prend
   toute la largeur, comme dans le menu mobile (la sidebar réduite, sous 1440 px, ne montre que lui) */
@media (min-width: 1440px) {
    .sticky-sidebar .sticky-sidebar-inner .sidebar-bottom .copyright-text:only-child {
        flex: 1;
        justify-content: center;
    }
}
/* Le menu mobile ouvert : la hauteur prévue par le template pour ses six entrées, moins une de 51px (la galerie,
   retirée) ; avec le lien vers l'admin (connecté), une de plus (comme celui de l'admin, dans admin.css) */
@media (max-width: 809px) {
    .sticky-sidebar.active-nav {
        height: calc(561px - 51px);
    }
    .sticky-sidebar.active-nav:has(.sidebar-admin-link) {
        height: 561px;
    }
}

/* Les bulles des résultats d'actions (partials/_toasts.html.twig) : le composant Toast de Bootstrap, avec
   les bordures et dégradés du template, en bas à droite de l'écran */
.site-toasts {
    --bs-toast-spacing: 10px;
    position: fixed;
    right: 24px;
    bottom: 24px;
    /* Au-dessus du menu mobile ouvert (responsive.css) */
    z-index: 1000000;
    width: 360px;
}
/* En développement, au-dessus de la barre de débogage de Symfony */
body:has(> [id^="sfwdt"]) .site-toasts {
    bottom: 60px;
}
.site-toast {
    --bs-toast-max-width: 100%;
    --bs-toast-font-size: 13px;
    --bs-toast-color: #F9F9F9;
    --bs-toast-bg: rgb(6 15 21 / 92%);
    --bs-toast-border-width: .75px;
    --bs-toast-border-color: rgba(252, 252, 252, 0.1);
    --bs-toast-border-radius: 0;
    --bs-toast-box-shadow: 0 10px 30px rgb(0 0 0 / 50%);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background-image: linear-gradient(-90deg, rgba(0, 170, 255, 0.06) 0%, rgba(0, 170, 255, 0.03) 100%);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    transition: opacity .3s ease, transform .3s ease;
}
/* À l'apparition et à la disparition (classe posée par Bootstrap) : elle glisse depuis la droite */
.site-toast.showing {
    transform: translateX(24px);
}
.site-toast-danger {
    --bs-toast-border-color: rgb(255 92 92 / 25%);
}
.site-toast-icon {
    flex: none;
    font-size: 20px;
    color: var(--primary);
}
.site-toast-success .site-toast-icon {
    color: var(--success);
}
.site-toast-danger .site-toast-icon {
    color: var(--danger);
}
.site-toast-message {
    flex: 1;
    margin: 0;
    padding-top: 1px;
    line-height: 1.5;
}
.site-toast-close {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-size: 16px;
    line-height: 1;
    color: rgb(249 249 249 / 50%);
    transition: .5s;
}
.site-toast-close:hover,
.site-toast-close:focus-visible {
    color: #ffffff;
}
@media (max-width: 809px) {
    .site-toasts {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .site-toast {
        transition: none;
    }
}