/* ==========================================================================
   style.css — habillage du template archives-rio (charte New Site)
   Cible uniquement les classes déjà présentes sur les pages archives-rio ;
   ne modifie ni ne dépend du style.css actuel du site.
   ========================================================================== */

@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/barlow-400-normal-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/barlow-600-normal-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:800; font-display:swap;
  src:url('fonts/barlow-condensed-800-normal-latin.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-style:normal; font-weight:900; font-display:swap;
  src:url('fonts/barlow-condensed-900-normal-latin.woff2') format('woff2'); }
@font-face { font-family:'Playfair Display'; font-style:italic; font-weight:400; font-display:swap;
  src:url('fonts/playfair-display-400-italic-latin.woff2') format('woff2'); }

:root{
  --c-bg:#1A1510; --c-bg-deep:#0E0B08; --c-cream:#F5F0E8; --c-cream-alt:#EDE8DC;
  --c-red:#CC3318; --c-red-dark:#A33500; --c-gold:#C48A0C; --c-gold-bright:#E8A820;
  --c-ink:#3A2E24; --c-ink-dim:#6B5A4A;
  --f-display:'Playfair Display',serif; --f-condensed:'Barlow Condensed',sans-serif; --f-text:'Barlow',sans-serif;
  --wrap:1040px;
}
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--c-bg); background-image:none; color:var(--c-cream);
  font-family:var(--f-text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; transition:color .15s, border-color .15s; }
.container{ max-width:var(--wrap); margin:0 auto; padding:0 32px; }
@media (max-width:640px){ .container{ padding:0 20px; } }

/* ── logo : confiné à la hauteur du topbloc (40px), n'empiète jamais sur le header/menu ── */
div#logo{ position:absolute; top:0; left:0; right:0; z-index:20; height:40px; }
div#logo > div{ max-width:var(--wrap); height:100%; margin:0 auto; padding:0 32px; display:flex; align-items:center; }
div#logo a{ display:inline-flex; }
div#logo picture, div#logo img{ height:38px; width:auto; }
@media (max-width:640px){ div#logo picture, div#logo img{ height:28px; } }

/* ── topbloc : bandeau utilitaire fin, au-dessus du header ──
   Place tard dans le HTML reel (juste avant le footer, heritage de l'ancien site) mais
   doit s'afficher tout en haut de la page -- sorti du flux comme #logo, header pousse
   en dessous via margin-top plutot que de compter sur l'ordre naturel du document. */
.topbloc{ position:absolute; top:0; left:0; right:0; height:40px; z-index:15; background:var(--c-bg-deep); border-bottom:1px solid rgba(245,240,232,.08); }
.links .container{ display:flex; align-items:center; justify-content:flex-end; height:40px; gap:22px; padding-left:70px; }
.links ul{ display:flex; align-items:center; gap:22px; margin:0; padding:0; list-style:none; }
.links li{ margin:0; }
.links a{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(245,240,232,.55); text-decoration:none; }
.links a:hover{ color:var(--c-cream); }
.links .icon{ height:12px; filter:invert(1) brightness(1.6); opacity:.7; }
.links span, .text-yellow{ color:var(--c-gold) !important; font-size:12px !important; }
#devisbtn{ background:var(--c-red) !important; border:none !important; border-radius:2px; height:auto !important; padding:0 !important; }
#devisbtn a{ color:#fff !important; font-family:var(--f-condensed); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:8px 16px !important; }
#devisbtn:hover{ background:var(--c-red-dark) !important; }
@media (max-width:640px){ .links .container{ padding-left:70px; gap:12px; } .links ul{ gap:12px; } #lnktel .text-yellow, #lnkmel{ display:none; } }

/* ── header : nav principale ── */
.header{
  position:relative; background:var(--c-bg); border-top:3px solid var(--c-red);
  padding:22px 0 18px; margin:40px 0 0 !important; height:auto !important; text-align:left !important;
}
.menu{ display:flex; justify-content:flex-start; }
.menu-toggle{ display:none; background:none; border:none; padding:6px; cursor:pointer; }
.menu-toggle .bar{ display:block; width:24px; height:2px; margin:5px 0; background:var(--c-cream); }
.menu-items{
  display:flex !important; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:10px 18px; list-style:none; margin:0; padding:0; width:100%;
}
.menu-items li{ margin:0; }
.menu-items a{
  display:inline-block; white-space:nowrap; background:none !important; color:var(--c-cream) !important;
  font-family:var(--f-condensed); font-size:21px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:2px solid transparent !important; padding:0 0 3px !important; margin:0 !important; text-decoration:none;
}
.menu-items a:hover{ color:var(--c-red) !important; border-bottom-color:var(--c-red) !important; }
@media (max-width:1060px){
  .header{ padding:16px 0; }
  .menu-toggle{ display:block; position:absolute; right:20px; top:14px; z-index:30; }
  .menu-items{
    display:none !important; flex-wrap:wrap; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; padding:8px 20px 20px; background:var(--c-bg-deep);
    border-top:1px solid rgba(245,240,232,.08);
  }
  .menu-items.show{ display:flex !important; }
  .menu-items a{ display:block; width:100%; padding:12px 0 !important; border-bottom:1px solid rgba(245,240,232,.07) !important; }
}

/* ── nohero : bandeau titre d'archive ── */
.nohero{ background:var(--c-bg); padding:44px 0 40px; }
.breadcrumb-archive{ margin:0 0 20px; font-size:13px; color:rgba(245,240,232,.42); }
.breadcrumb-archive a{ color:var(--c-gold); text-decoration:none; }
.breadcrumb-archive a:hover{ color:var(--c-cream); }
.nohero h1{
  margin:0; padding:0 !important; background:none !important; font-weight:900;
  font-family:var(--f-condensed); font-size:clamp(30px,4.2vw,50px); line-height:1.02;
  color:var(--c-cream) !important; text-transform:uppercase; letter-spacing:-.01em;
}
.nohero h1 span{ color:inherit !important; }
.archive-badge{
  display:inline-flex !important; align-items:center; gap:8px;
  background:var(--c-gold) !important; color:var(--c-bg) !important;
  font-family:var(--f-condensed); font-size:11px !important; font-weight:800; letter-spacing:.16em !important;
  text-transform:uppercase; padding:7px 14px !important; border-radius:2px; margin:0 0 18px !important;
}

/* ── contenu : zone de lecture, reste claire ── */
#contenu{ background:var(--c-cream-alt); padding:52px 0 64px; }
#contenu h2{
  margin:0 0 20px; color:var(--c-red-dark); font-family:var(--f-condensed);
  font-size:clamp(24px,3.2vw,36px); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
}
#contenu h3{
  margin:34px 0 10px; color:var(--c-red); font-family:var(--f-condensed);
  font-size:14px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
}
#contenu p, #contenu li{ margin:0 0 16px; color:var(--c-ink); font-size:16px; line-height:1.8; }
#contenu a{ color:var(--c-red-dark); text-decoration:none; border-bottom:1px solid rgba(163,53,0,.28); font-weight:600; }
#contenu a:hover{ color:var(--c-red); border-bottom-color:var(--c-red); }
#contenu strong{ color:#241a12; }

