@charset "UTF-8";
/*
 * Les pages professionnelles et associations.
 *
 * Reprise des maquettes Claude Design « Pages pros SDBG » : la page pilier,
 * la campagne avec code et la commande groupée. Rayons, ombres, graisses,
 * tailles et espacements sont ceux de la maquette, pris au pixel ; les
 * couleurs passent par les jetons du thème quand il les porte déjà.
 *
 * Servie uniquement sur les pages dont le contenu porte une classe `sbg-pp-`
 * (voir inc/pages-pros.php), et dans l'éditeur, où les sections gardent ainsi
 * leur allure. Aucune règle ne dépend donc d'une classe du corps de page :
 * l'éditeur n'en a pas.
 *
 *  1. Icônes
 *  2. Jetons
 *  3. Sections
 *  4. Titres et textes
 *  5. Icônes posées par classe
 *  6. Boutons
 *  7. Page pilier
 *  8. Questions fréquentes
 *  9. Campagne avec code
 * 10. Commande groupée
 * 11. Voir plus
 * 12. Adaptations
 */

/* ==================================================================
   1. Icônes
   ==================================================================
   Tracés Lucide (licence ISC), en masques : la couleur vient de
   `background-color`, la forme du tracé. Une icône coûte une ligne ici et
   aucune requête. */

:root {
	--pp-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--pp-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	--pp-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
	--pp-i-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M10 20c5.5-2.5.8-6.4 3-10'/%3E%3Cpath d='M9.5 9.4c1.1.8 1.8 2.2 2.3 3.7-2 .4-3.5.4-4.8-.3-1.2-.6-2.3-1.9-3-4.2 2.8-.5 4.4 0 5.5.8z'/%3E%3Cpath d='M14.1 6a7 7 0 0 0-1.1 4c1.9-.1 3.3-.6 4.3-1.4 1-1 1.6-2.3 1.7-4.6-2.7.1-4 1-4.9 2z'/%3E%3C/svg%3E");
	--pp-i-scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Cpath d='M8.12 8.12 12 12'/%3E%3Cpath d='M20 4 8.12 15.88'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M14.8 14.8 20 20'/%3E%3C/svg%3E");
	--pp-i-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--pp-i-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E");
	--pp-i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7'/%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8'/%3E%3Cpath d='M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4'/%3E%3Cpath d='M2 7h20'/%3E%3Cpath d='M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7'/%3E%3C/svg%3E");
	--pp-i-flower-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 1 3 3m-3-3a3 3 0 1 0-3 3m3-3v1M9 8a3 3 0 1 0 3 3M9 8h1m5 0a3 3 0 1 1-3 3m3-3h-1m-2 3v-1'/%3E%3Ccircle cx='12' cy='8' r='2'/%3E%3Cpath d='M12 10v12'/%3E%3Cpath d='M12 22c4.2 0 7-1.667 7-5-4.2 0-7 1.667-7 5Z'/%3E%3Cpath d='M12 22c-4.2 0-7-1.667-7-5 4.2 0 7 1.667 7 5Z'/%3E%3C/svg%3E");
	--pp-i-building-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
	--pp-i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
	--pp-i-hotel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 22v-6.57'/%3E%3Cpath d='M12 11h.01'/%3E%3Cpath d='M12 7h.01'/%3E%3Cpath d='M14 15.43V22'/%3E%3Cpath d='M15 16a5 5 0 0 0-6 0'/%3E%3Cpath d='M16 11h.01'/%3E%3Cpath d='M16 7h.01'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 7h.01'/%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3C/svg%3E");
	--pp-i-tree-pine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z'/%3E%3Cpath d='M12 22v-3'/%3E%3C/svg%3E");
	--pp-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
	--pp-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--pp-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
	--pp-i-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z'/%3E%3Cpath d='m14.5 12.5 2-2'/%3E%3Cpath d='m11.5 9.5 2-2'/%3E%3Cpath d='m8.5 6.5 2-2'/%3E%3Cpath d='m17.5 15.5 2-2'/%3E%3C/svg%3E");
	--pp-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
	--pp-i-handshake: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
	--pp-i-house: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
	--pp-i-recycle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19H4.815a1.83 1.83 0 0 1-1.57-.881 1.785 1.785 0 0 1-.004-1.784L7.196 9.5'/%3E%3Cpath d='M11 19h8.203a1.83 1.83 0 0 0 1.556-.89 1.784 1.784 0 0 0 0-1.775l-1.226-2.12'/%3E%3Cpath d='m14 16-3 3 3 3'/%3E%3Cpath d='M8.293 13.596 7.196 9.5 3.1 10.598'/%3E%3Cpath d='m9.344 5.811 1.093-1.892A1.83 1.83 0 0 1 11.985 3a1.784 1.784 0 0 1 1.546.888l3.943 6.843'/%3E%3Cpath d='m13.378 9.633 4.096 1.098 1.097-4.096'/%3E%3C/svg%3E");
	--pp-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
	--pp-i-calendar-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
	--pp-i-chart-column: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
	--pp-i-shield-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
	--pp-i-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
	--pp-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.5' fill='%23000'/%3E%3C/svg%3E");
	--pp-i-trees: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10v.2A3 3 0 0 1 8.9 16H5a3 3 0 0 1-1-5.8V10a3 3 0 0 1 6 0Z'/%3E%3Cpath d='M7 16v6'/%3E%3Cpath d='M13 19v3'/%3E%3Cpath d='M12 19h8.3a1 1 0 0 0 .7-1.7L18 14h.3a1 1 0 0 0 .7-1.7L16 9h.2a1 1 0 0 0 .8-1.7L13 3l-1.4 1.5'/%3E%3C/svg%3E");
	--pp-i-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E");
	--pp-i-clipboard-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4'/%3E%3Cpath d='M12 16h4'/%3E%3Cpath d='M8 11h.01'/%3E%3Cpath d='M8 16h.01'/%3E%3C/svg%3E");
}

