/*
 * Docteur Pub — feuille de style unique.
 *
 * Les COULEURS, TAILLES et ESPACEMENTS ne sont pas définis ici : ils viennent de
 * theme.json, que WordPress expose en --wp--preset--*. On ne code jamais une
 * valeur en dur — changer theme.json doit suffire à changer le site.
 *
 * Ordre : alias → reset → base → layout → composants → utilitaires.
 */

/* ---------------------------------------------------------------- alias ---
 * Noms courts et lisibles au-dessus des variables générées.
 */
:root {
  --ink:       var(--wp--preset--color--ink);
  --ink-deep:  var(--wp--preset--color--ink-deep);
  --muted:     var(--wp--preset--color--muted);
  --line:      var(--wp--preset--color--line);
  --surface:   var(--wp--preset--color--surface);
  --bg:        var(--wp--preset--color--bg);
  --brand:     var(--wp--preset--color--brand);
  --brand-alt: var(--wp--preset--color--brand-alt);
  --link:      var(--wp--preset--color--link);

  /* Gris de TEXTE, assombri : #9898b1 ne passe pas AA sur blanc (2,8:1).
     La couleur d'origine reste disponible pour les filets et le décor. */
  --ink-soft: #5c5c78;                 /* 6,3:1 sur blanc */

  --s-xs: var(--wp--preset--spacing--20);
  --s-sm: var(--wp--preset--spacing--30);
  --s-md: var(--wp--preset--spacing--40);
  --s-lg: var(--wp--preset--spacing--50);
  --s-xl: var(--wp--preset--spacing--60);
  --s-2xl: var(--wp--preset--spacing--70);
  --s-3xl: var(--wp--preset--spacing--80);

  --measure: 44rem;                    /* mesure de lecture : ~80 caractères.
                                          34rem était nettement plus étroit que
                                          l'ancien site, qui allait jusqu'à 1140px. */
  --wide: 1200px;
  --gutter: clamp(1rem, 4vw, 1.875rem);

  --radius-media: 8px;                 /* hérité du site actuel */
  --radius-ui: 2px;
  --shadow-soft: 0 0 20px rgb(20 20 20 / 8%);

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

img, picture, svg, video { display: block; max-inline-size: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

/* ----------------------------------------------------------------- base --- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

a { color: var(--link); text-underline-offset: .18em; transition: color .2s var(--ease); }
a:hover, a:focus-visible { color: var(--brand-alt); }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-ui);
}

/* Cible tactile : 44px minimum sur tout ce qui se clique. */
a, button, [role="button"] { min-block-size: auto; }
.dp-nav a, .dp-btn { min-block-size: 44px; display: inline-flex; align-items: center; }

::selection { background: var(--brand); color: var(--bg); }

/* --------------------------------------------------------------- layout ---
 * Une seule grille, appliquée au conteneur de contenu. Chaque enfant tombe
 * dans la colonne de lecture ; .alignwide et .alignfull s'en échappent.
 */
.dp-flow > * + * { margin-block-start: var(--s-lg); }

.dp-content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--wide) - var(--measure)) / 2))
    [text-start] min(var(--measure), 100% - var(--gutter) * 2) [text-end]
    minmax(0, calc((var(--wide) - var(--measure)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.dp-content > *          { grid-column: text; }
.dp-content > .alignwide { grid-column: wide; }
.dp-content > .alignfull { grid-column: full; }

.dp-shell {
  inline-size: min(var(--wide), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Espacement vertical du flux rédactionnel. */
.dp-content > * + *      { margin-block-start: var(--s-lg); }
.dp-content > h2         { margin-block-start: var(--s-xl); }
.dp-content > h3         { margin-block-start: var(--s-lg); }
.dp-content > .alignfull { margin-block: var(--s-2xl); }

/* Une section porte son propre rythme vertical : la marge du flux ferait double. */
.dp-content > .alignfull:is(.dp-section, .dp-hero, .dp-cta) { margin-block: 0; }
.dp-content > .dp-hero:first-child { margin-block-start: 0; }

/* --------------------------------------------------------------- header --- */
.dp-header {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}

.dp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  padding-block: var(--s-md);
}

.dp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  font-weight: 700;
  font-size: 1.35rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--brand);          /* le mot suit la couleur du picto */
  text-decoration: none;

  /* Cartouche clair derrière la marque. Le rembourrage est dissymétrique :
     il compense le décalage optique des majuscules, comme sur l'ancien site. */
  background: #eceff4;
  padding: 8px 21px 4px 15px;
  border-radius: 4px;
}

/* Correction optique : les majuscules n'ont pas de jambage, leur centre visuel
   est plus haut que celui du picto. On remonte le picto de 3 px. */
.dp-brand__mark { transform: translateY(-3px); }

.dp-brand img { max-block-size: 44px; inline-size: auto; }
.dp-brand__mark { color: inherit; flex: 0 0 auto; }
.dp-brand:hover { color: var(--brand-alt); }

/* Navigation — reprend les codes du site actuel : majuscules, 700, interlettrage. */
.dp-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-nav a {
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand);          /* bleu, comme sur l'ancien site */
  text-decoration: none;
}

.dp-nav a:hover,
.dp-nav .current-menu-item > a { color: var(--ink-deep); }

/* Le bouton encadré de la nav : signature visuelle du site, conservée. */
.dp-nav .nav-button > a {
  border: 3px solid currentColor;
  border-radius: var(--radius-ui);
  color: var(--brand);
  padding-inline: var(--s-md);
}

.dp-nav .nav-button > a:hover { color: var(--brand-alt); }

/* Menu mobile : <details>, sans une ligne de JavaScript. */
.dp-burger { display: none; }
.dp-burger > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
}
.dp-burger > summary::-webkit-details-marker { display: none; }