/* sommaire d'un carnet : liste de jours, numérotation en compteur CSS pur */
#contenu ol{ list-style:none; counter-reset:jour; margin:26px 0 0; padding:0; }
#contenu ol li{
  counter-increment:jour; display:flex; align-items:baseline; gap:20px;
  margin:0; padding:15px 0; border-bottom:1px solid rgba(58,46,36,.14); font-size:0;
}
#contenu ol li:first-child{ padding-top:0; }
#contenu ol li::before{
  content:counter(jour,decimal-leading-zero); flex-shrink:0; width:28px;
  font-family:var(--f-condensed); font-weight:900; font-size:15px; color:var(--c-red);
}
#contenu ol li a{ font-size:16px; border-bottom:none; font-weight:500; color:var(--c-ink); }
#contenu ol li a:hover{ color:var(--c-red-dark); }
#contenu ol li:hover::before{ color:var(--c-gold); }

/* photos du carnet de voyage — même conteneur que le texte et la nav (pas de largeur à part) */
.carnet-photos{ display:flex; flex-wrap:wrap; gap:18px; margin:28px 0 8px; }
.carnet-photos figure{ margin:0; flex:1 1 260px; max-width:340px; }
.carnet-photos img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border:1px solid rgba(196,138,12,.5); box-shadow:0 6px 20px rgba(58,46,36,.18);
}
.carnet-photos figcaption{
  margin-top:8px; font-family:var(--f-display); font-style:italic; font-size:13px;
  color:var(--c-ink-dim);
}

/* nav prev/next + retour sommaire */
.carnet-nav{
  display:flex !important; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px 24px;
  margin:44px 0 0; padding-top:22px; border-top:2px dotted var(--c-gold);
  font-family:var(--f-condensed); font-weight:800; font-size:14px;
}
.carnet-nav a{ color:var(--c-red-dark); text-decoration:none; letter-spacing:.03em; text-transform:uppercase; border-bottom:none; }
.carnet-nav a:hover{ color:var(--c-red); }
.carnet-nav .next{ text-align:right; }
.carnet-sommaire{ text-align:center !important; margin:18px 0 0; }
.carnet-sommaire a{
  font-family:var(--f-condensed); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--c-gold-bright); border-bottom:none;
}
.carnet-sommaire a:hover{ color:var(--c-red); }

/* galerie d'école */
.school-rank{
  display:inline-flex !important; align-items:center; background:var(--c-red) !important; color:#fff !important;
  font-family:var(--f-condensed); font-size:13px !important; font-weight:800; letter-spacing:.1em;
  padding:7px 16px !important; border-radius:2px; margin:0 0 18px !important;
}
.gallery-grid{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 8px; }
.gallery-grid figure{ margin:0; flex:1 1 190px; max-width:230px; }
.gallery-grid img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  border:1px solid rgba(196,138,12,.5); box-shadow:0 4px 14px rgba(58,46,36,.16);
}

/* ── footer ── */
footer.footer{ background:var(--c-bg); border-top:1px solid rgba(245,240,232,.08) !important; padding:44px 0 26px; }
footer.footer ul{
  display:flex !important; flex-wrap:wrap; justify-content:space-between !important; gap:8px 18px;
  list-style:none; margin:0 0 26px; padding:0; width:100%; height:auto !important; text-align:left !important;
}
footer.footer ul li{ margin:0; font-size:14px; }
footer.footer ul li a{
  color:rgba(245,240,232,.62) !important; text-decoration:none !important; font-weight:700 !important;
  font-family:var(--f-condensed); text-transform:uppercase; letter-spacing:.05em; margin:0 !important; padding:0 !important;
  background:none !important;
}
footer.footer ul li a:hover{ color:var(--c-red) !important; }
footer.footer ul li.hglt a{ color:var(--c-gold) !important; }
footer.footer p{
  margin:0 0 8px; font-size:13px !important; color:rgba(245,240,232,.42) !important; background:none !important;
  font-weight:400 !important; line-height:1.7;
}
footer.footer a{ color:rgba(245,240,232,.62) !important; background:none !important; }
footer.footer a:hover{ color:var(--c-cream) !important; text-decoration:underline !important; }
@media (max-width:640px){ footer.footer ul{ gap:10px 18px; } }