/* ============================================================
   MOBILE.CSS — Refonte mobile classe et propre
   --------------------------------------------------------------
   Chargé APRÈS styles.css → wins par cascade.
   Système de breakpoints canon (mobile-first) :
     - base   : <480px  (small phone : iPhone SE, mini, anciens Android)
     - sm     : 480px+  (large phone : iPhone Plus, Pro Max)
     - md     : 768px+  (tablet portrait : iPad)
     - lg     : 1024px+ (tablet landscape / laptop S)
     - xl     : 1280px+ (desktop)
   Convention : on cible <1024px (mobile + tablette) via @media (max-width: 1023.98px)
   et on raffine le très petit via @media (max-width: 479.98px).
   ============================================================ */


/* ============================================================
   0. EXTRAS QWEN (sticky CTA + skeleton imgs + smooth scroll)
   ============================================================ */
html { scroll-behavior: smooth; }

/* === Sticky CTA bottom (mobile only) === */
@media (max-width: 1023.98px) {
  .capeo-sticky-cta {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1100;
    pointer-events: none;
    opacity: 0;
    transform: translateY(110%);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .capeo-sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .capeo-sticky-cta__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.005em;
    color: #ffffff;
    background: linear-gradient(135deg, #e17a2d 0%, #d9691b 100%);
    border-radius: 999px;
    text-decoration: none;
    box-shadow:
      0 16px 40px -10px rgba(225, 122, 45, 0.55),
      0 4px 12px -4px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .capeo-sticky-cta__btn:active {
    transform: scale(0.97);
    box-shadow: 0 10px 28px -10px rgba(225, 122, 45, 0.45);
  }
  .capeo-sticky-cta__btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  /* On évite que le sticky CTA cache le footer : padding-bottom au body */
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }
}

/* === Simulateur : on retire le rectangle blanc qui masquait
       l'en-tête "Simulateur solaire" sur mobile === */
@media (max-width: 1023.98px) {
  .simulator-badge-mask {
    display: none !important;
  }
}

/* === Disclaimer "Prévisionnel 2026/2027" en bas-droite du
       bandeau KPIs hero pro (toutes pages, mobile + desktop) === */
.pro2-kpis.pro2-kpis--in-hero { position: relative; }
.pro2-hero__disclaimer {
  position: absolute;
  right: 14px;
  bottom: 4px;
  z-index: 10;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.03em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.65);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  user-select: none;
  margin: 0;
  padding: 0;
}

/* === Skeleton fade-in pour images lourdes === */
.capeo-img-skeleton {
  opacity: 0.35;
  filter: blur(6px);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.capeo-img-loaded {
  opacity: 1;
  filter: blur(0);
}


/* ============================================================
   1. BURGER MENU — fix critique (opacity bloquée à 0)
   ------------------------------------------------------------
   L'animation menuFadeInUp restait suspendue. On remplace par
   un état stable opacity:1 + animation transform uniquement
   (display:none → display:block + animate ne fonctionne pas
   de manière fiable cross-browser).
   ============================================================ */
@media (max-width: 1023.98px) {
  .nav.mobile-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    animation: mobileNavSlideIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  /* Touch target burger (44x44 min iOS/WCAG) */
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

@keyframes mobileNavSlideIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.99); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ============================================================
   2. AUDIENCE SWITCH — refonte tactile
   ------------------------------------------------------------
   Avant : boutons 59x30px, texte 9px (inutilisables).
   Après : 44px de haut min, texte 13px min, padding tactile.
   ============================================================ */
@media (max-width: 1023.98px) {
  .audience-switch {
    min-height: 40px;
    border-radius: 999px;
  }
  .audience-switch-option {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 479.98px) {
  /* Sur très petit écran, on garde le switch mais on serre le padding */
  .audience-switch-option {
    padding: 8px 12px;
    font-size: 12.5px;
  }
}


/* ============================================================
   3. FOOTER — stack 1 colonne <768px
   ------------------------------------------------------------
   Avant : grid 1fr 1fr 1fr → 153px/220px/34px sur 375px,
   débordement +53px à +115px masqué par overflow-x:clip.
   Après : stack vertical centré, gap généreux.
   ============================================================ */
@media (max-width: 767.98px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 36px;
    margin-bottom: 24px;
  }

  /* Bloc contact : 3 items en row compact (icône GAUCHE, texte
     aligné à GAUCHE), bloc entier centré horizontalement dans le
     footer. Hauteur visuelle bien plus contenue. */
  .footer-contact {
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
  }
  .footer-contact__item {
    width: 100% !important;
    max-width: 280px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    text-align: left !important;
  }
  .footer-contact__icon {
    margin: 0 !important;
    flex: 0 0 auto !important;
  }
  .footer-contact__body {
    flex: 1 !important;
    align-items: flex-start !important;
    text-align: left !important;
    min-width: 0;
  }
  .footer-contact__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-align: left !important;
    margin: 0 0 1px;
  }
  .footer-contact__value {
    font-size: 15px;
    text-align: left !important;
    line-height: 1.25;
    margin: 0 0 1px;
  }
  .footer-contact__sub {
    font-size: 12px;
    text-align: left !important;
    line-height: 1.3;
  }

  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-row {
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }

  .footer-description {
    text-align: center;
    max-width: 320px;
  }

  /* Pictos sociaux alignés horizontalement, centrés, sous la brand */
  .social-links {
    display: flex !important;
    flex-direction: row !important;
    justify-self: center !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100%;
    margin-top: 8px;
  }

  /* Touch targets sociaux : 44x44 min */
  .social-links a {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px;
  }

  /* Liens footer secondaires (CGV, mentions, conf.) — touch friendly */
  .footer-bottom a,
  .footer-legal a {
    padding: 6px 4px;
    display: inline-block;
  }
}

