body {
    background-color: #18171a;
    margin: 0;
    padding: 0;
}

* {
    font-family: Caladea, Merriweather, serif;
    -webkit-tap-highlight-color: transparent; /* Hide Blue Padding When Clicking */
}

/* Hide Save Images Option */
img {
    pointer-events: none;
}

.orientation_warning {
    position: fixed;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 123456789;
}

.box_icon_rotate_screen {
    position: relative;
    width: 7rem;
    height: 7rem;
}

.icon_background, .icon_rotate_screen {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.icon_background {
    z-index: 1;
}

.icon_rotate_screen {
    z-index: 2;
    animation: animation_icon_rotate_screen 1.5s infinite ease-in-out;
}

@keyframes animation_icon_rotate_screen {

    0% { 
        transform: rotate(45deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    70% { 
        transform: rotate(-45deg); 
        opacity: 1;
    }

    90%, 100% {
        transform: rotate(-45deg);
        opacity: 0;
    }

}

.text_orientation_warning {
    padding: 1rem;
    text-align: center;
    color: white;
    font-size: 1.2rem;
}


@media screen and (pointer: coarse) and (orientation: landscape), screen and (max-height: 550px) and (orientation: landscape) {

    body {
        overflow: hidden;
    }

    .orientation_warning {
        display: flex;
    }
    
}

.menu_header {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    top: 0;
    width: 100%;
    height: 4rem;
    padding: 1rem 0;
    padding-top: .4rem;
    padding-bottom: .7rem;
    background-color: #1d1e20;
    border-bottom: .2rem solid;
    border-color: #343438;
    z-index: 2000;
    
}

.menu_footer {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    bottom: 0;
    width: 100%;
    height: 4rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    background-color: #1d1e20;
    border-top: .2rem solid;
    border-color: #343438;
    z-index: 10;
    
}

.navigation_header {
    list-style: none;
}

/*logo desktop*/
.website_logo_header {
    width: 3rem;
    height: 3rem;
    padding: 1.4rem;
    padding-left: .7rem;
    padding-right: 0;
}

/*logo title desktop*/
.navigation_header:nth-child(2) {
    margin-right: auto;
}

.website_name_header {
    font-size: 1.5rem;
    font-weight: normal;
    color: white;
}

.links_header {
    display: block;
    text-decoration: none;
    text-align: center;
    color: white;
    padding: 2rem 1rem;
    font-size: 1.14rem;
}

.links_icons_header {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.icon_boost_header {
    width: 3.2rem;
    height: 3.2rem;
    padding: 1.2rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.navigation_icons_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.links_footer {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.icons_footer {
    width: 3.2rem;
    height: 3.2rem;
    padding: .5rem .5rem;
}

.text_footer {
    color: white;
    font-size: 1.14rem;
    padding-right: .5rem;
}

.cart_header {
    display: block;
    position: relative;
    height: 2.2rem;
}

.products_amount_in_cart_header {
    position: absolute;
    width: 1rem;
    text-align: center;
    margin-top: .45rem;
    margin-left: .67rem;
    z-index: 10;
    font-size: .8rem;
    font-weight: bold;
    color: white;
}

.products_large_amount_in_cart_header {
    position: absolute;
    margin-top: .28rem;
    margin-left: 1.64rem;
    z-index: 10;
    font-size: .7rem;
    color: white;
}

.button_subscribe_header {
    padding: .5rem .8rem;
    font-weight: bold;
    white-space: nowrap;
    font-size: 1.2rem;
    border: none;
    border-radius: 4rem;
    background-color: #EC2C8E;
    color: white;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.button_subscribe_header:hover {
    background-color: #ff3ba0;
    transition: all .2s ease-in-out;
}


/* Language Dropdown */

.box_language_header {
    position: relative;
}

.button_language {
    display: block;
    cursor: pointer;
}

.language_dropdown_header {
    position: absolute;
    display: none;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);

    list-style: none;

    padding: 0;

    background: #1d1e20;

    border: .2rem solid #343438;
    border-radius: 1rem;

    z-index: 9999;
}

#language_dropdown_check_header {
    display: none;
}

.language_dropdown_header li {
    display: flex;
    align-items: center; 

    cursor: pointer;
}

.flag_language_dropdown_header {
    width: 1.5rem;
    padding-right: 1rem;
}

.links_language_dropdown_header {
    display: flex;
    width: 100%;
    padding: 1rem;
    color: white;
    text-decoration: none;
}

.language_dropdown_header li:hover {
    background: #45474b;
    border-radius: 1rem;
}

#language_dropdown_check_header:checked~.button_language + .language_dropdown_header {
    display: block;
}


/*Desktop*/
@media only screen and (min-width: 1000.1px) {

    .responsive_menu_header {
        display: none;
    }

    .checkbox_header {
        display: none;
    }

}


/*Mobile*/
@media only screen and (max-width: 1000px) {

    .responsive_menu_header {
        position: fixed;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0;
        top: 0;
        width: 100%;
        height: 4rem;
        padding: 1rem 0;
        padding-top: 0.4rem;
        padding-bottom: 0.7rem;
        background-color: #1d1e20;
        border-bottom: .2rem solid;
        border-color: #343438;
        z-index: 2001;
        
    }

    .menu_header {
        display: none;
    }

    .website_name_header {
        display: none;
    }

    /*logo desktop*/
    .navigation_header:first-child {
        display: none;
    }

    /*logo title desktop*/
    .navigation_header:nth-child(2) {
        display: none;
    }

    /*icon boost*/
    .menu_header .icon_boost_header {
        display: none;
    }

    /* Boost du menu deroulant: masque en responsive.
       Le boost affiche est celui de la barre du haut
       (.browse_menu_header), qui reste visible en permanence:
       sans cela, il y en aurait deux quand le menu est ouvert. */
    .menu_header .boost_navigation_header {
        display: none;
    }

    /*logo mobile*/
    .website_logo_header {
        padding-right: 1.4rem;
    }

    .icon_boost_header {
        margin-right: 0;
    }

    .navigation_header {
        margin-bottom: .5rem;
    }

    .links_header {
        padding: 1rem;
    }

    .language_dropdown_header{
        position: relative;
    }

    .text_footer {
        display: none;
    }

    .browse_menu_header {
        display: flex;
        margin-left: auto;
    }

    .icon_boost_header {
        padding-right: 1rem;
    }

    /* Icône Boost : mêmes marges que les autres icônes du menu mobile */
    .boost_header {
        margin-right: 1rem;
    }


    .toggle_header {
        padding: 1.7rem 1rem;
        padding-left: 1.5rem;
        cursor: pointer;
    }

    .browse_header {
        width: 2rem;
        height: 2rem;
    }

    .close_header {
        display: none;
        width: 2rem;
        height: 2rem;
    }

    .checkbox_header {
        display: none;
    }

    #check_header:checked~.responsive_menu_header {
        border-bottom: 0;
    }

    #check_header:checked~.menu_header {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        height: auto;
        padding-top: 5rem;
        background-color: #1d1e20;
        border-bottom: solid .1rem;
        border-color: #343438;
    }

    #check_header:checked~.responsive_menu_header .toggle_header .browse_header {
        display: none;
    }

    #check_header:checked~.responsive_menu_header .toggle_header .close_header {
        display: block;
    }

}


