/* =========================================================
   CHARTE GRAPHIQUE — Pappalardo Avocat
   Jetons ("tokens") du design system du cabinet.
   Règle de la charte : jamais de blanc pur en fond de page,
   toujours le blanc cassé #F7F5F0.
   ========================================================= */

/* Police : Aptos est la police de marque (Office) mais n'est pas
   licenciable sur le web. On l'utilise si elle est installée sur le
   poste du visiteur, sinon Calibri/Arial (présentes sur tous les postes). Aucune police
   n'est chargée depuis un service tiers : pas d'appel à Google Fonts. */

/* Une déclaration par graisse : un seul fichier local déclaré pour
   100-900 empêchait le navigateur d'utiliser la version grasse, et
   tout le site s'affichait en graisse normale. */
@font-face {
    font-family: "Aptos";
    src: local("Aptos"), local("Aptos-Regular"), local("Calibri");
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aptos";
    src: local("Aptos SemiBold"), local("Aptos-SemiBold"), local("Calibri Bold"), local("Calibri-Bold");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Aptos";
    src: local("Aptos Bold"), local("Aptos-Bold"), local("Calibri Bold"), local("Calibri-Bold");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- Palette de base ---- */
    --marine:        #1C2B4A;   /* fonds forts, bandeaux */
    --bleu:          #013485;   /* titres, texte fort, liens */
    --cyan:          #0D8FC9;   /* accent secondaire */
    --bronze:        #946F4A;   /* filet sous les titres, sous-titres */
    --or:            #C9A05A;   /* temps forts UNIQUEMENT */
    --bronze-clair:  #CFB093;   /* variante chaude (survols) */
    --creme:         #E8E1D0;   /* surface claire alternative */
    --blanc-casse:   #F7F5F0;   /* fond de page — jamais de blanc pur */
    --gris-bleute:   #9CB6CC;   /* texte secondaire sur marine */
    --blanc:         #FFFFFF;
    --texte:         #1A1A1A;   /* texte courant sur fond clair */
    --gris:          #808080;   /* éléments tertiaires, notes */
    --marine-fonce:  #16233D;   /* pied de page */

    /* ---- Rôles ---- */
    --border-card:   #D7E1EA;   /* bordure fine des cartes */
    --text-link:       var(--bleu);
    --text-link-hover: var(--cyan);

    /* ---- Polices ---- */
    --font-display: "Aptos", "Calibri", "Arial", sans-serif;
    --font-body:    "Aptos", "Calibri", "Arial", sans-serif;
    --tracking-eyebrow: 0.18em;   /* interlettrage des surtitres */

    /* ---- Ombres ---- */
    --ombre-carte:  0 2px 10px rgba(28, 43, 74, 0.05);
    --ombre-survol: 0 10px 28px rgba(28, 43, 74, 0.13);

    /* ---- Alias historiques (compatibilité) ---- */
    --gris-texte:  var(--texte);
    --largeur-max: 1240px;   /* largeur maximale du contenu */
}

/* -------- Remise à zéro de base + confort de lecture -------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   /* les tailles incluent bordures/marges internes */
}

html {
    scroll-behavior: smooth;  /* défilement doux quand on clique le menu */
    font-size: 112.5%;        /* 18 px par défaut au lieu de 16 : toutes les tailles en rem suivent */
}

body {
    font-family: var(--font-body);
    color: var(--texte);
    background-color: var(--blanc-casse);
    line-height: 1.55;
}

/* Surtitre ("eyebrow") : la signature typographique de la charte */
.eyebrow {
    margin-bottom: 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--bronze);
}

.eyebrow.sur-marine { color: var(--or); }

/* Filet sous les titres : l'autre signature de la charte */
.filet {
    width: 90px;
    height: 3px;
    border: 0;
    background: var(--bronze);
    margin: 1.25rem 0 0;
}

.filet.sur-marine { background: var(--or); }

/* Icônes en ligne : elles héritent de la couleur du texte (currentColor) */
.ico {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
}

/* Page d'accueil (body.home) : le contenu prend toute la largeur */
body.home section {
    max-width: none;
    padding-left: clamp(1.25rem, 5vw, 5rem);
    padding-right: clamp(1.25rem, 5vw, 5rem);
}

/* =========================================================
   EN-TÊTE + MENU (barre fixée en haut)
   ========================================================= */
header {
    position: sticky;   /* la barre reste visible en défilant */
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.5rem clamp(1.25rem, 4vw, 3.5rem);     /* grand en haut de page */
    background-color: var(--marine);
    border-bottom: 1px solid rgba(201, 160, 90, 0.28);   /* liseré or */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    transition: padding 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

/* Page défilée : bandeau compact, verre dépoli, ombre plus marquée.
   La classe .reduit est posée par components.js (logo réduit au défilement,
   grand de nouveau seulement en haut de page). */
header.reduit {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    background-color: rgba(28, 43, 74, 0.88);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;   /* le logo est un lien, mais sans soulignement */
}

.logo img {
    height: 62px;            /* grand logo en haut de page */
    width: auto;             /* largeur proportionnelle */
    display: block;
    transition: height 0.35s ease;
}

header.reduit .logo img {
    height: 30px;            /* miniature quand la page est défilée */
}

/* Bouton hamburger : visible seulement sur mobile (voir @media plus bas) */
.burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(201, 160, 90, 0.45);
    border-radius: 10px;
    cursor: pointer;
    z-index: 40;
    transition: background-color 0.2s, border-color 0.2s;
}
.burger:hover { background: rgba(201, 160, 90, 0.18); }
.burger span {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 2px;
    background: var(--or);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
header.menu-ouvert .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
header.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
header.menu-ouvert .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* Texte réservé au SEO / lecteurs d'écran (invisible à l'écran) */
.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;
}

nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.9rem, 2.2vw, 1.75rem);
}

nav a {
    color: var(--blanc);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

nav a:hover {
    color: var(--or);
    border-bottom-color: var(--or);
}

/* Le lien de la page courante */
nav a[aria-current="page"] {
    color: var(--or);
    border-bottom-color: var(--or);
}

/* Bouton « Me contacter » du menu (contour or) */
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--or);
    border-bottom: 1px solid var(--or);
    border-radius: 6px;
    color: var(--or);
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

.nav-cta:hover {
    background-color: var(--or);
    color: var(--marine);
    border-color: var(--or);
}

/* --- Menu déroulant « Domaines d'intervention » --- */
.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background-color: var(--marine);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    padding: 0.4rem 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 30;
}

/* Au survol (ou focus clavier) du groupe : le menu apparaît */
.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-menu a {
    padding: 0.55rem 1.25rem;
    border-bottom: none;
    white-space: nowrap;
}

.nav-menu a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--or);          /* même or que le reste de l'en-tête */
    border-bottom: none;
}

/* =========================================================
   SECTION ACCUEIL (HERO) — bandeau d'accueil en dégradé
   ========================================================= */
#accueil {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    background-color: var(--marine);
    color: var(--blanc);
    overflow: hidden;
    padding: 0;                /* les colonnes gèrent leur propre marge */
}

/* L'emblème en filigrane, très discret */
.hero-filigrane {
    position: absolute;
    right: -90px;
    top: -40px;
    height: 520px;
    opacity: 0.07;
    pointer-events: none;
}

.hero-texte {
    position: relative;
    padding: clamp(3rem, 6vw, 5.25rem) clamp(1.25rem, 4vw, 3.5rem);
}

#accueil h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--blanc);
    text-wrap: pretty;
}

.baseline {
    margin-top: 1.6rem;
    max-width: 520px;
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.55;
    color: var(--gris-bleute);
}

.baseline strong {
    color: var(--blanc);
    font-weight: 600;
}

/* --- Boutons du héros --- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.1rem;
}

.btn-or,
.btn-contour {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.875rem 1.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-or {
    background-color: var(--or);
    color: var(--marine);
}

.btn-or:hover { background-color: var(--bronze-clair); }

.btn-contour {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--blanc);
}

.btn-contour:hover {
    border-color: var(--or);
    color: var(--or);
}

/* --- Les typologies de clients en pastilles sous le héros --- */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 2.75rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    list-style: none;
}

.hero-chips li {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--gris-bleute);
    color: var(--gris-bleute);
}

/* --- La photo, à droite --- */
.hero-photo {
    position: relative;
    min-width: 0;
    min-height: 560px;
    overflow: hidden;
}

.hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: saturate(0.85);
}


/* =========================================================
   MISE EN PAGE COMMUNE DES SECTIONS
   ========================================================= */
section {
    max-width: var(--largeur-max);
    margin: 0 auto;      /* centre le bloc horizontalement */
    padding: 4rem 2rem;
}

