/* ======================================================
   Iliade Digital — Politique de confidentialité (RGPD)
   File: assets/css/page-politique-de-confidentialite.css
   Depends: variables.css + styles.css (globals)
   Notes:
   - Pas de CSS inline
   - Utilise tokens : --brand-green, --line, --muted, --shadow-*
   ====================================================== */

/* ======================================================
   WRAPPER (réutilise la base il-ml si tu gardes la même structure HTML)
   ====================================================== */

.il-ml{
  background: var(--bg, #fff);
}

/* ======================================================
   HERO (privacy variant)
   ====================================================== */

.il-ml-hero{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line, #E6E8EE);
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(23,160,81,.14), transparent 62%),
    radial-gradient(900px 420px at 84% 30%, rgba(47,128,237,.10), transparent 60%),
    linear-gradient(var(--white, #fff), var(--white, #fff));
}

.il-ml-hero::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  z-index: 0;
  background: linear-gradient(135deg, rgba(23,160,81,.10), rgba(16,19,35,0) 55%);
}

.il-ml-hero .il-container{
  position: relative;
  z-index: 1;
  padding-block: clamp(34px, 5vw, 74px);
}

.il-ml-title{
  margin: 8px 0 10px;
  letter-spacing: -0.02em;
}

.il-ml-sub{
  max-width: 78ch;
  color: var(--muted, #666672);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
}

/* petit badge privacy (si présent dans le template via .il-ml-badge / .il-ml-chip) */
.il-ml-badge{
  display:inline-flex;
  align-items:center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  font-family: var(--font-head, inherit);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--brand-green, #17A051);
  background: rgba(23,160,81,.10);
  border: 1px solid rgba(23,160,81,.18);
}

.il-ml-chip{
  display:inline-flex;
  align-items:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-weight: 800;
  font-family: var(--font-head, inherit);
  font-size: 12px;
  color: var(--text, #101323);
  background: rgba(16,19,35,.04);
  border: 1px solid rgba(16,19,35,.10);
}

/* ======================================================
   BODY
   ====================================================== */

.il-ml-body{
  padding-block: clamp(28px, 5vw, 74px);
}

.il-ml-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.4vw, 22px);
}

@media (min-width: 980px){
  .il-ml-grid{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* wide card */
.il-ml-card--wide{
  grid-column: 1 / -1;
}

/* ======================================================
   CARD
   ====================================================== */

.il-ml-card{
  position: relative;
  border-radius: var(--r-18, 18px);
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
  overflow: hidden;
}

.il-ml-card::before{
  content:"";
  position:absolute;
  inset: -40% -20%;
  pointer-events:none;
  opacity: .0;
  transform: translateY(10px);
  background: radial-gradient(closest-side, rgba(23,160,81,.14), transparent 70%);
  transition:
    opacity var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1)),
    transform var(--t-med, .25s) var(--ease, cubic-bezier(.2,.8,.2,1));
}

@media (hover:hover){
  .il-ml-card:hover::before{
    opacity: 1;
    transform: translateY(0);
  }
}

.il-ml-cardTop{
  display:flex;
  align-items:flex-start;
  gap: 14px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(16,19,35,.06);
  background: rgba(16,19,35,.02);
}

.il-ml-head h2{
  margin: 0 0 6px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(16px, 1.3vw, 18px);
}

.il-ml-head .il-muted{
  margin: 0;
  color: var(--muted, #666672);
}

/* ======================================================
   LISTES / TEXTES
   ====================================================== */

.il-ml-list{
  list-style:none;
  margin: 0;
  padding: 14px 18px 18px;
  display:grid;
  gap: 10px;
}

.il-ml-list--cols{
  grid-template-columns: 1fr;
}

@media (min-width: 720px){
  .il-ml-list--cols{
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
  }
}

.il-ml-list li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: var(--text, #101323);
}

.il-ml-ico{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;

  background: rgba(23,160,81,.10);
  border: 1px solid rgba(23,160,81,.16);
  color: var(--brand-green, #17A051);
  font-weight: 900;
}

.il-ml-link{
  color: var(--brand-green, #17A051);
  text-decoration: none;
  font-weight: 700;
}

.il-ml-link:hover{
  text-decoration: underline;
}

/* Bullets clean */
.il-ml-bullets{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted, #666672);
  line-height: 1.7;
}

.il-ml-bullets li{
  margin: 6px 0;
}

.il-ml-legalText{
  padding: 14px 18px 18px;
}

.il-ml-legalText h3{
  margin: 14px 0 8px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 15px;
}

.il-ml-legalText p{
  margin: 0 0 10px;
  color: var(--muted, #666672);
  line-height: 1.75;
}

.il-ml-note{
  margin: 0 18px 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(23,160,81,.08);
  border: 1px solid rgba(23,160,81,.18);
  color: var(--text, #101323);
}

.il-ml-pre{
  margin-top: 8px;
  color: var(--muted, #666672);
  line-height: 1.6;
}

/* Divider */
.il-ml-divider{
  height: 1px;
  background: rgba(16,19,35,.10);
  margin: 2px 18px 0;
}

/* ======================================================
   CTA bottom
   ====================================================== */

.il-ml-bottomCta{
  margin-top: clamp(18px, 3vw, 28px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  padding: clamp(16px, 3vw, 22px);
  border-radius: var(--r-20, 20px);
  border: 1px solid var(--line, #E6E8EE);
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm, 0 10px 24px rgba(16,19,35,.08));
}

.il-ml-bottomCta__txt{
  max-width: 70ch;
}

.il-ml-bottomCta__txt h2{
  margin: 0 0 6px;
  font-family: var(--font-head, inherit);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(18px, 1.5vw, 20px);
}

.il-ml-bottomCta__btns{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
}

/* ======================================================
   Mobile tweaks
   ====================================================== */

@media (max-width: 520px){
  .il-ml-cardTop{
    padding: 16px 14px 10px;
  }
  .il-ml-list,
  .il-ml-legalText{
    padding-inline: 14px;
  }
  .il-ml-note{
    margin-inline: 14px;
  }
  .il-ml-divider{
    margin-inline: 14px;
  }
}


/* ======================================================
   FIX MOBILE — Politique de confidentialité
   Objectif: éviter le décalage du titre à cause du chip/badge
   ====================================================== */

@media (max-width: 640px){

  /* Cards: padding plus “dense” */
  .il-ml-card{
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Le top de card passe en colonne (le chip ne pousse plus le contenu) */
  .il-ml-cardTop{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Le bloc chip/badge ne doit pas avoir une largeur fixe */
  .il-ml-logoWrap{
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Chips/badges: taille plus compacte */
  .il-ml-chip,
  .il-ml-badge{
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1;
  }

  /* Titre + sous-texte: tailles adaptées */
  .il-ml-head h2{
    font-size: 18px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }

  .il-ml-head .il-muted{
    font-size: 14px !important;
    margin: 4px 0 0 !important;
  }

  /* Listes: indentation et lisibilité */
  .il-ml-bullets{
    padding-left: 18px !important;
    margin: 10px 0 0 !important;
  }

  .il-ml-bullets li{
    margin: 10px 0 !important;
    line-height: 1.55 !important;
  }

  /* Listes “cols” : forcer 1 colonne sur mobile */
  .il-ml-list--cols{
    grid-template-columns: 1fr !important;
  }
}