/* ==========================================================================
   Album Fête : feuille de style principale
   ========================================================================== */

:root {
    --prune: #2a1a3e;
    --papier: #fbfafd;
    --lilas: #e6ddf3;
    --lilas-fonce: #cfc3e0;
    --souci: #f5b31b;
    --souci-clair: #ffc53d;
    --framboise: #c2255c;
    --gris: #6b5f7a;
    --nuit: #140c1e;
    --blanc: #ffffff;
    --rayon: 14px;
    --largeur: 1080px;
    --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--prune);
    font-family: var(--police);
    font-size: 1.0625rem;
    line-height: 1.55;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--framboise);
    outline-offset: 3px;
}

/* En-tête
   ========================================================================== */

.entete {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 20px;
}

.entete__marque {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}

/* Pied de page
   ========================================================================== */

.pied {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 20px 20px 32px;
    border-top: 2px solid var(--lilas);
}

.pied__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pied__lien {
    color: var(--gris);
    font-size: 0.95rem;
}

.pied__lien:hover {
    color: var(--prune);
}

/* Petites mentions sous les boutons
   ========================================================================== */

.note-legale {
    margin: 12px 0 0;
    color: var(--gris);
    font-size: 0.9rem;
}

.note-legale--centree {
    text-align: center;
}

/* Pages de texte (mentions légales, conditions de vente, confidentialité)
   ========================================================================== */

.texte > * {
    max-width: 68ch;
}

