/* Tallia, vitrine. Chaque valeur de ce fichier vient de DESIGN-SYSTEM.md.
   Les couleurs sont celles de src/ui/tokens.ts, a l'identique: le site et le produit sont la meme chose.
   Aucune couleur, taille, marge, rayon ou ombre en dur hors de :root.
   style.css reste pour les pages NL et legal, jusqu'a leur passage sur ce systeme. */

@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/wix-madefor-display-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: 'Wix Madefor Display';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/wix-madefor-display-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('fonts/chivo-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 {
  /* Palette (DESIGN-SYSTEM.md, section 1) */
  --canard: #0c5c68;
  --nuit: #073f48;
  --halo-1: #0e8296;
  --halo-2: #4fc5b0;
  --fond: #fbfcfc;
  --creux: #f1f6f7;
  --blanc: #ffffff;
  --encre: #04191c;
  --gris: #4f686c;
  --filet: #dfeaec;
  --eau: #dcf2f3;
  --manque: #d63b33;
  --verifier: #8a5a0b;
  --recu: #0a7350;

  /* Typographie (section 2) */
  --f-texte: 'Wix Madefor Display', 'Helvetica Neue', Arial, sans-serif;
  --f-chiffre: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --t-titre: clamp(40px, 5.4vw, 70px);
  --t-titre-long: clamp(34px, 4.4vw, 58px);
  --t-section: clamp(30px, 3.6vw, 46px);
  --t-bloc: 22px;
  --t-chapeau: clamp(19px, 1.5vw, 22px);
  --t-texte: 18px;
  --t-petit: 15px;
  --t-micro: 13px;
  --t-chiffre: clamp(44px, 5vw, 64px);
  --t-controle: 17px;

  /* Espacements (section 3) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;
  --e8: 64px;
  --e9: 96px;
  --section: clamp(72px, 10vw, 128px);

  /* Rayons, ombres, grille (section 4) */
  --r-plaque: 6px;
  --r-controle: 10px;
  --r-carte: 16px;
  --r-image: 20px;
  --r-pastille: 999px;
  --o-pose: 0 1px 2px rgb(4 25 28 / 6%), 0 4px 14px rgb(4 25 28 / 6%);
  --o-flotte: 0 2px 6px rgb(4 25 28 / 6%), 0 24px 60px -18px rgb(7 63 72 / 32%);
  --largeur: 1200px;
  --gouttiere: clamp(20px, 4vw, 40px);
  --duree: 150ms;

  /* Traits et mesures d'objets (section 4) */
  --trait: 1px;
  --trait-fort: 2px;
  --anneau: 3px;
  --decale: 2px;
  --puce: 10px;
  --tiret: 16px;
  --i-coche: 20px;
  --i-pictogramme: 32px;
  --cible: 44px;
  --controle: 52px;
  --l-fiche: 400px;
  --l-brouillon: 560px;
  --l-trajet: 300px;
  --l-sommaire: 320px;
  --l-capture: 925px;
  --halo: 500px;
  --flou: 80px;
  --voile: rgb(4 25 28 / 45%);
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 var(--t-texte) / 1.6 var(--f-texte);
  -webkit-font-smoothing: antialiased;
  /* A bare URL in the legal text (myaccount.google.com/permissions) pushed /legal to 416 px at 390 (04/10): break only a token wider than its line. */
  overflow-wrap: break-word;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: var(--canard);
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: var(--anneau) solid var(--canard);
  outline-offset: var(--decale);
  border-radius: var(--r-plaque);
}
:where(.nuit, .encre) :focus-visible {
  outline-color: var(--halo-2);
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: var(--t-titre);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 16ch;
}
/* Titre de l'accueil: une phrase de soixante signes, donc un corps plus petit sur une mesure plus large.
   Il a defile entre trois promesses du 28/09 au 11/10; un titre qui change est ignore comme une banniere,
   et seul le premier existait pour un lecteur d'ecran. */
h1.long {
  max-width: 20ch;
  font-size: var(--t-titre-long);
}
h2 {
  font-size: var(--t-section);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  max-width: 22ch;
}
h3 {
  font-size: var(--t-bloc);
  line-height: 1.25;
  font-weight: 700;
}
p {
  margin: 0;
  max-width: 62ch;
  text-wrap: pretty;
}
.chapeau {
  font-size: var(--t-chapeau);
  line-height: 1.5;
  color: var(--gris);
  max-width: 54ch;
  margin-top: var(--e5);
}
:where(.nuit, .encre) .chapeau {
  color: var(--eau);
}
.saut {
  position: absolute;
  left: var(--e2);
  top: calc(-1 * var(--e9));
  background: var(--canard);
  color: var(--blanc);
  padding: var(--e3) var(--e4);
  z-index: 10;
}
.saut:focus {
  top: var(--e2);
}
.bande {
  max-width: calc(var(--largeur) + 2 * var(--gouttiere));
  margin: 0 auto;
  padding-inline: var(--gouttiere);
}
@media (max-width: 599px) {
  body {
    font-size: var(--t-controle);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* Sections (section 5) */

section {
  padding-block: var(--section);
}
.creux {
  background: var(--creux);
}
.nuit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nuit);
  color: var(--blanc);
}
.nuit::before,
.nuit::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  width: var(--halo);
  height: calc(var(--halo) * 0.8);
  filter: blur(var(--flou));
}
.nuit::before {
  left: calc(var(--halo) * -0.3);
  top: calc(var(--halo) * -0.4);
  background: var(--halo-1);
  opacity: 0.55;
}
.nuit::after {
  right: calc(var(--halo) * -0.3);
  bottom: calc(var(--halo) * -0.45);
  background: var(--halo-2);
  opacity: 0.3;
}
.encre {
  background: var(--encre);
  color: var(--eau);
}
:where(.nuit, .encre) :where(p, li) {
  color: var(--eau);
}
:where(.nuit, .encre) :where(h2, h3) {
  color: var(--blanc);
}
:where(.nuit, .encre) a {
  color: var(--blanc);
}
.entete-section {
  display: grid;
  gap: 0;
}