.sbg-pp-ico--sprout { --pp-ico: var(--pp-i-sprout); }
.sbg-pp-ico--scissors { --pp-ico: var(--pp-i-scissors); }
.sbg-pp-ico--map-pin { --pp-ico: var(--pp-i-map-pin); }
.sbg-pp-ico--truck { --pp-ico: var(--pp-i-truck); }
.sbg-pp-ico--store { --pp-ico: var(--pp-i-store); }
.sbg-pp-ico--flower-2 { --pp-ico: var(--pp-i-flower-2); }
.sbg-pp-ico--building-2 { --pp-ico: var(--pp-i-building-2); }
.sbg-pp-ico--briefcase { --pp-ico: var(--pp-i-briefcase); }
.sbg-pp-ico--hotel { --pp-ico: var(--pp-i-hotel); }
.sbg-pp-ico--tree-pine { --pp-ico: var(--pp-i-tree-pine); }
.sbg-pp-ico--clock { --pp-ico: var(--pp-i-clock); }
.sbg-pp-ico--phone { --pp-ico: var(--pp-i-phone); }
.sbg-pp-ico--users { --pp-ico: var(--pp-i-users); }
.sbg-pp-ico--ruler { --pp-ico: var(--pp-i-ruler); }
.sbg-pp-ico--calendar { --pp-ico: var(--pp-i-calendar); }
.sbg-pp-ico--handshake { --pp-ico: var(--pp-i-handshake); }
.sbg-pp-ico--house { --pp-ico: var(--pp-i-house); }
.sbg-pp-ico--recycle { --pp-ico: var(--pp-i-recycle); }
.sbg-pp-ico--link { --pp-ico: var(--pp-i-link); }
.sbg-pp-ico--calendar-check { --pp-ico: var(--pp-i-calendar-check); }
.sbg-pp-ico--chart-column { --pp-ico: var(--pp-i-chart-column); }
.sbg-pp-ico--shield-check { --pp-ico: var(--pp-i-shield-check); }
.sbg-pp-ico--wallet { --pp-ico: var(--pp-i-wallet); }
.sbg-pp-ico--tag { --pp-ico: var(--pp-i-tag); }
.sbg-pp-ico--trees { --pp-ico: var(--pp-i-trees); }
.sbg-pp-ico--leaf { --pp-ico: var(--pp-i-leaf); }
.sbg-pp-ico--clipboard-list { --pp-ico: var(--pp-i-clipboard-list); }

/* ==================================================================
   2. Jetons
   ==================================================================
   Ceux du design system des maquettes. Les teintes que le thème porte
   déjà passent par ses variables ; ne s'ajoutent ici que les nuances
   propres à ces pages. */

