/* ============================================================
   Think Twice — Base CSS V2
   Generated: Task 2 — tokens + frame + boutons + animations + responsive
   ============================================================ */

/* ============================================================
   1. COLOR TOKENS (verbatim from _ds/.../tokens/colors.css)
   ============================================================ */
/* ============================================================
   Thinktwice — Color tokens
   ------------------------------------------------------------
   The brand runs on a purple → orange spectrum. Purple and
   orange are BOTH "primaire" in the brand sheet; cream is the
   neutral ground and gold is the tertiary accent (also the
   primary-button hover state).
   ============================================================ */
:root {
  /* ---- Brand palette (raw) ---- */
  --tw-purple: #800080;   /* PRIMAIRE  */
  --tw-orange: #f04e19;   /* PRIMAIRE  */
  --tw-cream:  #ecdbca;   /* NEUTRE    */
  --tw-gold:   #ae9524;   /* TERTIAIRE */

  --tw-black:  #000000;
  --tw-white:  #ffffff;

  /* ---- Gradient stops (logo spectrum, purple → orange) ---- */
  --tw-grad-0: #7b217e;
  --tw-grad-1: #90296c;
  --tw-grad-2: #b6394b;
  --tw-grad-3: #d24533;
  --tw-grad-4: #e34c25;
  --tw-grad-5: #e94f20;

  /* The signature brand gradient */
  --tw-gradient: linear-gradient(
    90deg,
    var(--tw-grad-0) 0%,
    var(--tw-grad-1) 13%,
    var(--tw-grad-2) 39%,
    var(--tw-grad-3) 63%,
    var(--tw-grad-4) 84%,
    var(--tw-grad-5) 100%
  );
  /* Diagonal variant for hero/large fills */
  --tw-gradient-diagonal: linear-gradient(
    135deg,
    var(--tw-grad-0) 0%,
    var(--tw-grad-2) 45%,
    var(--tw-grad-4) 78%,
    var(--tw-grad-5) 100%
  );

  /* ---- Neutral ramp (warm-tinted greys, from the sheet's caption grey) ---- */
  --tw-grey-100: #f7f4f0;
  --tw-grey-200: #ecdbca;  /* == cream */
  --tw-grey-300: #d6cdc3;
  --tw-grey-400: #bfbfbf;  /* caption / label grey from the brand sheet */
  --tw-grey-500: #8c8c8c;
  --tw-grey-600: #595959;
  --tw-grey-700: #333333;
  --tw-grey-900: #111111;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */
  --color-bg:            var(--tw-white);
  --color-bg-warm:       var(--tw-cream);
  --color-surface:       var(--tw-white);
  --color-surface-warm:  var(--tw-grey-100);

  --color-text:          var(--tw-black);
  --color-text-muted:    var(--tw-grey-600);
  --color-text-faint:    var(--tw-grey-400);
  --color-text-invert:   var(--tw-white);

  --color-primary:       var(--tw-orange);
  --color-primary-hover: var(--tw-gold);
  --color-accent:        var(--tw-purple);
  --color-accent-soft:   color-mix(in srgb, var(--tw-purple) 8%, var(--tw-white));
  --color-tertiary:      var(--tw-gold);

  --color-border:        var(--tw-grey-300);
  --color-border-strong: var(--tw-black);
  --color-focus:         var(--tw-purple);

  --color-on-primary:    var(--tw-white);
  --color-on-accent:     var(--tw-white);
}

/* ============================================================
   2. TYPOGRAPHY TOKENS (verbatim from _ds/.../tokens/typography.css)
   ============================================================ */
