/* franchise.garden — un plan d'architecte : bleu blueprint, trait blanc, annotations au crayon jaune. */
:root {
  --blue: #1a4d95; --blue-d: #133a73; --line: #eaf2ff; --line-60: rgba(234, 242, 255, .6);
  --line-30: rgba(234, 242, 255, .3); --line-15: rgba(234, 242, 255, .15); --mark: #ffe27a;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --hand: "Architects Daughter", cursive;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--line); font: 15px/1.6 var(--mono); -webkit-font-smoothing: antialiased;
  background-color: var(--blue);
  background-image:
    radial-gradient(ellipse 80% 50% at 60% 20%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(rgba(234, 242, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 242, 255, .11) 1px, transparent 1px),
    linear-gradient(rgba(234, 242, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(234, 242, 255, .045) 1px, transparent 1px);
  background-size: 100% 100vh, 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  background-position: 0 0, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 20; background: var(--line); color: var(--blue-d); padding: 4px 8px; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }

/* la feuille : double cadre */
.sheet { position: relative; max-width: 1400px; margin: 20px auto; border: 1.5px solid var(--line-60); }
.sheet::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-30); pointer-events: none; }

/* en-tête */
.hd { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px 20px 0; height: 76px; border-bottom: 1px solid var(--line-30); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo svg { display: block; flex: none; }
.wm { display: flex; flex-direction: column; line-height: 1; }
.wm b { font-family: var(--cond); font-weight: 700; font-size: 25px; letter-spacing: .14em; }
.wm small { font-size: 10.5px; letter-spacing: .32em; color: var(--line-60); margin-top: 3px; }
.links { display: flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.links a { text-decoration: none; }
.links a:not(.navbtn):hover { text-decoration: underline; text-underline-offset: 4px; }
.links a span { color: var(--line-60); margin-right: 6px; }
.links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--mark); text-underline-offset: 6px; }
.navbtn { border: 1.5px solid var(--line); padding: 10px 16px; transition: background .15s, color .15s; }
.navbtn:hover { background: var(--line); color: var(--blue-d); }
.xbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px solid var(--line); transition: background .15s, color .15s; }
.xbtn:hover { background: var(--line); color: var(--blue-d); }

/* repères communs */
.ref { font-size: 12px; letter-spacing: .2em; color: var(--line-60); display: flex; gap: 14px; align-items: center; text-transform: uppercase; }
.ref i { display: inline-block; width: 46px; height: 1px; background: var(--line-60); }
.lbl { display: block; font: 500 11px var(--mono); letter-spacing: .24em; color: var(--line-60); text-transform: uppercase; }
.hand-note { font-family: var(--hand); color: var(--mark); font-size: 15px; }
.tagno { flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--line-60); border-radius: 50%; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 14px; background: var(--line); color: var(--blue-d); font: 700 23px/1 var(--cond);
  letter-spacing: .1em; text-transform: uppercase; padding: 18px 30px; text-decoration: none;
  box-shadow: 8px 8px 0 -1px var(--blue), 8px 8px 0 0 var(--line-60); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translate(3px, 3px); box-shadow: 5px 5px 0 -1px var(--blue), 5px 5px 0 0 var(--line-60); }
.btn svg { display: block; }
.ghost { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--line-60); padding-bottom: 3px; }
.ghost:hover { border-color: var(--line); }
.ctas { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; }

