/*
Theme Name: EPSVB 2026
Theme URI: https://www.parachutisme-vannes.com/
Author: Helixo.fr
Author URI: https://helixo.fr/
Description: Thème 2026 du club de parachutisme de Vannes
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: epsvb-2026
Tags: 
*/


* {
  line-height: 1.5;
  box-sizing: border-box;
}

.erreur {
  background: orange;
  padding: 0.3em 1em;
  /* pour éviter que les lignes d'un span se recouvrent */
  line-height: 2;
}

.home .wp-block-button:hover {
  filter: contrast(150%);
}

/* aligne visuellement le menu avec le logo en hauteur + espaces autour */
.epsvb-2026-menu-haut .wp-block-navigation__container {
  margin: 32px 8vw 0;
}
/* note : dans l'éditeur de site, le bouton est dans ce container ↖
 * mais pas dans le rendu */

/* pour décoller le border du lien au survol */
.epsvb-2026-menu-haut .wp-block-navigation-item__content {
  padding-bottom: 6px !important;
}

/* idem 6px sur le picto v en SVG */
.epsvb-2026-menu-haut .wp-block-navigation__submenu-icon {
  margin: 0 0 6px 12px;
}

.epsvb-2026-menu-haut .wp-block-navigation-item {
  border-bottom: 3px solid transparent;
}

.epsvb-2026-menu-haut .wp-block-navigation-item:not(.has-child):hover {
  border-bottom: 3px solid var(--wp--preset--color--or-epsvb);
}

@media (hover: hover) {
  .epsvb-2026-menu-haut .wp-block-navigation-item:hover {
    transition: border-bottom 0.5s;
  }
}

.epsvb-2026-menu-haut .wp-block-navigation__submenu-container {
  padding: 0 !important;
}

.espvb-2026-menu-haut-espace-adh::before {
  content: "";
  display: block;
  width: 100%;
  height: 36px;
  background: url("images/picto-buste.svg") top center no-repeat;
}

.epsvb-2026-banniere-telephone a {
  text-decoration: none;
}

@media (max-width: 999px) {
  .epsvb-2026-accueil-banniere {
    flex-wrap: wrap !important;
  }

  .epsvb-2026-accueil-banniere > img,
  .epsvb-2026-accueil-banniere > video {
    position: static !important;
  }

  .epsvb-2026-accueil-banniere-contenu {
    align-items: center;
    padding: 5vw !important;
  }

  /* sur mobiles impossible de continuer en vw, c'est trop petit */
  .epsvb-2026-accueil-banniere-contenu h1 {
    font-size: 8vw !important;
  }

  .epsvb-2026-accueil-banniere-contenu figure {
    flex-basis: 25% !important;
  }

  .epsvb-2026-accueil-banniere-contenu .wp-block-button a {
    font-size: 4vw !important;
  }

  .epsvb-2026-contacts figure {
    max-width: 10% !important;
  }

  .epsvb-2026-banniere-telephone {
    font-size: 2em !important;
  }

  .epsvb-2026-banniere-email {
    font-size: 1em !important;
  }

  .epsvb-2026-argumentaire {
    font-size: 1em !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1000px) {
  .epsvb-2026-accueil-banniere > img,
  .epsvb-2026-accueil-banniere > video {
    right: 0 !important;
    left: unset !important;
    max-width: 70% !important;
  }

  .epsvb-2026-accueil-banniere-contenu {
    clip-path: polygon(0 0, 31% 0, 50% 100%, 0 100%);
  }

  .epsvb-2026-contacts > div {
    justify-content: flex-start !important;
  }
}

#overlay-video-banniere-1 {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5%;
  max-width: 40%;
  color: white;
  opacity: 0;
  text-shadow: 1px 3px 4px #555c;
  font-weight: bolder;
  font-size: 8vw;
  text-align: center;
  animation: fondu1 30s paused linear 5;
}

#overlay-video-banniere-2 {
  pointer-events: none;
  position: absolute;
  top: 20%;
  right: 2%;
  max-width: 40%;
  color: var(--wp--preset--color--or-epsvb);
  opacity: 0;
  text-shadow: 1px 3px 4px #555c;
  font-weight: bolder;
  font-size: 5vw;
  text-align: center;
  animation: fondu2 30s paused linear 5;
}

