/* Feuille de style partagée par les études de cas et leur page d'archive.
   Reprend les tokens de la page d'accueil. */

:root{
  --white:#FFFFFF; --surface:#F4F7FA; --line:#DDE5ED;
  --ink:#0D2137; --ink-soft:#5A6E82;
  --signal:#00A6D6; --signal-d:#007FA8; --signal-l:#5FD3F2;
  --display:"Archivo","Helvetica Neue",system-ui,sans-serif;
  --sans:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pill:100px; --r:20px; --r-lg:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;padding:0 24px 90px;
}
.wrap{max-width:780px;margin-inline:auto}
img{max-width:100%;display:block}

header.top{padding:26px 0 0}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink-soft);font-size:.92rem;transition:color .2s}
.back:hover{color:var(--signal-d)}

.flag{
  display:inline-flex;align-items:center;gap:9px;background:var(--signal);color:#fff;
  font-size:.8rem;font-weight:600;padding:7px 17px;border-radius:var(--pill);
  box-shadow:0 8px 26px -6px rgba(0,166,214,.55);margin:34px 0 18px;
}
h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.032em;line-height:1.05;
  font-size:clamp(2rem,4.8vw,3rem);margin-bottom:16px;
  text-shadow:0 0 60px rgba(95,211,242,.45);
}
.chapo{font-size:clamp(1.05rem,1.5vw,1.18rem);color:var(--ink-soft);margin-bottom:30px}

h2{
  font-family:var(--display);font-weight:800;letter-spacing:-.022em;
  font-size:clamp(1.3rem,2.4vw,1.6rem);margin:44px 0 14px;
  padding-top:26px;border-top:1px solid var(--line);
}
h3{font-family:var(--display);font-weight:700;font-size:1.06rem;margin:24px 0 8px}
p{margin-bottom:14px;color:var(--ink-soft)}
strong{color:var(--ink);font-weight:600}
ul{margin:0 0 16px 22px;color:var(--ink-soft)}
li{margin-bottom:8px}
a{color:var(--signal-d)}

/* Fiche client */
.meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin:26px 0 8px;
}
.meta div{background:var(--surface);padding:16px 18px}
.meta dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--signal-d);font-weight:600;margin-bottom:4px}
.meta dd{color:var(--ink);font-weight:600;font-size:.97rem}

/* Lecteur vidéo, chargé au clic seulement */
.player{
  position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);margin:26px 0;cursor:pointer;
}
.player img{width:100%;height:100%;object-fit:cover}
.player iframe{width:100%;height:100%;border:0;display:block}
.player .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(13,33,55,.24);transition:background .25s;
}
.player:hover .play{background:rgba(13,33,55,.36)}
.player .play span{
  width:74px;height:74px;border-radius:50%;background:var(--signal);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 40px -6px rgba(0,166,214,.7);transition:transform .25s;
}
.player:hover .play span{transform:scale(1.08)}
.player .play svg{width:26px;height:26px;fill:#fff;margin-left:4px}

/* Bloc à compléter, à retirer une fois le contenu écrit */
.wip{
  background:#FFF6E8;border:1px solid #F0C88A;border-radius:16px;
  padding:18px 22px;margin:22px 0;color:#7A4E12;font-size:.95rem;
}
.wip strong{color:#5C3A0B}
.wip p{color:#7A4E12}
.wip p:last-child{margin-bottom:0}

/* Rappel vers les tarifs */
.cta{
  margin-top:52px;padding:32px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#F2FAFE 0%,#FFFFFF 100%);
  border:1px solid var(--line);text-align:center;
}
.cta h2{border:0;padding:0;margin:0 0 10px}
.cta a{
  display:inline-block;margin-top:14px;background:var(--signal);color:#fff;
  text-decoration:none;font-weight:600;padding:13px 28px;border-radius:var(--pill);
  box-shadow:0 8px 30px -6px rgba(0,166,214,.4);transition:background .2s,transform .2s;
}
.cta a:hover{background:var(--signal-d);transform:translateY(-2px)}

footer{
  margin-top:60px;padding-top:26px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--ink-soft);
}
footer a{margin-right:18px}

/* Page d'archive */
.cards{display:grid;gap:18px;margin-top:30px}
.card{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.card:hover{transform:translateY(-3px);border-color:var(--signal);
  box-shadow:0 14px 40px -12px rgba(0,166,214,.35)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card .in{padding:20px 22px}
.card .kw{font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal-d);display:block;margin-bottom:8px}
.card h2{font-size:1.18rem;margin:0 0 6px;border:0;padding:0}
.card p{font-size:.95rem;margin:0}

/* ---------- LECTEUR PLEIN ÉCRAN ----------
   Même comportement que sur la page d'accueil : le cadre de l'article fait
   780 px, la vidéo mérite tout l'écran. La largeur est bornée par la hauteur
   disponible pour qu'un écran bas ne rogne jamais l'image. */
.lb{position:fixed;inset:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(13,33,55,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb-in{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(14px,4vw,64px)}
.lb-box{width:min(100%,1280px,calc((100dvh - 150px) * 16 / 9))}
.lb-frame{position:relative;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;
  box-shadow:0 40px 100px -24px rgba(0,0,0,.75)}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.lb-title{margin:16px 0 0;text-align:center;color:#fff;font-family:var(--sans);font-size:.92rem;opacity:.78}
.lb-close{position:absolute;top:clamp(10px,2.4vw,26px);right:clamp(10px,2.4vw,26px);z-index:2;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(13,33,55,.55);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .25s,transform .25s}
.lb-close:hover{background:var(--signal-d);transform:scale(1.06)}
.lb-close:focus-visible{outline:2px solid var(--signal-l);outline-offset:3px}
@media (max-width:640px){ .lb-title{font-size:.84rem} }