:root {
	--pp-largeur: 1120px;
	--pp-etroit: 880px;

	--pp-pine-900: #033b39;
	--pp-pine-800: #044f4c;
	--pp-pine: var(--sbg-pine, #046865);
	--pp-pine-500: #2a8c87;
	--pp-pine-300: var(--sbg-pine-300, #8fc4c0);
	--pp-pine-100: var(--sbg-pine-100, #d3e8e6);
	--pp-pine-50: var(--sbg-feuille, #eff9ef);
	--pp-rouge: var(--sbg-berry, #f02848);
	--pp-rouge-600: #cb0000;
	--pp-rouge-700: #a30000;
	--pp-rose-600: var(--sbg-berry-fonce, #c32c53);
	--pp-rose-300: var(--sbg-rose, #ffcad4);
	--pp-rose-50: var(--sbg-blush, #fff0f3);
	--pp-encre: var(--sbg-encre, #372d33);
	--pp-gris: var(--sbg-gris, #5a716d);
	--pp-gris-300: #9aaba7;
	--pp-ligne: var(--sbg-ligne, #e3efec);
	--pp-papier: var(--sbg-fond, #fafffa);
	--pp-teinte: #f5fbf5;

	--pp-ombre-sm: 0 2px 8px rgb(4 104 101 / 0.06);
	--pp-ombre-md: 0 12px 30px rgb(4 104 101 / 0.1);
	--pp-ombre-lg: 0 24px 60px rgb(4 104 101 / 0.14);
	--pp-ombre-carte: 0 24px 60px rgb(4 104 101 / 0.18);
	--pp-ombre-hero: 0 18px 40px rgb(20 33 31 / 0.14);

	--pp-r-sm: 8px;
	--pp-r-md: 14px;
	--pp-r-lg: 18px;

	--pp-transition: 140ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==================================================================
   3. Sections
   ==================================================================
   Une section est un bloc « Groupe » portant `sbg-sec sbg-pp-sec` : la
   classe du thème la met pleine largeur, la nôtre lui donne son rythme.
   Ses enfants s'empilent par un écart, jamais par des marges — la remise
   à zéro qui suit neutralise le flux du chapitre 21 de theme.css. */

.sbg-pp-sec.sbg-pp-sec {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 88px var(--sbg-gouttiere, 24px);
	background: #fff;
	color: var(--pp-encre);
}

.sbg-pp-sec > * {
	width: 100%;
	max-width: var(--pp-largeur);
	margin-inline: auto;
}

/* Le flux du chapitre 21 de theme.css pose 20 px au-dessus de chaque enfant
   d'un groupe. Ici, sections, grilles et piles écartent leurs enfants par
   `gap` : la marge s'ajouterait à l'écart. Les composants qui veulent une
   marge (un montant poussé en bas de carte…) la reposent plus loin, avec un
   poids au moins égal. */
.sbg-pp-sec.sbg-pp-sec > *,
:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-group > * {
	margin-block: 0;
}

/* Remise à zéro des marges de texte et de liste dans les sections : les
   écarts viennent des `gap`. Même spécificité que le flux du thème (0,1,1),
   mais cette feuille passe après lui. */
.sbg-pp-sec :is(p, h1, h2, h3, h4, ul, ol, li, figure, table, details, dl, dd),
.sbg-pp-hero :is(p, h1, h2, h3, h4, ul, ol, li, figure, table, dl, dd) {
	margin-block: 0;
}

/* Le thème écarte deux éléments de liste de 0,35 em (`.sbg-prose li + li`,
   0,1,2) : même poids ici, la feuille passe après. */
.sbg-pp-sec li + li,
.sbg-pp-hero li + li {
	margin-top: 0;
}

.sbg-pp-sec :is(ul, ol).wp-block-list,
.sbg-pp-hero :is(ul, ol).wp-block-list {
	padding-inline-start: 0;
	list-style: none;
}

/* Une section qui s'ouvre sur un titre suivi d'un tableau ou d'une grille
   de cartes les sépare de 36 px, comme la maquette. */
.sbg-pp-sec:has(> .sbg-pp-compare, > .sbg-pp-entete, > .sbg-pp-atouts, > .sbg-pp-cartes) {
	gap: 36px;
}

.sbg-pp-sec--blanc.sbg-pp-sec { background: #fff; }
.sbg-pp-sec--menthe.sbg-pp-sec { background: var(--pp-pine-50); }
.sbg-pp-sec--rose.sbg-pp-sec { background: var(--pp-rose-50); }
.sbg-pp-sec--papier.sbg-pp-sec { background: var(--pp-papier); }

.sbg-pp-sec--pin.sbg-pp-sec {
	background: var(--pp-pine);
	color: #fff;
}

.sbg-pp-sec--bande.sbg-pp-sec { padding-block: 26px; }
.sbg-pp-sec--serre.sbg-pp-sec { padding-block: 56px; }
.sbg-pp-sec--y64.sbg-pp-sec { padding-block: 64px; }
.sbg-pp-sec--y80.sbg-pp-sec { padding-block: 80px; }
.sbg-pp-sec--tete.sbg-pp-sec { padding-block: 64px 88px; }
.sbg-pp-sec--tete-courte.sbg-pp-sec { padding-block-end: 80px; }

.sbg-pp-sec--filet.sbg-pp-sec {
	border-bottom: 1px solid var(--pp-ligne);
}

.sbg-pp-sec--etroit.sbg-pp-sec {
	gap: 32px;
}

.sbg-pp-sec--etroit > * {
	max-width: var(--pp-etroit);
}

/* ==================================================================
   4. Titres et textes
   ================================================================== */

.sbg-pp-titre {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sbg-pp-titre--centre {
	align-items: center;
	text-align: center;
}

p.sbg-pp-sur {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--pp-rouge);
}

p.sbg-pp-sur--vert { color: var(--pp-pine-500); }
p.sbg-pp-sur--clair { color: var(--pp-rose-300); }

.sbg-pp-titre h2 {
	font-size: 30px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-titre--rose h2 {
	color: var(--pp-rouge);
}

h1.sbg-pp-h1 {
	font-size: 44px;
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--pp-pine);
}

h1.sbg-pp-h1--grand {
	font-size: 48px;
	line-height: 1.06;
}

h2.sbg-pp-h2-fort {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}

h2.sbg-pp-h2-fort--moyen {
	font-size: 30px;
	line-height: 1.15;
}

h2.sbg-pp-h2-bande {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--pp-pine);
}

p.sbg-pp-chapo {
	font-size: 18px;
	line-height: 1.6;
}

.sbg-pp-sec--pin p.sbg-pp-chapo {
	color: var(--pp-pine-100);
}

p.sbg-pp-chapo--court {
	max-width: 680px;
	font-size: 17px;
	line-height: 1.55;
}

.sbg-pp-titre > p.sbg-pp-chapo-centre {
	max-width: 760px;
	margin-top: 10px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--pp-gris);
}

p.sbg-pp-intro {
	max-width: 460px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--pp-gris);
}

p.sbg-pp-texte {
	font-size: 17px;
	line-height: 1.6;
}

p.sbg-pp-petit {
	font-size: 14px;
	line-height: 1.5;
	color: var(--pp-gris);
}

p.sbg-pp-petit a {
	font-weight: 600;
	color: var(--pp-pine);
}

p.sbg-pp-muet {
	color: var(--pp-gris);
}

.sbg-pp-sec a,
.sbg-pp-hero a {
	color: var(--pp-pine);
	text-decoration: none;
	transition: color var(--pp-transition);
}

.sbg-pp-sec a:hover,
.sbg-pp-hero a:hover {
	color: var(--pp-rouge);
}

.sbg-pp-sec a:focus-visible,
.sbg-pp-hero a:focus-visible,
.sbg-pp-sec summary:focus-visible,
.sbg-pp-sec input:focus-visible {
	outline: 2px solid var(--pp-rouge);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Le téléphone : une icône, le numéro en gras. */
p.sbg-pp-tel a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 18px;
	font-weight: 700;
	color: var(--pp-pine);
}

p.sbg-pp-tel a::before {
	content: "";
	flex: none;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--pp-i-phone) center / contain no-repeat;
	mask: var(--pp-i-phone) center / contain no-repeat;
}

p.sbg-pp-tel--clair a,
p.sbg-pp-tel--clair a:hover {
	color: #fff;
}

/* ==================================================================
   5. Icônes
   ==================================================================
   Une icône se pose par une classe `sbg-pp-ico--nom` sur le bloc lui-même :
   pas de HTML libre, et l'éditeur en change en changeant la classe. */

[class*="sbg-pp-ico--"]::before {
	content: "";
	display: block;
	flex: none;
	width: var(--pp-ico-t, 24px);
	height: var(--pp-ico-t, 24px);
	background-color: var(--pp-ico-c, currentColor);
	-webkit-mask: var(--pp-ico) center / contain no-repeat;
	mask: var(--pp-ico) center / contain no-repeat;
}

/* ==================================================================
   6. Boutons
   ==================================================================
   Ceux du design system : pilule, graisse 600, pas d'ombre, fond qui
   fonce au survol. Les variantes reprennent les styles de bloc du thème —
   « Rose » pour l'accent, « Contour » pour le bouton creux. */

.sbg-pp-boutons.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.sbg-pp-boutons--centre.wp-block-buttons {
	justify-content: center;
}

:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 34px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--pp-pine);
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transform: none;
	transition: background var(--pp-transition), transform var(--pp-transition);
}

:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-button__link:hover,
:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-button__link:focus-visible {
	background: var(--pp-pine-800);
	color: #fff;
	transform: none;
}

:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-button__link:active {
	transform: scale(0.97);
}

:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-berry .wp-block-button__link {
	background: var(--pp-rouge);
	border-color: transparent;
	color: #fff;
}

:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-berry .wp-block-button__link:hover,
:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-berry .wp-block-button__link:focus-visible {
	background: var(--pp-rouge-600);
	color: #fff;
}

:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--pp-pine);
	color: var(--pp-pine);
}

:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-ghost .wp-block-button__link:hover,
:is(.sbg-pp-sec, .sbg-pp-hero) .is-style-sbg-ghost .wp-block-button__link:focus-visible {
	background: var(--pp-pine-50);
	color: var(--pp-pine);
}

:is(.sbg-pp-sec, .sbg-pp-hero) .wp-block-button__link:focus-visible {
	outline: 2px solid var(--pp-rouge);
	outline-offset: 3px;
}

:is(.sbg-pp-sec, .sbg-pp-hero) .sbg-pp-bouton--md .wp-block-button__link {
	padding: 12px 26px;
	font-size: 15px;
}

.sbg-pp-bouton--plein.wp-block-button,
.sbg-pp-bouton--plein .wp-block-button__link {
	width: 100%;
}

/* ==================================================================
   7. Page pilier
   ================================================================== */

/* La bannière : la photo pleine largeur, la carte blanche posée dessus. */
.sbg-pp-hero.wp-block-cover {
	min-height: 600px;
	padding: 48px var(--sbg-gouttiere, 24px);
}

.sbg-pp-hero .wp-block-cover__image-background {
	border-radius: 0;
}

.sbg-pp-hero > .wp-block-cover__inner-container {
	max-width: var(--pp-largeur);
	margin-inline: auto;
}

.sbg-pp-hero__carte.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: min(660px, 100%);
	padding: 44px 48px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-hero);
	color: var(--pp-encre);
}

.sbg-pp-hero__carte > .sbg-pp-boutons {
	margin-top: 6px;
}

/* 564 px de carte pour 584 px de boutons à 34 px de marge intérieure : à
   28 px, les deux tiennent sur une ligne, comme dans la maquette. */
.sbg-pp-hero__carte .wp-block-button__link {
	padding-inline: 28px;
}

.sbg-pp-hero__carte p.sbg-pp-chapo {
	line-height: 1.55;
}

/* Le fil d'Ariane. */
.sbg-pp-fil ol {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	line-height: 1.4;
	color: var(--pp-gris);
}

.sbg-pp-fil li {
	margin: 0;
}

.sbg-pp-fil li + li::before {
	content: "›";
	margin-inline-end: 8px;
}

.sbg-pp-fil a {
	color: var(--pp-gris);
}

/* La bande de confiance. */
ul.sbg-pp-confiance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 24px;
}

.sbg-pp-confiance > li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pp-pine);
	--pp-ico-c: var(--pp-pine-500);
}

/* Les deux formules. */
.sbg-pp-formules.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 28px;
	align-items: stretch;
}

