/* ============================================================
   Refonte 2026 — habillage (fond + entête + cartes).
   Chargée EN DERNIER : ne modifie que l'apparence, jamais la
   structure (largeurs, flottants) de styles_normal.css.
   Pour tout annuler : retirer le <link> dans index.php.
   ============================================================ */

/* --- Fond : la crique de Brézellec, blanchie, plein écran et fixe --- */
/* Voile blanc (les deux rgba) : monter pour blanchir, baisser pour voir plus la photo. */
html{
	background:
		linear-gradient(rgba(253,250,244,.50), rgba(253,250,244,.58)),
		url(images/fond_crique_clair.jpg) center center / cover fixed no-repeat;
}

/* Body sans fond ni bordure ; colonne élargie et centrée (fini le 800 px figé). */
body{
	background: transparent;
	border: none;
	width: auto;
	max-width: 1120px;
	padding: 0 38px;                  /* plus d'air sur les côtés (menu pas collé au bord) */
}

/* --- Entête : la photo avec un dégradé blanc, logo à sa taille d'origine --- */
div.haut{
	position: relative;
	overflow: hidden;                 /* contient le logo flottant */
	padding: 29px 0 0 0;
	width: auto;                      /* toute la largeur des deux colonnes (annule le 850px hérité) */
	height: auto;                     /* annule la hauteur fixe de 210px de styles_normal */
	background: transparent;          /* pas de 2e photo : on laisse voir l'unique fond de page */
	border-bottom: 4px solid rgb(192,3,0);   /* rouge du blason */
	box-shadow: 0 4px 0 0 #d8a63c;           /* or du blason, juste dessous */
}
div.haut img{ display: block; margin-bottom: 29px; }  /* remonte le filet vers le logo */
/* Pas de dégradé sur l'entête : le logo se pose directement sur le fond de page,
   à sa taille naturelle (pas de height forcé). */

/* Liens rapides en haut à droite (Livre d'or, Contact) avec icône. */
.haut-liens{
	float: right;
	position: relative;
	z-index: 2;
	margin: 0 4px 0 0;
	display: flex;
	gap: 10px;
}
.haut-liens a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(192,3,0,.94);
	color: #fff;
	text-decoration: none;
	padding: 7px 13px;
	border-radius: 6px;
	font-size: .9em;
	box-shadow: 0 1px 5px rgba(0,0,0,.22);
	transition: background .15s ease;
}
.haut-liens a:hover{ background: #8f0200; color:#fff; }
.haut-liens svg{ flex: none; }

/* --- Contenu et menu : cartes translucides, décollées du filet de l'entête --- */
div#contenu{
	background: rgba(255,255,255,.62);
	border-radius: 8px;
	box-shadow: 0 2px 16px rgba(0,0,0,.12);
	margin-top: 21px;                 /* écart avec la barre rouge + or */
	padding: 16px 30px 24px 30px;     /* plus d'air, titre remonté */
	box-sizing: border-box;           /* le padding tient dans la largeur (menu reste à gauche) */
	width: 73%;                       /* un peu plus large -> moins d'écart avec le menu */
}
div#menu{ box-sizing: border-box; }
/* Le menu suit le défilement (plus ergonomique sur les longues pages). Sa hauteur
   est bornée à celle de l'écran et il défile en interne si la liste est trop longue,
   pour qu'on voie toujours le bas du menu. */
div#menu{
	position: sticky;
	top: 14px;
	align-self: flex-start;
	max-height: calc(100vh - 28px);
	overflow-y: auto;
}

/* Puces du menu : petite puce carrée rouge (couleur du blason), plus soignée
   que les ronds gris. On colore la PUCE (::marker), pas le texte — pas de
   ::before qui entrerait en conflit avec la 1re lettre rouge du menu. */
div#menu > ul{ margin-top: 0; }
div#menu li{ list-style: square; }
div#menu li::marker{ color: #c00300; }

/* Menu dépliable (accordéon) : rubriques repliées, dépliées via .ouvert (ajouté par menu.js).
   Sans JavaScript, la classe .depliable n'est pas posée : tout le menu reste visible.
   Toutes les entrées gardent la même puce rouge ; les rubriques ont EN PLUS une
   flèche ▸/▾ pour signaler qu'elles se déplient — présentation homogène. */
div#menu li.depliable > ul{ display: none; }
div#menu li.depliable.ouvert > ul{ display: block; }
div#menu li.depliable > a{ cursor: pointer; }
div#menu li.depliable > a::after{ content: " \25B8"; color: #c00300; font-size: .8em; }   /* ▸ replié */
div#menu li.depliable.ouvert > a::after{ content: " \25BE"; }                              /* ▾ déplié */
div#menu a.actif{ font-weight: 700; }
/* Livre d'or / Contact : dans le menu uniquement sur mobile (sur ordinateur ce sont les pastilles du haut). */
div#menu li.menu-only-mobile{ display: none; }
div#menu{
	background: rgba(255,255,255,.56) !important;  /* remplace l'ancien fond en image */
	border: none;
	margin-top: 21px;                 /* écart avec la barre rouge + or */
	padding: 13px 14px 16px 22px;     /* le texte du menu n'est plus collé à gauche */
	/* coins arrondis + ombre déjà fournis par styles_polish.css */
}

