/**
 * Block: ODD — « Une performance pensée pour durer. »
 *
 * Carrousel de tuiles sur fond crème : icône officielle carrée en haut,
 * « ODD 8 - intitulé officiel » en dessous. 4 / 3 / 2 / 1 par vue.
 *
 * La piste est un conteneur scroll-snap natif : sans JavaScript elle reste
 * défilable au doigt, au trackpad et au clavier. odd.js n'ajoute que les
 * flèches et la pagination.
 *
 * Trois points à ne pas « corriger » :
 *
 *   1. Aucun filtre ni recoloration sur les icônes. Le kit officiel ODD
 *      s'utilise tel quel : ni grayscale, ni teinte or, ni variante blanche
 *      inventée. Une icône désaturée est une altération d'identité visuelle
 *      onusienne, pas un parti pris graphique.
 *
 *   2. object-fit reste en contain. Recadrer le carré officiel l'altère.
 *
 *   3. Aucune troncature. Pas de line-clamp, pas de hauteur fixe : les
 *      intitulés officiels des objectifs sont longs et doivent rester lisibles
 *      en entier, y compris à 320 px.
 *
 * Reuse design tokens (--cauris-*) declared in style.css.
 */

/* Le ratio des icônes et les gouttières ne doivent pas dépendre du reset
   ambiant : sous content-box, padding et bordure s'ajouteraient au calcul. */
.odd-block,
.odd-block *,
.odd-block *::before,
.odd-block *::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * Section frame
 * --------------------------------------------------------------- */

