/* @v2-isolated
 * BLOCKS.CSS V2 — style des blocks + shell front, ALIGNE pixel-perfect sur
 * le rendu V1 (cf. inc/generation/standard-header.php / standard-footer.php
 * et le HTML genere par Claude V1).
 *
 * Variables CSS utilisees : meme noms que V1 (--webino-accent, --vs-paper,
 * --vs-ink, --vs-muted, --vs-line, --webino-font-text, --webino-font-display)
 * pour rendu visuellement IDENTIQUE au front V1.
 *
 * design-css.php injecte ces variables au render depuis design_json.
 */

/* ============================================================ */
/* FALLBACKS DESIGN TOKENS (override par <style id="webino-v2-design">) */
/* ============================================================ */
:root {
  --webino-accent: #2563EB;
  --webino-accent-soft: rgba(37,99,235,0.15);
  --webino-accent-deep: #1D4ED8;
  --vs-paper:  #FFFFFF;
  --vs-ink:    #0F172A;
  --vs-muted:  #5B6478;
  --vs-line:   #E5E7EB;
  --webino-font-text:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --webino-font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --webino-radius: 8px;
  --webino-content-width: 1200px;

  /* Header front specifique */
  --webino-h-bg-color: var(--vs-paper);
  --webino-h-text:     var(--vs-ink);
  --webino-cta-accent: var(--webino-accent);

  /* Texte pose SUR la couleur accent (boutons pleins). Blanc par defaut ;
     inverse en accent reel dans les sections accent-strong (ou --webino-accent
     devient paper, un bouton plein deviendrait blanc-sur-blanc). */
  --webino-on-accent: #fff;

  /* Fonds de section : 4 options FIXES (pas de mix dynamique pour rester
     previsible). Paper et accent suivent la palette ; neutral est un gris
     constant ; accent-strong = accent plein avec contraste inverse. */
  --webino-bg-paper:         var(--vs-paper);
  /* Neutral = respiration legere DERIVEE de la palette (comme accent/accent-strong),
     et non plus une constante claire : en mode FONCE, un #f4f4f2 fige restait gris
     CLAIR sur un site sombre (sections "neutral" qui paraissaient blanches, ex. avis).
     Mix paper + slate -> reste un gris clair en mode clair (~#eff1f3) ET un gris
     fonce subtil en mode sombre, qui suit --vs-paper dans les deux cas. */
  --webino-bg-neutral:       color-mix(in srgb, var(--vs-paper) 90%, #64748B 10%);
  --webino-bg-accent:        color-mix(in srgb, var(--vs-paper) 90%, var(--webino-accent) 10%);
  --webino-bg-accent-strong: var(--webino-accent);

  /* Fallbacks des mirrors -true (normalement emis par design-css.php / le
     runtime editeur) : resolus ICI au :root (valeurs originales), donc jamais
     affectes par les overrides de section. Garantit que les restaurations
     [data-webino-bg=...] fonctionnent meme sans <style webino-v2-design>. */
  --vs-ink-true:        var(--vs-ink);
  --vs-muted-true:      var(--vs-muted);
  --vs-line-true:       var(--vs-line);
  --webino-accent-true: var(--webino-accent);
}

/* ============================================================ */
/* REVEAL DES TITRES — fade-in + translate-up a l'entree viewport */
/* ============================================================ */
/* Pilote par blocks-interactions.js (IntersectionObserver) qui pose
   data-webino-reveal="pending" puis "in". SANS JS, ou en mode editeur /
   capture PDF / prefers-reduced-motion, l'attribut n'est PAS pose -> aucune
   regle ne s'applique -> les titres restent visibles normalement (pas de FOUC).
   On n'anime QUE les titres explicitement marques. */
[data-webino-reveal="pending"] {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
[data-webino-reveal="in"] {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  /* Securite CSS supplementaire (le JS ne pose deja pas l'attribut, mais au cas
     ou un cache servirait un ancien JS) : jamais de masquage anime. */
  [data-webino-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* WORD-RISE : revelation des gros titres MOT par MOT depuis un masque (pose par
   blocks-interactions.js quand GSAP est present ; jamais en editeur / PDF /
   reduced-motion -> les <span> ne sont pas crees, titre normal). Chaque mot est un
   masque inline (overflow hidden) ; le padding vertical + la marge negative
   compensee donnent de l'air aux ACCENTS (e, a, A) en haut et aux jambages
   (g, j, p) en bas SANS rogner ni decaler la mise en page. Le mot interieur part
   sous le masque (yPercent 120) puis remonte. */
.webino-fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0 0.16em; margin: -0.08em 0 -0.16em; }
.webino-fx-wi { display: inline-block; will-change: transform; }
/* Filet accent "dessine" sous un titre de section (injecte par blocks-interactions.js
   apres le word-rise, aligne selon le text-align du titre). Court, arrondi, token. */
.webino-fx-underline { display: block; width: clamp(38px, 7%, 60px); height: 3px; margin-top: 0.5em; border-radius: 999px; background: var(--webino-accent); will-change: transform; }

/* ============================================================ */
/* FONDS DE SECTION — override par bloc (data-webino-bg)         */
/* ============================================================ */
/* Pas d'auto-zebra : par defaut tout est paper (= fond du site).
   L'utilisateur choisit explicitement quand il veut une section qui ressort.
   Plus simple, plus previsible, et evite les surprises sur paper=blanc. */
.webino-v2-main > section[data-webino-bg="paper"]   { background: var(--webino-bg-paper); }
.webino-v2-main > section[data-webino-bg="neutral"] { background: var(--webino-bg-neutral); }
.webino-v2-main > section[data-webino-bg="accent"] {
  background: var(--webino-bg-accent);
  /* Neutralise l'accent A L'INTERIEUR de la section : les eyebrows, liens, italics,
     etc. qui utilisent --webino-accent deviendraient invisibles sur un fond accent.
     On les bascule sur ink (sombre) qui contraste bien avec le accent-soft.
     --webino-accent-deep suit (titres/valeurs des variants warm/bold qui posent
     du texte deep DIRECTEMENT sur le fond de section). */
  --webino-accent:      var(--vs-ink);
  --webino-accent-deep: var(--vs-ink);
}
.webino-v2-main > section[data-webino-bg="accent-strong"] {
  background: var(--webino-bg-accent-strong);
  /* Fond accent plein -> texte clair force pour rester lisible.
     On inverse les vars de texte + on bascule --webino-accent (et -deep, utilise
     comme couleur de titre/valeur par plusieurs variants) sur paper pour que les
     enfants poses directement sur le fond restent visibles. */
  --vs-ink:             var(--vs-paper);
  --vs-muted:           color-mix(in srgb, var(--vs-paper) 70%, transparent);
  --vs-line:            color-mix(in srgb, var(--vs-paper) 20%, transparent);
  --webino-accent:      var(--vs-paper);
  --webino-accent-deep: var(--vs-paper);
  /* Surfaces douces (cartes d'avis, etapes, avatars a fond accent-soft) : la
     version rgba 15% serait INVISIBLE sur l'accent plein (accent sur accent).
     On la remplace par son equivalent OPAQUE (15% d'accent reel sur paper) :
     rendu identique sur les surfaces claires, panneau pale visible sur l'accent. */
  --webino-accent-soft: color-mix(in srgb, var(--webino-accent-true) 15%, var(--vs-paper));
  /* Boutons pleins (bg accent -> devenu paper) : leur texte passe du blanc a
     l'accent reel, sinon blanc-sur-blanc. Consomme via --webino-on-accent. */
  --webino-on-accent:   var(--webino-accent-true);
  color: var(--vs-paper);
}
/* Cards/panels/avatars INTERIEURS d'une section accent plein : ils ont leur
   propre fond clair (paper, neutral ou accent-soft opaque ci-dessus) -> on
   RESTAURE les vars « originales » via les mirrors -true pour que le
   texte/accent dedans redevienne lisible sur fond clair. -deep est restaure
   depuis --webino-accent-true (deep = accent cote serveur, cf. design-css.php).
   Les __item (rangees sans bg propre) ne sont volontairement PAS cibles : ils
   restent sur le fond accent et doivent garder le texte clair. */
.webino-v2-main > section[data-webino-bg="accent-strong"] [class*="__card"],
.webino-v2-main > section[data-webino-bg="accent-strong"] [class*="__panel"],
.webino-v2-main > section[data-webino-bg="accent-strong"] [class*="__avatar"] {
  --vs-ink:             var(--vs-ink-true);
  --vs-muted:           var(--vs-muted-true);
  --vs-line:            var(--vs-line-true);
  --webino-accent:      var(--webino-accent-true);
  --webino-accent-deep: var(--webino-accent-true);
  --webino-on-accent:   #fff;
}
/* Le `color` force ne concerne QUE cards/panels : les avatars gardent la couleur
   declaree par leur variant (ex : initiales paper sur pastille accent). */
.webino-v2-main > section[data-webino-bg="accent-strong"] [class*="__card"],
.webino-v2-main > section[data-webino-bg="accent-strong"] [class*="__panel"] {
  color: var(--vs-ink);
}

/* Full-bleed automatique pour TOUT bloc avec un bg : on annule un eventuel
   max-width sur la <section> et on remet du padding-inline pour preserver le
   centrage visuel a content-width. Ainsi le fond couvre toujours edge-to-edge
   et le contenu reste centre, sans modifier le markup des templates. */
.webino-v2-main > section[data-webino-bg] {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: max(24px, calc((100% - var(--webino-content-width)) / 2));
  padding-right: max(24px, calc((100% - var(--webino-content-width)) / 2));
}

/* ============================================================ */
/* TEXTURES DE FOND — motif accent TRES subtil (data-webino-texture)         */
/* ============================================================ */
/* Casse le "tout blanc" sur CERTAINES sections sans surcharger (retour Marino :
   fonds un peu fades, des SVG/motifs en fond mais pas trop visibles). Motif fin
   en couleur d'accent pose en background-image APRES les regles data-webino-bg ->
   il COEXISTE avec une eventuelle couleur de fond choisie (le shorthand `background`
   du bg pose la couleur, mon background-image pose le motif par-dessus). Token-driven
   (suit l'accent), zero image/JS, volontairement discret. */
.webino-v2-main > section[data-webino-texture="dots"] {
  background-image: radial-gradient(color-mix(in srgb, var(--webino-accent) 9%, transparent) 1px, transparent 1.5px);
  background-size: 24px 24px;
}
.webino-v2-main > section[data-webino-texture="grid"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--webino-accent) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--webino-accent) 6%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
}
.webino-v2-main > section[data-webino-texture="diagonal"] {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--webino-accent) 6%, transparent) 0 1px, transparent 1px 15px);
}
/* Sous fond accent PLEIN (accent-strong) l'accent EST le fond -> motif clair (paper)
   pour qu'il reste lisible sans crier. */
