/*
Theme Name: Hotcakes
Theme URI: https://hotcakes.fr
Author: Hotcakes
Author URI: https://hotcakes.fr
Description: Hotcakes
Version: 1.0
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
input
{
	outline: none;
}

a
{
	text-decoration: none;
}

p:not(:last-child)
{
	padding-bottom: 20px;
}

.row:after
{
	clear: both;
	content: '';
	display: table;
}

img
{
	max-width: 100%;
	height: auto;
}

/* =========================================================
   DESIGN SYSTEM — TheLittleBig (nouvelle charte)
   Tokens couleurs + typographie. Polices chargées via header.php
   (Google Fonts : Poppins + Inter).
   ========================================================= */
:root
{
	/* Couleurs de marque */
	--violet:        #3F266C; /* Violet base / texte / titres */
	--violet-fonce:  #33175D; /* Violet foncé (fonds Paris/Interlocuteur) */
	--violet-nuit:   #2A184A; /* Violet très foncé (fond Welcome) */
	--mauve:         #B6B0D8; /* Lavande */
	--beige:         #F6EDE5; /* Fond clair / beige */
	--blanc:         #FFFFFF;

	/* Accents multicolores (bandes, fleur, ponctuation) */
	--vert:          #68BA7F;
	--jaune:         #FBB814;
	--saumon:        #EA553F;
	--bleu:          #0BB5E1;

	/* Rôles sémantiques */
	--bg:            var(--beige);
	--txt:           var(--violet);

	/* Typographie */
	--font-title:    'Poppins', sans-serif; /* Titres : ExtraLight / Light / Regular / Black */
	--font-body:     'Inter', sans-serif;   /* Texte courant : 16/26 */
	--font-serif:    'Playfair Display', serif; /* Emphase italique (« à Biarritz », « Unique ») */
}

body, a
{
	 font-size: 16px;
	 line-height: 26px;
	 color: var(--txt);
	 font-family: var(--font-body);
}

.navcontainer
{
	overflow: hidden;	
}

body
{
	overflow-x: hidden;
}

/* =========================================================
   MENU — tiroir gauche (maquette TheLittleBig)
   Panneau beige (nav) + panneau violet (types/catégories)
   ========================================================= */
#nav
{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	background: var(--beige);
	z-index: 12;
	width: 218px;
	transform: translateX(-100%);
	transition: 0.3s transform ease-in-out;
}

body.nav #nav { transform: translateX(0); }

#nav .inner
{
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 20px 0;
}

#nav .close
{
	width: 30px;
	height: 30px;
	background: url(images/close.svg) no-repeat center center;
	background-size: contain;
	cursor: pointer;
	margin: 0 0 24px 12px;
	flex: 0 0 auto;
}

#nav .nav-menu { width: 100%; }

#nav .nav-menu a
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.1;
	text-align: right;
	text-transform: uppercase;
	color: var(--violet);
	min-height: 58px;
	padding: 10px 30px;
	white-space: normal;
	transition: 0.2s all ease-in-out;
}

#nav .nav-menu a:hover,
body.nav2 #nav .realisations a
{
	background: var(--violet-fonce);
	color: var(--beige);
}

/* Bloc newsletter (texte) en bas du panneau beige — cliquable : ferme le menu
   et ouvre la popup d'inscription (main.js). */
#nav .nl-block
{
	margin-top: auto;
	padding: 20px 30px 6px 12px;
	text-align: right;
	color: var(--violet);
	cursor: pointer;
	transition: 0.2s opacity ease-in-out;
}

#nav .nl-block:hover { opacity: 0.7; }
#nav .nl-block:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }

#nav .nl-block .t
{
	font-family: var(--font-title);
	font-weight: 900;
	font-size: 25px;
	line-height: 1;
	text-transform: uppercase;
	margin-bottom: 14px;
}

#nav .nl-block .d
{
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 24px;
}

/* Panneau violet : types (haut) + catégories (bas) */
#terms
{
	position: fixed;
	left: 0;
	top: 0;
	height: 100vh;
	width: 218px;
	background: var(--violet-fonce);
	z-index: 11;
	display: flex;
	flex-flow: column;
	transform: translateX(-218px);
	transition: 0.3s transform ease-in-out;
}

body.nav2 #terms { transform: translateX(218px); }

.wp-block-button__link {
	border-radius: 100px;
	background: var(--violet);
	color: var(--blanc);
	font-weight: 400;
}

#terms .types
{
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	flex: 1;
	padding-top: 110px;
}

#terms a
{
	font-size: 16px;
	font-family: var(--font-body);
	display: block;
	padding: 8px 30px;
	font-weight: 500;
	text-align: right;
	white-space: normal;
	color: var(--beige);
	transition: 0.15s all ease-in-out;
}

#terms .types a:hover,
#terms .types a.active
{
	background: var(--violet);
}

#terms .categories
{
	display: flex;
	justify-content: flex-start;
	background: var(--violet);
	flex-flow: column;
	padding: 36px 0;
}

#terms .categories a
{
	color: var(--beige);
	font-weight: 700;
}

#overall
{
	opacity: 0;
	transition: 0.2s all ease-in-out;
}

body.popup #overall
{
	opacity: 0.7!important;
}

body.nav #overall, body.popup #overall
{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 10;
	background: #000;
	opacity: 0.4;
}

/* Fenêtres peu hautes (portables en affichage 100 %) : le menu et le panneau des
   rubriques tiennent sur une hauteur d'écran, sinon leur bas — l'encart NEWSLETTER
   d'un côté, les catégories de l'autre — sortait de l'écran sans possibilité de
   l'atteindre. On resserre d'abord les espacements ; le défilement interne, posé
   sur les deux panneaux, ne sert que de filet de sécurité. */
#nav .inner,
#terms { overflow-y: auto; overscroll-behavior: contain; }

@media (max-height: 800px)
{
	#nav .inner { padding: 12px 0; }
	#nav .close { margin-bottom: 12px; }
	#nav .nav-menu a { min-height: 46px; padding: 6px 30px; font-size: 18px; }
	#nav .nl-block { padding: 12px 30px 4px 12px; }
	#nav .nl-block .t { font-size: 21px; margin-bottom: 8px; }
	#nav .nl-block .d { font-size: 14px; line-height: 20px; }

	#terms .types { padding-top: 68px; }
	#terms a { padding: 5px 30px; }
	#terms .categories { padding: 18px 0; }
}

@media (max-height: 640px)
{
	#nav .nav-menu a { min-height: 40px; padding: 4px 30px; font-size: 17px; }
	#nav .nl-block .t { font-size: 19px; margin-bottom: 6px; }
	#nav .nl-block .d { font-size: 13px; line-height: 18px; }

	#terms .types { padding-top: 52px; }
	#terms a { padding: 4px 30px; font-size: 15px; }
	#terms .categories { padding: 12px 0; }
}

/* =========================================================
   HEADER / NAV — charte TheLittleBig
   3 zones : burger (gauche) · logo (centre) · contact (droite)
   sur fond violet, superposé au hero.
   ========================================================= */
#header
{
	background: var(--violet);
	position: sticky;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9;
}

#header .wrap
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 55px;
	position: relative;
	padding: 0 36px;
}

/* Burger : pilule blanche (images/menu.svg) */
#header .wrap #toggle
{
	width: 59px;
	height: 30px;
	flex: 0 0 59px;
	background: url(images/menu.svg) no-repeat center center;
	cursor: pointer;
}

/* Logo centré — hauteur fixe 36px */
#header .wrap .logo
{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: auto;
}

#header .wrap .logo a { display: block; }
#header .wrap .logo img
{
	display: block;
	height: 36px;
	width: auto;
}

/* Lien « Nous contacter » */
#header .wrap .contact
{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

#header .wrap .contact a
{
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--beige);
	display: flex;
	align-items: center;
}

#header .wrap .contact a:before
{
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--beige);
	margin-right: 10px;
}

/* =========================================================
   HOME — header transparent par-dessus le hero, recolorisé au scroll.
   Le logo du header est masqué sur le hero et réapparaît quand le header
   devient solide. Un 2e logo (.home-logo) est posé en flux au début de la
   home (hors zone éditable, via header.php) : il défile avec la page.
   ========================================================= */
body.home #header
{
	position: fixed;
	background: transparent;
	transition: background 0.3s ease;
}

body.home #header.solid
{
	background: var(--violet);
}

/* Logo du header : masqué sur le hero, réapparaît une fois le header solide */
body.home #header .logo
{
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

body.home #header.solid .logo
{
	opacity: 1;
	visibility: visible;
}

/* Page Contact : même principe que la home (header transparent + logo header masqué, gros logo du hero visible) */
body.page-template-contact #header
{
	position: fixed;
	background: transparent;
	transition: background 0.3s ease;
}
body.page-template-contact #header.solid { background: var(--violet); }
body.page-template-contact #header .logo
{
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}
body.page-template-contact #header.solid .logo
{
	opacity: 1;
	visibility: visible;
}
body.page-template-contact #main { position: relative; }

/* Logo du hero : séparé, en flux (défile avec la page), centré en haut */
body.home #main { position: relative; }

.home-logo
{
	position: absolute;
	top: 57px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 8;
}

.home-logo a { display: block; }
.home-logo img { display: block; height: 60px; width: auto; }

/* Hero : le contenu commence sous le logo */
body.home section.hero .hero-inner { padding-top: 200px; }

/* =========================================================
   HERO — « ACTIVATION FACTORY » (charte TheLittleBig)
   Fond violet + vagues (hero.svg), titre Poppins ExtraLight,
   bandes multicolores, tagline Poppins Black.
   ========================================================= */
section.hero
{
	position: relative;
	background: var(--violet) url(images/hero.svg) no-repeat center top;
	background-size: cover;
	min-height: 773px;
	overflow: hidden;
	color: var(--beige);
}

section.hero .hero-inner
{
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 110px 20px 60px;
}

/* Titre ACTIVATION FACTORY — Poppins ExtraLight */
section.hero .hero-title
{
	font-family: var(--font-title);
	font-weight: 200;
	text-transform: uppercase;
	color: var(--beige);
	line-height: 0.86;
}

section.hero .hero-title span
{
	display: block;
}

section.hero .hero-title .l1
{
	font-size: 128px;
	letter-spacing: -0.04em;
}

section.hero .hero-title .l2
{
	font-size: 166px;
	letter-spacing: -0.04em;
	margin-top: -0.06em;
}

/* Bandes multicolores (lignes.svg) */
section.hero .hero-bandes
{
	width: 100px;
	height: 106px;
	margin: 20px 0 24px;
	background: url(images/lignes.svg) no-repeat center center;
	background-size: contain;
}

/* Tagline — Poppins Black, 2 lignes justifiées */
section.hero .hero-baseline
{
	width: 647px;
	max-width: 90%;
}

section.hero .hero-baseline .ligne
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

section.hero .hero-baseline .ligne + .ligne
{
	margin-top: 11px;
}

section.hero .hero-baseline span
{
	font-family: var(--font-title);
	font-weight: 900;
	font-size: 51px;
	line-height: 0.75;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--beige);
	white-space: nowrap;
}

/* « Paris » / « Biarritz » cliquables dans la baseline : héritent du style beige du texte */
section.hero .hero-baseline a
{
	font: inherit;              /* force taille/police du span (sinon règle globale a = 16px Inter) */
	letter-spacing: inherit;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	transition: opacity 0.2s ease;
}

section.hero .hero-baseline a:hover
{
	opacity: 0.7;
}

section.hero .hero-baseline .fleche
{
	flex: 0 0 51px;
	width: 51px;
	height: 31px;
	background: url(images/fleche.svg) no-repeat center center;
	background-size: contain;
}

section.hero .hero-baseline .fleur
{
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: url(images/fleur.svg) no-repeat center center;
	background-size: contain;
}

/* =========================================================
   WELCOME — bloc violet nuit + logo WELCOME + intro + paras
   ========================================================= */
section.welcome
{
	background: var(--violet-nuit);
	padding: 140px 0;
}

