/* ---------- Bandeau de consentement (Klaro, js/consent.js) ----------
   Mode modal (noticeAsModal) : fenetre centree + overlay .cm-bg qui bloque la
   page tant qu'aucun choix n'est fait. Klaro rend les boutons dans l'ordre
   personnaliser, refuser, accepter : `order` impose accepter / personnaliser
   / refuser. #klaro = conteneur de Klaro : l'id l'emporte sur les styles que
   klaro.js injecte apres cette feuille. Repris de rdv.reparstores.com. */
/* Au-dessus du header fixe (z-index 1000), de la barre d'appel mobile (1200)
   et de la barre de lecture des guides (9999) : Klaro met 1000. */
#klaro .cookie-modal,
#klaro .cookie-notice { z-index: 100000; }
#klaro .cookie-modal-notice {
  /* >= 400px : Klaro centre lui-meme (position relative + margin auto dans
     .cookie-modal plein ecran, top 50% + translateY) ; on ne touche qu'a la
     largeur. Ne pas ajouter left/transform : ca decale la fenetre. */
  max-width: 640px;
  padding: 22px 26px 24px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(30, 58, 95, .35);
}
@media (max-width: 399px) {
  /* < 400px : Klaro passe en position fixed pleine largeur (left 0) ;
     on garde 16px de marge de chaque cote. */
  #klaro .cookie-modal-notice { left: 16px; right: 16px; width: auto; }
}
#klaro .cookie-modal-notice h2 { font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: #1e3a5f; }
#klaro .cookie-modal-notice p { font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 480px) {
  /* Texte long : Klaro fait defiler la fenetre (max-height 98%), on limite
     le defilement sur les petits ecrans. */
  #klaro .cookie-modal-notice { padding: 18px 18px 20px; }
  #klaro .cookie-modal-notice h2 { font-size: 18px; }
  #klaro .cookie-modal-notice p { font-size: 13px; line-height: 1.5; }
}
#klaro .cookie-modal-notice .cn-ok {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
#klaro .cookie-modal-notice .cn-ok .cn-buttons { display: contents; }
#klaro .cookie-modal-notice .cn-ok .cm-btn {
  margin: 0;
  width: auto;
  flex: 1 1 160px;
  padding: 11px 16px;
  order: 2;                 /* personnaliser (cm-btn-lern-more) */
}
#klaro .cookie-modal-notice .cn-ok .cm-btn-success { order: 1; }   /* j'accepte */
#klaro .cookie-modal-notice .cn-ok .cn-decline { order: 3; }       /* tout refuser */

/* Fenetre de personnalisation : Klaro rend refuser, enregistrer, tout accepter.
   Meme ordre que le bandeau : tout accepter / enregistrer mes choix / tout
   refuser. (Fenetre rouverte apres un choix : seul "Enregistrer mes choix".) */
#klaro .cm-modal .cm-footer-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
#klaro .cm-modal .cm-footer-buttons .cm-btn {
  margin: 0;
  flex: 1 1 160px;
  padding: 11px 16px;
  order: 2;                 /* enregistrer mes choix (cm-btn-accept) */
}
#klaro .cm-modal .cm-footer-buttons .cm-btn-accept-all { order: 1; }  /* tout accepter */
#klaro .cm-modal .cm-footer-buttons .cn-decline { order: 3; }         /* tout refuser */

/* Couleurs : les trois boutons au meme poids visuel (CNIL : refuser aussi
   simple qu'accepter), bleu marine du site (blanc sur #1e3a5f : contraste AA). */
#klaro .cookie-notice .cn-ok .cm-btn,
#klaro .cm-modal .cm-footer-buttons .cm-btn {
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  background: #1e3a5f;
  color: #fff;
}
#klaro .cookie-notice .cn-ok .cm-btn:hover,
#klaro .cm-modal .cm-footer-buttons .cm-btn:hover { background: #162d4a; }