/* Étude de cas Jolihuit : couleurs et polices de Joli8, cadre Dréa Digital.
   Tout est scopé à main.cas-jh : l'en-tête et le pied restent ceux de Dréa Digital. */
main.cas-jh{
  --jh-paper:#FCFBFA;
  --jh-ink:#1B1A1F;
  --jh-muted:#4E4A57;
  --jh-violet:#6128FF;
  --jh-mint:#58E8BF;
  --jh-corail:#FF5F45;
  --jh-jaune:#FFC615;
  --jh-rose:#FFC0D4;
  --jh-rouge:#E5173F;
  --jh-lilas:#E4DCFF;
  --jh-serif:"Fraunces",Georgia,serif;
  --jh-sans:"Poppins",system-ui,sans-serif;
  background:var(--jh-paper);color:var(--jh-ink);font-family:var(--jh-sans)
}
main.cas-jh .sec{background:transparent}

/* Teintes de section Joli8 (plus de gris) */
main.cas-jh .jh-tint-paper{background:var(--jh-paper)}
main.cas-jh .jh-tint-rose{background:#FFE6EE}
main.cas-jh .jh-tint-mint{background:#DDF8EE}
main.cas-jh .jh-tint-jaune{background:#FFF3C7}
main.cas-jh .jh-tint-lilas{background:var(--jh-lilas)}

/* Textes : encre et aubergine, jamais blanc ni gris sur fond clair */
main.cas-jh p,main.cas-jh li,main.cas-jh figcaption{color:var(--jh-muted)!important}
main.cas-jh h1,main.cas-jh h2,main.cas-jh h3{font-family:var(--jh-serif);font-weight:400;color:var(--jh-ink)!important;letter-spacing:-.01em;text-shadow:none}
main.cas-jh h2 em,main.cas-jh h1 em{font-style:italic;color:var(--jh-violet)!important}
main.cas-jh .sec__title{font-size:clamp(2.1rem,4.8vw,3.6rem)}
main.cas-jh .chip{background:var(--jh-ink);color:var(--jh-paper);border:0;border-radius:0;font-family:var(--jh-sans);text-transform:none;letter-spacing:.02em;font-size:.86rem;padding:.5rem 1rem}
main.cas-jh .jh-tint-rose .chip{background:var(--jh-violet)}
main.cas-jh .jh-tint-mint .chip{background:var(--jh-corail)}
main.cas-jh .jh-tint-jaune .chip{background:var(--jh-violet)}
main.cas-jh .jh-tint-lilas .chip{background:var(--jh-corail)}

/* Hero : film plein cadre, voile violet Joli8 */
main.cas-jh .jh-hero{min-height:94vh;display:flex;flex-direction:column;justify-content:flex-end;position:relative;isolation:isolate;overflow:hidden}
main.cas-jh .jh-hero__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
main.cas-jh .jh-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(170deg,#6128FF55 0%,#6128FF22 40%,#6128FFCC 100%)}
main.cas-jh .jh-hero h1{color:#FCFBFA!important;font-size:clamp(3.2rem,9.5vw,7rem);text-shadow:0 2px 26px #2a0f6a66}
main.cas-jh .jh-hero h1 em{color:var(--jh-mint)!important}
main.cas-jh .jh-hero .lede{color:#FFFFFF!important;text-shadow:0 1px 18px #2a0f6a88}
main.cas-jh .jh-hero .chip{background:var(--jh-mint);color:var(--jh-ink)}
main.cas-jh .jh-hero .chip:nth-child(2){background:var(--jh-jaune)}
main.cas-jh .jh-hero .chip:nth-child(3){background:var(--jh-rose)}
main.cas-jh .btn{border-radius:0;background:var(--jh-ink);color:var(--jh-paper);border:0;font-family:var(--jh-sans)}
main.cas-jh .hero__act .btn:last-child{background:var(--jh-mint);color:var(--jh-ink)}

/* Bandes plein cadre : vidéo Joli8 + teinte de marque, sans gris */
main.cas-jh .jh-band{position:relative;min-height:78vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center;padding:clamp(56px,9vh,112px) 6vw;margin:0;background:var(--jh-violet)}
main.cas-jh .jh-band__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:var(--jh-violet)}
main.cas-jh .jh-band::after{content:"";position:absolute;inset:0;z-index:-1}
main.cas-jh .jh-band--violet::after{background:linear-gradient(180deg,#6128FF66,#6128FFCC)}
main.cas-jh .jh-band--rose::after{background:linear-gradient(180deg,#FFC0D455,#E5173FAA)}
main.cas-jh .jh-band--mint::after{background:linear-gradient(180deg,#58E8BF44,#0A7A5DBB)}
main.cas-jh .jh-band--jaune::after{background:linear-gradient(180deg,#FFC61544,#FF5F45BB)}
main.cas-jh .jh-band__in{max-width:780px}
main.cas-jh .jh-band h2{color:#FCFBFA!important;font-size:clamp(2.4rem,6vw,4.8rem);text-shadow:0 2px 28px #2a0f6a55;margin:0 0 .35em}
main.cas-jh .jh-band h2 em{color:var(--jh-mint)!important}
main.cas-jh .jh-band p{color:#FFFFFF!important;font-size:clamp(1rem,1.5vw,1.2rem);text-shadow:0 1px 16px #2a0f6a77;margin:0 auto}

/* Bloc d'information et solutions : cartes Joli8 */
main.cas-jh .meta__card{border-radius:24px;background:#FFFFFF;border:0;box-shadow:0 18px 40px -26px #6128FF55}
main.cas-jh .meta__card:nth-child(1){border-top:6px solid var(--jh-violet)}
main.cas-jh .meta__card:nth-child(2){border-top:6px solid var(--jh-mint)}
main.cas-jh .meta__card:nth-child(3){border-top:6px solid var(--jh-corail)}
main.cas-jh .meta__card:nth-child(4){border-top:6px solid var(--jh-jaune)}
main.cas-jh .meta__k{color:var(--jh-muted)!important}
main.cas-jh .meta__v{font-family:var(--jh-serif);font-size:1.25rem;color:var(--jh-ink)!important}
main.cas-jh .sol__card{border-radius:28px;border:0;box-shadow:0 22px 44px -30px #6128FF66}
main.cas-jh .sol__card:nth-child(1){background:#FFFFFF}
main.cas-jh .sol__card:nth-child(2){background:#FFFFFF}
main.cas-jh .sol__card:nth-child(3){background:#FFFFFF}
main.cas-jh .sol__card:nth-child(4){background:#FFFFFF}
main.cas-jh .sol__n{font-family:var(--jh-serif);font-size:2.6rem;color:var(--jh-corail)}
main.cas-jh .sol__card:nth-child(1) .sol__n{color:var(--jh-violet)}
main.cas-jh .sol__card:nth-child(2) .sol__n{color:#0A7A5D}
main.cas-jh .sol__card:nth-child(3) .sol__n{color:var(--jh-corail)}
main.cas-jh .sol__card:nth-child(4) .sol__n{color:var(--jh-rouge)}
main.cas-jh .sol__card h3{font-size:1.5rem;color:var(--jh-ink)!important}

/* Visuels : cadres arrondis colorés */
main.cas-jh .shot{border:0;border-radius:32px;background:#FFFFFF;box-shadow:0 26px 50px -30px #6128FF66;overflow:hidden}
main.cas-jh .shot img{border-radius:32px 32px 0 0}
main.cas-jh .shot figcaption{font-family:var(--jh-sans);background:#FFFFFF;padding:12px 18px;color:var(--jh-muted)!important}
main.cas-jh .shot--wide{max-width:980px;margin:0 auto}
main.cas-jh .shots--tool{max-width:1280px;grid-template-columns:1fr;gap:32px;padding:0 6vw}
main.cas-jh .shots--tool .shot--wide{width:100%;max-width:1180px}
main.cas-jh .shots--tool .shot--wide img{width:100%;max-height:670px;object-fit:contain;object-position:top center;background:#FCFBFA}

/* Listes */
main.cas-jh .check li::marker,main.cas-jh .learn li::marker{color:var(--jh-corail)}
main.cas-jh .learn b{color:var(--jh-violet)!important}
main.cas-jh .btn--warm{background:var(--jh-mint);color:var(--jh-ink)}

@media (max-width:760px){
  main.cas-jh .shots--trio{grid-template-columns:1fr}
  main.cas-jh .jh-band{min-height:64vh}
}
@media (prefers-reduced-motion:reduce){
  main.cas-jh .jh-hero__v,main.cas-jh .jh-band__v{display:none}
}
main.cas-jh .hero__act .btn:last-child{background:var(--jh-mint)!important;color:var(--jh-ink)!important;border:0!important}

/* Langage visuel Joli8 : mot souligné d'un surlignage de couleur, panneau lilas avec ombre menthe décalée */
main.cas-jh .sec__title em,main.cas-jh .jh-band h2 em{font-style:italic;color:var(--jh-ink)!important;background:linear-gradient(transparent 60%,#FFC615AA 60%,#FFC615AA 92%,transparent 92%);padding:0 .06em}
main.cas-jh .jh-hero h1 em{background:none;color:var(--jh-mint)!important}
main.cas-jh .jh-band h2 em{background:linear-gradient(transparent 62%,#FFC0D4CC 62%,#FFC0D4CC 94%,transparent 94%);color:#1B1A1F!important}
main.cas-jh .jh-panel{background:var(--jh-lilas);border-radius:6px;padding:clamp(22px,3.5vw,44px);box-shadow:14px 14px 0 var(--jh-mint);margin-bottom:16px}
main.cas-jh .jh-panel p{color:var(--jh-ink)!important}

/* Les vidéos restent nues : aucun voile, aucune couleur posée dessus. La couleur va sur les textes. */
main.cas-jh .jh-hero::after,main.cas-jh .jh-band::after{display:none}
main.cas-jh .jh-hero__panel{background:var(--jh-paper);border-radius:6px;padding:clamp(22px,3.5vw,44px);box-shadow:14px 14px 0 var(--jh-mint);max-width:min(760px,92vw);margin:0 0 clamp(28px,6vh,56px) clamp(18px,5vw,64px)}
main.cas-jh .jh-hero__panel h1{color:var(--jh-ink)!important;text-shadow:none;font-size:clamp(2.8rem,8vw,5.6rem)}
main.cas-jh .jh-hero__panel h1 em{color:var(--jh-violet)!important}
main.cas-jh .jh-hero__panel .lede{color:var(--jh-ink)!important;text-shadow:none}
main.cas-jh .jh-hero__panel .chip{background:var(--jh-lilas)!important;color:var(--jh-ink)!important}
main.cas-jh .jh-hero__panel .hero__act{justify-content:flex-start}
main.cas-jh .jh-band__in{background:var(--jh-paper);border-radius:6px;padding:clamp(22px,3.5vw,44px);box-shadow:14px 14px 0 var(--jh-mint);max-width:min(760px,92vw)}
main.cas-jh .jh-band h2{color:var(--jh-ink)!important;text-shadow:none}
main.cas-jh .jh-band h2 em{background:none;color:var(--jh-violet)!important}
main.cas-jh .jh-band p{color:var(--jh-muted)!important;text-shadow:none}
main.cas-jh .jh-hero::before,main.cas-jh .jh-band::before{display:none}

/* Boutons Joli8 : contour fin arrondi, sans angles coupés ni fond sombre */
main.cas-jh .btn,main.cas-jh .btn--warm,main.cas-jh .hero__act .btn:last-child{clip-path:none!important;background:transparent!important;color:var(--jh-ink)!important;border:2px solid var(--jh-ink)!important;border-radius:0!important;font-family:var(--jh-sans);font-weight:500;padding:.8rem 1.4rem;box-shadow:none!important;transition:background .2s ease,color .2s ease}
main.cas-jh .btn:hover{background:var(--jh-mint)!important;border-color:var(--jh-mint)!important;color:var(--jh-ink)!important}
main.cas-jh .btn:nth-child(1){border-color:var(--jh-violet)!important;color:var(--jh-violet)!important}
main.cas-jh .btn:nth-child(1):hover{background:var(--jh-violet)!important;color:var(--jh-paper)!important}
main.cas-jh .hero__act .btn{background:var(--jh-paper)!important;border-color:var(--jh-paper)!important}
main.cas-jh .hero__act .btn:last-child{background:var(--jh-mint)!important;border-color:var(--jh-mint)!important}

/* Enseignements : cartes papier aux angles doux, sans gris */
main.cas-jh .learn li{background:var(--jh-paper);border-radius:24px;padding:22px 26px;clip-path:none;box-shadow:10px 10px 0 var(--jh-rose);margin:0 0 22px;color:var(--jh-muted)!important}
main.cas-jh .learn li b{display:block;font-family:var(--jh-serif);font-size:1.3rem;font-weight:400;color:var(--jh-violet)!important;margin-bottom:.35rem}

/* Solutions : étiquettes colorées à la place des chiffres */
main.cas-jh .sol__n{background:var(--jh-violet);color:var(--jh-paper);font-family:var(--jh-sans);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;border-radius:0;padding:.4rem .9rem;align-self:flex-start;display:inline-block;margin-bottom:.9rem}
main.cas-jh .sol__card:nth-child(2) .sol__n{background:var(--jh-mint);color:var(--jh-ink)}
main.cas-jh .sol__card:nth-child(3) .sol__n{background:var(--jh-jaune);color:var(--jh-ink)}
main.cas-jh .sol__card:nth-child(4) .sol__n{background:var(--jh-rose);color:var(--jh-ink)}

/* Boutons : structure Dréa Digital conservée (rebords coupés, calque intérieur),
   cadre plein en violet Joli8, intérieur papier. Aucun dégradé. */
main.cas-jh .btn,main.cas-jh .btn--warm,main.cas-jh .hero__act .btn,main.cas-jh .hero__act .btn:last-child{
  background:#6128FF!important;
  border:none!important;
  border-radius:0!important;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)!important;
  color:#1B1A1F!important;
  box-shadow:none!important;
}
main.cas-jh .btn::after{background:#FCFBFA!important;box-shadow:none!important}
main.cas-jh .btn:hover::after{background:#58E8BF!important}

/* Plus de pastilles rondes : étiquettes et chips à rebords coupés, comme les boutons */
main.cas-jh .chip,main.cas-jh .sol__n{clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)!important;border-radius:0!important}

/* Étiquettes et chips : contour fin, texte de la même couleur, intérieur papier (même logique que les boutons) */
main.cas-jh .chip,main.cas-jh .sol__n{
  --c:#6128FF;
  background:linear-gradient(#FCFBFA,#FCFBFA) padding-box,linear-gradient(var(--c),var(--c)) border-box!important;
  border:2px solid transparent!important;
  color:var(--c)!important;
  box-shadow:none!important;
  font-family:var(--jh-sans);
  font-weight:500;
}
main.cas-jh .sol__card:nth-child(2) .sol__n{--c:#0A7A5D}
main.cas-jh .sol__card:nth-child(3) .sol__n{--c:#D63A22}
main.cas-jh .sol__card:nth-child(4) .sol__n{--c:#B0396A}
main.cas-jh .jh-tint-mint .chip{--c:#0A7A5D}
main.cas-jh .jh-tint-jaune .chip{--c:#8A6708}
main.cas-jh .jh-tint-lilas .chip{--c:#D63A22}
main.cas-jh .jh-hero .chip{--c:#6128FF}
main.cas-jh .sol__n{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.45rem 1rem}
main.cas-jh .jh-hero__panel .chip{background:linear-gradient(#FCFBFA,#FCFBFA) padding-box,linear-gradient(var(--c),var(--c)) border-box!important;color:var(--c)!important;border:2px solid transparent!important}
/* Angles plus marqués sur les étiquettes et les boutons : coupe de 12 px, comme les rebords Dréa Digital */
main.cas-jh .chip,main.cas-jh .sol__n,main.cas-jh .jh-hero__panel .chip{clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important}
main.cas-jh .btn,main.cas-jh .btn--warm,main.cas-jh .hero__act .btn{clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important}
/* Quatre angles coupés sur les étiquettes et les boutons : haut-gauche, haut-droite, bas-droite, bas-gauche */
main.cas-jh .chip,main.cas-jh .sol__n,main.cas-jh .jh-hero__panel .chip,main.cas-jh .btn,main.cas-jh .btn--warm,main.cas-jh .hero__act .btn{clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important}
/* Tous les boutons de la page : quatre angles coupés, y compris les liens qui portent la classe btn */
main.cas-jh a.btn,main.cas-jh a.btn--warm,main.cas-jh .hero__act a.btn,main.cas-jh .jh-band a.btn{clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important}
main.cas-jh .hero__act .btn:last-child,main.cas-jh .hero__act .btn:last-child:hover{clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important}

/* Diagonales plus franches, et contour d'épaisseur régulière tout autour du bouton */
main.cas-jh .btn::after{inset:2px!important;width:auto!important;height:auto!important}

/* Contour de même épaisseur sur les diagonales : le calque intérieur suit la coupe, décalée de 2 px.
   Boutons : calque ::after (déjà décalé de 2 px) avec la coupe intérieure 16.8 px pour une coupe extérieure de 18 px. */
main.cas-jh .btn::after,main.cas-jh .btn--warm::after{clip-path:polygon(16.8px 0,100% 0,100% calc(100% - 16.8px),calc(100% - 16.8px) 100%,0 100%,0 16.8px)!important}
/* Étiquettes et chips : couleur pleine à l'extérieur, calque papier intérieur qui suit la coupe de 12 px */
main.cas-jh .chip,main.cas-jh .sol__n,main.cas-jh .jh-hero__panel .chip{
  position:relative;isolation:isolate;border:none!important;
  background:var(--c)!important;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)!important;
  color:var(--c)!important;
}
main.cas-jh .chip::after,main.cas-jh .sol__n::after,main.cas-jh .jh-hero__panel .chip::after{
  content:"";position:absolute;inset:2px;z-index:-1;background:#FCFBFA;
  clip-path:polygon(10.8px 0,100% 0,100% calc(100% - 10.8px),calc(100% - 10.8px) 100%,0 100%,0 10.8px);
}