/*
  Seen By Robots — système visuel "guichet d'enregistrement".
  Le site est un comptoir de dépôt officiel, pas un dashboard SaaS : on vient y
  déposer son entreprise dans un registre lu par les machines. Les tampons,
  numéros de dossier et lignes de registre encodent une vraie information
  (statut de vérification, date, numéro) — ce ne sont jamais des décorations.
*/

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;700&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --paper: #e3dac4;
  --paper-light: #f0ead9;
  --ink: #2a2618;
  /* #6b6248 initial ne passait pas le contraste AA (4.35:1) sur --paper ;
     assombri à 5.9:1 tout en gardant la même teinte brune. */
  --ink-soft: #564e3a;
  --seal: #9c3a28;
  --seal-fonce: #7c2e20;
  --verified: #35603f;
  --line: #c2b594;
  --max-width: 680px;
  --transition: 150ms ease;
}

* { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Public Sans', -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  padding: 0 20px 64px;
}

h1, h2, h3 {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: 2.1rem; max-width: 16ch; }
h2 { font-size: 1.15rem; margin-top: 0; }

p { margin: 0 0 1em; max-width: 62ch; }

a {
  color: var(--seal);
  text-underline-offset: 0.15em;
  transition: color var(--transition);
}

.dossier {
  max-width: var(--max-width);
  margin: 48px auto 0;
}

.entete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 12px;
  margin-bottom: 32px;
}

.entete .marque {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--transition);
}

.entete .marque:hover { color: var(--seal); }

.marque-sceau {
  flex: none;
  color: inherit;
  transform: rotate(-3deg);
}

.reference {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.promesse {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

.sous-promesse {
  font-size: 0.96rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin-top: -8px;
}

.tampon-garantie {
  font-size: 0.76rem;
  padding: 7px 14px;
  line-height: 1.3;
  max-width: 34ch;
}

.tampon-garantie.petit {
  margin: 24px 0 4px;
}

.lien-ancre-bloc { margin-top: -8px; }

.lien-ancre {
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: underline;
}

.connecteur {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 4px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--line);
}

.guichet h3.souligne {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

ul.liste-check li { padding-left: 22px; position: relative; }
ul.liste-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--verified);
  font-weight: 600;
}

.recap-prix {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

.micro {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
}

.faq { margin: 40px 0 32px; }
.faq h2 { margin-bottom: 4px; }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  /* zone tactile >= 48px même si la question tient sur une seule ligne
     courte : le padding vit sur <summary> (l'élément réellement cliquable),
     pas sur <details>. */
  min-height: 48px;
  padding: 12px 28px 12px 0;
  font-family: 'Zilla Slab', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--transition);
}
.faq summary:hover { color: var(--seal); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.1rem;
  color: var(--ink-soft);
  transition: transform var(--transition);
}
.faq details[open] summary::after { content: "\2013"; transform: translateY(-50%); }

.faq details p {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.94rem;
  max-width: 60ch;
}

.cta-bas { text-align: center; margin: 36px 0; }
.cta-bas .bouton { margin-top: 0; }

.guichet {
  background: var(--paper-light);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 28px 28px 24px;
  margin: 32px 0;
  position: relative;
  /* léger relief chaud, comme une feuille posée sur le comptoir : pas
     d'ombre "carte SaaS" froide, juste assez pour détacher le guichet
     du fond kraft. */
  box-shadow: 0 1px 0 rgba(42, 38, 24, 0.05), 0 10px 24px -18px rgba(42, 38, 24, 0.5);
}

.guichet::before {
  content: attr(data-numero);
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--ink);
  color: var(--paper-light);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  padding: 3px 10px;
}

.guichet h2 { margin-top: 8px; }
.guichet .detail { color: var(--ink-soft); font-size: 0.94rem; }

label {
  display: block;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 18px 0 6px;
}

label.case {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 14px 0;
  /* garantit une zone tactile confortable même si le texte tient sur une
     seule ligne courte : toute la <label> (texte + case) est cliquable. */
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
}

label.case input {
  margin-top: 2px;
  flex: none;
  /* case à cocher agrandie (~21px) : plus facile à voir/viser au pouce que
     la taille par défaut du navigateur (~13px), sans recréer un composant
     custom en JS. */
  width: 1.3em;
  height: 1.3em;
  accent-color: var(--seal);
  cursor: pointer;
}

input[type="text"], input[type="url"], input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ink-soft);
  background: #fff;
  color: var(--ink);
  border-radius: 1px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

input[type="text"]:hover, input[type="url"]:hover, input[type="email"]:hover {
  border-color: var(--ink);
}

input:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--seal);
  outline-offset: 2px;
}

button, .bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  background: var(--ink);
  color: var(--paper-light);
  border: none;
  padding: 12px 22px;
  min-height: 48px;
  margin-top: 16px;
  cursor: pointer;
  border-radius: 1px;
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

