/* cookies.css — Le bandeau de consentement, et rien d'autre.
 *
 * Extrait de `beta.css` le 19/08/2026. Motif : le bandeau est créé par
 * `consentement.js`, lequel est désormais chargé partout où la mesure tourne —
 * y compris sur les pages du blog, qui sont des documents HTML entiers et ne
 * chargent pas `beta.css`. Le bandeau s'y serait affiché sans le moindre style :
 * un pavé de texte brut au milieu d'un article, avec deux liens nus en guise de
 * choix. Style et script voyagent donc ensemble, par `partials/mesure.html`.
 */

/* ══════════ Le bandeau cookies ══════════ */

.mr-cookies {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 13px 20px;
    background: var(--mr-surface-card, #fff);
    border-top: 2px solid var(--mr-text, #111);
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
}

.mr-cookies-texte {
    flex: 1 1 320px;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--mr-text-muted, #777);
}

.mr-cookies-texte b {
    color: var(--mr-text, #111);
    font-weight: 600;
}

.mr-cookies-texte a {
    color: var(--mr-text, #111);
    text-decoration: underline;
    /* Volontairement PAS agrandi a 44 px. L'essai avec `inline-block` et un
       creux vertical agrandissait bien la zone tactile, mais le lien rehaussait
       sa propre ligne de 5 px et la derniere ligne du paragraphe se retrouvait
       decalee vers le bas, ce qui se voyait sur un telephone. Un lien inline
       dans une phrase est expressement exclu du critere de taille de cible
       (WCAG 2.5.8) : il se vise par son texte, large de 306 px ici, et le
       deformer coute plus qu'il ne rapporte. */
}

.mr-cookies-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* « Accepter » est le bouton plein, « Refuser » le bouton contour. C'est la
   limite de ce qu'on peut faire pencher sans basculer dans le procédé que la
   CNIL sanctionne.

   CE QUI EST INTERDIT et n'est donc PAS fait ici : refuser en plus de clics,
   refuser derrière un écran « personnaliser », refuser en texte gris pâle ou
   en caractères plus petits, refuser hors du premier niveau. Les amendes
   françaises les plus lourdes sur les bandeaux (Google, Facebook) portaient
   exactement là-dessus — pas sur la couleur du bouton.

   Les deux boutons gardent donc : la même taille, la même graisse, la même
   place, le même niveau, un seul clic. Seul le remplissage les distingue. */
.mr-cookies-btn {
    padding: 9px 20px;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mr-text, #111);
    background: var(--mr-surface-card, #fff);
    border: 1px solid var(--mr-text, #111);
    border-radius: 999px;
    cursor: pointer;
    transition: background .18s, color .18s, transform .18s;
}

.mr-cookies-btn:hover {
    color: #fff;
    background: #111;
}

/* Le bouton plein. Même boîte que l'autre — c'est bien le remplissage, et rien
   d'autre, qui porte la préférence. */
.mr-cookies-btn--oui {
    color: var(--mr-btn-text, #fff);
    background: var(--mr-btn-bg, #111);
    border-color: var(--mr-btn-bg, #111);
}

.mr-cookies-btn--oui:hover {
    color: var(--mr-btn-text, #fff);
    background: var(--mr-btn-bg-hover, #333);
    border-color: var(--mr-btn-bg-hover, #333);
    transform: translateY(-1px);
}

/* ══════════ Sur le chat : une carte, pas une barre ══════════
   L'écran du chat a ses commandes en bas — la barre de saisie à gauche, la
   pastille d'usage dans le coin. Une barre pleine largeur les recouvre toutes
   les deux (mesuré : 66 px de haut par-dessus un champ de saisie qui commence
   23 px plus haut). Comme le bandeau se montre au premier message de Léa,
   il arriverait exactement au moment où l'on veut lui répondre, en bouchant le
   champ pour le faire. Ici, donc : une carte dans le coin droit, au-dessus du
   tableau de bord — qui se fait défiler, pas cliquer. */
.mr-cookies--carte {
    left: auto;
    right: 16px;
    bottom: 16px;
    width: min(380px, calc(100vw - 32px));
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--mr-text, #111);
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}

.mr-cookies--carte .mr-cookies-actions { justify-content: flex-end; }

/* En bandeau horizontal, `flex: 1 1 320px` donne au texte une largeur de base :
   c'est l'axe principal. La carte, elle, est en colonne, donc les 320px
   deviennent une HAUTEUR de base et le texte gonfle a 320px pour quatre lignes.
   Mesure a 375px : la carte occupait 411px, soit 51% de l'ecran, par-dessus la
   conversation. Basee sur son contenu, elle tombe a 167px. */
.mr-cookies--carte .mr-cookies-texte { flex: 0 0 auto; }

/* Sur mobile, le bandeau mangerait la pastille : elle remonte au-dessus. */
@media (max-width: 700px) {
    .mr-cookies { padding: 12px 14px; }
    .mr-cookies-actions { width: 100%; }
    .mr-cookies-btn { flex: 1; }
    /* Le chat empilé garde sa saisie collée en bas : la carte passe EN HAUT,
       sous la barre de navigation, seul endroit où elle ne masque aucune
       commande. */
    .mr-cookies--carte {
        top: calc(var(--topbar-height, 64px) + 10px);
        bottom: auto;
        left: 10px;
        right: 10px;
        width: auto;
    }
}