/*
Theme Name: Merch ou Crève
Description: Thème sur mesure de Merch ou Crève : sérigraphie textile, transferts DTF et broderie.
Author: Merch ou Crève
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: merch-ou-creve
*/

/* Polices hébergées sur le site (aucune requête vers Google Fonts).
   Big Shoulders Display, Space Grotesk et Space Mono sont publiées sous licence SIL Open Font License 1.1. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/fonts/big-shoulders-display-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:400 900;font-display:swap;src:url("assets/fonts/big-shoulders-display-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/fonts/space-grotesk-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/space-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/space-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/space-mono-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Space Mono";font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/space-mono-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   Jetons de design : couleurs, typographie, espacement, ombres, mouvement
   ============================================================ */
:root{
  /* Encres de base */
  --ink-000:#FFFFFF;
  --ink-050:#F6F3EC;
  --ink-100:#E7E2D7;
  --ink-200:#CDC7BA;
  --ink-300:#A49D90;
  --ink-400:#7A7469;
  --ink-500:#565049;
  --ink-600:#3A3531;
  --ink-700:#262220;
  --ink-800:#181514;
  --ink-900:#0E0C0C;

  /* Encres de couleur */
  --rouge-400:#F1583F;
  --rouge-500:#E4321B;
  --rouge-600:#BC2312;
  --jaune-400:#FFD34A;
  --jaune-500:#EFB700;
  --jaune-600:#C39400;
  --cyan-400:#2DC0D4;
  --cyan-500:#009FB7;
  --cyan-600:#00788A;

  /* Surfaces */
  --surface-page:var(--ink-900);
  --surface-page-alt:var(--ink-050);
  --surface-card:var(--ink-800);
  --surface-card-light:var(--ink-000);
  --surface-raised:var(--ink-700);
  --surface-overlay:rgba(14,12,12,.72);
  --surface-scrim:rgba(14,12,12,.55);
  --surface-accent:var(--rouge-500);
  --surface-accent-soft:rgba(228,50,27,.14);

  /* Texte */
  --text-display:var(--ink-000);
  --text-body:var(--ink-100);
  --text-muted:var(--ink-300);
  --text-on-light:var(--ink-900);
  --text-on-light-muted:var(--ink-500);
  --text-accent:var(--jaune-500);
  --text-inverse:var(--ink-900);
  --text-link:var(--jaune-500);
  --text-link-hover:var(--jaune-400);

  /* Bordures */
  --border-hairline:rgba(246,243,236,.18);
  --border-strong:var(--ink-000);
  --border-on-light:var(--ink-200);
  --border-accent:var(--rouge-500);

  /* États */
  --state-focus:var(--cyan-400);
  --state-success:#3E9B57;
  --state-warning:var(--jaune-500);
  --state-danger:var(--rouge-500);
  --state-disabled:var(--ink-500);

  /* Typographie */
  --font-display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --font-body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono",ui-monospace,Menlo,monospace;

  --weight-display:800;
  --weight-display-max:900;
  --weight-bold:700;
  --weight-medium:500;
  --weight-regular:400;

  --size-3xs:11px;
  --size-2xs:12px;
  --size-xs:14px;
  --size-sm:16px;
  --size-md:18px;
  --size-lg:21px;
  --size-xl:26px;
  --size-2xl:34px;
  --size-3xl:46px;
  --size-4xl:64px;
  --size-5xl:88px;
  --size-6xl:120px;

  --leading-tight:0.92;
  --leading-snug:1.08;
  --leading-normal:1.5;
  --leading-loose:1.7;

  --tracking-display:-0.01em;
  --tracking-normal:0;
  --tracking-label:0.14em;
  --tracking-mono:0.06em;

  --text-hero:var(--weight-display-max) var(--size-6xl)/var(--leading-tight) var(--font-display);
  --text-h1:var(--weight-display) var(--size-5xl)/var(--leading-tight) var(--font-display);
  --text-h2:var(--weight-display) var(--size-3xl)/var(--leading-snug) var(--font-display);
  --text-h3:var(--weight-bold) var(--size-xl)/1.2 var(--font-body);
  --text-lead:var(--weight-regular) var(--size-lg)/var(--leading-loose) var(--font-body);
  --text-base:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-body);
  --text-small:var(--weight-regular) var(--size-xs)/var(--leading-normal) var(--font-body);
  --text-label:var(--weight-bold) var(--size-2xs)/1 var(--font-mono);

  /* Espacement */
  --space-0:0;
  --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;
  --space-11:160px;

  --section-pad-y:var(--space-10);
  --section-pad-y-sm:var(--space-8);
  --gutter:var(--space-5);
  --container-max:1240px;
  --container-narrow:780px;
  --measure:64ch;

  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-pill:999px;

  --stroke-hairline:1px;
  --stroke-regular:2px;
  --stroke-heavy:3px;

  /* Élévation */
  --shadow-none:none;
  --shadow-print-red:6px 6px 0 var(--rouge-500);
  --shadow-print-cyan:6px 6px 0 var(--cyan-500);
  --shadow-print-yellow:6px 6px 0 var(--jaune-500);
  --shadow-print-ink:6px 6px 0 var(--ink-900);
  --shadow-print-tight:3px 3px 0 var(--ink-900);
  --shadow-lift:0 12px 32px rgba(14,12,12,.45);
  --shadow-inset-hairline:inset 0 0 0 1px var(--border-hairline);

  --scrim-photo:linear-gradient(180deg,rgba(14,12,12,.78) 0%,rgba(14,12,12,.45) 45%,rgba(14,12,12,.82) 100%);
  --scrim-rouge:linear-gradient(0deg,rgba(228,50,27,.55),rgba(228,50,27,.55));
  --scrim-flat:rgba(14,12,12,.6);

  /* Mouvement */
  --duration-instant:90ms;
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:420ms;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-press:cubic-bezier(.3,0,.1,1);
  --transition-control:background-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out),transform var(--duration-instant) var(--ease-press);
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms}
}

