/* =====================================================================
   LEB — Joydesign / Newdeco — composants spécifiques (Accueil + secondaires)
   Extrait des <style> inlines des fichiers de référence.
   Hypothèse : theme.json a `disableLayoutStyles: true`, donc WordPress
   n'ajoute plus de classes is-layout-* ni de wp-container-* parasites.
   Les wp-block-group sont des <div> neutres qui héritent uniquement de
   nos classes design.
   ===================================================================== */

/* ============ HERO (accueil) ============ */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; background:var(--ink-bg); }
.hero__bg{ position:absolute; inset:0; }
.hero__bg > figure,
.hero__bg > .wp-block-image,
.hero__bg > img{ position:absolute; inset:0; margin:0; width:100%; height:100%; opacity:0; transition:opacity 1.6s var(--ease); }
.hero__bg > figure.on,
.hero__bg > .wp-block-image.on,
.hero__bg > img.on{ opacity:1; }
.hero__bg figure img,
.hero__bg .wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{
	content:""; position:absolute; inset:0; z-index:1;
	background:
		linear-gradient(180deg, rgba(15,31,49,.52) 0%, rgba(15,31,49,.46) 45%, rgba(15,31,49,.92) 100%);
}
.hero__in{
	position:relative; z-index:2;
	max-width:var(--maxw);
	margin-inline:auto; width:100%;
	padding:0 var(--gutter) clamp(48px,7vw,96px);
	color:var(--paper);
}
/* Eyebrow du hero : pastille ivoire semi-transparente pour ressortir sur l'image */
.hero .hero__eyebrow,
p.hero__eyebrow{
	display:inline-flex !important; align-items:center;
	background:rgba(244,239,231,.38);
	-webkit-backdrop-filter:blur(6px);
	backdrop-filter:blur(6px);
	color:var(--ink) !important;
	padding:8px 18px;
	border-radius:var(--r-pill);
	border:1px solid rgba(244,239,231,.32);
	width:fit-content;
}
.hero .hero__eyebrow::before,
p.hero__eyebrow::before{ background:var(--ink) !important; }
/* Masquée quand elle arrive sous la barre de navigation ou trop près
   d'elle : la collision dépend aussi de la hauteur de l'écran, elle est
   donc mesurée en JavaScript (main.js). */
.hero .hero__eyebrow.is-sous-nav,
p.hero__eyebrow.is-sous-nav{ display:none !important; }
.hero h1{ color:var(--paper); font-size:var(--t-mega); line-height:.98; max-width:16ch; margin:22px 0 0; }
.hero__sub{ color:rgba(244,239,231,.86); font-size:var(--t-lead); max-width:48ch; margin-top:26px; }
.hero__actions{ display:flex; align-items:center; gap:18px; margin-top:38px; flex-wrap:wrap; }
.hero__foot{ display:flex; align-items:center; gap:28px; margin-top:54px; flex-wrap:wrap; border-top:1px solid var(--line-light); padding-top:26px; }
.hero__foot > *{ display:block; }
.hero__foot .stat__num{ color:var(--paper); font-size:clamp(1.8rem,1.2rem + 1.4vw,2.4rem); margin:0; }
.hero__foot .stat__label{ color:rgba(244,239,231,.62); margin-top:2px; }

.play{ display:inline-flex; align-items:center; gap:12px; color:var(--paper); cursor:pointer; font-weight:600; font-size:.875rem; letter-spacing:.01em; padding:13px 24px 13px 16px; border-radius:var(--r-pill); background:rgba(15,31,49,.34); border:1px solid rgba(244,239,231,.32); -webkit-backdrop-filter:blur(12px) saturate(130%); backdrop-filter:blur(12px) saturate(130%); transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease); }
.play:hover{ background:rgba(15,31,49,.52); border-color:rgba(244,239,231,.6); transform:translateY(-2px); }
.play__disc{ width:30px; height:30px; border-radius:var(--r-pill); border:1px solid rgba(244,239,231,.55); display:grid; place-items:center; flex:none; transition:.4s var(--ease); }
.play:hover .play__disc{ background:var(--paper); border-color:var(--paper); }
.play:hover .play__disc svg{ fill:var(--ink); }
.play__disc svg{ fill:var(--paper); transition:.4s var(--ease); margin-left:2px; }

/* ============ UNIVERS — PANNEAUX EXPANSIBLES ============ */
.univers{ display:flex; gap:6px; height:min(74vh,640px); }
.upanel{ position:relative; flex:1; overflow:hidden; cursor:pointer; transition:flex .7s var(--ease); border-radius:var(--r-sm); background:var(--ink-bg); }
.upanel:hover{ flex:3.2; }
.upanel > figure,
.upanel > .wp-block-image,
.upanel > img{ position:absolute; inset:0; margin:0; width:100%; height:100%; }
.upanel figure img,
.upanel .wp-block-image img,
.upanel > img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); filter:brightness(.72) saturate(.95); }
.upanel:hover figure img,
.upanel:hover .wp-block-image img,
.upanel:hover > img{ transform:scale(1.05); filter:brightness(.82); }
.upanel__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,31,49,0) 40%,rgba(15,31,49,.85)); }
.upanel__body{ position:absolute; inset:auto 0 0 0; padding:26px; color:var(--paper); z-index:2; }
.upanel__idx{ font-size:var(--t-xs); letter-spacing:var(--track-eyebrow); color:var(--brass-soft); font-weight:600; margin:0; }
.upanel__name{ font-family:var(--font-display); font-size:clamp(1.3rem,1rem + 1vw,2rem); margin-top:8px; line-height:1; color:var(--paper); }
.upanel__more{ overflow:hidden; max-height:0; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease); }
.upanel:hover .upanel__more{ max-height:120px; opacity:1; margin-top:12px; }
.upanel__more p{ font-size:.9rem; color:rgba(244,239,231,.82); margin:0; }
.upanel__more .link-line{ color:var(--paper); margin-top:10px; font-size:.82rem; }

/* ============ RÉALISATIONS ============ */
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.proj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.proj-grid .project{ aspect-ratio:4/5; display:block; }
.proj-grid .project.hide{ display:none; }

/* ============ MÉTHODE — STEPPER (legacy, gardé pour compat) ============ */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; border:1px solid var(--line); background:var(--line); }
.step{ background:var(--paper); padding:30px 24px; transition:background .4s var(--ease); }
.step:hover{ background:var(--paper-2); }
.step__n{ font-family:var(--font-display); font-size:.85rem; color:var(--accent-deep); margin:0; }
.step h4{ margin:14px 0 10px; font-size:1.15rem; }

/* ============ MÉTHODE — TIMELINE horizontale (nouveau) ============ */
.methode__head{
	max-width:780px; margin-right:auto; margin-left:0;
	margin-bottom:clamp(64px,8vw,112px);
	text-align:left; display:flex; flex-direction:column; gap:18px; align-items:flex-start;
}
.methode__head .h2{ max-width:26ch; text-wrap:balance; }
.methode__head .lead{ max-width:52ch; color:var(--ink-2); }

.methode__timeline{
	display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,32px);
	position:relative; padding-top:8px;
}
.methode__timeline::before{
	content:""; position:absolute; left:calc(10% / 2); right:calc(10% / 2); top:38px;
	height:1px; background:linear-gradient(to right, transparent 0%, var(--accent) 8%, var(--accent) 92%, transparent 100%);
	z-index:0; opacity:.5;
}
.methode__step{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-right:8px; }
.methode__dot{
	width:76px; height:76px; border-radius:var(--r-pill);
	background:var(--paper); border:1px solid var(--accent);
	display:grid; place-items:center;
	box-shadow:0 0 0 6px var(--paper);
	transition:all .5s var(--ease);
}
.methode__step:hover .methode__dot{
	background:var(--accent); border-color:var(--accent);
	transform:translateY(-4px); box-shadow:0 0 0 6px var(--paper), var(--shadow-md);
}
.methode__dot span{
	font-family:var(--font-display); font-size:1.4rem; font-weight:500;
	color:var(--accent-deep); letter-spacing:-.01em;
	transition:color .5s var(--ease);
}
.methode__step:hover .methode__dot span{ color:var(--paper); }
.methode__step h4{ margin:8px 0 0; font-size:1.1rem; }
.methode__step p{ font-size:.92rem; color:var(--ink-3); margin:0; line-height:1.55; }

@media (max-width:900px){
	.methode__head{ max-width:none; text-align:left; align-items:flex-start; margin-left:0; }
	.eyebrow--right{ flex-direction:row; }
	.eyebrow--right::before{ display:inline-block; }
	.eyebrow--right::after{ display:none; }
	.methode__timeline{ grid-template-columns:1fr 1fr; }
	.methode__timeline::before{ display:none; }
}
@media (max-width:560px){
	.methode__timeline{ grid-template-columns:1fr; }
}

/* ============ SERVICES (4 cartes) ============ */
.wp-block-column.service{ padding:clamp(24px,2.4vw,38px); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); transition:all .5s var(--ease); position:relative; }
.wp-block-column.service:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service__num{ font-family:var(--font-display); font-size:var(--t-sm); color:var(--accent-deep); font-weight:500; margin:0; }
.service .h4{ margin:var(--s-4) 0 var(--s-3); }

/* ============ SIGNATURE / DIFFÉRENCE ============ */
.sig{ display:grid; grid-template-columns:1.05fr .95fr; gap:0; }
.sig__img{ position:relative; overflow:hidden; min-height:520px; }
.sig__img figure,
.sig__img .wp-block-image{ width:100%; height:100%; margin:0; }
.sig__img figure img,
.sig__img .wp-block-image img,
.sig__img > img{ width:100%; height:100%; object-fit:cover; }
.sig__body{ padding:clamp(40px,5vw,88px); display:flex; flex-direction:column; justify-content:center; }
.sig__list{ list-style:none; padding:0; margin:32px 0 0; display:grid; gap:0; }
.sig__list li{ padding:18px 0; border-top:1px solid var(--line-light); display:flex; gap:18px; align-items:baseline; }
.sig__list li:last-child{ border-bottom:1px solid var(--line-light); }
.sig__list .n{ font-family:var(--font-display); color:var(--brass-soft); font-size:.85rem; min-width:30px; }
.sig__list .t{ color:var(--paper); }

