/* ==========================================================================
   Monclar Studio : pages RÉALISATIONS, JOURNAL et STUDIO (équipe, méthode, offres, questions)
   Complète css/site.css (variables, grille, blocs communs). Aucune nouvelle couleur, aucune ombre ; rayons : --r (16 px) et --r-s (8 px, vignettes).
   ========================================================================== */

/* ---------- marqueur « à compléter » (palette du projet, souligné pointillé) ---------- */
mark.todo { background: transparent; color: inherit; font-family: var(--f-text); font-size: var(--t-label); letter-spacing: .02em;
  text-decoration: underline dotted currentColor; text-underline-offset: 3px; }

/* ---------- ratios supplémentaires ---------- */
.r-7-9 { aspect-ratio: 7 / 9; } .r-3-2 { aspect-ratio: 3 / 2; } .r-1-1 { aspect-ratio: 1 / 1; }
.pic--contain { background: var(--paper-2); }
.pic--contain img { object-fit: contain; }
.dark .pic--contain { background: color-mix(in oklab, var(--green) 78%, var(--ink)); }
.cap--on { padding-top: 10px; }
.cap small { font-family: var(--f-text); font-size: var(--t-label); color: var(--ink-2); letter-spacing: .02em; }
.dark .cap .lbl, .dark .cap small { color: rgba(249, 246, 242, .82); }
.dark .cap__n { color: var(--paper) !important; } /* contraste : numéro de légende sur fond vert */

/* ---------- vidéo muette en boucle (site en mouvement) ---------- */
.vid { display: block; width: 100%; height: auto; background: var(--paper-2); border-radius: var(--r); }
.dark .vid { background: color-mix(in oklab, var(--green) 78%, var(--ink)); }

/* ==========================================================================
   RÉALISATIONS : la planche-contact complète
   ========================================================================== */
.cs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(88px, 10vw, 152px);
  padding: clamp(56px, 6vw, 88px) var(--m) clamp(96px, 11vw, 160px); }
.cs a { text-decoration: none; }
.cs .marks { inset: 28px var(--m) 24px; }
.cs__it { display: grid; grid-template-columns: subgrid; grid-column: 1 / 13; align-items: start; }
.cs__img { grid-column: 1 / 8; }
.cs__txt { grid-column: 9 / 13; display: grid; gap: 18px; align-content: start; padding-top: clamp(24px, 3vw, 48px); }
.cs__txt .cap { padding-top: 0; }
.cs__txt .data { margin-top: 4px; }
.cs__txt p { color: var(--ink-2); max-width: 26em; }
.cs__side { grid-column: 9 / 13; display: grid; gap: 14px; align-content: start; }
.cs__side .pic { background: none; border-radius: 0; }
.cs__side .pic img { object-fit: contain; object-position: left top; }
.cs__side .lbl { color: var(--ink-2); display: block; margin-top: 6px; }
/* 01 : 3C, grande image à gauche, texte sous l'image, 5 étapes en colonne à droite */
.cs__it--01 .cs__img { grid-column: 1 / 9; }
.cs__it--01 .cs__txt { grid-column: 1 / 7; padding-top: 0; margin-top: 20px; }
.cs__it--01 .cs__side { grid-column: 10 / 13; grid-row: 1 / 3; }
.cs__steps { display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--g); }
.cs__steps li:nth-child(3) { grid-column: 1 / 3; }
.cs__steps .pic { aspect-ratio: 1 / 1; border-radius: var(--r-s); }
.cs__steps li:nth-child(3) .pic { aspect-ratio: 3 / 1; }
/* 02 : ARC, texte à gauche, image à droite */
.cs__it--02 .cs__img { grid-column: 5 / 13; }
.cs__it--02 .cs__txt { grid-column: 1 / 4; grid-row: 1; padding-top: clamp(64px, 8vw, 128px); }
/* 03 : Auto Pro Wash, affiche portrait et site */
.cs__it--03 .cs__img { grid-column: 1 / 5; }
.cs__it--03 .cs__img2 { grid-column: 6 / 13; margin-top: clamp(72px, 9vw, 144px); }
.cs__it--03 .cs__txt { grid-column: 6 / 11; grid-row: 1; padding-top: 0; }
/* 04 : Refuge, site large et logo nuit sur encre */
.cs__it--04 .cs__img { grid-column: 2 / 9; }
.cs__it--04 .cs__ink { grid-column: 9 / 13; background: var(--ink); padding: 12%; display: grid; place-items: center; aspect-ratio: 1 / 1; margin-top: clamp(40px, 5vw, 80px); border-radius: var(--r); }
.cs__it--04 .cs__ink img { width: 100%; height: auto; }
.cs__it--04 .cs__txt { grid-column: 2 / 7; padding-top: 0; margin-top: 20px; }
/* 05 : Lyra, site et version mobile côte à côte */
.cs__it--06 .cs__img { grid-column: 2 / 9; }
.cs__it--06 .cs__img2 { grid-column: 9 / 13; margin-top: clamp(48px, 6vw, 96px); }
.cs__it--06 .cs__txt { grid-column: 2 / 7; grid-row: 2; padding-top: 0; margin-top: 20px; }
.cs__it--06 .cs__img2 .cap { padding-top: 10px; }
.cs__it--05 .cs__img { grid-column: 1 / 8; }
.cs__it--05 .cs__img2 { grid-column: 8 / 13; margin-top: clamp(48px, 6vw, 96px); }
.cs__it--05 .cs__txt { grid-column: 8 / 13; grid-row: 1; padding-top: 0; }
.cs__it--05 .cs__img2 .cap { padding-top: 10px; }
.cs__it--05 .cs__img2 .cap .lbl { font-size: var(--t-label); }
.cs__count { grid-column: 4 / 13; color: var(--ink-2); }

