/* Festival du Fjord, direction E « Heure dorée » : formulaires communs.
   Champs, liste déroulante, cases, boutons radio, compteurs, mention (obligatoire), erreurs,
   états d'envoi du bouton (anneau puis coche) et confirmation (coche qui se dessine).
   Tous les formulaires du site sont posés sur un fond sombre (prune ou nuit) : l'encre est crème.
   Aucun halo, aucune ombre lumineuse, aucun bouton qui monte ou s'enfonce. */

.formulaire, .infolettre {
  --f-encre: #FFF4E2;
  --f-discret: rgba(255, 244, 226, 0.72);
  --f-bord: rgba(255, 244, 226, 0.42);
  --f-bord-survol: rgba(255, 244, 226, 0.75);
  --f-fond: rgba(255, 244, 226, 0.06);
  --f-fond-focus: rgba(255, 244, 226, 0.1);
  --f-focus: var(--or);
  --f-erreur: #FF9B7F;
  --f-erreur-texte: #FFC4B3;
  --f-rayon: 4px;
}

/* ---------- Étiquettes et mention (obligatoire) ---------- */
.champ > label, .champ > legend, .infolettre__saisie > label { font-weight: 600; font-size: 1rem; line-height: 1.35; }
.oblig { margin-left: 0.2em; font: 500 0.8rem/1 var(--f-texte); letter-spacing: 0.01em; color: var(--f-discret); white-space: nowrap; }
.lo-si-chap { display: none; }
.avec-chapiteau .lo-si-chap { display: inline; }

/* ---------- Champs texte, courriel, téléphone, nombre, date, zone de texte, liste ---------- */
.champ input:not([type="checkbox"]):not([type="radio"]),
.champ select,
.champ textarea,
.infolettre input[type="email"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 14px 18px;
  border-radius: var(--f-rayon); border: 1.5px solid var(--f-bord);
  background-color: var(--f-fond); color: var(--f-encre); caret-color: var(--or);
  font: 500 1rem/1.4 var(--f-texte);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.champ textarea { display: block; min-height: 132px; resize: vertical; line-height: 1.55; }
.champ input::placeholder, .champ textarea::placeholder, .infolettre input::placeholder { color: rgba(255, 244, 226, 0.5); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .champ input:not([type="checkbox"]):not([type="radio"]):hover,
  .champ select:hover, .champ textarea:hover, .infolettre input[type="email"]:hover { border-color: var(--f-bord-survol); }
}
.champ input:not([type="checkbox"]):not([type="radio"]):focus,
.champ select:focus, .champ textarea:focus, .infolettre input[type="email"]:focus { border-color: var(--f-focus); background-color: var(--f-fond-focus); }
.champ input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.champ select:focus-visible, .champ textarea:focus-visible, .infolettre input[type="email"]:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 2px; }
.champ [aria-invalid="true"], .infolettre input[aria-invalid="true"] { border-color: var(--f-erreur) !important; background-color: rgba(255, 120, 90, 0.1); }
.champ input:disabled, .champ select:disabled, .champ textarea:disabled { opacity: 0.5; cursor: not-allowed; }
/* Remplissage automatique du navigateur : on garde le fond sombre et l'encre crème */
.champ input:-webkit-autofill, .infolettre input:-webkit-autofill {
  -webkit-text-fill-color: var(--f-encre); caret-color: var(--or);
  -webkit-box-shadow: inset 0 0 0 100px #3A1B40; transition: background-color 99999s;
}