@media (max-width: 860px) {
  .dp-burger { display: block; }
  .dp-nav--desktop { display: none; }
  .dp-burger[open] .dp-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--bg);
    border-block-end: 1px solid var(--line);
    padding: var(--s-md) var(--gutter);
    box-shadow: var(--shadow-soft);
  }
  .dp-burger .dp-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .dp-burger .dp-nav li + li { border-block-start: 1px solid var(--line); }
}

/* ----------------------------------------------------------- composants --- */
.dp-btn {
  --btn-bg: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
  padding: .7em 1.4em;
  border: 0;
  border-radius: var(--radius-ui);
  background: var(--btn-bg);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}

.dp-btn:hover { --btn-bg: var(--brand-alt); color: var(--bg); transform: translateY(-1px); }
.dp-btn--ghost { --btn-bg: transparent; color: var(--brand); border: 3px solid currentColor; }
.dp-btn--ghost:hover { color: var(--brand-alt); background: transparent; }

/* Carte d'article. */
.dp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-xl);
  padding: 0;
  margin: 0;
  list-style: none;
}

.dp-card { display: flex; flex-direction: column; gap: var(--s-sm); }

.dp-card__media img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-media);
}

.dp-card__title { font-size: 1.3125rem; font-weight: 600; line-height: 1.3; }
.dp-card__title a { color: var(--ink); text-decoration: none; }
.dp-card__title a:hover { color: var(--brand); }
.dp-card__meta { font-size: .9375rem; color: var(--ink-soft); }
.dp-card__excerpt { color: var(--ink-soft); }

/* Fil d'Ariane. */
.dp-crumbs { font-size: .9375rem; color: var(--ink-soft); }
.dp-crumbs ol { display: flex; flex-wrap: wrap; gap: .4em; list-style: none; margin: 0; padding: 0; }
.dp-crumbs li + li::before { content: "›"; margin-inline-end: .4em; color: var(--muted); }

/* En-tête d'article : même largeur que le corps du texte, pas celle du site. */
.dp-article__head {
  inline-size: min(var(--measure), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Média mis en avant. Affiché UNE seule fois, par single.php. */
.dp-featured { margin: var(--s-lg) 0 0; }
.dp-featured img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-soft);
}

/* Tableaux : 262 dans le contenu existant, ils doivent défiler sur mobile. */
.dp-table-scroll { overflow-x: auto; }
.dp-table-scroll:focus-visible { outline-offset: 4px; }

.wp-block-table table { inline-size: 100%; border-collapse: collapse; font-size: 1rem; }
.wp-block-table :is(th, td) { padding: .6em .8em; border: 1px solid var(--line); text-align: start; }
.wp-block-table thead th { background: var(--surface); font-weight: 600; }
.wp-block-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface) 50%, transparent); }

