/*
Theme Name: sans-avion
Description: Thème de l'accueil et des pages guides de sans-avion.net, d'après la synthèse graphique validée par l'auteur le 2 novembre 2026 (affiche de voyage, billets et tampons, tableau des départs).
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: sans-avion
*/

/* Polices hébergées sur le site (Google Fonts, licence SIL OFL, sous-ensemble latin) */
@font-face{ font-family:"Karla"; src:url("fonts/karla.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bodoni Moda"; src:url("fonts/bodoni-moda.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Bodoni Moda"; src:url("fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight:500 700; font-style:italic; font-display:swap; }
@font-face{ font-family:"Josefin Sans"; src:url("fonts/josefin-sans.woff2") format("woff2"); font-weight:300 700; font-style:normal; font-display:swap; }
@font-face{ font-family:"JetBrains Mono"; src:url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
@font-face{ font-family:"Courier Prime"; src:url("fonts/courier-prime-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Courier Prime"; src:url("fonts/courier-prime-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* Palette de l'affiche de voyage : papier clair, nuit bleue et or ; encres de tampon violette et rouge */
:root{
  --s-night:#0e2133; --s-night2:#16314b; --s-tile:#08131f; --s-gold:#e0ad4a; --s-paper:#f6f4ef; --s-card:#ffffff; --s-ink:#0e2133;
  --s-violet:#5a3e8e; --s-red:#a8342f; --s-muted:#5c6c7c; --s-pale:#c6d2dd; --s-white:#ffffff; --s-line:#e2ddd3;
  --s-go:#7bd88f; --s-late:#ff8a65; --s-shade:rgba(14,33,51,.28); --s-label:rgba(8,19,31,.78); --s-veil:rgba(8,19,31,.35);
  --f-text:"Karla","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --f-caps:"Josefin Sans","Futura","Century Gothic",sans-serif;
  --f-mono:"JetBrains Mono",Consolas,monospace;
  --f-type:"Courier Prime","Courier New",monospace;
  color-scheme:light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }
body{ margin:0; background:var(--s-paper); color:var(--s-ink); font-family:var(--f-text); font-size:16px; line-height:1.5; }
img{ max-width:100%; height:auto; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--s-gold); outline-offset:3px; }
.s-skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--s-white); color:var(--s-ink); padding:8px 12px; border-radius:4px; }
.s-skip:focus{ left:16px; top:16px; }
.s-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Gouttière commune */
.s-wrap{ width:100%; max-width:1264px; margin-inline:auto; padding-left:max(32px, env(safe-area-inset-left,0px)); padding-right:max(32px, env(safe-area-inset-right,0px)); }

/* Logo et menu */
.s-logo{ font-family:var(--f-serif); font-style:italic; font-weight:700; font-size:32px; line-height:1.1; letter-spacing:-.01em; color:inherit; text-decoration:none; }
.s-logo span{ font-style:normal; font-weight:500; font-size:15px; color:var(--s-pale); }
.s-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:0 22px; }
.s-nav a{ display:inline-block; padding-block:6px; font-family:var(--f-caps); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12.5px; text-decoration:none; }
.s-nav a:hover{ color:var(--s-gold); }
.s-nav .s-book{ color:var(--s-gold); }

/* Grande affiche d'ouverture */
.s-hero{ position:relative; min-height:clamp(440px,54vw,680px); display:grid; align-content:space-between; color:var(--s-white); background:var(--s-night) url("img/canada-tunnel-spirale.jpg") center/cover no-repeat; }
.s-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,33,51,.62) 0%, rgba(14,33,51,.06) 36%, rgba(14,33,51,.86) 100%); }
.s-top{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-block:18px; }
.s-hero .s-logo{ text-shadow:0 1px 12px var(--s-label); }
.s-title{ position:relative; padding-bottom:96px; }
.s-k{ width:fit-content; max-width:100%; margin:0 0 12px; padding:4px 7px 3px 10px; background:var(--s-veil); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); text-shadow:0 1px 2px var(--s-label); border-radius:2px; font-family:var(--f-caps); font-weight:300; letter-spacing:.3em; text-transform:uppercase; font-size:12px; line-height:1.3; color:var(--s-gold); }
.s-title h1{ margin:0 0 14px; max-width:900px; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(42px,6.6vw,88px); line-height:.98; text-wrap:balance; }
.s-t{ margin:0; font-size:18px; line-height:1.5; max-width:46ch; color:var(--s-pale); }
.s-cap{ position:absolute; right:16px; bottom:74px; margin:0; font-size:11px; letter-spacing:.06em; color:var(--s-pale); }
.s-cap a{ text-decoration:none; }
.s-cap a:hover{ text-decoration:underline; }

