/* =========================================================
   PAGE
   ========================================================= */

.rdh-tides{
  padding:18px 18px 100px;
}


/* =========================================================
   HERO
   ========================================================= */

.rdh-tide-hero{

  position:relative;

  overflow:hidden;

  border-radius:28px;

  padding:24px 22px 26px;

  min-height:270px;

  background:
    linear-gradient(
      145deg,
      #eef9ff 0%,
      #d8f2ff 55%,
      #fff7df 100%
    );

  box-shadow:
    0 10px 30px
    rgba(30,70,100,.10);

}


.rdh-tide-water{

  position:absolute;

  right:-10px;
  bottom:-12px;

  width:58%;
  height:145px;

  opacity:.82;

}


.rdh-tide-wave{

  width:100%;
  height:100%;

  fill:#73bde7;

}


/* =========================================================
   GROSSE FLÈCHE
   ========================================================= */

.rdh-tide-status-icon{

  position:absolute;

  right:24px;
  top:16px;

  width:96px;
  height:96px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(245,250,255,.95)
    );

  box-shadow:
    0 14px 32px
    rgba(0,80,140,.16),
    inset 0 0 0 5px
    rgba(255,255,255,.55);

  z-index:3;

}


.rdh-tide-status-icon svg{

  width:68px;
  height:68px;

}


.rdh-arrow-ring{

  fill:none;

  stroke-width:2.8;

}


.rdh-arrow-shaft,
.rdh-arrow-head{

  fill:none;

  stroke-linecap:round;
  stroke-linejoin:round;

  stroke-width:4.4;

}


/* Montante */

.rdh-is-rising .rdh-arrow-ring{

  stroke:#9ed5f5;

}


.rdh-is-rising .rdh-arrow-shaft,
.rdh-is-rising .rdh-arrow-head{

  stroke:#1694d1;

}


.rdh-is-rising .rdh-tide-status-icon{

  animation:
    rdhFloatUp
    2.1s
    ease-in-out
    infinite;

}


/* Descendante */

.rdh-is-falling .rdh-arrow-ring{

  stroke:#ffd08a;

}


.rdh-is-falling .rdh-arrow-shaft,
.rdh-is-falling .rdh-arrow-head{

  stroke:#f29b2f;

}


.rdh-is-falling .rdh-tide-status-icon{

  animation:
    rdhFloatDown
    2.1s
    ease-in-out
    infinite;

}


@keyframes rdhFloatUp{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-5px);
  }

}


@keyframes rdhFloatDown{

  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(5px);
  }

}


/* =========================================================
   TEXTE HERO
   ========================================================= */

.rdh-tide-status{

  position:relative;

  z-index:2;

  display:inline-block;

  padding:7px 12px;

  border-radius:999px;

  background:
    rgba(255,255,255,.75);

  color:#147dae;

  font-size:12px;

  font-weight:800;

  letter-spacing:.7px;

}


.rdh-tide-big{

  position:relative;

  z-index:2;

  margin-top:18px;

  max-width:230px;

  font-size:34px;

  line-height:1.02;

  font-weight:800;

  color:#1c4056;

}


/* =========================================================
   PROCHAINE MARÉE
   ========================================================= */

.rdh-next-tide{

  position:relative;

  z-index:2;

  margin-top:18px;

}


.rdh-next-label{

  color:#527081;

  font-size:13px;

  font-weight:600;

}


.rdh-next-time{

  margin-top:2px;

  font-size:31px;

  line-height:1;

  font-weight:850;

  color:#153e56;

}


.rdh-next-meta{

  display:flex;

  align-items:center;

  gap:8px;

  margin-top:8px;

  color:#527081;

  font-size:14px;

  font-weight:700;

}


.rdh-coeff-pill{

  display:inline-flex;

  padding:5px 9px;

  border-radius:999px;

  background:#fff;

  color:#147dae;

  box-shadow:
    0 4px 12px
    rgba(20,100,150,.10);

}


/* =========================================================
   CARTE
   ========================================================= */

.rdh-tide-card{

  margin-top:18px;

  padding:20px;

  background:#fff;

  border-radius:24px;

  box-shadow:
    0 8px 25px
    rgba(30,60,80,.08);

}


