#wrapwrap { --mk-motif-url: url('/web/content/4731/mark-motif.svg?unique=fa6c9b05405a'); }
/* =====================================================================
   MAKOTO CONSULTING — design system du site (Odoo saas~19.3, mode API)
   Injecté dans website.custom_code_head par build/layout.py.
   Toutes les règles sont scopées à #wrapwrap : rien ne fuit vers le backend.
   Tokens : charte V1.1 (makoto-design/brand.css). Ne pas inventer de couleur.
   ===================================================================== */

#wrapwrap {
  --mk-matsu: #172d2c;
  --mk-matsu-90: #2e4241;
  --mk-matsu-70: #5d6c6b;
  --mk-matsu-deep: #10201f;
  --mk-matsu-soft: #243b3a;
  --mk-wakaba: #27a87d;
  --mk-wakaba-90: #3db18a;
  --mk-wakaba-70: #68c2a4;
  --mk-wakaba-60: #7dcbb1;
  --mk-wakaba-50: #93d4be;
  --mk-wakaba-30: #bee5d8;
  --mk-wakaba-10: #e9f6f2;
  --mk-wakaba-ink: #1d7e5e;
  --mk-washi: #f6f4f1;
  --mk-blanc: #ffffff;
  --mk-border: #e2ded9;
  --mk-dark-border: rgba(246, 244, 241, .16);
  --mk-dark-muted: rgba(246, 244, 241, .72);
  --mk-font: 'Albert Sans', Arial, Helvetica, sans-serif;
  --mk-fs-display: clamp(2.5rem, 1.5rem + 4.2vw, 4.25rem);
  --mk-fs-h1: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  --mk-fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --mk-r-sm: 8px;
  --mk-r-md: 12px;
  --mk-r-lg: 16px;
  --mk-r-xl: 24px;
  --mk-r-pill: 999px;
  --mk-shadow-card: 0 1px 2px rgba(23, 45, 44, .04), 0 8px 24px rgba(23, 45, 44, .06);
  --mk-ease: cubic-bezier(.2, .7, .3, 1);

  font-family: var(--mk-font);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mk-matsu);
  background: var(--mk-washi);
  -webkit-font-smoothing: antialiased;
  /* clip et non hidden : « hidden » fait de #wrapwrap un conteneur de défilement, ce qui
     casse le header collant et les ancres (Odoo fait défiler #wrapwrap au lieu de la page). */
  overflow-x: clip;
}
#wrapwrap .mk-section[id] { scroll-margin-top: 96px; }
#wrapwrap *, #wrapwrap *::before, #wrapwrap *::after { box-sizing: border-box; }
#wrapwrap img, #wrapwrap svg, #wrapwrap iframe { max-width: 100%; }
#wrapwrap main { background: var(--mk-washi); }
/* Odoo étire <main> à la hauteur de la fenêtre : sur une page courte qui finit sur une
   section sombre (404, remerciement), le fond Washi apparaissait en bande avant le footer. */
#wrapwrap main:has(> #wrap > .oe_structure > section.mk-dark:last-child) { background: var(--mk-matsu); }
#wrapwrap p { margin: 0 0 1rem; }
#wrapwrap strong, #wrapwrap b { font-weight: 700; }

#wrapwrap h1, #wrapwrap h2, #wrapwrap h3, #wrapwrap h4, #wrapwrap h5, #wrapwrap h6 {
  font-family: var(--mk-font);
  font-weight: 600;
  color: inherit;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 1rem;
}
#wrapwrap a { color: var(--mk-wakaba-ink); text-decoration: underline; text-underline-offset: 3px; }
#wrapwrap a:hover { color: var(--mk-matsu); }
#wrapwrap :focus-visible { outline: 2px solid var(--mk-wakaba); outline-offset: 3px; border-radius: 4px; }

/* ------------------------------------------------------------ sections */
#wrapwrap .mk-section { position: relative; overflow: hidden; }
#wrapwrap .mk-section > .container,
#wrapwrap .mk-header__bar,
#wrapwrap .mk-footer .container { max-width: 1248px; padding-left: 24px; padding-right: 24px; margin-left: auto; margin-right: auto; }
#wrapwrap .mk-light { background: var(--mk-washi); color: var(--mk-matsu); }
#wrapwrap .mk-white { background: var(--mk-blanc); color: var(--mk-matsu); }
#wrapwrap .mk-dark { background: var(--mk-matsu); color: var(--mk-washi); }
#wrapwrap .mk-dark a:not(.mk-btn) { color: var(--mk-wakaba); }
#wrapwrap .mk-dark a:not(.mk-btn):hover { color: var(--mk-washi); }
#wrapwrap .mk-dark .mk-muted { color: var(--mk-dark-muted); }
#wrapwrap .mk-muted { color: var(--mk-matsu-70); }

/* Motif : le logomark agrandi qui déborde, à ±8 % de luminance. */
#wrapwrap .mk-motif { position: relative; isolation: isolate; }
#wrapwrap .mk-motif::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -40%;
  top: -30%;
  width: 230%;
  aspect-ratio: 1570 / 640;
  background: var(--mk-motif-url) no-repeat center / 100% auto;
  pointer-events: none;
}
#wrapwrap .mk-motif--low::before { top: 10%; left: -70%; }

