/*
Theme Name: Plan de Vol
Theme URI: https://leplandevol.com
Author: Monnaies & Libertes
Author URI: https://monnaieslibertes.com
Description: Theme editorial minimal pour le blog Plan de Vol. Charte creme, Instrument Serif, accent or. Classic theme fait main, sans page builder ni dependance externe. Systeme visuel "dossier de decision" : cartes a image vedette, composants editoriaux chartes.
Version: 1.1.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plan-de-vol
*/

/* ============================================================
   1. Polices self-hosted (memes fichiers que le site statique)
   ============================================================ */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/instrumentserif-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/instrumentserif-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/instrumentserif-italic-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ============================================================
   2. Jetons de charte (identiques a la maquette validee)
   ============================================================ */
:root{
  --cream:#faf9f7;
  --card:#fffdf8;
  --cream-contrast:#f3efe7;
  --ink:#1a1a1a;
  --gold:#c49a3c;
  --gold-hover:#b38a30;
  --gold-soft:#f2e6cf;
  --muted:#6f685d;
  --faint:#a99a7a;
  --line:#ece6dc;
  --line-mid:#ddd4c6;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:760px;
}

/* ============================================================
   3. Fondations
   ============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{overflow-x:clip;}
body{margin:0;background:linear-gradient(180deg,#fbf7ef 0%,#faf9f7 420px,#faf9f7 100%);
  color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.68;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-wide{max-width:1120px;margin:0 auto;padding:0 24px;}
a{color:var(--gold-hover);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:3px;}
img{max-width:100%;height:auto;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px;}

.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);}
.serif{font-family:var(--serif);}
.diamond{display:flex;align-items:center;gap:14px;color:var(--line-mid);margin:40px 0;}
.diamond::before,.diamond::after{content:"";height:1px;background:var(--line-mid);flex:1;}
.diamond i{width:7px;height:7px;background:var(--gold);transform:rotate(45deg);display:block;}

/* ============================================================
   4. Boutons
   ============================================================ */
.btn{position:relative;display:inline-block;font-family:var(--body);font-size:13.5px;font-weight:600;
  letter-spacing:.02em;text-decoration:none;padding:13px 22px;border-radius:2px;
  transition:background .18s,color .18s,transform .18s,box-shadow .18s;cursor:pointer;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--gold);color:#fff;box-shadow:0 10px 24px -16px rgba(120,90,30,.7);}
.btn-primary:hover{background:var(--gold-hover);color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -16px rgba(120,90,30,.75);}
.btn-outline{border:1.5px solid var(--gold);color:var(--ink);}
.btn-outline:hover{background:var(--gold-soft);color:var(--ink);transform:translateY(-2px);}

/* ============================================================
   5. En-tete (2 rangees : marque + CTA, puis navigation)
   ============================================================ */
.site-header{position:relative;z-index:3;border-bottom:1px solid var(--line);background:rgba(250,249,247,.86);
  backdrop-filter:saturate(140%) blur(6px);}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;
  max-width:1120px;margin:0 auto;padding:20px 24px 2px;}
.logo{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit;}
.logo:hover{text-decoration:none;}
.logo .name{font-family:var(--serif);font-size:30px;letter-spacing:.01em;color:var(--ink);}
.logo .by{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:7px;}
.logo .by b{color:var(--gold);font-weight:600;}
.nav-cta{white-space:nowrap;}
.nav{flex-basis:100%;display:flex;padding:6px 0 0;}
.nav-list{list-style:none;display:flex;align-items:center;gap:24px;margin:0;padding:0;flex-wrap:wrap;}
.nav-link{font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--ink);
  text-decoration:none;padding:8px 0;display:inline-block;border-bottom:2px solid transparent;}
.nav-link:hover{color:var(--gold-hover);text-decoration:none;}
.nav-link.is-active{color:var(--gold-hover);border-bottom-color:var(--gold);}

/* ============================================================
   6. Page listing (accueil blog + archives) : systeme de cartes
   ============================================================ */