/* À 480+ on garde quand même le centrage propre (le décalage icône à gauche /
   texte centré reste laid). Ne PAS rebasculer en flex-start ici. */


/* ============================================================
   4. PRO2 HERO — fix overflows (agriculture +19px, etc.)
   ------------------------------------------------------------
   .pro2-hero-sticky n'avait pas de padding latéral mobile,
   les enfants débordaient. On ajoute padding-inline et on
   contraint les enfants en max-width:100%.
   ============================================================ */
@media (max-width: 1023.98px) {
  .pro2-hero-sticky,
  .pro2-hero {
    padding-inline: 20px;
    box-sizing: border-box;
  }

  .pro2-hero__grid,
  .pro2-container {
    box-sizing: border-box;
    max-width: 100%;
  }

  .pro2-hero__grid > div,
  .pro2-hero__aside {
    max-width: 100%;
    min-width: 0;
  }

  /* Hero H1 typo mobile généreuse mais pas excessive */
  .pro2-hero h1,
  .pro2-hero-sticky h1 {
    font-size: clamp(32px, 7.5vw, 48px);
    line-height: 1.1;
  }

  .pro2-hero .lead,
  .pro2-hero-sticky .lead,
  .pro2-hero p.lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
    /* Réduit l'écart vers le CTA Demander une étude (36px desktop → 18px mobile) */
    margin-bottom: 18px !important;
  }

  /* CTAs hero : largeur fluide.
     - Sur mobile EN MODE PRO : MASQUÉ car redondant avec le sticky CTA
       du bas (.capeo-sticky-cta) qui pointe sur la même page contact-pro.
     - Sur mobile EN MODE PARTICULIER : conservé (sticky pointe sur le
       simulateur, donc rôles différents). */
  .pro2-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 20px !important;
  }
  html[data-audience="pro"] .pro2-hero__ctas {
    display: none !important;
  }
  .pro2-hero__ctas .pro2-btn,
  .pro2-hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* Aside hero : full width sur mobile, padding interne.
     margin-top réduit pour rapprocher la carte du CTA. */
  .pro2-hero__aside {
    width: 100%;
    margin-top: 16px !important;
    padding: 20px 18px;
    box-sizing: border-box;
  }

  /* H1 souligné qui dépasse (agriculture "exploitation agricole") */
  .pro2-hero h1 .underline,
  .pro2-hero-sticky h1 .underline {
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    overflow-wrap: break-word;
    word-break: keep-all;
  }
}


/* ============================================================
   5. PRO2 SECTIONS — containers & padding
   ============================================================ */
@media (max-width: 767.98px) {
  .pro2-section,
  .pro2-section--soft,
  .pro2-section--method,
  .pro2-section--segments,
  .pro2-section--capex,
  .pro2-section--final {
    padding-block: 56px;
  }

  .pro2-container,
  .pro2-secthead {
    padding-inline: 20px;
    box-sizing: border-box;
  }

  .pro2-secthead h2 {
    font-size: clamp(26px, 6.5vw, 36px);
    line-height: 1.15;
  }

  .pro2-secthead p {
    font-size: 15.5px;
    line-height: 1.6;
  }

  /* Piliers : déjà gérés par grid-template-columns: 1fr,
     mais on s'assure que le padding interne est correct */
  .pro2-pillar {
    padding: 32px 24px;
  }

  /* KPIs hero : 2 colonnes au lieu de 4 sur mobile */
  .pro2-kpis__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
  }
  .pro2-kpi__num {
    font-size: clamp(28px, 6.5vw, 40px);
  }
  .pro2-kpi__label {
    font-size: 13px;
    line-height: 1.4;
  }
}