.odd-block {
  position: relative;
  padding: 5.5rem 0; /* 88 px, haut de la fourchette 80–96 */
  background: var(--cauris-bg, #F8F4EC);
  color: var(--cauris-ink, #1B1B1B);

  --odd-per-view:  4;
  --odd-col-gap:   1.75rem; /* 28 px */
  --odd-rule:      #E4D9C3; /* beige discret, un cran sous --cauris-bg */
  --odd-card-bg:   #FFFFFF;
  --odd-card-pad:  1.125rem;
  --odd-title-fs:  1.0625rem; /* 17 px : l'intitulé officiel complet tient sans être tassé */
}

/* ---------------------------------------------------------------
 * Header — eyebrow + titre + introduction
 * --------------------------------------------------------------- */

.odd-block__header {
  align-items: end;
  margin-bottom: 3.5rem; /* margin-bottom seul, jamais le shorthand : la row
                            Bootstrap gère ses marges latérales négatives. */
}

.odd-block__head {
  max-width: 720px;
}

.odd-block__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: .25rem;
}

.odd-block__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-family: var(--cauris-font-sans);
  font-size: var(--cauris-eyebrow-fs, .75rem);
  font-weight: var(--cauris-eyebrow-weight, 600);
  letter-spacing: var(--cauris-eyebrow-tracking, .2em);
  text-transform: uppercase;
  color: var(--cauris-gold-dark, #8A6825);
}
.odd-block__eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  background: var(--cauris-gold-1, #BF953F);
}

.odd-block__heading {
  margin: 0;
  font-family: var(--cauris-font-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.85rem); /* 45,6 px max — fourchette 44–48 */
  line-height: 1.15;
  letter-spacing: -.01em;
  /* Encre par défaut ; bascule en bleu profond si le H2 porte
     .cauris-heading--deep (voir style.css). */
  color: var(--cauris-heading-color, var(--cauris-ink, #1B1B1B));
}

.odd-block__description {
  margin: 0;
  font-family: var(--cauris-font-spectral, Georgia, serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--cauris-ink-soft, #4A4A4A);
}
.odd-block__description p { margin: 0; }
.odd-block__description p + p { margin-top: .65rem; }

/* ---------------------------------------------------------------
 * Piste du carrousel — 4 / 3 / 2 / 1 par vue
 * --------------------------------------------------------------- */

.odd-block__carousel {
  position: relative;
}

.odd-block__list {
  display: flex;
  gap: var(--odd-col-gap);
  margin: 0;
  /* Le padding laisse respirer l'anneau de focus et l'ombre de survol, que
     overflow-x rognerait au ras de la tuile. */
  padding: .25rem;
  margin-inline: -.25rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* Compense le padding ci-dessus, sinon le snap décale la piste de 4 px. */
  scroll-padding-inline: .25rem;
  scroll-behavior: smooth;
  /* Barre native masquée : flèches et pagination portent l'affordance. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.odd-block__list::-webkit-scrollbar { display: none; }

.odd-block__list:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8A6825);
  outline-offset: 2px;
}

.odd-block__item {
  /* Largeur exacte pour que N tuiles + (N-1) gouttières remplissent la vue. */
  flex: 0 0 calc(
    (100% - (var(--odd-per-view) - 1) * var(--odd-col-gap)) / var(--odd-per-view)
  );
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--odd-card-bg);
  border: 1px solid var(--odd-rule);
  /* Pas de transform au survol : AOS pose translate3d() sur les éléments
     data-aos avec une spécificité supérieure, la règle serait ignorée. */
  transition:
    border-color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1)),
    box-shadow var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
}

@media (hover: hover) {
  .odd-block__item:hover {
    border-color: var(--cauris-gold-1, #BF953F);
    box-shadow: 0 12px 26px rgba(27, 27, 27, .09);
  }
}

/* ---------------------------------------------------------------
 * Icône officielle — visuel principal de la tuile, pleine largeur.
 * Rendue seulement quand le fichier officiel est fourni (cf. template.php).
 * --------------------------------------------------------------- */

.odd-block__visual {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.odd-block__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Aucun filter ici. Voir l'avertissement en tête de fichier. */
}

/* ---------------------------------------------------------------
 * Intitulé — numéro et libellé officiel sur une seule ligne de titre
 * --------------------------------------------------------------- */

.odd-block__body {
  flex: 1 1 auto;
  padding: var(--odd-card-pad) var(--odd-card-pad) calc(var(--odd-card-pad) + .25rem);
}

.odd-block__title {
  margin: 0;
  font-family: var(--cauris-font-serif);
  font-weight: 600;
  font-size: var(--odd-title-fs);
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--cauris-ink, #1B1B1B);
  /* Intitulé officiel complet, jamais tronqué. */
  overflow-wrap: break-word;
}

.odd-block__title-number {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* 5,0:1 sur le blanc de la tuile — au-dessus du seuil AA, contrairement au
     même or posé sur le crème de la section. */
  color: var(--cauris-gold-dark, #8A6825);
}

/* Axe sans icône officielle : un filet or tient lieu d'ancre visuelle.
   Jamais de pictogramme de remplacement. */
.odd-block__item--no-icon .odd-block__body {
  padding-top: calc(var(--odd-card-pad) + .375rem);
  border-top: 3px solid var(--cauris-gold-1, #BF953F);
}

/* ---------------------------------------------------------------
 * Contrôles — flèches + pagination, injectés par odd.js
 *
 * Masqués tant que le script n'a pas pris la main, et retirés quand toutes
 * les tuiles tiennent déjà dans la vue : un carrousel qui ne défile pas ne
 * doit pas afficher de flèches mortes.
 * --------------------------------------------------------------- */

.odd-block__controls {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 2rem;
}

.odd-block__carousel.is-ready .odd-block__controls {
  display: flex;
}

.odd-block__arrows {
  display: flex;
  gap: .625rem;
  margin-left: auto;
}

.odd-block__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.875rem;
  height: 2.875rem;
  padding: 0;
  background: var(--odd-card-bg);
  border: 1px solid var(--odd-rule);
  border-radius: 999px;
  color: var(--cauris-ink, #1B1B1B);
  cursor: pointer;
  transition:
    border-color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1)),
    color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1)),
    box-shadow var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
}

.odd-block__nav svg {
  width: 1.0625rem;
  height: 1.0625rem;
}

@media (hover: hover) {
  .odd-block__nav:hover:not(:disabled) {
    border-color: var(--cauris-gold-1, #BF953F);
    color: var(--cauris-gold-dark, #8A6825);
    box-shadow: 0 10px 22px rgba(27, 27, 27, .09);
  }
}

.odd-block__nav:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8A6825);
  outline-offset: 3px;
}

.odd-block__nav:disabled {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}

/* --- Pagination : pastilles jusqu'à huit vues, rail de progression au-delà --- */

.odd-block__pagination {
  display: flex;
  align-items: center;
  min-width: 0;
}

