/* ═══════════════════════════════════════════════════════════════════════════
   WEBINAIRES — Laurent Marchand
   Palette noir & or, cohérente avec le plugin tep-2026.
   Tout est porté sous body.webi-page pour ne rien déborder sur Divi.

   ⚠️ TYPOGRAPHIE — le public de Laurent a entre 50 et 70 ans.
   On écrit GROS, partout. Planchers à tenir, et à ne jamais réduire :
     · texte courant .............. 21 px (19 px sur téléphone)
     · notes, aides, libellés ..... 16 px
     · mention de consentement .... 16 px, jamais du 12 ou 13 px
     · champs de saisie ........... 18 px
     · boutons .................... 19 px
   Le piège n'est pas le titre, toujours assez gros, mais les textes
   secondaires : c'est là qu'un design moderne descend à 13 px, et c'est
   précisément ce qu'un lecteur presbyte ne lit plus.
═══════════════════════════════════════════════════════════════════════════ */

body.webi-page {
	--w-noir:      #0a0908;
	--w-noir-2:    #100d0b;
	--w-noir-3:    #16120e;
	--w-panneau:   #191512;

	--w-or:        #bc650e;
	--w-or-clair:  #e2a33f;
	--w-or-pale:   #ffdaa4;
	--w-accent:    #ff5600;
	--w-live:      #e0342c;
	/* Vert WhatsApp officiel. C'est le seul endroit de la page où on sort du
	   noir et or : la couleur fait partie du repère, un bouton doré aurait
	   demandé de lire pour comprendre de quoi il s'agit. */
	--w-wa:        #25d366;
	--w-wa-clair:  #4ae57f;

	--w-texte:     #ece5db;
	--w-texte-2:   #cfc5b8;
	--w-sourdine:  #9c8f7f;
	--w-blanc:     #ffffff;

	--w-bord:      rgba(188, 101, 14, .30);
	--w-bord-fin:  rgba(255, 255, 255, .09);
	--w-carte:     rgba(255, 255, 255, .04);
	--w-ombre:     0 24px 70px rgba(0, 0, 0, .55);

	--w-font:      'Montserrat', Helvetica, Arial, sans-serif;
	--w-serif:     'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--w-rayon:     14px;
	--w-rayon-lg:  22px;
	--w-wrap:      1180px;
	--w-ease:      cubic-bezier(.25, .46, .45, .94);
}

/* Divi pose ses propres marges sur le conteneur principal. */
body.webi-page #page-container,
body.webi-page #et-main-area,
body.webi-page #main-content { background: var(--w-noir); }

/* ── Base ─────────────────────────────────────────────────────────────────── */

body.webi-page #webi-page {
	font-family: var(--w-font);
	font-size: 21px;
	line-height: 1.75;
	color: var(--w-texte-2);
	background: var(--w-noir);
	overflow-x: hidden;
	position: relative;
	isolation: isolate;
}

body.webi-page #webi-page *,
body.webi-page #webi-page *::before,
body.webi-page #webi-page *::after { box-sizing: border-box; }

body.webi-page #webi-page img { max-width: 100%; height: auto; display: block; }

/* Divi déclare `section { display: block }`, ce qui bat la règle du navigateur
   sur [hidden] : sans cette ligne, le compte à rebours masqué garde ses 290 px
   de haut et le message « c'est noté » de la confirmation s'affiche d'emblée. */
body.webi-page #webi-page [hidden] { display: none !important; }

/* ⚠️ Ne JAMAIS remettre h1/h2/h3/blockquote dans ce sélecteur.
   `body.webi-page #webi-page h1` pèse un identifiant : il bat `.webi-h1`, qui
   n'est qu'une classe. Toutes les marges de titres de la page étaient
   silencieusement annulées, et le symptôme visible n'était qu'une pastille
   collée sous le titre du héros. Les marges des titres se posent donc sur
   leurs classes, et nulle part ailleurs.

   `ul` reste ici : aucune classe ne lui dispute ces valeurs, et il faut bien
   retirer les puces et le retrait du navigateur quelque part. */
body.webi-page #webi-page ul { margin: 0; padding: 0; list-style: none; }

/* ── Structure ────────────────────────────────────────────────────────────── */

.webi-wrap { width: 100%; max-width: var(--w-wrap); margin: 0 auto; padding: 0 22px; }
.webi-wrap--etroit { max-width: 780px; }

.webi-sec { padding: 68px 0; position: relative; z-index: 1; }

/* Alternance de fonds posée explicitement section par section, jamais par
   nth-of-type : insérer une section décalerait silencieusement toutes les
   suivantes. */
/* Fonds semi-transparents : le décor animé est posé derrière toute la page,
   il doit rester perceptible à travers les sections sans jamais gêner la
   lecture. Les sections les plus chargées en texte sont les plus opaques. */
.webi-hero      { background: transparent; padding-top: 52px; }
.webi-compte    { background: rgba(22, 18, 14, .74); padding: 44px 0; text-align: center; border-block: 1px solid var(--w-bord); }
.webi-programme { background: rgba(16, 13, 11, .70); }
.webi-citation  { background: transparent; }
.webi-tri       { background: rgba(16, 13, 11, .70); }
.webi-autorite  { background: transparent; }
.webi-final     { background: rgba(22, 18, 14, .80); border-top: 1px solid var(--w-bord); }
.webi-passe     { background: transparent; text-align: center; }

.webi-confirm__hero { background: transparent; padding-top: 60px; padding-bottom: 40px; }
.webi-etapes    { background: rgba(16, 13, 11, .70); }
.webi-question  { background: transparent; }
.webi-partage   { background: rgba(22, 18, 14, .74); border-top: 1px solid var(--w-bord-fin); }

/* ── Typographie ──────────────────────────────────────────────────────────── */

.webi-surtitre {
	font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--w-or-clair); margin: 0 0 18px;
}