/*Mobile*/
@media only screen and (max-width: 400px) {

    .icons_footer {
        padding: .2rem .2rem;
    }

}


/* =========================================================================
   ICÔNE BOOST DE L'EN-TÊTE

   REPÈRES D'ANGLE DE LA JAUGE
   0 = aiguille à droite (position de repos), 200 = presque un tour
   complet dans le sens des aiguilles d'une montre. « N degrés » vaut
   donc simplement rotate(N deg).

   DEUX DÉCLENCHEURS, et deux seulement
   - au survol (.link_boost_header_hover) : la montée en 1 s, puis le
     rupteur en boucle tant que le curseur reste dessus. Rien ne bouge
     quand la souris n'est pas dessus.
   - boost actif (.link_boost_header_active) : la même séquence, sans
     avoir besoin du survol, tant que le boost tourne. L'icône monte
     donc en puissance en même temps que la page enable_boost.

   Les deux ne se cumulent jamais : la classe de survol n'est jamais
   posée quand le boost tourne, sinon passer la souris sur l'icône
   relancerait l'animation depuis le début alors qu'elle est déjà en
   train de tourner.

   POURQUOI UNE CLASSE ET PAS :hover
   C'est le JavaScript de header.php qui pose .link_boost_header_hover.
   Il peut ainsi lire l'angle exact de l'aiguille AVANT de couper
   l'animation, puis la faire redescendre jusqu'à 0 en douceur
   (.link_boost_header_returning) au lieu de la laisser sauter.

   LE CERCLE D'ÉCLAIRS
   Les éclairs sont posés sur deux cercles parfaits : angles répartis
   régulièrement, rayon fixe, et pointe tournée exactement vers
   l'extérieur. Aucun décalage aléatoire n'est appliqué à la position
   ni à l'orientation, seuls l'image utilisée et le rythme de
   clignotement sont tirés au hasard.

   Le premier cercle est assez loin du centre pour qu'aucun éclair ne
   passe sous l'éclair principal ni sous la jauge.

   CLASSES
   .link_boost_header         lien cliquable
   .link_boost_header_active  posée en plus quand un boost est en cours
   .boost_header              scène (repère de tous les enfants)
   .boost_header_bolt         éclair principal
   .boost_header_gauge        jauge complète
   .boost_header_needle       disque + aiguille (c'est lui qui tourne)
   .boost_header_dial         anneau gris posé par-dessus
   .boost_header_glow         halo flou (deux couches, rose et violette)
   .boost_header_slot         emplacement d'un éclair sur le cercle
   .boost_header_slot_1/2     cercle (1 = le plus proche du centre)
   .boost_header_spark        image d'éclair qui clignote
   ========================================================================= */