/* Tableau des départs, chiffres d'or façon panneau à palettes */
.s-board-zone{ position:relative; margin-top:-60px; scroll-margin-top:16px; }
.s-board{ background:var(--s-night); color:var(--s-white); border-radius:10px; padding:18px 20px 12px; box-shadow:0 12px 30px var(--s-shade); }
.s-board-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; font-family:var(--f-caps); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:var(--s-gold); }
.s-board-head h2{ margin:0; font:inherit; }
.s-scroll{ overflow-x:auto; }
.s-board table{ width:100%; min-width:640px; border-collapse:separate; border-spacing:0 6px; font-family:var(--f-mono); font-size:14px; font-variant-numeric:tabular-nums; }
.s-board th{ text-align:left; font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--s-pale); padding:0 10px 2px; }
.s-board td{ padding:7px 10px; background:var(--s-night2); color:var(--s-white); }
.s-board td:first-child{ border-radius:6px 0 0 6px; }
.s-board td:last-child{ border-radius:0 6px 6px 0; }
.s-board td a{ text-decoration:none; border-bottom:1px solid rgba(224,173,74,.45); }
.s-board td a:hover{ color:var(--s-gold); border-bottom-color:var(--s-gold); }
.s-flap{ display:inline-flex; gap:3px; }
.s-flap i{ font-style:normal; display:inline-grid; place-items:center; width:1.4em; height:1.75em; background:var(--s-tile); color:var(--s-gold); border-radius:3px; position:relative; }
.s-flap i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--s-night); }
.s-st{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.s-st::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--s-go); }
.s-st.late{ color:var(--s-late); }
.s-st.late::before{ background:var(--s-late); }

/* Sections */
.s-sec{ padding-block:40px; display:grid; gap:18px; scroll-margin-top:16px; }
.s-h{ margin:0; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(28px,3.4vw,38px); }

/* Billets */
.s-tickets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr)); gap:18px; }
.s-ticket{ display:grid; grid-template-columns:78px minmax(0,1fr); background:var(--s-card); border:1px solid var(--s-line); border-radius:10px; overflow:hidden; text-decoration:none; transition:box-shadow .2s ease, transform .2s ease; }
.s-ticket:hover{ box-shadow:0 8px 22px var(--s-shade); transform:translateY(-2px); }
.s-stub{ background:var(--s-night); color:var(--s-gold); display:grid; place-items:center; font-family:var(--f-mono); font-weight:600; font-size:21px; letter-spacing:.14em; writing-mode:vertical-rl; transform:rotate(180deg); border-left:2px dashed var(--s-paper); }
.s-tbody{ display:grid; grid-template-columns:minmax(0,1fr) 124px; gap:14px; padding:14px 16px; align-items:center; }
.s-tbody img{ width:124px; height:100px; object-fit:cover; border-radius:6px; }
.s-route{ margin:0 0 8px; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:25px; line-height:1.1; }
.s-fields{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; font-family:var(--f-type); font-size:13.5px; }
.s-fields dt{ color:var(--s-muted); text-transform:uppercase; letter-spacing:.06em; font-size:11px; padding-top:2px; }
.s-fields dd{ margin:0; }

/* Mosaïque de photos */
.s-mosaic{ max-width:1440px; margin-inline:auto; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-auto-rows:clamp(150px,18vw,230px); gap:10px; padding:0 10px 10px; }
.s-tile{ position:relative; display:block; overflow:hidden; border-radius:2px; background:var(--s-night); text-decoration:none; }
.s-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }
.s-tile:hover img{ transform:scale(1.04); }
.s-lbl{ position:absolute; left:0; right:0; bottom:0; padding:22px 16px 14px; background:linear-gradient(transparent, rgba(14,33,51,.88)); color:var(--s-white); }
.s-lbl-k{ display:block; font-size:11px; color:var(--s-gold); letter-spacing:.16em; text-transform:uppercase; margin-bottom:3px; }
.s-lbl-t{ display:block; font-family:var(--f-caps); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:16px; }
.t-big{ grid-column:span 3; grid-row:span 2; }
.t-half{ grid-column:span 3; }
.t-third{ grid-column:span 2; }

/* Bandeau panoramique */
.s-band{ position:relative; min-height:clamp(220px,26vw,330px); background:var(--s-night) url("img/uyuni-panorama.jpg") center/cover no-repeat; display:grid; place-items:center; text-align:center; color:var(--s-white); padding:28px 20px; }
.s-band::before{ content:""; position:absolute; inset:0; background:rgba(14,33,51,.5); }
.s-band blockquote{ position:relative; margin:0; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(28px,3.8vw,50px); line-height:1.1; max-width:22ch; text-wrap:balance; }
.s-band cite{ position:relative; display:block; margin-top:14px; font-family:var(--f-caps); font-weight:300; font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--s-gold); }
.s-band cite a{ text-decoration:none; }
.s-band cite a:hover{ text-decoration:underline; }

