/* ============================================================
   RESET MINIMAL & BASE
============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--cms-font, system-ui, sans-serif);
  background: var(--cms-bg-layer, #020617);
  color: var(--cms-text-color, #e5e7eb);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   LIENS
============================================================ */

a {
  color: var(--cms-link-color, #a5b4fc);
  text-decoration: none;
  transition: opacity .2s ease;
}

a:hover {
  opacity: .85;
}

/* ============================================================
   HEADER / NAVIGATION
============================================================ */

.cms-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cms-hf-layer, rgba(2,6,23,.85));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  transition:
    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}

.cms-header.is-hidden {
  transform: translateY(-100%);
}

.cms-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cms-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--cms-site-title-color, #fff);
  text-decoration: none;
}
.cms-brand:hover{ opacity: .9; }

.cms-brand img {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.cms-menu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cms-menu a {
  padding: 8px 14px;
  border-radius: 14px;

  background: var(--cms-button-layer);
  color: var(--cms-button-text-color);

  font-size: 14px;
  font-weight: 600;

  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

.preview-burger-btn{
  display: none !important;
}



/* ============================================================
   LAYOUT GÉNÉRAL
============================================================ */

.preview-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 18px 60px;
  flex: 1 0 auto;
}

/* ============================================================
   HERO
============================================================ */

.cms-hero {
  position: relative;
  padding: 28px 22px;
  margin-bottom: 36px;
  border-radius: var(--cms-hero-radius, 18px);
  background:
    var(--cms-hero-layer, rgba(15,23,42,1)),
    var(--hero-bg-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
    
     width: 90vw;
  max-width: none;
  margin-left: auto;
  margin-right: auto;;
}

.cms-hero h1,
.cms-hero h2,
.cms-hero h3 {
  margin: 0 0 12px;
  color: var(--cms-title-color, #e5e7eb);
  font-weight: 800;
  letter-spacing: -.02em;
}

.cms-hero p {
  max-width: 720px;
  margin: 0 0 20px;
  color: var(--cms-subtitle-color, #cbd5f5);
  font-size: 17px;
   margin-left: auto;
  margin-right: auto;
}

.cms-hero > *:not(.cms-hero-media){
  position: relative;
  z-index: 2;
}

.cms-btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--cms-button-layer, #6366f1);
  color: var(--cms-button-text-color, #fff);
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.cms-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

/* IMAGE AU-DESSUS DU BACKGROUND */
.cms-hero-media{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cms-hero-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ============================================================
   HERO — MICRO BANDEAU MOBILE
============================================================ */

@media (max-width: 768px) {

  .cms-hero {
    width: 92vw;
    padding: 5px 8px; 
    margin: 0 auto 8px;          
    
  }

  .cms-hero h1,
  .cms-hero h2,
  .cms-hero h3 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 🔥 MAX 2 LIGNES */
    overflow: hidden;
  }

  .cms-hero p {
    display: block;
    font-size: 11px;
    line-height: 1.25;
    margin-top: 4px;

    max-width: 90%;

    opacity: .9;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .cms-hero h1.cms-title {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  .cms-hero h2.cms-title {
    font-size: 17px;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  .cms-hero h3.cms-title {
    font-size: 15px;
    line-height: 1.1;
    margin-bottom: 2px;
  }

  .cms-btn {
    padding: 3px 4px;
    font-size: 10.5px;
    border-radius: 7px;
    margin-top: 0px;
  }

  
}


/* ============================================================
   TITRES
============================================================ */

.cms-title {
  margin: 30px 0 14px;
  color: var(--cms-title-color, #e5e7eb);
  font-weight: 700;
  letter-spacing: -.015em;
}

h1.cms-title { font-size: 36px; }
h2.cms-title { font-size: 28px; }
h3.cms-title { font-size: 22px; }

/* ============================================================
   TEXTE
============================================================ */

.cms-text {
  margin: 14px 0 22px;
  color: var(--cms-text-color, #e5e7eb);
  font-size: 16px;
  white-space: pre-wrap;
}

/* ============================================================
   IMAGE SIMPLE
============================================================ */

.cms-image {
  margin: 22px 0;
}

.cms-image img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
}

/* ============================================================
   SÉPARATEUR
============================================================ */

.cms-separator {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  margin: 36px 0;
}

/* ==========================================================
   CONTACT BLOCK
========================================================== */

.cms-contact{
  margin: 36px auto;
  max-width: 700px;
}

.cms-contact-card{
  padding: 26px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.cms-contact-title{
  font-size: 22px;
  font-weight: 700;
  color: var(--cms-title-color);
  margin-bottom: 6px;
}

.cms-contact-subtitle{
  color: var(--cms-subtitle-color);
  margin-bottom: 18px;
  line-height: 1.5;
}

.cms-contact-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.cms-contact-item a{
  color: var(--cms-link-color);
}

.cms-contact-cta{
  margin-top: 10px;
}

/* ============================================================
   FOOTER
============================================================ */

.cms-footer {
  margin-top: 60px;
  padding: 22px 18px;
  position: sticky;
  z-index: 100;
  bottom: 0;
  text-align: center;
  color: var(--cms-site-title-color, #fff);
  background: var(--cms-hf-layer, rgba(2,6,23,.85));
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
  flex-shrink: 0;
  transition:
    transform .35s ease,
    opacity .35s ease;
}

.cms-footer.is-hidden {
  transform: translateY(100%);
  opacity: 0;
}


/* ============================================================
   RESPONSIVE
============================================================ */

/* Base: meilleure gestion viewport mobile (iOS/Android) */
html, body { height: auto; }
body { min-height: 100dvh; }

/* Variables par défaut */
:root{
  --m-header-h: 68px;
  --m-footer-h: 64px;
}

/* iPhone notch */
@supports (padding: max(0px)){
  :root{
    --safe-top: env(safe-area-inset-top);
    --safe-bot: env(safe-area-inset-bottom);
  }
}
:root{
  --safe-top: 0px;
  --safe-bot: 0px;
}

@media (max-width: 768px) {

  .cms-header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .cms-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  /* ✅ Le contenu ne passe jamais sous header/footer */
  .preview-page{
    padding-top: calc(var(--m-header-h) + var(--safe-top) + 16px);
    padding-bottom: calc(var(--m-footer-h) + var(--safe-bot) + 16px);
  }

  /* Bonus: quand tu cliques un lien #ancre */
  html{
    scroll-padding-top: calc(var(--m-header-h) + var(--safe-top) + 10px);
  }

/* menu mobile off-canvas */
.cms-menu{
    position: fixed;
    top: 64px;               /* ✅ SOUS le header */
    left: 0;
    right: 0;

    background: var(--cms-hf-layer, rgba(2,6,23,.96));
    backdrop-filter: blur(14px);

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 16px 18px 20px;

    /* ✅ l’illusion “sort de dessous” */
    transform: translateY(-110%);  /* cache au-dessus de sa zone */
    opacity: 0;
    pointer-events: none;

    transition: transform .35s ease, opacity .25s ease;
    z-index: 90;              /* sous header (100) */
  }

  .cms-menu.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .cms-menu a{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center; /* ✅ texte centré */
    text-align: center;
  }

  

 /* ==========================================================
   BURGER MORPHING
========================================================== */

.preview-burger-btn{
  display: flex !important;
  width: 42px;
  height: 42px;

  background: transparent;
  border: none;
  cursor: pointer;

  position: relative;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* lignes */
.preview-burger-btn span{
  position: absolute;
  width: 22px;
  height: 2px;
  background: var(--cms-button-layer);
  border-radius: 2px;

  transition:
    transform .3s ease,
    opacity .2s ease;
}

/* position initiale */
.preview-burger-btn span:nth-child(1){
  transform: translateY(-7px);
}
.preview-burger-btn span:nth-child(2){
  transform: translateY(0);
}
.preview-burger-btn span:nth-child(3){
  transform: translateY(7px);
}

/* état ouvert → croix */
.preview-burger-btn.is-open span:nth-child(1){
  transform: rotate(45deg);
}
.preview-burger-btn.is-open span:nth-child(2){
  opacity: 0;
}
.preview-burger-btn.is-open span:nth-child(3){
  transform: rotate(-45deg);
}

}










/* ==========================================================
   CMS GALLERY CAROUSEL (SWIPER) — 1 slide / image
   (100% indépendant de la GRID)
========================================================== */

.cms-gallery-carousel{
  margin: 22px auto;
  position: relative;
  overflow: hidden;
}

/* Taille “premium” desktop */
@media (min-width: 992px){
  .cms-gallery-carousel{
    max-width: 900px;
  }
}

/* Le conteneur swiper = viewport */
.cms-gallery-carousel .cms-carousel-swiper{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  display: block;
  width: 100%;
}

/* Wrapper (Swiper gère le transform) */
.cms-gallery-carousel .swiper-wrapper{
  will-change: transform;
}

/* Slide = 1 image plein format */
.cms-gallery-carousel .swiper-slide{
  width: 100%;
  margin: 0;
  position: relative;

  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Image recadrée propre */
.cms-gallery-carousel .cms-carousel-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Caption overlay */
.cms-gallery-carousel .cms-carousel-caption{
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  max-width: 900px;
  padding: 6px 14px;

  font-size: 18px;
  text-align: center;
  color: var(--cms-title-color, #fff);

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0)
  );

  border-radius: 12px 12px 0 0;
  pointer-events: none;
  opacity: .95;
  z-index: 3;
}

/* ==========================================================
   Pagination (dots)
========================================================== */

.cms-gallery-carousel .swiper-pagination{
  position: absolute !important;
  left: 50% !important;
  bottom: 12px !important;
  transform: translateX(-50%) !important;

  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.cms-gallery-carousel .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cms-title-color, #fff);
  opacity: .35;
  margin: 0 3px !important;
  transition: opacity .2s ease, transform .2s ease;
}

.cms-gallery-carousel .swiper-pagination-bullet-active{
  opacity: 1;
  transform: scale(1.15);
}

/* ==========================================================
   Flèches carousel
========================================================== */

/* Neutralise l’icône Swiper */
.cms-gallery-carousel .swiper-button-prev::after,
.cms-gallery-carousel .swiper-button-next::after{
  content: "" !important;
}

.cms-gallery-carousel .swiper-button-prev,
.cms-gallery-carousel .swiper-button-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  background: transparent !important;
  border: none !important;

  color: var(--cms-title-color, #fff);
  font-size: 58px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  opacity: .9;
  text-shadow:
    0 2px 4px rgba(0,0,0,.35),
    0 4px 10px rgba(0,0,0,.25);

  transition: opacity .25s ease, transform .25s ease;
}

.cms-gallery-carousel .swiper-button-prev{
  left: 10px;
}
.cms-gallery-carousel .swiper-button-next{
  right: 10px;
}

.cms-gallery-carousel .swiper-button-prev::before{
  content: "‹";
}
.cms-gallery-carousel .swiper-button-next::before{
  content: "›";
}

.cms-gallery-carousel .swiper-button-prev:hover,
.cms-gallery-carousel .swiper-button-next:hover{
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 768px){

  .cms-gallery-carousel{
    margin: 16px auto;
    max-width: 100%;
  }

  .cms-gallery-carousel .cms-carousel-swiper{
    width: 100%;
    max-width: 92vw;
    margin: 0 auto;
  }

  .cms-gallery-carousel .swiper-slide{
    aspect-ratio: 16 / 9;
  }

  .cms-gallery-carousel .cms-carousel-caption{
    font-size: 12px;
    width: 92%;
  }

  .cms-gallery-carousel .swiper-button-prev,
  .cms-gallery-carousel .swiper-button-next{
    font-size: 38px;
  }

  .cms-gallery-carousel .swiper-pagination{
    bottom: 10px !important;
  }
}


/* ==========================================================
   CMS GALLERY GRID — PUBLIC
   Grille élégante, centrée, responsive
========================================================== */

.cms-gallery-grid{
  width: 100%;
  margin: 32px auto;
}

/* wrapper sécurité */
.cms-gallery-grid .gallery-grid-wrap{
  width: 100%;
  overflow: hidden;
}

/* ==========================================================
   GRILLE DESKTOP
========================================================== */

.cms-gallery-grid .gallery-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* 🔥 centrage horizontal */
  align-items: flex-start;
  gap: var(--g-gap, 14px);
}

/* ==========================================================
   ITEMS
========================================================== */

.cms-gallery-grid .gallery-item{
  flex: 0 0 auto;
  position: relative;

  border-radius: 14px;
  overflow: hidden;

  background: rgba(0,0,0,.25);
  box-shadow:
    0 4px 14px rgba(0,0,0,.25);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

/* hover subtil */
.cms-gallery-grid .gallery-item:hover{
  transform: translateY(-2px);
  box-shadow:
    0 8px 26px rgba(0,0,0,.35);
}

/* ==========================================================
   TAILLES (data-size)
========================================================== */

.cms-gallery-grid .gallery-item[data-size="1"]{ width: 180px; }
.cms-gallery-grid .gallery-item[data-size="2"]{ width: 260px; }
.cms-gallery-grid .gallery-item[data-size="3"]{ width: 360px; }
.cms-gallery-grid .gallery-item[data-size="4"]{ width: 520px; }
.cms-gallery-grid .gallery-item[data-size="5"]{ width: 680px; }

/* ==========================================================
   RATIOS (indépendants)
========================================================== */

.cms-gallery-grid .gallery-item[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }
.cms-gallery-grid .gallery-item[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.cms-gallery-grid .gallery-item[data-ratio="3/4"]  { aspect-ratio: 3 / 4; }
.cms-gallery-grid .gallery-item[data-ratio="auto"] { aspect-ratio: auto; }

/* ==========================================================
   IMAGE
========================================================== */

.cms-gallery-grid .gallery-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ==========================================================
   CAPTION (si activée)
========================================================== */

.cms-gallery-grid figcaption{
  margin-top: 6px;
  font-size: 13px;
  opacity: .75;
  text-align: center;
}

/* ==========================================================
   CAS 1 SEULE IMAGE
========================================================== */

.cms-gallery-grid
.gallery-grid:has(.gallery-item:only-child){
  justify-content: center;
}

.cms-gallery-grid
.gallery-grid:has(.gallery-item:only-child)
.gallery-item{
  max-width: 100%;
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px){

  .cms-gallery-grid{
    margin: 20px auto;
    --g-gap: 10px;
  }

  /* passage en grid contrôlée */
  .cms-gallery-grid .gallery-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
    justify-content: center;
    gap: var(--g-gap);
  }

  .cms-gallery-grid .gallery-item{
    justify-self: center;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
  }

  /* mapping tailles → colonnes */
  .cms-gallery-grid .gallery-item[data-size="1"]{ grid-column: span 3; }
  .cms-gallery-grid .gallery-item[data-size="2"]{ grid-column: span 4; }
  .cms-gallery-grid .gallery-item[data-size="3"]{ grid-column: span 6; }
  .cms-gallery-grid .gallery-item[data-size="4"]{ grid-column: span 12; }
  .cms-gallery-grid .gallery-item[data-size="5"]{ grid-column: span 12; }

  /* 1 seule image mobile */
  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item{
    grid-column: 1 / -1;
    width: auto;
    max-width: 92vw;
  }

  /* tailles mobiles si 1 image */
  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item[data-size="1"]{ width: 160px; }

  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item[data-size="2"]{ width: 220px; }

  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item[data-size="3"]{ width: 300px; }

  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item[data-size="4"]{ width: 380px; }

  .cms-gallery-grid
  .gallery-grid:has(.gallery-item:only-child)
  .gallery-item[data-size="5"]{ width: 460px; }
}

/* ==========================================================
   FAQ — PUBLIC
========================================================== */

.cms-faq{
  max-width: 820px;
  margin: 36px auto;
}

/* item */
.cms-faq .faq-item{
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 0 4px;
  transition: background .25s ease;
}

html[data-theme="light"] .cms-faq .faq-item{
  border-color: rgba(15,23,42,0.15);
}

/* état ouvert */
.cms-faq .faq-item.open{
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
}

/* question */
.cms-faq .faq-question{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 18px 0;
  cursor: pointer;
  user-select: none;

  font-weight: 600;
  color: var(--cms-title-color);
  transition: color .2s ease;
}

.cms-faq .faq-question:hover{
  color: var(--accent, var(--cms-link-color));
}

/* icône + / × */
.cms-faq .faq-icon{
  font-size: 20px;
  line-height: 1;
  transition: transform .3s ease;
  flex-shrink: 0;
}

/* rotation quand ouvert */
.cms-faq .faq-item.open .faq-icon{
  transform: rotate(45deg);
}

/* réponse (animée par JS via height) */
.cms-faq .faq-answer{
  overflow: hidden;
  height: 0;
  transition: height .35s ease;
}

/* contenu interne */
.cms-faq .faq-answer-inner{
  padding: 0 0 18px;
  color: var(--cms-text-color);
  line-height: 1.6;
  font-size: 14px;
  opacity: 0.9;
}

/* ==========================================================
   TIMELINE — PUBLIC
========================================================== */



.cms-timeline{
  position: relative;
  max-width: 980px;
  margin: 60px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* ligne centrale */
.cms-timeline::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );
  transform: translateX(-50%);
}

/* étape */
.cms-timeline .timeline-step{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  align-items: flex-start;
}

/* alternance gauche / droite */
.cms-timeline .timeline-step:nth-child(odd) .timeline-content{
  grid-column: 1;
  text-align: right;
  justify-self: end;
}

.cms-timeline .timeline-step:nth-child(even) .timeline-content{
  grid-column: 3;
  text-align: left;
  justify-self: start;
}

/* point central */
.cms-timeline .timeline-index{
  grid-column: 2;
  width: 42px;
  height: 42px;
  border-radius: 999px;

  background: var(--cms-button-layer);
  color: var(--cms-button-text-color);

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: 14px;

  box-shadow:
    0 6px 18px rgba(0,0,0,.35),
    inset 0 0 0 2px rgba(255,255,255,.15);

  z-index: 2;
}

/* carte */
.cms-timeline .timeline-content{
  max-width: 380px;
  padding: 18px 20px;
  border-radius: 16px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);

  box-shadow:
    0 10px 26px rgba(0,0,0,.22);

  transition: transform .25s ease, box-shadow .25s ease;
}

.cms-timeline .timeline-content:hover{
  transform: translateY(-4px);
  box-shadow:
    0 16px 40px rgba(0,0,0,.35);
}

/* titres */
.cms-timeline .timeline-title{
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--cms-title-color);
  font-size: 16px;
}

/* texte */
.cms-timeline .timeline-text{
  font-size: 14px;
  line-height: 1.6;
  color: var(--cms-text-color);
  opacity: .9;
}

@media (max-width: 768px){

  .cms-timeline{
    gap: 28px;
    padding: 0 14px;
  }

  /* ligne à gauche */
  .cms-timeline::before{
    left: 22px;
    transform: none;
  }

  .cms-timeline .timeline-step{
    grid-template-columns: 42px 1fr;
    gap: 14px;
  }

  .cms-timeline .timeline-index{
    grid-column: 1;
  }

  .cms-timeline .timeline-content{
    grid-column: 2;
    max-width: 100%;
    text-align: left !important;
    justify-self: stretch;
  }
}


/* ==========================================================
   DOWNLOAD — PUBLIC
========================================================== */

.cms-download{
  max-width: 760px;
  margin: 42px auto;
  padding: 28px 26px;
  border-radius: 20px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );

  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);

  box-shadow:
    0 12px 32px rgba(0,0,0,.28);

  display: flex;
  flex-direction: column;
  gap: 12px;

  position: relative;
  overflow: hidden;
}

/* icône décorative */
.cms-download::before{
  content: "⬇";
  position: absolute;
  top: 18px;
  right: 18px;

  width: 44px;
  height: 44px;
  border-radius: 999px;

  background: var(--cms-button-layer);
  color: var(--cms-button-text-color);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 700;

  box-shadow:
    0 6px 16px rgba(0,0,0,.35);

  opacity: .95;
}

/* titre */
.cms-download h3{
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--cms-title-color);
  max-width: calc(100% - 56px);
}

/* description */
.cms-download p{
  margin: 0 0 10px;
  color: var(--cms-text-color);
  line-height: 1.6;
  opacity: .9;
  font-size: 15px;
}

/* bouton CTA */
.cms-download .cms-btn{
  align-self: flex-start;
  margin-top: 10px;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 999px;
  font-weight: 700;

  box-shadow:
    0 8px 22px rgba(0,0,0,.35);
}

.cms-download .cms-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 36px rgba(0,0,0,.45);
}

@media (max-width: 768px){

  .cms-download{
    margin: 28px auto;
    padding: 22px 20px;
  }

  .cms-download h3{
    font-size: 18px;
  }

  .cms-download p{
    font-size: 14px;
  }

  .cms-download::before{
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .cms-download .cms-btn{
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================
   MENU (CARTE) — PUBLIC
========================================================== */

.cms-menu-card{
  max-width: 860px;
  margin: 42px auto;
}

.cms-menu-card .menu-section{
  margin-bottom: 26px;
}

.cms-menu-card h3{
  margin-bottom: 10px;
  color: var(--cms-title-color);
}

.menu-item{
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}

.menu-item-line{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
}

.menu-item-price{
  white-space: nowrap;
  color: var(--cms-subtitle-color);
}

.menu-item-desc{
  font-size: 14px;
  opacity: .85;
  margin-top: 4px;
}

/* ==========================================================
   🛍️ PRODUITS AUTO — PUBLIC (CLEAN & PREMIUM)
========================================================== */

.cms-products-auto{
  margin: 48px auto;
  max-width: 1200px;
}

/* ================= GRID ================= */

.cms-products-auto .products-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
}

/* PETIT → 4 cartes par ligne */
.cms-products-auto.size-small .products-grid{
  grid-template-columns: repeat(4, 1fr);
}

/* MOYEN → 3 cartes par ligne */
.cms-products-auto.size-medium .products-grid{
  grid-template-columns: repeat(3, 1fr);
}

/* GRAND → 2 cartes par ligne */
.cms-products-auto.size-large .products-grid{
  grid-template-columns: repeat(2, 1fr);
}

/* ================= CARD ================= */

.cms-products-auto .product-card{
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;

  border-radius: 18px;
  overflow: hidden;

  background: var(--cms-hero-layer, rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);

  box-shadow: 0 10px 28px rgba(0,0,0,.30);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.cms-products-auto .product-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.25);
}

/* ================= IMAGE ================= */

.cms-products-auto .product-card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;

  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* ================= BODY (ICI LE PADDING !) ================= */

.cms-products-auto .product-body{
  padding: 20px 20px 22px;   /* 🔥 ESPACE RÉEL AUTOUR DU TEXTE */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ================= TITRE ================= */

.cms-products-auto .product-body h3{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cms-title-color);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================= PRIX ================= */

.cms-products-auto .product-price{
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--cms-title-color);
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* ancien prix barré */
.cms-products-auto .price-old{
  font-size: 13px;
  color: var(--cms-text-color);
  opacity: .55;
  text-decoration: line-through;
}

/* prix final */
.cms-products-auto .price-new{
  font-size: 15px;
  font-weight: 800;
  color: var(--cms-title-color);
}

.cms-products-auto .product-badge{
  position: absolute;
  top: 10px;
  left: 10px;

  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;

  background: var(--cms-button-layer);
  color: var(--cms-button-text-color);
  border-radius: 999px;
}

/* ================= BADGE ================= */

.cms-products-auto .product-badge{
  position: absolute;
  top: 10px;
  left: 10px;

  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;

  line-height: 1;
  z-index: 2;
}

.cms-products-auto .badge-discount{
  background: var(--cms-button-layer);
  color: var(--cms-button-text-color);
}

.cms-products-auto .badge-out{
  background: rgba(0,0,0,.75);
  color: #fff;
}

/* ================= BOUTON ================= */

.cms-products-auto .cms-btn{
  margin-top: 10px;
  align-self: flex-start;

  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
}

/* ================= MOBILE ================= */

@media (max-width: 768px){

  .cms-products-auto{
    margin: 28px auto;
  }

  .cms-products-auto .products-grid{
    gap: 12px;
  }

  .cms-products-auto .product-body{
    padding: 14px 14px 16px;
    gap: 6px;
  }

  .cms-products-auto .product-body h3{
    font-size: 13px;
  }

  .cms-products-auto .product-price{
    font-size: 13px;
  }

  .cms-products-auto .price-old{
    font-size: 11px;
  }
  .cms-products-auto .price-new{
    font-size: 13px;
  }

  .cms-products-auto .cms-btn{
    padding: 5px 12px;
    font-size: 11px;
  }
}

/* ==========================================================
   BLOG — PUBLIC
========================================================== */

.cms-blog{
  max-width: 1200px;
  margin: 48px auto;
}

.cms-blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.cms-blog-card{
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;

  /* 🎨 couche CMS (fallback si non définie) */
  background: var(--cms-hero-layer, rgba(255,255,255,.04));

  border: 1px solid rgba(255,255,255,.12);

  /* glass effect */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 28px rgba(0,0,0,.35);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.cms-blog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 46px rgba(0,0,0,.45);
  border-color: rgba(255,255,255,.25);
}

/* image */
.cms-blog-thumb{
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.cms-blog-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* body */
.cms-blog-body{
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cms-blog-body h3{
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--cms-title-color);
}

.cms-blog-body p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cms-text-color);
  opacity: .9;
}

.cms-blog-body h3,
.cms-blog-body p,
.cms-blog-link{
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
}

/* lien */
.cms-blog-link{
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  color: var(--cms-link-color);
}

.cms-blog-link:hover{
  opacity: .9;
}

@media (max-width: 768px){

  .cms-blog{
    margin: 26px auto;
  }

  /* 2 colonnes fixes + spacing propre */
  .cms-blog-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* card compacte */
  .cms-blog-card{
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.28);
  }

  /* thumb un peu moins haut pour gagner de la place */
  .cms-blog-thumb{
    aspect-ratio: 4 / 3;
  }

  .cms-blog-body{
    padding: 10px 10px 12px;
    gap: 6px;
  }

  .cms-blog-body h3{
    font-size: 13px;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* max 2 lignes */
    overflow: hidden;
  }

  .cms-blog-body p{
    font-size: 11px;
    line-height: 1.35;
    opacity: .88;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* extrait max 3 lignes */
    overflow: hidden;
  }

  .cms-blog-link{
    font-size: 11px;
  }
}

/* Option : très petits écrans -> 1 colonne (évite 2 cards trop serrées) */
@media (max-width: 360px){
  .cms-blog-grid{
    grid-template-columns: 1fr;
  }
}

/* ===============================
   AUTH ICON (SVG INLINE)
=============================== */

.cms-auth {
  position: absolute;
  right: 20px;
  display: flex;
  align-items: center;
}

.cms-auth-icon {
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  /* 🔥 couleur = boutons CMS */
  color: var(--cms-button-layer);

  text-decoration: none;
  border-radius: 50%;
  background: transparent;

  transition:
    background .2s ease,
    transform .15s ease,
    opacity .15s ease;
}

.cms-auth-icon svg {
  display: block;
}

/* Hover subtil (PAS bouton plein) */
.cms-auth-icon:hover {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
  opacity: .95;
}

/* ==========================================================
   HEADER MOBILE — FIX BURGER / LOGIN
========================================================== */

@media (max-width: 768px) {

  /* structure header */
  .cms-header-inner,
  .article-header-inner {
    justify-content: center;
  }

  /* burger à gauche */
  .preview-burger-btn {
    position: absolute;
    left: 14px;
    z-index: 1100;
  }

  /* login à droite */
  .cms-auth {
    position: absolute;
    right: 14px;
    z-index: 1100;
  }

  /* empêche chevauchement titre */
  .article-header-title,
  .cms-header-title {
    max-width: calc(100% - 140px); /* espace burger + login */
    text-align: center;
  }
  .cms-menu {
    z-index: 1000; /* sous header */
  }

  .cms-header,
  .article-header {
    z-index: 1100;
  }

}