/* ---------------------------------------------------------- typographie */
#wrapwrap .mk-eyebrow {
  display: block;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mk-wakaba-ink);
  margin: 0 0 .875rem;
}
#wrapwrap .mk-dark .mk-eyebrow { color: var(--mk-wakaba); }
#wrapwrap .mk-display {
  font-size: var(--mk-fs-display);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 1.5rem;
}
#wrapwrap .mk-h1 { font-size: var(--mk-fs-h1); font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; }
#wrapwrap .mk-h2 { font-size: var(--mk-fs-h2); font-weight: 300; line-height: 1.15; letter-spacing: -0.015em; }
#wrapwrap .mk-display strong, #wrapwrap .mk-h1 strong, #wrapwrap .mk-h2 strong { font-weight: 700; }
#wrapwrap .mk-h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.25; margin-bottom: .5rem; }
#wrapwrap .mk-lead { font-size: 1.25rem; line-height: 1.55; max-width: 60ch; }
#wrapwrap .mk-measure { max-width: 62ch; }
#wrapwrap .mk-quote {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}
#wrapwrap .mk-signature { text-transform: uppercase; letter-spacing: .3em; font-weight: 300; font-size: .8125rem; }

/* -------------------------------------------------------------- boutons */
#wrapwrap .mk-btn, #wrapwrap a.mk-btn, #wrapwrap .btn.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--mk-font);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1;
  padding: .9rem 1.4rem;
  border-radius: var(--mk-r-sm);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--mk-ease), color .22s var(--mk-ease), border-color .22s var(--mk-ease);
}
#wrapwrap .mk-btn--primary { background: var(--mk-matsu); color: var(--mk-washi); }
#wrapwrap .mk-btn--primary:hover { background: var(--mk-matsu-90); color: var(--mk-washi); }
#wrapwrap .mk-btn--accent { background: var(--mk-wakaba); color: var(--mk-matsu); }
#wrapwrap .mk-btn--accent:hover { background: var(--mk-wakaba-90); color: var(--mk-matsu); }
#wrapwrap .mk-btn--ghost { background: transparent; color: var(--mk-matsu); border-color: var(--mk-matsu); }
#wrapwrap .mk-btn--ghost:hover { background: var(--mk-matsu); color: var(--mk-washi); }
#wrapwrap .mk-dark .mk-btn--primary { background: var(--mk-washi); color: var(--mk-matsu); }
#wrapwrap .mk-dark .mk-btn--primary:hover { background: var(--mk-blanc); color: var(--mk-matsu); }
#wrapwrap .mk-dark .mk-btn--ghost { color: var(--mk-washi); border-color: rgba(246, 244, 241, .4); }
#wrapwrap .mk-dark .mk-btn--ghost:hover { background: var(--mk-washi); color: var(--mk-matsu); border-color: var(--mk-washi); }
#wrapwrap .mk-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* Boutons Odoo ajoutés plus tard dans le builder : jamais de blanc sur Wakaba (3,01:1). */
#wrapwrap a.btn.btn-primary, #wrapwrap button.btn.btn-primary, #wrapwrap .btn.btn-primary {
  background: var(--mk-matsu); border-color: var(--mk-matsu); color: var(--mk-washi);
  font-weight: 600; border-radius: var(--mk-r-sm); text-decoration: none;
}
#wrapwrap a.btn.btn-primary:hover, #wrapwrap .btn.btn-primary:hover { background: var(--mk-matsu-90); border-color: var(--mk-matsu-90); color: var(--mk-washi); }
#wrapwrap a.btn.btn-secondary, #wrapwrap .btn.btn-secondary {
  background: var(--mk-wakaba); border-color: var(--mk-wakaba); color: var(--mk-matsu); font-weight: 600; text-decoration: none;
}

/* ----------------------------------------------------------------- hero */
#wrapwrap .mk-hero { padding: 72px 0 112px; }
#wrapwrap .mk-hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
#wrapwrap .mk-hero__visual { position: relative; display: flex; justify-content: center; }
#wrapwrap .mk-hero__visual img { width: 100%; max-width: 480px; height: auto; }
#wrapwrap .mk-hero--page { padding: 56px 0 88px; }
#wrapwrap .mk-hero--page .mk-h1 { max-width: 20ch; margin-bottom: 1.25rem; }
#wrapwrap .mk-hero .mk-lead { color: var(--mk-dark-muted); }

