/*
Theme Name: Boursio
Theme URI: https://boursio.com
Author: Qualia LP
Description: Thème léger, mobile first, aux couleurs de la chaîne Boursio. Cartes douces et arrondies.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: boursio
*/

@font-face{font-family:"Archivo";src:url(assets/fonts/archivo-vf.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  /* Couleurs de la chaîne Boursio */
  --ink:#1b1716; --muted:#6e6661; --bg:#f7f4f0; --white:#fffdfa;
  --brick:#a63f29; --green:#3d7c45; --gold:#e7af2f; --salmon:#bd6455; --slate:#a2b4cf; --navy:#22398c; --cream:#eee1d4;
  /* Leurs versions douces pour les fonds de cartes */
  --sage:#dfe7d8; --sun:#f6e5b8; --blush:#f2ddd4; --mist:#dce4ef; --sand:#efe4d8;
  --txt:"Archivo",system-ui,sans-serif;
  --r:28px; --r-sm:18px; --w:72rem;
  --soft:0 10px 30px -12px rgba(27,23,22,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;font:400 1.0625rem/1.65 var(--txt);color:var(--ink);background:var(--bg)}
img,svg,iframe,video{max-width:100%;height:auto}
a{color:var(--green);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
h1,h2,h3,h4{line-height:1.15;margin:1.6em 0 .5em;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2rem,7vw,3.2rem);font-weight:350;margin-top:.2em}
h1 strong{font-weight:750}
h2{font-size:clamp(1.4rem,4.4vw,1.9rem);font-weight:650}
h3{font-size:1.15rem;font-weight:650}
p,ul,ol{margin:0 0 1em}
li{margin-bottom:.35em}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--white);padding:.5rem 1rem}
.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 16px}
.narrow{max-width:46rem}
.label{display:block;font-size:.9rem;color:var(--muted);margin:0 0 .4rem}

/* En-tête */
.site-head{position:sticky;top:0;z-index:50;background:rgba(247,244,240,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;min-height:4.25rem}
.logo{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.2rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo img{width:2.25rem;height:2.25rem;border-radius:12px}
.logo:hover{color:var(--ink)}
.nav-toggle{margin-left:auto;width:2.9rem;height:2.9rem;border-radius:50%;border:0;background:var(--white);box-shadow:var(--soft);font-size:1.15rem;color:var(--ink);cursor:pointer}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);padding:.25rem 16px 1rem;box-shadow:0 12px 20px -16px rgba(27,23,22,.3)}
.nav.open{display:block}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{display:block;padding:.8rem 0;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid #1b171614}
.nav .current-menu-item>a,.nav a:hover{color:var(--green)}
@media (min-width:56rem){
  .nav-toggle{display:none}
  .nav{display:block;position:static;padding:0;margin-left:auto;background:none;box-shadow:none}
  .nav ul{display:flex;gap:.4rem}
  .nav a{border:0;padding:.55rem 1rem;border-radius:999px;font-size:.95rem}
  .nav a:hover,.nav .current-menu-item>a{background:var(--white);color:var(--ink)}
}

/* Boutons */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;gap:.5rem;font:600 1rem/1.2 var(--txt);background:var(--ink);color:var(--white);border:0;border-radius:999px;padding:.95rem 1.5rem;text-decoration:none;transition:transform .15s}
.btn:hover,.wp-block-button__link:hover{color:var(--white);transform:translateY(-1px)}
.btn.alt{background:var(--white);color:var(--ink);box-shadow:var(--soft)}

