/* Complianz : bannière, onglet « Gérer le consentement » et politique de témoins aux couleurs du site.
   Hors @layer exprès : il doit passer devant le CSS généré par l'extension. Les variables sont
   posées sur body, plus près des éléments que le :root de Complianz, donc l'ordre de chargement ne compte pas. */
body{
  --cmplz_banner_background_color:var(--paper);
  --cmplz_banner_border_color:var(--hairline);
  --cmplz_banner_border_width:1px;
  --cmplz_banner_border_radius:10px;
  --cmplz_banner_width:540px;
  --cmplz_text_color:var(--ink-900);
  --cmplz_hyperlink_color:var(--orange-deep);
  --cmplz_title_font_size:20px;
  --cmplz_text_font_size:15px;
  --cmplz_link_font_size:14px;
  --cmplz_category_header_title_font_size:15px;
  --cmplz_category_header_active_font_size:13px;
  --cmplz_category_body_font_size:14px;
  --cmplz_category_header_always_active_color:var(--orange-deep);
  --cmplz_button_font_size:15px;
  --cmplz_button_border_radius:6px;
  /* Accepter et Refuser pèsent autant l'un que l'autre (Loi 25 : refuser aussi facile qu'accepter). */
  --cmplz_button_accept_background_color:var(--orange);
  --cmplz_button_accept_border_color:var(--orange);
  --cmplz_button_accept_text_color:var(--ink-900);
  --cmplz_button_deny_background_color:var(--ink-900);
  --cmplz_button_deny_border_color:var(--ink-900);
  --cmplz_button_deny_text_color:var(--paper);
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:var(--hairline);
  --cmplz_button_settings_text_color:var(--ink-900);
  --cmplz_slider_active_color:var(--orange-deep);
  --cmplz_slider_inactive_color:var(--muted);
  --cmplz_slider_bullet_color:#fff;
}

/* Bannière */
.cmplz-cookiebanner{font-family:var(--font-body);box-shadow:0 18px 48px rgba(18,15,11,.18)}
.cmplz-cookiebanner .cmplz-title{font-family:var(--font-display);font-weight:500;letter-spacing:-.005em}
.cmplz-cookiebanner .cmplz-message{color:var(--ink-800)}
.cmplz-cookiebanner .cmplz-message a,.cmplz-cookiebanner .cmplz-links .cmplz-link{text-decoration:underline;text-underline-offset:3px}
.cmplz-cookiebanner .cmplz-close{color:var(--ink-900);box-sizing:content-box;padding:12px;margin:-12px}
/* Zones de toucher de 44 px sur mobile, sans changer l'allure : le X et les liens vers les politiques. */
.cmplz-cookiebanner .cmplz-links .cmplz-link{display:inline-block;padding:13px 4px}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
  min-height:48px;padding:12px 20px;font-family:var(--font-body);font-weight:600;
  transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover{background-color:#D97C14;border-color:#D97C14;transform:translateY(-1px)}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover{background-color:#26201A;border-color:#26201A;transform:translateY(-1px)}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover{border-color:var(--ink-900)}
.cmplz-cookiebanner .cmplz-btn:focus-visible,.cmplz-cookiebanner a:focus-visible,#cmplz-manage-consent .cmplz-manage-consent:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px}
.cmplz-cookiebanner .cmplz-categories .cmplz-category{background:#fff;border:1px solid var(--hairline);border-radius:6px}
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title{font-family:var(--font-display);font-weight:500}

/* Onglet « Gérer le consentement » */
#cmplz-manage-consent .cmplz-manage-consent{
  font-family:var(--font-body);font-weight:600;font-size:14px;
  background-color:var(--ink-900);color:var(--paper);border-color:var(--ink-900);
}

/* Liens légaux du pied de page, dont « Gérer les témoins » qui rouvre la bannière */
.footer-legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px}
.footer-legal a,.footer-legal button{
  font:inherit;font-size:14px;color:inherit;opacity:.82;text-decoration:none;
  background:none;border:0;padding:10px 0;min-height:44px;display:inline-flex;align-items:center;cursor:pointer;
}
.footer-legal a:hover,.footer-legal button:hover,.footer-legal a:focus-visible,.footer-legal button:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px}

