/* politique-confidentialite.css — ChoKInfO */

    /* ══════════════════════════════════════════════
       TOKENS — charte ChoKInfO
       ══════════════════════════════════════════════ */
    :root {
      --p-base:     #2e22ee;
      --p-dark:     #1e11e3;
      --p-light:    #e9e8fd;
      --p-hover:    #bebbf9;
      --bg-body:    #ffffff;
      --bg-dark:    #333333;
      --bg-grey80:  #4d4d4d;
      --bg-grey5:   #f2f2f2;
      --text-body:  #333333;
      --text-white: #ffffff;
      --text-muted: #666666;
      --accent:     #00bcd4;
      --font-head:  'Oswald', sans-serif;
      --font-body:  'Roboto', 'Open Sans', sans-serif;
      --radius:     8px;
      --trans:      0.28s cubic-bezier(.4,0,.2,1);
    }

    /* ══ RESET ═══════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { font-size: 16px; scroll-behavior: smooth; }
    body { font-family: var(--font-body); background: var(--bg-body); color: var(--text-body); overflow-x: hidden; }
    a { color: var(--p-base); text-decoration: none; }
    img { max-width: 100%; display: block; }
    ul { list-style: none; }

    /* ══ NAVBAR ══════════════════════════════════════ */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 64px;
      display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      border-bottom: 2.5px solid var(--p-base); transition: box-shadow var(--trans);
    }
    .navbar.scrolled { box-shadow: 0 2px 20px rgba(46,34,238,0.13); }
    .navbar-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
    .navbar-logo img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--p-base); }
    .navbar-logo span { font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--p-base); letter-spacing: .06em; }

    .portail-wrap { display: flex; align-items: center; gap: 10px; flex: 1; margin: 0 16px; overflow: hidden; min-width: 0; }
    #portail-text {
      font-family: var(--font-head); font-size: .8rem; font-weight: 500;
      color: var(--p-base); letter-spacing: .2em; text-transform: uppercase;
      opacity: 0; transform: translateY(5px);
      transition: opacity .5s ease, transform .5s ease;
      white-space: nowrap; flex-shrink: 0;
    }
    #portail-text.visible { opacity: 1; transform: translateY(0); }
    #portail-line { height: 2px; background: linear-gradient(90deg, var(--p-base), rgba(46,34,238,0)); width: 0; flex: 1; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
    #portail-line.visible { width: 100%; }

    .hamburger {
      background: var(--p-base); border: none; border-radius: 7px; padding: 9px 11px; cursor: pointer;
      display: flex; flex-direction: column; gap: 5px; transition: background var(--trans); flex-shrink: 0; position: relative; z-index: 201;
    }
    .hamburger:hover { background: var(--p-dark); }
    .hamburger .bar { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--trans), opacity var(--trans); }
    .hamburger.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open .bar:nth-child(2) { opacity: 0; }
    .hamburger.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ══ SIDEBAR ═════════════════════════════════════ */
    .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 198; opacity: 0; pointer-events: none; transition: opacity var(--trans); }
    .sidebar-overlay.active { opacity: 1; pointer-events: auto; }
    .sidebar {
      position: fixed; top: 0; left: 0; width: 260px; height: 100%; background: var(--bg-dark); z-index: 199;
      display: flex; flex-direction: column; padding: 76px 0 32px;
      transform: translateX(-100%); transition: transform .35s cubic-bezier(.4,0,.2,1); box-shadow: 2px 0 18px rgba(0,0,0,0.3);
    }
    .sidebar.active { transform: translateX(0); }
    .sidebar nav { display: flex; flex-direction: column; }
    .sidebar nav a { display: block; padding: 14px 24px; color: #fff; font-size: 1.05rem; font-weight: 400; transition: background var(--trans), padding-left var(--trans); }
    .sidebar nav a:hover { background: #00bcd4; border-radius: 0 8px 8px 0; padding-left: 32px; }
    .sidebar-footer { margin-top: auto; padding: 18px 24px 0; border-top: 1px solid rgba(255,255,255,0.15); font-size: .78rem; color: rgba(255,255,255,.45); }
    .sidebar-notez {
      display: block; margin: 0 0 6px; padding: 14px 24px; background: var(--p-base); color: #fff;
      font-family: var(--font-head); font-size: 1.05rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
      border: none; cursor: pointer; text-align: left; transition: background var(--trans), padding-left var(--trans); border-radius: 0 8px 8px 0;
    }
    .sidebar-notez:hover { background: var(--p-dark); padding-left: 32px; color: #fff; }

    /* ══ HERO ════════════════════════════════════════ */
    .hero {
      padding: 120px 24px 64px; text-align: center;
      background: linear-gradient(160deg, var(--p-light) 0%, #fff 60%);
      border-bottom: 3px solid var(--p-light);
    }
    .hero h1 {
      font-family: var(--font-head); font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700;
      color: var(--p-base); letter-spacing: .02em; line-height: 1.1; margin-bottom: 14px;
      animation: fadeUp .7s .1s both;
    }
    .hero-sub {
      font-family: var(--font-head); font-weight: 300; font-size: 1.15rem;
      color: var(--text-muted); letter-spacing: .14em; text-transform: uppercase;
      animation: fadeUp .7s .25s both;
    }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

    /* ══ SOMMAIRE ════════════════════════════════════ */
    .sommaire {
      max-width: 860px; margin: -34px auto 0; position: relative; z-index: 6;
      background: #fff; border: 1.5px solid var(--p-light); border-radius: var(--radius);
      box-shadow: 0 8px 30px rgba(46,34,238,.08); padding: 24px 30px;
    }
    .sommaire h2 { font-family: var(--font-head); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--p-base); margin-bottom: 14px; }
    .sommaire-grid { display: flex; flex-wrap: wrap; gap: 8px 10px; }
    .sommaire-grid a {
      display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 20px;
      background: var(--bg-grey5); color: var(--text-body); font-size: .82rem; font-weight: 500;
      border: 1px solid transparent; transition: background var(--trans), color var(--trans), border-color var(--trans), transform var(--trans);
    }
    .sommaire-grid a:hover { background: var(--p-base); color: #fff; transform: translateY(-2px); }

    /* ══ CONTENU LÉGAL ═══════════════════════════════ */
    .legal { max-width: 860px; margin: 0 auto; padding: 56px 24px 40px; }

    .part-head {
      display: flex; align-items: center; gap: 16px; margin: 56px 0 26px;
      padding-bottom: 16px; border-bottom: 2.5px solid var(--p-light);
    }
    .part-head:first-child { margin-top: 0; }
    .part-num {
      flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: var(--p-base); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.5rem;
      box-shadow: 0 6px 20px rgba(46,34,238,.35);
    }
    .part-head h2 { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--p-base); text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }

    .legal h3 {
      font-family: var(--font-head); font-weight: 600; font-size: 1.18rem;
      color: var(--p-dark); text-transform: uppercase; letter-spacing: .04em;
      margin: 38px 0 12px; padding-left: 14px; border-left: 4px solid var(--p-base);
    }
    .legal h4 {
      font-family: var(--font-head); font-weight: 500; font-size: 1.02rem;
      color: var(--text-body); letter-spacing: .02em; margin: 24px 0 8px;
    }
    .legal p { font-size: 1rem; line-height: 1.8; color: var(--text-body); margin-bottom: 18px; }
    .legal .overview {
      font-family: var(--font-head); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
      color: var(--p-base); font-size: .95rem; margin: 26px 0 14px;
    }
    .legal a.inline { border-bottom: 1px solid var(--p-base); transition: color var(--trans); font-weight: 500; }
    .legal a.inline:hover { color: var(--p-dark); }
    .legal strong { color: var(--text-body); }

    /* Liste à puces stylée */
    .legal ul.bullets { margin: 0 0 22px; padding: 0; }
    .legal ul.bullets li {
      position: relative; padding: 7px 0 7px 30px; font-size: 1rem; line-height: 1.6; color: var(--text-body);
      border-bottom: 1px solid var(--bg-grey5);
    }
    .legal ul.bullets li::before { content: '✓'; position: absolute; left: 4px; top: 7px; color: var(--accent); font-weight: 700; }

    /* Liste numérotée (mentions légales) */
    .legal ol.numbered { margin: 0 0 22px; padding-left: 0; counter-reset: ml; list-style: none; }
    .legal ol.numbered li {
      position: relative; padding: 10px 0 10px 44px; font-size: 1rem; line-height: 1.7; color: var(--text-body);
      border-bottom: 1px solid var(--bg-grey5); counter-increment: ml;
    }
    .legal ol.numbered li::before {
      content: counter(ml); position: absolute; left: 0; top: 9px;
      width: 28px; height: 28px; border-radius: 50%; background: var(--p-light); color: var(--p-base);
      display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: .9rem;
    }

    /* Encadré contact / mise en avant */
    .callout {
      background: var(--bg-grey5); border-left: 6px solid var(--p-base); border-radius: 0 var(--radius) var(--radius) 0;
      padding: 22px 26px; margin: 26px 0 30px;
    }
    .callout p { margin-bottom: 10px; }
    .callout p:last-child { margin-bottom: 0; }

    /* Encadré "Vos données" */
    .databox {
      background: linear-gradient(135deg, var(--p-light), #fff);
      border: 1.5px solid var(--p-light); border-radius: var(--radius);
      padding: 28px 30px; margin: 26px 0 30px;
    }
    .databox h3 { margin-top: 0; }

    /* Lien téléchargement lettre RGPD / cookies */
    .doc-btn {
      display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 24px;
      padding: 13px 26px; border-radius: 4px; background: var(--p-base); color: #fff;
      font-family: var(--font-head); font-weight: 500; font-size: .92rem; letter-spacing: .08em; text-transform: uppercase;
      box-shadow: 0 4px 16px rgba(46,34,238,.28); transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
    }
    .doc-btn:hover { background: var(--p-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(46,34,238,.4); }
    .doc-btn.cyan { background: linear-gradient(90deg, var(--accent), var(--p-base)); }

    .legal-img { border-radius: var(--radius); margin: 8px auto 24px; box-shadow: 0 8px 28px rgba(0,0,0,.12); }

    .back-top { display: block; text-align: right; margin: 8px 0 -8px; font-size: .8rem; color: var(--text-muted); letter-spacing: .08em; }
    .back-top:hover { color: var(--p-base); }

    /* ══ FOOTER ══════════════════════════════════════ */
    footer { background: var(--bg-grey80); padding: 32px 20px 20px; position: relative; z-index: 5; }
    .footer-inner { max-width: 1140px; margin: 0 auto; text-align: center; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 2px 0; justify-content: center; margin-bottom: 18px; }
    .footer-links a { color: #fff; font-size: .82rem; padding: 4px 9px; transition: color var(--trans); white-space: nowrap; }
    .footer-links a:hover { color: var(--p-hover); }
    .footer-links span { color: rgba(255,255,255,.3); line-height: 1.8; font-size: .8rem; padding: 0 2px; }
    .footer-up { display: inline-block; margin: 8px auto 0; padding: 8px 32px; background: var(--p-base); color: #fff; border-radius: 4px; font-family: var(--font-head); font-size: .85rem; font-weight: 600; letter-spacing: .1em; transition: background var(--trans), transform var(--trans); }
    .footer-up:hover { background: var(--p-dark); transform: translateY(-2px); }
    .footer-credit { margin-top: 14px; font-size: .78rem; color: rgba(255,255,255,.45); }
    .footer-credit a { color: rgba(255,255,255,.65); transition: color var(--trans); }
    .footer-credit a:hover { color: #fff; }
    .recap-inner { max-width: 700px; margin: 0 auto; text-align: center; }
    .recap-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
    .btn-recap { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 4px; background: var(--p-base); color: #fff; font-family: var(--font-head); font-size: .88rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(46,34,238,.28); transition: background var(--trans), transform var(--trans); }
    .btn-recap:hover { background: var(--p-dark); transform: translateY(-2px); color: #e6e6e6; }

    /* ══ SCROLL REVEAL ═══════════════════════════════ */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* ══ RESPONSIVE ══════════════════════════════════ */
    @media (max-width: 767px) {
      .navbar { height: 56px; padding: 0 14px; }
      .navbar-logo img { width: 32px; height: 32px; }
      .navbar-logo span { font-size: 1rem; }
      .portail-wrap { margin: 0 10px; }
      #portail-text { font-size: .72rem; letter-spacing: .14em; }
      .hero { padding: 96px 16px 52px; }
      .sommaire { margin-top: -26px; padding: 20px 18px; }
      .legal { padding: 40px 16px 30px; }
      .part-num { width: 46px; height: 46px; font-size: 1.25rem; }
      .legal h3 { font-size: 1.05rem; }
      footer { padding: 22px 12px 16px; }
      .footer-links a { font-size: .76rem; padding: 3px 6px; }
    }
    @media (max-width: 380px) { .sidebar { width: 100%; } }
  </style>

/* ══ Styles extraits des attributs inline ══ */
.pc-no-mt        { margin-top: 0; }
.pc-footer-caption { font-family: var(--font-head); font-weight: 300; text-transform: uppercase; letter-spacing: .1em; color: var(--p-base); text-align: center; margin-top: 36px; }