/*
Theme Name: Ose Qualite v24
Theme URI: https://osequalite.com
Author: OSE la Qualite
Author URI: https://osequalite.com
Description: Theme professionnel pour OSE la Qualite - Consultante senior en qualite et amelioration continue. V12 : design-system catafago-services-v45. Bilingue FR/EN via Polylang. V13-V19 : sceau SSL, sections alignees visuellement. V20-V22 : barre slogan + section OBSERVE-OPTIMIZE-EQUIP bilingues. V23 : favicon de repli. V24 : correction du debordement horizontal sur mobile EN — .hero-stats (4 statistiques, aucun retour a la ligne) forcait un depassement de largeur avec les libelles anglais plus longs ("years of experience", "in projects managed") ; passage en grille 2x2 sur mobile + overflow-x:hidden ajoute sur html en filet de securite.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ose-qualite
Tags: consulting, quality, professional, light, modern, one-page
*/

/* ============================================================
   OSE LA QUALITE — MASTER STYLESHEET v1.0 (Light Theme)
   Meme design-system que catafago-services-v45 :
   Palette blanc/gris clair, bleu marine, cyan
   ============================================================ */

/* ----- RESET & BASE ----- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* ---- Light Theme Palette ---- */
    --bg-primary:    #f0f4f8;
    --bg-secondary:  #e8eef5;
    --bg-white:      #ffffff;
    --bg-card:       #ffffff;
    --bg-card-hover: #f5f8fc;

    /* Blues from logo */
    --accent-blue:   #1a4480;
    --accent-cyan:   #0099cc;
    --accent-light:  #e8f4fd;
    --accent-glow:   rgba(26, 68, 128, 0.12);

    /* Text */
    --text-primary:  #1a2744;
    --text-secondary:#4a6080;
    --text-muted:    #8da0bb;

    /* Borders & shadows */
    --border:        rgba(26, 68, 128, 0.15);
    --border-light:  rgba(26, 68, 128, 0.08);
    --shadow-card:   0 2px 16px rgba(26, 68, 128, 0.10), 0 0 0 1px var(--border-light);
    --shadow-hover:  0 8px 32px rgba(26, 68, 128, 0.16);
    --shadow-glow:   0 0 40px rgba(26, 68, 128, 0.08);

    /* Status */
    --success:       #1a9e6e;
    --warning:       #d97706;
    --error:         #dc2626;

    /* Typography */
    --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'Courier New', monospace;

    /* Spacing & shape */
    --radius-sm:     6px;
    --radius-md:     12px;
    --radius-lg:     20px;
    --transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --max-width:     1200px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden; /* body seul ne suffit pas sur mobile Safari si un
                            descendant déborde — voir .hero-stats plus bas */
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-cyan); }
ul, ol { list-style: none; }
button, input, textarea, select { font-family: inherit; }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
}

.section { padding: 100px 0; }
.section-alt { background: var(--bg-secondary); }
.section-white { background: var(--bg-white); }

/* ----- TYPOGRAPHY ----- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { color: var(--text-secondary); margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 14px;
}

.section-tag::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--accent-cyan);
    border-radius: 2px;
}

.section-title { margin-bottom: 14px; }

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 52px;
}

.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }
.text-center .section-tag { justify-content: center; }

/* ----- BUTTONS ----- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    text-decoration: none;
}

.btn-primary {
    background: var(--accent-blue);
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,68,128,0.3);
}

.btn-primary:hover {
    background: #153870;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26,68,128,0.4);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--accent-blue);
    border: 1.5px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--accent-blue);
    background: var(--accent-light);
    transform: translateY(-2px);
    color: var(--accent-blue);
}

.btn-ghost {
    background: transparent;
    color: var(--accent-cyan);
    padding: 0;
    gap: 6px;
}

.btn-ghost:hover { color: var(--accent-blue); gap: 12px; }

.btn-cyan {
    background: var(--accent-cyan);
    color: #fff;
    box-shadow: 0 4px 16px rgba(0,153,204,0.3);
}

.btn-cyan:hover {
    background: #007aa3;
    color: #fff;
    transform: translateY(-2px);
}

/* ----- HEADER / NAVIGATION ----- */
/* Le menu et la barre slogan sont regroupés dans .site-header-group, seul
   élément en position fixe : les deux restent visibles ensemble en tout
   temps, peu importe le défilement. */
