/* Studio Amaïa — feuille de style V2 (accueil et offres)
   Polices : fichiers déjà présents dans assets/fonts/ */

@font-face { font-family: "Albert Sans"; src: url("../assets/fonts/albert-sans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../assets/fonts/playfair-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../assets/fonts/playfair-display-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../assets/fonts/playfair-display-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --ink: #1F1915;          /* noir chaud, textes */
  --ink-soft: #62574E;
  --terra: #B86E4D;           /* terracotta foncée, accents et aplats */
  --terra-hover: #A35E3F;
  --terra-pale: #F6E7DE;
  --bronze: #AD8E6F;      /* couleur du logo : filets, puces, décor */
  --bronze-ink: #8A6E52;
  --abysse: #0E2F3A;
  --gold: #AD8E6F;         /* doré du logo, boutons */
  --gold-hover: #957759;
  --mist-deep: #EADDCF;
  --espresso: #2A211C;     /* pied de page */      /* bleu profond, une section par page */
  --bronze-light: #D2B48F; /* bronze éclairci, lisible sur le bleu */
  --on-deep: #F4EEE7;
  --on-deep-soft: rgba(244, 238, 231, .72);  /* bronze lisible pour les surtitres et petits textes */
  --mist: #F2EAE1;         /* panneau de la planche */
  --paper: #FFFFFF;
  --warm: #F7F3EE;         /* blanc cassé chaud, une section sur deux */
  --line: rgba(173, 142, 111, .28);
  --line-strong: rgba(173, 142, 111, .45);
  --font-text: "Albert Sans", "Helvetica Neue", Arial, sans-serif;
  --font-title: "Playfair Display", Georgia, "Times New Roman", serif;
  --max: 85rem;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
  --section: clamp(5rem, 3.5rem + 5vw, 7.5rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 5.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
a:hover { color: var(--terra); }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: .75rem 1rem; }
.skip:focus { top: 1rem; color: #fff; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { border-top: 0; }
/* Pas de filet entre deux aplats différents ; filet seulement entre deux sections blanches */
.hero + .section:not([class*="bg-"]) { border-top: 1px solid var(--line); }
.section__in { padding-block: var(--section); }

/* Titres de section : surtitre italique + titre capitales */
.kicker { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; line-height: 1.3; color: var(--bronze-ink); }
.h2 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.65rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; }
.head { display: flex; flex-direction: column; gap: .75rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.head--center { align-items: center; text-align: center; }
.head__lead { color: var(--ink-soft); max-width: 34em; }
.lead { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.6; }
.muted { color: var(--ink-soft); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .9rem 1.6rem; border: 1px solid var(--terra); background: var(--terra); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn:hover { background: var(--terra-hover); border-color: var(--terra-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--terra); border-color: #fff; }
.btn--light:hover { background: var(--terra-pale); border-color: var(--terra-pale); color: var(--terra-hover); }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--terra); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.link { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terra); text-underline-offset: .4em; text-decoration-thickness: 1px; }
.link:hover { color: var(--terra-hover); }

/* En-tête */
.hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hd__in { min-height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; }
.hd__nav, .hd__end { display: flex; align-items: center; gap: 1.75rem; font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; }
.hd__end { justify-content: flex-end; }
.hd a { text-decoration: none; }
.hd a[aria-current="page"] { color: var(--terra); }
.hd__logo img { height: 2.6rem; width: auto; }
.hd__cta { background: var(--terra); color: #fff; padding: .75rem 1.25rem; font-weight: 500; }
.hd__cta:hover { background: var(--terra-hover); color: #fff; }
.hd__burger { display: none; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.hd__burger span, .hd__burger span::before, .hd__burger span::after { display: block; width: 1.1rem; height: 1px; background: currentColor; position: relative; transition: transform .25s var(--ease); }
.hd__burger span::before, .hd__burger span::after { content: ""; position: absolute; left: 0; }
.hd__burger span::before { top: -6px; } .hd__burger span::after { top: 6px; }
.hd__burger[aria-expanded="true"] span { background: transparent; }
.hd__burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hd__burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.hd__menu { display: none; }

@media (max-width: 63.99em) {
  .hd__in { grid-template-columns: auto 1fr auto; }
  .hd__nav, .hd__end a:not(.hd__cta) { display: none; }
  .hd__logo { grid-column: 1; }
  .hd__end { grid-column: 3; gap: .75rem; }
  .hd__burger { display: inline-flex; }
  .hd__menu { border-top: 1px solid var(--line); background: var(--paper); }
  .hd__menu[data-open="true"] { display: block; }
  .hd__menu ul { list-style: none; margin: 0; padding: .5rem var(--gutter) 1.5rem; }
  .hd__menu li a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-title); font-size: 1.375rem; }
}
@media (max-width: 30em) { .hd__cta { padding: .65rem .9rem; font-size: .75rem; } .hd__logo img { height: 2.1rem; } }

/* Hero accueil */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--paper); color: var(--ink); display: flex; flex-direction: column; min-height: min(calc(100svh - var(--header-h)), 58rem); }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__silk { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(ellipse 38% 42% at 50% 46%, rgba(0,0,0,.08) 30%, #000 100%); mask-image: radial-gradient(ellipse 38% 42% at 50% 46%, rgba(0,0,0,.08) 30%, #000 100%); }
.hero__in { flex: 1 1 auto; width: 100%; max-width: var(--max); margin-inline: auto; padding: clamp(3.5rem, 8vh, 7rem) var(--gutter) clamp(2.5rem, 6vh, 5rem); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem; text-align: center; }
.hero__eye { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--bronze-ink); }
.hero__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.25rem); line-height: 1.08; letter-spacing: -.01em; max-width: 15em; text-wrap: balance; }
.hero__lead { max-width: 33em; color: var(--ink-soft); font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); }
.hero .btn-row { justify-content: center; padding-top: .5rem; }
@media (max-width: 63.99em) { .hero__silk { -webkit-mask-image: linear-gradient(rgba(0,0,0,.2) 35%, #000 80%); mask-image: linear-gradient(rgba(0,0,0,.2) 35%, #000 80%); } }

/* Bande défilante */
.marquee { border-top: 1px solid var(--line-strong); color: var(--terra); overflow: hidden; }
.marquee__track { display: flex; width: max-content; padding-block: 1.1rem; font-family: var(--font-title); font-style: italic; font-size: 1.3125rem; white-space: nowrap; animation: marquee 38s linear infinite; }
.marquee__track span { padding-right: 2rem; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hero__in > * { animation: rise .9s var(--ease) both; }
  .hero__in > :nth-child(2) { animation-delay: .12s; }
  .hero__in > :nth-child(3) { animation-delay: .24s; }
  .hero__in > :nth-child(4) { animation-delay: .36s; }
  .hero__bg { animation: fade 2.2s ease .2s both; }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } html { scroll-behavior: auto; } }

/* Logos clients */
.logos { border-bottom: 1px solid var(--line); }
.logos__in { padding-block: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.logos__t { font-family: var(--font-title); font-style: italic; font-size: 1.1875rem; color: var(--ink-soft); }
.logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.75rem; }
.logos img { height: 2rem; width: auto; }
.logos .is-tall { height: 2.5rem; } .logos .is-square { height: 2.6rem; } .logos .is-wide { height: 1.75rem; }

/* Pour qui : deux colonnes séparées par des filets */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--line-strong); }
.duo__item { display: flex; flex-direction: column; gap: 1.1rem; padding: 3rem 3rem 3rem 0; }
.duo__item + .duo__item { padding: 3rem 0 3rem 3rem; border-left: 1px solid var(--line-strong); }
.duo h3 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); line-height: 1.2; }
.duo ul { padding-left: 1.1rem; line-height: 1.9; }
.duo ul li::marker { color: var(--bronze); }
@media (max-width: 47.99em) {
  .duo { grid-template-columns: 1fr; }
  .duo__item, .duo__item + .duo__item { padding: 2.5rem 0; border-left: 0; }
  .duo__item + .duo__item { border-top: 1px solid var(--line-strong); }
}

/* Prestations en liste */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.rows a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: .5rem 2.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; transition: padding .35s var(--ease); }
.rows a:hover { padding-inline: 1rem; color: var(--ink); }
.rows__t { font-family: var(--font-title); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; }
.rows__d { color: var(--ink-soft); }
.rows svg { color: var(--bronze); transition: transform .35s var(--ease); }
.rows a:hover svg { transform: translateX(6px); }
@media (max-width: 47.99em) { .rows a { grid-template-columns: minmax(0, 1fr) auto; } .rows__d { grid-column: 1; grid-row: 2; } .rows svg { grid-row: 1 / span 2; grid-column: 2; } }

