/* EDIPAGE - feuille de style unique. Sans framework. */

/* ---------- Polices (auto-hebergees, sous-ensemble latin) ---------- */
@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/CookConthic.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DM Sans";
    src: url("../fonts/dm-sans-var.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- Jetons ---------- */
:root {
    --navy: #0d2b75;
    --navy-deep: #091f57;
    --blue: #75a5fc;
    --blue-ink: #3f68c8;
    --ink: #121a33;
    --text: #3b4257;
    --muted: #6f778a;
    --paper: #f5f2ea;
    --white: #ffffff;
    --line: #d9d8d0;
    --line-soft: #e9e7df;
    --ph: #e6e4dc;
    --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
    --sans: "DM Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --wrap: 1180px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --radius: 8px;
    --header-h: 5.6rem;
    /* hauteur de l'en-tete, utilisee par les visuels qui passent dessous */
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: var(--navy);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--blue-ink);
}

h1,
h2,
h3,
h4 {
    font-family: var(--serif);
    font-weight: 400;
    color: var(--navy);
    line-height: 1.02;
    letter-spacing: -0.005em;
    margin: 0 0 0.55em;
}

h1 {
    font-size: clamp(3rem, 7vw, 5.9rem);
    line-height: .97;
}

h2 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

/* Titres sur plusieurs lignes : repartition equilibree des mots, pas de mot orphelin
   sur la derniere ligne. Ignore par les navigateurs qui ne le connaissent pas. */
h1,
h2 {
    text-wrap: balance;
}

h3 {
    font-size: clamp(1.6rem, 2.3vw, 2.1rem);
}

p {
    margin: 0 0 1.1em;
}

p:last-child {
    margin-bottom: 0;
}

.wrap {
    width: min(var(--wrap), 100% - 2 * var(--gutter));
    margin-inline: auto;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ico {
    width: 1.1em;
    height: 1.1em;
    flex: none;
}

.skip {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
}

.lead {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--text);
    max-width: 34em;
}

.muted {
    color: var(--muted);
}

.mt {
    margin-top: 1.5rem;
}

.tag {
    display: block;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue-ink);
    font-weight: 500;
    margin-bottom: .6rem;
}

.tag.muted {
    color: var(--muted);
}

.sep {
    border: 0;
    border-top: 1px solid var(--line);
    margin: clamp(2.5rem, 5vw, 4rem) 0;
}

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.35rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .98rem;
    line-height: 1;
    text-decoration: none;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: #fff;
    transition: background .15s, color .15s, border-color .15s;
    cursor: pointer;
    font-family: var(--sans);
}

.btn:hover {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: #fff;
}

.btn-outline {
    background: transparent;
    color: var(--navy);
}

.btn-outline:hover {
    background: var(--navy);
    color: #fff;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

.btn-light:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--navy-deep);
}

.link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--navy);
    padding-bottom: .15rem;
}

.link:hover {
    border-color: var(--blue-ink);
}

.link .ico {
    transition: transform .15s;
}

.link:hover .ico {
    transform: translateX(3px);
}

/* ---------- Surtitres et bandeaux ---------- */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue-ink);
    font-weight: 500;
    margin: 0 0 1.4rem;
}

.eyebrow::after {
    content: "";
    flex: 0 0 5rem;
    height: 1px;
    background: var(--blue);
    opacity: .7;
}

.band {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--blue-ink);
    font-weight: 500;
    padding-block: 1.25rem;
}

.band::before,
.band::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.band.band-left::before {
    display: none;
}

.band span {
    white-space: nowrap;
}

/* ---------- En-tete ---------- */
.site-header {
    background: var(--paper);
    position: relative;
    z-index: 20;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-block: 1.4rem;
}

