/* ============================================================
   Quaero — landing page de pré-lancement
   Design tokens repris du handoff (design_handoff_landing_page/README.md)
   ============================================================ */

/* ------------------------------------------------------------
   Polices auto-hébergées
   Fichiers variables, sous-ensemble latin (couvre l'intégralité du
   français, œ et « » compris). Récupérés depuis Google Fonts et servis
   depuis ce domaine : aucune requête vers un tiers, donc aucune adresse
   IP de visiteur transmise à Google.
   Fraunces et Manrope sont sous licence SIL Open Font License 1.1.
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-latin-var.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: 'Fraunces';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-latin-var.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: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-var.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 {
  /* Couleurs */
  --cream: #FBF4EA;
  --cream-deep: #F3E8D8;
  --terracotta: #D97A3E;
  --terracotta-dark: #B85F2B;
  --terracotta-light: #E39A67;
  --sage: #5C8A63;
  --sage-dark: #4A7351;
  --sage-tint: rgba(92, 138, 99, 0.12);
  --sage-tint-strong: rgba(92, 138, 99, 0.14);
  --ink: #2B2420;
  --ink-2: #6B5F54;
  --ink-3: #8A7B6D;
  --placeholder: #A08F80;
  --neutral-light: #C9BBA9;
  --border-soft: rgba(43, 36, 32, 0.09);
  --border: rgba(43, 36, 32, 0.14);

  /* Typo */
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Rayons */
  --r-pill: 999px;
  --r-panel: 24px;
  --r-card: 18px;
  --r-icon: 13px;

  /* Ombres */
  --shadow-card: 0 4px 16px rgba(43, 36, 32, 0.05);
  --shadow-cta: 0 6px 16px rgba(217, 122, 62, 0.35);

  /* Layout */
  --container: 1120px;
  --gutter: 28px;
  --section-gap: 96px;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

a { color: var(--terracotta-dark); }
a:hover { color: var(--terracotta); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: #fff;
  color: var(--terracotta-dark);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-icon) 0;
}
.skip-link:focus {
  left: 0;
}

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.site-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: block;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--terracotta-dark);
  letter-spacing: 0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 16px 26px;
  font-size: 15px;
  font-weight: 600;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.site-nav__link {
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--terracotta-dark); }

.pill--sage {
  background: rgba(92, 138, 99, 0.13);
  color: var(--sage-dark);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------
   Sections génériques
   ------------------------------------------------------------ */

.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section-gap);
}

.section__head {
  max-width: 62ch;
  margin-bottom: 46px;
}

.panel .section__head { margin-bottom: 42px; }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.eyebrow {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.eyebrow--terracotta { color: var(--terracotta-dark); }
.eyebrow--sage { color: var(--sage-dark); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  padding-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 64px;
  align-items: center;
}

.hero__copy { max-width: 560px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage-dark);
  background: var(--sage-tint);
  padding: 7px 15px;
  border-radius: var(--r-pill);
  margin-bottom: 26px;
}

.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  display: inline-block;
  flex: none;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, min(8.6vw, 4.2vw + 20px), 56px);
  line-height: 1.08;
  margin: 0;
}

.hero__title-accent {
  font-style: italic;
  color: var(--terracotta-dark);
}

.hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
  margin: 22px 0 0;
  text-wrap: pretty;
}

/* Formulaire d'inscription */

.signup {
  margin-top: 36px;
  display: flex;
  gap: 10px;
  max-width: 470px;
  flex-wrap: wrap;
}

.signup__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 20px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  background: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(43, 36, 32, 0.05);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.signup__input::placeholder { color: var(--placeholder); }
.signup__input:focus,
.signup__input:focus-visible {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(217, 122, 62, 0.18);
  outline: none;
}

.signup__button {
  padding: 16px 28px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--terracotta);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-cta);
  transition: background 0.15s ease, transform 0.1s ease;
}
.signup__button:hover { background: var(--terracotta-dark); }
.signup__button:active { transform: scale(0.98); }

/* Piège à robots : retiré du flux et de l'écran, sans `display: none`
   que certains robots savent détecter. */
