/* gwendolinemeyer.fr — feuille de style principale
   Direction : le site ressemble à un OS (fenêtres, notifications, installation). */

/* Polices hébergées sur le serveur (licence SIL Open Font License, fichiers de Google Fonts).
   Bricolage Grotesque est une police variable : un seul fichier pour les graisses 400 à 800. */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url("../fonts/bricolage-grotesque-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: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url("../fonts/ibm-plex-mono-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: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-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;
}

:root {
  --bleu: #052642;        /* Prussian Blue */
  --bleu-2: #0b3357;
  --bleu-3: #12436e;
  --vanille: #E4D6A7;     /* Vanilla Custard */
  --vanille-2: #EFE5C6;
  --brique: #9B2915;      /* Oxidized Iron */
  --brique-2: #7E2110;
  --dore: #E9B44C;        /* Honey Bronze */
  --fond: #FAF6EC;
  --blanc: #ffffff;

  --texte: var(--bleu);
  --texte-doux: #33506a;

  --titre: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --corps: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --largeur: 1200px;
  --rayon: 10px;
  --ombre: 6px 6px 0 var(--bleu);
  --espace: clamp(4.5rem, 10vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1rem; }

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
}
h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; font-weight: 700; }

.wrap { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 1.25rem; }

.skip { position: absolute; left: -999px; top: 0; background: var(--dore); color: var(--bleu); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--dore); outline-offset: 3px; }

/* Étiquettes façon code */
.label {
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--dore); margin-bottom: 1.4rem;
  display: inline-flex; align-items: center; gap: .6rem;
}
.label::before { content: "//"; color: var(--brique); font-weight: 500; }
.label-dark { color: var(--brique); }
.label-dark::before { color: var(--dore); }
.label-light { color: var(--vanille); }
.label-light::before { color: var(--dore); }

/* Surlignage */
.mark {
  background: linear-gradient(transparent 58%, var(--dore) 58%, var(--dore) 92%, transparent 92%);
  padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero .mark { color: var(--blanc); background: linear-gradient(transparent 62%, var(--brique) 62%, var(--brique) 94%, transparent 94%); }
.mark-brique { color: var(--brique); background: none; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--brique); color: var(--blanc);
  font-family: var(--corps); font-weight: 700; font-size: 1.02rem; text-decoration: none;
  padding: .95rem 1.5rem; border-radius: 8px; border: 2px solid var(--bleu);
  box-shadow: 4px 4px 0 var(--bleu);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bleu); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bleu); }
.btn-note { font-family: var(--mono); font-weight: 500; font-size: .78rem; background: rgba(255,255,255,.2); padding: .1rem .5rem; border-radius: 4px; }
.btn-line { background: transparent; color: inherit; }
.btn-small { padding: .5rem 1rem; font-size: .95rem; box-shadow: 3px 3px 0 var(--bleu); }
.btn-light { background: var(--vanille); color: var(--bleu); }

.hero .btn, .quiz-card .btn { border-color: var(--bleu); }
.hero .btn { box-shadow: 4px 4px 0 var(--dore); }
.hero .btn:hover { box-shadow: 6px 6px 0 var(--dore); }
.hero .btn-line { border-color: var(--vanille); color: var(--vanille); }

.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2rem 0 1.6rem; }

/* Fenêtres façon OS */
.window { background: var(--blanc); border: 2px solid var(--bleu); border-radius: var(--rayon); box-shadow: var(--ombre); overflow: hidden; }
.window-bar {
  display: flex; align-items: center; gap: .9rem;
  padding: .55rem .9rem; border-bottom: 2px solid var(--bleu); background: var(--vanille);
}
.dots { display: inline-flex; gap: .35rem; }
.dots i { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--bleu); background: var(--brique); }
.dots i:nth-child(2) { background: var(--dore); }
.dots i:nth-child(3) { background: var(--fond); }
.window-title { font-family: var(--mono); font-size: .78rem; color: var(--bleu); }

/* En-tête */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bleu); color: var(--vanille-2); border-bottom: 2px solid var(--bleu-3); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 8px;
  background: var(--dore); color: var(--bleu); font-weight: 800; font-size: 1rem; letter-spacing: -.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 800; font-size: 1.12rem; color: var(--blanc); letter-spacing: -.01em; }
.brand-role { font-family: var(--mono); font-size: .72rem; color: var(--vanille); display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.dot-live { width: .45rem; height: .45rem; border-radius: 50%; background: #4cc38a; box-shadow: 0 0 0 3px rgba(76,195,138,.25); }
.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--dore); }
.nav .btn { box-shadow: 3px 3px 0 var(--dore); border-color: var(--dore); }
.menu-toggle { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; flex-direction: column; gap: 6px; }
.menu-bar { display: block; width: 26px; height: 2px; background: var(--vanille); transition: transform .2s; }