/* ============ NEWDECO — UNIVERS PARTICULIERS ============ */
.nd{ background:var(--paper-2); border-top:1px solid var(--line); position:relative; overflow:hidden; }

/* Sécurité : pas de scroll horizontal créé par les éléments décoratifs qui débordent */
html, body{ overflow-x:hidden; }

/* ========== Accessibilité ========== */
/* Skip link (sauter au contenu) — visible au focus seulement */
.skip-link, .leb-skip-link{
	position:absolute; top:-9999px; left:8px;
	background:var(--ink); color:var(--paper);
	padding:14px 22px; border-radius:var(--r-sm);
	font-family:var(--font-sans); font-weight:600; font-size:.9rem;
	text-decoration:none; z-index:999;
}
.skip-link:focus, .leb-skip-link:focus{ top:8px; }

/* Focus visible sur tous les éléments interactifs */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .chip:focus-visible, .play:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.wp-block-button__link:focus-visible{
	outline:2px solid var(--accent);
	outline-offset:3px;
	border-radius:var(--r-sm);
}
.hero a:focus-visible, .on-dark a:focus-visible,
.hero button:focus-visible, .on-dark button:focus-visible,
.hdr a:focus-visible, .hdr button:focus-visible{
	outline-color:var(--brass-soft);
}

/* Respect du prefers-reduced-motion sur les animations principales */
@media (prefers-reduced-motion: reduce){
	.upanel, .upanel img, .project img, .nd__media img, .sig__img img,
	.play, .play__disc, .play__disc svg,
	.hero__bg figure, .hero__bg img,
	.logo-ticker__track{ transition:none !important; animation:none !important; }
}

/* ============ ÉLÉMENT DÉCORATIF "Joy." ============ */
/* Lettrage Didone immense en background des sections, opacité subtile.
   Variants : .deco-joy--right / .deco-joy--left / .deco-joy--bottom / .deco-joy--on-dark */
.deco-joy{
	position:absolute; pointer-events:none; user-select:none;
	/* Même fonte que le logo : Helvetica Neue, graisse bold comme le « Joy »
	   du logotype. Hors environnement Apple, le repli Arial en est le plus
	   proche — l'élément est à 5 % d'opacité, l'écart ne se voit pas. */
	font-family:"Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	font-weight:700; line-height:.78;
	/* Approche calée sur le logotype : dans le logo les lettres se touchent.
	   Comparaison à hauteur de capitale égale → -.12em. */
	font-size:clamp(200px, 29vw, 500px); letter-spacing:-.12em;
	color:var(--ink); opacity:.05;
	z-index:0;
}
.deco-joy .dot{ color:var(--accent); opacity:1; }
.deco-joy--right{ right:-.05em; top:50%; transform:translateY(-50%); }
.deco-joy--right-top{ right:calc((100% - 100vw) / 2); top:-.15em; transform:none; }
.deco-joy--left-bottom{ left:-.08em; bottom:-.25em; transform:none; }
.deco-joy--on-dark{ color:var(--paper); opacity:.035; }
.deco-joy--on-dark .dot{ color:var(--brass-soft); }

/* Symbole infini Newdeco en élément décoratif de background — centré, immense, opacité subtile */
.nd__bg-logo{
	position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
	width:min(130%,2000px); height:auto; max-width:none;
	opacity:.08; pointer-events:none; z-index:0;
	user-select:none;
}

.nd > *:not(.nd__bg-logo){ position:relative; z-index:1; }

.nd__head{
	display:flex !important;
	flex-direction:column; align-items:flex-start;
	max-width:780px;
	margin-bottom:clamp(48px,6vw,80px);
}
.nd__head .wp-block-column{ flex:none; }
.nd__logo{ height:74px; width:auto !important; margin-bottom:22px; }
.nd__logo img{ height:74px; width:auto; max-width:none; }
.nd__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:14px; }
.nd__media{ position:relative; overflow:hidden; border-radius:var(--r-sm); min-height:420px; display:block; }
.nd__media figure,
.nd__media .wp-block-image{ position:absolute; inset:0; margin:0; }
.nd__media figure img,
.nd__media .wp-block-image img,
.nd__media > img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.nd__media:hover figure img,
.nd__media:hover .wp-block-image img,
.nd__media:hover > img{ transform:scale(1.05); }
.nd__media .badge{ position:absolute; left:22px; bottom:22px; z-index:2; }
.nd__cards{ display:grid; grid-template-rows:repeat(3,1fr); gap:14px; }
.nd__card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); padding:clamp(20px,2vw,30px); display:flex; gap:18px; align-items:flex-start; transition:all .45s var(--ease); }
.nd__card:hover{ border-color:var(--clay); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.nd__card__n{ font-family:var(--font-display); color:var(--clay-deep); font-size:1rem; flex:none; padding-top:2px; }
.nd__card h4{ margin:0 0 6px; }
.nd__cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:30px; }

/* ============ MODAL RDV — tunnel stepper 4 étapes ============ */
.rdv-modal{
	position:fixed; inset:0; z-index:100;
	background:rgba(15,31,49,.86); backdrop-filter:blur(10px);
	display:none; align-items:stretch; justify-content:center;
	overflow-y:auto; padding:24px;
}
.rdv-modal.open{ display:flex; }
.rdv-modal__box{
	width:min(960px,100%); margin:auto;
	background:var(--paper); border-radius:var(--r-md);
	box-shadow:var(--shadow-lg);
	position:relative; overflow:hidden;
	display:flex; flex-direction:column;
	max-height:calc(100vh - 48px);
}
.rdv-modal__close{
	position:absolute; top:18px; right:18px; z-index:5;
	background:transparent; border:0; cursor:pointer;
	width:42px; height:42px; border-radius:var(--r-pill);
	display:grid; place-items:center;
	color:var(--ink-3); font-size:1.6rem; line-height:1;
	transition:all .3s var(--ease);
}
.rdv-modal__close:hover{ background:var(--ink); color:var(--paper); }

/* Progress bar */
.rdv-progress{
	height:2px; background:var(--line); position:relative;
}
.rdv-progress__bar{
	position:absolute; left:0; top:0; bottom:0;
	background:var(--accent); width:25%;
	transition:width .5s var(--ease);
}

/* En-tête du stepper */
.rdv-head{
	padding:clamp(28px,3.5vw,52px) clamp(28px,4vw,68px) clamp(20px,2.5vw,32px);
	border-bottom:1px solid var(--line);
}
.rdv-step-counter{
	font-family:var(--font-sans); font-size:.78rem; font-weight:600;
	text-transform:uppercase; letter-spacing:.18em; color:var(--accent-deep);
	margin:0;
}
.rdv-head h2{
	font-family:var(--font-display); font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);
	color:var(--ink); margin:8px 0 0; line-height:1.1; letter-spacing:-.01em;
}
.rdv-head__sub{
	font-size:1rem; color:var(--ink-3); margin:12px 0 0;
}

/* Corps des steps */
.rdv-body{ padding:clamp(24px,3.5vw,48px) clamp(28px,4vw,68px); overflow-y:auto; flex:1; }
.rdv-step{ display:none; }
.rdv-step.is-active{ display:block; animation:rdvFade .4s var(--ease); }
@keyframes rdvFade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* Étape 1 — Univers (6 cartes visuelles) */
.rdv-grid-universe{
	display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.rdv-card-universe{
	position:relative; overflow:hidden; border-radius:var(--r-sm);
	aspect-ratio:4/3; cursor:pointer; border:0; padding:0; background:var(--ink-bg);
	transition:transform .4s var(--ease);
}
.rdv-card-universe:hover{ transform:translateY(-3px); }
.rdv-card-universe img{
	position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
	transition:transform 1s var(--ease); filter:brightness(.75);
}
.rdv-card-universe:hover img{ transform:scale(1.06); filter:brightness(.85); }
.rdv-card-universe span{
	position:absolute; left:0; right:0; bottom:0; padding:18px 18px 16px;
	color:var(--paper); font-family:var(--font-display); font-size:1.1rem;
	background:linear-gradient(180deg, transparent 0%, rgba(15,31,49,.85) 100%);
	text-align:left;
}
.rdv-card-universe.is-selected{ outline:2px solid var(--accent); outline-offset:2px; }

/* Étape 2 — Cadrage */
.rdv-field-group{ display:grid; gap:28px; }
.rdv-field label{
	display:block; font-size:.78rem; font-weight:600; text-transform:uppercase;
	letter-spacing:.14em; color:var(--ink-3); margin-bottom:10px;
}
.rdv-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.rdv-chip{
	display:inline-flex; align-items:center; padding:11px 18px; border-radius:var(--r-pill);
	border:1px solid var(--line-strong); background:transparent;
	font-family:var(--font-sans); font-size:.88rem; font-weight:500; color:var(--ink-2);
	cursor:pointer; transition:all .3s var(--ease);
}
.rdv-chip:hover{ border-color:var(--ink); color:var(--ink); }
.rdv-chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.rdv-input{
	width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--ink);
	background:transparent; border:0; border-bottom:1px solid var(--line-strong);
	padding:12px 2px;
}
.rdv-input:focus{ outline:none; border-color:var(--accent); }
.rdv-range{ width:100%; accent-color:var(--accent); margin:8px 0 4px; }
.rdv-range-value{
	font-family:var(--font-display); font-size:1.6rem; color:var(--ink); font-weight:500;
	display:inline-block; line-height:1;
}

/* Étape 3 — Coordonnées + créneaux */
.rdv-cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:680px){ .rdv-cols-2{ grid-template-columns:1fr; } }

