/* Le Moulin d'Épouville : feuille de style du site statique.
   Reprend l'apparence de l'ancien thème WordPress « MoulinEpouville » (Skilz, 2015, enfant de Twenty Fifteen) :
   colonne blanche à gauche, contenu sur fond gris clair, bandeaux bleus à bord dentelé, polices Dancing Script et Noto Serif.
   Aucun script : le menu mobile repose sur <details>, le diaporama et la visionneuse sur le CSS. */

@font-face { font-family: "Dancing Script"; src: url(/assets/fonts/dancing-script-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(/assets/fonts/noto-serif-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(/assets/fonts/noto-serif-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url(/assets/fonts/noto-serif-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
	--lien: #91c5da;
	--clair: #b4d9e7;
	--actif: #77bad4;
	--bandeau: #78bad4;
	/* textes bleus assez contrastés sur fond blanc (WCAG AA) : liens du contenu 5,1:1, entrée active du menu 3,5:1 */
	--lien-texte: #2c7697;
	--actif-texte: #3f93b6;
	--fond: #f5f5f5;
	--texte: #333;
	--titre: "Dancing Script", "Brush Script MT", cursive;
	--corps: "Noto Serif", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: 15px; line-height: 1.6; }
img { max-width: 100%; height: auto; border: 0; }
a { color: var(--lien-texte); }
a:hover, a:focus { color: var(--lien); }
:focus-visible { outline: 2px solid var(--actif); outline-offset: 2px; }
h1, h2, h3, h4 { position: relative; font-family: var(--titre); font-weight: 700; color: #222; line-height: 1.25; }
h1 { font-size: 26px; margin: 1.2em 0 .8em; }
h2 { font-size: 22px; }
h3 { font-size: 18px; margin: 2em 0 1em; }
/* tailles des titres de l'ancien thème (Twenty Fifteen), qui diminuent quand la colonne de gauche apparaît */
@media (min-width: 740px) { h1 { font-size: 35px; } h2 { font-size: 29px; } h3 { font-size: 24px; } }
@media (min-width: 955px) { h1 { font-size: 31px; } h2 { font-size: 26px; } h3 { font-size: 22px; } }
@media (min-width: 1100px) { h1 { font-size: 35px; } h2 { font-size: 29px; } h3 { font-size: 24px; } }
@media (min-width: 1240px) { h1 { font-size: 39px; } h2 { font-size: 32px; } h3 { font-size: 27px; } }
p, ul { margin: 0 0 1.6em; }
ul { padding-left: 1.2em; }

.evitement { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: #000; padding: 8px 14px; }
.evitement:focus { left: 8px; top: 8px; }
.bandeau-preversion { position: sticky; top: 0; z-index: 1500; background: #fff3a8; color: #222; text-align: center; padding: 6px 12px; font-size: 14px; border-bottom: 1px solid #e0cf5c; }
.bandeau-preversion a { color: #1a5d78; }

/* ---------- mise en page ---------- */

.site { background: #fff; box-shadow: 0 0 4px #999; max-width: 1403px; margin: 0 auto; min-height: 100vh; }
.colonne { position: relative; background: var(--fond); display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding-bottom: 30px; }

@media (min-width: 955px) {
	.site { display: grid; grid-template-columns: 25% 75%; }
	/* bord dentelé entre la colonne blanche et le contenu */
	.colonne::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22px; background: url(/assets/img/sbr.png) repeat-y; z-index: 20; }
}

/* ---------- colonne de gauche : logo, menu, adresse e-mail ---------- */

.barre { text-align: center; padding: 0 5%; }
.logo { margin: 0; }
.logo a { display: inline-block; }
.logo img { display: block; }
.menu ul, .menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu li, .menu-mobile li { position: relative; font-family: var(--titre); font-weight: 700; }
.menu a, .menu-mobile a { display: block; padding: 10px 0; color: #000; text-decoration: none; font-size: 21px; line-height: 1.4; }
.menu a:hover, .menu-mobile a:hover, .menu a:focus, .menu-mobile a:focus { color: var(--clair); }
.menu a[aria-current], .menu-mobile a[aria-current] { color: var(--actif-texte); }
/* double filet sous chaque entrée, sauf la dernière */
.menu li:not(:last-child)::before, .menu li:not(:last-child)::after,
.menu-mobile li:not(:last-child)::before, .menu-mobile li:not(:last-child)::after {
	content: ""; position: absolute; left: 35%; right: 35%; bottom: 0; border-bottom: 1px solid var(--clair);
}
.menu li:not(:last-child)::after, .menu-mobile li:not(:last-child)::after { bottom: -3px; }
.courriel { font-family: var(--titre); font-weight: 700; font-size: 24px; margin: 18px 0 30px; overflow-wrap: anywhere; }
.courriel a { color: #000; text-decoration: none; }
.courriel a:hover, .courriel a:focus { color: var(--clair); }

/* téléphone et tablette : logo et bouton de menu en haut, menu replié */
@media (max-width: 954.98px) {
	.barre { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 10px 16px; border-bottom: 1px solid #eee; text-align: left; }
	.logo img { width: 150px; }
	.barre > .menu { display: none; }
	.courriel { grid-column: 1 / -1; text-align: center; margin: 6px 0 4px; font-size: 20px; }
	.menu-mobile summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 3px; font-family: var(--corps); font-size: 14px; color: #333; }
	.menu-mobile summary::-webkit-details-marker { display: none; }
	.menu-mobile-icone, .menu-mobile-icone::before, .menu-mobile-icone::after { display: block; width: 20px; height: 2px; background: #333; position: relative; }
	.menu-mobile-icone::before, .menu-mobile-icone::after { content: ""; position: absolute; left: 0; }
	.menu-mobile-icone::before { top: -6px; }
	.menu-mobile-icone::after { top: 6px; }
	.menu-mobile[open] summary { background: var(--fond); }
	.menu-mobile[open] { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
	.menu-mobile[open] nav { margin-top: 8px; text-align: center; }
	.menu-mobile[open] { width: 100%; display: flex; flex-direction: column; align-items: flex-end; }
	.menu-mobile[open] nav { align-self: stretch; }
}
@media (min-width: 955px) {
	.barre { padding-top: 40px; }
	.logo { margin: 0 0 30px; }
	.menu-mobile { display: none; }
}

/* ---------- accueil : phrases en bandeau, diaporama ---------- */

.infos-haut { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 12px 30px 14px 46px; background: var(--bandeau); color: #fff; font-family: var(--titre); font-weight: 700; text-align: center; z-index: 10; }
.infos-haut ul { list-style: none; margin: 0; padding: 0; }
.infos-haut li { display: block; font-size: 26px; line-height: 1.15; }
@media (min-width: 955px) { .infos-haut li { font-size: 35px; line-height: 1em; } }
/* bord dentelé sous les bandeaux */
.infos-haut::after, .bandeau::after { content: ""; position: absolute; left: 0; right: 0; bottom: -27px; height: 27px; background: url(/assets/img/hb.png) repeat-x; z-index: 10; }

.diaporama { position: relative; margin: 14px 26px 0 32px; }
@media (max-width: 954.98px) { .diaporama { margin: 14px 0 0; } }
.diapos { position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 1000 / 488; overflow: hidden; background: #2f4e5a; }
.diapos li { position: absolute; inset: 0; opacity: 0; overflow: hidden; animation: diapo 28s infinite; }
.diapos li:first-child { opacity: 1; }
/* photo entière, sans déformation ni recadrage (l'ancien diaporama étirait les photos pour remplir le cadre) ; les côtés
   laissés libres par une photo moins large que le cadre montrent la même photo, floutée (règles générées par build.py) */
.diapos li::before { content: ""; position: absolute; inset: -30px; background: center / cover no-repeat; filter: blur(18px) brightness(.85); }
.diapos img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
/* 7 photos, 4 secondes chacune, fondu d'une seconde */
.diapos li:nth-child(2) { animation-delay: 4s; }
.diapos li:nth-child(3) { animation-delay: 8s; }
.diapos li:nth-child(4) { animation-delay: 12s; }
.diapos li:nth-child(5) { animation-delay: 16s; }
.diapos li:nth-child(6) { animation-delay: 20s; }
.diapos li:nth-child(7) { animation-delay: 24s; }
@keyframes diapo {
	0% { opacity: 0; }
	3.6% { opacity: 1; }
	14.3% { opacity: 1; }
	17.9% { opacity: 0; }
	100% { opacity: 0; }
}
.diapos li:first-child { animation-name: diapo-premiere; }
@keyframes diapo-premiere {
	0% { opacity: 1; }
	14.3% { opacity: 1; }
	17.9% { opacity: 0; }
	96.4% { opacity: 0; }
	100% { opacity: 1; }
}
.diaporama-pause { position: absolute; opacity: 0; width: 1px; height: 1px; }
.diaporama-bouton { position: absolute; right: 10px; bottom: 10px; z-index: 5; cursor: pointer; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; padding: 4px 10px; border-radius: 3px; }
.diaporama-relancer { display: none; }
.diaporama-pause:checked ~ .diaporama-bouton .diaporama-arreter { display: none; }
.diaporama-pause:checked ~ .diaporama-bouton .diaporama-relancer { display: inline; }
.diaporama-pause:checked ~ .diapos li, .diaporama:hover .diapos li { animation-play-state: paused; }
.diaporama-pause:focus-visible ~ .diaporama-bouton { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.diapos li { animation: none; }
	.diaporama-bouton { display: none; }
}

.accueil-texte { margin: 50px 40px 0 60px; font-size: 17px; }
@media (max-width: 954.98px) { .accueil-texte { margin: 30px 16px 0; } }

/* cartes Cérémonie, Vin d'honneur, Repas de mariage */
.block-pres { display: flex; flex-wrap: wrap; margin: 0 -10px 1.6em; }
.block-pres .col { width: 100%; padding: 0 10px 20px; }
@media (min-width: 955px) { .block-pres .col { width: 33.33%; } }
.block-pres .block { background: #fff; text-align: center; padding: 0 0 15px; font-size: 0; height: 100%; }
.accueil-texte .block-pres h2 { margin: 0; padding-bottom: 0; font-size: 32px; line-height: 68px; }
@media (max-width: 1100px) { .accueil-texte .block-pres h2 { font-size: 26px; } }
.block-pres img { display: block; width: 100%; }
.block-pres p { font-size: 14px; padding: 15px; margin: 0; }
.dot { display: inline-block; width: 6px; height: 6px; margin: 0 4px; background: url(/assets/img/dot.png); }

/* ---------- pages intérieures : bandeau-titre et cadre blanc ---------- */

.bandeau { position: relative; display: flex; align-items: center; justify-content: center; height: 250px; padding: 0 20px 0 42px; background: var(--bandeau) center / cover no-repeat; text-align: center; z-index: 10; }
.bandeau-titre { margin: 0; color: #fff; font-family: var(--titre); font-weight: 700; font-size: 44px; line-height: .95; text-shadow: -1px 2px 6px #000; }
@media (min-width: 620px) { .bandeau-titre { font-size: 66px; } }
@media (min-width: 955px) { .bandeau-titre { font-size: 88px; } }
@media (max-width: 954.98px) { .bandeau { padding-left: 20px; height: 200px; } }

.cadre { font-size: 17px; }
.cadre-int { margin: 60px 60px 0 80px; padding: 10px 30px 20px; background: #fff; }
.cadre-content { margin: 50px 40px 0 60px; }
@media (max-width: 954.98px) {
	.cadre-int { margin: 27px 0 0; padding: 10px 16px 20px; }
	.cadre-content { margin: 30px 16px 0; }
}
/* intertitres soulignés d'un double filet */
.cadre h2, .accueil-texte h2 { padding-bottom: 3px; margin: 32px 0; }
.cadre h2::before, .cadre h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--clair); }
.cadre h2::after { bottom: 3px; }
.block-pres h2::before, .block-pres h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--clair); }
.block-pres h2::after { bottom: 3px; }

/* texte et photo côte à côte (anciens tableaux de mise en page) */
.duo { display: flex; align-items: center; gap: 20px; margin: 0 0 1.6em; }
.duo-photo, .duo-texte { flex: 1 1 0; text-align: center; }
.duo .text { display: inline-block; max-width: 300px; font-size: 14px; text-align: justify; }
.duo .text h2 { margin: 32px 0; text-align: left; }
@media (max-width: 954.98px) {
	.duo { flex-direction: column; }
	.duo-photo, .duo-texte { flex: none; width: 100%; }
	.duo .text { max-width: none; }
}
/* pointe de losange blanc entre la photo et le texte */
.pin-left, .pin-right { position: relative; display: inline-block; }
.pin-left::after, .pin-right::after { content: ""; position: absolute; top: 50%; right: -10px; width: 20px; height: 20px; margin-top: -10px; background: #fff; transform: rotate(45deg); box-shadow: 0 0 2px rgba(0, 0, 0, .2); }
.pin-left::after { right: auto; left: -10px; }
.pin-left img, .pin-right img { display: block; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* ---------- galeries et visionneuse ---------- */

.galerie { display: grid; grid-template-columns: repeat(var(--colonnes, 4), minmax(0, 1fr)); gap: 16px; list-style: none; margin: 30px 0 10px; padding: 0; }
.galerie-4 { --colonnes: 4; }
.galerie-5 { --colonnes: 5; }
@media (max-width: 700px) { .galerie-4, .galerie-5 { --colonnes: 3; } }
@media (max-width: 420px) { .galerie-4, .galerie-5 { --colonnes: 2; } }
.galerie a { display: block; }
.galerie img { display: block; width: 100%; max-width: 150px; margin: 0 auto; }
.agrandir { display: inline-block; cursor: zoom-in; }

.visionneuse { display: none; }
.visionneuse:target { display: flex; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.visionneuse-fond { position: absolute; inset: 0; background: rgba(20, 30, 35, .9); cursor: zoom-out; }
.visionneuse-cadre { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.visionneuse-cadre img { max-height: calc(100vh - 110px); width: auto; max-width: 100%; object-fit: contain; background: #fff; padding: 6px; box-shadow: 0 0 12px rgba(0, 0, 0, .5); }
.visionneuse-barre { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; margin: 12px 0 0; font-size: 15px; }
.visionneuse-barre a { color: #fff; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .5); padding: 6px 14px; border-radius: 3px; text-decoration: none; }
.visionneuse-barre a:hover, .visionneuse-barre a:focus { background: rgba(255, 255, 255, .3); color: #fff; }
.visionneuse-numero { color: #fff; }

/* ---------- pied de page ---------- */

.pied { position: relative; margin-top: 40px; padding: 30px 3% 0; background: url(/assets/img/fbg.png) bottom center repeat-x var(--actif); color: #fff; font-size: 16px; text-align: center; z-index: 10; }
.pied::before { content: ""; position: absolute; left: 0; right: 0; top: -27px; height: 27px; background: url(/assets/img/hb.png) repeat-x; transform: scaleY(-1); }
.pied a { color: #fff; text-decoration: none; }
.pied a:hover, .pied a:focus { color: #fff; text-decoration: underline; }
.pied p { margin: 0; }
.pied-colonnes { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 20px; padding: 0 20px; }
.pied-colonnes > div { flex: 1 1 220px; }
.pied-coordonnees { line-height: 1.15; }
.pied-coordonnees p { display: inline-block; text-align: left; min-width: 210px; margin: 0 0 14px; padding-left: 40px; background: center left 4px no-repeat; }
.pied-coordonnees .pied-adresse { background-image: url(/assets/img/map.png); }
.pied-coordonnees .pied-telephone { background-image: url(/assets/img/phone.png); background-position: center left 12px; padding-top: 4px; padding-bottom: 4px; }
.pied-coordonnees .pied-courriel { padding-left: 0; text-align: center; }
.pied-logo img { display: block; margin: 0 auto 6px; }
.pied-marque ul, .pied-reseaux ul { list-style: none; margin: 0; padding: 0; }
.pied-marque li { font-family: var(--titre); font-weight: 700; font-size: 20px; line-height: 1.6; }
.pied-titre { font-family: var(--titre); font-weight: 700; font-size: 25px; }
.pied-reseaux a { display: inline-block; margin: 12px; }
.pied-bas { padding: 26px 10px 12px; margin-top: 10px; }
@media (max-width: 700px) {
	.pied-colonnes { flex-direction: column; align-items: center; }
	.pied-colonnes > div { flex: none; }
	.pied { background-size: 900px auto; }
}

/* photos des bandeaux et fonds du diaporama, générés par build.py d'après content/pages/ et config.DIAPORAMA */
.bandeau-hebergement-couchage { background-image: url("/wp-content/uploads/2015/12/entete-chambre.jpg"); background-position: center 50%; }
.bandeau-lieu-reception-domaine { background-image: url("/wp-content/uploads/2015/12/tn_Lendemain-01.jpg"); background-position: center 44.7%; }
.bandeau-restaurant-salle-reception { background-image: url("/wp-content/uploads/2015/12/tn_Reception-08.jpg"); background-position: center 44.3%; }
.bandeau-salle-reception-mariage { background-image: url("/wp-content/uploads/2015/12/tn_Ce%C2%A6%C3%BCre%C2%A6%C3%BCmonie-01.jpg"); background-position: center 51.0%; }
.bandeau-vin-honneur { background-image: url("/wp-content/uploads/2015/12/entete-vin.jpg"); background-position: center 59.9%; }
.diapos li:nth-child(1)::before { background-image: url("/wp-content/uploads/2015/12/Ceremonie00-300x146.jpg"); }
.diapos li:nth-child(2)::before { background-image: url("/wp-content/uploads/2015/12/tn_Reception_01-300x200.jpg"); }
.diapos li:nth-child(3)::before { background-image: url("/wp-content/uploads/2015/12/tn_Reception_08-300x200.jpg"); }
.diapos li:nth-child(4)::before { background-image: url("/wp-content/uploads/2016/12/Ceremonie-01-300x225.jpg"); }
.diapos li:nth-child(5)::before { background-image: url("/wp-content/uploads/2015/11/moulin-slide4-300x147.jpg"); }
.diapos li:nth-child(6)::before { background-image: url("/wp-content/uploads/2015/11/moulin-slide3-300x147.jpg"); }
.diapos li:nth-child(7)::before { background-image: url("/wp-content/uploads/2015/11/moulin-slide1-300x147.jpg"); }