/* ==========================================================================
   POLITIQUE DE CONFIDENTIALITÉ — styles spécifiques à la page, complètent
   css/style.css et css/mentions-legales.css (réutilisé tel quel pour le
   hero .legal-hero*, la card de section .legal-card* et la card
   .legal-docs* "Nos documents juridiques" — non dupliqués ici).

   Réutilise les variables globales déjà utilisées ailleurs sur le site
   (--cyan, --cyan-soft, --card-bg, --panel-border, --muted, --muted-2,
   --white, .wrap, polices Orbitron/Rajdhani/Inter).

   Page volontairement sobre (document juridique) : pas d'animation
   pulseGlow, pas de CTA marketing.
   ========================================================================== */

/* ---------- DEUX COLONNES (01→06 à gauche, 07→13 à droite) ---------- */
.politique-content{
  max-width: 1180px;
  margin: 0 auto 6vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
  align-items: start;
}
.politique-col{
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
/* Empêche les cards (éléments flex ici) de s'élargir au-delà de leur
   colonne à cause d'un contenu large (tableau notamment) : sans cette
   règle, un enfant flex refuse par défaut de rétrécir sous la largeur
   de son contenu, ce qui fait déborder toute la card sur mobile au
   lieu de laisser .politique-table-wrap gérer son propre scroll. */
.politique-content .legal-card{
  min-width: 0;
}

/* ---------- GRILLE D'ICÔNES (sections 02 / 06 / 10) ---------- */
.politique-icon-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 16px;
}
.politique-icon-grid-6{ grid-template-columns: repeat(3, 1fr); }
.politique-icon-grid-4{ grid-template-columns: repeat(2, 1fr); }

.politique-icon-item{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.politique-icon{
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
}
.politique-icon svg{ width: 15px; height: 15px; }
/* Bulle "EKILIBRUM" (section 06) : même bulle .politique-icon inchangée,
   logo du site à la place d'une icône générique, redimensionné pour
   tenir proprement dans le cercle. */
.politique-icon-logo-img{
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transform: translate(1px, 1px);
}
.politique-icon-label{
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.politique-check-text{ display: block; min-width: 0; }
.politique-content .legal-grid{ grid-template-columns: 1fr; gap: 10px; }
.politique-icon-desc{
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
}

/* ---------- FINALITÉS — deux listes à coches (section 03) ---------- */
.politique-check-columns{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
}
.politique-check-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.politique-check-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}
.politique-check-icon{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--cyan);
  margin-top: 2px;
}
.politique-check-icon svg{ width: 100%; height: 100%; }

/* ---------- TABLEAUX (sections 04 / 07) ---------- */
.politique-table-wrap{
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}
.politique-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.politique-table th{
  text-align: left;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.72rem;
  color: var(--cyan);
  padding: 12px 16px;
  background: rgba(46,230,224,0.04);
  border-bottom: 1px solid var(--panel-border);
  white-space: nowrap;
}
.politique-table td{
  padding: 12px 16px;
  color: var(--muted);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--panel-border);
}
.politique-table tr:last-child td{ border-bottom: none; }

/* ---------- DROITS DES UTILISATEURS — blocs (section 08) ---------- */
.politique-rights-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.politique-right-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 18px 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.politique-right-item:hover{
  border-color: var(--cyan-soft);
  box-shadow: 0 0 14px rgba(46,230,224,0.15);
}
.politique-right-icon{
  width: 26px;
  height: 26px;
  color: var(--cyan);
}
.politique-right-icon svg{ width: 100%; height: 100%; }
.politique-right-label{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--white);
  line-height: 1.3;
}

/* ---------- E-MAIL MIS EN ÉVIDENCE (section 09) ---------- */
.politique-email-box{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--cyan);
  border-radius: 10px;
  background: rgba(46,230,224,0.06);
  padding: 14px 16px;
  box-shadow: 0 0 16px rgba(46,230,224,0.15);
}
.politique-email-label{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: var(--cyan);
  font-size: 0.85rem;
  white-space: nowrap;
}
.politique-email-value{
  flex: 1;
  color: var(--muted-2);
  font-style: italic;
  font-size: 0.85rem;
}
.politique-email-icon{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--cyan);
}
.politique-email-icon svg{ width: 100%; height: 100%; }

/* ---------- COOKIES — grille au-dessus, bouton en bas à gauche (section 10) ---------- */
.politique-cookies-row{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.politique-cookies-row .politique-icon-grid{ width: 100%; }

.politique-cookies-btn{
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.78rem;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--cyan-soft);
  border-radius: 8px;
  padding: 12px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.politique-cookies-btn svg{ width: 15px; height: 15px; transition: transform .25s ease; }
.politique-cookies-btn:hover{
  background: rgba(46,230,224,0.08);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(46,230,224,0.3);
}
.politique-cookies-btn:hover svg{ transform: translateX(3px); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .politique-content{ grid-template-columns: 1fr; max-width: 640px; }
  .politique-icon-grid{ grid-template-columns: repeat(2, 1fr); }
  .politique-icon-grid-4{ grid-template-columns: 1fr 1fr; }
  .politique-check-columns{ grid-template-columns: 1fr; gap: 14px; }
  .politique-rights-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px){
  .politique-icon-grid,
  .politique-icon-grid-6,
  .politique-icon-grid-4{ grid-template-columns: 1fr; }
  .politique-rights-grid{ grid-template-columns: 1fr 1fr; }
  .politique-email-box{ flex-wrap: wrap; }
  .politique-table{ min-width: 420px; }

  /* Sur mobile, mentions-legales.css passe .legal-card-header en
     flex-wrap:wrap, ce qui fait basculer le titre entier (h2) sur une
     nouvelle ligne sous le numéro dès que les deux ne tiennent pas
     côte à côte. On corrige ce comportement uniquement pour les cards
     de cette page (sélecteur scopé à .politique-content) : le numéro
     reste fixe à gauche et c'est le texte du titre qui s'enroule sur
     plusieurs lignes si besoin, en restant sur la même ligne que le
     numéro. mentions-legales.html et cgv.html ne sont pas concernés. */
  .politique-content .legal-card-header{
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  .politique-content .legal-card-header .legal-card-title{
    flex: 1;
    min-width: 0;
  }
}