/* ==========================================================
   Les Braiseurs — V6 « Terracotta »
   Structure multipage de la V1 + typographie et mise en page de la V2
   ========================================================== */

@font-face { font-family: "Agenda"; src: url("../assets/charte/fonts/agenda-l.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Agenda"; src: url("../assets/charte/fonts/agendali.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Agenda"; src: url("../assets/charte/fonts/agenda-m.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Agenda"; src: url("../assets/charte/fonts/agenda-b.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Agenda XC"; src: url("../assets/charte/fonts/agendbec.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Agenda XC"; src: url("../assets/charte/fonts/agendlec.ttf") format("truetype"); font-weight: 300; font-display: swap; }

:root {
  --charbon: #262017;
  --craie: #f9f9f9;
  --creme: #f0e3ce;
  --beige: #e7dac7;
  --green: #646f2e;
  --terracotta: #964700;
  --muted: #6f665a;
  --line: rgba(38, 32, 23, .18);

  --font-body: "Agenda", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Agenda XC", "Agenda", "Arial Narrow", sans-serif;
  --font-script: "Caveat", "Segoe Script", cursive;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--craie);
  color: var(--charbon);
  font: 300 clamp(17px, .9vw + 12px, 19px)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .95; margin: 0 0 .5em; }
h1 { font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .85; }
h2 { font-size: clamp(2.4rem, 5.5vw, 4.8rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); letter-spacing: .02em; }

.eyebrow {
  display: block; margin-bottom: .9rem;
  font: 500 .78rem/1.3 var(--font-body); letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta);
}
.script { font-family: var(--font-script); font-weight: 500; text-transform: none; color: var(--terracotta); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; margin-inline: auto; }

/* ---------- En-tête fin (V2) avec menu multipage (V1) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 249, 249, .94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.brand { display: flex; align-items: center; gap: .7rem; }
.brand img { width: auto; height: 24px; }
.brand .brand-flame { height: 44px; }
.brand .brand-name { height: 24px; }
@media (max-width: 400px) { .brand .brand-name { height: 20px; } }
.nav ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.2rem); list-style: none; margin: 0; padding: 0; }
.nav a { font: 500 .78rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .16em; text-decoration: none; padding: .4em 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--terracotta); text-decoration: underline; text-underline-offset: 7px; }
.nav .btn { padding: .9em 1.3em; text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--charbon); }
.nav-toggle span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; transition: transform .25s, opacity .25s; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 68px 0 auto 0; background: var(--craie); border-bottom: 1px solid var(--line);
    transform: translateY(-120%); transition: transform .3s ease; z-index: -1;
  }
  .nav.open { transform: none; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
  .nav li a { display: block; padding: 1em 0; font-size: .95rem; border-bottom: 1px solid var(--line); }
  .nav .btn { display: inline-block; margin-top: 1rem; border-bottom: 1px solid currentColor; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; text-decoration: none;
  font: 500 .8rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .18em;
  background: var(--terracotta); color: var(--craie);
  padding: 1.1em 2em; border: 1px solid var(--terracotta);
  transition: background .2s, color .2s;
}
.btn:hover { background: transparent; color: var(--terracotta); }
.btn.green { background: var(--green); border-color: var(--green); }
.btn.green:hover { background: transparent; color: var(--green); }
.btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn.ghost:hover { background: var(--charbon); color: var(--craie); border-color: var(--charbon); }
.btn.light { background: var(--creme); color: var(--charbon); border-color: var(--creme); }
.btn.light:hover { background: transparent; color: var(--creme); }

/* ---------- Sections ---------- */
section { padding-block: clamp(4.5rem, 9vw, 8rem); }
.ruled { border-top: 1px solid var(--line); }
.band-green, .band-terracotta, .band-beige { background-size: cover; background-position: center; }
.band-green { background-color: var(--green); background-image: url("../assets/charte/fonds/fonds-trames_green-12.jpg"); color: var(--craie); }
.band-terracotta { background-color: var(--terracotta); background-image: url("../assets/charte/fonds/fonds-trames_terracotta-11.jpg"); color: var(--craie); }
.band-beige { background-color: var(--beige); background-image: url("../assets/charte/fonds/fonds-trames_beige-18.jpg"); }
.band-creme { background: var(--creme); }
.band-green .eyebrow, .band-terracotta .eyebrow { color: var(--creme); }

/* Titre de section numéroté (V2) */
.chapter-head { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.chapter-head .num { font: 300 clamp(3rem, 6vw, 5rem)/1 var(--font-display); color: var(--terracotta); }
.chapter-head h2 { margin: 0; }
.band-green .chapter-head .num, .band-terracotta .chapter-head .num { color: var(--creme); }
@media (max-width: 640px) { .chapter-head { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- Couverture accueil (V2) ---------- */
.cover { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 68px); padding: 0; }
.cover-text { display: flex; flex-direction: column; justify-content: flex-end; padding: 3rem var(--gutter) clamp(2.5rem, 5vw, 4.5rem); background: var(--creme); }
.cover-text .eyebrow { margin-bottom: auto; }
.cover h1 { margin: 2rem 0 1.2rem; }
.cover h1 .script { display: block; font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; margin-top: .7rem; }
.cover .lede { max-width: 36ch; font-size: 1.12em; }
.cover .actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.cover-img { background: var(--charbon) url("../assets/photos/selection/p1015348.jpg") center/cover; min-height: 50vh; }
@media (max-width: 860px) {
  .cover { grid-template-columns: 1fr; min-height: 0; }
  .cover-img { order: -1; min-height: 58vh; }
  .cover-text .eyebrow { margin-bottom: 0; }
}

/* ---------- Bandeau titre des pages intérieures ---------- */
.page-cover { display: grid; grid-template-columns: 1fr 1fr; padding: 0; min-height: min(70vh, 640px); }
.page-cover .text { background: var(--creme); padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: flex-end; }
.page-cover h1, .page-cover .h1 { font-size: clamp(3rem, 7vw, 6.4rem); margin: 0; }
.page-cover .img { background: var(--charbon) center/cover no-repeat; min-height: 40vh; }
@media (max-width: 860px) { .page-cover { grid-template-columns: 1fr; } .page-cover .img { order: -1; min-height: 42vh; } }

/* ---------- Mise en page ---------- */
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.flip { grid-template-columns: 7fr 5fr; }
.split img { width: 100%; max-height: 680px; object-fit: cover; }
@media (max-width: 860px) { .split, .split.flip { grid-template-columns: 1fr; } .split img { max-height: 440px; } }

figure { margin: 0; }
figcaption { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; }

.dropcap::first-letter { float: left; font: 700 5.2em/.8 var(--font-display); margin: .06em .12em 0 0; color: var(--terracotta); }
.text-2col { columns: 2 280px; column-gap: 3rem; }

/* Citation (V2) */
.pull { font: italic 300 clamp(1.8rem, 3.6vw, 3rem)/1.15 var(--font-body); max-width: 24ch; margin: 0; }
.pull::before { content: "« "; color: var(--terracotta); }
.pull::after { content: " »"; color: var(--terracotta); }

/* Grande phrase sur bandeau couleur (V1, typo V2) */
.punchline { font: 700 clamp(2.4rem, 6vw, 5.4rem)/.92 var(--font-display); text-transform: uppercase; max-width: 18ch; margin: 0 auto; }
.punchline em { font: 500 1.05em/1 var(--font-script); text-transform: none; color: var(--creme); }

/* Image pleine largeur (V2) */
.bleed { min-height: min(78vh, 700px); padding: var(--gutter); display: grid; place-items: end start; color: var(--craie); position: relative; background: var(--charbon) center/cover fixed; isolation: isolate; }
.bleed::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(38,32,23,.72), transparent 60%); }
.bleed p { font: 700 clamp(2.2rem, 5.5vw, 4.8rem)/.92 var(--font-display); text-transform: uppercase; max-width: 16ch; margin: 0; }
@media (hover: none) { .bleed { background-attachment: scroll; } }

/* Vision / Mission / Ambition : pictos (V1) + filets (V2) */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--charbon); }
.pillar { padding: 2.2rem 2rem 0 0; }
.pillar + .pillar { padding-left: 2rem; border-left: 1px solid var(--line); }
.pillar img { width: 46px; height: 56px; object-fit: contain; margin-bottom: 1.2rem; }
.pillar h3 { color: var(--green); margin-bottom: .6rem; }
@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 2rem 0 0; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line); margin-top: 2rem; }
}

