body {
  background: #fff !important; /* fond blanc */
  color: #000 !important;      /* texte en noir */
  margin: 0;
  min-height: 100vh;
}

/* Viseur laser rouge (point) */
.laser-dot {
  position: fixed;
  width: 12px;                /* taille du point */
  height: 12px;
  background: #f00;           /* rouge vif */
  border-radius: 50%;         /* rond parfait */
  box-shadow: 0 0 8px #f00, 0 0 15px #f00; /* effet lumineux rouge */
  pointer-events: none;       /* ne bloque pas les clics */
  z-index: 99999;             /* au-dessus de tout */
  transform: translate(-50%, -50%);
}

.hero-text {
  animation: fadeInUp 1.2s ease-in-out;
}
@keyframes fadeInUp {
  0% {opacity:0; transform:translateY(30px);}
  100% {opacity:1; transform:translateY(0);}
}

/* 🌟 Barre d'action sticky (mobile) */
.cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  gap: 10px;
  padding: 10px;
  background: #111; /* couleur de fond */
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.3);
  justify-content: center;
}

/* Les boutons à l'intérieur */
.cta-sticky .wp-block-button__link {
  flex: 1;
  text-align: center;
  font-size: 16px;
  border-radius: 8px;
  padding: 12px 0;
  transition: all 0.3s ease;
}

/* Style du bouton Appeler */
.cta-sticky .wp-block-button:nth-child(1) .wp-block-button__link {
  background-color: #a72828; /* ton rouge */
  color: #fff;
}

/* Style du bouton Devis */
.cta-sticky .wp-block-button:nth-child(2) .wp-block-button__link {
  background-color: #fff;
  color: #a72828;
  border: 1px solid #a72828;
}

/* Hover (effet au toucher ou souris) */
.cta-sticky .wp-block-button__link:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Cache la barre sur desktop */
@media (min-width: 992px) {
  .cta-sticky {
    display: none;
  }
}
/* 🌟 Style des cartes de section (autour de tes carrousels) */
.reference-section {
  background: #f6f6f6;              /* Fond gris clair */
  border-radius: 16px;              /* Coins arrondis */
  padding: 40px 30px;               /* Espace intérieur */
  margin-bottom: 50px;              /* Espace entre les blocs */
  box-shadow: 0 10px 20px rgba(0,0,0,0.06); /* Ombre douce */
  transition: transform 0.3s ease;  /* Animation au survol */
}

/* Effet léger quand on passe la souris */
.reference-section:hover {
  transform: translateY(-6px);      /* Remonte un peu le bloc */
  box-shadow: 0 15px 25px rgba(0,0,0,0.1); /* Ombre un peu plus marquée */
}

/* 🌈 Barre de sommaire “Catégories” */
.ref-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 12px auto 20px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

/* Texte principal */
.ref-nav p {
  margin: 0;
  font-weight: 600;
  color: #111;
  text-align: center;
}

/* Boutons "chips" des catégories */
.ref-nav a[href^="#ref-"] {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  text-decoration: none;
  background: #fff;
  color: #222;
  line-height: 1;
  font-size: 15px;
  transition: all 0.2s ease;
}

/* Hover */
.ref-nav a[href^="#ref-"]:hover {
  border-color: #a72828;
  background: #a72828;
  color: #fff;
}

/* Défilement fluide */
html { scroll-behavior: smooth; }

/* Corrige la position d'arrivée si ton header est fixe */
[id^="ref-"] {
  scroll-margin-top: 110px; /* ajuste selon la hauteur de ton bandeau */
}
/* Mobile (placeholder propre) */
@media (max-width: 768px){
  /* styles mobiles ici si besoin */
}
}
.ref-nav { box-shadow: 0 3px 8px rgba(0,0,0,0.05); }

