/* La marque V4.1 — 22/10/2026 : corps de la page (l’ouverture .marque-ouverture est dans theme.css). */
.marque-v4 { color: var(--charbon); background: var(--blanc); }
.marque-v4 :is(figure, p, h1, h2, h3) { margin: 0; }
.marque-v4 :is(h1, h2, h3) { font-weight: 400; letter-spacing: .01em; text-wrap: balance; }
.marque-v4 h2 { font-size: clamp(2.5rem, 4.7vw, 4.6rem); line-height: 1.08; }
.marque-v4 p { text-wrap: pretty; }
.marque-v4 section[id] { scroll-margin-top: 100px; }
.m4-container { width: min(100% - 2 * var(--gouttiere), 1280px); margin-inline: auto; }
.marque-v4 .m4-label { font: 500 var(--t-12)/1.6 var(--font-texte); text-transform: uppercase; letter-spacing: .14em; }
.m4-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 24px; font: 500 var(--t-12)/1.5 var(--font-texte); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; color: inherit; }
.m4-link > span { font-size: 22px; line-height: 1; transition: transform 180ms cubic-bezier(.2,.7,.2,1); }
.marque-v4 :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 7px; }
.marque-v4 .m4-link:active { opacity: .75; }

.m4-logo { display: block; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.m4-logo:disabled { cursor: default; opacity: 1; }
.m4-logo svg { display: block; width: 100%; height: auto; fill: currentColor; }
.m4-motion-path { fill: currentColor; stroke: currentColor; stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-opacity: 0; }

.m4-story { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding-block: var(--section); }
.m4-story h2 { margin-top: 32px; }
.m4-story__copy { padding-top: 8px; }
.marque-v4 .m4-lead { font-size: var(--t-24); line-height: 1.5; }
.m4-story__copy > p + p { margin-top: 28px; }

/* Signes crème sur bordeaux (charte p. 18 et 24 ; demande de Maxime du 22/10/2026 : plus de fond crème). */
.m4-signs { background: var(--bordeaux); color: var(--creme); padding-block: var(--section); }
.m4-signs a:hover { color: var(--creme); }
.m4-section-head { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.m4-section-head > .m4-label { padding-top: 8px; }
.m4-signs__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; }
.m4-sign { padding-inline: 8%; }
.m4-sign + .m4-sign { border-left: 1px solid rgb(242 239 225 / .35); }
.m4-sign__art { height: 300px; display: grid; place-items: center; }
.m4-logo--hand { width: 140px; }
.m4-logo--ey5 { width: 145px; }
.m4-sign__text { max-width: 430px; margin-inline: auto; }
.m4-sign h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin-block: 14px 22px; }
.marque-v4 .m4-signs__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 28px; margin-top: 48px; text-align: center; }

.m4-craft { padding-block: var(--section); }
.m4-craft h2 { font-size: clamp(2.2rem, 3.8vw, 3.8rem); }
.m4-craft__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; }
.m4-craft__grid > div { border-top: 1px solid var(--charbon); padding-top: 24px; }
.m4-craft__grid h3 { font: 500 var(--t-12)/1.6 var(--font-texte); letter-spacing: .14em; margin-bottom: 20px; }

/* Bandeau pleine largeur sous « Ce que nous défendons » (Maxime, 22/10/2026) : les deux photos côte à côte, comme dans la maquette 134. */
.m4-bandeau { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.m4-bandeau figure { position: relative; aspect-ratio: 720 / 390; overflow: hidden; }
.m4-bandeau img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m4-bandeau figure:first-child img { object-position: 50% 40%; }
.m4-bandeau figure:last-child img { object-position: 50% 35%; }
.m4-bandeau figcaption { position: absolute; left: var(--gouttiere); bottom: 4px; font-size: var(--t-12); color: var(--blanc); text-shadow: 0 1px 10px rgb(0 0 0 / .3); }
/* Légende cliquable vers le coloris porté (Maxime, 22/10/2026 : Torii Sun C2S, verres bleutés) ; cible agrandie pour le doigt, blanc au survol (pas le bordeaux des liens sur la photo). */
.m4-bandeau figcaption a { display: inline-block; padding-block: 12px; text-decoration: underline; }
.m4-bandeau figcaption a:hover { color: var(--blanc); opacity: .8; }

/* Montures portées sur l'ouverture (Maxime, 25/10/2026), comme la légende du bandeau : elle à gauche, lui à droite. */
.marque-ouverture__montures { position: absolute; inset: auto var(--gouttiere) 4px; display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-12); color: var(--blanc); text-shadow: 0 1px 10px rgb(0 0 0 / .3); }
.marque-ouverture__montures a { display: inline-block; padding-block: 12px; text-decoration: underline; }
.marque-ouverture__montures a:hover { color: var(--blanc); opacity: .8; }