/* Mosaïque photos (V1) */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(140px, 18vw, 250px); grid-auto-flow: dense; gap: 8px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: span 2; }
.mosaic .big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }

/* Vidéos témoignages */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.video-card video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--charbon); }
@media (max-width: 800px) {
  .videos { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; }
  .video-card { scroll-snap-align: start; }
}

/* Frise (V1) avec chiffres éditoriaux */
.timeline { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--charbon); }
.timeline li { display: grid; grid-template-columns: 13rem 1fr; gap: 0 3rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.timeline .when { font: 700 clamp(1.8rem, 3vw, 2.6rem)/1 var(--font-display); color: var(--terracotta); text-transform: uppercase; }
.timeline h3 { margin-bottom: .4em; }
.timeline p { margin: 0; }
@media (max-width: 700px) { .timeline li { grid-template-columns: 1fr; gap: .6rem; } }

/* Équipe */
.team { display: grid; gap: clamp(4rem, 8vw, 7rem); }
.member { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: start; }
.member:nth-child(even) .member-photo { order: 2; }
.member-photo img, .member-photo .placeholder { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.member-photo .placeholder { display: grid; place-items: center; background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-18.jpg") center/cover; }
.member-photo .placeholder img { width: 34%; aspect-ratio: auto; object-fit: contain; }
.member h2 { margin-bottom: .2em; }
.member .role { display: block; font: 500 .78rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .16em; color: var(--green); margin-bottom: 1.8rem; }
.member .pull { font-size: clamp(1.4rem, 2.4vw, 2rem); margin-bottom: 1.6rem; max-width: 30ch; }
@media (max-width: 800px) {
  .member { grid-template-columns: 1fr; }
  .member:nth-child(even) .member-photo { order: 0; }
  .member-photo img, .member-photo .placeholder { aspect-ratio: 4 / 3; }
}

/* Carte façon restaurant (V2) */
.carte { background: var(--craie); padding: clamp(2rem, 5vw, 4.5rem); max-width: 900px; margin-inline: auto; text-align: center; box-shadow: 0 30px 60px rgba(38,32,23,.08); }
.carte .logo { width: 220px; margin: 0 auto 1rem; }
.carte h3 { font: 500 .78rem/1 var(--font-body); letter-spacing: .3em; color: var(--terracotta); margin: 2.6rem 0 1.3rem; }
.carte .item { display: flex; align-items: baseline; gap: .6rem; text-align: left; margin-bottom: 1rem; }
.carte .item b { font: 700 1.6rem/1 var(--font-display); text-transform: uppercase; }
.carte .item i { flex: 1; border-bottom: 1px dotted rgba(38,32,23,.4); transform: translateY(-4px); min-width: 1rem; }
.carte .item span { font-size: .95rem; text-align: right; }

/* Bande de photos de plats */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.strip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 700px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* Texte à compléter : repérable facilement */
.todo { background: #fff3a8; color: var(--charbon); padding: 0 .25em; }

/* Contact (V1, mise en forme V2) */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.chapter-head h2 .script { display: block; font-size: .5em; margin-bottom: .3rem; }
.band-green .chapter-head h2 .script, .band-terracotta .chapter-head h2 .script { color: var(--creme); }
.contact-list { display: grid; grid-template-columns: max-content 1fr; gap: .9rem 2.5rem; margin: 1.5rem 0 2.5rem; }
.contact-list dt { font: 500 .75rem/1.6 var(--font-body); text-transform: uppercase; letter-spacing: .18em; opacity: .75; }
.contact-list dd { margin: 0; }
.contact-grid > img { width: 100%; max-height: 560px; object-fit: cover; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* Pied de page */
.site-footer { background: var(--charbon); color: var(--beige); padding: 4rem 0 2rem; font-size: .92rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; align-items: start; }
.site-footer img { width: 200px; }
.site-footer h4 { font: 500 .75rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .2em; margin: 0 0 1rem; color: var(--creme); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--craie); text-decoration: underline; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid rgba(240,227,206,.15); padding-top: 1.5rem; margin: 1rem 0 0; opacity: .65; font-size: .8rem; letter-spacing: .04em; }
@media (max-width: 700px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* Apparition douce */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Ancre « Histoire » : ne pas passer sous l'en-tête collant */
#histoire { scroll-margin-top: 68px; }

/* Mosaïque d'accueil : placement fixe sur grand écran (bloc 4 × 4 sans trou) */
@media (min-width: 701px) {
  .mosaic { grid-template-areas: "a b b c" "a m j j" "t m j j" "t g g q"; }
  .mosaic img:nth-child(1) { grid-area: a; }  /* Ndeye */
  .mosaic img:nth-child(2) { grid-area: b; }  /* poulet braisé */
  .mosaic img:nth-child(3) { grid-area: c; }  /* verrine mangue */
  .mosaic img:nth-child(4) { grid-area: m; }  /* Marion */
  .mosaic img:nth-child(5) { grid-area: j; }  /* pain perdu, grand format */
  .mosaic img:nth-child(6) { grid-area: g; }  /* grill */
  .mosaic img:nth-child(7) { grid-area: q; }  /* pastels en gros plan */
  .mosaic img:nth-child(8) { grid-area: t; }  /* jus, format vertical */
}

/* Phrase d'accroche sous le titre d'un bandeau de page */
.page-cover .baseline { font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; margin: 1rem 0 0; max-width: 24ch; }


/* ===== V6 : en-tête terracotta tramé (FONDS-TRAMES_TERRACOTTA 9), textes en blanc ===== */
.site-header {
  background: var(--terracotta) url("../assets/charte/fonds/fonds-trames_terracotta-9.jpg") center / cover no-repeat;
  backdrop-filter: none; border-bottom: 0; color: var(--craie);
}
.nav a { color: var(--craie); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--craie); text-decoration: underline; text-underline-offset: 7px; }
.nav .btn { background: var(--craie); color: var(--terracotta); border-color: var(--craie); }
.nav .btn:hover { background: transparent; color: var(--craie); text-decoration: none; }
.nav-toggle { color: var(--craie); }
@media (max-width: 900px) {
  .nav { background: var(--terracotta); border-bottom: 0; }
  .nav li a { border-bottom-color: rgba(249, 249, 249, .25); }
  .nav .btn { border-bottom: 1px solid var(--craie); }
}

/* ===== V6 : accueil, première image sur toute la surface ===== */
.cover { position: relative; isolation: isolate; grid-template-columns: 1fr; min-height: calc(100vh - 68px); color: var(--craie); }
.cover-img { position: absolute; inset: 0; z-index: -2; min-height: 0; order: 0; }
.cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(38,32,23,.15) 0%, rgba(38,32,23,.35) 45%, rgba(38,32,23,.82) 100%); }
.cover-text { background: none; max-width: 760px; padding-top: 3rem; }
.cover-text .eyebrow { color: var(--creme); }
.cover h1 .script { color: #f3b27a; }
.cover .btn.ghost:hover { background: var(--craie); color: var(--charbon); border-color: var(--craie); }
@media (max-width: 860px) {
  .cover { min-height: calc(100svh - 68px); }
  .cover-img { order: 0; min-height: 0; }
  .cover-text .eyebrow { margin-bottom: auto; }
}
/* Sur mobile, laisser la place à l'onglet de travail « Toutes les versions » sous les boutons */
@media (max-width: 860px) { .cover-text { padding-bottom: 5.5rem; } }

/* Accueil : texte et boutons centrés sur l'image */
.cover { justify-items: center; }
.cover::before { background: linear-gradient(180deg, rgba(38,32,23,.35) 0%, rgba(38,32,23,.55) 50%, rgba(38,32,23,.75) 100%); }
.cover-text { justify-content: center; align-items: center; text-align: center; max-width: 900px; padding-block: 4rem; }
.cover-text .eyebrow, .cover h1 { margin: 0 0 1.2rem; }
.cover .lede { margin-inline: auto; }
.cover .actions { justify-content: center; }
@media (max-width: 860px) { .cover-text .eyebrow { margin-bottom: 1.2rem; } .cover-text { padding-bottom: 5.5rem; } }

/* ===== V6 : tous les fonds clairs reçoivent une trame de la charte, en gardant leur couleur ===== */
/* Fonds blancs : trame beige éclaircie (la charte n'a pas de trame blanche) */
main > section {
  background:
    linear-gradient(rgba(249, 249, 249, .7), rgba(249, 249, 249, .7)),
    var(--craie) url("../assets/charte/fonds/fonds-trames_beige-14.jpg") center / cover no-repeat;
}
/* Fonds crème (bandeaux de titre, frise) : trame beige, voile crème */
.band-creme, .page-cover .text {
  background:
    linear-gradient(rgba(240, 227, 206, .5), rgba(240, 227, 206, .5)),
    var(--creme) url("../assets/charte/fonds/fonds-trames_beige-15.jpg") center / cover no-repeat;
}
/* Fonds beiges : trame beige au motif visible */
.band-beige {
  background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-13.jpg") center / cover no-repeat;
}
/* Les bandeaux déjà tramés (vert, terracotta) et l'image d'accueil gardent leur fond */
.band-green { background: var(--green) url("../assets/charte/fonds/fonds-trames_green-12.jpg") center / cover no-repeat; }
.band-terracotta { background: var(--terracotta) url("../assets/charte/fonds/fonds-trames_terracotta-11.jpg") center / cover no-repeat; }
main > section.cover, main > section.page-cover { background: none; }

/* Titre de section sans numéro */
.chapter-head.no-num { display: block; }

/* ===== V6 : bandeau de titre des pages intérieures en plein écran, comme l'accueil ===== */
.page-cover { position: relative; isolation: isolate; grid-template-columns: 1fr; justify-items: center; min-height: calc(100vh - 68px); color: var(--craie); }
.page-cover .img { position: absolute; inset: 0; z-index: -2; min-height: 0; order: 0; }
.page-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(38,32,23,.35) 0%, rgba(38,32,23,.55) 50%, rgba(38,32,23,.75) 100%); }
.page-cover .text { background: none; justify-content: center; align-items: center; text-align: center; max-width: 900px; padding-block: 4rem; }
.page-cover .eyebrow { color: var(--creme); margin-bottom: 1.2rem; }
.page-cover .baseline { color: #f3b27a; margin-inline: auto; }
@media (max-width: 860px) {
  .page-cover { min-height: calc(100svh - 68px); }
  .page-cover .img { order: 0; min-height: 0; }
}

/* ===== V6 : « Ce qui nous met le feu », trois mots en grand, sans cadre ===== */
.feu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); text-align: center; }
.feu-item img { width: 44px; margin: 0 auto 1.4rem; }
.feu-item .script { display: block; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1; color: inherit; }
.feu-item h3 { font: 700 clamp(3.2rem, 6vw, 5.6rem)/.9 var(--font-display); text-transform: uppercase; letter-spacing: 0; margin: .05em 0 0; }
/* Petit trait de couleur sous le mot */
.feu-item h3::after { content: ""; display: block; width: 48px; height: 3px; margin: 1.4rem auto 1.5rem; background: currentColor; }
.feu-item p { margin: 0 auto; max-width: 30ch; color: var(--charbon); }
.feu-terracotta h3, .feu-terracotta .script { color: var(--terracotta); }
.feu-green h3, .feu-green .script { color: var(--green); }
.feu-charbon h3, .feu-charbon .script { color: var(--charbon); }
@media (max-width: 860px) { .feu-grid { grid-template-columns: 1fr; gap: 3.5rem; } }