.rdh-tide-card-title{

  font-size:21px;

  font-weight:800;

  color:#243d4c;

}


.rdh-tide-card-text{

  margin-top:4px;

  font-size:14px;

  color:#758892;

}


/* =========================================================
   JOUR
   ========================================================= */

.rdh-tide-days{

  display:flex;

  flex-direction:column;

  gap:12px;

  margin-top:18px;

}


.rdh-tide-day{

  padding:15px;

  border-radius:18px;

  background:#f5fafc;

}


.rdh-tide-day.today{

  background:
    linear-gradient(
      135deg,
      #eef9ff,
      #fff9e8
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(40,150,205,.12);

}


.rdh-day-heading{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:9px;

}


.rdh-day-heading strong{

  font-size:16px;

  color:#234558;

}


.rdh-day-heading span{

  margin-left:7px;

  padding:3px 7px;

  border-radius:999px;

  background:#dff3ff;

  color:#1689bf;

  font-size:10px;

  font-weight:800;

}


/* =========================================================
   ÉVÉNEMENTS
   ========================================================= */

.rdh-day-event{

  display:grid;

  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  gap:10px;

  align-items:center;

  padding:9px 0;

  border-top:
    1px solid
    rgba(50,90,110,.08);

}


.rdh-day-event:first-child{

  border-top:0;

}


.rdh-event-symbol{

  width:30px;
  height:30px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  font-size:17px;

  font-weight:900;

}


.rdh-event-symbol.high{

  color:#128dc8;

  background:#dff4ff;

}


.rdh-event-symbol.low{

  color:#e68b20;

  background:#fff1d9;

}


.rdh-event-type{

  color:#6b818d;

  font-size:11px;

  font-weight:600;

}


.rdh-event-time{

  margin-top:1px;

  color:#24485b;

  font-size:18px;

  font-weight:850;

}


.rdh-event-right{

  text-align:right;

}


.rdh-event-height{

  color:#415f6e;

  font-size:13px;

  font-weight:700;

}


.rdh-event-coeff{

  margin-top:2px;

  color:#1688bd;

  font-size:11px;

  font-weight:800;

}


/* =========================================================
   ERREUR
   ========================================================= */

.rdh-tide-error{

  margin-top:18px;

  min-height:150px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  border-radius:18px;

  background:#f3f8fa;

  text-align:center;

  color:#607984;

}


.rdh-tide-error strong{

  color:#345365;

}


.rdh-tide-error span{

  margin-top:5px;

  font-size:13px;

}


/* =========================================================
   À SAVOIR
   ========================================================= */

.rdh-tide-info{

  margin-top:18px;

  padding:17px 18px;

  display:flex;

  gap:13px;

  background:#fff8df;

  border-radius:20px;

  color:#5f5635;

}


.rdh-tide-info-icon{

  flex:0 0 32px;

  width:32px;
  height:32px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  background:#ffd45a;

  font-weight:800;

}


.rdh-tide-info strong{

  display:block;

  margin-bottom:4px;

}


.rdh-tide-info p{

  margin:0;

  font-size:13px;

  line-height:1.45;

}


.rdh-tide-source{

  padding-top:16px;

  text-align:center;

  font-size:11px;

  color:#9aa7ad;

}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media(max-width:390px){

  .rdh-tide-status-icon{

    width:88px;
    height:88px;

    right:17px;

  }

  .rdh-tide-status-icon svg{

    width:62px;
    height:62px;

  }

  .rdh-tide-big{

    max-width:205px;

    font-size:31px;

  }

}


/* === MAREES HONFLEUR INSIDER - VERSION LUXE === */


/* =========================================================
   HERO
   ========================================================= */

.rdh-tide-hero {
  min-height: 270px;

  padding:
    24px
    22px
    27px;

  border:
    1px solid
    rgba(198,146,72,.22);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(232,204,154,.28) 0,
      rgba(232,204,154,0) 34%
    ),
    linear-gradient(
      145deg,
      #fbfcfd 0%,
      #edf4f7 53%,
      #faf5e9 100%
    );

  box-shadow:
    0 14px 38px rgba(16,35,90,.09),
    0 2px 8px rgba(16,35,90,.035);
}


