/* ============================================================
   PiloteCSE — Module FAQ
   Version : 1.0.0
   ============================================================ */

.pcse-faq-module {
  --pcse-faq-blue: #0b63a8;
  --pcse-faq-blue-dark: #052545;
  --pcse-faq-border: #cfe3f4;
  --pcse-faq-soft: #f5f9fd;
  --pcse-faq-muted: #5b6f84;

  width: 100%;
  color: var(--pcse-faq-blue-dark);
  box-sizing: border-box;
}

.pcse-faq-module *,
.pcse-faq-module *::before,
.pcse-faq-module *::after {
  box-sizing: border-box;
}

.pcse-faq-module__title {
  margin: 0 0 14px;
  color: var(--pcse-faq-blue-dark);
}

.pcse-faq-module__search {
  max-width: 720px;
  margin: 0 0 14px;
}

.pcse-faq-module__search input {
  width: 100%;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid #aacce6;
  border-radius: 11px;
  background: #fff;
  color: var(--pcse-faq-blue-dark);
  font: inherit;
}

.pcse-faq-module__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.pcse-faq-module__filters button {
  appearance: none;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pcse-faq-blue);
  font: inherit;
  font-size: .88rem;
  font-weight: 750;
  cursor: pointer;
}

.pcse-faq-module__filters button:hover,
.pcse-faq-module__filters button:focus-visible,
.pcse-faq-module__filters button.is-active {
  border-color: var(--pcse-faq-blue);
  background: var(--pcse-faq-blue);
  color: #fff;
  outline: none;
}

.pcse-faq-module__status {
  min-height: 18px;
  margin: 0 0 8px;
  color: var(--pcse-faq-muted);
  font-size: .86rem;
}

.pcse-faq-module__list {
  display: grid;
  gap: 10px;
}

.pcse-faq-item {
  margin: 0;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.pcse-faq-item summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 18px;
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  padding: 14px 15px;
  color: var(--pcse-faq-blue-dark);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.pcse-faq-item__question {
  min-width: 0;
}

.pcse-faq-item__themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: 520px;
}

.pcse-faq-item__theme {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 999px;
  background: var(--pcse-faq-soft);
  color: var(--pcse-faq-blue);
  font-size: .72rem;
  line-height: 1.15;
  font-weight: 750;
  white-space: nowrap;
}

.pcse-faq-item summary::-webkit-details-marker {
  display: none;
}

.pcse-faq-item summary::after {
  content: "+";
  margin-left: 0;
  color: var(--pcse-faq-blue);
  font-size: 1.25rem;
  font-weight: 700;
}

.pcse-faq-item[open] summary::after {
  content: "−";
}

.pcse-faq-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #e9f4fc;
  color: var(--pcse-faq-blue);
  font-size: .82rem;
  font-weight: 850;
}

.pcse-faq-item__answer {
  padding: 0 16px 16px 49px;
  line-height: 1.55;
}

.pcse-faq-item__answer > :first-child {
  margin-top: 0;
}

.pcse-faq-item__answer > :last-child {
  margin-bottom: 0;
}

.pcse-faq-item__answer a {
  color: var(--pcse-faq-blue);
  font-weight: 700;
}

.pcse-faq-item.pcse-faq-filter-hidden,
.pcse-faq-item.pcse-faq-search-hidden {
  display: none !important;
}

.pcse-faq-module__empty {
  margin: 12px 0 0;
  padding: 13px 15px;
  border: 1px dashed var(--pcse-faq-border);
  border-radius: 11px;
  background: var(--pcse-faq-soft);
  color: var(--pcse-faq-muted);
}

.pcse-faq-module__empty[hidden] {
  display: none !important;
}

.pcse-faq-module__empty.is-visible {
  display: block;
}

@media (max-width: 620px) {
  .pcse-faq-module__filters {
    gap: 6px;
  }

  .pcse-faq-module__filters button {
    font-size: .82rem;
  }

  .pcse-faq-item summary {
    grid-template-columns: 24px minmax(0, 1fr) 18px;
  }

  .pcse-faq-item__themes {
    grid-column: 2 / 3;
    justify-content: flex-start;
    max-width: none;
  }

  .pcse-faq-item summary::after {
    grid-column: 3;
    grid-row: 1;
  }

  .pcse-faq-item__answer {
    padding-left: 15px;
  }
}

