/* ===============================================================
   Boivin & Co. — pages de projet (études de cas)
   ---------------------------------------------------------------
   Feuille partagée par toutes les pages sous /projets/.
   Les jetons de couleur reprennent ceux de index.html : le fond
   se réchauffe du brun au orange au fil du scroll, exactement
   comme la page d'accueil. Si la palette change là-bas, la
   reporter ici.
   =============================================================== */

/* f et j de Fraunces : leurs crochets enroulés se lisent comme des
   lettres déformées dans les titres. Ces deux glyphes seuls viennent
   de Newsreader (sous-ensemble local), le reste du texte reste en
   Fraunces grâce à unicode-range. */
@font-face {
  font-family: 'Fraunces FJ';
  src: url('/assets/fonts/newsreader-fj-roman.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0066, U+006A;
}
@font-face {
  font-family: 'Fraunces FJ';
  src: url('/assets/fonts/newsreader-fj-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0066, U+006A;
}

:root {
  /* Une page de projet ouvre directement sur la teinte « Projets »
     de l'accueil : aucun clignotement au chargement. */
  --bg: #7d3520;
  --ink: #fdf5ec;
  --muted: #e3c2af;
  --line: rgba(253, 245, 236, 0.24);
  --body-txt: #ecd5c5;
  --accent: #ffb08c;
  --nav-bg: rgba(125, 53, 32, 0.86);
  --nav-hover: #ffb08c;
  --logo-bg: #fdf5ec;
  --logo-fg: #7d3520;
  --panel-1: #8d3f27;
  --panel-2: #6b2b19;
  --tt: 0.7s;
  --te: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-section="work"] {
  --bg: #7d3520;
  --ink: #fdf5ec;
  --muted: #e3c2af;
  --line: rgba(253, 245, 236, 0.24);
  --body-txt: #ecd5c5;
  --accent: #ffb08c;
  --nav-bg: rgba(125, 53, 32, 0.86);
  --nav-hover: #ffb08c;
  --logo-bg: #fdf5ec;
  --logo-fg: #7d3520;
  --panel-1: #8d3f27;
  --panel-2: #6b2b19;
}
html[data-section="faq"] {
  --bg: #9c4020;
  --ink: #fef7ef;
  --muted: #f0cfba;
  --line: rgba(254, 247, 239, 0.28);
  --body-txt: #f6e2d5;
  --accent: #ffc2a3;
  --nav-bg: rgba(156, 64, 32, 0.86);
  --nav-hover: #ffc2a3;
  --logo-bg: #fef7ef;
  --logo-fg: #9c4020;
  --panel-1: #ac4a26;
  --panel-2: #8c3719;
}
html[data-section="contact"] {
  --bg: #b94a1e;
  --ink: #fff9f4;
  --muted: #fbe3d3;
  --line: rgba(255, 249, 244, 0.32);
  --body-txt: #fdf0e6;
  --accent: #33150a;
  --nav-bg: rgba(185, 74, 30, 0.86);
  --nav-hover: #ffd9c2;
  --logo-bg: #fff9f4;
  --logo-fg: #b94a1e;
  --panel-1: #c65526;
  --panel-2: #a33f18;
}

/* Tout ce qui porte une couleur de thème se fond au lieu de sauter */
html, body, nav, footer,
.case-eyebrow, .case-eyebrow::before, .case-lede, .case-back,
.case-facts, .case-fact .label, .case-title, .case-block h2,
.case-block p, .case-deliverables li, .case-note,
.case-results, .case-result-label, .case-result-value,
.case-result-sign, .case-result-note,
.brand-tagline, .brand-tagline::before, .logo, .footer-logo,
.section-eyebrow, .section-eyebrow::before,
.case-next-title, .case-next-tag, .case-cta h2, .case-cta p,
.logo-mark circle, .logo-mark text,
.section-end-logo svg circle, .section-end-logo svg text {
  transition: background-color var(--tt) var(--te),
              border-color var(--tt) var(--te),
              color var(--tt) var(--te),
              fill var(--tt) var(--te);
}

/* Les logos inline suivent la palette (fill codé en dur surchargé ici) */
.logo-mark circle,
.section-end-logo svg circle { fill: var(--logo-bg); }
.logo-mark text,
.section-end-logo svg text { fill: var(--logo-fg); }
.logo-mark text tspan,
.section-end-logo svg text tspan { fill: var(--accent); }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
  /* iOS gonfle le texte en paysage sans cette ligne */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Lien d'évitement pour la navigation au clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* NAV — identique à l'accueil */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.logo span { color: var(--accent); }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-tagline {
  position: relative;
  padding-left: 15px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.brand-tagline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: var(--line);
}
/* BOUTON MENU — n'apparaît que sous 768 px (voir le bloc RESPONSIVE).
   Zone de 44 px : la cible minimale confortable au pouce. */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -11px;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Trois traits : l'élément lui-même est celui du milieu */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform 0.3s var(--te), opacity 0.2s ease, top 0.3s var(--te);
}
.nav-toggle-bars { top: calc(50% - 0.75px); }
.nav-toggle-bars::before { content: ''; top: -7px; }
.nav-toggle-bars::after { content: ''; top: 7px; }
/* Ouvert : les deux premiers traits se croisent, le troisième s'efface */
nav.is-open .nav-toggle-bars { transform: translateX(-50%) rotate(45deg); }
nav.is-open .nav-toggle-bars::before { top: 0; transform: translateX(-50%) rotate(-90deg); }
nav.is-open .nav-toggle-bars::after { opacity: 0; }

.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a,
.nav-links a.nav-cta {
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s var(--te);
}
/* Survol : orange du point du logo, éclairci selon la teinte de la section. */
.nav-links a:hover { color: var(--nav-hover); }
.nav-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Lien Facebook — toujours visible en haut à droite, même sur mobile */
.nav-links { margin-left: auto; }
.nav-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 28px;
  margin-right: -9px;
  color: var(--ink);
  transition: color 0.2s var(--te);
}
.nav-social:hover { color: var(--nav-hover); }
.nav-social:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------
   EN-TÊTE DU PROJET
   --------------------------------------------------------------- */
