/* ONPG — barre de filtres, lexique, médiathèque, pagination (contenus gérés en back-office) */

/* ---------- Barre de filtres : aérée, sans bordures collées ---------- */
.onpg-barre{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 20px;
  background:#fff; border:1px solid var(--bordure,#E2E3E0); border-radius:14px;
  padding:20px 24px; margin:0 0 26px;
}
.onpg-champ{ display:flex; flex-direction:column; gap:6px; min-width:170px; flex:0 1 190px; }
.onpg-champ--recherche{ flex:1 1 280px; min-width:240px; }
.onpg-champ label{
  font-family:var(--police-titre,'Manrope',sans-serif); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce,#56585C); margin:0;
}
.onpg-champ select,
.onpg-recherche{
  height:46px; width:100%; margin:0;
  border:1px solid #CFD2CD; border-radius:10px; background:#fff;
  font:inherit; font-size:.95rem; color:var(--encre,#17181C);
  transition:border-color .15s, box-shadow .15s;
}
.onpg-champ select{
  padding:0 40px 0 14px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2356585C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.onpg-recherche{ display:flex; align-items:center; gap:10px; padding:0 14px; color:var(--encre-douce,#56585C); }
.onpg-recherche input{
  flex:1; min-width:0; height:100%; border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent; padding:0; font:inherit; color:var(--encre,#17181C);
}
.onpg-champ select:hover, .onpg-recherche:hover{ border-color:#9FA39B; }
/* un seul anneau de focus, sur le conteneur */
.onpg-champ select:focus{ outline:0; border-color:var(--onpg-vert,#1DA34C); box-shadow:0 0 0 3px rgba(29,163,76,.2); }
.onpg-recherche:focus-within{ border-color:var(--onpg-vert,#1DA34C); box-shadow:0 0 0 3px rgba(29,163,76,.2); }
.onpg-recherche input:focus-visible{ outline:0; }
.onpg-barre__actions{ display:flex; align-items:center; gap:16px; margin-left:auto; }
.onpg-btn{
  height:46px; padding:0 24px; border:0; border-radius:10px; cursor:pointer;
  background:var(--onpg-vert,#1DA34C); color:#fff; font:inherit; font-weight:700; font-size:.92rem;
}
.onpg-btn:hover{ background:var(--onpg-vert-fonce,#16803B); }
.onpg-btn:focus-visible{ outline:3px solid rgba(29,163,76,.35); outline-offset:2px; }
.onpg-lien-reinit{ font-size:.88rem; color:var(--encre-douce,#56585C); text-decoration:underline; text-underline-offset:3px; }
.onpg-lien-reinit:hover{ color:var(--onpg-vert-fonce,#16803B); }
.onpg-vide{ padding:18px 4px; color:var(--encre-douce,#56585C); }
.onpg-vide[hidden]{ display:none; }

/* ---------- Pagination ---------- */
.onpg-pagination{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:26px 0 4px; }
.onpg-pagination .onpg-page{
  min-width:40px; height:40px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #CFD2CD; border-radius:10px; background:#fff; color:var(--encre,#17181C); text-decoration:none; font-weight:600;
}
.onpg-pagination a.onpg-page:hover{ border-color:var(--onpg-vert,#1DA34C); color:var(--onpg-vert-fonce,#16803B); }
.onpg-page--courante{ background:var(--onpg-vert,#1DA34C); border-color:var(--onpg-vert,#1DA34C); color:#fff; }

/* ---------- Lexique ---------- */
.onpg-barre--lexique{ align-items:flex-end; }
.onpg-lexique__compte{ margin:0 0 0 auto; padding-bottom:12px; font-size:.88rem; color:var(--encre-douce,#56585C); }
.onpg-lexique__lettres{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; }
.onpg-lettre{
  min-width:40px; height:40px; padding:0 12px; border:1px solid #CFD2CD; border-radius:10px;
  background:#fff; font:inherit; font-weight:700; cursor:pointer; color:var(--encre,#17181C);
}
.onpg-lettre:hover{ border-color:var(--onpg-vert,#1DA34C); }
.onpg-lettre:focus-visible{ outline:3px solid rgba(29,163,76,.35); outline-offset:2px; }
.onpg-lettre--active{ background:var(--onpg-bleu,#10233F); border-color:var(--onpg-bleu,#10233F); color:#fff; }
.onpg-lexique__liste{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.onpg-terme{ border:1px solid var(--bordure,#E2E3E0); border-left:4px solid var(--onpg-vert,#1DA34C); border-radius:10px; padding:16px 18px; background:#fff; }
.onpg-terme[hidden]{ display:none; }
.onpg-terme h3, .onpg-terme h4{ margin:0 0 6px; font-size:1rem; }
.onpg-terme p{ margin:0; font-size:.93rem; line-height:1.55; color:var(--encre-douce,#56585C); }

/* ---------- Médiathèque ---------- */
.media-tuile{ background-size:cover; background-position:center; background-color:#10233F; display:block; cursor:zoom-in; text-decoration:none; }
.media-tuile:focus-visible{ outline:3px solid var(--onpg-vert,#1DA34C); outline-offset:2px; }
.onpg-transcription{ margin-top:12px; font-size:.9rem; }
.onpg-transcription summary{ cursor:pointer; font-weight:700; color:var(--onpg-vert-fonce,#16803B); }
.onpg-transcription > div{ margin-top:8px; line-height:1.55; color:var(--encre-douce,#56585C); }
.carte-audio audio{ width:100%; margin-top:6px; }

.onpg-visionneuse{ position:fixed; inset:0; z-index:99999; background:rgba(16,35,63,.88); display:flex; align-items:center; justify-content:center; padding:24px; }
.onpg-visionneuse[hidden]{ display:none; }
.onpg-visionneuse__boite{ position:relative; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.onpg-visionneuse__corps{ max-width:100%; }
.onpg-visionneuse__corps img{ max-width:100%; max-height:76vh; border-radius:8px; display:block; }
.onpg-visionneuse__corps iframe, .onpg-visionneuse__corps video{ width:min(960px,92vw); aspect-ratio:16/9; border:0; border-radius:8px; background:#000; }
.onpg-visionneuse__legende{ color:#fff; margin:0; text-align:center; }
.onpg-visionneuse__fermer{ z-index:2; position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%; border:0; background:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.onpg-visionneuse__dl{ color:#fff; text-decoration:underline; }
.onpg-bloque{ overflow:hidden; }

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .onpg-barre{ padding:16px; gap:14px; }
  .onpg-champ, .onpg-champ--recherche{ flex:1 1 100%; min-width:0; }
  .onpg-barre__actions{ width:100%; margin-left:0; }
  .onpg-btn{ flex:1; }
  .onpg-lexique__liste{ grid-template-columns:1fr; }
  .onpg-lexique__compte{ margin:0; padding:0; }
  .onpg-visionneuse__fermer{ top:-8px; right:-4px; }
}

/* ---------- Formulaire de contact ---------- */
.onpg-form-contact .onpg-champ{ flex:none; width:100%; margin-bottom:16px; }
.onpg-input{
  width:100%; border:1px solid #CFD2CD; border-radius:10px; background:#fff; padding:12px 14px;
  font:inherit; font-size:.95rem; color:var(--encre,#17181C);
}
.onpg-input:focus{ outline:0; border-color:var(--onpg-vert,#1DA34C); box-shadow:0 0 0 3px rgba(29,163,76,.2); }
.onpg-form-contact select{ height:46px; }
.onpg-notice{ padding:14px 16px; border-radius:10px; margin-bottom:16px; font-size:.92rem; }
.onpg-notice--ok{ background:#E4F5EA; color:#16803B; border:1px solid #cfe6da; }
.onpg-notice--err{ background:#FBEAE2; color:#7A2B07; border:1px solid #f0c9b6; }

/* ---------- Sections pleine largeur Elementor : contenu centré ---------- */
.elementor-section.onpg-sec > .elementor-container{ max-width:1180px; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; }
.onpg-onglets{ width:100%; }
.onpg-citation .elementor-testimonial-content{ font-style:italic; }
.elementor-section.onpg-lisible > .elementor-container{ max-width:900px; }

/* ---------- Documents : tuile ronde + bouton Télécharger ---------- */
.ligne-document .icone-doc.icone-tuile{ width:46px; height:46px; border-radius:50%; background:#E4F5EA; color:#16803B; }
.ligne-document .icone-doc.icone-tuile svg{ width:22px; height:22px; }
.onpg-dl{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px;
  background:var(--onpg-vert,#1DA34C); color:#fff !important; font-weight:700; font-size:.88rem; text-decoration:none !important;
}
.onpg-dl:hover{ background:var(--onpg-vert-fonce,#16803B); }
.onpg-dl:focus-visible{ outline:3px solid rgba(29,163,76,.35); outline-offset:2px; }