/* Contenu : images et citations. */
.entry-content :is(img, .wp-block-image img) { border-radius: var(--radius-media); }

.wp-block-quote {
  border-inline-start: 4px solid var(--brand);
  padding-inline-start: var(--s-md);
  font-style: italic;
  color: var(--ink-soft);
}

/* ────────────────────────────────────────────────────────── pied de page ──
 * Le bloc bleu nuit de l'ancien site, avec son bord supérieur en diagonale.
 * Il porte l'appel à l'action sur TOUTES les pages : c'est là qu'atterrit
 * un visiteur qui vient de lire 2 000 mots.
 */
.dp-footer {
  margin-block-start: var(--s-3xl);
  background: var(--ink-deep);
  color: var(--bg);
  padding-block: calc(var(--s-3xl) + 2.5rem) var(--s-2xl);

  /* La diagonale d'origine : le fond de la page mord dans le coin haut gauche. */
  clip-path: polygon(0 2.5rem, 100% 0, 100% 100%, 0 100%);
}

@media (max-width: 600px) {
  .dp-footer { clip-path: polygon(0 1.25rem, 100% 0, 100% 100%, 0 100%); }
}

.dp-footer__cta { text-align: center; }
.dp-footer__cta h2 {
  font-size: var(--wp--preset--font-size--heading);
  letter-spacing: -.015em;
  color: inherit;
}
.dp-footer__cta p {
  margin-block-start: var(--s-md);
  margin-inline: auto;
  max-inline-size: 40rem;
  color: #c3cee6;
}
.dp-footer__cta p:last-child { margin-block-start: var(--s-xl); }

/* Spécificité : .dp-footer a est déclaré plus bas et gagnerait à égalité.
   On qualifie donc le bouton par son conteneur. */
