/* =========================================================================
   OCDM · Overrides Bootstrap 5 / Drupal natifs
   ------------------------------------------------------------------------
   Cible les sélecteurs natifs (.btn, .form-control, .messages, nav.pager,
   nav.breadcrumb, .nav-tabs, .navbar, .field--*, .node--*) en consommant
   les tokens définis dans ocdm-tokens.css (--ocdm-*) et l'esprit V7
   (framboise + bleu glacier).
   Chargé AVANT ocdm-v7.css (qui termine sur les classes .ocdm-* finales).
   ========================================================================= */

/* Variables locales V7 héritées (déclarées par tokens [data-theme="framboise"])
   pour rappel : --v7-blue, --v7-blue-soft, --v7-ink, --v7-warm-grey. */
:root[data-theme="framboise"] {
  --v7-blue:         #b8d0db;
  --v7-blue-soft:    #eaf3f7;
  --v7-ink:          #1f1820;
  --v7-warm-grey:    #d9c9c5;
}

/* ──────────────────────────────────────────────────────────────
   REGIONS FEATURED-TOP / FEATURED-BOTTOM — full-width par défaut
   ────────────────────────────────────────────────────────────── */
/* Bootstrap Barrio rend les regions comme <section class="row region ..."> :
   `.row` est un flex container qui transforme les blocs enfants en
   flex-items width:auto. On neutralise pour que chaque bloc soit
   block-level full-width par défaut. Chaque bloc V7 a son propre
   .ocdm-container intérieur qui borne le contenu à 1280px, et son
   background peut s'étendre en pleine largeur.

   Les blocs qui doivent rester boxed (pas de wrapper interne) ont
   leur propre max-width via leur library spécifique. */
.region[class*="region-featured-top"],
.region[class*="region-featured-bottom"] {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  --bs-gutter-x: 0;
}

/* Boxing du bloc Animals Featured ("Eles procuram família") — il
   n'a pas de wrapper .ocdm-container interne (sort directement le
   markup Views). On le borne ici pour qu'il reste centré 1280px. */
.block-views-blockanimals-block-featured {
  max-width: var(--ocdm-container-max, 1280px);
  margin: 0 auto !important;
  padding-block: 2.5rem;
  padding-inline: var(--ocdm-container-pad-x, clamp(1rem, 2vw + 0.5rem, 2.5rem));
}

/* ──────────────────────────────────────────────────────────────
   FRONT PAGE — cacher le contenu Drupal par défaut.
   Sur /, sans node défini comme front page, Drupal affiche le titre
   "Welcome!" + le bloc system_main qui contient la view-frontpage
   "No front page content has been created yet". On masque tout ça :
   les blocs custom (hero, featured, stats, how-to-adopt) sont placés
   dans les régions featured_top / featured_bottom_* et restent
   visibles puisqu'ils sont en dehors de .layout-content.
   ────────────────────────────────────────────────────────────── */
