/* ===========================================================================
   Journal de bord vivant et accueil à deux entrées (docs/CONTRAT_JOURNAL.md, section 8).
   Même thème « carte marine » que site.css (papier, encre, accent magenta,
   Cormorant Garamond, Source Sans 3, Roboto Condensed, mode nuit par les mêmes
   variables). Mobile d'abord (390 px). Zones tactiles de 44 px au moins.
   Version 3 (15 octobre 2026) : fil des publications comme Instagram, plein écran comme TikTok.
   La structure d'une publication (section 7.4) est commune au site (vue détail),
   aux pages permanentes (body.page-publication) et à l'aperçu de la page Publier.
   =========================================================================== */

/* Contraste AA des pastilles « Valide » (.chip.ok) : réglé dans site.css (--ok, mode jour), depuis la fusion avec la branche principale. */

/* ---------- Texte réservé aux lecteurs d'écran ---------- */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Accueil : « En ce moment » et deux entrées ---------- */
.en-ce-moment {
  max-width: 40rem; padding: 11px 14px 11px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line);
  font-size: 16px; line-height: 1.45;
}
.en-ce-moment .label { display: inline-flex; align-items: center; gap: 8px; margin-right: 4px; color: var(--accent); font-weight: 700; }
.en-ce-moment .label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); flex: none; }
.en-ce-moment small { display: block; margin-top: 3px; font-family: var(--label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); }

.deux-entrees { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 46rem; }
.entree {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 14px; color: var(--ink); text-decoration: none; background: var(--paper);
  border: 1.5px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--line);
  transition: background .15s, color .15s, transform .15s;
}
.entree-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.entree b { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1.1; }
.entree small { font-family: var(--label); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; color: var(--ink2); }
.entree-ico { width: 28px; height: 28px; color: var(--accent); flex: none; }
.entree-fleche { width: 18px; height: 18px; color: var(--ink2); flex: none; }
.entree-suivre { border-color: var(--accent); }
.entree:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--ink3); }
.entree:hover small, .entree:hover .entree-ico, .entree:hover .entree-fleche { color: inherit; }
@media (min-width: 640px) { .deux-entrees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .entree b { font-size: 20px; } }

/* ---------- Têtes de partie (« Pour les recruteurs », « Suivre mes navigations ») ---------- */
.sec.partie { padding-block: 56px 0; }
.partie-tete { margin-bottom: 0; padding-top: 20px; border-top: 3px double var(--ink); }
.partie-tete h2 { font-size: clamp(40px, 5.4vw, 66px); }
/* Bandeaux des deux parties (17 octobre 2026, retours sur la démo : « la frontière doit être parfaitement lisible ») :
   même forme (cadre double des cartes du site), deux couleurs : marine pour les recruteurs, rose pâle pour le carnet de bord.
   Les couleurs suivent le thème (en sombre, le bandeau « marine » devient crème : toujours l'inverse de la page). */
#recruteurs .partie-tete, #suivre .partie-tete { border-top: 0; padding: 26px clamp(20px, 4vw, 40px) 30px; }
#recruteurs .partie-tete { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 5px var(--ink3); }
#recruteurs .partie-tete h2 { color: var(--paper); }
#recruteurs .partie-tete .lead { color: var(--paper); opacity: .86; }
#recruteurs .partie-tete .eyebrow { color: var(--accent-soft); }
#suivre .partie-tete { background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 4px var(--accent-soft), inset 0 0 0 5px var(--accent); }
#suivre .partie-tete .lead { color: var(--ink); }
.divider-partie { margin-top: 28px; }
/* Menu : un groupe par partie, filet de la couleur de son bandeau */
.drawer-groupe { display: flex; flex-direction: column; margin-top: 12px; padding-left: 14px; border-left: 4px solid var(--ink); }
.drawer-groupe.drawer-suivre { border-left-color: var(--accent); }
.drawer-groupe .navlink:first-child { font-weight: 700; }
.drawer-groupe .navlink:first-child:not([aria-current="true"]) { color: var(--ink); }
.sec.partie + .sec { padding-top: 44px; }

