/* ═══════════════════════════════════════════════════════════════
   LE PARAPHE — feuille de style du site

   Direction : le geste et la règle.
   La règle : une grille stricte, des filets fins, une seule famille
   (Host Grotesk), l'encre bleu nuit de la marque sur un papier chaud.
   Le geste : la signature de l'agence, dans son dégradé d'origine
   (cyan, bleu, marine). Elle n'apparaît que là où l'agence s'engage :
   le logo, le titre qu'elle signe, la mise en ligne, le pied de page.

   Sommaire : 1. Police · 2. Variables · 3. Base · 4. Typographie
   5. Mise en page · 6. Boutons et liens · 7. En-tête · 8. Ouverture
   9. Spécialité · 10. Réalisations · 11. Règlement · 12. Offre
   13. Méthode · 14. Questions · 15. Contact · 16. Pied de page
   18. Pages intérieures et légales · 19. Mouvement
   20. Impression
═══════════════════════════════════════════════════════════════ */

/* ── 1. Police (auto-hébergée, SIL OFL 1.1) ── */
@font-face { font-family: "Host Grotesk"; src: url("fonts/host-grotesk.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; unicode-range: U+0000-002C, U+002E-FFFF; }
/* Le trait d'union de Host Grotesk est presque aussi long qu'un tiret : on emprunte celui du système, court. */
@font-face { font-family: "Host Grotesk"; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"), local("ArialMT"), local("Roboto"), local("Segoe UI"); font-weight: 300 800; font-style: normal; unicode-range: U+002D; }
/* Repli métrique : limite le décalage au chargement de la police */
@font-face { font-family: "Grotesk Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 99%; ascent-override: 96%; descent-override: 26%; line-gap-override: 0%; }

/* ── 2. Variables ── */
:root {
    /* Papier */
    --bg: #FFFFFF;
    --bg-2: #F6F4EF;          /* vélin : sections alternées */
    --bg-3: #EDE9E1;
    /* Encre : le bleu nuit de la marque, pas un noir neutre */
    --ink: #0A1628;
    --ink-2: #3B4556;
    --ink-3: #5D6676;
    --line: #E4E0D7;
    --line-2: #CBC5B8;
    /* Marque : la signature */
    --cyan: #3BC4CF;
    --blue: #2779C4;
    --navy: #1A3F8B;
    --blue-ink: #1B5FAA;      /* bleu des liens et des coches, lisible sur papier */
    --signature: linear-gradient(100deg, #3BC4CF 0%, #2779C4 48%, #1A3F8B 100%);
    --signature-night: linear-gradient(100deg, #63DCE4 0%, #4FA3EA 52%, #A9C9F7 100%);
    /* Nuit */
    --night: #0A1628;
    --night-2: #10203A;
    --night-line: rgba(232, 238, 247, .14);
    --on-night: #F1F4F8;
    --on-night-2: #A3B0C3;
    --blue-night: #8CC4F2;
    --error: #B42318;
    --ok: #1E6B3A;

    --sans: "Host Grotesk", "Grotesk Fallback", Arial, sans-serif;

    --wrap: 1320px;
    --gutter: clamp(20px, 4.4vw, 56px);
    --header-h: 76px;
    --ease: cubic-bezier(.2, .7, .1, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --radius: 4px;
    interpolate-size: allow-keywords;
}

/* ── 3. Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.6 var(--sans); font-kerning: normal; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
strong, b { font-weight: 600; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.section--night :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .stage[data-tone="dark"] :focus-visible { outline-color: var(--blue-night); }
main:focus { outline: none; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: #fff; text-decoration: none; font-weight: 500; transition: top .2s; }
.skip:focus { top: 12px; }
.anchor { position: absolute; top: 0; }

/* ── 4. Typographie ── */
h1, h2, .h1, .h2, .h-xl, .h-lg { font-family: var(--sans); font-weight: 500; color: var(--ink); text-wrap: balance; }
h2, .h2 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1; letter-spacing: -.042em; }
h3 { font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); line-height: 1.2; letter-spacing: -.018em; text-wrap: balance; }
h1 em, h2 em, h3 em, .grad-text, .accent-serif { font-style: normal; color: inherit; }
p { text-wrap: pretty; }
.lead, .intro { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.32rem); line-height: 1.5; letter-spacing: -.01em; color: var(--ink-2); max-width: 36em; }
.label { font-size: .9375rem; line-height: 1.4; font-weight: 500; letter-spacing: -.005em; color: var(--ink); }
.num { font-variant-numeric: tabular-nums; }
.section--night h2, .section--night h3 { color: var(--on-night); }
.section--night .lead, .section--night .intro, .section--night p { color: var(--on-night-2); }
.section--night .label { color: var(--on-night); }

/* ── 5. Mise en page ── */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(5rem, 10vw, 9.5rem); }
.section--tint { background: var(--bg-2); }
.section--night { background: var(--night); color: var(--on-night); }
/* La marge : l'intitulé de la section dans la colonne de gauche, comme une mention en marge d'un acte */
.rail { display: grid; gap: 1.4rem; }
.rail__label { padding-top: .15rem; }
.rail__main > h2 { max-width: 17ch; }
.rail__main > .intro { margin-top: clamp(1.3rem, 2.4vw, 2rem); }
@media (min-width: 900px) {
    .rail { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 24px; }
    .rail__label { padding-top: .9rem; }
}

/* ── 6. Boutons et liens ── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 52px; padding: .8rem 1.45rem; border: 1px solid transparent; border-radius: var(--radius); font: 500 1rem/1.2 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn__arrow { display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--sm { min-height: 42px; padding: .55rem 1rem; font-size: .9375rem; }
.btn--block { display: flex; width: 100%; }
.btn--ink, .btn-primary { background: var(--ink); color: #fff; }
.btn--ink:hover, .btn-primary:hover { background: var(--navy); }
.btn--light { background: var(--on-night); color: var(--ink); }
.btn--light:hover { background: #fff; color: var(--navy); }
.btn--line, .btn-ghost { border-color: var(--line-2); background: transparent; color: var(--ink); }
.btn--line:hover, .btn-ghost:hover { border-color: var(--ink); }
.btn--lg { min-height: 56px; padding-inline: 1.7rem; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:disabled { opacity: .6; cursor: progress; }
.link-arrow { display: inline-flex; align-items: center; gap: .45rem; padding-block: .3rem; color: inherit; font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: color .25s, background-size .45s var(--ease-out); }
.link-arrow:hover { color: var(--blue-ink); background-size: 0% 1px; background-position: 100% 100%; }
.section--night .link-arrow:hover { color: var(--blue-night); }
.link-arrow--small { font-size: .9375rem; }
.link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.link:hover { color: var(--blue-ink); }
.faq a, .contact a, .lead a, .intro a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq a:hover, .contact a:hover, .intro a:hover { color: var(--blue-ink); }

/* ── 7. En-tête ── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(255, 255, 255, .8); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; gap: 2rem; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 1.1rem; color: var(--ink); text-decoration: none; flex: none; }
/* La signature, dans ses couleurs d'origine : le dégradé découpé par le tracé du logo */
.brand__svg { display: block; width: 132px; height: auto; aspect-ratio: 385 / 165; overflow: visible; }
.brand__tag { display: none; padding-left: 1.1rem; border-left: 1px solid var(--line-2); font-size: .8125rem; line-height: 1.25; font-weight: 500; color: var(--ink-3); max-width: 9.5em; }
.nav { margin-left: auto; }
.nav__list { display: none; gap: clamp(1.1rem, 2vw, 2rem); }
.nav__list a { position: relative; display: block; padding-block: .5rem; color: var(--ink-2); font-size: .9375rem; font-weight: 450; text-decoration: none; transition: color .2s; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .3rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.nav__list a:hover, .nav__list a[aria-current] { color: var(--ink); }
.nav__list a:hover::after, .nav__list a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
/* Prestations et guides : un panneau sous l'intitulé, au survol, au clic ou au clavier (sans JavaScript : survol et focus) */
.nav__list { align-items: center; }
.nav__drop { position: relative; }
.nav__btn { display: flex; align-items: center; gap: .45rem; padding: .5rem 0; border: 0; background: none; color: var(--ink-2); font: 450 .9375rem/1.6 var(--sans); cursor: pointer; transition: color .2s; }
.nav__btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease-out); }
.nav__drop:hover .nav__btn, .nav__drop:focus-within .nav__btn, .nav__drop.is-open .nav__btn, .nav__drop:has([aria-current]) .nav__btn { color: var(--ink); }
.nav__drop:hover .nav__btn::after, .nav__drop.is-open .nav__btn::after { transform: translateY(1px) rotate(225deg); }
.nav__panel { position: absolute; top: 100%; left: -1.2rem; z-index: 60; display: none; padding-top: .9rem; }
.nav__drop:hover .nav__panel, .nav__drop:focus-within .nav__panel, .nav__drop.is-open .nav__panel { display: block; }
.nav__drop.is-closed .nav__panel { display: none; }
.nav__panel ul { display: grid; width: max-content; max-width: 380px; padding: .5rem; border-radius: 8px; background: var(--bg); box-shadow: 0 0 0 1px var(--line), 0 28px 56px -28px rgba(10, 22, 40, .38); }
.nav__list .nav__panel a { display: grid; gap: .15rem; padding: .7rem .85rem; border-radius: 6px; color: var(--ink); transition: background-color .2s; }
.nav__list .nav__panel a::after { display: none; }
.nav__panel a:hover, .nav__panel a[aria-current] { background: var(--bg-2); }
.nav__panel strong { font-size: .9375rem; font-weight: 500; letter-spacing: -.01em; }
.nav__panel span { font-size: .84375rem; line-height: 1.4; color: var(--ink-3); }
.menu-mobile__h { margin: 1.6rem 0 .2rem; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.menu-mobile .menu-mobile__petit li a { padding: .75rem 0; font-size: 1.0625rem; letter-spacing: -.01em; }
.site-header__cta { display: none; }
.burger { display: inline-flex; align-items: center; gap: .65rem; margin-left: auto; min-height: 44px; padding: .4rem .2rem .4rem .6rem; border: 0; background: none; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.burger__lines { position: relative; width: 20px; height: 8px; border-block: 1.5px solid currentColor; transition: border-color .3s; }
.burger[aria-expanded="true"] .burger__lines { border-color: transparent; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; right: 0; top: 1.75px; height: 1.5px; background: currentColor; transform: scaleX(0); transition: transform .3s var(--ease); }
.burger[aria-expanded="true"] .burger__lines::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: rotate(-45deg); }
.menu-mobile { border-top: 1px solid var(--line); background: var(--bg); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; }
.menu-mobile nav { padding: .5rem var(--gutter) 2rem; }
.menu-mobile ul { margin-bottom: 1.6rem; }
.menu-mobile li a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: 1.6rem; font-weight: 500; letter-spacing: -.025em; text-decoration: none; }
.menu-mobile li a::after { content: "→"; font-size: 1rem; color: var(--ink-3); }
.menu-mobile__mail { margin-top: 1.2rem; text-align: center; font-size: .95rem; color: var(--ink-2); }
@media (min-width: 1100px) {
    .nav__list { display: flex; }
    .site-header__cta { display: inline-flex; }
    .burger, .menu-mobile { display: none !important; }
    .site-header__in { gap: 2.6rem; }
}
@media (min-width: 1280px) { .brand__tag { display: block; } }
/* Sans JavaScript : la navigation reste accessible sur petit écran */
@media (max-width: 1099px) {
    .no-js .burger { display: none; }
    .no-js .site-header { position: static; }
    .no-js .site-header__in { flex-wrap: wrap; height: auto; padding-block: .8rem; gap: .6rem 1.4rem; }
    .no-js .nav { margin-left: 0; width: 100%; }
    .no-js .nav__list { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
}
@media (max-width: 1099px) { :root { --header-h: 64px; } .brand__svg { width: 104px; } }

/* ── 8. Ouverture ── */
/* L'ouverture : le titre au bleu de la marque, le texte, trois repères ; les réalisations suivent sans rupture */
.hero { position: relative; padding-block: clamp(2.6rem, 7.5vh, 6rem) clamp(4rem, 8vw, 7rem); }
.hero__title { position: relative; font-size: clamp(3.3rem, .55rem + 9.2vw, 10rem); line-height: .9; letter-spacing: -.05em; font-weight: 600; color: var(--navy); }
/* Deux voix de la même famille : la première ligne légère, la spécialité appuyée */
.hero__title .ln--light { font-weight: 300; letter-spacing: -.055em; }
/* Le L léger laisse un grand blanc avant l’apostrophe : on la rapproche à l’œil */
.hero__title .apos { margin-left: -.08em; margin-right: -.02em; }
/* Chaque ligne du titre est découpée pour monter depuis sa propre ligne de base */
.hero__title .ln { display: block; overflow: hidden; padding-bottom: .2em; margin-bottom: -.2em; } /* assez de place sous la ligne pour le jambage du g */
.hero__title .ln > span { display: block; }
.hero__row { display: grid; gap: 2.4rem; margin-top: clamp(2.2rem, 4.2vw, 3.8rem); }
.hero__lead { font-size: clamp(1.14rem, 1.02rem + .45vw, 1.38rem); line-height: 1.48; letter-spacing: -.012em; color: var(--ink-2); max-width: 30em; }
.hero__lead a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--blue); transition: color .2s; }
.hero__lead a:hover { color: var(--blue-ink); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: 1.8rem; }
.hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--ink); }
.hero__facts li { display: grid; align-content: start; gap: .15rem; font-size: .9375rem; line-height: 1.4; color: var(--ink-3); }
.hero__facts strong { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.hero .hero__facts { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
.hero .hero__facts li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 560px) { .hero .hero__facts li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; column-gap: 1.2rem; } }
/* Les réalisations prennent la suite de l'ouverture, sur le même papier : un filet d'encre, pas une rupture */
.hero + .works { padding-top: 0; }
@media (min-width: 900px) {
    .hero__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(24px, 4vw, 64px); }
}


