/* Site du mariage d'Hélène et Benjamin — direction « Guinguette » */

@font-face { font-family: "Gloock"; src: url("../fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("../fonts/chivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("../fonts/chivo-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chivo"; src: url("../fonts/chivo-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --fond: #FFFFFF;
  --encre: #1F2B47;
  --doux: #5A6482;
  --ligne: #E1E4EC;
  --bande: #EEF0F5;
  --accent: #C23B6B;
  --rose: #E59AA5;
  --lampion: #F2B634;
  --mer: #E3EBF3;
  --nuit: #1F2B47;
  --nuit-encre: #F4EEDD;
  --nuit-doux: #B4BDD3;
  --nuit-bande: #33426A;
  --nuit-ligne: #44527A;
  --peau: #F2DDCB;
  --titre: "Gloock", Georgia, serif;
  --texte: "Chivo", system-ui, sans-serif;
  --rayon: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: var(--encre); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 64px); }

/* Guirlande du haut */
.guirlande-haut { display: block; width: 100%; height: auto; }
.guirlande-haut .fil { fill: none; stroke: #9AA3BA; stroke-width: 1.2; }
.clignote { animation: clignote 2.4s ease-in-out infinite; }
@keyframes clignote { 0%, 40%, 60%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* En-tête */
.entete { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 4px 0 24px; }
.entete nav { display: flex; gap: 28px; font-size: 15px; }
.lien-maries { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--doux); min-height: 44px; margin-left: auto; }

/* Accueil */
.accueil { padding: clamp(40px, 8vw, 104px) 0 clamp(56px, 8vw, 104px); text-align: center; }
.accueil .date { margin: 0 0 28px; font-size: 16px; color: var(--doux); }
.accueil h1 { margin: 0; font-family: var(--titre); font-weight: 400; font-size: clamp(60px, 11vw, 160px); line-height: .92; letter-spacing: -.01em; }
.accueil .intro { margin: 36px auto 0; max-width: 30em; font-size: 18px; line-height: 1.65; color: var(--doux); }
.soleil { margin: clamp(48px, 7vw, 80px) auto 0; max-width: 420px; }
.soleil svg { display: block; width: 100%; height: auto; }
.soleil figcaption { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--doux); }

/* Sections */
.section { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--ligne); }
.section-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.section h2 { margin: 0; font-family: var(--titre); font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1; }
.section-tete p { margin: 0; max-width: 34em; color: var(--doux); }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid var(--encre); background: var(--encre); color: var(--fond); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; }
.bouton:hover { color: var(--fond); background: #2C3A5E; }
.bouton.principal { background: var(--accent); border-color: var(--accent); }
.bouton.principal:hover { background: #A8305A; }
.bouton.secondaire { background: transparent; color: var(--encre); border-color: var(--ligne); }
.bouton.secondaire:hover { border-color: var(--encre); color: var(--encre); }
.bouton.icone { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--encre); border-color: var(--ligne); }
.bouton[disabled] { opacity: .6; cursor: progress; }

/* Liste de secours du programme (sans JavaScript) */
.programme-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.programme-liste li { display: grid; grid-template-columns: 9em 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ligne); }
.programme-liste strong { font-family: var(--titre); font-weight: 400; font-size: 22px; }
.js .programme-liste { display: none; }

/* Chemin animé */
.chemin-defile { overflow-x: auto; padding: 0 16px 28px; margin: 0 -16px; }
.chemin-scene { position: relative; min-width: 760px; aspect-ratio: 1200 / 340; }
.chemin-ciel { position: absolute; inset: 0 -16px; border-radius: var(--rayon); background: var(--nuit); opacity: 0; transition: opacity .25s linear; }
.chemin-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chemin-svg .poteaux { fill: none; stroke: var(--ligne); stroke-width: 2; }
.chemin-svg .fil { fill: none; stroke: var(--doux); stroke-width: 1.2; }
.chemin-svg .guirlande { transition: opacity 1.2s; }
.chemin-svg .bande { fill: none; stroke: var(--bande); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.chemin-svg .pas { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; stroke-dasharray: .5 9; }
.chemin-svg .nuitee { fill: none; stroke: var(--doux); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .5 6; }

.lampion { position: absolute; width: 11px; height: 13px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; transform: translate(-50%, -50%); background: #E4E6EC; z-index: 1;
  transition: left 1.6s cubic-bezier(.3, 0, .2, 1), top 1.6s cubic-bezier(.3, 0, .2, 1), width 1.6s, height 1.6s, background .5s, box-shadow .5s; }
.lampion.allume { background: var(--c); box-shadow: 0 0 12px 3px var(--halo); animation: clignote-lampion 2.6s ease-in-out infinite; }
.lampion.etoile { width: 3px; height: 3px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 6px 1px rgba(255, 255, 255, .85); animation: scintille 3.2s ease-in-out infinite; }
.lampion.etoile.grande { width: 5px; height: 5px; }
@keyframes clignote-lampion { 0%, 45%, 55%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes scintille { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .45; transform: translate(-50%, -50%) scale(.6); } }

.chemin-horloge { position: absolute; right: 16px; top: 12px; font-family: var(--titre); font-size: 26px; z-index: 2; transition: color .6s; }
.chemin-repere { position: absolute; transform: translate(-50%, calc(-100% - 72px)); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--doux); pointer-events: none; transition: color .6s; }
.chemin-lune { position: absolute; transform: translate(-50%, -170%); color: var(--doux); }

