@font-face {
  font-family: "Designosaur";
  src: url("/static/fonts/Designosaur.ttf") format("truetype");
  font-display: swap;
}
:root {
  /* Charte graphique Alyneia */
  --couleur-primaire: #003366;
  --couleur-accent: #cc3366;
  --couleur-accent-fonce: #a3284f;
  --couleur-primaire-claire: #eef4f8;
  --couleur-texte: #1c2733;
  --couleur-bordure: #d9e1e8;
  --vert: #1f8a4c;
  --jaune: #b8860b;
  --rouge: #c62828;
  --gris: #6b7683;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` vaut `display: none`, mais toute règle de classe le supplante —
   une barre en `display: flex` ou une grille resteraient visibles. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--couleur-texte);
  background: #f6f8fa;
  margin: 0;
}

header.app-header {
  background: var(--couleur-primaire);
  color: white;
  padding: 0.5rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--couleur-accent);
}

header.app-header a { color: white; text-decoration: none; font-weight: 600; }
/* Le logo remplace le nom en toutes lettres ; « Formalités » le prolonge dans la police
   de la charte, sans concurrencer la marque. */
header.app-header a.marque { display: flex; align-items: center; gap: 0.6rem; }
/* L'emblème comporte du bleu marine : sur le bandeau il s'y fondrait. Une pastille
   claire l'en détache sans altérer ses couleurs. */
header.app-header a.marque img {
  display: block; background: #fff; border-radius: 8px; padding: 4px 5px;
}
/* L'emblème porte la marque ; le nom l'accompagne, et le module s'en détache par un
   filet, pour qu'on lise « Espace Légal » puis « Formalités » sans les confondre. */
header.app-header a.marque .nom { font-size: 1.15rem; letter-spacing: 0.01em; }
header.app-header a.marque .nom strong { font-weight: 700; }
header.app-header a.marque .module {
  font-weight: 400; font-size: 1.02rem; letter-spacing: 0.03em; opacity: 0.85;
  padding-left: 0.7rem; border-left: 1px solid rgba(255, 255, 255, 0.3);
}
header.app-header nav a { margin-left: 1rem; font-weight: 400; opacity: 0.9; }
header.app-header nav a:hover { opacity: 1; text-decoration: underline; }

main { max-width: 1100px; margin: 1.5rem auto; padding: 0 1rem; }

.carte {
  background: white;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--couleur-bordure); }
th { background: var(--couleur-primaire-claire); font-size: 0.85rem; text-transform: uppercase; }

.voyant { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 50%; margin-right: 0.4rem; }
.voyant-vert { background: var(--vert); }
.voyant-jaune { background: var(--jaune); }
.voyant-rouge { background: var(--rouge); }
.voyant-gris { background: var(--gris); }

.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--couleur-primaire-claire); }

.bouton {
  display: inline-block;
  background: var(--couleur-primaire);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
}
.bouton:hover { opacity: 0.92; }
.bouton.secondaire { background: white; color: var(--couleur-primaire); border: 1px solid var(--couleur-primaire); }
.bouton.danger { background: var(--rouge); }

.champ { margin-bottom: 1rem; }
.champ label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.champ label.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  margin-right: 1.5rem;
}
.champ label.radio-inline input { width: auto; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 6px;
  font-size: 0.95rem;
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--couleur-accent);
}

.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.stat-tuile { background: white; border: 1px solid var(--couleur-bordure); border-radius: 8px; padding: 1rem; }
.stat-tuile .valeur { font-size: 1.6rem; font-weight: 700; color: var(--couleur-primaire); }
.stat-tuile .libelle { font-size: 0.85rem; color: var(--gris); }