/* Liste déroulante : native (accessible), chevron dessiné */
.champ select {
  padding-right: 54px; cursor: pointer; color-scheme: dark; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4E2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 20px;
}
.champ select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB23F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
.champ select option { background: #2A0D2E; color: #FFF4E2; }

/* Date : calendrier natif, icône redessinée */
.champ input[type="date"] { color-scheme: dark; padding-right: 14px; }
.champ input[type="date"]::-webkit-datetime-edit { padding: 0; }
.champ input[type="date"]:required:invalid:not(:focus)::-webkit-datetime-edit { color: rgba(255, 244, 226, 0.5); }
.champ input[type="date"]::-webkit-calendar-picker-indicator {
  width: 22px; height: 22px; margin: 0; padding: 4px; border-radius: 8px; cursor: pointer; opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF4E2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.champ input[type="date"]::-webkit-calendar-picker-indicator:hover { background-color: rgba(255, 244, 226, 0.12); }

/* Nombres : pas de flèches natives (on a nos compteurs) */
.champ input[type="number"] { -moz-appearance: textfield; }
.champ input[type="number"]::-webkit-inner-spin-button, .champ input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Compteur − / + (formulaires.js enveloppe les champs data-compteur) */
.compteur {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 4px;
  min-height: 56px; padding: 5px; border-radius: var(--f-rayon); border: 1.5px solid var(--f-bord); background: var(--f-fond);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.champ .compteur input[type="number"] { min-height: 44px; padding: 0 4px; border: 0; background: transparent; text-align: center; font-weight: 700; font-size: 1.05rem; }
.champ .compteur input[type="number"]:focus-visible { outline: none; }
.compteur:focus-within { border-color: var(--f-focus); background: var(--f-fond-focus); }
.compteur:has(input:focus-visible) { outline: 2px solid var(--f-focus); outline-offset: 2px; }
.compteur:has([aria-invalid="true"]) { border-color: var(--f-erreur); background: rgba(255, 120, 90, 0.1); }
.compteur__btn {
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 11px;
  background: rgba(255, 244, 226, 0.1); color: var(--f-encre); font-size: 1.05rem; cursor: pointer;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .compteur__btn:hover:not(:disabled) { background: var(--or); color: var(--sombre); } }
.compteur__btn:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 1px; border-radius: 11px; }
.compteur__btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---------- Cases à cocher et boutons radio : natifs, redessinés ---------- */
.formulaire input[type="checkbox"], .formulaire input[type="radio"] {
  --case-bord: rgba(255, 244, 226, 0.75); --case-plein: var(--or); --case-marque: var(--sombre);
  -webkit-appearance: none; appearance: none; flex: none; position: relative;
  width: 22px; height: 22px; margin: 0; padding: 0; display: inline-grid; place-content: center;
  border: 2px solid var(--case-bord); border-radius: 7px; background: transparent; color: var(--case-marque); cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.formulaire input[type="radio"] { border-radius: 50%; }
.formulaire input[type="checkbox"]::before {
  content: ""; width: 13px; height: 13px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path 220ms var(--ease);
}
.formulaire input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--case-plein); transform: scale(0); transition: transform 180ms var(--ease); }
.formulaire input[type="checkbox"]:checked { background: var(--case-plein); border-color: var(--case-plein); }
.formulaire input[type="checkbox"]:checked::before { clip-path: inset(0 0 0 0); }
.formulaire input[type="radio"]:checked { border-color: var(--case-plein); }
.formulaire input[type="radio"]:checked::before { transform: scale(1); }
.formulaire input[type="checkbox"]:focus-visible, .formulaire input[type="radio"]:focus-visible { outline: 2px solid var(--f-focus); outline-offset: 3px; border-radius: 7px; }
.formulaire input[type="radio"]:focus-visible { border-radius: 50%; }
.formulaire input[type="checkbox"]:disabled, .formulaire input[type="radio"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* Pastilles de choix (.choix) : la case est visible à gauche, la pastille entière se remplit une fois cochée */
.choix { display: flex; flex-wrap: wrap; gap: 8px; }
.choix label {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 18px 8px 14px;
  border-radius: 999px; cursor: pointer; font-weight: 600; line-height: 1.25;
  box-shadow: inset 0 0 0 1.5px rgba(255, 244, 226, 0.42);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.choix input[type="checkbox"], .choix input[type="radio"] { position: relative; opacity: 1; width: 22px; height: 22px; }
.choix label:has(input:focus-visible) { outline: 2px solid var(--f-focus); outline-offset: 3px; }
.choix input:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .choix label:hover { background: rgba(255, 244, 226, 0.08); box-shadow: inset 0 0 0 1.5px rgba(255, 244, 226, 0.8); }
}
.choix label:has(input:checked) { background: var(--or); color: var(--sombre); box-shadow: inset 0 0 0 1.5px var(--or); }
.choix label:has(input:checked) input { --case-bord: var(--sombre); --case-plein: var(--sombre); --case-marque: var(--or); }
.est-invalide .choix label, fieldset.champ[aria-invalid="true"] .choix label { box-shadow: inset 0 0 0 1.5px var(--f-erreur); }
.est-invalide .choix label:has(input:checked), fieldset.champ[aria-invalid="true"] .choix label:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--or); }

