/* ==========================================================================
   Stackly — page publique « Facturation électronique »
   (templates/home/facture_electronique.html.twig)

   La page reprend `home-index.css` pour le parcours en captures et les
   boutons ; ce fichier ne pose que ce qui lui est propre.
   ========================================================================== */

.fe-hero {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: calc(var(--gutter-section) * 1.1) var(--gutter-page) var(--gutter-section);
  text-align: center;
}

.fe-eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mod-documents-ink);
  margin: 0 0 var(--space-4);
}

.fe-h1 {
  font-size: clamp(32px, 6vw, var(--text-section));
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 auto var(--space-5);
  max-width: 18ch;
  text-wrap: balance;
}

.fe-lead {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink-secondary);
  max-width: 62ch;
  margin: 0 auto var(--space-8);
}

.fe-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.fe-hero-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* La capture du produit sous l'annonce : cadree comme les captures de la
   section « Et dans Stackly ? », ombre legere, legende discrete. */
.fe-hero-shot {
  max-width: 900px;
  margin: var(--space-10) auto 0;
}

.fe-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card-lg);
  box-shadow: var(--shadow-3);
  background: var(--surface);
}

.fe-hero-shot figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Sections ---------------------------------------------------- */

.fe-section {
  max-width: var(--hp-max);
  margin: 0 auto;
  padding: var(--gutter-section) var(--gutter-page);
}

.fe-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto var(--space-8);
}

.fe-head .hp-sub { margin-top: var(--space-3); }

/* ---------- Les deux échéances ------------------------------------------ */

.fe-dates {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: grid;
  gap: var(--space-5);
}

.fe-date {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/*  L'echeance qui reste a venir est celle qui concerne le lecteur : c'est
    elle qui porte la teinte. Celle qui est passee reste lisible mais
    s'efface — la hierarchie dit ce qu'il faut regarder. */
.fe-date.is-a-venir {
  border-color: var(--mod-documents);
  box-shadow: 0 0 0 1px var(--mod-documents);
}

.fe-date.is-passee { background: var(--surface-muted); }

.fe-date-quand {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.fe-date-jour {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.fe-date-etat {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fe-date.is-a-venir .fe-date-etat { color: var(--mod-documents-ink); }

.fe-date-qui {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.fe-date-quoi p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.6;
}

/* ---------- La précision qui évite un malentendu ------------------------ */

.fe-precision {
  border-left: 3px solid var(--mod-expenses);
  background: var(--mod-expenses-tint-2);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  padding: var(--space-6) var(--space-8);
}

/*  Le paragraphe reste a 78ch pour rester lisible, mais le bloc suit la
    largeur des deux echeances au-dessus : un encart plus etroit se lisait
    comme un aparte, alors qu'il porte la nuance la plus importante de la
    page. */
.fe-precision > * { max-width: 78ch; }

.fe-precision h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.fe-precision p {
  margin: 0 0 var(--space-3);
  color: var(--ink-secondary);
  line-height: 1.65;
}

.fe-precision p:last-child { margin-bottom: 0; }

/* ---------- La preuve --------------------------------------------------- */

.fe-preuve { background: var(--surface-muted); max-width: none; }
.fe-preuve > * { max-width: var(--hp-max); margin-inline: auto; }

.fe-preuve-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.fe-preuve-carte {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

.fe-preuve-outil {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 var(--space-2);
}

.fe-preuve-quoi {
  font-size: var(--text-body);
  color: var(--ink-secondary);
  margin: 0 0 var(--space-4);
}

.fe-preuve-resultat {
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  color: var(--mod-finance-ink);
  margin: 0 0 var(--space-1);
}

.fe-preuve-detail {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin: 0;
}

.fe-preuve-note {
  margin: var(--space-6) auto 0;
  max-width: 72ch;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---------- Changer maintenant ou sous contrainte ----------------------- */

.fe-changer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

.fe-changer-grid article {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

/*  Une seule des deux colonnes est mise en avant. Les opposer a egalite
    laisserait le lecteur choisir entre deux options presentees comme
    equivalentes, alors que l'une est simplement la meme, plus tard et
    dans l'urgence. */
.fe-changer-grid article.is-mieux {
  background: var(--surface);
  border-color: var(--mod-documents);
  box-shadow: 0 0 0 1px var(--mod-documents);
}

.fe-changer-grid h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 0 var(--space-3);
}

.fe-changer-grid p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.65;
}

.fe-cta {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto;
}

.fe-cta .hp-sub { margin: var(--space-3) 0 var(--space-6); }

.fe-cta-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* ---------- Téléphone --------------------------------------------------- */

@media (max-width: 860px) {
  .fe-date { grid-template-columns: 1fr; gap: var(--space-3); }
  .fe-preuve-grid,
  .fe-changer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .fe-precision { padding: var(--space-5); }
  .fe-hero-actions .hp-btn { width: 100%; justify-content: center; }
}

/* ---------- Le comparatif des trois façons d'envoyer -------------------- */

/*  Un tableau, pas trois cartes : la comparaison ne vaut que si l'oeil peut
    balayer une ligne d'un bout a l'autre. Trois cartes juxtaposees obligent a
    retenir la valeur de gauche pour la comparer a celle de droite.

    `public/css/style.css` habille tous les `th` de la base en etiquette
    capitale — utile dans les tableaux de donnees de l'application, faux ici,
    ou les en-tetes sont des titres et la premiere colonne une phrase. On
    annule pour ce tableau et on reapplique la capitale la ou elle sert. */

.fe-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--space-6);
}

.fe-compare-wrap:focus-visible {
  outline: 2px solid var(--mod-documents);
  outline-offset: 3px;
}

/*  `.hp table.fe-compare` et non `.fe-compare` : `public/css/style.css` pose
    `table:not(.table-mobile-cards):not(.stats-table) { min-width: 800px }`
    sous 992 px, et sa specificite (0,2,1) battait la mienne quel que soit
    l'ordre de chargement. Le tableau s'etirait alors a 800 px sur telephone
    et la derniere colonne ne pouvait plus se degager de la colonne collee.
    On egalise la specificite ; le cascade fait le reste, ce fichier etant
    charge apres. */
.hp table.fe-compare {
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-body);
  text-align: left;
}

.fe-compare th,
.fe-compare td {
  text-transform: none;
  letter-spacing: normal;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink-secondary);
  font-weight: var(--weight-regular);
  line-height: 1.5;
}

/* La première colonne nomme le critère : elle est le repère, pas une valeur. */
.fe-compare tbody th[scope="row"] {
  width: 24%;
  color: var(--ink);
  font-weight: var(--weight-semibold);
  background: var(--surface-muted);
}

.fe-compare thead th {
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--space-3);
  vertical-align: bottom;
}

