/*
Theme Name: DigiSeer
Theme URI: https://digiseer.app
Author: DigiStella
Description: Block theme for digiseer.app, built on the DigiSeer brand book v2.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: digiseer
*/

/* ---------- Charte : polices, couleurs, tailles, espacements ---------- */
@font-face { font-family: "BBB DM Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/BBBDMSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "BBB DM Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url(assets/fonts/BBBDMSans-Medium.woff2) format("woff2"); }
@font-face { font-family: "BBB Poppins TN"; font-weight: 400; font-style: normal; font-display: swap; src: url(assets/fonts/BBBPoppinsTN-TextRegular.woff2) format("woff2"); }

:root {
	--wp--preset--color--ink: #111111;
	--wp--preset--color--page: #F4F4F2;
	--wp--preset--color--card: #FFFFFF;
	--wp--preset--color--line: #E2E2DF;
	--wp--preset--color--muted: #62625F;
	--wp--preset--color--rose: #E6007E;
	--wp--preset--color--rose-text: #C4006B;
	--wp--preset--color--rose-tint: #FDE8EF;
	--wp--preset--font-family--body: "BBB DM Sans", "Noto Sans", system-ui, sans-serif;
	--wp--preset--font-family--logo: "BBB Poppins TN", sans-serif;
	--wp--preset--font-size--small: 0.8125rem;
	--wp--preset--font-size--medium: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.358), 1.063rem);
	--wp--preset--font-size--large: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.714), 1.25rem);
	--wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.857), 3.25rem);
	--wp--preset--font-size--xx-large: clamp(2.4rem, 2.4rem + ((1vw - 0.2rem) * 3.524), 4.25rem);
	--wp--preset--font-size--figure: clamp(3.25rem, 3.25rem + ((1vw - 0.2rem) * 7.619), 7.25rem);
	--wp--preset--spacing--20: 0.5rem;
	--wp--preset--spacing--30: 1rem;
	--wp--preset--spacing--40: 1.5rem;
	--wp--preset--spacing--50: clamp(2rem, 4vw, 3rem);
	--wp--preset--spacing--60: clamp(3rem, 7vw, 5.5rem);
	--wp--style--global--content-size: 720px;
	--wp--style--global--wide-size: 1320px; /* 1160 px avant le 05/11 : les titres des sections passaient trop souvent à la ligne */
	--wp--style--block-gap: 1.25rem;
	--wp--style--root--padding-right: clamp(16px, 3vw, 40px);
	--wp--style--root--padding-left: clamp(16px, 3vw, 40px);
	--ds-rule: #999999;
	--ds-u: 120ms; /* 3 images à 25 i/s */
	--ds-radius-widget: 14px;
}

.has-ink-color { color: var(--wp--preset--color--ink) !important; }
.has-page-color { color: var(--wp--preset--color--page) !important; }
.has-card-color { color: var(--wp--preset--color--card) !important; }
.has-line-color { color: var(--wp--preset--color--line) !important; }
.has-muted-color { color: var(--wp--preset--color--muted) !important; }
.has-rose-color { color: var(--wp--preset--color--rose) !important; }
.has-rose-text-color { color: var(--wp--preset--color--rose-text) !important; }
.has-rose-tint-color { color: var(--wp--preset--color--rose-tint) !important; }
.has-ink-background-color { background-color: var(--wp--preset--color--ink) !important; }
.has-page-background-color { background-color: var(--wp--preset--color--page) !important; }
.has-card-background-color { background-color: var(--wp--preset--color--card) !important; }
.has-line-background-color { background-color: var(--wp--preset--color--line) !important; }
.has-muted-background-color { background-color: var(--wp--preset--color--muted) !important; }
.has-rose-background-color { background-color: var(--wp--preset--color--rose) !important; }
.has-rose-text-background-color { background-color: var(--wp--preset--color--rose-text) !important; }
.has-rose-tint-background-color { background-color: var(--wp--preset--color--rose-tint) !important; }
.has-small-font-size { font-size: var(--wp--preset--font-size--small) !important; }
.has-medium-font-size { font-size: var(--wp--preset--font-size--medium) !important; }
.has-large-font-size { font-size: var(--wp--preset--font-size--large) !important; }
.has-x-large-font-size { font-size: var(--wp--preset--font-size--x-large) !important; }
.has-xx-large-font-size { font-size: var(--wp--preset--font-size--xx-large) !important; }
.has-figure-font-size { font-size: var(--wp--preset--font-size--figure) !important; }
.has-logo-font-family { font-family: var(--wp--preset--font-family--logo) !important; }

/* ---------- Mise en page (largeurs, marges latérales, espacement des blocs) ---------- */
body { margin: 0; background-color: var(--wp--preset--color--page); color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium); line-height: 1.55; }
/* Marges latérales : chaque conteneur « constrained » reçoit la marge du site, sauf s'il est imbriqué. */
.is-layout-constrained { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }
.is-layout-constrained > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }
.is-layout-constrained :where(:not(.alignfull.is-layout-flow) > .is-layout-constrained:not(.wp-block-block, .alignfull)) { padding-right: 0; padding-left: 0; }
.is-layout-constrained :where(:not(.alignfull.is-layout-flow) > .is-layout-constrained:not(.wp-block-block, .alignfull)) > .alignfull { margin-left: 0; margin-right: 0; }
:where(.wp-site-blocks) > * { margin-block-start: 1.25rem; margin-block-end: 0; }
:where(.wp-site-blocks) > :first-child { margin-block-start: 0; }
:where(.wp-site-blocks) > :last-child { margin-block-end: 0; }
:root :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 1.25rem; margin-block-end: 0; }
:root :where(.is-layout-flow, .is-layout-constrained) > :first-child { margin-block-start: 0; }
:root :where(.is-layout-flow, .is-layout-constrained) > :last-child { margin-block-end: 0; }
:root :where(.is-layout-flex, .is-layout-grid) { gap: 1.25rem; }
.wp-block-columns.wp-block-columns { row-gap: 1.25rem; } /* colonnes empilées : WordPress prendrait 24px par défaut */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }
.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }

/* ---------- Éléments ---------- */
a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--rose-text); }
:root :where(a:where(:not(.wp-element-button)):hover) { text-decoration: none; }
/* Contour au clavier seulement (pas au clic de souris), fin et discret. */
:root :where(a:where(:not(.wp-element-button)):focus-visible) { outline: 2px solid var(--wp--preset--color--rose-text); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; }
/* Gras (11/11) : la police n'a que les graisses 400 et 500 ; « bold » (700) était fabriqué par le navigateur, épais et
   flou (libellés en gras de la documentation). Le gras du site est donc le 500 */
strong, b { font-weight: 500; }
h1 { font-size: var(--wp--preset--font-size--xx-large); letter-spacing: -0.02em; }
/* Mobile : titre plus petit et moins de blanc au-dessus du haut de page (bandeau des pages larges, modèle page.html) */
@media (max-width: 600px) {
	h1 { font-size: 2rem; }
	.wp-block-post-content > .wp-block-group.alignwide:first-child { padding-top: 1.5rem !important; }
	.page-template-default main.wp-block-group { padding-top: 1.5rem !important; }
	.ds-eyebrow + .wp-block-post-title, .ds-eyebrow + h1 { margin-top: .75rem !important; }
}
/* Accueil : titre sur toute la largeur, puis deux colonnes (puces, chat) : écart sous le titre */
h1 + .wp-block-columns { margin-top: var(--wp--preset--spacing--50) !important; }h2 { font-size: var(--wp--preset--font-size--x-large); }
h3 { font-size: var(--wp--preset--font-size--large); line-height: 1.3; }
:root :where(.wp-element-button, .wp-block-button__link) { background-color: var(--wp--preset--color--rose); border: 1.5px solid var(--wp--preset--color--rose); border-radius: 0; color: var(--wp--preset--color--card); font-family: inherit; font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.12), 0.938rem); font-style: inherit; font-weight: 500; letter-spacing: inherit; line-height: inherit; padding: 0.7rem 1.2rem; text-decoration: none; text-transform: inherit; }
:root :where(.wp-element-button:hover, .wp-block-button__link:hover) { background-color: var(--wp--preset--color--rose-text); border-color: var(--wp--preset--color--rose-text); }
:root :where(.wp-element-button:focus-visible, .wp-block-button__link:focus-visible) { outline: 2px solid var(--wp--preset--color--rose-text); outline-offset: 3px; }
:root :where(.wp-block-button.is-style-outline .wp-block-button__link) { background: transparent none; border: 2px solid currentColor; color: currentColor; padding: 0.667em 1.33em; }
:root :where(.wp-element-caption, .wp-block-image figcaption, .wp-block-table figcaption) { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
:root :where(.wp-block-separator) { border-width: 1.5px 0 0 0; color: #999999; }
:root :where(.wp-block-navigation) { font-size: 0.875rem; }
:root :where(.wp-block-details) { border-bottom: 1px solid var(--wp--preset--color--line); padding-top: 0.9rem; padding-bottom: 0.9rem; }
:root :where(.wp-block-quote) { border-left: 3px solid var(--wp--preset--color--rose); padding-left: 1.25rem; }
:root :where(.wp-block-code) { background-color: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); padding: 1rem; }
.wp-block-group.is-style-card { background: var(--wp--preset--color--card); padding: 1.5rem; }
.wp-block-group.is-style-section { border-top: 1.5px solid #999; }

/* ---------- Logotype ---------- */
.ds-logo { font-family: var(--wp--preset--font-family--logo); font-weight: 400; letter-spacing: -0.015em; white-space: nowrap; line-height: 1; display: inline-block; color: inherit; text-decoration: none; }
/* Mot dessiné non sélectionnable (09/11) : un copier-coller ne prend que le texte pour lecteurs d'écran « DigiSeer »
   (avant : « DigiSeerDigiSeer », texte caché + dessin du mot, inc/brand.php) */
.ds-name > [aria-hidden="true"] { -webkit-user-select: none; user-select: none; }
.ds-pair { display: inline-block; perspective: 11em; }
.ds-pair i { font-style: normal; display: inline-block; }
.ds-pair i + i { transform: scaleX(-1); }
/* « DigiSeer » dans le texte (inc/brand.php) : jamais coupé en fin de ligne */
.ds-name { white-space: nowrap; }
/* … ni mis en capitales : le 2e « e » retourné devenait « Ǝ » dans les surtitres en capitales (09/11) */
.ds-name { text-transform: none; }
/* (espacement remis à zéro seulement dans les surtitres : ailleurs, le logo garde le sien, grand « ee » du bandeau) */
:is(.ds-eyebrow, .ds-step-no) .ds-name { letter-spacing: normal; }

/* ---------- En-tête : logo, navigation, filet ---------- */
.ds-header { position: sticky; top: 0; z-index: 50; border-bottom: 1.5px solid var(--ds-rule); }
.admin-bar .ds-header { top: var(--wp-admin--admin-bar--height, 32px); }
/* Collant sur toute la page : c'est la partie de modèle <header> (enfant de .wp-site-blocks) qui colle ; .ds-header
   seul ne collait que dans ce conteneur, de sa propre hauteur, et partait avec la page */
.wp-site-blocks > header.wp-block-template-part:has(> .ds-header) { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .ds-header) { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part:has(> .ds-header) { top: 0; } } /* barre d'admin non fixe sur mobile */
.ds-header .wp-block-navigation a { text-decoration: none; }
.ds-header :is(.wp-block-navigation-item__content, .wp-block-button__link) { white-space: nowrap; }
.ds-header .wp-block-navigation a:hover { color: var(--wp--preset--color--rose-text); }

/* Loupe de l'en-tête (blocs header / header-fr) : page de recherche de la langue, avec le chat DigiSeer. Icône en
   CSS (masque) : le lien enregistré dans le bloc reste vide, WordPress retirant les <svg> du contenu */
.ds-search-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: inherit; border-radius: 50%; flex: none; }
.ds-search-link::before { content: ""; width: 1.5rem; height: 1.5rem; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") center / contain no-repeat; }
/* « Commencer » de l'en-tête : contour rose sur le fond de la page, comme dans le menu mobile (le plein rose prenait
   le pas sur le menu) ; les boutons des pages restent pleins */
.ds-header .wp-block-button__link { background: transparent; color: var(--wp--preset--color--rose-text); border: 1px solid currentColor; }
/* Même hauteur que le sélecteur de langue (.ds-langs a) : tailles écrites dans le bloc (style en ligne), d'où !important */
.ds-header .wp-block-button__link { font-size: .8rem !important; line-height: 1.2; padding: .15rem .8rem !important; }
.ds-header :is(.ds-langs a, .wp-block-button__link) { box-sizing: border-box; height: 1.5rem; display: inline-flex; align-items: center; }
.ds-header :is(.ds-langs, .ds-langs ul, .ds-langs li, .wp-block-buttons, .wp-block-button) { display: flex; align-items: center; margin-block: 0; }
/* Menu et « Commencer » en majuscules, comme le sélecteur de langue ; menu mobile ouvert : même style, plus grand */
.ds-header :is(.wp-block-navigation-item__content, .wp-block-button__link) { text-transform: uppercase; font-size: .8rem !important; letter-spacing: .06em; font-weight: 500; }
.ds-header .is-menu-open .wp-block-navigation-item__content { font-size: 1.05rem !important; }
/* Menu sur deux lignes (écran moyen) : lignes rapprochées (l'écart du bloc Navigation, 1,4rem, valait aussi en hauteur) */
.ds-header .wp-block-navigation:not(:has(.is-menu-open)) .wp-block-navigation__container { row-gap: .35rem !important; }
.ds-header .wp-block-navigation-item__content { line-height: 1.25; }
.ds-header .wp-block-button__link:hover, .ds-header .wp-block-button__link:focus-visible { background: var(--wp--preset--color--rose-tint); color: var(--wp--preset--color--rose-text); }
/* Petit écran : logo, ☰, langue et loupe seulement ; « Commencer » reste dans le menu ☰ (ds-nav-cta) */
@media (max-width: 520px) { .ds-header .wp-block-buttons { display: none !important; } }
.ds-search-link:hover, .ds-search-link:focus-visible { color: var(--wp--preset--color--rose-text); background: var(--wp--preset--color--rose-tint); }
/* Sélecteur de langue (Polylang récent : <div class="ds-langs"><ul>…</ul></div>, ancien : <ul class="ds-langs">) */
.ds-langs, .ds-langs ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.ds-header .ds-langs, .ds-footer .ds-langs { flex: none; width: auto; }
.ds-langs span { margin: 0 !important; }
.ds-langs a { text-transform: uppercase; display: inline-block; font-size: .8rem; font-weight: 500; letter-spacing: .04em; color: inherit; text-decoration: none; border: 1px solid currentColor; padding: .15rem .4rem; line-height: 1.2; }
.ds-langs a:hover { color: var(--wp--preset--color--rose-text); }

/* Burger jusqu’à 1100px (menu en majuscules plus large) (WordPress l'arrête à 600px : le menu passait sur plusieurs lignes entre les deux) */
@media (min-width: 600px) and (max-width: 1099px) {
	.ds-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.ds-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}

/* Burger (menu fermé) : tout à droite, après langue, loupe et « Commencer » ; même cercle que la loupe */
@media (max-width: 1099px) {
	.ds-header .wp-block-navigation { order: 9; }
	.ds-header .wp-block-navigation__responsive-container-open { width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 50%; color: inherit; }
	.ds-header .wp-block-navigation__responsive-container-open svg { display: none; }
	.ds-header .wp-block-navigation__responsive-container-open::before { content: ""; width: 1.5rem; height: 1.5rem; background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5.5h16M4 12h16M4 18.5h16'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5.5h16M4 12h16M4 18.5h16'/%3E%3C/svg%3E") center / contain no-repeat; }
	.ds-header .wp-block-navigation__responsive-container-open:hover, .ds-header .wp-block-navigation__responsive-container-open:focus-visible { color: var(--wp--preset--color--rose-text); background: var(--wp--preset--color--rose-tint); }
}

/* Menu mobile plein écran (surcouche du bloc Navigation) : croix en haut, puis « Accueil » et les rubriques, lisibles,
   avec une flèche, page en cours en rose ; « Commencer » en bas, pleine largeur.
   « Accueil » (ds-nav-home) et « Commencer » (ds-nav-cta) ne s'affichent que dans ce menu. */
.ds-header .wp-block-navigation__container > :is(.ds-nav-cta, .ds-nav-home) { display: none; }
.ds-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--page); padding: 1rem clamp(16px, 5vw, 40px) 2rem; }
.ds-header .is-menu-open .wp-block-navigation__responsive-container-close { top: .1rem; right: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.ds-header .is-menu-open .wp-block-navigation__responsive-container-close:hover { color: var(--wp--preset--color--rose-text); background: var(--wp--preset--color--rose-tint); }
.ds-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.25rem; align-items: stretch; }
.ds-header .is-menu-open .wp-block-navigation__container { align-items: stretch !important; gap: 0 !important; width: 100%; }
.ds-header .is-menu-open .wp-block-navigation-item { border-top: 1px solid var(--wp--preset--color--line); animation: ds-rise .6s cubic-bezier(.22, 1, .3, 1) both; }
.ds-header .is-menu-open .ds-nav-home { display: flex; }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: var(--ds-u); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: calc(2 * var(--ds-u)); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: calc(3 * var(--ds-u)); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: calc(4 * var(--ds-u)); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: calc(5 * var(--ds-u)); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: calc(6 * var(--ds-u)); }
.ds-header .is-menu-open .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; box-sizing: border-box; padding: 1rem 0 !important; font-size: clamp(1.25rem, 5.5vw, 1.6rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.ds-header .is-menu-open .wp-block-navigation-item:not(.ds-nav-cta) .wp-block-navigation-item__content::after { content: "→"; font-weight: 400; color: var(--wp--preset--color--muted); transition: transform .2s, color .2s; }
.ds-header .is-menu-open .wp-block-navigation-item__content:hover::after { transform: translateX(3px); color: var(--wp--preset--color--rose-text); }
.ds-header .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--rose-text); }
/* Grand menu (ordinateur, 09/11) : page en cours en rose (lien marqué par functions.php) */
.ds-header .wp-block-navigation-item__content[aria-current="page"] { color: var(--wp--preset--color--rose-text); }
.ds-header .is-menu-open .wp-block-navigation-item:nth-last-child(2):not(.ds-nav-cta) { border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-header .is-menu-open .ds-nav-cta { display: block; margin-top: 2rem; border: 0; }
/* « Commencer » discret dans le menu : contour rose, fond de la page (le plein rose écrasait les rubriques) */
.ds-header .is-menu-open .ds-nav-cta .wp-block-navigation-item__content { justify-content: center; padding: .7rem 1rem !important; font-size: 1rem; background: transparent; color: var(--wp--preset--color--rose-text); border: 1.5px solid currentColor; }
.ds-header .is-menu-open .ds-nav-cta .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--rose-tint); color: var(--wp--preset--color--rose-text); }
@keyframes ds-rise { from { opacity: 0; transform: translateY(.6em); } }

/* Titres révélés ligne par ligne (assets/js/reveal.js), une unité de 120 ms par ligne */
.ds-reveal .ds-w { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .3, 1); transition-delay: calc(var(--l, 0) * var(--ds-u)); }
.ds-reveal.is-in .ds-w { opacity: 1; transform: none; }

/* ---------- Ouverture : logo, repli en coin, exemple ---------- */
.ds-stage { --pad: clamp(18px, 4%, 56px); background: var(--wp--preset--color--card); aspect-ratio: 16 / 8; max-width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.ds-stage__bar { position: absolute; top: var(--pad); left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ds-stage__dock { font-size: clamp(20px, 2.2vw, 30px); opacity: 0; }
.ds-stage__label { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); opacity: 0; transition: opacity .45s ease .2s; text-align: right; }
.ds-stage__rule { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) + clamp(40px, 4.6vw, 64px)); height: 1.5px; background: var(--ds-rule); transform: scaleX(0); transform-origin: 0 50%; transition: transform .95s cubic-bezier(.22, 1, .3, 1); }
.ds-stage__replay { position: absolute; right: var(--pad); bottom: calc(var(--pad) * .6); font: inherit; font-size: .75rem; color: var(--wp--preset--color--muted); background: none; border: 0; padding: .25rem 0; cursor: pointer; text-decoration: underline; opacity: 0; transition: opacity .3s; }
.ds-stage.is-answered .ds-stage__replay { opacity: 1; }
.ds-stage__replay:focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); opacity: 1; }