/* ============================================================
   Thinktwice — Typography tokens
   ------------------------------------------------------------
   H1 .............. Big John PRO Bold 50px
   H2 .............. Raleway ExtraBold 40px
   H3 .............. Raleway ExtraBold 28px
   Subtitle ........ Raleway Medium 20px
   Paragraph ....... Raleway Light 16px
   Caption ......... Raleway Light 14px
   Button .......... Raleway ExtraBold 16px (uppercase)
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Big John PRO", "Raleway", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-text:    "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Weights ---- */
  --fw-light:      300; /* @kind font */
  --fw-regular:    400; /* @kind font */
  --fw-medium:     500; /* @kind font */
  --fw-semibold:   600; /* @kind font */
  --fw-bold:       700; /* @kind font */
  --fw-extrabold:  800; /* @kind font */
  --fw-black:      900; /* @kind font */

  /* ---- Type scale (px) ---- */
  --fs-h1:        50px;
  --fs-h2:        40px;
  --fs-h3:        28px;
  --fs-subtitle:  20px;
  --fs-body:      16px;
  --fs-caption:   14px;
  --fs-button:    16px;
  --fs-overline:  13px;

  /* ---- Line heights ---- */
  --lh-tight:     1.05; /* @kind font */
  --lh-snug:      1.2; /* @kind font */
  --lh-normal:    1.5; /* @kind font */
  --lh-relaxed:   1.65; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display:   0.01em;   /* @kind font */
  --ls-tight:     -0.01em; /* @kind font */
  --ls-normal:    0; /* @kind font */
  --ls-button:    0.04em; /* @kind font */
  --ls-overline:  0.16em;   /* @kind font */
}

/* ============================================================
   Optional ready-made type classes (use the tokens directly
   in components; these are convenience specimens)
   ============================================================ */
.tw-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-text);
}
.tw-h2 {
  font-family: var(--font-text);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-text);
}
.tw-h3 {
  font-family: var(--font-text);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--color-text);
}
.tw-subtitle {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-subtitle);
  line-height: var(--lh-normal);
  color: var(--color-text);
}
.tw-body {
  font-family: var(--font-text);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}
.tw-caption {
  font-family: var(--font-text);
  font-weight: var(--fw-light);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}
.tw-overline {
  font-family: var(--font-text);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--color-text-faint);
}

/* ============================================================
   3. SPACING TOKENS (verbatim from _ds/.../tokens/spacing.css)
   ============================================================ */
/* ============================================================
   Thinktwice — Spacing, radius, shadow, motion tokens
   ------------------------------------------------------------
   8px base grid. Buttons use a fully-rounded (pill) radius —
   the defining shape of the brand's interactive elements.
   ============================================================ */
:root {
  /* ---- Spacing scale (8px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 100px;   /* buttons, chips, tags */
  --radius-full: 9999px;

  /* ---- Border widths ---- */
  --border-1: 1px;
  --border-2: 2px;

  /* ---- Shadows (soft, warm-neutral — used sparingly) ---- */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 6px 18px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 18px 48px rgba(17, 17, 17, 0.12);
  --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--tw-purple) 35%, transparent);

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind other */
  --container-pad: var(--space-5); /* @kind spacing */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */
}

/* ============================================================
   4. LOCAL OVERRIDES — page frame color + block radii
   (placed after spacing tokens so they win over token defaults)
   ============================================================ */
:root {
  --tw-frame: #18091a;   /* deep plum page-frame */
  --radius-md: 8px;      /* override from proto: 8px block radii */
  --radius-lg: 8px;      /* override from proto: 8px block radii */
}

/* ============================================================
   5. GLOBAL STYLES — ported from Think Twice - Home.html <style>
   ============================================================ */
* { box-sizing: border-box; }

.tw-ghost-btn, .tw-ghost-btn:hover {
  background: transparent !important;
  background-image: none !important;
  border-width: 1px !important;
  border-style: solid !important;
  border-color: rgba(255,255,255,0.5) !important;
  color: var(--tw-white) !important;
  font-weight: 300 !important;
}
.tw-ghost-btn:hover { border-color: rgba(255,255,255,0.85) !important; }

.tw-sigle-watermark svg path { fill: rgb(226, 205, 174) !important; }

html { scroll-behavior: smooth; }
html, body { margin: 0; }

body { font-family: var(--font-text); color: var(--color-text); background: var(--tw-frame); }
a { -webkit-tap-highlight-color: transparent; }

/* ---- Page frame ---- */
.tw-frame { padding: 0; background: var(--tw-frame); }
.tw-page {
  background: var(--tw-white);
  border-radius: 0;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.04);
}
/* Header background bleeds full-width; its content stays within the 1200px zone */
.tw-page > header {
  padding-left: max(clamp(20px, 3.5vw, 48px), calc((100% - 1200px) / 2)) !important;
  padding-right: max(clamp(20px, 3.5vw, 48px), calc((100% - 1200px) / 2)) !important;
}