.fe-compare-vide {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.fe-compare-titre {
  display: block;
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  line-height: 1.25;
}

.fe-compare-sous {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-weight: var(--weight-regular);
}

/*  UNE SEULE COLONNE EST MISE EN AVANT.

    C'est la colonne dont parle la page. La teinter en continu, de l'en-tete a
    la derniere cellule, fait lire la colonne comme un bloc — ce qui est
    exactement ce qu'on demande au lecteur de faire. */
.fe-compare th.is-mieux,
.fe-compare td.is-mieux {
  background: var(--mod-documents-tint-2);
  color: var(--ink);
}

.fe-compare thead th.is-mieux {
  border-bottom-color: var(--mod-documents);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.fe-compare tbody tr:last-child td.is-mieux {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.fe-compare tbody tr:last-child th,
.fe-compare tbody tr:last-child td {
  border-bottom: 0;
}

.fe-compare-note {
  max-width: 78ch;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/*  SUR TELEPHONE, LE CRITERE RESTE EN PLACE.

    Le tableau defile lateralement sous 760 px. Sans cette regle, la premiere
    colonne sortait de l'ecran des le premier glissement : on lisait « Une
    feuille / Un PDF en piece jointe / Le meme PDF » sans plus savoir de quoi
    il s'agissait. La comparaison ne vaut que si la question reste visible
    pendant qu'on fait defiler les reponses. */
@media (max-width: 760px) {
  /*  `table-layout: fixed` n'est pas un detail ici : en mode automatique le
      tableau s'etirait a 800 px selon la longueur des cellules, et la
      derniere colonne ne pouvait plus se degager entierement de la colonne
      collee — on lisait « onforme — l'un des trois... ». A largeurs
      imposees, la course de defilement est calculee, pas subie. */
  .hp table.fe-compare {
    font-size: var(--text-sm);
    table-layout: fixed;
    width: 620px;
    min-width: 620px;
  }

  .fe-compare th,
  .fe-compare td { padding: var(--space-3) var(--space-4); }

  .fe-compare thead th:first-child,
  .fe-compare tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 140px;
    /* La colonne collee passe par-dessus les autres : il lui faut un fond
       opaque, et un trait pour marquer qu'on a franchi son bord. */
    background: var(--surface-sunken);
    box-shadow: 1px 0 0 var(--border);
  }

  .fe-compare thead th:first-child { background: var(--canvas); }

  .fe-compare-note { text-align: left; }

  /*  Rien n'indiquait qu'il y avait deux colonnes de plus a droite.

      Le repere se pose sur la NOTE, pas sur le conteneur qui defile : en
      pseudo-element de ce dernier il faisait partie de la zone defilante et
      sortait de l'ecran avec le tableau — on lisait « r comparer → ». */
  .fe-compare-note::before {
    content: "Faites glisser le tableau pour comparer →";
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-faint);
    text-align: right;
  }
}

/* ---------- « C'est quoi, au juste » ------------------------------------ */

/*  Trois cartes, pas un paragraphe : le lecteur qui decouvre le sujet lit en
    diagonale. Chacune repond a une question qu'il se pose dans cet ordre —
    c'est quoi, qu'est-ce que mon client verra, pourquoi on m'impose ca. */

.fe-quoi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.fe-quoi-carte {
  border: 1px solid var(--border);
  border-top: 3px solid var(--tint, var(--mod-documents));
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: var(--space-6);
}

.fe-quoi-carte h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}

.fe-quoi-carte p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ---------- Ce que vous y gagnez ---------------------------------------- */

.fe-benefices {
  background: var(--surface-muted);
  max-width: none;
}

.fe-benefices > * {
  max-width: var(--hp-max);
  margin-inline: auto;
}

.fe-benefices-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
}