.site-header-group {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.site-header {
    padding: 0 24px;
    height: 70px;
    display: flex;
    align-items: center;
    background: rgba(240, 244, 248, 0.9);
    transition: all var(--transition);
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 2px 20px rgba(26,68,128,0.1);
}

/* Barre slogan — toujours visible sous le menu, même en défilant */
.slogan-bar {
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    padding: 9px 24px;
}

.slogan-bar p {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.slogan-bar strong {
    font-weight: 800;
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-logo img.custom-logo {
    height: 46px;
    width: auto;
    object-fit: contain;
}

.logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.logo-text { display: flex; flex-direction: column; }

.logo-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-blue);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.logo-tagline {
    font-size: 0.6rem;
    color: var(--accent-cyan);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.main-nav a {
    padding: 8px 13px;
    font-size: 0.87rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.main-nav a:hover, .main-nav a.active {
    color: var(--accent-blue);
    background: var(--accent-light);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lang-switcher {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
    background: transparent;
}

.lang-switcher:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: var(--accent-light);
}

/* Language switcher — Polylang */
.lang-switcher-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-switcher-wrap ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lang-switcher-wrap li {
    list-style: none;
    display: flex;
    align-items: center;
}

/* Separator between languages */
.lang-switcher-wrap li + li::before {
    content: '|';
    color: var(--border);
    margin-right: 6px;
    font-weight: 300;
}

.lang-switcher-wrap a {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.lang-switcher-wrap a:hover,
.lang-switcher-wrap .current-lang a,
.lang-switcher-wrap a[aria-current] {
    color: var(--accent-blue);
    background: var(--accent-light);
}

/* Footer logo */
.footer-logo-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 8px;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
}

.hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--accent-blue);
    border-radius: 2px;
    transition: all var(--transition);
}

/* ----- HERO ----- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 168px 24px 80px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #ffffff 0%, #e8eef5 50%, #d6e4f5 100%);
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,68,128,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,68,128,0.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, black 30%, transparent 100%);
}

.hero-glow {
    position: absolute;
    width: 700px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(0,153,204,0.08) 0%, transparent 70%);
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
}

.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(0,153,204,0.1);
    border: 1px solid rgba(0,153,204,0.25);
    border-radius: 50px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 26px;
}

.hero-badge .dot {
    width: 6px; height: 6px;
    background: var(--accent-cyan);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.hero-title { margin-bottom: 22px; }

.hero-title .highlight {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 36px;
    max-width: 520px;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 52px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.stat-item { display: flex; flex-direction: column; min-width: 0; }

.stat-number {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--accent-blue);
    line-height: 1;
}

.stat-number .accent { color: var(--accent-cyan); }

.stat-label {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Hero Visual — app mockup panel */
.hero-visual { position: relative; }

.hero-terminal {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--accent-blue);
    border-bottom: 1px solid var(--border-light);
}

.terminal-dot { width: 11px; height: 11px; border-radius: 50%; }
.terminal-dot.red    { background: #ff5f56; }
.terminal-dot.yellow { background: #ffbd2e; }
.terminal-dot.green  { background: #27c93f; }

.terminal-title {
    margin-left: 8px;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-mono);
}

.terminal-body {
    padding: 20px 24px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 2;
    background: #f8fafc;
}

.terminal-line { display: flex; gap: 12px; }
.t-prompt  { color: var(--accent-cyan); }
.t-cmd     { color: var(--text-primary); }
.t-comment { color: var(--text-muted); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-info    { color: var(--accent-blue); }

.terminal-cursor {
    display: inline-block;
    width: 8px; height: 16px;
    background: var(--accent-cyan);
    border-radius: 1px;
    animation: blink 1.2s step-end infinite;
    vertical-align: middle;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-floating-card {
    position: absolute;
    padding: 12px 16px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.hero-floating-card.card-1 {
    bottom: -20px; left: -24px;
    animation: float1 4s ease-in-out infinite;
}

.hero-floating-card.card-2 {
    top: -16px; right: -20px;
    animation: float2 5s ease-in-out infinite;
}

@keyframes float1 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes float2 { 0%,100% { transform:translateY(0); } 50% { transform:translateY(8px); } }

.fc-icon {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}

.fc-icon.blue  { background: rgba(26,68,128,0.1); }
.fc-icon.green { background: rgba(26,158,110,0.1); }

.fc-text strong { display: block; color: var(--text-primary); font-size: 0.8rem; }
.fc-text span   { color: var(--text-muted); font-size: 0.7rem; }

/* ----- SERVICES SECTION ----- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    transition: all var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-cyan));
    opacity: 0;
    transition: opacity var(--transition);
}

.service-card:hover {
    border-color: rgba(26,68,128,0.2);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.service-card:hover::before { opacity: 1; }

.service-card.featured {
    border-color: rgba(26,68,128,0.25);
    background: linear-gradient(135deg, rgba(26,68,128,0.03), rgba(0,153,204,0.02));
}

.service-card.featured::before { opacity: 1; }

.service-icon {
    width: 50px; height: 50px;
    background: var(--accent-light);
    border: 1px solid rgba(26,68,128,0.15);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 18px;
    transition: all var(--transition);
}

.service-card:hover .service-icon {
    background: rgba(26,68,128,0.12);
    transform: scale(1.05);
}

.service-card h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.service-card p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 18px;
}

.service-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.service-tag {
    padding: 3px 10px;
    background: var(--accent-light);
    border: 1px solid rgba(26,68,128,0.12);
    border-radius: 50px;
    font-size: 0.7rem;
    color: var(--accent-blue);
    font-weight: 600;
}

/* ---- CyberIA Feature ---- */
.cyberia-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    background: linear-gradient(135deg, rgba(26,68,128,0.04), rgba(0,153,204,0.03));
    border-color: rgba(26,68,128,0.2);
    padding: 48px;
    border-radius: var(--radius-lg);
}

.cyberia-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(26,68,128,0.08);
    border: 1px solid rgba(26,68,128,0.2);
    border-radius: 50px;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--accent-blue);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.cyberia-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 20px 0;
}

.cyberia-feature {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.cyberia-feature-icon { color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* CyberIA Screenshots Gallery */
.cyberia-screenshots {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.screenshot-main {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}

.screenshot-main img {
    width: 100%;
    height: auto;
    display: block;
}

.screenshot-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.screenshot-thumb {
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition);
    opacity: 0.7;
}

.screenshot-thumb:hover, .screenshot-thumb.active {
    opacity: 1;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(26,68,128,0.2);
}

.screenshot-thumb img { width: 100%; height: auto; display: block; }

/* Placeholder for screenshots not yet uploaded */
.screenshot-placeholder {
    background: var(--bg-secondary);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    aspect-ratio: 16/10;
}

/* AI orb (kept for fallback) */
.cyberia-visual { position: relative; display: flex; justify-content: center; }

.ai-orb {
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(0,153,204,0.2), rgba(26,68,128,0.1) 50%, transparent 70%);
    border: 1px solid rgba(26,68,128,0.2);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    animation: orb-pulse 4s ease-in-out infinite;
}

@keyframes orb-pulse {
    0%, 100% { box-shadow: 0 0 30px rgba(26,68,128,0.12); }
    50%       { box-shadow: 0 0 60px rgba(26,68,128,0.22); }
}

.ai-orb::before {
    content: '';
    position: absolute; inset: -12px;
    border-radius: 50%;
    border: 1px dashed rgba(26,68,128,0.2);
    animation: rotate-ring 12s linear infinite;
}

@keyframes rotate-ring { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.ai-text {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ----- ABOUT SECTION ----- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image { position: relative; }

.about-photo-wrapper {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
}

.about-photo-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
    color: var(--text-muted); font-size: 0.85rem;
}

.about-photo-placeholder .icon { font-size: 3rem; opacity: 0.3; }
.about-photo-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.about-cert-badge {
    position: absolute;
    bottom: 24px; right: -20px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-hover);
}

.cert-list { display: flex; flex-direction: column; gap: 6px; }

.cert-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.77rem; color: var(--text-secondary);
}

.cert-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    flex-shrink: 0;
}

.expertise-list {
    display: flex; flex-direction: column; gap: 14px;
    margin: 28px 0;
}

.expertise-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition);
}

.expertise-item:hover {
    border-color: var(--border);
    background: var(--bg-white);
    box-shadow: var(--shadow-card);
}

.expertise-num {
    width: 30px; height: 30px;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.76rem; font-weight: 700;
    color: var(--accent-blue);
    flex-shrink: 0;
}

.expertise-body h4 { font-size: 0.9rem; margin-bottom: 4px; }
.expertise-body p  { font-size: 0.8rem; margin: 0; color: var(--text-muted); }

/* About section — justified text */
.about-content p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}

/* ----- PROCESS SECTION ----- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
    margin-top: 56px;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 36px; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-blue) 20%, var(--accent-cyan) 80%, transparent);
    opacity: 0.35;
}

.process-step {
    display: flex; flex-direction: column;
    align-items: center; text-align: center;
    padding: 0 16px; position: relative;
}

.step-number {
    width: 72px; height: 72px;
    background: var(--bg-white);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 800;
    color: var(--accent-blue);
    margin-bottom: 22px;
    position: relative; z-index: 1;
    transition: all var(--transition);
}

.process-step:hover .step-number {
    background: var(--accent-light);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 6px rgba(26,68,128,0.08);
}

.process-step h4 { font-size: 0.92rem; margin-bottom: 8px; }
.process-step p  { font-size: 0.8rem; }

/* ----- CONTACT SECTION ----- */
/* Encart à fond bleu-gris pâle, même traitement que .terrain-grid-wrap :
   la section reste blanche (alternance de rythme préservée), mais les
   cartes de contact et le formulaire ressortent comme dans "Accompagnement"
   et "Sur le terrain". */
