/* L'attributaire · feuille de style unique.
 *
 * Deux regles gouvernent ce dessin.
 *
 * 1. LA COULEUR SIGNAL NE TOUCHE QUE DES DATES LIMITES. Pas un bouton, pas
 *    un titre, pas un accent decoratif. Comme elle n'apparait nulle part
 *    ailleurs, une date se lit comme une urgence sans qu'aucun mot ne le
 *    dise. Dans ce metier, manquer une date limite coute au client la
 *    totalite du marche : c'est le seul objet qui merite d'etre crie.
 *
 * 2. LES IDENTIFIANTS SONT EN CHASSE FIXE. Code CPV, numero d'avis, montant,
 *    SIREN. Ce sont des references que quelqu'un ira verifier.
 */

:root {
  color-scheme: dark;

  --fond:       #0A0C12;
  --fond-2:     #0E111A;
  --surface:    #141824;
  --surface-2:  #1B2030;
  --bord:       rgba(255, 255, 255, 0.09);
  --bord-fort:  rgba(255, 255, 255, 0.16);
  --texte:      #EDF0F6;
  --texte-2:    #98A1B4;
  --texte-3:    #6B7488;
  --signal:     #FF9047;   /* dates limites, et rien d'autre */
  --signal-fond: rgba(255, 144, 71, 0.12);
  --calme:      #82A9FF;   /* ce qui est couvert, ce qui est attribue */
  --calme-fond: rgba(130, 169, 255, 0.12);
  --ombre:      0 1px 2px rgba(0,0,0,.4), 0 12px 32px -8px rgba(0,0,0,.6);
  --ombre-forte: 0 2px 4px rgba(0,0,0,.5), 0 32px 64px -16px rgba(0,0,0,.8);

  --titrage: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --texte-f: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --chasse:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  --large: 68rem;
  --mesure: 36rem;
  --r: 14px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --fond:       #FAFBFD;
    --fond-2:     #F2F4F8;
    --surface:    #FFFFFF;
    --surface-2:  #F5F7FA;
    --bord:       rgba(12, 16, 26, 0.10);
    --bord-fort:  rgba(12, 16, 26, 0.18);
    --texte:      #0D1119;
    --texte-2:    #5A6376;
    --texte-3:    #838C9E;
    --signal:     #C8501A;
    --signal-fond: rgba(200, 80, 26, 0.10);
    --calme:      #2C5BC9;
    --calme-fond: rgba(44, 91, 201, 0.10);
    --ombre:      0 1px 2px rgba(12,16,26,.06), 0 10px 24px -8px rgba(12,16,26,.10);
    --ombre-forte: 0 2px 6px rgba(12,16,26,.08), 0 28px 56px -16px rgba(12,16,26,.16);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--texte-f);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambiance : une seule source lumineuse, derriere le haut de page. Sans elle
   le fond sombre est un mur plat ; avec deux elle devient une decoration. */
body::before {
  content: "";
  position: fixed;
  inset: -30vh 0 auto 0;
  height: 90vh;
  background:
    radial-gradient(60% 55% at 22% 30%, var(--calme-fond), transparent 70%),
    radial-gradient(45% 45% at 82% 8%, var(--signal-fond), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.chrome, main, .pied { position: relative; z-index: 1; }

/* ---------- barre haute ---------- */

.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
  background: color-mix(in srgb, var(--fond) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bord);
}

.chrome__marque {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--titrage);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
}

.chrome__note {
  font-family: var(--texte-f);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--texte-3);
}

.chrome__ecrire {
  flex: none;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--bord-fort);
  background: var(--surface);
  font-size: 0.83rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: border-color .18s, transform .18s;
}

.chrome__ecrire:hover { border-color: var(--texte-2); transform: translateY(-1px); }

/* ---------- rythme ---------- */

.bande {
  max-width: var(--large);
  margin: 0 auto;
  padding: 5rem 1.5rem;
}

.bande--serre { padding-top: 0; }

.bande__contenu { max-width: var(--large); margin: 0 auto; }

.mesure { max-width: var(--mesure); }

/* ---------- accroche en deux colonnes ---------- */

/* Le produit est un courrier : le montrer DANS le premier ecran, a cote de la
   promesse, vaut mieux que de le renvoyer plus bas. La premiere version
   laissait la moitie droite vide, ce qui donnait une page inachevee. */
.accroche {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 3.5rem;
  align-items: start;
  padding-top: 4.5rem;
}

.accroche__texte { min-width: 0; }

.accroche__texte .chapeau { max-width: none; }

.accroche__objet { min-width: 0; }