button:hover, .bouton:hover { background: var(--seal); }
button:active, .bouton:active { transform: translateY(1px); }

button.secondaire {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
button.secondaire:hover { background: var(--ink); color: var(--paper-light); }

/* CTA primaire = le geste payant (dépôt à 29 EUR), répété à 3 endroits du
   parcours. Le rouge cachet le distingue des actions gratuites/secondaires,
   comme un sceau de cire qui scelle la démarche. */
button.cta-primaire, .bouton.cta-primaire {
  background: var(--seal);
  box-shadow: 0 2px 0 rgba(42, 38, 24, 0.15);
}
button.cta-primaire:hover, .bouton.cta-primaire:hover { background: var(--seal-fonce); }

/* Bordure "double" façon tampon officiel imprimé deux fois : rendu natif
   via border-style:double, fonctionne quel que soit le fond (paper ou
   paper-light) sans avoir à recalculer une couleur de fond en dur. */
.tampon {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  border: 5px double currentColor;
  border-radius: 3px;
  padding: 9px 18px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  transform: rotate(-1.5deg);
  margin: 12px 0 20px;
  color: var(--ink-soft);
}

/* Le statut n'est jamais porté par la seule couleur : un glyphe distinct
   par état (admis / refusé / en cours) pour rester lisible en niveaux de
   gris et accessible aux daltoniens (WCAG 1.4.1). */
.tampon::before { font-weight: 700; }
.tampon:not(.admis):not(.refuse)::before { content: "\25D0"; }

.tampon.admis { color: var(--verified); transform: rotate(-2deg); }
.tampon.admis::before { content: "\2713"; }

.tampon.refuse { color: var(--seal); transform: rotate(2deg); }
.tampon.refuse::before { content: "\2715"; }

.tampon-garantie { border-width: 4px; padding: 6px 14px; }

.ligne-registre {
  border: none;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

/* Sur petit écran, le tableau garde ses vraies colonnes (la sémantique de
   table profite aux lecteurs d'écran) mais devient scrollable horizontalement
   plutôt que de casser la mise en page ou de forcer un zoom involontaire. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 4px;
}

.table-scroll-hint { display: none; }

table.registre {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.92rem;
}

table.registre th, table.registre td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

table.registre th {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* Première colonne (nom de l'IA) : vraie cellule d'en-tête de ligne
   (<th scope="row">) pour l'accessibilité, mais on annule le style
   "en-tête" hérité de la règle ci-dessus pour qu'elle reste lisible comme
   une donnée normale, pas comme un libellé de colonne. Elle reste visible
   (position: sticky) pendant le défilement horizontal, pour qu'on sache
   toujours à quelle IA correspond la ligne affichée. */
table.registre th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--paper);
  font-family: 'Public Sans', -apple-system, sans-serif;
  font-weight: 600;
  font-size: inherit;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 2px 0 0 var(--line);
}

ul.liste-sobre { list-style: none; margin: 0 0 1em; padding: 0; }
ul.liste-sobre li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}
ul.liste-sobre li:last-child { border-bottom: none; }

.mentions {
  max-width: var(--max-width);
  margin: 48px auto 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.avis {
  border-left: 3px solid var(--seal);
  padding: 10px 16px;
  margin: 20px 0;
  background: rgba(156, 58, 40, 0.06);
}

.avis.ok { border-color: var(--verified); background: rgba(53, 96, 63, 0.06); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  h1 { font-size: 1.7rem; }
  .guichet { padding: 22px 18px 18px; }

  /* Boutons de formulaire en pleine largeur : cible facile à toucher au
     pouce sans viser un petit bouton flottant au milieu de l'écran. */
  .guichet form button[type="submit"] { width: 100%; }

  /* Les tampons de statut (VÉRIFIÉ, ÉLIGIBLE AU REMBOURSEMENT, ADMIS...)
     doivent d'abord être lus vite sur un petit écran : la légère rotation
     "cachet" reste comme identité visuelle, mais on la réduit fortement
     pour ne pas gêner la lecture d'un texte parfois long qui peut passer
     sur 2 lignes ; l'espacement des lettres est aussi resserré pour éviter
     que le mot ne déborde. */
  .tampon:not(.tampon-garantie) {
    transform: rotate(-0.5deg);
    letter-spacing: 0.02em;
    font-size: 0.88rem;
    text-align: center;
  }
  .tampon.admis:not(.tampon-garantie) { transform: rotate(-0.5deg); }
  .tampon.refuse:not(.tampon-garantie) { transform: rotate(0.5deg); }
}

@media (max-width: 640px) {
  /* Le tableau comparatif reste une vraie <table> (accessible aux lecteurs
     d'écran) mais défile horizontalement sur mobile : on le signale
     explicitement au lieu de laisser deviner qu'il y a plus de colonnes. */
  .table-scroll-hint { display: block; }

  table.registre { font-size: 0.86rem; }
  table.registre th, table.registre td { padding: 8px; }
}