.ds-word { font-size: clamp(40px, 8vw, 112px); transform-origin: var(--anchor, 76%) 50%; transform: translateX(var(--shift, -26%)) scale(4.4); transition: transform 1.7s cubic-bezier(.22, 1, .3, 1); }
.ds-word.is-revealed { transform: none; }
.ds-word .ch { opacity: 0; transition: opacity .35s ease; }
.ds-word.is-revealed .ch { opacity: 1; }
.ds-word.is-revealed .c1 { transition-delay: .35s; } .ds-word.is-revealed .c2 { transition-delay: .59s; }
.ds-word.is-revealed .c3 { transition-delay: .83s; } .ds-word.is-revealed .c4 { transition-delay: 1.07s; }
.ds-word.is-revealed .c5 { transition-delay: 1.31s; } .ds-word.is-revealed .c6 { transition-delay: 1.55s; }
.ds-word .pair { display: inline-block; perspective: 11em; opacity: 0; transition: opacity .55s ease; }
.ds-word .pair.is-in { opacity: 1; }
.ds-word .eye { display: inline-block; }
.ds-word .e2 { transition: transform .8s cubic-bezier(.62, 0, .24, 1); }
.ds-word .e2.is-flipped { transform: rotateY(180deg); }
.ds-word .e1.is-gazing { animation: ds-gA 3.4s cubic-bezier(.42, 0, .24, 1) both; }
.ds-word .e2.is-gazing { animation: ds-gB 3.4s cubic-bezier(.42, 0, .24, 1) var(--ds-u) both; }
@keyframes ds-gA { 0% { transform: rotateY(0) } 23%, 36% { transform: rotateY(46deg) } 64%, 77% { transform: rotateY(-46deg) } 100% { transform: rotateY(0) } }
@keyframes ds-gB { 0% { transform: rotateY(180deg) } 23%, 36% { transform: rotateY(226deg) } 64%, 77% { transform: rotateY(134deg) } 100% { transform: rotateY(180deg) } }

/* Scène : question à gauche, réponse à droite, décalée (composition en diagonale du film) */
.ds-scene { position: absolute; inset: calc(var(--pad) + clamp(64px, 7vw, 96px)) var(--pad) var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); align-items: start; align-content: start; pointer-events: none; }
.ds-scene__who { display: block; font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: .6rem; }
.ds-scene__ask, .ds-scene__answer { opacity: 0; transition: opacity .45s ease; }
.ds-scene__q { margin: 0; font-size: clamp(22px, 2.7vw, 38px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; min-height: 2.3em; }
.ds-stage.is-asking:not(.is-searching) .ds-scene__q::after { content: ""; display: inline-block; width: 2px; height: .9em; margin-left: 3px; vertical-align: -.1em; background: var(--wp--preset--color--rose); animation: ds-caret 1s steps(1) infinite; }
@keyframes ds-caret { 50% { opacity: 0; } }
.ds-scene__search { display: flex; align-items: center; gap: .7rem; margin: 1.2rem 0 0; color: var(--wp--preset--color--muted); font-size: .95rem; opacity: 0; transition: opacity .3s; }
.ds-scene__eyes { font-size: 34px; color: var(--wp--preset--color--ink); }
.ds-stage.is-searching .ds-scene__search { opacity: 1; }
.ds-stage.is-searching .ds-scene__eyes i:first-child { animation: ds-gA 3.4s cubic-bezier(.42, 0, .24, 1) both; }
.ds-stage.is-searching .ds-scene__eyes i + i { animation: ds-gB 3.4s cubic-bezier(.42, 0, .24, 1) var(--ds-u) both; }
.ds-stage.is-answered .ds-scene__search { opacity: 0; }
.ds-scene__answer { margin-top: clamp(24px, 6vw, 88px); border-top: 1.5px solid var(--wp--preset--color--rose); padding-top: .9rem; font-size: clamp(16px, 1.45vw, 21px); }
.ds-ln { margin: 0 0 .7rem; opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * 240ms); }
.ds-scene__sources { padding-left: 1.2rem; }
.ds-scene__sources a { pointer-events: auto; }
.ds-scene__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; }
.ds-scene__chip { border: 1px solid var(--wp--preset--color--rose-text); color: var(--wp--preset--color--rose-text); border-radius: 99px; padding: 0 .6rem; }
.ds-scene__rel { color: var(--wp--preset--color--muted); margin-left: .4rem; }
.ds-scene__rel b { color: var(--wp--preset--color--ink); font-weight: 500; }

/* États */
.ds-stage.is-docked .ds-word { visibility: hidden; }
.ds-stage.is-docked .ds-stage__dock, .ds-stage.is-docked .ds-stage__label { opacity: 1; }
.ds-stage.is-docked .ds-stage__rule { transform: scaleX(1); }
.ds-stage.is-asking .ds-scene__ask, .ds-stage.is-answered .ds-scene__answer { opacity: 1; }
.ds-stage.is-answered .ds-ln { opacity: 1; transform: none; }

/* Sans JS ou mouvement réduit : image finale */
.ds-stage.is-static .ds-word { display: none; }
.ds-stage.is-static :is(.ds-stage__dock, .ds-stage__label, .ds-scene__ask, .ds-scene__answer, .ds-ln) { opacity: 1; transform: none; transition: none; }
.ds-stage.is-static .ds-stage__rule { transform: scaleX(1); transition: none; }
@media (scripting: none) {
	.ds-stage .ds-word { display: none; }
	.ds-stage :is(.ds-stage__dock, .ds-stage__label, .ds-scene__ask, .ds-scene__answer, .ds-ln) { opacity: 1; transform: none; transition: none; }
	.ds-stage .ds-stage__rule { transform: scaleX(1); transition: none; }
}

@media (max-width: 781px) {
	.ds-stage { display: block; aspect-ratio: auto; min-height: 520px; padding: calc(var(--pad) + 90px) var(--pad) calc(var(--pad) + 28px); }
	.ds-stage__rule { top: calc(var(--pad) + 62px); }
	.ds-stage .ds-word { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
	.ds-stage.is-docked .ds-word { translate: none; }
	.ds-scene { position: static; grid-template-columns: 1fr; gap: 1.25rem; }
	.ds-scene__answer { margin-top: 0; }
	.ds-scene__q { min-height: 0; }
}

/* Boucle de recherche (7 s : balayage puis repos) */
.ds-loop i:first-child { animation: ds-lA 7s cubic-bezier(.42, 0, .24, 1) infinite; }
.ds-loop i + i { animation: ds-lB 7s cubic-bezier(.42, 0, .24, 1) var(--ds-u) infinite; }
@keyframes ds-lA { 0% { transform: rotateY(0) } 11.2%, 17.5% { transform: rotateY(46deg) } 31.1%, 37.4% { transform: rotateY(-46deg) } 48.6%, 100% { transform: rotateY(0) } }
@keyframes ds-lB { 0% { transform: rotateY(180deg) } 11.2%, 17.5% { transform: rotateY(226deg) } 31.1%, 37.4% { transform: rotateY(134deg) } 48.6%, 100% { transform: rotateY(180deg) } }

/* ---------- Bandeau de confiance ---------- */
.ds-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-trust__label { margin: 0; font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ds-trust__list { display: flex; flex-wrap: wrap; gap: .5rem clamp(1.5rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; flex: 1 1 18rem; }
.ds-trust__list a { color: var(--wp--preset--color--ink); text-decoration: none; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -0.015em; }
.ds-trust__list a:hover, .ds-trust__badge:hover { color: var(--wp--preset--color--rose-text); }
.ds-trust__badge { display: flex; align-items: center; gap: .7rem; color: var(--wp--preset--color--ink); text-decoration: none; font-size: .8rem; line-height: 1.25; }
.ds-trust__badge b { font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-trust__grade { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1.5px solid currentColor; font-size: 1rem; font-weight: 500; }
/* Sur fond sombre (section Souveraineté) : textes clairs, filet au-dessus */
.has-ink-background-color .ds-trust { margin-top: var(--wp--preset--spacing--50); padding: 1.6rem 0 0; border-bottom: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.has-ink-background-color .ds-trust__label { color: #b9b9b5; }
.has-ink-background-color .ds-trust__list a, .has-ink-background-color .ds-trust__badge { color: var(--wp--preset--color--card); }
.has-ink-background-color .ds-trust__list a:hover, .has-ink-background-color .ds-trust__badge:hover { color: var(--wp--preset--color--rose); }

/* ---------- Sections ---------- */
.ds-section { border-top: 1.5px solid var(--ds-rule); }
/* Bandeau noir de l'accueil (« La recherche de WordPress ne trouve pas ? ») : sans trait au-dessus ni au-dessous */
.ds-section.ds-band, .ds-section.ds-band + .ds-section { border-top: none; }
/* Moins de blanc entre le haut de page (chat) et ce bandeau (avant : environ 200 px) */
.ds-section.ds-band { padding-top: 0 !important; }
.wp-block-group:has(> .wp-block-columns .ds-hero-points) { padding-bottom: 0 !important; }
/* Accueil, sous les puces : bouton Installer et référence client (discrète, soulignée au survol) */
.ds-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: var(--wp--preset--spacing--50); }
.ds-hero-proof { color: var(--wp--preset--color--muted); text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.ds-hero-proof:hover, .ds-hero-proof:focus-visible { color: var(--wp--preset--color--rose-text); text-decoration: underline; text-underline-offset: .2em; }
/* Accueil : trait entre « Une réponse claire, sources à l'appui » et « Pour les sites qui ont beaucoup à dire » */
.ds-why + .ds-comp-inner { border-top: 1px solid #D2D2D7; }
.ds-eyebrow { font-size: var(--wp--preset--font-size--small); letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.alignwide .ds-lead, .alignfull .ds-lead { max-width: 62ch; }
/* Paragraphe sur deux colonnes (Comparatif, « Ce qui différencie DigiSeer… ») : toute la largeur ; une colonne sur mobile */
@media (min-width: 800px) { .alignwide .ds-lead.ds-cols-2 { max-width: none; columns: 2; column-gap: var(--wp--preset--spacing--60); } }
/* Page simple (colonne de texte) : l'introduction reste alignée sur le titre et le texte */
.wp-block-post-content.is-layout-constrained > .ds-lead { max-width: var(--wp--style--global--content-size); }
/* Pages simples (modèle page.html) : même haut de page que Tarifs ou Comparatif (surtitre, grand titre, introduction),
   le tout calé à gauche sur la largeur du site ; le texte reste en colonne étroite, sous le titre */
.page-template-default main.is-layout-constrained > :where(:not(.alignfull)),
.page-template-default .wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; margin-right: auto !important; }
.page-template-default main.is-layout-constrained > .wp-block-post-title { max-width: var(--wp--style--global--wide-size); }
.page-template-default main.is-layout-constrained > .ds-eyebrow + .wp-block-post-title { margin-top: var(--wp--style--block-gap, 1.5rem); }
.page-template-default .wp-block-post-content.is-layout-constrained > .ds-lead { max-width: 62ch; }
/* (Sécurité et Confidentialité : colonne de texte de 960 px et tableau pleine largeur retirés le 09/11 : texte de
   720 px comme les autres pages, la colonne « Sur cette page » reste visible à côté) */
.wp-block-post-content > h2 { margin-top: var(--wp--preset--spacing--50); }
.wp-block-post-content > h3 { margin-top: var(--wp--preset--spacing--40); }
.ds-figure { font-size: var(--wp--preset--font-size--figure); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-rules { list-style: none; padding: 0; margin: 0; }
.ds-rules li { padding: .75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-rules li:first-child { border-top: 1px solid var(--wp--preset--color--line); }
/* Liste sur deux colonnes (Fonctionnalités, section Confiance, sans image) : grille, pour que les traits restent alignés
   d'une colonne à l'autre ; une colonne sur petit écran */
@media (min-width: 782px) {
	.ds-rules.ds-rules--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--60); margin-top: var(--wp--preset--spacing--40); }
	.ds-rules.ds-rules--2col li:nth-child(2) { border-top: 1px solid var(--wp--preset--color--line); }
}
/* Bouton placé comme dernier élément d'une liste ds-rules (case libre de la grille) : sans trait, centré en hauteur ;
   même aspect que les boutons « contour » des blocs Boutons */
.ds-rules li.ds-rules__cta { border-bottom: none; align-self: center; padding-top: 1rem; }
/* Point juste avant le bouton : sans trait en dessous (05/11) */
.ds-rules li:has(+ li.ds-rules__cta) { border-bottom: none; }
.ds-rules__cta .ds-btn-outline { display: inline-block; background: transparent; color: var(--wp--preset--color--ink); border: 2px solid currentColor; }
.ds-step-no { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }

/* Numérotation des sections, comme la pagination du film */
.wp-block-post-content { counter-reset: ds-section; }
.ds-num::before { counter-increment: ds-section; content: counter(ds-section, decimal-leading-zero); display: inline-block; min-width: 2.2em; text-align: left; color: var(--wp--preset--color--ink); }

.has-ink-background-color .ds-num::before { color: #fff; }

/* Compositions du film (bureau) */
@media (min-width: 900px) {
	/* 02 : titre à gauche, contenu calé à droite et plus bas */
	.ds-comp-diagonal > .wp-block-columns > .wp-block-column:last-child { padding-top: clamp(4rem, 9vw, 8rem); }
	/* 03 : en-tête aligné à droite */
	.ds-comp-right .ds-comp-head { margin-left: auto; max-width: 34rem; text-align: right; }
	/* 04 : colonne intérieure (x = 780 sur la grille 260–1660) */
	.ds-comp-inner .ds-comp-head, .ds-comp-inner > .wp-block-columns { margin-left: 37%; }
	.ds-comp-inner > .wp-block-columns { flex-wrap: wrap !important; row-gap: 1.5rem; }
	/* Accueil « Pour qui » : titre au-dessus, puis 3 colonnes (types de sites sur 2, étude de cas sur 1), pleine largeur */
	.ds-comp-inner:has(> .ds-who-row) > .ds-comp-head, .ds-comp-inner > .ds-who-row { margin-left: 0; }
	.ds-comp-inner > .ds-who-row { flex-wrap: nowrap !important; margin-top: var(--wp--preset--spacing--50); }
	/* 05 : chiffres sur toute la largeur, séparés par des filets */
	.ds-comp-figures .ds-figure { font-size: clamp(3rem, 5.6vw, 6.5rem); white-space: nowrap; }
	/* Mot à la place d'un chiffre (« En direct », « Live ») : plus petit, pour tenir dans sa colonne */
	.ds-comp-figures .ds-figure--word { font-size: clamp(2.2rem, 3.4vw, 4rem); line-height: 1.1; }
	/* Trois colonnes de même largeur, quel que soit le chiffre (« 0 » étroit, « 2 à 6 s » large) */
	.ds-comp-figures > .wp-block-columns:not(.ds-gdpr-text) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ds-comp-figures > .wp-block-columns:not(.ds-gdpr-text) > .wp-block-column + .wp-block-column { border-left: 1px solid rgba(255, 255, 255, .25); padding-left: 1.5rem; }
}
.ds-steps { list-style: none; margin: 0; padding: 0; counter-reset: ds-step; }
.ds-steps li { position: relative; padding: 1.4rem 0 1.4rem clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--wp--preset--color--line); color: #2b2b2a; }
.ds-steps li::before { counter-increment: ds-step; content: counter(ds-step); position: absolute; left: 0; top: 1.1rem; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--wp--preset--color--ink); }
.ds-steps strong { display: block; font-size: var(--wp--preset--font-size--large); font-weight: 500; color: var(--wp--preset--color--ink); margin-bottom: .3rem; }

/* Bouton secondaire */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--card); border-color: var(--wp--preset--color--ink); }

/* ---------- Widget (exemple statique) ---------- */
.ds-widget { background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ds-radius-widget); overflow: hidden; width: 100%; max-width: 400px; font-size: .9rem; box-shadow: 0 12px 36px rgba(17, 17, 17, .08); margin-inline: auto; }
.ds-widget__head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--wp--preset--color--line); font-weight: 500; }
.ds-widget__avatar { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--wp--preset--color--line); display: grid; grid-auto-flow: column; place-content: center; font-family: var(--wp--preset--font-family--logo); font-size: 15px; }
.ds-widget__body { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem; }
[data-ds-chat] .ds-widget__body { height: 22rem; overflow-y: auto; overscroll-behavior: contain; } /* le fil défile, la saisie reste en bas */
.ds-widget__q { align-self: flex-end; background: var(--wp--preset--color--ink); color: #fff; padding: .45rem .75rem; border-radius: 12px; max-width: 85%; }
.ds-widget__a { background: var(--wp--preset--color--rose-tint); padding: .7rem .8rem; border-radius: 12px; }
.ds-widget__a p { margin: 0; }
.ds-widget__a ol { margin: .4rem 0 0; padding-left: 1.1rem; }
.ds-widget__chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .5rem; }
.ds-widget__chips :is(span, button) { border: 1px solid var(--wp--preset--color--rose-text); color: var(--wp--preset--color--rose-text); background: none; border-radius: 99px; padding: 0 .6rem; font: inherit; font-size: .75rem; line-height: 1.6; cursor: pointer; }
.ds-widget__chips button:hover { background: var(--wp--preset--color--rose-text); color: #fff; }
.ds-widget__meta { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--wp--preset--color--muted); margin-top: .5rem; }
.ds-widget__meta button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.ds-widget__meta button:hover { color: var(--wp--preset--color--rose-text); }
.ds-widget__search { display: flex; align-items: center; gap: .6rem; color: var(--wp--preset--color--muted); }
.ds-widget__search .ds-logo { font-size: 26px; color: var(--wp--preset--color--ink); }
.ds-widget__search .ds-pair i:first-child { animation: ds-gA 3.4s cubic-bezier(.42, 0, .24, 1) infinite; }
.ds-widget__search .ds-pair i + i { animation: ds-gB 3.4s cubic-bezier(.42, 0, .24, 1) var(--ds-u) infinite; }
.ds-widget__input { display: flex; gap: .4rem; padding: .7rem 1rem; border-top: 1px solid var(--wp--preset--color--line); margin: 0; }
.ds-widget__input input { flex: 1; min-width: 0; border: 1px solid #b9b9b5; border-radius: 10px; padding: .45rem .65rem; font: inherit; }
.ds-widget__input input:focus { outline: 2px solid var(--wp--preset--color--rose-text); outline-offset: 1px; border-color: transparent; }
.ds-widget__input button { border: 0; background: var(--wp--preset--color--rose); color: #fff; border-radius: 10px; padding: .45rem .8rem; font: inherit; font-weight: 500; cursor: pointer; }
.ds-widget__input button:hover { background: var(--wp--preset--color--rose-text); }
/* Champ décoratif de la démo française (sans saisie) */
.ds-widget__input span { flex: 1; border: 1px solid #b9b9b5; border-radius: 10px; padding: .4rem .65rem; color: var(--wp--preset--color--muted); }
.ds-widget__input b { background: var(--wp--preset--color--rose); color: #fff; border-radius: 10px; padding: .4rem .75rem; font-weight: 500; }
.ds-widget__note { margin: .6rem 0 0; font-size: .75rem; color: var(--wp--preset--color--muted); }
/* Apparition des messages : la bulle, puis les éléments de la réponse l'un après l'autre. */
@media (prefers-reduced-motion: no-preference) {
	.ds-widget__q, .ds-widget__search { animation: ds-rise .35s cubic-bezier(.22, 1, .3, 1) both; }
	.ds-widget__a { animation: ds-rise .4s cubic-bezier(.22, 1, .3, 1) both; }
	.ds-widget__a > * { animation: ds-rise .45s cubic-bezier(.22, 1, .3, 1) both; }
	.ds-widget__a > :nth-child(2) { animation-delay: .25s; }
	.ds-widget__a > :nth-child(3) { animation-delay: .5s; }
	.ds-widget__a > :nth-child(4) { animation-delay: .75s; }
}
.ds-example { max-width: 400px; margin-inline: auto; }
.ds-example-tag { display: inline-block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin-bottom: .5rem; }

/* ---------- Tarifs ---------- */
/* 4 cartes par ligne sur grand écran, 2 sur tablette, 1 sur mobile (10/11 : jamais 3 + 1, ni deux cartes serrées) */
.ds-plans { display: grid; gap: 28px 12px; grid-template-columns: 1fr; } /* 28 px entre deux rangées de cartes : l'étiquette « Pour vous » (posée à cheval sur le haut de la carte) ne touche plus la carte du dessus */
@media (min-width: 600px) { .ds-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .ds-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Rangées communes (nom, public et atout, prix avec le TTC, annuel, estimation, liste, pied) : les cartes s'alignent
   entre elles. Une rangée par élément de la carte : ajouter un élément = ajouter une rangée (sinon le bouton chevauche
   la liste). 10/11 : le TTC est passé sur la ligne du prix (functions.php), 7 rangées au lieu de 8 */
.ds-plan { display: grid !important; grid-template-rows: subgrid; grid-row: span 7; align-content: start; }
.ds-plan p { margin: 0 !important; }
.ds-plan { position: relative; background: var(--wp--preset--color--card); padding: 1.4rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; border: 1.5px solid transparent; }
.ds-plan.is-featured { border-color: var(--wp--preset--color--ink); }
/* Survol (10/11) : la carte s'éclaire un peu, sans bouger, comme dans la page Abonnement de l'app */
.ds-plan:hover, .ds-plan:focus-within { box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--wp--preset--color--rose) 50%, transparent); }
.ds-plan:not(.is-featured):hover, .ds-plan:not(.is-featured):focus-within { border-color: color-mix(in srgb, var(--wp--preset--color--rose) 40%, transparent); }
.ds-plan .ds-badge { position: absolute; top: 0; left: 1.2rem; transform: translateY(-50%); }
.ds-plan h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.ds-plan__price { font-size: 2.6rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-plan__price small { display: inline-block; white-space: nowrap; line-height: 1.3; font-size: .85rem; font-weight: 400; color: var(--wp--preset--color--muted); letter-spacing: 0; }
/* Prix TTC (particuliers), en petit sous le prix HT ; mis à jour par l'estimateur (pricing.js) */
.ds-plan__ttc { margin: -.2rem 0 0; font-size: .75rem; line-height: 1.3; color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.ds-plan__ttc small { font-size: inherit; }
.ds-plan ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; flex: 1; }
.ds-plan li { padding: .4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
/* Chiffres clés de chaque formule en gras (06/11) : la ligne des sites entière ; pour les tokens, les pages et le
   dépassement, le chiffre seul (balise strong posée par functions.php) */
.ds-plan li[data-f="sites"], .ds-plan li strong { font-weight: 500; }
.ds-plan .ds-btn { text-align: center; align-self: end; }
/* Atout de la formule, puis chiffres clés ; le reste replié, ouvert pour toutes les cartes à la fois (10/11 ;
   functions.php, pricing.js). Sans JavaScript, tout reste affiché */
.ds-plan__list { display: flex; flex-direction: column; }
.ds-plan__intro { display: flex; flex-direction: column; gap: .5rem; }
/* Sous le nom : « pour qui » (description) d'abord, puis l'atout en étiquette (10/11 : simple ordre d'affichage,
   les textes de Stripe ne changent pas ; le style en ligne de la description, venu de la page, est remplacé) */
.ds-plan__intro [data-f="desc"] { order: -1; color: var(--wp--preset--color--ink) !important; font-weight: 500; font-size: .95rem !important; line-height: 1.35; }
/* Atout : étiquette rose pâle, pas un lien (le rose plein reste aux boutons ; 10/11) */
.ds-plan__atout { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 500; line-height: 1.4;
  background: color-mix(in srgb, var(--wp--preset--color--rose) 10%, #fff); color: var(--wp--preset--color--ink); }
.ds-plans.has-more:not(.is-open) .ds-plan__more { display: none; }
/* Pied de carte : « Détail ▾ » (lien) à gauche, bouton à droite, sur la même ligne (10/11, comme l'app) */
.ds-plan__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; align-self: end; }
.ds-plans:not(.has-more) .ds-plan__foot { justify-content: flex-end; }
.ds-plan__toggle { padding: .2rem 0; border: 0; background: none; font: inherit; font-size: .85rem; color: var(--wp--preset--color--rose-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ds-plan__toggle:hover, .ds-plan__toggle:focus-visible { color: var(--wp--preset--color--ink); }
/* Prix HT à gauche, TTC à droite sur la même ligne ; parenthèse des tokens sur sa propre ligne */
.ds-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; }
.ds-plan__price [data-ttc] { margin-left: auto; padding-left: .5rem; font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--wp--preset--color--muted); white-space: nowrap; }
.ds-plan__paren { display: block; white-space: nowrap; font-weight: 400; }
.ds-plans:not(.has-more) .ds-plan__toggle { display: none; }
.ds-badge { display: inline-block; font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; background: var(--wp--preset--color--rose); color: #fff; align-self: flex-start; }
.ds-btn { display: inline-block; padding: .7rem 1.2rem; font-weight: 500; font-size: .9375rem; text-decoration: none; border: 1.5px solid var(--wp--preset--color--rose); background: var(--wp--preset--color--rose); color: #fff !important; }
.ds-btn:hover { background: var(--wp--preset--color--rose-text); border-color: var(--wp--preset--color--rose-text); }
.ds-btn.is-outline { background: transparent; color: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--ink); }
.ds-btn.is-outline:hover { background: var(--wp--preset--color--ink); color: #fff !important; }
/* Estimation au-dessus des cartes : les cartes affichent leur coût pour cet usage. */
.ds-est { background: var(--wp--preset--color--card); padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 12px; display: grid; grid-template-columns: 1fr auto; gap: 1rem clamp(1.5rem, 5vw, 4rem); align-items: start; }
.ds-est__main { display: grid; gap: .6rem; min-width: 0; }
.ds-est__q { font-size: var(--wp--preset--font-size--large); font-weight: 500; letter-spacing: -0.01em; }
.ds-est__slider { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; }
.ds-est__slider input[type=range] { width: 100%; margin: 0; accent-color: var(--wp--preset--color--rose); }
.ds-est__value { min-width: 5.5ch; text-align: right; font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-est__hint { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.ds-est__adjust { font-size: .85rem; }
.ds-est__adjust summary { cursor: pointer; color: var(--wp--preset--color--rose-text); width: fit-content; }
.ds-est__adjust fieldset { margin: .8rem 0 .6rem; padding: 0; border: 0; display: grid; gap: .5rem; max-width: 26rem; }
.ds-est__adjust legend { padding: 0; margin-bottom: .5rem; font-weight: 500; }
.ds-est__adjust p { margin: 0; color: var(--wp--preset--color--muted); }
.ds-est__sites { display: grid; gap: .6rem; justify-items: start; }
.ds-est__sites label { font-size: .95rem; font-weight: 500; }
.ds-est__enterprise { grid-column: 1 / -1; margin: 0; font-weight: 500; }
@media (max-width: 781px) { .ds-est { grid-template-columns: 1fr; } }
/* Choix du taux : boutons segmentés */
.ds-seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--wp--preset--color--ink); }
.ds-seg label { position: relative; text-align: center; padding: .55rem .4rem; cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; }
.ds-seg label + label { border-left: 1.5px solid var(--wp--preset--color--ink); }
.ds-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ds-seg label:has(:checked) { background: var(--wp--preset--color--ink); color: #fff; }
.ds-seg label:has(:focus-visible), .ds-stepper :focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); outline-offset: 2px; }
/* Nombre de sites : − / + */
.ds-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--wp--preset--color--ink); }
.ds-stepper button { width: 2.4rem; border: 0; background: none; font: inherit; font-size: 1.2rem; cursor: pointer; color: inherit; }
.ds-stepper button:hover { background: var(--wp--preset--color--ink); color: #fff; }
.ds-stepper input { width: 3.2rem; border: 0; border-inline: 1.5px solid var(--wp--preset--color--ink); text-align: center; font: inherit; font-weight: 500; background: none; -moz-appearance: textfield; }
.ds-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
/* États des cartes pilotés par l'estimation */
.ds-plan__est { margin: 0; align-self: end; font-size: .85rem; line-height: 1.3; font-weight: 500; }
.ds-plan__year { font-size: .8rem; color: var(--wp--preset--color--muted); }
/* Prix annuel collé au prix TTC (un seul bloc de prix), l'estimation « Tout est inclus » vient dessous */
.ds-plan .ds-plan__year { margin-top: -.7rem !important; line-height: 1.3; }
.ds-plan { transition: opacity .25s ease, box-shadow .2s ease, border-color .2s ease; }
.ds-plan.is-unfit > :not(.ds-plan__est) { opacity: .45; }
.ds-plan.is-unfit .ds-plan__est { color: var(--wp--preset--color--muted); font-weight: 400; }
.ds-table-wrap { overflow-x: auto; }
.ds-table { border-collapse: collapse; width: 100%; min-width: 600px; background: var(--wp--preset--color--card); font-size: .9rem; }
.ds-table th, .ds-table td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--wp--preset--color--line); font-variant-numeric: tabular-nums; }
.ds-table th { font-weight: 500; }

/* Comparatif des fonctionnalités : une colonne par outil, la colonne des fonctionnalités reste visible au défilement */
.ds-feat { min-width: 1380px; font-size: .82rem; }
.ds-feat th, .ds-feat td { vertical-align: top; padding: .6rem .55rem; }
.ds-feat thead th { white-space: nowrap; }
.ds-feat thead th:nth-child(2), .ds-feat td:nth-child(2) { background: color-mix(in srgb, var(--wp--preset--color--rose) 7%, transparent); }
.ds-feat th[scope="row"], .ds-feat thead th:first-child { position: sticky; left: 0; z-index: 1; width: 11rem; min-width: 10rem; background: var(--ds-surface, var(--wp--preset--color--card)); }
.ds-feat small { display: block; margin-top: .2rem; font-size: .78rem; line-height: 1.35; color: color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--ink)); }
/* Indice de défilement des grands tableaux (classe posée par compare.js) */
.ds-scroll { position: relative; }
.ds-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none; border-radius: 0 18px 18px 0; background: linear-gradient(to left, color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent), transparent); opacity: 0; transition: opacity .2s; }
.ds-scroll.has-more::after { opacity: 1; }
.ds-feat .ds-val { font-weight: 500; }

/* Comparatif : DigiSeer et l'outil choisi seulement, ou tous les outils (liste de compare.js) */
.ds-cmp { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0 .75rem; font-size: .9rem; font-weight: 500; }
.ds-cmp select { font: inherit; padding: .35rem .6rem; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; background: var(--wp--preset--color--card); color: inherit; }
.ds-feat.is-cmp { min-width: 0; font-size: .9rem; }
.ds-feat.is-cmp th[scope="row"], .ds-feat.is-cmp thead th:first-child { width: 30%; min-width: 0; }
.ds-feat.is-cmp td { width: 35%; }
@media (max-width: 781px) {
	.ds-feat.is-cmp { font-size: .82rem; }
	.ds-feat.is-cmp th[scope="row"], .ds-feat.is-cmp thead th:first-child { width: 38%; }
	.ds-feat.is-cmp td { width: auto; }
}

/* Documentation : sommaire en cartes (2 colonnes dès 640px) */
.ds-doc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ds-doc-grid { grid-template-columns: repeat(2, 1fr); } }
.ds-doc-grid > .ds-doc-card { margin: 0 !important; }
.ds-doc-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.ds-doc-card h3 a { color: inherit; text-decoration: none; }
.ds-doc-card h3 a:hover { color: var(--wp--preset--color--rose-text); }
.ds-doc-card p { margin: 0; color: var(--wp--preset--color--muted); }

