/*
 * Page « Urgence » — styles.
 *
 * Repris de la maquette (Urgence détail — Gaza), chargés UNIQUEMENT sur le gabarit
 * template-urgence.php (voir inc/enqueue.php). Tout est scopé sous « .urgence-page » :
 * plusieurs classes (.wrap, .eyebrow, .sec, .reveal, .hr, .hl) sont partagées avec les
 * autres gabarits et ne doivent fuir ni vers l'en-tête, ni vers le pied de page. La
 * police « Anton » est fournie globalement par style.css (@font-face) → non redéclarée ici.
 *
 * Écarts assumés par rapport à la maquette (rendu identique, feuille sans code mort) :
 *   • la maquette scopait ses styles de base sous « .contact-page » (sa feuille avait été
 *     copiée depuis la page Contact) : le gabarit pose « .urgence-page », qui porte le
 *     même habillage ;
 *   • le bandeau reçoit le retrait haut qui dégage l'en-tête fixe du site (la maquette
 *     n'en portait pas : elle s'affichait sans en-tête) ;
 *   • la CARTE DE DON de la maquette (onglets Ponctuel/Mensuel, montants, champ libre et
 *     bouton d'envoi) n'est pas reprise : le formulaire est servi par la plateforme de
 *     dons dans un iframe (.ud-frame), qui occupe toute la colonne. L'habillage de la
 *     carte — fond bleu grainé, titre, mention de réassurance — ne l'est pas non plus :
 *     le formulaire porte le sien, et deux encadrements l'un dans l'autre se verraient ;
 *   • les classes que le balisage n'utilisait pas (.ud-alert, .stats-card, .don-card,
 *     .montants, .custom, .fiscal, .don-monthly, .sec-title, .kick) ne sont pas reprises ;
 *   • les flèches des boutons sont des masques CSS colorés par « currentColor »
 *     (.ud-arrow) au lieu d'images filtrées : le bouton fantôme inverse ses couleurs au
 *     survol, ce qu'une image ne peut pas suivre. La source reste le SVG du thème ;
 *   • tant qu'aucune photo n'est choisie au back-office, la vignette garde le cadre
 *     d'attente légendé de la maquette (.ud-ph) ;
 *   • html{scroll-behavior:smooth} est scopé aux ancres de la page (#don, #galerie) ;
 *   • 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
 * ========================================================================= */

.urgence-page,
.urgence-page *,
.urgence-page *::before,
.urgence-page *::after {
  box-sizing: border-box;
}
.urgence-page {
  font-family: 'Open Sans', sans-serif;
  color: #1d1a55;
  background: #fff;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
/* Les deux boutons du bandeau pointent vers des ancres de la page : 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 .urgence-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;
}
.urgence-page .ud-don,
.urgence-page .ud-galerie {
  scroll-margin-top: 160px;
}
.urgence-page h1,
.urgence-page h2 {
  margin: 0;
  font-weight: 400;
}
.urgence-page p,
.urgence-page figure {
  margin: 0;
}
.urgence-page a {
  text-decoration: none;
  color: inherit;
}
.urgence-page a:hover {
  color: #e9511c;
}
.urgence-page .wrap {
  padding: 0 28px;
}
.urgence-page .sec {
  padding: 72px 0;
}

/* Flèche des boutons : masque coloré par la couleur du texte du bouton. */
.urgence-page .ud-arrow {
  flex-shrink: 0;
  width: 14px;
  height: 8px;
  background-color: currentColor;
  -webkit-mask: url('../svgs/common-arrows/arrows-long-right.svg') no-repeat center / contain;
  mask: url('../svgs/common-arrows/arrows-long-right.svg') no-repeat center / contain;
  transition: transform 0.3s;
}

/* Cadre d'attente d'une photo non encore téléversée (reprend le placeholder de la
   maquette : fond marine très foncé, légende centrée). */
.urgence-page .ud-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #0f0d3a;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
}

/* ============================================================================
 * Étiquettes, animations d'apparition et barre de progression
 * ========================================================================= */