.contact-panel {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.contact-info h2 { margin-bottom: 14px; }

.contact-cards {
    display: flex; flex-direction: column; gap: 12px;
    margin-top: 28px;
}

.contact-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 18px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    box-shadow: var(--shadow-card);
}

.contact-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateX(4px);
}

.cc-icon {
    width: 40px; height: 40px;
    background: var(--accent-light);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem; flex-shrink: 0;
}

.cc-body strong { display: block; font-size: 0.78rem; color: var(--text-muted); font-weight: 500; margin-bottom: 2px; }
.cc-body a, .cc-body span { font-size: 0.88rem; color: var(--text-primary); }

.contact-form-wrapper {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 36px;
    box-shadow: var(--shadow-card);
}

.contact-form-wrapper h3 { margin-bottom: 24px; font-size: 1.15rem; }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group { margin-bottom: 18px; }

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 7px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 11px 14px;
    background: var(--bg-primary);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.88rem;
    transition: all var(--transition);
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent-blue);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,68,128,0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

.form-group textarea { resize: vertical; min-height: 120px; }

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a6080' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-color: var(--bg-primary);
}

.form-group select option { background: #fff; color: var(--text-primary); }

.form-submit { width: 100%; justify-content: center; }

/* ----- FOOTER ----- */
.site-footer {
    background: var(--accent-blue);
    color: rgba(255,255,255,0.85);
    padding: 64px 24px 32px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    max-width: var(--max-width);
    margin: 0 auto;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.footer-brand .site-logo .logo-name { color: #fff; }
.footer-brand .site-logo .logo-tagline { color: rgba(0,200,255,0.85); }

.footer-brand p {
    font-size: 0.86rem;
    margin-top: 14px;
    max-width: 280px;
    color: rgba(255,255,255,0.65);
}

.footer-col h5 {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-bottom: 14px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 9px; }

.footer-col ul li a {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.85);
    transition: all var(--transition);
    cursor: pointer;
    pointer-events: auto;
    text-decoration: none;
    display: inline-block;
}

.footer-col ul li a:hover {
    color: #fff;
    text-decoration: underline;
}


.footer-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

.footer-badge {
    padding: 3px 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.8);
    font-weight: 600;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--max-width);
    margin: 28px auto 0;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom p, .footer-bottom a {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
}

.footer-bottom a:hover { color: rgba(255,255,255,0.85); }

/* ----- MOBILE NAV ----- */
.mobile-nav {
    display: none;
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(16px);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    /* Le menu+slogan fixe (z-index 1000) reste au-dessus de cet overlay ;
       cette marge évite qu'il ne cache le haut de la liste, notamment sur
       petits écrans où la barre slogan passe sur deux lignes. Défilement
       de secours si le contenu ne tient toujours pas. */
    padding-top: 140px;
    padding-bottom: 24px;
    overflow-y: auto;
}

.mobile-nav.open { display: flex; }

.mobile-nav a {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color var(--transition);
}

.mobile-nav a:hover { color: var(--accent-cyan); }

.mobile-nav-close {
    position: absolute; top: 24px; right: 24px;
    background: none; border: none;
    font-size: 1.6rem; color: var(--text-secondary);
    cursor: pointer; padding: 8px;
}

/* ----- COOKIE BANNER ----- */
.cookie-banner {
    position: fixed;
    bottom: 24px; left: 24px; right: 24px;
    max-width: 560px;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px;
    z-index: 2000;
    box-shadow: var(--shadow-hover);
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.cookie-banner.hidden { display: none; }
.cookie-icon { font-size: 1.5rem; flex-shrink: 0; }
.cookie-text p { font-size: 0.84rem; margin-bottom: 10px; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ----- UTILITIES ----- */
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ----- FADE-IN ANIMATIONS ----- */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ----- PAGE CONTENT ----- */
.page-content { animation: fadeInPage 0.35s ease; }

@keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   SECTION VALEURS
   ============================================================ */
.valeurs-flex {
    display: flex;
    gap: 48px;
    align-items: center;
    margin-top: 48px;
}

.valeurs-visual {
    flex: 0 0 280px;
    text-align: center;
}

.valeurs-lock {
    font-size: 3rem;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 12px rgba(0,153,204,0.3));
}

.valeurs-lock-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 20px;
}

.valeurs-layers {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vlayer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 6px;
    position: relative;
    transition: transform 0.2s;
    cursor: default;
}

.vlayer:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -16px;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: rgba(100,140,180,0.3);
}

.vlayer:hover { transform: translateX(4px); }

.vlayer-1 { background: linear-gradient(135deg, #1a4480, #1e5499); }
.vlayer-2 { background: linear-gradient(135deg, #0077a3, #0099cc); margin-left: 20px; margin-right: 20px; }
.vlayer-3 { background: linear-gradient(135deg, #005f7f, #007a9e); margin-left: 40px; margin-right: 40px; }

.vlayer-icon { font-size: 1.4rem; flex-shrink: 0; }

.vlayer-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.vlayer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.vlayer-sub {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.3;
}

.vlayer-badge {
    flex-shrink: 0;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.valeurs-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vcard {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--bg-white);
    border-radius: var(--radius-md);
    padding: 20px 22px;
    border-left: 4px solid;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition), box-shadow var(--transition);
}

.vcard:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-hover);
}

.vcard-1 { border-left-color: #1a4480; }
.vcard-2 { border-left-color: #0099cc; }
.vcard-3 { border-left-color: #005f7f; }

.vcard-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }

.vcard h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-blue);
    margin-bottom: 6px;
}

.vcard p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   SECTION FAQ (intégrée)
   ============================================================ */
.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 48px;
}

.faq-item {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: box-shadow var(--transition);
    box-shadow: var(--shadow-card);
}

.faq-item:hover { box-shadow: var(--shadow-hover); }
.faq-item.open { border-color: var(--accent-blue); box-shadow: var(--shadow-card); }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.4;
    transition: color var(--transition), background var(--transition);
}

.faq-question:hover { color: var(--accent-blue); background: var(--bg-card-hover); }
.faq-item.open .faq-question { color: var(--accent-blue); background: var(--accent-light); }

.faq-chevron {
    font-size: 0.65rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    padding: 0 20px 18px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   SERVICE CARD — Jeunesse badge
   ============================================================ */
.service-card-jeunesse { position: relative; }

.jeunesse-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: linear-gradient(135deg, #1a9e6e22, #1a9e6e11);
    border: 1px solid #1a9e6e44;
    color: #1a9e6e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    letter-spacing: 0.05em;
}

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

/* Hero FAQ */
.faq-hero {
    background: linear-gradient(135deg, var(--accent-blue) 0%, #0d2d5e 100%);
    padding: 80px 0 60px;
    text-align: center;
}

.faq-hero-inner { max-width: 680px; margin: 0 auto; }

.faq-hero .section-tag { color: rgba(255,255,255,0.7); }
.faq-hero .section-tag::before { background: rgba(255,255,255,0.4); }

.faq-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    color: #fff;
    margin-bottom: 16px;
}

.faq-hero p {
    color: rgba(255,255,255,0.8);
    font-size: 1.05rem;
    margin-bottom: 28px;
}

.faq-cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.faq-cta-note {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}

/* Layout FAQ */
.faq-section { padding-top: 60px; }

.faq-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: start;
}

/* Sidebar nav */
.faq-nav {
    position: sticky;
    top: 90px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 22px 20px;
    box-shadow: var(--shadow-card);
}

.faq-nav h3 {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.faq-nav ul { display: flex; flex-direction: column; gap: 4px; }

.faq-nav-link {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
    transition: all var(--transition);
    text-decoration: none;
}

.faq-nav-link:hover,
.faq-nav-link.active {
    background: var(--accent-light);
    color: var(--accent-blue);
    font-weight: 600;
}

/* Groups */
.faq-content { display: flex; flex-direction: column; gap: 48px; }

.faq-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    color: var(--accent-blue);
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.faq-group-icon { font-size: 1.3rem; }

/* FAQ Items */
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-white);
    overflow: hidden;
    transition: box-shadow var(--transition);
    box-shadow: var(--shadow-card);
}