.case-hero {
  padding: 180px 0 100px;
}
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 48px;
}
.case-back:hover { color: var(--ink); }
.case-back span { transition: transform 0.3s ease; }
.case-back:hover span { transform: translateX(-4px); }

.case-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.case-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--ink);
  flex-shrink: 0;
}
.case-title {
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.case-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.case-lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--body-txt);
  max-width: 62ch;
  margin-top: 32px;
}

/* Fiche technique : client, secteur, services, année, lien */
.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.case-fact { font-size: 14px; }
.case-fact .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 8px;
}
.case-fact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s ease;
}
.case-fact a:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------
   CAPTURE D'ÉCRAN — maquette d'ordinateur, comme sur l'accueil
   --------------------------------------------------------------- */
.case-shot { padding: 0 0 120px; }
.case-shot-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  background: linear-gradient(135deg, var(--panel-1), var(--panel-2));
  position: relative;
  overflow: hidden;
  transition: background var(--tt) var(--te);
}
.case-shot-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(200, 85, 61, 0.08));
  pointer-events: none;
}
.macbook-mockup {
  width: 86%;
  max-width: 900px;
  position: relative;
}
.macbook-screen {
  background: #e8e8e8;
  border-radius: 12px 12px 0 0;
  padding: 10px 10px 0 10px;
  position: relative;
  box-shadow: 0 -2px 20px rgba(200, 85, 61, 0.12);
}
.macbook-screen::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #c0c0c0;
  border-radius: 50%;
  margin: 0 auto 8px;
}
.macbook-screen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px 2px 0 0;
}
.macbook-base {
  background: linear-gradient(to bottom, #d0d0d0, #c0c0c0);
  height: 14px;
  border-radius: 0 0 8px 8px;
  position: relative;
}
.macbook-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 5px;
  background: #b0b0b0;
  border-radius: 0 0 4px 4px;
}
.macbook-base::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 10%;
  right: 10%;
  height: 4px;
  background: linear-gradient(to bottom, #d5d5d5, #c8c8c8);
  border-radius: 0 0 12px 12px;
}
.case-shot-caption {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   CORPS DU TEXTE — le mandat, l'approche, le résultat
   --------------------------------------------------------------- */
.case-body { padding: 0 0 120px; }
.case-block {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
}
.case-block h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  padding-top: 6px;
}
.case-block p {
  font-size: 17px;
  color: var(--body-txt);
  max-width: 62ch;
}
.case-block p + p { margin-top: 20px; }
.case-block-copy > * + .case-deliverables { margin-top: 28px; }