/* Section 04 en « défilé » (Maxime, 23/10/2026 : le bloc prenait trop de place, 1 835 px à 1 440 ; variante B de
   56-page-la-marque/v4-1/proposition-supakitch-compact, ≈ 820 px) : titre d'une ligne sur les colonnes des autres sections,
   texte et signature côte à côte, puis la bande où l'atelier et la série limitée défilent. */
.m4-artist { background: var(--charbon); color: var(--creme); padding-block: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 4rem); }
.m4-artist__title h2 { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.05; }
.m4-artist__story { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 460px); justify-content: space-between; gap: 64px; margin-top: 48px; align-items: start; }
.m4-artist__copy .m4-label { margin-bottom: 18px; }
.m4-artist__copy > p + p { margin-top: 18px; }
.m4-calli { display: grid; grid-template-columns: 120px 1fr; gap: 32px; align-items: center; }
.m4-calli:not(:has(.m4-calli__image)) { grid-template-columns: 1fr; }
/* Calligraphie en blanc au lieu du doré (Maxime, 22/10/2026) : traits du PNG passés en blanc, transparence gardée ; charte p. 18, blanc sur sombre. */
.m4-calli__image img { display: block; width: 120px; height: auto; filter: brightness(0) invert(1); }
.m4-quote { margin: 0; }
.m4-quote p { font: 400 var(--t-24)/1.2 var(--font-titre); letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; }
.m4-quote footer { margin-top: 10px; }
.m4-calli__texte > p { max-width: 380px; margin-top: 18px; font-size: 16px; }
/* La bande : l'atelier et la série limitée défilent lentement, d'eux-mêmes (75 s par tour, pause au survol et au clavier) ;
   le ruban est doublé pour boucler sans couture (−50 % moins la moitié de l'écart entre les deux copies). */
.m4-defile { margin-top: clamp(40px, 5vw, 64px); overflow: hidden; }
/* 150 s pour deux séries (75 s pour une avant le 31/10/2026) : même vitesse, ≈ 14 px/s au bureau. */
.m4-defile__ruban { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; animation: m4-defile 150s linear infinite; }
.m4-defile:hover .m4-defile__ruban, .m4-defile:focus-within .m4-defile__ruban { animation-play-state: paused; }
.m4-defile__ruban li { flex: none; }
.m4-defile__ruban img { display: block; height: 260px; width: auto; }
.m4-defile__ruban figcaption { font-size: var(--t-12); line-height: 1.6; margin-top: 10px; }
@keyframes m4-defile { to { transform: translateX(calc(-50% - 7px)); } }

