/* Centre Islamique Babou Salam Lac Rose
   Palette : vert du Centre, rose du lac, bois de l'alluha (tablette coranique). */
:root {
  --vert-profond: #0c4a34;
  --vert: #147a50;
  --vert-pale: #e9f5ee;
  --rose: #e58fa0;
  --rose-pale: #fceff0;
  --bois: #e7d3a8;
  --encre: #14231c;
  --gris: #55645c;
  --trait: #d9e2dc;
  --blanc: #ffffff;
  --rouge: #a3262f;
  --titres: "Reem Kufi", "Trebuchet MS", "Segoe UI", sans-serif;
  --texte: "Figtree", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; }
a { color: var(--vert); text-underline-offset: 0.15em; }
a:hover { color: var(--vert-profond); }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--titres); line-height: 1.2; color: var(--vert-profond); margin: 0 0 0.6em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 500; }
p { margin: 0 0 1em; }

.cadre { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }
.cadre-etroit { width: min(100% - 2.5rem, 40rem); }
.bloc { padding-block: 3rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saut { position: absolute; left: -999px; top: 0; background: var(--blanc); padding: 0.5rem 1rem; z-index: 10; }
.saut:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- En-tête ---------- */
.entete { border-bottom: 1px solid var(--trait); background: var(--blanc); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.75rem; flex-wrap: wrap; }
.marque { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--vert-profond); }
.marque img { width: 60px; height: 60px; object-fit: contain; }
.marque-sceau {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--vert-profond); color: var(--blanc); font-family: var(--titres); font-weight: 700;
}
.marque-nom { font-family: var(--titres); font-weight: 700; font-size: 1.05rem; line-height: 1.2; max-width: 16rem; }
.menu { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.menu a { color: var(--encre); text-decoration: none; font-weight: 500; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a[aria-current="page"] { border-bottom-color: var(--rose); color: var(--vert-profond); }
.menu-compte { display: flex; align-items: center; gap: 1rem; padding-left: 1.4rem; border-left: 1px solid var(--trait); }
.menu-compte form { margin: 0; }
.menu-bouton { display: none; font: inherit; font-weight: 600; background: none; border: 1px solid var(--vert-profond); color: var(--vert-profond); border-radius: 6px; padding: 0.45rem 0.9rem; cursor: pointer; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  background: var(--vert); color: var(--blanc); border: 2px solid var(--vert);
  border-radius: 6px; padding: 0.6rem 1.2rem;
}
.bouton:hover { background: var(--vert-profond); border-color: var(--vert-profond); color: var(--blanc); }
.menu a.bouton { color: var(--blanc); border-bottom: 2px solid var(--vert); padding: 0.35rem 0.8rem; }
.menu a.bouton:hover { color: var(--blanc); border-color: var(--vert-profond); }
.bouton-petit { padding: 0.35rem 0.8rem; font-size: 0.95rem; }
.bouton-clair { background: var(--blanc); color: var(--vert-profond); border-color: var(--blanc); }
.bouton-clair:hover { background: var(--rose-pale); border-color: var(--rose-pale); color: var(--vert-profond); }
.lien-bouton { font: inherit; background: none; border: 0; padding: 0; color: var(--vert); text-decoration: underline; cursor: pointer; }
.lien-bouton.danger { color: var(--rouge); }

/* ---------- Accueil ---------- */
.accueil { background: var(--vert-profond); color: var(--blanc); border-bottom: 10px solid var(--rose); }
.accueil-grille { display: grid; grid-template-columns: 1fr minmax(14rem, 20rem); gap: 3rem; align-items: center; padding-block: 3.5rem; }
.accueil h1 { color: var(--blanc); font-size: clamp(2.1rem, 5.5vw, 3.6rem); margin-bottom: 0.5em; max-width: 14ch; }
.accueil-slogan { font-size: 1.25rem; max-width: 30rem; color: #dcebe3; }
.accueil-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.8rem; }
.lien-clair { color: var(--blanc); }
.lien-clair:hover { color: var(--rose); }
.alluha { aspect-ratio: 4 / 5; clip-path: url(#forme-alluha); background: var(--bois); }
.alluha img { width: 100%; height: 100%; object-fit: cover; display: block; }
.alluha-vide {
  background:
    repeating-linear-gradient(to bottom, transparent 0 1.9rem, rgba(12, 74, 52, 0.28) 1.9rem calc(1.9rem + 2px)) 0 5.5rem / 100% 100% no-repeat,
    var(--bois);
}

.titre-section { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1.2em; }
.rubriques { margin: 0; }
.rubrique { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem 2.5rem; padding-block: 1.5rem; border-top: 1px solid var(--trait); }
.rubrique:last-child { border-bottom: 1px solid var(--trait); }
.rubrique dt { font-family: var(--titres); font-size: 1.3rem; font-weight: 500; color: var(--vert-profond); }
.rubrique dd { margin: 0; max-width: 40rem; }

/* ---------- Pages de contenu ---------- */
.chapeau { font-size: 1.2rem; color: var(--vert-profond); border-left: 4px solid var(--rose); padding-left: 1rem; }
.texte h2 { margin-top: 1.6em; }
.texte ul { padding-left: 1.2rem; }
.voir-aussi { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.voir-aussi ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.6rem 1.6rem; flex-wrap: wrap; }

/* ---------- Formulaires ---------- */
.formulaire { display: grid; gap: 1.1rem; margin-block: 1.5rem; max-width: 26rem; }
.formulaire-large { max-width: 44rem; }
.formulaire label { display: grid; gap: 0.35rem; font-weight: 600; }
.formulaire input, .formulaire select, .formulaire textarea, .tableau select {
  font: inherit; font-weight: 400; color: var(--encre); background: var(--blanc);
  border: 1px solid #8a9990; border-radius: 6px; padding: 0.55rem 0.7rem; width: 100%;
}
.formulaire input[type="file"] { border-style: dashed; }
.formulaire .case { display: flex; align-items: center; gap: 0.6rem; font-weight: 500; }
.formulaire .case input { width: auto; }
.formulaire .bouton { justify-self: start; }
.aide { color: var(--gris); font-size: 0.95rem; margin: -0.5rem 0 0; }

.message { padding: 0.8rem 1rem; border-radius: 6px; margin-block: 1rem; border-left: 5px solid; }
.message-ok { background: var(--vert-pale); border-color: var(--vert); }
.message-info { background: var(--rose-pale); border-color: var(--rose); }
.message-erreur { background: #fbe9ea; border-color: var(--rouge); color: #6d1a20; }

/* ---------- Administration ---------- */
.admin-nav { background: var(--vert-pale); border-bottom: 1px solid var(--trait); }
.admin-nav .cadre { display: flex; gap: 1.5rem; flex-wrap: wrap; padding-block: 0.7rem; }
.admin-nav a { text-decoration: none; font-weight: 600; color: var(--vert-profond); }
.admin-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rose); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.compteurs { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.compteurs strong { font-family: var(--titres); font-size: 1.6rem; color: var(--vert-profond); margin-right: 0.3rem; }
.compteurs a { margin-left: 0.8rem; }
.filtres { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.filtres a[aria-current="true"] { font-weight: 700; color: var(--vert-profond); text-decoration: none; }
.tableau-defilant { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; min-width: 44rem; }
.tableau th, .tableau td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tableau th { font-size: 0.95rem; color: var(--gris); font-weight: 600; }
.tableau .actions, .tableau .actions form { display: flex; align-items: center; gap: 0.9rem; margin: 0; }
.fiche { display: grid; grid-template-columns: 7rem 1fr; gap: 0.4rem 1rem; margin-block: 1.5rem 2.5rem; }
.fiche dt { color: var(--gris); }
.fiche dd { margin: 0; }

/* ---------- Pied de page ---------- */
.pied { background: var(--vert-profond); color: #dcebe3; margin-top: 2rem; }
.pied h2 { color: var(--blanc); font-size: 1.1rem; }
.pied a { color: var(--blanc); }
.pied-grille { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; padding-block: 2.5rem 1.5rem; }
.pied-grille p { max-width: 34rem; }
.pied-bas { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-block: 1rem; font-size: 0.95rem; }

/* ---------- Mobile ---------- */
@media (max-width: 52rem) {
  .menu-bouton { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-block: 0.6rem; }
  .menu.ouvert { display: flex; }
  .menu-compte { padding-left: 0; border-left: 0; border-top: 1px solid var(--trait); padding-top: 0.8rem; width: 100%; flex-wrap: wrap; }
  .accueil-grille { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.5rem; }
  .alluha { max-width: 15rem; }
  .rubrique { grid-template-columns: 1fr; gap: 0.4rem; }
  .pied-grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .bloc { padding-block: 2rem; }
}

/* ---------- Pied de page toujours en bas de l'écran ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.pied { margin-top: auto; }

/* ---------- Étapes 2 et 3 : vidéos, albums, annonces, groupes ---------- */
.cadre-moyen { width: min(100% - 2.5rem, 52rem); }
.bloc-teinte { background: var(--rose-pale); }
.entete-page { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.entete-page h1, .entete-page .titre-section { margin-bottom: 0.3em; }
.titre-bloc { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.meta { color: var(--gris); font-size: 0.95rem; margin-bottom: 0.5em; }
.etiquette { display: inline-block; background: var(--rose-pale); border: 1px solid var(--rose); color: var(--vert-profond); border-radius: 4px; padding: 0 0.45rem; font-size: 0.85rem; margin-left: 0.4rem; }
.actions-ligne { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-block: 1rem; }
.bouton-contour { background: var(--blanc); color: var(--vert); }
.bouton-contour:hover { background: var(--vert-pale); color: var(--vert-profond); }

.grille-medias { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.8rem 1.4rem; }
.media { display: grid; gap: 0.5rem; text-decoration: none; color: var(--encre); }
.media-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--vert-pale); position: relative; }
.media-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-vide { background: var(--bois); }
.media-video::after {
  content: ""; position: absolute; left: 0.7rem; bottom: 0.7rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: rgba(12, 74, 52, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7v10l8-5z'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}
.media-titre { font-weight: 600; line-height: 1.35; }
.media:hover .media-titre { color: var(--vert); text-decoration: underline; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2rem; }

.lecteur { aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.lecteur iframe { width: 100%; height: 100%; border: 0; display: block; }
.lecteur-bouton { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.lecteur-bouton img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; }
.lecteur-play {
  position: absolute; left: 50%; top: 50%; width: 5rem; height: 5rem; margin: -2.5rem 0 0 -2.5rem; border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 3rem no-repeat;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}
.lecteur-bouton:hover .lecteur-play { background-color: var(--vert-profond); }
.titre-video { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 1.2rem; }
.description { margin-block: 1.5rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.description summary { cursor: pointer; font-weight: 600; color: var(--vert-profond); margin-bottom: 0.8rem; }
.voisines { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-block: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--trait); }
.voisines a { text-decoration: none; font-weight: 600; }
.voisines a span { display: block; font-weight: 400; color: var(--gris); font-size: 0.95rem; }
.voisines .droite { text-align: right; }

.grille-photos { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.8rem; }
.grille-photos a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--vert-pale); }
.grille-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grille-photos form { margin: 0.2rem 0 0; font-size: 0.9rem; }
.visionneuse { border: 0; padding: 0; background: #0a1611; max-width: 96vw; max-height: 96vh; border-radius: 8px; }
.visionneuse::backdrop { background: rgba(6, 20, 14, 0.88); }
.visionneuse img { display: block; max-width: 96vw; max-height: calc(96vh - 3.5rem); margin: 0 auto; }
.visionneuse-barre { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.9rem; }
.visionneuse-barre button { font: inherit; font-weight: 600; background: none; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; border-radius: 6px; padding: 0.3rem 0.9rem; cursor: pointer; }

.annonce { padding-block: 1.5rem; border-top: 1px solid var(--trait); }
.annonce h2 { margin-bottom: 0.2em; }
.liste-actus { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }
.liste-actus h3 { font-size: 1.2rem; margin-bottom: 0.4em; }
.liste-actus h3 a { color: var(--vert-profond); }

.liste-groupes { list-style: none; padding: 0; margin: 0; }
.liste-groupes li { padding-block: 1.3rem; border-top: 1px solid var(--trait); }
.liste-groupes h2 { margin-bottom: 0.2em; }
.groupe-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; align-items: start; }
.message-groupe { padding-block: 1rem; border-top: 1px solid var(--trait); }
.message-groupe .texte p:last-child { margin-bottom: 0.4em; }
.liste-membres { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.liste-membres li { padding-block: 0.6rem; border-bottom: 1px solid var(--trait); }
.liste-membres .actions-ligne { margin-block: 0.3rem 0; font-size: 0.92rem; gap: 0.9rem; }

@media (max-width: 68rem) {
  .menu { gap: 1rem; }
  .menu-compte { padding-left: 1rem; }
}
@media (max-width: 62rem) {
  .menu-bouton { display: block; }
  .menu { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-block: 0.6rem; }
  .menu.ouvert { display: flex; }
  .menu-compte { padding-left: 0; border-left: 0; border-top: 1px solid var(--trait); padding-top: 0.8rem; width: 100%; flex-wrap: wrap; }
  .groupe-colonnes { grid-template-columns: 1fr; gap: 2rem; }
}
.lecteur video { width: 100%; height: 100%; display: block; background: #000; }
.separateur-ou { text-align: center; color: var(--gris); font-weight: 600; margin: 0; }
.rapport { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.rapport code, .chemin { font-family: Consolas, "Courier New", monospace; font-size: 0.95rem; background: var(--vert-pale); padding: 0.1rem 0.35rem; border-radius: 4px; overflow-wrap: anywhere; }
.tableau-copie { width: 100%; border-collapse: collapse; margin-block: 1rem; }
.tableau-copie th, .tableau-copie td { text-align: left; padding: 0.6rem 0.7rem; border: 1px solid var(--trait); vertical-align: top; }

/* ================= Livraison 5 ================= */
/* Correction des débordements : un titre long sans espace ne pousse plus sa voisine */
.grille-medias > li, .grille-photos > li, .media { min-width: 0; }
.media-titre, .titre-video, .voisines a, h1, h2 { overflow-wrap: anywhere; }
.titre-rubrique { font-size: 1.2rem; margin: 2rem 0 0; }
.media-dossier { box-shadow: 6px -6px 0 var(--vert-pale), 6px -6px 0 1px var(--trait); margin-top: 6px; margin-right: 6px; }
.media-dossier::after {
  content: ""; position: absolute; left: 0.7rem; bottom: 0.7rem; width: 2.4rem; height: 2.4rem; border-radius: 6px;
  background: rgba(12, 74, 52, 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 6h6l2 2h8v10H4z'/%3E%3C/svg%3E") center / 1.5rem no-repeat;
}

/* Bandeau de contact au-dessus de l'en-tête */
.bandeau-contact { background: var(--vert-profond); color: var(--blanc); font-size: 0.95rem; }
.bandeau-contact .cadre { display: flex; gap: 0.3rem 1.8rem; flex-wrap: wrap; padding-block: 0.4rem; }
.bandeau-contact a { color: var(--blanc); text-decoration: none; font-weight: 500; }
.bandeau-contact a:hover { text-decoration: underline; }

/* Accueil : diaporama dans la tablette, plus grand */
.accueil-grille { grid-template-columns: 1fr minmax(16rem, 27rem); }
.alluha { aspect-ratio: 1 / 1; position: relative; }
.diaporama img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.diaporama img.actif { opacity: 1; animation: zoom-lent 6.5s ease-out both; }
@keyframes zoom-lent { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .diaporama img, .diaporama img.actif { transition: none; animation: none; } }

/* Accueil : chaque rubrique est cliquable en entier, le résumé reste court */
.rubrique { position: relative; transition: background-color 0.15s; }
.rubrique:hover { background: var(--vert-pale); }
.rubrique dt a { color: inherit; text-decoration: none; }
.rubrique dt a::after { content: ""; position: absolute; inset: 0; }
.rubrique dd p { margin-bottom: 0.4em; }
.rubrique-suite { color: var(--vert); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.rubrique { padding-inline: 0.8rem; margin-inline: -0.8rem; }

/* Pages illustrées */
.cadre-page { width: min(100% - 2.5rem, 62rem); }
.page-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 19rem); gap: 2.5rem; align-items: start; }
.page-image-gauche .page-image { order: -1; }
.page-image-gauche { grid-template-columns: minmax(12rem, 19rem) minmax(0, 1fr); }
.page-image { margin: 0 0 1.5rem; }
.page-image img { display: block; width: 100%; border-radius: 8px; }
.page-image figcaption, .photo-grande figcaption { color: var(--gris); font-size: 0.95rem; margin-top: 0.5rem; }
.page-video { margin-block: 2rem; }
.groupe-champs { border: 1px solid var(--trait); border-radius: 8px; padding: 1rem 1.1rem; margin: 0; display: grid; gap: 1rem; }
.groupe-champs legend { font-weight: 700; color: var(--vert-profond); padding-inline: 0.4rem; }
.formulaire .case img { border-radius: 4px; }

/* Partage, pagination, photo, commentaires */
.partage { display: flex; align-items: center; gap: 0.5rem 1.1rem; flex-wrap: wrap; margin-block: 1rem; }
.partage span { color: var(--gris); }
.pagination { flex-wrap: wrap; }
.pagination-pages { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pagination-pages a, .pagination-pages strong { display: grid; place-items: center; min-width: 2.3rem; height: 2.3rem; padding-inline: 0.4rem; border-radius: 6px; text-decoration: none; border: 1px solid var(--trait); }
.pagination-pages strong { background: var(--vert-profond); color: var(--blanc); border-color: var(--vert-profond); }
.pagination-pages a:hover { background: var(--vert-pale); }
.grille-photos a { position: relative; }
.pastille { position: absolute; left: 0.4rem; bottom: 0.4rem; background: rgba(12, 74, 52, 0.92); color: var(--blanc); font-size: 0.8rem; padding: 0.1rem 0.45rem; border-radius: 4px; }
.photo-grande { margin: 1rem 0; text-align: center; }
.photo-grande img { max-width: 100%; max-height: 78vh; border-radius: 8px; background: var(--vert-pale); }
.photo-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.photo-nav > :last-child { justify-self: end; }
.photo-nav > :first-child { justify-self: start; }
.photo-nav .meta { margin: 0; }
.photo-dessous { margin-inline: auto; }
.commentaires { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.commentaire { padding-block: 0.9rem; border-bottom: 1px solid var(--trait); }
.commentaire .texte p:last-child { margin-bottom: 0.3em; }
.protege img, .protege video { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

/* Statistiques */
.indicateurs { list-style: none; padding: 0; margin: 1.5rem 0 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem 2rem; }
.indicateurs li { border-top: 3px solid var(--rose); padding-top: 0.6rem; }
.indicateurs strong { display: block; font-family: var(--titres); font-size: 2rem; line-height: 1.1; color: var(--vert-profond); }
.indicateurs .etiquette { margin: 0.3rem 0 0; }
.legende-graphe { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pastille-couleur { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; margin-left: 0.6rem; }
.couleur-videos { background: var(--vert); }
.couleur-albums { background: var(--rose); }
.graphe { display: flex; align-items: flex-end; gap: 2px; height: 14rem; border-bottom: 2px solid var(--vert-profond); margin-bottom: 1.8rem; }
.graphe-colonne { flex: 1 1 0; min-width: 0; height: 100%; position: relative; display: flex; align-items: flex-end; }
.graphe-barre { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; }
.graphe-barre span { display: block; min-height: 0; border-radius: 2px 2px 0 0; }
.graphe-colonne:hover .graphe-barre { outline: 2px solid var(--vert-profond); outline-offset: 1px; }
.graphe-date { position: absolute; top: 100%; left: 0; margin-top: 0.35rem; font-size: 0.75rem; color: var(--gris); white-space: nowrap; }
.stats-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem 3rem; margin-top: 1rem; }
.tableau-compact { min-width: 0; }
.tableau-compact td, .tableau-compact th { padding: 0.5rem 0.6rem; }
.colonne-barre { width: 40%; white-space: nowrap; }
.barre-pays { display: inline-block; height: 0.8rem; background: var(--vert); border-radius: 2px; vertical-align: middle; max-width: 75%; min-width: 2px; }
.grille-photos-petite { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

@media (max-width: 52rem) {
  .accueil-grille { grid-template-columns: 1fr; }
  .alluha { max-width: 20rem; }
  .page-colonnes, .page-image-gauche { grid-template-columns: 1fr; }
  .page-image { max-width: 20rem; }
  .page-image-droite .page-image { order: -1; }
}

/* ================= Livraison 6 ================= */
/* Menu « Le Centre » */
.sous-menu { position: relative; }
.sous-menu summary { cursor: pointer; font-weight: 500; padding-block: 0.3rem; border-bottom: 2px solid transparent; list-style: none; display: flex; align-items: center; gap: 0.35rem; }
.sous-menu summary::-webkit-details-marker { display: none; }
.sous-menu summary::after { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sous-menu summary:hover, .sous-menu summary.actif { border-bottom-color: var(--rose); color: var(--vert-profond); }
.sous-menu-liste { position: absolute; left: -0.8rem; top: calc(100% + 0.5rem); z-index: 20; min-width: 15rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; box-shadow: 0 10px 24px rgba(12, 74, 52, 0.14); padding: 0.4rem; display: grid; }
.menu .sous-menu-liste a { padding: 0.5rem 0.7rem; border: 0; border-radius: 5px; }
.menu .sous-menu-liste a:hover, .menu .sous-menu-liste a[aria-current="page"] { background: var(--vert-pale); }

/* Textes structurés : sommaire, tableaux, listes numérotées */
.sommaire { background: var(--vert-pale); border-left: 4px solid var(--vert); border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin-bottom: 2rem; }
.sommaire h2 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.sommaire .niveau-3 { padding-left: 1.2rem; font-size: 0.95rem; }
.texte h2, .texte h3 { scroll-margin-top: 1rem; }
.texte h3 { font-size: 1.15rem; margin-top: 1.4em; }
.texte ol { padding-left: 1.4rem; }
.texte li { margin-bottom: 0.25em; }
.tableau-texte { border-collapse: collapse; width: 100%; margin-block: 1rem 1.5rem; }
.tableau-texte th, .tableau-texte td { border: 1px solid var(--trait); padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.tableau-texte th { background: var(--vert-profond); color: var(--blanc); font-weight: 600; }
.tableau-texte tbody tr:nth-child(even) { background: var(--vert-pale); }

/* Éditeur des pages */
.champ-editeur { display: grid; gap: 0.35rem; }
.champ-editeur > label { font-weight: 600; }
.barre-outils { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.barre-outils button { font: inherit; font-size: 0.92rem; background: var(--blanc); border: 1px solid #8a9990; border-radius: 5px; padding: 0.25rem 0.7rem; cursor: pointer; color: var(--vert-profond); }
.barre-outils button:hover { background: var(--vert-pale); }
.champ-editeur textarea { font-family: Consolas, "Courier New", monospace; font-size: 0.98rem; line-height: 1.5; }

/* Documents */
.liste-documents { list-style: none; padding: 0; margin: 0.8rem 0 0; }
.liste-documents li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--trait); }
.liste-documents a { font-weight: 600; font-size: 1.08rem; }
.liste-documents p { margin: 0.2rem 0 0; }
.type-fichier { display: grid; place-items: center; height: 3.4rem; border-radius: 6px; font-size: 0.8rem; font-weight: 700; color: var(--blanc); background: var(--rouge); }
.type-docx { background: #1f5fa8; }
.lecteur-document { display: block; width: 100%; height: 82vh; min-height: 30rem; border: 1px solid var(--trait); border-radius: 8px; background: var(--vert-pale); }
.feuille { background: var(--blanc); border: 1px solid var(--trait); border-radius: 8px; padding: clamp(1.2rem, 4vw, 3rem); box-shadow: 0 6px 18px rgba(12, 74, 52, 0.08); max-width: 52rem; }
.feuille h2 { font-size: 1.35rem; margin-top: 1.4em; }
.feuille h2:first-child { margin-top: 0; }

/* Équipe */
.portrait { display: grid; grid-template-columns: minmax(11rem, 17rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-block: 2.5rem; border-top: 1px solid var(--trait); }
.portrait-inverse { grid-template-columns: minmax(0, 1fr) minmax(11rem, 17rem); }
.portrait-inverse .portrait-photo { order: 2; }
.portrait-principal { grid-template-columns: minmax(13rem, 22rem) minmax(0, 1fr); border-top: 0; padding-top: 1rem; }
.portrait-photo { aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--vert-pale); box-shadow: 10px 10px 0 var(--rose-pale); }
.portrait-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-initiales { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--titres); font-size: 3rem; font-weight: 700; color: var(--vert-profond); }
.portrait-texte h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin-bottom: 0.2em; }
.portrait-fonction { color: var(--vert); font-weight: 600; margin-bottom: 1em; }
.portrait-texte .texte { max-width: 42rem; }
.mosaique-equipe { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 2rem 1.6rem; }
.mosaique-equipe h3 { font-size: 1.1rem; margin: 0.9rem 0 0.1rem; }
.mosaique-equipe .portrait-fonction { margin: 0; font-size: 0.95rem; }
.mosaique-equipe .portrait-photo { box-shadow: 6px 6px 0 var(--rose-pale); }

@media (max-width: 62rem) {
  .sous-menu { width: 100%; }
  .sous-menu-liste { position: static; box-shadow: none; border: 0; padding: 0.2rem 0 0.2rem 0.9rem; min-width: 0; }
}
@media (max-width: 46rem) {
  .portrait, .portrait-inverse, .portrait-principal { grid-template-columns: 1fr; gap: 1.3rem; padding-block: 1.8rem; }
  .portrait-inverse .portrait-photo { order: 0; }
  .portrait-photo { max-width: 15rem; }
}

/* ================= Livraison 7 ================= */
/* Nombre de vues sur les vignettes */
.vues { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gris); font-size: 0.88rem; white-space: nowrap; }
.vues svg { flex: none; }
.grille-photos .vues { margin-top: 0.3rem; font-size: 0.82rem; }
.meta .vues { margin-inline: 0.3rem; }

/* Boutons de partage avec icônes */
.partage { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-block: 1.2rem; }
.partage-titre { color: var(--gris); font-weight: 600; margin-right: 0.3rem; }
.partage-bouton {
  display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  text-decoration: none; color: var(--vert-profond); background: var(--blanc); border: 1px solid #8a9990; border-radius: 999px; padding: 0.4rem 0.95rem;
}
.partage-bouton[hidden] { display: none; }
.partage-bouton:hover { background: var(--vert-pale); color: var(--vert-profond); }
.partage-whatsapp { background: #0b6b57; border-color: #0b6b57; color: #fff; }
.partage-whatsapp:hover { background: #084c3e; border-color: #084c3e; color: #fff; }
.partage-facebook { background: #1359c4; border-color: #1359c4; color: #fff; }
.partage-facebook:hover { background: #0e4496; border-color: #0e4496; color: #fff; }
.couleur-documents { background: #b98a2f; }

/* ================= Livraison 9 : choix des rubriques de documents ================= */
.choix-rubriques { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.2rem 0.5rem; }
.choix-rubriques a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-weight: 600; color: var(--vert-profond); border: 1px solid #8a9990; border-radius: 999px; padding: 0.35rem 0.9rem; }
.choix-rubriques a:hover { background: var(--vert-pale); }
.choix-rubriques a[aria-current="true"] { background: var(--vert-profond); border-color: var(--vert-profond); color: var(--blanc); }
.choix-rubriques span { font-size: 0.85rem; font-weight: 500; background: var(--vert-pale); color: var(--vert-profond); border-radius: 999px; padding: 0 0.5rem; }
.formulaire label[hidden] { display: none; }

/* ================= Livraison 12 : documents en vignettes, rubriques, recherche ================= */
.recherche-documents { margin-block: 1.2rem 1.6rem; max-width: 44rem; }
.recherche-documents label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.recherche-ligne { display: flex; gap: 0.6rem; }
.recherche-ligne input { flex: 1; min-width: 0; font: inherit; padding: 0.65rem 0.9rem; border: 2px solid var(--vert); border-radius: 8px; background: var(--blanc); color: var(--encre); }
.recherche-ligne input::placeholder { color: #6b7a72; }
mark { background: #ffe9a8; color: inherit; border-radius: 2px; padding: 0 0.1em; }
.resultat-recherche { margin-bottom: 1rem; }

.zone-rubriques { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.8rem; margin-bottom: 2rem; }
.zone-rubriques a {
  display: grid; gap: 0.15rem; text-decoration: none; color: var(--vert-profond); background: var(--vert-pale);
  border: 1px solid var(--trait); border-left: 5px solid var(--vert); border-radius: 0 8px 8px 0; padding: 0.7rem 0.9rem; min-width: 0;
}
.zone-rubriques a:hover { border-color: var(--vert); background: #dcefe4; }
.zone-rubriques a[aria-current="true"] { background: var(--vert-profond); border-color: var(--vert-profond); border-left-color: var(--rose); color: var(--blanc); }
.rubrique-nom { font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; }
.rubrique-nombre { font-size: 0.88rem; opacity: 0.85; }

.grille-documents { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.6rem 1.3rem; }
.grille-documents > li { min-width: 0; }
.doc-carte { display: grid; gap: 0.5rem; text-decoration: none; color: var(--encre); min-width: 0; }
.doc-feuille {
  position: relative; display: flex; flex-direction: column; gap: 0.5rem; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--blanc); border: 1px solid #c9d4cd; border-top: 6px solid var(--rouge); border-radius: 4px 4px 8px 8px;
  padding: 0.8rem 0.9rem 0.7rem; box-shadow: 0 3px 10px rgba(12, 74, 52, 0.08); transition: transform 0.15s, box-shadow 0.15s;
}
.doc-feuille.type-docx { border-top-color: #1f5fa8; }
.doc-carte:hover .doc-feuille { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(12, 74, 52, 0.16); }
.doc-type { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--blanc); background: var(--rouge); border-radius: 3px; padding: 0.05rem 0.4rem; }
.type-docx .doc-type { background: #1f5fa8; }
.doc-titre { font-weight: 700; line-height: 1.3; color: var(--vert-profond); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.doc-carte:hover .doc-titre { text-decoration: underline; }
.doc-rubrique { margin-top: auto; font-size: 0.82rem; color: var(--gris); border-top: 1px dashed #c9d4cd; padding-top: 0.4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.7rem; }
.doc-infos .meta { margin: 0; font-size: 0.88rem; }
.doc-infos .etiquette { margin-left: 0; }
.doc-extrait { font-size: 0.88rem; color: var(--gris); line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .grille-documents { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 0.8rem; }
  .doc-feuille { aspect-ratio: 1 / 1; padding: 0.6rem; }
  .recherche-ligne .bouton { padding-inline: 0.8rem; }
}
@media (max-width: 30rem) {
  .zone-rubriques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .zone-rubriques a { padding: 0.55rem 0.7rem; }
  .doc-titre { -webkit-line-clamp: 3; line-clamp: 3; font-size: 0.95rem; }
}

/* ================= Livraison 13 : volet institutionnel et recherche globale ================= */
.bandeau-contact .cadre { justify-content: space-between; align-items: center; }
.bandeau-coordonnees { display: flex; gap: 0.3rem 1.8rem; flex-wrap: wrap; }
.bandeau-recherche { display: flex; align-items: center; background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding-left: 0.8rem; }
.bandeau-recherche input { font: inherit; font-size: 0.92rem; background: transparent; border: 0; color: var(--blanc); width: 13rem; padding: 0.25rem 0.3rem; }
.bandeau-recherche input::placeholder { color: #cfe3d8; }
.bandeau-recherche input:focus { outline: none; }
.bandeau-recherche:focus-within { background: rgba(255, 255, 255, 0.26); outline: 2px solid var(--rose); }
.bandeau-recherche button { display: grid; place-items: center; background: none; border: 0; color: var(--blanc); cursor: pointer; padding: 0.3rem 0.7rem; }

.bouton-rose { background: var(--rose); border-color: var(--rose); color: #3c1420; }
.bouton-rose:hover { background: #f3b3bf; border-color: #f3b3bf; color: #3c1420; }
.accueil-recherche { margin-top: 2rem; max-width: 32rem; }
.accueil-recherche label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: #dcebe3; }
.accueil-recherche .recherche-ligne input { border-color: var(--blanc); }
.apercu-recherche { background: var(--rose-pale); border-bottom: 1px solid var(--trait); padding-block: 1.5rem; }
.apercu-recherche[hidden] { display: none; }

.chiffres-cles { background: var(--blanc); border-bottom: 1px solid var(--trait); }
.chiffres-cles dl { margin: 0; display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.5rem 2rem; padding-block: 2rem; }
.chiffres-cles dl > div { border-left: 4px solid var(--rose); padding-left: 0.9rem; }
.chiffres-cles dt { font-family: var(--titres); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.05; color: var(--vert-profond); }
.chiffres-cles dd { margin: 0.3rem 0 0; color: var(--gris); font-size: 0.95rem; line-height: 1.35; }

.appel-soutien { background: var(--vert-profond); color: #dcebe3; }
.appel-grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding-block: 2.6rem; }
.appel-soutien h2 { color: var(--blanc); font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; margin-bottom: 0.5em; }
.appel-soutien p { margin: 0; max-width: 46rem; }
.appel-actions { display: grid; gap: 0.9rem; justify-items: start; }

.groupe-resultats { margin-top: 1.8rem; }
.groupe-resultats h2 { font-size: 1.2rem; border-bottom: 2px solid var(--vert); padding-bottom: 0.3rem; margin-bottom: 0; }
.groupe-resultats h2 span { font-family: var(--texte); font-size: 0.85rem; font-weight: 600; background: var(--vert-pale); border-radius: 999px; padding: 0.05rem 0.55rem; margin-left: 0.4rem; }
.groupe-resultats ul { list-style: none; padding: 0; margin: 0; }
.groupe-resultats li { padding-block: 0.8rem; border-bottom: 1px solid var(--trait); }
.groupe-resultats li > a { font-weight: 600; font-size: 1.05rem; }
.groupe-resultats li .meta { margin-left: 0.6rem; }
.groupe-resultats li p { margin: 0.25rem 0 0; color: var(--gris); font-size: 0.95rem; overflow-wrap: anywhere; }

.invitation-contact { margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid var(--trait); display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.encart-contact { background: var(--vert-pale); border-radius: 8px; padding: 1.3rem 1.4rem; }
.encart-contact h2 { font-size: 1.15rem; }
.champ-piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-recu { border: 1px solid var(--trait); border-left: 5px solid var(--trait); border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin-block: 1rem; }
.message-recu.non-lu { border-left-color: var(--rose); background: var(--rose-pale); }
.message-recu h2 { font-size: 1.15rem; margin-bottom: 0.3em; }
.pied-grille { grid-template-columns: 2fr 1fr 1fr; }
.pied-liens { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }

@media (max-width: 52rem) {
  .appel-grille { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .bandeau-recherche input { width: 9rem; }
}

/* ================= Livraison 14 : rubriques réservées ================= */
.zone-rubriques a.rubrique-reservee { background: var(--blanc); border-left-color: #8a9990; border-style: dashed; border-left-style: solid; color: var(--gris); }
.zone-rubriques a.rubrique-reservee:hover { background: var(--vert-pale); }
.zone-rubriques a.rubrique-reservee[aria-current="true"] { background: var(--vert-profond); color: var(--blanc); border-style: solid; border-left-color: var(--rose); }
.rubrique-reservee .rubrique-nom::before {
  content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h8V8a4 4 0 0 0-8 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.acces-reserve p { margin: 0 0 0.6em; }
.acces-reserve p:last-child { margin-bottom: 0; }
.acces-reserve .actions-ligne { margin-block: 0.4rem 0; }

/* ================= Livraison 15 : module Audio ================= */
.liste-audios { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.liste-audios li { padding-block: 1.3rem; border-top: 1px solid var(--trait); }
.liste-audios h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2em; overflow-wrap: anywhere; }
.liste-audios h2 a { color: var(--vert-profond); text-decoration: none; }
.liste-audios h2 a:hover { text-decoration: underline; }
.liste-audios p { margin-bottom: 0.5em; }
.liste-audios audio, .lecteur-audio, #audio-ecoute { display: block; width: 100%; max-width: 40rem; margin-top: 0.4rem; }
.lecteur-audio { margin-block: 1rem; }
.etape-audio { border: 1px solid var(--trait); border-radius: 8px; padding: 1.2rem 1.4rem; margin-top: 1.4rem; }
.etape-audio[hidden] { display: none; }
.etape-audio h2 { font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }
.etape-audio h2 span { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--vert-profond); color: var(--blanc); font-family: var(--texte); font-size: 1rem; }
.etape-audio .formulaire { margin-block: 0.6rem 0; }
#audio-progression { display: grid; gap: 0.3rem; }
#audio-progression[hidden] { display: none; }
#audio-progression progress { width: 100%; height: 1rem; accent-color: var(--vert); }
#alerte-audio[hidden] { display: none; }
.couleur-audios { background: #2f6fb0; }

/* ================= Livraison 16 : cartes d'audios, partage compact ================= */
.grille-audios { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.3rem; }
.carte-audio { min-width: 0; display: flex; flex-direction: column; gap: 0.7rem; background: var(--blanc); border: 1px solid #c9d4cd; border-top: 5px solid var(--vert); border-radius: 6px 6px 10px 10px; padding: 1rem 1.1rem; box-shadow: 0 3px 10px rgba(12, 74, 52, 0.07); }
.carte-audio-tete { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.carte-audio-icone { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--vert-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230c4a34' d='M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3zm-6 9a1 1 0 0 1 2 0 4 4 0 0 0 8 0 1 1 0 0 1 2 0 6 6 0 0 1-5 5.900V20h2a1 1 0 0 1 0 2H9a1 1 0 0 1 0-2h2v-2.100A6 6 0 0 1 6 12z'/%3E%3C/svg%3E") center / 1.5rem no-repeat; }
.carte-audio h2 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.2rem; overflow-wrap: anywhere; }
.carte-audio h2 a { color: var(--vert-profond); text-decoration: none; }
.carte-audio h2 a:hover { text-decoration: underline; }
.carte-audio .meta { margin: 0; }
.carte-audio .etiquette { text-decoration: none; margin-left: 0.3rem; }
.carte-audio-texte { margin: 0; font-size: 0.97rem; color: var(--gris); }
.carte-audio audio { width: 100%; display: block; }
.carte-audio-pied { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: auto; }
.carte-audio .partage { margin: 0; padding-top: 0.7rem; border-top: 1px dashed #c9d4cd; }
.partage-compact .partage-titre { font-size: 0.9rem; font-weight: 500; }
.partage-compact .partage-bouton { padding: 0.4rem; width: 2.2rem; height: 2.2rem; justify-content: center; }
.partage-compact .partage-bouton.copie { width: auto; padding-inline: 0.7rem; }
.fil { color: var(--gris); }
@media (max-width: 30rem) { .grille-audios { grid-template-columns: 1fr; } }

/* ================= Livraison 17 : générateur de vidéo ================= */
.generateur { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.4rem; align-items: start; }
.generateur .etape-audio { margin-top: 1.4rem; }
#v-apercu { display: block; width: 100%; height: auto; border: 1px solid #c9d4cd; border-radius: 6px; background: #fff; }
#v-lecture { display: block; width: 100%; max-width: 48rem; border-radius: 6px; background: #000; }
#v-progression { display: grid; gap: 0.3rem; }
#v-progression[hidden], #alerte-video[hidden] { display: none; }
#v-progression progress { width: 100%; height: 1rem; accent-color: var(--vert); }
.entete-page .actions-ligne { margin: 0; }
@media (max-width: 60rem) { .generateur { grid-template-columns: 1fr; } }