/* =================================================================
   MAISON HUBERT — Page « Professionnels & CSE »
   Cadeaux d'entreprise · Café au bureau · Sur-mesure · Travailler local
   S'appuie sur styles.css (tokens, header, footer, .ph, .reveal, .btn…)
   ================================================================= */

/* ---------- État de nav actif ---------- */
.nav-link.active{ opacity:1; }
.nav-link.active::after{ transform:scaleX(1); }

/* ===============================================================
   PAGE HERO — éditorial sombre
   =============================================================== */
.page-hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--espresso); color:var(--cream); overflow:clip;
  padding-block:clamp(132px,20vh,210px) clamp(48px,7vh,96px);
}
.page-hero .hero-ph{ position:absolute; inset:0; z-index:0; }
.page-hero .hero-ph .ph{ position:absolute; inset:0; border:0; }
.page-hero .wrap{ position:relative; z-index:2; width:100%; }
.page-hero-inner{ max-width:880px; }
.page-hero .display{
  margin:.18em 0 0; line-height:.92;
  font-size:clamp(2.7rem, min(8.6vw,11vh), 7rem);
}
.page-hero .lead{ margin:clamp(1.2rem,3vh,2rem) 0 0; max-width:74ch; color:var(--cream-soft); }
.page-hero .ph-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px;
  margin-top:clamp(1.6rem,4vh,2.6rem);
  font-family:var(--body); font-weight:600; font-size:.74rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bronze-lt);
}
.page-hero .ph-meta .sep{ width:5px; height:5px; border-radius:50%; background:var(--bronze); opacity:.6; }
.page-hero .hero-cta{ display:flex; flex-wrap:wrap; gap:16px 22px; margin-top:clamp(1.8rem,4vh,2.8rem); }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > *{ animation:heroIn .85s var(--ease) both; }
  .page-hero-inner > *:nth-child(1){ animation-delay:.05s; }
  .page-hero-inner > *:nth-child(2){ animation-delay:.13s; }
  .page-hero-inner > *:nth-child(3){ animation-delay:.21s; }
  .page-hero-inner > *:nth-child(4){ animation-delay:.29s; }
  .page-hero-inner > *:nth-child(5){ animation-delay:.37s; }
}

/* ===============================================================
   INTRO — proposition de valeur
   =============================================================== */
.pro-intro .lead{ margin-top:0; }
.pro-intro .sig{
  font-family:var(--serif); font-style:italic; color:var(--bronze-deep);
  font-size:clamp(1.2rem,1.7vw,1.5rem); margin-top:1.4rem;
}

/* ===============================================================
   NOS OFFRES — cartes
   =============================================================== */
.offers-head{ margin-bottom:clamp(40px,5vw,68px); }
.offers-head .h-section{ margin:.4em 0 0; }
.pro-offers{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,34px);
}
.offer-card{
  display:flex; flex-direction:column; overflow:hidden; border-radius:2px;
  background:var(--paper); border:1px solid var(--line-dark);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s;
}
.offer-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-card); border-color:rgba(80,43,28,.28); }
.offer-media{ position:relative; overflow:hidden; }
.offer-media .ph{ aspect-ratio:16/9; }
.offer-media .ph{ transition:transform 1.1s var(--ease); }
.offer-card:hover .offer-media .ph{ transform:scale(1.05); }
.offer-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--body); font-weight:600; font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--espresso);
  background:var(--olive); padding:.5em 1em; border-radius:40px;
}
.offer-tag.bronze{ background:var(--bronze-lt); }
.offer-body{ display:flex; flex-direction:column; flex:1; padding:clamp(26px,2.6vw,40px); }
.offer-ic{ color:var(--bronze-deep); margin-bottom:16px; }
.offer-ic svg{ width:38px; height:38px; }
.offer-body h3{
  font-size:clamp(1.55rem,2.2vw,2rem); text-transform:uppercase;
  letter-spacing:.04em; line-height:1.04; margin:0;
}
.offer-body > p{ color:var(--ink-soft); margin:.85rem 0 0; max-width:42ch; }
.offer-feats{
  list-style:none; margin:1.5rem 0 0; padding:1.5rem 0 0; display:flex; flex-direction:column; gap:11px;
  border-top:1px solid var(--line-dark);
}
.offer-feats li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:var(--ink); }
.offer-feats svg{ width:18px; height:18px; color:var(--olive-deep); flex:none; margin-top:5px; }
.offer-foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:auto; padding-top:1.8rem; }
.offer-foot .price{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); font-size:1rem; }
.offer-foot .price b{ font-style:normal; font-weight:600; color:var(--ink); }

/* ===============================================================
   MANIFESTE « TRAVAILLER LOCAL »
   =============================================================== */