.sbg-pp-formule.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 40px;
	border: 1.5px solid var(--pp-pine-100);
	border-radius: var(--pp-r-lg);
	background: #fff;
}

.sbg-pp-formule--vedette.wp-block-group {
	border: 2px solid var(--pp-pine);
	box-shadow: var(--pp-ombre-lg);
}

.sbg-pp-formule__tete.wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 28px;
}

p.sbg-pp-badge {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 14px;
	border-radius: 999px;
	background: var(--pp-rouge);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.sbg-pp-formule h3 {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-formule > p {
	font-size: 17px;
	line-height: 1.5;
}

/* Listes à coches. */
ul.sbg-pp-coches {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbg-pp-coches > li {
	position: relative;
	padding-inline-start: 32px;
	font-size: 16px;
	line-height: 1.45;
}

.sbg-pp-coches > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--pp-pine-500);
	-webkit-mask: var(--pp-i-check) center / contain no-repeat;
	mask: var(--pp-i-check) center / contain no-repeat;
}

.sbg-pp-coches--fonce > li::before {
	background-color: var(--pp-pine);
}

/* Le montant en bas de carte. */
.sbg-pp-montant.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-top: auto;
	padding: 20px 24px;
	border-radius: var(--pp-r-md);
	background: var(--pp-pine-50);
}

.sbg-pp-montant--papier.wp-block-group {
	border: 1px solid var(--pp-ligne);
	background: var(--pp-papier);
}

.sbg-pp-montant > p {
	font-size: 15px;
	line-height: 1.4;
	color: var(--pp-gris);
}

.sbg-pp-montant > p.sbg-pp-montant__chiffre {
	font-size: 36px;
	font-weight: 900;
	line-height: 1.1;
	color: var(--pp-pine);
	white-space: nowrap;
}

/* Le comparatif. */
.sbg-pp-compare.wp-block-table {
	margin-block: 0;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-md);
	overflow-x: auto;
}

.sbg-pp-compare table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
	line-height: 1.45;
}

.sbg-pp-compare :is(th, td) {
	border: 0;
	text-align: left;
	vertical-align: middle;
}

.sbg-pp-compare thead th {
	padding: 20px 28px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: uppercase;
}

.sbg-pp-compare thead th:first-child {
	width: 26%;
	background: #fff;
}

.sbg-pp-compare thead th:nth-child(2) {
	width: 37%;
	background: var(--pp-pine);
	color: #fff;
}

.sbg-pp-compare thead th:nth-child(3) {
	width: 37%;
	background: var(--pp-pine-100);
	color: var(--pp-pine);
}

.sbg-pp-compare tbody tr {
	border-top: 1px solid var(--pp-ligne);
}

.sbg-pp-compare tbody th {
	padding: 18px 28px;
	background: #fff;
	font-weight: 600;
	color: var(--pp-pine);
}

.sbg-pp-compare tbody td {
	padding: 18px 28px;
}

.sbg-pp-compare tbody td:nth-child(2) {
	background: var(--pp-teinte);
}

.sbg-pp-compare strong {
	font-weight: 600;
	color: var(--pp-pine);
}

/* Deux colonnes : le système des bandes à deux volets. Chaque variante ne
   fait que régler ses colonnes et son écart. */
.sbg-pp-duo.wp-block-group {
	display: grid;
	grid-template-columns: var(--pp-cols, minmax(0, 1fr) minmax(0, 1fr));
	gap: var(--pp-gap, 64px);
	align-items: var(--pp-aligne, center);
}

.sbg-pp-duo--moitie { --pp-cols: minmax(0, 1fr) minmax(0, 1fr); --pp-gap: 64px; }
.sbg-pp-duo--photo { --pp-cols: 440px minmax(0, 1fr); --pp-gap: 56px; }
.sbg-pp-duo--calendrier { --pp-cols: minmax(0, 1.35fr) minmax(0, 1fr); --pp-gap: 48px; --pp-aligne: start; }
.sbg-pp-duo--cta { --pp-cols: minmax(0, 1.2fr) minmax(0, 1fr); --pp-gap: 56px; }
.sbg-pp-duo--hero-campagne { --pp-cols: minmax(0, 1.05fr) minmax(0, 1fr); --pp-gap: 56px; }
.sbg-pp-duo--transparence { --pp-cols: minmax(0, 1.2fr) minmax(0, 1fr); --pp-gap: 64px; }
.sbg-pp-duo--formulaire { --pp-cols: minmax(0, 1fr) 560px; --pp-gap: 64px; }
.sbg-pp-duo--hero-groupee { --pp-cols: minmax(0, 1fr) 500px; --pp-gap: 56px; }
.sbg-pp-duo--tarifs { --pp-cols: minmax(0, 1.5fr) minmax(0, 1fr); --pp-gap: 40px; --pp-aligne: start; }
.sbg-pp-duo--pros-groupee { --pp-cols: minmax(0, 1fr) minmax(0, 1.3fr); --pp-gap: 56px; }

.sbg-pp-pile.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.sbg-pp-pile--hero.wp-block-group { gap: 22px; }
.sbg-pp-pile--large.wp-block-group { gap: 28px; }
.sbg-pp-pile--moyenne.wp-block-group { gap: 22px; }
.sbg-pp-pile--tarifs.wp-block-group { gap: 24px; }
.sbg-pp-pile--simu.wp-block-group { gap: 20px; }

/* Les exemples chiffrés du barème. */
ul.sbg-pp-exemples {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbg-pp-exemples > li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border: 1px solid var(--pp-ligne);
	border-radius: var(--pp-r-md);
	background: var(--pp-papier);
	font-size: 16px;
}

.sbg-pp-exemples > li.est-fort {
	border: 1.5px solid var(--pp-pine);
	background: var(--pp-pine-50);
}

.sbg-pp-exemples strong {
	color: var(--pp-pine);
	white-space: nowrap;
}

/* L'histogramme. */
figure.sbg-pp-barres {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 36px 36px 28px;
	border-radius: var(--pp-r-lg);
	background: var(--pp-pine-50);
}