/* ============================================================
   PiloteCSE — FAQ v0.2.0 : recherche + feedback
   ============================================================ */
.pcse-faq-module__search label {
  display: block;
  margin: 0 0 6px;
  color: var(--pcse-faq-blue-dark);
  font-size: .9rem;
  font-weight: 750;
}

.pcse-faq-module__search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pcse-faq-module__search-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.pcse-faq-module__search-row button {
  appearance: none;
  padding: 0 13px;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 11px;
  background: #fff;
  color: var(--pcse-faq-blue);
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
}

.pcse-faq-module__search-row button:hover,
.pcse-faq-module__search-row button:focus-visible {
  border-color: var(--pcse-faq-blue);
  outline: none;
}

.pcse-faq-item__body {
  padding: 0 16px 16px 49px;
}

.pcse-faq-item__body .pcse-faq-item__answer {
  padding: 0;
}

.pcse-faq-feedback {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pcse-faq-border);
}

.pcse-faq-feedback__question {
  margin: 0 0 8px;
  color: var(--pcse-faq-blue-dark);
  font-size: .9rem;
}

.pcse-faq-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcse-faq-feedback__actions button,
.pcse-faq-feedback__ask {
  appearance: none;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 9px;
  background: #fff;
  color: var(--pcse-faq-blue-dark);
  font: inherit;
  font-size: .86rem;
  font-weight: 750;
  cursor: pointer;
}

.pcse-faq-feedback__actions button:hover,
.pcse-faq-feedback__actions button:focus-visible,
.pcse-faq-feedback__ask:hover,
.pcse-faq-feedback__ask:focus-visible {
  border-color: var(--pcse-faq-blue);
  background: var(--pcse-faq-soft);
  outline: none;
}

.pcse-faq-feedback__actions button.is-selected {
  border-color: var(--pcse-faq-blue);
  background: var(--pcse-faq-blue);
  color: #fff;
}

.pcse-faq-feedback__actions button:disabled {
  cursor: default;
  opacity: .72;
}

.pcse-faq-feedback__actions button.is-selected:disabled {
  opacity: 1;
}

.pcse-faq-feedback__status {
  min-height: 18px;
  margin: 7px 0 0;
  color: var(--pcse-faq-muted);
  font-size: .82rem;
}

.pcse-faq-feedback__negative {
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px dashed #e2b5a8;
  border-radius: 10px;
  background: #fff8f5;
}

.pcse-faq-feedback__negative[hidden] {
  display: none !important;
}

.pcse-faq-feedback__negative p {
  margin: 0 0 9px;
  color: #5a3a32;
  font-size: .88rem;
  line-height: 1.45;
}

.pcse-faq-feedback__ask {
  border-color: var(--pcse-faq-blue);
  background: var(--pcse-faq-blue);
  color: #fff;
}

.pcse-faq-feedback__ask:hover,
.pcse-faq-feedback__ask:focus-visible {
  background: #084f86;
  color: #fff;
}

@media (max-width: 620px) {
  .pcse-faq-module__search-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pcse-faq-module__search-row button {
    min-height: 38px;
  }

  .pcse-faq-item__body {
    padding-left: 15px;
  }
}


/* Recherche sans réponse */
.pcse-faq-module__empty p {
  margin: 0;
}

.pcse-faq-module__empty-ask {
  appearance: none;
  margin-top: 10px;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--pcse-faq-blue);
  border-radius: 9px;
  background: var(--pcse-faq-blue);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.pcse-faq-module__empty-ask:hover,
.pcse-faq-module__empty-ask:focus-visible {
  filter: brightness(.94);
  outline: 2px solid rgba(11, 99, 168, .18);
  outline-offset: 2px;
}

/* ============================================================
   v0.3.2 — Lien direct vers une FAQ
   ============================================================ */
.pcse-faq-item__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: -2px 16px 14px 49px;
}