/* Boutons et liens d'action */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--controle);
  padding: 0 var(--e5);
  border: 0;
  border-radius: var(--r-controle);
  background: var(--canard);
  color: var(--blanc);
  font: 600 var(--t-controle) / 1.2 var(--f-texte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duree);
  touch-action: manipulation;
}
.bouton:hover {
  background: var(--nuit);
}
.bouton.clair {
  background: var(--blanc);
  color: var(--nuit);
}
.bouton.clair:hover {
  background: var(--eau);
}
/* The header button: at 320 px, brand + Menu + "Demander une démo" on one line
   need ~350 px for 280 available (scrollWidth 358, 339 in NL), so it may wrap
   on two lines instead of pushing the page sideways. */
.bouton.petit {
  min-height: var(--cible);
  padding: 0 var(--e4);
  font-size: var(--t-petit);
  white-space: normal;
  text-align: center;
  text-wrap: balance;
}
.lien-tel {
  font-family: var(--f-chiffre);
  font-weight: 600;
  white-space: nowrap;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e5);
  margin-top: var(--e6);
}
.actions p {
  color: var(--gris);
  font-size: var(--t-petit);
}
:where(.nuit) .actions p {
  color: var(--eau);
}

/* En-tete */

.entete {
  position: relative;
  border-bottom: var(--trait) solid var(--filet);
  background: var(--fond);
}
.entete .bande {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: calc(var(--e8) + var(--e2));
}
.marque {
  margin-right: auto;
  color: var(--encre);
  font-size: var(--t-bloc);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.marque span {
  color: var(--halo-1);
}
.entete nav {
  display: none;
  gap: var(--e5);
}
.entete nav a,
.langues a {
  color: var(--gris);
  font-size: var(--t-petit);
  text-decoration: none;
}
.entete nav a:hover,
.langues a:hover {
  color: var(--encre);
  text-decoration: underline;
}
.entete .lien-tel {
  display: none;
  color: var(--canard);
  font-size: var(--t-petit);
  text-decoration: none;
}
.langues {
  display: none;
  gap: var(--e2);
  margin: 0;
}
.langues a {
  display: inline-grid;
  place-items: center;
  min-width: var(--cible);
  min-height: var(--cible);
}
.langues a[aria-current] {
  color: var(--encre);
  font-weight: 700;
}
.menu summary {
  display: inline-grid;
  place-items: center;
  min-height: var(--cible);
  padding: 0 var(--e4);
  border: var(--trait) solid var(--filet);
  border-radius: var(--r-controle);
  font-size: var(--t-petit);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker {
  display: none;
}
.menu[open] summary {
  border-color: var(--eau);
  background: var(--eau);
}
.menu div {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  display: grid;
  padding: var(--e2) var(--gouttiere) var(--e5);
  border-bottom: var(--trait) solid var(--filet);
  background: var(--fond);
  box-shadow: var(--o-pose);
}
.menu div a {
  display: flex;
  align-items: center;
  min-height: var(--controle);
  border-top: var(--trait) solid var(--filet);
  color: var(--encre);
  font-size: var(--t-controle);
  text-decoration: none;
}
.menu div a:first-child {
  border-top: 0;
}
/* Le voile sous le menu ouvert: la page dessous ne doit pas se lire a moitie */
.menu div::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 100vh;
  background: var(--voile);
  pointer-events: none;
}
@media (min-width: 600px) {
  .langues {
    display: flex;
  }
  .menu .menu-nl {
    display: none;
  }
}
@media (min-width: 960px) {
  .entete .bande {
    gap: var(--e5);
  }
  .entete nav {
    display: flex;
  }
  .menu {
    display: none;
  }
}
@media (min-width: 1200px) {
  .entete .lien-tel {
    display: inline;
  }
}

/* Premier ecran */

.ouverture {
  padding-block: var(--e8) var(--section);
}
.ouverture .bande {
  display: grid;
  gap: var(--e8);
}
.atouts {
  display: flex;
  flex-direction: column;
  gap: var(--e3) var(--e5);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
  color: var(--gris);
  font-size: var(--t-petit);
}
.atouts li {
  display: flex;
  align-items: center;
  gap: var(--e2);
}
.atouts svg {
  width: var(--i-coche);
  height: var(--i-coche);
  flex: none;
  color: var(--canard);
}
/* La promesse de la demo, une seule fois, a cote du formulaire ou du dernier bouton (11/10): --canard sur --nuit
   ne se voit pas (1,4:1), --halo-2 y fait 5,5:1. */
:where(.nuit) .atouts svg {
  color: var(--halo-2);
}
.visuel {
  position: relative;
}
.visuel .photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-image);
}
@media (min-width: 960px) {
  .ouverture .bande {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: center;
  }
  .visuel {
    padding-bottom: var(--e7);
  }
  .visuel .photo {
    aspect-ratio: 5 / 6;
  }
}