/* Le thème centre les légendes de figure et les passe en petit gris
   (.sbg-prose figcaption, 0,1,1) : même poids ici, la feuille passe après. */
:is(.sbg-pp-barres, .sbg-pp-cout) > figcaption {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-align: left;
	color: var(--pp-gris);
}

.sbg-pp-barres__legende {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pp-gris);
}

.sbg-pp-barres__graphe {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 280px;
}

.sbg-pp-barres__col {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.sbg-pp-barres__valeur {
	font-size: 20px;
	font-weight: 800;
	color: var(--pp-pine);
	white-space: nowrap;
}

.sbg-pp-barres__col--fort .sbg-pp-barres__valeur {
	color: var(--pp-rouge);
}

.sbg-pp-barres__barre {
	display: block;
	width: 100%;
	height: var(--pp-h, 100px);
	border-radius: 8px 8px 0 0;
	background: var(--pp-c, var(--pp-pine));
}

.sbg-pp-barres__axe {
	display: flex;
	gap: 14px;
	padding-top: 10px;
	border-top: 1.5px solid var(--pp-pine);
}

.sbg-pp-barres__axe > span {
	flex: 1;
	font-size: 13px;
	text-align: center;
	color: var(--pp-gris);
}

/* Les professionnels. */
.sbg-pp-entete.wp-block-group {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 48px;
}

.sbg-pp-cartes.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.sbg-pp-carte.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border-radius: var(--pp-r-md);
	background: #fff;
	box-shadow: var(--pp-ombre-sm);
	--pp-ico-t: 28px;
	--pp-ico-c: var(--pp-rose-600);
}

.sbg-pp-carte h3 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-carte > p {
	font-size: 15px;
	line-height: 1.55;
}

.sbg-pp-carte > p.sbg-pp-lien {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
}

p.sbg-pp-lien a {
	color: var(--pp-rouge);
}

p.sbg-pp-lien a:hover {
	color: var(--pp-rouge-700);
}

/* Les photos. */
.sbg-pp-photo.wp-block-image {
	margin: 0;
}

.sbg-pp-photo.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--pp-r-lg);
	box-shadow: var(--pp-ombre-md);
	object-fit: cover;
}

.sbg-pp-photo--portrait.wp-block-image img {
	width: 440px;
	height: 520px;
}

/* Les cartes d'atout — la FeatureCard du design system. */
.sbg-pp-atouts.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 18px;
}

.sbg-pp-atouts--trois.wp-block-group {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}

.sbg-pp-atout.wp-block-group {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 26px 22px;
	border: 1.5px solid var(--pp-pine-100);
	border-radius: var(--pp-r-md);
	background: #fff;
	--pp-ico-t: 28px;
	--pp-ico-c: var(--pp-pine);
}

.sbg-pp-atout h3 {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: none;
	color: var(--pp-pine);
}

.sbg-pp-atout > p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--pp-gris);
}

/* Le calendrier. */
ol.sbg-pp-calendrier {
	display: flex;
	flex-direction: column;
}

.sbg-pp-calendrier > li {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr);
	gap: 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--pp-pine-100);
	font-size: 16px;
	line-height: 1.5;
}

.sbg-pp-calendrier > li:last-child {
	border-bottom: 0;
}

.sbg-pp-calendrier > li > strong:first-child {
	font-size: 14px;
	font-weight: 800;
	line-height: 1.6;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-rouge);
}

/* L'encart des zones de livraison. */
.sbg-pp-encart.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-md);
}

h3.sbg-pp-encart__titre {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
	--pp-ico-c: var(--pp-pine);
}

ul.sbg-pp-chevrons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.sbg-pp-chevrons > li {
	position: relative;
	padding-inline-start: 16px;
}

.sbg-pp-chevrons > li::before {
	content: "›";
	position: absolute;
	left: 0;
	color: var(--pp-pine-500);
}

.sbg-pp-chevrons a {
	font-weight: 600;
}

p.sbg-pp-note {
	padding: 16px 18px;
	border-radius: var(--pp-r-md);
	background: var(--pp-pine-50);
	font-size: 15px;
	line-height: 1.55;
}

/* La carte « à préparer ». */
.sbg-pp-memo.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	color: var(--pp-encre);
}

.sbg-pp-memo--ombre.wp-block-group {
	box-shadow: var(--pp-ombre-md);
}

.sbg-pp-memo h3 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

ul.sbg-pp-icones {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 16px;
	line-height: 1.4;
}

.sbg-pp-icones > li {
	position: relative;
	min-height: 22px;
	padding-inline-start: 32px;
	--pp-ico-t: 20px;
	--pp-ico-c: var(--pp-pine-500);
}

.sbg-pp-icones > li::before {
	position: absolute;
	top: 1px;
	left: 0;
}

.sbg-pp-icones--fines > li {
	line-height: 1.5;
}

.sbg-pp-icones--fines > li::before {
	top: 3px;
}

.sbg-pp-icones strong {
	color: var(--pp-pine);
}

.sbg-pp-rangee.wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

/* ==================================================================
   8. Questions fréquentes
   ==================================================================
   L'accordéon du design system, sur le `<details>` natif du thème. Les
   sélecteurs doublent ceux du chapitre 9 de theme.css pour passer devant
   eux sans `!important`. */

.sbg-pp-faq.sbg-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sbg-pp-faq details {
	border-radius: var(--pp-r-md);
	background: #fff;
	box-shadow: var(--pp-ombre-sm);
	overflow: hidden;
}

.sbg-pp-faq details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pp-pine);
	cursor: pointer;
	list-style: none;
}

.sbg-pp-faq details > summary::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	border: 0;
	background-color: var(--pp-pine);
	transform: none;
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-mask: var(--pp-i-chevron-right) center / contain no-repeat;
	mask: var(--pp-i-chevron-right) center / contain no-repeat;
}

.sbg-pp-faq details[open] > summary::after {
	transform: rotate(90deg);
}

.sbg-pp-faq details > :not(summary) {
	max-width: none;
	padding: 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pp-gris);
}

.sbg-pp-faq details > :not(summary):last-child {
	padding-bottom: 20px;
}

/* ==================================================================
   9. Campagne avec code
   ================================================================== */

/* La photo et la carte de suivi de la bannière. */
.sbg-pp-hero-media.wp-block-group {
	position: relative;
	height: 560px;
}

.sbg-pp-photo--hero-campagne.wp-block-image {
	position: absolute;
	top: 0;
	right: 0;
	width: min(470px, 100%);
	height: 520px;
}

.sbg-pp-suivi {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 360px;
	padding: 24px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-carte);
}

.sbg-pp-suivi__tete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

p.sbg-pp-suivi__sur {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pp-gris);
}

.sbg-pp-badge--doux {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--pp-pine-50);
	color: var(--pp-pine);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

p.sbg-pp-suivi__nom {
	font-size: 17px;
	font-weight: 800;
	color: var(--pp-pine);
}