.link_boost_header {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.boost_header {
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 1.3rem .8rem;
    /* Les éclairs sortent volontairement de la zone du logo. */
    overflow: visible;
}

.boost_header_bolt {
    position: absolute;
    top: -.2rem;
    left: 0;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    z-index: 3;
}

/* Jauge : anneau fixe, disque intérieur qui tourne (l'aiguille est
   dessinée sur le disque, qui est parfaitement rond). */
.boost_header_gauge {
    position: absolute;
    top: -.1rem;
    right: -.65em;
    width: 1.35rem;
    height: 1.35rem;
    z-index: 4;
}

.boost_header_dial,
.boost_header_needle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.boost_header_needle {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
}

.boost_header_dial {
    z-index: 2;
}

/* Halo flou : deux couches qui se relaient très vite, ce qui fait
   varier la teinte du fond au rythme des éclairs. Éteint au repos. */
.boost_header_glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.6rem;
    height: 4.6rem;
    margin: -2.3rem 0 0 -2.3rem;
    border-radius: 50%;
    opacity: 0;
    filter: blur(.6rem);
    pointer-events: none;
    z-index: 1;
}

.boost_header_glow_pink {
    background: radial-gradient(circle, rgba(236, 44, 142, .8) 0%, rgba(236, 44, 142, 0) 70%);
}

.boost_header_glow_purple {
    background: radial-gradient(circle, rgba(110, 70, 255, .8) 0%, rgba(110, 70, 255, 0) 70%);
}

/* Emplacement d'un éclair. Le placement sur le cercle (rotation puis
   éloignement) est écrit en style inline par le PHP ; la classe ne
   gère que l'ouverture du cercle. */
.boost_header_slot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

/* L'image est centrée sur son emplacement et tournée de 180 degrés :
   la pointe de l'éclair regarde donc vers l'extérieur du cercle, quel
   que soit l'endroit où il se trouve. L'animation ne touche qu'à
   l'opacité, pour ne pas écraser cette rotation. */
.boost_header_spark {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    margin: -50% 0 0 -50%;
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 0 .3rem rgba(236, 44, 142, .8));
}


/* =========================================================================
   ANIMATIONS

   Elles sont RIGOUREUSEMENT identiques à celles de la page enable_boost
   (style_enable_boost.css) : mêmes images clés, mêmes durées, même
   enchaînement. L'icône et la grande scène montent en puissance
   exactement en même temps et battent ensuite au même rythme.

   Séquence commune, dans les deux cas :
     lancement 1.2 s  →  la jauge monte de 0 à 200 en 1 s (83 %), puis
                         donne ses premiers coups de rupteur
     puis en boucle   →  rupteur entre 185 et 210, une oscillation
                         toutes les .37 s
   ========================================================================= */

/* ----- Jauge ----- */

@keyframes animation_boost_header_needle_launch {

    /* 0 : aiguille à droite */
    0% {
        transform: rotate(0deg);
    }

    /* montée jusqu'à 200 en 1 s */
    83% {
        transform: rotate(200deg);
    }

    /* premiers coups de rupteur */
    89% { transform: rotate(210deg); }
    94% { transform: rotate(185deg); }
    97% { transform: rotate(210deg); }

    /* la séquence se termine sur le rupteur : le relais est pris par
       la boucle de puissance maximale, sans rupture */
    100% {
        transform: rotate(200deg);
    }

}

@keyframes animation_boost_header_needle_max {

    0%   { transform: rotate(185deg); }
    25%  { transform: rotate(210deg); }
    50%  { transform: rotate(185deg); }
    75%  { transform: rotate(210deg); }
    100% { transform: rotate(185deg); }

}


/* ----- Éclair principal -----
   Seule sa lueur change : aucun scale, aucune rotation. L'éclair et la
   jauge gardent donc exactement la même position et la même taille au
   repos, pendant le survol et pendant un boost. Rien ne se décale au
   moment où l'animation démarre ou s'arrête. */

@keyframes animation_boost_header_bolt_launch {

    0% {
        filter: drop-shadow(0 0 0 rgba(236, 44, 142, 0));
    }

    50% {
        filter: drop-shadow(0 0 .2rem rgba(236, 44, 142, .9));
    }

    /* Coup de fouet lumineux au passage en puissance maximale */
    83% {
        filter: drop-shadow(0 0 .5rem rgba(236, 44, 142, 1));
    }

    92% {
        filter: drop-shadow(0 0 .38rem rgba(110, 70, 255, 1));
    }

    100% {
        filter: drop-shadow(0 0 .35rem rgba(236, 44, 142, 1));
    }

}

