:root{
  --bg:#fffaf5;
  --ink:#2b2b2b;
  --muted:#8a817c;
  --accent:#d47870 ; 
  --accent2:#803535 ; 
  --card:#ffffff;
  --border:#e9e9e9;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color:var(--ink);
  background: var(--bg);
  line-height:1.6;
  overflow-x:hidden;
}

/* Watermark logo in background */
body::before{
  content:"";
  position:fixed;
  inset:auto -10vw 5vh -10vw;
  top:20vh;
  height:70vh;
  background:url('logo.png') center/contain no-repeat;
  opacity: 0.10;
  pointer-events:none;
  z-index:0;
  filter:grayscale(100%);
}

/* Hero banner */
.hero{
  position:relative;
  min-height:60vh;
  display:flex;align-items:center;
  background:url('hero.jpg') center/cover no-repeat;
  color:white;
}
.hero::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.15));
}
.hero .inner{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;padding:64px 20px;
}
.badge{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);
  padding:6px 10px;border-radius:999px;font-weight:700;letter-spacing:.3px}
.hero h1{font-size:42px;line-height:1.05;margin:.4rem 0}
.hero p{max-width:720px;margin:0 0 12px;font-size:18px}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:36px 20px;position:relative;z-index:1}
.section{padding:34px 0}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .hero{min-height:40vh}
  .hero h1{font-size:34px}
}

