/* =========================================================================
   UCAH — MES ENVIES MES HERBIERS · CHARTE V2 (2026)
   -------------------------------------------------------------------------
   /wp-content/themes/Impreza-child/assets/css/v2.css
   Chargé uniquement par le mu-plugin « MEM — Bascule V2 » :
   aperçu privé ?v2=… ou activation globale. Jamais chargé sinon.

   Source : UCAH — Charte graphique (Vendredi), p.13 couleurs, p.22-23 typo.
   ========================================================================= */


/* =========================================================================
   1. TYPOGRAPHIE — ROWDY
   Fichiers sous-ensemblés (latin + français) dans ../fonts/
   ⚠ Voir la note de licence dans LISEZ-MOI.md avant mise en ligne publique.
   ========================================================================= */

@font-face {
	font-family: "Rowdy";
	src: url("../fonts/Rowdy-Light.woff") format("woff"),
	     url("../fonts/Rowdy-Light.ttf")  format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Rowdy";
	src: url("../fonts/Rowdy-Regular.woff") format("woff"),
	     url("../fonts/Rowdy-Regular.ttf")  format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Rowdy";
	src: url("../fonts/Rowdy-Bold.woff") format("woff"),
	     url("../fonts/Rowdy-Bold.ttf")  format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* =========================================================================
   2. PALETTE — valeurs exactes de la charte (p.13)
   ========================================================================= */

:root {

	/* --- Couleurs principales ------------------------------------------ */
	--ucah-bordeaux:  #4f1422;   /* Pantone 7643C — l'encre du système */
	--ucah-orange:    #ff8d4b;   /* Pantone 150C */
	--ucah-bonbon:    #ff83c7;   /* Pantone 230C */
	--ucah-pomme:     #81db90;   /* Pantone 352C */

	/* --- Couleurs secondaires (familles de commerces, p.21) ------------- */
	--ucah-sunshine:  #fcd06b;   /* Tourisme, hébergement & voyage */
	--ucah-corail:    #ff4f58;   /* Mode, textile, accessoires */
	--ucah-sapin:     #008571;   /* Maison, habitat & travaux */
	--ucah-lavande:   #a788db;   /* Culture, loisirs, médias & papeterie */
	--ucah-lagon:     #30d3d9;   /* Automobile & mobilité */
	--ucah-cloud:     #61abff;   /* Services aux entreprises */

	/* --- Dérivées lisibles ---------------------------------------------
	   Aucune teinte de marque ne passe le contraste AA en TEXTE sur blanc
	   (bonbon 2,25:1 · orange 2,29:1 · pomme 1,68:1 — il en faut 4,5:1).
	   Ces deux variantes gardent la teinte et deviennent lisibles.
	   Les teintes de marque restent utilisées telles quelles en APLAT.     */
	--ucah-bonbon-txt: #d60075;  /* bonbon lisible sur blanc — 5,10:1 */
	--ucah-orange-txt: #c0480a;  /* orange lisible sur blanc — 4,63:1 */

	/* --- Neutres --------------------------------------------------------- */
	--ucah-blanc:     #ffffff;
	--ucah-creme:     #f7f3f4;   /* fond de section alternée, teinté bordeaux */
	--ucah-filet:     #e6dcdf;   /* bordures */
	--ucah-attenue:   #8a7278;   /* texte atténué — 4,58:1 sur blanc */

	/* --- Typographie ------------------------------------------------------ */
	--ucah-font:      "Rowdy", Verdana, Geneva, sans-serif;
	--ucah-tracking:  0.075em;   /* interlettrage 75 des sur-titres (p.23) */
}


/* =========================================================================
   3. MAPPING VERS LES 72 VARIABLES IMPREZA
   Règle du système : le bordeaux est l'encre, les 4 teintes sont des fonds.
   Bordeaux sur orange 6,30:1 · sur bonbon 6,41:1 · sur pomme 8,57:1.
   Blanc sur bordeaux 14,43:1.
   ========================================================================= */

:root {

	/* --- Entête principale : fond blanc, encre bordeaux ------------------ */
	--color-header-middle-bg:                  var(--ucah-blanc);
	--color-header-middle-bg-grad:             var(--ucah-blanc);
	--color-header-middle-text:                var(--ucah-bordeaux);
	--color-header-middle-text-hover:          var(--ucah-bonbon-txt);

	/* --- Entête en surimpression (pages à bandeau) ----------------------- */
	--color-header-transparent-bg:             transparent;
	--color-header-transparent-bg-grad:        transparent;
	/* Depuis le passage du héros en aplat clair (section 10), l'entête en
	   surimpression surplombe toujours du clair : son encre passe en
	   bordeaux — 8,57:1 sur pomme, 14,4:1 sur blanc. */
	--color-header-transparent-text:           var(--ucah-bordeaux);
	--color-header-transparent-text-hover:     var(--ucah-bonbon-txt);

	/* --- Barre supérieure : bandeau bordeaux ----------------------------- */
	--color-chrome-toolbar:                    var(--ucah-bordeaux);
	--color-header-top-bg:                     var(--ucah-bordeaux);
	--color-header-top-bg-grad:                var(--ucah-bordeaux);
	--color-header-top-text:                   var(--ucah-blanc);
	--color-header-top-text-hover:             var(--ucah-bonbon);
	--color-header-top-transparent-bg:         rgba(79, 20, 34, 0.35);
	--color-header-top-transparent-bg-grad:    rgba(79, 20, 34, 0.35);
	--color-header-top-transparent-text:       rgba(255, 255, 255, 0.75);
	--color-header-top-transparent-text-hover: var(--ucah-blanc);

	/* --- Contenu, schéma par défaut (fond clair) -------------------------- */
	--color-content-bg:                        var(--ucah-blanc);
	--color-content-bg-grad:                   var(--ucah-blanc);
	--color-content-bg-alt:                    var(--ucah-creme);
	--color-content-bg-alt-grad:               var(--ucah-creme);
	--color-content-border:                    var(--ucah-filet);
	--color-content-heading:                   var(--ucah-bordeaux);
	--color-content-heading-grad:              var(--ucah-bordeaux);
	--color-content-text:                      var(--ucah-bordeaux);
	--color-content-link:                      var(--ucah-bonbon-txt);
	--color-content-link-hover:                var(--ucah-bordeaux);
	--color-content-primary:                   var(--ucah-bordeaux);
	--color-content-primary-grad:              var(--ucah-bordeaux);
	--color-content-primary-faded:             rgba(79, 20, 34, 0.10);
	--color-content-secondary:                 var(--ucah-bonbon-txt);
	--color-content-secondary-grad:            var(--ucah-bonbon-txt);
	--color-content-faded:                     var(--ucah-attenue);
	--color-content-overlay:                   rgba(79, 20, 34, 0.72);
	--color-content-overlay-grad:              linear-gradient(135deg, rgba(79,20,34,.85), rgba(79,20,34,.55));

	/* --- Contenu, schéma alternatif : la bande bordeaux -------------------
	   C'est le schéma « section sombre » qu'on retrouve sur tout le site.  */
	--color-alt-content-bg:                    var(--ucah-bordeaux);
	--color-alt-content-bg-grad:               var(--ucah-bordeaux);
	--color-alt-content-bg-alt:                #3d0f1a;
	--color-alt-content-bg-alt-grad:           #3d0f1a;
	--color-alt-content-border:                rgba(255, 255, 255, 0.20);
	--color-alt-content-heading:               var(--ucah-blanc);
	--color-alt-content-heading-grad:          var(--ucah-blanc);
	--color-alt-content-text:                  rgba(255, 255, 255, 0.92);
	--color-alt-content-link:                  var(--ucah-bonbon);
	--color-alt-content-link-hover:            var(--ucah-orange);
	--color-alt-content-primary:               var(--ucah-orange);
	--color-alt-content-primary-grad:          var(--ucah-orange);
	--color-alt-content-secondary:             var(--ucah-bonbon);
	--color-alt-content-secondary-grad:        var(--ucah-bonbon);
	--color-alt-content-faded:                 rgba(255, 255, 255, 0.62);
	--color-alt-content-overlay:               rgba(79, 20, 34, 0.80);
	--color-alt-content-overlay-grad:          linear-gradient(135deg, rgba(79,20,34,.9), rgba(255,131,199,.35));

	/* --- Pied de page : bordeaux ------------------------------------------ */
	--color-footer-bg:                         var(--ucah-bordeaux);
	--color-footer-bg-grad:                    var(--ucah-bordeaux);
	--color-footer-bg-alt:                     #3d0f1a;
	--color-footer-bg-alt-grad:                #3d0f1a;
	--color-footer-border:                     rgba(255, 255, 255, 0.18);
	--color-footer-heading:                    var(--ucah-bonbon);
	--color-footer-heading-grad:               var(--ucah-bonbon);
	--color-footer-text:                       rgba(255, 255, 255, 0.80);
	--color-footer-link:                       rgba(255, 255, 255, 0.92);
	--color-footer-link-hover:                 var(--ucah-bonbon);

	/* --- Sous-pied -------------------------------------------------------- */
	--color-subfooter-bg:                      #3d0f1a;
	--color-subfooter-bg-grad:                 #3d0f1a;
	--color-subfooter-bg-alt:                  var(--ucah-bordeaux);
	--color-subfooter-bg-alt-grad:             var(--ucah-bordeaux);
	--color-subfooter-border:                  rgba(255, 255, 255, 0.14);
	--color-subfooter-heading:                 var(--ucah-bonbon);
	--color-subfooter-heading-grad:            var(--ucah-bonbon);
	--color-subfooter-text:                    rgba(255, 255, 255, 0.70);
	--color-subfooter-link:                    rgba(255, 255, 255, 0.85);
	--color-subfooter-link-hover:              var(--ucah-bonbon);

	/* --- Typographie Impreza ----------------------------------------------
	   Charte p.23 : sur-titre = Light capitales interlettrées ;
	   titre = Bold ; texte courant = Light.                                 */
	--font-family:        var(--ucah-font);
	--font-weight:        300;
	--font-size:          18px;

	--h1-font-family:     var(--ucah-font);
	--h2-font-family:     var(--ucah-font);
	--h3-font-family:     var(--ucah-font);
	--h4-font-family:     var(--ucah-font);
	--h5-font-family:     var(--ucah-font);
	--h6-font-family:     var(--ucah-font);

	--h1-font-weight:     700;
	--h2-font-weight:     700;
	--h3-font-weight:     700;
	--h4-font-weight:     700;
	--h5-font-weight:     700;
	--h6-font-weight:     700;

	--h1-bold-font-weight: 700;
	--h2-bold-font-weight: 700;
	--h3-bold-font-weight: 700;

	/* Rowdy Bold est déjà très présent : on retire les capitales forcées
	   héritées de Teko/Oswald, la charte titre en Maj & minuscules.        */
	--h1-text-transform:  none;
	--h2-text-transform:  none;
	--h3-text-transform:  none;
}


/* =========================================================================
   4. NEUTRALISATION DES POLICES FORCÉES
   Le site force Oswald / Poppins / Abril Fatface en !important depuis
   « Options du thème → Code personnalisé ». Ces règles gagnent contre les
   variables : il faut les reprendre explicitement.
   ========================================================================= */

.mem-v2,
.mem-v2 body,
.mem-v2 h1, .mem-v2 h2, .mem-v2 h3, .mem-v2 h4, .mem-v2 h5, .mem-v2 h6,
.mem-v2 .w-post-elm,
.mem-v2 .w-btn,
.mem-v2 .us-btn-style_1,
.mem-v2 .us-btn-style_2,
.mem-v2 .w-nav-item,
.mem-v2 input, .mem-v2 select, .mem-v2 textarea, .mem-v2 button,
.mem-v2 .gform_wrapper *,
.mem-v2 .ucah-cartographie *, .mem-v2 .ucah-cheques * {
	font-family: var(--ucah-font) !important;
}

/* Sur-titres : Rowdy Light, capitales, interlettrage 75 (p.23) */
.mem-v2 .w-text.type_h6,
.mem-v2 .g-preloader + .w-text,
.mem-v2 .ucah-surtitre {
	font-weight: 300 !important;
	text-transform: uppercase;
	letter-spacing: var(--ucah-tracking);
}


/* =========================================================================
   5. BOUTONS
   Maquettes client : CTA orange, texte bordeaux. Contraste 6,30:1.
   ========================================================================= */

.mem-v2 .w-btn.us-btn-style_1,
.mem-v2 .us-btn-style_1 {
	background: var(--ucah-orange) !important;
	border-color: var(--ucah-orange) !important;
	color: var(--ucah-bordeaux) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em;
}

.mem-v2 .w-btn.us-btn-style_1:hover,
.mem-v2 .us-btn-style_1:hover {
	background: var(--ucah-bordeaux) !important;
	border-color: var(--ucah-bordeaux) !important;
	color: var(--ucah-blanc) !important;
}

/* Bouton secondaire : contour bordeaux */
.mem-v2 .w-btn.us-btn-style_2,
.mem-v2 .us-btn-style_2 {
	background: transparent !important;
	border-color: var(--ucah-bordeaux) !important;
	color: var(--ucah-bordeaux) !important;
	font-weight: 700 !important;
}

.mem-v2 .w-btn.us-btn-style_2:hover,
.mem-v2 .us-btn-style_2:hover {
	background: var(--ucah-bordeaux) !important;
	color: var(--ucah-blanc) !important;
}

/* Sur fond bordeaux, le bouton contour passe en blanc */
.mem-v2 .color_alternate .us-btn-style_2,
.mem-v2 .l-section.color_alternate .w-btn.us-btn-style_2 {
	border-color: var(--ucah-blanc) !important;
	color: var(--ucah-blanc) !important;
}


/* =========================================================================
   6. UTILITAIRES — BANDES DE COULEUR ET SIGNIFIANT
   À poser comme « Extra class name » sur une ligne WPBakery quand on veut
   une bande pomme / orange / bonbon plutôt que la bande bordeaux du
   schéma alternatif. L'encre passe automatiquement en bordeaux.
   ========================================================================= */

.mem-v2 .ucah-bg-pomme,
.mem-v2 .ucah-bg-orange,
.mem-v2 .ucah-bg-bonbon {
	--color-content-bg: transparent;
	--color-content-heading: var(--ucah-bordeaux);
	--color-content-text: var(--ucah-bordeaux);
	--color-content-link: var(--ucah-bordeaux);
	--color-content-link-hover: var(--ucah-blanc);
	color: var(--ucah-bordeaux);
}

.mem-v2 .ucah-bg-pomme,
.mem-v2 .ucah-bg-pomme  > .l-section-overlay { background-color: var(--ucah-pomme)  !important; }
.mem-v2 .ucah-bg-orange,
.mem-v2 .ucah-bg-orange > .l-section-overlay { background-color: var(--ucah-orange) !important; }
.mem-v2 .ucah-bg-bonbon,
.mem-v2 .ucah-bg-bonbon > .l-section-overlay { background-color: var(--ucah-bonbon) !important; }

.mem-v2 .ucah-bg-bordeaux,
.mem-v2 .ucah-bg-bordeaux > .l-section-overlay {
	background-color: var(--ucah-bordeaux) !important;
}

.mem-v2 .ucah-bg-bordeaux,
.mem-v2 .ucah-bg-bordeaux :is(h1, h2, h3, h4, h5, h6, p, li, span, a, .w-text) {
	color: var(--ucah-blanc) !important;
}

/* Une bande claire posée à la main reprend l'encre bordeaux, y compris
   là où le thème avait mis du blanc. */
.mem-v2 :is(.ucah-bg-pomme, .ucah-bg-orange, .ucah-bg-bonbon) :is(h1, h2, h3, h4, h5, h6, p, li, span, a, .w-text) {
	color: var(--ucah-bordeaux) !important;
}

/* --- Le signifiant en filigrane (charte p.26, demande client)
   Classe à poser sur une ligne : le motif d'auvent vient habiller le fond,
   ancré en haut à droite, sans jamais gêner la lecture.                    */

.mem-v2 .ucah-signifiant {
	position: relative;
	overflow: hidden;
}

.mem-v2 .ucah-signifiant::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -6%;
	right: -4%;
	width: min(46%, 620px);
	aspect-ratio: 936 / 557;
	background: url("../img/ucah-signifiant-blanc-41b83a7a.svg") no-repeat right top / contain;
	opacity: .14;
	pointer-events: none;
}

