/* ============================================================================
   SMB GESTION : feuille de style du site
   ========================================================================== */
:root {
	--marine: #1f2653;
	--marine-fonce: #141a3d;
	--marine-clair: #2e3a7a;
	--accent: #0b8a62;
	--accent-fonce: #08704f;
	--accent-pale: #e3f5ee;
	--ambre: #f4b740;
	--texte: #1b2033;
	--texte-doux: #545b75;
	--fond: #ffffff;
	--fond-doux: #f5f6fa;
	--fond-bleute: #eef0f8;
	--bordure: #e2e5ef;
	--rayon: 14px;
	--rayon-grand: 22px;
	--ombre: 0 1px 2px rgba(20, 26, 61, .06), 0 8px 24px rgba(20, 26, 61, .07);
	--ombre-forte: 0 24px 60px rgba(20, 26, 61, .18);
	--police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--largeur: 1180px;
	--entete: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--police); font-size: 17px; line-height: 1.65; color: var(--texte); background: var(--fond); -webkit-font-smoothing: antialiased; }
body.sans-defilement { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-fonce); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--marine); }
h1, h2, h3, h4 { color: var(--marine-fonce); line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; border-radius: 4px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-douce { background: var(--fond-doux); }
.section-bleutee { background: var(--fond-bleute); }
.centre { text-align: center; }
.surtitre { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.chapeau { font-size: 1.15rem; color: var(--texte-doux); max-width: 720px; }
.centre .chapeau { margin-left: auto; margin-right: auto; }
.entete-section { margin-bottom: 48px; }

.lien-evitement { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--marine); color: #fff; padding: 10px 16px; border-radius: 8px; }
.lien-evitement:focus { left: 8px; }

/* ----- boutons ----- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; }
.bouton:hover { transform: translateY(-1px); }
.bouton-petit { padding: 9px 18px; font-size: .92rem; }
.bouton-accent { background: var(--accent); color: #fff; box-shadow: 0 6px 18px rgba(11, 138, 98, .28); }
.bouton-accent:hover { background: var(--accent-fonce); color: #fff; }
.bouton-principal { background: var(--marine); color: #fff; }
.bouton-principal:hover { background: var(--marine-fonce); color: #fff; }
.bouton-contour { border-color: var(--bordure); color: var(--marine); background: #fff; }
.bouton-contour:hover { border-color: var(--marine); color: var(--marine); }
.bouton-contour-clair { border-color: rgba(255, 255, 255, .45); color: #fff; }
.bouton-contour-clair:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .08); }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.rassurance { font-size: .9rem; color: var(--texte-doux); margin-top: 14px; }
.rassurance i { color: var(--accent); margin-right: 6px; }

/* ----- en-tête ----- */
.entete { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
/* flou sur un pseudo-élément : un backdrop-filter sur .entete enfermerait le menu mobile (position fixed) dans l'en-tête */
.entete::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }
.entete-defile { border-bottom-color: var(--bordure); box-shadow: 0 4px 20px rgba(20, 26, 61, .05); }
.entete-inner { display: flex; align-items: center; justify-content: space-between; height: var(--entete); gap: 24px; }
.logo img { width: 170px; height: auto; }
.navigation { display: flex; align-items: center; gap: 28px; }
.navigation-liens { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.navigation-liens a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--texte); text-decoration: none; font-weight: 600; font-size: .95rem; }
.navigation-liens a:hover { background: var(--fond-bleute); color: var(--marine); }
.navigation-liens a[aria-current="page"] { color: var(--accent-fonce); }
.navigation-actions { display: flex; align-items: center; gap: 14px; }
.lien-discret { color: var(--marine); font-weight: 600; font-size: .95rem; text-decoration: none; }
.lien-langue { font-size: .8rem; font-weight: 700; color: var(--texte-doux); text-decoration: none; border: 1px solid var(--bordure); border-radius: 6px; padding: 3px 7px; }
.menu-bouton { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.menu-bouton span { display: block; height: 2px; background: var(--marine); margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }

@media (max-width: 1080px) {
	.menu-bouton { display: block; }
	.navigation { position: fixed; inset: var(--entete) 0 0 0; background: #fff; flex-direction: column; align-items: stretch; padding: 24px; gap: 24px; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; visibility: hidden; }
	.menu-ouvert .navigation { transform: none; visibility: visible; }
	.navigation-liens { flex-direction: column; }
	.navigation-liens a { font-size: 1.15rem; padding: 14px 8px; border-bottom: 1px solid var(--bordure); border-radius: 0; }
	.navigation-actions { flex-direction: column; align-items: stretch; }
	.navigation-actions .bouton { padding: 14px; }
	.lien-langue, .lien-discret { text-align: center; padding: 10px; }
	.menu-ouvert .menu-bouton span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-ouvert .menu-bouton span:nth-child(2) { opacity: 0; }
	.menu-ouvert .menu-bouton span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ----- héros (fond sombre, halos de couleur animés) ----- */
.heros { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 110px) 0 clamp(72px, 9vw, 130px); background: linear-gradient(160deg, #0d1233 0%, #1f2653 55%, #26306b 100%); color: #c9cfee; }
.heros::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%); }
.halos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.halo { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: deriver 18s ease-in-out infinite alternate; }
.halo-1 { width: 460px; height: 460px; background: #0b8a62; top: -120px; right: 8%; }
.halo-2 { width: 380px; height: 380px; background: #5b5bd6; bottom: -140px; left: -80px; animation-duration: 22s; animation-delay: -6s; }
.halo-3 { width: 300px; height: 300px; background: #f4b740; top: 40%; right: -60px; opacity: .3; animation-duration: 26s; animation-delay: -12s; }
@keyframes deriver {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, 30px) scale(1.12); }
	100% { transform: translate(-30px, -20px) scale(.95); }
}
.heros-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.heros .surtitre { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: #b8f0da; padding: 7px 14px; border-radius: 999px; letter-spacing: .02em; text-transform: none; font-size: .88rem; backdrop-filter: blur(6px); }
.heros h1 { color: #fff; margin-bottom: 22px; }
.heros .chapeau { color: #c9cfee; margin-bottom: 30px; }
.heros .rassurance { color: #aab2d8; }
.heros .rassurance a { color: #b8f0da; }
.heros .ariane, .heros .ariane a { color: #aab2d8; }
.texte-degrade { background: linear-gradient(90deg, #5ee6b0, #7aa8ff, #f4b740, #5ee6b0); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: glisser-degrade 8s linear infinite; }
@keyframes glisser-degrade { to { background-position: 300% 0; } }
.heros-points { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; padding: 0; margin: 30px 0 0; font-size: .95rem; font-weight: 600; color: #fff; }
.heros-points i { color: #5ee6b0; margin-right: 6px; }

/* maquette de facture (illustration en CSS) */
.maquette { position: relative; perspective: 1200px; }
.maquette-facture { background: #fff; color: var(--texte); border-radius: var(--rayon-grand); box-shadow: 0 40px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .08); padding: 28px; transform: rotateY(-8deg) rotateX(4deg) rotate(1deg); animation: entree-facture 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes entree-facture { from { opacity: 0; transform: translateY(40px) rotateY(-20deg) rotateX(10deg); } }
.maquette-ligne, .maquette-total { animation: entree-ligne .5s ease both; }
.maquette-ligne:nth-of-type(2) { animation-delay: .5s; }
.maquette-ligne:nth-of-type(3) { animation-delay: .7s; }
.maquette-ligne:nth-of-type(4) { animation-delay: .9s; }
.maquette-total { animation-delay: 1.1s; }
@keyframes entree-ligne { from { opacity: 0; transform: translateX(-12px); } }
.maquette-statut { animation: tampon .5s cubic-bezier(.3, 1.6, .5, 1) 1.5s both; }
@keyframes tampon { from { opacity: 0; transform: scale(2.2) rotate(-12deg); } }
.maquette-haut { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 22px; }
.maquette-haut strong { display: block; color: var(--marine-fonce); font-size: 1.15rem; }
.maquette-haut small { color: var(--texte-doux); font-size: .82rem; }
.maquette-statut { background: var(--accent-pale); color: var(--accent-fonce); font-weight: 700; font-size: .78rem; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.maquette-ligne { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed var(--bordure); font-size: .9rem; gap: 12px; }
.maquette-ligne span:last-child { font-weight: 600; white-space: nowrap; }
.maquette-total { display: flex; justify-content: space-between; margin-top: 16px; padding: 14px 16px; background: var(--fond-bleute); border-radius: 10px; font-weight: 800; color: var(--marine-fonce); }
.maquette-carte { position: absolute; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); border: 1px solid var(--bordure); padding: 12px 16px; display: flex; align-items: center; gap: 12px; font-size: .85rem; font-weight: 600; color: var(--marine-fonce); }
.maquette-carte i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-pale); color: var(--accent); }
.maquette-carte small { display: block; font-weight: 500; color: var(--texte-doux); }
.maquette-carte { animation: apparaitre-carte .6s ease both, flotter 6s ease-in-out infinite; }
.maquette-carte-1 { left: -36px; bottom: 54px; animation-delay: 1.3s, 1.9s; }
.maquette-carte-2 { right: -20px; top: -22px; animation-delay: 1.7s, 2.3s; animation-duration: .6s, 7s; }
@keyframes apparaitre-carte { from { opacity: 0; transform: translateY(16px) scale(.9); } }
@keyframes flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.maquette-carte-2 i { background: #fff4dc; color: #b77e00; }

@media (max-width: 900px) {
	.heros-grille { grid-template-columns: 1fr; gap: 48px; }
	.maquette { max-width: 440px; margin: 0 auto; width: 100%; }
	.maquette-carte-1 { left: -8px; }
	.maquette-carte-2 { right: -4px; }
}

/* ----- en-tête des pages intérieures ----- */
.entete-page { position: relative; overflow: hidden; isolation: isolate; padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 80px); color: #c9cfee; background: linear-gradient(120deg, rgba(13, 18, 51, .96) 0%, rgba(31, 38, 83, .88) 55%, rgba(11, 138, 98, .7) 100%), url("../img/bg/business1.jpg") center 40% / cover no-repeat; }
.entete-page::after { content: ""; position: absolute; width: 420px; height: 420px; right: -100px; bottom: -220px; z-index: -1; border-radius: 50%; background: #5b5bd6; filter: blur(80px); opacity: .5; animation: deriver 20s ease-in-out infinite alternate; }
.entete-page h1 { max-width: 900px; color: #fff; }
.entete-page .chapeau { color: #d3d8f2; }
.entete-page .ariane, .entete-page .ariane a { color: #aab2d8; }
.entete-page .ariane a:hover { color: #fff; }
.entete-page .bouton-principal { background: var(--accent); }
.ariane { font-size: .88rem; color: var(--texte-doux); margin-bottom: 18px; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.ariane li + li::before { content: "/"; margin-right: 6px; color: #a2a8bd; }
.ariane a { color: var(--texte-doux); text-decoration: none; }
.ariane a:hover { color: var(--marine); }

/* ----- grilles et cartes ----- */
.grille { display: grid; gap: 24px; }
.grille-2 { grid-template-columns: repeat(2, 1fr); }
.grille-3 { grid-template-columns: repeat(3, 1fr); }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grille-3, .grille-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; } }

.carte { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 28px; transition: transform .2s, box-shadow .2s, border-color .2s; height: 100%; }
.carte p:last-child { margin-bottom: 0; }
.carte p { color: var(--texte-doux); font-size: .97rem; }
a.carte { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
a.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre); border-color: #cfd4e6; }
.carte-lien { margin-top: auto; padding-top: 8px; font-weight: 700; color: var(--accent-fonce); font-size: .93rem; }
.carte-lien i { transition: transform .15s; margin-left: 4px; }
a.carte:hover .carte-lien i { transform: translateX(3px); }
.icone { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--fond-bleute); color: var(--marine); font-size: 1.25rem; margin-bottom: 18px; }
.icone-accent { background: var(--accent-pale); color: var(--accent); }

/* ----- bloc logiciel (fond marine) ----- */
.bloc-logiciel { background: linear-gradient(135deg, var(--marine-fonce) 0%, var(--marine) 60%, var(--marine-clair) 100%); color: #dfe3f5; position: relative; overflow: hidden; }
.bloc-logiciel::after { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(11, 138, 98, .35), transparent 70%); pointer-events: none; }
.bloc-logiciel h2, .bloc-logiciel h3 { color: #fff; }
.bloc-logiciel .surtitre { color: #6fe0b6; }
.bloc-logiciel .chapeau { color: #c5cbe6; }
.bloc-logiciel-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.liste-coches { list-style: none; padding: 0; margin: 28px 0 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.liste-coches li { position: relative; padding-left: 30px; }
.liste-coches li::before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .62rem; display: grid; place-items: center; }
.liste-coches-sombre li::before { background: var(--accent-pale); color: var(--accent-fonce); }
@media (max-width: 900px) { .bloc-logiciel-grille { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .liste-coches { grid-template-columns: 1fr; } }

.carte-prix { background: #fff; color: var(--texte); border-radius: var(--rayon-grand); padding: 34px; box-shadow: var(--ombre-forte); text-align: center; }
.carte-prix .etiquette { display: inline-block; background: #fff4dc; color: #8a5d00; font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px; }
.carte-prix .montant { font-size: 3.4rem; font-weight: 800; color: var(--marine-fonce); line-height: 1; letter-spacing: -.03em; }
.carte-prix .periode { color: var(--texte-doux); margin: 8px 0 4px; }
.carte-prix .mensuel { font-size: .9rem; color: var(--accent-fonce); font-weight: 600; margin-bottom: 24px; }
.carte-prix .bouton { width: 100%; }
.carte-prix ul { text-align: left; margin: 26px 0 0; }
.carte-prix .rassurance { margin-top: 12px; }

/* ----- étapes ----- */
.etapes { counter-reset: etape; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.etapes li { position: relative; padding-top: 64px; }
.etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; top: 0; left: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--marine); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 1.1rem; }
.etapes li::after { content: ""; position: absolute; top: 23px; left: 58px; right: -12px; height: 2px; background: repeating-linear-gradient(90deg, var(--bordure) 0 8px, transparent 8px 14px); }
.etapes li:last-child::after { display: none; }
.etapes p { color: var(--texte-doux); font-size: .97rem; }
.etapes-2 { grid-template-columns: repeat(2, 1fr); margin-top: 36px; }
.etapes-2 li::after { display: none; }
.bloc-logiciel .etapes li::before { background: var(--accent); }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, 1fr); } .etapes li::after { display: none; } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

/* ----- en bref (fiche d'identité) ----- */
.fiche { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.fiche dl { margin: 0; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: hidden; }
.fiche dl div { display: grid; grid-template-columns: 170px 1fr; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--bordure); }
.fiche dl div:last-child { border-bottom: 0; }
.fiche dt { font-weight: 700; color: var(--marine-fonce); }
.fiche dd { margin: 0; color: var(--texte-doux); }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .fiche dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ----- FAQ ----- */
.faq { max-width: 860px; margin: 0 auto; }
.faq + .faq { margin-top: 56px; }
.faq h2 { font-size: 1.5rem; margin-bottom: 18px; }
.faq details { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: 12px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; font-weight: 700; color: var(--marine-fonce); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--fond-bleute); display: grid; place-items: center; font-size: 1.2rem; font-weight: 600; color: var(--marine); transition: transform .2s; }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 24px 20px; color: var(--texte-doux); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ----- page services ----- */
.services-mise-en-page { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.sommaire { position: sticky; top: calc(var(--entete) + 24px); }
.sommaire h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--texte-doux); margin-bottom: 12px; }
.sommaire ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--bordure); }
.sommaire a { display: block; padding: 8px 0 8px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--texte-doux); text-decoration: none; font-size: .94rem; font-weight: 600; }
.sommaire a:hover { color: var(--marine); border-left-color: var(--accent); }
.service { padding: 0 0 48px; margin-bottom: 48px; border-bottom: 1px solid var(--bordure); }
.service:last-child { border-bottom: 0; margin-bottom: 0; }
.service-titre { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.service-titre .icone { margin: 0; flex-shrink: 0; }
.service-titre h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.service .resume { font-size: 1.12rem; font-weight: 600; color: var(--marine); }
.service-inclus { background: var(--fond-doux); border-radius: var(--rayon); padding: 22px 26px; margin-top: 20px; }
.service-inclus h3 { font-size: 1rem; margin-bottom: 10px; }
.service-inclus ul { margin: 0; }
.service-inclus .liste-coches { margin: 0; }
@media (max-width: 900px) { .services-mise-en-page { grid-template-columns: 1fr; } .sommaire { position: static; } }

.encart { border-radius: var(--rayon-grand); padding: clamp(28px, 4vw, 44px); background: var(--accent-pale); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.encart h2, .encart h3 { margin-bottom: 8px; }
.encart p { margin: 0; color: #2e4b40; }
@media (max-width: 720px) { .encart { grid-template-columns: 1fr; } }

/* ----- équipe et références ----- */
.equipe-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.membre { text-align: center; }
.membre img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-grand); margin-bottom: 14px; }
.membre h3 { margin: 0; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.logos a, .logos span { display: grid; place-items: center; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 24px; height: 120px; transition: box-shadow .2s, transform .2s; }
.logos a:hover { box-shadow: var(--ombre); transform: translateY(-2px); }
.logos img { max-height: 64px; width: auto; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.logos a:hover img { filter: none; opacity: 1; }
.citation { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--marine); max-width: 820px; margin: 0 auto; text-align: center; line-height: 1.5; }
.texte-long { max-width: 760px; }
.texte-long p { font-size: 1.07rem; }

/* ----- contact ----- */
.contact-grille { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; } }
.formulaire { background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon-grand); padding: clamp(24px, 4vw, 40px); box-shadow: var(--ombre); }
.formulaire-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .formulaire-ligne { grid-template-columns: 1fr; } }
.champ { margin-bottom: 18px; }
.champ label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--marine-fonce); }
.champ input, .champ select, .champ textarea { width: 100%; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1.5px solid var(--bordure); border-radius: 10px; background: #fff; color: var(--texte); transition: border-color .15s, box-shadow .15s; }
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 0; border-color: var(--marine-clair); box-shadow: 0 0 0 4px rgba(46, 58, 122, .12); }
.champ-invalide { border-color: #c0392b !important; }
.champ-erreur { display: block; color: #b0281a; font-size: .85rem; margin-top: 4px; }
.alerte { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; }
.alerte-succes { background: var(--accent-pale); color: var(--accent-fonce); }
.alerte-erreur { background: #fdecea; color: #a12b1d; }
.mentions-recaptcha { font-size: .78rem; color: var(--texte-doux); margin: 14px 0 0; }
.coordonnees { display: grid; gap: 16px; }
.coordonnee { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 20px; }
.coordonnee .icone { margin: 0; flex-shrink: 0; }
.coordonnee strong { display: block; color: var(--marine-fonce); }
.coordonnee a { font-weight: 600; }
.carte-geo { border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--bordure); }
.carte-geo iframe { display: block; width: 100%; height: 280px; border: 0; }
.grecaptcha-badge { visibility: hidden; }

/* ----- bandeau final et pied de page ----- */
.bandeau-cta { background: var(--marine-fonce); color: #c5cbe6; padding: 64px 0; }
.bandeau-cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.bandeau-cta h2 { color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 8px; }
.bandeau-cta p { margin: 0; }
@media (max-width: 860px) { .bandeau-cta-inner { grid-template-columns: 1fr; } }
.pied { background: #0e1230; color: #a9afca; padding: 64px 0 0; font-size: .94rem; }
.pied-grille { display: grid; grid-template-columns: 1.3fr 1.2fr .9fr 1fr; gap: 40px; padding-bottom: 48px; }
.pied-logo { width: 170px; margin-bottom: 16px; }
.pied h3 { color: #fff; font-size: .95rem; margin-bottom: 14px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 8px; }
.pied a { color: #d4d8ec; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied strong { color: #fff; }
.pied-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; padding-bottom: 22px; font-size: .85rem; }
@media (max-width: 900px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied-grille { grid-template-columns: 1fr; } }

/* ----- bandeau cookies ----- */
.cookies { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 560px; background: #fff; border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre-forte); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .92rem; }
.cookies[hidden] { display: none; }
.cookies p { margin: 0; flex: 1 1 260px; }

/* ----- couleurs : chaque carte d'une grille reçoit sa teinte ----- */
.grille > :nth-child(6n+1), .etapes > :nth-child(4n+1) { --c1: #4f6bff; --c2: #7a5cff; }
.grille > :nth-child(6n+2), .etapes > :nth-child(4n+2) { --c1: #0b8a62; --c2: #2cc28c; }
.grille > :nth-child(6n+3), .etapes > :nth-child(4n+3) { --c1: #f08c00; --c2: #f4b740; }
.grille > :nth-child(6n+4), .etapes > :nth-child(4n+4) { --c1: #8b5cf6; --c2: #c06cf0; }
.grille > :nth-child(6n+5) { --c1: #e64980; --c2: #ff8a65; }
.grille > :nth-child(6n+6) { --c1: #0e9fbf; --c2: #38d0d6; }
.grille .icone, .service .icone, .coordonnee .icone { background: linear-gradient(135deg, var(--c1, #4f6bff), var(--c2, #7a5cff)); color: #fff; box-shadow: 0 10px 22px -8px var(--c1, #4f6bff); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.carte { position: relative; overflow: hidden; }
.carte::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--c1, #4f6bff), var(--c2, #7a5cff)); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.carte:hover::before { transform: scaleX(1); }
.carte:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(20, 26, 61, .35); border-color: transparent; }
.carte:hover .icone { transform: scale(1.1) rotate(-6deg); }
.etapes li::before { background: linear-gradient(135deg, var(--c1, #4f6bff), var(--c2, #7a5cff)); box-shadow: 0 10px 22px -8px var(--c1, #4f6bff); }
/* icônes des services : teinte selon le rang de l'article */
.service:nth-of-type(7n+1) { --c1: #4f6bff; --c2: #7a5cff; }
.service:nth-of-type(7n+2) { --c1: #0b8a62; --c2: #2cc28c; }
.service:nth-of-type(7n+3) { --c1: #f08c00; --c2: #f4b740; }
.service:nth-of-type(7n+4) { --c1: #8b5cf6; --c2: #c06cf0; }
.service:nth-of-type(7n+5) { --c1: #e64980; --c2: #ff8a65; }
.service:nth-of-type(7n+6) { --c1: #0e9fbf; --c2: #38d0d6; }
.service:nth-of-type(7n+7) { --c1: #1f2653; --c2: #4f6bff; }
.service-inclus { border-left: 4px solid var(--c1, var(--accent)); }

/* ----- fonds de section plus vivants ----- */
.section-douce { background: radial-gradient(600px 300px at 0% 0%, rgba(79, 107, 255, .08), transparent 70%), radial-gradient(600px 300px at 100% 100%, rgba(11, 138, 98, .08), transparent 70%), radial-gradient(rgba(31, 38, 83, .07) 1px, transparent 1px) 0 0 / 22px 22px, var(--fond-doux); }
.surtitre { background: linear-gradient(90deg, var(--accent), #4f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.heros .surtitre, .bloc-logiciel .surtitre { -webkit-background-clip: border-box; background-clip: border-box; }
.bloc-logiciel .surtitre { background: none; color: #6fe0b6; }
.encart { background: linear-gradient(120deg, #e3f5ee 0%, #e8ecff 100%); position: relative; overflow: hidden; }
.encart::after { content: ""; position: absolute; width: 260px; height: 260px; right: -80px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 107, 255, .25), transparent 70%); pointer-events: none; }
.fiche dl { box-shadow: var(--ombre); }
.fiche dl div:nth-child(odd) { background: #fafbfe; }
.faq summary:hover { color: var(--accent-fonce); }
.faq details[open] { border-color: transparent; box-shadow: 0 0 0 2px rgba(11, 138, 98, .25), var(--ombre); }
.faq details[open] summary::after { background: var(--accent); color: #fff; transform: translateY(-50%) rotate(180deg); }

/* ----- boutons : dégradé et reflet au survol ----- */
.bouton-accent { background: linear-gradient(135deg, #0b8a62, #12b27f); position: relative; overflow: hidden; }
.bouton-accent::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); }
.bouton-accent:hover::after { animation: reflet .8s ease; }
@keyframes reflet { to { left: 130%; } }
.bouton-accent:hover { box-shadow: 0 12px 28px -6px rgba(11, 138, 98, .55); }
.bouton-pulse { animation: pulsation 2.6s ease-in-out infinite; }
@keyframes pulsation { 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 178, 127, .55); } 60% { box-shadow: 0 0 0 14px rgba(18, 178, 127, 0); } }
.bouton i.fa-arrow-right { transition: transform .2s; }
.bouton:hover i.fa-arrow-right { transform: translateX(4px); }

/* ----- bandeau de mots-clés qui défile ----- */
.defilant { background: linear-gradient(90deg, #0b8a62, #4f6bff, #8b5cf6); color: #fff; overflow: hidden; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defilant-piste { display: flex; width: max-content; animation: defiler 40s linear infinite; }
.defilant:hover .defilant-piste { animation-play-state: paused; }
.defilant span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.defilant span::after { content: "\2726"; opacity: .6; font-size: .8rem; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ----- bloc logiciel et bandeau final animés ----- */
.bloc-logiciel::before { content: ""; position: absolute; width: 420px; height: 420px; left: -140px; bottom: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, .4), transparent 70%); animation: deriver 20s ease-in-out infinite alternate; pointer-events: none; }
.bloc-logiciel::after { animation: deriver 16s ease-in-out infinite alternate-reverse; }
.carte-prix { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #5ee6b0, #7aa8ff, #f4b740, #5ee6b0) border-box; background-size: 100% 100%, 300% 300%; animation: contour-prix 6s linear infinite; }
@keyframes contour-prix { to { background-position: 0 0, 300% 0; } }
.carte-prix .montant { background: linear-gradient(135deg, var(--marine-fonce), #4f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bandeau-cta { background: linear-gradient(120deg, #0d1233, #2a2f7a, #0b6e52, #0d1233); background-size: 300% 300%; animation: onduler 14s ease infinite; position: relative; overflow: hidden; }
@keyframes onduler { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ----- apparition en cascade ----- */
.grille > .apparition:nth-child(2), .etapes > .apparition:nth-child(2) { animation-delay: .08s; }
.grille > .apparition:nth-child(3), .etapes > .apparition:nth-child(3) { animation-delay: .16s; }
.grille > .apparition:nth-child(4), .etapes > .apparition:nth-child(4) { animation-delay: .24s; }
.grille > .apparition:nth-child(5) { animation-delay: .32s; }
.grille > .apparition:nth-child(6) { animation-delay: .4s; }

/* ----- photos ----- */
/* carte avec photo en tête (services de l'accueil) */
.carte::before { z-index: 2; }
.carte-image { position: relative; display: block; margin: -28px -28px 0; height: 180px; overflow: hidden; }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.carte-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13, 18, 51, .45)), linear-gradient(135deg, var(--c1, #4f6bff), transparent 70%); opacity: .35; mix-blend-mode: multiply; transition: opacity .3s; }
a.carte:hover .carte-image img { transform: scale(1.08); }
a.carte:hover .carte-image::after { opacity: .2; }
.carte-image + .icone { position: relative; z-index: 1; margin-top: -26px; border: 4px solid #fff; width: 56px; height: 56px; }

/* photo d'un service (page services) */
.service-intro { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
.service-photo { margin: 0; position: relative; border-radius: var(--rayon-grand); overflow: hidden; box-shadow: 0 20px 40px -18px rgba(20, 26, 61, .45); transform: rotate(1.5deg); transition: transform .4s ease; }
.service:nth-of-type(even) .service-photo { transform: rotate(-1.5deg); }
.service-photo:hover, .service:nth-of-type(even) .service-photo:hover { transform: rotate(0) scale(1.02); }
.service-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.service-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6); background: linear-gradient(135deg, var(--c1, #4f6bff), transparent 60%); opacity: .25; mix-blend-mode: multiply; }
@media (max-width: 720px) { .service-intro { grid-template-columns: 1fr; } .service-photo { order: -1; max-width: 420px; } }

/* photo encadrée avec badge (en bref, qui sommes-nous) */
.photo-cadre { position: relative; margin: 28px 0 0; }
.photo-cadre img { width: 100%; border-radius: var(--rayon-grand); aspect-ratio: 16 / 10; object-fit: cover; box-shadow: var(--ombre-forte); }
.photo-cadre::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border-radius: var(--rayon-grand); background: linear-gradient(135deg, #5ee6b0, #7aa8ff); opacity: .5; }
.photo-cadre { isolation: isolate; }
.photo-badge { position: absolute; left: -14px; bottom: 22px; background: #fff; border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .9rem; color: var(--marine-fonce); animation: flotter 6s ease-in-out infinite; }
.photo-badge i { color: var(--accent); }
.histoire { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .histoire { grid-template-columns: 1fr; } .photo-badge { left: 10px; } }

/* section « partout » (page logiciel) */
.partout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.partout-visuel { position: relative; }
.partout-visuel::before { content: ""; position: absolute; inset: 10% 5%; border-radius: 50%; background: radial-gradient(circle, rgba(79, 107, 255, .25), rgba(11, 138, 98, .15) 50%, transparent 70%); filter: blur(10px); }
.partout-visuel img { position: relative; width: 100%; animation: flotter 7s ease-in-out infinite; }
@media (max-width: 900px) { .partout { grid-template-columns: 1fr; } }

/* en-têtes des pages intérieures : photo propre à chaque page (variable --photo posée dans la page) */
.entete-page { background: linear-gradient(120deg, rgba(13, 18, 51, .95) 0%, rgba(31, 38, 83, .85) 55%, rgba(11, 138, 98, .65) 100%), var(--photo, url("../img/bg/business1.jpg")) center 40% / cover no-repeat; }

/* bandeau final : photo derrière le dégradé animé */
.bandeau-cta { background: linear-gradient(120deg, rgba(13, 18, 51, .94), rgba(42, 47, 122, .85), rgba(11, 110, 82, .8), rgba(13, 18, 51, .94)), url("../img/agency/hero3.jpg") center 60% / cover no-repeat; background-size: 300% 300%, cover; padding: 88px 0; }
@keyframes onduler { 0%, 100% { background-position: 0% 50%, center 60%; } 50% { background-position: 100% 50%, center 60%; } }

/* ----- animations ----- */
/* animation (et non transition) : les effets de survol des cartes gardent leur propre vitesse */
.apparition { opacity: 0; }
.apparition.visible { opacity: 1; animation: monter .7s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes monter { from { opacity: 0; transform: translateY(28px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.apparition { opacity: 1; transform: none; }
}
@media print {
	.entete, .bandeau-cta, .cookies, .pied { display: none; }
}