/*
 * Modèle « Page à blocs » (template-page-blocs.php).
 * Toutes les classes sont préfixées upb- ; la base vient de up.min.css
 * (.page-main-content h2/h3/p, .main-content-container).
 */

/********** Couleurs **********/

.upb-page .upb-c--bleu         { --upb-c: #0e2983; }
.upb-page .upb-c--bleu-clair   { --upb-c: #6191ca; }
.upb-page .upb-c--violet       { --upb-c: #a15796; }
.upb-page .upb-c--violet-clair { --upb-c: #b96baa; }
.upb-page .upb-c--rose         { --upb-c: #c21f54; }
.upb-page .upb-c--gris         { --upb-c: #e9eff1; }

.upb-page .upb-t--bleu         { --upb-t: #0e2983; }
.upb-page .upb-t--bleu-clair   { --upb-t: #6191ca; }
.upb-page .upb-t--violet       { --upb-t: #a15796; }
.upb-page .upb-t--violet-clair { --upb-t: #b96baa; }
.upb-page .upb-t--rose         { --upb-t: #c21f54; }

/* Couleur d'un titre choisie dans l'admin (upb_title_colors()) */
.upb-page .upb-titre.upb-tc--bleu         { color: #0e2983; }
.upb-page .upb-titre.upb-tc--bleu-clair   { color: #6191ca; }
.upb-page .upb-titre.upb-tc--violet       { color: #a15796; }
.upb-page .upb-titre.upb-tc--violet-clair { color: #b96baa; }
.upb-page .upb-titre.upb-tc--rose         { color: #c21f54; }
.upb-page .upb-titre.upb-tc--blanc        { color: #fff; }
.upb-page .upb-titre.upb-tc--noir         { color: #000; }

/********** Bandeau de titre (#introBanner) **********/

/*
 * up.min.css place #introBanner en position: absolute (top: 6rem) et descend le
 * contenu d'une marge fixe (13rem, 15rem sous 1150px), calibrée pour un titre
 * sur une ligne : un H1 sur 2 ou 3 lignes faisait passer le contenu sous le
 * bandeau. Sur ce gabarit, le bandeau repasse dans le flux : le contenu suit sa
 * hauteur réelle. La marge négative garde le chevauchement d'origine avec le
 * header (138px - 96px). Sous 500px, up.min.css remet déjà le bandeau dans le
 * flux : on n'y touche pas.
 */
@media all and (min-width: 501px) {
  body.page-template-template-page-blocs #introBanner {
    position: relative;
    top: auto;
    margin-top: -42px;
  }

  body.page-template-template-page-blocs .upb-page {
    margin-top: 2.5rem;
  }
}

/********** Structure **********/

.upb-page .upb-bloc {
  margin: 0 0 3rem;
  scroll-margin-top: 10rem;
}

.upb-page .upb-bloc:last-child {
  margin-bottom: 0;
}

/********** Titres **********/

.upb-page .upb-titre--simple {
  margin: 0 0 1.5rem;
}

/********** Texte riche **********/

.upb-page .upb-wysiwyg {
  font-family: "Mundial", sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.38;
  color: #000;
}

.upb-page .upb-wysiwyg p,
.upb-page .upb-wysiwyg ul,
.upb-page .upb-wysiwyg ol {
  color: inherit;
  margin: 0 0 1rem;
}

/* up.min.css impose p { text-align: left } : les blocs centrés doivent pouvoir le surcharger. */
.upb-page .upb-bloc p {
  text-align: inherit;
}

.upb-page .upb-wysiwyg > :last-child {
  margin-bottom: 0;
}

.upb-page .upb-wysiwyg ul,
.upb-page .upb-wysiwyg ol {
  padding-left: 1.5rem;
}

.upb-page .upb-wysiwyg ul li {
  list-style: disc;
}

.upb-page .upb-wysiwyg ol li {
  list-style: decimal;
}

.upb-page .upb-wysiwyg b,
.upb-page .upb-wysiwyg strong {
  font-weight: 700;
}

.upb-page .upb-wysiwyg a {
  color: inherit;
  text-decoration: underline;
}

.upb-page .upb-wysiwyg h3,
.upb-page .upb-wysiwyg h4 {
  margin: 1.5rem 0 1rem;
}

/********** Boutons **********/

.upb-page .upb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 1px #fff;
  border-radius: 22px;
  color: #fff;
  padding: 0.5rem 1rem;
  text-decoration: none;
  letter-spacing: 0.96px;
  font-family: "RocGroteskBold", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  transition: opacity 0.2s;
}

.upb-page .upb-btn:after {
  font-family: "FontAwesome";
  font-size: 18px;
  font-weight: bold;
  content: '\f324';
  padding-left: 0.5rem;
}

.upb-page .upb-btn:hover,
.upb-page .upb-btn:focus-visible {
  opacity: 0.85;
}

.upb-page .upb-btn--plein {
  background: var(--upb-c, #0e2983);
  border-color: var(--upb-c, #0e2983);
}

/* Bloc 3 : bouton seul */

.upb-page .upb-bouton {
  display: flex;
  justify-content: center;
}

.upb-page .upb-bouton--gauche {
  justify-content: flex-start;
}

.upb-page .upb-bouton--droite {
  justify-content: flex-end;
}

/********** Icônes **********/

.upb-page .upb-icone {
  display: inline-block;
  width: 52px;
  height: 52px;
  background: currentColor;
  -webkit-mask: var(--upb-icone) center / contain no-repeat;
  mask: var(--upb-icone) center / contain no-repeat;
}

.upb-page .upb-icone--vide {
  background: none;
}

/********** Blocs 1, 2, 4 : texte + image(s) **********/

.upb-page .upb-texte-image {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.upb-page .upb-texte-image--gauche {
  flex-direction: row-reverse;
}

.upb-page .upb-texte-image__texte {
  flex: 1;
  min-width: 0;
}

.upb-page .upb-texte-image__images {
  flex: 0 0 43%;
  display: flex;
  gap: 1rem;
}

.upb-page .upb-texte-image--2-images .upb-texte-image__images {
  flex-basis: 50%;
}

.upb-page .upb-texte-image__images img {
  display: block;
  flex: 1;
  min-width: 0;
  width: 100%;
  height: auto;
  border-radius: 5px;
  object-fit: cover;
}

.upb-page .upb-texte-image--2-images .upb-texte-image__images img {
  aspect-ratio: 3 / 4;
}

/* Fond coloré facultatif ; sur fond foncé, texte et titre (automatique) en blanc */

.upb-page .upb-texte-image.upb-avec-fond {
  background: var(--upb-c);
  padding: 3rem;
  border-radius: 5px;
}

.upb-page .upb-fond-fonce .upb-wysiwyg,
.upb-page .upb-fond-fonce .upb-titre:not([class*="upb-tc--"]) {
  color: #fff;
}

/********** Blocs 5, 6 : bandeau d'appel à l'action **********/

.upb-page .upb-bandeau {
  background: var(--upb-c);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  color: #fff;
  text-align: center;
}

.upb-page .upb-bandeau .upb-bandeau__titre {
  font-size: 27px;
  line-height: 1.3;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.upb-page .upb-bandeau .upb-bandeau__titre:before {
  display: none;
}

.upb-page .upb-bandeau .upb-bandeau__titre:after {
  content: "";
  width: 60px;
  margin-top: 10px;
  border-bottom: solid 5px #ffd41f;
}

.upb-page .upb-bandeau__texte {
  color: #fff;
  line-height: 1.3;
}

.upb-page .upb-bandeau__texte ul,
.upb-page .upb-bandeau__texte ol {
  display: inline-block;
  text-align: left;
}

.upb-page .upb-bandeau__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.upb-page .upb-btn--contour {
  background: transparent;
}

.upb-page .upb-bandeau__info {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 56rem;
  max-width: 100%;
  background: #fff;
  padding: 1rem;
  text-align: center;
}

.upb-page .upb-bandeau__info-picto {
  flex: 0 0 4rem;
  width: 4rem;
  height: auto;
}

.upb-page .upb-bandeau__info-texte,
.upb-page .upb-bandeau__info-texte p {
  flex: 1;
  color: #000;
  font-size: 14px;
}

.upb-page .upb-bandeau__info-texte a {
  color: #0e2983;
}

/* Inscription newsletter (bloc 5) */

.upb-page .upb-newsletter {
  width: 32rem;
  max-width: 100%;
  margin: 0;
}

.upb-page .upb-newsletter__champ {
  display: flex;
  border: solid 1px #fff;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
}

.upb-page .upb-newsletter input[type="email"] {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0.6rem 1rem;
  font-family: "Mundial", sans-serif;
  font-size: 16px;
  color: #000;
  background: #fff;
}

.upb-page .upb-newsletter input[type="email"]:focus-visible {
  outline: 2px solid #ffd41f;
  outline-offset: -2px;
}

.upb-page .upb-newsletter button {
  flex: 0 0 auto;
  border: none;
  padding: 0.6rem 1.4rem;
  background: var(--upb-c, #0e2983);
  color: #fff;
  font-family: "RocGroteskBold", sans-serif;
  font-size: 16px;
  cursor: pointer;
  border-left: solid 1px #fff;
}

.upb-page .upb-newsletter button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.upb-page .upb-newsletter__piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.upb-page .upb-newsletter .upb-newsletter__message {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #fff;
  color: #0e2983;
  font-weight: 700;
}

.upb-page .upb-newsletter .upb-newsletter__message.is-error {
  color: #c21f54;
}

.upb-page .upb-newsletter .upb-newsletter__mention {
  margin-top: 0.75rem;
  font-size: 13px;
  line-height: 1.35;
  color: #fff;
  opacity: 0.85;
}

.upb-page .upb-newsletter .upb-newsletter__apercu {
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: #ffd41f;
  color: #000;
  font-size: 13px;
}

/********** Blocs 7, 9 : image + panneau coloré **********/

.upb-page .upb-image-panneau {
  display: flex;
  color: #fff;
}

.upb-page .upb-image-panneau__panneau {
  flex: 1;
  min-width: 0;
  background: var(--upb-c);
}

.upb-page .upb-image-panneau .upb-image-panneau__titre {
  color: #fff;
  margin: 0 0 1.5rem;
}

.upb-page .upb-image-panneau .upb-image-panneau__titre:before {
  display: none;
}

.upb-page .upb-image-panneau__texte {
  color: #fff;
}

.upb-page .upb-image-panneau__image {
  display: block;
  object-fit: cover;
}

/* Variante debord : l'image dépasse du panneau */

.upb-page .upb-image-panneau--debord {
  align-items: center;
  background: var(--upb-c);
  border-radius: 5px;
  padding: 0 3rem 0 2.5rem;
  gap: 2rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.upb-page .upb-image-panneau--debord .upb-image-panneau__image {
  flex: 0 0 264px;
  align-self: stretch;
  width: 264px;
  height: auto;
  min-height: 300px;
  margin: -1rem 0;
  border-radius: 5px;
}

.upb-page .upb-image-panneau--debord .upb-image-panneau__panneau {
  padding: 3rem 0;
}

.upb-page .upb-image-panneau--debord .upb-image-panneau__titre {
  font-size: 22px;
}

.upb-page .upb-image-panneau--debord.upb-image-panneau--sans-image {
  padding-left: 3rem;
}

/* Variante liste : image à côté, tirets jaunes qui débordent sur l'image */

.upb-page .upb-image-panneau--liste {
  align-items: flex-end;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__image {
  flex: 0 0 37%;
  width: 37%;
  height: 30rem;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__panneau {
  padding: 3rem;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__titre {
  font-size: 32px;
  display: flex;
  flex-direction: column;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__titre:after {
  content: "";
  width: 67px;
  margin-top: 10px;
  border-bottom: solid 5px #ffd41f;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul {
  padding: 0;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li {
  list-style: none;
  position: relative;
  padding-left: 10px;
  margin-bottom: 1rem;
  font-size: 18px;
  line-height: 24px;
}

.upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li:before {
  content: "";
  position: absolute;
  left: -84px;
  top: 10px;
  width: 70px;
  border-bottom: solid 2px #ffd41f;
}

/********** Bloc 8 : chiffres clés **********/

.upb-page .upb-chiffres {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  text-align: center;
}

.upb-page .upb-chiffres .upb-chiffres__surtitre {
  font-family: "RocGroteskBold", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}

.upb-page .upb-chiffres .upb-chiffres__titre {
  font-size: 33px;
  color: #000;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.upb-page .upb-chiffres .upb-chiffres__titre:before {
  display: none;
}

.upb-page .upb-chiffres .upb-chiffres__titre:after {
  content: "";
  width: 67px;
  margin-top: 10px;
  border-bottom: solid 5px #0e2983;
}

.upb-page .upb-chiffres__cartes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 1rem;
  margin: 0;
  padding: 0;
  width: 100%;
}

.upb-page .upb-chiffre {
  list-style: none;
  width: 14rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  text-align: left;
  background: var(--upb-c);
  color: #fff;
  border-radius: 5px;
  font-family: "Mundial", sans-serif;
}

/* Une carte colorée suivie d'une grise forment une paire ; les paires sont espacées. */
.upb-page .upb-chiffre + .upb-chiffre:not(.upb-c--gris) {
  margin-left: 2rem;
}

.upb-page .upb-chiffre:not(.upb-c--gris) + .upb-c--gris {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.upb-page .upb-chiffre:not(.upb-c--gris):has(+ .upb-c--gris) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.upb-page .upb-chiffre.upb-c--gris {
  color: var(--upb-t, #a15796);
}

.upb-page .upb-chiffre p {
  color: inherit;
  margin: 0;
}

.upb-page .upb-chiffre .upb-chiffre__valeur {
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.upb-page .upb-chiffre__nombre {
  font-size: 50px;
  font-weight: 300;
}

.upb-page .upb-chiffre .upb-chiffre__libelle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.upb-page .upb-chiffre.upb-c--gris .upb-chiffre__libelle {
  color: #000;
}

.upb-page .upb-chiffre .upb-chiffre__libelle b,
.upb-page .upb-chiffre .upb-chiffre__libelle strong {
  font-weight: 700;
}

/********** Blocs 11, 12 : cartes **********/

.upb-page .upb-cartes__intro {
  margin-bottom: 2rem;
}

.upb-page .upb-cartes__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.upb-page .upb-carte {
  background: var(--upb-c);
  color: #fff;
  border-radius: 30px;
  padding: 3rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: "Mundial", sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.4;
}

.upb-page .upb-carte:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 0.5rem);
}

.upb-page .upb-carte.upb-c--gris {
  color: var(--upb-t, #a15796);
}

.upb-page .upb-carte .upb-carte__titre {
  font-size: 36px;
  line-height: 1.15;
  color: inherit;
  margin: 0 0 1.5rem;
}

.upb-page .upb-carte p,
.upb-page .upb-carte .upb-wysiwyg {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.upb-page .upb-carte p,
.upb-page .upb-carte .upb-wysiwyg,
.upb-page .upb-carte .upb-carte__liste {
  margin: 0 0 1.5rem;
}

.upb-page .upb-carte > :last-child {
  margin-bottom: 0;
}

.upb-page .upb-carte .upb-carte__accroche {
  font-weight: 700;
}

.upb-page .upb-carte .upb-carte__liste-titre {
  font-weight: 700;
  text-decoration: underline;
  margin-bottom: 1rem;
}

.upb-page .upb-carte__liste {
  padding: 0;
}

.upb-page .upb-carte__liste li {
  list-style: none;
}

/********** Responsive **********/

@media all and (max-width: 1200px) {
  .upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li:before {
    width: 50px;
    left: -57px;
  }
}

@media all and (max-width: 1030px) {
  .upb-page .upb-texte-image {
    gap: 2rem;
  }

  .upb-page .upb-image-panneau--debord {
    padding: 0 2rem;
  }

  .upb-page .upb-image-panneau--debord .upb-image-panneau__image {
    flex-basis: 220px;
    width: 220px;
  }

  .upb-page .upb-image-panneau--liste {
    flex-direction: column;
    align-items: stretch;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__image {
    flex-basis: auto;
    width: 100%;
    height: 22rem;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li {
    display: flex;
    padding-left: 0;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li:before {
    position: static;
    align-self: flex-start;
    flex: 0 0 24px;
    width: 24px;
    height: 0;
    margin: 11px 14px 0 0;
    border-bottom-width: 3px;
  }

  .upb-page .upb-carte .upb-carte__titre {
    font-size: 30px;
  }
}

@media all and (max-width: 768px) {
  .upb-page .upb-image-panneau--debord {
    flex-direction: column;
    padding: 0 2rem 2rem;
    margin-top: 4rem;
    margin-bottom: 3rem;
  }

  .upb-page .upb-image-panneau--debord .upb-image-panneau__image {
    flex-basis: auto;
    width: 264px;
    align-self: center;
    height: 300px;
    margin: -2rem 0 0;
  }

  .upb-page .upb-image-panneau--debord .upb-image-panneau__panneau {
    padding: 0;
  }

  .upb-page .upb-image-panneau--debord.upb-image-panneau--sans-image {
    padding: 2rem;
  }

  .upb-page .upb-texte-image,
  .upb-page .upb-texte-image--gauche {
    flex-direction: column;
    align-items: stretch;
  }

  .upb-page .upb-texte-image__images {
    flex-basis: auto;
  }

  .upb-page .upb-bandeau,
  .upb-page .upb-texte-image.upb-avec-fond {
    padding: 2rem 1.5rem;
  }

  .upb-page .upb-bandeau__info {
    flex-direction: column;
    gap: 1rem;
  }

  .upb-page .upb-chiffres .upb-chiffres__titre {
    font-size: 28px;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__titre,
  .upb-page .upb-bandeau .upb-bandeau__titre {
    font-size: 24px;
  }

  .upb-page .upb-chiffre + .upb-chiffre:not(.upb-c--gris) {
    margin-left: 0;
  }

  /* Les paires restent accolées ; elles passent l'une sous l'autre. */
  .upb-page .upb-chiffres__cartes {
    max-width: 28rem;
    margin: 0 auto;
  }

  .upb-page .upb-chiffre {
    box-sizing: border-box;
    width: 50%;
  }

  .upb-page .upb-chiffre:only-child,
  .upb-page .upb-chiffre.upb-c--gris + .upb-c--gris,
  .upb-page .upb-chiffre:not(.upb-c--gris):not(:has(+ .upb-c--gris)) {
    border-radius: 5px;
  }

  .upb-page .upb-cartes__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .upb-page .upb-carte:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
    justify-self: stretch;
  }

  .upb-page .upb-carte {
    padding: 2rem 1.5rem;
    font-size: 16px;
  }

  .upb-page .upb-carte .upb-carte__titre {
    font-size: 26px;
  }
}

@media all and (max-width: 500px) {
  .upb-page .upb-bloc {
    margin-bottom: 2rem;
  }

  .upb-page .upb-bandeau,
  .upb-page .upb-texte-image.upb-avec-fond,
  .upb-page .upb-image-panneau--liste .upb-image-panneau__panneau {
    padding: 1.5rem 1rem;
  }

  .upb-page .upb-image-panneau--debord {
    padding: 0 1rem 1.5rem;
  }

  .upb-page .upb-image-panneau--debord .upb-image-panneau__image {
    width: 100%;
    height: 18rem;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__image {
    height: 16rem;
  }

  .upb-page .upb-chiffre {
    padding: 0.75rem;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__titre,
  .upb-page .upb-bandeau .upb-bandeau__titre,
  .upb-page .upb-chiffres .upb-chiffres__titre {
    font-size: 22px;
  }

  .upb-page .upb-image-panneau--liste .upb-image-panneau__texte ul li {
    font-size: 16px;
  }

  .upb-page .upb-chiffre__nombre {
    font-size: 40px;
  }

  .upb-page .upb-chiffre .upb-chiffre__valeur {
    font-size: 18px;
  }

  .upb-page .upb-chiffre .upb-chiffre__libelle {
    font-size: 16px;
  }
}