.brand img {
    width: 158px;
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 2.5rem;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

.nav ul a {
    text-decoration: none;
    color: var(--ink);
    font-size: .95rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid transparent;
}

.nav ul a:hover,
.nav ul a[aria-current] {
    border-color: var(--navy);
    color: var(--navy);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: .5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

/* ---------- Sections ---------- */
.section {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.section-tight {
    padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Le titre dispose de toute la largeur pour tenir sur une ligne ; seuls les paragraphes
   sont limites, pour garder des lignes de texte courtes. */
.section-head {
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head h2 {
    margin-bottom: .5em;
}

.section-head p {
    max-width: 42rem;
}

.alt {
    background: var(--white);
    border-block: 1px solid var(--line-soft);
}

/* ---------- Hero ----------
   Fond video (animation-home.webm/mp4, muet, en boucle) sur toute la section. La section
   remonte sous l'en-tete par une marge negative egale a sa hauteur, compensee par le
   padding haut : la video et l'image poster couvrent donc aussi la zone de l'en-tete,
   qui perd son fond sur l'accueil (body.page-index) et garde son z-index. Un voile en
   degrade (.hero::after) assombrit la gauche, ou se trouve le texte, passe en blanc.
   .hero-art ne sert qu'a reserver la place de la colonne droite. */
.hero {
    --hero-pt: clamp(2.5rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
    margin-top: calc(-1 * var(--header-h));
    padding-block: calc(var(--header-h) + var(--hero-pt)) clamp(2rem, 5vw, 4rem);
    color: #fff;
    background: #071634 url(../img/hero-poster.webp) center / cover no-repeat;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(4, 12, 32, .72) 0%, rgba(4, 12, 32, .4) 50%, rgba(4, 12, 32, .05) 100%);
    pointer-events: none;
}

.hero > .wrap {
    position: relative;
    z-index: 2;
}

.hero h1,
.hero .lead {
    color: #fff;
}

.hero .lead {
    opacity: .9;
}

.hero .eyebrow {
    color: rgba(255, 255, 255, .8);
}

.hero .eyebrow::after {
    background: #fff;
    opacity: .5;
}

.hero .btn {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

.hero .btn:hover {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--navy-deep);
}

.hero .link {
    color: #fff;
    border-color: rgba(255, 255, 255, .6);
}

.hero .link:hover {
    border-color: #fff;
}

.hero .band {
    color: rgba(255, 255, 255, .8);
}

.hero .band::before,
.hero .band::after {
    background: rgba(255, 255, 255, .25);
}

.hero .hero-words {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

/* En-tete sur la video : logo blanc (header.php), liens et bouton en blanc. Sous 900px
   le menu deplie garde son fond papier et ses couleurs sombres, seul le bouton burger
   passe en blanc. */
.page-index .nav-toggle span {
    background: #fff;
}

@media (min-width: 901px) {
    .page-index .nav ul a {
        color: rgba(255, 255, 255, .85);
    }

    .page-index .nav ul a:hover,
    .page-index .nav ul a[aria-current] {
        color: #fff;
        border-color: #fff;
    }

    .page-index .nav .btn-outline {
        color: #fff;
        border-color: rgba(255, 255, 255, .7);
    }

    .page-index .nav .btn-outline:hover {
        background: #fff;
        border-color: #fff;
        color: var(--navy);
    }
}

.page-index .site-header,
.page-a-propos .site-header,
.page-contact .site-header {
    background: transparent;
}

/* minmax(0, ...) : la colonne texte ne s'elargit pas a la mesure du titre (max-content),
   qui deborde visiblement sur l'image ; le paragraphe, lui, reste dans la colonne. */
.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

.hero-copy {
    position: relative;
    z-index: 1;
}

.hero-copy .lead {
    max-width: 27em;
}

/* Le titre peut deborder sur la composition de droite : chaque ligne reste entiere. */
.hero h1 {
    margin-bottom: .5em;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.hero .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.75rem;
    align-items: center;
    margin-top: 2rem;
}

.hero-art {
    position: relative;
    aspect-ratio: 5 / 4;
    max-width: 100%;
}

/* Mots-cles empiles en haut a droite, filet a gauche, au-dessus de la tablette. */
.hero-words {
    position: absolute;
    right: 0;
    top: -1.5rem;
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    border-left: 1px solid var(--line);
    padding-left: .75rem;
    display: none;
}

.hero-words span {
    display: block;
    margin-block: .35rem;
}

/* ---------- Appareil et emplacements d'images ---------- */
.device {
    background: #1d2333;
    border-radius: 16px;
    padding: 9px;
    box-shadow: 0 24px 50px rgba(18, 26, 51, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.device .ph {
    border-radius: 8px;
}

.ph {
    position: relative;
    width: 100%;
    background: var(--ph);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    overflow: hidden;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, .35) 75%, transparent 75%);
    background-size: 28px 28px;
}

.ph span {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    background: rgba(255, 255, 255, .75);
    padding: .45rem .8rem;
    border-radius: 4px;
    text-align: center;
}

.ph-4x3 {
    aspect-ratio: 4 / 3;
}

.ph-16x10 {
    aspect-ratio: 16 / 10;
}

.ph-3x4 {
    aspect-ratio: 3 / 4;
}

.ph-1x1 {
    aspect-ratio: 1 / 1;
}

.ph-3x2 {
    aspect-ratio: 3 / 2;
}

/* ---------- Problemes / reponses ---------- */
.problems {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
}

/* Vignette carree a gauche (decorative, alt vide), texte a droite. */
.problem {
    border-top: 1px solid var(--line);
    padding-top: 1.5rem;
    display: grid;
    grid-template-columns: clamp(6rem, 9.6vw, 8.4rem) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.problem-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius);
    background: var(--ph);
}

.problem h3 {
    font-size: clamp(1.5rem, 2.1vw, 1.9rem);
    line-height: 1.15;
    margin-bottom: .55em;
}

.problem h3::before {

    color: var(--blue);
    margin-right: .1em;
}

.problem h3::after {

    color: var(--blue);
    margin-left: .1em;
}

/* ---------- Cartes d'usage ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card {
    display: flex;
    flex-direction: column;
}

.card .ph,
.card img {
    margin-bottom: 1.4rem;
}

.card h3 {
    margin-bottom: .45em;
}

/* ---------- Visuels cliquables et modale ----------
   a.zoom : lien vers l'image pleine taille (fonctionne sans JS). site.js intercepte
   le clic et ouvre un <dialog> natif : voile (::backdrop), Echap, focus rendu au lien
   a la fermeture, reste de la page inerte. */
.zoom {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    background: var(--ph);
}

.zoom img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    transition: transform .35s ease;
}

.card .zoom {
    margin-bottom: 1.4rem;
}

.card .zoom img {
    margin-bottom: 0;
}

.zoom:hover img,
.zoom:focus-visible img {
    transform: scale(1.03);
}

.zoom:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
}

.lightbox {
    border: 0;
    padding: 0;
    margin: auto;
    background: transparent;
    max-width: min(92vw, 1400px);
    max-height: none;
    overflow: visible;
}

.lightbox::backdrop {
    background: rgba(9, 31, 87, .84);
}

.lightbox figure {
    margin: 0;
}

.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(92vw, 1400px);
    max-height: 78vh;
    margin-inline: auto;
    border-radius: var(--radius);
    background: var(--ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}

.lightbox figcaption {
    margin-top: .8rem;
    text-align: center;
    color: var(--white);
    font-size: .92rem;
    line-height: 1.5;
    opacity: .9;
}

.lightbox-close {
    position: absolute;
    top: -3rem;
    right: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--white);
    color: var(--navy);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.lightbox-close svg {
    width: 20px;
    height: 20px;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: var(--blue);
    color: var(--white);
    outline: 0;
}

body.lightbox-open {
    overflow: hidden;
}

.card p {
    margin-bottom: 1rem;
}

.card .link {
    margin-top: auto;
    align-self: flex-start;
}

.cards-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* ---------- Services ---------- */
.services {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--line);
}

.service {
    padding: 2rem 1.4rem 2rem 0;
    border-right: 1px solid var(--line);
}

.service+.service {
    padding-left: 1.4rem;
}

.service:last-child {
    border-right: 0;
    padding-right: 0;
}

.service .ico {
    width: 30px;
    height: 30px;
    color: var(--navy);
    margin-bottom: 1.1rem;
    stroke-width: 1.4;
}

.service h3 {
    font-size: 1.35rem;
    margin-bottom: .4em;
}

.service p {
    font-size: .96rem;
    color: var(--text);
}

/* ---------- Applications editees ---------- */
.apps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.app {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* Visuel en tete de carte, colle aux bords : marges negatives egales au padding. */
.app .app-visual {
    width: calc(100% + 3.2rem);
    max-width: none;
    margin: -1.6rem -1.6rem .6rem;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    background: var(--ph);
}

.app h3 {
    font-size: 1.5rem;
    margin-bottom: .2em;
}

.app p {
    font-size: .96rem;
}

.app .link {
    margin-top: auto;
    align-self: flex-start;
    font-size: .95rem;
}

/* ---------- Grille de realisations ---------- */
.works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem) 2rem;
}

.work .ph,
.work .zoom {
    margin-bottom: 1rem;
}

/* Captures livrees en 800x526 : on garde leur cadrage plutot que le 5/3 des cartes d'accueil. */
.work .zoom img {
    aspect-ratio: 800 / 526;
}

.work h3 {
    font-size: 1.35rem;
    margin-bottom: .25em;
}

.work .meta {
    font-size: .8rem;
    color: var(--muted);
    letter-spacing: .04em;
    margin-bottom: .5rem;
}

.work p {
    font-size: .96rem;
}

/* ---------- Methode (etapes) ---------- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.steps li {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--line);
}

/* Pictogramme de l'etape (assets/img/etape1..5.svg), charge en <img> : le <style>
   interne du SVG reste dans son propre document, la CSP de la page ne le voit pas. */
.step-ico {
    width: 100%;
    height: auto;
    margin-top: .1rem;
}

.steps h3 {
    font-size: 1.5rem;
    margin-bottom: .35em;
}

.steps p {
    max-width: 60ch;
}

/* ---------- Listes de supports ---------- */
.chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.chips li {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem .95rem;
    font-size: .9rem;
    background: var(--white);
    color: var(--ink);
}

.chips li a {
    color: inherit;
    text-decoration: none;
}

.chips li:has(a:hover),
.chips li:has(a:focus-visible) {
    border-color: var(--navy);
    color: var(--navy);
}

/* ---------- FAQ (page faq.php) ----------
   Accordeon natif <details>/<summary> : aucun script necessaire pour ouvrir et
   fermer. Le texte des reponses fermees reste dans le DOM, donc lisible par les
   moteurs et les IA. site.js ouvre seulement l'item vise par une ancre (#id). */
.faq-toc {
    margin-top: 2rem;
}

.faq {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.35rem 0;
}

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

.faq-item summary h3 {
    font-size: 1.45rem;
    line-height: 1.15;
    margin: 0;
}

.faq-item summary::after {
    content: "+";
    font-family: var(--serif);
    font-size: 2rem;
    line-height: .8;
    color: var(--blue);
}

.faq-item[open] summary::after {
    content: "\2212";
}

.faq-item summary:hover h3,
.faq-item[open] summary h3 {
    color: var(--blue-ink);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--blue-ink);
    outline-offset: 4px;
}

.faq-answer {
    padding: 0 3rem 1.6rem 0;
    max-width: 62ch;
}

.faq-answer p {
    margin: 0;
}

/* Liens "Voir aussi" sous une reponse, hors JSON-LD */
.faq-answer .faq-more {
    margin-top: .9rem;
    font-size: .9rem;
    color: var(--muted);
}

/* ---------- Deux colonnes ---------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* Capture d'application en colonne de gauche (page Applications). */
.app-shot {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
}

.split-narrow {
    grid-template-columns: 2fr 3fr;
}

/* Portrait en tete de la colonne de gauche (page A propos). */
.portrait {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
}

/* ---------- Appel a l'action ---------- */
.cta {
    background: var(--navy);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-block: clamp(3rem, 7vw, 5.5rem);
}

.cta::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: clamp(80px, 12vw, 160px);
    aspect-ratio: 1;
    background: var(--blue);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.cta .cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 3rem;
    flex-wrap: wrap;
    position: relative;
}

