/* ==========================================================================
   JR Properties — Personnalisation du thème
   Toute la CSS custom du site va ici. Chargée en dernier, après Kadence.
   ========================================================================== */


/* ==========================================================================
   POLICE LOCALE : Instrument Sans (RGPD, plus aucun appel a Google Fonts).
   Fichiers woff2 dans assets/fonts/. On reproduit exactement ce que Kadence
   chargeait depuis Google (poids 400 et 700, sous-ensembles latin + latin-ext,
   font-display: swap) pour un rendu strictement identique. Instrument Sans est
   une police variable : les deux poids pointent vers le meme fichier par
   sous-ensemble. Le chargement Google est coupe cote PHP (functions.php).
   ========================================================================== */
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin-ext.woff2?ver=1784564789') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin.woff2?ver=1784564789') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin-ext.woff2?ver=1784564789') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin.woff2?ver=1784564789') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   POLICE LOCALE : Prata (serif d'affichage pour les titres).
   Meme principe RGPD : woff2 en local (assets/fonts/), aucun appel a Google.
   Prata n'a qu'un seul poids (400) et pas de sous-ensemble latin-ext : le
   sous-ensemble latin couvre entierement le francais. Instrument Sans reste
   la police du corps de texte.
   ========================================================================== */
@font-face {
	font-family: 'Prata';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/prata-latin.woff2?ver=1784569094') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   TITRES PRATA (duo avec Instrument Sans qui reste pour le corps).
   Choix H3 : les petits titres (H3 des cartes services/etapes) RESTENT en
   Instrument Sans 500. Prata est une serif contrastee a un seul poids (400) :
   elegante en grand, mais elle manque de presence et de lisibilite en petit.
   On la reserve donc aux GRANDS titres (hero h1 + h2 de section) et on garde
   Instrument Sans pour les sous-titres fonctionnels -> hierarchie claire.
   Le hero h1 est stylise plus bas (section HERO). Ici : les titres de section
   (h2 centres, hors numeros stats/etapes non centres). Couleurs inchangees.
   Tailles mesurees (elegantes, pas theatrales), letter-spacing tres leger.
   ========================================================================== */
body:has(.hero-jr) .entry-content h2.wp-block-heading.has-text-align-center {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	/* !important : bat les classes WP de taille (has-large-font-size, etc.) */
	font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;
	line-height: 1.15;
	letter-spacing: 0.01em;
}


/* ==========================================================================
   HERO PAGE D'ACCUEIL  (.hero-jr — Row Kadence)
   --------------------------------------------------------------------------
   Structure Kadence réelle :
     .hero-jr.wp-block-kadence-rowlayout   ← wrapper (porte l'image de fond)
       ├─ .hero-jr__video                  ← <video> injecté par hero-video.js
       ├─ .kt-row-layout-overlay           ← voile eucalyptus (réglé dans Kadence)
       └─ .kt-row-column-wrap              ← contenu (h1, accroche, boutons)

   Empilement : vidéo (z-0) < overlay (z-1) < contenu (z-2).

   NB : le sélecteur .hero-jr.wp-block-kadence-rowlayout (2 classes) est utilisé
   volontairement là où il faut battre la CSS générée par Kadence (spécificité
   supérieure à ses sélecteurs .kb-row-layout-idXXX en une seule classe), afin
   d'éviter tout !important.
   ========================================================================== */

/* ==========================================================================
   FULL-BLEED : le hero occupe toute la largeur de l'écran, collé sous le header
   --------------------------------------------------------------------------
   Le hero est imbriqué dans une colonne centrée (content-style-boxed, largeur
   « narrow ») avec des marges autour. On sort de ce carcan, et on supprime les
   espaces au-dessus. Tout est ciblé via body:has(.hero-jr) → n'affecte QUE les
   pages qui contiennent ce hero (robuste même si la page devient l'accueil).
   ========================================================================== */

/* 1. Masquer le bandeau de titre de page Kadence (« Accueil », min-height 200px)
      inséré entre le header et le contenu → le hero remonte sous le header. */
body:has(.hero-jr) .entry-hero.page-hero-section {
	display: none;
}

/* 2. Supprimer les marges verticales du conteneur de contenu (.content-area :
      5rem en haut ET en bas) → plus d'espace blanc entre le header et le hero,
      ni entre la derniere section (CTA final) et le footer. */
body:has(.hero-jr) .content-area {
	margin-top: 0;
	margin-bottom: 0;
}

/* 3. Supprimer le padding vertical de l'enveloppe directe du hero
      (.entry-content-wrap : 2rem en haut ET en bas) → le hero touche le haut et
      la derniere section touche le footer. Le padding latéral est laissé : il
      est sans effet visible, les sections full-bleed sortent de ce conteneur. */
.entry-content-wrap:has(> .entry-content > .hero-jr) {
	padding-top: 0;
	padding-bottom: 0;
}

/* 4. Full-bleed : sortir de la colonne centrée pour occuper 100vw, quelle que
      soit la largeur max du thème. Technique classique : largeur = viewport,
      marge négative calc(50% - 50vw) pour recaler sur le bord gauche. */
.hero-jr.wp-block-kadence-rowlayout {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
}

/* 5. Garde anti-scroll horizontal : le 100vw inclut la largeur de la scrollbar
      et pourrait déborder de quelques pixels. overflow-x: clip sur le conteneur
      supprime ce débordement sans casser le header sticky (contrairement à
      hidden, clip ne crée pas de contexte de défilement). */
.content-area {
	overflow-x: clip;
}

/* ==========================================================================
   FULL-BLEED GÉNÉRALISÉ : toutes les sections de la page d'accueil bord à bord
   --------------------------------------------------------------------------
   Étend le traitement full-bleed à TOUTES les Row Kadence de la page (le hero
   a déjà son propre traitement ci-dessus, donc on l'exclut via :not(.hero-jr)).
   Ciblé via body:has(.hero-jr) → uniquement les pages contenant ce hero.
   Principe : le fond de chaque section s'étend sur 100vw, mais le contenu
   interne reste centré dans une largeur lisible (--global-content-width).
   L'anti-scroll horizontal est déjà assuré par .content-area { overflow-x: clip }.
   ========================================================================== */

/* Fond bord à bord : chaque section occupe toute la largeur de l'écran. */
body:has(.hero-jr) .entry-content > .wp-block-kadence-rowlayout:not(.hero-jr) {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Contenu interne re-centré dans une largeur lisible (le fond, lui, reste full). */
body:has(.hero-jr) .entry-content > .wp-block-kadence-rowlayout:not(.hero-jr) > .kt-row-column-wrap {
	max-width: var(--global-content-width, 1290px);
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
}

/* --- Conteneur : contexte de positionnement + rognage de la vidéo --------- */
.hero-jr {
	position: relative;
	overflow: hidden;
}

/* Poster comme image de fond de secours (remplace l'image Kadence existante).
   Sert : avant le chargement de la vidéo, si le JS est absent, et sur mobile
   (où la vidéo n'est volontairement pas injectée).

   ATTENTION, ce poster est l'élément LCP en mobile : c'est la plus grande
   image peinte, et la vidéo mobile n'arrive qu'après le load. Son poids est
   donc directement une métrique, pas un détail de confort.

   Deux paliers seulement (1200 et 1920), là où les autres bannières en ont
   trois. Le palier 3200 n'aurait pas de sens ici : l'image est tirée de
   hero-original-1440p60.mp4, qui ne fait que 2560 px de large, et la vidéo
   qu'elle annonce est elle-même en 1920. Un poster plus net que la vidéo
   qu'il précède ne servirait à rien.
   Fichiers générés par tools/build-hero.mjs (voir l'en-tête du script). */
.hero-jr.wp-block-kadence-rowlayout {
	background-image: url('../img/hero-poster-1920.jpg?ver=1787758631');
	background-image: image-set(
		url('../img/hero-poster-1920.webp?ver=1787758631') type('image/webp'),
		url('../img/hero-poster-1920.jpg?ver=1787758631') type('image/jpeg')
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Mobile, toutes densités : 1200 px suffit (390 px @3x = 1170 px demandés).
   C'est le palier qui compte pour le LCP. */
@media (max-width: 767px) {
	.hero-jr.wp-block-kadence-rowlayout {
		background-image: url('../img/hero-poster-1200.jpg?ver=1787758629');
		background-image: image-set(
			url('../img/hero-poster-1200.webp?ver=1787758629') type('image/webp'),
			url('../img/hero-poster-1200.jpg?ver=1787758629') type('image/jpeg')
		);
	}
}

/* --- Vidéo de fond -------------------------------------------------------- */
.hero-jr__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* remplit sans déformer */
	z-index: 0;             /* au-dessus du background Kadence, sous l'overlay */
	pointer-events: none;   /* n'intercepte jamais les clics des boutons */
}

/* --- Overlay eucalyptus : voile uniforme sur TOUTE la section --------------
   L'overlay natif de Kadence ne couvre que la colonne de contenu (effet de
   rectangle assombri au centre) : on le neutralise et on pose notre propre
   voile en pseudo-élément, calé sur .hero-jr (inset:0) comme la vidéo, donc
   bord à bord sur toute la largeur et la hauteur du hero. */
.hero-jr > .kt-row-layout-overlay {
	display: none;
}

.hero-jr::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: #33443B;
	opacity: 0.35;
	z-index: 1;             /* entre la vidéo (0) et le contenu (2) */
	pointer-events: none;   /* le contenu reste cliquable */
}

/* --- Contenu : centrage parfait (horizontal + vertical) ------------------- */
.hero-jr.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	position: relative;
	z-index: 2;
	min-height: 88vh;        /* hauteur généreuse pour un vrai centrage vertical */
	align-content: center;   /* centre verticalement (Kadence rend un grid) */
	justify-items: center;   /* centre horizontalement les blocs */
}

/* Texte blanc, bien lisible sur le voile eucalyptus */
.hero-jr h1,
.hero-jr p {
	color: #ffffff;
}

/* Titre : Prata, taille MESUREE et elegante (imposante mais sobre, pas
   theatrale). Interlignage 1.15 pour laisser respirer, letter-spacing tres
   leger, largeur max pour un beau retour a la ligne. */
.hero-jr h1 {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	/* !important : bat la classe WP has-xxlarge-font-size.
	   Cap a 4.25rem (68px) sur desktop, borne basse 2.5rem (40px) sur mobile. */
	font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
	letter-spacing: 0.01em;
	max-width: 18ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.75rem;  /* espace généreux entre titre et accroche */
	line-height: 1.15;
}

/* Accroche : un peu plus large que le titre, respiration avant les boutons */
.hero-jr p {
	max-width: 44ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.5rem;
}

/* ==========================================================================
   BOUTONS DU HERO
   ========================================================================== */

/* Base commune aux deux boutons → DIMENSIONS IDENTIQUES.
   - box-sizing: border-box + une bordure 1px sur les DEUX (transparente sur le
     plein, blanche sur le contour) : le bouton contour n'est donc pas plus
     grand que le plein (le border ne s'ajoute pas aux dimensions).
   - font-size / line-height / padding communs → même hauteur et même largeur.
   - Le préfixe .wp-block-buttons monte la spécificité pour battre les styles
     par défaut du bloc « outline » de WordPress (qui impose border:2px et un
     padding différent).
   - border-radius en !important : le bouton contour porte un border-radius:0
     en style inline, qu'aucun sélecteur ne peut battre sans !important. */
.hero-jr .wp-block-buttons .wp-block-button .wp-block-button__link {
	box-sizing: border-box;
	border: 1px solid transparent;
	border-radius: 8px !important;
	padding: 0.95em 2.4em;
	font-size: 1rem;
	line-height: 1.4;
	font-weight: 600;
	transition: background-color 0.3s ease, color 0.3s ease,
	            transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Principal : « Estimer mes revenus » (fond sauge, texte eucalyptus) --- */
.hero-jr .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: #8B9D77;
	color: #33443B;
	border-color: transparent;
}
.hero-jr .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.hero-jr .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #9CB086;              /* léger éclaircissement */
	color: #33443B;
	transform: translateY(-2px);            /* léger soulèvement */
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);  /* ombre douce */
}

/* --- Secondaire : « Découvrir » (contour blanc, fond transparent) ---------
   Même bordure 1px que le plein → mêmes dimensions extérieures. */
.hero-jr .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border-color: #ffffff;
}
.hero-jr .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero-jr .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: rgba(255, 255, 255, 0.15);  /* fond blanc translucide */
	color: #ffffff;
}

/* ==========================================================================
   APPARITION AU CHARGEMENT (fondu montant, léger décalage entre éléments)
   Encapsulé dans prefers-reduced-motion: no-preference → les utilisateurs qui
   demandent moins de mouvement voient le contenu immédiatement, sans animation.
   ========================================================================== */
@keyframes heroFadeUp {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
	.hero-jr h1               { animation: heroFadeUp 0.8s ease 0.00s both; }
	.hero-jr p                { animation: heroFadeUp 0.8s ease 0.15s both; }
	.hero-jr .wp-block-buttons { animation: heroFadeUp 0.8s ease 0.30s both; }
}

/* ==========================================================================
   MOBILE (≤ 768px) : hero resserré. La vidéo mobile (hero-mobile.mp4) est
   injectée par hero-video.js APRÈS l'événement load, et seulement si le réseau
   le permet ; jusque-là c'est le poster en fond qui tient la place.
   ========================================================================== */
@media (max-width: 768px) {
	.hero-jr.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		min-height: 70vh;
		padding-top: 90px;
		padding-bottom: 90px;
	}
}

/* Vidéo chargée en différé (mobile uniquement : hero-video.js ne pose cette
   classe que là). Elle arrive transparente et se révèle en fondu une fois
   réellement jouable, par-dessus le poster qui reste visible dessous — un
   basculement sec passerait pour un bug. Le desktop n'a pas cette classe :
   son <video> est injecté et affiché exactement comme avant. */
.hero-jr__video--deferred {
	opacity: 0;
	transition: opacity 700ms ease;
}
.hero-jr__video--deferred.is-ready {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.hero-jr__video--deferred {
		transition: none;
	}
}


/* ==========================================================================
   BANDE DE STATISTIQUES (.jr-stats — Row Kadence, 3 colonnes)
   --------------------------------------------------------------------------
   Structure : .jr-stats > .kt-row-column-wrap (grid 3 col) > colonnes
   > .kt-inside-inner-col > h2 (chiffre) + p (libellé).
   L'empilement mobile (≤767px) est déjà géré nativement par Kadence.
   Le compteur au scroll est piloté par assets/js/stats-counter.js.
   ========================================================================== */

/* Fond vert pâle + respiration verticale généreuse.
   NB : le fond de la Row était transparent (rendu blanc) — on le pose ici pour
   matérialiser la bande décrite. À déplacer dans Kadence si tu préfères. */
.jr-stats.wp-block-kadence-rowlayout {
	background-color: #E7EAE0;
}
.jr-stats.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	/* Bandeau compact : padding vertical nettement resserré (avant : 3-6vw-5rem,
	   soit ~77px, qui creusait un grand vide sous les libellés). */
	padding-top: clamp(1.75rem, 3vw, 2.5rem);
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	gap: 2.5rem;   /* air entre colonnes : horizontal en 3-col, vertical une fois empilé */
}

/* Centrage du contenu de chaque colonne (chiffre + libellé) */
.jr-stats .kt-inside-inner-col {
	text-align: center;
}

/* Le chiffre : eucalyptus #33443B (meilleur contraste sur vert pâle ET blanc),
   gros et présent. tabular-nums = chiffres de largeur fixe → aucun saut de
   largeur pendant l'animation du compteur. */
.jr-stats .wp-block-heading {
	/* Chiffre principal (span .jr-stat-num) en encre foncee ; seul le suffixe
	   (.jr-stat-suffix : « /5 », « j/7 », « % ») passe en sauge, voir plus bas. */
	color: #2E2E2A;
	/* Chiffres reduits d'environ 20 % (avant : cap a 4rem/64px -> 3.2rem/51px) */
	font-size: clamp(2.2rem, 4.8vw, 3.2rem);
	font-weight: 800;
	line-height: 1.05;
	margin: 0 0 0.25rem;  /* espace chiffre/libelle resserre (avant 0.5rem) */
	font-variant-numeric: tabular-nums;
}

/* Accent : SEUL le dernier caractere significatif (le 2e « 5 », le 2e « 7 »,
   le « % ») passe en sauge #8B9D77. Le reste du chiffre (nombre + milieu du
   suffixe) reste en encre #2E2E2A. Les spans sont crees par stats-counter.js ;
   l'accent reste visible meme sans animation (mouvement reduit). */
.jr-stats .wp-block-heading .jr-stat-accent {
	color: #8B9D77;
}

/* Le libellé : plus petit, discret, eucalyptus atténué, léger espacement.
   SEO-022 (action 27) : opacité portée de 0.65 à 0.80. À 0.65 le texte
   calculé (#727E75 sur le fond vert pâle #E7EAE0) ne donnait qu'un rapport
   de contraste de 3,48, sous le minimum de 4,5 exigé à cette taille.
   À 0.80 : 5,04 sur ce fond, 6,3 sur blanc. L'aspect « libellé atténué »
   est conservé, le texte est simplement un ton plus soutenu. */
.jr-stats .wp-block-paragraph {
	color: rgba(51, 68, 59, 0.8);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0;
}


/* ==========================================================================
   SECTION "4 SERVICES" (.jr-services : Row Kadence, 4 colonnes)
   --------------------------------------------------------------------------
   Direction sobre, suisse. Chaque colonne : bloc icone, titre H3, description.
   Le fond de section est deja pose par Kadence (palette7), on n'y touche pas.
   Palette : sauge #8B9D77, eucalyptus #33443B, encre #2E2E2A, attenue #5F5D56.
   ========================================================================== */

/* Instrument Sans (deja chargee globalement) + encre de base */
.jr-services {
	font-family: "Instrument Sans", sans-serif;
	color: #2E2E2A;
}

/* Carte : contenu centre, pile verticale a espacement regulier et genereux */
.jr-services .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;   /* bloc compact : texte proche de l'illustration */
	text-align: center;
}

/* Icone : sauge, centree */
.jr-services .wp-block-icon,
.jr-services .kb-svg-icon-wrap {
	display: flex;
	justify-content: center;
	color: #8B9D77;
}
.jr-services .wp-block-icon svg,
.jr-services .kb-svg-icon-wrap svg {
	width: 28px;
	height: 28px;
	color: #8B9D77;
	fill: currentColor;
	stroke: currentColor;
}

/* Illustration (bloc image qui remplace l'icone) : ~190px. Zone de hauteur fixe
   (190px) pour aligner les titres des 4 colonnes ; image alignee EN HAUT de la
   zone (flex-start) pour que les 4 illustrations demarrent a la meme ligne haute
   (ronds sauge alignes), quel que soit leur ratio (accueil est plus paysage).
   margin 0 !important : supprime le margin-bottom de 32px que WordPress met sur
   le bloc image. */
.jr-services .wp-block-image {
	margin: 0 !important;
	height: 190px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.jr-services .wp-block-image img {
	display: block;
	width: auto;
	height: auto;
	max-width: 190px;
	max-height: 190px;
	object-fit: contain;
}

/* Titre H3 : eucalyptus, ~17px, poids 500 (on neutralise le <strong> eventuel) */
.jr-services h3 {
	margin: 0;
	color: #33443B;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.3;
}
.jr-services h3 strong {
	font-weight: inherit;
}

/* Description : attenuee, ~14px, interlignage aere */
.jr-services p {
	margin: 0;
	color: #5F5D56;
	font-size: 14px;
	line-height: 1.6;
}

/* Air entre les colonnes + grille 4 colonnes en desktop */
.jr-services.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Hover premium sobre : au survol de la colonne, l'illustration monte et
   grossit legerement. Cible le figure image (pas la colonne animee par le
   reveal au scroll -> aucun conflit). Encapsule dans prefers-reduced-motion:
   no-preference -> aucun mouvement si le visiteur demande moins d'animation. */
@media (prefers-reduced-motion: no-preference) {
	.jr-services .wp-block-image {
		transition: transform 0.35s ease;
	}
	.jr-services .wp-block-kadence-column:hover .wp-block-image {
		transform: translateY(-4px) scale(1.03);
	}
}

/* Responsive : 4 colonnes, puis 2 sous 900px, puis 1 sous 600px */
@media (max-width: 900px) {
	.jr-services.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 600px) {
	.jr-services.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* Illustrations proportionnees sur mobile (zone + taille reduites) */
	.jr-services .wp-block-image {
		height: 170px;
	}
	.jr-services .wp-block-image img {
		max-width: 170px;
		max-height: 170px;
	}
}


/* ==========================================================================
   SECTION "COMMENT CA MARCHE" (.jr-steps : Row Kadence, 3 colonnes)
   --------------------------------------------------------------------------
   Chaque colonne : grand numero (H2 : 01/02/03) en filigrane, titre H3, desc.
   Contenu aligne a gauche (contraste avec les services centres au-dessus).
   Fond vert pale deja pose par Kadence (palette8), on n'y touche pas.
   Palette : sauge #8B9D77, eucalyptus #33443B, attenue #5F5D56.
   ========================================================================== */

/* Instrument Sans (deja chargee globalement) */
.jr-steps {
	font-family: "Instrument Sans", sans-serif;
}

/* Grille 3 colonnes + air entre colonnes */
.jr-steps.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Colonne : contenu aligne a gauche + contexte de positionnement du filigrane.
   padding-top reserve la place du grand numero, qui est sorti du flux. */
.jr-steps .kt-inside-inner-col {
	position: relative;
	text-align: left;
	padding-top: 2.5rem;
}

/* Grand numero (premier bloc titre = H2) : filigrane sauge decoratif.
   Sorti du flux, place en haut a gauche, sous le contenu (z-index 0) avec une
   opacite reduite : lisible mais s'efface derriere le titre. */
.jr-steps .kt-inside-inner-col > h2 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	margin: 0;
	color: #8B9D77;
	font-size: 64px;
	font-weight: 500;
	line-height: 1;
	opacity: 0.22;
	pointer-events: none;
}

/* Titre de l'etape : eucalyptus, ~18px, passe DEVANT le filigrane */
.jr-steps h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 0.6rem;
	color: #33443B;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

/* Description : encre attenuee, ~14px, interlignage aere */
.jr-steps p {
	position: relative;
	z-index: 1;
	margin: 0;
	color: #5F5D56;
	font-size: 14px;
	line-height: 1.6;
}

/* Responsive : sous 768px, les 3 etapes restent sur UNE rangee (demande client),
   avec le MEME contenu qu'en desktop : numero + titre + description.
   A 390px de large, chaque colonne fait ~115px, soit des lignes de 18 a 20
   caracteres. Les reglages ci-dessous servent tous cette contrainte :
     - gouttiere reduite a 0.4rem : chaque pixel rendu au texte compte ;
     - numero en filigrane derriere le titre, comme en desktop (voir le bloc
       mobile ci-dessous) : il ne consomme aucune hauteur dans le flux ;
     - interlignage resserre a 1.4 : sur des lignes aussi courtes, l'aeration
       verticale de 1.6 hachait la lecture au lieu de l'aider ;
     - cesure automatique (hyphens, la page est en lang="fr-FR") : sans elle,
       « synchronises » ou « rendez-vous » partent seuls sur une ligne et
       creusent de gros trous ;
     - text-wrap: pretty pour eviter les lignes orphelines d'un seul mot. */
@media (max-width: 768px) {
	.jr-steps.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 0.4rem !important;
	}
	/* Le numero garde le traitement desktop defini plus haut : filigrane en
	   position absolue, opacite 0.22, sauge, titre pose par-dessus. Seules
	   l'echelle et l'alignement changent ici, et le rapport decalage / taille du
	   chiffre est conserve a l'identique :
	     desktop  40px / 64px = 0.625
	     mobile 28.8px / 46px = 0.626
	   Le titre recouvre donc 37% de la hauteur du chiffre dans les deux cas.

	   Alignement : tout est CENTRE en mobile (le desktop, lui, reste a gauche).
	   Le filigrane est etire d'un bord a l'autre de la colonne — left:0 vient de
	   la regle desktop, right:0 est ajoute ici — ce qui lui donne la pleine
	   largeur ; le chiffre s'y centre alors de lui-meme par le text-align herite
	   de la colonne, et tombe donc exactement derriere le titre. */
	.jr-steps .kt-inside-inner-col {
		text-align: center;
		padding-top: 1.8rem;
	}
	.jr-steps .kt-inside-inner-col > h2 {
		right: 0;
		font-size: 46px;
	}
	.jr-steps h3 {
		font-size: 12.5px;
		line-height: 1.2;
		margin: 0 0 0.4rem;
	}
	.jr-steps p {
		font-size: 12px;
		line-height: 1.4;
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
		text-wrap: pretty;
	}
}