/* Gradient buttons — clean violet→orange, no colour bleeding past the pill */
.tw-grad-btn {
  background: linear-gradient(90deg, var(--tw-purple) 0%, var(--tw-orange) 100%) !important;
  border-color: transparent !important;
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;
}
/* Secondary buttons — 50% opacity purple outline */
.tw-sec-btn { border-color: color-mix(in srgb, var(--tw-purple) 50%, transparent) !important; }
/* Gradient text fill — used in blog.php and catalogue.php titles */
.tw-grad-text{background:var(--tw-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Button & link text in sentence case (capital first letter) */
.tw-frame a,
.tw-frame button,
.tw-frame a span,
.tw-frame button span { text-transform: none !important; }

/* Nav links — gradient text fill + wipe-in gradient underline on hover */
.tw-navlink {
  position: relative;
  opacity: 1 !important;
  padding-bottom: 4px;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.tw-navlink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--tw-purple) 0%, var(--tw-orange) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms var(--ease-out);
}
.tw-navlink:hover { opacity: 1 !important; }
.tw-navlink:hover::after { transform: scaleX(1); }

/* Contact form fields — 4px radius, 1px hairline border */
#contact form input,
#contact form textarea {
  border-radius: 4px !important;
  border-width: 1px !important;
}

/* Champs de formulaire : iOS Safari n.etire PAS les <input> pour remplir une
   cellule grid/flex (contrairement a Chrome) -> ils gardent leur largeur
   intrinseque et debordent de la carte. On force width:100% partout. */
.tw-frame input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.tw-frame textarea,
.tw-frame select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }

/* ============================================================
   Animation system — sober, fast (≤600ms unless noted), ease-out.
   Full motion by default; softened (fade-only) under reduced-motion.
   ============================================================ */

/* ---- Sections on scroll: fade-in + 48px rise, 650ms ease-out, once ---- */
.reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 650ms var(--ease-out),
              transform 650ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Hero entrance (on page load) ---- */
/* Title / subtitle / CTA: fade-in + 28px rise, 600ms ease-out */
@keyframes twHeroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
/* Visual: fade-in + zoom 1.08 → 1, 800ms ease-out */
@keyframes twHeroImgIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
.tw-hero-anim     { opacity: 0; animation: twHeroIn 600ms var(--ease-out) both; }
.tw-hero-anim-img { opacity: 0; animation: twHeroImgIn 800ms var(--ease-out) both; }
/* Accroche hero formations : le champ WYSIWYG enveloppe le texte dans un <p> ; neutralise ses marges par defaut (le style vit sur le .tw-form-hero-accroche parent). */
.tw-form-hero-accroche > p { margin: 0; }

/* ---- Buttons (pills): hover lift 2px + deeper shadow, 200ms ----
   active: scale 0.97 for 100ms (tactile feedback) ---- */
.tw-btn-anim {
  transition: background-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              transform 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out) !important;
}
.tw-btn-anim:hover  { transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
.tw-btn-anim:active { transform: translateY(0) scale(0.97) !important; transition-duration: 100ms !important; }

/* ---- Cards: hover lift 4px + accentuated shadow, 250ms ---- */
.tw-anim-card {
  transition: transform 250ms var(--ease-out),
              box-shadow 250ms var(--ease-out) !important;
}
.tw-anim-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }

/* ---- Reduced motion: keep clear (but tamer) movement so effects stay visible ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: translateY(32px);
    transition: opacity 550ms ease, transform 550ms ease;
  }
  @keyframes twHeroIn    { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes twHeroImgIn { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
  .tw-hero-anim, .tw-hero-anim-img { animation-duration: 550ms; }
  .tw-btn-anim:hover  { transform: translateY(-2px) !important; }
  .tw-anim-card:hover { transform: translateY(-4px) !important; }
}

/* ============================================================
   6. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Hero : sur vrai desktop (>=1200px = largeur du conteneur), pas de padding
   horizontal (conforme au proto Hero.jsx = "80px 0px 30px"). La marge auto du
   conteneur 1200 fait deja la gouttiere -> le titre s'aligne avec le header.
   En dessous de 1200, on garde le clamp inline pour ne pas coller au bord. */