.mem-v2 .ucah-signifiant > * {
	position: relative;
	z-index: 1;
}

/* Sur fond clair, le signifiant passe en bordeaux */
.mem-v2 .ucah-bg-pomme.ucah-signifiant::after,
.mem-v2 .ucah-bg-orange.ucah-signifiant::after,
.mem-v2 .ucah-bg-bonbon.ucah-signifiant::after,
.mem-v2 .ucah-signifiant.ucah-signifiant-fonce::after {
	background-image: url("../img/ucah-signifiant-bordeaux-41b83a7a.svg");
	opacity: .12;
}

/* Variante discrète pour les grandes sections */
.mem-v2 .ucah-signifiant-xl::after {
	width: min(70%, 1100px);
	opacity: .08;
}


/* =========================================================================
   7. LES BANDES DE COULEUR EXISTANTES
   -------------------------------------------------------------------------
   Sur ce site, la couleur d'une bande pleine largeur n'est pas pilotée par
   les variables du thème : elle est écrite en dur dans l'attribut style de
   l'élément .l-section-overlay, section par section. Les variables seules
   ne les repeignent donc pas — il faut les cibler par leur valeur.

   Relevé sur 52 pages :
     #333333   103 bandes   (bandeaux de titre, surimpressions d'images)
     #0d062f    26 bandes   (bandes bleu nuit)
     #339999     7 bandes   (bandes vert canard)
     #b6ba44     5 bandes   (bandes olive)
     #1ea296     4 bandes   (bandes vert canard, seconde teinte)
     #f5f5f5     5 bandes   (bandes grises)
     #e8e8e8     3 bandes

   ⚠ CORRESPONDANCE À ARBITRER — c'est le seul endroit du fichier où il n'y
   a pas de réponse unique. Les annotations du client font correspondre le
   vert canard tantôt à l'orange, tantôt à la pomme, selon la section. La
   proposition ci-dessous donne une teinte distincte à chaque ancienne
   couleur, pour garder le rythme visuel du site et exploiter les quatre
   principales. Une ligne à changer si l'arbitrage est différent.
   ========================================================================= */

