/* equisuite.akel-solutions.fr — direction « Produit d'abord ». Palette reprise des deux logiciels. */
:root{--encre:#101a2b;--encre-2:#1b2a44;--fond:#f4f2ec;--carte:#fff;--trait:#e4e0d6;--texte:#1c2433;--doux:#667085;
  --vert:#0b8f63;--vert-f:#06704c;--vert-p:#e3f5ee;--menthe:#34d399;--rouge:#c0362c;
  --titre:"Bricolage Grotesque",sans-serif;--corps:"Instrument Sans",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--texte);font:17px/1.6 var(--corps)}
h1,h2,h3,h4{font-family:var(--titre);font-weight:800;line-height:1.04;margin:0;letter-spacing:-.025em}
a{color:var(--vert-f)}
img,svg{max-width:100%}
.large{max-width:1220px;margin:auto;padding:0 28px}
.etroit{max-width:820px}
.evitement{position:absolute;left:-999px}.evitement:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 14px;border-radius:8px}
:focus-visible{outline:3px solid var(--menthe);outline-offset:3px}

/* Barre de navigation */
.barre{position:sticky;top:0;z-index:20;background:rgba(244,242,236,.9);backdrop-filter:blur(8px);border-bottom:1px solid transparent}
.barre .large{display:flex;align-items:center;gap:26px;height:74px}
.barre .lien,.barre .bt{white-space:nowrap;flex:none}
.marque{display:flex;align-items:center;gap:10px;font:400 25px var(--titre);letter-spacing:-.02em;margin-right:auto;color:var(--encre);text-decoration:none;white-space:nowrap;flex:none}
.marque img{display:block}
.marque i,.pied b i{font-style:normal;font-weight:800;color:var(--vert)}
.lien{color:var(--encre);text-decoration:none;font-weight:500;font-size:15px;padding:6px 0;border-bottom:2px solid transparent}
.lien:hover,.lien.actif{border-color:var(--vert)}