section h2 {
    font-family: var(--font-display);
    color: var(--bleu);
    font-size: clamp(1.6rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 3px solid var(--bronze);   /* le filet de la charte */
    display: inline-block;
    text-wrap: pretty;
}

/* Titres de pôles (Innovation / Tech) */
section h3 {
    color: var(--bleu);
    font-size: 1.4rem;
    margin: 2.5rem 0 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   CARTES DE SERVICE (aspect moderne "tech")
   ========================================================= */
/* La grille : autant de colonnes que la largeur le permet.
   Chaque carte fait au moins 300px ; en dessous, on passe à
   une seule colonne (adaptation mobile automatique). */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
    align-items: start;
}

/* Variante « serrée » : bande de 4 cartes (Biotech, Formation).
   Rythme imposé — 4 de front sur grand écran, 2 × 2 sur portable
   et tablette, 1 par ligne sur mobile — pour ne jamais laisser
   une carte orpheline en bout de ligne. */
.cards.serre { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1240px) {
    .cards.serre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .cards.serre { grid-template-columns: minmax(0, 1fr); }
}

article {
    background-color: var(--blanc);
    border: 1px solid #e6e2da;
    border-left: 4px solid var(--couleur, var(--cyan));   /* liseré = couleur du domaine */
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 8px rgba(28, 43, 74, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(28, 43, 74, 0.12);
}

/* Icône duotone en tête de carte (pages de domaine) */
.card-ico {
    display: block;
    width: 36px;
    height: 36px;
    color: var(--couleur, var(--cyan));   /* couleur du domaine */
    margin-bottom: 0.75rem;
}

article h4 {
    color: var(--marine);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

article p {
    margin-bottom: 0.75rem;
}

article ul {
    list-style: none;   /* on retire les puces par défaut... */
}

article ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.35rem;
}

article ul li::before {
    content: "→";        /* ...et on met une flèche "tech" à la place */
    position: absolute;
    left: 0;
    color: var(--couleur, var(--cyan));
    font-weight: 700;
}

/* --- Carte « votre besoin n'est pas listé » ---------------------
   Dernière carte de la grille .cards : même gabarit que les autres,
   mais bordure pointillée (registre "ouvert") et liseré or (appel à
   l'action). C'est un lien : toute la carte est cliquable. */
.carte-besoin {
    display: block;
    background-color: var(--blanc);
    border: 1px dashed var(--bronze-clair);
    border-left: 4px solid var(--or);
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 2px 8px rgba(28, 43, 74, 0.05);
    color: var(--texte);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.carte-besoin:hover {
    transform: translateY(-3px);
    border-color: var(--or);
    box-shadow: 0 8px 22px rgba(28, 43, 74, 0.12);
}

.carte-besoin .card-ico {
    color: var(--or);   /* seule carte dont l'icône est en or */
}

.carte-besoin h4 {
    color: var(--marine);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.carte-besoin p {
    margin-bottom: 0.75rem;
    color: var(--texte);
}

.carte-besoin .lien-fleche {
    margin-top: 0;
}

.carte-besoin:hover .lien-fleche { color: var(--cyan); }

/* =========================================================
   MES CLIENTS — étiquettes ("chips")
   ========================================================= */
/* Section sur fond marine (clients, bandeau contact) */
.section-marine {
    position: relative;
    background-color: var(--marine);
    color: var(--blanc);
    overflow: hidden;
}

.section-marine h2 {
    color: var(--blanc);
    border-bottom: none;
    margin-bottom: 0;
}

.section-marine .filigrane {
    position: absolute;
    right: -70px;
    bottom: -140px;
    height: 420px;
    opacity: 0.07;
    pointer-events: none;
}

.section-marine > * { position: relative; }   /* au-dessus du filigrane */

/* Les 5 typologies en tuiles */
#clients ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.125rem;
    margin-top: 2.375rem;
}

#clients li {
    padding: 1.375rem 1.25rem;
    border: 1px solid rgba(201, 160, 90, 0.35);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.03);
}

#clients li .ico {
    width: 26px;
    height: 26px;
    color: var(--or);
}

#clients li span {
    display: block;
    margin-top: 0.875rem;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--blanc);
}

/* =========================================================
   CONTACT
   ========================================================= */
#contact ul {
    list-style: none;
    margin-top: 1rem;
}

#contact li {
    margin-bottom: 0.5rem;
}

#contact a {
    color: var(--bleu);
    font-weight: 600;
}

#contact a:hover {
    color: var(--cyan);
}

/* =========================================================
   COMPOSANTS PARTAGÉS (<site-header> / <site-footer>)
   "display: contents" fait disparaître la balise personnalisée
   de la mise en page : le <header>/<footer> qu'elle contient se
   comporte comme s'il était directement dans la page.
   ========================================================= */
site-header, site-footer {
    display: contents;
}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
footer {
    background-color: var(--marine-fonce);
    color: var(--gris-bleute);
    font-size: 1rem;
}

.footer-grille {
    max-width: var(--largeur-max);
    margin: 0 auto;
    padding: 3.25rem clamp(1.25rem, 4vw, 3.5rem) 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
}

.footer-logo {
    height: 36px;
    display: block;
    margin-bottom: 1.125rem;
}

/* Les intitulés de colonne : petits, dorés, très espacés */
.footer-titre {
    margin-bottom: 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--or);
}

.footer-desc {
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 0.85rem;
}

.footer-lieu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    line-height: 1.5;
}

.footer-lieu .ico {
    width: 16px;
    height: 16px;
    color: var(--or);
}

.footer-col ul {
    list-style: none;
}

/* Pied de page sur écrans étroits : deux colonnes, puis une seule */
@media (max-width: 900px) {
    .footer-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
    .footer-grille > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .footer-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Me contacter / LinkedIn : picto doré devant le lien, comme « Basé à Lyon » */
.footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-contact .ico {
    width: 16px;
    height: 16px;
    color: var(--or);
}

.footer-col li {
    margin-bottom: 0.4rem;
}

.footer-col a {
    color: var(--blanc);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: var(--or);
}

.footer-bas {
    border-top: 1px solid rgba(148, 111, 74, 0.55);   /* filet bronze */
    text-align: center;
    padding: 1.25rem clamp(1.25rem, 4vw, 3.5rem);
    font-size: 0.9375rem;
}

/* =========================================================
   PAGES LÉGALES (mentions légales, charte données)
   ========================================================= */
/* La largeur de lecture est gérée par la classe .lecture de la bande. */

#legal h2 {
    color: var(--bleu);
    font-size: 1.25rem;
    margin: 1.75rem 0 0.5rem;
}

#legal a {
    color: var(--bleu);
}

.legal-note {
    background-color: #fff8e8;
    border-left: 4px solid var(--or);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.legal-maj {
    margin-top: 2rem;
    color: var(--gris);
    font-size: 0.9rem;
}

.legal-retour {
    margin-top: 2.5rem;
    font-weight: 600;
}

/* =========================================================
   DOMAINES D'INTERVENTION (cartes vers pages dédiées)
   ========================================================= */
/* Couleur propre à chaque domaine (icône duotone + accents de la carte) */
#numerique { --couleur: #0D8FC9; }  /* cyan */
#biotech   { --couleur: #946F4A; }  /* bronze */
#formation { --couleur: #013485; }  /* bleu */

.domaine-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.domaine-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: var(--blanc);
    border: 1px solid var(--border-card);
    border-left: 4px solid var(--couleur);   /* liseré couleur du domaine */
    border-radius: 6px;
    padding: 1.875rem 1.75rem 1.625rem;
    text-decoration: none;
    color: var(--texte);
    box-shadow: var(--ombre-carte);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    scroll-margin-top: 90px;   /* l'ancre ne passe pas sous le header fixe */
}

.domaine-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}

/* Icône DUOTONE : deux tons de la couleur du domaine (aplat clair + tracé) */
.domaine-ico {
    display: block;
    line-height: 0;          /* supprime l'espace fantôme sous le SVG */
    color: var(--couleur);
    margin-bottom: 0.625rem;
}
.domaine-ico svg {
    width: 34px;
    height: 34px;
    display: block;
}

.domaine-card h3 {
    font-family: var(--font-display);
    color: var(--bleu);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.625rem;    /* annule la marge haute héritée de "section h3" */
}

.domaine-card > p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
}

/* Les 3 sous-services listés dans la carte, avec une coche colorée */
.domaine-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}

.domaine-points li {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    font-size: 0.9375rem;
    line-height: 1.45;
}

.domaine-points .ico {
    color: var(--couleur);
    margin-top: 0.15em;
}