/* Documentation lue dans l'API (inc/docs.php) : accueil en cartes, sous-rubrique avec sommaire à gauche */
.ds-docs__cards { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .ds-docs__cards { grid-template-columns: repeat(2, 1fr); } }
/* Bureau : 3 colonnes sur la largeur du site (au lieu de la colonne de texte) */
.wp-block-post-content > .ds-docs__cards { max-width: var(--wp--style--global--wide-size) !important; }
@media (min-width: 1000px) { .ds-docs__cards { grid-template-columns: repeat(3, 1fr); } }
/* Liens du paragraphe de classe ds-arrow-link (éditeur : Avancé → Classe CSS), ex. accueil « Voir toutes les
   fonctionnalités », « premiers pas », « Écrivez-nous ». Pas soulignés ; soulignés au survol et au clavier */
.ds-arrow-link a { text-decoration: none; }
.ds-arrow-link a:hover, .ds-arrow-link a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
/* Sur fond noir (section RGPD) : rose, sinon le lien se confond avec le texte blanc */
.has-ink-background-color .ds-arrow-link a { color: var(--wp--preset--color--rose) !important; }
/* Accueil, section RGPD : texte et accord de traitement côte à côte ; lien vers Sécurité simplement souligné */
.ds-gdpr-text { gap: var(--wp--preset--spacing--60) !important; }
.ds-gdpr-text .ds-lead { margin-top: 0; }
.ds-gdpr-dpa { margin-top: .35em; }
.ds-gdpr-dpa a { color: inherit !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ds-gdpr-dpa a:hover { color: var(--wp--preset--color--rose) !important; }

/* Bandeau d'accroche (accueil, vers la page « Recherche WordPress ») : fond rose pâle, cliquable en entier, flèche qui
   avance au survol ; sur mobile, la flèche passe sous le texte */
.ds-teaser { display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; padding: 1.15rem 1.5rem; border-radius: 14px; background: var(--wp--preset--color--rose-tint); color: var(--wp--preset--color--ink); text-decoration: none; }
.ds-teaser__k { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--rose-text); }
.ds-teaser__t { flex: 1 1 22rem; font-size: 1.1rem; font-weight: 500; }
.ds-teaser__a { color: var(--wp--preset--color--rose-text); font-size: 1.3rem; transition: transform .2s; }
.ds-teaser:hover .ds-teaser__t, .ds-teaser:focus-visible .ds-teaser__t { text-decoration: underline; text-underline-offset: .2em; }
.ds-teaser:hover .ds-teaser__a, .ds-teaser:focus-visible .ds-teaser__a { transform: translateX(4px); }

/* Accueil, « Fonctionnement » : capture de l'administration WordPress sous le texte (colonne de gauche) */
.ds-home-shot { margin-top: var(--wp--preset--spacing--40); }
.ds-home-shot img { border: 1px solid var(--wp--preset--color--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); }

/* Nouveautés (inc/news.php) : une carte par livraison, la date en rose */
/* Nouveautés : bloc « Comment DigiSeer évolue » sous l'introduction (4 étapes numérotées, trait fin au-dessus de
   chacune ; contenu de la page, 06/11) */
.ds-evolve { margin-top: var(--wp--preset--spacing--50); }
.ds-evolve > h2 { margin-bottom: var(--wp--preset--spacing--30); }
.ds-evolve .wp-block-column { border-top: 1px solid var(--wp--preset--color--line); padding-top: .9rem; }
.ds-evolve .wp-block-column > * { margin: 0 0 .5rem; }
.ds-evolve .ds-step-no { font-size: 1rem; color: var(--wp--preset--color--ink); font-weight: 500; }
/* Nouveautés (inc/news.php, 05/11) : largeur du site, menu des dates collant ; une livraison par bloc, trait épais
   au-dessus, date à gauche (collée pendant la lecture) et points à droite, séparés par un trait fin comme sur
   Fonctionnalités ; petit écran : la date au-dessus des points */
.ds-news { margin-top: var(--wp--preset--spacing--40); }
.ds-news__toc { margin-bottom: var(--wp--preset--spacing--40); }
.ds-news__entry { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: var(--wp--preset--spacing--50); border-top: 2px solid var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); }
.ds-news__head { align-self: start; position: sticky; top: calc(var(--ds-header-h, 4rem) + var(--ds-toc-h, 0px) + 1rem); }
.ds-news__date { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.ds-news__tag { display: inline-block; margin: .6rem 0 0; padding: .1rem .7rem; border: 1px solid currentColor; border-radius: 999px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--rose-text); }
.ds-news__items { list-style: none; margin: 0; padding: 0; max-width: 52rem; }
.ds-news__items li { padding: .85rem 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-news__items li:first-child { padding-top: .2rem; }
.ds-news__items li:last-child { border-bottom: none; }
.ds-news__items strong { font-weight: 500; }
/* Blog (inc/blog.php, templates/home.html et single.html, 05/11) : introduction, cartes des articles (image,
   catégorie, titre, extrait, date et temps de lecture), page d'un article (signature, image, encadré de fin) */
.ds-blog-intro { margin-top: .75rem; }
.ds-blog-list { margin-top: var(--wp--preset--spacing--50); }
.ds-blog-list .wp-block-post-template, .ds-home-blog .wp-block-post-template { gap: var(--wp--preset--spacing--50); }
.ds-card { display: flex; flex-direction: column; gap: .6rem; }
.ds-card > * { margin: 0 !important; }
.ds-card .wp-block-post-featured-image img { aspect-ratio: 1200 / 630; object-fit: cover; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; }
.ds-card__cat, .ds-card__cat a { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--rose-text); text-decoration: none; }
.ds-card__title { font-size: 1.35rem; line-height: 1.25; }
.ds-card__title a { color: inherit; text-decoration: none; }
.ds-card__title a:hover, .ds-card__title a:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.ds-card .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--muted); }
.ds-card__date, .ds-readtime { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
.ds-post-meta { gap: .2rem 1rem; align-items: baseline; }
.ds-post-meta > * { margin: 0 !important; }
.ds-byline { font-size: var(--wp--preset--font-size--small); }
/* Page d'un article : titre plus petit que les autres h1 (titres longs), pas d'image à la une (elle reprend le titre ;
   elle sert aux cartes et au partage) */
.single-post h1.wp-block-post-title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.12; }
.single-post .wp-block-post-content > h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; }
/* Titre et intertitres plus larges que le texte (1 000 px au lieu de 720) : ils débordent à droite, le bord gauche
   reste aligné sur le texte */
.single-post main.is-layout-constrained > h1.wp-block-post-title,
.single-post .wp-block-post-content.is-layout-constrained > h2,
.archive main.is-layout-constrained > h1.wp-block-query-title {
	--ds-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
	max-width: min(1000px, calc(100% - var(--ds-left))); margin-left: var(--ds-left) !important; margin-right: auto !important;
}
.ds-blog-intro.alignwide { max-width: var(--wp--style--global--wide-size); }
.ds-post-end { margin-top: var(--wp--preset--spacing--60) !important; display: grid; gap: var(--wp--preset--spacing--50); }
.ds-post-cta { padding: 1.4rem 1.6rem; border-radius: 18px; background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); }
.ds-post-cta p { margin: 0 0 .75rem; }
.ds-post-cta__title, .ds-post-more__title { font-size: 1.35rem; font-weight: 500; }
.ds-post-more ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.ds-post-more li { padding: .8rem 0; border-top: 1px solid var(--wp--preset--color--line); }
.ds-post-more li span { display: block; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); margin-top: .2rem; }
@media (max-width: 781px) { .ds-blog-list .wp-block-post-template, .ds-home-blog .wp-block-post-template { grid-template-columns: 1fr !important; } }
/* Page d'une catégorie (templates/archive.html) : même colonne que le texte d'un article, titre comme celui d'un
   article ; un article par ligne, séparé par un trait fin */
.archive h1.wp-block-query-title { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.12; }
.ds-archive-list { margin-top: var(--wp--preset--spacing--40); }
.ds-archive-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.ds-archive-item { display: flex; flex-direction: column; gap: .5rem; padding: var(--wp--preset--spacing--40) 0; border-top: 1px solid var(--wp--preset--color--line); }
.ds-archive-item > * { margin: 0 !important; }
.ds-archive-item .ds-card__title a { color: var(--wp--preset--color--rose-text); }
.ds-archive-item .wp-block-post-excerpt__excerpt { margin: 0; color: var(--wp--preset--color--muted); }
/* Blog : en-tête sur deux colonnes, titre et introduction à gauche, encadré vers la page Nouveautés à droite
   (« Toutes les nouveautés de l'app », date de la dernière livraison) ; une colonne sur petit écran */