@keyframes fondu1 {
  0% { opacity: 0; }
  /* apparition à 2,2 s : 2.2 / 30 * 100 = 7.333333 */
  7.3% { opacity: 0; }

  8% {
    opacity: 0.8;
    transform: scale(1) translateY(-50%);
  }

  13% {
    opacity: 0.8;
    transform: scale(2) translateY(-30%);
  }

  /* disparition à 4,2 s : 4.2 / 30 * 100 = 14.0 */
  14% {
    opacity: 0;
    transform: scale(5) translateY(-10%);
  }

  15% {
    opacity: 0;
    transform: scale(1) translateY(0);
  }

  100% { opacity: 0; }
}

@keyframes fondu2 {
  0% { opacity: 0; }
  /* apparition à 7 s : 7.0 / 30 * 100 = 23.333333 */
  23.5% { opacity: 0; }
  24.5% { opacity: 1; }
  29.2% { opacity: 1; }
  /* disparition à 9 s : 9.0 / 30 * 100 = 30.0 */
  30.2% { opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 999px) {
  #overlay-video-banniere-1 {
    top: 10%;
    right: 15%;
    max-width: 100%;
    font-size: 15vw;
  }

  #overlay-video-banniere-2 {
    top: 7%;
    max-width: 100%;
    font-size: 10vw;
  }
}

.epsvb-2026-avis-google a {
  text-decoration: none;
}

/* sinon ça fait du blanc à droite avant qu'on arrive sur cette section */
#bleu-et-jaune > div > div {
  overflow: hidden;
}

:root {
  --epsvb-2026-box-shadow-resa: 6px 6px 0 var(--wp--preset--color--bleu-electrique);
  --epsvb-2026-box-shadow-carte-cadeau: -6px 6px 0 var(--wp--preset--color--or-epsvb);

  /* dans l'éditeur, empilements flex-basis 485px + marges ⇒ ça wrappe à ~ 1073px */
  @media (max-width: 1073px) {
    --epsvb-2026-box-shadow-resa: 0 6px 0 var(--wp--preset--color--bleu-electrique);
    --epsvb-2026-box-shadow-carte-cadeau: 0 6px 0 var(--wp--preset--color--or-epsvb);
  }
}

.epsvb-2026-deroulement-saut > div {
  justify-content: center;
  background:
    url("images/personnage-du-logo.png") 20px 50% / auto 50% no-repeat,
    url("images/biseau-gradient-bleu.png") left top / auto 100% no-repeat;
}

.epsvb-2026-deroulement-saut > div > p {
  margin-left: 150px;
}

.epsvb-2026-deroulement-saut > div > div {
  flex: 0 0 200px;
  text-align: center;
}

