@font-face{ font-family:"Parisienne"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/parisienne.woff2") format("woff2"); }
/* ============================================================
   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; }
}

/* --- Livre d'or : un commentaire présenté comme une bulle soignée --- */
/* Les DEUX guillemets sont portés par la citation (blockquote), donc en ROMAIN
   et rigoureusement symétriques : le fermant est l'ouvrant retourné à 180°, posé
   dans le coin opposé aux mêmes coordonnées. (Auparavant le fermant était sur le
   <p> et héritait de son italique, ce qui le penchait et le « rognait ».)
   La pointe (phylactère), simples triangles sans texte, passe sur le <p>. */
div.bulle{ font-size: 0.95em; }
div.bulle blockquote{
	position: relative;
	margin: 20px 0 0 0;
	padding: 18px 54px 28px 54px;
	background: #fffdf8;
	border: 1px solid #e7ddc9;
	border-radius: 12px;
	box-shadow: 0 3px 12px rgba(0,0,0,.10);
}
div.bulle blockquote::before{
	content: "\201C";                    /* guillemet ouvrant, coin haut-gauche */
	position: absolute; left: 16px; top: 16px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3em; line-height: 1; font-style: normal;
	color: #d8a63c; opacity: .9;
}
div.bulle blockquote::after{
	content: "\201C";                    /* fermant = ouvrant retourné, coin bas-droite */
	position: absolute; right: 16px; bottom: 14px; transform: rotate(180deg);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 3em; line-height: 1; font-style: normal;
	color: #d8a63c; opacity: .9;
}
div.bulle blockquote p{ margin: 0; padding: 0; font-style: italic; color: #333; }
/* Pointe de la bulle (bas à droite, du côté de la signature) : bord puis fond. */
div.bulle blockquote p::before{
	content: ""; position: absolute; right: 40px; bottom: -11px;
	border: 11px solid transparent; border-top-color: #e7ddc9; border-bottom: 0;
}
div.bulle blockquote p::after{
	content: ""; position: absolute; right: 41px; bottom: -9px;
	border: 10px solid transparent; border-top-color: #fffdf8; border-bottom: 0;
}
div.bulle cite{
	display: block; position: static; top: auto;
	margin: 20px 6px 0 0; padding: 0; background: none;
	text-align: right; font-style: normal; font-size: 1em; line-height: 1.4;
}
div.bulle cite .cite-nom{ font-weight: 700; color: #b0100e; }
div.bulle cite .cite-nom::before{ content: "— "; color: #d8a63c; font-weight: 400; }
div.bulle cite .cite-date{ margin-left: 7px; color: #6b6b6b; font-size: .86em; }

/* Boutons d'action (livre d'or, agenda, forum…) : pastilles alignées à droite.
   Préfixe div#contenu pour passer devant les règles de lien à base d'id (sinon le
   texte du bouton reste rouge au survol). */
div#contenu p.bloc-actions{
	text-align: right; text-indent: 0;
	margin: 12px 4px 22px 0; font-size: .92em;
}
div#contenu p.bloc-actions a.bouton-lien{
	display: inline-block; padding: 7px 15px;
	border: 1px solid #c00300; border-radius: 6px;
	color: #b0100e; text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
div#contenu p.bloc-actions a.bouton-lien:hover{ background: #c00300; color: #fff; text-decoration: none; }
div#contenu p.bloc-actions a.bouton-lien + a.bouton-lien{ margin-left: 14px; }

/* --- Livre d'or : le formulaire isolé dans sa propre carte, séparé des messages --- */
div#contenu div.commenter{
	background: rgba(255,255,255,.55);
	border: 1px solid #e7ddc9;
	border-radius: 10px;
	padding: 4px 22px 16px;
	margin: 10px 0 26px;
	font-size: 0.9em;
}
div#contenu h2.titre-messages{ margin-top: 4px; }

/* --- Liens de contenu : comportement uniforme sur tout le site --- */
/* Rouge du blason, sans soulignement au repos, souligné et un peu plus foncé au
   survol. Même comportement pour tous les liens de la zone de contenu (texte,
   listes d agenda/villages/forum, pagination, fil d ariane). Les boutons dédiés
   et la navigation (menu, entête, pied) gardent leur propre style. */
div#contenu a{
	color: rgb(192,3,0);
	text-decoration: underline;   /* lien dans un texte : souligné, se distingue d un bouton */
	transition: color .15s ease;
}
div#contenu a:hover{
	color: #8f0200;
	text-decoration: underline;
}

/* --- Liste des villages : index alphabétique + recherche instantanée --- */
input.recherche-village{ width:100%; max-width:360px; padding:8px 12px; border:1px solid #c9c2c1; border-radius:6px; font-size:1em; box-sizing:border-box; }
ul.liste-villages{ list-style:none; margin:14px 0 0 0; padding:0; columns:3 150px; column-gap:26px; }
ul.liste-villages li{ margin:0 0 5px 0; break-inside:avoid; }
p.aucun-village{ color:#6b6b6b; font-style:italic; }

/* --- Contributions villageoises : messages --- */
div#contenu p.contrib-succes{ color:#0a7a2f; font-weight:600; }
div#contenu p.contrib-erreur{ color:#c00300; font-weight:600; }

/* Blocs d accueil (agenda, forum, village au hasard) : le titre ne doit pas
   passer sous la photo flottante (pas de clear ici, contrairement aux articles). */
div#contenu div.newsm h2{ clear: none; overflow: visible; }

/* Formulaires (livre d or, contact, contributions villages) : libellés à gauche,
   sans justification ni indentation (sinon les mots s etalent, surtout sur mobile). */
div#contenu div.commenter p, div#contenu div.contacter p{ text-align: left; text-indent: 0; }

/* Galerie de photos d une fiche village (clic = visionneuse). */
div.galerie-village{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 20px; }
div.galerie-village a{ display:block; line-height:0; }
div.galerie-village img{ height:120px; width:auto; border-radius:6px; box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:zoom-in; transition:transform .15s ease; }
div.galerie-village a:hover img{ transform:scale(1.03); }

/* Crédit affiché sur la photo (si le contributeur l a demandé). */
figure.photo-village{ margin:0; position:relative; line-height:0; }
figure.photo-village figcaption{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); color:#fff; font-size:.72em; line-height:1.25; padding:3px 7px; box-sizing:border-box; border-radius:0 0 6px 6px; }
div#contenu div.commenter label.case-credit{ display:inline; float:none; width:auto; text-align:left; font-weight:normal; }

/* Mention discrète « site non officiel », en cursif, en bas à droite de l entête. */
.mention-officiel{ position:absolute; right:6px; bottom:-3px; font-family:"Parisienne",cursive; font-size:1.5em; color:#8a8a8a; text-transform:lowercase; pointer-events:none; }