/*
 * Habillage du site public — maquette Claude Design « Home Versions », V1.
 *
 * ⚠ LE DESIGN PRIME SUR LE SOCLE. Cette feuille est chargée APRÈS Bootstrap et
 *   `front.css` du Cms (voir templates/bundles/QcdgoneCmsBundle/front/base.html.twig) :
 *   à spécificité égale, elle l'emporte. Quand une règle du socle résiste, on la
 *   neutralise ici plutôt que de céder sur le design.
 *
 * Préfixe `cs-` (Carport Solaire) : aucune collision avec Bootstrap ni le Cms.
 * Points de rupture : 1100 px (tablette), 760 px (mobile, maquette 390 px).
 */

:root {
    --cs-marine: #002C54;
    --cs-marine-survol: #0A3A6A;
    --cs-menthe: #53CEB7;
    --cs-menthe-survol: #6FDCC7;
    --cs-menthe-pale: #E6F8F4;
    --cs-menthe-pale-survol: #D6F2EC;
    --cs-vert: #17806D;
    --cs-texte: #2B4A66;
    --cs-gris: #5F6F7A;
    --cs-bordure: #E3E9EC;
    --cs-bordure-forte: #D3DCE0;
    --cs-surface: #F3F7F7;
    --cs-photo: #DDE5E8;
    --cs-bleu-clair: #C3D2E0;
    --cs-etoile: #F5B400;
    --cs-google: #4285F4;
    --cs-police-titre: 'Archivo', 'Archivo repli', system-ui, sans-serif;
    --cs-police: 'DM Sans', 'DM Sans repli', system-ui, sans-serif;
    --cs-largeur: 1280px;
    --cs-marge: 40px;
}

/* ── Polices de secours calées sur DM Sans et Archivo (QSF-99) ────────────
   Pendant le chargement des polices web (display=swap), le texte s'affiche en
   Arial. Sans réglage, DM Sans est 5 % plus large : le fil d'Ariane et les
   intros changeaient de nombre de lignes à l'arrivée de la police, d'où un CLS
   de 0,24 en tête des listings. Mesures faites dans Chrome aux tailles du site. */
@font-face { font-family: 'DM Sans repli'; src: local('Arial'), local('ArialMT'); size-adjust: 105%; ascent-override: 94%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight: 600 900; size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo repli'; src: local('Arial'), local('ArialMT'); font-weight: 100 599; size-adjust: 100%; ascent-override: 88%; descent-override: 21%; line-gap-override: 0%; }

/* ── Neutralisation du socle sur le front ─────────────────────────────── */

body {
    margin: 0;
    background: #FFFFFF;
    font-family: var(--cs-police);
    color: var(--cs-marine);
    -webkit-font-smoothing: antialiased;
}

body a { color: var(--cs-marine); text-decoration: none; }
body a:hover { color: var(--cs-vert); }
body h1, body h2, body h3, body h4 { font-family: var(--cs-police-titre); color: var(--cs-marine); }
main { display: block; }
button { font-family: inherit; }

.cs-conteneur {
    max-width: var(--cs-largeur);
    margin: 0 auto;
    padding-left: var(--cs-marge);
    padding-right: var(--cs-marge);
}

/* ── Éléments communs ─────────────────────────────────────────────────── */

.cs-surtitre {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cs-vert);
}
.cs-surtitre--menthe { color: var(--cs-menthe); }
.cs-surtitre-gris {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cs-gris);
}