.cta h2 {
    color: #fff;
    margin-bottom: .35em;
}

.cta p {
    color: #c9d6f5;
    max-width: 40em;
    font-size: 1.05rem;
}

.cta .band {
    color: #9db8f2;
    padding-top: 2.5rem;
    padding-bottom: 0;
}

.cta .band::before,
.cta .band::after {
    background: rgba(255, 255, 255, .18);
}

/* ---------- Pied de page ---------- */
.site-footer {
    border-top: 1px solid var(--line);
    padding-block: 3.5rem 2rem;
    font-size: .93rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
    gap: 2.5rem;
}

.footer-brand img {
    width: 126px;
    margin-bottom: 1rem;
}

.footer-brand p {
    max-width: 34em;
    color: var(--muted);
}

.footer-title {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 1rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: .5rem;
}

.site-footer li a {
    text-decoration: none;
    color: var(--ink);
}

.site-footer li a:hover {
    color: var(--blue-ink);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: .85rem;
}

/* ---------- Pages de texte ---------- */
.page-head {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-head h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    max-width: 16em;
}

/* En-tete de page avec visuel (A propos) : meme principe que le hero de l'accueil.
   L'image est hors flux, calee sur le bord droit du contenu, et remonte sous
   l'en-tete (rendu transparent sur la page). Le texte est borne a 58 % de large. */