/* ==========================================================================
   NOS BIENS EN GESTION (.jr-gallery : Row Kadence, 3 fiches de biens)
   --------------------------------------------------------------------------
   Cartes facon fiches de logement, injectees cote serveur (functions.php ->
   jrp_properties_html). Maquette de demonstration : contenu PLACEHOLDER, a
   remplacer par les vrais biens (editer le tableau $biens dans functions.php).
   Structure d'une carte :
     .jr-prop__card
       > a.jr-prop__media > img        (photo 4:3, cover, zoom au survol)
       > .jr-prop__body
           > p.jr-prop__place          (commune, surtitre sauge majuscules)
           > h3.jr-prop__name          (nom du bien, Prata eucalyptus)
           > p.jr-prop__specs          (caracteristiques, encre attenuee)
           > a.jr-prop__link           (« En savoir plus » + fleche, hover)
   L'enveloppe reste une Row + colonnes Kadence : la section conserve son
   espacement pleine largeur ET l'apparition au scroll (reveal sur les colonnes).
   Palette : calcaire #F7F4EE, eucalyptus #33443B, sauge #8B9D77, encre #2E2E2A,
   encre attenuee #5F5D56.
   ========================================================================== */

.jr-gallery {
	font-family: "Instrument Sans", sans-serif;
	/* Contexte de positionnement des fleches (.jr-props-nav, en absolute). */
	position: relative;
	/* Gouttiere ET largeur de carte pilotees d'ici : le JS lit la gouttiere
	   calculee pour avancer d'exactement une carte par clic. */
	--jr-props-gap: clamp(1.5rem, 2.5vw, 2.25rem);
	/* Cartes visibles a la fois. Jamais plus qu'il n'existe de biens (--jr-props,
	   pose par le PHP) : avec 2 biens la rangee reste pleine, sans vide a droite. */
	--jr-props-visible: min(3, var(--jr-props, 3));
	/* Retrait lateral du contenu = centrage a 1290px + padding du column-wrap
	   (memes valeurs que la regle generique des rangees de l'accueil). Sert a
	   poser les fleches par rapport au bord des cartes. */
	--jr-props-inset: calc(max(0px, (100% - var(--global-content-width, 1290px)) / 2) + clamp(1rem, 4vw, 2rem));
	/* Retrait des fleches VERS L'INTERIEUR du bord des cartes.
	   Elles etaient auparavant centrees SUR ce bord (- la moitie du bouton), ce
	   qui rendait leur position tributaire de la marge exterieure : confortable a
	   1440 px (85 px de marge), mais a 1114 px le bouton ne laissait plus que
	   10 px jusqu'au bord de la fenetre et mordait la photo. Ancrees a l'interieur,
	   les deux fleches sont symetriques par construction a toutes les largeurs.
	   VALEUR : 30 px, dictee par le RAIL SOCIAL fixe du bord droit. Entre 800 et
	   1290 px de large, le retrait du contenu est fige a 32 px et le rail commence
	   a ~51 px du bord : a 10 px de retrait, la fleche droite passait SOUS les
	   icones (9 a 11 px de recouvrement mesures a 1114 et 1280 px). 30 px la
	   ramenent a ~62 px du bord, le rail est degage, et les deux cotes bougent
	   ensemble pour que la symetrie soit conservee. */
	--jr-props-nav-gap: 30px;
}

/* Carrousel horizontal : defilement natif overflow-x + scroll-snap, meme
   mecanique que le bandeau partenaires et le carrousel d'avis (rien a
   synchroniser en JS, le pouce et le trackpad fonctionnent nativement).
   Remplace l'ancienne grille : tous les biens disponibles sont atteignables
   depuis l'accueil, et la largeur des cartes ne depend plus de leur nombre. */
.jr-gallery.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	display: flex;
	grid-template-columns: none;
	flex-wrap: nowrap;
	gap: var(--jr-props-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* Sans cela, une carte « collee au debut » viendrait se loger SOUS le padding
	   lateral du conteneur : le snap s'aligne sur la boite de padding. */
	scroll-padding-left: clamp(1rem, 4vw, 2rem);
	-webkit-overflow-scrolling: touch;
	/* Barre de defilement masquee : les fleches et les points portent l'affordance. */
	scrollbar-width: none;
	/* overflow-x rogne AUSSI le debordement vertical : sans cette reserve, le
	   soulevement de la carte au survol (-4px) et son ombre portee seraient
	   coupes. La marge negative annule la reserve basse dans le flux. */
	padding-top: 6px;
	padding-bottom: 22px;
	margin-bottom: -16px;
}
.jr-gallery.wp-block-kadence-rowlayout > .kt-row-column-wrap::-webkit-scrollbar {
	display: none;
}
.jr-gallery .jr-prop {
	flex: 0 0 calc(
		(100% - (var(--jr-props-visible) - 1) * var(--jr-props-gap)) / var(--jr-props-visible)
	);
	scroll-snap-align: start;
}

/* Tablette : 2 cartes visibles (a 3, les cases se resserrent trop pour que le
   nom du bien et ses caracteristiques restent lisibles). */
@media (max-width: 1024px) {
	.jr-gallery {
		--jr-props-visible: min(2, var(--jr-props, 3));
	}
}

/* --- Fleches de defilement (creees par assets/js/jr-props-carousel.js) -------
   Vrais <button> avec aria-label : focus clavier natif, Entree / Espace
   fonctionnels. Elles ne remplacent pas l'acces clavier au contenu — chaque
   carte reste un arret de tabulation et le navigateur la fait defiler dans la
   vue tout seul. Masquees des qu'il n'y a plus rien a defiler dans ce sens
   (attribut hidden pose par le JS), et sur mobile (swipe + points). */
.jr-props-nav {
	position: absolute;
	/* Centre sur la PHOTO de la carte, pas sur la carte entiere : ordonnee
	   mesuree par le JS (hauteur de photo = 4:3 d'une largeur variable). */
	top: var(--jr-props-nav-y, 50%);
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(51, 68, 59, 0.10);
	border-radius: 50%;
	/* Charte inchangee : calcaire, chevron eucalyptus, ombre des cartes. */
	background-color: #F7F4EE;
	color: #33443B;
	box-shadow: 0 6px 20px rgba(46, 46, 42, 0.16);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease,
	            opacity 0.4s ease;
}
/* display:flex ci-dessus l'emporterait sur le display:none implicite de
   l'attribut hidden : on le retablit explicitement. */
.jr-props-nav[hidden] {
	display: none;
}
/* Posees a l'interieur du bord des cartes, au meme retrait des deux cotes. */
.jr-props-nav--prev {
	left: calc(var(--jr-props-inset) + var(--jr-props-nav-gap));
}
.jr-props-nav--next {
	right: calc(var(--jr-props-inset) + var(--jr-props-nav-gap));
}
/* Les fleches n'apparaissent qu'une fois la section revelee. Sans ce garde-fou
   elles sont peintes des le chargement, alors que scroll-reveal.js maintient
   encore les cartes en translateY(20px) : leur ordonnee (mesuree en coordonnees
   de mise en page, donc deja finale) ne correspondait pas a la photo telle
   qu'affichee, et elles semblaient decalees de 20 px. Sans moteur de reveal
   (mouvement reduit, ou hors accueil), le gate .jr-reveal-ready est absent et
   les fleches s'affichent normalement. */
.jr-reveal-ready .jr-gallery:not(.is-revealed) .jr-props-nav {
	opacity: 0;
	pointer-events: none;
}
.jr-props-nav:hover {
	background-color: #33443B;
	color: #F7F4EE;
}
.jr-props-nav:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 3px;
}
.jr-props-nav svg {
	width: 20px;
	height: 20px;
}
@media (prefers-reduced-motion: reduce) {
	.jr-props-nav {
		transition: none;
	}
}

/* Titre de section « Nos biens en gestion » : couvre les 3 colonnes (donc
   parfaitement centre au-dessus des cartes), eucalyptus, espace de la grille.
   La typo Prata + la taille viennent de la regle globale des titres de section
   (.entry-content h2.wp-block-heading.has-text-align-center). */
.jr-gallery .jr-props__title {
	/* Recale au niveau de la Rangee (le titre n'est plus DANS le column-wrap) :
	   memes max-width et padding que le column-wrap -> rendu desktop identique.
	   margin-top : aere la separation avec la section precedente (etapes 01/02/03),
	   desktop comme mobile. */
	max-width: 1290px;
	margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
	/* !important : bat .single-content h2:first-child { margin-top: 0 } (le titre
	   est le 1er enfant de la Rangee). Aere la separation avec les etapes. */
	margin-top: clamp(2rem, 5vw, 4rem) !important;
	padding-left: clamp(1.25rem, 4vw, 2rem);
	padding-right: clamp(1.25rem, 4vw, 2rem);
	box-sizing: border-box;
	text-align: center;
	color: #33443B;
}

/* La colonne Kadence sert de conteneur de reveal : on neutralise ses marges et
   paddings, et on l'etire pour que la carte occupe toute la hauteur (cartes
   d'egale hauteur grace au grid en align stretch). */
.jr-gallery .wp-block-kadence-column {
	display: flex;
}
/* Lien « voir tous les logements », rendu seulement quand l'inventaire depasse
   ce que la rangee affiche. Discret : meme fleche et meme typo que les cartes,
   mais centre sous la grille. */
.jr-gallery .jr-props__all {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	text-align: center;
}
.jr-gallery .jr-props__all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
	border-bottom: 1px solid rgba(51, 68, 59, 0.25);
	padding-bottom: 2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.jr-gallery .jr-props__all-link:hover,
.jr-gallery .jr-props__all-link:focus-visible {
	color: #8B9D77;
	border-color: #8B9D77;
}
@media (prefers-reduced-motion: reduce) {
	.jr-gallery .jr-props__all-link {
		transition: none;
	}
}

.jr-gallery .kt-inside-inner-col {
	padding: 0;
	width: 100%;
	display: flex;
	/* Hauteurs egales. A 4 colonnes les cases se resserrent et un nom long
	   (« D'amour et d'huile d'Olive ») passe sur deux lignes : sa carte gagne
	   une ligne et le « En savoir plus » des autres se retrouvait plus haut.
	   La rangee de grille s'alignait bien sur la plus haute, mais la carte ne
	   remplissait pas sa cellule. On force le remplissage sur toute la chaine. */
	height: 100%;
	align-items: stretch;
}
.jr-gallery .jr-prop__card {
	height: 100%;
}

/* Carte : fond clair calcaire, coins arrondis, ombre douce, leger soulevement.
   Entierement cliquable via le lien overlay .jr-prop__overlay (position relative
   = bloc conteneur de l'overlay). */
.jr-prop__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #F7F4EE;
	border: 1px solid rgba(51, 68, 59, 0.06);
	border-radius: 16px;
	overflow: hidden;   /* rogne le zoom de la photo aux coins arrondis */
	box-shadow: 0 6px 24px rgba(46, 46, 42, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jr-prop__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(46, 46, 42, 0.14);
}
/* Lien qui recouvre toute la carte : clic partout -> /nos-logements/. Curseur
   pointer sur l'ensemble ; focus clavier visible (cerne la carte). */
.jr-prop__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
	border-radius: 16px;
	-webkit-tap-highlight-color: transparent;
}
.jr-prop__overlay:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 3px;
}

/* Photo : ratio 4:3 uniforme, cover, zoom leger au survol de la carte. */
.jr-prop__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.jr-prop__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.jr-prop__card:hover .jr-prop__media img {
	transform: scale(1.05);
}

/* Corps de carte : fond clair, padding genereux, pousse le lien en bas. */
.jr-prop__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: clamp(1.25rem, 2vw, 1.6rem);
}

/* Surtitre : commune, petit, majuscules, sauge. */
.jr-prop__place {
	margin: 0 0 0.5rem;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8B9D77;
}

/* Nom du bien : Prata, eucalyptus. */
.jr-prop__name {
	margin: 0 0 0.6rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.2;
	color: #33443B;
}

/* Caracteristiques : Instrument Sans, encre attenuee. */
.jr-prop__specs {
	margin: 0 0 1.25rem;
	font-size: 14px;
	line-height: 1.5;
	color: #5F5D56;
}

/* Lien « En savoir plus » : sobre, eucalyptus, aligne en bas de la carte. */
.jr-prop__link {
	align-self: flex-start;
	margin-top: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 14px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
}
/* Soulignement anime : le trait se deploie de gauche a droite au survol carte. */
.jr-prop__link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 1.5px;
	background-color: #33443B;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.jr-prop__card:hover .jr-prop__link::after,
.jr-prop__card:focus-within .jr-prop__link::after {
	transform: scaleX(1);
}

/* Fleche : glisse legerement a droite au survol de la carte. */
.jr-prop__arrow {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.jr-prop__card:hover .jr-prop__arrow {
	transform: translateX(3px);
}

/* Le nombre de cartes visibles est desormais pilote par --jr-props-visible
   (3 desktop / 2 tablette / 1 mobile, voir le pack mobile en fin de fichier) :
   plus de bascule de grille a gerer ici, le conteneur est un flex scroller a
   tous les ecrans. */


/* ==========================================================================
   BLOC "PROPRIETAIRES / VOYAGEURS" (.jr-dual : Row Kadence, 2 colonnes egales)
   --------------------------------------------------------------------------
   Gauche (proprietaires) : fond eucalyptus #33443B, texte calcaire #F7F4EE.
   Droite (voyageurs)     : fond sauge #8B9D77, texte eucalyptus #33443B.
   Les deux moities bord a bord (aucune gouttiere), pleine largeur, hauteurs
   egalisees, padding interieur genereux et identique.
   Palette : eucalyptus #33443B, sauge #8B9D77, calcaire #F7F4EE, encre #2E2E2A.
   ========================================================================== */

/* Instrument Sans (deja chargee globalement) */
.jr-dual {
	font-family: "Instrument Sans", sans-serif;
}

/* Annule la contrainte largeur/padding du full-bleed global POUR CE BLOC :
   le column-wrap occupe 100% (la row fait deja 100vw), 2 colonnes egales sans
   gouttiere, hauteurs egalisees (stretch). Selecteur a specificite superieure
   (0,6,1) a la regle generique full-bleed (0,5,1) pour la surclasser. */
body:has(.hero-jr) .entry-content > .jr-dual.wp-block-kadence-rowlayout:not(.hero-jr) > .kt-row-column-wrap {
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

/* Padding interieur genereux et identique dans chaque moitie.
   background-color transparent !important : Kadence pose un aplat de couleur
   (palette, defini dans l'editeur) sur .kt-inside-inner-col via une CSS inline
   dans le <head> ; comme l'inner col remplit la colonne, cet aplat masquait la
   photo posee sur la colonne. On le neutralise pour laisser voir la photo. */
.jr-dual .kt-inside-inner-col {
	padding: clamp(2.5rem, 5vw, 4rem);
	background-color: transparent !important;
}

/* Hauteur plus genereuse : donne de la presence aux photos. Le contenu est
   centre verticalement (justify-content sur la colonne, en flex-direction
   column). Les 2 moities restent egales (le column-wrap est en align stretch)
   et bord a bord. */
.jr-dual .wp-block-kadence-column {
	min-height: clamp(30rem, 52vh, 40rem);
	justify-content: center;
}

/* Fonds des deux moities : photo plein cadre + VOILE UNI eucalyptus (pas de
   degrade), IDENTIQUE sur les deux cartes, pour eclaircir les photos tout en
   gardant le texte blanc lisible. Le voile est une couche de couleur plate
   (linear-gradient a stops identiques = aplat uniforme) posee sur l'image.
   Opacite ajustee pour le contraste AA (voir --jr-dual-veil). WebP + fallback
   JPG via image-set ; background-color = repli si l'image echoue. */
.jr-dual .wp-block-kadence-column {
	/* Voile uni eucalyptus, leger. Opacite calee sur le contraste AA verifie en
	   direct : le contraste MOYEN du texte blanc reste >= 5.5 (AA large marge) et
	   les titres passent l'AA sur toute la surface. 0.35-0.40 laissait le petit
	   texte sous l'AA sur les zones claires des photos ; 0.55 corrige cela sans
	   reassombrir excessivement (photos bien plus claires que l'ancien degrade). */
	--jr-dual-veil: rgba(51, 68, 59, 0.55);
}
.jr-dual .wp-block-kadence-column:first-child {
	background-color: #33443B;   /* repli eucalyptus */
	background-image:
		linear-gradient(var(--jr-dual-veil), var(--jr-dual-veil)),
		image-set(url('../img/dual/proprietaire.webp?ver=1784653259') type('image/webp'), url('../img/dual/proprietaire.jpg?ver=1784653259') type('image/jpeg'));
	background-size: cover;
	background-position: center, center;
	background-repeat: no-repeat;
}
.jr-dual .wp-block-kadence-column:last-child {
	background-color: #33443B;   /* meme repli : voile identique sur les 2 cartes */
	background-image:
		linear-gradient(var(--jr-dual-veil), var(--jr-dual-veil)),
		image-set(url('../img/dual/voyageur.webp?ver=1784653259') type('image/webp'), url('../img/dual/voyageur.jpg?ver=1784653259') type('image/jpeg'));
	background-size: cover;
	background-position: center, center 40%;
	background-repeat: no-repeat;
}

/* Neutralise les fonds de texte parasites (has-background des H3/p).
   !important car WordPress emet les classes de palette avec !important. */
.jr-dual h3,
.jr-dual p {
	background-color: transparent !important;
	padding: 0 !important;   /* has-background ajoute aussi un padding parasite */
}

/* Typographie */
.jr-dual h3 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.5rem, 3vw, 1.9rem);
	font-weight: 600;
	line-height: 1.25;
}
.jr-dual p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

/* Couleurs de texte par moitie */
.jr-dual .wp-block-kadence-column:first-child h3,
.jr-dual .wp-block-kadence-column:first-child p {
	color: #F7F4EE !important;   /* bat le has-theme-palette-*-color (!important WP) */
}
.jr-dual .wp-block-kadence-column:last-child h3,
.jr-dual .wp-block-kadence-column:last-child p {
	color: #F7F4EE !important;   /* texte clair : lisible sur la photo assombrie */
}

/* Boutons : base commune */
.jr-dual .wp-block-buttons {
	margin-top: 1.5rem;
}
.jr-dual .wp-block-button__link {
	border: none;
	border-radius: 6px;
	padding: 0.75em 1.7em;
	font-weight: 500;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Bouton gauche (sur fond eucalyptus) : calcaire, texte eucalyptus.
   !important sur fond/texte pour battre les classes de palette WP (!important). */
.jr-dual .wp-block-kadence-column:first-child .wp-block-button__link {
	background-color: #F7F4EE !important;
	color: #33443B !important;
}
.jr-dual .wp-block-kadence-column:first-child .wp-block-button__link:hover,
.jr-dual .wp-block-kadence-column:first-child .wp-block-button__link:focus-visible {
	background-color: #8B9D77 !important;
	color: #33443B !important;
	transform: translateY(-2px);
}

/* Bouton droit (sur fond sauge) : eucalyptus, texte calcaire */
.jr-dual .wp-block-kadence-column:last-child .wp-block-button__link {
	background-color: #33443B !important;
	color: #F7F4EE !important;
}
.jr-dual .wp-block-kadence-column:last-child .wp-block-button__link:hover,
.jr-dual .wp-block-kadence-column:last-child .wp-block-button__link:focus-visible {
	background-color: #2E2E2A !important;
	color: #F7F4EE !important;
	transform: translateY(-2px);
}

/* Responsive : 2 colonnes cote a cote, puis empilees pleine largeur sous 768px.
   Chaque moitie garde son fond (sur la colonne) et son padding (sur l'inner). */
@media (max-width: 768px) {
	.jr-dual.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* Empilees : hauteur raisonnable par moitie (evite un scroll excessif). */
	.jr-dual .wp-block-kadence-column {
		min-height: 28rem;
	}
}


/* ==========================================================================
   HARMONISATION DES TRANSITIONS DE BOUTONS (page d'accueil)
   --------------------------------------------------------------------------
   Assure une transition douce sur TOUS les boutons (aucun hover brutal) et un
   leger soulevement par defaut pour ceux sans hover specifique (cta-sim,
   cta-final). Les sections avec un hover dedie (hero, dual) gardent le leur
   grace a leur specificite superieure ; le translateY est identique, donc
   coherent. Aucune couleur ajoutee.
   ========================================================================== */
body:has(.hero-jr) .entry-content .wp-block-button__link {
	transition: background-color 0.3s ease, color 0.3s ease,
	            transform 0.3s ease, box-shadow 0.3s ease;
}
body:has(.hero-jr) .entry-content .wp-block-button__link:hover,
body:has(.hero-jr) .entry-content .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}


/* ==========================================================================
   REVEAL AU SCROLL : apparition douce des sections (opacity + translateY)
   --------------------------------------------------------------------------
   Pilote par assets/js/scroll-reveal.js (IntersectionObserver, une seule fois
   par element). Double gate :
     - .jr-reveal-ready  : pose par le JS en entete (progressive enhancement :
       sans JS ou en prefers-reduced-motion, aucun etat cache -> tout visible).
     - body:has(.hero-jr): limite l'effet a la page d'accueil.
   Cible (selecteurs structurels, presents dans le HTML -> pas de flash) :
     - les colonnes des rangees non-hero (le hero garde sa propre animation) ;
     - les titres de section autonomes (enfants directs de .entry-content).
   Le stagger (delai croissant) est pose en inline par le JS sur les colonnes.
   ========================================================================== */

/* Etat initial cache */
.jr-reveal-ready body:has(.hero-jr) .entry-content > .wp-block-kadence-rowlayout:not(.hero-jr) > .kt-row-column-wrap > .wp-block-kadence-column,
.jr-reveal-ready body:has(.hero-jr) .entry-content > .wp-block-heading {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
	            transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Etat revele (declenche par .is-revealed pose au scroll) */
.jr-reveal-ready body:has(.hero-jr) .entry-content > .wp-block-kadence-rowlayout:not(.hero-jr).is-revealed > .kt-row-column-wrap > .wp-block-kadence-column,
.jr-reveal-ready body:has(.hero-jr) .entry-content > .wp-block-heading.is-revealed {
	opacity: 1;
	transform: none;
}


/* ==========================================================================
   HEADER : embleme JR Properties a gauche, menu a droite.
   L'embleme (sans texte) remplace le titre texte dans le lien de marque.
   Deux teintes, pilotees par l'etat du header Kadence :
   - header SOLIDE (defaut, incl. futures pages internes) -> embleme EUCALYPTUS
   - header TRANSPARENT (body.transparent-header) -> embleme CALCAIRE (clair)
   Le libelle « JR Properties » reste lu par les lecteurs d'ecran (hors-ecran).
   Palette : eucalyptus #33443B, calcaire #F7F4EE.
   ========================================================================== */
.site-header .site-branding a.brand {
	position: relative;
	display: flex;
	align-items: center;
	width: 72px;
	height: 82px;
}
/* Le logo est peint par ce pseudo-element a taille FIXE (72x82) et redimensionne
   uniquement via transform: scale. Ainsi le raster n'est jamais re-rasterise
   pendant l'animation de compactage : le GPU met a l'echelle une texture deja
   nette (rendue une fois depuis la source 671px), donc aucun flou transitoire.
   Defaut = version foncee (visible sur header solide clair).
   Emblemes en assets/logos/ (671x800, ratio 0.839) : background-size: contain
   dans la boite fixe 72x82 -> l'image est bornee par la HAUTEUR (ratio source
   0.839 < ratio boite 0.878), donc rendue a 82px de haut, proportions intactes,
   largeur ~68.8px. Meme hauteur qu'avec l'ancien dessin (592x694), juste un peu
   plus etroit. Le compactage au scroll (scale 0.585) reste inchange. */
.site-header .site-branding a.brand::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: 72px;
	height: 82px;
	transform: translateY(-50%) scale(1);
	transform-origin: left center;
	/* Compositing : le pseudo-element est garde comme texture, la transition de
	   scale se fait sur le GPU (aucun repaint du raster -> zero flou). */
	will-change: transform;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	background-image: url('../logos/embleme-fonce.png?ver=1785854530');
	background-image: image-set(
		url('../logos/embleme-fonce.webp?ver=1785854530') type('image/webp'),
		url('../logos/embleme-fonce.png?ver=1785854530') type('image/png')
	);
}

/* Ancre l'embleme a ~16px du bord GAUCHE de la fenetre, quelle que soit la
   largeur, en compensant le centrage du conteneur du header (max-width 1290px,
   padding lateral 24px). Sur ecran > 1290px le conteneur est centre : on retire
   la demi-marge laterale (100vw - 1290px)/2 en plus des 8px. Sur ecran <= 1290px
   le conteneur est deja pleine largeur (max(0px,...) = 0) : on retire juste 8px
   de gouttiere -> bord a 16px. Cible le header desktop (-main-) uniquement ; le
   header mobile (meme classe) : neutralise via le media query desktop ci-dessous,
   donc placement natif (deja pleine largeur, pres du bord) sous 1025px. */
@media (min-width: 1025px) {
	.site-header .site-header-main-section-left {
		margin-left: calc(-8px - max(0px, (100vw - 1290px) / 2));
	}
}

/* Header transparent AU REPOS -> embleme COULEUR (soleil et jarre terracotta),
   en grand format. Des que le header se compacte au scroll, on repasse a
   l'embleme monochrome : voir la regle .is-scrolled plus bas.
   Boite 80x95 : le ratio source est 671/800 = 0.83875, donc a 95px de haut
   l'image occupe 79.7px de large. 80px suffit et laisse background-size: contain
   se caler sur la HAUTEUR (ratio boite 80/95 = 0.842 > 0.83875), soit exactement
   95px de haut sans un pixel de largeur en trop.
   Seule la boite du ::before grandit : l'ancre .brand garde 72x82, donc la
   hauteur du header et la mise en page ne bougent pas. Le ::before etant en
   position absolue et centre verticalement, l'embleme deborde de 6.5px au-dessus
   et en dessous de son ancre, sur un header transparent. */