/*  Pas de carte ici : quatre cartes juste apres trois cartes donnent une
    page en damier. La puce teintee suffit a marquer l'entree. */
.fe-benefice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

.fe-benefice-puce {
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--tint, var(--mod-documents));
}

.fe-benefice h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0;
}

.fe-benefice p {
  margin: 0;
  color: var(--ink-secondary);
  line-height: 1.65;
}

@media (max-width: 960px) {
  .fe-quoi-grid { grid-template-columns: 1fr; }
  .fe-benefices-liste { grid-template-columns: 1fr; gap: var(--space-6); }
}

/*  « e-mail » se coupait apres le trait d'union en fin de ligne : le titre
    se terminait par « e- / mail. ». Le trait d'union est un caractere de
    coupure legitime pour le navigateur ; ici il fait partie du mot. */
.fe-nowrap { white-space: nowrap; }

/*  Le renvoi vers les textes officiels. Une page qui affirme ce que dit la
    loi doit dire ou la verifier — et le lecteur qui suit le lien revient
    plus convaincu qu'un lecteur a qui on demande de croire. */
.fe-precision-source {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.fe-precision-source a {
  color: var(--mod-documents-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   LE CIRCUIT D'UNE FACTURE ÉLECTRONIQUE

   Le schéma est en HTML et en CSS, sans image ni script. Trois raisons :
   une image de schéma est illisible sur un téléphone, ne se traduit pas, et
   ne se lit pas à voix haute. Ici les étapes sont une liste ordonnée, les
   traits sont des pseudo-éléments marqués `aria-hidden`, et un lecteur
   d'écran parcourt le circuit dans l'ordre sans rencontrer de décor.

   TROIS CHEMINS

       ┌──────────── l'état de la facture revient ─────────────┐
       ▼                                                       │
      [1] ──▸ [2] ──▸ [3] ──▸ [4] ──▸ [5] ──▸ [6]
                       ╷
                       ▼
              [ le fisc reçoit les chiffres ]

   LE NOMBRE DE STATIONS VIT DANS LE CONTRÔLEUR.

   Le gabarit le recopie dans `data-colonnes`, et le bloc ci-dessous le
   traduit en `--fec-colonnes`. L'arc et la branche s'en déduisent par
   calcul : le centre de la colonne k est à `--fec-col × (k − 0,5)`. Ajouter
   ou retirer une étape ne demande donc aucun pourcentage recalculé à la
   main — seulement une ligne de plus ici si le nombre sort de la plage.

   (Un attribut ne peut pas devenir un nombre en CSS ; c'est pour cela que
   la traduction passe par des sélecteurs d'attribut plutôt que par un
   `style=""` dans le gabarit, que les conventions du projet interdisent.)
   ========================================================================== */

.fec[data-colonnes="4"] { --fec-colonnes: 4; }
.fec[data-colonnes="5"] { --fec-colonnes: 5; }
.fec[data-colonnes="6"] { --fec-colonnes: 6; }
.fec[data-colonnes="7"] { --fec-colonnes: 7; }
.fec[data-colonnes="8"] { --fec-colonnes: 8; }

.fec[data-colonnes="4"] .fec-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fec[data-colonnes="5"] .fec-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fec[data-colonnes="6"] .fec-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fec[data-colonnes="7"] .fec-rail { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fec[data-colonnes="8"] .fec-rail { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.fe-circuit-section { max-width: none; background: var(--surface-muted); }
.fe-circuit-section > * { max-width: var(--hp-max); margin-inline: auto; }

.fec {
  --fec-colonnes: 6;                                  /* repris de data-colonnes */
  --fec-col: calc(100% / var(--fec-colonnes));        /* largeur d'une colonne   */
  --fec-pastille: 60px;
  --fec-descente: 62px;        /* retombée de la branche au-dessus de la carte */
  --fec-amorce: 40px;          /* la même, raccourcie, quand le rail est vertical */

  position: relative;
  padding-top: 112px;                                 /* la place de l'arc */
}

/* ---------- Le rail ------------------------------------------------------ */

/*  SUBGRID, PARCE QUE LES TEXTES N'ONT PAS TOUS LA MÊME HAUTEUR.

    Les quatre rangées — pastille, acteur, texte, mention — sont déclarées
    ici et chaque station s'y accroche. Sans cela, une station dont le nom
    tient sur deux lignes décalait tout ce qui la suit et le rail perdait
    son alignement.

    Gouttière NULLE, et c'est délibéré : les traits de liaison sont dessinés
    sur toute la largeur de chaque station, et se rejoignent donc bord à
    bord d'une colonne à l'autre. Les pastilles y percent leur trou avec
    leur halo. Aucune longueur de trait n'est calculée nulle part. */
.fec-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0;
}

.fec-station {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  justify-items: center;
  text-align: center;
  padding: 0 var(--space-3);
}

/* ---------- La pastille, et le trait qui la traverse --------------------- */

/*  `.fec-marque` occupe toute la largeur de la colonne et ne contient que la
    pastille : son milieu vertical EST celui de la pastille, quelle que soit
    la hauteur de l'étiquette au-dessus. C'est ce qui rend le trait juste
    sans qu'aucune valeur ne soit posée à la main. */
.fec-marque {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
}

/*  Le trait deborde de la marge interieure de la station.

    `.fec-marque` fait 100 % de la BOÎTE DE CONTENU, c'est-à-dire la colonne
    moins ses 12 px de marge de chaque côté : deux traits voisins laissaient
    24 px de blanc entre eux et le rail paraissait pointillé. On rend les
    deux marges au trait, et les colonnes se rejoignent bord à bord. */
.fec-marque::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--space-3));
  right: calc(-1 * var(--space-3));
  height: 2px;
  margin-top: -1px;
  background: var(--ink-faint);
}

/* Le rail commence à la première station et s'arrête à la dernière. */
.fec-station:first-child .fec-marque::before { left: 50%; }
.fec-station:last-child  .fec-marque::before { right: 50%; }

/*  LA FLÈCHE EST UN TRIANGLE PLEIN, PAS UN CHEVRON.

    Elle était dessinée comme deux bordures sur un carré tourné à 45°. Le
    trait du rail passait alors EN PLEIN MILIEU du chevron : à l'écran on
    lisait un « › » barré, et l'épaississement se voyait d'autant plus que
    l'écran était dense. Un triangle plein ne laisse rien passer derrière
    lui, et il se pose avant la pastille sans toucher son halo.

        avant   ──›──        après   ──▸ */
.fec-marque::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% - var(--fec-pastille) / 2 - 14px);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--ink-faint);
  transform: translateY(-50%);
}

