/* ==========================================================================
   maitrise-couleur.css — page « La maîtrise de la couleur »
   (maitrise-de-la-couleur.html). Thème : la couleur et la technique.
   Palette neutre de pierre ; la couleur vient des 88 teintes LucemChoc
   de la mosaïque du haut et des visuels de chaque chapitre.
   ========================================================================== */
@font-face{font-family:AeonikLight;src:url(typo/aeonik-light.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

.page-couleur{
  --mc-encre:#1C1916;--mc-texte:#4E4943;--mc-gris:#8C867E;--mc-ligne:rgba(28,25,22,.13);
  --mc-papier:#FFFFFF;--mc-pierre:#F4F1EC;
  --mc-max:1440px;--mc-marge:56px;--mc-gout:max(var(--mc-marge),(100% - var(--mc-max))/2);
  --mc-ease:cubic-bezier(.22,1,.36,1);
  background:var(--mc-papier);color:var(--mc-encre);
}
/* Le header est écrit dans la page (build-includes.ps1) : sa hauteur est réservée dès le
   premier rendu pour que rien ne saute quand script.js la mesure (60 px, 75 px ≤ 768 px). */
.page-couleur #header-placeholder{min-height:60px}
@media (max-width:768px){.page-couleur #header-placeholder{min-height:75px}}

.mc a{color:inherit}
.mc p a,.mc figcaption a{text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;transition:opacity .25s}
.mc p a:hover,.mc figcaption a:hover{opacity:.6}
.mc h2,.mc h3{font-weight:400}

/* ---------- blocs communs ---------- */
.mc-bloc{padding:clamp(72px,8vw,120px) var(--mc-gout)}
.mc-bloc--pierre{background:var(--mc-pierre)}
.mc-entete{max-width:64ch;margin-bottom:clamp(38px,4vw,64px)}
.mc-entete--large{max-width:78ch}
.mc-h2{margin:0;font-size:clamp(28px,3vw,46px);line-height:1.12;letter-spacing:-.01em}
.mc .mc-chapo-section{margin:18px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--mc-encre)}
.mc p{font-weight:400}
.mc-bloc p{margin:14px 0 0;font-size:15.5px;line-height:1.85;color:var(--mc-texte)}
.mc-bloc p strong{font-weight:500;color:var(--mc-encre)}
.mc h3{margin:0;font-size:19px;line-height:1.3;color:var(--mc-encre)}
.mc-photo{margin:0;overflow:hidden;background:var(--mc-pierre)}
.mc-photo img{display:block;width:100%;height:100%;object-fit:cover}
.mc-bouton{
  display:inline-block;padding:16px 26px;background:var(--mc-encre);color:#fff!important;border:1px solid var(--mc-encre);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none!important;
  transition:background .25s,color .25s;
}
.mc-bouton:hover{background:transparent;color:var(--mc-encre)!important;opacity:1!important}
.mc-bouton--ligne{background:transparent;color:var(--mc-encre)!important}
.mc-bouton--ligne:hover{background:var(--mc-encre);color:#fff!important}
.mc p .mc-bouton{border-bottom:1px solid var(--mc-encre);padding-bottom:16px}

/* ==========================================================================
   HERO — titre à gauche, mosaïque des 88 teintes à droite
   ========================================================================== */
.mc-hero{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,90px);align-items:center;
  padding:clamp(40px,5vw,80px) var(--mc-gout) clamp(64px,7vw,110px);background:var(--mc-pierre);
}
.mc-ariane{display:flex;gap:10px;font-size:12.5px;letter-spacing:.04em;color:var(--mc-gris);margin-bottom:clamp(28px,4vw,56px)}
.mc-ariane a{text-decoration:none}
.mc-ariane a:hover{color:var(--mc-encre)}
.mc-surtitre{margin:0 0 18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mc-gris)}
.mc-titre{
  margin:0;font-family:AeonikLight,Aeonik,sans-serif;font-weight:400;
  font-size:clamp(48px,6.2vw,100px);line-height:.96;letter-spacing:-.03em;color:var(--mc-encre);
}
.mc-chapo{margin:clamp(22px,2.4vw,34px) 0 0;max-width:46ch;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--mc-texte)}
.mc-sommaire{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;border-top:1px solid var(--mc-ligne);max-width:420px}
.mc-sommaire li{border-bottom:1px solid var(--mc-ligne)}
.mc-sommaire a{display:flex;gap:18px;align-items:baseline;padding:11px 0;font-size:15px;text-decoration:none;color:var(--mc-encre);transition:padding-left .35s var(--mc-ease)}
.mc-sommaire a:hover{padding-left:8px}
.mc-sommaire span{font-size:12px;letter-spacing:.08em;color:var(--mc-gris)}

