/*
 * CB06 — Design system
 * Source unique de vérité pour couleurs, typographie, rayons, ombres,
 * boutons, cartes et formulaires. Créé lors de la refonte du 26/07/2026.
 *
 * Règle pour l'avenir : toute nouvelle section réutilise ces tokens.
 * Ne pas créer de nouvelle feuille "vNN" ni de style inline pour un
 * correctif ponctuel — étendre ce fichier à la place.
 */

:root{
  /* Couleurs de marque — une seule valeur de chaque */
  --cb06-blue: #075FEC;
  --cb06-blue-hover: #0B53C9;
  --cb06-navy: #041333;
  --cb06-navy-hover: #0A2555;
  --cb06-yellow: #FFD21F;
  --cb06-yellow-hover: #F2C600;

  /* Surfaces */
  --cb06-bg: #FFFFFF;
  --cb06-bg-alt: #F5F8FC;
  --cb06-bg-navy: var(--cb06-navy);

  /* Texte */
  --cb06-text: var(--cb06-navy);
  --cb06-text-secondary: #55647A;
  --cb06-text-on-blue: #FFFFFF;
  --cb06-text-on-navy: #FFFFFF;
  --cb06-text-on-yellow: var(--cb06-navy);

  /* Bordures */
  --cb06-border: #E1E8F2;
  --cb06-border-strong: #C9D5E6;

  /* États sémantiques (distincts de l'accent de marque) */
  --cb06-success: #18A85F;
  --cb06-danger: #C0392B;

  /* Rayons — 4 valeurs maximum */
  --cb06-r-sm: 8px;
  --cb06-r-md: 12px;
  --cb06-r-lg: 20px;
  --cb06-r-pill: 999px;

  /* Ombres — 2 niveaux maximum, flou raisonnable */
  --cb06-shadow-sm: 0 2px 8px rgba(4,19,51,.06);
  --cb06-shadow-md: 0 10px 24px rgba(4,19,51,.10);

  /* Espacement — base 8px */
  --cb06-sp-1: 8px;
  --cb06-sp-2: 16px;
  --cb06-sp-3: 24px;
  --cb06-sp-4: 32px;
  --cb06-sp-5: 48px;
  --cb06-sp-6: 64px;

  /* Typographie */
  --cb06-font: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb06-fs-h1: clamp(30px, 4vw, 44px);
  --cb06-fs-h2: clamp(24px, 3vw, 32px);
  --cb06-fs-h3: 19px;
  --cb06-fs-body: 16px;
  --cb06-fs-small: 14px;
  --cb06-fs-badge: 12px;

  --cb06-fw-regular: 400;
  --cb06-fw-medium: 500;
  --cb06-fw-semibold: 600;
  --cb06-fw-title: 650;

  --cb06-container: 1160px;

  /* Hauteurs de bouton — 3 tailles seulement */
  --cb06-btn-h-sm: 36px;
  --cb06-btn-h-md: 44px;
  --cb06-btn-h-lg: 52px;

  --cb06-transition: .16s ease;
}

/* ==========================================================================
   BOUTONS — 4 familles maximum, aucune autre.
   .cb06-button          = base commune (taille, rayon, poids, transition)
   .cb06-button--primary = action principale (bleu)
   .cb06-button--outline = action secondaire (contour marine)
   .cb06-button--phone   = bouton téléphone (marine plein)
   .cb06-button--client  = Espace client (jaune, rare et volontairement rare)
   Les liens texte (ex. "Voir >") ne sont pas des boutons : classe .cb06-link.
   ========================================================================== */

.cb06-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:var(--cb06-btn-h-md);
  padding:0 22px;
  border-radius:var(--cb06-r-pill);
  border:1.5px solid transparent;
  font-family:var(--cb06-font);
  font-size:var(--cb06-fs-small);
  font-weight:var(--cb06-fw-semibold);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform var(--cb06-transition), box-shadow var(--cb06-transition), background var(--cb06-transition), border-color var(--cb06-transition);
}
.cb06-button:hover{ transform:translateY(-1px); }
.cb06-button:active{ transform:translateY(0); }
.cb06-button:focus-visible{
  outline:3px solid rgba(7,95,236,.35);
  outline-offset:2px;
}
.cb06-button:disabled,
.cb06-button[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  transform:none !important;
  box-shadow:none !important;
}
.cb06-button--sm{ height:var(--cb06-btn-h-sm); padding:0 16px; font-size:13px; }
.cb06-button--lg{ height:var(--cb06-btn-h-lg); padding:0 28px; font-size:15px; }
.cb06-button--block{ width:100%; }

.cb06-button--primary{
  background:var(--cb06-blue);
  color:var(--cb06-text-on-blue);
  box-shadow:var(--cb06-shadow-sm);
}
.cb06-button--primary:hover{ background:var(--cb06-blue-hover); box-shadow:var(--cb06-shadow-md); }
.cb06-button--primary:focus-visible{ outline-color:rgba(7,95,236,.45); }