/* --------------------------------------------------- grilles et colonnes */
#wrapwrap .mk-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
#wrapwrap .mk-split--contact { grid-template-columns: 1.5fr 1fr; }
#wrapwrap .mk-split--contact .mk-form { padding: 32px 0 0; background: transparent; }
#wrapwrap .mk-split--even { grid-template-columns: 1fr 1fr; align-items: center; }
#wrapwrap .mk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
#wrapwrap .mk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
#wrapwrap .mk-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: start; }
#wrapwrap .mk-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: start; }
#wrapwrap .mk-head { max-width: 760px; margin-bottom: 48px; }
#wrapwrap .mk-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------- cartes */
#wrapwrap .mk-card {
  background: var(--mk-blanc);
  color: var(--mk-matsu);
  border-radius: var(--mk-r-lg);
  padding: 28px;
  height: auto;
}
#wrapwrap .mk-card p:last-child { margin-bottom: 0; }
#wrapwrap .mk-card--t100 { background: var(--mk-wakaba); }
#wrapwrap .mk-card--t70 { background: var(--mk-wakaba-70); }
#wrapwrap .mk-card--t60 { background: var(--mk-wakaba-60); }
#wrapwrap .mk-card--t50 { background: var(--mk-wakaba-50); }
#wrapwrap .mk-card--t30 { background: var(--mk-wakaba-30); }
#wrapwrap .mk-card--washi { background: var(--mk-washi); }
#wrapwrap .mk-card--float { box-shadow: var(--mk-shadow-card); }
#wrapwrap .mk-dark .mk-card, #wrapwrap .mk-dark .mk-card a:not(.mk-btn) { color: var(--mk-matsu); }
#wrapwrap .mk-card.mk-card--dark { background: var(--mk-matsu); color: var(--mk-washi); padding: 36px; }
#wrapwrap .mk-card a.mk-more { color: var(--mk-matsu); font-weight: 600; text-decoration: underline; }
#wrapwrap .mk-card .mk-num { display: block; font-size: .875rem; letter-spacing: .12em; font-weight: 400; margin-bottom: 1.25rem; opacity: .8; }
#wrapwrap .mk-icon { width: 36px; height: 36px; display: block; margin-bottom: 1.25rem; color: var(--mk-matsu); }
#wrapwrap .mk-icon svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Cascade : les décrochements en bas font partie de la composition. */
#wrapwrap .mk-cascade > :nth-child(2) { margin-top: 32px; }
#wrapwrap .mk-cascade > :nth-child(3) { margin-top: 64px; }
#wrapwrap .mk-cascade > :nth-child(4) { margin-top: 96px; }

/* --------------------------------------------------- piliers et listes */
#wrapwrap .mk-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
#wrapwrap .mk-list li { position: relative; padding: .7rem 0 .7rem 1.75rem; border-top: 1px solid var(--mk-border); }
#wrapwrap .mk-list li:last-child { border-bottom: 1px solid var(--mk-border); }
#wrapwrap .mk-list li::before {
  content: ''; position: absolute; left: 0; top: 1.2rem;
  width: 14px; height: 6px; border-radius: var(--mk-r-pill); background: var(--mk-wakaba);
}
#wrapwrap .mk-dark .mk-list li { border-color: var(--mk-dark-border); }
#wrapwrap .mk-list strong { font-weight: 600; }
#wrapwrap .mk-goal { font-size: 1.125rem; }
#wrapwrap .mk-goal strong { font-weight: 600; }

/* ------------------------------------------------------- méthode 5 étapes */
#wrapwrap .mk-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; counter-reset: mk-step; }
#wrapwrap .mk-step { position: relative; padding: 24px 20px 24px; border-radius: var(--mk-r-lg); background: var(--mk-washi); }
#wrapwrap .mk-step::before {
  counter-increment: mk-step; content: counter(mk-step, decimal-leading-zero);
  display: block; font-size: 2.5rem; font-weight: 300; line-height: 1; margin-bottom: 1rem; color: var(--mk-wakaba-ink);
}
#wrapwrap .mk-step h3 { font-size: 1.125rem; margin-bottom: .35rem; }
#wrapwrap .mk-step p { font-size: .9375rem; margin: 0; }

/* -------------------------------------------------- chiffres en escalier */
#wrapwrap .mk-stairs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: end; }
#wrapwrap .mk-stat { border-radius: var(--mk-r-lg); padding: 28px; color: var(--mk-matsu); display: flex; flex-direction: column; justify-content: flex-start; }
#wrapwrap .mk-stat:nth-child(1) { min-height: 200px; background: var(--mk-wakaba); }
#wrapwrap .mk-stat:nth-child(2) { min-height: 260px; background: var(--mk-wakaba-60); }
#wrapwrap .mk-stat:nth-child(3) { min-height: 320px; background: var(--mk-wakaba-30); }
#wrapwrap .mk-stat__num { font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem); font-weight: 300; line-height: 1; letter-spacing: -0.02em; margin: 0 0 .75rem; }
#wrapwrap .mk-stat__label { font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; margin: 0; max-width: 22ch; }

/* --------------------------------------------------- encarts-questions */
#wrapwrap .mk-ask { border-top: 1px solid var(--mk-dark-border); padding-top: 24px; }
#wrapwrap .mk-ask h3 { color: var(--mk-wakaba); font-size: 1.375rem; font-weight: 600; }
#wrapwrap .mk-ask p { color: var(--mk-dark-muted); margin: 0; }