@keyframes animation_boost_header_bolt_max {

    0%, 100% {
        filter: drop-shadow(0 0 .35rem rgba(236, 44, 142, 1));
    }

    50% {
        filter: drop-shadow(0 0 .45rem rgba(110, 70, 255, 1));
    }

}


/* ----- Halo ----- */

@keyframes animation_boost_header_glow_launch {

    0% {
        opacity: 0;
        transform: scale(.5);
    }

    50% {
        opacity: .45;
        transform: scale(.9);
    }

    83% {
        opacity: 1;
        transform: scale(1.35);
    }

    92% {
        opacity: .6;
        transform: scale(1.05);
    }

    100% {
        opacity: .5;
        transform: scale(1);
    }

}

@keyframes animation_boost_header_glow_max {

    0%, 100% {
        opacity: .5;
        transform: scale(1);
    }

    50% {
        opacity: .9;
        transform: scale(1.08);
    }

}


/* ----- Éclairs du cercle ----- */

/* Clignotement franc, sans fondu : steps(1) donne l'allumage sec d'un
   vrai éclair.

   La durée écrite en PHP vaut deux clignotements : l'image rose occupe
   le premier quart du cycle, l'image violette le troisième. Chaque
   emplacement change donc de couleur une fois sur deux, sans jamais
   changer de forme. */
@keyframes animation_boost_header_spark {

    0%, 22% {
        opacity: 1;
    }

    23%, 100% {
        opacity: 0;
    }

}

/* Ouverture des cercles pendant le lancement. La montée occupe 83 % de
   la séquence : les deux cercles s'allument donc vers 55 et 100 de
   jauge, l'un après l'autre, pendant que l'aiguille grimpe. */
@keyframes animation_boost_header_gate_1_launch {
    0%, 22% { opacity: 0; }
    23%, 100% { opacity: 1; }
}

@keyframes animation_boost_header_gate_2_launch {
    0%, 42% { opacity: 0; }
    43%, 100% { opacity: 1; }
}

/* En puissance maximale les deux cercles restent ouverts, avec un
   léger battement pour que l'orage ne paraisse pas figé. */
@keyframes animation_boost_header_gate_max {
    0%, 100% { opacity: 1; }
    45% { opacity: .8; }
}


/* ----- Déclencheur 1 : le survol -----
   Le survol joue exactement la même chose qu'une activation de boost :
   la montée en 1 s, puis le rupteur en boucle tant que le curseur
   reste sur l'icône. */

.link_boost_header_hover .boost_header_needle {
    animation: animation_boost_header_needle_launch 1.2s cubic-bezier(.3, .7, .4, 1) 1 forwards,
               animation_boost_header_needle_max .37s linear 1.2s infinite;
}

.link_boost_header_hover .boost_header_bolt {
    animation: animation_boost_header_bolt_launch 1.2s ease-out 1 forwards,
               animation_boost_header_bolt_max 1.6s ease-in-out 1.2s infinite;
}

.link_boost_header_hover .boost_header_glow_pink {
    animation: animation_boost_header_glow_launch 1.2s ease-out 1 forwards,
               animation_boost_header_glow_max 1.3s ease-in-out 1.2s infinite;
}

.link_boost_header_hover .boost_header_glow_purple {
    animation: animation_boost_header_glow_launch 1.2s ease-out .05s 1 forwards,
               animation_boost_header_glow_max 1.3s ease-in-out 1.36s infinite;
}

.link_boost_header_hover .boost_header_slot_1 {
    animation: animation_boost_header_gate_1_launch 1.2s linear 1 forwards,
               animation_boost_header_gate_max 1.4s ease-in-out 1.2s infinite;
}

.link_boost_header_hover .boost_header_slot_2 {
    animation: animation_boost_header_gate_2_launch 1.2s linear 1 forwards,
               animation_boost_header_gate_max 1.4s ease-in-out 1.2s infinite;
}

.link_boost_header_hover .boost_header_spark {
    animation-name: animation_boost_header_spark;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
}


/* ----- Déclencheur 2 : le boost est en cours -----
   Même séquence, sans avoir besoin du survol. L'icône monte donc en
   puissance en même temps que la grande scène de enable_boost, au lieu
   de passer d'un coup à son état final.

   Le survol est neutralisé dans ce cas (la classe de survol n'est pas
   posée), donc l'animation continue sans jamais repartir de zéro. */

.link_boost_header_active .boost_header_needle {
    animation: animation_boost_header_needle_launch 1.2s cubic-bezier(.3, .7, .4, 1) 1 forwards,
               animation_boost_header_needle_max .37s linear 1.2s infinite;
}

