/* 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-integration {
--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-integration * { box-sizing: border-box; }
.dp-integration { 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-integration .wrap { max-width: 1258px; margin: 0 auto; padding: 0 var(--gut); }
.dp-integration h1, .dp-integration h2, .dp-integration 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-integration h1, .dp-integration h2, .dp-integration h3, .dp-integration h4, .dp-integration .brand, .dp-integration .kicker .head, .dp-integration .display { font-variant-ligatures: no-common-ligatures; }
.dp-integration h1 { font-size: clamp(37.4px, 5.5vw, 61.2px); line-height: 1.06; }
.dp-integration h2 { font-size: clamp(24.65px, 2.8vw, 32.3px); line-height: 1.15; }
.dp-integration 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-integration 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-integration .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-integration .soft { color: var(--ink-soft); }
.dp-integration strong { font-weight: 640; }
.dp-integration a { color: var(--navy); }
.dp-integration :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-integration section { padding: clamp(37.4px, 5vw, 57.8px) 0; }
.dp-integration .stack { display: flex; flex-direction: column; gap: 17px; }
.dp-integration .top { display: flex; align-items: center; justify-content: space-between; gap: 17px;
padding: 22.1px 0 0; }
.dp-integration .brand { font-family: var(--serif); font-size: 20.4px; font-weight: 600; }
.dp-integration .brand span { color: var(--navy); }
.dp-integration .top a.back { font-size: 15.3px; color: var(--ink-soft); text-decoration: none; }
.dp-integration .top a.back:hover { color: var(--ink); }
.dp-integration .hero { padding: clamp(37.4px, 5vw, 61.2px) 0 clamp(23.8px, 3vw, 34px); }
.dp-integration .hero .lede { margin-top: 18.7px; color: var(--ink-soft); font-size: 18.36px; }
.dp-integration .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-integration .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-integration .legend li { display: flex; align-items: baseline; gap: 10.2px; }
.dp-integration .legend li::before { flex: none; width: 1.1em; text-align: center; font-weight: 700; }
.dp-integration .legend .lg-inc::before { content: "●"; color: var(--accent); }
.dp-integration .legend .lg-opt::before { content: "+"; color: var(--ink-faint); font-family: var(--mono); }
/* --- les trois paliers ---------------------------------------------------------
Meme ossature que les cartes de prix de tarifs_doliplus.html (.tier), mais ce
qui distingue un palier n'est pas un montant : c'est un ENGAGEMENT. La carte
porte donc un titre, ce qu'on attend, ce qu'on donne — et le palier courant se
signale par un filet marine, jamais par une couleur de fond de plus. */
.dp-integration .paliers { display: grid; gap: 17px; margin-top: 27.2px;
grid-template-columns: repeat(auto-fit, minmax(289px, 1fr)); }
.dp-integration .palier { background: var(--surface); border: 1px solid var(--rule);
border-top: 3px solid var(--rule); padding: 20.4px 22.1px 22.1px;
display: flex; flex-direction: column; gap: 9.35px; }
.dp-integration .palier.gold { border-top-color: var(--navy); }
.dp-integration .palier.platine { border-top-color: var(--accent); }
.dp-integration .palier .rang { font-family: var(--mono); font-size: 12.24px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.dp-integration .palier h3 { margin: 0; }
.dp-integration .palier .pour { color: var(--ink-soft); font-size: 16.49px; }
.dp-integration .palier ul { margin: 5.1px 0 0; padding: 0; list-style: none; display: flex;
flex-direction: column; gap: 7.14px; font-size: 16.15px; }
.dp-integration .palier li::before { content: "\2022"; color: var(--navy); margin-right: 9.35px;
font-weight: 700; }
.dp-integration .palier.platine li::before { color: var(--accent); }
/* L'engagement demande se lit en dernier, detache : c'est la contrepartie. */
.dp-integration .palier .engagement { margin-top: auto; padding-top: 12.75px;
border-top: 1px solid var(--rule); font-size: 15.3px;
color: var(--ink-soft); }
/* --- ce que chacun apporte --- */
.dp-integration .duo { display: grid; gap: 17px; grid-template-columns: repeat(auto-fit, minmax(323px, 1fr)); }
.dp-integration .panel { background: var(--surface); border: 1px solid var(--rule); padding: 20.4px 22.1px; }
.dp-integration .panel h3 { margin-bottom: 11.9px; }
.dp-integration .panel ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column;
gap: 7.14px; font-size: 16.49px; }
.dp-integration .panel.vous li::before { content: "\2192"; color: var(--ink-faint); margin-right: 9.35px;
font-family: var(--mono); }
.dp-integration .panel.nous li::before { content: "\25CF"; color: var(--accent); margin-right: 9.35px; }
.dp-integration .panel.vous { background: var(--surface-2); }
/* --- les etapes --- */
.dp-integration .etapes { list-style: none; margin: 23.8px 0 0; padding: 0; display: grid; gap: 15.3px;
grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); counter-reset: e; }
.dp-integration .etapes li { counter-increment: e; background: var(--surface); border: 1px solid var(--rule);
padding: 17px 19.55px; font-size: 16.49px; }
.dp-integration .etapes li::before { content: counter(e); display: block; font-family: var(--serif);
font-size: 27.2px; line-height: 1; color: var(--navy);
margin-bottom: 6.8px; }
/* --- bandeau preuve --- */
.dp-integration .band { background: var(--band-bg); color: var(--band-ink); margin-top: 40.8px; }
.dp-integration .band .wrap { padding-top: clamp(37.4px, 5vw, 51px); padding-bottom: clamp(37.4px, 5vw, 51px); }
.dp-integration .band h2 { color: var(--band-ink); }
.dp-integration .band p { color: var(--band-soft); margin-top: 13.6px; }
.dp-integration .cta { display: flex; flex-wrap: wrap; gap: 11.9px; margin-top: 23.8px; }
.dp-integration .cta a { display: inline-block; padding: 11.9px 20.4px; text-decoration: none; font-weight: 640;
font-size: 16.15px; }
.dp-integration .cta a.primary { background: var(--accent); color: #1a1006; }
.dp-integration .cta a.ghost { border: 1px solid var(--band-soft); color: var(--band-ink); }
.dp-integration .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-integration .internal { background: var(--surface-2); border-top: 3px solid var(--accent); margin-top: 42.5px; }
.dp-integration .internal .wrap { padding-top: 34px; padding-bottom: 51px; }
.dp-integration .internal h2 { font-size: 21.25px; }
.dp-integration .internal p, .dp-integration .internal li { font-size: 15.81px; color: var(--ink-soft); max-width: 78ch; }
.dp-integration .internal ul { padding-left: 18.7px; display: flex; flex-direction: column; gap: 6.8px; }
.dp-integration .internal .warn { border-left: 3px solid var(--accent); padding-left: 17px; margin-top: 17px; }
@media (prefers-reduced-motion: reduce) {
.dp-integration * { transition: none !important; }
}