@media (min-width: 1200px) {
  .tw-hero-content { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Hero : le layout desktop 2 colonnes (photo absolue a droite) casse sous ~1000px
   (le texte passe SOUS la photo) -> on empile texte puis photo jusqu'a 1000px. */
@media (max-width: 1000px) {
  html, body { overflow-x: hidden; }
  #top { max-width: 100vw; overflow-x: hidden; }
  .tw-hero-row { flex-direction: column !important; width: 100% !important; max-width: 100% !important; }
  .tw-hero-media { position: static !important; inset: auto !important; width: 100% !important; max-width: 480px; }
  .tw-hero-media img { height: auto !important; aspect-ratio: 3 / 2; }
  .tw-hero-photo { display: none !important; }
  /* box-sizing + cap largeur : garder padding+gouttiere DANS l'ecran (le content
     debordait a droite sinon) */
  .tw-hero-content { max-width: 100% !important; box-sizing: border-box !important; padding-left: 18px !important; padding-right: 18px !important; }
  .tw-hero-copy { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* CTA empiles pleine largeur (le .tw-btn est nowrap + flex-item -> deborde sinon) */
  .tw-hero-copy .tw-btn { flex: 1 1 100% !important; min-width: 0 !important; width: 100% !important; justify-content: center !important; white-space: normal !important; text-align: center; }
}
/* Petits ecrans : Big John PRO est TRES large -> reduire h1/sous-titre/CTA pour
   ne pas deborder la colonne (~340px sous 400px de large). */
@media (max-width: 600px) {
  .tw-hero-copy h1 { font-size: clamp(19px, 5.7vw, 26px) !important; line-height: 1.14 !important; overflow-wrap: break-word; }
  .tw-hero-copy > p { font-size: 15px !important; line-height: 1.35 !important; }
  .tw-hero-copy .tw-btn { font-size: 14px !important; padding-left: 20px !important; padding-right: 20px !important; }
}
/* Cartes formations (/formations/) : le layout inline est grid 2 colonnes
   (contenu | prix+boutons) SANS classe -> impossible a rendre responsive.
   On empile en 1 colonne + on aligne le bloc prix/CTA a gauche sous 760px. */
@media (max-width: 760px) {
  .tw-form-card { grid-template-columns: 1fr !important; align-items: stretch !important; }
  .tw-form-card > * { min-width: 0 !important; }
  .tw-form-card__aside { align-items: flex-start !important; }
  .tw-form-card__aside > div { justify-content: flex-start !important; }
}
/* Catalogue : la liste des modules (2 colonnes) deborde sur mobile (2e colonne
   coupee + scroll horizontal qui rogne le titre) -> 1 colonne sous 760px. */
@media (max-width: 760px) {
  .tw-mod-grid { grid-template-columns: 1fr !important; }
  /* Grilles 2 colonnes (cartes fondatrices + "Notre methode" de Notre approche,
     rangees fondateur photo+texte de "Notre equipe") -> 1 colonne */
  .tw-grid-2, .tw-method-grid, .tw-founder-row,
  .fin-aud-row, .fin-pec, .fin-abo,
  .ct-2col, .ct-grid-3 { grid-template-columns: 1fr !important; }
  /* CAUSE RACINE de l'overflow horizontal global : les .tw-btn sont white-space:nowrap
     -> un libelle long (ex "Decouvrir notre plateforme de e-learning") fait ~440px sur
     une ligne, elargit la page, pousse le burger hors ecran et rogne tous les textes.
     Sur mobile : autoriser le retour a la ligne + ne jamais depasser le conteneur. */
  .tw-btn { white-space: normal !important; max-width: 100% !important; text-align: center; }
}
/* Grid blowout : une piste `1fr` = minmax(auto,1fr), et `auto` = min-content ->
   un contenu large empeche la piste de retrecir et fait deborder toute la page a
   droite (gouttiere droite hors ecran). min-width:0 autorise la reduction. */
@media (max-width: 1000px) {
  .tw-2col > *, .tw-stats-split > *, [class*="tw-grid"] > *, .tw-steps > * { min-width: 0 !important; }
  /* Filet de securite : clippe tout debordement horizontal residuel (pas de scroll
     lateral). La vraie cause (boutons nowrap trop larges) est corrigee plus haut. */
  .tw-frame { overflow-x: clip; }
  /* Formulaires 2 colonnes (contact) -> 1 colonne sur mobile (sinon debordement) */
  .tw-form-grid, form[style*="grid-template-columns: 1fr 1fr"], form[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
/* Bouton burger : style de la maquette (Header.jsx) = 44x44 transparent,
   bordure 1px, radius pill, icone 18px (sinon = bouton par defaut du navigateur). */
.tw-mob-btn {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.tw-mob-btn:hover { background: var(--color-bg-warm); border-color: var(--color-text); }
@media (max-width: 640px) {
  .tw-tm-carousel .tw-tm-arrow { display: none !important; }
}
@media (max-width: 940px) {
  .tw-desk { display: none !important; }
  .tw-mob-btn { display: inline-flex !important; }
}
@media (max-width: 900px) {
  .tw-2col { grid-template-columns: 1fr !important; }
  .tw-stats-split { grid-template-columns: 1fr !important; }
  .tw-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .tw-grid-3 { grid-template-columns: 1fr !important; }
  .tw-steps { grid-template-columns: repeat(2, 1fr) !important; row-gap: 40px !important; }
  .tw-steps-line { display: none !important; }
  .tw-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tw-stat { border-left: none !important; padding-left: 0 !important; }
  .tw-stats-split > div { justify-content: stretch !important; }
  .tw-foot-cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  .tw-grid-4 { grid-template-columns: 1fr !important; }
  .tw-steps { grid-template-columns: 1fr !important; }
  .tw-stats-grid { grid-template-columns: 1fr !important; }
  .tw-foot-cols { grid-template-columns: 1fr !important; }
  .tw-nl-row { flex-direction: column !important; }
  .tw-nl-row button { width: 100% !important; }
}

/* ============================================================
   7. CUSTOMIZER OVERRIDES — 3 brand colours driven by Customizer
   (MUST remain last so tt_color_vars_css inline styles take effect)
   ============================================================ */
/* Override : 3 couleurs pilotées par le Customizer (inline via tt_color_vars_css) */
:root{
  --tw-purple: var(--tt-purple, #800080);
  --tw-orange: var(--tt-orange, #f04e19);
  --tw-gold:   var(--tt-gold,   #ae9524);
}

/* ============================================================
   8. HEADER BANDEAU — contact button hover + is-scrolled state
   ============================================================ */
/* Contact pill button — outline violet, hover: solid fill */
.tw-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-family: var(--font-text);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tw-purple);
  color: var(--tw-purple);
  background: transparent;
  transition: background var(--dur-base), color var(--dur-base);
  white-space: nowrap;
}
.tw-contact-btn:hover {
  background: var(--tw-purple);
  color: var(--tw-white);
}

/* Header scroll state — added by JS Task 14 */
#tw-header.is-scrolled {
  background: var(--tw-white) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ============================================================
   6. DS COMPONENTS — reproduction exacte du design system
   (Button / Card / Badge / Dropdown nav) — Fidelity Pass A
   ============================================================ */

/* ===== DS Button (reproduction exacte du design system) ===== */
.tw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 30px;font-family:var(--font-text);font-weight:var(--fw-extrabold);font-size:16px;line-height:1;letter-spacing:var(--ls-button);text-transform:uppercase;text-decoration:none;border-radius:var(--radius-pill);border:var(--border-2) solid transparent;cursor:pointer;white-space:nowrap;user-select:none;transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),filter var(--dur-base) var(--ease-standard);}
.tw-btn--sm{font-size:14px;padding:9px 22px;gap:8px;}
.tw-btn--lg{font-size:18px;padding:16px 40px;gap:12px;}
.tw-btn--full{display:flex;width:100%;}
.tw-btn--primary{background:var(--color-primary);color:var(--color-on-primary);border-color:var(--color-primary);}
.tw-btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);}
.tw-btn--secondary{background:transparent;color:var(--color-accent);border-color:var(--color-accent);}
.tw-btn--secondary:hover{background:var(--color-accent);color:var(--color-on-accent);transform:translateY(-1px);}
.tw-btn--link{background:transparent;color:var(--color-accent);border-color:transparent;padding:4px 6px;border-radius:var(--radius-sm);}
.tw-btn--link:hover{text-decoration:underline;transform:translateY(-1px);}
.tw-btn--gradient{background:var(--tw-gradient);background-origin:border-box;background-clip:border-box;color:var(--color-on-primary);border-color:transparent;}
.tw-btn--gradient:hover{filter:brightness(1.08);transform:translateY(-1px);}
.tw-btn:active{transform:translateY(0) scale(0.97);}
/* bouton blanc sur fond fonce (e-learning, financer) = primary inverse */
.tw-btn--white{background:var(--tw-white);color:var(--tw-purple);border-color:var(--tw-white);}
.tw-btn--white:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);transform:translateY(-1px);}

/* ghost btn (hero btn2) — lift au hover */
.tw-ghost-btn:hover{transform:translateY(-1px);}

/* ===== DS Card hoverable ===== */
.tw-card{position:relative;background:var(--color-surface);border:var(--border-1) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);}
.tw-card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}