/* concepts : liste-index avec vidéo muette en vignette */
.idx .vid { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-s); }
.idx--cs a { grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr) 24px; padding: 16px 0; }

/* ==========================================================================
   ÉTUDES DE CAS
   ========================================================================== */
/* étapes : label à gauche (facultatif), titre colonnes 4-6, texte 7-12, image sous le texte ; l’ordre est porté par la mise en page */
.step { padding-inline: var(--m); }
.sec .step { padding-inline: 0; grid-column: 1 / 13; }
.step li { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: 20px;
  padding: 22px 0 clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }
.step li:last-child { border-bottom: 1px solid var(--rule); }
.step__n { grid-column: 1 / 4; color: var(--green-2); }
.step__t { grid-column: 4 / 7; font-size: var(--t-body); font-weight: 600; }
.step__d { grid-column: 7 / 12; display: grid; gap: 1em; color: var(--ink-2); max-width: 36em; }
.step__fig { grid-column: 4 / 13; margin-top: 12px; }
.step__fig--l { grid-column: 1 / 8; }
.step__fig--r { grid-column: 7 / 13; }
.step__fig--s { grid-column: 4 / 9; }
.step__fig .cap { padding-top: 10px; }
.step__pair { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--g); margin-top: 12px; align-items: start; }
.step__pair--3 { grid-template-columns: 3fr 2fr; }
.step__pair .pic { background: var(--paper-2); }
.dark .step li { border-color: var(--rule-dk); }
.dark .step__n { color: var(--paper); }
.dark .step__d { color: rgba(249, 246, 242, .78); }
.motion .step li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--paper); transform-origin: right; transition: transform var(--t-slow) var(--ease); }
.motion .dark .step li::before { background: var(--ink); }
.motion .step li.is-in::before { transform: scaleX(0); }

/* variante 3C : étapes en frise, image au-dessus, texte sous l'image (une étape = une colonne) */
.steps-row { grid-column: 1 / 13; display: grid; grid-template-columns: 2fr 2fr 3fr 2fr 2fr; column-gap: var(--g); row-gap: 48px; align-items: end; }
.steps-row li { display: grid; gap: 14px; border-top: 1px solid var(--ink); padding-top: 14px; }
.steps-row .pic { background: none; border-radius: 0; }
.steps-row .pic img { object-fit: contain; object-position: left bottom; }
.steps-row .lbl { color: var(--green-2); }
.steps-row h3 { font-size: var(--t-h3); font-weight: 600; }
.steps-row p { color: var(--ink-2); }
.steps-row li:nth-child(1) .pic { aspect-ratio: 777 / 900; }
.steps-row li:nth-child(2) .pic { aspect-ratio: 661 / 900; }
.steps-row li:nth-child(3) .pic { aspect-ratio: 1100 / 349; }
.steps-row li:nth-child(4) .pic { aspect-ratio: 673 / 800; }
.steps-row li:nth-child(5) .pic { aspect-ratio: 900 / 688; }