.fec-station:first-child .fec-marque::after { display: none; }

.fec-pastille {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fec-pastille);
  height: var(--fec-pastille);
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--tint, var(--mod-documents));
  color: var(--tint-ink, var(--mod-documents-ink));
  /* Le halo interrompt le trait juste avant la pastille, sans qu'aucune
     longueur n'ait à être retranchée. */
  box-shadow: 0 0 0 7px var(--surface-muted);
}

.fec-pastille svg { width: 25px; height: 25px; }

.fec-num {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint, var(--mod-documents));
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 22px;
  text-align: center;
}

/*  LE NOM DE L'ACTEUR EST LE TITRE.

    Il portait l'etiquette grise en capitales au-dessus de la pastille, et
    le titre annoncait l'action : « elle est verifiee », « elle est
    remise ». On lisait des phrases passives sans savoir qui agissait. Les
    deux roles sont echanges — le nom prend la taille et la graisse, ce
    qu'il fait descend dans la description. */
.fec-acteur {
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: var(--space-5) 0 var(--space-3);
  text-wrap: balance;
}

.fec-texte {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  line-height: 1.55;
}

/*  La seule étape que le logiciel couvre. Le dire sur le schéma évite
    d'avoir à revenir ailleurs sur ce que Stackly ne fait pas. */