/* Bandeau « Qui sommes-nous » : sur mobile, cadrer sur Marion et Ndeye */
@media (max-width: 860px) { .page-cover .img.img-duo { background-position: 13% center !important; } }

/* Bandeau « Qui sommes-nous » : titre placé un peu plus bas, sous les visages */
.page-cover.cover-low .text { padding-top: calc(4rem + 13vh); }

/* Ancre « Avis clients » : ne pas passer sous l'en-tête collant */
#avis { scroll-margin-top: 68px; }

/* Accueil, « Une assiette à la fois » : bloc compact, photo plus petite */
.split-compact img { aspect-ratio: 4 / 3; max-height: 340px; }
@media (max-width: 860px) { .split-compact img { max-height: 260px; } }

/* Bandeaux de couleur : trames au motif bien visible (au lieu des trames presque unies) */
.band-terracotta { background: var(--terracotta) url("../assets/charte/fonds/fonds-trames_terracotta-5.jpg") center / cover no-repeat; }
.band-green { background: var(--green) url("../assets/charte/fonds/fonds-trames_green-3.jpg") center / cover no-repeat; }

/* Grande phrase : le passage manuscrit ne se coupe pas entre deux lignes */
.punchline { max-width: 20ch; }
.punchline em { white-space: nowrap; }

/* Mot manuscrit dans les titres des bandeaux (vie, flamme, braise) */
.page-cover h1 em { font: 500 1.08em/1 var(--font-script); font-style: normal; text-transform: none; color: #f3b27a; white-space: nowrap; }

/* Avis clients : quatre vidéos sur une ligne */
@media (min-width: 801px) { .videos.videos-4 { grid-template-columns: repeat(4, 1fr); } }

/* ===== Avis clients : citations + vignettes vidéo avec bouton lecture maison ===== */
.avis-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.avis-quotes .pull { max-width: 22ch; }
@media (max-width: 700px) { .avis-quotes { grid-template-columns: 1fr; } }

.vframe { position: relative; overflow: hidden; }
.vframe video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--charbon); }
.vplay { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.vplay::before { content: ""; position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 6px 18px rgba(38,32,23,.35); transition: transform .25s; }
.vplay::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -6px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent var(--craie); }
.vplay:hover::before { transform: scale(1.1); }
.vcard.playing .vplay { display: none; }

