:root {
    /* FONDS → BACKGROUNDS */
    --header-bg: #08131c;
    --page-bg: #07131b;
    --card-bg: #071f2b;
    --surface-bg: #06131d;

    /* TEXTES → TEXT COLORS */
    --text-primary: #ffffff;
    --text-secondary: #c4d5df;
    --text-muted: #d6e1e7;

    /* ACCENTS → ACCENTS */
    --accent: #00d8e8;
    --accent-dark: #00a9c0;
    --accent-contrast: #00151c;

    /* BORDURES → BORDERS */
    --header-border: rgba(0, 184, 212, .18);
    --card-border: rgba(0, 188, 216, .32);

    /* ÉTATS → STATES */
    --sun-color: #f5a623;
    --moon-bg: #152c3b;

    /* SOLEIL ACTIF → ACTIVE SUN */
    --sun-gradient: linear-gradient(135deg, #ffcf69, #f5a623);
    --sun-shadow: 0 0 10px rgba(255, 183, 55, .3);

    --theme-toggle-border: rgba(190, 215, 225, .55);
    --theme-toggle-bg: rgba(255, 255, 255, .035);
    --theme-toggle-color: #b8c7d1;

    /* FOND DU HERO → HERO BACKGROUND */
    --hero-bg: #03111b;
    --hero-gradient-strong: rgba(3, 17, 27, .97);
    --hero-gradient-medium: rgba(3, 17, 27, .72);
    --hero-gradient-transparent: rgba(3, 17, 27, .08);

    /* TEXTES DU HERO → HERO TEXT COLORS */
    --hero-eyebrow: #d8e3e7;
    --text-primary-shadow: 0 3px 20px rgba(0, 0, 0, .35);
    --hero-description: #e3ebee;

    /* BOUTONS DU HERO → HERO BUTTON COLORS */
    --hero-button-bg: #00d8e8;
    --hero-button-hover-shadow: 0 0 24px rgba(0, 213, 232, .22);
    --hero-button-secondary-bg: rgba(0, 0, 0, .28);

    /* CARTES SERVICES → SERVICE CARD COLORS */
    --feature-border: #00a9c0;
    --feature-bg: #03131d;

    --feature-glow: rgba(0, 179, 222, .25);
    --feature-lines: rgba(0, 173, 220, .025);

    --feature-ready-glow: rgba(0, 197, 226, .27);
    --feature-ready-lines: rgba(0, 190, 230, .06);

    --feature-services-glow: rgba(0, 142, 191, .28);
    --feature-services-overlay: rgba(0, 175, 214, .07);

    --feature-research-glow: rgba(178, 126, 53, .22);
    --feature-research-overlay: rgba(0, 175, 214, .05);

    --feature-hover-border: #00d8e8;
    --feature-hover-shadow: 0 12px 36px rgba(0, 193, 223, .13);

    /* BANDEAU EXPERTISES → EXPERTISE BANNER COLORS */
    --expertise-border: rgba(0, 188, 216, .35);
    --expertise-bg-start: #061f2b;
    --expertise-text: #f1f6f8;
    --expertise-separator-dark: rgba(180, 220, 231, .28);

    /* CONTENU DES CARTES → CARD CONTENT COLORS */
    --feature-symbol: #00d8e8;

    /* PUBLICATIONS → PUBLICATION COLORS */
    --publications-accent: var(--accent);
    --publication-hover-shadow: 0 12px 30px rgba(0, 160, 190, .12);

    /* BANDEAU INTERNATIONAL → INTERNATIONAL BANNER */
    --pricing-banner-bg: #071923;
    --pricing-banner-hover-bg: #0b2531;
    --pricing-banner-border-top: rgba(0, 216, 232, .18);
    --pricing-banner-border-bottom: rgba(0, 216, 232, .35);
    --pricing-banner-text: #c6d6df;

}

/* ==================================================
MODE CLAIR → LIGHT MODE
================================================== */

body.light {
    /* FONDS → BACKGROUNDS */
    --header-bg: #ffffff;
    --page-bg: #f3f7fa;
    --card-bg: #ffffff;
    --surface-bg: #ffffff;

    /* TEXTES → TEXT COLORS */
    --text-primary: #102a3a;
    --text-secondary: #536b7b;
    --text-muted: #536b7b;

    /* ACCENTS → ACCENTS */
    --accent: #008ca5;
    --accent-dark: #007e95;
    --accent-contrast: #ffffff;

    /* BORDURES → BORDERS */
    --header-border: rgba(0, 80, 100, .14);
    --card-border: #b7dce6;
    --arrow-border: #80c8d6;
    --card-hover-shadow: 0 10px 28px rgba(0, 125, 160, .12);

    /* BANDEAU EXPERTISES → EXPERTISE BANNER */
    --expertise-shadow: 0 4px 18px rgba(15, 55, 75, .035);
    --expertise-separator: #d6e5eb;

    /* OMBRE DES CARTES → CARD SHADOW */
    --card-shadow: 0 4px 18px rgba(15, 55, 75, .045);

}

/* ACCENTS DU BANDEAU EN MODE CLAIR → LIGHT MODE BANNER ACCENTS */
body.light .pricing-banner strong,
body.light .pricing-banner-action {
    color: #00d8e8;
}

/* SOLEIL JAUNE EN MODE CLAIR → YELLOW SUN IN LIGHT MODE */
body.light .site-header .theme-sun {
    color: var(--sun-color);
}

/* FOND GÉNÉRAL → GENERAL BACKGROUND */
body.light :is(#accueil, #home) {
    background: var(--page-bg);
}

/* MODE SOMBRE → DARK MODE */
body:not(.light) :is(#accueil, #home) {
    background: var(--page-bg);
}

/* CARTES DE SERVICES → SERVICE CARDS */
body.light :is(#accueil, #home) .ps-feature {
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: 0 4px 18px rgba(15, 55, 75, .045);
}

/* SUPPRESSION DES FONDS SOMBRES → REMOVE DARK OVERLAYS */
body.light :is(#accueil, #home) .ps-feature::before {
    background: linear-gradient(
    135deg,
    rgba(0, 216, 232, .045),
    transparent 65%
    );
}

/* TITRES → CARD HEADINGS */
body.light :is(#accueil, #home) .ps-feature strong {
    color: var(--text-primary);
}

/* DESCRIPTIONS → CARD DESCRIPTIONS */
body.light :is(#accueil, #home) .ps-feature small {
    color: var(--text-secondary);
}

/* ICÔNES → CARD ICONS */
body.light :is(#accueil, #home) .ps-feature-symbol {
    color: var(--accent);
}

/* FLÈCHES DES CARTES → SERVICE CARD ARROWS */
body.light :is(#accueil, #home) .ps-feature-arrow {
    color: var(--accent);
    border-color: var(--accent);
}

/* SURVOL → CARD HOVER */
body.light :is(#accueil, #home) .ps-feature:hover {
    border-color: var(--accent-dark);
    box-shadow: var(--card-hover-shadow);
}

/* ==================================================
EXPERTISES EN MODE CLAIR → LIGHT EXPERTISE BANNER
================================================== */

body.light :is(#accueil, #home) .ps-expertise {
    background: linear-gradient(100deg, #e9f1f5 0%, #ffffff 55%, #edf3f6 100%);
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: var(--expertise-shadow);
}

body.light :is(#accueil, #home) .ps-expertise .ps-expertise-icon {
    color: var(--accent);
}

body.light :is(#accueil, #home) .ps-expertise > span + span {
    border-left-color: var(--expertise-separator);
}

body.light .header-brand .logo-dark {
    display: none;
}

body.light .header-brand .logo-light {
    display: block;
}

/* MODE SOMBRE : SOLEIL ACTIF → DARK MODE: ACTIVE SUN */
body:not(.light) .site-header .theme-sun {
    background: var(--sun-gradient);
    color: var(--text-primary);
    box-shadow: var(--sun-shadow);
}

/* MODE CLAIR : LUNE ACTIVE → LIGHT MODE: ACTIVE MOON */
body.light .site-header .theme-moon {
    background: var(--moon-bg);
    color: #ffffff;
}

/* ==================================================
MODE CLAIR → LIGHT MODE
================================================== */

body.light :is(#accueil, #home) .ps-publication-card {
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

body.light :is(#accueil, #home) .ps-publication-description {
    color: var(--text-secondary);
}

body.light :is(#accueil, #home) .ps-publication-category,
body.light :is(#accueil, #home) .ps-publication-icon,
body.light :is(#accueil, #home) .ps-publication-link {
    color: var(--accent);
}

/* Mode clair → Light mode */
body.light .bandeau img.logo-dark {
    display: none;
}

body.light .bandeau img.logo-light {
    display: block;
}

/* ==================================================
MODE CLAIR → LIGHT MODE
================================================== */

body.light :is(#accueil, #home) .ps-discover-card {
    border-color: var(--card-border);
    color: var(--text-primary);
    box-shadow: var(--card-shadow);
}

body.light :is(#accueil, #home) .ps-discover-card p {
    color: var(--text-secondary);
}

body.light :is(#accueil, #home) .ps-discover-category,
body.light :is(#accueil, #home) .ps-discover-links a {
    color: var(--accent);
}

/* TEXTE DU BOUTON PRINCIPAL → PRIMARY BUTTON TEXT */
body.light :is(#accueil, #home) .ps-button-primary {
    color: #102a3a;
}

/* Cartes illustrées en mode clair */
body.light :is(#accueil, #home) .ps-feature,
body.light :is(#accueil, #home) .ps-publication-card,
body.light :is(#accueil, #home) .ps-discover-card {
    color: #ffffff;
}

body.light :is(#accueil, #home) .ps-feature strong,
body.light :is(#accueil, #home) .ps-feature small,
body.light :is(#accueil, #home) .ps-publication-card strong,
body.light :is(#accueil, #home) .ps-publication-description,
body.light :is(#accueil, #home) .ps-discover-card h3,
body.light :is(#accueil, #home) .ps-discover-card p {
    color: #e3ebee;
}

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

@media (max-width: 1100px) {
    body.light :is(#accueil, #home) .ps-expertise > span + span {
        border-left: 0;
    }
}

/* =========================
BASE UI → UI BASE
========================= */

html,
body {
    margin: 0;
    padding: 0;
}

/* Modèle de boîte → Box model */
* {
    box-sizing: border-box;
}

/* Corps de page → Page body */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--text-main);
    background: var(--bg-main);
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Liens → Links */
a {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.2s ease, box-shadow 0.2s ease;
}

/* Images → Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Alignement utilitaire simple */
.center {
    text-align: center;
}

/* ===============================
TITRES — PROFONDEUR VISUELLE → HEADINGS — VISUAL DEPTH
=============================== */

h1 {
    text-shadow:
    0 1px 0 rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.35);
}

h2 {
    text-shadow:
    0 1px 0 rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.18);
}

h3 {
    text-shadow:
    0 1px 0 rgba(0,0,0,0.25);
}

h2:not(.section-title)::before,
h2:not(.section-title)::after {
    content: "";
    width: 65px;
    height: 1px;
    flex: 0 0 65px;
    background: var(--border);
}

/* ACCENTS COLORÉS DANS TOUS LES TITRES */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    color: var(--accent);
}

/* ==================================================
NAVIGATION FIXE → FIXED NAVIGATION
================================================== */

.nav.nav-fixed {
    position: relative;
    z-index: 1000;
    background: var(--bg-main);
    border-top: 1px solid var(--accent);
    border-bottom: 1px solid var(--accent);
}

/* Conteneur des onglets → Tab wrapper */
.nav.nav-fixed .nav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
}

/* Liens de navigation → Navigation links */
.nav.nav-fixed a {
    display: inline-block;
    box-sizing: border-box;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    box-shadow: none;
    transition: color .2s ease, transform .2s ease;
}

/* Survol et focus → Hover and focus */
.nav.nav-fixed a:hover,
.nav.nav-fixed a:focus {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
    transform: scale(1.05);
}

/* Onglet actif → Active tab */
.nav.nav-fixed a.active {
    position: relative;
    z-index: 2;
    color: var(--accent);
    background: transparent;
    border-bottom: 1px solid var(--accent);
    font-weight: 600;
}

/* Onglet actif au survol → Active tab hover */
.nav.nav-fixed a.active:hover,
.nav.nav-fixed a.active:focus {
    color: var(--accent);
    background: transparent;
    border-bottom-color: var(--accent);
    box-shadow: none;
}

/* Espacement après navigation → Spacing after navigation */
.nav + section,
.nav.nav-fixed + section {
    margin-top: 12px;
}

/* ==================================================
MENUS DÉROULANTS → DROPDOWN MENUS
================================================== */

/* Conteneur du menu → Dropdown wrapper */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1001;
}

/* Lien principal du menu → Main dropdown link */
.nav-dropdown-main {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Flèche du menu → Dropdown arrow */
.nav-arrow {
    font-size: 12px;
    line-height: 1;
    transition: transform .2s ease;
}

/* Sous-menu → Dropdown menu */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    min-width: 180px;
    padding: 6px 0;
    background: var(--bg-main);
    border: 1px solid var(--border);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 6px);
    transition:
    opacity .15s ease,
    transform .15s ease,
    visibility .15s ease;
}

/* Liens du sous-menu → Dropdown links */
.nav.nav-fixed .nav-dropdown-menu a {
    display: block;
    width: 100%;
    padding: 9px 14px;
    text-align: left;
    transform: none;
}

/* Ouverture au survol ou au focus → Open on hover or focus */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-wrap:not(:has(.nav-dropdown:hover))
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

/* Rotation de la flèche → Arrow rotation */
.nav-dropdown:hover .nav-arrow,
.nav-wrap:not(:has(.nav-dropdown:hover))
.nav-dropdown:focus-within .nav-arrow {
    transform: rotate(180deg);
}

/* Survol des liens du sous-menu → Dropdown link hover */
.nav.nav-fixed .nav-dropdown-menu a:hover,
.nav.nav-fixed .nav-dropdown-menu a:focus {
    color: var(--accent);
    background: var(--bg-secondary);
    transform: none;
}

/* Curseur des menus → Dropdown cursor */
.nav-dropdown,
.nav-dropdown * {
    cursor: pointer;
}

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

@media (max-width: 640px) {

    /* Onglets → Navigation tabs */
    .nav.nav-fixed a {
        font-size: 14px;
        padding: 7px 12px;
    }

    /* Navigation → Navigation */
    .nav.nav-fixed {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 12px;
        margin-bottom: 16px;
    }

    /* Conteneur des onglets → Navigation wrapper */
    .nav.nav-fixed .nav-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    /* Liens de navigation → Navigation links */
    .nav.nav-fixed .nav-wrap a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {

    .nav-dropdown:hover,
    .nav-dropdown:focus-within {
        z-index: 1100;
    }

    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        z-index: 1101;
    }
}

@media (min-width: 1024px) {

    /* Conteneur des onglets → Navigation wrapper */
    .nav.nav-fixed .nav-wrap {
        gap: 12px;
    }

    /* Onglets → Navigation tabs */
    .nav.nav-fixed a {
        font-size: 16px;
        padding: 8px 14px;
    }
}

@media (min-width: 1280px) {
    /* Conteneur des onglets → Navigation wrapper */
    .nav.nav-fixed .nav-wrap {
        gap: 14px;
    }

    /* Onglets → Navigation tabs */
    .nav.nav-fixed a {
        font-size: 18px;
        padding: 9px 16px;
    }

    /* Paragraphes des cartes → Card paragraphs */
    .card p {
        font-size: 18px;
        line-height: 1.7;
    }

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 38px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 24px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 22px;
    }
}

.header-inner {
    width: 100%;
    max-width: 1920px;
    min-height: 82px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 24px;
}

/* LOGO DU STUDIO → STUDIO LOGO */
.header-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.header-brand .logo {
    width: 245px;
    max-width: 245px;
    height: auto;
}

.header-brand .logo-dark {
    display: block;
}

.header-brand .logo-light {
    display: none;
}


.site-header {
    position: relative;
    z-index: 2000;
    width: 100%;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
}

/* NAVIGATION PRINCIPALE → MAIN NAVIGATION */
.site-header .nav.nav-fixed {
    flex: 1 1 auto;
    min-width: 0;
    position: static;
    background: transparent;
    border: 0;
    margin: 0;
}

.site-header .nav.nav-fixed .nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 14px;
    padding: 0;
}

/* LIENS DE NAVIGATION → NAVIGATION LINKS */
.site-header .nav.nav-fixed a {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    padding: 14px 8px;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    transform: none;
}

/* SURVOL → HOVER */
.site-header .nav.nav-fixed a:hover,
.site-header .nav.nav-fixed a:focus {
    color: var(--accent);
}

/* ONGLET ACTIF → ACTIVE TAB */
.site-header .nav.nav-fixed a.active,
.site-header .nav.nav-fixed a.active:hover,
.site-header .nav.nav-fixed a.active:focus {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* MENUS DÉROULANTS → DROPDOWN MENUS */
.site-header .nav-dropdown {
    position: relative;
}

.site-header .nav-dropdown-menu {
    min-width: 190px;
    background: var(--header-bg);
    border: 1px solid var(--header-border);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 14px 35px rgba(0, 0, 0, .25);
}

/* LIENS DU SOUS-MENU → DROPDOWN LINKS */
.site-header .nav.nav-fixed .nav-dropdown-menu a {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
}

.site-header .nav.nav-fixed .nav-dropdown-menu a:hover,
.site-header .nav.nav-fixed .nav-dropdown-menu a:focus {
    background: var(--bg-secondary);
    color: var(--accent);
    transform: none;
    font-weight: 500;
}

/* LANGUES ET THÈME → LANGUAGE AND THEME */
.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex: 0 0 auto;
}

/* SÉLECTEUR DE LANGUE → LANGUAGE SWITCH */
.site-header .lang-switch {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    margin: 0;
    border: 1px solid rgba(190, 215, 225, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    font-size: 17px;
    letter-spacing: 0;
    white-space: nowrap;
}

.site-header .lang-switch a {
    color: var(--text-primary);
    opacity: .65;
    line-height: 1.4;
    text-decoration: none;
}

.site-header .lang-switch a.active {
    color: var(--accent);
    opacity: 1;
    font-weight: 700;
}

.site-header .lang-switch a:hover {
    color: var(--accent);
    opacity: 1;
}

.site-header .lang-switch .sep {
    color: var(--text-primary);
    opacity: .4;
}

/* INTERRUPTEUR DE THÈME → THEME SWITCH */
.site-header .theme-toggle {
    position: static;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 78px;
    height: 38px;
    padding: 3px 5px;
    border: 1px solid var(--theme-toggle-border);
    border-radius: 999px;
    background: var(--theme-toggle-bg);
    color: var(--theme-toggle-color);
    cursor: pointer;
}

/* ICÔNES DU THÈME → THEME ICONS */
.site-header .theme-sun,
.site-header .theme-moon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    font-size: 21px;
    line-height: 1;
    transition: background .2s, color .2s;
}

/* RESPONSIVE → RESPONSIVE */
@media (max-width: 1350px) {
    .header-inner {
        padding: 0 20px;
        gap: 14px;
    }

    .header-brand .logo {
        width: 150px;
        max-width: 150px;
    }

    .site-header .nav.nav-fixed a {
        font-size: 16px;
        padding: 10px 6px;
    }

    .header-actions {
        gap: 10px;
    }
}

@media (max-width: 1150px) {
    .header-inner {
        min-height: 72px;
        justify-content: space-between;
    }

    .site-header .menu-toggle {
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--header-border);
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        font-size: 22px;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 0;
        padding-bottom: 10px;
    }

    .header-brand {
        order: 1;
    }

    .header-actions {
        order: 2;
        margin-left: auto;
    }

    .site-header .nav.nav-fixed {
        display: flex;
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        margin-top: 10px;
        padding: 0;
    }

    .site-header .nav.nav-fixed .nav-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
        width: 100%;
    }

    .site-header .nav.nav-fixed .nav-wrap > a,
    .site-header .nav.nav-fixed .nav-dropdown-main {
        font-size: 16px;
        padding: 9px 7px;
    }
}

@media (max-width: 480px) {
    .header-inner {
        padding: 0 12px;
        gap: 8px;
    }

    .header-brand .logo {
        width: 120px;
        max-width: 120px;
    }

    .header-actions {
        gap: 8px;
    }

    .site-header .lang-switch {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12px;
        gap: 4px;
    }

    .site-header .theme-toggle,
    .site-header .menu-toggle {
        width: 34px;
        height: 34px;
        padding: 2px 4px;
    }

    .site-header .theme-sun,
    .site-header .theme-moon {
        width: 27px;
        height: 27px;
        font-size: 18px;
    }

    .site-header .theme-toggle {
        flex: 0 0 68px;
        width: 68px;
        min-width: 68px;
        border-radius: 999px;
    }

    .site-header .nav.nav-fixed .nav-wrap {
        gap: 4px 8px;
    }

    .site-header .nav.nav-fixed .nav-wrap > a,
    .site-header .nav.nav-fixed .nav-dropdown-main {
        font-size: 14px;
        padding: 7px 3px;
    }
}

/* ==================================================
ACCUEIL IMMERSIF → IMMERSIVE HOMEPAGE
Styles limités à la page d'accueil → Homepage-only styles
================================================== */

:is(#accueil, #home) {
    margin-top: 0;
}

:is(#accueil, #home) > .ps-home {
    margin: 0 auto 42px;
}

/* ==================================================
HERO PRINCIPAL → MAIN HERO
================================================== */

:is(#accueil, #home) .ps-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 375px;
    display: flex;
    align-items: center;
    background-color: var(--hero-bg);
    background-image:
    linear-gradient(
    90deg,
    #03111b 0%,
    rgba(3, 17, 27, .97) 28%,
    rgba(3, 17, 27, .72) 49%,
    rgba(3, 17, 27, .08) 100%
    ),
    url('/assets/img/hero-earth.webp.png');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
}

/* ==================================================
HALO LUMINEUX → LIGHT GLOW
================================================== */

:is(#accueil, #home) .ps-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background: radial-gradient(
    ellipse at 70% 65%,
    rgba(0, 195, 230, .12),
    transparent 48%
    );
}

/* ==================================================
CONTENU DU HERO → HERO CONTENT
================================================== */

:is(#accueil, #home) .ps-hero-content {
    position: relative;
    width: min(100%, 1650px);
    margin: auto;
    padding: 40px 5%;
}

/* SURTITRE → EYEBROW TEXT */
:is(#accueil, #home) .ps-eyebrow {
    margin: 0 0 18px;
    color: var(--hero-eyebrow);
    letter-spacing: .25em;
    font-size: 12px;
    font-weight: 600;
}

/* TITRE PRINCIPAL → MAIN HEADING */
:is(#accueil, #home) .ps-hero h1 {
    max-width: 760px;
    margin: 0 0 18px;
    text-align: left;
    color: #ffffff;
    font-size: clamp(32px, 3.4vw, 58px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -.035em;
    text-shadow: var(--text-primary-shadow);
}

:is(#accueil, #home) .ps-hero h1 span {
    color: #00d8e8;
}

/* DESCRIPTION → DESCRIPTION */
:is(#accueil, #home) .ps-hero-description {
    max-width: 630px;
    margin: 0 0 26px;
    color: var(--hero-description);
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.5;
}

/* ==================================================
BOUTONS DU HERO → HERO BUTTONS
================================================== */

:is(#accueil, #home) .ps-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* BOUTON COMMUN → SHARED BUTTON */
:is(#accueil, #home) .ps-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 48px;
    padding: 11px 24px;
    border: 1px solid var(--hero-button-bg);
    border-radius: 10px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

/* SURVOL → HOVER */
:is(#accueil, #home) .ps-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--hero-button-hover-shadow);
}

/* BOUTON PRINCIPAL → PRIMARY BUTTON */
:is(#accueil, #home) .ps-button-primary {
    color: var(--accent-contrast);
    background: var(--hero-button-bg);
}

/* BOUTON SECONDAIRE → SECONDARY BUTTON */
:is(#accueil, #home) .ps-button-secondary {
    color: #ffffff;
    background: var(--hero-button-secondary-bg);
}

/* ==================================================
GRILLE DES SERVICES → SERVICES GRID
================================================== */

:is(#accueil, #home) .ps-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    max-width: 1720px;
    margin: 24px auto 0;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* ==================================================
CARTES DES SERVICES → SERVICE CARDS
================================================== */

/* CARTES DES SERVICES → SERVICE CARDS */
:is(#accueil, #home) .ps-feature {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: start;
    align-items: start;
    column-gap: 16px;
    min-height: 160px;
    padding: 22px 24px;
    border-radius: 17px;
    border: 1px solid var(--feature-border);
    background: var(--feature-bg);
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}

/* FOND DÉCORATIF → DECORATIVE BACKGROUND */
:is(#accueil, #home) .ps-feature::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
    radial-gradient(circle at 90% 5%, var(--feature-glow), transparent 60%),
    repeating-linear-gradient(130deg, transparent 0 22px, var(--feature-lines) 23px 24px);
}

/* SOLUTIONS PRÊTES À DÉPLOYER → READY-TO-DEPLOY SOLUTIONS */
:is(#accueil, #home) .ps-feature-ready::before {
    background:
    radial-gradient(circle at 82% 20%, var(--feature-ready-glow), transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 34px, var(--feature-ready-lines) 35px 36px);
}

/* SERVICES → SERVICES */
:is(#accueil, #home) .ps-feature-services::before {
    background:
    radial-gradient(circle at 80% 10%, var(--feature-services-glow), transparent 60%),
    linear-gradient(120deg, transparent 45%, var(--feature-services-overlay));
}

/* RECHERCHE ET ANALYSE → RESEARCH AND ANALYSIS */
:is(#accueil, #home) .ps-feature-research::before {
    background:
    radial-gradient(circle at 85% 18%, var(--feature-research-glow), transparent 58%),
    linear-gradient(120deg, transparent 40%, var(--feature-research-overlay));
}

/* SURVOL DES CARTES → CARD HOVER */
:is(#accueil, #home) .ps-feature:hover {
    transform: translateY(-4px);
    border-color: var(--feature-hover-border);
    box-shadow: var(--feature-hover-shadow);
}

/* ==================================================
CONTENU DES CARTES → CARD CONTENT
================================================== */

/* SYMBOLE À GAUCHE → LEFT SYMBOL */
:is(#accueil, #home) .ps-feature-symbol {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--feature-symbol);
    line-height: 1;
}

/* TITRE ET DESCRIPTION → TITLE AND DESCRIPTION */
:is(#accueil, #home) .ps-feature-bottom {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-right: 12px;
}

/* TITRE → HEADING */
:is(#accueil, #home) .ps-feature strong {
    color: var(--text-primary);
    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.2;
    display: flex;
    align-items: center;
    min-height: 30px;
}

/* DESCRIPTION → DESCRIPTION */
:is(#accueil, #home) .ps-feature small {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.45;
}

/* TAILLE DES DESCRIPTIONS DE TOUTES LES CARTES */
:is(#accueil, #home) .ps-feature small,
:is(#accueil, #home) .ps-publication-card .ps-publication-description,
:is(#accueil, #home) .ps-discover-card p {
    font-size: 17px;
    line-height: 1.5;
}

/* FLÈCHE DE NAVIGATION → NAVIGATION ARROW */
:is(#accueil, #home) .ps-feature-arrow {
    position: absolute;
    right: 19px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid var(--feature-border);
    color: var(--text-primary);
    font-size: 21px;
}

/* ==================================================
FINITIONS DES CARTES → SERVICE CARD FINISHING
================================================== */

/* ICÔNES SVG → SVG ICONS */
#accueil .ps-feature-symbol svg,
#home .ps-feature-symbol svg {
    display: block;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* FLÈCHES → NAVIGATION ARROWS */
:is(#accueil, #home) .ps-feature-arrow {
    width: 30px;
    height: 30px;
    font-size: 18px;
    transition: background .2s ease, color .2s ease;
}

/* SURVOL → HOVER */
:is(#accueil, #home) .ps-feature:hover .ps-feature-arrow {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--feature-bg);
}

/* ==================================================
BANDEAU DES EXPERTISES → EXPERTISE BANNER
================================================== */

:is(#accueil, #home) .ps-expertise {
    max-width: 1672px;
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    min-height: 76px;
    border-radius: 15px;
    border: 1px solid var(--expertise-border);
    background: linear-gradient(100deg, var(--expertise-bg-start), var(--surface-bg));
    color: var(--expertise-text);
}

/* ÉLÉMENTS DU BANDEAU → BANNER ITEMS */
:is(#accueil, #home) .ps-expertise > span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    min-height: 42px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
    padding: 12px 20px;
}

/* ICÔNES DES EXPERTISES → EXPERTISE ICONS */
:is(#accueil, #home) .ps-expertise .ps-expertise-icon {
    flex-shrink: 0;
    padding: 0;
    color: var(--accent);
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
}

/* SÉPARATEURS → SEPARATORS */
:is(#accueil, #home) .ps-expertise > span + span {
    border-left: 1px solid var(--expertise-separator-dark);
}

/* ==================================================
ESPACEMENT DES SECTIONS → SECTION SPACING
================================================== */

:is(#accueil, #home) .ps-home {
    padding-bottom: 24px;
}

/* ==================================================
PUBLICATIONS ET RECHERCHES → PUBLICATIONS AND RESEARCH
================================================== */

:is(#accueil, #home) .ps-publications {
    max-width: 1672px;
    margin: 52px auto 0;
    padding: 0 24px;
}

/* EN-TÊTE → SECTION HEADER */
:is(#accueil, #home) .ps-publications-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 24px;
}

/* LIEN VERS LES PUBLICATIONS → ALL PUBLICATIONS LINK */
:is(#accueil, #home) .ps-publications-all {
    flex-shrink: 0;
    padding-bottom: 5px;
    color: var(--accent);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

:is(#accueil, #home) .ps-publications-all:hover {
    text-decoration: underline;
}

/* GRILLE → PUBLICATIONS GRID */
:is(#accueil, #home) .ps-publications-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* CARTES → PUBLICATION CARDS */
:is(#accueil, #home) .ps-publication-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-height: 255px;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid var(--card-border);
    background: linear-gradient(145deg, var(--card-bg), var(--surface-bg));
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease,
    box-shadow .2s ease;
}

:is(#accueil, #home) .ps-publication-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--publication-hover-shadow);
}

/* CATÉGORIE → CATEGORY */
:is(#accueil, #home) .ps-publication-category {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

/* ICÔNE → ICON */
:is(#accueil, #home) .ps-publication-icon {
    color: var(--accent);
    font-size: 30px;
    line-height: 1;
}

/* TITRE → TITLE */
:is(#accueil, #home) .ps-publication-card strong {
    color: inherit;
    font-size: 20px;
    line-height: 1.3;
}

/* DESCRIPTION → DESCRIPTION */
:is(#accueil, #home) .ps-publication-description {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

/* LIEN → CARD LINK */
:is(#accueil, #home) .ps-publication-link {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
}

/* ==================================================
FINITIONS PUBLICATIONS → PUBLICATIONS FINISHING
================================================== */

/* ALIGNEMENT DES TITRES → SECTION TITLE ALIGNMENT */
:is(#accueil, #home) .ps-discover h2,
:is(#accueil, #home) .ps-audience h2 {
    text-align: left;
}

/* ALIGNEMENT DE L'EN-TÊTE → HEADER ALIGNMENT */
:is(#accueil, #home) .ps-publications-header {
    align-items: center;
}

/* EN-TÊTE DES RESSOURCES → RESOURCES HEADER */
:is(#accueil, #home) .ps-discover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 24px;
}

@media (max-width: 650px) {
    :is(#accueil, #home) .ps-discover-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

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

@media (max-width: 1100px) {

    :is(#accueil, #home) .ps-publications-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    :is(#accueil, #home) .ps-publications {
        margin-top: 36px;
        padding: 0 14px;
    }

    :is(#accueil, #home) .ps-publications-all {
        align-self: flex-start;
    }

    :is(#accueil, #home) .ps-publications-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    :is(#accueil, #home) .ps-publications-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :is(#accueil, #home) .ps-publication-card {
        min-height: 220px;
    }
}

/* ==================================================
RESPONSIVE TABLETTE → TABLET RESPONSIVE
================================================== */

@media (max-width: 1100px) {

    /* GRILLE DES SERVICES → SERVICES GRID */
    :is(#accueil, #home) .ps-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* BANDEAU DES EXPERTISES → EXPERTISE BANNER */
    :is(#accueil, #home) .ps-expertise {
        grid-template-columns: repeat(3, 1fr);
        margin-inline: 24px;
    }

    /* SÉPARATEURS → SEPARATORS */
    :is(#accueil, #home) .ps-expertise span + span {
        border-left: 0;
    }
}

/* ==================================================
RESPONSIVE MOBILE → MOBILE RESPONSIVE
================================================== */

@media (max-width: 650px) {

    /* HERO PRINCIPAL → MAIN HERO */
    :is(#accueil, #home) .ps-hero {
        min-height: 440px;
        background-position: center, 65% center;
        background-image:
        linear-gradient(
        90deg,
        rgba(3, 17, 27, .94),
        rgba(3, 17, 27, .7)
        ),
        url('/assets/img/hero-earth.webp.png');
    }

    /* CONTENU DU HERO → HERO CONTENT */
    :is(#accueil, #home) .ps-hero-content {
        padding: 40px 22px;
    }

    /* SURTITRE → EYEBROW TEXT */
    :is(#accueil, #home) .ps-eyebrow {
        font-size: 10px;
        letter-spacing: .14em;
    }

    /* TITRE PRINCIPAL → MAIN HEADING */
    :is(#accueil, #home) .ps-hero h1 {
        font-size: clamp(30px, 8vw, 42px);
    }

    /* SAUTS DE LIGNE → LINE BREAKS */
    :is(#accueil, #home) .ps-hero h1 br {
        display: none;
    }

    /* BOUTONS DU HERO → HERO BUTTONS */
    :is(#accueil, #home) .ps-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* GRILLE DES SERVICES → SERVICES GRID */
    :is(#accueil, #home) .ps-feature-grid {
        grid-template-columns: 1fr;
        padding: 0 14px;
        gap: 12px;
    }

    /* CARTES DES SERVICES → SERVICE CARDS */
    :is(#accueil, #home) .ps-feature {
        min-height: 185px;
    }

    /* BANDEAU DES EXPERTISES → EXPERTISE BANNER */
    :is(#accueil, #home) .ps-expertise {
        grid-template-columns: 1fr;
        margin-inline: 14px;
    }

    /* ÉLÉMENTS DU BANDEAU → BANNER ITEMS */
    :is(#accueil, #home) .ps-expertise span {
        padding: 12px;
    }
}

/* ==================================================
FOND DU HERO → HERO BACKGROUND
================================================== */

:is(#accueil, #home) .ps-hero {
    background-image:
    linear-gradient(
    90deg,
    #03111b 0%,
    rgba(3, 17, 27, .97) 28%,
    rgba(3, 17, 27, .72) 49%,
    rgba(3, 17, 27, .08) 100%
    ),
    url('/assets/img/hero-earth.webp.png');
}

/* ==================================================
OUTILS ET RESSOURCES → TOOLS AND RESOURCES
================================================== */

:is(#accueil, #home) .ps-discover,
:is(#accueil, #home) .ps-audience {
    max-width: 1672px;
    margin: 52px auto 0;
    padding: 0 24px;
}

/* Surtitres des sections */
:is(#accueil, #home) .ps-section-eyebrow {
    margin: 0 0 12px;
    color: var(--publications-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
}

/* Titres des sections */
:is(#accueil, #home) .ps-section-title {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
    text-shadow: none;
}

:is(#accueil, #home) .ps-section-title span {
    color: var(--accent-dark);
}

:is(#accueil, #home) .ps-section-title::before,
:is(#accueil, #home) .ps-section-title::after {
    content: none;
    display: none;
}

/* Descriptions sous les titres */
:is(#accueil, #home) .ps-section-intro {
    max-width: 680px;
    margin: 0;
    color: var(--text-secondary);
    opacity: 1;
    font-size: 17px;
    line-height: 1.6;
}

:is(#accueil, #home) .ps-discover h2,
:is(#accueil, #home) .ps-audience h2 {
    margin: 0 0 12px;
    color: var(--text-primary);
    font-size: clamp(26px, 2.4vw, 38px);
    line-height: 1.2;
    text-shadow: none;
}

:is(#accueil, #home) .ps-discover h2 span,
:is(#accueil, #home) .ps-audience h2 span {
    color: var(--accent-dark);
}

:is(#accueil, #home) .ps-discover h2::before,
:is(#accueil, #home) .ps-discover h2::after,
:is(#accueil, #home) .ps-audience h2::before,
:is(#accueil, #home) .ps-audience h2::after {
    content: none;
    display: none;
}

/* TITRES DES CARTES → CARD TITLES */
:is(#accueil, #home) .ps-discover-card h3 {
    text-align: left;
}

/* GRILLE → GRID */
:is(#accueil, #home) .ps-discover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

/* CARTES → CARDS */
:is(#accueil, #home) .ps-discover-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 255px;
    padding: 25px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--card-bg), var(--surface-bg));
    color: var(--text-primary);
}

:is(#accueil, #home) .ps-discover-category {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

:is(#accueil, #home) .ps-discover-card h3 {
    margin: 0;
    color: inherit;
    font-size: 21px;
}

:is(#accueil, #home) .ps-discover-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.55;
}

/* LIENS → LINKS */
:is(#accueil, #home) .ps-discover-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: auto;
    padding-top: 14px;
}

:is(#accueil, #home) .ps-discover-links a {
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

:is(#accueil, #home) .ps-discover-links a:hover {
    text-decoration: underline;
}

/* ==================================================
PUBLICS ACCOMPAGNÉS → TARGET AUDIENCES
================================================== */

:is(#accueil, #home) .ps-audience {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 48px;
}

/* RETOUR EN HAUT → BACK TO TOP */
:is(#accueil, #home) .center {
    text-align: center;
    margin: 35px 0 0;
    padding-bottom: 25px;
}

:is(#accueil, #home) .link-back {
    display: inline-block;
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

:is(#accueil, #home) .link-back:hover {
    text-decoration: underline;
}

:is(#accueil, #home) .ps-feature-grid > .ps-feature:nth-child(1) {
    --card-image: url('/assets/img/card-business.webp.png');
}

:is(#accueil, #home) .ps-feature-grid > .ps-feature:nth-child(2) {
    --card-image: url('/assets/img/card-ready.webp.png');
}

:is(#accueil, #home) .ps-feature-grid > .ps-feature:nth-child(3) {
    --card-image: url('/assets/img/card-services.webp.png');
}

:is(#accueil, #home) .ps-feature-grid > .ps-feature:nth-child(4) {
    --card-image: url('/assets/img/card-research.webp.png');
}

:is(#accueil, #home) .ps-feature-grid > .ps-feature {
    background-image:
    linear-gradient(
    90deg,
    rgba(3, 19, 29, .95) 0%,
    rgba(3, 19, 29, .75) 45%,
    rgba(3, 19, 29, .15) 100%
    ),
    var(--card-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Images des trois cartes Publications */
:is(#accueil, #home) .ps-publication-card:nth-child(1) {
    --publication-image: url('/assets/img/publication-infrastructures.webp.png');
}

:is(#accueil, #home) .ps-publication-card:nth-child(2) {
    --publication-image: url('/assets/img/publication-raffineries.webp.png');
}

:is(#accueil, #home) .ps-publication-card:nth-child(3) {
    --publication-image: url('/assets/img/publication-frigorifiques.webp.png');
}

:is(#accueil, #home) .ps-publication-card {
    background:
    linear-gradient(
    90deg,
    rgba(3, 19, 29, .97) 0%,
    rgba(3, 19, 29, .85) 45%,
    rgba(3, 19, 29, .35) 100%
    ),
    var(--publication-image) center / cover no-repeat;
}

/* Images de fond : Outils & ressources */
:is(#accueil, #home) .ps-discover-card:nth-child(1) {
    --resource-image: url('/assets/img/ressources-outils.webp.png');
}

:is(#accueil, #home) .ps-discover-card:nth-child(2) {
    --resource-image: url('/assets/img/ressources-solutions.webp.png');
}

:is(#accueil, #home) .ps-discover-card:nth-child(3) {
    --resource-image: url('/assets/img/ressources-documentation.webp.png');
}

:is(#accueil, #home) .ps-discover-card {
    background:
    linear-gradient(
    90deg,
    rgba(3, 19, 29, .97) 0%,
    rgba(3, 19, 29, .85) 45%,
    rgba(3, 19, 29, .35) 100%
    ),
    var(--resource-image) center / cover no-repeat;
}

/* ===============================
ACCESSIBILITÉ → ACCESSIBILITY
=============================== */

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

/* ===============================
INTERACTIONS MOBILES → MOBILE INTERACTIONS
=============================== */

/* Highlight tactile → Tap highlight */
a,
button,
[role="button"],
input,
textarea,
select {
    -webkit-tap-highlight-color: transparent;
}

/* Bouton du menu → Menu toggle */
.menu-toggle {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    border:1px solid var(--border);
    color: var(--text-main);
    background: transparent;
    border-radius: 6px;
    font-size: 20px;
    padding: 4px 10px;
    cursor: pointer;
}

/* ===============================
RESPONSIVE ≥ 1151pxpx → RESPONSIVE ≥ 1151pxpx
=============================== */

@media (min-width:1151px){

    /* Bouton du menu → Menu toggle */
    .menu-toggle{
        display:none;
    }
}

/* ==================================================
PAGES INTÉRIEURES — PALKS STUDIO
Design commun avec le nouvel accueil
================================================== */

.ps-inner-page {
    width: 100%;
    min-height: 70vh;
    margin: 0;
    padding: 64px 24px 80px;
    background: var(--page-bg);
    color: var(--text-primary);
}

.ps-inner-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* INTRODUCTION */
.ps-inner-intro {
    max-width: 1000px;
    margin: 0 0 48px;
}

.ps-inner-page .ps-section-eyebrow {
    margin: 0 0 16px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    line-height: 1.5;
}

.ps-inner-page h1 {
    margin: 0 0 26px;
    color: var(--text-primary);
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-align: left;
    text-shadow: none;
}

.ps-inner-page p {
    color: var(--text-secondary);
    font-size: 17px;
    line-height: 1.75;
    margin: 0 0 18px;
}

.ps-inner-page .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* BOUTON TELEGRAM */
.ps-inner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 14px;
    padding: 12px 24px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background .2s ease,
    color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.ps-inner-button:hover,
.ps-inner-button:focus-visible {
    background: var(--accent);
    color: var(--accent-contrast);
    transform: translateY(-2px);
    box-shadow: var(--publication-hover-shadow);
}

/* TITRES DES SECTIONS */
.ps-inner-page h2 {
    margin: 0 0 20px;
    color: var(--text-primary);
    font-size: clamp(26px, 2.5vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    text-shadow: none;
}

.ps-inner-page h2::before,
.ps-inner-page h2::after {
    content: none;
    display: none;
}

.ps-inner-page h3 {
    margin: 42px 0 18px;
    color: var(--text-primary);
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    text-shadow: none;
}

/* ENCADRÉ : LE POINT SANS LE BRUIT */
.ps-inner-method {
    position: relative;
    max-width: 1100px;
    margin: 0 0 72px;
    padding: 34px 38px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    background: linear-gradient(
    135deg,
    var(--card-bg),
    var(--surface-bg)
    );
}

.ps-price-card {
    border-left: 4px solid var(--accent);
}

.ps-inner-method p:last-child {
    margin-bottom: 0;
}

/* SECTION DOSSIERS */
.ps-inner-section {
    width: 100%;
}

.ps-inner-section > p:not(.ps-section-eyebrow) {
    max-width: 900px;
}

.ps-inner-section > h3:first-of-type {
    margin-top: 38px;
}

/* GRILLES DES DOSSIERS */
.ps-inner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* CARTES CLIQUABLES */
.ps-inner-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    min-height: 0;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: linear-gradient(
    145deg,
    var(--card-bg),
    var(--surface-bg)
    );
    color: var(--text-primary);
    text-decoration: none;
    transition: transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.ps-inner-card:hover,
.ps-inner-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: var(--publication-hover-shadow);
    text-decoration: none;
}

.ps-inner-card img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.ps-inner-card strong {
    display: block;
    color: var(--text-primary);
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 700;
    line-height: 1.35;
}

.ps-inner-card small {
    display: block;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* FLÈCHE EN BAS À DROITE */
.ps-inner-card .ps-card-arrow {
    display: grid;
    place-items: center;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    margin-top: auto;
    border: 1px solid var(--card-border);
    border-radius: 50%;
    color: var(--accent);
    font-size: 21px;
    line-height: 1;
    transition: background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.ps-inner-card:hover .ps-card-arrow,
.ps-inner-card:focus-visible .ps-card-arrow {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

/* RETOUR EN HAUT */
.ps-inner-page .center {
    margin: 56px 0 0;
    text-align: center;
}

.ps-inner-page .link-back {
    display: inline-block;
    color: var(--accent);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.ps-inner-page .link-back:hover {
    text-decoration: underline;
}

/* MODE CLAIR */
body.light .ps-inner-page {
    background: var(--page-bg);
}

body.light .ps-inner-method,
body.light .ps-inner-card {
    background: linear-gradient(
    145deg,
    var(--card-bg),
    var(--surface-bg)
    );
    box-shadow: var(--card-shadow);
}

body.light .ps-inner-card:hover {
    box-shadow: var(--card-hover-shadow);
}

/* VISUELS DES DOSSIERS */
.ps-inner-card {
    padding: 0;
    gap: 0;
}

.ps-inner-card img.ps-inner-cover {
    display: block;
    width: 100%;
    height: 175px;
    object-fit: cover;
    object-position: center;
    border-radius: 15px 15px 0 0;
}

.ps-inner-card strong {
    padding: 18px 22px 0;
}

.ps-inner-card small {
    padding: 9px 22px 0;
}

.ps-inner-card .ps-card-arrow {
    margin: 16px 22px 18px auto;
}

/* LIENS TEXTUELS GÉNÉRIQUES */
.ps-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    transition: color .2s ease;
}

.ps-link:hover,
.ps-link:focus-visible {
    text-decoration: underline;
}

/* ==================================================
CARTES AVEC IMAGE DE FOND → BACKGROUND IMAGE CARDS
Apparence sombre conservée dans les deux thèmes
Dark appearance preserved in both themes
================================================== */

.ps-inner-page .ps-inner-card.ps-card-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--feature-bg);
    border-color: var(--feature-border);
}

/* ==================================================
IMAGES ASSOMBRIES → DARKENED CARD IMAGES
================================================== */
.ps-inner-page .ps-inner-card.ps-card-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
    linear-gradient(
        90deg,
        rgba(3, 17, 27, .92) 0%,
        rgba(3, 17, 27, .72) 50%,
        rgba(3, 17, 27, .18) 100%
    ),
    var(--card-image) center / cover no-repeat;
}

.ps-inner-page .ps-inner-card.ps-card-image h3,
.ps-inner-page .ps-inner-card.ps-card-image p,
.ps-inner-page .ps-inner-card.ps-card-image strong,
.ps-inner-page .ps-inner-card.ps-card-image small,
body.light .ps-inner-page .ps-inner-card.ps-card-image h3,
body.light .ps-inner-page .ps-inner-card.ps-card-image p,
body.light .ps-inner-page .ps-inner-card.ps-card-image strong,
body.light .ps-inner-page .ps-inner-card.ps-card-image small {
    color: #ffffff;
    opacity: 1;
}

/* ACCENTS → ACCENTS */
.ps-inner-page .ps-inner-card.ps-card-image h3 span,
body.light .ps-inner-page .ps-inner-card.ps-card-image h3 span {
    color: #00d8e8;
}

/* BOUTONS → BUTTONS */
.ps-inner-page .ps-inner-card.ps-card-image .ps-inner-button,
body.light .ps-inner-page .ps-inner-card.ps-card-image .ps-inner-button {
    color: #ffffff;
    border-color: #00a9c0;
    background: rgba(0, 169, 192, .18);
}

/* ==========================================
COMPOSANTS COMMUNS — PAGES INTÉRIEURES
========================================== */

/* Accents dans les titres */
.ps-inner-page h1 span,
.ps-inner-page h2 span,
.ps-inner-page h3 span {
    color: var(--accent);
}

/* Espacement entre les grandes sections */
.ps-section-spaced {
    margin-top: 70px;
}

/* Grille de cartes d'information */
.ps-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

/* Carte d'information */
.ps-info-card {
    padding: 30px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--card-bg), var(--surface-bg));
}

.ps-inner-page .ps-info-card h3 {
    margin: 0 0 24px;
    font-size: 22px;
}

/* Texte méta → Meta text */
.ps-inner-method p.meta-quiet {
    margin-top: 24px;
}

/* Encadré de méthode pleine largeur */
.ps-inner-method.ps-method-wide {
    max-width: none;
    margin: 25px 0 30px;
}

/* SOUS-TITRES DANS LES ENCADRÉS DE MÉTHODE */
.ps-inner-page .ps-inner-method h3 {
    margin: 30px 0 16px;
    font-size: clamp(20px, 2vw, 24px);
}

.ps-inner-page .ps-inner-method h3:first-child {
    margin-top: 0;
}

/* ESPACEMENT DES PARAGRAPHES AVANT LES CARTES */
.ps-inner-section > p + .ps-info-grid {
    margin-top: 30px;
}

/* SOMMAIRES DES ARTICLES → ARTICLE TABLES OF CONTENTS */
.ps-inner-section .ps-inner-card a {
    transition: color 0.2s ease;
}

.ps-inner-section .ps-inner-card a:not(.ps-inner-button):hover,
.ps-inner-section .ps-inner-card a:not(.ps-inner-button):focus-visible {
    color: #00a9c0;
}

.ps-inner-page .ps-legal-section h2 {
    margin: 0 0 18px;
    font-size: clamp(22px, 2.5vw, 29px);
    line-height: 1.3;
}

.ps-inner-page .ps-legal-section p {
    margin-bottom: 15px;
}

.ps-inner-page .ps-legal-section p:last-child {
    margin-bottom: 0;
}

/* Texte dans les cartes d'information */
.ps-inner-page .ps-info-card > p {
    margin: 12px 0 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

/* Ligne avec icône, titre et description */
.ps-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 17px 0;
    border-top: 1px solid var(--card-border);
}

.ps-info-item img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    object-fit: contain;
}

.ps-info-item > div {
    min-width: 0;
}

.ps-info-item strong {
    display: block;
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1.4;
}

.ps-info-item small {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.55;
}

/* Bloc tarifaire */
.ps-price-card {
    max-width: 900px;
    margin-top: 25px;
    padding: 38px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: linear-gradient(145deg, var(--card-bg), var(--surface-bg));
}

.ps-price-card .ps-price-label {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 15px;
}

.ps-price-card .ps-price-amount {
    margin: 0 0 25px;
    color: var(--accent);
    font-size: clamp(38px, 5vw, 54px);
    font-weight: 800;
    line-height: 1.1;
}

/* Mode clair */
body.light .ps-info-card,
body.light .ps-price-card {
    box-shadow: var(--card-shadow);
}

/* ==========================================
RESSOURCES NUMÉRIQUES — PALKS STUDIO
========================================== */

/* Liste de fonctionnalités */
.ps-feature-list {
    display: grid;
    gap: 12px;
    margin: 20px 0 28px;
    padding-left: 24px;
    color: var(--text-secondary);
}

.ps-feature-list li {
    padding-left: 4px;
    font-size: 16px;
    line-height: 1.65;
}

.ps-feature-list li::marker {
    color: var(--accent);
}

/* Démonstration vidéo */
.ps-demo-card,
.ps-purchase-card {
    width: 100%;
    max-width: 1000px;
    margin-top: 26px;
    padding: 34px;
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--accent);
    border-radius: 16px;
    background: linear-gradient(
    135deg,
    var(--card-bg),
    var(--surface-bg)
    );
}

.ps-demo-card .video-carousel,
.ps-inner-method .video-carousel {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 0 auto 32px;
}

.ps-demo-card video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: 12px;
    background: #000;
}

.ps-demo-card .ps-demo-caption,
.ps-inner-method .ps-demo-caption {
    margin: 18px 0 0;
    color: var(--text-secondary);
    font-size: 16px;
    text-align: center;
}

/* Bloc achat */
.ps-purchase-card {
    max-width: 850px;
}

.ps-purchase-card .ps-purchase-meta {
    margin: 18px 0 28px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
}

/* Formulaire */
.ps-purchase-card .purchase-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: 560px;
}

.ps-purchase-card .ps-form-label {
    display: block;
    margin-bottom: -8px;
    color: var(--accent);
    font-size: 16px;
    font-weight: 600;
}

.ps-purchase-card select,
.ps-purchase-card input[type="text"] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 9px;
    background: var(--page-bg);
    color: var(--text-primary);
    font-size: 15px;
}

.ps-purchase-card #company_id_wrapper {
    flex-direction: column;
    gap: 16px;
}

/* Affichage conditionnel du bloc entreprise */
.ps-purchase-card #company_id_wrapper:not([style*="display:none"]) {
    display: flex;
}

.ps-purchase-card .purchase-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

.ps-purchase-card .purchase-check input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    flex-shrink: 0;
    accent-color: var(--accent);
}

/* Bouton d'achat */
.ps-purchase-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.ps-purchase-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--publication-hover-shadow);
}

.ps-purchase-button .sale-price {
    color: inherit;
    font-size: inherit;
    font-weight: 800;
}

.ps-purchase-card .ps-purchase-note {
    margin: 26px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

body.light .ps-demo-card,
body.light .ps-purchase-card {
    box-shadow: var(--card-shadow);
}

/* Mobile */
@media (max-width: 650px) {
    .ps-demo-card,
    .ps-purchase-card {
        padding: 22px;
    }

    .ps-feature-list li {
        font-size: 15px;
    }

    .ps-purchase-card .purchase-form {
        max-width: 100%;
    }

    .ps-purchase-button {
        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-purchase-button {
        transition: none;
    }
}

/* ==========================================
PAGES LÉGALES — PALKS STUDIO
========================================== */

.ps-legal-content {
    width: 100%;
    max-width: 1000px;
}

.ps-legal-section {
    padding: 30px 0;
    border-bottom: 1px solid var(--card-border);
}

.ps-legal-section:first-child {
    padding-top: 0;
}

.ps-legal-section:last-child {
    border-bottom: none;
}

/* Listes juridiques */
.ps-legal-list {
    margin: 14px 0 22px;
    padding-left: 24px;
    color: var(--text-secondary);
}

.ps-legal-list li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

/* Liens longs */
.ps-legal-content a {
    overflow-wrap: anywhere;
}

/* Mobile */
@media (max-width: 650px) {
    .ps-legal-section {
        padding: 24px 0;
    }

    .ps-inner-page .ps-legal-section h2 {
        font-size: 22px;
    }

    .ps-legal-list {
        padding-left: 20px;
    }

    .ps-legal-list li {
        font-size: 15px;
    }
}

/* Responsive */
@media (max-width: 700px) {
    .ps-section-spaced {
        margin-top: 48px;
    }

    .ps-info-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ps-info-card {
        padding: 22px;
    }

    .ps-price-card {
        padding: 25px 22px;
    }

    .ps-info-item {
        gap: 12px;
    }
}

/* TABLETTE */
@media (max-width: 900px) {
    .ps-inner-page {
        padding: 48px 22px 65px;
    }

    .ps-inner-grid {
        gap: 14px;
    }

    .ps-inner-card {
        padding: 23px;
    }
}

/* MOBILE */
@media (max-width: 650px) {
    .ps-inner-page {
        padding: 36px 16px 55px;
    }

    .ps-inner-intro {
        margin-bottom: 36px;
    }

    .ps-inner-page h1 {
        font-size: clamp(30px, 8vw, 40px);
    }

    .ps-inner-page p {
        font-size: 16px;
        line-height: 1.7;
    }

    .ps-inner-button {
        width: 100%;
        text-align: center;
    }

    .ps-inner-method {
        margin-bottom: 48px;
        padding: 25px 22px;
    }

    .ps-inner-page h3 {
        margin-top: 32px;
    }

    .ps-inner-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ps-inner-card {
        min-height: 0;
        padding: 22px;
    }

    .ps-inner-card strong {
        font-size: 19px;
    }

    .ps-inner-card small {
        font-size: 15px;
    }

    .ps-inner-page .center {
        margin-top: 40px;
    }

    .ps-inner-card {
        padding: 0;
    }

    .ps-inner-card strong {
        padding: 20px 20px 0;
    }

    .ps-inner-card small {
        padding: 10px 20px 0;
    }

    .ps-inner-card .ps-card-arrow {
        margin: 18px 20px 20px auto;
    }

    .ps-inner-card img.ps-inner-cover {
        height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-inner-card,
    .ps-inner-button,
    .ps-card-arrow {
        transition: none;
    }
}

/* ==================================================
AVIS UTILISATEUR → USER FEEDBACK
================================================== */

.page-feedback {
    text-align: center;
    padding: 24px 0;
}

/* QUESTION → QUESTION */
.page-feedback > p:first-child {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 15px;
}

/* ACTIONS → ACTIONS */
.page-feedback-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

/* BOUTONS → BUTTONS */
.page-feedback-actions button {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--text-main);
    border-radius: 999px;
    padding: 9px 16px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition:
    transform .2s ease,
    background-color .2s ease,
    color .2s ease,
    box-shadow .2s ease;
}

/* SURVOL ET FOCUS → HOVER AND FOCUS */
.page-feedback-actions button:hover,
.page-feedback-actions button:focus-visible {
    background: var(--accent);
    color: var(--page-bg);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 216, 232, .18);
}

/* CLIC → ACTIVE */
.page-feedback-actions button:active {
    transform: scale(.96);
}

/* MESSAGE APRÈS VOTE → POST-VOTE MESSAGE */
.page-feedback-result {
    margin: 12px 0 0;
    color: var(--accent);
    font-size: 14px;
}

/* FONCTIONNALITÉS DU SYSTÈME → SYSTEM FEATURES */
:is(#fonctionnalites, #features) .ps-inner-card {
    padding: 24px;
    gap: 0;
    align-items: stretch;
}

:is(#fonctionnalites, #features) .ps-inner-card h3 {
    margin: 0 0 22px;
    font-size: 20px;
    line-height: 1.3;
}

:is(#fonctionnalites, #features) .ps-inner-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

:is(#fonctionnalites, #features) .ps-inner-card li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 20px;
    padding: 0;
}

:is(#fonctionnalites, #features) .ps-inner-card li:last-child {
    margin-bottom: 0;
}

:is(#fonctionnalites, #features) .ps-inner-card img.service-icon {
    width: 24px;
    height: 24px;
    margin: 2px 0 0;
    flex-shrink: 0;
}

:is(#fonctionnalites, #features) .service-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

:is(#fonctionnalites, #features) .service-content strong {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.4;
}

:is(#fonctionnalites, #features) .service-content small {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
}

:is(#fonctionnalites, #features) .ps-inner-card:hover {
    transform: none;
}

@media (max-width: 650px) {
    :is(#fonctionnalites, #features) .ps-inner-card {
        padding: 20px;
    }
}


/* CARTES TARIFAIRES → PRICING CARDS */
:is(#tarifs, #pricing) .ps-inner-grid {
    gap: 16px;
    margin: 24px 0;
}

:is(#tarifs, #pricing) .ps-inner-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 22px 24px;
}

:is(#tarifs, #pricing) .ps-inner-card h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

:is(#tarifs, #pricing) .ps-inner-card p {
    margin: 0;
    padding: 0;
    line-height: 1.3;
}

:is(#tarifs, #pricing) .ps-inner-card p strong {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--accent);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 650px) {
    :is(#tarifs, #pricing) .ps-inner-card {
        padding: 18px 20px;
    }

    :is(#tarifs, #pricing) .ps-inner-card p strong {
        font-size: 22px;
    }
}

/* ==================================================
PIED DE PAGE → FOOTER
================================================== */

footer {
    border-top: 1px solid var(--header-border);
    padding: 28px 20px 32px;
    margin-top: 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    position: relative;
    z-index: 2;
    background: var(--page-bg);
}

footer .wrap {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 22px;
    text-align: center;
}

/* LIENS → FOOTER LINKS */
footer a {
    color: var(--text-secondary);
    margin: 0 10px;
    text-decoration: none;
}

footer a:hover {
    color: var(--accent);
}

/* TEXTE → FOOTER TEXT */
footer .footer-text {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* TEXTE SECONDAIRE → SECONDARY TEXT */
footer .small {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* MARQUE → BRAND */
footer .footer-brand {
    color: var(--accent);
    font-weight: 700;
}

/* SIGNATURE → TAGLINE */
footer .footer-tagline {
    color: var(--text-secondary);
}

/* ==================================================
RÉSEAUX ET PROFILS → SOCIAL LINKS
================================================== */

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 18px 0;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: .8;
    transition: opacity .2s ease, transform .2s ease;
}

.footer-socials img {
    width: 22px;
    height: auto;
    max-height: 22px;
    display: block;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

/* AJUSTEMENT DES LOGOS → LOGO ADJUSTMENTS */
.footer-socials img[src*="devto"] {
    transform: scale(1.2);
}

.footer-socials a:has(img[src*="malt"]) {
    margin: 0 12px;
}

.footer-socials img[src*="malt"] {
    transform: scale(2.2);
}

.footer-socials img[src*="github"] {
    height: 21px;
}

.footer-socials img[src*="youtube"] {
    height: 32px;
}

.footer-socials img[src*="linkedin"] {
    height: 20px;
}

/* ==================================================
COULEUR DES ICÔNES SOCIALES → SOCIAL ICON COLORS
================================================== */

/* MODE SOMBRE → DARK MODE */
.footer-socials img {
    filter: none;
}

/* MODE CLAIR → LIGHT MODE */
body.light .footer-socials img {
    filter: brightness(0) saturate(100%)
    invert(35%) sepia(90%) saturate(850%)
    hue-rotate(155deg) brightness(85%) contrast(105%);
}

/* CHATBOT FLOTTANT → FLOATING CHATBOT */
.chatbot-palks-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    text-decoration: none;
    transition: transform .2s ease;
}

.chatbot-palks-widget:hover {
    transform: translateY(-4px);
}

.chatbot-palks-widget svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* COULEURS DU ROBOT */
.chatbot-palks-widget .mini-robot-head {
    fill: #103545;
    stroke: #00dce8;
    stroke-width: 3;
}

.chatbot-palks-widget .mini-antenna {
    stroke: #00dce8;
    stroke-width: 4;
    stroke-linecap: round;
}

.chatbot-palks-widget .mini-antenna-light {
    fill: #00f0ff;
}

.chatbot-palks-widget .mini-eye {
    fill: #e8fcff;
}

.chatbot-palks-widget .mini-pupil {
    fill: #008fa8;
}

.chatbot-palks-widget .mini-eye-shine {
    fill: #ffffff;
}

.chatbot-palks-widget .mini-mouth {
    fill: #00cbd8;
}

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

@media (max-width: 1100px) {

    :is(#accueil, #home) .ps-discover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {

    :is(#accueil, #home) .ps-discover,
    :is(#accueil, #home) .ps-audience {
        margin-top: 36px;
        padding: 0 14px;
    }

    :is(#accueil, #home) .ps-discover-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    :is(#accueil, #home) .ps-audience {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        margin-bottom: 36px;
    }
}

/* ===============================
CHATBOT PALKS STUDIO → CHATBOT WIDGET
=============================== */

.chatbot-palks-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 68px;
    height: 62px;
    display: block;
    z-index: 999999;
    cursor: pointer;
    animation: miniRobotIdle 3.5s ease-in-out infinite;
}

.chatbot-palks-widget svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
}

.mini-robot-head {
    fill: var(--robot);
    stroke: var(--robot-border);
    stroke-width: 2;
}

.mini-eye {
    fill: var(--eye);
    stroke: var(--robot-border);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: miniBlink 5s infinite;
}
.mini-pupil {
    fill: #111820;
}

.mini-eye-shine {
    fill: #ffffff;
}

.mini-mouth {
    fill: #111820;
}

.mini-antenna {
    stroke: var(--robot-border);
    stroke-width: 3;
    stroke-linecap: round;
}

.mini-antenna-light {
    fill: #35d6ed;
    filter: drop-shadow(0 0 5px #35d6ed);
    transform-box: fill-box;
    transform-origin: center;
    animation: miniAntenna 1.8s ease-in-out infinite;
}

@keyframes miniRobotIdle {
    0%, 80%, 100% {
        transform: translateY(0);
    }

    88% {
        transform: translateY(-5px);
    }

    94% {
        transform: translateY(0);
    }
}

@keyframes miniBlink {
    0%, 92%, 96%, 100% {
        transform: scaleY(1);
    }

    94% {
        transform: scaleY(.12);
    }
}

@keyframes miniAntenna {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

/* CHATBOT MOBILE → MOBILE CHATBOT */
@media (max-width: 600px) {
    .chatbot-palks-widget {
        right: 16px;
        bottom: 16px;
        width: 58px;
        height: 53px;
    }
}

/* ==================================================
BANDEAU INTERNATIONAL → INTERNATIONAL BANNER
================================================== */

.pricing-banner {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    margin-top: 0;
    padding: 7px 20px;
    box-sizing: border-box;
    background: var(--pricing-banner-bg);
    border-top: 1px solid var(--pricing-banner-border-top);
    border-bottom: 1px solid var(--pricing-banner-border-bottom);
    color: var(--pricing-banner-text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background .2s ease;
}

/* SURVOL → HOVER */
.pricing-banner:hover {
    background: var(--pricing-banner-hover-bg);
}

/* ANNONCE PRINCIPALE → MAIN ANNOUNCEMENT */
.pricing-banner strong {
    color: var(--accent);
    font-weight: 600;
}

/* LIEN D'ACTION → ACTION LINK */
.pricing-banner-action {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

/* ==================================================
BANDEAU MOBILE → MOBILE BANNER
================================================== */

@media (max-width: 650px) {

    .pricing-banner {
        gap: 5px;
        padding: 9px 14px;
        font-size: 12px;
        text-align: center;
    }

    .pricing-banner-action {
        display: none;
    }
}

/* ===============================
RESPONSIVE ≤ 640px → RESPONSIVE ≤ 640px
=============================== */

@media (max-width: 640px) {

    /* Conteneur principal → Main wrapper */
    .wrap {
        padding: 0 12px;
    }

    /* Conteneurs consécutifs → Consecutive wrappers */
    .wrap + .wrap {
        margin-top: 16px;
    }

    /* Carte → Card */
    .white-card {
        padding: 20px 16px 16px;
    }
}

/* ===============================
RESPONSIVE ≥ 768px → RESPONSIVE ≥ 768px
=============================== */

@media (min-width: 768px) {

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 28px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 20px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 18px;
    }
}

/* ===============================
RESPONSIVE ≥ 1024px → RESPONSIVE ≥ 1024px
=============================== */

@media (min-width: 1024px) {

    /* Conteneur principal → Main wrapper */
    .wrap {
        max-width: 1280px;
        padding: 0 24px;
    }

    /* Bloc bleu → Blue block */
    .block-bleu {
        max-width: 1280px;
    }

    /* Paragraphes des cartes → Card paragraphs */
    .card p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Cartes → Cards */
    .white-card,
    .card {
        padding: 24px 20px 20px;
    }

    /* Paragraphes → Paragraphs */
    p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Titre H1 → H1 heading */
    h1 {
        font-size: 34px;
    }

    /* Titre H2 → H2 heading */
    h2 {
        font-size: 24px;
    }

    /* Titre H3 → H3 heading */
    h3 {
        font-size: 22px;
    }

}

/* ===============================
RESPONSIVE < 1200px → RESPONSIVE < 1200px
=============================== */

@media (max-width:1200px){

    /* Bouton du menu → Menu toggle */
    .menu-toggle{
        right:16px;
    }

}