/* Styles globaux du site — desktop d'abord, puis correctifs tablette et mobile.
   Règles de marge du projet (voir CLAUDE.md) : 48px haut/bas par section,
   32px sur les 4 côtés des blocs flottants — gérées dans Section (wb-chrome.jsx). */
body { margin: 0; background: var(--surface-page); overflow-x: hidden; }
img { max-width: 100%; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-800); }

.wb-h1 { font-size: clamp(34px, 6.4vw, 84px); line-height: 1.03; letter-spacing: -.032em; }
.wb-h1-sm { font-size: clamp(29px, 4.8vw, 56px); line-height: 1.08; letter-spacing: -.03em; }
.wb-h2 { font-size: clamp(25px, 3.4vw, 38px); line-height: 1.12; letter-spacing: -.028em; }

.wb-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-9); align-items: center; }
.wb-2e { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: end; }
.wb-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.wb-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-grid); }
.wb-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); }
.wb-form { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-6); align-items: start; }
.wb-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.wb-objectif { display: flex; gap: var(--space-7); align-items: center; flex-wrap: wrap; }
.wb-2 > *, .wb-2e > *, .wb-3 > *, .wb-4 > *, .wb-cards-2 > *, .wb-form > *, .wb-row > * { min-width: 0; }
/* Cartes cliquables dans une grille : le lien et la carte qu'il contient
   remplissent toute la hauteur de leur cellule, pour que les cartes d'une
   même rangée soient toujours de même taille quelle que soit la longueur
   du texte. */
.wb-card-link { display: flex; height: 100%; }
.wb-card-link > * { flex: 1; width: 100%; }
.wb-break { overflow-wrap: anywhere; }
.wb-mob { display: none; }
.wb-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) var(--space-7); padding: 0 var(--gutter); }
.wb-tabs::-webkit-scrollbar { display: none; }
.wb-photo { border-radius: var(--radius-media); overflow: hidden; background: var(--sand-150); }
.wb-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); display: block; }

/* ===== Tablette large (menu compact dès 1160px) ===== */
@media (max-width: 1160px) {
  .wb-desk { display: none !important; }
  .wb-mob { display: flex; }
}

/* ===== Tablette large : grilles à 2 colonnes ===== */
@media (max-width: 1080px) {
  .wb-4 { grid-template-columns: repeat(2, 1fr); }
  .wb-2 { gap: var(--space-7); }
  .wb-2e { gap: var(--space-7); }
}

/* ===== Tablette : tout repasse en 1 colonne, sticky redevient statique ===== */
@media (max-width: 900px) {
  .wb-2, .wb-2e, .wb-3, .wb-form, .wb-row, .wb-cards-2 { grid-template-columns: 1fr !important; gap: var(--space-7); }
  .wb-steps-h { grid-template-columns: 1fr !important; }
  .wb-sticky { position: static !important; top: auto !important; }
  .wb-head { flex-direction: column !important; align-items: flex-start !important; gap: var(--space-5) !important; }
  .wb-foot { grid-template-columns: 1fr 1fr !important; gap: var(--space-7) !important; }
  .wb-footbar { flex-direction: column; gap: 6px !important; }
  /* Sur tablette, l'illustration de hero passe après le texte et se réduit :
     le texte (l'essentiel) reste prioritaire dans l'ordre de lecture. */
  .wb-2 .wb-hero-art, .wb-2e .wb-hero-art { order: 2; max-width: 260px; margin: 0 auto; }
}
@media (max-width: 860px) { .wb-objectif { flex-direction: column; align-items: flex-start; gap: var(--space-5); } }
@media (max-width: 760px) { .wb-post { grid-template-columns: 1fr !important; } }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  :root { --gutter: 18px; --gap-grid: 16px; }
  .wb-4, .wb-3, .wb-row { grid-template-columns: 1fr !important; }
  .wb-block { padding: 20px !important; border-radius: var(--radius-2xl) !important; }
  .wb-inset { padding: 48px var(--gutter) !important; }
  .wb-foot { grid-template-columns: 1fr !important; gap: var(--space-6) !important; }
  .wb-head { margin-bottom: var(--space-6) !important; }
  .wb-2, .wb-2e, .wb-form { gap: var(--space-6); }
  [class*="wb-"] img { height: auto; }
  /* Un bouton d'appel à l'action seul (pas un groupe de plusieurs boutons)
     remplit toute la largeur de son bloc sur mobile plutôt que de rester
     collé à gauche à sa taille de contenu. */
  .wb-cta-solo { display: flex !important; width: 100% !important; }
  /* Décision produit : sur mobile, priorité au texte et aux CTA — les
     illustrations de scène décoratives et les cartes secondaires (ex. « Ce
     qu'on ne fait pas ») s'effacent pour alléger la page et le poids réseau. */
  .wb-hero-art, .wb-secondary-card { display: none !important; }
  .wb-tabs { -webkit-overflow-scrolling: touch; }
}

/* ===== Bandeau de consentement cookies ===== */
.wb-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: var(--surface-page-alt, #fff); border-top: 1px solid var(--border-subtle, #e4ded2);
  box-shadow: 0 -8px 30px rgba(20, 25, 35, .12);
  padding: 20px var(--gutter, 24px); box-sizing: border-box;
}
.wb-cookie[hidden] { display: none !important; }
.wb-cookie-panel[hidden] { display: none !important; }
.wb-cookie-inner { max-width: var(--container-max, 1240px); margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.wb-cookie-text { flex: 1 1 380px; min-width: 0; }
.wb-cookie-text p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; color: var(--text-body, #2b2f36); }
.wb-cookie-text a { color: var(--navy-700, #1f3a5f); font-weight: 600; }
.wb-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; flex: 0 0 auto; }
.wb-cookie-btn {
  font-family: var(--font-display, inherit); font-size: 14px; font-weight: 700; letter-spacing: -.005em;
  border-radius: var(--radius-control, 10px); height: 42px; padding: 0 18px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.wb-cookie-btn--accent { background: var(--solar-500, #f2a900); color: #1c1300; }
.wb-cookie-btn--ghost { background: transparent; color: var(--text-body, #2b2f36); border-color: var(--border-subtle, #d8d2c4); }
.wb-cookie-btn--text { background: transparent; color: var(--navy-700, #1f3a5f); border: none; text-decoration: underline; height: auto; padding: 0; }
.wb-cookie-panel { max-width: var(--container-max, 1240px); margin: 14px auto 0; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border-subtle, #e4ded2); padding-top: 14px; }
.wb-cookie-cat { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.wb-cookie-cat p { margin: 2px 0 0; font-size: 13px; color: var(--text-muted, #6b7280); line-height: 1.5; max-width: 620px; }
.wb-cookie-cat strong { font-size: 14px; color: var(--text-strong, #1c2027); }
.wb-cookie-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.wb-cookie-switch input { opacity: 0; width: 0; height: 0; }
.wb-cookie-switch span { position: absolute; inset: 0; background: #cfc9ba; border-radius: 999px; transition: background .15s; }
.wb-cookie-switch span::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.wb-cookie-switch input:checked + span { background: var(--solar-500, #f2a900); }
.wb-cookie-switch input:checked + span::before { transform: translateX(18px); }
.wb-cookie-switch input:disabled + span { opacity: .55; }
@media (max-width: 640px) {
  .wb-cookie-inner { flex-direction: column; }
  .wb-cookie-actions { width: 100%; }
  .wb-cookie-btn { flex: 1 1 auto; }
}