/* Réalisations : défilement horizontal */
.hz__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem; margin-bottom: 2.5rem; }
.hz__top .head { margin-bottom: 0; }
.hz__ctrl { display: flex; align-items: center; gap: .6rem; }
.hz__count { font-family: var(--font-title); font-style: italic; font-size: 1.125rem; color: var(--ink-soft); margin-right: .75rem; min-width: 4.5em; text-align: right; }
.hz__btn { width: 3rem; height: 3rem; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .25s, color .25s; }
.hz__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.hz__btn:disabled { opacity: .3; cursor: default; }
.hz__view { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; cursor: grab; }
.hz__view::-webkit-scrollbar { display: none; }
.hz__view.is-drag { cursor: grabbing; scroll-snap-type: none; }
.hz__view.is-drag a { pointer-events: none; }
.hz__item { flex: 0 0 clamp(16rem, 28vw, 25rem); scroll-snap-align: start; display: flex; flex-direction: column; gap: .75rem; text-decoration: none; }
.hz__img { overflow: hidden; background: var(--mist); }
.hz__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); -webkit-user-drag: none; user-select: none; }
.hz__item:hover img { transform: scale(1.035); }
.hz__name { font-size: .9375rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hz__type { font-size: .9375rem; color: var(--ink-soft); }
.hz__bar { height: 1px; background: var(--line-strong); margin-top: 2rem; position: relative; }
.hz__bar span { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--bronze); transform-origin: left; transform: scaleX(var(--p, .12)); transition: transform .2s linear; }
.hz__more { margin-top: 2.5rem; }

/* Offres (accueil) */
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.offer { border: 1px solid var(--line-strong); padding: 2.75rem 2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.offer h3 { font-family: var(--font-title); font-weight: 400; font-size: 1.75rem; line-height: 1.15; }
.offer p { color: var(--ink-soft); font-size: 1rem; }
.offer__price { font-family: var(--font-title); font-style: italic; font-size: 1.1875rem; color: var(--bronze-ink) !important; }
.offer .link, .offer .btn { margin-top: auto; }
.offer--main { border-color: var(--terra); }
.offer--main p { color: var(--ink); }
.offer--main .offer__eye { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--bronze-ink) !important; }
.offer--main .offer__price { font-style: normal; font-size: 2rem; color: var(--ink) !important; }
@media (max-width: 63.99em) { .offers { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; } }

.steps { list-style: none; margin: clamp(3.5rem, 3rem + 2vw, 4.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.steps li { padding: 2rem 2rem 0 0; display: flex; flex-direction: column; gap: .6rem; }
.steps__n { font-family: var(--font-title); font-style: italic; font-size: 2.125rem; line-height: 1; color: var(--bronze); }
.steps__t { font-size: 1.125rem; font-weight: 600; }
@media (max-width: 47.99em) { .steps { grid-template-columns: 1fr; } .steps li { padding: 1.75rem 0; border-bottom: 1px solid var(--line); } }

/* À propos */
.about { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: center; gap: clamp(2.5rem, 2rem + 4vw, 5rem); }
.about__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.about__txt { display: flex; flex-direction: column; gap: 1.25rem; }
.about__txt .kicker { font-size: .78rem; }
.timeline { list-style: none; margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.timeline li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); }
.timeline span:first-child { font-family: var(--font-title); font-style: italic; font-size: 1.125rem; color: var(--bronze-ink); }
@media (max-width: 47.99em) { .about { grid-template-columns: 1fr; } .about__img { max-width: 24rem; } }

/* Témoignages */
.quotes { max-width: 68rem; margin-inline: auto; text-align: center; }
.quotes__main { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: 3.5rem; }
.quotes__main blockquote { font-family: var(--font-title); font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.375rem); line-height: 1.35; max-width: 24em; }
.quotes figcaption { font-size: .875rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.quotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; border-top: 1px solid var(--line); padding-top: 2.5rem; }
.quotes__grid figure { display: flex; flex-direction: column; gap: .75rem; }
.quotes__grid blockquote { font-family: var(--font-title); font-size: 1.1875rem; line-height: 1.5; }
.quotes__grid figcaption { text-transform: none; letter-spacing: 0; font-size: .875rem; }
@media (max-width: 47.99em) { .quotes__grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 54rem; margin-inline: auto; }
.faq details { border-top: 1px solid var(--line-strong); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; font-size: 1.125rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: .7rem; height: .7rem; border-right: 1px solid var(--bronze); border-bottom: 1px solid var(--bronze); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 44em; }

/* Appel final */
.end { background: var(--paper); color: var(--ink); border-block: 1px solid var(--line-strong); padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.end__eye { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--bronze-ink); }
.end__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3.125rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .03em; }
.end p { max-width: 34em; }
.end .btn-row { justify-content: center; align-items: center; gap: 1rem 1.75rem; }
.end a:not(.btn) { color: var(--ink); text-underline-offset: .3em; }

/* Pied de page */
.ft { border-top: 1px solid var(--line); background: var(--warm); }
.ft__in { padding-block: 4rem 2.5rem; display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 2.5rem; font-size: .9375rem; line-height: 1.9; }
.ft__brand { display: flex; flex-direction: column; gap: 1rem; }
.ft__brand img { height: 2.3rem; width: auto; align-self: flex-start; }
.ft__brand p { color: var(--ink-soft); line-height: 1.6; max-width: 26em; }
.ft h2 { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--bronze-ink); margin-bottom: .4rem; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft a { text-decoration: none; }
.ft__bottom { border-top: 1px solid var(--line); padding-block: 1.25rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.75rem; font-size: .8125rem; color: var(--ink-soft); }
.ft__bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
@media (max-width: 63.99em) { .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 30em) { .ft__in { grid-template-columns: 1fr; } }

