/* WS Popups - rendu public des popups. Le meme fichier sert l'apercu de l'editeur
   (apercu.css y remet les popups en position absolue dans l'ecran reduit). Copie
   a la lettre de la maquette validee. */
.wspp {
	--wspp-rayon: 12px; --wspp-rayon-bouton: 8px;
	position: fixed; z-index: 99990; background-color: var(--wspp-fond); color: var(--wspp-texte);
	font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	border-radius: var(--wspp-rayon); box-shadow: 0 18px 50px rgba(15,23,42,.22); overflow: hidden;
	animation: wspp-entree .35s ease both;
}
.wspp--coins-arrondi { --wspp-rayon: 22px; }
.wspp--coins-droit { --wspp-rayon: 0; }
.wspp--bouton-droit { --wspp-rayon-bouton: 0; }
.wspp--bouton-pilule { --wspp-rayon-bouton: 999px; }
.wspp__voile { position: fixed; inset: 0; z-index: 99989; background: rgba(15,23,42,.5); animation: wspp-fondu .35s ease both; }
.wspp__fermer {
	position: absolute; top: 10px; right: 10px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center;
	border: 0; border-radius: 50%; background: transparent; color: var(--wspp-croix); cursor: pointer; font-size: 22px; line-height: 1;
}
.wspp__fermer:hover { background: rgba(127,127,127,.15); }

/* Protection contre les styles du theme : ils imposent souvent leur police, leur taille, leur fond
   et leur survol a tous les boutons et liens (vu le 2026-10-23 sur un theme Blocksy : croix a 15 px,
   police du theme sur le bouton). Memes valeurs que ci-dessus, en plus precis ; place AVANT les
   regles de format pour que celles-ci (barres, notice compacte) gardent la main. */
.wspp .wspp__fermer, .wspp .wspp__bouton, .wspp .wspp__form input, .wspp .wspp__etiquette {
	font-family: inherit; font-style: normal; letter-spacing: normal; text-transform: none; text-shadow: none;
}
.wspp .wspp__fermer {
	width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; box-shadow: none;
	background: transparent; color: var(--wspp-croix); font-size: 22px; font-weight: 400; line-height: 1;
}
.wspp .wspp__fermer:hover, .wspp .wspp__fermer:focus { background: rgba(127,127,127,.15); color: var(--wspp-croix); }
/* La croix est dessinee par deux traits (le signe x de la police tombe sous le centre et change d'un
   theme a l'autre) : toujours au centre du rond. Le signe reste dans le HTML pour les lecteurs d'ecran. */