body.transparent-header .site-header .site-branding a.brand::before,
body.mobile-transparent-header .site-header .site-branding a.brand::before {
	width: 80px;
	height: 95px;
	/* Descendu de 6px. Centre sur une ancre de 82px, une boite de 95px place le
	   haut du CANVAS a -6.5px ; le dessin commencant 4.04px plus bas, sa pointe
	   (le bout de la branche d'olivier) tombait a -2.46px en desktop et -3.46px
	   en mobile, donc rognee par le bord de la fenetre. Les 6px la ramenent a
	   +3.5px et +2.5px. Meme liste de fonctions que l'etat compacte
	   (translateY puis scale) : les deux transforms s'interpolent composante par
	   composante, la transition reste continue. */
	transform: translateY(calc(-50% + 6px)) scale(1);
	background-image: url('../logos/embleme-clair-couleur.png?ver=1786024288');
	background-image: image-set(
		url('../logos/embleme-clair-couleur.webp?ver=1786024288') type('image/webp'),
		url('../logos/embleme-clair-couleur.png?ver=1786024288') type('image/png')
	);
}

/* Liens du menu sur header TRANSPARENT : calcaire, bien lisibles sur la video.
   Le body garde .transparent-header meme scrolle : quand le header prendra un
   fond eucalyptus au scroll (a venir), le blanc reste lisible (blanc sur
   eucalyptus). Sur les pages a header solide clair (non-transparent), on laisse
   la couleur foncee par defaut de Kadence -> lisible sur clair. Coherent. */
body.transparent-header .site-header .header-navigation .menu-item > a,
body.transparent-header .site-header .header-navigation .menu-item > a:visited {
	color: #F7F4EE !important;
	transition: color 0.25s ease;
}
body.transparent-header .site-header .header-navigation .menu-item > a:hover,
body.transparent-header .site-header .header-navigation .menu-item > a:focus-visible {
	color: #8B9D77 !important;
}

/* Titre texte de Kadence : masque visuellement, conserve pour l'accessibilite. */
.site-header .site-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ==========================================================================
   HEADER AU SCROLL (accueil, header transparent) : sticky + compactage.
   --------------------------------------------------------------------------
   En haut de page : transparent, grand logo (etat de base ci-dessus, inchange).
   Des qu'on scrolle, assets/js/header-scroll.js pose .is-scrolled sur le header :
   une bande eucalyptus translucide apparait en fondu, le header se compacte
   (hauteur + logo reduits) et reste colle en haut (position: fixed). Le menu
   reste calcaire, lisible sur l'eucalyptus (regle plus haut). En remontant tout
   en haut, retour a l'etat transparent en douceur.
   Scope body.transparent-header : les pages a header SOLIDE ne sont pas touchees
   (position native conservee). prefers-reduced-motion : pas d'animation, mais le
   fond apparait quand meme pour la lisibilite.
   Palette : eucalyptus #33443B, encre #2E2E2A (ombre translucide).
   ========================================================================== */

/* Sticky (suit le scroll) + transitions douces.
   !important : bat le position: absolute que Kadence applique au header
   transparent (sinon il defilerait avec la page au lieu de rester colle). */
body.transparent-header .site-header {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
body.transparent-header .site-header .site-main-header-inner-wrap {
	transition: min-height 0.4s ease;
}
/* La boite du logo change de taille (layout, compactage du header). */
body.transparent-header .site-header .site-branding a.brand {
	transition: width 0.4s ease, height 0.4s ease;
}
/* Le logo lui-meme (::before) est mis a l'echelle par transform (net, GPU). */
body.transparent-header .site-header .site-branding a.brand::before {
	transition: transform 0.4s ease;
}

/* Etat scrolle : bande eucalyptus (quasi opaque) + compactage.
   PAS de backdrop-filter : il forcait le header dans un backing store de
   compositing que Chrome mettait a l'echelle pendant l'animation de taille ->
   logo raster flou le temps de la transition. Sans lui, l'animation width/height
   repeint chaque frame et le logo reste net. Le fond 0.95 suffit visuellement.
   !important : Kadence impose le fond transparent et les dimensions du header
   transparent avec une priorite superieure ; on les surclasse ici. */
body.transparent-header .site-header.is-scrolled {
	background-color: rgba(51, 68, 59, 0.95) !important;
	box-shadow: 0 2px 18px rgba(46, 46, 42, 0.18);
}
body.transparent-header .site-header.is-scrolled .site-main-header-inner-wrap {
	min-height: 56px !important;
}
body.transparent-header .site-header.is-scrolled .site-branding a.brand {
	width: 42px !important;
	height: 48px !important;
}
/* Logo compact : le visuel compacte NE CHANGE PAS, il reste a 48px de haut.
   Le facteur suit la boite au repos : elle est passee de 82 a 95px, donc
   48/95 = 0.5053 la ou l'ancienne valeur 0.585 valait pour 82px (48/82).
   Downscale GPU d'une texture nette, aucune re-rasterisation.
   AUCUNE regle background-image ici, volontairement : l'embleme COULEUR de
   l'etat au repos est simplement conserve. Redeclarer la meme image-set aurait
   donne le meme rendu, mais laisser la declaration unique garantit qu'il n'y a
   ni seconde source, ni recalcul de fond, ni clignotement possible pendant le
   compactage : seule la transform s'anime, sur une texture inchangee. */
body.transparent-header .site-header.is-scrolled .site-branding a.brand::before,
body.mobile-transparent-header .site-header.is-scrolled .site-branding a.brand::before {
	transform: translateY(-50%) scale(0.5053);
}

/* Mouvement reduit : pas d'animation de compactage, mais la bande de fond
   apparait quand meme (lisibilite du menu sur l'eucalyptus). */
@media (prefers-reduced-motion: reduce) {
	body.transparent-header .site-header,
	body.transparent-header .site-header .site-main-header-inner-wrap,
	body.transparent-header .site-header .site-branding a.brand,
	body.transparent-header .site-header .site-branding a.brand::before {
		transition: none;
	}
}


/* ==========================================================================
   FOOTER CUSTOM (.jr-footer) : remplace le footer Kadence, sur tout le site.
   Fond encre #2E2E2A, texte calcaire, titres de colonnes sauge. Pleine largeur,
   contenu centre a 1290px. Injecte via le hook kadence_footer (functions.php).
   Palette : encre #2E2E2A, calcaire #F7F4EE, sauge #8B9D77.
   ========================================================================== */
.jr-footer {
	background-color: #2E2E2A;
	color: #F7F4EE;
	font-family: "Instrument Sans", sans-serif;
}

.jr-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 2.5rem 3rem;
	max-width: 1290px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2rem) clamp(2.5rem, 5vw, 3.5rem);
}

/* Zone marque : lockup horizontal + baseline */
.jr-footer__baseline {
	margin: 0.9rem 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: rgba(247, 244, 238, 0.7);
}

/* Bloc marque : largeur reduite au contenu (le lockup), pour que la baseline
   s'aligne sur la meme colonne que le logo. */
.jr-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: max-content;
	max-width: 100%;
}

/* Lockup horizontal (embleme + JR PROPERTIES). Export 3x (270px de haut),
   affiche a 90px : la hauteur explicite borne l'image, width auto conserve
   le ratio (433x270 fixes en attributs -> pas de decalage au chargement). */
.jr-footer__lockup {
	display: block;
	height: 90px;
	width: auto;
	max-width: 100%;
}

/* Titres de colonnes : sauge, petits, majuscules, letter-spacing */
.jr-footer__title {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #8B9D77;
}

/* Listes de liens */
.jr-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jr-footer__col li {
	margin: 0 0 0.7rem;
}
.jr-footer__col a {
	color: #F7F4EE;
	text-decoration: none;
	font-size: 0.95rem;
	transition: color 0.25s ease;
}
.jr-footer__col a:hover,
.jr-footer__col a:focus-visible {
	color: #8B9D77;
}

/* Colonne reseaux : icone de marque + label, blanc casse -> sauge au survol */
.jr-footer__social a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.jr-footer__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: currentColor;
	transition: fill 0.25s ease;
}

/* Bloc avis Google : etoiles or sobre + mention discrete, sous les reseaux.
   Filet fin de separation, coherent avec la barre du bas du footer. */
.jr-footer__reviews {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(247, 244, 238, 0.15);
	text-decoration: none;
	color: #F7F4EE;
}
.jr-footer__stars {
	display: inline-flex;
	gap: 3px;
	color: #D2B06A;   /* or sobre : lisible sur le fond fonce, reste chaleureux */
}
.jr-footer__star {
	width: 15px;
	height: 15px;
	fill: currentColor;
}
.jr-footer__reviews-text {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.9rem;
}
.jr-footer__reviews-text strong {
	font-weight: 600;
	color: #F7F4EE;
	transition: color 0.25s ease;
}
.jr-footer__reviews-count {
	color: rgba(247, 244, 238, 0.6);
	font-size: 0.85rem;
}
.jr-footer__reviews:hover .jr-footer__reviews-text strong,
.jr-footer__reviews:focus-visible .jr-footer__reviews-text strong {
	color: #8B9D77;
}

/* Barre du bas : filet fin, copyright centre, aligne sur la largeur de contenu */
.jr-footer__bottom {
	max-width: 1290px;
	margin: 0 auto;
	padding: 1.25rem clamp(1.25rem, 4vw, 2rem);
	border-top: 1px solid rgba(247, 244, 238, 0.15);
	text-align: center;
}
.jr-footer__bottom p {
	margin: 0;
	font-size: 0.85rem;
	color: rgba(247, 244, 238, 0.6);
}

/* Responsive : colonnes en ligne desktop, empilees proprement sur mobile */
@media (max-width: 900px) {
	.jr-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 600px) {
	.jr-footer__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}


/* ==========================================================================
   SECTION AVIS GOOGLE (.jr-reviews) : en-tete note + carousel d'avis.
   Contenu injecte cote serveur (functions.php), auto-scroll par reviews.js.
   Fond vert pale #E7EAE0, cartes calcaire, etoiles sauge, note eucalyptus.
   Palette : vert pale #E7EAE0, calcaire #F7F4EE, sauge #8B9D77,
   eucalyptus #33443B, encre #2E2E2A.
   ========================================================================== */

.jr-reviews {
	font-family: "Instrument Sans", sans-serif;
}
.jr-reviews.wp-block-kadence-rowlayout {
	background-color: #E7EAE0;
}
.jr-reviews.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	padding-top: clamp(3rem, 6vw, 5rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* --- Etoiles (SVG, sauge) ------------------------------------------------- */
.jr-reviews__starrow {
	display: inline-flex;
	gap: 0.15rem;
}
.jr-reviews__star {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	fill: #8B9D77;
}

/* --- En-tete note globale ------------------------------------------------- */
.jr-reviews__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	text-align: center;
}
.jr-reviews__score {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.2rem;
	line-height: 1;
}
.jr-reviews__score-num {
	font-size: clamp(2.75rem, 6vw, 3.5rem);
	font-weight: 700;
	color: #33443B;
}
.jr-reviews__score-max {
	font-size: 1.25rem;
	font-weight: 600;
	color: #33443B;
	opacity: 0.55;
}
.jr-reviews__head .jr-reviews__star {
	width: 24px;
	height: 24px;
}
.jr-reviews__count {
	margin: 0;
	font-size: 0.95rem;
	color: #2E2E2A;
}
.jr-reviews__google {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin-top: 0.25rem;
	color: #33443B;
	font-size: 0.9rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.25s ease;
}
.jr-reviews__google:hover,
.jr-reviews__google:focus-visible {
	color: #8B9D77;
}
.jr-reviews__g {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* --- Carousel ------------------------------------------------------------- */
/* Defilement NATIF : c'est le conteneur lui-meme qui scrolle. On recupere ainsi
   gratuitement le glissement au doigt, le deux-doigts sur trackpad et l'inertie
   du systeme. L'auto-scroll (reviews.js) n'est qu'un increment de scrollLeft.
   Barre de defilement masquee : l'aspect reste exactement celui de la charte. */
.jr-reviews__carousel {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* Accroche douce : les cartes se recalent sans jamais bloquer le geste.
	   « proximity » et non « mandatory » : le bandeau est un mur d'avis continu,
	   pas un carousel pagine. */
	scroll-snap-type: x proximity;
	/* Ecriture de scrollLeft instantanee : sinon l'increment de l'auto-scroll
	   serait anime par le navigateur et lutterait contre la boucle JS. */
	scroll-behavior: auto;
	overscroll-behavior-x: contain;   /* pas de navigation arriere au swipe */
	scrollbar-width: none;            /* Firefox */
	-ms-overflow-style: none;         /* anciens Edge */
}
.jr-reviews__carousel::-webkit-scrollbar {
	display: none;                    /* Chrome, Safari */
}
/* Auto-scroll en cours (classe posee par reviews.js) : l'accroche est coupee,
   sinon elle ramenerait la position a chaque frame. Elle revient des que
   l'utilisateur prend la main. */
.jr-reviews__carousel.is-auto {
	scroll-snap-type: none;
}
.jr-reviews__track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
}

/* --- Carte d'avis --------------------------------------------------------- */
.jr-reviews__card {
	flex: 0 0 340px;
	max-width: 88vw;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.75rem;
	background-color: #F7F4EE;
	border-radius: 12px;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(46, 46, 42, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.jr-reviews__card:hover,
.jr-reviews__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 10px 28px rgba(46, 46, 42, 0.1);
}
.jr-reviews__card-stars {
	display: block;
}
.jr-reviews__card-stars .jr-reviews__star {
	width: 16px;
	height: 16px;
}
.jr-reviews__text {
	display: block;
	color: #2E2E2A;
	font-size: 0.95rem;
	line-height: 1.6;
}
.jr-reviews__name {
	display: block;
	margin-top: auto;
	padding-top: 0.4rem;
	color: #33443B;
	font-weight: 600;
	font-size: 0.9rem;
}

/* --- Responsive : 1 carte visible sur mobile ------------------------------ */
@media (max-width: 600px) {
	.jr-reviews__card {
		flex-basis: 85vw;
	}
}


/* ==========================================================================
   INDICATEUR DE SCROLL DU HERO (.jr-scroll-indicator)
   --------------------------------------------------------------------------
   Bouton injecte par assets/js/hero-scroll.js en bas du hero : fleche + mot
   « SCROLL », en calcaire. Oscillation verticale discrete de la fleche ;
   estompage des que l'on scrolle (classe .is-hidden posee par le JS). Au clic :
   defilement doux vers la premiere section (gere en JS). prefers-reduced-motion :
   pas d'oscillation.
   Palette : calcaire #F7F4EE.
   ========================================================================== */
.jr-scroll-indicator {
	/* Absolu, cale sur le BAS DU HERO (.hero-jr est position: relative) : ainsi
	   l'indicateur reste TOUJOURS sur la video. Un positionnement fixe au bas du
	   viewport tombait sur la section claire suivante quand le hero est plus court
	   que la fenetre (ecrans hauts), rendant le texte calcaire invisible. */
	position: absolute;
	left: 50%;
	bottom: clamp(1.25rem, 3vh, 2rem);
	transform: translateX(-50%);
	z-index: 4;                 /* au-dessus de l'overlay (1) et du contenu (2) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.25rem 0.5rem;
	background: none;
	border: 0;
	cursor: pointer;
	color: #F7F4EE;
	opacity: 0.85;
	/* Ombre subtile (encre) : garantit la lisibilite du calcaire quelle que soit
	   l'image de la video derriere (meme sur une frame claire). */
	filter: drop-shadow(0 1px 4px rgba(46, 46, 42, 0.45));
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.jr-scroll-indicator:hover,
.jr-scroll-indicator:focus-visible {
	opacity: 1;
}
.jr-scroll-indicator__arrow {
	display: block;
	animation: jrScrollBob 1.8s ease-in-out infinite;
}
.jr-scroll-indicator__label {
	font-family: "Instrument Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #F7F4EE;
}
/* Estompe et desactive l'indicateur une fois le scroll amorce. */
.jr-scroll-indicator.is-hidden {
	opacity: 0;
	transform: translateX(-50%) translateY(10px);
	pointer-events: none;
}
@keyframes jrScrollBob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.jr-scroll-indicator__arrow { animation: none; }
	.jr-scroll-indicator { transition: opacity 0.01ms; }
}
/* Mobile uniquement. A partir de 768px (desktop et tablette) l'indicateur est
   retire : sur ces ecrans la suite de la page est deja devinable et le geste de
   scroll ne demande aucune invitation. Breakpoint aligne sur celui de Kadence
   Blocks (mobile = max-width 767px) et sur le pack mobile du theme enfant.
   display: none le sort aussi du parcours clavier et de l'arbre d'accessibilite. */
@media (min-width: 768px) {
	.jr-scroll-indicator { display: none; }
}


/* ==========================================================================
   RAIL SOCIAL FIXE (.jr-social-rail) : bord droit, centre verticalement.
   --------------------------------------------------------------------------
   Rendu sur toutes les pages (functions.php -> wp_footer). Chaque icone est
   posee dans un rond eucalyptus TRANSLUCIDE : cela garantit la lisibilite de
   l'icone calcaire sur fond clair comme sur fond fonce (le rond fournit toujours
   un contraste). Survol : rond eucalyptus plein + icone sauge. Masque sous
   1024px (mobile / petite tablette) pour ne pas encombrer.
   Palette : eucalyptus #33443B, calcaire #F7F4EE, sauge #8B9D77.
   ========================================================================== */
.jr-social-rail {
	position: fixed;
	top: 50%;
	right: clamp(0.5rem, 1vw, 0.9rem);
	transform: translateY(-50%);
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.jr-social-rail a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(51, 68, 59, 0.62);      /* rond eucalyptus translucide */
	color: #F7F4EE;                                 /* icone calcaire */
	box-shadow: 0 2px 10px rgba(46, 46, 42, 0.20);  /* leger detachement sur fond clair */
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.jr-social-rail a:hover,
.jr-social-rail a:focus-visible {
	background-color: #33443B;   /* rond plein au survol */
	color: #8B9D77;              /* icone sauge */
	transform: translateY(-2px);
}
.jr-social-rail svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
/* Mobile et petite tablette : masque (choix le plus propre sur petit ecran). */
@media (max-width: 1023px) {
	.jr-social-rail {
		display: none;
	}
}


/* ==========================================================================
   BANDEAU PLATEFORMES (.jr-platforms) : logos de diffusion, defilement PAR PAS.
   --------------------------------------------------------------------------
   Injecte apres la section d'avis (functions.php -> jrp_platforms_html), anime
   par assets/js/platforms-carousel.js (un cran toutes les ~4 s, glissement doux,
   boucle infinie). Fond calcaire, surtitre sauge. Les logos gardent leurs
   COULEURS DE MARQUE ; hauteur uniforme, alignes, espacement regulier.
   Fondu aux deux bords via mask-image. 4 logos visibles (desktop), 2 (mobile).
   prefers-reduced-motion : grille figee, sans animation.
   Palette (elements de section) : calcaire #F7F4EE, sauge #8B9D77.
   ========================================================================== */
.jr-platforms {
	--visible: 4;                          /* logos visibles a la fois (desktop) */
	background-color: #F7F4EE;
	padding: clamp(3.75rem, 7vw, 5.75rem) 0;
	font-family: "Instrument Sans", sans-serif;
	/* Pleine largeur meme si le conteneur de contenu est boxed (full-bleed sur). */
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.jr-platforms__inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2rem);
}
.jr-platforms__overline {
	margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B9D77;
}

/* Fenetre : masque le debordement + fondu doux aux deux bords. */
.jr-platforms__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* Piste : rangee d'elements ; le glissement (translateX) est pilote en JS. */
.jr-platforms__track {
	display: flex;
	will-change: transform;
}

/* Une "case" par logo, largeur egale (100 / nombre visible), logo centre. */
.jr-platforms__item {
	flex: 0 0 calc(100% / var(--visible));
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 clamp(1.5rem, 3vw, 2.75rem);
}

/* Logos : contenus dans une box de hauteur uniforme (contain, centres), couleurs
   de marque conservees. La hauteur CIBLE est reglee PAR LOGO (--logo-h) car les
   ratios de marque different beaucoup : on egalise l'importance visuelle, pas la
   hauteur brute. max-width 100% -> les logos tres larges (Booking) sont bornes
   par la largeur de la case. Ajuster les --logo-h ci-dessous pour affiner. */
.jr-platforms__logo {
	display: block;
	width: auto;
	height: var(--logo-h, 56px);   /* hauteur explicite : rendu fiable partout */
	max-width: 100%;               /* les logos tres larges (Booking) sont bornes */
	object-fit: contain;           /* et alors contenus (letterbox) sans distorsion */
}
.jr-platforms__logo--airbnb   { --logo-h: 60px; }
.jr-platforms__logo--booking  { --logo-h: 46px; }  /* ratio ~6:1 tres large -> plus court */
.jr-platforms__logo--expedia  { --logo-h: 50px; }
.jr-platforms__logo--abritel  { --logo-h: 50px; }
.jr-platforms__logo--holidu   { --logo-h: 56px; }
.jr-platforms__logo--hometogo { --logo-h: 54px; }  /* ratio ~1.8:1 compact */

/* Responsive : hauteurs mises a l'echelle (0.82) pour l'equilibre optique. Sur
   mobile, le JS pose .is-groups -> affichage PAR GROUPES en fondu enchaine.
   --------------------------------------------------------------------------
   MOBILE : 2 logos affiches a la fois, 3 groupes qui alternent toutes les 4 s.
   Aucune position horizontale n'est calculee, et c'est tout l'interet : les
   groupes sont EMPILES dans les memes cases de grille (chaque item est pose sur
   grid-row: 1, sa colonne etant donnee par son index modulo le nombre par
   groupe). Seule l'opacite change d'un groupe a l'autre. Rien ne peut donc se
   tronquer, glisser hors cadre ou laisser un vide.

   2 par groupe et non 3 : mesure faite a 390px (cases de 101px a 3, de 159px a
   2). A 3 par groupe, cinq logos sur six sont brides par la LARGEUR et non par
   leur --logo-h, ce qui annule l'equilibre optique regle ci-dessus ; Booking,
   de ratio 6:1, tombe a 16.8px de haut. A 2 par groupe il remonte a 26.5px.

   Le fondu par mask-image est retire : sur 350px de large il rognait les bords. */
@media (max-width: 768px) {
	/* Bandeau compact. Le padding de base est un clamp() dont le PLANCHER est une
	   valeur pensee pour le desktop : a 390px, 7vw vaut 27px, donc le plancher de
	   3.75rem (60px) l'emporte et ne redescend jamais. La section gardait ainsi
	   120px de respiration pour 49px de logos, soit un rapport de 2.4:1 qui se
	   lit comme une bande vide. Le contenu, lui, etait deja centre (60px de part
	   et d'autre, mesure) : c'est bien la hauteur qu'il fallait reprendre, pas
	   l'alignement. Meme valeur que la bande de statistiques (.jr-stats), qui
	   avait exactement le meme defaut, pour que les deux bandeaux s'accordent. */
	.jr-platforms {
		padding-top: clamp(1.75rem, 3vw, 2.5rem);
		padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
	}
	.jr-platforms__logo {
		height: calc(var(--logo-h, 56px) * 0.82);
	}

	.jr-platforms.is-groups .jr-platforms__viewport {
		overflow: hidden;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.jr-platforms.is-groups .jr-platforms__track {
		display: grid;
		grid-template-columns: repeat(var(--per-group, 2), minmax(0, 1fr));
		align-items: center;
		width: auto;
	}
	/* Tous les items sur la meme rangee : les groupes se superposent case par
	   case. La hauteur de la rangee est celle du plus grand logo, donc stable
	   d'un groupe a l'autre : le bandeau ne saute pas au changement. */
	.jr-platforms.is-groups .jr-platforms__item {
		grid-row: 1;
		width: auto;
		padding: 0 0.5rem;
		opacity: 0;
		transition: opacity 600ms ease;
	}
	.jr-platforms.is-groups .jr-platforms__item.is-current {
		opacity: 1;
	}
	/* Mouvement reduit : le JS ne pose pas .is-groups, la grille figee du bloc
	   prefers-reduced-motion plus bas prend le relais. Par securite, si la
	   preference change en cours de route, on neutralise aussi la transition. */
	@media (prefers-reduced-motion: reduce) {
		.jr-platforms.is-groups .jr-platforms__item {
			opacity: 1;
			transition: none;
		}
	}
}

/* Mouvement reduit (media) OU classe .is-static posee par le JS : grille figee,
   centree, sans animation ni fondu. */
@media (prefers-reduced-motion: reduce) {
	.jr-platforms__viewport {
		-webkit-mask-image: none;
		mask-image: none;
		overflow: visible;
	}
	.jr-platforms__track {
		flex-wrap: wrap;
		justify-content: center;
		gap: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
		transform: none !important;   /* neutralise le glissement du mode desktop */
	}
	.jr-platforms__item {
		flex: 0 0 auto;
		padding: 0;
	}
}
.jr-platforms.is-static .jr-platforms__viewport {
	-webkit-mask-image: none;
	mask-image: none;
	overflow: visible;
}
.jr-platforms.is-static .jr-platforms__track {
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
	transform: none !important;
}
.jr-platforms.is-static .jr-platforms__item {
	flex: 0 0 auto;
	padding: 0;
}


/* ==========================================================================
   TEMPLATE "JR LEGAL" (pages legales) : banniere + sommaire ancre + carte.
   --------------------------------------------------------------------------
   Rendu par template-jr-legal.php ; sommaire genere par assets/js/legal-toc.js.
   En-tete transparent force (banniere passe dessous). Palette : eucalyptus
   #33443B, calcaire #F7F4EE, vert pale #E7EAE0, sauge #8B9D77, encre #2E2E2A,
   texte attenue #5F5D56. Carte de contenu en blanc pur (#FFFFFF), pour se
   detacher du fond calcaire de la section.
   ========================================================================== */

/* Conteneur : pas de marge verticale (banniere colle au header, corps au footer).
   overflow-x: clip herite de .content-area (anti-scroll du full-bleed). */
.content-area.jr-legal-page {
	margin-top: 0;
	margin-bottom: 0;
}
.jr-legal-page .jr-legal {
	margin: 0;
}

/* --- Banniere pleine largeur, eucalyptus, sous l'en-tete transparent -------- */
.jr-legal-banner {
	background-color: #33443B;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* padding-top genereux : le contenu passe SOUS l'en-tete transparent fixe. */
	padding-top: clamp(8.5rem, 15vh, 12rem);
	padding-bottom: clamp(3rem, 6vw, 4.5rem);
	box-sizing: border-box;
}
.jr-legal-banner__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2rem);
}
/* Sur-titre : le titre en capitales, petit, sauge, precede d'une pastille ronde. */
.jr-legal-banner__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-legal-banner__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #8B9D77;
}
/* H1 : Prata, calcaire, grande taille. */
.jr-legal-banner__title {
	margin: 0;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.1rem, 5vw, 3.4rem);
	line-height: 1.1;
	color: #F7F4EE;
}

