/* WEBBEC — Cartes | système commun (3 variantes)
   1 standard : informations, projets, avis, FAQ, étapes, formulaire
   2 featured : forfait mis en avant
   3 compact : coordonnées, secteurs, petits repères, logos
   Le mode sombre est le défaut; le mode clair ne remplace que les tokens.
   Cette feuille est volontairement chargée APRÈS les styles historiques. */
:root {
 --wb-card-radius:18px;
 --wb-card-border:rgba(118,155,207,.22);
 --wb-card-surface:#111F31;
 --wb-card-surface-hover:#17283E;
 --wb-card-shadow:0 12px 30px rgba(0,0,0,.16);
 --wb-card-pad:clamp(22px,2.1vw,30px);
 --wb-card-gap:clamp(16px,1.8vw,26px);
 --wb-card-accent:#0066FF;
 --wb-card-featured-border:#0066FF;
 --wb-card-featured-surface:#172B45;
}
html[data-theme="light"] {
 --wb-card-border:#DFEAFA;
 --wb-card-surface:#FFFFFF;
 --wb-card-surface-hover:#F8FBFF;
 --wb-card-shadow:0 8px 24px rgba(23,52,91,.065);
 --wb-card-featured-border:#0066FF;
 --wb-card-featured-surface:#F1F6FF;
}
/* The global card foundation is shared regardless of section. */
html body main :is(.n-problem,.n-work,.wb-review,#pricing .n-plan,#process .n-step,#faq .wb-faq-card,.n-cred,.n-channel,.n-ind,.n-form),
html body main .n-logos .n-logo-item {
 border-radius:var(--wb-card-radius)!important;
 border:1px solid var(--wb-card-border)!important;
 background:var(--wb-card-surface)!important;
 box-shadow:var(--wb-card-shadow)!important;
 background-image:none!important;
}
/* Standard cards: same interior rhythm, retain original grid layouts. */
html body main :is(.n-problem,.wb-review,#pricing .n-plan,#process .n-step,#faq .wb-faq-card,.n-form){
 padding:var(--wb-card-pad)!important;
}
/* Portfolio: image remains edge-to-edge, content panel uses the shared spacing. */
html body main .n-work{overflow:hidden;padding:0!important;}
html body main .n-work-body{padding:var(--wb-card-pad)!important;}
html body main .n-work-thumb{border-radius:calc(var(--wb-card-radius) - 1px) calc(var(--wb-card-radius) - 1px) 0 0;overflow:hidden;}
/* Compact cards: same surface and outline, more modest padding. */
html body main :is(.n-ind,.n-channel,.n-cred){padding:clamp(14px,1.2vw,20px)!important;}
html body main .n-logos .n-logo-item{padding:12px!important;}
/* Light-theme legacy !important overrides are normalized here. */
html[data-theme="light"] body main :is(.n-problem,.n-work,.wb-review,#pricing .n-plan,#process .n-step,#faq .wb-faq-card,.n-cred,.n-channel,.n-ind,.n-form),
html[data-theme="light"] body main .n-logos .n-logo-item {
 border-color:var(--wb-card-border)!important;
 background:var(--wb-card-surface)!important;
 background-image:none!important;
 box-shadow:var(--wb-card-shadow)!important;
}
/* Featured: same base geometry as standard cards, blue outline and subtle fill. */
html body main #pricing .n-plan.featured,
html[data-theme="light"] body main #pricing .n-plan.featured {
 border-color:var(--wb-card-featured-border)!important;
 background:var(--wb-card-featured-surface)!important;
 box-shadow:var(--wb-card-shadow)!important;
 padding:var(--wb-card-pad)!important;
 transform:none!important;
}
html body main #pricing .n-plan.featured .n-plan-flag {
 background:#0066FF!important;
 box-shadow:none!important;
}
/* One hover behavior: gentle elevation without color surprises. */
@media (hover:hover) {
 html body main :is(.n-problem,.n-work,#process .n-step,.n-cred,.n-channel,.n-ind):hover {
  border-color:rgba(0,102,255,.48)!important;
  background:var(--wb-card-surface-hover)!important;
  box-shadow:var(--wb-card-shadow)!important;
 }
 html[data-theme="light"] body main :is(.n-problem,.n-work,#process .n-step,.n-cred,.n-channel,.n-ind):hover {
  border-color:#B8D1F4!important;
  background:var(--wb-card-surface-hover)!important;
 }
}
/* Keep client logo cards dark in dark mode, white in light mode. */
html:not([data-theme="light"]) body main .n-logos .n-logo-item{
 background:#111F31!important;
 border-color:rgba(118,155,207,.22)!important;
}
html[data-theme="light"] body main .n-logos .n-logo-item{
 background:#FFFFFF!important;
 border-color:#DFEAFA!important;
}
/* Matching layout gaps in standard grids; original responsive column counts retained. */
html body main :is(.n-works,#pricing .n-plans,#process .n-steps,#faq .wb-faq-grid,.wb-reviews){
 gap:var(--wb-card-gap)!important;
}
@media(max-width:767px){
 :root{--wb-card-pad:22px;--wb-card-gap:18px;--wb-card-radius:16px;}
 html body main .n-work-body{padding:22px!important;}
}