.link_boost_header_active .boost_header_bolt {
    animation: animation_boost_header_bolt_launch 1.2s ease-out 1 forwards,
               animation_boost_header_bolt_max 1.6s ease-in-out 1.2s infinite;
}

.link_boost_header_active .boost_header_glow_pink {
    animation: animation_boost_header_glow_launch 1.2s ease-out 1 forwards,
               animation_boost_header_glow_max 1.3s ease-in-out 1.2s infinite;
}

.link_boost_header_active .boost_header_glow_purple {
    animation: animation_boost_header_glow_launch 1.2s ease-out .05s 1 forwards,
               animation_boost_header_glow_max 1.3s ease-in-out 1.36s infinite;
}

.link_boost_header_active .boost_header_slot_1 {
    animation: animation_boost_header_gate_1_launch 1.2s linear 1 forwards,
               animation_boost_header_gate_max 1.4s ease-in-out 1.2s infinite;
}

.link_boost_header_active .boost_header_slot_2 {
    animation: animation_boost_header_gate_2_launch 1.2s linear 1 forwards,
               animation_boost_header_gate_max 1.4s ease-in-out 1.2s infinite;
}

.link_boost_header_active .boost_header_spark {
    animation-name: animation_boost_header_spark;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
}

.link_boost_header:focus-visible {
    outline: .15rem solid white;
    outline-offset: .2rem;
    border-radius: .4rem;
}


/* ----- Retour au repos -----
   Quand la souris quitte l'icône, l'animation est coupée : sans rien
   de plus, l'aiguille sauterait d'un coup à 0 et les éclairs
   disparaîtraient brutalement. Cette classe est posée le temps du
   retour et remplace l'animation par une transition douce. */

.link_boost_header_returning .boost_header_needle {
    transition: transform .9s ease-in-out;
}

.link_boost_header_returning .boost_header_bolt {
    transition: filter .5s ease-in-out;
}

.link_boost_header_returning .boost_header_glow,
.link_boost_header_returning .boost_header_slot,
.link_boost_header_returning .boost_header_spark {
    transition: opacity .45s ease-in-out;
}

.link_boost_header:focus-visible {
    outline: .15rem solid white;
    outline-offset: .2rem;
    border-radius: .4rem;
}


/* Accessibilité : icône lisible et immobile pour qui a demandé moins
   d'animations. */
@media (prefers-reduced-motion: reduce) {

    .link_boost_header_hover .boost_header_needle,
    .link_boost_header_hover .boost_header_bolt,
    .link_boost_header_hover .boost_header_glow_pink,
    .link_boost_header_hover .boost_header_glow_purple,
    .link_boost_header_hover .boost_header_slot_1,
    .link_boost_header_hover .boost_header_slot_2,
    .link_boost_header_hover .boost_header_spark,
    .link_boost_header_active .boost_header_needle,
    .link_boost_header_active .boost_header_bolt,
    .link_boost_header_active .boost_header_glow_pink,
    .link_boost_header_active .boost_header_glow_purple,
    .link_boost_header_active .boost_header_slot_1,
    .link_boost_header_active .boost_header_slot_2,
    .link_boost_header_active .boost_header_spark {
        animation: none;
    }

    .link_boost_header_returning .boost_header_needle,
    .link_boost_header_returning .boost_header_bolt,
    .link_boost_header_returning .boost_header_glow,
    .link_boost_header_returning .boost_header_slot,
    .link_boost_header_returning .boost_header_spark {
        transition: none;
    }

    /* Le boost actif reste reconnaissable : aiguille au maximum. */
    .link_boost_header_active .boost_header_needle {
        transform: rotate(200deg);
    }

}


/* =========================================================================
   BANNIERE DE PROMOTION

   Un panneau publicitaire, pas un bandeau de site: rectangle franc,
   aucun coin arrondi, cadre rose plein. Le fond est plus sombre que la
   barre de menu (#1d1e20) pour que le panneau se detache au lieu de s'y
   fondre, sans tomber dans le noir pur qui ferait un trou dans l'ecran.

   PAS DE BORDURE EN HAUT: le panneau monte jusqu'au bord superieur de
   la barre de menu. Un trait la-haut dessinerait une deuxieme ligne au
   ras de l'ecran; en s'arretant a gauche, a droite et en bas, le
   panneau parait pose SUR le header et non dedans.

   TOUTE LA HAUTEUR DE LA BARRE, PAS UNE VIGNETTE DEDANS.

   Les deux barres de menu ont un padding vertical (.4rem en haut,
   .7rem en bas) qui s'applique a tous leurs elements. Un panneau
   normal s'arreterait donc a 1.1rem du compte et flotterait au milieu.

   align-self: stretch le fait remplir la hauteur disponible, et des
   marges negatives EXACTEMENT egales a ce padding lui rendent le reste:
   il touche le haut et le bas de la barre. L'effet voulu est celui d'un
   header decoupe a cet endroit, pas d'une etiquette posee dessus.

   TEXTE FIXE: plus rien ne defile. Sur une ligne en grand ecran, sur
   deux lignes en mobile (le pourcentage au-dessus).
   ========================================================================= */