/* La fiche de dossier: l'element memorable, un seul par page */

.fiche {
  position: relative;
  max-width: var(--l-fiche);
  margin: calc(-1 * var(--e8)) var(--e4) 0;
  overflow: hidden;
  border-radius: var(--r-carte);
  background: var(--blanc);
  box-shadow: var(--o-flotte);
}
@media (min-width: 960px) {
  .fiche {
    position: absolute;
    left: calc(-1 * var(--e7));
    bottom: 0;
    width: var(--l-fiche);
    margin: 0;
  }
}
/* Sans photo derriere elle (pages comptables et syndics, 11/10): la fiche tient seule sa colonne, a la largeur
   du brouillon. La photo « bureau-courtage-matin » n'apprenait rien sur ces deux metiers. */
.fiche.grande {
  position: relative;
  /* The 960 px rule above sets left: -48px for the photo overlap; under position: relative it pushed this fiche
     48 px out of its column into the gap (measured 14/10 at 1440 and 1024). */
  inset: auto;
  width: auto;
  max-width: var(--l-brouillon);
  margin: 0;
}
.fiche-tete {
  padding: var(--e4) var(--e5);
  background: var(--nuit);
  color: var(--blanc);
  display: grid;
  gap: 0 var(--e3);
}
.fiche-tete b {
  font-size: var(--t-bloc);
  font-weight: 800;
}
.fiche-tete span {
  color: var(--eau);
  font-size: var(--t-petit);
}
/* Le compteur des pieces en defaut: il remplace la phrase qui les comptait sous la fiche (11/10), et
   « Deux pièces manquent. » dans la liste des dossiers des pages metier.
   Blanc sur --manque: 4,63:1, le meme rapport que --manque sur blanc dans les lignes. */
/* Deux classes dans chaque selecteur: .fiche-tete span et .lignes li pesent plus qu'une seule et rendaient au
   compteur le --eau ou le gris du texte voisin (4,0:1 sur --manque, mesure le 11/10). */
.fiche-tete .compte {
  justify-self: start;
  margin-top: var(--e2);
}
.fiche-tete .compte,
.lignes .compte {
  padding: var(--e1) var(--e3);
  border-radius: var(--r-pastille);
  background: var(--manque);
  color: var(--blanc);
  font: 700 var(--t-petit) / 1.4 var(--f-chiffre);
  white-space: nowrap;
}
/* A droite du titre des que la fiche a sa largeur: a 390, « Autofinanciering » plus le compteur sur une ligne
   poussaient la page a 423 px (445 pour « Aangifte personenbelasting »). */
@media (min-width: 600px) {
  .fiche-tete {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
  .fiche-tete span {
    grid-column: 1 / -1;
  }
  .fiche-tete .compte {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
}
.fiche ul {
  margin: 0;
  padding: var(--e2) var(--e5);
  list-style: none;
}
.fiche li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--e1) var(--e3);
  padding-block: var(--e3);
  border-top: var(--trait) solid var(--filet);
}
.fiche li:first-child {
  border-top: 0;
}
.fiche li b {
  font-size: var(--t-controle);
}
.fiche li > span:not(.etat) {
  grid-column: 2 / 4;
  color: var(--gris);
  font-size: var(--t-petit);
  line-height: 1.45;
}
.point {
  width: var(--puce);
  height: var(--puce);
  border-radius: var(--r-pastille);
  background: var(--recu);
}
.point.manque {
  background: var(--manque);
}
.etat {
  font: 700 var(--t-petit) / 1 var(--f-texte);
  color: var(--recu);
}
.etat.manque {
  color: var(--manque);
}
.fiche-pied {
  padding: var(--e4) var(--e5);
  background: var(--eau);
  font-weight: 700;
}
/* Sous 600 px, un titre de piece qui passe a la ligne ne doit pas laisser son etat accroche au premier mot */
@media (max-width: 599px) {
  .fiche li {
    grid-template-columns: auto 1fr;
  }
  .fiche li > span {
    grid-column: 2;
  }
}
.plaque {
  padding: var(--trait) var(--e2);
  border-radius: var(--r-plaque);
  background: var(--eau);
  color: var(--encre);
  font: 600 0.92em var(--f-chiffre);
  white-space: nowrap;
}

/* Le probleme */

.probleme .bande {
  display: grid;
  gap: var(--e7);
}
@media (min-width: 960px) {
  .probleme .bande {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: var(--e8);
  }
}