.webi-h1 {
	font-family: var(--w-serif);
	font-size: clamp(2.35rem, 6.2vw, 3.7rem);
	line-height: 1.12;
	font-weight: 700;
	color: var(--w-blanc);
	/* Assez d'air pour les descendantes du titre ET pour le halo pulsé de la
	   pastille de date, qui déborde de 14 px et venait mordre sur le « p » de
	   « peur ». */
	margin: 0 0 34px;
	text-wrap: balance;
}

.webi-h2 {
	font-family: var(--w-serif);
	font-size: clamp(1.9rem, 4.3vw, 2.75rem);
	line-height: 1.2; font-weight: 700; color: var(--w-blanc);
	margin: 0 0 26px;
	text-wrap: balance;
}

.webi-h3 {
	font-size: clamp(1.35rem, 2.8vw, 1.65rem);
	font-weight: 700; color: var(--w-blanc); letter-spacing: .01em;
	margin: 0 0 12px;
}

.webi-lead { font-size: 1.4rem; color: var(--w-texte-2); }
.webi-lead p { margin: 0 0 16px; }
.webi-lead p:last-child { margin-bottom: 0; }
.webi-lead em { color: var(--w-or-pale); font-style: italic; }

.webi-note { font-size: 1.06rem; color: var(--w-sourdine); margin: 10px 0 0; }
.webi-signature {
	font-family: var(--w-serif); font-size: 1.6rem; font-style: italic;
	color: var(--w-or-clair); margin: 22px 0 0;
}

/* ── Pastilles date / durée ───────────────────────────────────────────────── */

.webi-hero__quand { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 32px; }

.webi-pastille {
	display: inline-block;
	font-size: 1rem; font-weight: 700; letter-spacing: .02em;
	padding: 7px 13px; border-radius: 999px;
	background: var(--w-or); color: #17110a;
	white-space: nowrap;
}
.webi-pastille--creux { background: transparent; color: var(--w-texte-2); border: 1px solid var(--w-bord); }

/* Le fuseau tient dans la pastille de date plutôt que d'en occuper une à lui
   seul : à quatre pastilles, la ligne débordait et « Gratuit » se retrouvait
   tout seul en dessous. La liste compte des Belges, des Suisses et des
   Québécois, la mention doit rester, mais au second plan. */
.webi-pastille small {
	display: inline-block;
	margin-left: 7px;
	padding-left: 7px;
	border-left: 1px solid rgba(23, 17, 10, .28);
	/* Même corps que le reste de la pastille : le plancher de 16 px vaut aussi
	   ici. La hiérarchie tient par le filet de séparation et l'opacité. */
	font-size: 1em;
	font-weight: 600;
	opacity: .72;
}

/* ── Héro ─────────────────────────────────────────────────────────────────── */

/* ── Héros ──────────────────────────────────────────────────────────────────
   Deux colonnes réelles : le texte à gauche d'un seul tenant, l'action à
   droite (carte puis affiche).

   Le piège est que la lecture attendue diffère selon la largeur :
   · grand écran  → titre, date, chapô en continu, sans rupture ;
   · téléphone    → le formulaire doit s'intercaler entre le titre et le chapô,
                    sinon le premier champ tombe à deux écrans de défilement.

   Les deux conteneurs passent donc en `display: contents` sur téléphone : ils
   s'effacent, leurs enfants redeviennent des cases de la grille et on les
   replace librement. Aucun balisage dupliqué, aucun contenu caché. */

/* Sur téléphone le photogramme passe APRÈS la carte, jamais avant. Au-dessus,
   il coûte 170 px et fait tomber le premier champ sous la ligne de flottaison :
   c'est exactement l'erreur pour laquelle l'affiche avait été sortie du héros.
   Après le formulaire, il ne coûte rien et se voit quand même dès la première
   poussée de défilement. */
.webi-hero__grid {
	display: grid;
	row-gap: 26px;
	/* ⚠️ `minmax(0, 1fr)` et non la colonne implicite. Sans elle, la colonne
	   unique est dimensionnée en `auto`, donc au contenu — et le photogramme,
	   qui tire sa largeur d'un `aspect-ratio`, n'a pas de largeur à donner. Le
	   navigateur tranche la circularité en sa faveur : 454 px de large dans une
	   colonne de 331, et toute la page part en défilement horizontal. Le
	   symptôme trompe, il ressemble à une image trop grande alors que c'est la
	   colonne qui n'a pas de largeur. Même famille que les rangs illustrés des
	   pages de vente. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "intro" "carte" "scene" "lead";
}

/* Sur téléphone les deux colonnes s'effacent au profit de leurs enfants. */
.webi-hero__texte,
.webi-hero__cote { display: contents; }

.webi-hero__intro       { grid-area: intro; }
.webi-hero__cote > .webi-carte  { grid-area: carte; }
.webi-hero__cote > .webi-hero__scene { grid-area: scene; }
.webi-hero__lead        { grid-area: lead; }

@media (min-width: 900px) {
	.webi-hero__grid {
		grid-template-columns: 1.06fr .94fr;
		grid-template-areas: "texte cote";
		column-gap: 56px;
		row-gap: 0;
		align-items: start;
	}

	/* Les deux colonnes redeviennent des blocs : le texte coule d'un trait,
	   l'action s'empile. */
	.webi-hero__texte,
	.webi-hero__cote { display: block; }
	.webi-hero__texte { grid-area: texte; }
	.webi-hero__cote  { grid-area: cote; }

	.webi-hero__intro,
	.webi-hero__cote > .webi-carte,
	.webi-hero__cote > .webi-hero__scene,
	.webi-hero__lead { grid-area: auto; }

	/* Sur grand écran l'ordre du HTML reprend la main : le photogramme coiffe
	   la carte. Il occupe la moitié haute d'une colonne de droite qui commençait
	   sinon 220 px plus bas que le titre. */
	.webi-hero__cote > .webi-hero__scene { margin-bottom: 22px; }
}

/* ── Photogramme du héros ───────────────────────────────────────────────────
   Le héros n'affiche pas l'affiche : il affiche la bande de photo qui est en
   son milieu.

   L'affiche complète a été essayée cinq fois dans le héros et sortie cinq fois
   (l'historique est dans le README). Deux raisons, et aucune ne tient à
   l'emplacement :
     · elle est carrée, donc deux fois plus haute qu'une colonne de texte, et
       creuse un vide partout où on la pose ;
     · ses trois bandeaux — le nom de Laurent, la date en rouge, « webinaire
       gratuit » — répètent mot pour mot ce que le titre et les pastilles
       disent déjà juste à côté.
   Ce qui distingue réellement le 8 du 29 septembre, c'est la photo. C'est donc
   la seule chose qu'on garde.

   ⚠️ Le cadre est en 21/9 alors que la source est carrée, et ce n'est pas un
   choix esthétique : c'est ce qui fait que l'image DÉBORDE en hauteur, donc que
   `object-position` a prise sur elle. Dans un cadre carré elle ne déborderait
   pas et le recadrage serait sans le moindre effet, en silence.
   42,86 % de la hauteur de l'affiche entrent dans ce cadre : c'est la bande la
   plus haute qui tienne entre le bandeau de date et le titre incrusté en bas
   des affiches. Élargir le cadre, c'est ramener du texte dupliqué dans le champ.

   Le réglage vertical se fait par édition, clé `visuel_cadrage`. */

.webi-hero__scene {
	position: relative;
	margin: 0;
	width: 100%;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: var(--w-rayon-lg);
	border: 1px solid var(--w-bord);
	/* Le halo doré de l'affiche du programme, refait en ombre portée : un
	   pseudo-élément serait rogné par l'`overflow: hidden` du cadre. */
	box-shadow: var(--w-ombre), 0 0 0 1px rgba(226, 163, 63, .18), 0 0 64px -18px rgba(226, 163, 63, .5);
	background: var(--w-noir-3);
}

/* Fondu des seuls bords haut et bas, pour que la bande se pose dans le noir de
   la page au lieu d'y être découpée au cutter. Ce n'est pas le voile que
   réclamerait du texte par-dessus : le cœur de l'image reste intact, et rien
   ne s'écrit dessus. */
.webi-hero__scene::after {
	content: "";
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(10, 9, 8, .38) 0%,
		rgba(10, 9, 8, 0) 26%,
		rgba(10, 9, 8, 0) 68%,
		rgba(10, 9, 8, .58) 100%);
}

