/* Solution Contacts — direction « Plateforme ». Toutes les valeurs viennent de tokens.css. */
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--f-texte); font-size: var(--t-corps); line-height: var(--i-corps);
  color: var(--encre); background: var(--blanc); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--f-titre); font-weight: var(--g-titre); text-wrap: balance; color: var(--nuit); }
p { text-wrap: pretty; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--soleil); outline-offset: 3px; }
.cadre { width: min(100% - 2 * var(--g), var(--max)); margin-inline: auto; }

.lien-evitement { position: absolute; left: var(--g); top: -100%; background: var(--nuit); color: var(--sur-nuit); padding: var(--s-1) var(--s-2); z-index: 10; }
.lien-evitement:focus { top: var(--s-1); }

/* ── Navigation ─────────────────────────────── */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); }
.logo { font-family: var(--f-titre); font-weight: var(--g-titre); font-size: 1.25rem; color: var(--nuit); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); }
.logo i { width: .8rem; height: .8rem; border-radius: var(--r-pastille); background: var(--soleil); }
.nav ul { list-style: none; display: flex; gap: var(--s-4); font-size: var(--t-petit); }
.nav ul a { text-decoration: none; }
.nav ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 860px) { .nav ul { display: none; } }
.logo, .nav .btn { white-space: nowrap; }
@media (max-width: 420px) { .logo { font-size: 1.05rem; } .nav .btn-petit { padding: var(--s-1) var(--s-2); font-size: var(--t-mini); } }

/* ── Boutons ────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; font: 600 var(--t-corps)/1 var(--f-texte);
  padding: var(--s-3); border-radius: var(--r-champ); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: background var(--duree), color var(--duree);
}
.btn-soleil { background: var(--soleil); color: var(--encre); }
.btn-soleil:hover { background: var(--nuit); color: var(--sur-nuit); }
.contact .btn-soleil:hover { background: var(--blanc); color: var(--nuit); }
.btn-ligne { border-color: var(--nuit); color: var(--nuit); }
.btn-ligne:hover { background: var(--nuit); color: var(--sur-nuit); }
.btn-petit { padding: var(--s-2) var(--s-3); font-size: var(--t-petit); }
.btn[disabled] { opacity: .6; cursor: wait; }

/* ── Ouverture ──────────────────────────────── */
.hero { display: grid; gap: var(--s-5); padding-block: var(--s-5) var(--s-6); align-items: center; }
@media (min-width: 980px) { .hero { grid-template-columns: 1fr 1.1fr; } }
.surtitre { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-mini); font-weight: 600; color: var(--nuit);
  background: var(--brume); border: 1px solid var(--filet); padding: var(--s-1) var(--s-2); border-radius: var(--r-pastille); }
.surtitre i { width: .5rem; height: .5rem; border-radius: var(--r-pastille); background: var(--soleil); }
.hero h1 { font-size: var(--t-h1); line-height: var(--i-h1); letter-spacing: var(--l-h1); margin-top: var(--s-3); }
.hero h1 span { color: var(--soleil-texte); }
.chapo { font-size: var(--t-chapo); color: var(--ardoise); margin-top: var(--s-3); max-width: var(--mesure); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.preuves { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-4); font-size: var(--t-petit); color: var(--ardoise); }
.preuves li { display: inline-flex; align-items: center; gap: var(--s-1); }
.preuves li::before { content: ""; width: .45rem; height: .45rem; border-radius: var(--r-pastille); background: var(--vert); }

