/* Corrigoo — feuille de style commune aux pages de contenu (/vs, /pour, /alternatives...).

   REGLE DE POLICE, copiee telle quelle de index.html, ne pas s'en ecarter :
   - le texte courant, les boutons et le pied de page sont dans la police du
     SYSTEME (-apple-system...). C'est la police de base du site.
   - Comfortaa, la police de la marque, sert UNIQUEMENT aux titres, aux libelles
     et aux petites phrases sous les titres. Elle n'est chargee qu'en 500 et 700 :
     on ne demande jamais une autre graisse, sinon le navigateur l'epaissit
     lui-meme et le rendu devient sale.
   - aucune police exterieure : ni Inter Tight, ni Google Fonts. Tout est heberge ici.

   Une seule feuille partagee : les pages generees ne recopient jamais le CSS de
   index.html, sinon on se retrouve avec 107 Ko de style duplique par page. */

@font-face { font-family: 'Comfortaa'; src: url('/Comfortaa-500-latin.woff2') format('woff2');
  font-weight: 500; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('/Comfortaa-500-latin-ext.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Comfortaa'; src: url('/Comfortaa-700-latin.woff2') format('woff2');
  font-weight: 700; font-display: swap; }
@font-face { font-family: 'Comfortaa'; src: url('/Comfortaa-700-latin-ext.woff2') format('woff2');
  font-weight: 700; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --ink: #2c2823; --paper: #f2ece1; --gray: #857c6e; --line: #e6dccb;
  --line-strong: #d9cdba; --surface: #ffffff; --surface-2: #fbf7f0;
  --chip: #ece3d4; --hover: #ece3d4; --hl: #e7ddca; --kbd-bg: #ffffff;
  --sel: #f4b8dc;
  --btn-bg: linear-gradient(180deg, #33302b, #201d18); --btn-ink: #ffffff;
  --systeme: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --marque: 'Comfortaa', -apple-system, "Helvetica Neue", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--systeme); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* ---------- barre du haut ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(242,236,225,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 10px; height: 64px; }
.nav .logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav .logo img.mark { height: 24px; width: auto; display: block; }
.nav .logo img.wm { height: 17px; width: auto; display: block; }
.nav .liens { display: flex; gap: 2px; margin-left: auto; }
/* Meme regle que la barre du haut de l'accueil : Comfortaa 600, gris, pastille au survol. */
.nav .liens a {
  font-family: var(--marque); font-weight: 600; font-size: 15px; letter-spacing: -.25px;
  color: var(--gray); text-decoration: none; padding: 8px 11px; border-radius: 9px;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.nav .liens a:hover { color: var(--ink); background: var(--hover); }
.nav .btn { margin-left: 4px; white-space: nowrap; }
@media (max-width: 860px) { .nav .liens { display: none; } .nav .btn { margin-left: auto; } }

/* Le bouton reste dans la police du systeme, comme « Commencer gratuitement »
   sur l'accueil. Ne pas lui mettre Comfortaa. */
.btn {
  display: inline-block; background: var(--btn-bg); color: var(--btn-ink);
  padding: 11px 20px; border-radius: 10px; text-decoration: none;
  font-weight: 700; font-size: 15px; line-height: 1.2;
  border: 1px solid transparent; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.13);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15); }
.btn:active { transform: translateY(0); }
.btn.clair { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn.clair:hover { background: var(--surface-2); border-color: var(--ink); }

/* ---------- fil d'Ariane ---------- */
.fil { font-size: 14px; color: var(--gray); padding-top: 24px; }
.fil a { color: var(--gray); }
.fil span { margin: 0 6px; }

/* ---------- titres, en Comfortaa comme sur l'accueil ---------- */
h1, h2, h3 { font-family: var(--marque); font-weight: 700; text-wrap: balance; }
h1 {
  font-size: clamp(30px, 4.4vw, 44px); line-height: 1.14;
  letter-spacing: -1.6px; margin: 14px 0 0; max-width: 20ch;
}
h1 .hl { background: linear-gradient(transparent 62%, var(--sel) 62%, var(--sel) 94%, transparent 94%); }
h2 { font-size: clamp(22px, 2.6vw, 29px); line-height: 1.22; letter-spacing: -.9px; margin: 48px 0 14px; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.45px; margin: 26px 0 8px; }

main p { margin: 0 0 14px; max-width: 68ch; }
main ul, main ol { max-width: 68ch; padding-left: 22px; margin: 0 0 16px; }
main li { margin-bottom: 7px; }

/* ---------- la reponse tout en haut ----------
   Comfortaa 500, comme les phrases placees sous les titres de l'accueil. */
.reponse {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-left: 4px solid var(--ink);
  border-radius: 14px; padding: 20px 22px; margin: 24px 0 8px;
  font-family: var(--marque); font-weight: 500;
}
.reponse p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.6; }
.reponse p:last-child { margin-bottom: 0; }
.reponse strong { font-weight: 700; }

/* ---------- tableau comparatif ---------- */
.tab-hote { overflow-x: auto; margin: 18px 0 8px; -webkit-overflow-scrolling: touch; }
table {
  border-collapse: collapse; width: 100%; min-width: 560px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  font-size: 15.5px;
}
caption {
  caption-side: top; text-align: left; color: var(--gray); font-size: 13.5px; padding-bottom: 8px;
  font-family: var(--marque); font-weight: 500;
}
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
/* Les libelles du comparatif sont en Comfortaa, comme dans le tableau de l'accueil. */
thead th, tbody th { font-family: var(--marque); font-weight: 700; }
thead th { background: var(--surface-2); font-size: 15px; letter-spacing: -.3px; }
tbody th { color: var(--ink); width: 27%; font-size: 15px; letter-spacing: -.3px; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
td .nc { color: var(--gray); font-style: italic; }
p.apres-tableau { color: var(--gray); margin-top: 10px; }

/* ---------- encarts ---------- */
.encart {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 18px 20px; margin: 18px 0;
}
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }
.encart .titre {
  font-family: var(--marque); font-weight: 700; letter-spacing: -.4px;
  margin-bottom: 6px; display: block; font-size: 17px;
}

.avant-apres { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 16px 0; }
@media (max-width: 700px) { .avant-apres { grid-template-columns: 1fr; } }
.avant-apres > div {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 14px 16px;
}
/* AVANT / APRES : meme etiquette que dans le bloc d'exemple de l'accueil. */
.avant-apres .et {
  font-family: var(--marque); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--gray); margin-bottom: 6px;
}
.avant-apres p { margin: 0; }