/* The timeline (11/10): a sequence whose order is real, drawn like the mail's path (.trajet): dots of --puce on a
   line of --trait-fort. It replaces the prose story of the problem and the "what happens next" list of the demo.
   Always vertical, so nothing switches between 390 and 1440. */
.frise {
  --frise-trait: var(--canard);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
:where(.nuit) .frise {
  --frise-trait: var(--halo-2);
}
.frise > li {
  position: relative;
  padding: 0 0 var(--e5) var(--e6);
}
:where(.nuit) .frise > li {
  color: var(--blanc);
}
.frise > li:last-child {
  padding-bottom: 0;
}
.frise > li::before,
.frise > li::after {
  content: '';
  position: absolute;
  background: var(--frise-trait);
}
/* 0.8em is the middle of the first line (line-height 1.6): the dot sits on it, the line runs to the next dot. */
.frise > li::before {
  left: 0;
  top: calc(0.8em - var(--puce) / 2);
  width: var(--puce);
  height: var(--puce);
  border-radius: var(--r-pastille);
}
.frise > li::after {
  left: calc((var(--puce) - var(--trait-fort)) / 2);
  top: 0.8em;
  bottom: -0.8em;
  width: var(--trait-fort);
}
.frise > li:last-child::after {
  content: none;
}
/* The requests stuck at a step: one folder each, never scaled (height fixed, width from the viewBox). */
.attente {
  width: auto;
  height: var(--e6);
  margin-top: var(--e2);
  color: var(--gris);
}
.frise .atouts {
  margin-top: var(--e3);
  font-weight: 400;
}

/* Comment ca marche: une vraie sequence, donc numerotee */

.etapes {
  display: grid;
  gap: var(--e8);
  margin: var(--e8) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.etape {
  display: grid;
  gap: var(--e6);
  align-items: center;
  counter-increment: etape;
}
.etape-texte::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: var(--e7);
  height: var(--e7);
  margin-bottom: var(--e5);
  border-radius: var(--r-pastille);
  background: var(--eau);
  color: var(--canard);
  font: 800 var(--t-bloc) / 1 var(--f-chiffre);
}
.etape-texte p {
  margin-top: var(--e3);
  color: var(--gris);
}
.etape-visuel {
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--e6) var(--e4);
  border-radius: var(--r-image);
  background: var(--creux);
}
.capture {
  border: var(--trait) solid var(--filet);
  border-radius: var(--r-carte);
  box-shadow: var(--o-pose);
}
figcaption {
  margin-top: var(--e3);
  color: var(--gris);
  font-size: var(--t-petit);
  max-width: 62ch;
}
/* « Maquette », un mot, sous le coin droit de la carte dessinee (elle a au plus --l-brouillon de large):
   l'aveu reste, la legende qui redisait l'etape est partie (11/10). */
.etape-visuel figcaption {
  width: 100%;
  max-width: var(--l-brouillon);
  text-align: right;
}
/* A capture is narrower than a card (panneau-dossier.webp, 320 px): its caption ended 120 px past the image at
   768 (measured 14/10). Here the track shrinks to the image, and width 0 plus min-width 100% keeps a long NL
   caption from widening it. Scoped to captures: on cards the same track shrank the lists to their text. */
.etape-visuel:has(> .capture) {
  grid-template-columns: fit-content(100%);
  justify-content: center;
}
.etape-visuel:has(> .capture) figcaption {
  width: 0;
  min-width: 100%;
}
@media (min-width: 960px) {
  .etape {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--e8);
  }
  .etape:nth-child(even) .etape-texte {
    order: 2;
  }
  .etape-visuel {
    padding: var(--e7);
  }
}
.preuve {
  margin: var(--e9) auto 0;
  max-width: var(--l-capture);
}
.preuve img {
  width: 100%;
}
/* Une capture d'ecran de bureau ne se lit pas a 350 px: sous 600 px on ne la montre pas,
   la fiche du premier ecran et la carte de reponse portent deja le meme propos. */
@media (max-width: 599px) {
  .ecran {
    display: none;
  }
}
.brouillon {
  width: 100%;
  max-width: var(--l-brouillon);
  overflow: hidden;
  border: var(--trait-fort) solid var(--canard);
  border-radius: var(--r-carte);
  background: var(--blanc);
  box-shadow: var(--o-pose);
}
.brouillon-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--e1) var(--e4);
  max-width: none;
  padding: var(--e3) var(--e5);
  background: var(--eau);
  font-size: var(--t-petit);
}
.brouillon-tete b {
  color: var(--nuit);
}
.brouillon-tete span {
  color: var(--gris);
}
.brouillon-corps {
  display: grid;
  gap: var(--e4);
  padding: var(--e5);
  font-size: var(--t-petit);
}

/* Les maquettes des pages metier (11/10): du HTML dans la carte .brouillon, a la place des trois photos
   d'ambiance et des phrases qui decrivaient un etat. Tout y est du texte, donc lisible a 390 et par un lecteur
   d'ecran. .lignes: une ligne par dossier, par piece rangee ou par resultat. */