@media (max-width: 768px) {
  .epsvb-2026-deroulement-saut > div {
    flex-wrap: wrap;
    background-image: none;
  }

  .epsvb-2026-deroulement-saut > div > p {
    margin-left: 0;
  }

  .epsvb-2026-deroulement-saut > div > div {
    flex-basis: 100%;
  }

  .epsvb-2026-deroulement-saut > div > div img {
    display: block !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {
  .epsvb-2026-tenue-conditions > div {
    flex-wrap: wrap;
  }
}

.epsvb-2026-une-question a {
  color: var(--wp--preset--color--bleu-epsvb);
  text-decoration: none;
  border-bottom: 4px solid var(--wp--preset--color--or-epsvb) !important;
}

@media (max-width: 999px) {
  .epsvb-2026-une-question {
    background-position: 50% top !important;
  }

  .epsvb-2026-une-question .wp-block-spacer:first-child {
    height: 150px !important;
  }

  .epsvb-2026-une-question .wp-block-spacer:last-child {
    display: none !important;
  }
}

@media (min-width: 1000px) {
  body.blog h1,
  body:not(.home, .single-post, .woocommerce).wp-singular h1:first-child {
    margin-bottom: 2em;
  }
}

body.blog h1::after,
body:not(.home, .woocommerce).wp-singular h1:first-child::after {
  content: "";
  display: block;
  width: calc(100% - 20px); /* 2 fois la border-width */
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-image: linear-gradient(to right, var(--wp--preset--color--or-epsvb), rgb(var(--wp--preset--color--or-epsvb-rvb) / 15%), var(--wp--preset--color--or-epsvb)) 0 4 7;
  margin-top: -6px;
}

div.epsvb-2026-titre-h2-bleu h2 {
  padding: 5px 15px;
  color: white;
  background: no-repeat linear-gradient(to right, var(--wp--preset--color--bleu-gradient-bottom), var(--wp--preset--color--bleu-electrique));
}

div.epsvb-2026-titre-h2-bleu h2 a {
  color: white;
}

body:not(.wp-admin) :nth-child(n+2 of .epsvb-2026-titre-h2-bleu) h2.wp-block-heading,
body:not(.wp-admin) .epsvb-2026-anim-apparait {
  animation: apparait paused 2s;
}

@keyframes apparait {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (max-width: 999px) {
  body.blog h1::after,
  body:not(.home, .woocommerce).wp-singular h1:first-child::after {
    animation: etire 700ms;
  }

  @keyframes etire {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
  }
}

@keyframes glisse-gauche {
  0% { transform: translateX(-50vw); }
  100% { transform: translateX(0); }
}

@keyframes glisse-droite {
  0% { transform: translateX(+50vw); }
  100% { transform: translateX(0); }
}

@media (min-width: 1000px) {
  body.blog h1,
  body:not(.home, .single-post, .woocommerce).wp-singular h1:first-child {
    text-align: left;
    font-size: 2.6em;
  }

  body.blog h1::before,
  body:not(.home, .single-post, .woocommerce).wp-singular h1:first-child::before {
    content: "";
    display: inline-block;
    width: 150px;
    height: 40px;
    background: url("images/traits-du-logo.svg") 4px 87% / auto 50% no-repeat;
    animation: glisse-gauche 1s;
  }

  body.blog h1::after,
  body:not(.home, .single-post, .woocommerce).wp-singular h1:first-child::after {
    width: max(80%, calc(100% - 170px));
    margin-left: 150px;
    border-image: linear-gradient(to right, var(--wp--preset--color--or-epsvb), transparent) 0 1 1 1;
    border-top-width: 0;
    animation: glisse-droite 1s;
  }

  div.epsvb-2026-titre-h2-bleu h2 {
    padding: 5px 25px 5px 50px;
    width: fit-content;
    border-width: 0 30px 0 0;
    border-style: solid;
    border-image: url("images/biseau-bleu-electrique.svg") 0 50% 0 0;
  }
}

.epsvb-2026-message-exceptionnel {
  background: yellow;
  box-sizing: border-box;
  max-width: 760px;
  margin: 2em auto 0;
  margin-right: auto;
  margin-left: auto;
  padding: 2em;
  border-image: url("images/chantier.png") 440 110/20px 0 repeat;
}


.epsvb-2026-message-temporaire {
  max-width: 540px;
  margin: 20px auto;
  padding: 40px 10px;
  background:
    url("images/trombone-bas.svg"),
    url("images/post-it.png"),
    url("images/trombone-haut.svg");
  background-position:
    18px -5px,
    center 20px,
    15px 7px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    44px auto,
    100% calc(100% - 40px),
    35px auto;
}

.wp-block-query-pagination-numbers .page-numbers {
  padding: 3px 4px;
}

.wp-block-query-pagination-numbers .page-numbers.current {
  background: var(--wp--preset--color--or-epsvb);
  padding: 4px 7px;
  border-radius: 3px;
}

a.wp-block-query-pagination-previous {
  text-decoration-inset: 1em 0;
}

a.wp-block-query-pagination-previous::before {
  content: "◀ ";
  color: gray;
}

a.wp-block-query-pagination-next {
  text-decoration-inset: 0 1em;
}

a.wp-block-query-pagination-next::after {
  content: " ▶";
  color: gray;
}

.wp-block-query-pagination-numbers::before {
  content: "Pages ";
}

@media (max-width: 500px) {
  nav.wp-block-query-pagination-is-layout-flex {
    justify-content: center;
  }

  nav.wp-block-query-pagination-is-layout-flex :nth-child(2) {
    order: 3;
  }
}

body:not(.wp-admin) .epsvb-2026-img-zoom img {
  animation: zoom 1.5s infinite;
}

@keyframes zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

body:not(.wp-admin) .epsvb-2026-picto-avion img {
  animation: glisse-gauche 1s paused;
}

body:not(.wp-admin) .epsvb-2026-picto-cadeau img {
  animation: glisse-droite 1s paused;
}

/* ========================= résa / bons cadeaux  ========================= */
#etape-formulaire h2:not(.wp-block-heading) {
  background: var(--wp--preset--color--jaune-paille);
  padding: 5px 10px;
  text-align: center;
}

h2 span.numero {
  background: var(--wp--preset--color--or-epsvb);
  color: white;
  border-radius: 999em;
  padding: 0 0.3em;
}

.idem-contact-sautant {
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .idem-contact-sautant {
    white-space: normal;
    display: block;
  }
}

#securise-avec-payline {
  display: flex;
  gap: 1em;
  justify-content: center;
  font-size: 0.8em;
}

#securise-avec-payline img.logo-paiement {
  max-height: 200px;
  height: auto;
}