/* =========================================================
   VAGUE
   ========================================================= */

.rdh-tide-water {
  right: -18px;
  bottom: -17px;

  width: 61%;
  height: 142px;

  opacity: .50;
}


.rdh-tide-wave {
  fill: #5c98b7;
}


/* =========================================================
   ICONE ET FLECHE
   ========================================================= */

.rdh-tide-status-icon {
  top: 20px;
  right: 22px;

  width: 82px;
  height: 82px;

  border:
    1px solid
    rgba(198,146,72,.36);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(250,247,239,.94)
    );

  box-shadow:
    0 10px 24px rgba(16,35,90,.10),
    inset 0 0 0 4px rgba(255,255,255,.58);
}


.rdh-tide-status-icon svg {
  width: 58px;
  height: 58px;
}


.rdh-arrow-ring {
  stroke-width: 2;
  stroke: #d2aa69 !important;
}


.rdh-arrow-shaft,
.rdh-arrow-head {
  stroke-width: 3.4;
}


/* Montante */

.rdh-is-rising .rdh-arrow-shaft,
.rdh-is-rising .rdh-arrow-head {
  stroke: #246b8f;
}


/* Descendante */

.rdh-is-falling .rdh-arrow-shaft,
.rdh-is-falling .rdh-arrow-head {
  stroke: #c78f3b;
}


/*
 * Animation plus discrète
 */

.rdh-is-rising .rdh-tide-status-icon {
  animation:
    rdhFloatUpLuxury
    2.8s
    ease-in-out
    infinite;
}


.rdh-is-falling .rdh-tide-status-icon {
  animation:
    rdhFloatDownLuxury
    2.8s
    ease-in-out
    infinite;
}


@keyframes rdhFloatUpLuxury {

  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

}


@keyframes rdhFloatDownLuxury {

  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }

}


/* =========================================================
   BADGE
   ========================================================= */

.rdh-tide-status {
  padding:
    7px
    13px;

  border:
    1px solid
    rgba(198,146,72,.22);

  background:
    rgba(255,255,255,.72);

  color: #1e617d;

  font-size: 11px;

  letter-spacing: 1px;

  box-shadow:
    0 4px 12px
    rgba(16,35,90,.035);
}


/* =========================================================
   TITRE PRINCIPAL
   ========================================================= */

.rdh-tide-big {
  margin-top: 20px;

  max-width: 225px;

  color: #102f45;

  font-size: 34px;
  line-height: 1.03;

  font-weight: 850;

  letter-spacing: -.6px;
}


/* =========================================================
   PROCHAINE MAREE
   ========================================================= */

.rdh-next-tide {
  margin-top: 20px;
}


.rdh-next-label {
  color: #697b87;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .15px;
}


.rdh-next-time {
  margin-top: 3px;

  color: #102f45;

  font-size: 31px;

  font-weight: 850;

  letter-spacing: -.5px;
}


.rdh-next-meta {
  margin-top: 9px;

  color: #6b7d88;
}


/* =========================================================
   COEFFICIENT
   ========================================================= */

.rdh-coeff-pill {
  padding:
    5px
    9px;

  border:
    1px solid
    rgba(198,146,72,.20);

  background:
    rgba(255,255,255,.82);

  color: #a3742f;

  box-shadow:
    0 4px 11px
    rgba(16,35,90,.045);
}


/* =========================================================
   GRANDE CARTE 7 JOURS
   ========================================================= */

.rdh-tide-card {
  margin-top: 18px;

  padding: 20px;

  border:
    1px solid
    rgba(16,35,90,.055);

  border-radius: 25px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fdfdfc 100%
    );

  box-shadow:
    0 12px 34px rgba(16,35,90,.075);
}


.rdh-tide-card-title {
  color: #16384b;

  font-size: 21px;

  font-weight: 850;

  letter-spacing: -.25px;
}


.rdh-tide-card-text {
  margin-top: 4px;

  color: #7b8790;

  font-size: 13px;
}


/* =========================================================
   JOURNEES
   ========================================================= */

