:root {
    --couleur-fond-page: #f8f9fa;
    --couleur-fond-carte: #fff;
    --couleur-bandeau-uqam: #A0206C;
    --couleur-section-titre: #972A61;
    --couleur-grand-titre: #4D4D4D;
    --couleur-texte-principal: #333;
    --couleur-texte-secondaire: #6c757d;
    --couleur-bordure-standard: #e0e0e0;
    --couleur-bordure-requise: #f1aeb5;

    --btn-primary-bg: #4e79a7;
    --btn-primary-hover: #3b5f85;
    --btn-success-bg: #59a14f;
    --btn-success-hover: #46823d;

    --rayon-bordure-principal: 8px;
    --espacement-vertical-section: 2rem;

    /* Hauteur approximative du bandeau, utilisee pour caler le hero juste dessous */
    --hauteur-bandeau: 70px;
}

/*body {*/
/*  background-color: var(--couleur-fond-page);*/
/*  color: var(--couleur-texte-principal);*/
/*  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;*/
/*}*/

body {
    /* Ajout d'un tres leger degrade fixe pour que le flou de la carte ait de la matiere a traiter */
    background: radial-gradient(circle at top right, rgba(160, 32, 108, 0.05), transparent 40%),
                linear-gradient(135deg, var(--couleur-fond-page) 0%, #e9ecef 100%);
    background-attachment: fixed;
    color: var(--couleur-texte-principal);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.badge-coord {
    font-size: 0.95rem;
    padding: 0.45em 0.75em;
    font-weight: 500;
}

.top-banner {
    background-color: var(--couleur-bandeau-uqam);
    padding: 22px 0;
    width: 100%;
}

.container-logo {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.logo {
    height: 28px;
    width: auto;
    display: block;
    max-width: 100%;
}

/*.top-banner {*/
/*  background-color: var(--couleur-bandeau-uqam);*/
/*  padding: 20px 0;*/
/*  width: 100%;*/
/*  box-shadow: 0 2px 4px rgba(0,0,0,0.1);*/
/*  position: relative;*/
/*  z-index: 10;*/
/*}*/
/**/
/*.container-logo {*/
/*  max-width: 1300px;*/
/*  margin-left: auto;*/
/*  margin-right: auto;*/
/*  padding-left: 1rem;*/
/*  padding-right: 1rem;*/
/*}*/

.container-fluid {
    margin-top: var(--espacement-vertical-section);
}

/*.card {*/
/*  border: none;*/
/*  border-radius: var(--rayon-bordure-principal);*/
/*  box-shadow: 0 4px 6px rgba(0,0,0,0.05);*/
/*}*/

.card {
    border: none;
    border-radius: var(--rayon-bordure-principal);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    background-color: var(--couleur-fond-carte);
}

/* Les "grands titres" : titres principaux des pages, en gris fonce */
.grand-titre {
    color: var(--couleur-grand-titre);
}

/* Les "titres de section" a l'interieur d'une page, en violet UQAM */
.section-title {
    color: var(--couleur-section-titre);
    border-bottom: 2px solid var(--couleur-bordure-standard);
}

/* h2 par defaut : couleur grise des grands titres + le liseret */
h2 {
    font-weight: bold;
    color: var(--couleur-grand-titre);
    border-bottom: 2px solid var(--couleur-bordure-standard);
    padding-bottom: 0.5rem;
}

a {
    color: var(--couleur-section-titre);
    text-decoration: underline;
}
a:hover {
    color: #6e1e48;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

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

.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-bg);
}

.btn-success:hover {
    background-color: var(--btn-success-hover);
    border-color: var(--btn-success-hover);
}

.contact-entry {
    border-color: var(--couleur-bordure-standard) !important;
}

.template-box {
    background-color: #f1f3f5;
    border-left: 4px solid var(--couleur-section-titre);
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

/* Liseret rouge clair sur les champs obligatoires vides.
   On exclut :focus pour ne pas distraire pendant la saisie. */
.form-control.is-required:not(:focus):invalid,
.form-select.is-required:not(:focus):invalid {
    border-color: var(--couleur-bordure-requise);
    border-width: 1.5px;
}

/* Champ de code de reprise : monospace et majuscules sur la saisie, placeholder normal */
.code-input {
    text-transform: uppercase;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.2em;
}
.code-input::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
    color: #adb5bd;
}

/* ============================================================
   HERO PLEIN VIEWPORT AVEC LE RESEAU EN ARRIERE PLAN
   ============================================================ */

/* Le conteneur du hero occupe tout l'ecran sous le bandeau.
   On positionne en absolu a l'interieur : svg en fond,
   couche de phrases au dessus, carte de texte tout en haut. */
.hero {
    position: relative;
    width: 100%;
    min-height: calc(100vh - var(--hauteur-bandeau));
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(160, 32, 108, 0.04), transparent 60%),
        linear-gradient(180deg, #fafbfc 0%, #eef0f3 100%);
}

.hero-viz {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none; /* On l'affiche apres reception des donnees */
    cursor: grab;
}
.hero-viz:active {
    cursor: grabbing;
}

.hero-phrases {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

.hero-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--couleur-texte-secondaire);
    font-size: 1.05rem;
    z-index: 1;
    text-align: center;
    padding: 0 1rem;
}
.hero-status.is-error {
    color: #b03a4d;
}

/* La couche cliquable au dessus du reseau : carte de texte et boutons.
   Le wrapper occupe tout le hero, on centre la carte avec flex.
   pointer-events: none permet de laisser les zones autour de la carte
   interactives pour le reseau (drag, zoom), pendant que la carte
   elle meme reste cliquable grace a un pointer-events: auto local. */
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--hauteur-bandeau));
    padding: 2.5rem 1rem;
    box-sizing: border-box;
    pointer-events: none;
}

