/* Franvia — site vitrine public. Aucune dépendance, aucune requête sortante. */

:root {
  --terra: #c13a1e;
  --terra-sq: #db4c2c;
  --terra-deep: #8f2a13;
  --ink: #1a1826;
  --muted: #54506a;
  --paper: #faf6f2;
  --paper-2: #f2e9e2;
  --line: #e3d6cc;
  --ok: #2f7d5b;
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  /* La barre haute est collante : sans ce décalage, l'aimantation cale le haut
     de section SOUS la barre et masque le sur-titre. */
  scroll-padding-top: 76px;
}

body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

/* ---------- layout ---------- */

.wrap {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

.section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

/* ---------- typography ---------- */

.kicker {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 16px;
}

h1 {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h2 {
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 800;
  max-width: 22ch;
  text-wrap: balance;
}

.lead {
  font-size: clamp(17px, 2.2vw, 23px);
  color: var(--muted);
  max-width: 46ch;
  margin-top: 14px;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.brand img {
  height: 40px;
  width: 40px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brand-tag {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

/* Sous 620px, la barre garde le nom seul : le moto passerait sur deux lignes
   et pousserait le bouton « Se connecter » hors de l'écran. */
@media (max-width: 620px) {
  .brand-tag {
    display: none;
  }

  .brand img {
    height: 34px;
    width: 34px;
  }
}

.login {
  position: relative;
}

.login > summary {
  list-style: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  white-space: nowrap;
}

.login > summary::-webkit-details-marker {
  display: none;
}

.login[open] > summary {
  color: var(--ink);
  border-color: var(--terra);
}

.login-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(26, 24, 38, 0.35);
  list-style: none;
  padding: 6px;
}

.login-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.login-menu a span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}

.login-menu a:hover,
.login-menu a:focus-visible {
  background: var(--paper-2);
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(40px, 7vw, 88px);
}

.hero h1 {
  max-width: 18ch;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero-note {
  font-size: 14.5px;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.cta {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  border-radius: 12px;
  padding: 14px 24px;
  text-decoration: none;
  background: var(--terra);
  color: #fff;
}

.cta:hover {
  background: var(--terra-deep);
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
}

.card h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.card p {
  font-size: 15.5px;
  color: var(--muted);
}

.card .who {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 6px;
  display: block;
}

/* ---------- problem ---------- */

.problem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  align-items: start;
  margin-top: 32px;
}

.soup-label {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  max-width: 20ch;
}

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.chips li {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 14px;
}

.pains {
  list-style: none;
  display: grid;
  gap: 18px;
}

.pains li {
  border-left: 3px solid var(--terra);
  padding-left: 16px;
}

.pains strong {
  display: block;
  font-size: 18px;
}

.pains span {
  font-size: 15.5px;
  color: var(--muted);
}

.closing {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 600;
}

/* ---------- schema ---------- */

.schema,
.schema ul {
  list-style: none;
}

.schema {
  margin-top: 32px;
}

.schema ul {
  margin-top: 12px;
  padding-left: clamp(14px, 3vw, 44px);
  border-left: 1px dashed var(--line);
}

.node {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: clamp(15px, 2vw, 17px);
}

.node-brand {
  border-color: var(--terra);
}

.node-leaf {
  font-weight: 600;
  color: var(--muted);
}

.lvl {
  display: inline-block;
  min-width: 92px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
}

.aside {
  margin-top: 22px;
  border: 1.5px dashed var(--terra);
  border-radius: 13px;
  padding: 14px 18px;
  font-size: 15.5px;
  color: var(--muted);
}

/* ---------- pages de texte ---------- */

/* `.section` centre verticalement en flex ; sur une page plus haute que
   l'écran, le haut du contenu deviendrait inatteignable. Les pages de texte
   s'alignent donc en haut. Spécificité 0,2,0 : l'emporte sur `.section` quel
   que soit l'ordre. */
.section.page {
  align-items: flex-start;
  padding-top: clamp(40px, 6vw, 72px);
}

.prose {
  max-width: 72ch;
}

.prose h1 {
  font-size: clamp(30px, 5vw, 46px);
  margin-bottom: 8px;
}

.prose h2 {
  font-size: clamp(19px, 2.4vw, 23px);
  max-width: none;
  margin-top: 36px;
  margin-bottom: 10px;
}

.prose p {
  color: var(--muted);
  font-size: 16.5px;
}

.prose p + p {
  margin-top: 12px;
}

.prose a {
  color: var(--terra);
}

.lead-prose {
  font-size: 18px;
  border-left: 3px solid var(--terra);
  padding-left: 16px;
  margin-top: 20px;
}

.note {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 15.5px;
}

/* Marqueur visible : une donnée légale manquante ne doit jamais passer
   inaperçue avant la mise en ligne. */
.todo {
  background: #ffe9a8;
  color: #6b4b00;
  padding: 1px 7px;
  border-radius: 6px;
  font-weight: 700;
}

.back {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  white-space: nowrap;
}

.back-link {
  margin-top: 40px;
  font-weight: 700;
}

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  background: var(--paper-2);
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}

.footer p,
.footer a {
  font-size: 14.5px;
  color: var(--muted);
}

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

/* ---------- sections plein écran ----------
   Pas d'aimantation : le scroll-snap `mandatory` donne une sensation de lutte,
   et le forcer en JS selon la direction du geste (scrolljacking) casserait le
   clavier, l'inertie du trackpad et l'usage sans JavaScript. On garde
   seulement le rythme « une section = un écran », et on offre la navigation
   explicite via les liens ↑ / ↓ (.pager), qui sont de simples ancres.
   Uniquement sur écran large ET assez haut : ailleurs, une section plein écran
   tronquerait le contenu. */

@media (min-width: 900px) and (min-height: 620px) {
  .section {
    min-height: calc(100dvh - 76px);
    display: flex;
    align-items: center;
  }

  .section > .wrap {
    width: min(1120px, 92vw);
  }
}

/* ---------- pager ↑ / ↓ ---------- */

.pager {
  display: none;
  gap: 8px;
  position: absolute;
  right: max(16px, calc((100vw - 1120px) / 2 - 56px));
  bottom: 28px;
}

.pager a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--terra);
  text-decoration: none;
  font-size: 19px;
  line-height: 1;
}

.pager a:hover {
  border-color: var(--terra);
  background: var(--paper-2);
}

.section {
  position: relative;
}

/* Le pager n'a de sens que là où une section = un écran. Cette règle doit
   rester APRÈS `.pager { display: none }` : même spécificité, la dernière
   déclarée l'emporte. */
@media (min-width: 900px) and (min-height: 620px) {
  .pager {
    display: flex;
  }
}

/* ---------- révélation au défilement ----------
   Animations pilotées par le défilement, sans JavaScript. `@supports` protège
   les navigateurs qui ne connaissent pas encore `animation-timeline` : chez
   eux, rien ne s'anime et tout reste visible. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .card,
    .pains li,
    .node,
    .chips li,
    .aside,
    .closing {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 30%;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- focus ---------- */

a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--terra-deep);
  outline-offset: 3px;
}