.path-frontpage h1.page-title,
.path-frontpage .block-page-title-block,
.path-frontpage .block-system-main-block,
.path-frontpage .view-frontpage {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   Reset léger pour combler Bootstrap Reboot (focus, scroll, selection)
   ────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Container OCDM (max-width + padding fluide) */
.ocdm-container {
  width: 100%;
  max-width: var(--ocdm-container-max, 1280px);
  margin-inline: auto;
  padding-inline: var(--ocdm-container-pad-x, clamp(1rem, 2vw + 0.5rem, 2.5rem));
}

/* Bootstrap .container — on l'aligne sur le container OCDM */
body .container,
body .container-fluid,
body .container-xxl,
body .container-xl,
body .container-lg {
  max-width: var(--ocdm-container-max, 1280px);
  padding-inline: var(--ocdm-container-pad-x, clamp(1rem, 2vw + 0.5rem, 2.5rem));
}

/* ──────────────────────────────────────────────────────────────
   Listes & HR sobres
   ────────────────────────────────────────────────────────────── */
ul, ol {
  padding-left: 1.5rem;
}
hr {
  border: 0;
  border-top: 1px dashed var(--ocdm-border);
  margin: var(--ocdm-space-6) 0;
}

/* ──────────────────────────────────────────────────────────────
   BOUTONS Bootstrap 5 — rendu V7 (pill, ink border)
   ────────────────────────────────────────────────────────────── */
.btn {
  font-family: var(--ocdm-font-body) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  text-transform: none;
  border-radius: 999px;
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-width: 1px;
  border-style: solid;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(31, 24, 32, 0.12);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(31, 24, 32, 0.12);
}
.btn:focus-visible {
  outline: 2px solid var(--ocdm-primary);
  outline-offset: 3px;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
  background: var(--ocdm-framboise);
  border-color: var(--ocdm-framboise);
  color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):hover {
  background: var(--ocdm-framboise-dark);
  border-color: var(--ocdm-framboise-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(201, 53, 122, 0.25);
}

.btn-secondary,
.btn-outline-secondary {
  background: #fff;
  border-color: var(--v7-ink);
  color: var(--v7-ink);
}
.btn-secondary:hover,
.btn-outline-secondary:hover {
  background: var(--v7-blue-soft);
  border-color: var(--v7-ink);
  color: var(--v7-ink);
}

.btn-outline-primary {
  background: transparent;
  border-color: var(--ocdm-framboise);
  color: var(--ocdm-framboise);
}
.btn-outline-primary:hover {
  background: var(--ocdm-framboise);
  border-color: var(--ocdm-framboise);
  color: #fff;
}

.btn-danger {
  background: var(--ocdm-framboise);
  border-color: var(--ocdm-framboise);
  color: #fff;
}
.btn-danger:hover {
  background: var(--ocdm-framboise-dark);
  border-color: var(--ocdm-framboise-dark);
  color: #fff;
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--ocdm-framboise);
  text-decoration: underline;
  text-decoration-color: var(--v7-blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  min-height: 0;
}
.btn-link:hover {
  color: var(--ocdm-framboise-dark);
  text-decoration-color: var(--ocdm-framboise);
  box-shadow: none;
  transform: none;
}

.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }

/* ──────────────────────────────────────────────────────────────
   FORMULAIRES — .form-control, .form-select, .form-check, Webform
   ────────────────────────────────────────────────────────────── */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  border-radius: 10px;
  border: 1px solid var(--ocdm-border);
  background: #fff;
  padding: 11px 14px;
  font-family: var(--ocdm-font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--ocdm-text);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--ocdm-framboise);
  box-shadow: 0 0 0 3px rgba(201, 53, 122, 0.15);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ocdm-text-subtle);
  opacity: 1;
}

.form-control.is-invalid,
input[aria-invalid="true"] {
  border-color: var(--ocdm-danger);
  background: var(--ocdm-danger-soft);
}

label,
.form-label,
.form-item__label,
fieldset > legend {
  font-family: var(--ocdm-font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ocdm-text-strong);
  margin-bottom: 6px;
}

fieldset {
  border: 1px solid var(--ocdm-border);
  border-radius: 14px;
  padding: 20px 24px 24px;
  box-shadow: 0 2px 8px rgba(31, 24, 32, 0.04);
  background: #fff;
  margin-bottom: var(--ocdm-space-5);
}

legend {
  width: auto;
  font-family: var(--ocdm-font-body);
  font-weight: 700;
  background: var(--v7-blue);
  color: var(--v7-ink);
  border: 0;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 13px;
  margin-bottom: var(--ocdm-space-3);
}

/* Erreurs Drupal */
.form-item--error-message,
.form-item .error,
.error-message {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--ocdm-danger);
  font-size: 13px;
  font-weight: 600;
}
.form-item--error-message::before { content: "✕"; font-weight: 700; }

/* Description sous champs */
.form-item .description,
.description.help-block,
.form-text {
  font-size: 13px;
  color: var(--ocdm-text-muted);
  margin-top: 4px;
}

/* Webform : radios/checkboxes en pills */
.webform-options-display-buttons .form-item,
.webform-options-display-side-by-side .form-item {
  margin-right: 8px;
}

/* ──────────────────────────────────────────────────────────────
   MESSAGES Drupal (status/error/warning/info)
   ────────────────────────────────────────────────────────────── */
