/* ==========================================================================
   COOKIES & TRACEURS — styles spécifiques à la page, complètent
   css/style.css et css/mentions-legales.css (réutilisé tel quel pour le
   hero .legal-hero* et .legal-num, ainsi que 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 et pédagogique (document juridique) : pas
   d'animation pulseGlow, pas de CTA marketing.
   ========================================================================== */

.cookies-content{
  max-width: 1180px;
  margin: 0 auto 6vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- CARD GÉNÉRIQUE (ligne) ---------- */
.cookies-item{
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  background: var(--card-bg);
  padding: 24px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px 28px;
  min-width: 0;
}

/* Bloc gauche : numéro + icône + titre/description */
.cookies-item-main{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 260px;
  min-width: 220px;
}
.cookies-item-main-wide{ flex-basis: 100%; }

.cookies-icon{
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  margin-top: 2px;
}
.cookies-icon svg{ width: 22px; height: 22px; }

.cookies-item-text{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cookies-item-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  color: var(--white);
}
.cookies-item-desc{
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 62ch;
}
/* .cookies-item-text est en colonne flex : par défaut ses enfants sont
   étirés sur toute la largeur (align-items:stretch). On désactive ce
   comportement pour le bouton et l'encadré ajoutés sous le texte, afin
   qu'ils gardent leur taille naturelle, alignés avec le début du texte
   (même colonne que le titre/paragraphe), sans s'étirer dans la card. */
.cookies-manage-btn-inline{
  align-self: flex-start;
  margin-top: 4px;
}
/* La mini card "Durée de conservation" (section 08) est placée dans
   sa propre ligne pleine largeur, sous le bloc num+icône+texte, pour
   pouvoir être réellement centrée sur toute la largeur de la grosse
   card (et non dans .cookies-item-text, qui ne fait que la largeur du
   texte car décalée par le numéro et l'icône). */
.cookies-infobox-row{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Bloc droit : tableau / bouton / encadré */
.cookies-item-aside{
  flex: 2 1 420px;
  min-width: 280px;
}
/* Modificateur : centre verticalement les deux blocs de la ligne
   (utilisé sur la card "Services tiers", où le tableau est plus court
   que le texte). Le tableau reste naturellement à droite car c'est le
   second élément de la ligne flex. */
.cookies-item-vcenter{
  align-items: center;
}

/* ---------- SECTION 02 — CATÉGORIES ---------- */
.cookies-categories-block{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cookies-categories-header{
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.cookies-category-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.cookies-category-card{
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 18px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cookies-category-card:hover{
  border-color: var(--cyan-soft);
  box-shadow: 0 0 14px rgba(46,230,224,0.15);
}
.cookies-category-card .cookies-icon{ width: 40px; height: 40px; border-radius: 10px; }
.cookies-category-card .cookies-icon svg{ width: 18px; height: 18px; }
.cookies-category-title{
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  color: var(--cyan);
}
.cookies-category-desc{
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Note info sous les catégories */
.cookies-note{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.cookies-note-icon{
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--cyan);
  margin-top: 2px;
}
.cookies-note-icon svg{ width: 100%; height: 100%; }
.cookies-note-text{
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}
/* Empêche la note de s'étirer sur toute la largeur de la card (elle
   est enfant de .cookies-categories-block, un flex-column qui étire
   ses enfants par défaut) : elle garde sa taille naturelle et se
   centre horizontalement. */
.cookies-note-centered{
  align-self: center;
  width: fit-content;
  max-width: 640px;
}

/* ---------- BOUTON "GÉRER MES COOKIES" (visuel uniquement pour le
   moment — la CMP réelle sera intégrée plus tard) ---------- */
.cookies-manage-btn{
  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;
}
.cookies-manage-btn svg{ width: 15px; height: 15px; transition: transform .25s ease; }
.cookies-manage-btn:hover{
  background: rgba(46,230,224,0.08);
  border-color: var(--cyan);
  box-shadow: 0 0 16px rgba(46,230,224,0.3);
}
.cookies-manage-btn:hover svg{ transform: translateX(3px); }

/* ---------- ENCADRÉ INFO (section 08) ---------- */
.cookies-infobox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--cyan-soft);
  border-radius: 10px;
  background: rgba(46,230,224,0.05);
  padding: 14px 16px;
}
.cookies-infobox-inline{
  max-width: 640px;
}
.cookies-infobox .cookies-note-icon{ color: var(--cyan); }
.cookies-infobox .cookies-note-text{ color: var(--muted); font-size: 0.83rem; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .cookies-item{ padding: 20px 20px; }
  .cookies-item-aside{ flex-basis: 100%; }
  .cookies-category-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .cookies-item{ padding: 18px 18px; gap: 16px; }
  .cookies-item-main{ flex-basis: 100%; min-width: 0; }
  .cookies-icon{ width: 40px; height: 40px; border-radius: 10px; }
  .cookies-icon svg{ width: 19px; height: 19px; }
  .cookies-item-title{ font-size: 0.92rem; }
  .cookies-item-desc{ font-size: 0.82rem; }
  .cookies-category-grid{ grid-template-columns: 1fr; }
  .cookies-manage-btn{ width: 100%; justify-content: center; }
  .cookies-manage-btn-inline{ align-self: stretch; width: auto; }
  .cookies-infobox-inline{ max-width: none; width: 100%; }
}