section.welcome .wrap
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	/* Largeur utile du bloc (= 1512 − 2×216 du Figma), pilotée en width et non en
	   padding : sous 1512px, la colonne se réduit d'elle-même au lieu de garder
	   432px de padding fixes qui écrasaient le texte. */
	width: 1080px;
	max-width: calc(100% - 80px);
	padding: 0;
}

section.welcome .welcome-logo
{
	flex: 0 0 274px;
	width: 274px;
}

section.welcome .welcome-logo img
{
	display: block;
	width: 100%;
}

section.welcome .welcome-txt
{
	flex: 0 1 740px;
}

section.welcome .welcome-txt .intro
{
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 28px;
	line-height: 32px;
	color: var(--blanc);
	margin-bottom: 40px;
	padding-bottom: 0;
}

section.welcome .welcome-txt .paras p
{
	position: relative;
	padding: 0 0 0 26px;
	color: #f3f3f3;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 10px;
}

section.welcome .welcome-txt .paras p:last-child
{
	margin-bottom: 0;
}

section.welcome .welcome-txt .paras p:before
{
	content: '';
	position: absolute;
	left: 0;
	/* Caler le filet sur la hauteur réelle du texte : cap-top de la 1re ligne (~7px)
	   à la baseline de la dernière ligne (~7px du bas), leading compensé. */
	top: 7px;
	bottom: 7px;
	width: 6px;
	background: var(--jaune);
}

/* =========================================================
   INTERLOCUTEUR — bloc violet foncé, De Paris à Biarritz / Unique
   ========================================================= */
section.interlocuteur
{
	background: var(--violet-fonce);
	padding: 90px 0;
	overflow: hidden;
}

section.interlocuteur .wrap
{
	display: flex;
	align-items: flex-start;
	gap: 40px;
	/* Largeur utile du bloc (221 deco + 40 gap + 674 cols = 935 du Figma), pilotée
	   en width et non en padding : sous 1016px, la colonne se réduit d'elle-même
	   au lieu de garder 64px de padding fixes qui écrasaient le texte. */
	width: 936px;
	max-width: calc(100% - 80px);
	margin: 0 auto;
	padding: 0;
}

section.interlocuteur .deco
{
	flex: 0 0 221px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.interlocuteur .deco img
{
	display: block;
	width: 221px;
}

section.interlocuteur .cols
{
	flex: 0 1 674px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

section.interlocuteur .bloc .tiret
{
	display: block;
	width: 84px;
	height: 4px;
	margin-bottom: 20px;
	background: url(images/tiret-multicolor.svg) no-repeat left center;
	background-size: 84px 4px;
}

section.interlocuteur .bloc h2
{
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.1;
	color: #fff !important;
	margin-bottom: 20px;
}

section.interlocuteur .bloc h2 em
{
	font-family: var(--font-serif);
	font-weight: 700;
	font-style: italic;
}

section.interlocuteur .bloc p
{
	color: #f3f3f3;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 16px;
}

section.interlocuteur .bloc .btn
{
	display: inline-flex;
	align-items: center;
	margin-top: 14px;
	height: 50px;
	padding: 0 32px;
	border-radius: 100px;
	background: var(--violet);
	color: var(--blanc);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 28px;
	transition: 0.2s all ease-in-out;
}

section.interlocuteur .bloc .btn:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

body.home section.content
{
	background: #000;
}


body.home section.content .top
{
	background: url(images/pattern_large.png) no-repeat center top;
	height: 216px;
}

@media (min-width: 901px) and (max-height: 800px)
{
	body.home section.content .top {
		display: none;
	}
}

body.home section.content .part1, body.home section.content .part2
{
	/*
	margin-left: 216px;
	margin-right: 216px;
	*/
	width: 1080px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	gap: 81px;
}

body.home section.content .part1
{
	color: #fff;
	padding: 37px 25px 50px 0;
}

body.home section.content .titre
{
	flex: 0 0 287px;
	font-size: 143.962px;
	line-height: 125px;
	text-transform: uppercase;
	font-family: var(--font-title);
	font-weight: bold;
}

@media(min-width: 901px)
{
	body.home section.content.fixed .titre > div
	{
		position: fixed;
		top: 100px;
		width: 267px;
	}
	
	body.home section.content:not(.fixed) .second .titre
	{
		margin-top: -30px;
	}
}

body.home section.content .second
{
	position: relative; z-index: 2;
}

body.home section.content .titre span
{
	color: #FFDF00;
}

body.home section.content .right
{
	flex: 1;
}

body.home section.content .part1 .right .intro
{
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	padding-bottom: 25px;
}

body.home section.content .right .texte
{
	line-height: 26px;
}

body.home section.content .right h2
{
	font-weight: 700;
	font-size: 30px;
	line-height: 28px;
	margin-bottom: 20px;
	padding-top: 19px;
	position: relative;
}

body.home section.content .part1 .right h2
{
	color: #FFDF00;
}

body.home section.content .right h2:before
{
	content: '';
	display: block;
	width: 87px;
	height: 6px;
	position: absolute;
	left: 0;
	top: 0;
	background: #000;
}

body.home section.content .part1 .right h2:before
{
	background: #FFDF00;
}

body.home section.content .right li
{
	padding-left: 31px;
	margin-bottom: 15px;
	position: relative;
}

body.home section.content .right li:before
{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border: 2.4px solid #000;
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 7px;
}

body.home section.content .part2
{
	min-height: 345px;
}

body.home section.content .part1 .right li:before
{
	border: 2.4px solid #FFDF00;
}

body.home section.content .second
{
	background: #F3F3F3;
	padding: 67px 0 81px 0;
}

body.home section.content .wrap + .wrap
{
	
}

body.home section.realisations
{
	position: relative;
	z-index: 2;
	background: var(--beige);
	padding-top: 80px;
	padding-bottom: 84px;
}

body.home section.realisations .texte,
body.home section.realisations .texte p
{
	color: var(--violet);
}

/* Images réalisations : fournies à plat, arrondi en CSS */
body.home section.realisations .grid-item img
{
	border-radius: 20px;
}

/* Titre de section : bandes multicolores larges + Poppins Light violet */
h1.bandes, h2.bandes
{
	text-align: center;
	font-family: var(--font-title);
	font-weight: 300;
	color: var(--violet);
	line-height: 1;
	display: block;
	position: relative;
	padding-top: 134px;
	margin-bottom: 24px;
}

h1.bandes:before, h2.bandes:before
{
	content: '';
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 114px;
	height: 106px;
	background: url(images/bandes-larges.svg) no-repeat center center;
	background-size: contain;
}

.bandes .t-sm { display: block; font-size: 40px; line-height: 1; }
.bandes .t-lg { display: block; font-size: 80px; line-height: 0.8; }

h2.bandes.inner
{
	margin-top: 0;
}

/* variante bandes en haut (autres templates) — neutralisée vers la base */
.bandes.bandestop
{
	padding-top: 134px;
}

.bandes.bandestop:before
{
	width: 114px;
	height: 106px;
	margin-bottom: 0;
}

body.home section.realisations .texte
{
	margin-bottom: 30px;
	text-align: center;
}

body.home section.clients
{
	background: var(--violet);
	padding-top: 80px;
	padding-bottom: 140px;
}

body.home section.clients h2.bandes
{
	color: var(--beige);
}

body.home section.clients .wrap
{
	width: 1274px;
}

body.home section.clients .logos
{
	background: var(--beige);
	height: 302px;
	margin-top: 50px;
	padding: 0 50px;
	border-radius: 40px;
}

.swipercontainer, .swiper
{
	height: 100%;
}

.swiper-slide
{
	display: flex;
	align-items: center;
	justify-content: center;
}

.swipercontainer
{
	position: relative;
}

.swiper-button-prev:after {
	display: none;
}

.swiper-button-next:after {
	display: none;
}

.swiper-button-prev
{
	width: 55px;
	height: 55px;
	border-radius: 55px;
	background: url(images/arrow-prev.svg) no-repeat center center;
	background-size: contain;
	margin-top: 0;
	left: -27px;
	top: calc(50% - 27px);
}

.swiper-button-next
{
	width: 55px;
	height: 55px;
	border-radius: 55px;
	background: url(images/arrow-next.svg) no-repeat center center;
	background-size: contain;
	margin-top: 0;
	right: -27px;
	top: calc(50% - 27px);
}

/* =========================================================
   CONTACT (home) — fond beige, champs soulignés, bouton pilule
   Formulaire Contact Form 7 (id 1825) stylé.
   ========================================================= */
body.home section.contact-home
{
	background: var(--beige);
	padding: 80px 0 120px;
}

body.home section.contact-home .wrap
{
	padding: 0 100px;
}

/* éléments du form CF7 hors maquette */
body.home section.contact-home .wpcf7 h1,
body.home section.contact-home .wpcf7 .intro,
body.home section.contact-home .wpcf7 .mention
{
	display: none;
}

body.home section.contact-home .wpcf7-form p
{
	margin: 0;
	padding: 0;
	text-align: center;
}

body.home section.contact-home .wpcf7-form br
{
	display: none;
}

body.home section.contact-home .wpcf7-form-control-wrap
{
	display: block;
	margin-bottom: 28px;
}

body.home section.contact-home input[type="email"],
body.home section.contact-home input[type="text"],
body.home section.contact-home textarea
{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--violet);
	border-radius: 0;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--violet);
	outline: none;
}

body.home section.contact-home textarea
{
	resize: vertical;
	min-height: 44px;
}

body.home section.contact-home input::placeholder,
body.home section.contact-home textarea::placeholder
{
	color: var(--violet);
	opacity: 0.6;
}

body.home section.contact-home .wpcf7-submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 32px;
	margin-top: 14px;
	background: var(--violet);
	color: var(--blanc);
	border: none;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}

body.home section.contact-home .wpcf7-submit:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

body.home section.contact-home .wpcf7-spinner
{
	margin: 0 0 0 12px;
}

/* =========================================================
   NEWSLETTER (home) — fond violet, champ souligné + bouton blanc
   ========================================================= */
section.newsletter-home
{
	background: var(--violet);
	padding: 0 0 70px;
	text-align: center;
}

/* Bandes collées au haut du bloc newsletter (comme la maquette) */
section.newsletter-home h2.bandes { padding-top: 135px; margin-bottom: 6px; }
section.newsletter-home h2.bandes:before { width: 114px; height: 105px; }

section.newsletter-home h2.bandes
{
	color: var(--beige);
}

section.newsletter-home .bandes .t-sm { line-height: 0.6; }

/* Message de confirmation après inscription : le JS remplace le <form> par un
   `.pre.center`. Sans style propre il héritait du violet du body SUR le fond
   violet de la section — inséré mais invisible (seul `#nl .pre`, la popup, était
   stylé). */
section.newsletter-home .pre
{
	max-width: 620px;
	margin: 40px auto 0;
	color: var(--blanc);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	text-align: center;
}

section.newsletter-home .nl-inline
{
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 20px;
	max-width: 487px;
	margin: 40px auto 0;
}

section.newsletter-home .champ
{
	flex: 1;
	text-align: left;
}

section.newsletter-home .champ label
{
	display: block;
	color: var(--beige);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 12px;
}

section.newsletter-home .champ input
{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--beige);
	border-radius: 0;
	color: var(--beige);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.2;
	padding: 0 0 10px;
	outline: none;
}

section.newsletter-home .champ input::placeholder { color: var(--beige); opacity: 1; }

section.newsletter-home .submit button
{
	height: 50px;
	padding: 0 32px;
	background: var(--blanc);
	color: var(--violet);
	border: none;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	white-space: nowrap;
	transition: 0.2s all ease-in-out;
}

section.newsletter-home .submit button:hover
{
	background: var(--mauve);
}

/* =========================================================
   PAGES INTÉRIEURES (contact, actus, single, page) — charte
   ========================================================= */
body.page-template-contact,
body.page-template-news,
body.single-post,
body.single,
body.page.page-template-default
{
	background: var(--beige);
}

/* postheader = simple espace sous le header sticky */
body.page-template-contact #postheader,
body.page-template-news #postheader,
body.single-post #postheader
{
	height: 24px;
	background: none;
}