.messages {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px;
  margin: 0 0 16px;
  border-radius: 0 10px 10px 0;
  border-left: 4px solid var(--ocdm-info);
  background: var(--ocdm-info-soft);
  color: var(--ocdm-text-strong);
  font-size: 14px;
  line-height: 1.5;
  font-family: var(--ocdm-font-body);
}
.messages--status {
  background: var(--ocdm-success-soft);
  border-left-color: var(--ocdm-success);
}
.messages--warning {
  background: var(--ocdm-warning-soft);
  border-left-color: var(--ocdm-warning);
}
.messages--error {
  background: var(--ocdm-danger-soft);
  border-left-color: var(--ocdm-danger);
}

/* ──────────────────────────────────────────────────────────────
   PAGER Drupal & Pagination Bootstrap
   ────────────────────────────────────────────────────────────── */
nav.pager,
.pagination {
  margin: var(--ocdm-space-7) 0;
}

.pager__items,
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pager__item,
.page-item {
  display: inline-flex;
}

.pager__item a,
.pager__item--current,
.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  color: var(--ocdm-text);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--ocdm-font-body);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pager__item a:hover,
.page-link:hover {
  background: var(--v7-blue-soft);
  color: var(--v7-ink);
  text-decoration: none;
}

.pager__item--current,
.pager__item.is-active a,
.page-item.active .page-link {
  background: var(--ocdm-framboise);
  color: #fff;
  border-color: var(--ocdm-framboise);
}

/* ──────────────────────────────────────────────────────────────
   BREADCRUMB
   ────────────────────────────────────────────────────────────── */
nav.breadcrumb,
.breadcrumb {
  margin: 0 0 var(--ocdm-space-4);
  font-family: var(--ocdm-font-body);
  font-size: 14px;
  color: var(--ocdm-text-muted);
  background: transparent;
  padding: 0;
}

.breadcrumb,
nav.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item,
nav.breadcrumb li {
  display: inline-flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before,
nav.breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--ocdm-text-subtle);
  font-weight: 700;
  float: none;
  padding: 0;
}

