/* Premier écran (18/10) : « Conçu et développé en France » monte en tête, à la place du sur-titre, avec son
   drapeau et son style d'origine ; le public visé descend sous la phrase d'introduction, en trois étiquettes
   sur une seule ligne (Conciergeries, Agences indépendantes, Propriétaires). Pour retirer : supprimer ce fichier
   et sa ligne, puis reprendre le premier écran dans index-avant-origine.html. */
html .hero .hero-copy>.hero-origin-top{margin:0 0 22px}
.hero-audience{display:flex;flex-wrap:nowrap;gap:6px;margin:18px 0 0;padding:0;list-style:none}
.hero-audience li{flex:none;margin:0;padding:6px 12px;border:1px solid #9d503545;border-radius:99px;background:#fffaf2;font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;color:var(--forest)}
.hero-audience li:before{content:none}
@media(max-width:759px){
 html .hero .hero-copy>.hero-origin-top{order:0;margin:0 0 16px}
 .hero .hero-copy .hero-bottom>.hero-audience{order:1;gap:clamp(4px,1.2vw,6px);margin-top:14px}
 /* Les trois tiennent sur une ligne dès 360 px : taille et marges suivent la largeur de l'écran */
 .hero-audience li{padding:5px clamp(6px,1.9vw,12px);font-size:clamp(10.5px,3.05vw,13px);letter-spacing:-.01em}
 /* Une vraie respiration entre les quatre cartes et l'entrée du calendrier */
 .hero .hero-copy .hero-bottom>.hero-points{margin-bottom:36px}
}

/* « Voir les intégrations » retiré du bandeau au téléphone (demande de Jeremy, 18/10) : les outils défilent déjà, la section
   détaillée reste plus bas et dans le menu. */
@media(max-width:759px){.hero .integration-strip-heading>.text-link{display:none}}

/* Ordinateur et tablette (19/10, demande de Jeremy) : la mise en page d'avant. Sur-titre du public en haut,
   mention France en bas sous les outils ; les étiquettes et la mention du haut ne servent qu'au téléphone. */
@media(min-width:760px){
 html .hero .hero-copy>.hero-origin-top,.hero-audience{display:none}
}
@media(max-width:759px){
 .hero .hero-copy>.eyebrow{display:none}
 /* La mention du bas reste à sa place, invisible et sans hauteur : hero.js s'en sert de repère pour faire
    apparaître la barre des chapitres une fois le premier écran passé. */
 html .hero .hero-copy>.hero-origin-bottom{height:0;margin:0;padding:0;overflow:hidden;visibility:hidden}
}

/* Ordinateur (19/10) : avec les quatre besoins, la mention France passait sous le bas de l'écran sur un
   portable (1470 x 837). On retire la petite phrase « Il couvre quatre besoins » (les quatre lignes parlent
   d'elles-mêmes) et on resserre les espaces entre les blocs. Le téléphone ne change pas. */
@media(min-width:1200px){
 html .hero .hero-copy>h1{margin-bottom:-12px}
 html .hero .hero-copy .hero-points-intro{display:none}
 html .hero .hero-copy .hero-lead{margin-bottom:14px}
 html .hero .hero-copy .hero-points{margin-top:0;margin-bottom:0}
 html .hero .hero-copy .hero-actions{margin-top:26px}
 html .hero .hero-copy>.integration-strip{margin-top:-16px}
}