@media (max-width: 66rem) {
  .accroche { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* ---------- typographie ---------- */

.titre {
  font-family: var(--titrage);
  font-weight: 800;
  font-size: clamp(2.15rem, 4.6vw, 3.35rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 1.25rem;
  max-width: 16ch;
  text-wrap: balance;
}

.section-titre {
  font-family: var(--titrage);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.8vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
  margin: 0 0 1rem;
  max-width: 20ch;
  text-wrap: balance;
}

.rubrique {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--chasse);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin: 0 0 1.15rem;
}

.rubrique::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--bord-fort);
}

.chapeau { font-size: 1.18rem; line-height: 1.55; color: var(--texte-2); margin: 0 0 1.1rem; max-width: var(--mesure); }

.chapeau b, .chapeau strong { color: var(--texte); font-weight: 600; }

.bande p { max-width: var(--mesure); }

.appui { font-size: 0.92rem; color: var(--texte-2); }

a { color: inherit; text-underline-offset: 0.18em; text-decoration-color: var(--bord-fort); }

a:hover { text-decoration-color: currentColor; }

.date {
  font-family: var(--chasse);
  font-size: 0.9em;
  font-weight: 500;
  color: var(--signal);
  white-space: nowrap;
}

.calme { color: var(--calme); }

.ref { font-family: var(--chasse); font-size: 0.86em; color: var(--texte-3); white-space: nowrap; }

/* ---------- bouton ---------- */

.action {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--texte);
  color: var(--fond);
  font-family: var(--texte-f);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s, box-shadow .18s;
  box-shadow: var(--ombre);
}

.action:hover { transform: translateY(-2px); box-shadow: var(--ombre-forte); }

.action svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- entonnoir chiffre ---------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
  margin: 2.4rem 0 0;
  padding-top: 1.7rem;
  border-top: 1px solid var(--bord);
}

.chiffre__valeur {
  display: block;
  font-family: var(--chasse);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.05rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.chiffre__quoi { display: block; margin-top: 0.4rem; font-size: 0.86rem; color: var(--texte-2); max-width: 14ch; }

.chiffre--retenu .chiffre__valeur { color: var(--calme); }

/* ---------- le courrier ---------- */

.courrier {
  position: relative;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}

.courrier__barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--bord);
  background: var(--surface-2);
}

.courrier__pastille { width: 9px; height: 9px; border-radius: 50%; background: var(--bord-fort); }

.courrier__titre { margin-left: 0.5rem; font-family: var(--chasse); font-size: 0.72rem; color: var(--texte-3); }

.courrier__corps { padding: 1.6rem 1.5rem 1.25rem; }

.courrier__entete {
  font-family: var(--chasse);
  font-size: 0.75rem;
  line-height: 1.95;
  color: var(--texte-3);
  padding-bottom: 1rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--bord);
}

.courrier__entete b { color: var(--texte-2); font-weight: 500; }

.courrier__salut { margin: 0 0 1.4rem; color: var(--texte-2); max-width: none; }

.avis { padding: 1.35rem 0; border-top: 1px solid var(--bord); }

.avis:first-of-type { border-top: 0; padding-top: 0; }

.avis__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; margin-bottom: 0.5rem; }

.avis__acheteur { font-family: var(--titrage); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }

.etiquette {
  font-family: var(--chasse);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--bord-fort);
  color: var(--texte-3);
}

.etiquette--retenu { color: var(--calme); border-color: color-mix(in srgb, var(--calme) 42%, transparent); background: var(--calme-fond); }

.avis__objet { margin: 0 0 0.7rem; max-width: none; color: var(--texte-2); font-size: 0.98rem; }

.avis__verdict {
  margin: 0;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  font-size: 0.95rem;
  max-width: none;
}

.avis__verdict b { font-weight: 600; }

.avis__pied { margin: 0.75rem 0 0; font-family: var(--chasse); font-size: 0.73rem; color: var(--texte-3); max-width: none; }

.legende { font-size: 0.87rem; color: var(--texte-2); max-width: 46rem; margin: 1.1rem 0 0; }

/* ---------- l'echelle de couverture ---------- */

.echelle { margin: 2.5rem 0 0; }

.echelle__piste { display: grid; grid-template-columns: 1.15fr 1fr 1.35fr 1.1fr; gap: 6px; }

.zone {
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--surface);
  padding: 0.95rem 0.9rem 1rem;
  min-height: 100%;
}

.zone__jauge { height: 5px; border-radius: 999px; background: var(--bord); overflow: hidden; margin-bottom: 0.85rem; }

.zone__part { display: block; height: 100%; border-radius: 999px; background: var(--calme); }

.zone__montant { font-family: var(--chasse); font-size: 0.78rem; font-weight: 500; letter-spacing: -0.02em; display: block; margin-bottom: 0.35rem; }