@media (max-width: 479.98px) {
  /* Sur small phone, KPIs en 1 colonne pour éviter l'écrasement */
  .pro2-kpis__grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   6. SECTION DESCRIPTION ✦ — repli mobile
   ------------------------------------------------------------
   Le pattern item ✦ separator ✦ item débordait massivement.
   Mobile : on cache les séparateurs et on stack verticalement.
   ============================================================ */
@media (max-width: 1023.98px) {
  .section-description {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    padding-inline: 16px;
  }
  .section-description__sep {
    display: none !important;
  }
  .section-description__item {
    display: block;
    max-width: 100%;
  }
}


/* ============================================================
   7. TÉMOIGNAGE CLIENT (pro.html .pro2-case) — stack mobile
   ------------------------------------------------------------
   Le bloc multi-cellules débordait +47px. Stack vertical.
   ============================================================ */
@media (max-width: 767.98px) {
  .pro2-case,
  .pro2-case__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  .pro2-case__visual,
  .pro2-case__body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .pro2-case__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .pro2-case__metric strong {
    font-size: clamp(22px, 5vw, 28px);
    word-break: keep-all;
    white-space: nowrap;
  }

  .pro2-case__tag {
    font-size: 12.5px;
  }
}


/* ============================================================
   8. STOCKAGE — fix overflows
   ------------------------------------------------------------
   "Stockage physique / Batterie sur site" débordait +139px.
   .benefit-card-glow débordait +37px.
   ============================================================ */
@media (max-width: 1023.98px) {
  .benefit-card,
  .benefit-card-glow {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Stockage : forcer stack vertical sur les cartes physique/virtuel */
  .stockage-mobile-stack,
  .stockage-grid,
  .stockage-comparison {
    display: flex !important;
    flex-direction: column;
    gap: 16px;
  }

  .stockage-card,
  .stockage-physique,
  .stockage-virtuel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* ============================================================
   9. TYPO MINIMUMS — pas de texte < 12px sur mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .pro2-capex-badge__label,
  .pro2-method__tag,
  .solea-mobile-card__eyebrow,
  .solea-mrental__flag,
  .pro2-segment__tag,
  .pro2-case__tag,
  .ctp-chrono__label {
    font-size: 12px !important;
    letter-spacing: 0.04em;
  }

  /* Form labels (Prénom, Email...) : 14px lisible */
  form label,
  .form-label {
    font-size: 14px;
  }

  /* Inputs : 16px pour empêcher le zoom auto iOS */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px;
  }
}


/* ============================================================
   10. PRO2 PILIERS / CAPEX BADGE — refonte mobile compacte
   ============================================================ */
@media (max-width: 1023.98px) {
  /* Layout : titre "Une installation solaire…" à gauche, badge 0€
     flotté à droite — les paragraphes s'enroulent naturellement et
     reprennent la pleine largeur après le badge. */
  .pro2-capex-hero__container {
    display: block !important;
    padding-inline: 20px !important;
  }
  .pro2-capex-hero__copy {
    display: block !important;
    /* Le copy reste en flow normal, le badge flotté le laisse
       enrouler le texte autour. */
  }

  /* Badge "0€ d'investissement" : floated right */
  .pro2-capex-badge {
    position: static !important;
    float: right !important;
    width: clamp(96px, 26vw, 116px) !important;
    height: clamp(96px, 26vw, 116px) !important;
    margin: 0 0 12px 16px !important;
    padding: 10px !important;
    box-sizing: border-box;
    shape-outside: circle(50%);
  }
  .pro2-capex-badge__num {
    font-size: clamp(24px, 6.5vw, 30px) !important;
    line-height: 1 !important;
  }
  .pro2-capex-badge__label {
    font-size: 7px !important;
    margin-top: 4px !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    max-width: 100%;
    word-break: keep-all;
    hyphens: none;
    text-align: center;
  }
}

/* Sous 768px : passage en LISTE compacte (icône à gauche, texte à droite)
   au lieu de 5 grosses tuiles empilées. Lecture rapide, scannable. */
@media (max-width: 767.98px) {
  .pro2-capex-pillars {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: none !important;
    gap: 0;
    padding: 8px 14px;
    border-radius: 18px;
  }

  .pro2-capex-pillar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 16px;
    text-align: left !important;
    padding: 14px 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .pro2-capex-pillar:last-child { border-bottom: 0; }
  /* Neutralise la barre verticale ::before des piliers desktop */
  .pro2-capex-pillar + .pro2-capex-pillar::before { display: none !important; }

  .pro2-capex-pillar__icon {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    flex: 0 0 32px;
    color: rgba(255, 255, 255, 0.85);
  }
  .pro2-capex-pillar__icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .pro2-capex-pillar p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.04em !important;
    text-align: left !important;
    /* Casser les <br> visuels par défaut sur mobile : on garde le flow naturel */
  }

  /* Casser les <br> des labels desktop sur mobile pour permettre un flow naturel */
  .pro2-capex-pillar p br { display: none; }
}


