/* ======================================================================
   KOAKDESIGN - PRÉSENTATION DES PAGES  (css/pages.css)
   ----------------------------------------------------------------------
   Le cadre du site (menu, bandeau, pied de page) est dans style.css,
   les fenêtres dans modal.css, les messages d'alerte dans success.css.

   Sections :
     - Page d'accueil          classes acc-
     - Pages logiciels         classes lg-
     - Page inscription        classes ins-
     - Page donation           classes don-
     - Page contact            classes ct-
     - Pages nouvelles         classes nw-   (liste + détail)
     - Pages développement     classes dv-   (catégories, liste, source)
     - Administration          classes adm-  (tableau de bord, membres)
   ====================================================================== */

:root {
  --gris:       #585858;
  --gris-clair: #707070;
  --fond:       #dedede;
  --carte:      #f0f0f0;
  --texte:      #444;
  --doux:       #6b6b6b;
  --orange:     #f1592a;
  --bleu:       #0095cd;
  --vert:       #64991e;
  --ocre:       #f78d1d;
  --rouge:      #d81b21;
}

/* =========================================================
   CONTENU DE L'ACCUEIL (classes "acc-")
   ========================================================= */

/* --- Bandeau d'accroche --- */
.acc-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #585858 0%, #474747 60%, #3a3a3a 100%);
  border-radius: 12px;
  color: #f0f0f0;
  padding: 20px 20px;
  display: flex; align-items: center; gap: 40px;
}
.acc-hero::after {
  /* Grille de points plus gros en quinconce */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
  /* Points agrandis à 2px (le transparent commence à 2px pour garder le point net) */
  background-image: 
    radial-gradient(rgba(255, 255, 255, 0.04) 4px, transparent 2px),
    radial-gradient(rgba(255, 255, 255, 0.04) 4px, transparent 2px);
  
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}
.acc-hero-texte { flex: 1; position: relative; z-index: 1; }
.acc-hero small { color: var(--orange); font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.acc-hero h1 { font-size: 26px; line-height: 1.15; margin: 8px 0 14px; }
.acc-hero h1 span { color: var(--orange); }
.acc-hero p { color: #d6d6d6; font-size: 17px; line-height: 1.6; max-width: none; }
.acc-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.acc-btn {
  display: inline-block; padding: 12px 22px; border-radius: 4px;
  font-weight: bold; font-size: 16px; font-family: inherit;
}
.acc-btn.plein { background: var(--orange); color: #fff; }
.acc-btn.plein:hover { background: #d4461c; }
.acc-btn.vide { border: 2px solid #9a9a9a; color: #f0f0f0; }
.acc-btn.vide:hover { border-color: var(--orange); color: var(--orange); }

/* fenêtre de code décorative */
.acc-code {
  position: relative; z-index: 1; width: 380px; flex-shrink: 0;
  background: #2b2b2b; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 1.6;
}
.acc-code-barre { display: flex; gap: 6px; padding: 10px 12px; background: #3a3a3a; border-radius: 8px 8px 0 0; }
.acc-code-barre i { width: 11px; height: 11px; border-radius: 50%; background: #707070; }
.acc-code-barre i:nth-child(1) { background: #d81b21; }
.acc-code-barre i:nth-child(2) { background: #f78d1d; }
.acc-code-barre i:nth-child(3) { background: #64991e; }
.acc-code pre { padding: 14px 16px; color: #d6d6d6; white-space: pre; overflow: hidden; }
.k { color: #f78d1d; } .s { color: #8fc66b; } .c { color: #8a8a8a; } .n { color: #6cb6e0; }

/* --- Titres de section --- */
.acc-section { margin-top: 32px; }
.acc-section-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.acc-section h2 {
  font-size: 20px; color: var(--gris);
  padding-bottom: 6px; border-bottom: 3px solid var(--orange);
}
.acc-section-tete a { color: var(--bleu); font-size: 15px; font-weight: bold; }
.acc-section-tete a:hover { color: var(--orange); }

/* --- Les 4 univers --- */
.acc-univers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.acc-tuile {
  background: var(--carte); border-radius: 0 0 10px 10px; padding: 22px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); border-top: 6px solid var(--c);
  transition: transform .15s, box-shadow .15s; color: var(--texte); display: block;
}
.acc-tuile:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.acc-tuile .pic {
  width: 46px; height: 46px; border-radius: 10px; background: var(--c);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.acc-tuile .pic svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acc-tuile h3 { font-size: 19px; color: var(--gris); margin-bottom: 6px; }
.acc-tuile p { font-size: 15px; line-height: 1.5; color: var(--doux); }

/* --- Logiciels à la une + nouveautés --- */
.acc-deux { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.acc-une { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* À la une + Nouveautés : les deux colonnes ont la même hauteur,
   les cartes s'étirent pour remplir */
.acc-deux > div { display: flex; flex-direction: column; }
.acc-une  { flex: 1; }
.acc-news { flex: 1; }
.acc-app {
  background: var(--carte); border-radius: 10px; padding: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 10px;
}
.acc-app-tete { display: flex; gap: 12px; align-items: center; }
.acc-ico {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 19px;
}
/* icône en image (logiciel avec une icône envoyée) : contenue dans la pastille de 48 px */
.acc-ico img { width: 100%; height: 100%; object-fit: contain; }
.acc-app h3 { font-size: 18px; color: var(--gris); }
.acc-app small { font-size: 13px; color: var(--doux); }
.acc-app p { font-size: 15px; line-height: 1.5; flex: 1; }
.acc-app-bas { display: flex; justify-content: space-between; align-items: center; }
.acc-app-bas a { color: var(--bleu); font-size: 14px; font-weight: bold; }
.acc-app-bas a:hover { color: var(--orange); }
.badge { font-size: 12px; padding: 3px 9px; border-radius: 12px; color: #fff; white-space: nowrap; }
.b-test { background: var(--ocre); } .b-dev { background: #7b7b7b; } .b-dispo { background: var(--vert); }

.acc-news { background: var(--carte); border-radius: 10px; padding: 18px 20px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.acc-news-tete {
  display: flex;
  justify-content: space-between;   /* date à gauche, lien à droite */
  align-items: baseline;            /* alignés sur la même ligne de texte */
  gap: 10px;
}
.acc-news li { padding: 12px 0; border-bottom: 1px solid #dadada; }
.acc-news li:last-child { border-bottom: none; }
.acc-news time { display: block; font-size: 13px; color: var(--orange); font-weight: bold; }
.acc-news a { color: var(--bleu); font-size: 13px; font-weight: bold; }
.acc-news a:hover { color: var(--orange); }
.acc-news b { display: block; font-size: 16px; color: var(--gris); margin: 2px 0; }
.acc-news span { font-size: 14px; color: var(--doux); line-height: 1.4; }

/* --- Chiffres --- */
.acc-chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: #cfcfcf; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.acc-chiffres div { background: var(--carte); padding: 22px 10px; text-align: center; }
.acc-chiffres b { display: block; font-size: 34px; color: var(--orange); }
.acc-chiffres span { font-size: 16px; font-weight: bold; color: var(--doux); }

/* --- Petits écrans --- */
@media (max-width: 1100px) {
  .acc-code { display: none; }
  .acc-univers { grid-template-columns: repeat(2, 1fr); }
  .acc-deux { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .acc-hero { padding: 30px 22px; }
  .acc-hero h1 { font-size: 30px; }
  .acc-univers, .acc-une, .acc-chiffres { grid-template-columns: 1fr 1fr; }
  .acc-une { grid-template-columns: 1fr; }
}
@media (max-width: 500px) {
  .acc-univers { grid-template-columns: 1fr; }
}

/* ######################################################################
   5. PAGES LOGICIELS  -  classes lg-  (ancien logiciels.css)
   ###################################################################### */

/* =========================================================
   KoakDesign - Pages logiciels (liste + fiche)
   Toutes les classes commencent par "lg-" pour ne pas
   entrer en conflit avec style.css.
   Couleurs reprises de style.css : gris #585858 / #707070,
   orange #f1592a, fond #dedede.
   ========================================================= */

:root {
  --lg-gris:       #585858;
  --lg-gris-clair: #707070;
  --lg-carte:      #f0f0f0;
  --lg-texte:      #444;
  --lg-doux:       #6b6b6b;
  --lg-orange:     #f1592a;
  --lg-bleu:       #0095cd;
  --lg-vert:       #64991e;
  --lg-ocre:       #f78d1d;
}

.lg-page {
  width: 100%;
  margin: 0 auto;
  color: var(--lg-texte);
}
.lg-page.lg-etroit { max-width: 1100px; padding-top: 12px; }

/* success.css centre et met en gras TOUS les <p> du site :
   on revient à un texte normal dans les pages logiciels */
.lg-page p { text-align: left; font-weight: normal; margin: 0; }

.lg-page a { color: var(--lg-bleu); }
.lg-page a:hover { color: var(--lg-orange); }

.lg-titre { font-size: 30px; margin: 0 0 6px; color: var(--lg-gris); }
.lg-page .lg-intro { color: var(--lg-doux); margin: 0 0 24px; line-height: 1.6; max-width: 100%; font-size: 16px; }
.lg-vide  { color: var(--lg-doux); font-size: 14px; }

/* ---------- Statuts ---------- */
.lg-s-dispo { background: var(--lg-vert); color: #fff; }
.lg-s-test  { background: var(--lg-ocre); color: #fff; }
.lg-s-dev   { background: #7b7b7b;       color: #fff; }

/* =========================================================
   LISTE
   ========================================================= */
.lg-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.lg-filtres button {
  font-family: inherit; font-size: 14px; font-weight: bold; cursor: pointer;
  border: 1px solid #b9b9b9; background: #ececec; color: var(--lg-texte);
  padding: 6px 14px; border-radius: 20px;
}
.lg-filtres button:hover { color: var(--lg-orange); }
.lg-filtres button.actif { background: var(--lg-gris); color: #f0f0f0; border-color: var(--lg-gris); }

.lg-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px; 
}
@media (max-width: 1400px) {
  .lg-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3 */
}
@media (max-width: 1050px) {
  .lg-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 2 */
}
@media (max-width: 900px) {
  .lg-grille { grid-template-columns: 1fr; }                         /* 1 */
}

.lg-carte {
  background: var(--lg-carte);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.lg-carte:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.lg-carte-haut { display: flex; gap: 14px; align-items: center; padding: 18px 18px 0; }
.lg-carte h2 { margin: 0; font-size: 20px; color: var(--lg-gris); }
.lg-categorie { font-size: 13px; color: var(--lg-doux); }
.lg-carte p { padding: 0 18px; margin: 14px 0; line-height: 1.5; font-size: 15px; flex: 1; }

.lg-icone, .lg-icone-grande {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; overflow: hidden;
}
.lg-icone       { width: 56px; height: 56px; border-radius: 12px; font-size: 22px; }
.lg-icone-grande{ width: 96px; height: 96px; border-radius: 18px; font-size: 36px; }
.lg-icone img, .lg-icone-grande img { width: 100%; height: 100%; object-fit: contain; }

.lg-points { padding: 0 18px; margin: 0 0 16px; font-size: 14px; color: var(--lg-doux); }
.lg-points li { padding: 3px 0 3px 16px; position: relative; }
.lg-points li::before { content: "›"; position: absolute; left: 2px; color: var(--lg-orange); font-weight: bold; }

.lg-carte-bas {
  border-top: 1px solid #d6d6d6; padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.lg-statut  { font-size: 12px; padding: 4px 10px; border-radius: 12px; white-space: nowrap; }
.lg-licence { font-size: 13px; color: var(--lg-doux); text-align: center; }
.lg-carte-bas a { font-size: 14px; font-weight: bold; white-space: nowrap; }

/* =========================================================
   FICHE
   ========================================================= */

.lg-entete {
  background: var(--lg-carte); border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  padding: 24px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap;
}
.lg-entete-texte { flex: 1; min-width: 240px; }
.lg-entete h1 { margin: 0 0 4px; font-size: 32px; color: var(--lg-gris); }
.lg-page .lg-accroche { margin: 0 0 12px; color: var(--lg-doux); line-height: 1.5; font-size: 16px; }
.lg-etiquettes { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-etiquettes span { font-size: 12px; padding: 4px 10px; border-radius: 12px; background: #e0e0e0; }
.lg-etiquettes span.lg-s-dispo { background: var(--lg-vert); }
.lg-etiquettes span.lg-s-test  { background: var(--lg-ocre); }
.lg-etiquettes span.lg-s-dev   { background: #7b7b7b; }

.lg-telecharger { text-align: center; }
.lg-page a.lg-btn, .lg-btn {
  display: inline-block; font-family: inherit; font-weight: bold; font-size: 16px;
  padding: 12px 26px; border-radius: 4px;
  background: var(--lg-orange); color: #fff;
}
.lg-page a.lg-btn:hover { background: #d4461c; color: #fff; }
.lg-btn.inactif { background: #a8a8a8; cursor: default; }
.lg-telecharger small { display: block; margin-top: 6px; font-size: 12px; color: var(--lg-doux); }

.lg-colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; margin-top: 20px; }
.lg-bloc { background: var(--lg-carte); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.12); padding: 20px; }
.lg-bloc + .lg-bloc { margin-top: 20px; }
.lg-bloc h2 {
  margin: 0 0 14px; font-size: 19px; color: var(--lg-gris);
  padding-bottom: 6px; border-bottom: 2px solid var(--lg-orange); display: inline-block;
}
.lg-bloc p { line-height: 1.6; font-size: 15px; margin: 0 0 12px; }

.lg-fonctions { margin: 0; font-size: 15px; }
.lg-fonctions li { padding: 5px 0 5px 20px; position: relative; line-height: 1.5; }
.lg-fonctions li::before { content: "›"; position: absolute; left: 4px; color: var(--lg-orange); font-weight: bold; }

.lg-captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lg-captures figure { margin: 0; }
.lg-captures img, .lg-capture-vide {
  width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 4px;
  background: #d2d2d2; cursor: zoom-in; display: block;
}
.lg-captures figcaption { font-size: 12px; color: var(--lg-doux); margin-top: 4px; text-align: center; }
.lg-capture-vide { display: flex; align-items: center; justify-content: center; color: #8a8a8a; font-size: 13px; cursor: default; }

.lg-tech { width: 100%; border-collapse: collapse; font-size: 14px; }
.lg-tech td { padding: 7px 0; border-bottom: 1px solid #dcdcdc; vertical-align: top; }
.lg-tech td:first-child { color: var(--lg-doux); width: 60%; }

.lg-version { margin-bottom: 14px; font-size: 14px; }
.lg-version b { color: var(--lg-bleu); }
.lg-version ul { margin: 4px 0 0; padding-left: 4px; line-height: 1.5; }
.lg-version li::before { content: "- "; color: var(--lg-orange); }

.lg-retour { display: inline-block; margin-top: 24px; font-weight: bold; }

#lg-zoom {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.85);
  align-items: center; justify-content: center; cursor: zoom-out; z-index: 2000;
}
#lg-zoom img { max-width: 92vw; max-height: 92vh; border-radius: 4px; }

/* ---------- Petits écrans (même seuil que le menu burger) ---------- */
@media (max-width: 1100px) {
  .lg-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .lg-grille { grid-template-columns: 1fr; }
}

/* --- liste vide : écran « Bientôt disponibles » --- */
.lg-bientot {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center;
  background: linear-gradient(135deg, #585858 0%, #474747 100%); color: #fff;
  border-radius: 12px; padding: 40px 46px; box-shadow: 0 2px 10px rgba(0,0,0,.18); margin-bottom: 24px;
}
.lg-bientot small { color: var(--lg-orange); font-weight: bold; letter-spacing: 1px; font-size: 13px; }
.lg-bientot h1 { font-size: 38px; margin: 6px 0 12px; color: #fff; }
.lg-page .lg-bientot p { color: #e2e2e2; font-size: 16px; line-height: 1.7; max-width: 640px; }
.lg-etapes { display: flex; gap: 10px; margin: 26px 0; padding: 0; list-style: none; counter-reset: etape; flex-wrap: wrap; }
.lg-etapes li {
  flex: 1; min-width: 150px; position: relative; padding: 12px 14px 12px 50px;
  background: rgba(255,255,255,.08); border-radius: 8px; counter-increment: etape;
}
.lg-etapes li::before {
  content: counter(etape); position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: #7b7b7b; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px;
}
.lg-etapes li.fait::before    { content: "✓"; background: var(--lg-vert); }
.lg-etapes li.encours          { background: rgba(241,89,42,.18); box-shadow: inset 0 0 0 1px rgba(241,89,42,.6); }
.lg-etapes li.encours::before  { background: var(--lg-orange); animation: lg-pulse 1.6s infinite; }
.lg-etapes b    { display: block; font-size: 15px; }
.lg-etapes span { display: block; font-size: 12px; color: #c8c8c8; }
@keyframes lg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,89,42,.6); } 50% { box-shadow: 0 0 0 7px rgba(241,89,42,0); } }
.lg-bientot-boutons { display: flex; gap: 10px; flex-wrap: wrap; }
.lg-page a.lg-btn-vide { background: transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); color: #fff; }
.lg-page a.lg-btn-vide:hover { background: rgba(255,255,255,.12); color: #fff; }

/* petite fenêtre « compilation en cours » */
.lg-fenetre { background: #2b2b2b; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.lg-fenetre-barre { background: #3c3c3c; padding: 10px 12px; display: flex; gap: 6px; }
.lg-fenetre-barre i { width: 11px; height: 11px; border-radius: 50%; background: #d81b21; }
.lg-fenetre-barre i:nth-child(2) { background: #f78d1d; }
.lg-fenetre-barre i:nth-child(3) { background: #64991e; }
.lg-fenetre-corps { padding: 40px 30px; text-align: center; }
.lg-chargement { height: 10px; background: #444; border-radius: 5px; overflow: hidden; margin-bottom: 16px; }
.lg-chargement span {
  display: block; height: 100%; width: 40%; border-radius: 5px;
  background: linear-gradient(90deg, var(--lg-orange), #f78d1d);
  animation: lg-charge 2.4s ease-in-out infinite;
}
@keyframes lg-charge { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.lg-fenetre code { font-family: Consolas, "Courier New", monospace; color: #9fd36b; font-size: 15px; }

.lg-statut.lg-masque { background: #585858; color: #fff; }
.lg-page .lg-note-admin { background: #fff2dc; border-left: 4px solid var(--lg-ocre); border-radius: 6px; padding: 10px 14px; margin-bottom: 20px; font-size: 14px; }

@media (max-width: 1000px) {
  .lg-bientot { grid-template-columns: 1fr; padding: 30px 24px; }
  .lg-bientot-visuel { display: none; }
}

/* accueil : carte « les logiciels arrivent bientôt » (prend toute la largeur de « À la une ») */
.acc-app.acc-bientot { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; }
.acc-bientot-ico {
  width: 64px; height: 64px; border-radius: 50%; background: var(--orange); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.acc-bientot-ico svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.acc-bientot h3 { margin-bottom: 6px; }
.acc-bientot a { color: var(--bleu); font-size: 14px; font-weight: bold; }
.acc-bientot a:hover { color: var(--orange); }

/* ######################################################################
   6. PAGE INSCRIPTION  -  classes ins-   (version compacte)
   ###################################################################### */

/* Les champs des formulaires de ces pages incluent leur padding dans leur largeur */
.ins-page *, .don-page *, .ct-page * { box-sizing: border-box; }

.ins-page {
  width: 100%; padding: 0 0 15px;   /* toute la largeur ; le padding de 15px vient de .content-bar */
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 0;
  align-items: stretch;
}

/* --- Colonne de gauche : pourquoi créer un compte --- */
.ins-info {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #585858 0%, #474747 60%, #3a3a3a 100%);
  color: #f0f0f0; border-radius: 14px 0 0 14px; padding: 28px 32px;
}
.ins-info::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ins-info > * { position: relative; z-index: 1; }
.ins-info small { color: var(--orange); font-size: 14px; font-weight: bold; letter-spacing: 1px; }
.ins-info h2 { font-size: 26px; line-height: 1.2; margin: 6px 0 10px; }
.ins-info > p { color: #cfcfcf; font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.ins-avantages li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ins-avantages .pic {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--c);
}
.ins-avantages svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-avantages b { display: block; font-size: 17px; margin-bottom: 2px; }
.ins-avantages span { font-size: 14px; color: #c4c4c4; line-height: 1.45; }
.ins-gratuit {
  margin-top: 6px; padding: 10px 16px;
  border-top-right-radius: 8px;    /* Coin haut-droite */
  border-bottom-right-radius: 8px; /* Coin bas-droite */
  background: rgba(255,255,255,.07); border-left: 4px solid var(--vert);
  font-size: 14px; color: #dcdcdc; line-height: 1.5;
}

/* --- Colonne de droite : le formulaire --- */
.ins-form {
  background: var(--carte); border-radius: 0 14px 14px 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 24px 32px;
}
.ins-form h1 { font-size: 26px; color: var(--gris); }
.ins-sous { font-size: 15px; color: var(--doux); margin: 2px 0 14px; }
.ins-sous a { color: var(--bleu); font-weight: bold; }
.ins-sous a:hover { color: var(--orange); }

.ins-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ins-champ { margin-bottom: 10px; position: relative; }
.ins-champ label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.ins-champ label i { font-style: normal; font-weight: normal; color: #9a9a9a; }
.ins-champ input {
  width: 100%; height: 40px; padding: 0 14px;
  font-family: inherit; font-size: 16px; color: var(--texte);
  background: #fff; border: 1px solid #cfcfcf; border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.ins-champ input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,89,42,.15); }
.ins-champ.erreur input { border-color: var(--rouge); }
.ins-champ.ok input { border-color: var(--vert); }
.ins-aide { display: block; font-size: 13px; color: #8a8a8a; margin-top: 4px; }
.ins-aide:empty { display: none; }   /* pas de ligne vide sous un champ sans message */
.ins-champ.erreur .ins-aide { color: var(--rouge); }

/* œil du mot de passe : centré dans le champ (label ≈ 22 px + champ 40 px) */
.ins-oeil {
  position: absolute; right: 6px; top: 25px; width: 34px; height: 34px;
  border: none; background: none; cursor: pointer; color: #8a8a8a;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.ins-oeil:hover { color: var(--orange); background: #f4f4f4; }
.ins-oeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* jauge de solidité du mot de passe */
.ins-jauge { display: flex; gap: 5px; margin-top: 6px; }
.ins-jauge i { flex: 1; height: 5px; border-radius: 3px; background: #dadada; transition: background .2s; }

.ins-case { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--texte); margin: 4px 0 8px; cursor: pointer; line-height: 1.4; }
.ins-case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); flex-shrink: 0; }
.ins-case a { color: var(--bleu); }

.ins-envoyer {
  width: 100%; height: 46px; margin-top: 8px; border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: bold; color: #fff; background: var(--orange);
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s;
}
.ins-envoyer:hover { background: #d4461c; }
.ins-envoyer svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-message { margin-top: 10px; font-size: 15px; text-align: center; }
.ins-message:empty { display: none; }
.ins-message.ok { color: var(--vert); font-weight: bold; }
.ins-message.ko { color: var(--rouge); }

/* --- Petits écrans --- */
@media (max-width: 860px) {
  .ins-page { grid-template-columns: 1fr; }
  .ins-info { border-radius: 14px 14px 0 0; padding: 24px 22px; }
  .ins-form { border-radius: 0 0 14px 14px; padding: 24px 22px; }
}
@media (max-width: 520px) {
  .ins-ligne { grid-template-columns: 1fr; gap: 0; }
}



/* --- inscription : champ piège, écran « vérifiez votre boîte », activation --- */
.ins-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ins-envoye, .ins-activation { text-align: center; }
.ins-activation {
  max-width: 620px; margin: 30px auto; background: var(--carte); border-radius: 12px;
  padding: 34px 40px; box-shadow: 0 2px 8px rgba(0,0,0,.14); color: var(--texte);
}
.ins-envoye h1, .ins-activation h1 { font-size: 24px; color: var(--gris); margin: 14px 0 10px; }
.ins-envoye p, .ins-activation p { font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.ins-petit { font-size: 13px; color: var(--doux); }
.ins-envoye-ico {
  width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
}
.ins-envoye-ico svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-ico-ok { background: var(--vert); }
.ins-ico-ko { background: var(--ocre); }
.ins-renvoyer {
  margin-top: 12px; padding: 10px 18px; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff;
  color: var(--texte); font-size: 14px; cursor: pointer; font-family: inherit;
}
.ins-renvoyer:hover { border-color: var(--orange); color: var(--orange); }
a.ins-bouton { display: inline-flex; width: auto; padding: 0 34px; margin-top: 10px; text-decoration: none; color: #fff; }
.ins-renvoi { margin-top: 18px; padding-top: 16px; border-top: 1px solid #dadada; }
.ins-renvoi label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 8px; }
.ins-renvoi div { display: flex; gap: 8px; justify-content: center; }
.ins-renvoi input { flex: 1; max-width: 320px; height: 40px; padding: 0 12px; border: 1px solid #c8c8c8; border-radius: 6px; font-size: 15px; box-sizing: border-box; }
.ins-renvoi .ins-renvoyer { margin-top: 0; }

/* --- mot de passe oublié (?page=inscription&data=oubli) --- */
.ins-oub-form { text-align: left; max-width: 360px; margin: 20px auto 0; }
.ins-oub-form .ins-champ input { box-sizing: border-box; }
.ins-oub-form .ins-envoyer { width: 100%; margin-top: 8px; }
.ins-oub-erreur { color: var(--rouge); font-weight: bold; }
.ins-activation .ins-petit a { color: var(--bleu); font-weight: bold; }
/* lien « Mot de passe oublié ? » de la fenêtre de connexion */
.lg-oubli { float: right; font-size: 14px; color: var(--bleu); line-height: 24px; }
.lg-oubli:hover { text-decoration: underline; }

/* ######################################################################
   6 bis. PAGE MON COMPTE  -  classes cp-   (?page=compte)
   ###################################################################### */

.cp-page { width: 100%; padding: 0 0 25px; color: var(--texte); }
.cp-page a { color: var(--bleu); }
.cp-page a:hover { color: var(--orange); }

.cp-tete {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, #585858 0%, #474747 100%); color: #fff;
  border-radius: 12px; padding: 26px 32px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.16);
}
.cp-avatar {
  width: 78px; height: 78px; border-radius: 50%; background: var(--orange); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: bold; color: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.15);
}
.cp-tete-texte { flex: 1; min-width: 220px; }
.cp-tete h1 { font-size: 26px; color: #fff; margin-bottom: 2px; }
.cp-tete p  { color: #d8d8d8; font-size: 15px; margin-bottom: 8px; }
.cp-profils { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-profils span { font-size: 12px; padding: 3px 10px; border-radius: 12px; color: #fff; }
.cp-profils .cp-client { background: var(--vert); }
.cp-raccourcis { display: flex; flex-direction: column; gap: 8px; }
.cp-page .cp-raccourcis a {
  padding: 8px 16px; border-radius: 6px; background: rgba(255,255,255,.1); color: #fff; font-weight: bold; font-size: 14px;
}
.cp-page .cp-raccourcis a:hover { background: rgba(255,255,255,.2); color: #fff; }

.cp-message { background: #e6f2d8; border-left: 5px solid var(--vert); border-radius: 8px; padding: 12px 18px; margin-bottom: 18px; color: #3d6310; font-weight: bold; }
.cp-alerte  { background: #fff2dc; border-left: 5px solid var(--ocre); border-radius: 8px; padding: 12px 18px; margin-bottom: 18px; font-weight: bold; }
.cp-erreurs { background: #fbe3e0; border-left: 4px solid var(--rouge); border-radius: 6px; padding: 10px 16px; margin-bottom: 14px; color: #8a1c14; font-size: 14px; }
.cp-erreurs li { padding: 2px 0; }

.cp-colonnes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cp-bloc { background: var(--carte); border-radius: 10px; padding: 22px 26px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.cp-bloc + .cp-bloc { margin-top: 20px; }
.cp-bloc h2 {
  font-size: 18px; color: var(--gris); display: inline-block;
  padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 16px;
}
.cp-bloc.cp-a-faire { box-shadow: 0 0 0 2px var(--ocre), 0 2px 6px rgba(0,0,0,.12); }

.cp-champ { margin-bottom: 12px; }
.cp-champ label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.cp-champ label small { font-weight: normal; color: var(--doux); }
.cp-champ > small { display: block; font-size: 12px; color: var(--doux); margin-top: 4px; }
.cp-champ-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-page input[type=text], .cp-page input[type=email], .cp-page input[type=url], .cp-page input[type=password] {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; font-size: 15px;
  border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; color: var(--texte); font-family: inherit;
}
.cp-page input:disabled { background: #e8e8e8; color: var(--doux); }
.cp-page input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15); }
.cp-case { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0 16px; cursor: pointer; }
.cp-jauge { display: flex; gap: 4px; margin-top: 6px; }
.cp-jauge i { flex: 1; height: 5px; border-radius: 3px; background: #dadada; }

.cp-bouton {
  height: 42px; padding: 0 22px; border: none; border-radius: 6px; background: var(--vert); color: #fff;
  font-size: 15px; font-weight: bold; cursor: pointer; font-family: inherit;
}
.cp-bouton:hover { background: #507d16; }
.cp-bouton.cp-rouge { background: var(--rouge); }
.cp-bouton.cp-rouge:hover { background: #a3221a; }

.cp-danger { border-left: 4px solid var(--rouge); }
.cp-danger summary { cursor: pointer; list-style: none; }
.cp-danger summary::-webkit-details-marker { display: none; }
.cp-danger summary h2 { border-bottom-color: var(--rouge); margin-bottom: 0; }
.cp-danger summary h2::after { content: " ›"; color: var(--doux); }
.cp-danger details[open] summary h2 { margin-bottom: 12px; }
.cp-note { font-size: 13px; color: var(--doux); margin-bottom: 12px; line-height: 1.5; }

@media (max-width: 1000px) {
  .cp-colonnes { grid-template-columns: minmax(0, 1fr); }
  .cp-champ-2  { grid-template-columns: 1fr; }
}

/* ######################################################################
   7. PAGE DONATION  -  classes don-
   ###################################################################### */

/* =========================================================
   PAGE DONATION (classes "don-")
   ========================================================= */
.don-page { width: 100%; padding: 0 0 25px; }   /* toute la largeur ; le padding de 15px vient de .content-bar */

/* --- Accroche --- */
.don-hero {
  position: relative; overflow: hidden; border-radius: 14px; color: #f0f0f0;
  background: linear-gradient(135deg, #585858 0%, #474747 60%, #3a3a3a 100%);
  padding: 26px 44px; display: flex; align-items: center; gap: 40px;
}
.don-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.don-hero > * { position: relative; z-index: 1; }
.don-hero-texte { flex: 1; }
.don-hero small { color: var(--orange); font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.don-hero h1 { font-size: 26px; line-height: 1.15; margin: 8px 0 14px; }   /* même taille que .acc-hero h1 */
.don-hero h1 span { color: var(--orange); }
.don-hero p { color: #d0d0d0; font-size: 17px; line-height: 1.6; max-width: 1000px; }
.don-coeur {
  width: 110px; height: 110px; flex-shrink: 0; border-radius: 50%;
  background: rgba(241,89,42,.15); border: 2px solid rgba(241,89,42,.5);
  display: flex; align-items: center; justify-content: center;
}
.don-coeur svg { width: 44px; height: 44px; fill: var(--orange); }

/* --- Deux colonnes --- */
.don-grille { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; margin-top: 24px; align-items: start; }
.don-bloc { background: var(--carte); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 28px 30px; }
.don-bloc h2 { font-size: 22px; color: var(--gris); display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--orange); margin-bottom: 18px; }

/* choix unique / mensuel */
.don-type { display: flex; background: #e2e2e2; border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.don-type button {
  flex: 1; height: 42px; border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: bold; color: var(--doux); background: none;
}
.don-type button.on { background: #fff; color: var(--orange); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

/* montants */
.don-montants { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.don-montants button {
  height: 58px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 22px; font-weight: bold; color: var(--gris);
  background: #fff; border: 2px solid #d6d6d6; transition: border-color .15s, color .15s, background .15s;
}
.don-montants button:hover { border-color: var(--orange); color: var(--orange); }
.don-montants button.on { border-color: var(--orange); background: var(--orange); color: #fff; }
.don-libre { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.don-libre label { font-size: 15px; color: var(--doux); white-space: nowrap; }
.don-libre div { position: relative; flex: 1; }
.don-libre input {
  width: 100%; height: 46px; padding: 0 40px 0 14px; border-radius: 10px;
  border: 2px solid #d6d6d6; font-family: inherit; font-size: 18px; color: var(--texte); background: #fff;
}
.don-libre input:focus { outline: none; border-color: var(--orange); }
.don-libre span { position: absolute; right: 14px; top: 11px; font-size: 18px; color: var(--doux); }

.don-champ { margin-top: 18px; }
.don-champ label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 6px; }
.don-champ label i { font-style: normal; font-weight: normal; color: #9a9a9a; }
.don-champ input, .don-champ textarea {
  width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid #cfcfcf; background: #fff;
  font-family: inherit; font-size: 16px; color: var(--texte); resize: vertical;
}
.don-champ input:focus, .don-champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,89,42,.15); }
.don-case { display: flex; gap: 10px; align-items: center; font-size: 15px; margin-top: 12px; cursor: pointer; }
.don-case input { width: 18px; height: 18px; accent-color: var(--orange); }

.don-recap {
  margin-top: 22px; padding: 14px 16px; border-radius: 10px; background: #fff;
  display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: var(--doux);
}
.don-recap b { font-size: 26px; color: var(--orange); }
.don-payer { display: grid; grid-template-columns: 1fr; margin-top: 14px; }
.don-payer button {
  height: 52px; border: none; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: bold; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px; transition: filter .15s;
}
.don-payer button:hover { filter: brightness(.9); }
.don-payer svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.don-paypal { background: #0070ba; }       /* bleu PayPal */
.don-paypal b { font-weight: bold; }

/* --- Retour de PayPal : remerciement / annulation --- */
.don-retour {
  display: none; margin-bottom: 15px; border-radius: 12px; padding: 22px 26px;
  align-items: center; gap: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.don-retour.visible { display: flex; }
.don-retour .pic { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.don-retour svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.don-retour b { display: block; font-size: 20px; margin-bottom: 4px; }
.don-retour span { font-size: 15px; line-height: 1.5; }
.don-retour small { display: block; margin-top: 6px; font-size: 13px; opacity: .8; }
.don-retour.merci  { background: #eef6e4; color: #3b5e10; border-left: 6px solid var(--vert); }
.don-retour.merci .pic { background: var(--vert); }
.don-retour.annule { background: #fdf0e6; color: #8a4a12; border-left: 6px solid var(--ocre); }
.don-retour.annule .pic { background: var(--ocre); }
/* états de la vérification du paiement */
.don-retour.verif   { background: #e8f3fa; color: #0b5a80; border-left: 6px solid var(--bleu); }
.don-retour.verif .pic { background: var(--bleu); }
.don-retour.verif .pic svg { animation: tourne 1s linear infinite; }
.don-retour.attente { background: #fdf0e6; color: #8a4a12; border-left: 6px solid var(--ocre); }
.don-retour.attente .pic { background: var(--ocre); }
.don-retour.erreur  { background: #fbe9ea; color: #8e1d22; border-left: 6px solid var(--rouge); }
.don-retour.erreur .pic { background: var(--rouge); }
@keyframes tourne { to { transform: rotate(360deg); } }
.don-securite { margin-top: 12px; font-size: 13px; color: #8a8a8a; text-align: center; }
.don-message { margin-top: 12px; text-align: center; font-size: 15px; min-height: 20px; }
.don-message.ok { color: var(--vert); font-weight: bold; }
.don-message.ko { color: var(--rouge); }

/* à quoi sert le don */
.don-usage li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.don-usage .pic { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--c); }
.don-usage svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.don-usage b { display: block; font-size: 17px; color: var(--gris); }
.don-usage span { font-size: 14px; color: var(--doux); line-height: 1.45; }

/* objectif */
.don-objectif { margin-top: 6px; padding-top: 18px; border-top: 1px solid #dadada; }
.don-objectif-tete { display: flex; justify-content: space-between; font-size: 15px; color: var(--doux); margin-bottom: 8px; }
.don-objectif-tete b { color: var(--gris); }
.don-barre { height: 12px; border-radius: 6px; background: #dcdcdc; overflow: hidden; }
.don-barre i { display: block; height: 100%; width: 62%; border-radius: 6px; background: linear-gradient(90deg, #f78d1d, #f1592a); }

/* autres façons d'aider */
.don-aider { margin-top: 24px; }
.don-aider-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.don-aider-grille div { background: #e9e9e9; border-top-right-radius: 15px; border-bottom-right-radius: 15px; padding: 18px; border-left: 4px solid var(--c); }
.don-aider-grille b { display: block; font-size: 17px; color: var(--gris); margin-bottom: 4px; }
.don-aider-grille span { font-size: 14px; color: var(--doux); line-height: 1.45; }
.don-aider-grille a { color: var(--bleu); font-weight: bold; }

@media (max-width: 900px)  { .don-grille, .don-aider-grille { grid-template-columns: 1fr; } }
@media (max-width: 520px)  {
  .don-hero { padding: 22px 22px; } .don-hero h1 { font-size: 26px; }
  .don-montants { grid-template-columns: repeat(3, 1fr); }
  
}
@media (max-width: 1100px) { .don-coeur { display: none; } }


/* ######################################################################
   8. PAGE CONTACT  -  classes ct-
   ###################################################################### */

/* =========================================================
   PAGE CONTACT (classes "ct-")
   ========================================================= */
.ct-page {
  width: 100%; padding: 0 0 25px;   /* toute la largeur ; le padding de 15px vient de .content-bar */
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start;
}
.ct-bloc { background: var(--carte); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.12); padding: 30px 34px; }
.ct-bloc h1 { font-size: 30px; color: var(--gris); }
.ct-sous { font-size: 16px; color: var(--doux); margin: 4px 0 22px; line-height: 1.5; }

/* choix du sujet en tuiles */
.ct-sujets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.ct-sujets button {
  border: 2px solid #d6d6d6; background: #fff; border-radius: 10px; cursor: pointer;
  padding: 14px 8px; font-family: inherit; font-size: 15px; font-weight: bold; color: var(--gris);
  display: flex; flex-direction: column; align-items: center; gap: 8px; transition: border-color .15s, color .15s;
}
.ct-sujets button:hover { border-color: var(--c); color: var(--c); }
.ct-sujets button.on { border-color: var(--c); background: var(--c); color: #fff; }
.ct-sujets svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ct-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-champ { margin-bottom: 10px; }
.ct-champ label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 6px; }
.ct-champ label i { font-style: normal; font-weight: normal; color: #9a9a9a; }
.ct-champ input, .ct-champ select, .ct-champ textarea {
  width: 100%; padding: 11px 14px; border-radius: 8px; border: 1px solid #cfcfcf; background: #fff;
  font-family: inherit; font-size: 16px; color: var(--texte);
}
.ct-champ input, .ct-champ select { height: 44px; padding-top: 0; padding-bottom: 0; }
.ct-champ textarea { resize: vertical; min-height: 150px; line-height: 1.5; }
.ct-champ input:focus, .ct-champ select:focus, .ct-champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,89,42,.15); }
.ct-champ.erreur input, .ct-champ.erreur textarea { border-color: var(--rouge); }
.ct-aide { display: flex; justify-content: space-between; font-size: 13px; color: #8a8a8a; margin-top: 4px; }
.ct-aide:empty { display: none; }   /* pas de ligne vide sous un champ sans message */
.ct-champ.erreur .ct-aide { color: var(--rouge); }
.ct-bug { display: none; }
.ct-bug.visible { display: grid; }

.ct-case { display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; margin-bottom: 6px; }
.ct-case input { width: 18px; height: 18px; accent-color: var(--orange); }
.ct-envoyer {
  margin-top: 14px; height: 50px; padding: 0 34px; border: none; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 18px; font-weight: bold; color: #fff; background: var(--orange);
  display: inline-flex; align-items: center; gap: 10px; transition: background .15s;
}
.ct-envoyer:hover { background: #d4461c; }
.ct-envoyer svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-message { margin-top: 14px; font-size: 15px; }
.ct-message:empty { display: none; }   /* ne prend aucune place tant qu'il n'y a pas de message */
.ct-message.ok { color: var(--vert); font-weight: bold; }
.ct-message.ko { color: var(--rouge); }

/* colonne de droite */
.ct-info {
  position: relative; overflow: hidden; border-radius: 12px; color: #f0f0f0; padding: 30px 30px;
  background: linear-gradient(135deg, #585858 0%, #474747 60%, #3a3a3a 100%);
}
.ct-info::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
}
.ct-info > * { position: relative; z-index: 1; }
.ct-info h2 { font-size: 22px; margin-bottom: 16px; }
.ct-info li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.ct-info .pic { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--c); }
.ct-info svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-info b { display: block; font-size: 16px; }
.ct-info span { font-size: 14px; color: #c8c8c8; line-height: 1.45; }

.ct-faq { margin-top: 24px; }
.ct-faq h2 { font-size: 20px; color: var(--gris); display: inline-block; padding-bottom: 6px; border-bottom: 3px solid var(--orange); margin-bottom: 10px; }
.ct-faq details { border-bottom: 1px solid #dadada; padding: 12px 0; }
.ct-faq details:last-child { border-bottom: none; }
.ct-faq summary { cursor: pointer; font-size: 16px; font-weight: bold; color: var(--gris); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.ct-faq summary::-webkit-details-marker { display: none; }
.ct-faq summary::after { content: "+"; color: var(--orange); font-size: 20px; line-height: 1; }
.ct-faq details[open] summary::after { content: "−"; }
.ct-faq details p { font-size: 15px; color: var(--doux); line-height: 1.55; margin-top: 8px; }
.ct-faq a { color: var(--bleu); font-weight: bold; }

@media (max-width: 900px)  { .ct-page { grid-template-columns: 1fr; } }
@media (max-width: 620px)  {
  .ct-sujets { grid-template-columns: repeat(2, 1fr); }
  .ct-ligne { grid-template-columns: 1fr; gap: 0; }
  .ct-bloc { padding: 24px 20px; }
  
}

/* ######################################################################
   9. PAGES NOUVELLES  -  classes nw-   (liste + détail)
   ###################################################################### */

.nw-page { width: 100%; padding: 0 0 25px; color: var(--texte); }
.nw-page a { color: var(--bleu); }
.nw-page a:hover { color: var(--orange); }

.nw-fil { font-size: 14px; color: var(--doux); margin-bottom: 14px; }

/* catégorie + date */
.nw-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nw-meta time { font-size: 14px; font-weight: bold; color: var(--orange); }
.nw-cat { font-size: 12px; padding: 3px 10px; border-radius: 12px; color: #fff; white-space: nowrap; }
.nw-c-version  { background: var(--vert); }
.nw-c-site     { background: var(--bleu); }
.nw-c-logiciel { background: var(--ocre); }
.nw-c-info     { background: #7b7b7b; }

/* =========================================================
   LISTE
   ========================================================= */
.nw-titre { font-size: 26px; color: var(--gris); margin-bottom: 4px; }
.nw-intro { font-size: 16px; color: var(--doux); line-height: 1.6; margin-bottom: 20px; }
.nw-vide  { font-size: 15px; color: var(--doux); }

.nw-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.nw-page a.nw-carte {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--carte); border-radius: 10px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); color: var(--texte);
  border-top: 4px solid var(--orange);
  transition: transform .15s, box-shadow .15s;
}
.nw-page a.nw-carte:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); color: var(--texte); }
.nw-carte h2 { font-size: 20px; color: var(--gris); }
.nw-carte p  { font-size: 15px; line-height: 1.5; color: var(--doux); flex: 1; }
.nw-lire     { font-size: 14px; font-weight: bold; color: var(--bleu); }
.nw-carte:hover .nw-lire { color: var(--orange); }

/* =========================================================
   DÉTAIL
   ========================================================= */
.nw-colonnes { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }

.nw-article {
  background: var(--carte); border-radius: 10px; padding: 28px 32px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.nw-article h1 { font-size: 26px; color: var(--gris); line-height: 1.2; margin: 12px 0 8px; }
.nw-chapo {
  font-size: 17px; color: var(--doux); line-height: 1.6;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid var(--orange);
}
.nw-image { display: block; max-width: 100%; border-radius: 8px; margin-bottom: 18px; }

/* le texte de la nouvelle */
.nw-texte { font-size: 16px; line-height: 1.7; }
.nw-texte p  { margin: 0 0 14px; }
.nw-texte h3 { font-size: 19px; color: var(--gris); margin: 20px 0 8px; }
.nw-texte ul { margin: 0 0 14px; }
.nw-texte li { position: relative; padding: 3px 0 3px 20px; }
.nw-texte li::before { content: "›"; position: absolute; left: 4px; color: var(--orange); font-weight: bold; }

/* plus ancienne / plus récente */
.nw-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid #d6d6d6;
}
.nw-nav a { display: flex; flex-direction: column; gap: 2px; max-width: 48%; font-size: 15px; font-weight: bold; }
.nw-nav a small { font-size: 13px; font-weight: normal; color: var(--doux); }
.nw-nav .nw-suiv { text-align: right; margin-left: auto; }

/* colonne de droite */
.nw-bloc {
  background: var(--carte); border-radius: 10px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.nw-bloc + .nw-bloc { margin-top: 20px; }
.nw-bloc h2 {
  font-size: 18px; color: var(--gris); display: inline-block;
  padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 14px;
}
.nw-page a.nw-app { display: flex; gap: 12px; align-items: center; color: var(--texte); margin-bottom: 12px; }
.nw-app-ico {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 19px;
}
.nw-app-ico img { width: 100%; height: 100%; object-fit: contain; }
.nw-app b { display: block; font-size: 17px; color: var(--gris); }
.nw-app small { display: block; font-size: 13px; color: var(--doux); line-height: 1.4; }
.nw-lien { font-size: 14px; font-weight: bold; }

.nw-autres li { padding: 10px 0; border-bottom: 1px solid #dadada; }
.nw-autres li:last-child { border-bottom: none; margin-bottom: 8px; }
.nw-autres time { display: block; font-size: 13px; color: var(--orange); font-weight: bold; }
.nw-autres a { font-size: 15px; font-weight: bold; }

.nw-retour { display: inline-block; margin-top: 20px; font-weight: bold; }

/* ---------- Petits écrans ---------- */
@media (max-width: 1100px) {
  .nw-liste    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nw-colonnes { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .nw-liste   { grid-template-columns: 1fr; }
  .nw-article { padding: 22px 20px; }
  .nw-nav     { flex-direction: column; }
  .nw-nav a   { max-width: 100%; }
}

/* nouvelles : boutons de l'administrateur et états */
.nw-page a.nw-admin {
  float: right; padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: bold;
  background: var(--orange); color: #fff;
}
.nw-page a.nw-admin:hover { background: #d4461c; color: #fff; }
.nw-etat { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #585858; color: #fff; }
.nw-etat.nw-programmee { background: var(--bleu); }

/* ######################################################################
   10. PAGES DÉVELOPPEMENT  -  classes dv-   (catégories, liste, source)
   ###################################################################### */

.dv-page { width: 100%; padding: 0 0 25px; color: var(--texte); }
.dv-page a { color: var(--bleu); }
.dv-page a:hover { color: var(--orange); }

.dv-fil  { font-size: 14px; color: var(--doux); margin-bottom: 14px; }
.dv-vide { font-size: 15px; color: var(--doux); padding: 10px 0; }

/* blocs blancs communs */
.dv-bloc {
  background: var(--carte); border-radius: 10px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dv-bloc + .dv-bloc { margin-top: 20px; }
.dv-bloc h2 {
  font-size: 18px; color: var(--gris); display: inline-block;
  padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 14px;
}

/* icônes de catégorie / logiciel (initiales sur fond de couleur, ou image) */
.dv-ico {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 18px;
}
.dv-ico img      { width: 100%; height: 100%; object-fit: contain; }
.dv-ico-petit    { width: 36px; height: 36px; border-radius: 8px; font-size: 14px; }
.dv-ico-grand    { width: 64px; height: 64px; border-radius: 14px; font-size: 24px; }

/* badges */
.dv-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-meta time { font-size: 14px; font-weight: bold; color: var(--orange); }
.dv-niveau, .dv-langage {
  font-size: 12px; padding: 3px 10px; border-radius: 12px; white-space: nowrap;
}
.dv-niveau             { color: #fff; }
.dv-n-debutant         { background: var(--vert); }
.dv-n-intermediaire    { background: var(--ocre); }
.dv-n-avance           { background: var(--rouge); }
.dv-langage            { background: #d9d9d9; color: var(--gris); }

/* =========================================================
   CATÉGORIES  (?page=programm)
   ========================================================= */
.dv-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  background: var(--gris); color: #fff; border-radius: 10px;
  padding: 26px 34px; margin-bottom: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.dv-hero h1 { font-size: 28px; margin-bottom: 6px; }
.dv-hero p  { font-size: 16px; line-height: 1.6; color: #e4e4e4; max-width: 900px; }
.dv-chiffres { display: flex; gap: 12px; flex-shrink: 0; }
.dv-chiffres li {
  background: rgba(255,255,255,.1); border-radius: 8px; padding: 10px 18px;
  text-align: center; font-size: 13px; color: #ddd; min-width: 90px;
}
.dv-chiffres b { display: block; font-size: 26px; color: var(--orange); }

.dv-categories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.dv-page a.dv-carte-cat {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--carte);
  border-radius: 0 0 15px 15px;
  padding: 20px 22px;
  border-top: 4px solid var(--orange); box-shadow: 0 2px 6px rgba(0,0,0,.12);
  color: var(--texte); transition: transform .15s, box-shadow .15s;
}
.dv-page a.dv-carte-cat:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); color: var(--texte); }
.dv-cat-tete    { display: flex; align-items: center; gap: 14px; }
.dv-cat-tete h2 { font-size: 20px; color: var(--gris); }
.dv-carte-cat p { font-size: 15px; line-height: 1.5; color: var(--doux); flex: 1; }
.dv-cat-pied    { font-size: 14px; font-weight: bold; color: var(--bleu); }
.dv-carte-cat:hover .dv-cat-pied { color: var(--orange); }

/* dernières sources */
.dv-dernieres ul li + li { border-top: 1px solid #dadada; }
.dv-page .dv-dernieres a {
  display: flex; align-items: center; gap: 14px; padding: 10px 6px; color: var(--texte);
  border-radius: 6px;
}
.dv-page .dv-dernieres a:hover { background: rgba(0,0,0,.04); color: var(--texte); }
.dv-der-texte       { flex: 1; min-width: 0; }
.dv-der-texte b     { display: block; font-size: 16px; color: var(--gris); }
.dv-der-texte small { display: block; font-size: 13px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-dernieres time  { font-size: 13px; color: var(--orange); font-weight: bold; white-space: nowrap; min-width: 125px; text-align: right; }

/* =========================================================
   LISTE DES SOURCES  (?page=programm&data=list&args_0=...)
   ========================================================= */
.dv-colonnes       { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.dv-colonnes-liste { grid-template-columns: 250px minmax(0, 1fr); }

.dv-menu-cat li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 6px; font-size: 15px; color: var(--texte);
}
.dv-menu-cat li a:hover    { background: rgba(0,0,0,.05); color: var(--texte); }
.dv-menu-cat li.actif a    { background: rgba(241,89,42,.12); color: var(--orange); font-weight: bold; }
.dv-menu-cat small         { margin-left: auto; font-size: 12px; color: var(--doux); font-weight: normal; }
.dv-pastille               { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.dv-entete {
  display: flex; align-items: center; gap: 18px;
  background: var(--carte); border-radius: 10px; padding: 20px 24px; margin-bottom: 16px;
  border-left: 5px solid var(--orange); box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dv-entete h1 { font-size: 26px; color: var(--gris); margin-bottom: 4px; }
.dv-entete p  { font-size: 15px; color: var(--doux); line-height: 1.5; }

.dv-outils { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.dv-recherche {
  flex: 1; min-width: 220px; max-width: 420px; height: 38px; box-sizing: border-box;
  padding: 0 14px; border: 1px solid #c8c8c8; border-radius: 19px; font-size: 15px; background: #fff;
}
.dv-recherche:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15); }
.dv-niveaux { display: flex; gap: 6px; flex-wrap: wrap; }
.dv-niveaux button {
  height: 34px; padding: 0 14px; border: 1px solid #c8c8c8; border-radius: 17px;
  background: #fff; color: var(--texte); font-size: 14px; cursor: pointer;
}
.dv-niveaux button:hover  { border-color: var(--orange); color: var(--orange); }
.dv-niveaux button.actif  { background: var(--orange); border-color: var(--orange); color: #fff; }

.dv-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dv-page a.dv-carte-source {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--carte); border-radius: 10px; padding: 18px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12); color: var(--texte);
  transition: transform .15s, box-shadow .15s;
}
.dv-page a.dv-carte-source:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.18); color: var(--texte); }
.dv-carte-source h2 { font-size: 19px; color: var(--gris); }
.dv-carte-source p  { font-size: 15px; line-height: 1.5; color: var(--doux); flex: 1; }
.dv-pied {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--doux); padding-top: 10px; border-top: 1px solid #dadada;
}
.dv-pied time { color: var(--orange); font-weight: bold; }

/* =========================================================
   UNE SOURCE  (?page=programm&data=view&args_0=...)
   ========================================================= */
.dv-article {
  background: var(--carte); border-radius: 10px; padding: 28px 32px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.dv-article h1 { font-size: 26px; color: var(--gris); line-height: 1.2; margin: 12px 0 8px; }
.dv-chapo {
  font-size: 17px; color: var(--doux); line-height: 1.6;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid var(--orange);
}

/* texte de présentation */
.dv-texte { font-size: 16px; line-height: 1.7; }
.dv-texte p  { margin: 0 0 14px; }
.dv-texte h3 { font-size: 19px; color: var(--gris); margin: 20px 0 8px; }
.dv-texte ul { margin: 0 0 14px; }
.dv-texte li { position: relative; padding: 3px 0 3px 20px; }
.dv-texte li::before { content: "›"; position: absolute; left: 4px; color: var(--orange); font-weight: bold; }
.dv-texte p code, .dv-texte li code, .dv-texte h3 code {
  font-family: Consolas, "Courier New", monospace; font-size: 14px;
  background: #e2e2e2; padding: 1px 6px; border-radius: 4px; color: #924b72;
}
.dv-texte .dv-code { margin: 6px 0 18px; }

.dv-titre-code { font-size: 20px; color: var(--gris); margin: 24px 0 12px; }

/* colonne de droite */
.dv-infos { width: 100%; border-collapse: collapse; font-size: 14px; }
.dv-infos th, .dv-infos td { padding: 7px 0; border-bottom: 1px solid #dadada; text-align: left; vertical-align: middle; }
.dv-infos tr:last-child th, .dv-infos tr:last-child td { border-bottom: none; }
.dv-infos th { color: var(--doux); font-weight: normal; width: 42%; }
.dv-bouton {
  display: block; margin-top: 14px; padding: 11px; border-radius: 6px; text-align: center;
  background: var(--vert); font-weight: bold;
}
.dv-page a.dv-bouton, .dv-page a.dv-bouton:hover { color: #fff; }
.dv-page a.dv-bouton:hover { background: #507d16; }

.dv-page a.dv-app { display: flex; gap: 12px; align-items: center; color: var(--texte); margin-bottom: 12px; }
.dv-app b     { display: block; font-size: 17px; color: var(--gris); }
.dv-app small { display: block; font-size: 13px; color: var(--doux); line-height: 1.4; }
.dv-lien      { font-size: 14px; font-weight: bold; }

.dv-autres li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #dadada; }
.dv-autres li:last-child { border-bottom: none; margin-bottom: 8px; }
.dv-autres a  { font-size: 15px; font-weight: bold; }

.dv-retour { display: inline-block; margin-top: 20px; font-weight: bold; }


/* archive zip du projet */
.dv-zip {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 12px 14px; border-radius: 8px; background: #fff; border: 1px solid #cfcfcf;
}
.dv-zip-ico {
  width: 44px; height: 44px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--vert); color: #fff; font-weight: bold; font-size: 13px; letter-spacing: 1px;
}
.dv-zip-texte       { flex: 1; min-width: 0; }
.dv-zip-texte b     { display: block; font-size: 16px; color: var(--gris); }
.dv-zip-texte small { display: block; font-size: 13px; color: var(--doux); }
.dv-page a.dv-zip-bouton { display: inline-block; margin-top: 0; padding: 9px 22px; font-size: 15px; }

/* captures d'écran d'une source + agrandissement */
.dv-captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 6px; }
.dv-captures figure { margin: 0; }
.dv-captures img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; cursor: zoom-in;
  border-radius: 6px; border: 1px solid #cfcfcf; background: #e4e4e4;
  transition: transform .15s, box-shadow .15s;
}
.dv-captures img:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.dv-captures figcaption { font-size: 13px; color: var(--doux); margin-top: 5px; text-align: center; }

#dv-zoom {
  display: none; position: fixed; inset: 0; z-index: 9999;
  align-items: center; justify-content: center; gap: 18px;
  background: rgba(0,0,0,.85); cursor: zoom-out;
}
#dv-zoom figure     { margin: 0; text-align: center; }
#dv-zoom img        { max-width: 86vw; max-height: 84vh; border-radius: 4px; cursor: default; }
#dv-zoom figcaption { color: #eee; font-size: 15px; margin-top: 10px; }
#dv-zoom button {
  width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.15); color: #fff; font-size: 32px; line-height: 44px;
}
#dv-zoom button:hover { background: var(--orange); }
#dv-zoom.dv-seule button { visibility: hidden; }

/* =========================================================
   VISIONNEUSE DE CODE (onglets, numéros de ligne, couleurs)
   ========================================================= */
.dv-code { border: 1px solid #cfcfcf; border-radius: 8px; overflow: hidden; background: #fdfdf6; }

.dv-onglets { display: flex; flex-wrap: wrap; background: #e4e4e4; border-bottom: 1px solid #cfcfcf; }
.dv-onglets button {
  padding: 9px 16px; border: none; border-right: 1px solid #cfcfcf; background: transparent;
  font-family: Consolas, "Courier New", monospace; font-size: 14px; color: var(--doux); cursor: pointer;
}
.dv-onglets button:hover { color: var(--orange); }
.dv-onglets button.actif { background: #fdfdf6; color: var(--gris); font-weight: bold; box-shadow: inset 0 3px 0 var(--orange); }

.dv-fichier       { display: none; }
.dv-fichier.actif { display: block; }

.dv-barre {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 14px;
  background: #efefe8; border-bottom: 1px solid #dcdcd2; font-size: 13px;
}
.dv-nom   { font-family: Consolas, "Courier New", monospace; font-weight: bold; color: var(--gris); }
.dv-details { color: var(--doux); margin-right: auto; }
.dv-barre button {
  height: 28px; padding: 0 12px; border: 1px solid #c8c8c8; border-radius: 5px;
  background: #fff; color: var(--texte); font-size: 13px; cursor: pointer;
}
.dv-barre button:hover { border-color: var(--orange); color: var(--orange); }

.dv-pre {
  margin: 0; padding: 10px 0; max-height: 640px; overflow: auto;
  font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.55;
  tab-size: 4; -moz-tab-size: 4; white-space: pre; color: #2b2b2b;
}
.dv-pre code     { font: inherit; counter-reset: ligne; }
.dv-ligne        { display: inline; padding-right: 16px; }
.dv-ligne::before {
  counter-increment: ligne; content: counter(ligne);
  position: sticky; left: 0; display: inline-block; width: 3.2em; margin-right: 14px; padding-right: 10px;
  text-align: right; color: #a8a8a0; background: #f2f2ea; border-right: 1px solid #e0e0d6;
  -webkit-user-select: none; user-select: none;
}

/* couleurs du code (une classe par type de morceau, pour tous les langages) */
.dv-m { color: #0b5c8a; font-weight: bold; }   /* mot-clé            */
.dv-t { color: #1f7a6d; }                      /* type               */
.dv-f { color: #6a4fb3; }                      /* fonction           */
.dv-k { color: #924b72; }                      /* constante #PB_...  */
.dv-s { color: #b0281a; }                      /* chaîne             */
.dv-n { color: #c46a00; }                      /* nombre             */
.dv-c { color: #6f8f6f; font-style: italic; }  /* commentaire        */
.dv-p { color: #8a5a00; }                      /* directive          */

/* ---------- Petits écrans ---------- */
@media (max-width: 1300px) {
  .dv-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dv-sources    { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .dv-colonnes, .dv-colonnes-liste { grid-template-columns: minmax(0, 1fr); }
  .dv-hero { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
  .dv-categories { grid-template-columns: 1fr; }
  .dv-article    { padding: 22px 18px; }
  .dv-dernieres time, .dv-dernieres .dv-niveau { display: none; }
}

/* =========================================================
   ADMINISTRATION : boutons et formulaire d'une source
   (?page=programm&data=edit)
   ========================================================= */
.dv-page a.dv-admin {
  float: right; padding: 4px 14px; border-radius: 14px; font-size: 13px; font-weight: bold;
  background: var(--orange); color: #fff;
}
.dv-page a.dv-admin:hover { background: #d4461c; color: #fff; }
.dv-page a.dv-admin-hero  { float: none; display: inline-block; margin: 0 0 10px; }
.dv-masquee { font-size: 12px; padding: 3px 10px; border-radius: 12px; background: #585858; color: #fff; }

.dv-erreurs {
  background: #fbe3e0; border-left: 5px solid var(--rouge); border-radius: 8px;
  padding: 14px 20px; margin-bottom: 18px; color: #8a1c14; font-size: 15px;
}
.dv-erreurs ul { margin-top: 6px; }
.dv-erreurs li { padding: 2px 0 2px 16px; position: relative; }
.dv-erreurs li::before { content: "›"; position: absolute; left: 2px; font-weight: bold; }

.dv-form .dv-article h1 { margin-top: 0; margin-bottom: 18px; }
.dv-form h2.dv-titre-form, .dv-bloc-form h2 { font-size: 20px; color: var(--gris); margin-bottom: 6px; }
.dv-bloc-form { margin-top: 20px; }
.dv-note { font-size: 13px; color: var(--doux); margin: 4px 0 12px; }

.dv-champ { margin-bottom: 14px; }
.dv-champ label { display: flex; justify-content: space-between; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.dv-champ label small { font-weight: normal; color: var(--doux); }
.dv-champ > small { display: block; font-size: 12px; color: var(--doux); margin-top: 4px; }
.dv-champ-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.dv-form input[type=text], .dv-form input[type=date], .dv-form input[type=number],
.dv-form select, .dv-form textarea {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font-size: 15px;
  border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; color: var(--texte); font-family: inherit;
}
.dv-form input[type=text], .dv-form input[type=date], .dv-form input[type=number], .dv-form select { height: 38px; }
.dv-form input:focus, .dv-form select:focus, .dv-form textarea:focus {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15);
}
.dv-form textarea { resize: vertical; line-height: 1.5; }
.dv-form .dv-mono, .dv-form .dv-f-contenu {
  font-family: Consolas, "Courier New", monospace; font-size: 14px; tab-size: 4; -moz-tab-size: 4; white-space: pre;
}
.dv-form .dv-f-contenu { background: #fdfdf6; }

.dv-slug { display: flex; align-items: center; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; overflow: hidden; }
.dv-slug span { padding: 0 4px 0 11px; font-size: 13px; color: var(--doux); white-space: nowrap; }
.dv-form .dv-slug input[type=text] { border: none; border-radius: 0; padding-left: 0; box-shadow: none; }
.dv-slug:focus-within { border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15); }

.dv-aide { margin-top: 6px; font-size: 13px; color: var(--doux); }
.dv-aide summary { cursor: pointer; color: var(--bleu); }
.dv-aide p { margin-top: 6px; line-height: 1.7; }
.dv-aide code { background: #e2e2e2; padding: 1px 5px; border-radius: 4px; font-family: Consolas, monospace; }

/* lignes « fichier » */
.dv-f-ligne { border: 1px solid #cfcfcf; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: #efefe8; }
.dv-f-tete  { display: flex; gap: 8px; align-items: center; padding: 8px; flex-wrap: wrap; }
.dv-form .dv-f-tete .dv-f-nom     { flex: 1; min-width: 160px; font-family: Consolas, monospace; }
.dv-form .dv-f-tete .dv-f-langage { width: 200px; }
.dv-f-tete button, .dv-f-importer, .dv-bouton-sec {
  height: 34px; padding: 0 12px; border: 1px solid #c8c8c8; border-radius: 6px;
  background: #fff; color: var(--texte); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center;
}
.dv-f-tete button:hover, .dv-f-importer:hover, .dv-bouton-sec:hover { border-color: var(--orange); color: var(--orange); }
.dv-f-tete .dv-f-retirer:hover { border-color: var(--rouge); color: var(--rouge); }
.dv-form .dv-f-contenu { border: none; border-top: 1px solid #dcdcd2; border-radius: 0; }
.dv-bouton-sec { font-weight: bold; }

/* captures existantes */
.dv-c-ligne { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #dadada; }
.dv-c-ligne img { width: 96px; height: 60px; object-fit: cover; border-radius: 5px; border: 1px solid #cfcfcf; flex-shrink: 0; }
.dv-form .dv-c-ligne input[type=number] { width: 70px; }
.dv-suppr { font-size: 13px; color: var(--rouge); white-space: nowrap; cursor: pointer; }

/* zones de dépôt de fichiers */
.dv-depot {
  display: block; margin-top: 12px; padding: 14px; text-align: center; cursor: pointer;
  border: 2px dashed #c0c0c0; border-radius: 8px; font-size: 14px; color: var(--doux); background: #fff;
}
.dv-depot:hover, .dv-depot-plein { border-color: var(--vert); color: var(--vert); }
.dv-depot input { display: none; }

.dv-case { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin-top: 4px; }

/* système : cases à cocher en pastilles */
.dv-os { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dv-os label { display: inline-block; margin: 0; cursor: pointer; font-weight: normal; }
.dv-os input { display: none; }
.dv-os span {
  display: inline-block; padding: 6px 12px; border: 1px solid #c8c8c8; border-radius: 16px;
  background: #fff; font-size: 13px; color: var(--texte); user-select: none;
}
.dv-os label:hover span { border-color: var(--orange); }
.dv-os input:checked + span { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.dv-os .dv-os-tous input:checked + span { background: var(--gris); border-color: var(--gris); }
.dv-form input.dv-os-autre { height: 34px; font-size: 14px; }
.dv-form input.dv-choix-autre { margin-top: 6px; }

.dv-actions { display: flex; align-items: center; gap: 16px; }
.dv-actions .dv-bouton { flex: 1; margin-top: 0; border: none; font-size: 16px; color: #fff; cursor: pointer; font-family: inherit; }
.dv-actions .dv-bouton:hover { background: #507d16; }

@media (max-width: 700px) {
  .dv-champ-2 { grid-template-columns: 1fr; }
  .dv-c-ligne { flex-wrap: wrap; }
}

/* ######################################################################
   11. ADMINISTRATION  -  classes adm-   (tableau de bord, membres)
   ###################################################################### */

.adm-page { width: 100%; padding: 0 0 25px; color: var(--texte); }
.adm-page a { color: var(--bleu); }
.adm-page a:hover { color: var(--orange); }

.adm-tete { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-tete h1 { font-size: 26px; color: var(--gris); }
.adm-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-page .adm-nav a {
  padding: 7px 16px; border-radius: 18px; background: var(--carte); color: var(--texte);
  font-size: 14px; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.adm-page .adm-nav a:hover { color: var(--orange); }
.adm-page .adm-nav a.actif { background: var(--orange); color: #fff; }

.adm-bloc {
  background: var(--carte); border-radius: 10px; padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.adm-bloc + .adm-bloc { margin-top: 20px; }
.adm-bloc h2 {
  font-size: 18px; color: var(--gris); display: inline-block;
  padding-bottom: 6px; border-bottom: 2px solid var(--orange); margin-bottom: 14px;
}
.adm-bloc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.adm-colonnes { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.adm-message { background: #e6f2d8; border-left: 5px solid var(--vert); border-radius: 8px; padding: 12px 18px; margin-bottom: 18px; color: #3d6310; font-weight: bold; }
.adm-alerte  { background: #fff2dc; border-left: 5px solid var(--ocre); border-radius: 8px; padding: 12px 18px; margin-bottom: 18px; }
.adm-erreurs { background: #fbe3e0; border-left: 5px solid var(--rouge); border-radius: 8px; padding: 14px 20px; margin-bottom: 18px; color: #8a1c14; }
.adm-erreurs ul { margin-top: 6px; }
.adm-erreurs li { padding: 2px 0 2px 16px; position: relative; }
.adm-erreurs li::before { content: "›"; position: absolute; left: 2px; font-weight: bold; }

/* tuiles du tableau de bord */
.adm-tuiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.adm-tuile {
  display: block; background: var(--carte); border-radius: 0 0 10px 10px; padding: 16px 20px;
  border-top: 4px solid var(--orange); box-shadow: 0 2px 6px rgba(0,0,0,.12);
  font-size: 14px; color: var(--doux);
}
.adm-page a.adm-tuile { color: var(--doux); transition: transform .15s; }
.adm-page a.adm-tuile:hover { transform: translateY(-2px); color: var(--doux); }
.adm-tuile b { display: block; font-size: 30px; color: var(--gris); line-height: 1.2; }
.adm-t-vert  { border-top-color: var(--vert); }
.adm-t-gris  { border-top-color: #9a9a9a; }
.adm-t-rouge { border-top-color: var(--rouge); }
.adm-t-bleu  { border-top-color: var(--bleu); }

/* badges, états, avatars */
.adm-badge { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 11px; color: #fff; margin: 1px 4px 1px 0; white-space: nowrap; }
.adm-badge-inconnu { background: #9a9a9a; }
.adm-etat { display: inline-block; font-size: 12px; font-weight: bold; padding: 2px 10px; border-radius: 11px; white-space: nowrap; }
.adm-e-actif   { background: #e6f2d8; color: #3d6310; }
.adm-e-inactif { background: #e2e2e2; color: #585858; }
.adm-e-bloque  { background: #fbe3e0; color: #a3221a; }
.adm-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gris); color: #fff; font-size: 13px; font-weight: bold;
}
.adm-avatar-grand { width: 52px; height: 52px; font-size: 18px; background: var(--orange); }
.adm-en-ligne { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--vert); vertical-align: middle; }

/* tableaux */
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--doux); padding: 8px 10px; border-bottom: 2px solid #d0d0d0; }
.adm-table td { padding: 9px 10px; border-bottom: 1px solid #dadada; vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table-liste tbody tr:hover td { background: rgba(0,0,0,.03); }
.adm-qui { display: flex; align-items: center; gap: 10px; }
.adm-qui small { display: block; font-size: 12px; color: var(--doux); }
.adm-qui b { color: var(--gris); }
.adm-actions { text-align: right; white-space: nowrap; font-weight: bold; }
.adm-lien { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: bold; }
.adm-vide, .adm-compte { font-size: 14px; color: var(--doux); }
.adm-compte { margin: 4px 0 10px; }

.adm-profils li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #dadada; }
.adm-profils li:last-child { border-bottom: none; }
.adm-profils small { color: var(--doux); font-size: 12px; flex: 1; }
.adm-profils li > span:first-child:not(.adm-badge) { flex: 1; }
.adm-profils a { font-size: 14px; font-weight: bold; white-space: nowrap; }
.adm-off { opacity: .5; }

/* filtres et pagination */
.adm-filtres { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.adm-filtres input[type=search] { flex: 1; min-width: 220px; max-width: 380px; }
.adm-droite { margin-left: auto; }
.adm-pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.adm-page .adm-pagination a { min-width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #fff; border: 1px solid #c8c8c8; color: var(--texte); }
.adm-page .adm-pagination a.actif { background: var(--orange); border-color: var(--orange); color: #fff; }

/* boutons */
.adm-bouton {
  display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px;
  border: none; border-radius: 6px; background: var(--bleu); font-size: 14px; font-weight: bold;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.adm-page a.adm-bouton, .adm-bouton { color: #fff; }
.adm-page a.adm-bouton:hover, .adm-bouton:hover { background: #007aa8; color: #fff; }
.adm-page a.adm-b-vert, .adm-b-vert { background: var(--vert); }
.adm-page a.adm-b-vert:hover, .adm-b-vert:hover { background: #507d16; }
.adm-b-rouge { background: var(--rouge); }
.adm-b-rouge:hover { background: #a3221a; }

/* formulaires */
.adm-page input[type=text], .adm-page input[type=email], .adm-page input[type=url], .adm-page input[type=password],
.adm-page input[type=search], .adm-page select {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 11px; font-size: 15px;
  border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; color: var(--texte); font-family: inherit;
}
.adm-filtres select { width: auto; }
.adm-page input:focus, .adm-page select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15); }
.adm-champ { margin-bottom: 12px; }
.adm-champ label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.adm-champ-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-note { font-size: 13px; color: var(--doux); margin: 0 0 10px; }
.adm-case { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; margin: 8px 0; }
.adm-case input { margin-top: 3px; }
.adm-profil { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #dadada; cursor: pointer; }
.adm-profil small { font-size: 12px; color: var(--doux); }
.adm-fiche-tete { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #dadada; }
.adm-fiche-tete div { flex: 1; }
.adm-fiche-tete b { display: block; font-size: 18px; color: var(--gris); }
.adm-fiche-tete small { font-size: 13px; color: var(--doux); }
.adm-boutons { display: flex; align-items: center; gap: 16px; }
.adm-boutons .adm-bouton { flex: 1; height: 44px; font-size: 16px; }
.adm-danger { border-left: 4px solid var(--rouge); }
.adm-danger h2 { border-bottom-color: var(--rouge); }

/* listes de choix */
.adm-colonnes-egales { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.adm-listes td { padding: 5px 8px; }
.adm-page .adm-listes input[type=text]   { height: 32px; font-size: 14px; }
.adm-page .adm-listes input[type=number] { height: 32px; font-size: 14px; width: 70px; box-sizing: border-box; padding: 0 6px; border: 1px solid #c8c8c8; border-radius: 6px; }
.adm-col-ordre   { width: 80px; }
.adm-col-case    { width: 64px; text-align: center; }
.adm-col-utilise { width: 100px; font-size: 13px; color: var(--doux); white-space: nowrap; }
.adm-col-utilise span { color: #b0b0b0; }
.adm-sous-titre { font-size: 15px; color: var(--gris); margin: 16px 0 4px; }
.adm-ajout { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed #c8c8c8; }
.adm-page .adm-ajout select { width: 170px; flex-shrink: 0; }
.adm-boutons-bas { margin-top: 20px; max-width: 520px; margin-left: auto; }

/* logiciels */
.adm-lg-ico {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 15px;
}
.adm-lg-ico img { width: 100%; height: 100%; object-fit: contain; }
.adm-lg-ico-grand { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; }
.adm-statut { display: inline-block; font-size: 12px; padding: 2px 10px; border-radius: 11px; white-space: nowrap; }
.adm-petit { display: block; font-size: 12px; color: var(--doux); }
td.adm-petit { display: table-cell; }
.adm-manque { color: var(--rouge); font-size: 12px; }
.adm-profils small { display: inline; }

.adm-apercu { display: flex; align-items: center; gap: 16px; }
.adm-apercu .adm-champ-2 { flex: 1; }
.adm-page input[type=color] { width: 100%; height: 38px; padding: 2px; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; box-sizing: border-box; cursor: pointer; }
.adm-page input[type=date], .adm-page input[type=number] {
  height: 38px; padding: 0 10px; font-size: 15px; border: 1px solid #c8c8c8; border-radius: 6px;
  background: #fff; color: var(--texte); font-family: inherit; box-sizing: border-box;
}
.adm-page .adm-champ input[type=date], .adm-page .adm-champ input[type=number] { width: 100%; }
.adm-page textarea {
  width: 100%; box-sizing: border-box; padding: 8px 11px; font-size: 15px; line-height: 1.5;
  border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; color: var(--texte); font-family: inherit; resize: vertical;
}
.adm-page textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,149,205,.15); }
.adm-champ label small { font-weight: normal; color: var(--doux); float: right; }
.adm-page input.adm-choix-autre { margin-top: 6px; }

/* lignes ajoutables (fonctionnalités, versions) */
.adm-lignes { margin-bottom: 10px; }
.adm-ligne { display: flex; align-items: center; gap: 6px; padding: 5px 0; }
.adm-ligne > input[type=text] { flex: 1; }
.adm-ligne button, .adm-bouton-sec {
  height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid #c8c8c8; border-radius: 6px;
  background: #fff; color: var(--texte); font-size: 13px; cursor: pointer; font-family: inherit;
}
.adm-bouton-sec { font-weight: bold; }
.adm-ligne button:hover, .adm-bouton-sec:hover { border-color: var(--orange); color: var(--orange); }
.adm-ligne .adm-retirer:hover { border-color: var(--rouge); color: var(--rouge); }
.adm-avant { display: inline-flex; align-items: center; gap: 3px; font-size: 16px; color: var(--ocre); cursor: pointer; padding: 0 4px; }
.adm-ligne-version { display: block; padding: 10px 12px; margin-top: 10px; border: 1px solid #d0d0d0; border-radius: 8px; background: #fff; }
.adm-ligne-haut { display: flex; gap: 8px; margin-bottom: 8px; }
.adm-page .adm-ligne-haut .adm-v-num { width: 140px; flex: none; }
.adm-ligne-haut .adm-retirer { margin-left: auto; }

/* captures */
.adm-captures { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 4px; }
.adm-capture { background: #fff; border: 1px solid #d0d0d0; border-radius: 8px; padding: 8px; }
.adm-capture img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 5px; margin-bottom: 6px; background: #e4e4e4; }
.adm-capture div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.adm-page .adm-capture input[type=number] { width: 70px; }
.adm-suppr { font-size: 13px; color: var(--rouge); white-space: nowrap; cursor: pointer; }

/* zones de dépôt de fichiers */
.adm-depot {
  display: block; margin: 10px 0; padding: 12px; text-align: center; cursor: pointer;
  border: 2px dashed #c0c0c0; border-radius: 8px; font-size: 14px; color: var(--doux); background: #fff;
}
.adm-depot:hover, .adm-depot-plein { border-color: var(--vert); color: var(--vert); }
.adm-depot input { display: none; }

/* nouvelles */
.adm-page a.adm-onglet {
  padding: 6px 14px; border-radius: 16px; border: 1px solid #c8c8c8; background: #fff;
  color: var(--texte); font-size: 14px;
}
.adm-page a.adm-onglet:hover { border-color: var(--orange); color: var(--orange); }
.adm-page a.adm-onglet.actif { background: var(--orange); border-color: var(--orange); color: #fff; }
.adm-date { white-space: nowrap; font-size: 13px; font-weight: bold; color: var(--orange); }
.adm-e-programme { background: #dff0f8; color: #00749f; }
.adm-onglets-edition { display: flex; gap: 4px; margin: 6px 0 -1px; }
.adm-onglets-edition button {
  padding: 7px 16px; border: 1px solid #c8c8c8; border-bottom: none; border-radius: 6px 6px 0 0;
  background: #e8e8e8; color: var(--doux); font-size: 14px; cursor: pointer; font-family: inherit;
}
.adm-onglets-edition button.actif { background: #fff; color: var(--gris); font-weight: bold; }
.adm-apercu-texte { background: #fff; border: 1px solid #c8c8c8; border-radius: 0 6px 6px 6px; padding: 16px 20px; min-height: 300px; margin-bottom: 12px; }
.adm-image-apercu { display: block; max-width: 100%; border-radius: 6px; border: 1px solid #d0d0d0; margin-bottom: 6px; }

/* messages de contact */
.adm-pastille {
  display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; text-align: center;
}
.adm-nav a.actif .adm-pastille { background: #fff; color: var(--orange); }
.adm-page a.adm-alerte-lien { display: block; color: var(--texte); }
.adm-page a.adm-alerte-lien:hover { color: var(--orange); }
.adm-sep { width: 1px; height: 24px; background: #c8c8c8; margin: 0 4px; }
.adm-onglet small { color: inherit; opacity: .7; }

.msg-liste { margin-top: 10px; }
.msg-liste li { border-bottom: 1px solid #dadada; }
.msg-liste li:last-child { border-bottom: none; }
.adm-page .msg-liste a { display: flex; align-items: center; gap: 14px; padding: 12px 10px; color: var(--texte); border-radius: 6px; }
.adm-page .msg-liste a:hover { background: rgba(0,0,0,.04); color: var(--texte); }
.msg-sujet { font-size: 12px; padding: 3px 10px; border-radius: 12px; color: #fff; white-space: nowrap; flex-shrink: 0; min-width: 70px; text-align: center; }
.msg-corps { flex: 1; min-width: 0; font-size: 15px; }
.msg-corps b { color: var(--gris); }
.msg-debut { display: block; font-size: 13px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-date { font-size: 13px; color: var(--doux); white-space: nowrap; text-align: right; }
.msg-date small { display: block; color: var(--vert); font-weight: bold; }
.msg-non-lu .msg-corps { font-weight: bold; }
.msg-non-lu .msg-corps::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-right: 8px; vertical-align: middle; }
.msg-traite { opacity: .65; }
.msg-non-lu .msg-debut { font-weight: normal; }

.msg-entete { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #dadada; }
.msg-entete .msg-sujet { display: inline-block; margin-right: 6px; }
.adm-bloc h2.msg-objet { display: block; border: none; padding: 0; margin: 10px 0 4px; font-size: 22px; }
.msg-logiciel { background: #fbe3e0; border-radius: 6px; padding: 8px 12px; font-size: 14px; margin-bottom: 14px; }
.msg-texte { font-size: 15px; line-height: 1.7; background: #fff; border: 1px solid #dadada; border-radius: 8px; padding: 18px 20px; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.msg-actions .msg-suppr:hover { border-color: var(--rouge); color: var(--rouge); }
.msg-de { font-size: 15px; line-height: 1.6; margin-bottom: 8px; }

/* messages : séparateur des filtres et lien « Gérer les sujets » */
.adm-sep { width: 1px; height: 24px; background: #dadada; margin: 0 4px; }
.adm-lien-petit { font-size: 14px; font-weight: bold; color: var(--bleu); }

/* sources (?page=admin&data=sources) */
.adm-tuiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-inline { display: inline; margin: 0; }
.adm-nowrap { white-space: nowrap; }
.adm-bascule { border: none; cursor: pointer; font: inherit; font-size: 12px; }
.adm-bascule:hover { box-shadow: 0 0 0 2px currentColor; }
.adm-suppr { border: none; background: none; cursor: pointer; color: #b0b0b0; font-size: 15px; padding: 0 0 0 10px; }
.adm-suppr:hover { color: var(--rouge); }
.adm-sources .adm-filtres { margin-bottom: 0; }
.adm-bloc-tete .adm-filtres { flex: 1; margin-bottom: 0; }

/* sujets du formulaire de contact (?page=admin&data=sujets) */
.adm-sujets td { padding: 5px 8px; vertical-align: middle; }
.adm-page .adm-sujets input[type=text]   { height: 32px; font-size: 14px; }
.adm-page .adm-sujets input[type=number] { height: 32px; font-size: 14px; width: 70px; box-sizing: border-box; padding: 0 6px; border: 1px solid #c8c8c8; border-radius: 6px; }
.adm-page .adm-sujets input[type=color]  { width: 44px; height: 32px; padding: 2px; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff; cursor: pointer; }
.adm-page .adm-sujets select { height: 32px; font-size: 14px; width: auto; }
.sj-apercu { display: inline-flex; width: 34px; height: 34px; border-radius: 8px; align-items: center; justify-content: center; background: var(--c); color: #fff; }
.sj-apercu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sj-nouveau td { background: #f6f9fb; border-top: 2px dashed #c8d8e2; }

@media (max-width: 1300px) { .adm-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .adm-colonnes, .adm-colonnes-egales { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .adm-tuiles, .adm-champ-2 { grid-template-columns: 1fr; }
  .adm-table-liste th:nth-child(2), .adm-table-liste td:nth-child(2) { display: none; }
}

/* bandeau : pastille du nombre de messages non lus sur l'enveloppe (administrateur) */
.compte-ico { position: relative; }
.compte-pastille {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: bold; text-align: center;
  box-shadow: 0 0 0 2px #585858;
}

/* contact : message bien envoyé */
.ct-envoye { text-align: center; padding: 30px 10px; }
.ct-envoye h2 { font-size: 22px; color: var(--gris); margin: 14px 0 8px; }
.ct-envoye p { font-size: 15px; line-height: 1.6; margin-bottom: 14px; }
.ct-envoye a { font-weight: bold; color: var(--bleu); }

/* ######################################################################
   12. MESSAGERIE INTERNE  -  classes mp-   (?page=messages)
   ###################################################################### */
.mp-page { width: 100%; padding: 0 0 25px; color: var(--texte); }
.mp-page a { color: var(--bleu); }
.mp-flash { background: #e6f2d8; border-left: 5px solid var(--vert); border-radius: 8px; padding: 12px 18px; margin-bottom: 16px; color: #3d6310; font-weight: bold; }

.mp-cadre {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  height: calc(100vh - 230px); min-height: 520px;
  background: var(--carte); border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.14); overflow: hidden;
}
.mp-cadre-seul { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; max-width: 820px; margin: 0 auto; }

/* --- colonne de gauche --- */
.mp-gauche { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #d6d6d6; background: #e8e8e8; }
.mp-gauche-tete { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.mp-gauche-tete h1 { font-size: 22px; color: var(--gris); }
.mp-page a.mp-nouveau {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 17px;
  background: var(--orange); color: #fff; font-weight: bold; font-size: 14px; text-decoration: none;
}
.mp-page a.mp-nouveau:hover { background: #d94a1e; color: #fff; }
.mp-nouveau svg, .mp-bouton svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.mp-dossiers { display: flex; gap: 4px; padding: 0 12px 10px; border-bottom: 1px solid #d6d6d6; }
.mp-page .mp-dossiers a { flex: 1; text-align: center; padding: 7px 4px; border-radius: 7px; font-size: 14px; font-weight: bold; color: var(--doux); text-decoration: none; }
.mp-page .mp-dossiers a:hover { background: #dcdcdc; color: var(--gris); }
.mp-page .mp-dossiers a.actif { background: #fff; color: var(--orange); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mp-dossiers small { font-weight: normal; color: #9a9a9a; }
.mp-pastille { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; vertical-align: 1px; box-sizing: border-box; }

.mp-liste { flex: 1; overflow-y: auto; padding: 6px; }
.mp-page a.mp-item { display: flex; gap: 12px; padding: 10px 10px; border-radius: 9px; color: var(--texte); text-decoration: none; }
.mp-page a.mp-item:hover { background: #dedede; }
.mp-page a.mp-item.actif { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mp-item-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-item-ligne { display: flex; justify-content: space-between; gap: 8px; }
.mp-item-ligne b { color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-item-ligne time { font-size: 12px; color: #9a9a9a; white-space: nowrap; }
.mp-item-sujet, .mp-item-extrait { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-item-sujet { color: var(--texte); }
.mp-item-extrait { color: #8a8a8a; }
.mp-non-lu .mp-item-sujet { font-weight: bold; }
.mp-non-lu .mp-item-ligne time { color: var(--orange); font-weight: bold; }
.mp-non-lu .mp-item-ligne b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); margin-left: 7px; vertical-align: 2px; }
.mp-vide { text-align: center; color: var(--doux); font-size: 14px; padding: 30px 14px; line-height: 1.6; }
.mp-vide small { color: #9a9a9a; }

.mp-bloque { display: flex; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #dadada; margin: 0; }
.mp-bloque span { flex: 1; min-width: 0; }
.mp-bloque b { display: block; color: var(--gris); }
.mp-bloque small { font-size: 12px; color: #9a9a9a; }

.mp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 15px;
}
.mp-avatar-annonce { background: var(--gris); }
.mp-avatar svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- colonne de droite --- */
.mp-droite { display: flex; flex-direction: column; min-height: 0; background: var(--carte); }
.mp-conv-tete { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #d6d6d6; background: #f6f6f6; }
.mp-conv-titre { flex: 1; min-width: 0; }
.mp-conv-titre h2 { font-size: 17px; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-conv-titre small { font-size: 13px; color: var(--doux); }
.mp-conv-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.mp-conv-actions button, .mp-bloque button {
  height: 32px; padding: 0 12px; border: 1px solid #c8c8c8; border-radius: 6px; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: bold; color: var(--gris); cursor: pointer;
}
.mp-conv-actions button:hover, .mp-bloque button:hover { border-color: var(--orange); color: var(--orange); }
.mp-conv-actions button.mp-danger:hover { border-color: var(--rouge); color: var(--rouge); }
.mp-page a.mp-retour { display: none; font-size: 30px; line-height: 1; color: var(--gris); text-decoration: none; padding: 0 6px 4px 0; }
.mp-page a.mp-retour-toujours { display: inline; }

.mp-fil { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.mp-jour { text-align: center; margin: 10px 0 6px; }
.mp-jour span { font-size: 12px; color: var(--doux); background: #e2e2e2; padding: 3px 12px; border-radius: 10px; }
.mp-bulle {
  align-self: flex-start; max-width: 72%; background: #fff; border-radius: 4px 14px 14px 14px;
  padding: 9px 14px 6px; box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.mp-bulle.mp-moi { align-self: flex-end; background: #ffe7dd; border-radius: 14px 4px 14px 14px; }
.mp-qui { display: block; font-size: 13px; margin-bottom: 2px; }
.mp-texte { font-size: 15px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.mp-bulle time { display: block; text-align: right; font-size: 11px; color: #9a9a9a; margin-top: 2px; }

.mp-repondre { display: flex; gap: 10px; align-items: flex-end; padding: 12px 18px; border-top: 1px solid #d6d6d6; background: #f6f6f6; margin: 0; }
.mp-repondre textarea {
  flex: 1; resize: none; min-height: 42px; max-height: 220px; padding: 10px 14px; box-sizing: border-box;
  border: 1px solid #c8c8c8; border-radius: 21px; font-family: inherit; font-size: 15px; line-height: 1.4;
}
.mp-repondre textarea:focus, .mp-form input:focus, .mp-form textarea:focus, .mp-form select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(241,89,42,.15); }
.mp-repondre button {
  width: 42px; height: 42px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--orange); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mp-repondre button:hover { background: #d94a1e; }
.mp-repondre button svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-left: -2px; }
.mp-ferme { text-align: center; font-size: 14px; color: var(--doux); padding: 14px; border-top: 1px solid #d6d6d6; background: #f6f6f6; }

.mp-accueil { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--doux); }
.mp-accueil-ico { width: 80px; height: 80px; border-radius: 50%; background: #e2e2e2; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mp-accueil-ico svg { width: 38px; height: 38px; fill: none; stroke: #9a9a9a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-accueil h2 { font-size: 22px; color: var(--gris); margin-bottom: 6px; }
.mp-accueil p { font-size: 15px; margin-bottom: 8px; }
.mp-note { font-size: 13px; max-width: 420px; }
.mp-page a.mp-bouton, .mp-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 24px; margin-top: 10px;
  border: none; border-radius: 8px; background: var(--orange); color: #fff; font-family: inherit; font-size: 16px; font-weight: bold;
  text-decoration: none; cursor: pointer;
}
.mp-page a.mp-bouton:hover, .mp-bouton:hover { background: #d94a1e; color: #fff; }

/* --- nouveau message --- */
.mp-form { padding: 20px 26px 24px; }
.mp-champ { margin-bottom: 14px; }
.mp-champ > label { display: block; font-size: 14px; font-weight: bold; color: var(--gris); margin-bottom: 5px; }
.mp-form input[type=text], .mp-form textarea, .mp-form select {
  width: 100%; box-sizing: border-box; padding: 0 14px; height: 40px; border: 1px solid #cfcfcf; border-radius: 8px;
  background: #fff; font-family: inherit; font-size: 15px; color: var(--texte);
}
.mp-form textarea { height: auto; padding: 10px 14px; line-height: 1.5; resize: vertical; }
.mp-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px; }
.mp-modes label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.mp-form .mp-modes select { width: auto; height: 34px; }
.mp-aide { display: block; font-size: 13px; color: #8a8a8a; margin-top: 4px; }
.mp-erreur { display: block; font-size: 13px; color: var(--rouge); margin-top: 4px; font-weight: bold; }
.mp-form-bas { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 6px; }
.mp-form-bas .mp-bouton { margin-top: 0; }

/* champ « À » : propositions et vérification */
.mp-a { position: relative; }
.mp-propositions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; list-style: none; margin: 0; padding: 4px;
  background: #fff; border: 1px solid #cfcfcf; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.15); max-height: 300px; overflow-y: auto;
}
.mp-propositions li { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.mp-propositions li:hover, .mp-propositions li.actif { background: #fff0ea; }
.mp-propositions li b { color: var(--gris); }
.mp-propositions li small { margin-left: auto; font-size: 13px; color: #8a8a8a; }
.mp-propositions li.mp-non { opacity: .55; }
.mp-tag { font-size: 11px; font-weight: bold; color: #fff; background: var(--gris); border-radius: 8px; padding: 1px 7px; vertical-align: 1px; }
.mp-verif { font-size: 14px; margin-top: 6px; }
.mp-verif:empty { display: none; }
.mp-verif-ok { color: #3d6310; }
.mp-verif-ko { color: var(--rouge); }
.mp-recents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; color: #8a8a8a; }
.mp-recents button { height: 26px; padding: 0 10px; border: 1px solid #cfcfcf; border-radius: 13px; background: #fff; font-family: inherit; font-size: 13px; color: var(--gris); cursor: pointer; }
.mp-recents button:hover { border-color: var(--orange); color: var(--orange); }

/* bandeau : nombre dans le menu du compte */
.compte-nb { margin-left: auto; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rouge); color: #fff; font-size: 11px; font-weight: bold; text-align: center; box-sizing: border-box; }

@media (max-width: 800px) {
  .mp-cadre { grid-template-columns: minmax(0, 1fr); }
  .mp-lecture .mp-gauche { display: none; }
  .mp-page:not(.mp-lecture) .mp-cadre:not(.mp-cadre-seul) .mp-droite { display: none; }
  .mp-page a.mp-retour { display: inline; }
  .mp-bulle { max-width: 88%; }
  .mp-conv-tete { flex-wrap: wrap; padding: 12px 14px; }
  .mp-conv-tete .mp-avatar { width: 36px; height: 36px; font-size: 13px; }
  .mp-conv-actions { width: 100%; justify-content: flex-start; }
  .mp-conv-actions button { padding: 0 10px; height: 30px; }
  .mp-fil { padding: 14px; }
}