/* =========================================================
   SITESGEN — APP.CSS
   Version : V09
   Date : 2026-06-20
   Modification : nettoyage et consolidation sans changement visuel
   Base archivée : V07 — responsive validé
   ========================================================= */

/* Nettoyage conservateur :
   - suppression de déclarations strictement remplacées plus loin ;
   - suppression des anciennes variantes du hero de la page mère ;
   - conservation des styles legacy encore susceptibles d’être utilisés.
*/

/* Ce conteneur englobe votre sidebar, votre contenu principal et votre footer */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* La balise <main> contient le contenu principal de votre page */
main {
    flex-grow: 1;
}

h2 {
    font-size: 32px;
    color: black;
    font-weight: 700;
}



/* Classe pour les listes à puces avec espacement personnalisé */
ul li {
    margin-bottom: 7px;
}

ul li:last-child {
    margin-bottom: 0;
}



.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* =========================================================
   STYLES PERSONNALISÉS ACCORDIONS
   ========================================================= */

.section-title {
    color: #1a202c;
    font-weight: 700;
}

.accordion-item {
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: all 0.3s ease-in-out;
}

.accordion-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.accordion-button {
    font-weight: 600;
    color: #2d3748;
    border-radius: 0.5rem !important;
}

.accordion-button:not(.collapsed) {
    background-color: #e2e8f0;
    color: #1a202c;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25);
}

.accordion-body ul {
    padding-left: 1.5rem;
}

.partner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    height: 100%;
}

.partner-card img {
    max-height: 80px;
    margin-bottom: 1rem;
}

.btn-cta {
    background-color: #3b82f6;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: #2563eb;
    color: white;
}

/* =========================================================
   ARTICLES
   ========================================================= */

.article-titleh1 {
    color: #ffffff;
    text-align: center;
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 25px;
    background: linear-gradient(to right, #34495e, #2c3e50);
    padding: 25px;
    border-radius: 8px;
}

.article-titleh2 {
    color: #2c3e50;
    text-align: left;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 15px;
}

.article-titleh3 {
    color: #34495e;
    text-align: left;
    font-size: 20px;
    margin-top: 30px;
    margin-bottom: 10px;
}

/* À retenir de cet article */
.article-aretenir {
    background-color: #f3f9ff;
    border-left: 5px solid #2980b9;
    padding: 15px 20px;
    margin: 30px 0;
    font-size: 16px;
    text-align: left;
    border-radius: 5px;
}

.article-aretenir p {
    margin: 0;
    font-weight: bold;
    color: #2c3e50;
}

.article-aretenir ul {
    list-style-position: inside;
    padding-left: 0;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: left;
}

.article-aretenir li {
    margin-bottom: 5px;
}

/* Liste personnalisée */
.styled-list {
    list-style-type: none;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.7;
}

.styled-list li {
    padding-left: 20px;
    border-left: 3px solid #27ae60;
    margin-bottom: 16px;
}

.styled-list strong {
    color: #2c3e50;
}

@media (max-width: 767px) {
    .styled-list {
        list-style-type: none;
        padding-left: 10px;
        font-size: 16px;
        line-height: 1.7;
    }
}

/* Témoignage / avis */
.article-testimonial {
    border-left: 4px solid #f1c40f;
    background-color: #fefdf9;
    padding: 15px 20px 15px 40px;
    margin: 20px 0;
    font-style: italic;
    color: #555;
    text-align: left;
    position: relative;
}

.article-testimonial-quote {
    font-family: Georgia, serif;
    font-size: 60px;
    color: #f1c40f;
    position: absolute;
    left: 10px;
    top: 0;
}

.article-testimonial p {
    margin: 0;
}

.article-testimonial p:first-of-type {
    margin-bottom: 10px;
}

/* À lire aussi */
.related-articles-heading {
    color: #2c3e50;
    border-top: 1px solid #dddddd;
    padding-top: 20px;
    margin-top: 40px;
    text-align: left;
    font-size: 24px;
    margin-bottom: 15px;
}

.related-articles-list {
    text-align: left;
    list-style-type: none;
    padding-left: 0;
}

.related-articles-list li {
    margin-bottom: 10px;
}

.related-articles-link {
    color: #005A9C;
    text-decoration: none;
}

/* FAQ article */
.faq-heading {
    color: #2c3e50;
    text-align: left;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 25px;
}

.faq-item {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.faq-item h3 {
    
    text-align: left;
    
    margin-top: 0;
    margin-bottom: 10px;
}



.faq-item p {
    
    font-size: 16px;
    
    text-align: left;
    
    padding-left: 28px;
}

/* Images articles */
.article-image {
    max-width: 65%;
    height: auto;
    display: block;
    margin: 15px auto 30px auto;
    border-radius: 8px;
}

/* Conteneur des articles */
.article-container {
    max-width: 900px;
    margin: 10px auto 0 auto;
    font-family: Arial, sans-serif;
    line-height: 1.7;
    background-color: #ffffff;
    padding: 20px 25px 20px 25px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
    .article-container {
        padding: 15px;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Paragraphes articles */
.article-paragraph {
    margin-bottom: 20px;
    font-size: 16px;
    color: #333333;
    text-align: left;
}

/* =========================================================
   FORMULAIRE
   ========================================================= */

.contact-inject {
    margin-top: 3rem;
}







.contact-inject .btn {
    border-radius: 0.75rem;
}



/* Honeypot : invisible pour l’utilisateur, présent dans le DOM */
.contact-inject .hp-wrap {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 576px) {
    .contact-inject .card-body {
        padding: 1.25rem;
    }
}

/* =========================================================
   BUSINESS LANDING V2
   Structure dédiée aux pages business locales
   ========================================================= */

/* Le conteneur article devient plus large et plus neutre pour une landing */
.article-container:has(.business-landing-v2) {
    max-width: 1180px;
    margin: 18px auto 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Base générale */
.business-landing-v2 {
    
    
    
    
    
    
    

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
    font-size: 17px;
    color: var(--business-text);
    line-height: 1.65;
    background: var(--business-bg);
    border-radius: 28px;
    padding: 34px;
}

/* =========================================================
   HERO
   ========================================================= */

.business-landing-v2 .business-hero {
    
    border: 1px solid var(--business-border);
    border-radius: 28px;
    padding: 46px 46px 34px;
    box-shadow: 0 18px 45px rgba(20, 60, 40, 0.08);
    margin-bottom: 34px;
}

.business-landing-v2 .business-hero-content {
    max-width: 920px;
    margin: 0 auto 28px auto;
    text-align: center;
}

.business-landing-v2 .business-title {
    max-width: 980px;
    margin: 0 auto 18px auto;
    font-size: clamp(2.35rem, 3.6vw, 3.55rem);
    line-height: 1.05;
    letter-spacing: -0.045em;
    font-weight: 800;
    color: #102018;
}

.business-landing-v2 .business-intro {
    max-width: 820px;
    margin: 0 auto 24px auto;
    font-size: 1.22rem;
    line-height: 1.65;
    color: var(--business-muted);
}

.business-landing-v2 .business-hero-media {
    margin-top: 28px;
}

.business-landing-v2 .business-hero-media .article-figure {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
}

.business-landing-v2 .business-hero-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   TITRES DE SECTION
   ========================================================= */

.business-landing-v2 .business-section-head {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 24px auto;
}

.business-landing-v2 .business-section-title,
.business-landing-v2 .faq-heading {
    margin: 0;
    font-size: clamp(1.75rem, 2.3vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 750;
    color: #13241b;
}

/* =========================================================
   PROBLÈMES
   ========================================================= */

.business-landing-v2 .business-problems {
    background: #ffffff;
    border: 1px solid var(--business-border);
    border-radius: 26px;
    padding: 38px;
    margin-bottom: 28px;
    box-shadow: 0 12px 34px rgba(20, 60, 40, 0.045);
}

.business-landing-v2 .business-problem-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.business-landing-v2 .business-problem-card {
    position: relative;
    min-height: 125px;
    background: #f9fbfa;
    border: 1px solid rgba(20, 92, 58, 0.12);
    border-radius: 20px;
    padding: 26px 28px 24px 66px;
    box-shadow: 0 8px 22px rgba(20, 60, 40, 0.04);
}

.business-landing-v2 .business-problem-card::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 30px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--business-green);
    
}

.business-landing-v2 .business-problem-card p {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.65;
    color: #26372d;
}

/* =========================================================
   SOLUTION + CTA INTERMÉDIAIRE
   ========================================================= */

.business-landing-v2 .business-solution-band {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.8fr);
    gap: 30px;
    align-items: center;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.16), transparent 35%),
        linear-gradient(135deg, var(--business-green) 0%, var(--business-green-dark) 100%);
    color: #ffffff;
    border-radius: 28px;
    padding: 42px;
    margin-bottom: 30px;
    box-shadow: 0 20px 46px rgba(15, 66, 43, 0.24);
}

.business-landing-v2 .business-solution-band .business-section-title {
    color: #ffffff;
    margin-bottom: 16px;
}

.business-landing-v2 .business-solution-copy p {
    max-width: 720px;
    margin: 0 0 12px 0;
    font-size: 1.18rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.92);
}

.business-landing-v2 .business-solution-copy p:last-child {
    margin-bottom: 0;
}

.business-landing-v2 .business-solution-action {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    padding: 28px;
    text-align: center;
    backdrop-filter: blur(6px);
}

.business-landing-v2 .business-action-label {
    margin: 0 0 16px 0;
    font-size: 1.12rem;
    font-weight: 700;
    color: #ffffff;
}

/* =========================================================
   CTA INJECTÉS
   ========================================================= */

.business-landing-v2 .business-cta {
    text-align: center;
}

.business-landing-v2 .business-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    padding: 0.9rem 1.6rem;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    background: var(--business-green);
    border: 1px solid var(--business-green);
    color: #ffffff;
    
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.business-landing-v2 .business-cta-button:hover {
    transform: translateY(-1px);
    background: var(--business-green-dark);
    border-color: var(--business-green-dark);
    color: #ffffff;
    
}

.business-landing-v2 .business-cta-note {
    margin: 0.75rem 0 0 0;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--business-muted);
}

/* CTA dans le hero */
.business-landing-v2 .business-hero .business-cta {
    margin-top: 6px;
}

/* CTA dans le bandeau vert */
.business-landing-v2 .business-solution-band .business-cta {
    margin: 0;
}

.business-landing-v2 .business-solution-band .business-cta-button {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--business-green-dark);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.business-landing-v2 .business-solution-band .business-cta-button:hover {
    background: #f2f7f3;
    border-color: #f2f7f3;
    color: var(--business-green-dark);
}

.business-landing-v2 .business-solution-band .business-cta-note {
    color: rgba(255, 255, 255, 0.84);
}

/* =========================================================
   ÉTAPES / RÉASSURANCE
   ========================================================= */

.business-landing-v2 .business-steps {
    background: #ffffff;
    border: 1px solid var(--business-border);
    border-radius: 26px;
    padding: 38px;
    margin-bottom: 28px;
    box-shadow: 0 12px 34px rgba(20, 60, 40, 0.045);
}

.business-landing-v2 .business-step-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    counter-reset: business-step;
}

.business-landing-v2 .business-step-card {
    position: relative;
    min-height: 155px;
    background: #f9fbfa;
    border: 1px solid rgba(20, 92, 58, 0.12);
    border-radius: 22px;
    padding: 68px 22px 24px 22px;
    text-align: center;
}

.business-landing-v2 .business-step-card::before {
    counter-increment: business-step;
    content: counter(business-step);
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--business-green);
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 0 0 8px rgba(20, 92, 58, 0.10);
}

.business-landing-v2 .business-step-card p {
    margin: 0;
    font-size: 1.10rem;
    line-height: 1.65;
    color: #26372d;
}

/* =========================================================
   ZONE ET DEMANDES CONCERNÉES — CARTES TYPÉES
   ========================================================= */

.business-landing-v2 .business-zone-panel {
    
    border: 1px solid rgba(20, 92, 58, 0.12);
    border-radius: 26px;
    padding: 38px;
    margin-bottom: 30px;
}

.business-landing-v2 .business-zone-content {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    text-align: left;
}

.business-landing-v2 .business-zone-card {
    margin: 0;
    padding: 20px;
    border-radius: 18px;
    border: 1px solid rgba(20, 92, 58, 0.12);
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(20, 60, 40, 0.035);
}



.business-landing-v2 .business-zone-label {
    display: inline-flex;
    margin-bottom: 10px;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--business-green);
}

.business-landing-v2 .business-zone-card p {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.65;
    color: #2a3c31;
}

/* =========================================================
   FAQ
   ========================================================= */

.business-landing-v2 .business-faq {
    background: #ffffff;
    border: 1px solid var(--business-border);
    border-radius: 26px;
    padding: 38px;
    margin-bottom: 28px;
    box-shadow: 0 12px 34px rgba(20, 60, 40, 0.045);
}

.business-landing-v2 .faq-heading {
    margin: 0;
    color: #13241b;
}

.business-landing-v2 .faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.business-landing-v2 .faq-item {
    border: 1px solid rgba(20, 92, 58, 0.12);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 14px;
    background: #fbfdfc;
    box-shadow: 0 6px 18px rgba(20, 60, 40, 0.035);
}

.business-landing-v2 .faq-item:last-child {
    margin-bottom: 0;
}

.business-landing-v2 .faq-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.18rem;
    line-height: 1.4;
    font-weight: 750;
    color: #17231c;
}

.business-landing-v2 .faq-item h3 span {
    color: var(--business-green);
    font-weight: 800;
    margin-right: 8px;
}

.business-landing-v2 .faq-item p {
    margin: 0;
    padding-left: 30px;
    font-size: 1.08rem;
    line-height: 1.7;
    color: #4b5b52;
}

/* =========================================================
   CTA FINAL FORT
   ========================================================= */

/* Sécurité : masque les anciennes sorties HTML si elles existent encore */
.business-landing-v2 .business-final-intro {
    display: none;
}

.business-landing-v2 .business-cta-final {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.business-landing-v2 .business-cta-final-strong .business-final-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 30px;
    align-items: center;
    padding: 34px 38px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 38%),
        linear-gradient(135deg, var(--business-green) 0%, var(--business-green-dark) 100%);
    color: #ffffff;
    box-shadow: 0 20px 46px rgba(15, 66, 43, 0.24);
}

.business-landing-v2 .business-cta-final-strong .business-final-card-copy {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}

