/*
 * Page « Devenir partenaire » — styles.
 *
 * Repris de la maquette (« Devenir partenaire v2 »), chargés UNIQUEMENT sur le gabarit
 * template-devenir-partenaire.php (voir inc/enqueue.php). Tout est scopé sous « .dp-page » :
 * plusieurs classes (.wrap, .sec, .sec-title, .hl, .hr, .reveal, .av-item, .temoi-…) sont
 * partagées avec d'autres gabarits et ne doivent fuir ni vers l'en-tête, ni vers le pied de
 * page. Les polices « Anton » et « Open Sans » sont fournies globalement par style.css
 * (@font-face + enqueue) → non redéclarées ici.
 *
 * Écarts assumés par rapport à la maquette (rendu identique, feuille sans code mort) :
 *   • la maquette scopait ses styles sous « .contact-page » (sa feuille avait été copiée
 *     depuis la page Contact) : le gabarit pose « .dp-page », qui porte le même habillage ;
 *   • la PREMIÈRE section de la page reçoit le retrait haut qui dégage l'en-tête fixe du
 *     site. La maquette s'affichait sans en-tête : son contenu partait du haut de la page,
 *     et se retrouverait caché derrière la barre de navigation, qui est opaque. Le retrait
 *     est posé sur la première section EN FLUX, quelle qu'elle soit — la bannière quand une
 *     photo est choisie, sinon le bandeau turquoise — et suit les deux hauteurs possibles
 *     de l'en-tête (voir « Dégagement de l'en-tête » plus bas) ;
 *   • les images « image-slot » de la maquette (cadres d'attente de l'outil de maquettage)
 *     sont de vraies balises <img> alimentées par la médiathèque. Sans image choisie, le
 *     gabarit ne rend pas l'élément du tout : il n'y a donc aucun cadre d'attente à styler ;
 *   • les CARTES « Ce que le partenariat inclut » étaient colorées par leur RANG
 *     (:nth-child) : elles le sont ici par une classe (.inc-cell--marine…) puisque la
 *     couleur se choisit carte par carte au back-office. Chaque couleur porte sa règle de
 *     contraste, pour que le numéro et le titre restent lisibles sur fond clair ;
 *   • les deux listes numérotées et la grille de cartes s'adaptent au NOMBRE d'éléments
 *     saisis (--dp-av-rows, --dp-inc-cols) : la maquette figeait 8 éléments sur 4 lignes et
 *     3 cartes sur 3 colonnes ;
 *   • le texte du bloc « Partenariat philanthropique » vient d'un éditeur : ses paragraphes
 *     sont stylés via « .band-text p » plutôt que par la classe « .band-p » de la maquette ;
 *   • la maquette laissait « .contact-page a:hover{color:#e9511c} » l'emporter sur les
 *     boutons pleins (spécificité plus forte) : le libellé du bouton orange virait donc à
 *     l'orange foncé SUR un fond orange, illisible au survol. Les boutons fixent ici leur
 *     couleur de libellé, comme la maquette le faisait déjà — mais pour le seul bouton
 *     « .band-btn » ;
 *   • les flèches des boutons pointaient un SVG bleu que la maquette repeignait en blanc
 *     (filter: brightness(0) invert(1)). Le thème a déjà la même flèche en blanc
 *     (svgs/common-arrows/arrow-right-white.svg) : le filtre n'a plus d'objet ;
 *   • les classes que le balisage n'utilise pas (.kick, .pv-hero-tag, .btn-ghost-w,
 *     .av-head, .av-count, .hr3, .hr4, les animations « hlGrow » et « drift ») ne sont pas
 *     reprises ;
 *   • html{scroll-behavior:smooth} est conservé pour les ancres de la page (#avantages,
 *     #etapes, #contact), et chaque cible se cale SOUS l'en-tête fixe ;
 *   • les blocs « .reveal » sont révélés d'office quand JavaScript est absent
 *     (@media scripting: none) et l'apparition est aussi neutralisée en « mouvement
 *     réduit » : aucun contenu ne peut rester invisible.
 *
 * @package medecins-du-monde
 */

/* ============================================================================
 * Base
 * ========================================================================= */