/* ---------- Page offres ---------- */
.pg-hero { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--line); }
.pg-hero__in { max-width: 62rem; margin-inline: auto; padding: clamp(4.5rem, 3rem + 5vw, 7.5rem) var(--gutter) clamp(3.5rem, 2.5rem + 3vw, 5rem); display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; }
.pg-hero__t { font-family: var(--font-title); font-weight: 400; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem); line-height: 1.06; text-transform: uppercase; letter-spacing: .02em; }
.pg-hero .lead { color: var(--ink-soft); max-width: 36em; }
.jump { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.jump a { display: inline-block; padding: .7rem 1.2rem; border: 1px solid var(--line-strong); font-size: .875rem; letter-spacing: .04em; text-decoration: none; }
.jump a:hover { border-color: var(--terra); }

.pack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pack__txt { background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-right: 0; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.pack__txt .kicker { font-size: .78rem; }
.pack__txt .h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.pack__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding-top: .5rem; }
.pack__price strong { font-family: var(--font-title); font-weight: 400; font-size: clamp(3.25rem, 2.5rem + 3vw, 5rem); line-height: 1; }
.pack__ops { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pack__ops li { border: 1px solid var(--line-strong); padding: .35rem .8rem; font-size: .875rem; }
.pack__txt .btn { align-self: flex-start; margin-top: .5rem; }
.pack__bat { background: var(--mist); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem); display: flex; align-items: center; justify-content: center; }
@media (max-width: 63.99em) { .pack { grid-template-columns: 1fr; } .pack__txt { border-right: 1px solid var(--line-strong); border-bottom: 0; } }

/* Planche BAT */
.bat { position: relative; width: 100%; max-width: 30rem; background: #fff; box-shadow: 0 1px 0 var(--line); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.bat__mark { position: absolute; background: var(--ink); }
.bat__mark--h { width: 1rem; height: 1px; } .bat__mark--v { width: 1px; height: 1rem; }
.bat__dim { display: flex; align-items: center; gap: .5rem; height: .5rem; border-inline: 1px solid var(--terra); font-size: .6875rem; color: var(--terra); }
.bat__dim::before, .bat__dim::after { content: ""; flex: 1; height: 1px; background: var(--terra); }
.bat__row { display: flex; gap: .75rem; align-items: flex-end; }
.bat__col { flex: 4 1 0; min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.fmt { display: flex; align-items: flex-end; padding: .5rem; font-size: .6875rem; line-height: 1.3; letter-spacing: .03em; min-width: 0; }
.fmt--a { aspect-ratio: 16 / 5; background: var(--terra); color: #fff; }
.fmt--b { flex: 3 1 0; aspect-ratio: 4 / 5; background: var(--terra-pale); }
.fmt--c { flex: 2 1 0; aspect-ratio: 9 / 16; background: var(--ink); color: #fff; }
.fmt--d { aspect-ratio: 1.91 / 1; background: #D9DCDB; }
.fmt--e { aspect-ratio: 3 / 1; border: 1px solid var(--terra); color: var(--terra); }
.bat__legend { font-size: .75rem; color: var(--ink-soft); text-align: right; }

.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
.formats { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.formats li { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-strong); }
.formats li span:last-child { color: var(--ink-soft); font-size: .9375rem; text-align: right; }
.cond { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.cond li { padding-left: 1.6rem; position: relative; }
.cond li::before { content: ""; position: absolute; left: 0; top: .7em; width: .8rem; height: 1px; background: var(--bronze); }
@media (max-width: 47.99em) { .incl { grid-template-columns: 1fr; } }

.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--bronze); }
.week li { padding: 1.75rem 2rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.week__d { font-family: var(--font-title); font-style: italic; font-size: 1.375rem; color: var(--bronze-ink); }
.week__t { font-size: 1.1875rem; font-weight: 600; }
@media (max-width: 47.99em) { .week { grid-template-columns: 1fr; } .week li { padding: 1.5rem 0; border-bottom: 1px solid var(--line); } }

.cal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 1px solid var(--bronze); }
.cal div { border-left: 1px solid var(--line-strong); padding: 1rem .75rem .5rem; display: flex; flex-direction: column; gap: 1.25rem; min-height: 7.5rem; }
.cal div:nth-child(4n + 1) { border-left-color: var(--bronze); }
.cal div:last-child { border-right: 1px solid var(--line-strong); }
.cal__m { font-size: .8125rem; color: var(--ink-soft); }
.cal__o { font-family: var(--font-title); font-size: 1.125rem; line-height: 1.2; }
.cal .is-key .cal__o { color: var(--bronze-ink); }
.cal .is-off .cal__o { color: var(--ink-soft); font-style: italic; }
@media (max-width: 63.99em) { .cal { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cal div { border-bottom: 1px solid var(--line-strong); } .cal div:nth-child(4n) { border-right: 1px solid var(--line-strong); } }
@media (max-width: 30em) { .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal div:nth-child(2n) { border-right: 1px solid var(--line-strong); } .cal div:nth-child(2n + 1) { border-left-color: var(--bronze); } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: start; }
.split__txt { display: flex; flex-direction: column; gap: 1.25rem; }
.split__txt .h2 { margin-bottom: .25rem; }
@media (max-width: 63.99em) { .split { grid-template-columns: 1fr; } }

.prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.prices li { display: flex; flex-direction: column; gap: .2rem; padding: 1.25rem 1.5rem 1.25rem 0; border-bottom: 1px solid var(--line-strong); }
.prices li:nth-child(2n) { padding: 1.25rem 0 1.25rem 1.5rem; border-left: 1px solid var(--line-strong); }
.prices__t { font-weight: 600; }
.prices__p { font-family: var(--font-title); font-style: italic; font-size: 1.125rem; color: var(--bronze-ink); }
.note { font-size: .9375rem; color: var(--ink-soft); }
@media (max-width: 30em) { .prices { grid-template-columns: 1fr; } .prices li, .prices li:nth-child(2n) { padding: 1.1rem 0; border-left: 0; } }

.perks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.perks li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .25rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line-strong); }
.perks strong { font-family: var(--font-title); font-weight: 400; font-size: 1.3125rem; line-height: 1.25; }
.perks span { color: var(--ink-soft); }
@media (max-width: 47.99em) { .perks li { grid-template-columns: 1fr; } }

/* Hero de page intérieure (même aplat et même ruban que l'accueil, plus compact) */
.hero--page .hero__in { padding-block: clamp(4.5rem, 3rem + 5vw, 7rem) clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.hero--page .hero__t { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4rem); }
.hero .jump a { border-color: var(--line-strong); }
.hero .jump a:hover { background: var(--terra); color: #fff; border-color: var(--terra); }
.pack-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(2.5rem, 2rem + 3vw, 5rem); margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); align-items: end; }
@media (max-width: 47.99em) { .pack-intro { grid-template-columns: 1fr; } }
.sub { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.2; margin-bottom: 1.25rem; }
.gap-top { margin-top: clamp(3.5rem, 3rem + 2vw, 4.5rem); }
.offers--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.5rem; }
@media (max-width: 47.99em) { .offers--two { grid-template-columns: 1fr; } }
@media (max-width: 63.99em) { .offers--two { max-width: none; } }

/* Logos clients en pied de hero, comme sur le site actuel */
.hero__logos { width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) clamp(1.5rem, 3vh, 2.5rem); }
.hero__logos-in { display: grid; grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: 1rem 2rem; border-top: 1px solid var(--line); padding-top: clamp(1.25rem, 2.5vh, 2rem); }
.hero__logos p { font-family: var(--font-text); font-style: normal; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; line-height: 1.35; color: var(--bronze-ink); }
.hero__logos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero__logos li { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: .5rem 1rem; border-left: 1px solid var(--line); }
.hero__logos li:first-child { border-left: 0; }
.hero__logos img { height: 1.9rem; width: auto; max-width: 100%; object-fit: contain; }
.hero__logos .is-tall { height: 2.4rem; } .hero__logos .is-square { height: 2.5rem; } .hero__logos .is-wide { height: 1.6rem; }
@media (max-width: 63.99em) {
  .hero__logos-in { grid-template-columns: 1fr; }
  .hero__logos ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__logos li:nth-child(3n + 1) { border-left: 0; }
  .hero__logos li:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
/* Hero de page intérieure : centré, plus compact */
.hero--page { min-height: 0; }
.hero--page .hero__lead { color: var(--ink-soft); }

/* Titres longs en bas de casse */
.h2--lc { text-transform: none; letter-spacing: -.005em; font-size: clamp(1.875rem, 1.25rem + 2vw, 2.875rem); line-height: 1.12; text-wrap: balance; }
/* Section à deux colonnes : titre à gauche, contenu à droite */
.sh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem clamp(2.5rem, 2rem + 3vw, 5rem); align-items: start; }
.sh__head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 2rem); }
.sh .faq { max-width: none; margin: 0; }
@media (max-width: 63.99em) { .sh { grid-template-columns: 1fr; } .sh__head { position: static; } }

/* Titres : Playfair 800 serré, en bas de casse, comme le site actuel */
.hero__t, .h2, .end__t, .duo h3, .rows__t, .offer h3, .sub, .perks strong, .pack__price strong { font-weight: 800; letter-spacing: -.03em; text-transform: none; }
.hero__t { font-size: clamp(2.75rem, 1.4rem + 4.4vw, 5rem); line-height: 1.04; max-width: 13em; }
.h2, .h2--lc { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); line-height: 1.05; }
.pack__txt .h2 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
.end__t { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.05; }
.duo h3, .offer h3, .sub, .perks strong { letter-spacing: -.02em; }
.pack__price strong { letter-spacing: -.04em; }


/* ---------- Aplats de section ---------- */
.bg-warm { background: var(--warm); }
.bg-warm .pack__bat { background: var(--mist-deep); }

/* Bleu abysse : titres en bronze éclairci */
.bg-deep { background: var(--abysse); color: var(--on-deep); }
.bg-deep .h2, .bg-deep .kicker, .bg-deep .quotes__main blockquote, .bg-deep .cal__o, .bg-deep .cal .is-key .cal__o { color: var(--bronze-light); }
.bg-deep .cal .is-off .cal__o { color: var(--on-deep-soft); }
.bg-deep .muted, .bg-deep .head__lead, .bg-deep figcaption, .bg-deep .cal__m { color: var(--on-deep-soft); }
.bg-deep .quotes__grid { border-top-color: rgba(244, 238, 231, .16); }
.bg-deep .quotes__grid blockquote { color: var(--on-deep); }
.bg-deep .cal { border-top-color: var(--bronze-light); }
.bg-deep .cal div { border-left-color: rgba(244, 238, 231, .18); }
.bg-deep .cal div:nth-child(4n + 1) { border-left-color: var(--bronze-light); }
.bg-deep .cal div:last-child { border-right-color: rgba(244, 238, 231, .18); }
@media (max-width: 63.99em) { .bg-deep .cal div { border-bottom-color: rgba(244, 238, 231, .18); } .bg-deep .cal div:nth-child(4n) { border-right-color: rgba(244, 238, 231, .18); } }
@media (max-width: 30em) { .bg-deep .cal div:nth-child(2n) { border-right-color: rgba(244, 238, 231, .18); } .bg-deep .cal div:nth-child(2n + 1) { border-left-color: var(--bronze-light); } }