/* ── 9. Spécialité : la raison d'être, puis ce que nous prenons en charge ── */
.thesis { padding-block: clamp(5.5rem, 11vw, 10rem); }
.thesis__statement { max-width: 22ch; font-size: clamp(2.05rem, 1.05rem + 3.2vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 500; color: var(--on-night); text-wrap: balance; }
.thesis__statement span { color: var(--on-night-2); }
.thesis__body { display: grid; gap: 1.4rem; margin-top: clamp(2.6rem, 5vw, 4.4rem); }
.section--night .thesis__body p { max-width: 34em; font-size: clamp(1.06rem, 1rem + .25vw, 1.2rem); line-height: 1.55; color: var(--on-night-2); }
.section--night .thesis__body p strong { color: var(--on-night); font-weight: 500; }
@media (min-width: 900px) {
    .thesis__body { grid-template-columns: minmax(0, 3fr) minmax(0, 4.5fr) minmax(0, 4.5fr); column-gap: 24px; }
    .thesis__body > :first-child { grid-column: 2; }
}

.services { border-top: 1px solid var(--on-night); }
.services a, .services__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1.2rem; padding: 1.35rem 0; border-bottom: 1px solid var(--night-line); color: var(--on-night); text-decoration: none; transition: color .25s; }
.services__t { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.75rem); line-height: 1.15; font-weight: 500; letter-spacing: -.028em; }
.services__d { grid-column: 1; font-size: .96875rem; color: var(--on-night-2); }
.services__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.25rem; color: var(--on-night-2); transition: transform .45s var(--ease-out), color .25s; }
.services a:hover { color: var(--blue-night); }
.services a:hover .services__go { color: var(--blue-night); transform: translateX(6px); }
@media (min-width: 900px) {
    .services a, .services__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; align-items: baseline; column-gap: 24px; padding: 1.55rem 0; }
    .services__d { grid-column: 2; }
    .services__go { grid-column: 3; grid-row: 1; }
}

/* ── 10. Réalisations : la scène ──
   Chaque étude a sa couleur, tirée de sa propre identité ; la scène la prend
   quand l'étude est choisie. Au survol, l'écran fait défiler les trois premiers
   écrans du site, tels qu'un visiteur les voit. */