.sbg-pp-suivi__chiffres {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sbg-pp-suivi__chiffre {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px;
	border: 1px solid var(--pp-ligne);
	border-radius: var(--pp-r-sm);
	background: var(--pp-papier);
}

.sbg-pp-suivi__chiffre strong {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--pp-pine);
	white-space: nowrap;
}

.sbg-pp-suivi__chiffre span {
	font-size: 12px;
	color: var(--pp-gris);
}

.sbg-pp-suivi__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}

.sbg-pp-suivi__total strong {
	font-size: 28px;
	font-weight: 900;
	color: var(--pp-pine);
	white-space: nowrap;
}

.sbg-pp-suivi__jauge {
	height: 10px;
	border-radius: 999px;
	background: var(--pp-ligne);
	overflow: hidden;
}

.sbg-pp-suivi__jauge > span {
	display: block;
	width: var(--pp-part, 50%);
	height: 10px;
	border-radius: 999px;
	background: var(--pp-rouge);
}

p.sbg-pp-suivi__note {
	font-size: 13px;
	line-height: 1.45;
	color: var(--pp-gris);
}

p.sbg-pp-suivi__note strong {
	color: var(--pp-rouge);
}

/* Les quatre zéros. */
.sbg-pp-zeros.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 32px;
}

.sbg-pp-zero.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbg-pp-zero > p {
	font-size: 15px;
	line-height: 1.5;
	color: var(--pp-gris);
}

.sbg-pp-zero > p.sbg-pp-zero__chiffre {
	font-size: 40px;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--pp-rouge);
}

.sbg-pp-zero > p.sbg-pp-zero__titre {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--pp-pine);
}

/* Les étapes : pastilles numérotées (campagne) ou grands chiffres (commande
   groupée). Le numéro vient d'un compteur : une étape ajoutée dans
   l'éditeur prend le sien sans qu'on l'écrive. */
.sbg-pp-etapes.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 20px;
	counter-reset: pp-etape;
}

.sbg-pp-etape.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border: 1.5px solid var(--pp-pine-100);
	border-radius: var(--pp-r-md);
	background: #fff;
	counter-increment: pp-etape;
}

.sbg-pp-etape::before {
	content: counter(pp-etape);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--pp-pine);
	color: #fff;
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.sbg-pp-etape--fin.wp-block-group {
	border-color: var(--pp-pine);
	background: var(--pp-pine-50);
}

.sbg-pp-etape--fin::before {
	background: var(--pp-rouge);
}

.sbg-pp-etape h3 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-etape > p {
	font-size: 15px;
	line-height: 1.55;
}

.sbg-pp-etapes--chiffres.wp-block-group {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 16px;
}

.sbg-pp-etapes--chiffres .sbg-pp-etape.wp-block-group {
	gap: 12px;
	padding: 24px;
	border: 0;
	box-shadow: var(--pp-ombre-sm);
}

.sbg-pp-etapes--chiffres .sbg-pp-etape::before {
	display: block;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--pp-rouge);
	font-size: 36px;
	font-weight: 900;
	line-height: 1.1;
}

.sbg-pp-etapes--chiffres .sbg-pp-etape h3 {
	font-size: 17px;
}

/* Le simulateur. */
.sbg-pp-simu.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 28px;
	align-items: stretch;
}

.sbg-pp-simulateur {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 36px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-md);
}

.sbg-pp-simulateur__titre {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-curseur {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sbg-pp-curseur__ligne {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.sbg-pp-curseur__ligne label {
	font-size: 16px;
	font-weight: 600;
}

.sbg-pp-curseur__ligne output {
	font-size: 24px;
	font-weight: 800;
	color: var(--pp-pine);
}

.sbg-pp-curseur input[type="range"] {
	width: 100%;
	height: 28px;
	margin: 0;
	accent-color: var(--pp-pine);
	cursor: pointer;
}

.sbg-pp-simulateur__calculer {
	align-self: flex-start;
	padding: 10px 22px;
	border: 1.5px solid var(--pp-pine);
	border-radius: 999px;
	background: transparent;
	color: var(--pp-pine);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.sbg-pp-simulateur__calculer[hidden] {
	display: none;
}

.sbg-pp-simulateur__resultat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
	padding: 24px 26px;
	border-radius: var(--pp-r-md);
	background: var(--pp-pine);
	color: #fff;
}

.sbg-pp-simulateur__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 16px;
	color: var(--pp-pine-100);
}

.sbg-pp-simulateur__total output {
	font-size: 44px;
	font-weight: 900;
	line-height: 1.1;
	color: #fff;
	white-space: nowrap;
}

.sbg-pp-simulateur__detail {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--pp-pine-100);
}

.sbg-pp-simulateur__detail > span:last-child {
	white-space: nowrap;
}

p.sbg-pp-simulateur__palier {
	padding: 14px 18px;
	border-radius: var(--pp-r-md);
	background: var(--pp-rose-50);
	color: var(--pp-rouge-700);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
}

/* Le tableau du barème. */
.sbg-pp-bareme {
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-sm);
	overflow: hidden;
}

p.sbg-pp-bareme__sur {
	padding: 20px 26px 12px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pp-gris);
}

.sbg-pp-bareme table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.sbg-pp-bareme thead th {
	padding: 12px 26px;
	border: 0;
	border-bottom: 1px solid var(--pp-ligne);
	background: none;
	color: var(--pp-gris);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
}

.sbg-pp-bareme thead th:last-child,
.sbg-pp-bareme td:last-child {
	text-align: right;
}

.sbg-pp-bareme tbody td {
	padding: 14px 26px;
	border: 0;
	border-top: 1px solid var(--pp-ligne);
	transition: background var(--pp-transition), color var(--pp-transition);
}

.sbg-pp-bareme tbody td:last-child {
	font-weight: 800;
	color: var(--pp-pine);
}

.sbg-pp-bareme tbody tr.est-actif td {
	border-top-color: var(--pp-pine);
	background: var(--pp-pine);
	color: #fff;
}

/* La carte de texte sous le barème. */
.sbg-pp-carte-texte.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-sm);
}

.sbg-pp-carte-texte h3 {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-carte-texte > p {
	font-size: 15px;
	line-height: 1.6;
}

/* Les options. */
.sbg-pp-options.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	align-items: stretch;
}

.sbg-pp-options__intro.wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}

.sbg-pp-options__intro > p {
	font-size: 15px;
	line-height: 1.6;
}

.sbg-pp-option.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	box-shadow: var(--pp-ombre-md);
	--pp-ico-t: 32px;
	--pp-ico-c: var(--pp-rose-600);
}