.local-band{ background:var(--espresso); color:var(--cream); position:relative; overflow:hidden; }
.local-inner{ position:relative; z-index:2; max-width:62rem; }
.local-band .overline{ justify-content:flex-start; }
.local-claim{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.7rem,3.4vw,2.9rem); line-height:1.26; letter-spacing:.005em;
  margin:1.4rem 0 0; max-width:24ch;
}
.local-claim .hl{ font-style:normal; color:var(--olive-soft); }
.local-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,52px);
  margin-top:clamp(44px,5vw,72px); border-top:1px solid var(--line-light); padding-top:clamp(36px,4vw,56px);
}
.local-item .ic{ color:var(--bronze-lt); margin-bottom:14px; }
.local-item .ic svg{ width:34px; height:34px; }
.local-item h3{ font-size:1.25rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .5rem; }
.local-item p{ color:var(--cream-soft); font-size:.98rem; margin:0; max-width:32ch; }

/* ===============================================================
   COMMENT ÇA MARCHE — étapes
   =============================================================== */
.process-head{ text-align:center; margin-bottom:clamp(44px,5vw,72px); }
.process-head .overline{ justify-content:center; }
.process-head .h-section{ margin:.4em 0 0; }
.pro-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,2.6vw,40px);
  position:relative;
}
.pro-step{ position:relative; text-align:center; }
.pro-step .num{
  font-family:var(--display); font-weight:500; color:var(--bronze);
  font-size:clamp(2.6rem,4.5vw,3.6rem); line-height:1; display:block;
}
.pro-step .num::after{
  content:""; display:block; width:34px; height:1px; background:var(--bronze); opacity:.5;
  margin:18px auto 22px;
}
.pro-step h3{ font-size:1.18rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .55rem; }
.pro-step p{ color:var(--ink-soft); font-size:.96rem; margin:0; max-width:26ch; margin-inline:auto; }

/* ===============================================================
   RÉFÉRENCES — confiance + témoignages
   =============================================================== */
.refs{ background:var(--paper); }
.refs-head{ text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.refs-head .overline{ justify-content:center; }
.refs-head .h-section{ margin:.4em 0 0; }
.logo-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(14px,1.6vw,22px);
  margin-bottom:clamp(40px,5vw,68px);
}
.logo-cell{
  aspect-ratio:5/2; border:1px solid var(--line-dark); border-radius:2px;
  display:flex; align-items:center; justify-content:center; background:var(--ivory);
}
.logo-cell .ph{ position:absolute; inset:0; }
.logo-cell{ position:relative; overflow:hidden; }
.logo-cell .ph::after{ font-size:.58rem; }

.pro-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); }
.pro-quote{
  background:var(--ivory); border:1px solid var(--line-dark); border-radius:2px;
  padding:30px clamp(24px,2vw,32px); display:flex; flex-direction:column; gap:16px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.pro-quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.pro-quote .mark{ font-family:var(--display); font-size:2.4rem; line-height:.6; color:var(--bronze-lt); }
.pro-quote .qt{ font-family:var(--serif); font-style:italic; font-size:1.2rem; line-height:1.42; color:var(--ink); margin:0; flex:1; }
.pro-quote .who{ display:flex; align-items:center; gap:13px; padding-top:6px; border-top:1px solid var(--line-dark); }
.pro-quote .ava{
  width:44px; height:44px; border-radius:50%; background:var(--cocoa); color:var(--bronze-lt);
  display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:1.2rem; flex:none;
}
.pro-quote .nm{ font-weight:600; letter-spacing:.02em; line-height:1.2; }
.pro-quote .role{ font-size:.82rem; color:var(--ink-faint); }

/* ===============================================================
   DEVIS — contact
   =============================================================== */
.devis{ background:var(--cocoa); color:var(--cream); position:relative; overflow:hidden; }
.devis-inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(40px,6vw,96px); align-items:start; position:relative; z-index:2; }
.devis-aside .overline{ justify-content:flex-start; }
.devis-aside h2{ font-size:clamp(2rem,3.6vw,3rem); text-transform:uppercase; letter-spacing:.045em; line-height:1.04; margin:.4em 0 0; color:var(--bronze-lt); }
.devis-aside .lead{ color:var(--cream-soft); margin:1.2rem 0 0; max-width:42ch; }
.devis-contact{ list-style:none; margin:clamp(2rem,4vh,2.8rem) 0 0; padding:0; display:flex; flex-direction:column; gap:15px; }
.devis-contact li{ display:flex; gap:13px; align-items:flex-start; color:var(--cream-soft); font-size:1rem; }
.devis-contact svg{ width:19px; height:19px; color:var(--bronze-lt); flex:none; margin-top:4px; }
.devis-contact a{ color:var(--cream-soft); transition:color .3s; }
.devis-contact a:hover{ color:var(--cream); }