/* Modèle A — Polaroïd */
.vstyle-polaroid { gap: clamp(1rem, 2.2vw, 1.8rem); }
.vstyle-polaroid .vcard { background: var(--craie); padding: 10px 10px 0; box-shadow: 0 14px 30px rgba(38,32,23,.16); transition: transform .3s ease; }
.vstyle-polaroid .vcard:nth-child(odd) { transform: rotate(-1.8deg); }
.vstyle-polaroid .vcard:nth-child(even) { transform: rotate(1.4deg); }
.vstyle-polaroid .vcard:hover, .vstyle-polaroid .vcard.playing { transform: rotate(0) translateY(-4px); }
.vstyle-polaroid figcaption { font: 500 1.55rem/1.1 var(--font-script); letter-spacing: 0; text-transform: none; color: var(--charbon); text-align: center; margin: 0; padding: .8rem .2rem 1rem; }

/* Modèle B — Arrondi, nom posé sur la vidéo */
.vstyle-arrondi .vcard { position: relative; }
.vstyle-arrondi .vframe { border-radius: 22px; }
.vstyle-arrondi .vframe::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(38,32,23,.8)); pointer-events: none; }
.vstyle-arrondi figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; font: 700 1.35rem/1.05 var(--font-display); letter-spacing: .02em; color: var(--craie); pointer-events: none; }
.vstyle-arrondi .vplay::before { background: var(--creme); }
.vstyle-arrondi .vplay::after { border-left-color: var(--charbon); }
.vstyle-arrondi .vcard.playing .vframe::after, .vstyle-arrondi .vcard.playing figcaption { display: none; }

/* Modèle C — Arche avec liseré */
.vstyle-arche .vcard { padding: 8px 8px 0; border: 1.5px solid var(--terracotta); border-radius: 999px 999px 0 0; }
.vstyle-arche .vframe { border-radius: 999px 999px 0 0; }
.vstyle-arche figcaption { text-align: center; color: var(--terracotta); margin: 0; padding: .9rem .2rem 1rem; }
.vstyle-arche .vplay::before { background: var(--green); }

/* Bouton lecture plus bas, pour dégager les visages (toujours terracotta) */
.vplay::before, .vplay::after { top: 76%; }

/* Modèle D — Demi-cadre : photo légèrement penchée sur une forme terracotta qui dépasse à moitié */
.vstyle-demi { gap: clamp(1.8rem, 3.2vw, 2.8rem); padding-bottom: 20px; }
.vstyle-demi .vcard { position: relative; isolation: isolate; display: flex; flex-direction: column-reverse; }
.vstyle-demi figcaption { margin: 0 0 .55rem; text-align: right; font: 700 1.15rem/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--terracotta); }
.vstyle-demi .vframe { transform: rotate(1.6deg); transition: transform .3s ease; }
.vstyle-demi .vcard::before {
  content: ""; position: absolute; z-index: -1;
  left: -14px; right: 20%; top: calc(1.8rem + 16%); bottom: -16px;
  background: var(--terracotta); transform: rotate(-2.2deg);
  border-radius: 22px 8px 26px 12px / 12px 24px 10px 28px;
}
/* Légère variation d'une carte à l'autre, forme toujours en bas à gauche */
.vstyle-demi .vcard:nth-child(even) .vframe { transform: rotate(-1.2deg); }
.vstyle-demi .vcard:nth-child(even)::before { transform: rotate(1.6deg); border-radius: 10px 24px 14px 26px / 24px 10px 28px 12px; }
.vstyle-demi .vcard:hover .vframe, .vstyle-demi .vcard.playing .vframe { transform: none; }
@media (max-width: 800px) { .vstyle-demi { padding-left: 16px; padding-bottom: 24px; } }