/* Étape 4 — Confirmation */
.rdv-recap{
	background:var(--paper-2); border-radius:var(--r-sm);
	padding:clamp(20px,2.4vw,32px); display:grid; gap:14px;
	border:1px solid var(--line);
}
.rdv-recap dt{ font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin:0; }
.rdv-recap dd{ font-family:var(--font-display); font-size:1.15rem; color:var(--ink); margin:4px 0 0; }
.rdv-success{ text-align:center; padding:clamp(24px,4vw,56px) 0; }
.rdv-success__dot{
	width:72px; height:72px; border-radius:var(--r-pill);
	background:var(--accent); margin:0 auto 24px;
	display:grid; place-items:center; color:var(--paper); font-size:2.2rem;
	animation:rdvSuccess .6s var(--ease);
}
@keyframes rdvSuccess{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* Footer actions */
.rdv-actions{
	display:flex; justify-content:space-between; align-items:center; gap:14px;
	padding:20px clamp(28px,4vw,68px);
	border-top:1px solid var(--line); background:var(--paper);
}
.rdv-back{
	background:transparent; border:0; cursor:pointer;
	font-family:var(--font-sans); font-size:.88rem; font-weight:500; color:var(--ink-2);
	display:inline-flex; align-items:center; gap:8px;
	padding:10px 14px; border-radius:var(--r-sm); transition:all .3s var(--ease);
}
.rdv-back:hover{ color:var(--ink); background:var(--sand); }
.rdv-back.is-hidden{ visibility:hidden; }
.rdv-next, .rdv-submit{
	display:inline-flex; align-items:center; gap:10px;
	font-family:var(--font-sans); font-size:.9rem; font-weight:600; letter-spacing:.02em;
	padding:14px 26px; border-radius:var(--r-pill);
	background:var(--accent); color:var(--paper); border:1px solid var(--accent);
	cursor:pointer; transition:all .35s var(--ease);
}
.rdv-next:hover, .rdv-submit:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-2px); }
.rdv-next:disabled, .rdv-submit:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

@media (max-width:680px){
	.rdv-grid-universe{ grid-template-columns:1fr 1fr; }
}

/* ============ STATS premium (chiffres clés magazine éditorial) ============ */
.stats-row{
	display:grid; grid-template-columns:repeat(4,1fr); gap:0;
	border-top:1px solid var(--line); border-bottom:1px solid var(--line);
	margin-top:clamp(48px,6vw,80px);
}
.stat-card{
	padding:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px);
	border-right:1px solid var(--line);
	position:relative;
	display:flex; flex-direction:column; gap:18px;
}
.stat-card:last-child{ border-right:0; }
.stat-card__num{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(2.4rem,1.6rem + 2.8vw,4.2rem);
	color:var(--ink); line-height:.95;
	letter-spacing:-.02em;
	display:inline-flex; align-items:baseline; gap:.18em;
	margin:0;
}
.stat-card__num small{
	font-family:var(--font-sans); font-weight:500;
	font-size:.32em; letter-spacing:0;
	color:var(--accent-deep); text-transform:uppercase;
	letter-spacing:.06em;
}
.stat-card__divider{
	width:28px; height:1px; background:var(--accent); display:block;
}
.stat-card__label{
	font-family:var(--font-sans); font-size:.82rem;
	text-transform:uppercase; letter-spacing:.14em; font-weight:600;
	color:var(--ink-3); line-height:1.4;
	margin:0;
}
.theme--newdeco .stat-card__num small{ color:var(--clay-deep); }
.theme--newdeco .stat-card__divider{ background:var(--clay); }

/* Variant sombre (sur .on-dark) */
.on-dark .stats-row{ border-color:var(--line-light); }
.on-dark .stat-card{ border-color:var(--line-light); }
.on-dark .stat-card__num{ color:var(--paper); }
.on-dark .stat-card__num small{ color:var(--brass-soft); }
.on-dark .stat-card__label{ color:rgba(244,239,231,.6); }

@media (max-width:900px){
	.stats-row{ grid-template-columns:1fr 1fr; }
	.stat-card{ border-right:0; border-bottom:1px solid var(--line); }
	.stat-card:nth-child(odd){ border-right:1px solid var(--line); }
	.stat-card:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:560px){
	.stats-row{ grid-template-columns:1fr; }
	.stat-card{ border-right:0 !important; border-bottom:1px solid var(--line); }
	.stat-card:last-child{ border-bottom:0; }
}

/* ============ CONTACT ============ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px); }
.contact__form{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact__form .full{ grid-column:1/-1; }

/* Contact page complet */
.c-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,90px); align-items:start; }
.c-form{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.c-form .full{ grid-column:1/-1; }
.c-form select.twkless{ font-family:var(--font-sans); font-size:var(--t-body); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--line-strong); padding:12px 2px; }
.c-form select.twkless:focus{ outline:none; border-color:var(--accent); }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:.86rem; color:var(--ink-3); }
.consent input{ margin-top:3px; accent-color:var(--accent); width:16px; height:16px; flex:none; }

.info-card{ border:1px solid var(--line); border-radius:var(--r-sm); padding:clamp(26px,3vw,40px); background:var(--paper); }
.info-row{ padding:18px 0; border-bottom:1px solid var(--line); }
.info-row:last-child{ border-bottom:0; }
.info-row dt{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--greige); font-weight:600; margin:0; }
.info-row dd{ margin:6px 0 0; color:var(--ink); }

.brands{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border:1px solid var(--line); background:var(--line); margin-top:24px; border-radius:var(--r-sm); overflow:hidden; }
.brand-cell{ background:var(--paper); padding:22px; }
.brand-cell .dot{ width:30px; height:30px; border-radius:var(--r-pill); margin-bottom:12px; }

.map{ position:relative; height:clamp(280px,34vw,420px); background:var(--ink-bg); overflow:hidden; }
.map__grid{ position:absolute; inset:0; background-image:linear-gradient(rgba(244,239,231,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,231,.06) 1px,transparent 1px); background-size:46px 46px; }
.map__pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); text-align:center; color:var(--paper); }
.map__dot{ width:18px; height:18px; border-radius:var(--r-pill); background:var(--accent); margin:0 auto 10px; box-shadow:0 0 0 8px rgba(176,141,87,.22); }

@media (max-width:900px){ .c-grid{ grid-template-columns:1fr; } .c-form{ grid-template-columns:1fr; } }

/* ============ VIDEO MODAL ============ */
.modal{ position:fixed; inset:0; z-index:90; background:rgba(20,16,15,.86); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:24px; }
.modal.open{ display:flex; }
.modal__box{ width:min(960px,100%); aspect-ratio:16/9; background:var(--ink-bg-2); border:1px solid var(--line-light); border-radius:var(--r-sm); display:grid; place-items:center; position:relative; overflow:hidden; }
.modal__ph{ text-align:center; color:rgba(244,239,231,.7); }
.modal__close{ position:absolute; top:-46px; right:0; color:var(--paper); background:none; border:0; font-size:1.6rem; cursor:pointer; }

/* ============ PAGE UNIVERS — piliers ============ */
.pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pillar{ padding:clamp(26px,2.6vw,40px); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); }
.pillar__k{ font-size:var(--t-xs); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--accent-deep); font-weight:600; }
.pillar h3{ margin:14px 0 12px; font-size:1.5rem; }
.pillar ul{ margin:18px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.pillar li{ font-size:.95rem; color:var(--ink-2); padding-left:20px; position:relative; }
.pillar li::before{ content:""; position:absolute; left:0; top:9px; width:7px; height:1px; background:var(--accent); }

.twocol{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,6vw,90px); align-items:center; }
.twocol--end{ align-items:end; }
.svc-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border:1px solid var(--line); background:var(--line); }
.svc-cell{ background:var(--paper); padding:28px 24px; }
.svc-cell .n{ font-family:var(--font-display); color:var(--accent-deep); font-size:.85rem; }
.svc-cell h4{ margin:12px 0 8px; }

/* ============ PROJET — étude de cas ============ */
.narr{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(32px,6vw,96px); }
.gal figure{ margin:0; overflow:hidden; border-radius:var(--r-sm); }
.pquote{ font-family:var(--font-display); font-size:clamp(1.6rem,1.1rem + 1.8vw,2.8rem); line-height:1.2; color:var(--ink); max-width:20ch; }
.nextproj{ position:relative; overflow:hidden; min-height:420px; display:flex; align-items:center; }
.nextproj img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.55); transition:transform 1.1s var(--ease), filter 1.1s var(--ease); }
.nextproj:hover img{ transform:scale(1.05); filter:brightness(.62); }
.tags-inline{ display:flex; gap:24px; flex-wrap:wrap; margin-top:8px; }

/* ============ CAROUSEL LOGOS PARTENAIRES (ticker infini) ============ */
.logo-ticker{
	overflow:hidden; width:100%;
	mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-ticker__track{
	display:flex; align-items:center; gap:clamp(48px,5vw,80px);
	width:max-content;
	animation:logoTickerScroll 80s linear infinite;
}
.logo-ticker:hover .logo-ticker__track{ animation-play-state:paused; }
.logo-ticker .logo-cell{
	flex:none; height:60px;
	display:flex; align-items:center; justify-content:center;
	padding:0;
	border:0;
}
.logo-ticker .logo-cell img{
	max-height:60px; max-width:160px; width:auto; height:auto;
	object-fit:contain;
	filter:grayscale(1) opacity(.55);
	transition:filter .5s var(--ease);
}
.logo-ticker .logo-cell img:hover{ filter:grayscale(0) opacity(1); }
@keyframes logoTickerScroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
	.logo-ticker__track{ animation-duration:240s; }
}

/* ============ JOURNAL (carrefour blog) ============ */

/* Article à la une */
.feat{ position:relative; overflow:hidden; border-radius:var(--r-sm); min-height:clamp(420px,52vw,560px); display:flex; align-items:flex-end; }
.feat img,
.feat figure img,
.feat .wp-block-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.feat figure,
.feat .wp-block-image{ position:absolute; inset:0; margin:0; }
.feat:hover img{ transform:scale(1.04); }
.feat__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,31,49,0) 35%,rgba(15,31,49,.85)); }
.feat__body{ position:relative; z-index:2; padding:clamp(28px,3vw,52px); color:var(--paper); max-width:60ch; }
.feat__title{ font-family:var(--font-display); font-size:clamp(1.8rem,1.2rem + 2vw,3.2rem); line-height:1.05; margin:14px 0 0; color:var(--paper); }

/* Grille articles — avec image mise en avant 4/3 */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px 28px; }
.post{ display:flex; flex-direction:column; cursor:pointer; }
.post.hide{ display:none; }
.post__media{ overflow:hidden; border-radius:var(--r-sm); aspect-ratio:4/3; background:var(--sand); }
.post__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); display:block; }
.post:hover .post__media img{ transform:scale(1.05); }
.post__cat{ display:inline-block; align-self:flex-start; margin-top:18px; }
.post__title{ font-family:var(--font-display); font-size:1.4rem; line-height:1.15; color:var(--ink); margin:10px 0; transition:color .35s var(--ease); }
.post:hover .post__title{ color:var(--accent-deep); }
.post__excerpt{ font-size:.95rem; color:var(--ink-2); margin:0; }
.post__meta{ margin-top:14px; font-size:var(--t-xs); letter-spacing:.04em; text-transform:uppercase; color:var(--greige); font-weight:600; }