/* --- Corps : fond calcaire pleine largeur, grille centree 1100px ------------ */
.jr-legal-body {
	background-color: #F7F4EE;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2rem) clamp(4.5rem, 9vw, 7rem);
	box-sizing: border-box;
}
.jr-legal-body__inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 28fr) minmax(0, 72fr);   /* sommaire ~28% / contenu ~72% */
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

/* --- Colonne gauche : sommaire sticky --------------------------------------- */
.jr-legal-toc-wrap {
	position: sticky;
	top: 120px;
}
.jr-legal-toc__label {
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-legal-toc {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	border-left: 2px solid #E7EAE0;
	padding-left: 1rem;
}
.jr-legal-toc__link {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	line-height: 1.4;
	color: #5F5D56;
	text-decoration: none;
	transition: color 0.25s ease;
}
.jr-legal-toc__link:hover,
.jr-legal-toc__link:focus-visible {
	color: #33443B;
}
.jr-legal-toc__link.is-active {
	color: #33443B;
	font-weight: 600;
}

/* --- Colonne droite : carte de contenu blanche ------------------------------ */
.jr-legal-content {
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(1.75rem, 4vw, 3rem);
	font-family: "Instrument Sans", sans-serif;
	color: #2E2E2A;
	line-height: 1.75;
}
/* H2 : Prata, eucalyptus, ancrage sous l'en-tete (scroll-margin-top). */
.jr-legal-content h2 {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.85rem);
	line-height: 1.25;
	color: #33443B;
	margin: 2.5rem 0 1rem;
	scroll-margin-top: 110px;
}
.jr-legal-content > h2:first-child,
.jr-legal-content > *:first-child h2 {
	margin-top: 0;
}
.jr-legal-content h3 {
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1.1rem;
	color: #33443B;
	margin: 1.75rem 0 0.6rem;
}
.jr-legal-content p {
	margin: 0 0 1.1rem;
}
.jr-legal-content ul,
.jr-legal-content ol {
	margin: 0 0 1.2rem;
	padding-left: 1.35rem;
}
.jr-legal-content li {
	margin: 0 0 0.5rem;
}
.jr-legal-content a {
	color: #8B9D77;
	text-decoration: none;
	transition: color 0.2s ease;
}
.jr-legal-content a:hover,
.jr-legal-content a:focus-visible {
	text-decoration: underline;
}
.jr-legal-content strong {
	font-weight: 600;
	color: #2E2E2A;
}
.jr-legal-content > *:last-child {
	margin-bottom: 0;
}

/* --- Responsive : sous 900px, sommaire au-dessus + carte pleine largeur ----- */
@media (max-width: 900px) {
	.jr-legal-body__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}
	.jr-legal-toc-wrap {
		position: static;
		top: auto;
	}
}


/* ==========================================================================
   PAGE CONTACT (/contact/) : banniere + colonnes info / formulaire.
   --------------------------------------------------------------------------
   Coherent avec le template "JR Legal" (banniere sous en-tete transparent,
   emblème clair). Style uniquement via les classes .jr-contact (aucun markup
   modifie ; les icones de liste sont remplacees par masques CSS). Palette :
   eucalyptus #33443B, calcaire #F7F4EE, vert pale #E7EAE0, sauge #8B9D77,
   encre #2E2E2A, attenue #5F5D56. Carte formulaire en blanc pur #FFFFFF.
   ========================================================================== */

/* Masque le titre de page Kadence par defaut : la banniere .jr-contact-hero
   (avec son H1 a ajouter dans l'editeur) tient lieu d'en-tete de page. */
body:has(.jr-contact-hero) .entry-hero.page-hero-section {
	display: none;
}
/* Colle la banniere au header et le corps au footer (comme le hero d'accueil). */
body:has(.jr-contact-hero) .content-area {
	margin-top: 0;
	margin-bottom: 0;
}
.entry-content-wrap:has(> .entry-content > .jr-contact-hero) {
	padding-top: 0;
	padding-bottom: 0;
}

/* --- 1. Banniere pleine largeur, eucalyptus, sous l'en-tete transparent ----- */
.jr-contact-hero.wp-block-kadence-rowlayout {
	position: relative;
	display: flex;
	align-items: flex-end;   /* contenu ancre en bas, comme les autres bannieres */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
	min-height: clamp(24rem, 62vh, 34rem);   /* meme hauteur genereuse que /proprietaires/ */
	background-color: #33443B;   /* repli si l'image ne charge pas */
	/* ---- ECHELLE D'IMAGES DES BANNIERES (contact, proprietaires, services) ----
	   Regle de base = palier DESKTOP 1x. Les deux media queries qui suivent la
	   regle prennent le relais pour le mobile et pour le Retina.
	   image-set() ne sert QU'A negocier le format (WebP sinon JPEG). Le choix de
	   la resolution passe par des media queries et non par des descripteurs 1x/2x
	   dans image-set : ceux-ci se decident sur la seule densite d'ecran, jamais
	   sur la largeur du viewport. Un iPhone en DPR 3 aurait donc pioche le
	   fichier 3200 px alors qu'il n'affiche que 390 px de large. Croiser une
	   media query de largeur avec min-resolution evite ce piege : les mobiles
	   restent sur le palier 1200, quelle que soit leur densite.
	   Fichiers generes par tools/build-hero.mjs (voir l'en-tete du script). */
	background-image: url('../img/hero-contact-1920.jpg?ver=1786023421');
	background-image: image-set(
		url('../img/hero-contact-1920.webp?ver=1786023420') type('image/webp'),
		url('../img/hero-contact-1920.jpg?ver=1786023421') type('image/jpeg')
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Mobile, toutes densites : 1200 px suffit (390 px @3x = 1170 px demandes). */
@media (max-width: 767px) {
	.jr-contact-hero.wp-block-kadence-rowlayout {
		background-image: url('../img/hero-contact-1200.jpg?ver=1786023419');
		background-image: image-set(
			url('../img/hero-contact-1200.webp?ver=1786023419') type('image/webp'),
			url('../img/hero-contact-1200.jpg?ver=1786023419') type('image/jpeg')
		);
	}
}
/* Desktop et tablette Retina : palier 2x. Le prefixe -webkit- couvre les
   Safari anterieurs a la prise en charge de min-resolution en dppx. */
@media (min-width: 768px) and (min-resolution: 1.5dppx),
       (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5) {
	.jr-contact-hero.wp-block-kadence-rowlayout {
		background-image: url('../img/hero-contact-3200.jpg?ver=1786023425');
		background-image: image-set(
			url('../img/hero-contact-3200.webp?ver=1786023424') type('image/webp'),
			url('../img/hero-contact-3200.jpg?ver=1786023425') type('image/jpeg')
		);
	}
}
/* Neutralise un eventuel overlay natif Kadence : on pose le notre. */
.jr-contact-hero > .kt-row-layout-overlay {
	display: none;
}
/* Voile eucalyptus par-dessus l'image (tient avec ou sans image).
   display: block : Kadence utilise ::before comme CLEARFIX (display: table) sur
   les .wp-block-kadence-rowlayout ; sans redefinir display, le voile absolu se
   reduisait a 0 (pas de voile). On le force en bloc. Specificite (.jr-contact-
   hero.wp-block-kadence-rowlayout) superieure a la regle clearfix de Kadence.
   Opacite 0.72 : garantit le contraste WCAG AA du texte clair (H1) ET des liens
   du menu transparent par-dessus la banniere (ratios verifies en direct). */
.jr-contact-hero.wp-block-kadence-rowlayout::before {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	/* Voile eucalyptus en DEGRADE, meme structure et meme rendu que le standard
	   (/proprietaires/, /a-propos/, /nos-services/) : renfort gauche + assombrissement
	   vertical. Valeurs a peine relevees vs le standard (0.70/0.66% a gauche ;
	   0.70 -> 0.34 -> 0.50 en vertical) car la photo de Contact est plus claire :
	   ce leger renfort ramene le contraste du texte au NIVEAU de la banniere de
	   reference (mesure au pire pixel : ~2.9, >= /proprietaires/ ~2.7), pour un
	   rendu visuel equivalent. Contraste du surtitre et du H1 preserve. */
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.70) 0%, rgba(51, 68, 59, 0) 66%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.70) 0%, rgba(51, 68, 59, 0.34) 55%, rgba(51, 68, 59, 0.50) 100%);
	z-index: 1;
	pointer-events: none;
}
.jr-contact-hero.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	/* Meme placement vertical que .jr-*-hero__inner : gros padding haut (sous
	   l'en-tete transparent) + padding bas modere ; le contenu tombe en bas via
	   align-items: flex-end de la rangee.
	   !important : bat l'inline Kadence (padding de rangee) imprime apres. */
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem) !important;
	box-sizing: border-box;
}
/* Sur-titre "CONTACT" : meme style que les .jr-*-hero__eyebrow (flex, barre
   terracotta via la regle centralisee, memes espacements). */
.jr-contact-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* Sage ECLAIRCI pour cette page : le sauge #8B9D77 ne passe pas l'AA sur la
	   banniere voilee (max ~2.7). #C6D6B0 (luminance ~0.63) donne un ratio >= 4.5
	   sur le voile, tout en restant dans l'esprit sauge de la palette. */
	color: #C6D6B0;
}
/* La barre verticale terracotta est posee par la regle centralisee de fin de
   fichier (.jr-contact-eyebrow::before). Ici : juste le marqueur (l'espacement
   vient du gap du flex). */
.jr-contact-eyebrow::before {
	content: '';
	flex-shrink: 0;
}
/* H1 : Prata, calcaire, grande taille (memes valeurs que .jr-*-hero__title). */
.jr-contact-hero h1 {
	margin: 0;
	max-width: 16ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* --- 1 bis. Accroche sous la banniere : bandeau calcaire pleine largeur ------
   La rangee Kadence qui porte l'accroche ("Decrivez votre besoin...") n'a AUCUN
   fond propre : ni kt-row-has-bg, ni classe de palette, ni background dans le
   CSS genere par Kadence. Le vert pale visible de part et d'autre etait le fond
   de page (body = palette 8, #E7EAE0) apparaissant a gauche et a droite de la
   carte BLANCHE que Kadence pose sur l'article (.entry.content-bg, #FFFFFF).
   Les deux sections voisines echappent au probleme parce qu'elles sont deja
   forcees en 100vw et recouvrent donc cette carte. On applique ici le meme
   traitement : bandeau calcaire pleine largeur, contenu ramene dans la colonne
   de 1100px, soit exactement l'alignement du bloc info/formulaire qui suit.
   Cible : la rangee qui suit immediatement la banniere (pas de dependance au
   hash d'ID de Kadence, qui change si le bloc est recree). Le :not() evite de
   repeindre le bloc info si l'accroche venait a etre supprimee. */
.jr-contact-hero + .kb-row-layout-wrap:not(.jr-contact-info) {
	background-color: #F7F4EE;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 0;
}
.jr-contact-hero + .kb-row-layout-wrap:not(.jr-contact-info) > .kt-row-column-wrap {
	max-width: 1100px;
	margin: 0 auto;
	/* Padding bas a zero : c'est le padding haut de .jr-contact-info qui donne
	   l'espacement avec la carte "Nous ecrire", sinon les deux s'additionnent. */
	padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem) 0;
}
/* Le paragraphe ne doit pas rajouter sa marge haute au padding du bandeau. */
.jr-contact-hero + .kb-row-layout-wrap:not(.jr-contact-info) p {
	margin-top: 0;
	margin-bottom: 0;
}

/* --- 2. Corps : fond calcaire pleine largeur, grille centree 1100px --------- */
.jr-contact-info.wp-block-kadence-rowlayout {
	background-color: #F7F4EE;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
}
.jr-contact-info.wp-block-kadence-rowlayout > .kt-row-column-wrap {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2rem) clamp(4rem, 8vw, 6rem);
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);   /* info 42 / formulaire 58 */
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: flex-start;
}

/* --- 3. Colonne info : carte vert pale --------------------------------------
   Scope a l'inner-col DIRECT de la colonne gauche (1re colonne de la rangee) :
   evite de peindre les inner-col imbriques (rangee interne du formulaire). */
.jr-contact-info > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
	background-color: #E7EAE0;
	border-radius: 16px;
	padding: clamp(1.75rem, 4vw, 2.75rem);
}
/* Reseaux : separateur discret au-dessus + espacement. */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) {
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid rgba(51, 68, 59, 0.12);
}
/* Reseaux sur UNE seule ligne horizontale (pastilles cote a cote).
   !important : Kadence impose display:grid (colonnes-1) sur la liste. */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 0.75rem;
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-item-wrap {
	margin-bottom: 0;
}
/* Libelles reseaux masques visuellement mais conserves pour les lecteurs d'ecran
   (les items ne sont pas des liens dans le markup : voir note). */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Titre "Nous ecrire" en haut du panneau infos (Prata eucalyptus), en CSS pur
   (contenu genere, aucun markup modifie). */
.jr-contact-info > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col::before {
	content: "Nous écrire";
	display: block;
	margin: 0 0 1.5rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.35rem, 2.4vw, 1.65rem);
	line-height: 1.2;
	color: #33443B;
}
/* Item de liste : icone + texte alignes, aeres. */
.jr-contact-info .kt-svg-icon-list-item-wrap {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.95rem;
}
.jr-contact-info .kt-svg-icon-list-text {
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #2E2E2A;
}
/* Remplacement d'icones : on masque le SVG Kadence par defaut et on peint un
   glyphe via CSS mask (couleur = background-color du ::before). */
.jr-contact-info .kb-svg-icon-wrap svg {
	display: none;
}
.jr-contact-info .kb-svg-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.jr-contact-info .kb-svg-icon-wrap::before {
	content: '';
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
/* Liste 1 (coordonnees) : glyphes sauge, sans pastille. */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(1) .kb-svg-icon-wrap::before {
	width: 22px;
	height: 22px;
	background-color: #8B9D77;
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(1) .kt-svg-icon-list-item-wrap:nth-child(1) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/></svg>");
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(1) .kt-svg-icon-list-item-wrap:nth-child(2) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.28.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.29 21 3 13.71 3 4.5 3 3.95 3.45 3.5 4 3.5h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.28.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.29 21 3 13.71 3 4.5 3 3.95 3.45 3.5 4 3.5h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/></svg>");
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(1) .kt-svg-icon-list-item-wrap:nth-child(3) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z'/></svg>");
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(1) .kt-svg-icon-list-item-wrap:nth-child(4) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>");
}
/* Liste 2 (reseaux) : pastilles rondes eucalyptus, glyphe clair calcaire. */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kb-svg-icon-wrap {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #33443B;
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kb-svg-icon-wrap::before {
	width: 20px;
	height: 20px;
	background-color: #F7F4EE;
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-item-wrap:nth-child(1) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/></svg>");
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-item-wrap:nth-child(2) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/></svg>");
}
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-item-wrap:nth-child(3) .kb-svg-icon-wrap::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/></svg>");
}

/* --- 4. Colonne formulaire : carte blanche + champs charte JR ---------------
   Scope a l'inner-col DIRECT de la colonne form : le formulaire contient une
   rangee Kadence imbriquee dont les inner-col ne doivent PAS devenir des cartes. */
.jr-contact-form > .kt-inside-inner-col {
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(1.75rem, 3.5vw, 2.6rem);   /* padding equilibre haut/bas */
}
.jr-contact-form .kb-adv-form-field {
	margin-bottom: 1.4rem;   /* plus d'espacement vertical entre les champs */
}
.jr-contact-form .kb-adv-form-field.kb-submit-field {
	margin-bottom: 0;   /* pas de vide sous le bouton */
}
/* Rangee imbriquee du formulaire forcee sur 1 colonne : les champs s'etirent
   sur toute la largeur et remplissent la carte (evite le vide sous "Nom"). */
.jr-contact-form .kt-row-column-wrap {
	grid-template-columns: minmax(0, 1fr) !important;
}
.jr-contact-form .kb-adv-form-label {
	font-family: "Instrument Sans", sans-serif;
	font-size: 0.85rem;
	font-weight: 500;
	color: #5F5D56;
	margin-bottom: 0.35rem;
}
.jr-contact-form .kb-field {
	width: 100%;
	box-sizing: border-box;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	color: #2E2E2A;
	/* !important : Kadence impose un fond/bordure de champ avec une priorite superieure. */
	background-color: #F7F4EE !important;
	border: 1px solid rgba(51, 68, 59, 0.14) !important;
	border-radius: 10px !important;
	padding: 0.95rem 1.1rem !important;   /* hauteur de champ un peu plus genereuse */
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jr-contact-form textarea.kb-field {
	min-height: 140px;
	resize: vertical;
}
.jr-contact-form .kb-field::placeholder {
	color: #5F5D56;
}
.jr-contact-form .kb-field:focus {
	outline: none;
	border-color: #8B9D77 !important;
	box-shadow: 0 0 0 3px rgba(139, 157, 119, 0.22);
}
/* Bouton d'envoi : pleine largeur, eucalyptus, texte calcaire (remplace sauge). */
.jr-contact-form .kb-adv-form-submit-button {
	width: 100%;
	justify-content: center;
	background-color: #33443B !important;
	color: #F7F4EE !important;
	border: none;
	border-radius: 10px;
	padding: 0.95rem 1.5rem;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	transition: filter 0.25s ease;
}
.jr-contact-form .kb-adv-form-submit-button:hover,
.jr-contact-form .kb-adv-form-submit-button:focus-visible {
	filter: brightness(1.12);   /* eucalyptus legerement plus clair, sans couleur hors palette */
}

/* --- 5. Responsive : sous 900px, colonnes empilees (info au-dessus) --------- */
@media (max-width: 900px) {
	.jr-contact-info.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.5rem, 5vw, 2.5rem);
	}
}


/* ==========================================================================
   PAGE "A PROPOS" (/a-propos/) : template-jr-about.php
   --------------------------------------------------------------------------
   Structure/style figes en code, texte editable cote WP (ACF). Coherent avec
   le template legal et la page contact : banniere image + voile eucalyptus sous
   en-tete transparent, emblème clair. Palette : eucalyptus #33443B, calcaire
   #F7F4EE, vert pale #E7EAE0, sauge #8B9D77 (eclairci #C6D6B0 pour l'AA sur
   fonds fonces), encre #2E2E2A, attenue #5F5D56.

   Animations (assets/js/about.js) : masque qui se leve, split du H1, cascade
   des cartes, parallax. Etats caches uniquement sous le gate .jr-about-ready
   (pose par le JS, jamais si prefers-reduced-motion) : sans JS ou en mouvement
   reduit, tout est visible et immobile.
   ========================================================================== */

/* Conteneur : pas de marge verticale (banniere collee au header, corps au
   footer), overflow-x clip (anti-scroll horizontal du full-bleed). */
.content-area.jr-about-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}
.jr-about-page .jr-about {
	margin: 0;
}

/* Full-bleed commun a toutes les sections (100vw, recale sur les bords). */
.jr-about-hero,
.jr-about-lead,
.jr-about-founder,
.jr-about-values,
.jr-about-commit,
.jr-about-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* --- Elements partages : surtitre + titre de section centres ---------------
   La rubrique editoriale (.jr-blog, .jr-article) est ajoutee a ces listes
   plutot que de redefinir les memes valeurs dans blog.css : le surtitre et le
   titre de section n'ont qu'une seule definition sur tout le site. Seul leur
   alignement est recale cote blog (bannieres alignees a gauche). */
.jr-about .jr-eyebrow,
.jr-proprio .jr-eyebrow,
.jr-nos-services .jr-eyebrow,
.jr-blog .jr-eyebrow,
.jr-article .jr-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-about .jr-eyebrow--light,
.jr-proprio .jr-eyebrow--light,
.jr-nos-services .jr-eyebrow--light,
.jr-blog .jr-eyebrow--light,
.jr-article .jr-eyebrow--light {
	color: #C6D6B0;   /* AA sur eucalyptus */
}
.jr-about .jr-eyebrow__dot,
.jr-proprio .jr-eyebrow__dot,
.jr-nos-services .jr-eyebrow__dot,
.jr-blog .jr-eyebrow__dot,
.jr-article .jr-eyebrow__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: currentColor;
}
.jr-about .jr-h2,
.jr-proprio .jr-h2,
.jr-nos-services .jr-h2,
.jr-blog .jr-h2,
.jr-article .jr-h2 {
	margin: 0;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: #33443B;
	text-align: center;
}
.jr-about .jr-h2--light,
.jr-proprio .jr-h2--light,
.jr-nos-services .jr-h2--light,
.jr-blog .jr-h2--light,
.jr-article .jr-h2--light {
	color: #F7F4EE;
}

/* ==========================================================================
   1. BANNIERE : image de fond (parallax) + voile eucalyptus en degrade.
   ========================================================================== */
.jr-about-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 34rem);
	background-color: #33443B;   /* repli si l'image ne charge pas */
}
/* Couche image : sur-dimensionnee (parallax sans reveler les bords). */
.jr-about-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	z-index: 0;
	background-image: url('../img/hero-about.jpg?ver=1785680794');
	background-image: image-set(
		url('../img/hero-about.webp?ver=1785680795') type('image/webp'),
		url('../img/hero-about.jpg?ver=1785680794') type('image/jpeg')
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* Voile eucalyptus : dense en haut (menu transparent lisible), plus leger en
   bas, + renfort depuis la GAUCHE derriere le texte pour l'AA du H1 calcaire et
   du surtitre. Ratios verifies en direct. */
.jr-about-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.66) 0%, rgba(51, 68, 59, 0) 62%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.68) 0%, rgba(51, 68, 59, 0.28) 55%, rgba(51, 68, 59, 0.44) 100%);
}
.jr-about-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem);
	box-sizing: border-box;
}
.jr-about-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C6D6B0;   /* sauge eclairci : AA sur le voile */
}
.jr-about-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #C6D6B0;
}
.jr-about-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* ==========================================================================
   2. ACCROCHE : fond calcaire, phrase forte Prata + intro.
   ========================================================================== */
.jr-about-lead {
	background-color: #F7F4EE;
}
.jr-about-lead__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}
.jr-about-lead__strong {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	line-height: 1.3;
	color: #33443B;
	margin: 0 0 1.4rem;
}
.jr-about-lead__intro {
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.75;
	color: #5F5D56;
	margin: 0;
}

/* ==========================================================================
   3. FONDATEUR : fond vert pale, 2 colonnes (portrait ~34% / texte ~66%).
   ========================================================================== */
