/* Accueil — « Des projets qui se voient dans la rue » : grands panneaux photographiques décalés.
   Chargé uniquement sur la page d'accueil. */
.rea {
  --nuit: #07111c; --bleu-nuit: #0b1f3a; --cy: #8fd0f2;
  position: relative; isolation: isolate; overflow-x: clip;
  background: radial-gradient(120% 60% at 80% 0%, #0c1d33 0%, var(--nuit) 55%, #050d16 100%);
  color: #fff; padding-block: var(--sec);
}
.rea__intro { max-width: 52rem; margin-bottom: clamp(36px, 6vw, 88px); }
.rea .kicker { color: var(--cy); }
.rea__h { margin: 12px 0 0; font-weight: 820; font-stretch: 120%; font-size: clamp(2.2rem, 5.4vw, 5rem); line-height: .96; letter-spacing: -.02em; max-width: 14ch; }

.rea__list { margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(40px, 5vw, 72px); }
.rea__item { position: relative; display: grid; grid-template-columns: minmax(0, 76fr) minmax(0, 24fr); align-items: end; column-gap: clamp(20px, 2.4vw, 36px); }
.rea__item--r { grid-template-columns: minmax(0, 24fr) minmax(0, 76fr); }
.rea__item--r .rea__panel { grid-column: 2; grid-row: 1; }
.rea__item--r .rea__meta { grid-column: 1; grid-row: 1; text-align: right; align-items: flex-end; }
.rea__item:nth-child(odd) { z-index: 1; } .rea__item:nth-child(even) { z-index: 2; }

/* Panneau : la photo studio entière (jamais recadrée) ; la bande du haut prolonge son fond et porte le titre */
.rea__panel {
  position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: #1a2230; cursor: zoom-in; color: inherit; font: inherit; text-align: left;
  container-type: inline-size;
  box-shadow: 0 0 0 1px rgba(143, 208, 242, .14), 0 40px 90px rgba(0, 0, 0, .5);
}
.rea__bg { position: absolute; inset: 0; background-repeat: no-repeat; background-size: 100% 100%; }
.rea__band { display: block; height: 15cqw; }
.rea__img { position: relative; display: block; aspect-ratio: var(--ar, 3 / 2); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
.rea__img picture, .rea__img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.rea__img img { object-fit: contain; transition: transform 1.3s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.rea__panel:focus-visible { outline: 3px solid var(--cy); outline-offset: 4px; }

/* Titres : bleu nuit sur les fonds clairs, blanc sur les fonds sombres */
.rea__title { position: absolute; z-index: 2; left: 4cqw; top: 3.2cqw; max-width: 92cqw; white-space: nowrap; font-weight: 850; font-stretch: 112%; text-transform: uppercase; font-size: var(--fs, 7cqw); line-height: 1; letter-spacing: -.02em; pointer-events: none; }
.rea__title--n { color: var(--bleu-nuit); }
.rea__title--w { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }

/* Repères discrets */
.rea__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 6px; }
.rea__n { font: 500 .78rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; color: rgba(255, 255, 255, .55); }
.rea__cat { font: 500 .74rem/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--cy); }
.rea__name { margin: 4px 0 8px; font-size: .95rem; line-height: 1.3; color: rgba(255, 255, 255, .78); max-width: 20ch; }
.rea__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: .92rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); transition: color .35s ease, border-color .35s ease; }
.rea__link svg { transition: transform .4s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.rea__link:hover, .rea__link:focus-visible { color: var(--bleu, #229ad6); border-color: var(--bleu, #229ad6); }
.rea__link:hover svg { transform: translateX(4px); }
.rea__link:focus-visible { outline: 3px solid var(--cy); outline-offset: 4px; }
.rea__item:has(.rea__panel:hover) .rea__link { color: var(--bleu, #229ad6); border-color: var(--bleu, #229ad6); }
@media (hover: hover) { .rea__panel:hover .rea__img img { transform: scale(1.035); } }

.rea__end { margin-top: clamp(48px, 6vw, 96px); text-align: center; }

/* Chevauchement léger, ordinateur seulement (jamais sur le titre ni sur le produit) */
@media (min-width: 1000px) { .rea__item + .rea__item { margin-top: -2vw; } }

/* Mobile : panneaux empilés, pleine largeur, sans chevauchement */
@media (max-width: 999px) {
  .rea__list { gap: 40px; }
  .rea__item, .rea__item--r { grid-template-columns: 1fr; row-gap: 14px; }
  .rea__item--r .rea__panel, .rea__item--r .rea__meta { grid-column: 1; text-align: left; align-items: flex-start; }
  .rea__item--r .rea__panel { grid-row: 1; } .rea__item--r .rea__meta { grid-row: 2; }
  .rea__panel { border-radius: 10px; }
  .rea__title { font-size: calc(var(--fs, 7cqw) * 1.12); max-width: 94cqw; }
  .rea__band { height: 17cqw; }
  .rea__meta { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: baseline; }
  .rea__name { grid-column: 1 / -1; margin: 4px 0 2px; max-width: none; }
  .rea__link { grid-column: 1 / -1; justify-self: start; }
}

/* Arrivée : légère montée, fondu, révélation progressive du titre */
.js .rea__item { opacity: 0; transform: translate3d(0, 44px, 0); transition: opacity .9s ease, transform 1.1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)); }
.js .rea__item.is-in { opacity: 1; transform: none; }
.js .rea__title { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65, 0, .25, 1) .45s; }
.js .rea__item.is-in .rea__title { clip-path: inset(-10% -2% -10% 0); }

/* Visionneuse */
.rea__dlg { width: min(94vw, 1500px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: #07111c; color: #fff; overflow: visible; }
.rea__dlg::backdrop { background: rgba(3, 8, 14, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rea__fig { margin: 0; }
.rea__fig img { display: block; width: 100%; height: auto; max-height: calc(94vh - 56px); object-fit: contain; border-radius: 14px 14px 0 0; background: #111a26; }
.rea__fig figcaption { padding: 14px 18px; font: 500 .8rem/1.3 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--cy); }
.rea__x { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%; color: #fff; cursor: pointer; background: rgba(7, 17, 28, .6); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rea__x:hover { border-color: var(--cy); }
.rea__x:focus-visible { outline: 3px solid var(--cy); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .js .rea__item, .js .rea__item.is-in { opacity: 1; transform: none; transition: none; }
  .js .rea__title { clip-path: none; transition: none; }
  .rea__img img { transition: none; }
  .rea__panel:hover .rea__img img { transform: none; }
  .rea__link, .rea__link svg { transition: color .01s, border-color .01s; }
}

/* ---------- v54 — « Quelques réalisations » : trois photos seules, section compacte ---------- */
.rea--compact { padding-block: clamp(48px, 6vw, 88px); }
.rea--compact .rea__intro { max-width: none; margin-bottom: clamp(22px, 3vw, 40px); }
.rea--compact .rea__h { max-width: none; font-size: clamp(2.5rem, 3.6vw, 3.5rem); line-height: 1.02; }
.rea__grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.rea__card { min-width: 0; }
.rea__card .rea__panel { aspect-ratio: 3 / 2; container-type: normal; border-radius: 14px; background: #0b1f3a; box-shadow: 0 0 0 1px rgba(143, 208, 242, .18), 0 24px 50px -24px rgba(0, 0, 0, .6); }
.rea__card .rea__panel picture { position: absolute; inset: 0; display: block; }
.rea__card .rea__panel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.rea--compact .rea__end { margin-top: clamp(24px, 3vw, 40px); }
@media (hover: hover) { .rea__card .rea__panel:hover img { transform: scale(1.035); } }
@media (max-width: 760px) {
  .rea--compact { padding-block: 44px; }
  .rea--compact .rea__h { font-size: clamp(1.75rem, 7.8vw, 2.125rem); }
  .rea__grid { grid-template-columns: 1fr; gap: 12px; }
  .rea__card .rea__panel { aspect-ratio: 3 / 2; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .rea__card .rea__panel img { transition: none; } .rea__card .rea__panel:hover img { transform: none; } }