/* ---------------------------------------------------------------- logos */
#wrapwrap .mk-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
#wrapwrap .mk-logo-card {
  background: var(--mk-blanc); border-radius: var(--mk-r-lg); height: 112px;
  display: flex; align-items: center; justify-content: center; padding: 20px 24px;
}
#wrapwrap .mk-logo-card img { max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .22s, opacity .22s; }
#wrapwrap .mk-white .mk-logo-card { background: var(--mk-washi); }
#wrapwrap .mk-logo-card:hover img { filter: none; opacity: 1; }

/* -------------------------------------------------------- bandeau final */
#wrapwrap .mk-band { background: var(--mk-blanc); border-radius: var(--mk-r-xl); padding: 64px 32px; text-align: center; }
#wrapwrap .mk-band .mk-h2 { margin-bottom: .75rem; }
#wrapwrap .mk-band .mk-actions { justify-content: center; }

/* -------------------------------------------------------- missions */
#wrapwrap .mk-mission { scroll-margin-top: 96px; }
#wrapwrap .mk-mission__aside { position: sticky; top: 112px; }
#wrapwrap .mk-mission__tag { display: inline-flex; align-items: center; gap: .6rem; }
#wrapwrap .mk-mission .mk-icon { margin-bottom: 1.5rem; }
#wrapwrap .mk-mission__q { font-size: 1.25rem; font-weight: 600; color: var(--mk-wakaba-ink); margin-bottom: .75rem; }
#wrapwrap .mk-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 2rem; }
#wrapwrap .mk-toc a {
  display: inline-block; padding: .55rem 1rem; border-radius: var(--mk-r-pill);
  border: 1px solid rgba(246, 244, 241, .35); color: var(--mk-washi) !important; text-decoration: none; font-weight: 400; font-size: .9375rem;
}
#wrapwrap .mk-toc a:hover { background: var(--mk-washi); color: var(--mk-matsu) !important; }

/* --------------------------------------------------------------- équipe */
#wrapwrap .mk-person { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; background: var(--mk-blanc); border-radius: var(--mk-r-xl); padding: 40px; }
#wrapwrap .mk-person + .mk-person { margin-top: 24px; }
#wrapwrap .mk-white .mk-person { background: var(--mk-washi); }
#wrapwrap .mk-person__photo { position: relative; width: 200px; }
#wrapwrap .mk-person__photo::before { content: ''; position: absolute; inset: 28% -10px -10px 18%; border-radius: var(--mk-r-pill); background: var(--mk-wakaba-30); }
#wrapwrap .mk-person__photo img { position: relative; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; display: block; }
#wrapwrap .mk-person__role { color: var(--mk-wakaba-ink); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: .8125rem; margin-bottom: 1rem; }
#wrapwrap .mk-person__name { font-size: 1.5rem; margin-bottom: .25rem; }

/* -------------------------------------------------------------- contact */
#wrapwrap .mk-contact-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
#wrapwrap .mk-contact-list li { padding: 1rem 0; border-top: 1px solid var(--mk-dark-border); }
#wrapwrap .mk-contact-list span { display: block; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-wakaba); margin-bottom: .2rem; }
#wrapwrap .mk-contact-list a { color: var(--mk-washi) !important; text-decoration: none; font-size: 1.125rem; }
#wrapwrap .mk-contact-list a:hover { text-decoration: underline; }

/* Formulaire : structure Odoo (s_website_form), habillage Makoto. */
#wrapwrap .mk-form { background: var(--mk-blanc); border-radius: var(--mk-r-xl); padding: 40px; }
#wrapwrap .mk-form .s_website_form_rows { row-gap: 4px; }
#wrapwrap .mk-form .s_website_form_label { font-size: .9375rem; font-weight: 500; color: var(--mk-matsu); width: auto !important; padding-bottom: .35rem; }
#wrapwrap .mk-form .form-control, #wrapwrap .mk-form .form-select {
  font-family: var(--mk-font); font-weight: 300; font-size: 1.0625rem; color: var(--mk-matsu);
  background: var(--mk-blanc); border: 1px solid var(--mk-border); border-radius: var(--mk-r-md); min-height: 48px; padding: .7rem .9rem; box-shadow: none;
}
#wrapwrap .mk-form textarea.form-control { min-height: 140px; }
#wrapwrap .mk-form .form-control:focus, #wrapwrap .mk-form .form-select:focus { border-color: var(--mk-wakaba); box-shadow: 0 0 0 3px rgba(39, 168, 125, .18); outline: none; }
#wrapwrap .mk-form .s_website_form_mark { color: var(--mk-wakaba-ink); }
#wrapwrap .mk-form .s_website_form_submit { text-align: left !important; }
#wrapwrap .mk-form .s_website_form_submit .s_website_form_label { display: none; }
#wrapwrap .mk-form small, #wrapwrap .mk-form .mk-legal { font-size: .8125rem; color: var(--mk-matsu-70); }