.zone__etat { font-size: 0.86rem; font-weight: 600; display: block; margin-bottom: 0.3rem; color: var(--calme); }

.zone__note { font-size: 0.83rem; line-height: 1.5; color: var(--texte-2); margin: 0; max-width: none; }

/* La tranche que personne ne couvre. Elle n'est ni cachee ni attenuee : elle
   est la zone la plus dessinee du diagramme, parce que l'avouer est
   l'argument le plus fort de la page. */
.zone--aveugle {
  border-color: color-mix(in srgb, var(--signal) 45%, transparent);
  background:
    repeating-linear-gradient(-45deg, var(--signal-fond) 0 6px, transparent 6px 12px),
    var(--surface);
}

.zone--aveugle .zone__jauge { background: color-mix(in srgb, var(--signal) 28%, transparent); }

.zone--aveugle .zone__etat { color: var(--signal); }

.zone--aveugle .zone__note { color: var(--texte-2); }

/* ---------- cartes ---------- */

.cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }

.carte {
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.5rem 1.35rem;
}

/* Le titre est un <p>, donc `.carte p` (0,1,1) ecrasait `.carte__titre`
   (0,1,0) et lui imposait la couleur du corps de texte : 3,78:1, sous le
   minimum lisible. Le `:not()` retire le titre de la portee de la regle au
   lieu de surencherir sur la specificite, qui repousserait le probleme. */
.carte__titre {
  font-family: var(--titrage);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: -0.022em;
  margin: 0 0 0.55rem;
  color: var(--texte);
}

.carte p:not(.carte__titre) { margin: 0; font-size: 0.94rem; color: var(--texte-2); max-width: none; }

/* ---------- tarifs ---------- */

.tarifs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 2.5rem; }

.tarif {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surface);
  padding: 1.5rem 1.4rem;
}

.tarif--phare { border-color: color-mix(in srgb, var(--calme) 40%, transparent); background: linear-gradient(180deg, var(--calme-fond), transparent 55%), var(--surface); }

.tarif__prix { font-family: var(--chasse); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.04em; }

.tarif__unite { font-family: var(--texte-f); font-weight: 400; font-size: 0.9rem; color: var(--texte-3); letter-spacing: 0; }

.tarif__nom { font-family: var(--titrage); font-weight: 700; font-size: 1.04rem; letter-spacing: -0.02em; }

.tarif p { margin: 0; font-size: 0.92rem; color: var(--texte-2); max-width: none; }

/* ---------- fondateur ---------- */

.fondateur {
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--surface);
  padding: 2rem 1.8rem;
  margin-top: 2.5rem;
}

.fondateur p { max-width: 44rem; }

/* ---------- appel final ---------- */

.final {
  text-align: center;
  border: 1px solid var(--bord);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: 3.5rem 1.75rem;
  box-shadow: var(--ombre);
}

.final .section-titre { margin-left: auto; margin-right: auto; }

.final p { margin-left: auto; margin-right: auto; }

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

.legal .bande h2 {
  font-family: var(--titrage);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.024em;
  margin: 2.6rem 0 0.7rem;
  max-width: var(--mesure);
}

.legal .bande h2:first-of-type { margin-top: 1.6rem; }

.legal .bande ul { max-width: var(--mesure); padding-left: 1.15rem; color: var(--texte-2); }

.legal .bande li { margin-bottom: 0.55rem; }

.legal .bande p { color: var(--texte-2); }

.a-completer {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 6px;
  background: var(--signal-fond);
  border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  color: var(--signal);
  font-family: var(--chasse);
  font-size: 0.82em;
}

/* ---------- pied ---------- */

.pied {
  max-width: var(--large);
  margin: 3rem auto 0;
  padding: 2.25rem 1.5rem 3.5rem;
  border-top: 1px solid var(--bord);
}

.pied__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; font-size: 0.86rem; margin-bottom: 1.3rem; }

.pied__nav [aria-current="page"] { color: var(--texte-3); }

.pied__mention { margin: 0; font-size: 0.85rem; line-height: 1.6; color: var(--texte-2); max-width: 48rem; }

/* ---------- apparition ---------- */

/* L'apparition est une AMELIORATION, pas une condition d'affichage.
 *
 * La premiere version posait `opacity: 0` sur les sections et comptait sur un
 * observateur JavaScript pour les reveler. Une capture l'a prise en defaut :
 * seules la premiere section et le pied de page se sont affiches, tout le
 * milieu de la page est reste invisible. Si le script tarde, echoue, ou n'est
 * pas execute, le visiteur voit une page vide et ne le sait meme pas.
 *
 * D'ou le renversement : le contenu est visible par defaut, et l'etat masque
 * n'existe QUE si le script a pu poser la classe `js` sur <html>. Pas de
 * script, pas de masquage, page lisible. */