/* Typographie de contenu (page, content.php, contenus WYSIWYG) */
body.page-template-default #content,
body.page-template-news .content,
body.page-template-contact .content,
body.single .entry-content,
body.single .body .text
{
	color: var(--violet);
}

/* Page à contenu classique (mentions légales…) : colonne de texte lisible */
/* Bandes collées au header (annule la marge haute de #content en mode classique) */
body.page-template-default #content:not(.has-blocks)
{
	margin-top: 0;
}
.page-content
{
	max-width: 900px;
	margin: 0 auto;
	padding: 0 20px 80px;
}
/* Titre + bandes identiques au bloc titre-section (Expertises), collés au header */
.page-content h1.bandes
{
	padding-top: 67px;
	margin-bottom: 36px;
	font-size: 44px;
	line-height: 1;
}
.page-content h1.bandes:before
{
	width: 114px;
	height: 47px;
	background-image: url(images/bandes-titre.svg);
	background-size: 114px 47px;
}
.page-content .entry-content p
{
	padding-bottom: 16px;
	line-height: 1.6;
}
.page-content .entry-content h2,
.page-content .entry-content h3
{
	margin: 32px 0 12px;
	font-family: var(--font-title);
	color: var(--violet);
}
.page-content .entry-content a
{
	color: var(--violet);
	text-decoration: underline;
}
.page-content .entry-content ul
{
	padding-left: 22px;
	list-style: disc;
	margin-bottom: 16px;
}

body.page-template-default #content h2,
body.single .entry-content h2
{
	font-family: var(--font-title);
	font-weight: 300;
	color: var(--violet);
}

/* Boutons génériques (CTA) en pilule violette */
.btn
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 32px;
	border-radius: 100px;
	background: var(--violet);
	color: var(--blanc);
	font-family: var(--font-body);
	font-size: 16px;
	transition: 0.2s all ease-in-out;
}

.btn:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

/* ---- CONTACT (page) : formulaire CF7 façon charte ---- */
body.page-template-contact #main-content
{
	padding-bottom: 20px;
}

body.page-template-contact .form
{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 100px;
}

body.page-template-contact .wpcf7 h1
{
	text-align: center;
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 64px;
	color: var(--violet);
	margin-bottom: 10px;
}

body.page-template-contact .wpcf7 .intro
{
	text-align: center;
	color: var(--violet);
	margin-bottom: 40px;
}

body.page-template-contact .wpcf7-form p
{
	margin: 0;
	padding: 0;
	text-align: center;
}

body.page-template-contact .wpcf7-form br
{
	display: none;
}

body.page-template-contact .wpcf7-form-control-wrap
{
	display: block;
	margin-bottom: 28px;
}

body.page-template-contact input[type="email"],
body.page-template-contact input[type="text"],
body.page-template-contact textarea
{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--violet);
	border-radius: 0;
	padding: 10px 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--violet);
	outline: none;
}

body.page-template-contact textarea
{
	resize: vertical;
	min-height: 44px;
}

body.page-template-contact input::placeholder,
body.page-template-contact textarea::placeholder
{
	color: var(--violet);
	opacity: 0.6;
}

body.page-template-contact .wpcf7-submit
{
	display: inline-flex;
	align-items: center;
	height: 50px;
	padding: 0 32px;
	margin-top: 14px;
	background: var(--violet);
	color: var(--blanc);
	border: none;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}

body.page-template-contact .wpcf7-submit:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

body.page-template-contact .mention
{
	text-align: center;
	margin-top: 30px;
	color: var(--violet);
}

body.page-template-contact .mention a
{
	color: var(--violet);
	text-decoration: underline;
}

/* =========================================================
   CONTACT — page dédiée (maquette Figma)
   Hero violet (waves) + form + chips, puis « Venez nous voir »
   ========================================================= */
body.page-template-contact .contact-hero
{
	position: relative;
	background: var(--violet) url(images/hero.svg) no-repeat center top;
	background-size: cover;
	overflow: hidden;
	color: var(--beige);
}

body.page-template-contact .contact-hero-inner
{
	position: relative;
	z-index: 2;
	max-width: 856px;
	margin: 0 auto;
	padding: 160px 20px 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

body.page-template-contact .contact-title
{
	font-family: var(--font-title);
	text-transform: uppercase;
	color: var(--beige);
	line-height: 0.9;
}

body.page-template-contact .contact-title .t-mobile { display: none; }

body.page-template-contact .contact-title .l1
{
	display: block;
	font-weight: 200;
	font-size: 92px;
	letter-spacing: -0.03em;
}

body.page-template-contact .contact-title .l2
{
	display: block;
	font-weight: 900;
	font-size: 92px;
	letter-spacing: -0.03em;
}

body.page-template-contact .contact-hero .hero-bandes
{
	width: 100px;
	height: 100px;
	margin: 24px 0 28px;
	background: url(images/lignes.svg) no-repeat center center;
	background-size: contain;
}

body.page-template-contact .contact-tagline
{
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
	color: var(--blanc);
	margin-bottom: 40px;
}

/* Formulaire CF7 dans le hero violet */
body.page-template-contact .contact-form
{
	width: 100%;
	max-width: 856px;
}

/* Largeur du form dans le hero (bat la règle .page-template-contact .wpcf7 { width:684px }) */
body.page-template-contact .contact-hero .wpcf7
{
	width: 100%;
	max-width: 856px;
	padding: 0;
}

/* Grille 2 colonnes : nom | prénom, puis email + message pleine largeur */
body.page-template-contact .contact-form .wpcf7-form
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 24px;
	text-align: left;
}

body.page-template-contact .contact-form .wpcf7-form br { display: none; }

body.page-template-contact .contact-form .champ
{
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 24px;
}

body.page-template-contact .contact-form .champ.f-email,
body.page-template-contact .contact-form .champ.f-message
{
	grid-column: 1 / -1;
}

body.page-template-contact .contact-form .champ label
{
	color: var(--beige);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1;
}

body.page-template-contact .contact-form .champ-submit
{
	grid-column: 1 / -1;
	display: flex;
	justify-content: center;
	margin-top: 0;
}

body.page-template-contact .contact-form .wpcf7-form-control-wrap { display: block; }

body.page-template-contact .contact-form input[type="text"],
body.page-template-contact .contact-form input[type="email"],
body.page-template-contact .contact-form textarea
{
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--beige);
	border-radius: 0;
	padding: 6px 0;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--beige);
	outline: none;
}

body.page-template-contact .contact-form textarea
{
	resize: vertical;
	height: 44px;
	min-height: 44px;
}

body.page-template-contact .contact-form .wpcf7-submit
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	margin: 0 auto;
	padding: 0 32px;
	background: var(--blanc);
	color: var(--violet);
	border: none;
	border-radius: 100px;
	font-family: var(--font-body);
	font-size: 16px;
	cursor: pointer;
	transition: 0.2s all ease-in-out;
}

body.page-template-contact .contact-form .wpcf7-submit:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

body.page-template-contact .contact-form .wpcf7-spinner
{
	margin: 0 auto;
}

/* Chips email / téléphone */
body.page-template-contact .contact-chips
{
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	max-width: 856px;
	margin-top: 28px;
}

body.page-template-contact .contact-chips .chip
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 22px;
	border: 1px solid var(--beige);
	border-radius: 20px;
	color: var(--beige);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 14px;
}

body.page-template-contact .contact-chips .ic
{
	display: inline-block;
	width: 18px;
	height: 18px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

body.page-template-contact .contact-chips .ic-mail { background-image: url(images/ico-mail.svg); }
body.page-template-contact .contact-chips .ic-phone { background-image: url(images/ico-phone.svg); }

/* « Venez nous voir » — 2 cartes lieux rondes */
body.page-template-contact .venez
{
	background: var(--beige);
	padding: 0 0 160px;
}

body.page-template-contact .venez .lieux
{
	display: flex;
	gap: 56px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 150px;
}

body.page-template-contact .venez .lieu
{
	width: 400px;
	max-width: 100%;
	text-align: center;
}

body.page-template-contact .venez .lieu .photo img
{
	display: block;
	width: 400px;
	max-width: 100%;
	height: auto;
	border-radius: 90px;
}

body.page-template-contact .venez .lieu h3
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 30px;
	color: var(--violet);
	margin: 28px 0 8px;
}

body.page-template-contact .venez .lieu h3 span
{
	background: none;
	border-bottom: 3px solid var(--jaune);
	padding-bottom: 8px;
}

/* p.127 : la ville renvoie vers la page dédiée — le lien ne doit rien changer au visuel
   (le soulignement jaune reste porté par le span). */
body.page-template-contact .venez .lieu h3 a
{
	color: inherit;
	text-decoration: none;
}

body.page-template-contact .venez .lieu p
{
	color: var(--violet);
	font-size: 16px;
	line-height: 26px;
}

/* =========================================================
   ACTUALITÉS / INSIGHTS — grille de cartes (maquette Figma)
   ========================================================= */
/* En-tête Insights : bandes courtes collées au header + titre + sous-titre (pattern titre-section) */
body.page-template-news #postheader { height: 0; }
body.page-template-news h1.bandes { padding-top: 67px; }
body.page-template-news h1.bandes:before
{
	width: 114px;
	height: 47px;
	background-image: url(images/bandes-titre.svg);
	background-size: 114px 47px;
}
body.page-template-news .bandes .t-sm { font-size: 36px; }
body.page-template-news .bandes .t-lg { font-size: 70px; }

body.page-template-news .ts-soustitre
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 40px;
}
body.page-template-news .ts-soustitre .filet { width: 110px; height: 2px; background: var(--violet); }
body.page-template-news .ts-soustitre p
{
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	color: var(--violet);
	text-align: center;
	margin: 0;
}

/* Conteneur : largeur maquette (3 cartes 409 + 2 gaps 20 = 1268) centré */
body.page-template-news .insights .wrap
{
	width: auto;
	max-width: 1308px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

body.page-template-news .insights .content
{
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
}

body.page-template-news .insights-grid
{
	display: grid;
	/* minmax(0,1fr) et non 1fr : sinon une carte au texte composé large (vignette
	   sans image) impose son min-content et élargit sa colonne au détriment des deux
	   autres. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 50px 20px;
	margin-top: 60px;
	margin-bottom: 90px;
}

body.page-template-news .insight .card
{
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 40px;
	overflow: hidden;
}

body.page-template-news .insight .card--img img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =========================================================
   Vignette générée (article sans image) — cf. parts/carte-texte.php
   Créa reprise des vignettes fournies : fond violet + vagues, texte centré et
   DEUX séries de bandes. Toutes les mesures sont en % du côté de la vignette
   (relevées sur les créas 410×410), pour valoir aussi bien dans la grille (409px)
   que dans la colonne d'un article (349px) ou en mobile.
   ========================================================= */
.lb-carte
{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 9.8%; /* 40px sur une vignette de 410 */
	background: var(--violet) url(images/hero.svg) no-repeat center center;
	background-size: cover;
	color: var(--beige);
	overflow: hidden;
	container-type: inline-size; /* la typo se mesure sur la vignette, pas sur l'écran */
}

.lb-carte-bandes { position: absolute; }

/* Variante « hb » : bandes debout (114×105 sur 410), collées en haut et en bas */
.lb-carte--hb .lb-carte-bandes
{
	left: 50%;
	transform: translateX(-50%);
	width: 27.8%;
	height: 25.6%;
	background: url(images/bandes-larges.svg) no-repeat center center;
	background-size: 100% 100%;
}
.lb-carte--hb .lb-carte-bandes--1 { top: 0; }
.lb-carte--hb .lb-carte-bandes--2 { bottom: 0; }

/* Variante « cotes » : bandes couchées, centrées verticalement, dont seule l'amorce
   dépasse du bord — sur les créas, 14px de motif visibles pour 106px de long. */
.lb-carte--cotes .lb-carte-bandes
{
	top: 50%;
	transform: translateY(-50%);
	width: 3.4%;
	height: 27.8%;
	background-image: url(images/bandes-larges-h.svg);
	background-repeat: no-repeat;
	background-size: 757% 100%; /* 106 / 14 : la vignette n'en montre que l'amorce */
}
.lb-carte--cotes .lb-carte-bandes--1 { left: 0;  background-position: left center; }
.lb-carte--cotes .lb-carte-bandes--2 { right: 0; background-position: right center; }

/* Article sans image : la colonne de gauche reçoit la vignette générée, au format
   carré et au même rayon que le ferait une photo. */
.visuel-genere
{
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 30px;
	overflow: hidden;
}

/* La vignette de la grille n'est plus qu'un cadre : la créa est portée par .lb-carte */
body.page-template-news .insight .card--txt
{
	display: block;
	padding: 0;
	color: var(--beige);
}

.lb-carte .card-title
{
	font-family: var(--font-title);
	font-weight: 900;
	font-size: 34px;
	line-height: 1.05;
	text-transform: uppercase;
	text-align: center;
	color: var(--beige);
	margin-top: 0; /* le texte est centré dans la vignette, les bandes ne sont plus en tête */
	width: 92%;
}

.lb-carte--cotes .card-title { width: 84.5%; }

/* Texte de vignette composé (champ ACF « Texte de la vignette ») : trois niveaux
   typographiques de la charte, aux tailles de la planche Figma — mesurées pour une
   vignette de 410px, soit exactement la carte servie ici (409px). */
.lb-carte .card-title--compose
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2px;
	margin-top: 0;
	font-size: 0; /* chaque ligne porte sa propre taille */
	/* Largeur du lettrage, relevée sur les créas : la ligne la plus longue occupe
	   74% de la vignette (« ACTIVATION » : 304px sur 410). Rapporté à la largeur
	   utile (80,5% de la vignette), cela fait 92%. Le texte ne va donc jamais
	   jusqu'aux bords — et surtout jamais jusqu'aux bandes latérales. */
	width: 92%;
	margin-left: auto;
	margin-right: auto;
}

/* Variante à bandes latérales : le lettrage est un peu plus étroit encore
   (« LE PLUS GRAND » : 278px sur 410, soit 68%), pour dégager les bandes. */
.lb-carte--cotes .card-title--compose { width: 84.5%; }

/* Une fois le lettrage ajusté par le JS (ajusterVignettes), chaque ligne du champ
   reste sur UNE ligne : c'est sa taille qui s'adapte à la largeur, comme sur les
   créas, et non le texte qui se casse en deux. */
.card-title--compose.est-ajuste .vt { white-space: nowrap; }

.lb-carte .vt
{
	display: block;
	max-width: 100%;
	font-family: var(--font-title);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--beige);
	overflow-wrap: break-word; /* repli sans JS : un texte trop long passe à la ligne plutôt que de sortir */
	text-wrap: balance;
}