/* ===========================================================
   PLACEMENT EN GRAND ECRAN

   LE PANNEAU RESTE DANS LE FLUX. C'est ce qui garantit qu'il ne
   passera jamais sous le menu: en flex, il partage la barre avec
   ses voisins et se retracte des que la place manque.

   Une version precedente le centrait sur l'ecran en position
   absolue. Le centrage etait parfait, mais un element sorti du
   flux ne peut plus etre pousse par personne: en reduisant la
   fenetre, il finissait par recouvrir l'icone Boost et
   "Language". Aucune largeur de reserve ne corrige ca pour de
   bon, puisque le menu de droite change de taille selon la
   langue et selon la presence du lien Admin.

   Le panneau est donc pose dans l'espace disponible entre le nom
   du site et le menu. Comme cet espace n'est pas symetrique, un
   petit script du header le fait ensuite glisser jusqu'au milieu
   de l'ecran, en bornant le glissement a la place reellement
   libre: il est centre quand il peut l'etre, et se comporte comme
   un element normal de la barre quand il ne le peut plus.

   Sans JavaScript, le panneau reste centre dans son espace (la
   regle margin: 0 auto ci-dessous): il n'est pas au milieu de
   l'ecran, mais rien n'est casse.

   width 40rem = la max-width de .box_browsing, donc la meme
   largeur que la carte de profil. max-width: 100% le fait
   retrecir plutot que deborder quand la place se reduit.
=========================================================== */
.navigation_header_discount {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    height: auto;
    /* Annule le padding vertical de .menu_header (.4rem / .7rem). */
    margin: -.4rem 1rem -.7rem 1rem;
    padding: 0;
}

.navigation_header_discount .discount_banner {
    width: 40rem;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}

.discount_banner {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background-color: #151517;
    border-top: none;
    border-right: .15rem solid #EC2C8E;
    border-bottom: .15rem solid #EC2C8E;
    border-left: .15rem solid #EC2C8E;
    border-radius: 0;
    overflow: hidden;
}

/* ===========================================================
   LARGEUR EN MOBILE

   .browse_menu_header (les icones de droite) porte un
   margin-left: auto. Une marge automatique avale TOUTE la place
   libre avant que flex-grow n'ait son mot a dire: le panneau
   restait donc reduit a la largeur de son texte, quelle que
   soit sa valeur de flex.

   On annule cette marge quand le panneau est la. Les icones
   restent calees a droite, puisque c'est maintenant le panneau
   qui pousse: il occupe tout l'espace entre le logo et elles.
=========================================================== */
.discount_banner_responsive {
    align-self: stretch;
    height: auto;
    /* Marges laterales minimales: le panneau vient au plus pres du logo
       et de l'icone Boost, c'est autant de largeur gagnee pour le
       texte. Les marges verticales annulent le padding de la barre. */
    margin: -.4rem .2rem -.7rem .2rem;
}

.discount_banner_responsive + .browse_menu_header {
    margin-left: 0;
}

/* Le lien occupe toute la barre sauf la croix: ou qu'on clique, on part
   sur la page de la promo. */
.discount_banner_link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
}

/* ===========================================================
   UN SEUL CONTENEUR POUR LES TROIS MORCEAUX

   Le pourcentage, la phrase et le decompte sont sur la MEME
   piste, et c'est elle qui gere les retours a la ligne.

   Avant, la phrase et le decompte etaient enfermes dans une
   boite a part. Quand cette boite passait sur deux lignes, elle
   gardait la largeur disponible et centrait ses lignes dedans:
   il restait un grand vide entre le pourcentage et le debut du
   texte, alors que la place manquait par ailleurs.

   Avec une seule piste, les morceaux se suivent et passent a la
   ligne quand il le faut, sans jamais laisser de trou.
=========================================================== */
.discount_banner_text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .15rem .55rem;
    min-width: 0;
    /* Respiration garantie de chaque cote: le texte ne touche jamais
       le bord du panneau ni le bouton de fermeture. */
    padding: 0 .7rem;
    font-family: Caladea, Merriweather, serif;
    font-weight: bold;
    line-height: 1.15;
    color: white;
}

