:root {
  --navy: #1f4e79;
  --navy-fonce: #163a5c;
  --ocre: #c99a4b;
  --creme: #faf9f4;
  --creme-2: #f1ede2;
  --encre: #2a2c31;
  --texte: #3a3d44;
  --gris: #6b6f7a;
  --ligne: #e2ddd0;
  --blanc: #ffffff;
  --titres: 'Playfair Display', Georgia, serif;
  --corps: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--corps); font-size: 17px; line-height: 1.6; color: var(--texte); background: #e4dfd2; }
.site { max-width: 1140px; margin: 0 auto; background: var(--creme); min-height: 100vh; box-shadow: 0 0 0 1px #d6d0bf, 0 12px 48px rgba(31, 41, 55, .10); display: flex; flex-direction: column; }
.site > main { flex: 1 0 auto; }
a { color: var(--navy); }
a:hover { color: var(--navy-fonce); }
img { max-width: 100%; }
.conteneur { max-width: 1040px; margin: 0 auto; padding: 0 48px; }

/* bandeau maquette */
.maquette { background: #8a4b00; color: #fff; text-align: center; font-size: 13px; padding: 6px 12px; letter-spacing: .3px; }

/* en-tête */
.entete { background: var(--blanc); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 10; }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.marque { font-family: var(--titres); font-size: 24px; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: .3px; }
.nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--encre); font-weight: 600; font-size: 15px; }
.nav a:hover, .nav a.actif { color: var(--navy); }
.nav a.actif { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--ocre); text-decoration-thickness: 2px; }