/* La fameuse carte de verre qui se pose sur le reseau.
   On evite le piege "blanc opaque" : on laisse passer un peu de fond
   pour que le reseau reste perceptible derriere. */
.hero-glass {
    max-width: 640px;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 18px;
    box-shadow:
        0 12px 44px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 2.25rem 2.25rem 1.5rem;
    text-align: center;
    pointer-events: auto; /* On reactive l'interaction sur la carte */
}

.hero-titre {
    color: var(--couleur-grand-titre);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.6vw, 2.05rem);
    line-height: 1.22;
    margin-bottom: 0.4rem;
}

.hero-sous-titre {
    color: var(--couleur-section-titre);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.hero-description {
    color: var(--couleur-texte-principal);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

/* On surcharge la taille par defaut de Bootstrap pour avoir des boutons
   visibles sans qu'ils soient massifs. La hauteur reste confortable
   grace au padding vertical. */
.hero-actions .btn {
    border-radius: 10px;
    padding: 0.7rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(78, 121, 167, 0.18);
}

.hero-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(78, 121, 167, 0.25);
}

/*@media (min-width: 576px) {*/
/*  .hero-actions {*/
/*      flex-direction: row;*/
/*      justify-content: center;*/
/*  }*/
/*  .hero-actions .btn {*/
/*      flex: 1 1 0;*/
/*      max-width: 280px;*/
/*  }*/
/*}*/

@media (min-width: 576px) {
    .hero-actions {
        flex-direction: row;
        justify-content: center;
    }
    .hero-actions .btn {
        flex: 1 1 0;
        max-width: 320px; /* Augmenté pour laisser respirer le texte sur une seule ligne */
    }
}

.hero-footnote {
    color: var(--couleur-texte-secondaire);
    font-size: 0.82rem;
    margin-bottom: 0;
    margin-top: 0.5rem;
}

/* Reprise de questionnaire dans la carte : separee des boutons principaux
   par un fin liseret, et stylisee comme un complement discret. */
.hero-resume {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.hero-resume-label {
    color: var(--couleur-texte-secondaire);
    white-space: nowrap;
}

.hero-resume-input {
    width: 110px;
    flex: 0 0 auto;
}

.hero-resume-btn {
    white-space: nowrap;
}

/* ============================================================
   PETITES PHRASES QUI FLOTTENT SUR LE RESEAU
   ============================================================ */

/* Volontairement discretes : on cherche une presence sans imposition,
   comme des sous-titres de documentaire poses sur la scene. */
.phrase-flottante {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(151, 42, 97, 0.10);
    color: #555;
    font-size: 0.74rem;
    font-weight: 500;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 0.6s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85vw; /* Évite que la capsule sorte de l'écran sur mobile */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*.phrase-flottante::before {*/
/*  content: "";*/
/*  display: inline-block;*/
/*  width: 5px;*/
/*  height: 5px;*/
/*  border-radius: 50%;*/
/*  background: var(--couleur-section-titre);*/
/*  margin-right: 0.45rem;*/
/*  vertical-align: middle;*/
/*  opacity: 0.7;*/
/*}*/

.phrase-flottante.phrase-visible {
    opacity: 1;
}

/* ============================================================
   AJUSTEMENTS POUR PETITS ECRANS
   ============================================================ */

@media (max-width: 575.98px) {
    :root {
        --hauteur-bandeau: 54px;
    }
    .top-banner {
        padding: 14px 0;
    }
    .top-banner .fs-4 {
        font-size: 1.05rem !important;
    }
    .container-fluid {
        margin-top: 1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.15rem; }
    .card-body {
        padding: 1rem !important;
    }
    .template-box textarea {
        font-size: 0.85rem;
    }

    .hero-content {
        padding: 1.5rem 0.75rem;
    }
    .hero-glass {
        padding: 1.5rem 1.1rem 1.1rem;
        border-radius: 14px;
    }
    .hero-titre {
        font-size: 1.4rem;
    }
    .hero-sous-titre {
        font-size: 0.95rem;
        margin-bottom: 1.1rem;
    }
    .hero-description {
        font-size: 0.95rem;
        margin-bottom: 1.25rem;
    }
    .hero-actions .btn {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }
    .hero-resume {
        flex-direction: column;
        gap: 0.4rem;
        margin-top: 1rem;
        padding-top: 0.85rem;
    }
    .hero-resume-input {
        width: 150px;
    }
    .phrase-flottante {
        font-size: 0.68rem;
        padding: 0.24rem 0.6rem;
    }
}

/* ============================================================
   STYLE DES LETTRES D'INVITATION (remerciements.html)
   ============================================================ */
.lettre-invitation {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.lettre-header {
    background: #fafbfc;
    padding: 1.25rem 1.5rem;
    border-bottom: 2px dashed #e0e0e0; /* Effet pointille facon papier a detacher */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lettre-header:hover {
    background: #f1f3f5;
}

.lettre-body {
    padding: 2rem 1.5rem;
    position: relative;
}

/* Le filigrane en forme d'enveloppe en arriere-plan */
.lettre-body::before {
    content: "✉";
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 5rem;
    color: #f8f9fa;
    z-index: 0;
    pointer-events: none;
}

.lettre-contenu {
    position: relative;
    z-index: 1;
}

.lettre-destinataire {
    background: #fdfdfc;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    border-left: 4px solid var(--couleur-section-titre);
    margin-bottom: 2rem;
    font-family: system-ui, sans-serif;
    color: #555;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.02);
}

.lettre-textarea {
    width: 100%;
    border: none;
    background: transparent;
    resize: none;
    font-family: "Georgia", "Times New Roman", serif; /* Touche elegante facon lettre papier */
    font-size: 1.1rem;
    color: #2c3e50;
    line-height: 1.7;
    outline: none;
    box-shadow: none !important;
}

/* Ajustement lors du succes */
.lettre-header.bg-success {
    border-bottom: none;
}

/* Personnalisation institutionnelle de la palette de couleurs */
:root {
    /* Je surcharge intelligemment la couleur "success" par défaut de Bootstrap avec le vert Tableau 10 */
    --bs-success: #2ca02c;
    --bs-success-rgb: 44, 160, 44; /* Format RGB pour les transparences */
}

/* Je m'assure que les boutons utilisant cette classe héritent correctement de la nouvelle couleur institutionnelle */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #2ca02c;
    --bs-btn-border-color: #2ca02c;
    /* Je définis des variantes de survol légèrement plus sombres */
    --bs-btn-hover-bg: #248224;
    --bs-btn-hover-border-color: #217a21;
    --bs-btn-active-bg: #1e6b1e;
    --bs-btn-active-border-color: #1a5c1a;
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--couleur-texte-secondaire);
    font-size: 0.85rem;
    margin-top: auto;
}

.app-footer p {
    margin: 0;
}

.app-footer a {
    color: var(--couleur-section-titre);
    text-decoration: none;
    font-weight: 500;
}

.app-footer a:hover {
    text-decoration: underline;
}

/* Variante flottante au bas du hero pour la page d'accueil */
.app-footer.is-floating {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 10;
}

/* Rappel du code d'acces au debut du profil.
   Bleu doux issu de la palette Tableau 10, plus informatif que felicitatif. */
.code-rappel {
    background-color: #e6eef6;
    border: 1px solid #a0cbe8;
    color: #2c4a6b;
    border-radius: var(--rayon-bordure-principal);
    padding: 1rem 1.25rem;
}

.code-rappel h5 {
    color: #2c4a6b;
    margin-bottom: 0.5rem;
}

/* Pillule du code lui meme, en bleu Tableau 10 fonce.
   Monospace et lettres bien espacees pour la lisibilite du code. */
.code-rappel-pill {
    display: inline-block;
    background-color: #4e79a7;
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.95em;
}

/* Variante grand format de la pillule pour la page de remerciements,
   ou le code merite plus de place qu'un simple rappel inline */
.code-rappel-pill-lg {
    font-size: 1.6rem;
    padding: 0.4rem 1.2rem;
    letter-spacing: 0.18em;
}

/* ============================================================
   PAGE REMERCIEMENTS : section invitations
   ============================================================ */
    
/* Cadre tres leger autour des invitations, pour les lire comme un module
   d'action distinct du reste de la page sans tomber dans la bannière criarde */
.invitations-section {
    background: #fbfbfc;
    border: 1px solid var(--couleur-bordure-standard);
    border-radius: 12px;
    padding: 1.75rem;
}

@media (max-width: 575.98px) {
    .invitations-section {
        padding: 1rem;
    }
}

/* Jauge "X sur Y invitations envoyees" : compteur a gauche, barre en dessous.
   Volontairement sobre, pas de rouge ou de vert vif tant que tout n'est pas fait. */
.invitations-progress {
    background: #fff;
    border: 1px solid var(--couleur-bordure-standard);
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
}

.invitations-progress-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.invitations-progress-count {
    font-weight: 700;
    color: var(--couleur-grand-titre);
    font-size: 1.05rem;
}

.invitations-progress-label {
    color: var(--couleur-texte-secondaire);
    font-size: 0.9rem;
}

.invitations-progress-bar {
    height: 6px;
    background: #eef0f3;
    border-radius: 3px;
    overflow: hidden;
}

.invitations-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--btn-primary-bg);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Message de cloture quand toutes les invitations ont ete marquees comme envoyees.
   La seule occasion ou on s'autorise une teinte verte franche sur cette page. */
.invitations-complete {
    background: #e8f3ea;
    border: 1px solid #b8dcbf;
    color: #2c5b34;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

/* Lettre marquee comme envoyee : on attenue sa presence
   pour que l'oeil aille naturellement vers ce qui reste a faire */
.lettre-invitation.lettre-envoyee {
    opacity: 0.7;
    background: #fafbfc;
}

.lettre-invitation.lettre-envoyee .lettre-header {
    background: #f0f7f1;
}

/* Bouton principal d'envoi : on lui donne du poids visuel avec icone, taille,
   et une legere ombre coloree, pour qu'il ne se confonde plus avec
   le lien discret "j'ai deja envoye cette invitation" */
.btn-envoyer {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(78, 121, 167, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-envoyer:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(78, 121, 167, 0.28);
    color: #fff;
}

.btn-envoyer svg {
    flex-shrink: 0;
}

/* Bouton secondaire pour copier le bloc d'invitation. Sobre, en contour,
   pour qu'il ne fasse pas concurrence au bouton primaire d'envoi mais
   reste evident comme alternative quand mailto ouvre la mauvaise app */
.btn-copier {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    font-weight: 500;
    border-radius: 8px;
    background: #fff;
    color: var(--couleur-grand-titre);
    border: 1px solid var(--couleur-bordure-standard);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-copier:hover {
    background: #f4f6f8;
    border-color: #b9c2cc;
    color: var(--couleur-grand-titre);
}

.btn-copier svg {
    flex-shrink: 0;
}

/* Etat transitoire apres copie reussie : on passe au vert pour confirmer
   visuellement, le temps que le setTimeout remette le bouton dans son etat initial */
.btn-copier.btn-copier-confirme {
    background: #e8f3ea;
    border-color: #b8dcbf;
    color: #2c5b34;
}

/* Etat intermediaire pour les champs : ni invalide, ni valide, mais douteux.
   Utilise pour les codes postaux hors MRC : on ne bloque pas la soumission,
   on signale juste visuellement que ca merite verification */
.form-control.is-warning {
    border-color: #d4a017;
    box-shadow: 0 0 0 0.15rem rgba(212, 160, 23, 0.18);
}

/* Ligne des actions au bas de chaque lettre : bouton d'envoi a gauche,
   marquage discret a droite, separateur fin entre eux et le textarea */
.lettre-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* "J'ai deja envoye cette invitation" : transforme en lien sobre pour ne pas
   concurrencer le bouton bleu d'envoi du courriel */
.btn-mark-sent {
    background: none;
    border: none;
    color: var(--couleur-texte-secondaire);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0.4rem 0.5rem;
}

.btn-mark-sent:hover {
    color: var(--couleur-grand-titre);
    background: none;
}

.hero-exergue {
    background: rgba(255, 255, 255, 0.58);
    border-left: 4px solid var(--couleur-section-titre);
    border-radius: 8px;
    padding: 0.95rem 1.1rem;
    margin: 1.25rem 0 1.5rem;
    color: var(--couleur-grand-titre);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
}

/* Fenetre d'accueil de la version test. On reprend le verre du hero pour
   rester dans la meme famille visuelle, avec un liseré UQAM en haut. */
.test-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(40, 12, 32, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: testModalFond 0.3s ease;
}

.test-modal-card {
    max-width: 540px;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-top: 4px solid var(--couleur-bandeau-uqam);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    padding: 2rem 2rem 1.75rem;
    text-align: center;
    animation: testModalEntree 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.test-modal-titre {
    color: var(--couleur-bandeau-uqam);
    font-weight: 700;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
}

.test-modal-texte {
    color: var(--couleur-texte-principal);
    font-size: 0.98rem;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 1.5rem;
}

.test-modal-card .btn {
    border-radius: 10px;
    padding: 0.6rem 1.6rem;
    font-size: 0.95rem;
}

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

@keyframes testModalEntree {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}