/* Politique de témoins générée (bloc Complianz dans la page) */
#cmplz-document,.cmplz-document{font-family:var(--font-body);color:var(--ink-800);font-size:17px;line-height:1.7;max-width:none}
#cmplz-document h2,#cmplz-document h3,.cmplz-document h2,.cmplz-document h3{font-family:var(--font-display);color:var(--ink-900);font-weight:500;letter-spacing:-.01em;line-height:1.25}
#cmplz-document h2,.cmplz-document h2{font-size:clamp(1.4rem,2.4vw,1.75rem);margin:2.2em 0 .6em}
#cmplz-document h3,.cmplz-document h3{font-size:1.15rem;margin:1.6em 0 .4em}
#cmplz-document a,.cmplz-document a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}
#cmplz-document details,.cmplz-document details{background:#fff;border:1px solid var(--hairline);border-radius:6px;padding:4px 18px;margin:10px 0}
#cmplz-document summary,.cmplz-document summary{cursor:pointer;font-weight:600;color:var(--ink-900);padding:12px 0}
#cmplz-document table,.cmplz-document table{width:100%;border-collapse:collapse;font-size:15px}
#cmplz-document th,#cmplz-document td,.cmplz-document th,.cmplz-document td{border-bottom:1px solid var(--hairline);padding:10px 8px;text-align:left;vertical-align:top}
#cmplz-document .cmplz-subtitle,.cmplz-document .cmplz-subtitle{font-weight:600;color:var(--ink-900)}
.cmplz-btn.cmplz-manage-consent,.cmplz-manage-consent-container .cmplz-btn{
  font-family:var(--font-body);font-weight:600;border-radius:6px;min-height:48px;padding:12px 24px;
  background:var(--ink-900);color:var(--paper);border:0;cursor:pointer;
}

/* Téléphone (≤ 767 px ; paysage bas, hauteur ≤ 400 px, jusqu'à 899 px : mêmes règles, voir le bloc « paysage » plus bas) : bannière compacte, au plus 45 % de la hauteur de l'écran avant le choix.
   Rien ne change à partir de 768 px. Le texte complet reste accessible : la zone de texte défile dans la bannière.
   Accepter, Refuser et Préférences gardent la même taille, la même graisse et une hauteur d'au moins 44 px.
   Préfixe « body » : il faut battre les sélecteurs de l'extension, chargés après ce fichier. */