.signup__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signup__success,
.signup__error {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.signup__success { color: var(--sage-dark); }
.signup__error { color: #A8452A; }
.signup__success[hidden],
.signup__error[hidden] { display: none; }

.signup__button:disabled {
  opacity: 0.7;
  cursor: default;
}

.signup__note {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 13px 0 0;
}

/* ------------------------------------------------------------
   Mockup téléphone (décoratif, 100% CSS)
   ------------------------------------------------------------ */

.mockup {
  display: flex;
  justify-content: center;
  position: relative;
}

.mockup__halo {
  position: absolute;
  /* min() : évite que le halo (plus large que la colonne sur mobile)
     ne provoque un débordement horizontal de la page. */
  width: min(400px, 100%);
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 122, 62, 0.10) 0%, rgba(217, 122, 62, 0) 68%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.phone {
  position: relative;
  width: 292px;
  background: var(--ink);
  border-radius: 44px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(43, 36, 32, 0.22), 0 4px 12px rgba(43, 36, 32, 0.12);
  transform: rotate(1.5deg);
}

.phone__screen {
  background: var(--cream);
  border-radius: 35px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}
.status-bar__icons { display: flex; gap: 4px; }
.status-bar__bar {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--neutral-light);
  display: inline-block;
}
.status-bar__bar--wide { width: 14px; }

.search-wrap { padding: 8px 14px 10px; }

.search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 13px;
  box-shadow: 0 2px 8px rgba(43, 36, 32, 0.07);
  font-size: 13px;
  color: var(--placeholder);
  font-weight: 500;
}

/* Carte stylisée */

.map {
  flex: 1;
  position: relative;
  background: var(--cream-deep);
  overflow: hidden;
}

.map__block { position: absolute; }
.map__block--1 {
  top: 18px; left: -20px;
  width: 130px; height: 74px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  transform: rotate(-8deg);
}
.map__block--2 {
  top: 44px; right: -14px;
  width: 110px; height: 90px;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  transform: rotate(6deg);
}
.map__block--3 {
  bottom: 30px; left: 26px;
  width: 96px; height: 64px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  transform: rotate(3deg);
}

.map__road { position: absolute; }
.map__road--v {
  top: 0; bottom: 0; left: 46%;
  width: 12px;
  background: rgba(217, 122, 62, 0.09);
  transform: rotate(14deg);
}
.map__road--h {
  left: 0; right: 0; top: 52%;
  height: 10px;
  background: rgba(217, 122, 62, 0.08);
  transform: rotate(-4deg);
}

.map__pin-pos { position: absolute; }
.map__pin-pos--main { top: 34%; left: 24%; }
.map__pin-pos--alt1 { top: 16%; right: 20%; }
.map__pin-pos--alt2 { bottom: 26%; right: 30%; }

.pin {
  border-radius: 50% 50% 50% 6px;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pin__cross { transform: rotate(45deg); }

.pin--main {
  width: 30px;
  height: 30px;
  background: var(--terracotta);
  box-shadow: 0 4px 10px rgba(184, 95, 43, 0.4);
}
.pin--alt {
  width: 24px;
  height: 24px;
  border-radius: 50% 50% 50% 5px;
  background: var(--terracotta-light);
  box-shadow: 0 3px 8px rgba(184, 95, 43, 0.3);
}

.geoloc {
  position: absolute;
  bottom: 18%;
  left: 38%;
  width: 16px;
  height: 16px;
}
.geoloc__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(92, 138, 99, 0.45);
  animation: qpulse 2s ease-out infinite;
}
.geoloc__dot {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--sage);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(43, 36, 32, 0.25);
}

@keyframes qpulse {
  0%   { transform: scale(1);   opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Carte église */

.church-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  background: #fff;
  border-radius: 14px;
  padding: 13px 15px;
  box-shadow: 0 8px 24px rgba(43, 36, 32, 0.14);
}

.church-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.church-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.church-card__parish {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

.church-card__meta {
  display: flex;
  gap: 7px;
  margin-top: 9px;
  align-items: center;
}

.church-card__badge {
  background: var(--sage-tint-strong);
  color: var(--sage-dark);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--r-pill);
}

.church-card__distance {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}

/* Tab bar */

.tabbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 9px 8px 14px;
  background: var(--cream);
  border-top: 1px solid rgba(43, 36, 32, 0.07);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--ink-3);
}

