/* Use cases au gabarit Handoff (PRODUIT, 10/11/2026 ; LEAD 17:5x). Feuille commune à /use-cases-v4/ et à ses cas.
   Le gabarit est celui de /handoff-v4/, lu par ses propres feuilles (page.css, prototype-2213.css, refonte-1110.css) et par les
   composants de l'atelier (boucle, outils, étapes), sans les modifier. Cette feuille ne porte que ce que ces feuilles ne donnent pas :
   ① le héros (chez Handoff, hero-0114.css le tient sous #handoff : ses valeurs sont reprises ici sous .uc4-hero, à l'identique) ;
   ② les points courts des blocs (Handoff écrit un paragraphe) ;
   ③ la grille des cas de l'accueil.
   Système V4 seulement : --blue, --ink, --muted, --paper (page.css) et --hr-* (refonte-1110.css). */

/* ① Héros : centré, une colonne, comme #handoff. */
.uc4 .opening{position:relative;background:var(--paper)}
.uc4 .uc4-hero{padding:56px 0 72px}
.uc4 .uc4-hero-copy{text-align:center;max-width:940px;margin:0 auto}
.uc4 .uc4-hero .tool-label{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;font:600 20px/1.3 DM,Arial,sans-serif;color:var(--blue);margin:0 0 18px}
.uc4 .uc4-hero .tool-label svg{width:24px;height:24px;flex:0 0 auto}
.uc4 .uc4-hero .tool-label a{color:var(--blue);text-underline-offset:4px}
.uc4 .uc4-hero .tool-label span[aria-hidden]{color:var(--muted)}
.uc4 .uc4-hero .hero-title{font:700 64px/1.1 Jakarta,Arial,sans-serif;letter-spacing:-.05em;max-width:20ch;color:var(--blue);margin:0 auto 22px;text-wrap:balance}
.uc4 .uc4-hero .lede{font-size:18px;line-height:1.55;max-width:62ch;margin:0 auto 28px;color:var(--ink)}
.uc4 .uc4-hero .hero-action{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px}
.uc4 .uc4-hero .hero-action .button{transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 22px -16px #4458acee}
.uc4 .uc4-hero .hero-action .button:hover{background:var(--hr-blue-d);transform:translateY(-2px)}
.uc4 .uc4-hero .hero-action .quiet{gap:10px;font-size:16px}
.uc4-hub .uc4-hero{padding-bottom:40px}

/* ② Les points courts d'un bloc : la typographie des paragraphes de Handoff, une pastille au lieu d'un retrait. */
.uc4 .hf-why .uc4-points{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:40ch}
.uc4 .hf-why .uc4-points li{position:relative;padding-left:28px;font:400 19px/1.55 DM,Arial,sans-serif;color:var(--hr-muted)}
.uc4 .hf-why .uc4-points li:before{content:'';position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--hr-lime);box-shadow:0 0 0 2px var(--hr-blue)}
.uc4 .hf-block-tag b{font-weight:600}
.uc4 .hf-questions h2 span{display:block;color:var(--muted)}

