/* ========================================================
       STYLES-MENTIONS-LEGALES.CSS — /mentions-legales.html

       SOMMAIRE (bannières numérotées, dans l’ordre du fichier)
        1. Variables — palette Aura (identiques à app/index.html)
        2. Reset & base
        3. Lien d'évitement
        4. Focus visible
        5. Container
        6. Header
        7. Bandeau d'avertissement
        8. Main
        9. Titres de page
       10. Sections légales
       11. Placeholders [À COMPLÉTER]
       12. Footer
       13. Responsive
       14. Impression

       Règle : aucun réordonnancement de règles (l’ordre de la cascade est
       sémantique : à spécificité égale, la dernière règle gagne).

       1. Variables — palette Aura (identiques à app/index.html)
       Contrastes vérifiés WCAG AA (4,5:1 minimum sur texte normal)
       ======================================================== */
    :root {
      --c-bg:          #FFFFFF;
      --c-bg-alt:      #FAF5EF;
      --c-hero:        #2A3828;
      --c-footer:      #1C2418;
      --c-text:        #2C1A10;      /* ≈ 14:1 sur blanc */
      --c-text-inv:    #FFFFFF;
      --c-text-muted:  #5C4038;      /* ≈  7:1 sur blanc */
      --c-primary:     #8B4A30;      /* ≈  6:1 sur blanc/crème */
      --c-primary-dk:  #6E3822;
      --c-border:      #C8B5A8;
      /* Avertissement — texte foncé sur fond ambre clair */
      --c-warn-bg:     #FFF3CD;
      --c-warn-bdr:    #C07800;      /* icône + bordure */
      --c-warn-txt:    #4A2F00;      /* ≈ 10,5:1 sur #FFF3CD */
      /* Placeholder [À COMPLÉTER] */
      --c-plhd-bg:     #FFF3CD;
      --c-plhd-txt:    #4A2F00;
      --c-plhd-bdr:    #C07800;

      --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      --sz-sm:   1rem;        /* 16 px */
      --sz-base: 1.125rem;    /* 18 px — confort seniors */
      --sz-lg:   1.375rem;    /* 22 px */
      --sz-xl:   1.75rem;     /* 28 px */

      --sp-1: 0.5rem;
      --sp-2: 1rem;
      --sp-3: 1.5rem;
      --sp-4: 2rem;
      --sp-6: 3rem;
      --sp-8: 4rem;
      --sp-10: 5rem;

      --max-w:  860px;
      --radius: 0.5rem;
    }

    /* ===== 2. Reset & base ===== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }

    body {
      font-family: var(--font);
      font-size: var(--sz-base);
      color: var(--c-text);
      background: var(--c-bg);
      line-height: 1.65;
    }

    /* ===== 3. Lien d'évitement ===== */
    .skip-link {
      position: absolute;
      top: -999px;
      left: -999px;
      background: var(--c-primary);
      color: var(--c-text-inv);
      padding: var(--sp-2) var(--sp-3);
      border-radius: var(--radius);
      font-weight: 700;
      font-size: var(--sz-base);
      text-decoration: none;
      z-index: 9999;
    }
    .skip-link:focus { top: var(--sp-2); left: var(--sp-2); }

    /* ===== 4. Focus visible ===== */
    :focus-visible {
      outline: 3px solid var(--c-primary);
      outline-offset: 3px;
      border-radius: 2px;
    }
    .site-header :focus-visible,
    .site-footer :focus-visible {
      outline-color: #FFFFFF;
    }

    /* ===== 5. Container ===== */
    .container {
      width: 100%;
      max-width: var(--max-w);
      margin: 0 auto;
      padding: 0 var(--sp-3);
    }

    /* ===== 6. Header ===== */
    .site-header {
      background: var(--c-hero);
      padding: 0.75rem 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    }

    .site-header .container {
      display: flex;
      align-items: center;
      gap: var(--sp-3);
    }

    .header-logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      text-decoration: none;
      flex: 1;
    }

    .header-logo-img { height: 44px; width: auto; }

    .header-logo-txt {
      color: #FFFFFF;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.01em;
    }

    .header-back {
      color: #E8DDD8;
      text-decoration: none;
      font-size: var(--sz-sm);
      font-weight: 600;
      white-space: nowrap;
      padding: 0.4rem 0.9rem;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }
    .header-back:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

    /* ===== 7. Bandeau d'avertissement =====
       Signal non purement coloré : triangle SVG (icône) + libellé textuel.
       Rôle ARIA "note" : contenu informatif complémentaire, annoncé par les AT. */
    .bandeau-attention {
      background: var(--c-warn-bg);
      border-bottom: 3px solid var(--c-warn-bdr);
      padding: var(--sp-3) 0;
    }

    .bandeau-attention__inner {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-2);
    }

    .bandeau-attention__icone {
      flex-shrink: 0;
      color: var(--c-warn-bdr);   /* couleur de l'icône — doublée par le libellé textuel */
      margin-top: 3px;
    }

    .bandeau-attention__corps { flex: 1; }

    .bandeau-attention__titre {
      font-size: var(--sz-base);
      font-weight: 700;
      color: var(--c-warn-txt);
      margin-bottom: var(--sp-1);
    }

    .bandeau-attention__texte {
      font-size: var(--sz-sm);
      color: var(--c-warn-txt);
      line-height: 1.55;
    }

    /* ===== 8. Main ===== */
    .page-main {
      padding: var(--sp-8) 0 var(--sp-10);
    }

    /* Lien retour accessible */
    .nav-retour { margin-bottom: var(--sp-6); }

    .lien-retour {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-1);
      color: var(--c-primary);
      text-decoration: none;
      font-weight: 700;
      font-size: var(--sz-sm);
      padding: 0.5rem 1rem;
      border: 2px solid var(--c-primary);
      border-radius: var(--radius);
      transition: background 0.15s, color 0.15s;
    }
    .lien-retour:hover,
    .lien-retour:focus-visible {
      background: var(--c-primary);
      color: var(--c-text-inv);
      text-decoration: none;
    }

    /* ===== 9. Titres de page ===== */
    .page-titre {
      font-size: clamp(var(--sz-lg), 3.5vw, var(--sz-xl));
      font-weight: 800;
      color: var(--c-text);
      margin-bottom: var(--sp-2);
      line-height: 1.3;
    }

    .page-sous-titre {
      color: var(--c-text-muted);
      font-size: var(--sz-sm);
      margin-bottom: var(--sp-8);
    }

    /* ===== 10. Sections légales ===== */
    .section-legale {
      margin-bottom: var(--sp-8);
    }

    .section-legale h2 {
      font-size: var(--sz-lg);
      font-weight: 700;
      color: var(--c-text);
      margin-bottom: var(--sp-3);
      padding-bottom: var(--sp-1);
      border-bottom: 2px solid var(--c-border);
    }

    .section-legale h3 {
      font-size: var(--sz-base);
      font-weight: 700;
      color: var(--c-text);
      margin-top: var(--sp-4);
      margin-bottom: var(--sp-1);
    }

    .section-legale p {
      color: var(--c-text-muted);
      margin-bottom: var(--sp-2);
      line-height: 1.65;
    }

    .section-legale ul {
      padding-left: var(--sp-4);
      margin-bottom: var(--sp-2);
      color: var(--c-text-muted);
    }

    .section-legale ul li {
      margin-bottom: var(--sp-1);
      line-height: 1.55;
    }

    .section-legale a {
      color: var(--c-primary);
      text-decoration: underline;
    }
    .section-legale a:hover { color: var(--c-primary-dk); }

    /* ===== 11. Placeholders [À COMPLÉTER] =====
       Fond ambre + texte foncé + bordure : signal triple (couleur + forme + libellé). */
    .a-completer {
      display: inline;
      background: var(--c-plhd-bg);
      color: var(--c-plhd-txt);         /* ≈ 10,5:1 sur #FFF3CD */
      border: 1.5px solid var(--c-plhd-bdr);
      border-radius: 3px;
      padding: 0.1em 0.4em;
      font-weight: 700;
      font-style: italic;
    }

    /* ===== 12. Footer ===== */
    .site-footer {
      background: var(--c-footer);
      color: #C8D0B8;                  /* ≈ 10,5:1 sur footer */
      padding: var(--sp-6) 0;
      font-size: var(--sz-sm);
    }

    .site-footer .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--sp-3);
      text-align: center;
    }

    .footer-logo {
      font-size: var(--sz-xl);
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -0.02em;
    }

    .footer-liens {
      display: flex;
      gap: var(--sp-4);
      flex-wrap: wrap;
      justify-content: center;
    }

    .footer-lien {
      color: #C8D0B8;
      text-decoration: underline;
      transition: color 0.15s;
    }
    .footer-lien:hover,
    .footer-lien:focus-visible { color: #FFFFFF; }

    .footer-copy { color: #8A9A70; }   /* ≈ 5,5:1 sur footer */

    /* ===== 13. Responsive ===== */
    @media (max-width: 640px) {
      :root { --sp-10: 3.5rem; --sp-8: 2.5rem; }
      .bandeau-attention__inner { flex-direction: column; }
      .header-back { font-size: 0.9rem; padding: 0.35rem 0.65rem; }
    }

    /* ===== 14. Impression ===== */
    @media print {
      .site-header, .nav-retour { display: none; }
      .bandeau-attention {
        border: 2px solid #000;
        background: #FFFCD4;
      }
    }