/* --------------------------------------------------------------- header */
#wrapwrap header#top.mk-header { position: sticky; top: 0; z-index: 1030; background: var(--mk-matsu); color: var(--mk-washi); border-bottom: 1px solid var(--mk-dark-border); }
#wrapwrap .mk-header__bar { display: flex; align-items: center; gap: 32px; min-height: 80px; }
#wrapwrap .mk-header__logo { display: inline-flex; flex-shrink: 0; padding: 8px 0; }
#wrapwrap .mk-header__logo img { height: 32px; width: auto; display: block; }
#wrapwrap .mk-nav { margin-left: auto; }
#wrapwrap .mk-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
#wrapwrap .mk-nav a {
  display: block; padding: .6rem .75rem; color: var(--mk-washi); text-decoration: none; font-weight: 400; font-size: 1rem; border-radius: var(--mk-r-sm); white-space: nowrap;
}
#wrapwrap .mk-nav a:hover { color: var(--mk-washi); background: rgba(246, 244, 241, .08); }
#wrapwrap .mk-nav a.active { font-weight: 600; }
#wrapwrap .mk-header .mk-btn--primary { background: var(--mk-washi); color: var(--mk-matsu); padding: .75rem 1.15rem; }
#wrapwrap .mk-header .mk-btn--primary:hover { background: var(--mk-blanc); color: var(--mk-matsu); }
#wrapwrap .mk-burger { display: none; margin-left: auto; }
#wrapwrap .mk-burger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--mk-r-sm); }
#wrapwrap .mk-burger summary::-webkit-details-marker { display: none; }
#wrapwrap .mk-burger summary span, #wrapwrap .mk-burger summary span::before, #wrapwrap .mk-burger summary span::after {
  content: ''; display: block; width: 22px; height: 1.5px; background: var(--mk-washi); position: relative; transition: transform .22s var(--mk-ease);
}
#wrapwrap .mk-burger summary span::before { position: absolute; top: -7px; }
#wrapwrap .mk-burger summary span::after { position: absolute; top: 7px; }
#wrapwrap .mk-burger[open] summary span { background: transparent; }
#wrapwrap .mk-burger[open] summary span::before { transform: translateY(7px) rotate(45deg); }
#wrapwrap .mk-burger[open] summary span::after { transform: translateY(-7px) rotate(-45deg); }
#wrapwrap .mk-burger__panel {
  position: fixed; left: 0; right: 0; top: 80px; bottom: 0; background: var(--mk-matsu); padding: 24px 24px 40px; overflow-y: auto;
}
#wrapwrap .mk-burger__panel ul { list-style: none; padding: 0; margin: 0 0 32px; }
#wrapwrap .mk-burger__panel li { border-top: 1px solid var(--mk-dark-border); }
#wrapwrap .mk-burger__panel li a { display: block; padding: 1rem 0; color: var(--mk-washi); text-decoration: none; font-size: 1.5rem; font-weight: 300; }
#wrapwrap .mk-burger__panel li a.active { font-weight: 600; }

/* --------------------------------------------------------------- footer */
#wrapwrap footer#bottom { background: var(--mk-matsu) !important; color: var(--mk-washi); }
#wrapwrap footer#bottom .o_footer_copyright { display: none !important; }
/* Footer : texte en Regular (le Light 300 est trop fin en petit sur fond sombre), Washi plein. */
#wrapwrap .mk-footer { background: var(--mk-matsu); color: var(--mk-washi); padding: 72px 0 32px; font-size: 1.0625rem; font-weight: 400; }
#wrapwrap .mk-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
#wrapwrap .mk-footer__brand img { height: 36px; width: auto; display: block; margin-bottom: 1.25rem; }
#wrapwrap .mk-footer__brand p { color: var(--mk-washi); max-width: 40ch; line-height: 1.6; }
#wrapwrap .mk-footer__brand .mk-signature { font-size: .9375rem; font-weight: 400; color: var(--mk-wakaba); margin-bottom: 1rem; }
/* Intitulés de colonnes : simples paragraphes, pour ne pas peser dans le plan des titres de chaque page. */
#wrapwrap .mk-footer .mk-footer__title { font-size: .875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-wakaba); margin-bottom: 1.25rem; }
#wrapwrap .mk-footer ul { list-style: none; padding: 0; margin: 0; }
#wrapwrap .mk-footer li { margin-bottom: .75rem; }
#wrapwrap .mk-footer a { color: var(--mk-washi); text-decoration: none; }
#wrapwrap .mk-footer a:hover { color: var(--mk-wakaba); text-decoration: underline; }
#wrapwrap .mk-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--mk-dark-border); padding-top: 24px; font-size: 1rem; color: rgba(246, 244, 241, .88);
}
#wrapwrap .mk-footer__bottom strong { font-weight: 600; color: var(--mk-washi); }
#wrapwrap .mk-footer__bottom a { color: var(--mk-washi); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------- pages Odoo restées standard */
#wrapwrap .o_cc1, #wrapwrap .o_cc { --o-cc1-text: var(--mk-matsu); }
#wrapwrap .o_wblog_page_cards_bg, #wrapwrap #o_wblog_index_content { background: var(--mk-washi); }