/* 1. Haut de page */
.hero {
  background: var(--bleu); color: var(--vanille-2);
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem);
  background-image: radial-gradient(rgba(228,214,167,.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { color: var(--blanc); }
.lead { font-size: clamp(1.12rem, 1.6vw, 1.3rem); max-width: 34rem; color: var(--vanille-2); }
.proofs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.proofs li {
  font-family: var(--mono); font-size: .78rem; color: var(--vanille);
  border: 1px solid rgba(228,214,167,.35); border-radius: 4px; padding: .25rem .6rem;
}

.hero-visual { position: relative; padding: 1rem 0 2rem; }
.window-photo { transform: rotate(1.5deg); box-shadow: 8px 8px 0 var(--dore); border-color: var(--vanille); }
.window-photo .window-bar { border-color: var(--bleu); }
.window-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; width: 100%; }

.notifs { margin: 0; }
.notif {
  position: absolute; z-index: 2; margin: 0;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .7rem;
  width: min(290px, 78%);
  background: var(--fond); color: var(--bleu);
  border: 2px solid var(--bleu); border-radius: 10px; box-shadow: 4px 4px 0 var(--bleu);
  padding: .65rem .8rem; font-size: .9rem; line-height: 1.3;
  opacity: 0; animation: pop .5s cubic-bezier(.2,.9,.3,1.3) forwards;
}
.notif-app {
  grid-row: 1 / 3; align-self: center;
  font-family: var(--mono); font-size: .68rem; font-weight: 500; text-transform: uppercase;
  background: var(--bleu); color: var(--dore); border-radius: 5px; padding: .35rem .45rem;
}
.notif-msg { font-weight: 700; }
.notif-time { font-family: var(--mono); font-size: .7rem; color: var(--texte-doux); }
.n1 { top: 12%; left: -9%; animation-delay: .5s; }
.n2 { top: 68%; right: -10%; animation-delay: 1.1s; }
.n3 { bottom: -1%; left: -10%; animation-delay: 1.7s; }
.n2 .notif-app { background: var(--brique); color: var(--blanc); }
.n3 .notif-app { background: var(--dore); color: var(--bleu); }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }

/* 2. Bandeau défilant */
.ticker { background: var(--dore); border-top: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); padding: 1.1rem 0; overflow: hidden; }
.ticker-title {
  text-align: center; font-family: var(--mono); font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; color: var(--bleu); margin: 0 0 .5rem;
}
.ticker-track { display: flex; width: max-content; animation: defile 32s linear infinite; }
.ticker-list { list-style: none; margin: 0; padding: 0; display: flex; }
.ticker-list li {
  font-family: var(--titre); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem);
  letter-spacing: -.02em; color: var(--bleu); white-space: nowrap; padding: 0 1.4rem;
  display: inline-flex; align-items: center; gap: 2.8rem;
}
.ticker-list li::after { content: "✦"; color: var(--brique); font-size: .7em; margin-left: 1.4rem; }
@keyframes defile { to { transform: translateX(-50%); } }

/* 3. OS */
.os { padding: var(--espace) 0; }
.os-head { max-width: 46rem; margin-bottom: 3rem; }
.section-intro { font-size: 1.2rem; color: var(--texte-doux); }
.window-desk { background: var(--vanille-2); }
.apps { display: grid; grid-template-columns: repeat(4, 1fr); }
.app { padding: 1.8rem 1.5rem 2rem; border-right: 2px dashed rgba(5,38,66,.25); }
.app:last-child { border-right: 0; }
.app-icon {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; margin-bottom: 1.1rem;
  background: var(--bleu); border-radius: 12px; box-shadow: 3px 3px 0 var(--dore);
}
.app:nth-child(2) .app-icon { background: var(--brique); box-shadow: 3px 3px 0 var(--bleu); }
.app:nth-child(3) .app-icon { background: var(--dore); box-shadow: 3px 3px 0 var(--bleu); }
.app:nth-child(3) .app-icon svg { stroke: var(--bleu); }
.app-icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--vanille-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.app p { margin: 0; font-size: 1rem; color: var(--texte-doux); }