.form-pararesa .required::after {
  content: "*";
  color: red;
  margin-left: 0.5em;
}

.form-pararesa .errors {
  box-shadow: 3px 3px #a97d7d;
  color: black;
  background-color: #dacccc;
  padding: 0.5em 1em;
  margin: 1em 0;
  list-style-position: inside;
}

.form-pararesa .errors ul {
  padding-left: 1em;
}

.form-pararesa .invalid {
  border: 2px solid red !important;
  padding: 1em !important;
  margin-bottom: 1em;
}

.form-pararesa .heure-tandem {
  margin-bottom: 1em;
}

.form-pararesa label {
  display: block;
}

.form-pararesa label[for="commentaire"] span {
  color: red;
}

.form-pararesa label[for^="prolongebon"] {
  display: inline-block;
  margin: 0;
}

.form-pararesa label[for^="bon"] {
  font-weight: bold;
}

.form-pararesa label .places-disponibles.dispo {
  color: #bd9d13;
}

.form-pararesa input + label {
  display: inline;
  margin-right: 1em;
}

.form-pararesa input + label:last-child {
  margin-right: 0;
}

.form-pararesa input,
.form-pararesa textarea {
  width: 100%;
}

.form-pararesa input[type="radio"],
.form-pararesa input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
}

.form-pararesa input[type="text"],
.form-pararesa input[type="email"],
.form-pararesa input[type="number"],
.form-pararesa input[type="tel"],
.form-pararesa div.checkbox-row,
.form-pararesa textarea {
  margin: 0.5em 0 2em;
  border: 1px solid rgb(204 204 204 / 80%);
  padding: 12px 7px;
  font-size: 0.9em;
}

.form-pararesa textarea {
  height: 90px;
  resize: vertical;
}

.form-pararesa div.checkbox-row {
  border: 0;
}

.form-pararesa div.checkbox-row.invalid {
  padding: 12px 7px !important;
}

.form-pararesa input[id^="prolongebon"] {
  width: auto;
  vertical-align: middle;
}

.form-pararesa fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.form-pararesa fieldset.options {
  padding: 1em 0;
}

.form-pararesa fieldset legend {
  font-weight: bold;
}

.form-pararesa fieldset legend small {
  font-weight: normal;
}

.form-pararesa fieldset legend.section {
  font-size: 1.3em;
  margin: 1em 0;
}

.form-pararesa fieldset .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10%;
  row-gap: 20px;
}

@media screen and (max-width: 640px) {
  .form-pararesa fieldset .grid {
    display: block;
  }
}

.form-pararesa fieldset .grid legend,
.form-pararesa fieldset .grid .colspan {
  grid-column: 1/3;
}

.form-pararesa fieldset .grid .colspan {
  margin-bottom: 1em;
}

.form-pararesa fieldset ul {
  margin-top: 0;
}

.form-pararesa .form-prix {
  display: inline-block;
  color: black;
  background: #ffffa6;
  padding: 0.5em;
}

.form-pararesa #detail-montants {
  display: block;
  margin: 1em 0;
  padding: 0 1em;
  background: #ddd;
  border: 1px solid #aaa;
  border-radius: 5px;
}

.form-pararesa #detail-montants ul,
.form-pararesa #detail-montants .total {
  padding-left: 2em;
  font-size: 0.9em;
}

.form-pararesa #detail-montants #detail-arrhes,
.form-pararesa #detail-montants #detail-total {
  margin: 1em;
  color: #555;
}

.form-pararesa #saisie-bon-cadeau {
  margin: 1em 2em;
}

.form-pararesa .choice-line {
  margin: 1em 0;
}

.form-pararesa #buttons {
  margin-top: 3em;
  display: flex;
  /* 10 % sur PC, 2em si ça wrap */
  gap: max(2em, 10%);
  flex-wrap: wrap;
  justify-content: center;
}

.form-pararesa #buttons button {
  max-width: 270px;
  font-size: 1em;
}

.form-pararesa #buttons button img {
  display: block;
  margin-bottom: 0.5em;
}

.form-pararesa #securise-avec-payline {
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2em;
}

.form-pararesa #date_fin {
  color: #777;
  margin-top: 0.5em;
  display: flex;
  height: 45px;
  align-items: center;
  font-size: 0.9em;
}

