/* ==========================================================================
   ALCOPRODEA — Feuille de style principale
   Design premium, minimaliste et haut de gamme
   HTML5 / CSS3 — Aucune dépendance
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables de design (charte graphique ALCOPRODEA)
   -------------------------------------------------------------------------- */
:root{

--primary-color:#010325;
--secondary-color:#c9a44c;
--background-color:#ffffff;
--text-color:#010325;
--light-color:#ffffff;

--border-radius:16px;
--transition:.3s ease;
--shadow:0 10px 30px rgba(0,0,0,.08);
--max-width:1280px;

/* Variables dérivées (toutes issues de la charte) */
--secondary-soft:rgba(201,164,76,.12);
--secondary-border:rgba(201,164,76,.35);
--primary-soft:rgba(1,3,37,.05);
--primary-mid:rgba(1,3,37,.65);
--shadow-strong:0 20px 50px rgba(1,3,37,.16);
--font-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--text-color);
  background-color:var(--background-color);
  -webkit-font-smoothing:antialiased;
}

img,
svg{
  display:block;
  max-width:100%;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color var(--transition);
}

ul,
ol{
  list-style-position:inside;
}

button{
  font:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit;
}

/* Accessibilité : focus visible clavier (WCAG 2.2) */
:focus-visible{
  outline:3px solid var(--secondary-color);
  outline-offset:3px;
  border-radius:4px;
}

/* Lien d'évitement (skip link) */
.skip-link{
  position:absolute;
  top:-100px;
  left:1rem;
  z-index:2000;
  padding:.75rem 1.25rem;
  background:var(--primary-color);
  color:var(--light-color);
  border-radius:0 0 var(--border-radius) var(--border-radius);
  transition:top var(--transition);
}

.skip-link:focus{
  top:0;
}

/* Respect de la préférence "réduire les animations" */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.2;
  color:var(--primary-color);
}

h1{
  font-size:clamp(2rem,5vw,3.25rem);
  letter-spacing:-.02em;
}

h2{
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  letter-spacing:-.01em;
}

h3{
  font-size:clamp(1.15rem,2.2vw,1.45rem);
}

p{
  margin-bottom:1rem;
}

.section-eyebrow{
  display:inline-block;
  margin-bottom:.75rem;
  font-family:var(--font-display);
  font-size:.85rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--secondary-color);
}

.section-intro{
  max-width:720px;
  margin:0 auto 3rem;
  text-align:center;
  color:var(--primary-mid);
}

/* --------------------------------------------------------------------------
   4. Structure & conteneurs
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 1.25rem;
}

.section{
  padding:4.5rem 0;
}

.section--alt{
  background:linear-gradient(180deg,var(--primary-soft) 0%,var(--background-color) 100%);
}

.section-header{
  text-align:center;
  margin-bottom:2.5rem;
}

/* Respiration entre le titre de section et son chapô */
.section-header h1,
.section-header h2{
  margin-bottom:1.5rem;
}

/* Intitulé introduisant une liste de prestations */
.list-intro{
  margin:1.25rem 0 .75rem;
  font-weight:600;
  color:var(--primary-color);
}

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--background-color);
  border-bottom:1px solid var(--primary-soft);
  transition:box-shadow var(--transition),background var(--transition);
}

.site-header.is-scrolled{
  box-shadow:var(--shadow);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:76px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
}

/* Logo ALCOPRODEA de l'en-tête (lettres bleu nuit + or, fond transparent) */
.brand-logo{
  display:block;
  width:auto;
  height:26px;
  max-width:60vw;
  flex-shrink:0;
}

@media (min-width:640px){
  .brand-logo{
    height:32px;
  }
}

/* Variante texte de la marque (non utilisée : le logo image lui est préféré,
   conservée pour un éventuel repli sans image) */
.brand-name{
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--primary-color);
}

.brand-name span{
  color:var(--secondary-color);
}

/* Navigation desktop */
.nav-list{
  display:flex;
  align-items:center;
  gap:.25rem;
  list-style:none;
}

.nav-link{
  display:inline-block;
  padding:.6rem 1rem;
  font-weight:500;
  border-radius:999px;
  transition:background var(--transition),color var(--transition);
}

.nav-link:hover{
  background:var(--secondary-soft);
  color:var(--primary-color);
}

.nav-link[aria-current="page"]{
  color:var(--secondary-color);
  font-weight:600;
}

.nav-cta{
  margin-left:.5rem;
  background:var(--primary-color);
  color:var(--light-color);
}

.nav-cta:hover{
  background:var(--secondary-color);
  color:var(--primary-color);
}