.domaine-lien {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    color: var(--bleu);
    font-weight: 600;
    font-size: 0.9375rem;
}
.domaine-card:hover .domaine-lien {
    color: var(--couleur);
}

/* L'ampoule "Formation" qui s'éclaire au survol de sa carte */
.ico-ampoule {
    transition: color 0.3s, filter 0.3s;
}
#formation:hover .ico-ampoule {
    color: #FFD23F;
    filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.9));
}

/* Cartes d'expertise de l'accueil : grand visuel illustré en tête.
   La couleur du domaine (--couleur) vient des ids #numerique, #biotech, #formation. */
.expertise-card {
    display: flex;
    flex-direction: column;
    background-color: var(--blanc);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--texte);
    box-shadow: var(--ombre-carte);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
    scroll-margin-top: 90px;   /* l'ancre ne passe pas sous le header fixe */
}
.expertise-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ombre-survol);
}

.expertise-visuel {
    position: relative;
    height: 170px;
    overflow: hidden;
    color: var(--couleur);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--couleur) 14%, #fff),
        color-mix(in srgb, var(--couleur) 4%, #fff));
}
.expertise-dessin {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
}
.expertise-card:hover .expertise-dessin {
    transform: scale(1.08) rotate(-1deg);
}

/* Pictogramme posé sur le bord bas du visuel, comme un onglet */
.expertise-ico {
    position: absolute;
    left: 1.25rem;
    bottom: -1px;
    width: 52px;
    height: 52px;
    padding: 11px;
    background: var(--blanc);
    border-radius: 12px 12px 0 0;
    color: var(--couleur);
    line-height: 0;
}
.expertise-ico svg {
    display: block;
    width: 100%;
    height: 100%;
}

.expertise-corps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    padding: 1.25rem 1.5rem 1.5rem;
}
.expertise-corps h3 {
    font-family: var(--font-display);
    color: var(--bleu);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
}
.expertise-corps > p {
    margin-bottom: 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
}

/* Les 3 sous-services, en puces arrondies teintées */
.expertise-points {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
    padding: 0;
}
.expertise-points li {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    color: var(--couleur);
    background: color-mix(in srgb, var(--couleur) 10%, #fff);
}

.expertise-card .domaine-lien .ico {
    transition: transform 0.25s ease;
}
.expertise-card:hover .domaine-lien .ico {
    transform: translateX(5px);
}

/* =========================================================
   PAGE « QUI SUIS-JE »
   ========================================================= */
.apropos-grille {
    display: grid;
    grid-template-columns: 300px 1fr;   /* photo | texte */
    gap: 3rem;
    align-items: start;
}

/* Emplacement de la photo (en attendant la vraie image) */
.portrait-placeholder {
    aspect-ratio: 3 / 4;
    background-color: #eceae4;
    border: 2px dashed var(--bronze);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bronze);
    font-style: italic;
    text-align: center;
    padding: 1rem;
}

/* Style de la vraie photo, une fois ajoutée */
.portrait img {
    width: 100%;
    /* Sans cette ligne, l'attribut height="1000" du HTML s'applique tel quel
       et etire la photo (300 x 1000 au lieu de 300 x 300). */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(28, 43, 74, 0.18);
    display: block;
}

.surtitre {
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

#apropos h1 {
    color: var(--marine);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.accroche {
    font-size: 1.25rem;
    color: var(--bleu);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

#apropos h2 {
    color: var(--marine);
    font-size: 1.35rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--or);
    display: inline-block;
}

.atouts {
    list-style: none;
}

.atouts li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.6rem;
}

.atouts li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-weight: 700;
}

/* Sous-titres de la page « Qui suis-je » */
#apropos h3 {
    color: var(--bleu);
    font-size: 1.15rem;
    margin: 2rem 0 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Respiration entre les paragraphes des zones de texte suivi */
.apropos-texte > p,
#legal > p,
.band.lecture > p {
    margin-bottom: 1rem;
}

/* Parcours en deux colonnes (expériences | formation) */
.parcours-grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 2.5rem 3.5rem;
    margin-top: 0.5rem;
}

/* --- Frise chronologique (expériences / formation) --- */
.timeline {
    list-style: none;
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    border-left: 2px solid #ddd8cf;
}

.timeline li {
    position: relative;
    padding-bottom: 1.5rem;
}

/* Le point sur la ligne verticale */
.timeline li::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 6px);
    top: 0.45rem;
    width: 10px;
    height: 10px;
    background-color: var(--cyan);
    border: 2px solid var(--blanc-casse);
    border-radius: 50%;
}

.tl-date {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bronze);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tl-titre {
    display: block;
    font-weight: 700;
    color: var(--marine);
}

.tl-lieu {
    display: block;
    font-size: 0.95rem;
    color: #6b7280;
}

.timeline p {
    margin-top: 0.35rem;
}

.apropos-cta {
    margin-top: 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--marine);
}

.apropos-cta a {
    color: var(--bleu);
    text-decoration: none;
    border-bottom: 2px solid var(--cyan);
}

.apropos-cta a:hover {
    color: var(--cyan);
}

.apropos-social {
    margin-top: 1.25rem;
}

/* Appels à l'action placés sous la photo : compacts et alignés sur sa largeur */
.portrait .apropos-cta {
    margin-top: 1.5rem;
    font-size: 1rem;
}

.portrait .apropos-social {
    margin-top: 0.9rem;
}

.portrait .btn-mail {
    justify-content: center;
    width: 100%;
}

.btn-linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: #0A66C2;   /* bleu officiel LinkedIn */
    color: #fff;
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-linkedin:hover {
    background-color: #004182;
}

.li-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background-color: #fff;
    color: #0A66C2;
    border-radius: 4px;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
}

/* =========================================================
   PAGE CONTACT
   ========================================================= */
.contact-grille {
    display: grid;
    grid-template-columns: 1fr 1.3fr;   /* coordonnées | carte */
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.btn-mail {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background-color: var(--bleu);
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-mail:hover {
    background-color: var(--cyan);
}

.contact-liste {
    list-style: none;
    margin-top: 1.75rem;
}

.contact-liste li {
    margin-bottom: 1rem;
}

.contact-label {
    display: block;
    font-weight: 700;
    color: var(--marine);
}

.contact-liste a {
    color: var(--bleu);
}

.carte iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(28, 43, 74, 0.15);
}

.carte-lien {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.carte-lien a {
    color: var(--bleu);
}

/* =========================================================
   PAGES DE DOMAINE (numerique / biotech / formation)
   ========================================================= */
.domaine-page {
    max-width: 860px;   /* colonne de lecture confortable */
}

.domaine-page .surtitre {
    color: var(--couleur);
}

.domaine-page h1 {
    color: var(--marine);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
    border-bottom: 4px solid var(--couleur);
    display: inline-block;
    padding-bottom: 0.3rem;
}

.lead {
    font-size: 1.2rem;
    color: var(--bleu);
    margin-bottom: 1rem;
}

.domaine-page h2 {
    color: var(--marine);
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.faq details {
    border: 1px solid #e6e2da;
    border-radius: 10px;
    padding: 0.25rem 1rem;
    margin-bottom: 0.75rem;
    background-color: var(--blanc);
}

.faq summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--marine);
    padding: 0.6rem 0;
}

.faq details p {
    padding: 0.25rem 0 0.6rem;
}

/* Étiquette de domaine devant une question, sur la FAQ de l'accueil :
   elle indique de quelle page d'expertise la question provient et y
   renvoie. La couleur est celle du domaine (--couleur, posée par le
   script à partir de la page source). */
.faq-source {
    display: inline-block;
    margin-right: 0.55rem;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--couleur, var(--cyan)) 12%, var(--blanc));
    color: var(--couleur, var(--cyan));
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: 0.08em;
}

.faq-source:hover {
    background-color: color-mix(in srgb, var(--couleur, var(--cyan)) 22%, var(--blanc));
}

/* Repli affiché si les pages d'expertise n'ont pas pu être lues */
.faq-repli {
    color: var(--gris);
}

.cta-bloc {
    margin-top: 2.5rem;
    padding: 1.75rem;
    background-color: color-mix(in srgb, var(--couleur) 8%, var(--blanc));
    border-left: 4px solid var(--couleur);
    border-radius: 12px;
}

.cta-bloc p {
    font-weight: 600;
    color: var(--marine);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* =========================================================
   PAGE RESSOURCES (liste + filtres par tag)
   ========================================================= */
/* --- Onglets de catégorie --- */
.res-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.75rem 0 2rem;
}

.res-cat-btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--marine);
    background-color: transparent;
    border: 2px solid var(--marine);
    border-radius: 30px;
    padding: 0.5rem 1.4rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.res-cat-btn:hover { background-color: rgba(28, 43, 74, 0.08); }

