/*
 * Fenetre de consentement.
 *
 * Les couleurs et arrondis sont des variables, a redefinir par le site pour
 * coller a sa charte :
 *
 *   .soludevi-consentement { --consentement-encre: var(--ma-couleur); }
 *
 * Les valeurs par defaut sont posees dans :where(), dont la specificite est
 * nulle : la regle du site l'emporte toujours, quel que soit l'ordre de
 * chargement des feuilles de style.
 *
 * Les deux boutons ont exactement le meme aspect : la CNIL exige que refuser
 * soit aussi simple et aussi visible qu'accepter. Ne pas mettre "Accepter" en
 * couleur.
 */

/*----------jetons*/

:where(.soludevi-consentement) {
    --consentement-voile:  rgba(18, 16, 15, .55);
    --consentement-fond:   #FFFFFF;
    --consentement-encre:  #12100F;
    --consentement-texte:  #3A3533;
    --consentement-filet:  #E2DEDC;
    --consentement-rayon:  4px;
    --consentement-ombre:  0 1px 2px rgba(18, 16, 15, .06), 0 10px 30px -18px rgba(18, 16, 15, .3);
}

/*----------fenetre centrale*/

/* Au-dessus de tout : tant que le visiteur n'a pas choisi, la fenetre est le
   seul element actif de la page. */
.soludevi-consentement {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--consentement-voile);
}
.soludevi-consentement[hidden] { display: none; }

.soludevi-consentement__fenetre {
    box-sizing: border-box;
    width: 100%;
    max-width: 25rem;
    padding: 1.6rem 1.5rem 1.5rem;
    background: var(--consentement-fond);
    color: var(--consentement-encre);
    border-radius: var(--consentement-rayon);
    box-shadow: var(--consentement-ombre);
}
.soludevi-consentement__fenetre:focus { outline: none; }

.soludevi-consentement__titre {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
    font-weight: 750;
    line-height: 1.25;
}

.soludevi-consentement__texte {
    margin: 0 0 1.25rem;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--consentement-texte);
}

.soludevi-consentement__boutons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.soludevi-consentement__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.4rem;
    border: 2px solid var(--consentement-encre);
    border-radius: var(--consentement-rayon);
    background: transparent;
    color: var(--consentement-encre);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}
.soludevi-consentement__bouton:hover {
    background: var(--consentement-encre);
    color: var(--consentement-fond);
}

/*----------en bas, sur la page de confidentialite*/

/* Sans voile, pour laisser lire le texte que le lien "En savoir plus" vient
   d'ouvrir. */
.soludevi-consentement--bas {
    inset: auto 0 0 0;
    padding: 0;
    background: none;
}
.soludevi-consentement--bas .soludevi-consentement__fenetre {
    max-width: none;
    padding: 1.1rem max(1.25rem, calc((100% - 46rem) / 2));
    border-radius: 0;
    border-top: 1px solid var(--consentement-filet);
    box-shadow: 0 -6px 20px -12px rgba(18, 16, 15, .35);
}
.soludevi-consentement--bas .soludevi-consentement__boutons { max-width: 25rem; }