/* L'écran de suivi — le geste */
.ecran { background: var(--nuit); border-radius: var(--r-ecran); padding: var(--s-3); }
.ecran-t { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); color: var(--sur-nuit); font-size: var(--t-mini); padding: 0 var(--s-1) var(--s-3); }
.ecran-t b { font-family: var(--f-titre); font-size: 1.05rem; }
.ecran-t span { color: var(--sur-nuit-2); }
.lignes { background: var(--blanc); border-radius: var(--r-carte); overflow: hidden; list-style: none; }
.ligne { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-2) var(--s-3); align-items: center; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--filet); font-size: var(--t-petit); }
.ligne:last-child { border-bottom: 0; }
.ligne b { display: block; font-weight: 600; }
.ligne small { color: var(--ardoise); font-size: var(--t-mini); }
.ligne .quand { color: var(--ardoise); font-size: var(--t-mini); }
.ligne.ouverte { background: var(--brume); }
.detail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.detail div { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-champ); padding: var(--s-1) var(--s-2); font-size: var(--t-mini); }
.detail span { display: block; color: var(--ardoise); }
.pastille { display: inline-block; font: 600 .75rem/1 var(--f-texte); padding: var(--s-1) var(--s-2); border-radius: var(--r-pastille); background: var(--gris-fond); color: var(--encre); white-space: nowrap; }
.pastille.ok { background: var(--vert-fond); color: var(--vert); }
.pastille.chaud { background: var(--soleil-fond); color: var(--soleil-texte); }
@media (max-width: 560px) { .detail { grid-template-columns: 1fr; } .ligne .quand { display: none; } .ligne { grid-template-columns: 1fr auto; } }

/* ── Méthode ────────────────────────────────── */
.bande { background: var(--brume); border-block: 1px solid var(--filet); padding-block: var(--s-6); }
.bande h2, .garanties h2, .contact h2 { font-size: var(--t-h2); line-height: var(--i-h2); letter-spacing: var(--l-h2); }
.etapes { list-style: none; counter-reset: e; display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 860px) { .etapes { grid-template-columns: repeat(4, 1fr); } }
.etapes li { counter-increment: e; }
.etapes li::before { content: counter(e); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-champ);
  background: var(--nuit); color: var(--sur-nuit); font: var(--g-titre) 1rem var(--f-titre); }
.etapes h3 { font-size: var(--t-h3); line-height: var(--i-h3); margin-top: var(--s-3); }
.etapes p { color: var(--ardoise); margin-top: var(--s-1); font-size: var(--t-petit); }

/* ── Garanties ──────────────────────────────── */
.garanties { padding-block: var(--s-7) var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .garanties { grid-template-columns: .9fr 1.1fr; } }
.garanties dl { display: grid; gap: var(--s-3); }
.garanties dt { font-weight: 600; font-size: 1.05rem; }
.garanties dd { color: var(--ardoise); margin-top: var(--s-1); }

/* ── Demande ────────────────────────────────── */
.contact { background: var(--nuit); color: var(--sur-nuit); border-radius: var(--r-ecran); padding: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: var(--s-4); margin-bottom: var(--s-6); scroll-margin-top: var(--s-3); }
@media (min-width: 900px) { .contact { grid-template-columns: .8fr 1.2fr; align-items: start; } }
.contact h2 { color: var(--sur-nuit); }
.contact > div > p { color: var(--sur-nuit-2); margin-top: var(--s-2); }
.form { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
.champ { display: grid; gap: var(--s-1); align-content: start; }
.champ label { font-size: var(--t-mini); font-weight: 600; }
.champ label small { font-weight: 400; color: var(--sur-nuit-2); }
.champ input, .champ select, .champ textarea {
  font: inherit; color: var(--encre); background: var(--blanc); border: 1px solid var(--filet);
  border-radius: var(--r-champ); padding: var(--s-2); min-height: 2.9rem; width: 100%;
}
.champ textarea { min-height: 6rem; resize: vertical; }
.large { grid-column: 1 / -1; }
.piege { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.statut { font-size: var(--t-petit); font-weight: 600; }
.statut.ok { color: var(--sur-nuit); }
.statut.ko { color: var(--soleil); }
.mention { font-size: var(--t-mini); color: var(--sur-nuit-2); }
.mention a { color: var(--sur-nuit); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }

/* ── Pied ───────────────────────────────────── */
.pied { border-top: 1px solid var(--filet); color: var(--ardoise); font-size: var(--t-mini); padding-block: var(--s-4);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.pied nav { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }
.pied a { text-underline-offset: 3px; }
.pied .acces a { color: var(--nuit); font-weight: 600; }

/* ── Page texte (mentions) ──────────────────── */
.texte { padding-block: var(--s-5) var(--s-6); max-width: 46rem; }
.texte h1 { font-size: var(--t-h2); line-height: var(--i-h2); letter-spacing: var(--l-h2); }
.texte h2 { font-size: var(--t-h3); margin-top: var(--s-4); }
.texte p { margin-top: var(--s-2); color: var(--ardoise); }