/* HARRY INGÉNIERIE — feuille de style commune du site (accueil et pages intérieures) */
/* Mise en page « registre » : chaque section a une colonne d'intitulé à gauche (comme le libellé d'un compte) et son contenu à droite ; bandeaux bleu nuit pour le produit phare. */
:root {
    --papier: #f3f6f9;      /* fond de page */
    --surface: #ffffff;     /* cartes, formulaire */
    --encre: #10283a;       /* texte principal */
    --encre-2: #4b6072;     /* texte secondaire */
    --trait: #d6e0e8;       /* filets */
    --teinte: #e5eef5;      /* fonds légers */
    --bleu: #1b4f72;        /* couleur de la charte */
    --bleu-texte: #1b4f72;  /* liens et intitulés */
    --bouton: #1b4f72;
    --bouton-survol: #123a56;
    --vert: #198754;
    --rouge: #dc3545;
    --or: #b7860b;          /* ruban « à la une », utilisé avec parcimonie */
    --nuit: #0f2e45;        /* bandeaux sombres (identiques dans les deux thèmes) */
    --nuit-2: #1b4f72;
    --sur-nuit: #eef4f8;
    --sur-nuit-2: #a9c2d4;
    --nuit-trait: rgba(255,255,255,.16);
    --ombre: 0 1px 2px rgba(16,40,58,.06), 0 8px 24px rgba(16,40,58,.07);
    --f-titre: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --f-texte: 'IBM Plex Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    --f-chiffre: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
    --large: 1180px;
    --rayon: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --papier: #0c1720; --surface: #12212d; --encre: #e4ecf2; --encre-2: #9db0bf; --trait: #23384a; --teinte: #16293a;
    --bleu: #2f78ad; --bleu-texte: #8cc0ea; --bouton: #2f78ad; --bouton-survol: #3d8cc4; --vert: #3fbf7f; --rouge: #f07481; --or: #e0b443;
    --nuit: #0a1c2a; --nuit-2: #133d5c; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark; } }
:root[data-theme="dark"] {
    --papier: #0c1720; --surface: #12212d; --encre: #e4ecf2; --encre-2: #9db0bf; --trait: #23384a; --teinte: #16293a;
    --bleu: #2f78ad; --bleu-texte: #8cc0ea; --bouton: #2f78ad; --bouton-survol: #3d8cc4; --vert: #3fbf7f; --rouge: #f07481; --or: #e0b443;
    --nuit: #0a1c2a; --nuit-2: #133d5c; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 16px/1.6 var(--f-texte); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--surface); }
img, svg { max-width: 100%; }
a { color: var(--bleu-texte); }
h1, h2, h3, h4 { font-family: var(--f-titre); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--bleu-texte); outline-offset: 3px; border-radius: 4px; }
.i { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -.125em; }
.cadre { max-width: var(--large); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.saut { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bouton); color: #fff; padding: 10px 16px; border-radius: 8px; }
.saut:focus { top: 12px; }
.chiffre { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; }
.etiquette { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-texte); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.35rem; border-radius: 10px; border: 1.5px solid transparent;
       font: 600 .95rem/1.2 var(--f-texte); text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-plein { background: var(--bouton); color: #fff; }
.btn-plein:hover { background: var(--bouton-survol); }
.btn-ligne { border-color: var(--trait); color: var(--encre); background: var(--surface); }
.btn-ligne:hover { border-color: var(--bleu-texte); color: var(--bleu-texte); }
.btn-clair { background: #fff; color: #123a56; }
.btn-clair:hover { background: #e6f0f7; }
.btn-fantome { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn-fantome:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-petit { padding: .55rem 1rem; font-size: .88rem; }
.lien { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; text-decoration: none; color: var(--bleu-texte); }
.lien .i { transition: transform .15s; }
.lien:hover .i { transform: translateX(4px); }

/* Accueil */
.hero { background: radial-gradient(ellipse 70% 90% at 85% 20%, #22628e 0%, transparent 60%), linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--sur-nuit); position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(var(--nuit-trait) 1px, transparent 1px); background-size: 100% 34px;
    mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.hero .cadre { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: 4.5rem 6.5rem; }
.hero .etiquette { color: #a8e6c1; }
.hero h1 { font-size: clamp(2.3rem, 1.6rem + 2.8vw, 3.75rem); margin: 1rem 0 1.4rem; color: #fff; }
.hero h1 em { font-style: italic; color: #a8e6c1; font-weight: 500; }
.hero .chapeau { font-size: 1.12rem; color: #cfdfeb; max-width: 60ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.atouts { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin-top: 2.4rem; font-size: .9rem; color: #cfdfeb; }
.atouts li { display: inline-flex; gap: .5rem; align-items: center; }
.atouts .i { color: #a8e6c1; }
.une { text-align: center; position: relative; }
.une::before { content: ""; position: absolute; left: 50%; top: 40%; width: 110%; aspect-ratio: 1; max-width: 100%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(143,211,255,.28), transparent 65%); pointer-events: none; }
.une-ruban { position: absolute; top: 2%; left: 4%; z-index: 2; background: #f5b301; color: #1a1300; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 999px; display: inline-flex; gap: .35rem; align-items: center; }
.boite { position: relative; max-width: 400px; margin: 0 auto; display: block; animation: flotte 7s ease-in-out infinite; }
.boite svg { display: block; width: 100%; height: auto; }
@keyframes flotte { 50% { transform: translateY(-10px); } }
.une figcaption { position: relative; margin-top: .4rem; }
.une figcaption strong { display: block; font: 600 1.35rem var(--f-titre); color: #fff; }
.une figcaption span { font-size: .92rem; color: var(--sur-nuit-2); }
.une .actions { justify-content: center; margin-top: 1rem; display: flex; gap: .6rem; flex-wrap: wrap; }
@media (max-width: 900px) { .hero .cadre { grid-template-columns: minmax(0, 1fr); padding-block: 3rem 5.5rem; } .boite { max-width: 300px; } }

/* Chiffres clés */
.chiffres { margin-top: -3.2rem; position: relative; z-index: 2; }
.chiffres ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); }
.chiffres li { padding: 1.4rem 1.5rem; border-left: 1px solid var(--trait); }
.chiffres li:first-child { border-left: 0; }
.chiffres b { display: block; font: 600 2rem/1.1 var(--f-chiffre); color: var(--bleu-texte); }
.chiffres span { font-size: .9rem; color: var(--encre-2); }
@media (max-width: 720px) { .chiffres ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chiffres li:nth-child(3) { border-left: 0; } .chiffres li:nth-child(n+3) { border-top: 1px solid var(--trait); } }

/* Sections au format registre */
.section { padding-block: 5.5rem; }
.section + .section { border-top: 1px solid var(--trait); }
.section.teinte { background: var(--surface); }
.registre { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 2.5rem 4rem; }
.registre > header { align-self: start; position: sticky; top: 110px; display: grid; gap: 1rem; }
.registre > header p { color: var(--encre-2); }
.entete-centre { max-width: 760px; display: grid; gap: 1rem; margin-bottom: 3rem; }
.entete-centre p { color: var(--encre-2); font-size: 1.05rem; max-width: 62ch; }
@media (max-width: 900px) { .registre { grid-template-columns: minmax(0, 1fr); } .registre > header { position: static; } .section { padding-block: 4rem; } }

/* Illustrations (fichiers SVG remplaçables par des photos de même proportion) */
.illus { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: var(--ombre); }
.registre > header .illus { margin-top: .5rem; max-width: 420px; }
.entete-image { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; align-items: center; margin-bottom: 3rem; }
.entete-image .entete-centre { margin-bottom: 0; }
.entete-image .illus.etroite { max-width: 420px; justify-self: end; }
@media (max-width: 900px) { .entete-image { grid-template-columns: minmax(0, 1fr); } .entete-image .illus.etroite { justify-self: start; } }
.conseil-droite { display: grid; gap: 2rem; align-content: start; }
.conseil-droite .illus { max-width: 520px; }

/* Domaines d'expertise : lignes du registre */
.lignes li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; padding: 1.6rem 0; border-top: 1px solid var(--trait); }
.lignes li:last-child { border-bottom: 1px solid var(--trait); }
.pastille { width: 52px; height: 52px; border-radius: 12px; background: var(--teinte); color: var(--bleu-texte); display: grid; place-items: center; font-size: 1.4rem; }
.lignes h3 { margin-bottom: .35rem; }
.lignes p { color: var(--encre-2); max-width: 62ch; }
.lignes .lien { margin-top: .2rem; white-space: nowrap; }
@media (max-width: 640px) { .lignes li { grid-template-columns: 44px minmax(0, 1fr); } .lignes .lien { grid-column: 2; } .pastille { width: 44px; height: 44px; font-size: 1.2rem; } }

/* Logiciels */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filtres button { font: 500 .9rem var(--f-texte); padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); cursor: pointer; }
.filtres button:hover { border-color: var(--bleu-texte); color: var(--bleu-texte); }
.filtres button[aria-pressed="true"] { background: var(--bouton); border-color: var(--bouton); color: #fff; }
.grille { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grille { grid-template-columns: minmax(0, 1fr); } }
.produit { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem; display: flex; flex-direction: column; gap: .9rem; transition: border-color .15s, transform .15s; }
.produit:hover { border-color: var(--bleu-texte); transform: translateY(-2px); }
.produit { padding: .75rem .75rem 1.5rem; }
.produit > :not(.vignette) { margin-inline: .85rem; }
.vignette { margin: 0; position: relative; }
.vignette img { display: block; width: 100%; height: auto; border-radius: 10px; }
.vignette .badge-phare { position: absolute; top: 10px; left: 10px; }
.produit .nom { display: flex; gap: .85rem; align-items: center; margin-top: .4rem; }
.produit .nom .pastille { width: 44px; height: 44px; font-size: 1.2rem; flex-shrink: 0; }
.produit.phare .vignette img { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.produit h3 { font-size: 1.35rem; }
.produit .accroche { font-size: .88rem; font-weight: 600; color: var(--bleu-texte); margin-top: .2rem; }
.produit p { color: var(--encre-2); font-size: .95rem; }
.produit ul { display: grid; gap: .4rem; font-size: .92rem; }
.produit li { display: flex; gap: .55rem; }
.produit li .i { color: var(--vert); margin-top: .3em; }
.produit .actions { margin-top: auto; padding-top: .6rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.produit.phare { background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); border-color: transparent; color: var(--sur-nuit); }
.produit.phare h3 { color: #fff; }
.produit.phare .accroche { color: #a8e6c1; }
.produit.phare p, .produit.phare ul { color: #cfdfeb; }
.produit.phare li .i { color: #a8e6c1; }
.produit.phare .pastille { background: rgba(255,255,255,.1); color: #fff; }
.produit.phare .btn-ligne { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.badge-phare { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #f5b301; color: #1a1300; padding: .3rem .65rem; border-radius: 999px; white-space: nowrap; }
.produit[hidden] { display: none; }

/* SmartAudit en détail */
.sa { background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--sur-nuit); }
.sa .etiquette { color: #a8e6c1; }
.sa h2 { color: #fff; }
.sa-haut { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3.5rem; align-items: center; }
.sa-haut > div:first-child { display: grid; gap: 1.2rem; }
.sa-haut p { color: #cfdfeb; max-width: 58ch; }
.coches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.5rem; font-size: .95rem; color: #dfeaf2; }
.coches li { display: flex; gap: .5rem; }
.coches .i { color: #a8e6c1; margin-top: .3em; }
@media (max-width: 960px) { .sa-haut { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .coches { grid-template-columns: minmax(0, 1fr); } }
/* Démonstration : une pièce devient une écriture */
.demo { display: grid; grid-template-columns: 215px auto minmax(0, 1fr); gap: 1rem; align-items: center; }
.piece { background: #fbfaf6; color: #1d2a33; border-radius: 6px; padding: 1.1rem 1.1rem 1.3rem; box-shadow: 0 18px 40px rgba(0,0,0,.35); transform: rotate(-2.5deg); font-size: .8rem; position: relative; }
.piece::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; background: radial-gradient(circle at 6px 0, #fbfaf6 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.piece b { display: block; font-family: var(--f-titre); font-size: 1rem; }
.piece .meta { color: #66737d; margin-bottom: .7rem; }
.piece table { width: 100%; border-collapse: collapse; }
.piece td { padding: .22rem 0; border-top: 1px dashed #cfd5d9; }
.piece td:last-child { text-align: right; font-family: var(--f-chiffre); white-space: nowrap; padding-left: .5rem; }
.piece tr.total td { font-weight: 700; border-top: 1.5px solid #1d2a33; }
.fleche { color: #a8e6c1; font-size: 1.8rem; display: grid; justify-items: center; gap: .2rem; }
.fleche small { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-nuit-2); }
.ecriture { background: rgba(255,255,255,.06); border: 1px solid var(--nuit-trait); border-radius: 10px; overflow: hidden; font-size: .82rem; min-width: 0; }
.ecriture .titre { padding: .65rem .9rem; display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px solid var(--nuit-trait); color: var(--sur-nuit-2); }
.ecriture .titre .ok { color: #a8e6c1; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; }
.defile { overflow-x: auto; }
.ecriture table { width: 100%; border-collapse: collapse; min-width: 310px; }
.ecriture th { text-align: left; font-weight: 500; color: var(--sur-nuit-2); padding: .5rem .6rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.ecriture td { padding: .55rem .6rem; border-top: 1px solid var(--nuit-trait); color: #eef4f8; }
.ecriture td.n, .ecriture th.n { text-align: right; }
.ecriture td.cpt { font-family: var(--f-chiffre); color: #a8e6c1; }
.ecriture td.n { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecriture tfoot td { font-weight: 600; border-top: 1.5px solid rgba(255,255,255,.35); }
@media (max-width: 1100px) and (min-width: 961px), (max-width: 640px) { .demo { grid-template-columns: minmax(0, 1fr); } .fleche .i { transform: rotate(90deg); } .piece { max-width: 300px; margin: 0 auto; } }
.circuit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 4rem; counter-reset: etape; }
.circuit li { padding: 1.5rem 1.4rem 0 0; border-top: 2px solid var(--nuit-trait); position: relative; }
.circuit li::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); position: absolute; top: -14px; left: 0; background: #a8e6c1; color: #0f2e45; font: 600 .8rem var(--f-chiffre); padding: .2rem .5rem; border-radius: 6px; }
.circuit h3 { color: #fff; font-size: 1.1rem; margin-bottom: .4rem; }
.circuit p { color: #cfdfeb; font-size: .92rem; }
.sa-bas { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; padding-top: 2rem; border-top: 1px solid var(--nuit-trait); }
.sa-bas p { color: #cfdfeb; max-width: 60ch; }
.sa-bas b { color: #fff; }
@media (max-width: 860px) { .circuit { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }
@media (max-width: 480px) { .circuit { grid-template-columns: minmax(0, 1fr); } }

/* Services & matériel */
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.2rem 2rem; }
.services li { display: grid; gap: .55rem; }
.services .pastille { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: .3rem; }
.services h3 { font-size: 1.12rem; }
.services p { color: var(--encre-2); font-size: .95rem; }
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .services { grid-template-columns: minmax(0, 1fr); } }
.materiel { margin-top: 3.5rem; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 2rem; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.materiel .baie { max-width: 260px; }
.materiel-texte { display: grid; gap: 1rem; justify-items: start; }
.materiel-texte > p { color: var(--encre-2); max-width: 60ch; }
.materiel-texte .equipements { width: 100%; }
.equipements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.equipements li { background: var(--surface); border: 1px solid var(--trait); border-radius: 10px; padding: .9rem 1rem; display: flex; gap: .75rem; align-items: center; }
.equipements .i { font-size: 1.4rem; color: var(--bleu-texte); }
.equipements b { display: block; font-size: .93rem; }
.equipements span { font-size: .8rem; color: var(--encre-2); }
@media (max-width: 900px) { .materiel { grid-template-columns: minmax(0, 1fr); } .materiel .baie { max-width: 220px; } }
@media (max-width: 560px) { .equipements { grid-template-columns: minmax(0, 1fr); } .materiel { padding: 1.4rem; } }

/* Conseil */
.liste-coche { display: grid; gap: .6rem; }
.liste-coche li { display: flex; gap: .6rem; }
.liste-coche .i { color: var(--vert); margin-top: .3em; }
.methode { counter-reset: m; display: grid; gap: 0; }
.methode li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; padding: 1.4rem 0; border-top: 1px solid var(--trait); }
.methode li:last-child { border-bottom: 1px solid var(--trait); }
.methode li::before { counter-increment: m; content: counter(m, decimal-leading-zero); font: 600 1.6rem/1 var(--f-chiffre); color: var(--bleu-texte); }
.methode h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.methode p { color: var(--encre-2); }

/* Hébergement */
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.offre { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem; position: relative; }
.offre.conseillee { border: 2px solid var(--bleu-texte); background: var(--surface); box-shadow: var(--ombre); }
.offre .offre-img { border-radius: 12px; box-shadow: none; }
.offre .marqueur { position: absolute; top: -13px; left: 1.8rem; background: var(--bouton); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; }
.offre h3 { font-size: 1.3rem; }
.offre > p { color: var(--encre-2); font-size: .95rem; }
.offre ul { display: grid; gap: .5rem; font-size: .93rem; }
.offre li { display: flex; gap: .55rem; }
.offre li .i { color: var(--vert); margin-top: .3em; }
.offre .btn { margin-top: auto; }
.note { margin-top: 1.8rem; color: var(--encre-2); font-size: .93rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
@media (max-width: 900px) { .offres { grid-template-columns: minmax(0, 1fr); } }

/* Support */
.support { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.support li { border-top: 2px solid var(--bleu-texte); padding-top: 1.2rem; display: grid; gap: .45rem; align-content: start; }
.support .i { font-size: 1.5rem; color: var(--bleu-texte); }
.support h3 { font-size: 1.1rem; }
.support p { color: var(--encre-2); font-size: .93rem; }
@media (max-width: 900px) { .support { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .support { grid-template-columns: minmax(0, 1fr); } }
.incident { margin-top: 2.5rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.incident > div { display: flex; gap: 1rem; align-items: center; min-width: 0; }
.incident b { display: block; }
.incident span { color: var(--encre-2); font-size: .93rem; }

/* Démarrer */
.demarrer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: d; }
.demarrer li { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.demarrer li::before { counter-increment: d; content: "Étape " counter(d); font: 600 .78rem var(--f-chiffre); letter-spacing: .08em; text-transform: uppercase; color: var(--vert); }
.demarrer p { color: var(--encre-2); font-size: .95rem; }
@media (max-width: 860px) { .demarrer { grid-template-columns: minmax(0, 1fr); } }

/* FAQ */
.faq { display: grid; gap: .75rem; }
.faq details { background: var(--surface); border: 1px solid var(--trait); border-radius: 12px; }
.faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 600; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { transition: transform .2s; color: var(--bleu-texte); }
.faq details[open] summary .i { transform: rotate(180deg); }
.faq details[open] summary { color: var(--bleu-texte); }
.faq details p { padding: 0 1.3rem 1.2rem; color: var(--encre-2); max-width: 70ch; }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--trait); }
.contact-info { background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); color: var(--sur-nuit); padding: 2.5rem; display: grid; gap: 1.5rem; align-content: start; }
.contact-info h2 { color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.2rem); }
.contact-info > p { color: #cfdfeb; }
.coordonnees { display: grid; gap: 1rem; }
.coordonnees li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; align-items: center; }
.coordonnees .pastille { width: 40px; height: 40px; background: rgba(255,255,255,.1); color: #a8e6c1; font-size: 1.05rem; }
.coordonnees small { display: block; color: var(--sur-nuit-2); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.coordonnees a, .coordonnees b { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.coordonnees a:hover { text-decoration: underline; }
.copier { background: none; border: 1px solid rgba(255,255,255,.3); color: var(--sur-nuit-2); border-radius: 6px; font: 500 .75rem var(--f-texte); padding: .15rem .5rem; margin-left: .4rem; cursor: pointer; vertical-align: middle; }
.copier:hover { color: #fff; border-color: #fff; }
form.formulaire { background: var(--surface); padding: 2.5rem; display: grid; gap: 1.1rem; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.champ { display: grid; gap: .4rem; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-size: .86rem; font-weight: 600; }
.champ input, .champ select, .champ textarea { width: 100%; font: 400 1rem var(--f-texte); color: var(--encre); background: var(--papier); border: 1px solid var(--trait); border-radius: 10px; padding: .8rem .9rem; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--bleu-texte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bleu-texte) 20%, transparent); }
.champ .erreur { display: none; color: var(--rouge); font-size: .82rem; }
.verifie .champ :invalid { border-color: var(--rouge); }
.verifie .champ :invalid ~ .erreur { display: block; }
.mention { font-size: .84rem; color: var(--encre-2); display: flex; gap: .4rem; align-items: center; justify-content: center; }
.confirmation { background: color-mix(in srgb, var(--vert) 12%, transparent); border: 1px solid color-mix(in srgb, var(--vert) 40%, transparent); color: var(--encre); padding: .9rem 1rem; border-radius: 10px; font-size: .93rem; }
@media (max-width: 900px) { .contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .champs { grid-template-columns: minmax(0, 1fr); } form.formulaire, .contact-info { padding: 1.6rem; } }

/* Pied de page */
.pied { background: var(--nuit); color: var(--sur-nuit-2); font-size: .92rem; }
.pied .cadre { padding-block: 3.5rem 2rem; }
.pied-haut { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--nuit-trait); }
.pied .marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: #fff; }
.pied .marque svg { width: 46px; height: 46px; flex-shrink: 0; }
.marque-nom { font: 700 1.05rem/1.1 var(--f-texte); letter-spacing: .07em; }
.marque-nom small { display: block; font-weight: 500; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-top: 4px; }
.pied .marque-nom small { color: var(--sur-nuit-2); }
.pied h2 { font: 600 .8rem var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.pied ul { display: grid; gap: .5rem; }
.pied a { color: var(--sur-nuit-2); text-decoration: none; }
.pied a:hover { color: #fff; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; padding-top: 1.5rem; font-size: .85rem; }
.pied-bas button { background: none; border: 0; color: var(--sur-nuit-2); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
@media (max-width: 860px) { .pied-haut { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-haut > div:first-child { grid-column: 1 / -1; } }

.remonter { position: fixed; right: calc(25px + env(safe-area-inset-right, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 12px; background: var(--bouton); color: #fff; display: grid; place-items: center; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: var(--ombre); }
.remonter.visible { opacity: 1; pointer-events: auto; }

/* Fenêtres (fiche logiciel, mentions légales) */
dialog { border: 0; padding: 0; border-radius: 18px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--surface); color: var(--encre); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(8,22,34,.6); }
.fen-tete { background: linear-gradient(160deg, var(--nuit) 0%, var(--nuit-2) 100%); color: #fff; padding: 1.6rem 1.8rem; display: flex; gap: 1rem; align-items: center; }
.fen-tete .pastille { background: rgba(255,255,255,.12); color: #fff; }
.fen-tete h2 { font-size: 1.6rem; color: #fff; }
.fen-tete p { color: var(--sur-nuit-2); font-size: .92rem; }
.fen-tete.simple { background: var(--surface); color: var(--encre); border-bottom: 1px solid var(--trait); }
.fen-tete.simple h2 { color: var(--encre); font-size: 1.3rem; }
.fermer { margin-left: auto; background: rgba(255,255,255,.12); border: 0; color: inherit; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; }
.fen-tete.simple .fermer { background: var(--teinte); }
.fen-corps { padding: 1.8rem; display: grid; gap: 1.4rem; overflow-y: auto; }
.fen-corps > p { color: var(--encre-2); }
.fiche-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.fen-corps h3 { font: 600 .78rem var(--f-texte); letter-spacing: .1em; text-transform: uppercase; color: var(--bleu-texte); margin-bottom: .8rem; }
.fen-corps ul { display: grid; gap: .45rem; font-size: .95rem; }
.fen-corps li { display: flex; gap: .55rem; }
.fen-corps li .i { color: var(--vert); margin-top: .3em; }
.deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 560px) { .deux { grid-template-columns: minmax(0, 1fr); } }
.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
.puces span { background: var(--teinte); color: var(--bleu-texte); font-size: .82rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
.fen-pied { padding: 0 1.8rem 1.8rem; display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }
.mentions { padding: 1.6rem 1.8rem; display: grid; gap: .8rem; font-size: .93rem; }

/* Entrée de l'accueil */
@media (prefers-reduced-motion: no-preference) {
    .hero .entree { animation: monte .7s ease-out both; }
    .hero .entree:nth-child(2) { animation-delay: .08s; } .hero .entree:nth-child(3) { animation-delay: .16s; }
    .hero .entree:nth-child(4) { animation-delay: .24s; } .hero .entree:nth-child(5) { animation-delay: .32s; }
    @keyframes monte { from { transform: translateY(14px); opacity: .001; } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .boite { animation: none; } .produit:hover { transform: none; } }

/* =====================================================================
   Pages intérieures (smartaudit, actualités, contact, pages légales)
   ===================================================================== */
.pied .pied-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pied a.btn-clair { color: #123a56; text-decoration: none; }
.pied a.btn-clair:hover { color: #123a56; }
.pied-legal a { color: var(--sur-nuit-2); text-decoration: underline; text-underline-offset: 3px; }

/* Bandeau de titre */
.bandeau-page { background: var(--nuit); color: var(--sur-nuit); padding-block: 2.2rem 3.4rem; position: relative; overflow: hidden; }
.bandeau-page::after { content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(47,120,173,.35), transparent 70%); pointer-events: none; }
.bandeau-page .cadre { position: relative; z-index: 1; display: grid; gap: .9rem; }
.bandeau-page .etiquette { color: #a8e6c1; }
.bandeau-page h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); color: #fff; max-width: 24ch; }
.bandeau-page .chapeau { color: var(--sur-nuit-2); font-size: 1.1rem; max-width: 62ch; }
.bandeau-page .actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.fil ol { display: flex; flex-wrap: wrap; gap: .3rem; font-size: .85rem; color: var(--sur-nuit-2); }
.fil li + li::before { content: "/"; margin-right: .3rem; opacity: .6; }
.fil a { color: var(--sur-nuit); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* Texte courant (pages légales, articles) */
.prose { max-width: 72ch; display: grid; gap: 1rem; font-size: 1.02rem; }
.prose h2 { font-size: 1.5rem; margin-top: 1.4rem; }
.prose h3 { font-size: 1.15rem; margin-top: .6rem; }
.prose ul { display: grid; gap: .4rem; padding-left: 1.2rem; list-style: disc; }
.prose ul li::marker { color: var(--bleu-texte); }
.prose .a-completer { background: #fff5d6; color: #6b4f00; border-radius: 4px; padding: 0 .3rem; font-size: .92em; }
:root[data-theme="dark"] .prose .a-completer { background: #3a3010; color: #f1d58a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prose .a-completer { background: #3a3010; color: #f1d58a; } }
.colonnes-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: start; }
.encart { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: .8rem; position: sticky; top: 100px; }
.encart h2 { font-size: 1.15rem; }
.encart p { font-size: .93rem; color: var(--encre-2); }
.encart .btn { width: 100%; }
@media (max-width: 900px) { .colonnes-page { grid-template-columns: minmax(0, 1fr); } .encart { position: static; } }

/* Page SmartAudit : modules */
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.modules li { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.5rem; display: grid; gap: .6rem; align-content: start; }
.section.teinte .modules li { background: var(--papier); }
.modules .pastille { width: 46px; height: 46px; font-size: 1.25rem; }
.modules h3 { font-size: 1.12rem; }
.modules p { color: var(--encre-2); font-size: .94rem; }
@media (max-width: 900px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .modules { grid-template-columns: minmax(0, 1fr); } }

/* Formules */
.formules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; margin-top: 2.5rem; }
.formule { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: .9rem; position: relative; }
.formule.conseillee { border: 2px solid var(--bleu-texte); box-shadow: var(--ombre); }
.formule .marqueur { position: absolute; top: -13px; left: 1.4rem; background: var(--bouton); color: #fff; font-size: .75rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; }
.formule h3 { font-size: 1.3rem; }
.formule .cible { color: var(--encre-2); font-size: .9rem; min-height: 2.8em; }
.formule .quotas { display: grid; gap: .35rem; padding-block: .8rem; border-block: 1px solid var(--trait); font-size: .9rem; }
.formule .quotas li { display: flex; justify-content: space-between; gap: .6rem; }
.formule .quotas b { font-weight: 600; text-align: right; }
.formule .inclus { display: grid; gap: .45rem; font-size: .9rem; }
.formule .inclus li { display: flex; gap: .5rem; }
.formule .inclus .i { color: var(--vert); margin-top: .3em; }
.formule .btn { margin-top: auto; }
.formule .support-f { font-size: .82rem; color: var(--encre-2); }
@media (max-width: 1060px) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; } }
@media (max-width: 560px) { .formules { grid-template-columns: minmax(0, 1fr); } }

/* Tableau comparatif */
.tableau-defile { position: relative; overflow-x: auto; margin-top: 2rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.comparatif { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 640px; }
.comparatif th, .comparatif td { padding: .75rem 1rem; border-bottom: 1px solid var(--trait); text-align: center; }
.comparatif th:first-child, .comparatif td:first-child { text-align: left; }
.comparatif thead th { font-family: var(--f-titre); font-size: 1rem; background: var(--teinte); }
.comparatif tbody tr:last-child td { border-bottom: 0; }
.comparatif .oui { color: var(--vert); }
.comparatif .non { color: var(--encre-2); opacity: .55; }
.comparatif td.chiffre { font-family: var(--f-texte); font-weight: 600; }

/* Bandeau d'appel */
.appel { background: var(--nuit); color: var(--sur-nuit); border-radius: calc(var(--rayon) + 4px); padding: 2.4rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; }
.appel h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.appel p { color: var(--sur-nuit-2); margin-top: .5rem; max-width: 60ch; }
.appel .actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 760px) { .appel { grid-template-columns: minmax(0, 1fr); padding: 1.8rem 1.4rem; } }

/* Actualités */
.actus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.actu { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.actu:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.actu .bande { height: 6px; background: var(--c, var(--bleu)); }
.actu .corps { padding: 1.4rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.actu .meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .8rem; color: var(--encre-2); align-items: center; }
.actu .cat { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bleu-texte); }
.actu h2, .actu h3 { font-size: 1.2rem; }
.actu h2 a, .actu h3 a { color: inherit; text-decoration: none; }
.actu h2 a::after, .actu h3 a::after { content: ""; position: absolute; inset: 0; }
.actu { position: relative; }
.actu p { color: var(--encre-2); font-size: .94rem; }
.actu .lien { margin-top: auto; position: relative; z-index: 1; }
.actu[hidden] { display: none; }
.actus-vide { text-align: center; color: var(--encre-2); padding: 3rem 1rem; }
@media (max-width: 960px) { .actus { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .actus { grid-template-columns: minmax(0, 1fr); } }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; color: var(--sur-nuit-2); font-size: .9rem; align-items: center; }
.article-meta .i { margin-right: .3rem; }
.retour { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; }

/* Contact */
.contact-page .contact { align-items: start; }
.etapes-contact { display: grid; gap: 1rem; margin-top: 1.4rem; }
.etapes-contact li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; align-items: start; }
.etapes-contact b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.12); font-family: var(--f-chiffre); }
.etapes-contact span { color: var(--sur-nuit-2); font-size: .93rem; }
.raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.raccourcis a { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.3rem; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: .9rem; text-decoration: none; color: var(--encre); align-items: center; transition: border-color .15s, box-shadow .15s; }
.raccourcis a:hover { border-color: var(--bleu-texte); box-shadow: var(--ombre); }
.raccourcis .pastille { width: 46px; height: 46px; font-size: 1.2rem; }
.raccourcis b { display: block; font-size: 1rem; }
.raccourcis span { color: var(--encre-2); font-size: .88rem; }
@media (max-width: 860px) { .raccourcis { grid-template-columns: minmax(0, 1fr); } }
.confirmation.erreur-envoi { background: color-mix(in srgb, var(--rouge) 12%, transparent); border-color: color-mix(in srgb, var(--rouge) 45%, transparent); }
.btn[disabled] { opacity: .65; cursor: progress; }
.piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Page introuvable */
.introuvable { text-align: center; display: grid; gap: 1rem; justify-items: center; padding-block: 5rem; }
.introuvable .code { font-family: var(--f-chiffre); font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 600; color: var(--bleu-texte); line-height: 1; }
.introuvable p { color: var(--encre-2); max-width: 50ch; }
.introuvable .actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* Plan du site */
.plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.plan h2 { font-size: 1.2rem; margin-bottom: .8rem; }
.plan ul { display: grid; gap: .45rem; }
@media (max-width: 760px) { .plan { grid-template-columns: minmax(0, 1fr); } }

@media print {
    .hi-coord, .hi-entete, .pied, .remonter, .hi-chat-bouton, .hi-chat, .bandeau-page .actions { display: none !important; }
    .bandeau-page { background: none; color: #000; padding: 0 0 1rem; } .bandeau-page h1 { color: #000; }
}
.saut-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sa-page { padding-block: 2.2rem 5rem; }
.sa-page .fil { margin-bottom: 2.2rem; }
.sa-page h1 { color: #fff; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.support-f .i { color: var(--bleu-texte); }