/* Proxiclic-Provence — feuille de style principale */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800&display=swap');

:root{
  --bleu: #06224E;
  --bleu-dark: #06224E;
  --bleu-light: rgba(6,34,78,.06);
  --orange: #EB6139;
  --orange-dark: #EB6139;
  --orange-light: rgba(235,97,57,.08);
  --nuit: #06224E;
  --sable: #F2F1F1;
  --sable-2: #ffffff;
  --texte: #06224E;
  --texte-doux: rgba(6,34,78,.68);
  --blanc: #F2F1F1;
  --succes: #06224E;
  --alerte: #EB6139;
  --ombre: 0 20px 45px -20px rgba(6,34,78,.3);
  --ombre-sm: 0 8px 20px -10px rgba(6,34,78,.2);
  --rayon: 18px;
  --rayon-sm: 10px;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:17.5px; }
body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, sans-serif;
  color:var(--texte);
  background:var(--sable-2);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Poppins', system-ui, sans-serif;
  color:var(--nuit);
  line-height:1.15;
  margin:0 0 .5em;
  font-weight:600;
}
h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
p{ margin:0 0 1em; color:var(--texte-doux); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; border-radius:var(--rayon-sm); }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:700; color:var(--bleu);
  background:var(--bleu-light); padding:6px 14px; border-radius:99px;
  margin-bottom:16px;
}
.poids-leger{ font-weight:400; }
.titre-centre{ text-align:center; }

/* Tous les titres/CTA sont centres, sauf le hero (voir .hero-nouveau / .pro-hero) */
.produit-grid > div h2, .confiance-grid > div h2{ text-align:center; }
.produit-grid > div p, .confiance-grid > div p{ text-align:justify; }
.produit-grid > div .btn-orange, .produit-grid > div .btn-marine,
.confiance-grid > div .btn-orange, .confiance-grid > div .btn-marine{
  display:table; margin-left:auto; margin-right:auto; margin-top:auto;
}
.zones-band h3{ text-align:center; }
.zones-band p{ text-align:justify; }

/* Header — collé pleine largeur au repos, se condense en pastille flottante au scroll */
.site-header{
  position:sticky; top:0; z-index:50;
  padding:0; background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(6,34,78,.08);
  transition:padding .35s cubic-bezier(.4,0,.2,1), background-color .35s, border-color .35s;
}
.site-header.is-condensed{ padding:14px 16px; background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.site-header .bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--max); margin:0 auto; gap:16px;
  flex-wrap:nowrap; position:relative;
  background:transparent;
  border-radius:0; border:1px solid transparent; box-shadow:none;
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.site-header.is-condensed .bar{
  max-width:980px; padding:8px 20px 8px 12px; border-radius:99px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  box-shadow:var(--ombre); border-color:rgba(6,34,78,.08);
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:clamp(.85rem, 1.4vw, 1.05rem); color:var(--nuit); flex-shrink:1; min-width:44px; white-space:nowrap; overflow:hidden; }
.brand img{ height:clamp(32px, 3vw, 42px); width:auto; border-radius:8px; flex-shrink:0; transition:height .35s; }
.site-header.is-condensed .brand img{ height:30px; }
.site-header.is-condensed .brand small{ display:none; }
.brand span{ overflow:hidden; text-overflow:ellipsis; }
.brand small{ display:block; font-weight:500; font-size:.7rem; color:var(--texte-doux); white-space:nowrap; }
.main-nav{ display:flex; gap:clamp(6px, 1.4vw, 22px); flex-wrap:nowrap; min-width:0; flex-shrink:0; }
.main-nav a{
  font-size:clamp(.72rem, .95vw, .92rem); font-weight:600; color:var(--texte);
  position:relative; padding:4px 0; white-space:nowrap;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:2px;
  background:var(--bleu); transition:width .2s;
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.header-actions{ display:flex; align-items:center; gap:clamp(6px, 1.2vw, 14px); flex-shrink:0; }
.tel-link{ font-weight:700; font-size:clamp(.72rem, .95vw, .92rem); display:flex; align-items:center; gap:6px; white-space:nowrap; color:var(--orange-dark); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--bleu); color:#fff; font-weight:700;
  padding:15px 28px; border-radius:99px; font-size:1rem;
  box-shadow:var(--ombre-sm); border:none; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s;
}
.btn:hover{ background:var(--bleu-dark); transform:translateY(-2px); box-shadow:var(--ombre); }
.btn.btn-outline{ background:transparent; border:1.5px solid var(--nuit); color:var(--nuit); box-shadow:none; }
.btn.btn-outline:hover{ background:var(--nuit); color:#fff; }
.nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; cursor:pointer; color:var(--nuit); }