.sbg-pp-option h3 {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-option > p {
	font-size: 15px;
	line-height: 1.55;
}

.sbg-pp-option > p.sbg-pp-option__prix {
	margin-top: auto;
	font-weight: 600;
	color: var(--pp-gris);
}

.sbg-pp-option__prix strong {
	font-size: 32px;
	font-weight: 900;
	color: var(--pp-rouge);
}

/* Qui fait quoi. */
.sbg-pp-roles.wp-block-group {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

.sbg-pp-role.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border-radius: var(--pp-r-lg);
}

.sbg-pp-role--menthe.wp-block-group { background: var(--pp-pine-50); }

.sbg-pp-role--cadre.wp-block-group {
	border: 1.5px solid var(--pp-pine-100);
	background: #fff;
}

.sbg-pp-role--barre.wp-block-group {
	border: 1.5px dashed var(--pp-gris-300);
	background: var(--pp-papier);
}

.sbg-pp-role h3 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

.sbg-pp-role--barre h3 {
	color: var(--pp-gris);
}

ul.sbg-pp-croix {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--pp-gris);
}

.sbg-pp-croix > li {
	position: relative;
	padding-inline-start: 30px;
	font-size: 16px;
	line-height: 1.45;
}

.sbg-pp-croix > li::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--pp-rose-600);
	-webkit-mask: var(--pp-i-x) center / contain no-repeat;
	mask: var(--pp-i-x) center / contain no-repeat;
}

/* Le coût de la remise groupée. */
figure.sbg-pp-cout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 32px;
	border-radius: var(--pp-r-lg);
	background: var(--pp-pine-50);
}

.sbg-pp-cout__legende {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--pp-gris);
}

.sbg-pp-cout__ligne {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

p.sbg-pp-cout__texte {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
}

.sbg-pp-cout__texte strong {
	color: var(--pp-pine);
	white-space: nowrap;
}

.sbg-pp-cout__ligne:has(.sbg-pp-cout__barre--cher) strong {
	color: var(--pp-rose-600);
}

.sbg-pp-cout__barre {
	display: block;
	width: var(--pp-l, 100%);
	height: 22px;
	border-radius: 8px;
	background: var(--pp-pine);
}

.sbg-pp-cout__barre--cher {
	background: var(--pp-rose-600);
}

p.sbg-pp-cout__conclusion {
	font-size: 15px;
	line-height: 1.5;
	color: var(--pp-gris);
}

/* La bande « l'autre formule ». */
.sbg-pp-alt.wp-block-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}

.sbg-pp-alt__texte.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sbg-pp-sec--pin .sbg-pp-alt.wp-block-group {
	gap: 48px;
}

.sbg-pp-sec--pin .sbg-pp-alt__texte.wp-block-group {
	gap: 10px;
}

.sbg-pp-alt__texte > p:not([class]) {
	font-size: 16px;
	line-height: 1.55;
}

.sbg-pp-alt > .wp-block-buttons {
	flex: none;
}

/* Le formulaire de demande de code : celui du thème, habillé en carte. */
.sbg-pp-form.wp-block-group {
	padding: 36px;
	border-radius: var(--pp-r-lg);
	background: #fff;
	color: var(--pp-encre);
}

.sbg-pp-form .sbg-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: none;
}

.sbg-pp-form .sbg-form > * {
	grid-column: 1 / -1;
}

.sbg-pp-form .sbg-form > .sbg-form__champ--demi {
	grid-column: auto;
}

.sbg-pp-form .sbg-form__champ {
	gap: 6px;
}

.sbg-pp-form .sbg-form__label {
	font-size: 14px;
	font-weight: 600;
	color: var(--pp-pine);
}

.sbg-pp-form .sbg-form__saisie {
	min-height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--pp-pine-100);
	border-radius: var(--pp-r-sm);
	background: #fff;
	font: inherit;
	font-size: 15px;
}

.sbg-pp-form textarea.sbg-form__saisie {
	padding: 12px 14px;
	resize: vertical;
}

.sbg-pp-form select.sbg-form__saisie {
	padding: 0 12px;
}

.sbg-pp-form .sbg-form__saisie:focus {
	border-color: var(--pp-pine);
}

.sbg-pp-form .sbg-form__envoyer {
	width: 100%;
	margin-top: 0;
	padding: 15px 34px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: var(--pp-rouge);
	box-shadow: none;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	transform: none;
}

.sbg-pp-form .sbg-form__envoyer:hover,
.sbg-pp-form .sbg-form__envoyer:focus-visible {
	background: var(--pp-rouge-600);
	color: #fff;
	transform: none;
}

/* ==================================================================
   10. Commande groupée
   ================================================================== */

ul.sbg-pp-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sbg-pp-pastilles > li {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--pp-pine-50);
	color: var(--pp-pine);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.sbg-pp-pastilles > li.sbg-pp-pastille--rose {
	background: var(--pp-rose-50);
	color: var(--pp-rose-600);
}

.sbg-pp-photo--hero-groupee.wp-block-image img {
	height: 520px;
	object-position: 62% center;
}

.sbg-pp-invite.wp-block-group,
.sbg-pp-conditions.wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border-radius: var(--pp-r-lg);
	background: var(--pp-pine-50);
}

.sbg-pp-invite > p {
	font-size: 17px;
	line-height: 1.6;
}

/* L'encart des conditions s'aligne sur la carte de gauche, sous le titre, quel
   que soit le nombre de lignes du titre : la pile de gauche s'efface
   (`display: contents`) et ses deux enfants prennent chacun une rangée de la
   grille, l'encart se loge à côté de la seconde. */
.sbg-pp-duo--tarifs.wp-block-group {
	grid-template-areas:
		"titre ."
		"invite conditions";
	row-gap: 24px;
}

.sbg-pp-duo--tarifs > .sbg-pp-pile--tarifs.wp-block-group {
	display: contents;
}

.sbg-pp-pile--tarifs > .sbg-pp-titre {
	grid-area: titre;
}

.sbg-pp-pile--tarifs > .sbg-pp-invite.wp-block-group {
	grid-area: invite;
	align-self: start;
}

.sbg-pp-conditions.wp-block-group {
	grid-area: conditions;
	gap: 18px;
}

.sbg-pp-conditions h3 {
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--pp-pine);
}

ul.sbg-pp-conditions__liste {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 15px;
	line-height: 1.5;
}

.sbg-pp-conditions__liste strong {
	display: block;
	margin-bottom: 2px;
	font-weight: 700;
	color: var(--pp-pine);
}

.sbg-pp-photo--pros.wp-block-image img {
	height: 400px;
}

/* ==================================================================
   11. Voir plus
   ==================================================================
   L'ancien texte de la page, gardé pour le référencement : replié par
   défaut, en petit, sous la dernière bande. */

.sbg-pp-sec--plus.sbg-pp-sec {
	padding-block: 36px;
	border-top: 1px solid var(--pp-ligne);
}

.sbg-pp-sec--plus > * {
	max-width: 760px;
}