.faq-item:hover { box-shadow: var(--shadow-hover); }
.faq-item.open { border-color: var(--accent-blue); box-shadow: var(--shadow-card); }

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color var(--transition), background var(--transition);
}

.faq-question:hover { background: var(--bg-card-hover); color: var(--accent-blue); }

.faq-item.open .faq-question {
    color: var(--accent-blue);
    background: var(--accent-light);
}

.faq-chevron {
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    padding: 0 22px;
}

.faq-item.open .faq-answer { padding: 0 22px 20px; }

.faq-answer p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

.faq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0;
    padding-left: 8px;
}

.faq-list li {
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding-left: 16px;
    position: relative;
    line-height: 1.6;
}

.faq-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-cyan);
    font-size: 0.8rem;
}

/* CTA bas de page FAQ */
.faq-bottom-cta {
    margin-top: 60px;
}

.faq-cta-card {
    background: linear-gradient(135deg, var(--accent-blue), #0d2d5e);
    border-radius: var(--radius-lg);
    padding: 48px;
    text-align: center;
    color: #fff;
}

.faq-cta-icon { font-size: 2.5rem; margin-bottom: 16px; }

.faq-cta-card h3 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 12px;
}

.faq-cta-card p {
    color: rgba(255,255,255,0.8);
    max-width: 480px;
    margin: 0 auto 24px;
    font-size: 0.96rem;
}

/* ----- RESPONSIVE ----- */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .cyberia-card { grid-column: span 2; }
    .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .process-steps::before { display: none; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .valeurs-flex { gap: 32px; }
    .valeurs-visual { flex: 0 0 240px; }
    .faq-layout { grid-template-columns: 180px 1fr; gap: 32px; }
}

@media (max-width: 768px) {
    .section { padding: 68px 0; }
    .main-nav, .nav-actions .btn { display: none; }
    .hamburger { display: flex; }

    .hero-content { grid-template-columns: 1fr; gap: 44px; }
    .hero-visual { order: -1; }
    .hero-floating-card { display: none; }
    /* Libellés plus longs en anglais ("years of experience", "in projects
       managed") : grille 2x2 plutôt qu'une rangée qui déborderait. */
    .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }

    .services-grid { grid-template-columns: 1fr; }
    .cyberia-card { grid-column: 1; grid-template-columns: 1fr; gap: 28px; }
    .cyberia-features { grid-template-columns: 1fr; }

    .about-grid { grid-template-columns: 1fr; gap: 44px; }
    .about-cert-badge { right: 12px; }
    .process-steps { grid-template-columns: 1fr 1fr; }

    .contact-panel { padding: 22px; }
    .contact-wrapper { grid-template-columns: 1fr; gap: 36px; }
    .form-row { grid-template-columns: 1fr; }

    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }

    .screenshot-thumbs { grid-template-columns: repeat(3, 1fr); }

    /* Valeurs responsive */
    .valeurs-flex { flex-direction: column; }
    .valeurs-visual { flex: none; width: 100%; max-width: 340px; margin: 0 auto; }
    /* FAQ responsive */
    .faq-grid { grid-template-columns: 1fr; }

    /* FAQ responsive */
    .faq-layout { grid-template-columns: 1fr; }
    .faq-nav { position: static; }
    .faq-hero { padding: 60px 0 40px; }
    .faq-cta-card { padding: 32px 24px; }
}

@media (max-width: 480px) {
    .hero-cta { flex-direction: column; }
    .btn { justify-content: center; }
    .process-steps { grid-template-columns: 1fr; }
}

/* ── Trust Seal : desktop vs mobile ── */
.seal-mobile  { display: none; }
.seal-desktop { display: block; }

@media (max-width: 768px) {
    .seal-desktop { display: none; }
    .seal-mobile  { display: block; }
}


/* ================================================================
   POLITIQUE DE CONFIDENTIALITÉ / PRIVACY POLICY
   Layout : colonne unique centrée — typographie 100 % uniforme
   ================================================================ */

/* ── Constantes typographiques ── */
:root {
    --prv-fs-body:   0.93rem;   /* taille unique du corps de texte    */
    --prv-fs-h2:     1.0rem;    /* taille unique des titres h2        */
    --prv-fs-h3:     0.93rem;   /* taille unique des sous-titres h3   */
    --prv-lh:        1.82;      /* interligne uniforme                */
}

/* ── Hero ── */
.privacy-hero {
    padding: 72px 24px 48px;
    background: linear-gradient(160deg, var(--bg-section) 0%, var(--bg-primary) 100%);
    border-bottom: 1px solid var(--border);
    text-align: center;
}
.privacy-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 8px;
    line-height: 1.2;
}
.privacy-updated {
    font-size: var(--prv-fs-body);
    color: var(--text-muted);
    margin: 0 0 16px;
}
.privacy-intro {
    max-width: 680px;
    margin: 0 auto 18px;
    font-size: var(--prv-fs-body);
    color: var(--text-secondary);
    line-height: var(--prv-lh);
}
.privacy-law-note {
    display: inline-block;
    max-width: 620px;
    background: rgba(0,212,255,.06);
    border: 1px solid rgba(0,212,255,.18);
    border-radius: 8px;
    padding: 11px 18px;
    font-size: var(--prv-fs-body);
    color: var(--text-secondary);
    line-height: var(--prv-lh);
    text-align: left;
}