@media (max-width:767px) and (min-height:401px),(max-height:400px) and (max-width:899px){
  body .cmplz-cookiebanner{
    padding:12px 16px;
    grid-gap:6px;
    grid-template-rows:auto minmax(0,1fr) auto auto;
    max-height:45vh;max-height:45svh;
  }
  /* L'utilisateur a demandé « Voir les préférences » : la bannière peut grandir, le contenu défile. */
  body .cmplz-cookiebanner.cmplz-categories-visible{max-height:85vh;max-height:85svh}
  /* Séparateurs sans trait (hauteur 0) : ils ne servent qu'à ajouter des interstices. */
  body .cmplz-cookiebanner .cmplz-divider{display:none}
  /* Le titre est masqué par l'extension sous 426 px : on le rend, sur la ligne de la croix, sans hauteur de plus. */
  body .cmplz-cookiebanner .cmplz-header .cmplz-title{display:block;grid-column:1 / 3;justify-self:start;margin:0;font-size:17px;line-height:20px}
  body .cmplz-cookiebanner .cmplz-body{
    max-height:none;min-height:0;min-width:0;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--orange-deep) transparent;
    /* Ombres de défilement : elles montrent qu'il reste du texte au-dessus ou au-dessous. */
    background:
      linear-gradient(var(--paper) 30%,transparent) center top/100% 18px no-repeat local,
      linear-gradient(transparent,var(--paper) 70%) center bottom/100% 18px no-repeat local,
      radial-gradient(farthest-side at 50% 0,rgba(18,15,11,.22),transparent) center top/100% 7px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%,rgba(18,15,11,.22),transparent) center bottom/100% 7px no-repeat scroll;
  }
  body .cmplz-cookiebanner .cmplz-message{margin:0 6px 6px 0;line-height:20px}
  /* Boutons : Accepter et Refuser côte à côte, identiques ; Préférences pleine largeur dessous, même hauteur. */
  body .cmplz-cookiebanner .cmplz-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{min-height:44px;padding:10px 12px}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{grid-column:1 / -1}
  /* Même poids visuel pour les trois boutons : le liséré de « Préférences » (14 % d'encre, contraste 1,4:1) devient plein, comme le bouton Refuser. */
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences{border-color:var(--ink-900)}
  /* Liens vers les politiques : zone de toucher de 44 px (45 px) au lieu de 49 px. L'interstice de 10 px compte aussi
     autour d'un lien caché (mentions légales) : à 360 px il faisait passer les deux liens sur deux lignes. */
  body .cmplz-cookiebanner .cmplz-links .cmplz-link{padding:11px 4px}
  body .cmplz-cookiebanner .cmplz-documents ul{gap:4px}
  /* Aucune règle .screen-reader-text dans le thème : l'étiquette réservée aux lecteurs d'écran s'affichait à côté de chaque
     interrupteur (« Préférences », « Statistiques »…) quand on ouvre les préférences. On la masque visuellement, sans la retirer. */
  body .cmplz-cookiebanner .cmplz-banner-checkbox .screen-reader-text{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;
  }
  /* Préférences : interrupteurs (40 x 20) et flèches (18 x 18) trop petits au doigt. Zone de 44 px de haut, mise en page inchangée,
     sans que les deux zones se touchent : l'interrupteur (32 px de large, il en fait 28) s'arrête avant la flèche (au moins 31 px de large). */
  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox{width:32px;height:44px;margin-top:-22px}
  body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle{box-sizing:content-box;padding:13px 8px;margin:-13px -8px}
  /* La zone de texte défilante prend le focus au clavier (Chrome) : même anneau que les boutons (contraste 5,2:1 ; l'orange vif n'a que 2,4:1). */
  body .cmplz-cookiebanner .cmplz-body:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px}
  /* La croix reste atteignable au clavier : anneau à l'intérieur de sa zone, sinon le bord de la bannière le rogne. */
  body .cmplz-cookiebanner .cmplz-close:focus-visible{outline:2px solid var(--orange-deep);outline-offset:-4px;border-radius:6px}
  /* Interrupteurs et flèches des préférences : même anneau en orange profond (5,2:1) ; l'orange vif du site n'a que 2,4:1 sur le papier de la bannière. */
  body .cmplz-cookiebanner .cmplz-category input.cmplz-consent-checkbox:focus-visible,
  body .cmplz-cookiebanner .cmplz-category .cmplz-category-toggle:focus-visible{outline:2px solid var(--orange-deep);outline-offset:0}
}
@media (max-width:359px) and (min-height:401px){
  /* Sous 360 px les deux liens passent sur deux lignes (+23 px) : 330 px de plancher pour garder 4 à 5 lignes de texte visibles,
     jamais plus de 58 % de l'écran (320 x 568 : 58 %) ; sur un écran haut (344 x 882) on reste à 45 %. */
  body .cmplz-cookiebanner{max-height:min(max(45vh,330px),58vh);max-height:min(max(45svh,330px),58svh)}
}

/* Paysage bas (hauteur ≤ 400 px, jusqu'à 899 px de large : 568x320, 667x375, 740x360, 844x390), et portrait avec clavier ouvert.
   L'extension réduit alors toute la bannière avec « zoom:.6 » et ses boutons avec « zoom:.5 » (!important) : boutons de 17 px,
   texte illisible, 57 % de l'écran. On rend les tailles réelles (boutons de 44 px) et on garde le même gabarit que le téléphone en portrait.
   Les règles !important de l'extension se battent avec !important et une spécificité plus haute (préfixe « body »). */
