/* =========================================================
   ClicAudit — Feuille de styles partagée
   =========================================================
   Fichier chargé depuis header.php sur toutes les pages.
   Contient :
     - les variables de design (couleurs, rayons, ombres)
     - la typographie de base (html, body, h1-h4, .script)
     - les classes utilitaires (.text-gold, .bg-navy, etc.)
     - la navbar partagée (.site-header)
     - le footer partagé  (.site-footer)

   Pour modifier la palette, les fontes ou la mise en forme
   header / footer, c'est ICI et nulle part ailleurs.
   ========================================================= */

:root {
    --navy-900:        #0a1838;     /* fond navy principal */
    --navy-800:        #0d1f44;     /* variantes cartes navy */
    --navy-700:        #132a57;
    --gold-500:        #e9a935;     /* or principal */
    --gold-400:        #f2bb4a;
    --gold-300:        #f8d583;
    --gold-100:        #fcecc5;
    --cream-100:       #fdfaf9;     /* fond crème global */
    --cream-50:        #f8f4f0;
    --card-bg:         #ffffff;
    --border-soft:     #e6e3d6;
    --text-light:      #ffffff;
    --text-muted-light:#cfd5e2;
    --text-dark:       #0a1838;
    --text-soft:       #6b7280;
    --radius-lg:       22px;
    --radius-md:       14px;
    --radius-sm:       10px;
    --shadow-card:     0 18px 40px rgba(4, 10, 30, 0.35);
    --shadow-soft:     0 10px 30px rgba(10, 24, 56, 0.06);
}

/* =========================================================
   BASE — typographie & corps de page
   ========================================================= */
html {
    /* Compense la hauteur du menu sticky lors de la navigation par ancres.
       La valeur correspond à la hauteur réelle du .site-header (~72px)
       plus un petit espace de confort (8px). */
    scroll-padding-top: 100px;
}

html, body {
    background-color: var(--cream-100);
    color: var(--text-dark);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}

.script {
    font-family: 'Dancing Script', cursive;
    font-weight: 700;
    color: var(--gold-500);
    font-style: italic;
}

/* =========================================================
   UTILITAIRES de couleurs
   ========================================================= */
.text-gold  { color: var(--gold-500) !important; }
.text-navy  { color: var(--navy-900) !important; }
.bg-navy    { background-color: var(--navy-900) !important; }
.bg-cream   { background-color: var(--cream-100) !important; }

/* =========================================================
   NAVBAR (header.php)
   ========================================================= */
.site-header {
    background-color: var(--navy-900);
    padding: 22px 0 18px;
    /* Sticky : reste visible au scroll. z-index 1020 = convention Bootstrap
       (sticky-top), suffisant pour passer au-dessus de tous les contenus
       courants sans gêner les modales (z-index 1050+). */
    position: sticky;
    top: 0;
    z-index: 1020;
}
.site-header .navbar-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.site-header .navbar-brand .logo-icon {
    width: 40px; height: 40px;
    border: 2px solid #ffffff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
}
.site-header .navbar-brand .brand-gold { color: var(--gold-500); }

.site-header .main-nav {
    display: flex;
    gap: 34px;
    align-items: center;
}
.site-header .main-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    padding-bottom: 4px;
    transition: color .2s;
}
.site-header .main-nav a.active { border-bottom: 2px solid var(--gold-500); }
.site-header .main-nav a:hover  { color: var(--gold-500); }