.tab__label {
  font-size: 8.5px;
  font-weight: 600;
}

.tab--active .tab__label {
  font-weight: 800;
  color: var(--terracotta-dark);
}

.tab__blob {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--terracotta);
  border-radius: var(--r-pill);
  padding: 5px 15px;
}

/* ------------------------------------------------------------
   Comment ça marche
   ------------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: 22px;
}

.step {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
  position: relative;
}

.step__number {
  position: absolute;
  top: 26px;
  right: 26px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  color: rgba(217, 122, 62, 0.45);
}

.step__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-icon);
  background: rgba(217, 122, 62, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 9px;
}

.step__text {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

/* ------------------------------------------------------------
   Nos engagements
   ------------------------------------------------------------ */

.panel {
  background: var(--cream-deep);
  border-radius: var(--r-panel);
  padding: clamp(40px, 6vw, 64px);
}

.pledges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 36px;
}

.pledge__rule {
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--sage);
  margin-bottom: 16px;
}

.pledge__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 10px;
}

.pledge__text {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}

/* ------------------------------------------------------------
   Signature
   ------------------------------------------------------------ */

.signature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.signature__logo {
  width: 168px;
  height: 168px;
  border-radius: 38px;
  display: block;
  box-shadow: 0 24px 48px rgba(43, 36, 32, 0.14);
}

.signature__motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--terracotta-dark);
  margin: 30px 0 0;
}

.signature__note {
  font-size: 15.5px;
  color: var(--ink-2);
  margin: 10px 0 0;
  max-width: 42ch;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid rgba(43, 36, 32, 0.1);
}

.site-footer__row {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.site-footer__row--bottom {
  padding: 0 var(--gutter) 40px;
}

.brand__logo--footer {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.brand__word--footer { font-size: 16px; }

.footer-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}

.footer-nav__link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s ease;
}
.footer-nav__link:hover { color: var(--terracotta-dark); }

.social {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.social__link {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s ease;
}
.social__link:hover { color: var(--terracotta-dark); }

.site-footer__copy {
  font-size: 13px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------
   Mouvement réduit
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .geoloc__pulse { display: none; }
}

/* ------------------------------------------------------------
   Pages légales (mentions légales, confidentialité)
   ------------------------------------------------------------ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px var(--gutter) var(--section-gap);
}

.legal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.15;
  margin: 0 0 10px;
  text-wrap: balance;
}

.legal__updated {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 8px;
}

.legal__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 24px 0 0;
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  margin: 44px 0 12px;
}

.legal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 26px 0 8px;
}

.legal p,
.legal li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.legal p { margin: 0 0 14px; }

.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }

.legal a { color: var(--terracotta-dark); }

.legal dl { margin: 0 0 14px; }
.legal dt {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 14px;
}
.legal dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* Marqueur des informations restant à fournir avant mise en ligne.
   Repérable d'un coup d'œil, et greppable via "À COMPLÉTER". */
.todo {
  background: rgba(217, 122, 62, 0.16);
  color: var(--terracotta-dark);
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.legal__back {
  display: inline-block;
  margin-top: 48px;
  font-size: 15px;
  font-weight: 600;
  color: var(--terracotta-dark);
  text-decoration: none;
}
.legal__back:hover { text-decoration: underline; }

.legal__callout {
  background: var(--cream-deep);
  border-radius: var(--r-card);
  padding: 22px 26px;
  margin: 28px 0;
}
.legal__callout p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Page de confirmation d'inscription (retour du double opt-in)
   ------------------------------------------------------------ */

.confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 40px;
}

.confirmation__badge { margin: 30px 0 0; }

.confirmation__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  margin: 18px 0 0;
  max-width: 20ch;
  text-wrap: balance;
}

