/* ============================================================
   SIG-MAROC — CONTENT SYSTEM V2
   Charte commune des contenus éditoriaux, données et outils SIG
   Scope volontaire : #contenue.resource-content uniquement
   ============================================================ */

#contenue.resource-content {
  --sm-primary: #d62828;
  --sm-primary-dark: #9b1b1b;
  --sm-ink: #1f2937;
  --sm-muted: #667085;
  --sm-line: #e5e7eb;
  --sm-soft: #f7f8fa;
  --sm-soft-2: #fbfbfc;
  --sm-info: #2563eb;
  --sm-success: #16803c;
  --sm-warning: #b56a00;
  --sm-danger: #b42318;
  --sm-radius: 8px;
  color: var(--sm-ink);
  font-size: 0.98rem;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

/* ---------- rythme typographique ---------- */
#contenue.resource-content > :first-child { margin-top: 0 !important; }
#contenue.resource-content > :last-child { margin-bottom: 0 !important; }

#contenue.resource-content h1,
#contenue.resource-content h2,
#contenue.resource-content h3,
#contenue.resource-content h4 {
  font-family: inherit !important;
  color: var(--sm-ink) !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  text-shadow: none !important;
  scroll-margin-top: 100px;
}

#contenue.resource-content h1 {
  font-size: clamp(1.55rem, 2.4vw, 2rem) !important;
  margin: 2.1rem 0 1rem !important;
}

#contenue.resource-content h2 {
  font-size: clamp(1.28rem, 2vw, 1.55rem) !important;
  margin: 2.25rem 0 1rem !important;
  padding: 0 0 .55rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sm-line) !important;
  position: relative;
}

#contenue.resource-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 54px;
  height: 2px;
  background: var(--sm-primary);
}

#contenue.resource-content h3 {
  font-size: 1.08rem !important;
  margin: 1.75rem 0 .7rem !important;
}

#contenue.resource-content h4 {
  font-size: 1rem !important;
  margin: 1.45rem 0 .55rem !important;
}

#contenue.resource-content p {
  margin: 0 0 1rem !important;
  color: #384250 !important;
}

#contenue.resource-content strong { color: #202733; }
#contenue.resource-content small { color: var(--sm-muted); }

#contenue.resource-content ul,
#contenue.resource-content ol {
  margin: .4rem 0 1.25rem !important;
  padding-left: 1.4rem !important;
}

#contenue.resource-content li {
  margin: .35rem 0 !important;
  padding-left: .15rem !important;
}

#contenue.resource-content hr {
  border: 0 !important;
  border-top: 1px solid var(--sm-line) !important;
  opacity: 1 !important;
  margin: 2rem 0 !important;
}

/* ---------- liens ---------- */
#contenue.resource-content a:not(.btn):not([class*="button"]):not(.sm-resource-link) {
  color: #155eef;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
#contenue.resource-content a:not(.btn):not([class*="button"]):not(.sm-resource-link):hover {
  color: #004eeb;
}

/* liens vers fichiers / données */
#contenue.resource-content .sm-resource-link,
#contenue.resource-content .liens-cartes a {
  display: inline-flex !important;
  align-items: center;
  gap: .42rem;
  min-height: 36px;
  padding: .42rem .7rem !important;
  margin: .16rem .12rem .16rem 0 !important;
  border: 1px solid #d9dee5 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: .82rem !important;
  line-height: 1.25 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
#contenue.resource-content .sm-resource-link::before,
#contenue.resource-content .liens-cartes a::before {
  content: "\f019";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--sm-primary);
}
#contenue.resource-content .sm-resource-link:hover,
#contenue.resource-content .liens-cartes a:hover {
  background: #fff7f7 !important;
  border-color: #e8b4b4 !important;
  color: var(--sm-primary-dark) !important;
  transform: translateY(-1px);
}
#contenue.resource-content .liens-cartes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
  margin: .7rem 0 1.5rem !important;
}

/* ---------- sections / cadres ---------- */
#contenue.resource-content .sm-section {
  margin: 0 0 1.5rem;
}

#contenue.resource-content .card,
#contenue.resource-content .instructions,
#contenue.resource-content .excel-controls,
#contenue.resource-content .converter-controls,
#contenue.resource-content .control-panel,
#contenue.resource-content .info-box,
#contenue.resource-content .result-box,
#contenue.resource-content .tool-box,
#contenue.resource-content .download-section,
#contenue.resource-content .content-box,
#contenue.resource-content .service-card {
  background: #fff !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: var(--sm-radius) !important;
  box-shadow: 0 2px 9px rgba(16,24,40,.055) !important;
}

#contenue.resource-content .card-body,
#contenue.resource-content .instructions,
#contenue.resource-content .excel-controls,
#contenue.resource-content .converter-controls,
#contenue.resource-content .control-panel,
#contenue.resource-content .info-box,
#contenue.resource-content .result-box,
#contenue.resource-content .tool-box,
#contenue.resource-content .download-section,
#contenue.resource-content .content-box {
  padding: 1.05rem 1.1rem !important;
}