.pcse-faq-item__copy-link {
  appearance: none;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 999px;
  background: #fff;
  color: var(--pcse-faq-blue);
  padding: 6px 10px;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
}

.pcse-faq-item__copy-link:hover,
.pcse-faq-item__copy-link:focus-visible {
  border-color: var(--pcse-faq-blue);
  background: var(--pcse-faq-soft);
  outline: none;
}

.pcse-faq-item__copy-status {
  color: var(--pcse-faq-muted);
  font-size: .78rem;
}

.pcse-faq-item:target {
  scroll-margin-top: 120px;
  border-color: var(--pcse-faq-blue);
  box-shadow: 0 0 0 2px rgba(0, 115, 170, .10);
}

@media (max-width: 620px) {
  .pcse-faq-item__tools {
    margin-left: 16px;
  }
}



/* ============================================================
   v0.3.3 — Questions liées
   ============================================================ */
.pcse-faq-related {
  margin: 15px 16px 14px 49px;
  padding: 12px 14px;
  border: 1px solid var(--pcse-faq-border);
  border-radius: 11px;
  background: var(--pcse-faq-soft);
}

.pcse-faq-related__title {
  margin: 0 0 7px;
  color: var(--pcse-faq-blue-dark);
  font-size: .86rem;
}

.pcse-faq-related ul {
  margin: 0;
  padding-left: 19px;
}

.pcse-faq-related li {
  margin: 4px 0;
  color: var(--pcse-faq-muted);
  font-size: .86rem;
  line-height: 1.4;
}

.pcse-faq-related a {
  color: var(--pcse-faq-blue);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pcse-faq-related a:hover,
.pcse-faq-related a:focus-visible {
  color: var(--pcse-faq-blue-dark);
  outline: none;
  text-decoration-thickness: 2px;
}

@media (max-width: 620px) {
  .pcse-faq-related {
    margin-left: 16px;
  }
}


/* ============================================================
   v0.3.9 — Ajustements ergonomiques mobile avant lancement
   ============================================================ */
@media (max-width: 620px) {
  /* Cibles tactiles : minimum confortable sur smartphone. */
  .pcse-faq-module__filters button,
  .pcse-faq-feedback__actions button,
  .pcse-faq-feedback__ask,
  .pcse-faq-module__empty-ask,
  .pcse-faq-item__copy-link {
    min-height: 44px;
  }

  .pcse-faq-module__filters button {
    padding: 8px 12px;
  }

  /* On récupère de la largeur utile dans une réponse ouverte. */
  .pcse-faq-item__body {
    padding: 0 14px 14px;
  }

  .pcse-faq-related {
    margin: 14px 0;
    padding: 12px;
  }

  .pcse-faq-item__tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    margin: 0 0 14px;
  }

  .pcse-faq-item__copy-link {
    width: 100%;
    padding: 9px 12px;
    text-align: center;
    white-space: normal;
  }

  .pcse-faq-item__copy-status {
    min-height: 18px;
  }

  /* Un thème long doit pouvoir revenir à la ligne plutôt que déborder. */
  .pcse-faq-item__theme {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }
}

/* ============================================================
   PiloteCSE — FAQ v0.3.9
   Optimisation de largeur sur la page Aide ODJ en mobile
   Objectif : récupérer l'espace perdu dans les conteneurs imbriqués
   sans modifier le rendu desktop.
   ============================================================ */