.business-landing-v2 .business-cta-final-strong .business-final-card-title {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #ffffff;
}

.business-landing-v2 .business-cta-final-strong .business-final-card-text {
    font-size: 1.05rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
}

.business-landing-v2 .business-cta-final-strong .business-final-card-action {
    display: flex;
    justify-content: flex-end;
}

.business-landing-v2 .business-cta-final-strong .business-cta-button {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--business-green-dark);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.business-landing-v2 .business-cta-final-strong .business-cta-button:hover {
    background: #f2f7f3;
    border-color: #f2f7f3;
    color: var(--business-green-dark);
}

/* =========================================================
   TABLETTE / MOBILE
   ========================================================= */

@media (max-width: 900px) {
    .article-container:has(.business-landing-v2) {
        margin: 0;
    }

    .business-landing-v2 {
        padding: 20px;
        border-radius: 0;
    }

    .business-landing-v2 .business-hero,
    .business-landing-v2 .business-problems,
    .business-landing-v2 .business-steps,
    .business-landing-v2 .business-zone-panel,
    .business-landing-v2 .business-faq {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .business-landing-v2 .business-solution-band {
        grid-template-columns: 1fr;
        padding: 30px 24px;
        border-radius: 22px;
    }

    .business-landing-v2 .business-problem-grid,
    .business-landing-v2 .business-step-grid,
    .business-landing-v2 .business-zone-content {
        grid-template-columns: 1fr;
    }

    .business-landing-v2 .business-zone-card {
        padding: 18px;
    }

    .business-landing-v2 .business-hero-media .article-image {
    height: auto;
	}
}

/* =========================================================
   MOBILE — FAQ
   ========================================================= */

@media (max-width: 576px) {
    .business-landing-v2 .business-faq {
        padding: 26px 16px;
    }

    .business-landing-v2 .business-faq .business-section-head {
        text-align: left;
        margin-bottom: 22px;
    }

    .business-landing-v2 .business-faq .faq-heading {
        font-size: 2rem;
        line-height: 1.15;
        text-align: left;
    }

    .business-landing-v2 .faq-list {
        max-width: none;
        width: 100%;
    }

    .business-landing-v2 .faq-item {
        padding: 18px 16px;
        border-radius: 18px;
    }

    .business-landing-v2 .faq-item h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        font-size: 1.05rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .business-landing-v2 .faq-item h3 span {
        margin-right: 0;
        line-height: 1.35;
    }

    .business-landing-v2 .faq-item p {
        padding-left: 0;
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   MOBILE — CTA FINAL FORT
   ========================================================= */

@media (max-width: 700px) {
    .business-landing-v2 .business-cta-final-strong .business-final-card {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
    }

    .business-landing-v2 .business-cta-final-strong .business-final-card-copy {
        text-align: center;
    }

    .business-landing-v2 .business-cta-final-strong .business-final-card-action {
        justify-content: center;
    }

    .business-landing-v2 .business-cta-final-strong .business-cta-button {
        width: 100%;
        max-width: 320px;
    }
}

/* =========================================================
   BUSINESS LANDING V2 — HERO DIRECT DESKTOP
   ========================================================= */

@media (min-width: 901px) {
    .business-landing-v2 .business-hero {
        padding: 48px 52px 42px;
    }

    .business-landing-v2 .business-hero-content {
        max-width: 900px;
        margin: 0 0 30px 0;
        text-align: left;
    }

    .business-landing-v2 .business-title {
        max-width: 880px;
        margin: 0 0 22px 0;
        font-size: clamp(2.45rem, 4.4vw, 3.75rem);
        line-height: 1.04;
        letter-spacing: -0.045em;
        font-weight: 800;
    }

    .business-landing-v2 .business-intro {
        max-width: 720px;
        margin: 0 0 26px 0;
        font-size: 1.16rem;
        line-height: 1.7;
    }

    .business-landing-v2 .business-hero .business-cta {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        text-align: left;
    }

    .business-landing-v2 .business-hero .business-cta-note {
        margin: 0;
        font-size: 0.98rem;
        color: var(--business-muted);
    }
}

/* =========================================================
   CATEGORY HUB V1
   Structure dédiée aux pages catégories / hubs de cocon
   ========================================================= */

/* Le conteneur article devient plus large et plus neutre pour une page catégorie */
.article-container:has(.category-hub-v1) {
    max-width: 1120px;
    margin: 18px auto 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Base générale */
.category-hub-v1 {
    
    
    
    
    
    
    
    
    

    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 17px;
    color: var(--category-text);
    line-height: 1.65;
    background: var(--category-bg);
    border-radius: 28px;
    padding: 34px;
}

/* =========================================================
   HERO CATÉGORIE
   ========================================================= */

.category-hub-v1 .category-hero {
    background:
        radial-gradient(circle at top left, rgba(36, 71, 102, 0.10), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #eef4f8 100%);
    border: 1px solid var(--category-border);
    border-radius: 28px;
    padding: 44px 46px 34px;
    box-shadow: 0 16px 42px rgba(25, 55, 80, 0.07);
    margin-bottom: 30px;
}

.category-hub-v1 .category-hero-content {
    max-width: 900px;
    margin: 0 0 28px 0;
    text-align: left;
}

.category-hub-v1 .category-title {
    max-width: 920px;
    margin: 0 0 18px 0;
    font-size: clamp(2.25rem, 4vw, 3.55rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: #102018;
}

.category-hub-v1 .category-intro {
    max-width: 980px;
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--category-muted);
}

.category-hub-v1 .category-intro:last-child {
    margin-bottom: 0;
}

.category-hub-v1 .category-hero-media {
    margin-top: 28px;
}

.category-hub-v1 .category-hero-media .article-figure {
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #dfe8ec;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
}

.category-hub-v1 .category-hero-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   TITRES DE SECTION
   ========================================================= */

.category-hub-v1 .category-section-head {
    text-align: left;
    max-width: 840px;
    margin: 0 0 24px 0;
}

.category-hub-v1 .category-section-title,
.category-hub-v1 .faq-heading {
    margin: 0;
    font-size: clamp(1.65rem, 2.2vw, 2.25rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 780;
    color: #13241b;
}

/* =========================================================
   SITUATIONS
   ========================================================= */

.category-hub-v1 .category-situations {
    background: #ffffff;
    border: 1px solid var(--category-border);
    border-radius: 26px;
    padding: 36px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(25, 55, 80, 0.045);
}

.category-hub-v1 .category-situation-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.category-hub-v1 .category-situation-card {
    position: relative;
    background: #f9fbfa;
    border: 1px solid rgba(20, 92, 58, 0.11);
    border-radius: 18px;
    padding: 22px 24px 22px 58px;
    box-shadow: 0 6px 18px rgba(20, 60, 40, 0.035);
}

.category-hub-v1 .category-situation-card::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 28px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--category-green);
    
}

.category-hub-v1 .category-situation-card p {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.65;
    color: #293a31;
}

/* =========================================================
   GRANDES FAMILLES
   ========================================================= */

.category-hub-v1 .category-families {
    background: #ffffff;
    border: 1px solid var(--category-border);
    border-radius: 26px;
    padding: 36px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(25, 55, 80, 0.045);
}

.category-hub-v1 .category-family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.category-hub-v1 .category-family-card {
    background: #f9fbfa;
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 8px 22px rgba(25, 55, 80, 0.04);
}

.category-hub-v1 .category-family-card h3 {
    margin: 0 0 12px 0;
    font-size: 1.22rem;
    line-height: 1.3;
    font-weight: 780;
    color: var(--category-blue);
}

.category-hub-v1 .category-family-card p {
    margin: 0 0 12px 0;
    font-size: 1.02rem;
    line-height: 1.68;
    color: #34443b;
}

.category-hub-v1 .category-family-card p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   BLOC ENFANTS / PAGES LIÉES
   ========================================================= */

.category-hub-v1 .category-child-links {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.20), transparent 36%),
        linear-gradient(135deg, var(--category-blue) 0%, #162f46 100%);
    color: #ffffff;
    border-radius: 28px;
    padding: 38px;
    margin-bottom: 30px;
    box-shadow: 0 18px 42px rgba(22, 47, 70, 0.22);
}

.category-hub-v1 .category-child-links .category-section-title {
    color: #ffffff;
}

.category-hub-v1 .category-child-links-intro {
    max-width: 760px;
    margin: -8px 0 24px 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

/* Styles génériques si le bloc injecté contient une liste */
.category-hub-v1 .category-child-links ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-hub-v1 .category-child-links li {
    margin: 0;
}

.category-hub-v1 .category-child-links a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.category-hub-v1 .category-child-links a:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

/* Compatibilité si le bloc utilise une classe existante de liens */
.category-hub-v1 .category-child-links .related-articles-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-hub-v1 .category-child-links .related-articles-link {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
}

/* =========================================================
   POINTS D’ATTENTION
   ========================================================= */

.category-hub-v1 .category-attention {
    
    border: 1px solid rgba(20, 92, 58, 0.12);
    border-radius: 26px;
    padding: 36px;
    margin-bottom: 28px;
}

.category-hub-v1 .category-attention-content {
    max-width: 920px;
}

.category-hub-v1 .category-attention-content p {
    margin: 0 0 20px 0;
    font-size: 1.06rem;
    line-height: 1.7;
    color: #2b3f34;
}

.category-hub-v1 .category-attention-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-hub-v1 .category-attention-list li {
    position: relative;
    margin: 0;
    padding: 18px 20px 18px 48px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(20, 92, 58, 0.12);
    color: #304238;
    line-height: 1.65;
    box-shadow: 0 6px 18px rgba(20, 60, 40, 0.03);
}

.category-hub-v1 .category-attention-list li::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 26px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--category-green);
}

.category-hub-v1 .category-attention-list strong {
    color: #17231c;
    font-weight: 800;
}

/* =========================================================
   CONTEXTE LOCAL / CRITÈRES PRATIQUES
   ========================================================= */

.category-hub-v1 .category-context {
    background: #ffffff;
    border: 1px solid var(--category-border);
    border-radius: 26px;
    padding: 36px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(25, 55, 80, 0.04);
}

.category-hub-v1 .category-context-content {
    max-width: 920px;
}

.category-hub-v1 .category-context-content p {
    margin: 0;
    font-size: 1.06rem;
    line-height: 1.75;
    color: #34443b;
}

/* =========================================================
   FAQ CATÉGORIE
   ========================================================= */

.category-hub-v1 .category-faq {
    background: #ffffff;
    border: 1px solid var(--category-border);
    border-radius: 26px;
    padding: 36px;
    margin-bottom: 28px;
    box-shadow: 0 10px 30px rgba(25, 55, 80, 0.04);
}

.category-hub-v1 .category-faq .faq-heading {
    color: #13241b;
}

.category-hub-v1 .category-faq .faq-list {
    max-width: 920px;
    margin: 0;
}

.category-hub-v1 .category-faq .faq-item {
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 14px;
    background: #fbfdfc;
    box-shadow: 0 6px 18px rgba(25, 55, 80, 0.03);
}

.category-hub-v1 .category-faq .faq-item:last-child {
    margin-bottom: 0;
}

.category-hub-v1 .category-faq .faq-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.13rem;
    line-height: 1.4;
    font-weight: 780;
    color: #17231c;
}

.category-hub-v1 .category-faq .faq-item h3 span {
    color: var(--category-blue);
    font-weight: 800;
    margin-right: 8px;
}

.category-hub-v1 .category-faq .faq-item p {
    margin: 0;
    padding-left: 30px;
    font-size: 1.04rem;
    line-height: 1.68;
    color: #4b5b52;
}

/* =========================================================
   TABLETTE / MOBILE — CATEGORY HUB V1
   ========================================================= */

@media (max-width: 900px) {
    .article-container:has(.category-hub-v1) {
        margin: 0;
    }

    .category-hub-v1 {
        padding: 20px;
        border-radius: 0;
    }

    .category-hub-v1 .category-hero,
    .category-hub-v1 .category-situations,
    .category-hub-v1 .category-families,
    .category-hub-v1 .category-child-links,
    .category-hub-v1 .category-attention,
    .category-hub-v1 .category-context,
    .category-hub-v1 .category-faq {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .category-hub-v1 .category-situation-grid,
    .category-hub-v1 .category-family-grid,
    .category-hub-v1 .category-child-links ul,
    .category-hub-v1 .category-child-links .related-articles-list {
        grid-template-columns: 1fr;
    }

    .category-hub-v1 .category-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    .category-hub-v1 .category-intro {
        font-size: 1.06rem;
        line-height: 1.68;
    }

    .category-hub-v1 .category-hero-media .article-image {
        height: auto;
    }
}

@media (max-width: 576px) {
    .category-hub-v1 .category-section-title,
    .category-hub-v1 .faq-heading {
        font-size: 1.85rem;
        line-height: 1.15;
    }

    .category-hub-v1 .category-situation-card {
        padding: 20px 18px 20px 50px;
    }

    .category-hub-v1 .category-situation-card::before {
        left: 20px;
    }

    .category-hub-v1 .category-family-card {
        padding: 20px;
    }

    .category-hub-v1 .category-attention-list li {
        padding: 16px 16px 16px 42px;
    }

    .category-hub-v1 .category-attention-list li::before {
        left: 19px;
    }

    .category-hub-v1 .category-faq .faq-item {
        padding: 18px 16px;
    }

    .category-hub-v1 .category-faq .faq-item h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        font-size: 1.04rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .category-hub-v1 .category-faq .faq-item h3 span {
        margin-right: 0;
        line-height: 1.35;
    }

    .category-hub-v1 .category-faq .faq-item p {
        padding-left: 0;
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   CATEGORY HUB V1 — BLOC ENFANTS CATÉGORIE
   ========================================================= */

.category-hub-v1 .category-child-links-block {
    margin: 0;
    padding: 0;
    color: #ffffff;
}

.category-hub-v1 .category-child-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-hub-v1 .category-child-link-list li {
    margin: 0;
    padding: 0;
}

.category-hub-v1 .category-child-link-list a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.category-hub-v1 .category-child-link-list a:hover,
.category-hub-v1 .category-child-link-list a:focus {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.34);
    color: #ffffff;
}

@media (max-width: 900px) {
    .category-hub-v1 .category-child-link-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CATEGORY HUB V1 — CORRECTION COULEUR LIENS ENFANTS
   ========================================================= */

.category-hub-v1 .category-child-links .category-child-link-list a,
.category-hub-v1 .category-child-links .category-child-links-block a,
.category-hub-v1 .category-child-links ul a {
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #17324a !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}



/* =========================================================
   CATEGORY HUB V1 — LIEN PARENT DYNAMIQUE / APPROFONDIR
   ========================================================= */

.category-hub-v1 .category-parent-nav {
    margin: 14px 0 18px 0;
}

.category-hub-v1 .cocon-parent-link-block {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    max-width: 900px;
    padding: 4px 0 12px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(54, 78, 104, 0.12);
    box-shadow: none;
    color: #24384b;
}

.category-hub-v1 .cocon-parent-icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(54, 78, 104, 0.07);
    border: 1px solid rgba(54, 78, 104, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.category-hub-v1 .cocon-parent-icon i {
    font-size: 1.28rem;
    line-height: 1;
    color: #244766;
    opacity: 0.88;
}

.category-hub-v1 .cocon-parent-content {
    min-width: 0;
    display: block;
}

.category-hub-v1 .cocon-parent-label {
    display: block;
    margin: 0 0 4px 0;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.category-hub-v1 .cocon-parent-link {
    display: inline;
    color: #244766;
    font-size: 1.04rem;
    line-height: 1.35;
    font-weight: 750;
    text-decoration: none;
    border-bottom: 0;
}

.category-hub-v1 .cocon-parent-link:hover,
.category-hub-v1 .cocon-parent-link:focus {
    color: #132f46;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.category-hub-v1 .cocon-parent-arrow {
    color: #244766;
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 500;
    padding-left: 10px;
}

@media (max-width: 700px) {
    .category-hub-v1 .category-parent-nav {
        margin: 12px 0 16px 0;
    }

    .category-hub-v1 .cocon-parent-link-block {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 2px 0 12px 0;
    }

    .category-hub-v1 .cocon-parent-icon {
        width: 38px;
        height: 38px;
    }

    .category-hub-v1 .cocon-parent-icon::before {
        font-size: 1.12rem;
    }

    .category-hub-v1 .cocon-parent-link {
        font-size: 0.98rem;
        line-height: 1.35;
    }

    .category-hub-v1 .cocon-parent-arrow {
        font-size: 1.15rem;
        padding-left: 4px;
    }
}

/* =========================================================
   SECTIONS COMMUNES
   ========================================================= */

.mother-definition,
.mother-orientation,
.mother-errors,
.mother-faq,
.mother-conclusion {
  margin-bottom: 2.5rem;
}

.mother-section-head {
  margin-bottom: 1rem;
}

.mother-section-title,
.faq-heading {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--mother-text);
}

.mother-section-title::after,
.faq-heading::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: var(--mother-accent);
}

.mother-section-content,
.mother-orientation-content,
.mother-errors-content,
.mother-conclusion-content {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--mother-text);
}

.mother-section-content p,
.mother-orientation-content p,
.mother-errors-content p,
.mother-conclusion-content p {
  margin: 0 0 1rem;
}

.mother-section-content p:last-child,
.mother-orientation-content p:last-child,
.mother-errors-content p:last-child,
.mother-conclusion-content p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   DÉFINITION
   ========================================================= */

.mother-definition {
  padding: 2rem;
  border: 1px solid var(--mother-border);
  border-radius: 1.25rem;
  background: #ffffff;
}

/* =========================================================
   ORIENTATION — CARTES
   ========================================================= */

.mother-orientation {
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--mother-soft-bg);
}

.mother-orientation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.mother-orientation-card {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--mother-border);
  border-radius: 1.15rem;
  background: var(--mother-card-bg);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
}

.mother-orientation-card::before {
  content: "";
  display: block;
  width: 2rem;
  height: 4px;
  margin-bottom: 0.9rem;
  border-radius: 999px;
  background: var(--mother-accent);
}

.mother-orientation-card p {
  margin: 0;
  line-height: 1.65;
}

.mother-orientation-card strong {
  color: var(--mother-text);
}

/* =========================================================
   ERREURS FRÉQUENTES
   ========================================================= */

.mother-errors {
  padding: 2rem;
  border: 1px solid var(--mother-border);
  border-radius: 1.25rem;
  background: #ffffff;
}

.mother-error-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.mother-error-list li {
  position: relative;
  padding: 1rem 1rem 1rem 2.7rem;
  border: 1px solid var(--mother-border);
  border-radius: 1rem;
  background: var(--mother-soft-bg);
  line-height: 1.65;
}

.mother-error-list li::before {
  content: "!";
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--mother-accent-soft);
  color: var(--mother-accent);
  font-size: 0.8rem;
  font-weight: 800;
}

/* =========================================================
   FAQ
   ========================================================= */

.mother-faq {
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--mother-soft-bg);
}