.res-cat-btn.is-active {
    background-color: var(--marine);
    color: var(--blanc);
}

/* --- Barre de tags --- */
.res-filtres-titre {
    font-weight: 700;
    color: var(--marine);
    margin-bottom: 0.6rem;
}

.res-compteur {
    font-weight: 400;
    color: #6b7280;
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.res-tags-barre {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Un tag (dans la barre de filtres ET dans les cartes) */
.res-tag {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bleu);
    background-color: rgba(13, 143, 201, 0.1);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 0.3rem 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

/* Quand le tag est un lien (aperçu d'accueil, pages de contenu) */
a.res-tag {
    text-decoration: none;
    display: inline-block;
}

.res-tag:hover {
    background-color: rgba(13, 143, 201, 0.22);
}

.res-tag.is-active {
    background-color: var(--bleu);
    color: var(--blanc);
}

.res-reset {
    margin-top: 0.9rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bronze);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* --- La liste des contenus --- */
.res-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(430px, 100%), 1fr));
    gap: 1.15rem;
    margin-top: 2rem;
}

.res-card {
    display: flex;
    flex-direction: row;      /* vignette à gauche, texte à droite */
    /* La règle générique « article » applique un padding de 1,5rem :
       il allongerait la carte et empêcherait la vignette d'aller à ras
       bord. La carte gère elle-même ses marges, dans .res-body. */
    padding: 0;
    background-color: var(--blanc);
    border: 1px solid #e6e2da;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(28, 43, 74, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.res-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(28, 43, 74, 0.14);
}

/* Vignette */
.res-media {
    display: block;
    flex: none;
    width: 104px;             /* petite vignette carrée, pas un bandeau */
    aspect-ratio: 1 / 1;
    align-self: center;
    margin: 0.9rem 0 0.9rem 0.9rem;
    border-radius: 10px;
    background-color: var(--c);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.res-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Vignette de remplacement quand il n'y a pas d'image */
.res-media-vide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.4rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.62rem;
    text-align: center;
}

.res-body {
    padding: 0.95rem 1.15rem 1rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.res-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
    font-size: 0.72rem;
    color: #6b7280;
    margin-bottom: 0.4rem;
}

.res-cat {
    background-color: var(--c);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.12rem 0.5rem;
    border-radius: 4px;
    font-size: 0.62rem;
}

.res-card h3 {
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.res-card h3 a {
    color: var(--marine);
    text-decoration: none;
}

.res-card h3 a:hover { color: var(--c); }

.res-chapo {
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 0.65rem;
    /* Le chapô est coupé à trois lignes : les cartes gardent des
       hauteurs comparables, quelle que soit la longueur du résumé. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.res-card .res-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
}

.res-lien-externe {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bleu);
}

.res-vide {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    color: #6b7280;
    font-style: italic;
}

/* =========================================================
   PAGES DE CONTENU (article / actualité)
   ========================================================= */
.post {
    max-width: 780px;          /* colonne de lecture confortable */
    margin: 0 auto;
    padding: 3rem 2rem;
}

.post-fil {
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.post-fil a {
    color: var(--bleu);
    text-decoration: none;
}

.post .surtitre {
    color: var(--couleur);
}

.post h1 {
    color: var(--marine);
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.75rem;
}

/* Les tags des pages de contenu sont des liens (pas des boutons) */
.post-tags .res-tag {
    text-decoration: none;
    display: inline-block;
}

.post-image {
    width: 100%;
    height: auto;              /* garde les proportions malgré l'attribut height */
    border-radius: 12px;
    margin-bottom: 1.75rem;
    display: block;
}

.post-corps h2 {
    color: var(--marine);
    font-size: 1.4rem;
    margin: 2rem 0 0.75rem;
}

.post-corps p,
.post-corps ul {
    margin-bottom: 1rem;
}

.post-corps ul {
    padding-left: 1.5rem;
}

/* Listes numérotées : le numéro s'aligne sur le bord gauche du texte (comme
   la flèche des listes à puces), au lieu de dépasser dans la marge. */
.post-corps ol {
    list-style: none;
    counter-reset: etape;
    padding-left: 0;
    margin-bottom: 1rem;
}

.post-corps ol li {
    counter-increment: etape;
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.35rem;
}

.post-corps ol li::before {
    content: counter(etape) ".";
    position: absolute;
    left: 0;
    color: var(--couleur, var(--cyan));
    font-weight: 700;
}

.post-corps blockquote {
    border-left: 4px solid var(--couleur);
    background-color: rgba(0, 0, 0, 0.03);
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
}

/* --- Encart « Ce qu'il faut retenir » (articles) : en tête de page, à la place du chapô --- */
.post-retenir {
    background-color: var(--blanc);
    border: 1px solid #e6e2da;
    border-top: 4px solid var(--couleur);
    border-radius: 12px;
    padding: 1.25rem 1.5rem 0.5rem;
    margin: 0 0 2rem;
    box-shadow: 0 2px 10px rgba(28, 43, 74, 0.06);
}

.post-retenir h2 {
    color: var(--marine);
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.9rem;
}

.post-retenir ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-retenir li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.85rem;
    overflow-wrap: anywhere;
}

.post-retenir li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--couleur);
    font-weight: 800;
}

.post-partage {
    margin: 2.5rem 0 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e6e2da;
}

/* --- Bloc « infos pratiques » des actualités --- */
.actu-infos {
    list-style: none;
    background-color: var(--blanc);
    border: 1px solid #e6e2da;
    border-left: 4px solid var(--couleur);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.actu-infos li {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem 0;
}

.actu-label {
    min-width: 130px;
    font-weight: 700;
    color: var(--marine);
}

/* Pas de puce « → » sur ces lignes. La règle générique
   « article ul li::before » place une flèche en position absolue à
   gauche, et « .actu-infos li » supprime le retrait qui lui laissait
   la place : sans ce correctif, la flèche se superpose à la première
   lettre du libellé (Date, Type, Lieu…). */
.actu-infos li::before {
    content: none;
}

/* --- Grille logistique à icônes (fiches Formation, legal design) ---
   Réponse visuelle immédiate aux questions pratiques (date, horaires,
   lieu, durée, format), pour remplacer un paragraphe de texte. Même
   correctif de puce « → » que .actu-infos, plus une annulation du
   retrait générique de « .post-corps ul » puisque cette grille n'a pas
   de puces. */
.info-logistique {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
    padding-left: 0;
}

.info-logistique li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background-color: var(--blanc);
    border: 1px solid #e6e2da;
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.info-logistique li::before {
    content: none;
}

.info-logistique .ico {
    width: 22px;
    height: 22px;
    color: var(--couleur);
    margin-top: 0.15em;
}

.il-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--marine);
}

.il-valeur {
    display: block;
}

/* =========================================================
   BANDES PLEINE LARGEUR
   Principe de la maquette : on alterne les fonds
   marine → blanc cassé → crème → marine…
   Le fond couvre toute la largeur, le contenu reste centré
   grâce au padding calculé ci-dessous (pas besoin d'un
   conteneur intérieur supplémentaire).
   ========================================================= */
.band {
    max-width: none;
    margin: 0;
    padding: clamp(2.75rem, 5vw, 4.5rem)
             max(clamp(1.25rem, 4vw, 3.5rem), calc((100% - var(--largeur-max)) / 2));
}

/* Colonne de lecture confortable à l'intérieur d'une bande */
.band.lecture > * { max-width: 860px; }

/* Puces des pages de lecture : à l'aplomb du texte des paragraphes, pas en retrait à gauche
   (le reset « * { padding: 0 } » les laissait déborder dans la marge). */
.band.lecture ul,
.band.lecture ol {
    padding-left: 1.1rem;
    margin-bottom: 1rem;
}

.band.lecture li {
    margin-bottom: 0.35rem;
}

/* --- Bandeau de titre en tête de page (sur marine) --- */
.page-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--blanc);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: pretty;
}

.page-hero .lead {
    margin-top: 1.5rem;
    max-width: 640px;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--gris-bleute);
}

.page-hero .lead strong { color: var(--blanc); }

/* Fond crème : sert à alterner les sections claires */
.section-creme { background-color: var(--creme); }

/* --- Bloc en deux colonnes : image | texte --- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    padding: 0 !important;      /* les colonnes gèrent leur marge */
    max-width: none !important;
}

.split-media {
    position: relative;
    min-width: 0;
    min-height: 480px;
    overflow: hidden;
    background-color: #dcd5c4;
}

.split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Crédit photo, en bas à gauche de l'image.
   À renseigner dès que les métadonnées de l'image (EXIF Artist /
   XMP dc:creator) mentionnent un auteur — c'est le respect du
   droit moral de paternité. */