.webino-v2-main > section[data-webino-texture="dots"][data-webino-bg="accent-strong"] {
  background-image: radial-gradient(color-mix(in srgb, var(--vs-paper) 16%, transparent) 1.1px, transparent 1.6px);
}
.webino-v2-main > section[data-webino-texture="grid"][data-webino-bg="accent-strong"] {
  background-image:
    linear-gradient(color-mix(in srgb, var(--vs-paper) 12%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--vs-paper) 12%, transparent) 1px, transparent 1px);
}
.webino-v2-main > section[data-webino-texture="diagonal"][data-webino-bg="accent-strong"] {
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--vs-paper) 10%, transparent) 0 1px, transparent 1px 13px);
}

/* ============================================================ */
/* RESET LEGER + BASE                                           */
/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--webino-font-text);
  color: var(--vs-ink);
  background: var(--vs-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* anti-debordement horizontal (clip != hidden : ne casse pas position:sticky) */
}
img, svg, video { max-width: 100%; display: block; }
iframe { max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--webino-font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vs-ink);
}
p { margin: 0; }

/* ============================================================ */
/* SHELL HEADER — glassmorphism repl V1 standard-header.php     */
/* ============================================================ */
.webino-v2-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--webino-h-bg-color, var(--vs-paper)) 72%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--webino-h-text, var(--vs-ink)) 6%, transparent);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.webino-v2-header.is-scrolled {
  background: color-mix(in srgb, var(--webino-h-bg-color, var(--vs-paper)) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--webino-h-text, var(--vs-ink)) 10%, transparent);
  box-shadow: 0 4px 24px -8px rgba(15,23,42,0.06);
}
.webino-v2-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.webino-v2-header__brand {
  font-family: var(--webino-font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--webino-h-text, var(--vs-ink));
}
.webino-v2-header__brand--mark { display: inline-flex; align-items: center; padding: 0; }
.webino-v2-brand-mark { display: block; height: 40px; width: 40px; }
@media (max-width: 600px) { .webino-v2-brand-mark { height: 34px; width: 34px; } }
.webino-v2-header__nav { display: flex; align-items: center; gap: 4px; }
.webino-v2-header__cta {
  background: var(--webino-cta-accent, var(--webino-accent));
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--webino-radius-pill, 999px);
  font-weight: 600;
  font-size: 0.875rem;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--webino-cta-accent, var(--webino-accent)) 60%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}