.fec-badge {
  display: inline-block;
  margin: var(--space-3) 0 0;
  padding: 2px var(--space-3);
  border-radius: 999px;
  border: 1px solid var(--mod-documents);
  color: var(--mod-documents-ink);
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Le retour de l'état, au-dessus du rail ---------------------- */

/*  L'arc va du centre de la dernière colonne à celui de la première.
    `--fec-col / 2` est exactement la demi-colonne à retrancher de chaque
    côté — la gouttière étant nulle, le calcul tombe juste. */
.fec-retour {
  position: absolute;
  top: 0;
  left: calc(var(--fec-col) / 2);
  right: calc(var(--fec-col) / 2);
  height: 90px;
}

/*  Trois bordures et deux coins arrondis dessinent la boucle. En tirets,
    parce que ce chemin n'est pas celui de la facture : c'est de
    l'information qui revient. */
.fec-retour-arc {
  position: absolute;
  inset: auto 0 0;
  height: 38px;
  border: 2px dashed var(--mod-finance);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  opacity: 0.6;
}

/*  LA FLÈCHE DU RETOUR DESCEND VERS VOUS.

    Elle était un chevron tourné à 45° puis décalé de deux pixels en
    diagonale : le décalage la sortait de son propre montant et elle
    flottait à côté, comme un caractère égaré. Triangle plein, centré sur
    le montant gauche (−5 px pour la moitié de ses 10 px de large, +1 px
    pour la moitié de la bordure), pointe en bas. */
.fec-retour-arc::before {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -9px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--mod-finance);
}

/* L'origine, à l'autre bout : c'est de là que part l'information. */
.fec-retour-arc::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mod-finance);
}

.fec-retour-texte {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(62ch, 100%);
  margin: 0;
  padding: 0 var(--space-5);
  background: var(--surface-muted);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  line-height: 1.55;
}

.fec-retour-titre {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--mod-finance-ink);
  margin-bottom: 2px;
}

/* ---------- La branche vers le fisc ------------------------------------- */

.fec-derivation {
  position: relative;
  margin-top: var(--space-10);
  padding-top: var(--fec-descente);
}

/*  LA BRANCHE PART DE LA PASTILLE, PAS DU VIDE.

    Elle commençait au haut de `.fec-derivation`, c'est-à-dire deux cent
    trente pixels SOUS le rail : un trait en pointillé suspendu entre deux
    blancs, qui ne reliait visiblement rien à rien.

    Elle est donc portée par la station « votre plateforme » — le seul
    élément dont la boîte descend du rail jusqu'au bas du rail, quelle que
    soit la longueur des textes. Elle part de la ligne du rail et descend
    jusqu'au haut de la carte : `--space-10` de marge plus `--fec-descente`
    de retombée. Aucune hauteur n'est devinée, et le dégradé est continu —
    deux segments bout à bout auraient laissé voir la couture de leurs
    tirets.

    ELLE SE BRANCHE AU BORD DE LA STATION, PAS EN SON MILIEU.

    Partant du centre, elle tombait en plein dans le titre et les trois
    lignes de texte de l'étape, qu'elle rayait de haut en bas. Au bord
    (`left: 100 %`, la frontière entre les deux plateformes) elle ne
    rencontre que les vingt-quatre pixels de marge que les deux stations
    voisines lui laissent — et « en chemin, entre les deux plateformes »
    est d'ailleurs le moment exact où les chiffres partent. */