.js .monte { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }

.js .monte.vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .monte { opacity: 1; transform: none; transition: none; }
  .action:hover, .chrome__ecrire:hover { transform: none; }
}

a:focus-visible, .action:focus-visible, .chrome__ecrire:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- adaptation ---------- */

@media (max-width: 62rem) {
  .echelle__piste { grid-template-columns: repeat(2, 1fr); }
  .cartes { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
  .bande { padding: 3.5rem 1.25rem; }
  .tarifs { grid-template-columns: 1fr; }
  .chrome__note { display: none; }
  .chiffres { gap: 1.5rem; }
}

@media (max-width: 30rem) {
  .echelle__piste { grid-template-columns: 1fr; }
  .courrier__corps { padding: 1.25rem 1.1rem; }
  .final { padding: 2.5rem 1.25rem; }
}

/* ---------- formulaire de demande d'essai ---------- */

.formulaire {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  text-align: left;
}

.champ { display: flex; flex-direction: column; gap: 0.4rem; }

.champ--large { grid-column: 1 / -1; }

.champ__intitule { font-size: 0.83rem; font-weight: 600; color: var(--texte-2); }

.champ__saisie {
  font: inherit;
  font-size: 0.98rem;
  color: var(--texte);
  background: var(--fond-2);
  border: 1px solid var(--bord-fort);
  border-radius: 10px;
  padding: 0.72rem 0.85rem;
  width: 100%;
  transition: border-color .16s, box-shadow .16s;
}

.champ__saisie::placeholder { color: var(--texte-3); }

.champ__saisie:focus {
  outline: none;
  border-color: var(--calme);
  box-shadow: 0 0 0 3px var(--calme-fond);
}

select.champ__saisie { appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px;
  background-position: right 1.1rem center, right 0.75rem center;
  background-repeat: no-repeat; }

textarea.champ__saisie { resize: vertical; min-height: 5.5rem; }

/* Le piege a robots. `display:none` est le premier endroit ou un robot
   moderne regarde : on le sort du cadre a la place, et on le retire du
   parcours clavier et de la restitution vocale. */
.leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulaire__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.formulaire__note { margin: 0; font-size: 0.83rem; color: var(--texte-2); max-width: 30rem; }

@media (max-width: 46rem) {
  .formulaire { grid-template-columns: 1fr; }
}

/* La carte du fondateur en deux colonnes. La premiere version laissait sa
   moitie droite vide, ce qui donnait une page inachevee juste avant les
   tarifs. Plutot que de retrecir la carte, on remplit avec ce que « humain »
   veut dire concretement : c'est exactement ce que le lecteur se demande. */
.fondateur{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:2.5rem; align-items:start}
.fondateur__dit p{max-width:none}
.fondateur__fait{border-left:1px solid var(--bord); padding-left:2rem}
.fondateur__ligne{padding:0.9rem 0; border-top:1px solid var(--bord)}
.fondateur__ligne:first-child{border-top:0; padding-top:0}
.fondateur__quoi{display:block; font-family:var(--titrage); font-weight:700;
  font-size:0.97rem; letter-spacing:-0.018em; margin-bottom:0.2rem}
.fondateur__ligne p{margin:0; font-size:0.89rem; color:var(--texte-2); max-width:none}
@media (max-width:62rem){
  .fondateur{grid-template-columns:1fr; gap:1.75rem}
  .fondateur__fait{border-left:0; border-top:1px solid var(--bord);
    padding-left:0; padding-top:1.5rem}
}

/* Le portrait, a cote du nom. L'element `img` est absent tant qu'aucune photo
   n'est fournie : un `img` casse affiche une icone de fichier manquant, ce qui
   est pire que pas de portrait du tout. Le monogramme tient la place et le
   dessin, et la bascule vers la photo ne change que le HTML. */
.signature{display:flex; align-items:center; gap:1.1rem; margin-bottom:1rem}
.portrait{width:66px; height:66px; border-radius:50%; flex:none; overflow:hidden;
  border:1px solid var(--bord-fort); background:var(--surface-2);
  display:grid; place-items:center; box-shadow:var(--ombre)}
.portrait img{width:100%; height:100%; object-fit:cover; display:block}
.portrait__initiales{font-family:var(--titrage); font-weight:700; font-size:1.35rem;
  letter-spacing:-0.03em; color:var(--texte-2)}
.signature .section-titre{margin:0}
@media (max-width:30rem){ .portrait{width:54px; height:54px} }