/* Bouton menu mobile */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  border-radius:10px;
  transition:background var(--transition);
}

.nav-toggle:hover{
  background:var(--secondary-soft);
}

.nav-toggle-bar{
  display:block;
  width:22px;
  height:2px;
  margin:0 auto;
  background:var(--primary-color);
  border-radius:2px;
  transition:transform var(--transition),opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){
  opacity:0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:5rem 0 5.5rem;
  background:
    radial-gradient(60rem 30rem at 85% -10%,var(--secondary-soft),transparent 60%),
    linear-gradient(180deg,var(--primary-soft),var(--background-color) 70%);
}

.hero-inner{
  display:grid;
  gap:3rem;
  align-items:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.25rem;
  padding:.4rem 1rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--primary-color);
  background:var(--secondary-soft);
  border:1px solid var(--secondary-border);
  border-radius:999px;
}

.hero-title{
  margin-bottom:1.25rem;
}

.hero-title em{
  font-style:normal;
  color:var(--secondary-color);
}

.hero-subtitle{
  font-size:1.15rem;
  font-weight:500;
  color:var(--primary-color);
  margin-bottom:1rem;
}

.hero-text{
  max-width:620px;
  color:var(--primary-mid);
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2rem;
}

.hero-visual{
  display:flex;
  justify-content:center;
}

.hero-logo-card{
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(440px,100%);
  background:var(--primary-color);
  border:1px solid var(--secondary-border);
  border-radius:var(--border-radius);
  /* Ombre portée renforcée : la carte étant désormais bleu nuit, l'ombre
     standard ne se détachait plus assez du fond clair de la section. */
  box-shadow:0 24px 60px rgba(1,3,37,.38);
  padding:1.75rem;
  overflow:hidden;
}

.hero-logo-card img{
  width:100%;
  height:auto;
}

/* --------------------------------------------------------------------------
   7. Boutons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.9rem 1.75rem;
  font-family:var(--font-display);
  font-weight:600;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform var(--transition),box-shadow var(--transition),background var(--transition),color var(--transition),border-color var(--transition);
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

.btn--primary{
  background:var(--primary-color);
  color:var(--light-color);
}

.btn--primary:hover{
  background:var(--secondary-color);
  color:var(--primary-color);
}

.btn--secondary{
  background:transparent;
  color:var(--primary-color);
  border-color:var(--primary-color);
}

.btn--secondary:hover{
  border-color:var(--secondary-color);
  color:var(--primary-color);
  background:var(--secondary-soft);
}

.btn--gold{
  background:var(--secondary-color);
  color:var(--primary-color);
}

.btn--gold:hover{
  background:var(--primary-color);
  color:var(--light-color);
}

/* --------------------------------------------------------------------------
   8. Cartes de services
   -------------------------------------------------------------------------- */
.services-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:1fr;
}

.service-card{
  display:flex;
  flex-direction:column;
  padding:2.25rem;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.service-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
  border-color:var(--secondary-border);
}

.service-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  margin-bottom:1.25rem;
  background:var(--secondary-soft);
  border-radius:var(--border-radius);
  color:var(--secondary-color);
}

/* En-tête de carte : icône + public visé */
.service-head{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
}

.service-head .service-icon{
  margin-bottom:0;
  flex-shrink:0;
}

.service-target{
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary-color);
}

.service-card h3{
  margin-bottom:.75rem;
}

.service-card p{
  color:var(--primary-mid);
}

.service-list{
  margin:1rem 0 1.5rem;
  list-style:none;
}

.service-list li{
  position:relative;
  padding:.35rem 0 .35rem 1.75rem;
}

.service-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.85rem;
  width:16px;
  height:16px;
  background:var(--secondary-soft);
  border:2px solid var(--secondary-color);
  border-radius:50%;
}

.service-card .btn{
  margin-top:auto;
  align-self:flex-start;
}

/* Sous-liste de prestations : niveau de détail secondaire, en retrait */
.service-sublist{
  margin:.5rem 0 .25rem;
  list-style:none;
}

.service-sublist li{
  position:relative;
  padding:.2rem 0 .2rem 1.1rem;
  color:var(--primary-mid);
  font-size:.97rem;
}

.service-sublist li::before{
  content:"";
  position:absolute;
  left:0;
  top:1rem;
  width:10px;
  height:2px;
  background:var(--secondary-color);
  border:0;
  border-radius:2px;
}

/* --------------------------------------------------------------------------
   9. Section "Pourquoi choisir ALCOPRODEA"
   -------------------------------------------------------------------------- */