.lb-carte .vt--highlight { font-weight: 900; font-size: 50px; }
.lb-carte .vt--standard  { font-weight: 300; font-size: 40px; }
.lb-carte .vt--petit     { font-weight: 400; font-size: 26px; }

/* Les tailles de la planche valent pour une vignette de 410px. Rapportées à la
   largeur du conteneur, elles suivent la vignette partout : grille (409px), colonne
   d'un article (349px), mobile. Les valeurs en px ci-dessus restent le repli pour
   les navigateurs sans container queries. */

body.page-template-news .insight-meta
{
	padding: 20px 0 0;
}

body.page-template-news .insight-meta .date
{
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: var(--violet);
	margin-bottom: 20px;
}

body.page-template-news .insight-meta .excerpt
{
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 26px;
	color: var(--violet);
	margin: 0;
}

body.page-template-news .insight-meta .excerpt .excerpt-txt
{
	font-weight: 700;
}

body.page-template-news .insight-meta .excerpt a
{
	font-weight: 400;
	color: var(--saumon);
	white-space: nowrap;
}

/* ---- SINGLE actu : titre, bannière, blocs ---- */
body.single-post .head h1
{
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 56px;
	line-height: 1.05;
	color: var(--violet);
	margin-bottom: 16px;
}

body.single-post .head h1 .color
{
	color: var(--saumon);
}

body.single-post .head .soustitre
{
	color: var(--violet);
	font-size: 20px;
	margin-bottom: 30px;
}

body.single-post .image img
{
	border-radius: 30px;
}

/* Single actu : mise en page une colonne centrée (maquette) */
body.single-post #primary .wrap
{
	width: 1000px;
}

body.single-post .image
{
	text-align: center;
}

body.single-post .image img
{
	max-width: 820px;
	margin: 0 auto;
}

body.single-post #primary .body
{
	display: block;
	max-width: 760px;
	margin: 0 auto;
}

body.single-post #primary .body .images
{
	flex: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	background: transparent;
	padding: 30px 0 0;
}

body.single-post #primary .body .text
{
	flex: none;
	width: 100%;
	padding: 36px 0 0;
}

body.single-post .body .images .bloc img
{
	border-radius: 20px;
	display: block;
}

body.single-post .body .images .bloc .legende
{
	color: var(--violet);
	font-size: 14px;
}

/* Respiration entre la fin de l'article et la bande newsletter : sans elle, le
   dernier paragraphe arrivait à 20px du bloc suivant. Même valeur que le pied de
   page d'une fiche réalisation (.rea-body). */
body.single-post #primary .body { padding-bottom: 70px; }

/* Liens dans le corps d'un article : soulignés, à la couleur du texte — sans quoi
   ils sont indiscernables du texte courant (même violet, aucune décoration). */
body.single-post #primary .body .text a
{
	color: var(--violet);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ====== Layout "cote" : image portrait à gauche, texte à droite ====== */
body.single-post.article-layout-cote #primary .wrap
{
	width: 1110px;
}

body.single-post #primary .body.layout-cote
{
	display: flex;
	align-items: flex-start;
	gap: 40px;
	max-width: none;
	margin: 40px 0 0;
}

body.single-post #primary .body.layout-cote .images
{
	flex: 0 0 349px;
	width: 349px;
	display: block;
	padding: 0;
	background: transparent;
}

body.single-post #primary .body.layout-cote .images .bloc-principal img
{
	width: 100%;
	height: auto;
	border-radius: 30px;
	display: block;
}

body.single-post #primary .body.layout-cote .text
{
	flex: 1 1 auto;
	width: auto;
	padding: 0;
}

/* Mobile : image repasse au-dessus du texte, pleine largeur */
@media (max-width: 900px)
{
	/* Marge latérale du single article en mobile. `.wrap` vaut `width: 1512px;
	   max-width: 100%` sans padding : texte et image touchaient les bords de l'écran,
	   dans les DEUX dispositions (le single réalisation, lui, a bien ses 20px).
	   Ciblé sur le wrap direct de #primary pour ne pas doubler le padding des blocs
	   `.full_width` (fond noir / fond gris), qui portent leur propre wrap. */
	body.single-post #primary > .wrap
	{
		padding-left: 20px;
		padding-right: 20px;
	}

	body.single-post.article-layout-cote #primary .wrap
	{
		width: auto;
	}

	body.single-post #primary .body.layout-cote
	{
		display: block;
		margin-top: 24px;
	}

	body.single-post #primary .body.layout-cote .images
	{
		flex: none;
		width: 100%;
		margin-bottom: 24px;
	}

	body.single-post #primary .body.layout-cote .images .bloc-principal img
	{
		width: 100%;
	}
}

/* Bloc pleine largeur fond foncé → violet */
body.single .full_width.fond_noir
{
	background: var(--violet);
	color: var(--beige);
	border-radius: 30px;
}

body.single .full_width.fond_noir .txt,
body.single .full_width.fond_noir .txt *
{
	color: var(--beige);
}

/* Bloc pleine largeur fond gris → beige doux / mauve */
body.single .full_width.fond_gris
{
	background: var(--mauve);
	color: var(--violet-fonce);
	border-radius: 30px;
}

body.single .full_width.fond_gris h2,
body.single .full_width.fond_gris .txt,
body.single .full_width.fond_gris .txt *
{
	color: var(--violet-fonce);
}

/* ---- PAGE générique ---- */
body.page-template-default #content
{
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px 40px;
}

/* Pages en blocs ACF : pleine largeur (full-bleed), pas de contrainte */
body.page-template-default #content.has-blocks
{
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.single .back
{
	position: relative;
}

body.single .back a
{
	position: absolute;
	left: 0;
	bottom: 30px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--violet);
	display: flex;
	align-items: center;
	z-index: 2;
}

body.single .back a span.i
{
	display: block;
	width: 52px;
	height: 52px;
	background: url(images/arrow-prev.svg) no-repeat center center;
	background-size: contain;
	border-radius: 52px;
	margin-right: 13px;
}

body.single .back a.next
{
	position: absolute;
	left: auto;
	right: 0;
	flex-direction: row-reverse;
}

body.single .back a.next span.i
{
	display: block;
	width: 52px;
	height: 52px;
	background: url(images/arrow-next.svg) no-repeat center center;
	background-size: contain;
	border-radius: 52px;
	margin-right: 0;
	margin-left: 13px;
}

body.single #primary .wrap
{
	width: 1312px;
}

body.single-realisation #primary .wrap h1 span
{
	display: block;
	font-size: 20px;
	line-height: 28px;
}

body.single #primary .body
{
	display: flex;
	align-items: flex-start;
}

body.single-realisation #primary .body .images
{
	flex: 0 0 66.666%;
	display: flex;
	background: transparent;
	padding: 0 50px 50px 0;
	gap: 25px;
	flex-wrap: wrap;
	align-items: flex-start;
}

body.single #primary .body .images a
{
	flex: 0 0 calc(50% - 12.5px);
	cursor: pointer;
}

body.single #primary .body .images a img
{
	display: block;
	border-radius: 20px;
}

body.single #primary .body .text
{
	flex: 0 0 33.33%;
	padding: 53px 0;
	color: var(--violet);
}

body.single-realisation #primary .body .text p
{
	color: var(--violet);
}

/* Bannière réalisation arrondie */
body.single-realisation .image img
{
	border-radius: 30px;
}

/* =========================================================
   FICHE RÉALISATION — refonte d'après Figma (8339:5653)
   ========================================================= */
body.single-realisation #primary .wrap { width: auto; max-width: 1248px; margin: 0 auto; padding: 0 20px; }

/* Titre (nom) + sous-titre (type) centrés */
body.single-realisation .rea-titre { text-align: center; }
body.single-realisation .rea-titre h1.bandes
{
	font-family: var(--font-title);
	font-weight: 300;
	font-size: 70px;
	line-height: 60px;
	color: var(--violet);
	margin: 0;
}
body.single-realisation .rea-soustitre
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 24px;
}
body.single-realisation .rea-soustitre .filet { display: block; width: 110px; height: 2px; background: var(--violet); }
body.single-realisation .rea-soustitre .t
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 40px;
	line-height: 44px;
	color: var(--violet);
}

/* Image une + boutons retour / suivant (flèche ronde contour violet) */
body.single-realisation .rea-image { margin-top: 30px; }
body.single-realisation .rea-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 0 40px; /* boutons en recul par rapport au bord de l'image */ }
body.single-realisation .rea-nav a
{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	text-transform: none;
	color: var(--violet);
}
body.single-realisation .rea-nav .fleche
{
	display: inline-block;
	width: 52px;
	height: 32px;
	border: 1px solid var(--violet);
	border-radius: 200px;
	background: url(images/fleche-violet.svg) no-repeat center center;
	background-size: 16px auto;
}
body.single-realisation .rea-nav .fleche-next { transform: scaleX(-1); }
body.single-realisation .rea-image .image { margin: 0; }
body.single-realisation .rea-image .image img { width: 100%; height: auto; display: block; border-radius: 90px; }

/* Hauteur maquette : la bannière est au format fixe 1312×731 (taille realisation_banner).
   Le ratio est imposé en desktop pour qu'une image source trop petite pour le crop
   (ex. carrée 625×625) ne s'affiche pas en pleine hauteur. Mobile inchangé (format carré servi). */
@media (min-width: 901px) {
	body.single-realisation .rea-image .image img { aspect-ratio: 1312 / 731; object-fit: cover; }
	/* Bannière déjà panoramique (rapport >= 1,5) : servie dans son rapport, sans recadrage,
	   pour ne pas raboter les bords du visuel (liserés, cadres). */
	body.single-realisation .rea-image .image-panoramique img { aspect-ratio: auto; object-fit: fill; }
}