/* ── Avis Google : même base que les autres cartes standard Webbec ── */
html body main #testimonials .wb-review {
 position:relative;
 display:flex;
 flex-direction:column;
 align-items:stretch;
 min-height:0;
 max-width:none;
 width:100%;
 padding:var(--wb-card-pad)!important;
 border:1px solid var(--wb-card-border)!important;
 border-radius:var(--wb-card-radius)!important;
 background:var(--wb-card-surface)!important;
 background-image:none!important;
 box-shadow:var(--wb-card-shadow)!important;
 overflow:hidden;
}
/* Supprimer les deux éléments décoratifs de l'ancien design. */
html body main #testimonials .wb-review::before,
html body main #testimonials .wb-review::after {content:none!important;display:none!important;}
html body main #testimonials .wb-review__top {
 display:flex;
 flex-direction:row;
 align-items:center;
 justify-content:space-between;
 gap:16px;
 margin-bottom:18px;
}
html body main #testimonials .wb-review__person {
 display:flex;align-items:center;gap:12px;min-width:0;
}
/* Même bleu pour les trois initiales, aucun vert/rose ni dégradé. */
html body main #testimonials .wb-review__mark,
html body main #testimonials .wb-review__mark--green,
html body main #testimonials .wb-review__mark--lime,
html body main #testimonials .wb-review__mark--pink {
 display:grid;place-items:center;flex:none;
 width:44px;height:44px;border-radius:12px;
 background:rgba(0,102,255,.14)!important;
 background-image:none!important;
 border:1px solid rgba(0,102,255,.23);
 box-shadow:none!important;
 color:#4F95FF!important;
 font-family:inherit;
 font-size:18px!important;
 font-weight:700;
 letter-spacing:0;
}
html body main #testimonials .wb-review__name {
 color:var(--text)!important;
 font-size:16px!important;
 font-weight:700;
 letter-spacing:0;
 line-height:1.4;
 max-width:none;
 overflow-wrap:anywhere;
}
html body main #testimonials .wb-review__g {
 display:grid;place-items:center;flex:none;
 width:32px;height:32px;
 border:0!important;border-radius:0;
 background:none!important;box-shadow:none!important;
}
html body main #testimonials .wb-review__g svg {width:23px;height:23px;display:block;}
/* Les étoiles gardent leur couleur naturelle; tout le reste est neutre. */
html body main #testimonials .wb-review__stars {
 color:#F4B942;
 font-size:20px!important;
 line-height:1.2;
 letter-spacing:2px;
 margin-bottom:16px;
}
html body main #testimonials .wb-review__quote {
 margin:0;
 color:var(--body)!important;
 font-family:inherit;
 font-size:16px!important;
 font-weight:400!important;
 line-height:1.7;
 letter-spacing:0;
 max-width:none;
}
html[data-theme="light"] body main #testimonials .wb-review {
 border-color:#DFEAFA!important;
 background:#FFFFFF!important;
 background-image:none!important;
 box-shadow:var(--wb-card-shadow)!important;
}
html[data-theme="light"] body main #testimonials .wb-review__name {color:#111F31!important;}
html[data-theme="light"] body main #testimonials .wb-review__quote {color:#44546A!important;}
html[data-theme="light"] body main #testimonials .wb-review__mark {color:#0066FF!important;background:#EEF5FF!important;}
@media(max-width:640px){
 html body main #testimonials .wb-review__top {gap:12px;align-items:center;flex-direction:row;}
 html body main #testimonials .wb-review__mark {width:42px;height:42px;}
}