.rdh-tide-days {
  gap: 11px;

  margin-top: 18px;
}


.rdh-tide-day {
  padding: 15px;

  border:
    1px solid
    rgba(16,35,90,.05);

  border-radius: 18px;

  background:
    #f8fafb;

  box-shadow:
    0 3px 10px
    rgba(16,35,90,.025);
}


/*
 * Aujourd'hui
 */

.rdh-tide-day.today {
  border:
    1px solid
    rgba(198,146,72,.24);

  background:
    linear-gradient(
      135deg,
      #f5fafc 0%,
      #fbf8ef 100%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 5px 15px rgba(16,35,90,.035);
}


/* =========================================================
   ENTETE JOUR
   ========================================================= */

.rdh-day-heading {
  margin-bottom: 10px;
}


.rdh-day-heading strong {
  color: #17384a;

  font-size: 16px;

  font-weight: 850;
}


.rdh-day-heading span {
  margin-left: 7px;

  padding:
    4px
    8px;

  border:
    1px solid
    rgba(42,112,143,.11);

  background:
    #edf6f8;

  color: #37758f;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .3px;
}


/* =========================================================
   EVENEMENTS
   ========================================================= */

.rdh-day-event {
  grid-template-columns:
    34px
    minmax(0,1fr)
    auto;

  gap: 10px;

  padding:
    10px
    0;

  border-top:
    1px solid
    rgba(16,35,90,.065);
}


/* Pleine mer */

.rdh-event-symbol.high {
  color: #276f91;

  background:
    #eaf4f8;

  box-shadow:
    inset 0 0 0 1px
    rgba(39,111,145,.08);
}


/* Basse mer */

.rdh-event-symbol.low {
  color: #bd8735;

  background:
    #faf2e4;

  box-shadow:
    inset 0 0 0 1px
    rgba(189,135,53,.10);
}


.rdh-event-type {
  color: #78868e;

  font-size: 10px;

  font-weight: 650;
}


.rdh-event-time {
  margin-top: 2px;

  color: #17384a;

  font-size: 18px;

  font-weight: 850;
}


.rdh-event-height {
  color: #536873;

  font-size: 12px;

  font-weight: 750;
}


.rdh-event-coeff {
  color: #a3742f;

  font-size: 10px;

  font-weight: 850;
}


/* =========================================================
   ERREUR
   ========================================================= */

.rdh-tide-error {
  border:
    1px solid
    rgba(16,35,90,.06);

  background:
    #f8faf9;

  color: #71818a;
}


/* =========================================================
   PETITS ECRANS
   ========================================================= */

@media (max-width: 390px) {

  .rdh-tide-hero {
    min-height: 258px;

    padding:
      22px
      19px
      24px;
  }


  .rdh-tide-status-icon {
    width: 76px;
    height: 76px;

    right: 18px;
  }


  .rdh-tide-status-icon svg {
    width: 53px;
    height: 53px;
  }


  .rdh-tide-big {
    font-size: 32px;

    max-width: 210px;
  }


  .rdh-tide-water {
    width: 63%;
  }

}


/* === FIN MAREES HONFLEUR INSIDER - VERSION LUXE === */


/* =========================================================
   FLECHE LUXE MAREES
   ========================================================= */

.rdh-arrow-inner-ring {
  fill: none;
  stroke: rgba(210,170,105,.48);
  stroke-width: 1.2;
}

.rdh-arrow-accent {
  fill: none;
  stroke-linecap: round;
  stroke-width: 2.1;
}

.rdh-is-rising .rdh-arrow-accent {
  stroke: #246b8f;
  opacity: .78;
}

.rdh-is-falling .rdh-arrow-accent {
  stroke: #c78f3b;
  opacity: .82;
}


/* =========================================================
   MAREES - FLECHE XL DIAGONALE
   ========================================================= */

.rdh-tide-status-icon {
  width: 164px !important;
  height: 164px !important;

  top: 10px !important;
  right: 8px !important;

  border: 2px solid rgba(198,146,72,.72) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbf6eb 100%
    ) !important;

  box-shadow:
    0 16px 36px rgba(16,35,90,.14),
    inset 0 0 0 5px rgba(255,255,255,.82) !important;
}