.jr-about-founder {
	position: relative;
	overflow: hidden;
	background-color: #E7EAE0;
}
/* Emblème filigrane en fond (parallax leger). */
.jr-about-founder__deco {
	position: absolute;
	z-index: 0;
	top: -12%;
	right: -6%;
	width: min(42rem, 72%);
	aspect-ratio: 671 / 800;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.06;
	pointer-events: none;
}
.jr-about-founder__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.jr-about-founder__portrait {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background-color: #33443B;
	box-shadow: 0 18px 44px rgba(46, 46, 42, 0.14);
}
.jr-about-founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jr-about-founder__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #33443B;
}
.jr-about-founder__ph img {
	width: 52%;
	height: auto;
	opacity: 0.9;
}
.jr-about-founder__role {
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8B9D77;
	margin: 0 0 0.6rem;
}
.jr-about-founder__name {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	line-height: 1.15;
	color: #33443B;
	margin: 0 0 1.3rem;
}
.jr-about-founder__story {
	font-family: "Instrument Sans", sans-serif;
	color: #2E2E2A;
	line-height: 1.75;
}
.jr-about-founder__story p {
	margin: 0 0 1.05rem;
}
.jr-about-founder__story p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   4. VALEURS : fond calcaire, en-tete centre + 3 valeurs (+ photo d'equipe).
   ========================================================================== */
.jr-about-values {
	background-color: #F7F4EE;
}
.jr-about-values__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-about-values__head {
	max-width: 640px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.jr-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* --- Variante avec photo d'equipe (.jr-about-values--photo) ----------------
   Posee par le template uniquement si le champ ACF team_photo est renseigne.
   Sans photo, rien de ce qui suit ne s'applique et la section reste la grille
   de trois cartes en rangee pleine largeur.

   Deux colonnes : les valeurs a gauche, la photo a droite. La photo est a
   DROITE et non a gauche pour deux raisons : l'ordre du DOM reste l'ordre de
   lecture en desktop comme en mobile, sans reordonnancement CSS qui decalerait
   un lecteur d'ecran ; et la section fondateur a deja sa photo a gauche.

   Les proportions ne sont pas arbitraires. A 42% sur une largeur de contenu de
   1036px, la colonne photo fait 415px ; les cartes, ramenees a 573px, voient
   leurs trois textes passer sur deux lignes et la pile atteint 440px. La photo
   est donc recadree en 0.943 (415/440) DANS LE FICHIER, pas en CSS, pour que la
   version en mediatheque soit la version definitive. Les deux colonnes
   s'arretent ainsi sur la meme ligne sans qu'aucune hauteur soit forcee. */
.jr-about-values__content {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}
.jr-about-values--photo .jr-about-values__content {
	grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
	gap: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
}
/* A cote d'une photo verticale, les trois valeurs s'empilent : en cartes
   centrees sur une colonne etroite elles seraient etirees et vides. */
.jr-about-values--photo .jr-about-values__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(1rem, 1.8vw, 1.25rem);
}
/* Elles passent donc en LIGNES : pastille a gauche, texte a droite. */
.jr-about-values--photo .jr-value-card {
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	gap: 1.15rem;
	padding: clamp(1.35rem, 2.2vw, 1.75rem);
}
.jr-about-values--photo .jr-value-card__icon {
	flex-shrink: 0;
	margin-bottom: 0;
}
.jr-about-values--photo .jr-value-card__title {
	font-size: 1.2rem;
	margin-bottom: 0.35rem;
}

/* Photo : format d'origine conserve, aucun recadrage. */
.jr-about-values__team {
	margin: 0;
}
.jr-about-values__team img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.10);
}
/* Legende : en Prata et non en Instrument Sans. En petites capitales grasses
   de 15px elle prenait la signature typographique d'une legende de presse,
   c'est-a-dire qu'elle nommait le contenu de la photo. En serif, au corps des
   titres de valeurs, elle se lit comme une affirmation et parle de la meme voix
   que le reste de la section. */
.jr-about-values__team-caption {
	margin: 1.05rem 0 0;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-size: 1.15rem;
	font-weight: 400;
	line-height: 1.3;
	color: #33443B;
	text-align: center;
}
.jr-value-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(1.75rem, 3vw, 2.4rem);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.jr-value-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(46, 46, 42, 0.12);
}
.jr-value-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: #E7EAE0;
	color: #33443B;
	margin-bottom: 1.4rem;
}
.jr-value-card__icon svg {
	width: 30px;
	height: 30px;
}
.jr-value-card__body {
	width: 100%;   /* sinon, en carte centree, le texte se serrerait au contenu */
}
.jr-value-card__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.3rem;
	color: #33443B;
	margin: 0 0 0.7rem;
}
.jr-value-card__text {
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #5F5D56;
	margin: 0;
}

/* ==========================================================================
   5. ENGAGEMENTS : fond eucalyptus, en-tete centre + grille 2x2.
   ========================================================================== */
.jr-about-commit {
	position: relative;
	overflow: hidden;
	background-color: #33443B;
}
.jr-about-commit__deco {
	position: absolute;
	z-index: 0;
	bottom: -14%;
	left: -8%;
	width: min(40rem, 68%);
	aspect-ratio: 671 / 800;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.05;
	pointer-events: none;
}
.jr-about-commit__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-about-commit__head {
	max-width: 640px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}
.jr-about-commit__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.2vw, 1.6rem);
}
.jr-commit-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background-color: rgba(247, 244, 238, 0.05);
	border: 1px solid rgba(247, 244, 238, 0.14);
	border-radius: 14px;
	padding: clamp(1.25rem, 2.4vw, 1.8rem);
	transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.jr-commit-item:hover {
	transform: translateY(-5px);
	background-color: rgba(247, 244, 238, 0.09);
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}
.jr-commit-item__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(139, 157, 119, 0.5);
	color: #C6D6B0;   /* sauge eclairci : AA sur eucalyptus */
}
.jr-commit-item__icon svg {
	width: 24px;
	height: 24px;
}
.jr-commit-item__title {
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: #F7F4EE;
	margin: 0 0 0.35rem;
}
.jr-commit-item__text {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(247, 244, 238, 0.82);
	margin: 0;
}

/* ==========================================================================
   6. RAPPEL CONTACT : fond calcaire, H2 + bouton eucalyptus.
   ========================================================================== */
.jr-about-cta {
	background-color: #F7F4EE;
}
.jr-about-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}
.jr-about-cta__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	color: #33443B;
	margin: 0 0 1.8rem;
}
.jr-about-cta__btn {
	display: inline-block;
	background-color: #33443B;
	color: #F7F4EE;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.95rem 2.2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.jr-about-cta__btn:hover,
.jr-about-cta__btn:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(51, 68, 59, 0.28);
}

/* ==========================================================================
   ETATS D'ANIMATION (gate .jr-about-ready ; transform/opacity uniquement).
   Sans le gate (JS absent) OU en prefers-reduced-motion, aucune de ces regles
   ne s'applique -> tout est visible et immobile.
   ========================================================================== */

/* Fondu simple (surtitre de banniere). */
.jr-about-ready .jr-anim--fade {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.jr-about-ready .jr-anim--fade.is-in {
	opacity: 1;
	transform: none;
}

/* Remontee douce (intro, texte du fondateur). */
.jr-about-ready .jr-anim--rise {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.jr-about-ready .jr-anim--rise.is-in {
	opacity: 1;
	transform: none;
}

/* Masque qui se leve : un cache (couleur de la section) remonte pour devoiler.
   La couleur est reglee par section via --jr-mask (calcaire par defaut). */
.jr-about-ready .jr-anim--mask {
	position: relative;
	overflow: hidden;
	--jr-mask: #F7F4EE;
}
.jr-about-ready .jr-anim--mask::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: var(--jr-mask);
	transform-origin: top;
	transform: scaleY(1);
	transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}
.jr-about-ready .jr-anim--mask.is-in::after {
	transform: scaleY(0);
}
/* Le contenu remonte legerement derriere le cache (raffinement). */
.jr-about-ready .jr-anim--mask > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.7s ease 0.12s, transform 0.7s ease 0.12s;
}
.jr-about-ready .jr-anim--mask.is-in > * {
	opacity: 1;
	transform: none;
}
/* Couleur du cache par section (fondateur vert pale, engagements eucalyptus). */
.jr-about-ready .jr-about-founder__portrait {
	--jr-mask: #E7EAE0;
}
.jr-about-ready .jr-about-commit__head {
	--jr-mask: #33443B;
}

/* Cartes : cascade (delai --i pose en JS) + leger scale. */
.jr-about-ready .jr-anim-card {
	opacity: 0;
	transform: translateY(30px) scale(0.965);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.jr-about-ready .jr-anim-card.is-in {
	opacity: 1;
	transform: none;
}
/* Icones : apparition en sequence (delai cale sur --i) avec petit rebond. */
.jr-about-ready .jr-value-card__icon,
.jr-about-ready .jr-commit-item__icon {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jr-about-ready .jr-anim-card.is-in .jr-value-card__icon,
.jr-about-ready .jr-anim-card.is-in .jr-commit-item__icon {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 100ms + 180ms);
}

/* H1 de banniere : mots qui montent en decale (split en JS). */
.jr-about-ready .jr-word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;   /* evite le rognage des jambages */
}
.jr-about-ready .jr-word {
	display: inline-block;
	transform: translateY(115%);
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.jr-about-ready [data-jr-split].is-in .jr-word {
	transform: none;
}

/* ==========================================================================
   RESPONSIVE PAGE A PROPOS
   ========================================================================== */
@media (max-width: 900px) {
	.jr-about-founder__inner {
		grid-template-columns: minmax(0, 1fr);
	}
	.jr-about-founder__portrait {
		max-width: 360px;
		width: 100%;
		margin: 0 auto;
	}
	.jr-about-values__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
		margin: 0 auto;
	}
	/* Variante avec photo : une seule colonne. L'ordre du DOM place les valeurs
	   avant la photo, ce qui est le bon ordre une fois tout empile : la section
	   s'appelle « Nos valeurs », son sujet passe avant son illustration. */
	.jr-about-values--photo .jr-about-values__content {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.5rem);
		max-width: 420px;
		margin: 0 auto;
	}
	.jr-about-values--photo .jr-value-card__icon {
		width: 52px;
		height: 52px;
	}
	.jr-about-values--photo .jr-value-card__icon svg {
		width: 26px;
		height: 26px;
	}
}
@media (max-width: 640px) {
	.jr-about-commit__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Mouvement reduit : filet de securite (le gate n'est deja pas pose, mais on
   neutralise aussi les transitions de survol -> STRICTEMENT aucun mouvement). */
@media (prefers-reduced-motion: reduce) {
	.jr-about *,
	.jr-about *::after {
		transition: none !important;
		animation: none !important;
	}
	.jr-value-card:hover,
	.jr-commit-item:hover,
	.jr-about-cta__btn:hover {
		transform: none !important;
	}
}


/* ==========================================================================
   PAGE "PROPRIETAIRES" (/proprietaires/) : template-jr-proprietaires.php
   --------------------------------------------------------------------------
   Meme systeme que /a-propos/ : bannière image + voile, sections full-bleed,
   animations partagees (.jr-anim*, gate .jr-about-ready), modale partagee
   (.jr-modal). Palette JR stricte. --jr-mask regle la couleur du cache de
   reveal par section (voir plus bas).
   ========================================================================== */

.content-area.jr-proprio-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}
.jr-proprio-page .jr-proprio {
	margin: 0;
}

/* Full-bleed commun a toutes les sections. */
.jr-proprio-hero,
.jr-proprio-why,
.jr-proprio-manage,
.jr-proprio-formulas,
.jr-proprio-estim-section,
.jr-proprio-zone {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* Conteneur centre reutilisable (inner). */
.jr-proprio-why__inner,
.jr-proprio-manage__inner,
.jr-proprio-formulas__inner,
.jr-proprio-zone__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}

/* En-tetes de section centres. */
.jr-proprio-why__head,
.jr-proprio-manage__head,
.jr-proprio-formulas__head,
.jr-proprio-zone__head {
	max-width: 660px;
	margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

/* Emblème filigrane parallax (sections colorees). */
.jr-proprio-manage__deco,
.jr-proprio-formulas__deco,
.jr-proprio-estim-section__deco {
	position: absolute;
	z-index: 0;
	width: min(40rem, 70%);
	aspect-ratio: 671 / 800;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	pointer-events: none;
}
.jr-proprio-manage__deco { top: -12%; right: -6%; opacity: 0.06; }
.jr-proprio-formulas__deco { bottom: -12%; left: -8%; opacity: 0.06; }
.jr-proprio-estim-section__deco { top: -14%; right: -6%; opacity: 0.05; }

/* ==========================================================================
   1. BANNIERE
   ========================================================================== */
.jr-proprio-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 34rem);
	background-color: #33443B;
}
.jr-proprio-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	z-index: 0;
	/* Echelle d'images : voir la note detaillee sur .jr-contact-hero. Regle de
	   base = desktop 1x, les deux media queries suivantes couvrent mobile et 2x. */
	background-image: url('../img/hero-proprietaires-1920.jpg?ver=1786023437');
	background-image: image-set(
		url('../img/hero-proprietaires-1920.webp?ver=1786023437') type('image/webp'),
		url('../img/hero-proprietaires-1920.jpg?ver=1786023437') type('image/jpeg')
	);
	background-size: cover;
	/* Cadrage vertical remonte : le visage du proprietaire (haut de la photo)
	   reste entier, pas coupe par le haut de la banniere. */
	background-position: center 22%;
	background-repeat: no-repeat;
}
@media (max-width: 767px) {
	.jr-proprio-hero__bg {
		background-image: url('../img/hero-proprietaires-1200.jpg?ver=1786023435');
		background-image: image-set(
			url('../img/hero-proprietaires-1200.webp?ver=1786023435') type('image/webp'),
			url('../img/hero-proprietaires-1200.jpg?ver=1786023435') type('image/jpeg')
		);
	}
}
@media (min-width: 768px) and (min-resolution: 1.5dppx),
       (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1.5) {
	.jr-proprio-hero__bg {
		background-image: url('../img/hero-proprietaires-3200.jpg?ver=1786023441');
		background-image: image-set(
			url('../img/hero-proprietaires-3200.webp?ver=1786023440') type('image/webp'),
			url('../img/hero-proprietaires-3200.jpg?ver=1786023441') type('image/jpeg')
		);
	}
}
.jr-proprio-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.66) 0%, rgba(51, 68, 59, 0) 62%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.68) 0%, rgba(51, 68, 59, 0.28) 55%, rgba(51, 68, 59, 0.44) 100%);
}
.jr-proprio-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem);
	box-sizing: border-box;
}
.jr-proprio-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C6D6B0;
}
.jr-proprio-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #C6D6B0;
}
.jr-proprio-hero__title {
	margin: 0;
	max-width: 16ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* ==========================================================================
   2. POURQUOI : fond calcaire, 4 cartes blanches (icone sauge).
   ========================================================================== */
.jr-proprio-why {
	background-color: #F7F4EE;
}
.jr-proprio-why__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.jr-benefit-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	background-color: #FFFFFF;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	padding: clamp(1.5rem, 2.6vw, 2rem);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.jr-benefit-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(46, 46, 42, 0.12);
}
.jr-benefit-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background-color: #E7EAE0;
	color: #8B9D77;
	margin-bottom: 1.1rem;
}
.jr-benefit-card__icon svg { width: 26px; height: 26px; }
.jr-benefit-card__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.2rem;
	color: #33443B;
	margin: 0 0 0.6rem;
	line-height: 1.25;
}
.jr-benefit-card__text {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.6;
	color: #5F5D56;
	margin: 0;
}

/* ==========================================================================
   3. PRESTATIONS : fond vert pale, 4 services en ligne (icone ronde blanche).
   ========================================================================== */
.jr-proprio-manage {
	position: relative;
	overflow: hidden;
	background-color: #E7EAE0;
}
.jr-proprio-manage__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.1rem, 2.2vw, 1.75rem);
}
.jr-service-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform 0.35s ease;
}
.jr-service-card:hover { transform: translateY(-5px); }
.jr-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background-color: #FFFFFF;
	color: #33443B;
	box-shadow: 0 8px 22px rgba(46, 46, 42, 0.08);
	margin-bottom: 1.1rem;
}
.jr-service-card__icon svg { width: 30px; height: 30px; }
.jr-service-card__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.2rem;
	color: #33443B;
	margin: 0 0 0.5rem;
}
.jr-service-card__text {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.55;
	color: #5F5D56;
	margin: 0;
}

/* ==========================================================================
   4. NOS FORMULES : fond vert pale, 3 cartes hauteurs egales.
   ========================================================================== */
.jr-proprio-formulas {
	position: relative;
	overflow: hidden;
	/* Calcaire : conserve l'alternance de couleurs des sections apres la
	   suppression de "Comment ca marche" (les cartes blanches gardent leur
	   contraste via leur ombre). */
	background-color: #F7F4EE;
}
.jr-proprio-formulas__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
	align-items: stretch;
}
.jr-formula-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border: 1px solid rgba(51, 68, 59, 0.10);
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	/* Cadre resserre : l'enveloppe blanche etait trop epaisse autour du contenu.
	   On reduit le padding sans toucher a la taille des textes / listes / bouton. */
	padding: clamp(1.35rem, 2.1vw, 1.8rem);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.jr-formula-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(46, 46, 42, 0.14);
}
/* Carte mise en avant : bordure eucalyptus 2px + badge. */
.jr-formula-card--featured {
	border: 2px solid #C08863;   /* terracotta : coherent avec le badge */
}
.jr-formula-card__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Terracotta (accent ponctuel, meme teinte que les marqueurs de la carte).
	   Texte encre : le calcaire clair sur ce terracotta ne passe pas l'AA (2.76) ;
	   l'encre #2E2E2A atteint 4.51 (AA), en restant dans la palette JR. */
	background-color: #C08863;
	color: #2E2E2A;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	white-space: nowrap;
}
.jr-formula-card__name {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.4rem;
	color: #33443B;
	margin: 0 0 0.9rem;
}
.jr-formula-card__price {
	display: flex;
	/* Empile le montant et sa mention sur les TROIS cartes. Avec « environ 20 % »
	   le montant devient assez large pour renvoyer « de commission » a la ligne
	   sur les cartes 1 et 2 seulement : les blocs prix mesuraient alors 80px
	   contre 53px pour la carte 3, et les listes de puces ne demarraient plus a
	   la meme hauteur. En empilant partout, les trois cartes restent alignees. */
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	margin: 0 0 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid rgba(51, 68, 59, 0.12);
}
.jr-formula-card__amount {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1;
	color: #33443B;
}
.jr-formula-card__suffix {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	color: #5F5D56;
}
.jr-formula-card__list {
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.jr-formula-card__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: #2E2E2A;
}
.jr-proprio-check {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: #8B9D77;   /* coches sauge */
}
.jr-formula-card__btn {
	margin-top: auto;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 1.4rem;
	border-radius: 10px;
	border: 1px solid #33443B;
	background-color: #33443B;
	color: #F7F4EE;
	cursor: pointer;
	transition: filter 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.jr-formula-card__btn:hover,
.jr-formula-card__btn:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-2px);
}
/* Bouton contour (Voir le detail). */
.jr-formula-card__btn--ghost {
	background-color: transparent;
	color: #33443B;
}
.jr-formula-card__btn--ghost:hover,
.jr-formula-card__btn--ghost:focus-visible {
	filter: none;
	background-color: #33443B;
	color: #F7F4EE;
}
.jr-proprio-formulas__note {
	max-width: 620px;
	margin: clamp(2rem, 4vw, 2.75rem) auto 0;
	text-align: center;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13.5px;
	line-height: 1.6;
	color: #5F5D56;
}

/* SEO-026 : rappel vers la FAQ sous les formules. Meme typo que la note qui le
   precede, mais colle a elle (la note garde son grand retrait superieur). */
.jr-proprio-formulas__faq {
	margin-top: 0.6rem;
}
.jr-proprio-formulas__faq a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.jr-proprio-formulas__faq a:hover,
.jr-proprio-formulas__faq a:focus-visible {
	color: #33443B;
}

/* ==========================================================================
   6. ESTIMATION : fond eucalyptus, slot futur simulateur (.jr-proprio-estim).
   ========================================================================== */
/* La rubrique editoriale reutilise ce bloc a l'identique (.jr-blog-cta*, voir
   jrp_blog_cta_html) : il est present en dur sur la landing, chaque archive et
   chaque article. Les valeurs restent ecrites ICI et nulle part ailleurs, donc
   les trois emplacements ne peuvent pas diverger. */
.jr-proprio-estim-section,
.jr-blog-cta-section {
	position: relative;
	overflow: hidden;
	background-color: #33443B;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-proprio-estim,
.jr-blog-cta {
	position: relative;
	z-index: 1;
	/* 780px : le titre "Combien peut rapporter votre bien ?" tient sur UNE ligne
	   sur desktop (il lui faut ~745px). Le sous-titre garde sa propre largeur max
	   et reste centre. */
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}
/* Titre estimation : equilibrage des lignes si retour a la ligne (mobile) ;
   l'espace insecable avant le "?" (cote contenu) evite tout "?" orphelin. */
.jr-proprio-estim .jr-h2,
.jr-blog-cta .jr-h2 {
	text-wrap: balance;
}
.jr-proprio-estim__subtitle,
.jr-blog-cta__subtitle {
	max-width: 46ch;
	margin: 1rem auto 1.9rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.65;
	color: rgba(247, 244, 238, 0.85);
}
.jr-proprio-estim__btn,
.jr-blog-cta__btn {
	display: inline-block;
	background-color: #8B9D77;
	color: #23301F;                 /* eucalyptus fonce : AA sur sauge */
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.95rem 2.2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.jr-proprio-estim__btn:hover,
.jr-proprio-estim__btn:focus-visible,
.jr-blog-cta__btn:hover,
.jr-blog-cta__btn:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* ==========================================================================
   7. ZONE D'INTERVENTION : fond calcaire, 2 colonnes (carte / communes).
   ========================================================================== */
.jr-proprio-zone {
	background-color: #F7F4EE;
}
.jr-proprio-zone__cols {
	display: grid;
	grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.jr-proprio-zone__map {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background-color: #33443B;
	box-shadow: 0 18px 44px rgba(46, 46, 42, 0.14);
}
.jr-proprio-zone__map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jr-proprio-zone__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #33443B;
}
.jr-proprio-zone__ph img { width: 42%; height: auto; opacity: 0.9; }
.jr-proprio-zone__place {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	color: #33443B;
	margin: 0 0 1.25rem;
}
.jr-proprio-zone__communes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}
/* L8 (SEO-026) : rappel vers les biens en gestion, sous la liste des communes.
   Meme corps de texte que le reste de la page ; seul le retrait superieur est
   necessaire, la liste de pastilles ayant margin: 0. */
.jr-proprio-zone__proof {
	margin: 1.4rem 0 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #5F5D56;
}
.jr-proprio-zone__proof a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.jr-proprio-zone__proof a:hover,
.jr-proprio-zone__proof a:focus-visible {
	color: #33443B;
}

.jr-proprio-zone__communes li {
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	color: #33443B;
	background-color: #FFFFFF;
	border: 1px solid #8B9D77;
	border-radius: 999px;
	padding: 0.45rem 1rem;
}
/* Mention d'ouverture « et bien plus » : ce n'est pas une commune, donc pas de
   marqueur sur la carte. Seule la COULEUR la distingue ; forme, taille, corps de
   texte et rythme restent ceux des quinze autres pastilles, bordure comprise
   (elle passe en sauge pour se fondre dans l'aplat, sans changer la geometrie).
   Fond sauge plein plutot que terracotta : le terracotta est l'accent rare de la
   charte (badge Premium, barres de surtitre) et surtout la couleur des marqueurs
   de la carte affichee juste a cote. L'employer ici ferait lire cette pastille
   comme un lieu, exactement l'inverse de ce qu'elle dit.
   Texte en encre #2E2E2A et non en eucalyptus : sur le sauge l'eucalyptus tombe
   a 3,54:1, sous le seuil AA. L'encre donne 4,67:1, conforme AA a 14px. */
.jr-proprio-zone__communes li.jr-proprio-zone__more {
	background-color: #8B9D77;
	border-color: #8B9D77;
	color: #2E2E2A;
}

/* ==========================================================================
   COULEURS DES CACHES DE REVEAL (--jr-mask) PAR SECTION.
   Gate .jr-about-ready (meme moteur d'animation) + specificite >= a la regle
   generique -> ces surcharges gagnent.
   ========================================================================== */
.jr-about-ready .jr-proprio-manage__head { --jr-mask: #E7EAE0; }
/* formules : fond calcaire -> cache de reveal calcaire (valeur par defaut). */
.jr-about-ready .jr-proprio-estim { --jr-mask: #33443B; }

/* Icones des cartes benefices / services : petit rebond en sequence. */
.jr-about-ready .jr-benefit-card__icon,
.jr-about-ready .jr-service-card__icon {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jr-about-ready .jr-anim-card.is-in .jr-benefit-card__icon,
.jr-about-ready .jr-anim-card.is-in .jr-service-card__icon {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 100ms + 180ms);
}

/* ==========================================================================
   RESPONSIVE PAGE PROPRIETAIRES
   ========================================================================== */
@media (max-width: 980px) {
	.jr-proprio-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jr-proprio-manage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.jr-proprio-formulas__grid { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
	.jr-proprio-zone__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
	.jr-proprio-why__grid { grid-template-columns: minmax(0, 1fr); }
	.jr-proprio-manage__grid { grid-template-columns: minmax(0, 1fr); max-width: 360px; margin-inline: auto; }
}

/* ==========================================================================
   MODALE REUTILISABLE (.jr-modal) : composant partage du site.
   Ferme = [hidden] (display:none). A l'ouverture, le JS retire [hidden], puis
   ajoute .is-open -> fondu overlay + panneau qui monte.
   ========================================================================== */
.jr-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2rem);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.jr-modal[hidden] {
	display: none;
}
.jr-modal.is-open {
	opacity: 1;
}
.jr-modal__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(46, 46, 42, 0.55);
	cursor: pointer;
}
.jr-modal__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 88vh;
	background-color: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(46, 46, 42, 0.35);
	transform: translateY(24px);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.jr-modal--wide .jr-modal__panel {
	max-width: 780px;
}
.jr-modal.is-open .jr-modal__panel {
	transform: none;
}
.jr-modal__head {
	position: relative;
	background-color: #33443B;
	color: #F7F4EE;
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3.5vw, 2.4rem);
}
.jr-modal__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	margin: 0;
	color: #F7F4EE;
}
.jr-modal__subtitle {
	margin: 0.5rem 0 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: rgba(247, 244, 238, 0.82);
	max-width: 46ch;
}
.jr-modal__close {
	position: absolute;
	top: clamp(0.85rem, 2vw, 1.15rem);
	right: clamp(0.85rem, 2vw, 1.15rem);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	/* Pastille CALCAIRE + croix eucalyptus : bien contrastee sur l'en-tete
	   eucalyptus de la modale formules ET sur la photo de la fiche logement.
	   Ombre douce pour la detacher sur les fonds clairs. */
	background-color: #F7F4EE;
	color: #33443B;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(46, 46, 42, 0.35);
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.jr-modal__close:hover,
.jr-modal__close:focus-visible {
	background-color: #C08863;   /* terracotta au survol */
	color: #F7F4EE;
	transform: scale(1.06);
}
.jr-modal__close svg {
	width: 22px;
	height: 22px;
	stroke-width: 2.4;           /* croix franche, lisible */
}
.jr-modal__body {
	overflow-y: auto;
	padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3.5vw, 2.4rem);
}
.jr-modal__tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Le rayon vit ICI et non sur les cellules d'en-tete. Dans un tableau en
	   border-collapse: collapse, border-radius sur un <th> n'est pas honore par
	   tous les moteurs (Safari le laisse tomber) : l'aplat terracotta de la
	   colonne Premium se peignait alors en angle droit et depassait du coin
	   arrondi. Un conteneur qui clippe donne le meme rendu partout.
	   Le clipping vient de overflow-x, qui n'est jamais « visible » ici : auto
	   au-dessus de 768px (le tableau a un min-width et peut defiler), hidden en
	   dessous (table-layout fixe, il tient toujours dans la largeur). */
	border-radius: 10px;
}
.jr-modal__foot {
	border-top: 1px solid rgba(51, 68, 59, 0.12);
	padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.25rem, 3.5vw, 2.4rem);
}
.jr-modal__foot p {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5F5D56;
	text-align: center;
}
/* Verrou du scroll de la page quand une modale est ouverte. */
body.jr-modal-open {
	overflow: hidden;
}