.credit-photo {
    position: absolute;
    left: 0.75rem;
    bottom: 0.6rem;
    z-index: 2;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.92);
    background-color: rgba(0, 0, 0, 0.38);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

/* Emplacement d'image en attente (même principe que le portrait) */
.media-attente {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    color: var(--bronze);
    font-style: italic;
    font-size: 0.95rem;
    border: 2px dashed rgba(148, 111, 74, 0.5);
}

.split-texte {
    padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
}

/* --- Liste d'atouts avec pastille bronze --- */
.atouts-liste {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-top: 2rem;
}

.atouts-liste li {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    font-size: 1rem;
    line-height: 1.55;
}

.atouts-liste .ico {
    width: 20px;
    height: 20px;
    color: var(--bronze);
    margin-top: 0.15em;
}

.atouts-liste strong { color: var(--bleu); }

/* --- Encadré de mise en avant (Callout du design system) --- */
.callout {
    margin-top: 1.875rem;
    padding: 1.125rem 1.375rem;
    background-color: rgba(148, 111, 74, 0.08);
    border-left: 3px solid var(--bronze);
    border-radius: 0 6px 6px 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--texte);
}

/* --- Lien fléché discret --- */
.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--bleu);
    text-decoration: none;
}

.lien-fleche:hover { color: var(--cyan); }

/* --- En-tête de section avec lien à droite --- */
.section-tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.section-tete .lien-fleche { margin-top: 0; white-space: nowrap; }

/* --- FAQ en deux colonnes (titre à gauche, questions à droite) --- */
.faq-split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3.5rem;
    align-items: start;
}

/* --- Bandeau contact sur marine --- */
.contact-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}

.contact-band h2 {
    color: var(--blanc);
    border-bottom: none;
    margin-bottom: 0;
    font-size: clamp(1.7rem, 3.4vw, 2.375rem);
    max-width: 640px;
}

.contact-band p {
    max-width: 520px;
    color: var(--gris-bleute);
    font-size: 1rem;
    line-height: 1.6;
}

.contact-band-actions {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    min-width: min(300px, 100%);
}

.contact-band-actions .btn-or,
.contact-band-actions .btn-contour {
    justify-content: center;
}

.contact-band-adresse {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gris-bleute);
}

/* =========================================================
   ADAPTATION MOBILE (étape 5, déjà posée ici)
   Sur petits écrans, on empile l'en-tête verticalement.
   ========================================================= */
@media (max-width: 900px) {
    /* Les blocs à deux colonnes s'empilent */
    #accueil,
    .split,
    .faq-split {
        grid-template-columns: 1fr;
    }
    .hero-photo { min-height: 320px; order: -1; }   /* la photo passe au-dessus */
    .hero-filigrane { display: none; }              /* sinon l'emblème recouvre le visage */
    .split-media { min-height: 300px; }
}

/* ---------- Menu hamburger : mobile uniquement ---------- */
@media (max-width: 820px) {
    header { flex-wrap: nowrap; padding-top: 0.9rem; padding-bottom: 0.9rem; }
    header.reduit { padding-top: 0.55rem; padding-bottom: 0.55rem; }
    .logo img { height: 40px; }
    header.reduit .logo img { height: 28px; }
    .burger { display: block; }

    /* Le menu devient un panneau plein écran sous la barre */
    nav {
        position: fixed;
        inset: 0;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.25rem;
        padding: 6.5rem 1.75rem 2rem;
        background: linear-gradient(160deg, var(--marine) 0%, var(--marine-fonce) 100%);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        z-index: 35;
    }
    header.menu-ouvert nav { opacity: 1; visibility: visible; transform: none; }
    header.menu-ouvert .logo,
    header.menu-ouvert .burger { position: relative; z-index: 40; }
    /* le flou créerait un bloc de référence pour le menu fixe : on le retire menu ouvert */
    header.menu-ouvert { background-color: var(--marine); -webkit-backdrop-filter: none; backdrop-filter: none; }

    nav > a, .nav-dropdown-trigger {
        font-size: 1.35rem;
        font-weight: 600;
        padding: 0.85rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    nav a:hover, nav a[aria-current="page"] { border-bottom-color: rgba(201, 160, 90, 0.5); }

    /* Sous-menu « Expertises » : toujours déplié, en retrait */
    .nav-dropdown { display: block; }
    .nav-menu {
        position: static;
        min-width: 0;
        background: none;
        box-shadow: none;
        padding: 0 0 0.5rem 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-left: 2px solid rgba(201, 160, 90, 0.5);
        margin: 0.25rem 0 0.5rem;
    }
    .nav-menu a { font-size: 1.05rem; font-weight: 500; padding: 0.55rem 0.75rem; color: var(--gris-bleute); }

    .nav-cta {
        margin-top: 1.5rem;
        justify-content: center;
        font-size: 1.05rem;
        padding: 0.9rem 1.1rem;
    }
    nav > a.nav-cta { border-bottom: 1px solid var(--or); }
}

/* Page figée derrière le menu ouvert */
html.menu-ouvert { overflow: hidden; }

@media (max-width: 640px) {
    .apropos-grille {
        grid-template-columns: 1fr;   /* photo au-dessus, texte en dessous */
        gap: 1.5rem;
    }
    .portrait {
        max-width: 260px;
    }
    .contact-grille {
        grid-template-columns: 1fr;   /* carte sous les coordonnées */
    }
    #accueil {
        padding: 4rem 1.25rem;
    }
    section {
        padding: 3rem 1.25rem;
    }
}


/* =========================================================
   ANIMATIONS
   Principe : discrètes, courtes, jamais au détriment de la
   lisibilité. Rien ne bouge sous les yeux du lecteur pendant
   qu'il lit — les animations accompagnent uniquement une action
   (ouvrir une question) ou une arrivée à l'écran.
   Tout est neutralisé si le visiteur a demandé à son système de
   réduire les animations (réglage d'accessibilité).
   ========================================================= */

/* ---------- 1. Ouverture d'une question de la FAQ ---------- */