.wspp .wspp__fermer { font-size: 0; }
.wspp .wspp__fermer::before, .wspp .wspp__fermer::after { content: ""; grid-area: 1 / 1; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.wspp .wspp__fermer::after { transform: rotate(-45deg); }
.wspp--compacte .wspp__fermer::before, .wspp--compacte .wspp__fermer::after { width: 13px; }
.wspp .wspp__bouton { margin: 0; border: 0; box-shadow: none; text-decoration: none; font-weight: 600; }
.wspp .wspp__bouton:hover, .wspp .wspp__bouton:focus { background: var(--wspp-bouton); color: var(--wspp-bouton-texte); text-decoration: none; }
.wspp .wspp__titre, .wspp .wspp__texte, .wspp .wspp__appui { font-family: inherit; letter-spacing: normal; text-transform: none; }
.wspp__boite { position: relative; display: flex; flex-direction: column; height: 100%; }
.wspp__image { position: relative; overflow: hidden; flex: none; }
.wspp__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.wspp__corps { position: relative; z-index: 2; padding: 30px 32px 28px; }
.wspp__etiquette { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .02em; background: var(--wspp-bouton); color: var(--wspp-bouton-texte); }
.wspp__titre { margin: 0 0 8px; font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--wspp-titre); }
.wspp__texte { margin: 0 0 18px; }
/* Texte mis en forme dans l'editeur : gras, italique, souligne, listes, liens, alignement. */
.wspp .wspp__texte strong { font-weight: 700; }
.wspp .wspp__texte em { font-style: italic; }
.wspp .wspp__texte u { text-decoration: underline; }
.wspp .wspp__texte a { color: inherit; text-decoration: underline; }
.wspp .wspp__texte ul, .wspp .wspp__texte ol { margin: .3em 0; padding: 0; list-style-position: inside; }
.wspp .wspp__texte ul { list-style-type: disc; }
.wspp .wspp__texte ol { list-style-type: decimal; }
.wspp .wspp__texte li { margin: 0; padding: 0; }
.wspp .wspp__texte--gauche { text-align: left; }
.wspp .wspp__texte--centre { text-align: center; }
.wspp .wspp__texte--droite { text-align: right; }
.wspp .wspp__texte--justifie { text-align: justify; }
.wspp__bouton {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; cursor: pointer;
	border-radius: var(--wspp-rayon-bouton); background: var(--wspp-bouton); color: var(--wspp-bouton-texte); font-weight: 600; font-size: 15px; text-decoration: none;
}
.wspp__appui { margin: 12px 0 0; font-size: 13px; opacity: .75; }
.wspp__form { display: grid; gap: 8px; }
.wspp__form input[type=email], .wspp__form input[type=text] {
	min-height: 44px; padding: 0 14px; border: 1px solid rgba(127,127,127,.4); border-radius: var(--wspp-rayon-bouton);
	background: #fff; color: #111827; font-size: 15px; width: 100%;
}
.wspp__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; opacity: .85; }
.wspp__consent input { margin-top: 2px; }
.wspp__merci { display: none; }

/* Image en fond : voile pour la lecture */
.wspp--img-fond { background-size: cover; background-position: var(--wspp-pos, 50% 50%); }
.wspp--etroit.wspp--img-fond { background-position: var(--wspp-pos-mobile, 50% 50%); }
.wspp--img-fond::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wspp-voile-couleur); opacity: var(--wspp-voile); }

/* Format : popup centrée */
/* Trop haute pour l'écran : elle défile à l'intérieur au lieu d'être coupée. */
.wspp--modale { left: 50%; top: 50%; width: min(520px, calc(100% - 32px)); max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; transform: translate(-50%, -50%); text-align: center; }
.wspp--modale .wspp__form { max-width: 380px; margin: 0 auto; }
.wspp--modale.wspp--img-cote { width: min(800px, calc(100% - 32px)); text-align: left; }
.wspp--modale.wspp--img-cote .wspp__form { margin: 0; }
.wspp--img-haut .wspp__image { height: var(--wspp-img-hauteur, 200px); }
.wspp--img-cote .wspp__boite { flex-direction: row; }
.wspp--img-cote .wspp__image { width: var(--wspp-img-largeur, 42%); min-height: 280px; }
.wspp--img-cote .wspp__corps { flex: 1; align-self: center; }
.wspp--img-fond.wspp--modale .wspp__corps { padding: 56px 40px; }

/* Format : barres */
.wspp--barre-haut, .wspp--barre-bas { left: 0; right: 0; border-radius: 0; box-shadow: 0 2px 10px rgba(15,23,42,.15); }
.wspp--barre-haut { top: 0; animation-name: wspp-haut; }
.wspp--barre-bas { bottom: 0; animation-name: wspp-bas; }
.wspp--barre-haut .wspp__corps, .wspp--barre-bas .wspp__corps { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 56px 10px 20px; flex-wrap: wrap; text-align: center; }
.wspp--barre-haut .wspp__titre, .wspp--barre-bas .wspp__titre { margin: 0; font-size: 15px; }
.wspp--barre-haut .wspp__texte, .wspp--barre-bas .wspp__texte { margin: 0; font-size: 14px; }
.wspp--barre-haut .wspp__bouton, .wspp--barre-bas .wspp__bouton { min-height: 34px; padding: 0 16px; font-size: 14px; }
.wspp--barre-haut .wspp__fermer, .wspp--barre-bas .wspp__fermer { top: 50%; transform: translateY(-50%); }
.wspp--barre-haut .wspp__form, .wspp--barre-bas .wspp__form, .wspp--compacte .wspp__form { grid-template-columns: minmax(150px, 220px) auto; align-items: center; }
.wspp--barre-haut .wspp__form input, .wspp--barre-bas .wspp__form input { min-height: 34px; font-size: 14px; }
.wspp--barre-haut .wspp__consent, .wspp--barre-bas .wspp__consent, .wspp--compacte .wspp__consent { grid-column: 1 / -1; font-size: 11px; }