.dp-page,
.dp-page *,
.dp-page *::before,
.dp-page *::after {
  box-sizing: border-box;
}
.dp-page {
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
.dp-page h1,
.dp-page h2,
.dp-page h3 {
  margin: 0;
}
.dp-page p,
.dp-page blockquote {
  margin: 0;
}
.dp-page a {
  text-decoration: none;
  color: inherit;
}
.dp-page a:hover {
  color: #e9511c;
}
/* Boutons pleins : leur libellé garde sa couleur au survol (voir en-tête de fichier). */
.dp-page a.btn-orange,
.dp-page a.btn-orange:hover,
.dp-page a.band-btn,
.dp-page a.band-btn:hover,
.dp-page a.ct-mail,
.dp-page a.ct-mail:hover,
.dp-page a.ct-tel {
  color: #fff;
}
.dp-page a.ct-tel:hover {
  color: #1d1a55;
}
.dp-page .wrap {
  padding: 0 26px;
}
.dp-page .sec {
  padding: 60px 0;
}
.dp-page .sec-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: #1d1a55;
}
.dp-page .sec-title .hl {
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 56%;
  background-position: 0 68%;
}
/* Les boutons de la page mènent à des ancres : le défilement est adouci, et chaque cible se
   cale SOUS l'en-tête fixe du site. La règle porte sur « html » (le défilement n'a lieu ni
   sur .dp-page ni sur body) — sans fuite vers les autres gabarits, puisque cette feuille
   n'est chargée que sur celui-ci. */
html {
  scroll-behavior: smooth;
}
.dp-page .pv-av,
.dp-page .pv-steps,
.dp-page .pv-contact {
  scroll-margin-top: 160px;
}

/* ============================================================================
 * Barre de progression de lecture (pilotée par assets/js/devenir-partenaire.js)
 * ========================================================================= */

.dp-page .dp-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #e9511c;
  z-index: 3000;
}

/* ============================================================================
 * Animations d'entrée
 * ========================================================================= */

@keyframes dp-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dp-page .hr {
  animation: dp-rise .75s cubic-bezier(.22, .61, .36, 1) both;
}
.dp-page .hr2 {
  animation-delay: .12s;
}
.dp-page .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.dp-page .reveal.in {
  opacity: 1;
  transform: none;
}
/* Sans JavaScript, personne ne pose la classe « in » : les blocs doivent rester visibles. */
@media (scripting: none) {
  .dp-page .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dp-page .reveal,
  .dp-page .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .dp-page .hr {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
 * Bannière — photo pleine largeur
 * ========================================================================= */

/*
 * Dégagement de l'en-tête — l'en-tête du thème est en position:fixed et opaque : sans
 * retrait, il recouvrirait le haut de la première section.
 *
 * Le retrait est porté par la première section EN FLUX (la barre de progression, juste
 * avant, est en position:fixed et n'occupe pas de place) : il suit donc la page telle
 * qu'elle est réglée au back-office — bannière quand une photo est choisie, bandeau
 * turquoise sinon.
 *
 * L'en-tête n'a pas une hauteur unique : la bande d'alerte qui le surmonte s'affiche ou non
 * selon un interrupteur du back-office (« alert_show »). Les deux états sont traités, au
 * lieu de réserver toujours la hauteur maximale : sinon un ruban blanc s'intercalerait entre
 * la barre de navigation et la photo de bannière dès que la bande d'alerte est masquée.
 *
 * Hauteurs mesurées, en pixels :
 *
 *                    sans la bande   avec la bande
 *   ≥ 1280 px             104             146
 *   ≤ 1279 px              59             101
 */
.dp-page > .dp-progress + * {
  padding-top: 104px;
}
body:has(.alert-section) .dp-page > .dp-progress + * {
  padding-top: 146px;
}

.dp-page .pv-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  color: #1d1a55;
}
.dp-page .pv-hero-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 21 / 8;
  background: #12305a;
  overflow: hidden;
}
.dp-page .pv-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Voile sombre décoratif en bas de la photo (repris de la maquette). */
.dp-page .pv-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(29, 26, 85, .78) 100%);
}

/* ============================================================================
 * Bandeau « Devenez partenaire »
 * ========================================================================= */

.dp-page .pv-bar {
  background: #00af9c;
  color: #fff;
}
.dp-page .pv-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 30px;
  padding-bottom: 30px;
}
.dp-page .pv-bar h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: .92;
  letter-spacing: -.01em;
  color: #fff;
}
.dp-page .pv-bar h1 .hl {
  color: #1d1a55;
}
.dp-page .pv-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.dp-page .btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9511c;
  border: 1px solid #e9511c;
  border-radius: 5px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .3s;
}
.dp-page .btn-orange:hover {
  background: #d1440f;
}
.dp-page .btn-orange img {
  width: 14px;
  transition: transform .3s;
}
.dp-page .btn-orange:hover img {
  transform: translateX(4px);
}

/* ============================================================================
 * Accroche — bande marine arrondie
 * ========================================================================= */