/* Newsletter */
.news{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.news form{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.news input{ flex:1; min-width:200px; font-family:var(--font-sans); font-size:var(--t-body); color:var(--paper); background:transparent; border:0; border-bottom:1px solid var(--line-light); padding:12px 2px; }
.news input::placeholder{ color:rgba(244,239,231,.5); }
.news input:focus{ outline:none; border-color:var(--accent); }

@media (max-width:900px){ .post-grid{ grid-template-columns:1fr 1fr; } .news{ grid-template-columns:1fr; } }
@media (max-width:560px){ .post-grid{ grid-template-columns:1fr; } }

/* ============ ARTICLE single ============ */
.art-hero{ position:relative; overflow:hidden; min-height:clamp(440px,60vh,640px); display:flex; align-items:flex-end; background:var(--ink-bg); }
.art-hero > img,
.art-hero > figure,
.art-hero > .wp-block-image{ position:absolute; inset:0; margin:0; width:100%; height:100%; }
.art-hero img{ width:100%; height:100%; object-fit:cover; }
.art-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,31,49,.45) 0%,rgba(15,31,49,.1) 38%,rgba(15,31,49,.85) 100%); z-index:1; }
.art-hero__in{ position:relative; z-index:2; max-width:980px; margin-inline:auto; width:100%; padding:0 var(--gutter) clamp(36px,5vw,64px); color:var(--paper); }
.art-hero h1{ color:var(--paper); font-size:clamp(2rem,1.3rem + 2.6vw,3.6rem); line-height:1.06; margin:16px 0 0; max-width:22ch; }
.art-meta{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:22px; font-size:var(--t-sm); color:rgba(244,239,231,.82); }
.art-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--brass-soft); display:inline-block; }

.prose{ max-width:720px; margin-inline:auto; }
.prose > p{ font-size:1.12rem; line-height:1.8; color:var(--ink-2); margin:0 0 26px; }
.prose > p.lead-p,
.prose > p.is-style-leb-lead{ font-size:1.35rem; line-height:1.6; color:var(--ink); font-family:var(--font-sans); font-weight:400; }
.prose h2{ font-size:1.9rem; margin:48px 0 18px; }
.prose h3{ font-size:1.35rem; margin:36px 0 12px; }
.prose ul{ margin:0 0 26px; padding-left:0; list-style:none; display:grid; gap:12px; }
.prose ul li{ position:relative; padding-left:26px; font-size:1.08rem; color:var(--ink-2); line-height:1.7; }
.prose ul li::before{ content:""; position:absolute; left:0; top:13px; width:10px; height:1px; background:var(--accent); }
.prose figure{ margin:40px 0; }
.prose figure img{ width:100%; border-radius:var(--r-sm); }
.prose figcaption{ font-size:var(--t-xs); color:var(--greige); text-transform:uppercase; letter-spacing:.06em; margin-top:12px; }
.prose blockquote,
.bigquote{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:32px 0; margin:44px 0; }
.prose blockquote p,
.bigquote p{ font-family:var(--font-display); font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem); line-height:1.25; color:var(--ink); margin:0; }
.prose img{ border-radius:var(--r-sm); margin:1.6em 0; }

/* Auteur + partage */
.author{ display:flex; gap:18px; align-items:center; max-width:720px; margin:48px auto 0; padding-top:32px; border-top:1px solid var(--line); }
.author__av{ width:56px; height:56px; border-radius:var(--r-pill); background:var(--sand-deep); display:grid; place-items:center; font-family:var(--font-display); color:var(--ink); font-size:1.3rem; flex:none; }
.share{ display:flex; gap:10px; align-items:center; max-width:720px; margin:28px auto 0; }
.share span{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-caps); color:var(--greige); font-weight:600; }
.share a{ width:36px; height:36px; border-radius:var(--r-pill); border:1px solid var(--line-strong); display:grid; place-items:center; font-size:.8rem; font-weight:600; color:var(--ink-2); transition:all .3s var(--ease); text-decoration:none; }
.share a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* Articles liés (3 cards) */
.related{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:780px){ .related{ grid-template-columns:1fr; } }

/* ============ PHERO (page secondaire) ============ */
.phero__bg{ position:absolute; inset:0; }
.phero__bg figure,
.phero__bg .wp-block-image{ position:absolute; inset:0; margin:0; }
.phero__bg figure img,
.phero__bg .wp-block-image img,
.phero__bg > img{ width:100%; height:100%; object-fit:cover; }
.phero__in{ position:relative; z-index:2; }

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
	.hdr__nav{ display:none; }
	.burger{ display:flex; }
	.hero__cta-secondary{ display:none; }
	.sig, .contact{ grid-template-columns:1fr; }
	.sig__img{ min-height:340px; }
	.steps{ grid-template-columns:1fr 1fr; }
	.pillars{ grid-template-columns:1fr; }
	.proj-grid{ grid-template-columns:1fr 1fr; }
	.twocol{ grid-template-columns:1fr; }
	.svc-row{ grid-template-columns:1fr 1fr; }
	.narr{ grid-template-columns:1fr; }
}
@media (max-width:900px){
	.nd__head{ grid-template-columns:1fr !important; gap:18px; }
	.nd__grid{ grid-template-columns:1fr; }
	.nd__media{ min-height:300px; }
}
@media (max-width:680px){
	.univers{ flex-direction:column; height:auto; }
	.upanel{ height:160px; }
	.upanel:hover{ flex:1; }
	.upanel__more{ max-height:none; opacity:1; margin-top:10px; }
	.proj-grid{ grid-template-columns:1fr; }
	.contact__form{ grid-template-columns:1fr; }
	.steps{ grid-template-columns:1fr; }
	.svc-row{ grid-template-columns:1fr; }
	.hero__foot{ gap:20px; }
}

/* =====================================================================
   PONT BLOCS NATIFS ↔ design system Joy
   Permet d'éditer depuis Gutenberg en gardant le rendu pixel-perfect.
   ===================================================================== */

/* core/button : variants Joy */
.wp-block-button .wp-block-button__link{
	display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
	font-family:var(--font-sans); font-size:var(--t-sm); font-weight:600; letter-spacing:.02em;
	padding:16px 30px; border-radius:var(--r-pill);
	background:var(--ink); color:var(--paper); border:1px solid var(--ink);
	transition:all var(--dur) var(--ease); white-space:nowrap; text-decoration:none;
}
.wp-block-button .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.wp-block-button.is-style-leb-primary .wp-block-button__link{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.wp-block-button.is-style-leb-primary .wp-block-button__link:hover{ background:var(--accent-deep); border-color:var(--accent-deep); }
.wp-block-button.is-style-leb-dark .wp-block-button__link{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.wp-block-button.is-style-leb-ghost .wp-block-button__link{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.wp-block-button.is-style-leb-ghost .wp-block-button__link:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.wp-block-button.is-style-leb-on-dark .wp-block-button__link{ background:transparent; color:var(--paper); border-color:var(--line-light); }
.wp-block-button.is-style-leb-on-dark .wp-block-button__link:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hdr.scrolled .wp-block-button.is-style-leb-on-dark .wp-block-button__link{ color:var(--ink); border-color:var(--line-strong); }

/* container wp-block-buttons : retire la marge auto */
.wp-block-buttons{ display:flex; gap:14px; flex-wrap:wrap; margin:0; }

/* core/paragraph block styles */
.is-style-leb-eyebrow{
	font-family:var(--font-sans); font-size:var(--t-xs); font-weight:600;
	text-transform:uppercase; letter-spacing:var(--track-eyebrow);
	color:var(--accent-deep); margin:0;
	display:inline-flex; align-items:center; gap:var(--s-3);
}
.is-style-leb-eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; }
.on-dark .is-style-leb-eyebrow,
.sig .is-style-leb-eyebrow,
.nd .is-style-leb-eyebrow{ color:var(--accent-deep); }
.on-dark .is-style-leb-eyebrow{ color:var(--brass-soft); }

.is-style-leb-lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-2); font-weight:400; text-wrap:pretty; }
.is-style-leb-muted{ color:var(--ink-3); }
.is-style-leb-caps{ text-transform:uppercase; letter-spacing:var(--track-caps); font-weight:600; font-size:var(--t-xs); }

/* core/heading mega (hero) */
.is-style-leb-mega{ font-family:var(--font-display); font-weight:500; font-size:var(--t-mega); line-height:.98; letter-spacing:-.015em; color:var(--paper); margin:22px 0 0; max-width:16ch; }

/* core/group reset (au cas où) */
.wp-block-group{ box-sizing:border-box; }

/* core/columns : on garde flex natif mais on annule les paddings sur les colonnes nues */
.wp-block-columns{ display:flex; gap:14px; flex-wrap:wrap; margin:0; }
.wp-block-column{ flex-grow:1; flex-basis:0; min-width:0; }

/* Header variant SOMBRE : fond bleu nuit translucide par défaut.
   Appliqué sur toutes les pages SAUF la home (texte ivoire reste lisible). */
.hdr.hdr--dark{
	background:rgba(15,31,49,.92);
	backdrop-filter:blur(14px);
	border-color:rgba(244,239,231,.08);
}
.hdr.hdr--dark .hdr__logo .dark{ opacity:0; }
.hdr.hdr--dark .hdr__logo .light{ opacity:1; }
.hdr.hdr--dark .hdr__nav a{ color:var(--paper); }
.hdr.hdr--dark.scrolled{ background:rgba(15,31,49,.96); }
.hdr.hdr--dark.scrolled .hdr__logo .dark{ opacity:0; }
.hdr.hdr--dark.scrolled .hdr__logo .light{ opacity:1; }
.hdr.hdr--dark.scrolled .hdr__nav a{ color:var(--paper); }
/* Le fond reste sombre au scroll : les règles .hdr.scrolled qui passent le
   texte en encre (prévues pour le fond ivoire de la home) rendraient le
   bouton « Nous contacter » et le burger invisibles. On les annule ici. */
