@import url("variables-O0-bfkX.css");

/* ════════════════════════════════
   AJOUTS skeletonV2
   styles.css est la copie CONFORME du projet skeleton : ne pas y toucher.
   Tout style propre à skeletonV2 (sans équivalent skeleton) vit ici,
   dans une section commentée par module.
════════════════════════════════ */

/* ── Menu d'export : chez skeleton, React monte/démonte la liste ;
      ici elle est dans le DOM et bascule via la classe .open ── */
.export-menu .export-menu-list { display: none; }
.export-menu.open .export-menu-list { display: block; }

/* ── Accessibilité : lien d'évitement (absent de skeleton/App.jsx) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 14px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  z-index: 2000;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}

/* ── Navbar : chez skeleton (Navbar.jsx) le dropdown avatar et le menu mobile
      sont montés/démontés en React ; ici ils restent dans le DOM et sont
      masqués via l'attribut [hidden], piloté par public/js/app.js ── */
.nav-dropdown .dropdown-menu[hidden] { display: none; }
.navbar-mobile-menu[hidden] { display: none; }

/* ── Bouton oeil du champ mot de passe : skeleton (PasswordInput.jsx) échange
      l'icône en React ; ici les deux SVG sont présents et bascule via la
      classe .visible posée par public/js/form-ajax.js ── */
.password-toggle .eye-off { display: none; }
.password-toggle.visible .eye-on { display: none; }
.password-toggle.visible .eye-off { display: block; }

/* ── Modale légale (register) : skeleton monte/démonte la modale ; ici elle
      reste dans le DOM, masquée via [hidden] et pilotée par legal-modal.js ── */
.modal-overlay[hidden] { display: none; }

/* ── Logo d'en-tête des cartes d'auth (partial _auth_logo, vues hors
      périmètre) : skeleton n'affiche pas de logo sur ses pages d'auth ── */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.auth-logo img,
.auth-logo svg {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-control);
}
.auth-logo svg {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
}

/* ── Erreurs de champ en AJAX (form-ajax.js) : skeleton signale les erreurs par
      toast ; ici on conserve l'affichage inline sous le champ, sans équivalent
      dans styles.css ── */
.form-errors {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.form-errors li {
  color: var(--danger);
  font-size: 0.85rem;
  line-height: 1.4;
}
input.input--error,
textarea.input--error,
select.input--error {
  border-color: var(--danger);
}

/* ════════════════════════════════
   Espace client (profil + paramètres)
════════════════════════════════ */

/* Le layout de l'espace client reproduit ClientLayout.jsx de skeleton : nav fixe
   pleine largeur (--nav-h) + aside fixe à gauche + contenu décalé. Or
   base.html.twig enferme le bloc body dans <main class="container">
   (max-width 1080px, centré, padding). On neutralise cette contrainte
   uniquement quand le shell client est présent pour qu'il occupe toute la
   largeur ; la nav et l'aside étant en position fixe, ils sont relatifs au
   viewport et non au conteneur. */
main.container:has(> .client-shell) {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════
   Coquille admin (back office)
════════════════════════════════ */

/* La coquille du back office (AdminLayout.jsx) réutilise la même coquille skeleton
   que l'espace client (.client-shell : nav fixe + aside fixe + contenu). Le
   .container de base est donc déjà neutralisé par la règle ci-dessus, et toutes
   les classes de la coquille (.navbar, .sidebar, .client-main, .client-content,
   .kpi-*, .help-*, .breadcrumb, .activity-*…) vivent dans styles.css. Il ne
   reste ici que deux ajouts propres au back office : le masquage des éléments de
   recherche montés côté serveur, et les styles des deux partials adm-* conservés
   (pagination + export), dont les règles vivaient dans l'ancien admin.css
   désormais non chargé. */

/* Recherche globale : chez skeleton (AdminSearch.jsx) le menu de résultats et le
   bouton d'effacement sont montés/démontés en React ; ici ils restent dans le
   DOM, masqués via l'attribut [hidden] (piloté par public/js/admin-layout.js). */
.admin-search-results[hidden],
.admin-search-clear[hidden] {
  display: none;
}

/* Pagination serveur et menu d'export (partials admin/_pagination.html.twig et
   admin/_export_menu.html.twig, conservés en classes adm-*). Styles repris de
   l'ancien public/css/admin.css et réalignés sur les tokens skeleton
   (--primary / --text / --text-light / --border). */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
}
.adm-pag-info {
  font-size: 0.8rem;
  color: var(--text-light);
}
.adm-pag-info strong {
  color: var(--text);
  font-weight: 600;
}
.adm-pag-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.adm-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-light);
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.adm-pag-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--info-bg);
}
.adm-pag-btn.active {
  background: var(--primary);
  color: var(--on-accent);
  border-color: var(--primary);
}
.adm-pag-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}
.adm-pag-btn svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.adm-pag-dots {
  width: 30px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
}