/* Sélecteur porté au poids d'un identifiant, à contrecœur mais nécessairement :
   `body.webi-page #webi-page img` impose `height: auto` à toutes les images de
   la page. Une simple classe perdrait, l'image garderait sa hauteur naturelle,
   sortirait du cadre et le recadrage ne se verrait jamais. */
body.webi-page #webi-page .webi-hero__scene-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--webi-cadrage, 50% 41%);
}

/* ── Carte formulaire ─────────────────────────────────────────────────────── */

.webi-carte {
	background: linear-gradient(180deg, var(--w-panneau), var(--w-noir-3));
	border: 1px solid var(--w-bord);
	border-radius: var(--w-rayon);
	padding: 26px 24px;
	box-shadow: var(--w-ombre);
}
.webi-carte--final { max-width: 520px; margin: 30px auto 0; }

.webi-carte__titre {
	font-size: 1.31rem; font-weight: 800; color: var(--w-blanc);
	margin: 0 0 18px; text-align: left;
}

/* Dernier bloc : le titre et la date coiffent une carte centrée dans une
   colonne étroite. Alignés à gauche, ils désaxaient l'ensemble. */
.webi-final .webi-h2,
.webi-final .webi-lead { text-align: center; }

/* ── Formulaire ───────────────────────────────────────────────────────────── */

.webi-form { margin: 0; }

.webi-field { margin-bottom: 16px; }

.webi-field label {
	display: block; font-size: 1rem; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--w-or-pale); margin-bottom: 7px;
}

body.webi-page #webi-page .webi-field input {
	width: 100%;
	font-family: var(--w-font);
	/* 16px minimum : en dessous, Safari iOS zoome à la mise au point et le
	   formulaire saute hors de l'écran au premier clic. */
	font-size: 18px;
	line-height: 1.4;
	padding: 15px 16px;
	color: var(--w-texte);
	background: rgba(0, 0, 0, .35);
	border: 1px solid var(--w-bord-fin);
	border-radius: 9px;
	transition: border-color .2s var(--w-ease), box-shadow .2s var(--w-ease);
	-webkit-appearance: none; appearance: none;
}
body.webi-page #webi-page .webi-field input::placeholder { color: #6d655c; }
body.webi-page #webi-page .webi-field input:focus {
	outline: none;
	border-color: var(--w-or-clair);
	box-shadow: 0 0 0 3px rgba(226, 163, 63, .18);
}

.webi-field__aide { display: block; font-size: 1rem; color: var(--w-sourdine); margin-top: 6px; }

/* Case RGPD : décochée, obligatoire, et lisible. Sur l'ancienne page elle était
   pré-cochée et écrite en blanc sur un dégradé qui finissait en blanc. */
.webi-rgpd { display: flex; align-items: flex-start; gap: 11px; margin: 18px 0 20px; }
body.webi-page #webi-page .webi-rgpd input[type="checkbox"] {
	flex: 0 0 auto; width: 19px; height: 19px; margin: 3px 0 0;
	accent-color: var(--w-or); cursor: pointer;
}
.webi-rgpd label {
	font-size: 1rem; line-height: 1.6; color: var(--w-texte-2);
	cursor: pointer; font-weight: 400;
}

/* Pot de miel — masqué sans display:none, que certains robots détectent. */
.webi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.webi-form__erreur {
	background: rgba(224, 52, 44, .12);
	border: 1px solid rgba(224, 52, 44, .45);
	color: #ffb3ae;
	border-radius: 9px; padding: 12px 15px; margin: 0 0 16px; font-size: 1.06rem;
}

.webi-form__sous {
	font-size: 1rem; color: var(--w-sourdine);
	text-align: center; margin: 14px 0 0; line-height: 1.6;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */

body.webi-page #webi-page .webi-btn {
	display: inline-block; width: auto;
	font-family: var(--w-font); font-size: 1.19rem; font-weight: 800;
	line-height: 1.3; letter-spacing: .01em; text-align: center; text-decoration: none;
	padding: 17px 30px; border-radius: 11px; border: 1px solid transparent;
	cursor: pointer; transition: transform .18s var(--w-ease), box-shadow .18s var(--w-ease), background .18s var(--w-ease);
}