.fec-station:nth-child(2)::before {
  content: "";
  position: absolute;
  top: calc(var(--fec-pastille) / 2);
  bottom: calc(-1 * (var(--space-10) + var(--fec-descente)));
  left: 100%;
  margin-left: -1px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--mod-expenses) 0 6px,
    transparent 6px 12px
  );
}

/*  Il ne reste à `.fec-derivation-trait` que la pointe, posée au bord de
    la carte, sur le même axe que la branche — la frontière après la
    deuxième colonne, soit `--fec-col × 2`. */
.fec-derivation-trait {
  position: absolute;
  top: var(--fec-descente);
  left: calc(var(--fec-col) * 2);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--mod-expenses);
  transform: translate(-50%, -100%);
}

.fec-derivation-carte {
  max-width: 70ch;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--mod-expenses);
  border-radius: var(--radius-card);
  background: var(--mod-expenses-tint-2);
  text-align: center;
}

.fec-derivation-titre {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title-3);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.fec-derivation-texte {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  line-height: 1.6;
}

/* ---------- Sous 1180 px : le rail se redresse -------------------------- */

/*  Six colonnes ne tiennent plus : les textes descendraient à une vingtaine
    de caractères par ligne. Plutôt que de réduire le schéma jusqu'à
    l'illisible, on le fait pivoter. Le rail devient vertical, les traits
    passent d'horizontaux à verticaux, et l'arc de retour — qui n'a plus de
    colonnes à relier — redevient une note en tête de circuit. */
@media (max-width: 1180px) {
  .fec { padding-top: 0; }

  .fec-rail {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: var(--space-8);
  }

  .fec-station {
    grid-row: auto;
    grid-template-rows: auto auto auto;
    grid-template-columns: var(--fec-pastille) minmax(0, 1fr);
    grid-template-areas:
      "marque   acteur"
      "vide     texte"
      "vide     badge";
    column-gap: var(--space-5);
    justify-items: stretch;
    text-align: left;
    padding: 0;
  }

  .fec-marque   { grid-area: marque; align-self: start; width: var(--fec-pastille); }
  /*  Marge nulle : la rangee du nom fait la hauteur de la pastille (60 px),
      le nom y est centre, et le blanc sous lui vient deja de ce centrage.
      Une marge en plus eloignait le nom de sa propre description. */
  .fec-acteur   { grid-area: acteur; margin: 0; align-self: center; }
  .fec-texte    { grid-area: texte; }
  /* Sans cela, la grille étire la pastille sur toute la colonne. */
  .fec-badge    { grid-area: badge; justify-self: start; margin-top: var(--space-3); }

  /*  LE TRAIT CHANGE DE PORTEUR.

      À l'horizontale il appartenait à `.fec-marque`, dont la largeur est
      celle de la colonne. À la verticale il doit rejoindre la station
      SUIVANTE, ce que la marque — haute comme la pastille — ne peut pas
      faire. Il passe donc sur la station elle-même, où `bottom` négatif
      d'une gouttière donne exactement la bonne longueur : du bas de la
      pastille au haut de la station d'après, sans valeur devinée. */
  .fec-marque::before,
  .fec-marque::after { display: none; }

  .fec-station::after {
    content: "";
    position: absolute;
    top: calc(var(--fec-pastille) + 5px);
    bottom: calc(-1 * var(--space-8));
    left: calc(var(--fec-pastille) / 2 - 1px);
    width: 2px;
    background: var(--ink-faint);
  }

  .fec-station:last-child::after { display: none; }

  .fec-retour { position: static; height: auto; margin-bottom: var(--space-8); }
  .fec-retour-arc { display: none; }

  .fec-retour-texte {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--mod-finance);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: var(--surface);
  }

  /*  LA BRANCHE NE PEUT PLUS PARTIR DE LA DEUXIÈME STATION.

      Les stations sont empilées : un trait parti de la deuxième traverserait
      les deux suivantes, et un trait parti du bas du rail dirait que les
      chiffres viennent de votre client — ce qui est faux, ils viennent de la
      plateforme.

      Elle devient donc une COURTE AMORCE au-dessus de la carte : assez pour
      la désigner, trop courte pour prétendre venir d'une station. Sur trois
      cent quatre-vingt-dix pixels de large, la longue retombée du bureau
      partait visiblement de nulle part. */
  .fec-station:nth-child(2)::before { display: none; }

  .fec-derivation {
    margin-top: var(--space-10);
    padding-top: var(--fec-amorce);
  }

  .fec-derivation-trait {
    top: 0;
    left: calc(var(--fec-pastille) / 2 - 1px);
    width: 2px;
    /* La pointe fait 9 px, et on lui laisse 2 px avant la bordure. */
    height: calc(var(--fec-amorce) - 11px);
    border: 0;
    transform: none;
    background: repeating-linear-gradient(
      to bottom,
      var(--mod-expenses) 0 6px,
      transparent 6px 12px
    );
  }

  /*  `bottom: -9px` et non `0` : la pointe se posait SUR la bordure en
      tirets de la carte, moitié dedans moitié dehors. Elle s'arrête
      maintenant deux pixels avant. */
  .fec-derivation-trait::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 9px solid var(--mod-expenses);
    transform: translateX(-50%);
  }

  .fec-derivation-carte { text-align: left; }
}