/* Realisations : captures bord a bord, sans bande vide avant le contenu.
   Les captures fournies sont des panoramas 1400x695, pas des longues pages. */
html body main #portfolio .n-work-thumb {
  height:clamp(200px,18.5vw,290px)!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  position:relative;
}
html body main #portfolio .n-work-thumb > img.n-scroll-img {
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center top!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  transition:transform .35s ease!important;
}
@media(hover:hover) {
  html body main #portfolio .n-work-thumb:hover > img.n-scroll-img {
    transform:scale(1.025)!important;
  }
}
@media(max-width:640px){
  html body main #portfolio .n-work-thumb {height:clamp(190px,50vw,270px)!important;}
}

/* Webbec 2026-11 : réalisations compactes, visuellement alignées. */
html body main #portfolio .n-works {align-items:stretch;}
html body main #portfolio .n-work {display:flex;flex-direction:column;height:100%;min-height:0;}
html body main #portfolio .n-work-thumb {
  height:clamp(186px,16.2vw,235px)!important;
  flex:0 0 auto;
  background:var(--wb-card-surface)!important;
  border-radius:var(--wb-card-radius) var(--wb-card-radius) 0 0;
}
html body main #portfolio .n-work-body {
  padding:clamp(20px,1.7vw,26px)!important;
  gap:clamp(18px,1.5vw,24px)!important;
  display:flex;flex:1;flex-direction:column;justify-content:space-between;
}
html body main #portfolio .n-work-title{margin:0 0 10px!important;}
html body main #portfolio .n-work-desc{margin:0!important;max-width:45ch;}
html body main #portfolio .n-work-link {
  margin-top:auto!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:.4rem!important;
  font-size:var(--wb-type-body,1rem)!important;
  font-weight:650!important;
  letter-spacing:0!important;
  line-height:1.4!important;
  text-transform:none!important;
  color:#3398ff!important;
}
html[data-theme="light"] body main #portfolio .n-work-link{color:#0066FF!important;}
html body main #portfolio .n-work-link:hover{text-decoration:underline!important;}
html body main #portfolio .n-work-link:focus-visible{outline:2px solid #0066FF;outline-offset:5px;}
@media(max-width:640px){
 html body main #portfolio .n-work-thumb{height:clamp(170px,52vw,225px)!important;}
 html body main #portfolio .n-work-body{padding:20px!important;gap:20px!important;}
}

/* About: two proof points, same card tokens as the Webbec design system. */
#about .wb-about-proof {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.3vw,20px);
  margin:clamp(22px,2vw,30px) 0 clamp(22px,2vw,30px);
}
#about .wb-about-proof-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
  padding:clamp(18px,1.9vw,28px);
  border:1px solid var(--wb-card-border,rgba(125,154,193,.22));
  border-radius:var(--wb-card-radius,18px);
  background:var(--wb-card-surface,var(--surface));
  box-shadow:var(--wb-card-shadow,0 10px 28px rgba(0,0,0,.11));
}
#about .wb-about-proof-number {
  color:var(--text);
  font-family:var(--font-inter),sans-serif;
  font-size:clamp(2.7rem,4vw,3.8rem);
  letter-spacing:-.055em;
  font-weight:800;
  line-height:1.02;
  white-space:nowrap;
}
#about .wb-about-proof-number span {
  font-size:.5em;
  font-weight:700;
  letter-spacing:-.02em;
}
#about .wb-about-proof-caption {
  display:block;
  margin-top:10px;
  font-size:var(--wb-type-body,1rem);
  font-weight:500;
  color:var(--body);
  line-height:1.4;
}
html[data-theme="light"] #about .wb-about-proof-card {
  background:#FFFFFF;
  border-color:#DFEAFA;
  box-shadow:0 8px 26px rgba(26,57,107,.055);
}
@media(max-width:660px){
  #about .wb-about-proof {grid-template-columns:1fr;gap:12px;}
  #about .wb-about-proof-card {padding:20px;}
  #about .wb-about-proof-number {font-size:2.8rem;}
}