@charset 'utf-8';/**
 * Page d'accueil — refonte 2026
 * Complete page_home.css, qui garde le diaporama de fond et son zoom lent.
 *
 * Chaque selecteur est prefixe par #PAGE_HOME, pour deux raisons :
 *  - ne rien changer sur les autres pages ;
 *  - passer devant les regles generiques de _common.css, dont la specificite
 *    (html:not(.isADMIN) h1) depasse celle d'une simple classe.
 */

/** ------------------------------------------------------------- le chassis
 *
 * Le gabarit d'origine affiche le contenu dans une boite en position absolue
 * qui couvre l'ecran et defile pour son propre compte. Une page en sections
 * successives doit defiler normalement : on rend le flux a la page.
 * Le fond photo est deja en position:fixed, il reste derriere.
 */

#PAGE_HOME #contain,
#PAGE_HOME #content,
#PAGE_HOME #wrap_main {
	display:block;
	height:auto;
}

#PAGE_HOME #main {
	height:auto;
	overflow:visible;
}

#PAGE_HOME #_str,
#PAGE_HOME #_str.full {
	position:static;
	overflow:visible;
	top:auto;
	bottom:auto;
	left:auto;
	right:auto;
	max-width:none;
	font-size:17px;
}

#PAGE_HOME #_str.full > div {
	padding:0;
}

#PAGE_HOME #_str .bloc > * {
	background-color:transparent;
}

/** ------------------------------------------------------------------ hero */

#PAGE_HOME .h_hero {
	position:relative;
	min-height:76vh;
	display:flex;
	align-items:flex-end;
	padding:0 var(--marge) 56px;
	color:#fff;
}

#PAGE_HOME .h_hero:before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top, rgba(28,22,17,.82) 0%, rgba(28,22,17,.30) 45%, rgba(28,22,17,.04) 75%, rgba(28,22,17,.30) 100%);
}

#PAGE_HOME .h_hero > div {
	position:relative;
	max-width:1120px;
	margin:0 auto;
	width:100%;
}

#PAGE_HOME .h_hero h1 {
	font-family:var(--display);
	font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 144;
	font-weight:600;
	font-size:clamp(40px,7.6vw,96px);
	line-height:.98;
	letter-spacing:-.022em;
	margin:0 0 20px;
	max-width:16ch;
	color:#F6F1E6;
	text-shadow:0 2px 3px rgba(0,0,0,.45);
}

#PAGE_HOME .h_hero h1 em {
	font-style:italic;
	color:var(--miel);
}

#PAGE_HOME .h_hero p {
	font-size:clamp(17px,2.1vw,21px);
	max-width:46ch;
	margin:0;
	color:rgba(255,255,255,.92);
}

/** -------------------------------------------------------- barre pratique */

#PAGE_HOME .h_pratique {
	background:var(--suie);
	color:#F0EAE0;
	padding:14px var(--marge);
	font-size:14.5px;
}

#PAGE_HOME .h_pratique > div {
	max-width:1120px;
	margin:0 auto;
	display:flex;
	align-items:center;
	gap:20px;
	flex-wrap:wrap;
}

#PAGE_HOME .h_pratique .ouvert {
	display:inline-flex;
	align-items:center;
	gap:8px;
	font-weight:700;
	color:#fff;
}

/** la pastille suit l'etat du moment :
 *  vert ouvert, orange dans la derniere heure, rouge ferme */

#PAGE_HOME .h_pratique .ouvert.etat_bientot i {
	background:#D9A03C;
	box-shadow:0 0 0 3px rgba(217,160,60,.28);
}

#PAGE_HOME .h_pratique .ouvert.etat_ferme i {
	background:#B8431E;
	box-shadow:0 0 0 3px rgba(184,67,30,.25);
}

#PAGE_HOME .h_pratique .ouvert.etat_ferme {
	color:rgba(240,234,224,.78);
}

#PAGE_HOME .h_pratique .ouvert i {
	display:block;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#8FBF6A;
	box-shadow:0 0 0 3px rgba(143,191,106,.25);
}

#PAGE_HOME .h_pratique a {
	color:var(--miel);
	font-weight:700;
	text-decoration:none;
}

/** --------------------------------------------------------------- sections */

#PAGE_HOME .h_section {
	position:relative;
	padding:clamp(56px,8vw,110px) var(--marge);
	background:var(--panneau);
}

#PAGE_HOME .h_section.creme {
	background:var(--calcaire);
}

#PAGE_HOME .h_section > div {
	max-width:1120px;
	margin:0 auto;
}

#PAGE_HOME .h_section + .h_section {
	border-top:1px solid var(--pierre);
}