.dp-footer a.dp-btn--invert { background: var(--bg); color: var(--ink-deep); }
.dp-footer a.dp-btn--invert:hover { background: #dfe7f5; color: var(--ink-deep); }

.dp-footer__bar {
  margin-block-start: var(--s-3xl);
  padding-block-start: var(--s-lg);
  border-block-start: 1px solid rgb(255 255 255 / 14%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md) var(--s-xl);
  font-size: 1rem;
}

.dp-footer__copy { color: #9fb6e0; }

.dp-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md) var(--s-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dp-footer a { color: var(--bg); text-decoration: none; }
.dp-footer__nav a { color: #c3cee6; }
.dp-footer__nav a:hover { color: var(--bg); text-decoration: underline; }

/* --------------------------------------------------------- utilitaires --- */
.dp-sr {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Lien d'évitement : visible seulement au clavier. */
.dp-skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-md);
  z-index: 100;
  background: var(--ink-deep);
  color: var(--bg);
  padding: var(--s-sm) var(--s-md);
  border-radius: 0 0 var(--radius-ui) var(--radius-ui);
}

.dp-skip:focus { inset-block-start: 0; color: var(--bg); }

.dp-stack > * + * { margin-block-start: var(--s-md); }
.dp-section { padding-block: var(--s-3xl); }
.dp-section--tint { background: var(--surface); }

/* ═══════════════════════════════════════════════════════════════════════════
 * BLOCS MAISON
 *
 * Deux ajouts au système : les couleurs d'ÉTAT (restreint / actif) et une
 * fonte MONOSPACE système. Les deux sont justifiés par le sujet — ce site
 * parle de statuts de compte, et les messages de Meta sont de la sortie
 * machine. La mono ne coûte aucun téléchargement.
 * ══════════════════════════════════════════════════════════════════════════ */

:root {
  --alert: var(--wp--preset--color--alert);
  --ok:    var(--wp--preset--color--ok);
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* La voix du client. Un serif système : aucun téléchargement, et il tranche
     nettement avec la sans du site et la mono des messages machine. */
  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
}

/* Étiquette machine : sur-titres, codes, délais, statuts. */
.dp-eyebrow,
.dp-item__label,
.dp-status__ref,
.dp-status__tag,
.dp-more {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ───────────────────────────────────────────────────────────────── hero ── */
.dp-hero {
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border-block-end: 1px solid var(--line);
  padding-block: clamp(2.5rem, 7vw, 5rem);
}

.dp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .dp-hero__grid { grid-template-columns: 1fr; }
}

.dp-eyebrow { color: var(--brand); margin-block-end: var(--s-sm); }

.dp-hero__title {
  font-size: clamp(2.1rem, 1.1rem + 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;          /* le poids 700 respire mieux resserré */
  color: var(--ink-deep);
}

.dp-hero__sub {
  margin-block-start: var(--s-md);
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  color: var(--ink-soft);
  max-inline-size: 34rem;
}

.dp-hero__act {
  margin-block-start: var(--s-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-md);
}

.dp-btn--lg { padding: .85em 1.8em; font-size: 1.0625rem; }
.dp-btn--sm { padding: .55em 1.1em; font-size: .9375rem; }

.dp-hero__note { font-size: .9375rem; color: var(--ink-soft); }

/* L'illustration d'origine sert de scène ; le panneau de statut se pose dessus. */
.dp-hero__visual { position: relative; }

.dp-hero__illu {
  inline-size: 100%;
  max-inline-size: 30rem;
  block-size: auto;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .dp-hero__illu { max-inline-size: 22rem; }
}

/* ── LA SIGNATURE ────────────────────────────────────────────────────────
 * L'avis de statut que le visiteur a sous les yeux dans un autre onglet,
 * qui bascule de restreint à actif. Ce n'est pas un ornement : c'est
 * l'artefact du problème, et la promesse montrée plutôt qu'affirmée.
 * ─────────────────────────────────────────────────────────────────────── */
.dp-status {
  margin: 0;
  display: grid;
  gap: var(--s-sm);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s-md);
  box-shadow: 0 1px 2px rgb(20 20 20 / 5%), 0 12px 32px rgb(27 27 66 / 8%);
}

.dp-status__ref {
  color: var(--ink-soft);
  padding-block-end: var(--s-sm);
  border-block-end: 1px solid var(--line);
}

.dp-status__stack { display: grid; }

.dp-status__panel {
  grid-area: 1 / 1;                /* les deux états occupent la même case */
  border-inline-start: 3px solid;
  padding: var(--s-sm) 0 var(--s-sm) var(--s-md);
}

.dp-status__panel--before { border-color: var(--alert); }
.dp-status__panel--after  { border-color: var(--ok); opacity: 0; }

.dp-status__panel--before .dp-status__tag { color: var(--alert); }
.dp-status__panel--after  .dp-status__tag { color: var(--ok); }

.dp-status__label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-block-start: .15rem;
}

.dp-status__cause { font-size: .9375rem; color: var(--ink-soft); }

/* La bascule : une seule fois, au chargement. */
@keyframes dp-status-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes dp-status-in  { to { opacity: 1; transform: translateY(0); } }

.dp-status__panel--before { animation: dp-status-out .45s var(--ease) 1.7s both; }
.dp-status__panel--after  { transform: translateY(6px); animation: dp-status-in .45s var(--ease) 2s both; }

/* Sans animation : les deux états, l'un sous l'autre. L'histoire tient quand même. */
@media (prefers-reduced-motion: reduce) {
  .dp-status__stack { gap: var(--s-sm); }
  .dp-status__panel { grid-area: auto; animation: none; opacity: 1; transform: none; }
}

/* ──────────────────────────────────────────────────────────────── grille ── */

/* Avec le panneau de statut, l'en-tête se scinde : le propos à gauche,
   l'artefact à droite. Il y est lisible, alors que par-dessus l'illustration
   du hero il masquait la scène. */
.dp-grid-block__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .dp-grid-block__head--split { grid-template-columns: 1fr; }
}

.dp-grid-block__head--split .dp-status { margin: 0; }

.dp-grid-block__heading {
  font-size: var(--wp--preset--font-size--heading);
  letter-spacing: -.015em;
  color: var(--ink-deep);
}

