:root{
  --bg:#000; --fg:#fff; --fg-sub:#cbd5e1; --card:#0b0b0b; --border:rgba(255,255,255,.12); --focus:rgba(255,255,255,.7);
  --radius:16px; --h1-size: clamp(32px, 4vw, 48px);
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;line-height:1.45}
*{box-sizing:border-box}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
a{color:var(--fg)} a.under{text-decoration:underline;text-underline-offset:4px}
.section{padding:56px 0}
.grid{display:grid;gap:24px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.h1{font-size:var(--h1-size);font-weight:800;letter-spacing:-.02em;margin:0}
.h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.01em;margin:0}
.h3{font-size:18px;font-weight:700;margin:0}
.muted{color:var(--fg-sub)}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.badges .item{padding:12px;border-radius:var(--radius);background:#0f0f0f;border:1px solid var(--border);text-align:center;font-size:14px}
@media(max-width:860px){.badges{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Figure / Illustrations */
.figure{display:block;margin:0;color:var(--fg);}
.figure .illus{width:100%;aspect-ratio: 20/12;display:block;border-radius:14px;border:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));;object-fit:cover;object-position:center}
.figure figcaption{font-size:12px;color:var(--fg-sub);margin-top:8px}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Header */
.topbar{position:sticky;top:0;z-index:60;background:rgba(0,0,0,.7);backdrop-filter:blur(6px)}
.topbar .container{padding-left:8px}
.topbar-inner{display:grid;align-items:center;grid-template-columns:auto 1fr auto;min-height:88px;gap:12px}
.topbar-inner > *{min-width:0}
.brand{display:flex;align-items:center}
.brand-logo{display:block;height:clamp(72px, 12vw, 140px);width:auto}
.tabs{display:flex;align-items:center;gap:10px;justify-content:center;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;padding:0 8px;-webkit-overflow-scrolling:touch;min-width:0}
.tab{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--fg-sub);white-space:nowrap;line-height:1;text-decoration:none;flex:0 0 auto}
.tab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tab[aria-current="page"]{color:#000;background:#fff;border-color:#fff}
@media(max-width:1200px){ .tab{padding:10px 14px} }
.controls{display:flex;align-items:center;gap:8px;justify-content:end}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--border);background:#111;color:#fff}
.btn.secondary{background:transparent}.btn.ghost{background:transparent;border:none}
#btn-menu{display:none}
@media(max-width:980px){.tabs{display:none}#btn-menu{display:inline-flex}}

/* Mobile drawer */
.mobile-drawer{display:none;position:fixed;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(3px);z-index:50}
.mobile-drawer .panel{background:var(--card);border-top:1px solid var(--border);position:absolute;left:0;right:0;top:88px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mobile-drawer a{display:block;padding:12px 10px;border-radius:12px;color:var(--fg);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.mobile-drawer a:hover{border-color:var(--border)}
.mobile-drawer.open{display:block}

/* Footer */
footer{border-top:1px solid var(--border);padding-top:24px;margin-top:64px;margin-bottom:40px}

/* Thème clair (contraste) */
.light{--bg:#fff;--fg:#0f172a;--fg-sub:#475569;--card:#f8fafc;--border:rgba(15,23,42,.15);--focus:rgba(15,23,42,.4)}

/* Zoom typographique (A− / A+) */
html[data-scale="0.9"]{font-size:14.4px}
html[data-scale="1.0"]{font-size:16px}
html[data-scale="1.1"]{font-size:17.6px}
html[data-scale="1.2"]{font-size:19.2px}
html[data-scale="1.3"]{font-size:20.8px}
html[data-scale="1.4"]{font-size:22.4px}
html[data-scale="1.5"]{font-size:24px}
html[data-scale="1.6"]{font-size:25.6px}

/* Accessibilité - lien skip */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:8px;top:8px;z-index:1000;background:var(--bg);color:var(--fg);padding:8px 12px;border-radius:12px;border:1px solid var(--border)}


/* === AXECIA customization (2025-10-02) =========================
   Objectif : augmenter la taille perçue du logo sans impacter la
   mise en page (aucune reflow). On utilise un transform scale()
   appliqué à l'image .brand-logo, avec un point d'ancrage à gauche.
   Ajustez le facteur ci-dessous si besoin (ex. 1.10 à 1.35).
=================================================================*/
.brand-logo{
  transform: scale(1.18);
  transform-origin: left center;
  will-change: transform;
}
@media (min-resolution: 2dppx){
  .brand-logo{ image-rendering: -webkit-optimize-contrast; }
}


/* === AXECIA (2025-10-02) — Nav spacing fix ====================
   Objectif : éviter la troncature d'« Accueil » en réduisant 
   l'espacement horizontal entre onglets, sans toucher à la typo.
   On resserre le gap inter-onglets et le padding horizontal.
=================================================================*/
.tabs{
  gap: 6px;
  column-gap: 6px;
}
.tab{
  padding-inline: 10px; /* réduit depuis la valeur par défaut */
}


/* === AXECIA (2025-10-02) — Nav spacing responsive =============
   Principe : réduire progressivement l'espacement horizontal des
   onglets pour éviter toute troncature des libellés sur viewport
   plus étroit, sans toucher à la taille de police.
=================================================================*/
.tabs{
  flex-wrap: nowrap;
  overflow-x: auto;       /* sécurité : scroll doux si saturation */
  scrollbar-width: thin;  /* Firefox */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1200px){
  .tabs{ gap: 5px; }
  .tab{ padding-inline: 9px; }
}
@media (max-width: 992px){
  .tabs{ gap: 4px; }
  .tab{ padding-inline: 8px; }
}
@media (max-width: 768px){
  .tabs{ gap: 3px; }
  .tab{ padding-inline: 7px; }
}
@media (max-width: 560px){
  .tabs{ gap: 2px; }
  .tab{ padding-inline: 6px; }
}


/* === AXECIA (2025-10-02) — Contrôles de lecture (TTS) ========= */
.tts-controls{display:inline-flex;align-items:center;gap:8px;margin-left:12px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.tts-controls .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;line-height:1}
.tts-controls .btn[disabled]{opacity:.5;cursor:not-allowed}
@media (max-width: 560px){
  .tts-controls{gap:6px;margin-left:8px;display:inline-flex;align-items:center;gap:8px}
  .tts-controls .btn{padding:6px 8px}
}


/* === AXECIA (2025-10-02) — Placement TTS sous boutons accessibilité */
.topbar .access-tools + .tts-controls{ margin-left: 0; margin-top: 6px; display: inline-flex; ;display:inline-flex;align-items:center;gap:8px}
@media (max-width: 560px){
  .topbar .access-tools + .tts-controls{ margin-top: 4px; ;display:inline-flex;align-items:center;gap:8px}
}


/* === AXECIA (2025-10-02) — TTS Toggle ========================= */
.tts-controls{display:inline-flex;align-items:center;gap:8px;margin-left:0;margin-top:6px;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.tts-controls .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;line-height:1}
.tts-controls .btn[aria-pressed="true"]{border-color:rgba(255,255,255,.35)}
.tts-controls .icon{display:inline-block;min-width:1em;text-align:center}
@media (max-width: 560px){
  .tts-controls{gap:6px;margin-top:4px;display:inline-flex;align-items:center;gap:8px}
  .tts-controls .btn{padding:6px 8px}
}


/* === AXECIA (2025-10-02) — TTS toggle dans .controls ========= */
.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.controls .tts-toggle .icon{display:inline-block;min-width:1em;text-align:center}
@media (max-width: 560px){
  .controls{gap:6px}
}


/* === AXECIA (2025-10-02) — Nav wrap & no-scrollbar ============
   Objectif : éviter troncature et bande colorée (scrollbar).
   - Wrap des onglets sur 2 lignes si besoin
   - Suppression du défilement horizontal
   - Alignement top du header pour éviter tout clipping
=================================================================*/
.topbar-inner{ align-items: start; }

.tabs{
  overflow: visible !important;  /* supprime la barre de scroll */
  flex-wrap: wrap;               /* autorise le retour à la ligne */
  gap: 8px;                      /* léger resserrement */
  row-gap: 6px;                  /* espacement vertical entre lignes */
  padding-bottom: 0;
  -webkit-overflow-scrolling: auto;
}
/* Ajustements responsifs complémentaires */
@media (max-width: 1200px){
  .tabs{ gap: 6px; row-gap: 6px; }
}
@media (max-width: 992px){
  .tabs{ gap: 5px; row-gap: 5px; }
}
@media (max-width: 768px){
  .tabs{ gap: 4px; row-gap: 4px; }
}


/* === AXECIA (2025-10-02) — Nav single-line, no bar ============
   Objectif : conserver la nav sur une seule ligne, sans bande colorée.
   - Pas de wrap
   - Défilement horizontal autorisé, scrollbar masquée
   - Espacements resserrés en responsif
=================================================================*/
.tabs{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
  background: transparent !important;
}
.tabs::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

.tab{
  padding-inline: 10px;
  gap: 6px;
}

/* Réduction progressive des espacements pour maximiser la place */
@media (max-width: 1200px){
  .tab{ padding-inline: 9px; }
  .tabs{ column-gap: 6px; }
}
@media (max-width: 992px){
  .tab{ padding-inline: 8px; }
  .tabs{ column-gap: 5px; }
}
@media (max-width: 820px){
  .tab{ padding-inline: 7px; }
  .tabs{ column-gap: 4px; }
}

/* Ajustement du logo pour libérer de l'espace en largeur */
@media (max-width: 1200px){
  .brand-logo{ transform: scale(1.12); transform-origin: left center; }
}
@media (max-width: 992px){
  .brand-logo{ transform: scale(1.07); transform-origin: left center; }
}


/* === AXECIA (2025-10-02) — Correctifs nav & logo ==============
   - Suppression du scale du logo (plus d'empiètement visuel)
   - Alignement vertical centré du header
   - Nav forcée en une ligne avec scrollbar masquée (sans bande)
   - Liens non tronqués
=================================================================*/
.topbar-inner{ align-items: center !important; }

.brand{ display:flex; align-items:center; }
.brand-logo{ transform: none !important; } /* annule tout upscale transform */

.tabs{
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;    /* Firefox */
  background: transparent !important;
}
.tabs::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

.tab{
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 0 0 auto !important;
}


/* === AXECIA (2025-10-02) — Nav sous logo, centrée =============
   Layout header en 2 lignes : 
   - Ligne 1 : logo (gauche), contrôles accessibilité (droite)
   - Ligne 2 : navigation centrée (span 3 colonnes)
=================================================================*/
.topbar-inner{
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
}

/* Logo en ligne 1, col 1 */
.brand{ grid-column: 1; grid-row: 1; display:flex; align-items:center; }

/* Contrôles accessibilité en ligne 1, col 3 */
.controls{ grid-column: 3; grid-row: 1; justify-self: end; }

/* Navigation en ligne 2, centre, largeur au contenu */
.tabs{
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: end;
  width: max-content;           /* largeur calée sur le contenu */
  max-width: 100%;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;  /* défilement discret si besoin */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox : masque scrollbar */
  background: transparent !important;
  margin: 6px auto 0;           /* respiration sous le logo */
}
.tabs::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

/* Ancrage liens non tronqués et espacement maîtrisé */
.tab{
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-inline: 10px;
  gap: 6px;
}

/* Compression légère sur viewport plus étroit */
@media (max-width: 1200px){
  .tab{ padding-inline: 9px; }
}
@media (max-width: 992px){
  .tab{ padding-inline: 8px; }
}
@media (max-width: 820px){
  .tab{ padding-inline: 7px; }
}


/* === AXECIA (2025-10-02) — Nav entre logo et access, alignée ===
   Grille en 3 colonnes (logo | nav | access) sur une seule ligne.
   - .brand (col 1), .tabs (col 2, centrée), .controls (col 3, droite)
   - Nav mono-ligne, centrée, sans bande colorée, scrollbar masquée.
=================================================================*/
.topbar-inner{
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 12px;
}

/* Colonnage explicite */
.brand{ grid-column: 1 !important; grid-row: 1 !important; display:flex; align-items:center; }
.controls{ grid-column: 3 !important; grid-row: 1 !important; justify-self: end; }

/* Nav au centre (col 2) */
.tabs{
  grid-column: 2 !important; grid-row: 1 !important;
  justify-self: center; align-self: center;
  width: max-content; max-width: 100%;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;   /* défilement discret si nécessaire */
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;         /* Firefox */
  background: transparent !important;
  margin: 0 auto;
}
.tabs::-webkit-scrollbar{ display: none; } /* Chrome/Safari */

/* Liens non tronqués + espacements maîtrisés */
.tab{
  flex: 0 0 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding-inline: 10px;
  gap: 6px;
}

/* Resserrement progressif pour soutenir l'alignement sans troncature */
@media (max-width: 1200px){
  .tab{ padding-inline: 9px; }
}
@media (max-width: 992px){
  .tab{ padding-inline: 8px; }
}
@media (max-width: 820px){
  .tab{ padding-inline: 7px; }
}


/* === AXECIA (2025-10-03) — Stabilisation nav ===================
   Objectif: aucune variation visuelle/métrique entre "Accueil" et
   les autres onglets lors du survol, focus ou navigation.
   - Hover/Focus/Current = même rendu (couleurs seulement)
   - Aucune modif de padding/border-width/line-height
=================================================================*/
.tab{ text-decoration:none !important; font-weight:inherit !important; }
.tab:hover,
.tab:focus-visible,
.tab[aria-current="page"]{
  color:#fff !important;
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.30) !important;
  text-decoration:none !important;
  outline: none;
}


/* Hero badges aligned to paragraph width */
.badges.hero-inline{
  grid-template-columns: repeat(3, minmax(0,1fr));
  max-width: 60ch; /* similar visual width to text paragraphs */
  margin-top: 24px;
}
@media (max-width: 680px){
  .badges.hero-inline{ grid-template-columns: 1fr; max-width: none; }
}

/* Prestations cards illustrations */
.illus-card{
  width:100%;
  aspect-ratio: 16/10;
  display:block;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}


/* Cas d'usage — visibilité des visuels en mode sombre */
.cas-illus{transition:filter .2s ease;}
.cas-illus{filter: invert(1) brightness(1.05) contrast(1.05);}
.light .cas-illus{filter:none;}


/* === AXECIA P0/P1 Enhancements (global + packs) === */
.packs .pack-titles h3 { text-transform: uppercase; line-height: 1.2; max-width: 34ch; word-wrap: break-word; }
.packs .pack-titles p { color: rgba(255,255,255,0.95); }

.packs .chip { display:inline-flex; gap:6px; align-items:center; border:1px solid rgba(255,255,255,.28); padding:2px 8px; border-radius:999px; font-size:.8rem; line-height:1.6; background: rgba(255,255,255,.10); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
  border-radius: 8px;
}

#devis, section#devis { margin-top: 32px; display: block; scroll-margin-top: 96px; }

.cas-illus { filter: brightness(1.05) contrast(1.05); }
.light .cas-illus { filter: none; }

/* Packs visuals */
.packs .pack-card{position:relative; background:#0a0a0a; border:1px solid rgba(255,255,255,.12); border-radius:10px; transition: box-shadow .2s ease, transform .2s ease;}
.packs .pack-card:hover{box-shadow: 0 8px 24px rgba(0,0,0,.35); transform: translateY(-1px);}
.packs .pack-summary{display:block; cursor:pointer; outline: none;}
.packs .pack-summary::-webkit-details-marker{display:none;}
.packs .pack-summary-inner{display:flex; align-items:flex-start; gap:16px; padding:16px 16px 12px 16px;}
.packs .pack-icon{width:28px; height:28px; flex:0 0 28px; opacity:.9; fill:#fff;}
.packs .pack-titles p{margin:4px 0 0 0; opacity:.95;}
.packs .pack-chips{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 4px 0;}
.packs .pack-chevron{margin-left:auto; width:18px; height:18px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform: rotate(45deg); opacity:.8; margin-top:6px;}
.packs details[open] .pack-chevron{transform: rotate(-135deg); transition:transform .2s ease;}
.packs .card-body{padding: 0 16px 16px 16px; border-top:1px solid rgba(255,255,255,.12);}
.packs .card-body ul{margin:12px 0; padding-left:18px;}
.packs .pack-actions{margin-top:12px;}
.packs .btn{display:inline-block; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:600; border:1px solid rgba(255,255,255,.2);}
.packs .btn.btn-secondary{background:#111827; color:#fff;}
.packs .btn.btn-secondary:hover{background:#1f2937;}

/* Grouped layout retained */
.packs .cards.cards-grouped{display:flex; flex-direction:column; gap:20px;}
.packs .cards.cards-grouped .row{display:grid; gap:20px; align-items:stretch;}
.packs .cards.cards-grouped .row-1col{grid-template-columns: 1fr;}
.packs .cards.cards-grouped .row-2col{grid-template-columns: repeat(2, minmax(280px,1fr));}
@media (max-width: 820px){
  .packs .cards.cards-grouped .row-2col{grid-template-columns: 1fr;}
}

/* Sticky CTA (mobile only) */
@media (max-width: 820px) {
  .sticky-cta {
    position: fixed; right: 16px; bottom: 16px;
    background: #111827; color: #fff; text-decoration: none;
    border: 1px solid rgba(255,255,255,.2); padding: 10px 14px;
    border-radius: 10px; font-weight: 600; z-index: 9999;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  .sticky-cta:hover { background: #1f2937; }
}


/* ========= Pricing v2 (3 tiles grid) ========= */
.packs .cards.cards-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media(max-width:960px){.packs .cards.cards-grid-3{grid-template-columns:1fr}}
.packs .pack-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .2s ease, box-shadow .2s ease}
.packs .pack-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,#22d3ee,#14b8a6);opacity:.9}
.packs .pack-card.pack--individuel::before{background:linear-gradient(90deg,#10b981,#34d399)}
.packs .pack-card.pack--groupe::before{background:linear-gradient(90deg,#a855f7,#06b6d4)}
.packs .pack-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.35)}
.packs .pack-summary-inner{padding:20px 20px 12px 20px}
.packs .pack-icon{width:32px;height:32px;opacity:.95}
.packs .pack-titles h3{font-weight:800;letter-spacing:-.01em;margin:0}
.packs .card-body{padding:0 20px 20px 20px;border-top:1px solid var(--border)}
.packs .pack-actions .btn{width:100%;text-align:center}
/* ============================================= */


/* Pricing v2 — static cards (no click needed) */
.packs .pack-summary{cursor:default}
.packs .pack-chevron{display:none}
/* ensure layout spacing consistent when summary is a div */
.packs .pack-summary-inner{padding:20px 20px 12px 20px}


/* Pricing v2 — CTA alignés en bas des cartes */
.packs .cards.cards-grid-3{align-items:stretch}
.packs .pack-card{display:flex;flex-direction:column;height:100%}
.packs .pack-summary{flex:0 0 auto}
.packs .card-body{display:flex;flex-direction:column;flex:1}
.packs .pack-actions{margin-top:auto}


/* ===== Contact Form v2 ===== */
.contact-form-v2{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.contact-form-v2 .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-form-v2 .form-span-2{grid-column:span 2}
@media(max-width: 900px){.contact-form-v2 .form-grid{grid-template-columns:1fr}.contact-form-v2 .form-span-2{grid-column:auto}}
.contact-form-v2 .form-field label{display:block;font-weight:600;margin-bottom:8px}
.contact-form-v2 input[type="text"],
.contact-form-v2 input[type="email"],
.contact-form-v2 input[type="tel"],
.contact-form-v2 select,
.contact-form-v2 textarea{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);
  background:var(--surface, #111);color:inherit;outline:none
}
.contact-form-v2 input:focus,
.contact-form-v2 select:focus,
.contact-form-v2 textarea:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.contact-form-v2 .checkbox{display:flex;align-items:flex-start;gap:8px}
.contact-form-v2 .checkbox input{margin-top:4px}
.contact-form-v2 .form-actions .btn{width:100%}
/* =========================== */


/* ===== Contact Form Simple ===== */
.contact-form-simple{display:flex;flex-direction:column;gap:12px}
.contact-form-simple label{font-weight:600}
.contact-form-simple input[type="text"],
.contact-form-simple input[type="email"],
.contact-form-simple textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--surface,#111);color:inherit}
.contact-form-simple input:focus,
.contact-form-simple textarea:focus{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.25)}
.contact-form-simple .checkbox{display:flex;gap:8px;align-items:flex-start}
.contact-form-simple .btn{align-self:flex-start}
/* ================================= */


/* ===== Contact visual ===== */
.contact-visual{margin:16px 0}
.contact-visual svg{display:block;width:100%;height:auto}
/* ========================= */


/* ===== Contact visual (image) ===== */
.contact-visual{margin:16px 0;display:block}
.contact-visual img{display:block;max-width:420px;width:100%;height:auto;margin:0 auto}
/* ================================== */


/* === Contact visual — proportions alignées aux blocs === */
.contact-visual{margin:16px 0;display:block}
.contact-visual.card{padding:16px;border:1px solid var(--border);border-radius:var(--radius)}
.contact-visual img{display:block;width:100%;height:auto;margin:0}
/* ======================================================= */


/* === Contact illustration fit === */
.card img[src$="contact-envelope.png"],
img[src$="contact-envelope.png"]{
  display:block;
  width:100%;
  height:auto;
  max-height:320px;
  object-fit:contain;
  margin:0 auto;
  border-radius:calc(var(--radius) - 2px);
  background:rgba(255,255,255,0.02);
  padding:8px;
  box-sizing:border-box;
}
/* ================================= */