/* --- Tableau comparatif --- */
.jr-cmp-table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	font-family: "Instrument Sans", sans-serif;
}
.jr-cmp-table th,
.jr-cmp-table td {
	padding: 0.7rem 0.9rem;
	text-align: left;
	font-size: 14px;
	vertical-align: middle;
}
.jr-cmp-table thead th {
	background-color: #E7EAE0;
	color: #33443B;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
}
.jr-cmp-table thead th:last-child {
	/* Colonne "Gestion Premium" mise en avant (coherence carte Premium terracotta).
	   Texte encre : contraste AA sur le terracotta (~4.5). Le coin arrondi est
	   gere par le clipping de .jr-modal__tablewrap, pas ici. */
	background-color: #C08863;
	color: #2E2E2A;
}
/* Libelle court des en-tetes : masque par defaut, il ne sert que sous 768px. */
.jr-cmp-th-short {
	display: none;
}
/* Coches de la colonne Premium (derniere) en terracotta ; la colonne Complete
   garde le sauge #8B9D77 par defaut. */
.jr-cmp-table tbody td:last-child .jr-cmp-yes {
	color: #C08863;
}
.jr-cmp-table thead th:not(:first-child),
.jr-cmp-table tbody td {
	text-align: center;
	width: 22%;
}
.jr-cmp-table tbody th {
	font-weight: 500;
	color: #2E2E2A;
}
.jr-cmp-table tbody tr:nth-child(even) {
	background-color: rgba(231, 234, 224, 0.4);
}
.jr-cmp-yes {
	display: inline-flex;
	color: #8B9D77;
}
.jr-cmp-yes svg { width: 20px; height: 20px; }
.jr-cmp-no {
	color: #A7A59D;
	font-size: 16px;
}

/* Reveal du panneau de modale : etats sous le gate d'animation. */
@media (prefers-reduced-motion: reduce) {
	.jr-proprio *,
	.jr-proprio *::after,
	.jr-modal,
	.jr-modal__panel {
		transition: none !important;
		animation: none !important;
	}
	.jr-benefit-card:hover,
	.jr-service-card:hover,
	.jr-formula-card:hover,
	.jr-proprio-estim__btn:hover,
	.jr-modal__panel {
		transform: none !important;
	}
}


/* ==========================================================================
   PAGE "NOS LOGEMENTS" (/nos-logements/) : template-jr-nos-logements.php
   --------------------------------------------------------------------------
   Bannière + intro + grille de biens ; fiche detaillee dans la modale partagee
   (.jr-modal). Palette JR stricte. Animations partagees (.jr-anim*, gate
   .jr-about-ready). Placeholders eucalyptus + emblème quand pas d'image reelle.
   ========================================================================== */

.content-area.jr-logements-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}
.jr-logements-page .jr-logements {
	margin: 0;
}
.jr-logements-hero,
.jr-logements-intro,
.jr-logements-main {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* --- Placeholder eucalyptus + emblème (cartes, fiche, miniatures) ----------- */
.jr-logement-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #33443B;
}
.jr-logement-ph img {
	width: 40%;
	max-width: 130px;
	height: auto;
	opacity: 0.85;
}

/* ==========================================================================
   1. BANNIERE
   ========================================================================== */
.jr-logements-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 34rem);
	background-color: #33443B;
}
.jr-logements-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	z-index: 0;
	background-image: url('../img/hero-logements.jpg?ver=1785684874');
	background-image: image-set(
		url('../img/hero-logements.webp?ver=1785684874') type('image/webp'),
		url('../img/hero-logements.jpg?ver=1785684874') type('image/jpeg')
	);
	background-size: cover;
	/* Cadrage descendu (point de focus initialement trop haut) : on montre une
	   portion plus basse de la photo. */
	background-position: center 72%;
	background-repeat: no-repeat;
}
.jr-logements-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.66) 0%, rgba(51, 68, 59, 0) 62%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.68) 0%, rgba(51, 68, 59, 0.28) 55%, rgba(51, 68, 59, 0.44) 100%);
}
.jr-logements-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem);
	box-sizing: border-box;
}
.jr-logements-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C6D6B0;
}
.jr-logements-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #C6D6B0;
}
.jr-logements-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* ==========================================================================
   2. INTRODUCTION (fond calcaire, centre)
   ========================================================================== */
.jr-logements-intro {
	background-color: #F7F4EE;
}
.jr-logements-intro__inner {
	max-width: min(80%, 760px);
	margin: 0 auto;
	padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 2rem) clamp(2.25rem, 4vw, 3rem);
	text-align: center;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.12rem);
	line-height: 1.8;
	color: #5F5D56;
}
.jr-logements-intro__inner p {
	margin: 0 0 1.1rem;
}
.jr-logements-intro__inner p:last-child {
	margin-bottom: 0;
}
/* Le lien de l'intro ne doit JAMAIS se couper en deux : coupe au milieu, il
   perdait sa lisibilite et son souligne partait en deux morceaux.
   inline-block en fait une boite insecable : quand la place manque apres la
   question, il bascule ENTIER a la ligne suivante au lieu de se scinder.
   Pas de media query : en desktop la question et le lien tiennent ensemble sur
   une ligne (696px de conteneur pour 440px de texte) et rien n'est force ; en
   mobile (272px pour 210 + 230) le lien passe seul dessous, ce qui est
   exactement le rendu voulu.
   max-width protege du debordement horizontal sur les ecrans tres etroits. */
.jr-logements-intro__inner a {
	display: inline-block;
	max-width: 100%;
	color: #33443B;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid #8B9D77;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.jr-logements-intro__inner a:hover,
.jr-logements-intro__inner a:focus-visible {
	color: #8B9D77;
}

/* ==========================================================================
   3. GRILLE DE BIENS (fond calcaire)
   ========================================================================== */
/* ==========================================================================
   3. LISTE + CARTE (layout "plateforme immo" facon Airbnb).
   Colonne gauche : liste verticale des biens (defile). Colonne droite : carte
   Leaflet sticky (reste visible au scroll). Mobile : empile (carte en haut,
   non sticky ; liste dessous) - voir media queries plus bas.
   ========================================================================== */
.jr-logements-main {
	background-color: #F7F4EE;
	padding-bottom: clamp(4rem, 8vw, 6.5rem);
}
.jr-logements-split {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2rem);
	display: grid;
	grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
	gap: clamp(1.5rem, 3vw, 2.75rem);
	align-items: start;
}
.jr-logements-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 1.8vw, 1.5rem);
	align-content: start;
}

/* Toutes les tuiles remplissent leur cellule, « a venir » comprise. La grille
   aligne deja les hauteurs par ligne, mais la carte ne s'y etirait pas : la
   tuile teaser, plus courte (pas de caracteristiques ni de lien), pendait au
   milieu de sa case. Avec height:100% son corps, qui est en flex:1 et centre,
   occupe la hauteur restante et la tuile prend le meme gabarit que ses voisines. */
.jr-logements-list .jr-logement-card {
	height: 100%;
}

/* Colonne carte : sticky sous l'en-tete (top ~120px). */
.jr-logements-mapcol {
	position: relative;
}
.jr-logements-mapcol__sticky {
	position: sticky;
	top: 120px;
}
.jr-logements-mapcol__map {
	width: 100%;
	height: calc(100vh - 160px);
	max-height: 760px;
	min-height: 460px;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 14px 40px rgba(46, 46, 42, 0.12);
	background-color: #33443B;   /* repli eucalyptus pendant le chargement des tuiles */
}

/* --- Carte de bien --- */
.jr-logement-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.06);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.jr-logement-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(46, 46, 42, 0.14);
}
.jr-logement-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: #33443B;
}
.jr-logement-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

/* --- Ancrage vertical du recadrage ----------------------------------------
   Les masters ne sont plus pre-recadres en 16/9 : ils gardent leur format
   d'origine, indispensable pour que la visionneuse affiche la photo entiere.
   Le recadrage des cartes et des fiches redevient donc l'affaire du CSS.
   38% reproduit l'ancrage qui etait applique a la generation : legerement
   au-dessus du milieu, la ou se trouve le sujet des photos d'interieur prises
   debout. Un recadrage centre tomberait sur le sol ou le plafond.
   Surchargeable photo par photo via la cle 'focus' du bien, qui pose un
   object-position en style inline (voir jrp_logement_picture). */
.jr-logement-card__media img,
.jr-fiche__photo img,
.jr-prop__media img {
	object-position: 50% 38%;
}
.jr-logement-card:hover .jr-logement-card__media img {
	transform: scale(1.04);
}
.jr-logement-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.1rem, 2vw, 1.4rem);
}
.jr-logement-card__place {
	margin: 0 0 0.35rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-logement-card__name {
	margin: 0 0 0.9rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #33443B;
}
.jr-logement-card__specs {
	list-style: none;
	margin: 0 0 1.1rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
}
.jr-spec {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 13px;
	color: #5F5D56;
}
.jr-spec__icon {
	width: 17px;
	height: 17px;
	color: #8B9D77;
	flex-shrink: 0;
}
.jr-spec__val {
	font-weight: 600;
	color: #2E2E2A;
}
/* Lien "En savoir plus" : filet en haut, pleine largeur, aire cliquable etendue. */
.jr-logement-card__link {
	margin-top: auto;
	width: 100%;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(51, 68, 59, 0.12);
	background: none;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	color: #33443B;
	text-align: left;
	cursor: pointer;
}
.jr-logement-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.jr-logement-card__arrow {
	transition: transform 0.3s ease;
}
.jr-logement-card:hover .jr-logement-card__arrow {
	transform: translateX(4px);
}
.jr-logement-card__link:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: 3px;
}

/* --- Carte "a venir" : MEME gabarit que les autres (media 16/10 en haut + body
   en bas). Seule l'image differe : floutee + voile eucalyptus + overlay horloge.
   Non cliquable. --- */
.jr-logement-card__media--blur {
	position: relative;   /* garde l'aspect 16/10 du gabarit ; contexte de l'overlay */
}
.jr-logement-card__media--blur img,
.jr-logement-card__media--blur .jr-logement-ph {
	filter: blur(7px);
	transform: scale(1.12);
}
.jr-logement-soon {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1rem;
	text-align: center;
	background-color: rgba(51, 68, 59, 0.42);   /* voile eucalyptus (laisse voir l'image floutee) */
	color: #F7F4EE;
}
.jr-logement-soon__clock {
	width: 38px;
	height: 38px;
	color: #F7F4EE;
	margin-bottom: 0.15rem;
	filter: drop-shadow(0 1px 4px rgba(46, 46, 42, 0.5));
}
.jr-logement-soon__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.5rem;
	color: #F7F4EE;
	text-shadow: 0 1px 6px rgba(46, 46, 42, 0.5);
}
/* Bloc infos de la carte "a venir" : texte centre, meme place que le corps des
   autres cartes (le body s'etire a la hauteur de la rangee via la grille). */
.jr-logement-soon__body {
	justify-content: center;
	align-items: center;
	text-align: center;
}
.jr-logement-soon__text {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	color: #5F5D56;
}

/* --- Cartes en contexte LISTE (grille 2 colonnes) : tailles harmonieuses. --- */
.jr-logements-list .jr-logement-card__name {
	font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}
.jr-logements-list .jr-logement-card__specs {
	gap: 0.4rem 1rem;
}

/* Etat "mis en avant" quand le marqueur correspondant est vise (survol liste ou
   clic marqueur) : liseret sauge + legere elevation. */
.jr-logement-card.is-active,
.jr-logement-card.is-hover {
	box-shadow: 0 0 0 2px #8B9D77, 0 20px 44px rgba(46, 46, 42, 0.16);
}

/* Carte visee par un lien profond venu de l'accueil (#bien-<slug>). Elle doit
   se reconnaitre au premier coup d'oeil sans introduire de couleur etrangere :
   on reprend donc le liseret sauge ci-dessus, en lui ajoutant un HALO sauge
   plus large, qui est ce qui accroche l'oeil de loin.
   Deux battements suffisent a attirer le regard ; au-dela ce serait une
   sollicitation. La classe est retiree par le JS apres quatre secondes ou au
   premier defilement du visiteur, et la transition de .jr-logement-card assure
   alors l'estompage. */
.jr-logement-card.is-cible {
	box-shadow:
		0 0 0 2px #8B9D77,
		0 0 0 10px rgba(139, 157, 119, 0.20),
		0 20px 44px rgba(46, 46, 42, 0.16);
	animation: jr-cible-battement 1.8s ease-out 1;
}
@keyframes jr-cible-battement {
	0%, 100% {
		box-shadow:
			0 0 0 2px #8B9D77,
			0 0 0 10px rgba(139, 157, 119, 0.20),
			0 20px 44px rgba(46, 46, 42, 0.16);
	}
	25%, 75% {
		box-shadow:
			0 0 0 2px #8B9D77,
			0 0 0 18px rgba(139, 157, 119, 0.30),
			0 20px 44px rgba(46, 46, 42, 0.16);
	}
}
/* Mouvement reduit : le halo reste, les battements disparaissent. La carte est
   toujours identifiable, sans aucune animation. */
@media (prefers-reduced-motion: reduce) {
	.jr-logement-card.is-cible {
		animation: none;
	}
}

/* ==========================================================================
   /nos-logements/ : CARTE LEAFLET (colonne droite sticky). Marqueurs terracotta,
   controles / attribution / popups charte. Chargee uniquement sur cette page.
   ========================================================================== */
.jr-logements-mapcol .leaflet-container {
	font-family: "Instrument Sans", sans-serif;
	background-color: #33443B;
}

/* Marqueur : pastille terracotta a liseré calcaire (aucune image bleue). */
.jr-logement-pin {
	border-radius: 50%;
	background-color: #C08863;   /* terracotta */
	border: 2px solid #F7F4EE;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba(46, 46, 42, 0.4);
	transition: transform 0.2s ease, filter 0.2s ease;
}
.jr-logement-pin:hover {
	filter: brightness(1.08);
	transform: scale(1.18);
}
/* Marqueur mis en avant (survol/focus d'une carte de la liste). */
.jr-logement-pin.is-active {
	filter: brightness(1.1);
	transform: scale(1.4);
	box-shadow: 0 4px 12px rgba(46, 46, 42, 0.5);
}

/* Controles de zoom : discrets, charte. */
.jr-logements-mapcol .leaflet-bar {
	border: none;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(46, 46, 42, 0.2);
}
.jr-logements-mapcol .leaflet-control-zoom a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	color: #33443B;
	background-color: #F7F4EE;
	border: none;
}
.jr-logements-mapcol .leaflet-control-zoom a:hover {
	background-color: #E7EAE0;
	color: #33443B;
}
/* Attribution OpenStreetMap : obligatoire, discrete mais visible. */
.jr-logements-mapcol .leaflet-control-attribution {
	background-color: rgba(247, 244, 238, 0.85);
	color: #5F5D56;
	font-size: 10px;
}
.jr-logements-mapcol .leaflet-control-attribution a {
	color: #33443B;
}
/* Popups : arrondis, typo et couleur charte. */
.jr-logements-mapcol .leaflet-popup-content-wrap {
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(46, 46, 42, 0.18);
}
.jr-logements-mapcol .leaflet-popup-content {
	margin: 8px 14px;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #33443B;
}

/* Bulle multi-biens : plusieurs logements partagent une adresse (deux
   appartements d'un meme domaine). Le marqueur est unique, la bulle liste les
   biens et chaque ligne mene a sa fiche. */
.jr-map-pop__title {
	margin: 0 0 0.4rem;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5F5D56;
}
.jr-map-pop__item {
	display: block;
	width: 100%;
	padding: 0.3rem 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	text-align: left;
	font: inherit;
	color: #33443B;
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.2s ease;
}
.jr-map-pop__item + .jr-map-pop__item {
	border-top: 1px solid rgba(51, 68, 59, 0.12);
}
.jr-map-pop__item:hover,
.jr-map-pop__item:focus-visible {
	color: #8B9D77;
}
@media (prefers-reduced-motion: reduce) {
	.jr-map-pop__item {
		transition: none;
	}
}

/* ==========================================================================
   FICHE DETAILLEE (modale .jr-modal--logement / .jr-fiche)
   ========================================================================== */
.jr-modal--logement .jr-modal__panel {
	max-width: 860px;
}
.jr-fiche {
	padding: 0;
}
/* La croix de la fiche herite du style unifie .jr-modal__close (fond eucalyptus
   plein + survol terracotta) : bien visible sur la photo. On garde juste son
   ancrage. */
.jr-fiche__close {
	position: absolute;
	top: clamp(0.85rem, 2vw, 1.1rem);
	right: clamp(0.85rem, 2vw, 1.1rem);
	z-index: 6;
}
.jr-fiche__scroll {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.jr-fiche__photo {
	aspect-ratio: 16 / 9;
	background-color: #33443B;
	overflow: hidden;
}
.jr-fiche__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.jr-fiche__thumbs {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem clamp(1.25rem, 3vw, 2rem) 0;
	overflow-x: auto;
}
/* ==========================================================================
   VISIONNEUSE PLEIN ECRAN (.jr-modal--viewer / .jr-lightbox)
   --------------------------------------------------------------------------
   Ouverte PAR-DESSUS la fiche, via le meme composant modale (pile). La photo y
   est affichee ENTIERE (object-fit: contain) : c'est tout l'objet, la fiche la
   montre recadree en 16/9 et une photo verticale y perdait le haut et le bas.
   Fond eucalyptus tres sombre pour que rien ne concurrence l'image.
   ========================================================================== */
.jr-modal--viewer {
	padding: 0;
	z-index: 100010;   /* au-dessus de la fiche, qui est a 100000 */
}
.jr-modal--viewer .jr-modal__overlay {
	background-color: rgba(35, 48, 31, 0.97);   /* eucalyptus sombre #23301F */
	cursor: default;
}
.jr-lightbox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;   /* le clic passe a l'overlay : clic hors image = fermer */
}
.jr-lightbox > * {
	pointer-events: auto;   /* sauf sur les commandes et l'image */
}
.jr-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(3.5rem, 8vw, 5rem) clamp(0.75rem, 4vw, 4.5rem);
	box-sizing: border-box;
	pointer-events: none;
}
.jr-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;   /* photo entiere, jamais rognee */
	pointer-events: auto;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.jr-lightbox__img.is-loaded {
	opacity: 1;
}

/* Commandes : croix, fleches, compteur. Toutes en calcaire sur fond sombre. */
.jr-lightbox__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.25rem);
	right: clamp(0.75rem, 2vw, 1.25rem);
	z-index: 2;
}
.jr-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(247, 244, 238, 0.12);
	color: #F7F4EE;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease;
}
.jr-lightbox__nav:hover,
.jr-lightbox__nav:focus-visible {
	background-color: rgba(247, 244, 238, 0.26);
}
.jr-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.jr-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.jr-lightbox__nav--next svg { transform: rotate(180deg); }
.jr-lightbox__nav[hidden] { display: none; }

.jr-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 3vw, 1.75rem);
	transform: translateX(-50%);
	margin: 0;
	z-index: 2;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #F7F4EE;
	background-color: rgba(35, 48, 31, 0.55);
	padding: 0.35rem 0.85rem;
	border-radius: 999px;
}

/* Bouton d'agrandissement pose sur la grande photo de la fiche : il ne doit rien
   changer a son apparence, seulement la rendre cliquable. */
.jr-fiche__zoom {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
	.jr-lightbox__img {
		opacity: 1;
		transition: none;
	}
	.jr-lightbox__nav {
		transition: none;
	}
}

/* Vignette : vrai <button> depuis que la galerie est cliquable (jr-lightbox.js).
   On neutralise l'apparence native du bouton, on garde la geometrie d'origine. */
.jr-fiche__thumb {
	flex-shrink: 0;
	width: 72px;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background-color: #33443B;
	padding: 0;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	/* Le liseré d'etat est un outline et non une bordure : il ne prend aucune
	   place dans la boite, donc la bande de vignettes ne bouge pas au clic. */
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: opacity 0.2s ease, outline-color 0.2s ease;
}
.jr-fiche__thumb > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.jr-fiche__thumb:hover {
	opacity: 0.82;
}
.jr-fiche__thumb.is-current {
	outline-color: #8B9D77;   /* sauge : la photo actuellement affichee */
}
.jr-fiche__thumb:focus-visible {
	outline-color: #33443B;   /* eucalyptus : parcours clavier, bien contraste */
}
@media (prefers-reduced-motion: reduce) {
	.jr-fiche__thumb {
		transition: none;
	}
}
.jr-fiche__thumb .jr-logement-ph img {
	width: 46%;
}
.jr-fiche__content {
	padding: clamp(1.25rem, 3vw, 2rem);
}
.jr-fiche__place {
	margin: 0 0 0.35rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8B9D77;
}
.jr-fiche__name {
	margin: 0 0 0.3rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.15;
	color: #33443B;
}
.jr-fiche__type {
	margin: 0 0 1.4rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	color: #5F5D56;
}
.jr-fiche__specs {
	list-style: none;
	margin: 0 0 1.6rem;
	padding: 1.1rem 0;
	border-top: 1px solid rgba(51, 68, 59, 0.12);
	border-bottom: 1px solid rgba(51, 68, 59, 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.6rem;
}
.jr-fiche__specs .jr-spec {
	font-size: 14px;
}
.jr-fiche__specs .jr-spec__icon {
	width: 19px;
	height: 19px;
}
.jr-fiche__desc {
	margin: 0 0 1.8rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.75;
	color: #2E2E2A;
}
.jr-fiche__eq-title {
	margin: 0 0 1rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: 1.2rem;
	color: #33443B;
}
.jr-fiche__equip {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem 1.5rem;
}
.jr-equip {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	color: #2E2E2A;
}
.jr-equip__icon {
	width: 20px;
	height: 20px;
	color: #8B9D77;
	flex-shrink: 0;
}
/* Bloc contact en bas de fiche (fond eucalyptus). */
.jr-fiche__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
	background-color: #33443B;
}
.jr-fiche__contact-text {
	margin: 0;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
	color: #F7F4EE;
}
.jr-fiche__contact-btn {
	flex-shrink: 0;
	display: inline-block;
	background-color: #8B9D77;
	color: #23301F;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.85rem 1.8rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease;
}
.jr-fiche__contact-btn:hover,
.jr-fiche__contact-btn:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
}

/* Bouton de reservation : mene sur une plateforme externe. On passe en flex pour
   loger l'icone, et on garde exactement la meme couleur et la meme geometrie que
   le bouton de contact — c'est la destination qui change, pas le niveau
   d'importance. */