.works { padding-bottom: 0; }
.works__head { margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.works__note { margin-top: 1.4rem; font-size: .9375rem; color: var(--ink-3); }

.stage { --plate: #A8916A; --plate-ink: #16120A; --plate-ink-2: rgba(22, 18, 10, .82); --plate-line: rgba(22, 18, 10, .2);
    position: relative; background: var(--plate); color: var(--plate-ink); transition: background-color .8s var(--ease), color .8s var(--ease); }
.stage[data-active="bca"] { --plate: #A8916A; --plate-ink: #16120A; --plate-ink-2: rgba(22, 18, 10, .82); --plate-line: rgba(22, 18, 10, .24); }
.stage[data-active="azeroual"] { --plate: #0E1F44; --plate-ink: #F5F0E8; --plate-ink-2: rgba(245, 240, 232, .72); --plate-line: rgba(245, 240, 232, .2); }
.stage[data-active="baillet"] { --plate: #E8E2D6; --plate-ink: #1B2230; --plate-ink-2: rgba(27, 34, 48, .7); --plate-line: rgba(27, 34, 48, .18); }
.stage__in { display: grid; }
.stage :focus-visible { outline-color: currentColor; }

/* La liste des études */
.works__list { border-top: 1px solid currentColor; }
.work { border-bottom: 1px solid var(--plate-line); transition: border-color .8s var(--ease); }
.work__h { font-size: inherit; }
.work__btn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; width: 100%; padding: 1.2rem 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--plate-ink-2); transition: color .3s; }
.work__name { font-size: clamp(1.5rem, 1.12rem + 1.2vw, 2.15rem); line-height: 1.1; font-weight: 500; letter-spacing: -.032em; }
.work__city { font-size: .9375rem; }
.work__btn:hover, .work.is-active .work__btn, .no-js .work__btn { color: var(--plate-ink); }
.no-js .work__btn { cursor: default; }
.work__body { padding-bottom: 1.6rem; }
.work__body p { max-width: 32em; margin-bottom: 1rem; font-size: 1rem; color: var(--plate-ink); }
.work__soon { font-size: .9375rem; }
.work__body p.work__soon { color: var(--plate-ink-2); }
.work__body .link-arrow:hover { color: inherit; }

/* L'écran d'ordinateur et le téléphone */
.screen { position: relative; overflow: hidden; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(10, 22, 40, .1), 0 2px 6px rgba(10, 22, 40, .08), 0 50px 90px -40px rgba(10, 22, 40, .6); }
.screen__bar { display: flex; align-items: center; justify-content: center; height: 30px; padding-inline: 12px; background: #F3F2EF; border-bottom: 1px solid #E2E0DB; }
.screen__url { max-width: 60%; padding: .1rem .9rem; overflow: hidden; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #E2E0DB; font-size: .6875rem; line-height: 1.5; color: #5D6676; white-space: nowrap; text-overflow: ellipsis; }
.screen__page { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.screen__page img { width: 100%; height: auto; }
.phone { position: relative; overflow: hidden; padding: 5px; border-radius: 26px; background: #0D1015; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 40px 70px -30px rgba(10, 22, 40, .65); }
.phone picture { overflow: hidden; border-radius: 21px; aspect-ratio: 390 / 844; background: #fff; }
.phone img { width: 100%; height: auto; }

/* Sur téléphone : chaque étude ouverte montre son site sur sa couleur */
.work__plate { display: grid; place-items: center; margin-bottom: 1.4rem; padding: 2.2rem 0; background: var(--plate); border-radius: var(--radius); }
.work__plate .phone { width: min(62vw, 270px); }
.stage__view { display: none; }

@media (max-width: 999px) {
    /* La couleur vit dans la vignette de chaque étude ; la liste reste sur le papier */
    .stage { background: transparent; color: var(--ink); }
    .stage .wrap { padding-inline: var(--gutter); }
    .work[data-work="bca"] { --plate: #A8916A; }
    .work[data-work="azeroual"] { --plate: #0E1F44; }
    .work[data-work="baillet"] { --plate: #E8E2D6; }
    .work { --plate-ink: var(--ink); --plate-ink-2: var(--ink-3); --plate-line: var(--line); }
    .works__list { border-top-color: var(--ink); }
}

@media (min-width: 1000px) {
    .stage__in { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(28px, 4vw, 64px); min-height: clamp(600px, 50vw, 780px); }
    .stage__index { display: flex; flex-direction: column; justify-content: center; padding-block: clamp(2.6rem, 5vw, 4.5rem); }
    .work__plate { display: none; }
    .stage__view { position: relative; display: block; }
    .plate { position: absolute; inset: 0; }
    .plate .screen { position: absolute; top: 50%; right: 0; width: 94%; transform: translateY(-50%); }
    .plate .phone { position: absolute; left: -5%; bottom: 6%; width: 17%; }
    .stage__hint { position: absolute; right: 0; bottom: clamp(.9rem, 2vw, 1.4rem); font-size: .8125rem; color: var(--plate-ink-2); }
}
@media (min-width: 1000px) and (max-height: 760px) { .stage__in { min-height: 600px; } }
@media (min-width: 1000px) and (max-width: 1199px) { .plate .phone { left: 2%; width: 15%; } }
@media (max-width: 999px) { .stage { padding-bottom: clamp(4.5rem, 9vw, 6.5rem); } }
.stage__hint { display: none; }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) { .stage__hint { display: block; } }

.no-js .plate:not(:first-child) { display: none; }
.js .plate { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease), visibility 0s linear .7s; }
.js .plate.is-active { opacity: 1; visibility: visible; transition: opacity .7s var(--ease), visibility 0s; }

/* ── 11. Règlement : la feuille ── */
.sheet { position: relative; display: grid; gap: 2.8rem; margin-top: clamp(2.8rem, 5vw, 4.5rem); padding: clamp(1.6rem, 5vw, 4.4rem) clamp(1.3rem, 5vw, 4.4rem) clamp(2rem, 5vw, 3.6rem); background: var(--bg); border-radius: 2px; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(10, 22, 40, .04), 0 30px 60px -40px rgba(10, 22, 40, .28); }
.rules__h { margin-bottom: .2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--ink); font-size: 1rem; letter-spacing: -.01em; }
.rules li { display: grid; gap: .3rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.rules__txt { font-size: clamp(1.1rem, 1.02rem + .3vw, 1.28rem); line-height: 1.32; letter-spacing: -.015em; color: var(--ink); }
.rules__ref { font-size: .875rem; line-height: 1.45; color: var(--ink-3); }
/* Rayé nul : la rature est tracée à l'encre de la signature */
.rules s { text-decoration: none; color: var(--ink-3); background: linear-gradient(var(--blue), var(--blue)) 0 56% / 100% 1.5px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rules__col--yes .rules__txt { position: relative; padding-left: 1.6rem; }
.rules__col--yes .rules__txt::before { content: ""; position: absolute; left: .15rem; top: .34em; width: 10px; height: 5px; border-left: 1.75px solid var(--blue-ink); border-bottom: 1.75px solid var(--blue-ink); transform: rotate(-45deg); }
.sheet__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.rules__src { font-size: .875rem; color: var(--ink-3); max-width: 46em; }
/* Le paraphe au bas de la feuille : l'agence s'engage sur ce qu'elle vient d'écrire */
.sheet__paraphe { display: flex; align-items: center; gap: .9rem; font-size: .8125rem; color: var(--ink-3); }
.sheet__paraphe svg { width: 76px; height: auto; overflow: visible; }
@media (min-width: 760px) { .sheet { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 80px); } .sheet__foot { grid-column: 1 / -1; } }

/* ── 12. Offre : la plaque du prix, trois engagements, un tarif d'options ── */
.deal { display: grid; gap: clamp(2.4rem, 5vw, 4rem); margin-top: clamp(2.8rem, 5vw, 4.5rem); }
/* La plaque : l'encre de la marque, comme une plaque d'étude gravée */
.plaque { container-type: inline-size; position: relative; display: grid; align-content: start; gap: 1.4rem; padding: clamp(1.8rem, 4vw, 3.2rem); background: var(--night); color: var(--on-night); border-radius: 6px; }
.plaque__label { font-size: .9375rem; font-weight: 500; color: var(--on-night-2); }
.forfait__amount { display: flex; align-items: flex-start; gap: .7rem; font-size: clamp(4.6rem, 2.4rem + 6vw, 8.6rem); line-height: .8; font-weight: 300; letter-spacing: -.065em; color: var(--on-night); white-space: nowrap; font-variant-numeric: lining-nums; }
/* Le prix se règle sur la largeur de la plaque : il ne la déborde jamais */
@supports (font-size: 1cqi) { .forfait__amount { font-size: clamp(3.8rem, 26cqi, 8.6rem); } }
.forfait__unit { display: grid; gap: .3rem; padding-top: .15em; font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); line-height: 1.1; font-weight: 500; letter-spacing: -.01em; }
.forfait__unit span + span { color: var(--on-night-2); font-weight: 400; }
.forfait__once { font-size: clamp(1.1rem, 1.02rem + .35vw, 1.3rem); line-height: 1.4; letter-spacing: -.012em; color: var(--on-night); }
.forfait__terms li { padding: .7rem 0; border-bottom: 1px solid var(--night-line); font-size: .96875rem; color: var(--on-night-2); }
.forfait__terms li:first-child { border-top: 1px solid var(--night-line); }
.forfait__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: .4rem; }
.plaque .link-arrow:hover { color: var(--blue-night); }
.plaque :focus-visible { outline-color: var(--blue-night); }

.promises { display: grid; align-content: start; }
.promises li { display: grid; gap: .6rem; padding: clamp(1.4rem, 2.6vw, 2rem) 0; border-top: 1px solid var(--ink); }
.promises li + li { border-top-color: var(--line-2); }
.promises h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 500; }
.promises p { max-width: 36em; color: var(--ink-2); font-size: 1rem; }
@media (min-width: 1000px) { .deal { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 80px); align-items: start; } .plaque { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

.why { display: grid; gap: 1rem; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding-top: clamp(1.6rem, 3vw, 2.2rem); border-top: 1px solid var(--line-2); }
.why h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); letter-spacing: -.03em; }
.why p { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.45rem); line-height: 1.45; font-weight: 300; color: var(--ink); max-width: 32em; letter-spacing: -.015em; }
@media (min-width: 900px) { .why { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 24px; } }

/* Les options, comme un tarif : intitulé, prix, ce que c'est */
.opts { margin-top: clamp(3.5rem, 7vw, 5rem); }
.opts__h { margin-bottom: 1rem; font-size: 1rem; }
.opts__list { border-top: 1px solid var(--ink); }
.opts__list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.opts__list dt { font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.opts__list .opts__price { grid-column: 2; grid-row: 1; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opts__list dd:not(.opts__price) { grid-column: 1 / -1; font-size: .9375rem; color: var(--ink-3); }
.opts__note { margin-top: 1.2rem; font-size: .9375rem; color: var(--ink-3); }
@media (min-width: 900px) {
    .opts__list > div { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); column-gap: 24px; align-items: baseline; }
    .opts__list dd:not(.opts__price) { grid-column: 2; grid-row: 1; }
    .opts__list .opts__price { grid-column: 3; text-align: right; }
}

/* ── 13. Méthode : le calendrier des trois semaines ── */
.plan { margin-top: clamp(2.8rem, 5vw, 4.5rem); }
.plan__weeks { display: none; }
.plan__steps { border-top: 1px solid var(--ink); }
.plan__step { display: grid; gap: .5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.plan__when { font-size: .875rem; font-weight: 500; color: var(--blue-ink); }
.plan__step h3 { margin-bottom: .2rem; }
.plan__step p { color: var(--ink-2); font-size: 1rem; max-width: 34em; }
.plan__track { display: none; }
.plan__note { margin-top: 1.4rem; font-size: .9375rem; color: var(--ink-3); }
@media (min-width: 900px) {
    .plan__weeks, .plan__step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px; }
    .plan__weeks > span:first-child { grid-column: 2; }
    .plan__weeks { padding-bottom: .8rem; font-size: .875rem; color: var(--ink-3); }
    .plan__cols { display: grid; grid-template-columns: repeat(4, 1fr); grid-column: 2; }
    .plan__cols span { padding-left: .6rem; border-left: 1px solid var(--line); }
    .plan__step { padding: 1.7rem 0; align-items: center; }
    .plan__when { display: none; }
    .plan__track { position: relative; display: block; align-self: stretch; margin-block: -1.7rem; background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 25% 100% repeat-x; }
    .plan__bar { position: absolute; top: 50%; height: 10px; margin-top: -5px; border-radius: 99px; background: var(--ink); transform-origin: left center; }
    .plan__bar--q { left: 1.5%; width: 22%; background: var(--line-2); }
    .plan__bar--d { left: 26.5%; width: 47%; }
    .plan__bar--i { left: 51.5%; width: 47%; }
    /* La mise en ligne : le seul moment du calendrier à l'encre de la signature */
    .plan__bar--m { left: 88%; width: 10.5%; background: var(--signature); }
}

/* ── 14. Questions ── */
.faq__grid { display: grid; gap: 2.4rem; }
.faq__aside h2 { max-width: 10ch; }
.faq__more { margin-top: 1.4rem; color: var(--ink-3); }
@media (min-width: 1000px) {
    .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 24px; align-items: start; }
    .faq__aside { position: sticky; top: calc(var(--header-h) + 2.5rem); }
}
.faq__list { border-top: 1px solid var(--ink); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 1rem; padding: 1.35rem 0; cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 14px; height: 14px; justify-self: end; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .45s var(--ease-out); color: var(--ink-2); }
.qa[open] summary::after { transform: rotate(45deg); color: var(--blue-ink); }
.qa__q { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.3; font-weight: 500; letter-spacing: -.018em; transition: color .2s; }
.qa summary:hover .qa__q { color: var(--blue-ink); }
.qa__a { padding: 0 2.5rem 1.6rem 0; color: var(--ink-2); max-width: 46em; }
.qa::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
.qa[open]::details-content { block-size: auto; }

/* ── 15. Contact ── */
.contact__grid { display: grid; gap: 3rem; }
.contact__head .label { margin-bottom: 1.2rem; }
.contact__head h2 { max-width: 12ch; }
.contact__head .intro { margin-top: 1.4rem; }
.contact__facts { margin-top: 2.4rem; border-top: 1px solid var(--ink); }
.contact__grid > * { min-width: 0; }
.contact__facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.contact__facts dt { font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.contact__facts dd { color: var(--ink-2); font-size: .96875rem; overflow-wrap: anywhere; }
.contact__facts a { color: var(--ink); font-weight: 500; }
.form-card { background: var(--bg); border-radius: var(--radius); padding: clamp(1.4rem, 4vw, 3rem); box-shadow: 0 0 0 1px var(--line), 0 30px 60px -45px rgba(10, 22, 40, .35); }
.fields { display: grid; gap: 1.5rem 1.6rem; }
.field label { display: block; margin-bottom: .3rem; font-size: .875rem; font-weight: 500; color: var(--ink); }
.req { color: var(--blue-ink); }
.input { width: 100%; padding: .7rem .05rem; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; font: 400 1.0625rem/1.4 var(--sans); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: #8A909A; }
.input:hover { border-bottom-color: var(--ink-2); }
.input:focus { outline: none; border-bottom-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
.input:focus-visible { outline: none; }
textarea.input { resize: vertical; min-height: 7.5rem; }
.input[aria-invalid="true"] { border-bottom-color: var(--error); box-shadow: 0 1px 0 var(--error); }
.field__err { margin-top: .35rem; font-size: .84rem; color: var(--error); }
.form-note { margin-top: 1.2rem; font-size: .84rem; color: var(--ink-3); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: .8rem; align-items: start; margin-top: 1.2rem; font-size: .9375rem; color: var(--ink-2); }
.consent input { width: 18px; height: 18px; margin: .15rem 0 0; accent-color: var(--blue); }
.consent .field__err, .consent__more { grid-column: 2; margin-top: 0; }
.consent__more { font-size: .875rem; }
.hp { position: absolute; left: -9999px; top: -9999px; }
.form-card .btn { margin-top: 1.4rem; }
.form-foot { margin-top: .9rem; font-size: .84rem; color: var(--ink-3); text-align: center; }
.form-alert { margin-bottom: 1.4rem; padding: 1rem 1.1rem; border-left: 2px solid; font-size: .95rem; background: var(--bg-2); }
.form-alert--ok { border-color: var(--ok); color: var(--ok); }
.form-alert--err { border-color: var(--error); color: var(--error); }
.form-alert strong { display: block; margin-bottom: .2rem; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 5vw, 80px); } }

/* ── 16. Pied de page ── */
.site-footer { background: var(--night); color: var(--on-night-2); padding-block: clamp(4rem, 8vw, 6.5rem) 2rem; font-size: .9375rem; }
.site-footer a { color: var(--on-night); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--blue-night); }
.site-footer__sign { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem; padding-bottom: clamp(2.5rem, 5vw, 4rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--night-line); }
/* La signature, au bas de chaque page, dans le dégradé clair qui se lit sur la nuit */
.site-footer__sig { display: block; width: clamp(200px, 26vw, 320px); aspect-ratio: 385 / 165; background: var(--signature-night); -webkit-mask: url("le-paraphe-signature.svg") center / contain no-repeat; mask: url("le-paraphe-signature.svg") center / contain no-repeat; }
.site-footer__tag { font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.15; font-weight: 500; letter-spacing: -.03em; color: var(--on-night); max-width: 14em; }
.site-footer__tag span { display: block; color: var(--on-night-2); }
.site-footer__cols { display: grid; gap: 2.4rem; }
.site-footer__h { margin-bottom: 1rem; font-size: .875rem; font-weight: 500; color: var(--on-night-2); }
.site-footer__cols li + li { margin-top: .5rem; }
.site-footer__cities { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--night-line); }
.site-footer__cities ul { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.site-footer__cities a { color: var(--on-night-2); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--night-line); font-size: .875rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.site-footer .link { color: var(--on-night-2); text-decoration: none; }
.site-footer .link:hover { color: var(--blue-night); }
@media (min-width: 760px) { .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── 18. Pages intérieures (prestations, guides, villes, à propos) ──
   Ces pages gardent leur contenu et leur balisage ; elles reçoivent ici l'identité du site. */
.page-hero, .article-hero { position: relative; padding-block: clamp(2.4rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
.page-hero h1, .article-hero h1, .h-xl { font-size: clamp(2.5rem, 1.1rem + 4.6vw, 5.4rem); line-height: .98; letter-spacing: -.045em; max-width: 17ch; margin-bottom: 1.5rem; }
.article-hero h1 { max-width: 20ch; }
.page-hero .lede, .article-hero .lede { max-width: 40em; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem .55rem; margin-bottom: clamp(2rem, 5vw, 3.6rem); font-size: .875rem; color: var(--ink-3); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue-ink); text-decoration: underline; }
.breadcrumb > span:last-child { color: var(--ink); }
.eyebrow { display: block; margin-bottom: 1.1rem; font-size: .875rem; line-height: 1.4; font-weight: 500; color: var(--blue-ink); }
.eyebrow--light { color: var(--blue-night); }
.h-lg { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.038em; }
.h-md { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); line-height: 1.15; letter-spacing: -.025em; }
.lede { font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem); line-height: 1.52; letter-spacing: -.008em; color: var(--ink-2); max-width: 42em; }
.section--line { border-top: 1px solid var(--line); }
.section--tint.section--line { border-top: 0; }
.section-head { max-width: 52rem; margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem); }
.section-head .lede { margin-top: 1.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.wm, .page-hero__aurora, .page-hero__grid, .cta-band__aurora, .band__aurora, .band__grid { display: none !important; }
.wrap.reveal, .reveal, .reveal-stagger { opacity: 1; transform: none; }

/* Texte courant */
.prose { max-width: 44rem; }
.prose p, .article-body p { margin-bottom: 1.15rem; color: var(--ink-2); }
.prose strong, .article-body strong { color: var(--ink); font-weight: 600; }
.prose .lead-drop, .lead-drop { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); line-height: 1.45; letter-spacing: -.012em; color: var(--ink); }
.prose ul, .article-body ul, .article-body ol { margin: 0 0 1.3rem; padding-left: 1.3rem; list-style: none; }
.prose ul li, .article-body ul li { position: relative; margin-bottom: .45rem; color: var(--ink-2); }
.prose ul li::before, .article-body ul li::before { content: ""; position: absolute; left: -1.1rem; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
.article-body ol { counter-reset: n; padding-left: 0; }
.article-body ol > li { counter-increment: n; position: relative; padding-left: 2rem; margin-bottom: .6rem; color: var(--ink-2); }
.article-body ol > li::before { content: counter(n) "."; position: absolute; left: 0; top: 0; font-weight: 500; color: var(--blue-ink); }
.prose a, .article-body a, .faq-a a, .cap__desc a, .lede a, .answer-box a, .author-box a, td a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--blue); }
.prose a:hover, .article-body a:hover, .faq-a a:hover, .lede a:hover, .answer-box a:hover, td a:hover { color: var(--blue-ink); }
.article-wrap { padding-block: clamp(3rem, 6vw, 5rem); }
.article-wrap > *, .article-body { max-width: 44rem; margin-inline: auto; padding-inline: var(--gutter); box-sizing: content-box; }
.article-body h2 { margin: clamp(2.6rem, 5vw, 3.6rem) 0 1rem; font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.3rem); line-height: 1.08; letter-spacing: -.035em; scroll-margin-top: calc(var(--header-h) + 1rem); }
.article-body h3 { margin: 2rem 0 .7rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-3); }
.chip svg, .cap__ic, .cred svg, .author-box__ic, .compare__list svg, .feat-group svg, .price-why svg, .faq-chevron, .footer__badge svg, .pole__ic { display: none !important; }
.answer-box { position: relative; margin-bottom: 2.4rem; padding: 1.4rem 1.5rem; background: var(--bg-2); border-left: 2px solid var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
.answer-box__label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 500; color: var(--blue-ink); }
.answer-box p { margin: 0; color: var(--ink); }
.toc { margin-bottom: 2.8rem; border-top: 1px solid var(--ink); }
.toc__title { padding: 1rem 0 .6rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.toc ol { counter-reset: t; }
.toc li { counter-increment: t; border-bottom: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 2rem 1fr; padding: .75rem 0; text-decoration: none; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.012em; }
.toc a::before { content: counter(t) "."; font-weight: 400; color: var(--ink-3); }
.toc a:hover { color: var(--blue-ink); }
.author-box { display: grid; gap: .4rem; margin-block: 3rem; padding: 1.3rem 0; border-block: 1px solid var(--line); font-size: .96875rem; color: var(--ink-2); }
.author-box b { font-weight: 500; color: var(--ink); }
.article-faq { margin-top: 3rem; }
.callout { margin-block: 1.6rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--bg-2); color: var(--ink-2); }