.cb06-button--outline{
  background:var(--cb06-bg);
  color:var(--cb06-navy);
  border-color:var(--cb06-navy);
}
.cb06-button--outline:hover{ background:var(--cb06-bg-alt); }

.cb06-button--phone{
  background:var(--cb06-navy);
  color:var(--cb06-text-on-navy);
  box-shadow:var(--cb06-shadow-sm);
}
.cb06-button--phone:hover{ background:var(--cb06-navy-hover); box-shadow:var(--cb06-shadow-md); }

.cb06-button--client{
  background:var(--cb06-yellow);
  color:var(--cb06-text-on-yellow);
  box-shadow:var(--cb06-shadow-sm);
}
.cb06-button--client:hover{ background:var(--cb06-yellow-hover); box-shadow:var(--cb06-shadow-md); }

.cb06-link{
  color:var(--cb06-blue);
  font-weight:var(--cb06-fw-semibold);
  text-decoration:underline;
  text-underline-offset:3px;
}
.cb06-link:hover{ color:var(--cb06-blue-hover); }
.cb06-link:focus-visible{ outline:3px solid rgba(7,95,236,.35); outline-offset:2px; border-radius:4px; }

/* --------------------------------------------------------------------------
   Couche d'alias — fait hériter les anciennes classes de bouton du système
   ci-dessus SANS toucher au HTML de chaque page. Objectif transitoire :
   unifier le rendu immédiatement ; les gabarits partagés migrent ensuite
   vers les classes .cb06-button--* directement (header, footer, accueil,
   générateur SEO, gabarit commune déjà migrés lors de cette refonte).
   -------------------------------------------------------------------------- */
.v4-btn, .cb06-btn, .cb06-v5-btn, .cb06-seo-btn, .cb06-cities-btn,
.cb06-button-primary, .cb06-button-secondary,
.cb06-client-v7-btn, .cb06-client-v6-action,
.seo-btn, .cb06-rappel-premium-v36-btn, .cb06-rappel-premium-v36-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  height:var(--cb06-btn-h-md) !important;
  min-height:0 !important;
  padding:0 22px !important;
  border-radius:var(--cb06-r-pill) !important;
  border:1.5px solid transparent !important;
  font-family:var(--cb06-font) !important;
  font-size:var(--cb06-fs-small) !important;
  font-weight:var(--cb06-fw-semibold) !important;
  line-height:1 !important;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:var(--cb06-shadow-sm) !important;
  transition:transform var(--cb06-transition), box-shadow var(--cb06-transition), background var(--cb06-transition) !important;
}
.v4-btn:hover, .cb06-btn:hover, .cb06-v5-btn:hover, .cb06-seo-btn:hover, .cb06-cities-btn:hover,
.cb06-button-primary:hover, .cb06-button-secondary:hover,
.cb06-client-v7-btn:hover, .seo-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:var(--cb06-shadow-md) !important;
}

/* Variantes "principal" (bleu) parmi les anciennes classes */
.v4-btn-blue, .cb06-btn-blue, .cb06-seo-btn.blue, .cb06-cities-btn.blue,
.cb06-button-primary, .cb06-client-v7-btn.primary, .cb06-rappel-premium-v36-btn.primary{
  background:var(--cb06-blue) !important;
  color:#fff !important;
  border-color:transparent !important;
}
/* Variantes "secondaire" (contour / blanc) */
.v4-btn-light, .cb06-btn-white, .cb06-seo-btn.white, .cb06-cities-btn.outline,
.cb06-button-secondary, .cb06-client-v7-btn.secondary{
  background:var(--cb06-bg) !important;
  color:var(--cb06-navy) !important;
  border-color:var(--cb06-navy) !important;
  box-shadow:none !important;
}
/* Variantes "téléphone" (marine) */
.v4-btn-dark, .cb06-btn-navy, .cb06-v5-btn.cb06-v5-phone, .cb06-seo-btn.dark{
  background:var(--cb06-navy) !important;
  color:#fff !important;
  border-color:transparent !important;
}
/* Variantes "Espace client" (jaune — rare, volontairement) */
.cb06-btn-yellow, .cb06-seo-btn.yellow, .cb06-cities-btn.yellow,
.cb06-v5-btn.cb06-v5-help, .cb06-client-open-v6, .cb06-client-mobile-v6,
.cb06-rappel-premium-v36-btn.yellow{
  background:var(--cb06-yellow) !important;
  color:var(--cb06-navy) !important;
  border-color:transparent !important;
}

/* ==========================================================================
   CARTES
   ========================================================================== */
.cb06-card{
  background:var(--cb06-bg);
  border:1px solid var(--cb06-border);
  border-radius:var(--cb06-r-md);
  box-shadow:var(--cb06-shadow-sm);
  padding:var(--cb06-sp-3);
  transition:transform var(--cb06-transition), box-shadow var(--cb06-transition);
}
.cb06-card:hover{ transform:translateY(-2px); box-shadow:var(--cb06-shadow-md); }

