/* ═══════════════════════════════════════════════════════════════════════════
   demarches.css — Module Démarches administratives
   Palette : suit theme-v2.css (--navy, --green, --cream, --gray-*)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables locales (remappées sur le thème) ─────────────────────────── */
:root {
  /* Couleurs principales — calquées sur theme-v2 */
  --dem-primary:      var(--navy,      #1E3A5F);
  --dem-primary-hov:  var(--navy-light,#2D5282);
  --dem-accent-bg:    var(--gray-100,  #F3F1EB);  /* blanc cassé chaud */
  --dem-border:       var(--gray-200,  #E8E4D8);
  --dem-text:         var(--text,      #2A2A2A);
  --dem-muted:        var(--gray-500,  #6B6860);

  /* Badges par public */
  --dem-part-bg:      var(--navy,       #1E3A5F);
  --dem-pro-bg:       var(--green-dark, #5E8A50);
  --dem-asso-bg:      #7B5C3A;   /* brun-sauge, harmonie terracotta */

  /* Ombres et rayons — réutilisent les tokens du thème */
  --dem-shadow:       var(--shadow-sm, 0 2px 8px rgba(30,58,95,.06));
  --dem-shadow-hov:   var(--shadow-md, 0 4px 24px rgba(30,58,95,.10));
  --dem-radius:       var(--radius-md, 12px);
}

/* ── Barre de recherche ────────────────────────────────────────────────────── */
.dem-search-bar {
  background: var(--dem-primary);
  border-radius: var(--dem-radius);
  padding: 1.25rem 1rem;
  margin-bottom: 1.75rem;
}

.dem-search-form {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.dem-search-inner {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.dem-search-inner > .fa {
  padding: 0 .75rem 0 1rem;
  color: var(--dem-muted);
  font-size: 1.05rem;
  flex-shrink: 0;
}

.dem-search-inner input[type="search"] {
  flex: 1;
  border: none;
  padding: .72rem .5rem;
  font-size: 1rem;
  outline: none;
  color: var(--dem-text);
  background: transparent;
}

.dem-search-inner input[type="search"]::placeholder { color: #aaa; }

.dem-search-inner .btn {
  border-radius: 0;
  padding: .75rem 1.2rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Navigation par public (onglets) ─────────────────────────────────────── */
.dem-public-nav {
  margin-bottom: 1.5rem;
}

.dem-public-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--dem-border);
}

/* Onglet de base */
.dem-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .9rem;
  border-radius: 6px 6px 0 0;
  border: 1.5px solid var(--dem-border);
  border-bottom: none;
  color: var(--dem-muted) !important;
  font-size: .84rem;
  font-weight: 500;
  text-decoration: none !important;
  background: var(--dem-accent-bg);
  margin-bottom: -2px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}

.dem-tab .fa { font-size: .85em; opacity: .75; }

.dem-tab:hover,
.dem-tab:focus {
  color: var(--dem-primary) !important;
  background: #fff;
  text-decoration: none !important;
}

/* Onglet actif : fond blanc + trait coloré en haut */
.dem-tab.is-active {
  background: #fff;
  color: var(--dem-primary) !important;
  font-weight: 700;
  border-color: var(--dem-border);
  border-top-width: 3px;
  text-decoration: none !important;
}

.dem-tab.is-active .fa { opacity: 1; }

/* Trait coloré selon le public */
.dem-tab.is-active:not(.dem-tab--part):not(.dem-tab--pro):not(.dem-tab--asso) {
  border-top-color: var(--dem-primary);
}
.dem-tab--part.is-active  { border-top-color: var(--dem-part-bg); }
.dem-tab--pro.is-active   { border-top-color: var(--dem-pro-bg);  }
.dem-tab--asso.is-active  { border-top-color: var(--dem-asso-bg); }

/* ── Titres de sections internes ────────────────────────────────────────── */
.dem-section-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--dem-primary) !important;
  border-left: 3px solid var(--green, #7FA86E);
  padding-left: .65rem;
  margin-bottom: .85rem;
}

/* ── Intentions "Votre situation" ────────────────────────────────────────── */
.dem-intentions {
  margin-bottom: 1.75rem;
}

.dem-intent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: .35rem;
  padding: .8rem .5rem;
  background: #fff;
  border: 1.5px solid var(--dem-border);
  border-radius: var(--dem-radius);
  color: var(--dem-primary) !important;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none !important;
  height: 100%;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}

.dem-intent-card:hover,
.dem-intent-card:focus {
  background: var(--dem-accent-bg);
  border-color: var(--dem-primary);
  color: var(--dem-primary) !important;
  transform: translateY(-2px);
  text-decoration: none !important;
}

.dem-intent-card .fa { font-size: 1.4rem; margin-bottom: .1rem; }

/* ── Filtres catégories (badges) ────────────────────────────────────────── */
.dem-categories {
  margin-bottom: 1.75rem;
}

.dem-cats-row {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dem-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1.5px solid var(--dem-border);
  background: #fff;
  color: var(--dem-text) !important;
  font-size: .82rem;
  text-decoration: none !important;
  transition: background .12s, color .12s, border-color .12s;
}

.dem-cat-badge:hover,
.dem-cat-badge:focus {
  background: var(--dem-accent-bg);
  border-color: var(--dem-primary);
  color: var(--dem-primary) !important;
  text-decoration: none !important;
}

.dem-cat-badge.is-active {
  background: var(--dem-primary);
  border-color: var(--dem-primary);
  color: #fff !important;
  font-weight: 700;
}

.dem-cat-count {
  display: inline-block;
  background: rgba(0,0,0,.12);
  border-radius: 999px;
  padding: 0 .45rem;
  font-size: .72rem;
  font-weight: 700;
}

.dem-cat-badge.is-active .dem-cat-count {
  background: rgba(255,255,255,.25);
}

/* ── Info résultats ─────────────────────────────────────────────────────── */
.dem-results-info {
  color: var(--dem-muted);
  font-size: .9rem;
  margin-bottom: .85rem;
}

/* ── Grille de fiches ───────────────────────────────────────────────────── */
.dem-grid-section {
  margin-bottom: 1.75rem;
}

.dem-card {
  display: flex;
  text-decoration: none !important;
  color: inherit !important;
  height: 100%;
}

.dem-card:hover,
.dem-card:focus {
  text-decoration: none !important;
  color: inherit !important;
}

.dem-card-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--dem-border);
  border-radius: var(--dem-radius);
  background: var(--card-bg, #F8F6F0);
  box-shadow: var(--dem-shadow);
  transition: box-shadow .2s, border-color .2s, transform .2s;
  min-height: 110px;
}

.dem-card:hover .dem-card-inner,
.dem-card:focus .dem-card-inner {
  box-shadow: var(--dem-shadow-hov);
  border-color: var(--dem-primary);
  transform: translateY(-2px);
}

.dem-card-body { flex: 1; }

.dem-card-title {
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--dem-text) !important;
  margin-bottom: .3rem;
  line-height: 1.3;
}

.dem-card:hover .dem-card-title,
.dem-card:focus .dem-card-title {
  color: var(--dem-primary) !important;
}

.dem-card-desc {
  font-size: .8rem;
  color: var(--dem-muted);
  margin-bottom: 0;
  line-height: 1.4;
}

.dem-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .65rem;
  flex-wrap: wrap;
  gap: .25rem;
}

.dem-card-date {
  font-size: .73rem;
  color: var(--dem-muted);
}

/* ── Badges public ──────────────────────────────────────────────────────── */
.dem-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
}

.dem-badge-particuliers  { background: var(--dem-part-bg); }
.dem-badge-professionnels { background: var(--dem-pro-bg); }
.dem-badge-associations  { background: var(--dem-asso-bg); }
/* Sécurité : valeurs anciennes (singulier) */
.dem-badge-particulier   { background: var(--dem-part-bg); }
.dem-badge-professionnel { background: var(--dem-pro-bg); }
.dem-badge-association   { background: var(--dem-asso-bg); }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.demarches-pagination { margin: 1.5rem 0; }

/* ── Page Détail — en-tête ──────────────────────────────────────────────── */
.demarche-detail-header {
  background: var(--dem-accent-bg);
  border: 1px solid var(--dem-border);
  border-radius: var(--dem-radius);
  border-left: 4px solid var(--dem-primary);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.demarche-detail-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--dem-primary) !important;
  margin-bottom: .25rem;
  line-height: 1.3;
}

.demarche-detail-date { font-size: .82rem; }

/* ── Contenu HTML importé depuis Service-Public ─────────────────────────── */
.demarche-content {
  /*line-height: 1.75;*/
  color: var(--dem-text);
  /*margin-bottom:1.5rem;*/
}

.demarche-content h2,
.demarche-content h3,
.demarche-content h4 {
  color: var(--dem-primary) !important;
  margin-top: 0;//1.5rem;
  margin-bottom: 0;//.6rem;
}

.demarche-content .sp-titre  {
  margin-top:1.5rem;
  margin-bottom:0.6rem;
}

.demarche-content .sp-ou-sadresser {
  border-left: 3px solid var(--green, #7FA86E);
  margin-top:0.6rem;margin-bottom:0.6rem;

}

.demarche-content .sp-section-titre {
  padding-left: .6rem;
}

.demarche-content .sp-intro {
  font-size: 1.05rem;
  font-weight: 500;
  background: var(--dem-accent-bg);
  border-left: 4px solid var(--dem-primary);
  border-radius: 0 8px 8px 0;
  padding: .75rem 1rem;
  margin-bottom: 1.5rem;
}

.demarche-content .sp-encadre {
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.demarche-content .sp-liste { padding-left: 1.5rem; }

.demarche-content .sp-lien {
  color: var(--dem-primary);
  font-weight: 600;
}

.demarche-content table { margin: 1rem 0; }

/* ── Démarches similaires ───────────────────────────────────────────────── */
/* (le style carte est défini dans le bloc "Sidebar sections" ci-dessus) */
.demarches-related {
  margin-top: 0;
}

.demarches-related-card {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6rem .8rem;
  background: #fff;
  border: 1px solid var(--dem-border);
  border-radius: 8px;
  color: var(--dem-text);
  font-size: .9rem;
  text-decoration: none;
  height: 100%;
  transition: background .12s, border-color .12s;
}

.demarches-related-card:hover,
.demarches-related-card:focus {
  background: var(--dem-accent-bg);
  border-color: var(--dem-primary);
  color: var(--dem-primary);
  text-decoration: none;
}

.demarches-related-card .fa {
  flex-shrink: 0;
  margin-top: .1rem;
  color: var(--dem-primary);
}

/* ── Recherche ──────────────────────────────────────────────────────────── */
.dem-intention-banner {
  background: var(--dem-primary);
  color: #fff;
  border-radius: var(--dem-radius);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
}

.dem-intention-banner h2  { color: #fff !important; font-size: 1.25rem !important; }
.dem-intention-banner p   { color: rgba(255,255,255,.80); }

.dem-no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--dem-muted);
}

.dem-no-results .fa { color: var(--dem-border); display: block; margin-bottom: .75rem; }

.dem-search-hint {
  text-align: center;
  padding: 2rem 1rem;
}

.dem-hint-title {
  color: var(--dem-muted);
  margin-bottom: 1rem;
}

.dem-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.dem-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem 1rem;
  background: var(--dem-accent-bg);
  border: 1.5px solid var(--dem-border);
  border-radius: 999px;
  color: var(--dem-primary) !important;
  font-size: .88rem;
  text-decoration: none !important;
  transition: background .12s, border-color .12s, color .12s;
}

.dem-chip:hover,
.dem-chip:focus {
  background: var(--dem-primary);
  border-color: var(--dem-primary);
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Source officielle (footer) ─────────────────────────────────────────── */
.dem-source-footer {
  border-top: 1px solid var(--dem-border);
  padding-top: .75rem;
  margin-top: 2rem;
  color: var(--dem-muted);
  font-size: .82rem;
}

.dem-source-footer a { color: var(--dem-primary); }

/* ── Contenu SP : Images ────────────────────────────────────────────────── */
.demarche-content .sp-image  { margin: 1rem 0; text-align: center; }
.demarche-content .sp-img    { max-width: 100%; border-radius: 6px; box-shadow: var(--dem-shadow); }
.demarche-content .sp-legende {
  display: block;
  font-size: .8rem;
  color: var(--dem-muted);
  margin-top: .35rem;
  font-style: italic;
}

/* ── Contenu SP : Surtitre ──────────────────────────────────────────────── */
.demarche-content .sp-surtitre {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dem-muted);
  margin-bottom: .1rem;
}

.demarche-content .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link{
  color: var(--bs-nav-tabs-link-active-color);
  background-color: rgba(30, 58, 95, .08);
  /*background-color: var(--bs-nav-tabs-link-active-bg);*/


}

.demarche-content .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  /*color: var(--bs-nav-tabs-link-active-color);*/
  /*background-color: var(--gray-100);*/
  color: var(--gray-100);
  background-color: var(--gray-400); 
  
}

.demarche-content  .tab-content.sp-tab-content {
background-color:var(--gray-100);
}
/* ── Contenu SP : Encadrés ──────────────────────────────────────────────── */
.demarche-content .sp-encadre-title        { margin-bottom: .4rem; }
.demarche-content .sp-encadre-title .fa    { margin-right: .35rem; }
.demarche-content .sp-anoter               { border-left: 4px solid var(--dem-muted); }
.demarche-content .sp-source              { font-size: .78rem; color: var(--dem-muted); margin-top: .2rem; }

/* ── Contenu SP : Liens ─────────────────────────────────────────────────── */
/* sp-lien-interne : plus de href → affiché comme texte mis en valeur, pas comme lien */
.demarche-content .sp-lien-interne {
  color: var(--dem-primary);
  font-weight: 600;
  text-decoration: none;
  cursor: text;
}

/* sp-lien-intra : ancre interne (#id) → reste un vrai lien */
.demarche-content .sp-lien-intra {
  color: var(--dem-primary);
  /*font-weight: 600;*/
  /*text-decoration: underline dotted;*/
}

h2.demarches-section-title {
  font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
}
.demarche-content .sp-valeur { font-weight: 700; color: var(--dem-primary); }

/* ── Contenu SP : Services en ligne ─────────────────────────────────────── */
.demarche-content .sp-service-card {
  border: 1px solid var(--dem-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  background: #fff;
}

.demarche-content .sp-service-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}

.demarche-content .sp-references .sp-lien {
  font-size:12px !important;
}

 .sp-service-type {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--dem-accent-bg);
  color: var(--dem-primary);
  border: 1px solid var(--dem-border);
}

