/* ==========================================================================
   MÉRA — Page Journal (journal.html uniquement)
   Référence : Méra_final_bref/Journal.png
   Mobile-first ; breakpoints identiques à responsive.css (768 / 1024 / 1440).
   ≥ 768px : positions et tailles en fraction de --W, la largeur de composition
   (cadre desktop de la maquette, x 226 → 857, 631 px), relevées sur la maquette.
   ========================================================================== */

.jrn {
  container-type: inline-size;
  --W: min(100cqw, 105rem);
  --frame-left: calc((100cqw - var(--W)) / 2);
}

/* ---- Photographies ---------------------------------------------------------
   Remplissent leur emplacement (géométrie de la maquette) ; cadrage par
   object-fit / object-position uniquement, aucun traitement de l'image. */
.jrn-img {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

/* Cadrages mobiles (emplacements plus étroits ou plus hauts) */
.jrn-img--hero {
  --pos: 80% 50%;
}

.jrn-img--edition {
  --pos: 62% 40%;
}

/* Cadrages desktop */
@media (min-width: 768px) {
  .jrn-img--hero {
    --pos: 95% 50%;
  }

  .jrn-img--edition {
    --pos: 50% 35%;
  }
}

/* ---- Éléments partagés ---------------------------------------------------- */

.jrn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  font-weight: var(--weight-bold);
}

.jrn-meta time {
  font-weight: var(--weight-medium);
}

/* Repère « LIRE L'ARTICLE → » : pas encore de page article (non cliquable).
   Cobalt sur ivoire ; sur noir, texte ivoire et flèche cobalt (contraste AA,
   même règle que « VOIR LA CARTE COMPLÈTE » de l'accueil). */
.jrn-read {
  color: var(--color-cobalt);
}

.surface-dark .jrn-read {
  color: var(--surface-fg);
}

.surface-dark .jrn-read .link-arrow__icon {
  color: var(--color-cobalt);
}

.jrn-read .link-arrow__label {
  border-bottom: 0;
}

/* ==========================================================================
   01 — Hero
   ========================================================================== */

.jrn-hero {
  position: relative;
  container-type: inline-size;
  --W: min(100cqw, 105rem);
  --frame-left: calc((100cqw - var(--W)) / 2);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-height) - var(--rule-width));
  min-height: calc(100svh - var(--header-height) - var(--rule-width));
  background-color: var(--color-ivory);
}

.jrn-hero__media {
  position: relative;
  flex: 1 0 auto;
  min-height: 61cqw;
  overflow: hidden;
}

.jrn-hero__inner {
  position: relative;
  padding-block: var(--space-5) var(--space-6);
}