/* Sections courtes de la partie recruteurs */
#titres-resume, #disponibilite, #cv { padding-block: 44px; }

/* ---------- Titres en un coup d'œil ---------- */
.titres-resume { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 44px; }
.titres-resume-groupe h3.label { margin-bottom: 4px; font-family: var(--label); font-size: 12px; font-weight: 500; line-height: 1.4; }
.titres-resume ul { list-style: none; margin: 0; padding: 0; }
.titre-court { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 11px 0; border-top: 1px solid var(--line2); }
.titre-court:first-child { border-top: 0; }
.titre-nom b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.titre-nom small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--ink2); }
.titre-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.titre-validite { font-family: var(--label); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); font-variant-numeric: tabular-nums; }
.titres-resume-lien { margin-top: 18px; }
.titres-resume-lien .linkbtn, .publication-etape .linkbtn { min-height: 44px; }
@media (min-width: 480px) { .titre-court { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; } .titre-etat { justify-content: flex-end; } }
@media (min-width: 861px) { .titres-resume { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Disponibilité et CV ---------- */
.dispo, .cv-bloc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; padding: 24px 22px; }
.dispo-texte, .cv-texte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dispo-titre, .cv-bloc h2 { font-size: clamp(34px, 4.2vw, 46px); }
.cv-boutons { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.dispo-phrase .stamp { white-space: normal; max-width: 100%; }
.dispo-port { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; color: var(--ink2); }
.dispo-port svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

/* ---------- Liens vers les avis (en tête des références) ---------- */
.avis-liens {
  display: flex; flex-direction: column; gap: 10px; margin: 0 0 30px; padding: 20px 22px; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line);
}
.avis-liens h3 { font-size: 27px; }
.avis-lead { max-width: 72ch; font-size: 15.5px; color: var(--ink2); }
.avis-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.avis-lien { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 8px 14px; color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--ink2); }
.avis-lien:hover { background: var(--paper2); border-color: var(--ink); }
.avis-libelle { font-weight: 600; }
.avis-plateforme { font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--accent); }
.avis-ext { width: 14px; height: 14px; color: var(--ink2); flex: none; }

