@font-face {
    font-family: 'phototitre';
    src: url('fonts/phototitre.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    flex: 1;
    display: flex;
	flex-direction: column;
-   align-items: center;
+   align-items: flex-start;
    justify-content: stretch;
    padding-top:280px;   /* empêche chevauchement avec header sticky */
    padding-bottom:80px; /* empêche chevauchement avec footer sticky */
}
body {
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    background: #000;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* ✅ */
}
a { text-decoration: none;
    color: orange;
    transition: color 0.2s ease; }
		a:hover,
		a:focus {
			color: orange;
			font-weight: 700;
			text-decoration: none; }

/* étoiles fixes */
.stars {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(1px 1px at 10% 20%, #fff, transparent),
        radial-gradient(1px 1px at 30% 70%, #ccc, transparent),
        radial-gradient(1px 1px at 50% 40%, #fff, transparent),
        radial-gradient(1px 1px at 70% 80%, #ddd, transparent),
        radial-gradient(1px 1px at 90% 30%, #fff, transparent);
    background-size: 200px 200px;
    z-index: -2;
}

/* étincelle */
.sparkle {
    position: fixed;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 4px rgba(255,255,255,0.9);
    animation: sparkleFlash 0.4s ease-out forwards;
    pointer-events: none;
    z-index: -1;
}

@keyframes sparkleFlash {
    0%   { transform: scale(0.5); opacity: 0; }
    30%  { transform: scale(2.5); opacity: 1; } /* FLASH */
    100% { transform: scale(0.5); opacity: 0; }
}

.page {
    width: 100%;
    max-width: 2000px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    text-align: center;
    padding: 20px 20px;            /* réduit */
}

.subtitle {
    margin-top: 10px;
    font-size: clamp(12px, 2vw, 14px);
    opacity: 0.85;
}

.section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    width: 100%;
    margin: 20px auto;
}

.alerte-fermeture {
    max-width: 720px;
    margin: 25px auto 10px auto;
    padding: 18px 25px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff3d0;
    background: linear-gradient(135deg, #8b0000, #c0392b);
    border: 2px solid #ffd36a;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 211, 106, 0.45);
}

.photo {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}


.photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(20%) brightness(0.85);
    transition: transform 0.4s ease, filter 0.4s ease;
}

.photo {
    text-decoration: none;
    color: inherit;
}

.photo span {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.3s ease;
	pointer-events: none;
}

.photo:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}

.photo:hover span {
    opacity: 1;
}



/* Coordonnées */
.contact-line {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 500;
    opacity: 0.95;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.contact-line a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.contact-line a:hover {
    opacity: 0.7;
}

.section-text {
    display: none;
    width: 100%;
    max-width: 900px;
    margin: 0px auto 40px;
    padding: 24px;
    color: #fff;
    text-align: left;
    line-height: 1.6;
    background: rgba(0,0,0,0.55);
    border-radius: 8px;
}
.section-text h1 {
    font-family: 'phototitre', serif;
    font-size: 35px;
	text-align:center;
    margin-top: 0px;
    margin-bottom: 30px;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
}
	.section-text h2 {
		font-family: "Segoe UI", Arial, Helvetica, sans-serif;
		font-size: 18px;
		color: #EBCEB2;
		font-weight: bold;
		margin-top: 30px;
		margin-bottom: 15px;
		line-height: 1.6;
	}
		.section-text p{
		  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
		  font-size: 18px;
		  color: #ffffff;
		  margin-top: 15px;
		  margin-bottom: 15px;
		  line-height: 1.4;
		}
			.liste-retrait {
				font-family: "Segoe UI", Arial, Helvetica, sans-serif;
				font-size: 18px;
				color: #ffffff;
				padding-left: 40px;
				margin-top: 0px;
				margin-bottom: 0px;
				line-height: 1.4;
			}
						/* Paragraphe avec lettrine image (2 lignes) */
						.section-text p.para-enlumi{
						  overflow: hidden; /* pour gérer le float proprement */
						}
						/* bloc lettrine */
						.section-text p.para-enlumi .enl{
						  float: left;
						  width: 50px;
						  height: calc(2 * 1.4em);  /* = 2 lignes EXACT */
						  margin: 0.30em 14px 0 0;  /* ajustement de la position verticale */
						}
						/* image lettrine */
						.section-text p.para-enlumi .enl img{
						  width: 100%;
						  height: 100%;
						  display: block;
						  object-fit: contain;
						  filter: drop-shadow(0 0 6px rgba(120,180,255,0.35));
						  opacity: 0.95;
						}
						@media (max-width: 520px){
						  .section-text p.para-enlumi .enl{
							width: 36px;
							margin-right: 10px; } }

				.q-list{list-style:none;margin:0;padding:0}
				.q-list li{
				  position:relative;
				  padding-left:2.2rem;
				  margin:.6rem 0;
				}
				.q-list li::before{
				  content:"?";
				  position:absolute;left:0;top:.1em;
				  width:1.6rem;height:1.6rem;
				  display:grid;place-items:center;
				  border-radius:999px;border:1px solid currentColor;
				  font-weight:800;line-height:1;opacity:.9;
				}

					.faq-select{
					  width:100%;
					  max-width:420px;
					  padding:.6rem .7rem;
					  background:#0e1226;
					  color:#fff;
					  border:1px solid #444;
					  border-radius:6px;
					  font-size:1rem;
					  cursor:pointer;
					}

					.faq-select:focus{
					  outline:none;
					  border-color:#ff8c00;
					  box-shadow:0 0 0 2px rgba(255,140,0,.35);
					}

					.q-list li{
					  transition: background .3s ease;
					}

					.q-list li.highlight{
					  background: rgba(255,140,0,.12);
					  border-left:4px solid #ff8c00;
					  border-radius:6px;
					}

					/* question */
					.q-list li.highlight strong{
					  color:#ff8c00;
					}

					/* réponse légèrement atténuée */
					.q-list li.highlight i{
					  color:#eee;
					}

					@keyframes flashFaq{
					  0%{ box-shadow:0 0 0 rgba(255,140,0,0) }
					  50%{ box-shadow:0 0 18px rgba(255,140,0,.6) }
					  100%{ box-shadow:0 0 0 rgba(255,140,0,0) }
					}

					.q-list li.highlight{
					  animation: flashFaq .6s ease;
					}


.faq-separator{
  width:100%;
  height:3px;
  margin:2.5rem 0 1.2rem;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,140,0,.7),
    transparent
  );
}

.section-text button {
    margin-top: 20px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
}

.section-text button:hover {
    background: #fff;
    color: #000;
}

.phone-link {
    color: #fff;
    text-decoration: none;
}

.phone-link:hover {
    opacity: 0.8;
}


/* Bandeau boutons */
.action-band {
    position: relative;

    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    margin-top: 20px;
    margin-bottom: 15px;
    padding: 14px 10px;

    display: flex;
    justify-content: center;
    gap: 24px;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.18),
        rgba(255,255,255,0.12)
    );

    border-top: 1px solid rgba(255,255,255,0.25);
    border-bottom: 1px solid rgba(255,255,255,0.25);

    backdrop-filter: blur(6px);
}


.action-btn {
    padding: 10px 20px;
    border: 1px solid rgba(255,255,255,0.8);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1.5px;
    background: rgba(0,0,0,0.25);
    transition: all 0.25s ease;
}
.action-btn.active {
    background: rgba(255,255,255,0.85);
    color: #000;
    border-color: #fff;
    font-weight: 600;
}

.img-responsive{
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;
  margin-bottom: 20px;
}

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 20px;
    background: #222;
    font-size: 12px;
    text-align: center;
    z-index: 50;
    border-top:1px solid rgba(255,255,255,0.15);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
	z-index: 100;
}
		.header-logo {
			position: absolute;
			top: 20px;

			left: 50%;
			transform: translateX(300px);

			z-index: 5;
		}
		.header-logo img {
			height: 200px;
			max-width: 220px;
			object-fit: contain;
			filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
		}
		@media (max-width: 700px) { /* l'avatar sur téléphone : */
			.header-logo {
				position: absolute;
				left: 95%;
				top: 180px; /* plus bas que sur desktop : */
				transform: translateX(-50%);
				z-index: 6; }
			.header-logo img {
				height: 110px; } }

@media (max-height: 800px){ /* non stickys sur écrans moins hauts */
    header{ position: relative; }
    footer{ position: relative; bottom:auto; }
    main{ padding-top:40px;
          padding-bottom:40px; } }

header h1 {
    font-family: 'phototitre', serif;
    font-size: clamp(30px, 4.5vw, 48px);
    letter-spacing: 1.5px;
    font-weight: 600;
	margin-top:40px;
}

/* Survol */
.action-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #000;
}

@media (max-width: 700px) {
    .action-band {
        flex-wrap: wrap;
        gap: 12px;
    }
    .action-btn {
        font-size: 12px;
        padding: 8px 14px;
    }
	.section	{
			grid-template-columns: repeat(1, 1fr);
		}
}