/* =========================================
   RentWear CMP – thème global
   ========================================= */
:root{
  --cmp-bg:#ffffff;
  --cmp-text:#1d1d1f;
  --cmp-muted:#6b7280;
  --cmp-border:#e5e7eb;

  --cmp-orange:#f68b6b;
  --cmp-orange-hover:#f37d58;
  --cmp-orange-light:#fde6df;

  --cmp-radius:16px;                /* radius demandé */
  --cmp-shadow:0 8px 28px rgba(0,0,0,.08);

  --cmp-btn-font:15px;
  --cmp-btn-pad-y:12px;
  --cmp-btn-pad-x:16px;
  --cmp-btn-minw:152px;
}

/* =========================
   1) Bannière (1ʳᵉ couche)
   ========================= */
#tarteaucitronAlertBig{
  position:relative;

  /* Grille explicite: texte / 3 boutons / liens */
  display:grid !important;
  grid-template-columns: repeat(3, max-content);
  grid-template-areas:
    "desc desc desc"
    "btn1 btn2 btn3"
    "links links links";
  justify-content:center;
  align-items:start;
  column-gap:12px;
  row-gap:14px;

  background:var(--cmp-bg) !important;
  border:1px solid var(--cmp-border) !important;
  border-radius:var(--cmp-radius) !important;
  box-shadow:var(--cmp-shadow) !important;
  padding:18px !important;
  color:var(--cmp-text) !important;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  line-height:1.5 !important;
  max-width:960px !important;
  margin:12px auto !important;
  z-index:2147483647;
}

/* Texte en pleine largeur (au-dessus) */
#tarteaucitronDisclaimerAlert{
  grid-area: desc;
  display:block !important;
  color:var(--cmp-text) !important;
  text-align:left !important;
}

/* Lien "Politique de confidentialité" en pleine largeur (dessous) */
#tarteaucitronPrivacyUrl,
#tarteaucitron .tarteaucitronReadmore,
#tarteaucitron .tarteaucitronReadmore a{
  grid-area: links;
  justify-self:center;
  color:var(--cmp-text) !important;
}

/* Boutons – base */
#tarteaucitronAlertBig .tarteaucitronCTAButton,
#tarteaucitronAlertBig #tarteaucitronCloseAlert{
  font-size:var(--cmp-btn-font) !important;
  padding:var(--cmp-btn-pad-y) var(--cmp-btn-pad-x) !important;
  border-radius:9999px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  min-width:var(--cmp-btn-minw) !important;
  border:2px solid transparent !important;
  transition:background .18s, color .18s, transform .12s, border-color .18s !important;
  justify-self:center;
}

/* Placement forcé (gauche→droite): Personnaliser | Refuser | Accepter
   NB: ton DOM a l'ID #tarteaucitronPersonalize2 sur le bouton "Tout accepter".
   On place donc par les ID/classes réellement présents. */
#tarteaucitronCloseAlert{ grid-area: btn1; }                 /* Personnaliser */
#tarteaucitronAllDenied2{ grid-area: btn2; }                 /* Tout refuser */
#tarteaucitronAlertBig .tarteaucitronAllow{ grid-area: btn3; }/* Tout accepter */

/* Styles boutons 1ʳᵉ couche */
#tarteaucitronAlertBig .tarteaucitronAllow{
  background:var(--cmp-orange) !important; color:#fff !important; border-color:var(--cmp-orange) !important;
}
#tarteaucitronAlertBig .tarteaucitronAllow:hover{
  background:var(--cmp-orange-hover) !important; transform:translateY(-1px);
}
#tarteaucitronAlertBig .tarteaucitronDeny{
  background:#fff !important; color:var(--cmp-orange) !important; border-color:var(--cmp-orange) !important;
}
#tarteaucitronAlertBig .tarteaucitronDeny:hover{
  background:var(--cmp-orange-light) !important;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert{
  background:#fff !important; color:var(--cmp-text) !important; border-color:var(--cmp-border) !important;
}
#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover{ background:#f9fafb !important; }

/* Croix (optionnel) */
#tarteaucitronCloseCross{
  position:absolute !important; top:10px !important; right:10px !important;
  background:transparent !important; border:none !important; color:var(--cmp-muted) !important;
}