/* ——— PALETTE GLOBALE (si pas déjà fait) ——— */
:root{ --ink:#000; --paper:#fff; --accent:#c95548; }
html{ scroll-behavior:smooth; }

/* ——— SCOPE A-PROPOS ——— */
.about-scope .section{ padding:72px 16px; background:var(--paper); }
.about-scope .container{ max-width:1200px; margin:0 auto; }
.about-scope .grid-2{ display:grid; grid-template-columns:5fr 7fr; gap:40px; align-items:center; }
.about-scope .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.about-scope .grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* HERO plein écran */
.about-scope .hero-full{
  position:relative; min-height:82vh; display:grid; place-items:center;
  padding:100px 20px; color:#fff; text-align:center; overflow:hidden;
}
.about-scope .hero-full::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.55); }
.about-scope .hero-full > *{ position:relative; z-index:1; }
.about-scope .hero-full h1{ font-size:clamp(36px,6vw,64px); line-height:1.05; margin:0 0 12px; }
.about-scope .hero-full p{ max-width:780px; margin:0 auto 22px; color:#eef0f2; }
.about-scope .hero-full .wp-block-button__link{
  border-radius:12px; padding:14px 22px; font-weight:600; transition:.25s;
}
.about-scope .hero-full .wp-block-buttons .wp-block-button:first-child .wp-block-button__link{ background:#fff; color:var(--accent); }
.about-scope .hero-full .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link{ background:transparent; border:1.5px solid #fff; color:#fff; }
.about-scope .hero-full .wp-block-button__link:hover{ transform:translateY(-2px); }

/* Titres stylés */
.about-scope h2.wow-h2{ position:relative; display:inline-block; padding-bottom:8px; color:#000; margin:0 0 10px; font-size:clamp(32px,4vw,44px); }
.about-scope h2.wow-h2::after{ content:""; position:absolute; left:0; bottom:0; height:3px; width:72px; background:linear-gradient(90deg,var(--accent),#e9786b); border-radius:2px; }

/* Texte + petite barre rouge à gauche */
.about-scope .text-with-rule{ position:relative; padding-left:18px; }
.about-scope .text-with-rule::before{ content:""; position:absolute; left:0; top:.25rem; bottom:.25rem; width:3px; background:var(--accent); border-radius:3px; opacity:.9; }

/* Image bien cadrée */
.about-scope .img-elevated{ border-radius:22px; box-shadow:0 18px 45px rgba(0,0,0,.12); overflow:hidden; }
.about-scope .img-elevated img{ display:block; width:100%; height:auto; }

/* Cartes “glass” (Valeurs) */
.about-scope .glass{
  background:rgba(255,255,255,.65); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:24px; text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:.25s;
}
.about-scope .glass:hover{ transform:translateY(-6px); box-shadow:0 14px 32px rgba(0,0,0,.12); border-color:var(--accent); }

/* Bandes séparatrices rouges (fine) */
.about-scope .stripe{ height:10px; background:linear-gradient(90deg,var(--accent),#e9786b); border-radius:999px; opacity:.95; }

/* Section ENGAGEMENTS (noire) */
.about-scope .sla-section{ background:#111; color:#fff; border-radius:16px; padding:60px 20px; }
.about-scope .sla-card{
  background:linear-gradient(145deg,#1a1a1a,#0f0f0f); color:#eaecef;
  border-radius:16px; padding:28px 20px; text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.25); transition:.3s;
}
.about-scope .sla-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.about-scope .sla-card h3{ color:#fff; margin:.2rem 0 .5rem; }

/* CTA final (rouge) */
.about-scope .cta-final{ background:var(--accent); color:#fff; text-align:center; border-radius:16px; padding:70px 20px; }
.about-scope .cta-final .wp-block-button__link{ background:#fff; color:var(--accent); border-radius:12px; padding:14px 22px; font-weight:700; transition:.25s; }
.about-scope .cta-final .wp-block-button__link:hover{ transform:scale(1.07); box-shadow:0 8px 20px rgba(0,0,0,.15); }

/* Responsive simple */
@media (max-width:920px){
  .about-scope .grid-2{ grid-template-columns:1fr; gap:28px; }
  .about-scope .grid-4{ grid-template-columns:repeat(2,1fr); gap:18px; }
}
@media (max-width:560px){
  .about-scope .grid-3{ grid-template-columns:1fr; }
  .about-scope .grid-4{ grid-template-columns:1fr; }
}
/* ====== PALETTE ====== */
:root{
  --brand:#c95548;        /* ta couleur principale */
  --ink:#0a0a0a;          /* noir texte */
  --muted:#666;           /* gris texte */
  --bg:#ffffff;           /* fond */
  --halo:rgba(201,85,72,.16);
  --shadow:0 12px 30px rgba(0,0,0,.06);
  --radius:20px;
}

/* ====== SECTION ====== */
.notre-histoire{
  position:relative;
  background:var(--bg);
  border-radius:var(--radius);
  padding:clamp(56px,7vw,96px) 24px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* petite barre d’accent en haut */
.notre-histoire::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg,var(--brand), #000);
  opacity:.12;
}

/* grille interne */
.notre-histoire .wp-block-columns{
  max-width:1180px; margin:0 auto;
  align-items:center; gap: clamp(28px,5vw,64px);
}

/* typographie */
.notre-histoire .nh-eyebrow{
  margin:0 0 6px;
  font-size:.9rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand); font-weight:700;
}
.notre-histoire h2{
  margin:.2rem 0 1rem;
  font-size:clamp(32px,4.2vw,48px);
  line-height:1.1; color:var(--ink);
}
.notre-histoire p{
  color:var(--muted);
  font-size:1.06rem; line-height:1.75;
  margin:0 0 14px;
}

/* logo à droite : médaillon avec relief */
.notre-histoire .nh-logo img{
  display:block;
  max-width:260px; width:100%; height:auto;
  background:#fff;
  border-radius:50%;
  padding:22px;
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  position:relative;
}

/* anneau décoratif */
.notre-histoire .nh-logo img::selection{ background:transparent }
.notre-histoire .nh-logo{
  position:relative; display:flex; justify-content:center;
}
.notre-histoire .nh-logo::before{
  content:"";
  position:absolute; width:320px; height:320px; max-width:80vw; aspect-ratio:1/1;
  border-radius:50%;
  border:2px solid var(--halo);
  transform:translateY(6px);
}

/* ====== MOUVEMENT ====== */
/* reveal au scroll */
.nh-reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.nh-reveal.is-visible{opacity:1; transform:none}

/* flottement du logo (subtil) */
@keyframes nh-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.notre-histoire .nh-logo{ animation:nh-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .notre-histoire .nh-logo{ animation:none }
  .nh-reveal{ opacity:1; transform:none }
}

/* ====== RESPONSIVE ====== */
@media (max-width:900px){
  .notre-histoire .wp-block-columns{ gap:28px }
  .notre-histoire .nh-logo::before{ width:260px; height:260px }
}
@media (max-width:640px){
  .notre-histoire{ padding:38px 18px }
  .notre-histoire .wp-block-columns{ gap:20px }
  .notre-histoire h2{ font-size:clamp(28px,6vw,36px) }
  .notre-histoire .nh-logo img{ max-width:220px; padding:18px }
  .notre-histoire .nh-logo::before{ width:240px; height:240px }
}
//* ====== TABLETTE (≤ 900px) ====== */
@media (max-width: 900px){
  .notre-histoire{
    padding: clamp(56px,8vw,88px) 22px;
  }
  .notre-histoire .wp-block-columns{
    gap: clamp(28px,6vw,48px);
  }
  .notre-histoire h2{
    font-size: clamp(34px,6vw,44px);
  }
  .notre-histoire p{
    font-size: clamp(17px,1.6vw,18px);
    line-height: 1.75;
  }
  .notre-histoire .nh-logo img{
    max-width: 260px;
    padding: 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
  }
  .notre-histoire .nh-logo::before{
    width: 300px; height: 300px;
  }
}
/* ====== MOBILE (≤ 640px) ====== */
@media (max-width: 640px){
  /* air autour + bandes pleines si alignfull */
  .notre-histoire{
    padding: 44px 18px;
    border-radius: 0;
  }
  /* colonnes → pile : texte en 1er, logo en 2e (ordre natif Gutenberg) */
  .notre-histoire .wp-block-columns{
    gap: 20px;
  }
  /* largeur de ligne confortable */
  .notre-histoire .wp-block-column:first-child{
    max-width: 60ch;
    margin-inline: auto;
  }

  /* titrage & textes */
  .notre-histoire h2{
    font-size: clamp(28px,7vw,36px);
    line-height: 1.15;
    text-align: left;
  }
  .notre-histoire .nh-eyebrow{
    font-size: .88rem;
  }
  .notre-histoire p{
    font-size: 16.5px;
    line-height: 1.75;
    text-align: left;
  }

  /* logo centré, plus compact */
  .notre-histoire .nh-logo{
    justify-content: center;
  }
  .notre-histoire .nh-logo img{
    max-width: 200px;
    padding: 16px;
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
  }
  .notre-histoire .nh-logo::before{
    width: 220px; height: 220px;
  }
  /* animations plus sobres sur mobile */
  @media (prefers-reduced-motion:no-preference){
    .notre-histoire .nh-logo{ animation-duration: 7.5s; }
  }
}
/* ====== ULTRA PETIT (≤ 360px) — sécurité ====== */
@media (max-width: 360px){
  .notre-histoire h2{ font-size: 26px; }
  .notre-histoire p{ font-size: 15.5px; }
  .notre-histoire .nh-logo img{ max-width: 170px; }
  .notre-histoire .nh-logo::before{ width: 188px; height: 188px; }
}
/* ====== PALETTE ====== */
:root{
  --brand:#c95548;   /* rouge */
  --ink:#0b0b0b;     /* noir */
  --muted:#5b5b5b;   /* gris texte */
  --card:#ffffff;
  --line:#ececec;
  --shadow:0 10px 24px rgba(0,0,0,.06);
  --shadow-hover:0 16px 34px rgba(0,0,0,.10);
  --radius:16px;
}
/* CONTENEUR */
.milestones{
  padding:clamp(40px,6vw,72px) 0;
}
/* grille des cartes */
.milestones .wp-block-columns{
  gap:clamp(20px,3vw,28px);
  align-items:stretch;
}
/* CARTE */
.milestones .wp-block-column{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px clamp(16px,1.6vw,22px);
  box-shadow:var(--shadow);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex;flex-direction:column;gap:8px;
}
.milestones .wp-block-column:hover,
.milestones .wp-block-column:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand);
}
/* DATE (en haut) */
.milestones .ms-year{
  order:-1;
  margin:0 0 6px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--ink);
  font-size:clamp(18px,1.6vw,22px);
  line-height:1;
  transition:color .22s ease;
}
.milestones .wp-block-column:hover .ms-year,
.milestones .wp-block-column:focus-within .ms-year{
  color:var(--brand);
}
/* TITRE & TEXTE */
.milestones h4, .milestones h5{
  margin:0;
  color:var(--ink);
  font-size:clamp(18px,1.4vw,20px);
  line-height:1.25;
}
.milestones p{
  margin:0;
  color:var(--muted);
  font-size:clamp(15.5px,1.1vw,16.5px);
  line-height:1.6;
}
/* séparateur discret sous la date (option “timeline vibe” mais clean) */
.milestones .ms-year{
  position:relative;
  padding-bottom:10px;
}
.milestones .ms-year::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:36px; height:2px; background:var(--line);
  transition:background .22s ease;
}
.milestones .wp-block-column:hover .ms-year::after,
.milestones .wp-block-column:focus-within .ms-year::after{
  background:var(--brand);
}
/* RESPONSIVE */
@media (max-width:900px){
  .milestones .wp-block-columns{flex-wrap:wrap}
  .milestones .wp-block-column{flex:1 1 calc(50% - 12px)}
}
@media (max-width:560px){
  .milestones .wp-block-column{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .milestones .wp-block-column{transition:none}
  .milestones .ms-year{transition:none}
}
/* Effet de survol sur les éléments de frise */
.timeline-item {
  display: inline-block;
  padding: 20px 25px;
  border-radius: 16px;
  transition: all 0.3s ease;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.timeline-item:hover {
  transform: translateY(-6px) scale(1.02);
  background: #fdf6f5; /* léger ton rosé pour coller à ta charte (#c95548) */
  box-shadow: 0 6px 18px rgba(201, 85, 72, 0.25);
}
.timeline-item h3,
.timeline-item p {
  transition: color 0.3s ease;
}
.timeline-item:hover h3,
.timeline-item:hover p {
  color: #c95548; /* ton rouge signature */
}
/* Cartes valeurs – version à forte priorité */
.wp-block-group.value-card{
  background:#fff !important;
  border-radius:16px !important;
  padding:22px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.06) !important;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease !important;
  display:block;
}
.wp-block-group.value-card:hover{
  transform: translateY(-6px) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.12) !important;
  background:#fff !important;
}
/* Décalage de la carte du milieu */
.wp-block-group.value-card.offset{ margin-top:18px !important; }
/* Emoji qui “pop” au survol */
.value-card .pop-ico{
  display:inline-block; font-size:34px; line-height:1;
  transition:transform .15s ease !important;
}
.wp-block-group.value-card:hover .pop-ico{ transform: scale(1.06) !important; }
/* Nettoyage d’un style parasite (mots “entourés”) */
.value-card p{
  background:none !important; border:none !important; outline:none !important; box-shadow:none !important;
}
/* ===== Ruban premium défilant (logos + pastilles) ===== */
.marquee-pro {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}
/* Piste qui défile */
.marquee-pro .track {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: max-content;
  animation: marquee 32s linear infinite;
  will-change: transform;
}
/* Pause au survol */
.marquee-pro:hover .track {
  animation-play-state: paused;
}
/* Logos (gris par défaut, couleur au hover) */
.marquee-pro img {
  height: 44px;
  width: auto;
  filter: grayscale(1) contrast(1.05) brightness(.95);
  opacity: .9;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.marquee-pro img:hover {
  filter: grayscale(0) contrast(1.05) brightness(1);
  opacity: 1;
  transform: translateY(-2px);
}
/* Pastilles texte (avec ✅ vert permanent) */
.marquee-pro .chip {
  position: relative;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 999px;
  padding: 10px 16px 10px 34px; /* espace pour l’icône */
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
  filter: none !important; /* évite que les ✅ soient grisés */
}
/* Icône ✅ verte (emoji compatible WordPress) */
.marquee-pro .chip::before {
  content: "✅";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  filter: none !important;
}
/* Effet au survol */
.marquee-pro .chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(201,85,72,.18);
  color: #c95548; /* texte devient rouge au survol */
}
/* Animation continue (duplique la piste pour une boucle fluide) */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Accessibilité : désactive l’animation si l’utilisateur la limite */
@media (prefers-reduced-motion: reduce) {
  .marquee-pro .track { animation: none; }
}
:root{
  --brand:#c95548;--ink:#0b0b0b;--muted:#5c5c5c;--halo:rgba(201,85,72,.16);
  --r:16px;--shadow:0 12px 28px rgba(0,0,0,.08);
}
.kpi-live{
  position:relative; isolation:isolate; border-radius:var(--r);
}
.kpi-live::before{
  content:""; position:absolute; inset:-40px -10px auto -10px;
  height:220px; background:radial-gradient(600px 180px at 20% 0%, var(--halo), transparent 60%);
  filter:blur(6px); z-index:-1;
}
.kpi-live h2{ text-align:center; margin:0 0 8px; }
.kpi-live > p{ text-align:center; color:var(--muted); margin:0 0 28px; }

/* grille kpi (compat Gutenberg) */
.kpi-live .wp-block-columns{ gap:18px; align-items:stretch; }
.kpi-live .wp-block-column{ display:flex; }

/* carte */
.kpi-card{
  background:#fff;border-radius:18px; padding:24px;
  box-shadow:var(--shadow); border:1px solid #eee; width:100%;
  display:flex; flex-direction:column; gap:8px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style:preserve-3d;
}
.kpi-card:hover{ transform:translateY(-6px) rotateX(.5deg) rotateY(.5deg);
  box-shadow:0 18px 40px rgba(0,0,0,.12); border-color:var(--brand);
}
.kpi-card::after{
  content:""; position:absolute; inset:auto 0 -2px 0; height:3px;
  background:linear-gradient(90deg,var(--brand),#e77a6e); border-radius:999px;
  opacity:.0; transform:translateY(6px); transition:opacity .25s, transform .25s;
}
.kpi-card:hover::after{ opacity:.9; transform:translateY(0); }

/* chiffres */
.kpi-num{
  font-weight:900; color:var(--brand); letter-spacing:0.02em;
  font-size:clamp(28px,5.2vw,52px); line-height:1; margin:0 0 6px;
  transform:translateZ(20px);
}
.kpi-card p{ margin:0; color:var(--muted); font-size:1.02rem; }

/* petite lueur au survol */
.kpi-card:hover{
  background:radial-gradient(400px 160px at 20% -10%, rgba(201,85,72,.05), transparent 40%), #fff;
}

/* responsive */
@media (max-width:900px){
  .kpi-live .wp-block-columns{ flex-wrap:wrap; }
  .kpi-live .wp-block-column{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .kpi-card, .kpi-card::after{ transition:none; }
}
.col-compacte {
  align-self: center;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}


/* =======================
/* ===== Section "Pourquoi nous choisir ?" – mise en page large & responsive ===== */
.why-choose{
  /* largeur confortable + marges internes équilibrées */
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) clamp(18px, 4vw, 40px);
}

/* Si ton Groupe est en "pleine largeur", on garde une garde de 40px sur les côtés */
.why-choose.is-layout-constrained,
.why-choose.alignfull{
  padding-left: clamp(18px, 4vw, 40px);
  padding-right: clamp(18px, 4vw, 40px);
}

/* Colonnes : écart propre et alignement milieu */
.why-choose .why-grid{
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}

/* Répartition 55/45 sur écrans larges */
@media (min-width: 900px){
  .why-choose .why-text{ flex-basis: 55% !important; }
  .why-choose .why-photo{ flex-basis: 45% !important; }
}

/* Texte : lisible et ancré */
.why-choose .why-text p{
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.7;
  color: #222;
  margin: 0 0 14px;
}
.why-choose h2{
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 14px;
}

/* Petite barre d’accent à gauche du premier paragraphe (effet premium) */
.why-choose .why-text p:first-of-type{
  position: relative;
  padding-left: 14px;
}
.why-choose .why-text p:first-of-type::before{
  content: "";
  position: absolute;
  left: 0; top: .35em; bottom: .35em;
  width: 3px; border-radius: 3px;
  background: linear-gradient(90deg,#c95548,#e9786b);
  opacity: .9;
}

/* Image : carte élégante + hover subtil */
.why-choose .why-photo img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  transition: transform .6s ease, box-shadow .6s ease, filter .6s ease;
  object-fit: cover;
}
.why-choose .why-photo:hover img{
  transform: scale(1.02);
  box-shadow: 0 22px 50px rgba(0,0,0,.16);
}

/* Badge(s) ou liste courte : puces alignées proprement */
.why-choose .why-text ul{
  margin: 10px 0 0;
  padding-left: 1.2em;
}
.why-choose .why-text li{
  margin: 6px 0;
}

/* === Forcer la section en pleine largeur (full bleed), sans toucher le reste === */
.why-choose.alignfull{
  /* Plein écran horizontal, même si le thème limite */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  background: #f7eeec; /* ta couleur de fond si besoin */
}

/* Conteneur interne centré et confortable */
.why-choose .why-inner{
  max-width: 1200px;             /* ajuste à 1280/1320 si tu veux encore plus large */
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) clamp(18px, 4vw, 40px);
}

/* Écart joli entre les colonnes et alignement milieu */
.why-choose .why-grid{
  gap: clamp(20px, 4vw, 60px);
  align-items: center;
}

/* Répartition 55/45 sur écrans larges */
@media (min-width: 900px){
  .why-choose .why-text{ flex-basis: 55% !important; }
  .why-choose .why-photo{ flex-basis: 45% !important; }
}

/* Option : si ton thème bloque les "wide/full" via variables globales (thèmes blocs) */
:root{
  --wp--style--global--content-size: 1200px !important;
  --wp--style--global--wide-size: 1400px !important;
}
/* B — Glass card + zoom photo */
.why-choose .why-glass{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: clamp(18px,2.2vw,28px);
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
}
.why-choose .why-glass h2{ margin-top: 6px; }
.why-choose .why-photo img{
  border-radius: 18px;
  transform: scale(1);
  transition: transform .7s ease, filter .4s ease, box-shadow .4s ease;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  object-fit: cover;
}
.why-choose .why-photo:hover img{
  transform: scale(1.03);
  filter: contrast(1.06) brightness(1.02);
  box-shadow: 0 22px 52px rgba(0,0,0,.16);
}
/* =========================
   NOTRE HISTOIRE — Effets visibles (robustes)
========================= */

/* Apparition douce des enfants directs du conteneur */
.notre-histoire > *{
  opacity:0;
  transform:translateY(14px);
  animation:nh-reveal-up .7s ease-out forwards;
}
.notre-histoire > *:nth-child(1){ animation-delay:.06s; }
.notre-histoire > *:nth-child(2){ animation-delay:.14s; }
.notre-histoire > *:nth-child(3){ animation-delay:.22s; }

@keyframes nh-reveal-up{ to{ opacity:1; transform:none; } }

/* Si tu utilises un bloc Colonnes à l’intérieur, on anime aussi chaque colonne */
.notre-histoire .wp-block-columns > *{
  opacity:0;
  transform:translateY(12px);
  animation:nh-reveal-up .65s ease-out forwards;
}
.notre-histoire .wp-block-columns > *:nth-child(1){ animation-delay:.08s; }
.notre-histoire .wp-block-columns > *:nth-child(2){ animation-delay:.18s; }
.notre-histoire .wp-block-columns > *:nth-child(3){ animation-delay:.28s; }

/* Titre : soulignement animé (fonctionne même sans classe) */
.notre-histoire h2{
  position:relative;
}
.notre-histoire h2::after{
  content:"";
  position:absolute; left:0; bottom:-8px;
  width:110px; height:3px; border-radius:2px;
  background:
    linear-gradient(90deg, transparent 0 10%, var(--brand, #c95548) 20% 70%, #e9786b 90%, transparent 100%);
  background-size:200% 100%;
  animation:nh-underline 2.4s ease-in-out infinite;
}
@keyframes nh-underline{
  0%{ background-position:0% 0; }
  50%{ background-position:100% 0; }
  100%{ background-position:0% 0; }
}

/* Cartes qui respirent : on cible TOUT groupe/colonne direct dans la section */
.notre-histoire .wp-block-group,
.notre-histoire .wp-block-column{
  background:#fff;
  border:1px solid #ececec;
  border-radius:16px;
  padding:22px clamp(16px,1.6vw,22px);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.notre-histoire .wp-block-group:hover,
.notre-histoire .wp-block-column:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  border-color:var(--brand, #c95548);
  background:
    radial-gradient(420px 160px at 18% -10%, rgba(201,85,72,.05), transparent 40%),
    #fff;
}

/* Logo médaillon qui flotte (cible n’importe quelle image dans la section) */
.notre-histoire img{
  border-radius:18px;
  box-shadow:0 14px 36px rgba(0,0,0,.08);
  transition: transform .5s ease, filter .4s ease, box-shadow .4s ease;
}
.notre-histoire .nh-logo,
.notre-histoire .wp-block-image{
  display:flex; justify-content:center; align-items:center;
  animation:nh-float 7s ease-in-out infinite;
  will-change:transform;
}
@keyframes nh-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.notre-histoire .nh-logo:hover img,
.notre-histoire .wp-block-image:hover img{
  transform:translateY(-4px) rotate(-1.2deg);
  filter:contrast(1.05) saturate(1.03);
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}

/* Bande supérieure un peu plus visible (si déjà existante, c’est ok) */
.notre-histoire{
  position:relative;
}
.notre-histoire::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:4px;
  background:linear-gradient(90deg, var(--brand, #c95548), #000);
  opacity:.18;
}

/* Accessibilité & responsive */
@media (max-width:900px){
  .notre-histoire .wp-block-group,
  .notre-histoire .wp-block-column{ padding:18px; }
}
@media (prefers-reduced-motion:reduce){
  .notre-histoire > *,
  .notre-histoire .wp-block-columns > *,
  .notre-histoire .nh-logo,
  .notre-histoire .wp-block-image{
    animation:none !important; transition:none !important;
    opacity:1 !important; transform:none !important;
  }
}
/* =========================
   FIX MOBILE – carrousel + compaction
   À coller tout en bas de ton CSS
========================= */

/* Sécurité : jamais de scroll horizontal global */
html, body { overflow-x: hidden; }

/* -------- KPI (section .kpi-live) : carrousel horizontal en < 700px -------- */
@media (max-width:700px){
  .kpi-live .wp-block-columns{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 6px 8px 12px;
  }
  .kpi-live .wp-block-column{
    flex:0 0 82% !important;         /* largeur d’une carte vue à la fois */
    scroll-snap-align:start;
  }
  .kpi-card{ padding:18px !important; }
  .kpi-num{ font-size: clamp(26px,7vw,36px) !important; }
}

/* -------- Frise / Milestones : carrousel horizontal en < 700px -------- */
@media (max-width:700px){
  .milestones{ padding: 24px 0 !important; }
  .milestones .wp-block-columns{
    display:flex !important;
    gap:14px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    padding: 6px 10px 14px;
  }
  .milestones .wp-block-column{
    flex:0 0 85% !important;
    scroll-snap-align:start;
    padding:16px !important;
  }
  .milestones .ms-year{ font-size:18px !important; }
  .milestones h4, .milestones h5{ font-size:17px !important; }
  .milestones p{ font-size:15.5px !important; }
}

/* -------- “Notre histoire” : compacter sur mobile + ordre logique -------- */
@media (max-width:700px){
  .notre-histoire{
    padding: 28px 14px !important;
    border-radius: 12px !important;
  }
  .notre-histoire .wp-block-columns{
    display:flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }
  /* texte d’abord, visuel ensuite (si 2 colonnes WP) */
  .notre-histoire .wp-block-column:first-child{ order:1; }
  .notre-histoire .wp-block-column:last-child{ order:2; }

  .notre-histoire h2{ font-size: clamp(24px,6.5vw,30px) !important; }
  .notre-histoire p{ font-size: 16px !important; line-height: 1.6 !important; }
  .notre-histoire .nh-logo img{
    max-width: 200px !important;
    padding: 12px !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
  }
  .notre-histoire .nh-logo::before{ width:210px !important; height:210px !important; }
}

/* -------- “Pourquoi nous choisir ?” : réduire les marges sur mobile -------- */
@media (max-width:700px){
  .why-choose,
  .why-choose .why-inner{
    padding: 28px 16px !important;
  }
  .why-choose .why-grid{
    gap: 16px !important;
  }
  .why-choose h2{ font-size: clamp(22px,6.5vw,28px) !important; }
  .why-choose .why-text p{ font-size: 16px !important; }
}

/* ====== HERO pleine largeur – desktop + mobile ====== */
html, body { overflow-x: hidden; } /* évite le scroll horizontal dû aux 100vw */

.hero-fullwidth{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(-50vw + 50%) !important;  /* casse le container du thème */
  margin-right:calc(-50vw + 50%) !important;
  padding:0 !important;
  position:relative;
}

/* Cas des blocs Couverture / Image de fond WordPress */
.hero-fullwidth .wp-block-cover,
.hero-fullwidth .wp-block-cover__image-background{
  width:100vw !important;
  max-width:100vw !important;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* Image de fond = recadrage propre + point focal centré */
.hero-fullwidth .wp-block-cover__image-background,
.hero-fullwidth .wp-block-cover img{
  object-fit:cover;
  object-position:center center;
}

/* Hauteur confortable par device */
.hero-fullwidth,
.hero-fullwidth .wp-block-cover{
  min-height: clamp(420px, 68vh, 760px);
}

/* Option : petit voile pour assurer la lisibilité du texte */
.hero-fullwidth .wp-block-cover::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  pointer-events:none;
}

/* Texte dans le hero (titre, sous-titre, bouton) */
.hero-fullwidth .wp-block-cover__inner-container{
  width:min(1200px, 92vw);
  margin:0 auto;
  padding:clamp(18px, 2.5vw, 28px);
}
.hero-fullwidth h1{
  font-size:clamp(28px, 6vw, 56px);
  line-height:1.12;
  margin:0 0 .35em;
  color:#fff;
}
.hero-fullwidth p{
  font-size:clamp(15px, 2.2vw, 20px);
  color:#fff;
  margin:0 0 1.2em;
}

/* Bouton */
.hero-fullwidth .wp-block-button__link{
  border-radius:12px;
  padding:.9em 1.2em;
  font-weight:700;
}

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

/* Tablette */
@media (max-width: 1024px){
  .hero-fullwidth,
  .hero-fullwidth .wp-block-cover{ min-height: 58vh; }
}

/* Mobile */
@media (max-width: 768px){
  .hero-fullwidth,
  .hero-fullwidth .wp-block-cover{ min-height: 56vh; }

  /* évite que le texte colle aux bords */
  .hero-fullwidth .wp-block-cover__inner-container{
    width: 92vw;
    padding: 20px;
  }

  /* si la barre d’admin WP est visible sur mobile, on garde une marge de sécu */
  body.admin-bar .hero-fullwidth{ margin-top: 0 !important; }
}

/* ====== (Option) casse certains wrappers de thèmes blocs ====== */
.wp-site-blocks > .hero-fullwidth,
.entry-content > .hero-fullwidth,
.site-main > .hero-fullwidth{
  max-width:100vw !important;
  padding:0 !important;
}
/* ====== Effet hover moderne sur les colonnes de services ====== */
.services-hover .wp-block-column {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Effet au survol */
.services-hover .wp-block-column:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 14px 32px rgba(0,0,0,.2);
  z-index: 2;
}

/* L’image de fond se zoome légèrement */
.services-hover .wp-block-cover__image-background,
.services-hover .wp-block-cover img {
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: brightness(0.9);
}
.services-hover .wp-block-column:hover .wp-block-cover__image-background,
.services-hover .wp-block-column:hover img {
  transform: scale(1.08);
  filter: brightness(1);
}

/* Option : effet lumineux subtile au survol */
.services-hover .wp-block-column::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.services-hover .wp-block-column:hover::after {
  opacity: 1;
}

/* Texte : reste lisible même avec l'effet */
.services-hover h2, 
.services-hover h3, 
.services-hover p {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.services-hover .wp-block-column:hover h2,
.services-hover .wp-block-column:hover h3 {
  transform: translateY(-4px);
}
.services-hover .wp-block-column:hover p {
  opacity: 0.95;
}

/* Mobile : désactive l’effet fort pour éviter le tremblement au tactile */
@media (max-width: 768px) {
  .services-hover .wp-block-column:hover {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
  }
  .services-hover .wp-block-column:hover img {
    transform: none;
    filter: brightness(1);
  }
}
/* ===== Contact : 3 colonnes propres, sans sous-cartes ===== */

/* Conteneur un peu plus étroit et centré */
.contact-cards{
  max-width: 1120px;           /* rétréci l’ensemble */
  margin: 0 auto;
  padding: 12px 18px;
}

/* Forcer une vraie grille de 3 colonnes (1 en mobile) */
.contact-cards .wp-block-columns{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 900px){
  .contact-cards .wp-block-columns{
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}

/* La COLONNE = la seule “carte” (léger fond + arrondi) */
.contact-cards .wp-block-columns > .wp-block-column{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-cards .wp-block-columns > .wp-block-column:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
  border-color: #c95548;
}

/* IMPORTANT : on enlève TOUT cadre/ombre/fond aux SOUS-BLOCS */
.contact-cards .wp-block-columns > .wp-block-column *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;              /* on remet du padding juste au niveau colonne */
}
.contact-cards .wp-block-columns > .wp-block-column > *{
  margin: 6px 0;                      /* espace simple entre lignes */
}

/* Liens et textes propres */
.contact-cards .wp-block-columns > .wp-block-column a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.35);
}
.contact-cards .wp-block-columns > .wp-block-column a:hover{
  border-bottom-color: transparent;
}
/* ===== Variables brand ===== */
:root{
  --brand:#c95548;          /* rouge signature */
  --ink:#0b0b0b;            /* noir texte */
  --paper:#ffffff;          /* fond */
  --line:#ececec;           /* bordure douce */
}
https://rosebudalbasecuriteprivee.fr/wp-admin/post.php?post=11&action=edit
/* 1. Style de base : Fond blanc pur et angles arrondis comme ton visuel */
.carte-atout {
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important; /* Bordure très discrète */
    border-radius: 20px !important; /* Angles arrondis doux */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Animation ultra fluide */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Ombre légère au repos */
}

/* 2. L'effet de RELIEF au survol (Hover) */
.carte-atout:hover {
    transform: translateY(-12px); /* La carte s'élève */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); /* Ombre profonde pour le relief */
    border-color: #ff0000 !important; /* La bordure devient rouge comme ton logo */
}

/* 3. Petit bonus : on fait ressortir le texte au survol */
.carte-atout:hover h2, .carte-atout:hover h3 {
    color: #ff0000 !important;
    transition: color 0.3s ease;
}
@media (max-width: 767px) {
    .wp-block-site-logo img {
        max-width: 100px !important; /* Divise la taille par 2 sur mobile */
        height: auto !important;
    }
    header, .site-header {
        padding: 5px 0 !important; /* Réduit la hauteur de la barre rouge */
    }
/* MENU MOBILE - forcer l’overlay à prendre tout l’écran + permettre le scroll */
@media (max-width: 782px){

  /* Panneau du menu (ouvert) */
  .wp-block-navigation__responsive-container.is-menu-open{
    position: fixed !important;
    inset: 0 !important;            /* top/right/bottom/left = 0 */
    height: 100vh !important;
    width: 100vw !important;
    overflow-y: auto !important;     /* scroll si menu long */
    -webkit-overflow-scrolling: touch;
    z-index: 99999 !important;
  }

  /* Contenu intérieur : éviter qu’il soit bloqué en hauteur */
  .wp-block-navigation__responsive-container-content{
    min-height: 100vh !important;
    padding: 90px 24px 24px !important; /* laisse de la place en haut (logo/close) */
    box-sizing: border-box !important;
  }

  /* Liste en colonne, bien lisible */
  .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center !important; /* centre comme sur ta capture */
  }
@media (max-width: 768px){
  .rb-footer-old{ display:block !important; }
}