/*
Theme Name: Kadence Cotepo Child
Theme URI: https://cotepo.fr
Description: Thème enfant Kadence pour cotepo.fr — homepage custom fidèle à la maquette Claude Design v2 (palette Côte Vermeille, Fraunces + Inter, WCAG AA/AAA).
Author: DAVLYRS
Author URI: https://cotepo.fr
Template: kadence
Version: 1.0.0
Text Domain: kadence-cotepo-child
*/
/* ============================================================
TOKENS — palette Côte Vermeille (option B Fauvisme moderne)
============================================================ */
:root {
--cp-primary: #2E7D7B;
--cp-primary-dark: #1F5957;
--cp-primary-deep: #184947;
--cp-grenat: #8B1A1A;
--cp-grenat-hover: #6E1212;
--cp-accent: #E87A3E;
--cp-bg: #FFFCF7;
--cp-bg-alt: #F5EFE4;
--cp-ink: #1A1A1A;
--cp-muted: #5A5651;
--cp-border: #D9D2C4;
--cp-serif: 'Fraunces', ui-serif, Georgia, serif;
--cp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* ============================================================
RESET MINIMAL pour la home (n'affecte que .cp-home-wrapper)
============================================================ */
.cp-home-wrapper {
background: var(--cp-bg);
color: var(--cp-ink);
font-family: var(--cp-sans);
font-size: 18px;
line-height: 1.65;
}
.cp-home-wrapper *,
.cp-home-wrapper *::before,
.cp-home-wrapper *::after {
box-sizing: border-box;
}
/* NE PAS forcer color: inherit sur a → casse les .cp-card/.cp-cta qui ont leur propre color.
Les liens custom .cp-* gèrent leur couleur via classes dédiées. */
/* ============================================================
FOCUS-VISIBLE (WCAG 2.4.11) — uniforme 2px terracotta
Override Kadence body.hide-focus-outline avec spécificité
============================================================ */
body.hide-focus-outline .cp-home-wrapper a:focus-visible,
body.hide-focus-outline .cp-home-wrapper button:focus-visible,
.cp-home-wrapper a:focus-visible,
.cp-home-wrapper button:focus-visible,
.cp-link:focus-visible,
.cp-cta:focus-visible,
.cp-card:focus-visible,
.cp-article:focus-visible {
outline: 2px solid var(--cp-accent) !important;
outline-offset: 2px;
border-radius: 2px;
}
.cp-cta:focus-visible {
outline: 2px solid var(--cp-accent);
outline-offset: 3px;
box-shadow: 0 0 0 2px var(--cp-bg), 0 0 0 5px var(--cp-accent);
}
.cp-card:focus-visible {
outline: 2px solid var(--cp-accent);
outline-offset: -2px;
}
/* ============================================================
HOVER STATES (jamais signal unique)
============================================================ */
.cp-cta {
transition: background 180ms ease, transform 180ms ease;
}
.cp-cta:hover { background: var(--cp-grenat-hover) !important; }
.cp-link {
transition: color 180ms ease, text-decoration-color 180ms ease;
}
.cp-link:hover { color: var(--cp-accent); }
.cp-card .cp-card-img,
.cp-article .cp-article-img {
transition: transform 600ms cubic-bezier(.2,.7,.25,1);
}
.cp-card:hover .cp-card-img { transform: scale(1.05); }
.cp-article:hover .cp-article-img { transform: scale(1.04); }
.cp-card:hover .cp-card-arrow { transform: translateX(4px); background: rgba(255,252,247,0.15); }
.cp-article:hover .cp-article-title { color: var(--cp-accent); }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
.cp-home-wrapper *,
.cp-home-wrapper *::before,
.cp-home-wrapper *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
HEADER
============================================================ */
.cp-header {
position: sticky; top: 0; z-index: 50;
transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
background: transparent;
border-bottom: 1px solid transparent;
color: #FFFCF7;
}
.cp-header.is-scrolled {
background: rgba(255, 252, 247, 0.96);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--cp-border);
color: var(--cp-ink);
}
.cp-header.is-scrolled .cp-wordmark { color: var(--cp-primary-dark); }
.cp-header-inner {
max-width: 1200px; margin: 0 auto;
padding: 20px 32px;
display: flex; align-items: center; justify-content: space-between;
}
.cp-nav-primary {
display: flex; gap: 36px;
font-family: var(--cp-sans);
font-size: 15; font-weight: 500; letter-spacing: 0.1px;
}
.cp-nav-primary a {
color: inherit; text-decoration: none;
padding: 8px 2px;
min-height: 44px;
display: inline-flex; align-items: center;
}
.cp-menu-toggle { display: none; }
/* Wordmark (logo typo) */
.cp-wordmark {
font-family: var(--cp-serif);
font-weight: 500; font-size: 22px;
text-decoration: none;
letter-spacing: -0.3px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 20;
display: inline-flex; align-items: baseline; gap: 0;
padding: 6px 4px; margin: -6px -4px;
color: var(--cp-primary-dark);
}
.cp-header--transparent:not(.is-scrolled) .cp-wordmark { color: #FFFCF7; }
.cp-wordmark-dot {
display: inline-block; width: 6.16px; height: 6.16px;
border-radius: 50%; background: var(--cp-grenat);
margin: 0 3.08px 0 0.88px;
transform: translateY(0.44px);
}
/* ============================================================
HERO
============================================================ */
.cp-hero {
margin-top: -88px;
position: relative;
min-height: 720px;
height: 70vh;
width: 100%; overflow: hidden;
isolation: isolate; /* crée un stacking context pour maitriser l'ordre des layers */
}
.cp-hero > .cp-hero-content-wrap { z-index: 1; }
.cp-hero-bg {
position: absolute; inset: 0;
background: linear-gradient(175deg, #2E7D7B 0%, #1F5957 65%, #184947 100%);
}
.cp-hero-topo {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1400px auto; background-position: center;
opacity: 0.22; mix-blend-mode: soft-light;
}
.cp-hero-halo {
position: absolute; inset: 0;
background: radial-gradient(ellipse 900px 700px at 82% 30%, rgba(232,122,62,0.28), transparent 60%);
}
.cp-hero-darken {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(24,73,71,0) 40%, rgba(18,55,53,0.55) 100%);
}
.cp-hero-content-wrap {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding-bottom: 88px;
}
.cp-hero-content {
max-width: 1200px; margin: 0 auto;
padding: 0 32px; width: 100%;
color: #FFFCF7;
}
.cp-hero-kicker {
font-family: var(--cp-sans); font-size: 13px; letter-spacing: 2.2px;
text-transform: uppercase; opacity: 0.95; margin-bottom: 22px;
display: flex; align-items: center; gap: 14px;
}
.cp-hero-kicker .cp-dash {
display: inline-block; width: 28px; height: 1px;
background: #FFFCF7; opacity: 0.8;
}
.cp-hero h1 {
font-family: var(--cp-serif); font-weight: 500; font-size: 88px;
line-height: 1.08; letter-spacing: -1.5px; margin: 0; max-width: 1020px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
text-wrap: pretty; color: #FFFCF7;
}
.cp-hero-lede {
font-family: var(--cp-sans); font-size: 20px; line-height: 1.55;
max-width: 58ch; margin: 28px 0 44px;
color: rgba(255,252,247,0.95); font-weight: 400;
}
.cp-hero-actions {
display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.cp-cta {
background: var(--cp-grenat); color: #FFFCF7;
padding: 16px 28px; border-radius: 2px; text-decoration: none;
font-family: var(--cp-sans); font-size: 15px; font-weight: 500;
letter-spacing: 0.3px;
display: inline-flex; align-items: center; gap: 12px;
min-height: 48px; box-sizing: border-box;
box-shadow: 0 1px 2px rgba(26,26,26,0.08);
border: none; cursor: pointer;
}
.cp-hero .cp-secondary-link {
color: #FFFCF7; text-decoration: underline; text-underline-offset: 5px;
font-family: var(--cp-sans); font-size: 15px; font-weight: 500;
padding: 12px 2px; min-height: 48px;
display: inline-flex; align-items: center;
}
/* ============================================================
EYEBROW (petit label avec tiret)
============================================================ */
.cp-eyebrow {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--cp-primary-dark);
font-weight: 600;
display: flex; align-items: center; gap: 14px;
}
.cp-eyebrow .cp-dash {
display: inline-block; width: 28px; height: 1px;
background: var(--cp-primary-dark);
}
/* ============================================================
SECTION DESTINATIONS
============================================================ */
.cp-destinations {
padding: 120px 0 100px;
background: var(--cp-bg);
}
.cp-container {
max-width: 1200px; margin: 0 auto;
padding: 0 32px;
}
.cp-destinations h2 {
font-family: var(--cp-serif); font-weight: 500; font-size: 56px;
line-height: 1.1; letter-spacing: -0.8px; color: var(--cp-primary-dark);
margin: 18px 0 64px; max-width: 780px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72;
}
.cp-destinations h2 .cp-soft { color: var(--cp-muted); }
.cp-dest-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
list-style: none; padding: 0; margin: 0;
}
.cp-card {
display: block; position: relative; aspect-ratio: 4 / 5;
border-radius: 4px; overflow: hidden; text-decoration: none;
color: #FFFCF7;
box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.06);
}
.cp-card-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
}
.cp-card-grad {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(31,89,87,0) 35%, rgba(31,89,87,0.82) 100%);
}
.cp-card-content {
position: absolute; left: 28px; right: 28px; bottom: 28px;
display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.cp-card-sub {
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 2.4px;
text-transform: uppercase; color: rgba(255,252,247,0.92); margin-bottom: 8px;
}
.cp-card-label {
font-family: var(--cp-serif); font-weight: 500; font-size: 32px;
line-height: 1.1; letter-spacing: -0.4px; color: #FFFCF7;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 48;
}
.cp-card-arrow {
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid rgba(255,252,247,0.85);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex: none;
transition: transform 400ms cubic-bezier(.2,.7,.25,1), background 240ms;
}
/* ============================================================
SECTION DERNIERS GUIDES
============================================================ */
.cp-guides {
padding: 120px 0;
background: var(--cp-bg-alt);
}
.cp-guides-header {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 64px; gap: 40px;
}
.cp-guides h2 {
font-family: var(--cp-serif); font-weight: 500; font-size: 56px;
line-height: 1.1; letter-spacing: -0.8px; color: var(--cp-primary-dark);
margin: 18px 0 0;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72;
}
.cp-guides-all {
font-family: var(--cp-sans); font-size: 14px; color: var(--cp-primary-dark);
text-decoration: underline; text-underline-offset: 4px; font-weight: 500;
white-space: nowrap; padding: 10px 4px; min-height: 44px;
display: inline-flex; align-items: center;
}
.cp-articles-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
list-style: none; padding: 0; margin: 0;
}
.cp-article {
display: block; text-decoration: none; color: inherit; border-radius: 4px;
}
.cp-article-img-wrap {
aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px;
margin-bottom: 20px; background: var(--cp-border);
}
.cp-article-img {
width: 100%; height: 100%;
background-size: cover; background-position: center;
}
.cp-article-cat {
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; color: var(--cp-primary-dark);
font-weight: 600; margin-bottom: 10px;
}
.cp-article-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 23px;
line-height: 1.25; letter-spacing: -0.2px; color: var(--cp-ink);
margin: 0 0 16px; text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
transition: color 180ms ease;
}
.cp-article-date {
font-family: var(--cp-sans); font-size: 13px; color: var(--cp-muted); letter-spacing: 0.2px;
}
/* ============================================================
SECTION POURQUOI
============================================================ */
.cp-why {
padding: 140px 0 120px;
background: var(--cp-bg);
}
.cp-why-intro { max-width: 780px; margin-bottom: 84px; }
.cp-why h2 {
font-family: var(--cp-serif); font-weight: 500; font-size: 48px;
line-height: 1.12; letter-spacing: -0.6px; color: var(--cp-primary-dark);
margin: 18px 0 0;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
text-wrap: balance;
}
.cp-why-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
border-top: 1px solid var(--cp-border); padding-top: 56px;
}
.cp-why-item h3 {
font-family: var(--cp-serif); font-weight: 500; font-size: 26px;
line-height: 1.2; letter-spacing: -0.2px; color: var(--cp-ink);
margin: 0 0 14px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 36;
}
.cp-why-item p {
font-family: var(--cp-sans); font-size: 16px; line-height: 1.65;
color: var(--cp-muted); margin: 0; max-width: 38ch;
}
.cp-why-icon {
margin-bottom: 24px; color: var(--cp-primary-dark);
display: inline-block;
}
/* ============================================================
SECTION AUTEUR
============================================================ */
.cp-author {
padding: 100px 0;
background: var(--cp-bg-alt);
}
.cp-author-inner {
max-width: 1000px; margin: 0 auto; padding: 0 32px;
display: grid; grid-template-columns: 160px 1fr; gap: 48px; align-items: center;
}
.cp-author-avatar {
width: 140px; height: 140px; border-radius: 50%;
background-size: cover; background-position: center;
border: 1px solid var(--cp-border);
/* Fallback gradient quand aucune image n'est chargée */
background-color: #D9D2C4;
background-image: linear-gradient(135deg, #D9D2C4 0%, #A89E8A 100%);
position: relative;
}
.cp-author-avatar::after {
/* Silhouette discrète */
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: cover;
border-radius: 50%;
pointer-events: none;
}
.cp-author-avatar.has-photo::after { display: none; }
.cp-author-label {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.2px;
text-transform: uppercase; color: var(--cp-primary-dark);
font-weight: 600; margin-bottom: 14px;
}
.cp-author-lede {
font-family: var(--cp-serif); font-weight: 400; font-size: 26px;
line-height: 1.42; letter-spacing: -0.1px; color: var(--cp-ink);
margin: 0 0 22px; text-wrap: pretty; max-width: 55ch;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 30;
}
.cp-author-more {
font-family: var(--cp-sans); font-size: 15px; color: var(--cp-primary-dark);
text-decoration: underline; text-underline-offset: 4px; font-weight: 500;
padding: 10px 4px; min-height: 44px;
display: inline-flex; align-items: center;
}
/* ============================================================
FOOTER
============================================================ */
.cp-footer {
background: var(--cp-primary-dark);
color: var(--cp-bg);
padding: 88px 0 36px;
}
.cp-footer-inner {
max-width: 1200px; margin: 0 auto; padding: 0 32px;
}
.cp-footer-nav {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 48px;
padding-bottom: 72px; border-bottom: 1px solid rgba(255,252,247,0.18);
}
.cp-footer-brand p {
font-family: var(--cp-sans); font-size: 15px; line-height: 1.6;
color: rgba(255,252,247,0.85); margin-top: 20px; max-width: 40ch;
}
.cp-footer-col-title {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2px;
text-transform: uppercase; font-weight: 600; margin-bottom: 20px;
color: #FFFCF7;
}
.cp-footer-col ul {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 4px;
}
.cp-footer-col a {
font-family: var(--cp-sans); font-size: 14px;
color: rgba(255,252,247,0.88); text-decoration: none;
display: block; padding: 8px 0;
}
.cp-footer .cp-wordmark { color: #FFFCF7; font-size: 26px; }
.cp-footer .cp-wordmark-dot { width: 7.28px; height: 7.28px; }
.cp-footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 28px;
font-family: var(--cp-sans); font-size: 13px;
color: rgba(255,252,247,0.82); gap: 40px;
}
/* ============================================================
RESPONSIVE — Mobile 390 cible
============================================================ */
@media (max-width: 767px) {
.cp-home-wrapper { font-size: 17px; }
/* Header mobile */
.cp-header-inner { padding: 16px 20px; }
.cp-nav-primary { display: none; }
.cp-nav-primary.is-open {
display: flex;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column;
background: var(--cp-bg);
color: var(--cp-ink);
border-bottom: 1px solid var(--cp-border);
padding: 8px 20px 16px;
gap: 0;
box-shadow: 0 8px 16px rgba(26,26,26,0.08);
}
.cp-nav-primary.is-open a {
padding: 14px 2px; min-height: 48px;
border-bottom: 1px solid var(--cp-border);
}
.cp-nav-primary.is-open a:last-child { border-bottom: none; }
.cp-menu-toggle {
display: flex; align-items: center; justify-content: center;
background: transparent; border: none; color: inherit;
width: 48px; height: 48px; cursor: pointer;
padding: 0; margin: -8px -12px -8px 0; border-radius: 2px;
}
.cp-wordmark { font-size: 20px; }
.cp-wordmark-dot { width: 5.6px; height: 5.6px; }
/* Hero mobile */
.cp-hero { margin-top: -64px; min-height: 760px; height: auto; }
.cp-hero-topo { background-size: 800px auto; opacity: 0.2; }
.cp-hero-halo {
background: radial-gradient(ellipse 500px 500px at 75% 25%, rgba(232,122,62,0.3), transparent 65%);
}
/* Mobile : content-wrap en relative pour passer au-dessus des layers absolute
(isolation sur .cp-hero assure déjà le stacking, on force z-index pour clarté) */
.cp-hero-content-wrap {
position: relative;
inset: auto;
padding-bottom: 0;
z-index: 1;
min-height: 760px;
}
.cp-hero-content {
padding: 96px 24px 72px;
max-width: none;
margin: 0;
}
.cp-hero-kicker {
font-size: 11px; letter-spacing: 2px; margin-bottom: 18px; gap: 10px;
}
.cp-hero-kicker .cp-dash { width: 20px; }
.cp-hero h1 {
font-size: 44px; letter-spacing: -0.8px; line-height: 1.1;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 80;
}
.cp-hero-lede {
font-size: 16px; margin-top: 22px; margin-bottom: 32px;
}
.cp-hero-actions { flex-direction: column; align-items: flex-start; gap: 0; }
.cp-hero .cp-cta { margin-bottom: 18px; padding: 15px 22px; }
/* Destinations mobile */
.cp-destinations { padding: 80px 0 72px; }
.cp-container { padding: 0 24px; }
.cp-destinations h2 {
font-size: 36px; letter-spacing: -0.5px; line-height: 1.12; margin: 14px 0 40px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
}
.cp-dest-grid { grid-template-columns: 1fr; gap: 16px; }
.cp-card-content { left: 20px; right: 20px; bottom: 22px; gap: 14px; }
.cp-card-sub { font-size: 10px; letter-spacing: 2px; margin-bottom: 6px; }
.cp-card-label {
font-size: 28px; letter-spacing: -0.3px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40;
}
.cp-card-arrow { width: 36px; height: 36px; font-size: 16px; }
/* Guides mobile */
.cp-guides { padding: 80px 0; }
.cp-guides-header { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 40px; }
.cp-guides h2 {
font-size: 36px; letter-spacing: -0.5px; line-height: 1.12; margin: 14px 0 0;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
}
.cp-articles-grid { grid-template-columns: 1fr; gap: 36px; }
.cp-article-img-wrap { margin-bottom: 18px; }
.cp-article-cat { font-size: 10px; }
.cp-article-title {
font-size: 22px; margin: 0 0 12px;
}
.cp-article-date { font-size: 12px; }
.cp-guides-all { margin-top: 40px; display: inline-flex; }
/* Pourquoi mobile */
.cp-why { padding: 90px 0 80px; }
.cp-why-intro { margin-bottom: 44px; }
.cp-why h2 {
font-size: 30px; letter-spacing: -0.4px; line-height: 1.15; margin: 14px 0 0;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 48;
}
.cp-why-grid { grid-template-columns: 1fr; gap: 36px; padding-top: 36px; }
.cp-why-icon { margin-bottom: 14px; }
.cp-why-item h3 {
font-size: 21px; letter-spacing: 0; margin: 0 0 10px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 30;
}
.cp-why-item p { font-size: 15px; }
/* Auteur mobile */
.cp-author { padding: 72px 0; }
.cp-author-inner {
grid-template-columns: 1fr; gap: 0; padding: 0 24px;
}
.cp-author-avatar {
width: 96px; height: 96px; margin-bottom: 24px;
}
.cp-author-label { font-size: 11px; letter-spacing: 2px; }
.cp-author-lede {
font-size: 21px; line-height: 1.42; margin: 0 0 22px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 30;
}
.cp-author-more { font-size: 14px; }
/* Footer mobile */
.cp-footer { padding: 64px 0 32px; }
.cp-footer-inner { padding: 0 24px; }
.cp-footer .cp-wordmark { font-size: 22px; }
.cp-footer-brand p { font-size: 14px; margin-top: 16px; margin-bottom: 48px; max-width: none; }
.cp-footer-nav {
grid-template-columns: 1fr 1fr; gap: 36px 24px; padding-bottom: 36px;
}
.cp-footer-brand { grid-column: 1 / -1; }
.cp-footer-col-title { font-size: 11px; letter-spacing: 2px; margin-bottom: 14px; }
.cp-footer-col a { font-size: 13px; }
.cp-footer-bottom {
flex-direction: column; align-items: flex-start; gap: 4px;
padding-top: 24px; font-size: 12px; line-height: 1.6;
}
}
/* ============================================================
Tablet bridge 768 → 1023
============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
.cp-hero h1 { font-size: 64px; }
.cp-dest-grid { grid-template-columns: repeat(2, 1fr); }
.cp-articles-grid { grid-template-columns: repeat(2, 1fr); }
.cp-why-grid { grid-template-columns: repeat(2, 1fr); }
.cp-footer-nav { grid-template-columns: 1.4fr 1fr 1fr; }
}
/* ==============================================================
SKIP LINK (a11y)
============================================================== */
.cp-skip-link {
position: absolute; top: 0; left: 12px; z-index: 9999;
background: var(--cp-grenat); color: #FFFCF7;
padding: 10px 16px; border-radius: 2px;
font-family: var(--cp-sans); font-size: 14px; font-weight: 500;
text-decoration: none;
transform: translateY(-200%);
transition: transform 160ms ease;
}
.cp-skip-link:focus {
transform: translateY(12px);
outline: 2px solid var(--cp-accent); outline-offset: 2px;
}
.cp-page-wrapper main:focus { outline: none; }
/* ==============================================================
HEADER VARIANT OPAQUE (pages, articles, archives)
============================================================== */
.cp-header--opaque {
background: var(--cp-bg);
color: var(--cp-ink);
border-bottom: 1px solid var(--cp-border);
position: sticky;
}
.cp-header--opaque .cp-wordmark { color: var(--cp-primary-dark); }
.cp-header--opaque + main,
.cp-header--opaque ~ main { margin-top: 0; }
/* Sur les pages opaques, pas de marge négative sur premier section */
.cp-header--opaque + .cp-archive-hero,
.cp-header--opaque + .cp-single .cp-single-hero,
.cp-header--opaque + .cp-page .cp-page-hero {
margin-top: 0;
}
/* ==============================================================
BREADCRUMB
============================================================== */
.cp-breadcrumb {
font-family: var(--cp-sans); font-size: 13px;
color: var(--cp-muted); letter-spacing: 0.1px;
margin-bottom: 24px;
}
.cp-breadcrumb ol {
display: flex; flex-wrap: wrap; gap: 6px;
list-style: none; margin: 0; padding: 0;
}
.cp-breadcrumb li { display: flex; align-items: center; gap: 6px; }
.cp-breadcrumb a { text-decoration: none; padding: 4px 2px; }
.cp-breadcrumb-sep { color: var(--cp-border); }
.cp-breadcrumb [aria-current="page"] { opacity: 0.75; }
.cp-breadcrumb--light { color: rgba(255,252,247,0.88); }
.cp-breadcrumb--light .cp-breadcrumb-sep { color: rgba(255,252,247,0.55); }
.cp-breadcrumb--light [aria-current="page"] { color: rgba(255,252,247,0.88); opacity: 0.85; }
/* ==============================================================
EYEBROW LIGHT (sur gradient sombre)
============================================================== */
.cp-eyebrow--light { color: rgba(255,252,247,0.92); }
.cp-eyebrow--light .cp-dash { background: rgba(255,252,247,0.8); }
/* ==============================================================
SINGLE POST — Hero
============================================================== */
.cp-single-hero {
position: relative;
isolation: isolate;
min-height: 480px;
padding: 160px 0 72px;
color: #FFFCF7;
overflow: hidden;
}
.cp-header--opaque + .cp-single .cp-single-hero { padding-top: 160px; }
.cp-single-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
z-index: -2;
}
.cp-single-hero-darken {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(18,55,53,0.25) 0%, rgba(18,55,53,0.75) 100%),
linear-gradient(135deg, rgba(31,89,87,0.35) 0%, rgba(139,26,26,0.25) 100%);
z-index: -1;
}
.cp-single-hero-inner { position: relative; max-width: 900px; }
.cp-single-eyebrow {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.4px;
text-transform: uppercase; color: rgba(255,252,247,0.92);
font-weight: 600; margin-bottom: 16px;
}
.cp-single-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(32px, 4.4vw, 58px);
line-height: 1.08; letter-spacing: -0.8px;
margin: 0 0 28px; color: #FFFCF7;
text-wrap: balance; max-width: 18ch;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96;
}
.cp-single-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
font-family: var(--cp-sans); font-size: 14px;
color: rgba(255,252,247,0.88);
}
.cp-meta-dot { opacity: 0.5; }
.cp-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px 5px 8px;
border-radius: 999px;
font-family: var(--cp-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2px;
margin-left: 4px;
}
.cp-badge--tested {
background: rgba(255,252,247,0.18);
color: #FFFCF7;
border: 1px solid rgba(255,252,247,0.35);
}
/* ==============================================================
SINGLE — Layout TOC + Body
============================================================== */
.cp-single-layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 72px;
padding: 64px 32px 96px;
align-items: start;
max-width: 1200px;
margin: 0 auto;
}
/* TOC sticky desktop */
.cp-toc {
position: sticky;
top: 104px;
}
.cp-toc-details {
border-left: 2px solid var(--cp-border);
padding-left: 16px;
}
.cp-toc-summary {
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 2.2px;
text-transform: uppercase; color: var(--cp-primary-dark);
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex; align-items: center; justify-content: space-between;
padding: 4px 0;
margin-bottom: 12px;
}
.cp-toc-summary::-webkit-details-marker { display: none; }
.cp-toc-chevron {
transition: transform 200ms ease;
color: var(--cp-primary-dark);
}
.cp-toc-details[open] .cp-toc-chevron { transform: rotate(180deg); }
.cp-toc-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 4px;
font-family: var(--cp-sans); font-size: 14px;
line-height: 1.45;
}
.cp-toc-list a {
color: var(--cp-muted);
text-decoration: none;
display: block;
padding: 6px 0;
border-left: 2px solid transparent;
margin-left: -18px;
padding-left: 16px;
transition: color 180ms ease, border-color 180ms ease;
}
.cp-toc-list a:hover,
.cp-toc-list a.is-active {
color: var(--cp-primary-dark);
border-left-color: var(--cp-accent);
}
/* Body */
.cp-single-body { min-width: 0; }
.cp-single-content {
font-family: var(--cp-sans);
font-size: 18px; line-height: 1.75;
color: var(--cp-ink);
max-width: 65ch;
}
.cp-single-content > * + * { margin-top: 1.2em; }
.cp-single-content h2 {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(24px, 2.8vw, 32px);
line-height: 1.25; letter-spacing: -0.3px;
color: var(--cp-primary-dark);
margin-top: 2em; margin-bottom: 0.6em;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 44;
scroll-margin-top: 100px;
}
.cp-single-content h3 {
font-family: var(--cp-serif); font-weight: 500;
font-size: 22px; line-height: 1.3;
color: var(--cp-ink);
margin-top: 1.6em; margin-bottom: 0.5em;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
}
.cp-single-content p { margin: 0 0 1.2em; }
.cp-single-content ul,
.cp-single-content ol { padding-left: 22px; }
.cp-single-content ul li,
.cp-single-content ol li { margin-bottom: 0.5em; line-height: 1.65; }
.cp-single-content blockquote {
border-left: 3px solid var(--cp-accent);
padding: 8px 0 8px 22px;
font-family: var(--cp-serif); font-style: italic;
font-size: 21px; line-height: 1.5;
color: var(--cp-primary-dark);
margin: 2em 0;
}
.cp-single-content a:not(.cp-cta):not(.cp-link):not(.cp-card):not(.cp-article) {
color: var(--cp-primary-dark);
text-decoration: underline;
text-decoration-color: var(--cp-accent);
text-underline-offset: 3px;
text-decoration-thickness: 1.5px;
}
.cp-single-content a:not(.cp-cta):not(.cp-link):not(.cp-card):not(.cp-article):hover {
color: var(--cp-accent);
}
.cp-single-content img {
max-width: 100%; height: auto;
border-radius: 4px;
margin: 1.4em 0;
}
.cp-single-content table {
width: 100%;
border-collapse: collapse;
margin: 2em 0;
font-size: 15px;
font-family: var(--cp-sans);
}
.cp-single-content table th,
.cp-single-content table td {
border-bottom: 1px solid var(--cp-border);
padding: 12px 10px;
text-align: left;
vertical-align: top;
}
.cp-single-content table th {
font-weight: 600;
background: var(--cp-bg-alt);
color: var(--cp-primary-dark);
font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase;
}
.cp-single-content table tr:hover td { background: rgba(245,239,228,0.5); }
/* ==============================================================
CALLOUTS (utilisables en HTML block dans l'article)
Bon plan...
============================================================== */
.cp-callout {
display: grid; grid-template-columns: 24px 1fr; gap: 14px;
padding: 20px 24px;
border-radius: 4px;
border-left: 3px solid var(--cp-primary-dark);
background: var(--cp-bg-alt);
font-family: var(--cp-sans);
margin: 2em 0;
position: relative;
}
.cp-callout::before {
content: ''; width: 24px; height: 24px;
background-repeat: no-repeat; background-position: center; background-size: contain;
margin-top: 2px;
}
.cp-callout strong {
display: block; margin-bottom: 4px;
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2px;
text-transform: uppercase; color: var(--cp-primary-dark);
}
.cp-callout.is-tip {
border-left-color: #2E7D7B;
background: rgba(46,125,123,0.08);
}
.cp-callout.is-tip::before {
background-image: url("data:image/svg+xml;utf8,");
}
.cp-callout.is-tip strong { color: #1F5957; }
.cp-callout.is-warn {
border-left-color: var(--cp-grenat);
background: rgba(139,26,26,0.06);
}
.cp-callout.is-warn::before {
background-image: url("data:image/svg+xml;utf8,");
}
.cp-callout.is-warn strong { color: var(--cp-grenat); }
.cp-callout.is-info {
border-left-color: var(--cp-accent);
background: rgba(232,122,62,0.08);
}
.cp-callout.is-info::before {
background-image: url("data:image/svg+xml;utf8,");
}
.cp-callout.is-info strong { color: #A84A1E; }
/* ==============================================================
DISCLOSURE AFFILIATION (début article)
============================================================== */
.cp-disclosure {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 18px;
background: var(--cp-bg-alt);
border-radius: 4px;
font-family: var(--cp-sans); font-size: 13px; line-height: 1.55;
color: var(--cp-muted);
margin-bottom: 32px;
max-width: 65ch;
border-left: 3px solid var(--cp-border);
}
.cp-disclosure svg { flex: none; color: var(--cp-primary-dark); margin-top: 2px; }
.cp-disclosure a { color: var(--cp-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
/* ==============================================================
AFFILIATE WIDGET WRAPPERS (placeholders)
...
============================================================== */
.cp-aff-widget {
background: #FFFCF7;
border: 1px solid var(--cp-border);
border-radius: 4px;
padding: 28px;
margin: 2.4em 0;
box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.06);
}
.cp-aff-widget-eyebrow {
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 2.2px;
text-transform: uppercase; font-weight: 600; color: var(--cp-primary-dark);
margin-bottom: 8px;
}
.cp-aff-widget-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 22px;
line-height: 1.25; color: var(--cp-ink);
margin: 0 0 18px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
}
.cp-aff-widget .cp-cta { margin-top: 18px; }
/* ==============================================================
TAGS
============================================================== */
.cp-single-tags {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 48px; padding-top: 32px;
border-top: 1px solid var(--cp-border);
}
.cp-tag {
display: inline-flex; padding: 6px 12px;
background: var(--cp-bg-alt);
border-radius: 999px;
font-family: var(--cp-sans); font-size: 13px; font-weight: 500;
color: var(--cp-primary-dark);
text-decoration: none;
}
.cp-tag:hover { background: var(--cp-accent); color: #FFFCF7; }
/* ==============================================================
AUTHOR CARD (fin single)
============================================================== */
.cp-author-card {
display: grid; grid-template-columns: 80px 1fr; gap: 24px;
margin-top: 48px; padding: 28px;
background: var(--cp-bg-alt);
border-radius: 6px;
align-items: start;
}
.cp-author-card .cp-author-avatar {
width: 72px; height: 72px;
}
.cp-author-card .cp-author-avatar::after { /* silhouette plus petite */ }
.cp-author-card .cp-author-label {
font-size: 12px; letter-spacing: 2px; margin-bottom: 8px;
}
.cp-author-card-lede {
font-family: var(--cp-sans); font-size: 15px; line-height: 1.6;
color: var(--cp-muted); margin: 0 0 10px;
}
.cp-author-card .cp-author-more { font-size: 14px; margin: 0; }
/* ==============================================================
RELATED (fin single)
============================================================== */
.cp-related {
padding: 80px 0 100px;
background: var(--cp-bg-alt);
border-top: 1px solid var(--cp-border);
}
.cp-related h2 {
font-family: var(--cp-serif); font-weight: 500; font-size: clamp(28px, 3vw, 40px);
line-height: 1.2; letter-spacing: -0.4px; color: var(--cp-primary-dark);
margin: 18px 0 48px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
text-wrap: balance;
}
.cp-related-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
list-style: none; padding: 0; margin: 0;
}
/* ==============================================================
ARCHIVE HERO (catégorie, tag, author, date, search)
============================================================== */
.cp-archive-hero {
position: relative;
isolation: isolate;
padding: 128px 0 72px;
color: #FFFCF7;
overflow: hidden;
--cp-archive-p1: #2E7D7B;
--cp-archive-p2: #1F5957;
--cp-archive-accent: #E87A3E;
}
.cp-archive-hero-bg {
position: absolute; inset: 0;
background: linear-gradient(175deg, var(--cp-archive-p1) 0%, var(--cp-archive-p2) 70%, #184947 100%);
z-index: -2;
}
.cp-archive-hero-topo {
position: absolute; inset: 0; z-index: -1;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1400px auto; background-position: center;
opacity: 0.22; mix-blend-mode: soft-light;
}
.cp-archive-hero-halo {
position: absolute; inset: 0; z-index: -1;
background: radial-gradient(ellipse 700px 500px at 80% 40%, color-mix(in srgb, var(--cp-archive-accent) 30%, transparent), transparent 60%);
}
.cp-archive-hero-inner { position: relative; max-width: 900px; }
.cp-archive-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(34px, 4.4vw, 64px);
line-height: 1.08; letter-spacing: -0.8px;
margin: 14px 0 20px; color: #FFFCF7;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 120;
}
.cp-archive-lede {
font-family: var(--cp-sans); font-size: 17px; line-height: 1.6;
color: rgba(255,252,247,0.92);
max-width: 58ch; margin: 0;
}
/* ==============================================================
ARCHIVE GRID
============================================================== */
.cp-archive-grid-section {
padding: 72px 0 100px;
background: var(--cp-bg);
}
.cp-archive-meta {
font-family: var(--cp-sans); font-size: 13px; color: var(--cp-muted);
letter-spacing: 0.2px; margin-bottom: 36px;
}
.cp-archive-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 32px;
list-style: none; padding: 0; margin: 0;
}
.cp-archive-card {
display: grid; grid-template-columns: 280px 1fr; gap: 24px;
text-decoration: none; color: inherit;
border-radius: 4px;
}
.cp-archive-card-img-wrap {
aspect-ratio: 4 / 3;
overflow: hidden; border-radius: 4px;
background: var(--cp-border);
}
.cp-archive-card-img-wrap .cp-article-img {
width: 100%; height: 100%;
transition: transform 600ms cubic-bezier(.2,.7,.25,1);
}
.cp-archive-card:hover .cp-article-img { transform: scale(1.04); }
.cp-archive-card-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 22px;
line-height: 1.25; letter-spacing: -0.2px; color: var(--cp-ink);
margin: 10px 0 12px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
transition: color 180ms ease;
}
.cp-archive-card:hover .cp-archive-card-title { color: var(--cp-accent); }
.cp-archive-card-excerpt {
font-family: var(--cp-sans); font-size: 15px; line-height: 1.6;
color: var(--cp-muted); margin: 0 0 14px;
max-width: 45ch;
}
/* Pagination */
.cp-pagination {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
margin-top: 56px;
font-family: var(--cp-sans); font-size: 14px;
}
.cp-pagination a,
.cp-pagination .current {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 12px;
border: 1px solid var(--cp-border);
border-radius: 2px;
color: var(--cp-ink);
text-decoration: none;
font-weight: 500;
}
.cp-pagination .current {
background: var(--cp-primary-dark); color: #FFFCF7; border-color: var(--cp-primary-dark);
}
.cp-pagination a:hover { background: var(--cp-bg-alt); }
/* Empty state */
.cp-empty-state {
padding: 100px 0;
text-align: center;
}
.cp-empty-state h2 {
font-family: var(--cp-serif); font-weight: 500; font-size: 28px;
color: var(--cp-primary-dark); margin: 0 0 14px;
}
.cp-empty-state p {
font-family: var(--cp-sans); color: var(--cp-muted); margin: 0 0 28px;
}
.cp-empty-state .cp-cta { display: inline-flex; }
/* ==============================================================
PAGE (À propos, Contact, Légales)
============================================================== */
.cp-page-hero {
position: relative;
isolation: isolate;
padding: 128px 0 60px;
overflow: hidden;
}
.cp-page-hero--gradient {
color: #FFFCF7;
}
.cp-page-hero--gradient .cp-page-title { color: #FFFCF7; }
.cp-page-hero--gradient .cp-page-lede { color: rgba(255,252,247,0.92); }
.cp-page-hero--plain {
background: var(--cp-bg-alt);
border-bottom: 1px solid var(--cp-border);
padding: 72px 0 44px;
color: var(--cp-ink);
}
.cp-page-hero--plain .cp-page-title { color: var(--cp-primary-dark); }
.cp-page-hero-inner { position: relative; max-width: 900px; }
.cp-page-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(32px, 4vw, 52px);
line-height: 1.1; letter-spacing: -0.6px;
margin: 14px 0 18px;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 96;
}
.cp-page-lede {
font-family: var(--cp-sans); font-size: 17px; line-height: 1.6;
max-width: 58ch; margin: 0;
}
.cp-page-body-section { padding: 64px 0 96px; background: var(--cp-bg); }
.cp-page-body-container { max-width: 760px; }
.cp-page-content {
font-family: var(--cp-sans); font-size: 17px; line-height: 1.75;
color: var(--cp-ink);
}
.cp-page-content > * + * { margin-top: 1.2em; }
.cp-page-content h2 {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.25; letter-spacing: -0.2px;
color: var(--cp-primary-dark);
margin-top: 2em; margin-bottom: 0.6em;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40;
}
.cp-page-content h3 {
font-family: var(--cp-serif); font-weight: 500;
font-size: 20px; line-height: 1.3;
color: var(--cp-ink);
margin-top: 1.6em; margin-bottom: 0.5em;
}
.cp-page-content ul,
.cp-page-content ol { padding-left: 22px; }
.cp-page-content li { margin-bottom: 0.5em; line-height: 1.65; }
.cp-page-content a:not(.cp-cta):not(.cp-link) {
color: var(--cp-primary-dark);
text-decoration: underline;
text-decoration-color: var(--cp-accent);
text-underline-offset: 3px;
}
.cp-page-content a:not(.cp-cta):not(.cp-link):hover { color: var(--cp-accent); }
/* ==============================================================
404
============================================================== */
.cp-404 {
position: relative;
isolation: isolate;
padding: 160px 0 120px;
color: #FFFCF7;
overflow: hidden;
--cp-archive-p1: #2E7D7B;
--cp-archive-p2: #1F5957;
--cp-archive-accent: #E87A3E;
}
.cp-404-inner {
position: relative;
max-width: 700px;
text-align: left;
}
.cp-404-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(36px, 5vw, 64px);
line-height: 1.08; letter-spacing: -0.8px;
margin: 14px 0 24px; color: #FFFCF7;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 120;
}
.cp-404-lede {
font-family: var(--cp-sans); font-size: 18px; line-height: 1.6;
color: rgba(255,252,247,0.92);
margin: 0 0 36px;
}
.cp-404-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
}
.cp-404 .cp-secondary-link {
color: #FFFCF7; text-decoration: underline; text-underline-offset: 5px;
font-family: var(--cp-sans); font-size: 15px; font-weight: 500;
padding: 12px 2px; min-height: 48px;
display: inline-flex; align-items: center;
}
/* ==============================================================
RESPONSIVE — Ajustements single / archive / page / 404
============================================================== */
@media (max-width: 1023px) {
.cp-single-layout {
grid-template-columns: 1fr;
gap: 32px;
padding: 48px 24px 80px;
}
.cp-toc {
position: static;
background: var(--cp-bg-alt);
border-radius: 4px;
padding: 12px 18px;
margin-bottom: 12px;
}
.cp-toc-details { border: none; padding-left: 0; }
.cp-archive-card {
grid-template-columns: 1fr;
gap: 16px;
}
.cp-archive-card-img-wrap { aspect-ratio: 16 / 10; }
.cp-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.cp-single-hero { padding: 120px 0 48px; min-height: 360px; }
.cp-single-title { font-size: 30px; letter-spacing: -0.5px; }
.cp-single-meta { font-size: 13px; gap: 6px 10px; }
.cp-single-layout { padding: 32px 20px 64px; }
.cp-single-content { font-size: 17px; line-height: 1.7; }
.cp-single-content h2 { font-size: 24px; margin-top: 1.6em; }
.cp-single-content h3 { font-size: 20px; }
.cp-callout { grid-template-columns: 22px 1fr; padding: 16px 18px; gap: 12px; }
.cp-archive-hero { padding: 104px 0 48px; }
.cp-archive-title { font-size: 32px; }
.cp-archive-grid { grid-template-columns: 1fr; gap: 32px; }
.cp-page-hero--gradient { padding: 104px 0 44px; }
.cp-page-hero--plain { padding: 56px 0 32px; }
.cp-page-content { font-size: 16px; }
.cp-related { padding: 64px 0 80px; }
.cp-related-grid { grid-template-columns: 1fr; gap: 28px; }
.cp-author-card { grid-template-columns: 60px 1fr; gap: 16px; padding: 20px; }
.cp-author-card .cp-author-avatar { width: 54px; height: 54px; }
.cp-404 { padding: 104px 0 80px; }
.cp-404-title { font-size: 34px; }
.cp-breadcrumb { font-size: 12px; }
}
/* ==============================================================
SINGLE POST — Hero magazine (v2 avec featured image full-bleed)
============================================================== */
.cp-single.has-featured-image .cp-single-hero {
min-height: 620px;
padding-top: 200px;
}
.cp-single-hero-halo {
position: absolute; inset: 0;
background: radial-gradient(ellipse 1000px 500px at 75% 80%, rgba(232,122,62,0.18), transparent 60%);
z-index: -1;
}
.cp-single-hero-inner {
max-width: 880px;
}
.cp-single-kicker {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-bottom: 18px;
}
.cp-single-eyebrow {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.4px;
text-transform: uppercase; color: rgba(255,252,247,0.92);
font-weight: 600;
text-decoration: none;
border: 1px solid rgba(255,252,247,0.55);
padding: 6px 12px;
border-radius: 999px;
display: inline-block;
transition: background 180ms ease;
}
.cp-single-eyebrow:hover {
background: rgba(255,252,247,0.1);
color: #FFFCF7;
}
.cp-single-deck {
font-family: var(--cp-serif); font-weight: 400;
font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5;
color: rgba(255,252,247,0.92);
max-width: 46ch;
margin: 0 0 32px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 24;
font-style: italic;
}
.cp-meta-avatar-mini {
display: inline-block;
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #D9D2C4, #A89E8A);
margin-right: 6px;
vertical-align: -5px;
border: 1px solid rgba(255,252,247,0.35);
}
/* ==============================================================
DROP CAP
============================================================== */
.cp-single-content .cp-has-dropcap::first-letter,
.cp-single-content > p.cp-has-dropcap::first-letter {
font-family: var(--cp-serif);
font-weight: 500;
font-size: 4.5em;
float: left;
line-height: 0.88;
padding: 6px 14px 0 0;
color: var(--cp-grenat);
font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
}
.cp-single-content .cp-has-dropcap { font-size: 19px; line-height: 1.7; }
/* Lead paragraph (premier p direct) — alternative au dropcap */
.cp-single-content > p:first-of-type:not(.cp-has-dropcap) {
font-size: 20px; line-height: 1.6;
color: var(--cp-primary-dark);
font-weight: 450;
}
/* ==============================================================
TOC — améliorations numérotation
============================================================== */
.cp-toc-list { counter-reset: cp-toc-counter; }
.cp-toc-list li {
counter-increment: cp-toc-counter;
display: flex; align-items: flex-start; gap: 10px;
}
.cp-toc-list li::before {
content: counter(cp-toc-counter, decimal-leading-zero);
font-family: var(--cp-sans); font-size: 11px; font-weight: 600;
color: var(--cp-accent); letter-spacing: 1px;
padding-top: 9px;
font-feature-settings: "tnum";
flex: none;
min-width: 22px;
}
.cp-toc-list li a { flex: 1; }
/* ==============================================================
CALLOUTS — structure grid-area améliorée
============================================================== */
.cp-callout {
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px 18px;
padding: 22px 26px;
border-radius: 6px;
border-left: 3px solid var(--cp-primary-dark);
background: var(--cp-bg-alt);
font-family: var(--cp-sans);
margin: 2.4em 0;
align-items: start;
}
.cp-callout::before {
content: ''; width: 32px; height: 32px;
background-repeat: no-repeat; background-position: center; background-size: 28px 28px;
margin-top: 0;
align-self: start;
}
.cp-callout > div {
min-width: 0; max-width: 62ch;
}
.cp-callout strong {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.2px;
text-transform: uppercase;
display: block; margin-bottom: 8px;
}
.cp-callout p {
margin: 0;
font-size: 15.5px; line-height: 1.65;
color: var(--cp-ink);
}
.cp-callout p + p { margin-top: 0.6em; }
/* ==============================================================
AFFILIATE WIDGETS — variantes
============================================================== */
.cp-aff-widget {
background: linear-gradient(180deg, #FFFCF7 0%, #F5EFE4 100%);
border: 1px solid var(--cp-border);
border-radius: 8px;
padding: 32px;
margin: 2.6em 0;
box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 12px 28px rgba(26,26,26,0.06);
position: relative;
overflow: hidden;
}
.cp-aff-widget::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--cp-accent) 0%, var(--cp-grenat) 100%);
}
.cp-aff-widget-eyebrow {
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.2px;
text-transform: uppercase; font-weight: 600; color: var(--cp-primary-dark);
margin-bottom: 10px;
}
.cp-aff-widget-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 24px;
line-height: 1.22; color: var(--cp-ink);
margin: 0 0 12px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 36;
}
.cp-aff-widget-lede {
font-family: var(--cp-sans); font-size: 15px; line-height: 1.6;
color: var(--cp-muted);
margin: 0 0 22px;
max-width: 55ch;
}
.cp-aff-widget .cp-cta {
margin-top: 6px;
display: inline-flex;
}
.cp-aff-widget-note {
font-family: var(--cp-sans); font-size: 12px;
color: var(--cp-muted);
margin-top: 16px;
letter-spacing: 0.1px;
}
.cp-aff-widget-note a { color: var(--cp-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.cp-aff-widget-actions {
display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.cp-secondary-link-inline {
font-family: var(--cp-sans); font-size: 14px; font-weight: 500;
color: var(--cp-primary-dark);
text-decoration: underline; text-underline-offset: 4px;
padding: 10px 4px; min-height: 44px;
display: inline-flex; align-items: center;
}
.cp-aff-widget--final {
background: linear-gradient(135deg, #1F5957 0%, #184947 100%);
border-color: transparent;
color: #FFFCF7;
}
.cp-aff-widget--final::before { background: var(--cp-accent); }
.cp-aff-widget--final .cp-aff-widget-eyebrow { color: rgba(255,252,247,0.92); }
.cp-aff-widget--final .cp-aff-widget-title { color: #FFFCF7; }
.cp-aff-widget--final .cp-aff-widget-lede { color: rgba(255,252,247,0.88); }
.cp-aff-widget--final .cp-aff-widget-note { color: rgba(255,252,247,0.72); }
.cp-aff-widget--final .cp-aff-widget-note a { color: rgba(255,252,247,0.92); }
.cp-aff-widget--final .cp-secondary-link-inline { color: rgba(255,252,247,0.92); }
/* ==============================================================
TABLE COMPARE — WordPress figure.wp-block-table + our class
============================================================== */
.cp-table-compare,
.cp-single-content .wp-block-table {
overflow-x: auto;
margin: 2.4em 0;
border-radius: 6px;
border: 1px solid var(--cp-border);
background: #FFFCF7;
box-shadow: 0 1px 2px rgba(26,26,26,0.03);
}
.cp-table-compare table,
.cp-single-content .wp-block-table table {
margin: 0;
border: none;
}
.cp-table-compare th,
.cp-single-content .wp-block-table th {
background: var(--cp-primary-dark);
color: #FFFCF7;
padding: 14px 16px;
font-family: var(--cp-sans);
font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
font-weight: 600;
border-bottom: none;
text-align: left;
}
.cp-table-compare td,
.cp-single-content .wp-block-table td {
padding: 16px 16px;
font-family: var(--cp-sans); font-size: 14.5px; line-height: 1.55;
color: var(--cp-ink);
border-bottom: 1px solid var(--cp-border);
vertical-align: top;
}
.cp-table-compare tbody tr:last-child td,
.cp-single-content .wp-block-table tbody tr:last-child td { border-bottom: none; }
.cp-table-compare tbody tr:nth-child(even) td,
.cp-single-content .wp-block-table tbody tr:nth-child(even) td {
background: rgba(245,239,228,0.4);
}
.cp-table-compare tbody tr:hover td,
.cp-single-content .wp-block-table tbody tr:hover td {
background: rgba(232,122,62,0.08);
}
.cp-table-compare td:first-child,
.cp-single-content .wp-block-table td:first-child {
font-weight: 600; color: var(--cp-primary-dark);
}
/* ==============================================================
Blockquote article — plus éditoriale
============================================================== */
.cp-single-content blockquote {
border-left: 3px solid var(--cp-accent);
padding: 12px 0 12px 24px;
font-family: var(--cp-serif); font-style: italic;
font-size: 22px; line-height: 1.5;
color: var(--cp-primary-dark);
margin: 2.2em 0;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 30;
}
.cp-single-content blockquote p { margin: 0; font-size: inherit; }
/* ==============================================================
Responsive améliorations single
============================================================== */
@media (max-width: 1023px) {
.cp-single.has-featured-image .cp-single-hero {
min-height: 520px;
padding-top: 140px;
}
.cp-single-deck { font-size: 17px; max-width: none; }
.cp-callout { padding: 18px 22px; gap: 12px 14px; grid-template-columns: 28px 1fr; }
.cp-callout::before { width: 28px; height: 28px; background-size: 24px 24px; }
.cp-aff-widget { padding: 26px 22px; }
.cp-aff-widget-title { font-size: 22px; }
.cp-aff-widget-actions { gap: 14px; flex-direction: column; align-items: flex-start; }
.cp-single-content .cp-has-dropcap::first-letter {
font-size: 3.8em;
}
}
@media (max-width: 767px) {
.cp-single.has-featured-image .cp-single-hero {
min-height: 420px;
padding: 110px 0 48px;
}
.cp-single-kicker { gap: 10px; margin-bottom: 14px; }
.cp-single-eyebrow { padding: 5px 10px; font-size: 11px; }
.cp-single-deck { font-size: 16px; margin-bottom: 24px; }
.cp-meta-avatar-mini { width: 18px; height: 18px; vertical-align: -4px; }
.cp-single-content .cp-has-dropcap::first-letter {
font-size: 3.2em;
padding: 4px 10px 0 0;
}
.cp-aff-widget { padding: 22px 18px; }
.cp-aff-widget-title { font-size: 20px; }
.cp-table-compare table,
.cp-single-content .wp-block-table table {
font-size: 13px;
}
.cp-table-compare th,
.cp-single-content .wp-block-table th { padding: 10px 10px; font-size: 10px; letter-spacing: 1.2px; }
.cp-table-compare td,
.cp-single-content .wp-block-table td { padding: 12px 10px; font-size: 13px; }
}
/* ==============================================================
READING PROGRESS BAR (fixed top)
============================================================== */
.cp-reading-progress {
position: fixed; top: 0; left: 0; right: 0;
height: 3px;
background: transparent;
z-index: 9998;
pointer-events: none;
}
.cp-reading-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--cp-accent) 0%, var(--cp-grenat) 100%);
transition: width 60ms linear;
will-change: width;
}
/* ==============================================================
H2 NUMÉROTÉS DÉCORATIFS dans le body article
============================================================== */
.cp-single-content {
counter-reset: cp-h2-counter;
}
.cp-single-content h2 {
counter-increment: cp-h2-counter;
position: relative;
padding-top: 24px;
margin-top: 3em;
margin-bottom: 0.8em;
}
.cp-single-content h2::before {
content: counter(cp-h2-counter, decimal-leading-zero);
position: absolute;
top: -4px;
left: 0;
font-family: var(--cp-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 2.2px;
color: var(--cp-accent);
font-feature-settings: "tnum";
padding: 4px 0;
}
.cp-single-content h2::after {
content: '';
position: absolute;
top: 10px;
left: 40px;
width: 60px;
height: 1px;
background: var(--cp-border);
}
/* Hide counter for h2 in widgets or callouts */
.cp-callout h2, .cp-aff-widget h2 { counter-increment: none; padding-top: 0; }
.cp-callout h2::before, .cp-aff-widget h2::before { display: none; }
.cp-callout h2::after, .cp-aff-widget h2::after { display: none; }
/* ==============================================================
FIGURES intercalaires (image + caption)
============================================================== */
.cp-figure {
margin: 3em 0 2.5em;
max-width: 100%;
}
.cp-figure img {
width: 100%; height: auto;
border-radius: 6px;
display: block;
box-shadow: 0 1px 2px rgba(26,26,26,0.04), 0 20px 50px rgba(26,26,26,0.12);
}
.cp-figure figcaption {
font-family: var(--cp-serif);
font-style: italic;
font-size: 14.5px;
line-height: 1.55;
color: var(--cp-muted);
text-align: center;
margin-top: 14px;
padding: 0 10%;
font-variation-settings: "SOFT" 80, "WONK" 0, "opsz" 20;
}
.cp-figure--wide {
/* breakout 90% de la largeur body, négatifs sur le side */
margin-left: calc(50% - 50vw + 16px);
margin-right: calc(50% - 50vw + 16px);
max-width: none;
}
@media (min-width: 1024px) {
/* sur desktop avec TOC sticky, le figure-wide déborde proprement */
.cp-single-content .cp-figure--wide {
margin-left: -60px;
margin-right: -60px;
}
}
.cp-figure--wide img {
border-radius: 0;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ==============================================================
PULLQUOTE (citation mise en valeur, breakout aside)
============================================================== */
.cp-pullquote {
margin: 3em calc(50% - 50vw + 16px) 3em;
padding: 48px clamp(20px, 6vw, 72px);
background: linear-gradient(135deg, #1F5957 0%, #184947 100%);
color: #FFFCF7;
border-radius: 0;
position: relative;
text-align: center;
}
.cp-pullquote::before {
content: '“';
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
font-family: var(--cp-serif);
font-size: 120px;
line-height: 1;
color: var(--cp-accent);
font-weight: 500;
}
.cp-pullquote blockquote {
border: none;
padding: 0;
margin: 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cp-pullquote blockquote p {
font-family: var(--cp-serif);
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.35;
color: #FFFCF7;
margin: 0;
font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 48;
}
@media (min-width: 1024px) {
.cp-single-content .cp-pullquote {
margin-left: -60px;
margin-right: -60px;
}
}
/* ==============================================================
HIGHLIGHT terracotta () pour mots-clés
============================================================== */
.cp-mark,
.cp-single-content mark.cp-mark {
background: linear-gradient(180deg, transparent 55%, rgba(232,122,62,0.32) 55%, rgba(232,122,62,0.32) 92%, transparent 92%);
color: inherit;
padding: 0 2px;
font-weight: 500;
}
/* ==============================================================
CALLOUTS — icon plus grand + fond plus décoratif
============================================================== */
.cp-callout {
position: relative;
overflow: hidden;
}
.cp-callout::after {
/* Décor léger : petite barre verticale colorée à droite */
content: '';
position: absolute;
right: 0; top: 0; bottom: 0;
width: 2px;
background: currentColor;
opacity: 0.15;
}
.cp-callout.is-tip::after { color: #2E7D7B; }
.cp-callout.is-warn::after { color: var(--cp-grenat); }
.cp-callout.is-info::after { color: var(--cp-accent); }
/* ==============================================================
SMOOTH SCROLL + scroll margin pour TOC jumps
============================================================== */
html { scroll-behavior: smooth; }
.cp-single-content h2, .cp-single-content h3 {
scroll-margin-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ==============================================================
WIDGET AFFILIATION — plus premium
============================================================== */
.cp-aff-widget {
padding: 36px 40px;
}
.cp-aff-widget .cp-cta {
padding: 18px 32px;
font-size: 16px;
}
/* ==============================================================
Responsive pour toutes nouveautés
============================================================== */
@media (max-width: 1023px) {
.cp-single-content h2 { padding-top: 22px; margin-top: 2.4em; }
.cp-figure { margin: 2.4em 0 2em; }
.cp-figure--wide {
margin-left: -24px; margin-right: -24px;
}
.cp-figure figcaption { padding: 0 6%; font-size: 13.5px; }
.cp-pullquote {
padding: 40px 28px;
margin-left: -24px; margin-right: -24px;
}
.cp-pullquote::before { font-size: 96px; top: -22px; }
}
@media (max-width: 767px) {
.cp-reading-progress { height: 2px; }
.cp-single-content h2::before { font-size: 11px; letter-spacing: 1.8px; }
.cp-single-content h2::after { top: 8px; left: 36px; width: 48px; }
.cp-figure { margin: 2em 0 1.8em; }
.cp-figure--wide { margin-left: -20px; margin-right: -20px; }
.cp-figure figcaption { padding: 0 4%; font-size: 13px; }
.cp-pullquote {
padding: 32px 20px;
margin-left: -20px; margin-right: -20px;
}
.cp-pullquote::before { font-size: 72px; top: -16px; }
.cp-pullquote blockquote p { font-size: 19px; }
.cp-aff-widget { padding: 26px 22px; }
.cp-aff-widget .cp-cta { padding: 15px 22px; font-size: 15px; }
}
/* ==============================================================================
SINGLE v4 — HERO MAGAZINE ASYMÉTRIQUE (cohérent charte homepage)
gradient Côte Vermeille + topographie + layout 2 colonnes desktop
============================================================================== */
/* Override des styles v1/v2/v3 : le v4 a PAS de featured image full-bleed */
.cp-single--v4 .cp-single-hero,
.cp-single--v4 .cp-single-hero-bg,
.cp-single--v4 .cp-single-hero-darken,
.cp-single--v4 .cp-single-hero-halo { display: none; }
.cp-single-hero-v4 {
position: relative;
isolation: isolate;
padding: 180px 0 100px;
color: #FFFCF7;
overflow: hidden;
}
.cp-single-hero-v4 .cp-single-hero-bg {
display: block;
position: absolute; inset: 0;
background: linear-gradient(175deg, #2E7D7B 0%, #1F5957 65%, #184947 100%);
z-index: -3;
}
.cp-single-hero-v4 .cp-single-hero-topo {
display: block;
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1400px auto; background-position: center;
opacity: 0.22; mix-blend-mode: soft-light;
z-index: -2;
}
.cp-single-hero-v4 .cp-single-hero-halo {
display: block;
position: absolute; inset: 0;
background: radial-gradient(ellipse 900px 600px at 85% 50%, rgba(232,122,62,0.24), transparent 60%);
z-index: -1;
}
.cp-single-hero-v4-inner {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 80px;
align-items: end;
padding: 0 32px;
max-width: 1200px;
margin: 0 auto;
}
.cp-single-hero-v4-text { min-width: 0; }
.cp-single-hero-v4-text .cp-breadcrumb { margin-bottom: 32px; }
.cp-single-kicker-v4 {
display: flex; align-items: center; gap: 14px;
font-family: var(--cp-sans); font-size: 12px; letter-spacing: 2.4px;
text-transform: uppercase; font-weight: 600;
margin-bottom: 22px;
color: rgba(255,252,247,0.92);
}
.cp-single-kicker-v4 .cp-dash {
display: inline-block; width: 28px; height: 1px;
background: rgba(255,252,247,0.8);
flex: none;
}
.cp-kicker-cat {
color: rgba(255,252,247,0.92);
text-decoration: none;
}
.cp-kicker-cat:hover { color: var(--cp-accent); }
.cp-single-title-v4 {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(36px, 4.8vw, 72px);
line-height: 1.04; letter-spacing: -1.2px;
margin: 0 0 28px; color: #FFFCF7;
text-wrap: balance;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
max-width: 14ch;
}
.cp-single-deck-v4 {
font-family: var(--cp-serif); font-weight: 400;
font-size: clamp(17px, 1.6vw, 21px); line-height: 1.52;
color: rgba(255,252,247,0.92);
max-width: 44ch;
margin: 0 0 36px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 22;
font-style: italic;
}
.cp-single-meta-v4 {
display: flex; flex-wrap: wrap; align-items: center;
gap: 0 24px;
padding-top: 26px;
border-top: 1px solid rgba(255,252,247,0.2);
font-family: var(--cp-sans); font-size: 14px;
color: rgba(255,252,247,0.88);
letter-spacing: 0.2px;
}
.cp-meta-author-v4 {
display: inline-flex; align-items: center;
font-weight: 500;
color: #FFFCF7;
}
.cp-meta-author-v4 .cp-meta-avatar-mini {
display: inline-block;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #D9D2C4, #A89E8A);
margin-right: 10px;
border: 1px solid rgba(255,252,247,0.35);
vertical-align: middle;
}
.cp-meta-date-v4,
.cp-meta-reading-v4 {
position: relative;
padding-left: 24px;
}
.cp-meta-date-v4::before,
.cp-meta-reading-v4::before {
content: ''; position: absolute; left: 0; top: 50%;
width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,252,247,0.5);
transform: translateY(-50%);
}
/* POSTER (image featured) à droite, décalé */
.cp-single-hero-v4-poster {
position: relative;
width: 100%;
display: flex;
justify-content: flex-end;
}
.cp-poster-frame {
position: relative;
margin: 0;
width: 100%;
max-width: 420px;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 2px;
box-shadow:
0 1px 2px rgba(0,0,0,0.2),
0 25px 80px rgba(0,0,0,0.5),
-8px 8px 0 0 var(--cp-accent); /* décor poster offset */
transform: rotate(0.5deg);
background: var(--cp-primary-dark);
}
.cp-poster-frame img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.cp-poster-badge {
position: absolute;
bottom: 16px; left: 16px;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px 8px 10px;
border-radius: 999px;
background: rgba(255,252,247,0.96);
color: var(--cp-primary-dark);
font-family: var(--cp-sans); font-size: 12px; font-weight: 600;
letter-spacing: 0.2px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cp-poster-badge svg { color: #2E7D7B; }
/* ==============================================================================
STATS ROW après hero
============================================================================== */
.cp-single-stats {
background: var(--cp-bg);
padding: 0;
position: relative;
z-index: 2;
margin-top: -40px; /* chevauche légèrement le hero */
}
.cp-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
list-style: none; padding: 0; margin: 0;
background: #FFFCF7;
border-radius: 6px;
box-shadow:
0 1px 2px rgba(26,26,26,0.04),
0 20px 50px rgba(26,26,26,0.12);
border: 1px solid var(--cp-border);
overflow: hidden;
}
.cp-stat-item {
padding: 24px 28px;
position: relative;
display: flex; flex-direction: column;
gap: 4px;
}
.cp-stat-item + .cp-stat-item::before {
content: '';
position: absolute; left: 0; top: 20%; bottom: 20%;
width: 1px;
background: var(--cp-border);
}
.cp-stat-icon {
color: var(--cp-accent);
margin-bottom: 8px;
}
.cp-stat-label {
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 1.8px;
text-transform: uppercase; font-weight: 600;
color: var(--cp-muted);
}
.cp-stat-value {
font-family: var(--cp-serif); font-weight: 500;
font-size: 19px; line-height: 1.25;
color: var(--cp-primary-dark);
letter-spacing: -0.2px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 28;
}
/* ==============================================================================
BODY SECTION background + layout
============================================================================== */
.cp-single-body-section {
padding: 80px 0 96px;
background: var(--cp-bg);
}
.cp-single--v4 .cp-single-layout {
padding: 0 32px;
}
/* ==============================================================================
H2 GRAND FORMAT MAGAZINE (numéro 100px en shadow derrière le titre)
============================================================================== */
.cp-single--v4 .cp-single-content {
counter-reset: cp-h2-counter;
}
.cp-single--v4 .cp-single-content h2 {
counter-increment: cp-h2-counter;
position: relative;
padding: 36px 0 0 0;
margin: 3.4em 0 0.8em;
border-top: 1px solid var(--cp-border);
}
.cp-single--v4 .cp-single-content h2::before {
content: counter(cp-h2-counter, decimal-leading-zero);
position: absolute;
top: 20px; left: 0;
font-family: var(--cp-sans); font-size: 12px; font-weight: 600;
letter-spacing: 2.4px;
color: var(--cp-accent);
font-feature-settings: "tnum";
background: var(--cp-bg);
padding-right: 16px;
transform: translateY(-50%);
}
.cp-single--v4 .cp-single-content h2::after { display: none; }
/* ==============================================================================
FOOTER SECTION DARK (auteur + related en fond vert foncé — charte)
============================================================================== */
.cp-single-footer-dark {
background: var(--cp-primary-dark);
color: #FFFCF7;
padding: 80px 0;
position: relative;
isolation: isolate;
overflow: hidden;
}
.cp-single-footer-dark::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 1400px auto; background-position: center;
opacity: 0.18;
z-index: -1;
pointer-events: none;
}
.cp-author-card--dark {
background: rgba(255,252,247,0.06);
border: 1px solid rgba(255,252,247,0.15);
backdrop-filter: blur(4px);
margin-top: 0;
margin-bottom: 64px;
padding: 36px;
max-width: 760px;
}
.cp-author-card--dark .cp-author-avatar {
width: 88px; height: 88px;
border-color: rgba(255,252,247,0.2);
}
.cp-author-label--dark { color: rgba(255,252,247,0.9); }
.cp-author-card-lede--dark {
color: rgba(255,252,247,0.88);
font-family: var(--cp-serif);
font-weight: 400;
font-size: 17px;
line-height: 1.55;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 20;
font-style: italic;
}
.cp-author-more--dark {
color: #FFFCF7;
text-decoration: underline;
text-underline-offset: 4px;
font-weight: 500;
}
.cp-author-more--dark:hover { color: var(--cp-accent); }
.cp-related-dark { }
.cp-related-dark-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.2; letter-spacing: -0.4px;
color: #FFFCF7;
margin: 18px 0 48px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
text-wrap: balance;
max-width: 20ch;
}
.cp-related-grid--dark {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
list-style: none; padding: 0; margin: 0;
}
.cp-article--dark { color: #FFFCF7; }
.cp-article--dark .cp-article-img-wrap {
background: rgba(255,252,247,0.08);
}
.cp-article-cat--dark {
color: rgba(255,252,247,0.88);
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; font-weight: 600;
margin-bottom: 10px;
}
.cp-article-title--dark {
color: #FFFCF7;
font-family: var(--cp-serif); font-weight: 500; font-size: 22px;
line-height: 1.25; letter-spacing: -0.2px;
margin: 0 0 14px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
transition: color 180ms ease;
}
.cp-article--dark:hover .cp-article-title--dark { color: var(--cp-accent); }
.cp-article-date--dark {
color: rgba(255,252,247,0.7);
font-family: var(--cp-sans); font-size: 13px;
}
/* ==============================================================================
RESPONSIVE single v4
============================================================================== */
@media (max-width: 1023px) {
.cp-single-hero-v4 {
padding: 140px 0 80px;
}
.cp-single-hero-v4-inner {
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
.cp-single-hero-v4-poster {
justify-content: flex-start;
order: -1;
margin-bottom: 0;
}
.cp-poster-frame {
max-width: 320px;
aspect-ratio: 4 / 3;
}
.cp-single-title-v4 { font-size: clamp(32px, 5.5vw, 52px); }
.cp-stats-grid { grid-template-columns: repeat(2, 1fr); }
.cp-stat-item + .cp-stat-item:nth-child(2)::before,
.cp-stat-item:nth-child(3)::before { display: none; }
.cp-stat-item:nth-child(3),
.cp-stat-item:nth-child(4) {
border-top: 1px solid var(--cp-border);
}
.cp-related-grid--dark { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.cp-single-hero-v4 {
padding: 104px 0 56px;
}
.cp-single-hero-v4-inner {
padding: 0 20px;
gap: 32px;
}
.cp-single-hero-v4-text .cp-breadcrumb { margin-bottom: 22px; }
.cp-single-kicker-v4 { gap: 10px; margin-bottom: 16px; }
.cp-single-kicker-v4 .cp-dash { width: 20px; }
.cp-single-title-v4 { font-size: 32px; letter-spacing: -0.6px; line-height: 1.08; }
.cp-single-deck-v4 { font-size: 16px; margin-bottom: 24px; }
.cp-single-meta-v4 {
flex-direction: column; align-items: flex-start;
gap: 10px; padding-top: 20px;
}
.cp-meta-date-v4,
.cp-meta-reading-v4 {
padding-left: 0;
}
.cp-meta-date-v4::before,
.cp-meta-reading-v4::before { display: none; }
.cp-poster-frame {
max-width: 100%;
aspect-ratio: 16 / 10;
box-shadow:
0 1px 2px rgba(0,0,0,0.15),
0 15px 40px rgba(0,0,0,0.3),
-5px 5px 0 0 var(--cp-accent);
}
.cp-poster-badge {
bottom: 10px; left: 10px;
padding: 6px 12px 6px 10px;
font-size: 11px;
}
.cp-single-stats { margin-top: -24px; padding: 0 16px; }
.cp-stats-grid { grid-template-columns: 1fr 1fr; }
.cp-stat-item { padding: 18px 16px; }
.cp-stat-value { font-size: 16px; }
.cp-single-body-section { padding: 56px 0 72px; }
.cp-single--v4 .cp-single-content h2 { padding: 28px 0 0; margin: 2.6em 0 0.7em; }
.cp-single-footer-dark { padding: 56px 0; }
.cp-author-card--dark { padding: 24px; grid-template-columns: 72px 1fr; gap: 16px; }
.cp-author-card--dark .cp-author-avatar { width: 64px; height: 64px; }
.cp-related-grid--dark { grid-template-columns: 1fr; gap: 24px; }
}
/* ==============================================================
FIX link inherit + formulaire contact
============================================================== */
/* Empêcher les .cp-link (sans color propre) de tomber en bleu browser */
.cp-breadcrumb a.cp-link,
.cp-footer-bottom a.cp-link,
.cp-disclosure a.cp-link,
.cp-aff-widget-note a.cp-link,
.cp-single-meta a.cp-link { color: inherit; }
/* CONTACT FORM */
.cp-contact-form {
max-width: 640px;
margin: 40px 0 0;
display: grid;
gap: 22px;
}
.cp-form-row--2col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.cp-field {
display: grid;
gap: 8px;
position: relative;
}
.cp-field-label {
font-family: var(--cp-sans);
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
font-weight: 600;
color: var(--cp-primary-dark);
}
.cp-contact-form input[type="text"],
.cp-contact-form input[type="email"],
.cp-contact-form select,
.cp-contact-form textarea {
font-family: var(--cp-sans);
font-size: 16px;
line-height: 1.5;
padding: 12px 14px;
border: 1px solid var(--cp-border);
border-radius: 2px;
background: #FFFCF7;
color: var(--cp-ink);
width: 100%;
transition: border-color 180ms ease, box-shadow 180ms ease;
font-variation-settings: inherit;
}
.cp-contact-form textarea {
resize: vertical;
min-height: 140px;
}
.cp-contact-form input:focus,
.cp-contact-form select:focus,
.cp-contact-form textarea:focus {
outline: none;
border-color: var(--cp-accent);
box-shadow: 0 0 0 3px rgba(232,122,62,0.22);
}
.cp-field--consent {
grid-template-columns: 22px 1fr;
align-items: start;
gap: 12px;
padding: 4px 0;
}
.cp-field--consent input[type="checkbox"] {
width: 20px; height: 20px;
accent-color: var(--cp-primary-dark);
margin: 0;
cursor: pointer;
}
.cp-field--consent span {
font-family: var(--cp-sans);
font-size: 14px;
line-height: 1.5;
color: var(--cp-muted);
}
.cp-contact-form .cp-cta {
justify-self: start;
margin-top: 10px;
}
.cp-hp-field {
position: absolute;
left: -10000px;
width: 1px; height: 1px;
overflow: hidden;
}
.cp-form-message {
padding: 16px 20px;
border-radius: 4px;
font-family: var(--cp-sans);
font-size: 15px;
line-height: 1.55;
margin-bottom: 28px;
}
.cp-form-message--success {
background: rgba(46,125,123,0.12);
border-left: 3px solid #2E7D7B;
color: #1F5957;
}
.cp-form-message--error {
background: rgba(139,26,26,0.08);
border-left: 3px solid var(--cp-grenat);
color: var(--cp-grenat);
}
@media (max-width: 767px) {
.cp-form-row--2col { grid-template-columns: 1fr; gap: 22px; }
.cp-contact-form input[type="text"],
.cp-contact-form input[type="email"],
.cp-contact-form select,
.cp-contact-form textarea { font-size: 16px; }
}
/* ==============================================================
UNIFORMISATION CARDS ARTICLES (même présentation partout)
Override des cards category horizontales → cards portrait comme homepage
============================================================== */
.cp-archive-grid {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.cp-archive-card {
grid-template-columns: 1fr;
gap: 0;
display: block;
}
.cp-archive-card-img-wrap {
aspect-ratio: 16 / 10;
margin-bottom: 20px;
border-radius: 4px;
}
.cp-archive-card-title {
font-size: 23px;
margin: 10px 0 12px;
}
.cp-archive-card-excerpt {
font-size: 14.5px;
line-height: 1.55;
margin: 0 0 14px;
}
@media (max-width: 1023px) {
.cp-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.cp-archive-card-img-wrap { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
.cp-archive-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* ==============================================================
AVATAR MONOGRAMME "C.P." (remplace silhouette humaine)
============================================================== */
.cp-author-avatar {
/* reset de la silhouette ::after */
background-color: #F5EFE4;
background-image: linear-gradient(135deg, #F5EFE4 0%, #D9C6A8 100%);
position: relative;
overflow: hidden;
}
.cp-author-avatar::after {
/* Monogramme C.P. centré */
content: 'C.P.';
position: absolute; inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--cp-serif);
font-weight: 500;
font-size: calc(min(100%, 140px) * 0.34);
color: var(--cp-primary-dark);
letter-spacing: -1px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 60;
background-image: none;
border-radius: 50%;
}
.cp-author-avatar.has-photo::after { display: none; }
.cp-author-avatar.has-photo { background-image: none; }
/* Variante dark (single footer) */
.cp-author-avatar--dark {
background-color: rgba(255,252,247,0.08);
background-image: linear-gradient(135deg, rgba(255,252,247,0.12) 0%, rgba(255,252,247,0.04) 100%);
}
.cp-author-avatar--dark::after {
color: rgba(255,252,247,0.9);
}
/* Sizing du content selon container */
.cp-author-avatar { font-size: 48px; }
.cp-author-card .cp-author-avatar { font-size: 24px; }
.cp-meta-avatar-mini::after { content: 'CP'; display: flex; align-items: center; justify-content: center; font-family: var(--cp-serif); font-size: 10px; font-weight: 500; color: var(--cp-primary-dark); width:100%; height: 100%; letter-spacing: -0.5px; }
.cp-single-hero-v4 .cp-meta-avatar-mini::after { color: var(--cp-primary-dark); }
/* ==============================================================
UNIFORMISATION CATEGORY HERO — toujours vert (pas de palettes variables)
============================================================== */
.cp-archive-hero {
--cp-archive-p1: #2E7D7B !important;
--cp-archive-p2: #1F5957 !important;
--cp-archive-accent: #E87A3E !important;
}
/* ==============================================================
DATE "Dernière mise à jour" visible (signal EEAT)
============================================================== */
.cp-updated-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
background: rgba(46,125,123,0.08);
border-left: 2px solid var(--cp-primary-dark);
color: var(--cp-primary-dark);
font-family: var(--cp-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2px;
margin-bottom: 24px;
max-width: max-content;
}
.cp-updated-badge svg { color: var(--cp-primary-dark); }
/* ==============================================================
FAQ ACCORDION (details/summary natifs stylés)
============================================================== */
.cp-faq-wrapper {
margin: 2.4em 0;
border-top: 1px solid var(--cp-border);
}
.cp-faq-item {
border-bottom: 1px solid var(--cp-border);
padding: 0;
}
.cp-faq-item summary {
list-style: none;
cursor: pointer;
padding: 22px 48px 22px 0;
position: relative;
font-family: var(--cp-serif);
font-weight: 500;
font-size: 20px;
line-height: 1.3;
color: var(--cp-ink);
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 30;
transition: color 180ms ease;
}
.cp-faq-item summary::-webkit-details-marker { display: none; }
.cp-faq-item summary::after {
content: '+';
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: var(--cp-bg-alt);
color: var(--cp-primary-dark);
display: flex; align-items: center; justify-content: center;
font-size: 20px;
font-weight: 400;
transition: background 180ms ease, transform 240ms ease;
}
.cp-faq-item[open] summary::after {
content: '−';
background: var(--cp-accent);
color: #FFFCF7;
transform: translateY(-50%) rotate(180deg);
}
.cp-faq-item summary:hover { color: var(--cp-primary-dark); }
.cp-faq-item[open] summary { color: var(--cp-primary-dark); }
.cp-faq-body {
padding: 0 0 24px;
font-family: var(--cp-sans);
font-size: 16px;
line-height: 1.7;
color: var(--cp-ink);
}
.cp-faq-body p:first-child { margin-top: 0; }
.cp-faq-body p:last-child { margin-bottom: 0; }
/* ==============================================================
ARCHIVE INTRO (description longue catégorie comme landing page)
============================================================== */
.cp-archive-intro {
background: var(--cp-bg);
padding: 56px 0 32px;
}
.cp-archive-intro-inner {
max-width: 820px;
font-family: var(--cp-sans);
font-size: 17px;
line-height: 1.7;
color: var(--cp-ink);
}
.cp-archive-intro-inner > * + * { margin-top: 1.1em; }
.cp-archive-intro-inner h2 {
font-family: var(--cp-serif);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.25;
color: var(--cp-primary-dark);
margin-top: 1.8em;
margin-bottom: 0.5em;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 40;
}
.cp-archive-intro-inner h3 {
font-family: var(--cp-serif);
font-weight: 500;
font-size: 20px;
color: var(--cp-ink);
margin-top: 1.4em;
margin-bottom: 0.4em;
}
.cp-archive-intro-inner ul, .cp-archive-intro-inner ol { padding-left: 22px; }
.cp-archive-intro-inner li { margin-bottom: 0.4em; }
.cp-archive-intro-inner a {
color: var(--cp-primary-dark);
text-decoration: underline;
text-decoration-color: var(--cp-accent);
text-underline-offset: 3px;
}
.cp-archive-intro-inner a:hover { color: var(--cp-accent); }
/* ==============================================================================
PATCH CONSOLIDÉ v5 — 5 fixes issus feedbacks live (2026-04-23)
1. Hover flèche cards destinations passait en bleu (color browser default)
2. TOC : redesign premium, hover + active plus subtils
3. Single body : resserrage espaces hero → body → footer-dark
4. Author card : largeur pleine (occupation espace)
5. Section "Derniers guides" : cards alignées (dates en pied), placeholder élégant
+ Layout archive (pas de TOC, body centré)
============================================================================== */
/* ─── 1. HOVER CARDS DESTINATIONS : plus jamais de bleu navigateur ─────────── */
.cp-card:link, .cp-card:visited,
.cp-card:hover, .cp-card:focus, .cp-card:focus-visible, .cp-card:active {
color: #FFFCF7;
}
.cp-card:hover .cp-card-arrow,
.cp-card:focus-visible .cp-card-arrow {
border-color: var(--cp-accent);
background: rgba(232,122,62,0.22);
color: #FFFCF7;
}
/* Article cards homepage — pareil */
.cp-article:link, .cp-article:visited,
.cp-article:hover, .cp-article:focus-visible {
color: inherit;
}
/* ─── 2. TOC PREMIUM ─────────────────────────────────────────────────────── */
.cp-toc-details { border-left: none; padding-left: 0; }
.cp-toc-summary {
padding: 6px 14px;
margin-bottom: 18px;
border-radius: 4px;
background: rgba(46,125,123,0.06);
font-size: 10px; letter-spacing: 2.4px;
}
.cp-toc-list { gap: 2px; }
.cp-toc-list li {
counter-increment: cp-toc-counter;
display: grid; grid-template-columns: 28px 1fr; align-items: baseline;
gap: 0;
padding: 0;
}
.cp-toc-list li::before {
content: counter(cp-toc-counter, decimal-leading-zero);
font-family: var(--cp-sans); font-size: 10px; font-weight: 500;
color: var(--cp-muted); letter-spacing: 1.4px;
font-feature-settings: "tnum";
padding-top: 11px;
opacity: 0.7;
transition: color 200ms ease, opacity 200ms ease;
}
.cp-toc-list li a {
flex: 1; display: block;
padding: 8px 12px 8px 4px;
border-radius: 3px;
border-left: none;
margin-left: 0;
color: var(--cp-muted);
font-size: 13.5px; line-height: 1.5;
transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.cp-toc-list li a:hover {
color: var(--cp-primary-dark);
background: rgba(46,125,123,0.05);
border-left: none;
transform: translateX(2px);
}
.cp-toc-list li:has(a.is-active)::before {
color: var(--cp-accent);
opacity: 1;
font-weight: 700;
}
.cp-toc-list li a.is-active {
color: var(--cp-primary-dark);
background: rgba(232,122,62,0.08);
border-left: none;
font-weight: 500;
}
/* ─── 3. RESSERRAGE ESPACEMENTS SINGLE ───────────────────────────────────── */
.cp-single-body-section {
padding: 56px 0 72px; /* était 80 / 96 */
}
.cp-single-footer-dark {
padding: 64px 0 56px; /* était 80 / 80 */
}
.cp-single--v4 .cp-single-content h2 {
margin-top: 2.6em; /* était 3.4em */
}
.cp-single-content > *:first-child {
margin-top: 0;
}
.cp-updated-badge + .cp-disclosure {
margin-top: 12px;
}
.cp-disclosure + .cp-single-content,
.cp-disclosure + .cp-single-content h2:first-child {
margin-top: 32px !important; /* était 3.4em → 96px+ */
}
/* ─── 4. AUTHOR CARD SECTION FOOTER-DARK : occupation pleine largeur ────── */
.cp-author-card--dark {
max-width: 100%; /* était 760px → laissait beaucoup de vide */
margin-bottom: 48px; /* était 64px */
padding: 28px 32px; /* était 36px uniform */
display: grid;
grid-template-columns: 88px 1fr auto; /* avatar | textes | CTA à droite */
gap: 24px;
align-items: center;
}
.cp-author-card--dark .cp-author-avatar {
grid-row: 1;
align-self: center;
}
.cp-author-card--dark > div:nth-child(2) { min-width: 0; }
.cp-author-card--dark .cp-author-card-lede--dark { margin-bottom: 10px; }
.cp-author-card--dark .cp-author-more--dark {
align-self: center; white-space: nowrap;
padding: 10px 16px;
border: 1px solid rgba(255,252,247,0.3);
border-radius: 3px;
text-decoration: none;
transition: background 200ms ease, border-color 200ms ease;
}
.cp-author-card--dark .cp-author-more--dark:hover {
background: rgba(232,122,62,0.15);
border-color: var(--cp-accent);
}
@media (max-width: 780px) {
.cp-author-card--dark {
grid-template-columns: 64px 1fr;
gap: 16px;
padding: 20px;
}
.cp-author-card--dark .cp-author-more--dark {
grid-column: 1 / -1;
justify-self: start;
margin-top: 4px;
}
}
/* ─── 5. CARDS "DERNIERS GUIDES" : alignement + placeholder élégant ───── */
.cp-article {
display: flex; flex-direction: column;
height: 100%;
transition: transform 280ms ease;
}
.cp-article:hover { transform: translateY(-3px); }
.cp-article-img-wrap {
aspect-ratio: 4 / 3; /* était 16/10 → + compact + + pro */
background: linear-gradient(135deg, rgba(46,125,123,0.10), rgba(232,122,62,0.08));
position: relative;
}
.cp-article-img-wrap:empty::after,
.cp-article-img-wrap:not(:has(.cp-article-img[style*="url"]))::after {
content: "CÔTÉ P.O.";
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--cp-sans); font-size: 11px; letter-spacing: 3px;
color: rgba(46,125,123,0.35); font-weight: 600;
}
.cp-article-title {
flex: 1 0 auto;
margin-bottom: 14px;
font-size: 22px;
}
.cp-article-date {
margin-top: auto;
padding-top: 6px;
border-top: 1px solid var(--cp-border);
padding: 10px 0 0;
font-size: 12.5px;
}
.cp-articles-grid { gap: 32px; }
/* ─── 6. LAYOUT ARCHIVE (articles _cp_is_archive = 1) ───────────────────── */
.cp-single--archive .cp-single-layout {
display: block; /* désactive grid TOC | body */
}
.cp-single--archive .cp-toc {
display: none;
}
.cp-single--archive .cp-single-body {
max-width: 720px;
margin: 0 auto;
}
.cp-single--archive .cp-author-card--archive .cp-author-avatar--archive {
background: rgba(255,252,247,0.12);
color: rgba(255,252,247,0.85);
display: flex; align-items: center; justify-content: center;
}
/* Bandeau intro archive : même format que les autres callouts, un cran plus visible */
.cp-single--archive .cp-single-content > .cp-callout.is-info:first-child {
border-left: 3px solid var(--cp-accent);
background: rgba(232,122,62,0.06);
margin-top: 0;
margin-bottom: 36px;
}
/* ==============================================================================
CARDS DERNIERS GUIDES v6 — Cover style magazine premium
============================================================================== */
.cp-articles-grid--cover {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
list-style: none;
padding: 0; margin: 0;
}
.cp-articles-grid--cover li { display: block; }
.cp-article--cover {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: 6px;
overflow: hidden;
text-decoration: none;
isolation: isolate;
box-shadow: 0 6px 18px rgba(26,26,26,0.08);
transition: transform 420ms cubic-bezier(.2,.7,.25,1), box-shadow 420ms ease;
background: var(--cp-primary-dark);
}
.cp-article--cover:link,
.cp-article--cover:visited,
.cp-article--cover:hover,
.cp-article--cover:focus,
.cp-article--cover:focus-visible,
.cp-article--cover:active { color: #FFFCF7; }
.cp-article--cover:hover {
transform: translateY(-4px);
box-shadow: 0 22px 44px rgba(26,26,26,0.18);
}
.cp-article-cover-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
transition: transform 900ms cubic-bezier(.2,.7,.25,1);
}
.cp-article--cover:hover .cp-article-cover-img {
transform: scale(1.06);
}
.cp-article-cover-gradient {
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(31,89,87,0.10) 0%,
rgba(31,89,87,0.35) 45%,
rgba(26,26,26,0.82) 100%
);
z-index: 2;
transition: opacity 320ms ease;
}
.cp-article--cover:hover .cp-article-cover-gradient {
background:
linear-gradient(180deg,
rgba(31,89,87,0.15) 0%,
rgba(31,89,87,0.45) 40%,
rgba(26,26,26,0.88) 100%
);
}
.cp-article-cover-content {
position: absolute; inset: 0;
z-index: 3;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 28px 26px 24px;
color: #FFFCF7;
}
.cp-article-cover-cat {
display: inline-block; align-self: flex-start;
position: absolute; top: 18px; left: 18px;
font-family: var(--cp-sans); font-size: 10.5px; font-weight: 600;
letter-spacing: 1.8px; text-transform: uppercase;
background: rgba(255,252,247,0.92); color: var(--cp-primary-dark);
padding: 6px 12px; border-radius: 2px;
backdrop-filter: blur(3px);
}
.cp-article-cover-title {
font-family: var(--cp-serif); font-weight: 500;
font-size: 22px; line-height: 1.2; letter-spacing: -0.3px;
color: #FFFCF7;
margin: 0 0 10px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 32;
text-wrap: balance;
transition: color 240ms ease;
}
.cp-article--cover:hover .cp-article-cover-title {
color: var(--cp-accent-soft, #F5B68A);
}
.cp-article-cover-excerpt {
font-family: var(--cp-sans); font-size: 13.5px; line-height: 1.5;
color: rgba(255,252,247,0.82);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cp-article-cover-meta {
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px;
border-top: 1px solid rgba(255,252,247,0.22);
font-family: var(--cp-sans); font-size: 12px;
color: rgba(255,252,247,0.7);
}
.cp-article-cover-date { letter-spacing: 0.2px; }
.cp-article-cover-arrow {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
border-radius: 50%;
border: 1px solid rgba(255,252,247,0.35);
color: #FFFCF7;
font-size: 14px;
transition: transform 360ms cubic-bezier(.2,.7,.25,1), background 260ms ease, border-color 260ms ease;
}
.cp-article--cover:hover .cp-article-cover-arrow {
transform: translateX(4px);
background: var(--cp-accent);
border-color: var(--cp-accent);
color: #FFFCF7;
}
@media (max-width: 960px) {
.cp-articles-grid--cover {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.cp-article--cover { aspect-ratio: 5 / 6; }
}
@media (max-width: 620px) {
.cp-articles-grid--cover {
grid-template-columns: 1fr;
gap: 22px;
}
.cp-article--cover { aspect-ratio: 4 / 5; }
.cp-article-cover-title { font-size: 24px; }
}
/* ─── Hero single padding réduit (feedback live 2026-04-23) ───────────── */
.cp-single-hero-v4 {
padding: 120px 0 72px; /* était 180 / 100 — compte-tenu du header fixed */
}
@media (max-width: 780px) {
.cp-single-hero-v4 { padding: 96px 0 56px; }
}
/* ─── Disclosure + Callouts : full-width container (feedback live 2026-04-23) ──── */
.cp-disclosure {
max-width: none;
width: 100%;
}
/* Callouts dans .cp-single-content ont le max-width 65ch du content → "déborder" à la largeur du parent */
.cp-single-content > .cp-callout {
max-width: none;
width: 100%;
}
/* Archive : on veut les blocs à la largeur du body-archive (720px) pas du 65ch */
.cp-single--archive .cp-single-content {
max-width: none;
}
.cp-single--archive .cp-single-content > .cp-callout,
.cp-single--archive .cp-disclosure {
width: 100%;
max-width: none;
}
/* ─── Breakouts : aligner sur largeur body (pas viewport) — feedback 2026-04-23 ──── */
/* Problème : calc(50% - 50vw) déborde du viewport, mais dans un layout grid TOC|body,
la figure/pullquote "déborde" au-delà du body et à-côté de la TOC, créant un décalage
à droite visible. Solution : aligner sur la largeur du body-column. */
.cp-single-content .cp-figure--wide,
.cp-single-content .cp-pullquote {
margin-left: 0;
margin-right: 0;
max-width: 100%;
width: 100%;
}
@media (min-width: 1024px) {
.cp-single-content .cp-figure--wide,
.cp-single-content .cp-pullquote {
margin-left: 0;
margin-right: 0;
}
}
/* Figure caption aussi limitée à la largeur body */
.cp-single-content .cp-figure--wide figcaption {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Pullquote : resserrer padding latéral quand pas de breakout viewport */
.cp-single-content .cp-pullquote {
padding: 40px clamp(20px, 4vw, 48px);
}
/* ─── Occupation cohérente : body-column resserré à la mesure lecture (65ch)
→ on retire le max-width 65ch sur content (le column fait déjà la bonne largeur)
→ figures/callouts/pullquote/disclosure occupent ainsi 100% du column
Feedback 2026-04-23 : fini le "vide à droite" tout en gardant la lisibilité. */
.cp-single--v4 .cp-single-body,
.cp-single-body {
max-width: 760px;
}
.cp-single-content {
max-width: 100%;
}
/* Archive : body déjà à 720px via layout archive — inchangé */
/* ─── Breadcrumb top, intégré hero (feedback 2026-04-23, revu) ───────────── */
/* Le breadcrumb est dans le hero vert foncé → fond/border/padding/margin gérés
par la règle nestée .cp-single-hero-v4 .cp-breadcrumb--top. Ici uniquement
la typo + couleurs. */
.cp-breadcrumb--top {
font-family: var(--cp-sans);
font-size: 13px;
color: #f5efe4;
}
.cp-breadcrumb--top ol {
list-style: none; padding: 0; margin: 0;
display: flex; flex-wrap: wrap; gap: 0;
align-items: center;
}
.cp-breadcrumb--top li {
display: inline-flex; align-items: center;
margin-right: 6px;
}
.cp-breadcrumb--top a { color: #f5efe4; }
.cp-breadcrumb--top a:hover { color: var(--cp-accent); }
.cp-breadcrumb--top [aria-current="page"] {
color: #fff;
font-weight: 500;
}
.cp-breadcrumb-sep { margin: 0 8px; opacity: 0.55; }
.cp-single-hero-v4 {
padding: 16px 0 72px;
}
@media (max-width: 780px) {
.cp-single-hero-v4 { padding: 12px 0 48px; }
.cp-breadcrumb--top { font-size: 12px; }
}
/* ─── Breadcrumb TOP intégré dans le hero (feedback 2026-04-23) ──────────── */
/* Override de la version beige précédente : fond transparent, liens clairs,
s'intègre au dégradé hero vert sans rupture visuelle. */
.cp-single-hero-v4 .cp-breadcrumb--top {
background: transparent;
border-bottom: 1px solid rgba(255,252,247,0.14);
padding: 16px 0;
margin-top: 0;
position: relative;
z-index: 2;
color: rgba(255,252,247,0.72);
}
.cp-single-hero-v4 .cp-breadcrumb--top a,
.cp-single-hero-v4 .cp-breadcrumb--top a.cp-link {
color: rgba(255,252,247,0.88);
}
.cp-single-hero-v4 .cp-breadcrumb--top a:hover {
color: var(--cp-accent);
}
.cp-single-hero-v4 .cp-breadcrumb--top [aria-current="page"] {
color: #FFFCF7;
font-weight: 500;
}
.cp-single-hero-v4 .cp-breadcrumb--top .cp-breadcrumb-sep {
color: rgba(255,252,247,0.55);
}
/* Resserrer le padding hero maintenant que le breadcrumb occupe la zone top */
.cp-single-hero-v4 {
padding: 16px 0 72px;
}
@media (max-width: 780px) {
.cp-single-hero-v4 { padding: 12px 0 48px; }
}
/* ─── CTA button affiliate : refonte plus mesurée + élégante (feedback 2026-04-23) ──── */
.cp-aff-widget .cp-cta {
padding: 12px 22px;
min-height: 44px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.2px;
border-radius: 3px;
box-shadow: 0 2px 4px rgba(139,26,26,0.15), 0 6px 14px rgba(139,26,26,0.10);
transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
gap: 10px;
}
.cp-aff-widget .cp-cta:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(139,26,26,0.22), 0 10px 22px rgba(139,26,26,0.16);
}
.cp-aff-widget .cp-cta:hover svg,
.cp-aff-widget .cp-cta:hover::after {
transform: translateX(3px);
}
/* Flèche intégrée : si pas de SVG, on en injecte une via pseudo */
.cp-aff-widget .cp-cta > svg {
transition: transform 280ms cubic-bezier(.2,.7,.25,1);
}
/* ─── Eyebrow widget : emoji aligné avec le texte uppercase ──────────────── */
.cp-aff-widget-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.15;
font-size: 11.5px;
vertical-align: middle;
}
/* Si l'emoji est un caractère inline au début du texte, on force son alignement */
.cp-aff-widget-eyebrow::first-letter {
font-size: 1em;
line-height: 1;
vertical-align: -1px;
}
/* ─── CTA button v3 : pill compact + style éditorial (feedback 2026-04-23) ──── */
/* On bascule sur un style pill rounded, plus élégant / moins massif.
Garde le grenat identité monétisation, mais plus "premium" et resserré. */
.cp-aff-widget .cp-cta {
padding: 10px 20px;
min-height: 38px;
height: auto;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.15px;
border-radius: 999px; /* pill */
box-shadow: 0 1px 2px rgba(139,26,26,0.12), 0 4px 10px rgba(139,26,26,0.08);
gap: 8px;
align-self: flex-start;
}
.cp-aff-widget .cp-cta:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(139,26,26,0.18), 0 8px 16px rgba(139,26,26,0.14);
background: var(--cp-grenat-hover) !important;
}
/* Variante --final : fond vert foncé → le CTA pill reste grenat mais adapter link underline */
.cp-aff-widget--final .cp-aff-widget-note a,
.cp-aff-widget--final .cp-secondary-link-inline {
color: #FFFCF7;
text-decoration: underline;
text-decoration-color: rgba(255,252,247,0.45);
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.cp-aff-widget--final .cp-aff-widget-note a:hover,
.cp-aff-widget--final .cp-secondary-link-inline:hover {
color: var(--cp-accent);
text-decoration-color: var(--cp-accent);
}
/* ==============================================================================
404 enriched — recherche + cats + derniers articles (post-audit 2026-04-24)
============================================================================== */
.cp-404-search {
display: flex; gap: 8px; max-width: 600px;
margin: 36px 0 24px;
align-items: stretch;
}
.cp-404-search input[type="search"] {
flex: 1;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid rgba(255,252,247,0.22);
background: rgba(255,252,247,0.08);
color: #FFFCF7;
font-family: var(--cp-sans); font-size: 14px;
outline: none;
transition: border-color 200ms ease, background 200ms ease;
}
.cp-404-search input[type="search"]::placeholder {
color: rgba(255,252,247,0.55);
}
.cp-404-search input[type="search"]:focus {
border-color: var(--cp-accent);
background: rgba(255,252,247,0.12);
}
.cp-cta--compact {
padding: 10px 20px;
min-height: auto;
font-size: 13.5px;
border-radius: 999px;
white-space: nowrap;
}
.cp-sr-only {
position: absolute !important;
width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap;
}
.cp-404-suggestions {
background: var(--cp-bg-alt);
padding: 80px 0;
}
.cp-404-section { margin-bottom: 56px; }
.cp-404-section:last-child { margin-bottom: 0; }
.cp-404-section-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 28px;
color: var(--cp-primary-dark); letter-spacing: -0.3px;
margin: 0 0 24px;
font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 36;
}
.cp-404-cats {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.cp-404-cat-link {
display: flex; justify-content: space-between; align-items: center;
padding: 18px 22px;
background: #FFFCF7;
border: 1px solid var(--cp-border);
border-radius: 4px;
color: var(--cp-primary-dark);
font-family: var(--cp-sans); font-size: 15px; font-weight: 500;
text-decoration: none;
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.cp-404-cat-link:hover {
border-color: var(--cp-accent);
color: var(--cp-ink);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(26,26,26,0.08);
}
.cp-404-cat-link span[aria-hidden] { color: var(--cp-accent); font-size: 18px; }
.cp-404-posts {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
.cp-404-post-link {
display: flex; flex-direction: column; gap: 6px;
padding: 20px;
background: #FFFCF7;
border: 1px solid var(--cp-border);
border-radius: 4px;
color: var(--cp-ink);
text-decoration: none;
transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.cp-404-post-link:hover {
border-color: var(--cp-accent);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(26,26,26,0.08);
}
.cp-404-post-cat {
font-family: var(--cp-sans); font-size: 10.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: 1.8px;
color: var(--cp-primary-dark);
}
.cp-404-post-title {
font-family: var(--cp-serif); font-weight: 500; font-size: 18px;
line-height: 1.3; color: var(--cp-ink);
letter-spacing: -0.2px;
}
.cp-404-post-date {
font-family: var(--cp-sans); font-size: 12.5px;
color: var(--cp-muted);
margin-top: 4px;
}
@media (max-width: 620px) {
.cp-404-search { flex-direction: column; }
.cp-404-search input[type="search"] { width: 100%; }
.cp-cta--compact { align-self: flex-start; }
.cp-404-suggestions { padding: 48px 0; }
.cp-404-section-title { font-size: 24px; }
}
/* ==============================================================================
FILTRES "Derniers guides" — pills catégorie (post-audit 2026-04-24)
============================================================================== */
.cp-guides-filters {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 40px;
padding: 0;
}
.cp-guides-filter {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: #FFFCF7;
border: 1px solid var(--cp-border);
border-radius: 999px;
font-family: var(--cp-sans); font-size: 13px; font-weight: 500;
color: var(--cp-primary-dark);
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
white-space: nowrap;
}
.cp-guides-filter:hover {
border-color: var(--cp-primary-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26,26,26,0.06);
}
.cp-guides-filter.is-active {
background: var(--cp-primary-dark);
border-color: var(--cp-primary-dark);
color: #FFFCF7;
}
.cp-guides-filter:focus-visible {
outline: 2px solid var(--cp-accent);
outline-offset: 3px;
}
.cp-guides-filter-count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 20px; height: 20px;
padding: 0 6px;
background: rgba(46,125,123,0.12);
color: var(--cp-primary-dark);
border-radius: 999px;
font-size: 11px; font-weight: 600;
font-feature-settings: "tnum";
}
.cp-guides-filter.is-active .cp-guides-filter-count {
background: rgba(255,252,247,0.2);
color: #FFFCF7;
}
/* Animation transition cards selon filtre */
.cp-articles-grid--cover[data-cp-guides-grid] li {
transition: opacity 240ms ease, transform 240ms ease;
}
.cp-articles-grid--cover[data-cp-guides-grid] li[data-cp-hidden="true"] {
display: none;
}
.cp-articles-grid--cover[data-cp-guides-grid] li.is-filtering {
opacity: 0; transform: translateY(8px);
}
/* Empty state : aucun article dans la cat sélectionnée */
.cp-guides-empty {
grid-column: 1 / -1;
padding: 48px 0;
text-align: center;
font-family: var(--cp-sans); font-size: 15px;
color: var(--cp-muted);
}
@media (max-width: 620px) {
.cp-guides-filters {
flex-wrap: nowrap;
overflow-x: auto;
margin-left: -20px; margin-right: -20px;
padding: 0 20px 4px;
scrollbar-width: none;
}
.cp-guides-filters::-webkit-scrollbar { display: none; }
.cp-guides-filter { flex-shrink: 0; }
}
/* ==============================================================================
PAGE LISTE GUIDES — search + filtres large (mécanique seriesphere)
============================================================================== */
.cp-guides-page {
padding: 72px 0 96px;
background: var(--cp-bg);
}
.cp-guides-search-wrap {
position: relative;
max-width: 680px;
margin: 0 0 32px;
}
.cp-guides-search-icon {
position: absolute;
top: 50%; left: 18px;
transform: translateY(-50%);
color: var(--cp-muted);
pointer-events: none;
}
.cp-guides-search-wrap input[type="search"] {
width: 100%;
padding: 14px 48px 14px 52px;
border-radius: 999px;
border: 1.5px solid var(--cp-border);
background: #FFFCF7;
color: var(--cp-ink);
font-family: var(--cp-sans); font-size: 14.5px;
outline: none;
transition: border-color 200ms ease, box-shadow 200ms ease;
-webkit-appearance: none;
appearance: none;
}
.cp-guides-search-wrap input[type="search"]::-webkit-search-decoration,
.cp-guides-search-wrap input[type="search"]::-webkit-search-cancel-button,
.cp-guides-search-wrap input[type="search"]::-webkit-search-results-button {
-webkit-appearance: none;
}
.cp-guides-search-wrap input[type="search"]::placeholder {
color: var(--cp-muted);
}
.cp-guides-search-wrap input[type="search"]:focus {
border-color: var(--cp-primary-dark);
box-shadow: 0 0 0 3px rgba(46,125,123,0.12);
}
.cp-guides-search-clear {
position: absolute;
top: 50%; right: 12px;
transform: translateY(-50%);
width: 32px; height: 32px;
display: none;
align-items: center; justify-content: center;
border-radius: 50%;
background: transparent;
border: none;
color: var(--cp-muted);
cursor: pointer;
transition: background 200ms ease, color 200ms ease;
}
.cp-guides-search-clear:hover {
background: var(--cp-bg-alt);
color: var(--cp-ink);
}
.cp-guides-search-wrap.has-value .cp-guides-search-clear {
display: flex;
}
.cp-guides-filters--large {
margin-bottom: 24px;
}
.cp-guides-filters--large .cp-guides-filter {
padding: 10px 18px;
font-size: 13.5px;
}
.cp-guides-count {
font-family: var(--cp-sans); font-size: 13px;
color: var(--cp-muted);
letter-spacing: 0.1px;
margin-bottom: 24px;
}
.cp-articles-grid--cover[data-cp-guides-page] {
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
@media (max-width: 960px) {
.cp-articles-grid--cover[data-cp-guides-page] {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 620px) {
.cp-articles-grid--cover[data-cp-guides-page] {
grid-template-columns: 1fr;
}
.cp-guides-page { padding: 56px 0 72px; }
.cp-guides-search-wrap input[type="search"] { font-size: 16px; padding: 12px 48px; }
}