body.webi-page #webi-page .webi-btn--primary {
	width: 100%;
	color: #17110a;
	background: linear-gradient(135deg, var(--w-or-clair), var(--w-or));
	box-shadow: 0 12px 30px rgba(188, 101, 14, .30);
}
body.webi-page #webi-page .webi-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(188, 101, 14, .42);
	color: #17110a;
}

.webi-compte .webi-btn--primary,
.webi-passe .webi-btn--primary,
.webi-etape .webi-btn--primary { width: auto; min-width: 260px; }

body.webi-page #webi-page .webi-btn--outline {
	color: var(--w-texte); background: transparent; border-color: var(--w-bord);
	font-size: 1.125rem; padding: 15px 26px;
}
body.webi-page #webi-page .webi-btn--outline:hover { border-color: var(--w-or-clair); color: var(--w-or-pale); }

body.webi-page #webi-page .webi-btn--live {
	background: linear-gradient(135deg, #ff5a52, var(--w-live));
	color: #fff; box-shadow: 0 12px 30px rgba(224, 52, 44, .35);
}

body.webi-page #webi-page .webi-btn--wa {
	color: #06170d;
	background: linear-gradient(135deg, var(--w-wa-clair), var(--w-wa));
	box-shadow: 0 12px 30px rgba(37, 211, 102, .28);
}
body.webi-page #webi-page .webi-btn--wa:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 38px rgba(37, 211, 102, .40);
	color: #06170d;
}

/* ── Compte à rebours ─────────────────────────────────────────────────────── */

.webi-compte__label {
	font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--w-or-clair); margin: 0 0 16px;
}
.webi-compte__grille {
	display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px;
}
.webi-compte__grille > div {
	min-width: 76px; padding: 12px 8px;
	background: var(--w-carte); border: 1px solid var(--w-bord-fin); border-radius: 11px;
}
.webi-compte__grille strong {
	display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--w-blanc);
	font-variant-numeric: tabular-nums;
}
.webi-compte__grille span {
	display: block; font-size: 1rem; letter-spacing: .07em; text-transform: uppercase;
	color: var(--w-sourdine); margin-top: 6px;
}
.webi-compte--inline { background: transparent; border: 0; padding: 26px 0 0; text-align: center; }

/* ── Programme ────────────────────────────────────────────────────────────── */

/* ── Programme : l'affiche et les points, côte à côte ─────────────────────── */

.webi-programme__grille { display: grid; gap: 34px; }

.webi-affiche { position: relative; }

/* Halo doré derrière l'affiche : elle se détache du fond au lieu d'y flotter
   comme un rectangle posé au hasard. */
.webi-affiche::before {
	content: "";
	position: absolute;
	inset: -13% -9%;
	background: radial-gradient(58% 50% at 50% 50%, rgba(226, 163, 63, .22), transparent 72%);
	z-index: -1;
	pointer-events: none;
}

.webi-affiche__img {
	display: block;
	border-radius: var(--w-rayon-lg);
	border: 1px solid var(--w-bord);
	box-shadow: var(--w-ombre), 0 0 0 1px rgba(226, 163, 63, .18);
	/* `width: 100%` et non `width: auto` : avec `loading="lazy"`, une image pas
	   encore chargée n'a pas de largeur intrinsèque, et `auto` la réduisait à
	   2 px. Le rapport hauteur/largeur venant des attributs width et height
	   réservait bien la bonne case, mais la page sautait quand même à l'arrivée
	   de l'image. Une largeur définie règle les deux. */
	width: 100%;
	height: auto;
}

.webi-programme__cta { margin: 30px 0 0; }

/* Même dispositif sur la page de confirmation : le texte d'un côté,
   l'affiche de l'autre. Centrée verticalement, elle tient la ligne avec le
   bloc de texte quelle que soit la longueur du titre du webinaire. */
.webi-confirm__grille { display: grid; gap: 34px; }

@media (min-width: 900px) {
	.webi-confirm__grille {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
		gap: 56px;
		align-items: center;
	}
}

@media (min-width: 900px) {
	.webi-programme__grille {
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		gap: 56px;
		align-items: center;
	}
}

.webi-liste li {
	display: flex; align-items: flex-start; gap: 16px;
	padding: 17px 0; border-bottom: 1px solid var(--w-bord-fin);
	font-size: 1.31rem; color: var(--w-texte);
}
.webi-liste li:last-child { border-bottom: 0; }
.webi-liste__num {
	flex: 0 0 auto; font-family: var(--w-serif); font-size: 1.35rem; font-weight: 700;
	color: var(--w-or); line-height: 1.3; min-width: 34px;
}

/* ── Citation / anti-promesse ─────────────────────────────────────────────── */

.webi-citation blockquote {
	font-family: var(--w-serif); font-size: clamp(1.3rem, 3.2vw, 1.8rem);
	line-height: 1.45; font-style: italic; color: var(--w-or-pale);
	border-left: 3px solid var(--w-or);
	margin: 0; padding: 4px 0 4px 26px;
}

/* ── Pour toi / pas pour toi ──────────────────────────────────────────────── */

.webi-tri__grille { display: grid; gap: 22px; }
@media (min-width: 820px) { .webi-tri__grille { grid-template-columns: 1fr 1fr; } }