.jrn-hero__title {
  padding-top: 0.12em;
  font-family: var(--font-sans-condensed-temp);
  font-size: min(4.46rem, 16.4cqw); /* taille commune des titres de hero (mobile) */
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 0.84;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.jrn-hero__kicker {
  margin-top: var(--space-3);
}

.jrn-hero__rule {
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: var(--space-4);
  background-color: var(--color-rule-on-light);
}

.jrn-hero__cta {
  margin-top: var(--space-2);
}

.jrn-hero__cta .link-arrow__label {
  border-bottom: 0;
}

/* ---- Hero ≥ 768px ----------------------------------------------------------
     hauteur 49,52 %W, jamais moins que la hauteur visible sous le header
     (même règle que l'accueil et Réserver) · photo de 33 % à 100 %W
     JOURNAL : cap 2,54 %W, 3,17 → 84,6 %W · accroche cap 22,66 %W
     texte 32,5 %W · filet 42,79 %W · lien cap 45,01 %W · repère cap 44,22 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .jrn-hero {
    display: block;
    min-height: 0;
    overflow: hidden;
  }

  .jrn-hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    left: calc(var(--frame-left) + var(--W) * 0.38);
    /* Transition ivoire → photo fondue, comme le hero de l'accueil (dont la
       photo intègre ce fondu) : la photo démarre à 38 %W et apparaît
       progressivement sur 12 %W. Aucun traitement de couleur. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--W) * 0.12));
    mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--W) * 0.12));
    min-height: 0;
  }

  .jrn-hero__inner {
    height: max(var(--W) * 0.4952, 100vh - var(--header-height) - var(--rule-width));
    height: max(var(--W) * 0.4952, 100svh - var(--header-height) - var(--rule-width));
    padding-block: 0;
  }

  .jrn-hero__inner > * {
    position: absolute;
    left: var(--grid-gutter);
    margin: 0;
  }

  .jrn-hero__title,
  .jrn-hero__title[data-reveal="clip"] {
    top: calc(var(--W) * 0.00822 - 0.2em);
    z-index: 1;
    margin-top: 0;
    padding-top: 0.2em;
    font-size: calc(var(--W) * 0.184);
    line-height: 0.8;
    letter-spacing: -0.015em;
    white-space: nowrap;
  }

  .jrn-br {
    display: block;
  }

  .jrn-hero__kicker {
    top: calc(var(--W) * 0.20313);
    font-size: max(0.75rem, var(--W) * 0.0247);
    line-height: calc(var(--W) * 0.02855);
  }

  .jrn-hero__text {
    top: calc(var(--W) * 0.3025);
    font-family: var(--font-serif);
    font-size: max(0.9375rem, var(--W) * 0.0188);
    line-height: calc(var(--W) * 0.0223);
    color: var(--color-muted-on-light);
  }

  .jrn-hero__rule {
    top: calc(var(--W) * 0.4104);
    width: calc(var(--W) * 0.041);
  }

  .jrn-hero__cta {
    top: calc(var(--W) * 0.42211);
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }

  /* Légende discrète, ancrée au coin inférieur droit de la photo */
  .jrn-hero__tag {
    top: auto;
    bottom: calc(var(--W) * 0.022);
    right: var(--grid-gutter);
    left: auto;
    z-index: 1;
    color: var(--color-ivory);
    font-weight: var(--weight-bold);
    text-align: right;
    font-size: max(0.6875rem, var(--W) * 0.0095);
    line-height: calc(var(--W) * 0.0165);
  }
}

/* ==========================================================================
   02 — Article principal
   ========================================================================== */

.jrn-feature {
  background-color: var(--surface-bg);
  color: var(--surface-fg);
}

.jrn-feature__media {
  position: relative;
  aspect-ratio: 390 / 205;
}

.jrn-feature__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--grid-gutter) var(--space-6);
}

.jrn-feature__title {
  padding-top: 0.08em;
  font-family: var(--font-sans-condensed-temp);
  font-size: 2.5rem;
  font-weight: var(--weight-black);
  font-stretch: condensed;
  line-height: 0.92;
  text-transform: uppercase;
}

.jrn-feature__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.35;
}

/* ---- Article principal ≥ 768px --------------------------------------------
     bande 26,94 %W · photo gouttière → 52,3 %W, 2,14 → 24,4 %W
     texte à 55,47 %W : méta cap 2,93 · titre cap 5,78 / 10,22 · texte 16,09
     · lien cap 23,53 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .jrn-feature {
    display: grid;
    grid-template-columns: calc(var(--W) * 0.523 - var(--grid-gutter)) minmax(0, 1fr);
    column-gap: calc(var(--W) * 0.0317);
    align-items: start;
    min-height: calc(var(--W) * 0.2694);
    padding: 0 var(--grid-gutter);
  }

  .jrn-feature__media {
    height: calc(var(--W) * 0.2226);
    margin-top: calc(var(--W) * 0.0214);
    aspect-ratio: auto;
  }

  .jrn-feature__body {
    gap: 0;
    padding: calc(var(--W) * 0.02525) 0 0;
  }

  .jrn-feature .jrn-meta {
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }

  /* sélecteur renforcé : prime sur le margin-top négatif de motion.css */
  .jrn-feature .jrn-feature__title[data-reveal="clip"],
  .jrn-feature__title {
    margin-top: calc(var(--W) * 0.00473);
    font-size: calc(var(--W) * 0.0448);
    line-height: calc(var(--W) * 0.0444);
  }

  .jrn-feature__text {
    margin-top: calc(var(--W) * 0.01629);
    font-size: max(0.9375rem, var(--W) * 0.0188);
    line-height: calc(var(--W) * 0.022);
  }

  .jrn-feature .jrn-read {
    margin-top: calc(var(--W) * 0.01151);
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }
}

/* ==========================================================================
   03 — Articles
   ========================================================================== */

.jrn-list {
  padding: var(--space-5) var(--grid-gutter) var(--space-6);
  background-color: var(--color-ivory);
}

