:root {
      --bleu:        #002654;
      --bleu-fonce:  #001534;
      --bleu-mid:    #1a4a8a;
      --bleu-clair:  #e8eef8;
      --rouge:       #c82333;
      --rouge-clair: #fff5f5;
      --vert:        #198754;
      --vert-clair:  #eefbf4;
      --orange:      #b8860b;
      --gris-fond:   #f3f5f9;
      --gris-bordure:#cfd7e8;
      --gris-texte:  #5a6474;
      --texte:       #1a1e2a;
      --blanc:       #ffffff;
      --ombre:       0 2px 8px rgba(0,38,84,0.09);
      --ombre-card:  0 4px 14px rgba(0,38,84,0.11);
      --rayon:       6px;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* body: sticky footer ci-dessous */

    /* ── Navigation ───────────────────────────────────────── */
    .nav-cerpeg {
      background: var(--blanc);
      border-bottom: 2px solid var(--gris-bordure);
      padding: 10px 24px;
      box-shadow: 0 2px 6px rgba(0,38,84,0.07);
    }
    .nav-inner {
      max-width: 1100px; margin: 0 auto;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    }
    .nav-btn {
      display: inline-flex; align-items: center; gap: 7px;
      border-radius: var(--rayon); padding: 8px 15px;
      font-family: inherit; font-size: 13px; font-weight: 700;
      cursor: pointer; text-decoration: none;
      transition: background 0.2s, color 0.2s;
      border: 1px solid var(--gris-bordure);
      background: var(--bleu-clair); color: var(--bleu);
      white-space: nowrap;
    }
    .nav-btn:hover { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }
    .nav-badge {
      margin-left: auto;
      background: var(--bleu-clair); border: 1px solid var(--bleu-mid); color: var(--bleu);
      padding: 3px 11px; border-radius: 20px;
      font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    }

    /* ── Wrapper ──────────────────────────────────────────── */
    .main-wrapper { max-width: 1100px; margin: 0 auto; padding: 18px 20px 48px; }

    /* ── Logo ─────────────────────────────────────────────── */
    .logo-container { text-align: center; padding: 6px 0 0; }
    .logo-container img { width: 210px; max-width: 100%; height: auto; border-radius: 8px; }

    /* ── En-tête page ─────────────────────────────────────── */
    .page-titre {
      background: var(--bleu); border-radius: var(--rayon);
      padding: 16px 22px; margin: 14px 0 22px;
      display: flex; align-items: center; gap: 14px;
      box-shadow: var(--ombre-card);
    }
    .page-titre-icon {
      width: 46px; height: 46px; background: rgba(255,255,255,0.18);
      border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .page-titre-text h1 { color: var(--blanc); font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
    .page-titre-text p  { color: rgba(255,255,255,0.75); font-size: 12px; margin-top: 3px; font-style: italic; }

    /* ── Intro ────────────────────────────────────────────── */
    .home-intro {
      background: var(--bleu-clair); border: 1px solid #b8caee; border-left: 4px solid var(--bleu);
      border-radius: var(--rayon); padding: 12px 16px; margin-bottom: 20px;
      font-size: 13px; color: var(--bleu); font-weight: 600; text-align: center;
    }

    /* ── Grille cartes 3+2 ────────────────────────────────── */
    .fichiers-grid {
      display: grid; grid-template-columns: repeat(6, 1fr);
      gap: 14px; margin-bottom: 0px;
    }
    .fichier-card {
      grid-column: span 2;
      background: var(--blanc); border: 2px solid var(--gris-bordure);
      border-radius: var(--rayon); padding: 20px 20px 20px;
      cursor: pointer;
      transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
      box-shadow: var(--ombre);
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      text-align: center; user-select: none;
    }
    .fichier-card:nth-child(4) { grid-column: 2 / span 2; }
    .fichier-card:hover { border-color: var(--bleu-mid); box-shadow: var(--ombre-card); transform: translateY(-4px); }
    .fichier-card.active { border-color: var(--bleu); background: var(--bleu-clair); }

    .carte-icone {
      width: 72px; height: 72px; border-radius: 16px;
      background: var(--bleu-clair); color: var(--bleu);
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, color 0.2s;
    }
    .fichier-card:hover .carte-icone { background: var(--bleu); color: var(--blanc); }

    .carte-sigle { font-size: 20px; font-weight: 800; color: var(--bleu); letter-spacing: 0.3px; }
    .carte-desc  { font-size: 13px; color: var(--gris-texte); line-height: 1.5; }

    /* ── Disclaimer accueil ───────────────────────────────── */
    .disclaimer-home {
      text-align: center; font-size: 12px; color: var(--rouge);
      font-weight: 700; font-style: italic; margin-top: 6px;
    }

    /* ── Écran recherche ──────────────────────────────────── */
    .hidden { display: none !important; }

    .search-header {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 18px; flex-wrap: wrap;
    }
    .btn-retour {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--blanc); border: 1.5px solid var(--gris-bordure);
      color: var(--gris-texte); border-radius: var(--rayon);
      padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 700;
      cursor: pointer; transition: background 0.18s, color 0.18s;
    }
    .btn-retour:hover { background: var(--gris-fond); color: var(--texte); }

    .search-title {
      font-size: 15px; font-weight: 700; color: var(--bleu);
      text-transform: uppercase; letter-spacing: 0.04em;
    }

    /* ── Formulaire de recherche ──────────────────────────── */
    .search-form-card {
      background: var(--blanc); border: 1px solid var(--gris-bordure);
      border-radius: var(--rayon); padding: 20px; margin-bottom: 22px;
      box-shadow: var(--ombre);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-group { display: flex; flex-direction: column; gap: 5px; }
    .form-group.full { grid-column: 1 / -1; }

    label { font-size: 12px; font-weight: 700; color: var(--gris-texte); display: block; }

    input[type="text"] {
      width: 100%; padding: 9px 12px;
      border: 1.5px solid var(--gris-bordure); border-radius: var(--rayon);
      font-family: inherit; font-size: 14px; color: var(--texte);
      background: var(--blanc); transition: border-color 0.18s;
      box-sizing: border-box;
    }
    input[type="text"]:focus {
      outline: none; border-color: var(--bleu);
      box-shadow: 0 0 0 3px rgba(0,38,84,0.10);
    }
    input[type="text"]:disabled {
      background: #eef0f4; color: var(--gris-texte);
      cursor: not-allowed; opacity: 1;
    }
    input[type="text"]::placeholder { color: #a0aab8; }

    .field-hint { font-size: 11px; color: var(--gris-texte); margin-top: 2px; font-style: italic; }

    .btn-group { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
    .btn-interroger {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--bleu); color: var(--blanc);
      border: none; border-radius: var(--rayon);
      padding: 11px 22px; font-family: inherit; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: background 0.2s; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .btn-interroger:hover { background: var(--bleu-fonce); }
    .btn-effacer {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--blanc); border: 1.5px solid var(--gris-bordure);
      color: var(--gris-texte); border-radius: var(--rayon);
      padding: 10px 18px; font-family: inherit; font-size: 14px; font-weight: 700;
      cursor: pointer; transition: background 0.18s;
    }
    .btn-effacer:hover { background: var(--gris-fond); color: var(--texte); }

    /* ── Résultats ────────────────────────────────────────── */
    /* ── Zone résultats ───────────────────────────────────── */
    .result-area { margin-top: 8px; }

    .result-msg {
      padding: 12px 18px; border-radius: var(--rayon);
      font-size: 13px; font-weight: 700; margin-bottom: 18px;
      display: flex; align-items: center; gap: 10px;
    }
    .result-msg.info   { background: var(--bleu-clair);  color: var(--bleu);  border-left: 4px solid var(--bleu); }
    .result-msg.vide   { background: var(--rouge-clair); color: var(--rouge); border-left: 4px solid var(--rouge); }
    .result-msg.succes { background: var(--vert-clair);  color: var(--vert);  border-left: 4px solid var(--vert); }

    /* Grille 2 fiches par ligne */
    .result-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: start;
    }

    .result-card {
      background: var(--blanc);
      border: 1px solid var(--gris-bordure);
      border-radius: var(--rayon);
      overflow: hidden;
      box-shadow: var(--ombre);
      display: flex;
      flex-direction: column;
      transition: box-shadow 0.18s;
    }
    .result-card:hover { box-shadow: var(--ombre-card); }

    .result-card-titre {
      background: var(--bleu); color: var(--blanc);
      padding: 11px 16px;
      display: flex; align-items: center; gap: 10px;
      font-size: 12.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.05em;
    }
    .result-card-num {
      background: rgba(255,255,255,0.22);
      border-radius: 50%;
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 800; flex-shrink: 0;
    }

    .result-fields { padding: 2px 0; flex: 1; }

    .data-row {
      display: flex; align-items: baseline;
      gap: 10px; padding: 8px 14px;
      border-bottom: 1px solid var(--gris-bordure);
    }
    .data-row:last-child { border-bottom: none; }

    .data-label {
      font-size: 11.5px; font-weight: 700;
      color: var(--gris-texte); min-width: 130px; flex-shrink: 0;
      text-transform: uppercase; letter-spacing: 0.03em;
    }
    .data-value {
      flex: 1; font-size: 13px; color: var(--texte);
      word-break: break-word; font-weight: 600;
    }
    .data-value.neant { color: #bbb; font-style: italic; font-weight: 400; }

    .data-row.cat-row {
      background: #fffbeb;
      border-left: 3px solid var(--orange);
      padding-left: 11px;
      margin-top: 2px;
    }
    .data-row.cat-row .data-label { color: var(--orange); }
    .data-row.cat-row .data-value { color: #7a5200; font-weight: 700; font-size: 12.5px; }

    .points-ok   { color: var(--vert);  font-weight: 800; }
    .points-warn { color: var(--orange); font-weight: 800; }
    .points-bad  { color: var(--rouge); font-weight: 800; }

    @media (max-width: 700px) {
      .result-grid { grid-template-columns: 1fr; }
      .data-label { min-width: 110px; }
    }

    /* ── Footer ───────────────────────────────────────────── */
    .main-footer {
      background: var(--bleu-fonce);
      color: rgba(255,255,255,0.6);
      text-align: center;
      padding: 10px 24px;
      font-size: 12px;
      line-height: 1.6;
      margin-top: 20px;
    }
    

    /* ── Responsive ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .fichiers-grid { grid-template-columns: repeat(2, 1fr); }
      .fichier-card, .fichier-card:nth-child(4) { grid-column: span 1; }
    }
    @media (max-width: 600px) {
      .main-wrapper { padding: 12px 14px 32px; }
      .fichiers-grid { grid-template-columns: 1fr; }
      .fichier-card, .fichier-card:nth-child(4) { grid-column: span 1; }
      .form-grid { grid-template-columns: 1fr; }
      .btn-group { flex-direction: column; }
      .btn-interroger, .btn-effacer, .btn-retour { width: 100%; justify-content: center; }
      .data-label { min-width: 0; width: 100%; }
      .data-row { flex-direction: column; align-items: flex-start; gap: 3px; }
      .data-value { text-align: left; }
      .nav-badge { display: none; }
      .main-footer { padding: 14px 14px; font-size: 11px; margin-top: 28px; }
    }
    @media (max-width: 380px) {
      .main-footer { font-size: 10px; padding: 12px; }
      .page-titre { flex-direction: column; text-align: center; }
    }
  
    /* ══ Body sticky footer ══════════════════════════════════ */
    html { height: 100%; }
    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        font-size: 14px;
        color: var(--texte);
        background: var(--gris-fond);
        min-height: 100vh;
        margin: 0; padding: 0;
        display: flex;
        flex-direction: column;
    }
    .nav-cerpeg { flex-shrink: 0; }
    .main-wrapper { flex: 1; }

    /* ══ Footer gris sobre identique sur les 3 fichiers ═════ */
    .main-footer, footer.main-footer {
        background: #eaecf2;
        color: #8a96a8;
        text-align: center;
        padding: 10px 24px;
        font-size: 11px;
        line-height: 1.6;
        border-top: 1px solid #d0d8e8;
        flex-shrink: 0;
        margin-top: 0;
    }
    .main-footer strong { color: #6a7280; font-weight: 600; }