.webi-tri__col {
	background: var(--w-carte); border: 1px solid var(--w-bord-fin);
	border-radius: var(--w-rayon); padding: 28px 26px;
}
.webi-tri__col--oui { border-color: var(--w-bord); }
.webi-tri__col li {
	position: relative; padding: 11px 0 11px 32px; font-size: 1.25rem; line-height: 1.6;
}
.webi-tri__col li::before {
	position: absolute; left: 0; top: 9px; font-weight: 800;
}
.webi-tri__col--oui li::before { content: "✓"; color: var(--w-or-clair); }
.webi-tri__col--non li::before { content: "✕"; color: #7a6f63; }
.webi-tri__col--non li { color: var(--w-sourdine); }

/* ── Étapes (confirmation) ────────────────────────────────────────────────── */

.webi-etape {
	display: flex; gap: 20px; align-items: flex-start;
	padding: 26px 0; border-bottom: 1px solid var(--w-bord-fin);
}
.webi-etape:last-child { border-bottom: 0; }
.webi-etape__num {
	flex: 0 0 auto;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--w-serif); font-size: 1.3rem; font-weight: 700;
	color: var(--w-or-pale); background: rgba(188, 101, 14, .14);
	border: 1px solid var(--w-bord);
}
.webi-etape__corps { flex: 1 1 auto; min-width: 0; }
.webi-etape__corps p { margin: 0 0 12px; }
.webi-etape__corps p:last-child { margin-bottom: 0; }

.webi-agenda { display: flex; flex-wrap: wrap; gap: 11px; margin: 16px 0 0; }

/* ── Bloc WhatsApp (héros de la confirmation) ─────────────────────────────
   Le seul endroit de la page qui sort du noir et or. C'est délibéré : le vert
   se reconnaît avant d'être lu, et cet encadré doit accrocher l'œil dès le
   premier écran, avant même que la personne ait commencé à défiler.

   Composant autonome, il ne dépend pas de .webi-etape : il vit dans le héros,
   où il n'y a ni numéro ni filet de séparation. */

.webi-wa {
	margin: 8px 0 26px;
	padding: 22px 24px 20px;
	border: 1px solid rgba(37, 211, 102, .34);
	border-radius: var(--w-rayon-lg);
	background:
		radial-gradient(130% 150% at 0% 0%, rgba(37, 211, 102, .16), transparent 62%),
		rgba(37, 211, 102, .06);
}

/* Le logo est posé DANS la ligne de titre, pas dans une colonne à gauche. Une
   colonne coûtait une soixantaine de pixels de largeur au texte, donc une à
   deux lignes de plus sur téléphone, donc un bouton qui repassait sous la
   ligne de flottaison. C'est tout l'enjeu de ce bloc. */
.webi-wa__titre {
	display: flex; align-items: center; gap: 13px;
	font-size: 1.3rem; font-weight: 800; color: var(--w-blanc);
	margin: 0 0 10px; line-height: 1.3;
}

.webi-wa__logo {
	flex: 0 0 auto;
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	color: #06170d;
	background: linear-gradient(135deg, var(--w-wa-clair), var(--w-wa));
	box-shadow: 0 8px 22px rgba(37, 211, 102, .26);
}
.webi-wa__logo svg { display: block; }

.webi-wa__texte { font-size: 1.06rem; color: var(--w-texte-2); margin: 0 0 18px; line-height: 1.6; }
.webi-wa .webi-note { margin: 11px 0 0; }

/* Divi pose `p { padding-bottom: 1em }` sur toute la page. Ça passe inaperçu
   partout ailleurs, ici ça coûtait 38 px entre le titre et le bouton, soit
   exactement ce qui décide qu'on voit le bouton sans défiler ou non. */
body.webi-page #webi-page .webi-wa p { padding-bottom: 0; }

/* ── Question de segmentation ─────────────────────────────────────────────── */

.webi-question__choix { display: grid; gap: 11px; margin-top: 22px; }

body.webi-page #webi-page .webi-choix {
	font-family: var(--w-font); font-size: 1.25rem; font-weight: 600;
	text-align: left; line-height: 1.5;
	padding: 16px 20px; border-radius: 11px; cursor: pointer;
	color: var(--w-texte); background: var(--w-carte);
	border: 1px solid var(--w-bord-fin);
	transition: border-color .18s var(--w-ease), background .18s var(--w-ease), transform .18s var(--w-ease);
}
body.webi-page #webi-page .webi-choix:hover { border-color: var(--w-or-clair); transform: translateX(3px); }
body.webi-page #webi-page .webi-choix.is-choisi {
	border-color: var(--w-or); background: rgba(188, 101, 14, .16); color: var(--w-or-pale);
}
.webi-question__merci { margin: 18px 0 0; color: var(--w-or-clair); font-weight: 600; }

/* ── Partage ──────────────────────────────────────────────────────────────── */

.webi-partage__boutons { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 18px; }
.webi-partage p { margin: 0; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */

.webi-pied {
	background: var(--w-noir); border-top: 1px solid var(--w-bord-fin);
	padding: 26px 0; text-align: center;
}
.webi-pied .webi-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
body.webi-page #webi-page .webi-pied a {
	color: var(--w-sourdine); font-size: 1rem; text-decoration: none;
}
body.webi-page #webi-page .webi-pied a:hover { color: var(--w-or-clair); }

/* ── Apparitions au défilement ────────────────────────────────────────────────
   Deux garde-fous appris à nos dépens :
   · `.webi-js` n'est posée que si le script tourne, donc sans JavaScript tout
     reste visible au lieu de rester invisible pour toujours ;
   · aucun clip-path masquant, qui empêchait l'IntersectionObserver de voir
     l'élément et laissait les titres invisibles en permanence.
   La préférence système « réduire les animations » est respectée. Elle est
   active sur le poste de Kévin : sans le mode `webi-motion-full`, il ne verrait
   jamais ce qu'il livre. */

@media (prefers-reduced-motion: no-preference) {
	.webi-js .webi-reveal {
		opacity: 0; transform: translateY(18px);
		transition: opacity .65s var(--w-ease), transform .65s var(--w-ease);
	}
	.webi-js .webi-reveal.is-in { opacity: 1; transform: none; }
}