/* CTA "Demander un audit" */
.site-header .btn-cta {
    background: linear-gradient(180deg, #f3c25a 0%, #e9a935 55%, #d99a22 100%);
    color: var(--navy-900) !important;
    font-weight: 700;
    font-size: 15px;
    border: 0;
    border-radius: 10px;
    padding: 12px 22px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                0 2px 6px rgba(0,0,0,.15);
    transition: filter .2s, transform .2s, box-shadow .2s;
}
.site-header .btn-cta:hover {
    filter: brightness(1.05);
    color: var(--navy-900);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
                0 4px 10px rgba(0,0,0,.2);
}


/* Bouton principal or (hero & pricing) — dégradé doré subtil */
.btn-primary-gold {
	background: linear-gradient(180deg, #f3c25a 0%, #e9a935 55%, #d99a22 100%);
	color: var(--navy-900);
	font-weight: 700;
	font-size: 17px;
	border-radius: 12px;
	padding: 18px 26px;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 60px;
	/*min-width: 340px;*/
	text-decoration: none;           /* supprime le soulignement lien */
	box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
				0 6px 16px rgba(0,0,0,.25);
	transition: filter .2s, transform .2s, box-shadow .2s;
}
.btn-primary-gold:hover {
	filter: brightness(1.05);
	color: var(--navy-900);
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255,255,255,.3) inset,
				0 10px 20px rgba(0,0,0,.3);
}
.btn-primary-gold .arrow {
	width: 32px; height: 32px; border-radius: 50%;
	background-color: var(--navy-900); color: var(--gold-500);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 16px;
}

/* Garantie "Satisfait ou remboursé" — toujours sous le bouton */
.guarantee {
	display: flex;                /* block => passage à la ligne sous le bouton */
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 14px;
	margin-top: 22px;
	width: fit-content;
}
.guarantee svg { flex-shrink: 0; }



/* Burger mobile */
.site-header .navbar-toggler {
    border: 1px solid rgba(255,255,255,.6);
    color: #ffffff;
}
.site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================================
   FOOTER (footer.php)
   ========================================================= */
.site-footer {
    background-color: var(--navy-900);
    color: #ffffff;
    padding: 60px 0 24px;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}
.site-footer .navbar-brand { margin-bottom: 14px; }
.site-footer .tagline {
    color: #cfd5e2;
    font-size: 14px;
    margin-bottom: 18px;
    line-height: 1.55;
}
.site-footer .socials { display: flex; gap: 10px; }
.site-footer .socials a {
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: background-color .2s, border-color .2s;
}
.site-footer .socials a:hover {
    background: rgba(233,169,53,.12);
    border-color: var(--gold-500);
    color: var(--gold-500);
}
.site-footer .foot-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--gold-500);
    letter-spacing: .08em;
    margin-bottom: 16px;
}
.site-footer ul.foot-list { list-style: none; padding: 0; margin: 0; }
.site-footer ul.foot-list li { margin-bottom: 10px; }
.site-footer ul.foot-list a {
    color: #cfd5e2;
    text-decoration: none;
    font-size: 14px;
    transition: color .2s;
}
.site-footer ul.foot-list a:hover { color: var(--gold-500); }
.site-footer .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #cfd5e2;
    font-size: 14px;
    margin-bottom: 10px;
}
.site-footer .contact-item svg { color: var(--gold-500); flex-shrink: 0; }
.site-footer .contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}
.site-footer .contact-item a:hover { color: var(--gold-500); }
.site-footer .foot-divider {
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    color: #9ca3b2;
	text-align:right;
	padding-top:30px;
}
.site-footer .foot-divider a {
    color: #9ca3b2;
    text-decoration: none;
}
.site-footer .foot-divider a:hover { color: var(--gold-500); }


/* =========================================================
   CTA FOOTER
   ========================================================= */
.cta-band-wrap {
	padding: 60px 0 80px;
}
.cta-band {
	background-color: var(--navy-900);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 50px 48px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	border: 2px solid #27325b;
}
.cta-band h2 {
	color: #fff;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	line-height: 1.15;
	margin-bottom: 10px;
}
.cta-band h2 .text-gold { color: var(--gold-500); }
.cta-band p {
	color: var(--text-muted-light);
	margin: 0;
	font-size: 15px;
}
.cta-band .secure {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 14px;
	margin-top: 14px;
}
.cta-band .cta-visual {
	position: absolute;
	right: 0;
	bottom: -20px;
	max-width: 360px;
	pointer-events: none;
}
.cta-band .cta-visual img {
	width: 100%;
	height: auto;
}
		
		
/* =========================================================
   RESPONSIVE — navbar + footer
   ========================================================= */
@media (max-width: 991.98px) {
    .site-header .main-nav {
        flex-direction: column;
        gap: 16px;
        background: var(--navy-900);
        padding: 20px 0;
        align-items: flex-start;
    }
}

@media (max-width: 575.98px) {
    .site-header .navbar-brand { font-size: 22px; }
    .site-header .navbar-brand .logo-icon { width: 34px; height: 34px; }
}

/* =========================================================
   ============= DESIGN SYSTEM v1 ==========================
   =========================================================
   Composants canoniques réutilisables sur toutes les pages.
   Convention BEM allégée :
       .block                  → composant
       .block__element         → sous-élément du composant
       .block--modifier        → variante du composant
   Plusieurs modifiers peuvent être combinés sur le même block.

   Catalogue :
     .hero            (avec --with-image, --with-breadcrumb)
     .section-header  (avec --centered, --on-dark)
     .card            (--light / --dark / --gold-accent / --numbered / --with-icon / --hover-lift)
     .id-pill         (--gold / --on-dark)
     .stat-band       (--inline / --stacked)
     .pull-quote      (--gold / --navy)
     .btn             (--gold / --outline / --cta)

   Voir styleguide.html pour l'aperçu visuel + snippets HTML.
   ========================================================= */