.faq-list {
  display: grid;
  gap: 0.9rem;
}

.faq-item {
  padding: 1.25rem;
  border: 1px solid var(--mother-border);
  border-radius: 1rem;
  background: #ffffff;
}

.faq-item h3 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  line-height: 1.45;
  font-weight: 750;
  color: var(--mother-text);
}

.faq-item h3 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.35rem;
  color: var(--mother-accent);
  font-weight: 850;
}

.faq-item p {
  margin: 0;
  line-height: 1.7;
  color: var(--mother-muted);
}

/* =========================================================
   CONCLUSION
   ========================================================= */

.mother-conclusion {
  padding: 2rem;
  border-radius: 1.25rem;
  background: var(--mother-accent-soft);
}

.mother-conclusion .mother-section-title::after {
  background: var(--mother-accent);
}

.mother-conclusion-content {
  max-width: 78ch;
}

/* =========================================================
   LISTES GÉNÉRIQUES SI BESOIN
   ========================================================= */

.mother-content-list {
  margin: 1rem 0 0;
  padding-left: 1.25rem;
}

.mother-content-list li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px) {
  .mother-hero {
    grid-template-columns: 1fr;
    padding: 1.75rem;
  }

  .mother-hero-media {
    max-width: 680px;
  }

  .mother-orientation-grid {
    grid-template-columns: 1fr;
  }

  .mother-child-nav .category-child-link-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .mother-page.mother-hub-v1 {
    padding: 1.25rem 0.75rem 2.25rem;
  }

  .mother-hero,
  .mother-definition,
  .mother-orientation,
  .mother-errors,
  .mother-faq,
  .mother-conclusion {
    padding: 1.25rem;
    border-radius: 1rem;
  }

  .mother-title {
    font-size: 2rem;
  }

  .mother-intro {
    font-size: 1rem;
  }

  .mother-child-nav {
    padding: 1rem;
  }

  .mother-section-title,
  .faq-heading {
    font-size: 1.45rem;
  }

  .mother-orientation-card,
  .faq-item {
    padding: 1rem;
  }

  .mother-error-list li {
    padding: 0.95rem 0.95rem 0.95rem 2.5rem;
  }
}

/* =========================================================
   PAGE MÈRE — PATCH FINAL HERO COMME CATÉGORIE
   Image sous le titre et le texte
   ========================================================= */