/* ===== DS Badge (blog categories) ===== */
.tw-badge{display:inline-flex;align-items:center;font-family:var(--font-text);font-weight:var(--fw-extrabold);font-size:12px;padding:4px 12px;letter-spacing:0.08em;text-transform:uppercase;border-radius:var(--radius-pill);}
.tw-badge--sm{font-size:11px;padding:3px 9px;}
.tw-badge--purple{color:var(--tw-purple);background:color-mix(in srgb,var(--tw-purple) 12%,var(--tw-white));}
.tw-badge--orange{color:#a8330d;background:color-mix(in srgb,var(--tw-orange) 16%,var(--tw-white));}
.tw-badge--gold{color:#6e5d12;background:color-mix(in srgb,var(--tw-gold) 20%,var(--tw-white));}

/* ===== Dropdown nav (ouverture au hover, sans JS) + hover liens ===== */
.tw-nav-item{position:relative;}
.tw-nav-item .tw-dropdown{position:absolute;top:100%;left:-16px;min-width:250px;padding:14px 8px 8px;background:var(--tw-white);border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility var(--dur-base);z-index:60;}
.tw-nav-item:hover .tw-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.tw-nav-item:hover .tw-nav-chevron{transform:rotate(180deg);}
.tw-nav-chevron{transition:transform var(--dur-base);}
.tw-dropdown a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-sm);font-family:var(--font-text);font-weight:600;font-size:14px;color:var(--color-text);text-decoration:none;transition:background var(--dur-fast),color var(--dur-fast);}
.tw-dropdown a:hover{background:var(--color-accent-soft);color:var(--color-accent);}
.tw-dropdown a i{font-size:13px;width:16px;text-align:center;color:var(--color-primary);}