.window-alert { position: relative; margin: -1.5rem auto 0; max-width: 780px; background: var(--bleu); color: var(--vanille-2); box-shadow: 6px 6px 0 var(--brique); }
.window-alert .window-bar { background: var(--bleu-2); border-color: var(--bleu-3); }
.window-alert .window-title { color: var(--vanille); }
.alert-body { padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem) 2rem; }
.alert-body h3 { color: var(--blanc); display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; }
.alert-count {
  display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--brique); color: var(--blanc); font-family: var(--mono); font-size: .95rem; font-weight: 500;
}
.alerts { list-style: none; margin: 0; padding: 0; }
.alerts li { position: relative; padding: .7rem 0 .7rem 2.4rem; border-top: 1px dashed rgba(228,214,167,.25); }
.alerts li::before {
  content: "!"; position: absolute; left: 0; top: .72rem;
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 4px;
  background: var(--dore); color: var(--bleu); font-family: var(--mono); font-weight: 500; font-size: .85rem;
}

/* 4. Différence */
.difference { background: var(--vanille); padding: var(--espace) 0; border-top: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); }
.statement { font-size: clamp(2.4rem, 7vw, 5.8rem); max-width: 15ch; margin-bottom: 2.5rem; }
.diff-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); max-width: 60rem; }
.diff-cols p { font-size: 1.15rem; margin: 0; }