@keyframes faq-apparition {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* La réponse (tout le contenu du <details> sauf la question) */
.faq details[open] > *:not(summary) {
    animation: faq-apparition 0.5s ease-out both;
}

/* Le chevron remplace le petit triangle par défaut : il pivote
   d'un quart de tour à l'ouverture. */
.faq summary {
    display: flex;
    align-items: flex-start;
    list-style: none;            /* masque le triangle natif */
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: "";
    flex: none;
    width: 0.42rem;
    height: 0.42rem;
    margin: 0.45rem 0.15rem 0 1.25rem;
    margin-left: auto;           /* pousse le chevron à droite */
    border-right: 2px solid var(--couleur, var(--cyan));
    border-bottom: 2px solid var(--couleur, var(--cyan));
    transform: rotate(45deg);    /* pointe vers le bas */
    transition: transform 0.4s ease;
}

.faq details[open] summary::after {
    transform: rotate(-135deg);  /* pointe vers le haut */
}

/* Le cadre de la question réagit doucement au survol */
.faq details {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.faq details:hover {
    border-color: var(--border-card);
    box-shadow: var(--ombre-carte);
}

/* ---------- 2. Apparition des blocs au défilement ----------
   La classe est posée par components.js : sans JavaScript, le
   contenu reste visible normalement. */

.anim-entree {
    opacity: 0;
    transform: translateY(14px);
}

.anim-entree.est-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

/* ---------- 3. Respect du réglage d'accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .anim-entree { opacity: 1; transform: none; }
}



/* <picture> enveloppe désormais les images (pour servir le WebP quand le
   navigateur le sait lire). L'élément doit se comporter comme l'image
   qu'il contient, sinon les mises en page en position absolue cassent. */
.hero-photo picture,
.split-media picture {
    display: contents;
}

.portrait picture {
    display: block;
}


/* Liens statiques du pied de page : visibles uniquement si le JavaScript
   ne s'exécute pas (components.js les remplace sinon). Ils garantissent
   que les moteurs de recherche trouvent toutes les pages. */
.pied-secours {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem);
    background-color: var(--marine-fonce);
}

.pied-secours a {
    color: var(--gris-bleute);
    font-size: 0.875rem;
    text-decoration: none;
}

.pied-secours a:hover { color: var(--or); }

/* Renvoi vers la page d'expertise, dans la FAQ de l'accueil */
.faq-renvoi a {
    color: var(--bleu);
    font-weight: 600;
    text-decoration: none;
}

.faq-renvoi a:hover { color: var(--cyan); }


/* Bloc « Questions fréquentes » à l'intérieur d'un article ou d'une
   actualité : même présentation que les FAQ des pages d'expertise. */
.post-faq {
    margin-top: 3rem;
}

.post-faq h2 {
    margin-bottom: 1.25rem;
}

/* Renvois vers les pages liées, en fin d'article */
.post-liens {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6e2da;
    color: var(--gris);
    font-size: 0.95rem;
}

.post-liens a {
    color: var(--bleu);
    font-weight: 600;
}

/* Sources en fin d'article : corps réduit et teinte discrète, une entrée
   par source. Les renvois du texte (<a href="#src-…">) pointent sur chaque
   entrée, qui se met en évidence à l'arrivée (:target). */
.post-sources {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e6e2da;
    color: var(--gris);
    font-size: 0.85rem;
    line-height: 1.55;
}

.post-sources h2 {
    color: var(--marine);
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
}

.post-sources .sources-date {
    margin: 0 0 0.9rem;
    font-size: 0.8rem;
}

.post-sources ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-sources li {
    margin-bottom: 0.6rem;
    padding: 0.4rem 0 0.4rem 0.9rem;
    border-left: 2px solid var(--couleur, var(--cyan));
    overflow-wrap: anywhere;
    scroll-margin-top: 7rem;
}

.post-sources li::before {
    content: none;             /* pas de flèche : le filet à gauche suffit */
}

.post-sources li:target {
    background-color: rgba(0, 0, 0, 0.04);
}

.post-sources strong {
    display: block;
    color: var(--marine);
    font-weight: 700;
}

.post-sources a {
    color: var(--bleu);
    font-weight: 600;
}


/* =========================================================
   OUTILS DES FICHES : PDF ET FAVORIS
   Boutons ajoutés par components.js sur les articles et les
   actualités, à côté du partage LinkedIn.
   ========================================================= */
.btn-outil {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 0.75rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    background-color: var(--blanc);
    color: var(--bleu);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.btn-outil:hover {
    border-color: var(--or);
    color: var(--marine);
    background-color: color-mix(in srgb, var(--or) 8%, var(--blanc));
}

.astuce-favori {
    margin-top: 0.85rem;
    color: var(--gris);
    font-size: 0.9rem;
}

.astuce-favori kbd {
    padding: 0.1rem 0.4rem;
    border: 1px solid var(--border-card);
    border-bottom-width: 2px;
    border-radius: 4px;
    background-color: var(--blanc);
    color: var(--marine);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ----- Fin de fiche condensée -----
   « À lire aussi », boutons (LinkedIn, PDF, favoris) et appel au contact
   forment un seul ensemble serré : un filet unique, des boutons compacts
   de même hauteur sur une ligne, et l'encadré de contact sur une ligne
   (question à gauche, bouton à droite), qui passe sur deux sous 560 px. */
.post-liens {
    margin-top: 1.75rem;
    padding-top: 1rem;
}

.post-liens + .post-partage,
.post-partage + .cta-bloc,
.cta-bloc + .post-liens {
    margin-top: 1rem;
}

.post-partage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding-top: 0;
    border-top: none;
}

.post-partage .btn-linkedin,
.post-partage .btn-outil {
    margin: 0;
    padding: 0.45rem 0.9rem;
    border: 1px solid transparent;
    font-size: 0.9rem;
    line-height: 1.3;
    gap: 0.45rem;
}

.post-partage .btn-outil { border-color: var(--border-card); }
.post-partage .btn-outil .ico { width: 1em; height: 1em; }
.post-partage .li-icone { width: 18px; height: 18px; font-size: 0.7rem; }
.post-partage .astuce-favori { flex-basis: 100%; margin-top: 0.25rem; }

.cta-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    padding: 1rem 1.25rem;
}

.cta-bloc p {
    margin: 0;
    font-size: 1.02rem;
}

.cta-bloc .btn-mail {
    padding: 0.55rem 1.1rem;
    font-size: 0.95rem;
}

@media (max-width: 560px) {
    .cta-bloc { flex-direction: column; align-items: flex-start; }
}

/* « À lire aussi » en cartes (construites par components.js à partir des
   liens de .post-liens, qui reste dans la page et sert à l'impression). */
.post-liens-remplace { display: none; }

.lire-aussi {
    margin-top: 1.75rem;
    padding-top: 1rem;
    border-top: 1px solid #e6e2da;
}

.lire-label {
    margin-bottom: 0.6rem;
    color: var(--bronze);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.lire-grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}

.lire-carte {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--border-card);
    border-radius: 10px;
    background-color: var(--blanc);
    color: var(--marine);
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.lire-carte:hover {
    border-color: var(--or);
    box-shadow: var(--ombre-carte);
    transform: translateY(-2px);
}

.lire-vign,
.lire-vide {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--creme);
}

/* Le visuel 1200x630 est affiché deux fois plus large que la vignette et
   décalé d'une largeur : seule sa moitié droite (motif ou photo) est visible. */
.lire-vign img,
.res-media img {
    width: 200%;
    max-width: none;
    height: 100%;
    margin-left: -100%;
    object-fit: cover;
    object-position: right center;
}

.lire-texte { display: flex; flex-direction: column; min-width: 0; }

.lire-sur {
    color: var(--gris);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lire-titre {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.3;
}

.lire-carte:hover .lire-titre { color: var(--bleu); }

.lire-aussi + .post-partage { margin-top: 1rem; }
.lire-aussi + .cta-bloc,
.lire-aussi ~ .cta-bloc { margin-top: 2.75rem; }   /* respiration avant l'appel au contact */

/* Barre du haut de fiche : tags à gauche, partage / PDF / favoris à droite
   (déplacés par components.js). Boutons discrets, au ton de la page. */
.post-barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.75rem;
}

.post-barre .post-tags { margin-bottom: 0; }

.post-partage.post-partage-haut {
    margin: 0;
    gap: 0.4rem;
}

.post-partage-haut .btn-linkedin,
.post-partage-haut .btn-outil {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border-card);
    border-radius: 999px;
    background-color: var(--blanc);
    color: var(--gris);
    font-size: 0.82rem;
    font-weight: 600;
    gap: 0.4rem;
}

.post-partage-haut .btn-linkedin:hover,
.post-partage-haut .btn-outil:hover {
    border-color: var(--or);
    background-color: color-mix(in srgb, var(--or) 8%, var(--blanc));
    color: var(--marine);
}

.post-partage-haut .li-icone {
    width: 15px;
    height: 15px;
    background-color: #0A66C2;
    color: #fff;
    border-radius: 3px;
    font-size: 0.6rem;
}

.post-partage-haut .btn-outil .ico { width: 0.95em; height: 0.95em; color: var(--couleur, var(--bleu)); }
.post-partage-haut .astuce-favori { flex-basis: 100%; text-align: right; margin-top: 0.2rem; }

@media print {
    .lire-aussi { display: none; }
    .post-liens-remplace { display: block; }
}

/* Blocs réservés à la version imprimée (logo en tête, source en pied) */
.pour-impression { display: none; }

/* =========================================================
   VERSION IMPRIMÉE / PDF
   Objectif : un document sobre aux couleurs du cabinet, lisible
   en noir et blanc, qui porte l'adresse de la page d'origine.
   ========================================================= */