.webino-v2-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--webino-cta-accent, var(--webino-accent)) 80%, transparent);
}
/* Liens de section (ancres onepage) / de page (multipage). */
.webino-v2-header__link {
  color: var(--webino-h-text, var(--vs-ink));
  font-size: 0.9rem; font-weight: 500; white-space: nowrap;
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  transition: color .15s, background .15s;
}
.webino-v2-header__link:hover {
  color: var(--webino-accent);
  background: color-mix(in srgb, var(--webino-accent) 9%, transparent);
}
/* Burger (mobile uniquement) : 3 barres -> croix quand ouvert. */
.webino-v2-header__burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 40px; height: 40px; padding: 9px 8px; margin-left: auto;
  background: transparent; border: 0; cursor: pointer; border-radius: 8px;
}
.webino-v2-header__burger span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--webino-h-text, var(--vs-ink));
  transition: transform .2s ease, opacity .2s ease;
}
.webino-v2-header[data-nav-open="1"] .webino-v2-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.webino-v2-header[data-nav-open="1"] .webino-v2-header__burger span:nth-child(2) { opacity: 0; }
.webino-v2-header[data-nav-open="1"] .webino-v2-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  /* Nav repliee derriere le burger : menu deroulant ancre sous le header. */
  .webino-v2-header__burger { display: inline-flex; }
  .webino-v2-header__nav {
    position: absolute; top: calc(100% + 6px); right: 14px; left: 14px;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: color-mix(in srgb, var(--webino-h-bg-color, var(--vs-paper)) 96%, var(--vs-paper));
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--webino-h-text, var(--vs-ink)) 10%, transparent);
    border-radius: 14px; padding: 10px;
    box-shadow: 0 24px 60px -24px rgba(15,23,42,0.30);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .webino-v2-header[data-nav-open="1"] .webino-v2-header__nav {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .webino-v2-header__link { padding: 12px 14px; text-align: center; }
  .webino-v2-header__cta { margin-top: 6px; text-align: center; }
}

@media (max-width: 720px) {
  .webino-v2-header { padding: 10px 16px; }
  .webino-v2-header__brand { font-size: 0.9375rem; }
}

/* spacer pour ne pas que les blocks passent sous le header fixe */
.webino-v2-main { padding-top: 68px; overflow-x: clip; }
@media (max-width: 720px) { .webino-v2-main { padding-top: 56px; } }
/* Ancres de nav (onepage) : decalage du scroll pour que la section ciblee ne passe
   pas sous le header fixe, et defilement doux (coupe en reduced-motion). */