html.webi-motion-full .webi-js .webi-reveal {
	opacity: 0; transform: translateY(18px);
	transition: opacity .65s var(--w-ease), transform .65s var(--w-ease);
}
html.webi-motion-full .webi-js .webi-reveal.is-in { opacity: 1; transform: none; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	body.webi-page #webi-page { font-size: 19px; }
	.webi-sec { padding: 48px 0; }
	.webi-hero { padding-top: 34px; }

	/* ── La pastille de date ne tient pas sur un téléphone ──────────────────
	   « mardi 29 septembre 2026 à 19h30 | heure de Paris » d'un seul tenant
	   mesure 476 px pour 331 px disponibles. Rien ne le signalait :
	   l'`overflow-x: hidden` de la page absorbait le débordement en silence et
	   la mention de fuseau était simplement coupée en deux. Elle est là pour
	   les Belges, les Suisses et les Québécois de la liste, autant qu'elle se
	   lise. Le fuseau passe donc sous la date, et le filet de séparation
	   vertical, qui n'aurait plus de sens en début de ligne, disparaît. */
	.webi-pastille { white-space: normal; }
	.webi-pastille small {
		display: block;
		margin: 2px 0 0;
		padding-left: 0;
		border-left: 0;
	}
	.webi-carte { padding: 22px 18px; }
	.webi-etape { gap: 14px; }
	.webi-etape__num { width: 36px; height: 36px; font-size: 1.1rem; }
	.webi-compte__grille > div { min-width: 66px; }
	.webi-compte__grille strong { font-size: 1.55rem; }
	.webi-agenda .webi-btn,
	.webi-partage__boutons .webi-btn { flex: 1 1 auto; }
	/* ── Le bouton WhatsApp doit tenir dans le premier écran ────────────────
	   Tout ce qui suit ne sert qu'à ça. Sur un téléphone, entre le bandeau de
	   marque, le titre, la phrase de confirmation et l'encadré lui-même, il
	   reste environ 700 px utiles une fois la barre d'adresse déduite. Chaque
	   ligne de trop repousse le bouton hors de l'écran, et un bouton qu'il faut
	   aller chercher n'est plus mis en avant.
	   Les valeurs ci-dessous sont calées pour un iPhone courant : le bouton
	   arrive vers 670 px. Ne pas les remonter sans remesurer. */
	.webi-wa { padding: 19px 17px 17px; margin-bottom: 22px; }
	.webi-wa__logo { width: 38px; height: 38px; }
	.webi-wa__logo svg { width: 21px; height: 21px; }
	/* Titre et bouton doivent tenir sur une ligne chacun : deux lignes de plus,
	   c'est 50 px, et le bouton passe sous la ligne de flottaison. */
	.webi-wa__titre { gap: 11px; font-size: 1.14rem; }
	.webi-wa__texte { margin-bottom: 16px; }
	/* Le bouton garde ses 19 px : c'est le plancher, on raccourcit le libellé
	   plutôt que le corps. */
	.webi-btn__plus { display: none; }

	.webi-confirm__hero { padding-top: 30px; }
	.webi-confirm__texte .webi-surtitre { margin-bottom: 12px; }
	.webi-confirm__texte .webi-h1 { margin-bottom: 24px; }
	/* Uniquement sur la confirmation : la page de capture garde son chapô à
	   pleine taille, elle n'a pas de bouton à faire tenir au-dessus. */
	.webi-confirm__texte .webi-lead { font-size: 1.24rem; }
	/* Sur téléphone le bouton prend toute la largeur : c'est le geste principal
	   de la page, il ne doit pas se retrouver à moitié hors du champ. */
	body.webi-page #webi-page .webi-btn--wa { display: block; width: 100%; }
}

/* ── Chrome du thème ────────────────────────────────────────────────────────
   Le gabarit est autonome : ni le header.php ni le footer.php de Divi ne sont
   inclus, donc le menu, le panier, la déconnexion, les archives et les crédits
   du thème ne sont plus générés du tout. Ces règles ne sont qu'un filet, au cas
   où un jour un plugin injecterait un en-tête par un autre chemin. */

body.webi-page #main-header,
body.webi-page #top-header,
body.webi-page #main-footer,
body.webi-page .et-l--header,
body.webi-page .et-l--footer,
body.webi-page #et-secondary-nav,
body.webi-page .et_search_outer { display: none !important; }

body.webi-page #page-container { padding-top: 0 !important; margin-top: 0 !important; }
body.webi-page #et-main-area   { padding-top: 0 !important; }

/* Sans le conteneur de Divi, c'est le body qui porte le fond. */
body.webi-page { background: var(--w-noir); margin: 0; }

/* ── Bandeau de marque ────────────────────────────────────────────────────
   Noir plein, sans filet de séparation : le bandeau et le héros doivent se
   fondre l'un dans l'autre, pas se découper. */

.webi-marque {
	background: #000;
	padding: 26px 0;
}
.webi-marque .webi-wrap { display: flex; align-items: center; justify-content: center; }

.webi-marque__logo {
	max-height: 88px;
	width: auto;
	max-width: 100%;
}

/* Repli typographique, calqué sur le verrouillage du logo : une ligne de
   surtitre condensée, puis le nom en gros. */
.webi-marque__texte {
	margin: 0;
	text-align: center;
	line-height: 1;
	font-family: 'Oswald', 'Montserrat', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}
.webi-marque__sur {
	display: block;
	font-weight: 600;
	font-size: clamp(1rem, 2.5vw, 1.28rem);
	letter-spacing: .045em;
	color: #d8d8d8;
	margin-bottom: 3px;
}
.webi-marque__nom {
	display: block;
	font-weight: 700;
	font-size: clamp(1.75rem, 6.2vw, 3.05rem);
	letter-spacing: .005em;
	color: #fff;
}