.lignes {
  margin: 0;
  padding: 0 var(--e5);
  list-style: none;
  font-size: var(--t-petit);
}
.lignes li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--e1) var(--e3);
  padding-block: var(--e3);
  border-top: var(--trait) solid var(--filet);
  color: var(--gris);
}
.lignes li:first-child {
  border-top: 0;
}
.lignes li > :not(b, .jours) {
  grid-column: 1 / -1;
}
.lignes li > b {
  color: var(--encre);
}
/* Le nombre de jours, en chiffres alignes a droite: la colonne se compare d'un coup d'oeil. */
.jours {
  text-align: right;
}
.jours b {
  color: var(--encre);
  font: 700 var(--t-controle) / 1 var(--f-chiffre);
  font-variant-numeric: tabular-nums;
}
.etats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e3);
  margin-top: var(--e1);
}
/* A qui de jouer: un point plein et --canard quand c'est au bureau, un anneau gris quand on attend le client.
   La forme change avec la couleur, et le mot est toujours ecrit (DESIGN-SYSTEM.md, section 0). */
.tour {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  color: var(--canard);
  font-weight: 700;
}
.tour::before {
  content: '';
  width: var(--puce);
  height: var(--puce);
  border: var(--trait-fort) solid currentColor;
  border-radius: var(--r-pastille);
  background: currentColor;
}
.tour.attend {
  color: var(--gris);
  font-weight: 400;
}
.tour.attend::before {
  background: none;
}
/* Le mail recu, ses pieces jointes, puis la fiche ou Tallia les a rangees: toujours en colonne, comme .trajet. */
.rangement {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  width: 100%;
  max-width: var(--l-brouillon);
}
.rangement .brouillon:first-child {
  border: var(--trait) solid var(--gris);
  box-shadow: none;
}
.rangement .brouillon:first-child .brouillon-tete {
  background: var(--creux);
}
.jointes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin: 0;
  padding: var(--e4) var(--e5);
  list-style: none;
  font-size: var(--t-petit);
}
.jointes li {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e1) var(--e3);
  border: var(--trait) solid var(--filet);
  border-radius: var(--r-plaque);
  color: var(--gris);
}
:is(.jointes, .requete, .rangement) svg {
  flex: none;
  width: var(--i-coche);
  height: var(--i-coche);
  color: var(--canard);
}
/* Le champ de recherche de la maquette: un champ, pas un controle (rien ne s'y tape). */
.requete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  max-width: none;
  min-height: var(--cible);
  margin: var(--e4) var(--e5) var(--e2);
  padding: 0 var(--e4);
  border: var(--trait-fort) solid var(--gris);
  border-radius: var(--r-controle);
  font-size: var(--t-petit);
}
/* Le bouton d'Outlook sous le brouillon, dessine eteint, et la main de qui clique: l'etape 3 montre que
   l'envoi est le geste du bureau sans le redire (la garantie s'ecrit une fois, sous « Elle n'envoie rien »). */
.envoi {
  display: flex;
  align-items: flex-end;
  max-width: none;
  padding: var(--e4) var(--e5);
  border-top: var(--trait) solid var(--filet);
  font-size: var(--t-petit);
}
.envoi span {
  display: inline-grid;
  place-items: center;
  min-height: var(--cible);
  padding: 0 var(--e5);
  border: var(--trait) solid var(--gris);
  border-radius: var(--r-controle);
  background: var(--creux);
  color: var(--gris);
  font-weight: 600;
}
.envoi svg {
  width: var(--i-pictogramme);
  height: var(--i-pictogramme);
  margin: 0 0 calc(-1 * var(--e2)) calc(-1 * var(--e3));
  fill: var(--blanc);
  color: var(--encre);
}

/* Confiance */

.garanties {
  display: grid;
  gap: var(--e7);
  margin: var(--e7) 0 0;
  padding: 0;
  list-style: none;
}
:where(.nuit) figcaption {
  color: var(--eau);
}
.garanties svg {
  width: var(--i-pictogramme);
  height: var(--i-pictogramme);
  margin-bottom: var(--e4);
  color: var(--halo-2);
}
.garanties p {
  margin-top: var(--e2);
}
/* Quatre garanties depuis le 11/10 (la cinquieme est devenue le titre de la section): deux colonnes, pas trois,
   pour ne laisser aucune orpheline. */
@media (min-width: 600px) {
  .garanties {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e7) var(--e8);
  }
}

/* Le trajet d'un mail (11/10): la seule forme dessinee de « rien ne part sans votre clic », la meme sur
   l'accueil et les pages metier. Un SVG en ligne dessine a sa taille reelle (viewBox de 300, jamais agrandi):
   ses libelles restent a 17 et 15 px a 390 comme a 1440. Le chemin ferme est en tirets, a la couleur du texte:
   le rouge ne dit que « manque » (DESIGN-SYSTEM.md, section 0). */