/* ============================================================
   11. PRO2 METHOD (4 étapes) — stack vertical mobile
   ============================================================ */
@media (max-width: 1023.98px) {
  .pro2-method {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .pro2-method__track {
    display: none;
  }
  .pro2-method__step {
    text-align: left;
  }
  .pro2-method__node {
    margin: 0 0 16px;
  }
}


/* ============================================================
   12. SOLEA (carousel home) — touch + lisibilité mobile
   ============================================================ */
@media (max-width: 767.98px) {
  .solea-mobile-card {
    padding: 20px 18px;
  }
  .solea-mobile-card__eyebrow {
    font-size: 12px !important;
  }
  .solea-mrental__flag {
    font-size: 12.5px !important;
  }
}


/* ============================================================
   13. CHRONO contact-pro — fix label "Ouvrées"
   ============================================================ */
@media (max-width: 767.98px) {
  .ctp-chrono__label {
    font-size: 12.5px !important;
  }
}


/* ============================================================
   14. UTILITAIRES — préventif anti-overflow global
   ------------------------------------------------------------
   Au cas où d'autres cas isolés subsistent, on garde un filet.
   ============================================================ */
@media (max-width: 1023.98px) {
  img,
  picture,
  video,
  svg {
    max-width: 100%;
    height: auto;
  }

  /* Tables responsives */
  table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
  }

  /* Pré-formatté */
  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }
}


/* ============================================================
   15. HERO CTAs et boutons globaux — full width mobile
   ============================================================ */
@media (max-width: 479.98px) {
  .btn-large,
  .pro-cta-link {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    justify-content: center;
  }
}


/* ============================================================
   16. PATCHS RÉSIDUELS — post-vérif
   ------------------------------------------------------------
   Corrections révélées par la 2e passe d'audit visuel.
   ============================================================ */

/* 16.1 — Audience switch : on laisse alignAudienceSwitch() (script.js)
   piloter top/transform en mesurant la pill réelle. Ici on règle juste
   la taille/padding visuels du switch. */