/* Corps : 4 vignettes (2×2) à gauche + texte à droite */
body.single-realisation .rea-body { display: flex; gap: 40px; align-items: flex-start; margin-top: 50px; padding-bottom: 70px; }
body.single-realisation .rea-vignettes { flex: 0 0 554px; max-width: 554px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
body.single-realisation .rea-vignettes a { flex: 0 0 calc(50% - 10px); cursor: pointer; }
/* height auto : la vignette garde le rapport de l'image fournie. Une hauteur fixe
   avec object-fit:cover amputait les images, toutes en paysage (1.8 à 1.95).
   Rayon : la maquette pose un arrondi d'environ 11 % de la largeur de la vignette
   (mesuré 35/321 en desktop, 30/351 en mobile) — d'où 30px pour 267px de large.
   À 40px l'arrondi mordait sur le visuel au lieu de ne raboter que l'aplat de
   fond que les images fournies portent sur leurs bords. */
body.single-realisation .rea-vignettes a img { width: 100%; height: auto; border-radius: 30px; display: block; }
body.single-realisation .rea-text { flex: 1 1 auto; min-width: 0; color: var(--violet); }

/* Texte : lead + sections (Poppins SemiBold) + listes à puces */
body.single-realisation .rea-text > *:first-child { margin-top: 0; }
body.single-realisation .rea-text h2,
body.single-realisation .rea-text h3
{
	font-family: var(--font-title) !important;
	font-weight: 600 !important;
	font-size: 44px;
	line-height: 46px;
	color: var(--violet);
	margin: 50px 0 36px;
	text-transform: none;
}
body.single-realisation .rea-text p { font-size: 16px; line-height: 26px; color: var(--violet); margin: 0 0 20px; }
body.single-realisation .rea-text strong, body.single-realisation .rea-text b { font-weight: 700; }
body.single-realisation .rea-text ul { list-style: none; padding: 0; margin: 0 0 20px; }
body.single-realisation .rea-text ul li
{
	position: relative;
	padding-left: 23px;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 26px;
	color: var(--violet);
}
body.single-realisation .rea-text ul li:last-child { margin-bottom: 0; }
body.single-realisation .rea-text ul li::before
{
	content: '';
	position: absolute;
	left: 0; top: 9px;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--saumon);
}

@media (max-width: 900px)
{
	body.single-realisation .rea-titre h1.bandes { font-size: 44px; line-height: 1; }
	body.single-realisation .rea-soustitre .t { font-size: 28px; line-height: 1.1; }
	body.single-realisation .rea-image .image img { border-radius: 60px; }
	body.single-realisation .rea-nav { padding: 0; }
	body.single-realisation .rea-body { flex-direction: column; gap: 24px; }
	body.single-realisation .rea-vignettes { flex: none; max-width: none; width: 100%; }
	body.single-realisation .rea-text { flex: none; width: 100%; }
	body.single-realisation .rea-text h2, body.single-realisation .rea-text h3 { font-size: 30px; line-height: 1.1; margin: 30px 0 20px; }
	body.single-realisation .rea-nav a .t { display: none; } /* garder juste les flèches sur mobile si besoin */
}

body.single #primary .body .text h2, body.single-post .fond_gris h2
{
	font-family: var(--font-title);
	font-weight: 600; /* Poppins SemiBold — iso Figma */
	font-size: 44px;
	line-height: 1.05;
	color: var(--violet);
	margin-bottom: 30px;
}

/* Décoration tiret multicolore : conservée seulement sur le bloc fond gris, retirée du contenu d'article */
body.single-post .fond_gris h2:before
{
	content: '';
	width: 84px;
	height: 4px;
	background: url(images/tiret-multicolor.svg) no-repeat left center;
	background-size: 84px 4px;
	display: block;
	margin-bottom: 22px;
}

body.single-post .fond_gris h2:before
{
	padding-top: 40px;
}

body.single-post #primary .full_width .wrap
{
	padding-left: 390px;
}

body.single-post .fond_gris .txt
{
	padding-left: 30px;
}

body.single #primary .body .text ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}
body.single #primary .body .text ol li {
  counter-increment: my-awesome-counter;
  position: relative;
  padding-left: 47px;
  min-height: 50px;
  margin-bottom: 10px;
}
body.single #primary .body .text ol li::before {
  content: counter(my-awesome-counter);
  color: var(--saumon);
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  font-family: var(--font-title);
  left: 0;
  line-height: 32px;
  width: 32px;
  height: 32px;
  top: 4px;
}

body.single-post .images .legende
{
	color: #696A6C;
	padding-top: 14px;
	display: block;
	line-height: 26px;
}

body.single #primary .body .text ul, body.single #primary .body .text p
{
	margin-bottom: 30px;
}

body.single-post #primary .body .text ul li, body.single-post .fond_gris ul li
{
	margin-bottom: 5px;
}

/* Interligne et espacement resserrés : mesurés sur la maquette à ~24 px de pas de
   ligne et ~19 px entre paragraphes (contre 28 et 30 auparavant, qui aéraient trop). */
body.single-post #primary .body .text li, body.single-post #primary .body .text p, body.single-post .fond_gris p
{
	font-size: 16px;
	line-height: 24px;
}
body.single-post #primary .body .text p { margin-bottom: 20px; }

body.single #primary .body ul li
{
	padding-left: 31px;
	margin-bottom: 15px;
	position: relative;
}

body.single #primary .body ul li:before
{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border: 2.4px solid var(--saumon);
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 7px;
}

body.single-post .fond_gris
{
	background: #F1EFEF;
	padding-bottom: 70px;	 
}

body.single-post .fond_gris .wrap .inner
{
	max-width: 732px;	
}

body.single-post .fond_gris .cta
{
	margin-top: 30px;
}

body.single-post .fond_gris .cta a
{
	display: inline-block;
	background: var(--violet);
	color: var(--blanc);
	height: 50px;
	line-height: 50px;
	padding: 0 32px;
	border-radius: 100px;
	font-size: 16px;
	font-weight: 400;
}

body.single-post .fond_noir
{
	background: #000;
}

body.single-post .fond_noir a, body.single-post .fond_noir
{
	color: #fff;	
	font-size: 32px;
	line-height: 48px;
	font-weight: 700;
}

body.single-post .fond_noir .wrap .inner
{
	max-width: 732px;
	border-top: 9px solid var(--mauve);
	border-bottom: 9px solid var(--mauve);
	padding: 30px 0 30px 41px;
	
}

body.single-post .fond_noir.has_link .wrap .inner .txt
{
	background: url(images/fleche.svg) no-repeat left bottom;
	padding-bottom: 38px;
}



/* Single actu : une colonne centrée (maquette) — surcharge finale */
body.single-post #primary .body
{
	display: block;
	max-width: 760px;
	margin: 0 auto;
}

body.single-post #primary .body .images
{
	flex: none;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
	background: transparent;
	padding: 30px 0 0;
	margin-top: 0;
}

body.single-post #primary .body .text
{
	flex: none;
	width: 100%;
	max-width: none;
	padding: 36px 0 0;
}

body.single-post .intro
{
	font-size: 18px;
	font-weight: bold;
}

body.single-post .image img
{
	display: block;
	max-width: 820px;
	margin: 0 auto;
}

body.single-post #primary .body .images .bloc
{
	margin-bottom: 21px;
}

/* Header d'article : bandes collées au header + titre / sous-titre (façon bloc « titre-section ») */
body.single-post #postheader { height: 0; }

body.single-post .head
{
	padding: 0 20px 40px;
	text-align: center;
	position: relative;
}

/* Les bandes viennent de h1.bandes::before : on neutralise l'ancien pseudo .head::before */
body.single-post .head:before { content: none; }

/* Cas par défaut = layout « cote » : bandes larges (114×106) collées au header */
body.single-post .head h1.bandes
{
	padding-top: 134px;
	margin-bottom: 0;
}

body.single-post .head .t-sm { font-size: 36px; line-height: 1.1; }
/* Titre d'article en capitales : c'est ainsi que le deck donne les douze titres
   d'insights. La bascule est faite ici et non dans le contenu, pour que la base
   garde la casse normale — donc les accents, que le deck avait perdus en écrivant
   en capitales (« MEMOIRE », « SORCIERES »). Le pré-titre, lui, reste tel qu'il est saisi. */
body.single-post .head .t-lg { font-size: 90px; line-height: 0.9; text-transform: uppercase; }
body.single-post .head .t-lg .color { color: var(--saumon); }

/* Sous-titre : filet violet + texte Poppins SemiBold (identique bloc titre-section) */
body.single-post .head .ts-soustitre
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-top: 36px;
}
body.single-post .head .ts-soustitre .filet { width: 110px; height: 2px; background: var(--violet); }
body.single-post .head .ts-soustitre p
{
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 40px;
	line-height: 1.1;
	color: var(--violet);
}

/* Le gabarit d'article suit la maquette « Titre + intro » quelle que soit la
   disposition : bandes 114×106 (bandes-larges.svg, barres pleine hauteur), titre à
   135px du haut du bloc, capitales de 90px. Le layout « large » portait ici des
   bandes 134×96 tirées de bandes-titre.svg et un titre de 70px, mesurés sur une
   capture basse définition du deck ; la maquette fait foi et les deux dispositions
   sont désormais alignées dessus. */

/* Layout « large » : la bannière occupe une largeur bien supérieure au texte (≈1248px iso Figma) */
body.single-post.article-layout-large #primary .wrap { width: 1248px; }
body.single-post.article-layout-large .image img { width: 100%; max-width: 1248px; }

/* Header d'article — mobile : bandes réduites (≈78×60) + titres à l'échelle Figma mobile */
@media (max-width: 900px)
{
	body.single-post .head { padding-bottom: 24px; }
	body.single-post #primary .body { padding-bottom: 40px; }

	body.single-post .head h1.bandes { padding-top: 74px; }
	body.single-post .head h1.bandes:before
	{
		width: 78px;
		height: 60px;
		background-size: contain;
	}
	body.single-post .head .t-sm { font-size: 22px; }
	body.single-post .head .t-lg { font-size: 40px; line-height: 1; }
	body.single-post .head .ts-soustitre { margin-top: 24px; gap: 14px; }
	body.single-post .head .ts-soustitre p { font-size: 26px; }

	/* Bannière (layout large) : contrainte à la largeur écran (évite le débordement horizontal) */
	body.single-post .image img { width: 100%; max-width: 100%; height: auto; }

	/* h2 de contenu — mobile (Poppins SemiBold 22, iso Figma) */
	body.single #primary .body .text h2 { font-size: 22px; margin-bottom: 20px; }
}

body.home section.paragraphes .wrap
{
	width: 1056px;
}

body.home section.paragraphes
{
	padding-bottom: 70px;
}

body.home section.paragraphes .blocs
{
	padding-top: 30px;
}

body.home section.paragraphes .bloc
{
	display: flex;
	min-height: 331px;
}

body.home section.paragraphes .bloc:nth-child(2n)
{
	flex-flow: row-reverse;
}

body.home section.paragraphes .bloc .txt, body.home section.paragraphes .bloc .rect
{
	flex: 0 0 50%;
}

body.home section.paragraphes .bloc .rect
{
	/*
	background: #FCF1EB;
	*/
	display: flex;
	justify-content: center;
	align-items: center;
}


body.home section.paragraphes .bloc .rect img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.home section.paragraphes .bloc h3
{
	font-size: 30px;
	line-height: 40px;
	font-family: var(--font-title);
	font-weight: bold;
}

body.home section.paragraphes .bloc h4
{
	font-size: 18px;
	line-height: 20px;
	font-family: var(--font-title);
	font-weight: bold;
}

body.home section.paragraphes .bloc .txt
{
	font-weight: 400;
	font-size: 15px;
	line-height: 24px;
	padding: 50px 75px 50px 0;
	display: flex;
	align-items: center;
	position: relative;
}

body.home section.paragraphes .bloc .txt:before
{
	position: absolute;
	width: 48px;
	height: 48px;
	background: #FFDF00;
	content: '';
	right: 0;
	bottom: 0;
}