/* Cartes cliquables : fond pastel + bouton ↗ */
.card{position:relative;display:flex;flex-direction:column;min-height:11rem;background:var(--sand);border-radius:var(--r);padding:1.35rem 1.35rem 4.2rem;color:var(--ink);text-decoration:none;transition:transform .15s}
.card::after{content:"↗";position:absolute;right:1.1rem;bottom:1.1rem;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.6);font-size:1.15rem;transition:background .15s}
a.card:hover{transform:translateY(-3px);color:var(--ink)}
a.card:hover::after{background:var(--ink);color:var(--white)}
.card h3{margin:0 0 .45rem;font-size:1.12rem;line-height:1.3}
.card p{margin:0;color:#1b1716b3;font-size:.95rem;line-height:1.5}
.grid{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:40rem){.grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.grid.g3{grid-template-columns:repeat(3,1fr)}}
.grid>.card:nth-child(5n+1){background:var(--sage)}
.grid>.card:nth-child(5n+2){background:var(--sun)}
.grid>.card:nth-child(5n+3){background:var(--mist)}
.grid>.card:nth-child(5n+4){background:var(--blush)}
.grid>.card:nth-child(5n+5){background:var(--sand)}

/* Encadrés (non cliquables) */
.essentiel{background:var(--white);border-radius:var(--r-sm);padding:1.15rem 1.25rem;margin:1.25rem 0 2rem;box-shadow:var(--soft)}
.essentiel strong:first-child{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}
.note{background:var(--sand);border-radius:var(--r-sm);padding:1rem 1.2rem;margin:1.5rem 0;font-size:.93rem;color:#1b1716cc}
.note.warn{background:var(--blush)}
.note>:last-child{margin-bottom:0}

/* Accueil */
.hero{background:var(--blush);border-radius:0 0 var(--r) var(--r);margin:0 -16px;padding:1.75rem 16px 2rem}
.hero h1{font-size:clamp(2.2rem,8.5vw,4rem);line-height:1.08;margin:0 0 .5em;max-width:16ch}
.hero .sub{color:#1b1716cc;max-width:34rem;margin-bottom:1.5rem}
.hero .demande{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:34rem;background:rgba(255,255,255,.55);border-radius:999px;padding:.55rem .55rem .55rem 1.4rem;color:var(--ink);text-decoration:none;font-weight:500}
.hero .demande i{flex:none;font-style:normal;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-size:1.15rem}
.hero .demande:hover{background:var(--white)}
@media (min-width:56rem){.hero{margin:0;border-radius:var(--r);padding:3.5rem 3.5rem 3rem}}
.confiance{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.25rem 0 0}
.confiance li{margin:0;background:var(--white);border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:500;color:var(--muted)}
.confiance li::before{content:"✓ ";color:var(--green);font-weight:800}
.section{padding:2.25rem 0 .5rem}
.section>h2:first-child{margin-top:0}
.section h2{font-weight:350}
.section h2 strong{font-weight:750}

/* Bulles de thèmes */
.bulles{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 0}
.bulles a{display:grid;place-items:center;text-align:center;border-radius:50%;color:#fff;font-weight:600;text-decoration:none;line-height:1.15;padding:.5rem;transition:transform .15s}
.bulles a:hover{transform:scale(1.05);color:#fff}
.bulles .xl{width:9.5rem;height:9.5rem;font-size:1.1rem}
.bulles .l{width:7.75rem;height:7.75rem}
.bulles .m{width:6.25rem;height:6.25rem;font-size:.92rem}
.bulles .s{width:5rem;height:5rem;font-size:.82rem}
.b-green{background:var(--green)}.b-gold{background:var(--gold);color:var(--ink)!important}.b-salmon{background:var(--salmon)}.b-slate{background:var(--slate);color:var(--ink)!important}.b-cream{background:var(--white);color:var(--brick)!important}.b-navy{background:var(--navy)}.b-brick{background:var(--brick)}

/* Contenu */
.entry{padding-top:1rem;padding-bottom:3rem}
.crumbs{font-size:.85rem;color:var(--muted);margin:0 0 .75rem}
.crumbs a{color:var(--muted)}
.meta{font-size:.88rem;color:var(--muted);margin-bottom:1.5rem}
.entry-content>*{max-width:46rem}
.entry-content>.alignwide,.entry-content>.outil,.entry-content>.essentiel,.entry-content>.note{max-width:none}
.entry-content table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--r-sm);overflow:hidden;font-size:.95rem;display:block;overflow-x:auto;box-shadow:var(--soft)}
.entry-content th,.entry-content td{border-bottom:1px solid #1b171612;padding:.75rem .8rem;text-align:left;vertical-align:top}
.entry-content th{background:var(--sand);font-weight:650}
.entry-content details{background:var(--white);border-radius:var(--r-sm);padding:1rem 1.2rem;margin:.6rem 0;box-shadow:var(--soft)}
.entry-content summary{font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.entry-content summary::-webkit-details-marker{display:none}
.entry-content summary::after{content:"+";flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--sand);display:grid;place-items:center;font-weight:500}
.entry-content details[open] summary::after{content:"−"}
.entry-content details p{margin:.7rem 0 0}
.home .entry{padding-top:0}.home .entry-content>*{max-width:none}

/* Vidéo (miniature légère) */
.video{aspect-ratio:9/16;max-width:19rem;margin:1.75rem auto;border-radius:var(--r);overflow:hidden;box-shadow:var(--soft)}
.video iframe{width:100%;height:100%;border:0}
a.video{display:block;position:relative;background:var(--ink)}
a.video img{width:100%;height:100%;object-fit:cover;display:block}
a.video .play{position:absolute;inset:0;margin:auto;width:4.25rem;height:4.25rem;border-radius:50%;background:rgba(255,253,250,.9);color:var(--ink);font-size:1.5rem;display:grid;place-items:center;box-shadow:var(--soft)}

/* Pied de page */
.site-foot{background:var(--ink);color:var(--bg);padding:2.75rem 0 1.5rem;font-size:.92rem;border-radius:var(--r) var(--r) 0 0}
.site-foot a{color:var(--bg)}
.site-foot .cols{display:grid;gap:1.5rem}
@media (min-width:48rem){.site-foot .cols{grid-template-columns:2fr 1fr 1fr}}
.site-foot h3{color:var(--gold);margin:0 0 .6rem;font-size:.95rem}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot .logo{color:var(--bg)}
.site-foot .legal{margin-top:2rem;padding-top:1rem;border-top:1px solid #f7f4f026;color:#f7f4f0a6;font-size:.82rem}
.hero .bulles{margin-top:1.75rem}
@media (max-width:40rem){.hero .bulles .xl{width:7.5rem;height:7.5rem}.hero .bulles .l{width:6.25rem;height:6.25rem;font-size:.9rem}.hero .bulles .m{width:5.25rem;height:5.25rem;font-size:.85rem}.hero .bulles .s{width:4.4rem;height:4.4rem;font-size:.78rem}}
@media (min-width:56rem){.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center}.hero .bulles{margin:0}}
.chapo{font-size:1.1rem;color:var(--muted);max-width:40rem;margin:-.2rem 0 1rem}

/* Guides : article + colonne latérale sur ordinateur */
.article .entry-content>*{max-width:none}
.article-side{display:none}
@media (min-width:64rem){
  .article{display:grid;grid-template-columns:minmax(0,46rem) 17rem;gap:3.5rem;justify-content:space-between;align-items:start}
  .article .video.mobile{display:none}
  .article-side{display:block;padding-top:.5rem;align-self:stretch}
  .article-side .video{margin:0 0 1.25rem;max-width:none}
  .article-side .colle{position:sticky;top:5.5rem;display:grid;gap:1rem}
  .article-side .card{min-height:0;background:var(--sage)}
  .article-side .card h3{font-size:1rem}
}
.sommaire{background:var(--white);border-radius:var(--r-sm);padding:1.1rem 1.25rem;box-shadow:var(--soft)}
.sommaire ol{margin:0;padding-left:1.2rem;font-size:.92rem}
.sommaire li{margin:.35rem 0}
.sommaire a{color:var(--ink);text-decoration:none}
.sommaire a:hover{color:var(--green);text-decoration:underline}