@font-face {
    font-family: 'cocogothicproaltbold';
    src: url('assets/fonts/cocogothicproalt-bold-webfont.woff2') format('woff2'),
         url('assets/fonts/cocogothicproalt-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cocogothicproaltheavy';
    src: url('assets/fonts/cocogothicproalt-heavy-webfont.woff2') format('woff2'),
         url('assets/fonts/cocogothicproalt-heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cocogothicproaltitalic';
    src: url('assets/fonts/cocogothicproalt-italic-webfont.woff2') format('woff2'),
         url('assets/fonts/cocogothicproalt-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cocogothicproaltlight';
    src: url('assets/fonts/cocogothicproalt-light-webfont.woff2') format('woff2'),
         url('assets/fonts/cocogothicproalt-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cocogothicproaltregular';
    src: url('assets/fonts/cocogothicproalt-regular-webfont.woff2') format('woff2'),
         url('assets/fonts/cocogothicproalt-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.texte_bleu_fonce,
.texte_bleu_fonce p,
.content-area .texte_bleu_fonce {
	color: var(--couleur-1);
}

.texte_bleu,
.texte_bleu p,
.content-area .texte_bleu {
	color: var(--couleur-4);
}

.bloc-contenu-double a,
.bloc-infos a {
  text-decoration: underline !important;
  font-family: var(--font-cc-bold);
}

.bloc-contenu-double a:hover,
.bloc-infos a:hover {
  text-decoration: none !important;
  color: var(--couleur-4);
}

.bloc-contenu-double .bloc-vide .col-jaune,
.bloc-contenu-double .bloc-vide .col-bleu {
  color: #fff !important;
}

@media (max-width: 767px) {
    #page_header {
        margin-top: 150px;
    }
  .bloc-vide {
    display: none !important;
  }
}

/* ===== Bandeau H1  ===== */
.bandeau-page {
  position: relative;
  display: flex;
  justify-content: center;   /* cartouche centré */
  align-items: flex-end;     /* posé sur le bas */
  aspect-ratio: 13 / 3;      /* proportion de la maquette */
  min-height: 14rem;         /* évite un bandeau trop fin sur mobile */
  max-width: 100%;;
  background: var(--couleur-1);
  overflow: hidden;
  margin-bottom: 30px;
}

.bandeau-page__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.bandeau-page__titre {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0.15em .2em 0;
  background: #fff;
  color: #1a1a1a;
  font-size: clamp(3rem, 4vw, 6rem);
  font-family: var(--font-cc-light);
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
  text-transform: none;
  max-width: calc(100% - 1.2rem); /* marge de sécurité sur petit écran */
}



.elementor-element h2 {
  margin: 0 0 1.5rem;
  font-family: var(--font-cc-bold);
  font-size: clamp(2rem, 3.2vw, 4rem) !important;
  font-weight: normal;
  line-height: 1.1;
  text-transform: uppercase;
}
.elementor-element p.text-grand,
.elementor-element .text-grand {
  font-size: clamp(1.4rem, 1.8vw, 2rem);
  font-weight: normal;
  line-height: 1.15;
}
.elementor-element p {
  font-size: clamp(1.4rem, 1.5vw, 1.6rem);
  font-weight: normal;
  line-height: 1.25;
}



/* ===== Bloc contenu double ===== */
.bloc-contenu-double {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 3rem;
  align-items: start;
  font-family: var(--font-cc);
}

/* Couleur d'accent par classe (Avancé > Classes CSS du widget) */
.bloc-contenu-double .col-bleu  { --accent: var(--couleur-4); --titre: var(--couleur-1); }
.bloc-contenu-double .col-jaune { --accent: var(--couleur-2); --titre: var(--couleur-4); }

/* Colonne */
.bloc-contenu-double > .elementor-widget-text-editor {
  color: var(--couleur-1);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Bloc avec couleur en haut */
.bloc-contenu-double .col-bleu,
.bloc-contenu-double .col-jaune {
  color: var(--couleur-1);
}

/* Barre de couleur en haut */
.bloc-contenu-double .col-bleu::before,
.bloc-contenu-double .col-jaune::before {
  content: "";
  display: block;
  height: 18px;
  margin-bottom: 1.5rem;
  background: var(--accent, var(--couleur-4));
}

/* Paragraphes : marge seulement entre blocs */
.bloc-contenu-double p { margin: 0 0 1.4em; }
.bloc-contenu-double p:last-child { margin-bottom: 0; }

/* Grand titre */
.bloc-contenu-double h2 {
  color: var(--titre, var(--couleur-1));
}

/* Second titre de la colonne (ex. Frais de participation) */
.bloc-contenu-double * + h2 { margin-top: 3.5rem; }

/* Chapô */
.bloc-contenu-double .wd_chapo {
  font-size: clamp(1.75rem, 2vw, 2.6rem);
  line-height: 1.25;
  margin-bottom: 1.5em;
}

.bloc-contenu-double h3 {
  margin: 1.8rem 0 .1rem;
  color: var(--couleur-4);
  font-family: var(--font-cc-bold);
  font-size: 1.6rem !important;
  font-weight: normal;
  line-height: 1.08;
  text-transform: uppercase;
}

/* Petits intitulés (Âge, Nationalité…) */
.bloc-contenu-double p.text-mini {
  margin: 1.5rem 0 0.1rem;
  color: var(--couleur-4);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.bloc-contenu-double h2 + h3 { margin-top: 0; }
.bloc-contenu-double h3 + p { margin-bottom: 0; }

/* Mise en avant en bleu clair dans un texte */
.bloc-contenu-double .accent,
.bloc-infos .accent { 
  color: var(--couleur-4); 
  font-family: var(--font-cc-bold);
}

/* Remarque en graisse normale */
.bloc-contenu-double .note {
  margin-top: 1.5rem;
  font-weight: 400;
  font-size: 0.95rem;
}

/* ===== Responsive ===== */
@media (max-width: 767px) {
  .bloc-contenu-double { grid-template-columns: 1fr; }
}



/* ==================================================================================
   CARTES EN APLAT - 4 BLOCS
================================================================================== */

/* Alternance desktop : bleu / jaune / bleu / jaune */
.bloc-cartes > .elementor-element:nth-child(odd)  { --accent: var(--couleur-4); }
.bloc-cartes > .elementor-element:nth-child(even) { --accent: var(--couleur-2); }

.bloc-cartes > .elementor-element {
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: clamp(1rem, 1.6vw, 1.5rem);
  margin-bottom: 0 !important;
  background: var(--accent);
  color: #fff;
}

.bloc-cartes h2 {
  min-height: calc(4 * 1.05em); /* texte aligné en haut, titres jusqu'à 4 lignes */
  color: #fff;
}
/* La carte sert de repère au lien étiré */
.bloc-cartes > .elementor-element {
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Lien du titre : même apparence que le titre */
.bloc-cartes h2 a {
  color: inherit;
  text-decoration: none;
}

/* Le lien couvre toute la carte */
.bloc-cartes h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Survol : légère élévation */
.bloc-cartes > .elementor-element:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(55 55 153 / .18);
}

/* Navigation clavier : contour visible sur toute la carte */
.bloc-cartes h2 a:focus { outline: none; }
.bloc-cartes h2 a:focus-visible::after {
  outline: 3px solid var(--couleur-1);
  outline-offset: 3px;
}

/* Pas d'animation pour qui l'a désactivée */
@media (prefers-reduced-motion: reduce) {
  .bloc-cartes > .elementor-element { transition: none; }
  .bloc-cartes > .elementor-element:hover { transform: none; }
}

.bloc-cartes p {
  margin: 0;
  font-family: var(--font-cc);
  font-size: clamp(1rem, 1.4vw, 3rem) !important;
  line-height: 1.25;
  margin-bottom: 0;
}

/* =========================================
   INFOS AVEC BARRE
   ========================================= */

.bloc-infos > .elementor-element:nth-child(odd)  { --accent: var(--couleur-4); }
.bloc-infos > .elementor-element:nth-child(even) { --accent: var(--couleur-2); }

.bloc-infos > .elementor-element {
  color: var(--couleur-1);
  font-size: 1.6rem;
  line-height: 1.35;
}

.bloc-infos > .elementor-element::before {
  content: "";
  display: block;
  height: 14px;
  margin-bottom: 1.25rem;
  background: var(--accent);
}

/* Titre */
.bloc-infos h3 {
  margin: 0 0 2.5rem;
  color: var(--couleur-1);
  font-family: var(--font-cc-bold);
  font-size: clamp(2.5rem, 3vw, 3.8rem) !important;
  font-weight: normal;
  line-height: 1.08;
  text-transform: uppercase;
}
.bloc-infos h3 .accent {
  display: block;          /* passe à la ligne sans <br> */
  color: var(--couleur-4);
}
.bloc-infos h3 sup { font-size: 0.5em; }

/* Intitulé de groupe (Session estivale…) */
.bloc-infos h4,
.bloc-contenu-double .text-grand h3 {
  margin: 1.5rem 0 0;
  color: var(--couleur-1) !important;
  font-family: var(--font-cc-bold);
  font-size: 1.6rem;
  font-weight: normal;
  text-transform: uppercase;
}
.bloc-infos h3 + h4 { margin-top: 0; }

.bloc-infos p { margin: 0 0 1.2em; }
.bloc-infos h4 + p { margin-top: 0; }

/* Ligne bleu clair (dates, compositeurs, villes) */
.bloc-infos .label {
  color: var(--couleur-4);
  font-weight: 700;
  text-transform: uppercase;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {
    .elementor .e-grid-base.bloc-cartes {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 8px;
        row-gap: 8px;
    }
    .elementor .e-grid-base.bloc-infos {
        column-gap: 10px;
        row-gap: 10px;
    }

  /* Damier : 3e carte jaune, 4e bleue */
  .bloc-cartes > .elementor-element:nth-child(4n+3) { --accent: var(--couleur-2); }
  .bloc-cartes > .elementor-element:nth-child(4n+4) { --accent: var(--couleur-4); }

  .bloc-cartes > .elementor-element { padding: 0.75rem; margin-bottom: 0 !important; }
  .bloc-cartes h2 {
    min-height: 0;
    margin: 0;
    font-size: 2rem;
  }
  .bloc-cartes p { display: none; }

  .bloc-infos h3 { margin-bottom: 1.5rem; }
}


/* Lien fléché */
.lien-fleche { margin-top: 2.5rem !important }

.lien-fleche a {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--couleur-2);
  font-family: var(--font-cc-heavy);
  font-size: 1.3rem;
  font-weight: normal;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.lien-fleche a::before {
  content: "";
  flex: none;
  height: 2em;
  aspect-ratio: 26.31 / 33.651;   /* proportions du picto */
  background: currentColor;       /* prend la couleur du texte */
  -webkit-mask: var(--icone-fleche) center / contain no-repeat;
          mask: var(--icone-fleche) center / contain no-repeat;
}

.lien-fleche a:hover,
.lien-fleche a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   Grille équipe pédagogique [equipe_peda]
   ========================================================================== */
.equipe-peda {
    --ep-gap-x: 30px;
    --ep-gap-y: 28px;

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ep-gap-y) var(--ep-gap-x);
    padding: 10px 10px 20px;
}

.equipe-peda .equipe-peda__photo {
    aspect-ratio: 1 / 1;
    background: #717171;
    overflow: hidden;
    margin-bottom: 12px;
}

.equipe-peda .equipe-peda__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.equipe-peda .equipe-peda__texte {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--couleur-1);
}

.equipe-peda .equipe-peda__pupitre,
.equipe-peda .equipe-peda__nom,
.equipe-peda .equipe-peda__origine {
    display: block;
}

.equipe-peda .equipe-peda__pupitre,
.equipe-peda .equipe-peda__nom {
    font-weight: 700;
    text-transform: uppercase;
}

.equipe-peda .equipe-peda__nom {
    color: var(--couleur-4);
}

/* Tablette */
@media (max-width: 1024px) {
    .equipe-peda {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .equipe-peda {
        --ep-gap-x: 8px;
        --ep-gap-y: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .equipe-peda .equipe-peda__photo {
        margin-bottom: 10px;
    }
    .equipe-peda .equipe-peda__texte {
        font-size: 13px;
        line-height: 1.35;
    }
}