.devis-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.devis-form .fld{ display:flex; flex-direction:column; gap:8px; }
.devis-form .fld.full{ grid-column:1 / -1; }
.devis-form label{
  font-family:var(--body); font-weight:600; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--bronze-lt);
}
.devis-form input,
.devis-form select,
.devis-form textarea{
  background:rgba(239,230,214,.04); border:1px solid var(--line-light); color:var(--cream);
  font-family:var(--body); font-size:1.02rem; padding:.85em 1em; border-radius:2px; width:100%;
  transition:border-color .3s, background .3s;
}
.devis-form textarea{ resize:vertical; min-height:120px; line-height:1.5; }
/* Choix « recontacté par » : cases radio (texte normal, pas en capitales comme les libellés) */
.devis-form .radio-row{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; padding-top:6px; }
.devis-form .radio-row .radio{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--body); font-weight:400; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--cream);
}
.devis-form .radio-row input[type="radio"]{ width:auto; margin:0; accent-color:var(--olive); }
.devis-form input::placeholder,
.devis-form textarea::placeholder{ color:var(--cream-faint); }
.devis-form input:focus,
.devis-form select:focus,
.devis-form textarea:focus{ outline:none; border-color:var(--bronze-lt); background:rgba(239,230,214,.07); }
.devis-form select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E0B16B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em;
}
.devis-form select option{ background:var(--cocoa); color:var(--cream); }
.devis-form .submit-row{ grid-column:1 / -1; display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:4px; }
.devis-form .submit-row .note{ font-size:.82rem; color:var(--cream-faint); }
.devis-form .btn{ --bg:var(--olive); --fg:var(--espresso); }

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media(max-width:1024px){
  .pro-offers{ grid-template-columns:1fr; }
  .pro-steps{ grid-template-columns:repeat(2,1fr); row-gap:48px; }
  .local-grid{ grid-template-columns:1fr; gap:32px; }
  .pro-quotes{ grid-template-columns:1fr; }
  .logo-strip{ grid-template-columns:repeat(3,1fr); }
  .devis-inner{ grid-template-columns:1fr; gap:48px; }
}
@media(max-width:620px){
  .pro-steps{ grid-template-columns:1fr; }
  .logo-strip{ grid-template-columns:repeat(2,1fr); }
  .devis-form{ grid-template-columns:1fr; }
  .offer-foot{ flex-direction:column; align-items:flex-start; gap:14px; }
}

/* ===== Ajustements ===== */
/* Manifeste « Travailler local » : phrase centrée, ~2 lignes */
.local-band .local-inner{ text-align:center; margin-inline:auto; }
.local-band .local-inner .overline{ justify-content:center; }
.local-band .local-claim{ max-width:none; margin-inline:auto; text-wrap:balance; font-size:clamp(1.5rem,3vw,2.4rem); }
/* Ancres internes : décalage sous le header fixe pour le scroll fluide */
#hero, #intro, #process, #offres, #local, #label-marseille, #devis{ scroll-margin-top:96px; }
/* Hero : texte explicatif sur ~2 lignes (plus lisible) */
.page-hero-inner .lead{ max-width:78ch; }
/* Hero Pro : informations centrées (horizontalement ET verticalement) */
.page-hero{ align-items:center; padding-block:clamp(120px,16vh,180px); }
.page-hero .hero-ph .ph::after{ display:none; } /* pas de label placeholder derrière le contenu centré */
.page-hero-inner{ margin-inline:auto; text-align:center; }
.page-hero-inner .lead{ margin-inline:auto; }
.page-hero .hero-cta{ justify-content:center; }
/* « Comment ça marche » : fond distinct pour le séparer du bloc précédent */
#process{ background:var(--ivory-2); }
/* Bloc « Travailler local » : items du bas centrés (icône + titre + texte) */
.local-item{ text-align:center; }
.local-item .ic{ display:flex; justify-content:center; }
.local-item p{ margin-inline:auto; }
/* Séparateur en haut du bloc « Demander un devis » (les 2 blocs sombres se suivent) */
.devis-sep{ color:var(--bronze-lt); margin-bottom:clamp(40px,6vh,80px); position:relative; z-index:2; }
/* Titres de section en laiton — même teinte que « La Maison Hubert » de l'accueil (.overline) */
.h-section{ color:var(--bronze-deep); }