@media (max-width: 620px) {
  /* Le contenu WordPress de la page Aide garde une marge de sécurité,
     mais on récupère une partie de l'espace pour le bloc d'aide. */
  .pcse-help-odj {
    width: calc(100% + 24px);
    max-width: none;
    margin-left: -12px;
    margin-right: -12px;
    overflow-x: clip;
  }

  /* Les cartes historiques de la page Aide avaient 16 px de padding.
     Sur petit écran, 10 px suffisent et rendent les FAQ nettement plus larges. */
  .pcse-help-odj .pcse-help-card {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .pcse-help-odj .pcse-help-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Le shortcode FAQ exploite toute la largeur disponible dans sa carte. */
  .pcse-help-odj .pcse-faq-module {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* On garde des zones tactiles confortables tout en réduisant les retraits. */
  .pcse-faq-item summary {
    padding-left: 10px;
    padding-right: 10px;
    column-gap: 8px;
  }

  .pcse-faq-item__body,
  .pcse-faq-item__answer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .pcse-faq-item__tools,
  .pcse-faq-related {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media (max-width: 420px) {
  /* Sur les téléphones étroits, on récupère encore 4 px de chaque côté
     tout en conservant une marge visuelle autour du contenu. */
  .pcse-help-odj {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }

  .pcse-help-odj .pcse-help-card {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* ============================================================
   PiloteCSE — FAQ v0.3.9
   Finition mobile : FAQ presque pleine largeur
   Objectif : supprimer le dernier double retrait autour du bloc FAQ
   sans toucher au rendu ordinateur.
   ============================================================ */
@media (max-width: 620px) {
  /* Le conteneur général utilise davantage la largeur disponible. */
  .pcse-help-odj {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }

  /* La carte qui contient réellement le shortcode FAQ ne doit plus
     ajouter un deuxième padding horizontal. Le sélecteur #faq couvre
     la page Aide ODJ ; :has() sert de filet de sécurité si le bloc est déplacé. */
  .pcse-help-odj #faq.pcse-help-card,
  .pcse-help-odj .pcse-help-card:has(.pcse-faq-module) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Le module conserve seulement une petite respiration visuelle.
     Les cartes FAQ utilisent ainsi presque toute la largeur du téléphone. */
  .pcse-help-odj #faq .pcse-faq-module,
  .pcse-help-odj .pcse-help-card:has(.pcse-faq-module) .pcse-faq-module {
    width: calc(100% - 16px);
    max-width: none;
    margin-left: 8px;
    margin-right: 8px;
  }

  /* Les titres/filtres restent alignés avec les cartes. */
  .pcse-help-odj #faq > h2,
  .pcse-help-odj .pcse-help-card:has(.pcse-faq-module) > h2 {
    margin-left: 8px;
    margin-right: 8px;
  }
}

@media (max-width: 420px) {
  /* Sur un téléphone classique (360–390 px), on vise environ 12 px
     de marge visuelle totale par côté au lieu d'un double retrait. */
  .pcse-help-odj {
    width: calc(100% + 48px);
    margin-left: -24px;
    margin-right: -24px;
  }

  .pcse-help-odj #faq .pcse-faq-module,
  .pcse-help-odj .pcse-help-card:has(.pcse-faq-module) .pcse-faq-module {
    width: calc(100% - 12px);
    margin-left: 6px;
    margin-right: 6px;
  }

  .pcse-help-odj #faq > h2,
  .pcse-help-odj .pcse-help-card:has(.pcse-faq-module) > h2 {
    margin-left: 6px;
    margin-right: 6px;
  }
}


/* ============================================================
   PiloteCSE — FAQ v1.0.0
   Finition largeur mobile — neutralisation du dernier retrait parent
   Objectif : faire utiliser aux cartes FAQ presque toute la largeur
   réellement disponible, quelle que soit la carte WordPress parente.
   ============================================================ */
@media (max-width: 620px) {
  /* On agit directement sur le module : ainsi, même si la page Aide
     ajoute encore un wrapper/padding intermédiaire, le module le compense. */
  .pcse-help-odj .pcse-faq-module {
    width: calc(100% + 24px) !important;
    max-width: none !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
  }

  /* Les cartes restent parfaitement dans le module élargi. */
  .pcse-help-odj .pcse-faq-module__list,
  .pcse-help-odj .pcse-faq-item {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 420px) {
  /* À 360–390 px, le retrait résiduel observé est d'environ 16 px
     supplémentaires par côté. On le récupère sans aller bord à bord. */
  .pcse-help-odj .pcse-faq-module {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
  }

  /* Conserver une respiration interne légère dans les cartes. */
  .pcse-help-odj .pcse-faq-item summary {
    padding-left: 10px;
    padding-right: 10px;
  }
}