/* Cards & buttons */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 10px 24px rgba(0,0,0,.05)}
.button{display:inline-block;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.primary{background:var(--accent);color:white;border:1px solid var(--accent)}
.secondary{border:2px solid var(--accent);color:var(--accent);background:transparent}

/* Headings */
h2{font-size:28px;margin:0 0 10px;color:var(--accent)}
h3{margin:8px 0 6px}

/* Table-like pricing columns */
.pricing{display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.pricing .col{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.pricing .col h3{font-size:22px;color:var(--accent2)}
.pricing table{width:100%;border-collapse:collapse;margin-top:10px}
.pricing th,.pricing td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:left}
.pricing small{color:var(--muted)}

/* How it works list */
.steps li{margin:6px 0}

/* Header bar */
.topbar {
  background: var(--accent);
  color: #fff;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between; /* gauche/droite */
  align-items: center;            /* centrage vertical */
  height: 100px;                   /* ajuste la hauteur */
  padding: 0 20px;                /* espace à gauche/droite */
  box-sizing: border-box;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800}

/* Carré rouge uni */
.brand .dot{
  display:inline-block;
  width:26px;
  height:26px;
  border-radius:8px;
  flex:0 0 26px;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  margin-right:10px;
}

/* Liens topbar en blanc */
.topbar a,
.topbar a:visited,
.topbar .brand,
.topbar .brand *{
  color:#fff !important;
  text-decoration:none;
}
.topbar a:hover{opacity:.85}

/* Footer */
footer{border-top:1px solid var(--border);color:var(--muted)}
footer .container{padding:24px 20px}
footer a{color:var(--accent);text-decoration:none}

.note{color:var(--muted);font-size:14px}

/* --- Booking buttons --- */
.book-list { display: flex; flex-direction: column; gap: 6px; }
.button.block { display: block; width: 100%; text-align: center; }
.button.outline { background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.button.outline:hover { background: var(--accent); color: #fff; }

.grid.cols-2 { gap: 20px; }
.card { padding: 15px; }

.book-list a.button {
  display: inline-block;
  width: auto;
  min-width: 160px;
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
}
.choisir-recettes { display: inline-block; margin-top: 15px; }
.note { font-size: 0.9em; color: #666; display: block; margin-top: 3px; }

.recettes-list { margin: 12px 0 6px 18px; }
.recettes-list li { margin: 12px 0; line-height: 1.45; }
.recettes-list .muted { color: #666; font-size: .95rem; }

.btn-recettes { margin-top: 14px; }
.recettes-note { margin-top: 12px; color:#666; }
.choix-recettes { margin-top: 1.5rem; }

.note-cgv {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
}

/* ========= MOBILE / RESPONSIVE ========= */
*,
*::before,
*::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; display: block; }
html, body { overflow-x: hidden; }
:root { --touch-target: 44px; }
a, button, .button { min-height: var(--touch-target); }

h1 { font-size: clamp(24px, 4.6vw, 42px); }
h2 { font-size: clamp(20px, 3.6vw, 30px); }
h3 { font-size: clamp(18px, 3.1vw, 24px); }

.container { padding-left: 16px; padding-right: 16px; }

@media (max-width: 900px){
  .grid.cols-2,
  .cgv-grid { 
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }
  .card { padding: 16px; }
}

@media (max-width: 600px){
  body { font-size: 16px; line-height: 1.5; }
  .section { padding-top: 24px; padding-bottom: 24px; }
  .button { padding: 12px 16px; font-weight: 700; width: auto; text-align: left; margin: 0; }
  #reserver .btn-stack { gap: 10px; align-items: flex-start; }
  #reserver a.button { max-width: 260px; }
  #recettes .recettes-list li { margin: 10px 0; }
  #recettes .btn-recettes,
  #recettes .choix-recettes { margin-top: 16px !important; }
  .topbar .container { display: flex; flex-wrap: wrap; gap: 8px; }
  .topbar .brand { flex: 1 1 100%; }
}

@media (max-width: 700px){
  #map { height: 340px !important; }
  .map-card { max-width: 100% !important; margin: 16px auto; }
  .panel { width: min(640px, 94vw); padding: 22px 18px; }
  .panel p { margin: 8px 0; }
}

.card, p, li, a { overflow-wrap: anywhere; }

/* === Formules & Tarifs === */
.pricing{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:20px;
  align-items:stretch;
}
.pricing .col{
  display:flex;
  flex-direction:column;
}
.pricing .col > *:last-child{
  margin-top:auto;
}
@media (max-width: 900px){
  .pricing{ grid-template-columns: 1fr; }
}

.zone-buttons {
  display: flex;
  flex-direction: column; /* l'un sous l'autre */
  gap: 12px;              /* espace vertical entre eux */
  margin-top: 20px;       /* espace au-dessus du bloc */
}

/* Boutons spéciaux dans la zone */
.zone-buttons .button {
  display: inline-block;
  width: auto;
  min-width: 180px;
  text-align: center;
  margin: 0;   /* plus de centrage automatique */
}
.zone-buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* aligne à gauche */
  gap: 14px;                 /* espace entre les boutons */
}

/* ===== Bannière opaque pour la page Zone d’intervention ===== */
.hero.zone-hero{
  /* remplace l’image de fond par un aplat (ou un dégradé si tu veux) */
  background: var(--accent); /* aplat rouge */
  /* ou : background: linear-gradient(135deg, var(--accent), var(--accent2)); */
  color:#fff;
}

/* on supprime le voile semi-transparent de .hero */
.hero.zone-hero::after{
  content:none !important;
}

/* (optionnel) un peu de padding si la zone te paraît tassée */
.hero.zone-hero .inner{
  padding-top: 36px;
  padding-bottom: 36px;
}
/* Réduit la hauteur de la bannière Zone d’intervention */
.hero.zone-hero{
  min-height:auto;     /* enlève la hauteur forcée */
  padding:30px 20px;   /* espace intérieur (au lieu d’un gros bloc vide) */
}
.hero.zone-hero .inner{
  padding:0;           /* on enlève les gros padding du .hero classique */
}

.hero p {
  text-align: right;     /* aligne le texte à droite */
  max-width: 720px;      /* tu peux garder ta largeur */
  margin-left: auto;     /* pousse vers la droite */
  margin-right: 0;       /* colle bien au bord droit */
}

.hero .inner {
  text-align: right;   /* tout le contenu passe à droite */
}

.hero .inner p,
.hero .inner h1,
.hero .inner .badge {
  margin-left: auto;   /* pousse chaque élément vers la droite */
  margin-right: 0;
}

/* --- Contact (tél + insta) --- */
.contact{
  display:flex;
  align-items:center;
  gap:18px;
}

.contact a{
  color:#fff;
  font-weight:700;
  text-decoration:none;           /* on annule sur le lien... */
}

.contact a:hover{ opacity:.85; }

.tel{
  text-decoration:underline;       /* ...et on souligne le texte du téléphone */
}

/* Lien Instagram : icône + texte */
.insta-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* on ne souligne que le mot "Instagram" */
.insta-link span{
  text-decoration:underline;
}

/* force l’icône en blanc, même si le PNG est coloré */
.insta-link img{
  width:16px;
  height:16px;
  display:block;
  filter: brightness(0) invert(1); /* rend l’icône blanche */
}

/* --- Contact (tél + insta) --- */
.topbar .contact{
  display:flex;
  align-items:center;
  gap:18px;
}

.topbar .contact a{
  color:#fff;
  font-weight:700;
  text-decoration:none; /* on part sans souligné */
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.topbar .contact a:hover{ opacity:.85; }

/* Forcer le souligné (Safari + règle globale qui enlève le souligné) */
.topbar .contact .tel{
  text-decoration:underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

.topbar .contact .insta-link span{
  text-decoration:underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* Icône Instagram : taille + blanc via currentColor */
.topbar .contact .insta-ico{
  width:16px;
  height:16px;
  color:#fff;       /* blanc */
  flex:0 0 16px;
}
/* --- Contact (tél + insta) --- */
.topbar .contact{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap:0px;   /* réduit l’espacement entre tél et Instagram */
}

.topbar .contact a{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 6px;
}

.topbar .contact a:hover{ opacity:.85; }

.topbar .contact .tel{
  text-decoration:underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

.topbar .contact .insta-link span{
  text-decoration:underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}

.topbar .contact .insta-ico{
  width:16px;
  height:16px;
  color:#fff;
  flex:0 0 16px;
}

.topbar .contact {
  display: flex;
  flex-direction: column; /* l'un en dessous de l'autre */
  align-items: flex-end;  /* aligné à droite */
  gap: 2px;               /* réduit au max l’espace */
}

.topbar .contact a {
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  text-decoration: none; /* enlève le soulignement global */
}

.topbar .contact a span {
  text-decoration: underline; /* ne souligne que le texte */
}

.topbar .contact svg {
  width: 16px;
  height: 16px;
}
.topbar .contact a span {
  text-decoration: underline;
  text-decoration-thickness: 1px; /* épaisseur fixe */
  text-underline-offset: 2px;     /* espace entre le texte et le trait */
}
.topbar .contact a.insta-link span {
  text-decoration: underline;
  text-decoration-thickness: 1px;   /* trait fin */
  text-underline-offset: 2px;       /* petit écart sous les lettres */
}
.topbar .contact {
  display: flex;
  flex-direction: column;  /* un au-dessus de l’autre */
  gap: 2px;                /* espace réduit (tu peux tester 0px aussi) */
}
.topbar .contact a.insta-link {
  margin-top: -9px; /* colle l’Insta au tel */
}
.topbar .contact a {
  line-height: 1.2; /* réduit l’espace entre les lignes */
}

.topbar .container {
  display: flex;
  justify-content: space-between; /* gauche à gauche / droite à droite */
  align-items: center;             /* centré verticalement */
}

/* --- FIX alignement topbar --- */
.topbar { 
  display: block;              /* ne pas centrer la barre elle-même */
}

.topbar .container{
  display: flex !important;    /* aligne le contenu sur une ligne */
  justify-content: space-between !important; /* gauche / droite */
  align-items: center !important;
  text-align: initial;         /* au cas où un centrer trainerait */
}

/* bloc de droite empilé (tél au-dessus d’Insta) */
.topbar .contact{
  display: flex;
  flex-direction: column;      /* l'un sous l'autre */
  align-items: flex-end;       /* bord droit */
  gap: 2px;                    /* petit écart */
}

.topbar {
  display: flex;
  align-items: center;     /* centre verticalement */
  height: 100px;           /* garde ta hauteur */
  padding: 0 20px;         /* petit espace gauche/droite */
  box-sizing: border-box;  /* évite que le padding ajoute de la hauteur */
}

/* ===== TOPBAR : brand à gauche / contact à droite (force) ===== */
.topbar .container{
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* gauche / droite */
  align-items: center !important;
  gap: 14px;
  height: 100%;
  padding: 0 20px;
  text-align: initial !important;             /* stop le centrage global */
}
.topbar .brand{
  justify-self: start !important;
  text-align: left !important;
}
.topbar .contact{
  justify-self: end !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

/* === TOPBAR : gauche/droite (override fort) === */
.topbar,
.topbar .container{
  text-align: initial !important;        /* annule tout centrage hérité */
}

.topbar .container{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 20px !important;            /* bordures internes */
  gap: 12px !important;
}

.topbar .brand{
  margin-right: auto !important;         /* pousse à gauche */
}

.topbar .contact{
  margin-left: auto !important;          /* pousse à droite */
  display: flex !important;
  flex-direction: column;                /* tel au-dessus, insta dessous */
  align-items: flex-end !important;
  gap: 4px;                              /* espace vertical */
}

/* --- Sous-bandeau rouge uni pour les pages internes --- */
.subhero{
  background: var(--accent);   /* rouge plein, pas de transparence */
  color:#fff;
  padding: 22px 0;             /* hauteur plus compacte que .hero */
}
.subhero h1{ margin:0; color:#fff; }
.subhero .sub{ margin:6px 0 0; opacity:.9 }

/* --- Grille de la page À propos --- */
.about-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:24px;
  align-items:start;
}
.about-figure{ margin:0 }
.about-avatar{
  width:100%;
  max-width:420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 50% / 38%;    /* ovale style “pancake” */
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.about-text h2{ margin-top:0; color:var(--accent) }
.about-actions{ display:flex; gap:10px; margin-top:14px }

/* Responsive */
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-avatar{ max-width: 320px; margin: 0 auto 10px; }
}

/* Bannière spécifique à la page "Qui suis-je ?" */
.hero.hero-about {
  height: 300px; /* moins haute que l'accueil */
  display: flex;
  align-items: center;  /* centré verticalement */
  justify-content: flex-end; /* pousse le contenu à droite */
  text-align: right;
}

.hero.hero-about .hero-content {
  max-width: 600px; /* limite la largeur du texte */
  margin-right: 40px; /* espace avec le bord droit */
  color: white; /* texte en blanc */
}

.hero.hero-about h1,
.hero.hero-about p {
  color: white;
}
/* Spécifique à la page Qui suis-je */
.hero.hero-about {
  min-height: 300px !important;  /* réduit la hauteur */
  justify-content: flex-end !important; /* aligne à droite */
  text-align: right !important;
}

.hero.hero-about .hero-content {
  max-width: 600px;
  margin-right: 40px;
}

.hero.hero-about h1,
.hero.hero-about p {
  color: white !important; /* texte blanc forcé */
}

/* === Hero de la page "Qui suis-je ?" === */
.hero.about{
  position: relative;
  min-height: 38vh;          /* plus bas que l’accueil */
  color:#fff;                /* texte blanc */
}
.hero.about::after{
  content:"";
  position:absolute;
  inset:0;
  /* même overlay que l'accueil, un poil plus marqué pour lire le texte */
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.18));
}
.hero.about .inner{
  position: relative;
  z-index: 1;
  min-height: 38vh;          /* aligne le bloc au bas de l’image */
  display: flex;
  align-items: flex-end;     /* colle le texte en bas */
  justify-content: flex-end; /* texte à droite */
  padding: 40px 24px;        /* moins de padding = moins haut */
  text-align: right;         /* titres + sous-titre à droite */
}
.hero.about h1,
.hero.about p{
  color:#fff !important;     /* force le blanc */
  text-shadow: 0 2px 8px rgba(0,0,0,.35); /* meilleure lisibilité */
  margin: 0.25rem 0;
}

.topbar_inner {
  display: flex;
  justify-content: space-between; /* ← ça force gauche/droite */
  align-items: center;
}
.contact {
  display: flex;
  gap: 15px;
}

/* ===== Hero de la page À propos ===== */
.hero.about{
  min-height: 280px;              /* bannière moins haute */
}

.hero.about .inner{
  display: flex;
  flex-direction: column;
  justify-content: center;        /* centre verticalement le bloc texte */
  align-items: flex-end;          /* pousse le bloc à droite */
  text-align: right;              /* aligne le texte à droite */
  padding: 36px 24px;             /* un peu d'air autour du texte */
}

.hero.about h1{
  color: #fff;                    /* texte blanc */
  margin: 0;
}

.hero.about p{
  color: #fff;                    /* texte blanc */
  opacity: 1;                     /* pas de gris/transparence */
  margin: .4rem 0 0;
}
/* ===== Page ABOUT : texte du hero collé à droite ===== */
.hero.about { 
  min-height: 44vh;                  /* hauteur un peu plus basse (ajuste si besoin) */
}

.hero.about .inner{
  max-width: 640px;                  /* largeur de la colonne de texte (réduite) */
  margin: 0 0 0 auto !important;     /* pousse le bloc complètement à droite */
  padding: 32px 38px 32px 16px;      /* espace au bord droit */
  text-align: right;                 /* texte aligné à droite */
}

.hero.about h1,
.hero.about p{
  color: #fff !important;            /* texte bien blanc */
  opacity: 1 !important;             /* enlève tout effet “grisé” */
  filter: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* un léger contraste, optionnel */
}

.contact-links {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* les aligner à gauche */
  gap: 10px; /* espace entre téléphone et insta */
}

/* Optionnel : ajuster sur desktop si besoin */
@media (min-width: 768px) {
  .contact-links {
    justify-content: center; /* centrer sur grand écran */
  }
}

h1 {
  font-size: 1.5rem;
  line-height: 1.3;
}
.subtitle {
  font-size: 1.2rem;
  font-weight: 400;
  color: #fff; /* ou ta couleur secondaire */
}

/* Lien "en savoir plus" dans la bannière */
.about-link{
  margin-top: 10px;
  font-size: 0.95rem;
  color: #fff;
}
.about-link a{
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}
.about-link a:hover{ opacity:.85; }

/* Encart milieu/bas de page : "Lisez mon histoire" */
.about-preview{
  text-align: center;
  margin: 40px auto;
  padding: 18px 20px;
  background: #fff5f5;              /* léger rappel rouge */
  border: 1px solid var(--border);
  border-radius: 10px;
  max-width: 680px;
  font-size: 1rem;
}
.about-preview a{
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}
.about-preview a:hover{ opacity:.9; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #d64b3c; /* couleur rouge */
  border-radius: 8px;
  background: white;
  color: #d64b3c;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn:hover {
  background: #d64b3c;
  color: white;
}

.btn-transparent {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #d64b3c; /* rouge comme tes autres boutons */
  border-radius: 8px;
  background: transparent; /* <-- fond transparent */
  color: #fff; /* texte blanc pour bien ressortir sur ta photo */
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-transparent:hover {
  background: #d64b3c; /* fond rouge au survol */
  color: #fff; /* texte reste blanc */
}

/* Bouton "Qui suis-je ?" dans la bannière — même style que "Choisir mes recettes" */
.hero .btn-about {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;    /* pas de soulignement */
}

/* Survol identique aux autres boutons outline */
.hero .btn-about:hover {
  background: var(--accent);
  color: #fff;
}

/* Décale le bouton "Qui suis-je ?" vers la gauche dans le hero */
.hero .btn-about{
  display: inline-block;
  transform: translateX(-260px); /* ajuste la valeur (-40, -80, …) */
}

/* Sur mobile on remet normal */
@media (max-width: 700px){
  .hero .btn-about{
    transform: none;
  }
}

.about-cta--btn{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 16px; border:1px solid var(--border);
  border-radius:12px; background:#fff; margin-top:18px;
}
.about-cta--btn .button{min-width:auto}
@media (max-width:700px){
  .about-cta--btn{flex-direction:column; align-items:flex-start}
}

/* ===== CTA Histoire (bandeau punchy) ===== */
.about-cta--band2{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:#fff; border-radius:14px;
  padding:14px 16px; margin-top:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.about-cta__text{display:flex; flex-direction:column; gap:2px}
.about-cta__text strong{font-weight:800}
.about-cta__text span{opacity:.95}

.button.small{padding:10px 14px; border-radius:10px}

/* Mobile : on empile et on garde le bouton proche du texte */
@media (max-width:700px){
  .about-cta--band2{flex-direction:column; align-items:flex-start; gap:10px}
  .about-cta--band2 .button.small{width:auto}
}

/* === Hero de la page "Ateliers Visio" === */
.hero.hero-visio {
  position: relative;
  min-height: 44vh;
  color: #fff;
  background-image: url('./hero-visio.png') !important;
  background-size: cover !important;
  background-position: center 73% !important;
  background-repeat: no-repeat !important;
  filter: brightness(1.15);
}

.hero.hero-visio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
  pointer-events: none;
}

.hero.hero-visio .inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 36px 24px;
}

.hero.hero-visio h1,
.hero.hero-visio p {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* --- Cadre blanc "offrir un atelier" --- */
.offer-box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 24px;
  text-align: center;
  max-width: 720px;
  margin: 40px auto;
}
.offer-box h2 {
  color: var(--accent2);
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.offer-box p {
  color: var(--ink);
  margin-bottom: 16px;
  font-size: 1.05rem;
}
.offer-box .button {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}
.offer-box .button:hover {
  background: var(--accent2);
}

/* === Boutons CTA === */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #d64b3c;
  border-radius: 8px;
  background: white;
  color: #d64b3c;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn:hover {
  background: #d64b3c;
  color: white;
}

.btn-transparent {
  display: inline-block;
  padding: 12px 24px;
  border: 2px solid #d64b3c;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-transparent:hover {
  background: #d64b3c;
  color: #fff;
}

/* === Bouton "Qui suis-je ?" dans la bannière === */
.hero .btn-about {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
}
.hero .btn-about:hover {
  background: var(--accent);
  color: #fff;
}
.hero .btn-about {
  display: inline-block;
  transform: translateX(-260px);
}
@media (max-width: 700px){
  .hero .btn-about { transform: none; }
}

/* === Ajustement tableau formules === */
.pricing table {
  width: 100%;
  border-collapse: collapse;
}
.pricing th,
.pricing td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}
.pricing th {
  width: 40%;
  white-space: nowrap;
}

.button.small {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 16px;
  border: 2px solid #fff;
  transition: all 0.3s ease;
}

.button.small:hover {
  background: var(--accent2);
  color: #fff;
  border-color: var(--accent2);
}

/* === Bouton retour à l'accueil (aligné à gauche) === */
.back-home {
  text-align: left; /* ⬅️ aligne le bouton à gauche */
  margin-top: 40px;
  margin-bottom: 60px;
}

.back-home .button.outline {
  display: inline-block;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-home .button.outline:hover {
  background: var(--accent);
  color: #fff;
}

/* --- Bloc clair "Ateliers visio" aligné à gauche --- */
.visio-box {
  background: #fff; /* fond blanc comme "offrir un atelier" */
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 28px;
  text-align: left; /* ← texte aligné à gauche */
  margin: 70px 0;
}

.visio-box h2 {
  color: var(--accent2);
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.visio-box p {
  color: var(--ink);
  margin-bottom: 18px;
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 760px;
}

.visio-box .button {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}

.visio-box .button:hover {
  background: var(--accent2);
}

.visio-box .button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--accent);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.visio-box .button:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}

/* --- PAGE OFFRIR UN ATELIER --- */

.formules {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

.formules > div {
  flex: 1;
  min-width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 28px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.formules > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.formules h3 {
  color: var(--accent2);
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.formules p {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 15px;
}

.formules ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.formules li {
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Formulaire cadeau */
.formulaire h3 {
  color: var(--accent2);
  margin-bottom: 20px;
  font-size: 1.6rem;
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 1rem;
  margin-bottom: 18px;
  font-family: "Montserrat", sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus,
form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(241, 113, 92, 0.2); /* effet rose doux au focus */
  outline: none;
}

form .button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--accent);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

form .button:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}

/* --- Bannière rouge pour la page Offrir un atelier --- */
.banner-top {
  background: var(--accent); /* même teinte que le bouton rose principal */
  color: #fff;
  padding: 80px 20px;
  text-align: center;
  border-radius: 0 0 40px 40px; /* arrondi doux en bas */
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}

.banner-content {
  max-width: 900px;
  margin: 0 auto;
}

.banner-top h1 {
  font-size: 2.2rem;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.banner-top p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #fff9f7;
  max-width: 700px;
  margin: 0 auto;
}

/* --- PAGE OFFRIR UN ATELIER --- */
.banner-top {
  background: var(--accent); /* rouge opaque, plus de transparence */
  color: #fff;
  padding: 40px 20px;
  text-align: center;
  border-radius: 0 0 40px 40px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  position: relative;
  z-index: 2;
}

.banner-top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent); /* même couleur rouge */
  z-index: -1;
  opacity: 1; /* plein, pas de transparence */
}


.banner-content {
  max-width: 900px;
  margin: 0 auto;
}

.banner-top h1 {
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.banner-top p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: #fff9f7;
  max-width: 700px;
  margin: 0 auto;
}

/* Formules bloc */
.formules {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 40px;
}

.formules > div {
  flex: 1;
  min-width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  padding: 28px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.formules > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.formules h3 {
  color: var(--accent2);
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.formules p {
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 15px;
}

.formules ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.formules li {
  color: var(--ink);
  font-size: 1rem;
  margin-bottom: 6px;
}

/* Formulaire cadeau */
.formulaire h3 {
  color: var(--accent2);
  margin-bottom: 20px;
  font-size: 1.6rem;
}

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}

form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1.5px solid #ddd;
  font-size: 1rem;
  margin-bottom: 18px;
  font-family: "Montserrat", sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

form input:focus,
form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(241, 113, 92, 0.2);
  outline: none;
}

form .button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 14px 28px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid var(--accent);
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

form .button:hover {
  background: var(--accent2);
  border-color: var(--accent2);
  color: #fff;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .banner-top {
    padding: 60px 15px;
  }
  .banner-top h1 {
    font-size: 1.8rem;
  }
  .formules {
    flex-direction: column;
  }
}

/* --- Bouton avec note interne --- */
.button.btn-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  text-align: center;
  gap: 2px;
}

.button.btn-note small {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: 400;
}

/* --- Enlever le grand fond blanc derrière les cartes (mais PAS la bannière d’accueil) --- */
.visio-box,
.panel,
.offrir-section {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}


/* --- Réduire l’espace entre la bannière rouge et le texte de l’intro sur la page Offrir --- */
.offrir-section,
#offrir main,
#offrir section {
  margin-top: 0 !important;
  padding-top: 20px !important; /* tu peux descendre à 10px ou 0px selon ton goût */
}

main {
  margin-top: 0 !important;
  padding-top: 5px !important;
}

/* --- Rétablir le fond blanc pour le cadre de la page Ateliers Visio --- */
.visio-box {
  background: #ffffff !important;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding: 24px;
}

/* --- Forcer le style de l'encadré blanc "Ateliers de batchcooking en visio" --- */
.visio-box {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  padding: 40px 28px !important;
  margin-top: 40px !important;
  text-align: left !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.visio-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Page Ateliers visio uniquement */
body.ateliers-visio .visio-box,
.ateliers-visio .visio-box {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.1) !important;
  padding: 40px 28px;
}

/* Et on s'assure que la page Offrir n'hérite de rien */
body.offrir .visio-box {
  background: transparent !important;
  box-shadow: none !important;
}

/* S'assure que la page Offrir reste bien transparente */
body.offrir .visio-box {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.offrir-titre{
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  color: #d49a8b !important;   /* rosé doux comme l’autre titre */
  margin: 0 0 10px;
}

.offrir-sous{
  font-size: clamp(18px, 2.1vw, 22px);
  color: var(--ink);
  margin: 0 0 14px;
}

/* Offrir : titre lead = même style/teinte que les autres gros titres */
.offrir-page .lead h1,
.offrir .lead h1,
.offrir-intro h1 {
  color: #d49a8b !important;  
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  filter: none !important;
  opacity: 1;
}

/* ---- Ligne de séparation douce entre les sections ---- */
.separator {
  width: 90%;
  max-width: 1200px;
  height: 2px;
  margin: 60px auto;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 2px;
}

/* ---- Animation au survol pour le bloc "Envie de savoir qui je suis ?" ---- */
.about-cta--band2 {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-cta--band2:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  color: #fff; /* texte blanc */
  font-family: 'Montserrat', sans-serif; /* remet ta police principale */
  font-weight: 700; /* même graisse que le texte original */
  font-size: 1rem; /* ajuste si besoin pour coller exactement à ton topbar */
  text-decoration: none;
  line-height: 1;
  transition: opacity 0.3s ease;
}

.brand-link:hover {
  opacity: 0.85;
}

.offrir-title {
  color: #d47870 !important;
  font-weight: 800;
}

.separator-light {
  width: 0; /* démarre invisible */
  height: 2px;
  margin: 0px auto 40px auto;
  background-color: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 2px;
  opacity: 0;
  animation: drawLine 1.5s ease-out 0.3s forwards;
}

/* Animation fluide du trait */
@keyframes drawLine {
  0% {
    width: 0;
    opacity: 0;
  }
  60% {
    width: 750px; /* quasi toute la longueur */
    opacity: 1;
  }
  100% {
    width: 800px; /* largeur finale */
    opacity: 1;
  }
}

/* --- Bannière CGV pleine et sans filigrane --- */
.hero-cgv {
  background-color: #d47870 !important; /* même ton que le reste du site */
  background-image: none !important; /* enlève complètement le filigrane */
  color: white;
  text-align: center;
  padding: 80px 20px 120px 20px; /* plus d’air autour du contenu */
  border: none;
  position: relative;
  z-index: 2;
}

/* Efface toute trace d'image héritée */
.hero-cgv::before {
  content: none !important;
}

/* Titre principal */
.hero-cgv h1 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 2.3rem;
  margin-top: 45px; /* espace plus grand sous le trait */
  margin-bottom: 10px;
}

/* Sous-titre */
.hero-cgv p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Séparateur ajusté */
.hero-cgv .separator-light {
  width: 800px;
  margin: 0 auto 30px auto; /* espace en dessous augmenté */
  background-color: rgba(255, 255, 255, 0.9);
  height: 2px;
  border-radius: 2px;
}

/* Les liens du sommaire (Objet, Prestations, etc.) */
.hero-cgv .toc {
  margin-top: 35px;
}

.hero-cgv .toc a {
  color: white;
  font-weight: 600;
  text-decoration: none;
  margin: 0 12px;
  transition: opacity 0.3s ease;
}

.hero-cgv .toc a:hover {
  opacity: 0.75;
}

/* === Corrige l'espacement sous la bannière CGV === */
.hero-cgv {
  background-color: #d47870 !important;
  background-image: none !important;
  color: white;
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
  border: none;
  position: relative;
  z-index: 2;
}

/* Force un espace entre la bannière et le bloc suivant */
.hero-cgv {
  margin-bottom: 80px !important; /* ✅ espace sous la bannière */
}

/* Option : pour tester si tu veux encore plus d’air, monte à 100px */

/* --- Forçage du style Montserrat sur la topbar --- */
.topbar .brand-link,
.brand-link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* ---- Menu burger ---- */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* <-- centre verticalement les barres dans le bouton */
  gap: 3px;
  width: 22px;
  height: 22px; /* un peu plus haut pour bien centrer avec le texte */
  margin-top: 0; /* au cas où tu avais une marge avant */
  margin-right: 8px;
  position: relative;
  z-index: 2000;
}

.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* ---- Position du menu ---- */
.brand {
  display: flex;
  align-items: center; /* <-- aligne verticalement le burger et le texte */
  gap: 10px;
  position: relative;
}

/* ---- Menu déroulant ---- */
.nav-menu {
  display: none;
  position: absolute;
  top: 45px;
  left: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  padding: 8px 20px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
}

.nav-menu a:hover {
  color: var(--accent2);
}

/* ---- Apparition quand actif ---- */
.nav-menu.active {
  display: block;
}

/* ---- Animation burger ---- */
.menu-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav-menu {
  display: none;
  position: absolute;
  top: 60px;
  left: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  width: 180px;
  z-index: 1500;
}

.nav-menu.active {
  display: block;
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  padding: 10px 20px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--accent); /* 🌸 ton rose principal de la bannière */
font-weight: 600;
}

.nav-menu a:hover {
  color: var(--accent);
}

/* === Menu déroulant (bouton burger) === */

.nav-menu {
  display: none; /* caché par défaut */
  position: absolute;
  top: 55px; /* position sous la barre rouge */
  left: 20px;
  background: rgba(255, 255, 255, 0.95); /* blanc légèrement transparent */
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  padding: 10px 0;
  width: 200px;
  z-index: 1500;
  animation: fadeIn 0.2s ease-in-out;
}

.nav-menu.active {
  display: block; /* s'affiche quand on clique */
}

.nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li {
  padding: 4px 20px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--accent2) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  transition: color 0.2s ease;
}

.nav-menu a:hover {
  color: var(--accent); /* rouge clair au survol */
}

/* Petite animation d'apparition */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-menu li a {
  color: var(--accent) !important; /* force la couleur rose */
}

/* ===== Force la couleur des liens du menu burger ===== */
.topbar .nav-menu a,
.topbar .nav-menu a:link,
.topbar .nav-menu a:visited {
  color: #d47870 !important;   /* remplace par ta valeur exacte si besoin */
  text-decoration: none !important;
  font-weight: 600 !important;
  font-family: 'Montserrat', sans-serif !important;
}

.topbar .nav-menu a:hover {
  color: #b96762 !important;   /* option : une nuance au survol */
  opacity: 1 !important;
}

/* Forcer Montserrat sur le libellé du topbar (Zonebis) */
.topbar .hero-name,
.topbar .brand,
.topbar .brand a,
.brand-link {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}
.leaflet-control-geocoder {
  max-width: 90%;
}

.brand-name {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-family: 'Montserrat', sans-serif; /* police actuelle */
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

/* === FORCE LA POLICE DU BRAND, QUOI QU'IL ARRIVE === */
:root {
  /* Mets ici la police que TU veux */
  --brand-font: 'Montserrat', serif;   /* <- change si besoin */
}

/* Le lien entier */
.topbar .brand-link,
.brand-link,
.topbar .brand-link .brand-name,
.brand-link .brand-name {
  font-family: var(--brand-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  color: #fff !important;

  /* on garde ton layout existant */
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: opacity .3s ease !important;
}

/* Harmonisation du style du titre sur toutes les pages */
.topbar .brand-link,
.brand-link {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.3px !important;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* Ajuste la barre du haut pour même hauteur partout */
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px !important;
}

/* Affichage par défaut (ordinateur) */
.desktop {
  display: block;
}
.mobile {
  display: none;
}

/* Affichage sur mobile uniquement */
@media (max-width: 768px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.5;
  }
}