/* Tableaux */
.data-table-wrap:focus-visible { outline-offset: 4px; }
.data-table-wrap { margin-block: 1.6rem 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.data-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9375rem; }
.data-table th { padding: .9rem .8rem .7rem 0; text-align: left; font-size: .875rem; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line-2); }
.data-table td { padding: .9rem .8rem .9rem 0; vertical-align: top; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.data-table td strong { color: var(--ink); font-weight: 500; }

/* Grilles d'arguments : des colonnes à filets, pas des cartes */
.bento { display: grid; gap: 0 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important; margin-top: 2.4rem; }
.cap { position: relative; padding: 1.4rem 0 1.8rem; border-top: 1px solid var(--line-2); }
.cap__num { display: block; margin-bottom: .6rem; font-size: .875rem; font-weight: 500; color: var(--blue-ink); }
.cap__price { display: block; margin-bottom: .5rem; font-size: 2.6rem; line-height: 1; font-weight: 300; letter-spacing: -.055em; color: var(--ink); }
.cap.is-featured { border-top: 2px solid var(--blue); }
.cap__title { font-size: 1.25rem; line-height: 1.22; font-weight: 500; letter-spacing: -.02em; margin-bottom: .5rem; }
.cap__desc { color: var(--ink-2); font-size: .96875rem; }
.cap ul { margin-top: 1rem; }
.cap ul li { position: relative; padding: .45rem 0 .45rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.cap ul li::before, .feat-group li::before, .price-why li::before { content: ""; position: absolute; left: .1rem; top: .92rem; width: 9px; height: 4.5px; border-left: 1.5px solid var(--blue-ink); border-bottom: 1.5px solid var(--blue-ink); transform: rotate(-45deg); }
.cap ul li svg { display: none; }
.cap .btn { margin-top: 1.4rem; }
.cap__meta { margin-bottom: .6rem; font-size: .875rem; color: var(--ink-3); }
.cred-list { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.cred { font-size: .875rem; color: var(--ink-2); padding-right: 1.2rem; margin-right: 1.2rem; border-right: 1px solid var(--line); }
.cred:last-child { border-right: 0; }

/* Comparaisons et pôles */
.compare { display: grid; gap: 2rem; margin-top: 2.4rem; }
.compare__label { display: block; padding-bottom: .8rem; margin-bottom: .2rem; border-bottom: 1px solid var(--ink); font-size: 1rem; font-weight: 500; color: var(--ink); }
.compare__list li { padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: .96875rem; }
.compare__col--against .compare__label { color: var(--ink-3); border-bottom-color: var(--line-2); }
.compare__col--against .compare__list li { color: var(--ink-3); }
.compare__col--for .compare__label { color: var(--blue-ink); border-bottom-color: var(--blue); }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.poles { display: grid; gap: 2.4rem; margin-top: 2.4rem; }
.pole { padding-top: 1.4rem; border-top: 1px solid var(--ink); }
.pole__kicker { display: block; margin-bottom: .6rem; font-size: .875rem; font-weight: 500; color: var(--blue-ink); }
.pole h3 { margin-bottom: .8rem; }
.pole p { color: var(--ink-2); margin-bottom: 1rem; }
.pole ul li { padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
@media (min-width: 760px) { .poles { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

/* Offre détaillée (page Tarifs) */
.offer { display: grid; margin-top: 2.6rem; background: var(--bg); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.offer__body { padding: clamp(1.5rem, 4vw, 2.6rem); }
.offer__tag, .price-eyebrow { display: block; margin-bottom: 1rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); }
.feat-groups { display: grid; gap: 1.8rem; margin-top: 1.6rem; }
.feat-group h4 { margin-bottom: .6rem; font-size: 1.0625rem; font-weight: 500; }
.feat-group li { position: relative; padding: .45rem 0 .45rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.feat-group b { font-weight: 500; color: var(--ink); }
.offer__price { display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.5rem, 4vw, 2.6rem); border-top: 1px solid var(--line); }
.price-amount { font-size: clamp(4.2rem, 3rem + 4vw, 6.4rem); line-height: .9; font-weight: 300; letter-spacing: -.065em; }
.price-cur { margin-left: .4rem; font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.price-sub { font-size: 1.125rem; line-height: 1.35; color: var(--blue-ink); }
.price-why { margin-block: .6rem 1rem; }
.price-why > span { display: block; padding-bottom: .5rem; font-size: .875rem; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.price-why li { position: relative; padding: .5rem 0 .5rem 1.4rem; border-bottom: 1px solid var(--line); font-size: .9375rem; color: var(--ink-2); }
.price-guarantee { font-size: .875rem; color: var(--ink-3); text-align: center; }
@media (min-width: 760px) { .feat-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .offer { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); } .offer__price { border-top: 0; border-left: 1px solid var(--line); justify-content: center; } }

/* Bandeau de fin de page */
.cta-band { position: relative; margin-top: clamp(3.5rem, 7vw, 5.5rem); padding: clamp(2.4rem, 6vw, 4.5rem); background: var(--night); color: var(--on-night); border-radius: var(--radius); }
.cta-band h2, .cta-band .h-lg { color: var(--on-night); max-width: 18ch; margin-bottom: 1rem; }
.cta-band p { color: var(--on-night-2); max-width: 40em; margin-bottom: 1.8rem; }
.cta-band strong { color: var(--on-night); font-weight: 500; }
.cta-band .eyebrow { color: var(--blue-night); }
.cta-band .btn-primary { background: var(--on-night); color: var(--ink); }
.cta-band .btn-primary:hover { background: #fff; color: var(--navy); }
.cta-band .btn-ghost { border-color: rgba(255, 255, 255, .3); color: var(--on-night); }
.cta-band .btn-ghost:hover { border-color: var(--on-night); }
.article-wrap .cta-band { margin-inline: auto; }

/* Questions fréquentes des pages intérieures (boutons accessibles) */
.faq-list { margin-top: 2.2rem; border-top: 1px solid var(--ink); max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 1rem; width: 100%; padding: 1.2rem 0; border: 0; background: none; text-align: left; cursor: pointer; }
.faq-q::after { content: ""; width: 14px; height: 14px; justify-self: end; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; color: var(--ink-2); transition: transform .45s var(--ease-out); }
.faq-item.open .faq-q::after { transform: rotate(45deg); color: var(--blue-ink); }
.faq-q__label { font-size: 1.125rem; line-height: 1.35; font-weight: 500; letter-spacing: -.015em; color: var(--ink); transition: color .2s; }
.faq-q__label .idx { margin-right: .8rem; font-weight: 400; color: var(--ink-3); }
.faq-q:hover .faq-q__label { color: var(--blue-ink); }
.faq-a__inner { padding: 0 0 1.4rem; color: var(--ink-2); max-width: 44em; }
.js .faq-item:not(.open) .faq-a { display: none; }
.city-links { display: flex; flex-wrap: wrap; gap: .4rem 0; margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.city-links li { padding-right: 1.2rem; margin-right: 1.2rem; border-right: 1px solid var(--line); }
.city-links li:last-child { border-right: 0; }
.city-links a { font-size: 1.0625rem; font-weight: 500; text-decoration: none; }
.city-links a:hover { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px; }
.more-link { margin-top: 1.8rem; }

/* ── 21. Compléments du 15 octobre : têtes de section, preuves, bleu de la marque ── */

/* Tête de section : un filet d'encre sur toute la largeur, l'intitulé dessous, comme l'en-tête d'une rubrique d'acte */
.rail--ruled { padding-top: clamp(1rem, 1.6vw, 1.3rem); border-top: 1px solid var(--ink); }
.rail--ruled .rail__label { padding-top: 0; }
.rail--ruled .rail__main > h2 { margin-top: clamp(.4rem, 2vw, 1.6rem); }
@media (min-width: 900px) { .rail--ruled .rail__main > h2 { margin-top: clamp(1.4rem, 3vw, 2.6rem); } }
.works__head.rail--ruled { margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }

/* Manifeste : la même famille, deux voix */
.thesis { padding-top: clamp(4rem, 8vw, 7rem); }
.thesis__statement { max-width: 20ch; font-size: clamp(2.2rem, 1rem + 3.9vw, 5rem); line-height: 1.02; letter-spacing: -.045em; font-weight: 300; }
.thesis__statement span { color: var(--on-night); font-weight: 600; }

/* Le bleu de la marque, en surface, une seule fois : le moment où l'on prend contact */
.section--blue { --blue-surface: #1A3F8B; background: var(--blue-surface); color: #fff; }
.section--blue h2, .section--blue .label { color: #fff; }
.section--blue .intro, .section--blue .contact__facts dd { color: #D3DEF2; }
.section--blue .contact__facts { border-top-color: #fff; }
.section--blue .contact__facts > div { border-bottom-color: rgba(255, 255, 255, .22); }
.section--blue .contact__facts dt { color: #C2D1EC; }
.section--blue .contact__facts a { color: #fff; }
.section--blue .contact__facts a:hover { color: #CFE6FF; }
.section--blue .form-card { box-shadow: 0 40px 80px -40px rgba(5, 12, 30, .6); }
.section--blue .contact__head :focus-visible { outline-color: #fff; }


/* ── 22. Pages de prestation et réalisations (20 octobre) ──
   Les composants de l'accueil, plus quatre pièces : les sites livrés sur le papier,
   l'extrait de fichier, la planche d'une réalisation. */
.insecable { white-space: nowrap; }
.page-hero h1 { max-width: 16ch; margin-bottom: 0; }
.page-hero .hero__row { margin-top: clamp(1.8rem, 3.4vw, 3rem); }
.section--night .rail--ruled { border-top-color: var(--on-night); }
.section--night .rail__main > .intro a { color: var(--on-night); }
.section > .wrap > .rail + * { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.section-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; margin-top: clamp(2.4rem, 4vw, 3.2rem); }
.services--static { margin-top: clamp(2.6rem, 5vw, 4.2rem); }
.services__note { margin-top: 1.2rem; font-size: .9375rem; }
.promises ul li { position: relative; padding: .4rem 0 .4rem 1.4rem; color: var(--ink-2); font-size: .96875rem; }
.promises ul li::before { content: ""; position: absolute; left: .1rem; top: .88rem; width: 9px; height: 4.5px; border-left: 1.5px solid var(--blue-ink); border-bottom: 1.5px solid var(--blue-ink); transform: rotate(-45deg); }

/* Les sites livrés, en vignettes sur le papier */
.cases { display: grid; gap: 2.2rem 24px; }
.case { display: grid; gap: .9rem; align-content: start; color: var(--ink); text-decoration: none; }
.case__screen { display: block; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -38px rgba(10, 22, 40, .5); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.case__screen img { width: 100%; height: auto; }
.case__cap { display: grid; gap: .15rem; font-size: .9375rem; color: var(--ink-3); }
.case__cap strong { font-size: 1.125rem; font-weight: 500; letter-spacing: -.015em; color: var(--ink); transition: color .25s; }
a.case:hover .case__screen { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -36px rgba(10, 22, 40, .6); }
a.case:hover .case__cap strong { color: var(--blue-ink); }
a.case:focus-visible { outline-offset: 6px; }
.case__desc { margin-top: .5rem; max-width: 30em; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 760px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* L'extrait de fichier : ce que livre le site, tel que le lit un moteur */
.doc { display: grid; gap: 1rem; }
.doc__frame { overflow: hidden; border-radius: 6px; background: var(--night); color: var(--on-night); box-shadow: 0 50px 90px -50px rgba(10, 22, 40, .7); }
.doc__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .75rem 1.2rem; border-bottom: 1px solid var(--night-line); font-size: .8125rem; color: var(--on-night-2); }
.doc pre { margin: 0; padding: clamp(1.1rem, 3vw, 1.9rem) clamp(1.1rem, 3vw, 2rem); overflow-x: auto; font: 400 .84375rem/1.75 ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; tab-size: 2; }
.doc pre:focus-visible { outline-color: var(--blue-night); outline-offset: -4px; }
.doc .k { color: var(--blue-night); }
.doc .c { color: var(--on-night-2); }
.doc figcaption { max-width: 46em; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.doc figcaption strong { font-weight: 500; color: var(--ink); }

/* La planche d'une réalisation : le site sur la couleur de l'étude */
.showcase { --plate: #A8916A; --plate-ink: #16120A; background: var(--plate); color: var(--plate-ink); padding-block: clamp(3rem, 7vw, 6.5rem); }
.showcase[data-client="azeroual"] { --plate: #0E1F44; --plate-ink: #F5F0E8; }
.showcase[data-client="baillet"] { --plate: #E8E2D6; --plate-ink: #1B2230; }
.showcase__in { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: end; }
.showcase__page { aspect-ratio: 16 / 17; overflow: hidden; }
.showcase__page img { width: 100%; height: auto; }
.showcase__phone { justify-self: center; width: min(62vw, 280px); }
.showcase__cap { grid-column: 1 / -1; max-width: 52em; font-size: .875rem; line-height: 1.5; opacity: .82; }
.showcase :focus-visible { outline-color: currentColor; }
@media (min-width: 900px) {
    .showcase__in { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: clamp(28px, 4vw, 64px); }
    .showcase__phone { width: 100%; margin-bottom: clamp(1.5rem, 4vw, 4rem); }
}
.why a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--blue); }
.why a:hover { color: var(--blue-ink); }

/* Une réalisation mise en avant dans une page ville */
.teaser { display: grid; gap: 1.6rem 24px; align-items: center; }
.teaser__txt { display: grid; gap: 1rem; align-content: start; }
.teaser__txt h3 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.9rem); line-height: 1.12; letter-spacing: -.03em; }
.teaser__txt p { max-width: 34em; color: var(--ink-2); }
@media (min-width: 900px) { .teaser { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 4vw, 64px); } }
.work__body p.work__more { margin: .2rem 0 0; }
.cases__lead { margin-bottom: 1.6rem; max-width: 46em; color: var(--ink-2); }

/* L'acte qui devient le site : dans l'ouverture, la dernière page d'un acte s'écrit, se signe et se paraphe,
   puis se redresse et devient le site de l'étude, sans défilement. Les lignes de l'acte deviennent la maquette,
   le sceau devient la photo, le paraphe signe le site. Par défaut (mouvement réduit, sans script) : le site, tel qu'il finit. */
.hero__grid { display: grid; }
.hero__grid .hero__intro { margin-top: clamp(2.2rem, 4.2vw, 3.4rem); }
.hero__grid .hero__facts { margin-top: clamp(2.6rem, 5vw, 4rem); }
.acte { --m: 3.05s; width: min(100%, 560px); margin: clamp(2.2rem, 7vw, 3rem) auto 0; }
@media (min-width: 1000px) {
    .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 80px); align-items: center; }
    .hero__grid .hero__title { font-size: clamp(4rem, 1rem + 6.3vw, 7.4rem); }
    .acte { width: 100%; max-width: 620px; margin: 0; justify-self: center; }
    .hero .hero__facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
    .hero .hero__facts li { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: 1.1rem 0 0; border-bottom: 0; }
}
.acte__corps { transform-origin: 50% 55%; }
.acte__svg { display: block; width: 100%; height: auto; overflow: visible; }
.acte__svg { font-family: var(--sans); } /* hérité par les textes ; le site de l'étude garde ses empattements */
.acte__ombre { fill: #0A1628; opacity: .2; transform-box: view-box; transform-origin: 300px 260px; transform: scale(1.8667, .8255); }
.acte__feuille { fill: #FFFEFB; stroke: rgba(10, 22, 40, .08); stroke-width: .8; opacity: 0; transform-box: view-box; transform-origin: 300px 260px; transform: scale(1.8667, .8255); }
.acte__fond { fill: #FBFAF7; }
.acte__bord { fill: none; stroke: rgba(10, 22, 40, .1); }
.acte__barre-nav { fill: #EEF1F5; }
.acte__cadenas { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linejoin: round; }
.acte__url { font-size: 7.5px; fill: var(--ink-2); }
.acte__page { opacity: 0; }
.acte__marge { stroke: var(--line-2); stroke-width: .6; }
.acte__t { font-size: 7px; fill: var(--ink-2); }
.acte__t--titre { font-size: 6.4px; font-weight: 600; letter-spacing: .14em; fill: var(--ink); }
.acte__t--fort { font-size: 8px; font-weight: 700; letter-spacing: .05em; fill: var(--ink); }
.acte__mini { font-size: 5.6px; fill: var(--ink-3); }
.acte__seing { fill: none; stroke: var(--ink-2); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.acte__sceau { fill: none; stroke: var(--navy); stroke-width: 1.1; opacity: 0; transform-box: view-box; transform-origin: 392px 378px; transform: translate(47px, -116px) scale(4); }
.acte__sceau text { fill: var(--navy); stroke: none; font-size: 4.6px; font-weight: 600; letter-spacing: .16em; }
.acte__sceau path { fill: var(--navy); stroke: none; }
.acte__barre { fill: var(--ink); opacity: 0; transform-box: view-box; transform-origin: 0 0; transform: translate(var(--x1), var(--y1)) scale(var(--w1), var(--h1)); }
.acte__marque { font: 600 14px Georgia, "Times New Roman", serif; fill: #14213D; }
.acte__nav { font-size: 7.5px; fill: var(--ink-2); }
.acte__kicker { font-size: 6.5px; letter-spacing: .26em; fill: #A8875A; }
.acte__h1 { font: 500 31px Georgia, "Times New Roman", serif; fill: #14213D; letter-spacing: -.01em; }
.acte__h1--or { font-style: italic; fill: #A8875A; }
.acte__p { font-size: 8.5px; fill: var(--ink-2); }
.acte__bouton { transform-box: fill-box; transform-origin: center; }
.acte__bouton rect { fill: #14213D; }
.acte__bouton text { font-size: 8.5px; font-weight: 500; fill: #fff; }
.acte__arche { transform-box: fill-box; transform-origin: 50% 100%; }
.acte__facade { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 1.2; }
.acte__onde { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.acte__paraphe { fill: none; stroke: url(#lp-acte); stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.3; stroke-dashoffset: 0; transform-box: view-box; transform-origin: 0 0; transform: translate(488px, 446px) scale(.6); }
.acte__puce { transform-box: fill-box; transform-origin: center; }
.acte__puce rect { fill: #fff; }
.acte__puce text { font-size: 11.5px; font-weight: 600; letter-spacing: -.01em; fill: var(--ink); }
.acte__icone { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.acte__curseur { opacity: 0; transform: translate(116px, 328px); }
.acte__clic { transform-box: fill-box; transform-origin: 0 0; }
.acte__curseur path { fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }

/* ── 23. Avis : une bande. À gauche le titre, la note, la source ; à droite les avis, une phrase en grand
   qui s'allume mot à mot, qui l'a écrit et quand, l'avis complet dépliable ── */
.avis { --fort: var(--ink); --doux: var(--ink-3); --lien: var(--blue-ink); --etoiles: var(--signature); --filet: var(--ink); --cercle: var(--line-2);
    padding-block: clamp(4rem, 8vw, 7rem); }
.section--night.avis { --fort: var(--on-night); --doux: var(--on-night-2); --lien: var(--blue-night); --etoiles: var(--signature-night); --filet: var(--on-night); --cercle: var(--night-line); }
.avis__bande { display: grid; row-gap: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(1rem, 1.6vw, 1.3rem); border-top: 1px solid var(--filet); }
.avis__tete { display: grid; align-content: start; justify-items: start; gap: 1.1rem; }
.avis__titre { max-width: 12ch; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.04; letter-spacing: -.035em; color: var(--fort) !important; }
.avis__note { display: grid; gap: .55rem; max-width: 22em; font-size: .95rem; line-height: 1.5; color: var(--doux) !important; }
.avis__etoiles { width: fit-content; font-size: 1.05rem; line-height: 1; letter-spacing: .2em; background: var(--etoiles); -webkit-background-clip: text; background-clip: text; color: transparent; }
.temoins { display: grid; gap: clamp(3rem, 6vw, 4rem); }
.temoin { display: grid; align-content: start; gap: 1.3rem; }
.temoin figure { display: grid; gap: 1.3rem; }
.temoin__phrase { max-width: 24ch; font-size: clamp(1.6rem, 1rem + 1.6vw, 2.35rem); line-height: 1.12; font-weight: 400; letter-spacing: -.032em; color: var(--fort) !important; text-wrap: balance; }
.temoin__source { display: grid; gap: .1rem; font-size: .95rem; color: var(--doux); }
.temoin__source strong { font-weight: 600; color: var(--fort); }
.temoin__source a { width: fit-content; margin-top: .35rem; font-size: .9rem; color: var(--lien); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.temoin__suite summary { display: inline-flex; align-items: center; gap: .65rem; list-style: none; cursor: pointer; font-size: .95rem; font-weight: 500; color: var(--fort); }
.temoin__suite summary::-webkit-details-marker { display: none; }
.temoin__suite summary::before { content: ""; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--cercle);
    background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
    transition: background-size .35s var(--ease-out), border-color .35s var(--ease); }
.temoin__suite summary:hover::before { border-color: currentColor; }
.temoin__suite[open] summary::before { background-size: 10px 1.5px, 1.5px 0; }
.temoin__texte { display: grid; gap: .8em; max-width: 38em; padding-top: 1.2rem; }
.temoin__texte p { font-size: 1rem; line-height: 1.6; color: var(--doux) !important; }
.temoins--un .temoin__phrase { max-width: 28ch; font-size: clamp(1.8rem, 1rem + 2.3vw, 3.1rem); line-height: 1.08; }
@media (max-width: 899px) {
    .avis__tete { display: contents; }
    .avis__bande { row-gap: 1.1rem; }
    .temoins { margin-top: 1.9rem; }
}
@media (min-width: 900px) {
    .avis__bande { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 24px; }
    .temoins--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.5vw, 72px); }
    /* Plusieurs avis : l'en-tête passe au-dessus (titre à gauche, note et lien à droite), les avis prennent toute la largeur */
    .avis__bande--large .avis__tete { grid-column: 1 / -1; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 24px; }
    .avis__bande--large .avis__note { grid-column: 2; max-width: none; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 1rem; }
    .avis__bande--large .temoins { grid-column: 1 / -1; }
    .temoins--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4.5vw, 72px); row-gap: clamp(3rem, 5vw, 4.5rem); }
    .temoins--quatre .temoin__phrase { max-width: 30ch; font-size: clamp(1.45rem, .8rem + 1.25vw, 2.1rem); }
    /* Le guillemet ouvrant déborde dans la marge : la première lettre s'aligne sur le nom, en dessous */
    .temoin__phrase { text-indent: -.6em; }
    .temoins--deux .temoin__phrase { max-width: none; }
}
/* La phrase s'allume mot à mot (script ; sans script ou mouvement réduit, elle est lisible d'emblée) */
.temoin__phrase .mot { opacity: clamp(.17, calc(var(--p, 1) * (var(--n) + 3) - var(--k)), 1); transition: opacity .3s linear; }

/* ── 24. Film (26 octobre) : un bouton dans l'ouverture, un lecteur en fenêtre ──
   Rien n'est chargé avant le clic. La vidéo s'ouvre sur la nuit, avec le son ;
   à la fin, une seule suite : démarrer son projet. */
.film-btn { display: inline-flex; align-items: center; gap: .85rem; min-height: 52px; color: var(--ink); font-weight: 500; text-decoration: none; }
.film-btn__play { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--signature); color: #fff; box-shadow: 0 12px 26px -12px rgba(26, 63, 139, .7); transition: transform .45s var(--ease-out); }
.film-btn__play svg { width: 18px; height: 18px; margin-left: 3px; fill: currentColor; }
.film-btn__play::after { content: ""; position: absolute; inset: -6px; border: 1px solid rgba(39, 121, 196, .32); border-radius: 50%; transition: inset .5s var(--ease-out), opacity .5s var(--ease); }
.film-btn:hover .film-btn__play { transform: scale(1.06); }
.film-btn:hover .film-btn__play::after { inset: -12px; opacity: 0; }
.film-btn__txt { display: grid; line-height: 1.2; }
.film-btn__duree { font-size: .875rem; font-weight: 400; color: var(--ink-3); }

.film { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: clamp(64px, 8vh, 96px) var(--gutter) clamp(20px, 4vh, 40px); border: 0; background: transparent; color: var(--on-night); overflow: auto; overscroll-behavior: contain; }
.film[open] { display: grid; place-items: center; }
.film::backdrop { background: rgba(7, 14, 27, .94); backdrop-filter: blur(8px); }
html:has(.film[open]) { overflow: hidden; }
.film__boite { width: min(1280px, 100%, calc((100dvh - 210px) * 16 / 9)); }
.film__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0B1526; box-shadow: 0 0 0 1px var(--night-line), 0 50px 120px -40px rgba(0, 0, 0, .85); }
.film__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0B1526; }
.film__video::cue { font-family: var(--sans); font-size: clamp(.95rem, .8rem + .6vw, 1.35rem); line-height: 1.35; color: #fff; background: rgba(7, 14, 27, .78); }
.film__fermer { position: absolute; top: clamp(14px, 2.4vh, 26px); right: var(--gutter); display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--night-line); border-radius: 50%; background: rgba(255, 255, 255, .05); color: var(--on-night); font: 300 1.9rem/1 var(--sans); cursor: pointer; transition: background-color .25s, transform .45s var(--ease-out); }
.film__fermer:hover { background: rgba(255, 255, 255, .14); transform: rotate(90deg); }
.film__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem; margin-top: 1.1rem; }
.film__titre { margin: 0; font-size: 1.0625rem; font-weight: 500; color: var(--on-night); }
.film__texte summary { cursor: pointer; color: var(--on-night-2); font-size: .9375rem; list-style: none; text-decoration: underline; text-decoration-color: var(--night-line); text-underline-offset: .25em; }
.film__texte summary::-webkit-details-marker { display: none; }
.film__texte summary:hover { color: var(--on-night); }
.film__texte[open] { flex-basis: 100%; }
.film__texte p { max-width: 62em; margin: .8rem 0 0; color: var(--on-night-2); font-size: .9375rem; line-height: 1.6; }
.film__fin { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.4rem; padding: 1.5rem; text-align: center; background: rgba(7, 14, 27, .8); backdrop-filter: blur(6px); }
.film__fin[hidden] { display: none; }
.film__fin-titre { margin: 0; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; color: var(--on-night); }
.film__fin-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; }
.film__revoir { padding: .3rem 0; border: 0; background: none; color: var(--on-night-2); font: 500 1rem/1.2 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-color: var(--night-line); text-underline-offset: .25em; }
.film__revoir:hover { color: var(--on-night); }
.film :focus-visible { outline-color: var(--blue-night); }
@media (prefers-reduced-motion: no-preference) {
    .film[open] .film__boite { animation: film-entree .7s var(--ease-out) both; }
    .film[open]::backdrop { animation: apparaitre-plein .4s ease both; opacity: 0; }
    .film__fin:not([hidden]) { animation: apparaitre .6s var(--ease-out) both; }
}
@keyframes film-entree { from { opacity: 0; transform: translateY(18px) scale(.985); } }

/* ── 19. Mouvement ──
   Une seule séquence d'ouverture, puis presque rien : la signature s'écrit
   sous le titre ; ensuite, seuls bougent ce qui a un sens (les études qui se
   succèdent, l'écran qui défile quand on le survole, les ratures qui se
   tracent, le calendrier qui se remplit). Sans préférence de mouvement
   réduit seulement ; sinon tout est affiché d'emblée. */
/* La signature du header s'écrit à la plume : à chaque arrivée sur l'accueil, une fois par visite ailleurs (classe sig-anim posée dans le head) */
.sig-ink path { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
/* Ordre et durée de chaque trait : L, e, jambage du P, boucle du P et sa barre, puis « araphe » */
.sig-ink path:nth-of-type(1) { --d: .35s;  --t: .46s; }
.sig-ink path:nth-of-type(2) { --d: .85s;  --t: .16s; }
.sig-ink path:nth-of-type(3) { --d: 1.07s; --t: .24s; }
.sig-ink path:nth-of-type(4) { --d: 1.35s; --t: .82s; }
.sig-ink path:nth-of-type(5) { --d: 2.21s; --t: .26s; }
.sig-ink path:nth-of-type(6) { --d: 2.49s; --t: .1s; }
.sig-ink path:nth-of-type(7) { --d: 2.63s; --t: .12s; }
.sig-ink path:nth-of-type(8) { --d: 2.77s; --t: .22s; }
@media (prefers-reduced-motion: no-preference) {
    .temoin__suite { interpolate-size: allow-keywords; }
    .temoin__suite::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .55s var(--ease-out), opacity .45s var(--ease), content-visibility .55s allow-discrete; }
    .temoin__suite[open]::details-content { block-size: auto; opacity: 1; }
    .js .hero__grid .hero__intro, .js .hero__grid .hero__facts { animation: apparaitre .9s var(--ease-out) both; animation-delay: .5s; }
    /* L'acte qui devient le site : une seule séquence d'environ six secondes, à l'arrivée sur l'accueil */
    .js .acte { animation: poser 1s .15s var(--ease-out) both; }
    .js .acte__corps { animation: acte-redresser 1s var(--m) var(--ease-io) both; }
    .js .acte__ombre { animation: acte-etirer 1s var(--m) var(--ease-io) both; }
    .js .acte__feuille { animation: acte-quitter .3s calc(var(--m) + .8s) ease both, acte-etirer 1s var(--m) var(--ease-io) both; }
    .js .acte__page { animation: acte-quitter .3s calc(var(--m) + .02s) ease both; }
    .js .acte__t { animation: acte-entrer .5s calc(.55s + var(--i) * 70ms) var(--ease-out) backwards; }
    .js .acte__fixe, .js .acte__marge { animation: acte-entrer .5s .5s var(--ease-out) backwards; }
    .js .acte__seing { stroke-dasharray: 1 1.3; stroke-dashoffset: 1.15; animation: ecrire .45s calc(1.55s + var(--j) * .16s) var(--ease-io) forwards; }
    .js .acte__sceau { animation: acte-quitter .32s calc(var(--m) + .32s) ease both, acte-sceau .95s var(--m) var(--ease-io) both, acte-tampon .38s 2s cubic-bezier(.3, 0, .2, 1) backwards; }
    .js .acte__paraphe { animation: ecrire-paraphe .85s 2.2s var(--ease-io) both, acte-paraphe 1s calc(var(--m) + .1s) var(--ease-io) both; }
    .js .acte__barre { animation: acte-barre 1.45s var(--m) both; }
    .js .acte__fenetre { animation: acte-paraitre .4s calc(var(--m) + .7s) ease both; }
    .js .acte__arche { animation: acte-arche .6s calc(var(--m) + .62s) var(--ease-out) both; }
    .js .acte__s { animation: acte-paraitre .5s calc(var(--m) + .82s + var(--s) * 60ms) ease both; }
    .js .acte__curseur { animation: acte-curseur .85s calc(var(--m) + 1.3s) var(--ease-io) both, acte-quitter .35s calc(var(--m) + 3s) ease forwards; }
    .js .acte__clic { animation: acte-presser .3s calc(var(--m) + 2.18s) ease; }
    .js .acte__bouton { animation: acte-paraitre .5s calc(var(--m) + 1.06s) ease both, acte-presser .3s calc(var(--m) + 2.2s) ease; }
    .js .acte__onde { animation: acte-onde .65s calc(var(--m) + 2.24s) var(--ease-out); }
    .js .acte__puce { animation: acte-puce .6s calc(var(--m) + 2.35s + var(--k) * .13s) var(--ease-out) both, acte-flotter 3.6s calc(var(--m) + 3.4s + var(--k) * .45s) ease-in-out infinite alternate; }
    .sig-anim .sig-ink rect { opacity: 0; animation: apparaitre-plein .4s 3.1s ease forwards; }
    .sig-anim .sig-ink path { stroke-dasharray: 1 1.3; stroke-dashoffset: 1.15; animation: ecrire var(--t) var(--d) var(--ease-io) forwards; }
    .js .hero__title .ln > span { animation: monter 1.15s var(--ease-out) both; }
    .js .hero__title .ln:nth-child(2) > span { animation-delay: .09s; }
    .js .hero__row { animation: apparaitre .9s var(--ease-out) both; animation-delay: .5s; }


    /* L'écran défile au survol (souris) : les trois premiers écrans du site */
    .screen__page img { transition: translate 7s cubic-bezier(.45, 0, .25, 1) .15s; }
    .stage__view:hover .plate.is-active .screen__page img { translate: 0 -66.6667%; transition-duration: 6.5s; }

    .js .plate .screen, .js .plate .phone { translate: 0 22px; transition: translate 1s var(--ease-out); }
    .js .plate.is-active .screen, .js .plate.is-active .phone { translate: 0 0; }
    .js .plate.is-active .phone { transition-delay: .08s; }
    .js .work.is-active .work__body { animation: apparaitre .6s var(--ease-out) both; }

    .js [data-reveal] .rules s { background-size: 0% 1.5px; transition: background-size .7s cubic-bezier(.6, .05, .3, 1); }
    .js [data-reveal].is-in .rules s { background-size: 100% 1.5px; }
    .js [data-reveal].is-in .rules li:nth-child(2) s { transition-delay: .15s; }
    .js [data-reveal].is-in .rules li:nth-child(3) s { transition-delay: .3s; }
    .js [data-reveal].is-in .rules li:nth-child(4) s { transition-delay: .45s; }
    .js [data-reveal] .sheet__paraphe path { stroke-dasharray: 1 1.3; stroke-dashoffset: 1.15; }
    .js [data-reveal].is-in .sheet__paraphe path { animation: ecrire 1.1s .9s var(--ease-io) forwards; }

    .js [data-reveal] .plan__bar { transform: scaleX(0); transition: transform 1.1s var(--ease-out); }
    .js [data-reveal].is-in .plan__bar { transform: none; }
    .js [data-reveal].is-in .plan__step:nth-child(2) .plan__bar { transition-delay: .18s; }
    .js [data-reveal].is-in .plan__step:nth-child(3) .plan__bar { transition-delay: .36s; }
    .js [data-reveal].is-in .plan__step:nth-child(4) .plan__bar { transition-delay: .54s; }
}
@keyframes monter { from { transform: translateY(104%); } }
@keyframes apparaitre { from { opacity: 0; transform: translateY(12px); } }
@keyframes ecrire { to { stroke-dashoffset: 0; } }
@keyframes apparaitre-plein { to { opacity: 1; } }
@keyframes acte-redresser { from { transform: perspective(1600px) rotateY(-18deg) rotateX(8deg) rotate(2.5deg); } }
@keyframes acte-etirer { from { transform: none; } }
@keyframes acte-quitter { from { opacity: 1; } to { opacity: 0; } }
@keyframes acte-entrer { from { opacity: 0; transform: translateY(3px); } }
@keyframes acte-paraitre { from { opacity: 0; } }
@keyframes acte-tampon { from { opacity: 0; transform: scale(1.45); } 70% { opacity: 1; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes acte-sceau { from { transform: none; } }
@keyframes ecrire-paraphe { from { stroke-dashoffset: 1.15; } }
@keyframes acte-paraphe { from { transform: translate(190px, 428px) scale(.5); } }
@keyframes acte-barre {
    0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--w0), 4); }
    12% { opacity: .17; transform: translate(var(--x0), var(--y0)) scale(var(--w0), 4); animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
    70% { opacity: .17; animation-timing-function: ease; }
    100% { opacity: 0; }
}
@keyframes acte-arche { from { opacity: 0; transform: scale(.94); } }
@keyframes acte-curseur { from { opacity: 0; transform: translate(560px, 500px); } 25% { opacity: 1; } to { opacity: 1; } }
@keyframes acte-presser { 40% { transform: scale(.88); } }
@keyframes acte-onde { from { opacity: .55; transform: scale(.25); } to { opacity: 0; transform: scale(1.35); } }
@keyframes acte-puce { from { opacity: 0; transform: translateY(10px) scale(.86); } }
@keyframes acte-flotter { to { transform: translateY(-3px); } }
@keyframes poser { from { opacity: 0; translate: 0 26px; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ── 20. Impression ── */
@media print {
    .site-header, .menu-mobile, .stage__view, .work__plate, .form-card, .plan__track, .plan__weeks, .film-btn, .film { display: none !important; }
    body, .section--night, .site-footer, .stage { background: #fff !important; color: #000 !important; }
    .section--night h2, .section--night h3, .section--night p, .forfait__amount, .thesis__statement, .services a { color: #000 !important; }
    .js .work__body[hidden] { display: block !important; }
    a { color: #000; }
}