#PAGE_HOME .h_section h2 {
	font-family:var(--display);
	font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 90;
	font-weight:600;
	font-size:clamp(28px,4.2vw,46px);
	line-height:1.08;
	letter-spacing:-.018em;
	margin:0 0 18px;
	color:var(--suie);
}

#PAGE_HOME .h_section p {
	font-size:17px;
	line-height:1.65;
}

#PAGE_HOME .surtitre,
#PAGE_HOME .quand {
	font-family:var(--texte);
	font-size:11px;
	font-weight:700;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:var(--braise);
	margin:0 0 12px;
}

/** ---------------------------------------------------------- mot du moment */

#PAGE_HOME .h_actu {
	position:relative;
	background:var(--panneau);
	padding:clamp(40px,5vw,72px) var(--marge);
}

#PAGE_HOME .h_actu > div {
	max-width:1120px;
	margin:0 auto;
	display:grid;
	grid-template-columns:auto 1fr;
	gap:clamp(24px,4vw,56px);
}

/* plus gros que les autres surtitres : il voisine avec un texte courant de
   18 a 22 px, et a 11 px il semblait egare a cote */
#PAGE_HOME .h_actu .etiquette {
	font-size:14px;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--braise);
	white-space:nowrap;
	padding-top:6px;
	margin:0;
}

#PAGE_HOME .h_actu .rCSS {
	font-size:18px;
	max-width:62ch;
}

/** ------------------------------------------------------------- manifeste */

#PAGE_HOME .h_manifeste {
	position:relative;
	background:var(--suie);
	color:#F2ECE2;
	padding:clamp(64px,9vw,128px) var(--marge);
}

#PAGE_HOME .h_manifeste > div {
	max-width:1120px;
	margin:0 auto;
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:clamp(32px,6vw,80px);
	align-items:end;
}

#PAGE_HOME .h_manifeste .titre p {
	font-family:var(--display);
	font-variation-settings:"SOFT" 70,"WONK" 1,"opsz" 144;
	font-weight:600;
	font-size:clamp(36px,6.2vw,76px);
	line-height:.98;
	letter-spacing:-.025em;
	margin:0;
}

#PAGE_HOME .h_manifeste .barre {
	display:block;
	color:rgba(242,236,226,.34);
	text-decoration:line-through;
	text-decoration-thickness:2px;
	text-decoration-color:rgba(217,160,60,.7);
}

#PAGE_HOME .h_manifeste .oui {
	display:block;
	color:var(--miel);
	margin-top:.12em;
}

#PAGE_HOME .h_manifeste .texte p {
	color:rgba(242,236,226,.82);
	max-width:42ch;
	font-size:17px;
}

/** ----------------------------------------------------------------- cartes */

#PAGE_HOME .h_cartes {
	display:grid;
	gap:2px;
	background:var(--pierre);
	margin-top:40px;
}

#PAGE_HOME .h_cartes.trois {
	grid-template-columns:repeat(3,1fr);
}

#PAGE_HOME .h_cartes.quatre {
	grid-template-columns:repeat(4,1fr);
}

#PAGE_HOME .h_cartes > div {
	background:var(--panneau);
	padding:30px 28px;
}

#PAGE_HOME .h_section.creme .h_cartes > div {
	background:var(--calcaire);
}

#PAGE_HOME .h_cartes h3 {
	font-family:var(--display);
	font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
	font-weight:600;
	font-size:21px;
	line-height:1.18;
	margin:0 0 10px;
	color:var(--suie);
}

#PAGE_HOME .h_cartes p {
	margin:0 0 10px;
	font-size:15.5px;
	color:var(--suie-clair);
	line-height:1.6;
}

#PAGE_HOME .h_cartes .quand {
	margin:0 0 8px;
}

/** ---------------------------------------------------------- respiration */

#PAGE_HOME .h_respiration {
	position:relative;
	padding:clamp(70px,10vw,120px) var(--marge);
	text-align:center;
	color:#fff;
	background:rgba(28,22,17,.62);
}

#PAGE_HOME .h_respiration .citation {
	font-family:var(--display);
	font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 144;
	font-weight:400;
	font-size:clamp(26px,4.4vw,48px);
	line-height:1.14;
	letter-spacing:-.015em;
	margin:0 auto;
	max-width:26ch;
	color:#F6F1E6;
	text-shadow:0 2px 3px rgba(0,0,0,.4);
}

#PAGE_HOME .h_respiration .source {
	margin:22px 0 0;
	font-size:12px;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--miel);
}