.jr-fiche__contact-btn--resa {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
/* Fleche « lien externe » : discrete (0.8 d'opacite, 15px), elle signale la
   sortie du site sans concurrencer le libelle. Elle se reveille au survol en
   meme temps que le bouton. */
.jr-fiche__ext {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: 0.8;
	transition: opacity 0.3s ease;
}
.jr-fiche__contact-btn--resa:hover .jr-fiche__ext,
.jr-fiche__contact-btn--resa:focus-visible .jr-fiche__ext {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.jr-fiche__ext {
		transition: none;
	}
}

/* ==========================================================================
   RESPONSIVE PAGE NOS LOGEMENTS
   ========================================================================== */
/* Split -> empile : les BIENS d'abord, la carte APRES (sous la liste), non
   sticky. Ordre naturel du DOM (liste puis carte) -> on neutralise l'ancien
   order:-1. */
@media (max-width: 900px) {
	.jr-logements-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.5rem;
	}
	.jr-logements-mapcol {
		order: 0;   /* carte SOUS la liste (biens en premier) */
	}
	.jr-logements-mapcol__sticky {
		position: static;
		top: auto;
	}
	.jr-logements-mapcol__map {
		height: 340px;
		min-height: 0;
		max-height: none;
	}
}
@media (max-width: 620px) {
	.jr-logements-list { grid-template-columns: minmax(0, 1fr); }
	.jr-fiche__equip { grid-template-columns: minmax(0, 1fr); }
	.jr-fiche__contact { flex-direction: column; align-items: flex-start; }
	.jr-fiche__contact-btn { width: 100%; text-align: center; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
	.jr-logements *,
	.jr-logements *::after {
		transition: none !important;
		animation: none !important;
	}
	.jr-logement-card:hover {
		transform: none !important;
	}
	.jr-logement-card:hover .jr-logement-card__media img {
		transform: none !important;
	}
}


/* ==========================================================================
   PAGE "FAQ" (/faq/) : template-jr-faq.php
   --------------------------------------------------------------------------
   Bannière + deux blocs d'accordeon (Proprietaires / Voyageurs) + rappel
   contact. Accordeon : cartes blanches, depli via grid-template-rows, bordure
   active sauge, chevron pivotant. Animations partagees (.jr-anim*, gate
   .jr-about-ready). Palette JR stricte.
   ========================================================================== */

.content-area.jr-faq-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}
.jr-faq-page .jr-faq {
	margin: 0;
}
.jr-faq-hero,
.jr-faq-blocks,
.jr-faq-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* ==========================================================================
   1. BANNIERE
   ========================================================================== */
.jr-faq-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(22rem, 56vh, 30rem);
	background-color: #33443B;
}
.jr-faq-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	z-index: 0;
	background-image: url('../img/hero-faq.jpg?ver=1785686029');
	background-image: image-set(
		url('../img/hero-faq.webp?ver=1785686029') type('image/webp'),
		url('../img/hero-faq.jpg?ver=1785686029') type('image/jpeg')
	);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.jr-faq-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.66) 0%, rgba(51, 68, 59, 0) 62%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.68) 0%, rgba(51, 68, 59, 0.28) 55%, rgba(51, 68, 59, 0.44) 100%);
}
.jr-faq-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem);
	box-sizing: border-box;
}
.jr-faq-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C6D6B0;
}
.jr-faq-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #C6D6B0;
}
.jr-faq-hero__title {
	margin: 0;
	max-width: 18ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* ==========================================================================
   2 + 3. BLOCS ACCORDEON (fond calcaire)
   ========================================================================== */
.jr-faq-blocks {
	background-color: #F7F4EE;
}
.jr-faq-blocks__inner {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-faq-block {
	margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.jr-faq-block:last-child {
	margin-bottom: 0;
}
/* L5 (SEO-026) : passerelle vers la page Proprietaires, intercalee entre les
   deux blocs de questions. Meme corps de texte que les reponses de la FAQ ; la
   marge basse reprend celle de .jr-faq-block pour conserver le rythme vertical
   de la page. */
.jr-faq-bridge {
	margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #5F5D56;
}
.jr-faq-bridge a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
.jr-faq-bridge a:hover,
.jr-faq-bridge a:focus-visible {
	color: #33443B;
}

.jr-faq-block__label {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.25rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* SEO-022 (action 27) : sauge #8B9D77 remplacée par une sauge foncée.
	   À 12px et en graisse 600, le libellé restait sous le seuil de contraste
	   (2,66 sur le fond calcaire #F7F4EE, minimum requis 4,5). #5F724A donne
	   4,79 sur ce fond et 4,7 sur blanc. Même teinte, deux crans plus sombre ;
	   l'icône, qui hérite de cette couleur, suit. La sauge claire reste la
	   couleur d'accent partout ailleurs sur le site. */
	color: #5F724A;
}
.jr-faq-block__icon {
	display: inline-flex;
}
.jr-faq-block__icon svg {
	width: 22px;
	height: 22px;
	color: #8B9D77;
}
.jr-faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* --- Item d'accordeon --- */
.jr-faq-item {
	background-color: #FFFFFF;
	border: 1px solid rgba(51, 68, 59, 0.12);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Sous le gate d'animation : on conserve le reveal (transform/opacity) EN PLUS
   des transitions de bordure/ombre (sinon la regle generique .jr-anim-card les
   ecraserait). */
.jr-about-ready .jr-faq-item {
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.jr-faq-item.is-open {
	border-color: #8B9D77;
	box-shadow: 0 8px 24px rgba(46, 46, 42, 0.07);
}
.jr-faq-item__head {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}
.jr-faq-item__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.5rem);
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 500;
	font-size: clamp(1rem, 1.4vw, 1.08rem);
	line-height: 1.45;
	/* !important : neutralise le style de bouton du thème (fond eucalyptus +
	   texte clair applique sur [aria-expanded="true"]). L'item actif reste une
	   carte blanche a bordure sauge, conforme a la charte. */
	background-color: transparent !important;
	color: #33443B !important;
}
.jr-faq-item__q {
	flex: 1;
}
.jr-faq-item__chevron {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	color: #8B9D77;
	transition: transform 0.35s ease;
}
.jr-faq-item.is-open .jr-faq-item__chevron {
	transform: rotate(180deg);
}
.jr-faq-item__btn:focus-visible {
	outline: 2px solid #8B9D77;
	outline-offset: -2px;
	border-radius: 12px;
}
/* Depli : grid 0fr -> 1fr (transition de hauteur douce, sans mesurer). */
.jr-faq-item__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.jr-faq-item.is-open .jr-faq-item__panel {
	grid-template-rows: 1fr;
}
.jr-faq-item__answer {
	overflow: hidden;
}
.jr-faq-item__answer p {
	margin: 0;
	padding: 0 clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.4rem);
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #5F5D56;
}

/* ==========================================================================
   4. RAPPEL CONTACT (fond vert pale, bouton eucalyptus)
   ========================================================================== */
.jr-faq-cta {
	background-color: #E7EAE0;
}
.jr-faq-cta__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}
.jr-faq-cta__title {
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	color: #33443B;
	margin: 0 0 1.8rem;
}
.jr-faq-cta__btn {
	display: inline-block;
	background-color: #33443B;
	color: #F7F4EE;
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.95rem 2.2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.jr-faq-cta__btn:hover,
.jr-faq-cta__btn:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(51, 68, 59, 0.28);
}

/* Couleur des caches de reveal (--jr-mask) par section. */
.jr-about-ready .jr-faq-cta__inner {
	--jr-mask: #E7EAE0;
}

/* ==========================================================================
   RESPONSIVE + MOUVEMENT REDUIT PAGE FAQ
   ========================================================================== */
@media (max-width: 560px) {
	.jr-faq-item__btn {
		font-size: 1rem;
	}
}
/* Mouvement reduit. La portee couvre les DEUX rendus de l'accordeon : le <main
   class="jr-faq"> de la page dediee ET l'apercu de l'accueil (.jr-home-faq), qui
   partagent le meme balisage mais pas le meme conteneur. Sans .jr-home-faq, le
   depli (transition sur grid-template-rows) et la rotation du chevron
   continuaient de s'animer sur l'accueil alors que /faq/ les figeait. */
@media (prefers-reduced-motion: reduce) {
	.jr-faq *,
	.jr-faq *::after,
	.jr-home-faq *,
	.jr-home-faq *::after {
		transition: none !important;
		animation: none !important;
	}
	.jr-faq-cta__btn:hover {
		transform: none !important;
	}
}


/* ==========================================================================
   APERCU FAQ EN BAS DE LA PAGE D'ACCUEIL (.jr-home-faq)
   --------------------------------------------------------------------------
   Injecte par functions.php (jrp_home_faq_html) JUSTE AVANT le CTA final, donc
   ordre : avis > FAQ > CTA > bandeau partenaires. On repond aux objections puis
   on convertit.

   Le contenu, les identifiants et le rendu des accordeons sont ceux de la page
   /faq/ (jrp_faq_block_html) : ITEMS STRICTEMENT IDENTIQUES, on ne redecrit ici
   que l'enveloppe de section (fond, espacement, deux colonnes) et le lien vers
   la page complete. Aucune couleur nouvelle.

   Les blocs sont cote a cote en desktop (l'apercu reste court apres les avis) et
   empiles sous 900px. Pas d'animation : l'accueil ne charge pas about.js, le PHP
   n'y pose donc aucune classe .jr-anim.
   Palette : calcaire #F7F4EE, eucalyptus #33443B, sauge #8B9D77.
   ========================================================================== */

.jr-home-faq {
	/* Pleine largeur (le bloc vit dans .entry-content, contenu borne a 1290px). */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background-color: #F7F4EE;
	font-family: "Instrument Sans", sans-serif;
}
.jr-home-faq__inner {
	max-width: 1290px;
	margin: 0 auto;
	/* Padding BAS a zero : l'espacement sous les blocs est desormais porte par
	   .jr-home-faq-cta, qui a repris le lien. La somme reste identique. */
	padding: clamp(3.5rem, 7vw, 5.5rem) clamp(1rem, 4vw, 2rem) 0;
	box-sizing: border-box;
}
/* SPECIFICITE : cette section vit dans .single-content, qui impose ses propres
   marges aux <p> et aux titres via des selecteurs a DEUX composantes
   (« .single-content p { margin-top:0; margin-bottom:var(--global-md-spacing) } »).
   Une simple classe (0,1,0) perd contre eux. Les regles d'espacement de ce bloc
   sont donc prefixees par .jr-home-faq pour passer devant, sans !important.
   Meme typo / meme echelle que les autres titres de section de l'accueil
   (valeurs alignees sur la regle globale des h2 centres, que ce titre ne peut
   pas capter : il vit dans une <section> injectee, sans les classes WP). */
.jr-home-faq .jr-home-faq__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-align: center;
	color: #33443B;
}
.jr-home-faq__blocks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: start;
}
/* Le bloc herite de .jr-faq-block (page FAQ), qui porte une marge basse utile
   quand les blocs sont empiles ; en grille, la gouttiere suffit. */
.jr-home-faq .jr-faq-block {
	margin-bottom: 0;
}
/* Intitule de bloc : meme retrait que sur /faq/ (les <p> de .single-content
   recevraient sinon la marge basse generique du theme, plus large). */
.jr-home-faq .jr-faq-block__label {
	margin: 0 0 1.25rem;
}
/* MEME PIEGE, cote titres : « .single-content h3 » impose une marge basse aux
   <h3>, et l'en-tete de chaque question en est un. Resultat : 8,5 px de fond de
   carte residuels SOUS la question, coinces entre le bouton et le panneau replie
   — un liseré parasite au bas de chaque carte, qui se remarque surtout apres
   avoir deplie puis replie. La page /faq/ y echappe (elle ne vit pas dans
   .single-content), d'ou un item a 62,9 px la-bas contre 73,7 px ici. */
.jr-home-faq .jr-faq-item__head {
	margin: 0;
}
/* --------------------------------------------------------------------------
   BANDEAU DU LIEN « Toutes les questions » (.jr-home-faq-cta)
   --------------------------------------------------------------------------
   Rendu par le PHP en FRERE de <section class="jr-home-faq">, pas dedans.
   Motif : Safari (macOS) laisse des traces de repeint de la bordure 1px du lien
   au defilement. Sorti de la section, le lien obtient sa propre couche de
   compositing (isolation + translateZ) et ne partage plus le contexte de
   peinture de l'accordeon, dont l'animation de depli reflowe tout ce qui suit.

   Le rendu ne change pas d'un pixel : ce bandeau reprend le fond calcaire et la
   pleine largeur de la section, son padding HAUT vaut l'ancienne margin-top du
   <p> et son padding BAS l'ancien padding-bottom de .jr-home-faq__inner (passe
   a 0). Reference mesuree avant deplacement — blocs -> haut du lien : 50 px a
   1307 px, 38 px a 390 px ; lien -> rangee CTA : 88 px et 56 px.
   -------------------------------------------------------------------------- */
.jr-home-faq-cta {
	/* Couche de compositing propre : c'est tout l'objet du deplacement. */
	isolation: isolate;
	transform: translateZ(0);
	/* Prolonge visuellement la section : meme fond, meme pleine largeur. La
	   separation n'existe que dans le DOM. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	background-color: #F7F4EE;
	font-family: "Instrument Sans", sans-serif;
	padding-top: clamp(2.25rem, 4vw, 3rem);
	padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
	text-align: center;
}
/* Le <p> n'est plus descendant de .jr-home-faq : la regle d'espacement qui le
   protegeait de « .single-content p » ne s'applique plus. On la reporte ici,
   avec la meme specificite (0,2,0) et une marge nulle, l'espacement etant
   desormais dans le padding du bandeau. */
.jr-home-faq-cta .jr-home-faq__all {
	margin: 0;
	text-align: center;
	/* Deux liens desormais, et la concatenation PHP ne laisse aucun caractere
	   entre eux : sans cette regle, deux inline-flex se toucheraient. Le flex
	   remplace le centrage par text-align, qui n'agit plus sur des elements
	   flex ; text-align reste utile au retour a la ligne DANS chaque lien. */
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
}
/* Sous 560px, les deux liens s'empilent, centres. Cote a cote,
   « Toutes les questions » et « Le blog JR Properties » ne tiennent pas sur
   375px sans se couper au milieu d'une ancre. */
@media (max-width: 560px) {
	.jr-home-faq-cta .jr-home-faq__all {
		flex-direction: column;
		align-items: center;
	}
}
/* Meme traitement que « Voir nos N logements » sous les biens. */
.jr-home-faq__all-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 15px;
	font-weight: 600;
	color: #33443B;
	text-decoration: none;
	/* Le soulignement n'est plus une bordure mais un aplat de fond de 1 px :
	   c'est la bordure 1px qui laissait les traces de repeint sous Safari.
	   Geometrie strictement identique — le degrade couvre 100 % de la boite,
	   flèche comprise, et se pose au meme y (padding 3 px = ancien 2 px +
	   l'epaisseur de la bordure retiree, la hauteur du lien reste a 27 px).
	   Un text-decoration ne conviendrait pas : le <svg> est un inline atomique,
	   le soulignement s'arreterait avant la fleche. */
	border-bottom: 0;
	padding-bottom: 3px;
	background-image: linear-gradient(rgba(51, 68, 59, .25), rgba(51, 68, 59, .25));
	background-size: 100% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: color 0.25s ease;
}
.jr-home-faq__all-link:hover,
.jr-home-faq__all-link:focus-visible {
	color: #8B9D77;
	/* Opaque, comme l'etait border-color au survol. NB : un background-image ne
	   s'interpole pas, la bascule de teinte du trait est donc instantanee la ou
	   la bordure la fondait sur 0,25 s. Seule difference de comportement. */
	background-image: linear-gradient(#8B9D77, #8B9D77);
}
.jr-home-faq__arrow {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.jr-home-faq__all-link:hover .jr-home-faq__arrow {
	transform: translateX(3px);
}

@media (max-width: 900px) {
	.jr-home-faq__blocks {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(1.75rem, 5vw, 2.5rem);
	}
}
@media (prefers-reduced-motion: reduce) {
	.jr-home-faq__all-link,
	.jr-home-faq__arrow {
		transition: none;
	}
}


/* ==========================================================================
   PAGE "NOS SERVICES" (/nos-services/) : template-jr-nos-services.php
   --------------------------------------------------------------------------
   Bannière + intro + 4 familles (grille 2x2) + rappel contact. Animations
   partagees (.jr-anim*, gate .jr-about-ready). Palette JR stricte.
   ========================================================================== */

.content-area.jr-services-page {
	margin-top: 0;
	margin-bottom: 0;
	overflow-x: clip;
}
.jr-services-page .jr-nos-services {
	margin: 0;
}
.jr-services-hero,
.jr-services-intro,
.jr-services-families,
.jr-services-cta {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* ==========================================================================
   1. BANNIERE
   ========================================================================== */
.jr-services-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp(24rem, 62vh, 34rem);
	background-color: #33443B;
}
.jr-services-hero__bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -18%;
	height: 136%;
	z-index: 0;
	/* Echelle d'images REDUITE A DEUX PALIERS pour cette banniere. La photo (VTT
	   sur un plateau calcaire) est saturee de detail fin sur toute sa surface :
	   a qualite egale elle pese environ 7 fois plus que les deux autres, et un
	   palier Retina a 3200 px couterait 1,76 Mo. On conserve donc le 2000 px
	   pour tous les ecrans desktop, Retina compris, et on ajoute seulement le
	   palier mobile. Le JPEG a ete regenere a 2000 px : il ne faisait que
	   1400 px alors que le WebP en faisait 2000, donc les navigateurs sans WebP
	   recevaient une image nettement plus petite. */
	background-image: url('../img/hero-services-2000.jpg?ver=1786023858');
	background-image: image-set(
		url('../img/hero-services-2000.webp?ver=1786023857') type('image/webp'),
		url('../img/hero-services-2000.jpg?ver=1786023858') type('image/jpeg')
	);
	background-size: cover;
	/* Cadrage remonte pour reveler le pont du Gard (sujet, situe en haut de la
	   photo). */
	background-position: center 22%;
	background-repeat: no-repeat;
}
@media (max-width: 767px) {
	/* JPEG SEUL, volontairement : sur cette photo tres texturee, mozjpeg bat le
	   WebP a ce palier (185 Ko contre 248 Ko a qualite egale). Proposer le WebP
	   ferait servir le fichier le PLUS lourd, puisque les navigateurs le
	   preferent des qu'il est offert. */
	.jr-services-hero__bg {
		background-image: url('../img/hero-services-1200.jpg?ver=1786023857');
	}
}
.jr-services-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, rgba(51, 68, 59, 0.66) 0%, rgba(51, 68, 59, 0) 62%),
		linear-gradient(to bottom, rgba(51, 68, 59, 0.68) 0%, rgba(51, 68, 59, 0.28) 55%, rgba(51, 68, 59, 0.44) 100%);
}
.jr-services-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(9rem, 16vh, 13rem) clamp(1.25rem, 4vw, 2rem) clamp(3.5rem, 7vw, 5rem);
	box-sizing: border-box;
}
.jr-services-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C6D6B0;
}
.jr-services-hero__dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #C6D6B0;
}
.jr-services-hero__title {
	margin: 0;
	max-width: 16ch;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2.2rem, 5.2vw, 3.6rem);
	line-height: 1.12;
	color: #F7F4EE;
}

/* ==========================================================================
   2. INTRODUCTION (fond calcaire, centre)
   ========================================================================== */
.jr-services-intro {
	background-color: #F7F4EE;
}
.jr-services-intro__inner {
	max-width: min(82%, 800px);
	margin: 0 auto;
	/* Padding vertical resserre : la section entoure le paragraphe sans cadre
	   surdimensionne (le padding lateral reste inchange). */
	padding: clamp(2.4rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem);
	text-align: center;
}
.jr-services-intro__inner p {
	margin: 0;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.8;
	color: #5F5D56;
}

/* ==========================================================================
   3. FAMILLES DE SERVICES (fond vert pale, grille 2x2)
   ========================================================================== */
.jr-services-families {
	position: relative;
	overflow: hidden;
	background-color: #E7EAE0;
}
.jr-services-families__deco {
	position: absolute;
	z-index: 0;
	top: -12%;
	right: -6%;
	width: min(40rem, 70%);
	aspect-ratio: 671 / 800;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.06;
	pointer-events: none;
}
.jr-services-families__inner {
	position: relative;
	z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-services-families__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* Cartes de familles : PHOTO en fond complet + voile eucalyptus, texte en clair.
   Coins arrondis respectes par l'image et le voile (overflow hidden). */
.jr-service-fam {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(46, 46, 42, 0.10);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	background-color: #33443B;   /* repli eucalyptus si l'image manque */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.jr-service-fam:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(46, 46, 42, 0.20);
}
/* Voile eucalyptus par-dessus la photo, plus dense en bas (zone de la liste)
   pour garantir la lisibilite AA du texte meme sur les photos claires. */
.jr-service-fam__veil {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(51, 68, 59, 0.70) 0%, rgba(51, 68, 59, 0.82) 45%, rgba(51, 68, 59, 0.90) 100%);
}
/* Tout le contenu passe au-dessus du voile. */
.jr-service-fam > :not(.jr-service-fam__veil) {
	position: relative;
	z-index: 1;
}
/* Photos de fond de chaque famille (WebP + fallback JPG). */
.jr-service-fam--bienetre {
	background-image: url('../img/service-bienetre.jpg?ver=1785709763');
	background-image: image-set(url('../img/service-bienetre.webp?ver=1785709763') type('image/webp'), url('../img/service-bienetre.jpg?ver=1785709763') type('image/jpeg'));
}
.jr-service-fam--gastronomie {
	background-image: url('../img/service-gastronomie.jpg?ver=1785709763');
	background-image: image-set(url('../img/service-gastronomie.webp?ver=1785709763') type('image/webp'), url('../img/service-gastronomie.jpg?ver=1785709763') type('image/jpeg'));
}
.jr-service-fam--decouverte {
	background-image: url('../img/service-decouverte.jpg?ver=1785709764');
	background-image: image-set(url('../img/service-decouverte.webp?ver=1785709764') type('image/webp'), url('../img/service-decouverte.jpg?ver=1785709764') type('image/jpeg'));
}
.jr-service-fam--intendance {
	background-image: url('../img/service-intendance.jpg?ver=1785709764');
	background-image: image-set(url('../img/service-intendance.webp?ver=1785709764') type('image/webp'), url('../img/service-intendance.jpg?ver=1785709764') type('image/jpeg'));
}
.jr-service-fam__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: rgba(247, 244, 238, 0.15);
	border: 1px solid rgba(247, 244, 238, 0.42);
	color: #F7F4EE;
	margin-bottom: 1.3rem;
}
.jr-service-fam__icon svg {
	width: 30px;
	height: 30px;
}
.jr-service-fam__title {
	margin: 0 0 0.5rem;
	font-family: 'Prata', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.2;
	color: #F7F4EE;
	text-shadow: 0 1px 3px rgba(46, 46, 42, 0.45);
}
.jr-service-fam__intro {
	margin: 0 0 1.6rem;   /* espace entre le filet et le 1er item de la liste */
	padding-bottom: 1.3rem;
	border-bottom: 1px solid rgba(247, 244, 238, 0.28);
	font-family: "Instrument Sans", sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #F7F4EE;
	text-shadow: 0 1px 3px rgba(46, 46, 42, 0.4);
}
.jr-service-fam__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}
.jr-service-fam__list li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14.5px;
	line-height: 1.5;
	color: #F7F4EE;
	text-shadow: 0 1px 3px rgba(46, 46, 42, 0.4);
}
.jr-service-fam__check {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: #C6D6B0;   /* sauge clair : ressort nettement sur le voile fonce */
}

/* ==========================================================================
   4. RAPPEL CONTACT (fond eucalyptus, bouton sauge)
   ========================================================================== */
.jr-services-cta {
	position: relative;
	overflow: hidden;
	background-color: #33443B;
	padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
}
.jr-services-cta__deco {
	position: absolute;
	z-index: 0;
	bottom: -14%;
	left: -8%;
	width: min(38rem, 66%);
	aspect-ratio: 671 / 800;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.05;
	pointer-events: none;
}
.jr-services-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.jr-services-cta__subtitle {
	max-width: 48ch;
	margin: 1rem auto 1.9rem;
	font-family: "Instrument Sans", sans-serif;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.65;
	color: rgba(247, 244, 238, 0.85);
}
.jr-services-cta__btn {
	display: inline-block;
	background-color: #8B9D77;
	color: #23301F;                 /* eucalyptus fonce : AA sur sauge */
	font-family: "Instrument Sans", sans-serif;
	font-weight: 600;
	font-size: 1rem;
	padding: 0.95rem 2.2rem;
	border-radius: 10px;
	text-decoration: none;
	transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.jr-services-cta__btn:hover,
.jr-services-cta__btn:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Couleur des caches de reveal (--jr-mask) par section. */
.jr-about-ready .jr-services-cta__inner {
	--jr-mask: #33443B;
}
/* Icones des familles : petit rebond en sequence (delai cale sur --i). */
.jr-about-ready .jr-service-fam__icon {
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jr-about-ready .jr-anim-card.is-in .jr-service-fam__icon {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 100ms + 180ms);
}

/* ==========================================================================
   RESPONSIVE + MOUVEMENT REDUIT PAGE NOS SERVICES
   ========================================================================== */
@media (max-width: 760px) {
	.jr-services-families__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 460px;
		margin-inline: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.jr-nos-services *,
	.jr-nos-services *::after {
		transition: none !important;
		animation: none !important;
	}
	.jr-service-fam:hover,
	.jr-services-cta__btn:hover {
		transform: none !important;
	}
}


/* ==========================================================================
   PAGE CONTACT : liens cables via render_block (functions.php).
   Email/telephone en mailto:/tel:, pastilles reseaux cliquables.
   ========================================================================== */
.jr-contact-info .kt-svg-icon-list-text a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.jr-contact-info .kt-svg-icon-list-text a:hover,
.jr-contact-info .kt-svg-icon-list-text a:focus-visible {
	color: #8B9D77;
}
/* L'ancre enveloppe la pastille reseau sans casser la rangee horizontale. */
.jr-contact-info .wp-block-kadence-iconlist:nth-of-type(2) .kt-svg-icon-list-item-wrap > a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}


