/* Tuto Mix : mise en page commune (bandes de section, conteneurs, header et footer provisoires du S0).
   Le header et le footer définitifs arrivent au S3. */

/* Bande pleine largeur (BlockShell du DS) : ton, filet, texture, halo, conteneur centré */
.tm-section {
  position: relative; overflow: hidden; background: var(--surface-page);
  --tm-pt: var(--section-y); --tm-pb: var(--section-y);
  --tm-pt-m: 56px; --tm-pb-m: 56px;
  --tm-gap: 48px; --tm-max: var(--container);
}
.tm-section--alt { background: var(--surface-alt); }
.tm-section--raised { background: var(--surface-raised); }
.tm-section--divider { border-top: 1px solid var(--border-subtle); }

.tm-section__texture { position: absolute; inset: 0; background-image: var(--texture-grid); pointer-events: none; }
.tm-section__glow {
  position: absolute; top: -160px; left: 50%; width: 900px; height: 520px; transform: translateX(-50%);
  background: var(--glow-hero); filter: blur(20px); pointer-events: none;
}

.tm-section__inner {
  /* Largeur utile = --tm-max (conteneur de la maquette en content-box : 1200 + 2 × 40) */
  position: relative; max-width: calc(var(--tm-max) + 2 * var(--gutter)); margin: 0 auto;
  padding: var(--tm-pt) var(--gutter) var(--tm-pb);
  display: flex; flex-direction: column; gap: var(--tm-gap);
}
.tm-section--center .tm-section__inner { align-items: center; text-align: center; }

.tm-w-wide { --tm-max: var(--container-wide); }
.tm-w-medium { --tm-max: var(--container-medium); }
.tm-w-narrow { --tm-max: var(--container-narrow); }
.tm-w-reading { --tm-max: var(--container-reading); }
.tm-w-tight { --tm-max: var(--container-tight); }

/* Header (SiteHeader + maquettes v4) : sticky sous la barre d'admin, voile flouté, aucune ombre.
   Menu complet à partir de 1200 px (mesuré : logo + 7 entrées + bouton + marges = 1 145 px minimum). */
.tm-header {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 900;
  background: var(--surface-overlay); -webkit-backdrop-filter: var(--blur-header); backdrop-filter: var(--blur-header);
  border-bottom: 1px solid var(--border-subtle);
}
.tm-header__inner {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.tm-nav { display: flex; align-items: center; gap: 14px; }
.tm-nav__link {
  font-size: 13px; line-height: normal; font-weight: var(--weight-medium); color: var(--text-muted); white-space: nowrap; text-decoration: none;
  transition: color var(--transition-fast);
}
.tm-nav__link:hover, .tm-nav__link:focus-visible { color: var(--text-primary); }
.tm-nav__link.is-active { font-weight: var(--weight-semibold); color: var(--text-primary); padding-bottom: 4px; border-bottom: 2px solid var(--accent-ink); }
.tm-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.tm-header__cta { font-size: 13px; line-height: normal; padding: 12px 20px; }
.tm-header__cta-short { display: none; }
.tm-burger {
  display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); cursor: pointer;
}
.tm-burger span { display: block; width: 18px; height: 1.5px; background: var(--text-primary); transition: transform var(--transition-fast); }
.tm-burger:hover { border-color: var(--border-strong); }
.tm-burger { -webkit-tap-highlight-color: transparent; color: var(--text-primary); }
.tm-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.tm-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Bouton mode clair / sombre (à droite du bouton d'appel) : soleil en mode sombre, lune en mode clair */
.tm-mode-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; padding: 0;
  background: none; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-primary); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: border-color var(--transition-fast);
}
.tm-mode-toggle:hover { border-color: var(--border-strong); }
.tm-mode-toggle__moon, [data-mode="light"] .tm-mode-toggle__sun { display: none; }
[data-mode="light"] .tm-mode-toggle__moon { display: block; }