/* boutons */
.bouton { display: inline-block; background: var(--ocre); color: var(--navy) !important; font-weight: 700; text-decoration: none; padding: 11px 22px; border-radius: 6px; border: 2px solid var(--ocre); font-size: 16px; }
.bouton:hover { background: #d8ad62; border-color: #d8ad62; }
.bouton.clair { background: transparent; color: var(--blanc) !important; border-color: rgba(255, 255, 255, .7); }
.bouton.clair:hover { background: rgba(255, 255, 255, .1); }
.bouton.contour { background: transparent; color: var(--navy) !important; border-color: var(--navy); }
.bouton.contour:hover { background: var(--navy); color: var(--blanc) !important; }
.nav .bouton { padding: 8px 16px; font-size: 15px; }

/* bannière d'accueil */
.banniere { background: var(--navy); color: var(--creme); padding: 72px 0 64px; }
.banniere h1 { font-family: var(--corps); font-size: 36px; line-height: 1.3; margin: 0 0 30px; font-weight: 600; font-style: normal; letter-spacing: -.2px; color: var(--blanc); max-width: 820px; }
.banniere .accroche { font-family: var(--titres); font-style: italic; font-size: 23px; line-height: 1.4; color: #e8e4d8; max-width: 760px; margin: 0 0 32px; }
.banniere .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.titre-page { background: var(--navy); color: var(--blanc); padding: 48px 0 40px; }
.titre-page h1 { font-family: var(--titres); font-size: 40px; margin: 0 0 8px; }
.titre-page p { margin: 0; color: #e8e4d8; font-size: 18px; max-width: 760px; }

/* sections */
.section { padding: 60px 0; }
.section + .section { padding-top: 0; }
.section.alternee { background: var(--blanc); padding-top: 60px; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.section.alternee + .section { padding-top: 60px; }
h2 { font-family: var(--titres); font-size: 32px; line-height: 1.2; color: var(--navy); margin: 0 0 14px; font-weight: 600; }
h3 { font-family: var(--titres); font-size: 21px; color: var(--navy); margin: 0 0 8px; font-weight: 600; }
.intro { font-size: 18px; max-width: 760px; margin: 0 0 24px; }
.intro + .intro { margin-top: -12px; }
.justifie { text-align: justify; hyphens: auto; }

/* auteurs */
.auteurs { display: flex; gap: 96px; flex-wrap: wrap; justify-content: center; margin-top: 28px; }
.auteur { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.medaillon { width: 132px; height: 132px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.medaillon img { filter: grayscale(100%); display: block; width: 169.7px; height: 169.7px; max-width: none; margin: -7.1px 0 0 -25.9px; }
.auteur .nom { font-weight: 700; color: var(--encre); }

/* titres partagés */
.points { display: grid; gap: 18px; max-width: 860px; }
.points p { margin: 0; }

/* cartes */
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin-top: 8px; }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-top: 3px solid var(--navy); border-radius: 8px; padding: 22px 24px; }
.carte .etiquette { font-size: 13px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.carte p { margin: 0; }
.carte.article .etiquette { color: var(--ocre); }
.carte.article h3 { font-size: 19px; }

/* bloc d'appel */
.appel { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.appel .texte { max-width: 640px; }

/* abonnement */
.abonnement { background: var(--navy); color: var(--creme); border-radius: 10px; padding: 36px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.abonnement h2 { color: var(--blanc); }
.abonnement .prix { font-family: var(--titres); font-size: 44px; font-weight: 700; color: var(--blanc); margin: 4px 0 18px; }
.abonnement .sans-obligation { margin: -6px 0 22px; max-width: 30em; font-size: 16px; line-height: 1.55; color: var(--creme); }
.abonnement .ttc { color: #cfd8e2; margin: -14px 0 14px; font-size: 15px; }
.abonnement .prix span { font-family: var(--corps); font-size: 18px; font-weight: 400; color: #cfd8e2; }
.abonnement ul { margin: 0 0 24px; padding-left: 20px; }
.abonnement li { margin: 6px 0; }
.abonnement .etiquette { font-size: 13px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ocre); margin-bottom: 10px; }
.contact a { color: var(--blanc); }
.contact .lien-site { display: inline-flex; align-items: center; gap: 7px; background: var(--ocre); color: var(--navy) !important; font-weight: 700; font-size: 15px; line-height: 1.3; text-decoration: none; padding: 3px 12px; border-radius: 5px; margin-bottom: 10px; }
.contact .courriel { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 600; }
.contact svg { flex-shrink: 0; }

/* questions */
.faq details { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--encre); }
.faq details p { margin: 10px 0 0; }

/* pages légales */
.legal { max-width: 820px; }
.contact p { margin: 0 0 16px; color: var(--creme); }
.formulaire { max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.formulaire .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.formulaire input, .formulaire select, .formulaire textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 10px 12px; border: 1px solid #d8d2c2; border-radius: 6px; background: #fff; color: inherit; }
.formulaire textarea { resize: vertical; }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 2px solid var(--ocre); outline-offset: 1px; }
.formulaire .pot { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.formulaire .mention-rgpd { font-size: 13px; color: #6b6f7a; margin: 0; }
.formulaire .bouton { align-self: flex-start; border: 0; cursor: pointer; }
@media (max-width: 640px) { .formulaire .champs { grid-template-columns: 1fr; } }
.legal h2 { font-size: 24px; margin-top: 32px; }
.a-completer { background: #fff3d6; border: 1px dashed #c99a4b; border-radius: 4px; padding: 0 4px; font-style: italic; }
.encadre-maquette { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 8px; padding: 14px 18px; margin: 0 0 24px; font-size: 15px; }

/* pied de page */
.pied { background: var(--encre); color: #c9cbd1; padding: 20px 0 16px; margin-top: 0; font-size: 13px; }
.pied a { color: #e8e4d8; }
.pied .liens { display: flex; gap: 6px 20px; flex-wrap: wrap; align-items: baseline; margin-bottom: 8px; }
.pied .avert { font-size: 11px; line-height: 1.45; color: #9a9da6; font-style: italic; text-align: justify; hyphens: auto; border-top: 1px solid #44474f; padding-top: 8px; margin: 8px 0 0; }

/* simulateur (styles repris de l'outil interne, limités à son conteneur) */
.simulateur { --accent: #1f4e79; --line: #e4e2da; --muted: #6b6f7a; --soft: #eef2f7; --card: #fff; font-size: 15px; }
.simulateur .card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; overflow-x: auto; }
.simulateur .muted { color: var(--muted); font-size: 14px; }
.simulateur table { border-collapse: collapse; width: 100%; font-size: 14px; }
.simulateur th, .simulateur td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
.simulateur th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; background: var(--soft); }
.simulateur th:first-child, .simulateur td:first-child, .simulateur th.l, .simulateur td.l { text-align: left; }
.simulateur .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.simulateur .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; }
.simulateur .kpi .l { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.simulateur .kpi .v { font-size: 24px; font-weight: 600; margin-top: 2px; color: var(--encre); }
.simulateur .kpi .s { font-size: 12px; color: var(--muted); }
.simulateur .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.simulateur input[type=text] { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.simulateur .btn { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.simulateur .btn.sec { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
.simulateur .btn.sm { padding: 4px 10px; font-size: 13px; }
.simulateur .btn[disabled] { opacity: .5; cursor: default; }
.simulateur details { margin-top: 14px; }
.simulateur summary { cursor: pointer; font-weight: 600; }
.simulateur label input[type=checkbox] { transform: scale(1.1); margin-right: 4px; }

@media (min-width: 900px) {
  .site { max-width: min(1140px, calc(100% - 80px)); margin: 0 auto; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .banniere { padding: 48px 0 44px; }
  .banniere h1 { font-size: 27px; }
  .conteneur { padding: 0 20px; }
  .site { box-shadow: none; }
  h2 { font-size: 27px; }
  .section { padding: 44px 0; }
  .abonnement { grid-template-columns: 1fr; padding: 28px 24px; }
  .auteurs { gap: 32px; justify-content: center; }
  .nav { gap: 14px; }
}

/* spécimen affiché dans la page (document A4 de 794 px) */
.cadre-document { margin-top: 20px; max-width: 796px; overflow: hidden; border: 1px solid var(--ligne); border-radius: 8px; background: var(--blanc); }
.cadre-document iframe { display: block; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; }