/* ════════════════════════════════════════════════════════════════════════
   LE BANDEAU DE CONSENTEMENT — « Un petit biscuit ? » (cf. inc/mesure.php)
   ════════════════════════════════════════════════════════════════════════
   L'habit du bandeau de Complianz, copie de la maquette de Corentin
   (24 octobre 2026, « fenêtre de consentement rétro au biscuit ») : une
   fenêtre centrée sur un fond voilé, la boîte à biscuits à gauche qui se
   fond dans le crème, une ligne manuscrite et son cœur, un grand titre à
   empattements, deux paragraphes, trois boutons, un filet, un lien.

   ⚠ COULEURS ET POLICES DE LA MAQUETTE, PAS CELLES DE LA CHARTE, ET C'EST
   DÉFINITIF (Corentin, 24 octobre 2026 : passer au bordeaux #5E2028 et à
   Marcellus/Manrope, « même pas plus tard »). Ne pas les « remettre aux
   couleurs du site » : c'est une exception voulue à la charte. Georgia est
   la serif système la plus proche de la maquette ; la manuscrite est celle
   du site (Homemade Apple). Les études ne prêtent aucun effet mesuré à la
   couleur ni à la police sur le choix (Bielova, Graßl) : seule la structure
   compte.

   Mesures relevées sur la maquette (fenêtre de 1190 px), ramenées à une
   fenêtre de 980 px (× 0,82).

   Les TEXTES sont dans Complianz (wp-admin → Complianz → Bannière de
   consentement). Dans sa zone « message » : `cp-cookie-surtitre` (la ligne
   manuscrite), le lien du refus `cp-cookie-continuer`, deux `cp-cookie-para`.
   Pas de lien « En savoir plus » (retiré le 24 oct., comme chez Poses) : le
   détail des usages et les noms (Google, Meta) sont dans « Personnaliser
   mes choix », la politique de confidentialité dans le pied de page.

   ⚠ Complianz charge sa propre feuille APRÈS celle-ci, par JavaScript :
   chaque règle passe donc par `#cmplz-cookiebanner-container` (un
   identifiant bat ses classes). Ne pas retirer ce préfixe.

   ⚠ LE REFUS, DEPUIS LE 24 OCTOBRE 2026 (Corentin, mécanique de POSES) :
   « Tout accepter » et « Personnaliser mes choix » en boutons ; le refus
   est le lien « Continuer sans accepter » en haut à droite (classe
   `cmplz-deny` : c'est le vrai « Tout refuser » de Complianz), et « Tout
   refuser » reste en bouton dans « Personnaliser ». C'est le modèle de la
   figure 5 de la recommandation CNIL ; le rapport européen de 2023 ne le
   tient pour valable que si le lien est DANS la fenêtre, HORS du texte et
   bien visible. Ne jamais le rapetisser, le pâlir ni le noyer dans un
   paragraphe : c'est ce qui le ferait basculer dans l'illégal.
   ════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Homemade Apple"; src: url("../fonts/homemade-apple-latin.woff2") format("woff2"); font-display: swap; }

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  --cpc-w: min(100vw - 32px, 980px);
  --cpc-creme: #FAEBDC;
  --cpc-bordeaux: #8A2336;
  --cpc-titre: #3A0A10;
  --cpc-encre: #2E2420;
  --cpc-manuscrite: #8A1A2C;
  --cpc-lien: #4A1A14;
  --cpc-croix: #6B3418;
  --cpc-filet: #EBD9CA;
  --cpc-colonne: calc(var(--cpc-w) * .4357);   /* où commence le texte */
  --cmplz_banner_background_color: var(--cpc-creme);
  --cmplz_text_color: var(--cpc-encre);
  --cmplz_hyperlink_color: var(--cpc-lien);
  --cmplz_slider_active_color: var(--cpc-bordeaux);
  --cmplz_slider_inactive_color: #CBB6A6;
  --cmplz_slider_bullet_color: var(--cpc-creme);
  --cmplz_category_header_always_active_color: var(--cpc-bordeaux);

  /* Au centre de l'écran. */
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  width: var(--cpc-w); min-width: 0; max-width: none;
  max-height: calc(100svh - 32px);
  margin: 0;
  padding: 160px 20px 38px var(--cpc-colonne);
  border: 1px solid #FFFAF0; border-radius: 23px;
  display: block;
  background: radial-gradient(120% 90% at 85% 0%, #FCF1E6 0%, var(--cpc-creme) 60%);
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 30px 80px rgb(40 14 8 / .35), 0 2px 8px rgb(40 14 8 / .12);
  overflow: hidden auto;
  z-index: 99999;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed { display: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
  box-shadow: 0 30px 80px rgb(40 14 8 / .35), 0 2px 8px rgb(40 14 8 / .12);
}

/* Le fond voilé et flouté derrière la fenêtre, tant qu'elle est ouverte. */
#cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed))::before {
  content: ""; position: fixed; inset: 0; z-index: 99998;
  background: rgb(70 38 26 / .30);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}

