/* okc-v2 — styles PROPRES à okcroisiere : moteur d'entrée, résultats, facettes,
   devis. Le design system (tokens, base, boutons, header, héros, cartes, pied
   de page) vient de theme.css, importé de cruiseship.
   Ordre de chargement : Bootstrap 5 -> theme.css -> ce fichier. */
:root{
  /* Alias vers les tokens du thème : toutes les règles ci-dessous continuent
     d'utiliser --brand / --brand-d et adoptent l'identité importée sans être
     réécrites une à une. --ink, --muted, --line, --bg viennent du thème. */
  /* La charte n'a QU'UN orange : #ff6300. --orange-600 (#e65900) n'est PAS une
     couleur de la charte, c'est uniquement l'état survolé d'un fond orange.
     Il ne doit jamais servir à colorer du texte. */
  --brand:var(--orange);
  --brand-d:var(--orange);
  --success:#12924e;
  --success-bg:#e7f8ef;
  /* Filet de separation INTERNE a un bloc : nettement plus clair que --line,
     qui borde les composants. Il structure la lecture sans dessiner de cadre. */
  --line-soft:#f1f1f5;
}
/* Largeur du thème (1180px), en conservant le rythme vertical d'okc-v2.
   Le centrage et le padding horizontal viennent de Bootstrap. */
.container{margin-block:2rem}
/* Un .container placé DANS un héros ne doit pas porter ce rythme vertical :
   sa marge haute s'échappe du bloc (fusion des marges) et dessine une bande
   blanche au-dessus du héros sombre. C'est le cas des vues importées, dont le
   héros contient un `.container py-5`. */
.hero > .container,
.reviews-hero > .container,
.ship-hero > .container,
.home-hero > .container{margin-block:0}
/* ---- Header ----
   PLEINE LARGEUR sur desktop (pas de .container) : le header sert de barre
   d'outils du site, il occupe donc tout l'écran, contrairement au contenu qui
   reste dans la largeur de lecture.
   Quatre ZONES distinctes, séparées par un filet : marque · navigation ·
   actions · téléphone. La navigation absorbe l'espace libre, les trois autres
   gardent leur taille propre. */
/* Bandeau de réassurance : volontairement DISCRET. Fond noir, texte petit et
   en gris clair, séparateurs fins. Il informe sans rivaliser avec la marque ni
   avec les CTA — c'est ce qui lui permet de tenir dans le header sans bruit.
   Seules les icônes sont en orange, pour l'accroche du regard. */
.hd-trust{background:var(--black);color:rgba(255,255,255,.72)}
.hd-trust-list{display:flex;align-items:center;justify-content:center;gap:0;
  list-style:none;margin:0;padding:.3rem 1.25rem;font-size:.74rem;font-weight:600;
  font-family:var(--font-head);flex-wrap:wrap}
.hd-trust-list li{display:inline-flex;align-items:center;gap:.4rem;padding:0 1rem;white-space:nowrap}
.hd-trust-list li + li{border-left:1px solid rgba(255,255,255,.18)}
.hd-trust-list i{color:var(--orange);font-size:.82rem}
@media(max-width:560px){
  /* Sur mobile on garde l'argument le plus fort plutôt que d'empiler trois
     lignes au-dessus du logo. */
  .hd-trust-list li:not(:first-child){display:none}
  .hd-trust-list li{border:0}
}

.hd-bar{display:flex;align-items:stretch;gap:0;padding:0 1.25rem;margin-block:0;width:100%}
.hd-zone{display:flex;align-items:center;padding-block:.5rem}
.hd-zone + .hd-zone{border-left:1px solid var(--line);padding-left:1.25rem;margin-left:1.25rem}

.hd-zone--nav{flex:1;gap:1rem;font-weight:600;font-family:var(--font-head);font-size:.92rem;
              flex-wrap:wrap;min-width:0}
.hd-zone--cta{gap:.6rem;flex:none}
/* La zone téléphone empile numéro puis horaires, centrés l'un sur l'autre. */
.hd-zone--phone{flex:none;flex-direction:column;align-items:center;justify-content:center;gap:.05rem}
/* ---- CHARTE DES CTA -------------------------------------------------------
   Deux styles STRICTEMENT inverses l'un de l'autre. Au survol, chacun prend
   l'apparence de l'autre : c'est ce qui les fait lire comme une paire.

     plein   : fond orange, texte blanc  -> survol : fond blanc, texte orange
     inverse : fond blanc, texte orange  -> survol : fond orange, texte blanc

   Bordure orange de 2px des DEUX côtés : le bouton ne change pas de taille au
   survol. Aucun `--orange-600` ici : la charte n'a qu'un orange, et le survol
   s'exprime par l'inversion, pas par un ton plus foncé. */
.btn-primary,.btn-orange,.btn-accent,.m-submit,.cta-plein,
.cc-btn,.pa-apply,.dv-choose-cheapest,.dv-aside-cta,.dv-modal-submit{
  background:var(--orange);border:2px solid var(--orange);color:#fff;
  font-family:var(--font-head);font-weight:700;border-radius:var(--radius-sm);
  transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.btn-primary:hover,.btn-orange:hover,.btn-accent:hover,.m-submit:hover,.cta-plein:hover,
.cc-btn:hover,.pa-apply:hover,.dv-choose-cheapest:hover,.dv-aside-cta:hover:not(:disabled),.dv-modal-submit:hover,
.btn-primary:focus-visible,.m-submit:focus-visible{
  background:#fff;border-color:var(--orange);color:var(--orange)}

.nav-signin,.cta-inverse{
  display:inline-flex;align-items:center;white-space:nowrap;
  background:#fff;border:2px solid var(--orange);color:var(--orange);
  font-family:var(--font-head);font-weight:700;border-radius:var(--radius-sm);
  transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.nav-signin:hover,.cta-inverse:hover,.nav-signin:focus-visible{
  background:var(--orange);border-color:var(--orange);color:#fff}

/* Les deux CTA du header : même taille, pour qu'ils se répondent.
   `nowrap` indispensable — sans lui « Écrire un avis » se casse sur trois
   lignes dès que la place manque et fait grandir tout le header. */
.nav-signin{font-size:.85rem;padding:.4rem .9rem;white-space:nowrap;line-height:1.4}

/* :not(.btn) — sans quoi cette règle (0-1-1) l'emporte sur `.btn-primary`
   (0-1-0) et repeint le CTA du header en texte sombre. Les boutons de la nav
   suivent la charte CTA, pas le style des liens. */
.hd-zone--nav a{color:var(--ink);white-space:nowrap}
.hd-zone--nav a:hover{color:var(--orange)}
.hd-zone--nav a.is-active{color:var(--orange);box-shadow:inset 0 -2px 0 var(--orange)}
/* Landing sans contenu : on ne fait pas semblant, on le dit. */
.landing-blank{border:1px dashed var(--line);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--muted)}
/* Téléphone : l'action de contact, donc traitée comme telle (orange, lisible). */
.hd-phone{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);line-height:1.15}
.hd-phone:hover{color:var(--orange)}
.hd-phone .fa-phone{color:var(--orange);font-size:1.05rem}
.hd-phone-num{font-family:var(--font-head);font-weight:800;font-size:1.05rem;white-space:nowrap}
/* Centré sous l'ensemble « icône + numéro », pas seulement sous le numéro. */
.hd-phone-hours{display:block;color:var(--muted);font-size:.72rem;font-weight:600;
                text-align:center;white-space:nowrap}

/* ---- Menu mobile ----
   Le burger n'apparaît QUE lorsque la navigation se replie : au-dessus, il
   ferait doublon avec des liens déjà visibles. */
.hd-burger{display:none;background:none;border:0;color:var(--ink);font-size:1.25rem;
  padding:.25rem .55rem .25rem 0;line-height:1;cursor:pointer}
.hd-burger:hover{color:var(--orange)}
.menu-drawer{width:min(88vw,340px)}
.menu-drawer-nav{display:flex;flex-direction:column}
.menu-drawer-nav a{display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--font-head);font-weight:700}
.menu-drawer-nav a:hover{color:var(--orange)}
.menu-drawer-nav a.is-active{color:var(--orange)}
.menu-drawer-nav i{font-size:.75rem;color:var(--muted)}
.menu-drawer-phone{display:flex;align-items:center;gap:.7rem;margin-top:1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--line);color:var(--ink)}
.menu-drawer-phone i{color:var(--orange);font-size:1.1rem}
.menu-drawer-phone strong{display:block;font-family:var(--font-head);font-size:1.1rem}
.menu-drawer-phone small{color:var(--muted);font-size:.75rem;font-weight:600}

@media(max-width:1080px){
  .hd-zone--nav{display:none}
  .hd-burger{display:inline-flex;align-items:center}
  /* La navigation portait `flex:1` : en la masquant, plus rien ne poussait
     les actions et le telephone vers la droite. `margin-left:auto` sur la
     zone d actions ne suffisait PAS, `.hd-zone + .hd-zone` (0-2-0) ecrasant
     sa marge (0-1-0). Mesure a 912 px : tout etait tasse a gauche et il
     restait 195 px de vide a droite de l ecran.
     C est donc la zone de marque qui prend la place libre, comme deja fait
     sous 620 px : actions et telephone se calent a droite, le numero au
     bord. */
  .hd-zone--brand{flex:1}
}
@media(max-width:860px){
  .hd-phone-hours{display:none}
  .hd-zone + .hd-zone{padding-left:.8rem;margin-left:.8rem}
  .hd-bar{padding-inline:.8rem}
}
@media(max-width:620px){
  /* Le header mobile doit dire d'abord QUI on est et COMMENT nous joindre.
     Les deux boutons d'action partent donc entièrement : ils sont déjà repris
     l'un et l'autre dans le menu, on ne perd rien. « Écrire un avis » occupait
     138 px des 375 de la barre, et c'est le mot « okcroisiere » qui était
     sacrifié pour le loger. */
  /* TROIS ICÔNES ET RIEN D'AUTRE : notifications, compte, téléphone.
     La version précédente masquait toute la zone d'actions, ce qui emportait
     la cloche — or **le seul rôle d'une cloche est d'être VUE** : rangée dans
     un tiroir fermé elle ne signale plus rien, et personne ne va vérifier une
     page au cas où. Le compte suit le même raisonnement, c'est le point
     d'entrée de l'espace membre.
     Seul « Écrire un avis » part : il est repris dans le tiroir, et c'est le
     seul des trois dont le libellé ne se remplace pas par une icône (une
     étoile ou un stylo seuls se lisent « noter » ou « favori »). */
  .hd-zone--cta{display:flex;gap:0}
  /* LE MÊME FILET QU'ENTRE LES ZONES, et pour la même raison : le compte
     (l'avatar) se sépare des icônes comme le téléphone — des actions de même
     rang se séparent pareil. (Les règles `nav-signin` de la barre sont parties
     avec le bouton à texte, remplacé par l'avatar.) */
  .hd-zone--cta .hd-compte{border-left:1px solid var(--line);padding-left:.8rem;margin-left:.8rem}
  /* LE NUMÉRO PASSE EN ICÔNE. Écrit en toutes lettres il prend 140 px des
     375 d'un téléphone, soit plus que les trois icônes réunies — et sur un
     téléphone le numéro n'a pas à être LU, il a à être APPELÉ : l'icône
     déclenche exactement la même chose. Cible de 44 px, le minimum tactile. */
  .hd-phone-num,.hd-phone-hours{display:none}
  /* LES TROIS ICÔNES À LA MÊME TAILLE, ET C'EST 44 px : mesurées avant
     harmonisation, la cloche faisait 37x37 et le compte 37x33, sous le minimum
     tactile. Trois pastilles de tailles différentes se lisent en plus comme
     trois éléments sans rapport, alors qu'elles forment le bloc d'actions. */
  /* PRÉFIXÉES PAR `.hd-bar` (0-2-0) ET NON À NU (0-1-0) : `.hd-cloche{width:2.3rem}`
     est déclarée BEAUCOUP PLUS BAS dans ce fichier et l'emportait à spécificité
     égale, la cloche restant à 37 px quand les deux autres passaient à 44.
     Piège déjà rencontré sur le fond de carte Leaflet : à égalité, c'est le
     dernier déclaré qui gagne, et une règle responsive écrite en tête de
     fichier perd contre une règle de composant écrite en fin. */
  .hd-bar .hd-cloche,.hd-bar .hd-phone{
    width:44px;height:44px;min-height:44px;padding:0;
    display:grid;place-items:center;border-radius:10px}
  /* L'avatar aussi : 40 px partout ailleurs, 44 ici — le minimum tactile. */
  .hd-bar .hd-avatar{width:44px;height:44px}
  .hd-bar .hd-cloche i,.hd-bar .hd-phone i{
    font-size:1.05rem;margin:0!important}
  .hd-zone--phone{padding-left:.35rem;margin-left:.35rem}
  /* La marque prend la place rendue. Le filet de séparation tient toujours :
     `.hd-zone + .hd-zone` continue de s'appliquer. */
  .hd-zone--brand{flex:1}
}
@media(max-width:480px){ .hd-phone-num{font-size:.95rem} }
@media(max-width:620px){
  /* LA BARRE DEMANDAIT 416 px POUR 375 : marque (147 px incompressibles, le
     nom ne se coupe pas) + les icônes de 44 + filets. Elle débordait à
     droite — sur TOUTES les pages, et ça se voyait d'abord dans l'espace
     membre. On récupère la place sur le logo et les filets, JAMAIS sur les
     44 px tactiles des icônes. Le seuil est CELUI DE LA BARRE D'ICÔNES
     (620), pas un chiffre à part : compression arrêtée à 430 quand le
     masquage du nom commençait à 430, la fenêtre 431-470 débordait de
     48 px — deux seuils qui se touchent sans se recouvrir laissent un trou. */
  .brand-name{font-size:1.05rem}
  .brand-waves{width:26px;height:26px;font-size:.75rem}
  .hd-zone + .hd-zone{padding-left:.45rem;margin-left:.45rem}
  .hd-zone--cta .hd-compte{padding-left:.45rem;margin-left:.45rem}
  .hd-bar{padding-inline:.6rem}
}
@media(max-width:440px){
  /* AVEC L'ICÔNE DES RENCONTRES, LA BARRE PORTE CINQ CIBLES DE 44 px : même
     compressé, le nom de la marque ne tient plus à côté (40 px de débordement
     mesurés à 390). Il cède dès 430 : la pastille à vagues orange reste,
     c'est elle l'identité visuelle, et le nom reste lu par les lecteurs
     d'écran. Les 44 px tactiles, eux, ne se négocient jamais. */
  .brand-name{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
}
@media(max-width:380px){
  /* Dernier cran (320 de large) : les filets se resserrent encore. La page de
     résultats est la plus chargée de la barre, c'est elle qui fixe la borne. */
  .hd-zone + .hd-zone{padding-left:.14rem;margin-left:.14rem}
  .hd-zone--cta .hd-compte{padding-left:.14rem;margin-left:.14rem}
  .hd-bar{padding-inline:.3rem}
}
@media(max-width:400px){
  /* On rétrécit AVANT de retirer. La taille se pose sur `.brand-name` et non
     sur `.brand` : theme.css applique au mot un `em` multiplicateur, si bien
     qu'agir sur le parent ne le faisait pas bouger (21,12 px calculés, 112 px
     de large). Ciblé directement, il tombe à 85 px.
     Besoin total : 26 (burger) + 28 (pictogramme) + 8 + 85 (mot) + 26 (filet)
     + 140 (téléphone) = 313 px, soit une fenêtre de 338 px minimum. */
  .brand-name{font-size:1rem}
  .hd-phone-num{font-size:.9rem}
}
@media(max-width:340px){
  /* Sous 338 px le mot ne tient plus avec le numéro : la marque se replie sur
     son seul pictogramme, le téléphone restant prioritaire. */
  .brand-name{display:none}
}

.brand{font-size:1.15rem}
.brand-icon{width:28px;height:28px;object-fit:contain;display:block}
.site-footer .brand-icon{filter:invert(1)}   /* le logo est noir : lisible sur le pied de page sombre */
.brand-name{font-family:var(--font-head);font-weight:800;letter-spacing:-.02em}
.brand-name b{color:var(--orange);font-weight:800}

/* ---- Moteur d'entrée ---- */
/* Héros : noir plat + accent orange, comme le thème (les héros de cruiseship).
   theme.css impose h1{color:var(--ink)} : sans la règle explicite ci-dessous, le
   titre s'affiche en sombre sur fond sombre et devient illisible. */
/* L'accent orange est un DÉGRADÉ DE FOND, pas un pseudo-élément débordant :
   il n'exige donc aucun overflow:hidden sur le héros. C'est important, car
   overflow:hidden tronquait les panneaux du moteur (suggestion, calendrier),
   qui débordent volontairement sous le héros. */
.hero{background:radial-gradient(circle at 88% 6%,rgba(255,99,0,.13) 0 260px,transparent 261px),var(--black);color:#fff;padding:3.5rem 1.2rem;position:relative}

/* Héros d'accueil : photo + voile sombre, comme la home de cruiseship. Le voile
   n'est pas décoratif, c'est lui qui garantit le contraste du titre et surtout
   la lisibilité des libellés du moteur posé par-dessus. */
.hero--home{
  /* Voile identique à celui de la home cruiseship (.74 -> .88) : c'est lui qui
     donne la profondeur et tient le contraste du titre comme du moteur.
     Le cadrage 45 % garde la passagère visible malgré cette densité. */
  background:
    linear-gradient(rgba(16,16,20,.74),rgba(16,16,20,.88)),
    url('../img/hero-croisiere.webp') center 45%/cover no-repeat,
    var(--black);
  padding:4.5rem 1.2rem 5.5rem;
  /* Héros plus haut : en « cover », plus la hauteur est grande, plus on voit
     de l'image en vertical. C'est ce qui rend la passagère visible en entier. */
  min-height:clamp(560px,76vh,780px);
  display:flex;align-items:center;
}
.hero--home .hero-inner{width:100%}
/* En écran étroit, « cover » rogne sur la LARGEUR et la passagère (à droite)
   sortirait du cadre : on décale le point d'ancrage vers elle. */
@media(max-width:820px){ .hero--home{background-position:center,72% 45%} }
.hero--home .hero-sub{max-width:58ch;margin-inline:auto}
/* Sur une photo, le panneau translucide devient illisible : on le densifie. */
.hero--home .moteur{background:rgba(16,16,20,.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}
@media(max-width:640px){ .hero--home{padding:2.75rem 1rem 3.25rem;min-height:auto} }

/* ---- Mise en avant des panneaux du moteur ----
   Le moteur doit passer AU-DESSUS de la bande KPI (z-index:3), sinon ses
   panneaux ouverts glissent dessous. `backdrop-filter` sur .moteur crée un
   contexte d'empilement : ses panneaux ne peuvent pas en sortir, c'est donc
   .moteur lui-même qu'il faut élever. */
.moteur{z-index:20}
/* Panneau ouvert : on éteint la page derrière et on remonte le moteur au-dessus
   du voile (et du header collant, z-index 1020 côté Bootstrap). */
body.m-open .moteur{z-index:1040}
.m-overlay{position:fixed;inset:0;background:rgba(16,16,20,.66);z-index:1030;
           opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s}
body.m-open .m-overlay{opacity:1;visibility:visible}
/* Bordure franche : le panneau se détache du fond photo comme du voile. */
.dest-panel,.when-pop,.duree-panel{border:3px solid var(--orange)}
@media(prefers-reduced-motion:reduce){ .m-overlay{transition:none} }

/* ---- Chiffres du catalogue (preuve de richesse, sous le moteur) ----
   Remontés sur le bord du héros : la bande chevauche la photo, ce qui la rend
   proéminente et fait le lien visuel entre le moteur et la donnée. */
.kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:-3.25rem;margin-bottom:2.5rem;position:relative;z-index:3}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.15rem .75rem;text-align:center;
     box-shadow:0 10px 30px rgba(16,16,20,.10);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.kpi:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(16,16,20,.16);border-color:var(--orange)}
.kpi__ico{width:40px;height:40px;margin:0 auto .55rem;border-radius:12px;display:grid;place-items:center;
          background:var(--orange-050);color:var(--orange);font-size:1.05rem;transition:transform .25s ease}
.kpi:hover .kpi__ico{transform:scale(1.12) rotate(-6deg)}
.kpi__val{font-family:var(--font-head);font-weight:800;font-size:1.6rem;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi__label{font-size:.76rem;color:var(--muted);margin-top:.2rem;line-height:1.25}

/* Apparition en cascade, déclenchée au scroll par site.js */
.kpi-row.is-armed .kpi{opacity:0;transform:translateY(14px)}
.kpi-row.is-in .kpi{opacity:1;transform:none;transition:opacity .5s ease calc(var(--kpi-i) * 70ms),transform .5s ease calc(var(--kpi-i) * 70ms)}

@media(max-width:1100px){ .kpi-row{grid-template-columns:repeat(3,1fr)} }
@media(max-width:640px){
  .kpi-row{grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:-2rem}
  .kpi__val{font-size:1.3rem}
}
/* Respect du réglage système : pas d'animation imposée. */
@media(prefers-reduced-motion:reduce){
  .kpi,.kpi__ico{transition:none}
  .kpi-row.is-armed .kpi{opacity:1;transform:none}
}
/* PAS de z-index ici : il créerait un contexte d'empilement qui enfermerait le
   moteur (et ses panneaux) sous la bande KPI et sous le voile. L'accent orange
   du héros étant un dégradé de fond, aucun z-index n'est nécessaire. */
.hero-inner{max-width:960px;margin:0 auto;text-align:center;position:relative}
.hero h1{color:#fff;font-size:clamp(2rem,5vw,3rem);margin:0 0 .4rem}
.hero-sub{color:rgba(255,255,255,.72);margin:0 0 1.5rem}
.moteur{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.08);padding:1rem;border-radius:14px}
.m-field{display:flex;flex-direction:column;text-align:left;flex:1;min-width:180px}
/* `> label` et non `label` : la regle visait TOUS les labels du champ, donc
   aussi les 54 lignes a cocher des panneaux, qui heritaient de la casse, de
   la taille .75rem et de l opacite .85 des petites etiquettes du moteur.
   L arbre des destinations s en trouvait tout en capitales, delave, et sa
   hierarchie inversee : le bassin tombait a 12 px quand sa region, qui pose
   sa propre taille, restait a 14,4. */
.m-field > label{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;opacity:.85;margin-bottom:.25rem}
.m-field select,.m-field input{padding:.7rem;border:0;border-radius:8px;font-size:1rem}
/* Le fond, la bordure et le survol viennent de la charte CTA ci-dessus ;
   ici on ne règle que la taille et l'alignement dans le moteur. */
.m-submit{align-self:flex-end;padding:.72rem 1.4rem;font-size:1rem}
.hero-links{margin-top:1rem}.hero-links a{color:#fff}

/* ---- Layout résultats ---- */
.results-wrap{display:grid;grid-template-columns:320px 1fr;gap:1.5rem;max-width:1560px;margin:1.2rem auto;padding:0 1.2rem}
.results-col{min-width:0}
/* ---- ETAT DE LA RECHERCHE ----
   Ce qu on a trouve, dans quel ordre, a quelles conditions : ces trois choses
   repondent a la meme question et forment donc UN bloc, au lieu de flotter
   separement au-dessus des resultats. */
.results-head{border:1px solid var(--line);border-radius:12px;background:#fff;
  margin:0 0 1rem;box-shadow:0 1px 2px rgba(20,22,26,.04)}
.results-bar{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:.7rem 1rem}

/* Le nombre porte la reponse : il prend la taille d un titre, l unite reste
   discrete derriere lui. */
.results-count{margin:0;font-size:.95rem;color:var(--muted);display:flex;
  align-items:baseline;gap:.4rem;flex-wrap:wrap}
.results-count strong{font-family:var(--font-head);font-size:1.5rem;font-weight:800;
  color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.results-total{font-size:.85rem;color:var(--muted)}
.results-total[hidden]{display:none}

/* Tri : le `select` reste NATIF (clavier, mobile, lecteurs d ecran), on ne
   remplace que son habillage. `appearance:none` retire le chevron du systeme,
   qu on redessine pour qu il suive la charte au lieu de celle du navigateur. */
.sort{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--muted)}
.sort-lbl{flex:0 0 auto}
.sort-field{position:relative;display:inline-flex;align-items:center}
.sort-field i{position:absolute;right:.7rem;pointer-events:none;font-size:.7rem;color:var(--muted)}
.sort select{appearance:none;-webkit-appearance:none;
  padding:.45rem 2rem .45rem .8rem;border:1px solid var(--line);border-radius:20px;
  background:#fff;color:var(--ink);font-family:inherit;font-size:.88rem;font-weight:600;
  cursor:pointer;transition:border-color .15s}
.sort select:hover{border-color:var(--orange)}
.sort select:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
/* ---- FILTRES ACTIFS ----
   Separes du compteur par un filet, dans le meme bloc : c est la condition du
   resultat affiche au-dessus. */
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  padding:.6rem 1rem;border-top:1px solid var(--line-soft)}
.active-filters[hidden]{display:none}

/* Chaque pastille est un BOUTON qui retire son filtre : la croix doit se voir
   comme telle, d ou le rond qui s allume au survol. Six pastilles identiques
   formaient sinon une masse ou rien ne se distinguait, et ou l on ne devinait
   pas qu elles etaient cliquables. */
.chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--orange-050);
  border:1px solid #ffd9c2;color:var(--brand-d);border-radius:20px;
  padding:.28rem .35rem .28rem .75rem;font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:border-color .15s}
.chip:hover{border-color:var(--orange)}
.chip i{font-size:.72rem;opacity:.8}
.chip-x{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:.62rem;line-height:1;
  background:rgba(255,99,0,.12);transition:background .15s,color .15s}
.chip:hover .chip-x{background:var(--orange);color:#fff}

/* « Tout effacer » n est pas un filtre : il ne prend donc pas la forme d une
   pastille, et se decale a droite pour qu on ne le clique pas par megarde en
   visant la derniere. */
.chip-clear-all{margin-left:auto;background:none;border:0;padding:.3rem .2rem;
  color:var(--muted);font-family:inherit;font-size:.82rem;font-weight:600;
  text-decoration:underline;cursor:pointer;flex:0 0 auto}
.chip-clear-all:hover{color:var(--orange)}
/* Compteur de filtres actifs, en pastille : « (3) » entre parentheses se
   confondait avec le texte qui le precede. Vide, il ne prend aucune place. */
.ft-badge,.ft-count{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 .4rem;border-radius:20px;
  background:var(--orange);color:#fff;font-size:.78rem;font-weight:800;
  font-variant-numeric:tabular-nums}
.ft-badge:empty,.ft-count:empty{display:none}


/* ---- COLONNE PRIX : trois groupes hiérarchisés ----------------------------
   Avant, tout était empilé au même niveau (même gris, même taille, aucun
   séparateur) : le prix au jour se noyait et la mention de paiement flottait.
   On distingue désormais ce qu'on paie, ce qui sert à comparer, et comment on
   l'étale — chacun avec son propre traitement. */
.cc-cta{padding:.9rem .8rem;border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:stretch;gap:.5rem;text-align:center}

/* 1. Le prix. Le libellé passe AU-DESSUS : on lit « à partir de » puis le
      montant, dans l'ordre de la phrase. */
.cc-price{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.15}
.cc-price-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cc-amount{font-family:var(--font-head);font-size:2rem;font-weight:800;color:var(--orange);
  white-space:nowrap;line-height:1.1}
.cc-unit{font-size:.72rem;color:var(--muted)}

/* 2. Le repère de comparaison, isolé en pastille : c'est ce qui permet de
      départager deux croisières, il ne doit pas se lire comme une note. */
.cc-unit-price{align-self:center;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:.15rem .6rem;font-size:.78rem;font-weight:700;color:var(--ink);
  white-space:nowrap}

/* 3. Le paiement fractionné, separé par un filet : autre nature d'information. */
.cc-pay{border-top:1px solid var(--line);padding-top:.5rem;display:flex;
  flex-direction:column;align-items:center;gap:.25rem}
.cc-pay-txt{font-size:.74rem;color:var(--muted);white-space:nowrap}
.cc-pay-txt strong{color:var(--ink);font-weight:700}
.cc-pay-logo{height:16px;width:auto;display:block}

.cc-vol{font-size:.74rem;color:var(--muted)}
.cc-vol i{color:var(--orange)}
.cc-vol strong{color:var(--ink)}

.cc-cta form{margin-top:auto}
.cc-cta .cc-urgence{margin-top:auto}
.cc-cta .cc-urgence + form{margin-top:.15rem}

/* Rarete : sobre volontairement. Rouge vif, compte a rebours et clignotement
   sont des procedes de pression ; ici on enonce un fait verifiable. Le signal ne
   s'affiche que sur 5 a 8 % des cartes : c'est sa rarete qui le rend visible,
   pas sa couleur. */
/* align-self : .cc-body est un conteneur flex en colonne, qui etire ses enfants
   sur toute la largeur ; sans ca la pastille devient un bandeau pleine largeur. */
/* Signal de rarete, dans la colonne prix juste avant le bouton : c'est le
   dernier argument lu avant de cliquer. Rouge plein, texte et icone en blanc :
   il ne s'affiche que sur 5 a 8 % des barrettes, et un garde-fou l'eteint quand
   il deborde 40 % d'une page (cf. SearchService::attachScarcity). C'est cette
   rarete qui autorise un traitement aussi appuye. */
.cc-urgence{display:flex;align-items:center;justify-content:center;gap:.4rem;margin:0;
  font-size:.78rem;font-weight:700;color:#fff;background:#c0271c;
  border-radius:8px;padding:.4rem .6rem;text-align:center;line-height:1.2}
.cc-urgence i{color:#fff;font-size:.82rem;flex:0 0 auto}
.cc-urgence i{font-size:.68rem;color:var(--orange)}
/* Avantages de l'offre, dans la colonne prix. Liste a puces cochees sur fond
   orange pale : lisible d'un coup d'oeil et rattachee visuellement au montant,
   au lieu des puces grises noyees sous les caracteristiques du voyage. */
.cc-perks{list-style:none;margin:0;padding:.4rem .5rem;display:flex;flex-direction:column;gap:.15rem;
  background:var(--orange-050);border-radius:var(--radius-sm);text-align:left}
.cc-perks li{display:flex;align-items:flex-start;gap:.35rem;font-size:.74rem;
  font-weight:600;color:var(--ink);line-height:1.25}
.cc-perks i{color:var(--orange);font-size:.62rem;margin-top:.28rem;flex:0 0 auto}
/* ---- Carte d'itinéraire ----
   `cover` rognait l'image : la vignette fait 300x200 (ratio 1,50) alors que la
   colonne s'étire à la hauteur de la carte (ratio ~1,04), soit 31 % de la
   largeur coupée — et davantage à mesure que la carte grandit. `contain` garde
   l'itinéraire entier, qui est la raison d'être de cette vignette. */
.cc-map img{width:100%;height:100%;object-fit:contain;object-position:center}
/* ---- Facettes ---- */
/* ---- PANNEAU DE FILTRES ----
   Meme habillage que le bloc d etat des resultats : bordure, rayon, ombre
   legere. Les deux encadrent la meme chose, les conditions de la recherche. */
.facets{border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:0 .9rem .6rem;align-self:start;box-shadow:0 1px 2px rgba(20,22,26,.04)}
.facet-clear-row{display:flex;justify-content:flex-end;margin:.1rem 0 .35rem}
.facet-clear{background:none;border:0;padding:.1rem;font-family:inherit;font-size:.78rem;
  font-weight:600;color:var(--muted);text-decoration:underline;cursor:pointer}
.facet-clear:hover{color:var(--orange)}
.facet-clear:hover{opacity:.75}
.date-range-chip{display:flex;align-items:center;gap:.4rem;background:#fff3e6;border:1px solid #f5d9bd;border-radius:8px;padding:.35rem .55rem;font-size:.82rem;margin:.4rem 0;color:var(--brand-d);font-weight:600}
.date-range-chip .drc-x{float:none;margin-left:auto;text-decoration:none;font-size:.9rem}
/* ---- DEPART ENTRE DEUX DATES ----
   Alternative aux mois, et exclusive avec eux (le JS vide l un quand on
   renseigne l autre) : d ou le « Ou » et le filet qui separe les deux.
   Les deux champs sont cote a cote et chacun porte son propre intitule ;
   « Du … au … » seul se lisait comme une duree. */
.date-precise{margin-top:.6rem;border-top:1px solid var(--line-soft);padding-top:.6rem}
.dp-lbl{display:block;font-size:.8rem;font-weight:600;color:var(--body);margin-bottom:.5rem}
/* Le calendrier du moteur, retreci pour une colonne de 300 px : flatpickr
   dimensionne ses jours en `em`, il suffit donc de reduire la taille de
   police du conteneur pour que toute la grille suive. */
.dp-cal{margin-top:.15rem}
.dp-cal .flatpickr-calendar{box-shadow:none;border:1px solid var(--line);border-radius:10px;
  width:100%;max-width:100%;font-size:.8rem}
.dp-cal .flatpickr-days,.dp-cal .dayContainer{width:100%;min-width:0;max-width:none}
.dp-cal .flatpickr-day{max-width:none;height:2.1em;line-height:2.1em;border-radius:7px}
.dp-cal .flatpickr-day.selected,.dp-cal .flatpickr-day.startRange,
.dp-cal .flatpickr-day.endRange{background:var(--orange);border-color:var(--orange)}
.dp-cal .flatpickr-day.inRange{background:var(--orange-050);border-color:var(--orange-050);
  box-shadow:-5px 0 0 var(--orange-050),5px 0 0 var(--orange-050)}
.dp-cal .flatpickr-day.today:not(.selected){border-color:var(--orange)}
/* Etat courant, en clair : « Depart le 12/03/2027 » ou « entre le … et le … ».
   Le calendrier seul ne dit pas ce qu il a retenu. */
.dp-sel{margin:0 0 .45rem;font-size:.82rem;font-weight:700;color:var(--brand-d);
  background:var(--orange-050);border-radius:7px;padding:.35rem .55rem}
.dp-hint{margin:0 0 .45rem;font-size:.78rem;color:var(--muted)}
/* `min-width:0` sur un champ date est indispensable : sa largeur intrinseque
   (jj/mm/aaaa + icone du calendrier) depasse sinon la colonne de la grille. */
/* Listes longues (>5) : limitées à 5 options + « voir plus » (pas de scroll par filtre) */
.facet-options:not(.searching) .facet-x{display:none}
.facet-more{display:block;width:100%;background:none;border:0;color:var(--brand-d);font-size:.82rem;font-weight:600;cursor:pointer;padding:.45rem 0 .2rem;text-align:left}
.facet-more:hover{text-decoration:underline}
/* En-tete collant : sur une longue liste de facettes, « Tout effacer » restait
   hors ecran des qu on descendait. */
/* Barre d action du tiroir : masquee hors tiroir, ou les facettes sont une
   colonne permanente — il n y a rien a « appliquer » ni a refermer. Declaree
   ICI et non en fin de fichier : a specificite egale, la derniere regle
   l emporte, et un `display:none` place apres le media query annulait le
   `display:flex` du tiroir. */
.facets-foot{display:none}

/* En-tete du panneau : il doit s'IDENTIFIER avant d'etre lu. D'ou la bande
   sombre pleine largeur, l'icone et un titre a la taille d'un titre — le gras
   noir sur blanc precedent ne se distinguait pas des intitules de groupes juste
   en dessous, si bien que le panneau n'avait pas de tete.
   Collant : sur une longue liste, « Tout effacer » sortait de l'ecran des qu'on
   descendait. Les marges negatives compensent le padding lateral du panneau,
   pour que la bande aille d'un bord a l'autre. */
.facets-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:.6rem;
  margin:0 -.9rem .35rem;padding:.8rem .9rem;background:var(--ink);
  border-radius:12px 12px 0 0}
.facets-head strong{flex:1;display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:#fff;
  letter-spacing:-.01em}
.facets-head strong i{color:var(--orange);font-size:.95rem}
.facets-reset{background:none;border:0;padding:.15rem;color:rgba(255,255,255,.75);
  cursor:pointer;font-family:inherit;font-size:.82rem;font-weight:600;text-decoration:underline}
.facets-reset:hover{color:#fff}
.facets-reset[hidden]{display:none}
.facets-close{display:none;background:none;border:0;font-size:1.2rem;cursor:pointer;
  color:#fff;padding:0 .2rem}
.facet{border-top:1px solid var(--line);padding:.5rem 0}
.facet summary{cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:.94rem;
  color:var(--ink);list-style:none;padding:.45rem 1.5rem .45rem .1rem;position:relative;
  border-radius:7px;transition:color .12s}
.facet summary:hover{color:var(--orange)}
.facet summary::-webkit-details-marker{display:none}
/* chevron ouvert/fermé (Bootstrap Icons) */
.facet>summary::after{content:"\f282";font-family:"bootstrap-icons";position:absolute;right:.1rem;top:.3rem;color:var(--muted);font-size:.95rem;transition:transform .2s}
.facet[open]>summary::after{transform:rotate(180deg)}
.facet-search{width:100%;padding:.45rem .7rem;border:1px solid var(--line);border-radius:20px;
  margin:.35rem 0;font-family:inherit;font-size:.86rem;color:var(--ink)}
.facet-search:focus{outline:none;border-color:var(--orange)}
/* Une option est une LIGNE cliquable, pas une case avec du texte a cote : la
   zone de clic couvre toute la largeur et le survol la designe. */
.opt{display:flex;align-items:center;gap:.55rem;padding:.32rem .45rem;font-size:.9rem;
  cursor:pointer;border-radius:7px;transition:background .12s}
.opt:hover{background:var(--bg-soft)}
/* `accent-color` colore la case NATIVE : on reste sur un vrai input, donc
   clavier, lecteurs d ecran et etat indetermine de l arbre geo fonctionnent
   sans reimplementation. La case etait en bleu systeme, hors charte. */
.opt input[type=checkbox]{accent-color:var(--orange);width:16px;height:16px;
  flex:0 0 auto;cursor:pointer;margin:0}
.opt .lbl{flex:1;min-width:0}
/* Compteurs alignes : chiffres tabulaires, sinon la colonne de droite danse
   d une ligne a l autre. */
.opt .cnt{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;flex:0 0 auto}
/* Option cochee : la ligne entiere le dit, pas seulement la case de 16 px. */
.opt:has(input:checked){background:var(--orange-050)}
.opt:has(input:checked) .lbl{font-weight:700;color:var(--ink)}
.opt:has(input:checked) .cnt{color:var(--brand-d);font-weight:700}
/* Zero resultat : l option reste cliquable (elle elargit la recherche), mais
   son compte est GRIS et non rouge — ce n est pas une erreur, c est un
   resultat. */
.opt.zero{opacity:.55}
.opt.zero .cnt{color:var(--muted)}
.facet-bools{border-top:1px solid var(--line);padding-top:.4rem}
.facet-bools-title{font-family:var(--font-head);font-weight:700;font-size:.94rem;color:var(--ink);padding:.5rem 0 .2rem}
.opt.bool{padding:.4rem .1rem}

/* ---- Liste de résultats : 1 croisière = 1 ligne (colonnes : navire · infos · itinéraire · prix) ---- */
.results-grid{display:flex;flex-direction:column;gap:1rem}
/* REPARTITION. La vignette d'itineraire etait la plus informative et la plus
   mal servie : 200px de large pour une image 300x200, elle se rendait a
   200x133 dans une boite bien plus haute. On lui donne 300px — sa largeur
   native — pris sur la photo du navire, qui est generique et dont le nom est
   deja dans le titre. La carte, elle, ne se remplace par aucun texte. */
/* TROIS colonnes et non quatre : la carte d'itineraire a rejoint le corps.
   A quatre colonnes, chacune etait etiree a la hauteur de la plus longue : la
   photo perdait 68 % de sa largeur au recadrage, la carte flottait au milieu de
   144 px de vide et le prix se tassait dans 205 px. Mesure, puis arbitre sur
   maquettes comparees. */
.cruise-card{display:grid;grid-template-columns:310px minmax(0,1fr) 252px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:box-shadow .2s}
/* PAS de plancher de hauteur. Il en existait un a chaque palier (377, 467,
   438 px), pose pour que toutes les barrettes s alignent. Mesure : le maximum
   est toujours tire par une poignee de barrettes portant a la fois plusieurs
   avantages et un signal d urgence, quand la grande majorite se contente de
   40 a 80 px de moins. Aligner tout le monde sur ce cas isole ajoutait ce
   vide partout, et rallongeait d autant la PHOTO, qui occupe toute la rangee
   et se retrouvait etiree en bandeau. La hauteur suit donc le contenu. */
/* MIN-HEIGHT : la barrette RESERVE la place de ses lignes optionnelles.
   Mesure sur 30 barrettes reelles : le nombre d'escales n'a aucun effet (la
   carte de 200 px fait plancher, comme voulu), mais deux lignes facultatives
   creusaient un ecart de 43 px — le sous-titre, absent sur 42 % du catalogue, et
   « avec vol ». Une carte d'itineraire manquante coutait 100 px de plus.
   Reserver la hauteur coute un blanc en bas des barrettes les plus pauvres ;
   c'est le prix de la regularite, qui est ce qui permet de comparer en faisant
   defiler la page.
   377 px est le MAXIMUM STRUCTUREL a cette largeur, mesure sur 180 barrettes :
   la configuration la plus riche est 3 avantages (plafonnes a 3 dans la vue),
   la ligne « avec vol » et le signal de rarete. Toute ligne rendue au corps se
   deduit de ce plancher — le badge boucle/aller simple pose sur la carte a fait
   tomber les pastilles sur une seule ligne, et le plancher de 392 a 377. */
.cruise-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.09)}
.cc-media{position:relative;background:#dfe6ec;display:flex;align-items:flex-end;min-height:210px}
.cc-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.cc-media.no-img::after{content:"🚢";font-size:3rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.4}
.cc-ship{position:relative;z-index:1;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;padding:1.5rem .6rem .4rem;font-weight:700;font-size:.9rem}
.cc-flag{position:absolute;top:.5rem;left:.5rem;z-index:1;background:#fff;border-radius:20px;padding:.15rem .45rem;font-size:.85rem}
.cc-body{padding:.8rem 1rem;min-width:0;position:relative;display:flex;flex-direction:column}
.cc-dest{color:var(--brand-d);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
/* Titre a deux niveaux : ce qui identifie l'offre (duree + navire) porte la
   hierarchie, le libelle du flux vient en appui. */
.cc-title{font-size:1.05rem;margin:.15rem 0 .1rem;line-height:1.25}
.cc-title-sep{color:var(--muted);font-weight:400;margin:0 .1rem}

/* PROTECTION CONTRE LE DEBORDEMENT. Le libelle du flux contient des suites de
   plus de 50 caracteres sans espace (« Antilles neerlandaises,Bahamas,Etats-
   Unis,Vierges (iles) ») : 3 032 croisieres sont dans ce cas. Sans coupure
   forcee, la colonne s'elargit, pousse la carte d'itineraire hors de la carte et
   fait apparaitre un defilement horizontal sur toute la page. `titre_flux()`
   remet l'espace apres la virgule, `overflow-wrap` couvre le reste, et la ligne
   est bornee a deux lignes pour que les cartes gardent la meme hauteur. */
/* UNE seule ligne, et non deux : le libelle du flux est un appui, pas le titre,
   et sa deuxieme ligne creusait 21 px d'ecart entre barrettes selon la longueur
   de la liste de pays. Le texte complet reste dans l'attribut `title`. */
.cc-subtitle{margin:0;font-size:.82rem;color:var(--muted);line-height:1.3;
  overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* Caracteristiques en pastilles : en lignes de texte empilees, elles se lisaient
   comme de la prose et rien ne se detachait ; en badges l'oeil les balaye et les
   compare d'une carte a l'autre. */
/* Compteurs poses SUR la carte, en haut a droite : ils la qualifient, et a
   cote d elle ils prenaient la place de l itineraire. Fond opaque, la carte
   etant une image dont on ne maitrise pas les couleurs. */
.cc-map .cc-meta{position:absolute;top:.45rem;right:.45rem;z-index:1;
  flex-direction:column;align-items:flex-end;gap:.25rem}
.cc-map .cc-chip{background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cc-meta{list-style:none;padding:0;margin:0 0 .1rem;display:flex;flex-wrap:wrap;gap:.3rem}
.cc-chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;
  color:var(--body);background:var(--bg-soft);border:1px solid var(--line);
  border-radius:20px;padding:.12rem .5rem;white-space:nowrap}
.cc-chip i{font-size:.68rem;color:var(--muted)}
/* Boucle / aller simple, pose sur la carte d itineraire : c est ce qu elle
   montre. Fond opaque et ombre portee car il flotte sur une image dont on ne
   maitrise pas les couleurs. */
.cc-trip{position:absolute;left:.45rem;bottom:.45rem;z-index:1;
  font-size:.72rem;font-weight:700;border-radius:20px;padding:.15rem .55rem;
  box-shadow:0 1px 4px rgba(0,0,0,.2);white-space:nowrap}
.cc-trip--boucle{background:#fff;color:var(--body);border:1px solid var(--line)}
.cc-trip--oneway{background:var(--orange);color:#fff;border:1px solid var(--orange)}
/* ---- CARROUSEL DES DATES DE DEPART ----
   Meme registre de pastille que « soit 91 EUR / jour » : bordure fine, coins
   arrondis, fond clair. Les dates deviennent des objets qu'on parcourt du regard
   et qu'on clique, au lieu d'une phrase (« 44 dates jusqu'au 04/2028 ») qui
   obligeait a ouvrir la fiche pour savoir si ses propres dates y figuraient. */
/* L'intitule se pose A COTE du carrousel et non au-dessus : une ligne gagnee, et
   il sert d'ancrage a gauche de la rangee qui defile. `margin-top:auto` cale la
   rangee en bas du corps, quelle que soit la longueur de la liste d'escales. */
.cc-dates{min-width:0;margin-top:auto;padding-top:.5rem;
  border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:.75rem}
.cc-dates-head{flex:0 0 auto;display:flex;align-items:center;gap:.35rem;margin:0;
  font-size:.78rem;color:var(--muted)}
.cc-dates-head i{color:var(--orange);font-size:.78rem}
.cc-dates-head strong{color:var(--ink);font-weight:700}

.cc-dates-rail{flex:1 1 auto;display:flex;align-items:center;gap:.3rem;min-width:0}
/* Defilement natif : molette horizontale, trackpad et tactile marchent sans JS,
   les fleches ne sont qu'un confort a la souris. La barre est masquee car elle
   ferait doublon avec elles sur une carte deja dense.
   Le lissage est demande par search.js a l'appel (`behavior:'smooth'`) plutot
   que pose ici en `scroll-behavior`, pour que seul le clic sur une fleche soit
   anime et que les repositionnements internes restent instantanes. */
.cc-dates-scroll{display:flex;gap:.3rem;overflow-x:auto;padding:1px;min-width:0;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none}
.cc-dates-scroll::-webkit-scrollbar{display:none}

/* LES PASTILLES DE DATE SONT DES `<button>` DE FORMULAIRE, plus des liens : un
   bouton ne cree aucune URL a crawler. Il faut donc neutraliser les valeurs par
   defaut du navigateur (police, alignement, curseur), qu'un `<a>` n'avait pas. */
.cc-date{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;
  align-items:center;min-width:60px;padding:.2rem .45rem;line-height:1.15;
  border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;
  font:inherit;text-align:center;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:border-color .15s,background .15s}
.cc-date:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* Le rail est desormais un `<form>` : il ne doit pas apporter la marge par
   defaut d'un formulaire. */
.cc-dates-rail{margin:0}
.cc-date:hover{border-color:var(--brand);background:var(--orange-050)}
.cc-date-d{font-size:.76rem;font-weight:700;color:var(--ink);white-space:nowrap}
.cc-date-y{font-size:.66rem;color:var(--muted)}
/* Date la moins chere : a itineraire identique, c'est souvent le seul critere
   qui departage deux departs. Le liseré double la bordure sans changer la taille
   de la pastille, donc sans decaler la rangee. */
.cc-date.is-min{border-color:var(--brand);box-shadow:inset 0 0 0 1px var(--brand)}
.cc-date.is-min .cc-date-d{color:var(--brand-d)}
.cc-date--plus{background:var(--bg-soft)}
.cc-date--plus .cc-date-d{color:var(--body)}

.cc-dates-arw{flex:0 0 auto;width:22px;height:22px;padding:0;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--body);font-size:.62rem;
  display:none;align-items:center;justify-content:center;cursor:pointer}
.cc-dates.is-scrollable .cc-dates-arw{display:flex}
.cc-dates-arw:hover{border-color:var(--brand);color:var(--brand)}
.cc-dates-arw[disabled]{opacity:.3;cursor:default;border-color:var(--line);color:var(--body)}


/* En-tete de la colonne centrale : destination a gauche, logo compagnie a
   droite. Le logo passe de 26 a 42px et perd son opacite reduite — a un tiers
   de sa taille et delave en bas de carte, il ne remplissait pas son role.
   `flex-shrink:0` pour qu'une destination longue ne l'ecrase pas. */
/* Logo de la compagnie en PASTILLE SUR LA PHOTO : la marque appartient au
   navire, pas au tarif. En tete de colonne prix il allongeait la colonne la plus
   haute, donc toute la barrette. Fond blanc et ombre portee parce que les logos
   sont fournis sur fond transparent et se perdraient sur une photo de mer.
   Tous font 300x150 (ratio 2:1 uniforme, verifie sur 30 compagnies) : on fixe la
   largeur, la hauteur suit. */
/* En-tete : le texte a gauche, le NOM de la compagnie en pastille a droite. Il
   appartient a l'identite du produit, au meme rang que le navire et la duree, et
   quitte donc la ligne des caracteristiques ou il mangeait la place de
   l'itineraire. Le logo, lui, reste sur la photo. */
.cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.9rem;min-width:0}
.cc-head-txt{min-width:0;flex:1 1 auto}
.cc-chip--cie{flex:0 0 auto;margin-top:.1rem;max-width:150px;overflow:hidden;text-overflow:ellipsis}

/* Pastille du logo, posee sur la photo. Tous les logos du fournisseur font
   300x150 (ratio 2:1 uniforme, verifie sur 30 compagnies) : on fixe la largeur,
   la hauteur suit. */
.cc-brand{position:absolute;top:.55rem;left:.55rem;z-index:2;background:#fff;
  border-radius:9px;padding:5px 8px;box-shadow:0 2px 8px rgba(0,0,0,.28);line-height:0}
.cc-logo{display:block;width:82px;height:auto}
/* `.cc-media img` etire TOUTE image de la photo en plein cadre : le logo n en
   est pas une. Specificite 0-2-1, superieure a la regle generique. */
.cc-media img.cc-logo{position:static;inset:auto;width:82px;height:auto;object-fit:contain}
/* Fond neutre et hauteur pleine : avec `contain` l'image se centre, la boite
   ne doit donc pas ajouter de marge qui la reduirait encore. */
/* CARTE + PARCOURS COTE A COTE. La carte quitte sa colonne, ou elle flottait
   au milieu de 144 px de vide, pour se poser a gauche du parcours qu elle
   illustre. 300x200 est sa taille NATIVE : au-dela on n agrandirait que des
   pixels. Le drapeau du flag et la pastille du logo ne la concernent pas. */
/* La carte occupe SEULE sa ligne. Posee a cote du parcours, elle laissait
   164 px a la liste d escales sur un ecran de 1 473 px. Elle ne peut pas non
   plus rapetisser : le partenaire ne livre que du 300x200, toute autre taille
   repond 403, donc l agrandir n etirerait que des pixels. */
/* Au-dela de 1487 px, la carte et le parcours tiennent COTE A COTE — seuil
   releve a la regle de largeur, et non estime. En dessous le bloc passe sous
   la carte (cf. media query), la liste d escales devenant sinon illisible.
   La carte ne peut pas s adapter : le partenaire ne livre que du 300x200. */
.cc-duo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:1rem;align-items:start;
  margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line-soft);min-width:0}
.cc-duo-info{min-width:0;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
/* Le trajet prend toute la largeur du bloc, sinon il se replie sur son
   contenu et fait varier la hauteur des barrettes. */
.cc-duo-info>.cc-trajet,.cc-duo-info>.cc-route{align-self:stretch}
/* Deux lignes : au-dela la barrette gonfle sans rien apprendre de plus, le
   detail complet etant dans la fenetre. */
.cc-duo-info .cc-route-ports{-webkit-line-clamp:2}
.cc-map{width:300px;height:200px;background:#eef2f5;border:1px solid var(--line);
  border-radius:8px;overflow:hidden;position:relative}
/* Carte absente : le cadre RESTE, avec une mention. Le retirer produisait un
   rectangle gris qui disparaissait d un coup une fois le 404 connu, soit un
   saut visible a chaque page. 12 377 des 12 442 cartes viennent encore de la
   prod, ce cas est donc frequent. */
.cc-map.is-empty{background:var(--bg-soft);display:grid;place-items:center}
.cc-map.is-empty::after{content:"Itinéraire indisponible";font-size:.76rem;color:var(--muted)}
/* Le montant occupe sa ligne, l'unité passe dessous : en ligne, « /pers TTC »
   debordait de la colonne des que le prix atteignait cinq chiffres. */

/* Parcours : départ -> arrivée, avec l'étiquette qui qualifie le produit.
   6 642 croisières sont des boucles, 5 800 des allers simples : c'est un
   critère de choix (retour à la voiture, billet d'avion) qui n'apparaissait
   nulle part. Ports en gras, étiquette discrète — elle classe, elle ne vend pas. */
/* SEPARATEURS DE SECTION. La colonne enchainait sept lignes sans respiration :
   identite, parcours et dates se lisaient comme un seul pave. Un filet tres
   clair marque les deux vraies ruptures de nature, sans ajouter de bruit :
     identite (destination, titre, badges) | parcours (ports, escales) | dates
   Le trajet et les escales restent colles, c'est la meme information. */
/* `align-items:flex-start` et non `center`, et le libelle autorise a se replier
   SUR LUI-MEME : en flex-item insecable il basculait en bloc sous l'ancre des que
   la colonne se resserrait, laissant l'icone seule sur sa ligne. */
.cc-trajet{display:flex;align-items:flex-start;gap:.45rem;
  font-size:.86rem;color:var(--body);min-width:0}
.cc-trajet i{color:var(--orange);font-size:.78rem;flex:0 0 auto;margin-top:.22rem}
/* Deux lignes au plus. Avec les pays entre parentheses, un
   « Civitavecchia - Rome (Italie) -> Le Piree - Athenes (Grece) » montait a
   quatre lignes dans une colonne de 200 px et faisait deborder la barrette de
   son plancher. Le libelle entier reste dans l'attribut `title`. */
/* DEUX lignes et non une : a une seule, « Hambourg (Allemagne) -> Le Havre
   (France) » etait coupe dans 244 px et le PORT D ARRIVEE disparaissait —
   or c est lui qui distingue un aller simple d une boucle. */
.cc-trajet-ports{flex:1 1 auto;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cc-trajet-ports strong{color:var(--ink);font-weight:700}
/* Itinéraire nommé : la ligne la plus utile de la carte pour comparer deux
   croisières. Ports en gris foncé (lisibles mais sous le titre), séparateurs
   discrets, et coupure propre quand la place manque — le titre de l'élément
   porte la liste complète. */
.cc-route{display:flex;align-items:flex-start;gap:.4rem;margin:.35rem 0 0;
  font-size:.84rem;color:var(--body);min-width:0}
.cc-route i{color:var(--orange);font-size:.78rem;flex:0 0 auto}
/* L'itineraire se replie sur DEUX lignes au lieu d'etre coupe a une : en
   `nowrap`, passer la limite de 4 a 10 escales n'aurait rien montre de plus, la
   ligne aurait juste ete tronquee plus loin. Deux lignes au plus, pour que les
   cartes restent comparables en hauteur. */
.cc-route-ports{min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cc-route-more{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--orange);
  background:var(--orange-050);border-radius:20px;padding:.05rem .35rem}

/* Prix au jour : il porte la comparaison entre deux croisieres, il ne doit donc
   pas se lire comme une note de bas de page. Plus sombre et plus grand que la
   mention d unite qui le suit, mais sous le montant : information, pas argument. */

/* Mention paiement fractionne : discrete, juste sous le prix. Elle informe
   sans concurrencer le prix ni le bouton d'action. */
/* .74rem et non .78 : au montant le plus long possible sous le plafond
   (« Payez en 4 fois dès 1 000 € »), la mention occupait exactement la largeur
   de la colonne, sans marge — un rendu de police un peu différent la ferait
   déborder. */

/* Logo du partenaire de paiement : petit, sous la mention, il sert de caution
   sans prendre le pas sur le prix. Hauteur fixee pour eviter tout saut de
   mise en page au chargement (width/height sont aussi dans le HTML). */



/* (L'ancienne règle `.cc-amount` 1.5rem vivait ici et ÉCRASAIT le dessein à
   2rem posé plus haut — déclarée plus bas, elle gagnait à la cascade : le
   piège du §5, sur le PRIX, l'élément de conversion n°1 de la carte.) */

.cc-vol{display:flex;flex-direction:column;align-items:center;gap:.05rem;margin-top:.35rem}
.cc-vol-price{font-size:.9rem;color:var(--ink)}
.cc-vol-price i{color:var(--brand)}
.cc-vol-price i.fa-ship{margin-right:.1rem}
.cc-vol-price i.fa-plane{margin-right:.3rem}
.cc-vol-price strong{font-weight:800;color:var(--brand-d)}
.cc-vol-note{font-size:.72rem;color:var(--muted)}
.cc-btn{padding:.65rem;width:100%}
.no-results{text-align:center;padding:3rem 1rem;color:var(--muted)}
/* 1487 px, releve a la regle : en dessous, la carte et le parcours ne tiennent
   plus cote a cote sans ecraser la liste. Le bloc passe donc SOUS la carte. */
@media(max-width:1487px){
  .cc-duo{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .cc-duo>.cc-map{justify-self:start}
  /* Sous la carte, le bloc dispose de toute la largeur : la liste d escales
     tient alors sur UNE ligne, la ou elle en prend deux dans les 266 px de la
     colonne de droite. */
  .cc-duo-info .cc-route-ports{-webkit-line-clamp:1}
  /* Le parcours passe SOUS la carte : la barrette s allonge, le plancher
     suit. 377 px de maximum naturel a deux colonnes, ~467 a une (carte 200 +
     pastilles + trajet + escales + bouton). A CONFIRMER a la regle : la
     fenetre de test ne descend pas sous 1900 px. */
  /* Plancher retire : la hauteur suit le contenu, cf. `.cruise-card`. */
}
@media(max-width:1080px){
  /* On resserre AVANT de retirer quoi que ce soit : la photo et la carte portent
     toutes deux de l'information, on ne sacrifie ni l'une ni l'autre tant qu'il
     reste de la place. */
  .cruise-card{grid-template-columns:236px minmax(0,1fr) 224px}
}
@media(max-width:980px){
  /* Tablette en portrait (912 px) : la barrette a desormais toute la largeur,
     mais il faut resserrer les trois colonnes pour que la zone descriptive
     garde de quoi lire un itineraire. Plancher mesure sur 120 barrettes a
     cette largeur, quatre tris confondus : le maximum naturel y est de
     396 px. */
  .cruise-card{grid-template-columns:200px minmax(0,1fr) 210px}
}
@media(max-width:820px){
  /* On retire d'abord la PHOTO, pas la carte : elle illustre, la carte informe.
     820 et non 760 : a 768 px (iPad en portrait) la zone descriptive tombait a
     63 px, la photo prenant 200 px dont on peut se passer. */
  .cruise-card{grid-template-columns:minmax(0,1fr) 210px}
  .cc-media{display:none}
}
@media(max-width:620px){
  /* En colonne unique, reserver une hauteur n'a plus de sens : les barrettes
     s'empilent, la comparaison se fait de proche en proche. */
  .cruise-card{grid-template-columns:1fr;min-height:0}
  .cc-media{display:flex;min-height:180px}
  .cc-duo{grid-template-columns:minmax(0,1fr)}
  .cc-map{width:100%;max-width:300px;height:auto;aspect-ratio:3/2}
  .cc-cta,.cc-body{border-left:0}
  .cc-cta{border-top:1px solid var(--line)}
}

/* ---- Pagination ---- */
.pagination{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.pg{min-width:38px;padding:.45rem .6rem;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}
.pg.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.pg:disabled{opacity:.4;cursor:default}
.pg-dots{padding:.45rem .2rem;color:var(--muted)}

/* ---- Mobile ---- */
.filters-toggle{display:none;width:100%;padding:.8rem;background:var(--ink);color:#fff;border:0;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;margin-bottom:1rem}
/* 1286 px, releve a la regle : en dessous, la colonne de facettes de 320 px ne
   laisse plus assez a la barrette. Les facettes passent en tiroir et la
   barrette recupere toute la largeur. */
@media(max-width:1286px){
  .results-wrap{grid-template-columns:1fr}
  /* Le declencheur des filtres est FIXE EN BAS D ECRAN et non en tete de
     colonne : sur une page de 12 000 px, un bouton pose en haut sort du champ
     des le premier ecran et n est plus jamais atteignable. En bas, il reste
     sous le pouce quel que soit l endroit ou l on se trouve.
     Pastille centree plutot que barre pleine largeur : elle laisse voir les
     resultats derriere, et le coin droit reste au retour en haut. */
  .filters-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    position:fixed;left:50%;transform:translateX(-50%);bottom:1.1rem;z-index:1035;
    width:auto;margin:0;padding:.8rem 1.5rem;border-radius:26px;
    box-shadow:0 6px 20px rgba(0,0,0,.28)}
  /* Ouvert, le tiroir couvre l ecran : le declencheur n a plus lieu d etre. On
     s appuie sur la classe posee sur <html> par le JS, le bouton PRECEDANT
     .facets dans le DOM — aucun combinateur frere ne peut l atteindre. */
  html.drawer-open .filters-toggle{display:none}
  /* En tiroir, le panneau a 1rem de padding et non .9rem : la marge negative
     de la banniere doit suivre, sinon elle n atteint pas les bords. Les coins
     redeviennent droits, le tiroir occupant tout l ecran. */
  .facets-head{margin:0 -1rem .35rem;border-radius:0}
  /* En tiroir plein ecran, l en-tete collant du panneau devient un atout : la
     barre « Filtrer / Tout effacer / fermer » reste atteignable pendant qu on
     fait defiler une longue liste de facettes. */
  /* `inset:0` NE SUFFIT PAS : sur mobile, `bottom:0` se resout contre le GRAND
     viewport, barre d adresse masquee. Mesure sur un ecran de 400 px : le
     tiroir faisait 1 008 px pour une fenetre visible de 760, sa hauteur egalait
     donc son contenu, il ne defilait pas, et le geste partait dans la page
     derriere (31 156 px) — le scintillement venait de la.
     `100dvh` suit le viewport reellement visible ; `100vh` reste en repli pour
     les navigateurs qui l ignorent. `overscroll-behavior:contain` empeche le
     geste de se propager a la page en bout de course. */
  /* 1040 et non 50 : l en-tete du site est sticky a 1030 et recouvrait le haut
     du tiroir, banniere comprise. On reste sous l offcanvas de connexion (1045). */
  .facets{position:fixed;inset:0;height:100vh;height:100dvh;z-index:1040;border:0;border-radius:0;
    overflow-y:auto;overscroll-behavior:contain;max-height:none;
    display:flex;flex-direction:column;
    transform:translateX(-100%);transition:transform .25s;background:#fff;
    padding:0 1rem 0;box-shadow:none}
  /* Le corps pousse la barre d action en bas quand les facettes sont courtes. */
  #facetsBody{flex:1 0 auto}
  /* Barre d action collee au bas du tiroir. `sticky` et non `fixed` : elle
     appartient au tiroir, elle doit donc disparaitre avec lui. */
  .facets-foot{display:flex;position:sticky;bottom:0;z-index:3;gap:.6rem;
    margin:.6rem -1rem 0;padding:.75rem 1rem;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -6px 16px rgba(20,22,26,.08)}
  .facets.open{transform:none}
  .facets-close{display:block}
  .facet-options{max-height:none}
}

/* ---- Moteur : mode dates + sous-groupes facettes ---- */
.m-datemode{display:flex;gap:.8rem;font-size:.8rem;margin-bottom:.35rem}
.m-datemode label{opacity:.9}
.m-range{display:flex;gap:.4rem}
.m-range input{flex:1}
.facet-subgroup{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin:.5rem 0 .15rem}

/* ---- Moteur : "Quand ?" (bascule + calendrier) ---- */
.m-when-modes{display:flex;gap:.3rem;margin-bottom:.35rem}
.m-when-modes button{flex:1;padding:.35rem;border:0;border-radius:6px;background:rgba(255,255,255,.15);color:#fff;font-size:.78rem;cursor:pointer}
.m-when-modes button.active{background:var(--brand);font-weight:700}
.m-dates,.m-monthsel{width:100%;padding:.7rem;border:0;border-radius:8px;font-size:1rem}
.flatpickr-calendar{font-size:.9rem}
/* jours sans départ : grisés mais sélectionnables (pour les plages) */
.flatpickr-day.fp-noavail:not(.selected):not(.startRange):not(.endRange){color:#c2c8d0}

/* ---- Widget "Quand ?" (popover 2 onglets) ---- */
.m-when{position:relative}
.m-when-trigger{width:100%;padding:.7rem;border:0;border-radius:8px;font-size:1rem;text-align:left;cursor:pointer;background:#fff;color:var(--ink)}
.when-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:1rem;min-width:640px}
.when-tabs{display:flex;gap:.4rem;justify-content:center;background:#f1f3f5;border-radius:999px;padding:.25rem;width:max-content;margin:0 auto 1rem}
.when-tabs button{border:0;background:transparent;padding:.45rem 1.4rem;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted)}
.when-tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.wm-year{margin-bottom:.8rem}
.wm-y{font-weight:800;font-size:1.1rem;text-align:center;margin-bottom:.4rem}
.wm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.wm-m{padding:.6rem;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-weight:600}
.wm-m:hover:not(:disabled){border-color:var(--brand)}
.wm-m.sel{background:var(--brand);color:#fff;border-color:var(--brand)}
.wm-m:disabled{opacity:.35;cursor:not-allowed}
.when-empty{color:var(--muted);text-align:center;padding:1rem}
.when-actions{display:flex;justify-content:space-between;gap:.6rem;margin-top:.8rem;border-top:1px solid var(--line);padding-top:.8rem}
.wa-clear{background:none;border:0;color:var(--muted);cursor:pointer}
.wa-apply{background:var(--brand);color:#fff;border:0;border-radius:8px;padding:.55rem 1.4rem;font-weight:700;cursor:pointer}
#fpInline .flatpickr-calendar{box-shadow:none;margin:0 auto}
@media(max-width:820px){ .when-pop{min-width:0;width:92vw;left:50%;transform:translateX(-50%)} .wm-grid{grid-template-columns:repeat(3,1fr)} }

/* ---- Widget "Quand ?" : en-tête fixe (onglets + CTA) + corps défilant ---- */
.when-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem}
.when-tabs{margin:0}
/* Les actions ne sont plus dans l entete : elles gardent donc le style de
   pied defini plus haut (filet, marge, bouton a droite). Cette surcharge,
   qui les remettait en ligne, est supprimee. */
.when-scroll{max-height:46vh;overflow:auto}

/* ---- Facette arbre géo (zones) ---- */
.zt-row{display:flex;align-items:center;gap:.25rem}
.zt-row .opt{flex:1}
/* La fleche de l arbre est un BOUTON : elle deplie une branche. A 0,7 rem en
   gris pale elle ne se voyait pas comme tel. */
.zt-tw{width:1.25rem;height:1.25rem;flex:none;background:none;border:0;color:var(--body);
  cursor:pointer;font-size:.85rem;line-height:1;padding:0;border-radius:5px;
  transition:transform .15s,background .12s,color .12s}
.zt-tw:hover{background:var(--orange-050);color:var(--orange)}
.zt-tw.open{transform:rotate(90deg)}
button.zt-tw:hover{color:var(--brand-d)}
.zt-children{display:none;padding-left:.9rem;border-left:1px solid var(--line);margin-left:.5rem}
.zt-children.open{display:block}
.zt .searching .zt-children,.facet-options.zt.searching .zt-children{display:block}
.zt-bassin>.opt .lbl{font-weight:700}
.zt-region>.opt .lbl{font-weight:600}
.zt-zone>.opt .lbl{font-weight:400;font-size:.88rem}

/* niveau TYPE (racine de l'arbre destination) */
.zt-type>.opt .lbl{font-weight:800;font-size:1rem}
.zt-type{margin-top:.15rem}

/* Port de départ : en-tête pays cliquable + ports indentés */
.opt-country{margin-top:.35rem}
.opt-country .lbl{font-weight:700}
.port-sub{padding-left:1rem}



/* ---- Panneau Destination (type + cartes + colonnes) ---- */
.m-dest{position:relative}
.m-dest-trigger{width:100%;padding:.7rem;border:0;border-radius:8px;font-size:1rem;text-align:left;cursor:pointer;background:#fff;color:var(--ink)}
.dest-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:70;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 14px 44px rgba(0,0,0,.28);padding:1rem;width:720px;max-width:92vw;max-height:72vh;overflow:auto}
.dest-tabs{display:flex;gap:.3rem;justify-content:center;background:#f1f3f5;border-radius:999px;padding:.25rem;width:max-content;max-width:100%;margin:0 auto 1rem;flex-wrap:wrap}
.dt-tab{border:0;background:transparent;padding:.4rem 1rem;border-radius:999px;cursor:pointer;font-weight:600;color:var(--muted);white-space:nowrap}
/* `--accent` N EXISTE PAS dans ce projet : la declaration etait invalide, le
   fond restait transparent et il ne restait que le texte blanc sur la
   pastille grise. L onglet actif etait donc illisible. La charte n a qu un
   orange, c est lui. */
.dt-tab.active{background:var(--orange);color:#fff}
.dt-n{opacity:.7;font-size:.82em;font-weight:400}
.dest-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.1rem}
.dc-card{position:relative;aspect-ratio:16/11;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;padding:0}
.dc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.65))}
.dc-name{position:absolute;left:.5rem;right:.5rem;bottom:.4rem;z-index:1;font-weight:800;font-size:.82rem;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.7);text-align:left}
.dc-n{position:absolute;top:.4rem;right:.4rem;z-index:1;background:rgba(255,255,255,.92);color:var(--ink);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:800}
.dc-card.on{outline:3px solid var(--brand);outline-offset:-3px}
.dest-cols{column-count:3;column-gap:1.2rem}
.dcgrp{break-inside:avoid;margin-bottom:.6rem}
.dco{display:flex;align-items:center;gap:.4rem;padding:.13rem 0;cursor:pointer}
.dco-l{flex:1}.dco-n{color:var(--muted);font-size:.72rem}
/* Le bassin porte desormais SA taille : sans elle il heritait du contexte et
   se retrouvait plus petit que les regions qu il contient. */
.dco-b .dco-l{font-weight:800;font-size:.96rem}
.dco-r .dco-l{font-weight:600;font-size:.9rem}
/* Decalage rendu VISIBLE par un filet, l indentation seule ne se lisant pas
   dans une colonne etroite. */
.dco-z{padding-left:.75rem;margin-left:.15rem;border-left:2px solid var(--line-2)}.dco-z .dco-l{font-weight:400;font-size:.82rem;color:var(--muted)}
.dco.zero{opacity:.4}
@media(max-width:820px){.dest-panel{width:92vw;left:50%;transform:translateX(-50%)}.dest-cards{grid-template-columns:1fr 1fr}.dest-cols{column-count:1}}

/* ---- Moteur hybride : 4 modes (Rechercher / Inspiré / Détails / Peu importe) ---- */
/* pastilles d'entité : Destination / Pays / Escale */
:root{--t-D:#2563eb;--t-P:#7c3aed;--t-E:#0d9488}
.dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block;flex:none}
.dot.t-D{background:var(--t-D)}.dot.t-P{background:var(--t-P)}.dot.t-E{background:var(--t-E)}

.dmodes{display:flex;gap:.3rem;background:#f1f3f5;border-radius:10px;padding:.3rem;margin-bottom:1rem}
.dmodes button{flex:1;border:0;background:transparent;color:var(--muted);font-weight:700;font-size:.86rem;padding:.5rem .4rem;border-radius:8px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap}
.dmodes button.on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dmodes button i{font-size:.95em}
.dmode{display:none}.dmode.on{display:block}

/* Rechercher */
.dsearch{position:relative}
.dsearch i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--brand);font-size:1rem}
.dsearch input{width:100%;border:2px solid var(--brand);border-radius:10px;padding:.8rem .9rem .8rem 2.3rem;font-size:1rem;font-family:inherit;color:var(--ink)}
.dsearch-sub{font-size:.78rem;color:var(--muted);margin:.5rem 0 0}
.dsearch-types{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-top:.55rem;font-size:.78rem;color:var(--muted)}
.dt-key{display:inline-flex;align-items:center;gap:.35rem}
.dsugg{margin-top:.7rem;border:1px solid var(--line);border-radius:10px;overflow:hidden;max-height:300px;overflow-y:auto}
.sg-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--muted);padding:.5rem .8rem .25rem;background:var(--bg-soft)}
.sg-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;cursor:pointer;border-top:1px solid var(--line);width:100%;background:#fff;border-left:0;border-right:0;border-bottom:0;text-align:left;font-family:inherit;font-size:.92rem;color:var(--ink)}
.sg-item:hover{background:var(--bg-soft)}
.sg-nm{flex:1}
.sg-n{font-size:.78rem;color:var(--muted);font-weight:700}
.sg-empty{padding:1rem .8rem;color:var(--muted);font-size:.9rem;text-align:center}

/* Être inspiré */
.dinspire{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.dtile{position:relative;aspect-ratio:16/11;border:0;border-radius:10px;overflow:hidden;cursor:pointer;background:linear-gradient(135deg,#1f8fb0,#0d5a74);color:#fff;padding:0;font-family:inherit;text-align:left}
.dtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dtile-shade{position:absolute;inset:0;background:linear-gradient(transparent 38%,rgba(0,0,0,.7))}
.dtile-nm{position:absolute;left:.5rem;right:.5rem;bottom:.4rem;z-index:1;font-weight:800;font-size:.8rem;line-height:1.15;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.dtile-n{position:absolute;top:.4rem;right:.4rem;z-index:1;background:rgba(255,255,255,.94);color:var(--ink);border-radius:20px;padding:.05rem .45rem;font-size:.68rem;font-weight:800}
.dtile.sel{outline:3px solid var(--brand);outline-offset:-3px}
.dtile.sel .dtile-n{display:none}
.dtile.sel::after{content:"✓";position:absolute;top:.35rem;right:.4rem;z-index:2;background:var(--brand);color:#fff;width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800}
@media(max-width:820px){.dinspire{grid-template-columns:1fr 1fr}}

/* + de détails : famille entière + cartes bordées par bassin */
.fam-all{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;margin-bottom:.8rem;background:var(--bg-soft);border-radius:8px;cursor:pointer;font-weight:700;font-size:.9rem}
.fam-all input{accent-color:var(--brand);width:1.05rem;height:1.05rem}
.fam-all-n{margin-left:auto;color:var(--muted);font-size:.78rem}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;align-items:start}
.fam-card{border:1px solid var(--line);border-radius:10px;padding:.5rem .7rem;background:#fff;break-inside:avoid}
.fam-card .dco-b{border-bottom:1px solid var(--line);padding-bottom:.35rem;margin-bottom:.3rem}
.dco input{accent-color:var(--brand)}

/* pied partagé : chips D/P/E + compteur + appliquer */
.dest-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);flex-wrap:wrap}
.dest-chips{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;flex:1}
.dest-count{font-size:.9rem;color:var(--muted)}.dest-count b{color:var(--ink)}
.dchip{border-radius:999px;padding:.22rem .3rem .22rem .6rem;font-size:.8rem;font-weight:700;display:inline-flex;gap:.4rem;align-items:center;color:#fff}
.dchip.t-D{background:var(--t-D)}.dchip.t-P{background:var(--t-P)}.dchip.t-E{background:var(--t-E)}.dchip.t-F{background:var(--brand)}
.dchip-x{background:rgba(255,255,255,.28);border:0;color:#fff;cursor:pointer;font-weight:800;font-family:inherit;border-radius:50%;width:1.15rem;height:1.15rem;line-height:1;flex:none}
.dchips-clear{background:none;border:0;color:var(--brand-d);text-decoration:underline;cursor:pointer;font-size:.8rem;font-family:inherit}

/* En-tête commun des 3 panneaux (desti / dates / durée) : titre + actions + fermer */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.panel-title{font-weight:700;font-size:1rem;color:var(--ink)}
/* Barre d action en PIED de panneau, comme `.dest-foot` et `.when-actions`. */
.panel-actions{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;
  margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.pa-clear{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.9rem}
.pa-clear:hover{color:var(--ink)}
.pa-apply{padding:.5rem 1.1rem}
.p-close{background:none;border:0;font-size:1.5rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 .25rem}
.p-close:hover{color:var(--ink)}

/* Panneau Durée (même logique que desti) */
.m-duree{position:relative}
.m-duree-trigger{width:100%;padding:.7rem;border:0;border-radius:8px;font-size:1rem;text-align:left;cursor:pointer;background:#fff;color:var(--ink)}
.duree-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:1rem;min-width:300px;max-width:92vw;max-height:72vh;overflow:auto}
.duree-opts{display:flex;flex-direction:column;gap:.05rem}
.dro{display:flex;align-items:center;gap:.55rem;padding:.4rem .35rem;border-radius:6px;cursor:pointer}
.dro:hover{background:#f6f7f9}
.dro-l{flex:1}
.dro-n{color:var(--muted);font-size:.85rem}
.dro.zero{opacity:.4}
@media(max-width:820px){.duree-panel{left:50%;transform:translateX(-50%);width:92vw}}

/* Panneau destination en pleine largeur du moteur (desktop) */
.moteur{position:relative}
.m-dest{position:static}
.dest-panel{left:0;right:0;width:auto;max-width:none;top:calc(100% + 8px)}
@media(max-width:820px){.dest-panel{left:0;right:0;transform:none;width:auto}}

/* =========================================================
   FICHE DEVIS — grille dates × cabines réelles
   ========================================================= */
.dv-wrap{max-width:1200px;margin:1.2rem auto;padding:0 1rem}
/* Titre et logo de la compagnie en vis-a-vis. Le logo est la marque connue,
   celle qui rassure avant meme qu on lise l itineraire : il etait relegue
   sous la carte, dans la colonne de droite, ou il arrivait longtemps apres
   la decision. */
.dv-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.dv-head-txt{min-width:0}
/* Cadre blanc borde plutot que le logo pose a nu : les logos de compagnies
   sont fournis sur fond blanc et bavent sinon sur la page. */
.dv-head-cie{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:.5rem .85rem;background:#fff;border:1px solid var(--line);border-radius:10px}
.dv-head-cie img{display:block;max-height:38px;max-width:132px;object-fit:contain}
.dv-dest{color:var(--brand-d);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.dv-title{margin:.2rem 0 .5rem;font-size:1.5rem;line-height:1.2}
/* carte + méta dans la colonne droite */
.dv-head-map{width:100%;border-radius:10px;overflow:hidden;background:#eef2f5;margin-bottom:.7rem}
.dv-head-map img{width:100%;height:auto;display:block}
.dv-meta{list-style:none;display:flex;flex-direction:column;gap:.35rem;padding:0 0 .8rem;margin:0 0 .8rem;border-bottom:1px solid var(--line);color:var(--muted);font-size:.9rem}
.dv-nooffer,.dv-empty{padding:1.5rem;color:var(--muted)}

/* layout : grille à gauche, récap sticky à droite */
.dv-layout{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start}
.dv-main{min-width:0}
.dv-grid-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:1.2rem}
.dv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);background:var(--bg-soft);flex-wrap:wrap}
.dv-cheapest{display:flex;align-items:baseline;gap:.35rem}
.dv-from{color:var(--muted);font-size:.85rem}
/* nowrap : la police du thème est plus large, le « € » passait à la ligne seul. */
.dv-amount{font-size:1.5rem;font-weight:800;color:var(--brand-d);white-space:nowrap}
.dv-unit{color:var(--muted);font-size:.8rem}
.dv-toolbar-r{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.dv-nav{display:flex;align-items:center;gap:.5rem}
/* bouton « Tarifs & dispos » -> plein écran */
.dv-fs-open{border:1px solid var(--line);background:#fff;border-radius:8px;padding:.5rem .8rem;font-size:.82rem;font-weight:700;cursor:pointer;color:var(--ink);white-space:nowrap}
.dv-fs-open:hover{border-color:var(--brand);color:var(--brand-d)}
.dv-fs-close{display:none;position:fixed;top:1.2rem;right:1.2rem;z-index:135;width:40px;height:40px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.25);font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.dv-fs-back{position:fixed;inset:0;background:rgba(15,25,35,.62);z-index:120}
.dv-fs-back[hidden]{display:none}
/* modale tableau : taille du tableau (pas plein écran), centrée, overlay derrière */
.dv-grid-card.dv-full{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:130;margin:0;width:min(1000px,92vw);max-height:85vh;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.45)}
.dv-grid-card.dv-full .dv-scroll{flex:1;overflow-y:auto}
.dv-grid-card.dv-full .dv-fs-close{display:block}

/* haut de l'aside : prix + Tarifs & dispos + Choisir ce prix (comme destockage) */
.dv-aside-head{border:1px solid var(--line);border-radius:12px;padding:.8rem;margin-bottom:.8rem;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.dv-aside-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.dv-choose-cheapest{width:100%;padding:.8rem;font-size:1rem}
.dv-aside-vol{margin:0 0 .7rem;font-size:.85rem;color:var(--muted)}
.dv-aside-vol i{color:var(--brand);margin-right:.2rem}
.dv-aside-vol strong{color:var(--ink)}
/* Toggle « Vol compris » dans la barre du tableau */
.dv-volswitch{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem}
.dv-volswitch:hover{border-color:var(--brand)}
.dv-volswitch input{accent-color:var(--brand);width:1rem;height:1rem;margin:0}
.dv-volswitch i{color:var(--brand)}
/* Mode « Vol compris », cellule dont le flux ne donne aucun prix package.
   Le gris à 55 % d'opacité la faisait lire comme DÉSACTIVÉE, alors qu'elle
   reste parfaitement sélectionnable, et elle affichait le prix de la
   croisière seule sans jamais le dire. Or c'est le cas courant et non
   l'exception : 47 % des offres, sur les croisières qui ont pourtant un
   package, et jusqu'à 100 % sur 157 d'entre elles.
   Le prix revient donc en encre normale, et un libellé explicite dit ce
   qu'il est. Posé au-dessus, comme la mention du meilleur prix. */
.dv-novol .dv-price{color:var(--ink);opacity:1}
.dv-novol .dv-price::before{content:"sans vol";display:block;
  font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:var(--muted);line-height:1.1;margin-bottom:.1rem}
.dv-month select{padding:.5rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:#fff}
/* chevrons avec labels autour du select mois */
.dv-navbtn{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);background:#fff;border-radius:8px;padding:.5rem .7rem;font-size:.82rem;font-weight:600;color:var(--ink);cursor:pointer}
.dv-navbtn:hover{border-color:var(--brand);color:var(--brand-d)}
.dv-navbtn .dv-chev{font-size:1.15rem;line-height:1;color:var(--brand-d)}

/* scroll masqué + snap par colonne (aucune date ne s'arrête à moitié sous la colonne cabines) */
.dv-scroll{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:230px;scrollbar-width:none;-ms-overflow-style:none}
.dv-scroll::-webkit-scrollbar{display:none}
.dv-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.9rem}
.dv-table th,.dv-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
/* colonne cabines figée */
.dv-corner,.dv-cab{position:sticky;left:0;z-index:3;background:#fff;text-align:left;width:230px;min-width:230px;max-width:230px;padding:.6rem .8rem}
.dv-corner{z-index:4;background:var(--bg-soft);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
/* Surtout PAS de `display:flex` ici : une cellule de tableau ainsi déclarée
   quitte la mise en page du tableau et ne prend plus la hauteur de sa ligne.
   Mesuré : 52 px pour une ligne de 64, et 12 px de fond manquant sur toute la
   colonne figée, par lesquels on voyait défiler le tableau derrière. La mise
   en colonne va donc sur une enveloppe interne. */
.dv-cab{font-weight:600;vertical-align:middle;box-shadow:2px 0 0 rgba(0,0,0,.03)}
.dv-cab-in{display:flex;align-items:center;gap:.55rem}
.dv-cab-photo{flex:0 0 40px;height:32px;border-radius:5px;background:#eef2f5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23b7c0cc' stroke-width='2'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 15l5-4 4 3 5-5 4 3'/></svg>") center/20px no-repeat}
.dv-cab-name{line-height:1.25}
/* en-tête de famille */
.dv-fam{position:sticky;left:0;z-index:2;background:#fbfbfc;text-align:left;width:230px;min-width:230px;max-width:230px;padding:.4rem .8rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--brand-d);font-weight:700;white-space:nowrap}
.dv-fam-fill{background:#fbfbfc}
/* ligne DATE DE DÉPART (haut) et DATE DE RETOUR (bas) */
.dv-date-col{min-width:150px;padding:.55rem .4rem;text-align:center;background:var(--bg-soft);font-weight:700;scroll-snap-align:start}
.dv-retour-col{min-width:150px;padding:.5rem .4rem;text-align:center;background:var(--bg-soft);color:var(--muted);font-weight:600}
.dv-corner-b{background:var(--bg-soft)}
/* cellules prix + CTA Choisir */
.dv-cell{text-align:center;padding:.5rem .4rem;cursor:pointer;position:relative;vertical-align:middle}
.dv-cell:not(.dv-na):hover{background:#fff7ef}
.dv-price{display:block;font-weight:700;color:var(--ink)}
.dv-choose{display:inline-flex;align-items:center;gap:.15rem;margin-top:.25rem;font-size:.76rem;font-weight:700;color:var(--brand-d)}
.dv-choose .dv-chev{font-size:1rem;line-height:1}
.dv-cell:not(.dv-na):hover .dv-choose{text-decoration:underline}
/* meilleur prix = couleur success verte (pas de triangle) */
.dv-best{display:block;font-size:.66rem;font-weight:800;color:var(--success);text-transform:uppercase;letter-spacing:.02em;margin-bottom:.1rem}
.dv-cheap{background:var(--success-bg)}
.dv-cheap .dv-price{color:var(--success)}
.dv-cheap .dv-choose{color:var(--success)}
.dv-na{cursor:default;background:#fafafa}
.dv-na-txt{color:#b3b8c0;font-size:.8rem}
.dv-selected{outline:2px solid var(--brand);outline-offset:-2px}
.dv-selected .dv-price{color:var(--brand-d)}
.dv-legend{padding:.6rem 1rem;margin:0;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}
.dv-legend strong{color:var(--success)}
.dv-best-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--success);vertical-align:-1px;margin-right:.35rem}

/* récap sticky (colonne droite) */
.dv-aside{position:sticky;top:1rem}
.dv-aside-card{border:1px solid var(--line);border-radius:12px;padding:1rem;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.04)}
/* Intitulé du prix d'appel. En capitales et en gris : il nomme le montant
   sans lui disputer l'attention. */
.dv-aside-lbl{margin:0 0 .3rem;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);line-height:1.25}
/* Le filet passe sous la LIGNE entière et non sous le seul montant : posé sur
   `.dv-aside-cheapest`, qui ne fait que 150 px des 292 de la ligne, il
   s'arrêtait au milieu de nulle part. */
.dv-aside-top{padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.dv-aside-cheapest{min-width:0}
.dv-ac-val{display:flex;align-items:baseline;gap:.35rem;margin:0}
/* L'unité passe sous le montant : sur la même ligne il ne lui restait que
   48 px, où « /pers TTC » se coupait déjà en deux. */
.dv-aside-cheapest .dv-unit{display:block;margin:.05rem 0 0}
.dv-aside-sel{padding:.7rem 0;border-bottom:1px solid var(--line);margin-bottom:.7rem}
.dv-as-cabine{font-weight:700;font-size:1rem;line-height:1.25}
.dv-as-line{color:var(--muted);font-size:.88rem;margin-top:.2rem}
.dv-as-price{font-size:1.5rem;font-weight:800;color:var(--brand-d);margin-top:.4rem}
.dv-as-price small{font-size:.7rem;color:var(--muted);font-weight:400}
.dv-aside-note{font-size:.82rem;color:var(--ink);background:#fff3e6;border:1px solid #f5d9bd;border-radius:8px;padding:.5rem .6rem;margin:.2rem 0 .7rem}
.dv-aside-cta{width:100%;padding:.85rem;font-size:1rem}
.dv-aside-cta:disabled{opacity:.5;cursor:not-allowed}
.dv-aside-hint{font-size:.8rem;color:var(--muted);text-align:center;margin:.5rem 0 0}

/* modal formulaire */
.dv-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1rem}
.dv-modal[hidden]{display:none}
.dv-modal-back{position:absolute;inset:0;background:rgba(15,25,35,.55)}
.dv-modal-box{position:relative;background:#fff;border-radius:14px;width:560px;max-width:100%;max-height:92vh;overflow:auto;padding:1.4rem;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dv-modal-x{position:absolute;top:.6rem;right:.7rem;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer}
.dv-modal-x:hover{color:var(--ink)}
.dv-modal-title{margin:.1rem 0 .5rem;font-size:1.25rem;line-height:1.25}
.dv-modal-cie{margin:0 0 .9rem;text-align:center}
.dv-modal-cie img{max-height:38px;max-width:180px;object-fit:contain}
.dv-modal-recap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--bg-soft);border-radius:10px;padding:.7rem .9rem;margin-bottom:1rem}
.dv-modal-recap strong{display:block;font-size:1rem}
.dv-muted{color:var(--muted);font-size:.88rem}
.dv-modal-price{font-size:1.35rem;font-weight:800;color:var(--brand-d);white-space:nowrap}
.dv-modal-price small{font-size:.7rem;color:var(--muted);font-weight:400}
.dv-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.dv-f{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.dv-f span{font-weight:600}
.dv-f input,.dv-f select{padding:.6rem;border:1px solid var(--line);border-radius:8px;font-size:.95rem;font-family:inherit;color:var(--ink)}
/* Precision sous un champ : gris et petite, elle explique sans peser. */
.dv-f-hint{color:var(--muted);font-size:.74rem;line-height:1.3;margin-top:.15rem;font-weight:400}
.dv-err{color:#c0392b;font-size:.78rem;margin-top:.2rem;display:none}
.dv-f input.dv-invalid{border-color:#c0392b;background:#fdf3f2}
/* intl-tel-input : champ pleine largeur dans la cellule */
.dv-f-phone .iti{width:100%}
.dv-f-phone .iti input{width:100%}
.dv-modal-submit{width:100%;margin-top:1rem;padding:.85rem;font-size:1.05rem}
.dv-modal-fine{text-align:center;color:var(--muted);font-size:.78rem;margin:.6rem 0 0}

/* 1080 et non 900 : la colonne de droite est FIXE à 320 px, elle ne se réduit
   donc jamais et c'est le tableau qui absorbe tout le manque de place. Mesuré
   sur une Surface Pro 7 (912 px) : la grille ne disposait plus que de 541 px,
   et à 700 px de fenêtre elle tombait à 328 px, soit MOINS que sur un
   téléphone. La colonne passe donc sous le tableau bien plus tôt. */
@media(max-width:1080px){
  .dv-layout{grid-template-columns:1fr}
  /* Passee sous le tableau, la colonne de droite est concue pour 320 px et
     se retrouve a 880 : tout s y etire. Mesure a 912 px, elle occupait
     880x1226, soit 90 % dun ecran, pour un contenu de reference alors que
     le geste attendu est de choisir un prix DANS le tableau, au-dessus.
     Elle se replie donc en deux colonnes : carte et caracteristiques d un
     cote, prix d appel et recapitulatif de l autre. */
  .dv-aside{position:static;display:grid;gap:.9rem 1.2rem;align-items:start;
    grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:'carte prix' 'meta recap'}
  .dv-head-map{grid-area:carte;margin:0}
  .dv-meta{grid-area:meta;margin:0;padding:0;border:0}
  .dv-aside-head{grid-area:prix;margin:0}
  .dv-aside-card{grid-area:recap;position:static}
  /* La carte fait 300x200 a la source : etiree a 880 elle etait agrandie a
     293 % et devenait illisible. Elle ne depasse plus sa taille native. */
  .dv-head-map img{max-width:300px}
  /* Deux boutons de 850 px de large pour des actions secondaires : ils
     captaient l oeil au detriment du tableau, qui porte la decision. */
  .dv-choose-cheapest,.dv-aside-cta{max-width:340px}
}
@media(max-width:560px){.dv-form-grid{grid-template-columns:1fr}.dv-corner,.dv-cab,.dv-fam{min-width:150px;max-width:150px}.dv-scroll{scroll-padding-left:150px}}

/* ---- SÉLECTEUR DE DATE (mobile) ----
   La grille croise dates et cabines. Sous 620 px, il n'y a de place que pour
   un seul axe : mesuré à 390 px, la colonne des cabines figée (150 px) ne
   laissait que 206 px, soit une colonne de dates et un tiers. On garde donc
   les cabines en lignes et on ne montre qu'une date à la fois.
   Le tableau n'est pas reconstruit : le JS masque les colonnes non retenues.
   Une seule source de données, et la sélection d'une cellule fonctionne
   exactement comme ailleurs. */
.dv-datebar{display:none}
@media(max-width:620px){
  .dv-datebar{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem .8rem;
    border-bottom:1px solid var(--line);background:#fff;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dv-datebar::-webkit-scrollbar{display:none}
  .dv-datechip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.05rem;
    border:1px solid var(--line);background:#fff;border-radius:10px;
    padding:.4rem .7rem;cursor:pointer;color:var(--ink);line-height:1.15}
  .dv-dc-jour{font-weight:800;font-size:.95rem}
  .dv-dc-an{font-size:.7rem;color:var(--muted)}
  .dv-dc-prix{font-size:.72rem;font-weight:700;color:var(--brand-d);white-space:nowrap}
  /* Sélectionnée : bordure et fond de marque, jamais un simple changement de
     texte — la puce doit se repérer sans être lue. */
  .dv-datechip[aria-selected="true"]{border-color:var(--brand);background:#fff3e6}
  /* Les chevrons « dates précédentes / suivantes » font double emploi avec les
     puces, et c'est eux qui débordaient : la barre mesurait 380 px de large
     pour 324 px utiles, et le `overflow:hidden` de la carte les rognait.
     Le sélecteur de mois RESTE, lui : 12 % des croisières ont plus de 12 dates
     et jusqu'à 115, où faire défiler la bande de puces à la main ne tient pas.
     Il saute alors au premier départ du mois. */
  .dv-navbtn{display:none}
  /* Un seul mois au catalogue : le sélecteur n'aurait qu'une entrée. */
  .dv-nav.dv-nav-off{display:none}
  /* Le plein écran ouvre une fenêtre de `min(1000px, 92vw)`, soit 359 px pour
     un écran de 390 : 3 px de moins que la carte déjà affichée. */
  .dv-fs-open{display:none}
  /* Colonne masquée : la date non retenue, sa cellule de prix et sa date de
     retour disparaissent ensemble. */
  .dv-mono .dv-hide{display:none}
  /* Une seule colonne de dates : elle prend la place restante au lieu de
     rester à sa largeur mini. */
  .dv-mono .dv-date-col,.dv-mono .dv-retour-col{min-width:0}
}
/* La barre d'outils enroule déjà ses blocs, mais `.dv-nav` gardait ses trois
   commandes sur une seule ligne et sortait de la carte aux largeurs
   intermédiaires. */
.dv-nav{flex-wrap:wrap;justify-content:center}

.opt-country .lbl em{font-style:normal;color:var(--muted);font-weight:400;font-size:.85em}

.cc-meta i,.dv-meta i{color:var(--brand-d);width:1.05em;text-align:center}

/* ---- RETOUR EN HAUT ----
   Present sur toutes les pages, revele au-dela d'un ecran de defilement par
   site.js. Il sert surtout aux resultats : 30 barrettes de 377 px font plus de
   11 000 px de page.
   Pose a droite, au-dessus du pied de page mais sous le tiroir de connexion
   (offcanvas Bootstrap monte a 1045). Cercle plein orange, comme les CTA, mais
   sans l'inversion au survol de la charte : ce n'est pas un appel a l'action,
   c'est un outil de navigation. */
.to-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1030;
  width:44px;height:44px;border-radius:50%;border:2px solid var(--orange);
  background:var(--orange);color:#fff;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease}
.to-top.is-on{opacity:1;transform:none}
.to-top:hover{background:#fff;color:var(--orange)}
.to-top:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
/* Sur mobile le pouce occupe le coin droit : on le remonte au-dessus des
   barres de navigation des navigateurs. */
@media(max-width:620px){ .to-top{right:.9rem;bottom:1rem;width:40px;height:40px} }
@media(prefers-reduced-motion:reduce){ .to-top{transition:none} }

/* ---- RETOUR AUX FILTRES ----
   La colonne de facettes ne fait pas la hauteur de la page : passe son bas, plus
   rien ne permet d'y revenir sans remonter a la main sur plus de 12 000 px. Ce
   bouton n'apparait que lorsqu'elle est sortie du champ PAR LE HAUT.
   A GAUCHE, la ou sont les filtres, et pour ne pas se cogner au retour en haut
   qui occupe le coin droit. Pastille allongee et non ronde : il porte un
   libelle, et le compteur de filtres actifs. */
/* CALE SUR LA COLONNE DE FILTRES, PAS SUR LE BORD DE LA FENETRE.
   L aside vit dans un conteneur centre plafonne a 1 560 px ; epingle a
   `left:1.25rem`, le bouton s en eloignait d autant que l ecran est large —
   pres de 500 px a 2 545 px, ou il flottait seul dans la marge gauche au lieu
   de designer les filtres qu il ramene.
   `100%` et non `100vw` : sur un element fixe, le pourcentage se calcule sur
   le bloc conteneur initial, barre de defilement exclue — exactement la
   largeur sur laquelle le conteneur calcule sa propre marge automatique.
   `max()` couvre les ecrans plus etroits que 1 560, ou le calcul devient
   negatif : on retombe alors sur le retrait du conteneur. */
.to-filters{position:fixed;left:max(1.2rem, calc((100% - 1560px) / 2 + 1.2rem));bottom:1.25rem;z-index:1030;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:24px;border:2px solid var(--ink);
  background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:.88rem;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.22);
  opacity:0;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease}
.to-filters.is-on{opacity:1;transform:none}
.to-filters:hover{background:#fff;color:var(--ink)}
.to-filters:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.to-filters i{font-size:.85rem}
/* Compteur de filtres actifs : vide, il ne prend pas de place. */
.tf-n:empty{display:none}
.tf-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 .35rem;border-radius:20px;background:var(--orange);color:#fff;font-size:.74rem}
.to-filters:hover .tf-n{background:var(--orange)}
/* En dessous de 820 px la colonne devient un tiroir et le bouton « Filtrer » du
   haut de page joue deja ce role : celui-ci n'aurait rien a rouvrir. */
@media(max-width:1286px){ .to-filters{display:none} }
@media(prefers-reduced-motion:reduce){ .to-filters{transition:none} }

.ff-clear,.ff-apply{font-family:var(--font-head);font-weight:700;font-size:.95rem;
  padding:.75rem 1rem;border-radius:10px;cursor:pointer;border:2px solid transparent}
.ff-clear{flex:0 0 auto;border-color:var(--line);background:#fff;color:var(--body)}
.ff-clear:hover{border-color:var(--ink);color:var(--ink)}
/* Le bouton principal annonce le RESULTAT, pas l'action : les filtres
   s'appliquent en direct, il ne fait que refermer, mais donner le nombre evite
   d'avoir a refermer pour savoir ce qu'on a obtenu. */
.ff-apply{flex:1 1 auto;border-color:var(--orange);background:var(--orange);color:#fff}
.ff-apply:hover{background:#fff;color:var(--orange)}
.ff-clear:focus-visible,.ff-apply:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Page verrouillee pendant que le tiroir est ouvert : sans cela le geste de
   defilement se propage a la page derriere, qui fait 31 000 px sur mobile. */
html.drawer-open,html.drawer-open body{overflow:hidden}

/* ---- BOUTON « DÉTAIL DE L'ITINÉRAIRE » ---- */
.cc-iti{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;
  border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--body);
  font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.15s}
.cc-iti:hover{border-color:var(--orange);color:var(--orange)}
.cc-iti i{font-size:.72rem;color:var(--muted)}
.cc-iti:hover i{color:var(--orange)}

/* ---- FENÊTRE D'ITINÉRAIRE ----
   `<dialog>` natif : le voile, la mise au premier plan, le piège à focus et la
   fermeture par Échap viennent du navigateur, pas de notre code. */
.iti-modal{width:min(640px,92vw);max-height:86vh;padding:0;border:0;border-radius:14px;
  background:#fff;color:var(--body);box-shadow:0 24px 60px rgba(0,0,0,.3);
  overflow:hidden}
/* `display` UNIQUEMENT sur [open]. Pose sur `.iti-modal`, il ecrasait la
   regle du navigateur `dialog:not([open]){display:none}` : la fenetre se
   fermait — `open` repassait bien a false — mais restait AFFICHEE. */
.iti-modal[open]{display:flex;flex-direction:column}
.iti-modal::backdrop{background:rgba(16,16,20,.55)}
.iti-head{position:relative;padding:1.1rem 3.4rem .9rem 1.2rem;border-bottom:1px solid var(--line)}
.iti-head-txt{min-width:0}
.iti-zone{margin:0;font-family:var(--font-head);font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.iti-titre{margin:.15rem 0 0;font-family:var(--font-head);font-size:1.2rem;font-weight:800;
  color:var(--ink);letter-spacing:-.02em}
/* Bouton rond de 36 px dans le coin, et non une croix de 23x24 : la cible
   etait trop petite pour etre visee de façon fiable. Detache du flux pour
   tenir vraiment le coin, quelle que soit la hauteur du titre. */
/* Le <form method="dialog"> qui porte la croix ne doit rien peser dans la
   mise en page : c est la croix elle-meme qui tient le coin. */
.iti-close-form{margin:0;display:contents}
.iti-close{position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:50%;
  color:var(--body);font-size:1rem;line-height:1;cursor:pointer;transition:.15s}
.iti-close:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.iti-close:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Le corps défile seul : l'en-tête et le pied restent en place, un tour du
   monde faisant 105 escales. */
.iti-corps{overflow:auto;padding:0 1.2rem 1rem;flex:1 1 auto}
.iti-table{width:100%;border-collapse:collapse;font-size:.88rem}
.iti-table th{position:sticky;top:0;background:#fff;text-align:left;
  font-family:var(--font-head);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:.7rem .5rem .45rem;border-bottom:1px solid var(--line)}
.iti-table td{padding:.5rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.iti-table td:first-child{width:3.5rem;color:var(--muted);font-variant-numeric:tabular-nums}
.iti-table td:last-child{width:6.5rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.iti-vide{color:var(--muted)}
/* Les deux extremites sont les seules dates SURES : on les distingue. */
.iti-bout td{background:var(--orange-050)}
.iti-bout td:first-child{color:var(--brand-d);font-weight:700}
.iti-role{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-top:.1rem}
.iti-note{margin:.9rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.4}

.iti-pied{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.2rem;
  border-top:1px solid var(--line);background:var(--bg-soft)}
.iti-pied form{margin:0}
.iti-pied form:last-child{flex:1 1 auto}
.iti-retour{flex:0 0 auto;background:none;border:0;padding:.5rem;color:var(--muted);
  font-family:inherit;font-size:.88rem;font-weight:600;text-decoration:underline;cursor:pointer}
.iti-retour:hover{color:var(--ink)}
@media(max-width:620px){
  .iti-modal{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  .iti-pied{flex-direction:column-reverse;align-items:stretch}
}

/* ============================================================
   FOND DE LA PAGE DE RÉSULTATS
   ------------------------------------------------------------
   Barrettes, rail de filtres et entête de résultats sont tous
   blancs, sur un fond de page blanc lui aussi : seul un filet
   d'1 px les délimitait, et l'œil ne séparait plus les blocs de
   la page. Le fond passe donc en gris très doux, ce qui suffit
   à faire lire chaque bloc comme un panneau posé dessus, sans
   rien changer aux blocs eux-mêmes.
   Posé sur `body` et non sur `.results-wrap` : la grille est
   centrée et bornée à 1560 px, sa teinte s'arrêterait donc à
   ses bords au lieu de tenir toute la fenêtre.
   ============================================================ */
/* Une teinte a nous plutot que `--bg-soft` (#f7f7f9) : a 3 % du blanc, il ne
   separait rien. #f1f1f5 reste dans la famille de neutres du theme (entre
   `--bg-soft` et `--line` #e9e9ee), assez pour que les panneaux se detachent,
   assez peu pour rester discret. */
body.p-resultats{--page-bg:#f1f1f5;background:var(--page-bg)}

/* Le filet des blocs peut se détendre une fois qu'un contraste
   de fond fait le travail : il devient une finition, plus une
   béquille. On garde une ombre portée très basse, qui pose les
   panneaux sur le fond plutôt que de les y coller. */
body.p-resultats .cruise-card,
body.p-resultats .results-head{border-color:var(--line-2);box-shadow:0 1px 2px rgba(16,16,20,.04)}
/* Le rail de filtres n a droit a cette finition que tant qu il EST une
   colonne. Sous 1286 px il devient un tiroir plein ecran, qui pose
   volontairement `box-shadow:none` : une regle non bornee, plus specifique
   et plus bas dans le fichier, la reprenait. */
@media(min-width:1287px){
  body.p-resultats .facets{border-color:var(--line-2);box-shadow:0 1px 2px rgba(16,16,20,.04)}
}

/* ---- PROMESSE DU DEVIS (haut de page) ----
   L'argument qui nous distingue : la plupart des sites de croisière
   n'affichent qu'un « à partir de » et récoltent un contact pour rappeler.
   Ici la grille donne tous les tarifs, à la date et à la cabine près. Il
   était dit en bas de la colonne de droite, après la carte, les
   caractéristiques et le récapitulatif, donc là où plus personne ne le
   lisait. Il passe au-dessus de la grille, sur toute la largeur.
   Fond ambré du thème et non un aplat orange : il doit se voir sans entrer
   en concurrence avec le bouton d'action, seul élément orange plein. */
.dv-promesse{display:flex;align-items:flex-start;gap:.85rem;
  margin:0 0 1.1rem;padding:.9rem 1.1rem;
  background:#fff3e6;border:1px solid #f5d9bd;border-radius:12px}
.dv-promesse i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-size:1rem}
.dv-promesse strong{display:block;font-family:var(--font-head);font-weight:800;
  font-size:1.05rem;line-height:1.25;color:var(--ink);margin-bottom:.15rem}
.dv-promesse span{font-size:.92rem;line-height:1.45;color:var(--body)}
@media(max-width:620px){
  /* L'icône RESTE sur le côté. Passée au-dessus, elle ajoutait sa hauteur à
     celle du texte : 176 px de bannière sur un écran de 776, soit près d'un
     quart de l'écran avant d'atteindre le premier prix. Sur le côté elle ne
     coûte que 34 px de largeur sur 368, et rien en hauteur. */
  .dv-promesse{gap:.65rem;padding:.75rem .85rem}
  .dv-promesse i{width:28px;height:28px;font-size:.85rem}
  .dv-promesse strong{font-size:.98rem}
  .dv-promesse span{font-size:.88rem}
}

/* ---- EN-TÊTE NON COLLANT SUR LE DEVIS ----
   Ailleurs l'en-tête suit le défilement, ce qui garde le téléphone sous la
   main. Ici la page est une grille qu'on parcourt sur toute sa hauteur, et
   l'en-tête y confisquerait 74 px en permanence, soit près d'un dixième d'un
   écran de téléphone. Le numéro reste atteignable en haut de page et dans le
   menu, et la colonne de droite porte déjà le rappel du prix.
   On neutralise `position` seulement : la classe `sticky-top` de Bootstrap
   reste sur la balise, elle sert aussi le `z-index`. */
body.p-devis .site-header{position:static}

@media(max-width:620px){
  /* Le titre garde la priorité : le cadre se resserre pour ne pas lui voler
     la largeur. Mesuré à 375 px, un logo à pleine taille ne lui laissait que
     231 px et le poussait sur une ligne de plus. */
  .dv-head{gap:.7rem}
  .dv-head-cie{padding:.35rem .6rem}
  .dv-head-cie img{max-height:26px;max-width:88px}
}

/* ============================================================
   MOTEUR D'ENTRÉE : PANNEAUX EN FEUILLE PLEINE PAGE (mobile / tablette)
   ------------------------------------------------------------
   Les trois panneaux sont des menus déroulants ancrés sous leur champ.
   C'est juste sur un grand écran, intenable sur un téléphone. Mesuré à
   400x699, panneau ouvert :
     destination  ouvre à 543 px et finit à 907, soit 208 px SOUS l'écran
     dates        44 px hors écran
     durée        132 px hors écran, et surtout left:-58, donc 58 px
                  amputés à GAUCHE (le `translateX(-50%)` de la règle 820
                  appliqué à un panneau plus large que la place restante)
   Le défilement de la page n'était pas verrouillé non plus : le panneau,
   posé en absolu, partait avec la page dès qu'on la faisait glisser.
   On reprend le motif déjà éprouvé sur le tiroir de filtres des résultats :
   feuille PLEINE PAGE, entête collant, défilement contenu.
   `100dvh` et non `inset:0` : sur mobile, `bottom:0` se résout contre le
   GRAND viewport, barre d'adresse masquée, et la feuille dépasse d'autant.
   ============================================================ */
@media(max-width:820px){
  /* PREALABLE INDISPENSABLE : `.moteur` porte un `backdrop-filter`, ce qui
     fait de lui le bloc conteneur de tout `position:fixed` descendant. Les
     feuilles se calaient donc sur le moteur (left:17, top:270, 366 px de
     large) au lieu de l ecran. Le flou est decoratif : il saute sur ces
     largeurs, et le fond est un peu renforce pour compenser. */
  /* Selecteur aligne sur `.hero--home .moteur` (0-2-0) qui pose le flou :
     un simple `.moteur` (0-1-0) ne l emporte pas, l ordre dans le fichier
     n y changeant rien. */
  .hero--home .moteur{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(16,16,20,.72)}
  .dest-panel,.when-pop,.duree-panel{
    position:fixed;left:0;right:0;top:0;bottom:auto;
    width:auto;max-width:none;min-width:0;transform:none;
    height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0;box-shadow:none;
    overflow-y:auto;overscroll-behavior:contain;
    z-index:1035;
    padding:0 1rem calc(1.2rem + env(safe-area-inset-bottom));
  }
  /* L'entête reste sous la main : sur une liste de destinations longue de
     plusieurs écrans, une croix posée en haut du contenu devient
     inatteignable dès le premier glissement. */
  .panel-head{position:sticky;top:0;z-index:3;background:#fff;
    margin:0 -1rem .8rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  /* Le panneau des dates n a pas de `.panel-head` : son entete porte le
     titre ET trois commandes, qui sortaient de 78 px a droite faute de
     pouvoir passer a la ligne. */
  .when-top{position:sticky;top:0;z-index:3;background:#fff;flex-wrap:wrap;gap:.5rem;
    margin:0 -1rem .6rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
  .when-actions{flex-wrap:wrap}
  /* Les quatre modes de recherche (Rechercher / Etre inspire / + de details
     / Peu importe) tenaient sur une seule ligne insecable : 62 px sortaient
     de l ecran, dont le quatrieme bouton en entier. Ils passent en 2x2, ce
     qui les montre tous les quatre sans defilement. */
  .dmodes{flex-wrap:wrap}
  .dmodes button{flex:1 1 45%;white-space:normal;font-size:.82rem;padding:.55rem .35rem}
  /* Dans une feuille pleine page, la liste des mois prend la hauteur
     restante au lieu de se brider a 46 % de l ecran. */
  .when-scroll{max-height:none}
  /* Cible tactile : 20 px de large ne se vise pas au pouce. */
  .p-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;font-size:1.4rem;background:var(--bg-soft);color:var(--ink);padding:0}
  /* Le pied d'action suit le même principe, collé en bas de la feuille. */
  .dest-foot{position:sticky;bottom:0;background:#fff;margin:1.1rem -1rem 0;
    padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
    border-top:1px solid var(--line)}
  /* Le voile n'a plus lieu d'être : la feuille couvre tout l'écran, et il
     ne ferait qu'assombrir un panneau opaque. */
  body.m-open .m-overlay{opacity:0;visibility:hidden}
  /* Défilement de la page verrouillé tant qu'une feuille est ouverte. */
  body.m-open{overflow:hidden}
}

/* ============================================================
   CORRECTIFS TACTILES (audit du parcours, 2026-07-28)
   ============================================================ */

/* ---- 1. ZOOM AUTOMATIQUE iOS À LA SAISIE ----
   Tout champ sous 16 px fait zoomer Safari iOS à la mise au point : la page
   se décale au moment précis où l'on écrit, et il faut la repincer pour voir
   la suite du formulaire. Mesuré : les 6 champs du devis à 15,2 px et le
   sélecteur de mois à 14,4 px, soit exactement l'étape de conversion.
   Règle large et assumée : sous un pointeur grossier, aucun champ ne
   descend sous 16 px. C'est un plancher, pas une taille imposée. */
@media(pointer:coarse){
  /* Les `:not()` ne sont pas decoratifs, ils portent la specificite. Ecrit
     simplement `select` (0-0-1), la regle perdait contre `.dv-f select`
     (0-1-1) et les listes deroulantes restaient a 15,2 et 14,4 px, donc
     toujours zoomantes. `select:not([hidden]):not([multiple])` vaut 0-2-1
     et l emporte sans dependre de l ordre du fichier. Le selecteur des
     champs texte, lui, vaut deja 0-3-1. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select:not([hidden]):not([multiple]),
  textarea:not([hidden]){font-size:16px}
}

/* ---- 2. PIED D'ACTION DES PANNEAUX DU MOTEUR ----
   `sticky bottom` ne colle que s'il y a de quoi défiler. Contenu court, le
   pied se posait juste après lui : « Appliquer » finissait à 423 px avec
   421 px de vide en dessous, sur un écran de 844. Les panneaux deviennent
   des colonnes et le pied prend la place restante ; quand le contenu
   déborde, le `sticky` reprend la main. */
@media(max-width:820px){
  .dest-panel,.when-pop,.duree-panel{display:flex;flex-direction:column}
  /* Et surtout PAS de rembourrage bas sur le panneau qui porte un pied
     collant : `sticky bottom:0` s arrete au bord du PADDING, pas au bord de
     la feuille. Il restait donc une bande de 19 px sous « Appliquer » dans
     laquelle le contenu defilait — mesure : une tuile depassait de 10 px
     sous la barre d action, visible uniquement dans « Etre inspire » et
     « + de details », les deux seuls modes assez longs pour defiler.
     Le rembourrage (zone sure de l ecran comprise) est deja porte par le
     pied lui-meme. */
  .dest-panel{padding-bottom:0}
  .dest-foot{margin-top:auto}
  /* Le corps pousse le pied vers le bas au lieu de le laisser flotter. */
  .dmode.on,.when-scroll{flex:1 0 auto}
}

/* ---- 3. SURSAUT DE MISE EN PAGE DU LOGO COMPAGNIE ----
   Le cadre n'avait aucune dimension réservée : 21x13 tant que l'image
   distante n'était pas là, puis un bond à 105x56 juste à côté du titre. La
   boîte de l'image est donc figée, et c'est `object-fit` qui adapte le
   visuel dedans. */
.dv-head-cie img{width:132px;height:38px}
@media(max-width:620px){ .dv-head-cie img{width:88px;height:26px} }

/* ---- 4. CARROUSEL DE DATES DES CARTES ----
   Sur 390 px, le libellé prenait 142 px et les flèches 44 : il ne restait
   que 123 px de fenêtre pour 12 dates, à faire défiler par une fente. Le
   libellé passe sur sa propre ligne, et les flèches disparaissent au doigt,
   où le glissement est le geste naturel. Fenêtre portée à ~318 px. */
@media(max-width:620px){
  .cc-dates{flex-direction:column;align-items:stretch;gap:.3rem}
  .cc-dates-head{margin-bottom:.1rem}
}
@media(pointer:coarse){
  .cc-dates.is-scrollable .cc-dates-arw{display:none}
}

/* ---- 5. CIBLES TACTILES ----
   Mesurées sous 40 px sur le parcours. Le numéro de téléphone est le pire
   cas : 17 px de haut pour l'action de contact la plus directe du site. */
@media(pointer:coarse){
  .hd-phone{padding:.6rem 0;min-height:44px}
  /* Le burger est le SEUL acces a la navigation sur mobile : 26x28 pour
     ouvrir tout le menu ne se defend pas. */
  .hd-burger{min-width:44px;min-height:44px;justify-content:center;padding:0}
  /* Bascule tri-état des zones : 20x20, la plus petite du parcours. */
  .zt-tw{width:28px;height:28px}
  /* Retrait d'une destination retenue dans le moteur. */
  .dchip-x{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
  /* Croix des tiroirs et fenêtres, alignées sur les 40 px déjà retenus
     pour celle des panneaux du moteur. */
  /* `.p-close` (croix des panneaux du moteur) etait dimensionnee dans le bloc
     `max-width:820px`, celui de la feuille plein ecran. Sur une tablette
     tactile de 912 px la regle ne s appliquait donc pas et la croix restait
     a 24x24. C est le POINTEUR qui commande la taille d une cible, pas la
     largeur de l ecran. */
  .facets-close,.dv-modal-x,.p-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
}

/* ---- ARBRE DES DESTINATIONS : lisibilité et cibles ----
   Les comptes alignés à droite et en chiffres de largeur fixe : c'est une
   colonne de nombres, elle doit se lire comme telle. */
.dco-n{margin-left:auto;font-variant-numeric:tabular-nums}
.dco{border-radius:6px;padding-inline:.25rem}
.dco:hover{background:var(--orange-050)}
/* La case était à 13x13, sur une ligne de 25 px de haut. */
.dco input{width:1.05rem;height:1.05rem;flex:0 0 auto}
@media(pointer:coarse){
  /* 54 lignes à cocher : au doigt, 25 px de haut se manquent une fois sur
     deux, et la voisine se coche à la place. */
  .dco{padding-block:.45rem}
  .dco input{width:1.2rem;height:1.2rem}
  .fam-all{padding-block:.7rem}
}

/* ---- Panneau « Quand ? » : pied d'action collant sur mobile ----
   Aligné sur le panneau Destination. Les trois commandes tenaient dans
   l'entête, où elles se disputaient la largeur : la croix y tombait à 20 px
   et « Effacer » à 25 px de haut. */
@media(max-width:820px){
  /* Le panneau Duree suit la meme regle que celui des dates. */
  .when-actions,.panel-actions{position:sticky;bottom:0;margin:auto -1rem 0;
    padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -6px 16px rgba(20,22,26,.08);z-index:3}
  /* Même raison que pour la destination : `sticky bottom:0` s'arrête au bord
     du rembourrage, qui laisserait défiler le contenu sous la barre. */
  .when-pop,.duree-panel{padding-bottom:0}
  .when-scroll{flex:1 0 auto}
  .wa-apply,.duree-panel .pa-apply{flex:1;padding-block:.8rem}
  .wa-clear,.pa-clear{padding:.8rem .6rem}
  /* L'entête ne porte plus que les onglets et la croix : plus besoin de la
     faire enrouler. */
  .when-top{flex-wrap:nowrap}
}

/* ============================================================
   TABLETTE EN PORTRAIT (821 → 980 px) : BARRETTE RESSERRÉE
   ------------------------------------------------------------
   À cette largeur la photo devient un bandeau vertical : mesuré à 912 px,
   cadre 200x504 pour une source de 650x430, soit 26 % de l'image visible,
   les 74 % restants rognés. On ne reconnaît plus le navire.
   La cause n'est pas la largeur de la colonne mais la HAUTEUR de la
   barrette : la photo occupe toute la rangée, elle suit donc ce que le
   corps impose. Sous 1487 px le parcours passe sous la carte, ce qui
   laissait 132 px vides à sa droite et allongeait la barrette de 165 px.
   On reprend donc cette place au lieu de la laisser perdue.
   ============================================================ */
@media(min-width:821px) and (max-width:980px){
  /* La carte revient À CÔTÉ des informations. */
  .cc-duo{grid-template-columns:auto minmax(0,1fr);gap:.7rem}
  /* Carte réduite jusqu à ce que les DEUX pastilles tiennent sur une seule
     ligne : mesuré, elles réclament 166 px et n en avaient que 148, si bien
     que les 30 barrettes de la page passaient toutes sur deux lignes. Le pire
     cas réel est le tri par durée décroissante, où les tours du monde
     affichent « 104 escales + 42 pays », soit 187 px. À 228x152 la colonne
     de texte en reçoit 191, ce qui les couvre tous. Le trait d itinéraire
     reste parfaitement lisible : c est une ligne sur un fond clair, pas une
     carte à déchiffrer. */
  .cc-map{width:228px;height:152px}
  /* La liste des escales part, et c'est elle qui rend le plus de hauteur.
     Les noms ne sont pas perdus : le bouton « Détail de l'itinéraire »
     reste et les donne tous, dans l'ordre et avec les dates. */
  .cc-route{display:none}
  .cc-duo-info>.cc-trajet{align-self:stretch}
  .cc-duo-info .cc-trajet-ports{-webkit-line-clamp:3}
  /* Le bouton doit tenir dans la colonne rendue, large d'environ 150 px. */
  .cc-iti{font-size:.76rem;padding:.35rem .55rem}
  /* AUCUN plancher de hauteur ici, contrairement aux largeurs supérieures.
     Mesuré : le maximum était tiré par UNE barrette portant à la fois trois
     avantages et un signal d urgence, 395 px quand 19 des 30 se contentent
     de 340 à 360. Aligner tout le monde sur ce cas isolé ajoutait jusqu à
     80 px de vide à chaque barrette, et rallongeait d autant la photo, qui
     occupe toute la rangée : le remède nourrissait le mal qu il devait
     corriger. Sur une colonne unique et étroite, la comparaison se fait de
     proche en proche, elle n a pas besoin d une grille au cordeau. */
  .cruise-card{min-height:0}
}

/* ---- CIBLES TACTILES : SUITE DE L'AUDIT TABLETTE ----
   Relevées à 912 px sur une Surface Pro 7. Le doigt y est le même qu'à
   400 px, seule la largeur change. */
@media(pointer:coarse){
  .nav-signin{min-height:44px}
  /* « Voir toutes les croisières » ne faisait que 20 px de haut : c'est un
     lien de repli du héros, mais c'est aussi la seule sortie pour qui ne
     veut pas remplir le moteur. */
  .hero-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- LA GRILLE DE DEVIS CONTINUE À DROITE, ET ÇA SE VOIT ----
   Mesuré à 912 px : 878 px visibles pour 2 030 de contenu, soit 1 152 px
   hors champ, avec une barre de défilement volontairement masquée. Les
   chevrons « Dates précédentes / suivantes » existent, mais rien ne disait
   que la grille se poursuivait.
   Ombres de défilement en pur CSS : les deux dégradés blancs sont ancrés au
   CONTENU (`local`), les deux ombres au CADRE (`scroll`). Une ombre n'est
   donc visible que si le dégradé blanc qui la masque a défilé, c'est-à-dire
   uniquement du côté où il reste quelque chose à voir. Aucun JS, et l'état
   se corrige tout seul en fin de course.
   Écarté sous 620 px : en vue mobile une seule date est affichée, la grille
   ne défile plus.
   NUANCE ASSUMÉE : l ombre est peinte sur le FOND du conteneur, elle n est
   donc visible qu à travers les cellules transparentes, c est-à-dire les
   lignes de prix. Les lignes à fond plein (entête des dates, dates de
   retour, bandeaux de famille) la masquent. Ce sont les lignes de prix qui
   occupent l essentiel de la hauteur et qui retiennent le regard, le signal
   passe donc où il compte. */
@media(min-width:621px){
  .dv-scroll{
    background:
      linear-gradient(to right, #fff 40%, rgba(255,255,255,0)) left center / 44px 100% no-repeat local,
      linear-gradient(to left,  #fff 40%, rgba(255,255,255,0)) right center / 44px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,   rgba(16,16,20,.16), rgba(16,16,20,0)) left center / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(16,16,20,.16), rgba(16,16,20,0)) right center / 16px 100% no-repeat scroll;
  }
}

/* ============================================================
   981 → 1286 px : LA CARTE REVIENT À CÔTÉ DU PARCOURS
   ------------------------------------------------------------
   La règle qui fait passer le parcours SOUS la carte est bornée à 1487 px.
   Elle se justifie entre 1287 et 1487, où la colonne de filtres occupe
   320 px et ne laisse qu'environ 430 px à la zone descriptive. En dessous
   de 1286 px les filtres passent en tiroir : la barrette récupère toute la
   largeur, et cette même règle continuait pourtant de s'appliquer.
   Résultat, la carte gardait 132 px de vide à sa droite et la barrette
   s'allongeait d'autant, ce que la photo subit puisqu'elle occupe toute la
   rangée. C'est le même défaut que celui corrigé sur tablette, sur une
   plage qui avait été oubliée.
   Ici la liste des escales RESTE : la zone descriptive dispose de 186 px au
   plus étroit et de 389 au plus large, contre 141 sur la vue tablette où
   il fallait la sacrifier.
   ============================================================ */
@media(min-width:981px) and (max-width:1286px){
  .cc-duo{grid-template-columns:auto minmax(0,1fr);gap:.7rem}
  /* 260x173 : assez petite pour rendre la place aux deux pastilles, assez
     grande pour que le tracé reste lisible. */
  .cc-map{width:260px;height:173px}
  .cc-duo-info>.cc-trajet,.cc-duo-info>.cc-route{align-self:stretch}
  .cc-duo-info .cc-route-ports{-webkit-line-clamp:2}
  /* Hauteur adaptée au contenu, comme sur tablette : un plancher aligne
     toutes les barrettes sur le cas le plus chargé, et rallonge la photo
     d'autant. */
  .cruise-card{min-height:0}
}

/* ============================================================
   TIROIR DE FILTRES : PARTIEL SUR TABLETTE, PLEIN ÉCRAN SUR MOBILE
   ------------------------------------------------------------
   Plein écran, le tiroir coupe tout lien avec les résultats : on règle un
   filtre sans rien voir de son effet, on referme, on constate, on rouvre.
   Sur mobile il n'y a pas le choix, la largeur ne le permet pas. Sur
   tablette si : un panneau de 420 px laisse voir les premières barrettes,
   qui se rafraîchissent en direct, et le compteur du pied dit le reste.
   Le voile est volontairement LÉGER : un fond très sombre rendrait
   illisible ce qu'on cherche justement à observer.
   ============================================================ */
@media(min-width:621px) and (max-width:1286px){
  .facets{
    /* `inset:0` posait aussi `right:0` : il faut le relâcher pour donner
       une largeur au panneau. */
    right:auto;width:min(420px,84vw);
    border-right:1px solid var(--line);
    box-shadow:0 0 44px rgba(16,16,20,.22);
  }
  /* Voile discret sur la partie visible des résultats : il signale que le
     panneau a la main, sans masquer les barrettes. Posé sur `html` plutôt
     que sur un élément dédié, qui n'existe pas ici. */
  html.drawer-open body::after{
    content:"";position:fixed;inset:0;z-index:1039;
    background:rgba(16,16,20,.18);pointer-events:none;
  }
}

/* La croix de fermeture, partout où le tiroir existe. Elle était un simple
   caractère sans cadre sur la bande sombre : on ne la lisait pas comme un
   bouton. Elle devient une pastille, calée dans le coin supérieur droit. */
@media(max-width:1286px){
  .facets-close{display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;flex:0 0 auto;margin-left:.2rem;
    border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
    font-size:1.15rem;line-height:1;padding:0}
  .facets-close:hover{background:rgba(255,255,255,.26)}
}

/* ---- PISTE 2 : LE PANNEAU EST AUSSI L'ENTRÉE « MODIFIER SA RECHERCHE » ----
   Deux intitulés pour deux rôles, un seul rendu à la fois. */
.fh-tiroir{display:none}
@media(max-width:1286px){
  .fh-rail{display:none}
  .fh-tiroir{display:inline}
  /* Le rappel de la recherche n'a de sens qu'en mode tiroir : tant que la
     colonne est là, les pastilles de la tête de page restent sous les yeux. */
  .facets-chips{display:flex;flex-wrap:wrap;gap:.35rem;
    margin:0 -.9rem .5rem;padding:.6rem .9rem;background:var(--bg-soft);
    border-bottom:1px solid var(--line)}
  .facets-chips[hidden]{display:none}
}
/* En colonne permanente, le doublon serait du bruit. */
@media(min-width:1287px){ .facets-chips{display:none} }

/* Le déclencheur porte un libellé plus long : il lui faut la place. */
@media(max-width:1286px){
  .filters-toggle{max-width:calc(100vw - 2rem)}
}

/* ---- ENTÊTE : L'AVATAR DU COMPTE ET SON MENU ----
   Le bouton à texte de la barre est remplacé par l'avatar rond (référence
   Facebook, demande du user) : les blocs qui le compactaient sous 1080 px
   sont partis avec lui. Le `nav-signin` du TIROIR mobile, lui, reste — la
   place n'y manque pas. */
.hd-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;text-decoration:none}
.hd-avatar img{width:36px;height:36px;border-radius:50%;object-fit:cover;display:block}
.hd-avatar-init{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink);
  font-weight:700;font-size:.95rem}
.hd-avatar:hover img,.hd-avatar:hover .hd-avatar-init{box-shadow:0 0 0 2px var(--orange)}
/* Le petit chevron en badge, comme la référence : c'est lui qui dit « menu ». */
.hd-avatar-chev{position:absolute;right:-2px;bottom:-2px;display:inline-grid;place-items:center;
  width:15px;height:15px;border-radius:50%;background:var(--bg-soft);
  border:1px solid var(--line);color:var(--ink)}
.hd-avatar-chev i{font-size:.5rem}
.hd-avatar[aria-expanded="true"] .hd-avatar-chev i{transform:rotate(180deg)}

/* Le menu du compte : carte d'identité, liens iconés, pied. */
.hd-cp{padding:0}
.hd-cp-tete{display:flex;align-items:center;gap:.7rem;padding:.85rem .9rem;
  border-bottom:1px solid var(--line-2,#f1f1f4);text-decoration:none;color:var(--ink)}
.hd-cp-tete img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.hd-cp-tete .hd-avatar-init{width:44px;height:44px}
.hd-cp-tete strong{display:block;font-size:.95rem}
.hd-cp-tete small{color:var(--muted);font-size:.78rem}
a.hd-cp-tete:hover strong{color:var(--orange)}
.hd-cp-tete--invite{display:block}
.hd-cp-tete--invite small{display:block;margin-top:.1rem}
.hd-cp-liste{display:block;padding:.35rem 0}
.hd-cp-liste a,.hd-cp-pied a{display:flex;align-items:center;gap:.65rem;
  padding:.5rem .9rem;text-decoration:none;color:var(--ink);font-size:.9rem;font-weight:500}
.hd-cp-liste a:hover,.hd-cp-pied a:hover{background:var(--bg-soft);color:var(--orange)}
.hd-cp-ico{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;
  border-radius:50%;background:var(--bg-soft);color:var(--ink);font-size:.8rem}
.hd-cp-liste a:hover .hd-cp-ico,.hd-cp-pied a:hover .hd-cp-ico{background:rgba(255,99,0,.12);color:var(--orange)}
.hd-cp-pied{border-top:1px solid var(--line-2,#f1f1f4);padding:.35rem 0}
/* Le CTA du visiteur suit la charte : plein orange, survol inversé. */
.hd-cp-cta{justify-content:center;margin:.5rem .9rem .2rem;border-radius:10px;
  background:var(--orange);color:#fff!important;border:2px solid var(--orange);font-weight:700}
.hd-cp-cta:hover{background:#fff!important;color:var(--orange)!important}

/* ---- LOUPE D'ENTÊTE (page de résultats) ----
   ELLE N'EXISTE QUE QUAND LES FILTRES SONT CACHÉS (signalé par le user,
   2026-08-09) : au-dessus de 820 px les facettes sont une colonne permanente
   déjà sous les yeux — un bouton qui « amène aux filtres visibles » ne sert
   personne. Elle ne vit donc que dans la bande 441-820 px, où les facettes
   sont un tiroir : elle l'ouvre, en doublant volontairement le bouton
   flottant du bas (l'un est sous le pouce, l'autre là où l'œil cherche
   une recherche). */
.hd-search,.hd-zone--search{display:none}
@media(max-width:820px){
  .hd-zone--search{display:flex}
  .hd-search{display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:2px solid var(--orange);border-radius:10px;
    background:#fff;color:var(--orange);font-size:1rem;cursor:pointer;transition:.14s}
  .hd-search:hover{background:var(--orange);color:#fff}
}
@media(pointer:coarse) and (max-width:820px){ .hd-search{width:44px;height:44px} }
/* Sous 440 px la loupe cède aussi : elle DOUBLE le bouton flottant du bas
   (voulu à sa création), et c'est elle qui refaisait déborder la barre de
   10 px sur la page de résultats — la seule à la porter. */
@media(max-width:440px){ .hd-search,.hd-zone--search{display:none} }
@media(max-width:620px){
  /* Sur 390 px il ne restait que 34 px de libres dans la barre : la loupe et
     ses 44 px n'y entrent pas. C'est le mot « okcroisiere » qui cède, le
     pictogramme de marque restant en place. Uniquement sur cette page. */
  body.p-resultats .brand-name{display:none}
  .hd-zone--search{padding-left:.6rem;margin-left:.6rem}
}

/* ---- LIBELLÉ COURT DU BOUTON FLOTTANT ---- */
.ft-court{display:none}
@media(max-width:620px){
  .ft-long{display:none}
  .ft-court{display:inline}
}
/* Le libellé ne doit jamais s'enrouler : la pastille flottante montait à
   102 px de haut pour trois lignes de texte. */
.filters-toggle{white-space:nowrap}

/* ============================================================
   PIED DE PAGE — porté de refacto, écrit MOBILE D'ABORD
   ------------------------------------------------------------
   Le pied legacy empile neuf blocs dont huit colonnes de liens. Déplié sur
   un téléphone, cela fait près de 2 000 px de pied sous un contenu déjà
   long. La règle de base est donc la colonne unique et les listes repliées ;
   les paliers supérieurs ne font que redéployer ce qui tient.
   ============================================================ */
.site-footer{background:var(--black);color:rgba(255,255,255,.7);margin-top:3rem;
  padding:2rem 0 1.5rem;font-size:.92rem;line-height:1.55}
.ft-wrap{max-width:1280px;margin:0 auto;padding:0 1rem;
  display:flex;flex-direction:column;gap:1.5rem}

/* ---- Marque ---- */
.ft-logo img{display:block;height:36px;width:auto}
.ft-baseline{margin:.7rem 0 0;max-width:52ch;color:rgba(255,255,255,.6)}

/* ---- Cartes d'action (contact, lettre, avis, Le Mag) ----
   Un fond légèrement éclairci plutôt qu'une bordure : sur un aplat noir,
   c'est le contraste de surface qui sépare, pas un trait. */
.ft-cards{display:flex;flex-direction:column;gap:1rem}
.ft-card{background:rgba(255,255,255,.06);border-radius:12px;padding:1.1rem}
.ft-card-title{font-family:var(--font-head);font-size:1.05rem;font-weight:800;
  color:#fff;margin:0 0 .35rem;line-height:1.25}
.ft-card-title i{color:var(--orange);margin-right:.35rem}
.ft-card-sub{margin:0 0 .8rem;color:rgba(255,255,255,.62);font-size:.88rem}
.ft-fine{margin:.6rem 0 0;font-size:.78rem;color:rgba(255,255,255,.48);line-height:1.45}
.ft-fine a{text-decoration:underline}

/* Le numéro est l'action la plus directe du pied : il est traité comme telle. */
.ft-phone{display:flex;align-items:center;gap:.7rem;color:#fff;padding:.2rem 0}
.ft-phone i{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;background:var(--orange);color:#fff}
/* `nowrap` : un numéro qui se coupe sur deux lignes ne se lit ni ne se
   compose — le piège du « € » orphelin, version téléphone (signalé par le
   user sur le pied du tunnel). */
.ft-phone strong{display:block;font-family:var(--font-head);font-size:1.35rem;letter-spacing:-.01em;white-space:nowrap}
.ft-phone small{display:block;color:rgba(255,255,255,.6);font-size:.78rem}
.ft-phone:hover strong{color:var(--orange)}

.ft-hours{margin-top:.7rem}
.ft-hours summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .8rem;border:1px solid rgba(255,255,255,.22);border-radius:8px;
  font-size:.84rem;font-weight:600;color:#fff;min-height:40px}
.ft-hours summary::-webkit-details-marker{display:none}
.ft-hours summary:hover{border-color:var(--orange);color:var(--orange)}
.ft-hours ul{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.ft-hours li{display:flex;justify-content:space-between;gap:1rem;
  padding-bottom:.3rem;border-bottom:1px solid rgba(255,255,255,.1);font-size:.86rem}
.ft-hours strong{color:#fff;font-variant-numeric:tabular-nums}

/* ---- Formulaire de la lettre d'information ----
   Empilé sur téléphone : côte à côte, le champ e-mail tombait sous 150 px. */
.ft-news-form{display:flex;flex-direction:column;gap:.5rem}
.ft-news-form input{padding:.75rem .85rem;border:1px solid rgba(255,255,255,.2);border-radius:10px;
  background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:16px}
.ft-news-form input::placeholder{color:rgba(255,255,255,.45)}
.ft-news-form input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:transparent}
.ft-news-form button{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:46px;padding:.7rem 1.1rem;border:2px solid var(--orange);border-radius:10px;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:.95rem;cursor:pointer;transition:.14s}
.ft-news-form button:hover{background:#fff;color:var(--orange)}

/* ---- Boutons des cartes : charte CTA, l'inverse au survol ---- */
.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  min-height:46px;padding:.7rem 1.1rem;border:2px solid var(--orange);border-radius:10px;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:.95rem;transition:.14s;text-align:center}
.ft-btn:hover{background:#fff;color:var(--orange)}
.ft-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.ft-btn--ghost:hover{background:#fff;color:var(--black);border-color:#fff}
.ft-mag-actions{display:flex;flex-direction:column;gap:.5rem}

/* ---- Les huit colonnes de liens, repliées ----
   `<details>` : ouverture au clic sans une ligne de script, et le contenu
   reste dans le DOM pour les moteurs. */
.ft-nav{display:flex;flex-direction:column;gap:0;
  border-top:1px solid rgba(255,255,255,.12)}
.ft-col{border-bottom:1px solid rgba(255,255,255,.12)}
.ft-col summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem .2rem;min-height:48px;
  font-family:var(--font-head);font-weight:700;font-size:.95rem;color:#fff}
.ft-col summary::-webkit-details-marker{display:none}
.ft-col summary i{font-size:.72rem;color:rgba(255,255,255,.5);transition:transform .18s}
.ft-col[open] summary i{transform:rotate(180deg)}
.ft-col ul{list-style:none;margin:0;padding:0 .2rem .9rem;
  display:flex;flex-direction:column;gap:.1rem}
.ft-col li a{display:block;padding:.5rem 0;color:rgba(255,255,255,.72);font-size:.9rem}
.ft-col li a:hover{color:var(--orange)}
.ft-more a{color:var(--orange);font-weight:700}

/* ---- Paiement et réseaux ---- */
.ft-bottom{display:flex;flex-direction:column;gap:1.2rem;
  padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.12)}
.ft-mini-title{font-family:var(--font-head);font-size:.74rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.5);margin:0 0 .55rem}
.ft-pay-logos{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
/* 42 px de haut et non 26 : « visibles tels qu'ils sont » (demande du user).
   Les fichiers font 80×60 avec fond transparent — la pastille blanche reste,
   c'est elle qui les rend lisibles sur le pied noir. */
.ft-pay-logos img{height:42px;width:auto;background:#fff;border-radius:8px;padding:.25rem .4rem}
.ft-social ul{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
/* Préfixé `.site-footer` : `theme.css` pose `.site-footer a:hover{color:var(--orange)}`
   (0-2-1), qui battait `.ft-soc:hover` (0-2-0) — au survol l'icône devenait
   orange SUR le rond orange, donc invisible (signalé par le user). On relève
   la spécificité, jamais un !important — le piège de cascade du §5. */
.site-footer .ft-soc{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1rem;transition:.14s}
.site-footer .ft-soc:hover{background:var(--orange);color:#fff}

/* ---- Mentions ---- */
.ft-legal{display:flex;flex-direction:column;gap:.7rem;
  padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem;color:rgba(255,255,255,.5)}
.ft-legal p{margin:0}
.ft-adresse{color:rgba(255,255,255,.38)}
.ft-legal ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0}
.ft-legal a{color:rgba(255,255,255,.62)}
.ft-legal a:hover{color:var(--orange)}

/* ============ À partir de 620 px : les cartes se mettent en ligne ============ */
@media(min-width:621px){
  .site-footer{padding:2.5rem 0 1.5rem}
  .ft-wrap{padding:0 1.5rem;gap:1.75rem}
  .ft-news-form{flex-direction:row}
  .ft-news-form input{flex:1;min-width:0}
  .ft-mag-actions{flex-direction:row}
  .ft-bottom{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:2rem}
  .ft-legal{flex-direction:row;justify-content:space-between;align-items:center}
}

/* ============ À partir de 861 px : deux colonnes de liens ============ */
@media(min-width:861px){
  .ft-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;border-top:0}
}

/* ============ À partir de 1024 px : le pied se déploie ============
   Les listes n'ont plus besoin d'être repliées : `open` est imposé et le
   marqueur disparaît. Le contenu était déjà là, seule sa présentation
   change. */
@media(min-width:1024px){
  .ft-card{padding:1.25rem}
  /* Contact, lettre et avis sur une ligne ; Le Mag en bandeau sous eux. */
  /* `stretch` et non `start` : contact, avis et Mag À LA MÊME HAUTEUR
     (demande du user) — la rangée s'aligne sur la plus haute. */
  .ft-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:stretch}
  .ft-nav{grid-template-columns:repeat(4,1fr);column-gap:2rem;row-gap:.5rem}
  .ft-col{border-bottom:0}
  .ft-col summary{pointer-events:none;padding:0 0 .6rem;min-height:0;
    font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--orange)}
  .ft-col summary i{display:none}
  .ft-col ul{padding:0}
  .ft-col li a{padding:.28rem 0}
}

/* ---- PIED DE TUNNEL (résultats, devis) ----
   Réduit à ce qui sert la réservation. Il ne reste que trois blocs, il n'a
   donc pas besoin de la respiration d'un pied complet, et il ne doit pas
   repousser le contenu qui, lui, porte la décision. */
.site-footer--tunnel{padding:1.5rem 0 1.25rem;margin-top:2rem}
.site-footer--tunnel .ft-wrap{gap:1.1rem}
.site-footer--tunnel .ft-baseline{display:none}
.site-footer--tunnel .ft-logo img{height:28px}
@media(min-width:861px){
  /* Marque, conseiller et paiement sur une ligne : trois blocs courts qui
     s'alignent au lieu de s'empiler. */
  .site-footer--tunnel .ft-wrap{display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;gap:1.5rem 2rem}
  /* Le pied complet met `.ft-cards` en grille de 3 : ici elle ne contient
     QUE la carte contact, qui se retrouvait dans un tiers de colonne — le
     numéro passait sur plusieurs lignes. Une carte = un bloc. */
  .site-footer--tunnel .ft-cards{grid-column:2;display:block}
  .site-footer--tunnel .ft-bottom{grid-column:3;border-top:0;padding-top:0}
  .site-footer--tunnel .ft-legal{grid-column:1 / -1}
  .site-footer--tunnel .ft-card{background:transparent;padding:0}
}

/* ============================================================
   PAGES ÉDITORIALES (`/informations/...`) — mobile d'abord
   ============================================================ */
.cp-wrap{max-width:820px;margin:0 auto;padding:1.25rem 1rem 2rem}

/* ---- Fil d'Ariane ---- */
.fil{margin:0 0 1rem;font-size:.8rem;color:var(--muted)}
.fil ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:0;padding:0}
/* Le chevron est décoratif : il est en CSS, pas dans le balisage, pour ne pas
   se retrouver lu à voix haute ni recopié dans le JSON-LD. */
.fil li+li::before{content:"›";margin-right:.3rem;color:rgba(0,0,0,.28)}
.fil a{color:var(--muted)}
.fil a:hover{color:var(--orange)}
.fil [aria-current]{color:var(--ink);font-weight:600}

/* ---- Titre et chapô ---- */
.cp-head{margin-bottom:1.4rem;padding-bottom:1.1rem;border-bottom:2px solid var(--line)}
.cp-h1{font-size:1.65rem;line-height:1.2;margin:0 0 .6rem}
.cp-resume{margin:0;font-size:1.02rem;line-height:1.55;color:var(--body)}
.cp-maj{margin:.7rem 0 0;font-size:.78rem;color:var(--muted)}

/* ---- Le contenu rédigé ----
   Repris du legacy tel quel : ces règles l'habillent sans le réécrire.
   Mesure de confort avant tout, la colonne est bornée à 820 px. */
.cp-body{font-size:1rem;line-height:1.7;color:var(--body)}
.cp-body > *:first-child{margin-top:0}
.cp-body p{margin:0 0 1.05rem}
.cp-body h2{font-size:1.3rem;line-height:1.25;margin:2rem 0 .7rem;color:var(--ink)}
.cp-body h3{font-size:1.08rem;line-height:1.3;margin:1.5rem 0 .5rem;color:var(--ink)}
.cp-body h4{font-size:.98rem;margin:1.2rem 0 .4rem;color:var(--ink)}
/* Un filet orange court sous les h2 : il découpe un texte long sans ajouter
   de bruit, et c'est le seul accent de couleur de la zone de lecture. */
.cp-body h2::after{content:"";display:block;width:44px;height:3px;border-radius:2px;
  background:var(--orange);margin-top:.5rem}
.cp-body ul,.cp-body ol{margin:0 0 1.05rem;padding-left:1.3rem}
.cp-body li{margin-bottom:.4rem}
.cp-body li::marker{color:var(--orange)}
.cp-body strong{color:var(--ink);font-weight:700}
.cp-body a{color:var(--brand-d);text-decoration:underline;text-underline-offset:2px}
.cp-body a:hover{color:var(--orange)}
/* Les images du legacy portent des largeurs en dur et des flottants Bootstrap 3 :
   sur un téléphone ils débordent ou coincent le texte dans 80 px. */
.cp-body img{max-width:100%;height:auto;display:block;margin:1rem auto;border-radius:10px}
.cp-body .float-left,.cp-body .float-right,.cp-body .image-left{float:none!important;margin:1rem auto!important}

/* UNE IMAGE DANS UN TITRE EST UNE ICONE, pas une illustration.
   Le guide de la Mediterranee ouvre chacune de ses sections par le drapeau du
   pays, place DANS le `<h2>` : les deux regles ci-dessus en faisaient un bloc
   centre sur sa propre ligne, le drapeau flottait donc au-dessus du titre au
   lieu de le preceder. Quatre titres concernes.

   ATTENTION A LA SPECIFICITE, le piege s est referme une fois ici. Un
   `!important` des deux cotes ne tranche pas : c est alors la specificite qui
   decide, et `.cp-body .float-left` vaut (0-2-0) quand un simple
   `.cp-body :is(h1..h6) img` ne vaut que (0-1-2). La regle des flottants
   l emportait donc : l image gardait son `margin:1rem auto`, dont les marges
   laterales `auto` valent zero sur un inline-block — le drapeau se collait au
   texte. Nommer les classes concurrentes dans un `:is()` ramene le selecteur a
   (0-2-1), juste au-dessus. */
.cp-body :is(h1,h2,h3,h4,h5,h6) :is(img,.float-left,.float-right,.image-left){
  display:inline-block!important;float:none!important;
  margin:0 .5rem 0 0!important;
  /* `middle` et non un decalage en em : l icone se cale sur le milieu de la
     ligne, quelle que soit la taille du titre. Un decalage chiffre serait a
     reprendre a chaque niveau de titre, et le drapeau sortait justement en
     haut du texte. */
  vertical-align:middle;
  /* Plafonnee sous la hauteur de ligne, sinon l image agrandit la ligne et
     redescend le texte a cote d elle. */
  width:auto;max-height:.85em;border-radius:3px}

/* UN FILET JUSTE AVANT UN TITRE FAIT DOUBLE EMPLOI. Le legacy separait ses
   sections par un `<hr>`, et nos titres portent deja leur trait orange : les
   deux se suivaient, d ou deux traits pour une seule separation. 15 filets
   dans le corpus sont dans ce cas ; les autres, isoles, gardent leur role. */
.cp-body hr:has(+ h1),.cp-body hr:has(+ h2),.cp-body hr:has(+ h3),
.cp-body hr:has(+ h4){display:none}
.cp-body hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
/* Tableaux : rendus défilables plutôt que compressés. */
.cp-body table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0 0 1.05rem;display:block;overflow-x:auto}
.cp-body th,.cp-body td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}
.cp-body th{background:var(--bg-soft);font-weight:700;color:var(--ink)}

/* ---- Structures Bootstrap heritees du legacy, rhabillees en charte ----
   Le contenu redige porte des cartes, des encadres, des pastilles et des
   boutons Bootstrap. L import (`process/nettoyage_html.php`) leur retire leur
   COULEUR ; ici on leur redonne une APPARENCE, en un seul orange. Sans ces
   regles ils se rendraient nus : encadre a bordure transparente, bouton sans
   fond, entete de carte sans distinction.
   La specificite suffit sans `!important` : `.cp-body .btn` (0-2-0) passe
   devant `.btn-primary` (0-1-0), et `site.css` est charge apres Bootstrap. */

/* Icones decoratives : Font Awesome et Bootstrap Icons, 383 occurrences. Elles
   etaient bleues ou vertes ; elles prennent l accent, seule couleur de la charte. */
.cp-body .bi,.cp-body [class*="fa-"]{color:var(--orange)}

/* Encadres (« Bon a savoir », « Caracteristiques... »). Rail orange a gauche
   plutot qu un fond teinte : un aplat de couleur par encadre saturerait la page. */
.cp-body .cp-note{background:var(--bg-soft);border:1px solid var(--line);
  border-left:3px solid var(--orange);border-radius:10px;padding:.95rem 1.1rem;margin:0 0 1.15rem}
.cp-body .cp-note > :last-child{margin-bottom:0}
.cp-body .alert-heading{font-size:1rem;font-weight:700;color:var(--ink);margin:0 0 .45rem}

/* Rails de gauche : le legacy en avait 44, en bleu Bootstrap. L import retire la
   couleur ; sans cette regle il resterait un filet gris pale de 4 px, quasi
   invisible, donc un decor qui ne decore plus rien. */
.cp-body .border-start{border-left-color:var(--orange)}

/* Pastilles : servaient a numeroter des listes ordonnees.
   `display:inline-flex` LES EMPECHAIT DE PASSER A LA LIGNE : un conteneur
   flex n a qu un seul element ici, le texte, et un element flex ne se coupe
   pas. Dans une cellule de tableau, la pastille poussait donc la colonne au
   dela de l ecran et rien ne se reduisait plus.
   `inline-block` rend le comportement normal ; `white-space:normal` et
   `max-width:100%` garantissent la coupure meme si une regle heritee dit le
   contraire. Les pastilles de plus de 50 signes, elles, ne sont plus des
   pastilles du tout : l habillage est retire a l import. */
.cp-body .badge{display:inline-block;max-width:100%;white-space:normal;
  overflow-wrap:anywhere;text-align:center;
  min-width:1.5rem;padding:.2rem .55rem;background:var(--orange);color:#fff;
  font-size:.78rem;font-weight:700;line-height:1.35;border-radius:999px}
/* Dans un tableau, la cellule doit pouvoir se reduire : sans cela la
   pastille impose sa largeur a toute la colonne. */
.cp-body td .badge,.cp-body th .badge{display:inline-block}
.cp-body table{table-layout:auto}

/* Cartes : l entete etait un aplat bleu a texte blanc. */
.cp-body .card{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  margin:0 0 1.15rem;background:#fff}
.cp-body .card-header{background:var(--bg-soft);border-bottom:1px solid var(--line);
  padding:.75rem 1rem;font-weight:700;color:var(--ink)}
.cp-body .card-header h5,.cp-body .card-header h4{margin:0;font-size:1rem;color:var(--ink)}
.cp-body .card-body{padding:1rem}
.cp-body .card-body > :last-child{margin-bottom:0}

/* Accordeons (des FAQ, dans 3 articles). Ici la couleur ne vient PAS d une
   classe utilitaire que l import pourrait retirer, mais du composant Bootstrap
   lui-meme : ouvert, `.accordion-button` prend `--bs-primary-bg-subtle` et
   `--bs-primary-text-emphasis`, soit un bleu pale a texte bleu nuit. Ca se
   corrige donc ici, en redefinissant les variables du composant. */
.cp-body .accordion{--bs-accordion-active-bg:var(--bg-soft);
  --bs-accordion-active-color:var(--ink);
  --bs-accordion-btn-focus-box-shadow:0 0 0 .2rem rgba(255,99,0,.25);
  --bs-accordion-border-color:var(--line);
  --bs-accordion-btn-icon-transform:rotate(-180deg)}
.cp-body .accordion-button{font-weight:700}

/* `<code>` : rose #d63384 par defaut chez Bootstrap. */
.cp-body code{color:var(--ink);background:var(--bg-soft);
  padding:.1rem .35rem;border-radius:5px;font-size:.9em}

/* Boutons du contenu : la charte des CTA, plein orange inverse au survol.
   Ils pointent pour l essentiel vers des landings de production, a refaire. */
.cp-body .cp-btn{display:inline-flex;align-items:center;gap:.45rem;
  padding:.7rem 1.25rem;background:var(--orange);color:#fff;border:2px solid var(--orange);
  border-radius:999px;font-weight:700;text-decoration:none;
  transition:background .18s,color .18s}
.cp-body .cp-btn:hover{background:#fff;color:var(--orange)}
.cp-body .cp-btn .bi,.cp-body .cp-btn [class*="fa-"]{color:inherit}

/* ---- Le moteur, en tete de page ----
   Sur fond sombre, comme dans le heros : il doit se detacher du contenu, pas
   s y fondre. */
/* En tete de page, pas en pied : plus de marge haute, il touche l entete. */
.cp-moteur{background:var(--black);padding:1.75rem 0 1.5rem}
.cp-moteur .hero-links{margin:.9rem 0 0;text-align:center}
.cp-moteur .hero-links a{color:rgba(255,255,255,.82)}
.cp-moteur .hero-links a:hover{color:var(--orange)}
.cp-moteur-in{max-width:1000px;margin:0 auto;padding:0 1rem;text-align:center}
.cp-moteur-titre{color:#fff;font-size:1.4rem;margin:0 0 .3rem}
.cp-moteur-sub{color:rgba(255,255,255,.7);margin:0 0 1.2rem;font-size:.92rem}
/* Hors du héros, le moteur n'a pas de photo derrière lui : il lui faut donc
   son propre fond, sinon il flotte sur le noir. */
.cp-moteur .moteur{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}

/* ---- Maillage interne ---- */
.cp-liens{background:var(--bg-soft);border-top:1px solid var(--line);padding:1.5rem 0 2rem}
.cp-liens-titre{font-size:1.15rem;margin:0 0 .9rem}
.cp-liens ul,.cp-cartes{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.cp-liens li a,.cp-cartes li a{display:block;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:.85rem 1rem;transition:.14s}
.cp-liens li a:hover,.cp-cartes li a:hover{border-color:var(--orange);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.cp-liens strong,.cp-cartes strong{display:block;color:var(--ink);font-family:var(--font-head);
  font-weight:700;font-size:.98rem;line-height:1.3;margin-bottom:.2rem}
.cp-liens span,.cp-cartes span{display:block;color:var(--muted);font-size:.85rem;line-height:1.45}

/* ---- Index de section ---- */
.cp-cartes{margin-bottom:1.8rem}
.cp-legales{border-top:1px solid var(--line);padding-top:1.1rem}
.cp-legales h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:0 0 .6rem}
.cp-legales ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.cp-legales a{color:var(--body);font-size:.9rem;text-decoration:underline;text-underline-offset:2px}
.cp-legales a:hover{color:var(--orange)}

.cp-404{text-align:center;padding-block:3rem}

/* ============ À partir de 621 px ============ */
@media(min-width:621px){
  .cp-wrap{padding:1.75rem 1.5rem 2.5rem}
  .cp-h1{font-size:2rem}
  .cp-body{font-size:1.03rem}
  .cp-body h2{font-size:1.45rem}
  .cp-liens ul,.cp-cartes{grid-template-columns:1fr 1fr}
}
/* ============ À partir de 1024 px ============ */
@media(min-width:1024px){
  .cp-wrap{padding-top:2rem}
  .cp-h1{font-size:2.2rem}
  .cp-moteur{padding:2.5rem 0}
}

/* Le moteur comptait sur le héros pour lui donner sa couleur de texte : hors
   de lui, ses étiquettes retombaient sur `--body` (#40424a) et se retrouvaient
   en gris foncé sur un fond noir #101014, donc illisibles. La section porte
   désormais sa couleur, comme le héros le faisait. */
.cp-moteur{color:#fff}
.cp-moteur .m-field > label{color:rgba(255,255,255,.9)}

/* ---- ENTRÉE DANS LE TUNNEL DEPUIS UNE PAGE ÉDITORIALE ----
   Barre fixe en bas d'écran, sur le modèle du bouton « Modifier ma recherche »
   des résultats : sous le pouce, et jamais loin. Le moteur ne peut pas être
   rendu collant, il prendrait un tiers d'un écran de téléphone ; cette barre
   en fait 64. */
.cp-cta{position:fixed;left:0;right:0;bottom:0;z-index:1035;
  display:flex;align-items:center;gap:.6rem;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(16,16,20,.96);border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -6px 22px rgba(16,16,20,.28)}
.cp-cta[hidden]{display:none}
@supports (backdrop-filter:blur(8px)){
  /* Le texte continue de défiler derrière : le flou dit que la barre est
     au-dessus de la page, sans l'opacifier complètement. */
  .cp-cta{background:rgba(16,16,20,.82);backdrop-filter:blur(8px)}
}
/* L'action principale prend la place : c'est elle qui ouvre le choix. */
.cp-cta-main{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1rem;border:2px solid var(--orange);border-radius:10px;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;
  font-size:.98rem;cursor:pointer;transition:.14s;white-space:nowrap}
.cp-cta-main:hover{background:#fff;color:var(--orange)}
/* La seconde sortie reste lisible sans concurrencer la première. */
.cp-cta-alt{flex:0 0 auto;display:inline-flex;align-items:center;min-height:48px;
  padding:.5rem .2rem;color:rgba(255,255,255,.8);font-size:.85rem;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cp-cta-alt:hover{color:#fff}
/* Le retour en haut NE CEDE PLUS. Il rendait la main des que la barre
   apparait, c est-a-dire presque tout le temps sur ces pages : il en
   devenait absent alors qu il doit etre partout. Il se decale simplement
   au-dessus d elle. */
.to-top--cede{bottom:calc(76px + 1.25rem)}
@media(min-width:621px){ .to-top--cede{bottom:calc(88px + 1rem)} }
/* La barre couvre le bas de la page : on rend au contenu ce qu'elle prend,
   sinon les dernières lignes et le pied passent dessous.
   CONDITIONNÉ À SA PRÉSENCE RÉELLE (`:has`), et non à la classe de page : la
   landing solo porte `p-content` mais pas la barre — elle EST le tunnel, ses
   cartes mènent toutes à une offre — et réservait donc 88 px de blanc sous le
   pied de page, pour rien. */
/* LA RÉSERVE VIT DANS LE PIED, PAS SUR LE BODY (signalé par le user) : posée
   sur le body, elle s'affichait en BANDE BLANCHE sous le pied noir — le
   coussin doit être de la couleur de ce qu'il prolonge. Même service rendu :
   les dernières lignes du pied restent lisibles au-dessus de la barre. */
body.p-content:has(.cp-cta) .site-footer{padding-bottom:76px}

@media(min-width:621px){
  /* Sur grand écran la barre n'a pas besoin de toute la largeur : elle se
     resserre au centre et cesse de barrer la lecture. */
  .cp-cta{left:50%;right:auto;transform:translateX(-50%);bottom:1rem;
    width:auto;max-width:min(560px,92vw);border-radius:14px;border:1px solid rgba(255,255,255,.14);
    padding:.65rem .8rem}
  .cp-cta-alt{padding-inline:.5rem}
  /* La barre reste visible jusqu au bas de page : sans cette reserve elle
     recouvrirait la derniere ligne du pied. Moins qu en mobile, elle ne fait
     plus toute la largeur. */
  body.p-content:has(.cp-cta) .site-footer{padding-bottom:88px}
}

/* ---- MENU D'ENTÊTE REGROUPÉ PAR INTENTION ----
   Deux portes au lieu de sept liens à plat, qui passaient sur deux lignes dès
   que la barre se resserrait. */
.hd-menu{position:relative;display:flex;align-items:center}
.hd-menu-btn{display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;padding:.5rem .2rem;cursor:pointer;
  font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)}
.hd-menu-btn i{font-size:.66rem;color:var(--muted);transition:transform .16s}
.hd-menu-btn:hover,.hd-menu[data-open] .hd-menu-btn{color:var(--orange)}
.hd-menu[data-open] .hd-menu-btn i{transform:rotate(180deg);color:var(--orange)}

/* Le panneau déborde du header : il ne doit donc être enfermé par aucun
   `overflow` ni contexte d'empilement bas, comme les panneaux du moteur. */
.hd-panel{position:absolute;top:calc(100% + .55rem);left:0;z-index:1035;
  display:flex;gap:1.75rem;
  min-width:max-content;max-width:min(760px,92vw);
  padding:1.1rem 1.25rem;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 44px rgba(16,16,20,.18)}
.hd-panel[hidden]{display:none}
.hd-col{min-width:172px}
.hd-col-titre{display:block;font-family:var(--font-head);font-weight:800;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--orange);
  padding-bottom:.45rem;margin-bottom:.45rem;border-bottom:1px solid var(--line)}
.hd-col ul{list-style:none;margin:0 0 .5rem;padding:0}
.hd-col li a{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.32rem 0;color:var(--body);font-size:.88rem}
.hd-col li a:hover{color:var(--orange)}
/* Le volume aligné à droite en chiffres de largeur fixe : c'est une colonne
   de nombres, elle se lit comme telle. */
.hd-col li span{flex:0 0 auto;color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums}
.hd-col-tout{display:inline-block;font-size:.8rem;font-weight:700;color:var(--orange)}
.hd-col-tout:hover{text-decoration:underline}
.hd-col--avis{max-width:200px;border-left:1px solid var(--line);padding-left:1.5rem}
.hd-col--avis p{margin:0 0 .5rem;font-size:.82rem;line-height:1.45;color:var(--muted)}

/* PAS de `right:0` sur le dernier menu : la navigation est collée à GAUCHE de
   l entête, pas à droite. Caler le panneau sur le bord droit de son
   déclencheur — à 501 px — le faisait s étendre vers la gauche et sortir de
   l écran. Les deux panneaux s ouvrent donc sous leur bouton, vers la droite,
   où la place est libre.
   Garde-fou : si un panneau devait un jour dépasser à droite, il se recale
   au bord de la fenêtre au lieu de la déborder. */
.hd-panel{max-width:min(760px,calc(100vw - 2rem))}

/* ---- Menu mobile : mêmes groupes, repliés ---- */
.md-groupe{border-bottom:1px solid var(--line)}
.md-groupe summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.9rem 0;min-height:48px;
  font-family:var(--font-head);font-weight:700;color:var(--ink)}
.md-groupe summary::-webkit-details-marker{display:none}
.md-groupe summary i{font-size:.72rem;color:var(--muted);transition:transform .18s}
.md-groupe[open] summary i{transform:rotate(180deg)}
.md-sous-titre{margin:.5rem 0 .3rem;font-size:.72rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--orange)}
.menu-drawer-nav ul{list-style:none;margin:0 0 .7rem;padding:0}
.menu-drawer-nav li a{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  padding:.45rem 0;color:var(--body);font-size:.9rem;font-family:var(--font-body);font-weight:400;
  border-bottom:0}
.menu-drawer-nav li a:hover{color:var(--orange)}
.menu-drawer-nav li span{flex:0 0 auto;color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.md-tout{color:var(--orange)!important;font-weight:700!important}

/* Croix de fermeture du panneau. Le panneau porte déjà un rembourrage large :
   elle se loge dans le coin sans rien décaler. */
.hd-panel{position:absolute}
.hd-panel-close{position:absolute;top:.5rem;right:.5rem;z-index:2;
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  padding:0;border:0;border-radius:50%;background:var(--bg-soft);color:var(--muted);
  font-size:1.2rem;line-height:1;cursor:pointer;transition:.14s}
.hd-panel-close:hover{background:var(--orange);color:#fff}

/* ---- Champs du moteur : une seule ligne, quoi qu'il arrive ----
   Mesuré sur iPad Air (820 px) : les trois champs tombent à 193 px, où
   « Toutes les destinations » passe sur deux lignes. Son déclencheur montait
   à 74 px quand les deux autres restaient à 48, et toute la rangée se
   décalait. Le problème n'attend pas la tablette : dès qu'on retient
   plusieurs destinations, le libellé s'allonge et le champ grandit avec lui.
   Une ligne, et des points de suspension au-delà : la valeur complète reste
   dans l'infobulle du bouton et dans le panneau. */
.m-dest-trigger,.m-when-trigger,.m-duree-trigger{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   ACTUALITÉS — reconstruites dans l'idiome d'okc_v2, mobile d'abord
   ------------------------------------------------------------
   Le legacy avait sa feuille de blog. On reprend la donnée, pas le style :
   la section réutilise la typographie des pages éditoriales (`.cp-body`,
   `.cp-h1`, `.cp-resume`) et n'ajoute que ce qu'une liste d'articles exige.
   ============================================================ */
.nw-wrap{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 2rem}
.nw-head{margin-bottom:1.2rem}
.nw-compte{margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}
.nw-compte strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- Filtre par sujet ----
   Bande défilable : les étiquettes sont des données, leur nombre varie, et
   sur un téléphone elles ne tiendront jamais toutes sur une ligne. */
.nw-tags{display:flex;gap:.4rem;overflow-x:auto;padding:.2rem 0 .8rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.nw-tags::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.nw-tags{scroll-behavior:auto}}

/* Rail a chevrons. Les boutons sont A COTE de la bande et non par-dessus : pose
   sur l extremite, le chevron de gauche recouvrait « Tous les sujets », c est a
   dire l etiquette active. Ils ne coutent que ~80 px de piste, et disparaissent
   quand tout tient, la piste reprenant alors toute la largeur. */
.nw-rail{display:flex;align-items:center;gap:.45rem}
.nw-rail > .nw-tags{flex:1 1 auto;min-width:0}   /* sans `min-width:0`, une piste
   en `overflow-x` refuse de se reduire sous la largeur de son contenu, et c est
   le rail entier qui deborderait de la page. */
.nw-rail-btn{flex:0 0 auto;align-self:center;margin-bottom:.6rem;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 1px 4px rgba(0,0,0,.08);cursor:pointer;padding:0;
  transition:background .18s,color .18s,border-color .18s}
/* `display:flex` ecrase la regle `[hidden]{display:none}` du navigateur : sans
   cette ligne les deux chevrons resteraient visibles en permanence. Bootstrap
   pose bien un `[hidden]{display:none!important}` qui sauverait la mise, mais
   dependre de sa feuille pour ca serait un piege silencieux le jour ou elle
   bouge. Meme cause que la modale d itineraire qui refusait de se fermer. */
.nw-rail-btn[hidden]{display:none}
.nw-rail-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.nw-rail-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.nw-rail-btn i{font-size:1rem;line-height:1;color:inherit}
/* Au doigt, on fait glisser : les chevrons seraient deux cibles en trop. */
@media(pointer:coarse){.nw-rail-btn{display:none}}

/* Fondu au bord de la piste, du cote ou il reste des etiquettes : sans lui,
   la premiere visible est tranchee net et la coupe se lit comme un defaut
   d affichage. L etat vient du chevron correspondant via `:has()`, donc aucun
   JS de plus, et le fondu disparait de lui-meme quand tout tient. */
.nw-rail:has([data-rail-prev]:not([hidden])) .nw-tags{
  mask-image:linear-gradient(to right,transparent,#000 18px)}
.nw-rail:has([data-rail-next]:not([hidden])) .nw-tags{
  mask-image:linear-gradient(to left,transparent,#000 18px)}
.nw-rail:has([data-rail-prev]:not([hidden])):has([data-rail-next]:not([hidden])) .nw-tags{
  mask-image:linear-gradient(to right,transparent,#000 18px,#000 calc(100% - 18px),transparent)}
.nw-tag-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;
  min-height:40px;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--body);font-size:.86rem;font-weight:600;white-space:nowrap}
.nw-tag-btn span{color:var(--muted);font-size:.76rem;font-variant-numeric:tabular-nums}
.nw-tag-btn:hover{border-color:var(--orange);color:var(--orange)}
.nw-tag-btn.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.nw-tag-btn.is-on span{color:rgba(255,255,255,.8)}

/* ---- Grille de cartes ----
   Une colonne sur téléphone : une carte d'actualité se lit, elle ne se
   compare pas, il n'y a donc rien à gagner à la rétrécir. */
.nw-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.nw-card{background:#fff;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;transition:box-shadow .18s, border-color .18s}
.nw-card:hover{border-color:var(--orange);box-shadow:0 6px 20px rgba(16,16,20,.08)}
.nw-card-link{display:block;color:inherit}
.nw-card-media{position:relative;aspect-ratio:5/3;background:var(--bg-soft);overflow:hidden}
.nw-card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 21 des 35 articles n'ont PAS d'image : sans elle, la vignette devient un
   aplat de marque au lieu d'un cadre vide, et l'étiquette y prend la place
   du visuel. La carte garde sa forme, rien ne signale un manque. */
.nw-card-media--vide{background:linear-gradient(135deg,var(--black) 0%,#23232b 100%)}
.nw-card-media--vide .nw-tag{position:static;display:inline-block;margin:1.1rem}
.nw-tag{position:absolute;top:.6rem;left:.6rem;
  padding:.25rem .6rem;border-radius:999px;
  background:rgba(255,99,0,.94);color:#fff;
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.nw-card-body{padding:.85rem 1rem 1rem}
.nw-date{margin:0 0 .3rem;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nw-card-titre{margin:0 0 .35rem;font-family:var(--font-head);font-weight:800;
  font-size:1.02rem;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.nw-card:hover .nw-card-titre{color:var(--orange)}
.nw-card-extrait{margin:0;font-size:.86rem;line-height:1.5;color:var(--muted)}

/* ---- Pagination ---- */
.nw-pages{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.8rem;
  margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.nw-page{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;
  border:2px solid var(--orange);border-radius:10px;background:#fff;color:var(--orange);
  font-family:var(--font-head);font-weight:700;font-size:.9rem}
.nw-page:hover{background:var(--orange);color:#fff}
.nw-page-etat{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nw-vide{padding:2rem 0;color:var(--muted)}

/* ---- Article ---- */
.nw-article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .8rem;
  margin:0 0 .7rem;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.nw-tag--lien{position:static;display:inline-block}
.nw-tag--lien:hover{background:var(--orange-600)}
.nw-cie{padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;
  font-weight:600;color:var(--body)}
.nw-figure{margin:0 0 1.3rem}
.nw-figure img{width:100%;height:auto;display:block;border-radius:12px}
.nw-figure figcaption{margin-top:.45rem;font-size:.78rem;color:var(--muted);line-height:1.4}

/* ---- Suite de lecture ---- */
.nw-suite{background:var(--bg-soft);border-top:1px solid var(--line);padding:1.5rem 0 2rem;margin-top:2rem}
.nw-retour{margin:1.2rem 0 0}
.nw-retour a{font-weight:700;color:var(--orange)}

/* ============ À partir de 621 px ============ */
@media(min-width:621px){
  .nw-wrap{padding:1.75rem 1.5rem 2.5rem}
  .nw-grid{grid-template-columns:1fr 1fr;gap:1.25rem}
}
/* ============ À partir de 981 px ============ */
@media(min-width:981px){
  .nw-grid{grid-template-columns:repeat(3,1fr)}
  /* La première carte occupe deux colonnes : la dernière actualité est la
     raison d'être de la page, elle ne doit pas se noyer dans la grille. */
  .nw-grid:not(.nw-grid--3) > .nw-card:first-child{grid-column:span 2}
  .nw-grid:not(.nw-grid--3) > .nw-card:first-child .nw-card-titre{font-size:1.3rem}
  .nw-grid:not(.nw-grid--3) > .nw-card:first-child .nw-card-media{aspect-ratio:16/7}
}

/* ---- Sommaire des questions d une page de FAQ ----
   Ces pages font jusqu a 18 000 signes pour une dizaine de questions : sans
   sommaire, trouver la sienne demande de tout parcourir. Numerote, parce que
   les questions le sont dans le texte : le lien et sa cible se repondent. */
.cp-somm{background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;padding:1rem 1.1rem;margin:0 0 1.6rem}
.cp-somm-titre{margin:0 0 .6rem;font-weight:700;color:var(--ink);font-size:.95rem}
.cp-somm-liste{margin:0;padding-left:1.35rem;display:grid;gap:.4rem}
.cp-somm-liste li::marker{color:var(--orange);font-weight:700;
  font-variant-numeric:tabular-nums}
.cp-somm-liste a{color:var(--body);text-decoration:none;line-height:1.45}
.cp-somm-liste a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
/* Deux colonnes des qu il y a la place : dix questions sur une colonne
   repoussent le contenu d un ecran entier. */
@media(min-width:760px){.cp-somm-liste{grid-template-columns:1fr 1fr;gap:.4rem 1.6rem}}

/* L entete est fixe : sans ce decalage, l ancre amene la question SOUS elle.
   `scroll-margin` agit sur la cible, contrairement a un `padding` qui
   creerait un trou visible dans le texte. */
.cp-body h2[id],.cp-body h3[id]{scroll-margin-top:100px}

/* ---- Sous-liste d une carte d index (guides d escale sous leur zone) ----
   Second rang assume : la carte reste le point d entree, les escales sont des
   raccourcis. Elles ne sont pas des cartes a leur tour, sinon les dix guides
   se vaudraient et la hierarchie ne se verrait plus. */
.cp-cartes .cp-sous{list-style:none;margin:.15rem 0 0;padding:.7rem .95rem 0;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.35rem .5rem}
.cp-cartes .cp-sous li{margin:0}
.cp-cartes .cp-sous a{display:inline-block;padding:.28rem .6rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;color:var(--body);font-size:.82rem;
  font-weight:600;text-decoration:none;line-height:1.3}
.cp-cartes .cp-sous a:hover{border-color:var(--orange);color:var(--orange)}

/* La carte devient l element de liste quand elle porte des escales : le lien
   principal ne peut pas les contenir (on n imbrique pas un lien dans un lien),
   elles tombaient donc SOUS la carte, hors de son cadre. */
.cp-cartes li:has(.cp-sous){background:#fff;border:1px solid var(--line);border-radius:12px}
.cp-cartes li:has(.cp-sous) > a{border:0;background:none}
.cp-cartes li:has(.cp-sous) > a:hover{box-shadow:none;color:var(--orange)}
.cp-cartes li:has(.cp-sous):hover{border-color:var(--orange);box-shadow:0 4px 14px rgba(0,0,0,.06)}

/* ---- Carte d index illustree et datee (section blog) ----
   Les autres sections n ont ni image ni date : ces regles ne s appliquent
   qu aux cartes qui en portent, la carte de base reste inchangee. */
.cp-cartes .cp-carte-img{display:block;width:calc(100% + 2rem);max-width:none;
  margin:-1rem -1rem .85rem;aspect-ratio:16/9;object-fit:cover;
  border-radius:11px 11px 0 0}
.cp-cartes .cp-carte-date{display:block;color:var(--muted);font-size:.78rem;
  margin-bottom:.3rem;font-variant-numeric:tabular-nums}

/* Illustration de tete d un article (blog). */
.cp-hero{margin:0 0 1.4rem}
.cp-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:12px}

/* ---- Landing « croisieres celibataires » ----
   Transactionnelle en haut, editoriale en bas : le visiteur cherche des offres,
   mais il a besoin du chiffre du supplement avant de les lire. */
.solo-kpi{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;
  margin:0 0 1.5rem;padding:0}
.solo-kpi li{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;text-align:center}
.solo-kpi strong{display:block;font-family:var(--font-head);font-size:1.35rem;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.15}
.solo-kpi span{display:block;color:var(--muted);font-size:.8rem;margin-top:.2rem}
@media(min-width:760px){.solo-kpi{grid-template-columns:repeat(4,1fr)}}

.solo-onglets{display:flex;gap:.5rem;margin:0 0 .9rem;flex-wrap:wrap}
.solo-onglet{display:inline-flex;align-items:center;gap:.45rem;min-height:42px;
  padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--body);font-weight:700;font-size:.9rem;text-decoration:none}
.solo-onglet span{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.solo-onglet:hover{border-color:var(--orange);color:var(--orange)}
.solo-onglet.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.solo-onglet.is-on span{color:rgba(255,255,255,.85)}

.solo-explique{background:var(--bg-soft);border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;padding:.85rem 1.1rem;margin:0 0 1.6rem;
  font-size:.92rem;color:var(--body)}
/* Les cartes gardent la largeur des resultats, pas celle du texte editorial. */
.solo-liste{max-width:1180px;margin:0 auto 2rem;padding:0 1rem;display:grid;gap:.8rem}

/* Bandeau solo dans la carte de resultat. N apparait que sur la landing
   celibataires : ailleurs les cles n existent pas et le bloc n est pas rendu. */
.cc-solo{margin:.5rem 0 0;padding:.35rem .55rem;border-radius:8px;
  background:var(--bg-soft);border:1px solid var(--line);
  font-size:.78rem;line-height:1.3;color:var(--muted);text-align:center}
.cc-solo strong{display:block;color:var(--ink);font-size:.95rem;
  font-variant-numeric:tabular-nums}
.cc-solo--bon{border-color:var(--orange)}
.cc-solo--bon strong{color:var(--orange)}
.cc-solo-cab{margin:.3rem 0 0;font-size:.74rem;color:var(--muted);text-align:center}

/* ---- Bascule des offres vers le contenu, sur la landing solo ----
   Sans elle, la pagination et le premier titre de l article se touchaient au
   pixel pres. La bande change de fond sur toute la largeur : la rupture se voit
   avant meme d avoir lu le titre. */
.solo-savoir{background:var(--bg-soft);border-top:1px solid var(--line);
  margin-top:2.5rem;padding:2.2rem 0 .5rem}
.solo-savoir-tete{max-width:760px;margin:0 0 1.6rem}
.solo-savoir-tete h2{font-family:var(--font-head);font-size:1.5rem;color:var(--ink);
  margin:0 0 .5rem;line-height:1.2}
.solo-savoir-tete p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
/* Le corps reprend le fond blanc : un texte long sur fond gris fatigue. */
.solo-savoir .cp-body{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.5rem 1.35rem}
@media(min-width:760px){
  .solo-savoir{padding:3rem 0 1rem}
  .solo-savoir-tete h2{font-size:1.85rem}
  .solo-savoir .cp-body{padding:2rem 2.25rem}
}
/* Un peu d air sous la derniere carte, avant la pagination. */
.nw-pages{margin-top:1.6rem}

/* La bande de contenu court jusqu au pied de page. Le pied porte une marge
   haute de 48 px, invisible partout ailleurs puisque le contenu finit sur du
   blanc ; ici elle intercalait un liseré blanc entre le gris de la bande et le
   noir du pied, soit trois tons empiles pour deux blocs. */
body.p-solo .site-footer{margin-top:0}
.solo-savoir{padding-bottom:3rem}

/* ================================================================
   PAGES TRANSACTIONNELLES — gabarit modele (destinations, puis
   compagnies, bateaux, escales, ports de depart)
   ================================================================ */

/* ---- Reperes chiffres ----
   Six colonnes sur grand ecran, deux sur telephone : a six de front sur 390 px
   chaque chiffre tiendrait dans 60 px, illisible. */
.kpi-row{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;
  margin:0 0 1.6rem;padding:0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:.85rem .6rem;text-align:center}
.kpi-ico{display:block;color:var(--orange);font-size:.95rem;margin-bottom:.35rem}
.kpi-val{display:block;font-family:var(--font-head);font-size:1.3rem;color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-val small{font-size:.7em;font-weight:600;color:var(--muted)}
.kpi-lab{display:block;color:var(--muted);font-size:.75rem;margin-top:.15rem}
@media(min-width:621px){.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(min-width:981px){.kpi-row{grid-template-columns:repeat(6,1fr)}}

/* ---- Synthese redigee a partir des chiffres ---- */
.dt-synthese{background:var(--bg-soft);border-left:3px solid var(--orange);
  border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:0 0 1.6rem;
  line-height:1.6;color:var(--body)}
.dt-synthese strong{color:var(--ink)}
.dt-mince{background:#fff;border:1px dashed var(--line);border-radius:10px;
  padding:.7rem .9rem;margin:0 0 1.2rem;color:var(--muted);font-size:.9rem}

/* ---- Listes de maillage : le compte fait partie du lien ---- */
.dt-section{font-family:var(--font-head);font-size:1.15rem;
  color:var(--ink);margin:0 0 .7rem}
.dt-section{font-size:1.4rem;margin:2rem 0 .9rem}
.dt-bloc ul,.dt-feuilles{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem}
.dt-bloc a,.dt-feuilles a{display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--body);font-size:.85rem;font-weight:600;text-decoration:none;line-height:1.35}
.dt-bloc a span,.dt-feuilles a span{color:var(--muted);font-size:.76rem;
  font-variant-numeric:tabular-nums}
.dt-bloc a:hover,.dt-feuilles a:hover{border-color:var(--orange);color:var(--orange)}


/* ---- Bande de maillage, en pied de page transactionnelle ---- */
.dt-maillage{background:var(--bg-soft);border-top:1px solid var(--line);
  margin-top:2.5rem;padding:2rem 0}
.dt-maillage-grille{display:grid;gap:1.4rem}
@media(min-width:760px){.dt-maillage-grille{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.dt-maillage-grille{grid-template-columns:repeat(3,1fr)}}
.dt-bloc h2{font-family:var(--font-head);font-size:1rem;color:var(--ink);margin:0 0 .6rem}
.dt-contenu{background:#fff;padding:2rem 0}

/* ---- Index des destinations ---- */
.dt-vedettes{list-style:none;display:grid;grid-template-columns:1fr;gap:.7rem;margin:0 0 1rem;padding:0}
@media(min-width:621px){.dt-vedettes{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.dt-vedettes{grid-template-columns:repeat(4,1fr)}}
.dt-vedettes a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:150px;padding:1rem;border:1px solid var(--line);border-radius:14px;
  /* Tant que la photo n est pas posee au BO, le repli n est PAS un aplat noir :
     huit rectangles identiques donnaient une page inachevee. Un degrade sombre
     avec une trace d orange se lit comme un parti pris. */
  background:linear-gradient(148deg,#23232b 0%,#131317 58%,#3a1c07 100%);
  color:#fff;text-decoration:none;overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.dt-vedettes a[style*="--img"]{background:var(--black) var(--img) center/cover}
/* Voile : sans lui, un titre blanc sur une photo claire devient illisible. */
.dt-vedettes a::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.15))}
.dt-vedettes strong,.dt-vedettes .dt-v-chiffres{position:relative}
.dt-vedettes strong{font-family:var(--font-head);font-size:1.05rem;line-height:1.2}
.dt-v-chiffres{font-size:.8rem;color:rgba(255,255,255,.85);margin-top:.2rem}
.dt-vedettes a:hover{border-color:var(--orange);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(16,16,20,.18)}
@media(prefers-reduced-motion:reduce){.dt-vedettes a{transition:none}
  .dt-vedettes a:hover{transform:none}}

.dt-famille{margin:0 0 1.8rem}
.dt-famille > h3{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-head);font-size:1.25rem;margin:0 0 .8rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--orange)}
.dt-famille > h3 a{color:var(--ink);text-decoration:none}
.dt-famille > h3 a:hover{color:var(--orange)}
.dt-famille > h3 span{color:var(--muted);font-size:.82rem;font-weight:600;
  font-family:var(--font-body);font-variant-numeric:tabular-nums}
.dt-bassin{margin:0 0 1.1rem;padding-left:.15rem}
.dt-bassin h4{display:flex;align-items:baseline;gap:.45rem;font-size:.95rem;margin:0 0 .45rem}
.dt-bassin h4 a{color:var(--ink);text-decoration:none}
.dt-bassin h4 a:hover{color:var(--orange)}
.dt-bassin h4 span{color:var(--muted);font-size:.78rem;font-weight:600;
  font-variant-numeric:tabular-nums}

/* Contexte de la landing, au-dessus des offres : le fil d Ariane y sert de
   piste de navigation ET de rappel de ce qui est filtre. Il disparait au
   premier filtre (`data-contexte`, cf. search.js). */
.dt-contexte{margin:0 0 .6rem}
.dt-contexte .fil{margin:0}
.dt-resultats .results-head{margin-bottom:.9rem}

/* Contexte DANS la colonne des offres : il decrit ce que la colonne affiche,
   il vit et disparait avec elle. Pas de `cp-wrap` ici, la largeur vient de la
   colonne — et le panneau de filtres reste a sa hauteur, a gauche. */
.dt-resultats .dt-contexte{margin:0 0 1.4rem}
.dt-resultats .dt-contexte .cp-h1{margin:.2rem 0 .9rem}
.dt-resultats .dt-contexte .kpi-row{margin-bottom:1.2rem}
.dt-resultats .dt-contexte .dt-synthese{margin-bottom:1.2rem}

/* La bande de maillage suit la largeur des RESULTATS (1 560), pas celle de
   lecture imposee par `.cp-wrap` (820). Ce sont des pastilles de liens en
   grille, pas du texte courant : bridee a 820 px dans une page large de 1 560,
   elle flottait au milieu, sans rapport avec ce qui la precede. */
.dt-maillage > .cp-wrap{max-width:1560px;padding-inline:1.2rem}
@media(min-width:1180px){.dt-maillage-grille{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1560px){.dt-maillage-grille{grid-template-columns:repeat(6,1fr)}}

/* ---- Carte du monde des destinations (Leaflet + fond en config) ----
   PLEINE LARGEUR. Le titre et l aide restent dans `.cp-wrap`, la carte non :
   bornee a la colonne de lecture, elle devenait une vignette ou l Atlantique
   faisait 3 cm. */
.dt-carte{margin:0 0 2.4rem}
.dt-carte-tete{padding-bottom:.9rem}
.dt-carte-aide{color:var(--muted);font-size:.9rem;margin:0}
.dt-carte-plein{position:relative;background:var(--bg-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* PROPORTION, ET C EST DE LA GEOMETRIE, PAS DU GOUT. En Mercator le monde
   est CARRE : dans un cadre trois fois plus large que haut, le montrer en
   entier obligeait Leaflet a repeter le planisphere. Une hauteur proche des
   deux tiers de la largeur laisse tenir la bande utile (Spitzberg au nord,
   Antarctique au sud), qui occupe 60 % de la hauteur du monde. */
.dt-carte-cadre{width:100%;aspect-ratio:16/9;min-height:340px;max-height:min(76vh,640px)}
.dt-carte-cadre:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* Positron est deja desature : aucun filtre, sinon les tuiles ne collent
   plus au fond ci-dessous et la jointure se voit.
   #d4dadc EST la couleur d eau de Positron, relevee sur une tuile : ce qui
   depasse du planisphere se lit donc comme du large. */
/* Selecteur a DEUX classes, et ce n est pas du zele : la feuille de Leaflet est
   chargee dans le corps de page, donc APRES site.css, et son
   `.leaflet-container{background:#ddd}` gagnait a specificite egale. Le fond
   sortait plus clair que l eau des tuiles, et la jointure se voyait. */
.dt-carte-plein .dt-carte-cadre{background:#d1e6e9} /* eau du style MapTiler dataviz (2026-08-09), relevée sur une tuile */
.leaflet-container{font:inherit}

/* Marqueur : un disque dont le diametre porte le volume (cf. `_carte.php`). */
.dt-pt{display:block;width:var(--d,16px);height:var(--d,16px);border-radius:50%;
  border:2px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.35);
  background:var(--orange);opacity:.88;transition:transform .12s ease,opacity .12s ease}
.leaflet-marker-icon:hover .dt-pt{transform:scale(1.18);opacity:1}
.dt-pt--fluviale{background:#2f7fbf}
.dt-pt--grande{background:#101014}
.dt-pt--expedition{background:#12806a}
.dt-pastille{display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--orange);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);
  vertical-align:-1px;margin-right:.3rem}

/* LEGENDE POSEE SUR LA CARTE. `pointer-events:none` : elle informe, elle ne
   se clique pas, et sans cela elle avalerait le glisse de la carte.
   z-index 620 : au-dessus des tuiles et des marqueurs (600), sous les
   controles Leaflet (800) et sous les infobulles. */
.dt-carte-legende{list-style:none;position:absolute;left:.8rem;bottom:.8rem;z-index:620;
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:.55rem .8rem;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 20px rgba(16,16,20,.12);
  font-size:.78rem;font-weight:600;color:var(--body);pointer-events:none;
  max-width:calc(100% - 1.6rem)}
@media(min-width:760px){
  .dt-carte-legende{left:1.2rem;bottom:1.2rem;flex-direction:column;gap:.42rem}
}
/* SOUS 620 PX ELLE PASSE DESSOUS. Posee sur une carte de 340 px de haut, elle
   en mangeait un cinquieme, la ou lespace est justement compte. */
@media(max-width:619.98px){
  .dt-carte-legende{position:static;background:none;border:0;box-shadow:none;
    max-width:none;padding:.7rem 1rem;justify-content:center;color:var(--muted);
    font-weight:600}
}
.leaflet-tooltip{font-size:.82rem;line-height:1.35;border-radius:8px;border:0;
  box-shadow:0 4px 14px rgba(0,0,0,.18)}
/* ---- Onglets de filtre de l index ---- */
.dt-onglets{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem}
.dt-onglet{padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--body);font-size:.87rem;font-weight:600;cursor:pointer;
  min-height:38px}
.dt-onglet:hover{border-color:var(--orange);color:var(--orange)}
.dt-onglet.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.dt-onglet:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Les modificateurs de couleur APRES `.dt-pastille`, qui declare un fond par
   defaut : a specificite egale, c est la derniere regle qui gagne, et la
   legende sortait entierement orange. */
.dt-pastille.dt-pt--fluviale{background:#2f7fbf}
.dt-pastille.dt-pt--grande{background:#101014}
.dt-pastille.dt-pt--expedition{background:#12806a}

/* ================================================================
   INDEX DES DESTINATIONS  (`/destinations`)
   ================================================================
   La page n est pas un texte : c est un referentiel de 73 entrees plus une
   carte. Elle prend donc une largeur de GRILLE (1 240) et non la largeur de
   LECTURE de `.cp-wrap` (820), qui reste imposee aux blocs de texte, un
   paragraphe de 1 240 px de large ne se lisant pas.
   ---------------------------------------------------------------- */
.cp--index .cp-wrap{max-width:1240px}
.cp--index .cp-resume,
.cp--index .dt-intro{max-width:66ch}

/* Oeil de rubrique : il dit de quoi parle la section avant son titre. Petit,
   en capitales espacees, orange. C est le seul endroit ou l orange sert de
   couleur de texte sur cette page. */
.dt-oeil{margin:0 0 .2rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange)}
.dt-section{scroll-margin-top:90px}
.dt-intro{color:var(--body);margin:0 0 1.4rem}

/* ---- Reperes chiffres de l en-tete ---- */
.dt-reperes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  margin:1.4rem 0 0;padding:0}
@media(min-width:760px){.dt-reperes{grid-template-columns:repeat(4,1fr);gap:.8rem}}
.dt-reperes li{padding:.75rem .9rem;background:#fff;border:1px solid var(--line);
  border-radius:12px}
.dt-r-n{display:block;font-family:var(--font-head);font-size:1.35rem;font-weight:800;
  color:var(--ink);line-height:1.15;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt-r-n em{font-style:normal;font-size:.8rem;font-weight:600;color:var(--muted)}
.dt-r-l{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* ---- Bandes editoriales, pleine largeur ---- */
.dt-bande{background:var(--bg-soft);border-block:1px solid var(--line);
  padding:2.4rem 0;margin:2.4rem 0}
.dt-bande--fin{margin-bottom:0;border-bottom:0}
.dt-bande .dt-section{margin-top:0}

/* Deux blocs en vis-a-vis : c est une comparaison, pas une enumeration. */
.dt-duo{display:grid;gap:1rem}
@media(min-width:820px){.dt-duo{grid-template-columns:1fr 1fr;gap:1.4rem}}
.dt-duo-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem}
.dt-duo-c h3{font-family:var(--font-head);font-size:1.1rem;color:var(--ink);
  margin:0 0 .6rem;padding-bottom:.5rem;border-bottom:2px solid var(--orange);
  display:inline-block}
.dt-duo-c p{margin:0 0 .7rem;font-size:.94rem}
.dt-duo-pour{color:var(--muted);font-size:.88rem;margin-bottom:0}
.dt-duo-pour strong{color:var(--ink)}

/* ---- Les sept criteres : une grille, pas une liste a puces ----
   Aucun ne passe avant l autre : pas de numerotation, qui laisserait croire a
   des etapes. */
.dt-criteres{list-style:none;display:grid;gap:1rem;margin:0;padding:0}
@media(min-width:700px){.dt-criteres{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.dt-criteres{grid-template-columns:repeat(3,1fr)}}
.dt-criteres li{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.05rem 1.15rem}
.dt-criteres h3{font-family:var(--font-head);font-size:1rem;color:var(--ink);margin:0 0 .45rem}
.dt-criteres p{margin:0;font-size:.92rem;color:var(--body)}
.dt-criteres a{color:var(--orange);font-weight:600}

/* ---- L arbre : les bassins en cartes, en grille ---- */
.dt-bassins{display:grid;gap:.9rem;align-items:start}
@media(min-width:760px){.dt-bassins{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.dt-bassins{grid-template-columns:repeat(3,1fr)}}
.dt-bassin{margin:0;padding:1rem 1.1rem;background:#fff;
  border:1px solid var(--line);border-radius:14px}
.dt-bassin h4{margin:0 0 .6rem;font-size:1rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--line)}
.dt-famille{margin:0 0 2.2rem}

/* `[hidden]` NE SUFFIT PAS des qu une regle pose un `display` : les filtres de
   l index cachent en posant l attribut, il faut donc le redire ici, sinon les
   cartes filtrees restent visibles. Deja rencontre sur le rail d etiquettes. */
.dt-bassin[hidden],.dt-famille[hidden],.dt-feuilles > li[hidden]{display:none}

/* La barre de filtres suit la lecture : sur une page de 73 destinations, elle
   sort du champ des le premier defilement. */
@media(min-width:760px){
  .dt-onglets{position:sticky;top:86px;z-index:20;padding:.6rem 0;
    background:var(--bg);margin-inline:-.4rem;padding-inline:.4rem;
    /* Filet degrade plutot quun trait : la barre doit se detacher de ce qui
       passe dessous sans dessiner une seconde bordure sous len-tete. */
    box-shadow:0 10px 12px -11px rgba(16,16,20,.45)}
}


/* ================================================================
   LE MAG  (`/le-mag`, `/le-mag/{slug}`)
   ================================================================
   Meme facture que les actualites (`.nw-*`) : mobile d abord, cartes au
   format du site, largeur de grille sur l index et largeur de lecture sur
   l episode. Prefixe propre, aucune classe partagee : les deux sections
   n ont ni le meme contenu ni la meme carte.
   ---------------------------------------------------------------- */
.mg-wrap{max-width:1180px;margin:0 auto;padding:1.25rem 1rem 2rem}
.mg-head{margin-bottom:1.4rem}
.mg-oeil{margin:0 0 .2rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange)}
.mg-head .cp-resume{max-width:66ch}
.mg-section{font-family:var(--font-head);font-size:1.3rem;color:var(--ink);margin:2rem 0 .9rem}
.mg-vide{color:var(--muted)}

/* ---- Abonnement : le CTA de la section ----
   Rouge YouTube et non orange de charte, VOLONTAIREMENT : c est le seul
   endroit du site ou l on envoie vers une plateforme tierce, et la couleur
   dit ou mene le bouton. Il ne concurrence donc pas les CTA de vente. */
.mg-abo-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:1.1rem 0 0}
.mg-abo-ligne--fin{margin-top:1.8rem}
.mg-abo{display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:999px;border:2px solid #d1252b;background:#d1252b;
  color:#fff;font-weight:700;font-size:.92rem;text-decoration:none;min-height:44px;
  transition:background .16s,color .16s}
.mg-abo:hover{background:#fff;color:#d1252b}
.mg-abo i{font-size:1.05rem}
.mg-compte{font-size:.85rem;color:var(--muted)}
.mg-compte strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- Cartes d episode ---- */
.mg-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:621px){.mg-grid{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.mg-grid{grid-template-columns:repeat(3,1fr)}}
.mg-card{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.mg-card:hover{border-color:var(--orange);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(16,16,20,.14)}
@media(prefers-reduced-motion:reduce){
  .mg-card,.mg-card:hover{transition:none;transform:none}
}
.mg-card-link{display:block;color:inherit;text-decoration:none}
.mg-card-media{position:relative;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden}
.mg-card-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Le triangle de lecture : sans lui, une vignette YouTube se lit comme une
   photo d illustration et rien ne dit qu il y a une video derriere. */
.mg-play{position:absolute;inset:0;margin:auto;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(16,16,20,.62);color:#fff;font-size:1.05rem;
  padding-left:4px;   /* le triangle n est pas centre optiquement dans son carre */
  transition:background .14s ease,transform .14s ease}
.mg-card:hover .mg-play{background:#d1252b;transform:scale(1.06)}
.mg-duree{position:absolute;right:.5rem;bottom:.5rem;
  padding:.15rem .45rem;border-radius:6px;background:rgba(16,16,20,.78);
  color:#fff;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}
.mg-card-body{padding:.85rem 1rem 1rem}
.mg-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:0 0 .45rem}
.mg-chip{padding:.15rem .5rem;border-radius:999px;border:1px solid var(--line);
  background:var(--bg-soft);color:var(--muted);font-size:.72rem;font-weight:600}
.mg-chip--cie{border-color:var(--orange);color:var(--orange);background:#fff}
.mg-card-titre{margin:0 0 .35rem;font-family:var(--font-head);font-weight:800;
  font-size:1.02rem;line-height:1.25;color:var(--ink)}
.mg-card-extrait{margin:0;font-size:.86rem;color:var(--body);line-height:1.5}
.mg-card-pied{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin:.7rem 0 0;font-size:.78rem;color:var(--muted)}
.mg-card-invite{display:inline-flex;align-items:center;gap:.3rem}
.mg-card-voir{margin-left:auto;color:var(--orange);font-weight:700}

/* ---- Page episode ---- */
.mg-cols{display:grid;gap:1.6rem}
@media(min-width:1000px){.mg-cols{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.mg-corps{min-width:0}   /* sans quoi l iframe impose sa largeur a la colonne */
.mg-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:0 0 1.2rem;
  font-size:.84rem;color:var(--muted)}
.mg-meta span{display:inline-flex;align-items:center;gap:.35rem}
.mg-video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  background:var(--black);border:1px solid var(--line)}
.mg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mg-intro{margin-top:1.4rem;font-size:1.02rem}

/* ---- Moments forts ----
   Une LISTE ORDONNEE : ce sont les moments d une video, ils ont un ordre, et
   c est le seul endroit de ce chantier ou la numerotation dit quelque chose de
   vrai. Le compteur reste masque, l horodatage le remplace quand il existe. */
.mg-points{margin:2rem 0 0;padding:1.2rem 1.3rem;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:14px}
.mg-points h2{font-family:var(--font-head);font-size:1.1rem;color:var(--ink);
  margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.mg-points h2 i{color:var(--orange);font-size:.95rem}
.mg-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.mg-pt{display:flex;gap:.7rem;align-items:baseline;font-size:.92rem;line-height:1.5}
.mg-pt-t{flex:0 0 auto;min-width:58px;text-align:center;
  padding:.15rem .4rem;border-radius:6px;background:#fff;border:1px solid var(--line);
  color:var(--orange);font-weight:700;font-size:.78rem;text-decoration:none;
  font-variant-numeric:tabular-nums}
.mg-pt-t:hover{background:var(--orange);border-color:var(--orange);color:#fff}
/* Sans horodatage (l episode 1 n en a aucun), une puce tient la colonne : la
   liste garde son alignement au lieu de se decaler ligne apres ligne. */
.mg-pt-puce{flex:0 0 auto;width:58px;display:flex;justify-content:center}
.mg-pt-puce::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);display:block;margin-top:.55rem}
.mg-pt-txt{min-width:0}
.mg-pt-txt strong{color:var(--ink)}

/* ---- Encart de conversion ---- */
.mg-aside{min-width:0}
@media(min-width:1000px){.mg-encart{position:sticky;top:100px}}
.mg-encart{background:var(--black);color:#fff;border-radius:16px;padding:1.3rem}
.mg-encart-oeil{margin:0 0 .3rem;font-size:.72rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange)}
/* `theme.css` impose une couleur d encre a tous les titres : sur ce fond noir
   il faut la remettre a blanc, sinon le titre devient illisible. Piege deja
   rencontre sur le heros d accueil et sur « A propos ». */
.mg-encart-titre{color:#fff;font-family:var(--font-head);font-size:1.12rem;
  line-height:1.25;margin:0 0 .5rem}
.mg-encart p{margin:0 0 1rem;font-size:.88rem;color:rgba(255,255,255,.82)}
.mg-encart-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:46px;padding:.6rem 1rem;border-radius:999px;
  border:2px solid var(--orange);background:var(--orange);color:#fff;
  font-weight:700;text-decoration:none;transition:background .16s,color .16s}
.mg-encart-cta:hover{background:#fff;border-color:#fff;color:var(--orange)}

.mg-voisins{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line)}

/* Sur telephone, la colonne des horodatages mangeait 58 px des 343 disponibles.
   Elle se resserre : l horodatage reste lisible, le texte recupere la place. */
@media(max-width:619.98px){
  .mg-points{padding:1rem}
  .mg-pt{gap:.55rem;font-size:.9rem}
  .mg-pt-t{min-width:50px;font-size:.74rem}
  .mg-pt-puce{width:14px}
}

/* ================================================================
   PORTS DE DEPART  (`/ports-depart`, `/ports-depart/{slug}`)
   ================================================================
   Le gabarit est celui des destinations : `.dt-*` sert donc tel quel pour la
   colonne de contexte, les reperes, les cartes de groupe et la bande de
   maillage. Deux UI paralleles pour une meme structure finiraient par
   diverger, et ce chantier a deja demande un panneau de facettes partage.
   `.pd-*` ne porte QUE ce qui est propre a l embarquement.
   ---------------------------------------------------------------- */
.cp--index .pd-pays{align-items:start}
.pd-pays-titre{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .6rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--line);
  font-family:var(--font-head);font-size:1rem;color:var(--ink)}
.pd-pays-titre span{color:var(--muted);font-size:.78rem;font-weight:600;
  font-variant-numeric:tabular-nums;margin-left:auto}

/* ---- Ports francais, en tete d index ----
   Partir sans avion est le premier critere de tri d un acheteur francais :
   ces ports meritent des cartes, pas une ligne de liste. */
.pd-vedettes{list-style:none;display:grid;grid-template-columns:1fr;gap:.7rem;margin:0;padding:0}
@media(min-width:621px){.pd-vedettes{grid-template-columns:1fr 1fr}}
@media(min-width:981px){.pd-vedettes{grid-template-columns:repeat(4,1fr)}}
.pd-vedettes a{display:flex;flex-direction:column;gap:.2rem;
  padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:12px;
  color:var(--ink);text-decoration:none;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.pd-vedettes a:hover{border-color:var(--orange);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,16,20,.12)}
@media(prefers-reduced-motion:reduce){
  .pd-vedettes a,.pd-vedettes a:hover{transition:none;transform:none}
}
.pd-vedettes strong{font-family:var(--font-head);font-size:1.02rem;line-height:1.2}
.pd-v-chiffres{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- « En pratique » : terminal, aeroport, acces ----
   Le seul contenu de la page qu aucun comparateur ne peut recopier depuis un
   flux. Il vient du referentiel et s edite au back-office. */
.pd-pratique{background:var(--bg-soft);border-block:1px solid var(--line);padding:2.2rem 0}
.pd-pratique > .cp-wrap{max-width:1560px;padding-inline:1.2rem}
.pd-pratique .dt-section{margin-top:0}
.pd-grille{display:grid;gap:1rem;align-items:start}
@media(min-width:760px){.pd-grille{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.pd-grille{grid-template-columns:repeat(3,1fr)}}
.pd-carte{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.pd-carte h3{display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-head);font-size:1rem;color:var(--ink);margin:0 0 .7rem}
.pd-carte h3 i{color:var(--orange);font-size:.9rem}
.pd-carte .cp-body{font-size:.9rem}
.pd-carte .cp-body :last-child{margin-bottom:0}
.pd-intro{margin:0 0 .6rem;font-size:.9rem;color:var(--body)}
.pd-detail{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)}
.pd-detail strong{color:var(--ink)}
.pd-aeroport{margin:0;font-size:.95rem}
/* Le code IATA en pastille : trois lettres perdues dans une phrase ne se
   reperent pas, et c est ce qu on recopie dans un moteur de vol. */
.pd-iata{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border-radius:6px;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em}

/* Les hotels sont LONGS (une fiche par etablissement) : deplies d office ils
   ajoutaient jusqu a 2 000 px avant le maillage. Meme traitement que les
   colonnes du pied de page. */
.pd-hotels{margin:1rem 0 0;background:#fff;border:1px solid var(--line);border-radius:14px}
.pd-hotels > summary{display:flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.9rem 1.2rem;font-family:var(--font-head);font-size:1rem;color:var(--ink);
  list-style:none}
.pd-hotels > summary::-webkit-details-marker{display:none}
.pd-hotels > summary i{color:var(--orange);font-size:.9rem}
.pd-hotels > summary::after{content:"+";margin-left:auto;font-size:1.2rem;color:var(--muted);
  font-weight:700;line-height:1}
.pd-hotels[open] > summary::after{content:"–"}
.pd-hotels > summary:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.pd-hotels .cp-body{padding:0 1.2rem 1.2rem;font-size:.9rem}

/* Sur les index a carte, l en-tete ne porte plus de filet : il tombait juste
   au-dessus de la carte, qui a deja sa propre bordure haute — deux traits pour
   une seule separation. Et les paddings s additionnaient (17,6 + 2 + 22,4 du
   `.cp-head`, puis 40 du `.cp-wrap`) en 110 px de vide entre les reperes
   chiffres et le titre de la carte. */
/* Porte sur `:has(.dt-carte)` et non sur `.cp--index` : cette classe sert
   AUSSI aux index de sections editoriales (`/informations`, `/faq`), ou aucune
   carte ne suit et ou le filet separe utilement. La regle ne s applique donc
   que la ou elle est justifiee — quand une carte suit. */
.cp--index:has(.dt-carte) .cp-head{border-bottom:0;padding-bottom:0;margin-bottom:0}
.cp--index:has(.dt-carte) > .cp-wrap:first-of-type{padding-bottom:1.4rem}

/* ---- Index des pays : filtre alphabetique ----
   La barre de lettres est longue (21 groupes) : les boutons sont plus etroits
   que les onglets de familles, et carres, pour tenir sur une ligne en desktop
   et se replier proprement sur telephone. */
.py-lettres .dt-onglet[data-l]:not([data-l="tout"]){min-width:38px;padding:.45rem .55rem;text-align:center}
/* `[hidden]` redit en CSS : `.dt-bassin` pose un `display`, l attribut seul ne
   cacherait plus rien. Meme piege que sur l index des destinations. */
.py-groupe[hidden]{display:none}

/* ================================================================
   COMPAGNIES  (`/compagnies`, `/compagnies/{slug}`)
   ================================================================ */
.cie-n{display:inline-block;margin-left:.25rem;padding:.05rem .35rem;border-radius:999px;
  background:rgba(16,16,20,.08);font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.dt-onglet.is-on .cie-n{background:rgba(255,255,255,.25)}

/* ---- Grille des compagnies ----
   Le LOGO porte la reconnaissance : on le met en tete de carte, sur fond blanc
   et en `object-fit:contain`, ces images ayant des proportions tres variables. */
.cie-grille{list-style:none;display:grid;grid-template-columns:1fr;gap:.8rem;margin:0;padding:0}
@media(min-width:621px){.cie-grille{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.cie-grille{grid-template-columns:repeat(3,1fr)}}
.cie-carte[hidden]{display:none}   /* `display:grid` ecraserait l attribut seul */
.cie-carte > a{position:relative;display:flex;align-items:center;gap:.9rem;
  padding:.9rem 1rem;background:#fff;border:1px solid var(--line);border-radius:14px;
  color:var(--ink);text-decoration:none;height:100%;
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.cie-carte > a:hover{border-color:var(--orange);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,16,20,.12)}
@media(prefers-reduced-motion:reduce){
  .cie-carte > a,.cie-carte > a:hover{transition:none;transform:none}
}
.cie-logo{flex:0 0 auto;width:86px;height:52px;display:flex;align-items:center;justify-content:center}
.cie-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cie-corps{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cie-corps strong{font-family:var(--font-head);font-size:1rem;line-height:1.2}
.cie-base{font-size:.82rem;color:var(--body);line-height:1.4}
.cie-chiffres{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cie-badge{position:absolute;top:.6rem;right:.6rem;padding:.1rem .45rem;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.cie-badge--luxe{background:var(--ink);color:#fff}
.cie-badge--premium{background:#fff;color:var(--orange);border:1px solid var(--orange)}

/* ---- Pastille de logo sur la carte ----
   Fond blanc et ombre : sans eux, un logo sombre disparait sur le fond clair
   des tuiles, et un logo clair devient invisible sur la mer. */
.cie-pin{display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:#fff;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(16,16,20,.32);
  overflow:hidden;transition:transform .12s ease}
/* Taille IMPOSEE et non `auto` : une image en `auto` mesure 0x0 avant d etre
   chargee, ce qui a suffi a empecher son chargement (cf. `_carte.php`). */
.cie-pin img{width:26px;height:26px;object-fit:contain}
.leaflet-marker-icon:hover .cie-pin{transform:scale(1.14)}

/* ---- En-tete de la landing : logo a cote du titre ---- */
.cie-tete{display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap}
.cie-tete-logo{flex:0 0 auto;width:110px;height:56px;display:flex;align-items:center}
.cie-tete-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cie-tete-txt{flex:1 1 320px;min-width:0}
.cie-baseline{margin:0 0 .5rem;font-size:.95rem;color:var(--muted);font-style:italic}

/* ================================================================
   NAVIRES  (`/bateaux`, `/bateaux/{slug}`)
   ================================================================ */
/* Fiche technique : une liste de definitions en deux colonnes, alignee, avec
   des chiffres tabulaires. Un tableau HTML aurait deborde sur telephone. */
.bt-dl{margin:0;font-size:.88rem}
.bt-dl > div{display:flex;gap:.6rem;padding:.32rem 0;border-bottom:1px solid var(--line)}
.bt-dl > div:last-child{border-bottom:0}
.bt-dl dt{flex:0 0 46%;color:var(--muted)}
.bt-dl dd{margin:0;flex:1 1 auto;color:var(--ink);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right}
.bt-jumeaux{margin-top:1rem;font-size:.88rem}
/* Le bloc fiche est plus dense que les deux autres : il peut s allonger sans
   etirer ses voisins. */
.pd-grille .bt-fiche{align-self:start}

.bt-flottes{align-items:start}
.bt-flotte[hidden]{display:none}
.bt-flotte .dt-feuilles > li[hidden]{display:none}
.bt-flotte .pd-pays-titre a{color:var(--ink);text-decoration:none}
.bt-flotte .pd-pays-titre a:hover{color:var(--orange)}

/* Un seul bloc pratique (cas frequent sur les navires : beaucoup n ont que
   leur fiche technique) : il ne doit pas occuper un tiers d une grille a trois
   colonnes, avec deux vides a cote. `:has()` evite d avoir a compter les blocs
   dans la vue. */
.pd-grille:has(> :only-child){grid-template-columns:minmax(0,560px)}
.pd-grille:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- Index des navires : vitrine photo ----
   On ne choisit pas un navire dans une liste de noms. La carte est donc une
   PHOTO d abord, le texte ensuite. */
.bt-barre{position:sticky;top:86px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;
  gap:.6rem 1rem;padding:.7rem 0;margin:0 0 1.2rem;background:var(--bg);
  box-shadow:0 10px 12px -11px rgba(16,16,20,.45)}
.bt-barre[hidden]{display:none}
@media(max-width:759.98px){.bt-barre{position:static;box-shadow:none}}

.bt-recherche{position:relative;flex:1 1 260px;min-width:0;display:flex;align-items:center}
.bt-recherche > i{position:absolute;left:.85rem;color:var(--muted);font-size:.9rem;pointer-events:none}
.bt-recherche input{width:100%;min-height:44px;padding:.5rem 2.4rem;border:1px solid var(--line);
  border-radius:999px;background:#fff;font-size:1rem;color:var(--ink)}
/* 16 px minimum : en dessous, iOS zoome sur le champ au focus et casse la mise
   en page. Meme regle que sur les panneaux du moteur. */
.bt-recherche input:focus{outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,99,0,.14)}
.bt-recherche input::-webkit-search-cancel-button{display:none}
.bt-vider{position:absolute;right:.5rem;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--bg-soft);color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer}
.bt-vider:hover{background:var(--orange);color:#fff}
.bt-tailles{margin:0}
.bt-compte{margin:0;font-size:.85rem;color:var(--muted);white-space:nowrap}
.bt-compte strong{color:var(--ink);font-variant-numeric:tabular-nums}

.bt-grille{list-style:none;display:grid;grid-template-columns:1fr;gap:1rem;margin:0;padding:0}
@media(min-width:560px){.bt-grille{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.bt-grille{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.bt-grille{grid-template-columns:repeat(4,1fr)}}
.bt-carte[hidden]{display:none}
.bt-carte > a{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--ink);
  text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.bt-carte > a:hover{border-color:var(--orange);transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(16,16,20,.16)}
@media(prefers-reduced-motion:reduce){
  .bt-carte > a,.bt-carte > a:hover{transition:none;transform:none}
}
/* Le cadre est pose AVANT le chargement (`aspect-ratio`) : c est ce qui rend
   `loading="lazy"` sans danger ici, a la difference des logos de la carte des
   compagnies, dimensionnes en `auto` et donc jamais charges. */
.bt-photo{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden}
.bt-photo > img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .3s ease}
.bt-carte > a:hover .bt-photo > img{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){.bt-carte > a:hover .bt-photo > img{transform:none}}
/* Logo de compagnie sur pastille blanche : un logo sombre disparaitrait sur
   une coque sombre, un logo clair sur un ciel. */
.bt-cie-logo{position:absolute;top:.5rem;left:.5rem;display:flex;align-items:center;
  justify-content:center;padding:.25rem .4rem;border-radius:8px;background:rgba(255,255,255,.94);
  box-shadow:0 2px 6px rgba(16,16,20,.2)}
.bt-cie-logo img{max-width:52px;max-height:22px;width:auto;height:auto;object-fit:contain;display:block}
.bt-pax{position:absolute;right:.5rem;bottom:.5rem;display:inline-flex;align-items:center;gap:.3rem;
  padding:.18rem .5rem;border-radius:999px;background:rgba(16,16,20,.78);color:#fff;
  font-size:.74rem;font-weight:600;font-variant-numeric:tabular-nums}
.bt-corps{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem .85rem;flex:1 1 auto}
.bt-nom{font-family:var(--font-head);font-size:1rem;line-height:1.2}
.bt-cie{font-size:.78rem;color:var(--muted)}
.bt-pied{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  margin-top:auto;padding-top:.5rem;font-variant-numeric:tabular-nums}
.bt-n{font-size:.78rem;color:var(--muted)}
.bt-prix{font-weight:800;color:var(--orange);font-size:.92rem;white-space:nowrap}

.bt-vide{margin:1.6rem 0;text-align:center;color:var(--muted)}
.bt-vide[hidden]{display:none}
.bt-reset{margin-left:.5rem;padding:.35rem .8rem;border:1px solid var(--orange);border-radius:999px;
  background:#fff;color:var(--orange);font-weight:600;cursor:pointer}
.bt-reset:hover{background:var(--orange);color:#fff}
.bt-cies{margin-bottom:1rem}

/* ---- Hub navire : menu et pages de rubriques ----
   Le menu est une BANDE DÉFILABLE, pas un carrousel a chevrons : jusqu a neuf
   rubriques, elles tiennent sur une ligne en desktop et se defilent au doigt
   sur telephone. Le legacy avait des chevrons ; ils ne servaient qu a
   compenser une piste qui ne defilait pas a la molette. */
.hub-nav{position:sticky;top:86px;z-index:25;background:#fff;
  border-bottom:1px solid var(--line);box-shadow:0 6px 10px -9px rgba(16,16,20,.3)}
@media(max-width:759.98px){.hub-nav{position:static;box-shadow:none}}
.hub-nav-piste{display:flex;gap:.4rem;max-width:1240px;margin:0 auto;padding:.6rem 1rem;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hub-nav-piste::-webkit-scrollbar{display:none}
.hub-nav-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--body);font-size:.87rem;font-weight:600;text-decoration:none;white-space:nowrap;
  min-height:38px;transition:border-color .14s,color .14s,background .14s}
.hub-nav-item:hover{border-color:var(--orange);color:var(--orange)}
.hub-nav-item.is-on{background:var(--orange);border-color:var(--orange);color:#fff}
.hub-nav-item i{font-size:.85rem}

.hub-fil{margin:.3rem 0 0;font-size:.9rem;color:var(--muted)}
.hub-fil a{color:var(--orange);font-weight:600}
/* La galerie du back-office arrive en grille Bootstrap pleine largeur : on la
   laisse deborder de la colonne de lecture, c est une bande d images. */
.hub-intro{font-size:1.02rem;margin-bottom:1.2rem}
.hub-corps{margin-top:1.4rem}

.hub-cta{margin:1.4rem 0;text-align:center}
.hub-cta--fin{margin:2.2rem 0 .5rem}
.hub-cta-btn{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:center;
  padding:.8rem 1.5rem;border-radius:999px;border:2px solid var(--orange);background:var(--orange);
  color:#fff;font-weight:700;font-size:1rem;text-decoration:none;min-height:50px;
  transition:background .16s,color .16s}
.hub-cta-btn:hover{background:#fff;color:var(--orange)}
.hub-cta-btn span{font-weight:800}
.cp--hub .cp-head{border-bottom:0;padding-bottom:0}

/* ---- Hub navire : héros sombre et bande de photos ----
   Repris du gabarit navire de cruise-ship.info. Sur une page de guide, le nom
   du navire doit porter la page ; noyé dans le corps de texte, il ne dit plus
   de quoi on parle. */
.hub-in{max-width:1180px;margin:0 auto;padding:0 1rem}
/* LARGEUR DE HUB ET NON DE LECTURE. `.cp-wrap` fait 820 px, ce qui convient à
   un article mais étrangle un guide de 37 000 signes bâti en grilles Bootstrap
   (cartes de cabines, tableaux de restaurants) : trois colonnes dans 820 px ne
   laissent que 250 px chacune. Les blocs de texte courant restent bridés
   ci-dessous. */
.cp--hub .cp-body{max-width:none}
/* LA COLONNE DE TEXTE EST BRIDÉE, LES GRILLES NON, et les DEUX doivent
   suivre la même règle. Ne brider que les `<p>` donnait des titres pleine
   largeur au-dessus de paragraphes à 769 px : ça ne se lit pas comme un
   choix, ça se lit comme un défaut.
   1 148 px de large, ce sont ~180 signes par ligne, soit près du triple de
   ce qui se lit confortablement ; on garde donc une colonne de 84 signes
   pour TOUT le texte courant, titres compris.
   Les `.row`, `.container` et tableaux du contenu repris, eux, prennent
   toute la largeur : c'est pour eux qu'on est passé de 820 à 1 180 px. */
/* PAS DE BRIDE DE LARGEUR SUR LE TEXTE DES HUBS. On est passé de 820 à
   1 180 px pour utiliser la place : la reprendre au texte annulait le gain.
   Pour mémoire, mesuré sur le texte réel : 1 148 px donnent ~146 signes par
   ligne. Si la ligne paraît longue à l'usage, le réglage se fait ici. */
.cp--hub .cp-body > :is(.row, .container, .container-fluid, table, figure, img){max-width:none}

.hub-hero{background:var(--black);color:#fff;padding:1.4rem 0 1.6rem;position:relative;overflow:hidden}
/* Halo orange discret, comme sur la référence : il réchauffe l aplat noir sans
   ajouter d image à charger. */
.hub-hero::before{content:"";position:absolute;top:-45%;right:-5%;width:420px;height:420px;
  border-radius:50%;background:var(--orange);opacity:.10;pointer-events:none}
.hub-hero > .hub-in{position:relative;z-index:2}
.hub-hero .fil{margin-bottom:.9rem}
.hub-hero .fil a{color:rgba(255,255,255,.72)}
.hub-hero .fil a:hover{color:#fff}
.hub-hero .fil [aria-current]{color:#fff}
.hub-hero-tete{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.hub-hero-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:96px;height:52px;padding:.35rem .5rem;border-radius:10px;background:#fff}
.hub-hero-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* `theme.css` impose `h1{color:var(--ink)}` : sans cette ligne le titre sort en
   noir sur noir. Piège déjà rencontré sur le héros d accueil et « À propos ». */
.hub-hero .cp-h1{color:#fff;margin:0}
.hub-hero .hub-fil{color:rgba(255,255,255,.7);margin:.35rem 0 0}
.hub-hero .hub-fil a{color:#fff;text-decoration:underline}

.hub-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0}
.hub-chips li{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}
.hub-chips li.is-orange{background:var(--orange);border-color:var(--orange)}
.hub-chips i{opacity:.85;font-size:.78rem}

/* ---- Bande de photos JOINTIVES, fermée par un filet orange ---- */
.hub-photos{position:relative;background:var(--black);overflow:hidden}
.hub-photos__row{display:grid;grid-template-columns:repeat(4,1fr)}  /* aucune gouttière : c est une bande, pas quatre vignettes */
.hub-photos__cell{position:relative;display:block;height:250px;overflow:hidden}
.hub-photos__cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease,filter .3s ease}
.hub-photos__cell::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 60%,rgba(16,16,20,.4));
  opacity:0;transition:opacity .3s ease;pointer-events:none}
a.hub-photos__cell:hover img{transform:scale(1.08);filter:brightness(1.1)}
a.hub-photos__cell:hover::after{opacity:1}
/* LE FILET ORANGE : il referme la bande et la rattache à la charte. */
.hub-photos::after{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--orange),#ff8533,var(--orange))}
.hub-photos__all{position:absolute;right:14px;bottom:18px;z-index:3;display:inline-flex;
  align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:8px;background:#fff;
  color:var(--orange);font-family:var(--font-head);font-weight:700;font-size:.85rem;
  text-decoration:none;box-shadow:0 4px 14px rgba(16,16,20,.25)}
@media(max-width:992px){.hub-photos__cell{height:200px}}
@media(max-width:768px){
  .hub-photos__row{grid-template-columns:repeat(2,1fr)}
  .hub-photos__cell{height:150px}
  .hub-photos__all{bottom:12px;font-size:.78rem;padding:.3rem .6rem}
}
@media(max-width:480px){.hub-photos__cell{height:120px}}

/* ---- Grilles Bootstrap du contenu repris : gouttière VERTICALE ----
   `.row` a `--bs-gutter-y:0` par défaut : les colonnes ne sont séparées
   horizontalement que par le padding, et **verticalement par rien**. Sur
   téléphone, où chaque `col-md-4` passe pleine largeur, les cartes se
   touchaient donc bord à bord.
   La marge basse de `.card` ne suffisait pas : `.row` est un conteneur FLEX,
   et la marge d une carte à l intérieur d une colonne n écarte pas les
   colonnes entre elles. C est la gouttière de Bootstrap qu il faut, elle pose
   un `margin-top` sur les colonnes, qui sont les éléments flex. */
.cp-body .row{--bs-gutter-y:1.25rem}
/* La carte remplit sa colonne : sa marge basse ferait doublon avec la
   gouttière, et casserait l alignement des cartes `h-100`. */
.cp-body .row .card{margin-bottom:0}

/* ---- Chapô du hub : il était collé sous la bande de photos ---- */
.hub-intro{margin-top:1.7rem}

/* ============================================================
   ESCALES — index, landing transactionnelle, avis
   ============================================================
   Réutilise la barre d'outils des navires (`.bt-barre`) : mêmes gestes, même
   comportement collant, donc rien à réapprendre d'un index à l'autre. Ce qui
   suit n'ajoute que ce que les escales ont en propre — le select de pays, les
   cartes de la grille, les trois tableaux de la landing et le bloc d'avis. */

.es-barre{gap:.55rem}
.es-select{padding:.5rem .75rem;border:1px solid var(--line);border-radius:10px;
    font-size:.86rem;background:#fff;color:var(--ink);max-width:15rem}
.es-select:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

/* LA GRILLE. 936 cartes : elles doivent être légères et lisibles en diagonale,
   d'où le texte plutôt que la photo — seules 222 escales en ont une, une
   grille à trous se lit comme une page inachevée. */
.es-grille{display:grid;gap:.85rem;list-style:none;margin:1.35rem 0 0;padding:0;
    grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.es-carte[hidden]{display:none}
.es-carte > a{display:flex;flex-direction:column;gap:.4rem;height:100%;
    padding:1rem 1.05rem;border:1px solid var(--line);border-radius:14px;
    background:#fff;color:inherit;text-decoration:none;
    transition:transform .15s,box-shadow .15s,border-color .15s}
.es-carte > a:hover{transform:translateY(-3px);border-color:#d5d5d5;
    box-shadow:0 8px 24px rgba(0,0,0,.10)}
.es-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.es-nom{font-weight:700;font-size:1.02rem;line-height:1.25;color:var(--ink)}
.es-typo{flex:none;border-radius:999px;padding:.15rem .5rem;font-size:.62rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.es-typo--incontournable{background:var(--orange);color:#fff}
.es-typo--confidentielle{background:#f3f4f6;color:#4b5563;border:1px solid #e5e7eb}
.es-pays,.es-meta{font-size:.82rem;color:var(--muted)}
.es-pays i,.es-meta i{color:var(--orange);margin-right:.25rem}
.es-pied{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.45rem}
.es-prix{font-weight:700;color:var(--ink);white-space:nowrap}
.es-guide{font-size:.72rem;font-weight:600;color:var(--orange);
    border:1px solid rgba(255,99,0,.3);border-radius:999px;padding:.05rem .45rem}

/* Rail éditorial « par mer et région ». */
.es-rail{margin:0 0 .55rem;font-size:.92rem;line-height:1.7}
.es-rail-zone{font-weight:700;color:var(--ink);margin-right:.35rem}
.es-rail-zone::after{content:" —";color:var(--muted);font-weight:400}
.es-rail a{color:var(--orange);text-decoration:none}
.es-rail a:hover{text-decoration:underline}

/* LES TROIS TABLEAUX de la landing (prix par durée, compagnies, ports).
   Classe distincte de `.es-grille`, qui est celle de l'index : deux grilles
   qui ne portent pas le même contenu ne doivent pas partager un sélecteur. */
.es-donnees{padding:2.4rem 0 .5rem}
/* LARGEUR DE GRILLE, PAS LARGEUR DE LECTURE. `.cp-wrap` fait 820 px, ce qui est
   la bonne colonne pour du texte courant et la mauvaise pour trois tableaux
   côte à côte : ils tombaient à deux par ligne, puis un. Même correction que
   `.dt-maillage > .cp-wrap` et `.pd-pratique > .cp-wrap`, et même largeur que
   `.results-wrap`, pour que les tableaux s'alignent sur la grille d'offres
   juste au-dessus. */
.es-donnees > .cp-wrap{max-width:1560px;padding-inline:1.2rem}
.es-donnees .dt-section{margin-bottom:1.1rem}
/* `min(19rem, 100%)` et non `19rem` : le minimum d'un `minmax` est un plancher
   DUR. Sous 320 px de conteneur, une piste de 19 rem déborderait de la page au
   lieu de se réduire. */
.es-tabs{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.es-tab{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
    display:flex;flex-direction:column}
.es-tab > h3{margin:0;padding:.8rem 1rem;font-size:.92rem;font-weight:700;color:#fff;
    background:linear-gradient(135deg,#16161a,#2c2c2c)}
.es-tab > h3 i{color:var(--orange);margin-right:.4rem}
/* Un tableau doit pouvoir défiler DANS sa carte : sur mobile, la page ne
   défile jamais latéralement. */
.es-tab-corps{overflow-x:auto}
.es-tab-corps--scroll{max-height:22.5rem;overflow-y:auto}
.es-tab table{width:100%;border-collapse:collapse;font-size:.88rem}
.es-tab th{background:#f8f9fa;font-weight:600;text-align:left;padding:.5rem .8rem;
    font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.es-tab td{padding:.5rem .8rem;border-top:1px solid var(--line)}
.es-tab tbody tr:hover{background:#fafafa}
.es-tab a{color:var(--ink);text-decoration:none}
.es-tab a:hover{color:var(--orange);text-decoration:underline}
/* Chiffres alignés à droite et de largeur fixe : une colonne de nombres qui
   danse est illisible. */
.es-tab .es-n,.es-tab .es-px,.es-tab .es-jour{text-align:right;font-variant-numeric:tabular-nums;
    white-space:nowrap}
.es-tab td.es-px{font-weight:700;color:var(--ink)}
.es-tab td.es-n,.es-tab td.es-jour{color:var(--muted)}
.es-pastille{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-weight:600;
    font-size:.8rem;background:rgba(255,99,0,.1);color:var(--orange);white-space:nowrap}
.es-note{margin:0;padding:.55rem .8rem;font-size:.76rem;color:var(--muted);
    border-top:1px solid var(--line)}
@media (max-width:560px){
    .es-tab .es-jour{display:none}
}

/* AVIS D'ESCALE. */
.es-avis{margin:2rem 0 0}
.es-avis-synthese{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;
    padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.es-avis-note{text-align:center;flex:none}
.es-avis-note strong{font-size:2.2rem;font-weight:800;line-height:1;color:var(--ink)}
.es-avis-note span{font-size:1rem;color:var(--muted)}
.es-avis-note p{margin:.25rem 0 0;font-size:.8rem;color:var(--muted)}
.es-avis-criteres{flex:1 1 18rem;list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.es-avis-criteres li{display:grid;grid-template-columns:minmax(8rem,auto) 1fr 2.2rem;
    align-items:center;gap:.6rem;font-size:.84rem}
.es-avis-jauge{height:6px;border-radius:999px;background:#eceff1;overflow:hidden}
.es-avis-jauge > span{display:block;height:100%;background:var(--orange)}
.es-avis-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.es-avis-liste{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1rem}
.es-avis-item{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:#fff}
.es-avis-tete{display:flex;align-items:center;gap:.6rem;margin:0 0 .2rem}
.es-avis-score{flex:none;background:var(--orange);color:#fff;font-weight:700;font-size:.8rem;
    border-radius:8px;padding:.15rem .45rem}
.es-avis-meta{margin:0 0 .5rem;font-size:.8rem;color:var(--muted)}
.es-avis-texte{margin:0}
.es-avis-photos{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0 0;padding:0}
.es-avis-photos img{border-radius:8px;object-fit:cover;width:10rem;height:7.5rem}
.es-avis-vide{color:var(--muted)}

.es-avis-form{margin:1.4rem 0 0;border:1px solid var(--line);border-radius:14px;background:#fff}
.es-avis-form > summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:700;color:var(--ink);
    list-style:none}
.es-avis-form > summary::-webkit-details-marker{display:none}
.es-avis-form > summary::after{content:"+";float:right;color:var(--orange);font-weight:700}
.es-avis-form[open] > summary::after{content:"–"}
.es-avis-form form{padding:0 1.1rem 1.2rem}
.es-avis-form fieldset{border:0;padding:0;margin:0 0 1.2rem}
.es-avis-form legend{font-size:.78rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;color:var(--muted);margin-bottom:.55rem}
.es-req{color:var(--orange)}
.es-avis-detail{margin:1rem 0 .4rem}
.es-avis-notes{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
    grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.es-avis-notes li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
    font-size:.86rem}
.es-avis-champs{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
    margin-top:.6rem}
.es-avis-champs label{display:flex;flex-direction:column;gap:.25rem;font-size:.84rem}
.es-avis-champs label > span{font-weight:600}
.es-avis-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:0}
.es-avis-envoi small{color:var(--muted);flex:1 1 16rem}

/* FAQ, sur l'index comme dans les rubriques de hub. */
.es-faq{display:grid;gap:.9rem;margin:1rem 0 0}
.es-faq--hub{margin:2rem 0}
.es-faq-item{max-width:74ch}
.es-faq-q{margin:0 0 .2rem;font-weight:700;color:var(--ink)}
.es-faq-r{margin:0;color:var(--muted)}

/* ============================================================
   PROFIL DE CROISIÉRISTE — /membre/{pseudo}
   ============================================================
   Ouvert aux non-membres, gradué selon qui regarde. La structure suit celle
   d'un profil de réseau social (couverture, avatar débordant, identité,
   chiffres, onglets, deux colonnes), mais dans NOTRE charte : un seul orange,
   pas de bleu, et le dégradé sombre du héros plutôt qu'un aplat gris. */

.pf-cover{position:relative;height:clamp(160px,26vw,340px);background-size:cover;background-position:center;
    background-color:var(--ink)}
/* Sans photo, un dégradé de la charte : les comptes repris n'en auront pas au
   départ, et une bande vide se lit comme une page cassée. */
.pf-cover--vide{background-image:linear-gradient(135deg,#16161a 0%,#2b2b31 55%,rgba(255,99,0,.55) 100%)}
.pf-cover-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.35) 100%)}

.pf-in{max-width:1180px;margin:0 auto;padding:0 1rem}

/* L'avatar déborde sur la couverture, comme partout ailleurs : c'est ce qui
   fait lire la page comme un profil et pas comme un article. */
/* `position:relative` N'EST PAS DÉCORATIF ICI, C'EST LA CORRECTION D'UN DÉFAUT
   D'EMPILEMENT : `.pf-cover` est positionné (il porte son voile en absolu) et
   l'en-tête ne l'était pas. Un élément positionné se peint AU-DESSUS d'un
   élément qui ne l'est pas, quel que soit l'ordre du DOM — l'avatar passait
   donc SOUS la couverture au lieu de déborder dessus, et toute la marge
   négative ne servait à rien. */
.pf-tete{position:relative;z-index:1;
    display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.1rem;margin-top:-3.6rem;padding-bottom:1rem}
.pf-avatar{flex:none;width:9.4rem;height:9.4rem;border-radius:50%;overflow:hidden;background:var(--ink);
    border:4px solid #fff;box-shadow:0 6px 20px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center}
.pf-avatar img{width:100%;height:100%;object-fit:cover}
.pf-initiale{font-family:var(--font-head);font-size:3.4rem;font-weight:800;color:#fff;line-height:1}
.pf-ident{flex:1 1 16rem;min-width:0;padding-bottom:.3rem}
.pf-nom{font-family:var(--font-head);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;margin:0;color:var(--ink)}
.pf-pseudo{margin:.15rem 0 0;font-size:.88rem;color:var(--muted)}
.pf-accroche{margin:.45rem 0 0;color:var(--body);max-width:62ch}
.pf-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding-bottom:.4rem}

/* Les CTA suivent la charte des boutons du site : plein = orange sur blanc,
   inverse au survol. Jamais un orange plus foncé. */
.pf-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.05rem;border-radius:10px;
    border:2px solid var(--orange);background:#fff;color:var(--orange);font-weight:700;font-size:.92rem;
    cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.pf-btn:hover{background:var(--orange);color:#fff}
.pf-btn--plein{background:var(--orange);color:#fff}
.pf-btn--plein:hover{background:#fff;color:var(--orange)}
.pf-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* L'ÉTAT ACTIF (« vous avez déjà dit Intéressé·e ») vit AU NIVEAU DU COMPOSANT,
   pas dans chaque écran : la version limitée à `.rc-actions` laissait les
   cartes de la liste sans état du tout, et son survol gardait le texte orange
   sur fond orange — illisible, signalé par le user. Le survol s'inverse,
   charte du §5. */
.pf-btn.is-actif{border-color:var(--orange);color:var(--orange)}
.pf-btn.is-actif:hover{background:var(--orange);color:#fff}
.pf-btn--plein.is-actif{background:var(--orange);color:#fff}
.pf-btn--plein.is-actif:hover{background:#fff;color:var(--orange)}

.pf-chiffres{display:flex;flex-wrap:wrap;gap:1.6rem;list-style:none;margin:0;padding:.2rem 0 1rem;
    border-bottom:1px solid var(--line)}
.pf-chiffres strong{font-family:var(--font-head);font-size:1.15rem;color:var(--ink);margin-right:.3rem}
.pf-chiffres span{font-size:.86rem;color:var(--muted)}

/* ============================================================
   PROFIL DE CROISIÉRISTE
   ============================================================
   Des étiquettes, pas un tableau : le nombre de lignes varie d'un membre à
   l'autre (de une à six), et un tableau à trous se lit comme un formulaire
   inachevé alors qu'une rangée d'étiquettes s'adapte toute seule.
   L'étiquette est au-dessus de la valeur et non à côté : à côté, la colonne
   des valeurs se décale d'une ligne à l'autre au gré de la longueur des
   libellés, ce qui empêche de balayer les chiffres du regard. */
.pf-croisieriste{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:.85rem 0;
    border-bottom:1px solid var(--line)}
.pf-cr-item{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .8rem;
    background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
.pf-cr-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.pf-cr-valeur{font-weight:700;font-size:.95rem;color:var(--ink);text-decoration:none}
/* Les deux chiffres qui définissent le croisiériste passent devant le reste :
   c'est sur eux qu'on juge l'expérience de quelqu'un. */
.pf-cr-item--depuis,.pf-cr-item--nb{border-color:var(--orange)}
.pf-cr-item--depuis .pf-cr-valeur,.pf-cr-item--nb .pf-cr-valeur{color:var(--orange)}

.pf-cr-vide{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.85rem 0 0;
    padding:.7rem .9rem;border:1px dashed var(--line);border-radius:10px;
    font-size:.9rem;color:var(--muted)}
.pf-cr-vide i{color:var(--orange)}
.pf-cr-vide a{color:var(--orange);font-weight:600}

.pf-onglets{display:flex;gap:.35rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:none}
.pf-onglets::-webkit-scrollbar{display:none}
.pf-onglet{flex:none;padding:.5rem .95rem;border-radius:9px;font-weight:600;font-size:.92rem;
    color:var(--body);text-decoration:none}
.pf-onglet:hover{background:var(--bg-soft);color:var(--orange)}
.pf-onglet.is-on{color:var(--orange);box-shadow:inset 0 -3px 0 var(--orange);border-radius:9px 9px 0 0}

.pf-corps{display:grid;gap:1.2rem;grid-template-columns:1fr;padding-top:1.4rem;padding-bottom:2.6rem}
@media (min-width:981px){ .pf-corps{grid-template-columns:minmax(0,1fr) 21rem} }

.pf-bloc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.25rem;margin-bottom:1.2rem}
.pf-bloc > h2{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 .8rem}
.pf-bloc > h3{font-size:.92rem;font-weight:700;color:var(--ink);margin:.9rem 0 .25rem}
.pf-bloc > h3:first-of-type{margin-top:0}
.pf-bloc p{margin:0 0 .6rem;max-width:70ch}
.pf-vide{color:var(--muted);margin:0}
.pf-fine{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}

.pf-avis{list-style:none;margin:0;padding:0}
.pf-avis li + li{border-top:1px solid var(--line)}
.pf-avis a{display:flex;align-items:center;gap:.75rem;padding:.65rem 0;text-decoration:none}
.pf-avis-t{flex:1 1 auto;font-weight:600;color:var(--ink);min-width:0}
.pf-avis-n{flex:none;font-size:.82rem;color:var(--muted)}
.pf-avis a:hover .pf-avis-t{color:var(--orange)}
.pf-plus{margin:.9rem 0 0}

.pf-photos{list-style:none;display:grid;gap:.5rem;margin:0;padding:0;
    grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr))}
.pf-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}

.pf-tableau{overflow-x:auto}
.pf-tableau table{width:100%;border-collapse:collapse;font-size:.9rem}
.pf-tableau th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.02em;
    color:var(--muted);padding:.45rem .6rem;background:var(--bg-soft)}
.pf-tableau td{padding:.5rem .6rem;border-top:1px solid var(--line)}
.pf-fort{font-weight:600;color:var(--ink)}

.pf-prefs{margin:0}
.pf-prefs dt{font-size:.78rem;color:var(--muted)}
.pf-prefs dd{margin:0 0 .65rem;font-weight:600;color:var(--ink)}
.pf-liens{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pf-liens a{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:1px solid var(--line);
    border-radius:999px;font-size:.84rem;color:var(--body);text-decoration:none}
.pf-liens a:hover{border-color:var(--orange);color:var(--orange)}

/* ---- LE VERROU ----
   On montre qu'il y a quelque chose, on ne le donne pas. Les barres floutées
   sont DÉCORATIVES : aucune donnée du membre n'est écrite dans le HTML pour
   être masquée en CSS, ça se lirait dans le code source en trois secondes. */
.pf-verrou{position:relative;min-height:8.5rem;display:flex;align-items:center;justify-content:center;
    border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.pf-verrou--court{min-height:7rem}
.pf-verrou-faux{position:absolute;inset:0;padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;
    filter:blur(4px);opacity:.55}
.pf-verrou-faux span{display:block;height:.7rem;border-radius:999px;background:linear-gradient(90deg,#d8dbdf,#eceff2)}
.pf-verrou-faux span:nth-child(2){width:88%}
.pf-verrou-faux span:nth-child(3){width:64%}
.pf-verrou-faux span:nth-child(4){width:92%}
.pf-verrou-faux span:nth-child(5){width:47%}
.pf-verrou-appel{position:relative;text-align:center;padding:1.1rem;max-width:32rem}
.pf-verrou-appel > i{font-size:1.15rem;color:var(--orange)}
.pf-verrou-t{font-weight:700;color:var(--ink);margin:.4rem 0 .15rem}
.pf-verrou-x{font-size:.86rem;color:var(--muted);margin:0 0 .75rem}

.pf-rejoindre{background:linear-gradient(160deg,#16161a,#2b2b31);border-color:transparent;color:#fff}
/* `theme.css` impose une couleur d'encre aux titres : sur fond sombre il faut
   la reprendre explicitement, piège documenté au §5. */
.pf-rejoindre > h2{color:#fff}
.pf-rejoindre p{color:rgba(255,255,255,.8)}
.pf-rejoindre .pf-fine{color:rgba(255,255,255,.55)}

@media (max-width:620px){
    .pf-tete{margin-top:-2.6rem;gap:.8rem}
    .pf-avatar{width:6.6rem;height:6.6rem;border-width:3px}
    .pf-initiale{font-size:2.4rem}
    .pf-actions{width:100%}
    .pf-actions .pf-btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   ÉCRANS D'ACCÈS AU COMPTE — connexion, inscription, lien
   ============================================================
   Gabarit à part (`layouts/auth`), sans header ni pied : ces pages ont un seul
   but, faire entrer. Deux colonnes comme sur les écrans de référence, mais
   dans notre charte — un seul orange, le noir de la marque, aucun bleu. */

.p-auth{background:var(--bg-soft)}
.au{display:grid;min-height:100vh;grid-template-columns:1fr;align-items:stretch}
@media (min-width:901px){ .au{grid-template-columns:1.05fr .95fr} }

/* ---- Colonne d'argument ---- */
.au-arg{background:linear-gradient(150deg,#111114 0%,#1f1f24 55%,rgba(255,99,0,.5) 140%);
    color:#fff;padding:2rem 1.6rem;display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
@media (min-width:901px){ .au-arg{padding:3.2rem clamp(2rem,5vw,4.5rem)} }
.au-marque{font-family:var(--font-head);font-weight:800;font-size:1.4rem;color:#fff;text-decoration:none;
    letter-spacing:-.01em}
.au-marque b{color:var(--orange);font-weight:800}
/* `theme.css` impose `color:var(--ink)` aux titres : sur fond sombre il faut
   la reprendre, piège documenté au §5 et rencontré une fois de plus. */
.au-titre{font-family:var(--font-head);font-size:clamp(1.6rem,3.6vw,2.6rem);font-weight:800;color:#fff;
    margin:0;line-height:1.12;max-width:16ch}
.au-titre span{color:var(--orange)}
.au-points{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.9rem;max-width:34rem}
.au-points li{display:flex;gap:.75rem;align-items:flex-start;color:rgba(255,255,255,.82);font-size:.95rem;
    line-height:1.5}
.au-points i{flex:none;width:1.9rem;height:1.9rem;border-radius:8px;display:grid;place-items:center;
    background:rgba(255,99,0,.16);color:var(--orange);font-size:.85rem}
.au-points strong{color:#fff}
.au-fine{margin:.4rem 0 0;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ---- Colonne de formulaire ---- */
.au-form{background:#fff;padding:2.2rem 1.4rem 2.6rem;display:flex;flex-direction:column;justify-content:center;
    align-items:center}
.au-form > *{width:100%;max-width:24rem}
@media (min-width:901px){ .au-form{padding:3rem clamp(1.8rem,4vw,4rem)} }

.au-h1{font-family:var(--font-head);font-size:1.6rem;font-weight:800;color:var(--ink);margin:0 0 .35rem}
.au-sub{color:var(--muted);font-size:.93rem;margin:0 0 1.4rem}

.au-champs{display:grid;gap:.9rem}
.au-champs label{display:grid;gap:.3rem;font-size:.88rem;font-weight:600;color:var(--ink)}
.au-champs label em{font-weight:400;font-style:normal;color:var(--muted)}
.au-champs input,.au-champs select{width:100%;padding:.7rem .85rem;border:1px solid var(--line);border-radius:10px;
    font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
/* 16 px minimum sur les champs : en dessous, iOS zoome au focus et sort la
   colonne de l'écran. Piège déjà payé sur le moteur d'entrée. */
.au-champs input:focus,.au-champs select:focus{outline:none;border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,99,0,.15)}
.au-champs small{font-weight:400;font-size:.78rem;color:var(--muted)}
.au-duo{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.au-trio{display:grid;gap:.4rem;grid-template-columns:1fr 1.4fr 1fr}

.au-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
    padding:.8rem 1rem;margin-top:.3rem;border:2px solid var(--orange);border-radius:10px;
    background:var(--orange);color:#fff;font-weight:700;font-size:1rem;font-family:inherit;
    cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.au-btn:hover{background:#fff;color:var(--orange)}
.au-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.au-btn--fin{background:#fff;color:var(--orange)}
.au-btn--fin:hover{background:var(--orange);color:#fff}

.au-oubli{margin:.75rem 0 0;text-align:center;font-size:.88rem}
.au-oubli a,.au-bascule a,.au-retour a{color:var(--orange);text-decoration:none;font-weight:600}
.au-oubli a:hover,.au-bascule a:hover,.au-retour a:hover{text-decoration:underline}

.au-ou{display:flex;align-items:center;gap:.75rem;margin:1.2rem 0 .9rem;color:var(--muted);font-size:.82rem}
.au-ou::before,.au-ou::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

.au-bascule{margin:1.3rem 0 0;text-align:center;font-size:.9rem;color:var(--muted)}
.au-legal{margin:.9rem 0 0;font-size:.76rem;color:var(--muted);text-align:center;line-height:1.5}
.au-legal a{color:var(--muted);text-decoration:underline}
.au-retour{margin:1.6rem 0 0;text-align:center;font-size:.85rem}

.au-flash{padding:.7rem .9rem;border-radius:10px;font-size:.9rem;margin-bottom:1rem}
.au-flash--success{background:#e8f6ec;color:#1c6b34;border:1px solid #bfe4ca}
.au-flash--warning{background:#fff3e6;color:#8a4b00;border:1px solid #ffd8ac}
/* `--info` N'EXISTAIT DANS AUCUNE DES DEUX FEUILLES, alors que quatre appels
   `flash('info')` le produisent. Le message s'affichait donc SANS fond, SANS
   bordure et SANS couleur : il se lisait comme un paragraphe ordinaire, et on
   ne le voyait pas. Un type de message qu'on émet sans l'avoir habillé est un
   message qu'on n'affiche pas. */
.au-flash--info{background:#eaf2fb;color:#1c4a7a;border:1px solid #c3daf2}

@media (max-width:900px){
    .au-arg{padding:1.6rem 1.2rem;gap:.8rem}
    .au-titre{font-size:1.45rem;max-width:none}
    /* Sur téléphone on garde l'argument mais réduit : il dit pourquoi créer un
       compte, le supprimer laisserait un formulaire sans raison d'être. */
    .au-points li:nth-child(n+3){display:none}
    .au-fine{display:none}
    .au-duo,.au-trio{grid-template-columns:1fr}
}

/* ============================================================
   RELATIONS — boutons de profil, listes, notifications
   ============================================================ */

.pf-btn--petit{padding:.35rem .75rem;font-size:.84rem}
.pf-btn--danger{border-color:#c0392b;color:#c0392b;background:#fff}
.pf-btn--danger:hover{background:#c0392b;color:#fff}
.pf-act{display:inline-flex;margin:0}

/* Le blocage est une action rare et grave : elle ne côtoie pas « Suivre » au
   même rang visuel, elle se déplie. */
.pf-plusact{position:relative}
.pf-plusact > summary{list-style:none;cursor:pointer;width:2.6rem;height:2.6rem;border-radius:10px;
    border:2px solid var(--line);display:grid;place-items:center;color:var(--body)}
.pf-plusact > summary::-webkit-details-marker{display:none}
.pf-plusact > summary:hover{border-color:var(--orange);color:var(--orange)}
.pf-plusact-menu{position:absolute;right:0;top:calc(100% + .35rem);z-index:20;background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:.5rem;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.pf-plusact-menu .pf-btn{white-space:nowrap}

.pf-commun{margin:.15rem 0 0;font-size:.86rem;color:var(--muted)}
.pf-commun i{color:var(--orange);margin-right:.3rem}
.pf-compte{display:inline-block;margin-left:.35rem;padding:.05rem .45rem;border-radius:999px;
    background:var(--bg-soft);color:var(--muted);font-size:.78rem;font-weight:600;vertical-align:middle}

/* Vignette de membre : l'initiale sert d'avatar tant qu'il n'y a pas de photo,
   comme dans l'en-tête du profil. */
.pf-mini{flex:none;width:3rem;height:3rem;border-radius:50%;overflow:hidden;background:var(--ink);
    color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.pf-mini img{width:100%;height:100%;object-fit:cover}

.pf-amis{list-style:none;display:grid;gap:.7rem;margin:0;padding:0;grid-template-columns:repeat(3,1fr)}
.pf-amis a{display:grid;justify-items:center;gap:.3rem;text-decoration:none;color:var(--body)}
.pf-amis .pf-mini{width:100%;height:auto;aspect-ratio:1;border-radius:12px;font-size:1.6rem}
.pf-mini-nom{font-size:.76rem;text-align:center;line-height:1.25;overflow:hidden;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pf-amis a:hover .pf-mini-nom{color:var(--orange)}

/* ---- Page « Mes relations » ---- */
.rl-bloc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.15rem 1.25rem;margin-bottom:1.2rem}
.rl-bloc > h2{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 .8rem}
/* Les demandes appellent une action : elles se signalent. */
.rl-bloc--attente{border-color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
.rl-duo{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:781px){ .rl-duo{grid-template-columns:1fr 1fr} }

.rl-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.rl-carte{display:flex;align-items:center;gap:.75rem;padding:.55rem;border-radius:12px}
.rl-carte:hover{background:var(--bg-soft)}
.rl-qui{display:flex;align-items:center;gap:.75rem;flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
.rl-nom{display:grid;min-width:0}
.rl-nom strong{color:var(--ink);font-size:.95rem}
.rl-nom small{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-actions{display:flex;gap:.4rem;flex:none}
@media (max-width:520px){
    .rl-carte{flex-wrap:wrap}
    .rl-actions{width:100%}
    .rl-actions .pf-act,.rl-actions .pf-btn{flex:1 1 auto;justify-content:center}
}

/* ---- Notifications ---- */
.nt-liste{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.nt{display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;background:#fff;
    border:1px solid var(--line);border-radius:12px}
.nt.is-neuf{border-color:var(--orange);background:#fff8f3}
.nt-txt{margin:0;font-size:.92rem;color:var(--body)}
.nt-txt a{color:var(--ink);text-decoration:none}
.nt-txt a:hover{color:var(--orange)}
.nt-txt small{display:block;color:var(--muted);font-size:.78rem;margin-top:.1rem}

/* ---- Cloche de l'entête ---- */
.hd-cloche{position:relative;display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;
    border-radius:9px;color:var(--body);text-decoration:none}
.hd-cloche:hover{background:var(--bg-soft);color:var(--orange)}
.hd-cloche.is-neuf{color:var(--orange)}
.hd-cloche span{position:absolute;top:.05rem;right:.05rem;min-width:1.05rem;height:1.05rem;padding:0 .2rem;
    border-radius:999px;background:var(--orange);color:#fff;font-size:.66rem;font-weight:700;
    display:grid;place-items:center;line-height:1}

/* ============================================================
   PUBLICATIONS — composeur, carte, fil, bloc de landing
   ============================================================ */

.cm{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:981px){ .cm{grid-template-columns:minmax(0,1fr) 20rem} }
.cm-posts{display:grid;gap:.9rem}

/* ---- Composeur ---- */
.pc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.1rem}
.pc-haut{display:flex;gap:.75rem;align-items:flex-start}
.pc-haut textarea{flex:1 1 auto;min-height:3.2rem;border:0;resize:vertical;font:inherit;font-size:1rem;
    color:var(--ink);background:transparent}
.pc-haut textarea:focus{outline:none}
.pc-sujet{margin:.6rem 0 0;font-size:.84rem;color:var(--muted)}
.pc-sujet i{color:var(--orange);margin-right:.3rem}
.pc-bas{display:flex;align-items:center;gap:.6rem;margin-top:.8rem;padding-top:.7rem;
    border-top:1px solid var(--line);flex-wrap:wrap}
.pc-fichier{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:9px;
    border:1px solid var(--line);font-size:.85rem;color:var(--body);cursor:pointer}
.pc-fichier:hover{border-color:var(--orange);color:var(--orange)}
.pc-vis select{padding:.35rem .5rem;border:1px solid var(--line);border-radius:9px;font-size:.85rem;
    background:#fff;color:var(--body)}
.pc-bas .pf-btn{margin-left:auto}

/* ---- Carte de publication ---- */
.po{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem}
.po-tete{display:flex;align-items:flex-start;gap:.7rem}
.po-qui{display:flex;align-items:center;gap:.7rem;flex:1 1 auto;min-width:0;text-decoration:none;color:inherit}
.po-nom{display:grid;min-width:0}
.po-nom strong{color:var(--ink);font-size:.94rem}
.po-nom small{color:var(--muted);font-size:.78rem}
.po-qui:hover strong{color:var(--orange)}

.po-menu{position:relative;flex:none}
.po-menu > summary{list-style:none;cursor:pointer;width:2rem;height:2rem;border-radius:8px;
    display:grid;place-items:center;color:var(--muted)}
.po-menu > summary::-webkit-details-marker{display:none}
.po-menu > summary:hover{background:var(--bg-soft);color:var(--orange)}
.po-menu-liste{position:absolute;right:0;top:calc(100% + .25rem);z-index:20;background:#fff;
    border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.12);padding:.3rem}
.po-menu-btn{display:flex;align-items:center;gap:.45rem;width:100%;white-space:nowrap;padding:.45rem .7rem;
    border:0;border-radius:8px;background:none;font:inherit;font-size:.86rem;color:var(--body);cursor:pointer}
.po-menu-btn:hover{background:var(--bg-soft);color:var(--orange)}

/* L'ancre : ce qui distingue une publication rattachée d'un billet libre. */
.po-sujet{margin:.7rem 0 .1rem;font-size:.84rem}
.po-sujet i{color:var(--orange);margin-right:.35rem}
.po-sujet a{color:var(--orange);text-decoration:none;font-weight:600}
.po-sujet a:hover{text-decoration:underline}
/* Cible disparue du catalogue : le libellé reste, en gris, sans lien. */
.po-sujet span{color:var(--muted);font-weight:600}

.po-corps{margin:.6rem 0 0;color:var(--body);line-height:1.6;overflow-wrap:anywhere}

.po-photos{list-style:none;display:grid;gap:.35rem;margin:.8rem 0 0;padding:0}
.po-photos--1{grid-template-columns:1fr}
.po-photos--2{grid-template-columns:1fr 1fr}
.po-photos--3,.po-photos--4{grid-template-columns:1fr 1fr}
.po-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.po-photos--1 img{aspect-ratio:16/10}

.po-pied{display:flex;align-items:center;gap:.4rem;margin-top:.8rem;padding-top:.6rem;
    border-top:1px solid var(--line)}
.po-act{margin:0}
.po-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border:0;border-radius:9px;
    background:none;font:inherit;font-size:.86rem;color:var(--muted);cursor:pointer}
.po-btn:hover{background:var(--bg-soft);color:var(--orange)}
.po-btn.is-on{color:var(--orange)}
.po-btn--stat{cursor:default}

/* Le pli des commentaires d'une publication : le compteur est le résumé, le
   composant partagé vit dedans. Le chevron natif du `<details>` est retiré,
   le compteur EST l'affordance — et `summary` reprend l'allure des autres
   boutons de la rangée. */
.po-comments{display:inline-block}
.po-comments > summary{list-style:none;cursor:pointer;display:inline-flex;
  align-items:center;gap:.4rem}
.po-comments > summary::-webkit-details-marker{display:none}
.po-comments[open] > summary{color:var(--orange)}
.po-comments-corps{margin-top:.8rem;padding-top:.8rem;
  border-top:1px solid var(--line-2,#f1f1f4);cursor:auto}
/* Ouvert, le pli prend toute la largeur de la carte : un fil de commentaires
   dans une demi-colonne ne se lit pas. Le pied est en flex, d'où le 100 %. */
.po-pied{flex-wrap:wrap}
.po-comments[open]{flex:1 1 100%}

.po-btn--stat:hover{background:none;color:var(--muted)}

/* ---- Bloc « Ils en parlent » sur une landing ---- */
.po-bande{padding:2.2rem 0}
.po-mur{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:781px){ .po-mur{grid-template-columns:1fr 1fr} }
.po-bande-cta{margin:1.1rem 0 0}

/* Le fil du profil n'a pas de cadre à lui : chaque publication porte le sien. */
.pf-bloc--nu{background:none;border:0;padding:0;display:grid;gap:.9rem}

/* La barre latérale de l'espace membre reprend l'avatar du réseau plutôt qu'une
   initiale à part : un seul composant, une seule apparence. */
.account-side__head{display:flex;align-items:center;gap:.7rem}
.pf-mini--lg{width:3.4rem;height:3.4rem;font-size:1.3rem}
.account-voir{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:9px;
    color:var(--orange);text-decoration:none;font-size:.9rem;font-weight:600}
.account-voir:hover{background:var(--bg-soft)}
/* Le fil garde ses deux colonnes DANS la colonne principale de l'espace. */
.account-main.cm{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:1181px){ .account-main.cm{grid-template-columns:minmax(0,1fr) 17rem} }

/* ============================================================
   MEETUPS À BORD — « OK pour un apéro pont 17 ? »   (lot B)
   ============================================================
   Le bouton OK est le seul élément plein orange de la carte : c'est LA
   décision qu'on demande, tout le reste est du contexte. Charte des CTA du
   §5 respectée — le survol inverse, il ne fonce jamais. */

/* --- héros --- */
.mu-hero{background:linear-gradient(160deg,#101014 0%,#1d1d24 55%,#2a1a10 100%);
  color:#fff;padding:2.4rem 0 2.1rem;margin-bottom:2rem}

/* HÉROS EN PHOTO. Le voile sombre n'est pas une décoration : sans lui, le
   texte blanc devient illisible dès que la photo s'éclaircit, et une page dont
   on ne lit pas le titre ne vend rien. Il est plus dense à gauche, là où le
   texte se pose, et s'allège à droite pour laisser voir les visages. */
.mu-hero--photo{
  background-image:
    linear-gradient(100deg, rgba(10,10,12,.93) 0%, rgba(10,10,12,.82) 45%, rgba(10,10,12,.55) 100%),
    url("https://okcroisiere.fr/images/a-propos/parallax-navire-moderne.webp");
  background-size:cover;background-position:center 38%;background-repeat:no-repeat;
  padding:3rem 0 2.6rem}
/* Le héros est en pleine largeur, son CONTENU garde la largeur de grille du
   reste de la page — `.cp-wrap` (820 px) l'étranglerait. */
.mu-hero-in{max-width:1240px;margin:0 auto;padding:0 1rem}

/* Mise en page à deux colonnes quand un membre est connecté : sans la barre,
   on entrait dans un endroit du site d'où l'on ne savait plus revenir à son
   compte. Un visiteur garde la vitrine pleine largeur. */
.mu-page{max-width:1240px;margin:0 auto;padding:0 1rem}
.mu-page--membre{padding-top:1.6rem}
.mu-page--membre .mu-corps{max-width:none;padding-left:0;padding-right:0}
/* theme.css impose h1{color:var(--ink)} : sur fond sombre il faut le redire,
   le piège est documenté au §5 et il est revenu à chaque héros. */
.mu-hero h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.35rem);margin:.2rem 0 .9rem;max-width:22ch}
/* Fil d'Ariane sur fond sombre. `.fil [aria-current]` est en `--ink` par
   défaut (noir sur noir) et le séparateur « › » en noir translucide : les deux
   doivent être redits, comme le h1. Même piège que `theme.css` sur les titres. */
.mu-hero .fil,.mu-hero .fil a{color:rgba(255,255,255,.72)}
.mu-hero .fil a:hover{color:#fff}
.mu-hero .fil [aria-current]{color:#fff}
.mu-hero .fil li+li::before{color:rgba(255,255,255,.45)}
.mu-hero-sur{text-transform:uppercase;letter-spacing:.09em;font-size:.76rem;
  font-weight:700;color:var(--orange);margin:0}
.mu-hero-chapo{max-width:62ch;color:rgba(255,255,255,.86);font-size:1.02rem;line-height:1.6;margin:0}
.mu-hero-faits{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .9rem;padding:0;margin:0 0 1rem}
.mu-hero-faits li{display:inline-flex;align-items:center;gap:.4rem;font-size:.93rem;
  color:rgba(255,255,255,.88);background:rgba(255,255,255,.09);
  border-radius:999px;padding:.32rem .8rem}
.mu-hero-faits i{color:var(--orange)}
.mu-hero-lien a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.mu-hero-lien a:hover{color:var(--orange)}

/* --- corps : largeur de GRILLE, pas de lecture. `.cp-wrap` plafonne à 820 px,
       ce qui étrangle une grille de cartes — même correction que `.es-donnees`. */
.mu-corps{max-width:1240px;margin:0 auto;padding-bottom:3rem}
.mu-h2{font-size:1.35rem;margin:2.2rem 0 1rem}

/* --- sélecteur --- */
.mu-picker{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.mu-picker h2{font-size:1.25rem;margin:0 0 1rem}
.mu-grille{display:grid;gap:1.15rem 1rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))}
/* Pas de marge basse propre : le rythme vertical vient du bloc (`> * + *`),
   une marge ici s'y additionnerait. */
.mu-champ{display:flex;flex-direction:column;gap:.32rem}
.mu-champ label{font-weight:600;font-size:.92rem}
.mu-champ input,.mu-champ select,.mu-champ textarea{
  /* 16 px minimum : en dessous, iOS zoome au focus et la page saute. */
  font:inherit;font-size:1rem;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:var(--ink);width:100%}
.mu-champ input:focus-visible,.mu-champ select:focus-visible,.mu-champ textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:1px}
.mu-champ select:disabled{background:#f1f1f4;color:var(--muted)}
.mu-champ small{color:var(--muted);font-size:.82rem}

.mu-libre,.mu-form{margin-top:1.2rem;border:1px solid var(--line);border-radius:12px;background:#fff}
.mu-libre>summary,.mu-form>summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:600;
  list-style:none;display:flex;align-items:center;gap:.5rem}
.mu-libre>summary::-webkit-details-marker,.mu-form>summary::-webkit-details-marker{display:none}
.mu-libre>summary:hover,.mu-form>summary:hover{color:var(--orange)}
.mu-libre>summary::after,.mu-form>summary::after{content:"+";margin-left:auto;
  font-size:1.25rem;color:var(--orange);line-height:1}
.mu-libre[open]>summary::after,.mu-form[open]>summary::after{content:"–"}
.mu-form>form{padding:0 1.1rem 1.2rem}
.mu-form-pied{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1rem}

/* --- traversées actives ---
   LA SECTION SE DÉTACHE PAR UN FILET : elle suit soit la grille des rendez-vous,
   soit l'état vide, et sans marge elle leur était COLLÉE (signalé par le user).
   C'est un autre axe de lecture (par départ, pas par rendez-vous), le filet le
   dit avant le titre. */
.mu-actives{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.mu-actives > h2{margin:0 0 .9rem}
/* `auto-FIT`, pas `auto-fill` : avec une seule traversée, `auto-fill` gardait
   deux pistes fantômes et la carte n'occupait qu'un tiers de la largeur — la
   section semblait flotter dans du vide. `auto-fit` replie les pistes vides,
   les cartes se partagent toute la largeur disponible. */
.mu-cartes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.mu-vignette{display:flex;flex-direction:column;gap:.22rem;padding:1rem 1.1rem;
  border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);
  text-decoration:none;transition:border-color .15s,transform .15s}
.mu-vignette:hover{border-color:var(--orange);transform:translateY(-2px);color:var(--ink)}
.mu-vignette-nav{font-weight:700}
.mu-vignette-date{color:var(--orange);font-weight:600;font-size:.92rem}
.mu-vignette-port,.mu-vignette-n{font-size:.86rem;color:var(--muted)}

/* --- la carte d'un meetup --- */
.mu-liste{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(min(21rem,100%),1fr))}
.mu{display:flex;flex-direction:column;gap:.6rem;padding:1.15rem 1.25rem;background:#fff;
  border:1px solid var(--line);border-radius:14px}
.mu--annule{opacity:.62}
.mu--annule .mu-titre{text-decoration:line-through}
.mu-tete{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.mu-cat{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;color:var(--orange);
  background:rgba(255,99,0,.09);border-radius:999px;padding:.28rem .7rem}
.mu-etat{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--muted)}
.mu-etat--plein{color:#c0392b}
.mu-titre{font-size:1.1rem;margin:0;line-height:1.35}
.mu-faits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.28rem}
.mu-faits li{display:flex;align-items:baseline;gap:.5rem;font-size:.92rem;color:var(--ink)}
.mu-faits i{color:var(--orange);width:1rem;text-align:center;flex:none}
.mu-texte{margin:0;font-size:.94rem;line-height:1.55;color:#3a3a42}
.mu-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.8rem;margin-top:auto;padding-top:.7rem;border-top:1px solid var(--line)}
.mu-gens{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.mu-compte{font-size:.88rem;color:var(--muted);margin-left:.35rem}
.mu-compte strong{color:var(--ink)}
.mu-actions{display:flex;align-items:center;gap:.5rem}
.mu-actions form{margin:0}
.mu-auteur{margin:0;font-size:.84rem;color:var(--muted)}

/* LE BOUTON. Charte des CTA : plein orange, et le survol INVERSE. */
.mu-ok{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-weight:800;
  font-size:.95rem;padding:.5rem 1.15rem;border-radius:999px;cursor:pointer;
  border:2px solid var(--orange);background:var(--orange);color:#fff;
  text-decoration:none;line-height:1.2;appearance:none}
.mu-ok:hover{background:#fff;color:var(--orange)}
.mu-ok:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mu-ok[disabled]{opacity:.45;cursor:not-allowed}
.mu-ok--dit{background:#fff;color:var(--orange)}
.mu-ok--dit:hover{background:var(--orange);color:#fff}
.mu-lien{font:inherit;font-size:.88rem;background:none;border:0;padding:.25rem;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.mu-lien:hover{color:var(--orange)}
.mu-lien--discret{text-decoration:none}
.mu-note{font-size:.86rem;color:var(--muted)}

.pf-mini--xs{width:1.75rem;height:1.75rem;font-size:.7rem}

/* --- appel à l'inscription, état vide, avertissement --- */
.mu-invite{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem;margin-bottom:1.6rem}
.mu-invite h2{font-size:1.2rem;margin:0 0 .5rem}
.mu-invite p{margin:0 0 .8rem;max-width:62ch}
.mu-invite-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:0}
.mu-vide{background:var(--bg-soft);border:1px dashed var(--line);border-radius:12px;
  padding:1.3rem;margin:0;color:#3a3a42;max-width:64ch}
.mu-avert{font-size:.84rem;color:var(--muted);margin:0;max-width:64ch;line-height:1.5}
.mu-avert--pied{margin-top:2.4rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ============================================================
   « COMMENT ÇA MARCHE » — trois étapes, trois cartes
   ============================================================
   ELLES FLOTTAIENT. Trois colonnes de texte nu, sans fond ni bordure, séparées
   par 19 px : rien ne disait où une étape finissait et où la suivante
   commençait, et le numéro posé en absolu dans la marge n'y suffisait pas.
   Mesuré avant correction : `background: rgba(0,0,0,0)`, `border: 0`.

   MÊME CARTE QUE `.rz-etape` DE L'ACCUEIL, à dessein : les deux endroits
   expliquent le même concept, ils doivent se ressembler. Le liseré bas orange
   vient des captures Meetup et fait déjà le lien avec les cartes du bloc
   d'accueil.

   LE NUMÉRO PASSE DANS LA CARTE au lieu de flotter à côté : ici l'ordre porte
   du sens (on trouve, puis on propose, puis on se retrouve), donc il doit se
   lire avec le titre et non se deviner dans la marge. */
.mu-comment{margin-top:2.6rem}
.mu-comment > h2{font-size:1.45rem;margin:0 0 .35rem}
.mu-comment-chapo{margin:0 0 1.5rem;color:var(--muted);max-width:60ch}

.mu-etapes{list-style:none;counter-reset:mu;padding:0;margin:0;display:grid;gap:1.4rem;
    grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.mu-etapes li{counter-increment:mu;position:relative;overflow:hidden;
    background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:1.4rem 1.3rem 1.5rem}
.mu-etapes li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
    background:var(--orange)}
/* Le numéro est un `::before` sur le titre : il reste dans le flux, donc il ne
   peut plus recouvrir le texte quand la carte se resserre. */
.mu-etapes h3{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;margin:0 0 .5rem}
.mu-etapes h3::before{content:counter(mu);flex:none;
    width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;
    background:var(--orange);color:#fff;font-family:var(--font-head);
    font-weight:800;font-size:.95rem}
.mu-etapes p{margin:0;font-size:.93rem;color:#3a3a42;line-height:1.6}

/* L'AVERTISSEMENT PRENAIT LA LARGEUR D'UNE SEULE COLONNE et pendait sous la
   première carte, comme une note oubliée. Il concerne toute la page : il tient
   donc toute la largeur, centré, nettement détaché. */
/* Le FILET tient toute la largeur — c'est lui qui détache la mention du reste —
   mais le TEXTE reste borné : une ligne de 1 200 px ne se lit pas, l'œil perd
   le début de la phrase avant d'en atteindre la fin. */
.mu-avert--pied{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line);
    max-width:none;text-align:center}
.mu-avert--pied > span,.mu-avert--pied{text-wrap:pretty}
.mu-comment + .mu-avert--pied{max-width:none}
.mu-avert--pied{padding-inline:max(0px,calc((100% - 78ch) / 2))}

@media (max-width:900px){
  /* LE VOILE DEVIENT UNIFORME. Le dégradé de gauche à droite fonctionne tant
     que le texte n'occupe que la moitié gauche ; sur téléphone il prend toute
     la largeur et finirait sur la partie claire de la photo, donc illisible. */
  .mu-hero--photo{
    background-image:
      linear-gradient(180deg, rgba(10,10,12,.88) 0%, rgba(10,10,12,.92) 100%),
      url("https://okcroisiere.fr/images/a-propos/parallax-navire-moderne.webp")}
}
@media (max-width:640px){
  .mu-hero{padding:1.8rem 0 1.6rem}
  .mu-hero--photo{padding:2.2rem 0 2rem}
  .mu-pied{flex-direction:column;align-items:flex-start}
  .mu-actions{width:100%}
  .mu-ok{flex:1;justify-content:center}
}

/* Messages flash du gabarit principal (ils n'étaient affichés nulle part). */
.flashes{margin:1rem auto;display:flex;flex-direction:column;gap:.5rem;max-width:1240px}
.flash{margin:0;padding:.75rem 1rem;border-radius:10px;font-size:.94rem;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink)}
.flash--success{border-color:#bfe3c8;background:#f0faf3}
.flash--warning{border-color:#f0d2a8;background:#fdf6ec}
.flash--danger{border-color:#eec2bd;background:#fdf1ef}
.flash--info{border-color:#c3daf2;background:#f2f7fd}

/* ============================================================
   MISE EN AVANT DU MEETUP  (lot C) — accueil, connexion, entête, espace membre
   ============================================================
   Forme reprise des captures `old_content_refacto/meetup*.png` : médaillon
   photo aux angles très arrondis, étiquettes posées dessus comme écrites à la
   main, cartes d'exemples à liseré coloré. Transposé à NOTRE charte : un seul
   orange, pas la palette pastel de Meetup. */

/* --- section d'accueil --- */
.mp{background:var(--bg-soft);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:3rem 0 2.6rem;margin-top:2.5rem}
.mp-wrap{max-width:1240px;margin:0 auto;padding:0 1rem}
.mp .mp-wrap:first-child{display:grid;gap:2.4rem;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.mp-sur{text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;font-weight:800;
  color:var(--orange);margin:0 0 .5rem}
.mp h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.15;margin:0 0 .9rem;max-width:16ch}
.mp h2 span{color:var(--orange)}
.mp-chapo{font-size:1.04rem;line-height:1.65;color:#3a3a42;margin:0 0 1.2rem;max-width:56ch}
.mp-args{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.mp-args li{display:flex;align-items:flex-start;gap:.65rem;font-size:.96rem;color:#3a3a42}
.mp-args i{color:var(--orange);margin-top:.2rem;width:1.15rem;text-align:center;flex:none}
.mp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem;margin:0}
/* Charte des CTA du §5 : plein orange, le survol INVERSE, jamais un orange foncé. */
.mp-btn{display:inline-flex;align-items:center;font-weight:800;font-size:1rem;
  padding:.7rem 1.5rem;border-radius:999px;border:2px solid var(--orange);
  background:var(--orange);color:#fff;text-decoration:none}
.mp-btn:hover{background:#fff;color:var(--orange)}
.mp-lien{color:var(--muted);font-size:.92rem;text-decoration:underline;text-underline-offset:3px}
.mp-lien:hover{color:var(--orange)}

/* --- médaillon photo + étiquettes --- */
.mp-photo{position:relative;margin:0}
.mp-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:28px;display:block;box-shadow:0 18px 40px rgba(0,0,0,.16)}
.mp-tag{position:absolute;background:#fff;color:var(--ink);font-weight:700;font-size:.85rem;
  padding:.4rem .85rem;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.18);white-space:nowrap}
.mp-tag--1{top:8%;left:-.5rem;color:var(--orange)}
.mp-tag--2{bottom:16%;right:-.5rem}
.mp-tag--3{bottom:-.7rem;left:12%}

/* --- cartes d'exemples --- */
.mp-exemples{margin-top:2.6rem}
.mp-exemples h3{font-size:1.15rem;margin:0 0 1rem}
.mp-cartes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr))}
/* Liseré bas coloré, comme les cartes de catégorie de la référence. */
.mp-carte{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.05rem;
  background:#fff;border:1px solid var(--line);border-bottom:4px solid var(--orange);
  border-radius:14px;color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}
.mp-carte:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.09);color:var(--ink)}
.mp-carte-cat{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--orange);display:inline-flex;align-items:center;gap:.4rem}
.mp-carte-titre{font-weight:700;line-height:1.35}
.mp-carte-nav,.mp-carte-date{font-size:.87rem;color:var(--muted)}
.mp-carte-vide{margin-top:.4rem;font-size:.8rem;font-weight:700;color:var(--orange)}
.mp-fine{margin:1.2rem 0 0;font-size:.82rem;color:var(--muted)}

@media (max-width:900px){
  .mp .mp-wrap:first-child{grid-template-columns:1fr}
  .mp-visuel{order:-1}
  .mp-tag--2,.mp-tag--3{display:none}
}

/* --- page de connexion : photo dans la colonne d'argument --- */
.au-sur{text-transform:uppercase;letter-spacing:.09em;font-size:.74rem;font-weight:800;
  color:var(--orange);margin:0 0 .4rem}
.au-photo{position:relative;margin:0 0 1.4rem}
.au-photo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:20px;display:block}
.au-photo figcaption{position:absolute;left:.9rem;bottom:-.7rem;background:#fff;
  color:var(--orange);font-weight:800;font-size:.86rem;padding:.4rem .9rem;
  border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.2)}
@media (max-width:900px){.au-photo{display:none}}

/* --- entête : troisième entrée --- */
/* ===========================================================================
   LE BANDEAU DE LA NOUVEAUTÉ, sous l'entête (il remplace le lien de nav
   « Rencontres à bord »). Fond sombre de la charte avec une lueur orange à
   droite — un seul orange, jamais deux. Compact : une ligne sur desktop, le
   détail cède sur téléphone pour que le titre et le CTA restent.
   =========================================================================== */
.bd-mu{background:linear-gradient(100deg,#16161a 0%,#232329 55%,rgba(255,99,0,.34) 160%);
  color:#fff}
.bd-mu-in{max-width:1240px;margin:0 auto;padding:.6rem 1rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.5rem .9rem}
.bd-mu-badge{flex:0 0 auto;font-size:.66rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;background:var(--orange);color:#fff;border-radius:999px;
  padding:.18rem .6rem}
.bd-mu-txt{margin:0;font-size:.92rem;line-height:1.4;min-width:0;flex:1 1 16rem}
.bd-mu-txt strong{font-weight:700}
.bd-mu-detail{color:rgba(255,255,255,.78)}
/* CTA de la charte sur fond sombre : plein orange, survol inversé. */
.bd-mu-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.86rem;font-weight:700;text-decoration:none;border-radius:999px;
  padding:.4rem 1rem;background:var(--orange);color:#fff;border:2px solid var(--orange);
  transition:background .12s,color .12s}
.bd-mu-cta:hover{background:#fff;color:var(--orange)}
.bd-mu-cta i{font-size:.75rem}
/* La croix n'existe que par le script : un bouton mort sans lui serait un leurre. */
.bd-mu-x{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;color:rgba(255,255,255,.65);
  font-size:1.2rem;line-height:1;cursor:pointer}
.bd-mu-x:hover{background:rgba(255,255,255,.12);color:#fff}
.bd-mu-x:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
@media (max-width:620px){
  .bd-mu-detail{display:none}
  .bd-mu-txt{flex:1 1 auto}
  .bd-mu-cta{padding:.34rem .8rem}
}

/* L'icône des rencontres de la zone membre, sur TOUTES les largeurs (demande
   du user) : le lien texte du desktop reste, l'icône porte ce qu'il ne peut
   pas porter — la pastille du nombre de rendez-vous à venir, et son panneau. */
/* La rangée d'un rendez-vous dans le panneau : TOUT est le lien, le chevron
   l'annonce et glisse au survol. Chaque information a sa ligne iconée —
   retour du user : « c'est écrit en gros, pas de séparation logique, on ne
   voit pas qu'on peut cliquer ». */
.np--mu + .np--mu{border-top:1px solid var(--line-2,#f1f1f4)}
.np-mu{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;
  gap:.7rem;padding:.65rem .85rem;text-decoration:none;color:var(--ink)}
.np-mu:hover{background:var(--bg-soft)}
.np-mu-ico{display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:50%;background:rgba(255,99,0,.1);color:var(--orange);font-size:.9rem}
.np-mu-corps{min-width:0}
.np-mu-titre{display:block;font-weight:600;font-size:.9rem;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np-mu:hover .np-mu-titre{color:var(--orange)}
.np-mu-ligne{display:flex;align-items:baseline;gap:.4rem;margin-top:.18rem;
  font-size:.78rem;color:var(--muted)}
.np-mu-ligne i{width:.85rem;text-align:center;color:var(--orange);opacity:.75;flex:0 0 auto}
.np-mu-niveau{font-size:.7rem;font-weight:700;padding:.16rem .5rem;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.np-mu-niveau.is-ok{border-color:var(--orange);background:var(--orange);color:#fff}
.np-mu-fleche{color:var(--muted);font-size:.75rem;transition:transform .12s,color .12s}
.np-mu:hover .np-mu-fleche{color:var(--orange);transform:translateX(2px)}
.hd-neuf{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--orange);color:#fff;border-radius:999px;padding:.12rem .45rem;line-height:1.4}
.md-lien-mu{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--ink);
  text-decoration:none;padding:.7rem 0;border-bottom:1px solid var(--line)}
.md-lien-mu i{color:var(--orange)}

/* --- encart de la barre membre --- */
.account-mu{margin-top:1rem;padding:1rem 1.1rem;border-radius:12px;
  background:linear-gradient(160deg,#16161a 0%,#2a1a10 100%);color:#fff}
.account-mu-sur{text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;
  font-weight:800;color:var(--orange);margin:0 0 .25rem}
.account-mu-titre{font-weight:800;margin:0 0 .35rem;font-size:1rem}
.account-mu-txt{font-size:.86rem;line-height:1.5;color:rgba(255,255,255,.82);margin:0 0 .8rem}
.account-mu-btn{display:inline-flex;align-items:center;font-weight:800;font-size:.88rem;
  padding:.45rem 1rem;border-radius:999px;border:2px solid var(--orange);
  background:var(--orange);color:#fff;text-decoration:none}
.account-mu-btn:hover{background:#fff;color:var(--orange)}

/* ------------------------------------------------------------
   LA BARRE DE L'ESPACE MEMBRE NE DOIT PAS ÊTRE COLLANTE EN COLONNE UNIQUE.
   `reviews.css` la pose en `position:sticky; top:80px` et replie la grille à
   une colonne sous 820 px, sans lever le sticky. Or **un élément collant plus
   haut que la fenêtre ne sort jamais de l'écran** : mesuré à 400 px de large,
   la barre fait 1 005 px pour une fenêtre de 603, elle reste donc épinglée
   pendant que la page défile, et tout ce qui est positionné plus bas dans le
   DOM (les pastilles numérotées, par exemple) se peint PAR-DESSUS. Le contenu
   et la barre se superposaient, illisibles.
   Défaut de TOUT l'espace membre sur téléphone, pas d'une page en particulier.
   Empilée au-dessus du contenu, une barre n'a aucune raison d'être collante.
   ------------------------------------------------------------ */
@media (max-width:820px){
  .account-side{position:static;top:auto}
}

/* ------------------------------------------------------------
   BARRE DE L'ESPACE MEMBRE REPLIABLE SUR TÉLÉPHONE
   ------------------------------------------------------------
   Elle mesurait environ 1 000 px empilée au-dessus du contenu : on faisait
   défiler un écran et demi de menu avant d'atteindre la moindre information.
   Repliée en `<details>`, comme les colonnes du pied de page.

   L'ENTÊTE D'IDENTITÉ (avatar, nom, @pseudo) N'EST PAS DANS LE REPLI : c'est
   lui qui dit « vous êtes bien dans votre espace », et le masquer ferait
   perdre le repère au moment précis où l'on cherche à s'orienter. Le résumé
   dit en plus SUR QUELLE PAGE on se trouve.
   ------------------------------------------------------------ */
.account-nav-wrap > summary{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  cursor:pointer;list-style:none;padding:.7rem .2rem;font-weight:700;
  border-top:1px solid var(--line);margin-top:.25rem}
.account-nav-wrap > summary::-webkit-details-marker{display:none}
.account-nav-sum{display:inline-flex;align-items:center;gap:.55rem;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-nav-sum i{color:var(--orange);flex:none}
.account-nav-wrap > summary > .fa-chevron-down{color:var(--muted);transition:transform .18s}
.account-nav-wrap[open] > summary > .fa-chevron-down{transform:rotate(180deg)}
.account-nav-wrap > summary:hover{color:var(--orange)}
.account-nav-wrap > summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Au-delà du seuil de mise en page, la barre occupe sa propre colonne : le
   résumé n'a plus lieu d'être et le menu est toujours déployé. */
@media (min-width:821px){
  .account-nav-wrap > summary{display:none}
}

/* ============================================================
   PANNEAU DE NOTIFICATIONS SOUS LA CLOCHE
   ============================================================ */
.hd-notif{position:relative;display:inline-flex}
.hd-notif-panneau{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:1200;
  width:min(22rem,calc(100vw - 1.6rem));max-height:min(26rem,70vh);overflow-y:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.16)}
.hd-notif-panneau[hidden]{display:none}

.np-tete{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.75rem .9rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.np-tete a{font-size:.85rem;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.np-vide{margin:0;padding:1.1rem .9rem;color:var(--muted);font-size:.9rem}

.np-liste{list-style:none;margin:0;padding:0}
.np{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:.55rem;
  padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.np:last-child{border-bottom:0}

/* L'INDICATEUR DE NON-LU EST UNE PASTILLE PLEINE, pas une nuance de fond : un
   fond légèrement teinté ne se distingue pas pour un œil qui perçoit mal les
   contrastes, et ne se voit pas du tout en plein soleil sur un téléphone.
   La place est réservée même quand la notification est lue, sinon toute la
   ligne se décale et la liste se lit en escalier. */
.np-etat{width:8px;height:8px;border-radius:50%;background:transparent;flex:none}
.np.is-neuf .np-etat{background:var(--orange)}
.np.is-neuf{background:rgba(255,99,0,.05)}

.np-txt{margin:0;font-size:.88rem;line-height:1.4;min-width:0}
.np-txt a{color:var(--ink)}
.np-txt a:hover{color:var(--orange)}
.np-txt small{display:block;color:var(--muted);font-size:.78rem;margin-top:.1rem}
.np form{margin:0}
/* Cible de 32 px : la croix est petite mais elle EFFACE, elle ne doit pas se
   toucher par erreur en faisant défiler la liste. */
.np-x{width:32px;height:32px;display:grid;place-items:center;font:inherit;font-size:1.15rem;
  line-height:1;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.np-x:hover{background:var(--bg-soft);color:#c0392b}
.np-x:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

/* Sur téléphone le panneau se cale sur la largeur de l'écran plutôt que sur la
   cloche, qui est trop à droite pour l'accueillir. */
@media(max-width:620px){
  .hd-notif{position:static}
  .hd-notif-panneau{left:.8rem;right:.8rem;width:auto;top:calc(100% + .3rem)}
}

/* ============================================================
   FAVORIS — cœur sur les cartes, lien dans la tête de liste, page de gestion
   ============================================================ */

/* Le cœur est posé SUR la photo, en haut à droite : la carte n'a pas de place
   libre ailleurs, et c'est la convention. Fond blanc translucide parce qu'un
   cœur seul se perd sur une photo de mer. */
.cc-fav-f{position:absolute;top:.55rem;right:.55rem;z-index:3;margin:0}
.cc-fav{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  font-size:1rem;line-height:1;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--muted);
  box-shadow:0 2px 8px rgba(0,0,0,.18);transition:color .15s,transform .12s,background .15s}
.cc-fav:hover{color:var(--orange);transform:scale(1.08)}
.cc-fav.is-on{color:var(--orange)}
.cc-fav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.cc-media{position:relative}

/* Lien « Mes favoris » de la tête de liste. */
.results-fav{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
  font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:.4rem .7rem;border:1px solid var(--line);border-radius:999px;background:#fff}
.results-fav:hover{border-color:var(--orange);color:var(--orange)}
.results-fav i{color:var(--orange)}
.results-fav b{background:var(--orange);color:#fff;border-radius:999px;
  font-size:.75rem;padding:.05rem .4rem;line-height:1.5}

/* Page de gestion. */
.fv-alerte{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0;padding:.8rem 1rem;
  border:1px solid #f0d2a8;background:#fdf6ec;border-radius:10px;font-size:.92rem}
.fv-alerte i{color:#b9770e;margin-top:.15rem}
.fv-vide{background:var(--bg-soft);border:1px dashed var(--line);border-radius:12px;
  padding:1.6rem;margin-top:1rem}
.fv-vide h2{font-size:1.15rem;margin:0 0 .5rem}
.fv-vide p{max-width:56ch;color:#3a3a42}

.fv-liste{list-style:none;padding:0;margin:1.2rem 0 0;display:flex;flex-direction:column;gap:1rem}
.fv{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:1rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.9rem;overflow:hidden}
/* Une offre partie reste LISIBLE : on l'atténue, on ne la barre pas au point
   de la rendre illisible — c'est encore ce que la personne avait choisi. */
.fv.is-expire{background:var(--bg-soft)}
.fv.is-expire .fv-media{opacity:.55}
.fv-media{border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--bg-soft)}
.fv-media img{width:100%;height:100%;object-fit:cover;display:block}
.fv-titre{margin:0 0 .2rem;font-weight:700}
.fv-meta{margin:0;font-size:.88rem;color:var(--muted)}
.fv-expire{display:flex;align-items:flex-start;gap:.4rem;margin:.5rem 0 0;
  font-size:.84rem;color:var(--muted)}
.fv-expire i{margin-top:.15rem}
.fv-expire--fini{color:#b9770e}
.fv-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.45rem;text-align:right}
.fv-actions form{margin:0}
.fv-prix{margin:0;line-height:1.1}
.fv-prix span{font-size:.78rem;color:var(--muted);display:block}
.fv-prix strong{font-size:1.15rem;white-space:nowrap}
.fv-lien{font-size:.82rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.fv-lien:hover{color:var(--orange)}
.fv-retirer{font:inherit;font-size:.84rem;background:none;border:0;padding:.25rem 0;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fv-retirer:hover{color:#c0392b}

@media(max-width:760px){
  .fv{grid-template-columns:96px minmax(0,1fr)}
  .fv-actions{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;text-align:left;width:100%}
  .fv-prix span{display:inline}
}

/* Croix de fermeture des messages flash. La classe `is-fermable` n'est posée
   que par le script : sans JavaScript la place n'est pas réservée pour un
   bouton qui n'existe pas. */
.flash.is-fermable,.au-flash.is-fermable{
  position:relative;padding-right:2.6rem}
.flash-x{position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  font:inherit;font-size:1.35rem;line-height:1;
  background:none;border:0;border-radius:8px;color:inherit;opacity:.55;cursor:pointer}
.flash-x:hover{opacity:1;background:rgba(0,0,0,.06)}
.flash-x:focus-visible{outline:2px solid var(--orange);outline-offset:1px;opacity:1}

/* ------------------------------------------------------------
   ŒIL D'AFFICHAGE DU MOT DE PASSE
   ------------------------------------------------------------
   L'enveloppe et le bouton sont posés par `assets/js/mdp.js` : sans
   JavaScript, aucun de ces styles ne s'applique et le champ garde exactement
   son apparence d'origine — pas de place réservée pour un bouton absent.
   ------------------------------------------------------------ */
.pw-wrap{position:relative;display:block}
/* La réserve est sur l'ENVELOPPE et non sur une largeur fixe : les champs de
   mot de passe du site, du tiroir et du back-office n'ont pas le même style,
   et une largeur imposée les casserait. */
.pw-wrap > input{width:100%;padding-right:2.9rem}
.pw-oeil{position:absolute;top:50%;right:.35rem;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;cursor:pointer;
  color:var(--muted);font-size:.95rem;line-height:1;padding:0}
.pw-oeil:hover{color:var(--orange)}
.pw-oeil:focus-visible{outline:2px solid var(--orange);outline-offset:1px;color:var(--orange)}
.pw-oeil[aria-pressed="true"]{color:var(--orange)}

/* Bouton « Continuer avec Google ». Il ne suit PAS la charte orange : les
   conditions d'utilisation de Google imposent un bouton neutre (fond blanc ou
   noir, logo officiel non déformé), et un bouton orange se lirait de toute
   façon comme notre action principale alors que c'en est une alternative. */
/* UN SEUL LOOK POUR LES DEUX FOURNISSEURS, et c'est ce qui manquait : la règle
   Facebook n'écrivait que son survol, donc le bouton gardait le fond ORANGE de
   `.au-btn`, qui est le CTA principal du site. Un bouton de connexion tierce
   n'est pas l'action principale de l'écran, c'en est une alternative — et deux
   boutons pleins, l'un orange et l'autre bleu, se disputeraient l'attention
   au-dessus du formulaire alors qu'ils mènent au même endroit.
   Fond blanc bordé pour les deux, la couleur reste dans le logo. C'est aussi ce
   qu'exigent les chartes de marque des deux plateformes. */
.au-btn--google,
.au-btn--facebook{display:flex;align-items:center;justify-content:center;gap:.6rem;
  background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.au-btn--google:hover,
.au-btn--facebook:hover{background:#f7f8f8;border-color:#c6c9cc;color:#1f1f1f}
.au-btn--google:focus-visible,
.au-btn--facebook:focus-visible{outline:2px solid #1f1f1f;outline-offset:2px}
.au-btn--google .au-g,
.au-btn--facebook .au-g{display:inline-grid;place-items:center;line-height:0}

/* ============================================================
   PHOTO DE PROFIL — bloc et recadreur
   ============================================================ */
.av-bloc{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.2rem;margin-bottom:1.5rem}
.av-actuel{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.pf-mini--xl{width:6rem;height:6rem;font-size:2.2rem;flex:none}
.av-actions{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.av-aide{margin:0;font-size:.86rem;color:var(--muted);max-width:46ch;line-height:1.5}
.av-actions form{margin:0;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* Le `<label>` porte le style de bouton : l'input de fichier natif ne se met
   pas à la charte, et le masquer derrière un label est la seule façon propre. */
.av-choisir{cursor:pointer}
.av-retirer{font:inherit;font-size:.84rem;background:none;border:0;padding:.25rem 0;
  color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.av-retirer:hover{color:#c0392b}

/* --- fenêtre de recadrage --- */
.av-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;
  background:rgba(10,10,12,.72);padding:1rem}
.av-modal[hidden]{display:none}
.av-modal-boite{background:#fff;border-radius:16px;padding:1.2rem;width:min(34rem,100%);
  max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.av-modal-boite h2{font-size:1.15rem;margin:0 0 .9rem}
/* Hauteur BORNÉE : sans elle, une photo de 4 000 px de haut fait sortir les
   boutons de l'écran et le recadrage devient impossible à valider. */
.av-zone{max-height:56vh;background:var(--bg-soft);border-radius:10px;overflow:hidden}
.av-zone img{display:block;max-width:100%}
.av-modal-aide{margin:.7rem 0 0;font-size:.84rem;color:var(--muted)}
.av-modal-pied{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem}
/* L'aperçu du recadrage est ROND, comme l'avatar l'est partout sur le site :
   montrer un cadre carré ferait découvrir la coupe après coup. */
.av-zone .cropper-view-box,.av-zone .cropper-face{border-radius:50%}
.av-zone .cropper-view-box{outline:2px solid var(--orange);outline-offset:-1px}

@media(max-width:560px){
  .av-actuel{gap:.9rem}
  .pf-mini--xl{width:4.5rem;height:4.5rem;font-size:1.7rem}
  .av-modal-pied{flex-direction:column-reverse}
  .av-modal-pied .pf-btn{width:100%;justify-content:center}
}

/* Case d'acceptation des conditions. La cible doit être confortable : c'est un
   consentement, pas une préférence, et on ne le coche pas par accident. */
/* PIÈGE DE SPÉCIFICITÉ, LE MÊME QUE POUR LA CLOCHE DE L'ENTÊTE ET LE FOND DE
   CARTE LEAFLET. `.au-champs label{display:grid}` (0-1-1) empile le libellé
   au-dessus de son champ — c'est ce qu'on veut pour tous les champs du
   formulaire. Mais la case de consentement est un `<label>` DANS `.au-champs`,
   donc elle héritait de cette grille : la case et sa phrase se retrouvaient
   l'une SOUS l'autre, chacune sur sa ligne. `.au-cgu` seul (0-1-0) ne pouvait
   pas gagner. On préfixe donc par le conteneur pour passer à 0-2-0.
   Mesuré avant correction : case à `top: 764`, texte à `top: 787`. */
.au-champs .au-cgu{display:flex;align-items:flex-start;gap:.6rem;margin:.2rem 0 1rem;
  font-size:.86rem;line-height:1.5;color:var(--muted);cursor:pointer}
.au-cgu input{width:1.15rem;height:1.15rem;margin-top:.12rem;flex:none;
  accent-color:var(--orange);cursor:pointer}
.au-cgu a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.au-cgu-google{margin:.6rem 0 0;font-size:.8rem;line-height:1.5;color:var(--muted);text-align:center}
.au-cgu-google a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}

/* --- couverture : aperçu et fenêtre large --- */
.av-couv-apercu{aspect-ratio:3/1;border-radius:10px;background-size:cover;background-position:center;
  background-color:var(--bg-soft);display:grid;place-items:center;margin-bottom:.8rem}
.av-couv-apercu--vide{border:1px dashed var(--line);color:var(--muted);font-size:.88rem}
.av-actions--ligne{flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem}
/* La fenêtre s'élargit pour une bannière : recadrer du 3:1 dans une boîte de
   34 rem donne une bande de 90 px de haut, sur laquelle on ne cadre rien. */
.av-modal--large .av-modal-boite{width:min(56rem,100%)}
/* L'aperçu rond n'a de sens que pour l'avatar ; sur une bannière il tromperait
   sur ce qui sera réellement affiché. */
.av-modal:not(.av-rond) .av-zone .cropper-view-box,
.av-modal:not(.av-rond) .av-zone .cropper-face{border-radius:0}

/* ============================================================
   MESSAGERIE  (lot 5)
   ============================================================
   Deux colonnes sur grand écran, une seule sur téléphone : la liste devient la
   page, et le fil la remplace. Un fil de conversation dans 40 % d'un écran de
   375 px ne se lit pas. */
.ms-cadre{display:grid;grid-template-columns:19rem minmax(0,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  min-height:min(34rem,70vh)}

.ms-liste{border-right:1px solid var(--line);overflow-y:auto;max-height:min(34rem,70vh)}
.ms-liste-titre{font-size:1rem;margin:0;padding:.9rem 1rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff}
.ms-liste ul{list-style:none;margin:0;padding:0}
.ms-item{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.ms-item:hover{background:var(--bg-soft);color:var(--ink)}
.ms-item.is-actif{background:rgba(255,99,0,.07);box-shadow:inset 3px 0 0 var(--orange)}
/* Une conversation non lue se voit au GRAS et à la pastille, pas à une nuance
   de fond : le fond seul ne se distingue pas en plein soleil. */
.ms-item.is-neuf .ms-item-nom{font-weight:800}
.ms-item.is-neuf .ms-item-apercu{color:var(--ink)}
.ms-item-txt{min-width:0;flex:1}
.ms-item-nom{display:block;font-weight:600;font-size:.94rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-item-apercu{display:block;font-size:.83rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-item-n{flex:none;background:var(--orange);color:#fff;border-radius:999px;
  font-size:.72rem;font-weight:800;padding:.1rem .42rem}

.ms-fil{display:flex;flex-direction:column;min-width:0}
.ms-fil--vide{align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:2rem}
.ms-fil--vide i{display:block;font-size:2rem;color:var(--line);margin-bottom:.6rem}
.ms-fil-tete{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line)}
.ms-fil-nom{flex:1;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-fil-nom a{color:var(--ink)}
.ms-fil-nom a:hover{color:var(--orange)}
.ms-fil-tete form{margin:0}
.ms-quitter{font:inherit;font-size:.82rem;background:none;border:0;color:var(--muted);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ms-quitter:hover{color:#c0392b}
/* Le retour n'a de sens qu'en une colonne, où la liste est une autre page. */
.ms-retour{display:none;color:var(--muted)}

.ms-bulles{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem;
  max-height:min(26rem,55vh)}
.ms-bulle{position:relative;max-width:min(30rem,80%);align-self:flex-start;
  background:var(--bg-soft);border-radius:14px 14px 14px 4px;padding:.6rem .85rem}
.ms-bulle--moi{align-self:flex-end;background:var(--orange);color:#fff;
  border-radius:14px 14px 4px 14px}
.ms-bulle p{margin:0;font-size:.93rem;line-height:1.45;overflow-wrap:anywhere}
.ms-heure{display:block;font-size:.72rem;opacity:.7;margin-top:.25rem}
.ms-bulle form{margin:0}
/* Le drapeau n'apparaît qu'au survol ou au focus clavier : présent en
   permanence il ferait lire chaque message comme suspect. */
.ms-signaler{position:absolute;top:.2rem;right:-1.9rem;width:26px;height:26px;
  display:grid;place-items:center;background:none;border:0;color:var(--muted);
  cursor:pointer;opacity:0;transition:opacity .15s}
.ms-bulle:hover .ms-signaler,.ms-signaler:focus-visible{opacity:1}
.ms-signaler:hover{color:#c0392b}

.ms-ecrire{display:flex;align-items:flex-end;gap:.5rem;padding:.7rem 1rem;
  border-top:1px solid var(--line)}
.ms-ecrire textarea{flex:1;font:inherit;font-size:1rem;resize:none;min-height:2.6rem;max-height:8rem;
  padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px}
.ms-ecrire textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.ms-envoyer{flex:none;width:2.7rem;height:2.7rem;display:grid;place-items:center;
  border:0;border-radius:50%;background:var(--orange);color:#fff;cursor:pointer}
.ms-envoyer:hover{background:#fff;color:var(--orange);box-shadow:inset 0 0 0 2px var(--orange)}
.ms-avert{margin:0;padding:0 1rem .8rem;font-size:.78rem;color:var(--muted);line-height:1.45}
.ms-ferme{margin:0;padding:1rem;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
.ms-vide{margin:0;padding:1.2rem 1rem;color:var(--muted);font-size:.9rem;line-height:1.5}

@media(max-width:820px){
  /* UNE SEULE COLONNE : la liste EST la page `/messages`, le fil la remplace.
     Afficher les deux dans 375 px donnerait deux colonnes illisibles. */
  .ms-cadre{grid-template-columns:1fr;min-height:0}
  .ms-liste{border-right:0;max-height:none}
  .ms-fil .ms-liste,.ms-cadre:has(.ms-fil-tete) .ms-liste{display:none}
  .ms-retour{display:inline-grid;place-items:center;width:36px;height:36px}
  .ms-bulles{max-height:none;min-height:12rem}
  .ms-bulle{max-width:88%}
  .ms-signaler{position:static;opacity:1;margin-top:.2rem}
}

/* Titres de groupe de la barre du compte. Discrets et en capitales : ils
   structurent sans concurrencer les liens, qui restent l'élément cliquable.
   La marge du haut sépare les blocs ; le premier n'en a pas, sinon il décolle
   de l'entête d'identité. */
.account-nav-groupe{margin:1.1rem 0 .35rem;padding:0 .2rem;
  font-family:var(--font-head);font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.account-nav-groupe:first-child{margin-top:.25rem}

/* ============================================================
   GÉRER SON COMPTE — et le supprimer
   ============================================================
   Le rouge n'apparaît QUE sur cette page. Employé ailleurs pour un simple
   « retirer », il perdrait tout son poids ici, là où l'action est réellement
   sans retour. */
.gc-bloc{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.3rem;margin-top:1.4rem}
.gc-bloc h2{font-size:1.15rem;margin:0 0 .7rem}
.gc-bloc p{max-width:66ch;line-height:1.6}
.gc-bloc--danger{border-color:#eec2bd;background:#fffaf9}
.gc-fine{font-size:.85rem;color:var(--muted)}
.gc-fil{font-size:.88rem;margin-bottom:.6rem}
.gc-fil a{color:var(--muted)}
.gc-fil a:hover{color:var(--orange)}

.gc-btn-danger{display:inline-flex;align-items:center;justify-content:center;
  font:inherit;font-weight:800;padding:.6rem 1.2rem;border-radius:999px;cursor:pointer;
  border:2px solid #c0392b;background:#c0392b;color:#fff;text-decoration:none}
.gc-btn-danger:hover{background:#fff;color:#c0392b}
.gc-btn-danger:focus-visible{outline:2px solid #c0392b;outline-offset:2px}

.gc-form{max-width:44rem}
.gc-motifs{border:0;padding:0;margin:1.2rem 0 0}
.gc-motifs legend{font-weight:700;font-size:1rem;padding:0;margin-bottom:.5rem}
.gc-motif{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .2rem;cursor:pointer}
.gc-motif input{width:1.1rem;height:1.1rem;margin-top:.15rem;flex:none;accent-color:var(--orange)}
.gc-champ{display:block;margin:1.1rem 0}
.gc-champ span{display:block;font-weight:600;margin-bottom:.35rem}
.gc-champ textarea{width:100%;font:inherit;font-size:1rem;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:9px;resize:vertical}
.gc-champ textarea:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

.gc-alerte{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem 1rem;
  border:1px solid #eec2bd;background:#fdf1ef;border-radius:10px;margin:0 0 1rem}
.gc-alerte i{color:#c0392b;margin-top:.15rem}
.gc-bilan{margin:.6rem 0 1.2rem;padding-left:1.2rem;line-height:1.8}
/* Les actions se lisent de gauche à droite : la sortie de secours EN PREMIER,
   l'action sans retour en dernier. */
.gc-actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.2rem}

.gc-adieu{padding:3rem 1rem;text-align:center;max-width:44rem}
.gc-adieu h1{margin-bottom:.8rem}
.gc-adieu p{margin:0 auto 1rem;max-width:52ch;line-height:1.65}

/* ============================================================
   « DES CROISIÈRES POUR VOUS » (préférences de croisière)
   ============================================================
   La section est EN TÊTE de la page, avant le récapitulatif : c'est elle qui
   justifie de remplir le formulaire, la reléguer en bas reviendrait à la
   cacher. Elle reprend la grille des résultats, sans facettes ni tri : on ne
   refait pas une page de recherche dans un espace membre, on montre ce que les
   préférences donnent. */
.pref-offres{margin:0 0 2.2rem}
.pref-offres-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    flex-wrap:wrap;margin-bottom:.35rem}
.pref-offres-total{font-size:.88rem;color:var(--muted)}
.pref-offres-crit{font-size:.9rem;color:var(--muted);margin:0 0 1rem}
.pref-offres-crit strong{color:var(--ink)}
/* Ce qui a été écarté se lit, mais ne prend pas le pas sur ce qui a été retenu. */
.pref-offres-relache{display:block;font-size:.85rem;opacity:.85}
.pref-offres-vide{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
    margin:0 0 2rem;padding:.9rem 1rem;border:1px dashed var(--line);border-radius:12px;
    font-size:.92rem;color:var(--muted)}
.pref-offres-vide i{color:var(--orange)}
/* La page du compte est plus étroite que les résultats : deux colonnes au
   maximum, sinon les cartes deviennent illisibles. */
.pref-offres .results-grid{grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr))}
/* LA LARGEUR DE LECTURE N'EST PAS LA LARGEUR D'UNE GRILLE, piège déjà rencontré
   sur les tableaux de la page d'escale. Le formulaire et le récapitulatif
   restent à 640 px, où ils se lisent ; la grille d'offres, elle, prend toute la
   colonne, sinon les cartes tombent en une seule file. */
.pref-main #prefSummary,.pref-main #prefForm{max-width:640px}

/* ============================================================
   NOTE D'AIDE SOUS UN CHAMP
   ============================================================
   ELLE N'OCCUPAIT QUE 150 px. `.profile-row` est une grille `150px 1fr` :
   une aide posée après le champ devient le TROISIÈME enfant, donc elle
   retombe dans la colonne du LABEL et s'écrase sur cinq lignes. Il faut la
   renvoyer explicitement dans la colonne du champ — la grille ne peut pas
   deviner qu'elle décrit ce qui est à sa droite et non ce qui est à sa gauche.

   ENCART DISCRET ET NON UN `alert` BOOTSTRAP : les alertes de Bootstrap sont
   bleues, et le §7 de la charte n'a qu'un orange. Un fond neutre avec un filet
   à gauche dit « information » sans introduire une couleur qui n'est pas à
   nous, et sans crier — une aide n'est pas un avertissement.

   LE FILET EST PLUS SOMBRE QUE `--line-2` : mesuré à l'écran, #f1f1f4 sur un
   fond #f7f7f9 ne se distingue pas, le filet existait sans se voir. */
.champ-aide{display:flex;align-items:flex-start;gap:.45rem;
    margin:.5rem 0 0;padding:.5rem .7rem;
    background:var(--bg-soft);border-left:3px solid #cfd2da;border-radius:0 8px 8px 0;
    font-size:.83rem;line-height:1.45;color:var(--muted)}
.champ-aide i{margin-top:.15rem;opacity:.7;flex:none}
/* Dans la grille du profil, l'aide se pose SOUS le champ et prend toute sa
   largeur ; sous 560 px la grille repasse à une colonne et la règle tombe. */
.profile-row .champ-aide{grid-column:2}
@media(max-width:560px){.profile-row .champ-aide{grid-column:1}}

/* ============================================================
   RÉGLAGE DES ALERTES PAR E-MAIL (section de « Gérer mon compte »)
   ============================================================
   Le libellé à gauche, l'interrupteur à droite : on parcourt une colonne de
   textes et une colonne d'états, au lieu d'alterner les deux. Les obligatoires
   ne sont plus affichées du tout — une case qu'on ne peut pas décocher se lit
   comme un choix qu'on refuse d'honorer. */
.al-groupe{border:0;padding:0;margin:0 0 1.4rem}
.al-groupe legend{font-family:var(--font-head);font-weight:700;font-size:.92rem;
    margin:0 0 .5rem;float:none;color:var(--ink)}
.al-ligne{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.65rem .85rem;border:1px solid var(--line);border-radius:10px;
    margin-bottom:.45rem;cursor:pointer}
.al-ligne:hover{border-color:#cfd2da}
.al-txt{display:flex;flex-direction:column;gap:.15rem}
.al-label{font-size:.94rem;color:var(--ink)}
.al-aide{font-size:.83rem;color:var(--muted)}

/* L'INTERRUPTEUR EST UNE VRAIE `<input type=checkbox>` REPEINTE, pas un `div`
   piloté en JavaScript : elle se tabule, elle s'annonce, elle s'envoie avec le
   formulaire, et elle garde son état sans une ligne de script. `appearance:none`
   efface le rendu natif, le reste est du dessin.
   ON NE CACHE PAS LA CASE POUR EN DESSINER UNE AUTRE À CÔTÉ : c'est le montage
   habituel, et c'est lui qui casse le focus visible. */
.al-switch{appearance:none;-webkit-appearance:none;margin:0;flex:none;cursor:pointer;
    position:relative;width:44px;height:24px;border-radius:999px;
    background:#cfd2da;border:0;transition:background .18s ease}
.al-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
    border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);
    transition:transform .18s ease}
.al-switch:checked{background:var(--orange)}
.al-switch:checked::after{transform:translateX(20px)}
.al-switch:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
/* La cible tactile reste à 44 px, même si le dessin en fait 24 de haut. */
@media (pointer:coarse){.al-ligne{padding-block:.85rem}}
@media (prefers-reduced-motion:reduce){.al-switch,.al-switch::after{transition:none}}

.al-stop{max-width:560px;margin:0 auto;padding:1.6rem;border:1px solid var(--line);border-radius:14px}
.al-stop-canal{margin:.9rem 0;padding:.7rem .9rem;background:var(--bg-soft);
    border-left:3px solid var(--orange);border-radius:0 8px 8px 0;font-weight:600}

/* ============================================================
   FLÈCHE DE DESCENTE DU HÉROS
   ============================================================
   ELLE NE DOIT RIEN CASSER : les panneaux du moteur sont en `position:absolute`
   et doivent déborder du héros. On n'ajoute donc ici NI `overflow`, NI `z-index`
   sur un ancêtre, NI `backdrop-filter` — les trois choses qui ont déjà cassé ces
   panneaux (cf. §5 de CLAUDE.md). C'est un simple lien en flux normal. */
.hero-fleche{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
    margin-top:1.6rem;color:rgba(255,255,255,.82);text-decoration:none;
    font-size:.86rem;letter-spacing:.01em}
.hero-fleche:hover,.hero-fleche:focus-visible{color:#fff}
.hero-fleche i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
    border:1px solid rgba(255,255,255,.35);font-size:.8rem;
    animation:heroPlonge 2.4s ease-in-out infinite}
.hero-fleche:hover i{border-color:var(--orange);background:var(--orange);color:#fff}
@keyframes heroPlonge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* Le défilement doux vient du CSS, pas d'un script : le lien fonctionne même
   sans JavaScript, et le mouvement se coupe pour qui l'a demandé. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero-fleche i{animation:none}
}
/* La cible d'ancre se cale sous l'entête collante, sinon le titre passe dessous. */
#reseau{scroll-margin-top:5rem}

/* ============================================================
   BLOC « REJOINDRE LES CROISIÉRISTES »
   ============================================================
   TROIS TEMPS, PAS DEUX COLONNES. La première version opposait deux publics et
   alignait des chiffres de catalogue ; elle prouvait un stock au lieu de dire
   en quoi le réseau aide à choisir. Le gabarit vient des captures Meetup : une
   phrase qui dit à quoi ça sert, puis le fonctionnement en trois étapes.

   LE LISERÉ BAS COLORÉ est repris des mêmes captures, et il est déjà le motif
   des cartes du bloc meetup juste en dessous : les deux sections se répondent
   au lieu de se juxtaposer. */
.rz{padding:3.2rem 0 2.4rem;background:#fff}
.rz-wrap{max-width:1180px;margin:0 auto;padding:0 1rem}
.rz-tete{max-width:720px;margin:0 auto 2.2rem;text-align:center}
.rz-sur{margin:0 0 .35rem;font-size:.78rem;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--orange)}
.rz-titre{font-family:var(--font-head);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);
    margin:0 0 .7rem;text-wrap:balance}
.rz-chapo{margin:0;color:var(--muted);line-height:1.7;font-size:1.02rem}

/* `<ol>` et non `<ul>` : les trois temps se suivent dans l'ordre où on les
   vit. Les puces natives sont retirées, la numérotation reste dans la balise
   pour un lecteur d'écran. */
.rz-etapes{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem;
    grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.rz-etape{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
    padding:1.5rem 1.4rem 1.6rem;overflow:hidden}
.rz-etape::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
    background:var(--orange)}
.rz-ico{display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:14px;
    background:var(--bg-soft);color:var(--orange);font-size:1.15rem;margin-bottom:.9rem}
.rz-etape h3{font-family:var(--font-head);font-weight:800;font-size:1.08rem;margin:0 0 .45rem}
.rz-etape p{margin:0;color:var(--muted);line-height:1.6;font-size:.94rem}

.rz-cta{margin-top:2rem;text-align:center}
/* Charte du §5 : plein orange, et le survol INVERSE au lieu de foncer. */
.rz-btn{display:inline-block;padding:.85rem 1.8rem;border:2px solid var(--orange);
    border-radius:999px;background:var(--orange);color:#fff;font-weight:700;
    text-decoration:none;transition:.15s}
.rz-btn:hover,.rz-btn:focus-visible{background:#fff;color:var(--orange)}
.rz-lien{display:block;margin-top:.7rem;color:var(--muted);font-size:.9rem}
.rz-lien:hover{color:var(--orange)}

/* LA CHARNIÈRE entre le bloc « réseau » et le bloc « meetup ».
   ELLE EST LISIBLE, PAS DISCRÈTE. En petites capitales grises, elle passait
   pour une étiquette de section et personne ne la lisait — or c'est elle qui
   donne la raison de continuer à descendre. Elle est donc à la taille d'une
   vraie phrase, avec sa seconde moitié en gras : la première pose la situation
   (« vous partagez le navire avec des milliers de croisiéristes »), la seconde
   dit ce qu'on peut en faire.
   PAS DE BOUTON ICI, et c'est délibéré : un troisième appel à l'action en
   400 px aggraverait exactement ce que cette phrase vient réparer. */
.rz-charniere{display:flex;flex-direction:column;align-items:center;gap:.6rem;
    max-width:44ch;margin:2.6rem auto 0;padding-top:2rem;
    border-top:1px solid var(--line);
    text-align:center;font-size:1.06rem;line-height:1.55;color:var(--muted);text-wrap:balance}
.rz-charniere strong{display:block;color:var(--ink);font-family:var(--font-head);
    font-weight:800;font-size:1.22rem;margin-top:.15rem}
.rz-charniere i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
    background:var(--orange);color:#fff;font-size:.8rem;
    animation:heroPlonge 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rz-charniere i{animation:none}}
/* La bande du meetup vient juste après : on colle les deux pour que la phrase
   pointe vraiment ce qui suit, au lieu de flotter dans un blanc. */
.rz + .mp{margin-top:0}

/* ============================================================
   ANNUAIRE DES CROISIÉRISTES
   ============================================================ */
.an-recherche{display:flex;gap:.5rem;margin:0 0 1rem}
.an-recherche input{flex:1;min-width:0;padding:.7rem .9rem;border:1px solid var(--line);
    border-radius:10px;font:inherit;font-size:1rem}
.an-recherche input:focus{outline:none;border-color:var(--orange);
    box-shadow:0 0 0 3px rgba(255,99,0,.12)}
.an-recherche button{flex:none;padding:.7rem 1.1rem;border:2px solid var(--orange);border-radius:10px;
    background:var(--orange);color:#fff;font-weight:700;font:inherit;font-weight:700;cursor:pointer;
    transition:.15s}
.an-recherche button:hover{background:#fff;color:var(--orange)}

.an-tris{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem}
.an-tris a{padding:.4rem .85rem;border:1px solid var(--line);border-radius:999px;
    font-size:.88rem;color:var(--muted);text-decoration:none}
.an-tris a:hover{border-color:#cfd2da;color:var(--ink)}
.an-tris a.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.an-total{margin:0 0 1rem;font-size:.9rem;color:var(--muted)}
.an-total strong{color:var(--ink)}
.an-vide{margin:1.5rem 0;padding:1.2rem;border:1px dashed var(--line);border-radius:12px;
    color:var(--muted)}

.an-grille{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr))}
.an-carte{display:flex;flex-direction:column;gap:.6rem;padding:1.1rem;
    background:#fff;border:1px solid var(--line);border-radius:14px}
.an-carte:hover{border-color:#cfd2da}
.an-tete{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.an-ident{display:flex;flex-direction:column;min-width:0}
.an-nom{font-family:var(--font-head);font-weight:700;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-badge{color:var(--orange);font-size:.8em}
.an-pseudo{font-size:.85rem;color:var(--muted)}
.an-accroche{margin:0;font-size:.9rem;color:#3a3a42;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Les chiffres sont la raison de cliquer : ils passent avant les boutons et
   s'alignent en colonnes lisibles. */
.an-metrics{display:flex;flex-wrap:wrap;gap:.9rem;list-style:none;margin:0;padding:0}
.an-metrics li{display:flex;flex-direction:column;line-height:1.2}
.an-metrics strong{font-family:var(--font-head);font-size:1.02rem;color:var(--ink);
    font-variant-numeric:tabular-nums}
.an-metrics span{font-size:.75rem;color:var(--muted)}
.an-communs{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem;color:var(--orange)}

.an-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.3rem}
.an-act{margin:0}
.an-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .75rem;
    border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
    font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;text-decoration:none;
    transition:.15s}
.an-btn:hover{border-color:var(--orange);color:var(--orange)}
.an-btn--plein{background:var(--orange);border-color:var(--orange);color:#fff}
.an-btn--plein:hover{background:#fff;color:var(--orange)}
.an-btn--fait{background:var(--bg-soft);color:var(--muted)}
.an-btn--attente{background:var(--bg-soft);color:var(--muted);cursor:pointer}
/* CE BOUTON EST UN `<span>`, PAS UN `<button disabled>` : un bouton désactivé
   n'est pas focusable, donc son `title` reste inaccessible au clavier et à un
   lecteur d'écran — la règle qu'il explique serait invisible à ceux qui en ont
   le plus besoin. */
.an-btn--off{color:var(--muted);background:var(--bg-soft);border-style:dashed;cursor:not-allowed}
.an-btn--off:hover{border-color:var(--line);color:var(--muted)}

.an-pages{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.an-pages a{color:var(--orange);font-weight:600;text-decoration:none}
.an-pages a:hover{text-decoration:underline}
.an-pos{font-size:.86rem;color:var(--muted)}

/* Le mot de présentation d'une demande d'ami. */
.an-mot{position:relative}
.an-mot > summary{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .75rem;
    border:1px solid var(--line);border-radius:999px;background:#fff;
    font-size:.84rem;font-weight:600;cursor:pointer;list-style:none}
.an-mot > summary::-webkit-details-marker{display:none}
.an-mot > summary:hover{border-color:var(--orange);color:var(--orange)}
.an-mot[open] > summary{border-color:var(--orange);color:var(--orange)}
.an-mot form{margin-top:.6rem;display:flex;flex-direction:column;gap:.45rem}
.an-mot textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;
    font:inherit;font-size:.88rem;resize:vertical}
.an-mot textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,99,0,.12)}
.an-mot-aide{margin:0;font-size:.76rem;color:var(--muted)}
.an-mot button{align-self:flex-start}

/* Le mot reçu, dans « Mes relations ». Cité, pour qu'on voie que c'est la
   personne qui parle et non le site. */
.rl-mot{margin:.5rem 0 0;padding:.6rem .8rem;background:var(--bg-soft);
    border-left:3px solid var(--orange);border-radius:0 8px 8px 0;
    font-size:.9rem;line-height:1.5;color:#3a3a42}
.rl-mot i{color:var(--orange);margin-right:.35rem;font-size:.8em}

/* ============================================================
   « PREMIÈRE VISITE ? » sur l'écran de connexion
   ============================================================
   ENCADRÉ ET NON BOUTON PLEIN : le bouton plein de cet écran est « Se
   connecter », qui reste l'action principale pour la majorité des visites. Un
   second bouton orange au-dessus se disputerait la place avec lui. Le cadre et
   le filet orange suffisent à rendre le bloc impossible à manquer, ce que le
   lien en bas de page n'était pas. */
/* EN BAS DE L'ÉCRAN, il ferme la page au lieu de l'ouvrir : marge HAUTE et non
   basse, et un filet de séparation, sinon il se colle au « mot de passe oublié »
   et se lit comme une suite du formulaire. */
.au-nouveau{margin:1.6rem 0 0;padding:.9rem 1rem;
    background:var(--bg-soft);border:1px solid var(--line);
    border-left:3px solid var(--orange);border-radius:0 12px 12px 0}
.au-nouveau-txt{margin:0 0 .7rem;font-size:.92rem;line-height:1.5;color:#3a3a42}
.au-nouveau-txt strong{color:var(--ink)}
.au-nouveau-btn{display:inline-block;padding:.55rem 1.1rem;border:2px solid var(--orange);
    border-radius:999px;background:#fff;color:var(--orange);font-weight:700;
    font-size:.92rem;text-decoration:none;transition:.15s}
.au-nouveau-btn:hover,.au-nouveau-btn:focus-visible{background:var(--orange);color:#fff}
.au-nouveau-fine{margin:.6rem 0 0;font-size:.82rem;color:var(--muted)}

/* ============================================================
   L'ENCART DE CONTEXTE sur l'écran de connexion
   ============================================================
   IL REMPLACE LE TITRE D'ACCUEIL, il ne s'ajoute pas à lui : c'est la
   première chose à lire, elle dit pourquoi on a quitté la page précédente et
   promet qu'on y retournera. En flash discret, elle passait inaperçue — et le
   style `--info` n'existait même pas, donc elle s'affichait sans fond ni
   bordure, comme un paragraphe ordinaire. */
/* LE TON EST UN MERCI, PAS UN AVERTISSEMENT. Le bleu « information » d'un
   bandeau administratif disait « attention, il manque quelque chose » ; c'est
   exactement l'effet qu'on cherche a eviter. Fond chaud et coeur orange : on
   remercie d'une contribution, on ne signale pas un manquement. */
.au-contexte{display:flex;align-items:flex-start;gap:.7rem;
    margin:0 0 1.4rem;padding:.9rem 1rem;
    background:#fff6f0;border:1px solid #ffd9c2;border-radius:12px;
    font-size:.94rem;line-height:1.55;color:#3a3a42}
.au-contexte i{margin-top:.15rem;flex:none;font-size:1.05rem;color:var(--orange)}

/* ============================================================
   RUBRIQUE « AVIS » D'UN HUB NAVIRE : deux onglets
   ============================================================ */
.hb-avis{margin:0 0 1.5rem}
.hb-onglets{border-bottom:2px solid var(--line);gap:.2rem;margin-bottom:1.6rem}
.hb-onglets .nav-link{display:flex;align-items:center;gap:.45rem;
    border:0;border-bottom:3px solid transparent;border-radius:0;
    padding:.7rem 1.1rem;font-family:var(--font-head);font-weight:700;font-size:.98rem;
    color:var(--muted);background:none}
.hb-onglets .nav-link:hover{color:var(--ink)}
.hb-onglets .nav-link.active{color:var(--orange);border-bottom-color:var(--orange);background:none}
.hb-pastille{display:inline-grid;place-items:center;min-width:1.4rem;height:1.4rem;padding:0 .35rem;
    border-radius:999px;background:var(--orange);color:#fff;font-size:.75rem;font-weight:800}

/* L'expert : une carte, pas une ligne de crédit perdue en bas de page. C'est
   elle qui transforme « notre avis » en « l'avis de quelqu'un ». */
.hb-expert{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem;padding:1rem 1.1rem;
    background:var(--bg-soft);border:1px solid var(--line);border-radius:14px}
.hb-expert-photo{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;
    border:2px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.hb-expert-nom{margin:0;font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--ink)}
.hb-expert-titre{margin:.1rem 0 0;font-size:.9rem;color:var(--orange);font-weight:600}
.hb-expert-exp{margin:.15rem 0 0;font-size:.83rem;color:var(--muted)}
.hb-signature{margin:1.8rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
    text-align:center;font-size:.94rem;line-height:1.6;color:#3a3a42}

/* Synthèse : la note, puis la DISTRIBUTION — 4,2 par consensus et 4,2 par deux
   extrêmes ne disent pas la même chose, et c'est ce qu'un acheteur cherche. */
.hb-synthese{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
    align-items:center;padding:1.2rem;background:var(--bg-soft);border:1px solid var(--line);
    border-radius:14px;margin-bottom:1.6rem}
.hb-note{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.hb-note-val{font-family:var(--font-head);font-weight:800;font-size:2.6rem;line-height:1;color:var(--ink)}
.hb-note-sur{font-size:.8rem;color:var(--muted)}
.hb-note-nb{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.hb-dist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.hb-dist li{display:grid;grid-template-columns:2.6rem 1fr 2rem;align-items:center;gap:.5rem;font-size:.83rem}
.hb-dist-n{color:var(--muted);white-space:nowrap}
.hb-dist-rond{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--orange);margin-left:.3em;vertical-align:baseline}
.hb-dist-barre,.hb-crit-barre{height:7px;border-radius:99px;background:#e6e6ec;overflow:hidden}
.hb-dist-barre > span,.hb-crit-barre > span{display:block;height:100%;background:var(--orange)}
.hb-dist-c{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

.hb-st{font-family:var(--font-head);font-weight:800;font-size:1.1rem;margin:1.8rem 0 .8rem}
.hb-crit{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
    grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
.hb-crit li{display:grid;grid-template-columns:1fr 5rem 2rem;align-items:center;gap:.6rem;font-size:.9rem}
.hb-crit-val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}

/* Les cartes du hub sont CELLES de `/avis` (`partials/avis_carte.php`) : seule
   la grille change, la page du navire étant plus étroite que la liste. */
.hb-cartes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(19rem,100%),1fr))}
.hb-plus{margin:1.1rem 0 0;text-align:center}
/* C'est un bouton de formulaire (aucune URL creee), il doit se lire comme un lien. */
.hb-plus button{border:0;background:none;padding:0;font:inherit;
    color:var(--orange);font-weight:700;cursor:pointer}
.hb-plus button:hover{text-decoration:underline}
.hb-deposer{margin:1.6rem 0 0;text-align:center}

/* L'ÉTAT VIDE EST UN APPEL, PAS UN CONSTAT : « aucun avis » referme la page,
   « soyez le premier » dit ce qu'on peut y faire. */
.hb-vide{text-align:center;padding:2rem 1.2rem;border:1px dashed var(--line);border-radius:14px;
    background:var(--bg-soft)}
.hb-vide > i{font-size:1.8rem;color:var(--orange);opacity:.8}
.hb-vide-titre{margin:.7rem 0 .3rem;font-family:var(--font-head);font-weight:800;font-size:1.1rem}
.hb-vide-txt{margin:0 auto 1.1rem;max-width:46ch;font-size:.94rem;line-height:1.55;color:var(--muted)}
.hb-vide-btn{display:inline-block;padding:.75rem 1.5rem;border:2px solid var(--orange);border-radius:999px;
    background:var(--orange);color:#fff;font-weight:700;text-decoration:none;transition:.15s}
.hb-vide-btn:hover,.hb-vide-btn:focus-visible{background:#fff;color:var(--orange)}

/* ============================================================
   LISTE DES AVIS : filtres, pagination
   ============================================================ */
.rv-tete{margin-bottom:1.1rem}
.rv-filtres{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;
    margin:0 0 1.6rem;padding:1rem;background:var(--bg-soft);
    border:1px solid var(--line);border-radius:14px}
.rv-f{display:flex;flex-direction:column;gap:.25rem;flex:1 1 11rem;min-width:0}
.rv-f > span{font-size:.78rem;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.04em}
.rv-f select{padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;
    font:inherit;font-size:.92rem;background:#fff;max-width:100%}
.rv-f select:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,99,0,.12)}
.rv-f--go{flex:0 0 auto;flex-direction:row;align-items:center;gap:.8rem}
.rv-btn{padding:.55rem 1.2rem;border:2px solid var(--orange);border-radius:10px;
    background:var(--orange);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:.15s}
.rv-btn:hover{background:#fff;color:var(--orange)}
.rv-reset{font-size:.86rem;color:var(--muted);white-space:nowrap}
.rv-reset:hover{color:var(--orange)}
.rv-vide{margin:1.5rem 0;padding:1.2rem;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
.rv-vide a{color:var(--orange);font-weight:600}
.rv-pages{display:flex;align-items:center;justify-content:space-between;gap:1rem;
    margin-top:1.8rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.rv-pages a{color:var(--orange);font-weight:600;text-decoration:none}
.rv-pages a:hover{text-decoration:underline}
.rv-pos{font-size:.86rem;color:var(--muted)}

/* Galerie des photos d'avis : des vignettes qui mènent à l'avis, jamais à une
   visionneuse — on vient ici pour des témoignages, pas pour un diaporama. */
.rv-galerie{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
    grid-template-columns:repeat(auto-fill,minmax(min(11rem,45%),1fr))}
.rv-galerie a{position:relative;display:block;border-radius:12px;overflow:hidden;
    aspect-ratio:4/3;background:var(--bg-soft)}
.rv-galerie img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.rv-galerie a:hover img{transform:scale(1.05)}
/* Le nom du navire est pose SUR la photo, avec un voile : sans lui il devient
   illisible dès que le cliché s'éclaircit. */
.rv-galerie-nav{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .6rem .5rem;
    background:linear-gradient(transparent,rgba(0,0,0,.72));
    color:#fff;font-size:.8rem;font-weight:600;line-height:1.2}

/* La case « avec photos » n'est pas un menu : elle s'aligne sur la ligne des
   selects sans en prendre la hauteur. */
.rv-f--case{flex:0 0 auto;flex-direction:row;align-items:center;gap:.45rem;padding-bottom:.55rem}
.rv-f--case input{width:1.05rem;height:1.05rem;accent-color:var(--orange);cursor:pointer}
.rv-f--case > span{text-transform:none;font-size:.9rem;color:var(--ink);font-weight:600}
/* La pagination est faite de boutons : ils doivent ressembler à des liens. */
.rv-pages button{border:0;background:none;padding:0;font:inherit;
    color:var(--orange);font-weight:600;cursor:pointer}
.rv-pages button:hover{text-decoration:underline}
.rv-reset{border:0;background:none;padding:0;font:inherit;font-size:.86rem;
    color:var(--muted);cursor:pointer;white-space:nowrap}
.rv-reset:hover{color:var(--orange)}

/* Le bouton qui ouvre la redaction est un formulaire (aucune URL creee) :
   il doit se presenter comme le bouton qu'il remplace. */
.hb-ecrire{display:inline-block;margin:0}
.hb-ecrire button{font:inherit;cursor:pointer}

/* Les onglets et la pagination de `/croisieres-celibataires` sont des boutons
   de formulaire (aucune URL créée) : ils doivent se présenter exactement comme
   les liens qu'ils remplacent. */
.solo-onglets{display:flex;flex-wrap:wrap;gap:.5rem}
button.solo-onglet{font:inherit;cursor:pointer}
form.nw-pages button.nw-page{font:inherit;cursor:pointer;background:none}

/* ============================================================
   CARTE D'AVIS
   ============================================================
   L'ORDRE DE LECTURE COMMANDE LA MISE EN PAGE : qui parle, ce qu'il a noté,
   de quoi il parle, ce qu'il dit, ce qu'il a vu, et l'invitation à lire.
   Ce n'est plus un lien qui englobe tout : un `<a>` autour de la carte
   interdisait d'y mettre le moindre élément cliquable — donc ni aperçu de
   photo, ni appel à lire. */
.rv-card{display:flex;flex-direction:column;gap:.55rem;height:100%;
    padding:1.1rem;background:#fff;border:1px solid var(--line);border-radius:14px;
    transition:border-color .15s,box-shadow .15s}
.rv-card:hover{border-color:#cfd2da;box-shadow:0 6px 20px rgba(0,0,0,.06)}

.rv-card-tete{display:flex;align-items:center;gap:.6rem}
.pf-mini--sm{width:40px;height:40px;font-size:.95rem;flex:none}
.rv-card-qui{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rv-card-nom{font-weight:700;font-size:.92rem;color:var(--ink);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-card-date{font-size:.78rem;color:var(--muted)}
.rv-card-note{margin-left:auto;flex:none}

/* LE LOGO PASSE DE 34 À 56 px : en dessous il était illisible, donc il ne
   servait ni à reconnaître la marque ni à décorer — il faisait du bruit. */
.rv-navire{display:flex;align-items:center;gap:.5rem;margin:0;
    padding:.4rem .6rem;background:var(--bg-soft);border-radius:9px;
    font-size:.88rem;font-weight:700;color:var(--ink)}
.rv-logo{width:56px;height:32px;object-fit:contain;flex:none}

.rv-card-titre{margin:0;font-family:var(--font-head);font-weight:800;font-size:1.02rem;line-height:1.3}
.rv-card-titre a{color:var(--ink);text-decoration:none}
.rv-card-titre a:hover{color:var(--orange)}
.rv-card-txt{margin:0;font-size:.9rem;line-height:1.55;color:#3a3a42}

.rv-card-photos{list-style:none;display:flex;gap:.35rem;margin:0;padding:0}
.rv-card-photos li{width:72px;height:54px;border-radius:8px;overflow:hidden;flex:none;
    background:var(--bg-soft)}
.rv-card-photos img{width:100%;height:100%;object-fit:cover;display:block}
.rv-card-plus{display:grid;place-items:center;font-size:.85rem;font-weight:700;
    color:var(--muted);border:1px dashed var(--line)}

/* L'APPEL À LIRE EST EXPLICITE ET RESSEMBLE À UN LIEN. Rien ne disait qu'on
   pouvait ouvrir l'avis en entier : la carte était cliquable en silence. La
   flèche avance au survol, ce qui confirme la direction. */
.rv-card-lire{margin:auto 0 0;padding-top:.3rem}
.rv-card-lire a{display:inline-flex;align-items:center;gap:.4rem;
    color:var(--orange);font-weight:700;font-size:.9rem;text-decoration:none}
.rv-card-lire a:hover{text-decoration:underline}
.rv-card-lire i{transition:transform .15s}
.rv-card-lire a:hover i{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.rv-card-lire i{transition:none}}

/* ---------------------------------------------------------------------------
   GALERIE COMPLÈTE D'UN NAVIRE — `/bateaux/{slug}/photos`
   ---------------------------------------------------------------------------
   GROUPÉE PAR RUBRIQUE, PAS EN VRAC. Un mur de 24 vignettes sans titre ne dit
   pas ce qu'on regarde ; « Les cabines », « Restaurants et bars » le disent, et
   ce sont les mots qu'on cherche.
   --------------------------------------------------------------------------- */
.gal-bloc{margin:2.4rem 0 0}
.gal-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.6rem;margin:0 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.gal-tete h2{margin:0;font-size:1.25rem}
/* Le compte est dans le titre, en gris : il dit combien on va voir avant de
   faire défiler, ce qu'un titre seul ne dit pas. */
.gal-tete h2 span{margin-left:.5rem;font-family:var(--font-body);font-size:.85rem;
  font-weight:600;color:var(--muted)}
.gal-tete a{font-family:var(--font-head);font-weight:700;font-size:.88rem;
  color:var(--orange);text-decoration:none;white-space:nowrap}
.gal-tete a:hover{text-decoration:underline}

.gal-grille{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}
.gal-grille li{margin:0}
/* LE CADRE EST POSÉ D'AVANCE, et c'est ce qui rend `loading="lazy"` sûr : sans
   `aspect-ratio` l'image mesure 0 px tant qu'elle n'est pas chargée, donc elle
   n'est jamais « proche du viewport » et ne se charge jamais. Le piège a coûté
   trois fois dans ce projet (logos de compagnies, galeries de hub, cartes). */
.gal-grille img{width:100%;aspect-ratio:802/622;object-fit:cover;display:block;
  border-radius:10px;background:var(--bg-soft)}

/* ---------------------------------------------------------------------------
   BLOCS DYNAMIQUES DES RUBRIQUES D'ESCALE
   ---------------------------------------------------------------------------
   Ils sont insérés AU MILIEU d'un texte rédigé, par un jeton. Leur mise en page
   doit donc se poser comme une section du corps, pas comme un encart rapporté :
   même largeur, même rythme vertical que les paragraphes qui les entourent.
   --------------------------------------------------------------------------- */
.exc-tabs{margin:2rem 0}
.exc-tabs > h2{margin:0 0 .4rem}
.exc-barre{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.2rem;
  border-bottom:2px solid var(--line);padding-bottom:0}
.exc-onglet{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1rem;
  border:0;background:none;cursor:pointer;font-family:var(--font-head);font-weight:700;
  font-size:.92rem;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px}
.exc-onglet:hover{color:var(--ink)}
/* L'ONGLET ACTIF SE MARQUE PAR UN FILET, PAS PAR UN FOND PLEIN : le plein est
   réservé aux actions, et ces onglets ne font que montrer, ils n'engagent rien. */
.exc-onglet.is-active{color:var(--orange);border-bottom-color:var(--orange)}
.exc-onglet span{background:var(--bg-soft);border-radius:99px;padding:.05rem .45rem;
  font-size:.78rem;color:var(--muted)}
.exc-onglet.is-active span{background:var(--orange);color:#fff}
/* SANS JAVASCRIPT, LE PREMIER PANNEAU RESTE VISIBLE : on perd les onglets, pas
   l'information. C'est pour ça que `is-active` est posé côté serveur. */
.exc-panneau{display:none}
.exc-panneau.is-active{display:block}

.exc-grille{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr))}
.exc-carte{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
/* Cadre posé d'avance : `lazy` sur une image sans hauteur ne se déclenche jamais. */
.exc-photo{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-soft)}
.exc-corps{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.exc-type{align-self:flex-start;background:var(--orange-050,#fff3ec);color:#a33f00;
  border-radius:6px;padding:.1rem .5rem;font-size:.72rem;font-weight:700}
.exc-carte h3{margin:0;font-size:1.05rem}
.exc-local{margin:0;color:var(--muted);font-size:.85rem;font-style:italic}
.exc-desc{font-size:.92rem;line-height:1.55}
.exc-bloc{font-size:.88rem;line-height:1.5}
.exc-bloc-k{display:block;font-family:var(--font-head);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.1rem}
.exc-bloc ul{margin:.2rem 0;padding-left:1.1rem}
.exc-meta{list-style:none;margin:auto 0 0;padding:.6rem 0 0;border-top:1px solid var(--line-2,#f1f1f4);
  display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;color:var(--muted)}
.exc-meta i{width:1rem;text-align:center;color:var(--orange);opacity:.8}
.exc-lien{margin-top:.5rem;font-weight:700;font-size:.85rem;color:var(--orange);text-decoration:none}
.exc-lien:hover{text-decoration:underline}

/* Les navires qui font escale */
.ec-bloc{margin:2rem 0}
.ec-tableau{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.ec-tableau table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:32rem}
.ec-tableau th{background:var(--bg-soft);font-family:var(--font-head);font-size:.75rem;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:.6rem .8rem}
.ec-tableau td{padding:.55rem .8rem;border-top:1px solid var(--line-2,#f1f1f4)}
.ec-tableau .ec-n{text-align:right;font-variant-numeric:tabular-nums}
.ec-note{margin:.6rem 0 0;font-size:.82rem;color:var(--muted)}

/* Avis d'escale */
.av-moy{font-family:var(--font-head);font-size:1.1rem;margin:0 0 .8rem}
.av-liste{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.av-liste li{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;background:#fff}
.av-t{margin:0 0 .3rem}
.av-t span{font-weight:400;color:var(--muted);font-size:.82rem}
.av-vide{border:1px dashed var(--line);border-radius:14px;padding:1.4rem;text-align:center;background:var(--bg-soft)}
.av-cta{display:inline-block;margin-top:.6rem;padding:.55rem 1.1rem;border-radius:10px;
  background:var(--orange);border:2px solid var(--orange);color:#fff;font-family:var(--font-head);
  font-weight:700;text-decoration:none}
.av-cta:hover{background:#fff;color:var(--orange)}

/* Une PROMO se distingue d'un service inclus : la première fait décider, le
   second rassure. L'icône prend la couleur, pas le fond — un aplat orange sur
   une carte qui en porte déjà un (le prix) se disputerait l'attention. */
.cc-perks li.is-promo{font-weight:700;color:var(--ink)}
.cc-perks li.is-promo i{color:var(--orange)}


/* ---------- Texte écrit par un membre ------------------------------ */
/* UNE CLASSE SUR LE CONTENEUR, PAS UNE LISTE DE SÉLECTEURS. `texte_html()`
   produit des `<p>` et des listes : sans habillage, ils prennent la marge par
   défaut du navigateur (1 em) et décollent le premier paragraphe de son cadre.
   Énumérer les huit conteneurs marcherait aujourd'hui et serait faux au
   neuvième ; la classe dit ce que le bloc contient et voyage avec lui. */
.txt-membre > p { margin: 0 0 .7em; }
.txt-membre > p:last-child { margin-bottom: 0; }
.txt-membre > ul,
.txt-membre > ol { margin: 0 0 .7em; padding-left: 1.3rem; }
.txt-membre > ul:last-child,
.txt-membre > ol:last-child { margin-bottom: 0; }
.txt-membre li { margin: .15em 0; }
/* Un mot très long collé depuis un mobile ne doit pas élargir la carte. */
.txt-membre { overflow-wrap: anywhere; }


/* ---------- Éditeur de texte des membres ---------------------------- */
/* Le `<textarea>` reste dans le DOM : c'est LUI qui porte le `name` et qui est
   posté. On le masque sans le retirer — un `display:none` suffit, il n'a plus
   ni focus ni rôle. */
.ed-source { display: none !important; }

.ed { border: 1px solid var(--line, #dfe3ea); border-radius: 12px; overflow: visible;
      background: #fff; position: relative; }
.ed:focus-within { border-color: var(--orange, #ff6300); }

.ed-barre.ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--line-2, #eceef2);
      padding: .35rem .5rem; border-radius: 12px 12px 0 0; background: #fbfbfc; }
.ed .ql-container.ql-snow { border: 0; font-family: inherit; font-size: 1rem; }
.ed .ql-editor { min-height: 11rem; line-height: 1.6; padding: .85rem 1rem; }
.ed .ql-editor.ql-blank::before { font-style: normal; color: #9aa1ad; left: 1rem; right: 1rem; }
/* Les listes de Quill s'appuient sur ses propres classes ; on ne les habille pas
   à la main, on laisse sa feuille faire, et on aligne seulement les marges. */
.ed .ql-editor p { margin: 0 0 .6em; }
.ed .ql-editor p:last-child { margin-bottom: 0; }

/* La barre reprend l'orange de la charte pour l'état actif, jamais un bleu. */
.ed .ql-snow .ql-stroke { stroke: #4a5261; }
.ed .ql-snow .ql-fill { fill: #4a5261; }
.ed .ql-snow button:hover .ql-stroke,
.ed .ql-snow button.ql-active .ql-stroke { stroke: var(--orange, #ff6300); }
.ed .ql-snow button:hover .ql-fill,
.ed .ql-snow button.ql-active .ql-fill { fill: var(--orange, #ff6300); }

.ed-emoji-btn { border: 0; background: none; cursor: pointer; font-size: 1.05rem;
      line-height: 1; padding: 0 .35rem; border-radius: 6px; }
.ed-emoji-btn:hover { background: #f1f2f5; }

.ed-emoji-panneau { position: absolute; z-index: 30; top: 2.6rem; left: .5rem;
      width: min(19rem, calc(100% - 1rem)); padding: .45rem;
      display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem;
      background: #fff; border: 1px solid var(--line, #dfe3ea); border-radius: 10px;
      box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.ed-emoji-panneau[hidden] { display: none; }
.ed-emoji-panneau button { border: 0; background: none; cursor: pointer;
      font-size: 1.15rem; line-height: 1; padding: .3rem 0; border-radius: 6px; }
.ed-emoji-panneau button:hover { background: #f1f2f5; }

/* ---------- Photo jointe à un commentaire --------------------------- */
/* MÊME BOUTON QUE LE COMPOSEUR : deux façons de joindre une photo à deux
   endroits du site finiraient par diverger, et un champ de fichier brut n'a pas
   la même allure d'un navigateur à l'autre. */
.cp-joindre { display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .5rem;
      padding:.3rem .65rem; border:1px solid var(--line); border-radius:9px;
      font-size:.85rem; color:var(--body); cursor:pointer; }
.cp-joindre:hover { border-color:var(--orange); color:var(--orange); }
/* Le champ est masqué par l'attribut `hidden` ; la règle reste au cas où il
   serait rendu sans, pour ne pas laisser apparaître deux commandes. */
.cp-joindre input[type=file] { display:none; }
/* Le cadre est posé d'avance : sans lui, une image en `lazy` mesure 0 px de
   haut tant qu'elle n'est pas chargée, donc n'est jamais « proche du viewport »
   et ne se charge jamais. Le piège a déjà coûté les logos de compagnies. */
.comment__photo { display:block; margin-top:.5rem; max-width:18rem; aspect-ratio:4/3;
      border-radius:10px; overflow:hidden; background:#f1f2f5; }
.comment__photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- L'éditeur dans un conteneur flex ------------------------ */
/* `.pc-haut` est en flex, et un élément flex ne s'étire pas tout seul : le
   `<textarea>` d'origine portait `flex:1 1 auto`, l'enveloppe de l'éditeur qui
   l'a remplacé ne l'avait pas. Mesuré : 158 px de large sur 513 disponibles.
   `min-width:0` est indispensable, sinon un élément flex refuse de descendre
   sous la largeur de son contenu et déborde à la première photo collée. */
.ed { flex: 1 1 auto; min-width: 0; }

/* ---------- Erreur sous le champ ------------------------------------ */
/* EN ROUGE ET SOUS LE CHAMP FAUTIF, pas dans un bandeau en haut de page : un
   bandeau dit ce qui ne va pas sans dire où, et sur un formulaire de quinze
   champs il oblige à tout relire. */
.champ-err { display: flex; align-items: flex-start; gap: .4rem;
      margin: .35rem 0 .6rem; font-size: .86rem; font-weight: 600; color: #c0392b; }
.champ-err i { margin-top: .12em; }
.is-erreur,
.ed.is-erreur { border-color: #c0392b !important; box-shadow: 0 0 0 3px rgba(192,57,43,.10); }

/* ---------- Aperçus de photos avant envoi --------------------------- */
.apercus { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.apercus[hidden] { display: none; }
.apercu { position: relative; width: 92px; height: 70px; border-radius: 10px;
      overflow: hidden; background: #f1f2f5; border: 1px solid var(--line-2, #eceef2); }
.apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apercu-nom { position: absolute; left: 0; right: 0; bottom: 0; padding: .1rem .3rem;
      font-size: .68rem; color: #fff; background: rgba(0,0,0,.55);
      font-variant-numeric: tabular-nums; }
/* La croix fait 24 px : elle EFFACE, elle ne doit pas se toucher par erreur en
   faisant défiler, mais elle doit rester atteignable au pouce. */
.apercu-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px;
      border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
      font-size: 1rem; line-height: 1; cursor: pointer; padding: 0; }
.apercu-x:hover { background: #c0392b; }
.apercu-trop { width: 100%; margin: .2rem 0 0; font-size: .8rem; color: #a34b00; }
.pc-apercus:not([hidden]) { display: flex; }

/* ---------- « J'aime » sur un commentaire --------------------------- */
/* Le bouton vit dans un `<form>` : on neutralise l'apparence de bouton natif
   pour qu'il se fonde dans la rangée d'actions, sans la casser. */
.comment__actions form { display: inline; }
.c-act--aime { appearance: none; background: none; border: 0; font: inherit;
      display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.c-act--aime.is-aime,
.c-act--aime.is-aime:hover { color: #c0392b; }
.c-act--aime:hover { color: #c0392b; }
.c-aime-n { font-variant-numeric: tabular-nums; }

/* L aide du selecteur de traversee : elle dit ce que le bouton ouvre. */
.mu-picker-aide { margin: -.35rem 0 1rem; font-size: .92rem; color: var(--muted, #5b6473); }

/* ==========================================================================
   LA PAGE D'UNE RENCONTRE À BORD
   ==========================================================================
   Transposée des évènements Facebook : la date en tête et en couleur, un titre
   qui porte, une rangée d'actions au même endroit, les détails en liste. Ce
   qu'on ne reprend pas : la carte géographique, sans objet à bord.
   ========================================================================== */

.rc-hero { position: relative; padding: 2.2rem 0 1.6rem; color: #fff;
      background: #16161a center/cover no-repeat; }
/* LA PHOTO DU NAVIRE EST LE FOND, avec un voile : sans lui le texte blanc
   devient illisible dès que la coque s'éclaircit. Dense à gauche où le texte se
   pose, plus léger à droite pour laisser voir le navire. */
.rc-hero::before { content: ""; position: absolute; inset: 0; background: var(--rc-photo) center/cover no-repeat; }
.rc-hero::after  { content: ""; position: absolute; inset: 0;
      background: linear-gradient(100deg, rgba(10,10,14,.93) 0%, rgba(10,10,14,.86) 45%, rgba(10,10,14,.55) 100%); }
.rc-hero--nu::before { background: linear-gradient(120deg, #1d2233, #3a2a45); }
.rc-hero-in { position: relative; z-index: 1; }
/* `theme.css` impose `h1{color:var(--ink)}` : sur fond sombre il faut le
   remettre, piège documenté du §5 et rencontré quatre fois. */
.rc-hero h1 { color: #fff; margin: .2rem 0 .5rem; font-size: clamp(1.5rem, 3.4vw, 2.2rem); text-wrap: balance; }
.rc-hero .breadcrumb, .rc-hero .breadcrumb a, .rc-hero .breadcrumb .active { color: rgba(255,255,255,.82); }

/* La date en tête et en couleur : c'est la première chose qu'on lit sur un
   évènement, avant même le titre. */
.rc-quand { margin: 0; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
      color: #ffb27a; text-transform: none; }
.rc-sous { margin: 0; color: rgba(255,255,255,.88); font-size: .96rem; }
.rc-sous strong { color: #fff; }
.rc-cat { display: inline-block; margin-right: .4rem; padding: .12rem .55rem; border-radius: 999px;
      background: rgba(255,255,255,.16); font-size: .82rem; font-weight: 700; }
.rc-annule { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .6rem;
      padding: .3rem .7rem; border-radius: 999px; background: #c0392b; color: #fff;
      font-weight: 700; font-size: .88rem; }

/* ---- La rangée d'actions ---- */
.rc-actions-bar { padding: .9rem 0; border-bottom: 1px solid var(--line-2, #eceef2); }
.rc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.rc-actions form { display: inline; }
.rc-actions .pf-btn { display: inline-flex; align-items: center; gap: .4rem; }
.rc-actions .is-fige { opacity: .65; cursor: default; }
/* LES ACTIONS SECONDAIRES PASSENT À DROITE, comme la référence : à gauche ce
   qu'on fait (Intéressé·e, OK), à droite ce qu'on partage. Et 44 px de cible
   tactile partout — les boutons mesuraient 42. */
.rc-actions .pf-btn { min-height: 44px; }
.rc-partager { margin-left: auto; }
@media (max-width: 620px) {
  /* Sur téléphone les DEUX gestes principaux se partagent la largeur, à pleine
     main ; Partager et « ⋯ » restent des icônes compactes en bout de rangée. */
  .rc-actions { gap: .5rem; }
  .rc-actions form, .rc-actions > .pf-btn, .rc-actions > a.pf-btn { flex: 1 1 8rem; display: block; }
  .rc-actions form .pf-btn, .rc-actions > .pf-btn, .rc-actions > a.pf-btn {
    width: 100%; justify-content: center; }
  .rc-partager, .rc-plus, .rc-inviter { flex: 0 0 auto; }
  /* `section.rc-hero` (0-2-1) : la règle de base `.rc-page .rc-hero`
     (0-2-0) est déclarée PLUS BAS et gagnerait sinon — même piège que le
     bloc juste en dessous. */
  .rc-page section.rc-hero, .mu-visiteur section.rc-hero { padding: 1.3rem 1.1rem 1.1rem; }
  /* `.rc-page .rc-bloc` (0-2-0) et non `.rc-bloc` nu : la règle de base est
     déclarée PLUS BAS dans le fichier et gagnerait à spécificité égale —
     le piège du §5, encore. */
  .rc-page .rc-bloc, .mu-visiteur .rc-bloc { padding: 1.1rem 1rem; }
}
.rc-actions-mort { margin: 0; color: #c0392b; font-weight: 600; }

/* Les menus déroulants (partager, plus d'options, inviter). Un `<details>`
   plutôt qu'un composant JavaScript : il s'ouvre au clavier et sans script. */
.rc-partager, .rc-plus, .rc-inviter { position: relative; }
.rc-partager > summary, .rc-plus > summary, .rc-inviter > summary { list-style: none; cursor: pointer; }
.rc-partager > summary::-webkit-details-marker,
.rc-plus > summary::-webkit-details-marker,
.rc-inviter > summary::-webkit-details-marker { display: none; }
.rc-menu, .rc-inviter-panneau { position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0;
      width: min(24rem, 92vw); padding: .7rem; background: #fff;
      border: 1px solid var(--line, #dfe3ea); border-radius: 12px;
      box-shadow: 0 14px 34px rgba(0,0,0,.14); }
.rc-menu a, .rc-menu button { display: flex; align-items: center; gap: .55rem; width: 100%;
      padding: .5rem .55rem; border: 0; border-radius: 8px; background: none;
      font: inherit; color: var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.rc-menu a:hover, .rc-menu button:hover { background: #f4f5f7; color: var(--orange); }
.rc-menu .rc-danger { color: #c0392b; }
.rc-menu-titre, .rc-inviter-titre { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted, #5b6473); }
.rc-lien { width: 100%; margin-bottom: .5rem; padding: .45rem .55rem; font-size: .82rem;
      border: 1px solid var(--line-2, #eceef2); border-radius: 8px; background: #fafafb; }

.rc-inviter-liste { list-style: none; margin: 0 0 .6rem; padding: 0; max-height: 15rem; overflow-y: auto; }
.rc-inviter-liste label { display: flex; align-items: center; gap: .5rem; padding: .3rem .2rem; cursor: pointer; }
.rc-inviter-liste img, .rc-init { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.rc-init { display: inline-flex; align-items: center; justify-content: center;
      background: #1c1c22; color: #fff; font-weight: 700; font-size: .8rem; }

/* ---- Le corps ---- */
.rc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.4rem; padding: 1.4rem 0 2.5rem; }
@media (max-width: 900px) { .rc-grille { grid-template-columns: 1fr; } }
.rc-bloc { background: #fff; border: 1px solid var(--line, #dfe3ea); border-radius: 14px;
      padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; }
.rc-bloc h2 { margin: 0 0 .8rem; font-size: 1.12rem; }
.rc-sous-titre { margin: .9rem 0 .5rem; font-size: .88rem; color: var(--muted, #5b6473); text-transform: uppercase; letter-spacing: .04em; }
.rc-sous-titre span { color: var(--orange); }

.rc-details { list-style: none; margin: 0 0 1rem; padding: 0; }
.rc-details li { display: flex; gap: .7rem; padding: .42rem 0; font-size: .95rem; line-height: 1.5; }
.rc-details i { width: 1.1rem; margin-top: .2em; color: var(--muted, #5b6473); flex: 0 0 auto; }
.rc-texte { margin-top: .4rem; }
.rc-mention { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line-2, #eceef2);
      font-size: .82rem; color: var(--muted, #5b6473); }

.rc-gens { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.rc-gens a { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .6rem .25rem .25rem;
      border: 1px solid var(--line-2, #eceef2); border-radius: 999px; text-decoration: none; color: var(--body); }
.rc-gens a:hover { border-color: var(--orange); color: var(--orange); }
.rc-gens img, .rc-gens .rc-init { width: 32px; height: 32px; }
.rc-nom { font-size: .88rem; font-weight: 600; }

.rc-trav-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: .7rem; }
.rc-trav-nav { margin: 0 0 .2rem; font-size: 1rem; }
.rc-trav-nav span { display: block; font-size: .85rem; color: var(--muted, #5b6473); font-weight: 400; }
.rc-trav-date { margin: 0 0 .8rem; font-size: .88rem; color: var(--muted, #5b6473); }

/* ===========================================================================
   LA LISTE DES RENCONTRES À BORD (`/rencontres`)
   ---------------------------------------------------------------------------
   DEUX PAGES ET NON UNE : celle-ci MONTRE, `/rencontres/proposer` fait publier.
   Le sélecteur de traversée n'a jamais eu de sens que pour publier, et tant
   qu'il barrait l'entrée on ne voyait rien avant d'avoir déclaré son départ.

   LES CARTES SONT EN PHOTO DE NAVIRE, choix du user. Une grille de rectangles
   de texte ne donne envie d'ouvrir aucune de ses cases ; un paquebot dit en une
   image de quel voyage on parle.
   =========================================================================== */

/* LA LISTE ET « PROPOSER » VIVENT DANS L'ESPACE MEMBRE (demande du user,
   captures Facebook Évènements) : barre latérale + colonne de contenu, pas de
   héros. `.mu-visiteur` est le même cadre pour un visiteur, sans la barre.
   (Pas `.mu-invite` : la classe existe déjà, c'est l'encart d'inscription du
   salon — la réutiliser lui aurait appliqué ces règles en silence.) */
.mu-visiteur{max-width:980px;margin:0 auto}
.mu-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
  gap:.9rem 1.2rem;margin:0 0 1.4rem}
.mu-tete > div{flex:1 1 26rem;min-width:0}
.mu-tete .pf-btn{flex:0 0 auto}
.mu-total{font-size:.92rem;margin:0 0 .9rem}

/* La page d'une rencontre dans la colonne du compte : le bandeau photo devient
   une bannière arrondie (le détail d'un évènement de la référence), et les
   `.cp-wrap` internes, taillés pour une page pleine largeur, s'effacent. */
.rc-page .rc-hero{border-radius:14px;overflow:hidden;padding:1.8rem 1.5rem 1.4rem}
.rc-page .cp-wrap{max-width:none;padding-left:0;padding-right:0}
.rc-page .rc-actions-bar{padding-left:.2rem;padding-right:.2rem}
/* Le seuil de repli est plus haut qu'en pleine page : la colonne du compte est
   plus étroite que la fenêtre, l'encart de droite y étranglerait le contenu. */
@media (max-width:1200px){.rc-page .rc-grille{grid-template-columns:1fr}}

/* Le bandeau du salon d'une traversée, même famille que celui d'une rencontre :
   sombre, arrondi, dans la colonne. */
.mu-salon-tete{padding:1.8rem 1.5rem 1.4rem;border-radius:14px}
.mu-salon-tete h1{color:#fff;margin:.2rem 0 .8rem;font-size:clamp(1.4rem,3vw,1.9rem);text-wrap:balance}
.mu-salon-corps{padding-top:1.4rem}

/* --- le formulaire complet de « proposer » : deux blocs numérotés (la
       traversée, le rendez-vous), les erreurs sous leur champ. Le `<fieldset>`
       est le bon élément — un lecteur d'écran annonce la légende avec chaque
       champ du bloc.

       LE RYTHME VERTICAL EST POSÉ PAR LE BLOC, PAS PAR CHAQUE CHAMP : les
       `.mu-champ` empilés hors grille n'avaient AUCUNE marge entre eux, donc le
       label suivant collait à l'input précédent (signalé par le user). Une
       marge par champ se serait dédoublée contre le `gap` des grilles ; la
       règle `> * + *` donne un seul écart, partout, y compris entre une grille
       et le champ qui la suit. */
.mu-former{display:flex;flex-direction:column;gap:1.3rem}
.mu-bloc{border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);
  padding:1.5rem 1.6rem 1.6rem;margin:0}
.mu-bloc legend{float:left;width:100%;font-size:1.12rem;font-weight:700;
  margin:0;padding:0;display:flex;align-items:center;gap:.6rem}
.mu-bloc legend + *{clear:both}
.mu-bloc > * + *{margin-top:1.35rem}
/* Le numéro d'étape en pastille : c'est un vrai ordre (on désigne sa traversée
   AVANT de décrire son rendez-vous), pas une décoration. */
.mu-etape-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:50%;background:var(--orange);color:#fff;
  font-size:.95rem;font-weight:700;font-variant-numeric:tabular-nums}
.mu-fac{font-weight:400;color:var(--muted,#6b7280);font-size:.85em}
/* L'astérisque des obligatoires : l'orange de la charte, jamais un rouge —
   le rouge est réservé à l'erreur, un champ pas encore rempli n'en est pas une. */
.mu-oblig{color:var(--orange);font-weight:700}
.mu-oblig-note{margin:0 0 .2rem;font-size:.85rem;color:var(--muted,#6b7280)}
.mu-aide{margin:.3rem 0 0;font-size:.83rem;color:var(--muted,#6b7280)}
.mu-champ--court{max-width:16rem}
.mu-publier{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.mu-publier .mu-avert{margin:0}
.mu-publier .pf-btn{font-size:1.05rem;padding:.75rem 1.6rem}

/* --- finitions des champs, pour toute la feature. Les entrées de date et
       d'heure rendent plus basses que les textes selon le navigateur : une
       hauteur plancher aligne toute la rangée. Le survol prépare le focus, et
       le label s'allume avec SON champ — on sait toujours où l'on écrit. */
.mu-champ input,.mu-champ select,.mu-champ textarea{min-height:2.8rem;
  transition:border-color .12s ease}
.mu-champ input:hover:not(:disabled),.mu-champ select:hover:not(:disabled),
.mu-champ textarea:hover{border-color:#b9bdc7}
.mu-champ:focus-within > label{color:var(--orange)}
.mu-champ textarea{resize:vertical;min-height:6.5rem}
/* L'intérieur du pli « je ne trouve pas mon départ » : mêmes marges partout,
   et le premier élément se colle au résumé — c'est sa suite, pas une section. */
.mu-libre > :not(summary){margin:1.05rem 1.1rem 0}
.mu-libre > summary + *{margin-top:.15rem}
.mu-libre > :last-child{margin-bottom:1.2rem}

/* --- tablette et téléphone : le confort ne se négocie pas sur la feature
       phare. Les blocs respirent moins large, le bouton se prend à pleine
       main, et le champ court reprend toute la largeur — un plafond de 16 rem
       n'a de sens qu'à côté d'un voisin. */
@media (max-width:820px){
  .mu-bloc{padding:1.15rem 1rem 1.2rem}
  .mu-libre > :not(summary){margin-left:.8rem;margin-right:.8rem}
}
@media (max-width:620px){
  .mu-tete .pf-btn{width:100%;justify-content:center}
  .mu-champ--court{max-width:none}
  .mu-publier{align-items:stretch}
  .mu-publier .pf-btn{width:100%;justify-content:center}
}

.mu-liste{margin:2rem 0 2.6rem}

/* --- la recherche : un `<form method="get">`, donc une navigation qui se
       partage et revient avec le bouton « précédent ». */
/* La barre d'outils : recherche à gauche, tri à droite, une seule ligne sur
   grand écran. Sur téléphone le tri passe dessous, et le bouton de recherche
   devient icône seule — son libellé est déjà dans le placeholder. */
.mu-outils{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;margin:0 0 .9rem}
.mu-outils .mu-recherche{flex:1 1 24rem;margin:0}
/* `0 1 auto` + `min-width:0`, PAS `0 0 auto` : figé, le tri mesurait 432 px
   incompressibles et faisait déborder toute la page de 69 px sur téléphone.
   Il peut rétrécir, et ses liens savent déjà passer à la ligne. */
.mu-outils .mu-tris{flex:0 1 auto;min-width:0;margin:0}
.mu-recherche{display:flex;gap:.5rem;margin:0 0 1rem}
.mu-recherche input[type=search]{flex:1 1 auto;min-width:0;padding:.62rem .9rem;
  border:1px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.mu-recherche input[type=search]:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.mu-recherche button{display:inline-flex;align-items:center;gap:.45rem;padding:.62rem 1.05rem;
  border:2px solid var(--orange);border-radius:10px;background:var(--orange);color:#fff;
  font:inherit;font-weight:600;cursor:pointer}
/* Charte du §5 : le survol s'exprime par l'INVERSION, jamais par un orange plus foncé. */
.mu-recherche button:hover{background:#fff;color:var(--orange)}

/* --- le rail de catégories. IL SE REPLIE EN LIGNES SUR GRAND ÉCRAN : la
       version à défilement horizontal cachait 557 px de pastilles sur desktop,
       où rien ne signale qu'on peut faire glisser — les deux tiers des
       catégories étaient introuvables. Neuf pastilles font deux lignes, c'est
       un coût honnête. Le défilement ne reste que sur téléphone, où le geste
       est naturel et où deux lignes coûteraient trop cher en hauteur. */
.mu-rail{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0 0 .9rem}
@media (max-width:620px){
  .mu-rail{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin}
}
.mu-rail a,.mu-rail .is-vide{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap;
  padding:.45rem .85rem;border:1px solid var(--line);border-radius:999px;
  font-size:.9rem;color:var(--ink);text-decoration:none;background:#fff}
.mu-rail a:hover{border-color:var(--orange);color:var(--orange)}
.mu-rail a.is-active{background:var(--orange);border-color:var(--orange);color:#fff}
.mu-rail a.is-active i{color:#fff}
.mu-rail i{color:var(--orange)}
.mu-rail span{font-variant-numeric:tabular-nums;opacity:.6;font-size:.85em}
/* Une catégorie sans rendez-vous reste VISIBLE : la masquer ferait croire qu'on
   ne peut pas proposer d'excursion à l'escale. C'est un `<span>` et non un
   bouton désactivé, qui ne serait pas focusable. */
.mu-rail .is-vide{opacity:.45;cursor:default}
.mu-rail .is-vide i{color:var(--muted,#6b7280)}

.mu-tris{display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 1.3rem;font-size:.92rem}
.mu-tris a{color:var(--muted,#6b7280);text-decoration:none;padding-bottom:2px;
  border-bottom:2px solid transparent}
.mu-tris a:hover{color:var(--ink)}
.mu-tris a.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--orange)}
.mu-tris-raz{margin-left:auto;text-decoration:underline!important;text-underline-offset:3px}

/* --- la grille --- */
.mu-grid{display:grid;gap:1.1rem;
  /* 15 rem de plancher : 3 cartes de front dans la colonne du compte, 2 sur
     tablette a cote de la barre — la densite de la reference. A 19 rem, la
     tablette retombait a une seule colonne. */
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}

.mv{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:box-shadow .15s,border-color .15s}
.mv:hover{border-color:var(--orange);box-shadow:0 6px 22px rgba(0,0,0,.07)}

/* LE CADRE EST POSÉ D'AVANCE (`aspect-ratio`) et c'est ce qui rend `lazy` sûr :
   sans cadre, l'image mesure 0 px de haut, n'est donc jamais « proche du
   viewport » et ne se charge jamais. Le piège est revenu trois fois. */
.mv-photo{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-soft);
  overflow:hidden}
.mv-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* Sans navire au référentiel (traversée saisie librement), la carte reste
   entière : un dégradé de la charte remplace la photo. */
.mv-photo--nu{background:linear-gradient(135deg,#2b2b32,#16161a 60%,var(--orange) 190%)}
.mv-cat{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:.78rem;font-weight:600;
  padding:.3rem .65rem;border-radius:999px}
.mv-cat i{color:var(--orange)}

.mv-corps{display:flex;flex-direction:column;gap:.4rem;padding:.95rem 1rem 1rem;flex:1}
/* La date en tête et en couleur, comme sur une page d'évènement : c'est le
   premier critère de tri de l'œil, « est-ce que je suis là ce jour-là ». */
.mv-quand{margin:0;font-size:.84rem;font-weight:700;color:var(--orange);
  text-transform:uppercase;letter-spacing:.03em}
.mv-titre{margin:0;font-size:1.05rem;line-height:1.35;text-wrap:balance}
.mv-titre a{color:var(--ink);text-decoration:none}
.mv-titre a:hover{color:var(--orange)}
.mv-nav,.mv-lieu{display:flex;gap:.45rem;margin:0;font-size:.88rem;
  color:var(--muted,#6b7280);line-height:1.4}
.mv-nav i,.mv-lieu i{color:var(--orange);margin-top:.18rem;flex:0 0 auto}
.mv-compte{margin:.15rem 0 0;font-size:.88rem;color:var(--ink)}
.mv-compte strong{font-variant-numeric:tabular-nums}
.mv-premier{color:var(--muted,#6b7280);font-style:italic}
/* `margin-top:auto` aligne les pieds de carte d'une même rangée, quel que soit
   le nombre de lignes du titre. */
.mv-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;margin-top:auto;padding-top:.75rem;border-top:1px solid var(--line-2,#f1f1f4)}
.mv-pied form{display:inline}
.mv-mien{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:600;
  color:var(--muted,#6b7280)}
.mv-mien i{color:var(--orange)}
.mv-voir{font-size:.86rem;font-weight:600;color:var(--orange);text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem}
.mv-voir:hover{text-decoration:underline;text-underline-offset:3px}

/* --- état vide : on propose d'agir, et on ne fabrique jamais de faux
       rendez-vous pour meubler. */
.mu-vide{text-align:center;padding:2.4rem 1.2rem;background:var(--bg-soft);
  border:1px dashed var(--line);border-radius:14px}
.mu-vide p{margin:0 0 .5rem;color:var(--muted,#6b7280)}
.mu-vide-titre{font-size:1.08rem;font-weight:600;color:var(--ink)!important}
.mu-vide-cta{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.1rem!important}

.mu-pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:1rem;margin:1.6rem 0 0;font-size:.92rem}
.mu-pages a{color:var(--orange);font-weight:600;text-decoration:none}
.mu-pages a:hover{text-decoration:underline;text-underline-offset:3px}
.mu-pages span{color:var(--muted,#6b7280);font-variant-numeric:tabular-nums}

.mu-comment-cta{margin:1.6rem 0 0;text-align:center}
.mu-libre-aide{margin:0 0 .9rem;font-size:.92rem;color:var(--muted,#6b7280)}
.mu-picker-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

@media (max-width:620px){
  .mu-recherche-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mu-recherche button{padding:.62rem .85rem}
}

/* ===========================================================================
   L'ESPACE MEMBRE SUR SA TOILE — l'audit « clone Facebook » demandé par le user.
   ---------------------------------------------------------------------------
   LA SIGNATURE D'UN RÉSEAU EST SA TOILE GRISE : des cartes blanches qui se
   détachent d'un fond neutre. Chez nous tout était blanc sur blanc, les cartes
   se fondaient. `body:has(...)` cible toutes les pages qui portent la mise en
   page du compte SANS toucher aux quinze contrôleurs ; un navigateur sans
   `:has()` garde le fond blanc, rien ne casse.
   =========================================================================== */
body:has(.account-layout){background:#eef1f4}
body:has(.account-layout) .site-main{background:#eef1f4}
/* Les cartes prennent du relief sur la toile : ombre légère, bordure adoucie. */
.account-layout .po,.account-layout .pc,.account-layout .pf-bloc,
.account-layout .account-side,.account-layout .mv,.account-layout .rc-bloc{
  box-shadow:0 1px 2px rgba(16,24,40,.06);border-color:#e4e7ec}

/* --- le fil : la colonne centrale se cale sur la largeur de lecture de la
       référence (~590 px). Un fil trop large fatigue, des cartes trop larges
       diluent les photos. Le rail droit est collant, comme la colonne de
       contacts — mais borné à la fenêtre, la leçon des barres collantes. */
.cm-fil{max-width:39rem;margin:0 auto;width:100%;min-width:0}
@media (min-width:1181px){
  .cm-cote{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto}
}
.cm-fil > h1{font-size:1.15rem;margin:0 0 .8rem}

/* --- le composeur : l'invitation, pas le formulaire. Avatar rond, champ qui
       se présente comme une bulle — l'éditeur reprend sa taille au focus. */
.pc{border-radius:14px}
.pc .pf-mini{width:40px;height:40px;border-radius:50%}
.pc .pf-mini img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/* --- la rangée d'actions des cartes : deux boutons à parts égales, toute la
       largeur, comme la référence. C'est elle qui provoque le geste. */
.po-pied{display:flex;flex-wrap:wrap;gap:.35rem;align-items:stretch}
.po-pied .po-act{flex:1 1 0;display:flex;margin:0}
.po-pied .po-act .po-btn,.po-pied > a.po-btn{width:100%}
.po-pied > a.po-btn{flex:1 1 0}
.po-comments{flex:1 1 0;display:block}
.po-comments[open]{flex:1 1 100%}
.po-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  width:100%;padding:.5rem .6rem;border:0;border-radius:8px;background:none;
  font:inherit;font-size:.92rem;font-weight:600;color:var(--muted,#6b7280);
  cursor:pointer;text-decoration:none}
.po-btn:hover{background:var(--bg-soft);color:var(--ink)}
.po-btn.is-on{color:var(--orange)}
.po-comments > summary.po-btn{width:100%}
.po-n{font-variant-numeric:tabular-nums;font-weight:700;background:#eef1f4;
  border-radius:999px;padding:.05rem .45rem;font-size:.8rem}
.po-btn.is-on .po-n{background:rgba(255,99,0,.12);color:var(--orange)}

/* --- le rail des rendez-vous --- */
.cm-rdv{list-style:none;margin:0 0 .8rem;padding:0}
.cm-rdv li + li{margin-top:.5rem}
.cm-rdv a{display:block;padding:.55rem .7rem;border:1px solid var(--line-2,#f1f1f4);
  border-radius:10px;text-decoration:none;color:var(--ink)}
.cm-rdv a:hover{border-color:var(--orange)}
.cm-rdv strong{display:block;font-size:.88rem;line-height:1.3}
.cm-rdv span{display:block;font-size:.78rem;color:var(--muted,#6b7280);margin-top:.1rem}
.cm-rdv-cta{display:flex;flex-direction:column;gap:.5rem;margin:0}
.cm-rdv-cta .pf-btn{justify-content:center}
.cm-rdv-tout{font-size:.85rem;text-align:center;color:var(--muted,#6b7280)}
.cm-rdv-tout:hover{color:var(--orange)}

/* --- le composeur replie / en fenetre (fil seulement, pilote par site.js).
       AUCUN deplacement de DOM : une classe transforme le formulaire en
       fenetre centree, le voile se glisse derriere. */
.pc.is-replie{display:none}
.pc-invite{display:flex;align-items:center;gap:.7rem;width:100%;margin-bottom:1.1rem;
  padding:.7rem .9rem;background:#fff;border:1px solid #e4e7ec;border-radius:14px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);cursor:pointer;font:inherit;text-align:left}
.pc-invite .pf-mini{width:40px;height:40px;border-radius:50%;flex:0 0 auto}
.pc-invite .pf-mini img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pc-invite-champ{flex:1 1 auto;min-width:0;padding:.55rem .95rem;border-radius:999px;
  background:#eef1f4;color:var(--muted,#6b7280);font-size:.95rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pc-invite:hover .pc-invite-champ{background:#e6e9ee}
.pc-invite-photo{flex:0 0 auto;display:inline-grid;place-items:center;width:36px;height:36px;
  border-radius:50%;color:var(--orange)}
.pc-invite:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.pc-voile{position:fixed;inset:0;background:rgba(15,18,24,.55);z-index:1000}
.pc.is-fenetre{display:block;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(40rem,94vw);max-height:88vh;overflow-y:auto;z-index:1001;margin:0;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.pc-fermer{display:none;position:absolute;top:.55rem;right:.6rem;width:34px;height:34px;
  border:0;border-radius:50%;background:#eef1f4;color:var(--ink);font-size:1.25rem;
  line-height:1;cursor:pointer;place-items:center}
.pc.is-fenetre .pc-fermer{display:grid}
.pc-fermer:hover{background:#e2e5ea}
.pc.is-fenetre{padding-top:2.6rem}

/* --- les suggestions du rail --- */
.cm-sugg{list-style:none;margin:0;padding:0}
.cm-sugg li{display:flex;align-items:center;gap:.6rem}
.cm-sugg li + li{margin-top:.7rem}
.cm-sugg-qui{display:flex;align-items:center;gap:.55rem;min-width:0;flex:1 1 auto;
  text-decoration:none;color:var(--ink)}
.cm-sugg-qui:hover strong{color:var(--orange)}
.cm-sugg .pf-mini{width:36px;height:36px;border-radius:50%;flex:0 0 auto}
.cm-sugg .pf-mini img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cm-sugg-nom{min-width:0}
.cm-sugg-nom strong{display:block;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sugg-nom small{display:block;color:var(--muted,#6b7280);font-size:.76rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-sugg form{flex:0 0 auto;margin:0}
.cm-suite{text-align:center;margin:1.2rem 0 0}

/* --- les favoris rendent LA carte des resultats ; la bande en dessous porte
       ce qui n'appartient qu'au favori : sa date de peremption et le retrait
       explicite. Collee a la carte (meme bloc visuel), fond doux. */
.fv-grille{margin-bottom:1.4rem}
.fv-vivant{margin-bottom:1.1rem}
.fv-vivant .cruise-card{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
.fv-bande{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.4rem .9rem;padding:.5rem .9rem;background:var(--bg-soft);
  border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px}
.fv-bande .fv-expire{margin:0}
.fv-bande form{margin:0}

/* ===========================================================================
   LA BARRETTE PRODUIT : passe de conversion (demande du user).
   En fin de fichier À DESSEIN : sur cette carte, deux corrections ont déjà
   été perdues par des règles déclarées plus bas — ici, c'est nous le dernier.
   =========================================================================== */
/* 1. LA COLONNE PRIX EST ANCRÉE : un panneau doux la détache du corps, l'œil
      va du produit au prix puis au bouton — le trajet d'une réservation. */
.cc-cta{background:linear-gradient(180deg,#fafbfc,#f4f6f8);border-left:1px solid var(--line-2,#eceef2)}
/* 2. LE SURVOL DIT « CLIQUABLE », comme toutes les cartes du site depuis la
      toile : l'ombre seule ne suffisait pas, le liseré signe l'intention. */
.cruise-card{transition:box-shadow .18s,border-color .18s}
.cruise-card:hover{border-color:var(--orange)}
/* 3. LA MEILLEURE DATE SE VOIT DE LOIN : pastille pleine, pas un simple filet
      — c'est l'argument « à partir de » incarné dans le rail. */
.cc-date.is-min{background:var(--orange);border-color:var(--orange);box-shadow:none}
.cc-date.is-min .cc-date-d,.cc-date.is-min .cc-date-y,.cc-date.is-min .cc-date-p{color:#fff}
.cc-date.is-min:hover{background:#fff}
.cc-date.is-min:hover .cc-date-d,.cc-date.is-min:hover .cc-date-y,.cc-date.is-min:hover .cc-date-p{color:var(--orange)}
/* 4. Le titre respire un cran au-dessus du texte courant. */
.cc-title{font-size:1.12rem;font-weight:700}
/* 5. Les chiffres des pastilles de date s'alignent. */
.cc-date{font-variant-numeric:tabular-nums}
/* 6. Sur la toile grise du compte, la carte garde son relief. */
.account-layout .cruise-card{box-shadow:0 1px 2px rgba(16,24,40,.06)}

/* 7. DANS LA COLONNE DU COMPTE, LA CARTE CROYAIT AVOIR LA PLACE DU DESKTOP
      (signalé par le user sur /compte/favoris) : ses paliers se déclenchent à
      la largeur de FENÊTRE, or elle vit ici dans 874 px avec une fenêtre de
      1440 — gabarit 310|310|252, corps étranglé, tout s'empilait dedans
      (540 px de haut). On lui donne le palier compact des tablettes, borné aux
      fenêtres LARGES : en dessous de 1081 px, les paliers de fenêtre
      produisent déjà la bonne mise en page et ne doivent pas être écrasés. */
@media(min-width:1081px){
  .account-layout .cruise-card{grid-template-columns:200px minmax(0,1fr) 210px}
  .account-layout .cc-duo{grid-template-columns:minmax(0,1fr);gap:.45rem}
  .account-layout .cc-duo-info .cc-route-ports{-webkit-line-clamp:1}
}

/* 7 bis. LA BANDE 821-1080 : la colonne du compte ne fait alors que ~500 px,
   et le palier tablette de la fenêtre (200|1fr|210) y étranglait le corps à
   101 px mesurés. Même remède que le palier 820 : la photo cède d'abord
   (elle illustre, la carte informe), le prix passe sous le corps. */
@media(min-width:821px) and (max-width:1080px){
  .account-layout .cruise-card{grid-template-columns:minmax(0,1fr)}
  .account-layout .cruise-card .cc-media{display:none}
}

/* Le CTA de couverture sur SA propre page publique (référence Facebook) :
   pastille blanche en bas à droite, au-dessus du voile. Sur téléphone le
   libellé cède, l'icône reste — une cible de 44 px suffit à dire « photo ». */
.pf-cover-cta{position:absolute;right:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .85rem;
  background:#fff;color:var(--ink);border-radius:8px;font-size:.86rem;font-weight:600;
  text-decoration:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.pf-cover-cta:hover{background:var(--orange);color:#fff}
@media(max-width:620px){
  .pf-cover-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pf-cover-cta{width:44px;height:44px;justify-content:center;padding:0}
}

/* --- /compte/preferences : le réglage dessus, les offres dessous (retour du
       user : « Modifier » était enterré sous six cartes). La carte du réglage
       et la section d'offres se séparent d'un filet, deux mondes. */
.pref-carte{margin-bottom:1.6rem}
.pref-carte > h2{margin:0 0 .9rem}
.pref-offres{padding-top:1.4rem;border-top:1px solid var(--line)}
.pref-carte-tete{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;margin:0 0 .6rem}

/* La croix d'effacement sur la page complète des notifications : poussée en
   bout de rangée, comme dans le panneau de la cloche. */
.nt-x-f{margin-left:auto;flex:0 0 auto}

/* /devis sur téléphone : la rangée « dès X € · Choisir ce prix » de l'encart
   NE PLIAIT PAS — le montant sortait de l'écran de 85 px, sur la page la plus
   proche de l'argent. Elle plie, et le bouton prend toute la largeur : c'est
   LE geste de la page, il mérite le pouce entier. */
@media(max-width:620px){
  .dv-aside-top{flex-wrap:wrap}
  .dv-choose-cheapest{flex:1 1 100%;justify-content:center;min-height:44px}
}

/* La barre collante du devis, téléphone seulement : le prix d'appel et LE
   geste, toujours sous le pouce — l'encart au CTA vit sous la grille sur
   mobile, il fallait la traverser pour le trouver. */
.dv-barre{display:none}
@media(max-width:820px){
  .dv-barre{position:fixed;left:0;right:0;bottom:0;z-index:900;
    display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    padding:.55rem max(0.9rem, env(safe-area-inset-left)) calc(.55rem + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(0,0,0,.1)}
  .dv-barre-prix{margin:0;line-height:1.1}
  .dv-barre-prix strong{font-family:var(--font-head);font-size:1.25rem;font-weight:800;color:var(--orange)}
  .dv-barre-prix small{color:var(--muted);font-size:.72rem}
  .dv-barre-cta{flex:0 0 auto;min-height:46px;padding:.55rem 1.2rem;border-radius:10px;
    border:2px solid var(--orange);background:var(--orange);color:#fff;
    font:inherit;font-weight:700;cursor:pointer}
  .dv-barre-cta:hover{background:#fff;color:var(--orange)}
  /* La page respire au-dessus de la barre : sans ce coussin, le pied de page
     et le dernier bloc passeraient dessous. */
  .dv-wrap{padding-bottom:76px}
}

/* /devis sous 700 px : le repli en DEUX colonnes de l'encart (carte 300px |
   prix) n'avait pas de palier téléphone — à 390, la colonne du prix tombait à
   ~24 px et le montant insécable sortait de l'écran de 85 px. Une seule
   colonne, LE PRIX D'ABORD : c'est lui qui décide. */
@media(max-width:700px){
  .dv-aside{grid-template-columns:minmax(0,1fr);
    grid-template-areas:'prix' 'carte' 'meta' 'recap'}
  .dv-head-map img{max-width:100%}
}

/* ============================================================================
   DÉPOSER UN AVIS (`/avis/ecrire`) — passe de design 2026-08-07.
   La page existe pour GÉNÉRER des avis : le héros dit la mission (l'avis d'un
   NAVIRE, qui aide à choisir et à anticiper la vie à bord), les sections sont
   numérotées comme le formulaire des rencontres — c'est un vrai ordre, pas une
   décoration — et chaque étape dit à quoi sert l'effort qu'elle demande.
   EN FIN DE FICHIER À DESSEIN : c'est nous le dernier dans la cascade.
   ============================================================================ */
.av-hero-sous{color:rgba(255,255,255,.85);max-width:62ch;font-size:1.05rem;}
.av-hero-points{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin:0;padding:0;}
.av-hero-points li{display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92);border-radius:99px;padding:.35rem .85rem;
  font-size:.82rem;font-weight:600;}
.av-hero-points li i{color:var(--orange);}

/* La pastille d'étape : même motif que /rencontres/proposer. */
.av-etape{display:flex;align-items:center;gap:.6rem;font-family:var(--font-head,inherit);
  font-size:1.02rem;font-weight:800;margin:0 0 .3rem;}
.av-etape::before{content:attr(data-n);flex:0 0 auto;display:inline-grid;place-items:center;
  width:1.7rem;height:1.7rem;border-radius:50%;background:var(--orange);color:#fff;
  font-size:.85rem;font-weight:800;}
.av-etape-label{cursor:pointer;}
.av-facultatif{font-weight:500;font-size:.8rem;color:var(--muted,#7a7d86);}
.av-aide{font-size:.85rem;color:var(--muted,#7a7d86);margin:0 0 1rem;max-width:58ch;}

/* La carte s'allume au travail : un filet orange dit où l'on en est. */
.av-carte{border-top:3px solid transparent;transition:border-color .15s;}
.av-carte:focus-within{border-top-color:var(--orange);}

/* La signature : l'avis part sous le vrai profil, photo comprise. */
.av-signature .avatar.sm img{width:100%;height:100%;object-fit:cover;border-radius:50%;}

/* Les vignettes des photos d'un avis : on VOIT ce qu'on va soumettre. */
.avp-grille{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem;}
.avp{position:relative;width:132px;margin:0;}
.avp img{width:132px;height:99px;object-fit:cover;border-radius:10px;
  border:1px solid var(--line,#e9e9ee);display:block;background:#f2f3f5;}
.avp figcaption{font-size:.72rem;color:var(--muted,#7a7d86);text-align:center;margin-top:.2rem;}
.avp-barre{position:absolute;top:4px;right:4px;display:flex;gap:4px;}
.avp-btn{width:26px;height:26px;border-radius:7px;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(16,16,20,.72);color:#fff;font-size:.75rem;line-height:1;}
.avp-btn:hover{background:var(--orange);}
.avp-btn--x{font-size:1rem;}

/* Le recadreur : voile plein écran, image bornée, actions dessous. */
.cr-voile{position:fixed;inset:0;z-index:2000;background:rgba(16,16,20,.78);
  display:grid;place-items:center;padding:1rem;}
.cr-fenetre{background:#fff;border-radius:14px;padding:1rem;max-width:min(46rem,100%);width:100%;}
.cr-zone{max-height:62vh;overflow:hidden;}
.cr-zone img{max-width:100%;display:block;max-height:62vh;}
.cr-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1rem;}

/* L'AVIS DANS LE FIL : même squelette que la publication, plus son identité. */
.po-avis-badge{margin-left:auto;display:inline-flex;align-items:center;gap:.35rem;
  background:var(--orange-050,#fff3ec);color:#a33f00;border-radius:99px;
  padding:.25rem .7rem;font-size:.74rem;font-weight:700;white-space:nowrap;align-self:center;}
.po-avis-note{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 .45rem;}
.po-avis-titre{font-family:var(--font-head,inherit);font-size:1.05rem;}
.po-avis-lire{margin:.5rem 0 0;font-size:.86rem;}
.po-pied--avis{flex-wrap:wrap;}
.po-btn--fait{cursor:default;flex:0 0 auto;color:var(--muted,#7a7d86);}

/* Le bloc des commentaires d'un avis du fil : sous la rangée-menu, replié
   par le script seulement — sans JavaScript il est simplement visible. */
.js-actif .po-comments-corps--avis:not(.is-ouvert){display:none;}
.po-comments-corps--avis{border-top:1px solid var(--line-2,#f1f1f4);
  padding:0.9rem 1.1rem 1rem;}

/* Le bouton nu « Commenter » de la carte d'avis prend sa part égale de la
   rangée : sans flex-basis il gardait son width:100% de base et passait à la
   ligne — J'aime, Commenter et Utile n'étaient plus alignés. */
.po-pied > button.po-btn{flex:1 1 0;}

/* Le titre du fil : la pastille à vagues de la marque, alignée sur le texte. */
.cm-titre{display:flex;align-items:center;gap:.55rem;}
.cm-titre img{flex:0 0 auto;}

/* La carte d'un rendez-vous du fil : le badge prend l'orange plein de la
   feature, la catégorie et les métas ont leurs lignes iconées. */
.po-rdv-badge{background:var(--orange);color:#fff;}
.po-rdv-cat{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-soft,#f7f7f9);
  border-radius:99px;padding:.25rem .7rem;font-size:.78rem;font-weight:600;color:var(--body,#40424a);}
.po-rdv-lien{color:inherit;text-decoration:none;}
.po-rdv-lien:hover{color:var(--orange);}
.po-rdv-meta{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin:0 0 .5rem;
  font-size:.85rem;color:var(--muted,#7a7d86);}
.po-rdv-meta i{color:var(--orange);margin-right:.25rem;}

/* ============================================================================
   LES DEUX ASIDES DU FIL, COLLANTES ET AUTONOMES (2026-08-08, demande du user).
   ============================================================================
   Avec le défilement infini, la page ne finit jamais : les colonnes doivent
   rester à l'écran pendant que le fil défile, CHACUNE AVEC SON PROPRE
   DÉFILEMENT. La règle de sûreté des barres collantes s'applique (un sticky
   plus haut que la fenêtre ne sort jamais de l'écran) : bornées à la fenêtre,
   elles défilent en interne. Le rail droit l'avait déjà ; la barre du compte
   ne l'avait pas — elle mesure ~1 000 px, et sans borne elle ne bougeait
   plus jamais une fois épinglée. */
@media (min-width:820.02px){
  .account-side{max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin;}
}
.cm-cote{scrollbar-width:thin;}

/* SOUS 1181 px LA GRILLE DU FIL SE REPLIE : le rail droit passerait SOUS le
   fil — un rail de contexte qu'on ne découvre qu'après cent cartes de
   défilement infini ne sert personne (demande du user : tablette et téléphone
   s'en passent). Ses contenus restent atteignables ailleurs : les demandes
   d'ami sur /compte/relations, les rendez-vous via la pastille de l'entête,
   les suggestions sur /membres. */
@media (max-width:1180.98px){
  .account-main.cm .cm-cote{display:none;}
}

/* « Quoi de neuf à bord ? » — la porte du fil, en tête de la barre du compte.
   SOBRE, pas un CTA (retour du user : « trop much en orange ») : l'orange plein
   reste aux vraies actions. Un lien posé sur fond neutre, la vague orange
   comme seul accent ; le survol et l'état actif passent au fond orange pâle et
   au texte orange — jamais le plein. La vague glisse légèrement au survol. */
.asq{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  margin-top:.8rem;padding:.45rem .7rem;border-radius:10px;
  background:var(--bg-soft,#f7f7f9);color:var(--ink,#16161a);
  font-family:var(--font-head,inherit);font-weight:700;font-size:.88rem;
  text-decoration:none;transition:background .15s,color .15s;}
.asq i{color:var(--orange);transition:transform .2s;}
.asq:hover,.asq:focus-visible,.asq.is-actif{background:var(--orange-050,#fff3ec);color:var(--orange);}
.asq:hover i{transform:translateX(3px);}
@media (prefers-reduced-motion: reduce){.asq i{transition:none;}}

/* LE PLEIN ÉCRAN DESKTOP DE L'ESPACE MEMBRE A ÉTÉ ESSAYÉ PUIS REVERTÉ
   (2026-08-08) : plafond à 1760 px, barre à 280, centre du fil à 44 rem —
   généralisé à tout l'espace, puis retiré le jour même, le user n'étant pas
   convaincu du rendu desktop. L'espace membre reste sur la largeur Bootstrap
   (1320 px) et ses colonnes d'origine. Si l'idée revient, l'historique git
   porte la version complète (commits c45b9f4 et bce416c). */

/* La photo de galerie, dans le fil et sur sa page : l'image EST le contenu. */
.po-galerie-img{display:block;margin:.6rem 0 .2rem;border-radius:12px;overflow:hidden;}
.po-galerie-img img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;background:#f2f3f5;}
.ph-page{max-width:46rem;margin:0 auto;}
.ph-carte{background:#fff;border:1px solid var(--line,#e9e9ee);border-radius:14px;padding:1.1rem 1.2rem;}
.ph-titre{font-size:1.35rem;margin:.6rem 0 .2rem;}
.ph-desc{color:var(--body,#40424a);margin:0 0 .6rem;max-width:60ch;}
.ph-visuel{margin:0;}
.ph-visuel img{display:block;width:100%;height:auto;border-radius:12px;background:#f2f3f5;}
.ph-comments{margin-top:1rem;border-top:1px solid var(--line-2,#f1f1f4);padding-top:1rem;}

/* L'écran « Mes photos » : la vignette à gauche, les champs à droite. */
.gp-liste{display:flex;flex-direction:column;gap:1rem;}
.gp-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.1rem;align-items:start;}
.gp-vue img{display:block;width:100%;height:160px;object-fit:cover;border-radius:10px;background:#f2f3f5;}
.gp-pied{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;}
@media (max-width:640px){
  .gp-item{grid-template-columns:minmax(0,1fr);}
  .gp-vue img{height:200px;}
}

/* ============================================================================
   /avis — LES CHEMINS VERS LE FORMULAIRE (2026-08-08, demande du user : la
   page qui doit GÉNÉRER des avis n'offrait aucun lien vers /avis/ecrire).
   Trois appels : le héros, la bande après la liste, et le flottant permanent.
   ============================================================================ */
.rvh-sous{color:rgba(255,255,255,.65);font-size:.85rem;}

/* La bande de contribution : sombre comme le héros, elle referme la lecture. */
.rvc{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  flex-wrap:wrap;margin:2rem 0 .5rem;padding:1.4rem 1.6rem;border-radius:16px;
  background:var(--black,#101014);
  background-image:radial-gradient(38rem 14rem at 85% 0%, rgba(255,99,0,.28), transparent 60%);}
.rvc h2{color:#fff;font-size:1.25rem;margin:0 0 .3rem;}
.rvc p{color:rgba(255,255,255,.78);margin:0;max-width:56ch;}

/* Le flottant : toujours là, en bas à gauche (le retour en haut a la droite).
   Charte des CTA : plein orange, le survol INVERSE. */
.rvf{position:fixed;left:1.25rem;bottom:1.25rem;z-index:1030;
  display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;
  border-radius:99px;border:2px solid var(--orange);background:var(--orange);color:#fff;
  font-family:var(--font-head,inherit);font-weight:800;font-size:.92rem;
  text-decoration:none;box-shadow:0 8px 22px rgba(16,16,20,.25);}
.rvf:hover,.rvf:focus-visible{background:#fff;color:var(--orange);}
@media (max-width:620px){
  .rvf span{display:none;}                     /* l'icône suffit, 48 px tactiles */
  .rvf{width:48px;height:48px;justify-content:center;padding:0;}
}

/* ============================================================================
   LA NOTE DE CONFORT DU NAVIRE (page pilier, 2026-08-08). La note à gauche
   avec sa jauge, la formule à droite : une note sans son calcul serait une
   opinion. L'orange ne sert que la jauge et le badge — c'est une mesure, pas
   un bouton.
   ============================================================================ */
.bc-confort{display:grid;grid-template-columns:170px minmax(0,1fr);gap:1.4rem;align-items:center;
  margin:1.1rem 0 .4rem;padding:1.1rem 1.3rem;border:1px solid var(--line,#e9e9ee);
  border-left:4px solid var(--orange);border-radius:14px;background:var(--bg-soft,#f7f7f9);}
.bc-confort-note{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center;}
.bc-confort-val{font-family:var(--font-head,inherit);font-weight:800;font-size:2.3rem;line-height:1;
  color:var(--ink,#16161a);font-variant-numeric:tabular-nums;}
.bc-confort-val small{font-size:1rem;color:var(--muted,#7a7d86);font-weight:700;}
.bc-confort-badge{background:var(--orange);color:#fff;border-radius:99px;padding:.25rem .8rem;
  font-size:.78rem;font-weight:700;white-space:nowrap;}
.bc-confort-jauge{display:block;width:100%;height:8px;border-radius:99px;background:#e4e7ec;overflow:hidden;}
.bc-confort-jauge span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg, #ffb27d, var(--orange));}
.bc-confort-txt h2{font-size:1.02rem;margin:0 0 .35rem;}
.bc-confort-txt p{margin:0;font-size:.92rem;color:var(--body,#40424a);max-width:66ch;}
.bc-confort-prix{margin-top:.5rem !important;padding-top:.5rem;border-top:1px dashed var(--line,#e9e9ee);}
.bc-confort-prix i{color:var(--orange);margin-right:.3rem;}
@media (max-width:640px){
  .bc-confort{grid-template-columns:minmax(0,1fr);gap:1rem;}
  .bc-confort-note{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;}
  .bc-confort-jauge{flex-basis:100%;}
}

/* Le pied du panneau de la cloche : l'unique porte vers la page complète. */
.np-pied{margin:0;padding:.6rem .9rem;border-top:1px solid var(--line-2,#f1f1f4);text-align:center;}
.np-pied a{font-size:.85rem;font-weight:700;color:var(--orange);text-decoration:none;}
.np-pied a:hover{text-decoration:underline;}

/* La carte d'identité du menu du compte, en DEUX liens : avatar + pseudo vers
   LE FIL (le geste fréquent), la petite ligne vers la page publique — COLLÉE
   sous le pseudo, dans la colonne de texte (l'allure d'avant, retour du user :
   décalée sous l'avatar elle flottait). Grille : avatar | texte sur 2 lignes. */
.hd-cp-tete{display:grid;grid-template-columns:44px minmax(0,1fr);
  column-gap:.7rem;row-gap:0;align-items:center;}
.hd-cp-fil{display:contents;text-decoration:none;color:var(--ink,#16161a);}
.hd-cp-fil img,.hd-cp-fil .hd-avatar-init{grid-row:1 / span 2;}
.hd-cp-fil strong{align-self:end;line-height:1.25;}
.hd-cp-fil:hover strong{color:var(--orange);}
.hd-cp-public{grid-column:2;align-self:start;justify-self:start;
  color:var(--muted,#7a7d86);font-size:.78rem;line-height:1.3;text-decoration:none;}
.hd-cp-public:hover{color:var(--orange);text-decoration:underline;}
/* LA VARIANTE INVITE SE REDÉCLARE APRÈS LA GRILLE, à dessein : la grille
   44px | 1fr ci-dessus gagne à spécificité égale sur le display:block déclaré
   plus haut — le titre du visiteur finissait écrasé dans la colonne de
   l'avatar (piège de cascade du §5, une fois de plus). */
.hd-cp-tete--invite{display:block;}
.hd-cp-tete--invite strong{display:block;line-height:1.3;}
.hd-cp-tete--invite small{display:block;margin-top:.15rem;}

/* « Voir mon profil public » en tête de barre, sous le @pseudo : discret —
   une ligne de la carte d'identité, pas une entrée de menu. */
.account-voir--tete{display:inline-flex;align-items:center;gap:.35rem;
  padding:0;margin-top:.2rem;border-radius:0;background:none;
  font-size:.78rem;color:var(--muted,#7a7d86);text-decoration:none;}
.account-voir--tete:hover{background:none;color:var(--orange);text-decoration:underline;}

/* ============================================================
   FICHE TECHNIQUE DYNAMIQUE (/bateaux/{slug}/fiche-technique)
   En fin de fichier À DESSEIN : deux corrections de cartes ont déjà
   été perdues par des règles déclarées plus bas — ici, c'est nous le
   dernier dans la cascade.
   ============================================================ */
.ft-chapo{font-size:1.02rem;line-height:1.65;color:var(--body);max-width:880px;
  margin:0 0 1.6rem;padding:.9rem 1.1rem;background:var(--bg-soft);
  border-left:3px solid var(--orange);border-radius:0 10px 10px 0}
.ft .hub-in > h2{font-family:var(--font-head);font-size:1.35rem;margin:2.2rem 0 .8rem}
.ft-scroll{overflow-x:auto;margin:0 0 1.2rem}
.ft-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;font-size:.92rem}
.ft-table thead th{background:var(--bg-soft);text-align:left;padding:.6rem .9rem;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.ft-table tbody tr + tr{border-top:1px solid var(--line-2,#f1f1f4)}
.ft-table th[scope=row]{width:38%;text-align:left;padding:.65rem .9rem;font-weight:600;color:var(--ink)}
.ft-table th[scope=row] small{display:block;font-weight:400;color:var(--muted);
  font-size:.78rem;line-height:1.35;margin-top:.1rem}
.ft-table td{padding:.65rem .9rem;color:var(--body);font-variant-numeric:tabular-nums;vertical-align:top}
.ft-table td small{color:var(--muted)}
.ft-table td:last-child{color:var(--muted)}
.ft-sans{opacity:.45}
.ft-table--comp th[scope=row]{width:auto}
.ft-table--comp .is-actuel{background:rgba(255,99,0,.06)}
.ft-table--comp .is-actuel th[scope=row]::after{content:" (ce navire)";font-weight:400;
  color:var(--muted);font-size:.78rem}

/* Les deux mesures : la note, sa jauge, SA FORMULE. */
.ft-mesure-chapo{max-width:880px;color:var(--body);margin:0 0 1rem}
.ft-mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
  gap:1rem;margin:0 0 1.4rem}
.ft-mesure{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}
.ft-mesure h3{font-family:var(--font-head);font-size:1.02rem;margin:0 0 .6rem}
.ft-mesure-note{display:flex;align-items:baseline;gap:.3rem;margin:0 0 .45rem}
.ft-mesure-note strong{font-family:var(--font-head);font-size:2rem;line-height:1;color:var(--ink)}
.ft-mesure-note span{color:var(--muted);font-weight:600}
.ft-mesure-badge{margin-left:auto;font-style:normal;font-weight:700;font-size:.8rem;
  color:var(--orange);background:rgba(255,99,0,.1);border-radius:999px;padding:.25rem .7rem}
.ft-jauge{display:block;height:7px;border-radius:999px;background:var(--bg-soft);
  overflow:hidden;margin:0 0 .7rem}
.ft-jauge span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#ffb27d,var(--orange))}
.ft-mesure-calc{margin:0 0 .5rem;color:var(--ink);font-size:.92rem}
.ft-mesure-exp{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}
.ft-histoire{max-width:880px;line-height:1.7;color:var(--body);margin:0 0 1.4rem}
@media(max-width:620px){
  .ft-table th[scope=row]{width:46%}
  .ft .hub-in > h2{font-size:1.15rem}
}

/* ---- Itinéraires du navire : tracker, exclusivités, zones ---- */
.it-tracker{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin:0 0 .6rem;background:var(--bg-soft);min-height:200px}
.it-tracker iframe{display:block;width:100%!important;border:0}
.it-tracker-note{color:var(--muted);font-size:.85rem;max-width:880px;margin:0 0 1.6rem}
.it-suite{color:var(--body);margin:-.4rem 0 1.4rem;font-size:.92rem}
.it-exclusives{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem;padding:0}
.it-exclusives li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:.35rem .85rem;font-size:.9rem}
.it-exclusives li a{text-decoration:none;color:var(--ink);font-weight:600}
.it-exclusives li a:hover{color:var(--orange)}
.it-exclusives li span{color:var(--muted);font-size:.8rem;margin-left:.35rem}
.it-exclusives-plus{color:var(--muted)}
.it-zones{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(16rem,100%),1fr));
  gap:.55rem;margin:0 0 1.4rem;padding:0}
.it-zones a{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;
  text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.it-zones a:hover{border-color:var(--orange);color:var(--orange)}
.it-zones a span{color:var(--muted);font-weight:400;font-size:.8rem;white-space:nowrap}
.it .hub-in > h2{font-family:var(--font-head);font-size:1.35rem;margin:2.2rem 0 .8rem}
.hub-fil-ancre{color:var(--orange)}

/* ---- Le bloc de note de l'expert (contenu repris, converti aux ronds) ----
   Les classes viennent du contenu en base : elles n'avaient AUCUN style chez
   nous, le score sortait en texte nu. */
.overall-expert-rating{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.2rem;text-align:center;margin:0 0 1rem}
.overall-expert-rating .expert-score{font-family:var(--font-head);font-weight:800;
  font-size:2.4rem;line-height:1.1;color:var(--ink)}
.overall-expert-rating .expert-score small{font-size:.45em;font-weight:600;color:var(--muted);margin-left:.15rem}
.overall-expert-rating .bubbles{margin:.35rem 0 .5rem}
.overall-expert-rating .expert-verdict{margin:0;color:var(--body);font-size:.92rem;font-weight:600}
.hb-note .bubbles{margin-top:.3rem}

/* ---- Moteur : recherches populaires, suggestion au clavier, CTA compteur,
   secours à zéro résultat (audit conversion du 2026-08-09) ---- */
.m-populaires{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin-top:.9rem}
.m-populaires-t{color:rgba(255,255,255,.75);font-size:.85rem}
.m-populaires form{display:inline}
.m-populaires button{font:inherit;font-size:.85rem;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.32rem .8rem}
.m-populaires button b{color:var(--orange);font-weight:700;margin-left:.25rem}
.m-populaires button:hover{background:rgba(255,255,255,.22);border-color:#fff}
/* la suggestion surlignée au clavier suit le survol souris */
.sg-item.on{background:var(--bg-soft)}
/* le CTA porte désormais un texte long : il ne doit jamais se couper */
.m-submit{white-space:nowrap}
@media(max-width:820px){ .m-submit{white-space:normal} }
/* la promesse dans l'entête des résultats */
.results-promesse{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);
  font-size:.82rem;margin-left:.7rem;padding-left:.7rem;border-left:1px solid var(--line)}
@media(max-width:620px){ .results-promesse{display:none} }
/* le secours à zéro résultat : des retraits nommés et chiffrés */
.sec-bloc{margin-top:1.1rem;text-align:left;max-width:32rem;margin-left:auto;margin-right:auto}
.sec-titre{font-weight:700;color:var(--ink);margin:0 0 .5rem}
.sec-item{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .9rem;
  margin:0 0 .5rem;text-decoration:none;color:var(--ink)}
.sec-item:hover{border-color:var(--orange);color:var(--orange)}
.sec-item span{color:var(--orange);font-weight:700;white-space:nowrap}
/* Sur téléphone les cinq pastilles empilaient 199 px entre le moteur et la
   suite : trois suffisent à dire « il y a des raccourcis ». */
@media(max-width:620px){ .m-populaires form:nth-of-type(n+4){display:none} }

/* ---- Écran Identifiants : les connexions liées ---- */
.cx-ligne{display:flex;align-items:center;gap:.8rem;padding:.65rem 0;border-top:1px solid var(--line-2,#f1f1f4)}
.cx-ligne:first-of-type{border-top:0}
.cx-ico{flex:0 0 auto;display:inline-grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:var(--bg-soft);font-size:1.05rem;color:var(--ink)}
.cx-infos{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.cx-infos small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Carte des escales : points par étiquette + nuage des itinéraires ---- */
.es-point{display:block;border-radius:50%;border:1.5px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);background:#5b7a99}
.es-point--incontournable{background:var(--orange)}
.es-point--confidentielle{background:#9aa3af}
.dt-pastille.es-pt--incontournable{background:var(--orange)}
.dt-pastille.es-pt--classique{background:#5b7a99}
.dt-pastille.es-pt--confidentielle{background:#9aa3af}
/* le nuage d'escales d'un navire (page itinéraires) */
.it-nuage{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  height:440px;background:#d1e6e9;margin:0 0 .5rem}
.it-nuage-note{color:var(--muted);font-size:.85rem;margin:0 0 1.4rem}

/* ---- NOTATION PAR CATÉGORIE DE L'AVIS D'EXPERT (hubs avis) ----
   Le balisage vit dans le contenu repris (34 pages) et n'avait JAMAIS été
   habillé depuis l'import : barres invisibles, libellés en vrac. Un seul
   orange (la charte), chiffres tabulaires pour que la colonne des notes
   s'aligne, et l'avertissement en encart discret — une aide n'est pas une
   alerte. En fin de fichier à dessein : c'est nous le dernier de la cascade. */
.categories-title{font-size:.95rem;font-weight:700;margin:0 0 .9rem}
.expert-categories{display:flex;flex-direction:column;gap:.55rem}
.expert-category-item{display:grid;grid-template-columns:minmax(7.5rem,10.5rem) 1fr;
  gap:.85rem;align-items:center}
.category-label{font-size:.85rem;color:var(--muted)}
.category-score{display:flex;align-items:center;gap:.65rem}
.score-bar{flex:1 1 auto;height:8px;border-radius:999px;background:#e8eaef;overflow:hidden}
.score-fill{height:100%;border-radius:999px;background:var(--orange)}
.score-text{flex:0 0 auto;min-width:2.7rem;text-align:right;font-size:.85rem;
  font-weight:700;font-variant-numeric:tabular-nums}
.expert-disclaimer{margin-top:1.15rem;padding:.7rem .95rem;background:var(--bg-soft);
  border-left:3px solid #cfd2da;border-radius:8px}
.expert-disclaimer p{margin:0;font-size:.82rem;color:var(--muted)}
@media(max-width:560px){
  .expert-category-item{grid-template-columns:1fr;gap:.15rem}
}

/* ---- Bloc « Rencontres à bord » des landings (meetup_sujet) ---- */
.mu-bande-chapo{color:var(--muted);max-width:62ch;margin:0 0 1.3rem}
/* La bande hérite de la grille de la liste (auto-FILL : une carte seule garde
   sa piste au lieu de s'étirer sur 772 px — mesuré) ; on ne borne que la
   largeur totale. */
.mu-grid--bande{max-width:64rem}
.mu-bande .po-bande-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.4rem}
/* ---- Éditorial SEO de /rencontres ---- */
.mu-editorial{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.mu-editorial p{max-width:74ch;color:var(--ink);margin:0 0 .9rem}

/* ---- /rencontres : bandeau visiteur + état de lancement ---- */
/* DANS LA COLONNE et arrondi (le héros pleine largeur a été refusé), fond
   sombre de la charte avec la lueur orange — le langage du bandeau d'annonce.
   `theme.css` impose h1{color:var(--ink)} : le blanc se redit (piège du §5). */
.mu-hero{background:radial-gradient(34rem 16rem at 88% 0%, rgba(255,99,0,.26), transparent 62%), var(--black);
  color:#fff;border-radius:18px;padding:2.2rem 2rem 2.1rem;margin:0 0 1.6rem}
.mu-hero-sur{color:var(--orange);font-weight:800;font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;margin:0 0 .35rem}
.mu-hero h1{color:#fff;font-size:clamp(1.55rem,3.2vw,2.1rem);margin:0 0 .55rem}
.mu-hero-chapo{color:rgba(255,255,255,.82);max-width:56ch;margin:0 0 1.25rem}
.mu-hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:0}
/* Le second bouton vit sur fond sombre : bordure et texte blancs au repos,
   l'inversion de la charte au survol. */
.mu-hero-btn2{border-color:#fff;color:#fff;background:transparent}
.mu-hero-btn2:hover{background:#fff;color:var(--black)}
@media(max-width:560px){ .mu-hero{padding:1.6rem 1.2rem} }
/* Les cartes de suggestion dans la liste : la grille de l'accueil, resserrée. */
.mu-lancer{margin-top:1.9rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.mu-lancer > p{max-width:64ch}
.mp-cartes--liste{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr))}

/* ---- Vidéo YouTube d'une publication (lot 1 vidéo) ---- */
.pc-video{margin:0 0 .5rem}
.pc-video summary{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  font-size:.86rem;font-weight:700;color:var(--muted);list-style:none}
.pc-video summary::-webkit-details-marker{display:none}
.pc-video summary:hover{color:var(--orange)}
.pc-video summary .fa-youtube{color:var(--orange)}
.pc-video[open] summary{color:var(--ink)}
.pc-video input{display:block;width:100%;margin-top:.45rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:9px;font-size:.9rem}
.pc-video input:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.pc-video-aide{margin:.35rem 0 0;font-size:.78rem;color:var(--muted)}
/* la façade dans la carte : cadre 16/9, la vignette hqdefault (4:3) se rogne
   exactement sur ses bandes noires en cover */
.po-video{position:relative;margin:0 0 .85rem;border-radius:12px;overflow:hidden;
  aspect-ratio:16/9;background:#101014}
.po-video a{display:block;height:100%}
.po-video img{width:100%;height:100%;object-fit:cover;display:block}
.po-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.po-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;width:58px;height:58px;
  border-radius:50%;background:rgba(16,16,20,.72);color:#fff;font-size:1.25rem;
  padding-left:4px;transition:.15s}
.po-video a:hover .po-video-play{background:var(--orange)}

/* ---- Le mur de la galerie navire (photos + vidéos, formats mêlés) ---- */
/* Colonnes à la Instagram : chaque élément garde SON rapport (16:9 ou 9:16),
   les colonnes absorbent le mélange — une grille à rangées ne le saurait pas. */
.gm-mur{columns:3 240px;column-gap:1rem}
.gm-item{position:relative;display:block;break-inside:avoid;margin:0 0 1rem;
  border-radius:12px;overflow:hidden;background:#101014}
.gm-item--paysage{aspect-ratio:16/9}
.gm-item--portrait{aspect-ratio:9/16}
.gm-item a{display:block;height:100%}
.gm-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.gm-item:hover img{transform:scale(1.03)}
.gm-item iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gm-titre{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .6rem;
  color:#fff;font-size:.85rem;font-weight:600;
  background:linear-gradient(transparent, rgba(16,16,20,.82))}

/* le mur d'une page de rubrique (galerie thématique du BO) */
.hub-mur{margin:2.2rem 0 1.4rem}
.hub-mur h2{margin-bottom:1rem}

/* ---- Grades des croisiéristes (gamification) ---- */
.gr-badge{display:inline-flex;align-items:center;gap:.32rem;margin-top:.2rem;
  padding:.14rem .55rem;border-radius:999px;font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.03em;
  background:var(--bg-soft);border:1px solid var(--line);color:var(--ink)}
.gr-badge .fa-anchor{color:var(--orange);font-size:.7rem}
/* les hauts grades se distinguent : filet orange, puis plein pour l'amiral */
.gr-badge--commandant,.gr-badge--commodore{border-color:var(--orange);color:var(--orange)}
.gr-badge--amiral{background:var(--orange);border-color:var(--orange);color:#fff}
.gr-badge--amiral .fa-anchor{color:#fff}
.gr-suivant{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.pf-pseudo .gr-badge{margin-left:.35rem;vertical-align:middle}

/* ---- /plan-du-site ---- */
.pds-chapo{color:var(--muted);max-width:70ch;margin:0 0 1.4rem}
.pds-sommaire{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:.5rem}
.pds-sommaire a{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;
  border:1px solid var(--line);border-radius:999px;font-size:.86rem;font-weight:600;
  color:var(--ink);text-decoration:none}
.pds-sommaire a:hover{border-color:var(--orange);color:var(--orange)}
.pds-sommaire a span{color:var(--muted);font-weight:700}
.pds-sommaire .fa-solid{color:var(--orange)}
.pds-bloc{margin:0 0 2.2rem}
.pds-bloc h2{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;margin:0 0 .8rem;
  padding-bottom:.45rem;border-bottom:2px solid var(--orange);scroll-margin-top:90px}
.pds-bloc h2 .fa-solid{color:var(--orange);font-size:.95rem}
.pds-n{color:var(--muted);font-size:.85rem;font-weight:600;margin-left:auto}
.pds-liens{list-style:none;margin:0;padding:0;
  columns:4 15rem;column-gap:1.6rem}
.pds-liens li{break-inside:avoid;padding:.14rem 0;font-size:.9rem}
.pds-liens a{color:var(--ink);text-decoration:none}
.pds-liens a:hover{color:var(--orange);text-decoration:underline}
.pds-corps{padding-bottom:2rem}
.pds-corps .cp-wrap{max-width:1560px}

/* ============================================================
   PAGES DE CONTENU EN LARGEUR DE THÈME (2026-08-10, signalé par le user :
   contenu « étriqué » sur les thématiques). Le contenu repris du legacy est
   bâti en grilles Bootstrap : dans les 820 px de `.cp-wrap`, trois cartes se
   partageaient ~250 px chacune. Même arbitrage que les hubs navires
   (2026-07-31) : la largeur du THÈME (1 180) et pas de bride sur le texte —
   la reprendre au texte annulerait le gain. Les pages LÉGALES gardent 820,
   ce sont des colonnes de texte pur.
   En fin de fichier à dessein : `.cp-wrap` est déclaré plus haut.
   ============================================================ */
.cp--article > .cp-wrap{max-width:1180px}
.cp--article .cp-body{max-width:none}

/* ---- « Par où commencer ? » : les sélections en contenu de la home
   (2026-08-10, audit PageRank). Des PHRASES qui portent leur lien, pas un
   bloc de menu : c'est la proximité sémantique qui donne son poids au lien. */
.sel-bande{padding:2.2rem 1rem 1.4rem}
.sel-in{max-width:1180px;margin:0 auto}
.sel-titre{font-family:var(--font-head);font-size:1.35rem;margin:0 0 1rem}
.sel-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));gap:1rem}
.sel-item{margin:0;padding:1rem 1.1rem;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:12px;font-size:.95rem;line-height:1.55;color:var(--body)}
.sel-item a{font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.sel-item a:hover{color:var(--ink)}

/* ---- Liens croisés pilotés par la demande (audit PageRank 2026-08-10) ---- */
.lg-croises{margin:0 0 1.6rem;padding:1rem 1.2rem;background:var(--bg-soft);
  border-left:3px solid var(--orange);border-radius:0 10px 10px 0}
.lg-croises p{margin:0 0 .4rem;font-size:.95rem;line-height:1.55;color:var(--body)}
.lg-croises p:last-child{margin-bottom:0}
.lg-croises a{font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.lg-croises a:hover{color:var(--ink)}
.pd-faq-lien{margin:1.2rem 0 0;font-size:.95rem;color:var(--body)}
.pd-faq-lien a{font-weight:700;color:var(--orange);text-decoration:underline;text-underline-offset:3px}

/* ---- Lettre d'information : la bande au-dessus du pied (2026-08-10).
   Sombre avec la lueur orange de la charte — le motif des bandeaux — parce
   qu'elle précède le pied noir : les deux se lisent d'un bloc. ---- */
/* La bande porte l'écart avec le contenu ; le pied qui la SUIT colle à elle
   (le 3rem de `.site-footer` s'affichait en blanc entre les deux — signalé
   par le user). */
.nl-bande{background:var(--black);color:#fff;position:relative;overflow:hidden;
  margin-top:3rem;border-bottom:1px solid rgba(255,255,255,.12)}
.nl-bande + .site-footer{margin-top:0}
body.p-solo .nl-bande{margin-top:0}
.nl-bande::before{content:"";position:absolute;top:-60%;right:-4%;width:420px;height:420px;
  border-radius:50%;background:var(--orange);opacity:.12;pointer-events:none}
.nl-in{max-width:1180px;margin:0 auto;padding:2.2rem 1rem;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.nl-titre{font-family:var(--font-head);font-size:1.35rem;color:#fff;margin:0 0 .35rem}
.nl-sub{margin:0;color:rgba(255,255,255,.75);font-size:.95rem;max-width:34rem}
.nl-form{flex:1 1 24rem;max-width:34rem}
.nl-ligne{display:flex;gap:.6rem}
.nl-ligne input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.25);border-radius:10px;
  background:rgba(255,255,255,.08);color:#fff;padding:.8rem 1rem;font-size:1rem}
.nl-ligne input::placeholder{color:rgba(255,255,255,.55)}
.nl-ligne input:focus{outline:2px solid var(--orange);outline-offset:1px;background:rgba(255,255,255,.12)}
.nl-ligne button{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;
  padding:.8rem 1.2rem;border:2px solid var(--orange);border-radius:10px;
  background:var(--orange);color:#fff;font-family:var(--font-head);font-weight:700;
  cursor:pointer;transition:.14s;white-space:nowrap}
.nl-ligne button:hover{background:#fff;color:var(--orange)}
.nl-ligne button:disabled{opacity:.6;cursor:wait}
.nl-msg{margin:.6rem 0 0;font-size:.92rem;font-weight:600}
.nl-msg.is-ok{color:#7ee2a8}
.nl-msg.is-erreur{color:#ffb0a0}
.nl-fine{margin:.6rem 0 0;font-size:.78rem;color:rgba(255,255,255,.55)}
.nl-fine a{color:rgba(255,255,255,.75);text-decoration:underline}
/* LE POT DE MIEL : hors écran, jamais display:none — certains robots
   sautent ce qui est display:none. */
.nl-piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:700px){
  .nl-in{flex-direction:column;align-items:stretch;gap:1rem}
  .nl-ligne{flex-direction:column}
  .nl-ligne button{justify-content:center}
}

/* ---- LE MAG SUR YOUTUBE : blocs d'abonnement (2026-08-11) ----
   La façade reprend le contrat de .po-video (cadre 16:9 posé d'avance —
   sans lui le lazy ne charge jamais, le piège documenté), la ligne .yt-abo
   est injectée par site.js au moment du play. Charte : un seul orange,
   survol par inversion. En fin de fichier à dessein : dernier de la cascade. */
.yt-abo{display:block;margin:.5rem 0 0;font-size:.85rem;font-weight:600;
  color:var(--orange);text-decoration:none}
.yt-abo:hover{text-decoration:underline}
.ytm-bloc{background:var(--bg-soft);border:1px solid #e8eaef;border-radius:16px;
  padding:1.4rem 1.5rem 1.2rem}
.ytm-titre{margin:0 0 1rem;font-size:1.25rem}
.ytm-titre .fa-youtube{color:var(--orange);margin-right:.35rem}
.ytm-grille{display:grid;gap:1.1rem;grid-template-columns:1fr}
.ytm-grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ytm-grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.ytm-grille--2,.ytm-grille--3{grid-template-columns:1fr}}
.ytm-facade{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9;
  background:#16161a}
.ytm-facade a{display:block;height:100%}
.ytm-facade img{width:100%;height:100%;object-fit:cover;display:block}
.ytm-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ytm-facade a:hover .po-video-play{background:var(--orange)}
.ytm-ep-titre{display:block;margin:.55rem 0 0;font-weight:600;font-size:.92rem;
  line-height:1.35;color:var(--ink);text-decoration:none}
.ytm-ep-titre:hover{color:var(--orange)}
.ytm-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem;
  margin:1.15rem 0 0}
.ytm-abo{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem 1.1rem;
  border-radius:999px;border:2px solid var(--orange);background:var(--orange);
  color:#fff;font-weight:700;font-size:.92rem;text-decoration:none}
.ytm-abo:hover{background:#fff;color:var(--orange)}
.ytm-tous{font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none}
.ytm-tous:hover{color:var(--orange)}
.dt-video{padding:2.2rem 0 0}
/* Dans le rail du fil, le bloc vit déjà dans une carte .pf-bloc : on retire
   la coquille pour ne pas empiler deux cadres. */
.ytm-rail .ytm-bloc{background:none;border:0;border-radius:0;padding:0}
.ytm-rail .ytm-titre{font-size:1rem}

/* ---- CAPTURES DES PAGES TUTO (2026-08-11) ---- */
.tuto-capture{margin:1.4rem 0 1.8rem}
.tuto-capture img{display:block;width:100%;height:auto;border:1px solid #e2e5ea;
  border-radius:12px;box-shadow:0 10px 28px rgba(22,22,26,.09)}
.tuto-capture figcaption{margin:.6rem 0 0;font-size:.85rem;color:var(--muted);text-align:center}

/* ---- LA HOME REFONDUE (2026-08-11, pré-MEP) ---- */
.hero-eyebrow{margin:0 0 .4rem;font-size:.95rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--orange)}
.hp-garanties{border-block:1px solid #e8eaef;background:#fff;margin-top:2.2rem}
.hp-garanties-in{max-width:1240px;margin:0 auto;padding:1.1rem 1rem;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.hp-garantie{display:flex;align-items:center;gap:.6rem;margin:0;font-size:.82rem;
  line-height:1.3;color:var(--muted)}
.hp-garantie i{font-size:1.25rem;color:var(--orange)}
.hp-garantie strong{color:var(--ink);font-size:.85rem}
@media (max-width:980px){.hp-garanties-in{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.hp-garanties-in{grid-template-columns:repeat(2,minmax(0,1fr))}}

.hp-bande{padding:3rem 0 2.6rem}
.hp-bande--soft{background:var(--bg-soft)}
.hp-in{max-width:1240px;margin:0 auto;padding:0 1rem}
.hp-sur{margin:0 0 .3rem;font-size:.85rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--orange)}
.hp-titre{margin:0 0 .6rem;font-size:1.65rem}
.hp-chapo{margin:0 0 1.5rem;max-width:62ch;color:var(--muted)}
.hp-suite{margin:1.6rem 0 0;display:flex;gap:1.4rem;flex-wrap:wrap}
.hp-suite a{font-weight:600;color:var(--ink);text-decoration:none}
.hp-suite a:hover{color:var(--orange)}
.hp-suite .hp-suite-2{color:var(--orange)}

.hp-desti{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
@media (max-width:980px){.hp-desti{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hp-desti-tuile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:16/11;border-radius:14px;overflow:hidden;padding:.9rem 1rem;
  background:linear-gradient(135deg,#1d2733,#3a4c60) center/cover no-repeat;
  color:#fff;text-decoration:none}
.hp-desti-tuile::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,20,0) 40%,rgba(16,16,20,.78));}
.hp-desti-nom,.hp-desti-infos{position:relative}
.hp-desti-nom{font-weight:700;font-size:1.05rem}
.hp-desti-infos{font-size:.82rem;opacity:.92}
.hp-desti-tuile:hover .hp-desti-nom{text-decoration:underline}

.hp-avis{margin-top:.4rem}
.hp-logos{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.8rem}
@media (max-width:980px){.hp-logos{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.hp-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hp-logo{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #e8eaef;border-radius:12px;padding:.7rem;min-height:72px;
  text-decoration:none;color:var(--ink);font-size:.8rem;text-align:center}
.hp-logo:hover{border-color:var(--orange)}
.hp-logo img{max-width:100%;height:auto;object-fit:contain}

.hp-edito{max-width:880px}
.hp-edito p{line-height:1.65;color:#3a3f4a}
.hp-edito h2{margin-top:2rem}
.hp-edito h3{margin:1.4rem 0 .35rem;font-size:1.08rem}

/* La vitrine d'offres : cartes compactes MODERNES, 4 par ligne (retour du
   user : la carte produit pleine largeur était énorme à deux par ligne — le
   teaser vit ici, la vraie carte vit sur /devis et /resultats). Sur téléphone,
   défilement à crans : le geste des vitrines d'applications. */
.hp-offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:.6rem}
@media (max-width:1080px){.hp-offres{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  /* Défilement à crans : la règle couvre AUSSI la variante --3 de la
     compagnie à la une, dont les colonnes fixes écrasaient les cartes sur
     téléphone (retour du user : « empilées, tout collé »). */
  .hp-offres,.hp-offres--3{display:grid;grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:84%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.7rem;
    -webkit-overflow-scrolling:touch}
  .hp-offres .of-carte{scroll-snap-align:start}
}
.of-carte{display:flex;flex-direction:column;background:#fff;border:1px solid #e8eaef;
  border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(16,24,40,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.of-carte:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(16,24,40,.18);
  border-color:rgba(255,99,0,.45)}
@media (prefers-reduced-motion:reduce){.of-carte,.of-carte:hover{transform:none;transition:none}}
.of-photo{position:relative;aspect-ratio:16/10;background:#1d2733;overflow:hidden}
.of-photo > img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.of-carte:hover .of-photo > img{transform:scale(1.05)}
.of-logo{position:absolute;top:.65rem;left:.65rem;background:#fff;border-radius:9px;
  padding:.25rem .45rem;box-shadow:0 1px 4px rgba(0,0,0,.18);display:flex}
.of-logo img{max-height:26px;width:auto;object-fit:contain}
.of-promo{position:absolute;top:.7rem;right:.7rem;background:var(--orange);color:#fff;
  font-weight:800;font-size:.95rem;padding:.35rem .7rem;border-radius:999px;
  box-shadow:0 4px 12px rgba(255,99,0,.4)}
.of-corps{display:flex;flex-direction:column;flex:1;padding:1.05rem 1.15rem 1.15rem}
.of-zone{margin:0;font-size:.78rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--orange)}
.of-nom{margin:.2rem 0 .12rem;font-size:1.22rem;font-weight:800}
.of-route{margin:0 0 .85rem;font-size:.93rem;color:var(--muted)}
.of-pied{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:.6rem}
.of-prix{margin:0;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:1.8rem;color:var(--orange);line-height:1;white-space:nowrap}
.of-prix small{font-size:.8rem;font-weight:600;color:var(--muted)}
.of-prix span{font-size:.78rem;font-weight:600;color:var(--muted)}
.of-btn{border:2px solid var(--orange);background:var(--orange);color:#fff;
  font-weight:700;font-size:.95rem;padding:.6rem 1.05rem;border-radius:12px;cursor:pointer}
.of-btn:hover{background:#fff;color:var(--orange)}

/* Finitions vitrine (retour design) : le bouton ne se coupe jamais, et les
   tuiles SANS photo de production portent un dégradé varié par rang — un
   aplat identique répété se lit comme un défaut, quatre teintes marines se
   lisent comme un choix. L'image, quand elle existe, recouvre le dégradé. */
.of-btn{white-space:nowrap}
.hp-desti-tuile{background-color:#1d2733}
.hp-desti-tuile[style*="--ti:1"]{background-color:#24455e}
.hp-desti-tuile[style*="--ti:2"]{background-color:#173a4d}
.hp-desti-tuile[style*="--ti:3"]{background-color:#2c3a55}

/* ---- HOME, 2e passe design (2026-08-11, retours du user) ---- */
/* L'espace blanc sous la bande vidéo : la bande de la lettre porte un
   margin-top de 3rem qui laissait le fond de page entre deux bandes — après
   une bande de la home, elles se touchent. */
.hp-bande + .nl-bande{margin-top:0}

/* Les pastilles de section, le motif des badges du legacy. */
.hp-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .55rem;
  padding:.38rem .85rem;border-radius:999px;background:rgba(255,99,0,.09);
  color:var(--orange);font-size:.82rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase}
.hp-titre--centre{text-align:center}
.hp-chapo--centre{text-align:center;margin-left:auto;margin-right:auto}

/* Le menu de section au défilement : révélé par le script, fixé sous le bord
   haut, jamais d'ancre dans l'URL. */
.hp-nav{position:fixed;top:0;left:0;right:0;z-index:60;background:#fff;
  box-shadow:0 2px 14px rgba(16,24,40,.12);transform:translateY(-100%);
  transition:transform .22s ease}
.hp-nav.est-visible{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.hp-nav{transition:none}}
.hp-nav-in{max-width:1240px;margin:0 auto;padding:.45rem .8rem;display:flex;
  gap:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hp-nav-in button{border:0;background:none;padding:.45rem .8rem;border-radius:999px;
  font:inherit;font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer;
  white-space:nowrap}
.hp-nav-in button:hover{background:rgba(255,99,0,.09);color:var(--orange)}
.hp-bande[id],#communaute{scroll-margin-top:132px}

/* La compagnie à la une. */
.hp-cie1-tete{display:flex;align-items:center;gap:1.1rem;margin:0 0 .8rem;flex-wrap:wrap}
@media (max-width:560px){.hp-cie1-tete{flex-direction:column;align-items:flex-start;gap:.7rem}}
.hp-cie1-logo{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #e8eaef;border-radius:14px;padding:.7rem;min-width:132px;min-height:84px}
.hp-cie1-logo img{max-width:112px;height:auto;object-fit:contain}
.hp-cie1-tete .hp-titre{margin-bottom:.2rem}
.hp-cie1-stats{margin:0;color:var(--muted);font-size:.95rem}
.hp-cie1-stats strong{color:var(--ink)}
.hp-offres--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.hp-offres--3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* L'itinéraire dans le teaser d'offre. */
.of-iti{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem}
.of-map{width:88px;height:58px;object-fit:cover;border-radius:8px;border:1px solid #e8eaef;flex:0 0 auto}
.of-iti.sans-carte .of-map{display:none}
.of-iti-btn{display:inline-flex;align-items:center;gap:.45rem;border:1px solid #e2e5ea;
  background:#fff;border-radius:999px;padding:.5rem .85rem;font:inherit;font-size:.86rem;
  font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.of-iti-btn:hover{border-color:var(--orange);color:var(--orange)}
.of-iti-btn i{color:var(--orange)}

/* Le guide navire à la une (le showcase du legacy). */
.hp-nv-galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 0 2rem}
.hp-nv-galerie img{width:100%;height:100%;aspect-ratio:802/622;object-fit:cover;display:block}
@media (max-width:700px){.hp-nv-galerie{grid-template-columns:repeat(2,1fr)}}
.hp-nv-carte{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.6rem;
  background:#16161a;color:#fff;border-radius:18px;padding:1.6rem;margin:0 0 1.2rem}
@media (max-width:820px){.hp-nv-carte{grid-template-columns:minmax(0,1fr)}}
.hp-nv-id h3{margin:.6rem 0 .1rem;font-size:1.5rem;color:#fff}
.hp-nv-cie{margin:0 0 .5rem;color:#c9ccd6}
.hp-nv-offre{margin:0;color:var(--orange);font-weight:700}
.hp-nv-logo{background:#fff;border-radius:10px;padding:.4rem .6rem;height:auto}
.hp-nv-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;margin:0 0 1.1rem}
@media (max-width:560px){.hp-nv-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hp-nv-stats p{margin:0;background:rgba(255,255,255,.07);border-radius:12px;
  padding:.7rem .5rem;text-align:center}
.hp-nv-val{display:block;font-family:'Plus Jakarta Sans',Inter,sans-serif;font-weight:800;
  font-size:1.25rem;font-variant-numeric:tabular-nums}
.hp-nv-lbl{display:block;font-size:.75rem;color:#c9ccd6}
.hp-nv-cta{display:inline-flex;align-items:center;gap:.55rem;background:var(--orange);
  border:2px solid var(--orange);color:#fff;font-weight:700;padding:.65rem 1.15rem;
  border-radius:12px;text-decoration:none}
.hp-nv-cta:hover{background:#fff;color:var(--orange)}
.hp-nv-rubriques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem;margin:0 0 1.2rem}
@media (max-width:980px){.hp-nv-rubriques{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hp-nv-rubriques{grid-template-columns:minmax(0,1fr)}}
.hp-nv-rub{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid #e8eaef;
  border-radius:14px;padding:.9rem 1rem;text-decoration:none;color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease}
.hp-nv-rub:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,24,40,.12)}
@media (prefers-reduced-motion:reduce){.hp-nv-rub,.hp-nv-rub:hover{transform:none;transition:none}}
.hp-nv-rub-ico{flex:0 0 auto;width:42px;height:42px;display:flex;align-items:center;
  justify-content:center;border-radius:12px;background:rgba(255,99,0,.1);color:var(--orange);
  font-size:1.05rem}
.hp-nv-rub-txt{display:flex;flex-direction:column;gap:.1rem}
.hp-nv-rub-txt strong{font-size:.98rem}
.hp-nv-rub-txt span{font-size:.8rem;color:var(--muted)}
.hp-nv-rub-fleche{margin-left:auto;color:var(--orange);opacity:0;transition:opacity .15s}
.hp-nv-rub:hover .hp-nv-rub-fleche{opacity:1}
.hp-nv-position{display:flex;align-items:center;gap:1rem;background:var(--bg-soft);
  border:1px solid #e8eaef;border-radius:14px;padding:1rem 1.2rem;flex-wrap:wrap}
.hp-nv-position i{color:var(--orange);font-size:1.4rem}
.hp-nv-position p{margin:0;flex:1 1 26rem}
.hp-nv-position a{font-weight:700;color:var(--orange);text-decoration:none;white-space:nowrap}

/* Les logos enrichis. */
.hp-logo{flex-direction:column;gap:.2rem;padding:.9rem .6rem;text-align:center}
.hp-logo img{max-height:36px;margin-bottom:.25rem}
.hp-logo-nom{font-size:.86rem}
.hp-logo-infos{font-size:.72rem;color:var(--muted)}
.hp-logo-prix{font-size:.8rem;font-weight:700;color:var(--orange)}

/* Les 8 raisons, synthétisées en cartes numérotées. */
.hp-raisons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem;margin-top:1.4rem}
@media (max-width:1080px){.hp-raisons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hp-raisons{grid-template-columns:minmax(0,1fr)}}
.hp-raison{position:relative;background:#fff;border:1px solid #e8eaef;border-radius:14px;
  padding:1rem 1.05rem .95rem;border-bottom:3px solid var(--orange)}
.hp-raison-n{position:absolute;top:-12px;left:14px;width:26px;height:26px;border-radius:50%;
  background:var(--orange);color:#fff;font-weight:800;font-size:.85rem;display:flex;
  align-items:center;justify-content:center}
.hp-raison h3{margin:.35rem 0 .3rem;font-size:.98rem}
.hp-raison p{margin:0;font-size:.85rem;color:#3a3f4a;line-height:1.5}

/* La FAQ en accordéon. */
.hp-faq-zone{margin-top:2.4rem;max-width:880px}
.hp-faq{display:flex;flex-direction:column;gap:.6rem}
.hp-faq-item{background:#fff;border:1px solid #e8eaef;border-radius:12px;overflow:hidden}
.hp-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem;font-weight:700;cursor:pointer;list-style:none}
.hp-faq-item summary::-webkit-details-marker{display:none}
.hp-faq-item summary i{color:var(--orange);transition:transform .18s}
.hp-faq-item[open] summary i{transform:rotate(180deg)}
.hp-faq-item[open]{border-color:var(--orange)}
.hp-faq-item p{margin:0;padding:0 1.1rem 1rem;color:#3a3f4a;line-height:1.6}

/* Le fondateur (E-E-A-T, le bloc du legacy). */
.hp-fondateur{display:flex;align-items:center;gap:1.5rem;background:#fff;
  border:1px solid #e8eaef;border-radius:18px;padding:1.6rem 1.8rem;flex-wrap:wrap}
.hp-fondateur-photo{border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:3px solid rgba(255,99,0,.25)}
.hp-fondateur > div{flex:1 1 30rem}
.hp-fondateur-titre{margin:0 0 .4rem;font-weight:700;font-size:1.05rem}
.hp-fondateur-texte{margin:0 0 .55rem;color:#3a3f4a;line-height:1.65}
.hp-fondateur-lien{font-weight:700;color:var(--orange);text-decoration:none}
.hp-fondateur-lien:hover{text-decoration:underline}

/* La variante --3 est déclarée APRÈS le bloc média du défilement à crans :
   à spécificité égale, sa base (3 colonnes) battait le mobile — les cartes
   sortaient à 6 px. Le piège de cascade du §5, réglé en fin de fichier. */
@media (max-width:620px){
  .hp-offres--3{grid-template-columns:none}
}

/* ---- HOME, 5e passe (2026-08-11) ---- */
/* La carte d'itinéraire pleine largeur, cliquable partout (la vignette de
   88 px était illisible — c'était ELLE que le retour visait). Fond blanc et
   `contain` : la carte statique 300x200 se montre entière, jamais rognée. */
.of-map-btn{position:relative;display:block;width:100%;margin:0 0 .9rem;padding:0;
  border:1px solid #e8eaef;border-radius:14px;overflow:hidden;background:#fff;
  cursor:pointer;transition:border-color .15s ease}
.of-map-btn:hover{border-color:var(--orange)}
.of-map{width:100%;height:168px;object-fit:contain;display:block;background:#fff}
.of-map-tag{position:absolute;left:.6rem;bottom:.6rem;display:inline-flex;align-items:center;
  gap:.45rem;background:#16161a;color:#fff;font-size:.82rem;font-weight:600;
  padding:.42rem .8rem;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.of-map-tag i{color:var(--orange)}
.of-map-btn:hover .of-map-tag{background:var(--orange)}
.of-map-btn:hover .of-map-tag i{color:#fff}
.of-map-btn.sans-carte{border-style:dashed}
.of-map-btn.sans-carte .of-map-tag{position:static;display:inline-flex;margin:.55rem .6rem;
  box-shadow:none}

/* L'éditorial en deux cartes (le nu « tout collé » du retour). */
.hp-edito-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin-top:.8rem}
@media (max-width:900px){.hp-edito-duo{grid-template-columns:minmax(0,1fr)}}
.hp-edito-carte{background:#fff;border:1px solid #e8eaef;border-radius:18px;
  padding:1.5rem 1.6rem;border-top:3px solid var(--orange)}
.hp-edito-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:13px;background:rgba(255,99,0,.1);color:var(--orange);font-size:1.15rem;
  margin-bottom:.8rem}
.hp-edito-carte h3{margin:0 0 .6rem;font-size:1.25rem}
.hp-edito-carte p{margin:0 0 .8rem;line-height:1.65;color:#3a3f4a}
.hp-edito-carte p:last-child{margin-bottom:0}
.hp-badge--centre{display:flex;width:fit-content;margin-left:auto;margin-right:auto}
.hp-raisons-zone{margin-top:2.6rem}

/* Le menu de section : l'entrée ACTIVE est marquée en pastille pleine. */
.hp-nav-in button.est-actif{background:var(--orange);color:#fff}

/* LES APPARITIONS AU DÉFILEMENT (l'effet moderne demandé). L'état masqué est
   conditionné à `hp-anime`, POSÉE PAR LE SCRIPT : sans JavaScript rien n'est
   caché (la leçon des pages d'études), et `prefers-reduced-motion` coupe
   tout — le script ne pose alors jamais la classe. */
.hp-anime :is(.hp-offres,.hp-desti,.hp-raisons,.hp-nv-rubriques,.hp-logos,.hp-avis,.hp-edito-duo) > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease}
.hp-anime :is(.hp-offres,.hp-desti,.hp-raisons,.hp-nv-rubriques,.hp-logos,.hp-avis,.hp-edito-duo) > .est-la{
  opacity:1;transform:none}

/* Le CTA du menu de section (audit final) : la conversion suit le
   défilement. Poussé à droite, pastille pleine — charte : survol inversé. */
.hp-nav-cta{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;
  padding:.45rem 1rem;border-radius:999px;background:var(--orange);
  border:2px solid var(--orange);color:#fff;font-size:.86rem;font-weight:700;
  text-decoration:none;white-space:nowrap}
.hp-nav-cta:hover{background:#fff;color:var(--orange)}
/* Une présence un cran au-dessus : filet orange en tête de barre. */
.hp-nav{border-top:3px solid var(--orange)}
/* Le badge des sélections vit sur la bande sombre ? Non : sel-bande est
   claire, le badge standard porte. Alignement du bloc titre. */
.sel-bande .hp-badge{margin-bottom:.4rem}