.breadcrumb a,
nav.breadcrumb a {
  color: var(--ocdm-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover,
nav.breadcrumb a:hover {
  color: var(--ocdm-framboise);
  text-decoration: underline;
  text-decoration-color: var(--v7-blue);
}
.breadcrumb-item.active,
nav.breadcrumb [aria-current="page"] {
  color: var(--ocdm-text-strong);
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   LOCAL TASKS (Drupal tabs) — nav.tabs
   ────────────────────────────────────────────────────────────── */
nav.tabs,
.tabs {
  margin: 0 0 var(--ocdm-space-5);
  border-bottom: 1px solid var(--ocdm-border);
}

.tabs__list,
nav.tabs ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.tabs__tab,
nav.tabs li {
  margin-bottom: -1px;
}

.tabs__link,
nav.tabs a {
  display: inline-flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--ocdm-text-muted);
  text-decoration: none;
  font-family: var(--ocdm-font-body);
  font-weight: 600;
  font-size: 14px;
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs__link:hover,
nav.tabs a:hover {
  color: var(--ocdm-text-strong);
  border-bottom-color: var(--ocdm-border);
}
.tabs__link.is-active,
.tabs__tab.is-active .tabs__link,
nav.tabs .is-active a {
  color: var(--ocdm-framboise);
  border-bottom-color: var(--ocdm-framboise);
  font-weight: 700;
}

/* Action links (Drupal "Add content"…) */
.action-links {
  list-style: none;
  margin: 0 0 var(--ocdm-space-5);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.action-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ocdm-framboise);
  color: #fff;
  font-family: var(--ocdm-font-body);
  font-weight: 600;
  font-size: 13px;
  border-radius: 999px;
  text-decoration: none;
}
.action-links a:hover {
  background: var(--ocdm-framboise-dark);
}

/* ──────────────────────────────────────────────────────────────
   HEADER / NAV bootstrap_barrio (.navbar)
   ────────────────────────────────────────────────────────────── */
.navbar.bg-light,
.navbar.bg-white,
header.navbar {
  background: var(--ocdm-bg) !important;
  border-bottom: 1px solid var(--ocdm-border);
  padding-block: 12px;
}

.navbar-brand,
.site-name a,
.site-branding__name {
  font-family: var(--ocdm-font-display) !important;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--ocdm-text-strong);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.navbar-brand:hover,
.site-name a:hover { color: var(--ocdm-text-strong); }

.site-slogan {
  font-family: var(--ocdm-font-hand);
  font-size: 1rem;
  color: var(--ocdm-framboise);
  line-height: 1.2;
}

.navbar-nav .nav-link {
  font-family: var(--ocdm-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ocdm-text-strong) !important;
  letter-spacing: -0.01em;
  padding: 8px 14px !important;
  position: relative;
  text-decoration: none;
}
.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 3px;
  background: var(--v7-blue);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-link.is-active::after {
  transform: scaleX(1);
}

/* gTranslate widget : sobre */
.gtranslate_wrapper select,
.gt_selector {
  font-family: var(--ocdm-font-body);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--ocdm-border);
  border-radius: 999px;
  padding: 4px 10px;
  background: #fff;
  color: var(--ocdm-text);
}

/* ──────────────────────────────────────────────────────────────
   FOOTER (.site-footer / .region-footer)
   ────────────────────────────────────────────────────────────── */
.site-footer,
footer.site-footer {
  background: var(--v7-ink);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--ocdm-space-10);
  padding-block: 56px 28px;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer a:hover { color: var(--v7-blue); }

.site-footer h2,
.site-footer h3,
.site-footer .block-title {
  font-family: var(--ocdm-font-body);
  font-weight: 700;
  color: var(--v7-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  margin-bottom: 12px;
}

/* ──────────────────────────────────────────────────────────────
   NODE — display modes default (sécurité : pas casser admin)
   ────────────────────────────────────────────────────────────── */
.field--label {
  font-family: var(--ocdm-font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ocdm-text-strong);
  margin-bottom: 4px;
}

/* ──────────────────────────────────────────────────────────────
   IMAGES — comportement sain par défaut
   ────────────────────────────────────────────────────────────── */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
}
figure { margin: 0; }

/* ──────────────────────────────────────────────────────────────
   H2 — vague ondulée SVG bleu glacier en-dessous (universel).
   Le titre H2 est toujours suivi automatiquement d'une vague qui
   évoque le souligné manuscrit V7. Skip pour les contextes
   "système" (footer, admin, dropdowns…).
   ────────────────────────────────────────────────────────────── */
:where(main, .featured-top, .featured-bottom, .ocdm-page__main,
       article, .block:not(.site-footer)) h2:not(.no-wave)::after {
  content: "";
  display: block;
  height: 10px;
  width: 160px;
  max-width: 100%;
  margin-top: 0.4rem;
  background: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 10' fill='none' stroke='%23b8d0db' stroke-width='3' stroke-linecap='round'><path d='M3 6 Q 20 1, 36 6 T 68 6 T 100 6 T 132 6 T 164 6 T 196 6 T 228 6 T 254 6'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Si un .ocdm-underline est déjà présent juste après le h2, on n'affiche
   pas en double la vague auto. */
h2:has(+ .ocdm-underline)::after {
  display: none;
}

/* Pour les h2 plus grands (titres section), vague plus large. */
.ocdm-section-head__title::after,
.home-hero__title + h2::after {
  width: 220px;
  height: 12px;
}

/* Pas de vague pour : titres de blocs admin, dropdowns, modal headers,
   tabs, sidebar widgets, navigation, login form… */
.site-footer h2::after,
.navbar h2::after,
nav h2::after,
[role="dialog"] h2::after,
.modal h2::after,
.dropdown h2::after,
.gin-toolbar h2::after,
.sidebar-first h2::after,
.region-sidebar-first h2::after,
.no-wave::after {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────
   HEADER actions — pictogrammes user (Mon compte / Connexion /
   Déconnexion) à droite du menu principal.
   Style charte V7 : cercle outline ink, icône stroke ink, hover
   framboise. Cohérent avec le gtranslate à côté.
   ────────────────────────────────────────────────────────────── */
.ocdm-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-left: 1rem;
}

.ocdm-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--ocdm-text-strong, #1f1820);
  border: 1.5px solid var(--ocdm-text-strong, #1f1820);
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ocdm-header-icon:hover,
.ocdm-header-icon:focus-visible {
  background: var(--ocdm-framboise, #c9357a);
  color: #fff;
  border-color: var(--ocdm-framboise, #c9357a);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 53, 122, 0.25);
}
.ocdm-header-icon--logout:hover,
.ocdm-header-icon--logout:focus-visible {
  background: #fff;
  color: var(--ocdm-framboise, #c9357a);
  border-color: var(--ocdm-framboise, #c9357a);
}
.ocdm-header-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.ocdm-header-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Header actions — responsive mobile / tablette.
   Sous 992px, le navbar Bootstrap se collapse derrière le burger ;
   les pictos user passent en pleine largeur dans le menu ouvert. */
@media (max-width: 991px) {
  .ocdm-header-actions {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
    justify-content: flex-start;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--ocdm-border);
  }
}

/* ============================================================================
   STRUCTURE des classes .ocdm-* (display, flex, grid, sizing).
   Le LOOK (couleurs, fontes, ombres) est dans ocdm-v7.css ; ici on s'occupe
   uniquement de la structure que v7.css ne définit pas (components.css n'étant
   pas chargé).
   ============================================================================ */

/* Group de boutons */
.ocdm-btn-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

/* .ocdm-btn — structure de base. v7.css définit le look (pill, bg, fonts) mais
   pas display/align. Sans ça, un <a class="ocdm-btn"> reste inline plat,
   ignore les height/padding verticales, et le contenu n'est pas centré. */
.ocdm-btn,
a.ocdm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none !important;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: middle;
}

/* Underline V7 (souligné ondulé bleu glacier) — display block inline pour
   apparaître sous le titre du hero. v7.css set background-image SVG. */
.home-hero__copy .ocdm-underline {
  display: block;
}

/* Lien hover des cards : pas de souligné */
a.ocdm-card-animal,
a.ocdm-card-team,
a.ocdm-card-news {
  text-decoration: none !important;
  color: inherit;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-card-animal — structure
   ────────────────────────────────────────────────────────────── */
.ocdm-card-animal {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ocdm-card-animal__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 10px;
}
.ocdm-card-animal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ocdm-card-animal__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.1;
}
.ocdm-card-animal__name-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ocdm-card-animal__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ocdm-text-muted);
  font-weight: 600;
  font-size: 0.95em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Picto sexe coloré charte V7 :
   ♀ femelle → framboise (couleur signature)
   ♂ mâle    → bleu glacier (accent)
   SVG icon 14px parfaitement centré dans cercle 28px. */
.ocdm-card-animal__sex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  line-height: 0;
}
.ocdm-card-animal__sex svg {
  display: block;
  width: 14px;
  height: 14px;
}
.ocdm-card-animal__sex--female {
  color: #fff;
  background: var(--ocdm-framboise, #c9357a);
  border: 1.5px solid var(--ocdm-framboise, #c9357a);
}
.ocdm-card-animal__sex--male {
  color: var(--ocdm-text-strong, #1f1820);
  background: var(--v7-blue, #b8d0db);
  border: 1.5px solid var(--ocdm-text-strong, #1f1820);
}
.ocdm-card-animal__age {
  color: var(--ocdm-text-muted);
  font-size: 0.95rem;
}
.ocdm-card-animal__age::before {
  content: "·";
  margin-right: 4px;
  color: var(--ocdm-text-subtle, #a89aa0);
}
.ocdm-card-animal__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}
.ocdm-card-animal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-card-team — structure
   ────────────────────────────────────────────────────────────── */
.ocdm-card-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.ocdm-card-team__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ocdm-card-team__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-stats — grille 4 cols (responsive)
   ────────────────────────────────────────────────────────────── */
.ocdm-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  text-align: center;
}
.ocdm-stats__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .ocdm-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .ocdm-stats { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-steps + .ocdm-step — grille 4 cols (responsive)
   ────────────────────────────────────────────────────────────── */
.ocdm-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ocdm-step {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  position: relative;
}
@media (max-width: 992px) {
  .ocdm-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .ocdm-steps { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-polaroid — display + transform
   ────────────────────────────────────────────────────────────── */
.ocdm-polaroid {
  display: inline-block;
  transform: rotate(var(--ocdm-rotate, -1deg));
  transition: transform 200ms ease, box-shadow 200ms ease;
  max-width: 100%;
}
.ocdm-polaroid img,
.ocdm-polaroid > .ocdm-polaroid__img {
  display: block;
  width: 100%;
  height: auto;
}
.ocdm-polaroid__caption {
  display: block;
  text-align: center;
  line-height: 1;
  margin-top: 6px;
}
.ocdm-polaroid--left  { --ocdm-rotate: -2deg; }
.ocdm-polaroid--right { --ocdm-rotate:  2deg; }
.ocdm-polaroid--flat  { --ocdm-rotate:  0deg; }

/* Polaroid utilisé comme lien (cartes animaux cliquables sur la home). */
a.ocdm-polaroid {
  text-decoration: none;
  color: inherit;
}
a.ocdm-polaroid:focus-visible {
  outline: 3px solid var(--ocdm-framboise, #c9357a);
  outline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-photo-placeholder — fond crème sunken avec hachures + 📷.
   Cible V7 cible : tissu de fond très subtil, mono uppercase muted,
   icône camera au centre.
   Les cards animal overrident en bleu glacier soft (voir bloc dédié).
   ────────────────────────────────────────────────────────────── */
.ocdm-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(31, 24, 32, 0.04) 14px 15px),
    var(--ocdm-bg-sunken, #f6ebe0);
  color: var(--ocdm-text-muted);
  font-family: var(--ocdm-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 12px;
}

/* Icône camera SVG, plus propre que l'emoji 📷 (rendu inconsistant
   selon les OS). Stroke ink semi-transparent. */
.ocdm-photo-placeholder::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89aa0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  margin-bottom: 4px;
}

.ocdm-photo-placeholder > span {
  position: relative;
  z-index: 1;
}

/* Override pour les cards animal : fond bleu glacier soft (charte V7) */
.ocdm-card-animal__media .ocdm-photo-placeholder {
  background:
    repeating-linear-gradient(135deg,
      transparent 0 14px,
      rgba(31, 24, 32, 0.03) 14px 15px),
    var(--v7-blue-soft, #eaf3f7);
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-urgent — flex row + label pill
   ────────────────────────────────────────────────────────────── */
.ocdm-urgent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ocdm-urgent__label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.ocdm-urgent__text {
  flex: 1;
  min-width: 260px;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-section-head — kicker + title (Caveat + Fraunces)
   ────────────────────────────────────────────────────────────── */
.ocdm-section-head {
  margin-bottom: 1.5rem;
}
.ocdm-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.ocdm-section-head__kicker {
  font-family: var(--ocdm-font-hand);
  font-size: 1.35rem;
  color: var(--ocdm-framboise);
  line-height: 1;
  margin: 0 0 0.25rem;
  display: inline-block;
}
.ocdm-section-head__title {
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-grid-4 / .ocdm-grid-3
   ────────────────────────────────────────────────────────────── */
.ocdm-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ocdm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 992px) {
  .ocdm-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ocdm-grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ocdm-grid-4 { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-partners — grille adaptable
   ────────────────────────────────────────────────────────────── */
.ocdm-partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  align-items: center;
  justify-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ocdm-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-chip — pill display
   ────────────────────────────────────────────────────────────── */
.ocdm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-badge — pill display
   ────────────────────────────────────────────────────────────── */
.ocdm-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────
   .ocdm-underline — souligné ondulé SVG (déjà stylé par v7.css en
   background-image, ici on s'assure que c'est en display inline-block)
   ────────────────────────────────────────────────────────────── */
.ocdm-underline {
  display: inline-block;
  vertical-align: middle;
}

/* ============================================================================
   Grid des Views cards animal — force le grid 4 cols même si Bootstrap
   met une classe `.row` (display: flex) sur .view-content.
   ============================================================================ */
.view-animals-featured .view-content,
.view-animals-urgent .view-content,
.view-animals-related .view-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  /* On annule la .row Bootstrap (margin négatif) */
  --bs-gutter-x: 0;
}
.view-animals-featured .views-row,
.view-animals-urgent .views-row,
.view-animals-related .views-row {
  list-style: none;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0;
  flex: none !important;
}
@media (max-width: 992px) {
  .view-animals-featured .view-content,
  .view-animals-urgent .view-content,
  .view-animals-related .view-content {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .view-animals-featured .view-content,
  .view-animals-urgent .view-content,
  .view-animals-related .view-content {
    grid-template-columns: 1fr;
  }
}