:root{
  --frame:#1c1813; --panel:#fffdf9; --ink:#33291f; --muted:#8a7c6d;
  --accent:#c2602f; --accent-d:#9c4a20; --green:#6f9a55; --line:#ece3d6;
  --display:"Playfair Display",Georgia,serif; --serif:"Lora",Georgia,serif;
  --max:1000px; --measure:66ch;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#1c1813;
  background:radial-gradient(120% 80% at 50% -10%,#2a221b 0%,#1a1611 60%) fixed;
  font-family:var(--serif);color:var(--ink);line-height:1.72;font-size:17.5px;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}
a{color:var(--accent);text-decoration:none;text-underline-offset:2px;transition:color .15s}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3,.brand{font-family:var(--display);font-weight:700;letter-spacing:.2px;color:#2a221a}

/* ---- top bar (on dark frame) ---- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(24,20,15,.94);backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:1rem;padding:.7rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{color:#fbf6ee;font-size:1.32rem;line-height:1.05;max-width:260px;letter-spacing:.3px}
.brand:hover{text-decoration:none;color:#fff;opacity:.92}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}
.mainnav{margin-left:auto}
.mainnav>ul{list-style:none;display:flex;gap:.45rem;margin:0;padding:0}
.mainnav>ul>li>a{display:block;color:#4a3a2b;background:linear-gradient(#f7d6a0,#ecb878);
  padding:.5rem .95rem;border-radius:8px;font-weight:600;font-size:.9rem;letter-spacing:.2px;
  box-shadow:0 1px 2px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.45);border:1px solid rgba(120,70,20,.3);
  transition:transform .12s,filter .12s}
.mainnav>ul>li>a:hover{filter:brightness(1.05);transform:translateY(-1px);text-decoration:none}
.mainnav>ul>li.cur>a{background:linear-gradient(#a6cc86,var(--green));border-color:#5d8745;color:#1f2e16}
.mainnav>ul>li.backall>a{background:transparent;border:1px solid rgba(251,246,238,.45);color:#f3ead9}
.mainnav>ul>li.backall>a:hover{background:rgba(251,246,238,.14);filter:none}
.has-sub{position:relative}
.sub{display:none;position:absolute;top:100%;right:0;margin-top:6px;min-width:250px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);padding:.4rem;max-height:74vh;overflow:auto}
/* invisible bridge spanning the 6px gap so moving the cursor onto the dropdown keeps it open */
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:10px}
.has-sub:hover .sub{display:block}
.sub li a{display:block;color:var(--ink);padding:.45rem .7rem;border-radius:7px;font-size:.92rem}
.sub li a:hover{background:#faf3e8;text-decoration:none;color:var(--accent-d)}
.sub ul{list-style:none;margin:0;padding:0}

/* ---- panel / content ---- */
main{max-width:var(--max);margin:1.6rem auto;background:var(--panel);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.04)}
.wrap{padding:2.6rem clamp(1.1rem,4vw,3.6rem) 3.2rem}
article h1{font-size:clamp(2rem,4vw,2.7rem);line-height:1.08;margin:0 0 .9rem;color:#241d16;padding-bottom:.55rem;position:relative}
article h1::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--green))}
.subtitle{font-family:var(--display);font-style:italic;color:var(--accent-d);font-size:1.4rem;line-height:1.4;margin:.2rem 0 1.7rem;max-width:var(--measure)}
.prose p, .blocktext{margin:0 0 1.2rem;hyphens:auto}
/* journal récits: comfortable reading measure + drop cap + lead opening paragraph */
.jr .blocktext, .jr .subtitle{max-width:var(--measure);text-align:justify}
.jr .blocktext:first-of-type{font-size:1.07em;color:#3a2f24}
.jr .blocktext:first-of-type::first-letter{font-family:var(--display);float:left;font-size:3.5rem;line-height:.8;
  font-weight:700;color:var(--accent-d);padding:.04em .12em 0 0}
.rule{height:1px;background:var(--line);border:0;margin:1.8rem 0}

/* elegant, consistent section headers on photo gallery pages */
.gallery-cap{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.5rem;color:var(--accent-d);
  margin:2.2rem 0 .35rem;display:flex;align-items:center;gap:1rem;letter-spacing:.2px}
.gallery-cap span{flex:0 0 auto}
.gallery-cap::after{content:"";flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,rgba(194,96,47,.38),rgba(194,96,47,0))}
.gallery-cap:first-of-type{margin-top:.5rem}