html { scroll-padding-top: 84px; }
@media (max-width: 720px) { html { scroll-padding-top: 66px; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ============================================================ */
/* SHELL FOOTER — gradient repl V1 standard-footer.php          */
/* ============================================================ */
.webino-v2-footer {
  margin-top: 96px;
  padding: 72px 24px 28px;
  position: relative;
  color: color-mix(in srgb, var(--vs-ink) 78%, transparent);
  background:
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--webino-accent) 6%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--vs-ink) 5%, transparent);
}
.webino-v2-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--webino-accent) 70%, transparent), transparent);
}
.webino-v2-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid; grid-template-columns: 1.8fr 1fr 1fr;
  gap: 56px;
}
.webino-v2-footer__brand h3 {
  font-size: 1.125rem; font-weight: 700;
  margin-bottom: 14px;
}
.webino-v2-footer__brand p,
.webino-v2-footer__contact p,
.webino-v2-footer__nav a {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--vs-ink) 65%, transparent);
  line-height: 1.7;
}
.webino-v2-footer__contact h4,
.webino-v2-footer__nav h4 {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--vs-ink) 80%, transparent);
  margin-bottom: 14px;
}
.webino-v2-footer__contact a,
.webino-v2-footer__nav a {
  display: block; margin-bottom: 6px;
  transition: color 0.15s;
}
.webino-v2-footer__contact a:hover,
.webino-v2-footer__nav a:hover { color: var(--webino-accent); }

.webino-v2-footer__bottom {
  max-width: 1200px;
  margin: 56px auto 0;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--vs-ink) 8%, transparent);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--vs-ink) 55%, transparent);
}
.webino-v2-footer__credit a { color: var(--webino-accent); font-weight: 600; }
/* Argument suisse discret : meme gris que la barre, jamais criard. */
.webino-v2-footer__host { color: color-mix(in srgb, var(--vs-ink) 45%, transparent); white-space: nowrap; }
.webino-v2-footer__photos { color: color-mix(in srgb, var(--vs-ink) 50%, transparent); }
.webino-v2-footer__photos a { color: inherit; text-decoration: underline; }
.webino-v2-footer__photos a:hover { color: var(--webino-accent); }

/* Credit photographe — injecte automatiquement apres chaque <img> dont la src
   provient de Pexels/Unsplash avec un credit attache (cf. block-renderer.php).
   Legende discrete sous la photo, conforme aux guidelines API. */
.webino-photo-credit {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--vs-ink) 55%, transparent);
  letter-spacing: 0.01em;
}
.webino-photo-credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--vs-ink) 25%, transparent);
}
.webino-photo-credit a:hover { color: var(--webino-accent); text-decoration-color: var(--webino-accent); }

@media (max-width: 720px) {
  .webino-v2-footer { padding: 56px 18px 18px; margin-top: 64px; }
  .webino-v2-footer__inner { grid-template-columns: 1fr; gap: 32px; }
  .webino-v2-footer__bottom { flex-direction: column; align-items: flex-start; margin-top: 36px; }
}

/* ============================================================ */
/* BUTTONS                                                      */
/* ============================================================ */
.webino-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: var(--webino-radius);
  font-family: var(--webino-font-text);
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
  transition: transform 0.15s, opacity 0.15s, background 0.15s, box-shadow 0.15s;
}
.webino-btn--accent {
  /* Texte via --webino-on-accent : blanc partout, sauf section accent-strong
     (le bouton y devient paper -> texte inverse en accent reel). */
  background: var(--webino-accent); color: var(--webino-on-accent, #fff);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--webino-accent) 60%, transparent);
}
.webino-btn--accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--webino-accent) 80%, transparent);
}
.webino-btn--ghost {
  background: transparent;
  color: var(--vs-ink);
  border-color: var(--vs-line);
}
.webino-btn--ghost:hover {
  background: var(--vs-line);
}
.webino-btn--sm { padding: 8px 14px; font-size: 0.8125rem; }
.webino-btn--lg { padding: 15px 28px; font-size: 1rem; }

/* ============================================================ */
/* BLOCK CONTAINERS — base                                      */
/* ============================================================ */
.webino-block { padding: 88px 24px; }
.webino-block.is-hidden { display: none; }

.webino-block__inner {
  max-width: var(--webino-content-width);
  margin: 0 auto;
}

.webino-block__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--webino-accent);
  margin-bottom: 16px;
}

@media (max-width: 720px) {
  .webino-block { padding: 56px 18px; }
}