.dp-grid-block__lede {
  margin-block-start: var(--s-md);
  max-inline-size: 44rem;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.dp-grid {
  list-style: none;
  margin: var(--s-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.dp-item { margin: 0; }
.dp-item__label { color: var(--brand); }
.dp-item__title { font-size: 1.1875rem; font-weight: 600; margin-block-start: .3rem; }
.dp-item__text  { margin-block-start: .4rem; color: var(--ink-soft); }
.dp-item__by    { margin-block-start: var(--s-sm); font-weight: 600; font-size: .9375rem; }

/* « Ce qu'on débloque » : une liste de pannes. Chaque ligne est une entrée
   de journal, pas une carte marketing — d'où le filet et pas la boîte. */
.dp-grid-block--services .dp-grid {
  gap: 0 var(--s-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.dp-grid-block--services .dp-item {
  border-block-start: 1px solid var(--line);
  padding-block: var(--s-md);
}
.dp-grid-block--services .dp-item__label { color: var(--alert); }
.dp-grid-block--services .dp-item__title {
  margin-block-start: .35rem;
  font-weight: 500;
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* L'icône décorative des cartes « Pourquoi nous ». Un aplat en haut à droite,
   assez pâle pour ne jamais concurrencer le texte : c'est une texture, pas un
   pictogramme à lire. D'où aussi l'aria-hidden côté PHP. */
.dp-item__icone {
  position: absolute;
  inset-block-start: var(--s-md);
  inset-inline-end: var(--s-md);
  inline-size: 3.5rem;
  block-size: 3.5rem;
  color: var(--brand);
  opacity: .12;
  pointer-events: none;
}

/* Le titre doit pouvoir passer sous l'icône sans la heurter. */
.dp-grid-block--atouts .dp-item { position: relative; }
.dp-grid-block--atouts .dp-item__title { padding-inline-end: 3.5rem; }

/* Atouts : des cartes sobres, sans numérotation — ce sont des qualités
   parallèles, pas une séquence. La numérotation est réservée au protocole. */
/* Quatre atouts, trois faits chacun : sur quatre colonnes étroites le texte se
   casse à contretemps. Deux colonnes laissent des lignes lisibles. */
.dp-grid-block--atouts .dp-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--s-lg);
}

@media (max-width: 720px) {
  .dp-grid-block--atouts .dp-grid { grid-template-columns: 1fr; }
}

.dp-grid-block--atouts .dp-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--s-lg) var(--s-xl);
}

.dp-grid-block--atouts .dp-item__text {
  white-space: pre-line;
  line-height: 1.9;                /* chaque fait est une ligne : on les aère */
  text-wrap: pretty;
}

/* Protocole : LA vraie séquence du métier. Numérotée, et reliée. */
.dp-grid-block--protocole .dp-grid {
  counter-reset: dp-step;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--s-xl);
}
.dp-grid-block--protocole .dp-item {
  position: relative;
  padding-block-start: var(--s-xl);
  border-block-start: 2px solid var(--line);
}
.dp-grid-block--protocole .dp-item::before {
  counter-increment: dp-step;
  content: counter(dp-step);
  position: absolute;
  inset-block-start: calc(var(--s-md) * -1);
  inset-inline-start: 0;
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg);
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 600;
}
.dp-grid-block--protocole .dp-item__label { color: var(--ok); }
.dp-grid-block--protocole .dp-item__title { margin-block-start: 0; }

/* Témoignages : le chiffre porte la preuve, pas l'étoile. */
/* Quatre témoignages : en auto-fit ils tombent en 3 + 1 orphelin. Deux colonnes. */
.dp-grid-block--temoignages .dp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-lg); }

@media (max-width: 720px) {
  .dp-grid-block--temoignages .dp-grid { grid-template-columns: 1fr; }
}
.dp-grid-block--temoignages .dp-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
}
/* Le chiffre porte la preuve. En mono, mais resserré : l'espacement par défaut
   d'une chasse fixe fait flotter « 6 h » comme un code, pas comme un résultat. */
.dp-grid-block--temoignages .dp-item__title {
  font-family: var(--mono);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ok);
  letter-spacing: -.04em;
  margin-block-end: var(--s-sm);
}
/* Le portrait ouvre la carte, en grand : c'est une personne qui parle. */
.dp-grid-block--temoignages .dp-item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "photo chiffre"
    "texte texte"
    "nom   nom";
  align-items: center;
  column-gap: var(--s-md);
  row-gap: var(--s-sm);
}

.dp-grid-block--temoignages .dp-item__photo {
  grid-area: photo;
  inline-size: 4.5rem;
  block-size: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--line);
}