/* toutes les vues : grille de captures, 2 ou 3 colonnes, légendes en petit texte */
.vues { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 44px var(--g); }
.vues figure { display: grid; gap: 10px; }
.vues .pic { background: var(--paper-2); }
.vues figcaption { color: var(--ink-2); }
.vues--off figure:nth-child(even) { margin-top: clamp(32px, 4vw, 64px); }
.dark .vues .pic { background: color-mix(in oklab, var(--green) 78%, var(--ink)); }
.dark .vues figcaption { color: rgba(249, 246, 242, .62); }

/* frise horizontale qui déborde à droite (pages du site, écran par écran) */
.frise { grid-column: 1 / 13; display: flex; gap: var(--g); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px;
  margin-inline: calc(-1 * var(--m)); padding-inline: var(--m); scrollbar-color: var(--green-2) transparent; scrollbar-width: thin; }
.frise figure { flex: 0 0 min(44vw, 620px); scroll-snap-align: start; display: grid; gap: 10px; }
.frise figure:first-child { flex-basis: min(60vw, 840px); }
.frise .pic { background: var(--paper-2); }
.frise figcaption { color: var(--ink-2); }
.frise figcaption b { color: var(--green-2); font-weight: 400; margin-right: .6em; }
.frise-note { grid-column: 4 / 13; color: var(--ink-2); margin-top: -8px; }
.dark .frise .pic { background: color-mix(in oklab, var(--green) 78%, var(--ink)); }
.dark .frise figcaption { color: rgba(249, 246, 242, .62); }
.dark .frise figcaption b, .dark .frise-note { color: var(--paper); }
.dark .frise-note { color: rgba(249, 246, 242, .62); }

/* paire de logos : jour sur papier, nuit sur encre */
.logo-pair { grid-column: 4 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); }
.logo-pair figure { display: grid; gap: 10px; }
.logo-pair .pic { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 10%; background: var(--paper-2); }
.logo-pair .pic img { width: 100%; height: auto; object-fit: contain; }
.logo-pair .pic--ink { background: var(--ink); }
.logo-pair figcaption { color: var(--ink-2); }