.texte__titre {
    margin: 0 0 24px;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.texte h2 {
    margin: 32px 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.texte p,
.texte ul {
    margin: 0 0 12px;
}

.texte ul {
    padding-left: 22px;
}

.texte li {
    margin-bottom: 8px;
}

/* Mise en page commune
   ========================================================================== */

.page {
    max-width: var(--largeur);
    margin: 0 auto;
    padding: 8px 20px 72px;
}

/* Accueil
   ========================================================================== */

.accueil {
    display: grid;
    gap: 44px;
}

.accueil__titre {
    max-width: 15ch;
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.accueil__texte {
    max-width: 46ch;
    margin: 0;
    color: var(--gris);
    font-size: 1.125rem;
}

.accueil__sous-titre {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

/* Pile de photos décorative
   ========================================================================== */

.pile {
    position: relative;
    height: 150px;
    margin-top: 32px;
}

.pile__photo {
    position: absolute;
    top: 10px;
    width: 110px;
    height: 132px;
    padding: 7px 7px 28px;
    border: 1px solid var(--lilas);
    background: var(--blanc);
    box-shadow: 0 10px 24px rgba(42, 26, 62, 0.16);
}

.pile__photo::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
}

.pile__photo--1 {
    left: 0;
    transform: rotate(-7deg);
}

.pile__photo--1::before {
    background: linear-gradient(160deg, #f5b31b, #f08a4b);
}

.pile__photo--2 {
    top: 0;
    left: 72px;
    z-index: 1;
    transform: rotate(3deg);
}

.pile__photo--2::before {
    background: linear-gradient(160deg, #7b5cc4, #2a1a3e);
}

.pile__photo--3 {
    left: 148px;
    transform: rotate(9deg);
}

.pile__photo--3::before {
    background: linear-gradient(160deg, #e86a92, #c2255c);
}

/* Carte (formulaire)
   ========================================================================== */

.carte {
    padding: 28px 24px;
    border: 2px solid var(--prune);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: 8px 8px 0 var(--lilas);
}

.carte__titre {
    margin: 0 0 20px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.carte__note {
    margin: 14px 0 0;
    color: var(--gris);
    font-size: 0.95rem;
    text-align: center;
}

/* Champs de formulaire
   ========================================================================== */

.champ {
    margin-bottom: 18px;
}

.champ__libelle {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.champ__saisie {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 10px;
    background: var(--blanc);
    color: var(--prune);
    font: inherit;
}

.champ__saisie:focus {
    border-color: var(--prune);
    outline: 3px solid var(--lilas);
    outline-offset: 0;
}

.champ__saisie--erreur {
    border-color: var(--framboise);
}

.champ__aide {
    margin: 6px 0 0;
    color: var(--gris);
    font-size: 0.9rem;
}

.champ__erreur {
    margin: 6px 0 0;
    color: var(--framboise);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Bouton
   ========================================================================== */

.bouton {
    display: inline-block;
    width: 100%;
    padding: 14px 20px;
    border: 2px solid var(--prune);
    border-radius: 999px;
    background: var(--souci);
    color: var(--prune);
    font: inherit;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.bouton:hover {
    background: var(--souci-clair);
}

.bouton:active {
    transform: translateY(1px);
}

.bouton--secondaire {
    background: var(--blanc);
}

.bouton--secondaire:hover {
    background: var(--lilas);
}

/* Étapes « Comment ça marche »
   ========================================================================== */

.etapes {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes__element {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    counter-increment: etape;
}

.etapes__element::before {
    content: counter(etape);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--prune);
    color: var(--papier);
    font-weight: 800;
}

/* Page de gestion et page des invités
   ========================================================================== */

.gestion > *,
.invite > * {
    max-width: 680px;
}

.gestion__titre,
.invite__titre {
    margin: 0 0 4px;
    font-size: clamp(1.9rem, 5vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gestion__date,
.invite__date {
    margin: 0;
    color: var(--gris);
}

.gestion__section,
.invite__section {
    margin-top: 36px;
}

.gestion__sous-titre,
.invite__sous-titre {
    margin: 0 0 8px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.gestion__texte,
.invite__texte {
    margin: 0;
    color: var(--gris);
}

.rappel {
    margin: 24px 0 0;
    padding: 14px 16px;
    border-left: 5px solid var(--souci);
    background: var(--blanc);
}

.rappel__texte {
    margin: 0 0 12px;
}

.rappel__renvoi {
    margin: 14px 0 0;
    color: var(--gris);
    font-size: 0.95rem;
}

/* Bouton présenté comme un lien dans une phrase
   ========================================================================== */

.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    color: var(--prune);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.lien-bouton:hover {
    color: var(--framboise);
}

/* Adresse à copier
   ========================================================================== */

.copie {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.copie__adresse {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 12px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 10px;
    background: var(--papier);
    color: var(--prune);
    font: inherit;
    font-size: 0.95rem;
}

.copie__adresse:focus {
    border-color: var(--prune);
    outline: 3px solid var(--lilas);
    outline-offset: 0;
}

.copie__bouton {
    flex: 0 0 auto;
    width: auto;
    padding: 10px 18px;
}

.copie__etat {
    margin: 10px 0 0;
    color: var(--framboise);
    font-size: 0.95rem;
    font-weight: 600;
}

.copie__etat:empty {
    display: none;
}

.gestion__section .copie {
    margin-top: 10px;
}

/* QR code
   ========================================================================== */

.qr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 16px 0 24px;
}

.qr__image {
    display: block;
    width: 220px;
    height: 220px;
    padding: 8px;
    border: 2px solid var(--prune);
    border-radius: var(--rayon);
    background: var(--blanc);
}

.qr__telecharger {
    width: auto;
}

.qr__impression {
    display: grid;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

/* Envoi de photos (page des invités)
   ========================================================================== */

.envoi {
    margin-top: 24px;
}

.envoi__boutons {
    display: grid;
    gap: 10px;
}

.envoi__champ {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.envoi__champ:focus-visible + .envoi__bouton {
    outline: 3px solid var(--framboise);
    outline-offset: 3px;
}

.envoi--en-cours .envoi__bouton {
    opacity: 0.6;
    cursor: progress;
}

.envoi--complet .envoi__bouton {
    display: none;
}

.envoi__etat,
.envoi__complet {
    margin: 12px 0 0;
    font-weight: 600;
}

.envoi__etat:empty {
    display: none;
}

.envoi__complet {
    margin-top: 24px;
}

/* Galerie de photos
   ========================================================================== */

.galerie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.galerie__lien {
    display: block;
}

.galerie__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--lilas);
    object-fit: cover;
}

.galerie__supprimer {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 8px;
    background: var(--blanc);
    color: var(--framboise);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.galerie__supprimer:hover {
    border-color: var(--framboise);
}

.gestion__telecharger {
    width: auto;
}

.gestion__telecharger[hidden] {
    display: none;
}

.gestion__diaporama {
    width: auto;
    margin: 14px 0 22px;
}

/* Livre d'or
   ========================================================================== */

.livre > * {
    max-width: 680px;
}

.invite__livre {
    margin-top: 14px;
}

.gestion__livre {
    width: auto;
    margin-top: 14px;
}

.livre__retour {
    margin: 16px 0 0;
    font-weight: 700;
}

.livre__formulaire {
    margin-top: 24px;
}

.livre__saisie {
    display: block;
    min-height: 150px;
    resize: vertical;
}

.livre__complet {
    margin: 24px 0 0;
    font-weight: 600;
}

.livre__liste {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.livre__message {
    padding: 16px 18px;
    border-left: 5px solid var(--souci);
    background: var(--blanc);
}

.livre__texte {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.livre__auteur {
    margin: 10px 0 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.livre__supprimer {
    margin-top: 12px;
    padding: 6px 14px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 8px;
    background: var(--blanc);
    color: var(--framboise);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.livre__supprimer:hover {
    border-color: var(--framboise);
}

@media (min-width: 860px) {
    .invite__livre {
        width: auto;
    }
}

/* Invitation
   ========================================================================== */

.invitation > * {
    max-width: 680px;
}

.gestion__invitation {
    width: auto;
    margin-top: 14px;
}

.invitation__retour {
    margin: 16px 0 0;
    font-weight: 700;
}

/* Carton d'invitation, sur la page des invités */

.invitation__carton {
    padding: 28px 24px;
    border: 2px solid var(--prune);
    border-radius: var(--rayon);
    background: var(--blanc);
    box-shadow: 8px 8px 0 var(--souci);
    text-align: center;
}

.invitation__annonce {
    margin: 0 0 8px;
    color: var(--framboise);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.invitation__titre {
    margin: 0;
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.invitation__details {
    margin-top: 18px;
    font-size: 1.15rem;
    font-weight: 700;
}

.invitation__detail {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}

.invitation__mot {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 2px solid var(--lilas);
    overflow-wrap: anywhere;
    white-space: pre-line;
}

/* Réponse d'un invité */

.invitation__formulaire {
    margin-top: 36px;
}

.invitation__sous-titre {
    margin: 0 0 14px;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.invitation__choix {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.invitation__question {
    margin-bottom: 6px;
    padding: 0;
    font-weight: 700;
}

.invitation__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.invitation__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 10px;
    background: var(--blanc);
    font-weight: 700;
    cursor: pointer;
}

.invitation__option:has(input:checked) {
    border-color: var(--prune);
    background: var(--lilas);
}

.invitation__option input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--prune);
}

.invitation__nombre .champ__saisie {
    max-width: 140px;
}

.invitation__nombre[hidden],
.partage__bouton[hidden] {
    display: none;
}

.invitation__autre {
    margin: 14px 0 0;
    font-weight: 700;
}

.invitation__fermee {
    margin: 24px 0 0;
    font-weight: 600;
}

.invitation__album {
    margin: 28px 0 0;
    color: var(--gris);
}

/* Préparation de l'invitation, sur la page de l'organisateur */

.invitation__formulaire-details {
    margin-top: 18px;
}

.invitation__date {
    max-width: 200px;
}

.invitation__heure {
    max-width: 160px;
}

.invitation__saisie-mot {
    display: block;
    min-height: 120px;
    resize: vertical;
}

.invitation__enregistrer {
    width: auto;
}

.invitation__voir {
    margin: 14px 0 0;
    font-weight: 700;
}

.invitation__ou {
    margin-top: 18px;
}

.partage {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.partage__bouton {
    flex: 1 1 220px;
    width: auto;
}

/* Réponses des invités */

.reponses__total {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.reponses__detail {
    margin: 2px 0 0;
    color: var(--gris);
}

.reponses__vide {
    margin: 14px 0 0;
    color: var(--gris);
}

.reponses__liste {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.reponses__reponse {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 12px 16px;
    border-left: 5px solid var(--souci);
    background: var(--blanc);
}

.reponses__reponse--non {
    border-left-color: var(--lilas-fonce);
}

.reponses__nom {
    flex: 1 1 200px;
    min-width: 0;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.reponses__reponse--non .reponses__presence {
    color: var(--gris);
}

.reponses__supprimer {
    padding: 6px 14px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 8px;
    background: var(--blanc);
    color: var(--framboise);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}

.reponses__supprimer:hover {
    border-color: var(--framboise);
}

/* État de l'album (nombre de photos)
   ========================================================================== */

.etat {
    margin-top: 28px;
    padding: 22px 20px;
    border-radius: var(--rayon);
    background: var(--lilas);
}

.etat__titre {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.etat__chiffre {
    margin: 4px 0 10px;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.etat__texte {
    margin: 10px 0 0;
}

.etat__debloquer {
    margin-top: 16px;
}

.etat__bouton {
    width: auto;
}

/* Messages d'information (résultat d'un paiement)
   ========================================================================== */

.message {
    margin: 24px 0 0;
    padding: 14px 16px;
    border: 2px solid var(--lilas-fonce);
    border-radius: 10px;
    background: var(--blanc);
    font-weight: 600;
}

.message--succes {
    border-color: var(--prune);
    background: var(--lilas);
}

.message--erreur {
    border-color: var(--framboise);
    color: var(--framboise);
}

.jauge {
    display: block;
    width: 100%;
    height: 12px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--blanc);
    -webkit-appearance: none;
    appearance: none;
}

.jauge::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--blanc);
}

.jauge::-webkit-progress-value {
    border-radius: 999px;
    background: var(--prune);
}

.jauge::-moz-progress-bar {
    border-radius: 999px;
    background: var(--prune);
}

/* Écrans larges
   ========================================================================== */

@media (min-width: 860px) {
    .accueil {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 56px 64px;
        align-items: start;
        padding-top: 32px;
    }

    .accueil__etapes {
        grid-column: 1 / -1;
    }

    .etapes {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .pile {
        height: 200px;
        margin-top: 44px;
    }

    .pile__photo {
        width: 150px;
        height: 178px;
        padding: 9px 9px 36px;
    }

    .pile__photo--2 {
        left: 100px;
    }

    .pile__photo--3 {
        left: 206px;
    }

    .galerie {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .envoi__boutons {
        grid-template-columns: 1fr 1fr;
    }
}

/* Très grands écrans : le QR code passe en haut à droite de la page de gestion
   ==========================================================================
   La page devient une grille à deux colonnes. Le bloc du QR code occupe la
   colonne de droite sur toute la hauteur, quel que soit son contenu. */

@media (min-width: 1080px) {
    .gestion {
        display: grid;
        grid-template-columns: minmax(0, 680px) 320px;
        column-gap: 40px;
        align-items: start;
    }

    .gestion > * {
        grid-column: 1;
    }

    .gestion > .gestion__qr {
        grid-column: 2;
        grid-row: 1 / span 12;
        margin-top: 8px;
        padding: 20px;
        border: 2px solid var(--prune);
        border-radius: var(--rayon);
        background: var(--blanc);
    }

    .gestion__qr .qr {
        margin-bottom: 20px;
    }

    .gestion__qr .qr__image {
        width: 100%;
        height: auto;
    }

    .gestion__qr .qr__telecharger,
    .gestion__qr .copie__bouton {
        width: 100%;
    }
}

/* Diaporama en direct (page à projeter)
   ==========================================================================
   La page occupe tout l'écran. Les tailles sont en « vmin » (pourcentage du
   plus petit côté de l'écran) : le diaporama garde les mêmes proportions sur
   un ordinateur, un téléviseur ou un vidéoprojecteur. */

.diaporama {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: var(--nuit);
    color: var(--blanc);
    cursor: none;
}

.diaporama--actif {
    cursor: auto;
}

/* Les deux vues sont superposées et s'échangent en fondu */

.diaporama__vue {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.diaporama__vue--visible {
    opacity: 1;
}

.diaporama__fond,
.diaporama__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.diaporama__fond {
    object-fit: cover;
    opacity: 0.4;
    filter: blur(5vmin);
    transform: scale(1.2);
}

.diaporama__photo {
    object-fit: contain;
}

.diaporama__vide {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 2vmin;
    padding: 6vmin 6vmin 34vmin;
    text-align: center;
}

.diaporama__vide[hidden] {
    display: none;
}

.diaporama__vide-titre {
    max-width: 16ch;
    margin: 0 auto;
    font-size: 8vmin;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.025em;
}

.diaporama__vide-texte {
    margin: 0;
    color: var(--lilas);
    font-size: 3.2vmin;
}

.diaporama__fete {
    position: absolute;
    bottom: 4vmin;
    left: 4vmin;
    max-width: 60vw;
    margin: 0;
    font-size: 3.4vmin;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-shadow: 0 0.2vmin 1.6vmin rgba(0, 0, 0, 0.75);
    overflow-wrap: anywhere;
}

.diaporama__invitation {
    position: absolute;
    right: 4vmin;
    bottom: 4vmin;
    width: 24vmin;
    padding: 1.4vmin 1.4vmin 1.8vmin;
    border: 0.3vmin solid var(--prune);
    border-radius: 1.6vmin;
    background: var(--blanc);
    box-shadow: 0.9vmin 0.9vmin 0 var(--souci);
    color: var(--prune);
    text-align: center;
}

.diaporama__qr {
    display: block;
    width: 100%;
    height: auto;
}

.diaporama__consigne {
    margin: 0.6vmin 0 0;
    font-size: 2vmin;
    font-weight: 800;
    line-height: 1.15;
}

/* Tant que l'album est vide, le QR code est agrandi : c'est lui qu'il faut voir */

.diaporama__vide:not([hidden]) ~ .diaporama__invitation {
    width: 34vmin;
}

.diaporama__vide:not([hidden]) ~ .diaporama__invitation .diaporama__consigne {
    font-size: 2.8vmin;
}

.diaporama__plein-ecran {
    position: absolute;
    top: 3vmin;
    right: 3vmin;
    width: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.diaporama__plein-ecran[hidden] {
    display: none;
}

.diaporama--actif .diaporama__plein-ecran,
.diaporama__plein-ecran:focus-visible {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .diaporama__vue,
    .diaporama__plein-ecran {
        transition: none;
    }
}

/* Pages à imprimer : affiche et planche de QR codes
   ==========================================================================
   La feuille garde les proportions d'un A4. Tout ce qu'elle contient est
   dimensionné en « cqw » (pourcentage de la largeur de la feuille) : l'aperçu
   à l'écran et la page imprimée ont ainsi exactement la même mise en page. */

.impression__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.impression__retour {
    font-weight: 700;
}

.impression__bouton {
    width: auto;
}

.impression__conseil {
    margin: 12px 0 24px;
    color: var(--gris);
}

.feuille {
    container-type: inline-size;
    width: min(100%, 210mm);
    aspect-ratio: 210 / 297;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--lilas-fonce);
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(42, 26, 62, 0.12);
    color: #000000;
}

/* Affiche */

.affiche {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 9cqw 8cqw 7cqw;
    text-align: center;
}

.affiche__fete {
    margin: 0;
    font-size: 4.6cqw;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.affiche__titre {
    margin: 0;
    font-size: 7.6cqw;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.affiche__qr {
    display: block;
    width: 64cqw;
    height: 64cqw;
}

.affiche__consigne {
    max-width: 62cqw;
    margin: 0;
    font-size: 3.6cqw;
    font-weight: 700;
    line-height: 1.3;
}

.affiche__etapes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3cqw;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: etape-affiche;
}

.affiche__etape {
    counter-increment: etape-affiche;
    font-size: 2.4cqw;
    line-height: 1.3;
}

.affiche__etape::before {
    content: counter(etape-affiche);
    display: grid;
    place-items: center;
    width: 5.6cqw;
    height: 5.6cqw;
    margin: 0 auto 1.4cqw;
    border: 0.45cqw solid #000000;
    border-radius: 50%;
    font-size: 2.8cqw;
    font-weight: 800;
}

.affiche__lien {
    margin: 0;
    color: #444444;
    font-size: 2.1cqw;
    overflow-wrap: anywhere;
}

/* Planche de QR codes à découper */

.planche {
    padding: 5cqw;
}

.planche__grille {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    height: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px dashed #777777;
    border-left: 1px dashed #777777;
    list-style: none;
}

.etiquette {
    display: flex;
    align-items: center;
    gap: 2.4cqw;
    min-width: 0;
    padding: 2.4cqw;
    border-right: 1px dashed #777777;
    border-bottom: 1px dashed #777777;
}

.etiquette__qr {
    display: block;
    flex: 0 0 auto;
    width: 21cqw;
    height: 21cqw;
}

.etiquette__texte {
    min-width: 0;
}

.etiquette__titre {
    margin: 0 0 1cqw;
    font-size: 2.9cqw;
    font-weight: 800;
    line-height: 1.1;
}

.etiquette__fete {
    margin: 0 0 1cqw;
    font-size: 2.1cqw;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.etiquette__consigne {
    margin: 0;
    font-size: 1.9cqw;
    line-height: 1.25;
}

/* Impression : seule la feuille est imprimée, sur une page A4 sans marge */

@page feuille {
    size: A4 portrait;
    margin: 0;
}

@media print {
    .entete,
    .pied,
    .impression__barre,
    .impression__conseil {
        display: none;
    }

    body {
        background: #ffffff;
    }

    .impression {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .feuille {
        page: feuille;
        width: 100%;
        border: 0;
        box-shadow: none;
        break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}