/* La boîte à biscuits : encadrée de 9 px de crème, arrondie à gauche, et
   fondue dans le crème sur son bord droit. Posée par inc/mesure.php en
   --cp-cookie-image. */
#cmplz-cookiebanner-container .cmplz-cookiebanner::before {
  content: ""; position: absolute; top: 7px; bottom: 7px; left: 7px;
  width: calc(var(--cpc-w) * .4214);
  border-radius: 17px 0 0 17px;
  background: none 75% 55% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent);
          mask-image: linear-gradient(to right, #000 84%, transparent);
  pointer-events: none;
}

/* L'image seulement quand la fenêtre est vraiment à l'écran : Complianz
   l'affiche un instant avant de la masquer, et le navigateur téléchargeait
   la boîte (136 Ko) à chaque page, même choix déjà fait. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show::before { background-image: var(--cp-cookie-image, none); }
/* Le focus clavier posé sur la fenêtre à l'ouverture (inc/mesure.php) : pas de cadre sur la carte elle-même. */
#cmplz-cookiebanner-container .cmplz-cookiebanner:focus { outline: none; }

/* L'en-tête de Complianz : le titre et la croix ; pas de logo ni de filets. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { display: block; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider { display: none !important; }

/* Pas de croix : « Continuer sans accepter » dit ce qu'elle faisait sans
   le dire (la CNIL veut que fermer = refuser soit écrit). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { display: none !important; }

/* « Continuer sans accepter » : en haut à droite, de la taille du texte,
   souligné (il vit dans le message, d'où la position absolue). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-continuer {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  font: 18px/1.3 Georgia, "Times New Roman", serif; color: var(--cpc-encre);
  text-decoration: underline; text-underline-offset: 3px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-continuer:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-continuer:focus-visible { color: var(--cpc-bordeaux); }

/* La ligne manuscrite et son cœur, au-dessus du titre (elle vit dans le
   message : Complianz n'a qu'un champ de titre). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-surtitre {
  position: absolute; top: 88px; left: var(--cpc-colonne); right: 40px;
  font: min(25px, calc(var(--cpc-w) * .0255)) / 1.6 "Homemade Apple", cursive; color: var(--cpc-manuscrite); /* rétrécit avec la fenêtre (coupé sur tablette sinon) */
  white-space: nowrap;
  transform: rotate(-2deg); transform-origin: 0 50%;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-surtitre::after {
  content: ""; display: inline-block; width: 32px; height: 30px; margin-left: 16px;
  vertical-align: -2px; transform: rotate(8deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 26'%3E%3Cpath d='M14.5 23.5C9 19 3 14.5 2.6 8.6 2.3 4.6 5.3 2 8.4 2.4c2.6.3 4.6 2.6 5.6 5.3 1-3 3.3-5.6 6.4-5.6 3.4 0 5.9 3 5.2 6.9-.9 5.4-6.4 9.8-11.1 14.5' fill='none' stroke='%238A1A2C' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le titre : grand, gras, à empattements, et deux petits traits près du « ? ». */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  position: relative; display: inline-block !important;
  margin: 0 0 25px;
  font-family: Georgia, "Times New Roman", serif; font-weight: 700;
  font-size: min(57px, 5.6vw); line-height: 1.05; letter-spacing: -.025em;
  color: var(--cpc-titre);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title::after {
  content: ""; position: absolute; top: -.12em; right: -.6em; width: .55em; height: .5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 28'%3E%3Cpath d='M9 15 15 4M14 23l14-4' fill='none' stroke='%238A1A2C' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Le texte : deux paragraphes. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { max-height: none; min-width: 0; overflow: visible; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  width: auto; margin: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1.37;
  color: var(--cpc-encre);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-para { display: block; text-wrap: pretty; } /* pas de mot seul en fin de paragraphe */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-para + .cp-cookie-para { margin-top: .9em; }

/* « Personnaliser mes choix » : les catégories, sur un crème plus soutenu. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { width: auto; margin-top: 18px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
  background: #F3DFCC; border-radius: 10px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-title { font-family: Georgia, serif; font-weight: 700; }

/* Les trois boutons : deux pleins, un cerclé, côte à côte. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-top: 32px;
}
/* « Tout refuser » n'est pas au premier écran (le lien en tient lieu),
   seulement dans « Personnaliser mes choix ». */
#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) .cmplz-buttons .cmplz-btn.cmplz-deny { display: none !important; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons { grid-template-columns: repeat(3, 1fr); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-width: 0; min-height: 76px; padding: 8px 12px; border-radius: 9px;
  white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 18px; font-weight: 700; line-height: 1.15;
  background: transparent; border: 1.5px solid var(--cpc-bordeaux); color: var(--cpc-bordeaux);
  transition: background-color .2s, color .2s, filter .2s;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
  background: var(--cpc-bordeaux); color: #FBEDE4;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover { filter: brightness(1.12); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { background: #F3DFCC; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept { order: 1; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny { order: 2; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { order: 3; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
  outline: 2px solid var(--cpc-bordeaux); outline-offset: 2px;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-documents { display: none; }

/* Au téléphone (décision T7, 24 octobre 2026) : une carte collée en bas
   de l'écran, toujours bloquante, les boutons sous le pouce (Utz 2019 :
   le bas de l'écran gagne, portée du pouce) ; la boîte réduite à une bande
   de 110 px ; le voile assombrit sans flouter, pour qu'on reconnaisse la
   page derrière. Aucune étude ne compare ces formats au téléphone : ce
   sont des choix, à juger au compteur (téléphone et ordinateur séparés). */
@media (max-width: 760px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    --cpc-w: 100vw;
    --cpc-colonne: 20px;
    top: auto; bottom: 0; left: 0; transform: none;
    max-height: 92svh;
    padding: 136px 18px calc(16px + env(safe-area-inset-bottom)) 20px;
    display: flex; flex-direction: column;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  #cmplz-cookiebanner-container:has(.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed))::before {
    background: rgb(40 18 12 / .45);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner::before {
    right: 7px; bottom: auto; width: auto; height: 110px;
    border-radius: 16px 16px 0 0;
    background-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
            mask-image: linear-gradient(to bottom, #000 70%, transparent);
  }
  /* « Continuer sans accepter » sous les boutons (Corentin, 24 oct.) : sur
     la photo, sa pastille crème attirait l'œil avant tout le reste. Il
     garde sa ligne, la taille du texte et son espace, séparé de « En savoir
     plus » par le filet : la CNIL a mis en demeure (déc. 2024) des refus
     qui se confondaient avec les mentions d'information. */
  /* Le lien est dans le texte de Complianz (avant le titre) : on aplatit
     corps et message (display: contents) pour le remettre, dans le flux,
     sous les boutons. Posé en absolu, il chevauchait les boutons quand la
     carte défilait (petits téléphones, 320 px). */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { display: contents !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { order: 1; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-para { order: 2; font-size: 17px; line-height: 1.42; color: var(--cpc-encre); }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { order: 3; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { order: 4; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-continuer {
    order: 5; position: static; display: block; margin-top: 14px;
    text-align: center; font-size: 16px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links { order: 6; }
  /* Dans « Personnaliser », le bouton « Tout refuser » en tient lieu. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cp-cookie-continuer { display: none; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  /* Pas de petit mot manuscrit au téléphone (Corentin, 24 oct.) : le titre suffit. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-surtitre { display: none; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-size: 38px; margin-bottom: 14px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { font-size: 17px; line-height: 1.42; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons,
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 54px; font-size: 17px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences { grid-column: 1 / -1; min-height: 48px; }
}

/* Changer d'avis : pas de pastille flottante (Corentin, 24 octobre 2026,
   « comme la plupart des sites ») ; le bouton « Gérer mes cookies » vit
   dans les liens légaux du pied de page (inc/mesure.php). Masquée ici même
   si Complianz est réglé pour l'afficher (son réglage par défaut). */
html body #cmplz-manage-consent { display: none !important; }

/* Le bouton du pied de page : habillé comme les liens qui l'entourent. */
.cp-gerer-cookies {
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: inherit;
}
.footer__legal .cp-gerer-cookies { color: var(--ivory); transition: opacity .2s; }
.footer__legal .cp-gerer-cookies:hover { opacity: .75; }
.sq-footer__legal .cp-gerer-cookies { font-family: var(--font-body); font-size: .82rem; color: var(--ivory); opacity: .82; }
.sq-footer__legal .cp-gerer-cookies:hover { opacity: 1; text-decoration: underline; }
.cp-gerer-cookies:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Très petits téléphones (320 px) : « Personnaliser » débordait de son bouton. */
@media (max-width: 360px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-size: 15px; padding: 8px 8px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-size: 34px; }
}

/* Écran bas (téléphone tenu à l'horizontale) : carte compacte, sans
   photo ni petit mot, boutons de taille normale. Complianz, sous 400 px de
   haut, ZOOME sa carte à 0,6 et ses boutons à 0,5 et force marges et
   hauteurs en !important (cookiebanner.css, « max-height: 400px ») : on
   annule tout, sinon les boutons tombent à 13 px. */
@media (max-height: 500px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    --cpc-colonne: 20px;
    top: 50%; bottom: auto; left: 50%; transform: translate(-50%, -50%);
    width: min(100vw - 24px, 640px); height: auto !important;
    max-height: calc(100svh - 16px);
    padding: 18px 20px 16px !important; border-radius: 18px; border-bottom: 1px solid #FFFAF0;
    display: block; overflow: hidden auto !important; zoom: 1 !important; /* PAS de !important sur display : il empêchait la fenêtre de se fermer */
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { margin: 0 !important; max-height: none !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { margin-top: 0 !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner::before,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-surtitre { display: none; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { font-size: 26px; margin: 0 200px 8px 0; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { font-size: 15px; line-height: 1.4; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { overflow: visible !important; max-height: none !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cp-cookie-continuer {
    position: absolute; margin: 0; top: 20px; right: 20px; bottom: auto; left: auto; text-align: right; font-size: 15px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cp-cookie-continuer { display: block; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { margin-top: 14px; gap: 8px !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    height: auto !important; min-height: 44px !important; padding: 8px 12px !important;
    font-size: 16px !important; line-height: 1.15 !important; white-space: normal !important;
    zoom: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn { transition: none; animation: none; }
}