@media (max-width: 1023.98px) {
  .audience-switch {
    padding: 4px;
  }
  .audience-switch-option {
    min-height: 32px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .audience-switch-slider {
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
  }
}

@media (max-width: 479.98px) {
  .audience-switch-option {
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* 16.2 — stockage.html mobile :
   - Anciennes cartes overlay du hero photo : MASQUÉES sur mobile
   - Nouvelle section .storage-cards-mobile entre hero et benefits
   ============================================================ */
.storage-cards-mobile { display: none; }

@media (max-width: 1023.98px) {
  /* Cache l'overlay desktop sur la photo hero */
  .storage-hero__cards {
    display: none !important;
  }

  /* Affiche la nouvelle section dédiée — fond bleu nuit profond */
  .storage-cards-mobile {
    display: block !important;
    background: linear-gradient(180deg, #0a1f3a 0%, #0c1432 100%);
    padding: 56px 16px;
    color: #ffffff;
  }
  .storage-cards-mobile__inner {
    max-width: 520px;
    margin: 0 auto;
  }
  .storage-cards-mobile__eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #facc15;
    margin-bottom: 8px;
  }
  .storage-cards-mobile__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 6.5vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin: 0 0 22px;
  }
  .storage-cards-mobile__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .storage-cards-mobile__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      0 16px 36px -14px rgba(0, 0, 0, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
  }
  /* Accent latéral coloré (bleu pour virtuel, jaune pour physique) */
  .storage-cards-mobile__card::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 4px;
    border-radius: 0 4px 4px 0;
  }
  .storage-cards-mobile__card--virtuel::before  { background: #60a5fa; box-shadow: 0 0 14px rgba(96,165,250,0.6); }
  .storage-cards-mobile__card--physique::before { background: #facc15; box-shadow: 0 0 14px rgba(250,204,21,0.6); }

  .storage-cards-mobile__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    color: #ffffff;
  }
  .storage-cards-mobile__card--virtuel .storage-cards-mobile__icon {
    background: rgba(96, 165, 250, 0.18);
    border: 1px solid rgba(96, 165, 250, 0.55);
    color: #60a5fa;
  }
  .storage-cards-mobile__card--physique .storage-cards-mobile__icon {
    background: rgba(250, 204, 21, 0.18);
    border: 1px solid rgba(250, 204, 21, 0.55);
    color: #facc15;
  }
  .storage-cards-mobile__icon svg {
    width: 22px;
    height: 22px;
  }
  .storage-cards-mobile__card h3 {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
  }
  .storage-cards-mobile__card p {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
  }
}


/* ============================================================
   18. PRODUCTION.HTML — refonte cartes TRINA SOLAR sur mobile
   ------------------------------------------------------------
   Le desktop est intact. Sur mobile :
   - Section avec fond opaque navy (pas en overlay sur photo)
   - Titre + description bien visibles
   - Cartes glassmorphism FULL WIDTH stackées verticalement
   ============================================================ */
@media (max-width: 1023.98px) {
  /* Pas de bande blanche entre header pill et début du contenu :
     on force le body en navy sombre quand on est sur production.
     `:has()` est supporté iOS Safari 15.4+. Pour les anciens, voir
     fallback via html en-dessous. */
  body:has(#panel-product),
  body:has(#onduleur-product),
  html:has(#panel-product),
  html:has(#onduleur-product) {
    background: #0a1f3a !important;
  }

  /* Section panel-product : fond navy plein, padding généreux */
  #panel-product,
  #onduleur-product {
    background: linear-gradient(180deg, #0a1f3a 0%, #061427 100%) !important;
    min-height: auto !important;
    margin-top: 0 !important;
  }
  /* Page production : main n'a pas de padding-top blanc */
  body:has(#panel-product) main,
  body:has(#onduleur-product) main {
    background: #0a1f3a !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  #panel-product > .panel-container,
  #onduleur-product > .onduleur-container {
    padding: 64px 18px 56px !important;
    justify-content: flex-start;
  }

  /* En-tête section : badge + description bien centré */
  #panel-product .section-header,
  #onduleur-product .section-header {
    text-align: center;
    margin-bottom: 24px;
  }
  /* Le badge titre "Les Panneaux : TRINA SOLAR" / "Les Onduleurs :
     APSystems" sur mobile : pill bien visible, fond opaque navy
     + accent jaune, texte gras blanc. */
  #panel-product .section-badge-page,
  #onduleur-product .section-badge-page {
    display: inline-block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 10px 20px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(12, 22, 50, 0.95), rgba(7, 16, 38, 0.95)) !important;
    border: 1.5px solid #facc15 !important;
    border-radius: 999px !important;
    margin: 0 auto 18px !important;
    box-shadow:
      0 6px 20px -6px rgba(250, 204, 21, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  /* Cards : stack vertical, full width, glassmorphism propre */
  .panel-cards,
  #panel-product .panel-cards,
  #onduleur-product .panel-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 24px 0 16px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
  }
  .panel-card,
  #panel-product .panel-card,
  #onduleur-product .panel-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 22px 22px !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 12px !important;
  }

  /* Titres cartes : OUTRE-PASSE le bandeau opaque h3 qui prend toute
     la largeur en desktop. Sur mobile on garde un titre simple. */
  .panel-card h3 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
    text-align: left !important;
    border-radius: 0 !important;
    position: relative !important;
  }
  .panel-card h3::before,
  .panel-card h3::after {
    display: none !important;
  }
  .panel-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.85) !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .panel-card img {
    max-width: 120px !important;
    height: auto !important;
    margin-top: 6px !important;
    align-self: flex-start !important;
    filter: brightness(0) invert(1);
    opacity: 0.85;
  }

  /* Liserets latéraux des cartes : conservés (couleurs CAPEO) */
  .panel-card::before {
    top: 18px !important;
    bottom: 18px !important;
  }

  /* Cards-bottom (Robustes / Ecologiques / Maintenance) :
     même traitement stack vertical full width */
  .panel-cards-bottom,
  #panel-product .panel-cards-bottom,
  #onduleur-product .panel-cards-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 12px 0 0 !important;
  }
  .panel-card-bottom {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    padding: 18px 20px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
  }
  .panel-card-bottom h3 {
    font-size: 15px !important;
    color: #facc15 !important;
    margin: 0 0 6px !important;
    background: transparent !important;
    padding: 0 !important;
    text-align: left !important;
  }
  .panel-card-bottom p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: rgba(255,255,255,0.8) !important;
    text-align: left !important;
    margin: 0 !important;
  }
}