/* ------------------------------------------------- textes juridiques */
#wrapwrap .mk-doc { background: var(--mk-blanc); border-radius: var(--mk-r-xl); padding: 56px; max-width: 860px; }
#wrapwrap .mk-doc h2 { font-size: 1.375rem; margin: 2.25rem 0 .75rem; }
#wrapwrap .mk-doc h2:first-of-type { margin-top: 1.5rem; }
#wrapwrap .mk-doc ul { padding-left: 1.25rem; margin: 0 0 1rem; }
#wrapwrap .mk-doc li { margin-bottom: .5rem; }
#wrapwrap .mk-doc li strong { font-weight: 600; }
#wrapwrap .mk-doc code { font-size: .9em; color: var(--mk-matsu); background: var(--mk-washi); padding: .1em .35em; border-radius: 4px; }

/* ------------------------------------- pages Odoo : rendez-vous et blog */
#wrapwrap .o_wappointment_wrap { padding-top: 32px; padding-bottom: 64px; }
#wrapwrap .o_appointment_info_main h1.h4 {
  font-size: var(--mk-fs-h2); font-weight: 300; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 1rem !important;
}
#wrapwrap .o_appointment .h6, #wrapwrap .o_appointment h5 { font-weight: 600; }
#wrapwrap .o_appointment #calendar { border-color: var(--mk-border) !important; border-radius: var(--mk-r-lg) !important; }
#wrapwrap .o_appointment .btn { border-radius: var(--mk-r-sm); }
#wrapwrap #o_wblog_blog_top .h1 { font-size: var(--mk-fs-h1); font-weight: 300; letter-spacing: -0.02em; padding-top: 32px; }
#wrapwrap .website_blog .navbar .nav-link { color: var(--mk-matsu); text-decoration: none; }
#wrapwrap .website_blog .navbar .nav-link.active { font-weight: 600; }
#wrapwrap .website_blog .oe_search_box { border-radius: var(--mk-r-md) 0 0 var(--mk-r-md); }

/* ---------------------------------------------------- composants V5 */
#wrapwrap .mk-hero__para { color: var(--mk-dark-muted); max-width: 62ch; }
#wrapwrap .mk-hero .mk-toc { margin-top: 1.5rem; }
#wrapwrap .mk-center { margin-left: auto; margin-right: auto; }
#wrapwrap .mk-section > .container > .mk-icon { margin-bottom: 1rem; }
#wrapwrap .mk-dark .mk-section > .container > .mk-icon, #wrapwrap .mk-section.mk-dark > .container > .mk-icon { color: var(--mk-wakaba); }
#wrapwrap .mk-card-label { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .875rem; }
#wrapwrap a.mk-card--link { display: flex; flex-direction: column; color: var(--mk-matsu); text-decoration: none; border: 1px solid transparent; transition: border-color .22s var(--mk-ease), box-shadow .22s var(--mk-ease); }
#wrapwrap a.mk-card--link:hover { border-color: var(--mk-wakaba); box-shadow: var(--mk-shadow-card); color: var(--mk-matsu); }
#wrapwrap a.mk-card--link p { flex: 1; }
#wrapwrap a.mk-card--link .mk-more { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Cartes cliquables sur fond sombre : texte Matsu, pas le Wakaba des liens de section sombre. */
#wrapwrap .mk-dark a.mk-card--link, #wrapwrap .mk-dark a.mk-card--link:hover { color: var(--mk-matsu); }
#wrapwrap .mk-dark a.mk-card--link:hover { border-color: var(--mk-washi); }
#wrapwrap a.mk-card--link .mk-icon { color: var(--mk-matsu); }
#wrapwrap .mk-quote--plain { border-left: 3px solid var(--mk-wakaba); padding-left: 1.25rem; margin: 48px 0 0; max-width: 62ch; color: var(--mk-matsu); }
#wrapwrap .mk-cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 2rem 0 0; font-size: 1.125rem; }
#wrapwrap .mk-profile { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
#wrapwrap .mk-profile--reverse { grid-template-columns: 1fr 220px; }
#wrapwrap .mk-profile--reverse > .mk-person__photo { order: 2; }
#wrapwrap .mk-profile .mk-h2 { margin-bottom: .5rem; }
#wrapwrap .mk-tagline { font-size: 1.25rem; font-weight: 500; font-style: italic; color: var(--mk-wakaba-ink); margin-bottom: 1.75rem; }
#wrapwrap .mk-profile__link { margin-top: 1.25rem; }
#wrapwrap .mk-footer__cta { margin-top: 1.25rem; }
#wrapwrap .mk-footer .mk-btn--primary { background: var(--mk-washi); color: var(--mk-matsu); text-decoration: none; }
#wrapwrap .mk-footer .mk-btn--primary:hover { background: var(--mk-blanc); color: var(--mk-matsu); text-decoration: none; }
#wrapwrap .mk-form .form-select { appearance: auto; }

