@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/polices/inter-400-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/polices/inter-400-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/polices/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Clair, un seul accent : l'orange de la marque. En texte sur blanc, sa version foncée (5,2:1). */
:root{--bg:#fff; --papier:#f4f5f7; --line:#e3e7ee; --line-soft:#edf0f4; --text:#2b3442; --heading:#121a2a; --muted:#5b6576; --faint:#5f6875;
  --orange:#f0763a; --orange-txt:#b84a17; --nuit:#0f1115; --nuit-txt:#c3c7cf; --ease:cubic-bezier(.23,1,.32,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:100px}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--heading); letter-spacing:-.02em; line-height:1.15; margin:0}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
section{padding:96px 0}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.btn{display:inline-block; padding:13px 22px; border-radius:10px; background:var(--orange); color:var(--heading); text-decoration:none; border:0; font:inherit; font-weight:600; cursor:pointer;
  transition:background-color .15s var(--ease), transform .12s var(--ease)}
.btn:hover{background:#ff8f57}
.btn:active{transform:scale(.97)}
.lien{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); font-size:.95rem; transition:border-color .15s var(--ease)}
.lien:hover{border-color:var(--orange-txt)}

/* ---------- En-tête ---------- */
.entete{position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line-soft)}
.entete .wrap{display:flex; align-items:center; gap:32px; height:66px}
.marque{display:flex; align-items:center; gap:10px; text-decoration:none; padding:10px 0}
.marque span{font:400 1.3rem Georgia,'Times New Roman',serif; color:var(--heading)}
.marque span b{font-weight:400; color:var(--orange-txt)}
.nav-liens{display:flex; gap:26px; margin-left:auto}
.nav-liens a{color:var(--muted); text-decoration:none; font-size:.93rem; padding:10px 0; transition:color .15s var(--ease)}
.nav-liens a:hover{color:var(--heading)}
.entete .contact-lien{color:var(--orange-txt); text-decoration:none; font-weight:600; font-size:.93rem; padding:10px 0}
.contact-lien .court{display:none}

/* ---------- Hero : la promesse à gauche, deux réalisations à droite ---------- */
.hero{padding:80px 0 96px}
.hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:center}
.hero h1{font-size:clamp(2rem,4.2vw,3.3rem); font-weight:800; margin-bottom:22px}
.hero .accroche{color:var(--muted); font-size:1.1rem; max-width:44ch; margin:0 0 34px}
.hero .suite{display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.hero .accroche{max-width:40ch}
.hero-visuel img{width:100%; max-width:600px; margin-left:auto}

/* ---------- Réalisations ---------- */
#realisations{padding-top:24px}
.tete{max-width:640px; margin-bottom:64px}
.tete h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin-bottom:14px}
.tete p{color:var(--muted); margin:0; font-size:1.05rem}
.cas{display:grid; grid-template-columns:1fr 1.1fr; gap:72px; align-items:center; padding:64px 0; border-top:1px solid var(--line-soft)}
.cas:nth-of-type(even) .visuel{order:-1}
.cas .type{font-size:.8rem; color:var(--faint); margin-bottom:10px}
.cas h3{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:14px}
.cas p{margin:0 0 22px; color:var(--text); max-width:50ch}
.faits{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:0}
.faits li{display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line-soft); font-size:.93rem}
.faits li span{color:var(--muted)}
.faits li b{font-weight:600; color:var(--heading); text-align:right}
.liens{display:flex; gap:22px; flex-wrap:wrap}
.visuel{background:var(--papier); border-radius:16px; padding:20px; display:grid; place-items:center}
.visuel img{width:100%; max-width:600px}
.visuel.etroit img{max-width:480px}
.visuel.large{padding:0; overflow:hidden}
.visuel.large img{max-width:none}