.urgence-page .eyebrow {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 14px;
  border-radius: 5px;
  background: #e9511c;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 16px;
  color: #fff;
}
.urgence-page .ud-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  width: 0;
  height: 4px;
  background: #e9511c;
}
@keyframes ud-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
@keyframes ud-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes ud-hl-grow {
  from { background-size: 0 118%; }
  to { background-size: 100% 118%; }
}
@keyframes ud-bar-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.urgence-page .hr {
  animation: ud-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.urgence-page .hr3 { animation-delay: 0.2s; }
.urgence-page .hr4 { animation-delay: 0.3s; }
.urgence-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.urgence-page .reveal.in {
  opacity: 1;
  transform: none;
}
@media (scripting: none) {
  .urgence-page .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
 * Bandeau
 * ========================================================================= */

.urgence-page .ud-hero {
  position: relative;
  overflow: hidden;
  /* Dégage l'en-tête fixe du site (146 px) + la respiration de la maquette (70 px).
     Le retrait est nommé : le filigrane s'y accroche pour rester à sa place. */
  --ud-hero-pad: 216px;
  padding: var(--ud-hero-pad) 0 76px;
  background: #1d1a55;
  color: #fff;
}
/* L'en-tête du site est fixe : le bandeau commence donc en HAUT DE PAGE, sous lui, là où
   la maquette le faisait commencer sous un en-tête posé dans le flux. Un décalage fixe
   (« top: -90px » dans la maquette) rognerait presque tout le filigrane derrière
   l'en-tête : il se cale ici sur le CONTENU du bandeau — les 160 px qui l'en séparaient
   dans la maquette — et suit donc le retrait quand celui-ci change en responsive. */
.urgence-page .ud-hero-deco {
  position: absolute;
  top: calc(var(--ud-hero-pad) - 160px);
  right: -70px;
  width: 420px;
  height: 420px;
  background: url('../svgs/comment-donner/logo-mark.svg') no-repeat center / contain;
  opacity: 0.14;
  transform: rotate(12deg);
  pointer-events: none;
  animation: ud-hero-float 14s ease-in-out infinite;
}
@keyframes ud-hero-float {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50% { transform: rotate(18deg) translateY(22px); }
}
.urgence-page .ud-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 50px;
  align-items: center;
}
.urgence-page .ud-hero .wrap > * {
  width: 100%;
  min-width: 0;
}
/* Bulletin de terrain vidé au back-office : l'accroche reprend toute la largeur. */
.urgence-page .ud-hero--solo .wrap {
  grid-template-columns: 1fr;
}
.urgence-page .ud-hero .eyebrow {
  padding: 8px 16px;
  background: #bd1118;
  font-size: 18px;
  transform: rotate(-3.3deg);
}
.urgence-page .ud-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.urgence-page .ud-live .dot {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: #fff;
  animation: ud-pulse 1.3s ease-in-out infinite;
}
.urgence-page .ud-hero h1 {
  margin: 0 0 24px;
  padding-bottom: 14px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(48px, 6.6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.01em;
}
.urgence-page .ud-hero h1 .ln {
  display: inline-block;
  opacity: 0;
  animation: ud-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.urgence-page .ud-hero h1 .l1 { animation-delay: 0.05s; }
.urgence-page .ud-hero h1 .l2 { animation-delay: 0.18s; }
.urgence-page .ud-hero h1 .hl {
  margin-left: -4px;
  padding: 0 10px;
  border-radius: 4px;
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 0 118%;
  background-position: 0 50%;
  color: #1d1a55;
}
.urgence-page .ud-hero h1 .l2.hl {
  animation:
    ud-rise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.18s forwards,
    ud-hl-grow 0.8s ease 0.5s forwards;
}
/* Pas de marge basse : la maquette déclarait « margin-bottom: 40px » mais sa règle de
   base « p { margin: 0 } », plus spécifique, la neutralisait — l'écart sous le texte vient
   donc des seuls 20 px des étiquettes. */
.urgence-page .ud-lead {
  font-size: 18px;
  line-height: 1.65;
  color: #dbe8f5;
  text-wrap: pretty;
}
.urgence-page .ud-lead strong {
  font-weight: 700;
  color: #fff;
}
.urgence-page .ud-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 20px 0 36px;
}
.urgence-page .ud-badge {
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #fff;
  transition: transform 0.25s;
}
.urgence-page .ud-badge:hover { transform: translateY(-3px); }
.urgence-page .ud-badge.red { background: #bd1118; }
.urgence-page .ud-badge.bleu { background: #055da8; }
.urgence-page .ud-badge.teal { background: #00af9c; }
.urgence-page .ud-badge.orange { background: #e9511c; }
/* Le retrait haut double celui des étiquettes (les marges voisines fusionnent : l'écart
   reste de 36 px), et tient encore quand le répéteur d'étiquettes est vidé au back-office
   — sans quoi les boutons viendraient toucher le texte d'introduction. */
.urgence-page .ud-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* ============================================================================
 * Boutons
 * ========================================================================= */

.urgence-page .btn-orange {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid #e9511c;
  border-radius: 5px;
  background: #e9511c;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}
.urgence-page .btn-orange:hover {
  background: #d1440f;
  color: #fff;
}
.urgence-page .btn-ghost-w {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 5px;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}
.urgence-page .btn-ghost-w:hover {
  background: #fff;
  color: #1d1a55;
}
.urgence-page .btn-orange:hover .ud-arrow,
.urgence-page .btn-ghost-w:hover .ud-arrow {
  transform: translateX(4px);
}

/* ============================================================================
 * Bulletin de terrain
 * ========================================================================= */

.urgence-page .ud-brief {
  position: relative;
  z-index: 1;
  padding: 22px 24px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: ud-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.32s forwards;
}
.urgence-page .brief-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.09em;
  color: #fff;
}
.urgence-page .brief-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background: #bd1118;
  animation: ud-pulse 1.3s ease-in-out infinite;
}
.urgence-page .brief-day {
  margin-left: auto;
  letter-spacing: 0.06em;
  color: #8f9cc0;
}
.urgence-page .brief-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 11px;
  align-items: baseline;
  padding-top: 28px;
}
.urgence-page .brief-val {
  font-family: 'Anton', sans-serif;
  font-size: 44px;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #fff;
}
.urgence-page .brief-lbl {
  align-self: center;
  font-size: 13.5px;
  line-height: 1.4;
  color: #dbe8f5;
}
.urgence-page .brief-bar {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.urgence-page .brief-bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #bd1118;
  transform-origin: left;
  animation: ud-bar-grow 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.6s both;
}
.urgence-page .brief-bar span.orange { background: #f08b1d; }
.urgence-page .brief-bar span.teal { background: #bddfec; }
.urgence-page .brief-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  line-height: 1.5;
  color: #b9c4e0;
}
.urgence-page .brief-foot .fn {
  font-family: 'Anton', sans-serif;
  font-size: 34px;
  line-height: 1;
  color: #bddfec;
}

/* ============================================================================
 * Photo pleine largeur
 * ========================================================================= */

.urgence-page .ud-photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 21 / 8;
  background: #0f0d3a;
}
/* Photo posée hors du flux, comme le cadre d'attente : la hauteur de la bande vient de
   son ratio, jamais des dimensions de l'image téléversée. */
.urgence-page .ud-photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.urgence-page .ud-cap {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 60px 26px 18px;
  background: linear-gradient(transparent, rgba(15, 13, 58, 0.85));
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================================================
 * Don d'urgence
 * ========================================================================= */

.urgence-page .ud-don {
  background: #eef6fb;
}
.urgence-page .don-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.urgence-page .don-split > * {
  width: 100%;
  min-width: 0;
}
/* Une seule colonne présente (accroche vidée, ou formulaire de don pas encore réglé). */
.urgence-page .don-split--solo {
  grid-template-columns: 1fr;
  max-width: 720px;
}
.urgence-page .don-sticky {
  position: sticky;
  top: 110px;
  height: fit-content;
}
.urgence-page .don-head {
  position: relative;
  padding-top: 35px;
}
.urgence-page .eyebrow.tilt {
  position: absolute;
  top: -24px;
  left: 0;
  z-index: 2;
  margin-bottom: 0;
  padding: 8px 16px;
  background: #bd1118;
  font-size: 28px;
  line-height: normal;
  white-space: nowrap;
  transform: rotate(-4.14deg);
}
.urgence-page .don-headline {
  margin-bottom: 16px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.01em;
  color: #1d1a55;
}
.urgence-page .don-headline .hl {
  background: linear-gradient(#bddfec, #bddfec) no-repeat;
  background-size: 100% 56%;
  background-position: 0 68%;
  color: #1d1a55;
}
/* Même cas que .ud-lead : la maquette déclarait « margin-top: 22px », neutralisé par sa
   règle « p { margin: 0 } ». L'écart au-dessus du texte vient des 16 px du titre. */
.urgence-page .don-sub {
  font-size: 16px;
  line-height: 1.7;
  color: #5b6078;
}
.urgence-page .don-sub strong {
  color: #1d1a55;
}
.urgence-page .don-assur {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.urgence-page .don-assur li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #1d1a55;
}
.urgence-page .don-assur li::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 6px;
  margin: 0 2px;
  border-left: 2px solid #e9511c;
  border-bottom: 2px solid #e9511c;
  transform: rotate(-45deg);
}
.urgence-page .ud-don .btn-orange {
  max-width: 100%;
  margin-top: 28px;
}

/* Un iframe servi par un autre domaine ne peut pas mesurer son contenu : sa hauteur est
   réservée ici, depuis le back-office (--ud-frame-h, posée en style sur .ud-frame). Le
   formulaire remplit toute la colonne, sans cadre du thème autour : il porte le sien. Le
   fond blanc évite un trou dans la section avant que le formulaire ne se peigne. */
.urgence-page .ud-frame {
  width: 100%;
  height: fit-content;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
}
.urgence-page .ud-frame iframe {
  display: block;
  width: 100%;
  height: var(--ud-frame-h, 620px);
  border: 0;
}

/* ============================================================================
 * Galerie
 * ========================================================================= */

.urgence-page .ud-galerie {
  padding-bottom: 32px;
}
.urgence-page .galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
}
.urgence-page .gal {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #0f0d3a;
}
.urgence-page .gal.large {
  grid-column: span 2;
  aspect-ratio: auto;
  min-height: 100%;
}
/* Comme la photo pleine largeur : hors du flux, pour que la hauteur de chaque rangée
   vienne du ratio des vignettes et non des dimensions des images téléversées — sans quoi
   une grande image gonfle sa rangée et laisse un vide sous les autres tuiles. */
.urgence-page .gal img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.urgence-page .gal-lbl {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(15, 13, 58, 0.8));
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #fff;
}


/* ============================================================================
 * Adaptations
 * ========================================================================= */

@media (max-width: 1279px) {
  .urgence-page .eyebrow.tilt { font-size: 18px; line-height: 27px; top: -7px; }
  /* En-tête 101 px sur tablette/mobile + la respiration de la maquette. Le filigrane
     suit ce retrait (voir --ud-hero-pad). */
  .urgence-page .ud-hero { --ud-hero-pad: 140px; }
}
@media (max-width: 1040px) {
  .urgence-page .ud-hero .wrap { grid-template-columns: 1fr; gap: 40px; }
  .urgence-page .ud-brief { max-width: 520px; }
  .urgence-page .don-split { grid-template-columns: 1fr; gap: 36px; }
  .urgence-page .don-sticky { position: static; }
  .urgence-page .don-head { padding-top: 47px; }
  .urgence-page .eyebrow.tilt { top: 4px; }
}
@media (max-width: 820px) {
  .urgence-page .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .urgence-page .gal.large { grid-column: span 2; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .urgence-page .eyebrow.tilt { font-size: 14px; line-height: 21px; top: 10px; }
}
@media (max-width: 640px) {
  .urgence-page .don-head { padding-top: 44px; }
  .urgence-page .wrap { padding: 0 16px; }
  .urgence-page .sec { padding: 52px 0; }
  .urgence-page .ud-hero { --ud-hero-pad: 140px; padding-bottom: 58px; }
  .urgence-page .ud-photo { aspect-ratio: 4 / 3; }
  .urgence-page .ud-brief { padding: 20px 18px 18px; }
  .urgence-page .ud-ctas .btn-orange,
  .urgence-page .ud-ctas .btn-ghost-w { width: 100%; justify-content: center; }
  .urgence-page .don-headline { font-size: 34px; word-break: break-word; }
  .urgence-page .don-sub { font-size: 15px; }
  .urgence-page .don-assur { gap: 8px; margin-top: 18px; }
  .urgence-page .don-assur li { font-size: 15px; }
  .urgence-page .ud-don .btn-orange {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 14px 18px;
    font-size: 15px;
    text-align: left;
  }
  .urgence-page .galerie { grid-template-columns: 1fr; gap: 8px; }
  .urgence-page .gal.large { grid-column: span 1; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .urgence-page .reveal,
  .urgence-page .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .urgence-page .hr,
  .urgence-page .ud-hero-deco,
  .urgence-page .ud-live .dot,
  .urgence-page .brief-dot,
  .urgence-page .brief-bar span {
    animation: none;
  }
  .urgence-page .ud-brief {
    opacity: 1;
    animation: none;
  }
  .urgence-page .ud-hero h1 .ln {
    opacity: 1;
    animation: none;
  }
  .urgence-page .ud-hero h1 .hl {
    background-size: 100% 118%;
  }
  html {
    scroll-behavior: auto;
  }
}

@media (min-width: 1700px) {
  .urgence-page .ud-don,
  .urgence-page .ud-galerie {
    scroll-margin-top: 11.1118vw;
  }
  .urgence-page .wrap {
    padding: 0 1.9446vw;
  }
  .urgence-page .sec {
    padding: 5.0003vw 0;
  }
  .urgence-page .ud-arrow {
    width: 0.9723vw;
    height: 0.5556vw;
  }
  .urgence-page .ud-ph {
    padding: 1.6668vw;
    font-size: 0.9028vw;
  }
  .urgence-page .eyebrow {
    margin-bottom: 1.5279vw;
    padding: 0.4167vw 0.9723vw;
    border-radius: 0.3472vw;
    font-size: 1.1112vw;
  }
  .urgence-page .ud-progress {
    height: 0.2778vw;
  }
  .urgence-page .reveal {
    transform: translateY(1.5279vw);
  }
  .urgence-page .ud-hero {
    --ud-hero-pad: 15.0009vw;
    padding: var(--ud-hero-pad) 0 5.2781vw;
  }
  .urgence-page .ud-hero-deco {
    top: calc(var(--ud-hero-pad) - 11.1118vw);
    right: -4.8614vw;
    width: 29.1684vw;
    height: 29.1684vw;
  }
  .urgence-page .ud-hero .wrap {
    gap: 3.4724vw;
  }
  .urgence-page .ud-hero .eyebrow {
    padding: 0.5556vw 1.1112vw;
    font-size: 1.2501vw;
  }
  .urgence-page .ud-live {
    gap: 0.6945vw;
  }
  .urgence-page .ud-live .dot {
    width: 0.625vw;
    height: 0.625vw;
  }
  .urgence-page .ud-hero h1 {
    margin: 0 0 1.6668vw;
    padding-bottom: 0.9723vw;
    font-size: clamp(3.3335vw, 6.6vw, 6.3893vw);
  }
  .urgence-page .ud-hero h1 .hl {
    margin-left: -0.2778vw;
    padding: 0 0.6945vw;
    border-radius: 0.2778vw;
  }
  .urgence-page .ud-lead {
    font-size: 1.2501vw;
  }
  .urgence-page .ud-badges {
    gap: 0.6945vw;
    margin: 1.389vw 0 2.5002vw;
  }
  .urgence-page .ud-badge {
    padding: 0.4167vw 0.9723vw;
    border-radius: 0.2778vw;
    font-size: 0.9723vw;
  }
  .urgence-page .ud-badge:hover {
    transform: translateY(-0.2083vw);
  }
  .urgence-page .ud-ctas {
    gap: 0.8334vw;
    margin-top: 2.5002vw;
  }
  .urgence-page .btn-orange {
    gap: 0.8334vw;
    padding: 1.0417vw 2.0835vw;
    border: 0.0694vw solid #e9511c;
    border-radius: 0.3472vw;
    font-size: 1.1112vw;
  }
  .urgence-page .btn-ghost-w {
    gap: 0.8334vw;
    padding: 1.0417vw 1.9446vw;
    border: 0.0694vw solid rgba(255, 255, 255, 0.55);
    border-radius: 0.3472vw;
    font-size: 1.1112vw;
  }
  .urgence-page .btn-orange:hover .ud-arrow,
  .urgence-page .btn-ghost-w:hover .ud-arrow {
    transform: translateX(0.2778vw);
  }
  .urgence-page .ud-brief {
    padding: 1.5279vw 1.6668vw 1.389vw;
    border: 0.0694vw solid rgba(255, 255, 255, 0.22);
    border-radius: 0.6945vw;
  }
  .urgence-page .brief-head {
    gap: 0.625vw;
    padding-bottom: 1.1112vw;
    border-bottom: 0.0694vw solid rgba(255, 255, 255, 0.14);
    font-size: 0.8334vw;
  }
  .urgence-page .brief-dot {
    width: 0.5556vw;
    height: 0.5556vw;
  }
  .urgence-page .brief-row {
    column-gap: 1.1112vw;
    row-gap: 0.7639vw;
    padding-top: 1.9446vw;
  }
  .urgence-page .brief-val {
    font-size: 3.0557vw;
  }
  .urgence-page .brief-lbl {
    font-size: 0.9376vw;
  }
  .urgence-page .brief-bar {
    height: 0.3472vw;
    border-radius: 0.2083vw;
  }
  .urgence-page .brief-bar span {
    border-radius: 0.2083vw;
  }
  .urgence-page .brief-foot {
    gap: 0.8334vw;
    margin-top: 1.389vw;
    padding-top: 1.1112vw;
    border-top: 0.0694vw solid rgba(255, 255, 255, 0.14);
    font-size: 0.9028vw;
  }
  .urgence-page .brief-foot .fn {
    font-size: 2.3613vw;
  }
  .urgence-page .ud-cap {
    padding: 4.1669vw 1.8057vw 1.2501vw;
    font-size: 0.8681vw;
  }
  .urgence-page .don-split {
    gap: 3.4724vw;
  }
  .urgence-page .don-split--solo {
    max-width: 50.003vw;
  }
  .urgence-page .don-sticky {
    top: 7.6394vw;
  }
  .urgence-page .don-head {
    padding-top: 2.4445vw;
  }
  .urgence-page .eyebrow.tilt {
    top: -1.6668vw;
    padding: 0.5556vw 1.1112vw;
    font-size: 1.9446vw;
  }
  .urgence-page .don-headline {
    margin-bottom: 1.1112vw;
    font-size: clamp(2.639vw, 5vw, 4.7225vw);
  }
  .urgence-page .don-sub {
    font-size: 1.1112vw;
  }
  .urgence-page .don-assur {
    gap: 0.6945vw;
    margin: 1.5279vw 0 0;
  }
  .urgence-page .don-assur li {
    gap: 0.8334vw;
    font-size: 1.1112vw;
  }
  .urgence-page .don-assur li::before {
    width: 0.8334vw;
    height: 0.4167vw;
    margin: 0 0.1389vw;
    border-left-width: 0.1389vw;
    border-bottom-width: 0.1389vw;
  }
  .urgence-page .ud-don .btn-orange {
    margin-top: 1.9446vw;
  }
  .urgence-page .ud-frame {
    height: calc(var(--ud-frame-h, 620px) * var(--mdm-k));
    border-radius: 0.5556vw;
  }
  .urgence-page .ud-frame iframe {
    width: calc(100% / var(--mdm-k));
    transform: scale(var(--mdm-k));
    transform-origin: 0 0;
  }
  .urgence-page .ud-galerie {
    padding-bottom: 2.2224vw;
  }
  .urgence-page .galerie {
    gap: 0.6945vw;
  }
  .urgence-page .gal {
    border-radius: 0.6945vw;
  }
  .urgence-page .gal-lbl {
    padding: 2.7779vw 1.1112vw 0.9723vw;
    font-size: 0.8334vw;
  }
}