/* 5. Méthode */
.method { background: var(--bleu); color: var(--vanille-2); padding: var(--espace) 0; }
.method h2 { color: var(--blanc); max-width: 20ch; }
.install { list-style: none; margin: 3rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.install-step { background: var(--bleu-2); border: 2px solid var(--bleu-3); border-radius: var(--rayon); padding: 1.6rem 1.5rem 1.8rem; }
.install-num { font-family: var(--mono); font-size: .78rem; color: var(--dore); }
.install-bar { display: block; height: 8px; border-radius: 4px; background: var(--bleu-3); margin: .7rem 0 1.4rem; overflow: hidden; }
.install-bar i { display: block; height: 100%; width: var(--w); background: var(--dore); }
.install-step h3 { color: var(--blanc); font-size: 1.6rem; }
.install-step p { margin: 0; color: var(--vanille); }

.modules { margin-bottom: 2.8rem; }
.modules-title { font-family: var(--mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vanille); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .7rem; }
.tags li {
  font-weight: 700; font-size: .98rem; color: var(--bleu);
  background: var(--vanille); border: 2px solid var(--bleu); border-radius: 8px; padding: .45rem .9rem;
  box-shadow: 3px 3px 0 var(--dore);
}
.tags li::before { content: "+ "; font-family: var(--mono); color: var(--brique); }
.quote-line { font-weight: 700; font-size: 1.35rem; color: var(--blanc); margin: 0; }
.method .btn { box-shadow: 4px 4px 0 var(--dore); }
.method .btn-line { border-color: var(--vanille); color: var(--vanille); }
.method-foot .actions { margin: 1.3rem 0; }
.solo { font-size: .95rem; color: var(--vanille); margin: 0; }

/* 6. Qui suis-je */
.about { padding: var(--espace) 0; }
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
.about-photo { position: relative; transform: rotate(-2deg); }
.about-photo img { border: 2px solid var(--bleu); border-radius: var(--rayon); box-shadow: 8px 8px 0 var(--brique); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; width: 100%; }
.about-photo figcaption {
  position: absolute; bottom: -1rem; left: 1rem;
  font-family: var(--mono); font-size: .78rem; background: var(--dore); color: var(--bleu);
  border: 2px solid var(--bleu); border-radius: 6px; padding: .3rem .7rem;
}
.about-text p { color: var(--texte-doux); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 2.2rem 0; }
.stats div { display: flex; flex-direction: column; border-top: 3px solid var(--bleu); padding-top: .8rem; }
.stats dd { order: -1; margin: 0; font-weight: 800; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.04em; color: var(--brique); }
.stats dt { font-family: var(--mono); font-size: .76rem; color: var(--texte-doux); margin-top: .5rem; }
.text-link { font-weight: 700; text-decoration: none; border-bottom: 3px solid var(--dore); padding-bottom: 2px; }
.text-link:hover { color: var(--brique); }

/* 7. Test */
.quiz-cta { padding: 0 0 var(--espace); }
.quiz-card {
  display: grid; grid-template-columns: .7fr 1.3fr;
  background: var(--brique); color: var(--vanille-2);
  border: 2px solid var(--bleu); border-radius: 14px; box-shadow: 10px 10px 0 var(--bleu); overflow: hidden;
}
.quiz-photo { border-right: 2px solid var(--bleu); }
.quiz-photo img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 35%; min-height: 340px; }
.quiz-text { padding: clamp(2rem, 5vw, 3.5rem); }
.quiz-text h2 { color: var(--blanc); font-size: clamp(2rem, 4vw, 3.2rem); }
.profiles { list-style: none; margin: 1.6rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.profiles li { font-weight: 700; font-size: .95rem; background: var(--bleu); color: var(--dore); border-radius: 6px; padding: .4rem .85rem; }
.quiz-progress { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; font-family: var(--mono); font-size: .78rem; color: var(--vanille); }
.quiz-progress i { flex: 1; max-width: 260px; height: 8px; border-radius: 4px; background: rgba(5,38,66,.45); position: relative; overflow: hidden; }
.quiz-progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6%; background: var(--dore); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.small { font-size: .95rem; margin: 1.3rem 0 0; }
.small a { color: var(--blanc); font-weight: 700; }

/* Pied de page */
.site-footer { background: var(--bleu); color: var(--vanille-2); padding: 3.5rem 0 2.5rem; border-top: 2px solid var(--bleu); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-name { font-weight: 800; font-size: 1.5rem; color: var(--blanc); letter-spacing: -.02em; margin-bottom: .4rem; }
.footer-tag { color: var(--vanille); max-width: 22rem; }
.footer-nav, .footer-legal { display: flex; flex-direction: column; gap: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--dore); }
.footer-mail a { font-family: var(--mono); font-size: .9rem; color: var(--dore); border-bottom: 1px solid currentColor; }
.footer-legal p { margin-top: 1rem; font-family: var(--mono); font-size: .78rem; color: var(--vanille); }

/* Tablette */
@media (max-width: 1020px) {
  .apps { grid-template-columns: 1fr 1fr; }
  .app:nth-child(2) { border-right: 0; }
  .app:nth-child(-n+2) { border-bottom: 2px dashed rgba(5,38,66,.25); }
  .install { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .n2 { right: -4%; }
}

/* Écrans moyens : les notifications restent sur la photo, loin du titre */
@media (max-width: 1240px) and (min-width: 821px) {
  .hero-grid { gap: clamp(3rem, 6vw, 5rem); }
  .n1, .n3 { left: 4%; }
  .notif { width: min(270px, 84%); }
}

/* Téléphone */
@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 1.1rem;
    background: var(--bleu); padding: 1.5rem 1.25rem 2rem; border-bottom: 2px solid var(--bleu-3);
  }
  .nav.is-open { display: flex; }
  .menu-toggle[aria-expanded="true"] .menu-bar:first-of-type { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-bar:last-of-type { transform: translateY(-4px) rotate(-45deg); }

  .hero-grid, .about-grid, .quiz-card, .footer-grid, .diff-cols { grid-template-columns: 1fr; }
  .hero-visual { max-width: 400px; margin: 1rem auto 0; width: 100%; padding-bottom: 0; }
  .window-photo { margin: 0 .6rem; }
  .notifs { display: grid; gap: .7rem; margin-top: 1.6rem; }
  .notif { position: static; width: 100%; }
  .about-photo { max-width: 380px; margin: 0 auto 1.5rem; }
  .quiz-photo { border-right: 0; border-bottom: 2px solid var(--bleu); }
  .quiz-photo img { max-height: 320px; min-height: 0; }
  .window-alert { margin-left: 0; }
}

@media (max-width: 560px) {
  .apps { grid-template-columns: 1fr; }
  .app { border-right: 0; border-bottom: 2px dashed rgba(5,38,66,.25); }
  .app:last-child { border-bottom: 0; }
  .actions .btn { width: 100%; justify-content: center; }
  .quiz-card { box-shadow: 6px 6px 0 var(--bleu); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .notif { animation: none; opacity: 1; }
  .ticker-track { animation: none; }
  .quiz-progress i::after { animation: none; }
  .btn, .menu-bar { transition: none; }
}

/* =========================================================
   Pages intérieures (Accompagnements, À propos, Contact, Formations)
   ========================================================= */

.nav a[aria-current="page"] { color: var(--dore); }

/* Haut de page intérieur */
.page-hero {
  background: var(--bleu); color: var(--vanille-2);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  background-image: radial-gradient(rgba(228,214,167,.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.page-hero h1 { color: var(--blanc); font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 16ch; }
.page-hero .lead { max-width: 38rem; }
.page-hero .btn { box-shadow: 4px 4px 0 var(--dore); }
.page-hero .btn:hover { box-shadow: 6px 6px 0 var(--dore); }
.page-hero .btn-line { border-color: var(--vanille); color: var(--vanille); }
.page-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero-center { text-align: center; }
.page-hero-center h1, .page-hero-center .lead { margin-left: auto; margin-right: auto; }
.page-hero-center .actions { justify-content: center; }

/* Pile de notifications (sans position absolue) */
.notif-stack { display: grid; gap: .9rem; }
.notif-stack .notif { position: static; width: 100%; }
.notif-stack .notif:nth-child(2) { margin-left: 1.5rem; }
.notif-stack .notif:nth-child(3) { margin-left: .5rem; }
.notif-stack .notif:nth-child(4) { margin-left: 2rem; }
.notif-stack .notif:nth-child(1) { animation-delay: .3s; }
.notif-stack .notif:nth-child(2) { animation-delay: .7s; }
.notif-stack .notif:nth-child(3) { animation-delay: 1.1s; }
.notif-stack .notif:nth-child(4) { animation-delay: 1.5s; }
.notif-app.app-brique { background: var(--brique); color: var(--blanc); }
.notif-app.app-dore { background: var(--dore); color: var(--bleu); }

/* Section vanille avec grande phrase */
.band { background: var(--vanille); padding: var(--espace) 0; border-bottom: 2px solid var(--bleu); }
.band h2 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); max-width: 18ch; margin-bottom: 2.2rem; }
.band-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); max-width: 62rem; }
.band-cols p { font-size: 1.12rem; margin: 0; }

/* Section claire générique */
.section { padding: var(--espace) 0; }
.section-head { max-width: 46rem; margin-bottom: 2.6rem; }

/* Grille d'applications à 3 colonnes */
.apps-3 { grid-template-columns: repeat(3, 1fr); }
.apps-3 .app { border-bottom: 2px dashed rgba(5,38,66,.25); }
.apps-3 .app:nth-child(3n) { border-right: 0; }
.apps-3 .app:nth-last-child(-n+3) { border-bottom: 0; }
.app:nth-child(4) .app-icon { background: var(--bleu); box-shadow: 3px 3px 0 var(--brique); }
.app:nth-child(5) .app-icon { background: var(--brique); box-shadow: 3px 3px 0 var(--dore); }
.app:nth-child(6) .app-icon { background: var(--dore); box-shadow: 3px 3px 0 var(--bleu); }
.app:nth-child(6) .app-icon svg { stroke: var(--bleu); }

/* Méthode détaillée */
.install-step .install-out {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed rgba(228,214,167,.3);
  font-family: var(--mono); font-size: .85rem; color: var(--dore); line-height: 1.5;
}

/* Fenêtre outils */
.window-tools { background: var(--vanille-2); }
.tools-body { padding: 1.8rem clamp(1.3rem, 4vw, 2.2rem) 2rem; }
.tools-body p { max-width: 46rem; color: var(--texte-doux); }
.tools-body .tags { margin-top: 1.4rem; }
.tools-body .tags li { background: var(--fond); }
.tools-body .tags li::before { content: "> "; }

/* Carte brique (tarif, conférences) */
.brick-card {
  background: var(--brique); color: var(--vanille-2);
  border: 2px solid var(--bleu); border-radius: 14px; box-shadow: 10px 10px 0 var(--bleu);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 2rem; align-items: center;
}
.brick-card h2 { color: var(--blanc); font-size: clamp(2rem, 4vw, 3.1rem); }
.brick-card p { margin: 0; font-size: 1.1rem; }
.brick-card .btn { justify-self: end; }
.solo-line { margin: 2.2rem 0 0; color: var(--texte-doux); }
.solo-line a { font-weight: 700; color: var(--brique); }

/* FAQ */
.faq { display: grid; gap: 1rem; max-width: 52rem; }
.faq details { background: var(--blanc); border: 2px solid var(--bleu); border-radius: var(--rayon); box-shadow: 4px 4px 0 var(--bleu); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 1.3rem;
  font-weight: 700; font-size: 1.12rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 6px;
  background: var(--dore); color: var(--bleu); font-family: var(--mono); font-weight: 500; transition: transform .2s;
}
.faq details[open] summary::after { content: "−"; background: var(--brique); color: var(--blanc); }
.faq details p { margin: 0; padding: 0 1.3rem 1.3rem; color: var(--texte-doux); }

/* Appel final sombre */
.final { background: var(--bleu); color: var(--vanille-2); padding: var(--espace) 0; text-align: center; }
.final h2 { color: var(--blanc); max-width: 20ch; margin-left: auto; margin-right: auto; }
.final p { max-width: 40rem; margin-left: auto; margin-right: auto; }
.final .actions { justify-content: center; }
.final .btn { box-shadow: 4px 4px 0 var(--dore); }
.final .btn-line { border-color: var(--vanille); color: var(--vanille); }

/* À propos : photo et historique */
.portrait { position: relative; max-width: 380px; margin-left: auto; }
.portrait .window-photo img { aspect-ratio: 2 / 3; object-position: 50% 50%; }
.window-log { background: var(--bleu); color: var(--vanille-2); box-shadow: 6px 6px 0 var(--dore); }
.window-log .window-bar { background: var(--bleu-2); border-color: var(--bleu-3); }
.window-log .window-title { color: var(--vanille); }
.log { list-style: none; margin: 0; padding: .6rem clamp(1.2rem, 4vw, 2.2rem) 1.4rem; }
.log li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px dashed rgba(228,214,167,.22); }
.log li:last-child { border-bottom: 0; }
.log-year { font-family: var(--mono); font-size: .9rem; color: var(--dore); padding-top: .15rem; }
.log p { margin: 0; }
.log li:last-child .log-year { color: var(--bleu); background: var(--dore); border-radius: 4px; padding: .1rem .45rem; align-self: start; justify-self: start; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2rem; align-items: start; }
.window-agenda { background: var(--vanille-2); }
.card-body { padding: 1.8rem 1.6rem 2rem; }
.card-body h2 { font-size: 1.8rem; }
.card-body p { color: var(--texte-doux); }
.form { display: grid; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label, .field legend { font-weight: 700; font-size: .95rem; }
.field .hint { font-family: var(--mono); font-size: .72rem; color: var(--texte-doux); font-weight: 400; }
.field input, .field select, .field textarea {
  font: inherit; color: var(--bleu); background: var(--fond);
  border: 2px solid var(--bleu); border-radius: 8px; padding: .75rem .85rem; width: 100%;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--dore); outline-offset: 1px; }