.etape { position: absolute; transform: translate(-50%, -22px); width: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 6px; background: none; border: none; cursor: pointer; color: var(--encre); font: inherit; z-index: 2; }
.etape .point { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; margin-bottom: 6px; background: var(--fond); transition: transform .2s, background .6s; }
.etape[aria-pressed="true"] .point { background: var(--accent); transform: scale(1.3); }
.etape .heure { font-family: var(--titre); font-size: 20px; line-height: 1.1; }
.etape .titre { font-size: 13px; line-height: 1.3; color: var(--doux); transition: color .6s; }
.etape[aria-pressed="true"] .titre { color: currentColor; font-weight: 600; }

.couple { position: absolute; transform: translate(-50%, -96%); pointer-events: none; z-index: 3; }
.couple svg { display: block; overflow: visible; }
.couple .encre { stroke: var(--encre); }
.couple .robe { fill: var(--accent); }
.couple .costume { fill: var(--encre); }
.couple .chemise { fill: var(--fond); }
.couple .peau { fill: var(--peau); }
.couple .cheveux { fill: var(--encre); }
.couple .bouquet { fill: var(--rose); }
.couple .jambe-a, .couple .jambe-b { transform-box: fill-box; transform-origin: 50% 0; }
.couple.marche .jambe-a, .couple.danse .jambe-a { animation: jambe .3s ease-in-out infinite alternate; }
.couple.marche .jambe-b, .couple.danse .jambe-b { animation: jambe .3s ease-in-out infinite alternate-reverse; }
.couple.marche .corps { animation: sautille .3s ease-in-out infinite alternate; }
.couple.danse .corps { animation: danse 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.couple.danse .tour { animation: tour 4.4s ease-in-out infinite; transform-origin: 50% 100%; }
.couple.gauche .sens { transform: scaleX(-1); }
.couple .notes { display: none; }
.couple.danse .notes { display: block; }
.note { position: absolute; animation: note 1.8s ease-out infinite; }
@keyframes jambe { from { transform: rotate(-20deg); } to { transform: rotate(20deg); } }
@keyframes sautille { from { transform: translateY(0); } to { transform: translateY(-1.6px); } }
@keyframes danse { 0%, 100% { transform: rotate(-7deg) translateY(0); } 25%, 75% { transform: rotate(0) translateY(-5px); } 50% { transform: rotate(7deg) translateY(0); } }
@keyframes tour { 0%, 70% { transform: scaleX(1); } 80% { transform: scaleX(-1); } 90%, 100% { transform: scaleX(1); } }
@keyframes note { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -46px); opacity: 0; } }