.m4-discover { padding-block: clamp(4rem, 7vw, 6.5rem); text-align: center; }
.m4-discover h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 32px; }
.m4-discover__links { display: flex; flex-wrap: wrap; gap: 24px 48px; justify-content: center; }
@media (hover: hover) and (pointer: fine) {
  .m4-link:hover > span { transform: translateX(4px); }
  .m4-link[href^="#"]:hover > span { transform: translateY(3px); }
}
@media (max-width: 1000px) {
  .m4-section-head { grid-template-columns: 1fr 1.6fr; }
  .m4-story { gap: 6%; }
  .m4-sign { padding-inline: 6%; }
  .m4-craft__grid { gap: 28px; }
  .m4-artist__story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 700px) {
  /* Photo recadrée sur elle : logotype blanc posé bas, au-dessus du EY5 (choix de Maxime, 22/10). */
  .marque-ouverture__montures .marque-ouverture__lui { display: none; }
  .m4-story { grid-template-columns: 1fr; gap: 36px; }
  .m4-story h2 { margin-top: 24px; }
  .m4-story__copy { padding-top: 0; }
  .m4-story__copy > p + p { margin-top: 22px; }
  .m4-section-head { grid-template-columns: 1fr; gap: 24px; }
  .m4-section-head > .m4-label { padding-top: 0; }
  .marque-v4 h2 { font-size: clamp(1.9rem, 8.4vw, 3.5rem); } /* « MONOGRAMME. » tient à 320 px */
  .m4-signs__grid { margin-top: 22px; grid-template-columns: 1fr; }
  .m4-sign { padding-inline: 8px; }
  .m4-sign + .m4-sign { border-left: none; border-top: 1px solid rgb(242 239 225 / .35); margin-top: 40px; padding-top: 12px; }
  .m4-sign__art { height: 260px; }
  .m4-logo--hand { width: 118px; }
  .m4-logo--ey5 { width: 125px; }
  .marque-v4 .m4-signs__more { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 36px; text-align: left; }
  .m4-craft h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .m4-craft__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; }
  .m4-craft__grid > div { padding-top: 20px; }
  .m4-craft__grid h3 { margin-bottom: 12px; }
  .m4-bandeau { grid-template-columns: 1fr; }
  .m4-bandeau figure { aspect-ratio: 3 / 2; }
  .m4-artist__story { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .m4-calli { grid-template-columns: 90px 1fr; gap: 20px; padding-top: 24px; border-top: 1px solid rgb(242 239 225 / .35); }
  .m4-calli__image img { width: 90px; }
  .m4-defile__ruban img { height: 200px; }
  .m4-discover h2 { font-size: clamp(1.9rem, 7vw, 2.4rem); }
  .m4-discover__links { flex-direction: column; align-items: stretch; gap: 12px; text-align: left; }
}
@media (max-width: 360px) {
  body:has(.marque-v4) .entete__barre, body:has(.marque-v4) .entete__outils { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .marque-v4 .m4-motion-path { fill-opacity: 1 !important; stroke-opacity: 0 !important; }
  .m4-defile { overflow-x: auto; scrollbar-width: none; }
  .m4-defile__ruban { animation: none; }
  .m4-defile__ruban li[aria-hidden] { display: none; }
  .m4-link > span { transition: none; }
  .m4-link:hover > span { transform: none; }
}

/* V2 — photos en grand et diptyques. Fond blanc et navigation allégée (25/10/2026). Chapitre 03 uniquement. */
.m4-craft--compact { padding-block: clamp(48px, 5vw, 72px); }
/* Une navigation lisible sous la photo, sans masquer le visuel. */
.detail-slider { --detail-photo-start: 38.77551%; --detail-photo-height: clamp(240px, 74vw, 330px); --detail-navigation-height: 80px; position: relative; margin-top: 32px; }
.detail-slider.is-ready { padding-bottom: var(--detail-navigation-height); }
.detail-navigation { display: none; }
.detail-slider.is-ready .detail-navigation { position: absolute; z-index: 2; inset: auto 0 0 var(--detail-photo-start); height: var(--detail-navigation-height); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: 28px 52px; align-items: center; color: var(--charbon); }
.detail-arrow { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; box-shadow: none; font: 400 12px/1.4 var(--font-texte); cursor: pointer; }
.detail-arrow svg { display: block; flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.detail-arrow--prev { grid-column: 1; grid-row: 2; justify-self: start; }
.detail-arrow--next { grid-column: 3; grid-row: 2; justify-self: end; }
.detail-arrow:active { opacity: .5; }
.detail-dots { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; width: 100%; }
.detail-dot { display: grid; place-items: center; min-width: 0; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.detail-dot::before { content: ''; width: 100%; height: 2px; background: #ded9d5; }
.detail-dot[aria-current="true"]::before { background: var(--bordeaux); }
.detail-position { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-inline: 8px; text-align: center; }
.detail-position__count { font: 500 12px/1.25 var(--font-texte); font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.detail-position__total { color: #766c68; }
.detail-position__name { font: 400 11px/1.4 var(--font-texte); }
.detail-navigation button:focus-visible { outline: 1px solid var(--bordeaux); outline-offset: 2px; }
.detail-panels { position: relative; }
.detail-panel { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr); align-items: stretch; margin-top: 36px; background: #fff; color: var(--charbon); }
.detail-panel:first-child { margin-top: 0; }
.detail-slider.is-ready .detail-panels { display: grid; }
.detail-slider.is-ready .detail-panel { touch-action: pan-y pinch-zoom; cursor: grab; grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms var(--courbe), visibility 200ms; }
.detail-slider.is-ready .detail-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.detail-slider.is-instant .detail-panel { transition: none; }
.detail-slider.is-ready .detail-panel.is-dragging { cursor: grabbing; }
.detail-image { grid-column: 2; grid-row: 1; min-width: 0; position: relative; display: grid; overflow: hidden; min-height: 500px; background: #faf4ea; touch-action: pan-y pinch-zoom; }
.detail-shot { position: relative; min-width: 0; overflow: hidden; }
.detail-shot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.detail-image--pair { grid-template-columns: 1.05fr 1fr; gap: 3px; }
.marque-v4 .detail-image figcaption { position: absolute; left: 20px; bottom: 18px; max-width: calc(100% - 40px); padding: 7px 10px; background: #faf4ea; color: #402020; font: 500 10px/1.4 var(--font-texte); letter-spacing: .06em; text-transform: uppercase; }
.detail-copy { grid-column: 1; grid-row: 1; min-width: 0; padding: 36px clamp(24px, 3vw, 44px) 40px; display: flex; flex-direction: column; justify-content: center; }
.detail-kicker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; font: 500 10px/1.4 var(--font-texte); letter-spacing: .12em; text-transform: uppercase; }
.detail-kicker b { font: 400 48px/1 var(--font-titre); letter-spacing: -.02em; }
.detail-kicker > span { opacity: .65; }
.marque-v4 .detail-copy h3 { margin-bottom: 24px; font-size: clamp(2rem, 3.25vw, 3rem); line-height: .98; letter-spacing: 0; text-wrap: balance; }
.detail-copy h3 > span, .detail-copy h3 > em { display: block; }
.marque-v4 .detail-copy p { font-size: 16px; line-height: 1.5; }
.marque-v4 .detail-copy p + p { margin-top: 16px; }
.marque-v4 .detail-copy .detail-lead { margin-bottom: 20px; font-style: italic; font-size: 15px; }

@media (hover: hover) and (pointer: fine) {
  .detail-arrow:hover { color: var(--bordeaux); background: transparent; opacity: .65; }
  .detail-dot:hover::before { background: var(--bordeaux); }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .detail-slider { --detail-photo-start: 46.51163%; }
  .detail-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .detail-copy { padding: 28px 24px; }
  .detail-kicker { margin-bottom: 22px; }
  .marque-v4 .detail-copy h3 { font-size: 34px; }
}
@media (max-width: 700px) {
  .detail-slider { margin-top: 26px; }
  .detail-slider.is-ready { padding-bottom: 0; }
  .detail-slider.is-ready .detail-navigation { inset: var(--detail-photo-height) 0 auto 0; }
  .detail-slider.is-ready .detail-copy { padding-top: calc(var(--detail-navigation-height) + 24px); }
  .detail-panel { grid-template-columns: 1fr; align-content: start; }
  .detail-image { grid-column: 1; grid-row: 1; height: var(--detail-photo-height); min-height: 0; }
  .detail-image--pair { grid-template-columns: 1fr 1fr; }
  .detail-copy { grid-column: 1; grid-row: 2; padding: 24px; justify-content: start; }
  .detail-kicker { margin-bottom: 18px; }
  .detail-kicker b { font-size: 36px; }
  .marque-v4 .detail-copy h3 { font-size: clamp(30px, 9vw, 38px); margin-bottom: 20px; }
  .marque-v4 .detail-copy p { font-size: 15px; line-height: 1.5; }
  .marque-v4 .detail-copy p + p { margin-top: 14px; }
  .marque-v4 .detail-copy .detail-lead { font-size: 14px; margin-bottom: 16px; }
  .marque-v4 .detail-image figcaption { left: 12px; bottom: 12px; max-width: calc(100% - 24px); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-slider.is-ready .detail-panel { transition: none; }
}