.why-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.why-item{
  padding:1.75rem;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
  transition:transform var(--transition),border-color var(--transition);
}

.why-item:hover{
  transform:translateY(-4px);
  border-color:var(--secondary-border);
}

.why-item .service-icon{
  width:52px;
  height:52px;
  margin-bottom:1rem;
}

.why-item h3{
  font-size:1.1rem;
  margin-bottom:.5rem;
}

.why-item p{
  font-size:.95rem;
  color:var(--primary-mid);
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   10. Bandeau de mention importante (expert-conseil, pas avocat)
   -------------------------------------------------------------------------- */
.notice{
  background:var(--primary-color);
  color:var(--light-color);
  border-radius:var(--border-radius);
  padding:2.25rem;
  box-shadow:var(--shadow-strong);
}

.notice h2,
.notice h3{
  color:var(--light-color);
}

.notice strong{
  color:var(--secondary-color);
}

.notice p:last-child{
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   11. Formules d'accompagnement
   -------------------------------------------------------------------------- */
.plans-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:1fr;
  align-items:stretch;
}

.plan-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:2.5rem;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
  transition:transform var(--transition),box-shadow var(--transition);
}

.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
}

.plan-card--featured{
  background:var(--primary-color);
  color:var(--light-color);
  border:1px solid var(--secondary-color);
}

.plan-card--featured h3,
.plan-card--featured p{
  color:var(--light-color);
}

.plan-badge{
  position:absolute;
  top:-14px;
  right:1.75rem;
  padding:.3rem 1rem;
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--secondary-color);
  color:var(--primary-color);
  border-radius:999px;
  box-shadow:var(--shadow);
}

.plan-card h3{
  margin-bottom:.5rem;
}

.plan-tagline{
  color:var(--primary-mid);
  margin-bottom:1.25rem;
}

.plan-card--featured .plan-tagline{
  color:var(--light-color);
  opacity:.85;
}

.plan-list{
  list-style:none;
  margin-bottom:2rem;
}

.plan-list li{
  position:relative;
  padding:.45rem 0 .45rem 2rem;
}

.plan-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7rem;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--secondary-color);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.plan-card .btn{
  margin-top:auto;
}

/* --------------------------------------------------------------------------
   12. FAQ (accordéon)
   -------------------------------------------------------------------------- */
.faq-list{
  max-width:820px;
  margin:0 auto;
}

.faq-item{
  margin-bottom:1rem;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:border-color var(--transition);
}

.faq-item.is-open{
  border-color:var(--secondary-border);
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:1.25rem 1.5rem;
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:600;
  text-align:left;
  color:var(--primary-color);
  transition:background var(--transition);
}

.faq-question:hover{
  background:var(--secondary-soft);
}

.faq-icon{
  flex-shrink:0;
  width:24px;
  height:24px;
  color:var(--secondary-color);
  transition:transform var(--transition);
}

.faq-item.is-open .faq-icon{
  transform:rotate(45deg);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s ease;
}

.faq-answer-inner{
  padding:0 1.5rem 1.5rem;
  color:var(--primary-mid);
}

.faq-answer-inner p:last-child{
  margin-bottom:0;
}

/* --------------------------------------------------------------------------
   13. Blog
   -------------------------------------------------------------------------- */
.blog-grid{
  display:grid;
  gap:1.75rem;
  grid-template-columns:1fr;
}

.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
  border-color:var(--secondary-border);
}

.blog-card-banner{
  height:8px;
  background:linear-gradient(90deg,var(--secondary-color),var(--primary-color));
}

.blog-card-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.75rem;
}

.blog-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-bottom:.85rem;
  font-size:.85rem;
  color:var(--primary-mid);
}

.blog-card-category{
  padding:.2rem .75rem;
  font-weight:600;
  color:var(--primary-color);
  background:var(--secondary-soft);
  border:1px solid var(--secondary-border);
  border-radius:999px;
}

.blog-card h3{
  margin-bottom:.75rem;
}

.blog-card h3 a:hover{
  color:var(--secondary-color);
}

.blog-card-excerpt{
  color:var(--primary-mid);
  margin-bottom:1.25rem;
}

.blog-card-link{
  margin-top:auto;
  font-family:var(--font-display);
  font-weight:600;
  color:var(--secondary-color);
}

.blog-card-link:hover{
  color:var(--primary-color);
}

/* Page article */
.article-header{
  padding:4rem 0 2.5rem;
  background:linear-gradient(180deg,var(--primary-soft),var(--background-color));
  text-align:center;
}