/* Bootstrap alerts + anciens encadrés */
#contenue.resource-content .alert {
  border-radius: 7px !important;
  border-width: 1px !important;
  border-style: solid !important;
  padding: .9rem 1rem !important;
  box-shadow: none !important;
}
#contenue.resource-content .alert-info { background:#f4f8ff !important; border-color:#c9dcff !important; color:#29435f !important; }
#contenue.resource-content .alert-success { background:#f3faf5 !important; border-color:#cce8d4 !important; color:#235b35 !important; }
#contenue.resource-content .alert-warning { background:#fff9ed !important; border-color:#f4d9a5 !important; color:#70480b !important; }
#contenue.resource-content .alert-danger { background:#fff5f4 !important; border-color:#f0c5c1 !important; color:#7a271a !important; }

#contenue.resource-content .sm-quote,
#contenue.resource-content blockquote {
  margin: 1.35rem 0 !important;
  padding: .85rem 1rem !important;
  border: 0 !important;
  border-left: 4px solid var(--sm-primary) !important;
  background: var(--sm-soft) !important;
  color: #475467 !important;
  font-style: normal !important;
}

/* ---------- tableaux ---------- */
#contenue.resource-content .sm-table-wrap,
#contenue.resource-content .table-responsive {
  width: 100%;
  overflow-x: auto;
  margin: 1.15rem 0 1.6rem !important;
  border: 1px solid var(--sm-line);
  border-radius: 7px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

#contenue.resource-content table.sm-table,
#contenue.resource-content table.table,
#contenue.resource-content table {
  width: 100% !important;
  min-width: 560px;
  margin: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
  color: #344054 !important;
  font-size: .84rem !important;
  line-height: 1.42 !important;
  box-shadow: none !important;
}
#contenue.resource-content table th {
  padding: .72rem .75rem !important;
  border: 1px solid #e4e7ec !important;
  background: #f4f6f8 !important;
  color: #273142 !important;
  font-weight: 700 !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: normal !important;
}
#contenue.resource-content table td {
  padding: .68rem .75rem !important;
  border: 1px solid #e7eaee !important;
  background: #fff !important;
  color: #475467 !important;
  vertical-align: top !important;
  text-align: left !important;
}
#contenue.resource-content table tbody tr:nth-child(even) td { background:#fafbfc !important; }
#contenue.resource-content table tbody tr:hover td { background:#fff8f8 !important; }
#contenue.resource-content table p { margin:0 !important; }

/* ---------- images, figures, galeries ---------- */
#contenue.resource-content img.sm-content-image,
#contenue.resource-content .tuto-img,
#contenue.resource-content .single-image,
#contenue.resource-content img.img-fluid {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 1rem auto !important;
  border-radius: 7px !important;
  border: 1px solid #e8eaed;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16,24,40,.055) !important;
}
#contenue.resource-content figure {
  margin: 1.25rem 0 1.65rem !important;
}
#contenue.resource-content figure img { margin-bottom:.45rem !important; }
#contenue.resource-content figcaption,
#contenue.resource-content .image-caption,
#contenue.resource-content .img-caption {
  color: #667085 !important;
  font-size: .78rem !important;
  line-height: 1.45 !important;
  text-align: center !important;
  margin: .35rem 0 .8rem !important;
}
#contenue.resource-content .dual-images {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: .9rem !important;
}

/* ---------- vidéo / iframe ---------- */
#contenue.resource-content .sm-embed,
#contenue.resource-content iframe {
  max-width: 100% !important;
  border: 1px solid var(--sm-line) !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 9px rgba(16,24,40,.05);
}
#contenue.resource-content .video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 7px;
  background: #111;
  margin: 1.25rem 0;
}

/* ---------- formulaires et outils ---------- */
#contenue.resource-content label {
  color: #344054 !important;
  font-weight: 650 !important;
  font-size: .88rem;
  margin-bottom: .35rem;
}
#contenue.resource-content input:not([type="radio"]):not([type="checkbox"]),
#contenue.resource-content select,
#contenue.resource-content textarea {
  width: 100%;
  min-height: 42px;
  padding: .58rem .7rem !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #344054 !important;
  font: inherit;
  box-shadow: none !important;
}
#contenue.resource-content input:focus,
#contenue.resource-content select:focus,
#contenue.resource-content textarea:focus {
  outline: 0 !important;
  border-color: #e09a9a !important;
  box-shadow: 0 0 0 3px rgba(214,40,40,.08) !important;
}

#contenue.resource-content button,
#contenue.resource-content .btn,
#contenue.resource-content [class*="btn-"]:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out) {
  border-radius: 6px !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}
