/* Habillage de la CMP tarteaucitron (issue #35)

   Cette feuille surcharge celle de tarteaucitron, elle ne la remplace pas.
   Le CSS d'origine (static/tarteaucitron/css/) n'est jamais edite : c'est ce
   qui permet de monter de version en remplacant simplement ses fichiers.
   Voir docs/tarteaucitron.md.

   Deux regles a garder en tete si on retouche ce fichier :

   1. **L'ordre de chargement fait tout.** src/consent.ts pose la feuille de
      tarteaucitron puis celle-ci. A specificite egale, la derniere gagne.
      Les prefixes `html body #tarteaucitronRoot` ne sont pas decoratifs : ils
      egalent la specificite de la bibliotheque, qui n'en est pas avare.

   2. **Aucun decalage de contenu.** Le bandeau et le panneau sont en
      `position: fixed` et n'existent qu'apres le `load` : ils n'entrent dans
      aucun calcul de mise en page, donc pas de CLS.

   Charte : noir #141412, blanc, jaune #ffce44, Inter. Les variables viennent
   de site.css, toujours chargee avant. */

/* --------------------------------------------------------------------------
   Socle : la bibliotheque impose du #333 sur tout, il faut le reprendre
   -------------------------------------------------------------------------- */

html body #tarteaucitronRoot,
html body #tarteaucitronRoot * {
  font-family: var(--sans);
  color: var(--blanc);
  line-height: 1.6;
}

/* Le voile derriere le panneau : blanc chez tarteaucitron, noir ici. */
html body.tarteaucitron-modal-open div#tarteaucitronRoot::before,
html body .tarteaucitronSize-middle.tarteaucitronBeforeVisible::before {
  background: rgba(10, 10, 9, .72) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
html body #tarteaucitronRoot #tarteaucitronBack {
  background: var(--noir);
  opacity: .82;
}

/* Focus toujours visible, et lisible sur fond sombre. */
html body #tarteaucitronRoot a:focus-visible,
html body #tarteaucitronRoot button:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Le bandeau
   -------------------------------------------------------------------------- */

html body #tarteaucitronRoot #tarteaucitronAlertBig {
  background: rgba(20, 20, 18, .97);
  color: var(--blanc);
  border: 0;
  border-top: 1px solid rgba(255, 206, 68, .35);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-sizing: border-box;
  text-align: center;
  /* La bibliotheque pose `width: 100%`, donc la largeur du corps de page : si
     une autre partie du site deborde en largeur, le bandeau debordait avec
     elle. Cale a gauche et a droite, il se dimensionne sur la fenetre ; et sur
     mobile, ou le viewport de mise en page s'elargit avec le debordement,
     `max-width: 100vw` le ramene a l'ecran. Sur grand ecran cette borne ne
     mord jamais : `left`/`right` donnent deja moins que 100vw. */
  width: auto;
  max-width: 100vw;
  left: 0;
  right: 0;
  /* `margin: auto` chez tarteaucitron : sur une page qui deborde, il centrerait
     le bandeau dans la largeur du document au lieu de le coller a gauche. */
  margin: 0;
  /* Le pouce sur iPhone ne doit pas tomber sous la barre systeme. */
  padding: 1.25rem clamp(1.2rem, 4vw, 3rem);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  font-size: .85rem !important;
}

/* Apparition douce : le bandeau passe de display:none a display:block, ce qui
   relance l'animation. */
@keyframes patCmpEntree {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
html body #tarteaucitronRoot #tarteaucitronAlertBig,
html body #tarteaucitronRoot #tarteaucitron {
  animation: patCmpEntree .45s cubic-bezier(.22, .61, .36, 1) both;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig span#tarteaucitronDisclaimerAlert {
  display: block;
  max-width: 62ch;
  margin: 0 auto .95rem;
  padding: 0;
  font-size: .85rem;
  line-height: 1.7;
  color: #ddd;
  max-height: 40vh;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronDisclaimerAlert strong,
html body #tarteaucitronRoot #tarteaucitronAlertBig #tarteaucitronPrivacyUrl {
  color: #ddd;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig a { color: var(--or-clair); }

/* --------------------------------------------------------------------------
   Les deux actions principales

   « Tout accepter » et « Tout refuser » ont strictement le meme poids visuel :
   meme cadre, meme taille, meme graisse, meme survol. C'est une exigence de la
   CNIL, pas un parti pris esthetique. Ne pas remplir l'un des deux.
   -------------------------------------------------------------------------- */

html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
  font-family: var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}

html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton {
  background: transparent;
  color: var(--blanc);
  border: 1px solid var(--or);
  font-size: .72rem !important;
  padding: .8rem 1.9rem;
  margin: .3rem .3rem 0;
  line-height: 1.3;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton:focus-visible {
  background: var(--or);
  color: var(--noir);
}

/* « Choisir » et « Mentions legales » sont des actions secondaires : elles ne
   rivalisent avec aucune des deux ci-dessus. */
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
  background: transparent;
  color: #bbb;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  font-size: .68rem !important;
  padding: .5rem .2rem;
  margin: .3rem .9rem 0;
}
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl:hover,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert:focus-visible,
html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl:focus-visible {
  color: var(--or-clair);
  border-bottom-color: var(--or);
}

/* --------------------------------------------------------------------------
   Le panneau de preferences
   -------------------------------------------------------------------------- */

