/* Outil marées */
.maree-cles strong, .maree-evt__heure, .maree-carte__jour strong { font-variant-numeric: lining-nums tabular-nums; }
.maree-hero { min-height: 520px; }
.maree-hero .fiche-hero__contenu { padding-bottom: 130px; }
.maree-hero__date { margin: 0; font-size: 18px; color: var(--marin); }

.maree-cles { grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: stretch; }
.maree-cles .fiche-cles__case strong small { font-family: var(--sans); font-size: 15px; color: var(--brume); margin-left: 4px; }
.maree-cles__detail { font-size: 14px; color: var(--brume); }
.maree-etat { display: flex; gap: 16px; align-items: center; }
.maree-etat__fleche { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--embrun); color: var(--chenal); }
.maree-etat__fleche--baisse { color: var(--laiton); background: #F6EFE3; }
.maree-etat__fleche--baisse svg { transform: rotate(180deg); }

.maree-jour { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.maree-graph { background: linear-gradient(180deg, #F2F8F8 0%, #FFFFFF 100%); border: 1px solid #E3EDEE; border-radius: var(--rayon-section); padding: 22px 18px 10px; }
.maree-graph svg { display: block; width: 100%; height: auto; overflow: visible; }
.maree-graph text { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.maree-graph__legende { display: flex; gap: 18px; padding: 4px 30px 8px; font-size: 13px; color: var(--brume); }
.maree-graph__legende i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.maree-liste { background: var(--marin); color: #FFFFFF; border-radius: var(--rayon-section); padding: 26px 26px 18px; }
.maree-liste .etiquette { color: var(--lagon); margin: 0 0 8px; }
.maree-evt { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid #FFFFFF1F; }
.maree-evt:first-of-type { border-top: 0; }
.maree-evt__pastille { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 500; background: #5CC6C926; color: var(--lagon); }
.maree-evt--L .maree-evt__pastille { background: #A9824B33; color: #E3C48F; }
.maree-evt__type { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFFA6; }
.maree-evt__heure { display: block; font-family: var(--serif); font-size: 30px; font-weight: 500; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.maree-evt__h { font-variant-numeric: tabular-nums; font-size: 16px; }
.maree-evt--passe { opacity: .45; }

.maree-semaine { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.maree-carte { border: 1px solid #E3EDEE; border-radius: var(--rayon-carte); padding: 18px 18px 14px; background: #FFFFFF; transition: box-shadow .2s; }
.maree-carte:hover { box-shadow: 0 20px 50px #0A344218; }
.maree-carte__jour { display: flex; justify-content: space-between; align-items: baseline; }
.maree-carte__jour strong { font-family: var(--serif); font-size: 24px; font-weight: 500; }
.maree-carte__jour span { color: var(--brume); font-size: 14px; }
.maree-carte svg { display: block; width: 100%; height: auto; margin: 8px 0 6px; }
.maree-carte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.maree-carte li { display: flex; justify-content: space-between; white-space: nowrap; padding: 3px 0; border-top: 1px solid #F0F5F5; }
.maree-carte li:first-child { border-top: 0; }
.maree-carte li b { font-weight: 500; color: var(--chenal); margin-right: 6px; }
.maree-carte li.L b { color: var(--laiton); }

.maree-source { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-start; margin-top: 56px; padding: 22px 26px; border-radius: var(--rayon-carte); background: var(--embrun); font-size: 14px; color: var(--brume); }
.maree-source p { margin: 0; flex: 1 1 420px; }

@media (max-width: 900px) {
  .maree-graph { overflow-x: auto; padding-left: 8px; padding-right: 8px; }
  .maree-graph svg { min-width: 680px; }
  .maree-jour { grid-template-columns: 1fr; }
  .maree-cles { grid-template-columns: 1fr 1fr; }
  .maree-cles .fiche-cles__case:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 520px) { .maree-cles { grid-template-columns: 1fr; } .maree-cles .fiche-cles__case + .fiche-cles__case { border-left: 0; padding-left: 0; border-top: 1px solid #E3EDEE; padding-top: 14px; } }
.maree-recherche { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; width: min(560px, 100%); }
.maree-recherche input { flex: 1 1 260px; min-height: 52px; padding: 0 22px; border: 1px solid var(--trait); border-radius: 999px; font: inherit; background: #FFFFFFE6; }
.maree-calendrier__nav { display: flex; gap: 10px; flex-wrap: wrap; }
.maree-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-variant-numeric: tabular-nums; font-size: 15px; }
.maree-table th, .maree-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #E3EDEE; white-space: nowrap; }
.maree-table thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); font-weight: 400; }
.maree-table td b { font-weight: 500; color: var(--chenal); margin-right: 4px; } .maree-table td.L b { color: var(--laiton); }
.maree-calendrier { overflow-x: auto; }
@media print { .entete, footer, .pied-conteneur, .maree-calendrier__nav { display: none !important; } .maree-table { font-size: 11px; } .maree-table th, .maree-table td { padding: 4px; } }
.maree-liste-lieu ul { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }
.maree-liste-lieu li { display: flex; justify-content: space-between; padding: 3px 0; border-top: 1px solid #F0F5F5; }
.maree-liste-lieu li:first-child { border-top: 0; }
.maree-liste-lieu li b { font-weight: 500; color: var(--chenal); margin-right: 6px; } .maree-liste-lieu li.L b { color: var(--laiton); }
.maree-liste-lieu li.passe { opacity: .45; }
.maree-liste-lieu__prochaine { font-size: 14px; color: var(--marin); font-weight: 500; }
.maree-choix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px; padding: 18px 22px; background: var(--embrun); border-radius: var(--rayon-carte); }
.maree-choix label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--brume); }
.maree-choix input { flex: 1 1 260px; min-height: 48px; padding: 0 20px; border: 1px solid var(--trait); border-radius: 999px; font: inherit; background: #FFFFFF; }
.maree-choix .pilule { min-height: 44px; box-shadow: none; border: 1px solid var(--trait); font: inherit; cursor: pointer; }
.maree-choix__compte { flex-basis: 100%; margin: 0; font-size: 14px; }
.maree-choix__compte:empty { display: none; }
[data-lieu][hidden] { display: none; }

/* Accueil : bloc marées (photo en fond, texte à gauche, carte « en direct » à droite) */
.maree-une { position: relative; border-radius: var(--rayon-section); overflow: hidden; min-height: 560px; display: flex; align-items: center; }
.maree-une__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.maree-une::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, #FFFFFFF5 0%, #FFFFFFEB 44%, #FFFFFF66 62%, #FFFFFF00 78%); }
.maree-une__contenu { position: relative; z-index: 2; width: 100%; padding: 56px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 40px; align-items: center; }
.maree-une__texte { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.maree-une__texte .titre, .maree-une__texte .chapeau { margin: 0; }
.maree-une__recherche { display: flex; gap: 8px; padding: 6px; background: #FFFFFF; border-radius: 999px; box-shadow: 0 18px 50px #0A344222; }
.maree-une__recherche input { flex: 1; min-width: 0; border: 0; padding: 0 18px; font: inherit; background: transparent; outline-offset: 4px; }
.maree-une__recherche .pilule { box-shadow: none; }
.maree-une__lieux { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: 14px; }
.maree-une__lieux span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.maree-une__lieux a { color: var(--marin); text-decoration: none; border-bottom: 1px solid #0A344233; }
.maree-une__lieux a:hover { border-color: var(--chenal); color: var(--chenal); }
.maree-une__lieux .maree-une__tous { color: var(--chenal); border: 0; font-weight: 500; }
.maree-direct { justify-self: end; width: min(100%, 360px); display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 18px; text-decoration: none; color: var(--marin);
  background: #FFFFFFE6; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--rayon-carte); box-shadow: 0 30px 80px #0A344233; transition: transform .2s; }
.maree-direct:hover { transform: translateY(-3px); color: var(--marin); }
.maree-direct__entete { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brume); }
.maree-direct__pastille { width: 8px; height: 8px; border-radius: 50%; background: #1BAF7A; box-shadow: 0 0 0 4px #1BAF7A2E; }
.maree-direct__heure { margin-left: auto; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.maree-direct__etat { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.maree-direct__prochaine { font-size: 15px; color: var(--brume); font-variant-numeric: tabular-nums; }
.maree-direct svg { display: block; width: 100%; height: auto; margin: 6px 0 2px; }
.maree-direct__jour { display: flex; justify-content: space-between; font-size: 13px; font-variant-numeric: tabular-nums; border-top: 1px solid #E3EDEE; padding-top: 10px; }
.maree-direct__jour b { font-weight: 500; color: var(--chenal); } .maree-direct__jour .L b { color: var(--laiton); }
@media (max-width: 900px) {
  .maree-une::before { background: linear-gradient(180deg, #FFFFFFF2 0%, #FFFFFFD9 55%, #FFFFFF66 100%); }
  .maree-une__contenu { grid-template-columns: 1fr; padding: 32px 22px; }
  .maree-direct { justify-self: stretch; width: auto; }
}