/* ============================================================
   Base
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:hidden;background:#0E0C0C;color:var(--text-body);font:var(--text-base);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-display);text-wrap:balance}
h1{font:var(--text-h1);text-transform:uppercase;letter-spacing:var(--tracking-display)}
h2{font:var(--text-h2);text-transform:uppercase;letter-spacing:var(--tracking-display)}
h3{font:var(--text-h3)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:#EFB700;text-decoration:none;border-bottom:1px solid transparent;transition:color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out)}
a:hover{color:#FFD34A;border-bottom-color:currentColor}
::selection{background:var(--rouge-500);color:var(--ink-000)}
:focus-visible{outline:2px solid var(--state-focus);outline-offset:2px}
img{border:0}

@keyframes mc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mc-marquee-track{display:flex;width:max-content;animation:mc-marquee linear infinite}
.mc-marquee:hover .mc-marquee-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mc-marquee-track{animation:none}}

/* ============================================================
   Gabarit
   ============================================================ */
.moc-page{background:#0E0C0C;font-family:'Space Grotesk',Helvetica,Arial,sans-serif;color:#E7E2D7}
.moc-container{max-width:1240px;margin:0 auto;padding:0 24px}

.moc-eyebrow{font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#EFB700}
.moc-h2{margin:0;font:800 46px/1.08 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.moc-lead{margin:0;font:400 21px/1.7 'Space Grotesk',sans-serif}

/* ============================================================
   Bouton
   ============================================================ */
.mc-btn{
  --btn-base:var(--rouge-500);--btn-hover:var(--rouge-400);--btn-press:var(--rouge-600);--btn-on:var(--ink-000);
  --btn-outline-color:var(--rouge-500);--btn-outline-border:var(--rouge-500);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-mono);font-weight:var(--weight-bold);line-height:1;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  border-radius:var(--radius-none);cursor:pointer;white-space:nowrap;
  border:var(--stroke-regular) solid transparent;
  transition:var(--transition-control);
}
.mc-btn--sm{padding:8px 16px;font-size:12px}
.mc-btn--md{padding:13px 26px;font-size:14px}
.mc-btn--lg{padding:18px 40px;font-size:16px}
.mc-btn--jaune{--btn-base:var(--jaune-500);--btn-hover:var(--jaune-400);--btn-press:var(--jaune-600);--btn-on:var(--ink-900);--btn-outline-color:var(--jaune-500);--btn-outline-border:var(--jaune-500)}
.mc-btn--cyan{--btn-base:var(--cyan-500);--btn-hover:var(--cyan-400);--btn-press:var(--cyan-600);--btn-on:var(--ink-900);--btn-outline-color:var(--cyan-500);--btn-outline-border:var(--cyan-500)}
.mc-btn--ink{--btn-base:var(--ink-900);--btn-hover:var(--ink-700);--btn-press:var(--ink-800);--btn-on:var(--ink-000);--btn-outline-color:var(--ink-900);--btn-outline-border:var(--ink-900)}
.mc-btn--blanc{--btn-base:var(--ink-000);--btn-hover:var(--ink-050);--btn-press:var(--ink-100);--btn-on:var(--ink-900);--btn-outline-color:var(--ink-000);--btn-outline-border:var(--ink-000)}

.mc-btn--solid{background:var(--btn-base);color:var(--btn-on);border-color:var(--btn-base)}
.mc-btn--solid:hover{background:var(--btn-hover);color:var(--btn-on);border-color:var(--btn-hover)}
.mc-btn--solid:active{background:var(--btn-press);color:var(--btn-on);border-color:var(--btn-press)}

.mc-btn--outline{background:transparent;color:var(--btn-outline-color);border-color:var(--btn-outline-border)}
.mc-btn--outline:hover{background:var(--btn-base);color:var(--btn-on);border-color:var(--btn-outline-border)}

.mc-btn:active{transform:translate(2px,2px)}

/* ============================================================
   En-tête
   ============================================================ */
/* position+z-index nécessaires : sans ça, .moc-hero (aussi position:relative, plus loin dans le DOM)
   passe par-dessus le sous-menu déroulant « Services » au même niveau d'empilement (z-index:auto). */
.moc-header{position:relative;z-index:10;background:#0E0C0C;border-bottom:1px solid rgba(246,243,236,.18)}
.moc-header__inner{max-width:1240px;margin:0 auto;padding:24px;display:flex;align-items:center;gap:32px}
.moc-header__logo{display:block;border-bottom:0;line-height:0}
.moc-header__logo img{height:100px;width:auto;display:block}
.moc-nav{display:flex;align-items:center;gap:24px;margin-left:auto;flex-wrap:wrap}
.moc-nav__link{font:700 16px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#E7E2D7}
.moc-nav__link:hover{color:#E7E2D7}

/* Liens sociaux */
.moc-social{display:flex;align-items:center;gap:16px}
.moc-social a{display:block;border-bottom:none;line-height:0;opacity:1}
.moc-social img{display:block;filter:invert(1)}

/* ============================================================
   Hero
   ============================================================ */
.moc-hero{position:relative;min-height:560px;display:grid;place-items:center;background:#262220;background-image:repeating-linear-gradient(135deg,rgba(246,243,236,.045) 0 2px,transparent 2px 9px);overflow:hidden}
.moc-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.moc-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,12,12,.78) 0%,rgba(14,12,12,.45) 45%,rgba(14,12,12,.82) 100%)}
.moc-hero__inner{position:relative;max-width:1240px;width:100%;padding:96px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}

/* Bouton pause de la vidéo du hero : discret, coin inférieur droit, masqué tant que la vidéo n'est pas en lecture. */
.moc-hero__toggle{position:absolute;right:var(--space-5);bottom:var(--space-5);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(14,12,12,.55);border:1px solid rgba(246,243,236,.45);border-radius:var(--radius-none);color:var(--ink-000);cursor:pointer;transition:var(--transition-control)}
.moc-hero__toggle:hover{background:rgba(14,12,12,.8);border-color:var(--ink-000)}
.moc-hero__toggle-icon{position:relative;display:block;width:10px;height:12px}
.moc-hero__toggle-icon::before,.moc-hero__toggle-icon::after{content:"";position:absolute;top:0;width:3px;height:12px;background:currentColor}
.moc-hero__toggle-icon::before{left:0}
.moc-hero__toggle-icon::after{right:0}
.moc-hero__toggle[aria-pressed="true"] .moc-hero__toggle-icon{width:0;height:0;background:none;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}
.moc-hero__toggle[aria-pressed="true"] .moc-hero__toggle-icon::before,.moc-hero__toggle[aria-pressed="true"] .moc-hero__toggle-icon::after{content:none}
.moc-hero__title{margin:0;font:900 clamp(46px,8vw,120px)/0.88 'Big Shoulders Display',sans-serif;text-transform:uppercase;letter-spacing:-.01em;color:#fff}
.moc-hero__lead{margin:0;max-width:58ch;font:400 21px/1.7 'Space Grotesk',sans-serif;color:#F6F3EC}
.moc-hero__actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   Manifeste
   ============================================================ */
.moc-manifesto{background:#F6F3EC;padding:128px 0}
.moc-manifesto__inner{max-width:1240px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.moc-manifesto__text{margin:0;max-width:48ch;font:400 26px/1.6 'Space Grotesk',sans-serif;color:#0E0C0C}

/* Séparateur */
.moc-divider{--c:var(--ink-300);display:flex;align-items:center;gap:16px;width:360px}
.moc-divider__line{flex:1;height:1px;background:var(--c)}
.moc-divider__mark{width:14px;height:14px;border:1px solid var(--c);transform:rotate(45deg);display:block;flex:0 0 auto}

/* ============================================================
   Services + cartes
   ============================================================ */
.moc-services{background:#0E0C0C;padding:128px 0}
.moc-services .moc-h2{margin:16px 0 0}
.moc-services .moc-lead{margin:16px 0 0;color:#E7E2D7}
/* « On imprime pour » : liens vers les pages par clientèle, sous les cartes de services. */
.moc-audiences{margin-top:72px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.moc-audiences__list{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 32px}
.moc-audiences__link{display:block;font:800 30px/1 var(--font-display);text-transform:uppercase;color:#FFFFFF;text-decoration:none;transition:color .2s}
.moc-audiences__link span{color:#E4321B;transition:margin .2s}
.moc-audiences__link:hover,.moc-audiences__link:focus-visible{color:#E4321B}
.moc-audiences__link:hover span{margin-left:6px}
@media (max-width:900px){.moc-audiences__list{grid-template-columns:repeat(2,1fr)}.moc-audiences__link{font-size:24px}}
.moc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:48px}
.moc-card{display:flex;flex-direction:column;text-decoration:none;background:var(--surface-card);color:var(--text-body);border:1px solid var(--border-hairline);border-radius:var(--radius-none);box-shadow:none}
.moc-card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.moc-card__kicker{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--jaune-500)}
.moc-card__title{margin:0;font:var(--weight-display) var(--size-xl)/1.02 var(--font-display);text-transform:uppercase;color:var(--text-display)}
.moc-card__text{font:var(--text-base);color:var(--text-muted)}

/* ============================================================
   Marques + bandeau
   ============================================================ */
.moc-brands{background:#E4321B;padding:56px 0 64px}
.moc-brands__head{max-width:1240px;margin:0 auto;padding:0 24px;text-align:center}
.moc-brands__head .moc-eyebrow{color:#0E0C0C}
.moc-brands__head .moc-h2{margin:16px 0 40px}
.mc-marquee{overflow:hidden;position:relative;background:transparent;border-top:none;border-bottom:none;padding:var(--space-6) 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.mc-marquee-track{gap:56px}
.mc-marquee__item{display:flex;align-items:center;flex:0 0 auto;font:var(--weight-display) var(--size-xl)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:var(--ink-000)}

/* ============================================================
   FAQ
   ============================================================ */
.moc-faq{background:#0E0C0C;padding:128px 0}
.moc-faq__inner{max-width:900px;margin:0 auto;padding:0 24px}
.moc-faq .moc-h2{margin:0 0 32px}
.moc-accordion{border-top:1px solid var(--border-hairline)}
.moc-accordion__item{border-bottom:1px solid var(--border-hairline)}
.moc-accordion__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-4);background:transparent;border:none;cursor:pointer;text-align:left;font:var(--weight-medium) var(--size-md)/1.3 var(--font-body);color:var(--text-display);transition:color var(--duration-fast) var(--ease-out)}
.moc-accordion__q[aria-expanded="true"]{color:var(--jaune-500)}
.moc-accordion__chev{width:10px;height:10px;flex:0 0 auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--duration-base) var(--ease-out)}
.moc-accordion__q[aria-expanded="true"] .moc-accordion__chev{transform:rotate(45deg) translate(-2px,-2px)}
.moc-accordion__a{padding:0 var(--space-4) var(--space-6);max-width:68ch;font:var(--text-base);color:var(--text-muted)}
.moc-accordion__a[hidden]{display:none}

/* ============================================================
   Pied de page
   ============================================================ */
.moc-footer{background:#0E0C0C;border-top:3px solid #E4321B;padding:64px 0 32px}
.moc-footer__grid{max-width:1240px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:48px;align-items:start}
.moc-footer__col{display:flex;flex-direction:column;gap:12px}
.moc-footer__col--brand{align-items:flex-start;gap:16px}
.moc-footer__logo{display:block;border-bottom:0;line-height:0}
.moc-footer__logo img{height:48px;width:auto;display:block;align-self:flex-start;margin-left:0}
.moc-footer__address{font:400 14px/1.7 'Space Grotesk',sans-serif;color:#A49D90}
.moc-footer__label{font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#A49D90}
.moc-footer__link{font:400 14px/1.5 'Space Grotesk',sans-serif;color:#E7E2D7}
.moc-footer__link:hover{color:#E7E2D7}
.moc-footer__note{margin:0;font:400 14px/1.5 'Space Grotesk',sans-serif;color:#A49D90}
.moc-newsletter{display:flex}
.moc-newsletter__msg{margin:0;font:var(--text-small)}
.moc-newsletter__msg--ok{color:var(--state-success)}
.moc-newsletter__msg--error{color:var(--rouge-400)}
.moc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Champ */
.moc-input{width:100%;padding:13px 14px;background:var(--ink-000);color:var(--ink-900);font:var(--text-base);border:var(--stroke-regular) solid transparent;border-radius:var(--radius-none);outline:none;transition:var(--transition-control)}
.moc-input:focus{border-color:var(--cyan-500)}

.moc-footer__bar{max-width:1240px;margin:48px auto 0;padding:16px 24px 0;border-top:1px solid rgba(246,243,236,.18);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font:700 12px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#7A7469}

/* Pages hors accueil (index.php) */
.moc-generic{max-width:900px;margin:0 auto;padding:96px 24px}
.moc-generic h1{font:800 46px/1.08 'Big Shoulders Display',sans-serif;margin-bottom:24px}
.moc-generic .entry{font:400 18px/1.7 'Space Grotesk',sans-serif;color:#E7E2D7}

/* ============================================================
   Page Soumission
   ============================================================ */

/* Bandeau */
.moc-banner{position:relative;min-height:360px;display:grid;place-items:center;background:var(--ink-700);background-image:repeating-linear-gradient(135deg,rgba(246,243,236,.045) 0 2px,transparent 2px 9px);overflow:hidden}
.moc-banner__wash{position:absolute;inset:0;background:var(--scrim-photo)}
.moc-banner--rouge .moc-banner__wash{background:linear-gradient(0deg,rgba(228,50,27,.62),rgba(228,50,27,.62)),var(--scrim-photo)}
.moc-banner__inner{position:relative;max-width:var(--container-max);width:100%;margin:0 auto;padding:var(--space-9) var(--gutter);display:flex;flex-direction:column;gap:var(--space-5);align-items:center;text-align:center}
.moc-banner__title{margin:0;font:var(--weight-display-max) clamp(46px,8vw,120px)/0.88 var(--font-display);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--ink-000)}
.moc-banner__lead{margin:0;max-width:58ch;font:var(--text-lead);color:var(--ink-050)}

/* Formulaire */
.moc-quote{background:#0E0C0C;padding:var(--section-pad-y) 0}
.moc-quote__narrow{max-width:var(--container-narrow);margin:0 auto}
.moc-form{background:var(--surface-card);border:1px solid var(--border-hairline);padding:var(--space-7);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.moc-form>*{min-width:0}
.moc-form__title{grid-column:1/-1;font:var(--weight-display) var(--size-2xl)/1 var(--font-display);text-transform:uppercase}
.moc-form__error{grid-column:1/-1;margin:0;padding:12px 16px;border:1px solid var(--rouge-500);color:var(--rouge-400);font:var(--text-small)}
.moc-form__checks{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--space-4)}
.moc-form__submit{grid-column:1/-1}

.moc-field{display:flex;flex-direction:column;gap:var(--space-2)}
.moc-field--wide{grid-column:1/-1}
.moc-field label{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.moc-field__req{color:var(--rouge-500)}
.moc-field__hint{font:var(--text-small);color:var(--text-muted)}
textarea.moc-input{resize:vertical}
/* Champ « Ton design » : bouton de choix de fichiers aux couleurs du site. */
.moc-file{cursor:pointer;padding:10px 12px}
.moc-file::file-selector-button{margin-right:var(--space-4);padding:10px 18px;border:var(--stroke-regular) solid var(--rouge-500);background:var(--rouge-500);color:var(--ink-000);font:var(--weight-bold) 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:var(--transition-control)}
.moc-file:hover::file-selector-button{background:var(--rouge-400);border-color:var(--rouge-400)}
.moc-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E0C0C' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}

/* Case à cocher */
.moc-check{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--space-3);cursor:pointer;font:var(--text-base);color:var(--text-body)}
.moc-check input{position:absolute;opacity:0;width:0;height:0}
.moc-check__box{width:20px;height:20px;flex:0 0 auto;border:var(--stroke-regular) solid var(--ink-300);background:transparent;display:grid;place-items:center;transition:var(--transition-control)}
.moc-check__box::after{content:"";width:9px;height:4px;border-left:2px solid var(--ink-000);border-bottom:2px solid var(--ink-000);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.moc-check input:checked+.moc-check__box{border-color:var(--rouge-500);background:var(--rouge-500)}
.moc-check input:checked+.moc-check__box::after{opacity:1}
.moc-check input:focus-visible+.moc-check__box{outline:2px solid var(--state-focus);outline-offset:2px}

/* Confirmation */
.moc-quote__done{background:var(--surface-card);border:1px solid var(--border-hairline);border-top:3px solid var(--rouge-500);padding:var(--space-8);text-align:center}
.moc-quote__done h2{margin-bottom:var(--space-4)}
.moc-quote__done p{color:var(--text-muted)}

@media (max-width:640px){
  .moc-form{grid-template-columns:1fr;padding:var(--space-5)}
  .moc-quote__done{padding:var(--space-6) var(--space-5)}
}

/* ============================================================
   Animations (assets/animations.js)
   États initiaux : actifs seulement quand <html> porte `moc-anim`, c'est-à-dire quand GSAP
   est chargé et que le visiteur n'a pas demandé moins de mouvement.
   ============================================================ */
.moc-anim [data-anim]:not([data-anim="stagger"]):not(.is-in),
.moc-anim [data-anim="stagger"]>*:not(.is-in),
.moc-anim .moc-header__logo:not(.is-in),
.moc-anim .moc-menu-toggle:not(.is-in),
.moc-anim .moc-nav>*:not(.is-in),
.moc-anim .moc-hero__inner>*:not(.is-in),
.moc-anim .moc-banner__inner>*:not(.is-in){visibility:hidden}

/* Le bandeau des marques est piloté par GSAP (vitesse liée au défilement) : on coupe la version CSS. */
.moc-anim .mc-marquee-track{animation:none}

/* La FAQ s'ouvre en hauteur : le contenu ne doit pas déborder pendant l'animation. */
.moc-accordion__a{overflow:hidden}

/* Cartes de services : léger décalage « hors-registre » au survol. */
.moc-card{transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}
.moc-card:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-print-red)}

/* ============================================================
   Pages de contenu (page.php) : texte de l'éditeur WordPress sur fond papier
   (même traitement que le manifeste de l'accueil et la section claire de la maquette « À propos »)
   ============================================================ */
.moc-anim [data-anim="each"]>*:not(.is-in){visibility:hidden}

.moc-content-section{background:var(--surface-page-alt);padding:var(--section-pad-y) 0}
.moc-content{max-width:var(--container-narrow);margin:0 auto;color:var(--text-on-light)}
.moc-content>*:first-child{margin-top:0}
.moc-content>*:last-child{margin-bottom:0}
.moc-content p{margin:0 0 var(--space-5);font:var(--weight-regular) var(--size-md)/var(--leading-loose) var(--font-body);color:var(--text-on-light)}
.moc-content h2{margin:var(--space-8) 0 var(--space-4);font:var(--text-h2);text-transform:uppercase;letter-spacing:var(--tracking-display);color:var(--text-on-light)}
.moc-content h3{margin:var(--space-7) 0 var(--space-3);font:var(--weight-display) var(--size-xl)/1.02 var(--font-display);text-transform:uppercase;color:var(--text-on-light)}
.moc-content h4{margin:var(--space-6) 0 var(--space-2);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--rouge-500)}
.moc-content a{color:var(--rouge-500);border-bottom:1px solid currentColor}
.moc-content a:hover{color:var(--rouge-600);border-bottom-color:currentColor}
.moc-content ul,.moc-content ol{margin:0 0 var(--space-5);padding-left:1.25em;font:var(--weight-regular) var(--size-md)/var(--leading-loose) var(--font-body)}
.moc-content li{margin-bottom:var(--space-2)}
.moc-content blockquote{margin:var(--space-7) 0;padding:0 0 0 var(--space-5);border-left:3px solid var(--rouge-500)}
.moc-content blockquote p{font:var(--weight-medium) var(--size-xl)/1.4 var(--font-body)}
.moc-content cite{font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-light-muted);font-style:normal}
.moc-content figure{margin:var(--space-7) 0}
.moc-content img{display:block;max-width:100%;height:auto;border-radius:var(--radius-none)}
.moc-content figcaption{margin-top:var(--space-2);font:var(--text-small);color:var(--text-on-light-muted);text-align:left}
.moc-content .wp-block-separator,.moc-content hr{margin:var(--space-7) 0;border:0;border-top:1px solid var(--border-on-light);background:none;opacity:1}
.moc-content .wp-block-columns{gap:var(--space-6)}
/* Tableaux (grilles de prix des pages Conseils) : défilement horizontal sur mobile plutôt que débordement. */
.moc-content .wp-block-table{margin:var(--space-6) 0;overflow-x:auto}
.moc-content table{width:100%;border-collapse:collapse;font:var(--weight-regular) var(--size-xs)/1.4 var(--font-body)}
.moc-content th,.moc-content td{padding:10px 12px;border:0;border-bottom:1px solid var(--border-on-light);text-align:left;white-space:nowrap}
.moc-content thead th{border-bottom:2px solid var(--ink-900);font:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.moc-content .wp-block-table figcaption{white-space:normal}
.moc-content .wp-block-button__link{padding:13px 26px;border:var(--stroke-regular) solid var(--rouge-500);border-radius:var(--radius-none);background:var(--rouge-500);color:var(--ink-000);font:var(--weight-bold) 14px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;transition:var(--transition-control)}
.moc-content .wp-block-button__link:hover{background:var(--rouge-400);border-color:var(--rouge-400);color:var(--ink-000)}
.moc-content .is-style-outline>.wp-block-button__link{background:transparent;color:var(--ink-900);border-color:var(--ink-900)}
.moc-content .is-style-outline>.wp-block-button__link:hover{background:var(--ink-900);color:var(--ink-000)}

/* ============================================================
   Logo adaptatif, consentement, lien de politique
   ============================================================ */
@media (max-width:640px){
  .moc-header__logo img{height:72px}
}
.moc-footer__consent{margin:0;font:400 12px/1.5 'Space Grotesk',sans-serif;color:#A49D90}
.moc-form__consent{grid-column:1/-1;margin:0;font:var(--text-small);color:var(--text-muted)}
.moc-footer__bar a{color:#7A7469}
.moc-footer__bar a:hover{color:#E7E2D7}

/* ============================================================
   Menu compact (écrans ≤ 900 px) — assets/main.js
   Le menu n'est replié que si `moc-js` est posé : sans script, la navigation reste visible.
   ============================================================ */
.moc-menu-toggle{display:none;width:48px;height:48px;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:transparent;color:var(--ink-000);border:var(--stroke-regular) solid var(--ink-000);border-radius:var(--radius-none);cursor:pointer;transition:var(--transition-control)}
.moc-menu-toggle:hover{background:var(--ink-000);color:var(--ink-900)}
.moc-menu-toggle__bar{display:block;width:20px;height:2px;background:currentColor;transition:transform var(--duration-base) var(--ease-out),opacity var(--duration-fast) var(--ease-out)}
.moc-menu-toggle[aria-expanded="true"] .moc-menu-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.moc-menu-toggle[aria-expanded="true"] .moc-menu-toggle__bar:nth-child(2){opacity:0}
.moc-menu-toggle[aria-expanded="true"] .moc-menu-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Sous-menu « Services » dans le menu principal. */
.moc-nav__item{position:relative;display:flex;align-items:center}
.moc-nav__dropdown{list-style:none;margin:0;padding:0}

@media (min-width:1101px){
  .moc-nav__dropdown{position:absolute;top:100%;left:0;min-width:220px;margin-top:var(--space-2);background:var(--ink-900);border:1px solid var(--border-hairline);padding:var(--space-2) 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),visibility var(--duration-fast)}
  .moc-nav__item:hover .moc-nav__dropdown,
  .moc-nav__item:focus-within .moc-nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
  .moc-nav__dropdown li{margin:0}
  .moc-nav__dropdown a{display:block;padding:var(--space-2) var(--space-4);font:700 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-100);white-space:nowrap}
  .moc-nav__dropdown a:hover{background:var(--ink-800);color:var(--ink-000)}
}

@media (max-width:1100px){
  .moc-header__inner{flex-wrap:wrap;gap:0 32px}
  .moc-menu-toggle{display:inline-flex;margin-left:auto}
  .moc-nav{flex:0 0 100%;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;margin-left:0;padding-top:var(--space-4)}
  .moc-js .moc-nav:not(.is-open){display:none}
  .moc-nav__link{padding:var(--space-4) 0;border-bottom:1px solid var(--border-hairline)}
  .moc-nav__link:hover{border-bottom-color:var(--ink-000)}
  .moc-nav__item{flex-direction:column;align-items:stretch}
  .moc-nav__item .moc-nav__link{border-bottom:none;padding-bottom:var(--space-2)}
  .moc-nav__dropdown{display:flex;flex-direction:column;gap:var(--space-1);padding:0 0 var(--space-4) var(--space-4);border-bottom:1px solid var(--border-hairline)}
  .moc-nav__dropdown a{font:400 15px/1.6 'Space Grotesk',sans-serif;color:var(--ink-300)}
  .moc-nav__dropdown a:hover{color:var(--ink-000)}
  .moc-nav .mc-btn{margin-top:var(--space-5);align-self:stretch}
  .moc-nav .moc-social{margin-top:var(--space-5);padding-bottom:var(--space-2)}
}

/* Lien d'évitement : visible seulement au clavier */
.moc-skip{position:absolute;left:-9999px;top:0;z-index:100000;padding:12px 16px;background:var(--rouge-500);color:var(--ink-000);font:700 14px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.moc-skip:focus{left:16px;top:16px}
.moc-skip:hover{color:var(--ink-000)}

/* ============================================================
   Grille du portfolio (page /portfolio/) : mosaïque de photos, sans légende.
   Insérée comme bloc HTML dans le contenu de la page.
   ============================================================ */
.moc-portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);margin:0;width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.moc-content .moc-portfolio-item{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-sunken,var(--ink-800));margin:0}
/* Sur la page Portfolio seulement : le padding de la section reprend la même mesure que l'écart entre les photos. */
.moc-content-section--portfolio{padding:var(--space-3) 0}
.moc-portfolio-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--duration-base) var(--ease-out)}
.moc-portfolio-item:hover img{transform:scale(1.04)}
/* Rangée de 4 photos au fil du texte (pages « Pour qui ») : largeur du texte, pas pleine largeur. */
.moc-portfolio-grid.moc-portfolio-grid--inline{grid-template-columns:repeat(4,1fr);width:auto;left:auto;right:auto;margin:var(--space-7) 0}
@media (max-width:640px){.moc-portfolio-grid.moc-portfolio-grid--inline{grid-template-columns:repeat(2,1fr)}}

/* Bouton d'appel à l'action inséré comme bloc HTML dans le contenu des pages de service.
   Sans ces règles, .moc-content a (plus spécifique que .mc-btn--solid) écraserait la
   couleur du bouton et son soulignement rendrait le texte invisible sur fond plein. */
.moc-content__cta{margin-top:var(--space-7)}
.moc-content .mc-btn{border-bottom:0}
.moc-content .mc-btn--solid,.moc-content .mc-btn--solid:hover{color:var(--btn-on)}
.moc-content .mc-btn--outline{color:var(--btn-outline-color)}
.moc-content .mc-btn--outline:hover{color:var(--btn-on)}