/* ------------------------------------------- maquette Claude Design */
/* Titre à gauche, introduction à droite (colonne latérale du brand book). */
#wrapwrap .mk-head--split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: end; max-width: none; }
#wrapwrap .mk-head--split .mk-h2 { margin-bottom: 0; }
#wrapwrap .mk-head--split p:last-child { margin-bottom: 0; }
/* Bannières de page : texte à gauche, visuel à droite. */
#wrapwrap .mk-hero__grid--page { grid-template-columns: 1.3fr 1fr; gap: 64px; }
#wrapwrap .mk-hero__side { display: flex; justify-content: flex-end; }
#wrapwrap .mk-duo { display: block; width: 100%; height: auto; }
#wrapwrap .mk-hero__side .mk-duo { max-width: 520px; }
#wrapwrap .mk-hero__visual--duo img { max-width: 580px; }
/* Logomark Makoto à droite des bandeaux de page. */
#wrapwrap .mk-hero__mark { display: block; width: 100%; max-width: 440px; height: auto; }

/* Signature « Le sens en action » sous le logomark de l'accueil : capitales, Light,
   interlettrage 0.3em, centrée (variante Sign du logo). */
#wrapwrap .mk-sign { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 480px; }
#wrapwrap .mk-sign img { width: 100%; max-width: none; height: auto; }
#wrapwrap .mk-sign__text {
  margin: 2rem 0 0; padding-left: .3em; text-align: center; color: var(--mk-washi);
  font-size: clamp(1.125rem, .8rem + 1.1vw, 1.625rem); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; line-height: 1.3;
}

/* ------------------------------------- Situations types : carrousel */
/* Carrousel Bootstrap : on neutralise le style par défaut des indicateurs (barres en bas)
   pour en faire des onglets nommés. */
#wrapwrap .mk-cases__tabs.carousel-indicators {
  position: static; z-index: auto; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;
}
#wrapwrap .mk-cases__tabs [data-bs-target] {
  box-sizing: border-box; flex: 0 0 auto; width: auto; height: auto; margin: 0; padding: .65rem 1.1rem; text-indent: 0;
  background: var(--mk-blanc); background-clip: border-box; border: 1px solid var(--mk-border); border-radius: var(--mk-r-pill);
  color: var(--mk-matsu); font-family: var(--mk-font); font-size: .9375rem; font-weight: 500; line-height: 1.2; opacity: 1;
  transition: background .22s var(--mk-ease), color .22s var(--mk-ease), border-color .22s var(--mk-ease);
}
#wrapwrap .mk-cases__tabs [data-bs-target] span { font-weight: 300; color: var(--mk-wakaba-ink); margin-right: .5rem; }
#wrapwrap .mk-cases__tabs [data-bs-target]:hover { border-color: var(--mk-matsu); }
#wrapwrap .mk-cases__tabs [data-bs-target].active { background: var(--mk-matsu); border-color: var(--mk-matsu); color: var(--mk-washi); }
#wrapwrap .mk-cases__tabs [data-bs-target].active span { color: var(--mk-wakaba); }
#wrapwrap .mk-case { display: grid; grid-template-columns: 1fr 1.25fr; background: var(--mk-blanc); border-radius: var(--mk-r-xl); overflow: hidden; min-height: 520px; }
#wrapwrap .mk-case__intro { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; background: var(--mk-matsu); color: var(--mk-washi); overflow: hidden; }
#wrapwrap .mk-case__intro .mk-eyebrow, #wrapwrap .mk-case__intro .mk-icon { color: var(--mk-wakaba); }
#wrapwrap .mk-case__intro .mk-h2 { margin: 0; color: var(--mk-washi); }
#wrapwrap .mk-case__num { position: absolute; top: 24px; right: 36px; font-size: 5.5rem; font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--mk-matsu-soft); }
#wrapwrap .mk-timeline { list-style: none; margin: 0; padding: 48px 48px 40px; counter-reset: mk-tl; }
#wrapwrap .mk-timeline li { position: relative; padding: 0 0 28px 56px; }
#wrapwrap .mk-timeline li:last-child { padding-bottom: 0; }
#wrapwrap .mk-timeline li::before {
  counter-increment: mk-tl; content: counter(mk-tl); position: absolute; left: 0; top: -6px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .9375rem; font-weight: 600; color: var(--mk-matsu); background: var(--mk-wakaba);
}
#wrapwrap .mk-timeline li:nth-child(2)::before { background: var(--mk-wakaba-60); }
#wrapwrap .mk-timeline li:nth-child(3)::before { background: var(--mk-wakaba-30); }
#wrapwrap .mk-timeline li::after { content: ''; position: absolute; left: 17px; top: 34px; bottom: 2px; width: 2px; background: var(--mk-wakaba-30); }
#wrapwrap .mk-timeline li:last-child::after { display: none; }
#wrapwrap .mk-timeline .mk-card-label { color: var(--mk-wakaba-ink); margin-bottom: .4rem; }
#wrapwrap .mk-timeline p { margin: 0; }
#wrapwrap .mk-cases__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
#wrapwrap .mk-cases__arrows { display: flex; gap: 10px; }
#wrapwrap .mk-cases__arrow {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  border: 1px solid var(--mk-matsu); border-radius: 50%; background: transparent; color: var(--mk-matsu); transition: background .22s var(--mk-ease), color .22s var(--mk-ease);
}
#wrapwrap .mk-cases__arrow:hover { background: var(--mk-matsu); color: var(--mk-washi); }
#wrapwrap .mk-cases__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#wrapwrap .mk-cases__arrow--prev svg { transform: rotate(180deg); }
/* Exemples d'outils sur mesure */
#wrapwrap .mk-tags { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 32px 0 0; padding: 0; }
#wrapwrap .mk-tags li { padding: .5rem 1rem; border: 1px solid rgba(39, 168, 125, .6); border-radius: var(--mk-r-pill); color: var(--mk-washi); font-size: .9375rem; }
/* sur fond clair : étiquettes blanches, texte Matsu, filet Wakaba lisible */
#wrapwrap .mk-light .mk-tags li, #wrapwrap .mk-white .mk-tags li { background: var(--mk-blanc); color: var(--mk-matsu); border-color: rgba(29, 126, 94, .45); }
#wrapwrap .mk-head + .mk-tags { margin: -16px 0 32px; }