.mc-hero__nuancier{margin:0}
.mc-mosaique{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:clamp(3px,.4vw,6px)}
.mc-mosaique span{
  aspect-ratio:1;background:var(--c);border-radius:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  opacity:0;transform:scale(.6);animation:mc-tuile .7s var(--mc-ease) forwards;animation-delay:calc(var(--i) * 11ms + 150ms);
  transition:transform .35s var(--mc-ease),box-shadow .35s;
}
.mc-mosaique span:hover{transform:scale(1.22);position:relative;z-index:2;box-shadow:0 10px 24px rgba(28,25,22,.28)}
@keyframes mc-tuile{to{opacity:1;transform:none}}
.mc-hero__nuancier figcaption{margin-top:18px;font-size:13px;line-height:1.6;color:var(--mc-gris)}

/* ==========================================================================
   Corps de page : blocs éditoriaux, sur le modèle du guide des pages par pièce
   (titres courts à filet, vraies photos, pas d'illustration dessinée)
   ========================================================================== */
.mc-entete{max-width:62ch;margin-bottom:clamp(36px,4vw,56px)}
.mc-entete--large{max-width:74ch}
.mc-entete .mc-surtitre,.mc-duo__texte .mc-surtitre{margin:0 0 14px}
.mc-h2{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1.15;letter-spacing:-.01em;font-weight:400}

/* articles courts : titre à filet puis paragraphe */
.mc-articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3vw,52px)}
.mc-articles--trois{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(34px,3.4vw,52px)}
.mc-articles h3{font-size:18.5px;line-height:1.3}
.mc-articles h3::before{content:"";display:block;width:36px;height:2px;margin-bottom:16px;background:var(--mc-encre)}
.mc-articles p{margin-top:12px}

.mc-photo--bandeau{max-width:1002px;margin-bottom:clamp(44px,4.5vw,68px)}
.mc-photo--bandeau img{height:auto}

.mc-encadre{max-width:74ch;margin-top:clamp(52px,5vw,80px);padding-top:clamp(32px,3vw,44px);border-top:1px solid var(--mc-ligne)}
.mc-encadre h3{font-size:20px}