.check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; font-size: .95rem; color: var(--texte-doux); }
.check input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--brique); }
.check a { color: var(--brique); font-weight: 700; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; cursor: pointer; }
.alert-msg {
  display: none; margin-bottom: 1.4rem; padding: 1rem 1.2rem; border-radius: 8px;
  border: 2px solid var(--bleu); background: var(--dore); color: var(--bleu); font-weight: 700;
}
.alert-msg.is-visible { display: block; }
.contact-more { margin-top: 2.5rem; color: var(--texte-doux); }
.contact-more a { color: var(--brique); font-weight: 700; }

@media (max-width: 1020px) {
  .apps-3 { grid-template-columns: 1fr 1fr; }
  .apps-3 .app { border-right: 2px dashed rgba(5,38,66,.25); border-bottom: 2px dashed rgba(5,38,66,.25); }
  .apps-3 .app:nth-child(2n) { border-right: 0; }
  .apps-3 .app:nth-last-child(-n+2) { border-bottom: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .page-hero-grid, .band-cols, .brick-card, .form-row { grid-template-columns: 1fr; }
  .brick-card .btn { justify-self: start; }
  .notif-stack .notif:nth-child(n) { margin-left: 0; }
  .portrait { margin: 1rem auto 0; }
  .log li { grid-template-columns: 1fr; gap: .3rem; }
}

@media (max-width: 560px) {
  .apps-3 { grid-template-columns: 1fr; }
  .apps-3 .app, .apps-3 .app:nth-child(2n) { border-right: 0; border-bottom: 2px dashed rgba(5,38,66,.25); }
  .apps-3 .app:last-child { border-bottom: 0; }
  .brick-card { box-shadow: 6px 6px 0 var(--bleu); }
}

/* Pages légales */
.window-doc { background: var(--blanc); max-width: 52rem; }
.legal { padding: clamp(1.4rem, 4vw, 2.6rem); }
.legal h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin: 2.4rem 0 .9rem; letter-spacing: -.02em; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--texte-doux); }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--brique); font-weight: 700; }
.legal .maj { font-family: var(--mono); font-size: .78rem; color: var(--texte-doux); margin-top: 2.4rem; padding-top: 1rem; border-top: 1px dashed rgba(5,38,66,.25); }

