:root {
  --paillasse: #F2F4F1;
  --blanc: #FBFCFA;
  --encre: #0D2633;
  --encre-douce: #4A5E69;
  --trait: #C8D2D0;
  --cobalt: #2743E8;
  --cobalt-pale: #E6EAFD;
  --ambre: #E6A23C;
  --ambre-pale: #FCEFD8;
  --vert: #1E7A4F;
  --rouge: #B3261E;
  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gouttiere: clamp(16px, 4vw, 48px);
  --page: min(1240px, 100% - 2 * var(--gouttiere));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paillasse); color: var(--encre); font: 400 1.0625rem/1.6 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.page { width: var(--page); margin-inline: auto; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: -.01em; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--encre); color: var(--blanc); padding: .6rem 1rem; }
.evitement:focus { top: 1rem; }

h1, h2, h3 { font-stretch: 125%; font-weight: 700; line-height: 1.02; letter-spacing: -.025em; margin: 0; }
h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.3rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; max-width: 64ch; }

/* Emplacements à compléter : visibles exprès */
.todo { background: var(--ambre-pale); outline: 1px dashed var(--ambre); padding: 0 .3em; border-radius: 2px; font-style: normal; color: var(--encre); }

/* En-tête */
.entete { background: var(--paillasse); border-bottom: 1px solid var(--trait); position: sticky; top: 0; z-index: 20; }
.entete .page { display: flex; align-items: center; gap: 2rem; min-height: 66px; }
.marque { display: flex; align-items: center; gap: .6rem; white-space: nowrap; text-decoration: none; font-weight: 700; font-stretch: 125%; font-size: 1.3rem; letter-spacing: -.02em; }
.marque svg { width: 32px; height: 32px; flex: none; }
.nav { display: flex; align-items: center; gap: 1.8rem; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.nav .bouton { text-decoration: none; }
@media (max-width: 760px) {
  .entete .page { gap: 1rem; }
  .nav { gap: 1rem; font-size: .95rem; }
  .nav .large { display: none; }
  .marque { font-size: 1.1rem; gap: .45rem; }
  .marque svg { width: 28px; height: 28px; }
  .nav .bouton { padding: 0 .8rem; }
}
.court { display: none; }
@media (max-width: 480px) { .court { display: inline; } .long { display: none; } }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 1.4rem; border: 0; border-radius: 4px; background: var(--cobalt); color: #fff; font-weight: 600; text-decoration: none; cursor: pointer; }
.bouton:hover { background: #1C33C0; }
.bouton.contour { background: none; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.bouton.contour:hover { background: var(--blanc); }
.nav .bouton { min-height: 40px; padding: 0 1rem; }

/* Hero : le chromatogramme */
.hero { padding-top: clamp(44px, 7vw, 96px); }
.hero-haut { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2rem 4rem; align-items: end; }
.hero h1 { max-width: 11ch; }
.hero-texte p { font-size: 1.2rem; color: var(--encre-douce); }
@media (max-width: 900px) { .hero-haut { grid-template-columns: 1fr; } }
.chromato { margin-top: clamp(28px, 4vw, 48px); position: relative; }
.chromato svg { width: 100%; height: auto; display: block; overflow: visible; }
.chromato .trace { fill: none; stroke: var(--cobalt); stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 2400; stroke-dashoffset: 0; animation: tracer 2.6s cubic-bezier(.45, 0, .2, 1) .2s both; }
@keyframes tracer { from { stroke-dashoffset: 2400; } }
.chromato .axe { stroke: var(--encre); stroke-width: 1.2; }
.chromato .grad { stroke: var(--trait); stroke-width: 1; }
.chromato text { font: 500 13px var(--mono); fill: var(--encre-douce); }
.chromato .marqueur { fill: var(--ambre); animation: apparaitre .4s ease 2.5s both; }
.chromato .etiquette { animation: apparaitre .4s ease 2.6s both; }
.chromato .etiquette text { fill: var(--encre); font-family: var(--sans); font-size: 15px; font-weight: 600; }
@keyframes apparaitre { from { opacity: 0; } }
.chromato .trace, .chromato .axe, .chromato .grad { vector-effect: non-scaling-stroke; }
@media (max-width: 640px) {
  .chromato svg { height: 180px; }
  .chromato text, .chromato .etiquette, .chromato .grad { display: none; }
  .chromato .trace { stroke-width: 2.4; }
  .chromato .marqueur { display: none; }
}
.chromato figcaption { font-size: .85rem; color: var(--encre-douce); margin-top: .6rem; }

/* Vérification */
.verifier { display: flex; gap: .5rem; flex-wrap: wrap; }
.verifier label { flex-basis: 100%; font-weight: 600; }
.verifier input { flex: 1 1 220px; min-height: 52px; padding: 0 1rem; border: 1.5px solid var(--encre); border-radius: 4px; background: var(--blanc); font-family: var(--mono); font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; }
.verifier input::placeholder { color: #9AAAB0; }
.verifier .bouton { min-height: 52px; }
.aide { font-size: .9rem; color: var(--encre-douce); margin-top: .6rem; }

/* Sections */
.bloc { padding-block: clamp(64px, 9vw, 120px); }
.bloc + .bloc { border-top: 1px solid var(--trait); }
.bloc-tete { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 4rem; align-items: end; margin-bottom: 2.6rem; }
.bloc-tete p { margin: 0; color: var(--encre-douce); }
@media (max-width: 860px) { .bloc-tete { grid-template-columns: 1fr; } }
.sombre { background: var(--encre); color: var(--paillasse); }
.sombre .bloc-tete p, .sombre p { color: #B8C6CC; }
.sombre .todo { color: var(--encre); }

/* Tableau des tests */
.tests { width: 100%; border-collapse: collapse; }
.tests th { text-align: left; font-size: .85rem; font-weight: 600; color: var(--encre-douce); padding: .6rem 1rem .6rem 0; border-bottom: 1.5px solid var(--encre); }
.tests td { padding: 1.3rem 1rem 1.3rem 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tests td:first-child { width: 26%; }
.tests .nom-test { font-weight: 700; font-stretch: 125%; font-size: 1.25rem; letter-spacing: -.015em; display: block; }
.tests .question { color: var(--encre-douce); }
.tests .prix { font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .tests thead { display: none; }
  .tests tr { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--trait); }
  .tests td { border: 0; padding: 0; }
  .tests td:first-child, .tests td.methode { grid-column: 1 / -1; width: auto; }
  .tests td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; color: var(--encre-douce); }
}

/* Étapes : une vraie séquence */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: etape; }
.etapes li { counter-increment: etape; padding: 1.4rem 1.4rem 0 0; border-top: 2px solid var(--paillasse); position: relative; }
.etapes li::before { content: counter(etape); position: absolute; top: -1.05rem; left: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ambre); color: var(--encre); font: 600 .95rem var(--mono); display: grid; place-items: center; }
.etapes h3 { margin: .6rem 0 .5rem; }
@media (max-width: 900px) { .etapes { grid-template-columns: 1fr 1fr; row-gap: 2.6rem; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* Le rapport */
.rapport { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.rapport figure { margin: 0; }
.rapport img { box-shadow: 0 1px 2px rgba(13, 38, 51, .12), 0 18px 40px -12px rgba(13, 38, 51, .28); background: #fff; }
.rapport figcaption { font-size: .85rem; color: var(--encre-douce); margin-top: .8rem; }
.liste { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.liste li { padding: .7rem 0 .7rem 1.6rem; border-bottom: 1px solid var(--trait); position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: .7rem; height: 2px; background: var(--cobalt); }
@media (max-width: 860px) { .rapport { grid-template-columns: 1fr; } }

/* Règles d'indépendance */
.regles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 4rem; }
.regles h3 { margin-bottom: .5rem; }
.regles p { margin: 0; }
@media (max-width: 760px) { .regles { grid-template-columns: 1fr; } }
.declaration { margin-top: 3rem; padding: 1.4rem 1.6rem; border: 1px solid #2E4755; border-radius: 4px; }
.declaration h3 { font-size: 1.05rem; margin-bottom: .4rem; }

/* Labo */
.equipement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.equipement div { border-top: 1.5px solid var(--encre); padding-top: 1rem; }
.equipement h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.equipement p { color: var(--encre-douce); margin: 0; }
@media (max-width: 760px) { .equipement { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--trait); }
.faq details:first-of-type { border-top: 1px solid var(--trait); }
.faq summary { cursor: pointer; list-style: none; padding: 1.2rem 2.4rem 1.2rem 0; font-weight: 600; font-size: 1.15rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 1rem; font: 400 1.6rem var(--mono); color: var(--cobalt); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--encre-douce); }

/* Pages intérieures */
.tete-page { padding-block: clamp(40px, 6vw, 80px) 2rem; }
.tete-page p { font-size: 1.2rem; color: var(--encre-douce); margin-top: 1.2rem; }
.methode-detail { display: grid; grid-template-columns: 1fr 2fr; gap: 1.6rem 4rem; padding-block: 2.4rem; border-top: 1px solid var(--trait); }
.methode-detail dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 1rem 0 0; }
.methode-detail dt { color: var(--encre-douce); }
.methode-detail dd { margin: 0; font-weight: 500; }
@media (max-width: 760px) { .methode-detail { grid-template-columns: 1fr; } }

/* Formulaires */
.formulaire { display: grid; gap: 1.6rem; max-width: 820px; padding-bottom: clamp(64px, 8vw, 110px); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
legend { font-weight: 700; font-stretch: 125%; font-size: 1.35rem; letter-spacing: -.015em; margin-bottom: 1rem; padding: 0; }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .deux { grid-template-columns: 1fr; } }
.champ { display: grid; gap: .35rem; font-weight: 500; }
.champ small { font-weight: 400; color: var(--encre-douce); }
.champ input, .champ select, .champ textarea { min-height: 48px; padding: .6rem .8rem; border: 1px solid #9AAAB0; border-radius: 4px; background: var(--blanc); width: 100%; }
.champ textarea { min-height: 96px; resize: vertical; }
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 640px) { .cases { grid-template-columns: 1fr; } }
.case { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--trait); border-radius: 4px; background: var(--blanc); cursor: pointer; }
.case:has(input:checked) { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.case input { margin-top: .3rem; accent-color: var(--cobalt); width: 18px; height: 18px; flex: none; }
.case b { display: block; }
.case span { font-size: .9rem; color: var(--encre-douce); }
.erreur { color: var(--rouge); font-weight: 500; }

/* Bordereau d'envoi */
#slip { scroll-margin-top: 90px; }
.bordereau { background: #fff; border: 1.5px solid var(--encre); padding: clamp(20px, 3vw, 36px); max-width: 820px; margin-bottom: 2rem; }
.bordereau-tete { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1.5px solid var(--encre); padding-bottom: 1rem; margin-bottom: 1rem; }
.bordereau .numero { font: 600 1.6rem var(--mono); letter-spacing: .02em; }
.bordereau dl { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1rem; margin: 0; }
.bordereau dt { color: var(--encre-douce); }
.bordereau-date { text-align: right; }
@media (max-width: 640px) { .bordereau-date { text-align: left; } }
.bordereau dd { margin: 0; font-weight: 500; }
.actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Résultat de vérification */
.verdict { max-width: 900px; margin-top: 2rem; padding-bottom: clamp(64px, 8vw, 110px); }
.statut { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; border-radius: 4px; margin-bottom: 1.6rem; }
.statut svg { width: 28px; height: 28px; flex: none; margin-top: .1rem; }
.statut h2 { font-size: 1.4rem; margin-bottom: .3rem; }
.statut p { margin: 0; }
.statut.ok { background: #E3F2EA; border-left: 4px solid var(--vert); }
.statut.remplace { background: var(--ambre-pale); border-left: 4px solid var(--ambre); }
.statut a { color: inherit; }
.statut.inconnu { background: #FBE9E7; border-left: 4px solid var(--rouge); }
.fiche-rapport dl { display: grid; grid-template-columns: 12rem 1fr; gap: .5rem 1rem; margin: 0 0 1.6rem; }
.fiche-rapport dt { color: var(--encre-douce); }
.fiche-rapport dd { margin: 0; font-weight: 500; }
.resultats { width: 100%; border-collapse: collapse; margin-bottom: 1.6rem; }
.resultats th { text-align: left; font-size: .85rem; color: var(--encre-douce); font-weight: 600; border-bottom: 1.5px solid var(--encre); padding: .5rem 1rem .5rem 0; }
.resultats td { border-bottom: 1px solid var(--trait); padding: .8rem 1rem .8rem 0; }
.resultats .val { font-weight: 700; font-size: 1.1rem; }
@media (max-width: 640px) { .fiche-rapport dl, .bordereau dl { grid-template-columns: 1fr; gap: 0; } .fiche-rapport dd, .bordereau dd { margin-bottom: .6rem; } }

.photo-rapport { margin: 0 0 1.6rem; max-width: 440px; }
.photo-rapport img { width: 100%; border: 1px solid var(--trait); }
.photo-rapport figcaption { font-size: .85rem; color: var(--encre-douce); margin-top: .5rem; }

/* Tarifs : formule illimitée et paiement */
.tableau-defile { overflow-x: auto; }
.tests .nom-test a { text-decoration: none; }
.tests .nom-test a:hover { text-decoration: underline; text-decoration-color: var(--cobalt); }
.offre { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 3rem; align-items: center; margin-top: 2.4rem; padding: clamp(20px, 3vw, 32px); background: var(--encre); color: var(--paillasse); border-radius: 4px; }
.offre h3 { font-size: 1.6rem; margin-bottom: .5rem; }
.offre p { color: #B8C6CC; margin: 0; }
.offre-prix { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.offre-prix b { font-stretch: 125%; font-size: 2.4rem; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.offre-prix span { color: #B8C6CC; margin-bottom: .8rem; }
.offre .bouton.contour { color: var(--paillasse); box-shadow: inset 0 0 0 1.5px var(--paillasse); }
.offre .bouton.contour:hover { background: #17384A; }
@media (max-width: 700px) { .offre { grid-template-columns: 1fr; } .offre-prix { justify-items: start; text-align: left; } }
.note-paiement { margin-top: 1.2rem; color: var(--encre-douce); font-size: .95rem; }
.tests .prix, .total { font-variant-numeric: tabular-nums; }

/* Envoi d'échantillon */
.total { font-weight: 600; margin: .4rem 0 0; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.expedition { max-width: 820px; padding: 1.6rem; margin-bottom: clamp(64px, 8vw, 110px); border: 1.5px solid var(--encre); border-radius: 4px; background: var(--blanc); }
.expedition h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.expedition address { font-style: normal; font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; }
.expedition p { margin: 0; color: var(--encre-douce); }

/* Pages légales */
.legal { max-width: 760px; padding-bottom: clamp(64px, 8vw, 110px); }
.legal h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
.legal p { color: var(--encre); }

/* Vérification : formulaire + aide */
.verif-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2rem clamp(32px, 6vw, 96px); align-items: start; padding-bottom: clamp(64px, 8vw, 110px); }
@media (max-width: 900px) { .verif-grille { grid-template-columns: minmax(0, 1fr); } }
.verif-principal .verdict { margin-top: 1.6rem; padding-bottom: 0; }
.verif-principal h1 { font-size: clamp(2.6rem, 5.2vw, 4.2rem); }
.reassurance { margin: .9rem 0 0; color: var(--encre-douce); font-size: .95rem; }
.verif-aide { padding-top: clamp(40px, 6vw, 80px); }
.verif-aide figure { margin: 0 0 2rem; }
.verif-aide img { width: 100%; border: 1px solid var(--trait); border-radius: 4px; background: #fff; }
.verif-aide figcaption { font-size: .9rem; color: var(--encre-douce); margin-top: .6rem; }
.verif-aide h2 { font-size: 1.35rem; margin-bottom: .8rem; }
.controles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait); }
.controles li { padding: .85rem 0; border-bottom: 1px solid var(--trait); color: var(--encre-douce); }
.controles b { color: var(--encre); }
.signalement { display: grid; gap: .9rem; margin-top: 1.4rem; padding: 1.4rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: 4px; }
.signalement h3 { font-size: 1.2rem; }
.signalement p { margin: 0; color: var(--encre-douce); }
.lien-signaler { border: 0; background: none; padding: 0; color: var(--encre-douce); text-decoration: underline; cursor: pointer; font-size: .95rem; }

/* Pied */
.pied { background: var(--encre); color: #B8C6CC; padding-block: clamp(44px, 6vw, 72px) 2rem; }
.pied-haut { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.pied .marque { color: var(--paillasse); margin-bottom: .8rem; }
.pied h3 { font: 600 .95rem var(--sans); color: var(--paillasse); margin-bottom: .8rem; letter-spacing: 0; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied a { text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied-bas { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid #2E4755; font-size: .85rem; }
@media (max-width: 760px) { .pied-haut { grid-template-columns: 1fr 1fr; } .pied-haut > :first-child { grid-column: 1 / -1; } }

@media print {
  .entete, .pied, .tete-page, .formulaire, .actions, .evitement { display: none !important; }
  body { background: #fff; }
  .bordereau { border: 1.5px solid #000; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 761px) { .tests td[data-label="Turnaround"] { white-space: nowrap; } }