/* Tiroir mobile : plein écran sous le header, verrou de défilement sur <html> */
.tm-drawer {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--header-h)); z-index: 890;
  display: flex; flex-direction: column; gap: 24px; padding: 24px var(--gutter-mobile) 32px; overflow-y: auto;
  background: var(--surface-page);
}
.tm-drawer[hidden] { display: none; }
.tm-drawer__nav { display: flex; flex-direction: column; }
.tm-drawer__link {
  padding: 16px 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none;
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--weight-bold); font-size: 20px; letter-spacing: -0.02em; color: var(--text-primary);
}
.tm-drawer__link.is-active { color: var(--accent-ink); }
.tm-drawer__cta { width: 100%; }
html.tm-menu-open { overflow: hidden; }

@media (max-width: 1199px) {
  .tm-nav { display: none; }
  .tm-burger { display: flex; }
}

/* Logo : marque en blocs (couleurs d'origine, jamais recolorées) + wordmark */
.tm-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.tm-logo__mark { display: grid; grid-template-columns: repeat(4, 10px); grid-template-rows: 10px 10px; gap: 2px; }
.tm-logo__mark span:nth-child(2) { background: var(--tm-logo-red); }
.tm-logo__mark span:nth-child(5) { background: var(--tm-logo-blue); }
.tm-logo__mark span:nth-child(6) { background: var(--tm-logo-violet); }
.tm-logo__mark span:nth-child(7) { background: var(--tm-logo-yellow); }
.tm-logo__mark span:nth-child(8) { background: var(--tm-logo-cyan); }
.tm-logo__word {
  font-family: var(--font-display); font-stretch: var(--font-display-stretch); font-weight: var(--weight-black);
  font-size: 20px; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1;
}
.tm-logo:hover .tm-logo__word { color: var(--text-primary); }

/* Footer (SiteFooter + maquettes v4) : liens → accent au survol */
.tm-footer { border-top: 1px solid var(--border-subtle); background: var(--surface-alt); }
.tm-footer__grid {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px;
}
.tm-footer__brand { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tm-logo--footer .tm-logo__word { font-size: 18px; }
.tm-footer__tagline { max-width: 280px; font-size: 14px; line-height: 1.65; color: var(--text-muted); }
.tm-footer__contact { display: flex; flex-direction: column; gap: 8px; }
.tm-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.tm-footer__title { font-family: var(--font-mono); font-size: 11px; line-height: normal; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-subtle); }
.tm-footer__link { font-size: 14px; line-height: normal; color: var(--text-secondary); text-decoration: none; transition: color var(--transition-fast); }
.tm-footer__link:hover, .tm-footer__link:focus-visible { color: var(--accent-ink); }
.tm-footer__cert { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.tm-footer__qualiopi {
  width: 120px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface-card); font-size: 12px; color: var(--text-subtle);
}
.tm-footer__qualiopi img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.tm-footer__cert-text { font-size: 12px; line-height: 1.5; color: var(--text-subtle); }
.tm-footer__cert-text a { color: var(--text-subtle); text-decoration: underline; }
.tm-footer__cert-text a:hover { color: var(--accent-ink); }
.tm-footer__social { display: flex; gap: 12px; margin-top: 4px; }
.tm-footer__social-link {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm); transition: border-color var(--transition-fast);
}
.tm-footer__social-link:hover, .tm-footer__social-link:focus-visible { border-color: var(--accent-ink); }
.tm-footer__bottom {
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 40px;
  display: flex; justify-content: space-between; gap: 24px; font-size: 13px; line-height: normal; color: var(--text-subtle);
  border-top: 1px solid var(--border-subtle);
}
.tm-footer__links { display: contents; }

@media (max-width: 1024px) {
  .tm-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .tm-footer__bottom { margin: 0 var(--gutter); padding-left: 0; padding-right: 0; }
}