.et-aussi{font-size:clamp(1.6rem,2.4vw,2rem); padding-top:72px; margin:8px 0 8px; border-top:1px solid var(--line-soft)}
.et-aussi-sous{color:var(--muted); margin:0 0 40px; font-size:1.05rem}
.autres{display:grid; grid-template-columns:repeat(3,1fr); gap:56px 32px}
.autre{display:flex; flex-direction:column; align-items:flex-start}
.autre img{width:100%; border-radius:12px; box-shadow:0 1px 2px rgba(18,26,42,.05), 0 10px 28px rgba(18,26,42,.08); margin-bottom:20px}
.autre .type{font-size:.82rem; color:var(--faint); margin-bottom:6px}
.autre h3{font-size:1.2rem; margin-bottom:8px}
.autre p{margin:0 0 14px; color:var(--muted); font-size:.95rem}
.autre > :last-child{margin-top:auto}
.autre > .type:last-child{font-size:.78rem; font-style:italic; margin-bottom:0}

/* ---------- Ce que je construis ---------- */
#construire{background:var(--papier)}
.offres{border-top:1px solid var(--heading)}
.offre{display:grid; grid-template-columns:1.1fr 1.6fr 1.3fr .8fr; gap:28px; padding:28px 0; border-bottom:1px solid var(--line); align-items:baseline}
.offre h3{font-size:1.2rem}
.offre p{margin:0; color:var(--text)}
.offre .ex{color:var(--muted); font-size:.93rem}
.offre .prix{text-align:right; font-weight:600; color:var(--heading); white-space:nowrap}
.offre .prix small{display:block; font-weight:400; color:var(--faint); font-size:.8rem}
.note{margin:22px 0 0; color:var(--muted); font-size:.93rem}