/* ── Mise en page colonne unique ── */
.privacy-section { padding: 52px 24px 72px; }
.privacy-body {
    max-width: 780px;
    margin: 0 auto;
}

/* ── Blocs ── */
.privacy-block {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 32px 36px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    scroll-margin-top: 96px;
    text-align: left;          /* contenu lisible à gauche */
}

/* ── H2 — tous identiques ── */
.privacy-block h2 {
    font-size: var(--prv-fs-h2);
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Badge numéroté */
.privacy-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    flex-shrink: 0;
    letter-spacing: 0;
    text-transform: none;
}

/* ── H3 — tous identiques ── */
.privacy-block h3 {
    font-size: var(--prv-fs-h3);
    font-weight: 700;
    color: var(--accent-cyan);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin: 22px 0 10px;
    padding: 0;
    border: none;
}

/* ── Corps de texte — taille uniforme ── */
.privacy-block p,
.privacy-block li,
.privacy-block td,
.privacy-block th {
    font-size: var(--prv-fs-body);
    line-height: var(--prv-lh);
}
.privacy-block p {
    color: var(--text-secondary);
    margin: 0 0 10px;
}
.privacy-block p:last-child { margin-bottom: 0; }
.privacy-block a { color: var(--accent-cyan); text-decoration: none; }
.privacy-block a:hover { text-decoration: underline; }

/* ── Listes ── */
.privacy-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 14px;
}
.privacy-list li {
    color: var(--text-secondary);
    padding: 7px 0 7px 18px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    position: relative;
}
.privacy-list li:last-child { border-bottom: none; }
.privacy-list li::before {
    content: '▸';
    position: absolute;
    left: 0; top: 9px;
    color: var(--accent-cyan);
    font-size: 0.65rem;
}

/* ── Liste des droits ── */
.privacy-list--rights li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-left: 0;
}
.privacy-list--rights li::before { display: none; }
.privacy-list--rights li strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.prv-icon {
    font-size: 1.1rem;
    min-width: 28px;
    text-align: center;
    padding-top: 2px;
}

/* Bloc highlight (droits) */
.privacy-block--highlight { border-color: rgba(0,212,255,.2); }
.privacy-rights-cta {
    background: rgba(0,212,255,.05);
    border: 1px solid rgba(0,212,255,.15);
    border-radius: 8px;
    padding: 13px 18px;
    margin-top: 16px;
}
.privacy-rights-cta p { margin: 0; }

/* ── Tableau ── */
.privacy-table-wrap {
    overflow-x: auto;
    margin: 12px 0 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.privacy-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 460px;
}
.privacy-table thead tr { background: rgba(0,212,255,.07); }
.privacy-table th {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-cyan);
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(0,212,255,.18);
    white-space: nowrap;
}
.privacy-table td {
    color: var(--text-secondary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.privacy-table tbody tr:last-child td { border-bottom: none; }
.privacy-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* ── Carte contact inline ── */
.privacy-contact-card {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 22px;
    color: var(--text-secondary);
    line-height: 2;
    margin: 14px 0;
}
.privacy-contact-card a { color: var(--accent-cyan); }

/* ── Bloc contact final ── */
.privacy-block--contact { border-color: rgba(41,182,246,.2); }
.privacy-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px;
}
.privacy-contact-box {
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px;
}
.privacy-contact-box .pcb-title {
    font-size: var(--prv-fs-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent-cyan);
    margin: 0 0 10px;
}
.privacy-contact-box p { margin: 0 0 5px; }
.privacy-contact-box p:last-of-type { margin-bottom: 14px; }
.privacy-contact-box a { color: var(--accent-cyan); }
.prv-note {
    font-size: var(--prv-fs-body);
    opacity: .65;
    line-height: 1.55;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .privacy-block { padding: 22px 18px; }
    .privacy-contact-grid { grid-template-columns: 1fr; }
    .privacy-table-wrap { border-radius: 8px; }
}


/* ================================================================
   ================================================================
   v1.2.0 — AJOUTS ET CORRECTIONS (audit du 1er août 2026)
   Ce bloc est ajouté à la fin : il passe donc après les règles
   d'origine et n'en casse aucune.
   ================================================================
   ================================================================ */

/* ----- F-01 : ICÔNES SVG (remplacent les émojis) ----- */
.ico {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.service-icon .ico,
.cc-icon .ico,
.fc-icon .ico,
.vcard-icon .ico { vertical-align: middle; }

/* ----- F-04 : LIEN D'ÉVITEMENT ----- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--accent-blue);
    color: #fff;
    padding: 12px 22px;
    border-radius: 0 0 var(--radius-sm) 0;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    outline: 3px solid var(--accent-cyan);
    outline-offset: 2px;
}

/* Focus visible cohérent partout (accessibilité) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--accent-cyan);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ----- M-08 : SÉLECTEUR DE LANGUE ----- */
.lang-sep {
    color: var(--border);
    font-size: 0.8rem;
    font-weight: 300;
    user-select: none;
}
.lang-switcher-wrap > a.active {
    color: var(--accent-blue);
    background: var(--accent-light);
    cursor: default;
}

/* ----- HERO ----- */
.hero-title .hero-line {
    display: block;
}

.hero-promesses {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.hero-promesses li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.hero-promesses .ico {
    color: var(--success);
    margin-top: 2px;
}

.hero-terminal .t-cmd { font-weight: 600; }

/* ----- SERVICES ----- */
.service-quote {
    font-style: italic;
    color: var(--accent-blue);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 2px solid rgba(0,153,204,0.35);
}

.service-card .service-icon .ico { color: var(--accent-blue); }

.jeunesse-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ----- E-06 : BLOC « CE QUE JE NE FAIS PAS » ----- */
.nope-block {
    margin-top: 42px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius-lg);
    padding: 32px 36px;
    box-shadow: var(--shadow-card);
}
.nope-block h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.nope-block h3 .ico { color: var(--warning); }
.nope-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px 34px;
}
.nope-grid p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ----- SECTION « SUR LE TERRAIN » ----- */
.terrain-avertissement {
    max-width: 780px;
    margin: 0 auto 40px;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.7;
    background: var(--bg-primary);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 16px 22px;
}

/* Encart à fond bleu-gris pâle autour de la grille : la section reste
   blanche (alternance de rythme préservée — voir formats/valeurs/méthode),
   mais les cartes blanches ressortent comme dans « Accompagnement »,
   qui vit lui dans une section entière à fond pâle (.section-alt). */
.terrain-grid-wrap,
.leviers-grid-wrap {
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.terrain-grid,
.leviers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.terrain-card,
.levier-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
}
.terrain-card:hover,
.levier-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.terrain-etiquette,
.levier-etiquette {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(0,153,204,0.10);
    border: 1px solid rgba(0,153,204,0.22);
    border-radius: 50px;
    padding: 4px 12px;
    margin-bottom: 16px;
}
.terrain-card h3,
.levier-card h3 {
    font-size: 1rem;
    line-height: 1.45;
    margin-bottom: 14px;
    color: var(--accent-blue);
}
.terrain-card p,
.levier-card p {
    font-size: 0.89rem;
    color: var(--text-secondary);
    line-height: 1.72;
    margin-bottom: 18px;
}
.terrain-card .format-liste strong { color: var(--accent-blue); }

.terrain-cta {
    margin-top: 38px;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.terrain-cta p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 22px;
}

/* ----- M-07 : FORMATS D'ACCOMPAGNEMENT ----- */
.formats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.format-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-card);
    transition: all var(--transition);
}
.format-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.format-card-vedette {
    border-color: rgba(26,68,128,0.28);
    background: linear-gradient(160deg, rgba(26,68,128,0.035), rgba(0,153,204,0.02));
}