/* ===========================================================
   LE TEXTE RESTE GROUPE, A DROITE DU POURCENTAGE

   La phrase et le decompte forment un bloc: quand ils passent sur
   deux lignes, les deux lignes commencent au meme endroit, a
   droite du pourcentage. Aucune ne repart sous la pastille.

   Le texte est cale a GAUCHE dans ce bloc, pas centre. C'est ce
   qui supprime le grand vide qu'on voyait avant entre la
   pastille et le debut de la phrase: le bloc occupe la largeur
   restante, mais son texte commence des le premier pixel.
=========================================================== */
.discount_banner_message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0 .4rem;
    min-width: 0;
    text-align: left;
    font-size: 1.05rem;
}

/* ===========================================================
   LE TEXTE PASSE A LA LIGNE, IL NE DISPARAIT JAMAIS

   Le message ne peut pas rester en nowrap. Les points de rupture
   sont fixes, la longueur du texte non: "Limited time offer.
   Ends in" devient "Tijdelijk aanbod. Eindigt in" en
   neerlandais, soit un tiers de plus. La meme largeur d'ecran
   affichait donc la phrase entiere en anglais et une phrase
   coupee en neerlandais, avalee par le bouton de fermeture.

   En autorisant le retour a la ligne, c'est le texte lui-meme qui
   decide quand il lui faut deux lignes. Le panneau fait toute la
   hauteur de la barre (4rem), il y a la place pour trois lignes
   avant de deborder: aucune langue ne peut plus etre tronquee.
=========================================================== */


/* ===========================================================
   "ENDS IN" ET SON NOMBRE

   Ils restent cote a cote tant qu'il y a la place, et se
   separent en dernier recours seulement.

   Les garder solidaires par un nowrap sur tout le bloc etait une
   erreur: un bloc insecable plus large que le panneau ne se
   coupe pas, il DEBORDE, et il finit sous le bouton de
   fermeture. C'est exactement ce qui arrivait en neerlandais,
   "Eindigt in 8d 11:00" etant plus long que la place restante.

   Chaque morceau garde donc son propre nowrap (on ne coupera
   jamais "8d 11:00" en deux), mais l'ensemble peut passer a la
   ligne. Au pire on lit sur trois lignes, ce que la hauteur du
   panneau permet: rien n'est jamais tronque.
=========================================================== */
.discount_banner_time {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 .4rem;
    min-width: 0;
    font-size: 1.05rem;
}

.discount_banner_ends,
.discount_banner_limited {
    white-space: nowrap;
}

/* MOBILE: une seule ligne tant qu'elle tient. Le panneau occupe toute
   la largeur entre le logo et les icones, il y a donc largement la
   place jusqu'a 600px. En dessous seulement, le pourcentage passe
   au-dessus de la phrase. */
.discount_banner_responsive .discount_banner_text {
    padding: 0 .5rem;
}

/* Tout le texte est blanc, pourcentage compris: le fond rose suffit a
   le detacher, une couleur sombre par-dessus le rendait plus discret
   que le reste de la phrase. */
.discount_banner_offer,
.discount_banner_offer_short {
    /* Le pourcentage ne se coupe jamais et ne s'etire jamais: c'est
       une pastille, sa largeur est celle de son texte. flex-shrink et
       flex-grow a 0, flex-basis sur le contenu. */
    flex: 0 0 auto;
    align-self: center;
    width: max-content;
    white-space: nowrap;
    padding: .1rem .55rem;
    font-size: 1.05rem;
    font-weight: bold;
    color: white;
    background-color: #EC2C8E;
    /* Coins a peine adoucis, comme sur les pages de vente. */
    border-radius: .3rem;
}

/* La version courte du pourcentage attend son tour: elle ne sert que
   sous 400px, ou plus aucune phrase ne tient. Le decompte, lui, n'a
   qu'une version: son format dynamique tient partout. */
.discount_banner_offer_short {
    display: none;
}

/* Chiffres a largeur fixe: le decompte change chaque seconde, sans ca
   la ligne entiere tremblerait. */
.discount_countdown {
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    color: white;
}

