/* Maquette : structure inspirée de New Life Coffee, palette et polices EYWA. */

/* La photo ne touche plus le bord de l'écran : elle reste dans la largeur
   du contenu, comme sur leur site, et occupe nettement moins de place. */
body.eywa-photo-opening #accueil .hero-editorial-content{
 width:min(1280px,calc(100% - 96px))!important;margin:0 auto!important;
 grid-template-columns:1fr .86fr!important;gap:56px!important;align-items:center!important;
}
body.eywa-photo-opening #accueil .photo-carousel{padding:0!important}
body.eywa-photo-opening #accueil .carousel-stage{
 height:auto!important;aspect-ratio:1/1;border-radius:14px!important;max-height:560px;
}
body.eywa-photo-opening #accueil .hero-copy{padding:64px 0!important}

/* La note clients remonte juste sous le titre, comme chez eux. */
body.eywa-photo-opening #accueil .hero-trust{
 display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0 0 22px;
 font:500 14px/1.4 var(--sans,'DM Sans',sans-serif);color:#291817;
}
body.eywa-photo-opening #accueil .hero-trust .rating-stars{color:#b8865a;font-size:15px;letter-spacing:.08em}
body.eywa-photo-opening #accueil .hero-trust strong{font-weight:700}
body.eywa-photo-opening #accueil .hero-trust span:last-child{color:#6d544b;font-weight:400}

/* Les arguments en liste courte, l'essentiel en italique serif. */
body.eywa-photo-opening #accueil .hero-points{
 list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px;max-width:520px;
}
body.eywa-photo-opening #accueil .hero-points li{
 position:relative;padding-left:22px;font:400 16px/1.5 var(--sans,'DM Sans',sans-serif);color:#291817;
}
body.eywa-photo-opening #accueil .hero-points li::before{
 content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:#be957a;
}
body.eywa-photo-opening #accueil .hero-points em{
 font-family:var(--serif);font-style:italic;font-weight:600;color:#291817;
}
body.eywa-photo-opening #accueil .hero-points strong{font-weight:650}
body.eywa-photo-opening #accueil .hero-points a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Deux actions côte à côte : le devis, et le téléphone. */
body.eywa-photo-opening #accueil .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
body.eywa-photo-opening #accueil .button-ghost{
 background:transparent!important;color:#291817!important;
 box-shadow:inset 0 0 0 1.5px #c9ab9a!important;
}
body.eywa-photo-opening #accueil .button-ghost:hover{
 background:#f3ece4!important;box-shadow:inset 0 0 0 1.5px #291817!important;
}

@media(max-width:1100px) and (min-width:761px){
 body.eywa-photo-opening #accueil .hero-editorial-content{width:calc(100% - 56px)!important;gap:36px!important}
}
@media(max-width:760px){
 body.eywa-photo-opening #accueil .hero-editorial-content{width:100%!important;gap:0!important;grid-template-columns:1fr!important;align-items:stretch!important}
 body.eywa-photo-opening #accueil .carousel-stage{aspect-ratio:4/3;max-height:none}
 body.eywa-photo-opening #accueil .photo-carousel{padding:0 20px 24px!important}
 body.eywa-photo-opening #accueil .hero-copy{padding:32px 24px 28px!important}
 body.eywa-photo-opening #accueil .hero-points li{font-size:15px}
 body.eywa-photo-opening #accueil .hero-actions .button{flex:1 1 100%}
}

/* warm-palette.css remplit tous les .button en caramel avec !important :
   il faut un sélecteur plus spécifique pour le bouton secondaire. */
html body.eywa-warm.eywa-home.eywa-photo-opening #accueil .hero-actions .button-ghost,
html body.eywa-warm.eywa-home.eywa-photo-opening #accueil .hero-actions .button-ghost:hover{
 background:transparent!important;color:#291817!important;
 box-shadow:inset 0 0 0 1.5px #c9ab9a!important;
}
html body.eywa-warm.eywa-home.eywa-photo-opening #accueil .hero-actions .button-ghost:hover{
 background:#f5efe6!important;box-shadow:inset 0 0 0 1.5px #291817!important;
}

/* Tout doit tenir sans défiler, sur un portable comme sur un grand écran.
   La photo monte en haut du bloc au lieu d'être centrée, et la colonne de
   texte est resserrée : titre, interlignes, marges. */