.format-etiquette {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(0,153,204,0.10);
    border: 1px solid rgba(0,153,204,0.22);
    border-radius: 50px;
    padding: 4px 12px;
    margin-bottom: 16px;
}
.format-card h3 {
    font-size: 1.08rem;
    margin-bottom: 12px;
}
.format-card > p {
    font-size: 0.89rem;
    color: var(--text-secondary);
    line-height: 1.72;
    margin-bottom: 18px;
}
.format-liste {
    list-style: none;
    margin: auto 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.format-liste li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 0.85rem;
    color: var(--text-primary);
    line-height: 1.5;
}
.format-liste .ico {
    color: var(--success);
    margin-top: 2px;
}

.formats-note {
    margin-top: 26px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 18px 24px;
}
.formats-note p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.75;
}
.formats-note strong { color: var(--text-primary); }

/* ----- VALEURS v2 ----- */
.valeurs-cards-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.valeurs-cards-v2 .vcard {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-card);
    display: block;
    transition: all var(--transition);
}
.valeurs-cards-v2 .vcard:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.valeurs-cards-v2 .vcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--accent-light);
    border: 1px solid rgba(26,68,128,0.15);
    border-radius: var(--radius-md);
    color: var(--accent-blue);
    margin-bottom: 18px;
}
.valeurs-cards-v2 .vcard h4 {
    font-size: 1.02rem;
    margin-bottom: 10px;
    color: var(--text-primary);
}
.valeurs-cards-v2 .vcard p {
    font-size: 0.89rem;
    color: var(--text-secondary);
    line-height: 1.72;
    margin: 0;
}