/* ----------------------------------------------------------
   .hero — bandeau d'introduction de page (navy, texte clair)
   ----------------------------------------------------------
   Modifiers :
     --with-image       : réserve une colonne droite pour un visuel
     --with-breadcrumb  : ajoute un fil d'Ariane au-dessus du badge
*/
.hero {
    background-color: var(--navy-900);
    color: var(--text-light);
    padding: 50px 0 70px;
    position: relative;
    overflow: hidden;
}
.hero__breadcrumb {
    font-size: 13px;
    color: var(--text-muted-light);
    padding-top: 6px;
    margin-bottom: 22px;
}
.hero__breadcrumb a {
    color: var(--text-muted-light);
    text-decoration: none;
    transition: color .2s;
}
.hero__breadcrumb a:hover { color: var(--gold-500); }
.hero__breadcrumb .sep { margin: 0 6px; opacity: .6; }
.hero__breadcrumb .current { color: #fff; }

.hero__badge {
    display: inline-block;
    border: 1px solid var(--gold-500);
    background: rgba(233, 169, 53, 0.10);
    color: var(--gold-500);
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.hero__title {
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 4.8vw, 4rem);
    line-height: 1.1;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.hero__title .script {
    display: block;
    font-size: 1.05em;
    line-height: 1.05;
}
.hero__lead {
    font-size: 18px;
    line-height: 1.6;
    color: var(--text-muted-light);
    max-width: 640px;
    margin: 0 0 24px;
}
.hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 18px;
}
.hero__visual {
    position: relative;
    min-height: 360px;
}
.hero__visual img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991.98px) {
    .hero {
        padding: 50px 0 60px;
        text-align: center;
    }
    .hero__lead { margin-left: auto; margin-right: auto; }
    .hero__pills { justify-content: center; }
    .hero__visual { display: none; }
}


/* ----------------------------------------------------------
   .section-header — eyebrow + titre + accroche d'une section
   ----------------------------------------------------------
   Modifiers :
     --centered  : aligne tout au centre
     --on-dark   : couleurs adaptées à un fond sombre (.bg-navy)
*/
.section-header {
    margin-bottom: 40px;
}
.section-header__eyebrow {
    color: var(--gold-500);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.section-header__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 18px;
    color: var(--text-dark);
    letter-spacing: -0.01em;
}
.section-header__title .script {
    color: var(--gold-500);
    display: block;
}
.section-header__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-soft);
    max-width: 720px;
    margin: 0;
}
.section-header__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin-top: 18px;
}

.section-header--centered             { text-align: center; }
.section-header--centered .section-header__lead { margin-left: auto; margin-right: auto; }
.section-header--centered .section-header__tags { justify-content: center; }

.section-header--on-dark .section-header__title { color: #fff; }
.section-header--on-dark .section-header__lead  { color: var(--text-muted-light); }


/* ----------------------------------------------------------
   .card — carte de contenu modulaire
   ----------------------------------------------------------
   Modifiers (combinables) :
     --light        : fond blanc, texte sombre (par défaut)
     --dark         : fond navy, texte clair
     --gold-accent  : bordure haute or
     --numbered     : numéro en grand (.card__num)
     --with-icon    : icône carrée or en haut (.card__icon)
     --hover-lift   : translation vers le haut au survol
*/
.card {
    border-radius: var(--radius-md);
    padding: 28px 26px;
    border: 1px solid transparent;
    transition: transform .2s, box-shadow .2s;
}

.card--light {
    background: var(--card-bg);
    color: var(--text-dark);
    border-color: var(--border-soft);
    box-shadow: var(--shadow-soft);
}
.card--dark {
    background: var(--navy-800);
    color: #fff;
    border-color: rgba(255,255,255,.06);
}
.card--gold-accent { border-top: 4px solid var(--gold-500); }

.card--hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(10, 24, 56, .08);
}
.card--dark.card--hover-lift:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