.hdr.hdr--dark.scrolled .btn--on-dark{ --bg:transparent; --fg:var(--paper); --bd:var(--line-light); }
.hdr.hdr--dark.scrolled .btn--on-dark:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.hdr.hdr--dark.scrolled .wp-block-button.is-style-leb-on-dark .wp-block-button__link{ color:var(--paper); border-color:var(--line-light); }
.hdr.hdr--dark.scrolled .burger span{ background:var(--paper); }

/* Header layout : grid 3 colonnes — logo gauche, nav centrée, CTA droite */
.hdr__in,
.wp-block-group.hdr__in{
	display:grid !important;
	grid-template-columns:auto minmax(0,1fr) auto !important;
	align-items:center !important;
	gap:clamp(40px,5vw,100px) !important;
	padding:18px var(--gutter) !important;
	max-width:var(--maxw) !important;
	margin-inline:auto !important;
}
.hdr__nav{ justify-self:center !important; }
.hdr__cta{ justify-self:end !important; }

/* Logos header : ratio natif respecté, light empile, dark superpose */
.hdr__logo{
	display:inline-block !important;
	position:relative !important;
	height:46px !important;
	width:auto !important;
	line-height:0 !important;
	justify-self:start !important;
}
.hdr__logo img{
	display:block !important;
	height:46px !important;
	width:auto !important;
	max-width:none !important;
	transition:opacity .4s var(--ease);
}
.hdr__logo .dark{ position:absolute; top:0; left:0; opacity:0; }
/* Une seule image reste dans le flux : c'est elle qui donne sa largeur au
   bloc logo, donc à la première colonne de la grille du header. Toutes les
   images étaient en absolu, le bloc mesurait 0 px de large et le logo
   débordait sur la navigation. La variante sombre reste superposée. */
.hdr__logo img{ position:static !important; }
.hdr__logo .dark{ position:absolute !important; top:0 !important; left:0 !important; }
.hdr__logo .logo--nd.light{ margin-top:8px !important; }
.hdr.scrolled .hdr__logo .dark{ opacity:1; }
.hdr.scrolled .hdr__logo .light{ opacity:0; }

/* core/navigation pour le header */
.hdr .wp-block-navigation{ display:flex; align-items:center; gap:34px; }
.hdr .wp-block-navigation ul{ display:flex; gap:34px; margin:0; padding:0; list-style:none; }
.hdr .wp-block-navigation li{ list-style:none; }
.hdr .wp-block-navigation a,
.hdr .wp-block-navigation .wp-block-navigation-item__content{
	font-size:.9rem; font-weight:500; color:var(--paper); letter-spacing:.01em;
	position:relative; transition:color .3s; padding:0; text-decoration:none;
}
.hdr .wp-block-navigation a::after{
	content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor;
	transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.hdr .wp-block-navigation a:hover::after{ transform:scaleX(1); }
.hdr.scrolled .wp-block-navigation a,
.hdr.scrolled .wp-block-navigation .wp-block-navigation-item__content{ color:var(--ink); }

/* core/navigation pour le footer (vertical) */
.ft .wp-block-navigation{ display:flex; flex-direction:column; gap:11px; font-size:.92rem; }
.ft .wp-block-navigation ul{ display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none; }
.ft .wp-block-navigation li{ list-style:none; }
.ft .wp-block-navigation a{ color:rgba(244,239,231,.7); padding:0; text-decoration:none; }
.ft .wp-block-navigation a:hover{ color:var(--paper); }

/* core/heading : pas de margin par défaut — chaque heading gère via inline style si besoin */
.wp-block-heading{ margin:0; }

/* core/paragraph : pas de neutralisation globale — on cible individuellement */
.prose p,
.entry-content p{ margin:0 0 1.2em; }

/* ============ ÉDITEUR — adaptations (chargé via add_editor_style) ============ */
.editor-styles-wrapper .hdr,
.editor-styles-wrapper .mmenu,
.editor-styles-wrapper .ft,
.editor-styles-wrapper .modal{ position:relative !important; inset:auto !important; }

/* ============ PROS — Hub grille 5 cartes univers ============ */
.pros-grid{
	display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
	margin-top:clamp(48px,6vw,72px);
}
.pros-grid .pros-card:nth-child(4),
.pros-grid .pros-card:nth-child(5){ grid-column:span 1; }
@media (min-width:1024px){
	.pros-grid{ grid-template-columns:repeat(6,1fr); }
	.pros-grid .pros-card:nth-child(1),
	.pros-grid .pros-card:nth-child(2),
	.pros-grid .pros-card:nth-child(3){ grid-column:span 2; }
	.pros-grid .pros-card:nth-child(4),
	.pros-grid .pros-card:nth-child(5){ grid-column:span 3; }
}
.pros-card{
	display:block; position:relative; border:1px solid var(--line);
	border-radius:var(--r-sm); background:var(--paper); overflow:hidden;
	text-decoration:none; color:var(--ink);
	transition:all .5s var(--ease);
}
.pros-card:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.pros-card__img{
	aspect-ratio:4/3; background-size:cover; background-position:center;
	transition:transform 1s var(--ease); filter:saturate(.95);
}
.pros-card:hover .pros-card__img{ transform:scale(1.04); }
.pros-card__body{ padding:clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:8px; }
.pros-card__num{
	font-family:var(--font-display); color:var(--accent-deep);
	font-size:.95rem; font-weight:500;
}
.pros-card .h4{ margin:4px 0 0; }
.pros-card .body{ margin:6px 0 12px; }
.pros-card .link-line{ margin-top:auto; }

/* ============ PROJETS — Carousel horizontal (Particuliers / Newdeco) ============ */
.proj-carousel{ position:relative; margin-top:clamp(24px,3vw,40px); }
.proj-carousel__track{
	display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,32%);
	gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
	scroll-behavior:smooth; padding-bottom:8px;
	scrollbar-width:thin; scrollbar-color:var(--clay) transparent;
}
.proj-carousel__track::-webkit-scrollbar{ height:6px; }
.proj-carousel__track::-webkit-scrollbar-thumb{ background:var(--clay); border-radius:3px; }
.proj-carousel__track::-webkit-scrollbar-track{ background:transparent; }
.proj-carousel__track .project{
	scroll-snap-align:start; aspect-ratio:4/5;
	position:relative; overflow:hidden; border-radius:var(--r-sm);
	text-decoration:none; display:block;
}
.proj-carousel__track .project img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.proj-carousel__track .project:hover img{ transform:scale(1.05); }
.proj-carousel__track .project .project__veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,31,49,0) 45%,rgba(15,31,49,.85)); }
.proj-carousel__track .project .project__body{ position:absolute; left:0; right:0; bottom:0; padding:22px; color:var(--paper); z-index:2; }
.proj-carousel__track .project__kicker{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--clay-soft,#d2a98a); font-weight:600; }
.proj-carousel__track .project__title{ font-family:var(--font-display); font-size:1.3rem; margin-top:6px; line-height:1.1; }
.proj-carousel__track .project__meta{ font-size:.85rem; color:rgba(244,239,231,.78); margin-top:6px; }
.proj-carousel__nav{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }
.proj-carousel__prev, .proj-carousel__next{
	width:42px; height:42px; border-radius:var(--r-pill); border:1px solid var(--line-strong);
	background:transparent; cursor:pointer; font-size:1.4rem; color:var(--ink);
	display:grid; place-items:center; transition:all .3s var(--ease);
}
.proj-carousel__prev:hover, .proj-carousel__next:hover{ background:var(--clay); color:var(--paper); border-color:var(--clay); }
@media (max-width:680px){
	.proj-carousel__track{ grid-auto-columns:minmax(220px,80%); }
}

/* ============ NEWDECO — Style tranchant (theme--newdeco) ============ */
/* Plus chaud, plus organique, plus éditorial — l'opposé du Joy luxe sobre. */
.theme--newdeco{
	background:linear-gradient(180deg, #F5E9DB 0%, #EFE0CD 100%);
	color:var(--ink);
}
.theme--newdeco.phero{ background:none; }
.theme--newdeco.phero .phero__bg::after{
	content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg, rgba(163,108,79,.35) 0%, rgba(128,81,58,.25) 35%, rgba(60,33,22,.78) 100%);
}
.theme--newdeco.phero .phero__in{
	padding-top:clamp(120px,18vw,200px);
	padding-bottom:clamp(60px,8vw,120px);
	padding-left:max(var(--gutter), 56px);
	padding-right:max(var(--gutter), 56px);
}
.theme--newdeco .phero__in,
.theme--newdeco.phero h1,
.theme--newdeco.phero .phero__sub{ color:var(--paper); }
.theme--newdeco h1,
.theme--newdeco h2.h2,
.theme--newdeco .h2{
	font-style:italic; font-weight:400;
	letter-spacing:-.01em;
	text-indent:.04em; /* compense le swash gauche des capitales Bodoni italiques (A, M, V, W…) */
}
.theme--newdeco .eyebrow,
.theme--newdeco .is-style-leb-eyebrow{ color:var(--clay-deep); }
.theme--newdeco .eyebrow::before,
.theme--newdeco .is-style-leb-eyebrow::before{ background:var(--clay); width:38px; }
.theme--newdeco .link-line{ color:var(--clay-deep); }
.theme--newdeco .link-line .arrow{ color:var(--clay); }
.theme--newdeco .section a:not(.wp-block-button__link):not(.link-line):not(.btn){ color:var(--clay-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:var(--clay); }
.theme--newdeco .section a:not(.wp-block-button__link):not(.link-line):not(.btn):hover{ color:var(--clay); }
.theme--newdeco .wp-block-button .wp-block-button__link{ background:var(--clay); border-color:var(--clay); }
.theme--newdeco .wp-block-button .wp-block-button__link:hover{ background:var(--clay-deep); border-color:var(--clay-deep); }
.theme--newdeco .wp-block-column.service{
	background:rgba(244,239,231,.7); border-color:rgba(163,108,79,.18);
	border-radius:18px 4px 18px 4px;
}
.theme--newdeco .wp-block-column.service:hover{ border-color:var(--clay-deep); }
.theme--newdeco .service__num{ color:var(--clay-deep); font-style:italic; }
.theme--newdeco .stat-card__divider{ background:var(--clay); width:40px; }
.theme--newdeco .stat-card__num{ font-style:italic; }
.theme--newdeco .crumb a,
.theme--newdeco .crumb span{ color:rgba(244,239,231,.92); text-decoration:none; }
.theme--newdeco .crumb a:hover{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--clay-soft); }
.theme--newdeco .crumb .sep{ color:rgba(244,239,231,.45); }

/* Helper */
.max-640{ max-width:640px; margin-bottom:clamp(32px,4vw,48px); }

/* ============ AGENCE — Grille pictos savoir-faire (8 cartes) ============ */
.picto-grid{
	display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
	border:1px solid var(--line); background:var(--line);
	border-radius:var(--r-sm); overflow:hidden;
}
.picto-card{
	background:var(--paper); padding:clamp(28px,2.4vw,38px) clamp(22px,2vw,30px);
	display:flex; flex-direction:column; gap:14px;
	transition:background .4s var(--ease);
}
.picto-card:hover{ background:var(--paper-2); }
.picto-card__icon{
	width:64px; height:64px; border-radius:var(--r-pill);
	background:var(--sand); display:grid; place-items:center;
	transition:all .5s var(--ease);
}
.picto-card:hover .picto-card__icon{ background:var(--brass-soft); transform:rotate(-4deg); }
.picto-card__icon img{
	max-width:44px; max-height:44px; width:auto; height:auto;
	object-fit:contain; display:block;
	mix-blend-mode:multiply;
}
.picto-card h3.h4{ margin:8px 0 0; font-size:1.15rem; }
.picto-card .body{ margin:0; }
@media (max-width:1024px){
	.picto-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
	.picto-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PAGES COMMERCIALES — brief Yann D. (sept. 2026)
   FAQ accordéon · logos clients · hero H1/H2 · media 2 visuels
   ============================================================ */

/* ---- Hero page : H1 SEO + H2 accroche ---- */
/* site.css déclare `.phero h1` (0-1-1) : on repasse devant avec `.phero h1.phero__h1` */
.phero h1.phero__h1,
.phero__h1{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);
	letter-spacing:.02em; line-height:1.3;
	color:var(--brass-soft); margin:0 0 14px;
}
.theme--newdeco .phero h1.phero__h1,
.theme--newdeco .phero__h1{ color:var(--clay-soft); }
.phero h2.phero__h2,
.phero__h2{
	font-family:var(--font-display); font-weight:500;
	font-size:var(--t-h1); line-height:var(--lh-tight); letter-spacing:-.02em;
	color:var(--paper); margin:0; max-width:20ch;
}

/* ---- Logos clients (variante du ticker de la home) ---- */
.clients-title{
	font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
	margin:0 0 36px;
}
.logo-ticker--clients .logo-cell{ height:72px; background:var(--paper); }
.section--paper-plain .logo-ticker--clients .logo-cell{ background:var(--paper-2); }
.logo-ticker--clients .logo-cell img{
	max-height:72px; max-width:180px;
	/* les logos fournis sont majoritairement sur fond blanc :
	   multiply supprime le cartouche blanc sur le papier ivoire */
	mix-blend-mode:multiply;
	filter:grayscale(1) opacity(.82);
}
.logo-ticker--clients .logo-cell img:hover{ filter:grayscale(0) opacity(1); }

/* ---- Duo de visuels dans les blocs de présentation ---- */
.media-duo{
	display:grid; grid-template-columns:1fr 1fr;
	gap:clamp(14px,1.6vw,22px); align-items:stretch;
}
.media-duo figure{
	margin:0; border-radius:var(--r-sm); overflow:hidden;
	background:var(--sand);
}
.media-duo img{ width:100%; height:100%; object-fit:cover; display:block; }
.media-duo--offset figure:first-child{ margin-top:clamp(20px,3vw,48px); }
.media-figure{
	margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--sand);
}
.media-figure img{ width:100%; height:auto; display:block; }
.media-figure--portrait img{ aspect-ratio:3/4; object-fit:cover; }

