/* À propos — « Une usine. Cinq savoir-faire. » : éventail de cartes photographiques.
   Chargé uniquement sur la page À propos. Sans dépendance. */
@property --gx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }

.chap--dark.fan {
  --fe: cubic-bezier(.2, .8, .2, 1);
  --W: clamp(250px, 26.5vw, 392px);
  --cy: #8fd0f2;
  position: relative; isolation: isolate; overflow-x: clip;
  background: #07111c; color: #fff;
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
}
.fan__glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --gx: 50%;
  background:
    radial-gradient(ellipse 42% 46% at var(--gx) 56%, rgba(34, 154, 214, .30), transparent 72%),
    radial-gradient(ellipse 70% 30% at 50% 100%, rgba(34, 154, 214, .10), transparent 80%);
  transition: --gx .95s var(--fe);
}

/* En-tête : titre réduit + introduction */
.fan__kicker { display: block; margin-bottom: 14px; color: var(--cy); }
.fan__title { margin: 0; max-width: 15ch; font-weight: 850; font-stretch: 122%; font-size: clamp(1.9rem, 3.5vw, 3.3rem); line-height: .96; letter-spacing: -.03em; }
.fan__lead { margin: 0; max-width: 36rem; color: rgba(255, 255, 255, .82); }

/* Scène en profondeur */
.fan__stage {
  position: relative; margin-top: clamp(28px, 4vw, 52px);
  height: calc(var(--W) * 1.25 + 64px);
  perspective: 1700px; perspective-origin: 50% 42%;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.fan__cards { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }

.fan__card {
  --tx: 0%; --ty: 0px; --tz: 0px; --ry: 0deg; --sc: 1;
  position: absolute; left: 50%; top: 28px; width: var(--W); aspect-ratio: 4 / 5; margin-left: calc(var(--W) / -2);
  transform: translate3d(var(--tx), var(--ty), var(--tz)) rotateY(var(--ry)) scale(var(--sc));
  transition: transform .75s var(--fe), opacity .6s ease, filter .6s ease;
}
.fan__card[data-pos="0"]  { --tz: 0px;     --ry: 0deg;   --sc: 1; z-index: 5; }
.fan__card[data-pos="1"]  { --tx: 80%;  --tz: -150px; --ry: -27deg; --sc: .82; z-index: 4; filter: brightness(.74) saturate(.92); }
.fan__card[data-pos="-1"] { --tx: -80%; --tz: -150px; --ry: 27deg;  --sc: .82; z-index: 4; filter: brightness(.74) saturate(.92); }
.fan__card[data-pos="2"]  { --tx: 152%; --tz: -320px; --ry: -35deg; --sc: .7; z-index: 3; filter: brightness(.55) saturate(.85); }
.fan__card[data-pos="-2"] { --tx: -152%; --tz: -320px; --ry: 35deg; --sc: .7; z-index: 3; filter: brightness(.55) saturate(.85); }
.fan__card:not([data-pos="0"]):hover { filter: brightness(1) saturate(1); }

/* Une carte qui change de côté : elle réapparaît en fondu, sans traverser la scène */
.fan__card.is-jump { transition: none !important; opacity: 0; }

/* Carte */
.fan__tilt {
  position: absolute; inset: 0; overflow: hidden; border-radius: 20px;
  background: #0b1a29; border: 1px solid rgba(143, 208, 242, .26);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transition: transform .45s var(--fe), border-color .4s ease, box-shadow .4s ease;
}
.fan__card[data-pos="0"] .fan__tilt {
  border-color: rgba(143, 208, 242, .6);
  box-shadow: 0 0 0 1px rgba(143, 208, 242, .25), 0 0 70px rgba(34, 154, 214, .30), 0 34px 80px rgba(0, 0, 0, .55);
  transform: perspective(1000px) rotateX(var(--px, 0deg)) rotateY(var(--py, 0deg));
  transition: transform .35s ease-out, border-color .4s ease, box-shadow .6s ease;
}
.fan__card:not([data-pos="0"]):hover .fan__tilt {
  transform: translateY(-12px); border-color: var(--cy);
  box-shadow: 0 0 0 1px rgba(143, 208, 242, .55), 0 0 46px rgba(34, 154, 214, .5), 0 30px 70px rgba(0, 0, 0, .55);
}
.fan__media { position: absolute; inset: 0; margin: 0; }
.fan__media picture, .fan__media img { display: block; width: 100%; height: 100%; }
.fan__media img { object-fit: cover; object-position: var(--op, 50% 50%); }

/* Dégradés de lisibilité : titre toujours, description sur la carte centrale */
.fan__tilt::before, .fan__tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: opacity .6s ease; }
.fan__tilt::before { background: linear-gradient(to top, rgba(4, 12, 22, .92) 0%, rgba(4, 12, 22, .55) 26%, rgba(4, 12, 22, 0) 50%); }
.fan__tilt::after  { background: linear-gradient(to top, rgba(4, 12, 22, .96) 0%, rgba(4, 12, 22, .82) 40%, rgba(4, 12, 22, 0) 78%); opacity: 0; }
.fan__card[data-pos="0"] .fan__tilt::after { opacity: 1; }