.page-lead{position:relative;z-index:1;padding:52px 0 8px;}
.page-lead .eyebrow{display:block;margin-bottom:14px;}
.page-lead h1{font-family:var(--serif);font-weight:400;font-size:52px;line-height:1.05;margin:0 0 14px;color:#171512;}
.page-lead .desc{font-size:18px;color:var(--muted);max-width:38em;margin:0;}

.post-list{position:relative;z-index:1;padding:30px 0 20px;}

/* Media commun (image vedette ou repli) : ratio 16:9, zero CLS via aspect-ratio. */
.card-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--cream-contrast);text-decoration:none;}
.card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.card-media-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:100%;height:100%;padding:24px;background:linear-gradient(140deg,#f6f0e5 0%,#efe6d5 100%);text-decoration:none;}
.card-media-fallback:hover{text-decoration:none;}
.card-media-fallback .cmf-mark{width:8px;height:8px;background:var(--gold);transform:rotate(45deg);margin-bottom:15px;opacity:.9;}
.card-media-fallback .cmf-cat{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,34px);line-height:1.08;color:#b7a985;}

/* Carte pleine largeur (premier article) : image a gauche 54 %, texte a droite.
   L'image garde son ratio 16:9 natif (les covers sont des compositions completes,
   on ne les recadre pas), le texte est centre verticalement a cote. */
.card-feature{display:grid;grid-template-columns:54% 1fr;background:var(--card);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;margin-bottom:28px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card-feature:hover{transform:translateY(-2px);border-color:var(--line-mid);box-shadow:0 8px 20px -12px rgba(40,35,25,.26);}
.card-feature .card-media{aspect-ratio:16/9;align-self:start;}
/* Repli sans image en carte vedette : le panneau creme remplit toute la hauteur
   (pas de recadrage a craindre), aucun ruban vide sous le bloc. */
.card-feature .card-media:has(.card-media-fallback){align-self:stretch;aspect-ratio:auto;min-height:300px;}
.card-feature .card-body{padding:32px 42px;align-self:center;}
.card-feature .kicker{font-size:12px;margin-bottom:12px;}
.card-feature h2{font-size:31px;line-height:1.12;margin:0 0 13px;}
.card-feature .excerpt{-webkit-line-clamp:2;font-size:16px;margin:0 0 16px;}

/* Grille des articles suivants : 2 colonnes desktop, 1 colonne mobile. */
.post-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}

/* Carte standard : image en tete, corps dessous. */
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.card:hover{transform:translateY(-2px);border-color:var(--line-mid);box-shadow:0 8px 20px -12px rgba(40,35,25,.26);}
.card-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 24px;}
.card .kicker{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
.card h2{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:0 0 11px;}
.card h2 a{color:var(--ink);text-decoration:none;}
.card h2 a:hover{color:var(--gold-hover);text-decoration:none;}
.card .excerpt{font-size:16px;line-height:1.55;color:#3a352e;margin:0 0 18px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .meta{margin:auto 0 0;font-size:13px;color:var(--faint);}
.card .meta .sep{color:var(--line-mid);}

/* pagination */
.pagination{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:30px 0 8px;}
.pagination .page-numbers{display:inline-block;padding:9px 15px;border:1px solid var(--line-mid);border-radius:4px;
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--card);}
.pagination .page-numbers:hover{background:var(--gold-soft);text-decoration:none;}
.pagination .page-numbers.current{background:var(--gold);color:#fff;border-color:var(--gold);}

/* ============================================================
   7. Article (single)
   ============================================================ */
.single-main{position:relative;z-index:1;padding:8px 0 20px;}
.post-head{padding:48px 0 8px;}
.post-head .eyebrow{display:block;margin-bottom:16px;}
.post-head h1{font-family:var(--serif);font-weight:400;font-size:46px;line-height:1.08;margin:0 0 18px;color:#171512;letter-spacing:.004em;}
.post-meta{font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.post-meta .sep{color:var(--line-mid);}
.post-meta .by{font-weight:600;color:#4a453d;}

/* Image vedette = LCP : cadre 16:9, zero CLS, jamais en lazy (cf single.php). */
.post-featured{margin:30px 0 8px;}
.post-featured .pf-frame{aspect-ratio:16/9;overflow:hidden;border-radius:6px;border:1px solid var(--line);background:var(--cream-contrast);}
.post-featured .pf-img{width:100%;height:100%;object-fit:cover;display:block;}
.post-featured figcaption{font-size:13px;color:var(--faint);margin-top:10px;font-style:italic;}

.entry{font-size:18px;line-height:1.75;color:#26221c;}
.entry > *{margin:0 0 1.15em;}
.entry h2{font-family:var(--serif);font-weight:400;font-size:33px;line-height:1.16;margin:1.7em 0 .5em;color:#171512;scroll-margin-top:24px;}
.entry h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;margin:1.5em 0 .45em;color:#171512;scroll-margin-top:24px;}
.entry h4{font-family:var(--body);font-weight:700;font-size:18px;letter-spacing:.01em;margin:1.5em 0 .4em;}
.entry a{color:var(--gold-hover);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.entry a:hover{color:var(--gold);}
.entry strong{font-weight:700;color:#171512;}
.entry ul,.entry ol{padding-left:1.3em;}
.entry li{margin:0 0 .5em;}
.entry ul li::marker{color:var(--gold);}
.entry blockquote{margin:1.6em 0;padding:6px 0 6px 26px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-size:25px;line-height:1.4;color:#2c281f;font-style:italic;}
.entry blockquote p{margin:0 0 .3em;}
.entry blockquote cite{display:block;font-family:var(--body);font-style:normal;font-size:14px;color:var(--muted);margin-top:8px;}
.entry img{border-radius:6px;border:1px solid var(--line);}
.entry figure{margin:1.6em 0;}
.entry figcaption{font-size:13px;color:var(--faint);text-align:center;margin-top:8px;font-style:italic;}
.entry code{background:#f3eee2;border:1px solid var(--line);border-radius:3px;padding:1px 6px;font-size:.9em;}
.entry hr{border:0;border-top:1px solid var(--line-mid);margin:2em 0;}

/* Tables chartees : entetes petites capitales or, zebrage doux, filets horizontaux seuls. */
.pdv-table-wrap{margin:1.7em 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:6px;background:var(--card);}
.entry table,.pdv-table-wrap table{width:100%;border-collapse:collapse;font-size:15.5px;margin:0;}
.entry th,.entry td,.pdv-table-wrap th,.pdv-table-wrap td{padding:12px 16px;text-align:left;
  border:0;border-bottom:1px solid var(--line);vertical-align:top;}
.entry thead th,.pdv-table-wrap thead th{font-family:var(--body);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:#f6efe1;border-bottom:1px solid var(--line-mid);white-space:nowrap;}
.entry tbody tr:nth-child(even),.pdv-table-wrap tbody tr:nth-child(even){background:rgba(196,154,60,.05);}
.entry tbody tr:last-child td,.pdv-table-wrap tbody tr:last-child td{border-bottom:0;}
/* table hors wrapper (repli) : garde une respiration */
.entry > table{display:block;overflow-x:auto;border:1px solid var(--line);border-radius:6px;}

/* Sommaire ancre "Dans cet article" (genere en PHP, articles longs). */
.pdv-toc{margin:2em 0 2.2em;padding:6px 0 6px 22px;border-left:2px solid var(--gold);}
.pdv-toc .pdv-toc-title{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:13px;}
.pdv-toc ul{list-style:none;margin:0;padding:0;}
.pdv-toc li{margin:0 0 10px;line-height:1.4;}
.pdv-toc li:last-child{margin-bottom:0;}
.pdv-toc a{font-family:var(--body);font-size:15.5px;color:#3a352e;text-decoration:none;}
.pdv-toc a:hover,.pdv-toc a:focus{color:var(--gold-hover);text-decoration:underline;text-underline-offset:3px;}

/* Composant : chiffre-heros en exergue. Pas de fond, filets fins, grandes marges. */
.pdv-chiffre{margin:2.4em auto;padding:1.15em 0;text-align:center;
  border-top:1px solid var(--line-mid);border-bottom:1px solid var(--line-mid);}
.pdv-chiffre .pc-num{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,8vw,72px);line-height:1;color:var(--gold);padding:0 18px;}
.pdv-chiffre .pc-legend{display:block;font-family:var(--body);font-size:14.5px;line-height:1.45;
  color:var(--muted);margin-top:15px;padding:0 18px;}

/* Composant : encadre "Les questions a poser". Rail or a noeuds a gauche. */
.pdv-questions{position:relative;margin:2em 0;padding:26px 30px 26px 42px;
  background:var(--cream-contrast);border:1px solid var(--line-mid);border-radius:6px;}
.pdv-questions::before{content:"";position:absolute;left:21px;top:28px;bottom:28px;width:2px;background:var(--gold);}
.pdv-questions .pq-title{font-family:var(--body);font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 17px;}
.pdv-questions ul{list-style:none;margin:0;padding:0;}
.pdv-questions li{position:relative;margin:0 0 14px;padding-left:4px;font-size:16.5px;line-height:1.55;color:#2c281f;}
.pdv-questions li:last-child{margin-bottom:0;}
.pdv-questions li::before{content:"";position:absolute;left:-25px;top:.5em;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 3px var(--cream-contrast);}

/* Composant : figure de data-viz (image + source). Leger retrait. */
.pdv-figure{margin:1.9em 0;padding-left:2px;}
.pdv-figure img{display:block;width:100%;border-radius:6px;border:1px solid var(--line);}
.pdv-figure figcaption{font-size:13px;line-height:1.5;color:var(--faint);margin-top:11px;text-align:left;font-style:normal;}
.pdv-figure figcaption .pf-source{display:inline-block;color:var(--line-mid);}

/* pied d'article : categories + retour + auteur */
.post-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.post-terms{font-size:13.5px;color:var(--muted);margin-bottom:24px;}
.post-terms a{display:inline-block;padding:5px 12px;margin:0 6px 6px 0;border:1px solid var(--line-mid);
  border-radius:6px;font-size:12.5px;font-weight:600;color:#4a453d;background:var(--card);text-decoration:none;}
.post-terms a:hover{background:var(--gold-soft);text-decoration:none;}

.author-box{display:flex;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:6px;padding:22px 26px;margin-top:6px;}
.author-box .ab-avatar{flex:0 0 auto;}
.author-box .ab-avatar img{width:80px;height:80px;border-radius:50%;display:block;object-fit:cover;border:1px solid var(--line-mid);}
.author-box .ab-text{min-width:0;}
.author-box .ab-name{font-family:var(--serif);font-size:23px;line-height:1.1;margin:0 0 5px;color:#171512;}
.author-box .ab-bio{font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 6px;}
.author-box .ab-link{font-size:13.5px;font-weight:600;color:var(--gold-hover);text-decoration:none;}
.author-box .ab-link:hover{text-decoration:underline;text-underline-offset:3px;}
.author-box .ab-link .arw{color:var(--gold);}

.back-blog{display:inline-block;margin-top:32px;font-size:14px;font-weight:600;color:var(--gold-hover);}
.back-blog .arw{color:var(--gold);}

/* ============================================================
   8. Pages statiques
   ============================================================ */
.page-main{position:relative;z-index:1;padding:8px 0 20px;}

/* ============================================================
   9. Pied de page
   ============================================================ */
.site-footer{position:relative;z-index:1;margin-top:60px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,#faf9f7,#f6f1e8);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;
  max-width:1120px;margin:0 auto;padding:44px 24px 20px;}
.footer-brand .name{font-family:var(--serif);font-size:24px;color:var(--ink);}
.footer-brand .by{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.footer-brand .by b{color:var(--gold);font-weight:600;}
.footer-col h3{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px;}
.footer-col ul{list-style:none;margin:0;padding:0;}
.footer-col li{margin:0 0 9px;}
.footer-col a{font-size:14.5px;color:#3a352e;text-decoration:none;}
.footer-col a:hover{color:var(--gold-hover);text-decoration:underline;text-underline-offset:3px;}
.footer-bottom{max-width:1120px;margin:0 auto;padding:16px 24px 30px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--faint);}

/* ============================================================
   10. 404
   ============================================================ */
.err-wrap{position:relative;z-index:1;text-align:center;padding:90px 24px 70px;max-width:560px;margin:0 auto;}
.err-code{font-family:var(--serif);font-size:96px;line-height:1;color:var(--gold);margin:0;}
.err-wrap h1{font-family:var(--serif);font-weight:400;font-size:34px;margin:12px 0 10px;}
.err-wrap p{color:var(--muted);font-size:16px;margin:0 auto 26px;max-width:420px;}

/* ============================================================
   11. Responsive
   ============================================================ */
@media (max-width:860px){
  .card-feature{grid-template-columns:1fr;}
  .card-feature .card-media{aspect-ratio:16/9;align-self:stretch;}
  .card-feature .card-body{padding:26px 26px 28px;}
  .card-feature h2{font-size:29px;}
}
@media (max-width:768px){
  .post-grid{grid-template-columns:1fr;}
}
@media (max-width:720px){
  body{font-size:17px;}
  .page-lead h1{font-size:40px;}
  .post-head h1{font-size:34px;}
  .entry{font-size:17px;}
  .entry h2{font-size:28px;}
  .entry h3{font-size:23px;}
  .card h2{font-size:24px;}
  .footer-grid{grid-template-columns:1fr;gap:26px;}
  .logo .name{font-size:26px;}
  .author-box{flex-direction:column;align-items:flex-start;gap:16px;}
  .pdv-questions{padding:24px 22px 24px 40px;}
}
@media (max-width:480px){
  .topbar{padding-top:16px;}
  .nav-cta{order:2;}
  .page-lead h1{font-size:34px;}
  .card-feature h2{font-size:26px;}
}

/* Respect des preferences de mouvement reduit */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}