/* Hero */
.hero{
  padding:70px 0 90px;
  background:
    radial-gradient(circle at 85% 10%, var(--bleu-light) 0%, transparent 55%),
    var(--sable-2);
}
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1{ font-size:clamp(2.1rem, 4vw, 3.2rem); }
.hero .lead{ font-size:1.15rem; color:var(--texte-doux); max-width:52ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.hero-media{ position:relative; }
.hero-media img{
  border-radius:var(--rayon); box-shadow:var(--ombre-sm);
  border:1.5px solid rgba(6,34,78,.1);
  width:100%; max-height:480px; height:auto; object-fit:contain;
  background:#fff;
}
.hero-badge{
  position:absolute; bottom:-22px; left:-22px; background:#fff;
  border-radius:var(--rayon-sm); padding:16px 20px; box-shadow:var(--ombre);
  font-family:'Poppins', sans-serif; font-weight:600; max-width:220px; font-size:.95rem;
  border-left:4px solid var(--orange);
}

/* Cards / services grid */
.section{ padding:88px 0; }
.section.alt{ background:var(--sable-2); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.7rem, 3vw, 2.4rem); }
.section-head-centre{ max-width:640px; margin:0 auto 32px; text-align:center; }
.grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.grid-2 img{
  width:100%; max-height:440px; height:auto; object-fit:contain;
  border-radius:var(--rayon); box-shadow:var(--ombre-sm);
  border:1.5px solid rgba(6,34,78,.1);
  background:#fff;
}
.card{
  background:#fff; border-radius:var(--rayon); padding:34px 30px;
  box-shadow:var(--ombre-sm); border:1px solid rgba(6,34,78,.06);
  transition:transform .2s, box-shadow .2s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--ombre); }
.card .icon{
  width:54px; height:54px; border-radius:14px; background:var(--bleu-light);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:18px;
}
.card h3{ font-size:1.25rem; margin-bottom:10px; }
.card p{ font-size:1rem; margin-bottom:0; }
.card .more{ display:inline-block; margin-top:16px; font-weight:700; color:var(--bleu); font-size:.95rem; }

.pillars{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:40px; }
.pillar h4{ font-size:1.02rem; margin-bottom:6px; }
.pillar p{ font-size:.9rem; }

.content-block p{ color:var(--texte-doux); }
.content-block strong{ color:var(--nuit); }