/* Interrupteur (role="switch") : la case native reste accessible mais invisible, la piste dessinée la remplace */
.formulaire input[role="switch"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; border: 0; }

/* Case seule (acceptation des conditions) */
.case-seule { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; font-weight: 600; line-height: 1.4; }
.case-seule input[type="checkbox"] { width: 24px; height: 24px; }
.est-invalide .case-seule input[type="checkbox"]:not(:checked) { --case-bord: var(--f-erreur); }

/* ---------- Messages d'erreur ---------- */
.champ__erreur, .champ__err { margin: 0; display: flex; align-items: flex-start; gap: 8px; color: var(--f-erreur-texte, #FFC4B3); font-weight: 600; font-size: 0.92rem; line-height: 1.4; }
.champ__erreur:empty, .champ__err:empty { display: none; }
.champ__erreur::before, .champ__err::before {
  content: "!"; flex: none; width: 19px; height: 19px; margin-top: 0.5px; border-radius: 50%; display: grid; place-items: center;
  background: var(--f-erreur-texte, #FFC4B3); color: var(--prune); font: 800 0.72rem/1 var(--f-titre);
}
.champ__aide { color: var(--f-discret); }

/* ---------- Bouton d'envoi : anneau de progression, puis coche ----------
   Le cercle de survol du bouton (style.css) se remplit au centre pendant l'envoi : même geste que le survol. */
.btn.a-charge > * { transition: opacity 160ms var(--ease); }
.btn__charge {
  position: absolute !important; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none;
  color: var(--btn-survol-texte); transition: opacity 180ms var(--ease);
}
.btn__charge svg { width: 1.7em; height: 1.7em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn__piste { opacity: 0.22; }
.btn__anneau { stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.btn__coche { stroke-dasharray: 100; stroke-dashoffset: 100; }
.btn.est-envoi { cursor: progress; color: var(--btn-survol-texte); }
.btn.est-envoi::before { transform: translate(-50%, -50%) scale(1); }
.btn.est-envoi > :not(.btn__charge) { opacity: 0; }
.btn.est-envoi .btn__charge { opacity: 1; transition-delay: 140ms; }
.btn.est-envoi .btn__anneau { animation: envoi-anneau var(--duree-envoi, 1400ms) cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.btn.est-envoye .btn__anneau { animation: none; stroke-dashoffset: 0; }
.btn.est-envoye .btn__piste { opacity: 0; }
.btn.est-envoye .btn__coche { animation: envoi-trait 380ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
@keyframes envoi-anneau { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes envoi-trait { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Le formulaire s'efface avant la confirmation */
.formulaire { transition: opacity 240ms var(--ease); }
.formulaire.est-sortant { opacity: 0; }

/* ---------- Confirmation : une coche qui se dessine, puis le message ---------- */
.envoi-coche { display: block; flex: none; width: 76px; height: 76px; }
.envoi-coche svg { display: block; width: 100%; height: 100%; overflow: visible; }
.envoi-coche__disque { fill: var(--or); }
.envoi-coche__rond { fill: none; stroke: var(--or); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 0; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.envoi-coche__trait { fill: none; stroke: var(--sombre); stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.est-entre .envoi-coche__rond { animation: envoi-trait 640ms cubic-bezier(0.65, 0, 0.35, 1) both; }
.est-entre .envoi-coche__disque { animation: envoi-disque 360ms var(--ease) 480ms both; }
.est-entre .envoi-coche__trait { animation: envoi-trait 440ms cubic-bezier(0.65, 0, 0.35, 1) 700ms both; }
@keyframes envoi-disque { from { fill-opacity: 0; } to { fill-opacity: 1; } }
.est-entre > :not(.envoi-coche) { animation: envoi-monte 560ms var(--ease) both; animation-delay: 420ms; }
.est-entre > :nth-child(3) { animation-delay: 500ms; }
.est-entre > :nth-child(4) { animation-delay: 580ms; }
.est-entre > :nth-child(n + 5) { animation-delay: 660ms; }
@keyframes envoi-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Panneaux de confirmation des pages (Contact, Bénévoles, Location, Devenir partenaire) */
.merci, .bn-merci { display: grid; gap: 16px; justify-items: start; align-content: center; min-height: 100%; padding: clamp(10px, 2vw, 24px) 0; }
.merci:focus, .bn-merci:focus { outline: none; }
.merci[hidden], .bn-merci[hidden], .formulaire[hidden] { display: none; }
.merci .envoi-coche, .bn-merci .envoi-coche { margin-bottom: 4px; }
.merci__note, .bn-merci__note { color: rgba(255, 244, 226, 0.78); }
.merci__encore, .bn-merci__encore { background: none; border: 0; border-bottom: 2px solid currentColor; padding: 0; color: var(--creme); cursor: pointer; text-align: left; justify-content: flex-start; }
.bn-sommaire[hidden] { display: none; }
.formulaire__retour { color: var(--f-erreur-texte); }
.formulaire__retour:empty { display: none; }
.contact__zone { min-width: 0; }

/* ---------- Infolettre du pied de page ---------- */
.infolettre__saisie { display: grid; gap: 10px; }
.infolettre__saisie[hidden] { display: none; }
.infolettre input[type="email"] { flex: 1; min-height: 56px; padding: 0 22px; border-radius: 999px; font-size: 1.05rem; }
.infolettre:has(input[aria-invalid="true"]) #courriel-aide { display: flex; align-items: flex-start; gap: 8px; color: var(--f-erreur-texte); font-weight: 600; }
.infolettre:has(input[aria-invalid="true"]) #courriel-aide::before {
  content: "!"; flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--f-erreur-texte); color: var(--prune); font: 800 0.72rem/1 var(--f-titre);
}
.infolettre__ok { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 8px 24px 8px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 178, 63, 0.55); background: rgba(255, 178, 63, 0.08); }
.infolettre__ok[hidden] { display: none; }
.infolettre__ok:focus { outline: none; }
.infolettre__ok p { margin: 0; font-weight: 600; line-height: 1.4; }
.infolettre__ok .envoi-coche { width: 48px; height: 48px; }
.infolettre__ok.est-entre > p { animation-delay: 380ms; }

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  .choix label { padding-right: 16px; }
  .infolettre__ok { border-radius: 24px; padding: 12px 18px 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .champ input, .champ select, .champ textarea, .compteur, .compteur__btn, .choix label, .formulaire, .btn.a-charge > *, .btn__charge,
  .formulaire input[type="checkbox"], .formulaire input[type="checkbox"]::before, .formulaire input[type="radio"], .formulaire input[type="radio"]::before { transition: none; }
  .btn.est-envoi .btn__anneau { animation: none; stroke-dashoffset: 30; }
  .btn.est-envoye .btn__anneau { stroke-dashoffset: 0; }
  .btn.est-envoye .btn__coche { animation: none; stroke-dashoffset: 0; }
  .est-entre .envoi-coche__rond, .est-entre .envoi-coche__disque, .est-entre .envoi-coche__trait, .est-entre > :not(.envoi-coche) { animation: none; }
}

/* ---------- Version « Sobre » : champs à angles nets, infolettre sur la bande orange ---------- */
:root { --f-rayon: 4px; }
.infolettre__ligne { display: flex; gap: 8px; }
.pied__infolettre .infolettre input[type="email"] { border-radius: var(--r); border-color: var(--blanc); background-color: var(--blanc); color: var(--encre); caret-color: var(--accent); -webkit-text-fill-color: var(--encre); }
.pied__infolettre .infolettre input::placeholder { color: #8A8F99; }
.pied__infolettre .infolettre input[type="email"]:focus { border-color: var(--encre); background-color: var(--blanc); }
.pied__infolettre .infolettre input[type="email"]:focus-visible { outline-color: var(--encre); }
.pied__infolettre .infolettre__saisie > label, .pied__infolettre .oblig { color: var(--blanc); }
.pied__infolettre .btn { --btn-fond: var(--encre); --btn-texte: var(--blanc); --btn-survol: var(--blanc); --btn-survol-texte: var(--encre); min-height: 56px; }
.pied__infolettre .infolettre__ok { border-radius: var(--r); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); }
.pied__infolettre #courriel-aide { color: var(--blanc); }
.choix label { border-radius: var(--r); }
@media (max-width: 700px) { .infolettre__ligne { flex-direction: column; } }