/* Les touches, dessinees comme celles de l'accueil : bord epais en bas. */
kbd {
  font-family: inherit; font-weight: 700; font-size: 13.5px;
  background: var(--kbd-bg); border: 1px solid var(--ink); border-bottom-width: 3px;
  border-radius: 7px; padding: 1px 7px; white-space: nowrap;
}

/* ---------- FAQ ---------- */
.faq { margin-top: 10px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 14px 18px; margin-bottom: 10px;
}
.faq summary {
  font-family: var(--marque); font-weight: 700; letter-spacing: -.4px;
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gray); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 10px 0 0; }

/* ---------- appel a l'action ---------- */
.cta {
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 18px; padding: 30px 28px; margin: 46px 0 10px; text-align: center;
}
.cta h2 { margin-top: 0; }
.cta p { max-width: 60ch; margin-left: auto; margin-right: auto; }
.cta .boutons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.cta .note { color: var(--gray); font-size: 14.5px; margin: 16px auto 0; }

/* ---------- liens internes ---------- */
.liens-internes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 16px 0; }
.liens-internes a {
  display: block; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 13px 16px; text-decoration: none;
  font-family: var(--marque); font-weight: 700; font-size: 15.5px; letter-spacing: -.4px;
}
.liens-internes a:hover { background: var(--chip); }
.liens-internes a span {
  display: block; color: var(--gray); font-size: 14px;
  font-family: var(--systeme); font-weight: 400; letter-spacing: normal; margin-top: 2px;
}

/* ---------- pied de page, identique a celui de l'accueil ---------- */
footer {
  position: relative; overflow: hidden; margin-top: 60px;
  background: #16130f; color: #a9a094; font-size: 14.5px;
}
footer .wrap { padding: 56px 24px 26px; }
footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
footer .col b {
  display: block; font-family: var(--marque); font-weight: 700; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: #7d7466; margin: 4px 0 18px;
}
footer .col a { display: block; color: #cfc7ba; font-weight: 500; margin-bottom: 13px; text-decoration: none; transition: color .15s; }
footer .col a:hover { color: #ffffff; }
footer .marque { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; }
footer .marque img.mark { width: 30px; height: 30px; }
footer .marque img.wm { height: 22px; width: auto; filter: invert(1) brightness(1.6); }
footer .tagline { max-width: 330px; line-height: 1.6; margin: 0 0 22px; }
footer .bas {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13.5px; color: #7d7466;
}
footer .bas p { margin: 0 0 8px; max-width: 78ch; }
footer .bas p:last-child { margin-bottom: 0; }
footer .bas a { color: #7d7466; text-decoration: none; }
footer .bas a:hover { color: #ffffff; }
@media (max-width: 900px) {
  footer .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  footer .col.marque-col { grid-column: 1 / -1; }
}
main { padding-bottom: 8px; }