:root{
  --bg:#f5f7f9; --surf:#ffffff; --ink:#0f172a; --ink2:#475569; --mut:#8b95a3;
  --line:#e6eaef; --line2:#eef1f4;
  --acc:#0d6e8c; --acc-soft:#e7f2f5; --acc-ink:#0a5468;
  --good:#0f8a5f; --good-soft:#e8f6ef;
  --warm:#b8552f; --warm-ink:#984325; --warm-soft:#f7efe2;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55}
a{color:var(--acc-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* nav claire */
.nav{background:var(--surf);border-bottom:1px solid var(--line)}
.nav .in{max-width:760px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.brand{font-weight:800;font-size:16px;letter-spacing:-.2px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand .m{color:var(--acc)}
.navlk{font-size:13px;color:var(--ink2);padding:5px 10px;border-radius:7px;
  border:1px solid var(--line);line-height:1.2;white-space:nowrap}
.navlk:hover{border-color:var(--acc);color:var(--acc-ink);text-decoration:none}
.navlk.on{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--acc-ink);font-weight:700}
.navlk-t{margin-left:5px}
@media (max-width:560px){ .navlk-t{display:none} .navlk{padding:5px 8px} }
.langsw{margin-left:auto;display:flex;gap:4px}
.langsw a{font-size:12.5px;color:var(--ink2);padding:5px 9px;border-radius:6px}
.langsw a.on{background:var(--acc-soft);color:var(--acc-ink);font-weight:700}
.langsw a:hover{text-decoration:none}
/* Une langue où la page n'existe pas encore : visible mais éteinte, plutôt
   qu'un lien vers un 404. Les pages villes sortent d'abord en français seul. */
.langsw .off{font-size:12.5px;color:var(--mut);padding:5px 9px;opacity:.45;cursor:default}

.wrap{max-width:760px;margin:0 auto;padding:20px 16px 60px}

/* en-tête liaison */
.rhead{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.bc{font-size:12px;color:var(--mut);margin-bottom:10px}
.bc a{color:var(--mut)}
/* Photo d'en-tête : ratio imposé (21:9 desktop) pour que toutes les fiches
   s'ouvrent de la même façon quelle que soit la photo fournie, `object-fit:cover`
   pour ne jamais déformer, et un cadrage plus haut en mobile où une bande fine
   ne montrerait rien. Aucun crédit n'est incrusté sur la photo. */
.rhero{margin:0 0 16px;position:relative;border-radius:8px;overflow:hidden;background:#dfe6ec}
.rhero img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover}
@media(max-width:640px){.rhero img{aspect-ratio:16/10}}
/* Le crédit photo, quand la licence l'impose — CC BY et CC BY-SA. Il est POSÉ
   SOUS la photo et non incrusté dessus : superposé, il devient illisible sur un
   ciel clair, et il faudrait un fond translucide qui abîme l'image. Dessous, il
   ne coûte que douze pixels et reste lisible partout.
   Discret mais pas caché : la licence exige un crédit visible, pas un crédit
   qu'on aurait techniquement écrit quelque part. D'où une couleur qui se lit. */
/* Le fond bleu-gris de `.rhero` n'est qu'un cache-misère pendant le chargement
   de la photo. Dès qu'une légende s'ajoute sous l'image, il déborde derrière
   elle et dessine une bande de couleur qui n'a rien à y faire. */
.rhero:has(.rhero-credit){background:none}
/* Discret jusqu'à se faire oublier : 10,5 px, gris, aligné à droite, et SANS
   soulignement — la mention se lit comme une légende, pas comme un appel à
   cliquer. Les deux liens restent des liens, ils ne se signalent simplement
   plus. Ils portent `nofollow`, donc ils ne transmettent aucune autorité de
   référencement : les garder ne coûte rien au SEO et satisfait la licence, qui
   demande un lien « lorsque c'est raisonnablement possible » — sur une page
   web, ça l'est. Ils ne se révèlent qu'au survol. */
.rhero-credit{padding:4px 2px 0;font-size:10.5px;line-height:1.3;color:var(--mut);text-align:right;opacity:.85}
.rhero-credit a{color:inherit;text-decoration:none}
.rhero-credit a:hover{text-decoration:underline;text-underline-offset:2px}
.rhead h2{margin:0;font-size:25px;line-height:1.12;letter-spacing:-.5px;font-weight:800}
.swaptitle{cursor:pointer;display:inline-block;border-radius:8px;transition:background .12s}
.swaptitle:hover{background:var(--acc-soft)}
.swapicon{color:var(--acc);margin:0 4px}
.rhead .sub{color:var(--ink2);font-size:13.5px;margin-top:6px;max-width:520px}
.metastrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-size:12.5px;color:var(--ink2);background:#f3f5f7;border:1px solid var(--line);border-radius:7px;padding:5px 11px;display:inline-flex;gap:6px;align-items:center}
.chip .ci{opacity:.75}
.chip-price{background:var(--acc-soft);border-color:#cfe4ea;color:var(--acc-ink);font-weight:700}
.chip-price .ci{opacity:1}

h3.sec{font-size:22px;letter-spacing:-.4px;color:var(--ink);font-weight:800;margin:42px 2px 16px}

/* widget hôtel compact (mis en avant) */
.hotelcard{display:flex;align-items:stretch;background:var(--surf);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:20px 0 4px;color:var(--ink);box-shadow:0 2px 10px rgba(15,23,42,.05);transition:box-shadow .15s,transform .15s}
a.hotelcard:hover{text-decoration:none;box-shadow:0 8px 22px rgba(13,110,140,.15);transform:translateY(-2px)}
.hotelcard .hc-img{flex:0 0 148px;width:148px;object-fit:cover;display:block}
.hotelcard .hc-body{flex:1;padding:13px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.hc-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hc-tag{font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--acc);padding:3px 8px;border-radius:5px}
.hc-name{font-weight:800;font-size:15.5px}
.hc-loc{color:var(--mut);font-size:12.5px}
.hc-rate{display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.hc-note{background:var(--good-soft);color:var(--good);font-weight:800;border-radius:5px;padding:2px 8px;font-size:12.5px}
.hc-stars{color:var(--warm);letter-spacing:1px;font-size:13px}
.hc-rev{color:var(--mut)}
/* Fiches sans note ou sans prix : masquer le badge / le bloc prix plutôt qu'afficher un chip vide. */
.hc-note:empty,.hc-stars:empty{display:none}
.hc-price:has(b:empty){display:none}
/* Hauteur de description bornée. Les textes vont de 100 à 1 222 caractères
   selon les fiches — onze dépassent 800 — et une carte censée donner envie de
   cliquer devenait un mur de 982 px de haut sur mobile. On fixe le nombre de
   lignes plutôt que de couper le texte à la source : il reste entier dans le
   HTML, donc lisible par Google, et le détail complet est de toute façon chez
   l'hébergeur, à un clic. */
.hc-desc{font-size:13px;color:var(--ink2);line-height:1.45;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.hotelcard .hc-cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:9px;padding:13px 18px;border-left:1px solid #cfe4ea;background:var(--acc-soft)}
.hc-price{font-size:14px;color:var(--ink);white-space:nowrap}
.hc-price b{font-size:19px}
.hc-from{color:var(--mut);font-size:12px}
.hc-btn{background:var(--acc);color:#fff;font-weight:700;font-size:13px;padding:9px 16px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(13,110,140,.28)}
a.hotelcard:hover .hc-btn{background:var(--warm-ink)}
/* Deux familles de cartes partenaires, deux couleurs. Le terracotta reste aux
   hébergements, les activités passent au bleu-vert du site. La distinction se
   joue sur la pastille, le panneau de droite et le bouton d'un coup : n'en
   changer qu'un — la pastille seule, par exemple — ne se lit pas comme un code
   mais comme un oubli.
   Contraste vérifié : blanc sur #0d6e8c donne 5,79, contre 4,77 pour le
   terracotta. Le bouton des activités est donc un peu plus lisible que celui
   des hébergements, pas l'inverse. */
.hotelcard.actcard{margin:18px 0 4px}
.actcard .hc-tag{background:var(--warm)}
.actcard .hc-cta{background:var(--warm-soft);border-left-color:#ead9c0}
.actcard .hc-btn{background:var(--warm);box-shadow:0 2px 8px rgba(178,85,47,.28)}
a.hotelcard.actcard:hover .hc-btn{background:var(--acc-ink)}
.hc-cancel{color:var(--good);font-weight:700;font-size:11.5px}
.hc-unit{color:var(--mut);font-size:12px;margin-left:2px}
/* Mobile : la carte s'empile — image pleine largeur en haut, texte, puis prix
   et bouton sur une ligne. La v1 gardait une vignette de 110 px sur le côté :
   à cette taille elle ne montrait rien de l'hôtel et volait la moitié de la
   largeur au texte, qui se retrouvait en colonne de trois mots. */
@media(max-width:560px){
  .hotelcard{flex-direction:column}
  .hotelcard .hc-img{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
  .hotelcard .hc-body{padding:14px 16px 12px}
  .hc-desc{-webkit-line-clamp:4}
  .hotelcard .hc-cta{flex-direction:row;align-items:center;justify-content:space-between;
    border-left:none;border-top:1px solid var(--line2);padding:12px 16px}
}

/* module live */
.livemod{}
.schedbar{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.dirline{display:flex;align-items:center;gap:12px}
.dirname{font-size:16px;font-weight:800}
.swapbtn{margin-left:auto;font-size:13px;font-weight:700;color:#fff;background:var(--acc);border:none;border-radius:8px;padding:9px 16px;cursor:pointer;box-shadow:0 2px 6px rgba(13,110,140,.25);display:inline-flex;align-items:center;gap:6px}
.swapbtn:hover{background:var(--acc-ink)}
.swapbtn .sx{font-size:15px}
.datectrl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dpill{font-size:12.5px;padding:7px 12px;border:1px solid var(--line);background:var(--surf);border-radius:8px;cursor:pointer;color:var(--ink2)}
.dpill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill-date{position:relative;display:inline-flex;align-items:center;gap:5px}
.pill-date input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.timec{font-size:12.5px;color:var(--mut);display:inline-flex;align-items:center;gap:5px}
.timec input{border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:12.5px;background:var(--surf);color:var(--ink)}

.deps{display:grid;gap:10px}
.dep{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px}
.dep .t{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.dep .arrow{color:var(--mut);font-size:13px}
.dep .dir{font-size:13.5px;color:var(--ink2)}
.dep .via{font-size:11px;color:var(--acc-ink);background:var(--acc-soft);border-radius:5px;padding:2px 7px;margin-left:2px}
.dep .status{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--good);background:var(--good-soft);border-radius:999px;padding:5px 11px;white-space:nowrap}
.dep.first{border:1.5px solid var(--acc);box-shadow:0 3px 12px rgba(13,110,140,.13);padding:18px 18px}
.dep.first .t{font-size:30px}
.dep .nexttag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--acc);border-radius:5px;padding:3px 8px}

.alllink{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;color:var(--acc-ink);background:none;border:none;cursor:pointer;font-weight:600;padding:0}
.alllink .chev{transition:transform .15s}
.alllink.open .chev{transform:rotate(180deg)}

/* tableau horaires du jour (déplié) */
.dayt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--surf);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:10px}
.dayt th{background:#f3f5f7;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;padding:9px 14px}
.dayt td{padding:10px 14px;border-top:1px solid var(--line2);font-size:14.5px}
.dayt td.time{font-weight:700}
.dayt tr.past td{opacity:.45}
.daysum{font-size:12.5px;color:var(--mut);text-align:center;padding:10px 0 0}

.livefoot{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:var(--mut)}
.dot{width:8px;height:8px;border-radius:50%;background:#2e9e63;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.skel{height:15px;border-radius:7px;background:linear-gradient(90deg,#eef1f4 25%,#f7f9fb 50%,#eef1f4 75%);background-size:200% 100%;animation:sh 1.2s infinite;margin:12px 0}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* vignettes prix */
.pvigs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pvigs{grid-template-columns:1fr}}
.pvig{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.pvig .pl{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.pvig .pbig{font-size:27px;font-weight:800;letter-spacing:-.6px;font-variant-numeric:tabular-nums;line-height:1}
.pvig .prow{font-size:12.5px;color:var(--ink2);margin-top:9px}
.pvig .prow b{color:var(--acc-ink);font-weight:800}
.pvig .prow.resv{margin-top:5px}
.pvig .prow.resv b{color:var(--ink)}

/* tableau tarifs */
.card{background:var(--surf);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.card .ct{padding:14px 16px 0;font-size:12.5px;color:var(--mut)}
.motor-seg{display:flex;gap:6px;padding:14px 16px 2px}
.mseg{font-size:12.5px;padding:6px 12px;border:1px solid var(--line);background:var(--surf);border-radius:8px;cursor:pointer;color:var(--ink2)}
.mseg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.evnote{padding:22px 16px;font-size:13px;color:var(--ink2);line-height:1.55}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptable th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700;padding:12px 16px 10px;vertical-align:bottom}
.ptable th:not(:first-child),.ptable td:not(:first-child){text-align:right}
.ptable td{padding:12px 16px;border-top:1px solid var(--line2);font-size:15px;font-weight:600;color:var(--ink)}
.ptable td:first-child{font-weight:500}
.col-best{background:var(--acc-soft)}
.ptable th.col-best{color:var(--acc-ink)}
.bestflag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.03em;color:#fff;background:var(--good);border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:middle;text-transform:uppercase}
.toggletable{display:inline-flex;align-items:center;gap:8px;margin:12px 16px 16px;font-size:13px;font-weight:700;color:var(--acc-ink);background:var(--acc-soft);border:1px solid #cfe4ea;border-radius:8px;padding:9px 14px;cursor:pointer}
.toggletable:hover{background:#d9ecf1}
.toggletable .chev{transition:transform .15s}
.toggletable.open .chev{transform:rotate(180deg)}
.special{font-size:12.5px;color:#8a6d3b;background:#fdf6ec;border-radius:9px;padding:11px 14px;margin-top:12px}

.pax{margin-top:12px;font-size:13px;color:var(--ink2);border-radius:9px;padding:11px 14px}
.pax-free{background:var(--good-soft);border:1px solid #d3ecdd}
.pax-free b{color:#0b6b46}
.pax-paid{background:#fdeee9;border:1px solid #f2cdbf}
.pax-paid b{color:#a5401f}
.note{font-size:12px;color:var(--mut);margin-top:12px;line-height:1.5}
.cta{display:inline-block;margin-top:16px;background:var(--acc);color:#fff;font-weight:700;padding:13px 22px;border-radius:8px;font-size:14.5px}
.cta:hover{background:var(--acc-ink);text-decoration:none}

/* carte simple de la traversée */
.mapwrap{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:18px;margin-top:6px}
.crossing{display:flex;align-items:center;gap:10px}
.crossing .port{flex:1;text-align:center}
.crossing .port .pn{font-weight:800;font-size:15px}
.crossing .port .pc{font-size:11.5px;color:var(--mut)}
.crossing .link{flex:2;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--acc)}
.crossing .link .ln{width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--acc) 0 8px,transparent 8px 14px)}
.crossing .link .lt{font-size:11.5px;color:var(--ink2)}

/* slots monétisation */
.slotgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.slotgrid{grid-template-columns:1fr}}
.slot{border:1.5px solid var(--line);border-radius:10px;background:var(--surf);padding:15px 16px;position:relative;display:flex;align-items:center;gap:10px;color:var(--ink);transition:border-color .12s,box-shadow .12s,background .12s}
a.slot:hover{text-decoration:none;border-color:var(--warm);background:var(--warm-soft);box-shadow:0 2px 10px rgba(178,85,47,.12)}
.slot .tag{position:absolute;top:-10px;left:14px;background:var(--warm);color:#fff;font-size:10px;font-weight:700;padding:2px 9px;border-radius:999px;letter-spacing:.02em}
.slot .st{font-size:14px;font-weight:700;margin-top:3px;flex:1}
.slot .slotgo{color:var(--warm);font-weight:800;font-size:16px;flex:none}

/* faq */
.faq details{background:var(--surf);border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:2px 16px}
.faq summary{cursor:pointer;font-weight:700;padding:13px 0;font-size:15px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--acc);font-weight:700;margin-right:10px}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:0 0 14px;font-size:14.5px;color:#334155}
/* Maillage vers le blog (souvenirs.vincent.voyage) : lien discret, souligné pointillé. */
a.blink{color:var(--acc);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-thickness:1px}
a.blink:hover{text-decoration-style:solid;background:rgba(13,110,140,.07)}

.pagefoot{max-width:760px;margin:26px auto 0;padding:18px 16px 40px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.pagefoot .footlinks{margin-bottom:8px}
.pagefoot .footlinks a{margin-right:14px}
.pagefoot .footnote{line-height:1.55;margin-bottom:8px}
.pagefoot .footcopy{opacity:.75}

/* 404 */
.nf{max-width:760px;margin:60px auto;padding:0 16px;text-align:center}
.nf h1{font-size:28px;margin:0 0 10px}
.nf p{color:var(--mut);margin:0 0 22px}
[hidden]{display:none !important}

/* multi-opérateurs (Geiranger–Hellesylt) */
.opbadge{font-size:11px;color:#fff;border-radius:5px;padding:2px 7px;white-space:nowrap;font-weight:600;margin-left:4px}
.opcards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:560px){.opcards{grid-template-columns:1fr}}
.opcard{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column}
.opcard .oph{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px}
.opcard .opdot{width:11px;height:11px;border-radius:50%;flex:none}
.opcard .opsub{font-size:11.5px;color:var(--mut);font-weight:600}
.opfares{margin-top:12px;font-size:13.5px}
.opfares .fr{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line2)}
.opfares .fr:last-of-type{border-bottom:none}
.opfares .fl{color:var(--ink2)}
.opfares .fv{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.opfares .fr-pkg{background:#f5f9f6;margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:6px}
.opfares .fr-pkg:first-of-type{margin-top:6px}
.opfares .fnote{font-size:12px;color:var(--mut);padding-top:8px;line-height:1.5}
.opcta{margin-top:auto;padding-top:14px}
.opcta a{display:block;text-align:center;color:#fff;font-weight:700;padding:11px;border-radius:8px;font-size:14px}
.opcta a:hover{text-decoration:none;filter:brightness(.92)}
.staticnote{background:#fdf6ec;border:1px solid #f0e2c8;color:#8a6d3b;border-radius:9px;padding:10px 13px;font-size:12.5px;margin-bottom:12px;line-height:1.5}
.chip-free{background:#e4f3e8;color:#1f7a44;font-weight:700}
.freebox{display:flex;align-items:center;gap:16px;background:#f2fbf5;border:1px solid #cfe9d8;border-radius:12px;padding:18px 20px;margin-top:14px}
.freebadge{background:#1f7a44;color:#fff;font-weight:800;font-size:15px;padding:8px 14px;border-radius:8px;white-space:nowrap}
.freetext{color:var(--ink2);font-size:14px;line-height:1.55}

/* ================= lignes internationales ================= */

/* horaires publiés (bloc `schedules` du dataset, pas de flux Entur) */
.secsub{font-size:12px;font-weight:600;color:var(--mut);letter-spacing:0;text-transform:none;margin-left:8px}
/* En mobile, « Horaires généraux » se retrouvait coupé en deux : « Horaires »
   restait accroché au titre et « généraux » basculait seul à la ligne. Le
   sous-titre passe donc en bloc sous le titre, où il tient d'un seul tenant.
   `white-space:nowrap` en plus de `display:block` : sur les écrans les plus
   étroits, un sous-titre de trois mots pourrait encore se scinder. */
@media(max-width:560px){
  .secsub{display:block;margin-left:0;margin-top:2px;white-space:nowrap}
}
.ptabs{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.ptab{font-size:13px;font-weight:700;border:1px solid var(--line);background:var(--surf);color:var(--ink2);border-radius:20px;padding:8px 15px;cursor:pointer}
.ptab.on{background:var(--acc);border-color:var(--acc);color:#fff}
.psub{font-size:12px;color:var(--mut);margin-top:11px;line-height:1.55}
.scols{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:9px}
.scols-1{grid-template-columns:1fr}
@media(max-width:720px){.scols{grid-template-columns:1fr}}
.scol{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:6px 16px 12px}
.scolh{font-weight:800;font-size:13.5px;padding:12px 0 10px;border-bottom:1px solid var(--line2)}
.scarr{color:var(--acc)}
.srow{padding:12px 0;border-bottom:1px solid var(--line2)}
.srow:last-child{border-bottom:0;padding-bottom:4px}
.stimes{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.snd{font-size:10px;color:var(--acc);font-weight:800;margin-left:1px}
.sapx{color:var(--mut);font-weight:600;margin-right:2px}
.sline{flex:1;position:relative;height:1px;background:var(--line);display:flex;justify-content:center}
.sdur{position:absolute;top:-9px;background:var(--surf);padding:0 8px;font-size:11.5px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.sship{font-size:12.5px;color:var(--ink2);margin-top:6px;display:flex;align-items:center;gap:6px}
.ptdot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.sbed{display:inline-block;margin-top:7px;margin-right:6px;font-size:11.5px;font-weight:700;color:#7a4c12;background:#fdf6ec;border:1px solid #f0dfc4;border-radius:20px;padding:4px 10px}
.sbed-cab{color:#0a5468;background:var(--acc-soft);border-color:#cfe4ea}
/* La pastille « nuit à … » est un lien Booking sur ce port précis : elle doit
   donc se voir cliquable sans changer de nature. On garde exactement la même
   pilule et on ajoute une flèche, un survol et un curseur — plutôt qu'un
   soulignement, qui casserait l'alignement des pilules entre elles.
   Contraste vérifié : #7a4c12 sur #fdf6ec donne 7,4 — largement au-dessus du
   seuil AA, y compris pour la flèche à 65 % d'opacité (4,9). */
a.sbed-lk{cursor:pointer;transition:background .12s,border-color .12s,box-shadow .12s}
a.sbed-lk:hover{text-decoration:none;background:#f9edd9;border-color:#e2c99c;
  box-shadow:0 2px 7px rgba(122,76,18,.14)}
.sbedgo{margin-left:5px;opacity:.65;font-weight:800;display:inline-block;transition:transform .12s,opacity .12s}
a.sbed-lk:hover .sbedgo{opacity:1;transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){a.sbed-lk,.sbedgo{transition:none}}
.sgap{margin-top:12px;background:#fafbfc;border:1px dashed var(--line);border-radius:10px;padding:12px 15px;font-size:12.5px;color:var(--ink2);line-height:1.55}
.sgap .ptdot{margin-right:5px;vertical-align:middle}
.sfreq{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:9px}
.sfreqhead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sfreqbig{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--acc);font-variant-numeric:tabular-nums;line-height:1}
.sfrequnit{font-size:14px;font-weight:700;color:var(--ink2)}
.sfreqtc{font-size:11px;font-weight:700;color:#7a4c12;background:#fdf6ec;border:1px solid #f0dfc4;border-radius:20px;padding:3px 9px}
.sfreqmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;font-size:12.5px;color:var(--ink2)}
.sfreqmeta b{color:var(--ink)}
.sfreqtxt{margin-top:13px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.sfreqdirs{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line2);font-size:13px;font-weight:800}
.smallprint{font-size:12px;color:var(--mut);line-height:1.55;margin:10px 2px 0}

/* repli quand aucun horaire n'a été relevé */
.sfreq-lite .sfreqrows{display:grid;gap:9px}
.sfreqrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding-bottom:9px;border-bottom:1px solid var(--line2)}
.sfreqrow:last-child{border-bottom:0;padding-bottom:0}
.sfreql{font-size:12.5px;color:var(--mut)}
.sfreqrow b{font-size:14.5px;font-weight:800;text-align:right}
.sfreq-lite .sfreqtxt{margin-top:13px;padding-top:13px;border-top:1px solid var(--line2);font-size:12.5px;color:var(--mut)}

/* carte prix en euros (pas d'AutoPASS sur ces lignes) */
.ipcard{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:20px 22px;margin-top:14px}
.ipbig{font-size:31px;font-weight:800;letter-spacing:-.7px;line-height:1.08;color:var(--ink)}
.ipunit{font-size:13px;color:var(--ink2);margin-top:7px;line-height:1.5}
.ipwhen{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:var(--acc-ink);background:var(--acc-soft);border:1px solid #cfe4ea;border-radius:20px;padding:4px 11px}
/* Dépliant du relevé détaillé : fermé, il n'occupe qu'une ligne discrète ;
   ouvert, il retrouve exactement la mise en forme d'avant. */
.ipdet{margin-top:14px;padding-top:13px;border-top:1px solid var(--line2)}
.ipdet>summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;
  color:var(--acc-ink);display:inline-flex;align-items:center;gap:6px}
.ipdet>summary::-webkit-details-marker{display:none}
.ipdet>summary::before{content:'▸';font-size:11px;transition:transform .15s}
.ipdet[open]>summary::before{transform:rotate(90deg)}
.ipdet>summary:hover{text-decoration:underline}
.ipdetail{margin-top:12px;font-size:13.5px;color:var(--ink2);line-height:1.65}
.ipsrc{margin-top:11px;font-size:12.5px;color:var(--mut);line-height:1.6}
.ipfoot{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:15px;padding-top:13px;border-top:1px solid var(--line2)}
.ipchk{font-size:11.5px;font-weight:700;color:var(--ink2);background:#f3f5f7;border:1px solid var(--line);border-radius:20px;padding:4px 11px;white-space:nowrap}
.ipnote{font-size:12px;color:var(--mut);line-height:1.55;flex:1;min-width:220px}

/* ce qui joue pour / contre */
.prosgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
@media(max-width:600px){.prosgrid{grid-template-columns:1fr}}
.proscol{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:15px 18px}
.prosh{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.pros-plus .prosh{color:#0f8a5f}
.pros-moins .prosh{color:var(--warm-ink)}
.proscol ul{margin:0;padding-left:18px}
.proscol li{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:7px}
.proscol li:last-child{margin-bottom:0}
.pros-plus li::marker{color:#0f8a5f}
.pros-moins li::marker{color:var(--warm)}

/* débarquement / à qui ça convient / navires */
.ifacts{margin-top:12px;background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:6px 18px}
.ifact{padding:14px 0;border-bottom:1px solid var(--line2)}
.ifact:last-child{border-bottom:0}
.ifl{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:5px}
.ifv{font-size:13.5px;color:var(--ink2);line-height:1.65}
.istory{font-size:14.5px;color:var(--ink2);line-height:1.72;margin:0 2px 15px}
.chip-badge{background:var(--warm-soft);border-color:#e8d5b8;color:var(--warm-ink);font-weight:700}

/* ==========================================================================
   PAGE D'ACCUEIL + HUBS
   Calage revue design : fond clair, recherche immédiate, une couleur
   dominante (--acc), cartes verticales, radius 8–12 px.
   ========================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home h1,.hubh1{font-size:31px;line-height:1.12;letter-spacing:-.7px;font-weight:800;margin:6px 0 10px}
.hero-lede{color:var(--ink2);font-size:15.5px;max-width:600px;margin:0 0 22px}
h2.sec{font-size:22px;letter-spacing:-.4px;font-weight:800;margin:44px 2px 14px}
h2.sec.sec-tight{margin-top:6px}
.bc-kicker{font-size:11px;font-weight:800;letter-spacing:.09em;color:var(--acc)}
.bc-kicker.kick-alone{margin-top:44px}

/* -- moteur de recherche -- */
.searchbox{position:relative;margin:0 0 8px}
.sfield{display:flex;align-items:center;gap:10px;background:var(--surf);border:2px solid var(--acc);
  border-radius:12px;padding:0 14px;box-shadow:0 4px 18px rgba(13,110,140,.10)}
.sfield:focus-within{box-shadow:0 6px 24px rgba(13,110,140,.20)}
.sicon{font-size:16px;opacity:.6}
#q{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16.5px;padding:15px 0;color:var(--ink);min-width:0}
/* L'italique du placeholder est un choix éditorial, pas une norme : les
   référentiels d'accessibilité déconseillent plutôt l'italique sur du texte
   d'interface. On garde donc un gris suffisamment contrasté pour compenser. */
#q::placeholder{color:var(--mut);font-style:italic}
#q::-webkit-search-cancel-button{cursor:pointer}
.shint{font-size:12.5px;color:var(--mut);margin:7px 4px 0}
.sres{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;background:var(--surf);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 38px rgba(15,23,42,.16);overflow:hidden;max-height:60vh;overflow-y:auto}
.sr-item{display:flex;flex-direction:column;gap:2px;padding:11px 15px;border-bottom:1px solid var(--line2);color:var(--ink)}
.sr-item:last-child{border-bottom:0}
.sr-item:hover,.sr-item.on{background:var(--acc-soft);text-decoration:none}
.sr-n{font-weight:700;font-size:15px}
.sr-m{font-size:12.5px;color:var(--mut)}
.sr-more,.sempty{padding:12px 15px;font-size:13px;color:var(--mut)}
.sempty b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:3px}

/* -- traversées populaires -- */
.poplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.popitem{display:flex;flex-direction:column;gap:3px;background:var(--surf);border:1px solid var(--line);
  border-radius:10px;padding:12px 14px;color:var(--ink);transition:border-color .13s,transform .13s}
.popitem:hover{text-decoration:none;border-color:var(--acc);transform:translateY(-1px)}
.pn{font-weight:700;font-size:14.5px}
.pm{font-size:12.5px;color:var(--mut)}

/* -- grande carte « venir en Norvège » -- */
.bigcard{display:block;position:relative;margin:44px 0 0;background:linear-gradient(135deg,#0d6e8c 0%,#0a5468 100%);
  border-radius:14px;color:#fff;overflow:hidden;box-shadow:0 6px 22px rgba(13,110,140,.22)}
.bigcard:hover{text-decoration:none;box-shadow:0 12px 32px rgba(13,110,140,.30)}
.bc-body{padding:26px 28px}
.bigcard .bc-kicker{color:#a8dcec}
.bc-title{font-size:23px;font-weight:800;letter-spacing:-.4px;line-height:1.2;margin:8px 0 10px;max-width:520px}
.bc-text{font-size:14.5px;color:#d6ecf3;margin:0 0 16px;max-width:560px}
.bc-ports{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
/* Les pastilles de lignes sur la carte bleue étaient du bleu clair sur du bleu :
   un fond blanc à 14 % sur le teal du bloc. Deux problèmes distincts là-dedans,
   et c'est ce qui rend le réglage moins évident qu'il n'en a l'air.

   1. La pastille se détachait mal du bloc : 1,4 contre son fond.
   2. Son texte se lisait mal : 5,7, sur un fond que tout éclaircissement
      rapproche justement du blanc du texte.

   Éclaircir le fond — ce que j'avais fait d'abord, en montant à 22 % — corrige
   le premier et dégrade le second : le texte tombait à 4,7, donc sous le seuil
   AA de 4,5 une fois mesuré à l'écran. Les deux besoins tirent en sens
   opposé ; un seul réglage ne peut pas les servir tous les deux.

   D'où la séparation des rôles. Le FOND s'assombrit (noir 28 %) et porte le
   texte : blanc à 9,1 en haut du dégradé, 12,0 en bas. La BORDURE, claire,
   dessine la forme : 2,3 en haut, 2,8 en bas contre la carte, et 3,6 à 4,0
   contre le fond de la pastille — c'est elle qui fait exister le cartouche.
   Chaque propriété fait un seul travail, et le fait bien. */
/* `position:relative` + z-index : sans eux, la zone étirée du bouton passerait
   par-dessus les pastilles et le clic repartirait vers le hub. */
.miniport{font-size:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.42);
  border-radius:6px;padding:4px 9px;color:#fff;font-weight:600;
  position:relative;z-index:1;text-decoration:none;display:inline-block}
.miniport:hover{background:rgba(0,0,0,.45);border-color:#fff}
/* Lien étiré. Le ::after est absolu, et comme .bc-cta reste en `static`, il se
   cale sur le premier ancêtre positionné — .bigcard. Il couvre donc toute la
   carte, qui reste cliquable comme avant. Ne pas mettre `position:relative` sur
   .bc-cta : le ::after se replierait sur le bouton seul et le reste de la carte
   deviendrait inerte. */
.bc-cta{display:inline-block;background:#fff;color:var(--acc-ink);font-weight:800;
  font-size:14.5px;border-radius:9px;padding:11px 18px;text-decoration:none}
.bc-cta::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}

/* -- croisières -- */
.cr-lede{color:var(--ink2);font-size:14.5px;max-width:600px;margin:0 0 18px}
.crgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.crcard{display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;color:var(--ink);box-shadow:0 2px 10px rgba(15,23,42,.05);transition:box-shadow .15s,transform .15s}
.crcard:hover{text-decoration:none;box-shadow:0 10px 26px rgba(13,110,140,.16);transform:translateY(-2px)}
.cr-img{width:100%;height:148px;object-fit:cover;display:block;background:#dfe6ec}
/* Produit sans visuel : aplat dégradé, même gabarit (chantier images internes). */
.cr-noimg{background:linear-gradient(160deg,#cfe0e8,#e6eef2)}
.cr-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.cr-title{font-weight:800;font-size:15.5px;line-height:1.25}
.cr-where{font-size:12.5px;color:var(--mut)}
.cr-desc{font-size:13px;color:var(--ink2);margin:2px 0 0;flex:1}
.cr-foot{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.cr-rate{background:var(--good-soft);color:var(--good);font-weight:800;font-size:12.5px;border-radius:5px;padding:2px 8px}
.cr-price{margin-left:auto;font-size:13px;color:var(--ink2)}
.cr-price b{font-size:15px;color:var(--ink)}
.morelink{display:inline-block;margin-top:16px;font-weight:700;font-size:14.5px}

/* -- blocs par ville -- */
.citygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.citycard{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:17px 19px}
.cy-name{margin:0;font-size:19px;font-weight:800;letter-spacing:-.3px}
.cy-blurb{font-size:13px;color:var(--ink2);margin:7px 0 13px}

/* LES VIGNETTES DE GUIDE — 28 septembre 2026, sur l'accueil et en pied de
   chaque guide. Même grammaire que .citycard (fond blanc, filet, rayon 12) :
   ce sont des objets de même rang sur la même page, il aurait été bizarre
   qu'ils ne se ressemblent pas. Deux différences seulement.

   1. La carte ENTIÈRE est un lien, alors que .citycard en contient plusieurs.
      Une vignette de guide ne mène qu'à un endroit ; obliger à viser le titre
      serait gratuit, surtout sur les 74 % de visites au pouce.
   2. Le résumé n'est pas tronqué. C'est la meta de la page, écrite pour tenir
      en une phrase — la couper aux trois points en ferait une amorce, et une
      amorce promet plus que le titre ne tient. */
/* 250 et non 300 : la page fait 900 px, et 3 × 300 + 2 × 14 les fait déborder
   — les trois guides tombaient sur deux rangs, avec un trou. À 250 ils tiennent
   sur une ligne, et une quatrième vignette écrite un jour passera au rang
   suivant sans qu'on y retouche. */
.gdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
/* auto-FIT et non auto-fill : avec auto-fill, une page qui n'a que trois
   vignettes (un guide, qui s'exclut lui-même de sa propre liste) garderait
   une quatrième colonne vide et les trois cartes resteraient étroites,
   collées à gauche. auto-fit replie les pistes vides, donc trois vignettes
   occupent toute la largeur et quatre tiennent sur un rang. */
.gdcard{display:block;background:var(--surf);border:1px solid var(--line);border-radius:12px;
  padding:17px 19px;color:inherit}
.gdcard:hover{border-color:var(--acc);text-decoration:none;box-shadow:0 2px 12px rgba(13,110,140,.10)}
.gd-name{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.3px;color:var(--acc-ink);line-height:1.28}
.gdcard:hover .gd-name{text-decoration:underline}
.gd-blurb{font-size:13.5px;color:var(--ink2);margin:8px 0 0;line-height:1.45}

/* L'INDEX DES PORTS — /{lang}/port/, 28 septembre 2026.
   Des tuiles et non des cartes : celles des guides portent un résumé de cent
   cinquante signes, celles-ci portent un nom et deux chiffres. Leur donner la
   même hauteur aurait rempli l'écran de vide.
   Le nom est gros et la ligne de chiffres discrète : on vient ici chercher un
   nom de ville, pas comparer des fréquences — le détail est sur la page. */
.pix-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:8px}
/* auto-FILL ici, à l'inverse des vignettes de guide : les groupes n'ont pas
   tous le même nombre de villes (cinq en Norvège, deux au Danemark, une en
   Suède) et auto-fit les aurait étirées — la Suède seule aurait occupé toute
   la largeur, et les colonnes ne se seraient alignées d'un groupe à l'autre.
   Des pistes de largeur fixe font une grille qu'on lit en colonnes. */
.pix-card{display:block;background:var(--surf);border:1px solid var(--line);border-radius:12px;
  padding:14px 17px;color:inherit}
.pix-card:hover{border-color:var(--acc);text-decoration:none;box-shadow:0 2px 12px rgba(13,110,140,.10)}
.pix-nom{display:block;font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--acc-ink)}
.pix-card:hover .pix-nom{text-decoration:underline}
.pix-meta{display:block;font-size:13px;color:var(--mut);margin-top:4px}
.pix-grp{margin-bottom:26px}


.cy-sub{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--mut);margin:12px 0 6px}
.cy-list{list-style:none;margin:0;padding:0}
.cy-list li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line2);font-size:13.5px}
.cy-list li:last-child{border-bottom:0}
.cy-meta{margin-left:auto;color:var(--mut);font-size:12px;white-space:nowrap}

/* -- texte explicatif -- */
.explain{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.exblock h3{margin:0 0 6px;font-size:16px;font-weight:800;letter-spacing:-.2px}
.exblock p{margin:0;font-size:14px;color:var(--ink2)}

/* -- liste complète repliée -- */
.allroutes{margin-top:46px;background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:4px 18px}
.allroutes summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:14px 0;color:var(--acc-ink)}
.argrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;padding:6px 0 18px}
.argrid a{display:flex;flex-direction:column;font-size:13px;color:var(--ink);padding:6px 0}
.argrid a b{font-weight:700}
.argrid a span{color:var(--mut);font-size:12px}

/* -- hub international -----------------------------------------------------
   Onze liaisons sur une page. L'ancienne version en faisait onze cartes
   identiques : même hauteur, même densité, même couleur, aucune ne se
   distinguait de sa voisine. Ici chaque liaison est un <details> — replié il
   se balaie, ouvert il change franchement d'apparence (liseré d'accent à
   gauche, fond du résumé teinté, ombre portée), pour qu'on voie du premier
   coup d'œil lequel des onze blocs on a ouvert.

   Le groupement par pays de départ ajoute un deuxième niveau de repère : les
   six liaisons danoises ne se mélangent plus aux allemandes.                 */
.intlgrp{margin:0 0 26px}
.ig-pays{font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut);margin:0 2px 10px;display:flex;align-items:center;gap:10px}
.ig-pays:after{content:"";flex:1;height:1px;background:var(--line)}
.intllist{display:grid;gap:12px}

.intlcard{display:block;background:var(--surf);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);transition:border-color .13s,box-shadow .13s;overflow:hidden}
.intlcard:hover{border-color:var(--acc);box-shadow:0 6px 18px rgba(13,110,140,.12)}
/* Ouvert : liseré d'accent à gauche, fond du résumé teinté, ombre plus marquée.
   Le décalage de 3 px compense la largeur du liseré pour que le texte ne bouge
   pas d'un pixel entre l'état replié et l'état ouvert. */
.intlcard[open]{border-color:var(--acc);box-shadow:0 8px 26px rgba(13,110,140,.14);
  border-left:4px solid var(--acc)}
.intlcard[open] .il-sum{background:var(--acc-soft);border-bottom:1px solid #cfe4ea;padding-left:15px}
.intlcard[open] .il-open{padding-left:15px}

/* `display:block` en plus de `list-style:none` : Safari ignore le second et
   garde son triangle tant que le <summary> reste un list-item. */
.il-sum{display:block;padding:16px 18px;cursor:pointer;list-style:none;transition:background .13s}
.il-sum::-webkit-details-marker{display:none}
.il-sum::marker{content:""}
.il-sum:hover{background:#fafcfd}
.intlcard[open] .il-sum:hover{background:#dcecf1}
/* Repère de focus clavier : le <summary> est le contrôle, il doit se voir. */
.il-sum:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}

.il-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.il-name{font-weight:800;font-size:17px;letter-spacing:-.3px}
.badge{font-size:10.5px;font-weight:800;letter-spacing:.04em;border-radius:5px;padding:3px 8px}
.badge-night{background:#e8eaf6;color:#3b4a8c}
.badge-gw{background:var(--warm-soft);color:var(--warm-ink)}
.il-region{font-size:12.5px;color:var(--mut);margin-top:3px}
.il-pitch{font-size:13.5px;color:var(--ink2);margin:9px 0 12px}
.il-facts{display:flex;flex-wrap:wrap;gap:7px}
/* « Voir le détail » : la seule affordance du bloc replié. Le chevron pivote
   de 90° à l'ouverture — mouvement supprimé si l'utilisateur a demandé moins
   d'animations. */
.il-more{display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--acc-ink)}
.il-more-o{display:none}
.intlcard[open] .il-more-f{display:none}
.intlcard[open] .il-more-o{display:inline}
.il-chev{display:inline-block;font-size:15px;line-height:1;transition:transform .16s}
.intlcard[open] .il-chev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.il-chev{transition:none}}

.il-open{padding:16px 18px 18px}
.il-block{margin:0 0 14px}
.il-block p{margin:0;font-size:14px;color:var(--ink2);line-height:1.55}
.il-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);margin:0 0 4px}
.il-lbl-pour{color:var(--good)}
.il-lbl-contre{color:var(--warm-ink)}
.il-ul{margin:0;padding-left:18px}
.il-ul li{font-size:14px;color:var(--ink2);line-height:1.5;margin:0 0 5px}

/* Deux sorties, deux poids. La fiche complète est l'action principale (elle
   reste sur le site) ; Direct Ferries est l'action commerciale, en contour,
   avec sa ligne d'explication — un bouton de comparateur qui n'annonce pas
   qu'il sort du site est une petite trahison. */
.il-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 4px}
.il-btn{display:flex;flex-direction:column;gap:2px;border-radius:9px;padding:10px 15px;
  font-size:13.5px;font-weight:700;line-height:1.3;transition:background .13s,box-shadow .13s}
.il-btn:hover{text-decoration:none}
.il-btn-1{background:var(--surf);color:var(--acc-ink);border:1.5px solid var(--acc)}
.il-btn-1:hover{background:var(--acc-soft)}
/* Le bouton qui réserve est celui en couleur — Vincent, 21 septembre 2026 :
   après toutes ces informations, c'est lui qu'on veut qu'il clique. */
.il-btn-2{background:var(--acc);color:#fff;border:1.5px solid var(--acc);box-shadow:0 2px 8px rgba(13,110,140,.26)}
.il-btn-2:hover{background:var(--acc-ink);border-color:var(--acc-ink)}
.il-btn-sub{font-size:11.5px;font-weight:500;color:var(--mut)}
.il-btn-2 .il-btn-sub{color:rgba(255,255,255,.82)}
.ctahub{margin:34px 0 10px}
.ctahub-sub{margin-top:8px;font-size:13px;color:var(--mut)}

/* Trois liens d'exploration sous les boutons. Volontairement en TEXTE et pas
   en boutons : au-dessus de deux CTA déjà colorés, trois boutons de plus
   feraient une page de capture. Ils s'empilent en colonne pour qu'on lise le
   nom du port sans le chercher — c'est le mot qui décide du clic. */
.il-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:12px 0 0}
.il-lk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--acc-ink);
  padding:5px 8px;margin-left:-8px;border-radius:7px;transition:background .12s}
.il-lk b{font-weight:800}
.il-lk:hover{text-decoration:none;background:var(--acc-soft)}
.il-lkgo{opacity:.55;font-weight:700;transition:transform .12s,opacity .12s}
.il-lk:hover .il-lkgo{opacity:1;transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.il-lkgo{transition:none}}

/* Version compacte des cartes partenaires : sur la fiche, elles ont une
   description de trois lignes et une image de 148 px ; ici, onze blocs les
   empilent, l'image tombe à 112 px et la description saute. Le lecteur qui
   veut le texte ouvre la fiche. */
.hc-mini{margin:14px 0 0}
.hc-mini .hc-img{flex:0 0 112px;width:112px}
.hc-mini .hc-body{padding:11px 14px;justify-content:center;gap:5px}
.hc-mini .hc-cta{padding:11px 15px}
.hc-mini .hc-price b{font-size:17px}

.hubnote{font-size:12.5px;color:var(--mut);margin-top:34px;border-top:1px solid var(--line);padding-top:14px}

@media (max-width:560px){
  .home h1,.hubh1{font-size:26px}
  .bc-body{padding:22px 20px}
  .bc-title{font-size:20px}
  #q{font-size:16px}
  .il-sum{padding:14px 15px}
  .intlcard[open] .il-sum,.intlcard[open] .il-open{padding-left:12px}
  .il-open{padding:14px 15px 16px}
  /* Les deux boutons côte à côte tombent à ~150 px de large : le libellé passe
     alors sur trois lignes et la sous-ligne de Direct Ferries devient illisible.
     On empile, pleine largeur. */
  .il-actions{flex-direction:column;gap:8px}
  .il-btn{align-items:center;text-align:center}
  /* La vignette de 112 px du hub doit repasser en image pleine largeur comme
     toutes les cartes partenaires : la règle mobile générique (ligne ~101) est
     déclarée avant celle du hub et se ferait sinon écraser. */
  .hc-mini .hc-img{flex:0 0 auto;width:100%;height:auto;aspect-ratio:16/9}
  .hc-mini .hc-body{padding:13px 15px 11px}
  .hc-mini .hc-cta{padding:11px 15px}
}

/* ── Protection copier-coller ────────────────────────────────────────────────
   Décision Vincent 2026-08-05 : « impossible de copier coller du texte et des
   images. Sauf les liens ». C'est un garde-fou anti-recopie automatique, pas
   un coffre-fort : la source reste lisible et une capture d'écran passe
   toujours. L'objectif est de rendre la recopie en masse pénible, pas
   impossible.
   Ce qui reste volontairement sélectionnable : le texte des liens, pour qu'un
   lecteur puisse copier l'URL d'une réservation. Les lecteurs d'écran et
   l'indexation ne sont pas affectés (user-select ne touche pas l'arbre
   d'accessibilité, et aucun robot n'exécute ce CSS). */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
a,a *,.copyok,.copyok *{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}
/* Le champ de recherche doit rester utilisable normalement. */
input,textarea,select{-webkit-user-select:text;-moz-user-select:text;user-select:text}

/* Titre de fiche. Le h1 empile le couple de quais — cliquable pour inverser le
   sens — et, en dessous, l'ancrage géographique (massif, archipel, ville
   voisine). Ce second bloc est HORS de #rtitle : live-schedule.js réécrit
   l'intérieur de ce noeud à chaque inversion, tout ce qui doit survivre au clic
   doit donc vivre à côté, pas dedans. */
.rh1{font-size:26px;line-height:1.25;margin:14px 0 6px;font-weight:750}
.rh1 .rh1-kind{color:var(--mut);font-weight:650}
.rh1 .rh1-geo{font-size:.62em;font-weight:600;color:var(--mut);white-space:nowrap}
@media(max-width:640px){.rh1{font-size:21px}.rh1 .rh1-geo{font-size:14px}}
/* La promesse sous le couple de quais : même H1, ligne à part, discrète. */
.rh1 .rh1-sub{display:block;margin-top:3px;font-size:.6em;font-weight:650;color:var(--acc);letter-spacing:.1px}
@media(max-width:640px){.rh1 .rh1-sub{font-size:15px}}

/* Pastilles de réservation. Le rouge est réservé à l'obligation — la seule
   information qui punit le lecteur s'il la manque. « Sans réservation » prend
   un vert discret : sur une navette, c'est une bonne nouvelle, pas une alerte.
   Mettre du rouge sur cent pages entraînerait l'oeil à l'ignorer. */
.chip-must{background:#fdecea;border-color:#f5c6c0;color:#a12a1a;font-weight:700}
.chip-must .ci{opacity:1}
/* « Ne se réserve pas » est une propriété de la ligne, ni bonne ni mauvaise :
   elle reste dans le gris des pastilles ordinaires. Le vert est ainsi réservé
   à « on peut réserver ici », et un seul coup d'oeil suffit à trier. */
.chip-neutre{color:var(--ink2);font-weight:650}

/* Consigne de réservation imposée. Elle monte tout en haut de la fiche, sous la
   barre d'informations : sur une ligne à quatre départs par jour, l'ignorer
   coûte la journée. C'est le seul bloc rouge de la page — le rouge ne sert
   qu'ici, pour qu'il garde sa force. */
.resa-warn{margin:14px 0 0;padding:11px 14px;background:#fdecea;border:1px solid #f5c6c0;
  border-radius:8px;color:#8f2417;font-size:13px;line-height:1.5}
.resa-warn span{margin-right:6px}
.cta-must{background:#a12a1a !important;box-shadow:0 2px 8px rgba(161,42,26,.3) !important}

/* Pastille cliquable. Elle doit se distinguer des pastilles informatives d'à
   côté, sinon on ne devine pas qu'elle mène quelque part — d'où la flèche et
   le relief au survol. Le soulignement est retiré : sur une pastille il ferait
   désordre, l'affordance vient de la flèche et du curseur. */
a.chip-link{cursor:pointer;transition:box-shadow .12s,transform .12s}
a.chip-link:hover{text-decoration:none;box-shadow:0 3px 10px rgba(15,23,42,.13);transform:translateY(-1px)}
a.chip-link .chip-arrow{margin-left:6px;opacity:.6;font-weight:700}
a.chip-link:hover .chip-arrow{opacity:1}

/* Dernier maillon du fil d'ariane : la page courante. Elle ne se distingue que
   par un gris un peu plus soutenu — elle n'est pas cliquable, il ne faut donc
   pas qu'elle en ait l'air. */
.bc .bc-here{color:var(--ink2)}

/* Bouton de réservation, centré. Il apparaît jusqu'à trois fois sur les fiches
   internationales, qui sont longues : le lecteur qui se décide après avoir lu
   les horaires ne devrait pas avoir à chercher où cliquer. Le nom du guichet
   La compagnie est déjà nommée dans le bandeau d'informations juste au-dessus :
   répéter le nom du revendeur sous le bouton n'aurait rassuré personne. */
/* 60 px au-dessus et au-dessous, comme sur le blog. À 26 px le bouton était
   pris en sandwich entre la pastille de la ligne et la première carte, et ne
   se lisait plus comme un appel à l'action mais comme un élément de liste.
   Vincent, le 20 septembre : « il est écrasé entre deux blocs ».
   Sur mobile on descend à 40 : la même respiration coûte une demi-page. */
.ctawrap{text-align:center;margin:60px 0}
.ctawrap .cta{margin-top:0}
/* Le premier bouton, celui qui vit DANS le bloc d'en-tête. Centré comme les
   deux autres — essayé aligné à gauche le 23 septembre, Vincent a préféré le
   centrage —, largement décollé de la dernière ligne de pastilles, et pleine
   largeur sur téléphone : c'est là que se font 74 % des visites, et un bouton
   pleine largeur se vise au pouce. */
.ctawrap-in{text-align:center;margin:38px 0 4px}
@media(max-width:560px){ .ctawrap-in{margin:30px 0 2px} .ctawrap-in .cta{display:block} }
@media(max-width:560px){ .ctawrap{margin:40px 0} }
@media(max-width:560px){
  .ctawrap .cta{display:block;width:100%}
}
/* LE SECOND BOUTON, « Réserver la croisière » — 28 septembre 2026, demandé par
   Vincent sur Geiranger–Hellesylt, où le même bras de mer se vend deux fois :
   le ferry qui embarque la voiture, la croisière commentée qu'on prend à pied.
   Il porte la couleur chaude des cartes d'excursion, celle de GetYourGuide plus
   bas dans la page. Ce n'est pas de la décoration : deux boutons de la même
   couleur posés côte à côte se lisent comme un seul objet coupé en deux, et il
   faudrait lire les deux libellés pour comprendre qu'on propose un choix. La
   couleur le dit avant la lecture.
   Sur téléphone ils s'empilent — la règle pleine largeur ci-dessus s'applique
   aux deux — et il ne reste qu'à les décoller l'un de l'autre. */
.cta-act{background:var(--warm)}
.cta-act:hover{background:var(--warm-ink)}
.ctawrap-in .cta + .cta{margin-left:10px}
@media(max-width:560px){ .ctawrap-in .cta + .cta{margin-left:0;margin-top:10px} }

/* Photo d'en-tête cadrée à la main. La dérogation ne vaut QUE pour le desktop :
   c'est là que le 21:9 imposé rognerait la composition — ciel en haut, ferry en
   bas — et couperait forcément l'un des deux.
   En mobile, la règle commune reprend la main : son 16:10 est justement plus
   haut que le format naturel de ces photos, il leur donne donc une vingtaine de
   pixels de plus au lieu de leur en retirer. Une dérogation qui s'appliquerait
   aussi au mobile priverait la photo de cette hauteur sans rien régler. */
@media(min-width:641px){
  .rhero-nat img{aspect-ratio:auto;height:auto}
}

/* ── Bandeau d'accueil ──────────────────────────────────────────────────────
   Pleine largeur, photo en fond, recherche par-dessus. Deux sources selon
   l'écran : la bande 21:9 en desktop, un format 3:4 en mobile — sur un
   téléphone, une bande large ne montrerait qu'un ruban de mer.
   Le voile sombre est indispensable : le ciel de la photo est orange vif, et
   sans lui le texte blanc y disparaît. C'est le défaut visible chez fergeruter,
   dont le bouton « Trouver les départs » se noie dans les nuages. */
/* Hauteur calée sur le format de l'image plutôt que sur un rembourrage fixe :
   avec `aspect-ratio: 21/9`, le bandeau fait exactement la hauteur que `cover`
   demande, et l'image s'affiche entière — ciel en haut, ferry en bas. Un
   rembourrage fixe donnait 408 px là où l'image en réclamait 548, donc 140 px
   étaient rognés, et c'est le ferry qui partait.
   Le plafond évite qu'un écran très large ne transforme l'accueil en mur. */
.homehero{position:relative;isolation:isolate;display:flex;align-items:center;
  /* Le point d'ancrage n'est pas au centre mais à 55 % : au-delà de 1 307 px de
     large, le plafond de hauteur oblige à rogner l'image, et c'est le bas qu'il
     faut préserver — le ferry y est. Le plafond est passé de 560 à 660 px pour
     la même raison : à 560, un écran de 1 920 px perdait un tiers de la hauteur
     de la photo, c'est-à-dire le ciel en haut et le ferry en bas. */
  background:#3a2417 center 68%/cover no-repeat;
  background-image:url('/img/hero/home-bandeau.webp');
  /* width:100% n'est pas décoratif. Sans lui, la combinaison aspect-ratio +
     max-height fait rétrécir la LARGEUR une fois le plafond atteint : au-delà de
     1 307 px de fenêtre, le bandeau restait figé à 1 307 px, collé à gauche, avec
     une bande vide à droite. Une largeur explicite rend la taille en ligne
     définie, le ratio ne pilote plus que la hauteur, et c'est background-size
     qui recadre. */
  width:100%;
  aspect-ratio:21/9;max-height:660px;min-height:380px;
  padding:0 16px;margin-bottom:8px}
/* Le voile n'est plus un dégradé régulier du haut vers le bas. L'ancienne
   version partait à 30 % dès le premier pixel, c'est-à-dire en plein sur le
   ciel — la seule partie de la photo qui n'a aucun texte par-dessus. On perdait
   l'incendie pour rien. Le voile démarre donc presque nul, reste discret
   jusqu'au bord supérieur du H1 (mesuré à 23,8 % de la hauteur du bandeau en
   desktop), puis monte franchement là où le texte commence.
   Vérifié par mesure de contraste, pas à l'œil : le H1 passe de 11,2 à 12,3 de
   ratio médian contre du blanc, le lede de 17,3 à 17,6, et la luminance moyenne
   du ciel de 0,233 à 0,424 — le texte gagne, le ciel aussi. */
.homehero .hh-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(20,12,8,.06) 0%,
    rgba(20,12,8,.14) 17%,
    rgba(20,12,8,.54) 32%,
    rgba(20,12,8,.60) 70%,
    /* Sous 80 % il n'y a plus une lettre : le voile redescend pour rendre le
       ferry et son sillage au lecteur. C'est la seule zone de la photo qui
       raconte quelque chose, autant qu'on la voie. */
    rgba(20,12,8,.58) 80%,
    rgba(20,12,8,.42) 90%,
    rgba(20,12,8,.34) 100%)}
.homehero .hh-in{max-width:760px;margin:0 auto;width:100%}
/* Double ombre portée : la courte (1-2 px) sauve le tracé des lettres quand
   elles tombent sur un pixel clair — la traînée du soleil — là où la large ne
   fait qu'un halo. C'est elle qui compense l'allègement du voile. */
.homehero h1{color:#fff;font-size:38px;line-height:1.1;letter-spacing:-.8px;margin:0 0 12px;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 20px rgba(0,0,0,.55)}
.homehero .hero-lede{color:rgba(255,255,255,.94);font-size:16px;max-width:560px;margin:0 0 24px;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 1px 14px rgba(0,0,0,.55)}
.homehero .shint{color:rgba(255,255,255,.88);
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 1px 12px rgba(0,0,0,.55)}
.homehero .sfield{border-color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.28)}
@media(max-width:640px){
  /* En mobile l'image est au format 3:4 : on lui laisse sa hauteur, mais bornée
     — un bandeau qui remplirait tout l'écran repousserait la recherche sous la
     ligne de flottaison, alors que c'est elle qu'on vient chercher. */
  .homehero{background-image:url('/img/hero/home-bandeau-mob.webp');
    aspect-ratio:3/4;max-height:70vh;min-height:420px;padding:0 16px}
  /* Dix pixels regagnés sur les marges internes du champ. Ça paraît dérisoire,
     mais c'est exactement ce qui manquait pour que « Hirtshals » tienne sur un
     écran de 390 px, c'est-à-dire sur la moitié des téléphones du marché. */
  .sfield{padding:0 10px;gap:8px}
  /* Le cadrage vertical n'a pas la même géométrie : le H1 démarre à 15,7 % de
     la hauteur, donc la fenêtre laissée au ciel est plus courte, et les nuages
     sont plus lumineux que le ciel du desktop. Le voile monte plus tôt et plus
     haut. Contrôle : ciel 0,056 → 0,099 de luminance, et les trois zones de
     texte gagnent en contraste au 98e centile (H1 4,1 → 4,7). */
  .homehero .hh-veil{background:linear-gradient(180deg,
    rgba(20,12,8,.02) 0%,
    rgba(20,12,8,.08) 12%,
    rgba(20,12,8,.46) 25%,
    rgba(20,12,8,.56) 60%,
    rgba(20,12,8,.60) 84%,
    rgba(20,12,8,.42) 92%,
    rgba(20,12,8,.34) 100%)}
  .homehero h1{font-size:29px}
  .homehero .hero-lede{font-size:15px;margin-bottom:20px}
}

/* -- invitation à l'ajout sur l'écran d'accueil -------------------------- */
/* Volontairement en bas de page et en teintes douces : elle s'adresse à des
   habitués (3e visite), pas à un visiteur qu'il faudrait convaincre. Une
   bannière fixe en haut d'écran ferait le contraire de ce qu'on cherche —
   elle gênerait surtout les 14 visiteurs Google sur 16 qui ne viennent que
   pour une seule page. */
.pwabox{position:relative;margin:26px 0 4px;padding:16px 18px;background:var(--acc-soft);
  border:1px solid #cfe4ea;border-left:3px solid var(--acc);border-radius:11px}
.pwa-h{font-size:15.5px;font-weight:800;color:var(--acc-ink);margin-bottom:5px}
.pwa-t{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 9px;max-width:60ch}
.pwa-how{font-size:13px;line-height:1.6;color:var(--mut);margin:0}
.pwa-how b{color:var(--ink2)}
.pwa-go{font:inherit;font-size:14.5px;font-weight:700;color:#fff;background:var(--acc);
  border:0;border-radius:9px;padding:10px 18px;cursor:pointer}
.pwa-go:hover{background:var(--acc-ink)}
.pwa-x{position:absolute;top:8px;right:9px;width:28px;height:28px;font-size:19px;line-height:1;
  color:var(--mut);background:none;border:0;border-radius:6px;cursor:pointer}
.pwa-x:hover{background:rgba(0,0,0,.06);color:var(--ink2)}
@media(max-width:560px){.pwabox{padding:14px 15px}.pwa-t{font-size:13.5px}}

/* ============================================================================
   BUY ME A COFFEE — soutien volontaire, tout en bas de page
   ----------------------------------------------------------------------------
   Trois écarts assumés par rapport au bloc d'origine (celui du blog) :

   1. Le gobelet est un SVG dessiné ici, pas une image en base64. L'original
      pesait 40 000 caractères ; répliqué sur 550 pages, il aurait ajouté 21 Mo
      de HTML. Sur WordPress un bloc sert une page ; ici le gabarit est copié
      dans chaque fichier.
   2. Le CSS vit dans cette feuille, chargée une fois et gardée un an par le
      navigateur, au lieu d'un <style> répété 550 fois (860 Ko).
   3. Rayon 12 px et ombre atténuée, pour rester dans la grammaire du site
      (8–12 px partout) plutôt que dans celle du blog. Le jaune, lui, ne bouge
      pas : c'est la couleur qui rend le bouton reconnaissable.

   Placé AVANT le pied de page, donc après le dernier bouton de réservation :
   on ne met pas une demande de don devant le geste qui finance réellement le
   site.
   ============================================================================ */
.bmc{--bmc-j:#FFEA6B;--bmc-e:#0D0C22;
  display:block;max-width:760px;margin:34px auto 0;padding:20px 26px;
  text-decoration:none;background:var(--bmc-j);border:2px solid var(--bmc-e);
  border-radius:18px;box-shadow:0 6px 18px rgba(13,12,34,.18);
  transition:transform .18s ease,box-shadow .18s ease;-webkit-font-smoothing:antialiased}
.bmc:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(13,12,34,.28)}
.bmc-row{display:flex;align-items:center;gap:20px}
.bmc-cup{flex:0 0 auto;height:70px;width:auto;display:block}
.bmc-txt{flex:1 1 auto;margin:0;color:var(--bmc-e);
  font-size:16px;font-weight:600;line-height:1.42}
.bmc-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--bmc-e);color:var(--bmc-j);font-size:16px;font-weight:700;
  padding:12px 22px;border-radius:999px;white-space:nowrap;
  transition:background .18s ease}
.bmc:hover .bmc-cta{background:#000}
.bmc-cta svg{width:20px;height:22px;flex:0 0 auto}
@media (max-width:640px){
  .bmc{margin-left:16px;margin-right:16px}
  .bmc-row{flex-direction:column;text-align:center;gap:16px}
  .bmc-txt{font-size:15.5px}
  .bmc-cta{width:100%;justify-content:center}
}

.guide{--g-vert:#4E8A70;--g-rouge:#9C2A17;
  display:block;max-width:760px;margin:34px auto 0;overflow:hidden;
  text-decoration:none;background:var(--g-vert);border-radius:12px;
  box-shadow:0 3px 12px rgba(20,50,35,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.guide:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(20,50,35,.26)}
.guide-row{display:flex;align-items:stretch;gap:0}
/* La couverture est rognée en `cover` : selon le fichier fourni, ses
   proportions ne seront pas exactement celles de la colonne, et une image
   déformée sur un livre se voit immédiatement. */
/* 30 % et non 34 % : à 34 % la couverture faisait 388 px de haut alors que le
   texte n'en occupait que 290, et c'est elle — pas le texte — qui fixait la
   hauteur de la rangée. D'où les 100 px de vert vide sous le bouton. */
.guide-cov{flex:0 0 30%;object-fit:cover;object-position:center;
  width:30%;height:auto;align-self:stretch;background:#dfe6e2;display:block}
/* Le reste du vide se répartit au lieu de s'accumuler en bas : le bloc est
   centré verticalement, donc le bouton tombe à mi-hauteur de la couverture
   plutôt que de flotter avec 100 px sous lui. */
.guide-body{flex:1 1 auto;padding:20px 22px 22px;color:#fff;min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.guide-kick{font-size:10.5px;letter-spacing:.09em;font-weight:700;
  text-transform:uppercase;opacity:.82;margin:0 0 6px}
.guide-t{font-size:25px;line-height:1.12;font-weight:800;margin:0;
  text-transform:uppercase;letter-spacing:.01em}
.guide-s{font-size:16.5px;line-height:1.3;margin:4px 0 2px;font-weight:500}
.guide-s b{font-weight:800}
.guide-pg{font-size:11.5px;opacity:.8;margin:0 0 10px}
.guide-ul{list-style:none;margin:0 0 16px;padding:0}
.guide-ul li{position:relative;padding-left:16px;font-size:14px;line-height:1.5;
  font-weight:600}
.guide-ul li::before{content:'';position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:#fff;opacity:.9}
.guide-btn{display:inline-flex;align-items:center;align-self:flex-start;background:var(--g-rouge);
  color:#fff;font-size:15px;font-weight:700;padding:11px 20px;border-radius:7px;
  transition:background .18s ease}
.guide:hover .guide-btn{background:#7f2112}
/* Mention « guide en anglais » quand la langue du PDF n'est pas celle de la
   page. Discrète mais lisible : elle informe, elle ne dissuade pas. */
.guide-en{display:block;font-size:11.5px;opacity:.78;margin-top:7px}
@media (max-width:640px){
  /* Les 16 px latéraux reprennent le padding de .wrap. La couverture passe
     au-dessus en bandeau : à 34 % d'une colonne de 358 px elle ne ferait plus
     que 120 px de large, trop peu pour qu'on distingue quoi que ce soit. */
  .guide{margin-left:16px;margin-right:16px}
  .guide-row{flex-direction:column}
  /* Bande recadrée sur le titre du guide, réglée par simulation et non au
     jugé. Deux repères mesurés dans le fichier : le bloc photo du haut descend
     jusqu'à y=268 côté droit — c'est lui qui débordait dans la bande — et le
     bas du sous-titre est à y=447. La fenêtre de 112 px à 36 % couvre la source
     de y=270 à y=470 : elle commence deux pixels sous la photo et laisse le
     sous-titre entier, avec une marge blanche de part et d'autre. */
  .guide-cov{flex:0 0 auto;width:100%;height:112px;object-position:center 36%}
  .guide-body{padding:18px 18px 20px;display:block}
  .guide-t{font-size:22px}
  .guide-btn{width:100%;justify-content:center;align-self:auto}
}

/* ----------------------------------------------------------------------------
   BASCULE DESKTOP / MOBILE DE LA BANNIÈRE DU GUIDE
   ----------------------------------------------------------------------------
   Vincent a dessiné une bannière large, et elle est meilleure que ce qu'on
   refait en CSS : typographie manuscrite, drapeaux, hiérarchie posée à la main.
   On la sert donc telle quelle — mais en DESKTOP SEULEMENT. Elle fait 1500 px
   de large ; sous 640 px, son texte tombe à 8 px et le bouton à 9. C'est la
   carte HTML qui prend le relais là, parce qu'elle, elle ne rétrécit pas.

   Les deux existent dans le HTML, une seule s'affiche. Redondance assumée :
   c'est le seul moyen de basculer entre une IMAGE et du TEXTE selon la largeur,
   `<picture>` ne sachant échanger que des images entre elles.

   En espagnol et en allemand la bannière n'existe pas : `guide.banniere` vaut
   alors `null`, la classe `.guide-mob` n'est pas posée, et la carte HTML sert
   dans les deux largeurs.
   ---------------------------------------------------------------------------- */
.guide-img{display:block;max-width:760px;margin:34px auto 0;border-radius:12px;
  overflow:hidden;box-shadow:0 3px 12px rgba(20,50,35,.18);
  transition:transform .18s ease,box-shadow .18s ease}
.guide-img:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(20,50,35,.26)}
.guide-img img{display:block;width:100%;height:auto}
/* Deux images, une par format. La verticale est cachée en desktop, la large
   est cachée sur téléphone. Aucune n'est chargée pour rien : `loading="lazy"`
   couplé à `display:none` empêche le navigateur de télécharger celle qu'il
   n'affichera pas. */
.guide-mob-img{display:none}
/* La carte HTML s'efface au format où une image existe déjà. Les deux classes
   sont indépendantes : une langue peut n'avoir que la verticale, la carte sert
   alors en desktop seulement. */
.guide-sans-desk{display:none}
@media (max-width:640px){
  .guide-desk{display:none}
  .guide-mob-img{display:block;margin-left:16px;margin-right:16px}
  .guide-sans-desk{display:block}
  .guide-sans-mob{display:none}
}
/* ============================================================================
   /carte/ — la carte du réseau
   ----------------------------------------------------------------------------
   La page est la seule du site à sortir de la colonne de 760 px : une carte de
   la Norvège dans 760 px de large donne un pays haut de deux mètres et large de
   trois centimètres. On passe donc à 1180 px, et le panneau de détail se range
   à droite de la carte tant qu'il y a la place, sous elle ensuite.

   Le panneau n'est pas une infobulle Leaflet : le contenu (cinq lignes d'info,
   deux boutons, trois liens de port, deux fiches illustrées) ne tient pas dans
   une bulle ancrée au trait, qui de surcroît recouvrirait la carte à l'endroit
   précis qu'on vient de regarder.
   ---------------------------------------------------------------------------- */
.cf-wrap{max-width:1180px}
.cf-filtres{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.cf-chip{display:inline-flex;align-items:center;gap:7px;background:var(--surf);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:13px;
  color:var(--ink2);cursor:pointer;font-family:inherit;line-height:1.2}
.cf-chip:hover{border-color:var(--acc);color:var(--acc-ink)}
.cf-chip.on{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.cf-chip.on .cf-dot{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.cf-dot{width:10px;height:10px;border-radius:50%;flex:none}

.cf-zone{display:flex;gap:16px;align-items:stretch;overflow-x:clip}
.cf-map{flex:1;min-width:0;height:640px;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;background:#dfe7ec;z-index:0}
.cf-map .leaflet-container{font-family:inherit}

.cf-panneau{width:372px;flex:none;background:var(--surf);border:1px solid var(--line);
  border-radius:12px;padding:16px;overflow-y:auto;max-height:640px;position:relative}
.cf-vide{margin:0;color:var(--mut);font-size:14px}
.cf-fermer{position:absolute;top:8px;right:10px;background:none;border:0;font-size:24px;
  line-height:1;color:var(--mut);cursor:pointer;padding:2px 6px;border-radius:6px}
.cf-fermer:hover{background:var(--line2);color:var(--ink)}

.cf-titre{margin:0 26px 6px 0;font-size:20px;line-height:1.2;letter-spacing:-.3px;font-weight:800}
.cf-sous{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px}
.cf-badge{display:inline-block;font-size:11px;font-weight:700;color:#fff;border-radius:5px;padding:2px 7px}
.cf-op{font-size:12px;color:var(--mut)}
.cf-intro{margin:0 0 12px;font-size:13px;color:var(--ink2)}

.cf-infos{border-top:1px solid var(--line2);margin-bottom:12px}
.cf-i{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--line2);font-size:13.5px}
.cf-ik{color:var(--ink2)}
.cf-iv{color:var(--ink);text-align:right}
.cf-gratuit{margin:0 0 12px;font-size:13px;color:var(--good);font-weight:600}

.cf-cta{display:block;text-align:center;background:var(--acc);color:#fff;font-weight:700;
  font-size:14px;border-radius:9px;padding:11px 12px;margin-bottom:8px}
.cf-cta:hover{background:var(--acc-ink);text-decoration:none}
.cf-cta2{background:var(--warm)}
.cf-cta2:hover{background:var(--warm-ink)}
.cf-cta3{background:#b4842a}
.cf-cta3:hover{background:#8f6a20}
.cf-lien{display:block;text-align:center;font-size:13px;margin:6px 0 2px}

.cf-h3{margin:16px 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--mut)}
.cf-liens{display:flex;flex-direction:column;gap:6px}
.cf-liens a{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;font-size:13.5px;color:var(--ink)}
.cf-liens a:hover{border-color:var(--acc);color:var(--acc-ink);text-decoration:none}
.cf-go{margin-left:auto;color:var(--mut)}

.cf-mini{display:flex;gap:10px;align-items:stretch;margin-top:10px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cf-mini:hover{border-color:var(--acc);text-decoration:none}
.cf-miniimg{width:88px;height:88px;object-fit:cover;flex:none;display:block}
.cf-minib{display:flex;flex-direction:column;gap:3px;padding:9px 10px 9px 0;min-width:0}
.cf-mini:not(:has(.cf-miniimg)) .cf-minib{padding-left:10px}
.cf-tag{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--acc-ink)}
.cf-mininom{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25}
.cf-minimeta{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px;color:var(--ink2)}
.cf-note{background:var(--good-soft);color:var(--good);font-weight:700;border-radius:4px;padding:1px 5px}
.cf-avis{color:var(--mut)}
.cf-prix{margin-left:auto;color:var(--ink)}

.cf-cro{border-top:1px solid var(--line2);padding-top:12px;margin-top:12px}
.cf-cro:first-of-type{border-top:0;padding-top:0;margin-top:0}
.cf-croimg{width:100%;height:132px;object-fit:cover;border-radius:9px;display:block;margin-bottom:8px}
.cf-cronom{font-size:15px;font-weight:700;line-height:1.25;margin-bottom:4px}
.cf-crometa{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:12px;
  color:var(--ink2);margin-bottom:6px}
.cf-crodesc{margin:0 0 9px;font-size:13px;color:var(--ink2);line-height:1.45}

/* Sous 1000 px le panneau passe SOUS la carte plutôt que de la réduire à une
   bande : à 300 px de large une carte de la Norvège ne montre plus rien. */
@media (max-width:1000px){
  .cf-zone{flex-direction:column}
  /* En colonne, `flex:1` vaut `flex-basis:0%` et écrase la hauteur : sans
     ce `flex:none`, la carte s'écrase à quelques pixels. */
  .cf-map{flex:none;height:min(64vh,520px)}
  .cf-panneau{width:auto;max-height:none}
  .cf-panneau:not(.ouvert){padding:12px 16px}
}
@media (max-width:560px){
  .cf-map{height:min(58vh,430px)}
  .cf-titre{font-size:18px}
  .cf-miniimg{width:74px;height:74px}
  .cf-chip{padding:6px 11px;font-size:12.5px}
}

/* ============================================================================
   Recherche du bandeau
   ----------------------------------------------------------------------------
   Le bandeau contient déjà la marque, le lien carte et quatre drapeaux de
   langue. Un champ de plus ne tient pas sur une ligne de téléphone : la barre
   passe donc en `flex-wrap`, et le champ occupe une seconde ligne entière sous
   700 px. Il reste ainsi utilisable au doigt, plutôt que réduit à un moignon.
   ---------------------------------------------------------------------------- */
.nav .in{flex-wrap:wrap;row-gap:8px}
.navq{position:relative;flex:1 1 220px;min-width:0;margin-left:6px}
.navq input{width:100%;font:inherit;font-size:13.5px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);line-height:1.2}
.navq input::placeholder{color:var(--mut)}
.navq input:focus{outline:none;border-color:var(--acc);background:var(--surf);
  box-shadow:0 0 0 3px var(--acc-soft)}
.navq input::-webkit-search-cancel-button{cursor:pointer}

.navq-res{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:1200;
  background:var(--surf);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(15,23,42,.16);overflow:hidden;max-height:70vh;overflow-y:auto}
.navq-item{display:flex;align-items:flex-start;gap:9px;padding:9px 13px;border-bottom:1px solid var(--line2)}
.navq-item:hover,.navq-item.on{background:var(--acc-soft);text-decoration:none}
/* Le pictogramme de famille — navire pour une traversée, ancre pour une ville
   portuaire, livre pour un guide (23 septembre 2026). Dessiné en SVG et non
   en emoji : voir la note du gabarit. Il prend la couleur du texte discret,
   et se pose sur la ligne du nom, pas au milieu du bloc de deux lignes. */
.navq-ico{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--mut)}
.navq-tx{min-width:0;flex:1 1 auto}
.navq-n{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.25}
.navq-m{display:block;font-size:12px;color:var(--mut);margin-top:1px}
.navq-vide{margin:0;padding:12px 13px;font-size:13px;color:var(--mut)}
.navq-tout{display:block;padding:9px 13px;font-size:12.5px;font-weight:600;
  color:var(--acc-ink);background:var(--bg)}
.navq-tout:hover{text-decoration:none;background:var(--acc-soft)}

/* ----------------------------------------------------------------------------
   LE LIEN VERS LA PAGE VILLE (23 septembre 2026).

   Sur la fiche il se pose sous le schéma de la traversée, qui vient de nommer
   les deux ports ; sur le hub international, au-dessus des deux boutons de la
   carte. Volontairement sobre : c'est un lien interne au milieu de liens
   affiliés, et lui donner l'allure d'un bouton d'achat serait un mensonge de
   mise en forme. Il se distingue par l'ancre, pas par la couleur.
   ---------------------------------------------------------------------------- */
.vlk{display:flex;flex-wrap:wrap;gap:8px;margin:10px 2px 0}
.vlk-a{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  border:1px solid var(--line);border-radius:999px;background:var(--surf);
  font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.2}
.vlk-a:hover{text-decoration:none;border-color:var(--acc);background:var(--acc-soft)}
.vlk-ico{font-size:12px;opacity:.7}
.vlk-go{color:var(--mut);font-weight:400}
.vlk-a:hover .vlk-go{color:var(--acc-ink)}
.vlk-hub{margin:12px 0 0}

.visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (max-width:700px){
  .navq{order:5;flex:1 0 100%;margin-left:0}
}

/* Les sous-titres du bloc tarifs (7 septembre 2026). Le tableau véhicules et
   l'encart passagers étaient déjà deux choses distinctes à l'œil ; ils sont
   maintenant deux H3 sous la question « Combien coûte… ». Volontairement
   discrets : ils structurent la page pour les moteurs sans alourdir la
   lecture, qui reposait très bien sur la mise en forme existante. */
.subsec{margin:14px 2px 6px;font-size:14px;font-weight:600;color:var(--mut);letter-spacing:.01em}


/* ============================================================================
   TYPOGRAPHIE ET RESPIRATION — 17 septembre 2026
   ----------------------------------------------------------------------------
   POURQUOI. Le site donnait une impression d'étouffement, sur grand écran
   comme sur mobile. Le relevé a montré que la cause n'était pas la largeur :
   la base était bien à 16 px, mais PRESQUE CHAQUE ÉLÉMENT était redescendu à
   12 ou 13 px — .hc-desc 13, .rhead .sub 13,5, .chip 12,5, .bc 12, .hc-loc
   12,5, .dep .dir 13,5. Le texte réellement lu se trouvait donc deux tailles
   sous le réglage de base, partout, et sur les deux formats.

   CE QU'ON NE FAIT PAS. Élargir le bloc de texte. À 760 px et 16 px, une ligne
   faisait déjà ~89 caractères, au-dessus de la limite de confort (~70).
   L'élargir aurait empiré la lecture. Ce qui donne de l'air, c'est le rapport
   entre la taille du texte et la longueur de ligne : on augmente le texte, et
   la ligne raccourcit d'elle-même. À 18 px dans 700 px, on retombe à ~72.

   DONC DEUX LARGEURS, ET PAS UNE. Le conteneur passe à 900 px pour les blocs
   structurés — grilles d'horaires, tableaux de tarifs, cartes hôtel — qui
   étaient serrés. La prose, elle, reste bornée à 700 px.

   PAS DE CAPITALES SUR LES TITRES. « COMBIEN COÛTE LE FERRY HIRTSHALS–
   KRISTIANSAND ? » tient sur une ligne et demie, se lit plus lentement qu'en
   bas de casse, et les accents sur capitales rendent mal. Le site emploie déjà
   les capitales là où elles sont justes — « CE QUI JOUE POUR », « OÙ DORMIR »,
   « PROCHAIN » : sur des étiquettes courtes. Pour faire ressortir les titres,
   un filet coloré au-dessus marque la coupure bien mieux qu'une graisse.

   POUR AJUSTER, NE TOUCHER QUE LES HUIT VARIABLES CI-DESSOUS.
   ========================================================================= */

:root{
  --largeur-page:900px;    /* blocs structurés : tableaux, grilles, cartes   */
  --largeur-prose:700px;   /* paragraphes : ~72 caractères par ligne à 18 px */
  --fs-corps:18px;         /* était 16 (implicite)                           */
  --fs-petit:15px;         /* était 13 à 13,5 — descriptions, sous-titres    */
  --fs-mini:13.5px;        /* était 12 à 12,5 — pastilles, fil d'Ariane      */
  --fs-titre:28px;         /* était 22 — les h2/h3 de section                */
  --fs-titre-page:30px;    /* était 25 — le titre de la fiche                */
  --interligne:1.65;       /* était 1,55 — le réglage qui fait le plus       */
}

body{font-size:var(--fs-corps);line-height:var(--interligne)}

/* ---- les trois conteneurs doivent bouger ensemble ---- */
.wrap,.nav .in,.pagefoot{max-width:var(--largeur-page)}

/* ---- la prose garde une longueur de ligne lisible ---- */
.hero-lede,.istory,p.note,.rhead .sub,.faq p,.freetext{max-width:var(--largeur-prose)}
.rhead .sub{font-size:var(--fs-petit)}

/* ---- titres de section : plus grands, plus espacés, non resserrés ----
   Le letter-spacing négatif d'origine (-0.4px) participait à la sensation de
   compression : à taille égale, un titre non resserré respire déjà mieux. */
h2.sec,h3.sec{font-size:var(--fs-titre);letter-spacing:-.01em;line-height:1.25;margin:60px 2px 20px}
h2.sec.sec-tight,h3.sec.sec-tight{margin-top:10px}
h2.sec::before,h3.sec::before{content:"";display:block;width:44px;height:3px;
  border-radius:2px;background:var(--acc);margin-bottom:14px;opacity:.9}
.secsub{font-size:var(--fs-mini)}
.subsec{font-size:var(--fs-petit);margin:22px 2px 10px}

/* ---- titre de la fiche ---- */
.rhead{padding:26px 28px}
.rhead h2{font-size:var(--fs-titre-page);line-height:1.15;letter-spacing:-.02em}
.bc{font-size:var(--fs-mini);margin-bottom:14px}

/* ---- pastilles ---- */
.chip{font-size:var(--fs-mini);padding:7px 13px}
.metastrip{gap:10px;margin-top:20px}

/* ---- barre de navigation ---- */
.brand{font-size:17px}
.navlk{font-size:15px;padding:7px 12px}
.langsw a{font-size:14px;padding:6px 10px}

/* ---- cartes hôtel et excursion ----
   Spécificité alignée sur les règles d'origine, sinon elles ne passent pas. */
.hotelcard .hc-body{padding:16px 18px;gap:7px}
.hc-name{font-size:17px}
.hc-loc{font-size:var(--fs-mini)}
.hc-desc{font-size:var(--fs-petit);line-height:1.5}
.hc-rate{font-size:var(--fs-mini)}
.hc-note{font-size:var(--fs-mini)}
.hc-stars{font-size:14px}
.hotelcard .hc-cta{padding:16px 20px}
.hc-price{font-size:15px}
.hc-price b{font-size:21px}
.hc-btn{font-size:15px;padding:11px 18px}
.hc-from,.hc-unit{font-size:var(--fs-mini)}
.hc-cancel{font-size:13px}
.hotelcard .hc-img{flex:0 0 172px;width:172px}

/* ---- prochains départs ---- */
.dep{padding:16px 18px}
.dep .t{font-size:25px}
.dep.first .t{font-size:34px}
.dep .dir{font-size:16px}
.dep .status{font-size:var(--fs-mini)}
.dpill{font-size:var(--fs-mini);padding:8px 14px}
.dirname{font-size:18px}
.alllink{font-size:15px}
.timec,.timec input{font-size:var(--fs-mini)}

/* ---- pied de page ---- */
.pagefoot{font-size:var(--fs-mini)}

/* ---- mobile : on garde tout, on tempère juste les titres ----
   La respiration vient surtout de l'interligne et des marges, qui ne changent
   pas ici. Seule la taille des titres redescend, faute de largeur. */
@media(max-width:560px){
  :root{--fs-titre:25px;--fs-titre-page:26px;--fs-corps:17px}
  h2.sec,h3.sec{margin:46px 2px 16px}
  .rhead{padding:20px 18px}
  .hotelcard .hc-img{flex:0 0 auto;width:100%}
}


/* ============================================================================
   HUB INTERNATIONAL — sommaire, questions, « ça dépend » (17 septembre 2026)
   ----------------------------------------------------------------------------
   La page répond maintenant à quatre questions avant de dérouler ses onze
   cartes. Trois blocs neufs, et une règle commune : la prose reste bornée à
   --largeur-prose, les cartes gardent toute la largeur.
   ========================================================================= */

/* Le sommaire. Replié visuellement sur mobile — pas caché, juste en colonne. */
.sommaire{background:var(--surf);border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;margin:24px 0 8px;max-width:var(--largeur-prose)}
.sommaire-t{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.sommaire ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 10px;
  counter-reset:s}
.sommaire li{counter-increment:s}
.sommaire a{display:inline-flex;align-items:baseline;gap:7px;font-size:15px;
  color:var(--acc-ink);background:var(--acc-soft);border-radius:8px;padding:7px 13px;
  line-height:1.25}
.sommaire a::before{content:counter(s);font-size:11px;font-weight:800;opacity:.6}
.sommaire a:hover{text-decoration:none;background:#d9eaf0}
@media(max-width:560px){
  .sommaire ol{flex-direction:column;gap:2px}
  .sommaire a{width:100%;padding:9px 12px}
}

/* Les blocs de question. */
.qbloc{margin:0 0 6px}
.qpara{max-width:var(--largeur-prose);margin:0 0 14px}

/* « Ça dépend d'où vous allez » : une entrée par destination, chacune menant
   à sa fiche. Le lien porte la destination ET le nom de la ligne — on clique
   sur ce qu'on cherche, pas sur un slug qu'on ne connaît pas encore. */
.choix{list-style:none;margin:6px 0 20px;padding:0;max-width:var(--largeur-prose)}
.choix-li{padding:14px 0;border-top:1px solid var(--line)}
.choix-li:last-child{border-bottom:1px solid var(--line)}
.choix-lk{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:5px}
.choix-lk:hover{text-decoration:none}
.choix-quoi{font-weight:800;font-size:17px;color:var(--ink)}
.choix-lk:hover .choix-quoi{color:var(--acc-ink)}
.choix-nom{font-size:14px;font-weight:700;color:var(--acc-ink);background:var(--acc-soft);
  border-radius:7px;padding:3px 10px;white-space:nowrap}
.choix-go{margin-left:6px;opacity:.7}
.choix-txt{margin:0;color:var(--ink2);font-size:var(--fs-petit)}

/* Le paragraphe qui referme un groupe de pays, après ses cartes. */
.cr-apres{color:var(--ink2);font-size:var(--fs-petit);max-width:var(--largeur-prose);
  margin:2px 0 30px}

/* Les cartes sont désormais regroupées par pays sous un H2, et non plus sous
   un intertitre en capitales : le filet de l'ancien `.ig-pays` ferait doublon
   avec celui que porte maintenant chaque H2. */
.intlgrp{margin:0 0 22px}

/* L'encart « dormir avant le départ », en haut de fiche. */
.encart{margin:26px 0 10px}
.encart .sec{margin-top:0}
.encart .hotelcard{margin-top:18px}


/* ============================================================================
   LA PAIRE HÔTEL + EXCURSION — cartes verticales côte à côte (18 sept. 2026)
   ----------------------------------------------------------------------------
   Reprend le format du blog : image en haut, note verte à cheval sur la
   frontière image/contenu, texte, prix, bouton. Deux colonnes sur grand écran,
   l'une sous l'autre en dessous de 700 px.

   LES COULEURS SONT INVERSÉES PAR RAPPORT À L'ANCIEN FORMAT, et c'est voulu :
   l'excursion prend le beige et le terracotta, l'hôtel le bleu. C'est la
   convention du blog, et les deux sites finissent par se lire ensemble.

   LES CLASSES `hc-*` NE CHANGENT PAS. Le script de rotation des pools cherche
   `.hc-img`, `.hc-name`, `.hc-loc`, `.hc-note`, `.hc-stars`, `.hc-rev`,
   `.hc-desc` et `.hc-price b` à l'intérieur de `#hpool` / `#apool`. Renommer
   l'une d'elles arrêterait le tirage au sort en silence — la page continuerait
   d'afficher éternellement le même hôtel, et rien ne le dirait.
   ========================================================================= */

.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 4px;align-items:start}
@media(max-width:700px){ .duo{grid-template-columns:1fr} }

.duo .hotelcard{flex-direction:column;align-items:stretch;margin:0;overflow:visible;
  border-radius:12px;position:relative}
.duo .hc-img{flex:0 0 auto;width:100%;height:180px;object-fit:cover;display:block;
  border-radius:12px 12px 0 0}
.duo .hc-body{padding:22px 18px 14px;gap:5px}
.duo .hc-head{display:block}
.duo .hc-tag{display:inline-block;margin-bottom:7px}
.duo .hc-name{display:block;font-size:16px;line-height:1.3}
.duo .hc-loc{display:block;margin-top:2px}
/* La description est bornée : une fiche hôtel du jeu de données fait deux cents
   mots, ce qui ferait une carte de deux mètres de haut. */
.duo .hc-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;margin-top:8px}
/* La note, à cheval sur la frontière image/contenu — elle attrape l'œil là où
   il descend déjà. */
/* `row-reverse` et non `row` : le bloc est ancré à droite, donc c'est vers la
   gauche que le contenu doit pousser. La note reste collée au bord, la pastille
   « annulation gratuite » se range à côté d'elle sans jamais déborder. */
.duo .hc-rate{position:absolute;top:158px;right:14px;z-index:2;margin:0;
  display:flex;flex-direction:row-reverse;align-items:center;gap:6px}
.duo .hc-note{background:var(--good);color:#fff;font-weight:800;border-radius:8px;
  padding:5px 11px;font-size:13.5px;box-shadow:0 3px 10px rgba(0,0,0,.22)}
.duo .hc-stars,.duo .hc-rev{display:none}
/* Pastille blanche : le texte passe à cheval sur la photo, et une photo de fjord
   au coucher du soleil ne garantit aucun contraste. */
.duo .hc-cancel{position:static;margin:0;display:inline-block;white-space:nowrap;
  background:#fff;border:1px solid #cfe4d6;color:var(--good);font-size:12px;
  font-weight:700;border-radius:999px;padding:3px 9px;
  box-shadow:0 2px 8px rgba(0,0,0,.14)}
.duo .hc-cta{flex:0 0 auto;flex-direction:row;align-items:center;justify-content:space-between;
  border-left:none;border-top:1px solid rgba(0,0,0,.06);padding:14px 18px;gap:10px}
.duo .hc-btn{box-shadow:none}

/* Excursion : beige et terracotta. */
.duo-act{background:var(--warm-soft);border-color:#ead9c0}
.duo-act .hc-tag{background:var(--warm)}
.duo-act .hc-cta{background:rgba(255,255,255,.45)}
.duo-act .hc-btn{background:var(--warm)}
a.duo-act:hover{box-shadow:0 8px 22px rgba(184,85,47,.18)}

/* Hôtel : bleu. */
.duo-hot{background:var(--acc-soft);border-color:#cfe4ea}
.duo-hot .hc-tag{background:var(--acc)}
.duo-hot .hc-cta{background:rgba(255,255,255,.5)}
.duo-hot .hc-btn{background:var(--acc)}
a.duo-hot:hover{box-shadow:0 8px 22px rgba(13,110,140,.18)}

/* ---- Carte d'excursion riche (ActRiche.astro), format medium du blog. ---- */
.nf-am{display:block;margin:28px 0;border-radius:14px;overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  box-shadow:0 6px 18px rgba(40,24,12,.12);transition:transform .25s ease,box-shadow .25s ease}
/* La carte entière est un lien : sans ce `text-decoration:none`, la règle
   générale `a:hover{text-decoration:underline}` souligne au survol la
   description ET les trois points forts d'un coup. Constaté en ligne le
   22 septembre par Vincent. Le relief et le zoom de l'image suffisent à dire
   que c'est cliquable. */
.nf-am:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(40,24,12,.16);text-decoration:none}
.nf-am-in{display:flex;min-height:210px}
.nf-am-img{flex:0 0 38%;position:relative;overflow:hidden;background:#eadfcd}
.nf-am-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.nf-am:hover .nf-am-img img{transform:scale(1.04)}
.nf-am-tag{position:absolute;top:12px;left:12px;background:var(--warm);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;padding:4px 9px;border-radius:5px}
.nf-am-badge{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.94);color:#2c1810;font-size:11.5px;
  font-weight:700;padding:4px 10px;border-radius:14px}
.nf-am-txt{flex:1;padding:18px 22px;background:var(--warm-soft);display:flex;flex-direction:column;gap:9px}
.nf-am-t{font-size:19px;font-weight:750;line-height:1.25;color:#2c1810}
.nf-am-rate{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:#8b6f47}
.nf-am-note{background:#1a7a4c;color:#fff;font-weight:800;font-size:12.5px;padding:2px 7px;border-radius:5px}
.nf-am-stars{color:var(--warm);letter-spacing:1px;font-size:14px}
.nf-am-d{font-size:13.5px;line-height:1.5;color:#4a3826;margin:0}
.nf-am-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.nf-am-pts li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;color:#4a3826}
.nf-am-pts li::before{content:"✓";flex:0 0 15px;height:15px;margin-top:1px;border-radius:50%;background:var(--warm);color:#fff;
  font-size:9px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.nf-am-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid #ead9c0}
.nf-am-px{display:flex;flex-direction:column;gap:3px}
.nf-am-cancel{font-size:11.5px;font-weight:700;color:#1a7a4c}
.nf-am-from{font-size:12.5px;color:#8b6f47}.nf-am-from b{font-size:22px;color:#2c1810;margin-left:4px}
.nf-am-btn{background:var(--warm);color:#fff;font-weight:750;font-size:13.5px;padding:11px 20px;border-radius:8px;white-space:nowrap;
  box-shadow:0 3px 10px rgba(178,85,47,.28)}
.nf-am:hover .nf-am-btn{background:var(--warm-ink)}
@media(max-width:700px){.nf-am-in{flex-direction:column}.nf-am-img{flex:0 0 190px}.nf-am-txt{padding:16px 18px}
  .nf-am-t{font-size:17.5px}.nf-am-foot{flex-direction:column;align-items:stretch}.nf-am-btn{text-align:center}}
.nf-am-pts li.nf-am-warn::before{content:none}
.nf-am-pts li.nf-am-warn{color:#6b4a2e}

/* ---- Page /croisieres/ (22 septembre 2026) ---- */
.crpage .crport .nf-am{margin:18px 0}
.cr-fiches{font-size:14px;color:var(--mut);margin:4px 0 10px}
.cr-fiches a{font-weight:650}
.cr-variante{margin:6px 0 0;font-size:14px}
.cr-variante a{font-weight:650;color:var(--warm-ink)}
.cr-note{margin:36px 0 10px;font-size:12.5px;color:var(--mut)}
.cr-all{display:inline-block;margin-top:18px;font-weight:700;color:var(--warm-ink)}

/* ===========================================================================
   Deux logements côte à côte (HotelDuo.astro), posés le 22 septembre 2026 à
   la place de la petite carte hôtel en rotation. Palette bleue du site, pour
   les distinguer de la carte d'excursion, qui est terracotta.
   =========================================================================== */
.nf-hd-wrap{margin:42px 0 4px}
@media(max-width:560px){ .nf-hd-wrap{margin:32px 0 4px} }
.nf-hd-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;
  background:var(--acc);padding:3px 8px;border-radius:5px;margin-bottom:10px}
.nf-hd{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.nf-hd-c{display:flex;flex-direction:column;background:#eef4fa;border:1px solid #dbe6f1;border-radius:14px;
  overflow:hidden;color:inherit;text-decoration:none;box-shadow:0 2px 10px rgba(15,23,42,.06);
  transition:box-shadow .15s,transform .15s}
.nf-hd-c:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.14);text-decoration:none}
.nf-hd-img{position:relative;aspect-ratio:16/10}
.nf-hd-img-in{position:absolute;inset:0;overflow:hidden;background:#dfe6ec}
.nf-hd-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.nf-hd-c:hover .nf-hd-img img{transform:scale(1.04)}
.nf-hd-note{position:absolute;z-index:2;right:10px;bottom:-15px;background:#1a5c3a;color:#fff;font-weight:800;
  font-size:13px;padding:5px 11px;border-radius:8px;box-shadow:0 2px 8px rgba(15,23,42,.22)}
.nf-hd-badge{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:#c8a13a;color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:4px 12px;border-radius:7px;white-space:nowrap}
.nf-hd-b{flex:1;display:flex;flex-direction:column;gap:7px;padding:22px 18px 16px}
.nf-hd-t{font-size:16.5px;font-weight:800;line-height:1.25;color:var(--ink)}
.nf-hd-loc{font-size:12.5px;color:var(--ink2)}
.nf-hd-rev{color:var(--mut)}
.nf-hd-d{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
/* Sans points forts rédigés, on retombe sur la description longue du jeu de
   données : quatre lignes, pour que les deux cartes gardent la même hauteur. */
.nf-hd-d-long{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nf-hd-pts{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.nf-hd-pts li{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.35;color:var(--ink2)}
.nf-hd-pts li::before{content:"✓";flex:0 0 15px;height:15px;margin-top:1px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
.nf-hd-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:10px}
.nf-hd-px{font-size:13px;color:var(--ink2)}
.nf-hd-px b{font-size:21px;color:var(--ink);margin:0 4px}
.nf-hd-from{color:var(--mut)}
.nf-hd-unit{color:var(--mut)}
.nf-hd-btn{display:block;text-align:center;background:var(--acc);color:#fff;font-weight:700;font-size:13.5px;
  padding:11px 16px;border-radius:9px;box-shadow:0 2px 8px rgba(13,110,140,.26)}
.nf-hd-c:hover .nf-hd-btn{background:var(--acc-ink)}
.nf-hd-all{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;padding:12px 16px;
  border:1.5px solid var(--acc);border-radius:9px;background:var(--surf);color:var(--acc-ink);text-align:center}
.nf-hd-all:hover{background:var(--acc-soft);text-decoration:none}
.nf-hd-all-t{font-weight:700;font-size:14.5px}
.nf-hd-all-s{font-size:11.5px;color:var(--mut)}
@media (max-width:620px){
  .nf-hd{grid-template-columns:1fr;gap:14px}
  .nf-hd-img{aspect-ratio:16/9}
}


/* ---- Page ville portuaire (/{lang}/port/<ville>/) ------------------------- */
/* Une page de lecture, pas un tableau de bord : une colonne étroite, des
   intertitres qui respirent, et les seuls encarts qui vendent (carte
   d'excursion, duo de logements) posés dans le fil du texte. */
.pv{max-width:760px;margin:0 auto;padding:0 2px}
.pv-h1{font-size:34px;line-height:1.15;font-weight:800;margin:6px 0 14px;color:var(--ink)}
.pv-lede{font-size:17px;line-height:1.62;color:var(--ink2)}
.pv p{line-height:1.65}
.pv-h3{font-size:19.5px;font-weight:750;margin:26px 0 8px;color:var(--ink)}
.pv-ligne{background:var(--acc-soft);border:1px solid #cfe4ea;border-radius:14px;padding:18px 20px;margin:14px 0 6px}
.pv-ligne .pv-h3{margin-top:0}
.pv-faits{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:14px;color:var(--ink2);margin-bottom:10px}
.pv-faits b{color:var(--ink)}
.pv-fiche-lk{font-size:14.5px;color:var(--ink2)}
.pv-cas,.pv-faire{list-style:none;padding:0;margin:12px 0}
.pv-cas li,.pv-faire li{position:relative;padding:0 0 0 22px;margin:9px 0;line-height:1.6}
.pv-cas li::before,.pv-faire li::before{content:'→';position:absolute;left:0;color:var(--acc);font-weight:700}
.pv-bacs{list-style:none;padding:0;margin:10px 0}
.pv-bacs li{padding:9px 0;border-bottom:1px solid var(--line)}
.pv-bacs li:last-child{border-bottom:0}
.pv-bac-meta{display:block;font-size:13.5px;color:var(--mut);margin-top:2px}
.pv-flam{margin:10px 0 4px}
.pv-jours{margin:12px 0;padding-left:22px}
.pv-jours li{margin:10px 0;line-height:1.6}
.pv-fiches{font-size:14.5px;background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.pv-blog{font-size:14.5px;color:var(--ink2)}
/* Le comparatif « ferry ou pont ». Un tableau, parce qu'on compare des
   grandeurs de même nature — durée contre durée, péage contre billet — et
   qu'une liste à puces oblige le lecteur à faire la soustraction lui-même.
   Il déborde horizontalement sur petit écran plutôt que d'écraser la
   première colonne, qui porte le nom de l'itinéraire. */
.pv-cmp{margin:16px 0 6px}
.pv-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 4px}
.pv-cmp-t{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
.pv-cmp-t th,.pv-cmp-t td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.pv-cmp-t thead th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--mut);font-weight:700;border-bottom:2px solid var(--line)}
.pv-cmp-t tbody tr:last-child th,.pv-cmp-t tbody tr:last-child td{border-bottom:0}
.pv-cmp-t .pv-cmp-l{font-weight:650;color:var(--ink);width:38%}
.pv-cmp-t tbody tr:nth-child(odd){background:var(--surf)}
.pv-cmp-note{font-size:13.5px;color:var(--mut);line-height:1.55;margin:2px 0 12px}
/* Une option comparée : le bandeau de faits, puis fiche et réservation. */
.pv-opt{padding:8px 0 4px;border-bottom:1px solid #cfe4ea}
.pv-opt:last-of-type{border-bottom:0;margin-bottom:6px}
.pv-ligne .pv-opt .pv-faits{margin-bottom:4px}
@media(max-width:640px){
  .pv-h1{font-size:26px}
  .pv-lede{font-size:16px}
  .pv-ligne{padding:15px 16px;border-radius:12px}
  .pv-cmp-t{font-size:13.5px}
  .pv-cmp-t th,.pv-cmp-t td{padding:8px 10px}
}

/* Deux bacs qui se suivent (Lyngen). Un bandeau d'information posé sous
   l'intro : il n'alerte de rien, il prépare — d'où le bleu de service et non
   l'orange des avertissements de réservation. */
.corresp{display:flex;gap:.7rem;align-items:flex-start;margin:1rem 0 0;
  padding:.75rem .9rem;border-left:3px solid var(--acc,#0d6e82);
  background:#f2f8fa;border-radius:0 6px 6px 0}
.corresp-ico{flex:0 0 auto;font-size:1.05rem;line-height:1.5;color:var(--acc,#0d6e82)}
.corresp p{margin:0;font-size:.94rem;line-height:1.5}
.corresp a{font-weight:600;white-space:nowrap}

/* ===========================================================================
   LA PAGE PAYS — « ferry entre le Danemark et la Norvège ».

   Une page de DÉCISION, pas de consultation : le lecteur arrive sans savoir
   quel port existe, et repart avec un nom de liaison. La hiérarchie visuelle
   suit ça — le verdict en premier et en gros, les cartes ensuite, la prose
   après, les encarts marchands en bas. Personne ne scrolle pour trouver une
   réponse qu'on pouvait donner en haut.
   =========================================================================== */
.pays{max-width:52rem}
.pays-h1{margin:.4rem 0 .2rem;line-height:1.15}
.pays-h1-sub{display:block;font-size:.58em;font-weight:500;color:var(--mut,#5a6a70);margin-top:.35rem}
.pays-lede{font-size:1.06rem;line-height:1.65;margin:.9rem 0 1.6rem}
.pays-sec{margin:2.2rem 0}
.pays-sec h2,.pays-verdict h2,.pays-lignes h2{font-size:1.28rem;margin:0 0 .8rem}
.pays-sec p{line-height:1.65;margin:0 0 .85rem}

/* Le verdict. Deux colonnes sur grand écran, empilé au doigt. */
.pays-verdict{margin:0 0 2.2rem;padding:1rem 1.1rem;border-radius:10px;
  background:#f2f8fa;border:1px solid #d9e8ec}
.pays-verdict dl{margin:0}
.pv-row{display:grid;grid-template-columns:15rem 1fr;gap:.3rem 1.2rem;
  padding:.7rem 0;border-top:1px solid #dde9ec}
.pv-row:first-child{border-top:0;padding-top:.2rem}
.pv-row dt{font-weight:600;line-height:1.4}
.pv-row dd{margin:0;line-height:1.5}
.pv-go{display:block;font-weight:700}
.pv-why{display:block;font-size:.93rem;color:var(--mut,#5a6a70);margin-top:.15rem}

/* Les cartes de liaison. */
.pl-grid{list-style:none;margin:0;padding:0;display:grid;gap:.9rem;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.pl-card{border:1px solid #dfe6e8;border-radius:10px;padding:.95rem 1.05rem;background:#fff}
.pl-card h3{margin:0 0 .15rem;font-size:1.06rem}
.pl-op{margin:0 0 .6rem;font-size:.86rem;color:var(--mut,#5a6a70)}
.pl-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .65rem;padding:0}
.pl-chips li{font-size:.82rem;padding:.16rem .5rem;border-radius:999px;
  background:#eef4f6;color:#2b4147;white-space:nowrap}
.pl-chips .pl-prix{background:#e7f3ea;color:#1f5130;font-weight:600}
.pl-intro{margin:0 0 .85rem;font-size:.94rem;line-height:1.55}
.pl-liens{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.pl-fiche,.pl-resa{font-size:.9rem;padding:.42rem .8rem;border-radius:7px;
  text-decoration:none;font-weight:600;white-space:nowrap}
.pl-fiche{border:1px solid var(--acc,#0d6e82);color:var(--acc,#0d6e82)}
.pl-resa{background:var(--acc,#0d6e82);color:#fff}

/* Les deux encarts marchands, volontairement plus sobres que sur une fiche :
   ici le lecteur choisit encore son bateau, il n'en est pas à réserver un lit. */
.pd-grid,.pf-grid{list-style:none;margin:0;padding:0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.pd-card a,.pf-card a{display:block;border:1px solid #dfe6e8;border-radius:10px;
  overflow:hidden;text-decoration:none;color:inherit;height:100%}
.pd-card img,.pf-card img{width:100%;height:9.5rem;object-fit:cover;display:block}
.pd-card strong,.pf-card strong{display:block;padding:.6rem .75rem .1rem;font-size:.97rem}
.pd-loc,.pf-loc,.pd-note,.pf-note,.pd-prix,.pf-prix{display:block;padding:0 .75rem .15rem;font-size:.86rem}
.pd-loc,.pf-loc{color:var(--mut,#5a6a70)}
.pd-prix,.pf-prix{padding-bottom:.7rem;font-weight:600}
.pd-all{margin:.8rem 0 0;text-align:center}

.pays-faq details{border-top:1px solid #e2e9eb;padding:.65rem 0}
.pays-faq summary{cursor:pointer;font-weight:600;line-height:1.45}
.pays-faq details p{margin:.55rem 0 0;line-height:1.6}

@media(max-width:640px){
  .pv-row{grid-template-columns:1fr;gap:.15rem}
  .pays-h1-sub{font-size:.66em}
}
/* La ville d'arrivée, au-dessus du nom de l'excursion : sur une page qui
   compare cinq bateaux, savoir OÙ l'on ferait cette sortie est la moitié de
   l'information. */
.pf-via{display:block;padding:.55rem .75rem 0;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--acc,#0d6e82)}
.pf-card strong{padding-top:.2rem}
/* « Comment venir » sur une page ville : même liste que les cas d'usage, mais
   posée juste sous l'intro, avant les ferries — l'ordre des questions du
   lecteur, pas l'ordre de nos données. */
.pv-venir{margin:0 0 1.4rem}

/* ===========================================================================
   LE SOMMAIRE DE LA FICHE (.fsom)

   Posé entre le récapitulatif et le bloc logement, à la demande de Vincent le
   27 septembre 2026. Son seul travail est de dire « il y a autre chose plus
   bas » à quelqu'un qui reste 75 secondes sur un téléphone.

   Premier jet refusé, et à raison : c'était une rangée de pastilles turquoise
   PLEINES, soit exactement la couleur du bouton de réservation (qui disait
   alors « Réserver ma traversée », renommé « Réserver le ferry » le 28).
   Cinq faux boutons de réservation, sans titre, alors que tous les autres
   blocs de la page en portent un. « C'est pas clair que c'est un menu. »

   D'où cette version : un cadre qui en fait un objet distinct, un libellé
   VISIBLE, et des liens soulignés — du texte, pas des boutons. Elle occupe
   une vingtaine de pixels de plus qu'une rangée qui défile, et les mérite :
   rien n'y est coupé au bord de l'écran. Un mot tronqué ne se lit pas comme
   « il y a la suite », il se lit comme un bug, et on ne clique pas dessus.

   Le fond reste très pâle, volontairement : ce bloc annonce le contenu, il ne
   doit pas voler la vedette aux deux logements qui le suivent.
   =========================================================================== */
.fsom{margin:1.1rem 0;padding:.75rem .95rem;border:1px solid #d9e2e5;
  border-radius:10px;background:#fbfcfd}
.fsom-t{margin:0 0 .5rem;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#5a6a70}
.fsom ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem}
.fsom li{flex:0 0 auto}
.fsom a{color:var(--acc,#0d6e82);font-weight:600;font-size:.95rem;
  text-decoration:underline;text-underline-offset:3px}
/* La flèche est la seule chose qui dise explicitement « c'est plus bas ». */
.fsom a::after{content:' \2193';text-decoration:none;display:inline-block;opacity:.55}

/* Sans ça, l'ancre colle le titre au bord haut de l'écran et le lecteur croit
   avoir atterri au milieu d'un paragraphe. */
.sec[id],#faire{scroll-margin-top:1.2rem}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Le triangle de « ne se réserve pas » : dessiné, pas emoji — voir le
   commentaire du gabarit. Il s'aligne comme les .ci emoji voisins. */
.ci-svg{width:.95em;height:.95em;vertical-align:-.12em;margin-right:.3rem;opacity:.75}


/* ===========================================================================
   LA CARTE D'UNE TRAVERSÉE (.ctr) — voir CarteTrajet.astro.
   La hauteur est posée AVANT le chargement : sinon l'arrivée de la carte
   pousse tout le bas de la page et produit le décalage de mise en page que
   Google mesure et que le lecteur déteste.
   =========================================================================== */
.ctr{margin:.2rem 0 1rem}
.ctr-box{height:320px;border-radius:10px;overflow:hidden;border:1px solid #dfe6e8;
  background:#eef3f5;display:flex;align-items:center;justify-content:center}
.ctr-attente{margin:0;font-size:.9rem;color:var(--mut,#5a6a70)}
.ctr-lien{margin:.5rem 0 0;font-size:.9rem;text-align:right}
/* Les quais : une pastille et un nom, sans la bulle par défaut de Leaflet. */
.ctr-quai{background:none;border:0;white-space:nowrap}
.ctr-pt{display:inline-block;width:11px;height:11px;border-radius:50%;
  background:#0d6e82;border:2.5px solid #fff;box-shadow:0 0 0 1px #0d6e82;
  vertical-align:middle}
.ctr-nom{display:inline-block;margin-left:.3rem;font-size:.8rem;font-weight:700;
  color:#123;background:rgba(255,255,255,.88);padding:.05rem .3rem;border-radius:4px;
  vertical-align:middle}
@media(max-width:640px){.ctr-box{height:260px}}

/* ===========================================================================
   ⚠️ PAS DE MODE SOMBRE SUR CE SITE — et ne pas en réintroduire par habitude.

   Le 28 septembre 2026, Vincent : « pourquoi le menu est si moche ? ce n'était
   pas comme ça sur les maquettes ! ». Le sommaire s'affichait en sombre au
   milieu d'une page claire.

   Cause : j'avais ajouté quatre blocs `@media (prefers-color-scheme: dark)` en
   écrivant le bandeau de correspondance, la page pays, le sommaire et la carte
   — un réflexe d'hygiène, appliqué sans vérifier. Or ce site n'a JAMAIS eu de
   mode sombre : ces quatre blocs étaient les seuls du fichier. Résultat, chez
   tout visiteur dont le système est en sombre — c'est-à-dire une bonne part des
   73 % qui viennent du téléphone — quatre îlots noirs apparaissaient sur une
   page restée blanche. Les maquettes, elles, étaient rendues en clair : c'est
   pour ça qu'elles ne montraient rien.

   La leçon est plus large qu'un réglage de couleurs : une amélioration qui
   n'existe qu'à moitié est pire que son absence. Tant que le site entier n'a
   pas de thème sombre — variables de couleur comprises — aucun composant ne
   doit en avoir un pour lui tout seul.
   =========================================================================== */