/* ============================================================ */
/* FILET ANTI-DEBORDEMENT (global, tous blocks)                  */
/* Un mot long (ex. "international") dans une case etroite (grille */
/* 2x2 sur mobile) ne doit jamais deborder ni chevaucher la case  */
/* voisine. On coupe les mots trop longs et on autorise chaque    */
/* enfant de grille/flex a se compresser sous son contenu.        */
/* ============================================================ */
.webino-block :is(h1, h2, h3, h4, p, blockquote, dt, dd, li, span, a) {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
/* Tout enfant direct d'une grille ou d'un flex peut retrecir (min-width:0)
   sinon sa largeur minimale intrinseque (le mot le plus long) force le
   debordement de la colonne. */
.webino-block :is([class*="__grid"], [class*="__list"], [class*="__inner"], [class*="__row"]) > * {
  min-width: 0;
}
/* Les medias ne debordent jamais de leur conteneur. */
.webino-block :is(img, svg, video) { max-width: 100%; }

/* ============================================================ */
/* BLOCK : HERO — design premium, hierarchie typographique forte */
/* ============================================================ */
.webino-hero {
  min-height: 100vh;          /* heros plein ecran (full-height) */
  display: flex;
  flex-direction: column;
  justify-content: center;     /* contenu centre verticalement */
  padding: 140px 24px 100px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
/* Halo accent decoratif en arriere-plan, subtil */
.webino-hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--webino-accent) 14%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* FULL-BLEED : la <section> (et son halo ::before) prend toute la largeur ;
   le contenu est centre via .webino-hero__inner (max-width = content-width). */
.webino-hero--split-photo .webino-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 80px;
  align-items: center;
  max-width: var(--webino-content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.webino-hero__content { display: flex; flex-direction: column; gap: 24px; }
.webino-hero__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--webino-accent) 12%, transparent);
  color: var(--webino-accent);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 999px;
}
.webino-hero__title {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.webino-hero__title em,
.webino-hero__title i {
  font-style: italic;
  color: var(--webino-accent);
  font-weight: 600;
}
.webino-hero__subtitle {
  font-family: var(--webino-font-text);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--vs-muted);
  max-width: 540px;
  line-height: 1.55;
  font-weight: 400;
}
.webino-hero__content .webino-btn {
  align-self: flex-start;
  margin-top: 12px;
}
/* Boutons hero plus marques */
.webino-hero__content .webino-btn--accent {
  padding: 16px 32px;
  font-size: 1rem;
  border-radius: var(--webino-radius);
}
.webino-hero__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--webino-radius) * 2);
  overflow: hidden;
  background: var(--vs-line);
  position: relative;
  box-shadow:
    0 24px 60px -16px rgba(15,23,42,0.18),
    0 8px 24px -8px rgba(15,23,42,0.12);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.webino-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
  pointer-events: none;
}
.webino-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s linear;
}
.webino-hero__media:hover img { transform: scale(1.04); }

@media (max-width: 880px) {
  .webino-hero { padding: 96px 20px 56px; }
  .webino-hero--split-photo .webino-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .webino-hero__media { aspect-ratio: 4 / 3; max-height: 420px; }
  .webino-hero__title { font-size: clamp(2rem, 8vw, 2.8rem); }
}

/* ============================================================ */
/* BLOCK : ABOUT — design plus aere, image cadree                */
/* ============================================================ */
.webino-about__content { display: flex; flex-direction: column; gap: 20px; }

.webino-about--two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
  max-width: var(--webino-content-width); margin: 0 auto;
}
.webino-about__title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 4px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 800;
}
.webino-about__title em,
.webino-about__title i {
  font-style: italic; color: var(--webino-accent); font-weight: 600;
}
.webino-about__body {
  font-size: 1.0625rem;
  color: var(--vs-muted);
  line-height: 1.75;
}
.webino-about__body p { margin-bottom: 1em; }
.webino-about__body p:last-child { margin-bottom: 0; }
.webino-about__body strong { color: var(--vs-ink); font-weight: 700; }
.webino-about__media {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: calc(var(--webino-radius) * 2);
  overflow: hidden;
  background: var(--vs-line);
  position: relative;
  box-shadow: 0 24px 60px -16px rgba(15,23,42,0.18);
}
.webino-about__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(15,23,42,0.04);
  pointer-events: none;
}
.webino-about__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.webino-about__media:hover img { transform: scale(1.03); }
/* Pas de photo (image.url vide : fallback, photo Pexels absente ou retiree par le
   client) : on bascule en colonne unique et on RETIRE la boite media, plutot que de
   laisser un rectangle beige vide (retour revue : "photo du fondateur = boite vide"). */
.webino-about--two-col:not(:has(.webino-about__media img)) {
  grid-template-columns: 1fr; max-width: 820px;
}
.webino-about--two-col:not(:has(.webino-about__media img)) .webino-about__media {
  display: none;
}

.webino-about--centered {
  text-align: center;
  max-width: 820px; margin: 0 auto;
}
.webino-about--centered .webino-about__body {
  font-size: 1.1875rem;
  line-height: 1.7;
}

@media (max-width: 880px) {
  .webino-about--two-col { grid-template-columns: 1fr; gap: 40px; }
  .webino-about__media { aspect-ratio: 4 / 3; max-height: 420px; }
}

/* ============================================================ */
/* BLOCK : SERVICES — design premium, cards avec accents         */
/* ============================================================ */
.webino-services__header { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.webino-services__title {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
}
.webino-services__intro {
  font-size: 1.125rem;
  color: var(--vs-muted);
  line-height: 1.55;
}

.webino-services--cards-3col .webino-services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px;
  max-width: var(--webino-content-width); margin: 0 auto;
}
.webino-services--cards-2col .webino-services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 28px;
  max-width: 1100px; margin: 0 auto;
}