@media print {
    @page {
        size: A4;
        margin: 18mm 16mm;
    }

    /* Tout ce qui relève de la navigation ou de l'interaction disparaît */
    header,
    footer,
    .pied-secours,
    .post-fil,
    .post-partage,
    .cta-bloc,
    .filigrane,
    .hero-filigrane { display: none !important; }

    body {
        background: #fff;
        color: #1A1A1A;
        font-size: 10.5pt;
        line-height: 1.5;
    }

    .post {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Les animations ne doivent jamais masquer du contenu à l'impression */
    .anim-entree {
        opacity: 1 !important;
        transform: none !important;
    }

    .pour-impression { display: block; }

    .impression-entete {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-bottom: 0.6rem;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #C9A05A;   /* le filet or de la charte */
    }

    .impression-entete img { height: 34px; width: auto; }

    .impression-entete span {
        color: #946F4A;
        font-size: 8.5pt;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    h1 {
        color: #1C2B4A;
        font-size: 19pt;
        line-height: 1.2;
    }

    h2 {
        color: #013485;
        font-size: 13pt;
        margin-top: 1.4rem;
        break-after: avoid;      /* un titre ne reste pas seul en bas de page */
    }

    .surtitre { color: #946F4A; }

    .lead {
        padding-left: 0.9rem;
        border-left: 3px solid #C9A05A;
        font-size: 11.5pt;
    }

    .post-meta { color: #808080; font-size: 9pt; }

    /* Les tags ne servent à rien sur papier : on les allège */
    .post-tags .res-tag {
        border: 1px solid #d7e1ea;
        background: none;
        color: #808080;
        font-size: 8.5pt;
    }

    .actu-infos { border: 1px solid #d7e1ea; break-inside: avoid; }

    blockquote, .post-faq details, figure, img { break-inside: avoid; }

    /* Une question repliée à l'écran doit être lisible sur le papier */
    .faq details > *:not(summary) { display: block !important; }
    .faq summary::after { display: none; }

    /* Un lien imprimé perd son adresse : on la rétablit dans le corps */
    .post-corps a[href^="http"]::after,
    .post-liens a[href^="http"]::after {
        content: " (" attr(href) ")";
        color: #808080;
        font-size: 8.5pt;
        word-break: break-all;
    }

    a { color: #013485; text-decoration: none; }

    .impression-pied {
        margin-top: 2rem;
        padding-top: 0.8rem;
        border-top: 1px solid #d7e1ea;
        color: #808080;
        font-size: 8.5pt;
    }

    .impression-pied strong { color: #1C2B4A; }

    .impression-url { color: #013485; word-break: break-all; }
}


/* =========================================================
   PAGE CONTACT — liste de coordonnées
   ========================================================= */
.contact-liste li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
}

.contact-ico {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    color: var(--bronze);
}

.contact-liste address {
    font-style: normal;   /* <address> est en italique par défaut */
    line-height: 1.5;
}

.contact-secondaire {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.9rem;
    color: var(--bleu);
    text-decoration: none;
    border-bottom: 1px solid var(--border-card);
}

.contact-secondaire:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

/* --- Contrôle anti-robot avant affichage de l'adresse --- */
.anti-robot-note {
    margin: 0.15rem 0 0.5rem;
    color: var(--gris);
    font-size: 0.85rem;
}

.anti-robot label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.92rem;
}

.anti-robot-ligne {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.anti-robot input {
    width: 7rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-card);
    border-radius: 8px;
    background-color: var(--blanc);
    font-family: inherit;
    font-size: 1rem;
    color: var(--texte);
}

.anti-robot input:focus {
    outline: 2px solid var(--cyan);
    outline-offset: 1px;
}

.anti-robot button {
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--bleu);
    border-radius: 8px;
    background-color: var(--bleu);
    color: var(--blanc);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.anti-robot button:hover {
    background-color: var(--cyan);
    border-color: var(--cyan);
}

.anti-robot-erreur {
    margin-top: 0.45rem;
    color: #9B2C2C;
    font-size: 0.88rem;
}

.courriel-affiche {
    font-weight: 600;
    color: var(--bleu);
    word-break: break-word;
}


/* Étiquettes de tag à l'intérieur d'une carte : plus petites que dans
   la barre de filtres, pour ne pas alourdir la carte condensée. */
.res-card .res-tag {
    font-size: 0.72rem;
    padding: 0.18rem 0.6rem;
}

.res-card .res-lien-externe {
    margin-top: 0.6rem;
    font-size: 0.82rem;
}

/* Sur les écrans étroits, la vignette se réduit encore pour laisser
   la place au texte ; en dessous de 380 px elle disparaît, une carte
   à deux colonnes n'étant plus lisible. */
@media (max-width: 520px) {
    .res-media { width: 84px; margin: 0.75rem 0 0.75rem 0.75rem; }
    .res-body { padding: 0.8rem 0.9rem; }
}

@media (max-width: 380px) {
    .res-media { display: none; }
}

/* Adresses e-mail et URL longues : elles passent à la ligne au lieu de déborder */
.post-corps, .actu-infos, .footer-col {
    overflow-wrap: anywhere;
}

/* =========================================================
   LEGAL DESIGN — « Qui est propriétaire ? » (boutons + réponse dépliée)
   ========================================================= */
.qui-choix {
    margin: 1.25rem 0 1.5rem;
    padding: 1.25rem;
    background-color: var(--blanc);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    box-shadow: var(--ombre-carte);
}
.qui-invite {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--bronze);
}
.qui-boutons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
}
.qui-bouton {
    font: inherit;
    font-weight: 600;
    padding: 0.75rem 1rem;
    color: var(--bleu);
    background-color: var(--blanc-casse);
    border: 1px solid var(--border-card);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.qui-bouton:hover { border-color: var(--bleu); }
.qui-bouton:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.qui-bouton[aria-expanded="true"] {
    background-color: var(--marine);
    border-color: var(--marine);
    color: var(--blanc);
}
.qui-reponse {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--blanc-casse);
    border-left: 4px solid var(--or);
    border-radius: 6px;
}
.qui-reponse p { margin: 0; }
/* JavaScript actif : les réponses sont masquées jusqu'au clic */
.qui-actif .qui-reponse { display: none; }
.qui-actif .qui-reponse.ouvert { display: block; animation: qui-apparition 0.25s ease; }
@keyframes qui-apparition { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .qui-actif .qui-reponse.ouvert { animation: none; } }

/* Encadré « Aux anti-IA » (page Mon usage de l'IA) */
.encadre-ia {
    margin: 1.75rem 0;
    padding: 1.5rem 1.75rem;
    background-color: var(--marine);
    color: var(--blanc);
    border-left: 5px solid var(--or);
    border-radius: 10px;
    box-shadow: var(--ombre-carte);
}
.encadre-ia p { margin: 0 0 0.75rem; color: var(--blanc); }
.encadre-ia p:last-child { margin-bottom: 0; }
.encadre-ia .encadre-ia-titre {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--or);
}

/* Lien « Ressources IA » en fin de la page Mon usage de l'IA */
.usage-ia-ressources { margin-top: 1.75rem; font-weight: 600; }
.usage-ia-ressources a { color: var(--bleu); }

/* Le bouton « Me contacter » reste blanc sur bleu dans la page à liens bleus (#legal a) */
#legal .btn-mail,
#legal .btn-mail:hover { color: var(--blanc); }

/* Carrousel « Ils me font confiance » (page Formation) : défilement continu, pause au survol */
.ref-defilant {
    display: flex;
    overflow: hidden;
    margin-top: 1.75rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ref-piste {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 1.25rem;
    padding: 0.5rem 0.625rem;
    margin: 0;
    list-style: none;
    min-width: 100%;
    justify-content: space-around;
    animation: ref-defile var(--ref-duree, 40s) linear infinite;
}
.ref-defilant:hover .ref-piste { animation-play-state: paused; }
@keyframes ref-defile { to { transform: translateX(-100%); } }
.ref-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 11rem;
    padding: 0.875rem 1.25rem;
    background: var(--blanc);
    border: 1px solid var(--border-card);
    border-radius: 10px;
    box-shadow: var(--ombre-carte);
    white-space: nowrap;
}
.ref-logo { height: 2.75rem; width: auto; max-width: 9rem; display: block; object-fit: contain; }
.ref-nom { font-size: 0.8125rem; font-weight: 700; color: var(--bleu); }
.ref-defilant.statique { -webkit-mask-image: none; mask-image: none; }
.ref-defilant.statique .ref-piste { animation: none; justify-content: center; flex-wrap: wrap; }
.ref-defilant.manuel { overflow-x: auto; }
.ref-defilant.manuel .ref-piste { flex-wrap: nowrap; justify-content: flex-start; }
.ref-filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.ref-filtre {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bleu);
    background: var(--blanc);
    border: 1px solid var(--border-card);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ref-filtre:hover { border-color: var(--bleu); }
.ref-filtre:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ref-filtre[aria-pressed="true"] { background: var(--marine); color: var(--blanc); border-color: var(--marine); }
.ref-compte { font-size: 0.75rem; font-weight: 700; opacity: 0.65; }
.ref-noscript { margin-top: 1rem; }

/* Cartes « Quelques exemples de formations » (page Formation) */
.ex-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
}
@media (max-width: 480px) { .ex-grille { grid-template-columns: 1fr; } }
@media (min-width: 700px) { .ex-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ex-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ex-carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 12rem;
    padding: 1.5rem;
    border-left: 0;
    background: var(--marine);
    border-bottom: 4px solid var(--or);
    border-radius: 10px;
    box-shadow: var(--ombre-carte);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ex-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-survol); }
.ex-ico { width: 2.5rem; height: 2.5rem; color: var(--or); }
.ex-carte h4 { margin: 0; color: var(--blanc); font-size: 1.125rem; line-height: 1.3; }
.ex-num {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 2.25rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
}
@media (prefers-reduced-motion: reduce) { .ex-carte { transition: none; } .ex-carte:hover { transform: none; } }

/* Bandeau de titre plus étroit (toutes les pages à bandeau marine) et affichage plus dense (09/10/2026) */
.page-hero { padding-top: clamp(1.5rem, 3vw, 2.25rem); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.page-hero .lead { margin-top: 0.75rem; }
.page-hero + .band { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
#ressources .res-categories { margin: 0 0 0.9rem; gap: 0.5rem; }
#ressources .res-cat-btn { padding: 0.35rem 1.1rem; font-size: 0.9375rem; }
#ressources .res-filtres-titre { margin-bottom: 0.4rem; }
#ressources .res-tags-barre { gap: 0.4rem; }
#ressources .res-liste { margin-top: 1.25rem; gap: 0.9rem; }

/* Bandeau « Contact » de fin de page : plus compact (09/10/2026) */
.band:has(> .contact-band) { padding-top: clamp(1.75rem, 3.5vw, 2.5rem); padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.contact-band { gap: 1.5rem 3rem; }
.contact-band h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.contact-band .filet { margin-top: 0.9rem; }
.contact-band-actions { gap: 0.6rem; }

/* =========================================================
   PAGES D'EXPERTISE : en-tête illustré + bandeau des autres expertises (10/10/2026)
   Les illustrations sont celles des cartes de l'accueil ; --couleur est posée en ligne.
   ========================================================= */
.page-hero--illustre .filigrane { display: none; }
.page-hero-visuel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40%;
    color: #fff;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--couleur) 55%, var(--marine)),
        color-mix(in srgb, var(--couleur) 18%, var(--marine)));
}
.page-hero-visuel::before {   /* fondu vers le fond marine, côté texte */
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 90px;
    z-index: 1;
    background: linear-gradient(90deg, var(--marine), transparent);
}
.page-hero-dessin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.55;
}
@media (min-width: 861px) {
    .page-hero--illustre > :not(.page-hero-visuel) { max-width: 58%; }
}
@media (max-width: 860px) {
    .page-hero--illustre { display: flex; flex-direction: column; align-items: flex-start; }
    .page-hero-visuel {
        order: 9;                /* l'illustration passe sous le texte */
        align-self: stretch;
        position: relative;
        width: auto;
        height: 120px;
        margin: 1.25rem calc(-1 * clamp(1.25rem, 4vw, 3.5rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem));
    }
    .page-hero-visuel::before { display: none; }
}

.autres-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.autre-carte {
    display: flex;
    background-color: var(--blanc);
    border: 1px solid var(--border-card);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--texte);
    box-shadow: var(--ombre-carte);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.autre-carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-survol);
}
.autre-visuel {
    flex: 0 0 36%;
    color: var(--couleur);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--couleur) 14%, #fff),
        color-mix(in srgb, var(--couleur) 4%, #fff));
    overflow: hidden;
}
.autre-dessin {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease;
}
.autre-carte:hover .autre-dessin { transform: scale(1.08) rotate(-1deg); }
.autre-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.25rem 1.4rem;
}
.autre-ico { width: 30px; height: 30px; color: var(--couleur); line-height: 0; }
.autre-ico svg { display: block; width: 100%; height: 100%; }
.autre-texte strong {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--bleu);
}
.autre-accroche { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.4rem; }
.autre-carte .domaine-lien { margin-top: auto; }
.autre-carte:hover .domaine-lien { color: var(--couleur); }
.autre-carte .domaine-lien .ico { transition: transform 0.25s ease; }
.autre-carte:hover .domaine-lien .ico { transform: translateX(5px); }
@media (max-width: 520px) {
    .autre-carte { flex-direction: column; }
    .autre-visuel { flex: none; height: 110px; }
}

