.elementor-512 .elementor-element.elementor-element-48a4bf2{--display:flex;}/* Start custom CSS for html, class: .elementor-element-5a01a2e *//* ====== Politique de cookies — Styles personnalisés (scopés) ====== */

.cookies-page{
  /* Thème */
  --ml-primary:#014593;    /* bleu foncé */
  --ml-accent:#70C8F2;     /* bleu clair */
  --ml-ink:#0c1b2a;        /* texte principal */
  --ml-ink-2:#2a3b50;      /* texte secondaire */
  --ml-bg:#ffffff;
  --ml-soft:rgba(112,200,242,.18);

  max-width:1100px;
  margin:24px auto;
  padding:0 16px 28px;
  font-family:Marcellus,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  color:var(--ml-ink);
  background:transparent;

  /* Anti scroll horizontal global */
  overflow-x:hidden;
  box-sizing:border-box;
}

/* ===== Hero ===== */
.cookies-page .ml-hero{
  background:linear-gradient(0deg,var(--ml-primary),var(--ml-primary));
  color:#fff;
  padding:24px 20px;
  border-radius:16px;
  position:relative;
  box-shadow:0 10px 30px rgba(1,69,147,.18);
  overflow:hidden;
}
.cookies-page .ml-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0;
  height:6px; background:var(--ml-accent);
}
.cookies-page .ml-hero__title{
  margin:0;
  font-size:clamp(1.4rem,2vw + 1rem,2rem);
  font-weight:800;
  letter-spacing:.2px;
}
.cookies-page .ml-hero__meta{
  margin:.5rem 0 0;
  font-size:.95rem;
  opacity:.95;
  color:#fff;
}

/* ===== Layout (grille) ===== */
.cookies-page .ml-grid{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:18px;
  margin-top:18px;
  width:100%;
}

/* ===== Sommaire ===== */
.cookies-page .ml-aside{
  background:#fff;
  border:1.5px solid var(--ml-primary);
  border-radius:14px;
  padding:12px;
  align-self:start;
}
.cookies-page .ml-aside h2{
  margin:4px 0 10px;
  font-size:1rem;
  color:var(--ml-primary);
}
.cookies-page .ml-toc{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}
.cookies-page .ml-toc a{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  color:var(--ml-ink-2);
  border:1px solid rgba(1,69,147,.15);
  background:linear-gradient(180deg,#fff,#f9fcff);
  transition:border-color .2s, box-shadow .2s, color .2s;
}
.cookies-page .ml-toc a:hover{
  border-color:var(--ml-primary);
  box-shadow:0 0 0 3px var(--ml-soft) inset;
  color:var(--ml-primary);
}

/* ===== Cartes (articles) ===== */
.cookies-page .ml-card{
  background:var(--ml-bg);
  border:1.5px solid var(--ml-primary);
  border-radius:14px;
  margin-top:18px;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(1,69,147,.04);
}
.cookies-page .ml-card__title{
  margin:0;
  padding:14px 16px;
  font-size:1.05rem;
  font-weight:750;
  color:var(--ml-primary);
  background:linear-gradient(180deg,#fff,#f9fcff);
  border-bottom:1px solid rgba(1,69,147,.15);
  position:relative;
}
.cookies-page .ml-card__title::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:3px;
  background:linear-gradient(90deg,var(--ml-accent),transparent 60%);
}
.cookies-page .ml-card__content{
  padding:14px 16px 18px;
  line-height:1.6;
}

/* Premier article aligné en haut avec le Sommaire */
.cookies-page .ml-grid > div > .ml-card:first-child{ margin-top:0; }

/* ===== Texte & liens ===== */
.cookies-page p{ margin:0 0 10px; color:var(--ml-ink-2); }
.cookies-page a{ color:var(--ml-primary); text-decoration:underline; }
.cookies-page a:hover{ text-decoration:none; background:linear-gradient(180deg,transparent 60%,var(--ml-soft) 0); }

/* Sauts de mot/URL pour éviter les débordements */
.cookies-page, .cookies-page p, .cookies-page li, .cookies-page a, .cookies-page td, .cookies-page th{
  word-wrap:break-word;
  overflow-wrap:anywhere;
}

/* ===== Tables ===== */
.cookies-page table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:8px 0 12px;
}
.cookies-page th, .cookies-page td{
  padding:10px 12px;
  border:1px solid rgba(1,69,147,.18);
  text-align:left;
}
.cookies-page th{
  background:#f4faff;
  color:#0c2947;
}
.cookies-page tr:nth-child(even) td{ background:#fafcff; }

/* ===== Accordéons (si utilisés) ===== */
.cookies-page details{
  border:1px solid rgba(1,69,147,.25);
  border-radius:12px;
  padding:12px;
  margin:10px 0;
  background:#fff;
}
.cookies-page summary{ cursor:pointer; font-weight:700; color:var(--ml-primary); }
.cookies-page details[open]{ box-shadow:0 0 0 3px var(--ml-soft); }

/* ===== Badge ===== */
.cookies-page .ml-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:var(--ml-accent);
  color:#00324f;
  font-weight:700;
  font-size:.75rem;
}