/* photo + texte, côte à côte */
.mc-duo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);align-items:center}
.mc-duo--inverse{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.mc-duo__photo img{height:auto}
.mc-duo__texte .mc-h2{max-width:20ch}
/* sur-mesure : les 88 textures du nuancier en petites cases ; la case survolée ou touchée
   s'agrandit, les autres s'effacent un peu et la légende donne son nom (script en bas de page) */
.mc-teintes{margin:0;width:100%;max-width:580px;justify-self:center}
.mc-teintes__grille{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px}
.mc-teintes__case{display:block;aspect-ratio:1;padding:0;border:0;background:var(--mc-ligne);cursor:pointer;position:relative;
  transition:transform .35s var(--mc-ease),box-shadow .35s var(--mc-ease),opacity .35s}
.mc-teintes__case img{display:block;width:100%;height:100%;object-fit:cover}
.mc-teintes__case:hover,.mc-teintes__case.is-active{transform:scale(1.7);z-index:2;box-shadow:0 10px 22px rgba(28,25,22,.3)}
.mc-teintes__grille.is-survol .mc-teintes__case:not(.is-active){opacity:.55}
.mc-teintes__case:focus{outline:none}
.mc-teintes__case:focus-visible{outline:2px solid var(--mc-encre);outline-offset:2px}
.mc-teintes figcaption{margin-top:22px}
.mc-teintes__nom{display:block;font-family:AeonikLight,Aeonik,sans-serif;font-size:22px;line-height:1.25;color:var(--mc-encre);min-height:1.25em}
.mc-teintes__aide{display:block;margin-top:6px;font-size:13px;line-height:1.6;color:var(--mc-gris)}
@media (prefers-reduced-motion:reduce){.mc-teintes__case{transition:none}}

/* deux photos de chantier, même hauteur ; celle de droite s'étire sur la colonne large
   (demande d'Arthur, 02/10/2026) : photo au format paysage, presque sans recadrage */
.mc-photos-chantier{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(16px,2vw,28px);margin-bottom:clamp(48px,5vw,76px)}
.mc-photos-chantier .mc-photo{height:clamp(240px,28vw,440px)}
.mc-note{max-width:74ch;margin-top:clamp(40px,4vw,60px)!important}

.mc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px!important}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1100px){
  .mc-hero{grid-template-columns:1fr}
  .mc-articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-articles--trois{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc-duo,.mc-duo--inverse{grid-template-columns:1fr}
  .mc-duo--inverse .mc-duo__photo{order:-1}
  .mc-teintes{justify-self:start}
}
@media (max-width:760px){
  .page-couleur{--mc-marge:22px}
  .mc-articles,.mc-articles--trois{grid-template-columns:1fr}
  .mc-photos-chantier{grid-template-columns:1fr}
  .mc-photos-chantier .mc-photo{height:auto}
  .mc-photos-chantier .mc-photo img{height:auto}
}
@media (max-width:520px){
  .mc-actions .mc-bouton{width:100%;text-align:center}
}

/* ==========================================================================
   v3 — premier savoir-faire, bandeau, photo en débord, moodboards
   ========================================================================== */
/* le premier savoir-faire : une phrase en grand, le texte à côté, puis la photo du laboratoire en pleine largeur */
.mc-manifeste{padding:clamp(72px,8vw,128px) 0 0}
.mc-manifeste__grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,5vw,90px);align-items:end;padding:0 var(--mc-gout) clamp(52px,6vw,90px)}
.mc .mc-manifeste__titre{margin:0;font-family:AeonikLight,Aeonik,sans-serif;font-weight:400;font-size:clamp(34px,4.2vw,68px);line-height:1.06;letter-spacing:-.025em;color:var(--mc-encre);max-width:15ch}
.mc-manifeste__texte p{margin:0 0 14px;font-size:16px;line-height:1.85;color:var(--mc-texte)}
.mc-manifeste__texte p:last-child{margin-bottom:0}
.mc-bande{margin:0;height:clamp(300px,58vh,640px);overflow:hidden;background:var(--mc-pierre)}
.mc-bande img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}

/* stabilité : la photo déborde jusqu'au bord droit de l'écran */
.mc-duo--plein{align-items:stretch}
.mc-duo--plein .mc-duo__texte{align-self:center}
.mc-duo--plein .mc-duo__photo{margin-right:calc(-1 * var(--mc-gout));margin-top:calc(-1 * clamp(72px,8vw,120px));margin-bottom:calc(-1 * clamp(72px,8vw,120px))}
.mc-duo--plein .mc-duo__photo img{height:100%;object-fit:cover}

/* moodboards : la composition de matières posée sur le fond de sa teinte */
.mc-moodboards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,3.4vw,52px) clamp(18px,2vw,30px);margin-top:clamp(52px,5vw,84px)}
.mc-mood{margin:0}
.mc-mood__visuel{aspect-ratio:5/4;background:var(--fond);display:flex;align-items:center;justify-content:center;padding:clamp(18px,2.6vw,38px);overflow:hidden}
.mc-mood__visuel img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 16px 20px rgba(28,25,22,.16));transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mc-mood:hover .mc-mood__visuel img{transform:scale(1.035)}
.mc-mood figcaption{padding-top:16px}
.mc-mood__nom{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mc-gris)}
.mc-mood__accroche{display:block;margin-top:6px;font-family:AeonikLight,Aeonik,sans-serif;font-size:clamp(20px,1.7vw,26px);line-height:1.2;color:var(--mc-encre)}
.mc-mood__texte{display:block;margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--mc-texte)}

@media (max-width:1100px){
  .mc-manifeste__grille{grid-template-columns:1fr;align-items:start}
  .mc-duo--plein .mc-duo__photo{margin:0 calc(-1 * var(--mc-gout))}
  .mc-moodboards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mc-moodboards{grid-template-columns:1fr}
  .mc-bande{height:clamp(240px,42vh,380px)}
}