/* ════════════════════════════════════════════════════════════════════════════
   QUENTIS — pages de contenu (takeoff, appel d'offres, sous-traitant)

   ⚠ SOURCE UNIQUE DE LA PALETTE POUR CES PAGES. index.html garde son <style>
   inline : il fonctionne, il est en ligne, on n'y touche pas. Les valeurs
   ci-dessous en sont la copie exacte — encre #0C1B2E, fond #F5F1E9, vert
   #6FB23C/#3E8E32, Manrope + IBM Plex Mono. Toute divergence ferait deux
   Quentis visuellement différents sur le même domaine.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --fond:#F5F1E9; --encre:#0C1B2E; --texte:#4B5768; --doux:#8790A0;
  --carte:#FDFCFA; --bord:#E1DCD1; --bord-clair:#E7E3DB;
  --vert:#6FB23C; --vert-fonce:#3E8E32; --vert-lien:#2E7D32;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--fond);font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--encre);overflow-x:hidden;}
::selection{background:#6FB23C33;}
a{color:var(--vert-lien);text-decoration:none;}
a:hover{color:var(--encre);}
a:focus-visible,button:focus-visible{outline:2px solid var(--vert-fonce);outline-offset:3px;border-radius:4px;}

/* ── Ossature ─────────────────────────────────────────────────────────── */
.enveloppe{max-width:1200px;margin:0 auto;padding:0 30px;}
.colonne{max-width:760px;margin:0 auto;padding:0 30px;}   /* ~68 caractères de large */

.q-nav{color:#414F63;font-size:14.5px;font-weight:600;transition:color .15s ease;}
.q-nav:hover{color:var(--encre);}
.q-ghost{font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:10px;background:transparent;color:var(--encre);border:1px solid #D6D0C4;display:inline-block;transition:border-color .15s ease,background .15s ease;}
.q-ghost:hover{border-color:var(--encre);background:#0C1B2E08;}
.q-primary{font-weight:800;font-size:13.5px;padding:11px 18px;border-radius:10px;background:var(--vert);color:#082610;border:none;display:inline-block;transition:filter .15s ease,box-shadow .15s ease;}
.q-primary:hover{filter:brightness(1.04);box-shadow:0 10px 24px rgba(111,178,60,.32);color:#082610;}

/* ── Typographie de contenu ───────────────────────────────────────────── */
.fil{font-size:13px;color:var(--doux);font-weight:600;padding:26px 0 0;}
.fil a{color:var(--doux);}
.fil a:hover{color:var(--encre);}
.oeil{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--vert-fonce);margin:38px 0 18px;}
h1{font-size:clamp(32px,4.6vw,50px);line-height:1.06;font-weight:800;letter-spacing:-.028em;margin:0 0 20px;text-wrap:balance;}
.chapeau{font-size:clamp(16px,1.7vw,19px);color:var(--texte);line-height:1.6;margin:0 0 34px;text-wrap:pretty;}
h2{font-size:clamp(23px,3vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.16;margin:52px 0 14px;text-wrap:balance;}
h3{font-size:18px;font-weight:800;margin:32px 0 10px;}
p{font-size:15.5px;color:var(--texte);line-height:1.72;margin:0 0 16px;}
strong{color:var(--encre);font-weight:700;}
ul{margin:0 0 18px;padding-left:0;list-style:none;}
li{font-size:15.5px;color:var(--texte);line-height:1.7;margin:0 0 11px;padding-left:26px;position:relative;}
li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--vert);}

/* ── Blocs ────────────────────────────────────────────────────────────── */
.carte{background:var(--carte);border:1.5px solid var(--bord);border-radius:15px;padding:24px 26px;box-shadow:0 1px 2px rgba(12,27,46,.04);}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0;}
.grille .carte p:last-child{margin-bottom:0;}
.etiquette{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--vert-fonce);text-transform:uppercase;margin-bottom:9px;}
.note{border-left:3px solid var(--vert);background:#6FB23C0F;border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0;}
.note p:last-child{margin-bottom:0;}

/* Les tableaux comparatifs débordent sur mobile : ils défilent dans leur
   propre boîte, jamais la page. */
.defile{overflow-x:auto;margin:26px 0;border:1.5px solid var(--bord);border-radius:15px;background:var(--carte);}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px;}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--bord-clair);color:var(--texte);vertical-align:top;}
th{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5B6675;background:#F4F1EB;}
tbody tr:last-child td{border-bottom:none;}
td:first-child{color:var(--encre);font-weight:700;}

/* ── Questions ────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--bord-clair);padding:16px 0;}
summary{font-size:16px;font-weight:700;color:var(--encre);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";font-size:20px;font-weight:500;color:var(--vert-fonce);flex-shrink:0;}
details[open] summary::after{content:"–";}
details p{margin:12px 0 2px;}

/* ── Fin de page ──────────────────────────────────────────────────────── */
.appel{background:var(--encre);border-radius:18px;padding:clamp(30px,4vw,44px);margin:60px 0 0;color:#fff;}
.appel h2{color:#fff;margin:0 0 12px;}
.appel p{color:#B9C2CE;margin:0 0 24px;}
.suite{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0 0;}
.suite a.carte{display:block;}
.suite a.carte:hover{border-color:#DAD4C8;box-shadow:0 18px 44px rgba(12,27,46,.10);}
.suite .titre{font-size:16px;font-weight:800;color:var(--encre);margin-bottom:7px;}
.suite p{font-size:14px;margin:0;}

footer{border-top:1px solid var(--bord-clair);margin-top:70px;}
.pied{max-width:1200px;margin:0 auto;padding:34px 30px 46px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;}
.pied a{font-size:13.5px;color:#5B6675;font-weight:600;}

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