/* Terracotta : textes blancs */
.bg-terra { background: var(--terra); color: #fff; }
.bg-terra .h2, .bg-terra .rows__t, .bg-terra .perks strong, .bg-terra .end__t { color: #fff; }
.bg-terra .kicker, .bg-terra .end__eye { color: var(--terra-pale); }
.bg-terra .muted, .bg-terra .head__lead, .bg-terra .rows__d, .bg-terra .perks span, .bg-terra .lead { color: rgba(255, 255, 255, .86); }
.bg-terra .rows, .bg-terra .rows a, .bg-terra .perks, .bg-terra .perks li { border-color: rgba(255, 255, 255, .3); }
.bg-terra .rows svg { color: #fff; }
.bg-terra .rows a:hover { color: #fff; }
.bg-terra a:not(.btn) { color: #fff; }

/* Appel final posé directement sur l'aplat */
.bg-terra .end, .bg-deep .end, .bg-warm .end { background: transparent; border: 0; padding-block: 0; color: inherit; }

/* ---------- Boutons en bronze ---------- */
.bg-deep .btn:hover { background: #E8BC80; border-color: #E8BC80; color: var(--abysse); }
.bg-terra .btn { background: #fff; border-color: #fff; color: var(--terra); }
.bg-terra .btn:hover { background: var(--terra-pale); border-color: var(--terra-pale); color: var(--terra-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bg-terra .btn--ghost, .bg-deep .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ---------- Composants sur aplat terracotta ---------- */
.bg-terra .duo, .bg-terra .duo__item + .duo__item { border-color: rgba(255, 255, 255, .3); }
@media (max-width: 47.99em) { .bg-terra .duo__item + .duo__item { border-top-color: rgba(255, 255, 255, .3); } }
.bg-terra .duo h3 { color: #fff; }
.bg-terra .duo ul li::marker { color: var(--terra-pale); }

/* ---------- Composants sur aplat bleu ---------- */
.bg-deep .offer { border-color: rgba(244, 238, 231, .22); }
.bg-deep .offer h3 { color: var(--bronze-light); }
.bg-deep .offer p { color: var(--on-deep-soft); }
.bg-deep .offer__price { color: var(--bronze-light) !important; }
.bg-deep .link { color: var(--bronze-light); }
.bg-deep .link:hover { color: #fff; }
.bg-deep .pack__txt { border-color: var(--paper); }
.bg-deep .pack__txt .kicker { color: var(--bronze-ink); }
.bg-deep .pack__txt .h2 { color: var(--ink); }
.bg-deep .pack__bat { background: var(--mist-deep); }
.bg-deep .steps { border-top-color: rgba(244, 238, 231, .22); }
.bg-deep .steps__n { color: var(--bronze-light); }
.bg-deep .steps__t { color: var(--on-deep); }
.bg-deep .faq details { border-color: rgba(244, 238, 231, .22); }
.bg-deep .faq summary { color: var(--on-deep); }
.bg-deep .faq summary::after { border-color: var(--bronze-light); }
.bg-deep .faq details p { color: var(--on-deep-soft); }

/* ---------- Pied de page foncé ---------- */
.ft { background: var(--espresso); color: var(--on-deep); border-top: 0; }
.ft h2 { color: var(--bronze-light); }
.ft__brand p, .ft__bottom, .ft__bottom a { color: var(--on-deep-soft); }
.ft a:hover { color: var(--bronze-light); }
.ft__bottom { border-top-color: rgba(244, 238, 231, .14); }

.end__eye, .kicker, .hero__eye { text-wrap: balance; }
.bat { color: var(--ink); }

/* ---------- Boutons dorés (texte foncé pour la lisibilité) ---------- */
.btn, .bg-deep .btn, .bg-deep .pack__txt .btn { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn:hover, .bg-deep .btn:hover, .bg-deep .pack__txt .btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); color: #fff; }
.hd__cta, .hd__cta:hover { color: #fff; }
.hd__cta { background: var(--gold); }
.hd__cta:hover { background: var(--gold-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.bg-terra .btn { background: #fff; border-color: #fff; color: var(--terra); }
.bg-terra .btn:hover { background: var(--terra-pale); border-color: var(--terra-pale); color: var(--terra-hover); }

/* Comment travailler ensemble : titre blanc, encadrés blancs */
.bg-deep .head--center .h2 { color: #fff; }
.bg-deep .offer { background: var(--paper); border-color: var(--paper); }
.bg-deep .offer h3 { color: var(--ink); }
.bg-deep .offer p { color: var(--ink-soft); }
.bg-deep .offer__price { color: var(--bronze-ink) !important; }
.bg-deep .offer .link { color: var(--terra); }
.bg-deep .offer .link:hover { color: var(--terra-hover); }

/* Citations en italique */
.quotes__main blockquote, .quotes__grid blockquote { font-style: italic; }

/* FAQ sur terracotta */
.bg-terra .faq details { border-color: rgba(255, 255, 255, .3); }
.bg-terra .faq summary { color: #fff; }
.bg-terra .faq summary::after { border-color: #fff; }
.bg-terra .faq details p { color: rgba(255, 255, 255, .86); }

/* Appel final sur bleu */
.bg-deep .end__t { color: var(--bronze-light); }
.bg-deep .end__eye { color: var(--on-deep-soft); }
.bg-deep .end a:not(.btn) { color: var(--on-deep); }

/* ---------- Page prestations : domaines ---------- */
.dom { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 2rem + 4vw, 6rem); align-items: start; }
.dom__txt { display: flex; flex-direction: column; gap: 1.1rem; }
.dom__txt .h2 { margin-bottom: .25rem; max-width: 18em; }
.dom__txt .lead, .dom__txt .muted { max-width: 36em; }
.dom__txt .btn { margin-top: .5rem; }
.dom__h { font-family: var(--font-text); font-weight: 500; text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; color: var(--bronze-ink); margin-bottom: 1.1rem; }
.dom__list { border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.dom__pj { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.pjs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.pj { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; }
.pj__img { overflow: hidden; background: var(--mist); }
.pj__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.pj:hover img { transform: scale(1.035); }
.pj__name { font-size: .9375rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pj__type { font-size: .9375rem; color: var(--ink-soft); margin-top: -.35rem; }
@media (max-width: 63.99em) { .dom { grid-template-columns: 1fr; } }
@media (max-width: 47.99em) { .pjs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }

/* sur terracotta */
.bg-terra .dom__h { color: var(--terra-pale); }
.bg-terra .dom__list { border-top-color: rgba(255, 255, 255, .3); }
.bg-terra .cond li::before { background: var(--terra-pale); }
.bg-terra .pj__type { color: rgba(255, 255, 255, .8); }
.bg-terra .pj__img { background: rgba(255, 255, 255, .12); }

/* encadrés d'offres sur bleu, page prestations */
.bg-deep .offers .offer { background: var(--paper); border-color: var(--paper); }

/* Prestations : offres 02 et 03 côte à côte */
.duo2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem clamp(2.5rem, 2rem + 4vw, 6rem); }
.duo2__item { display: flex; flex-direction: column; gap: 1.1rem; scroll-margin-top: calc(var(--header-h) + 1rem); }
.duo2__item .dom__h { margin: 1rem 0 0; }
.duo2__item .btn { margin-top: .5rem; }
.prices--one { grid-template-columns: 1fr; }
.prices--one li, .prices--one li:nth-child(2n) { flex-direction: row; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-left: 0; }
.perks--stack li, .duo2 .perks li { grid-template-columns: 1fr; }
.week--col { grid-template-columns: 1fr; }
.week--col li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.realiser { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); border-bottom: 1px solid rgba(255, 255, 255, .3); }
.bg-terra .realiser .kicker { font-size: 1rem; }
@media (max-width: 63.99em) { .duo2 { grid-template-columns: 1fr; } }

/* Prestations : « Ce que je réalise » en lignes compactes */
.rzs { border-top: 1px solid rgba(244, 238, 231, .22); }
.rz { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem 3rem; padding-block: 2.25rem; border-bottom: 1px solid rgba(244, 238, 231, .22); scroll-margin-top: calc(var(--header-h) + 1rem); }
.rz__txt { display: flex; flex-direction: column; gap: .6rem; }
.rz__t { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.15; color: var(--bronze-light); }
.rz__txt p { color: var(--on-deep-soft); font-size: 1rem; }
.rz__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; font-size: .9375rem; color: var(--on-deep); }
.rz__list li { padding-left: 1.4rem; position: relative; }
.rz__list li::before { content: ""; position: absolute; left: 0; top: .75em; width: .75rem; height: 1px; background: var(--bronze-light); }
.rz__pjs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-content: start; }
.rz__pj { display: flex; flex-direction: column; gap: .4rem; text-decoration: none; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-deep) !important; }
.rz__pj img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: opacity .3s; }
.rz__pj:hover img { opacity: .85; }
@media (max-width: 63.99em) { .rz { grid-template-columns: 1fr 1fr; } .rz__pjs { grid-column: 1 / -1; } }
@media (max-width: 47.99em) { .rz { grid-template-columns: 1fr; } }
.pack__txt .dom__h { margin: .5rem 0 0; }

/* ---------- Puces rondes de couleur ---------- */
.cond li::before, .rz__list li::before { width: .4rem; height: .4rem; border-radius: 50%; top: .6em; background: var(--terra); }
.bg-terra .cond li::before { background: #fff; }
.bg-deep .cond li::before, .rz__list li::before { background: var(--bronze-light); }
.duo ul, .about ul { list-style: none; padding-left: 0; }
.duo ul li { padding-left: 1.4rem; position: relative; }
.duo ul li::before { content: ""; position: absolute; left: 0; top: .8em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--terra); }
.bg-terra .duo ul li::before { background: #fff; }

/* ---------- Offres 02 et 03 en encadrés de couleur ---------- */
.duo2 { gap: 1.5rem; }
.duo2__item { padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.duo2__item .dom__h { color: inherit; opacity: .8; }
.bg-terra.duo2__item .offer__price { color: #fff !important; }
.bg-deep.duo2__item .offer__price { color: var(--bronze-light) !important; }
.bg-deep.duo2__item .dom__h { color: var(--bronze-light); opacity: 1; }
.bg-deep.duo2__item .lead { color: var(--on-deep); }

/* ---------- Ce que je réalise : texte et livrables seulement ---------- */
.rz { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.rz__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; align-content: start; }
@media (max-width: 47.99em) { .rz__list { grid-template-columns: 1fr; } }

/* Encart « Pourquoi une graphiste plutôt que l'IA ? » */
.ia { margin-top: 1.5rem; background: var(--abysse); color: var(--on-deep); padding: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 1.5rem clamp(2rem, 1.5rem + 3vw, 4rem); }
.ia__t { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.12; color: var(--bronze-light); }
.ia__lead { grid-column: 1; color: var(--on-deep-soft); font-size: 1rem; margin-top: -.5rem; }
.ia__list { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.ia__list li { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.2rem; position: relative; }
.ia__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--bronze-light); }
.ia__list strong { font-weight: 600; color: var(--on-deep); }
.ia__list span { font-size: .9375rem; line-height: 1.55; color: var(--on-deep-soft); }
@media (max-width: 63.99em) { .ia { grid-template-columns: 1fr; } .ia__lead, .ia__list { grid-column: 1; grid-row: auto; } }
@media (max-width: 47.99em) { .ia__list { grid-template-columns: 1fr; } }

/* Calendrier des temps forts (accueil et prestations) */
.calbox { margin-top: 1.5rem; padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 0 .5rem; }
.calbox__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: .75rem 3rem; margin-bottom: 1.5rem; }
.calbox__head .sub { margin: 0; max-width: 16em; }
.calbox__head .muted { max-width: 26em; font-size: .9375rem; }
.cal div { min-height: 6rem; }
.cal__o { font-family: var(--font-title); font-weight: 800; letter-spacing: -.01em; font-size: 1rem; }
.bg-deep .calbox .sub { color: #fff; }
.calbox + .ia { margin-top: 2rem; }

/* Pack sans bordure */
.pack__txt, .bg-deep .pack__txt { border: 0; }

/* Timeline + encart IA réunis dans un seul bloc bleu, séparés par un filet doré */
.deepbox { margin-top: 1.5rem; padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.deepbox .calbox { margin: 0; padding: 0; }
.deepbox .ia { margin: 0; padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; background: transparent; border-top: 1px solid var(--bronze); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.deepbox .calbox__head .muted { color: var(--on-deep-soft); }

/* Bloc timeline + IA sur terracotta */
.bg-terra .calbox .sub { color: #fff; }
.bg-terra .calbox__head .muted, .deepbox.bg-terra .calbox__head .muted { color: rgba(255, 255, 255, .85); }
.bg-terra .cal { border-top-color: #fff; }
.bg-terra .cal div { border-left-color: rgba(255, 255, 255, .3); }
.bg-terra .cal div:nth-child(4n + 1) { border-left-color: #fff; }
.bg-terra .cal div:last-child { border-right-color: rgba(255, 255, 255, .3); }
.bg-terra .cal__m { color: rgba(255, 255, 255, .75); }
.bg-terra .cal__o, .bg-terra .cal .is-off .cal__o { color: #fff; }
.bg-terra .cal .is-key .cal__o { color: var(--terra-pale); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
@media (max-width: 63.99em) { .bg-terra .cal div { border-bottom-color: rgba(255, 255, 255, .3); } .bg-terra .cal div:nth-child(4n) { border-right-color: rgba(255, 255, 255, .3); } }
.deepbox.bg-terra .ia { border-top-color: var(--terra-pale); }
.bg-terra .ia__t { color: #fff; }
.bg-terra .ia__lead, .bg-terra .ia__list span { color: rgba(255, 255, 255, .85); }
.bg-terra .ia__list strong { color: #fff; }
.bg-terra .ia__list li::before { background: #fff; }
.section__in > .calbox { margin: 0; padding: 0; }
.deepbox > .ia:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

/* Timeline animée */
.cal { position: relative; }
.cal::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--bronze-light); transform-origin: left; transform: scaleX(1); }
.cal.is-anim::before { transform: scaleX(0); transition: transform 1.2s var(--ease); }
.cal.is-anim.is-in::before { transform: scaleX(1); }
.cal.is-anim > div { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease), background-color .4s; }
.cal.is-anim.is-in > div { opacity: 1; transform: none; }
.cal > div { position: relative; }
.cal > div:hover { background: rgba(255, 255, 255, .06); }
.cal .is-now { background: rgba(210, 180, 143, .14); }
.cal .is-now .cal__o { color: var(--bronze-light); }
.cal__now { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-light); }
.cal__now::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--bronze-light); box-shadow: 0 0 0 0 rgba(210, 180, 143, .6); animation: calPulse 2s ease-out infinite; }
@keyframes calPulse { 0% { box-shadow: 0 0 0 0 rgba(210, 180, 143, .6); } 70% { box-shadow: 0 0 0 .55rem rgba(210, 180, 143, 0); } 100% { box-shadow: 0 0 0 0 rgba(210, 180, 143, 0); } }
@media (prefers-reduced-motion: reduce) { .cal__now::before { animation: none; } }
.cal div { min-height: 7rem; }

/* Pack sur fond blanc : bloc texte en beige */
.pack-sec .pack__txt { background: var(--warm); }

/* Timeline sur beige */
.bg-warm .cal::before { background: var(--bronze); }
.bg-warm .cal .is-now { background: rgba(173, 142, 111, .16); }
.bg-warm .cal .is-now .cal__o, .bg-warm .cal__now { color: var(--bronze-ink); }
.bg-warm .cal__now::before { background: var(--bronze); }
.bg-warm .cal > div:hover { background: rgba(173, 142, 111, .1); }

/* Vague lumineuse qui parcourt les 12 mois en boucle (CSS seul) */
.cal > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(210, 180, 143, .22); opacity: 0; animation: calWave 7s ease-in-out infinite; }
.bg-warm .cal > div::after { background: rgba(173, 142, 111, .22); }
.cal > div:nth-child(1)::after { animation-delay: 0s; }
.cal > div:nth-child(2)::after { animation-delay: .25s; }
.cal > div:nth-child(3)::after { animation-delay: .5s; }
.cal > div:nth-child(4)::after { animation-delay: .75s; }
.cal > div:nth-child(5)::after { animation-delay: 1s; }
.cal > div:nth-child(6)::after { animation-delay: 1.25s; }
.cal > div:nth-child(7)::after { animation-delay: 1.5s; }
.cal > div:nth-child(8)::after { animation-delay: 1.75s; }
.cal > div:nth-child(9)::after { animation-delay: 2s; }
.cal > div:nth-child(10)::after { animation-delay: 2.25s; }
.cal > div:nth-child(11)::after { animation-delay: 2.5s; }
.cal > div:nth-child(12)::after { animation-delay: 2.75s; }
@keyframes calWave { 0% { opacity: 0; } 6% { opacity: 1; } 16% { opacity: 0; } 100% { opacity: 0; } }
.cal__o { transition: transform .3s var(--ease); }
.cal > div:hover .cal__o { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cal > div::after { animation: none; } }

/* Le nom de l'opération passe en terracotta au passage de la vague */
.cal__o { animation: calWord 7s ease-in-out infinite; }
@keyframes calWord { 0%, 16%, 100% { color: inherit; } 6% { color: var(--terra); } }
.bg-deep .cal__o { animation-name: calWordDeep; }
@keyframes calWordDeep { 0%, 16%, 100% { color: var(--bronze-light); } 6% { color: #fff; } }
.bg-warm .cal > div::after { background: rgba(184, 110, 77, .12); }
.cal > div:nth-child(1) .cal__o { animation-delay: 0.00s; }
.cal > div:nth-child(2) .cal__o { animation-delay: 0.25s; }
.cal > div:nth-child(3) .cal__o { animation-delay: 0.50s; }
.cal > div:nth-child(4) .cal__o { animation-delay: 0.75s; }
.cal > div:nth-child(5) .cal__o { animation-delay: 1.00s; }
.cal > div:nth-child(6) .cal__o { animation-delay: 1.25s; }
.cal > div:nth-child(7) .cal__o { animation-delay: 1.50s; }
.cal > div:nth-child(8) .cal__o { animation-delay: 1.75s; }
.cal > div:nth-child(9) .cal__o { animation-delay: 2.00s; }
.cal > div:nth-child(10) .cal__o { animation-delay: 2.25s; }
.cal > div:nth-child(11) .cal__o { animation-delay: 2.50s; }
.cal > div:nth-child(12) .cal__o { animation-delay: 2.75s; }
@media (prefers-reduced-motion: reduce) { .cal__o { animation: none; } }

/* Timeline sur fond blanc (Prestations) */
.cal-sec .cal::before { background: var(--bronze); }
.cal-sec .cal .is-now { background: rgba(173, 142, 111, .14); }
.cal-sec .cal .is-now .cal__o, .cal-sec .cal__now { color: var(--bronze-ink); }
.cal-sec .cal__now::before { background: var(--bronze); }
.cal-sec .cal > div:hover { background: rgba(173, 142, 111, .08); }
.cal-sec .cal > div::after { background: rgba(184, 110, 77, .1); }

/* Timeline sur terracotta */
.bg-terra .calbox .sub { color: #fff; }
.bg-terra .calbox__head .muted { color: rgba(255, 255, 255, .85); }
.bg-terra .cal::before { background: #fff; }
.bg-terra .cal .is-now { background: rgba(255, 255, 255, .16); }
.bg-terra .cal .is-now .cal__o, .bg-terra .cal__now { color: #fff; }
.bg-terra .cal__now::before { background: #fff; animation-name: calPulseLight; }
@keyframes calPulseLight { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 70% { box-shadow: 0 0 0 .55rem rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.bg-terra .cal > div:hover { background: rgba(255, 255, 255, .1); }
.bg-terra .cal > div::after { background: rgba(255, 255, 255, .22); }
.bg-terra .cal__o { animation-name: calWordTerra; }
@keyframes calWordTerra { 0%, 16%, 100% { color: #fff; transform: none; } 6% { color: #fff; transform: translateY(-4px); } }
.bg-terra .cal > div::after { background: rgba(255, 255, 255, .28); }

/* Accueil : respiration entre le Pack, la timeline et les deux encadrés */
.pack + .calbox { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); padding-top: 0; }
.calbox + .offers--two { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }

/* ---------- Réalisations ---------- */
.pf-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.pf-f { font: inherit; font-size: .875rem; letter-spacing: .02em; padding: .7rem 1.1rem; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.pf-f sup { font-size: .7em; color: var(--bronze-ink); margin-left: .15rem; }
.pf-f:hover { border-color: var(--terra); }
.pf-f[aria-pressed="true"] { background: var(--terra); border-color: var(--terra); color: #fff; }
.pf-f[aria-pressed="true"] sup { color: var(--terra-pale); }
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 1.5rem + 2vw, 3rem) 1.5rem; }
.pf-card a { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; }
.pf-card__img { overflow: hidden; background: var(--mist); }
.pf-card__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); }
.pf-card a:hover img { transform: scale(1.035); }
.pf-card__meta { display: flex; align-items: baseline; gap: .75rem; }
.pf-card__n { font-family: var(--font-title); font-style: italic; color: var(--bronze-ink); font-size: 1rem; }
.pf-card__name { font-size: .9375rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.pf-card__type { font-size: .9375rem; color: var(--ink-soft); }
.pf-card { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.pf-card.is-out { opacity: 0; transform: translateY(10px); }
@media (max-width: 63.99em) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30em) { .pf-grid { grid-template-columns: 1fr; } }

/* ---------- À propos ---------- */
.ab-hero { min-height: 0; }
.ab-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem clamp(2.5rem, 2rem + 4vw, 6rem); align-items: center; padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.ab-hero__txt { display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.ab-hero .hero__t { max-width: none; }
.ab-hero__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.facts { list-style: none; margin: .5rem 0 .75rem; padding: 0; width: 100%; border-top: 1px solid var(--line-strong); }
.facts li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line-strong); font-size: .9375rem; }
.facts span { color: var(--bronze-ink); }
.facts strong { font-weight: 500; }
@media (max-width: 47.99em) { .ab-hero__in { grid-template-columns: 1fr; } .ab-hero__img { max-width: 26rem; } }
.tl { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--bronze); }
.tl li { position: relative; padding: 0 0 2.5rem 2rem; display: flex; flex-direction: column; gap: .4rem; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ""; position: absolute; left: -.35rem; top: .35rem; width: .7rem; height: .7rem; border-radius: 50%; background: var(--terra); }
.tl__when { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }
.tl h3 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.15; }
.tl p { color: var(--ink-soft); max-width: 40em; }
.learn { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); }
.learn li { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--bronze); }
.learn__n { font-family: var(--font-title); font-style: italic; font-size: 2rem; line-height: 1; color: var(--bronze-light); }
.learn h3 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.learn p { color: var(--on-deep-soft); }
@media (max-width: 63.99em) { .learn { grid-template-columns: 1fr; } }
.prat { display: flex; flex-direction: column; gap: 1.1rem; }
.prat .dom__h { margin-top: 1rem; }

/* ---------- Contact ---------- */
.ct__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.5rem; align-items: stretch; }
.ct__info { padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); display: flex; flex-direction: column; gap: 1.25rem; }
.ct__t { color: var(--bronze-light); font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem) !important; }
.ct__info > p { color: var(--on-deep-soft); }
.ct__block { display: flex; flex-direction: column; gap: .35rem; }
.ct__info .dom__h { color: var(--bronze-light); margin: 0; }
.ct__mail { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); letter-spacing: -.02em; color: #fff; text-decoration: none; word-break: break-word; }
.ct__mail:hover { color: var(--bronze-light); }
.ct__info .link { color: var(--bronze-light); }
.ct__dl { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid rgba(244, 238, 231, .2); display: flex; flex-direction: column; gap: .6rem; font-size: .9375rem; }
.ct__dl div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; }
.ct__dl dt { color: var(--bronze-light); }
.ct__dl dd { margin: 0; color: var(--on-deep); }
.ct__dl a { color: var(--on-deep); }
.ct__form { background: var(--paper); padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .45rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: .875rem; font-weight: 500; }
.field legend { margin-bottom: .6rem; padding: 0; }
.opt { color: var(--ink-soft); font-weight: 400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 0; padding: .8rem .9rem; width: 100%; transition: border-color .2s; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--terra); box-shadow: 0 0 0 3px rgba(184, 110, 77, .15); }
.field [aria-invalid="true"] { border-color: #B3261E; }
.field__hint { font-size: .8125rem; color: var(--ink-soft); }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span { display: inline-block; padding: .6rem 1rem; border: 1px solid var(--line-strong); font-size: .875rem; transition: background .2s, color .2s, border-color .2s; }
.choice input:checked + span { background: var(--terra); border-color: var(--terra); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--terra); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form__legal { font-size: .8125rem; color: var(--ink-soft); }
.form__submit { align-self: flex-start; cursor: pointer; font: inherit; font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.form__submit:disabled { opacity: .6; cursor: default; }
.form__status { font-size: .9375rem; padding: .8rem 1rem; background: rgba(173, 142, 111, .14); }
.form__status.is-error { background: rgba(179, 38, 30, .08); color: #8C1D18; }
@media (max-width: 63.99em) { .ct__in { grid-template-columns: 1fr; } }
@media (max-width: 30em) { .form__row { grid-template-columns: 1fr; } }

/* ---------- Fiches projet ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .8125rem; color: var(--ink-soft); margin-bottom: 2rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--terra); }
.crumb [aria-current] { color: var(--ink); }
.pjh { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.pjh .kicker { margin-bottom: .75rem; }
.pjh__t { font-family: var(--font-title); font-weight: 800; letter-spacing: -.03em; font-size: clamp(2.75rem, 1.5rem + 4.5vw, 5rem); line-height: 1.02; }
.pjh__lead { margin-top: 1.1rem; max-width: 38em; color: var(--ink-soft); }
.pjh__meta { margin: clamp(2rem, 1.5rem + 2vw, 3rem) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.pjh__meta div { padding: 1rem 1.5rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.pjh__meta dt { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }
.pjh__meta dd { margin: 0; font-size: .9375rem; }
@media (max-width: 47.99em) { .pjh__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; } }
.pjbody { display: flex; flex-direction: column; gap: clamp(2.5rem, 2rem + 3vw, 5rem); padding-bottom: clamp(4rem, 3rem + 4vw, 7rem); }
.pjg { display: grid; gap: 1.5rem; align-items: start; }
.pjg figure { margin: 0; background: var(--mist); }
.pjg img { width: 100%; height: auto; }
.pjg--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 47.99em) { .pjg--2, .pjg--3 { grid-template-columns: 1fr; } }
.pjt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem clamp(2.5rem, 2rem + 4vw, 6rem); }
.pjt__h { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.1; display: flex; flex-direction: column; gap: .5rem; }
.pjt__n { font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--bronze-ink); }
.pjt__body { display: flex; flex-direction: column; gap: 1rem; font-size: 1.0625rem; max-width: 40em; }
@media (max-width: 47.99em) { .pjt { grid-template-columns: 1fr; } }
.pjn__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem 2.5rem; align-items: center; }
.pjn__a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1.25rem; align-items: center; text-decoration: none; }
.pjn__img { grid-row: 1 / span 2; overflow: hidden; background: var(--mist); }
.pjn__img img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .6s var(--ease); }
.pjn__a:hover img { transform: scale(1.05); }
.pjn__lab { font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); align-self: end; }
.pjn__t { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: 1.375rem; align-self: start; }
.pjn__next { grid-template-columns: minmax(0, 1fr) 7rem; text-align: right; }
.pjn__next .pjn__img { grid-column: 2; grid-row: 1 / span 2; }
.pjn__next .pjn__lab, .pjn__next .pjn__t { grid-column: 1; }
.pjn__all { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--terra); text-underline-offset: .4em; }
@media (max-width: 47.99em) { .pjn__in { grid-template-columns: 1fr; } .pjn__all { order: 3; } }
.pjg--1 { grid-template-columns: minmax(0, 1fr); }
.pjbody > .wrap { width: 100%; }

/* ---------- Pages Expertises ---------- */
.ex__t { font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem) !important; }
.ab-hero__img { display: block; }
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.why li { background: var(--paper); padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); display: flex; flex-direction: column; gap: .75rem; }
.why h3 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.15; }
.why p { color: var(--ink-soft); }
@media (max-width: 63.99em) { .why { grid-template-columns: 1fr; } }
.ex__list li { font-size: 1.0625rem; }
.pjs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-deep .pj__name { color: #fff; }
.bg-deep .pj__type { color: var(--on-deep-soft); }
.bg-deep .hz__top .link { color: var(--bronze-light); }
@media (max-width: 63.99em) { .pjs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.see { margin-top: 2rem; }
.see ul { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.see a { color: var(--terra); text-underline-offset: .3em; }

/* ---------- Pages légales et plan du site ---------- */
.legal-h { padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem); }
.prose { max-width: 48rem; display: flex; flex-direction: column; gap: 1rem; }
.prose h2 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem); line-height: 1.2; margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li, .prose dd { color: var(--ink-soft); }
.prose a { color: var(--terra); text-underline-offset: .3em; }
.prose dl { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-strong); margin: 0; }
.prose dt, .prose dd { padding: .75rem 0; border-bottom: 1px solid var(--line-strong); margin: 0; }
.prose dt { font-weight: 500; color: var(--ink); }
@media (max-width: 30em) { .prose dl { grid-template-columns: 1fr; } .prose dt { border-bottom: 0; padding-bottom: 0; } }
.plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.plan h2 { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: 1.75rem; margin-bottom: 1rem; }
.plan h2 a { color: inherit; text-decoration: none; }
.plan ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.plan li a { display: block; padding: .7rem 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; }
.plan li a:hover { color: var(--terra); }
.prose .plan { max-width: none; }
@media (max-width: 47.99em) { .plan { grid-template-columns: 1fr; } }

/* Pictos réseaux sociaux */
.social { display: inline-flex; align-items: center; gap: .6rem; margin-top: .35rem; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid rgba(244, 238, 231, .25); border-radius: 50%; color: var(--on-deep); transition: background .25s, color .25s, border-color .25s; }
.social a:hover { background: var(--bronze); border-color: var(--bronze); color: #fff; }
.social svg { width: 1.05rem; height: 1.05rem; }
.social--lg a { width: 2.75rem; height: 2.75rem; }
.social--lg svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Menu : mise en forme du site actuel ---------- */
.hd__nav, .hd__end { gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.hd__nav a, .hd__end a:not(.hd__cta) { display: inline-block; padding-block: .5rem; font-size: .7rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: #3A2F28; text-decoration: none; background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .3s var(--ease); }
.hd__nav a:hover, .hd__end a:not(.hd__cta):hover { color: #3A2F28; background-size: 100% 1px; }
.hd a[aria-current="page"]:not(.hd__cta) { color: #3A2F28; background-image: linear-gradient(var(--terra), var(--terra)); background-size: 100% 1px; }
.hd__cta, .hd__cta:hover { display: inline-flex; align-items: center; min-height: 38px; padding: .6rem 1.2rem; border-radius: 999px; background: var(--terra); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transition: background-color .25s; }
.hd__cta:hover { background: var(--terra-hover); }

/* ---------- Bouton principal du hero en terracotta ---------- */
.hero .btn:not(.btn--ghost) { background: var(--terra); border-color: var(--terra); color: #fff; }
.hero .btn:not(.btn--ghost):hover { background: var(--terra-hover); border-color: var(--terra-hover); color: #fff; }
@media (max-width: 63.99em) { .hd__nav, .hd__end a:not(.hd__cta) { display: none; } }

/* Prestations : accès direct aux trois offres sous le hero */
.pick { list-style: none; margin: 1rem 0 0; padding: 0; width: 100%; max-width: 62rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.pick a { position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1.4rem 1.5rem 1.25rem; background: rgba(255, 255, 255, .92); border: 1px solid var(--line-strong); text-decoration: none; transition: border-color .25s, transform .25s var(--ease), box-shadow .25s; }
.pick a:hover { border-color: var(--terra); transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(31, 25, 21, .35); color: var(--ink); }
.pick__n { font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-ink); }
.pick__t { font-family: var(--font-title); font-weight: 800; letter-spacing: -.02em; font-size: 1.375rem; line-height: 1.15; }
.pick__d { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.pick__p { margin-top: auto; padding-top: .6rem; font-family: var(--font-title); font-style: italic; color: var(--terra); }
.pick svg { position: absolute; right: 1.25rem; bottom: 1.25rem; color: var(--terra); transition: transform .3s var(--ease); }
.pick a:hover svg { transform: translateY(3px); }
@media (max-width: 47.99em) { .pick { grid-template-columns: 1fr; } }

/* Encadrés d'offres : sans bordure, fond beige, passage au terracotta au survol */
.pick a { border: 0; background: var(--warm); box-shadow: 0 1px 2px rgba(31, 25, 21, .04), 0 12px 28px -18px rgba(31, 25, 21, .28); transition: background-color .3s, transform .3s var(--ease), box-shadow .3s; }
.pick a:hover { background: var(--terra); transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(184, 110, 77, .55); }
.pick a:hover .pick__n, .pick a:hover .pick__t, .pick a:hover .pick__d, .pick a:hover .pick__p, .pick a:hover svg { color: #fff; }
.pick__n, .pick__t, .pick__d, .pick__p, .pick svg { transition: color .3s; }

/* =========================================================
   Finitions : animations légères et ornements (CSS seul + 1 Ko de JS)
   Tout reste visible sans JavaScript ; rien ne bouge si l'utilisateur
   a demandé moins d'animations.
   ========================================================= */
::selection { background: var(--terra-pale); color: var(--ink); }

/* 1. Apparition au défilement : fondu + légère montée, en cascade */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
  .rv.is-in { opacity: 1; transform: none; }
  /* images : rideau qui s'ouvre de bas en haut, comme une feuille qui sort de presse */
  .rv--img { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); transition-delay: var(--d, 0s); }
  .rv--img:not(.is-in) img { transform: scale(1.12); }
  .rv--img.is-in { clip-path: inset(0 0 0 0); }
}

/* 2. Traits de coupe au survol des projets : la signature print du studio */
.pj__img, .hz__img, .pf-card__img { position: relative; }
.pj__img::after, .hz__img::after, .pf-card__img::after {
  content: ""; position: absolute; inset: 1.4rem; pointer-events: none; opacity: 0;
  --c: rgba(255, 255, 255, .95); --l: 1.1rem;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l);
  background-repeat: no-repeat; filter: drop-shadow(0 0 1px rgba(31, 25, 21, .35));
  transition: opacity .45s var(--ease), inset .55s var(--ease);
}
.pj:hover .pj__img::after, .hz__item:hover .hz__img::after, .pf-card a:hover .pf-card__img::after,
.pj:focus-visible .pj__img::after, .hz__item:focus-visible .hz__img::after, .pf-card a:focus-visible .pf-card__img::after { opacity: 1; inset: .9rem; }

/* 3. Filet bronze qui se trace devant les sur-titres de section */
.head > .kicker, .hero__eye { display: inline-flex; align-items: center; gap: .75rem; }
.head > .kicker::before, .hero__eye::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .hero__eye::before { animation: draw 1s var(--ease) .5s both; }
  .head.rv > .kicker::before { transform: scaleX(0); transition: transform .9s var(--ease) .35s; }
  .head.rv.is-in > .kicker::before { transform: scaleX(1); }
}
@keyframes draw { from { transform: scaleX(0); } }

/* 4. Micro-interactions : flèches qui avancent, soulignés qui se redessinent */
.btn svg, .link svg { transition: transform .35s var(--ease); }
.btn:hover svg, .link:hover svg { transform: translateX(4px); }
.link { text-decoration: none; padding-bottom: .3em; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .link:hover { animation: relink .7s var(--ease); }
}
@keyframes relink {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0 1px; background-position: 100% 100%; }
  46% { background-size: 0 1px; background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}

/* 5. En-tête : ombre douce dès qu'on défile */
.hd { transition: box-shadow .4s var(--ease); }
.hd.is-scrolled { box-shadow: 0 10px 30px -22px rgba(31, 25, 21, .45); }

/* 6. Parcours (À propos) : le fil se trace, les points s'allument */
@media (prefers-reduced-motion: no-preference) {
  .tl li.rv::before { transform: scale(0); transition: transform .6s var(--ease) calc(var(--d, 0s) + .25s); }
  .tl li.rv.is-in::before { transform: scale(1); }
}

/* Grands titres en blanc sur fond bleu */
.bg-deep .h2, .bg-deep .end__t, .bg-deep .sub, .bg-deep .rows__t { color: #fff; }
.bg-deep .pack__txt .h2 { color: var(--ink); }

/* Boutons arrondis, alignés sur la pastille Contact de l'en-tête */
.btn, .pf-f { border-radius: 999px; }
.hz__btn { border-radius: 50%; }

/* Étapes + engagements */
.steps__head { margin-top: clamp(3.5rem, 3rem + 2vw, 4.5rem); max-width: 40rem; }
.steps__head .sub { margin-bottom: .5rem; }
.steps__head + .steps { margin-top: 2rem; }
.steps__p { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }
.steps__p::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; }
.bg-deep .steps__p { color: var(--bronze-light); }
.bg-deep .steps__head .muted { color: var(--on-deep-soft); }

/* Kairos : vignette = brochure (paysage), recadrée sur la couverture */
.hz__img img[src$="kairos-04.jpg"], .pf-card__img img[src$="kairos-04.jpg"], .pj__img img[src$="kairos-04.jpg"],
.rz__pj img[src$="kairos-04.jpg"], .pjn__img img[src$="kairos-04.jpg"], .ab-hero__img img[src$="kairos-04.jpg"] { object-position: 28% 50%; }

/* Retour en haut : pastille ronde, anneau bronze qui suit la progression de lecture */
.totop { position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 40; width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); color: var(--ink); box-shadow: 0 10px 28px -14px rgba(31, 25, 21, .45); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background-color .3s, color .3s; }
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--terra); color: #fff; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke: var(--bronze); stroke-width: 1.5; stroke-dasharray: 141.4; stroke-dashoffset: calc(141.4 * (1 - var(--p, 0))); transition: stroke .3s; }
.totop:hover .totop__ring { stroke: rgba(255, 255, 255, .7); }
.totop__arr { transition: transform .35s var(--ease); }
.totop:hover .totop__arr { transform: translateY(-3px); }
@media print { .totop { display: none; } }

/* Hero accueil : halos de couleur + repères d'imprimeur en filigrane */
.hero__bg--halo {
  background:
    radial-gradient(ellipse 30% 32% at 88% 12%, rgba(246, 231, 222, .95), transparent 70%),
    radial-gradient(ellipse 32% 30% at 10% 90%, rgba(234, 221, 207, .8), transparent 70%),
    radial-gradient(ellipse 16% 18% at 95% 80%, rgba(234, 221, 207, .55), transparent 70%);
}
.hero__wm { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .hero__wm { animation: fade 2.4s ease .6s both; } }
@media (max-width: 47.99em) { .hero__wm { opacity: .6; } }
@media (max-width: 47.99em) { .hero__eye::before { display: none; } }
.hd__burger { border-radius: 50%; }


/* Grain de papier couché sur tous les fonds (bruit SVG en ligne, < 1 Ko, aucune image à charger).
   Les cartes et les images gardent un fond net. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .27 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
body, .hero, .section, .pjh, .legal-h, .pjbody, .ft, .ct, .ct__info { background-image: var(--grain); background-size: 220px 220px; }
:root { --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .97 0 0 0 0 .93 .3 0 0 0 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Fonds colorés : grain clair + grain foncé, pour que le papier se sente aussi sur le terracotta, le bleu et l'espresso */
.bg-deep, .bg-terra, .ft { background-image: var(--grain-light), var(--grain); background-size: 220px 220px, 220px 220px; background-position: 0 0, 110px 70px; background-blend-mode: normal; }
.choice span { border-radius: 999px; padding-inline: 1.15rem; }

/* =========================================================
   Direction artistique : cartels, tirages, transitions
   ========================================================= */

/* Cartels de galerie sous les projets */
.cartel { display: block; margin-top: .15rem; padding-top: .55rem; border-top: 1px solid var(--line); font-family: var(--font-title); font-style: italic; font-size: .9375rem; color: var(--bronze-ink); }

/* Pages projets : les visuels posés comme des tirages sur le papier */
.pjg figure { background: #fff; padding: clamp(.5rem, .3rem + .8vw, 1rem); box-shadow: 0 1px 2px rgba(31, 25, 21, .06), 0 22px 44px -26px rgba(31, 25, 21, .38); }
.pjg figure img { display: block; }

/* Transitions douces entre les pages (navigateurs récents, sans script) */
@view-transition { navigation: auto; }
.hd { view-transition-name: entete; }
::view-transition-old(root) { animation: vt-out .35s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .55s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.section, .ab-hero { overflow: clip; }

/* Hero accueil : photo plein cadre (carte Amaïa sur papier), voile crème pour le texte, soie animée par-dessus */
.hero--photo { background-color: #efe6da; }
.hero__bg--photo { background: #efe6da url("../assets/images/site/hero-studio-amaia.webp") no-repeat 75% 50% / cover; }
.hero__bg--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 246, 240, .97) 0%, rgba(250, 246, 240, .9) 34%, rgba(250, 246, 240, .25) 62%, rgba(250, 246, 240, 0) 80%); }
.hero__bg--photo .hero__silk { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 35%, #000 62%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.15) 35%, #000 62%); }
.hero--photo .hero__in { align-items: flex-start; text-align: left; }
.hero--photo .hero__in > * { max-width: 36rem; }
.hero--photo .btn-row { justify-content: flex-start; }
.hero--photo .hero__t { font-size: clamp(2.6rem, 1.6rem + 3.2vw, 4.4rem); }
.hero--photo .hero__logos { position: relative; background: rgba(250, 246, 240, .92); }

/* Épure : un seul bouton principal, terracotta partout (meilleur contraste que le doré avec du texte blanc) */
.btn:not(.btn--ghost), .bg-deep .btn:not(.btn--ghost), .bg-deep .pack__txt .btn { background: var(--terra); border-color: var(--terra); color: #fff; }
.btn:not(.btn--ghost):hover, .bg-deep .btn:not(.btn--ghost):hover, .bg-deep .pack__txt .btn:hover { background: var(--terra-hover); border-color: var(--terra-hover); color: #fff; }
.bg-terra .btn:not(.btn--ghost) { background: #fff; border-color: #fff; color: var(--terra); }
.bg-terra .btn:not(.btn--ghost):hover { background: var(--terra-pale); border-color: var(--terra-pale); color: var(--terra-hover); }

/* Mobile : pas de photo, fond blanc grainé et voile de soie bronze (comme la version d'origine) */
@media (max-width: 47.99em) {
  .hero--photo { background-color: var(--paper); }
  .hero__bg--photo { background: none; }
  .hero__bg--photo::before { display: none; }
  .hero__bg--photo .hero__silk { opacity: 1; -webkit-mask-image: radial-gradient(ellipse 38% 42% at 50% 46%, rgba(0,0,0,.08) 30%, #000 100%); mask-image: radial-gradient(ellipse 38% 42% at 50% 46%, rgba(0,0,0,.08) 30%, #000 100%); }
  .hero--photo .hero__in { align-items: center; text-align: center; }
  .hero--photo .btn-row { justify-content: center; }
  .hero--photo .hero__logos { background: transparent; }
}

/* Tous les boutons en terracotta quand le fond le permet */
.btn--ghost { color: var(--terra); border-color: var(--terra); background: transparent; }
.btn--ghost:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.bg-deep .btn--ghost { color: #fff; border-color: var(--terra); }
.bg-deep .btn--ghost:hover { background: var(--terra); border-color: var(--terra); color: #fff; }
.bg-terra .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .7); }
.bg-terra .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--terra); }
.hz__btn { border-color: var(--terra); color: var(--terra); }
.hz__btn:hover:not(:disabled) { background: var(--terra); border-color: var(--terra); color: #fff; }
.bg-deep .hz__btn { border-color: var(--terra); color: #fff; }

/* Hero accueil (ordinateur) : grain de papier aussi sur la photo */
.hero__bg--photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 220px 220px; mix-blend-mode: multiply; opacity: .9; }
@media (max-width: 47.99em) { .hero__bg--photo::after { display: none; } }

/* Hero accueil (ordinateur) : bandeau logos en pleine largeur, grainé comme le reste */
@media (min-width: 48em) {
  .hero--photo .hero__logos { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); background: var(--grain) 0 0 / 220px 220px, rgba(250, 246, 240, .9); }
}
.cartel__spec { display: block; }
.cartel__sect { display: block; margin-top: .2rem; font-family: var(--font-text); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
/* La soie ivoire passe au-dessus du grain, pour rester bien blanche sur la photo */
.hero__bg--photo::after { z-index: 1; }
.hero__bg--photo .hero__silk { z-index: 2; }
/* Pied de page : aplat espresso, sans texture papier */
.ft { background-image: none; }
/* Sur-titres en capitales : sans filet devant */
.head > .kicker::before, .hero__eye::before, .steps__p::before { content: none; display: none; }
.head > .kicker, .hero__eye, .steps__p { gap: 0; }