.jrn-list__grid {
  display: grid;
  gap: var(--space-6);
  list-style: none;
}

/* Mobile : deux articles (maquette) ; le troisième n'apparaît qu'en desktop */
.jrn-item--desktop {
  display: none;
}

.jrn-item article {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.jrn-item__media {
  position: relative;
  align-self: stretch;
  aspect-ratio: 358 / 155;
  margin-bottom: var(--space-2);
}

.jrn-item__title {
  font-family: var(--font-serif);
  font-size: min(1.75rem, 6.4cqw);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-transform: uppercase;
}

.jrn-item__text {
  color: var(--color-muted-on-light);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.3;
}

/* ---- Articles ≥ 768px -------------------------------------------------------
     bande 39,14 %W · 3 colonnes de 28,1 %W, espacées de 4,43 %W, filet
     vertical au milieu de l'espace (1,82 → 37 %W) · image 1,9 → 17,67 %W
     méta cap 19,1 · titre cap 21,16 / 24,8 · texte 29,08 · lien cap 36,05 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .jrn-list {
    min-height: calc(var(--W) * 0.3914);
    padding: calc(var(--W) * 0.01821) var(--grid-gutter) 0;
  }

  .jrn-list__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 calc(var(--W) * 0.0443);
  }

  .jrn-item--desktop {
    display: block;
  }

  .jrn-item {
    position: relative;
  }

  /* Filet vertical au milieu de l'espace entre colonnes (1,82 → 37 %W) */
  .jrn-item + .jrn-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--W) * -0.02215);
    width: var(--rule-width);
    height: calc(var(--W) * 0.3518);
    background-color: var(--color-rule-on-light-soft);
  }

  .jrn-item article {
    gap: 0;
  }

  .jrn-item__media {
    height: calc(var(--W) * 0.1577);
    margin: calc(var(--W) * 0.0008) 0 0;
    aspect-ratio: auto;
  }

  .jrn-item .jrn-meta {
    margin-top: calc(var(--W) * 0.01026);
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }

  .jrn-item__title {
    margin-top: calc(var(--W) * 0.00365);
    font-size: calc(var(--W) * 0.025);
    line-height: 1.05;
  }

  .jrn-item__text {
    margin-top: calc(var(--W) * 0.02725);
    font-size: max(0.9375rem, var(--W) * 0.0188);
    line-height: calc(var(--W) * 0.0214);
  }

  .jrn-item .jrn-read {
    margin-top: calc(var(--W) * 0.00862);
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }
}

/* ==========================================================================
   04 — Édition
   ========================================================================== */

.jrn-edition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 45%;
  background-color: var(--surface-bg);
  color: var(--surface-fg);
}

.jrn-edition__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3) var(--space-5) var(--grid-gutter);
}

.jrn-edition__title {
  font-family: var(--font-serif);
  font-size: min(2.25rem, 8.8cqw);
  font-weight: var(--weight-regular);
  line-height: 1;
  text-transform: uppercase;
}