/* accueil */
.hero { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 32px; padding: 50px 28px 28px 48px; align-items: start; }
.hook-wrap { position: relative; }
.hero h1 { font: 600 clamp(56px, 6.2vw, 88px)/.9 var(--cond); text-transform: uppercase; margin-top: 22px; }
.hero h1 em { font-style: normal; display: block; -webkit-text-stroke: 1.5px var(--line); color: transparent; }
.dimv { position: absolute; left: -30px; top: 30px; bottom: 0; width: 12px; border-left: 1px solid var(--line-60); }
.dimv::before, .dimv::after { content: ""; position: absolute; left: -5px; width: 9px; height: 1px; background: var(--line-60); transform: rotate(-45deg); }
.dimv::before { top: 0; } .dimv::after { bottom: 0; }
.dimv span { position: absolute; left: -17px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-size: 10px; letter-spacing: .15em; color: var(--line-60); }
.lede { font-size: 15.5px; line-height: 1.6; margin-top: 28px; color: #dfe9fb; max-width: 480px; }
.lede b { font-weight: 600; color: #fff; border-bottom: 1px dashed var(--line-60); }
.notes { margin-top: 44px; border-top: 1px solid var(--line-30); padding-top: 16px; }
.notes h2 { margin-bottom: 10px; }
.notes ol { list-style: none; counter-reset: n; margin: 0; padding: 0; font-size: 12.5px; line-height: 1.55; }
.notes li { counter-increment: n; display: flex; gap: 12px; margin-bottom: 6px; }
.notes li::before { content: counter(n); flex: 0 0 20px; height: 20px; border: 1px solid var(--line-60); border-radius: 50%; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.plan-wrap { min-width: 0; }
.plan { display: block; width: 100%; height: auto; max-width: 770px; margin-left: auto; color: var(--line); }
.plan .t { fill: var(--line); stroke: none; }
.plan .bp-fill { fill: var(--blue); }
.plan .bp-stroke { stroke: var(--blue); }
.plan .hand { font-family: var(--hand); }
.plan .walk { animation: walk 1.4s linear infinite; }
@keyframes walk { to { stroke-dashoffset: -22; } }
#printer-flash.on { animation: flash .7s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }

/* sections : une feuille par section */
.sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 88px 48px; border-top: 1px solid var(--line-30); margin: 0 20px; align-items: start; }
.sec-col { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.sec h2 { font: 600 clamp(34px, 4vw, 52px)/.95 var(--cond); text-transform: uppercase; margin: 18px 0 18px; max-width: 640px; }
.body { color: #dfe9fb; max-width: 560px; font-size: 14.5px; }
.details { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; font-size: 14px; color: #dfe9fb; }
.details li { display: flex; gap: 14px; align-items: flex-start; }
.details b { color: #fff; font-weight: 600; }

/* nomenclature */
.schedule { margin: 0; border: 1.5px solid var(--line); background: var(--blue); position: relative; }
.sch-hd { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--line); font: 600 12px var(--mono); letter-spacing: .12em; flex-wrap: wrap; }
.schedule table { width: 100%; border-collapse: collapse; font-size: 13px; }
.schedule th { font: 500 10px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--line-60); text-align: left; padding: 10px 16px 6px; border-bottom: 1px solid var(--line-30); }
.schedule td { padding: 8px 16px; border-bottom: 1px solid var(--line-15); }
.schedule .r { text-align: right; }
.schedule .mk { width: 64px; font-weight: 600; color: var(--line-60); }
.schedule tr.pb td { color: var(--mark); }
.schedule tfoot td { border-top: 1.5px solid var(--line); border-bottom: 0; font-weight: 600; }
.schedule .regs { border-top: 1.5px solid var(--line); }
.schedule .hand-note { position: absolute; right: 18px; bottom: -30px; transform: rotate(-2deg); }

/* services */
.dials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-60); }
.dials li { padding: 22px 20px; border-left: 1px solid var(--line-30); display: grid; gap: 4px; justify-items: start; }
.dials li:first-child { border-left: 0; }
.dials svg { width: 84px; height: 84px; margin-bottom: 10px; }
.dials .wedge { fill: rgba(234, 242, 255, .14); stroke: none; }
.dials .now .wedge { fill: rgba(255, 226, 122, .35); }
.dials .now { color: var(--mark); }
.dials span { font-size: 12px; color: var(--line-60); }
.dials .now span { color: var(--mark); }
.dials h3 { font: 600 26px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps h3 { font: 600 22px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 8px; }
.steps p { color: #dfe9fb; font-size: 13.5px; }
.foot-note { font-size: 12px; color: var(--line-60); }

/* élévations */
.elev { list-style: none; margin: 0; padding: 0 0 12px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; border-bottom: 1.5px solid var(--line); }
.elev li { display: grid; justify-items: center; text-align: center; gap: 2px; color: var(--line-60); padding: 0 6px; }
.elev svg { width: 100%; max-width: 120px; height: 180px; }
.elev h3 { font: 600 20px/1.1 var(--cond); text-transform: uppercase; letter-spacing: .04em; margin-top: 10px; }
.elev span.mono { font-size: 11.5px; }
.elev li.done { color: var(--line); }
.elev li.here { color: var(--mark); }
.elev .hand-note { font-size: 13px; line-height: 1.3; margin-top: 4px; }

/* frais */
.split { display: flex; height: 64px; border: 1.5px solid var(--line); font: 600 15px var(--mono); }
.split span { display: flex; align-items: center; padding: 0 14px; min-width: 60px; border-left: 1.5px solid var(--line); }
.split span:first-child { border-left: 0; }
.s-till { background: var(--line); color: var(--blue-d); }
.s-own { background: repeating-linear-gradient(45deg, var(--line-60) 0 1px, transparent 1px 7px); }
.s-roy { background: transparent; }
.legend { margin: 24px 0 0; display: grid; gap: 16px; }
.legend dt { font-weight: 600; display: flex; align-items: center; gap: 10px; }
.legend dd { margin: 4px 0 0 24px; color: #dfe9fb; font-size: 14px; }
.sw { width: 14px; height: 14px; border: 1.5px solid var(--line); display: inline-block; }
.sw-till { background: var(--line); }
.sw-own { background: repeating-linear-gradient(45deg, var(--line-60) 0 1px, transparent 1px 4px); }

.end { padding: 96px 48px 104px; margin: 0 20px; border-top: 1px solid var(--line-30); display: grid; justify-items: center; text-align: center; }
.end h2 { font: 600 clamp(40px, 5.4vw, 72px)/.95 var(--cond); text-transform: uppercase; margin: 20px 0 6px; }
.end .ctas { justify-content: center; }

/* cartouche du bas */
.ft { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; margin: 0 20px 20px; border: 1.5px solid var(--line); font-size: 12.5px; }
.ft-cell { padding: 12px 16px; border-left: 1.5px solid var(--line); }
.ft-cell:first-child { border-left: 0; }
.ft .lbl { font-size: 9px; margin-bottom: 4px; }

.soon { padding: 120px 48px 140px; }
.soon h1 { font: 600 clamp(36px, 4.6vw, 60px)/.95 var(--cond); text-transform: uppercase; margin: 20px 0 30px; max-width: 800px; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding: 40px 28px 28px 48px; }
  .plan { margin: 0 auto; }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .elev { grid-template-columns: repeat(4, 1fr); row-gap: 28px; border-bottom: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .sheet { margin: 10px; }
  .hd { margin: 6px 12px 0; height: 64px; gap: 8px; }
  .links a:not(.navbtn):not(.xbtn) { display: none; }
  .xbtn { width: 34px; height: 34px; }
  .links { gap: 8px; }
  .navbtn { padding: 8px 8px; font-size: 11px; white-space: nowrap; letter-spacing: .02em; }
  .ref { font-size: 10.5px; letter-spacing: .14em; gap: 10px; white-space: nowrap; }
  .ref i { width: 24px; }
  .wm b { font-size: 20px; } .wm small { font-size: 9px; letter-spacing: .2em; }
  .logo svg { width: 30px; height: 30px; }
  .logo { gap: 10px; }
  .hero { padding: 28px 18px 20px 34px; }
  .dimv { left: -20px; }
  .hero h1 { font-size: 54px; margin-top: 16px; }
  .lede { font-size: 14.5px; margin-top: 20px; }
  .ctas { margin-top: 26px; gap: 22px; }
  .btn { font-size: 20px; padding: 16px 22px; }
  .notes { margin-top: 32px; }
  .sec, .end { padding: 64px 18px; margin: 0 12px; }
  .dials { grid-template-columns: 1fr 1fr; }
  .dials li:nth-child(3) { border-left: 0; }
  .dials li:nth-child(n+3) { border-top: 1px solid var(--line-30); }
  .steps { grid-template-columns: 1fr; }
  .elev { grid-template-columns: repeat(2, 1fr); }
  .schedule td, .schedule th { padding-left: 10px; padding-right: 10px; }
  .schedule .mk { width: 44px; }
  .ft { grid-template-columns: 1fr 1fr; margin: 0 12px 12px; }
  .ft-wide { grid-column: 1 / -1; border-bottom: 1.5px solid var(--line); }
  .ft-cell:nth-child(2) { border-left: 0; }
  .ft-cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; border-top: 1.5px solid var(--line); }
  .soon { padding: 72px 18px; }
}
@media (prefers-reduced-motion: reduce) { .plan .walk { animation: none; } html { scroll-behavior: auto; } }