.mem-v2 .l-section-overlay[style*="#b6ba44"],
.mem-v2 .l-section-overlay[style*="#969b3f"] { background: var(--ucah-pomme)    !important; }
.mem-v2 .l-section-overlay[style*="#339999"] { background: var(--ucah-orange)   !important; }
.mem-v2 .l-section-overlay[style*="#1ea296"] { background: var(--ucah-bonbon)   !important; }
.mem-v2 .l-section-overlay[style*="#5fbb93"] { background: var(--ucah-pomme)    !important; }
.mem-v2 .l-section-overlay[style*="#0d062f"],
.mem-v2 .l-section-overlay[style*="#0e0631"],
.mem-v2 .l-section-overlay[style*="#333333"],
.mem-v2 .l-section-overlay[style*="#d2247c"] { background: var(--ucah-bordeaux) !important; }
.mem-v2 .l-section-overlay[style*="#f5f5f5"] { background: var(--ucah-creme)    !important; }
.mem-v2 .l-section-overlay[style*="#e8e8e8"] { background: var(--ucah-filet)    !important; }

/* Idem pour les réglages d'élément Impreza (classes us_custom_…) */
.mem-v2 [class*="us_custom_"][style*="#339999"],
.mem-v2 [class*="us_custom_"][style*="#1ea296"] { background-color: var(--ucah-orange) !important; }


