/* Polices auto-hébergées (passe de performance du 2 octobre 2026) : sous-ensemble latin de Google
   Fonts, Literata réduite à l'axe de graisse 400 à 600 (seules graisses servies). Les secours
   Georgia et Verdana sont recalés sur les métriques des deux familles (Capsize), pour que
   l'échange de police ne déplace pas la mise en page. Préchargées dans le <head> : Literata
   (romain) et Atkinson 400, les deux de l'écran d'arrivée. */
@font-face { font-family: "Literata"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(fonts/literata-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/literata-italique-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/atkinson-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/atkinson-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/atkinson-italique-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata Repli"; src: local("Georgia"); ascent-override: 109.3141%; descent-override: 28.6056%; size-adjust: 107.6714%; }
@font-face { font-family: "Atkinson Repli"; src: local("Verdana"); ascent-override: 109.8412%; descent-override: 33.5305%; size-adjust: 86.4885%; }

:root {
  --papier: #F3EEE5; --papier-ombre: #E8E1D5; --encre: #1C1915;
  --pierre: #6B635B; --pierre-claire: #B8AFA5;
  --turquoise: #14B8A6; --turquoise-profond: #0B6E63; --turquoise-pale: #8FEFE1;
  --font-titre: "Literata", "Literata Repli", Georgia, serif;
  --font-texte: "Atkinson Hyperlegible", "Atkinson Repli", Verdana, sans-serif;
  --mesure: 40rem;
  --canvas: 75rem;
  --gutter: clamp(24px, 5vw, 80px);
  --display: clamp(3.25rem, 6.8vw, 6.125rem);
  --headline: clamp(2.125rem, 3.5vw, 3.25rem);
  --section-space: clamp(64px, 8vw, 120px);
}
* { box-sizing: border-box; }
html { background: var(--papier); color: var(--encre); scroll-padding-top: 24px; }
body { margin: 0; font: 400 1.125rem/1.55 var(--font-texte); }
body.menu-open { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
a { color: var(--turquoise-profond); text-underline-offset: 5px; text-decoration-thickness: 1px; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--turquoise-profond); outline-offset: 5px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-titre); font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--display); line-height: 1.08; letter-spacing: -.045em; margin: 0 0 32px; }
h2 { font-size: var(--headline); line-height: 1.14; letter-spacing: -.035em; margin: 0 0 24px; }
h3 { font-size: clamp(1.5rem, 2.25vw, 2rem); line-height: 1.22; letter-spacing: -.025em; margin: 0 0 20px; }
p { margin: 0 0 24px; max-width: var(--mesure); }
p:last-child { margin-bottom: 0; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img { display: block; max-width: 100%; }
.canvas { width: min(var(--canvas), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.small, small, .field-help, .field-error { font-size: .9375rem; line-height: 1.45; }
.muted { color: var(--pierre); }
.lead { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; }
.hour { font-size: .9375rem; font-weight: 700; line-height: 1.4; font-variant-numeric: tabular-nums; }
.hour { color: var(--turquoise-profond); }
.text-link { min-height: 48px; display: inline-flex; align-items: center; gap: 24px; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.text-link > span[aria-hidden] { margin-left: auto; font-size: 1.25rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; --h: 56px; min-height: var(--h); padding: 16px 24px; border: 1px solid transparent; border-radius: calc(var(--h) / 3); font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; transition: color 150ms, background-color 150ms, border-color 150ms; }
.primary { color: var(--encre); background: var(--turquoise); }
.secondary { color: var(--encre); background: transparent; border-color: var(--pierre); }
.button:hover, .button:focus-visible { color: var(--papier); background: var(--encre); border-color: var(--encre); text-decoration: none; }
.button:active { transform: translateY(1px); }
.button:disabled { color: var(--pierre); background: var(--papier-ombre); border-color: var(--pierre-claire); cursor: not-allowed; }
.cta-note { margin-top: 12px; font-size: .9375rem; line-height: 1.45; color: var(--pierre); max-width: 390px; }
.skip-link { position: fixed; left: 24px; top: -100px; z-index: 30; padding: 12px; background: var(--papier); }
.skip-link:focus { top: 8px; }
.brand { display: flex; align-items: center; padding: 8px; min-height: 48px; margin-left: -8px; flex-shrink: 0; }
.brand img { height: 42px; width: auto; }
.desktop-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.desktop-nav a { display: flex; align-items: center; min-height: 48px; font-size: .9375rem; color: var(--encre); text-decoration: none; }
.desktop-nav a:hover, [aria-current=page] { text-decoration: underline; text-underline-offset: 7px; }
.header-cta { --h: 48px; font-size: .9375rem; font-weight: 400; padding: 12px 18px; }
.menu-toggle { display: none; margin-left: auto; }
.mobile-menu { position: fixed; inset: 0; z-index: 20; height: 100dvh; overflow-y: auto; background: var(--papier); padding: 16px 24px 24px; }
.mobile-menu:not([hidden]) { display: flex; flex-direction: column; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-menu nav { margin-block: 64px; display: flex; flex-direction: column; }
.mobile-menu nav a { font: 600 clamp(1.75rem, 6vw, 3rem)/1.35 var(--font-titre); min-height: 64px; color: var(--encre); text-decoration: none; padding-block: 8px; }
.mobile-menu .primary { margin-top: auto; }
.visitor { max-width: 320px; font-size: .9375rem; line-height: 1.45; }
.visitor .hour { display: block; margin-bottom: 6px; }
.clock-text { transition: opacity 300ms; }
.clock-text.changing { opacity: .35; }
.home-arrival { overflow-anchor: none; }
.scene-panel {
  --hero-type-display: clamp(2rem, calc(1rem + 2.9vw), 3.5rem);
  --hero-space-group: 1.5rem;
  --hero-space-section: 2.5rem;
  position: relative; min-height: max(800px, 100svh); overflow: hidden; isolation: isolate;
  background: var(--encre); color: var(--papier); display: flex; align-items: flex-end;
  padding-block: clamp(220px, 30svh, 340px) clamp(3rem, 8svh, 5.5rem);
}
.scene-panel:focus { outline: none; }
.scene-panel .desktop-nav a { color: var(--papier); }
.scene-panel .header-cta, .scene-panel .menu-toggle { color: var(--papier); border-color: var(--pierre-claire); }
.scene-panel .header-cta:hover, .scene-panel .menu-toggle:hover { background: var(--papier); color: var(--encre); }
.scene-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: end; gap: clamp(2rem, 5vw, 5rem); }
.scene-panel :focus-visible { outline-color: var(--turquoise); }
.logo-cadre { position: relative; display: block; }
.logo-piece { position: absolute; inset: 0; display: none; pointer-events: none; }
.logo-piece > img { display: block; width: 100%; height: auto; will-change: transform; }
.logo-construction .logo-piece { display: block; }
.logo-construction .logo-mgf { visibility: hidden; }
.logo-construction .accueil-signature { opacity: 0; will-change: transform, opacity; }
.recognition { background: var(--papier-ombre); padding-block: var(--section-space); }
.recognition h2 { font-size: clamp(2.125rem, 4vw, 3.75rem); }
.dictation-lines { counter-reset: dictation; margin-top: 24px; }
.dictation-lines li { counter-increment: dictation; position: relative; padding: 16px 0 16px 36px; border-top: 1px solid currentColor; }
.dictation-lines li::before { content: counter(dictation, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-size: .8125rem; }
.dictation-lines.revealing li { animation: reveal 300ms both; }
.dictation-lines.revealing li:nth-child(2) { animation-delay: 200ms; }
.dictation-lines.revealing li:nth-child(3) { animation-delay: 400ms; }
.dictation-lines.revealing li:nth-child(4) { animation-delay: 600ms; }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
.tag { display: inline-block; padding: 3px 8px; border-radius: .55em; color: var(--encre); background: var(--turquoise-pale); font-size: .9375rem; line-height: 1.3; font-weight: 700; margin-bottom: 16px; flex-shrink: 0; }
/* Pied de page des pages intérieures : le pied de l'accueil (.pied-mgf, assistant.css), sans bulle au-dessus.
   La réserve basse de la bulle (--dock-reserve) n'a pas lieu d'être : une marge ordinaire la remplace. */
.pied-mgf.pied-page { padding-bottom: clamp(48px, 8vh, 80px); }
.section { padding-block: 64px; }
.section > p, .section > .steps { max-width: var(--mesure); }
.steps { counter-reset: step; }
.steps li { counter-increment: step; padding: 24px 0 24px 48px; position: relative; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 26px; font-weight: 700; color: var(--turquoise-profond); font-size: .9375rem; }
.steps h3 { font-size: 1.375rem; }
summary { cursor: pointer; padding: 24px 40px 24px 0; min-height: 64px; position: relative; list-style: none; font-size: 1.125rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 21px; font-size: 1.5rem; }
details[open] summary::after { content: '−'; }
details > p { padding-bottom: 24px; }
dl { margin: 0; }
dt { font-size: .9375rem; font-weight: 700; margin-top: 24px; }
dt:first-child { margin-top: 0; }
dd { margin: 8px 0 0; max-width: var(--mesure); }
.timeline > li { display: grid; grid-template-columns: 1fr 2fr; gap: 10%; padding-block: 48px; border-top: 1px solid var(--pierre-claire); }
.field { margin-bottom: 28px; }
label { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; margin-bottom: 10px; }
input, select, textarea { width: 100%; min-height: 56px; padding: 14px 16px; background: var(--papier); border: 1px solid var(--pierre); border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--turquoise-profond); outline-offset: 2px; }
textarea { min-height: 144px; resize: vertical; }
select { padding-right: 8px; }
.field-help { color: var(--pierre); margin-top: 8px; }
.field-error { margin-top: 8px; }
.counter { text-align: right; }
[aria-invalid=true] { border: 2px solid var(--encre); }
.error-summary { border: 2px solid var(--encre); padding: 24px; margin-bottom: 32px; }
.form-note { margin-top: 24px; }
.demo-note { color: var(--pierre); font-size: .9375rem; margin-block: 24px; }
.contact-page form { max-width: var(--mesure); }
.contact-page .section { border-top: 1px solid var(--pierre-claire); }
@media (max-width: 1100px) {
  .desktop-nav { gap: 24px; }
  .header-cta { max-width: 230px; }
}
@media (max-width: 1000px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .scene-content { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; }
  .scene-panel { --hero-type-display: clamp(2rem, 4.5vw, 2.75rem); }
}
@media (max-width: 760px) {
  .scene-panel { --hero-type-display: clamp(1.5rem, calc(.375rem + 6.2vw), 2.75rem); min-height: max(700px, 100svh); padding-block: 180px 32px; }
  .scene-content { grid-template-columns: 1fr; gap: var(--hero-space-section); }
  .recognition h2 br:last-of-type { display: none; }
  .recognition h2 { margin-bottom: 0; }
  .section { padding-block: 48px; }
  .timeline > li { grid-template-columns: 1fr; gap: 16px; padding-block: 32px; }
}
@media (max-width: 480px) {
  .brand img { height: 34px; }
  .visitor { font-size: .875rem; }
  .button { width: 100%; padding-inline: 16px; }
  .menu-toggle, .menu-close { --h: 48px; width: auto; padding: 10px 16px; }
}
@media (max-width: 360px) {
  .scene-panel { --hero-type-display: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .clock-text { opacity: 1; }
  .button:active { transform: none; }
}