.clic {
  display: grid;
  align-items: center;
  gap: var(--e7);
}
.trajet {
  --trajet-trait: var(--canard);
  --trajet-second: var(--gris);
  width: 100%;
  max-width: var(--l-trajet);
  color: var(--encre);
}
:where(.nuit) .trajet {
  --trajet-trait: var(--halo-2);
  --trajet-second: var(--eau);
  color: var(--blanc);
}
.faits .trajet {
  margin-top: var(--e5);
}
.trajet path {
  fill: none;
  stroke: var(--trajet-trait);
  stroke-width: var(--trait-fort);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trajet circle {
  fill: var(--trajet-trait);
}
.trajet .ferme {
  stroke: currentColor;
}
.trajet text {
  fill: currentColor;
  font: 600 var(--t-controle) / 1 var(--f-texte);
}
.trajet .vous {
  font-weight: 800;
}
.trajet .barre {
  text-decoration: line-through;
}
.trajet .second {
  fill: var(--trajet-second);
  font-size: var(--t-petit);
  font-weight: 400;
}
@media (min-width: 960px) {
  .clic {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e8);
  }
}

/* Au quotidien: une liste sobre a cote d'une maquette de recherche (17/10, a la place d'une photo), pas une seconde grille d'icones.
   La capture de recherche (une plaque) a quitte l'accueil le 25/09: vocabulaire d'assurance. */

.quotidien {
  display: grid;
  gap: var(--e7);
  align-items: center;
}
.fonctions {
  margin: var(--e6) 0 0;
}
.fonctions div {
  padding-block: var(--e3);
  border-top: var(--trait) solid var(--filet);
}
.fonctions div:first-child {
  padding-top: 0;
  border-top: 0;
}
.fonctions dt {
  font-weight: 700;
}
.fonctions dd {
  margin: var(--e1) 0 0;
  color: var(--gris);
  font-size: var(--t-petit);
}
/* Deux reperes sur la capture de la fiche client (page courtiers, 11/10), a la place des trois phrases qui la
   commentaient. Ils se posent dans la marge de la capture, a la hauteur de leur ligne: 3,4 % est le milieu de
   cette marge, 38 % et 82 % les deux lignes visees de vrai-client.webp (1850 x 1760). La ligne .repli dit la
   meme chose en mots la ou la capture est masquee (sous 600 px, .ecran), et seulement la. */
.annotee {
  position: relative;
}
.repere {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: var(--e5);
  height: var(--e5);
  border-radius: var(--r-pastille);
  background: var(--canard);
  color: var(--blanc);
  font: 700 var(--t-petit) / 1 var(--f-chiffre);
}
.annotee .repere {
  position: absolute;
  left: 3.4%;
  top: 38%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 var(--trait-fort) var(--blanc);
}
.annotee .repere + .repere {
  top: 82%;
}
.reperes {
  display: grid;
  gap: var(--e2);
  margin: var(--e3) 0 0;
  padding: 0;
  list-style: none;
}
.reperes li {
  display: flex;
  gap: var(--e3);
}
@media (min-width: 600px) {
  .fonctions .repli {
    display: none;
  }
}
@media (min-width: 960px) {
  .quotidien {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--e8);
  }
}

/* Tarif */

@media (min-width: 960px) {
  .tarif .bande {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: var(--e8);
  }
  .tarif .photo {
    order: -1;
    aspect-ratio: 4 / 5;
  }
  .prix-carte {
    padding: var(--e7);
  }
}

/* Questions */