body.home section.paragraphes .bloc:nth-child(2n) .txt
{
	padding: 50px 0 50px 75px;
}

body.home section.paragraphes .bloc:nth-child(2n) .txt:before
{
	right: auto;
	left: 0;
}

body.home section.paragraphes .bloc:nth-child(2n) .txt:after
{
	position: absolute;
	width: 48px;
	height: 48px;
	background: #FFDF00;
	content: '';
	left: 0;
	top: 0;
}

body.home section.paragraphes .bloc:nth-child(2n+3) .txt:before
{
	bottom: auto;
	top: 0;	
}

body.home section.paragraphes .bloc .txt .t
{
	padding-top: 20px;
}

body.home section.paragraphes .more
{
	margin-top: 70px;
}

body.home section.paragraphes li
{
	padding-left: 31px;
	margin-bottom: 5px;
	position: relative;
}

body.home section.paragraphes li:before
{
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border: 2.4px solid #FFDF00;
	border-radius: 12px;
	position: absolute;
	left: 0;
	top: 7px;
}

.isotopes {
	width: 1290px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
}

body.page-template-realisations #filters
{
	margin-top: 48px;
}

body.page-template-realisations #filters .types, body.page-template-realisations #filters .categories, body.page-template-realisations #filters .all
{
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

body.page-template-realisations #filters .types
{
	margin-bottom: 23px;
	margin-top: 23px;
}

body.page-template-realisations #filters .item
{
	height: 34px;
	background: var(--blanc);
	border-radius: 20px;
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-size: 13px;
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--violet);
	cursor: pointer;
	white-space: nowrap;
	transition: 0.15s all ease-in-out;
}

body.page-template-realisations #filters .categories .item
{
	border: 1px solid var(--violet);
	background: none;
}

/* Bouton principal « Toutes nos réalisations » : plus grand que les sous-filtres */
body.page-template-realisations #filters .all .item
{
	height: 50px;
	padding: 0 32px;
	font-size: 16px;
	border-radius: 100px;
}

body.page-template-realisations #filters .item.active,
body.page-template-realisations #filters .item:hover
{
	background: var(--violet);
	color: var(--blanc);
	border-color: var(--violet);
}

/* Fond beige des pages réalisations / single réalisation */
body.page-template-realisations,
body.single-realisation
{
	background: var(--beige);
}

body.page-template-realisations #postheader, body.single #postheader
{
	height: 24px;
	background: none;
}

/* Article (single-post) : bandes collées au header, pas de gap postheader */
body.single-post #postheader { height: 0; }

/* Titre des pages Réalisations (listing + single) : bandes courtes (bandes-titre.svg)
   collées au header (pas de gap au-dessus) */
body.page-template-realisations #postheader,
body.single-realisation #postheader { height: 0; }

body.page-template-realisations h1.bandes,
body.single-realisation h1.bandes { padding-top: 67px; }

body.page-template-realisations h1.bandes:before,
body.single-realisation h1.bandes:before
{
	height: 47px;
	background-image: url(images/bandes-titre.svg);
	background-size: 114px 47px;
}

/* Container/padding autour du listing (sinon la grille touche les bords) */
body.page-template-realisations #main-content > .wrap
{
	width: auto;
	max-width: 1311px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

body.page-template-realisations .content
{
	text-align: center;
	color: var(--violet);
}

body.page-template-realisations .content p
{
	color: var(--violet);
}

body.page-template-realisations .isotopes
{
	margin-top: 50px;
}

/* Images de la grille arrondies (réalisations + single) */
body.page-template-realisations .isotopes .grid-item img
{
	border-radius: 20px;
}

/* =========================================================
   RÉALISATIONS — grille BENTO (maquette 8339:5760)
   Par bloc de 6 : 2 petites + 1 grande (haut-droite) + 1 grande
   (bas-gauche) + 2 petites.
   ========================================================= */
.realisations-grid
{
	margin-top: 50px;
}

.bento
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, 1fr);
	gap: 20px;
	aspect-ratio: 1271 / 948;
	margin-bottom: 20px;
}

.bento .b-item
{
	display: block;
	border-radius: 90px;
	overflow: hidden;
}

.bento .b-item img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bento .b-pos-0 { grid-area: 1 / 1 / 2 / 2; }
.bento .b-pos-1 { grid-area: 1 / 2 / 2 / 3; }
.bento .b-pos-2 { grid-area: 1 / 3 / 3 / 5; }
.bento .b-pos-3 { grid-area: 2 / 1 / 4 / 3; }
.bento .b-pos-4 { grid-area: 3 / 3 / 4 / 4; }
.bento .b-pos-5 { grid-area: 3 / 4 / 4 / 5; }

body.page-template-default #content
{
	margin: 50px auto;
	width: 1280px;
	max-width: 100%;
	padding: 0 20px;
}

#content ul
{
	padding-left: 20px;
	list-style-type: disc;
	margin-bottom: 20px;
}

#content ul li
{
	margin-bottom: 5px;
}

#content p
{
	padding-bottom: 0;
}

@media(min-width: 901px)
{
	.grid {
	
	}
	
	/* clear fix */
	.grid:after {
	  content: '';
	  display: block;
	  clear: both;
	}
	
	/* ---- .element-item ---- */
	
	.grid-item {
	  position: relative;
	  float: left;
	  height: 302px;
	  margin: 10px;
	  padding: 0px;
	  color: white;
	  font-size: 50px;
	  display: flex;
	}
	
	.grid-sizer { width: 50%; }
	
	
	.grid-item--height2 { height: 625px; }
	
	
	
	.grid-item--width2 { width: calc(50% - 20px) } 
	
	.grid-item div + div {
		margin-left: 20px;	
	}
	
	.grid-item div {
		display: flex;
	}
	
	.grid-item img {
		display: block;
		object-fit: cover;
		height: 100%;
	}
}

.wrap
{
	width: 1512px;
	max-width: 100%;
	margin: 0 auto;
}

.more {
	display: flex;
	justify-content: center;
}

.more a {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 28px;
	color: var(--blanc);
	background: var(--violet);
	border-radius: 100px;
	padding: 11px 32px;
	transition: 0.2s all ease-in-out;
}

.more a:hover {
	background: var(--mauve);
	color: var(--violet-fonce);
}

.calameo iframe {
	width: 100%;
	height: 600px;
}

body.page-template-news .content {
	font-size: 20px;
	text-align: center;
	margin: 40px 0;
}

.page-template-contact #main .wrap
{
	width: 1068px;
	margin: 0 auto;
	max-width: 100%;
}

.page-template-contact .mention
{
	text-align: center;
}

.page-template-contact h2.bandes
{
	padding-top: 136px;
	margin-top: 0;
}

.page-template-contact .wp-block-contact-form-7-contact-form-selector
{
	min-height: 0;
	background: none;
}

.page-template-contact .wpcf7
{
	width: 684px;
	max-width: 100%;
	margin: 0 auto;
	background: transparent;
	color: var(--violet);
	padding: 30px 0 60px;
}


.page-template-contact .mention a
{
	font-weight: 400;
}

.page-template-contact .mention a:hover
{
	text-decoration: underline;
}

.page-template-contact .wpcf7 a
{
	color: var(--violet);
}

.page-template-contact .wp-block-columns
{
	margin-top: 65px;
	gap: 56px;
	margin-bottom: 100px;
}

.page-template-contact .wp-block-column:first-child .wp-block-group
{
	display: flex;
	justify-content: flex-end;
}

.page-template-contact .wp-block-column:last-child .wp-block-group
{
	display: flex;
	justify-content: flex-start;
}

.page-template-contact .wp-block-columns .wp-block-group__inner-container
{
	margin: 0!important;
}

.page-template-contact .wp-block-columns span
{
	text-decoration-color: var(--saumon)!important;
	text-decoration-thickness: 3px!important;
	text-underline-offset: 7px;
}

.page-template-contact .wp-block-columns h3
{
	font-family: var(--font-title);
	font-weight: bold;
	font-size: 30px;
	margin-top: 30px;
	margin-bottom: 15px;
}

.page-template-contact h1
{
	font-family: var(--font-title);
	font-weight: bold;
	font-size: 60px;
	text-align: center;
	text-transform: uppercase;
}

/* Le titre du hero contact n'a pas de tiret multicolore : les bandes verticales
   juste en dessous portent déjà la couleur, le filet faisait doublon. */
.page-template-contact h1:after { content: none; }

.page-template-contact .intro
{
	margin: 45px 0;
	text-align: center;
	font-weight: 700;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	padding: 0 20px;
}

.page-template-contact .form input[type=text], .page-template-contact .form input[type=email], .page-template-contact .form textarea
{
	background: none;
	border: 0;
	border-bottom: 1px solid #fff;
	width: 100%;
	height: 50px;
	margin-bottom: 14px;
	color: #fff;
	font-family: 'Open Sans', serif; 
	font-size: 15px; 
	font-weight: 400;
	border-radius: 0;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output
{
	border-color: red;
	color: red;
}

.wpcf7-submit {
	height: 50px;
	display: flex;
	align-items: center;
	padding: 0 32px;
	font-size: 16px;
	font-family: var(--font-body);
	color: var(--blanc);
	background: var(--violet);
	border: none;
	border-radius: 100px;
	cursor: pointer;
	margin: 0 auto;
	transition: 0.2s all ease-in-out;
}


.wpcf7-submit:hover {
	background: var(--mauve);
	color: var(--violet-fonce);
}

/* =========================================================
   CLOUDFLARE TURNSTILE (CF7) — remplace reCAPTCHA en prod, en mode INVISIBLE.
   Même sans rien afficher, son conteneur occupe une cellule des grilles de
   formulaire (mesuré en prod : 303 × 69, « Votre nom » repoussé en 2e colonne).
   On le sort donc du flux ; s'il lui arrive d'afficher un challenge, il se
   montrera en bas à gauche du formulaire.
   ========================================================= */
.wpcf7-form { position: relative; }

/* Selon la version du plugin, le widget est enfant direct du <form> ou
   enveloppé dans un <p> / .wpcf7-form-control-wrap : `display: contents`
   retire ce conteneur de la grille sans toucher au widget lui-même. */
.wpcf7-form p:has(> .cf-turnstile),
.wpcf7-form p:has(> .wpcf7-form-control-wrap > .cf-turnstile),
/* classe doublée : bat les règles `… .wpcf7-form-control-wrap { display: block }`
   des pages contact et du bloc contact, plus spécifiques autrement. */
.wpcf7-form .wpcf7-form-control-wrap.wpcf7-form-control-wrap:has(> .cf-turnstile)
{
	display: contents;
}

.wpcf7-form .cf-turnstile
{
	position: absolute;
	left: 0;
	bottom: 0;
	margin: 0;
	z-index: 2;
}

/* Mobile : le widget reste en absolu (cf. ci-dessus) — simplement réduit, car
   s'il affiche un challenge il fait ~300px de large pour un formulaire de ~271px.
   Le `clip` absorbe la boîte de layout (que `transform` ne réduit pas) : sans lui,
   un débordement ne créerait pas de scroll sur ce site mais ferait dézoomer toute
   la page (cf. le titre « accompagnées »). */
@media (max-width: 900px)
{
	.wpcf7-form { overflow-x: clip; }

	.wpcf7-form .cf-turnstile
	{
		transform: scale(0.88);
		transform-origin: 0 100%;
	}
}

.page-template-contact .form textarea
{
	outline: none;
	padding: 15px 0;
	height: 140px;
	resize: none;
}

#footer
{
	background: var(--violet);
}

#footer .wrap
{
	height: 130px;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--beige);
}

#footer .wrap .left
{
	flex: 1;
	padding-left: 100px;
}

#footer .wrap .left img
{
	width: 252px;
	max-width: 100%;
}

#footer .wrap .center
{
	font-size: 10px;
	line-height: 14px;
	color: var(--beige);
	font-family: var(--font-body);
	text-align: center;
	display: flex;
	flex-flow: column;
	align-items: center;
}

#footer .wrap .center .txt
{
	width: 241px;
}

#footer .wrap .right
{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: 100px;
}

#footer .wrap .right a
{
	color: var(--beige);
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 400;
}

