.coval-article { --blue:          #2B2E80; --blue-mid:      #3D4199;
--blue-dark:     #1a1d5e; --blue-light:    #F0F1FA; --orange:        #F08700; --orange-hover:  #D97700;
--orange-light:  #FFF3E0; --orange-deep:   #B35F00; --orange-soft:   #FFB84D;  --text:          #2D2D2D;
--text-light:    #666666;
--white:         #FFFFFF;
--bg-light:      #F8F8FC;
--border:        #E8E8F0;
--border-soft:   #EFEFF6; --ok:            #1E8E4E;
--ko:            #C0392B; --shadow:        0 4px 24px rgba(43,46,128,0.10);
--shadow-hover:  0 8px 32px rgba(43,46,128,0.18);
--shadow-orange: 0 6px 20px rgba(240,135,0,0.35); --radius:        12px;
--radius-sm:     6px;
--radius-btn:    8px;
--radius-pill:   100px;
--radius-full:   50%; --font-head:     'M PLUS Rounded 1c', sans-serif;
--font-body:     'Poppins', sans-serif;
--transition:    0.25s ease;
max-width: 820px;
margin: 0 auto;
padding: 32px 18px 64px;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--text);
}
.coval-article *,
.coval-article *::before,
.coval-article *::after { box-sizing: border-box; } .article-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
}
.article-tag {
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
color: var(--blue);
background: var(--blue-light);
padding: 5px 13px;
border-radius: var(--radius-pill);
transition: background var(--transition), color var(--transition);
}
.article-tag::before {
content: "#";
color: var(--orange);
margin-right: 2px;
} .coval-article h2:where(:not(section *)) {
font-family: var(--font-head);
color: var(--blue);
font-size: 26px;
line-height: 1.25;
font-weight: 800;
margin: 44px 0 16px;
text-wrap: balance;
}
.coval-article h3:where(:not(section *)) {
font-family: var(--font-head);
color: var(--blue);
font-size: 19px;
line-height: 1.35;
font-weight: 700;
margin: 30px 0 12px;
text-wrap: balance;
}
.coval-article h4:where(:not(section *)) {
font-family: var(--font-head);
color: var(--blue);
font-weight: 700;
}
.coval-article p:where(:not(section *)) { margin: 0 0 18px; text-wrap: pretty; }
.coval-article a:where(:not(section *)) {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color var(--transition);
}
.coval-article a:where(:not(section *)):hover { color: var(--orange-hover); }
.coval-article strong:where(:not(section *)) { color: var(--text); font-weight: 600; }  .article-intro-label,
.definition-v2-label,
.points-cles-title,
.sources-title,
.author-label,
.related-link-label,
.lire-aussi-titre {
display: inline-block;
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--orange-deep);
background: var(--orange-light);
padding: 5px 13px;
border-radius: var(--radius-pill);
margin: 0 0 12px;
} .intro-variant-label,
.block-variant-label {
display: block;
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.12em;
margin: 40px 0 10px;
opacity: 0.65;
} .article-intro-v5 {
background: var(--blue-light);
padding: 22px 20px;
margin: 0 0 32px;
border-radius: var(--radius);
}
.article-intro-term {
font-family: var(--font-head);
font-size: 21px;
font-weight: 700;
color: var(--blue);
margin: 0 0 10px;
line-height: 1.3;
}
.article-intro-v5 p:last-child {
margin: 0;
font-size: 16px;
color: var(--text);
line-height: 1.65;
} .coval-article ul,
.coval-article ol { margin: 0 0 22px; padding-left: 22px; }
.coval-article li { margin-bottom: 8px; }
.coval-article ul li::marker { color: var(--orange); font-size: 1.1em; }
.coval-article ol li::marker { color: var(--blue); font-family: var(--font-head); font-weight: 700; } .coval-article .list-two-cols {
column-count: 1;
column-gap: 40px;
}
.coval-article .list-two-cols li {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
} .definition-v2 {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 22px 20px;
margin: 0 0 24px;
border-radius: var(--radius);
}
.definition-v2-term {
font-family: var(--font-head);
font-size: 21px;
font-weight: 700;
color: var(--blue);
margin: 0 0 10px;
line-height: 1.3;
}
.definition-v2 p:last-child {
margin: 0;
font-size: 16px;
color: var(--text);
line-height: 1.65;
} .conseil-v2 {
background: var(--blue);
color: var(--white);
padding: 22px 20px;
margin: 0 0 24px;
border-radius: var(--radius);
}
.conseil-v2-label {
display: inline-block;
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--orange-soft);
background: rgba(240,135,0,0.2);
padding: 5px 13px;
border-radius: var(--radius-pill);
margin: 0 0 12px;
}
.conseil-v2-term {
font-family: var(--font-head);
font-size: 21px;
font-weight: 700;
color: var(--white);
margin: 0 0 10px;
line-height: 1.3;
}
.conseil-v2 p:last-child {
font-size: 16px;
line-height: 1.65;
color: rgba(255,255,255,0.88);
margin: 0;
}
.conseil-v2 strong { color: var(--white); }
.conseil-v2 a { color: var(--orange-soft); }
.conseil-v2 a:hover { color: var(--white); } .points-cles {
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow);
padding: 24px 20px;
margin: 32px 0;
border-radius: var(--radius);
}
.points-cles ul { list-style: none; padding: 0; margin: 0; }
.points-cles li {
padding: 12px 0 12px 28px;
position: relative;
border-bottom: 1px solid var(--border-soft);
font-size: 16px;
}
.points-cles li:last-child { border-bottom: none; padding-bottom: 0; }
.points-cles li::marker { content: ""; }
.points-cles li::before {
content: "";
position: absolute;
left: 4px;
top: 20px;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--orange);
}   .steps-v1 { margin: 32px 0; counter-reset: step-v1; }
.steps-v1 .step {
border-bottom: 1px solid var(--border);
counter-increment: step-v1;
}
.steps-v1 .step:first-child { border-top: 1px solid var(--border); }
.steps-v1 .step summary {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 0;
cursor: pointer;
list-style: none;
transition: color var(--transition);
}
.steps-v1 .step summary::-webkit-details-marker { display: none; }
.steps-v1 .step-number {
flex-shrink: 0;
width: 40px;
height: 40px;
background: var(--blue);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-weight: 800;
font-size: 16px;
border-radius: var(--radius-full);
}
.steps-v1 .step-number::before { content: counter(step-v1, decimal-leading-zero); }
.steps-v1 .step-title {
flex: 1;
font-family: var(--font-head);
font-size: 16px;
font-weight: 700;
color: var(--blue);
line-height: 1.35;
transition: color var(--transition);
}
.steps-v1 .step summary::after {
content: "+";
flex-shrink: 0;
width: 26px;
height: 26px;
margin-left: 10px;
background: var(--orange-light);
color: var(--orange-deep);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 17px;
font-weight: 700;
line-height: 1;
transition: background var(--transition), color var(--transition);
}
.steps-v1 .step[open] summary::after {
content: "\2212";
background: var(--orange);
color: var(--white);
}
.steps-v1 .step-content {
padding: 4px 0 22px 54px;
color: var(--text-light);
}
.steps-v1 .step-content > *:last-child { margin-bottom: 0; }
.steps-v1 .step-content .table-wrapper { margin: 12px 0 0; }   .steps-v3 {
margin: 32px 0;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
counter-reset: step-v3;
}
.steps-v3 .step {
padding: 22px 20px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow);
counter-increment: step-v3;
position: relative;
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
border-radius: var(--radius);
}
.steps-v3 .step::before {
content: counter(step-v3, decimal-leading-zero);
display: block;
font-family: var(--font-head);
font-size: 28px;
font-weight: 800;
color: var(--orange);
margin-bottom: 10px;
line-height: 1;
}
.steps-v3 .step h3 { margin: 0 0 8px; font-size: 17px; }
.steps-v3 .step p { margin: 0; font-size: 15px; color: var(--text-light); }   .cards-tabs {
margin: 32px 0;
position: relative;
}
.cards-tabs > input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.cards-tabs-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.card-tab {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 14px;
background: var(--white);
border: 2px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.card-tab-num {
font-family: var(--font-head);
font-size: 20px;
font-weight: 800;
color: var(--orange);
line-height: 1;
transition: color var(--transition);
}
.card-tab-title {
font-family: var(--font-head);
font-size: 14px;
font-weight: 700;
color: var(--blue);
line-height: 1.35;
transition: color var(--transition);
}
.cards-tabs-content {
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow);
border-radius: var(--radius);
padding: 24px 20px;
position: relative;
}
.cards-tabs-content::before {
content: "";
display: none;
position: absolute;
top: -8px;
width: 16px;
height: 16px;
background: var(--white);
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
transform: rotate(45deg);
transition: left var(--transition);
}
.tab-panel { display: none; }
.tab-panel h4 {
margin: 0 0 14px;
color: var(--blue);
font-family: var(--font-head);
font-size: 19px;
font-weight: 700;
line-height: 1.3;
}
.tab-panel p { margin: 0 0 14px; }
.tab-panel ul,
.tab-panel ol { margin: 0 0 14px; }
.tab-panel > *:last-child { margin-bottom: 0; } .cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"],
.cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"],
.cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"],
.cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] {
background: var(--blue);
border-color: var(--blue);
}
.cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"] .card-tab-num,
.cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"] .card-tab-num,
.cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"] .card-tab-num,
.cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] .card-tab-num {
color: var(--orange-soft);
}
.cards-tabs > #ct-1:checked ~ .cards-tabs-nav label[for="ct-1"] .card-tab-title,
.cards-tabs > #ct-2:checked ~ .cards-tabs-nav label[for="ct-2"] .card-tab-title,
.cards-tabs > #ct-3:checked ~ .cards-tabs-nav label[for="ct-3"] .card-tab-title,
.cards-tabs > #ct-4:checked ~ .cards-tabs-nav label[for="ct-4"] .card-tab-title {
color: var(--white);
} .cards-tabs > #ct-1:checked ~ .cards-tabs-content .tab-panel:nth-of-type(1),
.cards-tabs > #ct-2:checked ~ .cards-tabs-content .tab-panel:nth-of-type(2),
.cards-tabs > #ct-3:checked ~ .cards-tabs-content .tab-panel:nth-of-type(3),
.cards-tabs > #ct-4:checked ~ .cards-tabs-content .tab-panel:nth-of-type(4) {
display: block;
}   .steps-v4 { margin: 32px 0; counter-reset: step-v4; }
.steps-v4 .step {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-start;
padding: 20px 20px;
margin-bottom: 10px;
background: var(--white);
border: 1px solid var(--border);
border-left: 3px solid var(--blue);
counter-increment: step-v4;
border-radius: var(--radius);
}
.steps-v4 .step:nth-child(even) { border-left-color: var(--orange); }
.steps-v4 .step:last-child { margin-bottom: 0; }
.steps-v4 .step-number {
flex-shrink: 0;
font-family: var(--font-head);
font-size: 38px;
font-weight: 800;
color: var(--blue);
line-height: 1;
min-width: 64px;
}
.steps-v4 .step:nth-child(even) .step-number { color: var(--orange); }
.steps-v4 .step-number::before { content: counter(step-v4, decimal-leading-zero); }
.steps-v4 .step-content h3 { margin: 0 0 6px; font-size: 18px; }
.steps-v4 .step-content p { margin: 0; font-size: 15px; color: var(--text-light); } .table-wrapper {
overflow: hidden;
overflow-x: auto;
margin: 28px 0;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.coval-article table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.coval-article th,
.coval-article td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--border-soft);
}
.coval-article th {
background: var(--blue);
color: var(--white);
font-family: var(--font-head);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.coval-article tbody tr:last-child td { border-bottom: none; }
.coval-article tbody tr:nth-child(even) { background: var(--bg-light); }
.coval-article td:first-child { font-weight: 500; color: var(--text); }
.comparison-table th:first-child { background: var(--blue-dark); }
.comparison-table .check { color: var(--ok); font-weight: 700; font-size: 18px; }
.comparison-table .cross { color: var(--ko); font-weight: 700; font-size: 18px; }
.comparison-table td { text-align: center; }
.comparison-table td:first-child { text-align: left; } .accordion { margin: 28px 0; }
.accordion-item {
border: 1px solid var(--border);
margin-bottom: 8px;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
}
.accordion-item:last-child { margin-bottom: 0; }
.accordion-item summary {
padding: 16px 18px;
cursor: pointer;
font-family: var(--font-head);
font-weight: 700;
font-size: 15px;
color: var(--blue);
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
transition: background var(--transition);
}
.accordion-item summary::-webkit-details-marker { display: none; }
.accordion-item summary::after {
content: "+";
flex-shrink: 0;
width: 26px;
height: 26px;
background: var(--orange-light);
color: var(--orange-deep);
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
line-height: 1;
transition: background var(--transition), color var(--transition);
}
.accordion-item[open] summary {
background: var(--blue-light);
border-bottom: 1px solid var(--border-soft);
}
.accordion-item[open] summary::after {
content: "\2212";
background: var(--orange);
color: var(--white);
}
.accordion-content {
padding: 18px;
color: var(--text-light);
}
.accordion-content > *:last-child { margin-bottom: 0; }
.accordion-content .table-wrapper { margin: 12px 0 0; } .coval-article a.faq-mini-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
margin-top: 10px;
background: var(--orange);
color: var(--white);
border: 2px solid var(--orange);
border-radius: var(--radius-btn);
font-family: var(--font-head);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.coval-article a.faq-mini-cta::after {
content: "\2192";
font-weight: 400;
} .coval-article .accordion-content a.faq-mini-cta {
display: flex;
width: fit-content;
margin: 14px auto 0;
}  .photo-text {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
margin: 36px 0;
}
.photo-text-img {
aspect-ratio: 4/3;
background: var(--blue-light);
border: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 14px;
font-weight: 500;
border-radius: var(--radius);
overflow: hidden;
}
.photo-text-content h3 { margin-top: 0; }
.photo-text-content p:last-child { margin-bottom: 0; }  .article-banniere {
margin: 0 0 32px;
border-radius: var(--radius);
overflow: hidden;
background: var(--blue-light);
}
.article-banniere img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
} .author-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 20px;
padding: 24px 20px;
background: var(--white);
border: 1px solid var(--border);
box-shadow: var(--shadow);
margin: 48px 0 20px;
border-radius: var(--radius);
}
.author-photo {
flex-shrink: 0;
width: 110px;
height: 110px;
background: var(--blue);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-family: var(--font-head);
font-weight: 800;
font-size: 34px;
border-radius: var(--radius-full);
overflow: hidden;
}
.author-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.author-info { flex: 1; }
.author-name {
font-family: var(--font-head);
font-size: 21px;
font-weight: 700;
color: var(--blue);
margin: 0 0 4px;
}
.author-role {
font-size: 14px;
color: var(--text-light);
margin: 0 0 12px;
}
.author-bio {
font-size: 15px;
color: var(--text);
margin: 0 0 16px;
}
.author-social { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.author-social a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
background: transparent;
color: var(--blue);
border: 2px solid var(--blue);
font-family: var(--font-head);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
transition: all var(--transition);
border-radius: var(--radius-btn);
} .sources-box {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 20px 18px;
margin: 20px 0 36px;
border-radius: var(--radius);
}
.sources-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.sources-box li {
font-size: 14px;
line-height: 1.6;
color: var(--text-light);
padding: 8px 0 8px 18px;
position: relative;
border-bottom: 1px solid var(--border-soft);
}
.sources-box li:last-child { border-bottom: none; }
.sources-box li::before {
content: "";
position: absolute;
left: 2px;
top: 16px;
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--orange);
}
.sources-box li a {
color: var(--blue);
font-weight: 500;
text-decoration: underline;
text-underline-offset: 3px;
}
.sources-box li a:hover { color: var(--orange-hover); }
.sources-meta { color: var(--text-light); } .asterix-box {
background: transparent;
padding: 0;
margin: 24px 0 32px;
border-top: 1px solid var(--border);
padding-top: 18px;
}
.asterix-title {
font-family: var(--font-head);
font-size: 11px;
font-weight: 700;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 8px;
}
.asterix-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.asterix-box li {
font-size: 13px;
line-height: 1.55;
color: var(--text-light);
padding: 4px 0 4px 18px;
position: relative;
border-bottom: none;
}
.asterix-box li::before {
content: "*";
position: absolute;
left: 4px;
top: 6px;
color: var(--orange);
font-weight: 700;
font-size: 14px;
line-height: 1;
}
.asterix-term {
color: var(--text);
font-weight: 600;
} .coval-article .asterix-mark {
color: var(--orange);
font-weight: 700;
margin-left: 1px;
} .coval-article a.related-link {
display: flex;
align-items: center;
gap: 14px;
background: var(--blue-light);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 16px 18px;
margin: 28px 0;
text-decoration: none;
transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.related-link-icon {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: var(--radius-full);
background: var(--orange);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 16px;
font-weight: 700;
line-height: 1;
}
.related-link-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.related-link-label {
align-self: flex-start;
margin: 0;
}
.related-link-title {
font-family: var(--font-head);
font-size: 16px;
font-weight: 700;
color: var(--blue);
line-height: 1.35;
text-decoration: none;
}
.related-link-arrow {
flex-shrink: 0;
color: var(--orange);
font-size: 22px;
font-weight: 400;
line-height: 1;
transition: transform var(--transition);
}  .lire-aussi-v1 {
margin: 32px 0 36px;
padding-top: 26px;
border-top: 1px solid var(--border);
}
.lire-aussi-grille {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.coval-article a.lire-aussi-carte {
display: grid;
grid-template-columns: 104px 1fr;
align-items: center;
gap: 14px;
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
text-decoration: none;
box-shadow: var(--shadow);
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.lire-aussi-visuel {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--blue-light);
}
.lire-aussi-carte-titre {
display: block;
font-family: var(--font-head);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
color: var(--blue);
padding: 12px 14px 12px 0;
transition: color var(--transition);
}      @media (min-width: 700px) {
.coval-article { padding: 48px 24px 80px; }
.coval-article h2:where(:not(section *)) { font-size: 34px; line-height: 1.2; margin: 56px 0 18px; }
.coval-article h3:where(:not(section *)) { font-size: 21px; margin: 36px 0 14px; }
.article-intro-v5,
.definition-v2,
.conseil-v2 { padding: 26px 32px; }
.article-intro-term,
.definition-v2-term,
.conseil-v2-term { font-size: 24px; }
.points-cles { padding: 28px 32px; margin: 36px 0; }
.coval-article .list-two-cols { column-count: 2; } .steps-v1 { margin: 36px 0; }
.steps-v1 .step summary { gap: 22px; padding: 18px 0; }
.steps-v1 .step-number { width: 44px; height: 44px; font-size: 18px; }
.steps-v1 .step-title { font-size: 18px; }
.steps-v1 .step summary::after { margin-left: 16px; }
.steps-v1 .step-content { padding: 4px 0 22px 66px; } .steps-v3 { margin: 36px 0; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.steps-v3 .step { padding: 24px 22px; } .cards-tabs { margin: 36px 0; }
.cards-tabs-nav { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card-tab { padding: 20px 18px; }
.cards-tabs-content { padding: 32px; }
.cards-tabs-content::before { display: block; }
.tab-panel h4 { font-size: 22px; }
.cards-tabs > #ct-1:checked ~ .cards-tabs-content::before { left: calc(12.5% - 8px); }
.cards-tabs > #ct-2:checked ~ .cards-tabs-content::before { left: calc(37.5% - 8px); }
.cards-tabs > #ct-3:checked ~ .cards-tabs-content::before { left: calc(62.5% - 8px); }
.cards-tabs > #ct-4:checked ~ .cards-tabs-content::before { left: calc(87.5% - 8px); } .steps-v4 { margin: 36px 0; }
.steps-v4 .step { flex-direction: row; gap: 28px; padding: 24px 28px; } .table-wrapper { margin: 32px 0; }
.coval-article table { font-size: 15px; }
.coval-article th,
.coval-article td { padding: 14px 18px; }
.coval-article th { font-size: 13px; letter-spacing: 0.08em; } .accordion { margin: 32px 0; }
.accordion-item summary { padding: 18px 24px; font-size: 16px; }
.accordion-content { padding: 20px 24px 22px; } .photo-text { grid-template-columns: 1fr 1fr; gap: 32px; }
.photo-text.reverse { direction: rtl; }
.photo-text.reverse > * { direction: ltr; } .author-box {
flex-direction: row;
align-items: center;
text-align: left;
gap: 32px;
padding: 32px;
}
.author-photo { width: 130px; height: 130px; }
.author-social { justify-content: flex-start; } .sources-box { padding: 24px 28px; margin: 20px 0 40px; } .lire-aussi-v1 { margin: 36px 0 40px; padding-top: 32px; }
.lire-aussi-grille { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coval-article a.lire-aussi-carte {
grid-template-columns: 1fr;
align-items: stretch;
gap: 0;
}
.lire-aussi-visuel { aspect-ratio: 16 / 9; }
.lire-aussi-carte-titre { font-size: 16px; padding: 14px 16px 18px; }
} @media (hover: hover) {
.article-tag:hover { background: var(--blue); color: var(--white); }
.article-tag:hover::before { color: var(--orange-soft); }
.steps-v1 .step summary:hover .step-title { color: var(--orange-hover); }
.steps-v1 .step summary:hover::after { background: var(--orange); color: var(--white); }
.steps-v3 .step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: var(--orange);
}
.card-tab:hover {
border-color: var(--orange);
transform: translateY(-2px);
}
.accordion-item summary:hover { background: var(--blue-light); }
.accordion-item summary:hover::after { background: var(--orange); color: var(--white); }
.coval-article a.faq-mini-cta:hover {
background: var(--orange-hover);
border-color: var(--orange-hover);
color: var(--white);
transform: translateY(-2px);
box-shadow: var(--shadow-orange);
}
.author-social a:hover { background: var(--blue); color: var(--white); }
.coval-article tbody tr:hover td { background: var(--blue-light); }
.coval-article a.related-link:hover {
border-color: var(--orange);
background: var(--white);
transform: translateX(2px);
}
.coval-article a.related-link:hover .related-link-arrow {
transform: translateX(4px);
}
.coval-article a.lire-aussi-carte:hover {
border-color: var(--orange);
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
.coval-article a.lire-aussi-carte:hover .lire-aussi-carte-titre {
color: var(--orange-hover);
}
} .coval-article a:focus-visible,
.coval-article summary:focus-visible,
.coval-article label:focus-visible,
.cards-tabs > input[type="radio"]:focus-visible ~ .cards-tabs-nav label {
outline: 3px solid var(--orange);
outline-offset: 2px;
border-radius: var(--radius-sm);
} @media (prefers-reduced-motion: reduce) {
.coval-article *,
.coval-article *::before,
.coval-article *::after {
transition-duration: 0.01ms !important;
}
}