.webino-services__card {
  position: relative;
  padding: 36px 28px 32px;
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: calc(var(--webino-radius) * 2);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s;
  overflow: hidden;
  counter-increment: service-num;
}
/* Bande accent en haut (decoratif) */
.webino-services__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  background: var(--webino-accent);
  border-radius: 0 0 3px 0;
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.webino-services__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--webino-accent) 40%, var(--vs-line));
  box-shadow:
    0 20px 40px -16px rgba(15,23,42,0.14),
    0 4px 12px -4px rgba(15,23,42,0.08);
}
.webino-services__card:hover::before { width: 100%; }
.webino-services__grid { counter-reset: service-num; }
.webino-services__card-num {
  display: inline-block;
  font-family: var(--webino-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--webino-accent);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.webino-services__card-num::before { content: counter(service-num, decimal-leading-zero) ' /'; }
.webino-services__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.webino-services__card-body {
  font-size: 0.9375rem;
  color: var(--vs-muted);
  line-height: 1.65;
}

@media (max-width: 880px) {
  .webino-services--cards-3col .webino-services__grid,
  .webino-services--cards-2col .webino-services__grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* BLOCK : REVIEWS — titre + header (cartes rendues via templates .html) */
/* ============================================================ */
.webino-reviews__title {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
}
.webino-reviews__header { text-align: center; max-width: 640px; margin: 0 auto 56px; }

/* ============================================================ */
/* BLOCK : CONTACT — form premium avec icones colorees           */
/* ============================================================ */
/* La SECTION reste full-width (comme les autres blocks) ; le contenu est centre
   via __inner (variants .html) ou via le grid two-col ci-dessous (fallback PHP). */
.webino-contact--two-col {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start;
  max-width: var(--webino-content-width); margin: 0 auto;
}
/* Anti-blowout grid/flex : les colonnes (qui contiennent la carte Maps) doivent
   pouvoir se compresser sous leur contenu intrinseque, sinon debordement (mobile). */
.webino-contact__inner > * { min-width: 0; }
.webino-contact__map, .webino-contact__map :is(iframe, img) { max-width: 100%; }
.webino-contact__title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-weight: 800;
}
.webino-contact__intro {
  font-size: 1.0625rem;
  color: var(--vs-muted);
  margin-bottom: 32px;
  line-height: 1.65;
}
.webino-contact__details { display: flex; flex-direction: column; gap: 18px; }
.webino-contact__detail {
  display: flex; align-items: center; gap: 14px;
  font-size: 1rem;
  color: var(--vs-ink);
}
.webino-contact__detail-icon {
  width: 40px; height: 40px;
  border-radius: calc(var(--webino-radius) * 1.25);
  background: color-mix(in srgb, var(--webino-accent) 12%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--webino-accent);
  flex-shrink: 0;
}
.webino-contact__detail svg {
  color: var(--webino-accent);
  flex-shrink: 0;
}
.webino-contact__details a {
  color: var(--vs-ink);
  font-weight: 500;
  transition: color 0.15s;
}
.webino-contact__details a:hover { color: var(--webino-accent); }

.webino-contact__form {
  padding: 36px;
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: calc(var(--webino-radius) * 2.25);
  box-shadow:
    0 20px 50px -20px rgba(15,23,42,0.10),
    0 4px 12px -4px rgba(15,23,42,0.06);
}
.webino-contact__field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.webino-contact__field label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--vs-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.webino-contact__field input,
.webino-contact__field textarea {
  padding: 14px 16px;
  border: 1px solid var(--vs-line);
  border-radius: calc(var(--webino-radius) * 1.25);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--vs-ink);
  background: var(--vs-paper);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.webino-contact__field input:focus,
.webino-contact__field textarea:focus {
  outline: none;
  border-color: var(--webino-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--webino-accent) 18%, transparent);
}
.webino-contact__field textarea { min-height: 140px; resize: vertical; }
.webino-contact__form .webino-btn--accent {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  margin-top: 6px;
}

/* Carte Google Maps (remplace le formulaire) */
.webino-contact__map {
  width: 100%;
  min-height: 380px;
  border-radius: calc(var(--webino-radius) * 2.25);
  overflow: hidden;
  border: 1px solid var(--vs-line);
  box-shadow:
    0 20px 50px -20px rgba(15,23,42,0.10),
    0 4px 12px -4px rgba(15,23,42,0.06);
}
.webino-contact__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.webino-contact__map--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--vs-paper); color: var(--vs-muted);
  font-size: 0.9375rem; text-align: center; padding: 24px;
}

@media (max-width: 880px) {
  .webino-contact--two-col { grid-template-columns: 1fr; gap: 40px; }
  .webino-contact__map, .webino-contact__map iframe { min-height: 300px; }
}

/* ============================================================ */
/* BLOCK : CTA — design premium avec ombres et accents           */
/* ============================================================ */
.webino-cta { padding: 96px 24px; }

.webino-cta--banner-fullwidth {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--webino-accent) 6%, var(--vs-paper)),
    color-mix(in srgb, var(--webino-accent) 12%, var(--vs-paper))
  );
  border: 1px solid color-mix(in srgb, var(--webino-accent) 18%, transparent);
  border-radius: calc(var(--webino-radius) * 3);
  max-width: var(--webino-content-width);
  margin: 0 auto;
  padding: 80px 32px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(15,23,42,0.10);
}
/* Halo decoratif radial */
.webino-cta--banner-fullwidth::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, color-mix(in srgb, var(--webino-accent) 22%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.webino-cta--banner-fullwidth::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, color-mix(in srgb, var(--webino-accent) 14%, transparent) 0%, transparent 60%);
  pointer-events: none;
}
.webino-cta--banner-fullwidth > * { position: relative; z-index: 1; }