#footer .wrap .right .nav-menu
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#footer .wrap .right .nav-menu li
{
	margin-left: 13px;
}

#footer .wrap .right li.linkedin
{
	margin-left: 20px;
}

#footer .wrap .right li.linkedin a
{
	text-indent: -10000px;
	width: 32px;
	height: 32px;
	display: block;
	background: url(images/linkedin.svg) no-repeat center center;
}

#footer .wrap .right li.contact a
{
	text-indent: -10000px;
	width: 32px;
	height: 32px;
	display: block;
	background: url(images/email.svg) no-repeat center center;
}

/* =========================================================
   POPUP NEWSLETTER — iso Figma (8339:5459)
   ========================================================= */
#nl
{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 438px;
	max-width: calc(100% - 40px);
	box-sizing: border-box;
	z-index: 999999;
	background: var(--beige);
	display: none;
}

body.popup #nl
{
	display: block;
}

#nl .pad
{
	padding: 0px;
	position: relative;
}

#nl .close
{
	display: block;
	width: 22px;
	height: 22px;
	background: url(images/close-white.svg) no-repeat center center / 100%;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: -37px;
}

@media(max-height: 720px)
{
	#nl
	{
		max-height: calc(100vh - 20px);
		overflow: auto;
		top: 10px;
		transform: translateX(-50%);
	}

	#nl .close
	{
		background: url(images/close.svg) no-repeat center center / 100%;
		right: 20px;
		top: 20px;
		z-index: 2;
	}
}

/* ---- Bandeau violet (swirl + bandes + titre) ---- */
#nl .titre
{
	position: relative;
	height: 159px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 55px; /* ~20px sous les bandes (h35) */
	gap: 2px;          /* écart réduit entre les 2 lignes du titre */
	background: var(--violet) url(images/hero.svg) no-repeat center center;
	background-size: cover;
	color: var(--beige);
	font-family: var(--font-title);
	text-align: center;
	line-height: 1;
}

#nl .titre .bandes-pop
{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 114px;
	height: 35px;
	background: url(images/bandes-larges.svg) no-repeat center top;
	background-size: 114px 106px;
}

#nl .titre .t-sm { font-weight: 400; font-size: 20px; line-height: 29px; }
#nl .titre .t-lg { font-weight: 300; font-size: 60px; line-height: 59px; }

/* ---- Corps beige (intro + champs + bouton) ---- */
#nl #nlform
{
	background: var(--beige);
	padding: 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0; /* espacements gérés par les marges ci-dessous */
}

#nl .intro
{
	margin: 0 0 20px; /* écart intro -> formulaire réduit */
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 16px;
	line-height: 26px;
	color: var(--violet);
	text-align: center;
}

#nl .fields
{
	width: 340px;
	max-width: 100%;
	margin-bottom: 40px; /* écart formulaire -> bouton inchangé */
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#nl .row { margin: 0; }

#nl input[type=text], #nl input[type=email]
{
	box-sizing: border-box;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--violet);
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0;
	color: var(--violet);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
}

/* Labels-placeholder des champs = violet Inter 16 (pas le gris italique générique) */
#nl input::-webkit-input-placeholder { color: var(--violet); opacity: 1; font-family: var(--font-body); font-size: 16px; font-style: normal; font-weight: 400; }
#nl input::-moz-placeholder          { color: var(--violet); opacity: 1; font-family: var(--font-body); font-size: 16px; font-style: normal; font-weight: 400; }
#nl input:-ms-input-placeholder      { color: var(--violet); opacity: 1; font-family: var(--font-body); font-size: 16px; font-style: normal; font-weight: 400; }
#nl input::placeholder               { color: var(--violet); opacity: 1; font-family: var(--font-body); font-size: 16px; font-style: normal; font-weight: 400; }

#nl .pre
{
	padding: 40px;
	text-align: center;
	color: var(--violet);
}

#nl .submit
{
	display: flex;
	justify-content: center;
	margin: 0;
}

#nl input[type=submit]
{
	margin: 0;
	border: none;
	height: 50px;
	padding: 0 32px;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	background: var(--violet);
	color: var(--blanc);
	border-radius: 100px;
	font-size: 16px;
	font-family: var(--font-body);
	font-weight: 400;
	transition: 0.2s all ease-in-out;
}

#nl input[type=submit]:hover
{
	background: var(--mauve);
	color: var(--violet-fonce);
}