/* --- Conséquence critique : l'encre de ces bandes -----------------------
   Une bande vert canard portait du texte blanc. Repeinte en pomme, ce
   blanc tombe à 1,68:1 — illisible. Dès qu'une bande passe sur une teinte
   claire, son encre repasse en bordeaux.                                   */

.mem-v2 .l-section:has(> .l-section-overlay[style*="#b6ba44"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#969b3f"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#339999"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#1ea296"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#5fbb93"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#f5f5f5"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#e8e8e8"]) {
	--color-content-bg:        transparent;
	--color-content-heading:   var(--ucah-bordeaux);
	--color-content-text:      var(--ucah-bordeaux);
	--color-content-link:      var(--ucah-bordeaux);
	--color-content-faded:     rgba(79, 20, 34, .72);
	--color-content-border:    rgba(79, 20, 34, .25);
	color: var(--ucah-bordeaux);
}

.mem-v2 .l-section:has(> .l-section-overlay[style*="#b6ba44"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,.w-text),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#969b3f"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,.w-text),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#339999"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,.w-text),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#1ea296"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,.w-text),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#5fbb93"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,a,.w-text) {
	color: var(--ucah-bordeaux) !important;
}

/* À l'inverse, une bande repeinte en bordeaux garde une encre blanche. */
.mem-v2 .l-section:has(> .l-section-overlay[style*="#0d062f"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#0e0631"]),
.mem-v2 .l-section:has(> .l-section-overlay[style*="#d2247c"]) {
	--color-content-heading: var(--ucah-blanc);
	--color-content-text:    rgba(255, 255, 255, .92);
	--color-content-link:    var(--ucah-bonbon);
	--color-content-faded:   rgba(255, 255, 255, .62);
	color: var(--ucah-blanc);
}

/* Repli pour les navigateurs sans :has() — l'encre bordeaux par défaut sur
   les bandes claires, appliquée directement au conteneur de section.       */
@supports not selector(:has(*)) {
	.mem-v2 .l-section-overlay[style*="#b6ba44"] ~ .l-section-h,
	.mem-v2 .l-section-overlay[style*="#339999"] ~ .l-section-h,
	.mem-v2 .l-section-overlay[style*="#1ea296"] ~ .l-section-h { color: var(--ucah-bordeaux); }
}


/* =========================================================================
   8. AUTRES COULEURS CODÉES EN DUR (texte, filets, pictos)
   ========================================================================= */

.mem-v2 [style*="color: #333333"],
.mem-v2 [style*="color:#333333"],
.mem-v2 [style*="color: #0d062f"],
.mem-v2 [style*="color:#0d062f"] { color: var(--ucah-bordeaux) !important; }

.mem-v2 [style*="color: #339999"],
.mem-v2 [style*="color:#339999"],
.mem-v2 [style*="color: #1ea296"],
.mem-v2 [style*="color:#1ea296"],
.mem-v2 [style*="color: #b6ba44"],
.mem-v2 [style*="color:#b6ba44"] { color: var(--ucah-bonbon-txt) !important; }


/* =========================================================================
   9. L'ENTÊTE AU-DESSUS DU BANDEAU VIDÉO
   -------------------------------------------------------------------------
   L'ancien logo était polychrome et se détachait de n'importe quel fond.
   Le nouveau est un aplat bordeaux : posé sur la vidéo aérienne, il se perd
   dès que passe un toit sombre ou le clocher.

   Seul l'accueil est concerné — c'est la seule page dont la première
   section porte un média. Ailleurs l'entête surplombe du contenu clair et
   le logo bordeaux se lit très bien.

   ⚠ CADUC DEPUIS LE 12/09. Le héros ne porte plus de vidéo mais un aplat
   pomme (section 10). Le logo bordeaux s'y lit à 8,57:1, et le voile n'a
   plus d'objet. Les deux règles sont retirées ; à rétablir telles quelles
   si un média revient un jour derrière l'entête.
   ========================================================================= */

.mem-v2.home .l-header.bg_transparent {
	position: fixed;
}

.mem-v2.home .l-header.bg_transparent .l-subheader {
	position: relative;
	z-index: 1;
}


/* --- L'état « collé » au défilement ------------------------------------
   Dès qu'on descend, la classe .mem-v2-stuck est posée sur l'entête et la rangée du
   haut prend un fond plein — orange, conformément à l'annotation client
   #FF8D4B. Deux défauts en découlaient :

   1. Seule la rangée du haut devenait opaque. Le logo, qui vit dans la
      rangée du milieu restée transparente, se retrouvait à cheval entre
      l'orange et le contenu de la page. D'où : les deux rangées passent
      en orange, et le bandeau devient un aplat continu. Le logo garde sa
      taille — le réduire pour le faire tenir dans une seule rangée le
      ramenait à 68 px de large, il n'y pesait plus rien.

   2. Le blanc ne tient pas sur l'orange : 2,29:1. Sur ce fond, l'encre
      et le logo repassent en bordeaux, qui remonte à 6,30:1.

   Le voile n'a plus lieu d'être puisque le fond est devenu opaque.

   Variante possible en une valeur : passer les deux fonds en
   var(--ucah-bordeaux) et garder le logo blanc — bandeau plus sobre,
   contraste à 14,4:1.                                                   */

/* La couleur est portée par l'entête elle-même, pas par les deux rangées.
   Peindre le fond de la rangée du milieu la faisait passer par-dessus le
   panneau du menu, qui est ouvert depuis la rangée du haut : les deux
   premières entrées disparaissaient sous l'aplat. */
.mem-v2 .l-header.mem-v2-stuck {
	background: var(--ucah-orange) !important;
}

.mem-v2 .l-header.mem-v2-stuck .l-subheader.at_middle {
	background: transparent !important;
}

/* Même cause, conséquence plus sérieuse : à z-index égal, la rangée du
   milieu — pleine largeur et plus bas dans le DOM — recouvrait le panneau
   et interceptait les clics sur « Accueil » et « Marché de Noël ». On
   remet l'ordre d'empilement dans le bon sens. */
.mem-v2 .l-header .l-subheader.at_top    { z-index: 5 !important; }
.mem-v2 .l-header .l-subheader.at_middle { z-index: 2 !important; }

/* --- Le bandeau collé doit toucher le haut de l'écran ------------------
   Impreza décale l'entête fixe de 32 px pour laisser place à la barre
   d'administration WordPress. Mais cette barre n'est épinglée qu'à partir
   de 783 px de large : en dessous, elle défile et disparaît, tandis que
   le décalage reste — d'où une bande de page visible au-dessus du menu.

   On reprend donc le point de repère de WordPress lui-même : décalage
   seulement quand la barre est réellement épinglée. Un visiteur non
   connecté n'a pas la classe .admin-bar et voit le bandeau collé au bord
   dans tous les cas.                                                     */

.mem-v2 .l-header.mem-v2-stuck {
	top: 0 !important;
}

@media screen and (min-width: 783px) {
	body.admin-bar.mem-v2 .l-header.mem-v2-stuck {
		top: 32px !important;
	}
}


/* --- Les entêtes à une seule rangée (pages intérieures) ----------------
   Le site utilise deux entêtes : celle de l'accueil, sur deux rangées de
   80 px, et celle des pages intérieures, sur une seule. Dans les deux, le
   logo porte une marge haute de 50 px réglée dans le constructeur
   d'entête : il débordait volontairement sous une entête transparente,
   pour flotter au-dessus du contenu. Avec un bandeau opaque au
   défilement, ce débordement devient une erreur d'affichage.

   Sur la rangée unique de 80 px, le logo dépassait de 30 px. Le réduire
   pour l'y faire tenir le ramenait à 74 px de large, signature illisible
   — le logo horizontal a un rapport presque carré. On donne donc de la
   hauteur à la bande plutôt que d'écraser la marque.

   La distinction entre les deux entêtes est structurelle, pas nominative :
   celle de l'accueil possède une rangée .at_top, l'autre non. Une entête
   créée plus tard suivra la même logique sans rien à modifier ici.       */

.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)),
.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .l-subheader,
.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .l-subheader-h {
	height: 120px !important;
}

.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .w-image {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .w-image,
.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .w-image-h,
.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .w-image-h img {
	height: 88px !important;
	max-height: none !important;
}

.mem-v2 .l-header.mem-v2-stuck:not(:has(.l-subheader.at_top)) .w-image-h img {
	width: auto !important;
}


/* Contrepartie du point précédent : une fois la rangée du haut remontée,
   c'est son propre fond qui venait recouvrir le haut du logo — celui-ci
   déborde vers le haut depuis la rangée du milieu. On le retire : la
   couleur est désormais portée par l'entête, la rangée n'a plus rien à
   peindre. En haut de l'accueil, le voile dégradé prend le relais. */
.mem-v2 .l-header .l-subheader.at_top {
	background: transparent !important;
}

.mem-v2.home .l-header.bg_transparent.mem-v2-stuck::before {
	display: none;
}

.mem-v2 .l-header.mem-v2-stuck .w-image-h img {
	content: url("../img/ucah-logo-horizontal-bordeaux-41b83a7a.svg");
}

.mem-v2 .l-header.mem-v2-stuck .l-subheader :is(a, span, div, i, em, .w-text, .w-nav-title, .w-nav-anchor) {
	color: var(--ucah-bordeaux) !important;
	border-color: currentColor;
}


/* =========================================================================
   10. BANDEAU D'APERÇU
   Visible uniquement en aperçu privé, jamais une fois la V2 en ligne.
   ========================================================================= */

.mem-v2-preview::before {
	content: "APERÇU CHARTE V2 — non visible du public";
	position: fixed;
	z-index: 999999;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 4px 12px;
	font: 700 11px/1.6 var(--ucah-font);
	letter-spacing: .08em;
	text-align: center;
	color: var(--ucah-blanc);
	background: var(--ucah-bordeaux);
	pointer-events: none;
}


/* =========================================================================
   10. REPRISES DE L'ACCUEIL — 12 septembre 2026
   -------------------------------------------------------------------------
   Demandes client. Tout vit dans cette couche : la page elle-même n'est
   pas modifiée, et la V1 en ligne garde sa vidéo, son carrousel et ses
   proportions d'origine.
   ========================================================================= */

/* --- 10.1 Le héros : aplat à la place de la vidéo, hauteur réduite ------
   La vidéo est masquée, pas supprimée : elle reste dans la page et
   revient telle quelle si la V2 est désactivée.

   La hauteur ne peut pas être divisée par deux au sens strict. L'entête
   la surplombe sur 160 px et le bloc « Vos artisans » en fait 173 : sous
   360 px, le bloc passerait derrière l'entête. On descend donc de 590 à
   360 px sur ordinateur — 39 % de gagné pour le contenu suivant — et plus
   bas sur les écrans où l'entête est moins haute.                        */

.mem-v2 .l-section.with_video {
	background: var(--ucah-pomme) !important;
	/* La hauteur était figée à 590 px sur la section elle-même. */
	height: auto !important;
}

.mem-v2 .l-section.with_video > .l-section-video {
	display: none !important;
}

.mem-v2 .l-section.with_video > .l-section-h {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 0 !important;
	/* L'entête est en position fixe et surplombe le héros : sa hauteur
	   (160 px) plus une respiration donnent la réserve sous laquelle le
	   contenu ne peut pas passer. C'est ce padding, et non une hauteur
	   figée, qui détermine désormais la hauteur du héros. */
	padding-top: 192px !important;
	padding-bottom: 0 !important;
}

/* Le bloc était descendu par une marge haute de 257 px, calculée pour un
   héros de 590 px. C'est le flex ci-dessus qui le cale désormais. */
.mem-v2 .l-section.with_video .us_custom_5bdabb84 {
	margin-top: 0 !important;
}

/* Le bloc « Vos artisans » était posé par une colonne collante dont le
   calcul dérive dès que la hauteur du héros change — d'où sa dérive en
   tablette. On la neutralise : c'est désormais le flex ci-dessus qui le
   cale sur la base du héros, à toutes les largeurs. */
.mem-v2 .l-section.with_video .type_sticky,
.mem-v2 .l-section.with_video .type_sticky .wpb_wrapper {
	position: static !important;
	top: auto !important;
}

.mem-v2 .l-section.with_video .g-cols {
	margin-bottom: 0 !important;
}

/* --- 10.1bis Le logo dans le héros raccourci ---------------------------
   Le logo porte une marge haute de 50 px posée dans le constructeur
   d'entête : il débordait volontairement sous une entête transparente,
   sur la vidéo. Le héros passant à 350 px, ce débordement retombait sur
   les trois raccourcis — de 18 px sur ordinateur, de 95 px en mobile.
   Sur l'accueil seule, on range le logo dans sa bande. Les pages
   intérieures gardent le débordement d'origine.                          */

.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image {
	margin-top: 0 !important;
}

.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h,
.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h img {
	height: 104px !important;
	max-height: 104px !important;
	width: auto !important;
}

@media (max-width: 600px) {
	/* L'entête tombe à 120 px de haut sur mobile. */
	.mem-v2 .l-section.with_video > .l-section-h { padding-top: 140px !important; }
	.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h,
	.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h img {
		height: 84px !important;
		max-height: 84px !important;
	}
}

/* --- 10.1ter L'encre de l'entête sur le héros clair --------------------
   Le héros n'est plus une vidéo sombre mais un aplat pomme : le blanc de
   l'entête transparente y tombe à 1,68:1. Impreza redéfinit la variable
   dans une feuille inline posée après v2.css ; on la repose sur le body,
   qui l'emporte pour toute la page sans toucher au thème.                */
body.mem-v2 {
	--color-header-transparent-text: var(--ucah-bordeaux);
	--color-header-transparent-text-hover: var(--ucah-bonbon-txt);
	/* Le menu et les réseaux vivent dans la rangée haute, qui a ses
	   propres variables — le blanc à 66 % y tombait à 1,4:1. */
	--color-header-top-transparent-text: var(--ucah-bordeaux);
	--color-header-top-transparent-text-hover: var(--ucah-bonbon-txt);
}

/* Le menu ne suit pas ces variables : le constructeur lui a fixé
   « couleur = fond de la rangée centrale », c'est-à-dire blanc, choisi
   pour la vidéo sombre. Sur l'accueil seule, on le repasse en bordeaux —
   lisible sur l'aplat pomme comme sur la bande orange au défilement. */
.mem-v2 .l-header.id_328 .w-nav.ush_menu_1,
.mem-v2 .l-header.id_328 .w-nav.ush_menu_1 .w-nav-control {
	color: var(--ucah-bordeaux) !important;
}


/* --- 10.2 La cartographie ----------------------------------------------
   Le « bloc blanc » entre le texte et la carte n'en était pas un : la
   grille portait un gap de 54 px, et le fond de page se voyait au travers.
   La carte, elle, remplissait déjà exactement sa colonne.                 */

.mem-v2 .g-cols:has(> .us_custom_6b784548) {
	gap: 0 !important;
}

/* Le titre débordait de sa colonne : 41 px dans 163 px de large utile. */
.mem-v2 .us_custom_43f6ea8a :is(h1, h2, h3, h4) {
	font-size: clamp(1.15rem, 1.9vw, 1.75rem) !important;
	line-height: 1.15 !important;
}


/* --- 10.3 Actualités : les réseaux à la place du carrousel --------------
   Le carrousel d'origine est masqué, pas supprimé. Le bloc inséré par le
   mu-plugin prend sa place ; le titre de la section devient l'accroche.  */

.mem-v2 .us_custom_93a853b0 > .l-section-h {
	display: none !important;
}

.mem-v2 .ucah-reseaux-bloc {
	padding: clamp(2rem, 5vw, 3.5rem) 1rem clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}

.mem-v2 .ucah-reseaux {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: clamp(1.25rem, 3.5vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Sans cela, le dernier élément descendait de 4 px : la hauteur de ligne
   du glyphe s'ajoutait à celle du cercle. */
.mem-v2 .ucah-reseaux > li {
	display: flex;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.mem-v2 .ucah-reseaux--grand a {
	display: grid;
	place-items: center;
	width: clamp(60px, 7vw, 86px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ucah-bordeaux);
	color: var(--ucah-blanc);
	font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.mem-v2 .ucah-reseaux--grand a:hover,
.mem-v2 .ucah-reseaux--grand a:focus-visible {
	background: var(--ucah-bonbon-txt);
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.mem-v2 .ucah-reseaux--grand a { transition: none; }
	.mem-v2 .ucah-reseaux--grand a:hover { transform: none; }
}


/* --- 10.4 Les réseaux dans l'entête -------------------------------------
   Insérés dans la cellule droite de la rangée du haut, restée vide.
   Ils héritent de l'encre de l'entête : bordeaux dans tous les états
   depuis que le héros est clair, donc lisibles partout.                   */

.mem-v2 .l-subheader-cell.at_right:has(.ucah-reseaux) {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.mem-v2 .ucah-reseaux--entete {
	gap: 1rem;
}

.mem-v2 .ucah-reseaux--entete a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	font-size: 1.05rem;
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease;
}

.mem-v2 .ucah-reseaux--entete a:hover,
.mem-v2 .ucah-reseaux--entete a:focus-visible {
	color: var(--ucah-bonbon-txt);
}

@media (max-width: 600px) {
	.mem-v2 .ucah-reseaux--entete { gap: .75rem; }
	.mem-v2 .ucah-reseaux--entete a { font-size: .95rem; }
}

/* Tentative de resserrage abandonnée : la section du carrousel remonte
   volontairement sur la bande de titre — un chevauchement voulu par le
   gabarit. Réduire ses marges faisait passer les icônes par-dessus le
   titre. On garde les espacements d'origine, qui restent cohérents. */


/* =========================================================================
   11. AJUSTEMENTS DE L'ACCUEIL — 12 septembre 2026, second passage
   -------------------------------------------------------------------------
   Retours client sur la première série de reprises.
   ========================================================================= */

/* --- 11.1 Le bloc « Vos artisans » -------------------------------------
   Le texte tombait sur quatre lignes, « Herbiers. » restant seul en bas.
   La colonne de texte était bridée à 308 px alors que la rangée en fait
   483 : on la laisse prendre la place libre, et `text-wrap: balance`
   répartit les lignes au lieu de laisser un mot orphelin. Le bloc perd
   ainsi une ligne, et son fond de colonne quelques pixels.              */

.mem-v2 .l-section.with_video .us_custom_89f291ed {
	flex: 1 1 auto !important;
}

/* La rangée n'avait aucune place libre à redistribuer : 80 px de retrait
   latéral, deux marges internes, et deux visuels qui se comprimaient à la
   place du texte. On rend les 64 px de retrait au texte et on descend d'un
   point et demi de corps : trois lignes au lieu de quatre, sans orphelin. */
.mem-v2 .l-section.with_video .us_custom_9be771ed {
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

.mem-v2 .l-section.with_video .us_custom_9be771ed > * + * {
	margin-left: 1.25rem !important;
}

/* Ne pas figer la flèche et la loupe à `flex: 0 0 auto` : leurs fichiers
   font 161 px de large et elles reprendraient cette taille, au détriment
   du texte. Elles restent compressibles comme le thème les a réglées. */

.mem-v2 .l-section.with_video .us_custom_89f291ed p {
	font-size: 16.5px !important;
	line-height: 1.32 !important;
	text-wrap: balance;
}

.mem-v2 .l-section.with_video .us_custom_6374d7e2 {
	padding-bottom: 14px !important;
}

/* --- 11.2 La bande réseaux ---------------------------------------------
   Le bloc des trois pastilles est désormais injecté dans la bande verte,
   sous le titre. La section du carrousel disparaît en entier : elle
   portait une marge haute de −350 px pour remonter sur la bande, et
   dépassait de 15 px en dessous — c'était le filet blanc.               */

.mem-v2 .us_custom_93a853b0 {
	display: none !important;
}

/* Le titre apporte déjà 34 px de retrait bas, la bande verte 36 px sous le
   bloc : celui-ci n'en rajoute qu'une respiration. */
.mem-v2 .ucah-reseaux-bloc {
	padding: clamp(.5rem, 1.5vw, 1rem) 1rem 0;
}

/* Le séparateur de 260 px qui suit réservait la place du carrousel, qui
   remontait par-dessus la bande. Le carrousel masqué, il ne retient plus
   que du vide. */
.mem-v2 .ucah-reseaux-bloc + .w-separator {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
}

/* --- 11.3 Les gouttières de « L'UCAH en action » ------------------------
   Les quatre vignettes de droite ne sont pas une grille de deux rangées
   mais deux grilles empilées. Leurs colonnes étaient séparées de 54 px,
   les grilles entre elles de 6 px seulement.                             */

.mem-v2 .g-cols:has(> .us_custom_42594b71) .g-cols:not(:last-child) {
	margin-bottom: 54px !important;
}

/* --- 11.4 L'encre des pastilles ----------------------------------------
   Dans la bande verte, le thème repeint les liens en bordeaux : les icônes
   devenaient invisibles sur le cercle bordeaux. On impose le blanc.      */

.mem-v2 .ucah-reseaux--grand a,
.mem-v2 .ucah-reseaux--grand a i {
	color: var(--ucah-blanc) !important;
}


/* =========================================================================
   12. AJUSTEMENTS DE L'ACCUEIL — 12 septembre 2026, troisième passage
   ========================================================================= */

/* --- 12.1 Les pictos du héros ------------------------------------------
   À 70 px ils écrasaient leur carte et le libellé venait buter dessous,
   d'autant que le cabas et la bulle descendent plus bas dans leur cadre
   que le ticket. Les trois dessins ont été redessinés avec la même marge
   interne ; il reste à les poser plus petits et à décoller le libellé.  */

.mem-v2 .l-section.with_video .us_custom_c6b21758,
.mem-v2 .l-section.with_video .us_custom_c6b21758 .w-image-h,
.mem-v2 .l-section.with_video .us_custom_c6b21758 img {
	height: 52px !important;
	max-height: 52px !important;
}

.mem-v2 .l-section.with_video .us_custom_c6b21758 {
	margin-bottom: .8rem !important;
}

/* --- 12.2 Le logo : grand au repos, petit au défilement -----------------
   C'était l'inverse — le logo grossissait en descendant, et la bande
   collée consacrait 160 px à un logo seul. On échange les deux tailles :
   la marque s'affirme à l'arrivée sur la page, puis s'efface pour rendre
   la place au contenu.

   Au repos le logo déborde volontairement sous la bande, comme le
   prévoyait le gabarit d'origine ; la réserve du héros est augmentée
   d'autant pour qu'il ne retombe pas sur les trois raccourcis.          */

.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h,
.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h img {
	height: 140px !important;
	max-height: 140px !important;
}

.mem-v2 .l-section.with_video > .l-section-h {
	padding-top: 248px !important;
}

/* Au défilement : deux rangées ramenées de 80 à 48 et 72 px, soit une
   bande de 120 au lieu de 160. Le logo, centré sur la rangée du bas,
   remonte de 24 px pour se centrer sur la bande entière. */

.mem-v2 .l-header.id_328.mem-v2-stuck .l-subheader.at_top,
.mem-v2 .l-header.id_328.mem-v2-stuck .l-subheader.at_top .l-subheader-h {
	height: 48px !important;
}

.mem-v2 .l-header.id_328.mem-v2-stuck .l-subheader.at_middle,
.mem-v2 .l-header.id_328.mem-v2-stuck .l-subheader.at_middle .l-subheader-h {
	height: 72px !important;
}

.mem-v2 .l-header.id_328.mem-v2-stuck .w-image {
	margin-top: 0 !important;
	position: relative;
	top: 11px;
}

.mem-v2 .l-header.id_328.mem-v2-stuck .w-image-h,
.mem-v2 .l-header.id_328.mem-v2-stuck .w-image-h img {
	height: 100px !important;
	max-height: 100px !important;
	width: auto !important;
}

@media (max-width: 600px) {
	.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h,
	.mem-v2 .l-header.id_328:not(.mem-v2-stuck) .w-image-h img {
		height: 104px !important;
		max-height: 104px !important;
	}
	.mem-v2 .l-section.with_video > .l-section-h { padding-top: 176px !important; }
}

/* --- 12.3 Les gouttières de « L'UCAH en action » ------------------------
   Uniformes depuis le passage précédent, mais deux fois trop larges.    */

.mem-v2 .g-cols:has(> .us_custom_42594b71),
.mem-v2 .g-cols:has(> .us_custom_42594b71) .g-cols {
	gap: 27px !important;
}

.mem-v2 .g-cols:has(> .us_custom_42594b71) .g-cols:not(:last-child) {
	margin-bottom: 27px !important;
}


/* --- 12.4 La tablette ---------------------------------------------------
   Deux colonnes tenaient encore à 1024 px mais plus à 768 : la colonne de
   texte du bloc « Vos artisans » tombait à 150 px et celle de la
   cartographie à 128 px — un mot par ligne dans les deux cas. Sous
   1024 px, ces deux rangées passent en une seule colonne. Le bloc
   « Vos artisans » passe après les raccourcis pour rester calé sur la
   base du héros.                                                          */

@media (max-width: 1024px) {

	/* La réserve sous l'entête suit la taille du logo, pas celle du poste. */
	.mem-v2 .l-section.with_video > .l-section-h {
		padding-top: 196px !important;
	}

	.mem-v2 .l-section.with_video .us_custom_5bdabb84 {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	.mem-v2 .l-section.with_video .us_custom_5bdabb84 > .us_custom_6374d7e2 {
		order: 2;
	}

	.mem-v2 .g-cols:has(> .us_custom_6b784548) {
		grid-template-columns: 1fr !important;
	}
}

/* La réserve mobile est reposée ici : la règle tablette ci-dessus est
   écrite après la règle mobile de la section 12.2 et l'emportait sur
   elle à 390 px, où l'entête ne fait pourtant que 120 px. */
@media (max-width: 600px) {
	.mem-v2 .l-section.with_video > .l-section-h {
		padding-top: 176px !important;
	}
}

/* 12.3 — Les trois raccourcis du héros, centrés dès que la grille passe
   en une seule colonne. Le w-hwrapper d'Impreza est en align_none, donc
   en flex-start : sur une colonne pleine largeur, le trio restait collé
   à gauche avec toute la réserve à droite. Laissé tel quel au-dessus de
   1024 px, où il est calé à gauche de sa demi-colonne, comme au gabarit. */
@media (max-width: 1024px) {
	.mem-v2 .l-section.with_video .w-hwrapper.us_custom_8e16b1ab {
		justify-content: center;
	}
}

/* 12.4 — De l'air sous les raccourcis en mobile. Le bloc « Vos artisans »
   qu'on voit sous 600 px n'est pas celui du héros (il porte hide_on_mobiles)
   mais une section jumelle réservée au mobile, posée juste après. Le héros
   n'ayant aucun retrait bas, les trois cartes touchaient la bande bordeaux.
   On rend 28 px d'aplat pomme. La règle ne touche que padding-bottom : le
   padding-top mobile de la section 12.2 ci-dessus reste maître. */
@media (max-width: 600px) {
	.mem-v2 .l-section.with_video > .l-section-h {
		padding-bottom: 28px !important;
	}
}