/* Sœur de memoire_affaire.html et fonctionnalites_doliplus.html — MÊMES TOKENS.
Sur cette page, l'orange signale « c'est compris, vous ne le paierez pas en plus ». */
.dp-tarifs {
--bg: #F9F9F9;
--surface: #FFFFFF;
--surface-2: #F1F3F8;
--ink: #302d2c;
--ink-soft: #474E59; /* 7,97:1 — etait #5C6572 a 5,6 */
--ink-faint: #5C6572; /* 4,76:1 — etait #8A919C a 3,02, sous le seuil */
--rule: #DCE2EC;
--navy: #0b4384;
--navy-hover:#083465;
--lilac-wash:#F3ECF8;
--accent: #ff6900;
--band-bg: #0b4384;
--band-deep: #072e5c;
--band-ink: #FFFFFF;
--band-soft: #b9cbe4;
--serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
--sans: "Open Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
--gut: clamp(21.25px, 4vw, 42.5px);
}
.dp-tarifs * { box-sizing: border-box; }
.dp-tarifs { background: var(--bg); color: var(--ink); font-family: var(--sans);
font-size: 16.5px; line-height: 1.6; margin: 0; -webkit-font-smoothing: antialiased; }
.dp-tarifs .wrap { max-width: 1258px; margin: 0 auto; padding: 0 var(--gut); }
.dp-tarifs h1, .dp-tarifs h2, .dp-tarifs h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0;
letter-spacing: -0.012em; }
/* Fraunces dessine une ligature « ff » fantaisiste (affaire, offre, chiffre…) :
jugee laide par GP le 03/09. On coupe les ligatures courantes sur tout ce qui
porte la serif — les lettres restent celles de Fraunces, elles ne se collent plus. */
.dp-tarifs h1, .dp-tarifs h2, .dp-tarifs h3, .dp-tarifs h4, .dp-tarifs .brand, .dp-tarifs .kicker .head, .dp-tarifs .display { font-variant-ligatures: no-common-ligatures; }
.dp-tarifs h1 { font-size: clamp(37.4px, 5.5vw, 61.2px); line-height: 1.06; }
.dp-tarifs h2 { font-size: clamp(24.65px, 2.8vw, 32.3px); line-height: 1.15; }
.dp-tarifs h3 { font-size: 19.04px; }
/* Plus de borne de lecture : les paragraphes tiennent toute la largeur, comme la
grille (demande GP, 02/09). Les blocs qui gardent une borne le disent en clair. */
.dp-tarifs p { margin: 0; max-width: none; }
/* Le chapeau QUALIFIE le titre qui suit — il doit se lire, pas se deviner. À 11.9px en
ink-faint il passait pour une décoration : GP ne faisait plus le lien avec le H2, et sur
« Comparer ce qui est comparable » cela rendait le titre suivant ambigu. Remonté à 13.94px,
en ink-soft, et rapproché de son titre. */
.dp-tarifs .eyebrow { font-family: var(--mono); font-size: 13.94px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
margin-bottom: 6.8px; }
.dp-tarifs .soft { color: var(--ink-soft); }
.dp-tarifs strong { font-weight: 640; }
.dp-tarifs a { color: var(--navy); }
.dp-tarifs :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-tarifs section { padding: clamp(37.4px, 5vw, 57.8px) 0; }
.dp-tarifs .stack { display: flex; flex-direction: column; gap: 17px; }
.dp-tarifs .top { display: flex; align-items: center; justify-content: space-between; gap: 17px;
padding: 22.1px 0 0; }
.dp-tarifs .brand { font-family: var(--serif); font-size: 20.4px; font-weight: 600; }
.dp-tarifs .brand span { color: var(--navy); }
.dp-tarifs .top a.back { font-size: 15.3px; color: var(--ink-soft); text-decoration: none; }
.dp-tarifs .top a.back:hover { color: var(--ink); }
.dp-tarifs .hero { padding: clamp(37.4px, 5vw, 61.2px) 0 clamp(23.8px, 3vw, 34px); }
.dp-tarifs .hero .lede { margin-top: 18.7px; color: var(--ink-soft); font-size: 18.36px; }
.dp-tarifs .hero .lede strong { color: var(--ink); }
/* Deux entrees SUPERPOSEES, marqueurs alignes en colonne. Cote a cote et separees
par un grand blanc (gap 27.2px), on lisait « compris dans le prix + facture en
option » comme UNE phrase — le « + » passait pour un connecteur (GP, 02/09).
Les marqueurs sont ceux des deux panneaux plus bas : meme code, meme sens. */
.dp-tarifs .legend { list-style: none; margin: 23.8px 0 0; padding: 0; display: grid;
gap: 6.8px; font-size: 15.64px; color: var(--ink-soft); max-width: 46ch; }
.dp-tarifs .legend li { display: flex; align-items: baseline; gap: 10.2px; }
.dp-tarifs .legend li::before { flex: none; width: 1.1em; text-align: center; font-weight: 700; }
.dp-tarifs .legend .lg-inc::before { content: "●"; color: var(--accent); }
.dp-tarifs .legend .lg-opt::before { content: "+"; color: var(--ink-faint); font-family: var(--mono); }
/* --- grille de prix --- */
.dp-tarifs .grid4 { display: grid; gap: 15.3px; grid-template-columns: repeat(auto-fit, minmax(187px, 1fr));
margin-top: 27.2px; }
.dp-tarifs .tier { background: var(--surface); border: 1px solid var(--rule); padding: 18.7px 19.55px 17px;
display: flex; flex-direction: column; gap: 2.55px; }
.dp-tarifs .tier .who { font-size: 14.45px; color: var(--ink-soft); }
.dp-tarifs .tier .amount { font-family: var(--serif); font-size: 39.95px; line-height: 1;
font-variant-numeric: tabular-nums; margin-top: 5.95px; }
.dp-tarifs .tier .unit { font-size: 13.6px; color: var(--ink-faint); }
.dp-tarifs .tier .sto { margin-top: 9.35px; padding-top: 8.5px; border-top: 1px solid var(--rule);
font-size: 14.11px; color: var(--accent); font-weight: 640; }
/* Un paragraphe qui COMMENTE la grille se lit sur la largeur de la grille : borne
a 62ch sous un tableau pleine largeur, il paraissait decroche (GP, 02/09). */
/* Elargi a la grille ET remonte en taille : a 15.64px sur 1200 px, la ligne etait
trop longue pour un corps aussi petit — illisible (GP, 02/09). */
.dp-tarifs .sous-grille { font-size: 17.34px; line-height: 1.6; }
.dp-tarifs .floor { margin-top: 17px; background: var(--surface-2); border-left: 3px solid var(--navy);
padding: 14.45px 18.7px; font-size: 16.49px; }
/* --- simulateur --- */
.dp-tarifs .calc { background: var(--surface); border: 1px solid var(--rule); padding: 22.1px;
display: grid; gap: 17px; grid-template-columns: 1fr; margin-top: 23.8px; }
@media (min-width: 782px) {
.dp-tarifs .calc { grid-template-columns: 1fr 1fr; align-items: center; }
}
.dp-tarifs .calc label { font-size: 15.3px; color: var(--ink-soft); display: block; margin-bottom: 8.5px; }
.dp-tarifs .calc .row { display: flex; align-items: center; gap: 13.6px; }
.dp-tarifs .calc input[type=range] { flex: 1; accent-color: var(--navy); }
.dp-tarifs .calc output.n { font-family: var(--mono); font-size: 17.85px; min-width: 3.5ch;
text-align: right; font-variant-numeric: tabular-nums; }
.dp-tarifs .calc .out { border-left: 3px solid var(--accent); padding-left: 17px; }
.dp-tarifs .calc .big { font-family: var(--serif); font-size: 42.5px; line-height: 1; white-space: nowrap;
font-variant-numeric: tabular-nums; color: var(--accent); }
.dp-tarifs .calc .detail { font-size: 14.96px; color: var(--ink-soft); margin-top: 6.8px; }
/* --- inclus / options --- */
.dp-tarifs .duo { display: grid; gap: 17px; grid-template-columns: repeat(auto-fit, minmax(323px, 1fr)); }
.dp-tarifs .panel { background: var(--surface); border: 1px solid var(--rule); padding: 20.4px 22.1px; }
.dp-tarifs .panel h3 { margin-bottom: 11.9px; }
.dp-tarifs .panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
gap: 7.14px; font-size: 16.49px; }
.dp-tarifs .panel.inc li::before { content: "●"; color: var(--accent); margin-right: 9.35px; }
.dp-tarifs .panel.opt li::before { content: "+"; color: var(--ink-faint); margin-right: 9.35px;
font-family: var(--mono); }
.dp-tarifs .panel.opt { background: var(--surface-2); }
/* --- tableaux --- */
.dp-tarifs .tw { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); margin-top: 20.4px; }
.dp-tarifs table { width: 100%; border-collapse: collapse; font-size: 15.81px; }
.dp-tarifs th, .dp-tarifs td { text-align: left; padding: 10.2px 16.15px; border-bottom: 1px solid var(--rule);
vertical-align: top; }
.dp-tarifs th { font-family: var(--mono); font-size: 11.56px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-faint); background: var(--surface-2); }
.dp-tarifs td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Un bouton par barreau : le visiteur qui a trouve SA ligne souscrit depuis elle,
sans redescendre chercher un bouton commun (demande GP, 03/09). Le lien porte la
formule : le tunnel s'ouvre deja rempli. */
.dp-tarifs td.tdcta { text-align: right; white-space: nowrap; width: 1%; }
.dp-tarifs .cta-ligne { display: inline-block; padding: 5.95px 13.6px; font-size: 14.96px;
font-weight: 640; color: #fff; background: var(--navy);
text-decoration: none; transition: background-color .15s ease; }
.dp-tarifs .cta-ligne:hover { background: var(--navy-hover); }
.dp-tarifs tr:last-child td { border-bottom: 0; }
/* La ligne mise en avant etait en LILAS : la seule touche violette d'une page
marine et orange (GP, 03/09). Elle passe au gris-bleu de la famille, celui des
encadres juste en dessous — et se detache toujours, la table etant blanche. */
.dp-tarifs tr.us td { background: var(--surface-2); font-weight: 640; }
/* --- bandeau preuve --- */
.dp-tarifs .band { background: var(--band-bg); color: var(--band-ink); margin-top: 40.8px; }
.dp-tarifs .band .wrap { padding-top: clamp(37.4px, 5vw, 51px); padding-bottom: clamp(37.4px, 5vw, 51px); }
.dp-tarifs .band h2 { color: var(--band-ink); }
.dp-tarifs .band p { color: var(--band-soft); margin-top: 13.6px; }
.dp-tarifs .cta { display: flex; flex-wrap: wrap; gap: 11.9px; margin-top: 23.8px; }
.dp-tarifs .cta a { display: inline-block; padding: 11.9px 20.4px; text-decoration: none; font-weight: 640;
font-size: 16.15px; }
.dp-tarifs .cta a.primary { background: var(--accent); color: #1a1006; }
.dp-tarifs .cta a.ghost { border: 1px solid var(--band-soft); color: var(--band-ink); }
.dp-tarifs .fineprint { margin-top: 20.4px; font-size: 15.3px; color: var(--ink-soft);
border-left: 3px solid var(--rule); padding-left: 17px; }
/* --- notes internes --- */
.dp-tarifs .internal { background: var(--surface-2); border-top: 3px solid var(--accent); margin-top: 42.5px; }
.dp-tarifs .internal .wrap { padding-top: 34px; padding-bottom: 51px; }
.dp-tarifs .internal h2 { font-size: 21.25px; }
.dp-tarifs .internal p, .dp-tarifs .internal li { font-size: 15.81px; color: var(--ink-soft); max-width: 78ch; }
.dp-tarifs .internal ul { padding-left: 18.7px; display: flex; flex-direction: column; gap: 6.8px; }
.dp-tarifs .internal .warn { border-left: 3px solid var(--accent); padding-left: 17px; margin-top: 17px; }
@media (prefers-reduced-motion: reduce) {
.dp-tarifs * { transition: none !important; }
}