.ds-blog-head { gap: var(--wp--preset--spacing--50); }
/* Pages simples avec l'encadré des nouveautés (functions.php, _ds_news_box : Documentation, Côté technique) : surtitre
   et titre à gauche, encadré à droite, à hauteur du titre ; petit écran : encadré sous le titre */
.page-template-default main.is-layout-constrained > .ds-title-row { max-width: var(--wp--style--global--wide-size); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; }
.ds-title-row__main > * { margin: 0; }
.ds-title-row__main > .ds-eyebrow + .wp-block-post-title { margin-top: var(--wp--style--block-gap, 1.5rem); }
@media (max-width: 781px) { .ds-title-row { display: block !important; } .ds-title-row .ds-news-latest { margin-top: 1rem; } }
.ds-blog-head .ds-blog-intro { margin-bottom: 0; }
.ds-news-latest { display: flex; flex-direction: column; gap: .15rem; width: fit-content; margin-left: auto; padding: 1rem 1.3rem; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; color: var(--wp--preset--color--ink); text-decoration: none; }
.ds-news-latest:hover, .ds-news-latest:focus-visible { border-color: var(--wp--preset--color--ink); }
.ds-news-latest__more { font-size: 1.15rem; line-height: 1.25; font-weight: 500; color: var(--wp--preset--color--rose-text); }
.ds-news-latest:hover .ds-news-latest__more, .ds-news-latest:focus-visible .ds-news-latest__more { text-decoration: underline; text-underline-offset: .2em; }
.ds-news-latest__label { font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--muted); }
/* Petit écran : encadré sous l'introduction, calé à gauche */
@media (max-width: 781px) { .ds-news-latest { margin-left: 0; } }
/* Deux encadrés l'un sous l'autre, même largeur (Documentation, Côté technique ; 09/11) */
.ds-news-stack { display: grid; gap: .75rem; width: fit-content; margin-left: auto; }
.ds-news-stack .ds-news-latest, .ds-title-row .ds-news-stack .ds-news-latest { width: auto; margin: 0; }
@media (max-width: 781px) { .ds-news-stack { margin: 1rem 0 0; } }
.ds-title-row:has(.ds-news-stack) { align-items: flex-start !important; } /* titre en haut, pas calé sur le bas des deux encadrés */@media (max-width: 781px) {
	.ds-news__entry { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.ds-news__head { position: static; }
}
.ds-news__empty { color: var(--wp--preset--color--muted); }
/* Cartes de l'accueil de la documentation (11/11) : même style simple que l'app, fond blanc et liseré arrondi */
.ds-docs__card { background: #fff; padding: 1.1rem 1.25rem; border: 1px solid #e6e6e6; border-radius: 12px; }
.ds-docs__card h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
.ds-docs__card ul, .ds-docs__nav ul { list-style: none; margin: 0; padding: 0; }
.ds-docs__card li { padding: .2rem 0; } /* plus de trait entre les lignes (11/11) */
/* Pastille rose devant chaque sous-rubrique de l'accueil de la documentation (11/11, comme le sommaire de côté) */
.ds-docs__card li { display: flex; align-items: baseline; gap: .55rem; }
.ds-docs__card li a { color: var(--wp--preset--color--ink, #1d2327); }
.ds-docs__card li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--rose); transform: translateY(-1px); }
.ds-docs__card a, .ds-docs__nav a { color: inherit; text-decoration: none; }
.ds-docs__card a:hover, .ds-docs__nav a:hover { color: var(--wp--preset--color--rose-text); }
.ds-docs { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
/* Titre des pages de la documentation : largeur du sommaire et de l'article (inc/docs.php, classe ds-docs-page) */
.ds-docs-page .wp-block-post-title { max-width: var(--wp--style--global--wide-size) !important; }
/* Sous-rubrique : titre long (« Sites en trop, remplacer ou supprimer un site ») sur une ligne */
.ds-docs-subpage .wp-block-post-title { font-size: clamp(2rem, 3.4vw, 2.75rem); }
/* Sommaire collé sous l'en-tête du site (11/11 : collé à 1,5rem du haut, son début passait sous l'en-tête collant et le
   menu semblait arrêté à la rubrique active) ; plus haut que l'écran : il défile dans sa colonne */
@media (min-width: 900px) {
  .ds-docs { grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; }
  .ds-docs__nav { position: sticky; top: calc(var(--ds-header-h, 5.5rem) + 1.5rem);
    max-height: calc(100vh - var(--ds-header-h, 5.5rem) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.ds-docs__nav { font-size: .92rem; }
/* Mobile : sommaire replié sous le bouton ☰ (inc/docs.php) ; grand écran : bouton masqué, sommaire en colonne */
.ds-docs__toggle { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .7rem .9rem; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--card); color: inherit; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.ds-docs__burger, .ds-docs__burger::before, .ds-docs__burger::after { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .2s; }
.ds-docs__burger { position: relative; }
.ds-docs__burger::before, .ds-docs__burger::after { content: ""; position: absolute; left: 0; }
.ds-docs__burger::before { top: -6px; }
.ds-docs__burger::after { top: 6px; }
.ds-docs__nav.is-open .ds-docs__burger { background: transparent; }
.ds-docs__nav.is-open .ds-docs__burger::before { transform: translateY(6px) rotate(45deg); }
.ds-docs__nav.is-open .ds-docs__burger::after { transform: translateY(-6px) rotate(-45deg); }
.ds-docs__toc { display: none; padding-top: 1rem; }
.ds-docs__nav.is-open .ds-docs__toc { display: block; }
@media (min-width: 900px) { .ds-docs__toggle { display: none; } .ds-docs__toc, .ds-docs__nav.is-open .ds-docs__toc { display: block; padding-top: 0; } }
/* Rubriques repliables du sommaire (11/11, comme l'app) : pastille rose, titre en noir, nombre de pages en gris,
   flèche ▸ / ▾ à droite ; ouverte : sous-rubriques dessous */
.ds-docs__group { margin: 0 0 .3rem; }
.ds-docs__section { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; cursor: pointer; list-style: none;
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--ink, #1d2327); }
.ds-docs__section::-webkit-details-marker { display: none; }
.ds-docs__section::after { content: "▸"; margin-left: auto; font-size: .65rem; color: var(--wp--preset--color--muted); }
.ds-docs__group[open] > .ds-docs__section::after { content: "▾"; }
.ds-docs__section:hover .ds-docs__head { color: var(--wp--preset--color--rose-text); }
.ds-docs__section small { font-weight: 400; letter-spacing: 0; color: var(--wp--preset--color--muted); }
.ds-docs__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--rose); }
.ds-docs__group > ul { margin: .2rem 0 .8rem !important; }
.ds-docs__nav li a { display: block; padding: .3rem .7rem; border-left: 2px solid var(--wp--preset--color--line); }
/* Sous-rubrique affichée (11/11) : liseré rose seul, texte noir */
.ds-docs__nav li a.is-active { border-left-color: var(--wp--preset--color--rose); color: var(--wp--preset--color--ink, #1d2327); font-weight: 500; }
.ds-docs__crumb { margin: 0 0 1rem; font-size: .9rem; color: var(--wp--preset--color--muted); }
/* Fil d'Ariane : « Documentation » en lien rouge, sans soulignement (10/11), souligné au survol */
.ds-docs__crumb a { color: var(--wp--preset--color--rose-text); text-decoration: none; }
.ds-docs__crumb a:hover { text-decoration: underline; }
.ds-docs__content :is(h2, h3) { scroll-margin-top: 1.5rem; }
/* Titres des sections un cran sous le titre de la page (10/11 : « L'essentiel en 5 étapes » presque aussi gros que
   « Premiers pas et installation ») */
.ds-docs__content h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; }
/* De l'air au-dessus de chaque section (étapes détaillées et leurs captures, 10/11) ; pas au-dessus du premier titre */
.ds-docs__content > h2:not(:first-child) { margin-top: 6rem !important; }
.ds-docs__content > h3 { margin-top: 3.2rem !important; }
.ds-docs__content h3 { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.3; }
/* Liens en gras (étapes du résumé « L'essentiel en 6 étapes », 10/11) : couleur seule, sans soulignement ; souligné au survol */
.ds-docs__content strong a, .ds-docs__content a strong { text-decoration: none; }
.ds-docs__content strong a:hover, .ds-docs__content a:hover strong { text-decoration: underline; }
/* Sous-titre : phrase en gras seule juste sous un titre (« 5 minutes suffisent, sans clé à copier. », 10/11) : collée
   au titre, de l'air avant la suite */
.ds-docs__content h2:has(+ p > strong:only-child) { margin-bottom: 0 !important; }
.ds-docs__content h2 + p:has(> strong:only-child) { margin-top: .35rem !important; margin-bottom: 1.6rem !important; font-size: 1.05rem; }
/* Résumé en étapes (liste numérotée dont chaque élément commence par un lien en gras vers la page, 10/11) : pastille rose
   numérotée, titre de l'étape, explication dessous en plus petit ; encadré léger */
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) {
	list-style: none; counter-reset: ds-step; margin: 1rem 0 2.4rem !important; padding: 1.6rem 1.6rem;
	border: 1px solid var(--wp--preset--color--line); border-radius: 12px; display: grid; gap: 1.5rem;
}
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) > li {
	counter-increment: ds-step; position: relative; padding-left: 2.6rem; margin: 0;
	font-size: .92rem; line-height: 1.5; color: var(--wp--preset--color--muted);
}
/* Pastille portée par le lien de l'étape (placée à gauche de la ligne) : un clic sur le numéro mène à la section */
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) > li > strong:first-child > a::before {
	content: counter(ds-step); position: absolute; left: 0; top: .05rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
	display: grid; place-items: center; background: var(--wp--preset--color--rose-text, #d63384); color: #fff; font-size: .85rem; font-weight: 500;
}
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) > li > strong:first-child { font-size: 1.02rem; }
/* Bouton « Télécharger digiseer.zip » (lien .zip d'une étape, 10/11) : en haut à droite de l'encadré, à la hauteur de la 1re étape, avec
   une icône de téléchargement ; masqué sur téléphone (on n'installe pas une extension WordPress depuis un téléphone) */
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) { position: relative; }
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) a[href$=".zip"]:last-child { display: none; }
/* Lien dans la phrase (« le fichier digiseer.zip ») : discret, toujours visible */
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) a[href$=".zip"]:not(:last-child) { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
@media (min-width: 900px) {
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]):has(a[href$=".zip"]) { padding-right: 17rem; }
	/* 1re étape sans position propre : le bouton se place par rapport à l'encadré ; sa pastille est replacée au même endroit */
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) > li:first-child { position: static; }
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) > li:first-child > strong:first-child > a::before { left: 1.6rem; top: 1.65rem; }
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) a[href$=".zip"]:last-child {
		position: absolute; right: 1.8rem; top: 1.25rem;
		display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.3rem; border-radius: 999px;
		background: var(--wp--preset--color--rose-text, #d63384); color: #fff; font-weight: 500; font-size: .95rem;
		text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(214, 51, 132, .25);
	}
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) a[href$=".zip"]:last-child::before {
		content: ""; width: 1.15rem; height: 1.15rem; background: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) a[href$=".zip"]:last-child:hover { filter: brightness(1.08); text-decoration: none; }
}
/* De l'air sous l'encadré des étapes (« Le Tableau de bord vous guide… ») */
.ds-docs__content ol:has(> li > strong:first-child > a[href^="#"]) + * { margin-top: 3rem !important; }
.ds-docs__content img { display: block; max-width: 100%; height: auto; margin: 1.2rem 0; border: 1px solid var(--wp--preset--color--line); cursor: zoom-in; }
/* Loupe (inc/docs.php) : image en grand par-dessus la page, ajustée à l'écran */
.ds-zoom { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0, 0, 0, .85); cursor: zoom-out; }
.ds-zoom img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
/* Capture de la page entière (data-full, 11/11) : à la largeur de l'écran (1 400 px au plus), la loupe défile */
.ds-zoom--full { align-items: flex-start; overflow-y: auto; }
.ds-zoom--full img { max-width: min(100%, 1400px); max-height: none; height: auto; }
.ds-zoom--full .ds-zoom__close { position: fixed; }
.ds-zoom__close { position: absolute; top: .8rem; right: 1rem; background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.ds-docs__content pre { background: #1e1e1e; color: #f2f2f2; padding: 1rem 1.2rem; overflow-x: auto; font-size: .88rem; }
.ds-docs__content :not(pre) > code { background: var(--wp--preset--color--card); padding: .1em .35em; font-size: .9em; }
.ds-docs__content table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.ds-docs__content :is(th, td) { border: 1px solid var(--wp--preset--color--line); padding: .45rem .7rem; text-align: left; }
.ds-docs__updated { margin-top: 2rem !important; font-size: .85rem; color: var(--wp--preset--color--muted); }
.ds-docs__pager { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--line); }
.ds-docs__pager a { color: var(--wp--preset--color--rose-text); text-decoration: none; font-weight: 500; }
/* Accueil, haut de page : 3 points courts sous le grand titre, avec une coche */
.ds-hero-points { list-style: none; margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--40); padding: 0; display: grid; gap: .45rem; font-size: var(--wp--preset--font-size--large); }
.ds-hero-points li { position: relative; padding-left: 1.6em; }
.ds-hero-points li::before { content: "✓"; position: absolute; left: 0; color: var(--wp--preset--color--rose-text); font-weight: 500; }
/* Liens discrets vers la page qui détaille chaque point : couleur du texte, soulignement léger, rose au survol */
.ds-hero-points a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ds-hero-points a:hover { color: var(--wp--preset--color--rose-text); text-decoration-color: currentColor; }

/* Accueil « Pour qui » : types de sites en grille 2 × 2 (1 colonne sur mobile) */
.ds-who-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem var(--wp--preset--spacing--50); }
@media (min-width: 640px) { .ds-who-grid { grid-template-columns: repeat(2, 1fr); } }
.ds-who-grid > .wp-block-group { margin: 0 !important; }
.ds-who-grid h3 { margin-top: 0; }
/* Accueil, « Pour qui » (09/11) : chaque type de site dans un encadré, comme les cartes de l'accueil (fond, coins
   arrondis) ; sous-titres plus marqués sur ordinateur */
.ds-who-grid > .wp-block-group { background: var(--ds-surface, var(--wp--preset--color--card)); border-radius: 18px; padding: 1.4rem 1.6rem; box-sizing: border-box; }
.ds-who-grid > .wp-block-group > p { margin-bottom: 0; }
.ds-who-grid h3 { margin-bottom: .5rem; font-weight: 500; }
@media (min-width: 1000px) { .ds-who-grid h3 { font-size: 1.45rem; line-height: 1.25; } }
/* Accueil, cartes « Pourquoi » (.ds-why) et « Pour qui » (.ds-who-grid) plus vivantes (09/11) : une couleur par carte
   (le rose pour toutes), fond légèrement teinté en dégradé, pastille devant le titre */
.ds-why .ds-doc-card, .ds-who-grid > .wp-block-group {
	--acc: #d6337a;
	position: relative; border: 1px solid color-mix(in srgb, var(--acc) 18%, transparent) !important; border-radius: 18px;
	background: linear-gradient(140deg, color-mix(in srgb, var(--acc) 11%, #fff) 0%, #fff 62%) !important;
}
/* (Une seule couleur, le rose, pour toutes les cartes : pas d'arc-en-ciel, 09/11) */
/* Pastille à gauche du titre, centrée sur sa première ligne */
.ds-why .ds-doc-card h3, .ds-who-grid > .wp-block-group h3 { display: flex; align-items: center; gap: .75rem; }
/* Titres des cartes plus grands (09/11) : 1,3 rem sur téléphone, jusqu'à 1,65 rem sur ordinateur */
.ds-why .ds-doc-card h3, .ds-who-grid > .wp-block-group h3 { font-size: clamp(1.3rem, 1.9vw, 1.65rem) !important; line-height: 1.2; font-weight: 500; }
.ds-why .ds-doc-card h3::before, .ds-who-grid > .wp-block-group h3::before {
	content: ""; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 10px;
	background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 55%, #fff));
	box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--acc) 70%, transparent);
}
/* (Pas d'effet au survol : ces cartes ne sont pas des liens, les soulever laissait croire qu'on pouvait cliquer) */
/* Étude de cas dans la 3e colonne : titre à taille de carte (il était prévu pour toute la largeur) */
.ds-who-row .is-style-card h3.has-x-large-font-size { font-size: var(--wp--preset--font-size--large) !important; line-height: 1.3; } /* comme les titres des types de sites */
.ds-who-row .is-style-card { height: 100%; box-sizing: border-box; }
/* Accueil : « Pourquoi DigiSeer » sur 3 colonnes, résumé des tarifs sur 4 */
@media (min-width: 1000px) { .ds-why-grid { grid-template-columns: repeat(3, 1fr); } .ds-plan-grid { grid-template-columns: repeat(4, 1fr); } }
/* Côté technique, « 6. Fiabilité » (09/11) : 6 cartes par thème sur 2 colonnes dans la colonne de texte (la colonne
   « Sur cette page » reste visible à côté ; 1 colonne sur téléphone), cartes d'une ligne de même hauteur ; listes
   resserrées, libellé en gras, texte en gris */
.ds-rel-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ds-rel-grid { grid-template-columns: repeat(2, 1fr); } }
.ds-rel-grid .ds-doc-card { height: 100%; box-sizing: border-box; }
.ds-rel-grid .ds-doc-card ul { margin: .2rem 0 0; padding-left: 1.05em; color: var(--wp--preset--color--muted); font-size: .95rem; line-height: 1.5; }
.ds-rel-grid .ds-doc-card li { margin: 0 0 .45rem; }
.ds-rel-grid .ds-doc-card li:last-child { margin-bottom: 0; }
.ds-rel-grid .ds-doc-card li::marker { color: var(--wp--preset--color--rose-text); }
.ds-rel-grid .ds-doc-card li strong { color: var(--wp--preset--color--ink, inherit); font-weight: 500; }
.ds-doc-card .ds-home-price { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 500; color: var(--wp--preset--color--ink, inherit); font-variant-numeric: tabular-nums; }
.ds-doc-card .ds-home-price small { font-size: .8rem; font-weight: 400; color: var(--wp--preset--color--muted); }