/* ==========================================================================
   FORMULAIRES
   ========================================================================== */
.cb06-field{ display:flex; flex-direction:column; gap:6px; }
.cb06-field label{
  font-size:13px;
  font-weight:var(--cb06-fw-semibold);
  color:var(--cb06-navy);
}
.cb06-field input,
.cb06-field select,
.cb06-field textarea{
  font-family:var(--cb06-font);
  font-size:15px;
  font-weight:var(--cb06-fw-regular);
  color:var(--cb06-navy);
  background:var(--cb06-bg);
  border:1.5px solid var(--cb06-border-strong);
  border-radius:var(--cb06-r-sm);
  padding:11px 14px;
  transition:border-color var(--cb06-transition), box-shadow var(--cb06-transition);
}
.cb06-field input:hover, .cb06-field select:hover, .cb06-field textarea:hover{
  border-color:var(--cb06-text-secondary);
}
.cb06-field input:focus-visible, .cb06-field select:focus-visible, .cb06-field textarea:focus-visible{
  outline:none;
  border-color:var(--cb06-blue);
  box-shadow:0 0 0 3px rgba(7,95,236,.16);
}
.cb06-field input:disabled, .cb06-field select:disabled, .cb06-field textarea:disabled{
  background:var(--cb06-bg-alt);
  color:var(--cb06-text-secondary);
  cursor:not-allowed;
}
.cb06-field .cb06-help{ font-size:12.5px; color:var(--cb06-text-secondary); }
.cb06-field .cb06-error{ font-size:12.5px; color:var(--cb06-danger); }
.cb06-field.has-error input, .cb06-field.has-error select, .cb06-field.has-error textarea{
  border-color:var(--cb06-danger);
}

/* ==========================================================================
   TYPOGRAPHIE — plafond global à 700, pas d'emoji-icône
   ========================================================================== */
.cb06-eyebrow{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 12px;
  border-radius:var(--cb06-r-pill);
  background:var(--cb06-bg-alt);
  color:var(--cb06-navy);
  font-size:11px;
  font-weight:var(--cb06-fw-semibold);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ==========================================================================
   ÉTATS DE FOCUS CLAVIER — génériques, visibles partout
   ========================================================================== */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:3px solid rgba(7,95,236,.35);
  outline-offset:2px;
}

@media (max-width:640px){
  .cb06-button{ font-size:14px; }
}

/* ==========================================================================
   FOOTER PARTAGÉ — composant includes/cb06-footer-markup.php
   Source unique : avant cette section, ces règles n'existaient que dans
   assets/css/style.css (chargé uniquement par les pages utilisant
   includes/header.php). Les pages générées par cb06-seo-render-v1.php,
   cb06-commune-render.php, communes-06.php, cgv.php et
   creation-site-internet-nice.php chargent toutes cb06-design-system.css
   mais pas style.css : le footer y était donc rendu sans mise en forme.
   ========================================================================== */
.cb06-wrap{
  width: min(1180px, calc(100% - 44px));
  margin-inline: auto;
}
@media (max-width: 430px){
  .cb06-wrap{ width: min(100% - 26px, 1180px); }
}

.pro-footer{
  background: var(--cb06-navy);
  color: var(--cb06-bg);
  padding: 46px 0 28px;
}
.pro-footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
.pro-footer-brand{
  color: var(--cb06-bg);
  font-size: 34px;
  line-height: .9;
  letter-spacing: -2px;
  font-weight: var(--cb06-fw-semibold);
}
.pro-footer-brand span{ color: var(--cb06-blue-hover); }
.pro-footer p{
  margin: 10px 0 0;
  color: rgba(255,255,255,.70);
  line-height: 1.45;
}
.pro-footer strong{
  display: block;
  margin-bottom: 12px;
  color: var(--cb06-bg);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.pro-footer a{
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.74);
  text-decoration: none;
  font-weight: var(--cb06-fw-semibold);
}
.pro-footer a:hover{ color: var(--cb06-yellow); }
.pro-footer-bottom{
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(255,255,255,.58);
  font-size: 13px;
}
.pro-footer a.cb06-footer-espace-client{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 0 20px;
  height: 44px;
  border-radius: var(--cb06-r-md);
  background: var(--cb06-yellow);
  color: var(--cb06-text-on-yellow);
  font-weight: var(--cb06-fw-semibold);
  text-decoration: none;
}
.pro-footer a.cb06-footer-espace-client:hover{ background: var(--cb06-yellow-hover); color: var(--cb06-text-on-yellow); }

@media (max-width: 980px){
  .pro-footer-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .cb06-wrap{ width: min(100% - 28px, 1180px); }
  .pro-footer-grid,
  .pro-footer-bottom{
    grid-template-columns: 1fr;
    display: grid;
  }
  .pro-footer{ padding-bottom: 104px; }
  .pro-footer-bottom{
    flex-direction: column;
    gap: 6px;
    text-align: left;
  }
}