/* Vivre en Bateau — feuille unique, sans dépendance.
   Sobre, lisible, la photo au premier plan. */

:root {
  --encre: #17242f;
  --encre-douce: #5a6b7c;
  --papier: #fbfaf7;
  --papier-creux: #f2efe8;
  --trait: #ddd4c3;
  --accent: #1f6f8b;
  --largeur: 1170px;
}

/* Palette sombre. Trois cas à couvrir, sinon la bascule ne marche que
   dans un sens :
   - le système est en sombre et le visiteur n'a rien choisi ;
   - il a choisi « sombre » explicitement (data-theme) ;
   - il a choisi « clair » alors que son système est en sombre — d'où le
     `:not([data-theme="clair"])`, sans lequel son choix serait ignoré. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --encre: #e8e3d9;
    --encre-douce: #a3aeb8;
    --papier: #141a1f;
    --papier-creux: #1c242b;
    --trait: #2e3a44;
    --accent: #6fb3c9;
  }
}
:root[data-theme="sombre"] {
  --encre: #e8e3d9;
  --encre-douce: #a3aeb8;
  --papier: #141a1f;
  --papier-creux: #1c242b;
  --trait: #2e3a44;
  --accent: #6fb3c9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--encre);
  background: var(--papier);
}

a { color: var(--accent); }

/* --- en-tête --- */
header.site {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
  max-width: var(--largeur); margin: 0 auto; padding: 1.6rem 1.2rem 1.1rem;
  border-bottom: 2px solid var(--trait);
}
.marque { text-decoration: none; color: inherit; }
.marque-nom { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; }
.marque-sous { display: block; font-size: .8rem; color: var(--encre-douce); font-style: italic; }
header.site nav { display: flex; gap: 1.2rem; font-size: .88rem; }

main { max-width: var(--largeur); margin: 0 auto; padding: 2rem 1.2rem 3rem; }

/* --- accueil --- */
.hero { padding: 1rem 0 2rem; border-bottom: 1px solid var(--trait); margin-bottom: 2rem; }
.hero h1 { font-size: 2.4rem; margin: 0 0 .4rem; }
.hero-sous { color: var(--encre-douce); margin: 0 0 .8rem; }
.hero-chiffres { font-size: .9rem; color: var(--encre-douce); }
.bloc { margin: 2.5rem 0; }
.bloc h2 { font-size: 1.25rem; border-bottom: 1px solid var(--trait); padding-bottom: .4rem; }
.plus { text-align: right; font-size: .9rem; }

/* --- listes de billets --- */
.cartes { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 1rem;
          grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.carte-lien { display: flex; flex-direction: column; text-decoration: none; color: inherit;
              background: var(--papier-creux); border-radius: 8px; overflow: hidden; height: 100%; }
.carte-lien:hover { outline: 2px solid var(--accent); }
.carte-vignette img { width: 100%; height: 160px; object-fit: cover; display: block; }
.carte-vignette-vide { display: block; height: 160px;
  background: repeating-linear-gradient(45deg, var(--papier-creux), var(--papier-creux) 10px, var(--papier) 10px, var(--papier) 20px); }
.carte-texte { padding: .7rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.carte-titre { font-weight: 700; line-height: 1.3; }
.carte-meta { font-size: .78rem; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .04em; }
.carte-chapo { font-size: .85rem; color: var(--encre-douce); }
.compte { font-size: .85rem; color: var(--encre-douce); }

/* --- pastilles (années, escales) --- */
.pastilles { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilles a { display: inline-block; padding: .3rem .7rem; border: 1px solid var(--trait);
               border-radius: 999px; text-decoration: none; font-size: .85rem; }
.pastilles a:hover { border-color: var(--accent); }
.pastilles span { color: var(--encre-douce); font-size: .75rem; }

/* --- billet --- */
.billet-tete { margin-bottom: 1.8rem; }
.fil { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-douce); }
.billet-tete h1 { font-size: 2rem; line-height: 1.2; margin: .2rem 0 .5rem; }
.chapo { font-style: italic; color: var(--encre-douce); font-size: 1.08rem; margin: 0 0 .6rem; }
.signature { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce); }
.etiquettes a { display: inline-block; margin-right: .5rem; font-size: .8rem; }
.corps p { margin: 1.1rem 0; }
.corps img { max-width: 100%; height: auto; border-radius: 6px; }
.corps table { display: block; overflow-x: auto; max-width: 100%; }

/* --- galerie --- */
.galerie { margin-top: 2.5rem; border-top: 1px solid var(--trait); padding-top: 1.2rem; }
.galerie h2 { font-size: 1.1rem; }
.grille { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.vignette img { width: 100%; height: 130px; object-fit: cover; display: block;
                border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.vignette:hover img { opacity: .85; }
.vignette-inline { display: inline-block; }

/* --- visionneuse --- */
#visionneuse { position: fixed; inset: 0; background: rgba(0,0,0,.94); display: none;
               align-items: center; justify-content: center; z-index: 100; }
#visionneuse.ouverte { display: flex; }
#visionneuse img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
#visionneuse button { position: absolute; background: none; border: 0; color: #fff;
                      font-size: 2.4rem; cursor: pointer; padding: .4rem .9rem; line-height: 1; }
#vis-prec { left: 0; } #vis-suiv { right: 0; } #vis-fermer { top: 0; right: 0; font-size: 1.8rem; }
#vis-compte { position: absolute; bottom: 1rem; color: #bbb; font-size: .85rem; }

/* --- voisins & pied --- */
.voisins { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem;
           padding-top: 1.2rem; border-top: 1px solid var(--trait); font-size: .88rem; }
.voisins .suiv { margin-left: auto; text-align: right; }
footer.site { max-width: var(--largeur); margin: 0 auto; padding: 1.5rem 1.2rem 3rem;
              border-top: 1px solid var(--trait); font-size: .82rem; color: var(--encre-douce); }
.mention { font-style: italic; }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 2rem 0; justify-content: center; }
.pagination a, .pagination .page-item.active span { display: inline-block; padding: .25rem .6rem;
  border: 1px solid var(--trait); border-radius: 4px; text-decoration: none; font-size: .85rem; }