.dp-grid-block--temoignages .dp-item__title { grid-area: chiffre; margin: 0; }

/* La citation, en serif : c'est la voix du client, pas celle du site. */
.dp-grid-block--temoignages .dp-item__text {
  grid-area: texte;
  margin-block-start: var(--s-sm);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
}

.dp-grid-block--temoignages .dp-item__text::before { content: "« "; color: var(--muted); }
.dp-grid-block--temoignages .dp-item__text::after  { content: " »"; color: var(--muted); }

.dp-grid-block--temoignages .dp-item__by {
  grid-area: nom;
  margin-block-start: var(--s-sm);
  padding-block-start: var(--s-sm);
  border-block-start: 1px solid var(--line);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .9375rem;
}

/* ───────────────────────────────────────────────────────────── articles ── */
.dp-articles__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  margin-block-end: var(--s-xl);
}

.dp-more { color: var(--brand); text-decoration: none; }
.dp-more::after { content: " →"; }
.dp-more:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────── appel à l'action ──
 * Volontairement calme. Le hero porte déjà la seule audace de la page ;
 * un second panneau de statut ici la banaliserait — et ferait un second <h1>.
 */
.dp-cta {
  border-block: 1px solid var(--line);
  background: var(--ink-deep);
  color: var(--bg);
  padding-block: var(--s-3xl);
  text-align: center;
}

.dp-cta :is(h2, p) { color: inherit; }
.dp-cta h2 { font-size: var(--wp--preset--font-size--heading); letter-spacing: -.015em; }
.dp-cta p  { margin-inline: auto; max-inline-size: 38rem; }
.dp-cta .dp-eyebrow { color: #9fb6e0; }

.dp-cta .wp-block-button__link,
.dp-cta .dp-btn {
  background: var(--bg);
  color: var(--ink-deep);
  margin-block-start: var(--s-lg);
}

.dp-cta .wp-block-button__link:hover,
.dp-cta .dp-btn:hover { background: #dfe7f5; color: var(--ink-deep); }

.dp-cta__note { font-size: .9375rem; color: #9fb6e0; margin-block-start: var(--s-md); }

/* Chapeau d'introduction sous le hero. */
.dp-lede {
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ──────────────────────────────────────────────── l'essentiel à retenir ──
 * Le résumé que le lecteur pressé lit en premier, en tête des guides.
 * Volontairement discret : c'est un repère, pas une bannière.
 */
.dp-essentiel {
  border-inline-start: 3px solid var(--brand);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  padding: var(--s-lg) var(--s-xl);
  margin-block: var(--s-xl);
}

.dp-essentiel__label {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--brand);
  margin-block-end: var(--s-md);
}

.dp-essentiel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-sm); }

/* Un tiret plutôt qu'une puce : ce sont des points de synthèse, pas un inventaire. */
.dp-essentiel li { position: relative; padding-inline-start: 1.4em; }
.dp-essentiel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .7em;
  inline-size: .7em;
  block-size: 2px;
  background: var(--brand);
}

.dp-essentiel strong { color: var(--ink-deep); }

/* ─────────────────────────────────────────────────── questions fréquentes ──
 * <details>/<summary> : dépliable au clavier comme à la souris, sans JS, et
 * le contenu replié reste indexé.
 */
.dp-faq { margin-block-start: var(--s-2xl); }
.dp-faq__title { margin-block-end: var(--s-md); }
.dp-faq__list { border-block-start: 1px solid var(--line); }

.dp-q { border-block-end: 1px solid var(--line); }

.dp-q__ask {
  cursor: pointer;
  list-style: none;                /* on remplace le triangle par notre marqueur */
  padding: var(--s-md) 2.5rem var(--s-md) 0;
  position: relative;
  font-weight: 600;
  color: var(--ink-deep);
  transition: color .2s var(--ease);
}

.dp-q__ask::-webkit-details-marker { display: none; }
.dp-q__ask:hover { color: var(--brand); }
.dp-q__ask:focus-visible { outline-offset: -3px; }

/* Un « + » qui devient « − » : l'état est lisible sans couleur. */
.dp-q__ask::after {
  content: "";
  position: absolute;
  inset-inline-end: .5rem;
  inset-block-start: 50%;
  inline-size: .85rem;
  block-size: 2px;
  background: var(--brand);
  transform: translateY(-50%);
}

