/* Étape 4 : remplissage des départs, le HANNA de profil puis tous les voyages. */
.remplissage { --matin: #7fcfe6; }
.chiffres { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.chiffres li { display: grid; gap: 4px; align-content: start; padding: 14px 16px; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13px; color: var(--encre-2); }
.chiffres .chiffre { font-size: 26px; }

.hanna { overflow: hidden; }
.profil { display: block; width: 100%; max-width: 940px; height: auto; margin: 0 auto; padding: 8px 12px 0; }
.profil__mer { fill: var(--cyan-voile); }
.profil__coque { fill: var(--marine); }
.profil__chateau { fill: #fff; stroke: var(--marine); stroke-width: 2; }
.profil__vitres { fill: var(--marine); }
.profil__cheminee { fill: var(--cyan); }
.profil__nom { fill: #fff; font: 700 13px var(--police); letter-spacing: 0.2em; text-anchor: middle; }
.case { stroke-width: 1; }
.case--confirme { fill: var(--marine-2); stroke: var(--marine-2); }
.case--matin { fill: var(--matin); stroke: var(--matin); }
.case--booking { fill: var(--cyan-vif); stroke: var(--marine); stroke-width: 1.5; animation: pose 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; transform-box: fill-box; transform-origin: center bottom; }
.case--attente { fill: var(--feuille); stroke: var(--cyan); stroke-dasharray: 2 2; }
.case--libre { fill: none; stroke: var(--filet-fort); stroke-dasharray: 2 2; }
@keyframes pose { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }

.legende { list-style: none; margin: 0; padding: 4px 18px 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--encre-2); }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 10px; border-radius: 2px; }
.legende__confirme { background: var(--marine-2); }
.legende__matin { background: var(--matin); }
.legende__booking { background: var(--cyan-vif); box-shadow: inset 0 0 0 1.5px var(--marine); }
.legende__attente { border: 1px dashed var(--cyan); }
.legende__libre { border: 1px dashed var(--filet-fort); }

.remplissage__suite { margin-top: 24px; }
.departs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.depart { display: grid; gap: 6px; padding: 14px 16px; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13px; }
.depart--vedette { border-color: var(--cyan); box-shadow: inset 0 3px 0 var(--cyan); }
.depart__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.depart__tete strong { font-weight: 500; font-size: 15px; color: var(--marine); }
.depart__trajet { font-weight: 500; }
.depart__chiffres { display: flex; justify-content: space-between; gap: 8px; color: var(--encre-2); }
.depart__chiffres span:first-child { color: var(--encre); font-weight: 500; }

.jauge { display: flex; height: 10px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; margin-top: 4px; }
.jauge__part { height: 100%; transform-origin: left; animation: pousse 0.8s ease-out both; }
.jauge__part--confirme { background: var(--marine-2); }
.jauge__part--matin { background: var(--matin); animation-delay: 0.2s; }
.jauge__part--booking { background: var(--cyan-vif); animation-delay: 0.45s; }
.jauge__part--attente { background: repeating-linear-gradient(45deg, var(--cyan-voile) 0 4px, var(--feuille) 4px 8px); box-shadow: inset 0 0 0 1px var(--cyan); }
@keyframes pousse { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 1080px) {
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .chiffres .chiffre { font-size: 22px; }
  .profil { padding: 4px 4px 0; }
}