/* =========================================================
   PAGES D'EXPERTISE : « Ce que je fais » en cartes claires sur fond bleu pâle (10/10/2026)
   2 colonnes (2 lignes de 2), carte « autre besoin » pleine largeur dessous ;
   1 colonne sous 700 px. Liseré, icônes et filets dorés ; halo doré au survol (js/halo-cartes.js).
   ========================================================= */
.services-clairs {
    background: linear-gradient(180deg, #E4ECF5, #EEF3F9);
    border-top: 1px solid rgba(201, 160, 90, 0.5);
}
.services-clairs .cards,
.services-clairs .cards.serre {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.75rem;
    align-items: stretch;
}
/* nombre impair de services : le dernier prend toute la largeur */
.services-clairs .cards > article:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }

.services-clairs article {
    --mx: 50%;
    --my: 0%;
    position: relative;
    overflow: hidden;
    background: var(--blanc);
    border: 1px solid #C9D8E8;
    border-top: 3px solid var(--or);
    border-radius: 12px;
    padding: 1.6rem 1.75rem;
    box-shadow: 0 2px 10px rgba(28, 43, 74, 0.07);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.services-clairs article::before {   /* halo doré qui suit la souris */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(201, 160, 90, 0.16), transparent 70%);
}
.services-clairs article:hover::before { opacity: 1; }
.services-clairs article:hover {
    transform: translateY(-3px);
    border-color: var(--or);
    box-shadow: 0 10px 26px rgba(28, 43, 74, 0.16);
}
.services-clairs article > * { position: relative; }
.services-clairs .card-ico {
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 1px solid rgba(201, 160, 90, 0.7);
    border-radius: 12px;
    color: var(--bleu);
    background: rgba(1, 52, 133, 0.07);
}
.services-clairs article h4 {
    color: var(--bleu);
    font-size: 1.3rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid rgba(201, 160, 90, 0.6);
}
.services-clairs article p { margin-bottom: 0; }
.services-clairs article em { color: var(--bleu); }

/* « Votre besoin n'est pas listé ? » : bandeau pleine largeur sous les cartes */
.services-clairs .carte-besoin {
    --mx: 50%;
    --my: 0%;
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1.5rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.65);
    border: 1px dashed var(--or);
    border-left: 1px dashed var(--or);
    border-radius: 12px;
    padding: 1.4rem 1.75rem;
    box-shadow: none;
}
.services-clairs .carte-besoin::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    background: radial-gradient(320px circle at var(--mx) var(--my), rgba(201, 160, 90, 0.16), transparent 70%);
}
.services-clairs .carte-besoin:hover::before { opacity: 1; }
.services-clairs .carte-besoin:hover { border-color: var(--or); background: var(--blanc); box-shadow: 0 10px 26px rgba(28, 43, 74, 0.16); }
.services-clairs .carte-besoin > * { position: relative; }
.services-clairs .carte-besoin .card-ico { grid-row: 1 / span 2; margin: 0; }
.services-clairs .carte-besoin h4 { color: var(--bleu); margin: 0 0 0.25rem; }
.services-clairs .carte-besoin p { margin: 0; }
.services-clairs .carte-besoin .lien-fleche {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 0.6rem 1.2rem;
    border: 1px solid var(--bleu);
    border-radius: 999px;
    color: var(--bleu);
    white-space: nowrap;
}
.services-clairs .carte-besoin:hover .lien-fleche { background: var(--bleu); color: var(--blanc); }

@media (max-width: 700px) {
    .services-clairs .cards,
    .services-clairs .cards.serre { grid-template-columns: minmax(0, 1fr); }
    .services-clairs .cards > article:nth-last-child(2):nth-child(odd) { grid-column: auto; }
    .services-clairs article { padding: 1.35rem 1.25rem; }
    .services-clairs .carte-besoin {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 1.35rem 1.25rem;
    }
    .services-clairs .carte-besoin .card-ico { grid-row: auto; }
    .services-clairs .carte-besoin h4 { align-self: center; margin: 0; }
    .services-clairs .carte-besoin p,
    .services-clairs .carte-besoin .lien-fleche { grid-column: 1 / -1; }
    .services-clairs .carte-besoin p { margin-top: 0.6rem; }
    .services-clairs .carte-besoin .lien-fleche { grid-row: auto; justify-self: start; margin-top: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
    .services-clairs article, .services-clairs .carte-besoin { transition: none; }
    .services-clairs article:hover, .services-clairs .carte-besoin:hover { transform: none; }
}

/* Variante « carré » (Formation) : 3 services + la carte « autre besoin » forment 2 x 2 */
.services-clairs.services-carre .cards > article:nth-last-child(2):nth-child(odd) { grid-column: auto; }
.services-clairs.services-carre .carte-besoin {
    grid-column: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.6rem 1.75rem;
}
.services-clairs.services-carre .carte-besoin .card-ico { margin: 0 0 0.75rem; }
.services-clairs.services-carre .carte-besoin h4 {
    align-self: stretch;
    margin: 0 0 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(201, 160, 90, 0.4);
    font-size: 1.3rem;
}
.services-clairs.services-carre .carte-besoin p { margin: 0 0 1.1rem; }
.services-clairs.services-carre .carte-besoin .lien-fleche { margin-top: auto; align-self: flex-start; }