.jrn-edition__title b {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

.jrn-edition__dates {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jrn-edition__text {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.3;
}

/* Lien « DÉCOUVRIR L'ÉDITION → » en cobalt sur noir : texte ivoire, flèche
   cobalt (contraste AA, même règle que « VOIR LA CARTE COMPLÈTE ») */
.jrn-edition__link .link-arrow__label {
  border-bottom: 0;
}

.jrn-edition__link .link-arrow__icon {
  color: var(--color-cobalt);
}

.jrn-edition__media {
  position: relative;
  min-height: 9.5rem;
}

.jrn-edition__quote {
  position: absolute;
  z-index: 1;
  font-family: var(--font-serif);
  text-transform: uppercase;
}

/* ---- Édition ≥ 768px --------------------------------------------------------
     bande 22,98 %W · texte 0 → 33,8 %W · photo jusqu'au bord
     titre cap 3,73 · dates cap 8,3 · texte 11,7 · lien cap 19,3 %W
     accroche sur la photo : 81,9 %W, 4 lignes au pas de 2,98 %W dès 5,55 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .jrn-edition {
    grid-template-columns: calc(var(--W) * 0.338) minmax(0, 1fr);
    min-height: calc(var(--W) * 0.2298);
  }

  .jrn-edition__body {
    gap: 0;
    padding: calc(var(--W) * 0.03012) calc(var(--W) * 0.02) 0 var(--grid-gutter);
  }

  .jrn-edition__title {
    font-size: calc(var(--W) * 0.0332);
  }

  .jrn-edition__dates {
    margin-top: calc(var(--W) * 0.01347);
    font-size: max(0.75rem, var(--W) * 0.0195);
    line-height: 1.2;
  }

  .jrn-edition__text {
    margin-top: calc(var(--W) * 0.01122);
    font-size: max(0.9375rem, var(--W) * 0.0188);
    line-height: calc(var(--W) * 0.0215);
  }

  .jrn-edition__link {
    margin-top: calc(var(--W) * 0.00525);
    font-size: max(0.6875rem, var(--W) * 0.0125);
  }

  .jrn-edition__quote {
    top: calc(var(--W) * 0.04738);
    left: calc(var(--W) * (0.819 - 0.338));
    font-size: calc(var(--W) * 0.0192);
    line-height: calc(var(--W) * 0.0298);
  }
}

/* ==========================================================================
   05 — Newsletter
   ========================================================================== */

.jrn-news {
  padding: var(--space-5) var(--grid-gutter) var(--space-6);
  background-color: var(--surface-bg);
  color: var(--surface-fg);
}

.jrn-news__title {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: var(--weight-regular);
  line-height: 1;
  text-transform: uppercase;
}

.jrn-news__text {
  margin-top: var(--space-2);
  color: var(--color-muted-on-light);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.3;
}

.jrn-news__form {
  margin-top: var(--space-4);
}

.jrn-news__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.jrn-news__input {
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: 0 var(--space-4);
  border: var(--rule-width) solid var(--color-rule-on-light-soft);
  border-right: 0;
  border-radius: var(--radius-none);
  background-color: var(--color-ivory);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 1rem; /* ≥ 16px : pas de zoom automatique sur iOS */
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--duration-fast) linear;
}

.jrn-news__input::placeholder {
  color: var(--color-muted-on-light);
  opacity: 1;
}

@media (hover: hover) {
  .jrn-news__input:hover {
    border-color: var(--color-rule-on-light);
  }
}

.jrn-news__input:focus-visible {
  outline: 2px solid var(--color-cobalt);
  outline-offset: 2px;
  border-color: var(--color-black);
}

.jrn-news__input[aria-invalid="true"] {
  border-color: var(--color-black);
  border-width: 2px;
}

.jrn-news__btn {
  min-height: 3rem;
  border-radius: var(--radius-none);
}

.jrn-news__error,
.jrn-news__status {
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: var(--weight-bold);
  line-height: 1.3;
}

.jrn-news__error:empty,
.jrn-news__status:empty {
  display: none;
}

.jrn-news__error::before {
  content: "— ";
}

/* ---- Newsletter ≥ 768px -----------------------------------------------------
     bande 11,57 %W · titre cap 2,14 · texte 6,3 %W
     champ 46,6 → 76,8 %W, bouton → 96,0 %W, 2,85 → 8,64 %W
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .jrn-news {
    display: grid;
    grid-template-columns: calc(var(--W) * 0.466 - var(--grid-gutter)) minmax(0, 1fr);
    align-items: start;
    min-height: calc(var(--W) * 0.1157);
    padding: 0 var(--grid-gutter);
  }

  .jrn-news__intro {
    padding-top: calc(var(--W) * 0.01713);
  }

  .jrn-news__title {
    font-size: calc(var(--W) * 0.025);
  }

  .jrn-news__text {
    margin-top: calc(var(--W) * 0.01736);
    font-size: max(0.9375rem, var(--W) * 0.0188);
    line-height: calc(var(--W) * 0.02);
  }

  .jrn-news__form {
    margin-top: calc(var(--W) * 0.02851);
  }

  .jrn-news__row {
    grid-template-columns: calc(var(--W) * 0.302) minmax(0, 1fr);
  }

  .jrn-news__input,
  .jrn-news__btn {
    height: max(2.75rem, var(--W) * 0.0579);
    min-height: 0;
  }

  .jrn-news__input {
    padding: 0 calc(var(--W) * 0.019);
    font-size: max(0.875rem, var(--W) * 0.0125);
  }

  .jrn-news__btn {
    padding-block: 0;
    font-size: max(0.75rem, var(--W) * 0.011);
  }
}