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

.rdh-tides{
  padding:0 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 - CORRECTION MOBILE COEFFICIENT
   18/08/2026
   ========================================================= */

@media (max-width: 480px){

  .rdh-next-tide{
    max-width: calc(100% - 120px);
  }

  .rdh-next-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .rdh-coeff-pill{
    max-width:100%;
    padding:6px 10px;
    font-size:12px;
    line-height:1.2;
    white-space:normal;
  }

}


/* =========================================================
   MAREES - COEFFICIENT COMPACT PREMIUM
   ========================================================= */

.rdh-current-coeff{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}

.rdh-coeff-pill{
  display:inline-flex;
  align-items:center;

  padding:5px 9px;

  border-radius:9px;

  background:#147dae;
  color:#fff;

  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.07em;

  box-shadow:
    0 5px 14px rgba(20,100,150,.16);
}

.rdh-coeff-label{
  padding-left:2px;

  color:#527081;

  font-size:11px;
  line-height:1.15;
  font-weight:600;
}

@media (max-width:480px){

  .rdh-next-tide{
    max-width:calc(100% - 115px);
  }

  .rdh-next-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:7px;
  }

  .rdh-coeff-pill{
    white-space:nowrap;
  }

}