/* Page du test */
.test-page {
  background: var(--bleu); padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem);
  background-image: radial-gradient(rgba(228,214,167,.09) 1px, transparent 1px);
  background-size: 22px 22px;
}
.window-test { scroll-margin-top: 92px; max-width: 820px; margin: 0 auto; background: var(--fond); box-shadow: 8px 8px 0 var(--dore); border-color: var(--vanille); }
.test-body { padding: clamp(1.5rem, 5vw, 3rem); scroll-margin-top: 90px; }
.test-title { font-size: clamp(2rem, 4.6vw, 3.2rem); outline: none; }
.test-lead { font-size: 1.15rem; color: var(--texte-doux); max-width: 38rem; }
.small-dark { font-size: .92rem; color: var(--texte-doux); margin-top: 1rem; }
.small-dark a { color: var(--brique); font-weight: 700; }
#commencer { margin-top: .8rem; }

.test-progress { display: flex; align-items: center; gap: 1rem; font-family: var(--mono); font-size: .8rem; color: var(--texte-doux); margin-bottom: 1.6rem; }
.test-progress .install-bar { flex: 1; margin: 0; background: var(--vanille); }
.test-question { font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.15; outline: none; margin-bottom: 1.6rem; }

.choices { display: grid; gap: .9rem; }
.choice {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; text-align: left;
  font: inherit; font-size: 1.05rem; color: var(--bleu); cursor: pointer;
  background: var(--blanc); border: 2px solid var(--bleu); border-radius: 10px;
  box-shadow: 4px 4px 0 var(--bleu); padding: 1rem 1.1rem;
  transition: transform .12s, box-shadow .12s, background .12s;
}
.choice:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--bleu); background: var(--vanille-2); }
.choice:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--bleu); }
.choice[aria-pressed="true"] { background: var(--vanille); }
.choice-key {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 6px;
  background: var(--bleu); color: var(--dore); font-family: var(--mono); font-size: .9rem;
}
.test-back {
  margin-top: 1.6rem; background: none; border: 0; padding: .3rem 0; cursor: pointer;
  font-family: var(--mono); font-size: .82rem; color: var(--texte-doux); text-decoration: underline;
}
.test-back:hover { color: var(--brique); }