/* ===== Testimonials arrow hover ===== */
.tw-tm-arrow{transition:background var(--dur-base),color var(--dur-base);}
.tw-tm-arrow:hover{background:var(--tw-purple);color:var(--tw-white);}

/* gras = poids absolu 700 (le defaut UA bolder donne 400 dans un parent en 300) */
.tw-frame strong, .tw-frame b { font-weight: 700; }

.tw-badge { white-space: nowrap; flex-shrink: 0; }


/* ============================================================
   9. PAGE LÉGALE — tw-legal typography
   ============================================================ */
.tw-legal {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
}
.tw-legal p {
  margin: 0 0 16px;
}
.tw-legal h2 {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  margin: 36px 0 12px;
  text-transform: none;
  color: var(--color-text);
}
.tw-legal a {
  color: var(--color-accent);
  text-decoration: underline;
}
.tw-legal a:hover {
  color: var(--color-primary);
}

/* Blog filtres : styles via classes (le JS bascule .bl-filter--active) */
.bl-filter{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;font-family:var(--font-text);font-weight:700;font-size:14px;border-radius:var(--radius-pill);white-space:nowrap;cursor:pointer;border:1.5px solid var(--color-border);background:var(--tw-white);color:var(--color-text);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);}
.bl-filter .bl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--bl-dot,var(--tw-purple));}
.bl-filter:hover{border-color:var(--tw-purple);color:var(--tw-purple);}
.bl-filter--active{background:var(--tw-purple)!important;border-color:var(--tw-purple)!important;color:var(--tw-white)!important;}
.bl-filter--active .bl-dot{background:var(--tw-white)!important;}
.bl-filter--active:hover{background:var(--tw-purple)!important;color:var(--tw-white)!important;}

/* Nav : etat actif (page courante) */
.tw-navlink.is-active::after{transform:scaleX(1);}
.tw-dropdown a.is-active{background:var(--color-accent-soft);color:var(--color-accent);}

/* Hero rating : etoiles overlay (empty + gold decoupe a 96% = 4,8/5) */
.tw-rating{ display:inline-flex; align-items:center; gap:14px; margin-top:clamp(16px,2vh,22px); }
.tw-stars{ position:relative; display:inline-flex; line-height:1; }
/* Les DEUX rangees stylees a l'identique (gap + taille + line-height) */
.tw-stars-empty,
.tw-stars-full{ display:inline-flex; gap:3px; font-size:20px; line-height:1; }
/* Largeur d'icone verrouillee, pas de compression (flex:none -> rangee or COUPEE
   a 96%, pas retrecie) ET meme alignement vertical (annule le vertical-align
   -.125em de FA7 qui decalait la rangee absolue vs la rangee en flux) */