.faq .bande {
  display: grid;
  gap: var(--e6);
}
.faq-liste {
  border-bottom: var(--trait) solid var(--filet);
}
.faq details {
  border-top: var(--trait) solid var(--filet);
}
.faq-groupe {
  margin: var(--e7) 0 var(--e3);
  color: var(--canard);
}
.faq-groupe:first-child {
  margin-top: 0;
}
.faq summary {
  position: relative;
  padding: var(--e5) var(--e8) var(--e5) 0;
  font-size: var(--t-chapeau);
  font-weight: 600;
  /* 1.4, not 1.35 (17/10): a question wraps to two or three lines at 390, and 1.35 read as 1.27 to impeccable. */
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::before,
.faq summary::after {
  content: '';
  position: absolute;
  right: var(--e2);
  top: 50%;
  width: var(--tiret);
  height: var(--trait-fort);
  background: var(--canard);
  transition: transform var(--duree);
}
.faq summary::after {
  transform: rotate(90deg);
}
.faq details[open] summary::after {
  transform: rotate(0deg);
}
.faq summary:hover {
  color: var(--canard);
}
.faq details p {
  padding-bottom: var(--e5);
  color: var(--gris);
}
@media (min-width: 960px) {
  .faq .bande {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: var(--e8);
  }
  .faq .entete-section {
    position: sticky;
    top: var(--e6);
  }
}

/* Formulaire */

.demo .bande {
  display: grid;
  gap: var(--e7);
}
.formulaire {
  padding: var(--e6) var(--e5);
  border-radius: var(--r-carte);
  background: var(--blanc);
  box-shadow: var(--o-flotte);
  color: var(--encre);
}
:where(.formulaire) :where(p, li) {
  color: var(--encre);
}
.champ {
  display: grid;
  gap: var(--e2);
  margin-bottom: var(--e5);
}
.champ label {
  font-size: var(--t-petit);
  font-weight: 600;
}
.champ label span {
  color: var(--gris);
  font-weight: 400;
}
.champ input,
.champ textarea {
  width: 100%;
  min-height: var(--controle);
  padding: var(--e3) var(--e4);
  border: var(--trait-fort) solid var(--gris);
  border-radius: var(--r-controle);
  background: var(--blanc);
  color: var(--encre);
  font: 400 var(--t-controle) / 1.4 var(--f-texte);
}
.champ textarea {
  min-height: calc(var(--e9) + var(--e4));
  resize: vertical;
}
.champ input:focus-visible,
.champ textarea:focus-visible {
  border-color: var(--canard);
  outline-offset: var(--decale);
}
.aide {
  color: var(--gris);
  font-size: var(--t-petit);
}
.accord {
  display: grid;
  grid-template-columns: var(--e5) 1fr;
  gap: var(--e3);
  margin: var(--e2) 0 var(--e5);
  font-size: var(--t-petit);
}
.accord input {
  width: var(--i-coche);
  height: var(--i-coche);
  margin: var(--decale) 0 0;
  accent-color: var(--canard);
}
.formulaire .bouton {
  width: 100%;
}
.formulaire a {
  color: var(--canard);
}
.piege {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
@media (min-width: 600px) {
  .deux {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--e4);
  }
  .formulaire {
    padding: var(--e7);
  }
}
@media (min-width: 960px) {
  .demo .bande {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
    gap: var(--e8);
  }
}

/* Pied de page */

.pied {
  border-top: var(--trait-fort) solid var(--halo-2);
  padding-block: var(--e8) var(--e7);
  font-size: var(--t-petit);
}
.pied .bande {
  display: grid;
  gap: var(--e5);
}
.pied .marque {
  color: var(--blanc);
}
.pied ul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pied .legal {
  font-size: var(--t-micro);
}

/* Pages de texte long: mentions legales et vie privee */

.prose h1 {
  max-width: 22ch;
}
/* Deux niveaux depuis le 13/10, donc l'echelle du systeme: H2 en --t-section sur 22ch, H3 en --t-bloc (styles
   de base). Avant, un seul niveau ramene a --t-bloc; avec des H3 a la taille du texte, la hierarchie etait plate.
   Les 22ch comptent: un titre plus large passerait SOUS le sommaire colle (mesure a 1440: 1033 px contre 1000),
   un flottant n'ecartant le texte qu'a sa place d'origine. */
.prose h2 {
  margin: var(--e7) 0 var(--e3);
}
.prose p {
  margin-top: var(--e4);
}
.prose h3 {
  margin-top: var(--e6);
}
.prose :is(h2, h3) {
  scroll-margin-top: var(--e5);
}
/* Sommaire des mentions legales (13/10): 27 ancres pour une page de 28 ecrans de telephone, qui n'en avait que 3
   dans l'en-tete. Dans le flux sous le chapeau, puis colle dans la marge droite des que la bande atteint sa
   largeur (1280 px): a 1200 px, mesure, les listes de 68ch s'arretaient a 9 px du sommaire. Un flottant collant,
   sans script: la page promet qu'elle n'en execute aucun. */
.sommaire {
  margin-top: var(--e6);
  padding-block: var(--e4);
  border-block: var(--trait) solid var(--filet);
  font-size: var(--t-petit);
  line-height: 1.35;
}
.sommaire p {
  margin: 0 0 var(--e2);
  color: var(--encre);
  font-size: var(--t-texte);
  font-weight: 700;
}
.sommaire ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sommaire ul ul {
  padding-left: var(--e4);
}
.sommaire a {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding-block: var(--e1);
  color: var(--encre);
  text-decoration: none;
}
.sommaire ul ul a {
  color: var(--gris);
}
.sommaire a:hover {
  color: var(--canard);
  text-decoration: underline;
}
@media (min-width: 600px) {
  .sommaire > ul {
    columns: 2;
    column-gap: var(--e6);
  }
}
@media (min-width: 1280px) {
  .sommaire > ul {
    columns: auto;
  }
  .sommaire {
    position: sticky;
    top: var(--e5);
    float: right;
    width: var(--l-sommaire);
    max-height: calc(100vh - 2 * var(--e5));
    margin: 0 0 var(--e5) var(--e6);
    padding-block: 0;
    border-block: 0;
    overflow-y: auto;
  }
  .sommaire a {
    min-height: 0;
  }
}
.faits {
  margin: var(--e4) 0 0;
  padding: 0;
  list-style: none;
  max-width: 68ch;
}
.faits li {
  position: relative;
  padding: var(--e4) 0 var(--e4) var(--e6);
  border-top: var(--trait) solid var(--filet);
}
.faits li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--e4) + 0.8em);
  width: var(--tiret);
  height: var(--trait-fort);
  background: var(--canard);
}
.faits span {
  color: var(--gris);
}
/* Privacy page (17/10, Notion 3fcd0321-4a76-8154): the "written by a model, not reviewed" admission was a sentence
   repeated in three sections; it is now one label under each title. Neutral, not --verifier: on this site the
   state colours only appear where a case is shown (DESIGN-SYSTEM.md, section 0). Outside the <h3>, whose text the
   legal-toc test reads tag-free. */