.page-head-visual {
    position: relative;
    /* Coupe l'image en bas et a droite au bord de la section, jamais en haut. */
    clip-path: inset(-100vh 0 0 0);
}

.page-head-visual .page-head-copy {
    position: relative;
    z-index: 1;
    max-width: 58%;
}

.page-head-bg {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: -3rem;
    width: min(46vw, 720px);
    height: auto;
    max-width: none;
    pointer-events: none;
}

/* Variante motif (Applications) : composition decorative plus etroite, qui ne
   remonte pas sous l'en-tete ; le titre peut deborder dessus. */
.page-head-motif .page-head-copy {
    max-width: 70%;
}

.page-head-motif .page-head-bg {
    width: min(40vw, 640px);
    bottom: 0;
}

/* Contact : motif panoramique plus large, hero plus haut, l'image remonte sous l'en-tete. */
.page-head-contact {
    padding-top: clamp(4rem, 10vw, 8rem);
}

.page-head-contact .page-head-bg {
    width: min(54vw, 900px);
}

.prose {
    max-width: 70ch;
}

.prose h2 {
    font-size: 1.8rem;
    margin-top: 2.2em;
}

.prose h3 {
    font-size: 1.3rem;
    margin-top: 1.6em;
}

/* Un titre qui ouvre le bloc s'aligne sur le haut de la colonne voisine. */
.prose> :first-child {
    margin-top: 0;
}