/* Format : bandeau flottant */
.wspp--bandeau { left: 50%; bottom: 24px; width: min(760px, calc(100% - 32px)); transform: translateX(-50%); animation-name: wspp-bandeau; }
.wspp--bandeau .wspp__corps { display: grid; grid-template-columns: 1fr auto; gap: 4px 24px; align-items: center; padding: 20px 56px 20px 26px; }
.wspp--bandeau .wspp__etiquette, .wspp--bandeau .wspp__titre, .wspp--bandeau .wspp__texte, .wspp--bandeau .wspp__appui { grid-column: 1; justify-self: start; }
.wspp--bandeau .wspp__titre { font-size: 20px; margin: 0; }
.wspp--bandeau .wspp__texte { margin: 0; }
.wspp--bandeau .wspp__corps > .wspp__bouton, .wspp--bandeau .wspp__corps > .wspp__form { grid-column: 2; grid-row: 1 / span 4; }
.wspp--bandeau .wspp__corps > .wspp__form { width: 260px; }
/* Avec une image de côté, il ne reste plus la place pour deux colonnes : l'action passe sous le texte. */
.wspp--bandeau.wspp--img-cote .wspp__corps { grid-template-columns: 1fr; }
.wspp--bandeau.wspp--img-cote .wspp__corps > .wspp__bouton, .wspp--bandeau.wspp--img-cote .wspp__corps > .wspp__form { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
.wspp--bandeau.wspp--img-cote .wspp__corps > .wspp__form { width: min(100%, 340px); }
.wspp--bandeau.wspp--img-cote .wspp__image { width: var(--wspp-img-largeur, 30%); min-height: 130px; }
.wspp--bandeau.wspp--img-haut .wspp__image { height: calc(var(--wspp-img-hauteur, 200px) * .6); }

/* Format : notice latérale */
.wspp--laterale { right: 20px; bottom: 20px; width: min(360px, calc(100% - 32px)); animation-name: wspp-cote; }
.wspp--laterale .wspp__corps { padding: 22px 24px 22px; }
.wspp--laterale .wspp__titre { font-size: 20px; }
.wspp--laterale .wspp__texte { font-size: 14px; margin-bottom: 14px; }
.wspp--laterale.wspp--img-haut .wspp__image { height: calc(var(--wspp-img-hauteur, 200px) * .75); }
.wspp--laterale.wspp--img-cote .wspp__image { width: var(--wspp-img-largeur, 36%); min-height: 200px; }
.wspp--laterale.wspp--img-cote { width: min(460px, calc(100% - 32px)); }

/* Format : notice compacte */
.wspp--compacte { left: 20px; bottom: 20px; width: min(320px, calc(100% - 32px)); animation-name: wspp-cote-g; }
.wspp--compacte .wspp__corps { padding: 14px 44px 14px 16px; }
.wspp--compacte .wspp__titre { font-size: 15px; margin: 0 0 2px; }
.wspp--compacte .wspp__texte { font-size: 13px; margin: 0 0 10px; }
.wspp--compacte .wspp__bouton { min-height: 32px; padding: 0 14px; font-size: 13px; }
.wspp--compacte .wspp__form input { min-height: 32px; font-size: 13px; }
.wspp--compacte .wspp__fermer { top: 6px; right: 6px; width: 28px; height: 28px; }

/* Petits écrans : l'image de côté passe au-dessus, les cartes prennent la largeur */
.wspp--etroit.wspp--img-cote .wspp__boite { flex-direction: column; }
.wspp--etroit.wspp--img-cote .wspp__image { width: 100%; min-height: 0; height: var(--wspp-img-hauteur-mobile, 170px); }
.wspp--etroit .wspp__image img { object-position: var(--wspp-pos-mobile) !important; }
.wspp--etroit.wspp--img-haut .wspp__image { height: var(--wspp-img-hauteur-mobile, 170px); }
.wspp--etroit.wspp--modale .wspp__corps { padding: 26px 22px 22px; }
.wspp--etroit.wspp--modale .wspp__titre { font-size: 22px; }
.wspp--etroit.wspp--bandeau { bottom: 12px; }
.wspp--etroit.wspp--bandeau .wspp__corps { grid-template-columns: 1fr; padding: 18px 48px 18px 18px; }
.wspp--etroit.wspp--bandeau .wspp__corps > .wspp__bouton, .wspp--etroit.wspp--bandeau .wspp__corps > .wspp__form { grid-column: 1; grid-row: auto; margin-top: 10px; width: 100%; }
.wspp--etroit.wspp--laterale, .wspp--etroit.wspp--compacte { left: 12px; right: 12px; bottom: 12px; width: auto; }
.wspp--etroit.wspp--barre-haut .wspp__corps, .wspp--etroit.wspp--barre-bas .wspp__corps { padding: 10px 46px 10px 14px; gap: 8px; }
.wspp--etroit .wspp__form { grid-template-columns: 1fr !important; }

@keyframes wspp-entree { from { opacity: 0; } }
@keyframes wspp-fondu { from { opacity: 0; } }
@keyframes wspp-haut { from { transform: translateY(-100%); } }
@keyframes wspp-bas { from { transform: translateY(100%); } }
@keyframes wspp-bandeau { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes wspp-cote { from { opacity: 0; transform: translateX(30px); } }
@keyframes wspp-cote-g { from { opacity: 0; transform: translateX(-30px); } }
.wspp--modale { animation-name: wspp-modale; }
@keyframes wspp-modale { from { opacity: 0; transform: translate(-50%, -46%); } }

@media (prefers-reduced-motion: reduce) {
	.wspp, .wspp__voile { animation: none !important; }
}

/* Les popups attendent cachees dans le pied de page ; certains themes redefinissent [hidden]. */
.wspp-racine[hidden] { display: none !important; }
/* Encart reserve a un appareil : regle en CSS, pour qu'il n'apparaisse jamais une fraction de seconde
   sur l'autre (meme seuil que front.js et l'apercu « Mobile »). */
@media (min-width: 601px) { .wspp-racine--seul-mobile { display: none !important; } }
@media (max-width: 600px) { .wspp-racine--seul-ordinateur { display: none !important; } }
/* Visite d'essai d'un encart : montre en bas de page, avec un peu d'air autour. */
.wspp-racine--essai { padding: 24px 16px; }
.wspp:focus { outline: none; }
.wspp :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Inscription : le piege a robots ne se voit pas ; le message prend la place du formulaire. */
.wspp .wspp__piege { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.wspp__message { margin: 10px 0 0; font-size: 14px; font-weight: 600; }
.wspp__message:empty { display: none; }
.wspp__message--erreur { color: #b32d2e; background: #fff; padding: 6px 10px; border-radius: 6px; font-weight: 500; }
.wspp__form[hidden] { display: none; }
.wspp--barre-haut .wspp__message, .wspp--barre-bas .wspp__message { margin: 0; }

/* Connecte, WordPress pose sa barre d'administration en haut (32 px, 46 px sur petit ecran) :
   la barre en haut se range dessous au lieu d'etre cachee (vu le 2026-10-23). */
body.admin-bar .wspp--barre-haut { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .wspp--barre-haut { top: 46px; }
}

/* Image entiere : la photo garde ses proportions (jamais rognee ni deformee) et la popup prend
   la hauteur qu'il faut. Sur le cote, l'image est centree dans sa colonne. */
/* Plus precis que les hauteurs fixees par format (bandeau, notice de cote, mobile), et place apres. */
.wspp.wspp--img-entiere .wspp__image { height: auto; min-height: 0; }
.wspp--img-entiere .wspp__image img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; }
.wspp--img-entiere.wspp--img-cote .wspp__image { display: flex; align-items: center; align-self: stretch; }
/* En haut, une photo en hauteur prendrait toute la popup et pousserait le texte (vu le 2026-10-29) :
   elle reste entiere mais ne depasse pas la hauteur reglee, centree sur la couleur de fond. */
.wspp--img-entiere.wspp--img-haut .wspp__image { display: flex; justify-content: center; }
.wspp--img-entiere.wspp--img-haut .wspp__image img { width: auto; max-width: 100%; max-height: var(--wspp-img-hauteur, 200px); }
.wspp--bandeau.wspp--img-entiere.wspp--img-haut .wspp__image img { max-height: calc(var(--wspp-img-hauteur, 200px) * .6); }
.wspp--laterale.wspp--img-entiere.wspp--img-haut .wspp__image img { max-height: calc(var(--wspp-img-hauteur, 200px) * .75); }
.wspp--etroit.wspp--img-entiere.wspp--img-haut .wspp__image img { max-height: var(--wspp-img-hauteur-mobile, 170px); }

/* Tablette et mobile reglees a part (vu le 2026-11-01 : une affiche sur le cote prenait tout l'ecran
   du telephone). Leurs hauteurs ne touchent jamais l'ordinateur. Tablette = 601 a 1024 px. */
.wspp--tablette.wspp--tablette-propre .wspp__image { --wspp-img-hauteur: var(--wspp-img-hauteur-tablette, 200px); }
.wspp--tablette.wspp--tablette-propre.wspp--img-entiere.wspp--img-cote .wspp__image,
.wspp--etroit.wspp--mobile-propre.wspp--img-entiere.wspp--img-cote .wspp__image { justify-content: center; }
.wspp--tablette.wspp--tablette-propre.wspp--img-entiere.wspp--img-cote .wspp__image img { width: auto; max-width: 100%; max-height: var(--wspp-img-hauteur-tablette, 200px); }
.wspp--etroit.wspp--mobile-propre.wspp--img-entiere.wspp--img-cote .wspp__image img { width: auto; max-width: 100%; max-height: var(--wspp-img-hauteur-mobile, 170px); }

/* Une image entiere tres haute (une affiche) ne doit jamais faire sortir la popup de l'ecran :
   comme la popup centree, bandeau et notices restent dans l'ecran et defilent a l'interieur. */
.wspp--bandeau, .wspp--laterale, .wspp--compacte { max-height: calc(100% - 40px); overflow-y: auto; overscroll-behavior: contain; }

/* Les champs ont une marge interieure : sans border-box, un champ a 100 % deborde du formulaire sur un
   theme qui ne pose pas box-sizing lui-meme (vu sur la maquette de l'encart, 2026-10-30). */
.wspp, .wspp *, .wspp *::before, .wspp *::after { box-sizing: border-box; }

/* Encart integre : pose dans la page par le code court, une ligne compacte comme les inscriptions de
   pied de page. Titre court + une phrase a gauche ; champ et bouton cote a cote a droite ; consentement
   en petit. Pas d'image, ni croix, ni voile, ni animation. Il s'adapte a la largeur de l'endroit ou il
   est pose (container query) : pleine ligne, colonne de pied de page, telephone. */
.wspp.wspp--encart { position: relative; z-index: auto; width: 100%; max-width: 860px; margin: 0 auto; box-shadow: none; animation: none; text-align: left; container-type: inline-size; }
.wspp--encart .wspp__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); grid-template-rows: auto 1fr; gap: 2px 28px; align-items: start; padding: 18px 22px; }
.wspp--encart .wspp__titre, .wspp--encart .wspp__texte { grid-column: 1; justify-self: stretch; }
.wspp--encart .wspp__titre { margin: 0; font-size: 16px; line-height: 1.3; }
.wspp--encart .wspp__texte { margin: 0; font-size: 13px; line-height: 1.45; }
.wspp--encart .wspp__corps > .wspp__form, .wspp--encart .wspp__corps > .wspp__bouton { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.wspp--encart .wspp__corps > .wspp__bouton { justify-self: end; align-self: center; }
.wspp--encart .wspp__form { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.wspp--encart .wspp__form input[type=email] { min-height: 38px; padding: 0 12px; font-size: 13.5px; }
.wspp--encart .wspp__bouton { min-height: 38px; padding: 0 16px; font-size: 13.5px; white-space: nowrap; }
.wspp--encart .wspp__consent { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.35; }
.wspp--encart .wspp__message { grid-column: 1 / -1; }
@container (max-width: 560px) {
	.wspp--encart .wspp__corps { grid-template-columns: 1fr; padding: 16px; }
	.wspp--encart .wspp__corps > .wspp__form, .wspp--encart .wspp__corps > .wspp__bouton { grid-column: 1; grid-row: auto; margin-top: 10px; justify-self: start; }
	.wspp--encart .wspp__corps > .wspp__form { justify-self: stretch; }
}
@container (max-width: 300px) {
	.wspp--encart .wspp__form { grid-template-columns: 1fr; }
}

/* Encart v2 (maquette maquette-encart-v2.html validee le 2026-11-01) : disposition en colonne, image
   au-dessus ou a cote, titre et texte facultatifs. Place apres les regles d'image des popups. */
/* Sans titre ni texte : le champ et le bouton prennent toute la place, centres (plus de colonne vide a gauche). */
.wspp--encart.wspp--sans-texte .wspp__corps { grid-template-columns: minmax(0, 520px); justify-content: center; }
.wspp--encart.wspp--sans-texte .wspp__corps > .wspp__form, .wspp--encart.wspp--sans-texte .wspp__corps > .wspp__bouton { grid-column: 1; grid-row: auto; justify-self: stretch; }
.wspp--encart.wspp--sans-texte .wspp__corps > .wspp__bouton { justify-self: center; }

/* Disposition « En colonne » : une carte etroite pour une barre laterale. Tout s'empile et se centre. */
.wspp.wspp--encart-colonne { max-width: 360px; text-align: center; }
.wspp--encart-colonne .wspp__corps { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px; }
.wspp--encart-colonne .wspp__titre { font-size: 18px; }
.wspp--encart-colonne .wspp__texte { font-size: 13.5px; }
.wspp--encart-colonne .wspp__corps > .wspp__form, .wspp--encart-colonne .wspp__corps > .wspp__bouton { grid-column: 1; grid-row: auto; margin-top: 10px; justify-self: stretch; }
.wspp--encart-colonne .wspp__form { grid-template-columns: minmax(0, 1fr); }
.wspp--encart-colonne .wspp__bouton { width: 100%; }
.wspp--encart-colonne .wspp__consent { text-align: left; }

/* Image de l'encart : toujours entiere (jamais rognee ni deformee), sa taille se regle. */
/* Plus precis que les regles d'image des popups (largeur en %, hauteur minimale de 280 px). */
.wspp.wspp--encart .wspp__image { display: flex; justify-content: center; align-items: center; width: auto; height: auto; min-height: 0; overflow: visible; }
.wspp--encart .wspp__image img { position: static; inset: auto; display: block; height: auto; object-fit: contain; }
/* Au-dessus : une banniere centree, plafonnee en hauteur. */
.wspp--encart.wspp--img-haut .wspp__image { padding: 16px 16px 0; }
.wspp--encart.wspp--img-haut .wspp__image img { width: auto; max-width: 100%; max-height: var(--wspp-img-taille, 140px); }
/* A cote : une vignette a gauche, de la largeur reglee ; le reste garde sa disposition. */
.wspp--encart.wspp--img-cote .wspp__boite { flex-direction: row; align-items: center; }
.wspp--encart.wspp--img-cote .wspp__image { padding: 16px 0 16px 16px; }
.wspp--encart.wspp--img-cote .wspp__image img { width: var(--wspp-img-taille, 140px); max-width: 40cqi; }
.wspp--encart.wspp--img-cote .wspp__corps { flex: 1; min-width: 0; }
/* Encart etroit (une colonne, ou une bande sur mobile) : l'image a cote ne prend que la hauteur du titre
   et du texte ; le champ et le bouton gardent toute la largeur en dessous (sinon ils sont ecrases). */
.wspp--encart-colonne.wspp--img-cote { text-align: left; }
@container (max-width: 560px) {
	.wspp--encart.wspp--img-cote .wspp__boite { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 18px; }
	.wspp--encart.wspp--img-cote .wspp__corps { display: contents; }
	.wspp--encart.wspp--img-cote .wspp__image { grid-column: 1; grid-row: 1 / span 2; padding: 0; }
	.wspp--encart.wspp--img-cote .wspp__image img { width: min(var(--wspp-img-taille, 140px), 120px); max-width: none; }
	.wspp--encart.wspp--img-cote .wspp__titre, .wspp--encart.wspp--img-cote .wspp__texte { grid-column: 2; align-self: end; }
	.wspp--encart.wspp--img-cote .wspp__texte { align-self: start; }
	.wspp--encart.wspp--img-cote .wspp__corps > .wspp__form, .wspp--encart.wspp--img-cote .wspp__corps > .wspp__bouton { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; justify-self: stretch; }
	.wspp--encart.wspp--img-cote .wspp__form { grid-template-columns: minmax(0, 1fr); }
	/* Sans titre ni texte : l'image a gauche, le champ, le bouton et la case a droite. */
	.wspp--encart.wspp--img-cote.wspp--sans-texte .wspp__image { grid-row: 1; }
	.wspp--encart.wspp--img-cote.wspp--sans-texte .wspp__image img { width: min(var(--wspp-img-taille, 140px), 100px); }
	.wspp--encart.wspp--img-cote.wspp--sans-texte .wspp__corps > .wspp__form, .wspp--encart.wspp--img-cote.wspp--sans-texte .wspp__corps > .wspp__bouton { grid-column: 2; grid-row: 1; margin-top: 0; }
}

/* reCAPTCHA v3 : la mention de Google sous chaque formulaire remplace son badge flottant (cache seulement
   quand la mention est presente, comme Google le permet). */
.wspp .wspp__recaptcha { margin: 8px 0 0; font-size: 10px; line-height: 1.4; opacity: .7; }
.wspp .wspp__recaptcha a { color: inherit; text-decoration: underline; }
.wspp--encart .wspp__recaptcha { grid-column: 1 / -1; margin-top: 6px; font-size: 9.5px; }
.wspp--barre-haut .wspp__recaptcha, .wspp--barre-bas .wspp__recaptcha { margin: 0; flex-basis: 100%; }
.wspp-recaptcha .grecaptcha-badge { visibility: hidden; }

/* Fermeture automatique apres l'inscription : un fondu court avant de partir. */
.wspp.wspp--disparait, .wspp__voile.wspp--disparait { opacity: 0; transition: opacity .3s ease; }
@media (prefers-reduced-motion: reduce) {
	.wspp.wspp--disparait, .wspp__voile.wspp--disparait { transition: none; }
}