/* Neve encadre notre shortcode dans ses propres conteneurs de page
   (fond clair par défaut) : sans ça, un bandeau clair apparaît entre notre
   contenu et le footer, sous le dernier élément de .hopp-home. Couleur en
   dur (et non var(--bg)) car ces sélecteurs sont hors de .hopp-home, donc
   hors de portée de la variable. */
.nv-content-wrap.entry-content,
.nv-single-page-wrap,
.single-page-container .row,
.container-fluid.single-page-container{background:#0B0B0B;}
.hopp-home{
	--yellow:#FFED00;
	--bg:#0B0B0B;
	--surface:#242420;
	--white:#ffffff;
	--ink-soft:#c2c2bc;
	--ink-mute:#8a8a83;
	--line:#3a3a33;
	--radius:16px;
	font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
	background:var(--bg);
	color:var(--white);
	line-height:1.7;
}
.hopp-home *{box-sizing:border-box;}
.hopp-home a{color:inherit;text-decoration:none;}
.hopp-home img{max-width:100%;display:block;border-radius:12px;height:auto;}

/* ---- HERO ----
   Grid nommée (plutôt qu'un bloc texte unique) : permet de réordonner
   librement chaque élément entre desktop et mobile via grid-template-areas,
   sans dupliquer le markup. Même technique que les pages d'accueil par
   zone du corps (hopp-home-pied.php etc.). */
.hopp-home .hero-duo{max-width:1160px;margin:0 auto;padding:20px 24px 6px;}
.hopp-home .hero-duo-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	column-gap:50px;
	row-gap:0;
	align-items:start;
	grid-template-areas:
		"visual h1"
		"visual lead"
		"visual badges"
		"visual cta";
}
.hopp-home .hero-visual-cluster{grid-area:visual;position:relative;height:500px;}
.hopp-home .hero-visual-cluster figure.phone-frame{position:absolute;margin:0;width:190px;}
.hopp-home .hero-visual-cluster figure.phone-frame.phone-a{left:0;top:90px;z-index:1;transform:rotate(-7deg);}
.hopp-home .hero-visual-cluster figure.phone-frame.phone-b{left:160px;top:30px;z-index:2;transform:rotate(5deg);}
.hopp-home .hero-visual-cluster .pack-photo{position:absolute;right:-6px;bottom:0;width:225px;z-index:3;filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));border-radius:0;}
.hopp-home .hero-visual-cluster .social-proof{position:absolute;right:8px;bottom:340px;z-index:4;display:flex;flex-direction:column;align-items:center;width:145px;}
.hopp-home .hero-visual-cluster .social-proof img{width:100%;border-radius:0;}
.hopp-home .hero-visual-cluster figure.phone-frame.phone-b::after{content:none;}

/* Titre : reproduit l'effet extrudé du visuel titre-douleur-blessure-web.png,
   mais en texte réel (accessible, indexable, redimensionnable). */
.hopp-home h1.title{grid-area:h1;margin:100px 0 28px;font-size:clamp(38px,5vw,62px);font-weight:900;line-height:.95;letter-spacing:-.5px;}
.hopp-home h1.title span{display:block;}
.hopp-home h1.title .t-y{color:var(--yellow);text-shadow:2px 3px 0 rgba(0,0,0,.55);}
.hopp-home h1.title .t-w{color:#f2f2ee;text-shadow:2px 3px 0 rgba(0,0,0,.55);}
.hopp-home .hero-lead{grid-area:lead;font-size:18px;font-weight:700;color:var(--white);margin:0 0 16px;}

.hopp-home .hero-badges{grid-area:badges;display:flex;gap:14px;flex-wrap:wrap;margin:32px 0 0;}
.hopp-home .hero-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;width:152px;}
.hopp-home .hero-badge .ic{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
.hopp-home .hero-badge .ic img{width:100%;height:100%;object-fit:contain;border-radius:0;}
.hopp-home .hero-badge p{font-size:12px;font-weight:700;color:var(--white);margin:0;line-height:1.35;}

.hopp-home .cta-wrap{grid-area:cta;margin-top:44px;}
.hopp-home .hero-cta{display:inline-flex;align-items:center;gap:14px;background:var(--yellow);color:var(--bg);padding:17px 17px 17px 30px;border-radius:999px;font-weight:800;font-size:16px;box-shadow:0 14px 28px rgba(255,237,0,.25);transition:transform .15s ease,box-shadow .15s ease;}
.hopp-home .hero-cta:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(255,237,0,.35);color:var(--bg);}
.hopp-home .hero-cta .arrow{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;background:var(--bg);color:var(--yellow);border-radius:50%;}
.hopp-home .hero-cta .arrow svg{width:13px;height:13px;stroke:currentColor;}