/* ==========================================================================
   ACCUEIL : section estimation ("Combien peut rapporter votre bien ?").
   Fond UNI eucalyptus impose. Neutralise tout degrade eventuel (reglage de bloc
   ou version en cache). Cible l'identifiant unique de CETTE Row d'accueil
   (10_b61161-4f) -> n'affecte PAS la section estimation de /proprietaires/.
   ========================================================================== */
.kb-row-layout-id10_b61161-4f {
	background-color: #33443B !important;
	background-image: none !important;
}
.kb-row-layout-id10_b61161-4f > .kt-row-layout-overlay {
	background: transparent !important;
}


/* ==========================================================================
   /proprietaires/ : CARTE LEAFLET (section "Notre zone d'intervention").
   La carte remplace l'illustration placeholder dans le cadre gauche (memes
   dimensions / coins arrondis via .jr-proprio-zone__map). Marqueurs charte JR,
   controles / attribution / popups discrets. Chargee uniquement sur cette page.
   ========================================================================== */
.jr-proprio-zone__leaflet {
	width: 100%;
	height: 100%;
}
.jr-proprio-zone .leaflet-container {
	font-family: "Instrument Sans", sans-serif;
	background-color: #33443B;   /* repli eucalyptus pendant le chargement des tuiles */
}

/* Marqueur : pastille eucalyptus a liseré calcaire (aucune image bleue par defaut). */
.jr-zone-pin {
	border-radius: 50%;
	background-color: #C08863;   /* terracotta */
	border: 2px solid #F7F4EE;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba(46, 46, 42, 0.4);
	transition: transform 0.2s ease, filter 0.2s ease;
}
.jr-zone-pin:hover {
	filter: brightness(1.08);   /* leger eclaircissement, reste terracotta */
	transform: scale(1.18);
}


/* Controles de zoom : discrets, charte. */
.jr-proprio-zone .leaflet-bar {
	border: none;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(46, 46, 42, 0.2);
}
.jr-proprio-zone .leaflet-control-zoom a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 18px;
	color: #33443B;
	background-color: #F7F4EE;
	border: none;
}
.jr-proprio-zone .leaflet-control-zoom a:hover {
	background-color: #E7EAE0;
	color: #33443B;
}

/* Attribution OpenStreetMap : obligatoire, discrete mais visible. */
.jr-proprio-zone .leaflet-control-attribution {
	background-color: rgba(247, 244, 238, 0.85);
	color: #5F5D56;
	font-size: 10px;
}
.jr-proprio-zone .leaflet-control-attribution a {
	color: #33443B;
}

/* Popups : arrondis, typo et couleur charte. */
.jr-proprio-zone .leaflet-popup-content-wrap {
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(46, 46, 42, 0.18);
}
.jr-proprio-zone .leaflet-popup-content {
	margin: 8px 14px;
	font-family: "Instrument Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #33443B;
}

/* Responsive : sur mobile la carte est au-dessus des communes (la grille
   s'empile deja), hauteur fixe confortable et manipulable au doigt. */
@media (max-width: 860px) {
	.jr-proprio-zone__map {
		aspect-ratio: auto;
		height: 300px;
	}
}


/* ==========================================================================
   SURTITRES DE BANNIERE (hero) UNIQUEMENT : petite barre verticale terracotta.
   Ne concerne QUE les surtitres des bannieres de page (banniere legale, contact
   ::before, et surtitres .jr-*-hero__dot). Les surtitres de SECTION INTERNE
   (.jr-eyebrow__dot) NE sont PAS ici : ils conservent leur pastille ronde sauge
   d'origine (voir la regle .jr-about/.jr-proprio/.jr-nos-services .jr-eyebrow__dot
   plus haut). Barre fine et discrete, centree, lisible sur fond clair comme fonce.
   ========================================================================== */
.jr-legal-banner__dot,
.jr-contact-eyebrow::before,
.jr-about-hero__dot,
.jr-proprio-hero__dot,
.jr-logements-hero__dot,
.jr-faq-hero__dot,
.jr-services-hero__dot {
	width: 2px;
	height: 14px;
	border-radius: 1px;
	background-color: #C08863;   /* terracotta */
}


/* ==========================================================================
   PACK MOBILE APP-LIKE (< 768px). Desktop STRICTEMENT inchange (tout est dans
   le media query mobile ; la bottom-nav est masquee par defaut hors mobile).
   Bottom-nav fixe, header qui se cache au scroll, boutons/champs tappables,
   modales plein ecran, safe-area iOS. Palette JR.
   ========================================================================== */
.jr-bottomnav { display: none; }   /* desktop : jamais affichee */

@media (max-width: 767px) {
	/* --- Barre de navigation fixe en bas (element central du pack). --- */
	.jr-bottomnav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background-color: #33443B;                 /* eucalyptus */
		box-shadow: 0 -6px 22px rgba(46, 46, 42, 0.20);
		padding-bottom: env(safe-area-inset-bottom);   /* iPhone a encoche */
	}
	.jr-bottomnav__item {
		flex: 1 1 0;
		min-width: 0;                              /* 5 items : chaque case peut retrecir */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 56px;                          /* tap zone confortable (5 items) */
		padding: 6px 2px;
		position: relative;
		text-decoration: none;
		color: rgba(247, 244, 238, 0.62);          /* calcaire attenue */
		font-family: "Instrument Sans", sans-serif;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0;
		-webkit-tap-highlight-color: transparent;
		transition: color 0.2s ease;
	}
	.jr-bottomnav__icon { width: 22px; height: 22px; }
	/* Label sur UNE ligne, jamais de debordement meme sur ~360px. */
	.jr-bottomnav__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.jr-bottomnav__item.is-active { color: #F7F4EE; }                       /* label clair */
	.jr-bottomnav__item.is-active .jr-bottomnav__icon { color: #C08863; }   /* icone terracotta */
	.jr-bottomnav__item.is-active::before {                                 /* trait terracotta en haut */
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 22px;
		height: 3px;
		border-radius: 0 0 3px 3px;
		background-color: #C08863;
	}
	.jr-bottomnav__item:active { color: #F7F4EE; }

	/* Le corps reserve la hauteur de la barre : contenu et footer ne passent
	   jamais dessous. */
	body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}

	/* --- Boutons plus grands / tappables (min ~48px) ; CTA de section pleine
	   largeur (max 360px, centres). Tailles de contenu inchangees. --- */
	.jr-services-cta__btn,
	.jr-about-cta__btn,
	.jr-proprio-estim__btn,
	.jr-blog-cta__btn,
	.jr-faq-cta__btn,
	.jr-formula-card__btn,
	.jr-services-cta a,
	.jr-fiche__contact-btn {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.jr-services-cta__btn,
	.jr-about-cta__btn,
	.jr-proprio-estim__btn {
		width: 100%;
		max-width: 360px;
		box-sizing: border-box;
	}

	/* --- Champs de formulaire (contact) confortables au tap. 16px : evite le
	   zoom auto d'iOS a la mise au point. --- */
	input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
	textarea,
	select {
		min-height: 48px;
		font-size: 16px;
	}
	textarea { min-height: 120px; }
	button[type="submit"],
	input[type="submit"],
	.wpforms-submit,
	.kb-forms-submit {
		min-height: 48px;
	}

	/* --- Modales plein ecran (fiches logement + tableau des formules). --- */
	.jr-modal {
		padding: 0;
	}
	.jr-modal__panel,
	.jr-modal--wide .jr-modal__panel {
		max-width: none;
		width: 100%;
		max-height: none;
		height: 100vh;
		height: 100dvh;
		border-radius: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.jr-modal__body {
		flex: 1 1 auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Croix / en-tete de modale accessibles sous l'encoche iOS. */
	.jr-modal__head {
		padding-top: max(clamp(0.85rem, 3vw, 1.2rem), env(safe-area-inset-top));
	}

	/* --- Croix de fermeture : ZONE DE TAP agrandie (~48px) + croix plus grande,
	   confortable au doigt. Fond calcaire + croix eucalyptus deja definis. --- */
	.jr-modal__close {
		width: 48px;
		height: 48px;
	}
	.jr-modal__close svg {
		width: 24px;
		height: 24px;
	}

	/* --- Tableau comparatif "Le detail des formules" : TIENT dans l'ecran mobile
	   (aucun scroll horizontal). Colonnes coches etroites (largeur fixe), la
	   prestation passe a la ligne. En-tetes RACCOURCIS ("Complete" / "Premium",
	   voir jrp_formula_short dans le gabarit) : a 3.6rem de large, le mot
	   "Gestion" repete d'une colonne a l'autre consommait toute la place utile et
	   les deux en-tetes se retrouvaient collees, sans separation lisible.
	   Colonne Premium en terracotta conservee, coches alignees. --- */
	.jr-modal__body {
		padding-left: clamp(0.85rem, 3.5vw, 1.3rem);
		padding-right: clamp(0.85rem, 3.5vw, 1.3rem);
	}
	.jr-modal__tablewrap {
		/* hidden et non visible : c'est ce qui permet au conteneur de clipper les
		   aplats au rayon (coin arrondi de la colonne Premium). Le tableau etant
		   en table-layout fixe, il tient toujours dans la largeur : rien n'est
		   masque au passage. */
		overflow-x: hidden;
	}
	.jr-cmp-table {
		min-width: 0;
		table-layout: fixed;
	}
	.jr-cmp-table th,
	.jr-cmp-table td {
		padding: 0.6rem 0.3rem;
		font-size: 13px;
	}
	.jr-cmp-table tbody th {
		line-height: 1.3;                 /* prestation multi-lignes, aeree */
	}
	.jr-cmp-table thead th {
		font-size: 11.5px;
		line-height: 1.25;
		vertical-align: bottom;
	}
	/* Bascule sur le libelle court : un seul des deux est dans le DOM rendu, donc
	   les lecteurs d'ecran n'annoncent pas le nom en double. */
	.jr-cmp-th-full {
		display: none;
	}
	.jr-cmp-th-short {
		display: inline;
		white-space: nowrap;              /* un seul mot : jamais coupe */
	}
	/* Colonnes coches : etroites, fixes, centrees. Un peu plus larges qu'avant et
	   mieux calees pour que "Complete" et "Premium" ne se touchent plus. */
	.jr-cmp-table thead th:not(:first-child),
	.jr-cmp-table tbody td {
		width: 4.2rem;
		padding-left: 0.45rem;
		padding-right: 0.45rem;
	}
	/* Gouttiere reelle entre les deux colonnes : filet calcaire qui separe le
	   vert pale du terracotta sur toute la hauteur de l'en-tete. */
	.jr-cmp-table thead th:nth-child(2) {
		border-right: 2px solid #F7F4EE;
	}
	.jr-cmp-yes svg { width: 18px; height: 18px; }
	.jr-cmp-no { font-size: 15px; }

	/* --- Fluidite : scroll doux + suppression du flash de tap. --- */
	html { scroll-behavior: smooth; }
	a, button, .jr-bottomnav__item { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
}

/* Mouvement reduit : pas de scroll anime ni de transition. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.jr-bottomnav__item { transition: none; }
}

/* --- Bouton menu (hamburger) en terracotta. -------------------------------
   Portee : .site-mobile-header-wrap, le conteneur du header MOBILE de Kadence.
   Le bouton n'existe que la, donc le desktop n'est pas concerne, sans avoir a
   passer par une media query. L'icone est un SVG Kadence qui peint en
   currentColor : il suffit de poser la couleur sur le bouton.
   Etats hover / focus / ouvert inclus, sinon Kadence les repasse en gris. */
.site-mobile-header-wrap .menu-toggle-open,
.site-mobile-header-wrap .menu-toggle-open:hover,
.site-mobile-header-wrap .menu-toggle-open:focus,
.site-mobile-header-wrap .menu-toggle-open:focus-visible,
.site-mobile-header-wrap .menu-toggle-open.toggle-is-active {
	color: #C08863;
}


/* ==========================================================================
   PACK MOBILE app-like -- COMPLEMENTS (< 768px). Banniere accueil (logo/air),
   carrousel "Nos biens", footer restructure, ordres logements/contact.
   Desktop STRICTEMENT inchange (tout en media query mobile ; points masques par
   defaut hors mobile).
   ========================================================================== */
.jr-props-dots { display: none; }   /* desktop : pas de points (grille) */

@media (max-width: 767px) {

	/* --- 1. Banniere accueil : logo plus petit + plus d'air avant le H1. --- */
	.site-header .site-branding a.brand,
	.site-header .site-branding a.brand::before {
		width: 56px;
		height: 64px;
	}
	/* Degagement sous l'embleme. Celui-ci est passe de 82 a 95px de haut et a ete
	   descendu de 6px : le bas de son dessin est descendu de 12px au total, et
	   c'est autant de pris sur l'air entre le header et le H1 (il ne restait
	   qu'une trentaine de pixels). On rend cet espace au titre. */
	.hero-jr .kt-row-column-wrap {
		padding-top: clamp(7.5rem, 22vw, 8.5rem) !important;
	}
	/* Hierarchie typographique du hero. Le H1 est bloque au minimum de son clamp
	   (2.5rem = 40px) des qu'on descend sous ~770px, alors que le sous-titre,
	   dont le clamp est bien plus plat, reste a 28px : le rapport tombe a 1.43
	   contre 2.13 en desktop, et la hierarchie ne se lit plus. On ne touche pas
	   au H1, deja au minimum lisible pour un titre sur deux lignes ; on redescend
	   le sous-titre a 20px, ce qui retablit un rapport de 2.0, aligne sur le
	   desktop, et lui fait gagner une ligne au passage.
	   L'interligne repasse de 1.6 a 1.4 : a 20px, 1.6 espacait trop pour un
	   sous-titre qui doit se lire comme un bloc secondaire.
	   !important sur la taille : WordPress sert ses classes de preset
	   (.has-large-font-size) avec !important dans la feuille inline du
	   block-library. Sans lui, aucune specificite ne passe devant. */
	.hero-jr p {
		font-size: 20px !important;
		line-height: 1.4;
	}

	/* --- 3. "Nos biens en gestion" : le carrousel (desormais commun a tous les
	   ecrans, voir la section .jr-gallery) se resserre a 1 carte visible + leger
	   debord de la suivante, centree, avec les points indicateurs. Les fleches
	   laterales sont masquees : sur une carte a 85 % de large elles couvriraient
	   la photo, et le swipe + les points font deja le travail. --- */
	.jr-gallery.wp-block-kadence-rowlayout > .kt-row-column-wrap {
		gap: 0.9rem;
		padding-bottom: 0.5rem;
		margin-bottom: 0;
		/* Snap CENTRE ici (et non « au debut ») : un retrait de snap decalerait
		   la carte centree d'une demi-valeur. */
		scroll-padding-left: 0;
	}
	.jr-gallery .jr-prop {
		flex: 0 0 85%;
		scroll-snap-align: center;
	}
	.jr-props-nav {
		display: none;
	}
	.jr-props-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 1.1rem;
	}
	.jr-props-dot {
		width: 8px;
		height: 8px;
		padding: 0;
		border: none;
		border-radius: 50%;
		background-color: rgba(51, 68, 59, 0.25);
		cursor: pointer;
		transition: width 0.25s ease, background-color 0.25s ease;
	}
	.jr-props-dot.is-active {
		width: 22px;
		border-radius: 4px;
		background-color: #C08863;   /* terracotta */
	}

	/* --- 4. Footer mobile : marque centree en haut (lockup raisonnable),
	   Navigation + Legal en 2 colonnes, reseaux centres, puis copyright. --- */
	.jr-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 1.5rem;
		padding: clamp(2.5rem, 9vw, 3.25rem) clamp(1.25rem, 5vw, 1.75rem) clamp(1.5rem, 6vw, 2rem);
	}
	.jr-footer__brand {
		grid-column: 1 / -1;
		width: auto;
		align-items: center;
		text-align: center;
	}
	.jr-footer__lockup { height: 66px; }   /* lockup reduit sur mobile */
	.jr-footer__baseline { margin-top: 0.5rem; font-size: 0.9rem; }
	nav.jr-footer__col { min-width: 0; }
	/* La colonne reseaux (un div, alors que Navigation/Legal sont des nav) passe
	   pleine largeur, centree, sous les deux colonnes. */
	.jr-footer__inner > div.jr-footer__col {
		grid-column: 1 / -1;
		text-align: center;
		margin-top: 0.25rem;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(247, 244, 238, 0.15);
	}
	.jr-footer__social {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.6rem 1.4rem;
	}
	.jr-footer__social li { margin: 0; }
	.jr-footer__reviews {
		align-items: center;
		margin-top: 1.1rem;
		padding-top: 1.1rem;
	}
	.jr-footer__reviews-text { justify-content: center; }

	/* --- 6. Contact : FORMULAIRE d'abord, coordonnees (email/tel/reseaux) apres. --- */
	.jr-contact-info > .kt-row-column-wrap > .wp-block-kadence-column:first-child { order: 2; }
	.jr-contact-info > .kt-row-column-wrap > .wp-block-kadence-column:last-child  { order: 1; }
}


/* ==========================================================================
   SELECTEUR DE LANGUE (GTranslate) habille a la charte.
   --------------------------------------------------------------------------
   Le plugin injecte en JS, en enfant direct de <body> :
     div.gtranslate_wrapper  (id + classe .gt_container--xxxx ALEATOIRES : on ne
       s'y accroche PAS)
       > div.gt_switcher_wrapper   [style inline: position:fixed;top;right;z-index]
           > a.glink[data-gt-lang="en|fr|es"]  (+ .gt-current-lang sur l'active)
               > img (drapeau)
   Accroches STABLES : .gt_switcher_wrapper, .glink, .gt-current-lang, et surtout
   l'attribut data-gt-lang.

   Parti pris (valide avec le client) :
   - Drapeaux masques, codes FR/EN/ES regeneres en CSS (::after) -> 100% CSS,
     sans toucher au plugin. Le nom accessible est pose par assets/js/gtranslate.js
     (aria-label), un ::after n'etant pas fiable pour les lecteurs d'ecran.
   - Ordre DOM (EN, FR, ES) reordonne VISUELLEMENT en FR, EN, ES via flex order.
   - >=1025px (menu horizontal Kadence) : gtranslate.js DEPLACE le widget dans le
     menu (li.jr-gt-lang, apres "Contact"). Les codes vivent alors dans le FLUX de
     la colonne centree du header : aucune collision au redimensionnement, et ils
     suivent le header au scroll comme les autres items (donc plus de :has()).
   - <=1024px (Kadence bascule sur le hamburger + tiroir off-canvas) : gtranslate.js
     REMET le widget dans <body> ; il est masque hors tiroir et revele EN BAS DU
     TIROIR OUVERT (body.showing-popup-drawer-from-right), pour ne pas ajouter un
     flottant.

   Breakpoint 1025px : DOIT rester synchronise avec Kadence (bascule menu <->
   hamburger) et avec gtranslate.js (constante DESKTOP_MIN).

   !important : le plugin pose position/top/right EN INLINE ; seul !important peut
   surclasser un style inline. On le limite donc a position (desktop : rendre
   l'item statique/in-flow) et top/right (mobile : annuler le placement flottant).
   Couleurs et typo restent SANS !important.

   Palette : calcaire #F7F4EE, eucalyptus #33443B, sauge #8B9D77 (accent survol).
   ========================================================================== */

/* Anti-flash : le widget est injecte en JS. On le garde invisible jusqu'a ce
   que assets/js/gtranslate.js pose la classe body.jr-gt-ready, puis fondu.
   On passe par une CLASSE (et non une animation CSS) car GTranslate maintient
   une animation perpetuellement "running" sur le switcher, ce qui bloquerait
   l'opacite. La classe est posee sur <body> (stable, hors du plugin). */
.gt_switcher_wrapper {
	display: flex;
	align-items: center;
	opacity: 0;
}
body.jr-gt-ready .gt_switcher_wrapper {
	opacity: 1;
	transition: opacity 0.3s ease;
}

/* Chaque langue : typo identique aux items du menu, inactive a 0.6. */
.gt_switcher_wrapper .glink {
	display: inline-flex;
	align-items: center;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 17px;      /* = items du menu principal */
	font-weight: 400;     /* = items du menu principal */
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	opacity: 0.6;
	transition: opacity 0.25s ease, color 0.25s ease;
}
/* Drapeaux masques : on affiche des codes texte a la place. */
.gt_switcher_wrapper .glink img { display: none; }
.gt_switcher_wrapper .glink[data-gt-lang="fr"]::after { content: 'FR'; }
.gt_switcher_wrapper .glink[data-gt-lang="en"]::after { content: 'EN'; }
.gt_switcher_wrapper .glink[data-gt-lang="es"]::after { content: 'ES'; }

/* Langue active : pleine opacite. */
.gt_switcher_wrapper .glink.gt-current-lang { opacity: 1; }

/* Survol / focus : pleine opacite + accent sauge. */
.gt_switcher_wrapper .glink:hover,
.gt_switcher_wrapper .glink:focus-visible {
	opacity: 1;
	color: #8B9D77;
}

/* Reordre visuel : DOM = EN, FR, ES  ->  affiche FR, EN, ES. */
.gt_switcher_wrapper .glink[data-gt-lang="fr"] { order: 1; }
.gt_switcher_wrapper .glink[data-gt-lang="en"] { order: 2; }
.gt_switcher_wrapper .glink[data-gt-lang="es"] { order: 3; }

/* Separateur discret (trait vertical fin) a gauche de chaque code sauf le
   premier visuel (FR). currentColor -> suit la couleur/opacite du code. */
.gt_switcher_wrapper .glink::before {
	content: '';
	width: 1px;
	height: 0.85em;
	margin: 0 0.6rem;
	background: currentColor;
	opacity: 0.4;
}
.gt_switcher_wrapper .glink[data-gt-lang="fr"]::before { display: none; }

/* Couleur : calcaire sur header transparent (defaut du site), eucalyptus si le
   header devient solide/clair. Aucun style inline cote couleur -> pas de
   !important. */
.gt_switcher_wrapper .glink { color: #F7F4EE; }
body:not(.transparent-header) .gt_switcher_wrapper .glink { color: #33443B; }

/* --- DESKTOP (>=1025px) : gtranslate.js a deplace le widget dans un
   <li.jr-gt-lang> en fin de menu ; les codes vivent dans le flux, apres
   "Contact", et suivent le header au scroll comme les autres items. --- */
@media (min-width: 1025px) {
	/* Le plugin pose position:fixed INLINE -> !important requis pour rendre
	   l'item statique (dans le flux du menu). Limite a cette propriete. */
	.gt_switcher_wrapper { position: static !important; }
	/* <li> hote : aligne sur la rangee du menu, leger retrait apres "Contact". */
	.jr-gt-lang {
		display: flex;
		align-items: center;
		margin-left: 1.5rem;
	}
}

/* --- MOBILE / TABLETTE (<=1024px : hamburger Kadence) : pas de flottant en
   plus ; les codes n'apparaissent qu'en bas du tiroir ouvert. --- */
@media (max-width: 1024px) {
	.gt_switcher_wrapper { display: none; }
	body.showing-popup-drawer-from-right .gt_switcher_wrapper {
		display: flex;
		justify-content: center;
		top: auto !important;    /* inline top:15px   annule */
		right: 0 !important;     /* inline right:15px annule */
		left: 0;
		bottom: calc(84px + env(safe-area-inset-bottom, 0px)); /* au-dessus de la bottom-nav (<768px) */
		padding: 0 1.5rem;
	}
	/* Fond du tiroir clair -> codes eucalyptus. Zone tactile >= 44px. */
	body.showing-popup-drawer-from-right .gt_switcher_wrapper .glink {
		color: #33443B;
		min-height: 44px;
		padding: 0 0.5rem;
		font-size: 1.15rem;
	}
	body.showing-popup-drawer-from-right .gt_switcher_wrapper .glink::before {
		margin: 0 1rem;
	}
}

/* Mouvement reduit : revelation immediate, sans fondu. */
@media (prefers-reduced-motion: reduce) {
	body.jr-gt-ready .gt_switcher_wrapper { transition: none; }
}