/* ---------------------------------------------------------------------------
   Nuage Rose · etudes.css · le mur incurvé des études de cas.
   Structure reprise de inspiring.nk.studio : deux rangées de cartes HTML posées
   sur un arc, qui défilent à l'infini, flottent, se tirent à la souris ou au
   doigt, et s'ouvrent sur le détail en floutant les autres.
   La géométrie est calculée à chaque image dans etudes.js ; ici, seulement
   l'habillage des cartes. Contenu d'attente pour l'instant.
   --------------------------------------------------------------------------- */
.etudes { position: relative; min-height: 112vh; min-height: 112svh; overflow: clip; padding: 0; }
/* Leur fond : radial-gradient(#0BA3A8 0 %, #0D6359 30 %, #03352D 60 %, #021B1D 100 %),
   une lueur qui monte du bas et un haut plus sombre. Même construction, en framboise.
   🚨 Fondu en haut et en bas : la section est sombre, ses voisines montrent les
   nuages ; sans ce masque, on retrouverait les barres de séparation. */
.etudes::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 82%, rgba(192,96,127,.46) 0%, rgba(107,58,76,.34) 38%, rgba(46,37,48,0) 72%),
    radial-gradient(ellipse at 50% 58%, #6B3A4C 0%, #3A2B35 34%, #262329 64%, #1C1C20 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); }
/* leurs deux bandes latérales : flou d'arrière-plan teinté, qui estompe les cartes du bord */
.ec-bord { position: absolute; top: 0; bottom: 0; z-index: 4; width: clamp(6rem, 24vw, 32rem); pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ec-bord.g { left: 0; background: linear-gradient(90deg, rgba(58,43,53,.4) 0%, rgba(58,43,53,.15) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.35) 65%, transparent 100%), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.35) 65%, transparent 100%), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.ec-bord.d { right: 0; background: linear-gradient(270deg, rgba(58,43,53,.4) 0%, rgba(58,43,53,.15) 45%, transparent 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.35) 65%, transparent 100%), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(270deg, #000 0%, rgba(0,0,0,.75) 35%, rgba(0,0,0,.35) 65%, transparent 100%), linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent); }
.etudes-tete { position: relative; z-index: 3; padding: clamp(90px, 12vh, 140px) var(--gut) 0; pointer-events: none; }
.etudes-tete p { margin-top: 12px; color: var(--txt-3); font-size: 15px; }

.ec-scene { position: absolute; inset: 0; z-index: 1; perspective: 1100px; perspective-origin: 50% 50%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ec-scene.is-drag { cursor: grabbing; }
.ec-plan { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; }

.ec-carte { position: absolute; left: 0; top: 0; width: var(--ec-w, 220px); height: var(--ec-h, 287px);
  margin: calc(var(--ec-h, 287px) / -2) 0 0 calc(var(--ec-w, 220px) / -2);
  will-change: transform, opacity, filter; backface-visibility: hidden;
  transition: filter .5s ease-out; }
.ec-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 5px;
  border-radius: 10px; overflow: hidden; cursor: pointer;
  background: rgba(38,31,36,.94);
  box-shadow: 0 0 0 1px rgba(92,70,82,.5) inset;
  transition: box-shadow .4s ease-out, transform .4s var(--ease); }
.ec-carte:hover .ec-in, .ec-carte:focus-visible .ec-in { box-shadow: 0 0 0 1px rgba(212,154,166,.42) inset; }
/* la lueur intérieure qui suit la souris, comme leur carte survolée */
.ec-in::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  transition: opacity .5s ease-out;
  background: radial-gradient(95% 75% at var(--mx, 30%) var(--my, 85%), rgba(192,96,127,.36), rgba(107,58,76,.12) 45%, transparent 72%); }
.ec-carte:hover .ec-in::before { opacity: 1; }
.ec-in > * { position: relative; z-index: 1; }
.ec-img { flex: none; aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; background: var(--deep); }
.ec-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05);
  transition: filter .5s ease-out, transform .8s var(--ease); }
.ec-carte:hover .ec-img img { filter: grayscale(0); transform: scale(1.04); }
.ec-titre { flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 8px 0; font-family: var(--font);
  font-weight: 700; font-size: clamp(17px, calc(var(--ec-w, 220px) * .105), 24px); line-height: 1.12;
  letter-spacing: -.01em; color: var(--txt); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ec-carte.sans-img .ec-titre { -webkit-line-clamp: 5; }
.ec-carte.sans-img .ec-titre { padding-top: 14px; }
.ec-pied { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 8px 10px; }
.ec-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px/1 'Helvetica Neue', Arial, sans-serif; color: var(--bg); background: var(--pop-grad, var(--pop)); }
.ec-qui { display: flex; flex-direction: column; min-width: 0; font-family: 'Helvetica Neue', Arial, sans-serif; }
.ec-qui b { font-size: 13px; font-weight: 600; color: var(--txt-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-qui i { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }

/* ouverture d'une étude : les autres cartes passent derrière un flou */
.ec-scene.is-open .ec-carte:not(.is-sel) { filter: blur(5px) brightness(.6); }
.ec-detail { position: absolute; z-index: 5; left: 50%; top: 54%; width: min(560px, calc(100vw - 40px));
  max-height: 78vh; overflow: auto; padding: 30px 30px 26px; border-radius: 16px;
  background: rgba(38,31,36,.95); backdrop-filter: blur(14px);
  box-shadow: 0 0 0 1px rgba(92,70,82,.6) inset, 0 50px 100px -30px rgba(0,0,0,.7);
  transform: translate(-50%, -46%) scale(.96); opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s linear .45s; }
.ec-scene.is-open ~ .ec-detail { opacity: 1; visibility: visible; transform: translate(-50%, -50%);
  transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s; }
.ec-detail .ec-img { aspect-ratio: 16 / 9; margin-bottom: 20px; }
.ec-detail .ec-img img { filter: none; }
.ec-detail h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -.012em; }
.ec-detail p { margin-top: 14px; color: var(--txt-2); font-size: 16px; line-height: 1.6; }
.ec-detail .ec-pied { padding: 20px 0 0; }
.ec-fermer { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(245,241,234,.1); color: var(--txt); font-size: 20px; line-height: 1; cursor: pointer; }
.ec-fermer:hover { background: rgba(245,241,234,.2); }

.ec-indice { position: absolute; z-index: 3; left: 50%; bottom: clamp(24px, 5vh, 50px); transform: translateX(-50%);
  font: 600 12px/1 'Helvetica Neue', Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--txt-3); pointer-events: none; transition: opacity .6s; }
.ec-indice.is-off { opacity: 0; }

@media (max-width: 767px) {
  .ec-plan { top: 58%; }
  .etudes-tete { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ec-carte, .ec-in, .ec-img img { transition: none; } }