.cs-h2 {
    font-family: var(--cs-police-titre);
    font-weight: 800;
    font-size: 42px;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 8px 0 0;
    max-width: 760px;
}
.cs-h2--38 { font-size: 38px; }
.cs-h2--36 { font-size: 36px; }
.cs-blanc { color: #FFFFFF !important; }
.cs-accent { color: var(--cs-vert); }
.cs-gris { color: var(--cs-gris); }
.cs-petit { font-size: 12px; }
.cs-texte { font-size: 15px; line-height: 1.6; color: var(--cs-texte); }
.cs-note { margin: 18px 0 0; font-size: 14px; color: var(--cs-gris); }

.cs-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 14px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s, border-color .2s, color .2s;
}
body .cs-bouton--menthe { background: var(--cs-menthe); color: var(--cs-marine); }
body .cs-bouton--menthe:hover { background: var(--cs-menthe-survol); color: var(--cs-marine); }
body .cs-bouton--marine { background: var(--cs-marine); color: #FFFFFF; }
body .cs-bouton--marine:hover { background: var(--cs-marine-survol); color: #FFFFFF; }
body .cs-bouton--contour { border-color: var(--cs-marine); color: var(--cs-marine); background: transparent; }
body .cs-bouton--contour:hover { background: var(--cs-surface); color: var(--cs-marine); }
body .cs-bouton--contour-clair { border-color: rgba(255,255,255,.5); color: #FFFFFF; }
body .cs-bouton--contour-clair:hover { border-color: #FFFFFF; color: #FFFFFF; }

body .cs-lien-accent { color: var(--cs-vert); font-weight: 700; }
body .cs-lien-souligne { font-weight: 700; border-bottom: 2px solid var(--cs-menthe); padding-bottom: 2px; white-space: nowrap; align-self: flex-start; }

.cs-rond {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.cs-rond--44 { width: 44px; height: 44px; font-size: 18px; }
.cs-rond--42 { width: 42px; height: 42px; font: 800 18px var(--cs-police-titre); }
.cs-rond--marine { background: var(--cs-marine); color: #FFFFFF; }
.cs-rond--menthe { background: var(--cs-menthe); color: var(--cs-marine); }

.cs-pastille {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--cs-menthe);
    color: var(--cs-marine);
}
.cs-pastille--pro { background: var(--cs-marine); color: #FFFFFF; }
.cs-pastilles { display: flex; gap: 6px; }

.cs-etoiles { color: var(--cs-etoile); letter-spacing: 1px; }
.cs-etoiles--grandes { font-size: 22px; letter-spacing: 3px; }
.cs-g { color: var(--cs-google); font-family: var(--cs-police-titre); font-size: 18px; }

.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.cs-actions--droite { justify-content: flex-end; margin-top: 20px; }

/* ── En-tête ──────────────────────────────────────────────────────────── */

.cs-entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #FFFFFF;
    border-bottom: 1px solid var(--cs-bordure);
}

.cs-entete__barre {
    max-width: var(--cs-largeur);
    margin: 0 auto;
    padding: 0 32px;
    height: 84px;
    display: flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
}

.cs-entete__logo img { height: 44px; width: auto; display: block; }

.cs-nav { display: flex; gap: 4px; align-items: center; flex: 1; font-size: 14px; font-weight: 600; }
.cs-nav__mega {
    border: 0;
    background: transparent;
    color: var(--cs-marine);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.cs-nav__mega[aria-expanded="true"], .cs-nav__mega:hover { background: var(--cs-menthe-pale); }
.cs-nav__separateur { width: 1px; height: 22px; background: var(--cs-bordure); margin: 0 10px; }
.cs-nav__simples { display: flex; gap: 16px; }
body .cs-nav__simples a { color: var(--cs-texte); }
body .cs-nav__simples a:hover { color: var(--cs-vert); }

body .cs-entete__tel { display: flex; flex-direction: column; line-height: 1.15; font-size: 12px; color: var(--cs-gris); }
.cs-entete__tel strong { font-family: var(--cs-police-titre); font-size: 17px; color: var(--cs-marine); }
.cs-entete__cta { padding: 13px 20px; }

.cs-entete__mobile { display: none; gap: 8px; margin-left: auto; }
body .cs-entete__appeler {
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1.5px solid var(--cs-bordure);
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}
.cs-entete__burger {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--cs-marine);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cs-entete__burger span { width: 18px; height: 2px; background: #FFFFFF; }

.cs-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 84px;
    background: #FFFFFF;
    border-top: 1px solid var(--cs-bordure);
    box-shadow: 0 30px 60px -30px rgba(0, 44, 84, .35);
    padding: 28px 40px 0;
}
.cs-mega[hidden] { display: none; }
.cs-mega__grille {
    max-width: calc(var(--cs-largeur) - 80px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    gap: 28px;
    padding-bottom: 28px;
}
.cs-mega__colonne { display: flex; flex-direction: column; gap: 10px; font-size: 15px; white-space: normal; }
.cs-mega__visuel {
    border-radius: 16px;
    background: var(--cs-photo) center / cover no-repeat;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px;
    transition: box-shadow .2s;
}
.cs-mega__visuel:hover { box-shadow: 0 0 0 2px var(--cs-menthe); }
.cs-mega__visuel-titre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 16px;
    color: var(--cs-vert);
    font-weight: 700;
}
.cs-mega__visuel-titre strong { color: var(--cs-marine); }
/* ⚠ Calé sur la largeur du contenu du menu (et non sur toute la page) :
 *   le panneau s'étend d'un bord à l'autre de l'écran, son contenu non. */
body .cs-mega__bandeau {
    max-width: calc(var(--cs-largeur) - 80px);
    margin: 0 auto 28px;
    border-radius: 14px;
    padding: 16px 20px;
    background: var(--cs-menthe-pale);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 15px;
    white-space: normal;
}
body .cs-mega__bandeau:hover { background: var(--cs-menthe-pale-survol); }
.cs-mega__bandeau > span > span { color: var(--cs-texte); }

.cs-tiroir {
    border-top: 1px solid var(--cs-bordure);
    padding: 12px 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}
.cs-tiroir[hidden] { display: none; }
.cs-tiroir__groupe summary {
    list-style: none;
    padding: 14px 0;
    font-weight: 700;
    font-size: 16px;
    border-bottom: 1px solid var(--cs-bordure);
    cursor: pointer;
}
.cs-tiroir__groupe summary::after { content: '+'; float: right; color: var(--cs-vert); }
.cs-tiroir__groupe[open] summary::after { content: '−'; }
.cs-tiroir__groupe { display: flex; flex-direction: column; }
.cs-tiroir__groupe .cs-surtitre-gris { display: block; margin: 14px 0 6px; }
.cs-tiroir__groupe a { display: block; padding: 6px 0; font-size: 15px; }
body .cs-tiroir__lien { padding: 14px 0; font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--cs-bordure); }

.cs-barre-mobile { display: none; }

/* ── Hero et aiguillage ───────────────────────────────────────────────── */

.cs-hero {
    padding-top: 44px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: stretch;
}
.cs-hero__texte { display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.cs-avis-ligne { display: flex; gap: 10px; align-items: center; font-size: 14px; margin: 0; }
.cs-avis-ligne .cs-etoiles { letter-spacing: 1px; }
body .cs-hero__titre {
    font-weight: 800;
    font-size: 52px;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
}
.cs-hero__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cs-texte); }
.cs-coches { display: flex; gap: 18px; font-size: 14px; color: var(--cs-texte); flex-wrap: wrap; margin: 0; }
.cs-coches strong { color: var(--cs-vert); }

.cs-mosaique {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 200px 200px;
    gap: 12px;
}
.cs-tuile {
    position: relative;
    border-radius: 18px;
    background: var(--cs-photo) center / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 14px;
    transition: box-shadow .2s;
}
.cs-tuile:hover { box-shadow: 0 0 0 3px var(--cs-menthe); }
.cs-tuile--grande { grid-column: span 2; grid-row: span 2; }
.cs-tuile__libelle {
    align-self: flex-start;
    font-size: 15px;
    color: var(--cs-marine);
    background: #FFFFFF;
    padding: 5px 10px;
    border-radius: 8px;
}

.cs-aiguillage {
    padding-top: 40px;
    padding-bottom: 44px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.cs-aiguille {
    background: var(--cs-surface);
    border: 1.5px solid var(--cs-bordure);
    border-radius: 22px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: end;
    transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
}
.cs-aiguille:hover {
    border-color: var(--cs-menthe);
    background: var(--cs-menthe-pale);
    transform: translateY(-4px);
    box-shadow: 0 22px 40px -22px rgba(0, 44, 84, .45);
}
.cs-aiguille--pro { background: var(--cs-marine); border-color: var(--cs-marine); }
.cs-aiguille--pro:hover { background: var(--cs-marine-survol); border-color: var(--cs-menthe); box-shadow: 0 22px 40px -18px rgba(0, 44, 84, .6); }
.cs-aiguille__texte { display: flex; flex-direction: column; gap: 10px; }
.cs-aiguille__titre { font-family: var(--cs-police-titre); font-size: 28px; line-height: 1.15; color: var(--cs-marine); }
.cs-aiguille__desc { font-size: 15px; line-height: 1.55; color: var(--cs-texte); }
.cs-aiguille--pro .cs-aiguille__titre { color: #FFFFFF; }
.cs-aiguille--pro .cs-aiguille__desc { color: var(--cs-bleu-clair); }

/* ── Réassurance ──────────────────────────────────────────────────────── */

.cs-labels { padding: 36px 0; border-top: 1px solid var(--cs-bordure); border-bottom: 1px solid var(--cs-bordure); }
.cs-labels__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: center; }
.cs-label { display: flex; gap: 12px; align-items: center; line-height: 1.3; }
.cs-label strong { font-size: 14px; }
.cs-label .cs-gris { font-size: 12px; }
.cs-label__logo {
    width: 56px;
    height: 56px;
    flex: none;
    object-fit: contain;
}

/* ── Sections ─────────────────────────────────────────────────────────── */

.cs-section { padding-top: 88px; }
.cs-section__tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 28px; }
.cs-grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-grille-3--large { gap: 24px; }
.cs-grille-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; margin: 0; }

.cs-carte-avantage {
    border: 1.5px solid var(--cs-bordure);
    border-radius: 20px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-carte-avantage__tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cs-numero { font: 800 15px var(--cs-police-titre); color: var(--cs-vert); }
.cs-carte-avantage__titre { font-family: var(--cs-police-titre); font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; }

.cs-video { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: center; }
.cs-video__lecteur {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    background: var(--cs-marine) center / cover no-repeat;
}
.cs-video__lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video__voile { position: absolute; inset: 0; background: rgba(0, 44, 84, .35); display: flex; align-items: center; justify-content: center; }
.cs-video__play {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--cs-menthe);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5);
    position: relative;
}
.cs-video__play::after {
    content: '';
    position: absolute;
    left: 34px;
    top: 28px;
    border-left: 26px solid var(--cs-marine);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}
.cs-video__texte { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cs-video__texte .cs-h2 { margin: 0; }
.cs-video__texte .cs-texte { margin: 0; font-size: 16px; }

.cs-modele {
    background: #FFFFFF;
    border: 1.5px solid var(--cs-bordure);
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cs-modele:hover { transform: translateY(-4px); border-color: var(--cs-menthe); box-shadow: 0 22px 40px -24px rgba(0, 44, 84, .45); }
.cs-modele__photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--cs-photo) center / cover no-repeat; }
.cs-modele__kwc { position: absolute; top: 14px; left: 14px; background: var(--cs-marine); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.cs-modele__corps { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.cs-modele__nom { font-family: var(--cs-police-titre); font-size: 23px; letter-spacing: -0.01em; }
.cs-modele__prix {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 14px;
    border-top: 1px dashed var(--cs-bordure);
    margin-top: 4px;
}
.cs-modele__prix strong { font-family: var(--cs-police-titre); font-size: 28px; letter-spacing: -0.02em; }

.cs-pro { background: var(--cs-marine); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; }
.cs-pro__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 3fr 2fr; min-height: 500px; gap: 4px; }
.cs-pro__photo { background: var(--cs-photo) center / cover no-repeat; }
.cs-pro__photo--large { grid-column: span 2; }
.cs-pro__texte { padding: 48px; display: flex; flex-direction: column; gap: 18px; justify-content: center; color: var(--cs-bleu-clair); font-size: 16px; line-height: 1.6; }
.cs-pro__texte .cs-h2, .cs-pro__texte p { margin: 0; }
.cs-liste-coches { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.cs-liste-coches li::before { content: '✓ '; color: var(--cs-menthe); font-weight: 700; }
.cs-puces-secteurs { display: flex; gap: 8px; flex-wrap: wrap; }
body .cs-puces-secteurs a { border: 1px solid #23507C; color: #FFFFFF; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; }
body .cs-puces-secteurs a:hover { border-color: var(--cs-menthe); color: #FFFFFF; }

.cs-avis { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: stretch; }
.cs-avis__synthese { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.cs-avis__note { display: flex; align-items: baseline; gap: 8px; }
.cs-avis__note strong { font-family: var(--cs-police-titre); font-size: 76px; line-height: 1; letter-spacing: -0.04em; }
.cs-avis__note span { font-size: 22px; color: var(--cs-gris); }
.cs-avis__source { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.cs-avis__defilement { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cs-avis__piste {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 36px) / 3);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.cs-avis__piste::-webkit-scrollbar { display: none; }
.cs-avis-carte { margin: 0; background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start; }
.cs-avis-carte__photo { display: block; aspect-ratio: 16 / 10; background: var(--cs-photo) center / cover no-repeat; }
.cs-avis-carte__corps { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cs-avis-carte__auteur { display: flex; gap: 12px; align-items: center; line-height: 1.3; }
.cs-avis-carte__auteur > span:nth-child(2) { flex: 1; font-size: 15px; }
.cs-avis-carte blockquote { margin: 0; font-size: 15px; line-height: 1.55; }
.cs-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; color: #FFFFFF; font: 700 18px var(--cs-police-titre); display: flex; align-items: center; justify-content: center; }
img.cs-avatar { object-fit: cover; }
.cs-avis-carte__texte summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.cs-avis-carte__texte summary::-webkit-details-marker { display: none; }
.cs-avis-carte__texte summary .cs-lien-souligne { font-size: 14px; font-weight: 600; align-self: flex-start; }
.cs-avis-carte__texte[open] summary { display: none; }
.cs-avatar--0 { background: #17806D; } .cs-avatar--1 { background: #0C5177; } .cs-avatar--2 { background: #5B6FA8; }
.cs-avatar--3 { background: #B5644B; } .cs-avatar--4 { background: #7A6A9C; } .cs-avatar--5 { background: #3D8B9E; }
.cs-avis__commandes { display: flex; justify-content: space-between; align-items: center; }
.cs-points { display: flex; gap: 6px; align-items: center; }
.cs-points button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: var(--cs-bordure-forte); cursor: pointer; transition: width .2s; }
.cs-points button[aria-current="true"] { width: 24px; background: var(--cs-marine); }
.cs-fleches { display: flex; gap: 8px; }
.cs-fleche { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--cs-bordure-forte); background: #FFFFFF; color: var(--cs-marine); font-size: 18px; cursor: pointer; }
.cs-fleche:hover { border-color: var(--cs-marine); }
.cs-fleche--pleine { border: 0; background: var(--cs-marine); color: #FFFFFF; }
.cs-fleche--pleine:hover { background: var(--cs-marine-survol); }

.cs-galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 230px 230px; gap: 12px; }
.cs-galerie .cs-tuile { border-radius: 22px; }
.cs-galerie .cs-tuile__libelle { font-size: 14px; padding: 6px 10px; }

.cs-etapes { margin-top: 88px; padding: 72px 0; background: var(--cs-surface); }
.cs-etapes__titre { margin-bottom: 32px; }
.cs-etape { background: #FFFFFF; border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cs-etape__tete { display: flex; align-items: center; gap: 12px; }
.cs-etape__trait { flex: 1; height: 2px; background: var(--cs-bordure); }
.cs-etape__titre { font-family: var(--cs-police-titre); font-size: 22px; }

.cs-simulateur-appel { background: var(--cs-menthe-pale); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 420px; }
.cs-simulateur-appel__texte { padding: 44px 48px; display: flex; flex-direction: column; gap: 14px; justify-content: center; align-items: flex-start; }
.cs-simulateur-appel__texte .cs-h2, .cs-simulateur-appel__texte p { margin: 0; }
.cs-simulateur-appel__texte .cs-texte { font-size: 16px; }
.cs-simulateur-appel__photo { background: var(--cs-photo) center / cover no-repeat; min-height: 260px; }

.cs-faq { padding-bottom: 88px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; }
.cs-faq__intro { display: flex; flex-direction: column; gap: 14px; }
.cs-faq__intro .cs-h2, .cs-faq__intro p { margin: 0; }
.cs-faq__tel { font-family: var(--cs-police-titre); font-weight: 700; font-size: 20px; }
.cs-faq__liste { border-top: 1px solid var(--cs-bordure); }
.cs-faq__item { border-bottom: 1px solid var(--cs-bordure); }
.cs-faq__item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 20px 0;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
}
.cs-faq__item summary::-webkit-details-marker { display: none; }
.cs-faq__signe { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--cs-surface); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.cs-faq__signe::before { content: '+'; }
.cs-faq__item[open] .cs-faq__signe { background: var(--cs-menthe); }
.cs-faq__item[open] .cs-faq__signe::before { content: '−'; }
.cs-faq__item p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--cs-texte); max-width: 640px; }

/* ── Pied ─────────────────────────────────────────────────────────────── */

.cs-pied-zone { background: var(--cs-surface); margin-top: 0; }
.cs-preuves {
    background: #FFFFFF;
    border-bottom: 1px solid var(--cs-bordure);
    border-top: 1px solid var(--cs-bordure);
    padding: 28px max(var(--cs-marge), calc((100% - var(--cs-largeur)) / 2 + var(--cs-marge)));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.cs-preuve { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.35; }
.cs-preuve__pastille { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--cs-menthe-pale); color: var(--cs-vert); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-preuve__pastille--google { background: var(--cs-surface); color: var(--cs-google); font: 800 20px var(--cs-police-titre); }

.cs-pied { max-width: var(--cs-largeur); margin: 0 auto; padding: 48px var(--cs-marge) 0; color: var(--cs-texte); }
.cs-pied__grille { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 40px; padding-bottom: 40px; }
.cs-pied__colonne { display: flex; flex-direction: column; gap: 10px; font-size: 14px; padding-top: 58px; }
.cs-pied__colonne--logo { padding-top: 0; }
.cs-pied__logo { height: 44px; width: auto; align-self: flex-start; margin-bottom: 14px; }
.cs-pied__titre { color: var(--cs-marine); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
body .cs-pied__colonne a { color: var(--cs-texte); }
body .cs-pied__colonne a:hover { color: var(--cs-vert); }
.cs-rappel { background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; align-self: start; }
.cs-rappel a[href^="tel:"] { white-space: nowrap; }
.cs-rappel__titre { font-family: var(--cs-police-titre); font-size: 22px; color: var(--cs-marine); line-height: 1.2; }
.cs-rappel__formulaire { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; }
.cs-rappel__formulaire input[type="tel"] { border: 1px solid var(--cs-bordure-forte); border-radius: 999px; padding: 13px 16px; font-size: 15px; min-width: 0; font-family: inherit; }
.cs-rappel__erreur { margin: 0; color: #B91C1C; font-weight: 600; }
.cs-pied__bas { border-top: 1px solid var(--cs-bordure); padding: 18px 0 22px; display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--cs-gris); }
.cs-pied__legal { display: flex; flex-wrap: wrap; gap: 22px; }
.cs-pied__marque { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
body .cs-pied__reseau { color: var(--cs-marine); font-weight: 700; }
body .cs-pied__legal a { color: var(--cs-gris); }

/* ── Gabarits existants (produit, listing, panier, simulateur, contact) ── */

.front-container { max-width: var(--cs-largeur); padding-left: var(--cs-marge); padding-right: var(--cs-marge); }
.btn-primary { background: var(--cs-menthe); border-color: var(--cs-menthe); color: var(--cs-marine); font-weight: 700; border-radius: 999px; padding: 12px 22px; }
.btn-primary:hover, .btn-primary:focus { background: var(--cs-menthe-survol); border-color: var(--cs-menthe-survol); color: var(--cs-marine); }
.btn-outline-primary { border-color: var(--cs-marine); color: var(--cs-marine); border-radius: 999px; font-weight: 700; padding: 12px 22px; }
.btn-outline-primary:hover { background: var(--cs-marine); border-color: var(--cs-marine); color: #FFFFFF; }

.grille-produits, .grille-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin: 24px 0; }
.carte-produit { border: 1.5px solid var(--cs-bordure); border-radius: 22px; overflow: hidden; padding-bottom: 18px; }
.carte-produit img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.carte-produit__titre, .carte-produit p { padding: 0 20px; }
.carte-produit__titre { font-size: 22px; margin: 16px 0 8px; }
.carte-produit__prix, .produit-offre__prix { font-family: var(--cs-police-titre); font-weight: 800; font-size: 24px; color: var(--cs-marine); }
.produit-entete { display: grid; grid-template-columns: 1fr; gap: 32px; margin: 32px 0; }
.produit-entete__visuels img { width: 100%; height: auto; border-radius: 22px; }
.produit-entete h1 { font-weight: 800; font-size: 44px; line-height: 1.06; letter-spacing: -0.02em; }
.produit-offre { padding: 24px; border: 1.5px solid var(--cs-bordure); border-radius: 22px; background: var(--cs-surface); }
.formulaire__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.formulaire-lead { background: var(--cs-surface); border-radius: 22px; padding: 32px; margin: 48px 0; }
.contact__grille { display: grid; grid-template-columns: 1fr; gap: 32px; }
.simulateur__carte { height: 280px; margin: 16px 0; border-radius: 16px; }
.simulateur__etape label, .simulateur__etape input, .simulateur__etape select { display: block; margin-bottom: 8px; }
.simulateur__etape fieldset label { display: inline-block; margin-right: 16px; }
.simulateur__erreur { color: #B91C1C; }
.panier__table { width: 100%; margin: 24px 0; }
.panier__table td, .panier__table th { padding: 10px; border-bottom: 1px solid var(--cs-bordure); }
.listing-produits__categories { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0; }
.listing-produits__categories [aria-current] { font-weight: 700; color: var(--cs-vert); }
.auteur__entete { display: flex; gap: 24px; align-items: flex-start; margin: 32px 0; }
.auteur__entete img { border-radius: 50%; }
main h1 { font-weight: 800; letter-spacing: -0.02em; }

@media (min-width: 992px) {
    .produit-entete { grid-template-columns: 3fr 2fr; }
    .contact__grille { grid-template-columns: 2fr 1fr; }
}

/* ══ Pages intérieures (maquettes Claude Design : fiches, listings, article,
 *    blog, simulateur) ══════════════════════════════════════════════════════ */

.cs-souligne { text-decoration: underline; }
.cs-menthe { color: var(--cs-menthe); }
.cs-texte--grand { font-size: 16px; line-height: 1.7; }
.cs-texte--grand p { margin: 0 0 14px; }
.cs-h2--marge { margin: 8px 0 28px; }
.cs-h2--32 { font-size: 32px; margin-bottom: 24px; }
.cs-section--fin { padding-bottom: 88px; }
.cs-espace-fin { height: 88px; }
.cs-grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cs-bouton--large { font-size: 17px; padding: 17px 22px; width: 100%; }
body .cs-bouton--blanc { background: #FFFFFF; width: 100%; }
.cs-pastille--blanche { background: #FFFFFF; color: var(--cs-marine); }

/* Une seule ligne, dernier élément tronqué : la hauteur ne dépend plus de la police (CLS, QSF-99). */
.cs-fil { padding-top: 18px; font-size: 13px; color: var(--cs-gris); display: flex; gap: 8px; white-space: nowrap; }
.cs-fil > span[aria-hidden] { flex: none; }
.cs-fil > a, .cs-fil > [aria-current] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cs-fil > [aria-current] { flex-shrink: 100; }
body .cs-fil a { color: var(--cs-gris); }
.cs-fil [aria-current] { color: var(--cs-marine); }

/* Formulaires et choix (boutons radio habillés) */
.cs-choix { display: flex; align-items: center; justify-content: center; text-align: center; gap: 12px; border: 1.5px solid var(--cs-bordure); background: #FFFFFF; border-radius: 12px; padding: 14px 8px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--cs-marine); transition: border-color .15s, background .15s; margin: 0; }
.cs-choix:hover { border-color: var(--cs-menthe); }
.cs-choix:has(input:checked) { border-color: var(--cs-menthe); background: var(--cs-menthe-pale); }
.cs-choix:has(input:focus-visible) { outline: 2px solid var(--cs-marine); outline-offset: 2px; }
.cs-choix--ligne { justify-content: space-between; text-align: left; border-radius: 14px; padding: 15px 16px; font-weight: 400; }
.cs-choix--ligne strong { font-size: 15px; }
.cs-choix__prix { font-size: 13px; color: var(--cs-vert); white-space: nowrap; }
.cs-choix--centre { flex-direction: column; gap: 2px; font-weight: 400; }
.cs-choix--pastille { border-radius: 999px; padding: 9px 13px; font-size: 13px; }
.cs-choix--pastille:has(input:checked) span::before { content: '✓ '; }
.cs-choix-liste { display: flex; flex-direction: column; gap: 8px; }
.cs-choix-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-choix-grille--2 { grid-template-columns: 1fr 1fr; }
.cs-choix-grille--4 { grid-template-columns: repeat(4, 1fr); }
.cs-choix-grille--5 { grid-template-columns: repeat(5, 1fr); }
.cs-choix-pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-devis input[type="text"], .cs-devis input[type="email"], .cs-devis input[type="tel"], .cs-devis textarea,
.cs-sim input[type="text"], .cs-sim input[type="email"], .cs-sim input[type="tel"],
.cs-recherche input {
    width: 100%; min-width: 0; border: 1px solid var(--cs-bordure-forte); border-radius: 12px; padding: 14px; font-size: 15px; font-family: inherit; color: var(--cs-marine); background: #FFFFFF;
}
.cs-devis .mb-3 { margin-bottom: 0 !important; }
.cs-case { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--cs-gris); line-height: 1.45; }
.cs-case .form-check { padding: 0; margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.cs-case .form-check-input { margin: 2px 0 0; float: none; flex: none; }
.cs-case--clair { color: var(--cs-bleu-clair); }
.cs-mention-donnees { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--cs-gris); }
.cs-mention-donnees a { color: inherit; text-decoration: underline; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset > legend { float: none; width: auto; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 700; }

/* Fiche produit : en-tête */
.cs-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start; padding-top: 20px; padding-bottom: 64px; }
.cs-fiche--panier { grid-template-columns: minmax(0, 1fr) 480px; }
.cs-fiche__principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
body .cs-fiche__titre { font-weight: 800; font-size: 50px; line-height: 1.04; letter-spacing: -0.03em; margin: 0; }
body .cs-fiche__titre--42 { font-size: 42px; }
.cs-galerie-fiche { display: flex; flex-direction: column; gap: 10px; }
.cs-galerie-fiche__vue { position: relative; aspect-ratio: 16 / 10; border-radius: 24px; background: var(--cs-photo) center / cover no-repeat; transition: background-image .2s; }
.cs-galerie-fiche__legende { position: absolute; top: 16px; left: 16px; background: #FFFFFF; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.cs-galerie-fiche__vignettes { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cs-galerie-fiche__vignettes::-webkit-scrollbar { display: none; }
.cs-galerie-fiche__vignettes .cs-vignette { flex: 0 0 calc((100% - 40px) / 5); scroll-snap-align: start; }
.cs-galerie-fiche__fleche { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--cs-marine); font-size: 18px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 44, 84, .18); }
.cs-galerie-fiche__fleche:hover { background: var(--cs-menthe); }
.cs-galerie-fiche__fleche--precedente { left: 14px; }
.cs-galerie-fiche__fleche--suivante { right: 14px; }
.cs-galerie-fiche__compteur { position: absolute; bottom: 14px; right: 14px; background: rgba(0, 44, 84, .75); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.cs-galerie-fiche__badge { position: absolute; top: 16px; left: 16px; background: var(--cs-marine); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; }
.cs-galerie-fiche__badge:empty { display: none; }
.cs-galerie-fiche--panier { position: sticky; top: 100px; align-self: start; }
.cs-galerie-fiche--panier .cs-galerie-fiche__vue { aspect-ratio: 1; }
.cs-vignette { aspect-ratio: 4 / 3; border-radius: 12px; border: 3px solid transparent; background: var(--cs-photo) center / cover no-repeat; cursor: pointer; padding: 0; }
.cs-vignette[aria-current="true"] { border-color: var(--cs-menthe); }
.cs-fiche__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cs-fiche__intro p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--cs-texte); }

/* Devis en étapes (fiche lead) */
.cs-devis { position: sticky; top: 100px; background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 24px; padding: 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -34px rgba(0, 44, 84, .45); }
.cs-devis__prix { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 18px; border-bottom: 1px dashed var(--cs-bordure); }
.cs-devis__prix strong { font-family: var(--cs-police-titre); font-size: 44px; letter-spacing: -0.03em; line-height: 1; }
.cs-devis__prix sup { font-size: 20px; }
.cs-devis__formulaire { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cs-devis__etape { display: flex; flex-direction: column; gap: 10px; }
.cs-devis__progression { display: none; flex-direction: column; gap: 12px; }
.cs-devis__formulaire--etapes .cs-devis__progression { display: flex; }
.cs-devis__progression-texte { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--cs-gris); }
.cs-devis__barre { height: 6px; background: #EDF1F3; border-radius: 3px; overflow: hidden; }
.cs-devis__barre > div { height: 100%; background: var(--cs-menthe); border-radius: 3px; transition: width .3s; }
.cs-devis__question { font-family: var(--cs-police-titre); font-size: 22px; line-height: 1.2; }
.cs-devis__libelle { font-size: 13px; font-weight: 700; }
.cs-devis__navigation { display: flex; gap: 8px; }
.cs-devis__navigation [hidden] { display: none; }
.cs-devis__formulaire:not(.cs-devis__formulaire--etapes) [data-etape-suivante],
.cs-devis__formulaire:not(.cs-devis__formulaire--etapes) [data-etape-precedente] { display: none; }
.cs-devis__suite { flex: 1; font-size: 16px; padding: 16px; }
.cs-devis__retour { padding: 0 18px; border-color: var(--cs-bordure); }
.cs-devis__mention { font-size: 12px; color: var(--cs-gris); text-align: center; }

/* Fiche lead : sections */
.cs-tailles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cs-taille { text-align: left; border: 2px solid var(--cs-bordure); background: #FFFFFF; border-radius: 20px; padding: 22px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; color: var(--cs-marine); font-family: inherit; transition: border-color .15s, transform .15s; }
.cs-taille:hover { border-color: var(--cs-menthe); transform: translateY(-3px); }
.cs-taille__pictogramme { height: 56px; display: flex; align-items: flex-end; }
.cs-taille__pictogramme span { background: var(--cs-menthe); border-radius: 4px 4px 0 0; }
.cs-taille__nom { font-family: var(--cs-police-titre); font-size: 22px; }
.cs-taille__pied { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px dashed var(--cs-bordure); }
.cs-taille__etat { font-size: 13px; font-weight: 700; color: var(--cs-vert); }
.cs-inclus { background: var(--cs-marine); border-radius: 28px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr 380px; color: var(--cs-bleu-clair); }
.cs-inclus__colonne { padding: 44px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.cs-inclus__colonne + .cs-inclus__colonne { padding-left: 0; }
.cs-inclus__titre { font-family: var(--cs-police-titre); font-size: 28px; line-height: 1.15; color: #FFFFFF; }
.cs-inclus__photo { background: var(--cs-photo) center / cover no-repeat; min-height: 260px; }
.cs-contenu-riche { font-size: 16px; line-height: 1.7; color: var(--cs-texte); }
.cs-contenu-riche h2 { font-family: var(--cs-police-titre); font-weight: 800; font-size: 32px; line-height: 1.12; letter-spacing: -0.02em; margin: 40px 0 14px; color: var(--cs-marine); }
.cs-contenu-riche h3 { font-family: var(--cs-police-titre); font-size: 22px; margin: 28px 0 10px; color: var(--cs-marine); }
.cs-contenu-riche img { max-width: 100%; height: auto; border-radius: 18px; }
.cs-contenu-riche a { color: var(--cs-vert); text-decoration: underline; }
.cs-contenu-riche .btn { text-decoration: none; }

/* Tableaux des contenus (caractéristiques techniques) : carte arrondie, 1re colonne en libellé,
   lignes zébrées ; défilement horizontal sur mobile plutôt qu'un tableau écrasé. */
.cs-contenu-riche figure:has(> table) { margin: 8px 0 32px; overflow-x: auto; border: 1px solid var(--cs-bordure); border-radius: 18px; background: #FFFFFF; }
.cs-contenu-riche table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.cs-contenu-riche th, .cs-contenu-riche td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--cs-bordure); }
.cs-contenu-riche tr:last-child td { border-bottom: 0; }
.cs-contenu-riche thead th { background: var(--cs-marine); color: #FFFFFF; font-family: var(--cs-police-titre); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.cs-contenu-riche tbody tr:nth-child(even) { background: var(--cs-surface); }
.cs-contenu-riche tbody th[scope="row"] { width: 32%; color: var(--cs-marine); font-weight: 600; font-family: inherit; font-size: inherit; background: none; }
.cs-contenu-riche td strong { color: var(--cs-marine); }

/* ── FAQ en cartes (maquette « FAQ Produit Options », F1) ───────────────────
   Section d'une fiche produit (.cs-faq-cartes) et blocs FAQ de l'éditeur dans
   les contenus (.pb-faq) : réponses visibles d'emblée, « ? » avant la question.
   Grille de 6 colonnes : 3 cartes par ligne ; 4 cartes → 2 par ligne ; une
   dernière ligne incomplète s'étale sur toute la largeur (5 = 3 + 2). */
.cs-faq-cartes { display: flex; flex-direction: column; gap: 28px; }
.cs-faq-cartes__tete { display: flex; gap: 18px; align-items: center; }
.cs-faq-cartes__tete .cs-h2 { margin: 6px 0 0; font-size: 36px; }
.cs-faq-cartes__vignette { width: 76px; height: 76px; flex: none; border-radius: 18px; background: #DDE5E8 center / cover no-repeat; }
.cs-faq-cartes__grille, .cs-contenu-riche .pb-faq { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 8px 0 32px; }
.cs-faq-cartes__grille > *, .cs-contenu-riche .pb-faq > * { grid-column: span 2; }
.cs-faq-cartes__grille > :nth-child(3n+1):last-child, .cs-contenu-riche .pb-faq > :nth-child(3n+1):last-child { grid-column: span 6; }
.cs-faq-cartes__grille > :nth-child(3n+1):nth-last-child(2), .cs-faq-cartes__grille > :nth-child(3n+2):last-child,
.cs-contenu-riche .pb-faq > :nth-child(3n+1):nth-last-child(2), .cs-contenu-riche .pb-faq > :nth-child(3n+2):last-child { grid-column: span 3; }
.cs-faq-cartes__grille:has(> :nth-child(4):last-child) > *, .cs-contenu-riche .pb-faq:has(> :nth-child(4):last-child) > * { grid-column: span 3; }
.cs-faq-carte, .cs-contenu-riche .pb-faq-item { background: var(--cs-surface); border: 0; border-radius: 22px; padding: 26px; margin: 0; display: flex; flex-direction: column; gap: 12px; overflow: visible; }
.cs-faq-carte__question, .cs-contenu-riche .pb-faq-q { display: flex; justify-content: flex-start; gap: 14px; align-items: flex-start; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-family: var(--cs-police-titre); font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--cs-marine); cursor: default; pointer-events: none; }
.cs-faq-carte__picto, .cs-contenu-riche .pb-faq-q::before { content: '?'; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--cs-marine); color: #FFFFFF; font: 800 16px var(--cs-police-titre); display: flex; align-items: center; justify-content: center; margin-top: -5px; }
.cs-contenu-riche .pb-faq-q::after { content: none; }
.cs-faq-carte__reponse, .cs-contenu-riche .pb-faq-a, .cs-contenu-riche .pb-faq-item.open .pb-faq-a { margin: 0; padding: 0 0 0 50px; max-height: none; overflow: visible; font-size: 15px; line-height: 1.6; color: var(--cs-texte); }
/* Dans une colonne étroite (article), une carte par ligne. */
.cs-contenu-riche { container-type: inline-size; }
@container (max-width: 760px) {
    .cs-contenu-riche .pb-faq { grid-template-columns: 1fr; }
    .cs-contenu-riche .pb-faq > * { grid-column: auto !important; }
}
.cs-appel-final { padding-bottom: 88px; }
.cs-appel-final__carte { background: var(--cs-menthe-pale); border-radius: 28px; padding: 40px 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cs-appel-final__titre { font-family: var(--cs-police-titre); font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.cs-appel-final .cs-actions { margin-top: 0; }

/* Fiche panier */
.cs-configurateur { display: flex; flex-direction: column; gap: 22px; }
.cs-configurateur__tete { display: flex; flex-direction: column; gap: 10px; }
.cs-configurateur__tete .cs-texte { margin: 0; font-size: 16px; }
.cs-configurateur__formulaire { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.cs-configurateur__groupe { display: flex; flex-direction: column; gap: 10px; }
.cs-options { display: flex; flex-direction: column; gap: 8px; }
.cs-option { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; border: 1.5px solid var(--cs-bordure); border-radius: 12px; padding: 13px 14px; cursor: pointer; font-size: 14px; margin: 0; }
.cs-option:has(input:checked) { border-color: var(--cs-menthe); background: var(--cs-menthe-pale); }
.cs-option input { width: 20px; height: 20px; accent-color: var(--cs-marine); margin: 0; }
.cs-option__prix { font-size: 13px; white-space: nowrap; }
.cs-total { background: var(--cs-surface); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cs-total__ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.cs-total__prix { font-family: var(--cs-police-titre); font-size: 42px; letter-spacing: -0.03em; line-height: 1; }
.cs-total__atouts { font-size: 13px; color: var(--cs-vert); font-weight: 700; text-align: right; line-height: 1.5; }
.cs-question { display: flex; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--cs-bordure); border-radius: 16px; font-size: 14px; line-height: 1.5; }
.cs-question__icone { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--cs-menthe); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.cs-onglets__liste { display: flex; gap: 6px; border-bottom: 1px solid var(--cs-bordure); overflow-x: auto; }
.cs-onglets__liste button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 14px 18px; font-weight: 700; font-size: 16px; cursor: pointer; color: var(--cs-marine); margin-bottom: -1px; white-space: nowrap; }
.cs-onglets__liste button[aria-selected="true"] { border-bottom-color: var(--cs-menthe); }
.cs-onglets__panneau { padding-top: 32px; }
.cs-onglets__deux { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.cs-onglets__photo { aspect-ratio: 16 / 10; border-radius: 20px; background: var(--cs-photo) center / cover no-repeat; }
.cs-carte-similaire { border: 1.5px solid var(--cs-bordure); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; }
.cs-carte-similaire:hover { border-color: var(--cs-menthe); }
.cs-carte-similaire__photo { aspect-ratio: 4 / 3; background: var(--cs-photo) center / cover no-repeat; }
.cs-carte-similaire__corps { padding: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 17px; }
.cs-carte-similaire__prix { font-family: var(--cs-police-titre); font-size: 20px; margin-top: 4px; }

/* Listing produits */
.cs-listing-tete { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding-top: 24px; padding-bottom: 28px; }
.cs-listing-tete__intro { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: var(--cs-texte); max-width: 720px; }
.cs-listing-tete__intro p { margin: 0; }
.cs-listing-tete__categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body .cs-listing-tete__categories a { border: 1.5px solid var(--cs-bordure); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 14px; }
body .cs-listing-tete__categories a[aria-current] { border-color: var(--cs-marine); background: var(--cs-marine); color: #FFFFFF; }
.cs-filtres { position: sticky; top: 84px; z-index: 5; background: #FFFFFF; border-top: 1px solid var(--cs-bordure); border-bottom: 1px solid var(--cs-bordure); }
.cs-filtres__barre { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.cs-filtres__groupes { display: flex; flex-wrap: wrap; gap: 20px; }
.cs-filtres__groupe { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-filtres__libelle { font-size: 13px; font-weight: 700; color: var(--cs-gris); margin-right: 4px; }
.cs-filtres__groupe button { border: 1.5px solid var(--cs-bordure); background: #FFFFFF; color: var(--cs-marine); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 14px; }
.cs-filtres__groupe button[aria-pressed="true"] { border-color: var(--cs-marine); background: var(--cs-marine); color: #FFFFFF; }
.cs-filtres__compte { font-size: 14px; color: var(--cs-gris); white-space: nowrap; }
.cs-grille-produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 32px; }
.cs-grille-produits__vide { grid-column: 1 / -1; }
.cs-grille-produits__vide button { background: none; border: 0; padding: 0; cursor: pointer; }
.cs-carte-produit { border: 1.5px solid var(--cs-bordure); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cs-carte-produit[hidden] { display: none; }
.cs-carte-produit:hover { transform: translateY(-4px); border-color: var(--cs-menthe); box-shadow: 0 22px 40px -24px rgba(0, 44, 84, .45); }
.cs-carte-produit__photo { position: relative; aspect-ratio: 4 / 3; background: var(--cs-photo) center / cover no-repeat; display: block; }
.cs-carte-produit__pastilles { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 6px; }
.cs-carte-produit__corps { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cs-carte-produit__infos { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-carte-produit__infos span { font-size: 12px; font-weight: 700; color: var(--cs-texte); background: var(--cs-surface); border-radius: 999px; padding: 5px 10px; }
body .cs-carte-produit__nom { font-family: var(--cs-police-titre); font-size: 23px; letter-spacing: -0.01em; font-weight: 700; }
.cs-carte-produit__pied { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--cs-bordure); }
.cs-carte-produit__pied strong { font-family: var(--cs-police-titre); font-size: 26px; letter-spacing: -0.02em; }
.cs-carte-produit__pied .cs-bouton { padding: 12px 18px; }
.cs-projet-specifique { grid-column: 1 / -1; background: var(--cs-marine); border-radius: 22px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--cs-bleu-clair); }
.cs-projet-specifique > div { display: flex; flex-direction: column; gap: 6px; }
.cs-projet-specifique strong { font-family: var(--cs-police-titre); font-size: 24px; color: #FFFFFF; }
.cs-comparatif { overflow-x: auto; border: 1px solid var(--cs-bordure); border-radius: 20px; }
.cs-comparatif table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cs-comparatif th, .cs-comparatif td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--cs-bordure); }
.cs-comparatif thead th { background: var(--cs-surface); font-family: var(--cs-police-titre); font-size: 16px; }
.cs-comparatif tbody th { color: var(--cs-gris); font-weight: 600; }
.cs-comparatif tr:last-child th, .cs-comparatif tr:last-child td { border-bottom: 0; }

/* Article */
.cs-article-tete { max-width: 920px; padding-top: 28px; display: flex; flex-direction: column; gap: 16px; }
body .cs-article-tete__titre { font-weight: 800; font-size: 48px; line-height: 1.06; letter-spacing: -0.03em; margin: 0; }
.cs-article-tete__chapo { margin: 0; font-size: 19px; line-height: 1.6; color: var(--cs-texte); }
.cs-article-tete__meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.cs-article-tete__separateur { width: 1px; height: 28px; background: var(--cs-bordure); }
.cs-auteur-ligne { display: flex; gap: 10px; align-items: center; line-height: 1.3; }
.cs-auteur-ligne img { border-radius: 50%; }
.cs-auteur-ligne .cs-avatar { width: 40px; height: 40px; font-size: 16px; }
.cs-article-visuel { width: 100%; max-height: 520px; object-fit: cover; border-radius: 24px; margin-top: 28px; display: block; }
.cs-article { display: grid; grid-template-columns: 220px minmax(0, 720px) 300px; justify-content: space-between; gap: 40px; padding-top: 40px; align-items: start; }
.cs-article__sommaire { position: sticky; top: 100px; }
.cs-article__sommaire summary { font-weight: 800; font-family: var(--cs-police-titre); font-size: 15px; list-style: none; margin-bottom: 12px; cursor: pointer; }
.cs-article__sommaire nav { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--cs-bordure); }
body .cs-article__sommaire nav a { padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; font-size: 14px; color: var(--cs-texte); line-height: 1.4; }
body .cs-article__sommaire nav a:hover { border-left-color: var(--cs-menthe); color: var(--cs-marine); }
.cs-article__corps { min-width: 0; }
.cs-contenu-riche--article { font-size: 17px; line-height: 1.75; }
.cs-contenu-riche--article h2 { scroll-margin-top: 110px; font-size: 30px; }
.cs-essentiel { background: var(--cs-menthe-pale); border-left: 4px solid var(--cs-menthe); border-radius: 0 16px 16px 0; padding: 20px 22px; font-size: 16px; line-height: 1.6; margin-bottom: 28px; }
.cs-essentiel > strong { display: block; font-family: var(--cs-police-titre); margin-bottom: 6px; }
.cs-encart-produit { display: grid; grid-template-columns: 200px 1fr; border: 1.5px solid var(--cs-bordure); border-radius: 20px; overflow: hidden; margin: 32px 0; text-decoration: none !important; }
.cs-encart-produit:hover { border-color: var(--cs-menthe); }
.cs-encart-produit__photo { background: var(--cs-photo) center / cover no-repeat; min-height: 180px; }
.cs-encart-produit__texte { padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.cs-encart-produit__texte strong { font-family: var(--cs-police-titre); font-size: 21px; line-height: 1.2; color: var(--cs-marine); }
.cs-carte-auteur { display: flex; gap: 16px; align-items: flex-start; padding: 24px; margin-top: 40px; border: 1px solid var(--cs-bordure); border-radius: 20px; background: var(--cs-surface); line-height: 1.5; }
.cs-carte-auteur img { border-radius: 50%; flex: none; }
.cs-avatar--64 { width: 64px; height: 64px; font-size: 24px; }
.cs-article__appel { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; }
.cs-appel-lateral { border: 1px solid var(--cs-bordure); border-radius: 20px; overflow: hidden; }
.cs-appel-lateral__photo { display: block; aspect-ratio: 16 / 10; background: var(--cs-photo) center / cover no-repeat; }
.cs-appel-lateral__corps { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cs-appel-lateral__corps > strong { font-family: var(--cs-police-titre); font-size: 20px; line-height: 1.2; }
.cs-appel-rappel { background: var(--cs-marine); color: #FFFFFF; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cs-appel-rappel__ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cs-appel-rappel input[type="tel"] { min-width: 0; border: 0; border-radius: 999px; padding: 12px 14px; font-size: 15px; font-family: inherit; }
body .cs-appel-rappel .cs-bouton--marine { background: var(--cs-menthe); color: var(--cs-marine); }

/* Cartes d'articles, blog */
.cs-grille-3--articles { gap: 36px 24px; }
.cs-carte-article { display: flex; flex-direction: column; gap: 10px; }
.cs-carte-article:hover { opacity: .92; }
.cs-carte-article__photo { aspect-ratio: 16 / 10; border-radius: 18px; background: var(--cs-photo) center / cover no-repeat; }
.cs-carte-article__rubrique { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-vert); }
.cs-carte-article__titre { font-family: var(--cs-police-titre); font-size: 21px; line-height: 1.25; }
.cs-blog-tete { background: var(--cs-surface); padding: 56px 0 28px; }
.cs-blog-tete__grille { display: grid; grid-template-columns: 1fr 420px; gap: 40px; align-items: end; }
.cs-blog-tete__intro { margin: 12px 0 0; font-size: 18px; line-height: 1.6; color: var(--cs-texte); max-width: 640px; }
.cs-recherche { position: relative; }
.cs-recherche input { border-radius: 999px; padding: 16px 20px; }
.cs-recherche--carre input { border-radius: 12px; padding: 14px; }
.cs-recherche__resultats { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 16px; box-shadow: 0 20px 40px -20px rgba(0, 44, 84, .4); padding: 8px; display: flex; flex-direction: column; }
.cs-recherche__resultats a, .cs-recherche__resultats button, .cs-recherche__resultats span { text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--cs-marine); cursor: pointer; }
.cs-recherche__resultats a:hover, .cs-recherche__resultats button:hover { background: var(--cs-surface); }
.cs-rubriques { position: sticky; top: 84px; z-index: 5; background: #FFFFFF; border-bottom: 1px solid var(--cs-bordure); }
.cs-rubriques__liste { display: flex; gap: 8px; padding-top: 20px; padding-bottom: 20px; overflow-x: auto; }
body .cs-rubriques__liste a { border: 1.5px solid var(--cs-bordure); border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 14px; white-space: nowrap; }
body .cs-rubriques__liste a[aria-current] { border-color: var(--cs-marine); background: var(--cs-marine); color: #FFFFFF; }
.cs-blog-une { padding-top: 36px; }
.cs-article-une { display: grid; grid-template-columns: 1.3fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--cs-bordure); }
.cs-article-une:hover { border-color: var(--cs-menthe); }
.cs-article-une__photo { background: var(--cs-photo) center / cover no-repeat; min-height: 380px; }
.cs-article-une__texte { padding: 40px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cs-article-une__titre { font-family: var(--cs-police-titre); font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; }
.cs-blog-grille { padding-top: 44px; }
.cs-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.cs-pagination a, .cs-pagination span { min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cs-bordure); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.cs-pagination span[aria-current] { background: var(--cs-marine); border-color: var(--cs-marine); color: #FFFFFF; }

/* Simulateur */
.cs-sim-tete { padding: 56px 0 36px; background: linear-gradient(180deg, #FFFFFF, var(--cs-surface)); text-align: center; }
.cs-sim-tete .cs-conteneur { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cs-sim-tete .cs-fiche__titre { max-width: 860px; font-size: 52px; }
.cs-sim-tete__intro { margin: 0; font-size: 18px; line-height: 1.6; color: var(--cs-texte); max-width: 640px; }
.cs-coches--centre { justify-content: center; gap: 22px; }
.cs-sim-tete__enrichissement { margin: 6px 0 0; background: var(--cs-menthe-pale); border-radius: 14px; padding: 12px 18px; font-weight: 600; color: var(--cs-vert); max-width: 720px; }
.cs-sim { background: var(--cs-surface); padding-bottom: 72px; }
.cs-sim__grille { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; margin: 0 auto; }
.cs-sim__etapes { background: #FFFFFF; border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 100px; }
.cs-sim__etape { display: flex; gap: 12px; align-items: center; border: 0; background: transparent; border-radius: 14px; padding: 12px; cursor: pointer; text-align: left; color: var(--cs-marine); font-family: inherit; }
.cs-sim__etape:disabled { cursor: default; opacity: .7; }
.cs-sim__etape[aria-current="step"] { background: var(--cs-menthe-pale); }
.cs-sim__pastille { width: 34px; height: 34px; flex: none; border-radius: 50%; background: #EDF1F3; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-sim__etape[aria-current="step"] .cs-sim__pastille, .cs-sim__etape:not(:disabled) .cs-sim__pastille { background: var(--cs-menthe); }
.cs-sim__aide { margin-top: 10px; padding: 14px; border-top: 1px solid var(--cs-bordure); font-size: 13px; color: var(--cs-gris); line-height: 1.5; }
.cs-sim__ecran { background: #FFFFFF; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 16px; min-height: 520px; box-shadow: 0 24px 50px -34px rgba(0, 44, 84, .35); }
.cs-sim__panneau { display: flex; flex-direction: column; gap: 16px; }
.cs-sim__panneau[hidden] { display: none; }
.cs-sim__question { font-family: var(--cs-police-titre); font-size: 26px; }
.cs-sim__carte { aspect-ratio: 16 / 7; border-radius: 16px; background: repeating-linear-gradient(135deg, var(--cs-bordure) 0 12px, #EDF1F3 12px 24px); z-index: 0; }
.cs-sim__chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cs-sim__chiffre { background: var(--cs-surface); border-radius: 16px; padding: 18px; font-size: 13px; color: var(--cs-texte); }
.cs-sim__chiffre--accent { background: var(--cs-menthe-pale); }
.cs-sim__chiffre strong { font-family: var(--cs-police-titre); font-size: 30px; color: var(--cs-marine); }
.cs-sim__modele { display: grid; grid-template-columns: 140px 1fr auto; gap: 14px; align-items: center; border: 1.5px solid var(--cs-bordure); border-radius: 16px; overflow: hidden; padding-right: 16px; }
.cs-sim__modele[hidden] { display: none; }
.cs-sim__modele:hover { border-color: var(--cs-menthe); }
.cs-sim__modele-photo { height: 100px; background: var(--cs-photo) url('../images/site/carport-2-places-bois.jpg') center / cover no-repeat; }
.cs-sim__etude { background: var(--cs-marine); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--cs-bleu-clair); font-size: 14px; }
.cs-sim__etude[hidden] { display: none; }
.cs-sim__etude-titre { font-family: var(--cs-police-titre); font-size: 20px; color: #FFFFFF; }
.cs-sim__etude-champs { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.cs-sim__etude-champs--seul { grid-template-columns: auto; justify-content: start; }
.cs-sim__grille-detaillee { display: flex; flex-direction: column; gap: 16px; }
.cs-sim__grille-detaillee[hidden] { display: none; }
.cs-sim__grille-detaillee .cs-bouton { align-self: flex-start; }
.cs-sim__detail { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.cs-sim__detail > div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cs-bordure); font-size: 15px; }
.cs-sim__detail dt { font-weight: 400; color: var(--cs-gris); }
.cs-sim__detail dd { margin: 0; font-weight: 700; text-align: right; }
.cs-sim__erreur { margin: 0; color: #B91C1C; font-weight: 600; }
.cs-sim__navigation { display: flex; justify-content: space-between; gap: 10px; padding-top: 6px; margin-top: auto; }
.cs-sim__navigation [hidden] { display: none; }

/* Remerciement */
.cs-merci { padding: 64px 0 88px; }
.cs-merci .front-container { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; max-width: 880px; }
.cs-merci__coche { width: 64px; height: 64px; border-radius: 50%; background: var(--cs-menthe); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 800; }
.cs-merci__simulation { background: var(--cs-menthe-pale); border-radius: 24px; padding: 28px 32px; display: flex; gap: 24px; align-items: center; justify-content: space-between; width: 100%; margin: 12px 0; }
.cs-merci__simulation > div { display: flex; flex-direction: column; gap: 8px; }
.cs-merci__simulation-titre { font-family: var(--cs-police-titre); font-size: 26px; line-height: 1.15; }

/* ── Tablette ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    :root { --cs-marge: 24px; }
    .cs-nav, body .cs-entete__tel, body .cs-entete__cta { display: none; }
    .cs-entete__mobile { display: flex; }
    .cs-mega { display: none !important; }
    .cs-hero { grid-template-columns: 1fr; }
    .cs-labels__grille { grid-template-columns: repeat(2, 1fr); }
    .cs-video, .cs-pro, .cs-avis, .cs-faq, .cs-simulateur-appel { grid-template-columns: 1fr; }
    .cs-grille-4 { grid-template-columns: repeat(2, 1fr); }
    .cs-pied__grille { grid-template-columns: repeat(3, 1fr); }
    .cs-rappel { grid-column: 1 / -1; }
    .cs-preuves { grid-template-columns: repeat(2, 1fr); }
    .cs-fiche, .cs-fiche--panier { grid-template-columns: 1fr; }
    .cs-devis, .cs-galerie-fiche--panier, .cs-article__sommaire, .cs-article__appel, .cs-sim__etapes { position: static; }
    .cs-tailles { grid-template-columns: repeat(2, 1fr); }
    .cs-grille-2, .cs-onglets__deux { grid-template-columns: 1fr; }
    .cs-inclus { grid-template-columns: 1fr 1fr; }
    .cs-inclus__photo { display: none; }
    .cs-grille-produits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-article { grid-template-columns: minmax(0, 1fr); }
    .cs-article__appel { display: none; }
    .cs-blog-tete__grille, .cs-article-une, .cs-sim__grille { grid-template-columns: 1fr; }
    .cs-sim__etapes { flex-direction: row; overflow-x: auto; }
    .cs-sim__aide { display: none; }
    .cs-filtres, .cs-rubriques { top: 64px; }
}

/* ── Mobile (maquette 390 px) ─────────────────────────────────────────── */

@media (max-width: 760px) {
    :root { --cs-marge: 16px; }
    body { padding-bottom: 68px; } /* place de la barre d'action fixe */
    .cs-entete__barre { height: 64px; padding: 0 16px; }
    .cs-entete__logo img { height: 32px; }
    .cs-mega { top: 64px; }

    .cs-barre-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 60;
        padding: 10px 12px;
        background: #FFFFFF;
        border-top: 1px solid var(--cs-bordure);
        box-shadow: 0 -8px 20px -12px rgba(0, 44, 84, .25);
    }
    .cs-barre-mobile .cs-bouton { padding: 13px; }

    .cs-hero { padding-top: 22px; gap: 14px; }
    .cs-hero__texte { gap: 14px; }
    .cs-hero__intro, .cs-coches { display: none; }
    body .cs-hero__titre { font-size: 32px; line-height: 1.06; letter-spacing: -0.02em; }
    .cs-avis-ligne { font-size: 13px; gap: 8px; }
    .cs-mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 110px 110px; gap: 8px; }
    .cs-mosaique .cs-tuile--grande { grid-column: span 2; grid-row: span 1; }
    .cs-tuile { border-radius: 14px; padding: 10px; }
    .cs-tuile .cs-pastille { font-size: 10px; padding: 4px 7px; }
    .cs-tuile__libelle { font-size: 13px; padding: 4px 8px; border-radius: 6px; }

    .cs-aiguillage { grid-template-columns: 1fr; gap: 10px; padding-top: 18px; padding-bottom: 24px; }
    .cs-aiguille { border-radius: 16px; padding: 16px 18px; align-items: center; gap: 12px; }
    .cs-aiguille .cs-surtitre { font-size: 11px; }
    .cs-aiguille__titre { font-size: 17px; line-height: 1.25; }
    .cs-aiguille__desc { display: none; }
    .cs-aiguille .cs-rond { width: 40px; height: 40px; font-size: 16px; }

    .cs-labels { padding: 24px 0; }
    .cs-labels__grille { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
    .cs-label__logo { width: 40px; height: 40px; }
    .cs-label strong { font-size: 13px; }
    .cs-label .cs-gris { font-size: 11px; }

    .cs-section { padding-top: 48px; }
    .cs-section__tete { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
    .cs-h2, .cs-h2--38, .cs-h2--36 { font-size: 28px; line-height: 1.1; }
    .cs-surtitre { font-size: 12px; }
    .cs-grille-3, .cs-grille-3--large { grid-template-columns: 1fr; gap: 14px; }
    .cs-carte-avantage { border-radius: 16px; padding: 18px; gap: 8px; }
    .cs-carte-avantage__titre { font-size: 20px; }
    .cs-carte-avantage__titre br { display: none; }
    .cs-numero { display: none; }
    .cs-actions--droite { justify-content: stretch; }
    .cs-actions--droite .cs-bouton--contour { display: none; }
    .cs-actions--droite .cs-bouton { width: 100%; }

    .cs-video { gap: 12px; }
    .cs-video__lecteur { border-radius: 16px; }
    .cs-video__play { width: 64px; height: 64px; }
    .cs-video__play::after { left: 25px; top: 20px; border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
    .cs-video__texte .cs-surtitre, .cs-video__texte .cs-texte, .cs-video__texte .cs-bouton { display: none; }
    .cs-video__texte .cs-h2 { font-size: 20px; }

    .cs-modele { display: grid; grid-template-columns: 118px 1fr; border-radius: 16px; }
    .cs-modele__photo { aspect-ratio: auto; min-height: 118px; }
    .cs-modele__kwc { display: none; }
    .cs-modele__corps { padding: 14px; gap: 4px; }
    .cs-modele__nom { font-size: 16px; }
    .cs-modele__corps > .cs-texte { display: none; }
    .cs-modele__prix { border-top: 0; padding-top: 0; }
    .cs-modele__prix strong { font-size: 20px; }
    .cs-modele__prix .cs-rond { display: none; }

    .cs-pro { border-radius: 0; margin: 0 calc(-1 * var(--cs-marge)); }
    .cs-pro__photos { grid-template-rows: 200px; }
    .cs-pro__photo:not(.cs-pro__photo--large) { display: none; }
    .cs-pro__texte { padding: 24px 16px 28px; gap: 12px; font-size: 15px; }
    .cs-liste-coches { display: none; }
    .cs-pro__texte .cs-actions .cs-bouton--contour-clair { display: none; }
    .cs-pro__texte .cs-actions .cs-bouton { width: 100%; }

    .cs-avis { gap: 14px; }
    .cs-avis__synthese { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; }
    .cs-avis__synthese .cs-surtitre, .cs-avis__synthese .cs-lien-souligne { display: none; }
    .cs-avis__note strong { font-size: 52px; }
    .cs-avis__note span { display: none; }
    .cs-avis__piste { grid-auto-columns: 100%; }

    .cs-galerie { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 140px; gap: 8px; }
    .cs-galerie .cs-tuile--grande { grid-column: span 2; grid-row: span 1; }
    .cs-galerie .cs-tuile { border-radius: 14px; }

    .cs-etapes { margin-top: 48px; padding: 40px 0; }
    .cs-etapes__titre { margin-bottom: 18px; }
    .cs-grille-4 { grid-template-columns: 1fr; gap: 12px; }
    .cs-etape { border-radius: 14px; padding: 16px; display: grid; grid-template-columns: 36px 1fr; gap: 4px 12px; }
    .cs-etape__tete { grid-row: span 2; }
    .cs-etape__trait { display: none; }
    .cs-etape .cs-rond--42 { width: 36px; height: 36px; font-size: 15px; }
    .cs-etape__titre { font-size: 16px; }
    .cs-etape .cs-texte { font-size: 14px; }

    .cs-simulateur-appel { border-radius: 20px; }
    .cs-simulateur-appel__texte { padding: 22px; gap: 10px; }
    .cs-simulateur-appel__texte .cs-surtitre { display: none; }
    .cs-simulateur-appel__texte .cs-h2 { font-size: 22px; }
    .cs-simulateur-appel__texte .cs-bouton { width: 100%; }
    .cs-simulateur-appel__photo { display: none; }

    .cs-faq { padding-bottom: 64px; gap: 10px; }
    .cs-faq__intro .cs-surtitre, .cs-faq__intro p, .cs-faq__intro .cs-lien-accent, .cs-faq__tel { display: none; }
    .cs-faq__item summary { font-size: 15px; padding: 16px 0; }
    .cs-faq__item p { font-size: 14px; }

    .cs-preuves { padding: 18px 16px; gap: 12px; }
    .cs-preuve:nth-child(n+3) { display: none; }
    .cs-preuve__pastille { display: none; }
    .cs-preuve { font-size: 13px; }
    .cs-pied { padding: 22px 16px 20px; }
    .cs-pied__grille { grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 16px; }
    .cs-rappel { order: -1; border-radius: 16px; padding: 18px; }
    .cs-rappel__titre { font-size: 19px; }
    .cs-rappel__formulaire { grid-template-columns: 1fr; }
    .cs-pied__logo { height: 34px; margin-bottom: 10px; }
    .cs-pied__colonne { padding-top: 44px; } /* aligné sous le logo de la 1re colonne */
    .cs-pied__colonne--logo { padding-top: 0; }
    .cs-pied__grille > .cs-pied__colonne:nth-last-child(2) { display: none; } /* « À propos » */
    .cs-pied__bas { flex-direction: column-reverse; gap: 10px; font-size: 12px; }

    body .cs-fiche__titre, .cs-sim-tete .cs-fiche__titre { font-size: 30px; line-height: 1.08; }
    body .cs-article-tete__titre { font-size: 30px; }
    .cs-fiche { gap: 20px; padding-bottom: 36px; }
    .cs-fiche__intro, .cs-grille-champs, .cs-tailles, .cs-inclus, .cs-grille-produits, .cs-sim__chiffres, .cs-sim__detail, .cs-sim__etude-champs { grid-template-columns: 1fr; }
    .cs-inclus__colonne { padding: 24px; }
    .cs-inclus__colonne + .cs-inclus__colonne { padding: 0 24px 24px; }
    .cs-devis { padding: 18px; border-radius: 20px; }
    .cs-devis__prix strong, .cs-total__prix { font-size: 34px; }
    .cs-galerie-fiche__vignettes .cs-vignette { flex-basis: calc((100% - 20px) / 3.4); }
    .cs-galerie-fiche__fleche { width: 38px; height: 38px; }
    .cs-choix-grille--5 { grid-template-columns: repeat(3, 1fr); }
    .cs-choix-grille--4 { grid-template-columns: 1fr 1fr; }
    .cs-appel-final__carte, .cs-projet-specifique, .cs-merci__simulation { flex-direction: column; align-items: flex-start; padding: 24px; }
    .cs-appel-final__titre { font-size: 24px; }
    .cs-listing-tete { grid-template-columns: 1fr; }
    .cs-filtres__barre { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cs-filtres__groupes { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 14px; }
    .cs-filtres__groupe { flex-wrap: nowrap; }
    .cs-encart-produit { grid-template-columns: 1fr; }
    .cs-encart-produit__photo { min-height: 140px; }
    .cs-article-une__photo { min-height: 200px; }
    .cs-article-une__texte { padding: 22px; }
    .cs-article-une__titre { font-size: 24px; }
    .cs-blog-tete { padding: 28px 0 16px; }
    .cs-sim__ecran { padding: 20px; min-height: 0; }
    .cs-sim__etape > span:last-child { display: none; }
    .cs-sim__modele { grid-template-columns: 90px 1fr auto; }
    .cs-pied__legal { gap: 8px 16px; }
}

/* ══ Pages Contact, Auteur, Juridique, Qui sommes-nous, techniques ═══════
   Maquettes Claude Design du 2026-10-06 (CT1, AU1, J1, Q1, 404, MAINT). */

/* ── Contact (CT1) ─────────────────────────────────────────────────────── */
.cs-contact-tete { padding-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.cs-contact-tete .cs-texte { margin: 0; font-size: 18px; }
.cs-contact-entrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 32px; }
body .cs-contact-entree { border: 1.5px solid var(--cs-bordure); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 6px; background: #FFFFFF; color: var(--cs-marine); }
body .cs-contact-entree:hover { border-color: var(--cs-menthe); color: var(--cs-marine); }
body .cs-contact-entree--accent { border-color: var(--cs-menthe); background: var(--cs-menthe-pale); }
.cs-contact-entree__titre { font-family: var(--cs-police-titre); font-size: 22px; }
.cs-contact-entree__titre--tel { font-size: 26px; }
.cs-contact { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; padding-top: 40px; }
.cs-contact__formulaire { border: 1px solid var(--cs-bordure); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.cs-contact__formulaire .mb-3 { margin: 0 !important; }
.cs-contact__formulaire [hidden] { display: none !important; }
.cs-contact__formulaire .form-control { border: 1px solid var(--cs-bordure-forte); border-radius: 12px; padding: 14px; font-size: 15px; color: var(--cs-marine); }
.cs-contact__titre { font-family: var(--cs-police-titre); font-size: 26px; }
.cs-contact__groupe { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-contact__groupe legend { float: none; margin: 0 0 8px; }
.cs-contact__aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.cs-contact__coordonnees { border-radius: 22px; overflow: hidden; background: var(--cs-marine); color: var(--cs-bleu-clair); }
.cs-contact__photo { display: block; aspect-ratio: 16 / 10; background: var(--cs-photo) center / cover no-repeat; }
.cs-contact__coordonnees-texte { padding: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.5; }
.cs-contact__coordonnees-texte strong { color: #FFFFFF; }
.cs-contact__coordonnees-texte > strong:first-child { font-size: 17px; }
.cs-contact__reponses { background: var(--cs-surface); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
body .cs-contact__reponses a { color: var(--cs-vert); font-weight: 600; }

/* ── Auteur (AU1) ──────────────────────────────────────────────────────── */
.cs-auteur { display: grid; grid-template-columns: 200px 1fr 320px; gap: 40px; align-items: start; padding-top: 32px; padding-bottom: 56px; }
.cs-auteur__portrait { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.cs-auteur__portrait--initiale { display: flex; align-items: center; justify-content: center; background: var(--cs-vert); color: #FFFFFF; font: 700 80px var(--cs-police-titre); }
.cs-auteur__texte { display: flex; flex-direction: column; gap: 14px; }
.cs-auteur__fonction { font-size: 18px; font-weight: 600; color: var(--cs-texte); }
.cs-auteur__bio { font-size: 17px; line-height: 1.7; color: #24323F; max-width: 640px; }
.cs-auteur__bio p { margin: 0 0 10px; }
.cs-auteur__expertises { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-auteur__expertises span { font-size: 13px; font-weight: 600; background: var(--cs-surface); padding: 7px 12px; border-radius: 999px; }
.cs-auteur__reseaux { display: flex; gap: 10px; }
body .cs-auteur__reseau { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--cs-surface); color: #0A66C2; font-weight: 800; transition: background .15s, color .15s; }
body .cs-auteur__reseau:hover { background: #0A66C2; color: #FFFFFF; }
.cs-auteur__appel { background: var(--cs-marine); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; color: var(--cs-bleu-clair); }
.cs-auteur__appel > strong { font-family: var(--cs-police-titre); font-size: 21px; line-height: 1.2; color: #FFFFFF; }
.cs-auteur__appel .cs-bouton { width: 100%; }
body .cs-auteur__tel { color: #FFFFFF; font-weight: 700; text-align: center; }
.cs-auteur-articles { background: var(--cs-surface); padding: 56px 0 88px; }

/* ── Juridique (J1) ────────────────────────────────────────────────────── */
.cs-juridique-tete { padding-top: 24px; padding-bottom: 40px; border-bottom: 1px solid var(--cs-bordure); }
.cs-juridique-tete .cs-fiche__titre { max-width: 900px; font-size: 44px; }
.cs-juridique-tete__date { display: block; margin-top: 12px; font-size: 14px; color: var(--cs-gris); }
.cs-juridique { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 56px; align-items: start; padding-top: 48px; padding-bottom: 88px; }
.cs-juridique__sommaire { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 48px); overflow-y: auto; }
.cs-juridique__sommaire nav { display: flex; flex-direction: column; margin-top: 8px; }
body .cs-juridique__entree { padding: 7px 0 7px 14px; border-left: 2px solid var(--cs-bordure); color: var(--cs-texte); font-size: 14px; line-height: 1.35; }
body .cs-juridique__entree:hover { border-left-color: var(--cs-menthe); color: var(--cs-marine); }
body .cs-juridique__entree--2 { font-weight: 700; color: var(--cs-marine); }
body .cs-juridique__entree--3 { padding-left: 26px; font-size: 13px; }
.cs-juridique__liens { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--cs-bordure); font-size: 14px; }
body .cs-juridique__liens a { color: var(--cs-vert); font-weight: 600; }
.cs-juridique__texte { font-size: 16px; line-height: 1.75; color: #24323F; }
.cs-juridique__texte h2 { font-size: 26px; margin: 48px 0 12px; scroll-margin-top: 24px; }
.cs-juridique__texte h3 { font-size: 20px; margin: 28px 0 8px; scroll-margin-top: 24px; }
.cs-juridique__texte h4 { font-size: 16px; margin: 20px 0 6px; color: var(--cs-marine); }
.cs-juridique__texte > :first-child, .cs-juridique__texte > div:first-child > :first-child { margin-top: 0; }
.cs-juridique__choix { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--cs-bordure); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cs-juridique__choix p { margin: 0; }

/* ── Qui sommes-nous / corporate (Q1) ──────────────────────────────────── */
.cs-corporate { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding-top: 56px; }
.cs-corporate__texte { display: flex; flex-direction: column; gap: 18px; }
.cs-corporate__intro { font-size: 18px; line-height: 1.65; color: var(--cs-texte); }
.cs-corporate__intro p { margin: 0 0 10px; }
.cs-corporate__photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 240px 200px; gap: 12px; }
.cs-corporate__photos span { border-radius: 22px; background: var(--cs-photo) center / cover no-repeat; }
.cs-corporate__photos span:first-child { grid-column: span 2; }
.cs-corporate__histoire { max-width: 860px; }
/* Pictos des étapes de la page corporate : plus petits qu'une illustration (QSF-114). */
.cs-contenu-riche.cs-corporate__histoire .cs-etape-image img { max-width: 120px; }
/* Citation dans un contenu : filet menthe, en marine (QSF-114). */
.cs-contenu-riche blockquote { margin: 18px 0; padding: 4px 0 4px 18px; border-left: 4px solid var(--cs-menthe); color: var(--cs-marine); font-family: var(--cs-police-titre); font-size: 19px; font-weight: 600; line-height: 1.4; }
.cs-contenu-riche blockquote p { margin: 0; }
.cs-engagement { border: 1.5px solid var(--cs-bordure); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cs-engagement__numero { font-family: var(--cs-police-titre); font-weight: 800; color: var(--cs-vert); }
.cs-engagement__titre { font-family: var(--cs-police-titre); font-size: 21px; line-height: 1.2; }
.cs-double-entree__carte { background: var(--cs-menthe-pale); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cs-double-entree__carte > strong { font-family: var(--cs-police-titre); font-size: 28px; line-height: 1.15; }
.cs-double-entree__carte--marine { background: var(--cs-marine); color: var(--cs-bleu-clair); }
.cs-double-entree__carte--marine > strong { color: #FFFFFF; }

/* ── 404, recherche (Pages techniques) ─────────────────────────────────── */
.cs-erreur { padding-top: 80px; padding-bottom: 88px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cs-erreur__code { font-family: var(--cs-police-titre); font-weight: 800; font-size: 160px; line-height: .9; letter-spacing: -0.05em; color: var(--cs-menthe); }
.cs-erreur .cs-texte--grand { margin: 0; max-width: 560px; font-size: 18px; }
.cs-recherche-site { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 520px; max-width: 100%; margin-top: 8px; }
.cs-recherche-site input { min-width: 0; border: 1px solid var(--cs-bordure-forte); border-radius: 999px; padding: 15px 20px; font-size: 15px; font-family: inherit; color: var(--cs-marine); background: #FFFFFF; }
.cs-raccourcis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; margin-top: 32px; text-align: left; }
body .cs-raccourci { border: 1.5px solid var(--cs-bordure); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; color: var(--cs-marine); }
body .cs-raccourci:hover { border-color: var(--cs-menthe); color: var(--cs-marine); }
.cs-raccourci__photo { aspect-ratio: 16 / 10; background: var(--cs-photo) center / cover no-repeat; }
.cs-raccourci__libelle { padding: 16px; display: flex; justify-content: space-between; font-weight: 700; }
.cs-recherche-page { padding-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.cs-resultats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
body .cs-resultats a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border: 1px solid var(--cs-bordure); border-radius: 16px; color: var(--cs-marine); }
body .cs-resultats a:hover { border-color: var(--cs-menthe); }

@media (max-width: 1100px) {
    .cs-contact { grid-template-columns: 1fr; }
    .cs-contact__aside { position: static; }
    .cs-auteur { grid-template-columns: 160px 1fr; }
    .cs-auteur__portrait { width: 160px; height: 160px; }
    .cs-auteur__appel { grid-column: 1 / -1; }
    .cs-juridique { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
    .cs-corporate { grid-template-columns: 1fr; }
    .cs-raccourcis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .cs-contact-tete .cs-texte { font-size: 16px; }
    .cs-contact-entrees { grid-template-columns: 1fr; gap: 10px; padding-top: 20px; }
    .cs-contact-entree__titre, .cs-contact-entree__titre--tel { font-size: 20px; }
    .cs-contact { padding-top: 24px; }
    .cs-contact__formulaire { padding: 20px; border-radius: 18px; }
    .cs-auteur { grid-template-columns: 1fr; gap: 14px; padding-top: 28px; padding-bottom: 32px; }
    .cs-auteur__portrait { width: 96px; height: 96px; }
    .cs-auteur__portrait--initiale { font-size: 38px; }
    .cs-auteur__bio { font-size: 15px; }
    .cs-auteur-articles { padding: 28px 0 40px; }
    .cs-juridique-tete { padding-bottom: 18px; }
    .cs-juridique-tete .cs-fiche__titre { font-size: 26px; }
    .cs-juridique { grid-template-columns: 1fr; padding-top: 24px; padding-bottom: 40px; }
    .cs-juridique__sommaire { position: static; max-height: none; border: 1px solid var(--cs-bordure); border-radius: 16px; padding: 16px; }
    .cs-juridique__entree--3 { display: none; }
    .cs-juridique__texte { font-size: 15px; }
    .cs-juridique__texte h2 { font-size: 20px; }
    .cs-juridique__texte h3 { font-size: 17px; }
    .cs-corporate { padding-top: 28px; gap: 24px; }
    .cs-corporate__intro { font-size: 16px; }
    .cs-corporate__photos { grid-template-rows: 180px 130px; }
    .cs-double-entree__carte { padding: 24px; }
    .cs-double-entree__carte > strong { font-size: 22px; }
    .cs-erreur { padding-top: 48px; padding-bottom: 40px; gap: 14px; }
    .cs-erreur__code { font-size: 96px; }
    .cs-recherche-site { grid-template-columns: 1fr; }
    .cs-raccourcis { gap: 8px; margin-top: 16px; }
    .cs-raccourci__photo { display: none; }
    .cs-raccourci__libelle { padding: 14px; font-size: 14px; }
}

/* ── Vidéo dans un contenu (lien YouTube rendu en lecteur au clic) ──── */
.cs-video-contenu { margin: 24px 0; }
.cs-video-contenu .cs-video__lecteur { width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: 18px; background: var(--cs-marine) center / cover no-repeat; cursor: pointer; display: block; overflow: hidden; position: relative; }
.cs-video-contenu iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 18px; }
.cs-video-contenu .cs-video__lecteur iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }

/* ── Colonnes de l'éditeur dans une colonne de lecture ──────────────────
   Les rangées à 3 ou 4 colonnes reprises du WordPress (Bootstrap `col-4`,
   sans point de rupture) sont illisibles dans 720 px : deux par ligne,
   une seule sur mobile. */
.cs-contenu-riche--article .row > .col-4,
.cs-contenu-riche--article .row > .col-3,
.cs-fiche-contenu .row > .col-3 { flex: 0 0 50%; max-width: 50%; }
.cs-contenu-riche--article .row > [class*="col-"] { margin-bottom: 16px; }
@media (max-width: 760px) {
    .cs-contenu-riche--article .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}

/* ── Images des contenus repris du WordPress ────────────────────────────
   WordPress fixait la taille d'affichage ; l'import l'a perdue. Une image
   garde sa taille naturelle, sans dépasser la colonne ; un pictogramme SVG
   (sans taille propre) reste un pictogramme ; un logo en colonne reste petit. */
.cs-contenu-riche img { width: auto; max-width: 100%; height: auto; }
.cs-contenu-riche img[src$=".svg"] { width: 72px; max-width: 72px; }
.cs-contenu-riche--article .row > .col-4 img,
.cs-contenu-riche--article .row > .col-3 img,


/* Texte d'un listing : sommaire + colonne de lecture, sans colonne d'appel. */
.cs-article--listing { grid-template-columns: 220px minmax(0, 760px); }
@media (max-width: 1100px) { .cs-article--listing { grid-template-columns: 1fr; } }

/* ── Accueil : meilleure vente (maquette Home V1, 2026-10-06) ─────────── */
body .cs-best { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border: 2px solid var(--cs-menthe); border-radius: 26px; overflow: hidden; margin-bottom: 24px; background: #FFFFFF; color: var(--cs-marine); transition: box-shadow .2s, transform .2s; }
body .cs-best:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(0, 44, 84, .5); color: var(--cs-marine); }
.cs-best__photo { position: relative; min-height: 380px; background: var(--cs-photo) center / cover no-repeat; }
.cs-best__badge { position: absolute; top: 18px; left: 18px; background: var(--cs-etoile); color: var(--cs-marine); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.cs-best__corps { padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.cs-best__nom { font-family: var(--cs-police-titre); font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.cs-best__pastilles { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-best__pastille { font-size: 14px; font-weight: 700; background: var(--cs-surface); padding: 6px 12px; border-radius: 999px; }
.cs-best__pastille--menthe { background: var(--cs-menthe-pale); color: var(--cs-vert); }
.cs-best__accroche { font-size: 17px; line-height: 1.55; color: var(--cs-texte); }
.cs-best__detail { font-size: 14px; line-height: 1.55; color: var(--cs-gris); }
.cs-best__pied { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-top: 16px; border-top: 1px dashed var(--cs-bordure); margin-top: 4px; }
.cs-best__prix { font-family: var(--cs-police-titre); font-size: 36px; letter-spacing: -0.02em; }

/* ── Réalisations : bandeau défilant ─────────────────────────────────── */
@keyframes cs-defilement { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cs-realisations .cs-section__tete { margin-bottom: 28px; }
.cs-realisations__bandeau { overflow: hidden; border-radius: 18px; }
.cs-realisations__piste { display: flex; gap: 14px; width: max-content; animation: cs-defilement 70s linear infinite; }
.cs-realisations__bandeau:hover .cs-realisations__piste,
.cs-realisations__bandeau:focus-within .cs-realisations__piste { animation-play-state: paused; }
body .cs-realisation { width: 320px; height: 240px; flex: none; border-radius: 18px; background: var(--cs-photo) center / cover no-repeat; position: relative; display: block; overflow: hidden; }
body .cs-realisation::after { content: ""; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(180deg, rgba(0, 44, 84, 0), rgba(0, 44, 84, .75)); }
.cs-realisation:hover { box-shadow: inset 0 0 0 3px var(--cs-menthe); }
.cs-realisation .cs-pastille { position: absolute; top: 12px; left: 12px; z-index: 1; }
.cs-realisation__libelle { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; font-size: 16px; color: #FFFFFF; }
.cs-realisations__cta-mobile { display: none; }
@media (prefers-reduced-motion: reduce) {
    .cs-realisations__piste { animation: none; }
    .cs-realisations__bandeau { overflow-x: auto; }
}
@media (max-width: 760px) {
    body .cs-best { grid-template-columns: 1fr; border-radius: 18px; }
    .cs-best__photo { min-height: 0; aspect-ratio: 4 / 3; }
    .cs-best__badge { top: 10px; left: 10px; font-size: 11px; padding: 6px 10px; }
    .cs-best__corps { padding: 16px; gap: 8px; }
    .cs-best__nom { font-size: 21px; }
    .cs-best__pastille { font-size: 12px; }
    .cs-best__accroche { font-size: 14px; }
    .cs-best__detail { display: none; }
    .cs-best__pied { flex-direction: column; align-items: stretch; }
    .cs-best__prix { font-size: 24px; }
    .cs-realisations__piste { gap: 8px; animation-duration: 55s; }
    body .cs-realisation { width: 200px; height: 150px; border-radius: 14px; }
    .cs-realisation__libelle { font-size: 13px; left: 10px; bottom: 8px; }
    .cs-realisations__cta { display: none; }
    .cs-realisations__cta-mobile { display: block; padding-top: 16px; }
}
.cs-sim__chiffres--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Merci : créneau de rappel (maquette « Merci », 3a) ──────────────── */
.cs-merci--creneau { background: var(--cs-surface); padding: 48px 0; }
.cs-merci__grille { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: end; }
.cs-merci__texte { display: flex; flex-direction: column; gap: 22px; }
.cs-merci__texte .cs-texte--grand { margin: 0; font-size: 18px; }
.cs-merci__texte .cs-avis-ligne { margin: 0; }
.cs-merci__suite { background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.cs-merci__etape { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; }
.cs-merci__etape > span:first-child { width: 32px; height: 32px; border-radius: 50%; background: var(--cs-menthe-pale); color: var(--cs-vert); font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-creneau { background: #FFFFFF; border: 1px solid var(--cs-bordure); border-radius: 22px; padding: 26px; box-shadow: 0 24px 50px -30px rgba(0, 44, 84, .35); scroll-margin-top: 100px; }
.cs-creneau__formulaire { display: flex; flex-direction: column; gap: 18px; }
.cs-creneau__formulaire fieldset { border: 0; margin: 0; padding: 0; }
.cs-creneau__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cs-creneau__tete strong { font-family: var(--cs-police-titre); font-size: 22px; }
.cs-creneau__jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.cs-creneau__jour { border: 1.5px solid var(--cs-bordure); border-radius: 12px; padding: 10px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; }
.cs-creneau__jour strong { font-size: 18px; }
.cs-creneau__jour:has(input:checked) { border-color: var(--cs-menthe); background: var(--cs-menthe-pale); }
.cs-creneau__horaires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-creneau__horaire { margin: 0; cursor: pointer; }
.cs-creneau__horaire[hidden] { display: none; }
.cs-creneau__horaire span { display: block; text-align: center; border: 1.5px solid var(--cs-bordure); border-radius: 10px; padding: 12px; font-weight: 600; font-size: 14px; }
.cs-creneau__horaire:has(input:checked) span { background: var(--cs-marine); border-color: var(--cs-marine); color: #FFFFFF; }
.cs-creneau__jour:has(input:focus-visible), .cs-creneau__horaire:has(input:focus-visible) span { outline: 2px solid var(--cs-marine); outline-offset: 2px; }
.cs-creneau [data-creneau-valider]:disabled { background: var(--cs-bordure); color: var(--cs-gris); cursor: default; }
.cs-creneau__note { text-align: center; }
.cs-creneau__erreur { margin: 0; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #9B1C1C; font-size: 14px; }
.cs-creneau__confirme { display: flex; flex-direction: column; gap: 8px; background: var(--cs-menthe-pale); border-radius: 14px; padding: 18px; font-size: 15px; }
.cs-creneau__confirme > strong { color: var(--cs-vert); font-size: 18px; }
.cs-creneau__agenda { font-size: 14px; color: var(--cs-texte); }
body .cs-creneau__agenda a { color: var(--cs-vert); font-weight: 700; text-decoration: underline; }
.cs-merci__raccourcis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 48px; }
.cs-merci__raccourcis .cs-raccourci { background: #FFFFFF; }
@media (max-width: 1100px) { .cs-merci__grille { grid-template-columns: 1fr; align-items: start; } }
@media (max-width: 760px) {
    .cs-merci--creneau { padding: 24px 0; }
    .cs-creneau { padding: 18px; }
    .cs-creneau__tete strong { font-size: 18px; }
    .cs-creneau__jours { gap: 6px; }
    .cs-merci__raccourcis { grid-template-columns: 1fr; gap: 10px; padding-top: 24px; }
}

/* ── Note Google : étoiles au prorata, qualificatif, lien vers la fiche ─ */
.cs-etoiles--note { position: relative; display: inline-block; width: max-content; align-self: flex-start; color: var(--cs-bordure-forte); white-space: nowrap; }
.cs-etoiles--note::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--remplissage, 100%); overflow: hidden; white-space: nowrap; color: var(--cs-etoile); }
body .cs-avis__resume { display: flex; flex-direction: column; gap: 12px; color: var(--cs-marine); }
body a.cs-avis__resume:hover { color: var(--cs-marine); }
body a.cs-avis__resume:hover .cs-avis__source { text-decoration: underline; }
.cs-avis__qualificatif { font-family: var(--cs-police-titre); font-weight: 800; font-size: 22px; color: var(--cs-marine); }
@media (max-width: 760px) {
    body .cs-avis__resume { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
    .cs-avis__qualificatif { font-size: 18px; width: 100%; }
}

/* ── Contact : carte Google Maps (chargée avec consentement ou au clic) ── */
.cs-contact__carte { aspect-ratio: 16 / 10; background: #E7EEF0; position: relative; }
.cs-contact__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cs-contact__carte-repli { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; color: var(--cs-texte); }
.cs-contact__carte-repli .cs-petit { color: var(--cs-gris); }
body .cs-contact-entree--info:hover { border-color: var(--cs-bordure); }
.cs-contact__carte-repli > span:first-child { font-size: 32px; }
.cs-contact__carte .cs-bouton--blanc { width: auto; border: 1.5px solid var(--cs-bordure-forte); color: var(--cs-marine); }
body .cs-contact__itineraire { color: var(--cs-menthe); font-weight: 700; }
.cs-contact-entree--rappel:hover { border-color: var(--cs-bordure); }
.cs-contact-entree__rappel { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 4px 0; }
.cs-contact-entree__rappel input { min-width: 0; border: 1px solid var(--cs-bordure-forte); border-radius: 999px; padding: 12px 16px; font-size: 15px; font-family: inherit; color: var(--cs-marine); }
.cs-contact-entree__rappel .cs-bouton { padding: 12px 18px; }

/* ── Méga-menu particuliers : cartes Borne de recharge / Panneaux sur toit ── */

/* Photo légendée de l'éditeur de blocs : colonne de classe `cs-photo-legendee` portant
   un bloc image puis un bloc texte (la légende, posée en bas de la photo). */
.cs-photo-legendee { position: relative; margin-bottom: 16px; }
.cs-photo-legendee img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; margin: 0; }
.cs-photo-legendee p { position: absolute; left: calc(var(--bs-gutter-x, 24px) / 2); right: calc(var(--bs-gutter-x, 24px) / 2); bottom: 0; margin: 0; padding: 28px 12px 12px; border-radius: 0 0 16px 16px; background: linear-gradient(transparent, rgba(0, 44, 84, .78)); color: #FFFFFF; font-weight: 700; font-size: 15px; text-align: center; }
.cs-section--vitrine { padding-top: 48px; }
.cs-section--vitrine .cs-contenu-riche h2 { margin-top: 0; }
[data-visionneuse] .cs-photo-legendee img { cursor: zoom-in; transition: transform .2s, box-shadow .2s; }
[data-visionneuse] .cs-photo-legendee img:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 44, 84, .18); }
[data-visionneuse] .cs-photo-legendee p { pointer-events: none; }

/* Visionneuse (photo en grand) */
.cs-visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 20, 40, .92); color: #FFFFFF; }
.cs-visionneuse[open] { display: flex; align-items: center; justify-content: center; }
.cs-visionneuse::backdrop { background: transparent; }
.cs-visionneuse__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: calc(100vw - 160px); }
.cs-visionneuse__figure img { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: 12px; }
.cs-visionneuse__figure figcaption { font-family: var(--cs-police-titre); font-weight: 700; font-size: 18px; text-align: center; }
.cs-visionneuse__compteur { position: absolute; top: 22px; left: 24px; font-size: 14px; font-weight: 700; opacity: .8; }
.cs-visionneuse__fermer, .cs-visionneuse__fleche { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: 22px; font-weight: 700; cursor: pointer; }
.cs-visionneuse__fermer:hover, .cs-visionneuse__fleche:hover { background: var(--cs-menthe); color: var(--cs-marine); }
.cs-visionneuse__fermer { top: 14px; right: 18px; font-size: 28px; }
.cs-visionneuse__fleche { top: 50%; transform: translateY(-50%); }
.cs-visionneuse__fleche--precedente { left: 20px; }
.cs-visionneuse__fleche--suivante { right: 20px; }

@media (max-width: 760px) {
    .cs-photo-legendee { flex: 0 0 50%; max-width: 50%; }
    .cs-visionneuse__figure { max-width: calc(100vw - 24px); }
    .cs-visionneuse__fleche { top: auto; bottom: 18px; transform: none; }
    .cs-photo-legendee p { font-size: 13px; padding: 22px 8px 8px; }
}

/* ── Galerie des réalisations (maquette « Galerie Realisations ») ─────────── */
.cs-galerie-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-top: 24px; padding-bottom: 28px; }
.cs-galerie-tete > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.cs-galerie-tete .cs-fiche__titre, .cs-galerie-tete .cs-texte { margin: 0; }
.cs-galerie-tete__chiffres { display: flex; gap: 28px; white-space: nowrap; }
.cs-galerie-tete__chiffres strong { display: block; font-family: var(--cs-police-titre); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; color: var(--cs-marine); }
.cs-galerie-tete__chiffres span { font-size: 14px; color: var(--cs-gris); }
.cs-galerie-filtres { position: sticky; top: 84px; z-index: 5; background: #FFFFFF; border-top: 1px solid var(--cs-bordure); border-bottom: 1px solid var(--cs-bordure); }
.cs-galerie-filtres__barre { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.cs-galerie-filtres__liste { display: flex; gap: 8px; flex-wrap: wrap; }
.cs-galerie-filtres__liste button { display: flex; gap: 6px; align-items: center; border: 1.5px solid var(--cs-bordure); background: #FFFFFF; color: var(--cs-marine); border-radius: 999px; padding: 9px 15px; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cs-galerie-filtres__liste button span { font-size: 12px; opacity: .6; }
.cs-galerie-filtres__liste button:hover { border-color: var(--cs-marine); }
.cs-galerie-filtres__liste button[aria-pressed="true"] { background: var(--cs-marine); border-color: var(--cs-marine); color: #FFFFFF; }
.cs-galerie-filtres__vues { display: flex; gap: 4px; background: var(--cs-surface); border-radius: 999px; padding: 4px; flex: none; }
.cs-galerie-filtres__vues button { border: 0; background: transparent; color: var(--cs-marine); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.cs-galerie-filtres__vues button[aria-pressed="true"] { background: var(--cs-marine); color: #FFFFFF; }
.cs-galerie-realisations { padding-top: 20px; }
.cs-galerie-realisations__mur { column-count: 4; column-gap: 10px; }
.cs-galerie-realisations__mur.est-dense { column-count: 6; }
.cs-realisation-tuile { display: block; width: 100%; break-inside: avoid; margin: 0 0 10px; padding: 0; border: 0; background: #EDF1F3; border-radius: 14px; overflow: hidden; position: relative; cursor: zoom-in; text-align: left; transition: box-shadow .2s; }
.cs-realisation-tuile:hover, .cs-realisation-tuile:focus-visible { box-shadow: 0 0 0 3px var(--cs-menthe); outline: 0; }
.cs-realisation-tuile[hidden] { display: none; }
.cs-realisation-tuile img { display: block; width: 100%; height: auto; }
.cs-realisation-tuile .cs-pastille { position: absolute; top: 10px; left: 10px; }
.cs-realisation-tuile__agrandir { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--cs-marine); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.cs-realisation-tuile__titre { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(180deg, rgba(0, 44, 84, 0), rgba(0, 44, 84, .7)); color: #FFFFFF; font-size: 14px; font-weight: 700; }
.est-dense .cs-realisation-tuile__titre, .est-dense .cs-realisation-tuile__agrandir { display: none; }
.cs-galerie-realisations__pied { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 24px; font-size: 14px; color: var(--cs-gris); }
.cs-galerie-appel { background: var(--cs-marine); border-radius: 28px; padding: 40px 44px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cs-galerie-appel strong { display: block; font-family: var(--cs-police-titre); font-size: 32px; line-height: 1.1; color: #FFFFFF; }
.cs-galerie-appel span { font-size: 16px; color: #C3D2E0; }
.cs-galerie-appel__boutons { display: flex; gap: 12px; flex: none; }
.cs-visionneuse__pied { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; }
.cs-visionneuse__pied > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cs-visionneuse__pied strong { font-size: 18px; }
.cs-visionneuse__pied em { font-style: normal; color: #8FB0CC; font-size: 14px; }
@media (max-width: 1100px) {
    .cs-galerie-realisations__mur { column-count: 3; }
    .cs-galerie-realisations__mur.est-dense { column-count: 4; }
}
@media (max-width: 760px) {
    .cs-galerie-tete { flex-direction: column; align-items: flex-start; gap: 16px; }
    .cs-galerie-tete__chiffres strong { font-size: 40px; }
    .cs-galerie-filtres { top: 64px; }
    .cs-galerie-filtres__barre { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
    .cs-galerie-filtres__liste { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .cs-galerie-filtres__vues { align-self: flex-start; }
    .cs-galerie-realisations__mur { column-count: 2; column-gap: 6px; }
    .cs-galerie-realisations__mur.est-dense { column-count: 3; }
    .cs-realisation-tuile { margin-bottom: 6px; border-radius: 10px; }
    .cs-galerie-appel { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
    .cs-galerie-appel strong { font-size: 24px; }
    .cs-galerie-appel__boutons { flex-wrap: wrap; }
    .cs-visionneuse__pied { flex-direction: column; align-items: flex-start; }
}

/* FAQ en cartes, mobile (maquette 390 px) : une carte par ligne, plus compacte. */
@media (max-width: 760px) {
    .cs-faq-cartes { gap: 14px; }
    .cs-faq-cartes__tete { gap: 12px; }
    .cs-faq-cartes__tete .cs-h2 { font-size: 22px; }
    .cs-faq-cartes__vignette { width: 52px; height: 52px; border-radius: 12px; }
    .cs-faq-cartes__grille, .cs-contenu-riche .pb-faq { grid-template-columns: 1fr; gap: 12px; }
    .cs-faq-cartes__grille > *, .cs-contenu-riche .pb-faq > * { grid-column: auto !important; }
    .cs-faq-carte, .cs-contenu-riche .pb-faq-item { padding: 16px; border-radius: 16px; gap: 8px; }
    .cs-faq-carte__question, .cs-contenu-riche .pb-faq-q { font-family: inherit; font-size: 16px; line-height: 1.3; gap: 10px; }
    .cs-faq-carte__picto, .cs-contenu-riche .pb-faq-q::before { width: 28px; height: 28px; font-size: 13px; margin-top: -3px; }
    .cs-faq-carte__reponse, .cs-contenu-riche .pb-faq-a, .cs-contenu-riche .pb-faq-item.open .pb-faq-a { padding-left: 38px; font-size: 14px; line-height: 1.55; }
}

/* Pictogrammes en colonnes (contenus repris du WordPress, classe de colonne `cs-picto`) :
   l'image, son titre en gras, sa description dessous. Deux par ligne sur mobile. */
/* Spécificité supérieure aux règles « col-3 = moitié » des articles et des fiches. */
.cs-contenu-riche .row > .cs-picto.col-3 { flex: 0 0 25%; max-width: 25%; }
.cs-contenu-riche .row > .cs-picto.col-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.cs-contenu-riche .cs-picto { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin: 8px 0 24px; }
.cs-contenu-riche .cs-picto img { width: 72px; height: 72px; object-fit: contain; border-radius: 0; margin: 0; }
.cs-contenu-riche .cs-picto p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cs-texte); }
.cs-contenu-riche .cs-picto p:first-child { font-family: var(--cs-police-titre); font-weight: 700; font-size: 18px; color: var(--cs-marine); }
/* `cs-picto--fond` : pictogramme dessiné en BLANC (étapes de l'ancien thème), posé sur un fond marine. */
.cs-contenu-riche .cs-picto--fond img { width: 96px; height: 96px; padding: 6px; background: var(--cs-marine); border-radius: 22px; }
@media (max-width: 760px) {
    .cs-contenu-riche .row > .cs-picto.cs-picto { flex: 0 0 50%; max-width: 50%; }
    .cs-contenu-riche .cs-picto--fond img { width: 72px; height: 72px; border-radius: 16px; }
    .cs-contenu-riche .cs-picto img { width: 56px; height: 56px; }
}

/* Intertitre dans un picto (titre SEO plutôt qu'un paragraphe en gras, QSF-105). */
.cs-contenu-riche .cs-picto h3 { font-size: 18px; font-weight: 700; line-height: 1.25; margin: 0; }
/* Avec un intertitre, le 1er paragraphe redevient du texte courant. */
.cs-contenu-riche .cs-picto:has(h3) p:first-child { font-family: var(--cs-police); font-weight: 400; font-size: 15px; color: var(--cs-texte); }

/* Carte de contenu (classe de colonne `cs-carte`) : fond doux, coins arrondis.
   Le fond est porté par un pseudo-élément pour garder la gouttière de la grille. */
.cs-contenu-riche .row:has(> .cs-carte) { row-gap: 20px; margin-bottom: 20px; isolation: isolate; }
.cs-contenu-riche .cs-carte { position: relative; padding-top: 22px; padding-bottom: 6px; }
.cs-contenu-riche .cs-carte::before { content: ""; position: absolute; inset: 0 calc(var(--bs-gutter-x, 24px) / 2); background: var(--cs-surface); border-radius: 16px; z-index: -1; }
.cs-contenu-riche .cs-carte > * { padding-left: 20px; padding-right: 20px; }
.cs-contenu-riche .cs-carte h3 { margin-top: 0; font-size: 19px; }

/* Logos de clients (classe de colonne `cs-logo-client`) : une ligne centrée sur un
   bandeau marine — les logos repris du WordPress sont dessinés en blanc. */
.cs-contenu-riche .row:has(> .cs-logo-client) { justify-content: center; align-items: center; margin: 4px 0 24px; padding: 18px 8px; background: var(--cs-marine); border-radius: 16px; }
.cs-contenu-riche .cs-logo-client { display: flex; justify-content: center; }
/* ⚠ Des SVG sans dimensions : une largeur et une hauteur explicites, sinon ils valent 0. */
.cs-contenu-riche .cs-logo-client img { width: 100%; max-width: 150px; height: 64px; border-radius: 0; margin: 8px 0; object-fit: contain; }

/* Étape illustrée (classes de colonne `cs-etape-image` / `cs-etape-texte`) :
   l'illustration à gauche, centrée sur le texte ; l'une sous l'autre sur mobile.
   Spécificité supérieure aux règles « col-4 = moitié » des articles. */
.cs-contenu-riche .row:has(> .cs-etape-image) { align-items: center; margin: 8px 0 32px; }
.cs-contenu-riche .row > .cs-etape-image.cs-etape-image { flex: 0 0 30%; max-width: 30%; display: flex; justify-content: center; margin-bottom: 0; }
.cs-contenu-riche .row > .cs-etape-texte.cs-etape-texte { flex: 0 0 70%; max-width: 70%; margin-bottom: 0; }
.cs-contenu-riche .cs-etape-image img { width: 100%; max-width: 200px; border-radius: 0; margin: 0; }
.cs-contenu-riche .cs-etape-texte h3:first-child { margin-top: 0; }
@media (max-width: 760px) {
    .cs-contenu-riche .row > .cs-etape-image.cs-etape-image,
    .cs-contenu-riche .row > .cs-etape-texte.cs-etape-texte { flex: 0 0 100%; max-width: 100%; }
    .cs-contenu-riche .cs-etape-image img { max-width: 140px; margin-bottom: 12px; }
    .cs-contenu-riche .row > .cs-carte.cs-carte { flex: 0 0 100%; max-width: 100%; }
    .cs-contenu-riche .row > .cs-logo-client.cs-logo-client { flex: 0 0 33.333%; max-width: 33.333%; }
    /* Toute autre colonne (texte et photo côte à côte…) passe en pleine largeur (QSF-114) ;
       les pictos et les logos gardent leurs règles ci-dessus. */
    .cs-contenu-riche .row > [class*="col-"]:not(.cs-picto):not(.cs-logo-client) { flex: 0 0 100%; max-width: 100%; }
}

/* ── Plan du site HTML (QSF-76) : grille de la page juridique, une entrée = lien + description ── */
.cs-plan__section { scroll-margin-top: 24px; }
.cs-plan__section + .cs-plan__section { margin-top: 48px; padding-top: 8px; border-top: 1px solid var(--cs-bordure); }
.cs-plan__section h2 { font-size: 26px; margin: 0 0 16px; }
.cs-plan__section h3 { font-size: 16px; margin: 28px 0 10px; color: var(--cs-gris); text-transform: uppercase; letter-spacing: .04em; }
.cs-plan__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.cs-plan__liste .cs-plan__liste { grid-column: 1 / -1; margin-top: 12px; padding-left: 16px; }
.cs-plan__entree { min-width: 0; }
body .cs-plan__lien { font-family: var(--cs-police-titre); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--cs-marine); }
body .cs-plan__lien:hover { color: var(--cs-vert); text-decoration: underline; }
.cs-plan__description { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--cs-gris); }
@media (max-width: 760px) {
    .cs-plan__liste { grid-template-columns: 1fr; }
}

/* ── Encart « Éditer ce contenu » (QSF-78) ──────────────────────────────
   Rendu par le socle pour un administrateur connecté seulement
   (Qcdgone\Cms\Edition\LiensDEdition) ; ici, aux couleurs du site. Sur mobile,
   il remonte au-dessus de la barre d'appel fixée en bas de l'écran.
   ⚠ Sélecteurs `a.qcd-lien-edition` : le <style> du socle arrive APRÈS cette
   feuille, il gagnerait à spécificité égale. */
a.qcd-lien-edition { background: var(--cs-marine); border: 2px solid var(--cs-menthe); font-family: inherit; }
a.qcd-lien-edition:hover, a.qcd-lien-edition:focus { background: var(--cs-marine-survol); }
@media (max-width: 760px) {
    a.qcd-lien-edition { bottom: 84px; right: 12px; padding: 7px 12px; font-size: 13px; }
}

/* ── Tunnel de commande : panier, coordonnées, confirmation (maquette « Panier », C1) ──
   En-tête et pied allégés, étapes, colonne principale + récapitulatif collant.
   Tout fonctionne sans JavaScript (robot Google Merchant Center). */
.cs-tunnel-entete { background: #FFFFFF; border-bottom: 1px solid var(--cs-bordure); padding: 0 var(--cs-marge); height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cs-tunnel-entete__logo img { height: 42px; width: auto; display: block; }
.cs-tunnel-entete__aide { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--cs-gris); }
.cs-tunnel-entete__aide a { color: var(--cs-marine); }
.cs-tunnel-entete__rassure strong { color: var(--cs-vert); }
.cs-tunnel-pied { border-top: 1px solid var(--cs-bordure); padding: 20px var(--cs-marge); display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font-size: 13px; color: var(--cs-gris); }
.cs-tunnel-pied nav { display: flex; gap: 20px; flex-wrap: wrap; }
body .cs-tunnel-pied a { color: var(--cs-gris); }

.cs-tunnel-tete { padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.cs-tunnel-tete__titre { font-family: var(--cs-police-titre); font-weight: 800; font-size: 40px; line-height: 1.04; letter-spacing: -0.03em; margin: 0; color: var(--cs-marine); }
.cs-tunnel-tete__titre--discret { font-size: 20px; letter-spacing: 0; }
.cs-tunnel-etapes { display: flex; gap: 10px; align-items: center; list-style: none; margin: 0; padding: 0; }
.cs-tunnel-etape, .cs-tunnel-etape > a { display: flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 500; color: var(--cs-marine); }
.cs-tunnel-etape:not(:last-child)::after { content: ''; width: 48px; height: 2px; background: var(--cs-bordure); margin-left: 6px; }
.cs-tunnel-etape__rond { width: 32px; height: 32px; border-radius: 50%; flex: none; background: #EDF1F3; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.cs-tunnel-etape--faite .cs-tunnel-etape__rond, .cs-tunnel-etape--courante .cs-tunnel-etape__rond { background: var(--cs-menthe); }
.cs-tunnel-etape--courante { font-weight: 700; }

.cs-tunnel-grille { padding-top: 28px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.cs-tunnel-principal { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cs-tunnel-alerte { margin-top: 16px; color: #B42318; font-weight: 600; }
.cs-tunnel-vide { padding-top: 32px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.cs-tunnel-ligne { border: 1px solid var(--cs-bordure); border-radius: 20px; padding: 20px; display: grid; grid-template-columns: 140px 1fr; gap: 20px; background: #FFFFFF; }
.cs-tunnel-ligne__photo { aspect-ratio: 1; border-radius: 14px; background: var(--cs-photo) center / cover no-repeat; }
.cs-tunnel-ligne__corps { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cs-tunnel-ligne__tete { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.cs-tunnel-ligne__nom, .cs-tunnel-ligne__total { font-family: var(--cs-police-titre); font-weight: 700; font-size: 20px; line-height: 1.2; }
.cs-tunnel-ligne__total { white-space: nowrap; }
.cs-tunnel-ligne__actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.cs-tunnel-ligne__liens { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.cs-tunnel-ligne__liens form { margin: 0; }
.cs-tunnel-quantite { display: flex; align-items: center; gap: 10px; margin: 0; }
.cs-tunnel-quantite input { width: 70px; border: 1px solid var(--cs-bordure-forte); border-radius: 999px; padding: 8px 12px; font: inherit; font-weight: 700; text-align: center; color: var(--cs-marine); }
.cs-tunnel-lien { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; text-decoration: underline; color: var(--cs-marine); cursor: pointer; }
.cs-tunnel-lien.cs-gris { color: var(--cs-gris); }
.cs-tunnel-retour { align-self: flex-start; font-weight: 700; padding: 6px 0; }

.cs-tunnel-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }
.cs-tunnel-recap { background: var(--cs-surface); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.cs-tunnel-recap__titre { font-family: var(--cs-police-titre); font-size: 20px; }
.cs-tunnel-recap__ligne { display: flex; justify-content: space-between; gap: 12px; }
.cs-tunnel-recap__inclus { color: var(--cs-vert); font-weight: 700; }
.cs-tunnel-recap__lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cs-tunnel-recap__lignes li { display: flex; justify-content: space-between; gap: 12px; }
.cs-tunnel-recap__lignes li > span:last-child { white-space: nowrap; font-weight: 700; }
.cs-tunnel-recap__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--cs-bordure); }
.cs-tunnel-recap__montant { font-family: var(--cs-police-titre); font-size: 30px; letter-spacing: -0.02em; white-space: nowrap; }
.cs-tunnel-recap--confirmation { margin: 8px 0 24px; }
.cs-tunnel-garanties { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cs-texte); }
.cs-tunnel-garanties strong { color: var(--cs-vert); }
.cs-tunnel-aide { border: 1px solid var(--cs-bordure); border-radius: 18px; padding: 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.45; align-self: start; }
.cs-tunnel-aide__picto { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--cs-menthe); font-weight: 800; display: flex; align-items: center; justify-content: center; }

.cs-tunnel-carte { border: 1px solid var(--cs-bordure); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; }
.cs-tunnel-carte__titre { font-family: var(--cs-police-titre); font-size: 22px; margin-top: 4px; }
.cs-tunnel-formulaire .mb-3 { margin: 0 !important; }
.cs-tunnel-formulaire .form-control { border: 1px solid var(--cs-bordure-forte); border-radius: 12px; padding: 14px; font-size: 15px; color: var(--cs-marine); }
.cs-grille-champs--1-2 { grid-template-columns: 1fr 2fr; }
.cs-tunnel-ensuite { background: var(--cs-menthe-pale); border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: var(--cs-texte); }
.cs-tunnel-ensuite strong { color: var(--cs-marine); }
.cs-tunnel-formulaire__envoi { margin-top: 4px; }

/* Un grand bouton (« Envoyer ma demande de commande ») ne doit pas élargir la colonne. */
.cs-tunnel .cs-bouton--large { white-space: normal; text-align: center; }
/* Confirmation : la page de remerciement (cs-merci) porte déjà ses marges. */
.cs-merci.cs-tunnel { padding-top: 0; }
.cs-merci .cs-tunnel-tete { padding-bottom: 24px; }
@media (max-width: 1000px) {
    .cs-tunnel-grille { grid-template-columns: minmax(0, 1fr); }
    .cs-tunnel-aside { position: static; }
}
@media (max-width: 760px) {
    .cs-tunnel-entete { height: 60px; padding: 0 16px; }
    .cs-tunnel-entete__logo img { height: 30px; }
    .cs-tunnel-entete__rassure { display: none; }
    .cs-tunnel-entete__aide { font-size: 13px; }
    .cs-tunnel-pied { padding: 16px; font-size: 12px; }
    .cs-tunnel-tete { padding-top: 18px; flex-direction: column-reverse; align-items: stretch; gap: 14px; }
    .cs-tunnel-tete__titre { font-size: 26px; }
    .cs-tunnel-etapes { gap: 6px; }
    .cs-tunnel-etape { flex: 1; font-size: 12px; }
    .cs-tunnel-etape:not(:last-child)::after { display: none; }
    .cs-tunnel-etape__rond { width: 26px; height: 26px; font-size: 12px; }
    .cs-tunnel-grille { padding-top: 14px; padding-bottom: 24px; gap: 14px; }
    .cs-tunnel-ligne { padding: 14px; grid-template-columns: 90px 1fr; gap: 12px; }
    .cs-tunnel-ligne__nom, .cs-tunnel-ligne__total { font-size: 16px; }
    .cs-tunnel-carte { padding: 16px; }
    .cs-tunnel-recap { padding: 18px; border-radius: 18px; }
    .cs-grille-champs--1-2 { grid-template-columns: 1fr; }
}

/* ── Newsletter du pied de page (QSF-101) ─────────────────────────────── */
.cs-newsletter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 40px; align-items: start; border-top: 1px solid var(--cs-bordure); padding: 28px 0; font-size: 14px; color: var(--cs-texte); }
.cs-newsletter__texte { display: flex; flex-direction: column; gap: 6px; }
.cs-newsletter__titre { font-family: var(--cs-police-titre); font-size: 22px; line-height: 1.2; color: var(--cs-marine); }
.cs-newsletter__formulaire { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cs-newsletter__ligne { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cs-newsletter__ligne input[type="email"] { border: 1px solid var(--cs-bordure-forte); border-radius: 999px; padding: 13px 16px; font-size: 15px; min-width: 0; font-family: inherit; background: #FFFFFF; }
.cs-newsletter__consentement { display: block; font-size: 12px; line-height: 1.5; color: var(--cs-gris); }
.cs-newsletter__consentement input { margin-right: 6px; vertical-align: -2px; accent-color: var(--cs-marine); }
body .cs-newsletter__consentement a { color: var(--cs-gris); text-decoration: underline; }
.cs-newsletter__message { margin: 0; font-weight: 600; color: var(--cs-vert); }
.cs-newsletter__message--erreur { color: #B91C1C; }
@media (max-width: 760px) {
    .cs-newsletter { grid-template-columns: 1fr; padding: 22px 0; }
    .cs-newsletter__titre { font-size: 19px; }
    .cs-newsletter__ligne { grid-template-columns: 1fr; }
}