:root{
  --navy:#202549;
  --green:#29A537;
  --blue:#58C3F1;
  --yellow:#F1E515;
  --text:#0F172A;
  --muted:#6B7280;
  --border:#E5E7EB;
  --bg:#FFFFFF; /* Fond global du site en blanc pur */
  --panel-overlap:340px;
  --panel-height:747px;
  --panel-gap:60px;
  --crop-bottom:20%;
  /* Décalage supplémentaire des éléments sous le panneau marketing */
  --post-hero-offset:348px;
  
}
/*
  ================================================
  Mise en page HERO + PANNEAU BLANC — NE PAS MODIFIER LA POSITION
  ------------------------------------------------
  1) Recadrage du fond (fondsite.jpg)
     - L’unique image de fond est <img class="hero-bg"> dans index.php
     - Le rognage visuel de 20% par le bas est appliqué par clip-path :
       .hero-bg { clip-path: inset(0 0 var(--crop-bottom) 0) }
     - Variable : --crop-bottom: 20%

  2) Panneau blanc arrondi (contenu marketing)
     - Le panneau se trouve dans .marketing-panel (en dehors du flux du fond)
     - Son chevauchement VERS LE HAUT est contrôlé EXCLUSIVEMENT par une marge négative :
       .marketing-panel { margin: calc(-1 * var(--panel-overlap)) auto 0 }
     - NE PAS repasser en position:absolute; NE PAS toucher à top/bottom ici.
     - Variable d’overlap actuellement figée à 340px (validée par le client) :
       --panel-overlap: 340px

  3) Réservation d’espace pour la section suivante
     - La section .hero réserve la place sous le panneau via padding-bottom
       .hero { padding-bottom: calc(var(--panel-height) - var(--panel-overlap) + var(--panel-gap)) }
     - HAUTEUR du panneau figée à 747px : --panel-height: 747px

  IMPORTANT — CONTRAT VISUEL VALIDÉ
  - Ne PAS modifier : --crop-bottom, --panel-overlap, --panel-height, ni les règles
    .hero-bg (clip-path), .marketing-panel (margin négative), .hero (padding-bottom).
  - Toute demande d’ajustement doit être validée par le client avant changement.
  ================================================
*/
*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{text-decoration:none;color:inherit}
.container{max-width:1080px;margin:0 auto;padding:0 16px}
.pk-header{position:sticky;top:0;background:#fff;border-bottom:none;z-index:30}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px}.brand-name{font-weight:800;color:var(--navy)}
/* Navigation */
.nav{display:flex;align-items:center;gap:28px;justify-content:space-between;width:100%}
.nav a{color:var(--navy);font-weight:800}
.nav-left{display:flex;gap:36px}
.nav-right{display:flex;gap:18px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:10px;border:1px solid transparent;font-weight:800}
.btn-green{background:var(--green);color:#fff}
.lang-select{border:1px solid var(--border);border-radius:8px;padding:6px 10px;color:var(--text);background:#fff;font-weight:600}
.hero{
  padding-bottom: calc(var(--panel-height) - var(--panel-overlap) + var(--panel-gap));
  position:relative;
  overflow:visible;
  background:#fff;
  z-index:100}
/* Bandeau avec les formes superposées */
.hero-banner{position:relative;background:#fff;display:flex;justify-content:center}
.hero-banner-inner{position:relative;width:100%;max-width:1080px}
/* Image de fond principale (définit la hauteur) */
.hero-bg{display:block;width:100%;height:auto;z-index:0;clip-path:inset(0 0 var(--crop-bottom) 0)}
.hero-logo{position:absolute;left:24px;top:24px;width:208px;height:314px;object-fit:cover;z-index:2;filter: drop-shadow(0 6px 14px rgba(0,0,0,.18))}
/* Bloc texte sous le logo, dans le bandeau (restauré) */
.hero-copy-overlay{position:absolute;left:24px;top:360px;width:402px;height:215px;color:#fff;z-index:3;display:flex;flex-direction:column;justify-content:flex-start;text-shadow:none;-webkit-text-stroke:0}
.hero-copy-overlay, .hero-copy-overlay *{color:#fff}
.hero-copy-overlay .headline{font-weight:800;font-size:33px;line-height:1.2;margin:0 0 14px}
.hero-copy-overlay .cta-group{display:flex;gap:16px}
.store-btn img{width:133px;height:76px;object-fit:contain;display:block}

/* Panneau blanc arrondi pour le texte marketing (placé dans hero-banner-inner) */
/* La base visuelle (après recadrage) est var(--crop-bottom). On remonte de 40px: bottom = var(--crop-bottom) - 40px */
.marketing-panel{
  min-height: var(--panel-height); /* Remplace height par min-height */
  position:relative;
  margin:calc(-1 * var(--panel-overlap)) auto 0;
  width:805px;
  height:747px;
  background:#fff;
  border-radius:50px;
  z-index:10;
  border:none;
  box-shadow:none}
.marketing-panel .content{padding:28px 32px;color:#0F172A}
.marketing-panel p{margin:0 0 12px;color:#334155;font-size:16px;line-height:1.6}
.marketing-panel h2{margin:0 0 12px;font-size:24px;line-height:1.25;color:var(--navy);font-weight:600}
.marketing-panel h3{margin:16px 0 8px;font-size:20px;line-height:1.25;color:var(--green);font-weight:600}

/* Badge "Vous êtes professionnel ?" */
.pro-badge{display:inline-block;border:3px solid var(--green);color:var(--green);border-radius:999px;padding:14px 26px;font-weight:800;font-size:26px;line-height:1;text-align:center;margin:12px 0 18px}

/* Helpers de mise en forme */
.marketing-panel .center{text-align:center}
.center{text-align:center}
.green{color:var(--green)}

/* Contenu sous le bandeau: réserver la hauteur utile du panneau (hauteur − overlap) */
.hero{padding-bottom:calc(var(--panel-height) - var(--panel-overlap) + var(--panel-gap))}
.hero-inner{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:center;padding:28px 0 40px}
.hero h1{font-size:clamp(26px,3.6vw,40px);line-height:1.12;margin:0 0 10px;color:var(--navy);font-weight:600}
/* Force le blanc pour le titre dans l’overlay du héro (prioritaire sur .hero h1) */
.hero-copy-overlay .headline{color:#fff !important;text-shadow:none;-webkit-text-stroke:0;filter:none;font-weight:600}
.lead{color:var(--muted);font-size:18px;max-width:640px}
.hero-visual img{width:100%;max-width:420px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.features{padding:40px 0}
.features{position:relative;z-index:0}
.features h2,.pricing h2{font-size:28px;margin:0 0 22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.pricing{padding:30px 0 60px}
.price-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.price-tag{display:inline-block;font-weight:900;padding:6px 10px;border-radius:8px;margin-bottom:6px}
.price-tag.yellow{background:rgba(241,229,21,.2);color:#6b6b00}
.price-tag.green{background:rgba(41,165,55,.18);color:#0f6d22}
.price-tag.blue{background:rgba(88,195,241,.2);color:#0d4a66}
.pk-footer{
  border-top: 1px solid var(--border);
  background: #fff;
  position: relative;
  z-index: 1;
  /* Abaisse le footer pour compenser la superposition visuelle du panneau */
  margin-top: var(--post-hero-offset);
}
.footer-inner{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:64px}
.lang-switch{display:flex;gap:8px;color:var(--muted)}
.page{padding:32px 0}

/* ========================= */
/* Section fonctionnalités   */
/* ========================= */
.app-section{padding:40px 0 60px;background:#fff;margin-top:var(--post-hero-offset)}
.app-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;align-items:start}
.app-visual{text-align:center}
.app-visual img{width:100%;max-width:420px;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.08)}
.app-points{color:#334155}
.app-title{color:var(--blue);font-weight:600;font-size:26px;line-height:1.25;margin:0 0 16px}
.point-block{margin:18px 0}
.point-block h3{margin:0 0 10px;font-size:20px;line-height:1.25;color:var(--green);font-weight:600}
.dot-list{list-style:none;margin:0;padding:0;display:block}
.dot-list li{position:relative;display:block;margin:8px 0 8px 0;line-height:1.55;padding-left:24px}
.dot-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;background:url('/assets/img/circle.png') no-repeat center/contain}
/* Forcer l’affichage en une seule colonne (évite la mise en colonnes automatique) */
.app-points, .dot-list{
  -webkit-column-count: 1 !important;
  column-count: 1 !important;
  -webkit-columns: auto !important;
  columns: auto !important;
  column-gap: normal !important;
}
/* Étendre la protection à tous les descendants potentiels */
.app-points *, .dot-list *{
  -webkit-column-count: 1 !important;
  column-count: 1 !important;
  -webkit-columns: auto !important;
  columns: auto !important;
  break-inside: avoid-column;
  word-break: keep-all; /* éviter la césure au milieu des mots */
  overflow-wrap: normal; /* ne pas couper arbitrairement */
  white-space: normal;
}
/* Empêcher la coupure de l’intitulé de la marque */
.dot-list li .green{white-space:nowrap}
/* Éviter que les <li> soient coupés entre colonnes si une règle globale s’applique */
.dot-list li{break-inside: avoid-column}
@media (max-width: 900px){
  .hero-banner{height:520px}
  .hero-logo{width:160px;height:242px;left:20px;top:20px}
  .hero-copy-overlay{left:20px;top:300px;width:calc(100% - 40px)}
  .hero-inner{grid-template-columns:1fr}
  .hero-visual{order:-1;text-align:center}
  .hero-visual img{max-width:72%}
  .app-grid{grid-template-columns:1fr}
  .app-visual img{max-width:72%}
}
  .hero::after {
    content: '';
    display: block;
    clear: both;
}