/* ---------- Bande sombre : par où vous arrivez ---------- */
.nuit{background:var(--nuit); color:var(--nuit-txt)}
.nuit h2{color:#fff}
.nuit .tete p{color:var(--nuit-txt)}
.entrees{display:grid; grid-template-columns:repeat(3,1fr); gap:40px}
.entree{border-top:2px solid var(--orange); padding-top:22px}
.entree h3{color:#fff; font-size:1.25rem; margin-bottom:10px}
.entree p{margin:0 0 18px}
.entree a{color:var(--orange); text-decoration:none; font-weight:600}
.entree a:hover{text-decoration:underline}

/* ---------- Méthode ---------- */
.etapes{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative}
.etapes::before{content:""; position:absolute; left:6px; right:6px; top:6px; height:1px; background:var(--line)}
.etapes li{position:relative; padding-top:34px}
.etapes li::before{content:""; position:absolute; left:0; top:0; width:13px; height:13px; border-radius:50%; background:var(--bg); border:2px solid var(--orange-txt)}
.etapes li:first-child::before{background:var(--orange-txt)}
.etapes b{display:block; color:var(--heading); font-size:1.05rem; margin-bottom:8px}
.etapes span{color:var(--muted); font-size:.95rem}

/* ---------- Contact ---------- */
.appel{background:var(--nuit); color:var(--nuit-txt); border-radius:18px; padding:64px 40px; text-align:center}
.appel h2{color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:12px}
.appel > p{max-width:54ch; margin:0 auto 30px}
.form{max-width:560px; margin:0 auto; text-align:left; display:grid; gap:12px}
.deux-champs{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.form label span{display:block; font-size:.82rem; color:var(--nuit-txt); margin-bottom:5px}
.form input,.form textarea{width:100%; font:inherit; color:var(--heading); background:#fff; border:1px solid transparent; border-radius:9px; padding:11px 12px}
.form input:focus,.form textarea:focus{outline:2px solid var(--orange); outline-offset:1px}
.form textarea{resize:vertical}
.form .btn{justify-self:start}
.pot{position:absolute; left:-9999px}
.etat-envoi{margin:0; font-size:.92rem; color:#fff; min-height:1.4em}
.etat-envoi a,.appel .direct a{color:#fff}
.appel .direct{margin:24px auto 0; font-size:.92rem}

/* ---------- Pied ---------- */
.pied{padding:36px 0 44px; border-top:1px solid var(--line-soft); font-size:.86rem; color:var(--faint)}
.pied .wrap{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap}
.pied a{color:var(--muted)}

/* ---------- Mobile ---------- */
@media (min-width:1200px){ .autres{gap:64px 40px} }
@media (max-width:1060px) and (min-width:901px){ .autres{grid-template-columns:1fr 1fr} }
@media (max-width:900px){
  section{padding:72px 0}
  .entete{position:static}
  .entete .wrap{flex-wrap:wrap; height:auto; gap:0 24px; padding-top:4px}
  .nav-liens{order:3; width:100%; margin:0; flex-wrap:wrap; gap:0 18px; border-top:1px solid var(--line-soft)}
  .nav-liens a{padding:7px 0}
  .nav-liens a{font-size:.88rem; white-space:nowrap}
  .entete .contact-lien{margin-left:auto}
  .contact-lien .long{display:none} .contact-lien .court{display:inline}
  .hero{padding:48px 0 72px}
  .hero .grid,.cas{grid-template-columns:1fr; gap:40px}
  .cas .visuel{order:-1}
  .hero .accroche{font-size:1rem}
  .faits li{flex-direction:column; gap:2px}
  .faits li b{text-align:left}
  .offre{grid-template-columns:1fr; gap:6px}
  .offre .prix{text-align:left; margin-top:2px; font-size:.95rem}
  .entrees,.etapes,.autres{grid-template-columns:1fr}
  .etapes::before{display:none}
  .deux-champs{grid-template-columns:1fr}
  .appel{padding:44px 22px}
}

/* ---------- Mouvement : seuls les visuels qui arrivent bougent ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- Pages de contenu (logiciels) ---------- */
.fil{font-size:.88rem; color:var(--faint); margin:0 0 18px}
.fil a{color:var(--muted)}
.tete-page{padding:56px 0 80px}
.tete-page .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.tete-page h1{font-size:clamp(2.1rem,4.4vw,3.3rem); font-weight:800; margin-bottom:20px}
.reponse{font-size:1.1rem; color:var(--muted); max-width:46ch; margin:0 0 30px}
.tete-page .art img{width:100%; max-width:600px; margin-left:auto}
.bloc{padding:88px 0; border-top:1px solid var(--line-soft)}
.bloc.papier{background:var(--papier); border-top:0}
.bloc.nuit{background:var(--nuit); color:var(--nuit-txt); border-top:0}
.bloc.nuit h2,.bloc.nuit h3,.bloc.nuit b{color:#fff}
.bloc h2{font-size:clamp(1.6rem,3vw,2.3rem); max-width:24ch; margin-bottom:14px}
.bloc .intro{color:var(--muted); max-width:58ch; margin:0 0 44px; font-size:1.05rem}
.bloc.nuit .intro{color:var(--nuit-txt)}
.bloc p a,.texte a{color:var(--orange-txt)}
.bloc.nuit p a{color:var(--orange)}
/* cartes de prix */
.prix-grille{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.carte-prix{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; display:flex; flex-direction:column}
.carte-prix .quoi{font-weight:600; color:var(--heading)}
.carte-prix .montant{font-size:2.4rem; font-weight:800; letter-spacing:-.03em; color:var(--heading); margin:14px 0 2px; line-height:1}
.carte-prix .montant small{font-size:.95rem; font-weight:500; color:var(--muted); letter-spacing:0}
.carte-prix .apres{color:var(--muted); font-size:.92rem; margin:6px 0 0}
.carte-prix img{width:100%; border-radius:10px; margin-bottom:20px; box-shadow:0 1px 2px rgba(18,26,42,.05),0 8px 22px rgba(18,26,42,.07)}
.carte-prix .lien{margin-top:auto; padding-top:16px; align-self:flex-start}
.note-prix{color:var(--faint); font-size:.88rem; margin:22px 0 0}
/* grille numérotée (facteurs, signes) */
.points{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px}
.points.deux{grid-template-columns:repeat(2,1fr)}
.point{border-top:1px solid var(--heading); padding-top:18px}
.bloc.nuit .point{border-color:rgba(255,255,255,.25)}
.point .n{font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--faint); display:block; margin-bottom:8px}
.bloc.nuit .point .n{color:var(--nuit-txt)}
.point h3{font-size:1.12rem; margin-bottom:8px}
.point p{margin:0; color:var(--muted); font-size:.96rem}
.bloc.nuit .point p{color:var(--nuit-txt)}
/* rangées image + texte */
.rangee{display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; padding:48px 0; border-top:1px solid var(--line-soft)}
.rangee:first-of-type{border-top:0; padding-top:0}
.rangee:nth-of-type(even) .visuel{order:-1}
.rangee h3{font-size:clamp(1.35rem,2.4vw,1.75rem); margin-bottom:14px}
.rangee .avant{color:var(--muted); margin:0 0 10px}
.rangee .apres{margin:0 0 18px}
.rangee .avant b,.rangee .apres b{color:var(--heading)}
/* comparatif en barres */
.barres{display:grid; gap:18px; max-width:760px}
.barre{display:grid; grid-template-columns:150px 1fr auto; gap:16px; align-items:center}
.barre b{font-size:.98rem}
.barre .piste{height:14px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden}
.bloc:not(.nuit) .barre .piste{background:var(--line-soft)}
.barre .piste i{display:block; height:100%; border-radius:99px; background:var(--faint)}
.barre.nous .piste i{background:var(--orange)}
.barre .val{font-family:'IBM Plex Mono',monospace; font-size:.92rem; white-space:nowrap}
.chiffres{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px}
.chiffre{border-top:2px solid var(--orange); padding-top:16px}
.chiffre b{display:block; font-family:'IBM Plex Mono',monospace; font-size:2.2rem; font-weight:400; color:var(--heading); letter-spacing:-.02em}
.chiffre span{color:var(--muted); font-size:.95rem}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.colonne{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px}
.colonne.nous{border-color:var(--heading)}
.colonne h3{font-size:1.2rem; margin-bottom:14px}
.colonne ul{list-style:none; margin:0; padding:0}
.colonne li{padding:10px 0; border-top:1px solid var(--line-soft); color:var(--text)}
.source{font-size:.86rem; color:var(--faint); margin-top:22px}
.bloc.nuit .source{color:var(--nuit-txt)}
.etapes-h{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.etapes-h li{border-top:2px solid var(--orange); padding-top:16px}
.etapes-h b{display:block; color:var(--heading); margin-bottom:6px}
.etapes-h span{color:var(--muted); font-size:.95rem}
.bloc.nuit .etapes-h span{color:var(--nuit-txt)}
.large-img{width:100%; border-radius:12px; border:1px solid var(--line); margin-top:8px}
.suite-lectures{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px}
.suite-lectures a{display:block; padding:20px 0 0; border-top:1px solid var(--heading); text-decoration:none; color:var(--heading); font-weight:600}
.suite-lectures span{display:block; color:var(--muted); font-weight:400; font-size:.93rem; margin-top:6px}
@media (max-width:900px){
  .tete-page{padding:36px 0 56px}
  .tete-page .grid,.rangee,.duo{grid-template-columns:1fr; gap:32px}
  .rangee .visuel,.rangee:nth-of-type(even) .visuel{order:-1}
  .prix-grille,.points,.points.deux,.chiffres,.etapes-h,.suite-lectures{grid-template-columns:1fr}
  .bloc{padding:64px 0}
  .barre{grid-template-columns:1fr auto; } .barre .piste{grid-column:1 / -1; order:3}
}
.prix-ligne{font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--heading); margin:-4px 0 16px}
/* audit design du 02/10 : cartes alignées, un seul idiome de filet, liens clairs sur fond sombre, hero posé, entrée douce */
.carte-prix img{aspect-ratio:4/3; object-fit:cover; object-position:top}
.etapes-h li{border-top:1px solid var(--heading)}
.bloc.nuit .etapes-h li{border-color:rgba(255,255,255,.25)}
.bloc.nuit p a{color:#fff; text-decoration:underline; text-decoration-color:rgba(255,255,255,.45)}
.tete-page .art{background:var(--papier); border-radius:16px; padding:28px 28px 0; overflow:hidden}
@keyframes arrivee{from{opacity:0; transform:translateY(12px)}}
@media (prefers-reduced-motion:no-preference){ .tete-page .art{animation:arrivee .5s var(--ease) both} }
@media (max-width:900px){
  .carte-prix:has(img){display:grid; grid-template-columns:96px 1fr; gap:0 16px; align-items:start}
  .carte-prix:has(img) img{grid-row:1 / 6; margin:0}
}
/* audit design, tour 2 */
.tete-page .art:has(img[src*="devis.webp"]){padding-bottom:28px}
.carte-prix{transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
@media (hover:hover) and (pointer:fine){ .carte-prix:has(.lien):hover{transform:translateY(-2px); box-shadow:0 1px 2px rgba(18,26,42,.05),0 14px 32px rgba(18,26,42,.1)} }
.carte-prix .quoi{display:block}
@media (min-width:901px){ .carte-prix .quoi{min-height:3.2em} }
@media (max-width:900px){
  .carte-prix:has(img){grid-template-columns:84px 1fr}
  .carte-prix:has(img) .montant{font-size:1.9rem; white-space:nowrap}
}
/* audit design, tour 3 : prix publics en lignes, apparition des cartes au défilement */
.lignes-prix{border-top:1px solid var(--heading)}
.ligne-prix{display:grid; grid-template-columns:1fr 1.6fr auto; gap:24px; align-items:baseline; padding:22px 0; border-bottom:1px solid var(--line)}
.ligne-prix .quoi{font-weight:600; color:var(--heading); font-size:1.1rem}
.ligne-prix .desc{color:var(--muted)}
.ligne-prix .montant{font-size:1.9rem; font-weight:800; letter-spacing:-.03em; color:var(--heading); white-space:nowrap; text-align:right}
.ligne-prix .montant small{font-size:.9rem; font-weight:500; color:var(--muted); letter-spacing:0}
@media (max-width:900px){ .ligne-prix{grid-template-columns:1fr auto; gap:4px 16px} .ligne-prix .desc{grid-column:1 / -1; order:3} }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes monte{from{opacity:0; translate:0 12px}}
    .carte-prix,.rangee .visuel{animation:monte linear both; animation-timeline:view(); animation-range:entry 0% entry 55%}
  }
}
/* schéma de flux (page Excel) */
.flux{display:grid; grid-template-columns:.7fr 1.15fr 1.15fr; gap:48px}
.etape-flux{position:relative}
.etape-flux .im{background:#fff; border:1px solid var(--line); border-radius:16px; height:280px; padding:22px; display:grid; place-items:center; margin-bottom:18px}
.etape-flux .im img{max-height:236px; width:auto; max-width:100%}
.etape-flux:not(:last-child)::after{content:"→"; position:absolute; right:-36px; top:122px; font-size:1.7rem; color:var(--orange-txt)}
.etape-flux .n{font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--faint)}
.etape-flux h3{font-size:1.12rem; margin:4px 0 6px}
.etape-flux p{margin:0; color:var(--muted)}
@media (max-width:900px){
  .flux{grid-template-columns:1fr; gap:44px}
  .etape-flux .im{height:220px} .etape-flux .im img{max-height:176px}
  .etape-flux:not(:last-child)::after{content:"↓"; right:auto; left:50%; top:auto; bottom:-40px}
}