.odd-block__dots {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.odd-block__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  background: rgba(27, 27, 27, .18);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition:
    width var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1)),
    background-color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
}

.odd-block__dot:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8A6825);
  outline-offset: 3px;
}

.odd-block__dot.is-active {
  width: 1.75rem;
  background: var(--cauris-grad-gold, linear-gradient(to right, #BF953F, #FCF6BA, #B38728));
}

.odd-block__rail {
  position: relative;
  width: min(220px, 40vw);
  height: 2px;
  background: rgba(27, 27, 27, .14);
  overflow: hidden;
}

.odd-block__rail-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cauris-grad-gold, linear-gradient(to right, #BF953F, #FCF6BA, #B38728));
  transition: transform var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
  transform-origin: left center;
}

/* ---------------------------------------------------------------
 * Mention de prudence — en texte lisible, jamais en note miniature
 * --------------------------------------------------------------- */

.odd-block__footnote {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--odd-rule);
}

.odd-block__disclaimer {
  max-width: 62ch;
  margin: 0;
  font-family: var(--cauris-font-sans);
  font-size: 1rem; /* 16 px : « en texte lisible », pas en mention légale */
  line-height: 1.6;
  color: var(--cauris-ink-soft, #4A4A4A);
}

.odd-block__source {
  margin: .75rem 0 0;
  font-family: var(--cauris-font-sans);
  font-size: .95rem;
  line-height: 1.6;
}

.odd-block__source-link {
  color: var(--cauris-ink, #1B1B1B);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--cauris-gold-1, #BF953F);
  transition: text-decoration-color var(--cauris-dur-base, .25s) var(--cauris-ease, cubic-bezier(.22, .61, .36, 1));
}
.odd-block__source-link:hover,
.odd-block__source-link:focus-visible {
  text-decoration-color: var(--cauris-ink, #1B1B1B);
}
.odd-block__source-link:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8A6825);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * Rappels éditoriaux — rendus dans l'éditeur uniquement
 * --------------------------------------------------------------- */

.odd-block__notices {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.odd-block__notice {
  margin: 0;
  padding: .55rem .75rem;
  font-family: var(--cauris-font-sans);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--cauris-ink, #1B1B1B);
  background: rgba(191, 149, 63, .1);
  border-left: 3px solid var(--cauris-gold-1, #BF953F);
}

/* ---------------------------------------------------------------
 * Responsive — 4 tuiles par vue sur desktop, puis 3 / 2 / 1
 *
 * odd.js relit --odd-per-view à chaque redimensionnement : modifier une
 * valeur ici suffit, le pas de défilement et la pagination suivent.
 * --------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1399.98px) {
  .odd-block {
    --odd-per-view: 3;
  }
}

/* Tablette */
@media (max-width: 1199.98px) {
  .odd-block {
    padding: 4rem 0; /* 64 px tablette */
    --odd-per-view:  2;
    --odd-col-gap:   1.5rem;
    --odd-card-pad:  1.25rem;
    --odd-title-fs:  1.125rem;
  }
  .odd-block__header {
    align-items: start;
    margin-bottom: 2.5rem;
  }
  .odd-block__side { margin-top: 1.25rem; padding-bottom: 0; }
  .odd-block__footnote { margin-top: 2.75rem; }
}

/* Mobile large — une tuile pleine, la suivante amorcée pour signaler le défilement */
@media (max-width: 767.98px) {
  .odd-block {
    padding: 3rem 0; /* 48 px mobile */
    --odd-per-view: 1.35;
    --odd-col-gap:  1.25rem;
    --odd-title-fs: 1.0625rem;
  }
  .odd-block__controls { margin-top: 1.75rem; }
  .odd-block__footnote { margin-top: 2.25rem; }
}

/* Mobile étroit */
@media (max-width: 479.98px) {
  .odd-block {
    --odd-per-view: 1.12;
  }
  .odd-block__nav {
    width: 2.625rem;
    height: 2.625rem;
  }
}

/* ---------------------------------------------------------------
 * Réduction des animations
 * --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .odd-block__item,
  .odd-block__nav,
  .odd-block__dot,
  .odd-block__rail-fill,
  .odd-block__source-link {
    transition: none;
  }
  /* Le défilement saute d'une vue à l'autre au lieu de glisser. */
  .odd-block__list {
    scroll-behavior: auto;
  }
}