/* Tampons du passeport */
.s-stamps{ display:flex; flex-wrap:wrap; gap:16px; }
.s-stamp{ font-family:var(--f-type); font-weight:700; text-transform:uppercase; font-size:11.5px; letter-spacing:.08em; line-height:1.2; text-align:center; text-decoration:none; border:2px solid currentColor; border-radius:50%; width:88px; height:88px; display:grid; place-items:center; padding:8px; color:var(--s-violet); transform:rotate(-8deg); transition:transform .2s ease; }
.s-stamp:nth-child(2n){ color:var(--s-red); border-radius:10px; transform:rotate(6deg); }
.s-stamp:nth-child(3n){ transform:rotate(-2deg); }
.s-stamp.soon{ color:var(--s-muted); border-style:dashed; }
.s-stamps a.s-stamp:hover{ transform:rotate(0deg) scale(1.06); }

/* Bande de nuit : publicité */
.s-night{ background:var(--s-night); }
.s-night:has(ins.adsbygoogle[data-ad-status="unfilled"]){ display:none; }
.s-pub{ padding-block:28px; display:grid; justify-items:center; gap:8px; }
.s-pub-k{ margin:0; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--s-pale); }

/* Carnet */
.s-log{ background:var(--s-card); border:1px solid var(--s-line); border-radius:8px; padding:20px 22px; font-family:var(--f-type); font-size:15px; line-height:1.6; display:grid; gap:8px; }
.s-log p{ margin:0; }
.s-log b{ color:var(--s-red); font-weight:700; }

/* Jeux */
.s-games{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; }
.s-game{ display:flex; gap:14px; align-items:center; background:var(--s-card); border:1px solid var(--s-line); border-radius:10px; padding:12px 14px; text-decoration:none; transition:box-shadow .2s ease; }
.s-game:hover{ box-shadow:0 8px 22px var(--s-shade); }
.s-game img, .s-game .ph{ width:64px; height:82px; object-fit:cover; border-radius:4px; flex:none; }
.s-game .ph{ background:var(--s-night); color:var(--s-gold); display:grid; place-items:center; font-family:var(--f-serif); font-style:italic; font-size:30px; }
.s-game h3{ margin:0 0 4px; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:21px; }
.s-game p{ margin:0; font-size:14px; color:var(--s-muted); line-height:1.4; }

/* Pied de page */
.s-foot{ background:var(--s-night); color:var(--s-pale); }
.s-foot .s-wrap{ padding-block:28px; display:grid; gap:8px; font-size:14px; line-height:1.6; }
.s-foot p{ margin:0; }
.s-foot .s-logo{ color:var(--s-white); width:fit-content; }
.s-foot a{ color:var(--s-white); }

/* Pages intérieures (pages guides à venir) */
.s-bar{ background:var(--s-night); color:var(--s-white); }
.s-bar .s-wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-block:16px; }
.s-page{ padding-block:48px 64px; }
.s-page article{ max-width:72ch; margin-inline:auto; }
.s-page h1{ margin:0 0 20px; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(34px,5vw,56px); line-height:1.05; text-wrap:balance; }
.s-contenu{ font-size:18px; line-height:1.65; }
.s-contenu h2{ font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:30px; line-height:1.15; margin:1.6em 0 .5em; text-wrap:balance; }
.s-contenu h3{ font-family:var(--f-caps); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:15px; margin:1.6em 0 .4em; }
.s-contenu a{ color:var(--s-red); }
.s-contenu img{ border-radius:4px; }

@media (max-width:720px){
  .s-wrap{ padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(18px, env(safe-area-inset-right,0px)); }
  .s-hero{ background-image:url("img/canada-tunnel-spirale-1280.jpg"); }
  .s-band{ background-image:url("img/uyuni-panorama-1280.jpg"); }
  .s-title{ padding-bottom:76px; }
  .s-board-zone{ margin-top:-44px; }
  .s-board-zone .s-wrap{ padding-left:max(10px, env(safe-area-inset-left,0px)); padding-right:max(10px, env(safe-area-inset-right,0px)); }
  .s-board{ padding:14px 12px 8px; }
  .s-cap{ display:none; }
  .s-mosaic{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:170px; }
  .s-mosaic .t-big{ grid-column:span 2; grid-row:span 2; }
  .s-mosaic .t-half, .s-mosaic .t-third{ grid-column:span 2; }
}
@media (max-width:480px){
  .s-tbody{ grid-template-columns:1fr; }
  .s-tbody img{ width:100%; height:140px; }
}
@media (prefers-reduced-motion: reduce){
  .s-tile img, .s-ticket, .s-stamp, .s-game{ transition:none; }
  .s-tile:hover img{ transform:none; }
  .s-ticket:hover{ transform:none; }
}