@media(max-width:1060px){
	.hopp-home .hero-duo-grid{
		grid-template-columns:1fr;
		gap:0;
		grid-template-areas:
			"h1"
			"lead"
			"visual"
			"cta"
			"badges";
	}
	.hopp-home h1.title{
		margin:4px 0 14px;
		font-size:clamp(34px,11vw,58px);
		line-height:.8;
		letter-spacing:-0.02em;
		text-align:center;
	}
	.hopp-home .hero-lead{margin:16px 0 10px;text-align:center;}
	.hopp-home .cta-wrap{text-align:center;margin:20px 0 30px;}
	.hopp-home .hero-visual-cluster{height:440px;}
	.hopp-home .hero-visual-cluster figure.phone-frame{width:150px;}
	.hopp-home .hero-visual-cluster figure.phone-frame.phone-b{left:120px;}
	.hopp-home .hero-visual-cluster .pack-photo{width:175px;}
	.hopp-home .hero-visual-cluster .social-proof{bottom:250px;width:98px;}
	.hopp-home .hero-badges{flex-direction:column;align-items:center;gap:24px;margin:30px 0 8px;}
	.hopp-home .hero-badge .ic{width:76px;height:76px;}
	.hopp-home .hero-badge p{font-size:16px;}
}

/* ---- SECTIONS ---- */
.hopp-home .layout{max-width:900px;margin:0 auto;padding:6px 24px 0;}
.hopp-home .layout h2{font-size:26px;font-weight:800;text-align:center;margin:0 0 10px;color:var(--white);}
.hopp-home .layout h2 .y{color:var(--yellow);}
/* "Comment HOPP fonctionne ?" doit tenir sur une ligne même sur petit écran ;
   les autres titres de section (plus longs) doivent rester libres de
   passer sur plusieurs lignes, d'où ce nowrap ciblé sur #guide seulement. */
.hopp-home #guide h2{font-size:clamp(20px,6vw,26px);white-space:nowrap;}
.hopp-home .layout > section > p.section-dek{font-size:14.5px;color:var(--ink-mute);text-align:center;max-width:560px;margin:0 auto 44px;}
.hopp-home #guide{margin-top:36px;}

/* ---- CADRE TÉLÉPHONE ---- */
.hopp-home figure.phone-frame{
	background:linear-gradient(155deg,#2c2c26,#0c0c0a);
	border-radius:34px;padding:10px 10px 14px;border:2.5px solid #000;
	box-shadow:0 18px 34px rgba(0,0,0,.45);position:relative;
}
.hopp-home figure.phone-frame::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:46px;height:6px;background:#000;border-radius:4px;z-index:2;}
.hopp-home figure.phone-frame::after{content:"";position:absolute;top:50%;left:50%;width:230px;height:230px;transform:translate(-50%,-50%);background:var(--yellow);filter:blur(75px);opacity:.4;border-radius:50%;z-index:-1;}
.hopp-home figure.phone-frame img{width:100%;object-fit:contain;border-radius:22px;border:none;display:block;}

/* ---- ÉTAPES DU PARCOURS ---- */
.hopp-home .guide{margin:0;}
.hopp-home .guide-step{display:flex;gap:40px;align-items:center;margin:0 0 12px;}
.hopp-home .guide-step.reverse{flex-direction:row-reverse;}
.hopp-home .guide-step > figure.phone-frame{flex:0 0 210px;max-width:210px;margin:0;}
.hopp-home .g-text{flex:1 1 360px;}
.hopp-home .g-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--bg);font-weight:900;font-size:15px;margin-bottom:14px;}
.hopp-home .g-text h3{font-size:21px;font-weight:800;margin:0 0 10px;color:var(--white);}
.hopp-home .g-text p.g-desc{font-size:14.5px;color:var(--ink-soft);margin:0;}
.hopp-home .g-reassure{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--yellow);border-radius:0 12px 12px 0;padding:14px 18px;margin-top:16px;display:flex;gap:12px;align-items:flex-start;}
.hopp-home .g-reassure svg{flex:none;width:20px;height:20px;stroke:var(--yellow);margin-top:1px;}
.hopp-home .g-reassure p{font-size:13px;color:var(--ink-soft);margin:0;line-height:1.55;}
.hopp-home .g-reassure p b{color:var(--white);}
.hopp-home .g-cta{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:13px 11px 13px 24px;border-radius:999px;background:var(--yellow);color:var(--bg);font-weight:800;font-size:15px;box-shadow:0 12px 24px rgba(255,237,0,.24);transition:transform .15s ease,box-shadow .15s ease;}
.hopp-home .g-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(255,237,0,.34);color:var(--bg);}
.hopp-home .g-cta .arrow{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;background:var(--bg);color:var(--yellow);border-radius:50%;}
.hopp-home .g-cta .arrow svg{width:14px;height:14px;stroke:currentColor;}