/* ===== Ancre visible sous header fixe (si présent) ===== */
#intro,#definition,#types,#liste,#cinq,#gestion,#droits,#consentement,#huit,#neuf,#contact{
  scroll-margin-top:80px; /* adapte à la hauteur de ton header si sticky */
}

/* ===== Responsive ===== */

/* ≤ 920px : 1 colonne, sommaire au-dessus */
@media (max-width:920px){
  .cookies-page .ml-grid{
    grid-template-columns:1fr !important;
    gap:14px;
  }
  .cookies-page .ml-aside{ margin-bottom:10px; }
}

/* ≤ 640px : confort mobile & anti débordements */
@media (max-width:640px){
  .cookies-page{ padding:0 12px 22px; }

  /* Hero compact */
  .cookies-page .ml-hero{
    padding:18px 14px;
    border-radius:14px;
    margin-bottom:14px;
  }
  .cookies-page .ml-hero__title{
    font-size:clamp(1.15rem,3.5vw + .8rem,1.6rem);
  }
  .cookies-page .ml-hero__meta{ font-size:.9rem; }

  /* Sommaire en "pills" horizontales scrollables */
  .cookies-page .ml-aside{
    padding:10px;
    border-radius:12px;
  }
  .cookies-page .ml-aside h2{
    font-size:.95rem; margin-bottom:8px;
  }
  .cookies-page .ml-toc{
    display:flex; gap:8px;
    overflow-x:auto; padding-bottom:6px;
    -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  }
  .cookies-page .ml-toc a{
    white-space:nowrap; flex:0 0 auto;
    padding:10px 12px; font-size:.95rem;
    border-radius:999px;  /* pill */
  }

  /* Cartes plus compactes */
  .cookies-page .ml-card{
    border-radius:12px; margin-top:14px;
    box-shadow:0 1px 6px rgba(1,69,147,.07);
  }
  .cookies-page .ml-card__title{ padding:12px 14px; font-size:1rem; }
  .cookies-page .ml-card__content{ padding:12px 14px 14px; }

  /* Tables : scroll local sans casser la page */
  .cookies-page table{
    display:block;
    overflow-x:auto; white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .cookies-page th, .cookies-page td{ min-width:140px; }
}

/* ≤ 420px : très petits écrans */
@media (max-width:420px){
  .cookies-page .ml-hero{ padding:14px 12px; border-radius:10px; }
  .cookies-page .ml-hero__title{ font-size:clamp(1.05rem,4.2vw + .7rem,1.4rem); }
  .cookies-page .ml-toc a{ padding:9px 10px; font-size:.92rem; }
  .cookies-page .ml-card__title{ padding:10px 12px; font-size:.98rem; }
  .cookies-page .ml-card__content{ padding:10px 12px 12px; }
}

/* ===== Impression ===== */
@media print{
  .cookies-page{ box-shadow:none; margin:0; padding:0; }
  .cookies-page .ml-hero{ box-shadow:none; }
  .cookies-page a{ color:#000; text-decoration:none; }
}

/* ===== Médias embarqués ===== */
.cookies-page img,
.cookies-page video,
.cookies-page iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* 1) Box-sizing universel dans le scope pour éviter les débordements */
.cookies-page, 
.cookies-page *, 
.cookies-page *::before, 
.cookies-page *::after{
  box-sizing:border-box;
}

/* 2) Permettre au contenu de la grille de rétrécir (sinon ça déborde) */
.cookies-page .ml-grid > *{
  min-width:0;          /* clé pour casser le scroll horizontal avec grid */
}

/* 3) Éviter que le contenu interne des cartes force la largeur */
.cookies-page .ml-card__content,
.cookies-page .ml-card{
  min-width:0;
}

/* 4) Iframes/embeds vraiment fluides (max-width ne suffit pas toujours) */
.cookies-page iframe,
.cookies-page video,
.cookies-page img{
  width:100%;
  max-width:100%;
  height:auto;
  display:block;
}

/* 5) Tables : si tu veux zéro scroll horizontal global, enferme-les 
      dans un wrapper localement scrollable (au lieu de faire scroller la page) */
.cookies-page .table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cookies-page .table-wrap > table{
  width:100%;
  margin:0;             /* évite un léger dépassement sur petits écrans */
}

/* 6) (Optionnel) Si tu préfères que le sommaire en "pills" ne crée pas de scroll horizontal,
      laisse-les revenir à la ligne plutôt que de scroller. */
@media (max-width:640px){
  .cookies-page .ml-toc{
    display:flex;
    flex-wrap:wrap;     /* au lieu de overflow-x:auto */
    overflow-x:visible; /* désactive le scroll horizontal local */
    gap:8px;
  }
  .cookies-page .ml-toc a{
    white-space:normal; /* autorise le retour à la ligne */
  }
}/* End custom CSS */