@media (max-width: 560px) {
  body { font-size: 17px; }
  .billet-tete h1 { font-size: 1.6rem; }
  .carte-vignette img, .carte-vignette-vide { height: 140px; }
}

/* --- navigation en groupes + intro d auteur (ajout 2026-08-22) --- */
header.site nav { flex-wrap: wrap; gap: .5rem 1.4rem; }
.nav-groupe { display: inline-flex; gap: 1rem; padding-right: 1.2rem; border-right: 1px solid var(--trait); }
.nav-groupe:last-child { border-right: 0; padding-right: 0; }
.intro-auteur { background: var(--papier-creux); border-left: 3px solid var(--accent);
                padding: .9rem 1.1rem; border-radius: 0 6px 6px 0; margin: 1rem 0 1.6rem;
                font-size: .95rem; }
.intro-auteur p:first-child { margin-top: 0; }
.intro-auteur p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  .nav-groupe { border-right: 0; padding-right: 0; }
}

/* --- logo, video, itineraire, recherche (ajout 2026-08-22) --- */
.marque-logo { display: block; max-width: 260px; height: auto; }
/* Pas de plaque derrière le logo (Yvan, 2026-08-22) : le PNG est
   transparent et doit le rester. En thème sombre, sa mention
   « VIVRE EN BATEAU » — en gris foncé — devient illisible : c'est assumé,
   la baseline sous le logo dit la même chose en plus lisible. */
.lien-recherche { white-space: nowrap; }

.video { position: relative; padding-bottom: 56.25%; height: 0; margin: 0 0 1.6rem;
         border-radius: 8px; overflow: hidden; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.frise .etape { border-left: 3px solid var(--trait); padding: .2rem 0 1.4rem 1.2rem;
                margin-left: .4rem; position: relative; }
.frise .etape::before { content: ""; position: absolute; left: -8px; top: .8rem;
                        width: 12px; height: 12px; border-radius: 50%;
                        background: var(--accent); }
.frise .etape h2 { border: 0; margin: 0 0 .3rem; font-size: 1.3rem; }
.etape-compte { font-size: .75rem; color: var(--encre-douce); text-transform: uppercase;
                letter-spacing: .05em; margin-left: .5rem; font-weight: 400; }
.escales { margin: .2rem 0 .6rem; font-size: .92rem; line-height: 1.9; }
.escales .fleche { color: var(--encre-douce); }
.etape-photo img { width: 100%; max-width: 320px; height: 120px; object-fit: cover;
                   border-radius: 6px; display: block; }

/* Pagefind : on l'accorde à la charte plutôt que de garder son bleu par défaut */
#recherche { --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--encre);
             --pagefind-ui-background: var(--papier); --pagefind-ui-border: var(--trait);
             --pagefind-ui-font: Georgia, serif; margin-top: 1.2rem; }

.reseaux { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .8rem; }
.reseaux a { text-decoration: none; }
.reseaux a:hover { text-decoration: underline; }

/* --- bandeau et accueil (ajout 2026-08-22) --- */
.bandeau { margin: 0 0 1.6rem; }
.bandeau img { width: 100%; height: auto; display: block; border-radius: 8px; }
.accueil-texte h1 { font-size: 1.35rem; line-height: 1.45; font-weight: 400;
                    text-align: center; margin: 0 0 1rem; }
.accueil-texte h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
                    color: var(--encre-douce); border: 0; text-align: center; margin: 0; }