#contenue.resource-content button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out),
#contenue.resource-content .btn-primary,
#contenue.resource-content .download-btn,
#contenue.resource-content .btn-download,
#contenue.resource-content .action-btn {
  background: var(--sm-primary) !important;
  border-color: var(--sm-primary) !important;
  color: #fff !important;
}
#contenue.resource-content button:not(.leaflet-control-zoom-in):not(.leaflet-control-zoom-out):hover,
#contenue.resource-content .btn-primary:hover,
#contenue.resource-content .download-btn:hover,
#contenue.resource-content .btn-download:hover,
#contenue.resource-content .action-btn:hover {
  background: var(--sm-primary-dark) !important;
  border-color: var(--sm-primary-dark) !important;
}
#contenue.resource-content button:disabled { opacity:.52; cursor:not-allowed; }

/* ---------- code ---------- */
#contenue.resource-content .sm-code,
#contenue.resource-content pre {
  margin: 1rem 0 1.35rem !important;
  padding: .95rem 1rem !important;
  overflow: auto;
  border-radius: 7px !important;
  background: #171a21 !important;
  color: #f3f4f6 !important;
  border: 1px solid #252a34 !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
}
#contenue.resource-content code {
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
#contenue.resource-content :not(pre)>code {
  padding: .12rem .34rem;
  border-radius: 4px;
  background: #f2f4f7;
  color: #9b1b1b;
  font-size: .88em;
}

/* ============================================================
   LEAFLET — apparence commune
   ============================================================ */
#contenue.resource-content .sm-map-shell {
  margin: 1.25rem 0 1.7rem;
  border: 1px solid var(--sm-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 12px rgba(16,24,40,.07);
}
#contenue.resource-content .sm-map-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.72rem .9rem;
  border-bottom:1px solid var(--sm-line);
  background:#fafafa;
  color:#344054;
  font-size:.82rem;
}
#contenue.resource-content .sm-map-heading strong { display:flex;align-items:center;gap:.45rem; }
#contenue.resource-content .sm-map-heading i { color:var(--sm-primary); }
#contenue.resource-content .sm-map-heading span { color:#7b8491;font-size:.74rem; }

#contenue.resource-content .sm-leaflet-map,
#contenue.resource-content .leaflet-container {
  width: 100% !important;
  min-height: 430px !important;
  height: clamp(430px, 58vh, 620px) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #e9edf1 !important;
  font-family: inherit !important;
}
#contenue.resource-content .map-card,
#contenue.resource-content .sm-map-frame,
#contenue.resource-content .map-container {
  width:100% !important;
  max-width:none !important;
  margin:1.2rem 0 1.6rem !important;
  padding:0 !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#contenue.resource-content .leaflet-control-zoom,
#contenue.resource-content .leaflet-control-layers {
  border: 0 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(16,24,40,.18) !important;
}
#contenue.resource-content .leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  color: #344054 !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #e4e7ec !important;
  text-decoration:none !important;
}
#contenue.resource-content .leaflet-control-zoom a:hover { background:#f6f7f8 !important;color:var(--sm-primary)!important; }
#contenue.resource-content .leaflet-control-layers { background:#fff !important;color:#344054 !important;font-size:.78rem; }
#contenue.resource-content .leaflet-popup-content-wrapper {
  border-radius: 7px !important;
  box-shadow: 0 6px 24px rgba(16,24,40,.18) !important;
}
#contenue.resource-content .leaflet-popup-content { margin:.85rem 1rem !important;font-size:.82rem;line-height:1.5; }
#contenue.resource-content .leaflet-control-attribution { font-size:9px !important;background:rgba(255,255,255,.86)!important; }

/* ---------- modales internes ---------- */
#contenue.resource-content .modal-content,
#contenue.resource-content [class*="modal-"][class*="content"] {
  border:0 !important;
  border-radius:8px !important;
  box-shadow:0 12px 40px rgba(16,24,40,.22) !important;
}

/* ---------- classes connues provenant d'anciennes pages ---------- */
#contenue.resource-content .converter-header,
#contenue.resource-content .header-container {
  margin: 0 0 1rem !important;
  padding: 0 0 .8rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sm-line) !important;
  background: transparent !important;
  color: var(--sm-ink) !important;
  text-align:left !important;
}
#contenue.resource-content .converter-title { color:var(--sm-ink)!important; }
#contenue.resource-content .converter-description { color:var(--sm-muted)!important; }
#contenue.resource-content .radio-container {
  display:flex!important;
  flex-wrap:wrap;
  gap:.8rem;
  margin:.7rem 0 0!important;
}
#contenue.resource-content .radio-container label { display:inline-flex;align-items:center;gap:.35rem;margin:0!important; }

/* ---------- responsive ---------- */
@media (max-width: 767.98px) {
  #contenue.resource-content { font-size:.94rem; line-height:1.68; }
  #contenue.resource-content h2 { margin-top:1.85rem!important; }
  #contenue.resource-content .dual-images { grid-template-columns:1fr; }
  #contenue.resource-content .sm-leaflet-map,
  #contenue.resource-content .leaflet-container { min-height:360px!important;height:52vh!important;max-height:500px!important; }
  #contenue.resource-content .sm-map-heading { align-items:flex-start;flex-direction:column;gap:.2rem; }
  #contenue.resource-content table { min-width:520px; }
}