/* Bouton lecture plus petit */
.vplay::before { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.vplay::after { margin: -8px 0 0 -4px; border-width: 8px 0 8px 13px; }

/* Phrases clients : grandes, en écriture manuscrite, légèrement penchées */
.avis-quotes { align-items: center; gap: clamp(1.5rem, 4vw, 4rem); margin-bottom: clamp(3rem, 6vw, 5rem); }
.avis-quotes .pull {
  font: 500 clamp(2.6rem, 5.2vw, 4.6rem)/1 var(--font-script); font-style: normal;
  color: var(--terracotta); max-width: 15ch; margin-inline: auto; text-align: center;
  transform: rotate(-2.5deg);
}
.avis-quotes .pull:nth-child(even) { color: var(--green); transform: rotate(2deg); }
.avis-quotes .pull::before, .avis-quotes .pull::after { color: inherit; opacity: .55; }

/* Phrases clients : sous les vidéos, en vert, chacune sur deux lignes */
.avis-quotes { margin: clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.avis-quotes .pull, .avis-quotes .pull:nth-child(even) { color: var(--green); max-width: none; font-size: clamp(2.2rem, 4.4vw, 4rem); }

/* Phrases clients : capitales de titre + quelques mots en manuscrit, comme les grandes phrases du site */
.avis-phrase { margin: 0 auto; text-align: center; font: 700 clamp(2rem, 4.2vw, 3.6rem)/.98 var(--font-display); text-transform: uppercase; color: var(--green); }
.avis-phrase em { font: 500 1.08em/1 var(--font-script); font-style: normal; text-transform: none; color: var(--terracotta); white-space: nowrap; }

/* Vignettes sans encadré : vidéo droite, nom en capitales au-dessus */
.vstyle-simple .vcard { display: flex; flex-direction: column-reverse; }
.vstyle-simple figcaption { margin: 0 0 .55rem; font: 700 1.15rem/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: var(--terracotta); }

/* Phrases clients sur bandeau vert : tout en blanc, avec guillemets */
.avis-band .avis-quotes { margin: 0; }
.avis-band .avis-phrase, .avis-band .avis-phrase em { color: var(--craie); }

/* Mots en écriture manuscrite terracotta dans un titre */
h2 .mot-main { font: 500 1.08em/1 var(--font-script); font-style: normal; text-transform: none; color: var(--terracotta); white-space: nowrap; }

/* Mot manuscrit terracotta dans le titre d'un bandeau photo */
.page-cover h1 em.terracotta { color: #f28b3c; text-shadow: 0 2px 14px rgba(38, 32, 23, .55); }

/* Bandeau « Le projet » : titre placé plus bas, sous les visages */
.page-cover.cover-lower .text { padding-top: calc(4rem + 30vh); }

/* Bandeau « Le projet » : photo zoomée et remontée, pour que les visages passent au-dessus du titre centré */
@media (min-width: 861px) {
  .page-cover .img.img-tablee { background-size: 110% auto; background-position: center 69% !important; }
}
@media (max-width: 860px) {
  /* Sur mobile : cadrage qui coupe avant les pieds, titre posé en bas, sous les visages */
  .page-cover .img.img-tablee { background-size: auto 125%; background-position: 46% 10% !important; }
  .page-cover.titre-bas-mobile .text { justify-content: flex-end; padding-bottom: 5.5rem; }
}

/* ===== « Ce qui nous met le feu » sans pictos : quatre versions ===== */
.feu-terracotta { --c: var(--terracotta); } .feu-green { --c: var(--green); } .feu-charbon { --c: var(--charbon); }
.feu-mot .script, .feu-mot h3 { color: var(--c); }

/* Version 2 — Liste */
.feu-grid.feu-v2 { display: block; text-align: left; border-top: 2px solid var(--charbon); max-width: 1040px; margin-inline: auto; }
.feu-v2 .feu-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 4vw, 4rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--line); }
.feu-v2 .feu-mot { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.feu-v2 .feu-item h3 { margin: 0; }
.feu-v2 .feu-item h3::after { display: none; }
.feu-v2 .feu-item p { margin: 0; max-width: none; font-size: 1.08em; }
@media (max-width: 700px) { .feu-v2 .feu-item { grid-template-columns: 1fr; gap: .8rem; } }

/* Version 3 — Cartes */
.feu-grid.feu-v3 { gap: clamp(1rem, 2.4vw, 2rem); text-align: left; }
.feu-v3 .feu-item { background: var(--craie); padding: 2.2rem 1.9rem 2.4rem; border-top: 6px solid var(--c); box-shadow: 0 18px 40px rgba(38, 32, 23, .08); }
.feu-v3 .feu-item h3 { font-size: clamp(2.6rem, 4.4vw, 4rem); margin-bottom: .5em; }
.feu-v3 .feu-item h3::after { display: none; }
.feu-v3 .feu-item p { margin: 0; max-width: none; }

/* Version 4 — Manifeste */
.feu-grid.feu-v4 { display: block; max-width: 980px; margin-inline: auto; text-align: center; }
.feu-v4 .feu-item { margin-bottom: clamp(1.6rem, 3vw, 2.6rem); font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.35; }
.feu-v4 .feu-mot { display: inline; }
.feu-v4 .feu-mot .script, .feu-v4 .feu-item h3 { display: inline; font: 500 1.5em/1 var(--font-script); text-transform: lowercase; letter-spacing: 0; margin: 0; }
.feu-v4 .feu-item h3::after { content: " —"; display: inline; width: auto; height: auto; margin: 0; background: none; }
.feu-v4 .feu-item p { display: inline; max-width: none; margin: 0; font-weight: 500; }

/* « Ce qui nous met le feu » sur bandeau terracotta : textes clairs */
.feu.band-terracotta .feu-item { --c: var(--craie); }
.feu.band-terracotta .feu-item p { color: var(--craie); }
.feu.band-terracotta .feu-mot .script { color: #f6c79b; }

/* « Ce qui nous met le feu » sur fond clair, texte d'une seule couleur */
.feu.feu-mono .feu-item { --c: var(--charbon); }

/* « Ce qui nous met le feu » : fond blanc craie, tout le texte en terracotta */
.feu.feu-mono .feu-item { --c: var(--terracotta); }
.feu.feu-mono h2, .feu.feu-mono .feu-item p { color: var(--terracotta); }

/* « Ce qui nous met le feu » : trame craie de la charte (FONDS-TRAMES-CRAIE-22) */
main > section.feu.feu-mono { background: var(--craie) url("../assets/charte/fonds/fonds-trames_craie-22.jpg") center / cover no-repeat; }

/* « Ce qui nous met le feu » : une couleur par pilier (mot, trait et texte) */
.feu.feu-mono .feu-item.feu-terracotta { --c: var(--terracotta); }
.feu.feu-mono .feu-item.feu-green { --c: var(--green); }
.feu.feu-mono .feu-item.feu-charbon { --c: var(--charbon); }
.feu.feu-mono .feu-item p { color: var(--c); }

/* Titre « Ce qui nous met le feu » en noir (charbon), mot manuscrit compris */
.feu.feu-mono h2, .feu.feu-mono h2 .mot-main { color: var(--charbon); }

/* Piliers : « UNE » en capitales classiques + le mot en manuscrit, sur une même ligne */
.feu.feu-mono .feu-mot { display: block; line-height: 1; }
.feu.feu-mono .feu-mot .script { display: inline; font: 700 clamp(2.4rem, 4.4vw, 4rem)/1 var(--font-display); text-transform: uppercase; letter-spacing: 0; }
.feu.feu-mono .feu-item h3 { display: inline; font: 500 clamp(3rem, 5.6vw, 5rem)/1 var(--font-script); text-transform: lowercase; letter-spacing: 0; margin: 0; }
.feu.feu-mono .feu-item h3::after { display: none; }
.feu.feu-mono .feu-mot::after { content: ""; display: block; width: 48px; height: 3px; margin: 1.3rem auto 1.5rem; background: var(--c); }

/* Piliers : le mot manuscrit en capitales */
.feu.feu-mono .feu-item h3 { text-transform: uppercase; font-size: clamp(2.6rem, 4.8vw, 4.4rem); }

/* Piliers : tout en capitales classiques (plus de manuscrit) */
.feu.feu-mono .feu-item h3 { font: 700 clamp(2.4rem, 4.4vw, 4rem)/1 var(--font-display); text-transform: uppercase; }
.feu.feu-mono .feu-item h3 { margin-left: .18em; }


/* « Ce qui nous met le feu » : bandeau vert tramé, tout le texte en blanc */
main > section.feu.feu-mono.feu-vert { background: var(--green) url("../assets/charte/fonds/fonds-trames_green-3.jpg") center / cover no-repeat; }
.feu.feu-mono.feu-vert .feu-item.feu-terracotta, .feu.feu-mono.feu-vert .feu-item.feu-green, .feu.feu-mono.feu-vert .feu-item.feu-charbon { --c: var(--craie); }
.feu.feu-mono.feu-vert h2, .feu.feu-mono.feu-vert .feu-item p { color: var(--craie); }

/* Frise « L'histoire des Braiseurs » : test de la trame beige 15 de la charte */
main > section#histoire { background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-15.jpg") center / cover no-repeat; }

/* Bloc « La cuisine, c'est d'abord de la joie » sans photo : texte centré */
.joie .pull { max-width: none; margin-inline: auto; }
.joie p:not(.pull) { max-width: 60ch; margin-inline: auto; font-size: 1.08em; }

/* Picto flamme au-dessus du titre « Ce qui nous met le feu » */
.feu-flamme { width: 58px; margin: 0 auto 1.4rem; }

/* Picto flamme à gauche du titre « Ce qui nous met le feu », sur la même ligne */
h2 .feu-flamme { display: inline-block; width: auto; height: 1.05em; margin: 0 .35em 0 0; vertical-align: -.14em; }

/* Mots et phrases manuscrits sur les photos d'ouverture : une seule couleur, le crème de la charte */
.cover h1 .script,
.page-cover h1 em, .page-cover h1 em.terracotta,
.page-cover .baseline { color: var(--creme); text-shadow: 0 2px 14px rgba(38, 32, 23, .45); }

/* Mots manuscrits des photos d'ouverture : terracotta éclairci (même teinte que la charte, plus lumineux) */
.cover h1 .script,
.page-cover h1 em, .page-cover h1 em.terracotta,
.page-cover .baseline { color: var(--creme); text-shadow: 0 2px 14px rgba(38, 32, 23, .45); } /* crème de la charte */

/* Accueil, premier bloc : photo verticale du service, cadrée en carré sur les deux personnes et l'assiette */
.split-compact img.photo-service { aspect-ratio: 1 / 1; max-height: 440px; object-position: center 72%; }
@media (max-width: 860px) { .split-compact img.photo-service { max-height: 360px; } }

/* Accueil, premier bloc : test d'une trame beige-blanc de la charte (FONDS-TRAMES_BEIGE_BLANC-26) */
main > section.bloc-intro { background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-blanc-26.jpg") center / cover no-repeat; }

/* Accueil, mosaïque « À table ! » : test de la trame craie de la charte (FONDS-TRAMES-CRAIE-21) */
main > section.bloc-table { background: var(--craie) url("../assets/charte/fonds/fonds-trames_craie-21.jpg") center / cover no-repeat; }


/* Accueil, premier bloc : texte un peu plus grand, lettrine sur deux lignes seulement */
.dropcap.intro-texte { font-size: 1.2em; line-height: 1.6; }
.dropcap.intro-texte::first-letter { font-size: 3.35em; line-height: .86; margin: .04em .1em 0 0; }
/* Titre du premier bloc sur une seule ligne quand l'écran est assez large */
@media (min-width: 1000px) { h2.titre-ligne { white-space: nowrap; font-size: clamp(2.4rem, 4.6vw, 4.4rem); } }
.todo a { color: inherit; text-decoration: none; }
.todo a:hover { text-decoration: underline; }

/* Le projet, bloc « La cuisine, c'est d'abord de la joie » : test de la trame beige 18 de la charte */
main > section.bloc-joie { background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-18.jpg") center / cover no-repeat; }

/* Le projet : la citation « joie » conclut la frise de l'histoire, dans le même bloc */
.joie.conclusion { margin-top: clamp(3rem, 6vw, 5rem); }

/* ===== Accueil, bloc 2 : pistes de mise en page (page de travail modeles-intro.html) ===== */
/* Piste 2 — Grand texte centré, puis photo panoramique */
.intro-b { text-align: center; }
.intro-b p { font: 500 clamp(1.5rem, 2.9vw, 2.4rem)/1.32 var(--font-body); max-width: 26em; margin: 0 auto 2rem; }
.intro-b img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 68%; margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Piste 3 — Grande photo verticale à gauche, accroche en capitales + texte courant */
.intro-c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.intro-c img { width: 100%; aspect-ratio: 4 / 5; max-height: 640px; object-fit: cover; object-position: center 70%; }
.intro-c .accroche { font: 700 clamp(2.2rem, 4.2vw, 3.8rem)/.98 var(--font-display); text-transform: uppercase; margin: 0 0 1.4rem; }
.intro-c .accroche em { font: 500 1.05em/1 var(--font-script); font-style: normal; text-transform: none; color: var(--terracotta); }
.intro-c p { font-size: 1.1em; max-width: 34em; }
@media (max-width: 860px) { .intro-c { grid-template-columns: 1fr; } .intro-c img { aspect-ratio: 4 / 3; } }
/* Piste 4 — Photo en pleine largeur, texte dans une carte crème posée dessus */
.intro-d { position: relative; min-height: clamp(520px, 62vw, 720px); display: flex; align-items: center; padding: clamp(2rem, 6vw, 5rem) var(--gutter); background: var(--charbon) center 62% / cover no-repeat; }
.intro-d .carte-texte { background: var(--creme); max-width: 540px; padding: clamp(1.8rem, 4vw, 3rem); box-shadow: 0 24px 60px rgba(38, 32, 23, .28); }
.intro-d .carte-texte p { font-size: 1.08em; }
.piste-label { text-align: center; }

/* Accueil : logo crème avec sa baseline à la place du titre texte */
.cover h1.cover-logo { margin: 0 0 1.6rem; line-height: 0; }
.cover h1.cover-logo img { width: min(480px, 74vw); margin-inline: auto; filter: drop-shadow(0 4px 18px rgba(38, 32, 23, .45)); }
/* Accueil, bloc 2 : titre en capitales avec mots manuscrits (h2) */
.intro-c h2.accroche { letter-spacing: 0; }

/* Le projet : pas de filet sous le titre « L'histoire des Braiseurs » */
#histoire .timeline { border-top: 0; }
#histoire .chapter-head { margin-bottom: clamp(1rem, 2.5vw, 2rem); }

/* Le projet : conclusion de la frise en terracotta, sans gras, paragraphe légèrement agrandi */
.joie.conclusion .pull, .joie.conclusion p { color: var(--terracotta); }
.joie.conclusion .pull::before, .joie.conclusion .pull::after { color: var(--terracotta); }
.joie.conclusion p:not(.pull) { font-size: 1.22em; max-width: 54ch; }

/* « Ce qui nous met le feu » : plus de petit trait sous les piliers ; « le feu » en manuscrit, même couleur que le titre */
.feu.feu-mono .feu-mot::after { display: none; }
.feu.feu-mono .feu-mot { margin-bottom: 1.1rem; }
.feu.feu-mono.feu-vert h2 .mot-main { color: inherit; }

/* ===== Le projet : frise chronologique animée (le trait se remplit et les étapes s'allument au défilement) ===== */
.frise { --progress: 0; --col: 11rem; list-style: none; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; position: relative; }
.frise::before, .frise::after { content: ""; position: absolute; left: calc(var(--col) + 1.25rem); top: .7rem; bottom: .7rem; width: 3px; margin-left: -1.5px; border-radius: 3px; }
.frise::before { background: rgba(38, 32, 23, .16); }
.frise::after { background: var(--terracotta); transform-origin: top; transform: scaleY(var(--progress)); }
.frise-etape { display: grid; grid-template-columns: var(--col) 2.5rem minmax(0, 1fr); column-gap: 0; align-items: start; padding-bottom: clamp(2.2rem, 5vw, 3.6rem); }
.frise-etape:last-child { padding-bottom: 0; }
.frise-date { font: 700 clamp(1.9rem, 3.2vw, 2.8rem)/1 var(--font-display); color: var(--charbon); opacity: .35; text-align: right; padding-right: 1.6rem; transition: opacity .5s, color .5s; white-space: nowrap; }
.frise-point { position: relative; z-index: 1; justify-self: center; width: 20px; height: 20px; margin-top: .45rem; border-radius: 50%; background: var(--beige); border: 3px solid rgba(38, 32, 23, .3); transition: background .4s, border-color .4s, transform .4s, box-shadow .4s; }
.frise-corps { padding-left: 1.6rem; opacity: .3; transform: translateX(18px); transition: opacity .6s ease, transform .6s ease; }
.frise-corps h3 { margin-bottom: .45em; }
.frise-corps p { margin: 0; max-width: 62ch; }
.frise-lecon { margin-top: .9rem !important; font: 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.15 var(--font-script); color: var(--terracotta); }
.frise-lecon::before { content: "→ "; }
/* Étape atteinte */
.frise-etape.active .frise-date { opacity: 1; color: var(--terracotta); }
.frise-etape.active .frise-point { background: var(--terracotta); border-color: var(--terracotta); transform: scale(1.15); box-shadow: 0 0 0 7px rgba(150, 71, 0, .16); }
.frise-etape.active .frise-corps { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .frise { --col: 0rem; }
  .frise::before, .frise::after { left: 10px; }
  .frise-etape { grid-template-columns: 20px minmax(0, 1fr); column-gap: 1.2rem; }
  .frise-date { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 .4rem; }
  .frise-point { grid-column: 1; grid-row: 1; margin-top: .5rem; }
  .frise-corps { grid-column: 2; grid-row: 2; padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .frise::after { transform: none; }
  .frise-date, .frise-point, .frise-corps { transition: none; }
}

/* Frise : photos sous chaque période */
.frise-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 1.3rem; max-width: 760px; }
.frise-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frise-photos-1 { grid-template-columns: minmax(0, 1fr); max-width: 380px; }
@media (max-width: 560px) { .frise-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .frise-photos-1 { grid-template-columns: 1fr; } .frise-photos-3 img:first-child { grid-column: span 2; aspect-ratio: 16 / 9; } }

/* Frise sur mobile : l'apparition se fait vers le haut, pour ne jamais déborder de l'écran */
@media (max-width: 760px) {
  .frise { overflow: hidden; }
  .frise-corps { transform: translateY(14px); min-width: 0; }
  .frise-etape.active .frise-corps { transform: none; }
}

/* ===== Frise : pistes de mise en page des photos (page de travail modeles-frise.html) ===== */
main > section.demo-histoire { background: var(--beige) url("../assets/charte/fonds/fonds-trames_beige-15.jpg") center / cover no-repeat; }

/* Piste A — Polaroïds */
.frise-style-a .frise-photos { display: flex; flex-wrap: wrap; gap: 0; max-width: none; margin-top: 1.9rem; padding-left: 6px; }
.frise-style-a .frise-photos img { width: 208px; aspect-ratio: 1 / 1; box-sizing: content-box; border: 10px solid var(--craie); border-bottom-width: 38px; box-shadow: 0 12px 28px rgba(38, 32, 23, .22); transition: transform .3s ease; position: relative; }
.frise-style-a .frise-photos img:nth-child(1) { transform: rotate(-4deg); }
.frise-style-a .frise-photos img:nth-child(2) { transform: rotate(3deg) translateY(10px); margin-left: -22px; }
.frise-style-a .frise-photos img:nth-child(3) { transform: rotate(-2deg); margin-left: -22px; }
.frise-style-a .frise-photos img:hover { transform: rotate(0) scale(1.06); z-index: 2; }

/* Piste B — Mosaïque sur forme terracotta */
.frise-style-b .frise-photos { position: relative; isolation: isolate; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; max-width: 620px; margin: 2rem 0 1.4rem 18px; }
.frise-style-b .frise-photos::before { content: ""; position: absolute; z-index: -1; left: -18px; right: 30%; top: 22%; bottom: -18px; background: var(--terracotta); transform: rotate(-1.6deg); border-radius: 22px 8px 26px 12px / 12px 24px 10px 28px; }
.frise-style-b .frise-photos img { aspect-ratio: auto; height: 100%; }
.frise-style-b .frise-photos img:first-child { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.frise-style-b .frise-photos-1 { grid-template-columns: 1fr; grid-template-rows: auto; max-width: 400px; }
.frise-style-b .frise-photos-1 img:first-child { grid-row: auto; }

/* Piste C — Pellicule */
.frise-style-c .frise-photos { display: flex; gap: 6px; max-width: none; margin-top: 1.6rem; padding: 10px; background: var(--charbon); width: fit-content; }
.frise-style-c .frise-photos img { width: auto; height: 210px; aspect-ratio: auto; object-fit: contain; filter: grayscale(1) contrast(1.05); transition: filter .5s ease; }
.frise-style-c .frise-photos img:hover { filter: none; }

/* Piste D — Côte à côte */
.frise-style-d .frise-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.frise-style-d .frise-corps > h3, .frise-style-d .frise-corps > p { grid-column: 1; }
.frise-style-d .frise-photos { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; max-width: none; grid-template-columns: 1fr 1fr; }
.frise-style-d .frise-photos img:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.frise-style-d .frise-photos-1 { grid-template-columns: 1fr; }

@media (max-width: 760px) {
  .frise-style-a .frise-photos img { width: 120px; border-width: 6px; border-bottom-width: 22px; }
  .frise-style-c .frise-photos { overflow-x: auto; width: auto; }
  .frise-style-c .frise-photos img { height: 150px; }
  .frise-style-d .frise-corps { display: block; }
  .frise-style-d .frise-photos { margin-top: 1.3rem; }
}

/* Frise retenue (polaroïds) : cadre blanc uniforme ; photos en gris, en couleur au passage sur la période */
.frise-style-a .frise-photos img { border-bottom-width: 10px; filter: grayscale(1); transition: transform .3s ease, filter .5s ease; }
.frise-style-a .frise-etape:hover .frise-photos img { filter: none; }
@media (hover: none) { .frise-style-a .frise-etape.active .frise-photos img { filter: none; } }
@media (max-width: 760px) { .frise-style-a .frise-photos img { border-bottom-width: 6px; } }

/* Frise, étape 2026 : le logo Les Braiseurs à la place du titre en texte */
.frise-logo { margin-bottom: .7em; line-height: 0; }
.frise-logo img { height: clamp(30px, 3vw, 40px); width: auto; }

/* Frise : liseré blanc plus fin autour des photos */
.frise-style-a .frise-photos img { border-width: 5px; }
@media (max-width: 760px) { .frise-style-a .frise-photos img { border-width: 4px; } }

/* Frise : quatrième polaroïd d'une période */
.frise-style-a .frise-photos img:nth-child(4) { transform: rotate(3deg) translateY(8px); margin-left: -22px; }
.frise-style-a .frise-photos-4 img { width: 190px; }
@media (max-width: 760px) { .frise-style-a .frise-photos-4 img { width: 120px; } }

/* Carte : plats sans description, centrés */
.carte .plat { text-align: center; margin: 0 0 .55em; font-size: 1.08rem; line-height: 1.4; color: var(--charbon); }
.carte .plat-note { text-align: center; margin: 1.1em 0 0; font-family: var(--font-script); font-size: 1.45rem; line-height: 1.2; color: var(--terracotta); }

/* Carte sur téléphone : le détail passe sous le nom du plat */
@media (max-width: 560px) {
  .carte .item { display: block; }
  .carte .item i { display: none; }
  .carte .item span { display: block; text-align: left; margin-top: .25rem; }
}

/* Formulaire de contact */
.contact-grid { align-items: start; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.contact-form .champ { grid-column: 1 / -1; display: grid; gap: .35rem; }
.contact-form .champ.demi { grid-column: auto; }
.contact-form label { font: 500 .75rem/1.4 var(--font-body); text-transform: uppercase; letter-spacing: .16em; opacity: .85; }
.contact-form input, .contact-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 1rem; color: var(--charbon); background: var(--craie); border: 1px solid transparent; border-radius: 0; padding: .75em .9em; }
.contact-form textarea { resize: vertical; min-height: 8rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--creme); outline-offset: 2px; }
.contact-form .invalide { border-color: #ffd0b0; box-shadow: inset 0 0 0 2px var(--terracotta); }
.contact-form button { grid-column: 1 / -1; justify-self: start; cursor: pointer; font-family: inherit; }
.contact-form p { grid-column: 1 / -1; margin: 0; font-size: .85rem; }
.contact-form .cf-note { opacity: .8; }
.contact-form .cf-note a { color: inherit; }
.contact-form .cf-erreur, .contact-form .cf-ok { background: var(--creme); color: var(--charbon); padding: .8em 1em; font-size: .95rem; }
@media (max-width: 480px) { .contact-form .champ.demi { grid-column: 1 / -1; } }

/* Page mentions légales */
main > section.page-legale { padding-top: clamp(8rem, 14vw, 11rem); }
.page-legale .wrap { max-width: 780px; }
.page-legale h1 { font: 700 clamp(2.6rem, 6vw, 4rem)/1 var(--font-display); text-transform: uppercase; margin: 0 0 2rem; }
.page-legale h2 { font: 500 .85rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .2em; color: var(--terracotta); margin: 2.6rem 0 .8rem; }
.page-legale p { margin: 0 0 1rem; line-height: 1.65; }
.page-legale .btn { margin-top: 1.5rem; }
.site-footer .legal a { text-decoration: underline; }

/* Page contact : place pour l'en-tête fixe, hauteur d'écran */
main > section.page-contact { padding-top: clamp(8rem, 13vw, 10rem); min-height: 100vh; box-sizing: border-box; }

/* Crédit photo, en petit en bas à gauche de la photo */
.credit { position: absolute; left: .75rem; bottom: .55rem; z-index: 2; font: 400 .68rem/1.2 var(--font-body); letter-spacing: .04em; color: rgba(249, 249, 249, .92); text-shadow: 0 1px 4px rgba(38, 32, 23, .85); pointer-events: none; }
.photo-credit, .member-photo { position: relative; margin: 0; }
.photo-credit img { display: block; }
.contact-grid > .photo-credit img { width: 100%; max-height: 560px; object-fit: cover; }
.mosaic > .photo-credit { min-height: 0; }
.mosaic > .photo-credit img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 701px) { .mosaic > .photo-credit { grid-area: m; } }
.page-cover > .credit { left: var(--gutter); bottom: 1rem; }
.credit { background: rgba(38, 32, 23, .5); padding: .25em .6em; text-shadow: none; left: .5rem; bottom: .5rem; }

/* Carte : accompagnement en manuscrit noir après le nom du plat */
.carte .item { flex-wrap: wrap; }
.carte .item .accomp { font: 500 1.5rem/1.1 var(--font-script); font-style: normal; color: var(--charbon); }
@media (max-width: 560px) { .carte .item .accomp { display: block; margin-top: .2rem; } }

/* Crédit photo : noir, italique fin, sous la photo */
.credit { position: static; display: block; background: none; padding: 0; margin: .4rem 0 0; text-align: left; font: italic 300 .74rem/1.3 var(--font-body); letter-spacing: .02em; color: var(--charbon); text-shadow: none; }
.mosaic > .photo-credit { display: flex; flex-direction: column; }
.mosaic > .photo-credit img { flex: 1; min-height: 0; height: auto; }
.mosaic > .photo-credit .credit { margin-top: .25rem; }
.band-green .credit { color: var(--charbon); }
.credit-cover { margin: 0; padding: .45rem var(--gutter); background: var(--craie); }

/* Carte : plus de marge à gauche */
@media (min-width: 561px) { .carte .item { padding-left: clamp(1.5rem, 7vw, 6rem); } }

/* Crédit photo : de nouveau posé sur la photo, en bas à gauche, italique fin */
.credit, .band-green .credit { position: absolute; left: .5rem; bottom: .5rem; z-index: 2; display: inline-block; margin: 0; padding: .25em .6em; background: rgba(38, 32, 23, .5); color: rgba(249, 249, 249, .95); font: italic 300 .72rem/1.2 var(--font-body); letter-spacing: .02em; }
.mosaic > .photo-credit { display: block; }
.mosaic > .photo-credit img { height: 100%; }
.mosaic > .photo-credit .credit { margin: 0; }
.page-cover > .credit { left: var(--gutter); bottom: 1rem; }

/* Crédit photo discret : pas d'encadré, texte très fin */
.credit, .band-green .credit { background: none; padding: 0; font-size: .62rem; color: rgba(249, 249, 249, .8); text-shadow: 0 0 3px rgba(38, 32, 23, .7); left: .6rem; bottom: .45rem; }
/* Sur les deux photos à nappe blanche, le crédit passe en noir pour rester lisible */
.bloc-intro .credit, #contact .credit { color: rgba(38, 32, 23, .7); text-shadow: none; }
/* Photos de Marion : bas de l'image clair, crédit en noir */
.mosaic .credit, .member-photo .credit { color: rgba(38, 32, 23, .8); text-shadow: 0 0 3px rgba(249, 249, 249, .6); }

/* Téléphone : la photo de Marion (page L'équipe) n'est plus coupée à la tête */
@media (max-width: 860px) {
  .member-photo img[src*="moliere-02-4"] { aspect-ratio: 1 / 1; object-position: center 12%; }
}

/* Portrait de Pierre : photo carrée, cadrée sur le visage */
.member-photo img[src*="pierre.jpg"] { object-position: center 20%; }
@media (max-width: 800px) { .member-photo img[src*="pierre.jpg"] { aspect-ratio: 1 / 1; } }

/* Le projet : phrase d'introduction avant la frise */
.frise-intro { max-width: 62ch; font-size: 1.15em; line-height: 1.6; margin: 0 0 clamp(2rem, 4vw, 3rem); }
/* Le projet : « La cuisine, c'est d'abord de la joie » sur le fond vert, après les trois piliers */
.joie.joie-vert { margin-top: clamp(3.5rem, 7vw, 6rem); }
.joie.joie-vert .pull, .joie.joie-vert p, .joie.joie-vert .pull::before, .joie.joie-vert .pull::after { color: var(--craie); }
.joie.joie-vert p:not(.pull) { font-size: 1.22em; max-width: 54ch; }
/* Menu : bouton sous la carte */
.carte .carte-cta { margin: 3rem 0 0; text-align: center; }

/* Menu : bandeau de cinq photos */
.strip.strip-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 700px) { .strip.strip-5 { grid-template-columns: repeat(2, 1fr); } .strip.strip-5 img:last-child { grid-column: span 2; aspect-ratio: 3 / 2; } }

/* Menu : phrase d'introduction de la carte, et bouton sorti du cadre blanc */
.carte .carte-intro { max-width: 46ch; margin: 1.6rem auto 0; font-size: 1.08rem; line-height: 1.55; font-style: italic; }
.carte-cta { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }

/* Le projet : introduction de la frise sur toute la largeur, justifiée */
.frise-intro { max-width: none; text-align: justify; }
/* Menu : bouton « Je veux me régaler » un peu plus gros */
.carte-cta .btn { font-size: .95rem; padding: 1.2em 2.4em; }

/* Équipe : les trois portraits au même format (celui de N'deye) */
@media (min-width: 801px) { .member:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
@media (max-width: 800px) { .member-photo img { aspect-ratio: 1 / 1; object-position: center 12%; } }

/* Équipe : portrait de Marion recadré sur elle, comme celui de N'deye */
.member-photo { overflow: hidden; }
.member-photo img { display: block; }
.member-photo img[src*="moliere-02-4"] { object-position: center center; transform: scale(1.75); transform-origin: 80% 16%; }
@media (max-width: 800px) { .member-photo img[src*="moliere-02-4"] { object-position: center 10%; transform: scale(1.6); transform-origin: 80% 38%; } }

/* Accueil, écran réduit : N'deye cadrée sur son visage, assiette de poulet descendue (moins de table) */
@media (max-width: 1000px) {
  .mosaic img[src*="ndeye_2"] { object-position: center 8%; }
  .mosaic img[src*="p1015561-zoom"] { object-position: center 58% !important; }
}

/* Accueil : assiette de poulet braisé zoomée (on ne voit presque plus la table) */
.mosaic > .zoom-poulet { margin: 0; overflow: hidden; min-height: 0; }
.mosaic > .zoom-poulet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transform: scale(1.32); transform-origin: 56% 44%; }
@media (min-width: 701px) { .mosaic > .zoom-poulet { grid-area: b; } }

/* Portrait de Pierre : crédit en clair (bas de photo sombre) */
.member-photo .credit.clair { color: rgba(249, 249, 249, .85); text-shadow: 0 0 3px rgba(38, 32, 23, .7); }

/* Menu : phrase d'introduction centrée, lignes équilibrées (jamais un mot seul à la ligne) */
.carte .carte-intro { text-align: center; text-wrap: balance; }
/* Menu : bouton « Je veux me régaler » toujours centré */
.carte-cta { display: flex; justify-content: center; width: 100%; }
/* Le projet : photo d'ouverture descendue, on voit davantage le haut de l'image que les jambes */
@media (min-width: 861px) { .page-cover .img.img-tablee { background-position: center 60% !important; } .page-cover.titre-bas-mobile .text { padding-top: calc(4rem + 34vh); } }