/* ③ L'accueil : les cas en cartes, trois colonnes, puis deux, puis une. */
.uc4 .uc4-cases{padding:72px 0 112px;background:linear-gradient(180deg,#F0F2FC 0%,#F5F6FE 46%,#FCFCFF 100%)}
.uc4 .uc4-cases .hf-why-head{margin-bottom:56px}
.uc4 .uc4-cases h2{margin:0}
.uc4 .uc4-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.uc4 .uc4-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:16px;height:100%;padding:24px 22px 24px 24px;border-radius:20px;background:#fff;border:1px solid #d7def1;box-shadow:0 18px 48px -36px #26315366;color:var(--ink);text-decoration:none;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
.uc4 .uc4-card--sans-icone{grid-template-columns:minmax(0,1fr) auto}
.uc4 .uc4-card:hover{transform:translateY(-4px);border-color:#b9c4ec;box-shadow:0 28px 60px -36px #4458acb3}
.uc4 .uc4-card:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.uc4 .uc4-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--hr-lav);color:var(--blue)}
.uc4 .uc4-card-icon svg{width:22px;height:22px}
.uc4 .uc4-card-copy{display:grid;gap:6px;min-width:0}
.uc4 .uc4-card-copy strong{font:700 20px/1.25 Jakarta,Arial,sans-serif;letter-spacing:-.02em;color:var(--blue)}
.uc4 .uc4-card-copy span{font:400 16px/1.5 DM,Arial,sans-serif;color:var(--hr-muted)}
.uc4 .uc4-card-open{color:var(--blue);font-size:20px;line-height:1.25;transition:transform .2s ease}
.uc4 .uc4-card:hover .uc4-card-open{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .uc4 .uc4-card,.uc4 .uc4-card-open,.uc4 .uc4-hero .hero-action .button{transition:none}
  .uc4 .uc4-card:hover,.uc4 .uc4-card:hover .uc4-card-open,.uc4 .uc4-hero .hero-action .button:hover{transform:none}
}
@media (max-width:1100px){.uc4 .uc4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px) and (min-width:761px){.uc4 .uc4-hero .hero-title{font-size:54px}.uc4 .uc4-hero .lede{font-size:17px}}
@media (max-width:900px){.uc4 .hf-why .uc4-points li{font-size:17px}}
@media (max-width:760px){
  .uc4 .uc4-hero{padding:32px 0 48px}
  .uc4 .uc4-hero .tool-label{font-size:17px;gap:8px;margin-bottom:14px}
  .uc4 .uc4-hero .tool-label svg{width:21px;height:21px}
  .uc4 .uc4-hero .hero-title{font-size:38px;line-height:1.13;max-width:18ch;margin-bottom:18px}
  .uc4 .uc4-hero .lede{font-size:15px;max-width:36ch;margin-bottom:22px}
  .uc4 .uc4-hero .hero-action{flex-direction:column;gap:14px}
  .uc4 .uc4-hero .hero-action .button{font-size:15px;min-height:50px}
  .uc4 .uc4-cases{padding:48px 0 72px}
  .uc4 .uc4-cases .hf-why-head{margin-bottom:32px}
  .uc4 .uc4-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .uc4 .uc4-card{padding:18px 16px 18px 18px;gap:14px;border-radius:16px}
  .uc4 .uc4-card-icon{width:40px;height:40px}
  .uc4 .uc4-card-copy strong{font-size:18px}
  .uc4 .uc4-card-copy span{font-size:15px}
}

/* ④ Carte d'interface STATIQUE d'un bloc (train 2) : la liste des outils d'Uncook, l'outil du bloc choisi et sa ligne du menu.
   Pour un bloc sans variante animée qui dise vrai ; jamais un résultat. Elle prend la scène pâle du bloc (refonte-1110.css). */
.uc4 .uc4-carte{margin:0 auto;max-width:460px;background:#fff;border-radius:20px;box-shadow:0 24px 60px -36px #26315399,0 0 0 1px #4458ac1a;overflow:hidden}
.uc4 .uc4-carte-bar{display:flex;align-items:center;gap:10px;margin:0;padding:14px 20px;border-bottom:1px solid #e3e8f8;font:600 15px/1.2 DM,Arial,sans-serif;color:var(--blue)}
.uc4 .uc4-carte-bar img{display:block;width:22px;height:22px;border-radius:6px}
.uc4 .uc4-carte ul{list-style:none;margin:0;padding:10px}
.uc4 .uc4-carte li{display:grid;gap:4px;padding:11px 14px;border-radius:12px;font:600 16px/1.3 DM,Arial,sans-serif;color:var(--ink)}
.uc4 .uc4-carte li+li{margin-top:2px}
.uc4 .uc4-carte li.is-on{background:var(--hr-lav);box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue)}
.uc4 .uc4-carte li small{font:400 14px/1.45 DM,Arial,sans-serif;color:var(--hr-muted)}
@media (max-width:760px){.uc4 .uc4-carte li{padding:9px 12px;font-size:15px}.uc4 .uc4-carte li small{font-size:13px}}
/* ⑩ la vraie photo du cas, sous le texte du héros (LEAD 20:0x) : celle que la page servait avant le gabarit. */
.uc4 .uc4-hero-photo{margin:44px auto 0;max-width:760px;aspect-ratio:16/9;border-radius:28px;overflow:hidden;background:var(--paper)}
.uc4 .uc4-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media (max-width:760px){.uc4 .uc4-hero-photo{margin-top:30px;border-radius:20px;aspect-ratio:4/3}}