/* Apparition lettre par lettre du titre du hero (même effet que la page Notre histoire) */
.page-hero .display .ltr{ display:inline; }
@media (prefers-reduced-motion: no-preference){
  .page-hero-inner > .display{ animation:none; } /* on anime les lettres, pas le bloc */
  .page-hero .display .ltr{
    opacity:0; will-change:opacity, filter;
    animation:ltrReveal .7s var(--ease) both;
    animation-delay:calc(var(--i) * 38ms + .12s);
  }
  @keyframes ltrReveal{
    0%   { opacity:0; filter:blur(12px); text-shadow:0 0 22px rgba(224,177,107,.9); }
    55%  { opacity:1; filter:blur(0);    text-shadow:0 0 10px rgba(224,177,107,.45); }
    100% { opacity:1; filter:blur(0);    text-shadow:none; }
  }
}

/* =================================================================
   RESPONSIVE TÉLÉPHONE — ajustements ciblés
   ================================================================= */
/* (1) Hero : « Professionnels » est un seul mot (insécable). À la valeur
   plancher (2.7rem), il dépasse à droite sur les petits écrans. On réduit la
   taille sur mobile pour qu'il tienne dans la largeur. */
@media(max-width:600px){
  .page-hero .display{ font-size:clamp(1.8rem, 8.4vw, 2.7rem); overflow-wrap:break-word; }
}

/* (2) « Un partenaire de proximité » : même correctif que « La maison Hubert »
   et « L'art du chocolat » — la colonne photo restait étroite (.split.narrow-left
   l'emporte). On force 1 colonne : grande photo AU-DESSUS, puis le texte. */
@media(max-width:768px){
  #intro .split.narrow-left{ grid-template-columns:1fr; gap:26px; }
  #intro .split .figure{ order:-1; margin:0; }
  /* Photo portrait (3/4) : on garde le format vertical et on la borne,
     un cadre paysage rognerait fortement le sujet. */
  #intro .figure .ph{ aspect-ratio:3/4; width:100%; max-width:340px; height:auto; margin-inline:auto; }
}

/* =================================================================
   LABEL « FABRIQUÉ À MARSEILLE » — bandeau compact (clair entre les
   deux blocs sombres #local et #devis, pour faire ressortir le label)
   ================================================================= */
/* Le bandeau est encadré par « Un partenaire de proximité » (ivory) et
   « Comment ça marche » (ivory-2). Fond le plus clair + filets pour qu'il se
   détache des deux, sinon il se confond avec la section suivante. */
.label-band{ background:var(--paper); padding-block:clamp(42px,5.5vw,74px); border-block:1px solid var(--line-dark); }
.label-inner{
  display:flex; align-items:center; gap:clamp(28px,5vw,60px);
  max-width:1200px; margin-inline:auto;
}
.label-text{ flex:1 1 auto; }
.label-logo{
  flex:none; width:clamp(124px,15vw,152px); aspect-ratio:1; border-radius:50%;
  overflow:hidden; display:block;
  box-shadow:0 14px 34px -16px rgba(15,9,5,.45);
}
.label-logo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.22);   /* pousse la marge blanche du PNG hors du cercle */
}
.label-title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.5rem,2.5vw,2.05rem); text-transform:uppercase;
  letter-spacing:.03em; line-height:1.1; color:var(--cocoa); margin:0 0 .7rem;
}
.label-text p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.6; margin:0; max-width:none; }
.label-text p + p{ margin-top:.85em; }

@media(max-width:760px){
  .label-band{ padding-block:clamp(40px,9vw,56px); }
  .label-inner{ flex-direction:column; text-align:center; gap:24px; }
  .label-text p{ margin-inline:auto; }
}

/* Lien de renvoi au bas de chaque carte offre. */
.offer-more{ margin-top:clamp(16px,1.8vw,24px); }

/* ---------- Retour du formulaire de devis ---------- */
/* Piège à robots : retiré du flux et du parcours clavier, jamais lu à voix haute.
   Surtout pas display:none, que certains automates savent repérer. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Mêmes règles que sur la page Contact (contact.css) : garder les deux
   déclarations identiques si l'une change. */
.form-status{
  grid-column:1 / -1;
  margin:1rem 0 0; min-height:1.4em;
  font-family:var(--body); font-size:.86rem; letter-spacing:.04em;
}
.form-status.is-succes{ color:var(--olive); }
.form-status.is-erreur{ color:#E0906F; }

/* ---------- reCAPTCHA ---------- */
/* Le badge flottant de Google chevauche le pied de page : on le masque, et la
   mention légale ci-dessous le remplace — c'est l'alternative que Google exige. */
.grecaptcha-badge{ visibility:hidden; }
.recaptcha-mention{
  grid-column:1 / -1;
  margin:.7rem 0 0; font-family:var(--body); font-size:.72rem; line-height:1.5;
  color:var(--cream-faint); letter-spacing:.02em;
}
.recaptcha-mention a{ color:var(--cream-soft); text-decoration:underline; text-underline-offset:2px; }
.recaptcha-mention a:hover{ color:var(--bronze-lt); }