#PAGE_HOME .h_respiration .mh {
	display:grid;
	place-items:center;
	width:56px;
	height:56px;
	border-radius:50%;
	background:var(--calcaire);
	margin:26px auto 0;
	box-shadow:0 3px 14px rgba(0,0,0,.35);
}

#PAGE_HOME .h_respiration .mh span {
	display:block;
	width:34px;
	height:34px;
	background:url('img/logo_sitehisto.png') left top no-repeat;
	background-size:34px 68px;
}

/** --------------------------------------------------------------- recits */

#PAGE_HOME .h_recit {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:clamp(28px,5vw,64px);
	align-items:center;
	margin-top:44px;
}

#PAGE_HOME .h_recit + .h_recit {
	margin-top:clamp(40px,6vw,76px);
	padding-top:clamp(40px,6vw,76px);
	border-top:1px solid var(--pierre);
}

#PAGE_HOME .h_recit h3 {
	font-family:var(--display);
	font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 70;
	font-weight:600;
	font-size:clamp(24px,3.2vw,36px);
	line-height:1.1;
	margin:0 0 14px;
	color:var(--suie);
}

#PAGE_HOME .h_recit p {
	color:var(--suie-clair);
	margin:0 0 18px;
}

#PAGE_HOME .h_recit img {
	max-width:100%;
	height:auto;
	border-radius:var(--rayon);
}

/** ------------------------------------------------------ preparer sa visite */

#PAGE_HOME .h_visite {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:clamp(26px,4vw,52px);
	margin-top:44px;
}

#PAGE_HOME .h_visite h3 {
	font-family:var(--display);
	font-variation-settings:"opsz" 40;
	font-weight:700;
	font-size:19px;
	margin:0 0 16px;
	padding-bottom:12px;
	border-bottom:2px solid var(--suie);
	color:var(--suie);
}

#PAGE_HOME .h_visite table {
	width:100%;
	border-collapse:collapse;
	font-size:15.5px;
}

#PAGE_HOME .h_visite td {
	padding:9px 0;
	border-bottom:1px solid var(--pierre);
	vertical-align:top;
}

#PAGE_HOME .h_visite td:first-child {
	font-weight:600;
}

#PAGE_HOME .h_visite td:last-child {
	text-align:right;
	color:var(--suie-clair);
}

#PAGE_HOME .h_visite .note {
	margin-top:18px;
	font-size:15px;
	color:var(--suie-clair);
}

#PAGE_HOME .h_visite .encart {
	margin-top:20px;
	padding:18px 20px;
	background:rgba(111,122,98,.13);
	border-left:2px solid var(--lichen);
	font-size:15.5px;
	line-height:1.6;
}

#PAGE_HOME .h_visite .encart strong {
	display:block;
	margin-bottom:5px;
}

#PAGE_HOME .a-completer {
	border-bottom:2px dashed var(--braise);
	color:var(--braise);
	font-weight:700;
}

/** ------------------------------------------------------------- galerie */

#PAGE_HOME .cartes {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:2px;
	background:var(--pierre);
	margin-top:40px;
}

#PAGE_HOME .cartes .carte {
	background:var(--panneau);
	padding:30px 28px;
}

#PAGE_HOME .h_section.creme .cartes .carte {
	background:var(--calcaire);
}

#PAGE_HOME .cartes h3 {
	font-family:var(--display);
	font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 40;
	font-weight:600;
	font-size:21px;
	margin:0 0 10px;
}

#PAGE_HOME .cartes p {
	margin:0;
	font-size:15.5px;
	color:var(--suie-clair);
}

/** -------------------------------------------------------------- famille */

#PAGE_HOME .h_famille .signature {
	font-family:var(--display);
	font-variation-settings:"SOFT" 80,"WONK" 1,"opsz" 40;
	font-style:italic;
	font-size:clamp(20px,2.6vw,27px);
	line-height:1.45;
	margin:0 0 22px;
	color:var(--suie);
}

#PAGE_HOME .h_famille .prenoms {
	font-size:15px;
	color:var(--suie-clair);
	letter-spacing:.04em;
}

#PAGE_HOME .h_famille > div > div {
	max-width:62ch;
}

/** ------------------------------------------------------------- adaptatif */

@media screen and (max-width:1000px) {

	#PAGE_HOME .h_manifeste > div,
	#PAGE_HOME .h_recit {
		grid-template-columns:1fr;
	}

	#PAGE_HOME .h_cartes.trois,
	#PAGE_HOME .h_cartes.quatre,
	#PAGE_HOME .h_visite,
	#PAGE_HOME .cartes {
		grid-template-columns:1fr 1fr;
	}

}