details.sbg-pp-plus {
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

details.sbg-pp-plus > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	color: var(--pp-pine);
	cursor: pointer;
	list-style: none;
}

details.sbg-pp-plus > summary::-webkit-details-marker {
	display: none;
}

details.sbg-pp-plus > summary::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	border: 0;
	background-color: currentColor;
	transform: rotate(90deg);
	transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	-webkit-mask: var(--pp-i-chevron-right) center / contain no-repeat;
	mask: var(--pp-i-chevron-right) center / contain no-repeat;
}

details.sbg-pp-plus[open] > summary::after {
	transform: rotate(-90deg);
}

details.sbg-pp-plus[open] > summary {
	margin-bottom: 20px;
}

details.sbg-pp-plus > :not(summary) {
	max-width: none;
	padding: 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pp-gris);
}

details.sbg-pp-plus > :not(summary) + :not(summary) {
	margin-top: 12px;
}

details.sbg-pp-plus > :not(summary) + h2 {
	margin-top: 32px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;
	color: var(--pp-pine);
}

details.sbg-pp-plus > :not(summary) + h3 {
	margin-top: 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-transform: none;
	color: var(--pp-encre);
}

details.sbg-pp-plus > :is(ul, ol).wp-block-list {
	padding-inline-start: 1.3em;
	list-style: revert;
}

details.sbg-pp-plus li + li {
	margin-top: 4px;
}

details.sbg-pp-plus code {
	font-size: 0.9em;
	word-break: break-all;
}

/* ==================================================================
   12. Adaptations
   ================================================================== */

@media (max-width: 1080px) {

	.sbg-pp-duo--photo { --pp-cols: 360px minmax(0, 1fr); --pp-gap: 40px; }
	.sbg-pp-duo--formulaire { --pp-cols: minmax(0, 1fr) minmax(0, 1.1fr); --pp-gap: 40px; }
	.sbg-pp-duo--hero-groupee { --pp-cols: minmax(0, 1fr) 400px; --pp-gap: 40px; }

	.sbg-pp-photo--portrait.wp-block-image img {
		width: 100%;
	}
}

@media (max-width: 900px) {

	.sbg-pp-sec.sbg-pp-sec {
		padding-block: 64px;
	}

	.sbg-pp-duo.wp-block-group {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		align-items: start;
	}

	.sbg-pp-entete.wp-block-group,
	.sbg-pp-alt.wp-block-group,
	.sbg-pp-sec--pin .sbg-pp-alt.wp-block-group {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	p.sbg-pp-intro {
		max-width: none;
	}

	.sbg-pp-photo--portrait.wp-block-image img,
	.sbg-pp-photo--hero-groupee.wp-block-image img,
	.sbg-pp-photo--pros.wp-block-image img {
		height: 360px;
	}

	/* La bannière de la campagne : la photo, puis la carte de suivi qui la
	   chevauche, dans le flux. */
	.sbg-pp-hero-media.wp-block-group {
		height: auto;
	}

	.sbg-pp-photo--hero-campagne.wp-block-image {
		position: static;
		width: 100%;
		height: 320px;
	}

	.sbg-pp-hero-media > .sbg-pp-suivi {
		position: relative;
		width: min(360px, calc(100% - 32px));
		margin: -72px 0 0 16px;
	}

	.sbg-pp-duo--tarifs.wp-block-group {
		grid-template-areas:
			"titre"
			"invite"
			"conditions";
	}
}

@media (max-width: 700px) {

	.sbg-pp-sec.sbg-pp-sec {
		gap: 28px;
		padding-block: 56px;
	}

	.sbg-pp-sec--bande.sbg-pp-sec { padding-block: 24px; }
	.sbg-pp-sec--serre.sbg-pp-sec,
	.sbg-pp-sec--y64.sbg-pp-sec { padding-block: 44px; }
	.sbg-pp-sec--plus.sbg-pp-sec { padding-block: 28px; }

	/* La bannière de la page pilier : la photo reste visible au-dessus de
	   la carte, qui prend toute la largeur. */
	.sbg-pp-hero.wp-block-cover {
		min-height: 0;
		padding: 200px 16px 24px;
	}

	.sbg-pp-hero__carte.wp-block-group {
		gap: 16px;
		padding: 28px 22px;
	}

	h1.sbg-pp-h1 { font-size: 30px; line-height: 1.1; }
	h1.sbg-pp-h1--grand { font-size: 31px; }
	.sbg-pp-titre h2 { font-size: 24px; }
	h2.sbg-pp-h2-fort { font-size: 29px; }
	h2.sbg-pp-h2-fort--moyen { font-size: 25px; }
	h2.sbg-pp-h2-bande { font-size: 21px; }
	p.sbg-pp-chapo { font-size: 17px; }

	.sbg-pp-boutons.wp-block-buttons > .wp-block-button,
	.sbg-pp-boutons.wp-block-buttons .wp-block-button__link {
		width: 100%;
	}

	.sbg-pp-formule.wp-block-group,
	.sbg-pp-simulateur,
	.sbg-pp-form.wp-block-group,
	.sbg-pp-encart.wp-block-group,
	.sbg-pp-memo.wp-block-group,
	.sbg-pp-invite.wp-block-group,
	.sbg-pp-conditions.wp-block-group,
	.sbg-pp-option.wp-block-group,
	.sbg-pp-role.wp-block-group {
		padding: 26px 22px;
	}

	.sbg-pp-formule h3 { font-size: 23px; }
	.sbg-pp-montant > p.sbg-pp-montant__chiffre { font-size: 30px; }
	.sbg-pp-zero > p.sbg-pp-zero__chiffre { font-size: 34px; }
	.sbg-pp-simulateur__total output { font-size: 36px; }

	/* Le comparatif défile de côté plutôt que d'écraser ses colonnes. */
	.sbg-pp-compare table {
		min-width: 640px;
	}

	.sbg-pp-compare :is(thead th, tbody th, tbody td) {
		padding: 14px 16px;
	}

	.sbg-pp-compare thead th {
		font-size: 15px;
	}

	.sbg-pp-calendrier > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	figure.sbg-pp-barres {
		padding: 24px 18px 20px;
	}

	.sbg-pp-barres__graphe,
	.sbg-pp-barres__axe {
		gap: 8px;
	}

	.sbg-pp-barres__graphe {
		height: 240px;
	}

	.sbg-pp-barres__valeur {
		font-size: 16px;
	}

	.sbg-pp-barres__axe > span {
		font-size: 11px;
	}

	.sbg-pp-form .sbg-form {
		grid-template-columns: minmax(0, 1fr);
	}

	.sbg-pp-form .sbg-form > .sbg-form__champ--demi {
		grid-column: 1 / -1;
	}

	.sbg-pp-exemples > li {
		padding: 12px 16px;
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.sbg-pp-sec *,
	.sbg-pp-hero * {
		transition: none !important;
	}
}