/* =====================================================================
   Observatoire des Transitions — feuille de styles V0 (site statique)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root{
  --green:#173427; --action:#1F6B45; --ivory:#F6F3EA; --graphite:#1F2522;
  --sage:#66736B; --copper:#B88214; --copper-l:#C99A3A; --copper-d:#A6720F; --slate:#315B82;
  --social:#7B5AA6; --financ:#D6A72C; --energie:#D95B4A;
  --line:#dcd6c6; --maxw:1140px;
  --serif:'Source Serif 4',Georgia,serif; --sans:'Source Sans 3',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--sans); color:var(--graphite); background:var(--ivory); line-height:1.6;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
a{color:inherit; text-decoration:none;}
.serif{font-family:var(--serif);}
.kicker{font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--action);}
.btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.95rem;
  padding:13px 22px; border-radius:8px; cursor:pointer; border:1.5px solid transparent; transition:.15s;}
.btn-copper{background:var(--copper); color:#fff;}
.btn-copper:hover{background:var(--copper-d);}
.btn-ghost{background:transparent; border-color:rgba(246,243,234,.4); color:var(--ivory);}
.btn-ghost:hover{border-color:var(--copper);}
.skip{position:absolute; left:-999px;}
.skip:focus{left:12px; top:12px; background:#fff; padding:8px 14px; border-radius:6px; z-index:99;}

/* HEADER */
header{background:var(--green); color:var(--ivory); position:sticky; top:0; z-index:50; border-bottom:1px solid rgba(184,130,20,.4);}
.topbar{display:flex; align-items:center; gap:28px; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand .name{font-family:var(--serif); font-size:1.2rem; font-weight:600; line-height:1.05;}
.brand .editeur{font-size:.6rem; letter-spacing:.03em; color:var(--copper-l); margin-top:2px; display:block; font-family:var(--sans); font-weight:400;}
nav.main{display:flex; gap:22px; margin-left:auto; font-weight:600; font-size:.95rem;}
nav.main a{padding:6px 0; border-bottom:2px solid transparent;}
nav.main a:hover{border-color:var(--copper);}
.news{border:1.5px solid var(--copper); color:var(--ivory); padding:9px 16px; border-radius:8px; font-weight:700; font-size:.85rem;}
.news:hover{background:var(--copper); color:#fff;}

/* HERO */
.hero{background:var(--green); color:var(--ivory); position:relative; overflow:hidden;}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; padding:60px 24px 68px; align-items:center;}
.hero h1{font-family:var(--serif); font-size:clamp(2.1rem,1.4rem+2.6vw,3.3rem); font-weight:600; line-height:1.06; margin:0 0 18px;}
.hero p.lead{font-size:1.08rem; max-width:36ch; color:#e7e4d8; margin:0 0 26px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.radar{position:relative; min-height:300px;}
.alaune{position:absolute; right:0; bottom:8px;
  background:rgba(20,40,30,.6); border:1px solid rgba(184,130,20,.5);
  border-radius:10px; padding:14px 16px; max-width:235px;}
.alaune .k{color:var(--copper-l); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;}
.alaune h3{font-family:var(--serif); font-size:1.02rem; margin:6px 0 0; line-height:1.2;}

/* SECTIONS */
.section{padding:50px 0;}
.section.alt{background:#fff; border-top:3px solid var(--copper);}
.shead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:16px; flex-wrap:wrap;}
.shead .t{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--sage); font-weight:700;}
.ssub{color:var(--sage); font-size:.95rem; margin:0 0 24px;}

/* TOOL CARDS */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.card{border:1px solid var(--line); border-radius:8px; padding:18px; display:flex; flex-direction:column; gap:10px; background:#fff; position:relative;}
.card h3{font-family:var(--serif); font-size:1.1rem; margin:0;}
.card p{font-size:.85rem; color:var(--sage); margin:0; flex:1;}
.card .go{color:var(--action); font-weight:700; font-size:.85rem;}
.metric{display:flex; align-items:center; gap:12px;}
.metric .big{font-family:var(--serif); font-size:1.6rem; font-weight:700; color:var(--green);}
.metric .unit{font-size:.72rem; color:var(--sage); line-height:1.2;}
.soon{position:absolute; top:12px; right:12px; font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--copper-d); background:#fbf3e2; border:1px solid var(--copper-l);
  padding:3px 7px; border-radius:20px;}

/* REASSURANCE */
.reass{background:var(--ivory); padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.reass .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.reass .item{display:flex; gap:10px; font-size:.85rem; line-height:1.4;}
.reass .item svg{flex:0 0 auto; color:var(--copper);}
.editeur-line{text-align:center; margin-top:22px; font-size:.85rem; color:var(--sage);}
.editeur-line b{color:var(--graphite);}

/* PROGRAMME / ARTICLES */
.agrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.acard{background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; display:flex; flex-direction:column;}
.acard .ph{height:8px;}
.acard .b{padding:16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.acard h3{font-family:var(--serif); font-size:1.1rem; margin:0; line-height:1.25;}
.acard .meta{font-size:.75rem; color:var(--sage); margin-top:auto;}

/* NEWSLETTER */
.nl{background:var(--green); color:var(--ivory); padding:48px 0;}
.nl .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center;}
.nl h2{font-family:var(--serif); font-size:1.8rem; margin:0 0 8px;}
.nl p{color:#e7e4d8; margin:0;}
.nlform{display:flex; gap:10px; flex-wrap:wrap;}
.nlform input{flex:1; min-width:200px; padding:13px 14px; border-radius:8px; border:0; font-family:var(--sans); font-size:.95rem;}
.nlmsg{margin-top:12px; font-size:.9rem; color:var(--copper-l); min-height:1.2em;}

/* FOOTER */
footer{background:#0f2419; color:#cdd5cf; padding:44px 0 24px; font-size:.85rem;}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:26px;}
footer h4{color:var(--ivory); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 12px;}
footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px;}
footer a:hover{color:var(--copper-l);}
.legal{border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:16px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:#8b9890; font-size:.78rem;}

/* INTERIOR PAGES */
.page-band{background:var(--green); color:var(--ivory); padding:46px 0;}
.page-band h1{font-family:var(--serif); font-size:clamp(1.8rem,1.3rem+1.8vw,2.6rem); margin:0; font-weight:600;}
.page-band p{color:#e7e4d8; margin:8px 0 0; max-width:60ch;}
.prose{max-width:760px; margin:0 auto; padding:44px 24px;}
.prose h2{font-family:var(--serif); font-size:1.5rem; margin:32px 0 10px; color:var(--green);}
.prose h3{font-family:var(--serif); font-size:1.15rem; margin:22px 0 6px;}
.prose p,.prose li{font-size:1.0625rem;}
.prose a{color:var(--action); font-weight:600; text-decoration:underline;}
.prose .note{background:#fbf6ea; border-left:3px solid var(--copper); padding:10px 14px; border-radius:0 6px 6px 0; font-size:.95rem;}
.prose table{width:100%; border-collapse:collapse; margin:14px 0; font-size:.95rem;}
.prose td,.prose th{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;}
.prose th{background:#f1eddf;}
.todo{color:#9a3b2f; font-weight:700;}

@media(max-width:860px){
  nav.main{display:none;}
  .hero .wrap,.nl .wrap{grid-template-columns:1fr;}
  .cards,.reass .grid,.agrid{grid-template-columns:1fr 1fr;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .alaune{position:static; max-width:none; margin-top:18px;}
  .radar{min-height:auto;}
}
@media(max-width:520px){ .cards,.reass .grid,.agrid,.fgrid{grid-template-columns:1fr;} }

/* =====================================================================
   PAGES D'ANALYSE GENEREES  (generer_analyses.py -> <main class="article">)
   ---------------------------------------------------------------------
   Ces regles etaient portees en <style> inline par gabarit-analyse.html.
   Le generateur ne conservant que le <link> vers cette feuille, elles ont
   disparu le 04/08/2026 : le texte courait alors d'un bord a l'autre et
   les encadres (.snippet, .cta) s'affichaient en texte nu.
   Volontairement calquees sur .prose — meme mesure, memes tokens — avec
   en plus ce que .prose n'a pas : titraille d'article, chapo, encadres.
   ===================================================================== */

/* Conteneur de lecture : 760px, la meme mesure que .prose. */
.article{max-width:760px; margin:0 auto; padding:40px 24px 8px;}

/* Titraille */
.article .kicker{display:block; margin-bottom:6px;}
.article h1{font-family:var(--serif); font-size:clamp(1.8rem,1.3rem+1.8vw,2.5rem);
  line-height:1.15; margin:8px 0 12px; color:var(--green); font-weight:600;}
.article .meta{font-size:.85rem; color:var(--sage); border-bottom:1px solid var(--line);
  padding-bottom:16px; margin-bottom:26px;}
.article h2{font-family:var(--serif); font-size:1.45rem; color:var(--green); margin:34px 0 10px;}
.article h3{font-family:var(--serif); font-size:1.15rem; color:var(--green); margin:24px 0 6px;}

/* Corps : mesure de lecture confortable, interlignage genereux. */
.article p,.article li{font-size:1.0625rem; line-height:1.7;}
.article p{margin:0 0 16px;}
.article ul,.article ol{padding-left:24px; margin:0 0 16px;}
.article li{margin-bottom:7px;}
.article a{color:var(--action); font-weight:600; text-decoration:underline;
  text-underline-offset:2px;}
.article strong,.article b{color:var(--green);}
.article hr{border:0; border-top:1px solid var(--line); margin:32px 0;}

/* Encadres du gabarit — .snippet porte le chapo « L'essentiel » et le bloc
   de cloture vers Hector Transitions. */
.article .snippet,.snippet{background:#fbf8f0; border-left:4px solid var(--copper);
  border-radius:0 8px 8px 0; padding:16px 20px; font-size:1.05rem; line-height:1.65;
  margin:0 0 26px;}
.article .note{background:#fbf6ea; border-left:3px solid var(--copper);
  border-radius:0 6px 6px 0; padding:10px 14px; font-size:.95rem; margin:0 0 16px;}
.article .cta{background:var(--green); color:var(--ivory); border-radius:10px;
  padding:22px; margin:28px 0;}
.article .cta a{color:var(--copper-l); font-weight:700;}
.article .disclaimer{font-size:.82rem; color:var(--sage); font-style:italic;}
.article .sources{font-size:.92rem;}
.article .sources li{margin-bottom:5px;}
.article .backlink{display:inline-block; margin:20px 0; color:var(--action); font-weight:700;}

/* Citations */
.article blockquote{margin:22px 0; padding:4px 0 4px 20px;
  border-left:3px solid var(--line); color:var(--sage); font-style:italic;}
.article blockquote p:last-child{margin-bottom:0;}

/* Tableaux : le contenu vient de WordPress, largeur non maitrisee. */
.article table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.95rem;}
.article td,.article th{border:1px solid var(--line); padding:9px 11px;
  text-align:left; vertical-align:top;}
.article th{background:#f1eddf; color:var(--green);}

/* Medias : jamais plus larges que la mesure. */
.article img,.article figure,.article iframe{max-width:100%; height:auto;}
.article figure{margin:24px 0;}
.article img{border-radius:8px; display:block;}
.article figcaption{font-size:.85rem; color:var(--sage); margin-top:8px;}

/* Blocs WordPress qui tenteraient de deborder du conteneur. */
.article .alignwide,.article .alignfull{max-width:100%; margin-left:0; margin-right:0;}

/* Mobile : on resserre les marges laterales sans coller au bord,
   et on rend les tableaux larges defilables plutot que debordants. */
@media(max-width:640px){
  .article{padding:26px 18px 8px;}
  .article .snippet,.snippet{padding:14px 16px; font-size:1rem;}
  .article .cta{padding:18px;}
  .article table{display:block; overflow-x:auto; white-space:nowrap;}
}