/* --- Visionneuse (grande image filigranée au clic) --- */
.visionneuse{
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,.86);
	opacity: 0; transition: opacity .2s ease;
	cursor: zoom-out; padding: 24px;
}
.visionneuse.ouverte{ opacity: 1; }
.visionneuse img{
	max-width: 94vw; max-height: 92vh; width: auto; height: auto;
	border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.6);
	background: #fff;
}
.visionneuse-fermer{
	position: absolute; top: 14px; right: 22px;
	color: #fff; font-size: 42px; line-height: 1; font-family: Arial, sans-serif;
	cursor: pointer; opacity: .85;
}
.visionneuse-fermer:hover{ opacity: 1; }
.visionneuse-prec, .visionneuse-suiv{
	position: absolute; top: 50%; transform: translateY(-50%);
	color: #fff; font-size: 64px; line-height: 1; font-family: Arial, sans-serif;
	cursor: pointer; opacity: .8; user-select: none; padding: 6px 18px;
}
.visionneuse-prec{ left: 6px; }
.visionneuse-suiv{ right: 6px; }
.visionneuse-prec:hover, .visionneuse-suiv:hover{ opacity: 1; }

/* --- Présentation du contenu : textes et images plus soignés --- */
div#contenu{ font-size: 1.02em; }
div#contenu h1{ margin: .1em 0 .5em; }
/* Titres soignés : h2 souligné d'un filet court rouge + or (couleurs du blason). */
div#contenu h2{
	display: block;
	clear: both;                      /* chaque titre repart proprement à gauche, sous les images précédentes */
	overflow: hidden;                 /* bloc autonome : ne passe pas sous l'image flottante */
	border: none !important;
	color: #b0100e;
	font-size: 1.4em;
	font-weight: 700;
	letter-spacing: .2px;
	margin: 1.5em 0 .7em;
	padding: 0 0 9px 0;
	position: relative;
}
div#contenu h2::after{
	content: "";
	position: absolute; left: 0; bottom: 0;
	width: 68px; height: 3px; border-radius: 2px;
	background: linear-gradient(90deg, #c00300 0 62%, #d8a63c 62% 100%);
}
/* Sous-titres : petit accent doré à gauche. */
div#contenu h3{
	color: #3a3a3a;
	font-size: 1.12em;
	font-weight: 700;
	margin: 1.35em 0 .45em;
	padding-left: 12px;
	border-left: 3px solid #d8a63c;
	line-height: 1.25;
}
div#contenu p{ line-height: 1.65; }
/* Lettrine : capitale rouge couvrant proprement deux lignes */
div#contenu .lettrine{
	float: left;
	width: auto;
	font-size: 3.3em;
	line-height: 0.9;
	margin: 0.05em 0.08em 0 0;
	padding: 0;
	font-weight: 700;
	color: #b0100e;
}
div#contenu p.just{ text-align: justify; }
/* les illustrations : coins arrondis, ombre douce, curseur loupe, léger zoom au survol.
   On NE touche pas au display de l'ancre : elle reste en ligne pour que l'image
   flotte et que le texte l'habille (intégrée au texte). */
img.photo_droite, img.photo_gauche, img.photo_droite_1, img.photo_gauche_1{
	border-radius: 6px;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	cursor: zoom-in;
	transition: transform .15s ease, box-shadow .15s ease;
}
a[rel="lightbox"]:hover img{
	transform: scale(1.015);
	box-shadow: 0 4px 16px rgba(0,0,0,.28);
}

/* --- Téléphone : fond non fixe (évite les saccades), logo centré (réduit par styles_responsive.css) --- */
@media (max-width: 850px){
	/* Fond : la photo en plein écran est mal cadrée sur mobile -> teinte claire unie. */
	html{ background: #f4f1ea; }
	body{ padding: 0 12px; }

	/* Menu burger : on affiche TOUT déplié (pas d'accordéon sur mobile). */
	div#menu{ position: static; max-height: none; overflow: visible; }
	div#menu li.depliable > ul{ display: block !important; }
	div#menu li.depliable > a::after{ content: none; }   /* pas de flèche ▸/▾ */

	div.haut{ text-align: center; }
	/* Colonne principale en pleine largeur (annule le 73% du bureau), padding réduit. */
	div#contenu{ width: 100%; padding: 14px 15px 18px 15px; }
	div#menu{ padding: 10px 12px 12px 16px; }
	/* Sur mobile : pastilles du haut masquées, Livre d'or/Contact affichés dans le burger. */
	.haut-liens{ display: none; }
	div#menu li.menu-only-mobile{ display: list-item; }
	/* Liens du menu : grandes cibles tactiles, faciles à toucher. */
	div#menu a{ display: block; padding: 12px 10px; font-size: 1.1em; line-height: 1.25; border-radius: 5px; }
	div#menu li{ margin: 3px 0; }
	div#menu li li{ margin-left: 6px; }   /* léger retrait des sous-entrées */

	.visionneuse{ padding: 10px; }
	.visionneuse img{ max-width: 96vw; max-height: 88vh; }
	.visionneuse-prec, .visionneuse-suiv{ font-size: 44px; padding: 4px 8px; }
}