.form-pararesa #nb_places_dispo {
  color: #777;
  font-size: 0.7em;
  margin: -1.5rem 0 1rem 1.5rem;
  min-height: 20px;
}

.form-pararesa button {
  cursor: pointer;
}

.form-pararesa button.etape-retour {
  color: #25295d;
  border: 1px solid #25295d;
  font-weight: bold;
  margin-top: 4em;
  padding: 1em;
}

.form-pararesa button.etape-retour .fleche-retour {
  display: inline-block;
  height: 15px;
  vertical-align: middle;
}

.form-pararesa button img {
  font-size: 2em;
  font-weight: bold;
  text-decoration: underline;
}

.form-pararesa button[id*="_identique_"] {
  background: #066ff9;
  color: white;
  margin-left: 10px;
  border-radius: 5px;
  vertical-align: middle;
  border: none;
}

.form-pararesa button[id*="_identique_"]:nth-child(even) {
  background: #009bbf;
}

.form-pararesa span.incassable button[id*="_identique_"] {
  margin-left: 0;
  margin-right: 10px;
}

.form-pararesa .supprime-beneficiaire {
  float: right;
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-left: 1em;
  background: #ddd;
  border: 1px solid #aaa;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
}

.form-pararesa [id="beneficiaire[0]"] .supprime-beneficiaire {
  display: none;
}

#enquete-source {
  font-size: 0.8em;
  margin-top: 2em;
  padding: 1em;
  background: #d2e2f0;
  border-radius: 20px;
}

#enquete-source legend {
  background: #a3cefd;
  border-radius: 9999px;
  padding: 0.5em 1em;
}

#enquete-source > div {
  margin: 1em 3em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 900px) {
  #enquete-source > div {
    display: block;
  }
}

/* ci-dessous, ce qu'on ne peut pas (encore) faire dans theme.json
 * voir "core/button" sous "settings" et sous "styles"
 * note : impossible de désactiver le réglage Ombre, c'est un bug Gutenberg
 * cf https://github.com/WordPress/gutenberg/issues/48753
 */
.wpcf7-submit,
body:not(.home, .wp-admin) *:not(.is-style-outline) > .wp-element-button {
  transition: all 0.3s ease;
  animation: pulse 1.5s ease-in-out infinite;
}

header.wp-block-template-part .wp-element-button {
  animation: none !important;
}

.wpcf7-submit:hover,
body:not(.home) *:not(.is-style-outline) > .wp-element-button:hover {
  border-color: var(--wp--preset--color--bronze);
  animation-play-state: paused;
}

@keyframes pulse {
  0% {
    filter: contrast(100%);
  }

  50% {
    filter: contrast(150%);
  }

  100% {
    filter: contrast(100%);
  }
}

.wp-block-woocommerce-add-to-cart-form .quantity .qty {
  width: 5em;
}

#planning_accueil {
  text-align: center;
}

#planning_accueil img,
#webcam-image video,
#webcam-image img {
  max-width: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background: var(--wp--preset--color--bleu-epsvb);
    color: white;
  }

  a:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--bleu-electrique) !important;
  }

  h2.wp-block-post-title a {
    color: white !important;
  }

  .wp-block-site-logo {
    filter: invert(1) grayscale(1);
  }

  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: white !important;
  }

  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__submenu-container.menu-item,
  .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
    background-color: var(--wp--preset--color--bleu-epsvb) !important;
    color: white !important;
  }

  .has-bleu-ciel-background-color {
    color: var(--wp--preset--color--bleu-epsvb) !important;
    background-color: var(--wp--preset--color--or-fonce) !important;
  }

  .has-jaune-paille-background-color {
    color: var(--wp--preset--color--bleu-epsvb) !important;
    background-color: var(--wp--preset--color--or-fonce) !important;
  }

  #déroulement {
    color: var(--wp--preset--color--bleu-epsvb) !important;
  }

  #question,
  #question a {
    color: var(--wp--preset--color--bleu-electrique) !important;
  }

  footer::after {
    content: "(Vous visualisez notre site web en mode nocturne)";
    color: #777;
    font-size: 0.8rem;
    display: block;
    text-align: center;
    margin: 1em;
  }

  footer.wp-block-template-part .has-bleu-epsvb-background-color {
    background-color: var(--wp--preset--color--bleu-electrique) !important;
  }

  #etape-formulaire h2:not(.wp-block-heading) {
    background: var(--wp--preset--color--or-fonce);
  }
}