.fan__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 22px; }
.fan__num { font: 600 .78rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .12em; color: var(--cy); }
.fan__name { margin: 0; font-weight: 800; font-stretch: 112%; font-size: 1.28rem; line-height: 1.08; letter-spacing: -.015em; color: #fff; }
.fan__card:not([data-pos="0"]) .fan__name { max-width: 78%; }
.fan__card[data-pos="1"] .fan__info, .fan__card[data-pos="2"] .fan__info { align-items: flex-end; text-align: right; }
.fan__desc { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .2s ease; }
.fan__desc > div { min-height: 0; overflow: hidden; }
.fan__desc p { margin: 8px 0 0; font-size: .95rem; line-height: 1.45; color: rgba(255, 255, 255, .9); }
.fan__card[data-pos="0"] .fan__desc { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--fe) .38s, opacity .5s ease .42s; }
.fan__more { display: inline-flex; gap: 6px; margin-top: 12px; padding: 2px 0; font-weight: 600; font-size: .9rem; color: var(--cy); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fan__more:hover { color: #fff; }
.fan__more:focus-visible, .fan__btn:focus-visible, .fan__tab:focus-visible { outline: 3px solid var(--cy); outline-offset: 3px; border-radius: 8px; }
.fan__ill { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 5px 10px; border-radius: 999px; font: 600 .68rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(7, 17, 28, .6); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Reflet discret qui suit le pointeur sur la carte centrale */
.fan__sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s ease; background: radial-gradient(circle at var(--sx, 50%) var(--sy, 25%), rgba(255, 255, 255, .17), rgba(255, 255, 255, 0) 46%); }
.fan__card[data-pos="0"] .fan__tilt.is-hover .fan__sheen { opacity: 1; }

.fan__pick { position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fan__pick[hidden] { display: none; }

/* Commandes */
.fan__ui { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(8px, 1.5vw, 20px); }
.fan__nav { display: flex; align-items: center; gap: 16px; }
.fan__btn {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: background .3s ease, border-color .3s ease, transform .3s var(--fe), box-shadow .3s ease;
}
.fan__btn:hover { border-color: var(--cy); background: rgba(34, 154, 214, .2); box-shadow: 0 0 26px rgba(34, 154, 214, .35); }
.fan__btn:active { transform: scale(.94); }
.fan__count { margin: 0; min-width: 5.2em; text-align: center; font: 500 1rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .08em; color: rgba(255, 255, 255, .62); }
.fan__count b { font-weight: 600; color: #fff; }
.fan__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fan__tab {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  font: 600 .86rem/1 inherit; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .16);
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.fan__tab b { font: 600 .72rem/1 var(--mono, ui-monospace, monospace); letter-spacing: .1em; color: var(--cy); }
.fan__tab:hover { color: #fff; border-color: rgba(143, 208, 242, .6); }
.fan__tab[aria-current="true"] { color: #fff; background: rgba(34, 154, 214, .22); border-color: var(--cy); }

.fan__foot { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid rgba(255, 255, 255, .12); }
.fan__foot .chap__addr { margin-bottom: 20px; }
.fan__foot p { margin: 0; }

/* Arrivée : cartes empilées, qui apparaissent l'une après l'autre, puis se déploient */
.js .fan:not(.is-fan) .fan__card { --tx: 0%; --ry: 0deg; --sc: .9; --tz: -90px; --ty: 44px; opacity: 0; filter: none; }
.js .fan:not(.is-fan) .fan__card[data-pos="0"] { --tz: -40px; }
.js .fan.is-in:not(.is-fan) .fan__card { --ty: 0px; opacity: 1; }
.js .fan:not(.is-ready) .fan__card { transition-delay: calc(var(--i) * 70ms); }
.js .fan:not(.is-fan) .fan__tilt::after { opacity: 0; }

/* Sans JavaScript : liste lisible, sans 3D */
html:not(.js) .fan__stage { height: auto; perspective: none; }
html:not(.js) .fan__cards { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; padding-inline: var(--gut, 20px); transform-style: flat; }
html:not(.js) .fan__card { position: relative; left: auto; top: auto; margin: 0; width: auto; transform: none !important; filter: none !important; }
html:not(.js) .fan__desc { grid-template-rows: 1fr; opacity: 1; }
html:not(.js) .fan__tilt::after { opacity: 1; }
html:not(.js) .fan__ui, html:not(.js) .fan__pick { display: none; }

/* Tablette et mobile : une grande carte centrale, voisines en aperçu, peu de perspective */
@media (max-width: 899px) {
  .chap--dark.fan { --W: min(72vw, 330px); }
  .fan__stage { perspective: 1400px; height: calc(var(--W) * 1.25 + 56px); }
  .fan__card[data-pos="0"]  { --sc: 1; }
  .fan__card[data-pos="1"]  { --tx: 90%; --tz: -70px; --ry: -9deg; --sc: .84; filter: brightness(.7); }
  .fan__card[data-pos="-1"] { --tx: -90%; --tz: -70px; --ry: 9deg; --sc: .84; filter: brightness(.7); }
  .fan__card[data-pos="2"], .fan__card[data-pos="-2"] { --tx: 0%; --tz: -200px; --ry: 0deg; --sc: .7; opacity: 0; pointer-events: none; }
  .fan__card:not([data-pos="0"]) .fan__name { max-width: 78%; }
.fan__card[data-pos="1"] .fan__info, .fan__card[data-pos="2"] .fan__info { align-items: flex-start; text-align: left; }
  .fan__name { font-size: 1.2rem; }
  .fan__ui { justify-content: center; }
  .fan__btn { width: 56px; height: 56px; }
  .fan__tabs { justify-content: center; gap: 4px; }
  .fan__tab { width: 44px; justify-content: center; padding: 0; }
  .fan__tab span { display: none; }
  .fan__tab b { font-size: .78rem; }
  .fan__foot { text-align: left; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .fan__tab span { display: none; }
  .fan__tab { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .fan__card, .fan__card.is-jump { transition: opacity .25s ease; }
  .fan__tilt, .fan__card[data-pos="0"] .fan__tilt { transition: border-color .2s ease; }
  .fan__card:not([data-pos="0"]):hover .fan__tilt { transform: none; }
  .fan__glow, .fan__desc, .fan__card[data-pos="0"] .fan__desc, .fan__tilt::before, .fan__tilt::after { transition: none; }
  .js .fan:not(.is-ready) .fan__card { transition-delay: 0s; }
  .fan__btn { transition: none; }
}

.fan__card[data-pos="1"] .fan__ill, .fan__card[data-pos="2"] .fan__ill { left: auto; right: 14px; }
html:not(.js) .fan__card .fan__info { align-items: flex-start !important; text-align: left !important; }
html:not(.js) .fan__card:not([data-pos="0"]) .fan__name { max-width: none; }

/* v91 : mise en avant douce de la carte sous le pointeur */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
.fan.is-fan .fan__card[data-pos="0"]{--sc:1.045;--tz:35px}
.fan.is-fan .fan__card[data-pos="0"] .fan__tilt.is-hover{scale:1.025}
.fan__tilt{transition:transform .55s var(--fe),scale .55s var(--fe),box-shadow .55s ease}
.fan__card[data-pos="0"] .fan__tilt img{scale:1.025;transition:scale 1s var(--fe)}
.fan__card[data-pos="0"] .fan__tilt.is-hover img{scale:1.075}
.fan__tilt img{transition:scale 1s var(--fe)}
.fan__card[data-pos="0"] .fan__tilt.is-hover{box-shadow:0 25px 65px -25px #229ad660,0 0 0 1px #90d6f588}
}

/* Navigation directe au glissement */
.fan__stage, .fan__pick{cursor:grab}
.fan__stage.is-dragging, .fan__stage.is-dragging *{cursor:grabbing!important}
.fan__card{translate:var(--drag-x,0px) 0;transition:translate .45s var(--fe),transform .75s var(--fe),opacity .6s ease,filter .6s ease}
.is-dragging .fan__card{transition:none}
.fan__gesture{font-size:.85rem;color:#b6d3e4;margin-right:18px}
.fan__media img{-webkit-user-drag:none}
@media(prefers-reduced-motion:reduce){.fan__card{transition:none}}

.fan__card:not([data-pos="0"]), .fan__card:not([data-pos="0"]) .fan__pick{cursor:pointer}
.fan__card:not([data-pos="0"]):hover .fan__tilt{border-color:#bdeaff;box-shadow:0 0 0 2px #8fd0f280,0 18px 55px #229ad640}

/* Conserver les surfaces latérales cliquables dans la scène en perspective. */
.fan__card{transform-style:preserve-3d}
.fan__tilt{backface-visibility:hidden}
.fan__card .fan__pick{pointer-events:auto;touch-action:pan-y}

/* Sélection simple : la carte choisie vient devant et reste consultable. */
.fan__stage{cursor:default;touch-action:auto}
.fan__card:not([data-pos="0"]), .fan__card:not([data-pos="0"]) *{cursor:pointer}
.fan__card[data-pos="0"] .fan__tilt{cursor:default}
.fan__card[data-pos="0"] a{cursor:pointer}