/* Mobile: pile + safe-area */
@media (max-width:767px){
  #tarteaucitronAlertBig{
    grid-template-columns: 1fr;
    grid-template-areas:
      "desc"
      "btn1"
      "btn2"
      "btn3"
      "links";
    margin:10px 8px max(8px, env(safe-area-inset-bottom)) !important;
    max-width:calc(100vw - 16px) !important;
  }
  #tarteaucitronAlertBig .tarteaucitronCTAButton,
  #tarteaucitronAlertBig #tarteaucitronCloseAlert{
    width:100% !important; min-width:0 !important;
  }
}

/* =========================
   2) Panneau "Personnaliser"
   ========================= */
#tarteaucitron{
  position:fixed !important;
  top:max(16px, env(safe-area-inset-top)) !important;
  left:50% !important; transform:translateX(-50%) !important;
  width:min(980px, calc(100vw - 20px)) !important;
  max-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px) !important;
  background:var(--cmp-bg) !important;
  border:1px solid var(--cmp-border) !important;
  border-radius:var(--cmp-radius) !important;
  box-shadow:var(--cmp-shadow) !important;
  overflow:hidden !important;
  z-index:2147483647 !important;
}
#tarteaucitronServices{ padding:16px !important; overflow:auto !important; }

/* Header */
#tarteaucitron .tarteaucitronH1{ display:block !important; font-weight:700 !important; font-size:18px !important; margin-bottom:8px !important; }
#tarteaucitron #tarteaucitronInfo{ color:var(--cmp-muted) !important; }
#tarteaucitron #tarteaucitronPrivacyUrlDialog{
  background:#fff !important; border:1px solid var(--cmp-border) !important; color:var(--cmp-text) !important;
  border-radius:9999px !important; padding:8px 14px !important; font-weight:600 !important;
}

/* Lignes & titres */
#tarteaucitron .tarteaucitronLine{ border-bottom:1px solid var(--cmp-border) !important; padding:14px 0 !important; }
#tarteaucitron .tarteaucitronTitle button{ font-weight:700 !important; }
#tarteaucitron .tarteaucitronName{ font-weight:600 !important; }
#tarteaucitron .tarteaucitronStatusInfo{ color:var(--cmp-muted) !important; }

/* CTA de groupe/ligne = SOBRES (pas de fond ni contour) */
#tarteaucitron .tarteaucitronAsk{
  display:flex !important; gap:12px !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:wrap !important;
}
#tarteaucitron .tarteaucitronAsk .tarteaucitronAllow,
#tarteaucitron .tarteaucitronAsk .tarteaucitronDeny{
  background:transparent !important;
  border:none !important;
  color:var(--cmp-text) !important;
  padding:0 !important; min-width:0 !important; border-radius:0 !important;
  font-weight:600 !important; text-decoration:none !important;
}
#tarteaucitron .tarteaucitronAsk .tarteaucitronAllow:hover,
#tarteaucitron .tarteaucitronAsk .tarteaucitronDeny:hover{
  text-decoration:underline !important;
}

/* Bouton "Fermer" du panneau */
#tarteaucitron #tarteaucitronClosePanel{
  position:absolute !important; top:10px !important; right:10px !important;
  background:#fff !important; border:1px solid var(--cmp-border) !important; color:var(--cmp-text) !important;
  border-radius:9999px !important; padding:8px 12px !important; font-weight:600 !important;
}

/* Seul "Enregistrer" reste ORANGE */
#tarteaucitronSave{ padding:12px 16px !important; border-top:1px solid var(--cmp-border) !important; background:var(--cmp-bg) !important; }
#tarteaucitronSaveButton{
  background:var(--cmp-orange) !important; color:#fff !important; border:2px solid var(--cmp-orange) !important;
  border-radius:9999px !important; padding:12px 16px !important; font-weight:700 !important;
}
#tarteaucitronSaveButton:hover{ background:var(--cmp-orange-hover) !important; }

/* Mobile : panneau plein écran safe-area */
@media (max-width:767px){
  #tarteaucitron{
    left:0 !important; transform:none !important; width:100vw !important;
    top:env(safe-area-inset-top) !important;
    height:calc(100vh - env(safe-area-inset-top)) !important;
    max-height:none !important; border-radius:12px 12px 0 0 !important;
  }
  #tarteaucitronServices{ height:calc(100% - 56px) !important; }
}