/* ---- FAQ accordéon ---- */
.faq{
	display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
	gap:clamp(32px,5vw,80px); align-items:start;
}
.faq__head{ position:sticky; top:120px; }
.faq__head .h2{ font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); }
.faq__list{ border-top:1px solid var(--line); }
.faq__item{ border-bottom:1px solid var(--line); }
.faq__q{
	display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
	padding:26px 0; cursor:pointer; list-style:none;
	transition:color .3s var(--ease);
}
.faq__q::-webkit-details-marker{ display:none; }
.faq__q-text{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.05rem,.98rem + .34vw,1.3rem);
	line-height:1.32; color:var(--ink); margin:0;
	transition:color .3s var(--ease);
}
.faq__q:hover .faq__q-text{ color:var(--accent-deep); }
.faq__icon{
	flex:none; position:relative; width:22px; height:22px; margin-top:4px;
}
.faq__icon::before,
.faq__icon::after{
	content:""; position:absolute; left:50%; top:50%;
	background:var(--accent); transform:translate(-50%,-50%);
	transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.faq__icon::before{ width:16px; height:1px; }
.faq__icon::after{ width:1px; height:16px; }
.faq__item[open] .faq__icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq__item[open] .faq__q-text{ color:var(--accent-deep); }
.faq__a{
	padding:0 60px 30px 0;
	animation:faqReveal .45s var(--ease);
}
.faq__a .body{ margin:0 0 14px; }
.faq__a .body:last-child{ margin-bottom:0; }
@keyframes faqReveal{
	from{ opacity:0; transform:translateY(-6px); }
	to{ opacity:1; transform:none; }
}

/* ---- Cartes "chiffres clés" / valeurs / engagements (page agence) ---- */
.kpi-grid{
	display:grid; grid-template-columns:repeat(3,1fr);
	gap:clamp(14px,1.6vw,22px);
}
.kpi-card{
	padding:clamp(26px,2.4vw,38px);
	border:1px solid var(--line); border-radius:var(--r-sm);
	background:var(--paper-2);
	transition:background .4s var(--ease), border-color .4s var(--ease);
}
.kpi-card:hover{ background:var(--sand); border-color:var(--line-strong); }
.kpi-card__num{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(2rem,1.5rem + 1.6vw,2.9rem); line-height:1;
	color:var(--ink); margin:0;
}
.kpi-card__num small{ font-size:.42em; color:var(--accent-deep); margin-left:.3em; letter-spacing:.02em; }
.kpi-card__label{
	margin:14px 0 0; font-size:var(--t-sm); line-height:1.5; color:var(--ink-3);
}
.value-row{
	display:flex; flex-wrap:wrap; gap:10px;
}
.value-chip{
	padding:12px 24px; border:1px solid var(--line-strong); border-radius:var(--r-pill);
	font-family:var(--font-display); font-size:1.1rem; color:var(--ink);
	transition:all .4s var(--ease);
}
.value-chip:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.commit-grid{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(18px,2vw,28px);
}
.commit-card{
	padding-top:22px; border-top:2px solid var(--accent);
}
.commit-card h3{
	font-family:var(--font-display); font-weight:500;
	font-size:1.25rem; color:var(--ink); margin:0 0 10px;
}
.commit-card p{ margin:0; font-size:var(--t-sm); line-height:var(--lh-body); color:var(--ink-2); }

/* ---- Portraits équipe (page agence) ---- */
.team-block{
	display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
	gap:clamp(28px,4.5vw,70px); align-items:center;
}
.team-block--rev{ grid-template-columns:minmax(0,1fr) minmax(0,420px); }
.team-block--rev .team-block__media{ order:2; }
.team-block__media{
	margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--sand);
}
.team-block__media img{ width:100%; height:auto; display:block; aspect-ratio:4/5; object-fit:cover; object-position:center; }
.team-block__name{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(2rem,1.5rem + 1.8vw,3rem); line-height:1; color:var(--ink);
	margin:0 0 20px;
}

/* ---- Responsive (toujours en fin de fichier — piège de cascade) ---- */
@media (max-width:1024px){
	.faq{ grid-template-columns:1fr; }
	.faq__head{ position:static; }
	.faq__a{ padding-right:40px; }
	.kpi-grid{ grid-template-columns:repeat(2,1fr); }
	.team-block,
	.team-block--rev{ grid-template-columns:1fr; }
	.team-block__media{ position:static; }
	.team-block--rev .team-block__media{ order:0; }
	.team-block__media img{ aspect-ratio:3/2; }
}
@media (max-width:680px){
	.media-duo{ grid-template-columns:1fr; }
	.media-duo--offset figure:first-child{ margin-top:0; }
	.kpi-grid{ grid-template-columns:1fr; }
	.commit-grid{ grid-template-columns:1fr; }
	.faq__q{ padding:20px 0; gap:16px; }
	.faq__a{ padding-right:0; }
	.logo-ticker--clients .logo-cell{ height:56px; }
	.logo-ticker--clients .logo-cell img{ max-height:56px; max-width:140px; }
}

/* ------------------------------------------------------------
   Header mobile : la grille `auto 1fr auto` + gap clamp(40px,…)
   ne tient pas sous ~500px — le CTA rendez-vous passait sur le
   logo. On resserre plutôt que de masquer le CTA (lead-gen).
   ------------------------------------------------------------ */
@media (max-width:1024px){
	header.hdr{ gap:20px !important; }
}
@media (max-width:560px){
	header.hdr{ gap:12px !important; padding-inline:18px !important; }
	/* le height inline du logo (46px) ne cede qu'a un !important */
	.hdr__logo, .hdr__logo img{ height:36px !important; }
	/* le pill rendez-vous rejoint le menu burger : pas la place dans le bandeau */
	.hdr__cta .btn--primary{ display:none !important; }
	/* le burger colle au bord droit : plus rien d'autre dans la colonne */
	.hdr__cta{ gap:0 !important; }
	.burger{ padding:6px; margin-right:-6px; }
}
.mmenu a.mmenu__cta,
.mmenu__cta{
	font-family:var(--font-sans) !important;
	font-size:.95rem !important; font-weight:600 !important;
	letter-spacing:.01em !important; line-height:1 !important;
	display:inline-flex !important; align-items:center; gap:8px;
	width:auto !important; align-self:flex-start;
	padding:15px 28px !important; margin-bottom:22px;
	border:0 !important;
}

