/*
Theme Name: Octet Libre
Author: Benoît Leeuwerck
Description: Thème sur mesure pour Octet Libre – informatique libre, humaine et intègre.
Version: 1.4
Text Domain: octet-libre
*/
:root{--bleu:#1B55A5;--bleu-f:#143F7A;--jaune:#FDB933;--vert:#1E6B5A;--fond:#F6F9FD;--texte:#1d2b3f}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--texte);background:#fff;line-height:1.7;font-size:17px}
img{max-width:100%;height:auto}a{color:var(--bleu)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--jaune);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;color:var(--bleu);line-height:1.2;margin:0 0 .6em}
h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800}h2{font-size:1.9rem;font-weight:700}h3{font-size:1.2rem;font-weight:600}
.site-header{background:#fff;border-bottom:6px solid var(--jaune);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.site-header img{height:64px;width:auto;display:block}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{text-decoration:none;font-weight:600;color:var(--bleu);padding:8px 14px;border-radius:4px}
.nav a:hover,.nav a.on{background:var(--bleu);color:#fff}
.nav a.cta{background:var(--jaune);color:var(--bleu-f)}
.band{background:var(--bleu);color:#fff;text-align:center;padding:18px 24px;margin:0}
.band h1,.band h2{color:#fff;margin:0}
h1.band,h2.band{color:#fff;font-size:1.8rem}
.hero{padding:56px 0 40px;background:var(--fond)}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.25rem;color:var(--bleu-f)}
.btn{display:inline-block;background:var(--jaune);color:var(--bleu-f);font-weight:700;text-decoration:none;padding:14px 28px;border-radius:4px;border:0;font-size:1rem;font-family:inherit;cursor:pointer}
.btn:hover{background:var(--bleu);color:#fff}.btn.alt{background:var(--bleu);color:#fff}.btn.alt:hover{background:var(--jaune);color:var(--bleu-f)}
section.s{padding:56px 0}section.s.gris{background:var(--fond)}
.apropos{max-width:760px}.apropos h3{margin-top:1.8em}
.valeurs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:4px solid var(--jaune)}
.valeurs div{padding:24px;border-right:1px solid #dfe7f2}.valeurs div:last-child{border:0}
.valeurs h3{color:var(--vert)}
.offres{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;margin-top:24px}
.offre{border:2px solid #dfe7f2;background:#fff;display:flex;flex-direction:column}
.offre header{background:var(--bleu);color:#fff;padding:14px;text-align:center;font-weight:700;letter-spacing:.04em}
.offre.std header{background:var(--jaune);color:var(--bleu-f)}.offre.prem header{background:var(--bleu-f)}
.offre .prix{text-align:center;padding:20px 12px 8px;color:var(--bleu);font-size:2.6rem;font-weight:800;line-height:1}
.offre .prix small{display:block;font-size:.8rem;font-weight:400;color:#5c6b80;margin-top:6px}
.offre .ideal{text-align:center;padding:0 16px 12px;color:#5c6b80;font-size:.95rem}
.offre ul{list-style:none;margin:0;padding:0;flex:1}
.offre li{padding:12px 16px 12px 44px;position:relative;border-top:1px solid #e8eef6;font-size:.95rem}
.offre li:before{content:"✓";position:absolute;left:16px;color:var(--vert);font-weight:800}
.offre li.no{color:#9aa7b8}.offre li.no:before{content:"–";color:#9aa7b8}
.offre .sup{background:var(--fond);padding:14px 16px;font-weight:600;color:var(--bleu);font-size:.95rem}
.note{background:var(--fond);border-left:6px solid var(--jaune);padding:16px 20px;margin-top:28px;font-size:.95rem}
.projets{display:grid;gap:36px}
.projet{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;border-bottom:1px solid #dfe7f2;padding-bottom:36px}
.projet:nth-child(even) img{order:2}.projet img{border:1px solid #dfe7f2}
.projet ul{padding-left:20px}.projet li::marker{color:var(--jaune)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.post{border-top:6px solid var(--jaune);background:var(--fond);padding:20px}
.post h2{font-size:1.25rem}.post a{text-decoration:none}.post .d,.d{color:#5c6b80;font-size:.85rem}
.entry iframe,.entry video{max-width:100%}.entry .wp-block-embed,.entry .wp-video{margin:24px 0}
form.c{display:grid;gap:14px}
form.c input,form.c textarea{width:100%;padding:12px;border:2px solid #c9d6e8;font:inherit;border-radius:4px}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ok{background:#e6f4ee;border-left:6px solid var(--vert);padding:12px 16px;margin-bottom:20px}
.site-footer{background:var(--bleu-f);color:#dbe6f6;border-top:6px solid var(--jaune);padding:32px 0;font-size:.9rem}
.site-footer a{color:var(--jaune)}.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px}
@media(max-width:820px){.hero .wrap,.projet,.contact,.offres,.valeurs{grid-template-columns:1fr}.projet:nth-child(even) img{order:0}.valeurs div{border-right:0;border-bottom:1px solid #dfe7f2}.site-header .wrap{flex-direction:column}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.tw{overflow-x:auto;margin-top:24px}
table.cmp{width:100%;min-width:760px;border-collapse:collapse;font-size:.95rem}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid #e3eaf4;vertical-align:middle}
.cmp thead th{background:var(--bleu);color:#fff;font-weight:700;letter-spacing:.04em;text-align:center;width:20%}
.cmp thead th.std{background:var(--jaune);color:var(--bleu-f)}.cmp thead th.prem{background:var(--bleu-f)}
.cmp thead th:first-child{background:#fff}
.cmp tbody th{text-align:left;font-weight:600;color:var(--bleu-f);background:var(--fond);width:40%}
.cmp tbody th small{display:block;font-weight:400;color:#5c6b80;margin-top:2px}
.cmp td{text-align:center}.cmp .y{color:var(--vert);font-size:1.4rem;font-weight:800}.cmp .n{color:#b3bfce}
.cmp .prix td{font-size:2rem;font-weight:800;color:var(--bleu);padding:20px 8px}.cmp .prix small{display:block;font-size:.75rem;font-weight:400;color:#5c6b80}
.cmp tr.sec td{background:var(--bleu-f);color:#fff;text-align:left;font-weight:700;padding:12px 16px}
.cmp tr.sec td span{font-weight:400;float:right}
.cmp .sm{font-size:.85rem;color:#5c6b80;display:block}
.cmp .strong{font-weight:700;color:var(--bleu)}
.projet p.pour{border-left:4px solid var(--jaune);padding-left:14px;color:#43546b}
.projet .entry>*:first-child{margin-top:0}.entry li::marker{color:var(--jaune)}
.projet>img{width:100%;height:auto;display:block}
.screen-reader-text{position:absolute;left:-9999px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:24px}
.card{border:1px solid #dfe7f2;border-top:6px solid var(--bleu);padding:22px;background:#fff}
.card h3{margin-bottom:.4em}.card p{margin:0;font-size:.97rem}
.cards.f .card{border-top-color:var(--jaune)}
.audit{background:var(--bleu-f);color:#fff}.audit h2{color:var(--jaune)}.audit p{max-width:760px}
.lead2{font-size:1.15rem;max-width:760px}.lead2 p{margin-top:0}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}