@media (max-width: 640px) {
	.webi-marque { padding: 18px 0; }
	.webi-marque__logo { max-height: 58px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DÉCOR ANIMÉ
   Trois couches fixes derrière toute la page. Purement décoratif : jamais de
   texte, jamais de zone cliquable, et la page reste entièrement lisible si
   aucune ne s'affiche.
═══════════════════════════════════════════════════════════════════════════ */

.webi-fond {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

/* ── Halos dorés ────────────────────────────────────────────────────────────
   Volontairement surdimensionnés et débordants : le décalage de parallaxe ne
   doit jamais faire apparaître un bord. */
.webi-fond__lueur {
	position: absolute;
	inset: -22% -12%;
	background:
		radial-gradient(52% 40% at 18% 12%,  rgba(226, 163, 63, .17), transparent 68%),
		radial-gradient(46% 36% at 88% 26%,  rgba(188, 101, 14, .15), transparent 70%),
		radial-gradient(58% 44% at 46% 78%,  rgba(226, 163, 63, .10), transparent 72%),
		radial-gradient(38% 30% at 78% 96%,  rgba(255, 86,  0,  .07), transparent 70%);
	will-change: transform;
}

/* ── Grain ──────────────────────────────────────────────────────────────────
   Bruit fractal en SVG inline : pas de requête réseau, pas d'image à livrer,
   et ça casse l'aplat des grands fonds noirs. */
.webi-fond__grain {
	position: absolute;
	inset: -14%;
	opacity: .14;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
	will-change: transform;
}

/* ── Poussière d'or ─────────────────────────────────────────────────────── */
.webi-fond__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Vignette ───────────────────────────────────────────────────────────────
   Assombrit les bords pour ramener l'œil au centre et éviter que les halos
   ne viennent lécher le texte en bordure d'écran. */
.webi-fond__vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0, 0, 0, .62) 100%);
}

/* La barre de marque et le pied restent opaques : ce sont les deux bornes de
   la page, elles doivent trancher net. */
.webi-marque,
.webi-pied { position: relative; z-index: 1; }
.webi-pied { background: #000; }

/* ── Souffle sur le bouton principal ─────────────────────────────────────────
   Un reflet qui traverse le bouton toutes les 5 secondes. Assez lent pour ne
   pas agiter la page, assez visible pour que l'œil y revienne. */
body.webi-page #webi-page .webi-btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.webi-js .webi-btn--primary::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
	transform: skewX(-18deg);
	pointer-events: none;
}

/* ── Pastille de date : léger battement ─────────────────────────────────── */
.webi-pastille:not(.webi-pastille--creux) {
	box-shadow: 0 0 0 0 rgba(226, 163, 63, .45);
}

/* ── Animations ─────────────────────────────────────────────────────────────
   Regroupées ici et conditionnées deux fois, exactement comme les apparitions
   au défilement : par la préférence système d'abord, par le mode
   « rendu complet » réservé à l'administrateur ensuite. Kévin a « Réduire les
   animations » activé sur son Mac, sans ce doublon il ne verrait rien de ce
   qu'il livre. */

@keyframes webi-souffle {
	0%   { left: -60%; }
	55%  { left: 130%; }
	100% { left: 130%; }
}

@keyframes webi-battement {
	0%   { box-shadow: 0 0 0 0    rgba(226, 163, 63, .45); }
	70%  { box-shadow: 0 0 0 14px rgba(226, 163, 63, 0);   }
	100% { box-shadow: 0 0 0 0    rgba(226, 163, 63, 0);   }
}

@media (prefers-reduced-motion: no-preference) {
	.webi-js .webi-btn--primary::after { animation: webi-souffle 5s var(--w-ease) 1.4s infinite; }
	.webi-js .webi-pastille:not(.webi-pastille--creux) { animation: webi-battement 3.4s ease-out 1s infinite; }
}

html.webi-motion-full .webi-js .webi-btn--primary::after { animation: webi-souffle 5s var(--w-ease) 1.4s infinite; }
html.webi-motion-full .webi-js .webi-pastille:not(.webi-pastille--creux) { animation: webi-battement 3.4s ease-out 1s infinite; }

/* ── Écrans étroits ─────────────────────────────────────────────────────────
   On allège : moins de halo, pas de grain, moins de vignette. Le décor ne doit
   jamais coûter de la batterie sur un téléphone. */
@media (max-width: 640px) {
	.webi-fond__lueur   { opacity: .72; }
	.webi-fond__grain   { display: none; }
	.webi-fond__vignette { background: radial-gradient(140% 100% at 50% 45%, transparent 48%, rgba(0, 0, 0, .55) 100%); }
}

/* ── Autorité : portrait, bio, preuves ──────────────────────────────────── */

.webi-autorite__grille { display: grid; gap: 34px; }

@media (min-width: 900px) {
	.webi-autorite__grille {
		grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
		gap: 52px;
		align-items: start;
	}
}

.webi-autorite__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--w-rayon-lg);
	border: 1px solid var(--w-bord);
	box-shadow: var(--w-ombre);
}

/* Les chiffres. Trois repères, pas un tableau de bord : au-delà, plus personne
   ne les lit et ils cessent d'être crédibles. */
.webi-preuves {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 30px 0 0;
}

.webi-preuves li {
	flex: 1 1 130px;
	padding: 16px 18px;
	background: var(--w-carte);
	border: 1px solid var(--w-bord);
	border-radius: var(--w-rayon);
	text-align: center;
}

.webi-preuves strong {
	display: block;
	font-family: var(--w-serif);
	font-size: clamp(1.7rem, 4vw, 2.3rem);
	line-height: 1;
	font-weight: 700;
	color: var(--w-or-clair);
	font-variant-numeric: tabular-nums;
}

.webi-preuves span {
	display: block;
	margin-top: 7px;
	font-size: 1rem;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--w-sourdine);
}

/* ── Rappels du bouton en cours de page ─────────────────────────────────────
   Les gens ne décident pas tous à la même profondeur de page. Ces boutons
   ramènent vers le formulaire du bas plutôt que vers celui du héros : sur
   téléphone, faire remonter quelqu'un de quatre écrans, c'est le perdre. */
.webi-tri__cta,
.webi-autorite__cta { margin: 34px 0 0; text-align: center; }

.webi-tri__cta .webi-btn,
.webi-autorite__cta .webi-btn,
.webi-programme__cta .webi-btn { width: auto; min-width: 280px; }

@media (max-width: 640px) {
	.webi-tri__cta .webi-btn,
	.webi-autorite__cta .webi-btn,
	.webi-programme__cta .webi-btn { width: 100%; min-width: 0; }
	.webi-preuves li { flex: 1 1 100%; }
}