body.eywa-photo-opening #accueil.hero-editorial{
 min-height:0!important;
}
body.eywa-photo-opening #accueil .hero-editorial-content{
 align-items:stretch!important;padding:28px 0 32px!important;
 min-height:calc(100svh - 70px - var(--eywa-help-height,61px))!important;
}
body.eywa-photo-opening #accueil .hero-copy{
 padding:0!important;justify-content:center!important;
}
body.eywa-photo-opening #accueil .photo-carousel{display:flex;align-items:stretch}
body.eywa-photo-opening #accueil .carousel-stage{
 aspect-ratio:auto!important;height:100%!important;max-height:none!important;align-self:stretch;
}
body.eywa-photo-opening #accueil h1#title{
 font-size:clamp(36px,3.1vw,50px)!important;line-height:1.04!important;margin:0 0 16px!important;
}
body.eywa-photo-opening #accueil .hero-trust{margin:0 0 16px;font-size:13.5px}
body.eywa-photo-opening #accueil .hero-points{gap:8px;margin:0 0 22px;max-width:500px}
body.eywa-photo-opening #accueil .hero-points li{font-size:15px;line-height:1.45;padding-left:20px}
body.eywa-photo-opening #accueil .hero-points li::before{width:6px;height:6px;top:.58em}
body.eywa-photo-opening #accueil .quote-note{margin-top:10px!important;font-size:12px!important}
body.eywa-photo-opening #accueil .hero-secondary{margin-top:12px!important}

@media(max-width:760px){
 body.eywa-photo-opening #accueil .hero-editorial-content{min-height:0!important;padding:0!important}
 body.eywa-photo-opening #accueil .carousel-stage{aspect-ratio:4/3!important;height:auto!important}
 body.eywa-photo-opening #accueil .hero-copy{padding:28px 24px 24px!important}
}

/* Deuxième passe : la photo prend moins de place et la colonne de texte
   est resserrée, le bloc respire au lieu de remplir toute la largeur. */
body.eywa-photo-opening #accueil .hero-editorial-content{
 width:min(1180px,calc(100% - 96px))!important;
 grid-template-columns:1fr .66fr!important;gap:64px!important;
}
body.eywa-photo-opening #accueil .photo-carousel{align-items:flex-start}
body.eywa-photo-opening #accueil .carousel-stage{
 height:auto!important;aspect-ratio:4/5!important;max-height:440px!important;align-self:flex-start;
}
body.eywa-photo-opening #accueil h1#title{font-size:clamp(32px,2.6vw,42px)!important;max-width:460px}
body.eywa-photo-opening #accueil .hero-points{max-width:430px}
body.eywa-photo-opening #accueil .hero-points li{font-size:14.5px}

/* Le sur-titre, dans l'esprit de leur « Service traiteur de café à… ». */
body.eywa-photo-opening #accueil .hero-kicker{
 margin:0 0 14px;font:500 12px/1.5 var(--sans,'DM Sans',sans-serif);
 letter-spacing:.18em;text-transform:uppercase;color:#8a6959;
}
@media(max-width:760px){
 body.eywa-photo-opening #accueil .hero-editorial-content{width:100%!important;grid-template-columns:1fr!important;gap:0!important}
 body.eywa-photo-opening #accueil .carousel-stage{aspect-ratio:4/3!important;max-height:none!important}
 body.eywa-photo-opening #accueil h1#title{max-width:none}
 body.eywa-photo-opening #accueil .hero-kicker{font-size:11px;margin-bottom:12px}
}

/* Troisième passe : on réduit la largeur totale du bloc plutôt que de
   brider le texte à l'intérieur d'une colonne large — sinon les
   arguments se cassent sur trois lignes et le bloc repart en hauteur. */
body.eywa-photo-opening #accueil .hero-editorial-content{
 width:min(1080px,calc(100% - 80px))!important;
 grid-template-columns:1fr .6fr!important;gap:48px!important;
}
body.eywa-photo-opening #accueil h1#title{max-width:none!important;font-size:clamp(32px,2.5vw,40px)!important}
body.eywa-photo-opening #accueil .hero-points{max-width:none!important;gap:7px!important;margin-bottom:20px!important}
body.eywa-photo-opening #accueil .hero-points li{font-size:14.5px!important;line-height:1.42!important}
body.eywa-photo-opening #accueil .carousel-stage{max-height:400px!important}
@media(max-width:760px){
 body.eywa-photo-opening #accueil .hero-editorial-content{width:100%!important;grid-template-columns:1fr!important;gap:0!important}
 body.eywa-photo-opening #accueil .carousel-stage{max-height:none!important}
}

/* « Service de bar à café mobile » devient le titre, comme le « Service
   traiteur de café à Philadelphie » de New Life. */
body.eywa-photo-opening #accueil h1#title{
 font-size:clamp(34px,3vw,48px)!important;line-height:1.08!important;max-width:9ch!important;
}
body.eywa-photo-opening #accueil h1#title em{font-style:italic!important}
@media(max-width:760px){
 body.eywa-photo-opening #accueil h1#title{max-width:none!important;font-size:clamp(30px,8vw,40px)!important}
}