.tw-stars-empty i,
.tw-stars-full i{ flex:none; --fa-width:1.25em; vertical-align:top; }
.tw-stars-empty{ color:rgba(255,255,255,0.32); }
.tw-stars-full{
  position:absolute; top:0; left:0;
  width:96%;                 /* 4,8/5 -> 96% */
  overflow:hidden; white-space:nowrap;
  color:#FFC500;
}
.tw-rating-label{
  font-family:var(--font-text, sans-serif);
  font-weight:600; font-size:14.5px;
  color:rgba(255,255,255,0.9);
  line-height:1.3; white-space:nowrap;
}

/* ============================================================
   ARTICLE (single.php) — typographie du contenu WYSIWYG
   ============================================================ */
.tw-article-body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
}
.tw-article-body > *:first-child { margin-top: 0; }
.tw-article-body p { margin: 0 0 1.25em; }
.tw-article-body h2 {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: var(--color-text);
  margin: 1.9em 0 0.6em;
}
.tw-article-body h3 {
  font-family: var(--font-text);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.3;
  color: var(--color-text);
  margin: 1.6em 0 0.5em;
}
.tw-article-body h4 {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 17px;
  color: var(--color-text);
  margin: 1.4em 0 0.4em;
}
.tw-article-body a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.tw-article-body a:hover { color: var(--tw-purple); }
.tw-article-body strong, .tw-article-body b { font-weight: 700; }
.tw-article-body ul, .tw-article-body ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.tw-article-body li { margin: 0 0 0.5em; padding-left: 0.3em; }
.tw-article-body ul li::marker { color: var(--tw-orange); }
.tw-article-body ol li::marker { color: var(--tw-orange); font-weight: 700; }
.tw-article-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--tw-purple);
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.5;
  color: var(--color-text);
}
.tw-article-body blockquote p { margin: 0; }
.tw-article-body img,
.tw-article-body .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin: 1.6em 0;
}
.tw-article-body figure { margin: 1.6em 0; }
.tw-article-body figcaption {
  font-size: 13.5px;
  color: var(--color-text-faint);
  text-align: center;
  margin-top: 8px;
}
.tw-article-body hr { border: none; border-top: 1px solid var(--color-border); margin: 2em 0; }
.tw-article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-bg-warm);
  padding: 2px 6px;
  border-radius: 4px;
}
@media (max-width: 640px) {
  .tw-article-body { font-size: 16.5px; line-height: 1.72; }
  .tw-article-share { gap: 10px; }
}

/* Footer nav menus */
.tw-foot-nav { list-style:none !important;margin:0;padding:0;display:flex;flex-direction:column;gap:11px; }
.tw-foot-nav li { list-style:none !important;margin:0;padding:0; }
.tw-foot-nav li a { font-family:var(--font-text) !important;font-weight:400;font-size:14.5px;color:rgba(255,255,255,0.78) !important;text-decoration:none !important;transition:color var(--dur-fast); }
.tw-foot-nav li a:hover { color:#fff !important; }


/* ============================================================
   Formulaires contact sur mobile : le widget Cloudflare Turnstile
   est un iframe de largeur FIXE (300px). La carte du form = viewport - 88px,
   donc le widget deborde des ~388px et moins (iPhone 375/360). On reduit le
   padding du form sur mobile, et on met le widget a l'echelle sous 360px.
   `:has()` cible exactement les 3 forms contenant un Turnstile.
   ============================================================ */
@media (max-width: 1000px) {
  /* La piste 1fr = minmax(auto,1fr) : le Turnstile (300px, layout NON reduit par
     transform) force la piste >= 300px et fait deborder les champs hors viewport
     sur les petits ecrans. minmax(0,1fr) autorise la piste a suivre le viewport ;
     les champs (width:100%) rentrent, le widget est mis a l.echelle plus bas. */
  form:has(.cf-turnstile) { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 600px) {
  form:has(.cf-turnstile) { padding-left: 16px !important; padding-right: 16px !important; }
  .cf-turnstile { max-width: 100%; }
}
@media (max-width: 360px) {
  .cf-turnstile { transform: scale(0.86); transform-origin: left center; }
}