.dp-page .pv-mani {
  padding: 80px 0;
}
/* « overflow: clip » + marge de rognage : la pastille peut sortir de la bande (16px
   suffisent), alors que le filigrane, lui, reste rogné — et contrairement à
   « overflow: visible » rien ne déborde en largeur de la page. « overflow: hidden »
   reste écrit avant, comme repli pour les navigateurs sans « clip ». */
.dp-page .mani-band {
  position: relative;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 16px;
  background: #1d1a55;
  border-radius: 24px;
  padding: 64px 56px;
  color: #fff;
}
/* Filigrane : la colombe du logo MdM, partagée avec la page « Comment donner ». */
.dp-page .mani-band::before {
  content: '';
  position: absolute;
  top: -90px;
  right: -80px;
  width: 340px;
  height: 340px;
  background: url("../svgs/comment-donner/logo-mark.svg") no-repeat center / contain;
  opacity: .1;
  transform: rotate(14deg);
  pointer-events: none;
}
.dp-page .mani-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 56px;
  align-items: start;
}
/* Une seule colonne remplie : elle prend toute la largeur de la bande. */
.dp-page .mani-grid--solo {
  grid-template-columns: 1fr;
}
.dp-page .mani-head {
  position: relative;
  padding-top: 0px;
}
/* Le retrait haut ne réserve la place que de la pastille : sans elle, il n'a plus d'objet. */
.dp-page .mani-head--notag {
  padding-top: 0;
}
.dp-page .mani-tag {
  position: absolute;
  top: -59px;
  left: 0;
  z-index: 2;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  background: #e9511c;
  border-radius: 5px;
  color: #fff;
  font-size: 28px;
  line-height: normal;
  white-space: nowrap;
  padding: 8px 16px;
  transform: rotate(-4.14deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.dp-page .mani-q {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.22;
  letter-spacing: -.005em;
  color: #fff;
  text-wrap: pretty;
}
.dp-page .mani-q .hl {
  color: #1d1a55;
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 118%;
  background-position: 0 50%;
  padding: 0 6px;
  border-radius: 3px;
}
.dp-page .mani-text p {
  font-size: 16px;
  line-height: 1.85;
  color: #c4cde3;
}
.dp-page .mani-text p + p {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.dp-page .mani-text p strong {
  color: #fff;
}

/* ============================================================================
 * « Construisons ensemble » — liste numérotée en deux colonnes
 * ========================================================================= */

.dp-page .pv-av {
  position: relative;
  /* La maquette ne donnait aucun retrait à cette section : sa respiration haute venait du
     bas de l'accroche, juste au-dessus. Il est posé ici pour le cas où l'accroche serait
     vidée au back-office — et repris aussitôt que l'accroche la précède (règle suivante). */
  padding-top: 80px;
}
.dp-page .pv-mani + .pv-av {
  padding-top: 0;
}
/* Les colonnes se remplissent de haut en bas : le nombre de lignes vient du gabarit
   (« --dp-av-rows » = la moitié des éléments affichés, arrondie au supérieur). */
.dp-page .av-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(var(--dp-av-rows, 4), auto);
  grid-auto-flow: column;
  gap: 0 56px;
  margin-top: 34px;
}
.dp-page .av-item {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 14px;
  padding: 22px 8px;
  border-bottom: 1px solid #dbe8f2;
  overflow: hidden;
  transition: padding-left .38s cubic-bezier(.22, .61, .36, 1);
}
.dp-page .av-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #055da8;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
  z-index: 0;
}
.dp-page .av-item:hover::before {
  transform: scaleY(1);
}
.dp-page .av-item:hover {
  padding-left: 20px;
}
.dp-page .av-item > * {
  position: relative;
  z-index: 1;
}
.dp-page .av-n {
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #e9511c;
  transition: color .35s;
}
.dp-page .av-item:hover .av-n {
  color: #bddfec;
}
.dp-page .av-tx {
  font-size: 15.5px;
  line-height: 1.55;
  color: #1d1a55;
  transition: color .35s;
}
.dp-page .av-item:hover .av-tx {
  color: #fff;
}

/* ============================================================================
 * Partenariat philanthropique
 * ========================================================================= */

.dp-page .pv-band {
  padding: 80px 0;
  background: #fff;
}
.dp-page .band-in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center;
}
/* Titre ou corps manquant : ce qui reste prend toute la largeur. */
.dp-page .band-in--solo {
  grid-template-columns: 1fr;
}
.dp-page .band-in > .reveal:last-child {
  justify-self: end;
  max-width: 580px;
  width: 100%;
}
.dp-page .band-in--solo > .reveal:last-child {
  justify-self: start;
  max-width: none;
}
.dp-page .band-h {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(38px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #1d1a55;
}
.dp-page .band-h .hl {
  color: #055da8;
}
/* Paragraphes du champ « Texte descriptif » (éditeur) : mêmes règles que la maquette. */
.dp-page .band-text p {
  font-size: 17px;
  line-height: 1.75;
  color: #5b6172;
}
.dp-page .band-text p + p {
  margin-top: 12px;
}
.dp-page .band-text strong {
  color: #1d1a55;
}
/* Listes et liens du même champ : sans ces règles, les resets globaux de style.css
   (« ul, ol { list-style: none } », « a { display: block; color: inherit } ») effacent les
   puces et rendent un lien au fil du texte invisible et sur sa propre ligne. */
.dp-page .band-text ul,
.dp-page .band-text ol {
  margin: 12px 0 0;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  list-style: none;
}
.dp-page .band-text ol {
  counter-reset: mdm-band-ol;
}
.dp-page .band-text li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.75;
  color: #5b6172;
  list-style: none;
}
.dp-page .band-text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 12px;
  height: 2px;
  background: #e9511c;
}
.dp-page .band-text ol li {
  counter-increment: mdm-band-ol;
}
.dp-page .band-text ol li::before {
  content: counter(mdm-band-ol);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: 'Anton', sans-serif;
  font-size: 14px;
  color: #055da8;
}
.dp-page .band-text li strong {
  color: #1d1a55;
}
.dp-page .band-text a {
  display: inline;
  color: #055da8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dp-page .band-text a:hover {
  color: #e9511c;
}
.dp-page .band-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #e9511c;
  border: 1px solid #e9511c;
  border-radius: 5px;
  padding: 15px 30px;
  margin-top: 28px;
  font-size: 16px;
  font-weight: 700;
  width: fit-content;
  transition: background-color .3s;
}
.dp-page .band-btn:hover {
  background: #d1440f;
}
.dp-page .band-btn img {
  width: 14px;
  transition: transform .3s;
}
.dp-page .band-btn:hover img {
  transform: translateX(4px);
}