.score-line { font-family: var(--mono); font-size: .9rem; color: var(--brique); margin-top: -.4rem; }
#profil-texte p { font-size: 1.1rem; color: var(--texte-doux); }

.theme-bars { display: grid; gap: .7rem; margin: 2rem 0; padding: 1.4rem; background: var(--bleu); border-radius: var(--rayon); }
.theme-bar { display: grid; grid-template-columns: 11rem 1fr 3rem; gap: 1rem; align-items: center; font-family: var(--mono); font-size: .8rem; color: var(--vanille); }
.theme-bar .install-bar { margin: 0; }
.theme-bar-pts { text-align: right; }
.theme-bar.is-weak { color: var(--blanc); }
.theme-bar.is-weak .install-bar i { background: var(--brique); }

.weak { border: 2px solid var(--bleu); border-radius: var(--rayon); background: var(--vanille-2); padding: 1.5rem; box-shadow: 4px 4px 0 var(--brique); margin-bottom: 2.4rem; }
.weak h3 { font-size: 1.5rem; }
.weak p { margin-bottom: .6rem; }
.weak p:last-child { margin-bottom: 0; }

.plan { border-top: 2px dashed rgba(5,38,66,.25); padding-top: 2rem; }
.plan h3 { font-size: 1.7rem; }
.plan > p { color: var(--texte-doux); }

@media (max-width: 560px) {
  .theme-bar { grid-template-columns: 1fr 2.6rem; }
  .theme-bar .install-bar { grid-column: 1 / -1; grid-row: 2; }
  .window-test { box-shadow: 5px 5px 0 var(--dore); }
}

/* Test : mode focus (sans menu ni pied de page) */
body.focus { background: var(--bleu); }
.focus-bar { background: var(--bleu); border-bottom: 2px solid var(--bleu-3); color: var(--vanille-2); }
.focus-inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.focus-tag { font-family: var(--mono); font-size: .78rem; color: var(--dore); border: 1px solid rgba(233,180,76,.5); border-radius: 4px; padding: .25rem .6rem; white-space: nowrap; }
.focus-foot {
  background: var(--bleu); color: var(--vanille); text-align: center; padding: 0 1rem 2rem;
  font-family: var(--mono); font-size: .75rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
}
.focus-foot a { color: var(--vanille); }
.btn-big { font-size: 1.12rem; padding: 1.05rem 1.8rem; }