/* Page Fonctionnalités : captures de l'app, texte et image en alternance (image d'abord sur ordinateur une fois sur deux) */
.ds-shot { margin: 0; }
.ds-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; box-shadow: 0 18px 40px -24px rgba(17, 17, 17, .35); background: #fff; }
.ds-shot figcaption { margin-top: .6rem; font-size: .8rem; color: var(--wp--preset--color--muted); text-align: left; }
/* Capture recadrée (haut d'un écran long, inc/screens.php) : bas en fondu ; le clic ouvre la page entière */
.ds-shot__frame { position: relative; display: block; }
.ds-shot__frame::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 32%; border-radius: 0 0 13px 13px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 78%); pointer-events: none; }
/* Haut de Fonctionnalités : texte et chat alignés en haut (centrés, le texte plus court descendait au milieu) */
.ds-feat-hero__cols { align-items: flex-start !important; }
.ds-feat-hero__cols > .wp-block-column { align-self: flex-start !important; }
/* Chat en haut de Fonctionnalités : la capture a déjà le cadre du chat, pas de second liseré autour */
.ds-feat-hero__shot img { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
/* Icône « i » de la légende : documentation de l'écran (inc/screens.php) */
.ds-shot__doc { display: inline-flex; vertical-align: -3px; margin-left: .35rem; color: var(--wp--preset--color--rose, #e84f9b); border-radius: 50%; }
.ds-shot__doc:hover, .ds-shot__doc:focus-visible { color: var(--wp--preset--color--rose-text); }
.ds-shot__doc svg { display: block; }
@media (max-width: 781px) { .ds-tour--flip .wp-block-columns { flex-direction: column-reverse; } }
/* Visite (Fonctionnalités) : étiquette et titre au-dessus des colonnes, sur toute la largeur ; titres un peu plus petits
   que les autres h2 pour que le plus long (« Une réponse rédigée, avec ses sources dans le texte. ») tienne sur une ligne */
.ds-tour > h2.wp-block-heading { font-size: clamp(1.75rem, 4vw, 2.75rem); }
/* Titre de page sur une ligne (Recherche WordPress) : sur toute la largeur, un peu plus petit que les autres h1 */
@media (min-width: 782px) { h1.ds-h1-line { font-size: clamp(1.6rem, 3.15vw, 2.7rem); white-space: nowrap; } }
/* Visite : texte et capture alignés en haut (colonnes centrées verticalement dans l'éditeur) */
.ds-tour .wp-block-columns { align-items: flex-start !important; }
.ds-tour .wp-block-column { align-self: flex-start !important; }
/* Bureau : plus d'espace entre le titre et le texte / la capture */
@media (min-width: 782px) { .ds-tour > h2.wp-block-heading { margin-bottom: var(--wp--preset--spacing--50); } }
.ds-shot img[role="button"] { cursor: zoom-in; transition: transform calc(2 * var(--ds-u)) ease; }
.ds-shot img[role="button"]:hover { transform: translateY(-2px); }
.ds-shot img[role="button"]:focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); outline-offset: 3px; }

/* Capture agrandie (lightbox.js) */
.ds-lightbox { width: min(96vw, 1600px); max-width: none; max-height: 94vh; padding: 0; border: 0; background: transparent; overflow: visible; cursor: zoom-out; }
.ds-lightbox::backdrop { background: rgba(17, 17, 17, .82); }
.ds-lightbox img { display: block; width: 100%; height: auto; max-height: 86vh; object-fit: contain; border-radius: 12px; background: #fff; }
.ds-lightbox__caption { margin: .7rem 0 0; color: #f2f2f0; font-size: .9rem; text-align: center; }
.ds-lightbox__close { position: absolute; top: -2.6rem; right: 0; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: #fff; color: #111; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.ds-lightbox__close:focus-visible { outline: 3px solid var(--wp--preset--color--rose); outline-offset: 2px; }
/* Capture en page entière (galerie) : agrandie, elle défile dans la fenêtre au lieu d'être réduite à une bande illisible */
.ds-lightbox--tall { max-height: 94vh; overflow-y: auto; }
.ds-lightbox--tall img { max-height: none; object-fit: initial; }
/* (le bouton × au-dessus de l'image serait coupé par le défilement : posé sur l'image, toujours visible) */
.ds-lightbox--tall .ds-lightbox__close { position: sticky; top: .6rem; float: right; margin: .6rem .6rem -2.8rem 0; z-index: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* Fonctionnalités : « L'administration en un coup d'œil » (outils/tour-gallery) — une vignette par écran (haut de la
   capture en page entière), titre, une phrase, lien vers la documentation ; clic : capture entière (lightbox.js) */
.ds-overview__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--wp--preset--spacing--50, 2rem) 1.5rem; margin-top: var(--wp--preset--spacing--50, 2rem); }
.ds-overview__grid > .wp-block-group { margin: 0 !important; display: flex; flex-direction: column; }
.ds-overview .ds-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.ds-overview .ds-shot figcaption { display: none; } /* légende lue par la lightbox seulement : le titre de la carte suffit */
.ds-overview h3 { margin: .9rem 0 0; font-size: var(--wp--preset--font-size--medium, 1.125rem); line-height: 1.3; }
.ds-overview h3 + p { margin: .35rem 0 0; font-size: .95rem; color: var(--wp--preset--color--muted); line-height: 1.6; min-height: calc(2 * 1.6em); } /* textes écrits pour 2 lignes : cartes de même hauteur */
.ds-overview .ds-overview__card { display: flex; flex-direction: column; }
.ds-overview .ds-overview__card .ds-overview__more { margin-top: auto; padding-top: .5rem; } /* « En savoir plus » aligné en bas */
.ds-overview .ds-overview__more { margin: .5rem 0 0; font-size: .9rem; }
.ds-overview .ds-overview__more a { text-decoration: none; }
.ds-overview .ds-overview__note { margin: var(--wp--preset--spacing--50, 2rem) 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Téléphone : une rangée qu'on fait glisser (la carte suivante dépasse à droite) au lieu de dix cartes empilées */
@media (max-width: 781px) {
	.ds-overview__grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		margin-inline: calc(-1 * var(--wp--style--root--padding-right, 1rem)); padding: 0 var(--wp--style--root--padding-right, 1rem) .75rem;
		scroll-padding-inline: var(--wp--style--root--padding-right, 1rem); scrollbar-width: thin; }
	.ds-overview__grid > * { flex: 0 0 80%; scroll-snap-align: start; }
}
/* Accueil de la documentation : même largeur que le sommaire en cartes au-dessus, titre et espaces resserrés */
.wp-block-post-content > .ds-overview--docs { max-width: var(--wp--style--global--wide-size) !important; margin-top: var(--wp--preset--spacing--60, 3rem); }
.ds-overview--docs > h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.2; }
.ds-overview--docs > h2 + p { margin: .5rem 0 0; color: var(--wp--preset--color--muted); }
.ds-overview--docs .ds-overview__grid { margin-top: 1.5rem; }
/* Ligne « Données et sécurité » sous la galerie : détachée des dernières cartes */
.ds-overview--docs + * { margin-top: var(--wp--preset--spacing--70, 4.5rem) !important; }

/* Accueil : lien vers la démo réelle ; page Démo : le chat et ses exemples */
/* Offre de lancement (code MERCI) : bandeau de la page Tarifs, ligne sous le bouton de l'accueil */
.ds-launch { margin: var(--wp--preset--spacing--50) 0 0; padding: 1rem 1.25rem; border: 1px solid var(--wp--preset--color--rose-text); border-radius: 12px; max-width: 860px; }
.ds-launch p { margin: 0; }
/* Avis de clients (shortcode [digiseer_temoignages], inc/testimonials.php, assets/js/testimonials.js) : un avis à la fois,
   tous dans la même case de grille (hauteur du plus long : pas de saut de mise en page) */
.ds-tm-slider { max-width: 860px; margin: var(--wp--preset--spacing--60, 3rem) auto 0; padding-bottom: var(--wp--preset--spacing--70, 4.5rem); text-align: center; } /* air sous « Témoignages de clients abonnés… », avant la bande suivante */
.ds-tm-title { margin: 0 0 1.5rem; font-size: var(--wp--preset--font-size--x-large); line-height: 1.1; }
.ds-tm-track { display: grid; }
.ds-tm { grid-area: 1 / 1; margin: 0; padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--line); border-radius: var(--ds-radius-widget); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.ds-tm.is-active { opacity: 1; visibility: visible; }
.ds-tm-headline { margin: 0; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.ds-tm blockquote { margin: 0; padding: 0; border: 0; }
.ds-tm blockquote p { margin: 0; font-size: var(--wp--preset--font-size--large); line-height: 1.55; white-space: pre-line; }
.ds-tm figcaption { display: flex; align-items: center; gap: .75rem; font-size: var(--wp--preset--font-size--small); text-align: left; }
.ds-tm-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; flex: none; }
.ds-tm-who { color: var(--wp--preset--color--muted); }
.ds-tm-site { color: var(--wp--preset--color--rose-text); text-decoration: none; }
.ds-tm-site:hover, .ds-tm-site:focus-visible { text-decoration: underline; }
.ds-tm-nav { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1rem; }
.ds-tm-nav button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 50%; background: var(--wp--preset--color--card); color: var(--wp--preset--color--ink); cursor: pointer; }
.ds-tm-nav button:hover, .ds-tm-nav button:focus-visible { border-color: var(--wp--preset--color--rose-text); color: var(--wp--preset--color--rose-text); }
.ds-tm-count { min-width: 3.5em; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); font-variant-numeric: tabular-nums; }
.ds-tm-note { margin: .9rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Invitation à témoigner (12/11) : sous la note, même discrétion, un peu plus étroite pour rester sur deux lignes */
.ds-tm-invite { max-width: 62ch; margin: .4rem auto 0; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .ds-tm { transition: none; } }
.ds-launch p + p { margin-top: .35rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }
/* Titre « Offre de lancement » plus grand, puis l'offre en lignes (texte normal), puis les conditions en petit */
.ds-launch .ds-launch-title { font-size: var(--wp--preset--font-size--large); font-weight: 500; color: var(--wp--preset--color--rose-text); }
.ds-launch .ds-launch-title + p { font-size: inherit; color: inherit; line-height: 1.5; }
.ds-launch strong { color: var(--wp--preset--color--rose-text); }
.ds-launch-hl { color: var(--wp--preset--color--rose-text); } /* « 5 mois offerts » : rose, sans gras (09/11) */
/* Offres encore disponibles : en petit, en gris (10/11) */
.ds-launch-left { font-size: .82em; color: var(--wp--preset--color--muted); }
.ds-launch code { font: inherit; font-weight: 500; letter-spacing: .04em; padding: .05em .4em; border: 1px dashed currentColor; border-radius: 6px; }
/* Tarifs et section Tarifs de l'accueil (composition synchronisée « Offre de lancement ») : bandeau à droite du titre
   (et de l'introduction), son haut aligné sur celui du titre (même marge que le titre sous le surtitre) ; 400 px au plus
   (460 : le titre passait à la ligne) ; dessous sur mobile */
@media (min-width: 900px) {
	.wp-block-group:has(> .ds-launch) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); column-gap: var(--wp--preset--spacing--60); align-items: start; }
	.wp-block-group:has(> .ds-launch) > * { grid-column: 1; }
	.wp-block-group:has(> .ds-launch) > :first-child { grid-column: 1 / -1; }
	.wp-block-group:has(> .ds-launch) > .ds-launch { grid-column: 2; grid-row: 2 / span 2; margin: .75rem 0 0; align-self: start; }
	/* Accueil (section Tarifs : surtitre et titre seuls) : le bandeau, plus haut que le titre, ne compte pas dans la
	   hauteur de la section (sinon grand vide sous le titre) ; il descend à côté de l'introduction de la section
	   suivante (62 caractères de large au plus) */
	.ds-section:has(> .ds-launch) { position: relative; }
	.ds-section:has(> .ds-launch) > .ds-launch { position: absolute; inset: 0 0 auto 0; z-index: 1; background: var(--wp--preset--color--base, #fff); }
}
.ds-launch-line { margin: .9rem 0 0; font-size: var(--wp--preset--font-size--small); }
.ds-launch-line strong { color: var(--wp--preset--color--rose-text); }
.ds-launch-line a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Accueil de la documentation : bloc « Posez votre question » (chat DigiSeer) au-dessus du sommaire */
.ds-docs-ask { margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--60); max-width: 860px; }
.ds-docs-ask h2 { margin-bottom: .3rem; }
.ds-docs-ask > p { margin-top: 0; }
/* Accueil de la documentation (08/11) : introduction à gauche, « Posez votre question » et le chat à droite */
.ds-docs-intro { margin-bottom: var(--wp--preset--spacing--60) !important; }
.ds-docs-intro .ds-docs-ask { margin: 0; max-width: none; }
.ds-docs-intro .ds-news-latest { margin: 1.75rem 0 0; } /* encadré « Toutes les nouveautés » sous « premiers pas », aligné à gauche */
/* « Côté technique » dessous, les deux encadrés à la même largeur (09/11) */
.ds-docs-intro .ds-news-stack { margin: 1.75rem 0 0; }
.ds-docs-intro .ds-news-stack .ds-news-latest { margin: 0; } /* sinon la marge de la ligne au-dessus s'ajoute à chaque encadré */
.ds-docs-intro .ds-docs-ask h2 { margin-top: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
@media (max-width: 781px) { .ds-docs-intro .ds-docs-ask { margin-top: var(--wp--preset--spacing--50); } }
.ds-demo-link { margin-top: 1.4rem; font-weight: 500; }
.ds-demo-link a { color: var(--wp--preset--color--rose-text); }
.ds-demo .ds-rules { margin-top: .6rem; }

/* Mini sommaire d'une page (groupe nav de classe ds-toc, enfant direct du contenu : Comparatif, Fonctionnalités) :
   collé sous l'en-tête fixe pendant le défilement, sans liseré (05/11). Ordinateur et tablette : les liens passent à
   la ligne (avant : une ligne forcée, les derniers liens cachés à droite) ; petit écran : voir plus bas. Hauteurs de l'en-tête et du sommaire posées par assets/js/page-nav.js
   (--ds-header-h, --ds-toc-h, à chaque redimensionnement) ; les titres ancrés s'arrêtent dessous */
.ds-toc { position: sticky; top: var(--ds-header-h, 4rem); z-index: 40; background: var(--wp--preset--color--page); }
/* Accueil, bandeau « Sous le capot » (09/11), après la section RGPD : carte, texte à gauche, bouton vers Côté technique
   à droite (secondaire : le bouton principal de la page reste « Installer ») ; empilés sur téléphone.
   Version retenue (--b) : fond rose pâle, bouton plein noir, rose au survol ; pas de surtitre */
/* Pas de filet de section au-dessus du bandeau ni au-dessus de la section suivante : la carte suffit */
.ds-tech-band, .ds-tech-band + .ds-section { border-top: none !important; }
.ds-tech-band__card { max-width: 1000px; margin-left: auto !important; margin-right: auto !important; padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.4rem, 4vw, 2.8rem) !important; }
.ds-tech-band__cols { gap: 1.2rem 2.5rem; margin: 0; }
.ds-tech-band__title { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; }
.ds-tech-band__text { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--wp--preset--color--ink, #111); opacity: .8; }
.ds-tech-band__buttons { justify-content: flex-end; }
/* Titre sur une ligne (ordinateur, tablette) : grille à 2 colonnes, le texte prend la place libre (au moins la largeur
   du titre), le bouton sa largeur. (Les colonnes flex de WordPress, réglées en flex, écrasaient le texte : 09/11) */
@media (min-width: 782px) {
	.ds-tech-band__cols { display: grid !important; grid-template-columns: 1fr auto; align-items: center; }
	.ds-tech-band__cols > .wp-block-column { flex: none !important; width: auto !important; margin: 0 !important; }
	.ds-tech-band__title { white-space: nowrap; font-size: clamp(1.5rem, 2.3vw, 1.9rem); }
}
.ds-tech-band__btn .wp-block-button__link {
	padding: .75em 1.5em !important; font-size: 1rem; font-weight: 500; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ds-tech-band--b .ds-tech-band__card { background: var(--wp--preset--color--rose-tint) !important; border-color: transparent !important; }
.ds-tech-band--b .ds-tech-band__btn .wp-block-button__link {
	color: #fff !important; background: var(--wp--preset--color--ink, #111); border: 1.5px solid var(--wp--preset--color--ink, #111) !important; }
.ds-tech-band--b .ds-tech-band__btn .wp-block-button__link:hover, .ds-tech-band--b .ds-tech-band__btn .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--rose-text); border-color: var(--wp--preset--color--rose-text) !important; }
@media (max-width: 781px) { .ds-tech-band__buttons { justify-content: flex-start; } }
/* Clic sur un lien du sommaire (09/11) : défilement doux jusqu'à la section, sauf si le visiteur a demandé moins
   d'animations à son système */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Renforcé (09/11, même air de famille que la colonne « Sur cette page ») : liens plus grands en demi-gras, points de
   séparation discrets, section en cours en gras et soulignée d'un trait épais ; filet sous le sommaire collant */
.ds-toc { border-bottom: 1px solid var(--wp--preset--color--line); }
.ds-toc p { margin: 0; padding: .65rem 0; font-size: 1rem; line-height: 1.8; color: var(--wp--preset--color--line); }
.ds-toc a { color: var(--wp--preset--color--rose-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
.ds-toc a:hover, .ds-toc a:focus-visible { text-decoration: underline; text-underline-offset: .25em; }
.ds-toc a[aria-current] { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
/* Petit écran : tous les liens visibles, à la ligne, et menu non collant (sur plusieurs lignes, il mangeait l'écran).
   Avant (05/11) : une ligne à faire défiler du doigt, impossible à la souris dans une fenêtre d'ordinateur étroite */
@media (max-width: 781px) {
	.ds-toc { position: static; }
	.ds-toc p { font-size: .9rem; line-height: 1.7; }
}
h2[id] { scroll-margin-top: calc(var(--ds-header-h, 4rem) + var(--ds-toc-h, 0px) + 1rem); }
@media (max-width: 781px) { h2[id] { scroll-margin-top: calc(var(--ds-header-h, 4rem) + 1rem); } }
/* Colonne « Sur cette page » (09/11, sommaire avec la classe ds-toc--side : Côté technique) : sur grand écran, copie
   verticale du sommaire dans la marge droite (créée par assets/js/page-nav.js), visible dès le haut de la page (sous
   l'encadré des nouveautés, puis sous l'en-tête ; position top posée par le script), masquée au passage des blocs
   pleine largeur (classe is-on) ; le sommaire horizontal est alors masqué. Petit écran : rien ne change */
.ds-toc-side { display: none; }
@media (min-width: 1200px) {
	.ds-toc--side { display: none; } /* remplacé par la colonne, visible dès le haut de la page */
	/* Pages à colonne de sommaire (Côté technique, FAQ, Sécurité) : texte un peu plus large (10/11 : 720 → 800 px), la
	   marge droite étant occupée par la colonne */
	body:has(.ds-toc--side) { --wp--style--global--content-size: 800px; }
	/* Grand titre de la page arrêté avant la colonne (230 px + 3rem d'écart) : il passe à la ligne au lieu de la toucher */
	/* (pas quand le titre partage déjà sa ligne avec l'encadré « Toutes les nouveautés » (.ds-title-row, Côté technique) :
	   la réduction s'ajoutait et coupait le titre au milieu des mots, 09/11) */
	body:has(.ds-toc--side) main .wp-block-post-title:not(.ds-title-row .wp-block-post-title) { max-width: min(calc(var(--wp--style--global--wide-size) - 230px - 3rem), calc(100% - 230px - 3rem)) !important; }
	body:has(.ds-toc--side) h2[id] { scroll-margin-top: calc(var(--ds-header-h, 4rem) + 1.5rem); }
	.ds-toc-side {
		display: block; position: fixed; z-index: 30; width: 230px;
		top: calc(var(--ds-header-h, 4rem) + 2rem);
		right: max(16px, calc((100vw - var(--wp--style--global--wide-size)) / 2));
		opacity: 0; visibility: hidden; transform: translateY(6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.ds-toc-side.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
	/* Titre « Sur cette page » plus affiché nulle part (09/11) : la liste suffit ; le nom reste annoncé par les lecteurs
	   d'écran (aria-label de la colonne, page-nav.js) */
	.ds-toc-side__title { display: none; }
	.ds-toc-side ul { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--wp--preset--color--line); }
	.ds-toc-side li { margin: 0; }
	.ds-toc-side a {
		display: block; margin-left: -2px; padding: .35rem 0 .35rem 1rem; border-left: 3px solid transparent;
		font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--wp--preset--color--ink, #111); text-decoration: none;
	}
	.ds-toc-side a:hover, .ds-toc-side a:focus-visible { color: var(--wp--preset--color--rose-text); }
	.ds-toc-side a[aria-current] { color: var(--wp--preset--color--rose-text); border-left-color: var(--wp--preset--color--rose-text); font-weight: 500; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) { .ds-toc-side, .ds-toc-side.is-on { transition: none; transform: none; } }
/* Section juste sous le sommaire : pas de bordure en haut (elle collait au sommaire, 05/11) */
.ds-toc + .ds-section { border-top: none; }
/* Petite mention sous le sommaire (Fonctionnalités : « Captures réalisées… »), qui défile avec la page ; la section
   suivante, sans bordure, remonte (espacement 60 → 40 du thème : le vide sous le sommaire était trop grand) */
.ds-toc-note p { margin: .25rem 0 0; }
/* Lien sans soulignement (souligné au survol), dans la couleur des liens : « Documentation » sous le sommaire */
a.ds-link-plain { text-decoration: none; }
a.ds-link-plain:hover, a.ds-link-plain:focus-visible { text-decoration: underline; text-underline-offset: .2em; }
.ds-toc-note + .ds-section { border-top: none; padding-top: var(--wp--preset--spacing--40) !important; }

/* Fonctionnalités : intertitre de partie (Pour vos visiteurs / Pour vous / Pour votre organisation), trait épais
   au-dessus (.ds-section.ds-part : plus fort que le trait fin des sections, posé plus bas), phrase et liens vers les
   sous-parties ; la première section de la partie suit sans trait ni grand vide (05/11) */
.ds-section.ds-part { border-top: 2px solid var(--wp--preset--color--ink); padding-top: var(--wp--preset--spacing--60); padding-bottom: 0; }
.ds-toc-note + .ds-section.ds-part { border-top: none; }
.ds-part + .ds-section { border-top: none; padding-top: var(--wp--preset--spacing--50) !important; }
/* Intertitre plus petit et phrase de bénéfice plus grande, de la taille des titres de section (05/11) */
.ds-part > h2.ds-part__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin: 0; }
/* Un peu plus petite et lignes équilibrées : 2 lignes de longueur voisine sur ordinateur, sans mot seul en 3e ligne */
.ds-part__lead { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.2; text-wrap: balance; color: var(--wp--preset--color--ink); max-width: 66rem; margin: .75rem 0 0; } /* 66rem : largeur du titre de la page sur 2 lignes */
/* En-tête de Fonctionnalités : sommaire juste sous « Fonctionnalités », puis titre et introduction (ds-feat-hero) ;
   « Le détail, écran par écran » collé à l'introduction (05/11) */
.ds-toc + .ds-feat-hero { margin-block-start: var(--wp--preset--spacing--30); }
.ds-feat-hero + .ds-toc-note { margin-block-start: .5rem; }
/* « Formule Free… / Essayer gratuitement » en fin de partie : sous la liste, dans la colonne de texte de la dernière
   section (05/11) */
.ds-col-cta { margin-top: var(--wp--preset--spacing--50) !important; }
.ds-col-cta > p { margin: 0 0 var(--wp--preset--spacing--20); }

/* Formulaire de contact (page Contact, assets/js/contact.js) : libellés au-dessus des champs, nom et e-mail côte à
   côte (l'un sous l'autre sur mobile), bouton rose du site, message d'état sous le bouton */
.ds-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.ds-contact label { display: flex; flex-direction: column; gap: .35rem; font-weight: 500; font-size: .95rem; }
.ds-contact label small { font-weight: 400; color: var(--wp--preset--color--muted); }
.ds-contact .is-full { grid-column: 1 / -1; }
.ds-contact :is(input, select, textarea) { font: inherit; font-weight: 400; color: inherit; background: var(--wp--preset--color--page); border: 1px solid #b9b9b5; border-radius: 10px; padding: .6rem .75rem; width: 100%; box-sizing: border-box; }
.ds-contact textarea { min-height: 9rem; resize: vertical; }
.ds-contact :is(input, select, textarea):focus { outline: 2px solid var(--wp--preset--color--rose-text); outline-offset: 1px; border-color: transparent; }
.ds-contact :is(input, select, textarea):disabled { opacity: .6; }
.ds-contact label.ds-contact__check { flex-direction: row; align-items: flex-start; gap: .6rem; font-weight: 400; }
.ds-contact__check input { width: 1.1rem; height: 1.1rem; margin: .2rem 0 0; flex: none; accent-color: var(--wp--preset--color--rose); }
.ds-contact__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ds-contact__send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ds-contact button { font: inherit; font-weight: 500; border: 0; border-radius: 999px; padding: .75rem 1.6rem; background: var(--wp--preset--color--rose); color: #fff; cursor: pointer; }
.ds-contact button:hover { background: var(--wp--preset--color--rose-text); }
.ds-contact button:focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); outline-offset: 2px; }
.ds-contact button:disabled { opacity: .5; cursor: default; }
.ds-contact [data-status] { margin: 0; font-weight: 500; }
.ds-contact [data-status].is-error { color: #b42318; }
.ds-contact__legal { margin: 0; font-size: .85rem; color: var(--wp--preset--color--muted); }
@media (max-width: 600px) { .ds-contact { grid-template-columns: 1fr; } }

/* Bouton Haut de page (assets/js/page-nav.js) : pages longues seulement, affiché après un écran de défilement */
.ds-totop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; width: 2.75rem; height: 2.75rem; border: 1px solid var(--wp--preset--color--line); border-radius: 50%; background: var(--wp--preset--color--page); color: var(--wp--preset--color--ink); box-shadow: 0 2px 10px rgba(0,0,0,.12); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s, transform .2s, visibility .2s; }
.ds-totop.is-on { opacity: 1; visibility: visible; transform: none; }
.ds-totop:hover { color: var(--wp--preset--color--rose-text); border-color: currentColor; }
.ds-totop:focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); outline-offset: 2px; }
.ds-totop::before { content: ""; display: block; width: 1.1rem; height: 1.1rem; margin: auto; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (prefers-reduced-motion: reduce) { .ds-totop { transition: none; } }
/* Téléphone (10/11) : bouton plus petit et plus près du bord, il recouvrait le coin bas droit du chat */
@media (max-width: 600px) { .ds-totop { right: .5rem; bottom: .75rem; width: 2.25rem; height: 2.25rem; } .ds-totop::before { width: .9rem; height: .9rem; } }

/* Tableau détaillé replié (bloc Détails) */
.ds-more { margin-top: 1rem; }
/* Même présentation que la FAQ (« + » à droite, qui tourne en « × ») ; texte en couleur de lien */
.ds-more > summary { color: var(--wp--preset--color--rose-text); }
.ds-more[open] > summary { margin-bottom: 1rem; }
.ds-yn { display: inline-block; font-weight: 500; white-space: nowrap; }
.ds-yn::before { display: inline-block; width: 1em; margin-right: .25em; text-align: center; }
.ds-yn--y::before { content: "✓"; color: #1a7f37; }
.ds-yn--p::before { content: "◐"; color: #9a6700; }
.ds-yn--n::before { content: "✕"; color: #b42318; }
.ds-yn--u, .ds-yn--s { font-weight: 400; color: var(--wp--preset--color--muted); }
.ds-yn--u::before, .ds-yn--s::before { content: "–"; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ds-plan .ds-badge + h3 { margin-top: 0; }

/* ---------- FAQ : « + » à droite, filets de la charte ---------- */
.wp-block-details:first-of-type { border-top: 1px solid var(--wp--preset--color--line); }
/* Question en texte normal (pas en flex : le nom DigiSeer dessiné comme le logo, un <span>, devenait un élément à
   part, séparé du reste de la phrase par l'écart du flex) ; le « + » reste à droite, sur la première ligne */
.wp-block-details summary { list-style: none; display: block; position: relative; padding-right: 2.5rem; cursor: pointer; font-weight: 500; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; position: absolute; right: 0; top: .1em; font-size: 1.5em; font-weight: 400; line-height: .8; transition: transform calc(2 * var(--ds-u)) ease; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details summary:hover { color: var(--wp--preset--color--rose-text); }
.wp-block-details summary:focus-visible { outline: 3px solid var(--wp--preset--color--rose-text); outline-offset: 2px; }
.wp-block-details > p { margin-top: .6rem; color: #2b2b2a; }

/* ---------- Appel final : fond encre, boucle de recherche ---------- */
.ds-cta { position: relative; overflow: hidden; }
.ds-cta__loop { position: absolute; right: var(--wp--preset--spacing--50); top: 50%; translate: 0 -50%; margin: 0 !important; font-size: clamp(140px, 15vw, 210px); color: var(--wp--preset--color--card); }
.ds-cta .ds-btn.is-light { background: transparent; border-color: #fff; }
.ds-cta .ds-btn.is-light:hover { background: #fff; color: var(--wp--preset--color--ink) !important; }
/* Le titre fait 760 px : la boucle n'a de place qu'au-delà de 1180 px. */
@media (max-width: 1180px) { .ds-cta__loop { display: none; } }
/* Titre du bandeau plus large que le texte (760 px) : « La recherche WordPress ne trouve rien ? » sur une ligne,
   jusqu'au logo décoratif (même taille que .ds-cta__loop), toute la largeur quand le logo est masqué */
.ds-cta > .wp-block-heading { max-width: calc(100% - clamp(140px, 15vw, 210px) - 2rem) !important; }
@media (max-width: 1180px) { .ds-cta > .wp-block-heading { max-width: 100% !important; } }

/* ---------- Brouillons ---------- */
.ds-draft-note { background: var(--wp--preset--color--rose-tint); border-left: 3px solid var(--wp--preset--color--rose); padding: .75rem 1rem; font-size: .9rem; }

/* ---------- Pied de page ---------- */
.ds-footer { border-top: 1.5px solid var(--ds-rule); }
.ds-footer a { color: inherit; text-decoration: none; }
.ds-footer a:hover { color: var(--wp--preset--color--rose-text); }
/* Ligne « © 2026 DigiStella · Contact · … · Conçu pour le RGPD » : liens soulignés pour qu'on les voie */
.ds-footer p:has(> a[href*="digistella.com"]) a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Largeur du mot ≈ 3,8 em : la taille suit la largeur du pied de page (unité cqi), plafonnée à la colonne large de 1320 px (1320 / 3,9 ≈ 338 px). */
.ds-footer { container-type: inline-size; }
.ds-footer__mark { margin: var(--wp--preset--spacing--50) auto 0 !important; font-size: min(calc(100cqi / 3.9), 338px); line-height: 1.05; letter-spacing: -0.04em; text-align: center; }
.ds-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Essai : fond blanc, boutons en pastille (branche essai/fond-blanc-pilules) ---------- */
:root { --wp--preset--color--page: #FFFFFF; --ds-surface: #FAFAF9; } /* gris très clair des cartes */
/* Les cartes passent en blanc cassé pour rester visibles sur le fond blanc. */
.wp-block-group.is-style-card, .ds-plan, .ds-est, .ds-table, .ds-stage, :root :where(.wp-block-code) { background: var(--ds-surface); }
/* Boutons, bascule mensuel/annuel, badges et sélecteur de langue arrondis. */
:root :where(.wp-element-button, .wp-block-button__link), .ds-btn, .ds-header .is-menu-open .ds-nav-cta .wp-block-navigation-item__content,
.ds-badge, .ds-langs a { border-radius: 999px; }
.ds-badge { padding: 2px 9px; }
.ds-langs a { padding: .15rem .55rem; }
/* Essai, esprit Apple : filets #D2D2D7 d'un pixel, texte secondaire #6E6E73, cartes arrondies à 18 px sans contour. */
:root { --wp--preset--color--line: #D2D2D7; --wp--preset--color--muted: #6E6E73; --ds-rule: #D2D2D7; }
.ds-header, .ds-footer, .ds-section, .wp-block-group.is-style-section { border-width: 1px; border-color: #D2D2D7; }
:root :where(.wp-block-separator) { border-top-width: 1px; color: #D2D2D7; }
.wp-block-group.is-style-card, .ds-plan, .ds-est, .ds-table, .ds-stage, .ds-cta, :root :where(.wp-block-code) { border-radius: 18px; }
.ds-plan, .ds-plan.is-featured { border-color: transparent; }
.ds-plan.is-featured { background: #fff; box-shadow: 0 0 0 1px #D2D2D7, 0 10px 30px rgba(0, 0, 0, .06); }
.ds-seg, .ds-stepper { border-radius: 999px; overflow: hidden; border-width: 1px; }
.ds-seg label + label, .ds-stepper input { border-width: 1px; }


/* ============================================================
   ACCUEIL (maquette du 09/11, validée et intégrée) — classe body.ds-home posée sur l'accueil (functions.php).
   Cadres arrondis aux deux dégradés légers (rose, mauve) en alternance, cartes blanches à ombre douce, titres noirs ;
   cadre Tarifs en deux groupes nommés (ds-home-pricing, ds-home-pricing-end).
   ============================================================ */
/* — Section 1 : haut de page — */
/* Taches de couleur très douces derrière le haut de page, en symétrie : mauve en haut à gauche (le rose des mots-clés
   ressort dessus), rose en bas à droite */
body.ds-home .wp-block-post-content > .wp-block-group:first-child { position: relative; isolation: isolate; }
body.ds-home .wp-block-post-content > .wp-block-group:first-child::before {
	/* Déborde sous le haut de page (-10rem) : la tache rose s'efface d'elle-même au lieu d'être coupée net */
	/* (pas de débordement à gauche et à droite : il créait un défilement horizontal, 09/11) */
	/* Fond arrêté avant le bandeau suivant (il descendait de 10 rem dessous), effacé progressivement vers le bas */
	content: ""; position: absolute; z-index: -1; inset: -2rem -10vw 0 -10vw; pointer-events: none; /* déborde sur les côtés : bords diffus */
	-webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
	background:
		radial-gradient(38rem 22rem at 8% 14%, color-mix(in srgb, #7c5cff 12%, transparent), transparent 70%),
		/* rose en bas, sous les points (09/11 : il était en bas à droite, sous le chat, et se voyait autour du chat avec
		   le fond « Transparent ») */
		radial-gradient(36rem 18rem at 38% 100%, color-mix(in srgb, #d6337a 14%, transparent), transparent 70%);
}
/* Plus d'air sous le haut de page, avant le bandeau noir */
body.ds-home .wp-block-post-content > .wp-block-group:first-child { padding-bottom: var(--wp--preset--spacing--60) !important;
}
/* Surtitre : texte simple, gris, petites capitales espacées (la pastille rose était trop lourde, 09/11) */
body.ds-home .wp-block-post-content > .wp-block-group:first-child > .ds-eyebrow {
	font-weight: 500; letter-spacing: .12em; color: var(--wp--preset--color--muted);
}/* « Essayez DigiSeer. » au-dessus du chat : petite étiquette « en direct » (point qui pulse) au lieu d'une phrase
   isolée ; sur téléphone, séparée du bouton Installer */
body.ds-home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child > p:first-child {
	/* texte normal (pas de flex : « DigiSeer » et le point final se retrouvaient espacés) ; centré au-dessus du chat, sur
	   la même ligne que le bouton plein écran de l'extension (34 px de haut, à droite) : même hauteur de ligne, puis marge
	   basse négative pour que le bouton remonte à sa hauteur (09/11) */
	margin: 0 0 -34px !important; line-height: 34px; text-align: center; font-size: var(--wp--preset--font-size--small); font-weight: 500; color: var(--wp--preset--color--muted);
}
body.ds-home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child > p:first-child::before {
	content: ""; display: inline-block; vertical-align: .08em; margin-right: .55rem;
	width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp--preset--color--rose-text);
	box-shadow: 0 0 0 0 color-mix(in srgb, #d6337a 45%, transparent); animation: ds-live 2s ease-out infinite;
}
@keyframes ds-live { 70% { box-shadow: 0 0 0 .45rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 781px) {
	body.ds-home .wp-block-post-content > .wp-block-group:first-child .wp-block-column:last-child { margin-top: var(--wp--preset--spacing--50); }
}
/* Points en « mots forts » (09/11, piste A) : six blocs sur deux colonnes, sans puces ; mots-clés en noir et en gras
   (lien : petite icône « + »), précision en gris dessous ; apparition l'un après l'autre en fondu léger */
.ds-hero-facts { list-style: none; margin: var(--wp--preset--spacing--40, 1.5rem) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2.5rem; }
.ds-hero-facts li { margin: 0; display: flex; flex-direction: column; gap: .2rem;
	animation: ds-fact-in .5s ease-out both; }
.ds-hero-facts li:nth-child(2) { animation-delay: .08s; } .ds-hero-facts li:nth-child(3) { animation-delay: .16s; }
.ds-hero-facts li:nth-child(4) { animation-delay: .24s; } .ds-hero-facts li:nth-child(5) { animation-delay: .32s; }
.ds-hero-facts li:nth-child(6) { animation-delay: .4s; }
/* Mini-titres plus grands (09/11) ; liens sans soulignement : petite icône « + » fine et grise après le mot-clé (au
   lieu d'une flèche), rose au survol et qui pivote d'un quart de tour */
.ds-hero-facts strong { font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--ink); }
.ds-hero-facts strong a { color: inherit; text-decoration: none; }
.ds-hero-facts strong a::after {
	content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .4em; vertical-align: .12em;
	background: var(--wp--preset--color--muted); transition: transform .25s ease, background-color .2s ease;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1.5v9M1.5 6h9'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 1.5v9M1.5 6h9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ds-hero-facts strong a:hover::after, .ds-hero-facts strong a:focus-visible::after { background-color: var(--wp--preset--color--rose-text); transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .ds-hero-facts strong a::after { transition: none; } }
.ds-hero-facts span { font-size: 1rem; line-height: 1.45; color: var(--wp--preset--color--muted); }
@keyframes ds-fact-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-hero-facts li { animation: none; } }
@media (max-width: 520px) { .ds-hero-facts { grid-template-columns: 1fr; gap: 1rem; } }
/* Même présentation sur trois colonnes dans une section (Fonctionnalités, « Pour vos visiteurs », 09/11) ; deux
   colonnes sur tablette, une sur téléphone ; pas d'apparition en fondu (section sous la ligne de flottaison) */
.ds-hero-facts.ds-facts-3 { margin: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.ds-hero-facts.ds-facts-3 li { animation: none; }
/* Deux colonnes dans une section (À propos, valeurs, 09/11) : sans apparition en fondu */
.ds-hero-facts.ds-facts-2 { margin-top: 1.5rem; gap: 1.8rem 2.5rem; }
.ds-hero-facts.ds-facts-2 li { animation: none; }
@media (max-width: 900px) { .ds-hero-facts.ds-facts-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ds-hero-facts.ds-facts-3 { grid-template-columns: 1fr; gap: 1.2rem; } }
/* Documentation (chat « Posez votre question » à droite) : halo rose du haut de page en bas, côté texte, au lieu de
   passer à droite du chat (09/11) ; les autres pages gardent leur halo */
body.ds-v2:has(.ds-docs-ask) main::before {
	background:
		radial-gradient(38rem 22rem at 8% 12%, color-mix(in srgb, #7c5cff 12%, transparent), transparent 70%),
		radial-gradient(36rem 18rem at 22% 80%, color-mix(in srgb, #d6337a 12%, transparent), transparent 70%);
}
/* Essai du chat : léger dégradé rose sous le bas du chat seulement (09/11 ; avant : halo mauve et rose tout autour),
   dans le rose du chat (couleur principale par défaut, #f0087a) ; ombre décalée vers le bas, étalement négatif : rien
   sur les côtés ni en haut */
/* 10/11 : ombre commune à tous les chats du site (variable --ds-chat-glow, classe .ds-chat-glow à poser sur le bloc
   qui contient un chat), plus légère (avant : 0 34px 28px -28px, rose à 55 %) */
:root { --ds-chat-glow: 0 26px 24px -24px color-mix(in srgb, #f0087a 20%, transparent); }
.ds-chat-glow .digiser-iframe,
body.ds-home .wp-block-post-content > .wp-block-group:first-child .digiser-iframe,
.ds-docs-ask .digiser-iframe { /* même dégradé sous le chat de la documentation (« Posez votre question ») */
	/* (flou au plus égal au retrait : rien ne déborde sur les côtés) */
	border-radius: 18px; box-shadow: var(--ds-chat-glow);
}
/* — Section 2 : bandeau principal « La recherche WordPress ne trouve rien ? » (09/11) — fond blanc et les deux
   dégradés légers du haut de page, couleurs inversées (rose en haut à gauche, mauve en bas à droite), au lieu du fond noir ; texte, logo
   décoratif et contour en couleur de texte, bouton rose inchangé */
body.ds-home .ds-band .ds-cta {
	background:
		radial-gradient(34rem 18rem at 6% 10%, color-mix(in srgb, #d6337a 14%, transparent), transparent 70%),
		radial-gradient(34rem 18rem at 94% 92%, color-mix(in srgb, #7c5cff 14%, transparent), transparent 70%),
		#fff !important;
	color: var(--wp--preset--color--ink) !important;
	border: 1px solid color-mix(in srgb, #7c5cff 14%, var(--wp--preset--color--line, #e5e5ea));
}
body.ds-home .ds-band .ds-cta h2, body.ds-home .ds-band .ds-cta .ds-cta__loop { color: var(--wp--preset--color--ink) !important; }
body.ds-home .ds-band .ds-cta .ds-cta__loop { opacity: .9; }
/* — Section 3 : « Une réponse claire » (et tous les repères de section de l'accueil) (09/11) — repère numéroté
   « 01 · Pourquoi DigiSeer » comme le surtitre du haut de page : texte gris en petites capitales espacées, sans
   pastille (trop lourde, 09/11) ; numéro dans le même gris */
body.ds-home .ds-step-no.ds-num {
	/* inline-block, pas inline-flex : en flex, l'espace avant « DigiSeer » disparaissait (« PourquoiDigiSeer ») */
	display: inline-block; padding: 0; border: 0; background: none;
	font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
body.ds-home .ds-step-no.ds-num::before {
	content: counter(ds-section, decimal-leading-zero) "  ·  "; white-space: pre;
	min-width: 0; color: inherit; font-weight: inherit; /* numéro comme le texte : gris, même graisse */
}
/* « 01 Pourquoi DigiSeer » (09/11) : toute la section, jusqu'à « Voir toutes les fonctionnalités », sur un fond aux
   deux dégradés légers (mauve en haut à gauche, rose en bas à droite, en alternance avec le bandeau du dessus), cadre
   arrondi ; plus de filet de section au-dessus */
body.ds-home .ds-section.ds-why {
	border-radius: 24px;
	padding-left: clamp(1.2rem, 4vw, 3rem) !important; padding-right: clamp(1.2rem, 4vw, 3rem) !important;
	background:
		radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, #7c5cff 11%, transparent), transparent 70%),
		radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, #d6337a 11%, transparent), transparent 70%),
		#fff;
	/* contour fin du cadre sur les 4 côtés, à la place du filet de section */
	border: 1px solid color-mix(in srgb, #7c5cff 12%, var(--wp--preset--color--line, #e5e5ea)) !important;
}
/* Cartes « Pourquoi » et « Pour qui » de l'accueil (09/11) : blanches, ombre douce, sans fond ni contour rose (la
   couleur est portée par le fond de la section) ; pastille rose plus petite, alignée sur la 1re ligne du titre ;
   titres 1,3 rem (une ligne le plus souvent) ; texte gris foncé ; un peu plus d'espace entre les cartes */
body.ds-home .ds-why .ds-why-grid, body.ds-home .ds-who-grid { gap: 1.25rem !important; }
body.ds-home .ds-why .ds-doc-card, body.ds-home .ds-who-grid > .wp-block-group {
	background: #fff !important; border: 1px solid rgba(17, 17, 17, .05) !important;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22);
	padding: 1.5rem 1.6rem !important;
}
body.ds-home .ds-why .ds-doc-card h3, body.ds-home .ds-who-grid > .wp-block-group h3 {
	align-items: flex-start; gap: .7rem; font-size: clamp(1.2rem, 1.5vw, 1.3rem) !important; line-height: 1.3;
}
/* Plus de carré rose devant les titres des cartes (trop lourd, 09/11) */
body.ds-home .ds-why .ds-doc-card h3::before, body.ds-home .ds-who-grid > .wp-block-group h3::before { content: none; }
body.ds-home .ds-why .ds-doc-card p, body.ds-home .ds-who-grid > .wp-block-group p { color: #3d3d45; }
/* Même carte blanche à ombre douce pour les autres blocs de l'accueil (09/11) : étapes de « Rien à changer », articles
   du blog, questions fréquentes ; plus de filets de séparation entre eux */
body.ds-home .ds-steps { display: grid; gap: 1rem; }
body.ds-home .ds-steps li, body.ds-home .ds-home-blog .ds-card, body.ds-home .wp-block-details {
	background: #fff; border: 1px solid rgba(17, 17, 17, .05) !important; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22);
}
body.ds-home .ds-steps li { padding: 1.4rem 1.6rem 1.4rem clamp(4.6rem, 8vw, 7rem); }
body.ds-home .ds-steps li::before { left: 1.4rem; top: 1.15rem; font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--wp--preset--color--rose-text); }
body.ds-home .ds-home-blog .ds-card { padding: .9rem .9rem 1.3rem; }
body.ds-home .ds-home-blog .ds-card > :not(.wp-block-post-featured-image) { padding-left: .5rem !important; padding-right: .5rem !important; }
body.ds-home .ds-home-blog .ds-card .wp-block-post-featured-image img { border: none; border-radius: 12px; }
body.ds-home .wp-block-details { padding: 1.1rem 1.4rem; margin: 0 0 .8rem !important; }
body.ds-home .wp-block-details summary::after { color: var(--wp--preset--color--rose-text); }
/* Sections suivantes sur le même fond aux deux dégradés, couleurs alternées (09/11) : rose → mauve (Pour qui, Tarifs,
   Questions fréquentes), mauve → rose (Rien à changer, Blog). Bandeaux qui ont déjà leur fond (RGPD sombre, Pour les
   développeurs, bandeau final) : inchangés. Tarifs : titre (section) et tableau (groupe suivant) dans un seul cadre */
body.ds-home .wp-block-post-content > .ds-comp-inner,
body.ds-home .wp-block-post-content > .ds-section:has(.ds-steps),
body.ds-home .wp-block-post-content > .ds-home-pricing,
body.ds-home .wp-block-post-content > .ds-home-pricing-end,
body.ds-home .wp-block-post-content > .ds-home-blog,
body.ds-home .wp-block-post-content > .ds-section:has(.wp-block-details) {
	--ds-tl: #d6337a; --ds-br: #7c5cff;
	border: 1px solid color-mix(in srgb, var(--ds-tl) 12%, var(--wp--preset--color--line, #e5e5ea)) !important;
	border-radius: 24px;
	padding-left: clamp(1.2rem, 4vw, 3rem) !important; padding-right: clamp(1.2rem, 4vw, 3rem) !important;
	background:
		radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, var(--ds-tl) 11%, transparent), transparent 70%),
		radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, var(--ds-br) 11%, transparent), transparent 70%),
		#fff;
}
/* mauve → rose */
body.ds-home .wp-block-post-content > .ds-section:has(.ds-steps),
body.ds-home .wp-block-post-content > .ds-home-blog { --ds-tl: #7c5cff; --ds-br: #d6337a; }
/* Tarifs : le titre (haut du cadre) et le tableau (bas du cadre) se touchent */
body.ds-home .wp-block-post-content > .ds-home-pricing {
	border-bottom: none !important; border-radius: 24px 24px 0 0; padding-bottom: 0 !important;
	background: radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, var(--ds-tl) 11%, transparent), transparent 70%), #fff;
}
body.ds-home .wp-block-post-content > .ds-home-pricing-end {
	border-top: none !important; border-radius: 0 0 24px 24px; margin-top: 0 !important;
	background: radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, var(--ds-br) 11%, transparent), transparent 70%), #fff;
}
/* Correctifs du cadre Tarifs (09/11) : repère « 05 Tarifs » à la largeur de son texte (premier élément d'une grille,
   il s'étirait) ; « Offre de lancement » flottant tenu dans le cadre (il en sortait et recouvrait le texte suivant ;
   remis dans le cours de la grille, il laissait un grand vide sous le titre) */
body.ds-home .ds-step-no.ds-num { justify-self: start; width: fit-content; }
@media (min-width: 900px) {
	/* Encadré flottant comme à l'origine (pas de vide sous le titre), tenu dans le cadre : même marge à droite que le
	   contenu ; l'introduction (groupe suivant) s'arrête avant lui */
	body.ds-home .ds-section:has(> .ds-launch) > .ds-launch {
		left: auto; right: clamp(1.2rem, 4vw, 3rem); width: min(400px, 30vw); box-sizing: border-box; background: #fff; }
	body.ds-home .wp-block-post-content > .ds-home-pricing-end > * {
		max-width: min(62ch, calc(100% - min(400px, 30vw) - 3rem)) !important; }
}
/* Cadre Tarifs (09/11) : plus d'air sous le titre et entre les lignes de l'introduction (un seul paragraphe coupé par
   des retours à la ligne) ; encadré « Offre de lancement » moins serré */
body.ds-home .wp-block-post-content > .ds-home-pricing-end > .ds-lead { margin-top: 1.5rem; line-height: 1.75; }
body.ds-home .ds-launch { padding: 1.4rem 1.5rem; }
body.ds-home .ds-launch .ds-launch-title + p { margin-top: .6rem; line-height: 1.65; }
body.ds-home .ds-launch p + p:not(.ds-launch-title + p) { margin-top: .8rem; line-height: 1.55; }
/* « Rien à changer » (09/11) : étapes 1 à 4 sur deux colonnes en haut, capture « Premiers pas » en dessous, pleine
   largeur (avant : capture à gauche, étapes à droite) ; téléphone : étapes l'une sous l'autre, capture dessous */
body.ds-home .ds-section:has(.ds-steps) > .wp-block-columns { flex-direction: column-reverse !important; gap: 1.5rem; }
body.ds-home .ds-section:has(.ds-steps) > .wp-block-columns > .wp-block-column { flex-basis: auto !important; width: 100%; }
@media (min-width: 782px) { body.ds-home .ds-steps { grid-template-columns: repeat(2, 1fr); } }
body.ds-home .ds-section:has(.ds-steps) .ds-home-shot img { border-radius: 16px; }
/* « Pour les développeurs et les agences » (09/11) : même largeur et mêmes coins que les autres cadres, fond aux deux
   dégradés un peu plus soutenus (rose en haut à gauche, mauve en bas à droite), bouton noir inchangé */
body.ds-home .ds-tech-band { padding-top: 0 !important; padding-bottom: 0 !important; }
body.ds-home .ds-tech-band__card {
	max-width: none; border-radius: 24px; border: 1px solid color-mix(in srgb, #d6337a 14%, var(--wp--preset--color--line, #e5e5ea)) !important;
	padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 4vw, 3rem) !important;
	background:
		radial-gradient(40rem 20rem at 6% 0%, color-mix(in srgb, #d6337a 20%, transparent), transparent 70%),
		radial-gradient(40rem 20rem at 96% 100%, color-mix(in srgb, #7c5cff 18%, transparent), transparent 70%),
		#fff !important;
}
/* Deux blocs côte à côte : « Pour les développeurs et les agences » et « Découvrir la documentation » (09/11) ;
   dans chaque bloc, texte puis bouton (colonnes trop étroites pour les mettre côte à côte) ; même hauteur */
@media (min-width: 900px) {
	body.ds-home .ds-tech-band { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	body.ds-home .ds-tech-band > .ds-tech-band__card { margin: 0 !important; height: 100%; box-sizing: border-box; }
}
body.ds-home .ds-tech-band__cols { display: grid !important; grid-template-columns: 1fr !important; row-gap: 1.2rem; }
body.ds-home .ds-tech-band__cols > .wp-block-column { flex: none !important; width: auto !important; margin: 0 !important; }
body.ds-home .ds-tech-band__title { white-space: normal !important; font-size: clamp(1.4rem, 2vw, 1.75rem) !important; }
body.ds-home .ds-tech-band__buttons { justify-content: flex-end !important; } /* bouton à droite de la carte */
@media (max-width: 899px) { /* téléphone : l'un sous l'autre (grille à une colonne) */
	body.ds-home .ds-tech-band { display: grid !important; grid-template-columns: 1fr; gap: 1.5rem; }
	body.ds-home .ds-tech-band > .ds-tech-band__card { margin: 0 !important; }
}
/* Documentation : dégradés inversés (mauve en haut à gauche, rose en bas à droite) */
body.ds-home .ds-tech-band__card--docs {
	border-color: color-mix(in srgb, #7c5cff 14%, var(--wp--preset--color--line, #e5e5ea)) !important;
	background:
		radial-gradient(40rem 20rem at 6% 0%, color-mix(in srgb, #7c5cff 18%, transparent), transparent 70%),
		radial-gradient(40rem 20rem at 96% 100%, color-mix(in srgb, #d6337a 20%, transparent), transparent 70%),
		#fff !important;
}
/* Sections en colonne : un seul écart entre elles (gap, plus bas) */
body.ds-home .wp-block-post-content { display: flex; flex-direction: column; }
/* Toutes les sections sur toute la largeur permise (dans une colonne flex, elles prenaient la largeur de leur contenu :
   bords gauche et droit décalés), bords alignés sur ceux des cadres ; plus d'air entre les cadres (2,5 rem) */
body.ds-home .wp-block-post-content > * { width: 100%; box-sizing: border-box; }
@media (min-width: 900px) { body.ds-home .ds-tech-band { gap: 2.5rem; } }
/* Bas du cadre Tarifs (introduction, bouton : groupe sans largeur « large ») aligné sur le haut du cadre */
body.ds-home .wp-block-post-content > .ds-home-pricing-end {
	max-width: var(--wp--style--global--wide-size) !important; margin-left: auto !important; margin-right: auto !important; }
/* Espacements (09/11) : un seul écart entre toutes les sections de l'accueil (cadres, bandeaux, témoignages), réglé
   ici et proportionné à l'écran (≈ 1,5 rem sur téléphone → 3,5 rem sur grand écran) ; plus de marges propres aux
   sections (elles s'additionnaient ou manquaient). Les deux moitiés du cadre Tarifs restent collées */
body.ds-home .wp-block-post-content { --ds-gap: clamp(2rem, 5.5vw, 5.5rem); gap: var(--ds-gap); } /* (3,5 rem au plus avant, 09/11) */
/* Bandeau noir RGPD (après le cadre Tarifs) : plus d'air au-dessus (09/11) */
body.ds-home .wp-block-post-content > .alignfull.has-ink-background-color { margin-top: clamp(2rem, 6vw, 6rem) !important; }
body.ds-home .wp-block-post-content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
body.ds-home .wp-block-post-content > .ds-home-pricing { margin-bottom: calc(-1 * var(--ds-gap)) !important; }
/* Téléphone : cadres moins arrondis, marges intérieures réduites */
@media (max-width: 781px) {
	body.ds-home .wp-block-post-content > .ds-comp-inner,
	body.ds-home .wp-block-post-content > .ds-section:has(.ds-steps),
	body.ds-home .wp-block-post-content > .ds-home-blog,
	body.ds-home .wp-block-post-content > .ds-section:has(.wp-block-details),
	body.ds-home .wp-block-post-content > .ds-section.ds-why { border-radius: 18px; padding-left: 1rem !important; padding-right: 1rem !important; }
	body.ds-home .wp-block-post-content > .ds-home-pricing { border-radius: 18px 18px 0 0; padding-left: 1rem !important; padding-right: 1rem !important; }
	body.ds-home .wp-block-post-content > .ds-home-pricing-end { border-radius: 0 0 18px 18px; padding-left: 1rem !important; padding-right: 1rem !important; }
	body.ds-home .ds-tech-band { gap: 1.5rem; }
	body.ds-home .ds-tech-band__card { border-radius: 18px; padding: 1.4rem 1.2rem !important; }
}
/* Correctifs après capture complète (09/11) : bandeau RGPD pleine largeur (alignfull : largeur automatique, sinon il
   gardait la largeur du contenu et laissait une bande blanche à droite) ; pas de filet au-dessus du bandeau final */
body.ds-home .wp-block-post-content > .alignfull { width: auto; }
body.ds-home .wp-block-post-content > .ds-section:last-child { border-top: none !important; }
/* Une section de contenu sur deux avec contour (09/11) : Pourquoi, Tarifs, Blog ; Pour qui, Rien à changer, Questions
   fréquentes : même fond dégradé, sans contour ; les bandeaux gardent leur propre fond */
body.ds-home .wp-block-post-content > .ds-comp-inner,
body.ds-home .wp-block-post-content > .ds-section:has(.ds-steps),
body.ds-home .wp-block-post-content > .ds-section:has(.wp-block-details) {
	border-color: transparent !important; /* dégradé gardé, sans contour (09/11) */
}
/* Couleurs alternées dans l'ordre d'affichage : Pourquoi mauve, Pour qui rose, Tarifs mauve, Rien à changer rose,
   Blog mauve, Questions rose (couleur en haut à gauche) */
body.ds-home .wp-block-post-content > .ds-home-pricing,
body.ds-home .wp-block-post-content > .ds-home-pricing-end { --ds-tl: #7c5cff; --ds-br: #d6337a; }
body.ds-home .wp-block-post-content > .ds-section:has(.ds-steps) { --ds-tl: #d6337a; --ds-br: #7c5cff; }
/* Le dégradé du haut de page déborde sur les côtés (bords diffus, pas de coupure au bord du texte) ; ce qui dépasse de
   l'écran est coupé sans créer de défilement horizontal (overflow-x: clip, qui ne gêne pas l'en-tête collant) */
html:has(body.ds-home), body.ds-home { overflow-x: clip; }
/* « Rien à changer » (09/11) : capture « Premiers pas » retirée (elle répétait les 4 étapes) ; numéro plus proche du
   texte (avant : jusqu'à 7 rem de marge) */
body.ds-home .ds-section:has(.ds-steps) .wp-block-column:has(> .ds-home-shot) { display: none !important; }
body.ds-home .ds-steps li { padding-left: 4.4rem !important; }
body.ds-home .ds-steps li::before { left: 1.4rem; width: 2.2rem; text-align: center; font-size: 2.6rem !important; top: 1.25rem; }
/* Pied de page (09/11) : petit dégradé, comme le haut de page — mauve en haut à gauche, rose en bas à droite, sur toute
   la largeur ; pas de filet au-dessus (le fond suffit à le séparer). Sur tout le site (d'abord l'accueil seulement) */
body .ds-footer {
	border-top: none !important;
	background:
		radial-gradient(48rem 24rem at 4% 0%, color-mix(in srgb, #7c5cff 10%, transparent), transparent 70%),
		radial-gradient(48rem 26rem at 96% 100%, color-mix(in srgb, #d6337a 12%, transparent), transparent 70%),
		#fff;
}
/* Titres (09/11) : noirs. Grand titre : 2e ligne (« Votre site leur répond. », span.ds-accent) en rose plein
   (traits dégradés au-dessus des titres de section essayés puis retirés) */
body.ds-home .ds-accent { color: inherit; } /* (rose essayé, retiré le 09/11 : titre tout en noir) */

/* ============================================================
   PAGES DE CONTENU AU STYLE DE L'ACCUEIL (09/11) — classe body.ds-v2, posée page par page (functions.php, liste $v2).
   Halo léger derrière le haut de page, repères de section en texte gris, cadres arrondis aux deux dégradés en
   alternance (contour une fois sur deux), plus de filets entre les sections.
   ============================================================ */
/* Halo : mauve en haut à gauche, rose plus bas à droite, effacé vers le bas ; ce qui dépasse de l'écran est coupé */
html:has(body.ds-v2), body.ds-v2 { overflow-x: clip; }
body.ds-v2 main { position: relative; isolation: isolate; }
body.ds-v2 main::before {
	/* remonte jusqu'au menu (09/11 : la marge au-dessus du contenu laissait une bande blanche sous l'en-tête ; l'en-tête,
	   collant et au-dessus, cache ce qui dépasse) */
	content: ""; position: absolute; z-index: -1; inset: -6rem -10vw auto -10vw; height: 48rem; pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	background:
		radial-gradient(38rem 22rem at 8% 12%, color-mix(in srgb, #7c5cff 12%, transparent), transparent 70%),
		radial-gradient(36rem 18rem at 92% 70%, color-mix(in srgb, #d6337a 12%, transparent), transparent 70%);
}
/* Repères « 01 · TABLEAU DE BORD » : texte gris en petites capitales espacées, numéro dans le même gris */
body.ds-v2 .ds-step-no.ds-num {
	display: inline-block; padding: 0; border: 0; background: none;
	font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
body.ds-v2 .ds-step-no.ds-num::before { content: counter(ds-section, decimal-leading-zero) "  ·  "; white-space: pre; min-width: 0; color: inherit; font-weight: inherit; }
/* Sommaire collant : fond blanc légèrement transparent et flouté (le fond blanc plein faisait un rectangle sur le
   halo du haut de page) */
/* (09/11) Fond seulement quand le sommaire est collé sous l'en-tête (classe is-past, page-nav.js) ; transparent à sa
   place dans la page, sur le halo */
body.ds-v2 .ds-toc { background: transparent; transition: background-color .2s ease; }
body.ds-v2 .ds-toc.is-past { background: color-mix(in srgb, #fff 90%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* Téléphone (09/11) : sommaire sur une seule ligne qui défile au doigt (il passait sur deux lignes), collé sous
   l'en-tête comme sur ordinateur (fond blanc légèrement transparent et flouté), fondu sur le bord droit pour montrer
   qu'il continue */
@media (max-width: 781px) {
	body.ds-v2 .ds-toc { position: sticky; top: var(--ds-header-h, 4rem); }
	body.ds-v2 .ds-toc p {
		white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 2rem;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent);
	}
	body.ds-v2 .ds-toc p::-webkit-scrollbar { display: none; }
}
/* Plus de filets entre les sections (les cadres et l'espace séparent) */
body.ds-v2 .wp-block-post-content > .ds-section { border-top: none !important; }
/* Cadres : sections détaillées (Fonctionnalités : .ds-tour) ; mauve en haut à gauche avec contour, puis rose sans
   contour (sections « --flip »), comme l'alternance de l'accueil */
body.ds-v2 .wp-block-post-content > .ds-tour {
	--ds-tl: #7c5cff; --ds-br: #d6337a;
	border: 1px solid color-mix(in srgb, var(--ds-tl) 12%, var(--wp--preset--color--line, #e5e5ea)) !important; border-radius: 24px;
	padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) !important;
	margin-top: clamp(1.5rem, 3.5vw, 3rem) !important;
	background:
		radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, var(--ds-tl) 11%, transparent), transparent 70%),
		radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, var(--ds-br) 11%, transparent), transparent 70%),
		#fff;
}
body.ds-v2 .wp-block-post-content > .ds-tour--flip { --ds-tl: #d6337a; --ds-br: #7c5cff; border-color: transparent !important; }
/* Titres de partie (« Pour vos visiteurs ») : plus de gros trait noir, de l'air au-dessus à la place */
body.ds-v2 .wp-block-post-content > .ds-section.ds-part { padding-top: clamp(3rem, 6vw, 5.5rem) !important; }
body.ds-v2 .wp-block-post-content > .ds-toc-note + .ds-section.ds-part { padding-top: var(--wp--preset--spacing--50) !important; }
/* Tableau de bord (09/11, section ds-tour--stack) : introduction et capture côte à côte en haut (alignées par le
   haut), liste des points en dessous sur toute la largeur, en deux colonnes (avant : capture à côté d'une longue
   liste, grand vide dessous). Grille posée sur les colonnes WordPress ; la colonne de texte s'efface (display:
   contents) pour que ses éléments se placent dans la grille. Les autres sections gardent leurs deux colonnes */
@media (min-width: 782px) {
	body.ds-v2 .ds-tour--stack > .wp-block-columns {
		display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: 2.2rem; align-items: start !important;
	}
	body.ds-v2 .ds-tour--stack .wp-block-column:has(> .ds-rules) { display: contents; }
	body.ds-v2 .ds-tour--stack .wp-block-column:has(> .ds-rules) > * { grid-column: 1 / -1; margin: 0 !important; }
	body.ds-v2 .ds-tour--stack .wp-block-column:has(> .ds-rules) > p:first-child { grid-column: 1; grid-row: 1; align-self: start; } /* haut du texte aligné sur le haut de la capture */
	body.ds-v2 .ds-tour--stack .wp-block-column:has(> .ds-shot) { grid-column: 2; grid-row: 1; margin: 0 !important; }
	body.ds-v2 .ds-tour--stack .ds-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
	body.ds-v2 .ds-tour--stack .ds-rules li:nth-child(2) { border-top: 1px solid var(--wp--preset--color--line); }
}
@media (max-width: 781px) {
	body.ds-v2 .wp-block-post-content > .ds-tour { border-radius: 18px; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Colonne « Sur cette page » sur une page aux cadres larges (09/11, validée sur Fonctionnalités ; classe body.ds-v2-side ;
   assets/js/page-nav.js). Grand écran : sommaire horizontal masqué, cadres arrêtés avant la colonne (230 px + 3 rem),
   bord gauche inchangé ; écrans détaillés en retrait sous leur partie */
@media (min-width: 1200px) {
	body.ds-v2-side .wp-block-post-content > .ds-toc { display: none; }
	body.ds-v2-side .wp-block-post-content > :not(.alignfull) {
		max-width: min(calc(var(--wp--style--global--wide-size) - 230px - 3rem), calc(100% - 230px - 3rem)) !important;
		margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important; margin-right: auto !important;
	}
	body.ds-v2-side .wp-block-post-content > .ds-section[id] { scroll-margin-top: calc(var(--ds-header-h, 4rem) + 1.5rem); }
	body.ds-v2-side .ds-toc-side__title { display: none; } /* pas de titre affiché (nom gardé pour les lecteurs d'écran) */
	body.ds-v2-side .ds-toc-side li { margin-top: .35rem; }
	body.ds-v2-side .ds-toc-side li.is-sub { margin-top: 0; }
	body.ds-v2-side .ds-toc-side li.is-sub a { padding-left: 1.9rem; padding-block: .22rem; font-size: .92rem; font-weight: 400; color: var(--wp--preset--color--muted); }
	body.ds-v2-side .ds-toc-side li.is-sub a[aria-current] { color: var(--wp--preset--color--rose-text); font-weight: 500; }
}

/* Pages ds-v2 sans sections détaillées (La recherche WordPress ne trouve rien ?, Tarifs, 09/11) : sections en cadres
   (sauf le bandeau final : .ds-cta, ou dernière section finie par des boutons), en alternance comme l'accueil (mauve avec contour, puis rose sans contour) ; cartes « Pourquoi » blanches à
   ombre douce, sans pastille ni fond rose */
body.ds-v2 .wp-block-post-content > .ds-section:not(.ds-tour, .ds-part, :has(> .ds-cta), :last-child:has(> .wp-block-buttons:last-child)) {
	--ds-tl: #7c5cff; --ds-br: #d6337a;
	border: 1px solid color-mix(in srgb, var(--ds-tl) 12%, var(--wp--preset--color--line, #e5e5ea)) !important; border-radius: 24px;
	padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) !important;
	margin-top: clamp(2rem, 5vw, 4.5rem) !important;
	background:
		radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, var(--ds-tl) 11%, transparent), transparent 70%),
		radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, var(--ds-br) 11%, transparent), transparent 70%),
		#fff;
}
body.ds-v2 .wp-block-post-content > .ds-section:not(.ds-tour, .ds-part, :has(> .ds-cta), :last-child:has(> .wp-block-buttons:last-child)):nth-child(odd) {
	--ds-tl: #d6337a; --ds-br: #7c5cff; border-color: transparent !important;
}
body.ds-v2 .ds-why-grid { gap: 1.25rem !important; }
body.ds-v2 .ds-why-grid .ds-doc-card {
	background: #fff !important; border: 1px solid rgba(17, 17, 17, .05) !important; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22); padding: 1.5rem 1.6rem !important;
}
body.ds-v2 .ds-why-grid .ds-doc-card h3 { align-items: flex-start; font-size: clamp(1.2rem, 1.5vw, 1.3rem) !important; line-height: 1.3; }
body.ds-v2 .ds-why-grid .ds-doc-card h3::before { content: none; }
body.ds-v2 .ds-why-grid .ds-doc-card p { color: #3d3d45; }
@media (max-width: 781px) {
	body.ds-v2 .wp-block-post-content > .ds-section:not(.ds-tour, .ds-part, :has(> .ds-cta), :last-child:has(> .wp-block-buttons:last-child)) { border-radius: 18px; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Tarifs et questions (09/11) : cartes des formules et questions dépliables en blanc à ombre douce, comme l'accueil
   (la formule mise en avant garde son contour noir) */
body.ds-v2 .ds-plan, body.ds-v2 .wp-block-post-content .wp-block-group.is-style-card, body.ds-v2 .wp-block-details {
	background: #fff !important; border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22);
}
body.ds-v2 .ds-plan:not(.is-featured), body.ds-v2 .wp-block-post-content .wp-block-group.is-style-card, body.ds-v2 .wp-block-details { border: 1px solid rgba(17, 17, 17, .05) !important; }
body.ds-v2 .wp-block-details { padding: 1.1rem 1.4rem; margin: 0 0 .8rem !important; }
body.ds-v2 .wp-block-details summary::after { color: var(--wp--preset--color--rose-text); }
/* Tableaux (Sécurité, 09/11) : carte blanche à ombre douce, comme les cartes de l'accueil */
body.ds-v2 .wp-block-post-content .ds-table { background: #fff; border-color: rgba(17, 17, 17, .05); border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22); }
/* Questions fréquentes : titre de thème détaché de sa première question (09/11) */
body.ds-v2 .wp-block-post-content > h2:has(+ .wp-block-details) { margin-bottom: 1.5rem; }

/* Nouveautés (09/11) : « Comment DigiSeer évolue » en cadre aux deux dégradés (mauve, contour), comme les sections de
   l'accueil ; chaque livraison en carte blanche à ombre douce au lieu du gros trait noir au-dessus */
body.ds-v2 .wp-block-post-content > .ds-evolve {
	border: 1px solid color-mix(in srgb, #7c5cff 12%, var(--wp--preset--color--line, #e5e5ea)); border-radius: 24px;
	padding: clamp(1.6rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) !important;
	background:
		radial-gradient(40rem 22rem at 6% 6%, color-mix(in srgb, #7c5cff 11%, transparent), transparent 70%),
		radial-gradient(40rem 22rem at 94% 96%, color-mix(in srgb, #d6337a 11%, transparent), transparent 70%),
		#fff;
}
body.ds-v2 .ds-news__entry {
	border-top: none; margin-top: 1.5rem; border-radius: 24px; background: #fff;
	border: 1px solid rgba(17, 17, 17, .05);
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22);
	padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.2rem, 3vw, 2.6rem);
}
@media (max-width: 781px) {
	body.ds-v2 .wp-block-post-content > .ds-evolve, body.ds-v2 .ds-news__entry { border-radius: 18px; padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Contact (09/11) : formulaire en carte blanche à ombre douce, comme les cartes de l'accueil */
body.ds-v2 .ds-contact { background: #fff; border: 1px solid rgba(17, 17, 17, .05); border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22); padding: clamp(1.2rem, 3vw, 2rem); }
/* Petit titre en haut de la carte du formulaire (page « Découvrir l'administration », 12/11) */
.ds-contact__title { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1.3; }

/* Page « Découvrir l'administration » (12/11, body.ds-eval, functions.php) : titres des parties à la taille des
   intertitres de section (le h2 du thème, x-large, était trop grand dans les cadres) ; pas de trait au-dessus du
   premier point des listes, collé sous le titre */
body.ds-eval .wp-block-post-content > .ds-section h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; }
body.ds-eval .wp-block-post-content > .ds-section .ds-rules li:first-child { border-top: none; }
/* « En images » (12/11) : captures agrandies au clic par le mécanisme du site (.ds-shot, lightbox.js) ; sous la
   première, un petit bouton discret vers le site de démonstration */
.ds-eval-shots .wp-element-caption { margin-top: .6rem; text-align: center; }
/* Fonctionnalités, « Pour vous » (12/11) : lien vers la démonstration de l'administration, sans soulignement */
.ds-part__demo a { text-decoration: none; }
/* Même hauteur pour les deux captures sans les rogner : chaque colonne prend une largeur proportionnelle au rapport
   largeur / hauteur de son image (site 1600 × 1464, administration 1600 × 977) */
@media (min-width: 782px) {
	.ds-eval-shots .wp-block-columns { align-items: flex-start !important; }
	.ds-eval-shots .wp-block-columns > .wp-block-column:first-child { flex: 1.09 1 0 !important; }
	.ds-eval-shots .wp-block-columns > .wp-block-column:last-child { flex: 1.64 1 0 !important; }
}
.ds-eval-shots .ds-eval-demolink { justify-content: center; margin-top: .8rem; }
.ds-eval-shots .ds-eval-demolink .wp-block-button__link { padding: .45em 1.1em; font-size: .9rem; font-weight: 400; text-decoration: none; }

/* À propos (09/11) : « Ce qui nous tient à cœur » sur deux colonnes (ds-about-values) : titre et liste à gauche, logo
   DigiStella d'origine (assets/img/logo-digistella.svg) à droite, lien vers digistella.com (nouvel onglet) */
.ds-about-values { margin-top: var(--wp--preset--spacing--60, 3rem) !important; gap: clamp(1.5rem, 4vw, 3rem) !important; }
/* Plus large que la colonne de texte (09/11 : titre coupé, logo trop petit dans 720 px) : même bord gauche que le texte,
   jusqu'à 1 100 px vers la droite */
@media (min-width: 782px) {
	/* (bord gauche des pages simples : celui de la largeur « large », le texte y est aligné à gauche) */
	.wp-block-post-content.is-layout-constrained > .ds-about-values {
		--ds-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2));
		max-width: min(1100px, calc(100% - var(--ds-left))) !important; margin-left: var(--ds-left) !important; margin-right: auto !important;
	}
	.ds-about-values > .wp-block-column:first-child { flex-basis: 58% !important; }
	.ds-about-values > .wp-block-column:last-child { flex-basis: 42% !important; }
}
/* Largeur portée par le lien (avec fit-content, le logo restait à sa taille minimale) : toute la colonne, 460 px au plus */
.ds-about-brand { display: block; width: min(100%, 460px); margin-left: auto; }
.ds-about-brand img { display: block; width: 100%; height: auto; }
.ds-about-brand:hover img, .ds-about-brand:focus-visible img { opacity: .85; }
@media (max-width: 781px) { .ds-about-brand { margin: 1rem 0 0; } }

/* Encadré « En bref » (Sous-traitants, 09/11) : carte blanche à ombre douce ; grand écran : à droite du texte, à la
   place de la colonne « Sur cette page » des autres pages, à partir de 1 300 px (place pour 420 px sans toucher le texte) (en haut du contenu, bord droit de la largeur « large ») ;
   sinon sous le tableau */
.ds-aside { margin-top: var(--wp--preset--spacing--50, 2rem) !important; padding: 1.3rem 1.4rem; background: #fff; border: 1px solid rgba(17, 17, 17, .05); border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22); font-size: .95rem; line-height: 1.5; }
.ds-aside__title { margin: 0 0 .7rem; font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.ds-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ds-aside li { margin: 0; color: var(--wp--preset--color--muted); }
.ds-aside strong { color: var(--wp--preset--color--ink); font-weight: 500; }
.ds-aside__more { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--wp--preset--color--line); font-size: .85rem; color: var(--wp--preset--color--muted); }
@media (min-width: 1300px) {
	.wp-block-post-content:has(> .ds-aside) { position: relative; }
	.wp-block-post-content > .ds-aside {
		position: absolute; top: 0; width: 420px; margin: 0 !important; box-sizing: border-box; /* (270 px avant : élargi le 09/11) */
		padding: 1.6rem 1.8rem;
		right: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)); left: auto;
	}
}

/* Blog (09/11) : cartes des articles comme sur l'accueil (blanches, ombre douce, image arrondie sans contour) ; page
   d'un article : encadré de fin « Essayez DigiSeer » en carte blanche */
body.ds-v2 .ds-blog-list .ds-card, body.ds-v2 .ds-post-cta {
	background: #fff; border: 1px solid rgba(17, 17, 17, .05); border-radius: 18px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 12px 28px -18px rgba(17, 17, 17, .22);
}
body.ds-v2 .ds-blog-list .ds-card { padding: .9rem .9rem 1.3rem; }
body.ds-v2 .ds-blog-list .ds-card > :not(.wp-block-post-featured-image) { padding-left: .5rem !important; padding-right: .5rem !important; }
body.ds-v2 .ds-blog-list .ds-card .wp-block-post-featured-image img { border: none; border-radius: 12px; }

/* Documentation (09/11) : bouton « Côté technique » sous le sommaire (sous-rubriques) et sous les cartes (accueil) ;
   contour, comme les boutons secondaires */
.ds-docs__tech { margin: 1.5rem 0 0; }
.ds-docs__tech a {
	display: inline-block; padding: .55rem 1.1rem; border: 1.5px solid var(--wp--preset--color--ink); border-radius: 999px;
	color: var(--wp--preset--color--ink); font-weight: 500; text-decoration: none; transition: background-color .2s, color .2s;
}
.ds-docs__tech a:hover, .ds-docs__tech a:focus-visible { background: var(--wp--preset--color--ink); color: #fff; }
.ds-docs__cards + .ds-docs__tech { margin-top: var(--wp--preset--spacing--50, 2rem); }

/* Page « 27 langues » (10/11) : grille des langues du chat ([digiseer_langues], functions.php) */
/* Grille en pleine largeur (groupe « large » de la page) : 3 à 4 cartes par ligne, une seule sur mobile */
.ds-langs { list-style: none; margin: 1.5rem 0 !important; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ds-lang { margin: 0; padding: 1.1rem 1.2rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--card, #fff); display: flex; flex-direction: column; gap: .45rem; }
.ds-lang p { margin: 0; }
.ds-lang__name { font-size: 1.1rem; line-height: 1.3; }
.ds-lang__name span { color: var(--wp--preset--color--muted); font-size: .85rem; font-weight: 400; margin-left: .25rem; }
.ds-lang__flag + .ds-lang__flag { margin-left: -.15rem; }
.ds-lang__flag { display: inline-block; width: 24px; height: 18px; margin-right: .4rem; vertical-align: -2px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); object-fit: cover; }
.ds-lang__sample { font-size: .95rem; line-height: 1.45; color: var(--wp--preset--color--ink); }
.ds-lang__points { margin-top: auto !important; padding-top: .45rem; border-top: 1px solid var(--wp--preset--color--line); font-size: .78rem; line-height: 1.5; color: var(--wp--preset--color--muted); }

/* Page « Langues » : « Comment ça marche » en deux colonnes, encadré des shortcodes à droite (10/11) */
.ds-how { gap: 2rem; align-items: flex-start; }
.ds-sc-box { padding: 1.2rem 1.3rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--card, #fff); }
.ds-sc-box .ds-eyebrow { margin: 0 0 .6rem; }
.ds-sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ds-sc-list li { display: flex; flex-direction: column; gap: .15rem; margin: 0; }
.ds-sc-list code { align-self: flex-start; padding: .25rem .55rem; border-radius: 6px; background: #f4f4f6; font-size: .95rem; }
.ds-sc-list span { font-size: .9rem; color: var(--wp--preset--color--muted); }
.ds-sc-note { margin: .9rem 0 0 !important; font-size: .85rem; line-height: 1.5; color: var(--wp--preset--color--muted); }

/* Page « Langues » : le chat dans ses deux langues, côte à côte, chacun sous son shortcode (10/11) */
.ds-lang-demo { gap: 1.5rem; align-items: flex-start; }
.ds-lang-demo__label { margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ds-lang-demo__label code { padding: .2rem .5rem; border-radius: 6px; background: #f4f4f6; font-size: .9rem; }
/* Bouton plein écran de l'extension sur la ligne de l'étiquette, à droite (avant : une ligne vide à lui seul) */
.ds-lang-demo > .wp-block-column { position: relative; }
.ds-lang-demo__label { min-height: 2.25rem; padding-right: 3rem; }
.ds-lang-demo .dsi-btn-wrapper { position: absolute; top: 0; right: 0; margin: 0 !important; }
/* Téléphone : un seul chat (deux chats empilés repoussaient la liste des langues), celui de l'autre langue que la page
   pour surprendre : page française → chat en anglais (langue 2), page anglaise → chat en français (langue 1) */
@media (max-width: 781px) {
	.ds-lang-demo > .wp-block-column + .wp-block-column { display: none; }
	html[lang^="fr"] .ds-lang-demo > .wp-block-column:first-child { display: none; }
	html[lang^="fr"] .ds-lang-demo > .wp-block-column + .wp-block-column { display: block; }
}

/* Téléphone : grille compacte, drapeau et nom seulement (phrase et points forts masqués, toujours dans la page pour
   les moteurs de recherche) */
@media (max-width: 600px) {
	/* :has : pas le sélecteur FR / EN de l'en-tête, qui a la même classe */
	.ds-langs:has(> .ds-lang) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important; }
	.ds-lang { padding: .55rem .7rem !important; }
	.ds-lang__sample, .ds-lang__points, .ds-lang__name span { display: none !important; }
	.ds-lang__name { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Page « Langues » : phrase sur la paix sous le titre de la grille (10/11) */
.ds-lang-peace { font-size: 1.15rem; color: var(--wp--preset--color--muted); }