.cta-band{
  background:var(--nuit); color:#fff; border-radius:18px;
  padding:26px 32px; margin:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  text-align:left;
}
.cta-band .cta-texte{ flex:1; min-width:240px; }
.cta-band h2{ color:#fff; font-size:1.3rem; margin:0 0 4px; }
.cta-band p{ color:rgba(242,241,241,.75); font-size:.95rem; margin:0; }
.cta-band .btn{
  background:var(--orange); color:#fff; flex-shrink:0;
  padding:13px 26px; font-size:.95rem;
}
.cta-band .btn:hover{ background:var(--orange-dark); }
@media (max-width:560px){
  .cta-band{ text-align:center; justify-content:center; }
}

/* Zones list */
.zone-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.zone-list li{
  background:#fff; border:1px solid rgba(6,34,78,.12); padding:8px 16px;
  border-radius:99px; font-size:.88rem; font-weight:600;
}

/* Footer */
.site-footer{ background:var(--nuit); color:rgba(242,241,241,.8); padding:70px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; }
.site-footer h4{ color:#fff; font-family:'Inter',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.site-footer p, .site-footer a{ color:rgba(242,241,241,.8); font-size:.92rem; }
.site-footer a:hover{ color:var(--orange); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:50px; padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.82rem; color:rgba(242,241,241,.55);
}
.footer-quote{ font-family:'Poppins', sans-serif; font-style:italic; color:#F2F1F1; margin-top:10px; }
.footer-logos{ display:flex; gap:14px; align-items:center; margin-top:14px; }
.footer-logos img{ height:34px; width:auto; filter:brightness(0) invert(1); opacity:.85; }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; }
.contact-form{ background:#fff; border-radius:var(--rayon); padding:34px; box-shadow:var(--ombre-sm); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:6px; }
.field input, .field textarea{
  width:100%; padding:13px 14px; border-radius:var(--rayon-sm);
  border:1.5px solid rgba(6,34,78,.18); font-family:inherit; font-size:.95rem;
  background:var(--sable-2);
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--bleu); }
.contact-info-card{ background:var(--bleu-light); border-radius:var(--rayon); padding:32px; }
.contact-info-card li{ display:flex; gap:12px; margin-bottom:18px; align-items:flex-start; }
.contact-info-card .ic{ font-size:1.2rem; }

.breadcrumb{ font-size:.85rem; color:var(--texte-doux); padding:20px 0 0; }
.breadcrumb a{ color:var(--bleu); font-weight:600; }

/* Palier intermédiaire : on gagne de la place en masquant le sous-titre du logo
   avant que la nav ne soit à l'étroit — évite que le nom de la marque ne s'écrase. */
@media (max-width: 980px){
  .brand small{ display:none; }
  .brand img{ height:32px; }
}

/* La nav ne bascule en menu hamburger qu'en dessous d'un vrai seuil mobile/tablette,
   jamais sur un écran d'ordinateur : les libellés courts + le rétrécissement fluide
   (clamp) suffisent à tenir sur une ligne au-dessus de ce seuil. */
@media (max-width: 860px){
  .main-nav{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
    background:#fff; flex-direction:column; gap:0; padding:10px 24px 20px;
    box-shadow:var(--ombre-sm); border-bottom:1px solid rgba(6,34,78,.08);
  }
  .main-nav.is-open{ display:flex; }
  .main-nav a{ padding:12px 0; border-bottom:1px solid rgba(6,34,78,.08); }
  .header-actions .btn.btn-outline{ display:none; }
  .nav-toggle{ display:block; }
}
@media (max-width: 420px){
  /* Sous 420px, le numéro affiché en toutes lettres écrase le nom de la marque
     (ellipsis type "Proxicli…") ; on garde juste l'icône, le numéro complet
     reste accessible via le bouton "Appeler maintenant" du contenu. */
  .tel-numero{ display:none; }
}
@media (max-width: 1000px){
  .hero-grid, .grid-2, .contact-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .pillars{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta-band{ margin:0 16px; }
}
@media (max-width: 560px){
  .grid-3, .pillars, .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding:44px 0 60px; }
  .section{ padding:60px 0; }
  .hero-media img{ max-height:260px; }
  .grid-2 img{ max-height:220px; }
}

/* Ancrage des sections : évite qu'elles ne se cachent sous le header sticky */
main section[id]{ scroll-margin-top: 110px; }

/* Bannière cookies */
.cookie-banniere{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:900px; margin:0 auto; background:#fff; border-radius:16px;
  box-shadow:var(--ombre); padding:20px 22px; display:flex; align-items:center;
  gap:20px; flex-wrap:wrap; border:1px solid rgba(6,34,78,.08);
  transform:translateY(140%); opacity:0; transition:transform .4s ease, opacity .4s ease;
}
.cookie-banniere.visible{ transform:translateY(0); opacity:1; }
.cookie-banniere p{ flex:1; min-width:240px; font-size:.85rem; margin:0; color:var(--texte-doux); }
.cookie-banniere p a{ color:var(--bleu); font-weight:700; text-decoration:underline; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.cookie-actions button{ font-family:inherit; cursor:pointer; }
.cookie-refuser{
  background:transparent; border:1.5px solid rgba(6,34,78,.2); color:var(--texte);
  font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:99px;
}
.cookie-refuser:hover{ background:var(--sable); }
.cookie-accepter{
  background:var(--orange); border:none; color:#fff; font-weight:700; font-size:.85rem;
  padding:10px 20px; border-radius:99px; box-shadow:var(--ombre-sm);
}
.cookie-accepter:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.cookie-fermer{
  background:none; border:none; color:var(--texte-doux); font-size:1.2rem; cursor:pointer;
  line-height:1; padding:4px;
}
@media (max-width:560px){
  .cookie-banniere{ padding:18px; flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-actions{ justify-content:center; }
}

/* Frise chronologique — section Histoire */
.fil-temps{ position:relative; max-width:820px; margin:0 auto; padding:20px 0 0; }
.fil-temps::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, var(--bleu), var(--orange));
  transform:translateX(-50%); border-radius:99px;
}
.ere{ position:relative; margin-bottom:90px; }
.ere:last-child{ margin-bottom:0; }
.ere-point{
  position:absolute; left:50%; top:6px; width:18px; height:18px; border-radius:50%;
  background:var(--sable-2); border:4px solid var(--orange); transform:translateX(-50%);
  box-shadow:0 0 0 6px rgba(235,97,57,.12); z-index:2;
}
.ere-carte{
  width:calc(50% - 40px); background:#fff; border-radius:var(--rayon);
  box-shadow:var(--ombre-sm); padding:28px 26px; position:relative;
}
.ere:nth-child(odd) .ere-carte{ margin-left:0; }
.ere:nth-child(even) .ere-carte{ margin-left:calc(50% + 40px); }
.ere-annee{
  display:inline-block; font-family:'Poppins', sans-serif; font-weight:700; font-size:2.2rem;
  color:var(--bleu); line-height:1;
}
.ere-date{ display:block; font-size:.75rem; color:var(--texte-doux); text-transform:uppercase; letter-spacing:.08em; margin-top:4px; }
.logo-vitrine{
  margin:18px 0; padding:22px; background:var(--sable-2); border-radius:12px; border:1px solid rgba(6,34,78,.1);
  text-align:center; border:1px solid rgba(6,34,78,.1);
}
.logo-vitrine img{ margin:0 auto; border-radius:10px; }
.ere-nom{ margin:6px 0 10px; font-size:1.25rem; }
.ere-adresse{
  font-size:.82rem; color:var(--texte-doux); margin:0 0 14px; padding-left:20px; position:relative;
}
.ere-adresse::before{ content:"📍"; position:absolute; left:0; top:0; }
.avis-reconstitution{
  display:inline-block; margin-top:10px; font-size:.7rem; color:var(--bleu);
  background:var(--bleu-light); padding:4px 10px; border-radius:99px; font-weight:700;
}
@media (max-width:760px){
  .fil-temps::before{ left:10px; }
  .ere-point{ left:10px; }
  .ere-carte, .ere:nth-child(even) .ere-carte{ width:calc(100% - 46px); margin-left:46px; }
}

/* Pages légales (mentions, confidentialité, cookies) */
.page-legale{ max-width:760px; margin:0 auto; }
.page-legale h2{ font-size:1.3rem; margin-top:2.2em; }
.page-legale h2:first-of-type{ margin-top:0; }
.page-legale p, .page-legale li{ color:var(--texte-doux); font-size:.98rem; }
.page-legale ul{ padding-left:1.4em; list-style:disc; margin-bottom:1em; }
.page-legale li{ margin-bottom:.4em; }
.page-legale strong{ color:var(--nuit); }
.page-legale .maj{ font-size:.82rem; color:var(--texte-doux); margin-bottom:2.5em; }

/* Encadrés de texte alternant bleu/orange (hors section Histoire) */
.encadre-bleu, .encadre-orange{
  background:#fff; border-radius:18px; padding:32px 34px;
  border:1.5px solid; box-shadow:var(--ombre-sm);
}
.encadre-bleu{ border-color:var(--bleu); }
.encadre-orange{ border-color:var(--orange); }
@media (max-width:560px){
  .encadre-bleu, .encadre-orange{ padding:24px 22px; }
}

/* ══════════════════════════════════════════════════════
   Nouvelle page d'accueil (hero mascotte + slider services)
   ══════════════════════════════════════════════════════ */

.site-header.header-minimal .bar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
}
.site-header.header-minimal .brand{ grid-column:1; justify-self:start; }
.site-header.header-minimal .main-nav{ grid-column:2; justify-self:center; }
.site-header.header-minimal .header-actions{ grid-column:3; justify-self:end; }
.site-header.header-minimal .brand small{ letter-spacing:.28em; font-size:.62rem; }
@media (max-width:760px){
  .site-header.header-minimal .bar{ grid-template-columns:auto auto; }
  .site-header.header-minimal .main-nav{ display:none; }
}

.hero-nouveau{ padding:56px 0 40px; }
.hero-nouveau .hero-grid-v2{
  display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
}
@media (max-width:860px){ .hero-nouveau .hero-grid-v2{ grid-template-columns:1fr; text-align:center; } }
.hero-nouveau h1{ font-size:2.2rem; margin-bottom:24px; }
.hero-nouveau h1 strong{ color:var(--nuit); font-weight:600; }
.hero-actions-v2{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
@media (max-width:860px){ .hero-actions-v2{ justify-content:center; } }
.btn-orange{
  background:var(--orange); color:#fff; padding:14px 30px; border-radius:99px;
  font-weight:700; font-size:.92rem; text-decoration:none; display:inline-block;
  box-shadow:var(--ombre-sm); transition:.15s;
}
.btn-orange:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.btn-marine{
  background:var(--orange); color:#fff; padding:14px 30px; border-radius:99px;
  font-weight:700; font-size:.92rem; text-decoration:none; display:inline-block; transition:.15s;
  box-shadow:var(--ombre-sm);
}
.btn-marine:hover{ background:var(--orange-dark); transform:translateY(-1px); }
.hero-actions-v2 .btn-marine{ background:var(--nuit); }
.hero-actions-v2 .btn-marine:hover{ background:var(--bleu); }
.hero-stars{ color:#FFC53D; font-size:1.3rem; letter-spacing:3px; text-decoration:none; display:inline-block; cursor:pointer; transition:.15s; }
.hero-stars:hover{ transform:scale(1.05); }
@media (max-width:860px){ .hero-stars{ justify-content:center; display:flex; } }
.hero-mascotte{ display:flex; justify-content:center; }
.hero-mascotte img{ width:100%; max-width:340px; }

/* ── Slider services ── */
.services-slider-wrap{ position:relative; margin-top:32px; }
.services-slider{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none;
}
.services-slider::-webkit-scrollbar{ display:none; }
.service-card{
  scroll-snap-align:start; flex:0 0 auto; width:260px; border-radius:var(--rayon);
  overflow:hidden; background:#fff; box-shadow:var(--ombre-sm);
}
.service-card img{ width:100%; height:150px; object-fit:cover; border-radius:0; }
.service-card-body{ padding:16px 18px 20px; text-align:center; }
.service-card-body h3{ font-size:.98rem; margin-bottom:8px; }
.service-card-body p{ font-size:.82rem; margin:0; }
.slider-arrow{
  position:absolute; top:75px; right:-14px; width:44px; height:44px; border-radius:50%;
  background:var(--bleu); color:#fff; border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(6,34,78,.5);
  transition:.15s; z-index:2;
}
.slider-arrow:hover{ background:var(--bleu-dark); transform:scale(1.06); }
.slider-arrow.prev{ left:-14px; right:auto; transform:scaleX(-1); }
.slider-arrow.prev:hover{ transform:scaleX(-1) scale(1.06); }
@media (max-width:640px){
  .service-card{ width:220px; }
  .slider-arrow{ display:none; }
}

.section-cta-centre{ text-align:center; margin-top:8px; }

/* ── Confiance (poignée de main) ── */
.confiance-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:stretch;
}
.confiance-grid > div{ display:flex; flex-direction:column; }
@media (max-width:860px){ .confiance-grid{ grid-template-columns:1fr; text-align:center; } }
.confiance-grid img{ border-radius:var(--rayon); width:100%; }
.confiance-grid h2 strong{ display:block; color:var(--nuit); font-weight:700; }

/* ── Produit blanc ── */
.produit-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:stretch;
}
.produit-grid > div{ display:flex; flex-direction:column; }
@media (max-width:860px){ .produit-grid{ grid-template-columns:1fr; text-align:center; } }
.produit-grid img{ border-radius:var(--rayon); width:100%; aspect-ratio:4/3.4; object-fit:cover; box-shadow:var(--ombre); }

/* ── Avis Google ── */
.avis-note{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.avis-note-hero{ justify-content:flex-start; margin-top:20px; }
@media (max-width:860px){ .avis-note-hero{ justify-content:center; } }
.avis-note-chiffre{ font-size:1.4rem; font-weight:800; color:var(--nuit); }
.avis-note .avis-etoiles{ color:#FFC53D; letter-spacing:2px; }
.avis-note-detail{ font-size:.86rem; color:var(--texte-doux); }
.avis-note-detail a{ color:var(--bleu); font-weight:700; }
.avis-disclaimer{ font-size:.78rem; color:var(--texte-doux); margin-top:4px; }
.avis-slider-wrap{ margin-top:24px; position:relative; }
.avis-arrow{
  position:absolute; top:calc(50% - 12px); transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:var(--bleu); color:#fff; border:none; cursor:pointer; display:flex;
  align-items:center; justify-content:center; box-shadow:0 8px 20px -6px rgba(6,34,78,.5);
  transition:.15s; z-index:2;
}
.avis-arrow:hover{ background:var(--bleu-dark); transform:translateY(-50%) scale(1.06); }
.avis-arrow.next{ right:-14px; }
.avis-arrow.prev{ left:-14px; transform:translateY(-50%) scaleX(-1); }
.avis-arrow.prev:hover{ transform:translateY(-50%) scaleX(-1) scale(1.06); }
@media (max-width:640px){ .avis-arrow{ display:none; } }
.avis-slider{
  display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding-bottom:6px; -ms-overflow-style:none; scrollbar-width:none;
}
.avis-slider::-webkit-scrollbar{ display:none; }
.avis-card{
  scroll-snap-align:start; flex:0 0 auto; width:280px; background:#fff; border-radius:var(--rayon);
  box-shadow:var(--ombre-sm); padding:22px 24px; display:flex; flex-direction:column;
}
.avis-card p{ font-size:.86rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; }
.avis-entete{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.avis-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--bleu); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0;
}
.avis-entete strong{ display:block; font-size:.88rem; }
.avis-entete span{ font-size:.74rem; color:var(--texte-doux); }
.avis-etoiles{ color:#FFC53D; letter-spacing:2px; margin-bottom:8px; }

/* ── Qui est Proxiclic ── */
.qui-grid{
  display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center;
}
@media (max-width:860px){ .qui-grid{ grid-template-columns:1fr; text-align:center; } }
.qui-grid img{ max-width:320px; margin:0 auto; width:100%; }
.qui-grid h2 strong{ display:block; color:var(--nuit); font-weight:700; }

/* ── Méthode ── */
.methode-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:32px; }
@media (max-width:900px){ .methode-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .methode-grid{ grid-template-columns:1fr; } }
.methode-card{ text-align:center; }
.methode-card img{
  width:282px; max-width:100%; aspect-ratio:1/1; border-radius:50%; object-fit:cover; margin:0 auto 16px;
  box-shadow:var(--ombre-sm);
}
.methode-card h3{ font-size:1rem; margin-bottom:8px; }
.methode-card p{ font-size:.84rem; color:var(--texte-doux); }

/* ── Formulaire de contact (accueil) ── */
.contact-form{ max-width:640px; margin:32px auto 0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }
.form-field{ margin-bottom:16px; display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.82rem; font-weight:700; color:var(--nuit); }
.form-field input, .form-field textarea{
  border:1px solid rgba(6,34,78,.16); border-radius:10px; padding:11px 14px;
  font:inherit; color:var(--texte); background:#fff; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{ outline:2px solid var(--orange); outline-offset:1px; }
.hp-champ{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.contact-form .btn-orange{ border:none; cursor:pointer; font:inherit; }
.form-retour{ margin-top:14px; font-size:.86rem; font-weight:700; }

/* ── FAQ placeholder ── */
.section-faq{ background:var(--nuit); padding:60px 0; text-align:center; }
.eyebrow-faq{ color:var(--orange); font-weight:800; letter-spacing:.1em; font-size:1.6rem; }
.faq-placeholder{ color:rgba(255,255,255,.7); margin-top:14px; }

/* ── Zones d'intervention ── */
.zones-band{
  background:var(--nuit); color:#fff; border-radius:var(--rayon); padding:44px;
  display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center;
}
@media (max-width:860px){ .zones-band{ grid-template-columns:1fr; text-align:center; padding:32px 26px; } }
.zones-band p{ color:rgba(255,255,255,.85); }
.zones-band a:not(.btn-orange){ color:#fff; font-weight:700; }
.zones-band h3{ color:var(--orange); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin:20px 0 10px; }
.zones-liste{ list-style:none; padding:0; margin:0 0 24px; columns:2; gap:8px; }
.zones-liste li{ padding:3px 0; }
.zones-band img{ width:100%; border-radius:var(--rayon-sm); }

/* ── Page pro ── */
.pro-hero{ padding:50px 0; }
.secteurs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:760px){ .secteurs-grid{ grid-template-columns:1fr; } }
.secteur-card{ background:var(--nuit); border-radius:var(--rayon); overflow:hidden; color:#fff; }
.secteur-card img{ width:100%; height:150px; object-fit:cover; }
.secteur-card ul{ list-style:none; margin:0; padding:20px 22px 26px; text-align:center; font-weight:700; }
.secteur-card li{ padding:3px 0; }

/* ── Mascotte contenue (évite qu'une illustration ne déborde de sa colonne) ── */
.mascotte-contenue{ max-width:320px; width:100%; margin:0 auto; display:block; box-shadow:none; }

/* ── FAQ (accordéon) ── */
.faq-liste{ max-width:760px; margin:32px auto 0; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff; border-radius:var(--rayon-sm); padding:18px 22px; box-shadow:var(--ombre-sm);
}
.faq-item summary{
  font-weight:700; color:var(--nuit); cursor:pointer; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.3rem; color:var(--orange); flex-shrink:0; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:14px 0 0; }

/* ── Zone blanche "bornes wifi" juste avant le footer ── */
.wifi-footer-zone{ padding-bottom:60px; }