.case-deliverables {
  list-style: none;
  max-width: 62ch;
}
.case-deliverables li {
  position: relative;
  padding: 14px 0 14px 28px;
  font-size: 15px;
  color: var(--body-txt);
  border-bottom: 1px solid var(--line);
}
.case-deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  width: 12px;
  height: 1px;
  background: var(--accent);
}
.case-deliverables li strong {
  color: var(--ink);
  font-weight: 500;
}
.case-deliverables li sup { font-size: 0.7em; line-height: 0; }

/* Chiffres du résultat — deux colonnes de grands nombres */
.case-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  max-width: 62ch;
}
.case-result-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-bottom: 14px;
}
.case-result-value {
  display: block;
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(44px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.case-result-sign {
  color: var(--accent);
  font-size: 0.5em;
  vertical-align: 0.55em;
  margin-left: 0.06em;
}
.case-result-note {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body-txt);
  max-width: 30ch;
}

/* Emplacement de texte à remplir — visible le temps de la rédaction */
.case-placeholder {
  font-style: italic;
  color: var(--muted);
}

/* ---------------------------------------------------------------
   PROJET SUIVANT + APPEL À L'ACTION
   --------------------------------------------------------------- */
.case-next { padding: 0 0 120px; }
.case-next-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.case-next-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 10px;
}
.case-next-title {
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.case-next-arrow {
  font-size: 24px;
  color: var(--accent);
  transition: transform 0.3s ease, color var(--tt) var(--te);
}
.case-next-link:hover .case-next-arrow { transform: translateX(8px); }
.case-next-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }

.case-cta { padding: 0 0 140px; }
.case-cta-inner {
  padding: 72px 0 0;
  border-top: 1px solid var(--line);
}
.case-cta h2 {
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  max-width: 24ch;
}
.case-cta h2 em { font-style: italic; color: var(--accent); font-weight: 400; }
.case-cta p {
  font-size: 17px;
  color: var(--body-txt);
  max-width: 58ch;
  margin-top: 24px;
}
.case-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: none;
  padding: 16px 40px;
  margin-top: 40px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, gap 0.3s ease, color var(--tt) var(--te);
}
.case-btn:hover { background: var(--accent); gap: 20px; }
.case-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.section-end-logo {
  display: flex;
  justify-content: center;
  margin-top: 80px;
}
.section-end-logo svg { width: 36px; height: 36px; }

/* FOOTER — identique à l'accueil */
footer {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-family: 'Fraunces FJ', 'Fraunces', serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.footer-logo span { color: var(--accent); }
.footer-logo .logo-mark { width: 28px; height: 28px; flex-shrink: 0; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-bottom address {
  font-style: normal;
  font-size: inherit;
  text-align: right;
}

/* TÉMOINS — bannière de consentement (Loi 25 / RGPD) */
.consent-manage {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.consent-manage:hover,
.consent-manage:focus-visible { color: var(--ink); border-color: var(--ink); }
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  padding: 0 32px 24px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--te), transform 0.5s var(--te);
}
.consent.is-visible { opacity: 1; transform: none; }
.consent-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 22px 28px;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  transition: background-color var(--tt) var(--te), border-color var(--tt) var(--te);
}
.consent-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin: 0 0 10px;
}
.consent-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-txt);
  max-width: 64ch;
}
.consent-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.consent-btn {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  padding: 13px 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, color var(--tt) var(--te);
}
.consent-btn:hover { background: var(--accent); border-color: var(--accent); }
.consent-btn-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.consent-btn-ghost:hover { background: transparent; border-color: var(--ink); }

/* REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease,
              background-color var(--tt) var(--te),
              border-color var(--tt) var(--te),
              color var(--tt) var(--te);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* CURSEUR ROND */