/* Boutons */
.bt{display:inline-block;padding:13px 22px;border-radius:10px;background:var(--encre);color:#fff;font-weight:600;font-size:15.5px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.bt:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(16,26,43,.55)}
.bt.vert{background:var(--vert)}
.bt.fil{background:none;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--encre)}
.bt.clair{background:#fff;color:var(--encre)}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.actions.gauche{justify-content:flex-start}

/* Accroche */
.hero{text-align:center;padding:60px 0 0}
.hero h1{font-size:clamp(44px,6.6vw,96px);max-width:1000px;margin:auto}
.hero h1 span,.titre-page h1 span,h3 span.v{color:var(--vert)}
.hero p{max-width:600px;margin:22px auto 28px;font-size:19.5px;color:var(--doux)}
.hero small{display:block;margin-top:14px;color:var(--doux);font-size:14px}
.titre-page{padding:70px 0 20px}
.titre-page h1{font-size:clamp(40px,5.4vw,76px);max-width:900px}
.titre-page p{max-width:640px;font-size:19.5px;color:var(--doux);margin:20px 0 26px}

/* Fenêtres du logiciel (dessinées en attendant les vraies captures) */
.scene{position:relative;height:520px;margin-top:56px}
.fen{position:absolute;background:var(--carte);border:1px solid var(--trait);border-radius:12px;box-shadow:0 40px 80px -40px rgba(16,26,43,.5);overflow:hidden;text-align:left}
.fen .b,.cadre .b{height:34px;background:var(--encre);display:flex;align-items:center;gap:6px;padding:0 12px;color:#9fb0c8;font-size:12px}
.fen .b i{width:9px;height:9px;border-radius:50%;background:#3b4a63}.fen .b span{margin-left:10px}
.f1{left:0;top:30px;width:62%;height:470px;transform:rotate(-1.2deg)}
.f2{right:0;top:0;width:47%;height:400px;transform:rotate(1.6deg)}
.f2 svg{display:block;width:100%;height:366px}
.f3{right:6%;bottom:0;width:230px;height:150px;transform:rotate(-3deg);background:var(--encre);color:#fff;padding:16px 18px;border:0}
.f3 small{font-size:11px;letter-spacing:.14em;color:#9fb0c8;text-transform:uppercase}
.f3 b{display:block;font:800 52px var(--titre);color:var(--menthe);font-variant-numeric:tabular-nums}
.ui{display:grid;grid-template-columns:150px 1fr;height:calc(100% - 34px)}
.ui aside{background:#faf8f3;border-right:1px solid var(--trait);padding:14px;font-size:13px;color:var(--doux)}
.ui aside p{margin:0 0 4px;padding:7px 10px;border-radius:7px}.ui aside p.on{background:var(--vert-p);color:var(--vert-f);font-weight:600}
.ui .zone{padding:16px 20px}.ui h4{margin:0 0 10px;font:700 17px var(--titre);letter-spacing:0}
.ui table{width:100%;border-collapse:collapse;font-size:13.5px}
.ui td,.ui th{padding:8px 6px;border-bottom:1px solid var(--trait);text-align:left}
.ui th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--doux)}
.ui td:nth-child(n+3),.ui th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}.ui tr.on td{background:var(--vert-p)}
.pa{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--vert-p);color:var(--vert-f);font-weight:600;font-size:12px}
.cadre{background:var(--carte);border:1px solid var(--trait);border-radius:14px;box-shadow:0 30px 60px -40px rgba(16,26,43,.5);overflow:hidden}
.cadre svg{display:block;width:100%}
/* Capture réelle du logiciel : cadrée à droite, le bord gauche de l'écran d'origine est coupé */
.cadre .capture{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:right center}
.poste{padding:26px;display:grid;gap:10px}
.poste .haut{display:flex;gap:10px}
.poste .piste{flex:1;background:var(--encre);color:#fff;border-radius:10px;padding:16px}
.poste .piste small{color:#9fb0c8}.poste .gros{font:800 24px var(--titre)}
.poste .fautes{background:var(--vert-p);border-radius:10px;padding:16px;text-align:center}.poste .fautes .gros{color:var(--vert-f)}
.poste .touches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-weight:600;text-align:center}
.poste .touches span{padding:14px;border:1px solid var(--trait);border-radius:10px}
.poste .touches span.ok{background:var(--vert);color:#fff;border-color:var(--vert)}

.preuves{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;padding:44px 28px;font-weight:500;color:var(--encre-2)}
.preuves span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vert);margin-right:10px}

/* Sections */
section{padding:84px 0}
section.serre{padding-top:20px}
.sur{font-weight:600;font-size:14px;color:var(--vert-f);margin-bottom:10px}
h2{font-size:clamp(32px,4.2vw,58px)}
.chapo{color:var(--doux);font-size:18.5px;max-width:680px;margin:16px 0 0}
.rang{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.rang.inv>:first-child{order:2}
.rang h3{font-size:44px}.rang p{color:var(--doux);font-size:18px}
.liste{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:10px}
.liste li{background:var(--carte);border:1px solid var(--trait);border-radius:10px;padding:12px 16px;font-weight:500}
.sombre{background:var(--encre);color:#fff}.sombre .sur{color:var(--menthe)}
.pas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.pas div{background:var(--encre-2);border-radius:14px;padding:28px}.pas b{font:800 15px var(--titre);color:var(--menthe)}
.pas h3{font-size:26px;margin:8px 0}.pas p{margin:0;color:#b6c2d4;font-size:15.5px}

/* Cartes de fonctions (pages produit) */
.fonctions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.fonction{background:var(--carte);border:1px solid var(--trait);border-radius:14px;padding:26px}
.fonction .n{font:800 14px var(--titre);color:var(--vert)}
.fonction h3{font-size:23px;margin:8px 0 8px;letter-spacing:-.01em}
.fonction p{margin:0;color:var(--doux);font-size:15.5px}
.encart{background:var(--vert-p);border-radius:14px;padding:24px 28px;margin-top:40px;color:var(--vert-f)}
.encart b{color:var(--encre)}
.appel{text-align:center}
.appel h2{max-width:780px;margin:auto}.appel p{color:var(--doux);margin:14px auto 24px;max-width:560px}
.sombre.appel p{color:#b6c2d4}

/* Grille des forfaits */
.grille{margin-top:40px;background:var(--carte);border:1px solid var(--trait);border-radius:16px;overflow:hidden}
.grille table{width:100%;border-collapse:collapse}
.grille th,.grille td{padding:16px 18px;border-bottom:1px solid var(--trait);text-align:center;font-size:15.5px}
.grille td:first-child,.grille th:first-child{text-align:left;font-weight:500;width:26%}
.grille th,.grille td{padding-left:12px;padding-right:12px}
.grille thead th{vertical-align:bottom;padding-top:26px}
.grille thead b{display:block;font:800 22px var(--titre)}
.grille thead em{display:block;font:800 30px var(--titre);font-style:normal;margin:6px 0 2px}
.grille thead small{color:var(--doux);font-weight:400}
.grille .p{background:var(--vert-p)}.grille thead .p{border-top:4px solid var(--vert)}
.oui{color:var(--vert);font-weight:700}.non{color:#c4c0b5}
.grille tfoot td{border:0;padding:20px 10px}
/* Tous les boutons à la même hauteur, que leur texte tienne sur une ligne ou sur deux */
.grille tfoot .bt{display:flex;align-items:center;justify-content:center;min-height:62px;padding:8px 12px;font-size:14.5px;line-height:1.25;text-align:center}
.note{color:var(--doux);font-size:14.5px;margin-top:20px;text-align:center}

/* Questions fréquentes */
.questions{margin-top:36px;display:grid;gap:10px}
.questions details{background:var(--carte);border:1px solid var(--trait);border-radius:12px;padding:0 22px}
.questions summary{cursor:pointer;font:700 18.5px var(--titre);padding:18px 30px 18px 0;list-style:none;position:relative}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";position:absolute;right:0;top:12px;font-size:28px;font-weight:400;color:var(--vert)}
.questions details[open] summary::after{content:"–"}
.questions p{margin:0 0 20px;color:var(--doux)}

/* Page Démonstration : parcours 3D et direct animé */
.note.gauche{text-align:left}
.piste-3d{position:relative;height:min(68vh,620px);min-height:380px;margin-top:30px;border-radius:16px;overflow:hidden;background:#cfe3ee;border:1px solid var(--trait);box-shadow:0 30px 60px -40px rgba(16,26,43,.5)}
.piste-3d canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.piste-3d canvas:active{cursor:grabbing}
.piste-legende{position:absolute;left:16px;bottom:16px;background:var(--encre);color:#fff;border-radius:9px;padding:8px 14px;font-size:14px;font-weight:500;pointer-events:none}
.piste-legende:empty{display:none}
.piste-suivi{position:absolute;left:0;top:0;margin:-46px 0 0 14px;background:#fff;color:var(--encre);border-radius:8px;padding:4px 10px;font-size:13.5px;font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 6px 16px -6px rgba(16,26,43,.5);will-change:transform}
.piste-suivi:empty{display:none}
.direct{position:relative;overflow:hidden}
.direct::after{content:"DÉMONSTRATION";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-32deg);font:800 44px var(--titre);letter-spacing:.06em;color:#fff;opacity:.07;white-space:nowrap;pointer-events:none}
.piste-panne{display:none;position:absolute;inset:0;margin:0;place-items:center;text-align:center;color:var(--encre-2);padding:20px}
.piste-3d.en-panne .piste-panne{display:grid}
.telephone{width:min(380px,100%);margin:0 auto;background:var(--encre);border-radius:38px;padding:14px;box-shadow:0 40px 80px -40px rgba(16,26,43,.7)}
.direct{background:#0a111f;color:#eef2f8;border-radius:26px;padding:18px 16px 20px;min-height:600px;font-size:14.5px}
.direct h4{font:600 12px var(--corps);letter-spacing:.12em;text-transform:uppercase;color:#8b98b3;margin:18px 0 8px}
.d-tete b{display:block;font:800 22px var(--titre);margin-top:8px}.d-tete small{color:#8b98b3}
.d-direct{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.14em;color:#f87171}
.d-direct::before{content:"";width:8px;height:8px;border-radius:50%;background:#f87171;animation:clignote 1.1s infinite}
@keyframes clignote{50%{opacity:.2}}
.d-etat{margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--menthe);min-height:18px}
.d-piste{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;background:#151f33;border:1px solid #24304a;border-radius:16px;padding:14px;margin-top:6px}
.d-piste.arrive{border-color:var(--menthe)}
.d-dossard{grid-row:span 2;font:800 34px var(--titre);color:var(--menthe);min-width:44px;text-align:center}
.d-noms b{display:block;font-size:16px}.d-noms small{color:#8b98b3;font-size:12.5px}
.d-chrono{grid-column:1/-1;font:800 56px/1 var(--titre);font-variant-numeric:tabular-nums;text-align:center;padding:10px 0 4px;letter-spacing:-.02em}
.d-chrono.depasse{color:#fbbf24}
.d-points{grid-column:1/-1;display:flex;justify-content:center;align-items:baseline;gap:8px;color:#8b98b3}
.d-points .d-fautes{font:800 24px var(--titre);color:#eef2f8}
.d-points.saute .d-fautes{animation:saute .5s}
@keyframes saute{30%{transform:scale(1.7);color:#f87171}}
.d-classement{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.d-classement li{display:grid;grid-template-columns:26px 1fr auto 58px;gap:8px;align-items:center;background:#151f33;border-radius:10px;padding:8px 10px}
.d-classement li.nouveau{animation:arrive 1.6s}
@keyframes arrive{0%{background:var(--vert);transform:translateX(14px)}100%{background:#151f33}}
.d-classement .rang{font:800 17px var(--titre);color:#8b98b3;text-align:center}
.d-classement li:first-child .rang{color:#fbbf24}
.d-classement .qui b{display:block;font-size:14px}.d-classement .qui small{color:#8b98b3;font-size:11.5px}
.d-classement .pts{font-weight:700;color:#fbbf24}.d-classement .pts.zero{color:var(--menthe)}
.d-classement .temps{text-align:right;font-variant-numeric:tabular-nums}
.d-suite{margin-top:12px;color:#8b98b3;font-size:12.5px}

/* Espace client et administration */
.espace{padding:54px 0 80px}
.espace-tete{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.espace h1{font-size:clamp(30px,4vw,48px)}
.deconnexion{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.deconnexion span{font-weight:600;margin-right:6px}
.bt.petit{padding:8px 14px;font-size:14px;border-radius:8px}
button.bt{border:0;cursor:pointer;font-family:inherit}
.alerte{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-weight:500}
.alerte.avec-bouton{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.alerte.bon{background:var(--vert-p);color:var(--vert-f)}.alerte.erreur{background:#fbe9e7;color:#9a2a22}
.formulaire{display:grid;gap:16px;background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:30px}
.formulaire label{display:grid;gap:6px;font-weight:600;font-size:15px}
.formulaire label small{font-weight:400;color:var(--doux);font-size:13px}
input{font:inherit;padding:11px 13px;border:1.5px solid #d7d2c5;border-radius:9px;background:#fff;color:var(--texte);min-width:0}
input:focus{outline:0;border-color:var(--vert);box-shadow:0 0 0 3px rgba(52,211,153,.3)}
.formulaire .bt{justify-self:start}
.carte-compte{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:26px 28px;margin-bottom:20px}
.carte-compte h2{font-size:24px;margin-bottom:10px;letter-spacing:-.01em}.carte-compte h2 small{font:400 14px var(--corps);color:var(--doux);margin-left:8px}
.carte-compte p{color:#3c4658;margin:8px 0}
.prix-ligne{float:right;color:var(--vert-f)}.prix-ligne small{font:400 14px var(--corps);color:var(--doux)}
.tableau{overflow-x:auto;margin:10px 0}
.tableau table{width:100%;border-collapse:collapse;font-size:15px}
.tableau th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--doux);padding:8px 12px 8px 0;border-bottom:1px solid var(--trait)}
.tableau td{padding:12px 12px 12px 0;border-bottom:1px solid var(--trait);vertical-align:middle}
.tableau td small{display:block;color:var(--doux);font-size:12.5px}
.tableau tr.passee td{opacity:.5}
.droite{text-align:right}
.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.02em}.fort{font-weight:700}
.etat{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:#fdf1dc;color:#8a4a06;margin-right:6px}
.etat.payee{background:var(--vert-p);color:var(--vert-f)}.etat.annulee{background:#eee;color:#667085}
.en-ligne{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.en-ligne input{padding:8px 10px;font-size:14px;width:190px}
.large-ligne{display:flex;justify-content:flex-start;margin-top:12px}.large-ligne input{width:240px}
.ligne-poste{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--trait)}
.ligne-poste span:nth-of-type(2){color:var(--doux);margin-right:auto}
.qr-virement{float:right;width:190px;margin:0 0 10px 24px;text-align:center}
.qr-virement svg{display:block;width:100%;height:auto;border:1px solid var(--trait);border-radius:10px}
.qr-virement small{display:block;margin-top:6px;color:var(--doux);font-size:12.5px;line-height:1.35}
@media(max-width:620px){.qr-virement{float:none;margin:0 auto 16px}}
.virement{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:14px 0;font-size:16.5px}
.virement dt{color:var(--doux)}.virement dd{margin:0}.virement .fort{font-size:20px;color:var(--vert-f)}
.chiffres-gestion{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.chiffres-gestion div{background:var(--encre);color:#b6c2d4;border-radius:14px;padding:18px 20px;font-size:14px}
.chiffres-gestion b{display:block;font:800 30px var(--titre);color:#fff}
@media(max-width:760px){.chiffres-gestion{grid-template-columns:1fr 1fr}.prix-ligne{float:none;display:block}}

/* Texte courant (mentions légales, contact) */
.texte h2{font-size:30px;margin:44px 0 12px}
.texte p,.texte li{color:#3c4658}
.texte .a-completer{background:#fdf1dc;color:#8a4a06;border-radius:6px;padding:1px 7px;font-weight:600}
.carte-contact{background:var(--carte);border:1px solid var(--trait);border-radius:16px;padding:34px;margin-top:30px}
.carte-contact .adresse{font:800 clamp(22px,3vw,34px) var(--titre);color:var(--vert-f);text-decoration:none;word-break:break-all}

/* Pied de page */
.pied{background:var(--encre);color:#b6c2d4;padding:56px 0 26px;font-size:14.5px}
.pied .large{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.pied b{font:400 21px var(--titre);color:#fff}.pied b i{color:var(--menthe)}
.pied p{margin:10px 0 0;max-width:340px}
.pied h4{font:600 13px var(--corps);letter-spacing:.1em;text-transform:uppercase;color:#7f8ea8;margin-bottom:12px}
.pied a{display:block;color:#dbe3ee;text-decoration:none;margin-bottom:7px}.pied a:hover{color:var(--menthe)}
.pied .bas{display:block;margin-top:40px;padding-top:20px;border-top:1px solid #26344d;font-size:13.5px;color:#7f8ea8}

@media(max-width:960px){
  .barre .lien{display:none}
  .rang,.pas,.fonctions{grid-template-columns:1fr}.rang{gap:30px}.rang.inv>:first-child{order:0}
  .scene{height:380px}.f2,.f3{display:none}.f1{width:100%;transform:none}
  .grille{overflow-x:auto}.grille table{min-width:900px}
  .pied .large{grid-template-columns:1fr 1fr}
  section{padding:60px 0}
}
@media(max-width:560px){.ui{grid-template-columns:1fr}.ui aside{display:none}.pied .large{grid-template-columns:1fr}.marque{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bt{transition:none}}