.accueil-texte hr { border: 0; border-top: 1px solid var(--trait); margin: 2rem 0; }
.accueil-texte ul { list-style: none; padding: 0; display: grid; gap: 1.5rem;
                    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.accueil-texte ul li { background: var(--papier-creux); border-radius: 8px;
                       padding: 1rem 1.1rem; }
.accueil-texte ul li img { width: 100%; height: 150px; object-fit: cover;
                           border-radius: 6px; margin-bottom: .6rem; }
.accueil-texte h5 { font-size: 1.05rem; margin: .2rem 0 .3rem; }
.accueil-texte h5 a { text-decoration: none; }
.accueil-texte li em { font-size: .78rem; color: var(--encre-douce); }

/* --- largeur UNIFORME (Yvan, 2026-08-22) ---
   Le mélange texte étroit / média large ne convient pas : tout doit être
   aligné. Choix retenu 1170 px, la largeur des bandeaux d'origine — c'est
   un blog de photos, et 820 px les rendait timides sur un écran de PC.
   Contrepartie assumée : une ligne de texte y fait ~110 signes, au-delà du
   confort de lecture classique (75-90). On la compense par un corps de
   texte un peu plus grand et un interligne plus aéré.
   Revenir à 820 px : une seule valeur à changer, `--largeur` ci-dessus. */
body { font-size: 19px; line-height: 1.75; }

/* baseline détachée du logo */
.marque-sous { margin-top: .55rem; letter-spacing: .06em; font-style: normal;
               text-transform: uppercase; font-size: .74rem; }

/* accueil : respirer sous « Bienvenue à bord ! Welcome » */
.accueil-texte h2 { margin: 0 0 1.6rem; }
.accueil-texte h1 { margin-top: 0; }

/* vignette de billet video : petit triangle de lecture pour la distinguer */
.carte-vignette-video { position: relative; display: block; }
.carte-vignette-video::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent rgba(255,255,255,.92);
  filter: drop-shadow(0 0 6px rgba(0,0,0,.6)); }

/* bouton de bascule clair/sombre */
#bascule-theme { background: none; border: 1px solid var(--trait); color: inherit;
  border-radius: 999px; padding: .2rem .6rem; cursor: pointer; font: inherit;
  font-size: .8rem; line-height: 1.4; }
#bascule-theme:hover { border-color: var(--accent); }

/* liens secondaires du pied de page */
.pied-pages { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin: 0 0 .8rem; }

/* Vidéo supprimée de YouTube — 12 billets, dont tout le blog d'Oscar.
   Discret : c'est une note de bas de page, pas une alerte. */
.video-absente {
  margin: 1.5rem 0;
  padding: .85rem 1.1rem;
  border-left: 3px solid var(--trait);
  background: var(--papier-creux);
  color: var(--encre-douce);
  font-size: .93rem;
  line-height: 1.55;
}

/* ============================================================
   Journal en images — planche-contact des réseaux sociaux
   2 197 éléments dont 391 vidéos. La densité est volontaire :
   on parcourt, on s'arrête sur ce qui accroche.
   ============================================================ */

/* index : une tuile par année */
.annees-grille { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 1.5rem 0;
                 grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.annees-grille a { display: block; text-decoration: none; color: inherit; }
.annee-vignette img { width: 100%; height: 120px; object-fit: cover; display: block;
                      border-radius: 6px; box-shadow: 0 1px 5px rgba(0,0,0,.28); }
.annees-grille a:hover .annee-vignette img { opacity: .85; }
.annee-titre { display: block; margin-top: .45rem; font-weight: 600; font-size: 1.15rem; }
.annee-compte { display: block; font-size: .82rem; color: var(--encre-douce); }
.galerie-bilan { color: var(--encre-douce); font-size: .9rem; }

/* la planche d'une année */
.galerie-mois { margin: 2.2rem 0; }
.galerie-mois > h2 { position: sticky; top: 0; z-index: 2; margin: 0 0 .8rem;
                     padding: .35rem 0; background: var(--papier);
                     border-bottom: 1px solid var(--trait);
                     font-size: 1.05rem; text-transform: lowercase;
                     font-variant: small-caps; letter-spacing: .04em; }
.planche { display: grid; gap: .9rem; list-style: none; padding: 0; margin: 0;
           grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.tuile { display: flex; flex-direction: column; }
.tuile .vignette { position: relative; display: block; }
.tuile .vignette img { width: 100%; height: 165px; object-fit: cover; display: block;
                       border-radius: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.tuile .vignette:hover img { opacity: .85; }
/* la pastille de lecture : sans elle, rien ne distingue une vidéo d'une photo */
.tuile-lecture { position: absolute; inset: 0; display: flex; align-items: center;
                 justify-content: center; font-size: 1.9rem; color: #fff;
                 text-shadow: 0 1px 6px rgba(0,0,0,.8); pointer-events: none; }
.tuile-meta { margin: .35rem 0 0; font-size: .74rem; color: var(--encre-douce); }
.tuile-lieu { font-style: italic; }
.tuile-legende { margin: .2rem 0 0; font-size: .8rem; line-height: 1.4;
                 display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
                 -webkit-box-orient: vertical; overflow: hidden; }

/* la visionneuse accueille désormais des vidéos */
#visionneuse video { max-width: 94vw; max-height: 88vh; background: #000; }
#visionneuse [hidden] { display: none !important; }

@media (max-width: 560px) {
  .planche { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .tuile .vignette img { height: 140px; }
}