/* ---------- La définition, et ses trois conditions ---------------------- */

/*  Elle vient AVANT les cartes, en grand : une section qui expliquait ce
    qu'une facture électronique n'est pas laissait le lecteur savoir qu'il se
    trompait sans savoir sur quoi. */
.fe-definition {
  max-width: 68ch;
  margin: 0 auto var(--space-8);
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}

/*  Une PHRASE, pas une étiquette. En capitales espacées elle passait sur deux
    lignes et se lisait lettre à lettre : la capitale convient à deux mots,
    pas à une proposition. */
.fe-quoi-intro {
  max-width: 62ch;
  margin: 0 auto var(--space-6);
  text-align: center;
  font-weight: var(--weight-semibold);
  color: var(--ink-secondary);
}

/*  La confusion arrive en conséquence des trois conditions, plus en titre :
    c'est parce qu'elles existent qu'un PDF joint n'en est pas une. */
.fe-consequence {
  max-width: 72ch;
  margin: var(--space-8) auto 0;
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--mod-finance);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  background: var(--surface);
  color: var(--ink-secondary);
  line-height: 1.65;
}

/* ---------- La tolérance annoncée par l'administration ------------------ */

.fe-tolerance {
  max-width: 76ch;
  margin: var(--space-5) auto var(--space-8);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ---------- Où en est Stackly, étape par étape -------------------------- */

/*  Trois états, trois traitements : ce qui est fait, ce qui reste à votre
    main, ce qui viendra. Les distinguer par la seule couleur serait illisible
    pour un daltonien et invisible à l'impression — chaque ligne porte donc
    aussi son mot (« Disponible », « À votre main », « Avant septembre
    2027 »). */
.fe-etat {
  list-style: none;
  margin: var(--space-6) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: 78ch;
}

.fe-etat-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

.fe-etat-marque {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
}

.fe-etat-item.is-fait .fe-etat-marque {
  background: var(--mod-finance);
  border-color: var(--mod-finance);
}

.fe-etat-item.is-manuel .fe-etat-marque {
  background: var(--mod-expenses);
  border-color: var(--mod-expenses);
}

/* À venir : un contour creux. On ne remplit pas ce qui n'existe pas encore. */
.fe-etat-item.is-a-venir .fe-etat-marque {
  background: transparent;
  border-style: dashed;
}

.fe-etat-titre {
  margin: 0 0 var(--space-1);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.fe-etat-jalon {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px var(--space-2);
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--ink-muted);
}

.fe-etat-item.is-fait .fe-etat-jalon { color: var(--mod-finance-ink); }
.fe-etat-item.is-a-venir .fe-etat-jalon { color: var(--mod-documents-ink); }

.fe-etat-texte {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-secondary);
  line-height: 1.6;
}