.form textarea::-webkit-input-placeholder, .form input::-webkit-input-placeholder { color:#767676; opacity: 1; font-family: 'Open Sans', serif; font-size: 15px; font-style: italic; font-weight: 400;  }
.form textarea::-moz-placeholder, .form input::-moz-placeholder { color:#767676; opacity: 1; font-family: 'Open Sans', serif; font-size: 15px; font-style: italic; font-weight: 400;  } 
.form textarea:-ms-input-placeholder, .form input:-ms-input-placeholder { color:#767676; opacity: 1; font-family: 'Open Sans', serif; font-size: 15px; font-style: italic; font-weight: 400;  }
.form textarea:-moz-placeholder, .form input:-moz-placeholder { color:#767676; opacity: 1; font-family: 'Open Sans', serif; font-size: 15px; font-style: italic; font-weight: 400;  }

.page-template-contact .wpcf7-form textarea::-webkit-input-placeholder, .page-template-contact .wpcf7-form input::-webkit-input-placeholder { color:#fff;   }
.page-template-contact .wpcf7-form textarea::-moz-placeholder, .page-template-contact .wpcf7-form input::-moz-placeholder { color:#fff;  } 
.page-template-contact .wpcf7-form textarea:-ms-input-placeholder, .page-template-contact .wpcf7-form input:-ms-input-placeholder { color:#fff; }
.page-template-contact .wpcf7-form textarea:-moz-placeholder, .page-template-contact .wpcf7-form input:-moz-placeholder { color:#fff;  }

.bx-wrapper .bx-viewport {
	background: none;
	box-shadow: none;
	left: 0;
	border: 0;
}

.bx-wrapper .bx-controls-direction a {
	z-index: 2;
}

#carres_loader {
	position: absolute;
	left: -10000px;
	top: -10000px;
}

@media (min-width: 835px)
{
	.full_width
	{
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
}

@media(min-width: 1528px)
{
	body.home section.carres .wrap {
		background-size: 100%;
		width: 100%;
	}
	
	#header .wrap {
		width: 100%;
	}
	
	#header .wrap .right {
		flex: 0 0 28.5%;
	}

	#header .wrap .right .black {
		flex: 0 0 50.2%;		
	}
	
	.page-template-contact .wp-block-contact-form-7-contact-form-selector {
		background-size: 100%;
	}
}

@media(max-width: 1355px)
{
	body.single .back {
		margin: 0 20px;
	}
	
	body.single .entry-content {
		padding-right: 20px;
	}
	
	body.home section.paragraphes, body.home section.clients {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#footer .wrap .left {
		padding-left: 20px;
	}
	
	#footer .wrap .right {
		padding-right: 20px;
	}
}

@media(max-width: 1355px)
{
	#footer .wrap .right .nav-menu {
		flex-wrap: wrap;
	}
	
	#footer .wrap .right li.linkedin a, #footer .wrap .right li.contact a {
		margin-top: 10px;
	}
}




@media(max-width: 900px)
{
	body, a {
		font-size: 14px;
	}
	
	#carres_loader {
		display: none;
	}
	
	body.single-post .head:before {
		display: none;
	}
	
	.more {
		justify-content: flex-start;
	}
	
	.swiper-button-prev {
		width: 33px;
		height: 33px;
	}
	
	.swiper-button-next {
		width: 33px;
		height: 33px;
	}
	
	.bx-wrapper .bx-controls-direction a.bx-prev {
		background: #000 url(images/prev.svg) no-repeat center center / 16px;
		left: -16px;
		border-radius: 33px;
	}
	
	.bx-wrapper .bx-controls-direction a.bx-next {
		background: #000 url(images/next.svg) no-repeat center center / 16px;
		right: auto;
		border-radius: 33px;
		left: calc(100vw - 82px);
	}
	
	.isotopes {
		width: 300vw;
		max-width: none;
		margin-left: 20px;
		margin-bottom: 38px;
	}
	
	body.home .isotopes .grid > div {
		padding-right: 20px;
	}
	
	.bx-wrapper {
		margin: 0!important;
	}
	
	/* HEADER mobile — burger gauche, logo centré (contact masqué, accessible via menu) */
	#header .wrap {
		height: 60px;
		padding: 0 16px;
	}

	#header .wrap #toggle {
		width: 50px;
		height: 26px;
		flex: 0 0 50px;
		background-size: contain;
	}

	#header .wrap .logo {
		width: 160px;
		max-width: 48%;
	}
	#header .wrap .logo img {
		height: auto;
		width: 100%;
	}

	#header .wrap .contact {
		display: none;
	}

	/* HERO mobile */
	section.hero {
		min-height: 0;
	}

	section.hero .hero-inner {
		padding: 56px 20px 56px;
	}

	section.hero .hero-title .l1 {
		font-size: 52px;
	}

	section.hero .hero-title .l2 {
		font-size: 66px;
	}

	section.hero .hero-bandes {
		width: 70px;
		height: 74px;
		margin: 24px 0 28px;
	}

	section.hero .hero-baseline {
		width: 100%;
	}

	section.hero .hero-baseline span {
		font-size: 24px;
	}

	section.hero .hero-baseline .fleche {
		flex: 0 0 32px;
		width: 32px;
		height: 20px;
	}

	section.hero .hero-baseline .fleur {
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
	}

	/* WELCOME mobile */
	section.welcome {
		padding: 60px 0;
	}

	section.welcome .wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
		width: auto;
		max-width: calc(100% - 40px);
	}

	section.welcome .welcome-logo {
		flex: 0 0 auto;
		width: 180px;
	}

	section.welcome .welcome-txt .intro {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 28px;
	}

	/* INTERLOCUTEUR mobile */
	section.interlocuteur {
		padding: 56px 0;
	}

	section.interlocuteur .wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 36px;
		width: auto;
		max-width: calc(100% - 40px);
	}

	section.interlocuteur .deco {
		flex-direction: row;
		gap: 20px;
	}

	section.interlocuteur .deco img {
		width: 120px;
	}

	section.interlocuteur .bloc h2 {
		font-size: 30px;
	}

	body.home section.content .top {
		height: 111px;
	}
	
	body.home section.content .part1, body.home section.content .part2 {
		margin: 0;
		flex-flow: column;
		gap: 16px;
	}
	
	body.home section.content .titre {
		flex: 1;
		font-size: 40px;
		line-height: 51px;
	}
	
	body.home section.content .part1 {
		padding: 0 20px 20px 20px;
		background: #000;
		margin-top: -1px;
	}
	
	body.home section.content .part2 {
		padding: 25px 20px 20px 20px;
	}
	
	body.home section.content .part2 .titre {
		display: none;	
	}
	
	body.home section.content .titre > div {
		display: flex;
	}
	
	body.home section.content .part1 .right .intro {
		font-size: 14px;
		line-height: 22px;
		font-weight: 400;
	}
	
	body.home section.content .right h2 {
		font-size: 20px;
		padding-top: 0;
		margin-bottom: 10px;
	}
	
	body.home section.content .right h2.bandes {
		margin-bottom: 60px;	
	}
	
	
	
	body.home section.content .right h2:before {
		display: none;	
	}
	
	body.home section.content .right li {
		margin-bottom: 7px;
	}
	
	body.home section.content .wrap + .wrap {
		padding: 0 0 40px 0;
	}
	
	h2.bandes {
		font-size: 35px;
		line-height: 35px;
		min-height: 0px!important;
		height: 130px;
		background: url(images/bandes_mobile.svg) no-repeat 1px top;
		text-align: left;
		padding-top: 61px;
		margin-bottom: 42px;
	}
	
	h1.bandes {
		font-size: 40px;
		line-height: 40px;	
		background: none;
		text-align: center;
		min-height: 0;
		padding-top: 27px;
		margin-top: 0;
	}
	
	h1.bandes span {
		display: block;
	}
	
	h2.bandes span {
		display: block;
	}
	
	body.home section.content {
		background: none;
	}
	
	body.home section.paragraphes .bloc, body.home section.paragraphes .bloc:nth-child(2n) {
		flex-flow: column;
	}
	
	/* Titres de section (bandes) mobile — taille fluide : 46px reste le maximum,
	   mais sous ~447px de large le titre suit la largeur d'écran pour qu'un mot
	   long (« accompagnées » mesurait 367px pour 311px dispo) ne déborde plus.
	   Un débordement ici ne coupe pas le mot : il fait afficher TOUTE la page
	   dézoomée par Chrome mobile. */
	.bandes .t-sm { font-size: min(26px, 5.8vw); }
	.bandes .t-lg { font-size: min(46px, 10.3vw); }
	h1.bandes, h2.bandes { padding-top: 116px; }

	/* Newsletter inline mobile */
	section.newsletter-home .nl-inline {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	section.newsletter-home .submit button {
		width: 100%;
	}

	#footer {
		padding-top: 44px;
		border: 0;
	}
	
	#footer .wrap {
		height: auto;
		flex-flow: column;
	}
	
	body.home section.content .top {
		background: #000 url(images/pattern.png) no-repeat right center / auto 100%;
	}
	
	#footer .wrap .left {
		padding: 0 ;
	}
	
	#footer .wrap .center {
		margin: 15px 0;
	}
	
	#footer .wrap .right {
		padding: 10px;
		background: transparent;
		justify-content: center;
		width: 100%;
	}

	#footer .wrap .right , #footer .wrap .right a {
		color: var(--beige);
	}
	
	#footer .wrap .right .nav-menu {
		flex-wrap: wrap;
		justify-content: center;
		max-width: 205px;
	}
	
	#footer .wrap .right .nav-menu li {
		order: 2;
		margin: 0 5px;
	}
	
	#footer .wrap .right li.linkedin {
		width: 50%;
		order: 1;
		margin: 0 0 5px 0;
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
	}
	#footer .wrap .right li.contact {
		width: 50%;
		order: 1;
		margin: 0 0 5px 0;
		display: flex;
		justify-content: flex-start;
		padding-left: 10px;
	}
	
	#footer .wrap .right li.contact a {
		background: url(images/email.svg) no-repeat center center;
	}

	#footer .wrap .right li.linkedin a {
		background: url(images/linkedin.svg) no-repeat center center;
	}
	
	body.home section.realisations {
		padding-bottom: 59px;
	}
	
	body.home section.realisations .mobile {
		width: 100vw;
		overflow: hidden;
	}
	
	body.home section.realisations .wrap {
		padding: 0 20px;
	}
	
	body.home section.realisations .more {
		padding-left: 20px;
	}
	
	body.home section.content .right li:before {
		border-color: #FFDF00;
	}
	
	body.home section.realisations .texte {
		text-align: left;
		margin-bottom: 30px;
	}
	
	body.home section.clients {
		padding-top: 5px;
		padding-left: 20px;
		padding-right: 20px;
	}
	
	
	body.home section.clients h2.bandes{
		margin-top: -25px;
		background: url(images/bandes_mobile.svg) no-repeat left top;
		min-height: 0;
	}
	
	body.home section.clients .logos {
		height: 169px;
		padding: 0;
		background: none;
	}	
	
	body.home section.clients .logos .swiper-slide {
		background: #fff;
		padding:  0 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.swiper-button-prev {
		left: -16.5px;
		background-size: 16px;
	}
	
	.swiper-button-next {
		right: -16.5px;
		background-size: 16px;
	}
	
	body.home section.paragraphes {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	body.home section.paragraphes h2.bandes {
		margin-top: -20px!important;
	}
	
	body.home section.paragraphes .blocs {
		padding-top: 0;
	}
	
	body.home section.paragraphes .bloc {
		min-height: 0;
	}
	
	body.home section.paragraphes .bloc .txt, body.home section.paragraphes .bloc:nth-child(2n) .txt {
		padding: 0;
	}
	
	body.home section.paragraphes .bloc .rect {
		height: 240px;
		flex: 0 0 auto;	
		margin-top: 35px;
	}
	
	body.home section.paragraphes .bloc .txt:before, body.home section.paragraphes .bloc .txt:after {
		display: none;
	}
	
	body.home section.paragraphes .bloc .rect {
		position: relative;
		margin-bottom: 40px;
	}
	
	body.home section.paragraphes .bloc .rect:before {
		content: '';
		width: 20px;
		height: 20px;
		background: #FFDF00;
		position: absolute;
		left: -20px;
		bottom: -20px;
	}
	
	body.home section.paragraphes .bloc .txt {
		font-size: 14px;
		line-height: 22px;
	}
	
	body.home section.paragraphes .more {
		margin-top: 10px;
	}
	
	body.home section.paragraphes {
		padding-bottom: 40px;
	}
	
	body.home section.clients {
		padding-bottom: 100px;
	}
	
	#nav {
		width: 175px;
	}

	#nav .nav-menu a {
		font-size: 17px;
		min-height: 50px;
		padding: 8px 20px;
	}

	#nav .nl-block .t { font-size: 20px; }
	#nav .nl-block .d { font-size: 13px; }

	#terms {
		width: 175px;
		transform: translateX(-175px);
	}

	body.nav2 #terms {
		transform: translateX(175px);
	}

	#terms .types { padding-top: 90px; }
	#terms a { font-size: 15px; padding: 6px 20px; }
	
	body.page-template-realisations #postheader, body.single #postheader {
		height: 16px;
		background: none;
		position: relative;
	}

	body.page-template-realisations #postheader:before, body.single #postheader:before {
		display: none;
	}
	
	.page-template-realisations .content {
		font-size: 15px;
	}
	
	body.page-template-realisations #filters .item {
		font-size: 14px;
		height: 50px;
		border-radius: 50px;
	}
	
	body.page-template-realisations .isotopes, body.page-template-news .isotopes {
		margin-top: 35px;
		width: 100%;
		margin-left: 0;
	}
	
	body.page-template-realisations .isotopes img, body.page-template-news .isotopes img {
		display: block;
		padding: 0 20px 20px 20px;
	}
	
	body.page-template-realisations .isotopes .grid-item, body.page-template-news .isotopes .grid-item {
		display: flex;
		align-items: center;
		flex-flow: column;
	}

	/* Bento réalisations mobile : 1 colonne, items carrés */
	.realisations-grid { margin-top: 35px; }
	.bento {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		aspect-ratio: auto;
		gap: 24px;
		margin-bottom: 24px;
		padding: 0 20px;
	}
	.bento .b-item {
		grid-area: auto !important;
		aspect-ratio: 1 / 1;
		border-radius: 40px;
	}

	/* Insights grid mobile : 1 colonne */
	body.page-template-news .insights-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		margin-top: 40px;
	}

	.lb-carte .card-title {
		font-size: 30px;
	}

	.lb-carte .vt--highlight { font-size: 40px; }
	.lb-carte .vt--standard  { font-size: 32px; }
	.lb-carte .vt--petit     { font-size: 21px; }
	
	.bandes.bandestop {
		padding-top: 27px;
	}
	
	.bandes.bandestop::before {
		display: none;
	}
	
	body.single .back {
		padding: 0 50px;
	}
	
	body.single .back .t{
		display: none;
	}
	
	body.single #primary .body {
		flex-flow: column-reverse;
	}
	
	body.single .entry-content {
		padding-left: 20px;
	}
	
	body.single-post .intro, body.single-post .fond_gris {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	body.single .image {
		display: flex;
		justify-content: center;
		padding: 0 20px;
	}
	
	body.single #primary .body .images {
		display: block;
		padding: 0 20px;
		margin: 0;
	}
	
	body.single-post #primary .body .images {
		display: flex;
		gap: 10px;
		margin: 0;
	}
	
	body.single-post #primary .full_width .wrap  {
	
		padding-left: 0;
	}
	
	body.single-post #primary .full_width .wrap .inner {
	
		padding-right: 20px;
	}
	
	body.single #primary .body .images img {
		width: 100%;
	}
	
	body.single #primary .body .imagesContainer {
		width: 390px;
		max-width: calc(100% - 40px);
		margin: 0 auto;
	}
	
	body.single .bx-wrapper .bx-controls-direction a.bx-next {
		left: auto;
		right: -16px;
	}
	
	body.single #primary .body .text {
		padding-bottom: 27px;
	}
	
	body.single-realisation #primary .body {
		padding-bottom: 50px;
	}
	
	body.single #primary .body .text h2 {
		line-height: 1;
	}
	
	
	#nl .titre .t-lg { font-size: 52px; }

	#nl #nlform {
		padding: 30px;
	}
	
	.page-template-contact .wpcf7 {
		padding: 30px 20px;
	}
	
	.page-template-contact h2.bandes {
		margin-top: -20px;
		padding-top: 50px;
		padding-left: 10px;
		margin-bottom: 24px;
	}
	
	.page-template-contact .content {
		padding: 0 20px;
	}
	
	.page-template-contact .wp-block-columns {
		flex-flow: column;
	}
	
	.page-template-contact .wp-block-column:first-child .wp-block-group, .page-template-contact .wp-block-column:last-child .wp-block-group {
		justify-content: center;
	}
	
	.page-template-contact .wp-block-columns {
		background: none;
	}
	
	.page-template-contact .mention span {
		display: block;
	}
	
	.page-template-contact .intro {
		margin: 25px 0 10px 0;
	}
	
	.page-template-contact .wp-block-columns h3 {
		margin-top: 10px;
	}
	
	.page-template-contact .wp-block-columns {
		margin-top: 0;
		gap: 25px;
	}
	
	.page-template-contact .wp-block-contact-form-7-contact-form-selector {
		min-height: 0;
		padding-top: 20px;
		background: none;
	}

	.page-template-contact #postheader {
		background: none;
		height: 16px;
		position: relative;
	}

	.page-template-contact #postheader:before,
	.page-template-contact #postheader:after {
		display: none;
	}

	.page-template-contact .wp-block-columns {
		margin-bottom: 60px;
	}

	.page-template-contact h1 {
		font-size: 40px;
	}

	/* CONTACT mobile (maquette : « On en parle », 1 colonne) */
	body.page-template-contact .contact-title .t-desktop { display: none; }
	body.page-template-contact .contact-title .t-mobile { display: block; }

	body.page-template-contact .contact-hero-inner {
		padding: 56px 20px 64px;
	}

	body.page-template-contact .contact-title .l1 { font-size: 56px; }
	body.page-template-contact .contact-title .l2 { font-size: 72px; }

	body.page-template-contact .contact-hero .hero-bandes {
		width: 70px;
		height: 74px;
		margin: 20px 0 24px;
	}

	body.page-template-contact .contact-form .wpcf7-form {
		grid-template-columns: 1fr;
		gap: 0;
	}

	body.page-template-contact .contact-chips {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}

	body.page-template-contact .venez {
		padding: 56px 0 80px;
	}

	body.page-template-contact .venez .lieux {
		flex-direction: column;
		gap: 40px;
		margin-top: 40px;
	}

	body.page-template-contact .venez .lieu,
	body.page-template-contact .venez .lieu .photo img {
		width: 100%;
	}
}

/* =========================================================
   Vignette générée : typographie proportionnelle
   Placé en fin de feuille à dessein — ce bloc doit l'emporter sur les tailles en
   pixels déclarées plus haut, y compris celles des media queries mobiles, qui ne
   servent que de repli aux navigateurs sans container queries.
   ========================================================= */
@supports (container-type: inline-size)
{
	/* 1cqw = 1% de la LARGEUR UTILE de la vignette, padding déduit : 410 − 2×40 = 330
	   sur la maquette. Les coefficients sont donc rapportés à 330, pas à 410. */
	.lb-carte .card-title    { font-size: 10.3cqw; }  /* 34 / 330 */
	.lb-carte .vt--highlight { font-size: 15.15cqw; } /* 50 / 330 */
	.lb-carte .vt--standard  { font-size: 12.12cqw; } /* 40 / 330 */
	.lb-carte .vt--petit     { font-size: 7.88cqw; }  /* 26 / 330 */
}