@media (max-width: 768px) {
  .tm-section { --tm-gap: 24px; }
  .tm-section__inner { padding: var(--tm-pt-m) var(--gutter-mobile) var(--tm-pb-m); gap: var(--tm-sgap-m, var(--tm-gap)); }
  .tm-section__glow { top: -120px; width: 420px; height: 340px; }
  .tm-header { background: var(--surface-header-m); }
  .tm-header__inner { padding: 14px var(--gutter-mobile); height: auto; }
  .tm-header__cta { font-size: 12px; letter-spacing: 0.04em; padding: 10px 14px; }
  .tm-header__cta-long { display: none; }
  .tm-header__cta-short { display: inline; }
  .tm-header__inner { gap: 12px; }
  .tm-header__actions { gap: 6px; }
  .tm-mode-toggle, .tm-burger { width: 40px; height: 40px; }
  .tm-logo { gap: 10px; }
  .tm-logo__mark { grid-template-columns: repeat(4, 8px); grid-template-rows: 8px 8px; }
  .tm-logo__word { font-size: 17px; }
  /* Footer mobile (maquette 390) : marque, liens sur 2 colonnes, certification, copyright */
  .tm-footer { padding: 40px var(--gutter-mobile) 32px; display: flex; flex-direction: column; gap: 32px; }
  .tm-footer__grid { display: contents; }
  .tm-footer__brand { gap: 16px; }
  .tm-logo--footer .tm-logo__word { font-size: 16px; }
  .tm-footer__tagline { max-width: none; }
  .tm-footer__brand .tm-footer__contact { gap: 16px; }
  .tm-footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .tm-footer__col { gap: 12px; }
  .tm-footer__title { font-size: 10px; }
  .tm-footer__cert { gap: 16px; }
  .tm-footer__qualiopi { width: 104px; height: 64px; }
  .tm-footer__social { gap: 10px; margin-top: 0; }
  .tm-footer__social-link { width: 44px; height: 44px; }
  .tm-footer__bottom { padding: 0; margin: 0; border-top: 0; font-size: 12px; }
}

/* Petits mobiles (< 380 px) : logo, bouton d'appel, mode et burger tiennent sur une ligne */
@media (max-width: 379px) {
  .tm-header__inner { padding-left: 16px; padding-right: 16px; }
  .tm-logo__word { font-size: 15px; }
  .tm-header__cta { padding: 10px; }
  .tm-mode-toggle, .tm-burger { width: 38px; height: 38px; }
}

/* Alignements optionnels d'une section (réglages « Mise en forme » : titre, bouton, cartes). Le Parcours, oct. 2026. */
.tm-section--head-center .tm-heading { align-self: center; align-items: center; text-align: center; }
.tm-section--head-center .tm-text__main > .tm-h2,
.tm-section--head-center .tm-text__main > .tm-eyebrow,
.tm-section--head-center .tm-section__inner > .tm-h2,
.tm-section--head-center .tm-contact__head,
.tm-section--head-center .tm-pillars__title { text-align: center; align-self: center; }
.tm-section--head-center .tm-cards__outro { align-self: center; text-align: center; }
.tm-section--cta-center .tm-prose .tm-cta,
.tm-section--cta-center .tm-section__inner > .tm-btn,
.tm-section--cta-center .tm-faq__cta { justify-content: center; align-self: center; }
.tm-section--items-center .tm-card,
.tm-section--items-center .tm-card__head,
.tm-section--items-center .tm-contact__card,
.tm-section--items-center .tm-comparison__col > :first-child { align-items: center; text-align: center; }
.tm-section--items-center .tm-card .tm-logo-box { align-self: center; }
.tm-section--head-center .tm-text__main { margin-inline: auto; } /* colonne de texte réduite : centrée sous le titre */
.tm-section--head-center .tm-logos__caption { text-align: center; }
.tm-section--items-center .tm-contact__card > .tm-btn, .tm-section--items-center .tm-contact__card .tm-contact__cta { align-self: center; }