/* Qui sommes-nous. Jetons : tokens.css. Colonnes 7/12 + 5/12 (les `sizes` des photos en dépendent). */

/* Ouverture : l'équipe au ponton, sur le marine */
.qui-tete { background: var(--marine); color: #FFFFFF; }
.qui-tete__grille { display: grid; gap: var(--s-5); padding-bottom: var(--s-7); }
.qui-tete__photo { margin: 0 calc(-1 * var(--gouttiere)); aspect-ratio: 4 / 3; overflow: hidden; background: var(--marine); }
.qui-tete__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.qui-tete h1 { color: #FFFFFF; font-size: var(--t-3xl); max-width: 15ch; }
.qui-tete__intro { margin-top: var(--s-4); color: #FFFFFF; }
@media (min-width: 768px) { .qui-tete__intro { font-size: var(--t-l); line-height: 1.45; } }
.qui-tete__texte p:not(.qui-tete__intro) { color: var(--blanc-78); }
.qui-faits { display: grid; gap: var(--s-4); margin: var(--s-6) 0 0; }
.qui-faits div { border-top: 1px solid var(--sable); padding-top: var(--s-3); }
.qui-faits dt { font-size: var(--t-s); color: var(--blanc-78); margin-bottom: var(--s-1); }
.qui-faits dd { margin: 0; line-height: 1.7; }
.qui-faits__note { font-family: var(--f-titre); font-size: var(--t-l); }
.qui-faits a { color: #FFFFFF; }
@media (min-width: 480px) { .qui-faits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
@media (min-width: 768px) {
  .qui-tete__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-6); align-items: center; padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .qui-tete__photo { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 1 / 1; border-radius: var(--r-photo); }
  .qui-tete__texte { grid-column: 1; grid-row: 1; }
  .qui-tete h1 { font-size: var(--t-2xl); }
}
@media (min-width: 1280px) {
  .qui-tete__grille { column-gap: var(--s-8); padding-top: var(--s-8); padding-bottom: var(--s-8); }
  .qui-tete h1 { font-size: var(--t-hero); }
}

/* Le récit de l'arrivée : une route de six escales, du terminal au retour */
.qui-arrivee__grille { display: grid; gap: var(--s-6); grid-template-areas: "tete" "photo" "recit"; }
.qui-arrivee__tete { grid-area: tete; }
.qui-arrivee__tete h2 { max-width: 20ch; }
.qui-arrivee__tete .intro { margin: var(--s-3) 0 0; }
.qui-arrivee__photo { grid-area: photo; margin: 0; aspect-ratio: 3 / 2; border-radius: var(--r-photo); overflow: hidden; background: var(--ecume); }
.qui-arrivee__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .qui-arrivee__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: var(--s-8); row-gap: var(--s-6); grid-template-areas: "tete photo" "recit photo"; }
  .qui-arrivee__photo { align-self: start; position: sticky; top: 96px; }
}

.recit { grid-area: recit; list-style: none; margin: 0; padding: 0; }
.etape { position: relative; padding: 0 0 var(--s-6) var(--s-7); }
.etape:last-child { padding-bottom: 0; }
.etape::before { /* le trait, d'une escale à la suivante */
  content: ""; position: absolute; left: 6px; top: 22px; bottom: 2px; border-left: 2px dashed var(--sable); transform-origin: top;
}
.etape:last-child::before { display: none; }
.etape__point { position: absolute; top: 5px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--sable); border: 3px solid var(--coque); box-shadow: var(--ombre-escale); }
.etape:last-child .etape__point { background: var(--marine); }
.etape h3 { font-style: italic; font-weight: 400; font-size: var(--t-l); line-height: 1.2; }
.etape p { margin: var(--s-1) 0 0; }
@media (min-width: 768px) {
  .etape { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); column-gap: var(--s-5); align-items: baseline; }
  .etape p { margin: 0; }
}

/* Le seul moment animé : le trait se trace une fois, escale après escale (1,4 s) */
.recit--attente .etape { opacity: 0.3; }
.recit--attente .etape::before { transform: scaleY(0); }
.recit--trace .etape { opacity: 1; transition: opacity 260ms var(--courbe) calc(var(--i, 0) * 230ms); }
.recit--trace .etape::before { transform: scaleY(1); transition: transform 230ms linear calc(var(--i, 0) * 230ms + 120ms); }
@media (prefers-reduced-motion: reduce) {
  .recit--attente .etape { opacity: 1; }
  .recit--attente .etape::before { transform: none; }
  .recit .etape, .recit .etape::before { transition: none !important; }
}

/* Sécurité et navigation : le bateau en route, puis ce qu'il emporte */
.qui-securite { background: var(--marine); color: #FFFFFF; padding-bottom: var(--s-8); }
.qui-securite__photo { margin: 0; aspect-ratio: 2 / 1; overflow: hidden; background: var(--marine); }
.qui-securite__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 768px) { .qui-securite__photo { aspect-ratio: 3 / 1; } }
.qui-securite__corps { display: grid; gap: var(--s-6); padding-top: var(--s-7); }
.qui-securite h2, .qui-securite h3 { color: #FFFFFF; }
.qui-securite h2 { max-width: 18ch; }
.qui-securite__tete p { margin: var(--s-4) 0 0; font-family: var(--f-titre); font-size: var(--t-l); color: var(--blanc-78); }
.qui-securite__listes { display: grid; gap: var(--s-6); }
.qui-securite__listes h3 { padding-bottom: var(--s-2); border-bottom: 1px solid var(--blanc-40); }
.qui-securite ul { margin: var(--s-3) 0 0; padding-left: 1.1em; }
.qui-securite li { margin-bottom: var(--s-2); }
.qui-securite li::marker { color: var(--sable); }
@media (min-width: 640px) { .qui-securite__listes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .qui-securite__corps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); } }

/* Options : le skipper, puis le tableau des prix */
.qui-options h2 { max-width: 24ch; }


/* Propriétaires */
.qui-proprio__grille { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .qui-proprio__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: center; } }
.qui-proprio h2 { max-width: 20ch; }
.qui-chiffres { display: grid; gap: var(--s-5); margin: var(--s-6) 0; }
@media (min-width: 480px) { .qui-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qui-chiffres div { border-top: 2px solid var(--marine); padding-top: var(--s-3); }
.qui-chiffres dt { font-family: var(--f-titre); font-weight: 500; font-size: var(--t-2xl); line-height: 1; white-space: nowrap; }
.qui-chiffres dd { margin: var(--s-2) 0 0; font-size: var(--t-s); }
.qui-proprio__photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--coque); }
.qui-proprio__photo img { width: 100%; height: 100%; object-fit: cover; }