.demarche-content .sp-service-titre  { font-size: .95rem; color: var(--dem-text); }
.demarche-content .sp-cerfa          { font-size: .82rem; color: var(--dem-muted); }
.demarche-content .sp-service-intro  { margin-bottom: .75rem; }
.demarche-content .sp-service-btn-wrap { margin: .75rem 0 .5rem; }
.demarche-content .sp-service-btn .fa  { margin-right: .35rem; }
.demarche-content .sp-service-aide  { margin-top: .5rem; margin-bottom: .25rem; font-size: .88rem; }
.demarche-content .sp-service-annexe {
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--dem-border);
}

/* ── Contenu SP : Où s'adresser ─────────────────────────────────────────── */
.demarche-content .sp-adresse-item {
  /*border-left: 3px solid var(--green, #7FA86E);*/
  padding-left: 1rem;
  margin-bottom: 1rem;
}

.demarche-content .sp-adresse-titre { margin-bottom: .35rem; font-size: .95rem; }

/* ── Contenu SP : Tabs Bootstrap ─────────────────────────────────────────── */
.demarche-content .sp-tabs { margin: 1rem 0; }

.demarche-content .sp-tab-content {
  border: 1px solid var(--dem-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 1rem;
}

/* ── Contenu SP : Accordion Bootstrap ───────────────────────────────────── */
.demarche-content .sp-accordion .accordion-button {
  font-size: .95rem;
  font-weight: 600;
  color: var(--dem-primary);
  background: var(--dem-accent-bg);
}

.demarche-content .sp-accordion .accordion-button:not(.collapsed) {
  background: var(--dem-primary);
  color: #fff;
}

.demarche-content .sp-accordion .accordion-button:not(.collapsed)::after {
  /*filter: invert(1) brightness(2);*/
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .dem-public-tabs  { gap: .2rem; }
  .dem-public-tab   { font-size: .8rem; padding: .45rem .75rem; }
  .dem-public-tab span { display: none; }   /* icône seule sur mobile */
  .dem-public-tab .fa  { font-size: 1rem; }

  .demarche-detail-title { font-size: 1.2rem !important; }
  .dem-intent-card       { font-size: .78rem; padding: .65rem .4rem; }
  .dem-card-inner        { min-height: auto; }
  .dem-search-inner .btn { padding: .72rem .9rem; font-size: .9rem; }
}

@media (max-width: 575px) {
  .dem-search-bar { padding: 1rem .75rem; }
  .dem-search-inner input[type="search"] { font-size: .9rem; }
  .dem-public-tab span { display: none; }
}

/* ── Sidebar sections — look identique à .content.content-default ────────── */
/*    (colonne de droite de la fiche démarche)                                */
.demarches-sidebar-section,
.demarches-organismes,
.demarches-related {
  background: var(--card-bg, #F8F6F0) !important;
  box-shadow: var(--shadow-lg, 0 12px 40px rgba(30,58,95,.14));
  border: 1px solid var(--gray-200, #E8E4D8) !important;
  border-radius: 16px;
  padding: 1rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
}

/* Titre de section dans la sidebar */
.demarches-sidebar-section .demarches-section-title,
.demarches-organismes     .demarches-section-title,
.demarches-related        .demarches-section-title {
  border-bottom: 1px solid var(--gray-200, #E8E4D8);
  padding-bottom: .6rem;
  margin-bottom: 1rem !important;
}

/* ── Organismes DILA (section "Où s'adresser") ───────────────────────────── */

.demarches-organismes {
  margin-bottom: 1.5rem;
}

.demarches-organisme-card {
  border: 1px solid var(--dem-border);
  border-radius: .5rem;
  background: #fff;
  transition: box-shadow .2s, border-color .2s;
}
.demarches-organisme-card:hover {
  box-shadow: 0 4px 12px rgba(30,58,95,.1);
  border-color: var(--dem-primary);
}

.demarches-organisme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--dem-accent-bg);
  color: var(--dem-primary);
  font-size: 1rem;
  flex-shrink: 0;
}

.demarches-organisme-nom {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dem-text);
  margin: 0;
  line-height: 1.3;
}

.demarches-organisme-pivot {
  font-size: .75rem;
  text-transform: capitalize;
}

.demarches-organisme-coords {
  font-size: .875rem;
  color: var(--dem-muted);
}
.demarches-organisme-coords a {
  color: var(--dem-primary);
  text-decoration: none;
}
.demarches-organisme-coords a:hover {
  text-decoration: underline;
}
.demarches-organisme-coords li {
  margin-bottom: .25rem;
}