.webino-cta__title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 16px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.webino-cta__sub {
  font-size: 1.1875rem;
  color: var(--vs-muted);
  margin-bottom: 36px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.webino-cta__title em, .webino-cta__title i {
  font-style: italic; color: var(--webino-accent); font-weight: 600;
}
.webino-cta--banner-fullwidth .webino-btn--accent {
  padding: 16px 36px;
  font-size: 1.0625rem;
  box-shadow: 0 4px 18px -4px color-mix(in srgb, var(--webino-accent) 50%, transparent),
              0 12px 32px -8px color-mix(in srgb, var(--webino-accent) 30%, transparent);
}
.webino-cta--banner-fullwidth .webino-btn--accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px -4px color-mix(in srgb, var(--webino-accent) 60%, transparent),
              0 18px 40px -8px color-mix(in srgb, var(--webino-accent) 40%, transparent);
}

.webino-cta--inline-section {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  max-width: var(--webino-content-width);
  margin: 0 auto;
  padding: 0 24px;
}
.webino-cta--inline-section .webino-cta__title { margin: 0 0 8px; text-align: left; max-width: none; }
.webino-cta--inline-section .webino-cta__sub { margin: 0; text-align: left; max-width: none; font-size: 1.0625rem; }

@media (max-width: 720px) {
  .webino-cta--banner-fullwidth { padding: 56px 20px; border-radius: calc(var(--webino-radius) * 2.25); }
  .webino-cta--inline-section { grid-template-columns: 1fr; text-align: center; }
  .webino-cta--inline-section .webino-cta__title,
  .webino-cta--inline-section .webino-cta__sub { text-align: center; }
}

/* ============================================================ */
/* PLACEHOLDERS EDITEUR                                         */
/* ============================================================ */
.webino-v2-placeholder {
  color: var(--vs-muted);
  font-style: italic;
  opacity: 0.7;
}
.webino-v2-image-placeholder {
  width: 100%; height: 100%;
  min-height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  color: var(--vs-muted);
  background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
  font-size: 13px;
  cursor: pointer;
  border-radius: var(--webino-radius);
}

/* ============================================================ */
/* HERO — variants additionnels                                */
/* ============================================================ */

/* Variant : minimal-centered (sans image, texte centre) */
.webino-hero--minimal-centered {
  text-align: center;
  padding-top: 140px;
  padding-bottom: 100px;
}
.webino-hero--minimal-centered .webino-hero__inner {
  max-width: 820px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.webino-hero--minimal-centered .webino-hero__content {
  align-items: center;
  display: flex; flex-direction: column; gap: 24px;
}
.webino-hero--minimal-centered .webino-hero__title {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
}
.webino-hero--minimal-centered .webino-hero__subtitle {
  max-width: 620px;
  font-size: 1.2rem;
}
.webino-hero--minimal-centered .webino-btn { align-self: center; }

/* Variant : full-bleed-image (image plein ecran + overlay) */
.webino-hero--full-bleed-image {
  position: relative;
  min-height: 100vh;
  padding: 140px 24px 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-color: var(--vs-ink);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
/* Couche image dediee (sur-dimensionnee) : porte la photo de fond et recoit le
   parallax GSAP (data-webino-fx="parallax"). Sur-taille top:-10%/height:120% pour
   que le decalage vertical ne revele jamais ses bords. Sans GSAP -> immobile,
   couvre la section a l'identique. */
.webino-hero--full-bleed-image .webino-hero__bg {
  position: absolute; top: -10%; left: 0; right: 0; height: 120%;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: 0;
  will-change: transform;
}
.webino-hero--full-bleed-image .webino-hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.65));
  pointer-events: none;
}
.webino-hero--full-bleed-image .webino-hero__content {
  position: relative; z-index: 2;
  max-width: 820px;
  display: flex; flex-direction: column; gap: 22px;
  align-items: center;
  text-align: center;
}
.webino-hero--full-bleed-image .webino-hero__title {
  color: #fff;
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
}
.webino-hero--full-bleed-image .webino-hero__subtitle {
  color: rgba(255,255,255,0.92);
  font-size: 1.2rem;
  max-width: 620px;
}
/* Bouton centre (le contenu est centre) — override du align-self:flex-start global. */
.webino-hero--full-bleed-image .webino-hero__content .webino-btn { align-self: center; }

/* Variant : split-text-right (miroir : photo a gauche) */
.webino-hero--split-text-right { padding: 120px 24px 88px; }
.webino-hero--split-text-right .webino-hero__inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
  max-width: var(--webino-content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.webino-hero--split-text-right .webino-hero__media { order: 1; }
.webino-hero--split-text-right .webino-hero__content { order: 2; }
@media (max-width: 880px) {
  .webino-hero--split-text-right { padding: 96px 20px 56px; }
  .webino-hero--split-text-right .webino-hero__inner { grid-template-columns: 1fr; }
  .webino-hero--split-text-right .webino-hero__media { order: 2; aspect-ratio: 4/3; max-height: 380px; }
  .webino-hero--split-text-right .webino-hero__content { order: 1; }
}

/* ============================================================ */
/* ABOUT — variants additionnels                               */
/* ============================================================ */

.webino-about--three-cards .webino-about__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.webino-about__cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  max-width: var(--webino-content-width); margin: 0 auto;
}
.webino-about__card {
  position: relative;
  padding: 32px 28px;
  background: color-mix(in srgb, var(--vs-paper) 90%, var(--vs-ink) 4%);
  border: 1px solid var(--vs-line);
  border-radius: calc(var(--webino-radius) * 1.75);
}
.webino-about__card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--webino-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.webino-about__card-title { font-size: 1.1875rem; font-weight: 700; margin-bottom: 10px; }
.webino-about__card-body { font-size: 0.9375rem; color: var(--vs-muted); line-height: 1.6; }

