/* Home page design shared by the whole site (build_site.py): closing call to action (.lc), footer (.lf)
   and, on the inner pages (body.v3), the typography, buttons and section rhythm of the home page. */

/* Closing call to action */
.lc{position:relative;overflow:hidden;padding:110px 0;text-align:center;background:#183D32;color:#CFE3D8}
.lc::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:120%;background:radial-gradient(50% 50% at 50% 50%,#20745E99,transparent 70%);pointer-events:none}
.lc-in{position:relative;width:min(1180px,calc(100% - 40px));margin:0 auto}
.lc h2{margin:0;color:#FFFFFF;font:800 clamp(32px,4vw,50px)/1.1 Manrope,Arial,sans-serif;letter-spacing:-.035em}
.lc p{max-width:620px;margin:18px auto 34px;font:18px/1.6 'Source Sans 3',Arial,sans-serif;color:#CFE3D8}
.lc-btn{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:#D3F3E3;color:#183D32;font:700 15px Manrope,Arial,sans-serif;text-decoration:none;transition:background-color .2s}
.lc-btn:hover{background:#FFFFFF;color:#183D32}
.lc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.lc small{display:block;margin-top:18px;font:15px 'Source Sans 3',Arial,sans-serif}
.lc small a{color:#FFFFFF}

/* Footer */
.lf{background:#10291F;color:#A9C2B5;padding:64px 0 34px;font:15px/1.6 'Source Sans 3',Arial,sans-serif}
.lf-in{width:min(1180px,calc(100% - 40px));margin:0 auto}
.lf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.lf p{margin:0;color:#A9C2B5}
.lf h2{margin:0 0 16px;font:700 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#D3F3E3}
.lf a{display:block;margin:0 0 10px;color:#A9C2B5;text-decoration:none;border:0}
.lf a:hover{color:#FFFFFF}
.lf-logo{display:inline-block!important}
.lf-logo img{display:block;height:44px;width:auto;border-radius:8px;margin-bottom:16px}
.lf-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:24px;border-top:1px solid #FFFFFF1A;font-size:13px}
.lf-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
.lf-bottom a,.lf-bottom .lp-consent-open{display:inline;margin:0;color:inherit;font:inherit;font-size:inherit;text-decoration:none}
.lf-bottom a:hover,.lf-bottom .lp-consent-open:hover{color:#FFFFFF}
@media(max-width:980px){.lf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lf-grid{grid-template-columns:1fr}.lc{padding:80px 0}.lc-in,.lf-in{width:calc(100% - 32px)}}

/* Inner pages: the home page's type and buttons on the existing layouts */
body.v3{background:#FFFFFF;color:#0F2A22;font-size:17px}
.v3 main h1{font-family:Manrope,Arial,sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1.05;color:#183D32}
.v3 main h1 em,.v3 main h2 em{font-style:normal;color:#20745E}
.v3 main h2{font-family:Manrope,Arial,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.1;color:#183D32}
.v3 main h3{font-family:Manrope,Arial,sans-serif;font-weight:700;letter-spacing:-.02em;color:#183D32}
.v3 main .eyebrow{font:700 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#20745E}
.v3 main .button{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:#20745E;color:#FFFFFF;font:700 15px/1 Manrope,Arial,sans-serif;text-decoration:none;box-shadow:none;transition:background-color .2s}
.v3 main .button:hover{background:#183D32;color:#FFFFFF}
.v3 main .text-cta{font:700 15px/1.4 Manrope,Arial,sans-serif;color:#20745E}
.v3 main p{color:inherit}
.v3 .b-intro,.v3 .i-intro{color:#5B6B63}
/* The closing band and the footer keep their own look inside the inner pages' styles. */
.v3 main .lc h2{color:#FFFFFF}
.v3 main .lc p{color:#CFE3D8}
.lf nav,.lf .lf-grid>div{display:block;margin:0;padding:0;background:none;border:0}
.lf .lf-grid a{display:block;width:auto;margin:0 0 10px;padding:0;font:inherit;line-height:1.6;white-space:normal}
.lf .lf-bottom nav{display:flex;flex-wrap:wrap;gap:18px}
.lf .lf-bottom a{display:inline}
/* Blog: list of articles and article pages */
.bl-list{padding:8px 0 96px}
.bl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bl-card a{display:flex;flex-direction:column;height:100%;border:1px solid #DCE9E1;border-radius:18px;background:#FFFFFF;overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.bl-card a:hover{transform:translateY(-4px);box-shadow:0 22px 50px #183D3214}
.bl-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.bl-card div{display:flex;flex-direction:column;flex:1;padding:24px}
.v3 .bl-card h2{margin:0 0 10px;font-size:22px;line-height:1.25;letter-spacing:-.02em}
.bl-card p:not(.eyebrow){margin:0 0 18px;color:#5B6B63;font-size:16px}
.bl-meta{margin-top:auto;font-size:14px;color:#5B6B63}
.bl-empty{max-width:640px;padding:36px;border:1px dashed #B9CEC2;border-radius:18px;background:#EFF8F3}
.v3 .bl-empty h2{margin:0 0 10px;font-size:28px}
.v3 main .bl-post{width:min(760px,calc(100% - 40px));max-width:760px;margin:0 auto;padding:56px 0 88px}
.bl-back{display:inline-block;margin-bottom:28px;font:700 14px Manrope,Arial,sans-serif;color:#20745E;text-decoration:none}
.v3 .bl-post h1{font-size:clamp(34px,4.6vw,52px);margin:0 0 16px}
.bl-post .bl-meta{display:block;margin:0 0 32px}
.bl-cover{display:block;width:100%;border-radius:18px;margin:0 0 36px}
.bl-body{font-size:18px;line-height:1.75;color:#0F2A22}
.v3 .bl-body h2{margin:44px 0 14px;font-size:30px}
.v3 .bl-body h3{margin:32px 0 10px;font-size:22px}
.bl-body p,.bl-body ul,.bl-body ol{margin:0 0 20px}
.bl-body ul,.bl-body ol{padding-left:24px}
.bl-body li{margin:0 0 8px}
.bl-body a{color:#20745E;text-decoration:underline;text-underline-offset:3px}
.bl-body blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid #20745E;font:600 20px/1.5 Manrope,Arial,sans-serif;color:#183D32}
.bl-body img{display:block;max-width:100%;height:auto;border-radius:14px;margin:28px 0}
@media(max-width:980px){.bl-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.bl-grid{grid-template-columns:1fr}.bl-post{padding:36px 0 64px}.bl-body{font-size:17px}}
/* Blog article template (plan éditorial SEO & GEO): breadcrumb, summary, contents, account block, tables, author */
.bl-crumbs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font-size:14px;color:#5B6B63}
.bl-crumbs a{color:#20745E;text-decoration:none}
.bl-post .bl-meta a{color:inherit}
.bl-brief{margin:0 0 28px;padding:22px 24px;border-radius:16px;background:#EFF8F3;border:1px solid #D3F3E3}
.bl-brief p{margin:0;font-size:18px;line-height:1.65}
.bl-brief .bl-brief-t,.bl-toc-t,.bl-compte-t{margin:0 0 8px;font:700 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#20745E}
.bl-toc{margin:0 0 36px;padding:20px 24px;border:1px solid #DCE9E1;border-radius:16px}
.bl-toc ol{margin:0;padding-left:20px;columns:2;column-gap:32px}
.bl-toc li{margin:0 0 6px;break-inside:avoid;font-size:15px}
.bl-toc a{color:#183D32;text-decoration:none}
.bl-toc a:hover{color:#20745E;text-decoration:underline}
.bl-body h2{scroll-margin-top:96px}
.bl-compte{margin:32px 0;padding:22px 24px;border-left:4px solid #20745E;border-radius:0 16px 16px 0;background:#F6FAF7}
.bl-compte p:last-child{margin-bottom:0}
.bl-table{margin:24px 0;overflow-x:auto}
.bl-table table{width:100%;border-collapse:collapse;font-size:16px}
.bl-table th,.bl-table td{padding:12px 14px;border-bottom:1px solid #DCE9E1;text-align:left;vertical-align:top}
.bl-table th{font:700 14px Manrope,Arial,sans-serif;color:#183D32;background:#EFF8F3}
.bl-todo{padding:1px 4px;border-radius:4px;background:#FFF1B8;color:#5A4500;font-weight:600}
.bl-draft{margin:0;padding:10px 16px;background:#FFF1B8;color:#5A4500;text-align:center;font:600 14px Manrope,Arial,sans-serif}
.bl-author{display:flex;gap:18px;align-items:flex-start;margin:48px 0 0;padding:24px;border:1px solid #DCE9E1;border-radius:18px}
.bl-author img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.bl-author p{margin:0 0 8px;font-size:16px;color:#4D5E56}
.bl-author a{color:#20745E}
.bl-next{margin:56px 0 0}
.v3 .bl-next h2{font-size:26px;margin:0 0 18px}
.v3 .bl-next h3{margin:0 0 10px;font-size:19px;line-height:1.3}
.bl-next .bl-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:620px){.bl-toc ol{columns:1}.bl-next .bl-grid{grid-template-columns:1fr}.bl-author{flex-direction:column}}
.bl-body code,.bl-table code,.bl-brief code{padding:1px 5px;border-radius:5px;background:#EFF8F3;font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#183D32}
/* Blog: call to action towards the service page of the article group */
.bl-cta{margin:40px 0 0;padding:24px;border-radius:18px;background:#183D32;color:#F2FAF5}
.bl-cta p{margin:0 0 14px;font-size:17px;line-height:1.6}
.bl-cta .bl-cta-t{margin:0 0 8px;font:700 12px/1.4 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8AE1BD}
.v3 .bl-post .bl-cta a.text-cta{display:inline-flex;margin:4px 22px 0 0;color:#FFFFFF;font-size:15px;text-decoration-color:#8AE1BD}
/* Réalisations (build_cases.py): cases grouped by model, figure first, and the case pages */
.cs-group{padding-top:24px;padding-bottom:56px}
.cs-group-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:0 0 24px}
.v3 .cs-group-head h2{margin:0;font-size:clamp(26px,3vw,36px)}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs-card{display:flex;flex-direction:column;padding:28px;border:1px solid #DCE9E1;border-radius:18px;background:#FFFFFF;color:inherit;text-decoration:none;transition:transform .25s,box-shadow .25s}
.cs-card:hover{transform:translateY(-4px);box-shadow:0 22px 50px #183D3214}
.cs-card .eyebrow{margin:0 0 14px}
.cs-figure{margin:0;font:800 44px/1 Manrope,Arial,sans-serif;letter-spacing:-.04em;color:#183D32}
.cs-label{margin:6px 0 18px;font-size:15px;color:#20745E;font-weight:600}
.v3 .cs-card h3{margin:0 0 10px;font-size:19px;line-height:1.3}
.cs-channels{margin:0 0 20px;font-size:14px;color:#5B6B63}
.cs-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font:700 14px Manrope,Arial,sans-serif;color:#20745E}
.cs-more svg,.cs-group-head .text-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.cs-note{padding-bottom:64px;font-size:14px;color:#5B6B63}
.v3 main .cs-page{padding-top:40px;padding-bottom:80px}
.cs-head{display:grid;gap:48px;align-items:center;margin:0 0 36px}
.cs-head.has-visual{grid-template-columns:1.2fr .8fr}
.v3 .cs-head h1{margin:0 0 18px;font-size:clamp(36px,4.8vw,58px)}
.cs-visual{margin:0}
.cs-visual img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
.cs-visual figcaption{margin-top:8px;font-size:13px;color:#5B6B63}
.cs-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 56px}
.cs-figures div{padding:22px 24px;border-radius:16px;background:#EFF8F3}
.cs-figures strong{display:block;font:800 36px/1.05 Manrope,Arial,sans-serif;letter-spacing:-.03em;color:#183D32}
.cs-figures span{display:block;margin-top:6px;font-size:15px;color:#4D5E56}
.cs-section{max-width:820px;margin:0 0 48px}
.v3 .cs-section h2{margin:0 0 16px;font-size:clamp(26px,3vw,34px)}
.cs-section p{margin:0 0 14px;font-size:18px;line-height:1.7}
.cs-actions{display:grid;gap:16px}
.cs-action{padding:22px 24px;border:1px solid #DCE9E1;border-radius:16px}
.v3 .cs-action h3{margin:0 0 10px;font-size:19px}
.cs-action ul,.cs-results{margin:0;padding-left:20px}
.cs-action li,.cs-results li{margin:0 0 8px;font-size:17px;line-height:1.6}
.cs-results li::marker{color:#20745E}
.cs-caption{margin-top:12px!important;font-size:14px!important;color:#5B6B63}
.cs-lesson{max-width:820px;margin:0 0 48px;padding:28px 32px;border-radius:18px;background:#183D32;color:#F2FAF5}
.v3 main .cs-lesson .eyebrow{color:#8AE1BD}
.cs-lesson blockquote{margin:10px 0 12px;font:600 21px/1.5 Manrope,Arial,sans-serif;color:#FFFFFF}
.cs-sign{margin:0;font-size:15px;color:#CFE3D8}
.cs-service{max-width:820px;margin:0 0 56px;font-size:17px}
.cs-service a{color:#20745E;font-weight:600}
.v3 .cs-next h2{margin:0 0 20px;font-size:26px}
@media(max-width:980px){.cs-grid{grid-template-columns:1fr 1fr}.cs-head.has-visual{grid-template-columns:1fr}.cs-visual{max-width:520px}}
@media(max-width:620px){.cs-grid,.cs-figures{grid-template-columns:1fr}.cs-group-head{flex-direction:column;align-items:flex-start}.cs-lesson{padding:24px}}
.cs-group .cs-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:620px){.cs-group .cs-grid{grid-template-columns:1fr}}
/* One page heading for every inner page: size, alignment on the header grid, intro width and colour. */
.v3 main h1{font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.045em}
.v3 .cs-head h1{font-size:clamp(40px,5vw,64px)}
.v3 .bl-post h1{font-size:clamp(34px,4.2vw,48px)}
.v3 main h1+p,.v3 main h1+.b-intro,.v3 main .hero-copy h1+p{max-width:620px;font-size:20px;line-height:1.6;color:#5B6B63}
.v3 main .c-faq-page{width:min(1180px,calc(100% - 40px));max-width:none;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;padding-top:64px}
.v3 main .c-faq-page .c-faq{max-width:860px}
/* The older layouts declare their own heading sizes and containers with more specific rules: these win. */
body.v3 main h1{font-size:clamp(40px,5vw,64px)!important}
body.v3 main .bl-post h1{font-size:clamp(34px,4.2vw,48px)!important}
body.v3 main section.c-faq-page{width:min(1180px,calc(100% - 40px))!important;max-width:none!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}
body.v3 main section.hero{align-items:start;padding-top:62px}
/* One grid for every block: 1180px of content and the same side gutter (header, sections, closing band, footer). */
:root{--gutter:clamp(22px,4vw,50px);--grid:calc(1180px + 2 * var(--gutter))}
.lh-in,.lc-in,.lf-in{width:auto;max-width:var(--grid);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
body.v3 .wrap{max-width:var(--grid);margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
body.v3 main section.c-faq-page{width:auto!important;max-width:var(--grid)!important;padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
body.v3 main .bl-post{width:auto;max-width:calc(760px + 2 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);box-sizing:border-box}
/* Case page: screenshot of the client's site, full width, inside a light browser frame */
.cs-shot{margin:0 0 40px;padding:10px;border:1px solid #DCE9E1;border-radius:18px;background:#F6FAF7}
.cs-shot img{display:block;width:100%;height:auto;border-radius:10px}
.cs-shot figcaption{margin:10px 4px 2px;font-size:13px;color:#5B6B63}
.cs-section .cs-results{margin-top:6px}
.cs-group .cs-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Breadcrumb: the old navigation styles must not pad its links. */
.bl-crumbs{align-items:center}
.v3 main .bl-crumbs a,.v3 main .bl-crumbs span{display:inline;margin:0;padding:0;border:0;background:none;font-size:14px;line-height:1.5}