/* ---------- Partie « Suivre » : flux RSS et réseaux ---------- */
.suivre-liens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 44px; align-items: start; margin-top: 26px; }
.suivre-rss { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.suivre-rss p { max-width: 54ch; font-size: 15px; color: var(--ink2); }
.suivre-rss .btn svg.rss-ico { width: 17px; height: 17px; color: var(--accent); }
.suivre-rss .btn:hover svg.rss-ico { color: inherit; }
.suivre-reseaux ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reseau-lien {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; color: var(--ink); text-decoration: none;
  border: 1px solid var(--ink); font-family: var(--label); text-transform: uppercase; letter-spacing: .1em; font-size: 13px;
}
.reseau-lien svg { width: 13px; height: 13px; flex: none; }
.reseau-lien:hover { background: var(--ink); color: var(--paper); }
@media (min-width: 800px) { .suivre-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Journal : onglets ---------- */
.onglets { display: flex; gap: 0; margin-bottom: 26px; border-bottom: 1px solid var(--ink); overflow-x: auto; scrollbar-width: none; }
.onglet {
  flex: none; min-height: 48px; margin-bottom: -1px; padding: 10px 20px; color: var(--ink2); background: transparent;
  border: 1px solid transparent; border-bottom: 0; font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; font-weight: 500;
}
.onglet:hover { color: var(--ink); }
.onglet[aria-selected="true"] { color: var(--ink); background: var(--paper); border-color: var(--ink); border-bottom: 1px solid var(--paper); box-shadow: inset 0 3px 0 var(--accent); }
.onglet-panneau:focus-visible { outline-offset: 8px; }
.journal-vide { display: flex; align-items: center; gap: 16px; padding: 28px 24px; font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.3; }
.journal-vide svg { width: 36px; height: 36px; color: var(--accent); flex: none; }

/* ---------- Journal : fil des publications, comme Instagram (js/journal/fil.js) ---------- */
.fil { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 600px; margin-inline: auto; }
.fil-pub {
  position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px var(--line); scroll-margin-top: 80px;
}
.fil-pub.fil-pub-epinglee { border-color: var(--accent); }
/* En-tête : navire, lieu, date (la première information en gras), catégorie */
.fil-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; padding: 12px 14px 10px; }
.fil-avatar {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border-radius: 50%;
  background: var(--paper2); border: 1.5px solid var(--accent); box-shadow: inset 0 0 0 2px var(--paper);
}
.fil-avatar picture, .fil-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fil-avatar-icone svg { width: 22px; height: 22px; color: var(--accent); }
.fil-qui { flex: 1 1 9rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fil-ligne1 { font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.fil-ligne2 { font-family: var(--label); font-size: 12.5px; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; color: var(--ink2); }
.fil-pastilles { flex: 0 1 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 100%; margin-left: auto; }
.fil-pastilles .chip { white-space: normal; }
.chip.fil-epinglee { color: var(--accent); border-color: var(--accent); }
.chip.fil-epinglee svg { width: 12px; height: 12px; }
/* Médias en grand */
.fil-media { position: relative; margin-inline: 5px; }
.fil-media .defile-diapo { cursor: pointer; }
/* Texte court, replié à 3 lignes */
.fil-corps { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 16px 4px; }
.fil-titre { font-size: 25px; line-height: 1.14; }
.fil-titre a { text-decoration: none; padding-block: 4px; }
.fil-titre a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fil-legende { font-size: 16px; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; }
.fil-legende p { color: inherit; font-size: inherit; line-height: inherit; }
.fil-legende-repliable .fil-legende-courte { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.fil-legende-longue p + p { margin-top: 10px; }
.fil-plus { display: inline-flex; align-items: center; min-height: 44px; margin-top: -6px; padding: 0 2px; color: var(--ink2); background: none; border: 0; font-family: var(--body); font-size: 15.5px; font-weight: 600; cursor: pointer; }
.fil-plus:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.fil-langue { font-size: 13.5px; font-style: italic; color: var(--ink2); }
.fil-etape .linkbtn { min-height: 44px; }
.pub-etape svg, .publication-etape svg { width: 16px; height: 16px; }
.publication-langue { font-size: 13.5px; font-style: italic; color: var(--ink2); }
/* Publication sans photo ni vidéo : le titre fait office d'image */
.fil-sans-media .fil-corps { margin-inline: 5px; padding: 16px 16px 6px; border-top: 1px solid var(--line); cursor: pointer; }
.fil-sans-media .fil-titre { font-size: clamp(28px, 7.2vw, 34px); line-height: 1.08; }
/* Boutons sous chaque publication : « J'aime », « Partager », « Écrire à Bastien » (reactions.js ; styles plus bas) */
.fil-pied { padding: 0 16px 14px; }
.fil-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fil-actions:empty { display: none; }
.fil-plus-bas { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 640px) {
  /* téléphone : cartes bord à bord, photos sur toute la largeur de l'écran */
  .fil { width: auto; margin-inline: -20px; gap: 18px; }
  .fil-pub { border-inline: 0; border-color: var(--line); box-shadow: none; }
  .fil-pub.fil-pub-epinglee { border-color: var(--accent); }
  .fil-media, .fil-sans-media .fil-corps { margin-inline: 0; }
  .fil-entete { padding-inline: 16px; }
}

/* ---------- Médias qui défilent sur le côté (fil et plein écran) ---------- */
.defile { position: relative; aspect-ratio: var(--ratio, 1); overflow: hidden; background: #0B1524; }
.defile-piste {
  display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.defile-piste::-webkit-scrollbar { display: none; }
.defile-piste:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.defile-diapo { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; scroll-snap-align: center; scroll-snap-stop: always; }
.defile-diapo > picture, .defile-diapo > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.defile-fleche { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; padding: 0; color: #0F1A2A; background: none; border: 0; border-radius: 50%; }
.defile-fleche::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(244, 237, 220, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.defile-fleche svg { position: relative; width: 18px; height: 18px; }
.defile-fleche:hover::before { background: #FFFFFF; }
.defile-fleche:focus-visible { outline: 3px solid var(--accent); outline-offset: -1px; }
.defile-fleche:disabled { visibility: hidden; }
.defile-prec { left: 4px; }
.defile-prec svg { transform: rotate(-90deg); }
.defile-suiv { right: 4px; }
.defile-suiv svg { transform: rotate(90deg); }
.defile-compteur {
  position: absolute; top: 10px; right: 10px; z-index: 2; padding: 2px 9px; border-radius: 12px; pointer-events: none;
  background: rgba(15, 26, 42, .8); color: #F4EDDC; font-family: var(--label); font-size: 12.5px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.defile-points { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.defile-points span { width: 7px; height: 7px; border-radius: 50%; background: rgba(244, 237, 220, .6); box-shadow: 0 0 0 1px rgba(15, 26, 42, .45); transition: transform .2s, background .2s; }
.defile-points span.actif { background: #FFFFFF; transform: scale(1.3); }
.defile:has(.defile-video-en-cours) .defile-points { display: none; }
/* Vidéo : affiche et bouton de lecture ; lecture seulement au clic, son coupé au départ */
.defile-video-vide { position: absolute; inset: 0; display: grid; place-items: center; background: #1B2A41; }
.defile-video-vide svg { width: 52px; height: 52px; color: #C3BBA8; }
.defile-lire { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; color: #F4EDDC; background: linear-gradient(180deg, rgba(8, 14, 24, 0) 40%, rgba(8, 14, 24, .45)); border: 0; }
.defile-lecture { position: relative; width: 68px; height: 68px; border-radius: 50%; background: rgba(15, 26, 42, .82); border: 2px solid #F4EDDC; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.defile-lecture::after { content: ""; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #F4EDDC; }
.defile-lire:hover .defile-lecture { background: #B5246C; }
.defile-lire:focus-visible { outline: 3px solid #F6A9CB; outline-offset: -4px; }
.defile-duree { position: absolute; left: 10px; bottom: 10px; padding: 2px 7px; background: rgba(15, 26, 42, .84); font-family: var(--label); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.defile-video-en-cours { background: #000; }
.defile-video-en-cours video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.defile-diapo .video-son {
  position: absolute; top: 8px; left: 8px; right: 64px; z-index: 2; margin: 0; padding: 5px 9px; pointer-events: none;
  background: rgba(15, 26, 42, .86); color: #F4EDDC; font-size: 13px; line-height: 1.35;
}
.defile-diapo .video-secours { position: absolute; left: 8px; right: 8px; bottom: 56px; z-index: 2; margin: 0; padding: 4px 10px; background: rgba(15, 26, 42, .92); color: #EFE8D8; font-size: 14px; }
.defile-diapo .video-secours a { display: inline-flex; align-items: center; min-height: 44px; color: #F6A9CB; }
.defile-diapo .video-secours.video-echec { color: #F0B35B; font-weight: 600; }
/* Vidéo longue : façade YouTube dans son cadre */
.defile-youtube .youtube-facade { position: absolute; inset: 0; min-height: 0; aspect-ratio: auto; padding: 14px; }
.defile-seul-youtube { aspect-ratio: 16 / 9; min-height: 230px; }

/* ---------- Plein écran, comme TikTok (js/journal/detail.js) : thème de nuit du site ---------- */
html.vue-ouverte { overflow: hidden; }
.modal-backdrop.vue-publication { z-index: 45; display: block; padding: 0; overflow: hidden; background: #0B1524; }
.plein-boite {
  --paper: #0F1A2A; --paper2: #182639; --paper3: #213248; --water: #0B1524; --water2: #10203A;
  --ink: #EFE8D8; --ink2: #C3BBA8; --ink3: #979383; --line: #33455C; --line2: #22334A;
  --accent: #F06AA8; --accent-ink: #0F1A2A; --accent-soft: #3A2238; --accent2: #4FC3CF;
  --ok: #5FCB8B; --ok-soft: #173A2A; --warn: #F0B35B; --warn-soft: #3D2E15;
  --sci: #4FC3CF; --yacht: #F06AA8; --sar: #F58A4B; --offshore: #B39BEA; --pax: #63C489; --training: #93A5B8;
  position: absolute; inset: 0; display: flex; flex-direction: column; color: var(--ink); background: #0B1524; color-scheme: dark;
}
.plein-boite:focus { outline: none; }
.plein-barre {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 14, 24, .78), rgba(8, 14, 24, 0));
}
.plein-barre > * { pointer-events: auto; }
.plein-bouton {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #F4EDDC; background: rgba(15, 26, 42, .78);
  border: 1px solid rgba(244, 237, 220, .45); border-radius: 50%;
}
.plein-bouton svg { width: 22px; height: 22px; }
.plein-bouton:hover { color: #0F1A2A; background: #F4EDDC; }
.plein-bouton:disabled { opacity: .35; cursor: default; }
.plein-bouton:disabled:hover { color: #F4EDDC; background: rgba(15, 26, 42, .78); }
.plein-bouton:focus-visible { outline: 3px solid #F6A9CB; outline-offset: 2px; }
.plein-bouton svg.plein-bas { transform: rotate(180deg); }
.plein-nav { display: flex; gap: 8px; }
.plein-position { font-family: var(--label); font-size: 13px; letter-spacing: .1em; color: #EFE8D8; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.plein-pile { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.plein-pile::-webkit-scrollbar { display: none; }
.plein-ecran { position: relative; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
/* Un écran : médias en haut, texte dessous ; seul le texte défile dans son écran (zone atteignable au clavier) :
   un geste sur les médias passe toujours à la publication voisine */
.vue-publication .plein-pub {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  padding-top: calc(env(safe-area-inset-top, 0px) + 60px); color: var(--ink);
}
/* l'écran reçoit le focus pour que les lecteurs d'écran lisent la publication ; ce n'est pas une commande : pas de cadre */
.vue-publication .plein-pub:focus, .vue-publication .plein-pub:focus-visible { outline: none; }
.plein-media { flex: none; margin-top: auto; }
.plein-media .defile { width: 100%; max-height: 56vh; max-height: 56dvh; }
.plein-media .defile-diapo > picture img { object-fit: contain; }
.plein-infos {
  flex: 0 1 auto; min-height: 0; margin-bottom: auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto;
  padding: 4px 18px calc(env(safe-area-inset-bottom, 0px) + 28px);
}
.plein-infos:focus { outline: none; }
.plein-infos:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.plein-infos .fil-entete { padding: 10px 0 6px; }
.vue-publication .plein-pub .plein-titre { margin: 4px 0 14px; font-size: clamp(30px, 7.4vw, 46px); line-height: 1.06; }
.vue-publication .plein-pub .publication-texte { font-size: 17px; }
.vue-publication .plein-pub .publication-langue { margin: -6px 0 14px; }
.plein-infos .fil-actions { margin-top: 18px; }
.vue-publication .plein-pub .publication-pied { margin-top: 24px; }
.plein-sans-media .plein-infos { margin-block: auto; width: 100%; max-width: 46rem; margin-inline: auto; padding-top: 18px; }
.vue-publication .plein-sans-media .plein-titre { font-size: clamp(36px, 9vw, 60px); }
.plein-introuvable { margin: auto; max-width: 40rem; padding: 90px 24px 40px; }
.plein-introuvable .publication-titre { font-size: clamp(30px, 7vw, 46px); }
@media (min-width: 1000px) {
  /* ordinateur : médias à gauche sur toute la hauteur, texte à droite dans sa propre colonne */
  .vue-publication .plein-pub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw); grid-template-rows: minmax(0, 1fr); padding-top: 0; }
  .plein-media { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 0; margin: 0; padding: 72px 28px 28px; }
  .plein-media .defile { height: 100%; min-height: 0; max-height: none; aspect-ratio: auto; }
  .plein-infos { height: 100%; margin: 0; padding: 76px 30px 36px; background: var(--paper); border-left: 1px solid var(--line); }
  .vue-publication .plein-sans-media { grid-template-columns: minmax(0, 1fr); }
  .plein-sans-media .plein-infos { height: auto; max-height: 100%; margin: auto; padding: 96px 40px 48px; background: none; border: 0; }
  .vue-publication .plein-pub .plein-titre { font-size: clamp(34px, 3vw, 46px); }
  .vue-publication .plein-sans-media .plein-titre { font-size: clamp(44px, 4.4vw, 64px); }
  .plein-barre { padding-inline: 20px; }
}

/* ---------- Façade YouTube (aucune requête avant le clic) ---------- */
.youtube-facade {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 250px; padding: 22px 16px; overflow: hidden; text-align: center; color: #F4EDDC;
  background-color: #1B2A41; background-size: cover; background-position: center;   /* fond : 1re photo (style en ligne des pages permanentes) */
}
.youtube-facade::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 45%, rgba(15, 26, 42, .45), rgba(15, 26, 42, .82)); }
.youtube-fond { position: absolute; inset: 0; z-index: -2; }
.youtube-fond picture, .youtube-fond img { display: block; width: 100%; height: 100%; object-fit: cover; }
.youtube-lire {
  order: 1; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 18px; color: #1B2A41; background: #F4EDDC;
  font-family: var(--label); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.youtube-lire:hover { background: #FFFFFF; }
.youtube-triangle { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #B5246C; }
.youtube-avertissement { order: 2; max-width: 48ch; font-size: 13.5px; line-height: 1.45; color: #F4EDDC; }
.youtube-lien { order: 3; display: inline-flex; align-items: center; min-height: 44px; color: #F4EDDC; font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.youtube-facade :focus-visible { outline-color: #F6A9CB; }
.youtube-facade.youtube-active { display: block; min-height: 0; padding: 0; aspect-ratio: 16 / 9; background: #000; }
.youtube-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 600px) { .youtube-facade { aspect-ratio: 16 / 9; } }

/* ---------- Journal : onglet Photos ---------- */
.photos-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 16px; }
.photos-filtre { display: flex; flex-direction: column; gap: 4px; font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.photos-filtre select {
  min-width: 11rem; max-width: 100%; min-height: 44px; padding: 8px 10px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink2); border-radius: 2px; font-family: var(--body); font-size: 16px; letter-spacing: 0; text-transform: none;
}
.photos-compte { display: flex; align-items: center; min-height: 44px; margin-left: auto; font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.photos-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.photo-vignette { display: block; aspect-ratio: 1; padding: 3px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); cursor: zoom-in; }
.photo-vignette picture, .photo-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-vignette:hover { border-color: var(--ink); }
.photo-vignette.photo-video { position: relative; cursor: pointer; }
.photo-vignette .badge-lecture { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.photo-vignette .badge-lecture::after { left: 13px; top: 10px; border-width: 8px 0 8px 13px; }
.photos-aucune { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 24px 4px; color: var(--ink2); }
.photos-aucune svg { width: 28px; height: 28px; color: var(--accent); flex: none; }
/* pendant le chargement des galeries complètes des navires (data/navires_photos.json) */
.photos-chargement { min-height: 120px; padding: 24px 4px; font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
@media (min-width: 700px) { .photos-grille { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } }

/* Visionneuse existante : lien « Voir la publication » */
.lightbox .row .lb-publication { color: #EFE8D8; border-color: #EFE8D8; }
.lightbox .row .lb-publication:hover { background: #EFE8D8; color: #0F1A2A; }

/* ---------- Publication : structure commune (section 7.4) ---------- */
.publication { color: var(--ink); }
.publication .publication-entete { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.publication-meta { font-family: var(--label); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.publication .publication-titre { font-size: clamp(34px, 6vw, 58px); font-weight: 600; line-height: 1.04; }
.publication .publication-epinglee { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 4px 9px; color: var(--accent); border: 1px solid var(--accent); font-family: var(--label); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.publication-meta .publication-epinglee { color: var(--accent); }
.publication .publication-epinglee svg { width: 13px; height: 13px; }
.publication .publication-langue { margin: -8px 0 18px; }
.publication .publication-medias { display: grid; gap: 14px; margin: 0 0 24px; }
.publication .publication-texte + .publication-medias { margin: 24px 0 0; }
.publication .publication-media { margin: 0; }
.publication .publication-photo button { display: block; width: 100%; padding: 4px; background: var(--paper); border: 1px solid var(--line); cursor: zoom-in; }
.publication .publication-photo picture { display: block; }
.publication .publication-photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 82vh; margin-inline: auto; }
.publication .publication-media figcaption { margin-top: 6px; font-family: var(--display); font-size: 18px; font-style: italic; color: var(--ink2); }
.publication .publication-video video { display: block; width: 100%; height: auto; max-height: 80vh; background: #000; }
.publication .video-son, .publication .video-secours { margin-top: 6px; font-size: 14px; color: var(--ink2); }
.publication .video-secours a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.publication .video-secours.video-echec { color: var(--warn); font-weight: 600; }
.publication .publication-texte { font-size: 18px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; }
.publication .publication-texte > * + * { margin-top: 14px; }
.publication .publication-texte p { font-size: inherit; color: inherit; }
.publication .publication-texte h3 { margin-top: 30px; font-size: 30px; }
.publication .publication-texte ul, .publication .publication-texte ol { margin-bottom: 0; padding-left: 24px; }
.publication .publication-texte li + li { margin-top: 4px; }
.publication .publication-texte blockquote { margin-inline: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); font-family: var(--display); font-size: 23px; font-style: italic; line-height: 1.35; }
.publication .publication-texte a { color: var(--accent); }
.publication .publication-texte figure { margin-block: 20px; }
.publication .youtube-facade { margin: 24px 0; }
.publication .publication-meteo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: 16px; color: var(--ink2); }
.publication .publication-meteo svg { width: 18px; height: 18px; color: var(--accent2); flex: none; }
.publication .publication-meteo .label, .publication .publication-libelle { color: var(--ink2); font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.publication .apercu-mention { margin-top: 4px; color: var(--warn); font-weight: 700; font-family: var(--label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.publication .publication-citation { margin: 24px 0 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--accent); font-family: var(--display); font-size: 25px; font-style: italic; line-height: 1.3; }
.publication .publication-citation p { color: var(--ink); font-size: inherit; }
.publication .publication-etape { margin-top: 16px; }
.publication .publication-pied { display: flex; flex-direction: column; gap: 14px; margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.publication .publication-publiee { font-family: var(--label); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }

/* ---------- Partage (simples liens, aucun script tiers) ---------- */
.partage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.partage .partage-titre { width: 100%; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.partage-lien, .partage-copier, .partage-natif {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 14px; color: var(--ink); text-decoration: none;
  background: var(--paper); border: 1px solid var(--ink); font-family: var(--label); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.partage-lien:hover, .partage-copier:hover, .partage-natif:hover { background: var(--ink); color: var(--paper); }
/* « Offre-moi un café » des pages permanentes (ExportJournal::cafeHtml), sous les liens de partage */
.publication-cafe { margin: 12px 0 0; }
.cafe-lien { gap: 8px; }
.cafe-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Pages permanentes public/journal/<chemin>/ ---------- */
.page-publication .page-entete { padding: 8px 20px; background: var(--paper); border-bottom: 1px solid var(--ink); }
.page-publication .page-site, .page-publication .page-pied a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-size: 22px; font-weight: 700; text-decoration: none; }
.page-publication main { width: min(860px, 100%); margin: 0 auto; padding: 30px 20px 44px; }
.page-publication .publication-suite {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 38px; padding-top: 14px; border-top: 3px double var(--ink);
  font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2);
}
.page-publication .publication-suite a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }
.page-publication .page-pied { width: min(860px, 100%); margin: 0 auto; padding: 18px 20px 34px; border-top: 1px solid var(--ink); }
/* Archive public/journal/index.html (gabarit src/Publication/gabarits/archive.php) */
.archive-titre { margin-bottom: 12px; font-size: clamp(40px, 6vw, 64px); }
.archive-intro { max-width: 62ch; margin-bottom: 26px; font-size: 17px; color: var(--ink2); }
.archive-vide { font-family: var(--display); font-size: 24px; font-style: italic; }
.archive-liste { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--ink); }
.archive-element { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.archive-element-titre { font-size: 28px; line-height: 1.12; }
.archive-element-titre a { text-decoration: none; }
.archive-element-titre a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.archive-resume { max-width: 70ch; font-size: 16px; color: var(--ink2); }
.apercu-bandeau { padding: 10px 20px; background: var(--warn-soft); color: var(--warn); font-family: var(--label); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }

/* ---------- Carte : repères des publications situées (public/js/carte.js, blocs JOURNAL-ACCUEIL ; points.js) ---------- */
#pubs .pub { cursor: pointer; }
#pubs .pub circle { fill: var(--accent); stroke: var(--paper); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
#pubs .pub use { color: var(--paper); pointer-events: none; }
#pubs .pub:hover circle { stroke: var(--ink); stroke-width: 2px; }
.legend .sw.pub-sw { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); color: var(--paper); }
.legend .sw.pub-sw svg { width: 11px; height: 11px; display: block; }

/* ---------- « J'aime », « Partager », « Écrire à Bastien » (reactions.js ; docs/CONTRAT_JOURNAL.md, section 15) ----------
   Aucun nombre n'est affiché. Fil et plein écran (couleurs du mode nuit, redéfinies sur .plein-boite). */
.actions-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-left: -8px; }
.action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 9px; border: 0; border-radius: 999px; background: none;
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.action:hover { background: var(--paper2); }
.action:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.action[aria-expanded="true"] { background: var(--paper2); }
.action-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.action-cafe { text-decoration: none; }
.action-jaime[aria-pressed="true"] { color: var(--accent); }
.action-jaime[aria-pressed="true"] .action-ico { fill: currentColor; }
.action-anime .action-ico { animation: jaime-battement .38s ease-out; }
@keyframes jaime-battement { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1); } }
.partage-menu, .message-zone { flex: 1 1 100%; margin-top: 4px; }
.partage-liste { list-style: none; margin: 0; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.partage-choix { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper2);
  color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.partage-choix:hover { border-color: var(--accent); color: var(--accent); }
.partage-ico { width: 16px; height: 16px; margin-left: 6px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast.toast-phrase { text-transform: none; letter-spacing: .02em; word-break: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.4; width: max-content; text-align: center; }
.partage-choix:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.message-form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.message-intro, .message-conservation { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.message-facultatif { text-transform: none; letter-spacing: 0; }
.message-form textarea { min-height: 96px; }
.message-form [aria-invalid="true"] { border-color: var(--warn); }
.message-boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.message-merci { margin: 0; padding: 12px 14px; border: 1px solid var(--accent2); border-radius: 12px; background: var(--paper2); color: var(--ink); }
.message-merci:focus { outline: none; }

/* ---------- Onglet Photos : « Voir plus de photos » ---------- */
.photos-plus-bas { display: flex; justify-content: center; margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .entree, .defile-points span { transition: none; }
  .action-anime .action-ico { animation: none; }
  .entree:hover { transform: none; }
}