/* livrables en deux colonnes de texte (puces, sans lettres ni numéros) */
.livr { grid-column: 4 / 13; columns: 2; column-gap: calc(var(--g) * 2); }
.livr li { break-inside: avoid; padding: 10px 0 10px 2.2em; border-top: 1px solid var(--rule); position: relative; color: var(--ink-2); }
.livr li::before { content: ""; position: absolute; left: 2px; top: calc(10px + .75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.dark .livr li { border-color: var(--rule-dk); color: rgba(249, 246, 242, .78); }
.dark .livr li::before { background: var(--paper); }

/* résultat : chiffres en grand corps */
.data--res { grid-column: 4 / 13; }
.data--res dd { font-family: var(--f-text); font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.data--res dd small { display: block; font-family: var(--f-text); font-size: var(--t-label); font-weight: 400; text-transform: none; letter-spacing: .01em; color: var(--ink-2); margin-top: 10px; line-height: 1.5; }
.dark .data--res dd small { color: rgba(249, 246, 242, .62); }

/* lien externe vers le site livré */
.sec__aside a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.sec__aside a:hover { border-bottom-color: currentColor; }
.dark .sec__aside a { border-bottom-color: var(--rule-dk); }

/* ==========================================================================
   JOURNAL : index et colonne de lecture
   ========================================================================== */
.jx .ix__n { color: var(--ink-2); }
.jx .ix__t { grid-column: 4 / 8; font-weight: 500; font-size: var(--t-lead); line-height: 1.08; letter-spacing: -.01em; }
.jx .ix__d { grid-column: 8 / 12; }
.jx li { padding: 26px 0 30px; align-items: start; }
.jx .ix__t:hover { color: var(--green-2); }

.pg--art .pg__title { font-size: clamp(40px, 4.6vw, 72px); line-height: .92; grid-column: 1 / 11; text-transform: none; letter-spacing: -.015em; }
.pg--art .pg__intro { grid-column: 7 / 13; }

.art { grid-column: 4 / 10; max-width: 64ch; font-size: 18px; line-height: 1.55; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1em; }
.art > *, .sec .art .faq, .sec .art .quote, .sec .art .dip { margin: 0; grid-column: 1; } /* les blocs de site.css demandent 1 / 13 : on les ramène dans la colonne de lecture */
.art .faq { display: block; padding: 0; }
.art .faq details p { font-size: 17px; }
.art h2 { font-family: var(--f-head); font-style: normal; font-weight: 400; font-size: var(--t-lead); line-height: 1.08; letter-spacing: -.005em; font-feature-settings: "liga", "kern"; margin-top: 1.2em; text-wrap: balance; }
.art h2:first-child { margin-top: 0; }
.art h3 { font-size: 18px; font-weight: 600; margin-top: .6em; }
.art ul, .art ol { display: grid; gap: 0; }
.art li { position: relative; padding: 12px 0 12px 2.4em; border-top: 1px solid var(--rule); }
.art li:last-child { border-bottom: 1px solid var(--rule); }
.art ul li::before, .art ol li::before { content: ""; position: absolute; left: .7em; top: calc(12px + .75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.art a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color var(--t-fast) var(--ease); }
.art a:hover { border-bottom-color: currentColor; }
.art .lbl { display: block; }
.art__brief { border-top: 1px solid var(--ink); padding-top: 14px; }
.art__brief .lbl { color: var(--green-2); margin-bottom: 8px; }
.art__brief p { color: var(--ink-2); }
.art__side { grid-column: 10 / 13; display: grid; gap: 28px; align-content: start; color: var(--ink-2); position: sticky; top: calc(var(--hd) + 32px); }
.art__side > div { display: grid; gap: 6px; }
.art__side .lbl:first-child { color: var(--ink-2); }
.art__side a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.art__side a:hover { border-bottom-color: var(--ink); }
.art__side ol { display: grid; gap: 4px; }
.art__side ol a { border: 0; color: var(--ink-2); }
.art__side ol a:hover { color: var(--ink); }
.sec--art { row-gap: 40px; align-items: start; }
.faq--art { grid-column: 1 / 13; }
.faq--art details { grid-column: 4 / 10; }

/* ==========================================================================
   STUDIO : équipe, méthode, offres, questions
   ========================================================================== */
.who { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(64px, 8vw, 112px); }
.who article { grid-column: span 12; display: grid; grid-template-columns: subgrid; align-items: start; }
.who__pic { grid-column: 1 / 5; }
.who__pic .pic { aspect-ratio: 3 / 4; background: var(--paper-2); display: grid; place-items: end start; padding: 20px; }
.who__txt { grid-column: 6 / 11; display: grid; gap: 14px; padding-top: clamp(24px, 3vw, 48px); }
.who__name { font-family: var(--f-head); font-style: normal; font-weight: 400; text-transform: none; font-size: clamp(40px, 4.4vw, 64px); line-height: .9; letter-spacing: -.01em; }
.who__role { color: var(--green-2); }
.who__txt p:not(.lbl) { color: var(--ink-2); max-width: 30em; }
.who article:nth-child(2) .who__pic { grid-column: 8 / 12; grid-row: 1; }
.who article:nth-child(2) .who__txt { grid-column: 1 / 7; grid-row: 1; padding-top: clamp(64px, 8vw, 128px); }

/* méthode : la ligne du temps, 4 étapes verticales avec sous-liste */
.step__d ul { display: grid; gap: 6px; padding: 0; }
.step__d ul li { position: relative; padding-left: 1.4em; color: var(--ink-2); border: 0; display: block; }
.step__d ul li::before { content: "·"; position: absolute; left: .3em; color: var(--green-2); font-family: var(--f-text); }
.step--big .step__t { font-family: var(--f-head); font-style: normal; font-weight: 400; font-size: var(--t-lead); line-height: 1.08; letter-spacing: -.005em; font-feature-settings: "liga", "kern"; }
.step--big .step__n { font-size: var(--t-label); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; padding-top: .9em; color: var(--green-2); }

/* offres : conditions en liste à puces pleine largeur (sans lettres) */
.cond { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(var(--g) * 2); }
.cond li { position: relative; padding: 16px 0 18px 2.4em; border-top: 1px solid var(--rule); }
.cond li::before { content: ""; position: absolute; left: 2px; top: calc(16px + .75em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--green-2); }
.cond li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.cond h3 { font-size: var(--t-h3); font-weight: 600; margin-bottom: 6px; }
.cond p { color: var(--ink-2); }
.prix tbody th small { display: block; font-weight: 400; color: var(--ink-2); font-size: var(--t-body); margin-top: 2px; }
.prix .prix__p .lbl { display: block; font-size: var(--t-label); font-weight: 400; color: var(--ink-2); margin-top: 6px; }
.prix tbody tr[id] { scroll-margin-top: calc(var(--hd) + 24px); }

/* ---------- tablette ---------- */
@media (max-width: 1100px) {
  .art { grid-column: 4 / 11; }
  .art__side { grid-column: 11 / 13; position: static; }
  .frise figure { flex-basis: 60vw; }
  .frise figure:first-child { flex-basis: 76vw; }
}

/* ---------- mobile : composition à part ---------- */
@media (max-width: 860px) {
  .cs { display: block; padding: 40px var(--m) 72px; }
  .cs__it { display: block; }
  .cs__it + .cs__it { margin-top: 72px; }
  .cs__txt, .cs__it--01 .cs__txt, .cs__it--02 .cs__txt, .cs__it--03 .cs__txt, .cs__it--05 .cs__txt, .cs__it--06 .cs__txt, .cs__it--04 .cs__txt { padding-top: 0; margin-top: 18px; }
  .cs__side, .cs__it--01 .cs__side { margin-top: 24px; }
  .cs__steps { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .cs__steps li:nth-child(3) { grid-column: 1 / 5; }
  .cs__steps .lbl { display: none; }
  .cs__it--03 .cs__img { width: 60%; }
  .cs__it--03 .cs__img2, .cs__it--05 .cs__img2, .cs__it--06 .cs__img2, .cs__it--04 .cs__ink { margin-top: 24px; }
  .cs__it--04 .cs__ink { width: 50%; padding: 8%; }
  .idx--cs a { grid-template-columns: 112px minmax(0, 1fr) 24px; }
  .idx--cs a > .lbl:not(.idx__go) { grid-column: 2; }
  .idx--cs a strong { grid-column: 2; }
  .idx--cs a .vid { grid-row: 1 / 3; }

  .step li { display: block; padding: 18px 0 40px; }
  .step__n { display: block; margin-bottom: 8px; }
  .step__t { margin-bottom: 8px; }
  .step__fig, .step__pair { margin-top: 20px; }
  .step__pair { grid-template-columns: 1fr; gap: 20px; }
  .steps-row { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps-row li:nth-child(3) { grid-column: 1 / 3; }
  .vues { grid-template-columns: 1fr; gap: 28px; }
  .vues--off figure:nth-child(even) { margin-top: 0; }
  .frise figure { flex-basis: 78vw; }
  .frise figure:first-child { flex-basis: 84vw; }
  .frise-note, .data--res, .livr, .logo-pair { margin-top: 0; }
  .livr { columns: 1; }
  .logo-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
  .logo-pair figcaption { font-size: var(--t-label); }
  .data--res { grid-template-columns: 1fr; }
  .data--res dd { font-size: 44px; }

  .jx .ix__t { display: block; font-size: var(--t-lead); margin-bottom: 10px; }
  .pg--art .pg__title { font-size: 36px; }
  .art { font-size: 17px; max-width: none; }
  .art h2 { font-size: var(--t-lead); }
  .art__side { position: static; margin-top: 40px; display: grid; }

  .who, .who article { display: block; }
  .who article + article { margin-top: 56px; }
  .who__pic { width: 60%; }
  .who__txt, .who article:nth-child(2) .who__txt { padding-top: 18px; }
  .who__name { font-size: 40px; }
  .step--big .step__n { padding-top: 0; }
  .cond { grid-template-columns: 1fr; }
  .cond li:nth-last-child(-n+2) { border-bottom: 0; }
  .cond li:last-child { border-bottom: 1px solid var(--rule); }
}