/* ------------------------------------------------------------
   Retours mobile Julien — 2026-09-28
   ------------------------------------------------------------ */

/* Services home : la grille était en 4 colonnes via un style inline, et les
   media queries visaient .svc-row (classe absente du markup). Passage sur une
   vraie classe, en colonne unique sur mobile. */
.svc-grid{ grid-template-columns:repeat(4,1fr); }

/* Fil d'ariane : bas de casse et tenu sur une seule ligne. */
.crumb{ text-transform:lowercase; }

@media (max-width:1024px){
	.svc-grid{ grid-template-columns:repeat(2,1fr); }
	/* Portraits équipe : le recadrage 3/2 hérité coupait les têtes des
	   photos verticales — on laisse le ratio natif de l'image. */
	.team-block__media img{ aspect-ratio:auto !important; }
}
@media (max-width:680px){
	.svc-grid{ grid-template-columns:1fr; }
	/* Pastille eyebrow du hero : masquée sur mobile (demande Julien). */
	.hero .hero__eyebrow,
	p.hero__eyebrow{ display:none !important; }
	/* Le fil d'ariane ne passe jamais à la ligne. */
	.crumb{ flex-wrap:nowrap; white-space:nowrap; font-size:.68rem; letter-spacing:.05em; gap:7px; }
	.crumb > *{ flex:none; }
}

/* Mention de confidentialité — remplace le bandeau logos sur Résidentiel prestige,
   où aucun client ni lieu n'est communiqué (demande cliente). */
.discretion{
	max-width:760px; margin-inline:auto; text-align:center;
	padding:clamp(28px,3vw,44px) clamp(24px,3vw,48px);
	border:1px solid var(--line); border-radius:var(--r-sm);
	background:var(--paper-2);
}
.discretion .eyebrow{ justify-content:center; }

/* ============================================================
   Retours cliente — octobre 2026
   ============================================================ */

/* --- Header des pages Newdeco ---------------------------------
   Le bleu nuit est la couleur Joydesign : sur Newdeco le bandeau
   passe en gris #313131. Et au scroll le header restait sombre tout
   en basculant sur la version NOIRE du logo — illisible. On garde
   la version blanche tant que le fond est sombre. */
body.is-newdeco-header .hdr,
body.is-newdeco-header .hdr--dark,
body.is-newdeco-header .hdr--dark.scrolled{
	background:rgba(49,49,49,.96) !important;
}
body.is-newdeco-header .hdr--dark.scrolled .hdr__logo .logo--nd.light{ opacity:1 !important; }
body.is-newdeco-header .hdr--dark.scrolled .hdr__logo .logo--nd.dark{ opacity:0 !important; }
body.is-newdeco-header .hdr--dark.scrolled .hdr__nav a,
body.is-newdeco-header .hdr--dark.scrolled .burger span{ color:var(--paper); background-color:initial; }
body.is-newdeco-header .hdr--dark.scrolled .burger span{ background:var(--paper); }

/* --- Interligne du H1 des pages secondaires -------------------
   `line-height:1` sur un Didone de 84px faisait se toucher les
   lignes (signalé sur le hub Professionnels). */
.phero h1{ line-height:1.08; }

/* --- Logos clients plus grands --------------------------------
   Demande cliente : les logos représentent la qualité des clients
   de l'agence, ils doivent être lisibles. */
.logo-ticker .logo-cell{ height:84px; }
.logo-ticker .logo-cell img{ max-height:84px; max-width:220px; }
.logo-ticker--clients .logo-cell{ height:96px; }
.logo-ticker--clients .logo-cell img{ max-height:96px; max-width:240px; }

/* --- Bandeaux Newdeco en pleine largeur -----------------------
   Les sections `.wrap` sont plafonnées à 1320px ; la cliente veut
   que les bandeaux filent sur toute la largeur, comme sur l'accueil. */
.section--bleed{ max-width:none !important; padding-inline:var(--gutter) !important; }
.section--bleed > *{ max-width:var(--maxw); margin-inline:auto; }

@media (max-width:680px){
	.logo-ticker .logo-cell{ height:62px; }
	.logo-ticker .logo-cell img{ max-height:62px; max-width:160px; }
	.logo-ticker--clients .logo-cell{ height:70px; }
	.logo-ticker--clients .logo-cell img{ max-height:70px; max-width:175px; }
}

/* Champ leurre anti-robot : sorti de l'écran plutôt que display:none,
   que certains robots savent détecter. */
.leb-hp{
	position:absolute !important; left:-9999px !important; top:auto !important;
	width:1px !important; height:1px !important; overflow:hidden !important;
}

/* Carte Leaflet — page Contact */
.map__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.map__canvas .leaflet-container{ background:var(--paper-2); font-family:var(--font-sans); }
.leb-pin span{
	display:block; width:18px; height:18px; border-radius:var(--r-pill);
	background:var(--brass); border:3px solid var(--paper);
	box-shadow:0 0 0 6px rgba(176,141,87,.28);
}
.map__canvas .leaflet-popup-content-wrapper{ border-radius:var(--r-sm); }
.map__canvas .leaflet-popup-content{ font-size:.9rem; line-height:1.55; color:var(--ink); }

/* ============================================================
   PAGES MÉTIERS PRO — rythme visuel
   Retour cliente : « pages quasiment blanches, trop d'espace entre
   chaque bloc, il manque de chaleur ». On reste dans la charte
   Joydesign (ivoire, bleu nuit, laiton) et on apporte du relief par
   l'alternance de fonds, la mise en cartes et un bandeau sombre.
   ============================================================ */

/* --- Chapô --- */
.pro-pres{ padding-block:clamp(56px,6vw,92px) clamp(32px,3.5vw,52px); }
.pro-intro{ position:relative; z-index:1; }
.pro-intro p{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.5rem,1.1rem + 1.7vw,2.5rem);
	line-height:1.24; letter-spacing:-.01em; color:var(--ink); margin:0;
	max-width:26ch;
}
.pro-intro p::first-letter{ color:var(--brass-deep); }

/* --- Visuel large, hors colonne de texte --- */
.pro-media{ padding-inline:var(--gutter); }
.pro-media__main{
	margin:0 auto; max-width:var(--maxw);
	border-radius:var(--r-sm); overflow:hidden; background:var(--sand);
}
.pro-media__main img{ width:100%; height:clamp(260px,38vw,560px); object-fit:cover; display:block; }

/* --- Corps : titre à gauche, texte à droite (remplit le vide) --- */
.pro-body{ padding-block:clamp(48px,5.5vw,88px); }
.pro-body--alt{ background:var(--paper-2); }
.pro-split{
	display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
	gap:clamp(28px,4vw,72px); align-items:start;
}
.pro-split__head{ position:sticky; top:118px; }
.pro-split__rule{ display:block; width:52px; height:2px; background:var(--brass); margin-bottom:20px; }
.pro-h2{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.65rem,1.2rem + 1.5vw,2.5rem);
	line-height:1.14; letter-spacing:-.01em; color:var(--ink); margin:0;
}
.pro-split__body p{ margin:0 0 16px; }
.pro-split__body p:last-child{ margin-bottom:0; }
.pro-lead{
	font-size:var(--t-lead); line-height:1.6; color:var(--ink);
}
.pro-split__body strong,
.pro-sub strong{ color:var(--brass-deep); font-weight:600; }

/* --- Sous-sections --- */
.pro-sub{ max-width:72ch; margin-top:clamp(30px,3vw,46px); }
.pro-sub p{ margin:0 0 15px; }
.pro-sub p:last-child{ margin-bottom:0; }
.pro-h3{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem); line-height:1.2;
	color:var(--ink); margin:0 0 18px;
	padding-left:18px; border-left:3px solid var(--brass);
}
.pro-h4{
	font-family:var(--font-sans); font-weight:600;
	font-size:1.05rem; letter-spacing:.01em; text-transform:uppercase;
	color:var(--brass-deep); margin:0 0 14px;
}

/* --- Les listes à puces deviennent une grille de cartes ---
   C'est le changement qui enlève le plus l'impression de page vide. */
.pro-points{
	list-style:none; margin:clamp(26px,3vw,40px) 0 0; padding:0;
	display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
	background:var(--line); border:1px solid var(--line);
	border-radius:var(--r-sm); overflow:hidden;
}
.pro-point{
	display:flex; gap:16px; align-items:flex-start;
	background:var(--paper); padding:clamp(18px,1.9vw,26px) clamp(18px,2vw,28px);
	transition:background .45s var(--ease);
}
.pro-body--alt .pro-point{ background:var(--paper-2); }
.pro-point:hover{ background:var(--sand); }
.pro-point__i{
	flex:none; font-family:var(--font-display); font-size:.95rem;
	color:var(--brass-deep); line-height:1.5; min-width:2.2ch;
}
.pro-point p{ margin:0; font-size:.98rem; line-height:1.62; color:var(--ink-2); }

/* --- Encart note --- */
.pro-note{
	margin-top:clamp(26px,3vw,40px); max-width:72ch;
	padding:clamp(22px,2.4vw,32px) clamp(24px,2.6vw,36px);
	background:var(--sand); border-radius:var(--r-sm);
	border-left:3px solid var(--brass);
}
.pro-note p{ margin:0; font-size:.98rem; line-height:1.66; color:var(--ink); }
.pro-note strong{ color:var(--ink); }
.pro-cta{ margin-top:clamp(34px,3.6vw,50px); }

/* --- Bandeau sombre pleine largeur (le « gros bandeau de couleur ») --- */
.pro-band{
	background:var(--ink-bg); color:var(--paper);
	padding-block:clamp(56px,6.5vw,104px);
	position:relative; overflow:hidden;
}
.pro-band__in{
	position:relative; z-index:1;
	display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
	gap:clamp(30px,4vw,70px); align-items:center;
}
.pro-band__text{ min-width:0; }
.pro-band__q{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.45rem,1.1rem + 1.5vw,2.4rem);
	line-height:1.26; color:var(--paper); margin:18px 0 0; max-width:26ch;
}
.pro-band__img{
	margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--ink-bg-2);
}
.pro-band__img img{ width:100%; height:clamp(220px,26vw,360px); object-fit:cover; display:block; }