/* La nuit */
.chemin-scene.nuit { --encre: var(--nuit-encre); --doux: var(--nuit-doux); --bande: var(--nuit-bande); --ligne: var(--nuit-ligne); --fond: #26345A; }
.chemin-scene.nuit .guirlande { opacity: 0; }
.chemin-scene.nuit .couple .costume { fill: #1F2B47; }
.chemin-scene.nuit .couple .chemise { fill: var(--nuit-encre); }
.chemin-scene.nuit .couple .cheveux { fill: #3A3330; }

.chemin-fiche { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 28px clamp(20px, 3vw, 36px); border: 1px solid var(--ligne); border-radius: var(--rayon); }
.chemin-fiche .quand { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.chemin-fiche .jour { font-size: 14px; color: var(--doux); }
.chemin-fiche .grande-heure { font-family: var(--titre); font-size: 48px; line-height: 1; }
.chemin-fiche .quoi { flex: 999 1 320px; min-width: 0; }
.chemin-fiche h3 { margin: 0 0 6px; font-family: var(--titre); font-weight: 400; font-size: 28px; line-height: 1.15; }
.chemin-fiche p { margin: 0; font-size: 16px; max-width: 36em; }
.chemin-fiche .commandes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .clignote, .lampion.allume, .lampion.etoile, .couple .jambe-a, .couple .jambe-b, .couple .corps, .couple .tour, .note { animation: none !important; }
}

/* Carte */
.carte-grille { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.carte { margin: 0; border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; background: var(--mer); }
.carte svg { display: block; width: 100%; height: auto; }
.carte figcaption { padding: 12px 16px; font-size: 13px; color: var(--doux); background: var(--fond); border-top: 1px solid var(--ligne); }
.carte .terre { fill: var(--fond); stroke: var(--encre); stroke-width: 1.2; stroke-linejoin: round; }
.carte .cote { fill: none; stroke: var(--ligne); stroke-width: 2; stroke-dasharray: 6 5; }
.carte .route { fill: none; stroke: var(--encre); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carte text { font-family: var(--texte); fill: var(--encre); }
.carte .eau { font-family: var(--titre); fill: var(--doux); font-style: italic; }
.carte .camping circle { fill: var(--encre); stroke: var(--fond); stroke-width: 2; transition: r .2s; }
.carte .camping text { fill: var(--fond); font-weight: 600; font-size: 12px; }
.carte .camping.choisi circle { fill: var(--accent); r: 15; }
.lieu-infos { display: flex; flex-direction: column; gap: 32px; }
.lieu-infos h3 { margin: 0 0 12px; font-family: var(--titre); font-weight: 400; font-size: 26px; line-height: 1.15; }
.lieu-infos p { margin: 0; }
.gps { margin-top: 8px !important; font-size: 14px; color: var(--doux); }
.liens-itineraire { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.campings { margin: 0; padding: 0; list-style: none; }
.campings li { border-bottom: 1px solid var(--ligne); }
.campings button { width: 100%; display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 14px 8px; min-height: 44px; background: transparent; border: none; border-radius: var(--rayon); color: var(--encre); font: inherit; cursor: pointer; }
.campings button[aria-pressed="true"] { background: var(--bande); }
.campings .numero { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; background: var(--encre); color: var(--fond); }
.campings button[aria-pressed="true"] .numero { background: var(--accent); }
.campings .nom { display: block; font-weight: 600; font-size: 15px; }
.campings .detail { display: block; font-size: 14px; line-height: 1.45; color: var(--doux); }
.note-bas { margin-top: 14px !important; font-size: 14px; color: var(--doux); }

/* Formulaires */
.participation-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.carte-form { border: 1px solid var(--ligne); border-radius: var(--rayon); padding: clamp(20px, 3vw, 36px); background: var(--fond); }
.champs { display: flex; flex-direction: column; gap: 18px; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .etiquette { font-size: 14px; font-weight: 600; }
.champ input, .champ textarea { font: inherit; font-size: 16px; color: var(--encre); background: #F7F8FB; border: 1px solid var(--ligne); border-radius: var(--rayon); padding: 12px 14px; min-height: 48px; width: 100%; }
.champ input:focus, .champ textarea:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px rgba(31, 43, 71, .15); }
.aide { margin: 0; font-size: 14px; line-height: 1.5; color: var(--doux); }
.erreur { margin: 0; font-size: 15px; font-weight: 500; color: #B42318; }
.erreur:empty { display: none; }
.pot-de-miel { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.choix { display: flex; gap: 6px; flex-wrap: wrap; }
.choix button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--encre); background: transparent; color: var(--encre); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.choix button[aria-pressed="true"] { background: var(--encre); color: var(--fond); }

/* Page participation */
.page-participation { max-width: 920px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) clamp(16px, 5vw, 32px) 80px; }
.page-participation .barre { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 32px; border-bottom: 1px solid var(--ligne); }
.page-participation h1 { margin: 0 0 14px; font-family: var(--titre); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.02; }
.chapo { margin: 0; max-width: 34em; font-size: 17px; color: var(--doux); }
.chapo.espace-haut { margin-top: 14px; }
.personnes { display: flex; flex-direction: column; }
.personne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 44px; gap: 12px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--ligne); }
.bloc-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ligne); }
.rgpd { margin-top: 40px; font-size: 13px; color: var(--doux); }

/* Pied de page */
.pied { padding: 40px 0 56px; border-top: 1px solid var(--ligne); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--doux); }
.pied .signature { margin: 0; font-family: var(--titre); font-size: 22px; color: var(--encre); }
.pied p { margin: 0; }

@media (max-width: 860px) {
  .section-tete, .carte-grille, .participation-grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .entete nav { display: none; }
  .personne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .programme-liste li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 480px) { .deux-colonnes { grid-template-columns: minmax(0, 1fr); } }