.rdh-tide-status-icon svg {
  width: 116px !important;
  height: 116px !important;

  transform-origin: 50% 50% !important;
}


/* Montée : vers le haut et la droite */

.rdh-is-rising .rdh-tide-status-icon svg {
  transform: rotate(22deg) !important;
}


/* Descente : vers le bas et la droite */

.rdh-is-falling .rdh-tide-status-icon svg {
  transform: rotate(-22deg) !important;
}


/* Cercles beaucoup plus lisibles */

.rdh-arrow-ring {
  stroke: #c69248 !important;
  stroke-width: 2.8 !important;
}


.rdh-arrow-inner-ring {
  stroke: rgba(198,146,72,.58) !important;
  stroke-width: 1.5 !important;
}


/* Même bleu nuit très contrasté dans les deux sens */

.rdh-is-rising .rdh-arrow-shaft,
.rdh-is-rising .rdh-arrow-head,
.rdh-is-rising .rdh-arrow-accent,
.rdh-is-falling .rdh-arrow-shaft,
.rdh-is-falling .rdh-arrow-head,
.rdh-is-falling .rdh-arrow-accent {
  stroke: #10235a !important;
}


.rdh-arrow-shaft,
.rdh-arrow-head {
  stroke-width: 4 !important;
}


.rdh-arrow-accent {
  stroke-width: 2.6 !important;
  opacity: 1 !important;
}


/* Mobile */

@media (max-width: 390px) {

  .rdh-tide-status-icon {
    width: 152px !important;
    height: 152px !important;

    right: 6px !important;
  }

  .rdh-tide-status-icon svg {
    width: 108px !important;
    height: 108px !important;
  }

}



/* =========================================================
   MAREES - FLECHE X2 / UN SEUL CONTOUR / RECADRAGE
   ========================================================= */

.rdh-tide-status-icon {
  width: 164px !important;
  height: 164px !important;

  top: 112px !important;
  right: 8px !important;

  border: 2px solid rgba(198,146,72,.68) !important;

  box-shadow:
    0 14px 30px rgba(16,35,90,.12) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbf6eb 100%
    ) !important;
}


/* Suppression du deuxième contour */

.rdh-arrow-inner-ring {
  display: none !important;
}


.rdh-tide-status-icon svg {
  width: 116px !important;
  height: 116px !important;
}


/* Montée : haut-droite */

.rdh-is-rising .rdh-tide-status-icon svg {
  transform: rotate(22deg) !important;
}


/* Descente : bas-droite */

.rdh-is-falling .rdh-tide-status-icon svg {
  transform: rotate(-22deg) !important;
}


/* Contour unique doré */

.rdh-arrow-ring {
  stroke: #c69248 !important;
  stroke-width: 3 !important;
}


/* Flèche très lisible */

.rdh-arrow-shaft,
.rdh-arrow-head,
.rdh-arrow-accent {
  stroke: #10235a !important;
}


.rdh-arrow-shaft,
.rdh-arrow-head {
  stroke-width: 4.4 !important;
}


/* =========================================================
   HAUTEURS ET COEFFICIENTS PLUS LISIBLES
   ========================================================= */

.rdh-event-height {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #3f5665 !important;
}


.rdh-event-coeff {
  margin-top: 3px !important;

  font-size: 12px !important;
  font-weight: 850 !important;

  color: #a3742f !important;
}


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

@media (max-width: 390px) {

  .rdh-tide-status-icon {
    width: 154px !important;
    height: 154px !important;

    top: 116px !important;
    right: 5px !important;
  }

  .rdh-tide-status-icon svg {
    width: 110px !important;
    height: 110px !important;
  }

}



/* =========================================================
   MAREES - RECENTRAGE DEFINITIF FLECHE X2
   ========================================================= */

.rdh-tide-status-icon {
  top: auto !important;
  bottom: 18px !important;
  right: 10px !important;

  z-index: 5 !important;
}


@media (max-width: 390px) {

  .rdh-tide-status-icon {
    top: auto !important;
    bottom: 16px !important;
    right: 8px !important;
  }

}