.dp-q__ask::before {
  content: "";
  position: absolute;
  inset-inline-end: calc(.5rem + .415rem);
  inset-block-start: 50%;
  inline-size: 2px;
  block-size: .85rem;
  background: var(--brand);
  transform: translateY(-50%);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

.dp-q[open] .dp-q__ask::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }

.dp-q__answer { padding-block-end: var(--s-md); color: var(--ink-soft); }
.dp-q__answer > :first-child { margin-block-start: 0; }
.dp-q__answer p + p { margin-block-start: var(--s-md); }


/* ───────────────────────────────────────────────────────── page contact ──
 * Deux colonnes comme sur l'ancien site : le texte pose le cadre à gauche,
 * le formulaire est immédiatement visible à droite, sans avoir à défiler.
 * 55 / 45, les proportions d'origine.
 */
.dp-contact {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 860px) {
  .dp-contact { grid-template-columns: 1fr; }
}

.dp-contact__say > * + * { margin-block-start: var(--s-md); }
.dp-contact__say h2 { font-size: var(--wp--preset--font-size--heading); letter-spacing: -.015em; }

.dp-contact__form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: var(--s-lg) var(--s-xl);
}

/* HappyForms : on n'écrase que ce qu'il faut pour qu'il parle notre langue. */
.dp-contact__form :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  inline-size: 100%;
  padding: .65em .8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  background: var(--bg);
}

.dp-contact__form :is(input, textarea):focus-visible { border-color: var(--brand); }
.dp-contact__form label { font-size: .9375rem; font-weight: 500; }
.dp-contact__form button, .dp-contact__form input[type="submit"] {
  background: var(--brand);
  color: var(--bg);
  border: 0;
  border-radius: var(--radius-ui);
  padding: .8em 1.6em;
  font-weight: 600;
  cursor: pointer;
}
.dp-contact__form :is(button, input[type="submit"]):hover { background: var(--brand-alt); }

/* HappyForms pose une largeur au bouton, qui casse le libellé lettre par lettre. */
.dp-contact__form :is(button, input[type="submit"]) {
  inline-size: auto;
  white-space: nowrap;
}

/* Le formulaire commence en haut de la colonne, aligné sur le titre. */
.dp-contact__form > :first-child { margin-block-start: 0; }
.dp-contact__form .happyforms-form { margin: 0; }

/* ─────────────────────────────────────────────────────────────── manifeste ──
 * La section qui pose le problème ET énumère ce qu'on débloque. Une seule
 * colonne : le texte se lit en continu, l'image ponctue au lieu de concurrencer.
 * Les deux sections d'origine ont été fusionnées le 2026-08-27 (ADR-018).
 */

/* La trame de points de l'ancien site, en haut à gauche de la première
   section. Elle vivait sur la grille « services », absorbée par la fusion
   (ADR-018) — déplacée ici plutôt que dupliquée, la variante « services »
   n'étant plus employée nulle part.

   Règle reprise intégralement : le fragment qui circulait à l'origine omettait
   right/bottom/left, le z-index, et le parent en position:relative. */
.dp-manifesto { position: relative; overflow: hidden; }

.dp-manifesto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/dots.svg");
  background-repeat: no-repeat;
  background-size: 240px;
  background-position: 20px top;
  opacity: .2;
  pointer-events: none;
}

/* Sans ça, la trame passerait par-dessus le texte. */
.dp-manifesto > .dp-shell { position: relative; z-index: 1; }

/* La colonne de lecture : une mesure de 46rem, CENTRÉE dans le gabarit. Elle
   n'en occupe qu'environ 60 % — alignée à gauche, elle laissait un vide franc
   à droite qui se lisait comme un défaut. Une seule règle pour tous les
   enfants directs : titre, texte, image et liste partagent les mêmes bords. */
.dp-manifesto > .dp-shell > * {
  max-inline-size: 46rem;
  margin-inline: auto;
}

.dp-manifesto > .dp-shell > p { margin-block-start: var(--s-md); }

.dp-manifesto__title {
  font-size: var(--wp--preset--font-size--heading);
  letter-spacing: -.015em;
  color: var(--ink-deep);
}