/* ============================================================================
 * Étapes — frise verticale
 * ========================================================================= */

.dp-page .pv-steps {
  position: relative;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 16px;
  background: #1d1a55;
  color: #fff;
}
.dp-page .pv-steps::before {
  content: '';
  position: absolute;
  bottom: -130px;
  left: -90px;
  width: 360px;
  height: 360px;
  background: url("../svgs/comment-donner/logo-mark.svg") no-repeat center / contain;
  opacity: .08;
  transform: rotate(-16deg);
  pointer-events: none;
}
.dp-page .pv-steps .wrap {
  position: relative;
  z-index: 1;
}
.dp-page .pv-steps .sec-title {
  color: #fff;
}
.dp-page .pv-steps .sec-title .hl {
  color: #1d1a55;
  background-size: 100% 118%;
  background-position: 0 50%;
  padding: 0 6px;
  border-radius: 3px;
}
.dp-page .tl {
  display: flex;
  flex-direction: column;
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}
.dp-page .tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 32px;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  overflow: hidden;
  transition: padding-left .42s cubic-bezier(.22, .61, .36, 1);
}
.dp-page .tl-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e9511c;
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  z-index: 0;
}
.dp-page .tl-item:hover::before {
  transform: translateX(0);
}
.dp-page .tl-item:hover {
  padding-left: 38px;
}
.dp-page .tl-item > * {
  position: relative;
  z-index: 1;
}
.dp-page .tl-n {
  font-family: 'Anton', sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  line-height: .9;
  color: #bddfec;
  transition: color .4s;
}
.dp-page .tl-item:hover .tl-n {
  color: #fff;
}
.dp-page .tl-tx {
  font-size: 16.5px;
  line-height: 1.6;
  color: #dbe8f5;
  transition: color .4s;
}
.dp-page .tl-item:hover .tl-tx {
  color: #fff;
}

/* ============================================================================
 * « Ce que le partenariat inclut » — panneaux de couleur
 * ========================================================================= */

.dp-page .inc-head {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: end;
}
/* Titre ou texte manquant : ce qui reste prend toute la largeur. */
.dp-page .inc-head--solo {
  grid-template-columns: 1fr;
}
.dp-page .inc-head .ct-p {
  margin-top: 0;
  max-width: 580px;
  justify-self: end;
  width: 100%;
}
.dp-page .inc-head--solo .ct-p {
  justify-self: start;
  max-width: none;
}
/* Trois colonnes, jamais plus que le nombre de cartes affichées (« --dp-inc-cols »). */
.dp-page .inc-grid {
  display: grid;
  grid-template-columns: repeat(var(--dp-inc-cols, 3), 1fr);
  gap: 0;
  margin-top: 44px;
}
.dp-page .inc-cell {
  position: relative;
  min-height: 300px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1);
}
.dp-page .inc-cell:hover {
  transform: translateY(-6px);
}
.dp-page .inc-k {
  font-family: 'Anton', sans-serif;
  font-size: 26px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .65);
}
.dp-page .inc-t {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.05;
  color: #fff;
}
/* Couleurs de fond du design system, choisies carte par carte au back-office. Le bleu clair
   est le seul fond clair : numéro et titre y prennent des couleurs foncées. */