/* Le conteneur article devient large et neutre pour la page mère */
.article-container:has(.mother-hub-v1) {
    max-width: 1120px;
    margin: 18px auto 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Base page mère proche category-hub-v1 */
.mother-page.mother-hub-v1 {
    
    
    
    
    
    
    
    
    

    max-width: none;
    margin: 0;
    padding: 34px;
    border-radius: 28px;
    background: var(--mother-bg);
    color: var(--mother-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* =========================================================
   RESPONSIVE PAGE MÈRE
   ========================================================= */

@media (max-width: 900px) {
    .article-container:has(.mother-hub-v1) {
        margin: 0;
    }

    .mother-page.mother-hub-v1 {
        padding: 20px;
        border-radius: 0;
    }

    .mother-page.mother-hub-v1 .mother-hero,
    .mother-page.mother-hub-v1 .mother-child-links,
    .mother-page.mother-hub-v1 .mother-definition,
    .mother-page.mother-hub-v1 .mother-orientation,
    .mother-page.mother-hub-v1 .mother-errors,
    .mother-page.mother-hub-v1 .mother-faq,
    .mother-page.mother-hub-v1 .mother-conclusion {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .mother-page.mother-hub-v1 .mother-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    .mother-page.mother-hub-v1 .mother-intro {
        font-size: 1.06rem;
        line-height: 1.68;
    }

    .mother-page.mother-hub-v1 .mother-child-links .category-child-link-list,
    .mother-page.mother-hub-v1 .mother-orientation-grid {
        grid-template-columns: 1fr;
    }

    .mother-page.mother-hub-v1 .mother-hero-media .article-image {
        height: auto;
    }
}

@media (max-width: 576px) {
    .mother-page.mother-hub-v1 .mother-section-title,
    .mother-page.mother-hub-v1 .faq-heading {
        font-size: 1.85rem;
        line-height: 1.15;
    }

    .mother-page.mother-hub-v1 .mother-child-links .category-child-link-list a {
        padding: 16px 18px;
    }

    .mother-page.mother-hub-v1 .mother-faq .faq-item {
        padding: 18px 16px;
    }

    .mother-page.mother-hub-v1 .mother-faq .faq-item h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        font-size: 1.04rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .mother-page.mother-hub-v1 .mother-faq .faq-item h3 span {
        margin-right: 0;
        line-height: 1.35;
    }

    .mother-page.mother-hub-v1 .mother-faq .faq-item p {
        padding-left: 0;
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   PAGE MÈRE — ORDRE FINAL SEO
   Hero -> Définition -> Rubriques
   ========================================================= */

/* Hero vertical : titre + intro + image en dessous */
.mother-page.mother-hub-v1 .mother-hero {
    display: block !important;
    margin-bottom: 30px;
    padding: 44px 46px 34px;
    border: 1px solid var(--mother-border);
    border-radius: 28px;
    
    box-shadow: 0 16px 42px rgba(25, 55, 80, 0.07);
}

.mother-page.mother-hub-v1 .mother-hero-content {
    display: block !important;
    max-width: 900px;
    margin: 0 0 28px 0;
    text-align: left;
}

.mother-page.mother-hub-v1 .mother-title {
    max-width: 920px;
    margin: 0 0 18px 0;
    font-size: clamp(2.25rem, 4vw, 3.55rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: #102018;
}

.mother-page.mother-hub-v1 .mother-intro {
    max-width: 980px;
    margin: 0 0 12px 0;
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--mother-muted);
}

.mother-page.mother-hub-v1 .mother-hero-media {
    display: block !important;
    margin-top: 28px;
    padding: 0;
    min-height: 0;
    max-width: none;
    border-radius: 24px;
    overflow: hidden;
    
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
}

.mother-page.mother-hub-v1 .mother-hero-media .article-figure {
    width: 100%;
    margin: 0;
}

.mother-page.mother-hub-v1 .mother-hero-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
    aspect-ratio: auto;
}

/* Nouvelle section rubriques, après la définition */
.mother-page.mother-hub-v1 .mother-child-links {
    margin-bottom: 30px;
    padding: 38px;
    border-radius: 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.20), transparent 36%),
        linear-gradient(135deg, var(--mother-blue, #244766) 0%, #162f46 100%);
    box-shadow: 0 18px 42px rgba(22, 47, 70, 0.22);
}

.mother-page.mother-hub-v1 .mother-child-links .mother-section-title {
    color: #ffffff;
}

.mother-page.mother-hub-v1 .mother-child-links .mother-section-title::after {
    background: rgba(255, 255, 255, 0.75);
}

.mother-page.mother-hub-v1 .mother-child-links-intro {
    max-width: 760px;
    margin: -8px 0 24px 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
}

.mother-page.mother-hub-v1 .mother-child-links .category-child-links-block {
    margin: 0;
    padding: 0;
}

.mother-page.mother-hub-v1 .mother-child-links .category-child-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mother-page.mother-hub-v1 .mother-child-links .category-child-link-list li {
    margin: 0;
    padding: 0;
}

.mother-page.mother-hub-v1 .mother-child-links .category-child-link-list a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #17324a;
    text-decoration: none;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.mother-page.mother-hub-v1 .mother-child-links .category-child-link-list a:hover,
.mother-page.mother-hub-v1 .mother-child-links .category-child-link-list a:focus {
    transform: translateY(-1px);
    background: #f2f7f3;
    color: #0f422b;
    border-color: rgba(255, 255, 255, 0.42);
}

/* Sécurité : masquer l'ancien bloc s'il existe encore dans un ancien HTML */
.mother-page.mother-hub-v1 .mother-child-nav {
    display: none !important;
}

@media (max-width: 900px) {
    .mother-page.mother-hub-v1 .mother-hero,
    .mother-page.mother-hub-v1 .mother-child-links {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .mother-page.mother-hub-v1 .mother-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    .mother-page.mother-hub-v1 .mother-intro {
        font-size: 1.06rem;
        line-height: 1.68;
    }

    .mother-page.mother-hub-v1 .mother-child-links .category-child-link-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PAGE INFORMATIONNELLE — info-article-v1
   Structure dédiée aux articles informationnels SitesGen
   ========================================================= */

/* Le conteneur article devient plus large et neutre pour une page informationnelle */
.article-container:has(.info-article-v1) {
    max-width: 1080px;
    margin: 18px auto 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Base générale */
.info-page.info-article-v1 {
    
    
    
    
    
    
    
    
    
    

    padding: 34px;
    border-radius: 28px;
    background: var(--info-bg);
    color: var(--info-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* =========================================================
   HERO INFORMATIONNEL
   ========================================================= */

.info-article-v1 .info-hero {
    display: block;
    margin-bottom: 30px;
    padding: 44px 46px 34px;
    border: 1px solid var(--info-border);
    border-radius: 28px;
    
    box-shadow: 0 16px 42px rgba(25, 55, 80, 0.07);
}

.info-article-v1 .info-hero-content {
    max-width: 900px;
    margin: 0 0 28px 0;
    text-align: left;
}

.info-article-v1 .info-title {
    max-width: 920px;
    margin: 0 0 18px 0;
    font-size: clamp(2.15rem, 4vw, 3.45rem);
    line-height: 1.06;
    letter-spacing: -0.05em;
    font-weight: 800;
    color: #102018;
}

.info-article-v1 .info-intro {
    max-width: 980px;
    margin: 0 0 12px 0;
    font-size: 1.14rem;
    line-height: 1.75;
    color: var(--info-muted);
}

.info-article-v1 .info-intro:last-child {
    margin-bottom: 0;
}

/* Image hero */
.info-article-v1 .info-hero-media {
    display: block;
    margin-top: 28px;
    border-radius: 24px;
    overflow: hidden;
    background: #dfe8ec;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14);
}

.info-article-v1 .info-hero-media .article-figure {
    width: 100%;
    margin: 0;
}

.info-article-v1 .info-hero-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   BLOC PARENT DYNAMIQUE
   ========================================================= */

.info-article-v1 .info-parent-nav {
    margin: 16px 0 18px 0;
}

.info-article-v1 .cocon-parent-link-block {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    max-width: 900px;
    padding: 4px 0 12px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(54, 78, 104, 0.12);
    box-shadow: none;
    color: #24384b;
}

.info-article-v1 .cocon-parent-icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(54, 78, 104, 0.07);
    border: 1px solid rgba(54, 78, 104, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.info-article-v1 .cocon-parent-icon i {
    font-size: 1.28rem;
    line-height: 1;
    color: var(--info-blue);
    opacity: 0.88;
}

.info-article-v1 .cocon-parent-content {
    min-width: 0;
    display: block;
}

.info-article-v1 .cocon-parent-label {
    display: block;
    margin: 0 0 4px 0;
    font-size: 0.78rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.info-article-v1 .cocon-parent-link {
    display: inline;
    color: var(--info-blue);
    font-size: 1.04rem;
    line-height: 1.35;
    font-weight: 750;
    text-decoration: none;
}

.info-article-v1 .cocon-parent-link:hover,
.info-article-v1 .cocon-parent-link:focus {
    color: #132f46;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.info-article-v1 .cocon-parent-arrow {
    color: var(--info-blue);
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 500;
    padding-left: 10px;
}

/* =========================================================
   CONTENU INFORMATIONNEL
   ========================================================= */

.info-article-v1 .info-content {
    display: grid;
    gap: 28px;
}

.info-article-v1 .info-section,
.info-article-v1 .info-faq,
.info-article-v1 .info-conclusion {
    background: #ffffff;
    border: 1px solid var(--info-border);
    border-radius: 26px;
    padding: 36px;
    box-shadow: 0 10px 30px rgba(25, 55, 80, 0.04);
}

.info-article-v1 .info-answer {
    background: #ffffff;
}

.info-article-v1 .info-explanation {
    background: #fbfdfc;
}

.info-article-v1 .info-adaptive {
    background: var(--info-blue-soft);
}

.info-article-v1 .info-warning {
    background: var(--info-green-soft);
    border-color: rgba(20, 92, 58, 0.14);
}

.info-article-v1 .info-section-head {
    max-width: 860px;
    margin: 0 0 22px 0;
    text-align: left;
}

.info-article-v1 .info-section-title,
.info-article-v1 .faq-heading {
    margin: 0;
    font-size: clamp(1.55rem, 2.2vw, 2.15rem);
    line-height: 1.18;
    letter-spacing: -0.035em;
    font-weight: 780;
    color: #13241b;
}

.info-article-v1 .info-section-title::after,
.info-article-v1 .faq-heading::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: var(--info-green);
}

.info-article-v1 .info-section-content {
    max-width: 920px;
}

.info-article-v1 .info-paragraph {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #2d3d34;
}

.info-article-v1 .info-paragraph:last-child {
    margin-bottom: 0;
}

/* =========================================================
   H3 / SOUS-SECTIONS
   ========================================================= */

.info-article-v1 .info-subsection {
    margin: 1.35rem 0 0 0;
    padding: 1.25rem;
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.info-article-v1 .info-subsection:first-child {
    margin-top: 0;
}

.info-article-v1 .info-subtitle {
    margin: 0 0 0.75rem 0;
    font-size: 1.18rem;
    line-height: 1.35;
    font-weight: 780;
    color: var(--info-blue);
}

/* =========================================================
   LISTES
   ========================================================= */

.info-article-v1 .info-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0 0;
}

.info-article-v1 .info-list li {
    position: relative;
    margin: 0;
    padding: 18px 20px 18px 48px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid rgba(20, 92, 58, 0.12);
    color: #304238;
    line-height: 1.65;
    
}

.info-article-v1 .info-list li::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 27px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--info-green);
}

.info-article-v1 .info-list strong {
    color: #17231c;
    font-weight: 800;
}

/* =========================================================
   IMAGES BODY
   ========================================================= */

.info-article-v1 .info-section-media {
    margin: 28px 0 0 0;
    border-radius: 22px;
    overflow: hidden;
    background: #dfe8ec;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.info-article-v1 .info-section-media .article-figure {
    margin: 0;
}

.info-article-v1 .info-section-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   CALLOUTS / BLOCKQUOTES
   ========================================================= */

.info-article-v1 .info-callout {
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem;
    border-left: 4px solid var(--info-green);
    border-radius: 0 16px 16px 0;
    
    
}

.info-article-v1 .info-callout p {
    margin: 0;
    font-size: 1.03rem;
    line-height: 1.7;
}

/* =========================================================
   TABLEAUX
   ========================================================= */

.info-article-v1 .info-table-wrap {
    overflow-x: auto;
    margin: 1.5rem 0 0 0;
    border: 1px solid var(--info-border);
    border-radius: 18px;
    background: #ffffff;
}

.info-article-v1 .info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.info-article-v1 .info-table th,
.info-article-v1 .info-table td {
    padding: 0.95rem 1rem;
    border-bottom: 1px solid rgba(36, 71, 102, 0.10);
    text-align: left;
    vertical-align: top;
}

.info-article-v1 .info-table th {
    background: #eef4f8;
    color: #13241b;
    font-weight: 780;
}

.info-article-v1 .info-table tr:last-child td {
    border-bottom: 0;
}

/* =========================================================
   FAQ INFORMATIONNELLE
   ========================================================= */

.info-article-v1 .info-faq {
    margin-top: 28px;
    background: #ffffff;
}

.info-article-v1 .info-faq .faq-list {
    max-width: 920px;
    margin: 0;
    display: grid;
    gap: 14px;
}

.info-article-v1 .info-faq .faq-item {
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 18px;
    padding: 20px 22px;
    margin: 0;
    background: #fbfdfc;
    box-shadow: 0 6px 18px rgba(25, 55, 80, 0.03);
}

.info-article-v1 .info-faq .faq-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.13rem;
    line-height: 1.4;
    font-weight: 780;
    color: #17231c;
}

.info-article-v1 .info-faq .faq-item h3 span {
    color: var(--info-blue);
    font-weight: 800;
    margin-right: 8px;
}

.info-article-v1 .info-faq .faq-item p {
    margin: 0;
    padding-left: 30px;
    font-size: 1.04rem;
    line-height: 1.68;
    color: #4b5b52;
}

/* =========================================================
   CONCLUSION
   ========================================================= */

.info-article-v1 .info-conclusion {
    margin-top: 28px;
    background: var(--info-green-soft);
    border-color: rgba(20, 92, 58, 0.14);
}

.info-article-v1 .info-conclusion-content {
    max-width: 920px;
}

/* =========================================================
   RESPONSIVE — PAGE INFORMATIONNELLE
   ========================================================= */

@media (max-width: 900px) {
    .article-container:has(.info-article-v1) {
        margin: 0;
    }

    .info-page.info-article-v1 {
        padding: 20px;
        border-radius: 0;
    }

    .info-article-v1 .info-hero,
    .info-article-v1 .info-section,
    .info-article-v1 .info-faq,
    .info-article-v1 .info-conclusion {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .info-article-v1 .info-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.08;
    }

    .info-article-v1 .info-intro {
        font-size: 1.06rem;
        line-height: 1.68;
    }

    .info-article-v1 .info-hero-media .article-image,
    .info-article-v1 .info-section-media .article-image {
        height: auto;
    }

    .info-article-v1 .cocon-parent-link-block {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 2px 0 12px 0;
    }

    .info-article-v1 .cocon-parent-icon {
        width: 38px;
        height: 38px;
    }

    .info-article-v1 .cocon-parent-link {
        font-size: 0.98rem;
        line-height: 1.35;
    }

    .info-article-v1 .cocon-parent-arrow {
        font-size: 1.15rem;
        padding-left: 4px;
    }
}

@media (max-width: 576px) {
    .info-article-v1 .info-section-title,
    .info-article-v1 .faq-heading {
        font-size: 1.75rem;
        line-height: 1.15;
    }

    .info-article-v1 .info-subsection {
        padding: 1rem;
    }

    .info-article-v1 .info-list li {
        padding: 16px 16px 16px 42px;
    }

    .info-article-v1 .info-list li::before {
        left: 19px;
        top: 25px;
    }

    .info-article-v1 .info-faq .faq-item {
        padding: 18px 16px;
    }

    .info-article-v1 .info-faq .faq-item h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        font-size: 1.04rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .info-article-v1 .info-faq .faq-item h3 span {
        margin-right: 0;
        line-height: 1.35;
    }

    .info-article-v1 .info-faq .faq-item p {
        padding-left: 0;
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   HOME V1 — PAGE D’ACCUEIL
   Structure dédiée à la page d’accueil SitesGen
   ========================================================= */

/* Le conteneur article devient plus large et neutre pour la home */
.article-container:has(.home-v1) {
    max-width: 1180px;
    margin: 18px auto 0 auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* Base générale */
.home-page.home-v1 {
    
    
    
    
    
    
    
    
    
    

    padding: 34px;
    border-radius: 28px;
    background: var(--home-bg);
    color: var(--home-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
}

/* =========================================================
   HERO HOME
   ========================================================= */

.home-v1 .home-hero {
    display: block;
    margin-bottom: 30px;
    padding: 46px 48px 36px;
    border: 1px solid var(--home-border);
    border-radius: 30px;
    
    
}

.home-v1 .home-hero-content {
    max-width: 920px;
    margin: 0 0 30px 0;
    text-align: left;
}

.home-v1 .home-title {
    max-width: 960px;
    margin: 0 0 20px 0;
    font-size: clamp(2.35rem, 4.4vw, 3.75rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
    font-weight: 850;
    color: #102018;
}

.home-v1 .home-intro {
    max-width: 920px;
    margin: 0 0 26px 0;
    font-size: 1.18rem;
    line-height: 1.75;
    color: var(--home-muted);
}

.home-v1 .home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.home-v1 .home-hero-media {
    margin-top: 30px;
    border-radius: 26px;
    overflow: hidden;
    
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
}

.home-v1 .home-hero-media .article-figure {
    width: 100%;
    margin: 0;
}

.home-v1 .home-hero-media .article-image {
    display: block;
    width: 100%;
    max-width: none !important;
    height: auto;
    margin: 0;
    object-fit: contain;
    border-radius: 0;
}

/* =========================================================
   BOUTONS HOME
   ========================================================= */

.home-v1 .home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0.9rem 1.45rem;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.home-v1 .home-btn-primary {
    background: var(--home-green);
    border: 1px solid var(--home-green);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(20, 92, 58, 0.22);
}

.home-v1 .home-btn-primary:hover,
.home-v1 .home-btn-primary:focus {
    transform: translateY(-1px);
    background: var(--home-green-dark);
    border-color: var(--home-green-dark);
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(20, 92, 58, 0.28);
}

.home-v1 .home-btn-secondary {
    background: #ffffff;
    border: 1px solid rgba(36, 71, 102, 0.18);
    color: var(--home-blue);
}

.home-v1 .home-btn-secondary:hover,
.home-v1 .home-btn-secondary:focus {
    transform: translateY(-1px);
    border-color: rgba(36, 71, 102, 0.34);
    color: #132f46;
    box-shadow: 0 10px 24px rgba(25, 55, 80, 0.10);
}

/* =========================================================
   SECTIONS GÉNÉRALES
   ========================================================= */

.home-v1 .home-trust-strip,
.home-v1 .home-needs,
.home-v1 .home-steps,
.home-v1 .home-reasons,
.home-v1 .home-zone,
.home-v1 .home-main-links,
.home-v1 .home-faq,
.home-v1 .home-final-cta {
    margin-bottom: 30px;
}

.home-v1 .home-section-heading {
    max-width: 860px;
    margin: 0 0 24px 0;
    text-align: left;
}

.home-v1 .home-section-heading h2,
.home-v1 .home-final-cta h2 {
    margin: 0 0 12px 0;
    font-size: clamp(1.7rem, 2.35vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 820;
    color: #13241b;
}

.home-v1 .home-section-heading h2::after {
    content: "";
    display: block;
    width: 3.25rem;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: var(--home-green);
}

.home-v1 .home-paragraph {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #34443b;
}

.home-v1 .home-paragraph:last-child {
    margin-bottom: 0;
}

/* =========================================================
   BANDEAU RÉASSURANCE
   ========================================================= */

.home-v1 .home-trust-strip {
    padding: 36px;
    border: 1px solid rgba(20, 92, 58, 0.14);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(20, 60, 40, 0.045);
}

.home-v1 .home-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-v1 .home-trust-item {
    padding: 20px;
    border-radius: 20px;
    
    border: 1px solid rgba(20, 92, 58, 0.12);
}

.home-v1 .home-trust-item strong {
    display: block;
    margin-bottom: 8px;
    color: var(--home-green-dark);
    font-weight: 850;
}

.home-v1 .home-trust-item span {
    display: block;
    color: #385044;
    line-height: 1.6;
}

/* =========================================================
   CARTES BESOINS / RAISONS
   ========================================================= */

.home-v1 .home-needs,
.home-v1 .home-reasons {
    padding: 36px;
    border: 1px solid var(--home-border);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(25, 55, 80, 0.045);
}

.home-v1 .home-needs-grid,
.home-v1 .home-reasons-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.home-v1 .home-need-card,
.home-v1 .home-reason-card {
    padding: 26px;
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 22px;
    background: #fbfdfc;
    box-shadow: 0 8px 22px rgba(25, 55, 80, 0.04);
}

.home-v1 .home-need-card h3,
.home-v1 .home-reason-card h3 {
    margin: 0 0 12px 0;
    font-size: 1.22rem;
    line-height: 1.32;
    font-weight: 800;
    color: var(--home-blue);
}

.home-v1 .home-card-link {
    display: inline-flex;
    margin-top: 8px;
    color: var(--home-green);
    font-weight: 800;
    text-decoration: none;
}

.home-v1 .home-card-link:hover,
.home-v1 .home-card-link:focus {
    color: var(--home-green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   ÉTAPES
   ========================================================= */

.home-v1 .home-steps {
    padding: 36px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.20), transparent 36%),
        linear-gradient(135deg, var(--home-blue) 0%, #162f46 100%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(22, 47, 70, 0.22);
}

.home-v1 .home-steps .home-section-heading h2,
.home-v1 .home-steps .home-paragraph {
    color: #ffffff;
}

.home-v1 .home-steps .home-section-heading h2::after {
    background: rgba(255, 255, 255, 0.75);
}

.home-v1 .home-steps-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: home-step;
}

.home-v1 .home-steps-list li {
    display: block;
    margin: 0;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.home-v1 .home-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #ffffff;
    color: var(--home-blue);
    font-weight: 900;
}

.home-v1 .home-step-content {
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
}

.home-v1 .home-step-content strong {
    color: #ffffff;
}

/* =========================================================
   ZONE
   ========================================================= */

.home-v1 .home-zone-box {
    padding: 36px;
    border: 1px solid rgba(20, 92, 58, 0.14);
    border-radius: 28px;
    
}

.home-v1 .home-zone-content {
    max-width: 920px;
}

/* =========================================================
   LIENS PRINCIPAUX
   ========================================================= */

.home-v1 .home-main-links {
    padding: 36px;
    border: 1px solid var(--home-border);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(25, 55, 80, 0.04);
}

.home-v1 .home-link-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.home-v1 .home-link-list li {
    margin: 0;
}

.home-v1 .home-link-list a {
    display: block;
    height: 100%;
    padding: 18px 20px;
    border-radius: 18px;
    background: #f8fbf9;
    border: 1px solid rgba(36, 71, 102, 0.12);
    color: var(--home-blue);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.35;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-v1 .home-link-list a:hover,
.home-v1 .home-link-list a:focus {
    transform: translateY(-1px);
    border-color: rgba(20, 92, 58, 0.30);
    box-shadow: 0 10px 22px rgba(20, 60, 40, 0.08);
    color: var(--home-green-dark);
}

/* =========================================================
   FAQ HOME
   ========================================================= */

.home-v1 .home-faq {
    padding: 36px;
    border: 1px solid var(--home-border);
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(25, 55, 80, 0.04);
}

.home-v1 .home-faq-list {
    display: grid;
    gap: 14px;
    max-width: 920px;
}

.home-v1 .home-faq-item {
    padding: 20px 22px;
    border: 1px solid rgba(36, 71, 102, 0.12);
    border-radius: 18px;
    background: #fbfdfc;
}

.home-v1 .home-faq-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.13rem;
    line-height: 1.4;
    font-weight: 800;
    color: #17231c;
}

.home-v1 .home-faq-item h3 span {
    color: var(--home-blue);
    font-weight: 900;
    margin-right: 8px;
}

.home-v1 .home-faq-item p {
    margin: 0;
    padding-left: 30px;
    font-size: 1.04rem;
    line-height: 1.68;
    color: #4b5b52;
}

/* =========================================================
   CTA FINAL
   ========================================================= */

.home-v1 .home-final-cta-box {
    
    
    gap: 28px;
    
    padding: 34px 38px;
    border-radius: 30px;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.15), transparent 38%),
        linear-gradient(135deg, var(--home-green) 0%, var(--home-green-dark) 100%);
    color: #ffffff;
    
}

.home-v1 .home-final-cta-box h2 {
    color: #ffffff;
}

.home-v1 .home-final-cta-box .home-paragraph {
    color: rgba(255, 255, 255, 0.86);
}

.home-v1 .home-final-cta-box .home-btn-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--home-green-dark);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.home-v1 .home-final-cta-box .home-btn-primary:hover,
.home-v1 .home-final-cta-box .home-btn-primary:focus {
    background: #f2f7f3;
    border-color: #f2f7f3;
    color: var(--home-green-dark);
}

/* =========================================================
   RESPONSIVE HOME
   ========================================================= */

@media (max-width: 900px) {
    .article-container:has(.home-v1) {
        margin: 0;
    }

    .home-page.home-v1 {
        padding: 20px;
        border-radius: 0;
    }

    .home-v1 .home-hero,
    .home-v1 .home-trust-strip,
    .home-v1 .home-needs,
    .home-v1 .home-steps,
    .home-v1 .home-reasons,
    .home-v1 .home-zone-box,
    .home-v1 .home-main-links,
    .home-v1 .home-faq {
        padding: 28px 22px;
        border-radius: 22px;
    }

    .home-v1 .home-title {
        font-size: clamp(2rem, 8vw, 2.85rem);
        line-height: 1.08;
    }

    .home-v1 .home-intro {
        font-size: 1.06rem;
        line-height: 1.68;
    }

    .home-v1 .home-trust-grid,
    .home-v1 .home-needs-grid,
    .home-v1 .home-reasons-grid,
    .home-v1 .home-steps-list,
    .home-v1 .home-link-list {
        grid-template-columns: 1fr;
    }

    .home-v1 .home-final-cta-box {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 22px;
    }

    .home-v1 .home-final-cta-box .home-btn {
        justify-self: center;
    }
}

@media (max-width: 576px) {
    .home-v1 .home-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .home-v1 .home-btn {
        width: 100%;
    }

    .home-v1 .home-section-heading h2,
    .home-v1 .home-final-cta h2 {
        font-size: 1.85rem;
        line-height: 1.15;
    }

    .home-v1 .home-faq-item {
        padding: 18px 16px;
    }

    .home-v1 .home-faq-item h3 {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 10px;
        align-items: start;
        font-size: 1.04rem;
        line-height: 1.35;
        margin-bottom: 12px;
    }

    .home-v1 .home-faq-item h3 span {
        margin-right: 0;
    }

    .home-v1 .home-faq-item p {
        padding-left: 0;
        font-size: 1rem;
        line-height: 1.65;
    }
}

/* =========================================================
   HOME V1 — PATCH CTA FINAL
   Corrige le titre cassé et le bouton mal positionné
   ========================================================= */

.home-v1 .home-final-cta-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 10px;
    align-items: center;
}

.home-v1 .home-final-cta-box h2 {
    grid-column: 1;
    grid-row: 1;
    max-width: 720px;
    margin: 0;
    font-size: clamp(1.85rem, 2.8vw, 2.65rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.home-v1 .home-final-cta-box .home-paragraph {
    grid-column: 1;
    grid-row: 2;
    max-width: 760px;
    margin: 0;
}

.home-v1 .home-final-cta-box .home-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    white-space: nowrap;
}

/* Mobile / tablette : tout repasse en colonne propre */
@media (max-width: 900px) {
    .home-v1 .home-final-cta-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        text-align: center;
    }

    .home-v1 .home-final-cta-box h2,
    .home-v1 .home-final-cta-box .home-paragraph,
    .home-v1 .home-final-cta-box .home-btn {
        grid-column: 1;
        grid-row: auto;
    }

    .home-v1 .home-final-cta-box .home-btn {
        justify-self: center;
        white-space: normal;
    }
}

/* =========================================================
   MENU PRINCIPAL — MOBILE
   ========================================================= */

@media (max-width: 576px) {
    .site-menu .site-menu-inner {
        align-items: flex-start !important;
        padding: 0.85rem !important;
    }

    .site-menu .site-menu-brand {
        width: 100%;
        margin-bottom: 0.35rem;
        font-size: 1rem;
    }

    .site-menu .site-menu-links {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
    }

    .site-menu .site-menu-links .btn {
        width: 100%;
        white-space: normal;
        line-height: 1.2;
        padding: 0.45rem 0.7rem;
        font-size: 0.88rem;
    }

    .site-menu .site-menu-links .btn-primary {
        grid-column: 1 / -1;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
        font-weight: 700;
    }
}

/* =========================================================
   MENU PRINCIPAL — AJUSTEMENT MOBILE FINAL
   Guide + CTA en pleine largeur
   ========================================================= */

@media (max-width: 576px) {
    .site-menu .site-menu-links .btn:nth-child(3) {
        grid-column: 1 / -1;
    }

    .site-menu .site-menu-links .btn-primary {
        grid-column: 1 / -1;
    }
}

/* =========================================================
PAGE MÈRE — CTA INTERMÉDIAIRE
Bloc injecté via CTA_INLINE_CONTACT
========================================================= */

.mother-page.mother-hub-v1 .mother-mid-cta {
margin-bottom: 30px;
}

.mother-page.mother-hub-v1 .mother-mid-cta-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: center;
padding: 34px 38px;
border-radius: 30px;



}

.mother-page.mother-hub-v1 .mother-mid-cta-copy {
min-width: 0;
}

.mother-page.mother-hub-v1 .mother-mid-cta-label {
display: inline-flex;
margin: 0 0 10px 0;
padding: 0.35rem 0.75rem;
border-radius: 999px;



font-size: 0.82rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.mother-page.mother-hub-v1 .mother-mid-cta-title {
margin: 0 0 10px 0;
max-width: 760px;
font-size: clamp(1.55rem, 2.4vw, 2.25rem);
line-height: 1.15;
letter-spacing: -0.035em;
font-weight: 850;

}

.mother-page.mother-hub-v1 .mother-mid-cta-text {
max-width: 780px;
margin: 0;
font-size: 1.05rem;
line-height: 1.65;

}

.mother-page.mother-hub-v1 .mother-mid-cta-action {
display: flex;
justify-content: flex-end;
}

.mother-page.mother-hub-v1 .mother-mid-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0.9rem 1.45rem;
border-radius: 999px;

border: 1px solid #ffffff;

font-weight: 850;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;

transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.mother-page.mother-hub-v1 .mother-mid-cta-button:hover,
.mother-page.mother-hub-v1 .mother-mid-cta-button:focus {
transform: translateY(-1px);



}

/* Responsive tablette / mobile */
@media (max-width: 900px) {
.mother-page.mother-hub-v1 .mother-mid-cta-card {
grid-template-columns: 1fr;
text-align: center;
padding: 28px 22px;
border-radius: 22px;
}


.mother-page.mother-hub-v1 .mother-mid-cta-label {
    justify-self: center;
}

.mother-page.mother-hub-v1 .mother-mid-cta-action {
    justify-content: center;
}

.mother-page.mother-hub-v1 .mother-mid-cta-button {
    white-space: normal;
}


}

@media (max-width: 576px) {
.mother-page.mother-hub-v1 .mother-mid-cta-button {
width: 100%;
}
}


/* =========================================================
   Footer global
   ========================================================= */

.site-footer {
  margin-top: 3rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: #6c757d;
}

.site-footer .row {
  align-items: center;
}

.site-footer .small {
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.footer-links a {
  color: #6c757d;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.footer-links a:hover,
.footer-links a:focus {
  color: #0d6efd;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-links a:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Mobile */
@media (max-width: 767.98px) {
  .site-footer {
    margin-top: 2rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
  }

  .footer-links a {
    padding: 0.15rem 0;
  }
}

/* =========================================================
   Footer global V2
   ========================================================= */



.site-footer-v2 .site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  
  
  
  
  
}

.site-footer-v2 .footer-brand {
  min-width: 220px;
}

.site-footer-v2 .footer-title {
  
  
  
  line-height: 1.35;
}

.site-footer-v2 .footer-copy {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  
}

.site-footer-v2 .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  
}

.site-footer-v2 .footer-nav a {
  display: inline-flex;
  align-items: center;
  
  
  border-radius: 999px;
  
  
  
  text-decoration: none;
  background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.site-footer-v2 .footer-nav a:hover,
.site-footer-v2 .footer-nav a:focus {
  
  
  text-decoration: none;
}

.site-footer-v2 .footer-nav a:focus-visible {
  outline: 2px solid rgba(20, 83, 45, 0.45);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  .site-footer-v2 .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer-v2 .footer-nav {
    justify-content: flex-start;
  }
}

/* Footer V2 - ajustements mobile */
@media (max-width: 575.98px) {
  .site-footer-v2 {
    margin-top: 1.25rem;
    padding-bottom: 0.75rem;
  }

  .site-footer-v2 .site-footer-inner {
    padding: 0.9rem 1rem 0.8rem;
    gap: 0.85rem;
  }

  .site-footer-v2 .footer-title {
    font-size: 0.9rem;
  }

  .site-footer-v2 .footer-copy {
    font-size: 0.8rem;
  }

  .site-footer-v2 .footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 1rem;
    width: 100%;
  }

  .site-footer-v2 .footer-nav a {
    padding: 0;
    min-height: auto;
    font-size: 0.83rem;
    line-height: 1.35;
    border-radius: 0;
    background: transparent;
  }

  .site-footer-v2 .footer-nav a:hover,
  .site-footer-v2 .footer-nav a:focus {
    background: transparent;
    text-decoration: underline;
  }
}

/* =========================================================
HARMONISATION V02 — LARGEUR GLOBALE DU SITE

Objectif :

* même largeur extérieure pour toutes les pages ;
* même alignement pour le menu et le footer ;
* largeur maximale commune de 1180 px ;
* aucune modification des couleurs ou composants.
  ========================================================= */

:root {
--site-shell-max-width: 1180px;
--site-shell-side-gap: 16px;
}

/* =========================================================
PAGES ÉDITORIALES

Accueil
Page business
Page mère
Pages catégories
Pages informationnelles
Anciens articles éventuels
========================================================= */


.article-container:has(.home-v1),
.article-container:has(.business-landing-v2),
.article-container:has(.mother-hub-v1),
.article-container:has(.category-hub-v1),
.article-container:has(.info-article-v1) {
    width: calc(100% - (2 * var(--site-shell-side-gap)));
    max-width: var(--site-shell-max-width);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* =========================================================
PAGES ANNEXES UTILISANT BOOTSTRAP

Contact
Mentions légales
Politique de confidentialité
Cookies
Conditions d’utilisation
Confirmation
Erreur 404
========================================================= */

main.container {
width: calc(100% - (2 * var(--site-shell-side-gap)));
max-width: var(--site-shell-max-width);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}

/*
Suppression des marges négatives de la ligne Bootstrap
située directement sous le conteneur principal.
*/

main.container > .row {
margin-left: 0;
margin-right: 0;
}

/*
Les classes Bootstrap col-lg-10 et col-xl-8 réduisaient
la largeur des pages contact et légales.

La colonne principale occupe maintenant toute la largeur
du conteneur commun de 1180 px.
*/

main.container > .row > [class^="col-"],
main.container > .row > [class*=" col-"] {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}

/* =========================================================
PETITS ÉCRANS

On conserve une marge extérieure de 12 px afin que
le menu, le footer et les pages annexes ne touchent
jamais directement les bords de l’écran.
========================================================= */

@media (max-width: 575.98px) {
:root {
--site-shell-side-gap: 12px;
}
}

/* =========================================================
HARMONISATION V02 — PAGE CONTACT

* menu et footer sur la largeur générale de 1180 px ;
* formulaire centré et limité à 820 px ;
* alignement vertical du menu avec les pages éditoriales.
  ========================================================= */

main.container:has(.contact-inject) {
padding-top: 18px !important;
padding-bottom: 0 !important;
}

/* Le menu et le footer conservent toute la largeur disponible */
main.container:has(.contact-inject) .site-menu,
main.container:has(.contact-inject) .site-footer-v2 {
width: 100%;
max-width: none;
}

/* Le formulaire reste volontairement plus étroit */
main.container:has(.contact-inject) .contact-inject {
width: 100%;
max-width: 820px;
margin: 3rem auto 0;
box-sizing: border-box;
}

/* Sur tablette et mobile, le formulaire utilise la largeur disponible */
@media (max-width: 900px) {
main.container:has(.contact-inject) {
padding-top: 0 !important;
}


main.container:has(.contact-inject) .contact-inject {
    max-width: none;
}
}

/* =========================================================
HARMONISATION V03 — THÈME BLEU COMMUN

Objectifs :

* palette neutre utilisable pour différents métiers ;
* cohérence entre tous les modèles de pages ;
* conservation du HTML et des noms de classes actuels ;
* aucune modification des largeurs validées en V02.
  ========================================================= */

:root {
--theme-primary: #244766;
--theme-primary-dark: #162f46;
--theme-primary-soft: #eef4f8;


--theme-accent: #2f6f9f;
--theme-accent-dark: #1d537d;
--theme-accent-soft: #edf5fb;

--theme-page-bg: #f6f8fb;
--theme-card-bg: #ffffff;
--theme-text: #172231;
--theme-muted: #586878;
--theme-border: rgba(36, 71, 102, 0.14);

--theme-shadow-light: rgba(25, 55, 80, 0.045);
--theme-shadow-medium: rgba(25, 55, 80, 0.10);
--theme-shadow-strong: rgba(22, 47, 70, 0.22);


}

/* =========================================================
LIENS ET BOUTONS GÉNÉRAUX
========================================================= */

a,
.btn-link {
color: var(--theme-accent);
}

.btn-primary {
color: #ffffff;
background-color: var(--theme-accent);
border-color: var(--theme-accent-dark);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
color: #ffffff;
background-color: var(--theme-accent-dark);
border-color: var(--theme-accent-dark);
}

/* =========================================================
PAGE BUSINESS
========================================================= */

.business-landing-v2 {
--business-green: var(--theme-primary);
--business-green-dark: var(--theme-primary-dark);
--business-green-soft: var(--theme-primary-soft);
--business-border: var(--theme-border);
--business-text: var(--theme-text);
--business-muted: var(--theme-muted);
--business-bg: var(--theme-page-bg);
}

.business-landing-v2 .business-hero {
background:
radial-gradient(circle at top left, rgba(47, 111, 159, 0.13), transparent 34%),
linear-gradient(135deg, #ffffff 0%, var(--theme-primary-soft) 100%);
}

.business-landing-v2 .business-hero-media .article-figure {
background: #dfe9f1;
}

.business-landing-v2 .business-problem-card,
.business-landing-v2 .business-step-card,
.business-landing-v2 .business-zone-card,
.business-landing-v2 .business-faq .faq-item {
border-color: var(--theme-border);
background: #f9fbfd;
box-shadow: 0 6px 18px var(--theme-shadow-light);
}

.business-landing-v2 .business-problem-card::before {
box-shadow: 0 0 0 7px rgba(47, 111, 159, 0.11);
}

.business-landing-v2 .business-zone-panel {
background: var(--theme-primary-soft);
border-color: var(--theme-border);
}

.business-landing-v2 .business-zone-card-limit {
background: #fbfcfe;
border-color: rgba(36, 71, 102, 0.18);
}

.business-landing-v2 .business-cta-button {
box-shadow: 0 10px 22px rgba(36, 71, 102, 0.22);
}

.business-landing-v2 .business-cta-button:hover {
box-shadow: 0 14px 28px rgba(36, 71, 102, 0.27);
}

.business-landing-v2 .business-solution-band,
.business-landing-v2 .business-cta-final-strong .business-final-card {
box-shadow: 0 20px 46px var(--theme-shadow-strong);
}

/* =========================================================
PAGE CATÉGORIE
========================================================= */

.category-hub-v1 {
--category-green: var(--theme-accent);
--category-green-dark: var(--theme-primary-dark);
--category-green-soft: var(--theme-accent-soft);
--category-blue: var(--theme-primary);
--category-blue-soft: var(--theme-primary-soft);
--category-border: var(--theme-border);
--category-text: var(--theme-text);
--category-muted: var(--theme-muted);
--category-bg: var(--theme-page-bg);
}

.category-hub-v1 .category-situation-card,
.category-hub-v1 .category-attention-list li {
border-color: var(--theme-border);
background: #ffffff;
box-shadow: 0 6px 18px var(--theme-shadow-light);
}

.category-hub-v1 .category-situation-card::before {
box-shadow: 0 0 0 7px rgba(47, 111, 159, 0.10);
}

.category-hub-v1 .category-attention {
background: var(--theme-accent-soft);
border-color: var(--theme-border);
}

.category-hub-v1 .category-child-links .category-child-link-list a:hover,
.category-hub-v1 .category-child-links .category-child-link-list a:focus,
.category-hub-v1 .category-child-links .category-child-links-block a:hover,
.category-hub-v1 .category-child-links .category-child-links-block a:focus,
.category-hub-v1 .category-child-links ul a:hover,
.category-hub-v1 .category-child-links ul a:focus {
background: var(--theme-primary-soft) !important;
color: var(--theme-primary-dark) !important;
border-color: rgba(255, 255, 255, 0.42) !important;
}

/* =========================================================
PAGE MÈRE
========================================================= */

.mother-page.mother-hub-v1 {
--mother-green: var(--theme-primary);
--mother-green-dark: var(--theme-primary-dark);
--mother-green-soft: var(--theme-primary-soft);


--mother-blue: var(--theme-primary);
--mother-blue-soft: var(--theme-primary-soft);

--mother-accent: var(--theme-accent);
--mother-accent-soft: var(--theme-accent-soft);

--mother-border: var(--theme-border);
--mother-text: var(--theme-text);
--mother-muted: var(--theme-muted);
--mother-soft-bg: var(--theme-primary-soft);
--mother-card-bg: var(--theme-card-bg);
--mother-bg: var(--theme-page-bg);


}

.mother-page.mother-hub-v1 .mother-hero {
background:
radial-gradient(circle at top left, rgba(47, 111, 159, 0.12), transparent 34%),
linear-gradient(135deg, #ffffff 0%, var(--theme-primary-soft) 100%);
}

.mother-page.mother-hub-v1 .mother-hero-media {
background: #dfe9f1;
}

.mother-page.mother-hub-v1 .mother-orientation {
background: var(--theme-primary-soft);
}





/* =========================================================
PAGE INFORMATIONNELLE
========================================================= */

.info-page.info-article-v1 {
--info-green: var(--theme-accent);
--info-green-dark: var(--theme-primary-dark);
--info-green-soft: var(--theme-accent-soft);


--info-blue: var(--theme-primary);
--info-blue-soft: var(--theme-primary-soft);

--info-border: var(--theme-border);
--info-text: var(--theme-text);
--info-muted: var(--theme-muted);
--info-bg: var(--theme-page-bg);
--info-card-bg: var(--theme-card-bg);


}

.info-article-v1 .info-hero {
background:
radial-gradient(circle at top left, rgba(47, 111, 159, 0.12), transparent 34%),
linear-gradient(135deg, #ffffff 0%, var(--theme-primary-soft) 100%);
}

.info-article-v1 .info-hero-media,
.info-article-v1 .info-section-media {
background: #dfe9f1;
}

.info-article-v1 .info-warning,
.info-article-v1 .info-conclusion {
background: var(--theme-accent-soft);
border-color: var(--theme-border);
}

.info-article-v1 .info-list li {
border-color: var(--theme-border);
box-shadow: 0 6px 18px var(--theme-shadow-light);
}

.info-article-v1 .info-callout {
border-left-color: var(--theme-accent);
background: var(--theme-accent-soft);
color: #26394a;
}

/* =========================================================
PAGE D’ACCUEIL
========================================================= */

.home-page.home-v1 {
--home-green: var(--theme-primary);
--home-green-dark: var(--theme-primary-dark);
--home-green-soft: var(--theme-primary-soft);


--home-blue: var(--theme-primary);
--home-blue-soft: var(--theme-primary-soft);

--home-border: var(--theme-border);
--home-text: var(--theme-text);
--home-muted: var(--theme-muted);
--home-bg: var(--theme-page-bg);
--home-card-bg: var(--theme-card-bg);


}

.home-v1 .home-hero {
background:
radial-gradient(circle at top left, rgba(47, 111, 159, 0.13), transparent 34%),
linear-gradient(135deg, #ffffff 0%, var(--theme-primary-soft) 100%);
box-shadow: 0 18px 45px rgba(25, 55, 80, 0.08);
}

.home-v1 .home-hero-media {
background: #dfe9f1;
}

.home-v1 .home-trust-strip,
.home-v1 .home-needs,
.home-v1 .home-reasons,
.home-v1 .home-main-links,
.home-v1 .home-faq {
border-color: var(--theme-border);
box-shadow: 0 12px 34px var(--theme-shadow-light);
}

.home-v1 .home-trust-item {
background: var(--theme-accent-soft);
border-color: var(--theme-border);
}

.home-v1 .home-zone-box {
background: var(--theme-primary-soft);
border-color: var(--theme-border);
}

.home-v1 .home-main-links a:hover,
.home-v1 .home-main-links a:focus {
border-color: rgba(47, 111, 159, 0.34);
box-shadow: 0 10px 22px rgba(25, 55, 80, 0.09);
color: var(--theme-primary-dark);
}

.home-v1 .home-final-cta-box {
box-shadow: 0 20px 46px var(--theme-shadow-strong);
}

/* =========================================================
CONTACT, MENU ET FOOTER
========================================================= */

.contact-inject .card {
border-color: var(--theme-border);
}



.site-footer-v2 .footer-nav a:focus-visible {
outline-color: rgba(47, 111, 159, 0.48);
}


/* =========================================================
HARMONISATION V03.1 — BOUTONS BOOTSTRAP

Corrige :

* le texte invisible du bouton « Demande de devis » ;
* les boutons visibles uniquement au survol ;
* l’harmonisation du menu et du formulaire de contact.
  ========================================================= */

/* Boutons principaux : menu, formulaire et boutons Bootstrap */
.site-menu .btn-primary,
.contact-inject .btn-primary {
--bs-btn-color: #ffffff;
--bs-btn-bg: var(--theme-accent, #2f6f9f);
--bs-btn-border-color: var(--theme-accent, #2f6f9f);


--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: var(--theme-accent-dark, #1d537d);
--bs-btn-hover-border-color: var(--theme-accent-dark, #1d537d);

--bs-btn-focus-shadow-rgb: 47, 111, 159;

--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: var(--theme-primary-dark, #162f46);
--bs-btn-active-border-color: var(--theme-primary-dark, #162f46);

color: #ffffff !important;
background-color: var(--theme-accent, #2f6f9f) !important;
border-color: var(--theme-accent, #2f6f9f) !important;


}

.site-menu .btn-primary:hover,
.site-menu .btn-primary:focus,
.site-menu .btn-primary:active,
.contact-inject .btn-primary:hover,
.contact-inject .btn-primary:focus,
.contact-inject .btn-primary:active {
color: #ffffff !important;
background-color: var(--theme-accent-dark, #1d537d) !important;
border-color: var(--theme-accent-dark, #1d537d) !important;
}

/* Boutons secondaires du menu */
.site-menu .btn-outline-secondary {
--bs-btn-color: var(--theme-primary, #244766);
--bs-btn-border-color: rgba(36, 71, 102, 0.35);


--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: var(--theme-primary, #244766);
--bs-btn-hover-border-color: var(--theme-primary, #244766);

--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: var(--theme-primary-dark, #162f46);
--bs-btn-active-border-color: var(--theme-primary-dark, #162f46);

color: var(--theme-primary, #244766) !important;
background-color: #ffffff !important;
border-color: rgba(36, 71, 102, 0.35) !important;


}

.site-menu .btn-outline-secondary:hover,
.site-menu .btn-outline-secondary:focus,
.site-menu .btn-outline-secondary:active {
color: #ffffff !important;
background-color: var(--theme-primary, #244766) !important;
border-color: var(--theme-primary, #244766) !important;
}

/* =========================================================
HARMONISATION V03.2 — ÉQUILIBRAGE DE LA PAGE MÈRE

* le bloc des rubriques reste bleu foncé ;
* le CTA intermédiaire devient clair ;
* la conclusion devient plus discrète et lisible.
  ========================================================= */

/* =========================================================
CTA INTERMÉDIAIRE CLAIR
========================================================= */

.mother-page.mother-hub-v1 .mother-mid-cta-card {
background: #ffffff;
border: 1px solid var(--theme-border, rgba(36, 71, 102, 0.14));
color: var(--theme-text, #172231);
box-shadow: 0 12px 32px rgba(25, 55, 80, 0.07);
}

/* Petit libellé supérieur */
.mother-page.mother-hub-v1 .mother-mid-cta-label {
background: var(--theme-accent-soft, #edf5fb);
border: 1px solid rgba(47, 111, 159, 0.18);
color: var(--theme-accent-dark, #1d537d);
}

/* Titre du CTA */
.mother-page.mother-hub-v1 .mother-mid-cta-title {
color: var(--theme-primary-dark, #162f46);
}

/* Texte du CTA */
.mother-page.mother-hub-v1 .mother-mid-cta-text {
color: var(--theme-muted, #586878);
}

/* Bouton principal du CTA */
.mother-page.mother-hub-v1 .mother-mid-cta-button {
background: var(--theme-accent, #2f6f9f);
border-color: var(--theme-accent, #2f6f9f);
color: #ffffff;
box-shadow: 0 10px 24px rgba(47, 111, 159, 0.22);
}

.mother-page.mother-hub-v1 .mother-mid-cta-button:hover,
.mother-page.mother-hub-v1 .mother-mid-cta-button:focus {
background: var(--theme-accent-dark, #1d537d);
border-color: var(--theme-accent-dark, #1d537d);
color: #ffffff;
box-shadow: 0 14px 28px rgba(29, 83, 125, 0.26);
}

/* =========================================================
CONCLUSION PLUS LÉGÈRE
========================================================= */

.mother-page.mother-hub-v1 .mother-conclusion {
background: var(--theme-primary-soft, #eef4f8);
border: 1px solid var(--theme-border, rgba(36, 71, 102, 0.14));
box-shadow: none;
}

.mother-page.mother-hub-v1 .mother-conclusion .mother-section-title {
color: var(--theme-primary-dark, #162f46);
}

.mother-page.mother-hub-v1 .mother-conclusion-content {
color: var(--theme-text, #172231);
}

.mother-page.mother-hub-v1 .mother-conclusion-content p {
color: var(--theme-text, #172231);
}

/* =========================================================
HARMONISATION V03.3 — LARGEUR CONCLUSION PAGE MÈRE
========================================================= */

.mother-page.mother-hub-v1 .mother-conclusion-content {
width: 100%;
max-width: none;
}

/* =========================================================
HARMONISATION V04 — TYPOGRAPHIE COMMUNE

Objectifs :

* même police sur tous les modèles ;
* même échelle de titres ;
* intros et textes homogènes ;
* aucune modification des largeurs ou des couleurs.
  ========================================================= */

:root {
--site-font-family:
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;


--site-h1-size: clamp(2.25rem, 4vw, 3.55rem);
--site-h1-line-height: 1.06;
--site-h1-letter-spacing: -0.045em;
--site-h1-weight: 800;

--site-h2-size: clamp(1.65rem, 2.2vw, 2.25rem);
--site-h2-line-height: 1.18;
--site-h2-letter-spacing: -0.03em;
--site-h2-weight: 750;

--site-h3-size: 1.18rem;
--site-h3-line-height: 1.4;
--site-h3-weight: 750;

--site-intro-size: 1.14rem;
--site-intro-line-height: 1.72;

--site-body-size: 1.04rem;
--site-body-line-height: 1.72;


}

/* =========================================================
POLICE GÉNÉRALE
========================================================= */

html,
body {
font-family: var(--site-font-family);
}

.home-page.home-v1,
.business-landing-v2,
.mother-page.mother-hub-v1,
.category-hub-v1,
.info-page.info-article-v1,
.contact-inject,
.site-menu,
.site-footer-v2 {
font-family: var(--site-font-family);
}

/* =========================================================
H1 — TITRES PRINCIPAUX
========================================================= */

.home-v1 .home-title,
.business-landing-v2 .business-title,
.mother-page.mother-hub-v1 .mother-title,
.category-hub-v1 .category-title,
.info-article-v1 .info-title {
font-size: var(--site-h1-size);
line-height: var(--site-h1-line-height);
letter-spacing: var(--site-h1-letter-spacing);
font-weight: var(--site-h1-weight);
}

/* =========================================================
INTRODUCTIONS
========================================================= */

.home-v1 .home-intro,
.business-landing-v2 .business-intro,
.mother-page.mother-hub-v1 .mother-intro,
.category-hub-v1 .category-intro,
.info-article-v1 .info-intro {
font-size: var(--site-intro-size);
line-height: var(--site-intro-line-height);
}

/* =========================================================
H2 — TITRES DE SECTION
========================================================= */

.home-v1 .home-section-heading h2,
.home-v1 .home-final-cta h2,
.business-landing-v2 .business-section-title,
.business-landing-v2 .faq-heading,
.mother-page.mother-hub-v1 .mother-section-title,
.mother-page.mother-hub-v1 .faq-heading,
.category-hub-v1 .category-section-title,
.category-hub-v1 .faq-heading,
.info-article-v1 .info-section-title,
.info-article-v1 .faq-heading {
font-size: var(--site-h2-size);
line-height: var(--site-h2-line-height);
letter-spacing: var(--site-h2-letter-spacing);
font-weight: var(--site-h2-weight);
}

/* =========================================================
H3 — CARTES, FAQ ET SOUS-SECTIONS
========================================================= */

.home-v1 .home-need-card h3,
.home-v1 .home-reason-card h3,
.home-v1 .home-faq-item h3,
.business-landing-v2 .faq-item h3,
.mother-page.mother-hub-v1 .faq-item h3,
.category-hub-v1 .category-family-card h3,
.category-hub-v1 .category-faq .faq-item h3,
.info-article-v1 .info-subtitle,
.info-article-v1 .info-faq .faq-item h3 {
font-size: var(--site-h3-size);
line-height: var(--site-h3-line-height);
font-weight: var(--site-h3-weight);
}

/* =========================================================
TEXTES DE CONTENU
========================================================= */

.home-v1 .home-paragraph,
.business-landing-v2 .business-problem-card p,
.business-landing-v2 .business-step-card p,
.business-landing-v2 .business-zone-card p,
.mother-page.mother-hub-v1 .mother-section-content,
.mother-page.mother-hub-v1 .mother-orientation-content,
.mother-page.mother-hub-v1 .mother-errors-content,
.mother-page.mother-hub-v1 .mother-conclusion-content,
.category-hub-v1 .category-situation-card p,
.category-hub-v1 .category-family-card p,
.category-hub-v1 .category-attention-content p,
.category-hub-v1 .category-context-content p,
.info-article-v1 .info-paragraph {
font-size: var(--site-body-size);
line-height: var(--site-body-line-height);
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 576px) {
:root {
--site-h1-size: clamp(2rem, 8vw, 2.75rem);
--site-h2-size: 1.75rem;
--site-h3-size: 1.05rem;
--site-intro-size: 1.05rem;
--site-body-size: 1rem;
}
}

/* =========================================================
HARMONISATION V05 — PAGES LÉGALES

Pages concernées :

* Mentions légales
* Politique de confidentialité
* Cookies
* Conditions d’utilisation

Principes :

* menu et footer sur l’enveloppe générale de 1180 px ;
* contenu juridique centré et limité à 900 px ;
* présentation claire et lisible ;
* thème bleu commun ;
* aucune modification du HTML.
  ========================================================= */

/* Même position verticale que la page contact */
main.container.legal-page.legal-v1 {
padding-top: 18px !important;
padding-bottom: 0 !important;
font-family: var(--site-font-family);
}

/* Le menu et le footer restent sur la largeur générale */
.legal-page.legal-v1 .site-menu,
.legal-page.legal-v1 .site-footer-v2 {
width: 100%;
max-width: none;
}

/* Le contenu juridique reste volontairement plus étroit */
.legal-page.legal-v1 .legal-header,
.legal-page.legal-v1 .legal-content {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}

/* =========================================================
EN-TÊTE DE LA PAGE
========================================================= */

.legal-page.legal-v1 .legal-header {
margin-top: 3rem;
margin-bottom: 1.25rem !important;
padding: 2.25rem 2.5rem;
border: 1px solid var(--theme-border);
border-radius: 28px;
background:
radial-gradient(
circle at top left,
rgba(47, 111, 159, 0.12),
transparent 36%
),
linear-gradient(
135deg,
#ffffff 0%,
var(--theme-primary-soft) 100%
);
box-shadow: 0 16px 38px rgba(25, 55, 80, 0.07);
}

.legal-page.legal-v1 .legal-header h1 {
margin: 0 0 1rem 0;
font-size: var(--site-h1-size);
line-height: var(--site-h1-line-height);
letter-spacing: var(--site-h1-letter-spacing);
font-weight: var(--site-h1-weight);
color: var(--theme-text);
}

.legal-page.legal-v1 .legal-intro {
max-width: 760px;
margin: 0;
font-size: var(--site-intro-size);
line-height: var(--site-intro-line-height);
color: var(--theme-muted);
}

/* =========================================================
CONTENU JURIDIQUE
========================================================= */

.legal-page.legal-v1 .legal-content {
padding: 2.5rem;
border: 1px solid var(--theme-border);
border-radius: 26px;
background: var(--theme-card-bg);
box-shadow: 0 12px 32px rgba(25, 55, 80, 0.055);
}

/* Titres des différentes parties */
.legal-page.legal-v1 .legal-content h2 {
margin: 2.25rem 0 1rem 0;
padding-top: 2rem;
border-top: 1px solid var(--theme-border);
font-size: clamp(1.35rem, 2vw, 1.7rem);
line-height: 1.25;
letter-spacing: -0.02em;
font-weight: 780;
color: var(--theme-primary-dark);
}

/* Pas de séparation au-dessus du premier titre */
.legal-page.legal-v1 .legal-content h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}

/* Éventuels sous-titres */
.legal-page.legal-v1 .legal-content h3 {
margin: 1.75rem 0 0.75rem 0;
font-size: var(--site-h3-size);
line-height: var(--site-h3-line-height);
font-weight: var(--site-h3-weight);
color: var(--theme-primary);
}

/* Paragraphes */
.legal-page.legal-v1 .legal-content p {
margin: 0 0 1rem 0;
font-size: 1.02rem;
line-height: 1.75;
color: var(--theme-text);
}

.legal-page.legal-v1 .legal-content p:last-child {
margin-bottom: 0;
}

/* Informations importantes */
.legal-page.legal-v1 .legal-content strong {
color: var(--theme-primary-dark);
font-weight: 750;
}

/* Liens */
.legal-page.legal-v1 .legal-content a {
color: var(--theme-accent-dark);
font-weight: 650;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}

.legal-page.legal-v1 .legal-content a:hover,
.legal-page.legal-v1 .legal-content a:focus {
color: var(--theme-primary-dark);
text-decoration-thickness: 2px;
}

/* Listes éventuellement présentes dans les autres pages légales */
.legal-page.legal-v1 .legal-content ul,
.legal-page.legal-v1 .legal-content ol {
margin: 1rem 0 1.25rem 0;
padding-left: 1.4rem;
}

.legal-page.legal-v1 .legal-content li {
margin-bottom: 0.65rem;
padding-left: 0.2rem;
font-size: 1.02rem;
line-height: 1.7;
color: var(--theme-text);
}

.legal-page.legal-v1 .legal-content li:last-child {
margin-bottom: 0;
}

/* Footer légèrement séparé du contenu */
.legal-page.legal-v1 .site-footer-v2 {
margin-top: 2rem;
}

/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 900px) {
main.container.legal-page.legal-v1 {
padding-top: 0 !important;
}


.legal-page.legal-v1 .legal-header,
.legal-page.legal-v1 .legal-content {
    max-width: none;
}

.legal-page.legal-v1 .legal-header {
    margin-top: 2rem;
    padding: 2rem 1.75rem;
    border-radius: 22px;
}

.legal-page.legal-v1 .legal-content {
    padding: 2rem 1.75rem;
    border-radius: 22px;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 575.98px) {
.legal-page.legal-v1 .legal-header {
margin-top: 1.5rem;
padding: 1.5rem 1.25rem;
border-radius: 18px;
}


.legal-page.legal-v1 .legal-header h1 {
    font-size: 2rem;
    line-height: 1.1;
}

.legal-page.legal-v1 .legal-intro {
    font-size: 1rem;
    line-height: 1.65;
}

.legal-page.legal-v1 .legal-content {
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
}

.legal-page.legal-v1 .legal-content h2 {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    font-size: 1.35rem;
}

.legal-page.legal-v1 .legal-content p,
.legal-page.legal-v1 .legal-content li {
    font-size: 1rem;
    line-height: 1.7;
}


}


/* =========================================================
HARMONISATION V06 — PAGE CONTACT

Objectifs :

* conserver le formulaire centré sur 820 px ;
* harmoniser l’en-tête avec les autres pages ;
* améliorer la lisibilité du formulaire ;
* conserver le menu et le footer sur 1180 px.
  ========================================================= */

/* =========================================================
EN-TÊTE CONTACT
========================================================= */

.contact-inject > .text-center {
margin-bottom: 1.25rem !important;
padding: 2.25rem 2.5rem;
text-align: left !important;
border: 1px solid var(--theme-border);
border-radius: 28px;
background:
radial-gradient(
circle at top left,
rgba(47, 111, 159, 0.12),
transparent 36%
),
linear-gradient(
135deg,
#ffffff 0%,
var(--theme-primary-soft) 100%
);
box-shadow: 0 16px 38px rgba(25, 55, 80, 0.07);
}

.contact-inject > .text-center h2 {
margin: 0 0 0.75rem 0 !important;
font-size: var(--site-h1-size);
line-height: var(--site-h1-line-height);
letter-spacing: var(--site-h1-letter-spacing);
font-weight: var(--site-h1-weight);
color: var(--theme-text);
}

.contact-inject > .text-center p {
max-width: 680px;
margin: 0 !important;
font-size: var(--site-intro-size);
line-height: var(--site-intro-line-height);
color: var(--theme-muted) !important;
}

/* =========================================================
CARTE PRINCIPALE
========================================================= */

.contact-inject .card {
overflow: hidden;
border: 1px solid var(--theme-border) !important;
border-radius: 26px;
background: var(--theme-card-bg);
box-shadow: 0 14px 36px rgba(25, 55, 80, 0.075) !important;
}

.contact-inject .card-body {
padding: 2.5rem;
}

/* Encadré d’introduction */
.contact-inject .card-body > .bg-light {
margin-bottom: 1.75rem !important;
padding: 1rem 1.15rem !important;
border: 1px solid var(--theme-border) !important;
border-radius: 16px !important;
background: var(--theme-primary-soft) !important;
}

.contact-inject .card-body > .bg-light .bi {
color: var(--theme-accent) !important;
}

.contact-inject .card-body > .bg-light .fw-semibold {
color: var(--theme-primary-dark);
}

.contact-inject .card-body > .bg-light .text-muted {
color: var(--theme-muted) !important;
}

/* =========================================================
CHAMPS
========================================================= */

.contact-inject .form-label {
color: var(--theme-text);
font-size: 0.95rem;
font-weight: 700 !important;
}

.contact-inject .form-control,
.contact-inject .form-select,
.contact-inject textarea {
min-height: 46px;
border: 1px solid rgba(36, 71, 102, 0.24);
border-radius: 12px;
background: #ffffff;
color: var(--theme-text);
transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease;
}

.contact-inject textarea {
min-height: 145px;
resize: vertical;
}

.contact-inject .form-control:hover,
.contact-inject .form-select:hover,
.contact-inject textarea:hover {
border-color: rgba(47, 111, 159, 0.45);
}

.contact-inject .form-control:focus,
.contact-inject .form-select:focus,
.contact-inject textarea:focus {
border-color: var(--theme-accent);
box-shadow: 0 0 0 0.22rem rgba(47, 111, 159, 0.14);
}

.contact-inject .form-text,
.contact-inject .small.text-muted {
color: var(--theme-muted) !important;
}

/* =========================================================
CONSENTEMENT ET CAPTCHA
========================================================= */

.contact-inject .form-check {
padding: 1rem 1rem 1rem 2.4rem;
border: 1px solid var(--theme-border);
border-radius: 14px;
background: var(--theme-page-bg);
}

.contact-inject .form-check-input {
margin-top: 0.25rem;
}

.contact-inject .form-check-input:checked {
background-color: var(--theme-accent);
border-color: var(--theme-accent);
}

.contact-inject .form-check-label {
line-height: 1.6;
color: var(--theme-muted) !important;
}

.contact-inject .form-check-label a {
color: var(--theme-accent-dark);
font-weight: 650;
text-underline-offset: 3px;
}

.contact-inject .cf-turnstile {
min-height: 65px;
}

/* =========================================================
BOUTON D’ENVOI
========================================================= */

.contact-inject button[type="submit"] {
min-height: 48px;
padding: 0.75rem 1.4rem;
border-radius: 999px;
font-weight: 750;
box-shadow: 0 10px 22px rgba(47, 111, 159, 0.20);
}

.contact-inject button[type="submit"]:hover,
.contact-inject button[type="submit"]:focus {
transform: translateY(-1px);
box-shadow: 0 13px 26px rgba(29, 83, 125, 0.24);
}

/* =========================================================
TABLETTE ET MOBILE
========================================================= */

@media (max-width: 900px) {
.contact-inject {
margin-top: 2rem !important;
}


.contact-inject > .text-center {
    padding: 2rem 1.75rem;
    border-radius: 22px;
}

.contact-inject .card {
    border-radius: 22px;
}

.contact-inject .card-body {
    padding: 2rem 1.75rem;
}


}

@media (max-width: 575.98px) {
.contact-inject {
margin-top: 1.5rem !important;
}


.contact-inject > .text-center {
    padding: 1.5rem 1.25rem;
    border-radius: 18px;
}

.contact-inject > .text-center h2 {
    font-size: 2rem;
    line-height: 1.1;
}

.contact-inject > .text-center p {
    font-size: 1rem;
    line-height: 1.65;
}

.contact-inject .card {
    border-radius: 18px;
}

.contact-inject .card-body {
    padding: 1.5rem 1.25rem;
}

.contact-inject button[type="submit"] {
    width: 100%;
}

}

/* =========================================================
HARMONISATION V07 — MENU ET FOOTER COMMUNS

Objectifs :

* même apparence sur tous les modèles ;
* meilleure hiérarchie entre navigation et CTA ;
* cohérence avec le thème bleu ;
* conservation du comportement mobile existant.
  ========================================================= */

/* =========================================================
MENU PRINCIPAL
========================================================= */

.site-menu {
margin-top: 18px !important;
margin-bottom: 24px !important;
font-family: var(--site-font-family);
}

.site-menu .site-menu-inner {
min-height: 66px;
padding: 0.8rem 1rem !important;
border: 1px solid var(--theme-border) !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 10px 28px rgba(25, 55, 80, 0.055) !important;
}

/* Nom du site */
.site-menu .site-menu-brand {
display: inline-flex;
align-items: center;
min-height: 40px;
color: var(--theme-primary-dark) !important;
font-size: 1.05rem;
line-height: 1.2;
font-weight: 800 !important;
letter-spacing: -0.015em;
}

.site-menu .site-menu-brand:hover,
.site-menu .site-menu-brand:focus {
color: var(--theme-accent-dark) !important;
}

/* Groupe de liens */
.site-menu .site-menu-links {
gap: 0.55rem !important;
}

/* Base commune des boutons du menu */
.site-menu .site-menu-links .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 0.48rem 0.9rem;
border-radius: 999px !important;
font-size: 0.88rem;
line-height: 1.2;
font-weight: 700;
white-space: normal;
transition:
color 0.15s ease,
background-color 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

/* Liens secondaires */
.site-menu .site-menu-links .btn-outline-secondary {
color: var(--theme-primary) !important;
background: #ffffff !important;
border-color: rgba(36, 71, 102, 0.24) !important;
}

.site-menu .site-menu-links .btn-outline-secondary:hover,
.site-menu .site-menu-links .btn-outline-secondary:focus {
color: var(--theme-primary-dark) !important;
background: var(--theme-primary-soft) !important;
border-color: rgba(47, 111, 159, 0.42) !important;
transform: translateY(-1px);
box-shadow: 0 7px 16px rgba(25, 55, 80, 0.08);
}

/* CTA principal */
.site-menu .site-menu-links .btn-primary {
color: #ffffff !important;
background: var(--theme-accent) !important;
border-color: var(--theme-accent) !important;
padding-left: 1.05rem;
padding-right: 1.05rem;
box-shadow: 0 8px 18px rgba(47, 111, 159, 0.18);
}

.site-menu .site-menu-links .btn-primary:hover,
.site-menu .site-menu-links .btn-primary:focus {
color: #ffffff !important;
background: var(--theme-accent-dark) !important;
border-color: var(--theme-accent-dark) !important;
transform: translateY(-1px);
box-shadow: 0 11px 22px rgba(29, 83, 125, 0.24);
}

/* Navigation au clavier */
.site-menu a:focus-visible {
outline: 3px solid rgba(47, 111, 159, 0.28);
outline-offset: 3px;
}

/* =========================================================
FOOTER COMMUN
========================================================= */

.site-footer-v2 {
margin-top: 2rem;
padding-bottom: 1.25rem;
font-family: var(--site-font-family);
}

.site-footer-v2 .site-footer-inner {
padding: 1.15rem 1.3rem;
border: 1px solid var(--theme-border);
border-radius: 20px;
background:
linear-gradient(
135deg,
#ffffff 0%,
var(--theme-page-bg) 100%
);
box-shadow: 0 10px 28px rgba(25, 55, 80, 0.045);
}

.site-footer-v2 .footer-title {
color: var(--theme-primary-dark);
font-size: 0.9rem;
font-weight: 750;
}

.site-footer-v2 .footer-copy {
color: var(--theme-muted);
}

.site-footer-v2 .footer-nav {
gap: 0.35rem;
}

.site-footer-v2 .footer-nav a {
min-height: 2.1rem;
padding: 0.38rem 0.68rem;
color: var(--theme-muted);
font-size: 0.85rem;
font-weight: 600;
}

.site-footer-v2 .footer-nav a:hover,
.site-footer-v2 .footer-nav a:focus {
color: var(--theme-primary-dark);
background: var(--theme-primary-soft);
}

/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 991.98px) {
.site-menu .site-menu-inner {
align-items: flex-start !important;
}


.site-menu .site-menu-brand {
    margin-right: 1rem;
}

.site-footer-v2 .site-footer-inner {
    gap: 1rem;
}


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 575.98px) {
.site-menu {
margin-top: 12px !important;
margin-bottom: 18px !important;
}


.site-menu .site-menu-inner {
    min-height: 0;
    padding: 0.9rem !important;
    border-radius: 18px !important;
}

.site-menu .site-menu-brand {
    margin-right: 0;
    margin-bottom: 0.4rem;
    min-height: auto;
}

.site-menu .site-menu-links {
    gap: 0.5rem !important;
}

.site-menu .site-menu-links .btn {
    min-height: 40px;
    padding: 0.5rem 0.7rem;
    font-size: 0.86rem;
}

.site-footer-v2 .site-footer-inner {
    border-radius: 18px;
}


}

/* =========================================================
SITESGEN — V10A
PAGE CONTACT — HIÉRARCHIE VISUELLE

H1 propre à la page Contact.
En-tête du formulaire autonome et réutilisable.
========================================================= */

/* =========================================================
H1 DE LA PAGE CONTACT
========================================================= */

.contact-page.contact-v1 .contact-page-header {
width: 100%;
max-width: 820px;
margin: 3rem auto 1.25rem;
padding: 2rem 2.25rem;
box-sizing: border-box;


border: 1px solid var(--theme-border);
border-radius: 28px;

background:
    radial-gradient(
        circle at top left,
        rgba(47, 111, 159, 0.12),
        transparent 36%
    ),
    linear-gradient(
        135deg,
        #ffffff 0%,
        var(--theme-primary-soft) 100%
    );

box-shadow: 0 16px 38px rgba(25, 55, 80, 0.07);


}

.contact-page.contact-v1 .contact-page-header h1 {
margin: 0;


color: var(--theme-text);
font-family: var(--site-font-family);
font-size: var(--site-h1-size);
line-height: var(--site-h1-line-height);
letter-spacing: var(--site-h1-letter-spacing);
font-weight: var(--site-h1-weight);


}

/* Le formulaire suit directement le H1 */
.contact-page.contact-v1 .contact-inject {
margin-top: 0 !important;
}

/* =========================================================
EN-TÊTE RÉUTILISABLE DU FORMULAIRE
========================================================= */

.contact-inject .contact-form-heading {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 1rem;
align-items: center;


margin: 0 0 1rem 0;
padding: 1rem 1.15rem;

border: 1px solid var(--theme-border);
border-radius: 16px;
background: var(--theme-primary-soft);


}

/* Cercle contenant l’icône */
.contact-inject .contact-form-heading > .bi {
display: inline-flex;
align-items: center;
justify-content: center;


width: 48px;
height: 48px;

border-radius: 50%;
background: #ffffff;
color: var(--theme-accent);

font-size: 1.25rem;
line-height: 1;


}

/* Contenu texte */
.contact-inject .contact-form-heading-content {
min-width: 0;
}

/* H2 du formulaire */
.contact-inject .contact-form-heading h2 {
margin: 0 0 0.3rem 0;


color: var(--theme-primary-dark);
font-size: clamp(1.4rem, 2vw, 1.7rem);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 750;


}

/* Phrase explicative */
.contact-inject .contact-form-heading p {
max-width: 680px;
margin: 0;


color: var(--theme-muted);
font-size: 0.98rem;
line-height: 1.55;


}

/* =========================================================
TABLETTE
========================================================= */

@media (max-width: 900px) {
.contact-page.contact-v1 .contact-page-header {
max-width: none;
margin-top: 2rem;
padding: 1.75rem;
border-radius: 22px;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 575.98px) {
.contact-page.contact-v1 .contact-page-header {
margin-top: 1.5rem;
margin-bottom: 1.25rem;
padding: 1.5rem 1.25rem;
border-radius: 18px;
}


.contact-page.contact-v1 .contact-page-header h1 {
    font-size: 2rem;
    line-height: 1.1;
}

.contact-inject .contact-form-heading {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
}

.contact-inject .contact-form-heading > .bi {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

.contact-inject .contact-form-heading h2 {
    font-size: 1.35rem;
}

.contact-inject .contact-form-heading p {
    font-size: 0.94rem;
    line-height: 1.5;
}


}

/* =========================================================
SITESGEN — V10A.2
FORMULAIRE — INTRODUCTION COMPACTE AVEC ICÔNE D’ORIGINE
========================================================= */

.contact-inject .contact-form-intro {
background: var(--theme-primary-soft) !important;
border-color: var(--theme-border) !important;
}

/* Petite icône Bootstrap conservée sans cercle */
.contact-inject .contact-form-intro .bi {
flex: 0 0 auto;
margin-top: 0.15rem;
color: var(--theme-accent) !important;
}

/* H2 plus visible que l’ancien libellé, mais nettement inférieur au H1 */
.contact-inject .contact-form-intro-title {
margin: 0 0 0.2rem 0 !important;
color: var(--theme-primary-dark);
font-size: 1.25rem !important;
line-height: 1.3 !important;
letter-spacing: -0.01em;
font-weight: 750;
}

/* Mobile */
@media (max-width: 575.98px) {
.contact-inject .contact-form-intro-title {
font-size: 1.15rem !important;
}
}

/* =========================================================
   SITESGEN — V10B
   PAGE 404 — PRÉSENTATION HARMONISÉE
   ========================================================= */

.error-page.error-404-v1 {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    font-family: var(--site-font-family);
}

.error-page.error-404-v1 .error-page-inner {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
}

.error-page.error-404-v1 .error-card {
    padding: 3rem;
    text-align: center;

    border: 1px solid var(--theme-border);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at top left,
            rgba(47, 111, 159, 0.12),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--theme-primary-soft) 100%
        );

    box-shadow: 0 16px 38px rgba(25, 55, 80, 0.07);
}

.error-page.error-404-v1 .error-code {
    margin-bottom: 0.4rem;
    color: var(--theme-accent);
    font-size: clamp(4.5rem, 10vw, 7rem);
    line-height: 1;
    font-weight: 850;
    letter-spacing: -0.06em;
}

.error-page.error-404-v1 h1 {
    margin: 0 0 1rem;
    color: var(--theme-primary-dark);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.035em;
    font-weight: 800;
}

.error-page.error-404-v1 .error-intro {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    color: var(--theme-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.error-page.error-404-v1 .error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.error-page.error-404-v1 .error-actions .btn {
    min-height: 46px;
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
}

.error-page.error-404-v1 .error-help {
    max-width: 680px;
    margin: 2rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--theme-border);
    color: var(--theme-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

@media (max-width: 575.98px) {
    .error-page.error-404-v1 {
        min-height: auto;
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }

    .error-page.error-404-v1 .error-card {
        padding: 2rem 1.25rem;
        border-radius: 18px;
    }

    .error-page.error-404-v1 .error-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .error-page.error-404-v1 .error-actions .btn {
        width: 100%;
    }
}

/* =========================================================
   PAGE D’ACCUEIL — CORRECTIFS DE LARGEUR ET D’ESPACEMENT
   ========================================================= */

/* Les textes utilisent toute la largeur disponible */
.home-page .home-intro,
.home-page .home-paragraph,
.home-page .home-zone-content,
.home-page .home-section-heading,
.home-page .home-faq-list,
.home-page .home-faq-item {
    width: 100%;
    max-width: none;
}

/* Le contenu du Hero peut s’étendre davantage vers la droite */
.home-page .home-hero-content {
    width: 100%;
    max-width: none;
}

.home-page .home-hero-content .home-intro {
    width: 100%;
    max-width: none;
}

/* Réduction de l’espace entre le dernier CTA et le footer */
.home-page .home-final-cta {
    margin-bottom: 0;
    padding-bottom: 0;
}

.home-page .home-final-cta-box {
    margin-bottom: 0;
}

.home-page {
    margin-bottom: 0;
    padding-bottom: 0;
}