.article-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1rem;
  color:var(--primary-mid);
  font-size:.9rem;
}

.article-body{
  max-width:780px;
  margin:0 auto;
}

.article-body h2{
  margin:2.5rem 0 1rem;
}

.article-body h3{
  margin:1.75rem 0 .75rem;
}

.article-body ul,
.article-body ol{
  margin:0 0 1rem 1rem;
  list-style-position:outside;
  padding-left:1rem;
}

.article-body li{
  margin-bottom:.4rem;
}

.article-body blockquote{
  margin:1.5rem 0;
  padding:1.25rem 1.5rem;
  background:var(--secondary-soft);
  border-left:4px solid var(--secondary-color);
  border-radius:0 var(--border-radius) var(--border-radius) 0;
}

/* Fil d'Ariane */
.breadcrumb{
  padding:1rem 0 0;
  font-size:.9rem;
  color:var(--primary-mid);
}

.breadcrumb ol{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
}

.breadcrumb li:not(:last-child)::after{
  content:"›";
  margin-left:.5rem;
  color:var(--secondary-color);
}

.breadcrumb a:hover{
  color:var(--secondary-color);
}

/* --------------------------------------------------------------------------
   14. Formulaire de contact
   -------------------------------------------------------------------------- */
.contact-grid{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
  align-items:start;
}

.contact-info-card{
  padding:2.25rem;
  background:var(--primary-color);
  color:var(--light-color);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow-strong);
}

.contact-info-card h2{
  color:var(--light-color);
  margin-bottom:1rem;
}

.contact-info-list{
  list-style:none;
  margin:1.5rem 0;
}

.contact-info-list li{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-bottom:1rem;
}

.contact-info-list a:hover{
  color:var(--secondary-color);
}

.contact-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  background:var(--secondary-soft);
  border:1px solid var(--secondary-border);
  border-radius:12px;
  color:var(--secondary-color);
}

.contact-form{
  padding:2.25rem;
  background:var(--light-color);
  border:1px solid var(--primary-soft);
  border-radius:var(--border-radius);
  box-shadow:var(--shadow);
}

.form-group{
  margin-bottom:1.4rem;
}

.form-label{
  display:block;
  margin-bottom:.4rem;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
}

.form-label .required{
  color:var(--secondary-color);
}

.form-control{
  width:100%;
  padding:.85rem 1.1rem;
  font:inherit;
  color:var(--text-color);
  background:var(--background-color);
  border:2px solid var(--primary-soft);
  border-radius:12px;
  transition:border-color var(--transition),box-shadow var(--transition);
}

.form-control:focus{
  outline:none;
  border-color:var(--secondary-color);
  box-shadow:0 0 0 4px var(--secondary-soft);
}

.form-control[aria-invalid="true"]{
  border-color:var(--secondary-color);
  background:var(--secondary-soft);
}

textarea.form-control{
  min-height:150px;
  resize:vertical;
}

.form-error{
  display:none;
  margin-top:.35rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--primary-color);
}

.form-error.is-visible{
  display:block;
}

.form-consent{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
}

.form-consent input{
  width:20px;
  height:20px;
  margin-top:.25rem;
  accent-color:var(--secondary-color);
  flex-shrink:0;
}

.form-consent label{
  font-size:.9rem;
  color:var(--primary-mid);
}

.form-status{
  display:none;
  margin-top:1.25rem;
  padding:1rem 1.25rem;
  border-radius:12px;
  font-weight:600;
}

.form-status.is-visible{
  display:block;
}

.form-status--success{
  background:var(--secondary-soft);
  border:1px solid var(--secondary-border);
  color:var(--primary-color);
}

.form-status--error{
  background:var(--primary-soft);
  border:1px solid var(--primary-color);
  color:var(--primary-color);
}

/* État transitoire pendant l'envoi */
.form-status--info{
  background:var(--primary-soft);
  border:1px solid var(--secondary-border);
  color:var(--primary-color);
}

/* Champ piège à robots : retiré du flux visuel sans utiliser display:none,
   que certains robots savent détecter. Invisible et non focusable. */
.form-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Bouton pendant l'envoi : action neutralisée, intention lisible */
.contact-form button[type="submit"][disabled]{
  opacity:.65;
  cursor:progress;
  pointer-events:none;
}

/* --------------------------------------------------------------------------
   15. Pages légales
   -------------------------------------------------------------------------- */
.legal-content{
  max-width:820px;
  margin:0 auto;
}

.legal-content h2{
  margin:2.25rem 0 .85rem;
}

.legal-content h3{
  margin:1.5rem 0 .6rem;
}