.confirmation__text {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 20px 0 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.confirmation__note {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 16px 0 0;
  max-width: 52ch;
}

.confirmation__cta {
  margin-top: 34px;
  padding: 16px 28px;
  border-radius: var(--r-pill);
  background: var(--terracotta);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: var(--shadow-cta);
  transition: background 0.15s ease, transform 0.1s ease;
}
.confirmation__cta:hover { background: var(--terracotta-dark); color: #fff; }
.confirmation__cta:active { transform: scale(0.98); }


/* ------------------------------------------------------------
   Mobile — la seule media query de mise en page du site
   ------------------------------------------------------------

   ⚠️ EN FIN DE FEUILLE, ET CE N'EST PAS DU RANGEMENT. Placé plus haut, ce
   bloc perdait face aux règles de base déclarées après lui : à spécificité
   égale, c'est la dernière qui gagne. `.signature__motto` gardait ainsi sa
   taille de 22 px alors que la media query en demandait une plus petite —
   et seul `white-space`, absent de la règle de base, passait. Constaté le
   31/08/2026. Toute nouvelle surcharge mobile vient ICI. */
/* ⚠️ LA SEULE MEDIA QUERY DE MISE EN PAGE DU SITE, et elle contredit le
   handoff, qui annonçait « aucune media query nécessaire ». C'est justement
   cette règle qui produisait le défaut : sous ~600 px, le `flex-wrap` de
   `.site-nav` n'a plus rien à répartir et empile ses trois éléments sur
   TROIS LIGNES alignées à droite. L'en-tête montait à 158 px de haut pour
   375 px de large — dont 106 pour la seule navigation —, le logo flottant à
   côté d'une colonne de texte. Mesuré le 31/08/2026.

   Les deux liens d'ancre disparaissent ; le logo et la pilule tiennent alors
   sur une ligne. Rien n'est perdu : ces liens mènent à des sections situées
   un écran plus bas sur une page qui en fait cinq, et qu'on atteint en
   faisant défiler. La pilule reste parce qu'elle informe (« iOS & Android »)
   au lieu de naviguer.

   ⚠️ `display: none` et non un masquage visuel : un lien caché mais toujours
   atteignable au clavier ou par un lecteur d'écran est pire que pas de lien.
   Les sections restent accessibles par leurs titres, qui sont de vrais
   `<h2>`. */
@media (max-width: 600px) {
  .site-nav__link {
    display: none;
  }

  /* ⚠️ Le pied de page se CENTRE sous ce seuil, au lieu de rester en
     `space-between`. Mesuré le 31/08/2026 sur un vrai téléphone : les trois
     liens font 260 px, plus 52 px d'écarts, soit 312 px pour 304 disponibles
     sur un écran de 360 px — « Contact » tombait donc seul sur une troisième
     ligne, sous une marque déjà passée à la ligne. Quatre lignes ragées,
     alignées à gauche, qui ne ressemblaient pas à un choix.

     Deux gestes, pas un : réduire l'écart fait tenir les trois liens sur une
     ligne, et centrer donne au pied de page une forme délibérée plutôt qu'un
     empilement de restes. L'un sans l'autre ne suffit pas. */
  .site-footer__row {
    justify-content: center;
    text-align: center;
  }

  .footer-nav,
  .social {
    justify-content: center;
    gap: 16px;
  }

  /* La mention de copyright passe SOUS les icônes sociales, centrée. Côte à
     côte, l'ensemble se lisait mal : « … 𝕏 © 2026 Quaero » colle la mention
     à la dernière icône, et rien ne dit que ce sont deux choses distinctes.
     La largeur ne manquait pas — c'est la lecture qui souffrait. */
  .site-footer__row--bottom {
    flex-direction: column;
    align-items: center;
  }

  /* ⚠️ La devise tient sur UNE ligne, et sa taille est calculée pour ça.
     Elle mesure ~14,6 fois sa taille de police en largeur : à 22 px elle
     réclamait 322 px pour 319 disponibles sur un écran de 375 px. Elle ratait
     de trois pixels, et se coupait donc en « … « je » / « cherche » ».

     D'où `calc(6.8vw - 4px)` : la largeur disponible vaut `100vw - 56px` de
     marges, divisée par 14,6. Le plancher de 15 px la garde lisible et sans
     débordement jusqu'à ~280 px de large.

     ⚠️ `nowrap` et taille calculée vont ENSEMBLE. Retirer le calcul en
     gardant `nowrap` produirait un débordement horizontal de la page. */
  .signature__motto {
    white-space: nowrap;
    font-size: clamp(15px, calc(6.8vw - 4px), 28px);
  }
}