.dp-page .inc-cell--marine {
  background: #1d1a55;
}
.dp-page .inc-cell--vert {
  background: #00af9c;
}
.dp-page .inc-cell--bleu {
  background: #055da8;
}
.dp-page .inc-cell--orange {
  background: #e9511c;
}
.dp-page .inc-cell--bleu-clair {
  background: #bddfec;
}
.dp-page .inc-cell--bleu-clair .inc-k {
  color: #5b6078;
}
.dp-page .inc-cell--bleu-clair .inc-t {
  color: #e9511c;
}

/* ============================================================================
 * Témoignage
 * ========================================================================= */

.dp-page .pv-temoi {
  padding: 0;
  background: #fff;
}
.dp-page .temoi-card {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: stretch;
  border-radius: 16px;
  overflow: hidden;
}
/* Sans photo (ou sans texte) : la moitié restante occupe toute la carte. */
.dp-page .temoi-card--nophoto {
  grid-template-columns: 1fr;
}
.dp-page .temoi-media {
  position: relative;
  background: #cbd9e8;
  min-height: 380px;
}
.dp-page .temoi-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dp-page .temoi-body {
  position: relative;
  background: #eef6fb;
  padding: 42px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dp-page .t-mark {
  font-family: 'Anton', sans-serif;
  font-size: 82px;
  line-height: .6;
  color: #e9511c;
  margin-bottom: 16px;
}
.dp-page .t-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .1em;
  color: #055da8;
  margin-bottom: 22px;
}
.dp-page .temoi-body blockquote {
  margin: 0 0 30px;
  font-size: 21px;
  font-style: italic;
  line-height: 1.62;
  color: #1d1a55;
  max-width: 760px;
}
.dp-page .t-author {
  font-size: 16px;
  font-weight: 700;
  color: #1d1a55;
}
.dp-page .t-role {
  font-size: 15px;
  color: #7c86a3;
  margin-top: 4px;
}

/* ============================================================================
 * Contact
 * ========================================================================= */

.dp-page .pv-contact {
  background: #fff;
}
/* La pastille sort de la section vers le haut : sans ce retrait supplémentaire elle se
   poserait sur le bloc précédent. Sous 1280px la pastille de 18px dégage déjà. */
.dp-page .pv-contact {
  padding-top: 92px;
}
.dp-page .ct-grid {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 60px;
  align-items: start;
}
/* Accroche ou carte manquante : ce qui reste prend toute la largeur. */
.dp-page .ct-grid--solo {
  grid-template-columns: 1fr;
}
.dp-page .ct-p {
  font-size: 16.5px;
  line-height: 1.8;
  color: #5b6078;
  margin-top: 26px;
  max-width: 88%;
}
.dp-page .ct-grid > .mani-head {
  min-width: 0;
  position: sticky;
  top: 110px;
  align-self: start;
}
.dp-page .ct-card {
  position: sticky;
  top: 110px;
  overflow: hidden;
  background: #1d1a55;
  color: #fff;
  border-radius: 14px;
  padding: 36px 32px;
}
.dp-page .ct-card::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -60px;
  width: 230px;
  height: 230px;
  background: url("../svgs/comment-donner/logo-mark.svg") no-repeat center / contain;
  opacity: .12;
  pointer-events: none;
}
.dp-page .ct-card > * {
  position: relative;
  z-index: 1;
}
.dp-page .ct-lbl {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .09em;
  color: #bddfec;
  margin-bottom: 16px;
}
.dp-page .ct-name {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1.02;
  margin-bottom: 8px;
}
.dp-page .ct-role {
  font-size: 14px;
  color: #c4cde3;
  line-height: 1.55;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  margin-bottom: 24px;
}
.dp-page .ct-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dp-page .ct-mail,
.dp-page .ct-tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 5px;
  padding: 15px 22px;
  font-size: 15px;
  font-weight: 700;
  transition: background-color .3s, color .3s;
}
.dp-page .ct-mail {
  background: #e9511c;
}
.dp-page .ct-mail:hover {
  background: #d1440f;
}
.dp-page .ct-tel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
}
.dp-page .ct-tel:hover {
  background: #fff;
}
.dp-page .ct-adr {
  display: block;
  margin-top: 18px;
  font-size: 13.5px;
  color: #c4cde3;
  word-break: break-all;
}
.dp-page .ct-adr:hover {
  color: #e9511c;
}

