/*
Theme Name: Les Domaines du Lac Bernard
Theme URI: https://lesdomainesdulacbernard.com
Author: Planéo
Description: Conversion WordPress bilingue du concept Les Domaines du Lac Bernard.
Version: 1.1
Text Domain: lac-bernard
*/

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.admin-bar .site-header { top: 32px; }
.lot-card.is-hidden { display: none; }
.lot-card.is-sold > summary { opacity: .68; }
.lot-status {
	display: inline-flex;
	align-items: center;
	width: max-content;
	margin-top: 3px;
	padding: 5px 8px;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: var(--pine);
	font: 700 8px/1 Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.lot-status.reserved { color: #7a6428; }
.lot-status.sold { color: #7b5148; }
.lot-results {
	min-height: 18px;
	margin: -14px 0 24px;
	color: var(--muted);
	font-size: 12px;
}

.gallery-modal[hidden] { display: none !important; }
.gallery-modal { border: 0; width: 100%; height: 100%; }
.gallery-panel { position: relative; }
.gallery-header button { display: grid; place-items: center; }
.gallery-grid a:focus-visible { outline-offset: 3px; outline: 2px solid var(--pine); }
.gallery-empty { grid-column: 1 / -1; color: var(--muted); }
body.lb-modal-open { overflow: hidden; }

.contact-section { padding-bottom: clamp(90px, 11vw, 150px); }
.visit-form {
	max-width: 980px;
	margin: 64px auto 0;
	padding: clamp(28px, 5vw, 58px);
	background: var(--paper);
	text-align: left;
	box-shadow: 0 22px 65px #123d3314;
}
.visit-form h3 {
	margin: 0 0 32px;
	font: 400 clamp(30px, 3.8vw, 52px)/1.05 Georgia, serif;
	letter-spacing: -.035em;
}
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.form-grid label { display: grid; gap: 9px; }
.form-grid label > span:first-child {
	color: var(--pine);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.form-grid input:not([type="checkbox"]),
.form-grid select,
.form-grid textarea {
	width: 100%;
	border: 1px solid var(--line);
	background: var(--cream);
	padding: 14px 15px;
	color: var(--ink);
	font: 400 15px/1.4 Arial, sans-serif;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus { outline: 2px solid #9eb071; outline-offset: 2px; }
.form-wide { grid-column: 1 / -1; }
.form-consent { grid-template-columns: 20px 1fr; align-items: start; }
.form-consent input { width: 18px; height: 18px; margin-top: 1px; }
.form-consent span { line-height: 1.5; }
.form-consent a { text-decoration: underline; text-underline-offset: 3px; }
.form-submit { margin-top: 28px; background: var(--pine); color: var(--paper); cursor: pointer; }
.lb-honeypot { position: absolute !important; left: -9999px !important; }
.form-notice {
	max-width: 980px;
	margin: 42px auto -36px;
	padding: 15px 18px;
	background: var(--paper);
	border-left: 4px solid var(--pine);
	text-align: left;
}
.form-notice.error { border-left-color: #a24c3f; }

.legal-page {
	min-height: 70vh;
	max-width: 920px;
	margin: 0 auto;
	padding: clamp(90px, 10vw, 150px) 24px;
}
.legal-page h1 { color: var(--pine); font-size: clamp(48px, 7vw, 92px); line-height: .98; }
.legal-page h2 { margin-top: 52px; color: var(--pine); font-size: clamp(28px, 4vw, 44px); line-height: 1.1; }
.legal-page p { margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.legal-page a { text-decoration: underline; }

@media (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

@media (max-width: 760px) {
	.form-grid { grid-template-columns: 1fr; }
	.form-wide { grid-column: auto; }
	.visit-form { margin-top: 44px; }
	.form-notice { margin-bottom: -24px; }
}

/* ==================================================================
   ALIGNEMENT DE LA FAMILLE PLANÉO — 2026-09-02
   Objectif : en passant d'un site à l'autre, les mêmes repères se
   retrouvent au même endroit — bas de l'entête, texte de localisation,
   bas de l'image, élément du coin bas-droite.

   Méthode : le contenu du héros était ancré PAR LE BAS sur les trois
   sites, donc sa position dépendait de la longueur du texte — d'où un
   texte de localisation à 312 px sur Wakefield, 292 sur Groupe Planéo
   et 119 sur Lac Bernard. Il est désormais ancré PAR LE HAUT à une
   distance fixe, ce qui rend la position déterministe.
   ================================================================== */
:root{
  --pl-header-h:88px;      /* hauteur d'entête, déjà commune */
  --pl-pad-x:5vw;          /* marge latérale du contenu */
  /* 2026-09-08 : 190px → 120px. À 190px, sur une fenêtre courte (héros d'environ
     610px), le contenu débordait : le CTA collait au bas de l'image sur Wakefield
     et le titre était coupé sur Planéo Conseil. Valeur IDENTIQUE sur les 4 sites —
     c'est ce qui garde les quatre surtitres à la même hauteur. */
  --pl-hero-top:40px;     /* du haut du héros au texte de localisation */
  --pl-corner-bottom:42px; /* pastille / bande, distance au bas */
}

.hero{ align-items:flex-start; align-content:start; }
/* ⚠️ viser le CONTENEUR seulement : sur Wakefield, .hero-copy est le
   paragraphe d'accroche, pas le bloc — l'inclure décalait le texte de 190 px. */
.hero > .hero-content{
  padding-top:var(--pl-hero-top);
  padding-left:var(--pl-pad-x);
  padding-right:var(--pl-pad-x);
  padding-bottom:0;
  transform:none;          /* annule les décalages ajoutés site par site */
}

/* Hero H1 — gptsite model clamps (no min(svh)).
   Model index.BuLBae7Z.css: clamp(66px,9vw,136px) lh .88 / mobile clamp(56px,18vw,84px). */
.hero h1{
  max-width:920px;
  font-size:clamp(66px, 9vw, 136px);
  line-height:.88;
  letter-spacing:-.045em;
}
/* L'accroche doit s'arrêter avant la bande de faits. */
.hero .hero-intro{ max-width:490px; }
/* Hero facts: model uses display:flex + a single horizontal inset so the white
   box hugs the 3 columns. style.css used to force `right` at 0,2,0 specificity,
   which overrode prototype's ≤1080px `right:auto` and — with `left` still set —
   stretched the bar full-width (VPS bug vs gptsite). Mirror model insets. */
.hero .hero-facts{
  bottom:var(--pl-corner-bottom);
  top:auto;
  right:var(--pl-pad-x);
  left:auto;
  width:max-content;
}
@media (max-width:1080px){
  .hero .hero-facts{ left:var(--pl-pad-x); right:auto; }
}
@media (max-width:760px){
  :root{ --pl-hero-top:130px; }
  .hero h1{ font-size:clamp(56px, 18vw, 84px); }
  .hero .hero-intro{ max-width:none; }
  /* Mobile: prototype stretches left+right:16px — keep width auto */
  .hero .hero-facts{ left:16px; right:16px; width:auto; }
}

/* ==================================================================
   L1-FIX — 2026-09-10 · commentaire de Jean-François
   « Sur iPhone, le rectangle d'informations embarque au-dessus du texte »

   MESURE à 375×667 : l'accroche finissait à 550px du haut du héros, la bande
   de faits commençait à 509px → 41px de RECOUVREMENT. Le texte passait dessous.
   Se dégageait de lui-même à partir de 390px de large.

   CAUSE : .hero-facts est en position:absolute, calée à 42px du bas du héros,
   et pleine largeur sous 760px. Quand la fenêtre est courte, le texte — ancré
   en haut à 130px — descend jusque dans la bande.

   CORRECTIF : le héros s'étire pour contenir son contenu, et le bloc de texte
   réserve la place de la bande. Même patron que le W-FIX de Wakefield.
   Portée ≤760px : le desktop n'est pas touché.

   Après correctif : 375×667 → −117px · 390×844 → −129px · 430×932 → −141px
   (négatif = espace libre). Desktop 1512 inchangé.
   ================================================================== */
@media (max-width:760px){
  .hero{ height:auto; min-height:clamp(560px, calc(100svh - 88px), 900px); }
  .hero > .hero-content{ padding-bottom:calc(var(--pl-corner-bottom) + 116px); }
}

/* ==================================================================
   L3-FIX + L4-FIX — 2026-09-10 · demandes de Jean-François
   L3 : « une section similaire à celle de Wakefield pour la carte
         interactive des Domaines du lac Bernard »
   L4 : « une barre flottante qui reste fixe lors du déroulement, pour
         appeler ou planifier une visite, comme sur Wakefield »

   La section #carte EXISTAIT déjà (image du plan + 4 boutons de
   téléchargement) : on n'en crée pas une nouvelle, on y ajoute la façade
   clic-pour-charger. Mêmes classes que Wakefield (.carte-facade,
   .carte-charger, .cta-mobile) pour que les deux sites restent jumeaux.
   ================================================================== */

/* ---- L3 : façade de la carte ---- */
.carte-facade{ position:relative; overflow:hidden; background:#17352c; }
.carte-facade > img{ display:block; width:100%;
  /* ⛔ hauteur EXPLICITE obligatoire : l'image est en loading="lazy" et la façade
     s'effondrait à 0px avant son chargement — le bouton, en position absolue à 50 %,
     se retrouvait sur une boîte vide. Même valeur que Wakefield. */
  height:clamp(340px,60svh,560px); object-fit:cover;
  opacity:.62; transition:opacity .4s; }
.carte-facade:hover > img{ opacity:.78; }
.carte-charger{ position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); cursor:pointer; border:0; }
.carte-confidentialite{ position:absolute; bottom:14px; left:0; right:0;
  text-align:center; color:#ffffffc4; font-size:12px; letter-spacing:.06em; margin:0; }
.carte-facade iframe{ display:block; width:100%; height:clamp(380px,65svh,640px); border:0; }

/* ---- L4 : barre flottante mobile ---- */
.cta-mobile{ display:none; }
@media (max-width:760px){
  .cta-mobile{ position:fixed; z-index:60; bottom:0; left:0; right:0; display:flex;
    box-shadow:0 -6px 24px #17352c33; padding-bottom:env(safe-area-inset-bottom); }
  .cta-mobile a{ flex:1; display:grid; place-items:center; min-height:50px;
    padding:15px 8px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
    text-decoration:none; white-space:nowrap; background:var(--paper,#f4f2ea); color:var(--ink,#17352c); }
  .cta-mobile .cta-mobile-visite{ background:var(--ink,#17352c); color:#fff; }
  /* réserve la hauteur de la barre pour que le bas de page reste atteignable */
  body{ padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
}


/* ==================================================================
   L5-FIX — 2026-09-11 · titre du héros trop gros sur portable

   SIGNALÉ par Patrick (MacBook Air M5, 1470x956 CSS, fenêtre ~1330 de large) :
   « il ne coupe pas, mais le texte est un peu trop gros ».

   MESURE (CDP, live) : 1300→117px · 1400→126px · ≥1512→136px (plafond).
   Le titre atteint 136px dans une boîte plafonnée à 920px : il tombe alors
   sur 4 lignes et écrase le reste du héros.

   ⚠️ ÉCART ASSUMÉ AVEC LE MODÈLE gptsite, qui utilise clamp(66px,9vw,136px).
   On descend le coefficient et le plafond ; le plancher 66px est conservé,
   donc rien ne change sous 900px de large. Les trois autres sites ne sont pas
   touchés — le contrat d'alignement porte sur --pl-hero-top, pas sur la taille
   du titre.
   ================================================================== */
@media (min-width:761px){
  .hero h1{ font-size:clamp(62px, 6.9vw, 104px); }
}

/* ==================================================================
   LANGUE-MOBILE · 2026-10-04 · sélecteur FR / EN visible en portrait

   Signalé par JF (client au Home Show d'Ottawa, iPhone en portrait) :
   sous 760 px, le modèle masquait .header-actions et .language. Comme
   sur Groupe et Conseil, FR / EN reste dans l'en-tête, à gauche du menu ;
   « Planifier une visite » reste dans le menu et dans la barre du bas.
   Cible tactile de 44 px (recommandation d'Apple).
   ================================================================== */
@media (max-width:760px){
  .site-header { grid-template-columns: 1fr auto auto; column-gap: 4px; }
  .header-actions { display: flex; gap: 0; }
  .header-actions .visit-link { display: none; }
  .header-actions .language { display: inline-block; line-height: 44px; padding: 0 5px; white-space: nowrap; font-size: 11px; letter-spacing: .12em; }
}
@media (max-width:359px){
  .site-header .brand-logo { width: 140px; }
}