/* Focus visibles (a11y) */
#tarteaucitron .tarteaucitronCTAButton:focus,
#tarteaucitronAlertBig .tarteaucitronCTAButton:focus,
#tarteaucitron #tarteaucitronClosePanel:focus,
#tarteaucitronAlertBig #tarteaucitronCloseAlert:focus,
#tarteaucitronSaveButton:focus{
  outline:3px solid var(--cmp-orange-light) !important; outline-offset:2px !important;
}
/* --- PATCH MOBILE iOS : safe-areas + pas de coupure --- */
@media (max-width: 767px) {
  /* évite la coupe côté gauche/droit avec les encoches et l'arrondi d'écran */
  #tarteaucitronAlertBig {
    box-sizing: border-box !important;
    /* marge externe qui respecte les safe-areas */
    margin-left:  max(8px, env(safe-area-inset-left)) !important;
    margin-right: max(8px, env(safe-area-inset-right)) !important;
    margin-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    /* largeur qui ne déborde jamais, safe-areas inclus */
    max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px) !important;
    /* padding interne qui ne colle pas aux bords arrondis */
    padding-left:  max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }

  /* les boutons ne forcent jamais l’élargissement */
  #tarteaucitronAlertBig .tarteaucitronCTAButton,
  #tarteaucitronAlertBig #tarteaucitronCloseAlert {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* coupe horizontale globale, au cas où une image/section déborde */
  html, body { overflow-x: hidden !important; }
}
/* === PATCH: empêcher tout débordement des boutons sur mobile === */
@media (max-width: 767px) {
  /* 1) Le conteneur clippe strictement à son arrondi */
  #tarteaucitronAlertBig {
    overflow: hidden !important;        /* masque les bords des pills */
    padding-left: 20px !important;      /* un peu plus d’air à gauche/droite */
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* 2) Les boutons ne dépassent JAMAIS l’intérieur du container */
  #tarteaucitronAlertBig .tarteaucitronCTAButton,
  #tarteaucitronAlertBig #tarteaucitronCloseAlert {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;  /* prend le border dans le calcul */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) Le bouton “Refuser” a un contour 2px :
        on compense pour éviter l’effet « gonflement » visuel */
  #tarteaucitronAlertBig .tarteaucitronDeny {
    border-width: 2px !important;
    /* rétrécit subtilement le contenu pour que le pill paraisse centré */
    padding-left: calc(var(--cmp-btn-pad-x) - 1px) !important;
    padding-right: calc(var(--cmp-btn-pad-x) - 1px) !important;
  }
}
/* Icône tarteaucitron discret, noir, sans fond, à GAUCHE – derrière les floatings */
@media (max-width: 767px) {
  #tarteaucitronIcon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    width: auto !important; height: auto !important;
    z-index: 5 !important;            /* ↓ en-dessous des éléments flottants */
  }
  #tarteaucitronIcon img,
  #tarteaucitronIcon svg {
    width: 22px !important; height: 22px !important;
    filter: none !important; color: #000 !important; fill: #000 !important;
  }

  /* Exemple : assure que ta barre flottante passe au-dessus (mets la bonne classe) */
  .sticky-atc, .chat-widget, .floating-bar { 
    z-index: 50 !important;
  }
}
/* Supprime le fond du bouton et force un icône noir simple */
#tarteaucitronIcon {
  background: transparent !important; /* pas de fond */
  border: none !important;           /* pas de bordure */
  box-shadow: none !important;       /* pas d’ombre */
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}

/* Cible l’icône interne */
#tarteaucitronIcon img,
#tarteaucitronIcon svg {
  width: 28px !important;
  height: 28px !important;
  filter: none !important;       /* pas d’inversion */
  color: #000 !important;        /* icône en noir */
  fill: #000 !important;         /* si SVG */
}

/* Sur mobile : taille réduite */
@media (max-width: 768px) {
  #tarteaucitronIcon img,
  #tarteaucitronIcon svg {
    width: 22px !important;
    height: 22px !important;
  }

  #tarteaucitronIcon {
    bottom: 12px !important;
    left: 12px !important;
  }
}
/* Si Tarteaucitron met display:none/opacity:0, ne capte jamais les clics */
#tarteaucitron[style*="display: none"],
#tarteaucitronBack[style*="display: none"],
#tarteaucitronAlertBig[style*="display: none"],
#tarteaucitron[style*="opacity: 0"],
#tarteaucitronBack[style*="opacity: 0"],
#tarteaucitronAlertBig[style*="opacity: 0"]{
  pointer-events: none !important;
}