/* =====================================================================
   CERM — feuille de style du site public
   Palette et gabarits relevés sur le site d'origine (le-cerm.fr).
   Organisation : 1. variables  2. base  3. mise en page  4. composants  5. accueil
   ===================================================================== */

/* Police des grands titres (« Tilt Warp », licence SIL OFL 1.1 : assets/fonts/OFL-Tilt-Warp.txt), copie locale : rien n'est demandé à Google.
   Seul le sous-ensemble « latin » (français complet) est embarqué ; les autres caractères prennent la police de secours de --cerm-font-title. */
@font-face {
  font-family: "Tilt Warp";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/tilt-warp-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Variables ------------------------------------------------------- */
:root {
  --cerm-primary: #1c238a;
  --cerm-primary-2: #20289f;
  --cerm-primary-dark: #191d5a;
  --cerm-secondary: #00afef;
  --cerm-secondary-2: #0abdff;
  --cerm-light: #e8e9fa;
  --cerm-lighter: #fdfdff;
  --cerm-dark: #525252;
  --cerm-text: #808080;
  --cerm-link: #0a6ebd;
  --cerm-success: #00831a;
  --cerm-info: #00b4ec;
  --cerm-warning: #e19900;
  --cerm-danger: #d90023;
  --cerm-footer-veil: rgba(1, 69, 127, .5);
  --cerm-shadow: 0 0 3.75rem rgba(82, 82, 82, .05);
  --cerm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --cerm-font-title: "Tilt Warp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cerm-sidebar-w: 250px;
  --bs-primary: var(--cerm-primary);
  --bs-link-color: var(--cerm-link);
}

/* 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.cerm-site {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--cerm-text);
  font: 14px/24px var(--cerm-font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media print { body.cerm-site { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

a { color: var(--cerm-link); font-weight: 600; text-decoration: none; }
a:hover, a:focus { color: var(--cerm-primary); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cerm-secondary); outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 { color: var(--cerm-primary); font-weight: 400; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
img { max-width: 100%; height: auto; }
table { max-width: 100%; }
.cerm-skip { position: absolute; z-index: 3000; background: #fff; padding: 8px 14px; left: 8px; top: 8px; }
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3. Mise en page ---------------------------------------------------- */
.cerm-topbar {
  position: relative;
  min-height: 39px;
  background: var(--cerm-primary);
  z-index: 2;
}
.cerm-topbar__credit {
  position: absolute; top: 10px; right: 150px; z-index: 1100;
  color: #fff; font: 8pt/1.2 Helvetica, Arial, sans-serif;
}
/* Outils à droite de la barre supérieure : drapeaux de traduction (widget GTranslate, comme l'ancien site) puis lien « Panier (n) » */
.cerm-topbar__tools { position: absolute; top: 6px; right: 14px; z-index: 1100; display: flex; align-items: center; gap: 14px; min-height: 27px; }
.cerm-topbar.has-cart .cerm-topbar__credit { right: 250px; }   /* la mention « crédit photo » ne chevauche pas les outils quand le panier est affiché */
.cerm-translate { display: flex; align-items: center; gap: 6px; line-height: 0; }
.cerm-translate a { display: inline-flex; line-height: 0; }
.cerm-translate img { width: 24px; height: 24px; display: block; }
/* Bandeau que Google Translate tente d'ajouter en haut de page : masqué (le drapeau FR ramène au texte d'origine). */
body { top: 0 !important; }
.skiptranslate iframe, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
.cerm-topcart {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 12px;
  border-radius: 14px; background: rgba(255, 255, 255, .16);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 25px; text-decoration: none; white-space: nowrap;
}
.cerm-topcart:hover, .cerm-topcart:focus-visible { background: rgba(255, 255, 255, .3); color: #fff; text-decoration: none; }
.cerm-topcart.has-items { background: var(--cerm-secondary); }
.cerm-topcart.has-items:hover, .cerm-topcart.has-items:focus-visible { background: var(--cerm-secondary-2); }

.cerm-masthead { position: relative; z-index: 1050; height: 0; }

/* Logo de la page d'accueil : grand, posé sur la photo */
.cerm-logo { display: block; }
.cerm-logo--home { position: absolute; top: 24px; left: 35%; width: 380px; z-index: 1000; }
.cerm-logo--home img { display: block; width: 100%; height: auto; }
/* Logo des autres pages : onglet bleu arrondi sous la barre supérieure */
.cerm-logo--tab {
  position: absolute; top: -34px; left: 40%; width: 220px; z-index: 1;
  background: var(--cerm-primary); padding: 5px 20px 20px; border-radius: 0 0 50px 50px;
}
.cerm-logo--tab img { display: block; width: 100%; height: auto; }

.cerm-menu-btn {
  position: fixed; top: 45px; left: 5px; z-index: 1000;
  background: #fff; color: var(--cerm-primary);
  border: .5px solid var(--cerm-secondary); padding: 10px 15px;
  font: 20px/24px var(--cerm-font); cursor: pointer;
}
.cerm-menu-btn:hover { background: #fff; color: var(--cerm-primary); }

.cerm-sidebar {
  position: fixed; top: 0; left: 0; height: 100%; width: var(--cerm-sidebar-w);
  background: var(--cerm-secondary); color: #fbf20d;
  z-index: 1100; padding-top: 40px; overflow-x: hidden; overflow-y: auto;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .4s ease, visibility 0s linear .4s;
}
.cerm-sidebar.is-open { transform: translateX(0); visibility: visible; transition: transform .4s ease, visibility 0s; }
.cerm-sidebar__close {
  position: absolute; top: 0; right: 14px; background: none; border: 0; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer; padding: 4px 8px;
}
.cerm-sidebar__list { list-style: none; margin: 18px 0 0; padding: 0; }
.cerm-sidebar__list li { margin: 0; }
.cerm-sidebar__list a, .cerm-sidebar__logout button {
  display: block; padding: 4px 12px 4px 20px; color: #fff; font-size: 14px; font-weight: 400;
  background: none; border: 0; width: 100%; text-align: left; text-decoration: none; cursor: pointer;
}
.cerm-sidebar__list a:hover, .cerm-sidebar__logout button:hover { color: #fff; text-decoration: underline; }
.cerm-sidebar__list li.is-active > a { font-weight: 700; }
.cerm-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 1090; }
.cerm-backdrop[hidden] { display: none; }

.cerm-main { position: relative; margin: 0; padding: 20px 0 0; transition: margin-left .4s ease; }
body.cerm-site.is-inner .cerm-main { margin-top: 0; padding-top: 110px; }
@media (min-width: 992px) {
  body.menu-open .cerm-main, body.menu-open .cerm-footer { margin-left: var(--cerm-sidebar-w); }
  body.menu-open .cerm-backdrop { display: none; }
}
.cerm-footer { transition: margin-left .4s ease; }

.cerm-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px; }
.cerm-page { background: #fff; padding-top: 10px; padding-bottom: 40px; }
.cerm-page__title { text-transform: uppercase; font-size: 24px; margin-bottom: 25px; }

/* Pied de page */
.cerm-footer { position: relative; margin-top: 40px; color: #fff; }
/* Bouton « Haut de page » flottant (comme sur le site d'origine) : apparaît après un défilement, voir site.js */
.cerm-gotop { position: fixed; right: 0; bottom: 38px; z-index: 900; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; }
.cerm-gotop.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (prefers-reduced-motion: reduce) { .cerm-gotop { transition: none; transform: none; } }
.cerm-gotop a {
  display: flex; align-items: center; justify-content: center; width: 80px; height: 80px;
  background: var(--cerm-secondary); color: #fff; font-size: 40px; border-radius: 1px 0 1px 1px;
  box-shadow: 0 0 20px rgba(28, 35, 138, .1); text-decoration: none;
}
.cerm-gotop a:hover { background: var(--cerm-secondary-2); color: #fff; text-decoration: none; }
.cerm-footer__inner {
  background: linear-gradient(var(--cerm-footer-veil), var(--cerm-footer-veil)), url("../img/pexels-assedrani-official-2.jpg") center / cover no-repeat;
  padding: 30px 10px 40px;
}
.cerm-footer__nav { list-style: none; margin: 0; padding: 0; }
.cerm-footer__nav a {
  display: inline-block; padding: 8px 0; color: #fff; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; line-height: 11px; text-decoration: none;
}
.cerm-footer__nav a:hover { color: #fff; text-decoration: underline; }
.cerm-footer__nav .is-sub a { padding-left: 14px; font-weight: 400; }
.cerm-footer__copy { text-align: center; font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; padding: 10px 0; }
.cerm-footer__copy a { color: #fff; font-weight: 500; }
.cerm-footer__nav--legal { text-align: center; }

/* Bouton de partage flottant */
.cerm-share { position: fixed; left: 29px; bottom: 30px; z-index: 1000; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cerm-share__btn {
  width: 80px; height: 80px; border: 0; border-radius: 50%; color: #fff; font-size: 24px; cursor: pointer;
  background: linear-gradient(270deg, var(--cerm-primary) 20%, var(--cerm-primary-2) 95%);
  box-shadow: 5px 20px 30px rgba(82, 82, 82, .2); transition: transform .15s ease;
}
.cerm-share__btn:hover { transform: scale(1.05); }
.cerm-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; order: -1; }
.cerm-share__list[hidden] { display: none; }
.cerm-share__list a {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: #3b5998; color: #fff; font-size: 22px; box-shadow: 0 6px 14px rgba(0, 0, 0, .25); text-decoration: none;
}

/* Bandeau cookies */
.cerm-cookie {
  position: fixed; z-index: 2500; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 380px); background: #f1f1f1; color: #444; border: 1px solid #ddd; box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  padding: 18px 20px 20px; font-size: 12px; line-height: 1.45;
}
.cerm-cookie[hidden] { display: none; }
.cerm-cookie__head { display: flex; align-items: center; gap: 8px; font-size: 16px; color: #333; margin-bottom: 8px; }
.cerm-cookie p { margin: 0 0 14px; }
.cerm-cookie__actions { display: grid; gap: 10px; }
.cerm-btn-cookie {
  background: #008000; color: #fff; border: 0; padding: 12px; font-size: 13px; cursor: pointer; width: 100%;
}
.cerm-btn-cookie:hover { background: #006600; }

/* 4. Composants ------------------------------------------------------- */
.cerm-btn, .btn-cerm {
  display: inline-block; padding: 10px 24px; border: 0; border-radius: 1px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: 1px; text-align: center; text-decoration: none;
  color: #fff; background: linear-gradient(270deg, var(--cerm-primary) 20%, var(--cerm-primary-2) 95%);
  box-shadow: 3px 15px 25px rgba(82, 82, 82, .2); transition: all .15s ease-out;
}
.cerm-btn:hover, .btn-cerm:hover { color: #fff; text-decoration: none; box-shadow: 0 0 0 rgba(82, 82, 82, .2); background: var(--cerm-primary-dark); }
.cerm-btn--light { color: var(--cerm-dark); background: linear-gradient(270deg, var(--cerm-light) 20%, var(--cerm-lighter) 95%); font-size: 10.5px; padding: 7px 25px; }
.cerm-btn--light:hover { color: var(--cerm-dark); background: var(--cerm-light); }
.cerm-btn--secondary { background: linear-gradient(270deg, var(--cerm-secondary) 20%, var(--cerm-secondary-2) 95%); }
.cerm-btn[disabled], .cerm-btn.is-disabled { opacity: .6; pointer-events: none; }

/* Encadré d'information dans une page (état des inscriptions, aperçu d'un brouillon…) */
.cerm-note { margin: 0 0 12px; padding: 10px 14px; background: #eef7fc; border-left: 4px solid var(--cerm-info); border-radius: 4px; }

/* Encadré « Réservé aux adhérents », à la place d'un passage {connecte}…{/connecte} masqué à un visiteur (App\Core\ContentFilter) */
.cerm-private { display: flex; gap: 16px; align-items: flex-start; margin: 20px 0; padding: 16px 20px; border: 1px solid #c9d2f0; border-left: 5px solid var(--cerm-primary); border-radius: 6px; background: #f3f5ff; }
.cerm-private > .fa { flex: none; margin-top: 2px; font-size: 28px; color: var(--cerm-primary); }
.cerm-private__body { flex: 1; min-width: 0; }
.cerm-private__title { margin: 0 0 4px; font-weight: 700; font-size: 1.05em; color: var(--cerm-primary); }
.cerm-private__text { margin: 0 0 12px; }
.cerm-private__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cerm-private__actions .cerm-btn { padding: 9px 18px; font-size: 12px; letter-spacing: .5px; box-shadow: none; }
.cerm-private-inline { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: 10px; background: #e8e9fa; color: var(--cerm-primary); font-size: .9em; white-space: nowrap; }
.cerm-private-inline a { color: var(--cerm-primary); text-decoration: underline; }
@media (max-width: 575.98px) { .cerm-private { flex-direction: column; gap: 8px; padding: 14px 16px; } }

/* Alertes et notifications (remplacent alert()) */
.cerm-alerts {
  position: fixed; z-index: 3000; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 440px); display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.cerm-alert {
  pointer-events: auto; display: flex; gap: 12px; align-items: flex-start; background: #fff; color: #333;
  border-left: 6px solid var(--cerm-info); border-radius: 8px; padding: 14px 14px 14px 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28); font-size: 14px; line-height: 1.45;
  animation: cerm-pop .22s ease-out;
}
.cerm-alert.is-leaving { opacity: 0; transform: scale(.96); transition: all .2s ease; }
.cerm-alert__icon { font-size: 22px; line-height: 1; margin-top: 2px; color: var(--cerm-info); }
.cerm-alert__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cerm-alert__title { display: block; font-weight: 700; color: #222; margin-bottom: 2px; }
.cerm-alert__close { background: none; border: 0; font-size: 22px; line-height: 1; color: #777; cursor: pointer; padding: 0 4px; }
.cerm-alert--success { border-left-color: var(--cerm-success); } .cerm-alert--success .cerm-alert__icon { color: var(--cerm-success); }
.cerm-alert--warning { border-left-color: var(--cerm-warning); } .cerm-alert--warning .cerm-alert__icon { color: var(--cerm-warning); }
.cerm-alert--error, .cerm-alert--danger { border-left-color: var(--cerm-danger); } .cerm-alert--error .cerm-alert__icon, .cerm-alert--danger .cerm-alert__icon { color: var(--cerm-danger); }
@keyframes cerm-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

/* Fenêtre de confirmation (remplace confirm()) */
.cerm-modal-backdrop { position: fixed; inset: 0; z-index: 3100; background: rgba(0, 0, 0, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cerm-modal {
  background: #fff; color: #333; width: min(100%, 440px); border-radius: 10px; padding: 22px 22px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: cerm-pop .2s ease-out; max-height: 92vh; overflow: auto;
}
.cerm-modal h2 { font-size: 18px; margin: 0 0 8px; color: var(--cerm-primary); }
.cerm-modal p { margin: 0 0 18px; line-height: 1.5; }
.cerm-modal__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
/* Conditions d'utilisation de l'espace d'échanges (page Espace pédagogique) : texte défilant, Décliner à gauche, Accepter à droite */
.cerm-modal--terms { width: min(100%, 640px); display: flex; flex-direction: column; max-height: 92vh; }
.cerm-modal--terms .cerm-modal__scroll { overflow: auto; flex: 1 1 auto; margin: 0 0 16px; padding-right: 6px; font-size: 15px; line-height: 1.55; }
.cerm-modal--terms .cerm-modal__scroll p { margin: 0 0 10px; }
.cerm-modal__actions--split { justify-content: space-between; }
/* Fenêtre « Imprimer cet événement » : la page imprimable dans un cadre, sans nouvel onglet (events.js) */
.cerm-modal--print { width: min(100%, 900px); height: min(92vh, 1100px); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.cerm-modal__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e3e7ee; background: #f5f7fc; }
.cerm-modal__bar strong { flex: 1; color: var(--cerm-primary); }
.cerm-modal__bar .cerm-btn { padding: 8px 14px; min-height: 36px; }
.cerm-modal__frame { flex: 1; width: 100%; border: 0; background: #fff; }
.cerm-modal__actions .cerm-btn { padding: 10px 18px; }

/* Cadre « prochains événements » (équivalent du popup d'origine) */
.cerm-popup {
  position: fixed; z-index: 1200; right: 12px; bottom: 12px; width: min(92vw, 300px);
  background: #fff; border-radius: 6px; box-shadow: 0 6px 30px rgba(0, 0, 0, .3); padding: 18px 16px 14px;
  transform: translateX(120%); transition: transform .35s ease;
}
.cerm-popup.is-open { transform: translateX(0); }
.cerm-popup__close { position: absolute; top: 4px; right: 8px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #333; }
.cerm-popup__title { font-size: 18px; color: #222; margin: 6px 0 14px; font-weight: 400; }
.cerm-popup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 40vh; overflow: auto; }
.cerm-popup li { display: flex; gap: 10px; align-items: flex-start; }
.cerm-popup li img { width: 48px; height: auto; flex: none; }
.cerm-popup li a { font-size: 13px; line-height: 1.35; }

/* Utilitaires */
.cerm-hide-phone { display: initial; }
@media (max-width: 520px) { .cerm-hide-phone { display: none !important; } }
.cerm-center { text-align: center; }

/* 5. Responsive général --------------------------------------------- */
@media (max-width: 991.98px) {
  .cerm-logo--home { left: 50%; transform: translateX(-50%); width: min(300px, 70vw); }
  .cerm-logo--tab { left: 50%; transform: translateX(-50%); width: 190px; }
  .cerm-topbar__credit { right: 150px; }
  .cerm-share__btn { width: 64px; height: 64px; font-size: 20px; }
  .cerm-share { left: 14px; bottom: 16px; }
  .cerm-gotop { bottom: 24px; } .cerm-gotop a { width: 56px; height: 56px; font-size: 30px; }
}
@media (max-width: 575.98px) {
  .cerm-menu-btn { position: absolute; top: -29px; left: 8px; font-size: 16px; padding: 8px 12px; }
  .cerm-topbar { min-height: 39px; }
  .cerm-topbar__credit { display: none; }
  .cerm-topbar__tools { right: 8px; gap: 8px; }
  .cerm-topcart { padding: 1px 10px; }
  .cerm-topcart__label { display: none; }
  .cerm-footer__nav a { letter-spacing: 1px; }
  .cerm-footer__inner { padding-bottom: 90px; }
}

/* Tableaux des textes enrichis (éditeur, pages, événements, tableaux importés d'un document) : liserés fins, en-têtes gris clair. */
.cerm-richtext table, .cmed__area table { border-collapse: collapse; }
.cerm-richtext td, .cerm-richtext th, .cmed__area td, .cmed__area th { border: 0.5px solid #d3d9e3; }
.cerm-richtext th, .cmed__area th { background: #eceef2; }