.adm-export-menu {
  position: relative;
  display: inline-flex;
}
/* Le bouton du partial garde des classes adm-btn non chargées : on le rend
   autonome (bouton contour, tokens skeleton). */
.adm-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}
.adm-export-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--info-bg);
}
.adm-export-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.adm-export-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  padding: 4px;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
}
.adm-export-menu.open .adm-export-list {
  display: block;
}
.adm-export-item {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.adm-export-item:hover {
  background: var(--info-bg);
  color: var(--primary);
}

/* ════════════════════════════════
   CRUD users / contact / social / erreurs
   Écarts propres au rendu serveur (Twig) : chez skeleton ces états sont pilotés
   par l'état React ; ici ils sont déduits du DOM statique.
════════════════════════════════ */

/* ── Interrupteurs (Toggle) : skeleton pose la classe .toggle-on selon l'état
      React. En rendu serveur, l'état « coché » vient de l'input : on reproduit
      l'apparence « on » depuis :checked (réponse anonyme du contact, section et
      switches des réseaux sociaux). ── */
.toggle:has(input:checked) {
  background: var(--primary);
}
.toggle:has(input:checked) .toggle-knob {
  left: 23px;
}

/* ── Modales de confirmation, fenêtre de recadrage et aperçu agrandi : skeleton
      les monte/démonte en React ; ici elles restent dans le DOM, masquées via
      l'attribut [hidden] (piloté par les JS admin-*). Ces conteneurs portent un
      display explicite (flex/grid) qui l'emporte sur le [hidden] natif : on
      rétablit donc le masquage. (.modal-overlay[hidden] est déjà couvert plus
      haut.) ── */
.crop-modal[hidden],
.media-zoom[hidden],
.media-empty[hidden],
.media-actions[hidden] {
  display: none;
}

/* ════════════════════════════════
   SEO / pages légales / pages d'erreur / cookies RGPD / paramètres
   Migration skeleton de ces modules. styles.css reste la copie conforme de
   skeleton : rien n'y est modifié.
════════════════════════════════ */

/* ── Champs image (MediaField) : l'aperçu, le placeholder et la barre
      d'actions restent dans le DOM et sont masqués via la classe .hidden
      posée par les JS de crop (admin-seo-edit / admin-error-edit /
      admin-parameters / admin-crop). skeleton les monte/démonte en React. ── */
.hidden { display: none !important; }

/* ── Contenu de l'éditeur WYSIWYG (Tiptap) : styles.css fournit les classes
      rte-* et .rte .ProseMirror (base, h2, h3, citation, lien, tableaux).
      Les éléments enrichis restants (H1/H4, listes, checklist, filet, code,
      surlignage, exposant/indice, images, alignements) sont repris de l'ancien
      public/css/tiptap.css et portés sur .rte .ProseMirror. ── */
.rte .ProseMirror h1 { font-size: 1.6rem; font-weight: 600; margin: 24px 0 10px; }
.rte .ProseMirror h4 { font-size: 0.95rem; font-weight: 600; margin: 14px 0 6px; }
.rte .ProseMirror p { margin-bottom: 10px; }
.rte .ProseMirror ul,
.rte .ProseMirror ol { padding-left: 20px; margin: 8px 0; }
.rte .ProseMirror li { margin-bottom: 4px; }
.rte .ProseMirror li[data-checked] { list-style: none; position: relative; padding-left: 6px; }
.rte .ProseMirror li[data-checked]::before { content: '\2610'; position: absolute; left: -18px; }
.rte .ProseMirror li[data-checked="true"]::before { content: '\2611'; color: var(--primary); }
.rte .ProseMirror hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.rte .ProseMirror code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 0.84rem; font-family: monospace; }
.rte .ProseMirror pre { background: var(--bg); padding: 14px; border-radius: var(--radius-control); overflow-x: auto; margin: 12px 0; }
.rte .ProseMirror pre code { background: none; padding: 0; font-size: 0.82rem; }
.rte .ProseMirror mark { background: var(--rte-mark-bg); padding: 1px 2px; border-radius: 2px; }
.rte .ProseMirror sub { font-size: 0.75em; }
.rte .ProseMirror sup { font-size: 0.75em; }
.rte .ProseMirror img { max-width: 100%; height: auto; border-radius: var(--radius-control); margin: 12px 0; }
.rte .ProseMirror .has-text-align-center { text-align: center; }
.rte .ProseMirror .has-text-align-right { text-align: right; }
.rte .ProseMirror .has-text-align-justify { text-align: justify; }