@media (max-width: 880px) {
  .webino-about__cards-grid { grid-template-columns: 1fr; }
}

/* Variant : photo-left (miroir de two-col) */
.webino-about--photo-left { direction: rtl; }
.webino-about--photo-left > * { direction: ltr; }
/* Alternative cleaner sans rtl trick : grid-template-columns inverse */
.webino-about--photo-left {
  direction: ltr;
  display: grid;
  grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
  max-width: var(--webino-content-width); margin: 0 auto;
}
.webino-about--photo-left .webino-about__content { order: 2; }
.webino-about--photo-left .webino-about__media { order: 1; }
@media (max-width: 880px) {
  .webino-about--photo-left { grid-template-columns: 1fr; }
  .webino-about--photo-left .webino-about__media { order: 2; }
  .webino-about--photo-left .webino-about__content { order: 1; }
}

/* ============================================================ */
/* SERVICES — variants additionnels                            */
/* ============================================================ */

/* Variant : cards-with-bg (cartes avec fond accent soft) */
.webino-services--cards-with-bg .webino-services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
  max-width: var(--webino-content-width); margin: 0 auto;
}
.webino-services--cards-with-bg .webino-services__card {
  background: color-mix(in srgb, var(--webino-accent) 8%, var(--vs-paper));
  border-color: color-mix(in srgb, var(--webino-accent) 18%, transparent);
}
.webino-services--cards-with-bg .webino-services__card:hover {
  background: color-mix(in srgb, var(--webino-accent) 14%, var(--vs-paper));
  border-color: color-mix(in srgb, var(--webino-accent) 35%, transparent);
}
@media (max-width: 880px) {
  .webino-services--cards-with-bg .webino-services__grid { grid-template-columns: 1fr; }
}


/* ============================================================ */
/* CTA — variants additionnels                                 */
/* ============================================================ */

/* Variant : gradient-banner — FULL-BLEED (le degrade prend toute la largeur,
   le contenu reste centre via la max-width des titres/sous-titres). */
.webino-cta--gradient-banner {
  text-align: center;
  background: linear-gradient(135deg, var(--webino-accent), color-mix(in srgb, var(--webino-accent) 50%, var(--vs-ink)));
  color: #fff;
  padding: 96px 32px;
  position: relative;
  overflow: hidden;
}
.webino-cta--gradient-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 70% 20%, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
.webino-cta--gradient-banner .webino-cta__title,
.webino-cta--gradient-banner .webino-cta__sub { color: #fff; position: relative; z-index: 1; }
.webino-cta--gradient-banner .webino-cta__title {
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.webino-cta--gradient-banner .webino-cta__sub { color: rgba(255,255,255,0.92); }
.webino-cta--gradient-banner .webino-btn--accent {
  background: #fff;
  color: var(--vs-ink);
  position: relative; z-index: 1;
}
.webino-cta--gradient-banner .webino-btn--accent:hover { background: rgba(255,255,255,0.92); }

/* Variant : split-card (text gauche + zone image droite) */
.webino-cta--split-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: var(--webino-content-width);
  margin: 0 auto;
  background: var(--vs-paper);
  border: 1px solid var(--vs-line);
  border-radius: calc(var(--webino-radius) * 2.25);
  overflow: hidden;
  text-align: left;
}
.webino-cta--split-card .webino-cta__title,
.webino-cta--split-card .webino-cta__sub {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.webino-cta--split-card > div:first-of-type {
  padding: 56px 48px;
  display: flex; flex-direction: column; gap: 18px;
  align-items: flex-start;
}
.webino-cta--split-card::after {
  content: '';
  background: linear-gradient(135deg, color-mix(in srgb, var(--webino-accent) 15%, transparent), color-mix(in srgb, var(--webino-accent) 4%, transparent));
  min-height: 280px;
}
@media (max-width: 720px) {
  .webino-cta--split-card { grid-template-columns: 1fr; }
  .webino-cta--split-card::after { min-height: 160px; }
}

/* ============================================================ */
/* BLOCK ERROR (mode editeur uniquement)                       */
/* ============================================================ */
.webino-v2-block-error {
  padding: 20px;
  margin: 20px;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: var(--webino-radius);
  color: #991B1B;
  font-family: ui-monospace, monospace;
  font-size: 13px;
}

/* ── Équipe : placeholder SILHOUETTE quand le membre n'a ni photo ni initiales.
   L'avatar (.webino-equipe__avatar) est rendu par tous les variants quand
   items.$.image est absent ; vide (pas d'initiales) -> on affiche une silhouette
   de personne (mask + currentColor, donc s'adapte à la couleur de chaque variant). */
.webino-equipe__avatar:empty::after {
  content: "";
  display: block;
  width: 54%;
  height: 54%;
  background: currentColor;
  opacity: 0.4;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012.5a4.25%204.25%200%201%200%200-8.5%204.25%204.25%200%200%200%200%208.5Zm0%201.75c-4.7%200-8.25%202.36-8.25%205.5V21h16.5v-1.25c0-3.14-3.55-5.5-8.25-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012.5a4.25%204.25%200%201%200%200-8.5%204.25%204.25%200%200%200%200%208.5Zm0%201.75c-4.7%200-8.25%202.36-8.25%205.5V21h16.5v-1.25c0-3.14-3.55-5.5-8.25-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}