@charset "utf-8";
/* ─── Panneau de droite (écrans 1 et 4 à 7) : éditorial, plein hauteur, sans défilement ───
   Deux rangées : milieu (le cas client plein cadre,
   un seul slide visible, fondu) · bas (trois chiffres, mur de logos). Le DOM et le minuteur vivent dans app.js
   (panelView / renderConsole) ; ici, uniquement le style. Mobile : l'aside est masqué sous 960 px, rien à faire ici.
   Système : fond --c-bg (#1F1F1F, le seul gris sombre), lignes --c-line, texte secondaire --c-muted ; espacements 8/16/24/32/40 ;
   chiffres lime en 500. Pas de dégradé hors de la photo, pas de glow : la lime n'est qu'un accent. */

.console.panel-mode{display:block;height:100%;padding:0;gap:0;overflow:hidden;font-size:15px}
.panel{--pp:40px;height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:var(--c-bg);color:var(--c-text)}
@media(max-width:1180px){.panel{--pp:32px}}

/* ── Haut : l'eyebrow seul, sa ligne centrée à 48 px comme la barre de gauche (24 px de marge + 48 px de barre) ── */
.panel-top{display:none}

/* ── Milieu : la photo couvre la zone, le texte vit en bas à gauche sur un dégradé du bas vers le haut ── */
.panel-hero{position:relative;min-height:0;overflow:hidden;background:var(--c-bg);touch-action:pan-y pinch-zoom}
.panel-slides{position:absolute;inset:0}
.panel-hero .case{position:absolute;inset:0;margin:0;padding:0;display:block;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s}
.panel-hero .case.on{opacity:1;visibility:visible;z-index:1;transition:opacity .7s ease,visibility 0s}
.panel-hero .case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.panel-hero .case::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,31,31,.95) 0%,rgba(31,31,31,.72) 28%,rgba(31,31,31,0) 55%);pointer-events:none}
.case-copy{position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:var(--pp)}
/* logo client : en haut à gauche du visuel, grand (les SVG sont très margés : 120 px affichent ~80 px de glyphe) */
.panel-hero .case::before{content:'';position:absolute;left:0;right:0;top:0;height:42%;background:linear-gradient(180deg,rgba(31,31,31,.7) 0%,rgba(31,31,31,0) 100%);pointer-events:none}
.case-logo{position:absolute;top:calc(var(--pp) - 16px);left:calc(var(--pp) - 22px);z-index:2;display:flex;align-items:center;height:120px;font-size:28px;font-weight:500;color:var(--c-text)}
.case-logo img{display:block;height:120px;width:auto;max-width:360px;filter:brightness(0) invert(1);opacity:.98}
.case-num{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px;line-height:1}
.case-num b{font-size:clamp(56px,6vw,84px);font-weight:500;letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums}
.case-num span{font-size:18px;color:var(--c-text)}
.case-sub{margin:0;font-size:15px;line-height:1.4;color:rgba(255,255,255,.75)}
.case-say{margin:8px 0 0;display:flex;flex-direction:column;gap:16px}
.case-say blockquote{margin:0;max-width:46ch;font-size:19px;line-height:1.38;font-weight:300;color:var(--c-text)}
.case-who{display:flex;align-items:center;gap:12px;padding-right:150px}
.case-who img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.case-who span{display:flex;flex-direction:column;gap:2px;min-width:0}
.case-who b{font-size:15px;font-weight:500;color:var(--c-text)}
.case-who small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted)}
/* points de navigation : en bas à droite, alignés sur la ligne du visage */
.panel-hero .cases-dots{position:absolute;right:var(--pp);bottom:calc(var(--pp) + 14px);z-index:2;padding:0;gap:6px}
.panel-hero .cases-dots button::before{background:rgba(255,255,255,.28)}
.panel-hero .cases-dots button.on::before{background:var(--lime)}

/* ── Bas : bande sobre, trois chiffres en une ligne, puis le mur de logos en marquee ── */
.panel-foot{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;padding:24px var(--pp);border-top:1px solid var(--c-line);background:var(--c-bg)}
.panel-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;margin:0}
.panel-stats div{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.panel-stats b{font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1;color:var(--c-text);font-variant-numeric:tabular-nums}
.panel-stats span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.panel-wall{height:48px;overflow:hidden;display:flex;align-items:center;contain:inline-size;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.panel-wall-track{display:flex;align-items:center;flex:none;gap:0;animation:panel-marquee 34s linear infinite;will-change:transform}
.panel-wall-track img{display:block;height:48px;width:auto;flex:none;filter:brightness(0) invert(1);opacity:.75}
@keyframes panel-marquee{to{transform:translateX(-50%)}}

/* ── Hauteurs courtes : le mur disparaît, la citation se limite à quatre lignes ── */
@media(max-height:760px){
  .panel-wall{display:none}
  .panel-foot{gap:0;padding-block:16px}
  .case-say blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
  .case-copy{gap:8px}
}

@media(prefers-reduced-motion:reduce){
  .panel-hero .case,.panel-hero .case.on{transition:none}
  .panel-wall-track{animation:none}
}

/* 25/09 : photos de fond de mauvaise qualité (scripts/photos-floues.json) : un léger flou et un voile sombre
   cachent la compression sans retirer l'image. Les photos nettes ne sont pas touchées. */
.case-photo.soft{filter:blur(2.5px) saturate(1.05) brightness(.72);transform:scale(1.06)}

/* 25/09 (Romain : « le logo, on voit rien ») : le logo blanc se perdait sur les photos claires (Orus, Simplébo). Un voile
   sombre en haut de la photo, sous le logo, et les logos écrits en texte en plus grand, avec une ombre. */
.panel-hero .case::before{content:"";position:absolute;inset:0 0 auto 0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,14,.62) 0%,rgba(14,14,14,.28) 55%,rgba(14,14,14,0) 100%)}
.panel-hero .case-logo{font-size:36px;font-weight:600;letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.panel-hero .case-logo img{filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.45))}