/* Test : nouvelle page de résultat */
.result-hero { margin-bottom: 2.4rem; }
.scale { margin: 1.6rem 0 2rem; }
.scale-track { position: relative; display: flex; height: 14px; border: 2px solid var(--bleu); border-radius: 8px; overflow: visible; }
.seg { height: 100%; }
.seg-1 { width: 37.5%; background: var(--brique); border-radius: 6px 0 0 6px; }
.seg-2 { width: 35%; background: var(--dore); }
.seg-3 { width: 27.5%; background: #4cc38a; border-radius: 0 6px 6px 0; }
.scale-marker {
  position: absolute; top: -2.6rem; transform: translateX(-50%);
  background: var(--bleu); color: var(--vanille-2); font-family: var(--mono); font-size: .8rem;
  padding: .25rem .55rem; border-radius: 6px; white-space: nowrap;
}
.scale-marker b { font-size: 1.05rem; color: var(--dore); }
.scale-marker::after { content: ""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: var(--bleu); }
.scale-labels { display: flex; margin-top: .5rem; font-family: var(--mono); font-size: .72rem; color: var(--texte-doux); }
.scale-labels span:nth-child(1) { width: 37.5%; }
.scale-labels span:nth-child(2) { width: 35%; }
.scale-labels span:nth-child(3) { width: 27.5%; text-align: right; }
.result-hero .test-title { margin-top: .4rem; margin-bottom: 2.6rem; }
.profil-texte p { font-size: 1.1rem; color: var(--texte-doux); text-align: justify; hyphens: auto; }

.result-block { margin-bottom: 2.4rem; }
.block-title { font-size: 1.35rem; margin-bottom: 1rem; }
.result-block .theme-bars { margin: 0; }

.weak .weak-text { text-align: justify; hyphens: auto; font-size: 1.08rem; }
.first-action { background: var(--blanc); border: 2px solid var(--bleu); border-left: 8px solid var(--brique); border-radius: 8px; padding: 1rem 1.2rem; margin: 1.2rem 0; }
.first-action-tag { display: inline-block; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; background: var(--brique); color: var(--blanc); border-radius: 4px; padding: .15rem .5rem; margin-bottom: .6rem; }
.first-action p { margin: 0; font-weight: 700; font-size: 1.08rem; color: var(--bleu); text-align: justify; hyphens: auto; }
.weak-next { font-family: var(--mono); font-size: .85rem; color: var(--brique); margin: 0; }
.weak-next::after { content: " ↓"; }

.plan-lock { position: relative; margin-bottom: 2rem; }
.locked-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.locked-steps li { background: var(--blanc); border: 2px solid var(--bleu); border-radius: 10px; padding: 1rem 1.2rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.step-tag { font-family: var(--mono); font-size: .78rem; background: var(--bleu); color: var(--dore); border-radius: 4px; padding: .2rem .5rem; white-space: nowrap; }
.blur { filter: blur(5px); user-select: none; pointer-events: none; }
.blur strong { display: block; margin-bottom: .3rem; }
.blur p { margin: 0; color: var(--texte-doux); font-size: .95rem; }
.unlock {
  position: relative; margin: -3.2rem .8rem 0; padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 1.8rem;
  background: var(--fond); border: 2px solid var(--bleu); border-radius: 12px; box-shadow: 6px 6px 0 var(--brique);
}
.unlock-title { display: flex; align-items: center; gap: .7rem; font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 1.2rem; }
.lock { flex: none; width: 2.2rem; height: 2.2rem; padding: .45rem; border-radius: 8px; background: var(--dore); fill: none; stroke: var(--bleu); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.unlock .form .btn { justify-self: stretch; justify-content: center; }
.result-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; border-top: 2px dashed rgba(5,38,66,.2); padding-top: 1.2rem; }
.result-foot .test-back { margin: 0; }
.result-foot .small-dark { margin: 0; }

@media (max-width: 560px) {
  .scale-labels { font-size: .62rem; }
  .locked-steps li { grid-template-columns: 1fr; gap: .5rem; }
  .unlock { margin: -2.4rem 0 0; }
  .profil-texte p, .weak .weak-text, .first-action p { text-align: left; hyphens: manual; }
  .step-tag { justify-self: start; }
  .blur p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Test : page « C'est envoyé » (mode focus) */
.window-merci { max-width: 1000px; }
.merci-hero { text-align: center; max-width: 42rem; margin: 0 auto 2.8rem; }
.merci-hero .notif { position: static; opacity: 1; animation: none; margin: 0 auto 1.8rem; width: min(340px, 100%); text-align: left; }
.merci-hero .label { margin-bottom: .9rem; }
.merci-hero .test-title { outline: none; }
.merci-hero .test-lead { margin: 0 auto; }
.merci-sous-titre { text-align: center; }
.merci-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; align-items: stretch; }
.merci-card { box-shadow: 4px 4px 0 var(--bleu); display: flex; flex-direction: column; }
.merci-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.3rem 1.2rem 1.5rem; flex: 1; }
.merci-card-body h3 { margin: .2rem 0 0; }
.merci-card-body p { margin: 0; color: var(--texte-doux); font-size: .98rem; }
.merci-card-body .btn { margin-top: auto; }
.merci-card .btn-line { color: var(--bleu); }
.merci-card.is-main { border-color: var(--bleu); box-shadow: 7px 7px 0 var(--brique); background: var(--vanille-2); transform: translateY(-.5rem); }
.merci-card.is-main .window-bar { background: var(--dore); }
.merci-card.is-main .btn { align-self: stretch; justify-content: center; }
.merci-foot { text-align: center; margin: 2.4rem 0 0; font-family: var(--mono); font-size: .82rem; }
.merci-foot a { color: var(--texte-doux); }
.merci-foot a:hover { color: var(--brique); }

@media (max-width: 820px) {
  .merci-cards { grid-template-columns: 1fr; }
  .merci-card.is-main { transform: none; }
}

/* Page 404 */
.page-404 { min-height: 62vh; display: grid; align-items: center; }
.notif.notif-fixe { position: static; opacity: 1; animation: none; margin: 0 auto 2rem; width: min(340px, 100%); text-align: left; }