/* TEMPLATE — DEVENIR RAPPORTEUR */

.tpl-devenir-rapporteur {
  color: var(--text);
  --grid-18-gutter: 12px;
}

.tpl-devenir-rapporteur .grid-18 {
  --grid-18-row-gap: var(--spacer);
}

@media screen and (min-width: 768px) {
  .tpl-devenir-rapporteur .grid-18 {
    --grid-18-row-gap: 0;
  }
}

.tpl-devenir-rapporteur .grid-18.align-items-center > * {
  align-self: center;
}

.tpl-devenir-rapporteur section {
  padding-block: var(--spacer-xl);
}

@media screen and (min-width: 1200px) {
  .tpl-devenir-rapporteur section {
    padding-block: 50px;
  }
}

/* --- Corps de texte --- */

.tpl-devenir-rapporteur .wysiwyg,
.tpl-devenir-rapporteur .wysiwyg p,
.tpl-devenir-rapporteur .wysiwyg li {
  font-family: var(--font-family-serif), serif;
  font-size: 15px;
  line-height: 22px;
}

.tpl-devenir-rapporteur .wysiwyg ul {
  padding-inline-start: 22px;
  margin-block: var(--spacer);
}

.tpl-devenir-rapporteur .wysiwyg ul li {
  margin-block-end: 0;
}

.tpl-devenir-rapporteur .wysiwyg ul li::before {
  content: '•';
  color: var(--text);
  width: 0;
  height: 0;
  top: 0;
  left: -20px;
}

/* --- 1. Intro --- */

.tpl-devenir-rapporteur .col-title .title {
  font-family: var(--font-family-sans-serif), sans-serif;
  font-weight: var(--font-weight-title);
  font-size: 28px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: var(--spacer);
}

@media screen and (min-width: 1200px) {
  .tpl-devenir-rapporteur .col-title .title {
    font-size: 40px;
    line-height: 48px;
  }
}

/* --- Titre de section --- */

.tpl-devenir-rapporteur .section-title {
  font-family: var(--font-family-serif), serif;
  font-weight: var(--font-weight-title);
  font-size: 24px;
  line-height: 30px;
  color: #191919;
  margin-bottom: 0;
}

.tpl-devenir-rapporteur .section-title::after {
  content: "";
  display: block;
  width: 47px;
  height: 2px;
  background: var(--primary);
  margin-top: 20px;
  margin-bottom: 15px;
}

.tpl-devenir-rapporteur .section-title.text-center::after {
  margin-inline: auto;
}

/* --- 2. Sections image + texte --- */

.tpl-devenir-rapporteur .col-section .section-media img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

@media screen and (min-width: 768px) {
  .tpl-devenir-rapporteur .col-section .section-media img {
    height: 358px;
  }
}

.tpl-devenir-rapporteur .col-section .section-action {
  margin-top: var(--spacer-xl);
}

.tpl-devenir-rapporteur .col-section .section-action .btn-lg {
  width: 100%;
  max-width: max-content;
  text-align: start;
  background-color: var(--primary-hover);
  font-family: var(--font-family-sans-serif), sans-serif;
  font-size: 14px;
}

.tpl-devenir-rapporteur .col-section .section-action .btn-lg::before {
  background-color: var(--primary);
}

.tpl-devenir-rapporteur .col-section .section-action .btn-lg .btn-title {
  margin-inline-end: var(--spacer);
  padding-inline-end: 20px;
}

/* --- 3. Vidéo --- */

.tpl-devenir-rapporteur .col-video .section-title {
  margin-bottom: var(--spacer-xl);
}

.tpl-devenir-rapporteur .col-video .video-media,
.tpl-devenir-rapporteur .col-video .video-player {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}

.tpl-devenir-rapporteur .col-video .video-media img {
  width: 100%;
  height: auto;
  display: block;
}

.tpl-devenir-rapporteur .col-video .video-media.has-video {
  cursor: pointer;
}

.tpl-devenir-rapporteur .col-video .video-media .play-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  transition: var(--transition);
}

.tpl-devenir-rapporteur .col-video .video-media .play-circle::before {
  content: "";
  display: block;
  margin-inline-start: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--primary-dark);
}