/* ----- CYBERIA ----- */
.cyberia-titre {
    font-size: 1.4rem;
    margin-bottom: 14px;
    color: var(--accent-blue);
}
.cyberia-intro {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
}
.cyberia-badge .ico { color: var(--accent-blue); }
.cyberia-feature-icon .ico { color: var(--success); }
.cyberia-honnete {
    margin: 20px 0 22px;
    padding: 14px 18px;
    background: var(--bg-primary);
    border-left: 3px solid var(--accent-cyan);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.cyberia-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.screenshot-thumb {
    background: none;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
}

/* ----- À PROPOS ----- */
.about-role {
    font-size: 1rem;
    color: var(--accent-cyan);
    font-weight: 600;
    margin-bottom: 18px;
}
.about-content .expertise-list { margin-top: 24px; }
.about-cta {
    margin-top: 28px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.about-cta .ico { margin-right: 6px; }

.certifs {
    margin-top: 26px;
    padding: 20px 24px;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}
.certifs h4 {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}
.certifs ul { list-style: none; margin: 0; padding: 0; }
.certifs li {
    font-size: 0.88rem;
    color: var(--text-primary);
    padding: 5px 0;
    border-bottom: 1px solid var(--border-light);
}
.certifs li:last-child { border-bottom: 0; }

/* ----- CONTACT ----- */
.cc-icon .ico { color: var(--accent-blue); }

.contact-urgence {
    margin-top: 22px;
    padding: 14px 18px;
    background: rgba(217,119,6,0.07);
    border-left: 3px solid var(--warning);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.65;
}
.contact-urgence strong { color: #a35c05; }

.lbl-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* E-07 : pot de miel — invisible pour l'humain, atteignable par les robots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* E-07 : bloc de consentement */
.form-consent {
    margin: 4px 0 18px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
}
.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 0.79rem;
    line-height: 1.6;
    color: var(--text-secondary);
    cursor: pointer;
    margin: 0;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.form-consent input[type="checkbox"] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    margin-top: 2px;
    accent-color: var(--accent-blue);
    cursor: pointer;
}
.form-consent a {
    color: var(--accent-blue);
    text-decoration: underline;
    white-space: nowrap;
}

#form-status {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 0.86rem;
}

.form-pied {
    margin-top: 16px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}
.form-pied a { font-weight: 700; color: var(--accent-blue); }

.field-error { border-color: var(--error) !important; }

/* ----- F-03 : FAQ ----- */
.faq-heading {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.faq-question {
    width: 100%;
    gap: 16px;
}
.faq-chevron {
    display: inline-flex;
    align-items: center;
    color: var(--accent-blue);
}
.faq-answer[hidden] { display: none; }

/* ----- APPEL À L'ACTION FINAL ----- */
.cta-final {
    padding: 64px 0;
    text-align: center;
    background: linear-gradient(140deg, #12305a, #1a4480 55%, #0f6ea8);
}
.cta-final .section-title,
.cta-final .section-subtitle { color: #fff; }
.cta-final .section-subtitle { color: rgba(255,255,255,0.78); }
.cta-final .btn-primary {
    background: #fff;
    color: var(--accent-blue);
    border-color: #fff;
}
.cta-final .btn-primary:hover {
    background: var(--accent-light);
    color: var(--accent-blue);
}
.btn-lg {
    font-size: 1rem;
    padding: 15px 34px;
}

/* ----- E-08 : BANDEAU TÉMOINS ----- */
.cookie-icon { display: flex; align-items: center; color: var(--accent-blue); }
.cookie-actions .btn { padding: 7px 16px; font-size: 0.8rem; }
.cookie-link {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: underline;
    align-self: center;
}

/* ----- PIED DE PAGE ----- */
.footer-badges-label {
    display: block;
    width: 100%;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
    margin-bottom: 9px;
}
.footer-col ul a { display: inline-flex; align-items: center; gap: 8px; }
.footer-nap {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.footer-nap p {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.6;
    margin: 0 0 6px;
}
.footer-nap p strong { color: rgba(255,255,255,0.78); }
.mobile-nav-tel {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 1rem !important;
    color: var(--text-secondary) !important;
}

/* ----- 404 ----- */
.err-icon {
    display: flex;
    justify-content: center;
    color: var(--accent-cyan);
    margin-bottom: 20px;
}
.err-code {
    font-size: 5rem;
    font-weight: 800;
    color: var(--accent-blue);
    line-height: 1;
    margin-bottom: 16px;
    font-family: var(--font-mono);
}

/* ----- RESPONSIVE ----- */
@media (max-width: 900px) {
    .nope-block { padding: 26px 22px; }
    .terrain-grid-wrap, .leviers-grid-wrap { padding: 22px; }
    .terrain-card, .levier-card { padding: 26px 22px; }
    .format-card { padding: 26px 22px; }
    .cyberia-cta .btn,
    .about-cta .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 600px) {
    .hero-title .hero-line { display: inline; }
    .hero-promesses li { font-size: 0.84rem; }
    .formats-note { padding: 16px 18px; }
    .form-consent label { font-size: 0.77rem; }
    .slogan-bar p { font-size: 0.74rem; }
    .hero { padding-top: 190px; } /* la barre slogan peut passer sur 2 lignes ici */
    /* Cibles tactiles d'au moins 44 px */
    .btn { min-height: 44px; }
    .faq-question { min-height: 48px; }
}

/* ----- PRÉFÉRENCE UTILISATEUR : MOINS D'ANIMATIONS ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----- IMPRESSION ----- */
@media print {
    .site-header, .mobile-nav, .cookie-banner, .cta-final,
    .hero-visual, .skip-link, call-us-selector { display: none !important; }
    body { background: #fff; }
}


/* ================================================================
   v1.3.0 — SECTION VALEURS (pare-feu) EN ICÔNES SVG
   + BANDEAU DE CONFIANCE ET SCEAU SECTIGO
   ================================================================ */

/* ----- Le cadenas et les couches ----- */
.valeurs-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-blue);
}
.valeurs-lock .ico { color: var(--accent-blue); }

.vlayer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.16);
    color: #fff;
    flex-shrink: 0;
}
.vlayer-icon .ico { color: #fff; }

/* ----- Les trois cartes ----- */
.vcard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    border: 1px solid rgba(26,68,128,0.15);
    color: var(--accent-blue);
    flex-shrink: 0;
    margin-top: 2px;
}
.vcard-1 .vcard-icon { color: #1a4480; }
.vcard-2 .vcard-icon { color: #0099cc; }
.vcard-3 .vcard-icon { color: #005f7f; }

.vcard-engagement {
    margin-top: 12px !important;
    padding-top: 11px;
    border-top: 1px solid var(--border-light);
    font-size: 0.82rem !important;
    font-weight: 600;
    color: var(--accent-blue) !important;
    line-height: 1.55;
}

/* ----- Bandeau de confiance (pied de page) ----- */
.trust-bar {
    border-top: 1px solid rgba(255,255,255,0.10);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    padding: 24px 0;
    margin-top: 12px;
}
.trust-bar-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.trust-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
}
.trust-points li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.62);
    line-height: 1.5;
}
.trust-points .ico { color: var(--accent-cyan); flex-shrink: 0; }


@media (max-width: 760px) {
    .trust-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .trust-points { gap: 9px 20px; }
    .trust-points li { font-size: 0.78rem; }
}


/* ================================================================
   v1.4.0 — BANDEAU PRODUIT CYBERIA
   Section pleine largeur sur fond sombre : le contraste avec le
   reste de la page (clair) fait de CyberIA le point fort visuel.
   ================================================================ */
.cyberia-section {
    position: relative;
    overflow: hidden;
    padding: 96px 0 88px;
    background: linear-gradient(155deg, #0a1c33 0%, #12305a 42%, #0d4d78 100%);
    color: #fff;
}

/* Décor de fond */
.cyberia-bg { position: absolute; inset: 0; pointer-events: none; }
.cyb-glow-a, .cyb-glow-b { position: absolute; border-radius: 50%; filter: blur(90px); }
.cyb-glow-a {
    width: 520px; height: 520px; top: -180px; right: -120px;
    background: rgba(0,153,204,0.28);
}
.cyb-glow-b {
    width: 420px; height: 420px; bottom: -200px; left: -140px;
    background: rgba(26,68,128,0.55);
}
.cyb-grid {
    position: absolute; inset: 0; opacity: 0.35;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 78%);
}
.cyberia-section .container { position: relative; z-index: 1; }

/* En-tête */
.cyberia-entete { text-align: center; max-width: 760px; margin: 0 auto 46px; }

.cyberia-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border-radius: 50px;
    background: rgba(0,153,204,0.16);
    border: 1px solid rgba(0,153,204,0.38);
    color: #6fd8ff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.cyberia-tag .ico { color: #6fd8ff; }

.cyberia-wordmark {
    font-size: clamp(2.6rem, 6vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 0 0 18px;
    color: #fff;
}
.cyberia-wordmark span {
    background: linear-gradient(120deg, #38c6f4, #6fd8ff 55%, #9be8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cyberia-baseline {
    font-size: 1.03rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.76);
    margin: 0 0 24px;
}

.cyberia-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.cyb-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: 50px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.14);
    font-size: 0.79rem;
    color: rgba(255,255,255,0.82);
}
.cyb-chip .ico { color: #6fd8ff; }

/* Onglets des outils */
.cyberia-showcase { max-width: 1020px; margin: 0 auto; }

.cyb-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
.cyb-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 15px 10px 13px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
}
.cyb-tab:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(0,153,204,0.45);
    color: #fff;
    transform: translateY(-2px);
}
.cyb-tab.active {
    background: rgba(0,153,204,0.16);
    border-color: #38c6f4;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0,153,204,0.22);
}
.cyb-tab-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 11px;
    background: rgba(255,255,255,0.08);
    color: #6fd8ff;
    flex-shrink: 0;
}
.cyb-tab.active .cyb-tab-ico { background: rgba(56,198,244,0.22); color: #9be8ff; }
.cyb-tab-txt { display: flex; flex-direction: column; gap: 2px; }
.cyb-tab-txt strong { font-size: 0.79rem; font-weight: 600; line-height: 1.3; }
.cyb-tab-txt em {
    font-style: normal;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
}
.cyb-tab.active .cyb-tab-txt em { color: rgba(155,232,255,0.75); }

/* Fenêtre d'application */
.cyb-fenetre {
    border-radius: 14px;
    overflow: hidden;
    background: #0d1b2e;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 60px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.05);
}
.cyb-fenetre-barre {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.09);
}
.cyb-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cyb-dot.red { background: #ff5f56; }
.cyb-dot.yellow { background: #ffbd2e; }
.cyb-dot.green { background: #27c93f; }
.cyb-fenetre-titre {
    margin-left: 12px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: rgba(255,255,255,0.52);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cyb-fenetre-corps { background: #f4f7fa; }
.cyb-fenetre-corps img {
    display: block;
    width: 100%;
    height: auto;
    animation: cyb-fade 0.35s ease;
}
@keyframes cyb-fade { from { opacity: 0; transform: scale(0.995); } to { opacity: 1; transform: none; } }

.cyb-legende {
    max-width: 820px;
    margin: 22px auto 0;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(255,255,255,0.72);
}

/* Pied de section */
.cyberia-pied { max-width: 820px; margin: 48px auto 0; text-align: center; }

.cyberia-section .cyberia-honnete {
    background: rgba(255,255,255,0.05);
    border-left: 3px solid #38c6f4;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 16px 20px;
    text-align: left;
    font-size: 0.86rem;
    line-height: 1.72;
    color: rgba(255,255,255,0.68);
    margin: 0 0 26px;
}

.cyberia-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn-cyberia {
    background: linear-gradient(120deg, #0099cc, #38c6f4);
    color: #04203a;
    border: 1px solid transparent;
    font-weight: 700;
}
.btn-cyberia:hover {
    background: linear-gradient(120deg, #38c6f4, #6fd8ff);
    color: #04203a;
    transform: translateY(-2px);
}
.btn-cyberia-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.32);
}
.btn-cyberia-ghost:hover {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border-color: rgba(255,255,255,0.55);
}

/* Responsive */
@media (max-width: 980px) {
    .cyb-tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .cyberia-section { padding: 68px 0 60px; }
    .cyb-tabs { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cyb-tab { padding: 12px 8px 11px; min-height: 44px; }
    .cyb-tab-txt strong { font-size: 0.74rem; }
    .cyb-tab-ico { width: 34px; height: 34px; }
    .cyberia-baseline { font-size: 0.95rem; }
    .cyb-legende { font-size: 0.87rem; }
    .cyberia-section .cyberia-honnete { font-size: 0.83rem; }
}


/* ================================================================
   v1.5.0 — SCEAU SECTIGO
   Le sceau est posé juste avant </body>, comme l'exige Sectigo :
   il se retrouve donc APRÈS l'élément <footer> dans le document.
   On lui donne le même fond que le pied de page pour qu'il se
   lise comme sa dernière bande.
   ================================================================ */
.ssl-seal-bar {
    background: var(--accent-blue);
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 20px 24px 26px;
}

.ssl-seal-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
}

.ssl-seal-label,
.ssl-seal-note {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.42);
}
.ssl-seal-note {
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.75rem;
}

/* Boîte du sceau : fond blanc, car l'image Sectigo est conçue
   pour être posée sur du clair. */
.ssl-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 159px;
    min-height: 42px;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.ssl-seal img,
.ssl-seal object,
.ssl-seal embed { display: block; max-width: 100%; height: auto; }

/* Lien de repli affiché uniquement si JavaScript est désactivé
   (le sceau Sectigo lui-même est injecté par document.write). */
.ssl-seal noscript a {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-blue);
    text-decoration: none;
    letter-spacing: 0.02em;
}
.ssl-seal noscript a:hover { color: var(--accent-cyan); }

/* Le bandeau des engagements n'a plus de colonne sceau : il se
   centre et occupe toute la largeur. */
.trust-bar {
    border-bottom: 0;
    padding: 22px 24px 4px;
    margin-top: 8px;
}
.trust-points {
    max-width: var(--max-width);
    margin: 0 auto;
    justify-content: center;
}

@media (max-width: 760px) {
    .ssl-seal-inner { gap: 12px; }
    .ssl-seal-label { width: 100%; }
    .ssl-seal-note  { width: 100%; }
    .trust-points   { justify-content: flex-start; }
}

/* ------------------------------------------------------------
   Logo OSE — le lettrage est large (ratio ~1.75), pas carré.
   ------------------------------------------------------------ */
.footer-logo-img {
    width: auto;
    height: 46px;
    border-radius: 0;
}

/* ------------------------------------------------------------
   Logo — filet de sécurité.
   La hauteur est imposée sans dépendre de la position de l'image
   dans l'arbre, pour qu'un logo téléversé depuis Personnaliser ne
   puisse jamais s'afficher à sa taille naturelle.
   ------------------------------------------------------------ */
.site-header .custom-logo,
.site-header img.custom-logo,
.custom-logo-link img {
    height: 46px !important;
    width: auto !important;
    max-width: 190px;
    object-fit: contain;
}

.site-footer .footer-logo-img,
.site-footer img.footer-logo-img {
    height: 46px !important;
    width: auto !important;
    max-width: 190px;
    border-radius: 0;
    object-fit: contain;
}

.site-logo { flex-shrink: 0; }

/* Les libellés de menu ne se coupent plus en deux lignes */
.main-nav a { white-space: nowrap; }

/* ------------------------------------------------------------
   Palier intermédiaire : 7 entrées de menu + logo + bouton ne
   tiennent pas sur une ligne entre 769 et 1180 px. On resserre
   plutôt que de laisser les libellés se couper.
   ------------------------------------------------------------ */
@media (max-width: 1180px) and (min-width: 769px) {
    .main-nav a { padding: 8px 9px; font-size: 0.81rem; }
    .logo-tagline { display: none; }
    .nav-actions .btn { padding: 10px 16px; font-size: 0.82rem; }
}

@media (max-width: 980px) and (min-width: 769px) {
    .site-header .custom-logo { max-width: 120px; }
    .logo-text { display: none; }
    .main-nav a { padding: 8px 7px; font-size: 0.78rem; }
}

/* ------------------------------------------------------------
   Sélecteur de langue (Polylang)
   Le thème produit des liens séparés par <span class="lang-sep">,
   pas une liste <ul> : les règles li+li::before ne s'y appliquent
   pas, d'où ce complément.
   ------------------------------------------------------------ */
.lang-sep {
    color: var(--border);
    font-weight: 300;
    font-size: 0.8rem;
    user-select: none;
}

.nav-actions .lang-switcher-wrap {
    margin-right: 4px;
    flex-shrink: 0;
}

.mobile-nav-lang {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.mobile-nav-lang .lang-switcher-wrap {
    justify-content: center;
}

.mobile-nav-lang .lang-switcher-wrap a {
    font-size: 0.95rem;
    padding: 8px 14px;
}

@media (max-width: 1180px) and (min-width: 769px) {
    .nav-actions .lang-switcher-wrap a { padding: 5px 5px; font-size: 0.74rem; }
}

/* ------------------------------------------------------------
   Logo du pied de page — blanchiment.
   Le pied de page est sur fond bleu marine. Un logo bleu s'y
   perd. brightness(0) aplatit l'image en noir, invert(1) la
   repasse en blanc : la transparence est conservée et le
   résultat est blanc quelle que soit la couleur d'origine —
   y compris pour un logo téléversé depuis Personnaliser, que
   le thème ne peut pas recolorer côté PHP.
   Un fichier déjà blanc reste blanc.
   ------------------------------------------------------------ */
.site-footer .footer-logo-img,
.site-footer .site-logo img,
.site-footer .custom-logo {
    filter: brightness(0) invert(1);
}