:root{--bg:#FAFAF8;--text:#101316;--muted:#5A6772;--rule:#E6E6E0;--accent:#3A5A7C;--chip:#ECEDEA}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;background:color-mix(in oklab,var(--bg) 92%, white 8%);border-bottom:1px solid var(--rule);z-index:10}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-weight:600;letter-spacing:.2px}
.brand small{font-weight:500;color:var(--muted);margin-left:.5rem}
.nav a{color:var(--text);text-decoration:none;margin-left:20px;font-size:15px}
.nav a:hover{color:var(--accent)}
.hero{padding:88px 0 64px}
.hero h1{font-family:"Source Serif 4",ui-serif,Georgia,serif;font-size:clamp(34px,6.4vw,60px);line-height:1.08;letter-spacing:-.25px;margin:0 0 16px}
.lede{max-width:700px;color:var(--muted);font-size:clamp(18px,2.2vw,21px)}
.hr{height:1px;background:var(--rule);border:0;margin:48px 0}
.cta{display:inline-block;border:1.5px solid var(--text);color:var(--text);text-decoration:none;padding:13px 20px;border-radius:12px;font-weight:600}
.cta:hover{border-color:var(--accent);color:var(--accent)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}.hero{padding-top:64px}}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--muted)}
h2{font-family:"Source Serif 4",ui-serif,Georgia,serif;font-size:clamp(26px,4vw,36px);line-height:1.2;margin:0 0 10px}
h3{font-weight:600;font-size:18px;margin:0 0 4px}
p{margin:0 0 14px}
.section{padding:64px 0}
.muted{color:var(--muted)}
.photo{position:relative;border:1px solid var(--rule);overflow:hidden;border-radius:14px}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.media{height:440px}
.visual-hero{margin-top:26px}
.tint{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 16%, transparent),transparent 60%);mix-blend:multiply;opacity:.9}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
/*=== FC OFFRES CSS START ===*/
.card{background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px}
.card h3{margin:0 0 4px;font-size:18px}
.price{font-family:"Source Serif 4";font-size:28px}
.media{position:relative;height:360px;border:1px solid var(--rule);overflow:hidden;border-radius:14px}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media .tint{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 16%, transparent),transparent 60%);mix-blend:multiply;opacity:.9}
form{display:grid;gap:14px}
label{font-weight:600}
input,select,textarea{border:1px solid var(--rule);border-radius:10px;padding:12px 14px;font:inherit;background:#fff}
textarea{min-height:120px}
button[type=submit]{border:none;background:var(--text);color:#fff;border-radius:12px;padding:12px 16px;font-weight:600;cursor:pointer}
button[type=submit]:hover{opacity:.9}
.tabs{display:flex;gap:8px;margin-top:10px}
.tab-btn{border:1px solid var(--rule);background:#fff;color:var(--text);padding:10px 12px;border-radius:10px;font-weight:600;cursor:pointer}
.tab-btn[aria-pressed="true"]{background:var(--text);color:#fff;border-color:var(--text)}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
[hidden]{display:none !important}
.status{color:var(--muted)}
/*=== FC OFFRES CSS END ===*/
/* header block tweaks */
.brand .wp-block-site-title{display:inline;font-weight:600;letter-spacing:.2px;margin:0}
.brand .wp-block-site-tagline{display:inline;margin-left:.5rem;color:var(--muted);font-weight:500}
.brand .wp-block-site-title{display:inline;font-weight:600;letter-spacing:.2px;margin:0}
.brand .wp-block-site-tagline{display:inline;margin-left:.5rem;color:var(--muted);font-weight:500}
/* --- Ardoise x Gutenberg (patch conversion) --- */
/* Conteneurs & sections */
.wp-block-group.container,
.container.wp-block-group { max-width:1120px; margin:0 auto; padding:0 24px; }
.section { padding:64px 0; }
.hero { padding:88px 0 64px; }
.eyebrow { text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--muted); }
.lede { max-width:700px; color:var(--muted); font-size:clamp(18px,2.2vw,21px); }
/* Séparateurs (=
) */
.wp-block-separator.hr,
.wp-block-separator.is-style-wide.hr {
height:1px; background:var(--rule); border:0; opacity:1; margin:48px 0;
}
/* Bouton style “cta” (bloc Bouton en style Outline) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.cta {
display:inline-block; border:1.5px solid var(--text); color:var(--text);
background:transparent; padding:13px 20px; border-radius:12px; font-weight:600;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.cta:hover {
color:var(--accent); border-color:var(--accent);
}
/* Média héro (bloc Couverture) */
.wp-block-cover.media { border:1px solid var(--rule); border-radius:14px; overflow:hidden; min-height:440px; }
.wp-block-cover.media .wp-block-cover__image-background { object-fit:cover; }
/* “Brand” dans l’entête */
.brand .wp-block-site-title { display:inline; font-weight:600; letter-spacing:.2px; margin:0; }
.brand .wp-block-site-tagline { display:inline; margin-left:.5rem; color:var(--muted); font-weight:500; }
/* === Ardoise x Gutenberg (contenu nocode) === */
/* Contenu : largeur par défaut */
.wp-block-post-content > * {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
/* Pleine largeur & large */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-cover.alignfull {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.wp-block-post-content > .alignwide { max-width: 1120px; }
/* Sections & textes d'intro */
.section { padding: 64px 0; }
.hero { padding: 88px 0 64px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: var(--muted); }
.lede { max-width: 700px; color: var(--muted); font-size: clamp(18px,2.2vw,21px); }
/* H1 héro (si pas de style de bloc) */
.wp-block-post-content h1 {
font-family: "Source Serif 4", ui-serif, Georgia, serif;
font-size: clamp(34px,6.4vw,60px);
line-height: 1.08;
letter-spacing: -0.25px;
margin: 0 0 16px;
}
/* Séparateur façon hr */
.wp-block-separator.hr,
.wp-block-separator.is-style-wide.hr {
height: 1px; background: var(--rule); border: 0; opacity: 1; margin: 48px 0;
}
/* Boutons / CTA (marche pour bloc Bouton OU lien .cta) */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.cta,
.wp-block-post-content a.cta {
display: inline-block;
border: 1.5px solid var(--text);
color: var(--text);
background: transparent;
padding: 13px 20px;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.cta:hover,
.wp-block-post-content a.cta:hover {
color: var(--accent);
border-color: var(--accent);
}
/* Visuel héro en bloc Couverture */
.wp-block-cover.media {
border: 1px solid var(--rule);
border-radius: 14px;
overflow: hidden;
min-height: 440px;
}
.wp-block-cover.media .wp-block-cover__image-background { object-fit: cover; }
/* Branding (si le header est un bloc) */
.brand .wp-block-site-title { display:inline; font-weight:600; letter-spacing:.2px; margin:0; }
.brand .wp-block-site-tagline { display:inline; margin-left:.5rem; color:var(--muted); font-weight:500; }
/* --- Aide mise en page Accueil (Gutenberg) --- */
.wp-block-post-content > *{max-width:1120px;margin-inline:auto;padding-inline:24px}
.wp-block-post-content > .alignfull{max-width:none;padding-inline:0}
.wp-block-post-content > .alignwide{max-width:1120px}
/* Styles "de fond" */
.eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--muted) }
.lede{ max-width:700px; color:var(--muted); font-size:clamp(18px,2.2vw,21px) }
.muted{ color:var(--muted) }
/* H1 héro */
.wp-block-post-content h1{ font-family:"Source Serif 4",ui-serif,Georgia,serif; font-size:clamp(34px,6.4vw,60px); line-height:1.08; letter-spacing:-.25px; margin:0 0 16px }
/* Séparateur façon
*/
.wp-block-separator.hr{ height:1px; background:var(--rule); border:0; opacity:1; margin:48px 0 }
/* Bouton / CTA */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-post-content a.cta{
display:inline-block; border:1.5px solid var(--text); color:var(--text);
background:transparent; padding:13px 20px; border-radius:12px; font-weight:600; text-decoration:none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-post-content a.cta:hover{ color:var(--accent); border-color:var(--accent) }
/* Visuel héro via bloc Couverture */
.wp-block-cover.media{ border:1px solid var(--rule); border-radius:14px; overflow:hidden; min-height:440px }
.wp-block-cover.media .wp-block-cover__image-background{ object-fit:cover }
/* Citation latérale "quote" */
.quote{ font-family:"Source Serif 4",ui-serif,Georgia,serif; font-size:20px; border-left:3px solid var(--rule); padding-left:18px; color:var(--text) }
/* Cadre photo (si tu ajoutes la classe .photo sur une Image) */
.photo{ position:relative; border:1px solid var(--rule); overflow:hidden; border-radius:14px }
/*=== FC CTA PATCH START ===*/
/* --- Typo & tailles comme la maquette --- */
.hero h1,
h1.wp-block-heading{
font-family:"Source Serif 4",ui-serif,Georgia,serif;
font-optical-sizing:auto;
font-size:clamp(34px,6.4vw,60px);
line-height:1.08;
letter-spacing:-.25px;
margin:0 0 16px;
}
.lede{
max-width:700px;
color:var(--muted);
font-size:clamp(18px,2.2vw,21px);
}
/* --- Bouton “contour” compatible Gutenberg --- */
/* On neutralise tout remplissage/ombre par défaut */
.wp-block-buttons.Contour,
.wp-block-button{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
/* Le lien du bouton porte le style contour */
.wp-block-button .wp-block-button__link,
.wp-block-button.cta .wp-block-button__link,
.wp-block-buttons.Contour .wp-block-button .wp-block-button__link{
display:inline-block;
background:transparent !important;
color:var(--text) !important;
border:1.5px solid var(--text) !important;
border-radius:12px !important;
padding:13px 20px !important;
font-weight:600;
text-decoration:none;
}
/* Survol */
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.cta .wp-block-button__link:hover,
.wp-block-buttons.Contour .wp-block-button .wp-block-button__link:hover{
color:var(--accent) !important;
border-color:var(--accent) !important;
}
/* Supprime les variantes “remplissage/outline” natives si définies */
.wp-block-button.is-style-fill .wp-block-button__link{
background:transparent !important;
color:var(--text) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link{
background:transparent !important;
}
/*=== FC CTA PATCH END ===*/
/*=== ARDOISE v3.1 — Variables & tokens START ===*/
:root{
--bg:#FAFAF8; --text:#101316; --muted:#5A6772; --rule:#E6E6E0; --accent:#3A5A7C; --chip:#ECEDEA;
}
/* Utils */
.eyebrow{ text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--muted); }
.hr{ height:1px; background:var(--rule); border:0; margin:44px 0; }
.muted{ color:var(--muted); }
/*=== ARDOISE v3.1 — Variables & tokens END ===*/
/*=== ARDOISE v3.1 — Typo & echelle START ===*/
.hero h1, h1.wp-block-heading{
font-family:"Source Serif 4",ui-serif,Georgia,serif;
font-optical-sizing:auto;
font-size:clamp(34px,6.2vw,58px);
line-height:1.08;
letter-spacing:-.25px;
margin:0 0 16px;
}
.page-offres .hero h1{
font-size:clamp(32px,6vw,54px);
margin-bottom:10px;
}
.lede{
max-width:700px;
color:var(--muted);
font-size:clamp(17.5px,2.05vw,21px);
}
h2, .wp-block-heading.is-style-ardoise-h2{
font-family:"Source Serif 4",ui-serif,Georgia,serif;
font-size:clamp(26px,4vw,36px);
line-height:1.2;
margin:0 0 10px;
}
.ardoise-h2-sm{ font-size:clamp(24px,3.2vw,32px); }
.grid-3, .grid-2{ gap:28px; }
@media (max-width:900px){
.grid-3, .grid-2{ grid-template-columns:1fr; }
.hero{ padding-top:64px; }
}
/*=== ARDOISE v3.1 — Typo & echelle END ===*/
/*=== ARDOISE v3.1 — Navigation sticky START ===*/
.nav{ position:sticky; top:0; z-index:10;
background:color-mix(in oklab,var(--bg) 92%, white 8%);
border-bottom:1px solid var(--rule);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; }
.nav a{ color:var(--text); text-decoration:none; margin-left:20px; font-size:15px }
.nav a:hover{ color:var(--accent); }
/* si le thème rend un menu .menu > li > a */
.nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:20px; }
.nav .menu a{ color:inherit; text-decoration:none; font-size:15px; }
.nav .menu a:hover{ color:var(--accent); }
/*=== ARDOISE v3.1 — Navigation sticky END ===*/
/*=== ARDOISE v3.1 — Bouton Contour (Gutenberg) START ===*/
.wp-block-buttons.Contour, .wp-block-button{
background:transparent!important; border:0!important; box-shadow:none!important;
}
.wp-block-button .wp-block-button__link,
.wp-block-buttons.Contour .wp-block-button .wp-block-button__link{
display:inline-block;
background:transparent!important;
color:var(--text)!important;
border:1.5px solid var(--text)!important;
border-radius:12px!important;
padding:13px 20px!important;
font-weight:600;
text-decoration:none;
line-height:1.2;
min-height:44px;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-buttons.Contour .wp-block-button .wp-block-button__link:hover{
color:var(--accent)!important; border-color:var(--accent)!important;
}
.wp-block-button .wp-block-button__link:focus-visible{
outline:3px solid color-mix(in oklab, var(--accent) 35%, white);
outline-offset:2px;
box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent);
border-color:var(--accent)!important;
}
@media (prefers-reduced-motion:no-preference){
.wp-block-button .wp-block-button__link:active{ transform:translateY(1px) scale(.99); }
}
.wp-block-button .wp-block-button__link[disabled],
.wp-block-button.is-disabled .wp-block-button__link{
opacity:.5; cursor:not-allowed;
color:var(--muted)!important; border-color:var(--rule)!important;
pointer-events:none;
}
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link{
background:transparent!important; color:var(--text)!important;
}
/*=== ARDOISE v3.1 — Bouton Contour (Gutenberg) END ===*/
/*=== ARDOISE v3.1 — Medias & cartes START ===*/
.card{ background:#fff; border:1px solid var(--rule); border-radius:14px; padding:20px; }
.card h3{ margin:0 0 4px; font-size:18px; }
.price{ font-family:"Source Serif 4", ui-serif, Georgia, serif; font-size:28px; }
.photo{ position:relative; border:1px solid var(--rule); overflow:hidden; border-radius:14px; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.media{ height:360px; }
.visual-hero{ margin-top:26px; }
.tint{ position:absolute; inset:0; background:linear-gradient(180deg,color-mix(in oklab,var(--accent) 16%, transparent),transparent 60%); mix-blend:multiply; opacity:.9; }
/*=== ARDOISE v3.1 — Medias & cartes END ===*/
/*=== ARDOISE v3.1 — Quote & chips START ===*/
.quote-ardoise{ border-left:3px solid var(--rule); padding-left:18px; color:var(--text); font-family:"Source Serif 4",ui-serif,Georgia,serif; font-size:20px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ display:inline-block; background:var(--chip); color:var(--text); border:1px solid var(--rule); border-radius:999px; padding:4px 10px; font-size:13px; font-weight:600; }
/*=== ARDOISE v3.1 — Quote & chips END ===*/
/*=== ARDOISE v3.1 — Tabs no-JS START ===*/
.tab-panes .tab-pane{ display:none; }
#pane-email{ display:block; } /* affichage par défaut */
:target.tab-pane{ display:block; }
/* aspect des boutons d'onglets */
.tabs .wp-block-button__link{ border-color:var(--rule)!important; }
.tabs .wp-block-button__link:hover{ border-color:var(--accent)!important; color:var(--accent)!important; }
/*=== ARDOISE v3.1 — Tabs no-JS END ===*/