.prose ul {
    padding-left: 1.2em;
}

.prose li {
    margin-bottom: .4em;
}

.prose small {
    color: var(--muted);
}

.todo {
    border: 1px dashed var(--blue-ink);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background: #f1f5ff;
    color: var(--navy);
    font-size: .95rem;
}

.todo::before {
    content: "Outils actuels : ";
    display: block;
    font-size: .7rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--blue-ink);
    margin-bottom: .4rem;
}

mark.todo-inline {
    background: #e6eeff;
    color: var(--navy);
    padding: 0 .3em;
    border-radius: 3px;
}

/* ---------- Formulaire ---------- */
.form {
    display: grid;
    gap: 1.25rem;
}

.form label {
    display: block;
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: .4rem;
}

.form label small {
    font-weight: 400;
    color: var(--muted);
}

.form input,
.form textarea {
    width: 100%;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .8rem .95rem;
}

.form input:focus,
.form textarea:focus {
    outline: 2px solid var(--navy);
    outline-offset: 1px;
    border-color: var(--navy);
}

.form textarea {
    min-height: 11rem;
    resize: vertical;
}

.form .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form .consent {
    font-size: .86rem;
    color: var(--muted);
}

.alert {
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
}

.alert-ok {
    background: #eef7ef;
    border-color: #b9dcc0;
    color: #1f5a2c;
}