/* ---- hero ---- */
.hero{position:relative;height:min(56vh,460px);display:flex;align-items:flex-end}
.hero .slides{position:absolute;inset:0}
.hero .slides div{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;animation:fade 18s infinite}
.hero .slides div:nth-child(1){animation-delay:0s}.hero .slides div:nth-child(2){animation-delay:6s}.hero .slides div:nth-child(3){animation-delay:12s}
@keyframes fade{0%{opacity:0}4%{opacity:1}30%{opacity:1}38%{opacity:0}100%{opacity:0}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(20,12,6,.78))}
.hero h1{position:relative;z-index:2;color:#fff;font-size:clamp(2.1rem,5.2vw,3.5rem);line-height:1.05;margin:0;
  padding:1.7rem clamp(1.1rem,4vw,3.6rem) 1.9rem;text-shadow:0 2px 18px rgba(0,0,0,.65);letter-spacing:.3px}
.hero h1::before{content:"";display:block;width:54px;height:3px;border-radius:3px;margin-bottom:.7rem;
  background:linear-gradient(90deg,var(--accent),#f0b35e);box-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ---- horizontal photo strips (Wix-style mini-galleries, scroll left/right) ---- */
.strip-wrap{position:relative;margin:1.4rem 0}
.gallery{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;
  padding:9px 2px 16px;scrollbar-width:thin;scrollbar-color:#cdbfab #f0e8db}
.gallery.inline{margin:0}
.gallery a{flex:0 0 auto;height:300px;min-width:120px;overflow:hidden;border-radius:7px;background:#efe9e0;line-height:0;
  box-shadow:0 3px 10px rgba(60,40,20,.16)}
.gallery.inline a{height:260px}
.gallery img{height:100%;width:auto;display:block;transition:transform .35s}
.gallery a:hover img{transform:scale(1.04)}
.gallery::-webkit-scrollbar{height:8px}
.gallery::-webkit-scrollbar-thumb{background:#cdbfab;border-radius:4px}
.gallery::-webkit-scrollbar-track{background:#f0e8db;border-radius:4px}
.strip-nav{position:absolute;top:calc(50% - 6px);transform:translateY(-50%);z-index:5;width:44px;height:44px;
  border:0;border-radius:50%;background:rgba(27,23,20,.55);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;opacity:.9;transition:opacity .15s,background .15s;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.strip-nav:hover{opacity:1;background:rgba(27,23,20,.85)}
.strip-nav.prev{left:8px}.strip-nav.next{right:8px}
.strip-nav.hidden{opacity:0;pointer-events:none}

/* ---- masonry patchwork (Mes Préférées) ---- */
.masonry{column-count:4;column-gap:8px;margin:1.4rem 0}
.masonry a{display:block;margin:0 0 8px;break-inside:avoid;border-radius:7px;overflow:hidden;line-height:0;background:#efe9e0;
  box-shadow:0 3px 10px rgba(60,40,20,.16)}
.masonry img{width:100%;height:auto;display:block;transition:transform .35s}
.masonry a:hover img{transform:scale(1.03)}
@media(max-width:900px){.masonry{column-count:3}}
@media(max-width:560px){.masonry{column-count:2;column-gap:6px}}

/* ---- home tiles : 5 portrait tiles on one row, colored caption + clickable label ---- */
main.home{max-width:1120px}
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:1.15rem;margin-top:1.8rem}
.tile{display:flex;flex-direction:column;width:182px;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.1);transition:.22s}
.tile:hover{transform:translateY(-5px);box-shadow:0 16px 32px rgba(0,0,0,.22);text-decoration:none}
.tile-img{aspect-ratio:2/3;background-size:cover;background-position:center;transition:transform .45s}
.tile:hover .tile-img{transform:scale(1.05)}
.tile-cap{padding:.7rem .7rem .9rem;border-top:4px solid var(--accent);text-align:center}
.tile-cap h3{margin:0;font-size:1.04rem;line-height:1.25;color:var(--accent-d);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.tile:hover .tile-cap h3{text-decoration:none}
.tile-cap p{margin:.3rem 0 0;color:var(--muted);font-size:.8rem;line-height:1.35}
/* ---- Photos index : one portrait tile per country (title below photo, like the Wix Photos page) ---- */
.ptiles{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem 1.2rem;margin:2rem 0 1.2rem;align-items:start}
.ptile{--accent:#6f9a55;display:flex;flex-direction:column;text-decoration:none;border-radius:11px;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.ptile:hover{transform:translateY(-6px);box-shadow:0 16px 34px rgba(0,0,0,.46)}
.ptile-img{aspect-ratio:3/4;background-size:cover;background-position:center;background-color:#cabfb0}
.ptile-cap{margin:0;padding:.6rem .5rem;text-align:center;font-family:'Playfair Display',serif;font-weight:600;
  font-size:1rem;line-height:1.2;color:#fff;background:var(--accent)}
.ptile:nth-child(7n+1){--accent:#6f9a55}
.ptile:nth-child(7n+2){--accent:#cf7a43}
.ptile:nth-child(7n+3){--accent:#4f93b8}
.ptile:nth-child(7n+4){--accent:#d2a23f}
.ptile:nth-child(7n+5){--accent:#9b7fb0}
.ptile:nth-child(7n+6){--accent:#5fa37a}
.ptile:nth-child(7n+7){--accent:#cf6a5a}
@media(min-width:861px){
  .ptile:nth-child(5n+2),.ptile:nth-child(5n+4){margin-top:30px}
  .ptile:nth-child(5n+3){margin-top:15px}
}

.t-parc .tile-img{background-size:contain;background-repeat:no-repeat;background-color:#eaf1f5}
.t-parc .tile-cap{border-color:#6f9a55}.t-parc .tile-cap h3{color:#4f7339}
.t-carn .tile-cap{border-color:#c2602f}.t-carn .tile-cap h3{color:#9c4a20}
.t-phot .tile-cap{border-color:#3f7fa6}.t-phot .tile-cap h3{color:#2c5f80}
.t-cont .tile-cap{border-color:#b8843a}.t-cont .tile-cap h3{color:#8c612a}
.t-lien .tile-cap{border-color:#8a6fa0}.t-lien .tile-cap h3{color:#6a5280}
/* Parcours : carte Google MyMaps integree */
.map-embed{margin:1.4rem 0 .6rem}
.map-embed iframe{display:block;width:100%;height:72vh;min-height:420px;border:0;border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);background:#e8e4dc}
/* Carnets de voyage : index des récits (cartes colorées, titre + extrait) */
.jcards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:1.8rem 0}
.jcard{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;text-decoration:none;background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.13);transition:transform .22s,box-shadow .22s}
.jcard:hover{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.26)}
.jcard-h{padding:.55rem .55rem;background:var(--accent,#6f9a55);color:#fff;text-align:center;
  font-family:'Playfair Display',serif;font-weight:600;font-size:1.02rem;line-height:1.2}
.jcard-x{padding:.7rem .75rem .9rem;color:#574e46;font-size:.79rem;line-height:1.4;flex:1}
.jcard.j1{--accent:#4f93b8}.jcard.j2{--accent:#d2a23f}.jcard.j3{--accent:#5fa37a}
.jcard.j4{--accent:#cf6a5a}.jcard.j5{--accent:#9b7fb0}.jcard.j6{--accent:#cf7a43}
@media(max-width:880px){ .jcards{grid-template-columns:repeat(2,1fr)} }
.map-img{width:100%;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.15);margin:1rem 0}
.btn{display:inline-block;background:linear-gradient(var(--accent),var(--accent-d));color:#fff;padding:.72rem 1.5rem;
  border-radius:9px;font-weight:600;letter-spacing:.3px;margin-top:.6rem;box-shadow:0 4px 12px rgba(156,74,32,.35);
  transition:transform .12s,box-shadow .15s}
.btn:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 20px rgba(156,74,32,.45)}

/* ---- contact form ---- */
.cform{max-width:560px;margin:1.4rem 0 0}
.cform .field{margin-bottom:1.1rem;display:flex;flex-direction:column}
.cform label{font-weight:600;color:#3a2f24;margin-bottom:.38rem;font-size:.98rem}
.cform .req{color:var(--accent)}
.cform input,.cform textarea{font-family:var(--serif);font-size:1rem;color:var(--ink);background:#fbf7f0;
  border:1px solid #e0d4c2;border-radius:9px;padding:.7rem .85rem;width:100%;transition:border-color .15s,box-shadow .15s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(194,96,47,.16)}
.cform textarea{resize:vertical;min-height:150px;line-height:1.6}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.cform .btn{cursor:pointer;border:0}
.form-msg{display:none;margin:0 0 1.3rem;padding:.85rem 1.1rem;border-radius:9px;font-weight:600;max-width:560px}
.form-msg.ok{display:block;background:#e9f2df;color:#3f6b29;border:1px solid #aacb8d}
.form-msg.err{display:block;background:#f8e3db;color:#9c4a20;border:1px solid #e3ab93}
.social{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;color:#3a2f24;
  padding:.55rem 1rem;border:1px solid var(--line);border-radius:10px;transition:transform .12s,background .15s,border-color .15s}
.social-link:hover{text-decoration:none;transform:translateY(-2px);background:#f6f2ea}
.social-link.fb{color:#1877f2}.social-link.fb:hover{border-color:#bcd0f0;background:#f2f6fd}

/* ---- lightbox ---- */
#lb{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.94);align-items:center;justify-content:center}
#lb.on{display:flex}
#lb img{max-width:94vw;max-height:92vh;object-fit:contain;border-radius:4px}
#lb .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:3rem;color:#fff;cursor:pointer;
  padding:.4rem 1rem;user-select:none;opacity:.7}
#lb .nav:hover{opacity:1}
#lb .prev{left:1vw}#lb .next{right:1vw}
#lb .x{position:absolute;top:1rem;right:1.4rem;font-size:2.2rem;color:#fff;cursor:pointer;opacity:.8}
#lb .count{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;color:#fff;font-size:.9rem;opacity:.8}

footer{color:#c9b89f;text-align:center;font-family:var(--display);font-style:italic;font-size:1rem;
  letter-spacing:.3px;padding:2rem 1.6rem 2.4rem;position:relative}
footer::before{content:"";display:block;width:46px;height:2px;margin:0 auto 1rem;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--green));opacity:.8}

@media(max-width:760px){
  body{font-size:16px}
  .burger{display:block}
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#231c15;padding:.6rem}
  body.nav-open .mainnav{display:block}
  .mainnav>ul{flex-direction:column}
  .has-sub .sub{display:block;position:static;background:transparent;border:0;box-shadow:none;padding-left:.6rem;max-height:none;margin-top:0}
  .has-sub::after{display:none}
  .sub li a{color:#f0e6d8}
  main{margin:.6rem;border-radius:10px}
  article h1{font-size:1.9rem}
  .gallery a{height:210px}.gallery.inline a{height:185px}
  .strip-nav{width:38px;height:38px;font-size:1.5rem}
}
@media(max-width:860px){ .tiles,.ptiles{grid-template-columns:repeat(3,1fr)} }
@media(max-width:520px){ .tiles,.ptiles{grid-template-columns:repeat(2,1fr);gap:.7rem} }