.tpl-devenir-rapporteur .col-video .video-media:hover .play-circle {
  background: var(--white);
  transform: translate(-50%, -50%) scale(1.08);
}

/* --- 4. Témoignage --- */

.tpl-devenir-rapporteur .col-testimonial .testimonial-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

.tpl-devenir-rapporteur .col-testimonial .testimonial-credit {
  font-family: var(--font-family-serif), serif;
  font-style: italic;
  font-size: 15px;
  line-height: 22px;
  color: #373737;
  margin: 10px 0 0;
}

.tpl-devenir-rapporteur .col-testimonial .testimonial-quote {
  font-family: var(--font-family-serif), serif;
  font-size: 15px;
  line-height: 22px;
  color: #373737;
  margin: 0;
}

.tpl-devenir-rapporteur .col-testimonial .testimonial-author {
  font-family: var(--font-family-serif), serif;
  font-size: 15px;
  line-height: 22px;
  color: #373737;
  margin-top: var(--spacer);
}

/* --- 5. Formulaire (Contact Form 7) --- */
.tpl-devenir-rapporteur .col-form {
  margin-block-end: 0;
}

.tpl-devenir-rapporteur .col-form .form-box {
  background: var(--primary-light);
  border-radius: var(--radius);
  padding: var(--spacer-xl) var(--spacer);
}

@media screen and (min-width: 1200px) {
  .tpl-devenir-rapporteur .col-form .form-box {
    padding: 75px;
  }
}

.tpl-devenir-rapporteur .col-form .section-title {
  font-family: var(--font-family-sans-serif), sans-serif;
  font-size: 28px;
  line-height: 33px;
  color: var(--text);
}

.tpl-devenir-rapporteur .col-form .section-title::after {
  margin-bottom: 40px;
}

/* Les champs suivent le système du thème (.form-with-animated-labels).
   Ne pas surcharger input / textarea / label ici : ça casse les labels flottants. */

.tpl-devenir-rapporteur .col-form .form-box textarea {
  min-height: 190px;
  resize: vertical;
}

/* Neutralise le fond blanc que Bootstrap applique sur .form-control:focus. */
.tpl-devenir-rapporteur .col-form .form-box input:focus,
.tpl-devenir-rapporteur .col-form .form-box textarea:focus,
.tpl-devenir-rapporteur .col-form .form-box select:focus {
  background-color: transparent;
  box-shadow: none;
}

/* Champs fichier : repris de .tpl-contact.recruitment (custom.css ~3960),
   avec un simple filet bas au lieu du cadre. */
.tpl-devenir-rapporteur .col-form .custom-file-input {
  border: 0;
  border-bottom: 1px solid var(--gray);
  color: var(--gray);
}

.tpl-devenir-rapporteur .col-form .custom-file .wpcf7-form-control-wrap {
  position: relative;
}

.tpl-devenir-rapporteur .col-form .custom-file .wpcf7-form-control-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  right: 1.5rem;
  width: 24px;
  height: 24px;
  background: url("../img/icon-circle-arrow-primary.svg") no-repeat;
  background-size: contain;
}

.tpl-devenir-rapporteur .col-form .custom-file input[type="file"]::-webkit-file-upload-button {
  display: none;
}

.tpl-devenir-rapporteur .col-form .custom-file input[type="file"]::file-selector-button {
  display: none;
}

.tpl-devenir-rapporteur .col-form .custom-file .custom-file-label {
  top: 5px;
  transform: none;
  font-size: 80%;
  line-height: 1;
  color: var(--text);
}

.tpl-devenir-rapporteur .col-form .form-box input[type="submit"] {
  width: auto;
}

.page-template-page-template-devenir-rapporteur .practical-links {
  margin-block-start: 0;
}

/* --- Modal vidéo --- */

#modal-dr-video .modal-content {
  background: #000;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
}

#modal-dr-video .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  filter: invert(1) grayscale(1) brightness(2);
}

#modal-dr-video .dr-video-player {
  width: 100%;
  height: 100%;
  object-fit: contain;
}