/* 16.3 — Hero titles globaux : clamp pour éviter overflow */
@media (max-width: 1023.98px) {
  .hero-title,
  .page-hero h1,
  .page-hero__title {
    font-size: clamp(28px, 6.2vw, 56px);
    line-height: 1.1;
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* 16.4 — section-description : forcer stack vertical, neutraliser
   marquee, retirer les masks/duplicats, garantir un texte LISIBLE */
@media (max-width: 1023.98px) {
  .section-description,
  p.section-description,
  .section-description.preconisation-intro {
    display: block !important;
    text-align: center !important;
    max-width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box;
    /* Pas de fond translucide qui rendait le texte gris : on force
       un fond opaque + une couleur blanche solide. */
    background: rgba(7, 16, 38, 0.72) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
  }

  /* La variante marquee : on retire le mask de fondu (sinon texte fade)
     et les bordures inutiles. */
  .product .section-description--marquee {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: rgba(7, 16, 38, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    margin: 16px !important;
    padding: 14px 16px !important;
  }

  /* Neutralise totalement le marquee/track horizontal */
  .section-description__track {
    display: block !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100%;
    animation: none !important;
    white-space: normal !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  /* MASQUE les copies aria-hidden — sinon la phrase apparaît 2 fois */
  .section-description__item[aria-hidden="true"],
  .section-description__sep[aria-hidden="true"] {
    display: none !important;
  }

  /* Premier item visible : block, plein largeur */
  .section-description__item {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  /* Séparateurs ✦ masqués (déjà aria-hidden donc cohérent) */
  .section-description__sep {
    display: none !important;
  }
}

/* 16.5 — Agriculture : span.underline du H1 doit retourner à la ligne
   (battre pro-premium.css qui force nowrap) */
@media (max-width: 1023.98px) {
  .pro2-hero h1 .underline,
  .pro2-hero-sticky h1 .underline,
  h1 .underline {
    display: inline !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }
}

/* 16.6 — pro.html : .pro2-case__stat strong débord léger
   (battre le <style> inline de pro.html avec !important).
   nbsp ajoutés dans le HTML pour "1 200 kWc" → reste insécable. */
@media (max-width: 767.98px) {
  /* Sur mobile : 1 colonne au lieu de 3 — les nombres ne se serrent plus */
  .pro2-case__stats,
  .pro2-case__metrics {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pro2-case__stat,
  .pro2-case__metric {
    min-width: 0 !important;
    text-align: left !important;
  }
  .pro2-case__stat strong,
  .pro2-case__metric strong {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    line-height: 1.1 !important;
  }
}

/* À partir de 480px on peut remettre 3 colonnes (les nombres tiennent) */
@media (min-width: 480px) and (max-width: 767.98px) {
  .pro2-case__stats,
  .pro2-case__metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .pro2-case__stat,
  .pro2-case__metric {
    text-align: center !important;
  }
  .pro2-case__stat strong,
  .pro2-case__metric strong {
    font-size: clamp(18px, 4.5vw, 24px) !important;
  }
}

/* 16.7 — Hero titles globaux (.hero h1) : clamp aussi sur particulier */
@media (max-width: 1023.98px) {
  .hero h1,
  .hero__title,
  section h1 {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}


/* ============================================================
   16.8 — SOLEA mobile card : décalage photo gauche + plein écran
   ------------------------------------------------------------
   Photo `offresolmob.webp` ancrée à GAUCHE (0%) pour révéler
   complètement le sujet sur le côté gauche. Section forcée à
   100dvh pour garantir que la photo couvre toute la viewport
   même quand la barre d'adresse Safari iOS se rétracte (sinon
   trou en bas du photo).
   ============================================================ */
@media (max-width: 1023.98px) {
  .solea-mobile-card__top {
    /* Le sujet (couple) est sur le côté DROIT de la photo source.
       Pour le faire apparaître dans la viewport, décalé vers la gauche
       du champ visible, on aligne l'image à DROITE (100%) → la fenêtre
       de crop garde la partie droite (où est le couple) et coupe la
       partie gauche (trees + halo). */
    /* On retire les gradients navy (radial top-left + linear bottom)
       qui créaient des "bords bleus" autour de la photo : photo brute,
       edge-to-edge, sans overlay. */
    background-image: url('assets/mobile/offresolmob.webp?v=img20260606a') !important;
    background-position: 100% bottom !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    /* Plein écran garanti : 100dvh = viewport visible courante,
       fallback 100svh si dvh non supporté. */
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
}


/* ============================================================
   18. NOS OBJECTIFS — refonte mobile (carrousel "Particulier")
   ------------------------------------------------------------
   Le mockup demande : titre + trait jaune, sous-titre, 3 cartes
   glassmorphism (icône colorée à gauche, texte, chevron à droite),
   puis bloc "Engagés à vos côtés" avec maison.
   La version desktop reste inchangée (.objectifs-desktop visible
   ≥1024px ; .objectifs-mobile visible <1024px).
   ============================================================ */

/* Toggle visibilité */
.objectifs-mobile { display: none; }
@media (max-width: 1023.98px) {
  .objectifs-desktop { display: none !important; }
  .objectifs-mobile  { display: flex !important; }
}

@media (max-width: 1023.98px) {
  /* Section globale en mode mobile : suppression du align-flex-end
     et de la hauteur fixe 100vh — la section grandit avec le contenu. */
  section.objectifs {
    height: auto !important;
    min-height: 100svh;
    justify-content: flex-start !important;
    padding: 86px 18px 40px !important;
    background-image:
      linear-gradient(180deg, rgba(8,18,42,0.78) 0%, rgba(8,18,42,0.88) 60%, rgba(8,18,42,0.95) 100%),
      url('assets/nos-objectifs.webp?v=img20260606a') !important;
    background-attachment: scroll !important;
  }

  /* Le voile ::before assombrissait jusqu'à 0.82 sur mobile et passait
     PAR DESSUS le contenu (z-index: 1) → bloc objectifs-mobile noyé.
     On le neutralise (le gradient sur section.objectifs ci-dessus
     fait déjà le travail de fond). */
  section.objectifs::before {
    background: transparent !important;
    display: none !important;
  }

  .objectifs-mobile {
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    color: #ffffff;
    position: relative;
    z-index: 5;
  }

  /* HEADER */
  .objectifs-mobile__head { margin-bottom: 4px; }
  .objectifs-mobile__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(34px, 9vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0;
    color: #ffffff !important;
    /* Forcer opacité au cas où animate-on-scroll affecte le parent */
    opacity: 1 !important;
    transform: none !important;
  }
  .objectifs-mobile__rule {
    display: block;
    width: 60px;
    height: 4px;
    background: #facc15;
    border-radius: 4px;
    margin: 14px 0 18px;
  }
  .objectifs-mobile__subtitle {
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff !important;
    margin: 0;
    max-width: 380px;
    opacity: 1 !important;
  }

  /* Force opacité sur tout le bloc — anti-animate-on-scroll bug */
  .objectifs-mobile,
  .objectifs-mobile * {
    opacity: 1 !important;
  }
  /* Sauf les éléments décoratifs avec opacité voulue */
  .objectifs-mobile__icon svg {
    opacity: 1 !important;
  }

  /* CARDS */
  .objectifs-mobile__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
  }
  .objectifs-mobile__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 14px 18px 22px;
    border-radius: 18px;
    background: rgba(13, 22, 48, 0.88);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow:
      0 14px 32px -10px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.06);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
  }
  /* Bordure latérale colorée gauche */
  .objectifs-mobile__card::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 4px;
    border-radius: 0 4px 4px 0;
  }
  .objectifs-mobile__card--yellow::before { background: #facc15; box-shadow: 0 0 16px rgba(250,204,21,0.6); }
  .objectifs-mobile__card--green::before  { background: #4ade80; box-shadow: 0 0 16px rgba(74,222,128,0.6); }
  .objectifs-mobile__card--blue::before   { background: #60a5fa; box-shadow: 0 0 16px rgba(96,165,250,0.6); }

  /* ICONE — cercle plein avec halo coloré marqué */
  .objectifs-mobile__icon {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
  }
  .objectifs-mobile__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
  }
  .objectifs-mobile__card--yellow .objectifs-mobile__icon {
    background: radial-gradient(circle, rgba(250,204,21,0.40) 0%, rgba(250,204,21,0.10) 60%, transparent 100%);
    box-shadow: 0 0 28px rgba(250,204,21,0.45);
  }
  .objectifs-mobile__card--green .objectifs-mobile__icon {
    background: radial-gradient(circle, rgba(74,222,128,0.40) 0%, rgba(74,222,128,0.10) 60%, transparent 100%);
    box-shadow: 0 0 28px rgba(74,222,128,0.45);
  }
  .objectifs-mobile__card--blue .objectifs-mobile__icon {
    background: radial-gradient(circle, rgba(96,165,250,0.40) 0%, rgba(96,165,250,0.10) 60%, transparent 100%);
    box-shadow: 0 0 28px rgba(96,165,250,0.45);
  }

  /* TEXTE */
  .objectifs-mobile__body {
    flex: 1;
    min-width: 0;
  }
  .objectifs-mobile__body h3 {
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff !important;
    letter-spacing: 0.005em;
  }
  .objectifs-mobile__body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,0.92) !important;
  }

  /* CHEVRON — masqué (cartes non cliquables) */
  .objectifs-mobile__chevron {
    display: none !important;
  }

  /* FOOTER "Engagés à vos côtés" */
  .objectifs-mobile__footer {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
  }
  .objectifs-mobile__shield {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(74, 222, 128, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
  }
  .objectifs-mobile__shield svg {
    width: 22px;
    height: 22px;
  }
  .objectifs-mobile__footer-text { flex: 1; min-width: 0; }
  .objectifs-mobile__footer-text h4 {
    margin: 0 0 2px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
  }
  .objectifs-mobile__footer-text p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255,255,255,0.7);
  }
  .objectifs-mobile__house {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
  .objectifs-mobile__house svg {
    width: 100%;
    height: 100%;
  }
}


/* ============================================================
   19. TRIO CAROUSEL — flèches au bas du carrousel sur mobile
   ------------------------------------------------------------
   Avant : top: 50% (milieu) → masquaient le contenu et étaient
   trop centrales. Demandé : flèches en bas, esthétique glass
   identique aux dots.
   ============================================================ */
@media (max-width: 1023.98px) {
  .trio-carousel .trio-nav {
    /* On ramène les flèches au bas du slide, au même niveau
       que les dots, mais aux extrémités gauche/droite. */
    top: auto !important;
    bottom: 18px !important;
    transform: none !important;
    width: 40px !important;
    height: 40px !important;
    /* Glass marqué — même langage que .trio-dots */
    background: rgba(255, 255, 255, 0.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(33, 48, 94, 0.10) !important;
    box-shadow: 0 10px 30px -10px rgba(33, 48, 94, 0.30) !important;
  }
  .trio-carousel .trio-prev { left: 12px !important; }
  .trio-carousel .trio-next { right: 12px !important; }
  .trio-carousel .trio-nav svg { width: 18px !important; height: 18px !important; }

  /* Au hover/active on neutralise le translateY(-50%) hover desktop */
  .trio-carousel .trio-nav:hover {
    transform: scale(1.06) !important;
  }
}


/* ============================================================
   17. HERO PRO MOBILE — refonte HYBRIDE (refonte 2026-06-27)
   ------------------------------------------------------------
   Approche : photo en arrière-plan STICKY, contenu en flow normal
   par-dessus. Pas de clipping, transition jour↔nuit conservée.
     - .pro2-hero : tall enough (200vh) → scroll = progress
     - .pro2-hero-sticky : juste un wrapper en flow normal
     - .storage-daynight-bg : position sticky → photo pinnée à 100svh
     - Contenu (H1, lead, CTA, aside, KPIs) : z-index supérieur,
       scroll normal au-dessus du fond pinné
   Le JS handleDayNightScroll() pilote l'opacité de #pro-night-img
   au fil du scroll, sans dépendre du sticky du wrapper.
   ============================================================ */
@media (max-width: 1023.98px) {
  /* Annule l'animation CSS loop : c'est le JS qui pilote */
  html[data-audience="pro"] .pro2-hero #pro-night-img,
  html[data-audience="pro"] .pro2-hero #pro-day-img,
  html[data-audience="pro"] .pro2-hero #night-img,
  html[data-audience="pro"] .pro2-hero #day-img,
  html[data-audience="pro"] .pro2-hero #night-sparkles {
    animation: none !important;
    transition: opacity 250ms ease, filter 250ms ease !important;
  }

  /* Conteneur outer : assez haut pour scroll, contenu PEUT déborder */
  html[data-audience="pro"] .pro2-hero {
    height: auto !important;
    min-height: 200vh !important;
    overflow: visible !important;
    position: relative;
  }

  /* Wrapper inner : flow normal, plus de sticky / overflow:hidden
     qui clippait l'aside et les KPIs. Padding-top remis à 0 pour
     que la photo de fond (sticky) parte du tout début et couvre
     la zone sous le header (sinon bande navy visible). */
  html[data-audience="pro"] .pro2-hero-sticky {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* On compense le padding-top retiré ci-dessus en l'appliquant au
     contenu (container interne) pour qu'il reste sous le header. */
  html[data-audience="pro"] .pro2-hero .pro2-container {
    padding-top: clamp(95px, 11vh, 130px) !important;
  }

  /* FOND PHOTO STICKY : le pro2-hero-sticky était sticky avant,
     maintenant c'est le storage-daynight-bg qui prend ce rôle.
     Il reste pinné en haut du viewport pendant qu'on scrolle. */
  html[data-audience="pro"] .pro2-hero .storage-daynight-bg {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    z-index: 0 !important;
    margin-bottom: -100svh !important; /* annule la hauteur réservée pour qu'on n'ait pas un trou en bas */
  }

  /* Aligne les deux photos jour/nuit sur le MÊME cadrage : on les
     ancre au sommet pour que les visages des personnages restent
     à la même hauteur lors du fondu jour↔nuit. Sans ça, comme les
     deux fichiers sources n'ont pas exactement le même rapport, le
     recadrage `cover` produit deux compositions différentes et le
     fondu est sautillant. */
  html[data-audience="pro"] .pro2-hero .storage-daynight-img--day,
  html[data-audience="pro"] .pro2-hero .storage-daynight-img--night,
  html[data-audience="pro"] .pro2-hero #pro-day-img,
  html[data-audience="pro"] .pro2-hero #pro-night-img {
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }

  /* L'overlay (gradient) suit la photo : sticky aussi pour rester
     par-dessus la photo, mais sous le contenu */
  html[data-audience="pro"] .pro2-hero .pro2-hero-overlay {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    z-index: 1 !important;
    margin-bottom: -100svh !important;
    pointer-events: none;
  }

  /* Contenu (H1, lead, CTAs, aside, KPIs) : passe AU-DESSUS du fond */
  html[data-audience="pro"] .pro2-hero .pro2-container,
  html[data-audience="pro"] .pro2-hero .pro2-kpis,
  html[data-audience="pro"] .pro2-hero .pro2-hero__disclaimer {
    position: relative;
    z-index: 5;
  }
}