.message-erreur { background: #fdecea; color: var(--rouge); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }
.message-succes { background: #eaf7ee; color: var(--vert); padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; }

.etapes { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.etapes span { padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--couleur-primaire-claire); font-size: 0.8rem; }
.etapes span.active { background: var(--couleur-primaire); color: white; }

/* --- Identité visuelle Espace PME --- */
header.app-header .marque {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.logo-entete {
  height: 42px;
  width: auto;
  display: block;
}
.nom-produit {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.05rem;
}
.logo-accueil {
  max-width: 260px;
  width: 60%;
  height: auto;
  margin: 0 auto 1rem;
  display: block;
}
@media (max-width: 600px) {
  .logo-entete { height: 32px; }
  .logo-accueil { width: 75%; }
}

/* --- Police de marque Designosaur ---
   Réservée aux titres de la page d'accueil et au nom du produit : c'est une police
   d'affichage, peu lisible en petits caractères et dépourvue de quelques signes
   (apostrophe typographique, tiret cadratin, points de suspension, degré). Le reste de
   l'application garde la police système, plus lisible pour un usage de gestion. */
@font-face {
  font-family: "Designosaur";
  src: url("/static/fonts/designosaur.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* le texte reste lisible pendant le chargement de la police */
}

.accueil h1,
.accueil h2,
header.app-header .nom-produit {
  font-family: "Designosaur", -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.01em;
}
.accueil h1 { font-size: 2rem; line-height: 1.15; }
@media (max-width: 600px) {
  .accueil h1 { font-size: 1.5rem; }
}

/* --- Accents rose (#cc3366) ---
   Le rose sert à guider le regard : action principale, prix, étape en cours.
   Le bleu marine reste la couleur de structure, pour ne pas diluer l'accent. */

.bouton.accent { background: var(--couleur-accent); }
.bouton.accent:hover { background: var(--couleur-accent-fonce); opacity: 1; }

/* Titres de section soulignés d'un filet rose */
.accueil h2 {
  border-bottom: 3px solid var(--couleur-accent);
  padding-bottom: 0.35rem;
  display: inline-block;
}

/* Prix des formules */
.accueil .stat-tuile .valeur { color: var(--couleur-accent); }
.accueil .stat-tuile { border-top: 3px solid var(--couleur-accent); }

/* Numéros du déroulé « Comment ça marche » */
.accueil table th {
  background: var(--couleur-accent);
  color: white;
  text-align: center;
}

/* Étape en cours du tunnel de souscription */
.etapes span.active { background: var(--couleur-accent); }

/* Liens de contenu */
main a:not(.bouton) { color: var(--couleur-accent-fonce); }
main a:not(.bouton):hover { color: var(--couleur-accent); }

/* Choix d'une offre : puce alignée en haut, la description pouvant tenir sur 2 lignes */
.champ label.radio-inline.offre {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  background: white;
}
.champ label.radio-inline.offre:hover { border-color: var(--couleur-accent); }
.champ label.radio-inline.offre input { margin-top: 0.2rem; }
.champ label.radio-inline.offre small { color: var(--gris); }

/* --- Icônes --- */
.ico-offre {
  width: 30px; height: 30px;
  color: var(--couleur-accent);
  display: block;
  margin-bottom: 0.4rem;
}

.etapes-accueil {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etape;
}
.etapes-accueil li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--couleur-bordure);
}
.etapes-accueil li:last-child { border-bottom: none; }
.etapes-accueil svg {
  width: 26px; height: 26px;
  flex: 0 0 26px;      /* l'icône ne doit pas se comprimer sur écran étroit */
  color: var(--couleur-accent);
  margin-top: 0.15rem;
}
.etapes-accueil strong { color: var(--couleur-primaire); }

/* Carte de formule cliquable sur la page d'accueil */
.accueil .offre-lien {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.accueil .offre-lien:hover,
.accueil .offre-lien:focus-visible {
  border-color: var(--couleur-accent);
  box-shadow: 0 3px 12px rgba(0, 51, 102, .12);
  transform: translateY(-2px);
}
.accueil .offre-lien:focus-visible { outline: 2px solid var(--couleur-accent); outline-offset: 2px; }
.offre-action {
  display: inline-block;
  margin-top: 0.55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--couleur-accent);
}
/* Le survol ne doit pas être le seul indice : conservé au clavier et au toucher */
@media (hover: none) {
  .accueil .offre-lien { border-color: var(--couleur-bordure); }
}

/* ─────────── Formalités juridiques ─────────── */

.grille-deux { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; }
.grille-trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .grille-deux { grid-template-columns: 1fr; } }

.fil-ariane { font-size: 0.85rem; color: var(--gris); margin-bottom: 0.75rem; }
.fil-ariane a { color: var(--gris); }

.etiquette {
  display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; background: var(--couleur-primaire-claire);
  color: var(--couleur-primaire); white-space: nowrap;
}
.etiquette.accent { background: #fce8ef; color: var(--couleur-accent-fonce); }
.etiquette.vert { background: #e6f4ec; color: var(--vert); }
.etiquette.jaune { background: #fdf3dd; color: var(--jaune); }
.etiquette.rouge { background: #fdeaea; color: var(--rouge); }
.etiquette.gris { background: #eef0f2; color: var(--gris); }

.alerte { border-left: 4px solid var(--gris); background: #fff; padding: 0.75rem 1rem;
          border-radius: 0 6px 6px 0; margin-bottom: 1rem; font-size: 0.9rem; }
.alerte.info { border-color: var(--couleur-primaire); background: var(--couleur-primaire-claire); }
.alerte.attention { border-color: var(--jaune); background: #fdf9ee; }
.alerte.erreur { border-color: var(--rouge); background: #fdeaea; }
.alerte.succes { border-color: var(--vert); background: #eef7f1; }

.totaux { margin-left: auto; width: min(360px, 100%); }
.totaux div { display: flex; justify-content: space-between; padding: 0.35rem 0; }
.totaux .total-final { border-top: 2px solid var(--couleur-primaire); margin-top: 0.35rem;
                       padding-top: 0.6rem; font-size: 1.15rem; font-weight: 700;
                       color: var(--couleur-primaire); }

td.montant, th.montant { text-align: right; font-variant-numeric: tabular-nums; }
tr.ligne-ecartee { opacity: 0.45; }
tr.ligne-ecartee td { text-decoration: line-through; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.55rem 0;
                border-bottom: 1px solid var(--couleur-bordure); }
.checklist li:last-child { border-bottom: 0; }
.checklist .puce { flex: 0 0 1.1rem; height: 1.1rem; border-radius: 50%; margin-top: 0.15rem;
                   border: 2px solid var(--couleur-bordure); }
.checklist .puce.faite { background: var(--vert); border-color: var(--vert); }
.checklist small { color: var(--gris); display: block; }

.jauge { height: 8px; border-radius: 4px; background: var(--couleur-bordure); overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); }

.chiffre-cle { font-size: 1.7rem; font-weight: 700; color: var(--couleur-primaire); line-height: 1.1; }
.chiffre-cle + small { color: var(--gris); }

.code-article { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem;
                color: var(--gris); }
.code-article.absent { color: var(--rouge); font-weight: 600; }

form .champ { margin-bottom: 0.9rem; }
form label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.25rem; }
form small.aide { color: var(--gris); display: block; margin-top: 0.2rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--couleur-bordure);
  border-radius: 6px; font: inherit; background: #fff;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--couleur-accent);
  box-shadow: 0 0 0 3px rgba(204, 51, 102, 0.12);
}
textarea { min-height: 5rem; resize: vertical; }
.champ-inline { display: flex; gap: 0.5rem; align-items: center; }
.champ-inline input { flex: 1; }

.bouton, button {
  display: inline-block; padding: 0.5rem 1rem; border-radius: 6px; border: 1px solid transparent;
  background: var(--couleur-primaire); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.bouton:hover, button:hover { background: #002a55; }
.bouton.secondaire { background: #fff; color: var(--couleur-primaire);
                     border-color: var(--couleur-bordure); }
.bouton.secondaire:hover { background: var(--couleur-primaire-claire); }
.bouton.accent { background: var(--couleur-accent); }
.bouton.accent:hover { background: var(--couleur-accent-fonce); }
.bouton.petit { padding: 0.25rem 0.6rem; font-size: 0.82rem; }
.bouton[disabled], button[disabled] { opacity: 0.5; cursor: not-allowed; }

.barre-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
                 margin-bottom: 1rem; }
.barre-actions .pousse-droite { margin-left: auto; }

.carte h2 { margin-top: 0; font-size: 1.05rem; color: var(--couleur-primaire); }
.carte h2 .etiquette { vertical-align: middle; margin-left: 0.5rem; }
.vide { color: var(--gris); font-style: italic; padding: 0.75rem 0; }

/* Cellule d'actions en fin de ligne : les boutons restent côte à côte. */
td.actions { white-space: nowrap; text-align: right; }
td.actions .bouton, td.actions button { margin-left: 0.3rem; }
/* Champs de saisie en tableau : hauteur compacte, sans marge héritée du formulaire. */
table input[type=text], table input[type=email], table select { padding: 0.35rem 0.45rem; }

/* Source d'un tarif : tenue sur une ligne, le libellé complet reste en infobulle. */
small.source {
  display: block; color: var(--gris); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 22rem; margin-top: 0.15rem;
}

/* ─────────── Tableaux filtrables ─────────── */

.tableau-filtrable th.triable { padding: 0; }
.tableau-filtrable th.triable a {
  display: block; padding: 0.5rem 0.6rem; color: var(--couleur-primaire);
  text-decoration: none; white-space: nowrap;
}
.tableau-filtrable th.triable a:hover { background: #e3edf5; }
/* La flèche indique la colonne de tri et son sens. */
.tableau-filtrable th.triable a::after { content: ""; opacity: 0.35; margin-left: 0.35rem; }
.tableau-filtrable th.triable:not(.trie-asc):not(.trie-desc) a::after { content: "↕"; }
.tableau-filtrable th.trie-asc a::after { content: "↑"; opacity: 1; }
.tableau-filtrable th.trie-desc a::after { content: "↓"; opacity: 1; }

.ligne-filtres td { padding: 0.35rem 0.4rem; background: #fbfcfd; vertical-align: top; }
.ligne-filtres input, .ligne-filtres select { width: 100%; font-size: 0.85rem; padding: 0.3rem 0.4rem; }
.ligne-filtres select + select { margin-top: 0.25rem; }
.ligne-filtres .bornes { display: flex; gap: 0.25rem; }
.ligne-filtres .bornes input { width: 50%; text-align: right; }

/* Sections repliables : le résumé se comporte comme un titre de carte cliquable. */
details.carte > summary {
  cursor: pointer; list-style: none; margin: -0.25rem 0 0.25rem;
  display: flex; align-items: center; gap: 0.5rem;
}
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary::before {
  content: "▸"; color: var(--gris); font-size: 0.8rem; transition: transform 0.15s;
}
details.carte[open] > summary::before { transform: rotate(90deg); }
details.carte > summary h2 { margin: 0; }
details.carte > summary:hover h2 { color: var(--couleur-accent); }
.tableau-filtrable th.colonne-prix, .tableau-filtrable td.colonne-prix { width: 9rem; }
.tableau-filtrable th.colonne-tva, .tableau-filtrable td.colonne-tva { width: 6.5rem; }

/* ─────────── Sélection multiple ─────────── */

th.colonne-case, td.colonne-case { width: 2.5rem; text-align: center; padding-right: 0; }
th.colonne-case input, td.colonne-case input { width: auto; margin: 0; }

.barre-selection {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding: 0.7rem 0.9rem;
  background: var(--couleur-primaire-claire);
  border: 1px solid var(--couleur-bordure); border-radius: 6px;
}
.barre-selection [data-compteur] { font-weight: 600; color: var(--couleur-primaire); }
.barre-selection small { flex-basis: 100%; }

/* ─────────── Saisie assistée d'adresse ─────────── */

.suggestions-adresse {
  list-style: none; margin: 0.15rem 0 0; padding: 0; position: absolute; z-index: 20;
  background: #fff; border: 1px solid var(--couleur-bordure); border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 51, 102, 0.12); max-width: 34rem; width: 100%;
  max-height: 15rem; overflow-y: auto;
}
.suggestions-adresse li { padding: 0.45rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.suggestions-adresse li:hover { background: var(--couleur-primaire-claire); }
.champ { position: relative; }