@media (max-height:400px) and (max-width:899px){
  body .cmplz-cookiebanner{
    zoom:1;height:auto;max-height:calc(100vh - 12px);max-height:calc(100svh - 12px);
    padding:10px 16px !important;gap:6px 16px;grid-row-gap:6px;
  }
  body .cmplz-cookiebanner.cmplz-categories-visible{max-height:calc(100vh - 12px);max-height:calc(100svh - 12px)}
  body .cmplz-cookiebanner .cmplz-header{margin-bottom:0 !important;max-height:none}
  body .cmplz-cookiebanner .cmplz-body{margin-top:0 !important}
  body .cmplz-cookiebanner .cmplz-close,body .cmplz-close{zoom:1 !important}
  body .cmplz-cookiebanner .cmplz-buttons{gap:8px !important}
  body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    height:auto !important;min-height:44px !important;padding:10px 12px !important;
    font-size:15px !important;line-height:1.2 !important;white-space:normal !important;zoom:1 !important;
  }
  body .cmplz-cookiebanner .cmplz-documents,body .cmplz-cookiebanner .cmplz-information{zoom:1 !important}
  /* à partir de 768 px l'extension fixe le texte à 498 px (540 - 42) : il débordait de sa colonne */
  body .cmplz-cookiebanner .cmplz-message,body .cmplz-cookiebanner .cmplz-categories{width:auto}
}
/* Paysage assez large (≥ 480 px) : deux colonnes. Texte (qui défile) à gauche ; boutons puis liens à droite ; la croix en haut à droite. */
@media (max-height:400px) and (min-width:480px) and (max-width:899px){
  body .cmplz-cookiebanner{
    grid-template-columns:minmax(0,1fr) minmax(208px,34%);grid-template-rows:auto minmax(0,1fr) auto;
    max-height:min(calc(100vh - 12px),max(55vh,190px));max-height:min(calc(100svh - 12px),max(55svh,190px));
  }
  body .cmplz-cookiebanner.cmplz-categories-visible{max-height:calc(100vh - 12px);max-height:calc(100svh - 12px)}
  body .cmplz-cookiebanner .cmplz-header{grid-column:1;grid-row:1}
  body .cmplz-cookiebanner .cmplz-body{grid-column:1;grid-row:2}
  body .cmplz-cookiebanner .cmplz-documents{grid-column:1;grid-row:3}
  /* la croix (zone de 44 px) en haut à droite, les boutons juste dessous : ils ne se recouvrent pas */
  body .cmplz-cookiebanner .cmplz-close{position:absolute;top:2px;right:2px;margin:0}
  body .cmplz-cookiebanner .cmplz-buttons{grid-column:2;grid-row:1 / 4;align-self:start;margin-top:36px}
  /* les deux liens de politique tiennent sur une ligne dès 568 px */
  body .cmplz-cookiebanner .cmplz-links .cmplz-link{padding:11px 2px}
}
/* 768 à 899 px : l'extension pose une carte flottante à droite (min-width 540 px) ; on la garde, bornée par la fenêtre. */
@media (max-height:400px) and (min-width:768px) and (max-width:899px){
  body .cmplz-cookiebanner{left:10px;width:auto}
}
/* Paysage étroit (< 480 px) ou portrait avec clavier : une seule colonne, le texte défile entre l'en-tête et les boutons. */
@media (max-height:400px) and (max-width:479px){
  body .cmplz-cookiebanner{
    grid-template-rows:auto minmax(0,1fr) auto auto;
    max-height:min(calc(100vh - 12px),max(65vh,260px));max-height:min(calc(100svh - 12px),max(65svh,260px));
  }
  body .cmplz-cookiebanner.cmplz-categories-visible{max-height:calc(100vh - 12px);max-height:calc(100svh - 12px)}
}

/* Menu mobile ouvert alors que la bannière attend encore une réponse : la bannière (z-index 99999) recouvrait les derniers liens
   (5 sur 7 à 320x568, 3 sur 7 à 375x667 et 390x844). Pendant que le menu est ouvert, elle passe sous lui (menu = 150 ; en-tête = 200) ;
   elle réapparaît dès qu'il se referme. Le menu n'existe qu'en dessous de 900 px. */
@media (max-width:899px){
  body:has(#nav-toggle[aria-expanded="true"]) .cmplz-cookiebanner{z-index:90}
}