/* ===========================================================
   BOUTON DE FERMETURE

   CLASSE A RETOUCHER: .discount_banner_close
   (l'image dedans: .discount_banner_close_icon)

   Fond nettement plus clair que le panneau: on voit tout de
   suite que ce bouton n'appartient pas au message, et le clic ne
   part pas sur la page de la promo par erreur.
=========================================================== */
.discount_banner_close {
    all: unset;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 100%;
    background-color: #55565d;
    border-left: .1rem solid #6a6b73;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

.discount_banner_close_icon {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
}

.discount_banner_close:focus-visible {
    outline: .12rem solid white;
    outline-offset: -.25rem;
}


/*Desktop*/
@media (hover: hover) {

    .discount_banner_close:hover {
        background-color: #66676f;
    }

}


/* ===========================================================
   PALIER INTERMEDIAIRE: 1150px

   Entre 1000 et 1150px, la barre est encore celle du grand
   ecran, mais la place libre au milieu ne suffit plus a tenir la
   phrase entiere sur une ligne. Le decompte passe donc sous
   "Limited time offer.", et le pourcentage reste a gauche des
   deux lignes.

   La regle vise la copie grand ecran UNIQUEMENT. Sans ce
   prefixe, elle s'appliquerait aussi a la barre mobile (une
   media query couvre toutes les largeurs INFERIEURES), qui se
   retrouverait sur trois lignes au lieu de deux.
=========================================================== */
@media only screen and (max-width: 1150px) {

    .navigation_header_discount .discount_banner_message {
        flex-direction: column;
        align-items: flex-start;
        gap: .1rem;
    }

}


/* ===========================================================
   UNE SEULE BANNIERE A L'ECRAN

   Sous 1000px, .menu_header est masquee... sauf quand l'user
   ouvre le menu: #check_header:checked la reaffiche en liste
   verticale (Language, Get Premium, Admin, Account).

   La copie "grand ecran" revenait donc avec elle, en plein
   milieu du menu deroulant, a cote de celle de la barre mobile.
   On la masque explicitement a partir de 1000px: c'est la copie
   .discount_banner_responsive qui prend le relais, et elle seule.
=========================================================== */
@media only screen and (max-width: 1000px) {

    .navigation_header_discount {
        display: none;
    }

}


/*Mobile*/
@media only screen and (max-width: 700px) {

    .discount_banner_limited,
    .discount_banner_time,
    .discount_banner_offer,
    .discount_banner_offer_short {
        font-size: .95rem;
    }

    .discount_banner_close {
        width: 2.1rem;
    }

    .discount_banner_close_icon {
        width: 1rem;
        height: 1rem;
    }

}


/* Sous 600px, la phrase entiere ne tient plus sur une ligne dans la
   barre mobile: le pourcentage remonte au-dessus du reste. */
@media only screen and (max-width: 600px) {

    /* La piste passe en colonne: le pourcentage au-dessus, le texte
       en dessous. Il garde sa largeur naturelle, une pastille etiree
       sur toute la barre ne voudrait plus rien dire. */
    .discount_banner_responsive .discount_banner_text {
        flex-direction: column;
        gap: .2rem;
    }

    /* Sous la pastille, le bloc est seul: son texte se recentre. */
    .discount_banner_responsive .discount_banner_message {
        justify-content: center;
        text-align: center;
    }

}


/* Sous 550px, "Limited time offer." est la premiere a partir: elle
   n'apprend rien que le pourcentage ne dise deja, et c'est elle qui
   prend le plus de place. */
@media only screen and (max-width: 550px) {

    .discount_banner_limited {
        display: none;
    }

}


/*Mobile*/
@media only screen and (max-width: 500px) {

    .discount_banner_responsive .discount_banner_text {
        padding: 0 .45rem;
    }

    .discount_banner_limited,
    .discount_banner_time,
    .discount_banner_offer,
    .discount_banner_offer_short {
        font-size: .85rem;
    }

    .discount_banner_close {
        width: 1.8rem;
    }

    .discount_banner_close_icon {
        width: .9rem;
        height: .9rem;
    }

}


/* Ecrans les plus etroits (jusqu'a 300px): tout reste lisible, rien
   n'est masque. Le texte etant fixe et sur deux lignes, il suffit de
   le reduire. */
@media only screen and (max-width: 400px) {

    .discount_banner {
        border-right-width: .12rem;
        border-bottom-width: .12rem;
        border-left-width: .12rem;
    }

    /* Meme mise en page qu'au palier precedent, en plus petit: le
       pourcentage reste au-dessus du temps. Seul le contenu se
       reduit encore, les mots disparaissent et le pourcentage passe
       en version courte ("-30%" puis "2d 20:45" en dessous). */
    .discount_banner_ends {
        display: none;
    }

    .discount_banner_offer {
        display: none;
    }

    .discount_banner_offer_short {
        display: block;
        width: max-content;
    }

    .discount_banner_responsive .discount_banner_text {
        gap: .1rem;
        padding: 0 .4rem;
    }

    .discount_banner_limited,
    .discount_banner_time,
    .discount_banner_offer,
    .discount_banner_offer_short {
        font-size: .72rem;
    }

    .discount_banner_offer_short {
        padding: .05rem .3rem;
    }

    .discount_banner_close {
        width: 1.5rem;
    }

    .discount_banner_close_icon {
        width: .8rem;
        height: .8rem;
    }

}


/* Ecran couche: la barre de menu est deja tres basse, le panneau y
   deviendrait illisible. */
@media screen and (pointer: coarse) and (orientation: landscape), screen and (max-height: 550px) and (orientation: landscape) {

    .discount_banner {
        display: none;
    }

}