/* Titre long façon New Life : il tient sur trois lignes, comme le leur. */
body.eywa-photo-opening #accueil h1#title{max-width:14ch!important;font-size:clamp(30px,2.6vw,42px)!important}
@media(max-width:760px){body.eywa-photo-opening #accueil h1#title{max-width:none!important}}

/* Mise en page calquée sur New Life Coffee : les deux actions juste après
   la note clients, la liste d'arguments ensuite. La barre du haut, elle,
   ne change pas. Fond relevé sur leur crème, #f8f8ef. */
html body.eywa-warm.eywa-photo-opening #accueil.hero-editorial{background:#f8f8ef!important}
body.eywa-photo-opening #accueil .hero-actions{margin:0 0 24px}
body.eywa-photo-opening #accueil .hero-points{margin:0 0 18px!important}
body.eywa-photo-opening #accueil .hero-quote{margin:0}
body.eywa-photo-opening #accueil .quote-note{margin-top:0!important}

@media(max-width:760px){
 /* Chez eux les deux boutons font toute la largeur, l'un sous l'autre. */
 body.eywa-photo-opening #accueil .hero-actions{flex-direction:column;gap:12px;margin-bottom:26px}
 /* En colonne, « flex:1 1 100% » prend 100 % de la HAUTEUR et étire les
    boutons : on repasse en base automatique. */
 body.eywa-photo-opening #accueil .hero-actions .button{
  flex:0 0 auto!important;width:100%;min-height:58px;height:58px;
  border-radius:999px!important;font-size:16px!important;justify-content:center;padding:0 24px!important;
 }
 body.eywa-photo-opening #accueil h1#title{font-size:clamp(34px,9.4vw,46px)!important;line-height:1.06!important;margin-bottom:18px!important}
 body.eywa-photo-opening #accueil .hero-trust{margin-bottom:22px}
 body.eywa-photo-opening #accueil .hero-points li{font-size:15.5px!important;line-height:1.5!important}
}

/* Les boutons ont quitté .hero-quote en remontant : ils perdaient la mise
   en forme que hero-editorial.css appliquait via ce conteneur. */
body.eywa-photo-opening #accueil .hero-actions .button{
 min-height:52px;padding:0 26px!important;border-radius:999px!important;
 font:500 15px var(--sans,'DM Sans',sans-serif)!important;
 display:inline-flex;align-items:center;justify-content:center;width:auto;
}

/* Proportions relevées sur leur page : bloc large, titre dominant, photo
   presque carrée et nettement plus grande que la version précédente. */
body.eywa-photo-opening #accueil .hero-editorial-content{
 width:min(1300px,calc(100% - 80px))!important;
 grid-template-columns:1fr .95fr!important;gap:72px!important;align-items:center!important;
}
body.eywa-photo-opening #accueil h1#title{
 font-size:clamp(38px,3.6vw,56px)!important;line-height:1.05!important;
 max-width:13ch!important;margin:0 0 20px!important;
}
body.eywa-photo-opening #accueil .carousel-stage{
 aspect-ratio:1/1!important;max-height:545px!important;align-self:center;
}
body.eywa-photo-opening #accueil .hero-points{margin:0!important;gap:12px!important}
body.eywa-photo-opening #accueil .hero-points li{font-size:16px!important;line-height:1.5!important}

/* Le crème de leur page couvre tout, pas seulement l'ouverture : sinon le
   bloc d'accueil tranche et paraît blanc. La barre du haut ne bouge pas. */
html body.eywa-warm.eywa-home :is(#services.intro-band,#services .editorial-copy,#reservation.booking,
 #personnalisation.personal-catalog,.reviews,#savoir-faire .craft-editorial-copy){background:#f8f8ef!important}
html body.eywa-warm.eywa-home .event-marquee{background:#241a17!important}

@media(max-width:760px){
 body.eywa-photo-opening #accueil .hero-editorial-content{width:100%!important;grid-template-columns:1fr!important;gap:0!important}
 body.eywa-photo-opening #accueil h1#title{max-width:none!important;font-size:clamp(34px,9.4vw,46px)!important}
 body.eywa-photo-opening #accueil .carousel-stage{aspect-ratio:4/3!important;max-height:none!important}
}

/* La mention de gratuité collait au dernier argument. */
body.eywa-photo-opening #accueil .hero-quote{margin-top:22px!important}

/* Note sur cinq : étoiles dorées, lisibles comme sur les plateformes d’avis. */
html body.eywa-home :is(.rating-stars,.review-stars){color:#fbbc04!important;letter-spacing:1.5px}
html body.eywa-home .hero-trust strong{font:600 15px/1.4 Arial,Helvetica,sans-serif}
html body.eywa-home .google-profile-link{display:inline-flex;gap:7px;align-items:center;margin-top:12px;font:500 14px/1.4 Arial,sans-serif;text-decoration:underline;text-underline-offset:4px}
#comment-ca-marche{scroll-margin-top:90px}