@media screen and (max-width:640px) {

	#PAGE_HOME .h_cartes.trois,
	#PAGE_HOME .h_cartes.quatre,
	#PAGE_HOME .h_visite,
	#PAGE_HOME .cartes {
		grid-template-columns:1fr;
	}

	#PAGE_HOME .h_actu > div {
		grid-template-columns:1fr;
		gap:12px;
	}

	#PAGE_HOME .h_actu .etiquette {
		padding-top:0;
	}

	#PAGE_HOME .h_hero {
		min-height:68vh;
	}

}



/** Les boutons Admin et Deconnexion n'apparaissent que pour une personne
 *  connectee, jamais pour un visiteur. Ils encombraient la barre : on les
 *  retire de la page publique. L'administration reste accessible par son
 *  adresse directe, et la deconnexion depuis l'administration.
 */

/** aucune entree ne doit changer de dimensions au survol : c'est ce qui
 *  faisait monter et descendre la barre. */
#PAGE_HOME #contain #content .menu li > a,
#PAGE_HOME #contain #content .menu li:hover > a {
	line-height:1.3;
	border:0;
	margin:0;
	min-width:0;
	text-shadow:none !important;
}

/** la barre garde la meme hauteur au survol : plus de saut */

#PAGE_HOME #content,
#PAGE_HOME #content:hover {
	background-color:var(--panneau);
}

#PAGE_HOME #content_prim > li {
	display:flex;
	align-items:center;
}

/** ------------------------------------------- fleches de navigation rapide
 *
 * #content_quick place ses fleches en absolu par rapport au conteneur
 * positionne le plus proche. L'accueil ne passe plus par la boite du
 * gabarit d'origine : elles se retrouvaient au milieu du contenu.
 *
 * Sur l'accueil elles font de toute facon doublon avec le menu, qui donne
 * acces a tout depuis le haut de la page. Elles restent en place sur les
 * pages interieures, ou elles servent a passer d'une page a la suivante.
 */

#PAGE_HOME #content_quick {
	display:none;
}

/** ====================================================== tablette et mobile
 *
 * Sous 600 px, le gabarit d'origine reduit le fond a une bande de 200 px
 * (#bg { position:relative; height:200px }) : la photo n'occupait plus que
 * le haut de l'ecran et le hero se detachait sur un aplat gris.
 *
 * L'accueil garde son image plein cadre, fixee derriere le contenu.
 */

@media screen and (max-width:600px) {

	#PAGE_HOME #bg {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:hidden;
		z-index:-2;
	}

	#PAGE_HOME #bg,
	#PAGE_HOME #bg .bg,
	#PAGE_HOME #bg .bg_slider,
	#PAGE_HOME #bg .bg_slide {
		height:100%;
	}

}

@media screen and (max-width:760px) {

	#PAGE_HOME .h_hero {
		min-height:74vh;
		padding-bottom:36px;
	}

	#PAGE_HOME .h_hero h1 {
		font-size:clamp(34px,10vw,52px);
	}

	#PAGE_HOME .h_pratique > div {
		gap:6px 14px;
		font-size:14px;
	}

	/* les largeurs de lecture en « ch » depassent l'ecran sur telephone */
	#PAGE_HOME .h_hero p,
	#PAGE_HOME .h_manifeste .texte p,
	#PAGE_HOME .h_actu .rCSS,
	#PAGE_HOME .h_section p {
		max-width:100%;
	}

	#PAGE_HOME .h_pratique .rCSS p {
		display:flex;
		flex-wrap:wrap;
		gap:4px 14px;
	}

	#PAGE_HOME .h_manifeste .titre p {
		font-size:clamp(30px,9vw,44px);
	}

}

/** ---------------------------------------------------- fond photo mobile
 *
 * Le gabarit d'origine reduit le fond a une bande de 200 px sous 600 px de
 * large. La refonte s'appuie sur une photo pleine hauteur derriere le hero :
 * on la retablit.
 */

@media screen and (max-width:600px) {

	#PAGE_HOME #bg {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}

	#PAGE_HOME #bg,
	#PAGE_HOME #bg .bg {
		height:100%;
	}

	#PAGE_HOME .h_hero {
		min-height:74vh;
	}

	/* le texte etait limite a 46 caracteres, soit plus large qu'un telephone :
	   la page debordait, et tout ce qui est cale a droite — dont le bouton du
	   menu — sortait de l'ecran. */
	#PAGE_HOME .h_hero p,
	#PAGE_HOME .h_hero h1 {
		max-width:100%;
	}

	#PAGE_HOME .h_hero h1 {
		font-size:clamp(32px,11vw,46px);
	}

	#PAGE_HOME .h_hero p {
		font-size:16px;
	}

}