/* ==========================================================================
   WebHopper · consent.css
   Encart de consentement aux cookies, ancre en bas a droite.
   Depend de tokens.css et base.css. Le markup est injecte par consent.js.

   CONFORMITE, points a ne pas casser :
   1. Aucune loi n'impose de taille ni de position. En revanche, les lignes
      directrices europeennes sur les pratiques trompeuses visent le fait de
      rendre l'information difficile a remarquer. D'ou deux garde-fous :
      le texte explicatif ne descend PAS sous 14px, et la carte reste tres
      contrastee avec une animation d'entree qui la signale.
   2. Refuser doit etre aussi simple qu'accepter. Les deux boutons sont donc
      EMPILES et en pleine largeur : ils ont rigoureusement la meme surface,
      seule la couleur differe. Ne jamais les remettre cote a cote dans une
      carte etroite, leurs largeurs deviendraient inegales.
   3. Aucune case pre-cochee, hors categorie strictement necessaire.
   ========================================================================== */

.cc{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:clamp(.75rem,2vw,1.4rem);pointer-events:none}
.cc[hidden]{display:none}

.cc-panel{position:relative;pointer-events:auto;width:100%;max-width:390px;
  background:var(--charbon);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-section);overflow:hidden;isolation:isolate;
  box-shadow:0 30px 64px -26px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.22)}

.cc-mesh{position:absolute;inset:0;pointer-events:none;z-index:-2;
  background:radial-gradient(75% 65% at 10% 0%,rgba(222,99,0,.28),transparent 62%)}
.cc-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Le plafond de hauteur est ici et non dans la requete mobile : le cas le plus
   serre est le telephone en PAYSAGE, ou la fenetre ne fait que 375px de haut
   alors que la carte en fait 363, soit 97 % de l'ecran, deja rognee de 2px.
   Le defilement est porte par .cc-in et non par .cc-panel, dont l'overflow
   hidden decoupe les angles arrondis et retient le grain et le degrade. */
.cc-in{position:relative;z-index:1;padding:1.25rem;
  max-height:calc(100vh - 3.5rem);max-height:calc(100svh - 3.5rem);
  overflow-y:auto;overscroll-behavior:contain}

.cc-head{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:1.05rem}
.cc-icon{flex-shrink:0;width:34px;height:34px;border-radius:var(--r-tag);
  background:rgba(222,99,0,.14);border:1px solid rgba(222,99,0,.45);color:var(--ambre);
  display:flex;align-items:center;justify-content:center}
.cc-icon svg{width:17px;height:17px}
.cc-head h2{font-family:var(--font-display);font-weight:900;font-size:1.05rem;
  letter-spacing:-.02em;line-height:1.2;color:#fff;margin-bottom:.4rem}
/* 14.4px : plancher de lisibilite, ne pas descendre en dessous */
.cc-head p{color:#c9c5bf;font-size:.9rem;line-height:1.6}
.cc-head a{color:#fff;border-bottom:1px solid var(--ambre)}
.cc-head a:hover{color:var(--ambre)}

/* ---- Actions : empilees, donc strictement de meme surface ---- */
.cc-actions{display:grid;gap:.55rem}
.cc-actions .btn{width:100%;justify-content:center;font-size:13.5px;padding:12px 16px;min-height:44px}
.cc-refuse{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.38)}
.cc-refuse:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.62)}
.cc-more{justify-self:center;background:none;border:0;cursor:pointer;padding:.55rem .4rem;margin-top:.15rem;
  font-family:var(--font-mono);font-size:10.5px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--ambre);display:inline-flex;align-items:center;gap:.45rem}
.cc-more svg{width:13px;height:13px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.cc-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.cc-more:hover{color:#fff}

/* ---- Depliage des preferences ----
   Technique grid-template-rows 0fr -> 1fr : anime une hauteur automatique sans
   JavaScript de mesure, et sans figer une hauteur en dur. */
.cc-prefs{display:grid;grid-template-rows:0fr;opacity:0;margin-bottom:0;
  transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1), opacity .3s ease,
             margin-bottom .45s cubic-bezier(.16,1,.3,1)}
.cc-prefs > .cc-prefs-in{overflow:hidden;min-height:0}
.cc-prefs.open{grid-template-rows:1fr;opacity:1;margin-bottom:1.05rem}

.cc-prefs-in > div:first-child{padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
.cc-opt{display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:start;padding:.85rem 0;
  border-bottom:1px solid rgba(255,255,255,.1)}
.cc-opt:last-child{border-bottom:0;padding-bottom:0}
.cc-opt strong{display:block;font-family:var(--font-body);font-weight:700;font-size:.92rem;
  color:#fff;margin-bottom:.22rem}
/* 14px : plancher de lisibilite */
.cc-opt span{display:block;color:#a9a49e;font-size:.875rem;line-height:1.5}

/* Interrupteur : vraie case a cocher, focusable au clavier */
.cc-sw{position:relative;flex-shrink:0;width:44px;height:25px;margin-top:.1rem}
.cc-sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cc-sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);pointer-events:none;
  transition:background-color .25s ease, border-color .25s ease}
.cc-sw i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cc-sw input:checked + i{background:var(--ambre);border-color:var(--ambre)}
.cc-sw input:checked + i::after{transform:translateX(19px)}
.cc-sw input:focus-visible + i{outline:3px solid var(--ambre);outline-offset:3px}
.cc-sw input:disabled{cursor:not-allowed}
.cc-sw input:disabled + i{background:rgba(222,99,0,.45);border-color:rgba(222,99,0,.5)}
.cc-sw input:disabled + i::after{background:#e8e4df}

/* ---- Lien de reouverture dans le pied de page ---- */
.cc-reopen{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;
  color:#b9b5af;border-bottom:1px solid transparent}
.cc-reopen:hover{color:#fff;border-bottom-color:var(--ambre)}

/* ---- Apparition : depliage depuis le coin ---- */
.cc-panel{animation:ccIn .58s cubic-bezier(.16,1,.3,1) both}
@keyframes ccIn{
  from{opacity:0;transform:translate3d(14px,28px,0) scale(.93)}
  to{opacity:1;transform:none}
}

/* ---- Mobile : pleine largeur en bas, un coin serait trop etroit ----
   La carte occupait 360px de haut sur un ecran de 812px, soit 44 % de la
   fenetre. Tout ce qui suit reduit cette emprise SANS retirer un seul mot et
   sans toucher aux trois garde-fous du haut de fichier : le texte reste a
   14,4px, les deux boutons restent empiles et de meme surface, et leur zone
   tactile reste a 44px. */
@media(max-width:560px){
  .cc{align-items:flex-end;justify-content:center}
  .cc-panel{max-width:none}
  .cc-in{padding:1rem}

  /* L'icone prend 34px plus sa gouttiere sur une carte de 350px, ce qui
     poussait le paragraphe a six lignes. Masquee ici, le texte occupe toute
     la largeur et la carte perd une ligne sans perdre un mot. */
  .cc-icon{display:none}
  .cc-head{gap:0;margin-bottom:.85rem}
  .cc-head p{line-height:1.5}

  .cc-actions{gap:.5rem}
  .cc-more{padding:.45rem .4rem;margin-top:0}

  @keyframes ccIn{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}
}

@media(prefers-reduced-motion:reduce){
  .cc-panel{animation:none}
  .cc-prefs{transition:none}
  .cc-sw i::after,.cc-more svg{transition:none}
}