.mention {
  display: inline-block;
  margin: var(--e2) 0 0;
  padding: var(--e1) var(--e3);
  border-radius: var(--r-plaque);
  background: var(--creux);
  font-size: var(--t-petit);
  font-weight: 600;
}
.mention + p {
  margin-top: var(--e3);
}
.encadre {
  max-width: 68ch;
  padding: var(--e4) var(--e5);
  border-radius: var(--r-controle);
  background: var(--creux);
}
/* Two offices, two separate sets of files: the drawing says it before the sentence, which stays one click away. */
.bureaux {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e3);
  max-width: 68ch;
  margin: var(--e4) 0 0;
}
.bureaux div {
  display: grid;
  gap: var(--e1);
  padding: var(--e4);
  border: var(--trait) solid var(--gris);
  border-radius: var(--r-controle);
}
.bureaux span {
  color: var(--gris);
  font-size: var(--t-petit);
  line-height: 1.35;
}
.bureaux figcaption {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--encre);
  font-size: var(--t-texte);
}
.detail {
  max-width: 68ch;
  margin-top: var(--e3);
}
/* Native marker kept (a flex summary loses it): 8 px above and below a 28.8 px line reach the 44 px target. */
.detail summary {
  padding-block: var(--e2);
  color: var(--canard);
  font-weight: 600;
  cursor: pointer;
}
.detail p {
  margin-top: var(--e2);
}
/* Privacy page, 17/10 (Notion 3fcd0321-4a76-81f3): durations, places and model-written-or-not were prose, 22 375 px
   of "Ce que Tallia lit" at 390 (measured); they are now read across a row, the full text one click below each
   table. The width is 68ch of the body size, like every list here, so the sticky table of contents at 1280 px and
   more never covers a column; the cells drop to the small size. Under 720 px a row is a block: its title, then
   each cell after the label it lost with the hidden header. */
.matrice {
  width: 100%;
  max-width: 68ch;
  margin-top: var(--e5);
  border-collapse: collapse;
}
.matrice caption {
  padding-bottom: var(--e3);
  color: var(--encre);
  font-weight: 700;
  text-align: left;
}
.matrice th,
.matrice td {
  padding: var(--e3) var(--e3) var(--e3) 0;
  border-top: var(--trait) solid var(--filet);
  font-size: var(--t-petit);
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}
.matrice thead th {
  border-top: 0;
  color: var(--gris);
  font-weight: 600;
}
.matrice tbody th {
  color: var(--encre);
  font-weight: 600;
}
.matrice td {
  color: var(--gris);
}
@media (max-width: 719px) {
  .matrice,
  .matrice caption,
  .matrice tbody,
  .matrice tr,
  .matrice th,
  .matrice td {
    display: block;
  }
  .matrice thead {
    position: absolute;
    width: var(--trait);
    height: var(--trait);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .matrice tr {
    padding-block: var(--e3);
    border-top: var(--trait) solid var(--filet);
  }
  .matrice th,
  .matrice td {
    padding: var(--e1) 0 0;
    border-top: 0;
  }
  .matrice td::before {
    content: attr(data-label);
    color: var(--encre);
    font-weight: 600;
  }
}
/* The path of a message: the timeline's dots and line (.frise), laid flat from 720 px, where three steps fit a row.
   The batch file is off that path, so it hangs below it in a dashed frame, the dash the mail's path (.trajet)
   already gives what is temporary or closed. The handover report is off that path too but is never erased, so its
   frame is solid. */
.flux {
  max-width: 68ch;
  margin: var(--e5) 0 0;
}
.flux .frise {
  margin-top: 0;
}
.flux span {
  display: block;
  color: var(--gris);
  font-size: var(--t-petit);
  font-weight: 400;
  line-height: 1.35;
}
/* Not a repeat of .flux's 68ch: it overrides the global `p { max-width: 62ch }`, in the note's own 15 px ch
   (measured 18/10 at 1440: 659 px with it, 601 without, the figure 791). */
.prose .flux p {
  max-width: 68ch;
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  border: var(--trait) dashed var(--gris);
  border-radius: var(--r-controle);
  font-size: var(--t-petit);
}
.prose .flux p + p {
  border-style: solid;
}
@media (min-width: 720px) {
  .flux .frise {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* No column gap: the right padding stands for it, so the line can run to the next dot inside its own box. */
  .flux .frise > li {
    padding: var(--e5) var(--e5) 0 0;
  }
  .flux .frise > li::before {
    top: 0;
  }
  .flux .frise > li::after {
    top: calc((var(--puce) - var(--trait-fort)) / 2);
    right: 0;
    bottom: auto;
    left: var(--puce);
    width: auto;
    height: var(--trait-fort);
  }
}
/* A day on the deletion timeline sits on its own line, next to the dot. */
.prose .frise .mono {
  display: block;
}
.mono {
  font-family: var(--f-chiffre);
  font-weight: 600;
  white-space: nowrap;
}

/* Pages courtes: merci, demande non envoyee */

.court {
  min-height: 60vh;
}
.court p {
  margin-top: var(--e5);
}