@media(max-width:720px){
	.hopp-home .guide-step,.hopp-home .guide-step.reverse{flex-direction:column;gap:8px;margin-bottom:40px;}
	.hopp-home .guide-step > figure.phone-frame{flex:none;max-width:190px;margin:0 auto;}
	.hopp-home .g-text{text-align:left;}
	.hopp-home .g-cta{display:flex;width:fit-content;margin:30px auto 0;text-align:center;}
}

/* ---- ÉQUIPE / EXPERTISE ---- */
.hopp-home .keypoints{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:22px 0 0;}
.hopp-home .keypoints-title{font-size:15px;font-weight:800;text-transform:uppercase;color:var(--yellow);margin:0 0 12px;}
.hopp-home .keypoints ul{margin:0;padding-left:0;list-style:none;display:grid;grid-template-columns:1fr;gap:12px;}
.hopp-home .keypoints ul li{position:relative;padding-left:30px;color:var(--white);font-size:14px;}
.hopp-home .keypoints ul li svg{position:absolute;left:0;top:1px;width:19px;height:19px;stroke:var(--yellow);flex:none;}

.hopp-home .team-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:26px 0;}
.hopp-home .team-card{text-align:center;}
.hopp-home .team-card img.photo{width:100%;max-width:300px;border-radius:16px;margin:0 auto 16px;object-fit:cover;}
.hopp-home .team-card h4{font-size:16px;font-weight:800;margin:0 0 4px;color:var(--white);}
.hopp-home .team-card p.role{font-size:12.5px;color:var(--ink-soft);margin:0 0 12px;line-height:1.4;}
.hopp-home .team-card img.fifa{height:34px;width:auto;max-width:none;margin:0 auto;border-radius:0;filter:grayscale(1) brightness(1.6);}
@media(max-width:560px){.hopp-home .team-grid{grid-template-columns:1fr;}}
.hopp-home .team-cta-wrap{text-align:center;margin:22px 0 0;}
.hopp-home .team-cta-wrap .g-cta{display:inline-flex;margin-top:0;}

.hopp-home .visio-banner{display:flex;gap:20px;align-items:center;background:var(--surface);border:1px solid var(--yellow);border-radius:var(--radius);padding:24px 28px;margin:26px 0;}
.hopp-home .visio-badge{flex:none;width:56px;height:56px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;}
.hopp-home .visio-badge svg{width:26px;height:26px;stroke:var(--bg);}
.hopp-home .visio-banner p{margin:0;font-size:14px;color:var(--ink-soft);}
.hopp-home .visio-banner p b{color:var(--white);}

.hopp-home .callout{background:var(--surface);border-left:4px solid var(--yellow);border-radius:0 12px 12px 0;padding:16px 20px;margin:22px 0;font-size:14.5px;color:var(--ink-soft);}
.hopp-home .callout b{color:var(--yellow);font-size:16.5px;}

.hopp-home .slogan{width:170px;margin:40px auto 0;border-radius:0;display:block;}
.hopp-home .divider{border:none;border-top:1px solid var(--line);margin:36px 0;}

/* ---- CTA final ---- */
.hopp-home .cta{border-radius:var(--radius);padding:22px 28px;margin:24px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.hopp-home .cta-primary{background:var(--yellow);color:var(--bg);}
.hopp-home .cta-title{font-size:17px;font-weight:800;margin:0 0 4px;color:var(--bg);}
.hopp-home .cta-sub{font-size:13.5px;margin:0;max-width:420px;color:#3a3600;}
.hopp-home .cta-btn{white-space:nowrap;padding:12px 22px;border-radius:999px;font-weight:800;font-size:14px;background:var(--bg);color:var(--yellow);}
.hopp-home .cta-btn:hover{color:var(--yellow);}
@media(max-width:720px){.hopp-home .cta{flex-direction:column;align-items:flex-start;}}