.dp-manifesto__punch {
  margin-block-start: var(--s-md);
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  font-weight: 600;
  color: var(--brand);
}

/* L'image ponctue le texte : dans le flux, jamais flottante, et exactement aux
   bords de la colonne. La classe `aligncenter` du bloc WordPress a été retirée
   du markup — même spécificité que nos règles, elle passait après dans la
   cascade et le centrage nous échappait (voir docs/07). */
.dp-manifesto__media.wp-block-image {
  margin-block: var(--s-2xl);
}

.dp-manifesto__media img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-soft);
}

/* « Ce qu'on débloque » : un sous-titre à l'intérieur de la section, pas une
   section de plus. Il doit se lire comme une charnière, pas comme un titre. */
.dp-manifesto__sub {
  margin-block-start: var(--s-2xl);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink-deep);
}

/* Liste à coches. La coche EST la puce : on retire celle du navigateur pour
   ne pas en afficher deux. Le retrait négatif aligne le texte des lignes qui
   passent à la ligne sur celui de la première. */
.dp-checklist.wp-block-list {
  list-style: none;
  margin-block-start: var(--s-md);
  padding-inline-start: 0;
}

.dp-checklist li {
  margin-block-start: var(--s-sm);
  padding-inline-start: 1.9em;
  text-indent: -1.9em;
  text-wrap: pretty;
}

/* La signature de l'article. Deux niveaux de lecture : le nom porte, la
   parenthèse explique — d'où la taille et la couleur plus discrètes sur la
   seconde, sans la reléguer pour autant. */
.dp-byline {
  margin-block-start: var(--s-sm);
  color: var(--ink-soft);
  font-size: .9375rem;
}

.dp-byline__quoi { color: var(--muted); }

/* ──────────────────────────────────────────────────────── encart de service ──
 * Posé dans les guides après le 3e paragraphe par inc/promo.php. Il doit se
 * lire comme une aparté : présent, mais visiblement pas la suite de l'article.
 * D'où le fond, et l'absence de bordure de couleur — l'encadré « L'essentiel »
 * porte déjà le filet bleu, deux dispositifs identiques se neutraliseraient.
 */
.dp-promo {
  display: flex;
  gap: var(--s-md);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  padding: var(--s-lg) var(--s-xl);
  margin-block: var(--s-2xl);
}

/* L'ampoule ne suit pas l'échelle du texte : c'est un repère, pas un mot. */
.dp-promo__icon {
  font-size: 1.5rem;
  line-height: 1.2;
  flex: 0 0 auto;
}

.dp-promo__body { min-inline-size: 0; }

.dp-promo__lead { color: var(--ink-deep); }
.dp-promo__lead strong { font-weight: 700; }

/* L'accroche et le bouton sur une ligne, le bouton poussé à droite. En
   dessous de ~26rem de large disponibles, `flex-wrap` les remet l'un sous
   l'autre plutôt que d'écraser la phrase sur trois mots par ligne. */
.dp-promo__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm) var(--s-md);
  margin-block-start: var(--s-sm);
}

.dp-promo__punch {
  margin: 0;
  flex: 1 1 18rem;
  font-weight: 600;
  color: var(--brand);
}

.dp-promo__foot .dp-btn { flex: 0 0 auto; }

/* Sous ~30rem, l'ampoule et le texte côte à côte ne laissent plus de mesure
   lisible : l'ampoule passe au-dessus. */
@media (max-width: 30rem) {
  .dp-promo { flex-direction: column; gap: var(--s-sm); }
}

/* Le pivot du discours : c'est la seule ligne qui hausse le ton. */
.dp-stop {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink-deep);
}

.dp-grid-block__outro {
  margin-block-start: var(--s-xl);
  max-inline-size: 46rem;
  color: var(--ink-soft);
}

.dp-grid-block__outro p + p {
  margin-block-start: var(--s-md);
  font-weight: 600;
  color: var(--ink-deep);        /* la dernière ligne porte la conclusion */
}

/* « Pourquoi nous » : chaque ligne est une coche. Le ✅ vient du texte, on ne
   fait que lui donner de l'air et empêcher la ligne de se casser au milieu. */
.dp-grid-block--atouts .dp-item__text { text-wrap: pretty; }