/* ----------------------------------------------------------- responsive */
@media (max-width: 1199.98px) {
  #wrapwrap .mk-nav, #wrapwrap a.mk-btn.mk-header__cta { display: none; }
  #wrapwrap .mk-burger { display: block; }
  #wrapwrap .mk-grid-4 { grid-template-columns: repeat(2, 1fr); }
  #wrapwrap .mk-cascade > :nth-child(n) { margin-top: 0; }
  #wrapwrap .mk-steps { grid-template-columns: repeat(3, 1fr); }
  #wrapwrap .mk-grid-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 991.98px) {
  #wrapwrap .mk-hero__grid, #wrapwrap .mk-split, #wrapwrap .mk-split--even, #wrapwrap .mk-split--contact { grid-template-columns: 1fr; gap: 40px; }
  #wrapwrap .mk-hero__grid--page, #wrapwrap .mk-head--split { grid-template-columns: 1fr; }
  #wrapwrap .mk-head--split { gap: 16px; }
  #wrapwrap .mk-hero__side { justify-content: flex-start; }
  #wrapwrap .mk-hero__side .mk-hero__mark { display: none; }
  #wrapwrap .mk-case { grid-template-columns: 1fr; min-height: 0; }
  #wrapwrap .mk-case__intro { padding: 36px 28px 32px; min-height: 220px; }
  #wrapwrap .mk-timeline { padding: 32px 24px 28px; }
  #wrapwrap .mk-cases__tabs.carousel-indicators { flex-wrap: nowrap; overflow-x: auto; margin-left: -24px; margin-right: -24px; padding: 0 24px 4px; scrollbar-width: none; }
  #wrapwrap .mk-hero__side .mk-duo, #wrapwrap .mk-hero__visual.mk-hero__visual--duo img { max-width: 380px; }
  #wrapwrap .mk-hero__visual { order: -1; }
  #wrapwrap .mk-hero__visual img { max-width: 260px; }
  #wrapwrap .mk-sign { max-width: 280px; }
  #wrapwrap .mk-sign__text { font-size: .9375rem; margin-top: 1.25rem; }
  #wrapwrap .mk-hero__visual { justify-content: flex-start; }
  #wrapwrap .mk-grid-3 { grid-template-columns: 1fr; }
  #wrapwrap .mk-footer__grid { grid-template-columns: 1fr 1fr; }
  #wrapwrap .mk-footer__brand { grid-column: 1 / -1; }
  #wrapwrap .mk-mission__aside { position: static; }
}
@media (max-width: 767.98px) {
  #wrapwrap .mk-section.pt96, #wrapwrap .mk-section.pt112 { padding-top: 56px !important; }
  #wrapwrap .mk-section.pb96, #wrapwrap .mk-section.pb112 { padding-bottom: 56px !important; }
  #wrapwrap .mk-hero { padding: 40px 0 64px; }
  #wrapwrap .mk-grid-2, #wrapwrap .mk-grid-4, #wrapwrap .mk-steps, #wrapwrap .mk-grid-5 { grid-template-columns: 1fr; }
  #wrapwrap .mk-stairs { grid-template-columns: 1fr; }
  #wrapwrap .mk-stat:nth-child(n) { min-height: 0; }
  #wrapwrap .mk-person { grid-template-columns: 1fr; padding: 28px; gap: 24px; }
  #wrapwrap .mk-profile, #wrapwrap .mk-profile--reverse { grid-template-columns: 1fr; gap: 32px; }
  #wrapwrap .mk-profile--reverse > .mk-person__photo { order: 0; }
  #wrapwrap .mk-cta-line { flex-direction: column; align-items: flex-start; }
  #wrapwrap .mk-form, #wrapwrap .mk-band, #wrapwrap .mk-doc { padding: 28px 20px; }
  #wrapwrap .mk-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  #wrapwrap .mk-head { margin-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  #wrapwrap * { transition: none !important; scroll-behavior: auto !important; }
}