/* ── Le bandeau de réassurance ───────────────────────────────────────────────
   Le visuel validé par Laurent, posé pleine largeur juste au-dessus du pied.
   Il porte sa propre mise en page : la page ne lui ajoute ni cadre, ni marge,
   ni fond, sinon on verrait deux bandeaux l'un dans l'autre.

   `max-width` : au-delà, un bandeau de 2160 px commencerait à s'étirer et à
   se brouiller sur les très grands écrans. Le fond noir qui apparaît alors de
   part et d'autre est celui de la page — la coupure ne se voit pas. */
.webi-bandeau {
	position: relative;   /* au-dessus du décor animé, comme la barre de marque */
	z-index: 1;
	background: var(--w-noir);
}

/* La largeur vient du conteneur, jamais de l'image : en chargement différé
   elle n'a pas encore de largeur intrinsèque, et un `width: auto` s'y résout
   à 2 px malgré des attributs width/height corrects sur la balise. */
body.webi-page #webi-page .webi-bandeau__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 2160px;
	margin-inline: auto;
}

/* ── Repli : la mission, puis la presse ──────────────────────────────────────
   Ce qui suit ne sert que tant que `visuels/bandeau.jpg` n'a pas été déposé.
   Ne pas le supprimer : c'est aussi le filet si le fichier disparaît.
   Bloc commun aux pages de capture et de confirmation, posé juste avant le
   pied. Il ne relance jamais vers le formulaire : un bouton ici ferait de la
   preuve un argument de vente, et c'est ce qui la démonétise. */

.webi-mission {
	background: rgba(22, 18, 14, .82);
	border-top: 1px solid var(--w-bord);
	padding: 58px 0 54px;
}

.webi-mission__grille { display: grid; gap: 32px; align-items: center; }

@media (min-width: 900px) {
	.webi-mission__grille {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 52px;
	}
}

/* La largeur vient du conteneur, jamais de l'image : en chargement différé
   elle n'a pas encore de largeur intrinsèque, et un `width: auto` s'y résout
   à 2 px malgré des attributs width/height corrects sur la balise. */
.webi-mission__media img {
	width: 100%;
	height: auto;
	border-radius: var(--w-rayon-lg);
	border: 1px solid var(--w-bord);
	box-shadow: var(--w-ombre);
}

body.webi-page #webi-page .webi-mission__phrase {
	font-size: clamp(1.55rem, 3.2vw, 2.15rem);
	line-height: 1.25;
	color: var(--w-blanc);
	margin: 0;
}

.webi-mission--seul .webi-wrap { text-align: center; }

/* Les deux chiffres, en ligne et sans cadre. Volontairement pas le composant
   `.webi-preuves` : ses cartes servent déjà dans « Qui te parle », trois
   sections plus haut, et deux fois le même objet à cette distance se lit comme
   une redite plutôt que comme un rappel. */
.webi-mission__chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin: 26px 0 0;
}

.webi-mission--seul .webi-mission__chiffres { justify-content: center; }

.webi-mission__chiffres li { display: flex; align-items: baseline; gap: 11px; }

.webi-mission__chiffres strong {
	font-family: var(--w-serif);
	font-size: clamp(2rem, 4.6vw, 2.6rem);
	line-height: 1;
	font-weight: 700;
	color: var(--w-or-clair);
	font-variant-numeric: tabular-nums;
}

.webi-mission__chiffres span {
	font-size: 1.06rem;                 /* 17 px — le plancher du plugin est à 16 */
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--w-texte-2);
}

/* ── Vu et entendu sur ───────────────────────────────────────────────────────
   Bande claire, seule de toute la page. Les logotypes sont des encres sombres
   sur fond transparent : sur le noir, il n'en resterait rien. C'est aussi ce
   que fait le bandeau d'origine. */

.webi-presse {
	position: relative;                 /* au-dessus du décor animé, comme le pied */
	z-index: 1;
	background: #f4f0e9;
	border-top: 1px solid rgba(0, 0, 0, .10);
	padding: 32px 0 30px;
	text-align: center;
}

body.webi-page #webi-page .webi-presse__label {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6d6155;
	margin: 0 0 22px;
	padding-bottom: 0;                  /* Divi ajoute un padding-bas à tous les p */
}

/* Grille et non `flex-wrap` : à dix logotypes de largeurs très inégales, le
   retour à la ligne libre donnait une première rangée de sept et une seconde
   de trois. Cinq colonnes égales rendent les deux rangées de cinq de la
   planche d'origine, et chaque logo garde une taille lisible plutôt que
   d'être rétréci pour tenir sur une seule ligne. */
.webi-presse__liste {
	--presse-echelle: 1;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	justify-items: center;
	align-items: center;
	gap: 26px 16px;
	max-width: 1000px;
	margin-inline: auto;
}

@media (max-width: 900px) {
	.webi-presse__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
	.webi-presse__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La case porte la taille calculée en PHP, pas l'image. Dix images différées
   sans dimensions feraient sauter la ligne entière à leur arrivée. */
.webi-presse__item {
	width:  calc(var(--lw) * var(--presse-echelle));
	height: calc(var(--lh) * var(--presse-echelle));
}

/* Sélecteur porté au même poids que `#webi-page img`, qui impose sinon son
   `height: auto` et écrase la hauteur de la case. */
body.webi-page #webi-page .webi-presse__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Monochrome, comme sur le bandeau validé. Dix logotypes en couleur au bas
	   d'une page noir et or tirent l'œil plus fort que le formulaire.
	   Retirer cette seule déclaration pour les repasser en couleur. */
	/* `brightness` en plus du gris : les logotypes en aplat clair (Santé
	   Naturelle, Radio Médecine Douce) virent au gris très pâle une fois
	   désaturés et s'effacent sur le fond crème, alors que les mots noirs
	   restent noirs. */
	filter: grayscale(1) brightness(.9) contrast(1.08);
}

@media (max-width: 640px) {
	.webi-mission { padding: 44px 0 40px; }
	.webi-mission__chiffres { gap: 12px 28px; }
	.webi-presse { padding: 26px 0 24px; }
	.webi-presse__liste { --presse-echelle: .8; gap: 22px 12px; }
}