/*
 * Page « Politique de confidentialité » — styles.
 *
 * Bloc extrait verbatim de la maquette (Politique de confidentialité-MdM.html),
 * chargé UNIQUEMENT sur le gabarit template-privacy.php (voir inc/enqueue.php)
 * afin de n'impacter aucune autre page. Le reset box-sizing d'origine (« * ») et
 * le reset typographique sont ici scopés à « .legal-page » pour ne pas altérer
 * l'en-tête / le pied de page globaux du thème. La police « Anton » est déjà
 * fournie par style.css (@font-face global) → non redéclarée ici.
 *
 * @package medecins-du-monde
 */

html{scroll-behavior:smooth}

/* Reset box-sizing + typographie, scopés au contenu de la page (au lieu du « * » global). */
.legal-page,.legal-page *,.legal-page *::before,.legal-page *::after{box-sizing:border-box}
.legal-page{--lg-gutter:26px;margin:0;font-family:'Open Sans',sans-serif;color:#1d1a55;background:#fff;line-height:1.4;-webkit-font-smoothing:antialiased}
.legal-page h1,.legal-page h2,.legal-page h3,.legal-page h4{margin:0;font-weight:400;font-size:16px}
.legal-page p{margin:0}
.legal-page a{text-decoration:none;color:inherit}
.legal-page ul{margin:0;padding:0;list-style:none}
.legal-page button,.legal-page input{font-family:inherit}

/* ===== HEADER ===== */
.legal-header{background:#1d1a55;color:#fff;padding:70px var(--lg-gutter) 62px;position:relative;overflow:hidden}
.legal-header-inner{position:relative;z-index:1}
.legal-deco{position:absolute;top:-120px;right:-70px;width:360px;height:360px;border-radius:64px;background:rgba(189,223,236,.14);transform:rotate(16deg);z-index:0;pointer-events:none}
.legal-title{position:relative}
.legal-title:has(> .legal-tag){margin-top:67px}
.legal-tag{position:absolute;left:0;top:-51px;z-index:2;padding:8px 16px;font-family:'Anton',sans-serif;text-transform:uppercase;background:#e9511c;border-radius:5px;color:#fff;font-size:28px;line-height:normal;white-space:nowrap;transform:rotate(-4.14deg)}
.legal-header h1{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(40px,6vw,80px);line-height:.96;letter-spacing:-.01em}
.legal-meta{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-family:'Anton',sans-serif;text-transform:uppercase;font-size:14px;letter-spacing:.06em;color:#bddfec}
.legal-meta::before{content:'';width:26px;height:2px;background:#e9511c}

/* ===== LAYOUT ===== */
.legal-body{padding:64px var(--lg-gutter) 90px}

/* ===== ARTICLE ===== */
.legal-article{max-width:none;margin:0}
.legal-section{scroll-margin-top:90px;padding-top:38px;margin-top:38px}
.legal-section:first-child{padding-top:0;margin-top:0}
.legal-section h2{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(24px,2.6vw,32px);line-height:1.05;color:#055da8;margin-bottom:20px}
.legal-article p{font-size:16px;line-height:1.85;color:#3a3a52;margin-bottom:16px}
.legal-article p:last-child{margin-bottom:0}
.legal-article strong{color:#1d1a55;font-weight:700}
/* « display:inline » : style.css pose « a{display:block} » pour les liens de mise en page du
   site ; sans cette remise à plat, un lien écrit dans l'éditeur casse la phrase en trois. */
.legal-article a[href]{display:inline;color:#055da8;font-weight:600;text-decoration:none;transition:color .2s ease}
.legal-article a[href]:hover{color:#e9511c}
/* Listes : « .legal-list » est la classe du contenu de la maquette, mais une liste créée avec
   le bouton « puces » de l'éditeur n'a AUCUNE classe — et « ul,ol{list-style:none} »
   (style.css) la laisserait sans puce ni retrait. Les deux cas partagent donc le tiret orange. */
.legal-list,.legal-article ul{margin:18px 0 !important;display:flex;flex-direction:column;gap:10px;padding-left:0;list-style:none}
.legal-list li,.legal-article ul li{position:relative;padding-left:26px;font-size:16px;line-height:1.7;color:#3a3a52;list-style:none}
.legal-list li::before,.legal-article ul li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:2px;background:#e9511c}
/* Liste numérotée de l'éditeur : le numéro est recomposé (le reset supprime le marqueur natif). */
.legal-article ol{margin:18px 0;display:flex;flex-direction:column;gap:10px;padding-left:0;list-style:none;counter-reset:mdm-legal-ol}
.legal-article ol li{position:relative;padding-left:26px;font-size:16px;line-height:1.7;color:#3a3a52;list-style:none;counter-increment:mdm-legal-ol}
.legal-article ol li::before{content:counter(mdm-legal-ol);position:absolute;left:0;top:0;font-family:'Anton',sans-serif;font-size:14px;color:#055da8}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal,.reveal.in{opacity:1;transform:none;transition:none}}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
}
@media (max-width:760px){
  .legal-header{padding:52px var(--lg-gutter) 46px}
  .legal-body{padding:44px var(--lg-gutter) 72px}
}

/* ------------------------------------------------------------------ *
 * Le thème rend le <header> du site en position:fixed (overlay). Sur
 * ce gabarit — comme sur la 404 / le Contact — on le remet dans le flux
 * (sticky) pour qu'il reste visible et que le bandeau s'affiche SOUS lui.
 * Le hero est désormais un <div class="legal-header"> (et non un
 * <header>), donc cette règle ne vise que le header du site.
 * ------------------------------------------------------------------ */
body.page-template-template-privacy header{position:sticky}

@media (min-width: 1700px) {
  .legal-page h1,
  .legal-page h2,
  .legal-page h3,
  .legal-page h4 {
    font-size: 1.1112vw;
  }
  .legal-header {
    padding: 4.8614vw var(--lg-gutter) 4.3058vw;
  }
  .legal-deco {
    top: -8.3338vw;
    right: -4.8614vw;
    width: 25.0015vw;
    height: 25.0015vw;
    border-radius: 4.4447vw;
  }
  .legal-title:has(> .legal-tag) {
    margin-top: 4.6669vw;
  }
  .legal-tag {
    padding: 0.5556vw 1.1112vw;
    border-radius: 0.3472vw;
    font-size: 1.9446vw;
    top: -3.5419vw;
  }
  .legal-header h1 {
    font-size: clamp(2.7779vw,6vw,5.5559vw);
  }
  .legal-meta {
    margin-top: 1.389vw;
    gap: 0.6945vw;
    font-size: 0.9723vw;
  }
  .legal-meta::before {
    width: 1.8057vw;
    height: 0.1389vw;
  }
  .legal-body {
    padding: 4.4447vw var(--lg-gutter) 6.2504vw;
  }
  .legal-section {
    scroll-margin-top: 6.2504vw;
    padding-top: 2.639vw;
    margin-top: 2.639vw;
  }
  .legal-section h2 {
    font-size: clamp(1.6668vw,2.6vw,2.2224vw);
    margin-bottom: 1.389vw;
  }
  .legal-article p {
    font-size: 1.1112vw;
    margin-bottom: 1.1112vw;
  }
  .legal-list {
    margin: 1.2501vw 0 !important;
    gap: 0.6945vw;
  }
  .legal-list li {
    padding-left: 1.8057vw;
    font-size: 1.1112vw;
  }
  .legal-list li::before {
    top: 0.7639vw;
    width: 0.8334vw;
    height: 0.1389vw;
  }
  .reveal {
    transform: translateY(1.5279vw);
  }
}

@media (max-width: 1279px) {
  .legal-page {
    --lg-gutter: 10px;
  }
  .legal-tag {
    font-size: 18px;
    line-height: 27px;
    top: -37px;
  }
}

@media (max-width: 767px) {
  .legal-tag {
    font-size: 14px;
    line-height: 21px;
    top: -32px;
  }
}

@media (min-width: 1700px) {
  .legal-page {
    --lg-gutter: 1.8057vw;
  }
}