.card__num {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 38px;
    color: var(--gold-500);
    line-height: 1;
    margin-bottom: 14px;
}
.card__icon {
    color: var(--gold-500);
    background: #fff8ea;
    width: 52px; height: 52px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.card--dark .card__icon {
    background: rgba(233,169,53,.12);
}
.card__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 10px;
}
.card--light .card__title { color: var(--navy-900); }
.card--dark  .card__title { color: #fff; }
.card__text {
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
}
.card--light .card__text { color: var(--text-soft); }
.card--dark  .card__text { color: var(--text-muted-light); }
.card__meta {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-500);
    margin-bottom: 10px;
}


/* ----------------------------------------------------------
   .id-pill — pavé d'identification (référence, tag, code)
   ----------------------------------------------------------
   Modifiers :
     --gold     : bordure et texte or, fond doré clair
     --on-dark  : adapté à un fond sombre (clair sur sombre)
*/
.id-pill {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--border-soft);
    color: var(--navy-900);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 6px 12px;
    border-radius: 100px;
    line-height: 1.4;
}
.id-pill--gold {
    border-color: var(--gold-500);
    background: rgba(233,169,53,.10);
    color: var(--gold-500);
}
.id-pill--on-dark {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.18);
    color: #fff;
}
.id-pill--on-dark.id-pill--gold {
    background: rgba(233,169,53,.10);
    border-color: var(--gold-500);
    color: var(--gold-500);
}


/* ----------------------------------------------------------
   .stat-band — bandeau de chiffres-clés
   ----------------------------------------------------------
   Modifiers :
     --inline   : items côte à côte (auto-grid responsive)
     --stacked  : items empilés sur un fond clair partagé
*/
.stat-band {
    display: grid;
    gap: 30px;
}
.stat-band--inline {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.stat-band--stacked {
    background: var(--card-bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    padding: 24px 30px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    box-shadow: var(--shadow-soft);
}
.stat-band__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.stat-band__icon {
    color: var(--gold-500);
    flex-shrink: 0;
}
.stat-band__value {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
    line-height: 1.2;
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.stat-band__value .unit {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--gold-500);
    font-size: 1.6em;
    line-height: 1;
}
.stat-band__text {
    font-size: 13.5px;
    color: var(--text-soft);
    line-height: 1.5;
    margin: 4px 0 0;
}

@media (max-width: 575.98px) {
    .stat-band--inline,
    .stat-band--stacked { grid-template-columns: 1fr 1fr; }
}


/* ----------------------------------------------------------
   .pull-quote — citation décorée
   ----------------------------------------------------------
   Modifiers :
     --gold  : fond beige, accent or (par défaut)
     --navy  : fond navy, texte clair
*/
.pull-quote {
    position: relative;
    padding: 36px 40px 36px 80px;
    border-radius: var(--radius-md);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 21px;
    line-height: 1.45;
    font-style: italic;
    border-left: 6px solid var(--gold-500);
}
.pull-quote::before {
    content: "\201C";
    position: absolute;
    left: 24px; top: 8px;
    font-size: 90px;
    line-height: 1;
    font-style: normal;
    font-weight: 700;
    color: var(--gold-500);
}
.pull-quote--gold {
    background: #fff8ea;
    color: var(--navy-900);
}
.pull-quote--navy {
    background: var(--navy-900);
    color: #fff;
}
.pull-quote strong {
    font-style: normal;
    font-weight: 700;
}
.pull-quote--navy strong { color: var(--gold-500); }


/* ----------------------------------------------------------
   .btn — bouton générique
   ----------------------------------------------------------
   Modifiers :
     --gold     : dégradé doré (par défaut pour les CTA)
     --outline  : contour doré sur fond transparent
     --cta      : variante compacte (header)

   Les classes legacy .btn-primary-gold et .btn-cta restent en
   place dans cette même feuille pour rétrocompatibilité avec
   les pages non-encore-migrées.
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 12px;
    border: 0;
    padding: 14px 22px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: filter .2s, transform .2s, box-shadow .2s;
}
.btn--gold {
    background: linear-gradient(180deg, #f3c25a, #e9a935 55%, #d99a22);
    color: var(--navy-900);
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset,
                0 6px 16px rgba(0,0,0,.18);
}
.btn--gold:hover {
    filter: brightness(1.05);
    color: var(--navy-900);
    transform: translateY(-1px);
}
.btn--outline {
    background: transparent;
    border: 1.5px solid var(--gold-500);
    color: var(--gold-500);
    padding: 12.5px 22px;
}
.btn--outline:hover {
    background: rgba(233,169,53,.1);
    color: var(--gold-500);
}
.btn--cta {
    padding: 12px 22px;
    font-size: 15px;
}
.btn__arrow {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--navy-900);
    color: var(--gold-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}