.legal-content ul{
  margin:0 0 1rem 1rem;
  list-style-position:outside;
  padding-left:1rem;
}

/* --------------------------------------------------------------------------
   16. Bandeau d'appel à l'action (CTA)
   -------------------------------------------------------------------------- */
.cta-band{
  background:
    radial-gradient(40rem 20rem at 90% 120%,rgba(201,164,76,.25),transparent 60%),
    var(--primary-color);
  color:var(--light-color);
  border-radius:var(--border-radius);
  padding:3rem 2.25rem;
  text-align:center;
  box-shadow:var(--shadow-strong);
}

.cta-band h2{
  color:var(--light-color);
  margin-bottom:.75rem;
}

.cta-band p{
  max-width:640px;
  margin:0 auto 1.75rem;
  opacity:.9;
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer{
  margin-top:4rem;
  background:var(--primary-color);
  color:var(--light-color);
}

.footer-main{
  display:grid;
  gap:2.5rem;
  grid-template-columns:1fr;
  padding:3.5rem 0 2.5rem;
}

.footer-brand .brand-name{
  color:var(--light-color);
}

/* Logo ALCOPRODEA du pied de page : version sur fond bleu nuit,
   identique à la couleur du footer pour une intégration invisible */
.footer-logo{
  display:block;
  width:min(280px,100%);
  height:auto;
}

.footer-brand p{
  margin-top:1rem;
  max-width:340px;
  font-size:.95rem;
  opacity:.85;
}

.footer-title{
  margin-bottom:1rem;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--secondary-color);
}

.footer-list{
  list-style:none;
}

.footer-list li{
  margin-bottom:.6rem;
}

.footer-list a{
  opacity:.9;
}

.footer-list a:hover{
  color:var(--secondary-color);
  opacity:1;
}

.footer-socials{
  display:flex;
  gap:.75rem;
  margin-top:1.25rem;
}

.footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  color:var(--light-color);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  transition:background var(--transition),color var(--transition),transform var(--transition);
}

.footer-social:hover{
  background:var(--secondary-color);
  color:var(--primary-color);
  transform:translateY(-2px);
}

.footer-disclaimer{
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.88rem;
  opacity:.8;
}

.footer-bottom{
  padding:1.25rem 0;
  border-top:1px solid rgba(255,255,255,.12);
  font-size:.88rem;
  text-align:center;
  opacity:.75;
}

/* --------------------------------------------------------------------------
   18. Bouton retour en haut
   -------------------------------------------------------------------------- */
.back-to-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  background:var(--primary-color);
  color:var(--light-color);
  border-radius:50%;
  box-shadow:var(--shadow-strong);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition),background var(--transition);
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.back-to-top:hover{
  background:var(--secondary-color);
  color:var(--primary-color);
}

/* --------------------------------------------------------------------------
   19. Animations d'apparition au scroll
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-delay-1{transition-delay:.1s;}
.reveal-delay-2{transition-delay:.2s;}
.reveal-delay-3{transition-delay:.3s;}

/* --------------------------------------------------------------------------
   20. Responsive — Mobile First
   -------------------------------------------------------------------------- */

/* Tablette */
@media (min-width:640px){
  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .blog-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Desktop */
@media (min-width:960px){
  .section{
    padding:6rem 0;
  }
  .hero{
    padding:6.5rem 0 7rem;
  }
  .hero-inner{
    grid-template-columns:1.25fr .75fr;
  }
  .services-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .blog-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .plans-grid{
    grid-template-columns:repeat(2,1fr);
    max-width:960px;
    margin:0 auto;
  }
  .contact-grid{
    grid-template-columns:.8fr 1.2fr;
  }
  .footer-main{
    grid-template-columns:1.4fr 1fr 1fr;
  }
}

/* Navigation mobile */
@media (max-width:959px){
  .nav-toggle{
    display:flex;
  }
  .main-nav{
    position:fixed;
    inset:76px 0 auto 0;
    z-index:990;
    background:var(--background-color);
    border-bottom:1px solid var(--primary-soft);
    box-shadow:var(--shadow-strong);
    transform:translateY(-120%);
    transition:transform var(--transition);
  }
  .main-nav.is-open{
    transform:translateY(0);
  }
  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:1.25rem;
  }
  .nav-link{
    display:block;
    padding:.9rem 1.1rem;
    border-radius:12px;
  }
  .nav-cta{
    margin-left:0;
    text-align:center;
  }
}

/* Grand écran */
@media (min-width:1440px){
  .hero{
    padding:8rem 0;
  }
}