@media (max-width:1024px){
	.pro-split{ grid-template-columns:1fr; gap:22px; }
	.pro-split__head{ position:static; }
	.pro-band__in{ grid-template-columns:1fr; }
	.pro-intro p{ max-width:none; }
}
@media (max-width:680px){
	.pro-points{ grid-template-columns:1fr; }
	.pro-h3{ padding-left:14px; }
	.pro-media__main img{ height:230px; }
}

/* --- Grille de cartes pour les pages sans liste à puces ---
   Le résidentiel prestige enchaîne des blocs de prose sans puces :
   la colonne continue laissait la moitié droite vide. */
.pro-cards{
	display:grid; grid-template-columns:repeat(2,1fr);
	gap:clamp(16px,1.8vw,24px); margin-top:clamp(30px,3.4vw,48px);
}
.pro-card{
	background:var(--paper); border:1px solid var(--line);
	border-radius:var(--r-sm); padding:clamp(24px,2.4vw,34px);
	transition:border-color .45s var(--ease), background .45s var(--ease);
}
.pro-body--alt .pro-card{ background:var(--paper); }
.pro-card:hover{ border-color:var(--brass); }
.pro-card__t{
	font-family:var(--font-display); font-weight:500;
	font-size:clamp(1.15rem,1rem + .5vw,1.4rem); line-height:1.24;
	color:var(--ink); margin:0 0 14px;
}
.pro-card p{ margin:0 0 12px; font-size:.97rem; line-height:1.64; color:var(--ink-2); }
.pro-card p:last-child{ margin-bottom:0; }
.pro-card strong{ color:var(--brass-deep); font-weight:600; }

@media (max-width:780px){
	.pro-cards{ grid-template-columns:1fr; }
}

/* Bandeau sans second visuel (résidentiel prestige) : une seule colonne,
   sinon la moitié droite reste vide. */
.pro-band__in--solo{ grid-template-columns:1fr; max-width:min(var(--maxw),900px); }
.pro-band__in--solo .pro-band__q{ max-width:34ch; }

/* --- Citation dans un article -------------------------------------
   `wp-block-styles` ajoute un filet vertical à gauche sur core/quote,
   qui se superposait aux filets haut/bas de la charte : trois bordures,
   et le texte collé contre la barre. On neutralise le filet de WordPress
   et on marque la citation avec le trait laiton utilisé partout ailleurs. */
.prose blockquote,
.prose .wp-block-quote{
	border-left:0 !important;
	border-right:0 !important;
	padding-left:0 !important;
	padding-right:0 !important;
	border-top:1px solid var(--line);
	border-bottom:1px solid var(--line);
	padding-block:clamp(30px, 3.2vw, 44px);
	margin-block:clamp(40px, 4.4vw, 60px);
	font-style:normal;
	text-align:left;
}
.prose blockquote::before{
	content:""; display:block;
	width:48px; height:2px; background:var(--brass);
	margin-bottom:24px;
}
.prose blockquote p{
	max-width:26ch;
	letter-spacing:-.005em;
}
.prose blockquote p + p{ margin-top:14px; }
.prose blockquote cite,
.prose blockquote .wp-element-caption{
	display:block; margin-top:20px;
	font-family:var(--font-sans); font-style:normal;
	font-size:var(--t-xs); text-transform:uppercase;
	letter-spacing:var(--track-caps); color:var(--greige);
}
@media (max-width:680px){
	.prose blockquote p{ max-width:none; }
}


/* ------------------------------------------------------------------
   Rythme vertical des fiches réalisation
   Chaque bloc de contenu est une section qui porte son propre padding
   haut et bas. Deux sections qui se suivent additionnaient donc leurs
   paddings : jusqu'à 367 px entre le texte et la citation. On resserre
   sur ces pages, et seules la première et la dernière section gardent
   une respiration pleine.
   ------------------------------------------------------------------ */
.single-projet .entry-content > .wp-block-group,
.single-projet .entry-content > section{
	padding-block:clamp(26px, 2.8vw, 42px) !important;
}
.single-projet .entry-content > *:first-child{
	padding-top:clamp(40px, 4.4vw, 68px) !important;
}
.single-projet .entry-content > *:last-child{
	padding-bottom:clamp(40px, 4.4vw, 68px) !important;
}
/* La citation de fin respire un peu plus que le reste. */
.single-projet .entry-content .pquote{ margin-bottom:0; }

/* ============================================================
   RÉALISATION — compositions de photos
   Lignes justifiées : chaque ligne a une hauteur commune et les
   largeurs suivent le format de chaque photo. Les proportions sont
   donc intactes — aucun recadrage — et les lignes remplissent
   exactement la largeur, sans trou. Les dimensions sont calculées
   en JavaScript (voir main.js), le CSS ne pose que l'habillage.
   ============================================================ */
.gal,
.wp-block-gallery.has-nested-images{
	display:flex !important; flex-wrap:wrap;
	align-content:flex-start; height:auto !important;
	gap:var(--gal-gap, 14px) !important;
	align-items:flex-start;
	margin-block:0;
}
.gal > figure,
.wp-block-gallery.has-nested-images > figure{
	grid-column:auto !important;
	margin:0 !important; flex:none !important;
	/* Les photos redimensionnées ou alignées depuis l'éditeur arrivent avec
	   float, max-width et align-self : sans ça elles sortent de la rangée. */
	float:none !important; clear:none !important;
	position:static !important; align-self:flex-start !important;
	/* WordPress passe les images redimensionnées en display:table, où la
	   hauteur n'est plus qu'un minimum : la photo s'étirait sur 1500 px. */
	display:block !important;
	max-width:none !important; min-width:0 !important;
	max-height:none !important; min-height:0 !important;
	overflow:hidden; border-radius:var(--r-sm);
	background:var(--paper-2);
}
/* Les dimensions viennent du calcul de ligne. On neutralise seulement
   les redimensionnements faits à la souris dans l'éditeur, qui figeaient
   une largeur en pixels. */
.gal > figure img,
.wp-block-gallery.has-nested-images > figure img{
	width:100% !important; height:100% !important;
	max-width:none !important; aspect-ratio:auto !important;
	/* La taille de réserve du chargement différé imposait sa propre hauteur. */
	contain-intrinsic-size:none !important; content-visibility:visible !important;
	object-fit:cover; display:block;
}
/* Avant le calcul, on évite le saut de mise en page. */
.gal:not([data-pret]) > figure,
.wp-block-gallery.has-nested-images:not([data-pret]) > figure{
	flex:1 1 280px !important; height:260px;
}

.gal > figure figcaption,
.wp-block-gallery.has-nested-images > figure figcaption{
	position:absolute; left:0; right:0; bottom:0; margin:0;
	padding:28px 16px 12px;
	background:linear-gradient(180deg, rgba(15,31,49,0), rgba(15,31,49,.72));
	color:var(--paper); font-size:var(--t-xs);
	text-transform:uppercase; letter-spacing:.06em;
}

/* ============================================================
   RÉALISATION — carrousel de fin
   Reprend toutes les photos de la fiche, en bas de l'article.
   ============================================================ */
.pcar{ position:relative; }
.pcar .eyebrow{ margin-bottom:22px; }
.pcar__wrap{ position:relative; }
.pcar__track{
	display:flex; gap:0;
	overflow-x:auto; overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;
	scrollbar-width:none; -ms-overflow-style:none;
	border-radius:var(--r-sm);
}
.pcar__track::-webkit-scrollbar{ display:none; }
.pcar__track > figure{
	flex:0 0 100%; margin:0;
	scroll-snap-align:center; scroll-snap-stop:always;
	overflow:hidden; border-radius:var(--r-sm); background:var(--paper-2);
	display:flex; align-items:center; justify-content:center;
	height:clamp(280px, 44vw, 620px);
}
/* Hauteur de scène fixe pour que la page ne saute pas d'une photo à
   l'autre, mais photo affichée entière : jamais de recadrage. */
.pcar__track > figure img{
	width:auto; max-width:100%; height:auto; max-height:100%;
	object-fit:contain; display:block;
}

/* --- Flèches --- */
.pcar .galc__nav{
	position:absolute; top:50%; transform:translateY(-50%); z-index:2;
	width:52px; height:52px; display:grid; place-items:center;
	font-size:1.9rem; line-height:1; padding:0 0 4px;
	color:var(--ink); cursor:pointer;
	background:rgba(244,239,231,.88); border:1px solid var(--line-strong);
	border-radius:var(--r-pill);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	transition:all .35s var(--ease);
}
.pcar .galc__nav:hover{ background:var(--brass); border-color:var(--brass); color:var(--paper); }
.pcar .galc__nav[disabled]{ opacity:.3; cursor:default; }
.pcar .galc__nav--prev{ left:clamp(10px, 1.6vw, 22px); }
.pcar .galc__nav--next{ right:clamp(10px, 1.6vw, 22px); }

/* --- Pastilles de position --- */
.pcar .galc__dots{
	display:flex; justify-content:center; align-items:center; gap:9px;
	margin:20px 0 0; padding:0; list-style:none;
}
.pcar .galc__dots li{ display:block; margin:0; padding:0; }
.pcar .galc__dots li::before,
.pcar .galc__dots li::marker{ content:none; display:none; }
.pcar .galc__dot{
	display:block; width:7px; height:7px; padding:0; border:0;
	border-radius:var(--r-pill); background:var(--sand-deep); cursor:pointer;
	transition:all .35s var(--ease);
}
.pcar .galc__dot[aria-current="true"]{ background:var(--brass); width:24px; }

.pcar .galc__count{
	margin:14px 0 0; text-align:center;
	font-size:var(--t-xs); letter-spacing:var(--track-caps);
	text-transform:uppercase; color:var(--greige);
}

@media (max-width:680px){
	.pcar .galc__nav{ width:42px; height:42px; font-size:1.5rem; }
}

@media (max-width:900px){
	.gal,
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
	.gal,
	.wp-block-gallery.has-nested-images,
	.wp-block-gallery.columns-2,
	.wp-block-gallery.columns-3,
	.wp-block-gallery.columns-4{ grid-template-columns:1fr; }
	.pcar__track > figure{ height:clamp(220px, 62vw, 360px); }
}