/* DataFish V2 : système visuel « carte marine »
   Chargé après styles.css. Tout est scopé sous body.v2 pour primer sur l'existant.
   Deux polices : Plus Jakarta Sans (titres, 14/10), Public Sans (texte) ; Schibsted Grotesk ne sert plus qu'au logotype. */

/* 14/10 (direction « premium sobre », .claude/DIRECTION-STYLE-14-10.md, section 3) : un seul marine, un seul bleu d'accent,
   une brume à la place de l'écume, un rayon de 6 px. Les anciennes variables sont remappées : la plupart des feuilles s'y
   alignent d'elles-mêmes. Avant : --ink, --ink-deep, --tide, --tide-soft, --sea et --line aux teintes de la charte « carte marine »
   (historique git), --f-display en Schibsted Grotesk, --radius 8px. */
:root {
    --b-night: #081A2E;       /* LE marine : hauts de page, section signature, bandeau final, pied de page, texte fort */
    --b-night-2: #0F2740;     /* carte sombre posée sur marine, survol de la case 9 */
    --b-paper: #FFFFFF;
    --b-mist: #F3F6F9;        /* brume : sections alternées, cartes sur blanc */
    --b-hover: #EAEFF4;       /* survol neutre d'un contrôle clair */
    --b-rule: #DCE3EA;        /* filets fins sur clair, jamais un cadre */
    --b-rule-dark: rgba(255, 255, 255, .10);
    --b-text: #4A5E71;        /* texte secondaire : 6,7:1 sur blanc, 6,2:1 sur brume */
    --b-faint: #55687B;       /* étiquettes, légendes, numéros au repos : 5,75:1 sur blanc, 4,97:1 sur #EAEFF4 */
    --b-accent: #1F6FA8;      /* LE bleu : boutons, liens, numéros actifs, pictogrammes (5,4:1 sur blanc) ; jamais en texte sur marine */
    --b-accent-hover: #2679B6;
    --b-on-dark-2: #A9BBCC;   /* texte secondaire sur marine : 8,9:1 */
    --b-accent-dark: #6FB8E8; /* lien, étiquette, pictogramme sur marine : 8,1:1 */
    --b-grad: linear-gradient(90deg, #3498DB 0%, #8FDBFF 85%); /* mot de l'accroche, sur marine seulement */
    --b-r-card: 6px;
    --b-r-tag: 4px;
    --b-f-head: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --b-f-logo: 'Schibsted Grotesk', 'Segoe UI', sans-serif;
    --b-lines: url(/img/houle-v12.svg); /* la nappe : la houle V12 de l'accueil figée (js/v6-wave.js, générateur .claude/nappe/gen-v12.cjs), sur marine seulement. 14/10 (Louis : la vague V12 sur toutes les pages) ; avant : url(/img/houle.svg), maillage V11 figé (fichier gardé), et avant encore la houle en lignes parallèles */
    --ink: var(--b-night);
    --ink-deep: var(--b-night);
    --tide: var(--b-accent);
    --tide-soft: var(--b-hover);
    --sea: var(--b-mist);
    --line: var(--b-rule);
    --muted: var(--b-text);
    --f-display: var(--b-f-head);
    --f-body: 'Public Sans', 'Segoe UI', sans-serif;
    --gutter: clamp(1.1rem, 4vw, 2.5rem);
    --header-h: 70px;
    --radius: var(--b-r-card);
}

/* ---------- Base ---------- */
body.v2 {
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4 {
    font-family: var(--f-display);
    color: var(--ink);
    letter-spacing: -0.015em;
    line-height: 1.15;
}
/* 14/10 : Plus Jakarta Sans 500 pour les grands titres, 600 pour les titres de cartes (le 700 est réservé au mot de l'accroche de l'accueil) */
body.v2 h1, body.v2 h2 { font-weight: 500; }
body.v2 h3, body.v2 h4 { font-weight: 600; letter-spacing: -0.012em; }
body.v2 .container {
    max-width: 1200px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}
body.v2 :focus-visible { outline: 2px solid var(--tide); outline-offset: 3px; }
body.v2 [id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Étiquette unique du site (remplace l'ancienne police machine à écrire) */
.df-label, .df-mono {
    display: inline-block;
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tide);
}

/* ---------- En-tête ---------- */
body.v2 header {
    background: #fff;
    box-shadow: none !important;
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.v2 nav.container { max-width: 1200px; padding: 0.7rem var(--gutter); }
body.v2 .logo:hover { transform: none; }
body.v2 .logo-text {
    font-family: var(--f-display);
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: var(--ink);
}
body.v2 .logo-highlight { background: none; -webkit-text-fill-color: var(--tide); color: var(--tide); }
body.v2 .nav-links > li > a { font-size: 16px; font-weight: 500; color: var(--ink); }
body.v2 .nav-links a::after { display: none; }
body.v2 .nav-links > li > a:hover { color: var(--tide); }
body.v2 .dropdown-menu a { font-size: 16px; color: var(--ink); border-radius: 6px; }
body.v2 .dropdown-menu a:hover { background: var(--sea); color: var(--ink); }
body.v2 .dropdown-menu i { color: var(--tide); width: 1.2em; text-align: center; }
body.v2 .dropdown-menu a.dropdown-sub { padding-left: 2.4rem; font-size: 15px; color: var(--muted); }
body.v2 .lang-switch { border-color: var(--line); }
@media (min-width: 769px) {
    body.v2 .nav-links { gap: 1.5rem; align-items: center; }
    body.v2 .nav-links .nav-cta { margin-left: 0.25rem; }
    body.v2 .dropdown-menu {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: 0 14px 34px rgba(8, 26, 46, 0.12); /* 14/10 (relecture du lot 2) : teinte du marine du site ; avant, rgba(11, 34, 57) */
        padding: 0.4rem;
        min-width: 290px;
    }
}

/* ---------- Boutons et liens ---------- */
/* 14/10 : bouton principal au bleu d'accent partout (avant : marine, survol marée), bandeau final compris */
body.v2 .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 48px;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--b-r-card);
    background: var(--b-accent);
    color: #fff;
    font: 600 17px/1.2 var(--f-body);
    letter-spacing: 0;
    box-shadow: none;
    text-decoration: none;
    transition: background-color 0.15s ease;
    overflow: visible;
}
body.v2 .cta-button::before { display: none; }
body.v2 .cta-button:hover { background: var(--b-accent-hover); color: #fff; transform: none; box-shadow: none; }
body.v2 .cta-button i { font-size: 0.9em; }
body.v2 .cta-button-secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
body.v2 .cta-button-secondary:hover { background: var(--ink); color: #fff; }
body.v2 .nav-links .nav-cta a.cta-button { min-height: 44px; padding: 10px 18px; font-size: 16px; color: #fff; background: var(--b-accent); }
body.v2 .nav-links .nav-cta a.cta-button:hover { background: var(--b-accent-hover); }
body.v2 .cta-buttons-group { justify-content: flex-start; gap: 1rem 1.25rem; align-items: center; }

.df-link {
    font-weight: 600;
    color: var(--tide);
    text-decoration: underline;
    text-decoration-thickness: 1px; /* 14/10 : 1 px (1,5 avant) */
    text-underline-offset: 5px;
}
.df-link:hover { color: var(--ink); }
.df-link-lg { font-size: 18px; display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Sections ---------- */
.df-section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.df-sea { background: var(--sea); }
.df-head {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1rem 4rem;
    align-items: start;
    margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
/* 14/10 : titre de section commun (même échelle que .hm-h de v3.css) ; avant : clamp(2.1rem, 3.8vw, 3rem), 700 */
body.v2 .df-head h2, body.v2 .df-split h2, body.v2 .df-faq h2 {
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.022em;
    margin: 0;
}
.df-head p { color: var(--muted); font-size: 19px; max-width: 54ch; margin: 0; padding-top: 0.45em; }
.df-more { margin-top: 2.5rem; }

/* ---------- Accroche ---------- */
/* 14/10 : plus de lignes de niveau (le fichier reste dans img/, il n'est plus référencé). Fond brume pour les hauts de page
   clairs (Contact, pages légales) ; les hauts de page des pages principales passent au marine avec la nappe (plus bas). */
.df-hero {
    position: relative;
    background: var(--sea);
    padding: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
}
body.v2 .df-hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.2rem);
    font-weight: 500;
    letter-spacing: -0.028em;
    line-height: 1.08;
    max-width: 21ch;
    margin: 0;
}
.df-hero h1 span { display: block; margin-top: 0.35rem; color: var(--tide); font-weight: 500; }
/* 14/10 : haut de page des pages principales, au style de l'accueil. Marine, nappe (img/houle.svg : le maillage de l'accueil figé,
   avant : la houle en lignes parallèles) en bas à droite,
   cadrée sous le titre et l'accroche : elle ne passe jamais derrière un texte. Titre blanc, accroche (le span du h1) en dégradé
   sur la ligne suivante, chapeau gris clair (v3.css, « Hauts de page »). Contact (.ct-hero, agenda Calendly) et pages légales
   (.df-page-hero--doc) gardent le haut de page clair. */
.df-page-hero:not(.ct-hero):not(.df-page-hero--doc) {
    background: var(--b-night) var(--b-lines) no-repeat right -40px bottom -120px / min(900px, 66vw) auto; /* 14/10 (nappe maillage) : la crête reste au moins 38 px sous l'accroche la plus longue à 1366 px (Tableaux de bord ; 30 px avec l'ancienne houle) */
    color: #fff;
}
.df-lede {
    font-size: clamp(1.15rem, 1.7vw, 1.35rem);
    line-height: 1.55;
    color: var(--muted);
    max-width: 54ch;
    margin: 1.75rem 0 2.25rem;
}
.df-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.df-where { display: block; margin-top: clamp(2.25rem, 4.5vw, 3.5rem); font-size: 16px; font-weight: 600; color: var(--muted); }
.df-page-hero { padding-top: calc(var(--header-h) + clamp(1rem, 2vw, 1.75rem)); } /* V5 (P29) : haut de page plus court, suite dans v3.css */
body.v2 .df-page-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); max-width: 22ch; }
/* 14/10 : fil d'Ariane en simple lien (avant : pastille blanche, 999px, 16 px en 600) ; clair sur le haut de page marine */
.df-crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    padding: 0;
    margin-bottom: 1.4rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--b-text);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    text-decoration: none;
    transition: color .2s ease;
}
/* 14/10 soir (Louis : liens de retour un peu plus grands) : 16 px en 600, un cran plus lumineux (blanc à 85 % sur marine, --b-text
   sur clair : Contact, pages légales) ; icône 18 px et zone de clic de 44 px dans v3.css. La boîte garde 32 px de haut (ligne de
   25,6 px) : hauts de page inchangés. Avant : color var(--b-faint), 14px, 500, letter-spacing .02em, pas de transition ; sur marine
   color var(--b-on-dark-2). */
.df-crumb:hover { background: none; color: var(--b-accent); }
.df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .df-crumb { color: rgba(255, 255, 255, .85); }
.df-page-hero:not(.ct-hero):not(.df-page-hero--doc) .df-crumb:hover { color: #fff; }

/* ---------- Expertises ---------- */
.df-exp { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.df-exp a {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 48px;
    gap: 0.5rem 3rem;
    align-items: start;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
}
body.v2 .df-exp h3 { font-size: clamp(1.4rem, 2.3vw, 1.75rem); font-weight: 600; margin: 0; transition: color 0.15s; }
.df-exp strong { display: block; font-weight: 600; font-size: 19px; margin-bottom: 0.25rem; }
.df-exp p { margin: 0; color: var(--muted); font-size: 17px; }
.df-arrow {
    width: 48px;
    height: 48px;
    border-radius: var(--radius); /* 14/10 : plus de rond */
    background: var(--sea);
    display: grid;
    place-items: center;
    font-size: 20px;
    color: var(--ink);
    align-self: center;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.df-exp a:hover h3 { color: var(--tide); }
.df-exp a:hover .df-arrow { background: var(--ink); color: #fff; }

/* ---------- Blocs (3 ou 4 colonnes) ---------- */
.df-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.df-blocks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.df-blocks > li { padding-top: 0; }
body.v2 .df-blocks h3 { font-size: 1.4rem; font-weight: 600; margin: 0 0 0.6rem; }
.df-blocks p { color: var(--muted); margin: 0; font-size: 17px; }
.df-blocks p + p { margin-top: 0.75rem; }

/* ---------- Démarche (route) ---------- */
.df-route {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem;
}
.df-route > li { position: relative; padding-top: 2.75rem; }
.df-route > li::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 20px;
    right: -2.5rem;
    border-top: 2px dashed #9BB4C9;
}
.df-route > li:last-child::before { display: none; }
.df-wp {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--tide);
    background: var(--sea);
}
.df-route > li:first-child .df-wp { background: var(--tide); }
.df-route .df-label { display: block; margin-bottom: 0.4rem; }
body.v2 .df-route h3 { font-size: 1.6rem; font-weight: 600; margin: 0 0 0.4rem; }
.df-route strong { display: block; font-weight: 600; font-size: 18px; margin-bottom: 0.8rem; }
.df-ticks { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: 17px; }
.df-ticks li { position: relative; padding-left: 1.2rem; margin-bottom: 0.45rem; }
.df-ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8em;
    width: 9px;
    border-top: 2px solid var(--tide);
}
.df-route-foot { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

/* ---------- Réalisations ---------- */
.df-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.df-work--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.df-work > li {
    background: #fff;
    border: 0;
    border-radius: var(--radius);
    padding: 1.75rem 1.9rem;
    display: flex;
    flex-direction: column;
}
.df-work .df-label { margin-bottom: 0.6rem; }
body.v2 .df-work h3 { font-size: 1.45rem; font-weight: 600; margin: 0 0 0.6rem; }
.df-work p { color: var(--muted); margin: 0; font-size: 17px; }
.df-work .df-link { margin-top: auto; padding-top: 1rem; align-self: flex-start; }

.df-product {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2.5rem 4rem;
    align-items: stretch;
}
body.v2 .df-product h3 { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; margin: 0 0 0.75rem; }
.df-product p { font-size: 18px; margin: 0 0 1rem; max-width: 60ch; }
.df-product .df-ticks { margin: 1.25rem 0 2rem; }
.df-panel {
    background: var(--ink); /* 14/10 : sans lignes de niveau */
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
}
body.v2 .df-panel h4 { color: #fff; font-family: var(--f-body); font-size: 16px; font-weight: 600; margin: 0 0 0.9rem; opacity: 0.75; }
.df-panel ul { list-style: none; margin: 0 0 1.75rem; padding: 0; }
.df-panel ul:last-child { margin-bottom: 0; }
.df-panel li { padding: 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 17px; }
.df-panel li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.df-panel li strong { display: block; font-weight: 600; }
.df-panel li span { color: rgba(255, 255, 255, 0.72); font-size: 16px; }
.df-lab { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 17px; max-width: 75ch; }
.df-lab strong { color: var(--ink); }

/* ---------- Logos ---------- */
.df-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.5rem 2.5rem;
    align-items: center;
}
.df-logos a { display: block; }
.df-logos img { display: block; width: 100%; height: 60px; object-fit: contain; transition: opacity 0.15s; }
.df-logos a:hover img { opacity: 0.75; }
body.v2 .df-small-head { font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 0 2rem; }

/* ---------- Texte en deux colonnes ---------- */
.df-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem 4rem; }
.df-prose p { font-size: 19px; color: var(--ink); margin: 0 0 1rem; max-width: 62ch; }
.df-prose p:last-child { margin-bottom: 0; }
.df-prose .df-ticks { margin: 1.25rem 0; }
.df-note { font-size: 16px; color: var(--muted); }

/* ---------- Calcul ---------- */
.df-calc { background: var(--sea); border: 0; border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.25rem); }
.df-calc p { color: var(--muted); margin: 0 0 0.8rem; font-size: 18px; }
.df-calc p strong { color: var(--ink); }
.df-formula { font-variant-numeric: tabular-nums; font-size: 18px; background: #fff; border-radius: 6px; padding: 1rem 1.1rem; margin: 1rem 0; color: var(--ink); }

/* ---------- Détail technique ---------- */
.df-tech { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.df-tech summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
}
.df-tech summary::-webkit-details-marker { display: none; }
.df-tech summary::before { content: "+"; color: var(--tide); font-size: 24px; width: 1.4rem; }
.df-tech[open] summary::before { content: "\2212"; }
.df-tech p { margin: 0 0 1rem 1.4rem; color: var(--muted); font-size: 17px; max-width: 72ch; }

/* ---------- FAQ ---------- */
.df-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; }
body.v2 .df-faq h2 { margin-bottom: 1rem; }
.df-faq-intro p { color: var(--muted); margin: 0 0 1.25rem; max-width: 40ch; font-size: 19px; }
body.v2 .faq-list { border-top: 1px solid var(--line); max-width: none; width: 100%; margin: 0; gap: 0; }
body.v2 .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; margin: 0; }
body.v2 .faq-item:hover { box-shadow: none; transform: none; border-color: var(--line); }
body.v2 .faq-question {
    position: relative;
    list-style: none;
    padding: 1.3rem 3rem 1.3rem 0;
    font-family: var(--f-body);
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    background: transparent;
}
body.v2 .faq-question:hover { background: transparent; color: var(--tide); }
body.v2 .faq-question .faq-icon { display: none; }
body.v2 .faq-question::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    font: 400 28px/1 var(--f-body);
    color: var(--tide);
}
body.v2 .faq-item[open] .faq-question::after { content: "\2212"; }
body.v2 .faq-answer { padding: 0 3rem 1.4rem 0; background: transparent; border: 0; }
body.v2 .faq-answer p { color: var(--muted); font-size: 18px; margin: 0; max-width: 64ch; }
body.v2 .faq-answer a { color: var(--tide); }
body.v2 .faq-section { background: #fff; }

/* ---------- Encart démarche ---------- */
body.v2 .methode-encart { background: #fff; border: 0; padding: 3rem 0; text-align: left; }
body.v2 .methode-encart .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem 4rem; align-items: start; }
body.v2 .methode-encart h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 0; }
body.v2 .methode-encart p { color: var(--muted); margin: 0 0 0.6rem; max-width: 62ch; font-size: 18px; }
body.v2 .service-more-link { color: var(--tide); font-weight: 600; font-size: 18px; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- Bandeau de conversion ---------- */
/* 14/10 : marine et nappe de houle (avant : lignes de niveau) ; bouton au bleu d'accent, comme partout */
body.v2 .cta-banner {
    background: var(--b-night) var(--b-lines) no-repeat right -80px bottom -60px / min(1000px, 80vw) auto;
    color: #fff;
    text-align: left;
    padding: clamp(4rem, 8vw, 6rem) 0;
}
body.v2 .cta-banner h2 { color: #fff; font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.022em; margin: 0 0 0.75rem; } /* 07/10 : même taille que les titres de section */
body.v2 .cta-banner p { color: rgba(255, 255, 255, 0.85); font-size: 20px; max-width: 46ch; margin: 0 0 2rem; }
body.v2 .cta-banner .cta-button { background: var(--b-accent); color: #fff; }
body.v2 .cta-banner .cta-button:hover { background: var(--b-accent-hover); color: #fff; }
body.v2 .cta-banner .cta-button-secondary { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
body.v2 .cta-banner .cta-button-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
body.v2 .cta-banner .cta-banner-contact { margin: 2rem 0 0; max-width: none; font-size: 17px; color: rgba(255, 255, 255, 0.75); }
body.v2 .cta-banner-contact a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.35); }

/* ---------- Pied de page ---------- */
body.v2 footer { background: var(--ink-deep); color: rgba(255, 255, 255, 0.75); box-shadow: none; padding: 3.75rem 0 2rem; }
body.v2 footer::before { display: none; }
body.v2 .footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    text-align: left;
}
body.v2 .footer-section { text-align: left; }
body.v2 footer h3 { color: #fff; font-size: 1.5rem; margin: 0 0 0.75rem; }
body.v2 footer h4 { color: rgba(255, 255, 255, 0.6); font-family: var(--f-body); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 1rem; }
body.v2 footer ul { list-style: none; margin: 0; padding: 0; }
body.v2 footer li { margin: 0 0 0.6rem; font-size: 16px; justify-content: flex-start; }
/* 14/10 (relecture du lot 2) : base.css donne aux lignes .footer-contact le gris #475569 (--color-text-light de l'ancien styles.css),
   illisible sur marine ; caché aujourd'hui par la couleur des liens, il ne ressortira pas si un texte nu y est ajouté */
body.v2 footer .footer-contact li { color: var(--b-on-dark-2); }
body.v2 footer a { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
body.v2 footer a:hover { color: #fff; text-decoration: underline; }
body.v2 footer i { color: rgba(255, 255, 255, 0.45); margin-right: 0.35rem; }
body.v2 .footer-tagline { font-family: var(--f-display); font-size: 1.15rem; font-weight: 500; font-style: normal; line-height: 1.35; color: #fff; margin: 0 0 0.75rem; } /* 14/10 : plus d'italique (base.css) */
body.v2 .footer-description { color: rgba(255, 255, 255, 0.72); font-size: 16px; margin: 0; }
body.v2 .footer-bottom {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
}
body.v2 .footer-bottom p { color: inherit; margin: 0; font-size: 15px; }

/* ---------- Composants hérités (pages non réécrites) ---------- */
body.v2 .hero {
    background: var(--sea); /* 14/10 : sans lignes de niveau */
    color: var(--ink);
    margin-top: 0;
    padding: calc(var(--header-h) + 4rem) 0 3.5rem;
}
body.v2 .hero::before { display: none; }
body.v2 .hero .hero-content { text-align: left; align-items: flex-start; padding: 0; }
body.v2 .hero h1 { color: var(--ink); font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 500; text-align: left; opacity: 1; text-shadow: none; max-width: 22ch; }
body.v2 .hero p { color: var(--muted); text-align: left; margin-left: 0; font-weight: 400; opacity: 1; font-size: 19px; }
body.v2 .service-cases h2 { font-weight: 500; }
body.v2 .case-card { background: rgba(8, 26, 46, 0.04); border: 0; border-radius: var(--radius); box-shadow: none; text-align: left; } /* 14/10 (relecture du lot 2) : ancien marine #0B2239 au marine du site */
body.v2 .case-card:hover { transform: none; box-shadow: none; }
body.v2 .case-card-icon { background: none; color: var(--tide); justify-content: flex-start; }
body.v2 .case-card-icon i { color: var(--tide); }
body.v2 .case-card p, body.v2 .case-card li { font-size: 17px; }
body.v2 .service-intro { color: var(--muted); font-size: 19px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    body.v2 .nav-links { gap: 1.1rem; }
    body.v2 .nav-links > li > a { font-size: 15px; }
    body.v2 .nav-links .nav-cta a.cta-button { font-size: 15px; padding: 10px 14px; }
}
@media (max-width: 1024px) {
    .df-blocks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.v2 .footer-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .df-head, .df-faq, .df-split, .df-product { grid-template-columns: 1fr; }
    body.v2 .methode-encart .container { grid-template-columns: 1fr; }
    .df-route { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
    .df-route > li:nth-child(2)::before { display: none; }
    .df-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .df-blocks { grid-template-columns: 1fr; }
    .df-work { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    :root { --header-h: 62px; }
    body.v2 { font-size: 17px; }
    body.v2 .nav-links .nav-cta { margin: 0.75rem 0 0; }
    body.v2 .nav-links > li > a { font-size: 17px; }
    .df-exp a { grid-template-columns: minmax(0, 1fr) 48px; }
    .df-exp a > div { grid-column: 1 / -1; grid-row: 2; }
    /* 14/10 : nappe du haut de page marine sur téléphone, réglée dans v3.css (« Hauts de page ») */
    .df-blocks--4 { grid-template-columns: 1fr; }
    .df-prose p { font-size: 18px; }
    body.v2 .cta-banner { background-position: right -45vw bottom -20px; background-size: 150vw auto; } /* 14/10 : la nappe reste sous la carte */
    body.v2 .footer-content { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .df-route { grid-template-columns: 1fr; gap: 0; }
    .df-route > li { padding: 0 0 2.25rem 2.4rem; }
    .df-route > li::before { display: block; top: 24px; bottom: 0; left: 9px; right: auto; border-top: 0; border-left: 2px dashed #9BB4C9; }
    .df-route > li:nth-child(2)::before { display: block; }
    .df-route > li:last-child::before { display: none; }
    .df-wp { top: 2px; }
    .df-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    body.v2 * { transition: none !important; scroll-behavior: auto !important; }
}

/* Compléments */
.df-blocks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.df-section:not(.df-sea) .df-wp { background: #fff; }
.df-section:not(.df-sea) .df-route > li:first-child .df-wp { background: var(--tide); }
@media (max-width: 960px) { .df-blocks--2 { grid-template-columns: 1fr; } }
@media (max-width: 800px) { .df-work--3 { grid-template-columns: 1fr; } }

/* Sans cadre : les cartes se distinguent par leur fond */
.df-section:not(.df-sea) .df-work > li { background: var(--sea); }
.df-combine { margin: 2rem 0 0; max-width: 70ch; font-size: 19px; color: var(--ink); }
.df-shot { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.df-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: none; } /* 14/10 : sans ombre longue */
.df-shot figcaption { margin-top: 0.75rem; font-size: 15px; color: var(--muted); }

/* Alignement en haut des blocs en deux colonnes */
.df-split { align-items: start; }
.df-split .df-prose { padding-top: 0.35em; }
.df-exp a > div { padding-top: 0.15em; }
@media (max-width: 960px) { .df-head p, .df-split .df-prose { padding-top: 0; } }

/* Logos officiels */
body.v2 .logo-img { display: block; height: 30px; width: auto; }
body.v2 .footer-logo { display: block; height: 30px; width: auto; margin: 0 0 1rem; }
@media (max-width: 768px) { body.v2 .logo-img { height: 26px; } }

/* Les petits glissements des liens au survol (pied de page, bouton et menu du téléphone) viennent de base.css, comme en V4 :
   « rien ne bouge au survol » vise les blocs entiers, pas les liens (précision de Louis, 25/09). */