/* =========================================================
   ONIIC-CI — Feuille de style principale
   Palette : bleu institutionnel / blanc / gris (sceau doré discret)
   Typographie : Sora (titres) + Public Sans (texte)
   ========================================================= */

:root{
  --bleu-ordre:#0D2B57;
  --bleu-nuit:#081C3A;
  --bleu-action:#1F5FD0;
  --bleu-pale:#E8EEF9;
  --gris-ardoise:#5B6676;
  --gris-texte:#2B3442;
  --gris-clair:#F2F4F8;
  --ligne:#D8DEE9;
  --blanc:#FFFFFF;
  --or-sceau:#B98F3E;
  --vert-valide:#1E7A4C;
  --rouge-alerte:#B3261E;
  --radius:10px;
  --ombre:0 10px 30px rgba(13,43,87,.10);
  --police-titres:'Sora',system-ui,sans-serif;
  --police-texte:'Public Sans',system-ui,sans-serif;
  --police-registre:'IBM Plex Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--police-texte);color:var(--gris-texte);line-height:1.65;background:var(--blanc);font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-action);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--bleu-action);outline-offset:2px}

.conteneur{max-width:1160px;margin:0 auto;padding:0 24px}
.conteneur-etroit{max-width:820px;margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--police-titres);color:var(--bleu-ordre);line-height:1.2;font-weight:700}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,3vw,2.1rem)}
h3{font-size:1.25rem}

.surtitre{font-family:var(--police-registre);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--or-sceau);display:inline-flex;align-items:center;gap:.6rem;margin-bottom:.9rem}
.surtitre::before{content:"";width:26px;height:1px;background:var(--or-sceau)}