.cursor-ring {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 1.5px solid var(--accent);
  background: rgba(200, 85, 61, 0.12);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) scale(1);
  transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease,
              margin 0.2s ease, background 0.2s ease;
  will-change: transform;
}
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hovering {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: rgba(200, 85, 61, 0.18);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.cursor-ring.is-pressed {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: rgba(200, 85, 61, 0.3);
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .cursor-ring { display: block; }
  html.custom-cursor,
  html.custom-cursor body,
  html.custom-cursor a,
  html.custom-cursor button,
  html.custom-cursor input,
  html.custom-cursor textarea,
  html.custom-cursor select,
  html.custom-cursor [class*="cursor"] { cursor: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tt: 0.01s; }
  html { scroll-behavior: auto; }
  .nav-links { transition: none; }
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .consent { transition: none; }
}

/* ===============================================================
   RESPONSIVE
   ---------------------------------------------------------------
   Trois paliers : 900 px casse les blocs en deux colonnes, 768 px
   fait passer le menu en panneau dépliable, 480 px resserre les
   titres et la maquette d'ordinateur. Aucun lien n'est masqué au
   passage : ils sont rangés dans le panneau, pas supprimés.
   =============================================================== */
@media (max-width: 900px) {
  .case-block { grid-template-columns: 1fr; gap: 20px; }
  .case-block h2 { padding-top: 0; }
}
@media (max-width: 560px) {
  .case-results { gap: 32px; margin-top: 28px; padding-top: 28px; }
  .case-result-note { max-width: none; }
}
@media (max-width: 768px) {
  .container { padding: 0 24px; }
  .consent { padding: 0 16px 16px; }
  .consent-inner { flex-direction: column; align-items: stretch; gap: 20px; padding: 20px; }
  .consent-actions { gap: 10px; }
  .consent-btn { flex: 1; padding: 14px 16px; }

  /* NAV — la barre se resserre et le menu passe en panneau */
  nav .container { padding-top: 12px; padding-bottom: 12px; }
  /* Ouvert, la barre devient opaque : le panneau se lit sur un fond
     plein plutôt que sur le contenu qui défile derrière. */
  nav.is-open { background: var(--bg); }
  .nav-toggle { display: block; }
  .nav-social { margin-left: auto; margin-right: 2px; width: 44px; height: 44px; }
  .nav-toggle { order: 1; }
  .brand-tagline { display: none; }
  .logo { font-size: 17px; }
  .logo-mark { width: 30px; height: 30px; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    /* Téléphone en paysage : le panneau défile au lieu de sortir de l'écran */
    max-height: calc(100vh - 68px);
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.28s var(--te), transform 0.28s var(--te), visibility 0.28s;
  }
  nav.is-open .nav-links { visibility: visible; opacity: 1; transform: none; }
  /* Une ligne par lien, hauteur de cible confortable au pouce */
  .nav-links a {
    padding: 17px 2px;
    font-size: 13px;
    border-top: 1px solid var(--line);
  }
  .nav-links a.nav-cta {
    margin-top: 18px;
    padding: 16px 20px;
    font-size: 13px;
    border: 1px solid var(--ink);
    border-top: 1px solid var(--ink);
    text-align: center;
  }

  .case-hero { padding: 120px 0 72px; }
  .case-back { margin-bottom: 32px; }
  .case-facts { margin-top: 44px; gap: 24px; }
  .case-shot { padding-bottom: 80px; }
  .case-shot-frame { padding: 28px 20px; }
  .macbook-mockup { width: 94%; }
  .case-body, .case-next { padding-bottom: 80px; }
  .case-block { padding: 40px 0; }
  .case-cta { padding-bottom: 96px; }
  .case-cta-inner { padding-top: 48px; }
  .section-end-logo { margin-top: 48px; }

  footer .container { gap: 18px; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .footer-bottom address { text-align: center; }
}

@media (max-width: 480px) {
  .container { padding: 0 20px; }
  /* Le panneau du menu suit le même retrait que le conteneur */
  .nav-links { padding-left: 20px; padding-right: 20px; }
  /* Les deux boutons de témoins restent côte à côte jusqu'à 320 px :
     « Refuser » et « Accepter » ne se coupent pas. */
  .consent-inner { padding: 18px; }
  .consent-btn { padding: 14px 10px; }
  .case-hero { padding: 108px 0 60px; }
  .case-eyebrow { margin-bottom: 20px; }
  .case-lede { margin-top: 24px; }
  .case-facts { margin-top: 36px; padding-top: 32px; gap: 22px; }

  /* La maquette d'ordinateur : cadre et bordures d'écran à l'échelle
     du téléphone, sinon la capture se réduit à une vignette. */
  .case-shot-frame { padding: 20px 12px; }
  .macbook-mockup { width: 100%; }
  .macbook-screen { padding: 6px 6px 0; border-radius: 8px 8px 0 0; }
  .macbook-screen::before { width: 6px; height: 6px; margin-bottom: 5px; }
  .macbook-base { height: 10px; }

  .case-deliverables li { padding-left: 22px; }
  .case-deliverables li::before { width: 10px; }
  /* Pleine largeur : plus facile à viser qu'un bouton au milieu du texte */
  .case-btn { width: 100%; justify-content: center; padding: 17px 24px; }
  .case-next-link { padding: 28px 0; gap: 16px; }
}