.alert-err {
    background: #fdf0f0;
    border-color: #efc4c4;
    color: #8a2a2a;
}

/* ---------- A propos ---------- */
/* ---------- Responsive ---------- */
@media (min-width: 1240px) {
    .hero-words {
        display: block;
    }
}

@media (max-width: 1000px) {
    .services {
        grid-template-columns: 1fr 1fr;
    }

    .service {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding-left: 0 !important;
    }

    .service:nth-child(odd) {
        border-right: 1px solid var(--line);
        padding-right: 1.75rem;
    }

    .service:nth-child(even) {
        padding-left: 1.75rem !important;
    }

    /* Cinq metiers sur deux colonnes : le dernier prend toute la largeur. */
    .service:nth-child(5) {
        grid-column: 1 / -1;
        border-right: 0;
        padding-right: 0;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cards,
    .works {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .nav-toggle {
        display: flex;
    }

    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem var(--gutter) 1.75rem;
        display: none;
    }

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

    .nav ul {
        flex-direction: column;
        gap: .75rem;
    }

    .nav ul a {
        display: block;
        font-size: 1.1rem;
        padding-block: .35rem;
    }

    .nav .btn {
        justify-content: center;
    }

    body.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Avec la vignette, deux colonnes sont trop etroites sous 900px. */
    .problems {
        grid-template-columns: 1fr;
    }

    /* Sous 900px, le visuel de l'en-tete de page revient dans le flux, sous le texte. */
    .page-head-visual .page-head-copy {
        max-width: none;
    }

    .page-head-bg {
        position: static;
        height: auto;
        width: calc(100% - 2 * var(--gutter));
        max-width: 480px;
        margin: 1.5rem auto 0;
    }

    /* Sous 900px, la colonne droite (vide) disparait : le texte prend toute la largeur. */
    .hero-art {
        display: none;
    }

    .split,
    .split-narrow {
        grid-template-columns: 1fr;
    }

    .apps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {

    .problem {
        grid-template-columns: 5.4rem 1fr;
        gap: 1rem;
    }

    .problems,
    .cards,
    .works,
    .cards-2,
    .services {
        grid-template-columns: 1fr;
    }

    .service,
    .service:nth-child(odd) {
        border-right: 0;
        padding-right: 0;
        padding-left: 0 !important;
    }

    .service:nth-child(even) {
        padding-left: 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .form .row {
        grid-template-columns: 1fr;
    }

    .steps li {
        grid-template-columns: 3.5rem 1fr;
        gap: 1rem;
    }

    .band span {
        white-space: normal;
        text-align: center;
        line-height: 1.8;
    }

    .band::before,
    .band::after {
        flex: 1 0 1rem;
    }

    .hero .actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero h1 {
        width: auto;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }

    /* Pas de video animee : l'image poster en fond de .hero reste seule. site.js
       arrete aussi la lecture pour ne pas telecharger le fichier. */
    .hero-video {
        display: none;
    }
}