/* ---------- Barre officielle ---------- */
.barre-officielle{background:var(--bleu-nuit);color:#B8C6DE;font-size:.8rem;padding:.45rem 0}
.barre-officielle .conteneur{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.barre-officielle a{color:#DCE6F5}

/* ---------- En-tête ---------- */
.entete{background:var(--blanc);border-bottom:1px solid var(--ligne);position:sticky;top:0;z-index:50}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:84px}
.marque{display:flex;align-items:center;gap:.9rem;text-decoration:none!important}
.marque-sceau{width:52px;height:52px;flex:none}
.marque-texte strong{display:block;font-family:var(--police-titres);color:var(--bleu-ordre);font-size:1.05rem;letter-spacing:.02em}
.marque-texte span{display:block;font-size:.72rem;color:var(--gris-ardoise);letter-spacing:.04em}

.nav-principale ul{display:flex;gap:1.4rem;list-style:none;align-items:center}
.nav-principale a{color:var(--gris-texte);font-weight:600;font-size:.92rem;text-decoration:none}
.nav-principale a:hover{color:var(--bleu-action)}
.nav-principale .actif > a{color:var(--bleu-ordre);border-bottom:2px solid var(--or-sceau);padding-bottom:4px}
.bouton-menu{display:none;background:none;border:1px solid var(--ligne);border-radius:8px;padding:.5rem .7rem;font-size:1.1rem;cursor:pointer;color:var(--bleu-ordre)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--police-titres);font-weight:600;font-size:.92rem;padding:.85rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none!important;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primaire{background:var(--bleu-action);color:#fff!important;box-shadow:0 6px 18px rgba(31,95,208,.3)}
.btn-secondaire{background:transparent;color:var(--bleu-ordre)!important;border-color:var(--bleu-ordre)}
.btn-clair{background:#fff;color:var(--bleu-ordre)!important}
.btn-bloc{width:100%;justify-content:center}

/* ---------- Héros ---------- */
.heros{background:linear-gradient(160deg,var(--bleu-nuit) 0%,var(--bleu-ordre) 65%,#123B78 100%);color:#fff;position:relative;overflow:hidden;padding:5.5rem 0 6rem}
.heros::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;pointer-events:none}
.heros .conteneur{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:3.5rem;align-items:center}
.heros h1{color:#fff;margin:.4rem 0 1.1rem}
.heros p.accroche{color:#C9D6EC;font-size:1.08rem;max-width:34rem;margin-bottom:1.8rem}
.heros .surtitre{color:#E4C87F}
.heros .surtitre::before{background:#E4C87F}
.heros-actions{display:flex;gap:.9rem;flex-wrap:wrap}

/* Carte registre (signature visuelle) */
.carte-registre{background:#fff;color:var(--gris-texte);border-radius:14px;box-shadow:0 24px 60px rgba(3,12,28,.45);padding:1.6rem;position:relative}
.carte-registre::before{content:"TABLEAU DE L'ORDRE — RÉPUBLIQUE DE CÔTE D'IVOIRE";position:absolute;top:-.62rem;left:1.2rem;background:var(--or-sceau);color:#fff;font-family:var(--police-registre);font-size:.6rem;letter-spacing:.12em;padding:.28rem .7rem;border-radius:4px}
.carte-registre .ligne-registre{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed var(--ligne);font-size:.9rem}
.carte-registre .ligne-registre:last-of-type{border-bottom:0}
.carte-registre .cle{color:var(--gris-ardoise)}
.carte-registre .valeur{font-weight:600;text-align:right}
.matricule{font-family:var(--police-registre);color:var(--bleu-ordre);letter-spacing:.06em}
.badge-statut{display:inline-block;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;letter-spacing:.05em}
.badge-inscrit{background:#E3F3EA;color:var(--vert-valide)}
.badge-attente{background:#FBF1DC;color:#8A6A1F}
.badge-suspendu{background:#FBE4E2;color:var(--rouge-alerte)}
.qr-registre{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--ligne)}
.qr-registre img,.qr-registre canvas{width:74px;height:74px}
.qr-registre small{color:var(--gris-ardoise);font-size:.75rem;line-height:1.4}

/* ---------- Bandeaux / sections ---------- */
.section{padding:4.5rem 0}
.section-grise{background:var(--gris-clair)}
.section-bleue{background:var(--bleu-ordre);color:#fff}
.section-bleue h2{color:#fff}
.entete-section{max-width:640px;margin-bottom:2.6rem}
.entete-section p{color:var(--gris-ardoise);margin-top:.6rem}

.grille{display:grid;gap:1.4rem}
.grille-2{grid-template-columns:repeat(2,1fr)}
.grille-3{grid-template-columns:repeat(3,1fr)}
.grille-4{grid-template-columns:repeat(4,1fr)}

.carte{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:1.7rem;transition:box-shadow .2s ease,transform .2s ease}
.carte:hover{box-shadow:var(--ombre);transform:translateY(-3px)}
.carte h3{margin-bottom:.55rem}
.carte p{color:var(--gris-ardoise);font-size:.95rem}
.carte .icone{width:46px;height:46px;border-radius:9px;background:var(--bleu-pale);color:var(--bleu-ordre);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1rem}

/* Chiffres clés */
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;text-align:center}
.chiffres .nombre{font-family:var(--police-titres);font-size:2.4rem;font-weight:700;color:#fff}
.chiffres .libelle{color:#B9C8E2;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase}

/* Étapes d'inscription */
.etapes{counter-reset:etape;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.etape{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:1.6rem;position:relative}
.etape::before{counter-increment:etape;content:counter(etape,decimal-leading-zero);font-family:var(--police-registre);color:var(--or-sceau);font-size:.85rem;letter-spacing:.1em;display:block;margin-bottom:.7rem}

/* ---------- Actualités ---------- */
.carte-actu{overflow:hidden;padding:0;display:flex;flex-direction:column}
.carte-actu .vignette{aspect-ratio:16/9;background:var(--bleu-pale);object-fit:cover;width:100%}
.carte-actu .corps{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.meta-actu{font-size:.78rem;color:var(--gris-ardoise);font-family:var(--police-registre);letter-spacing:.05em;text-transform:uppercase}

/* ---------- Tableau des membres ---------- */
.filtres-membres{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.filtres-membres input,.filtres-membres select{padding:.7rem 1rem;border:1px solid var(--ligne);border-radius:8px;font-family:inherit;font-size:.92rem;min-width:220px;background:#fff}
.tableau-ordre{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);overflow:hidden}
.tableau-ordre th{background:var(--bleu-ordre);color:#fff;font-family:var(--police-titres);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.9rem 1rem;text-align:left}
.tableau-ordre td{padding:.85rem 1rem;border-top:1px solid var(--ligne);font-size:.92rem;vertical-align:middle}
.tableau-ordre tr:hover td{background:var(--bleu-pale)}

/* ---------- Textes réglementaires ---------- */
.liste-textes{display:flex;flex-direction:column;gap:1rem}
.texte-item{display:flex;gap:1.2rem;align-items:flex-start;background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--bleu-ordre);border-radius:var(--radius);padding:1.3rem 1.5rem}
.texte-item .type-doc{font-family:var(--police-registre);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;background:var(--bleu-pale);color:var(--bleu-ordre);padding:.25rem .6rem;border-radius:4px;white-space:nowrap}
.texte-item h3{font-size:1.02rem;margin-bottom:.25rem}
.texte-item .meta{font-size:.8rem;color:var(--gris-ardoise)}
.texte-item .tele{margin-left:auto;white-space:nowrap}

/* ---------- Formulaires ---------- */
.formulaire{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:2.2rem;box-shadow:var(--ombre)}
.champ{margin-bottom:1.3rem}
.champ label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:var(--bleu-ordre)}
.champ label .req{color:var(--rouge-alerte)}
.champ input,.champ select,.champ textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--ligne);border-radius:8px;font-family:inherit;font-size:.95rem;background:#FBFCFE}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--bleu-action);background:#fff}
.champ .aide{font-size:.78rem;color:var(--gris-ardoise);margin-top:.3rem}
.champ-fichier{border:2px dashed var(--ligne);border-radius:10px;padding:1.2rem;text-align:center;background:var(--gris-clair);cursor:pointer}
.champ-fichier:hover{border-color:var(--bleu-action)}
.grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 1.4rem}
.encart-securite{display:flex;gap:.8rem;align-items:flex-start;background:var(--bleu-pale);border-radius:10px;padding:1rem 1.2rem;font-size:.85rem;color:var(--bleu-ordre);margin:1.4rem 0}
.message-form{padding:1rem 1.3rem;border-radius:10px;margin-bottom:1.4rem;font-size:.92rem;display:none}
.message-form.succes{display:block;background:#E3F3EA;color:var(--vert-valide);border:1px solid #BFE3CE}
.message-form.erreur{display:block;background:#FBE4E2;color:var(--rouge-alerte);border:1px solid #F2C4C0}

/* Barre de progression (inscription) */
.progression{display:flex;gap:.5rem;margin-bottom:2rem}
.progression span{flex:1;height:6px;border-radius:99px;background:var(--ligne)}
.progression span.fait{background:var(--bleu-action)}

/* ---------- Espace membre / Commission ---------- */
.tuiles-espace{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tuile-dossier{background:#fff;border:1px solid var(--ligne);border-radius:var(--radius);padding:1.4rem}
.tuile-dossier .num{font-family:var(--police-registre);font-size:.8rem;color:var(--gris-ardoise)}

/* ---------- Pied de page ---------- */
.pied{background:var(--bleu-nuit);color:#AFC0DB;padding:3.8rem 0 0;font-size:.92rem}
.pied h4{color:#fff;font-size:.95rem;margin-bottom:1.1rem;letter-spacing:.03em}
.pied a{color:#C7D5EC}
.pied .grille-pied{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.6rem}
.pied ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.reseaux{display:flex;gap:.7rem;margin-top:1rem}
.reseaux a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:8px;display:flex;align-items:center;justify-content:center;text-decoration:none!important}
.reseaux a:hover{background:var(--bleu-action);border-color:var(--bleu-action)}
.pied-bas{border-top:1px solid rgba(255,255,255,.12);padding:1.2rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:#7E93B5}

/* ---------- Contenu éditorial ---------- */
.contenu-page{padding:3.5rem 0}
.contenu-page .conteneur-etroit > *{margin-bottom:1.2rem}
.contenu-page h2{margin-top:2.2rem}
.contenu-page ul,.contenu-page ol{padding-left:1.4rem}
.bandeau-page{background:linear-gradient(150deg,var(--bleu-nuit),var(--bleu-ordre));color:#fff;padding:3.6rem 0}
.bandeau-page h1{color:#fff}
.fil-ariane{font-size:.8rem;color:#9FB2D2;margin-bottom:.8rem;font-family:var(--police-registre)}
.fil-ariane a{color:#C9D6EC}

/* Chronologie (historique) */
.chronologie{border-left:2px solid var(--ligne);margin-left:.6rem;padding-left:2rem;display:flex;flex-direction:column;gap:2rem}
.jalon{position:relative}
.jalon::before{content:"";position:absolute;left:-2.55rem;top:.35rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--or-sceau)}
.jalon .annee{font-family:var(--police-registre);color:var(--or-sceau);letter-spacing:.08em;font-size:.85rem}

/* Pagination / divers */
.pagination{display:flex;gap:.5rem;margin-top:2.5rem}
.pagination a,.pagination span{padding:.5rem .9rem;border:1px solid var(--ligne);border-radius:8px}
.pagination .current{background:var(--bleu-ordre);color:#fff;border-color:var(--bleu-ordre)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .heros .conteneur{grid-template-columns:1fr}
  .grille-3,.grille-4,.tuiles-espace{grid-template-columns:repeat(2,1fr)}
  .chiffres{grid-template-columns:repeat(2,1fr)}
  .etapes{grid-template-columns:repeat(2,1fr)}
  .pied .grille-pied{grid-template-columns:1fr 1fr}
  .nav-principale{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--ligne);padding:1rem 24px 1.4rem}
  .nav-principale.ouvert{display:block}
  .nav-principale ul{flex-direction:column;align-items:flex-start;gap:1rem}
  .bouton-menu{display:block}
}
@media (max-width:600px){
  .grille-2,.grille-3,.grille-4,.grille-champs,.tuiles-espace,.etapes,.chiffres{grid-template-columns:1fr}
  .pied .grille-pied{grid-template-columns:1fr}
  .texte-item{flex-wrap:wrap}
  .texte-item .tele{margin-left:0}
  .formulaire{padding:1.4rem}
}