html body #tarteaucitronRoot div#tarteaucitron {
  max-width: 860px;
  width: min(860px, calc(100% - 2rem));
}
html body #tarteaucitronRoot #tarteaucitron div#tarteaucitronServices {
  background: var(--noir);
  border: 1px solid rgba(255, 206, 68, .25);
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  overflow: hidden;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronBorder {
  background: var(--noir);
  border: 0 !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronClosePanel {
  background: var(--or);
  color: var(--noir);
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 0;
  width: auto;
  padding: .5rem 1.1rem;
}

html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH1 {
  color: var(--blanc);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 1.4rem 0 1.1rem;
}
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH2,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronH3 {
  color: var(--blanc);
  font-size: .95rem;
  font-weight: 500 !important;
}
html body #tarteaucitronRoot #tarteaucitron span.tarteaucitronH3 { font-weight: 500 !important; }

/* Le bandeau titre de chaque finalite, et le texte d'information deroulant. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle button,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronDetails,
html body #tarteaucitronRoot .asCatToggleBtn {
  background: transparent;
  color: var(--or-clair);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronTitle + [id^="tarteaucitronDetails"] {
  background: var(--noir-2);
  color: #ccc;
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo {
  background: var(--noir-2);
  border: 1px solid rgba(255, 206, 68, .25);
  color: #ccc;
  font-size: .8rem;
  letter-spacing: 0;
  text-transform: none;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronInfo a {
  color: var(--or-clair);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Les lignes de service
   -------------------------------------------------------------------------- */

html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine:hover {
  background: var(--noir);
  border-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed {
  border-left: 3px solid var(--or) !important;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied {
  border-left: 3px solid rgba(255, 255, 255, .3) !important;
}

html body #tarteaucitronRoot li.tarteaucitronLine .tarteaucitronName span.tarteaucitronServiceDescription,
html body #tarteaucitronRoot #tarteaucitron .tarteaucitronLine .tarteaucitronName .tarteaucitronListCookies,
html body #tarteaucitronRoot .tarteaucitronName .tacCurrentStatus,
html body #tarteaucitronRoot .tarteaucitronName .tarteaucitronReadmoreSeparator {
  color: #aaa !important;
  font-size: .76rem !important;
  letter-spacing: 0;
  line-height: 1.6;
}
html body #tarteaucitronRoot #tarteaucitron a {
  color: var(--or-clair);
  font-size: .74rem;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronDisclaimer { color: #aaa; }

/* Autoriser / Refuser, ligne par ligne : meme parite que dans le bandeau. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronAsk button {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  color: var(--blanc);
  font-family: var(--sans);
  font-size: .68rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem 1.1rem;
  transition: background .3s, color .3s, border-color .3s;
}
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk button:hover,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine .tarteaucitronAsk button:hover {
  border-color: var(--or);
  color: var(--or-clair);
}

/* Le choix actif se voit : c'est l'etat, pas une incitation. */
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsAllowed .tarteaucitronAllow,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices .tarteaucitronLine.tarteaucitronIsDenied .tarteaucitronDeny,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronAllAllowed.tarteaucitronIsSelected,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronAllDenied.tarteaucitronIsSelected,
html body #tarteaucitronRoot #tarteaucitron #tarteaucitronServices #tarteaucitronServices_mandatory .tarteaucitronLine button.tarteaucitronAllow {
  background-color: var(--or);
  border-color: var(--or);
  color: var(--noir);
}

/* Le bouton d'enregistrement du mode groupe, au cas ou il serait active. */
html body #tarteaucitronRoot div#tarteaucitronSave { background: var(--noir); }
html body #tarteaucitronRoot button#tarteaucitronSaveButton {
  background: var(--or);
  color: var(--noir);
  font-family: var(--sans);
  font-size: .72rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 0;
  padding: .8rem 1.9rem;
}

/* --------------------------------------------------------------------------
   Petits ecrans et iOS
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  html body #tarteaucitronRoot #tarteaucitronAlertBig {
    padding: 1rem .9rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  html body #tarteaucitronRoot #tarteaucitronAlertBig span#tarteaucitronDisclaimerAlert {
    font-size: .8rem;
    max-height: 34vh;
  }
  /* Deux boutons pleine largeur, l'un sous l'autre : aucun n'est plus facile
     a atteindre que l'autre. */
  html body #tarteaucitronRoot #tarteaucitronAlertBig button.tarteaucitronCTAButton {
    display: block;
    width: 100%;
    margin: .5rem 0 0;
    padding: .85rem .6rem;
  }
  html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronCloseAlert,
  html body #tarteaucitronRoot #tarteaucitronAlertBig button#tarteaucitronPrivacyUrl {
    margin: .9rem .6rem 0;
  }
}

@media screen and (max-width: 767px) {
  /* La bibliotheque repasse le panneau en plein ecran blanc a cette taille. */
  html body #tarteaucitronRoot #tarteaucitron {
    background: var(--noir);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html body #tarteaucitronRoot div#tarteaucitron { width: 100% !important; }
}

/* --------------------------------------------------------------------------
   Mouvement reduit : le bandeau apparait, sans glisser ni fondre
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html body #tarteaucitronRoot #tarteaucitronAlertBig,
  html body #tarteaucitronRoot #tarteaucitron {
    animation: none;
  }
  html body #tarteaucitronRoot * {
    transition: none !important;
  }
}