/* ============================================================================
 * Bouton « retour en haut » (piloté par assets/js/devenir-partenaire.js)
 * ========================================================================= */

.dp-page .dp-btt {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 100%;
  border: none;
  background: #1d1a55;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .3s, transform .3s;
  z-index: 2000;
}
.dp-page .dp-btt.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.dp-page .dp-btt svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
}

/* ============================================================================
 * Responsive
 * ========================================================================= */

/* Point de bascule de l'EN-TÊTE, indépendant de ceux de la page : il se resserre sous
   1280px (voir « Dégagement de l'en-tête »). */
@media (max-width: 1279px) {
  .dp-page .mani-tag {
    font-size: 18px;
    line-height: 27px;
    top: -41px;
  }
  .dp-page .pv-contact {
    padding-top: 60px;
  }
  .dp-page > .dp-progress + * {
    padding-top: 59px;
  }
  body:has(.alert-section) .dp-page > .dp-progress + * {
    padding-top: 101px;
  }
}
@media (max-width: 1100px) {
  .dp-page .pv-bar .wrap {
    gap: 22px;
  }
  .dp-page .mani-band {
    padding: 64px 34px;
  }
  .dp-page .mani-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .dp-page .av-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 0;
  }
  .dp-page .band-in {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .dp-page .band-in > .reveal:last-child {
    justify-self: start;
    max-width: none;
  }
  .dp-page .pv-band {
    padding: 52px 0;
  }
  .dp-page .tl-item {
    grid-template-columns: 80px 1fr;
    gap: 22px;
    padding: 26px 14px;
  }
  .dp-page .inc-head {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .dp-page .inc-head .ct-p {
    justify-self: start;
    max-width: none;
  }
  .dp-page .inc-grid {
    grid-template-columns: 1fr;
  }
  .dp-page .inc-cell {
    min-height: 220px;
    padding: 34px 26px;
  }
  .dp-page .temoi-card {
    grid-template-columns: 1fr;
  }
  .dp-page .temoi-media {
    min-height: 300px;
  }
  .dp-page .temoi-body {
    padding: 44px 28px;
  }
  .dp-page .temoi-body blockquote {
    font-size: 17px;
  }
  .dp-page .ct-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .dp-page .ct-grid > .mani-head,
  .dp-page .ct-card {
    position: relative;
    top: auto;
  }
  .dp-page .ct-card {
    max-width: 520px;
  }
}
@media (max-width: 767px) {
  .dp-page .mani-tag {
    font-size: 14px;
    line-height: 21px;
    top: -32px;
  }
}
@media (max-width: 640px) {
  .dp-page .wrap {
    padding: 0 18px;
  }
  .dp-page .sec {
    padding: 56px 0;
  }
  .dp-page .sec-title {
    line-height: 1.3;
  }
  .dp-page .pv-hero-media {
    aspect-ratio: 4 / 3;
  }
  .dp-page .pv-bar .wrap {
    padding-top: 26px;
    padding-bottom: 26px;
    gap: 20px;
  }
  .dp-page .pv-mani {
    padding: 52px 0;
  }
  .dp-page .mani-band {
    padding: 54px 22px;
    border-radius: 18px;
  }
  .dp-page .mani-grid {
    gap: 24px;
  }
  .dp-page .pv-av {
    padding-top: 52px;
  }
  .dp-page .av-item {
    padding: 18px 4px;
  }
  .dp-page .tl-item {
    grid-template-columns: 56px 1fr;
    gap: 16px;
    padding: 22px 8px;
  }
  .dp-page .tl-item:hover {
    padding-left: 14px;
  }
  .dp-page .tl-tx {
    font-size: 15px;
  }
  .dp-page .temoi-body blockquote {
    font-size: 16px;
    line-height: 1.6;
  }
  .dp-page .pv-ctas .btn-orange {
    width: 100%;
    justify-content: center;
  }
  .dp-page .ct-card {
    padding: 28px 24px;
  }
}

@media (min-width: 1700px) {
  .dp-page .wrap {
    padding: 0 1.8057vw;
  }
  .dp-page .sec {
    padding: 4.1669vw 0;
  }
  .dp-page .sec-title {
    font-size: clamp(2.0835vw, 3.8vw, 3.6113vw);
  }
  .dp-page .pv-av,
  .dp-page .pv-steps,
  .dp-page .pv-contact {
    scroll-margin-top: 11.1118vw;
  }
  .dp-page .dp-progress {
    height: 0.2778vw;
  }
  .dp-page .reveal {
    transform: translateY(1.6668vw);
  }
  .dp-page > .dp-progress + * {
    padding-top: 7.2227vw;
  }
  body:has(.alert-section) .dp-page > .dp-progress + * {
    padding-top: 10.1395vw;
  }
  .dp-page .pv-bar .wrap {
    gap: 2.2224vw;
    padding-top: 2.0835vw;
    padding-bottom: 2.0835vw;
  }
  .dp-page .pv-bar h1 {
    font-size: clamp(2.3613vw, 4.4vw, 4.4447vw);
  }
  .dp-page .pv-ctas {
    gap: 0.8334vw;
  }
  .dp-page .btn-orange {
    gap: 0.8334vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    padding: 1.0417vw 2.0835vw;
    font-size: 1.1112vw;
  }
  .dp-page .btn-orange img {
    width: 0.9723vw;
  }
  .dp-page .btn-orange:hover img {
    transform: translateX(0.2778vw);
  }
  .dp-page .pv-mani {
    padding: 5.5559vw 0;
  }
  .dp-page .mani-band {
    overflow-clip-margin: 1.1112vw;
    border-radius: 1.6668vw;
    padding: 4.4447vw 3.8891vw;
  }
  .dp-page .mani-band::before {
    top: -6.2504vw;
    right: -5.5559vw;
    width: 23.6125vw;
    height: 23.6125vw;
  }
  .dp-page .mani-grid {
    gap: 3.8891vw;
  }
  .dp-page .mani-tag {
    top: -4.0975vw;
    border-radius: 0.3472vw;
    font-size: 1.9446vw;
    padding: 0.5556vw 1.1112vw;
    box-shadow: 0 0.4167vw 1.1112vw rgba(0, 0, 0, .18);
  }
  .dp-page .mani-q {
    font-size: clamp(1.6668vw, 2.7vw, 2.639vw);
  }
  .dp-page .mani-q .hl {
    padding: 0 0.4167vw;
    border-radius: 0.2083vw;
  }
  .dp-page .mani-text p {
    font-size: 1.1112vw;
  }
  .dp-page .mani-text p + p {
    margin-top: 1.2501vw;
    padding-top: 1.2501vw;
    border-top: 0.0694vw solid rgba(255, 255, 255, .14);
  }
  .dp-page .pv-av {
    padding-top: 5.5559vw;
  }
  .dp-page .av-list {
    gap: 0 3.8891vw;
    margin-top: 2.3613vw;
  }
  .dp-page .av-item {
    grid-template-columns: 3.1946vw 1fr;
    gap: 0.9723vw;
    padding: 1.5279vw 0.5556vw;
    border-bottom: 0.0694vw solid #dbe8f2;
  }
  .dp-page .av-item:hover {
    padding-left: 1.389vw;
  }
  .dp-page .av-n {
    font-size: 1.5279vw;
  }
  .dp-page .av-tx {
    font-size: 1.0765vw;
  }
  .dp-page .pv-band {
    padding: 5.5559vw 0;
  }
  .dp-page .band-in {
    gap: 4.8614vw;
  }
  .dp-page .band-in > .reveal:last-child {
    max-width: 40.2802vw;
  }
  .dp-page .band-h {
    font-size: clamp(2.639vw, 5.4vw, 5.8337vw);
  }
  .dp-page .band-text p {
    font-size: 1.1806vw;
  }
  .dp-page .band-text p + p {
    margin-top: 0.8334vw;
  }
  .dp-page .band-text ul,
  .dp-page .band-text ol {
    margin: 0.8334vw 0 0;
    gap: 0.625vw;
  }
  .dp-page .band-text li {
    padding-left: 1.8057vw;
    font-size: 1.1806vw;
  }
  .dp-page .band-text ul li::before {
    top: 0.9028vw;
    width: 0.8334vw;
    height: 0.1389vw;
  }
  .dp-page .band-text ol li::before {
    top: 0.0694vw;
    font-size: 0.9723vw;
  }
  .dp-page .band-text a {
    text-underline-offset: 0.1389vw;
  }
  .dp-page .band-btn {
    gap: 0.8334vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    padding: 1.0417vw 2.0835vw;
    margin-top: 1.9446vw;
    font-size: 1.1112vw;
  }
  .dp-page .band-btn img {
    width: 0.9723vw;
  }
  .dp-page .band-btn:hover img {
    transform: translateX(0.2778vw);
  }
  .dp-page .pv-steps {
    overflow-clip-margin: 1.1112vw;
  }
  .dp-page .pv-steps::before {
    bottom: -9.0283vw;
    left: -6.2504vw;
    width: 25.0015vw;
    height: 25.0015vw;
  }
  .dp-page .pv-steps .sec-title .hl {
    padding: 0 0.4167vw;
    border-radius: 0.2083vw;
  }
  .dp-page .tl {
    margin-top: 3.0557vw;
    border-top: 0.0694vw solid rgba(255, 255, 255, .2);
  }
  .dp-page .tl-item {
    grid-template-columns: 8.3338vw 1fr;
    gap: 2.2224vw;
    padding: 1.389vw;
    border-bottom: 0.0694vw solid rgba(255, 255, 255, .2);
  }
  .dp-page .tl-item:hover {
    padding-left: 2.639vw;
  }
  .dp-page .tl-n {
    font-size: clamp(2.639vw, 4vw, 4.3058vw);
  }
  .dp-page .tl-tx {
    font-size: 1.1459vw;
  }
  .dp-page .inc-head {
    gap: 4.8614vw;
  }
  .dp-page .inc-head .ct-p {
    max-width: 40.2802vw;
  }
  .dp-page .inc-grid {
    margin-top: 3.0557vw;
  }
  .dp-page .inc-cell {
    min-height: 20.8346vw;
    padding: 2.7779vw 2.2224vw;
  }
  .dp-page .inc-cell:hover {
    transform: translateY(-0.4167vw);
  }
  .dp-page .inc-k {
    font-size: 1.8057vw;
  }
  .dp-page .inc-t {
    font-size: clamp(1.5279vw, 2vw, 2.0835vw);
  }
  .dp-page .temoi-card {
    border-radius: 1.1112vw;
  }
  .dp-page .temoi-media {
    min-height: 26.3905vw;
  }
  .dp-page .temoi-body {
    padding: 2.9168vw 3.1946vw;
  }
  .dp-page .t-mark {
    font-size: 5.6948vw;
    margin-bottom: 1.1112vw;
  }
  .dp-page .t-label {
    gap: 0.9723vw;
    font-size: 0.9723vw;
    margin-bottom: 1.5279vw;
  }
  .dp-page .temoi-body blockquote {
    margin: 0 0 2.0835vw;
    font-size: 1.4584vw;
    max-width: 52.781vw;
  }
  .dp-page .t-author {
    font-size: 1.1112vw;
  }
  .dp-page .t-role {
    font-size: 1.0417vw;
    margin-top: 0.2778vw;
  }
  .dp-page .pv-contact {
    padding-top: 6.3893vw;
  }
  .dp-page .ct-grid {
    grid-template-columns: 1fr 29.8629vw;
    gap: 4.1669vw;
  }
  .dp-page .ct-p {
    font-size: 1.1459vw;
    margin-top: 1.8057vw;
  }
  .dp-page .ct-grid > .mani-head {
    top: 7.6394vw;
  }
  .dp-page .ct-card {
    top: 7.6394vw;
    border-radius: 0.9723vw;
    padding: 2.5002vw 2.2224vw;
  }
  .dp-page .ct-card::before {
    top: -4.8614vw;
    right: -4.1669vw;
    width: 15.9732vw;
    height: 15.9732vw;
  }
  .dp-page .ct-lbl {
    font-size: 0.8334vw;
    margin-bottom: 1.1112vw;
  }
  .dp-page .ct-name {
    font-size: 2.0835vw;
    margin-bottom: 0.5556vw;
  }
  .dp-page .ct-role {
    font-size: 0.9723vw;
    padding-bottom: 1.6668vw;
    border-bottom: 0.0694vw solid rgba(255, 255, 255, .18);
    margin-bottom: 1.6668vw;
  }
  .dp-page .ct-links {
    gap: 0.6945vw;
  }
  .dp-page .ct-mail,
  .dp-page .ct-tel {
    gap: 0.9723vw;
    border-radius: 0.3472vw;
    padding: 1.0417vw 1.5279vw;
    font-size: 1.0417vw;
  }
  .dp-page .ct-tel {
    border: 0.0694vw solid rgba(255, 255, 255, .5);
  }
  .dp-page .ct-adr {
    margin-top: 1.2501vw;
    font-size: 0.9376vw;
  }
  .dp-page .dp-btt {
    right: 1.5279vw;
    bottom: 1.5279vw;
    width: 3.1946vw;
    height: 3.1946vw;
    transform: translateY(0.6945vw);
  }
  .dp-page .dp-btt svg {
    width: 1.389vw;
    height: 1.389vw;
  }
}