/* =========================================================
   PAGE ACCUEIL — PLEINE PAGE (full-bleed)
   Dépend : variables.css
   Objectifs :
   - CSS trié, sans doublons
   - HERO centré verticalement
   - BG slider stable (overlay/noise/crossfade)
   - HERO panel : carré desktop + paysage mobile
   - STRIP + SECTIONS + SERVICES + CTA
   - PROCESS timeline : version finale anti-collisions
   ========================================================= */


/* =========================================================
   0) WRAP (texte lisible)
   ========================================================= */

.pcr-wrap{
  max-width: var(--pcr-container-max);
  margin: 0 auto;
  padding-left: var(--pcr-container-pad);
  padding-right: var(--pcr-container-pad);
}


/* =========================================================
   1) HERO — Layout + centrage vertical + responsive
   ========================================================= */

.pcr-hero{
  position: relative;
  overflow: hidden;
  background: var(--pcr-color-surface);

  /* ✅ centre verticalement tout le contenu du hero */
  display: flex;
  align-items: center;

  /* Hauteur pro (svh) */
  min-height: clamp(440px, 66svh, 860px);

  /* Air haut/bas */
  padding: clamp(28px, 5vw, 64px) 0;
}

/* Fallback si svh non supporté */
@supports not (height: 100svh){
  .pcr-hero{ min-height: clamp(460px, 70vh, 860px); }
}

/* Très petits écrans : un poil plus bas */
@media (max-width: 420px){
  .pcr-hero{ min-height: clamp(400px, 60svh, 700px); }
}
@supports not (height: 100svh){
  @media (max-width: 420px){
    .pcr-hero{ min-height: clamp(420px, 62vh, 720px); }
  }
}

/* Le wrap doit prendre la largeur normale, le flex le centre */
.pcr-hero > .pcr-wrap{
  width: 100%;
}

/* Grille 2 colonnes (desktop) */
.pcr-hero__grid{
  position: relative;
  display: grid;
  grid-template-columns: 1fr; /* ✅ une seule colonne */
  gap: clamp(18px, 4vw, 56px);
  align-items: center;
}


/* Contenu */
.pcr-hero__eyebrow{
  display: inline-flex;
  margin: 0 0 var(--pcr-space-3);
  padding: 8px 14px;
  border-radius: var(--pcr-radius-sm);
  border: 1px solid var(--pcr-color-border);
  background: var(--pcr-color-surface);
  color: var(--pcr-color-muted);
  font-size: var(--pcr-text-sm);
}

.pcr-hero__title{
  margin: 0 0 var(--pcr-space-4);
  color: var(--pcr-color-heading);
  font-weight: var(--pcr-weight-bold);
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.pcr-hero__lead{
  margin: 0 0 var(--pcr-space-5);
  color: var(--pcr-color-text);
  font-size: clamp(16px, 2.2vw, 20px);
  max-width: 62ch;
}

.pcr-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcr-space-3);
  margin-bottom: var(--pcr-space-5);
}

.pcr-hero__bullets{
  margin: 0;
  padding-left: 1.1em;
  color: var(--pcr-color-muted);
}
.pcr-hero__bullets li{
  margin: 0 0 var(--pcr-space-2);
}

/* Tablette : empilement (grid 1 colonne), align start */
@media (max-width: 1024px){
  .pcr-hero__grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
}



/* =========================================================
   2) HERO BG SLIDER — Stable / Pro (A/B + overlay + noise)
   Dépendances HTML dans .pcr-hero__bg :
   <div class="pcr-hero__bgOverlay"></div>
   <div class="pcr-hero__bgNoise"></div>
   JS : toggle .is-a/.is-b + vars --pcr-bg-a / --pcr-bg-b
   ========================================================= */

.pcr-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0b1220;

  /* stacking propre */
  isolation: isolate;
}

/* Contenu au-dessus du bg */
.pcr-hero .pcr-wrap,
.pcr-hero__grid{
  position: relative;
  z-index: 2;
}
.pcr-hero__content,
.pcr-hero__right{
  position: relative;
  z-index: 3;
}

/* Layers A/B */
.pcr-hero__bg::before,
.pcr-hero__bg::after{
  content: "";
  position: absolute;
  inset: -2%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms ease, transform 8200ms ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform-origin: center;

  /* constant : pas de flash */
  filter: saturate(1.02) contrast(1.03);
}

.pcr-hero__bg::before{ background-image: var(--pcr-bg-a); }
.pcr-hero__bg::after { background-image: var(--pcr-bg-b); }

.pcr-hero__bg.is-a::before{
  opacity: 1;
  transform: scale(1.01);
}
.pcr-hero__bg.is-b::after{
  opacity: 1;
  transform: scale(1.01);
}

/* Mobile: centrage, crop moins agressif */
@media (max-width: 768px){
  .pcr-hero__bg::before,
  .pcr-hero__bg::after{
    inset: -3%;
    background-position: center center;
  }
}

/* Overlay constant */
.pcr-hero__bgOverlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1100px 650px at 18% 12%, rgba(0,0,0,.10), rgba(0,0,0,.40)),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.34));
}
@media (max-width: 768px){
  .pcr-hero__bgOverlay{
    background:
      radial-gradient(900px 560px at 35% 12%, rgba(0,0,0,.12), rgba(0,0,0,.46)),
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.40));
  }
}

/* Noise discret */
.pcr-hero__bgNoise{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.60'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  animation: pcrNoiseDrift 16s linear infinite;
}

@keyframes pcrNoiseDrift{
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(-1.6%, 1.0%, 0); }
}

@media (max-width: 768px){
  .pcr-hero__bgNoise{ opacity: .035; }
}

/* Micro-scan clean (optionnel via .is-scan) */
.pcr-hero__bg.is-scan::before,
.pcr-hero__bg.is-scan::after{
  animation: pcrScan 320ms ease-out 1;
  will-change: clip-path;
}

@keyframes pcrScan{
  0%   { clip-path: inset(0 0 0 0); }
  30%  { clip-path: inset(8% 0 58% 0); }
  62%  { clip-path: inset(44% 0 12% 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@supports not (clip-path: inset(10% 0 55% 0)){
  .pcr-hero__bg.is-scan::before,
  .pcr-hero__bg.is-scan::after{
    animation: none;
  }
}

/* Responsive hauteur (conserve le hero visible) */
@media (max-width: 1024px){
  .pcr-hero{ min-height: clamp(420px, 64svh, 800px); }
}
@media (max-width: 768px){
  .pcr-hero{ min-height: clamp(420px, 62svh, 740px); }
}
@supports not (height: 100svh){
  @media (max-width: 1024px){
    .pcr-hero{ min-height: clamp(440px, 68vh, 820px); }
  }
  @media (max-width: 768px){
    .pcr-hero{ min-height: clamp(440px, 66vh, 760px); }
  }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .pcr-hero__bg::before,
  .pcr-hero__bg::after{
    transition: none !important;
    transform: none !important;
  }
  .pcr-hero__bgNoise{ animation: none !important; }
  .pcr-hero__bg.is-scan::before,
  .pcr-hero__bg.is-scan::after{
    animation: none !important;
  }
}


/* =========================================================
   3) HERO PANEL — secteurs (desktop carré / mobile paysage)
   ========================================================= */

.pcr-heroPanel{
  border-left: 2px solid rgba(10, 92, 255, .18);
  padding-left: var(--pcr-space-5);
}

.pcr-heroPanel__row{
  display: flex;
  align-items: center;
  gap: var(--pcr-space-4);
  padding: var(--pcr-space-3) 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.pcr-heroPanel__row--strong{ border-bottom-color: transparent; }

/* ✅ Desktop/tablette : carré strict + cover */
.pcr-heroPanel__img{
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  aspect-ratio: 1 / 1;
  border-radius: var(--pcr-radius-sm);
  overflow: hidden;
  background: var(--pcr-color-surface-2);
}

.pcr-heroPanel__img img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Texte */
.pcr-heroPanel__content{
  display: flex;
  flex-direction: column;
}
.pcr-heroPanel__k{
  font-weight: var(--pcr-weight-semibold);
  color: var(--pcr-color-heading);
  margin-bottom: 2px;
}
.pcr-heroPanel__v{
  color: var(--pcr-color-muted);
  font-size: var(--pcr-text-sm);
}

/* Mobile : grille 2 colonnes + images paysage */
@media (max-width: 640px){

  .pcr-heroPanel{
    border-left: 0;
    padding-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pcr-space-4);
    position: relative;
  }

  .pcr-heroPanel::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(10, 92, 255, .18);
    transform: translateX(-0.5px);
  }

  .pcr-heroPanel__row{
    flex-direction: column;
    align-items: flex-start;
    padding: var(--pcr-space-3);
    border: 1px solid var(--pcr-color-border);
    border-radius: var(--pcr-radius-md);
    background: var(--pcr-color-surface);
  }

  /* ✅ mobile : cadre paysage + image cover */
  .pcr-heroPanel__img{
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 16 / 9;
    flex: 0 0 auto;
    margin-bottom: var(--pcr-space-2);
  }

  .pcr-heroPanel__img img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* ou contain si tu veux tout voir */
  }

  .pcr-heroPanel__k{ font-size: var(--pcr-text-sm); }
  .pcr-heroPanel__v{ font-size: 12px; line-height: 1.25; }
}

/* Responsive heroPanel quand le hero passe en colonne */
@media (max-width: 1024px){
  .pcr-heroPanel{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(0,0,0,.08);
    padding-top: var(--pcr-space-4);
  }
}


/* =========================================================
   4) STRIP — Stats (grille + cards + dashicons)
   ========================================================= */

.pcr-strip{
  padding: var(--pcr-space-6) 0;
  border-top: 1px solid var(--pcr-color-border);
  border-bottom: 1px solid var(--pcr-color-border);
  background: var(--pcr-color-surface);
}

.pcr-strip__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pcr-space-4);
}

.pcr-stat{
  display: flex;
  align-items: flex-start;
  gap: var(--pcr-space-3);
  padding: var(--pcr-space-3);
  border: var(--pcr-border);
  border-radius: var(--pcr-radius-md);
  background: rgba(255,255,255,.02);
  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-stat:hover{
  transform: translateY(-1px);
  border-color: rgba(64,196,255,.22);
  background: rgba(255,255,255,.03);
}

.pcr-stat__icon{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;

  color: var(--pcr-color-primary);
  background: var(--pcr-color-primary-soft);
  border: 1px solid color-mix(in srgb, var(--pcr-color-primary) 35%, transparent);
}

.pcr-stat:hover .pcr-stat__icon{
  color: var(--pcr-color-primary-hover);
  border-color: rgba(64,196,255,.36);
}

.pcr-stat__text{ min-width: 0; }

.pcr-stat__num{
  display: block;
  font-weight: var(--pcr-weight-bold);
  color: var(--pcr-color-heading);
  font-size: var(--pcr-text-lg);
}
.pcr-stat__label{
  display: block;
  margin-top: 2px;
  color: var(--pcr-color-muted);
  font-size: var(--pcr-text-sm);
}

/* Tablette */
@media (max-width: 1024px){
  .pcr-strip__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile (2x2) */
@media (max-width: 640px){
  .pcr-strip__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pcr-space-3);
  }
  .pcr-stat__icon{
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 11px;
  }
  .pcr-stat__label{
    font-size: 12px;
    line-height: 1.25;
  }
}


/* =========================================================
   5) SECTIONS
   ========================================================= */

.pcr-section{
  padding: var(--pcr-space-8) 0;
}

.pcr-section--alt{
  background: var(--pcr-color-surface);
  border-top: 1px solid var(--pcr-color-border);
  border-bottom: 1px solid var(--pcr-color-border);
}

.pcr-section__head{
  margin-bottom: var(--pcr-space-6);
}

.pcr-section__title{
  margin: 0 0 var(--pcr-space-2);
  font-size: clamp(22px, 3vw, 34px);
  color: var(--pcr-color-heading);
}

.pcr-section__lead{
  margin: 0;
  color: var(--pcr-color-muted);
  max-width: 76ch;
}


/* =========================================================
   6) SERVICES (grille + cards)
   ========================================================= */

.pcr-services{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pcr-space-5);
}

@media (max-width: 1024px){
  .pcr-services{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .pcr-services{ grid-template-columns: 1fr; gap: var(--pcr-space-4); }
}

.pcr-service{
  position: relative;
  padding: var(--pcr-space-5);
  border: var(--pcr-border);
  border-radius: var(--pcr-radius-lg);
  background: var(--pcr-color-surface);
  box-shadow: var(--pcr-shadow-sm);
  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-service:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: var(--pcr-color-surface-2);
}

.pcr-service__title{
  margin: 0 0 var(--pcr-space-2);
  color: var(--pcr-color-heading);
  font-family: var(--pcr-font-heading);
  font-weight: var(--pcr-weight-semibold);
}

.pcr-service__text{
  margin: 0 0 var(--pcr-space-4);
  color: var(--pcr-color-muted);
  line-height: var(--pcr-leading-normal);
}

/* Bullets premium */
.pcr-service__list{
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pcr-color-text);
}
.pcr-service__list li{
  position: relative;
  padding-left: 22px;
  margin: 0 0 var(--pcr-space-2);
  line-height: 1.35;
}
.pcr-service__list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--pcr-color-primary);
  box-shadow: 0 0 0 4px var(--pcr-color-primary-soft);
  transform: translateY(-50%);
}

/* Urgent */
.pcr-service--urgent{
  border-color: rgba(255,59,48,.28);
  background: linear-gradient(180deg, rgba(255,59,48,.06), transparent 55%), var(--pcr-color-surface);
}
.pcr-service--urgent:hover{
  border-color: rgba(255,59,48,.40);
  background: linear-gradient(180deg, rgba(255,59,48,.08), transparent 55%), var(--pcr-color-surface-2);
}
.pcr-service--urgent::before{
  content: "URGENT";
  position: absolute;
  top: var(--pcr-space-4);
  right: var(--pcr-space-4);
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: var(--pcr-weight-bold);
  padding: 6px 10px;
  border-radius: var(--pcr-radius-pill);
  color: var(--pcr-color-heading);
  background: var(--pcr-color-secondary-soft);
  border: 1px solid rgba(255,59,48,.32);
}

/* CTA lien */
.pcr-service__cta{ margin: var(--pcr-space-4) 0 0; }

.pcr-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--pcr-color-primary);
  font-weight: var(--pcr-weight-semibold);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: var(--pcr-radius-md);
  background: rgba(64,196,255,.08);
  border: 1px solid rgba(64,196,255,.20);
  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease);
}
.pcr-link::after{
  content: "→";
  font-weight: var(--pcr-weight-bold);
  transform: translateY(-0.5px);
}
.pcr-link:hover{
  background: rgba(64,196,255,.12);
  border-color: rgba(64,196,255,.32);
  transform: translateY(-1px);
  text-decoration: none;
}
.pcr-link:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
}


/* =========================================================
   7) CTA FINAL (full width)
   ========================================================= */

.pcr-cta{
  padding: var(--pcr-space-8) 0;
  background: linear-gradient(135deg, var(--pcr-color-primary-soft), var(--pcr-color-surface));
  border-top: 1px solid var(--pcr-color-border);
}

.pcr-cta__inner{ max-width: 900px; }

.pcr-cta__title{
  margin: 0 0 var(--pcr-space-2);
  color: var(--pcr-color-heading);
  font-size: clamp(22px, 3.2vw, 36px);
}

.pcr-cta__text{
  margin: 0 0 var(--pcr-space-5);
  color: var(--pcr-color-muted);
}

.pcr-cta__actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--pcr-space-3);
}

/* Gutenberg optionnel */
.pcr-content{
  border-top: 1px solid var(--pcr-color-border);
  padding-top: var(--pcr-space-6);
}


/* =========================================================
   8) RESPONSIVE (global)
   ========================================================= */

@media (max-width: 1100px){
  .pcr-steps{ grid-template-columns: 1fr 1fr; } /* si .pcr-steps existe ailleurs */
}

@media (max-width: 640px){
  /* Si tu veux vraiment 1 colonne strip sur mobile, décommente :
  .pcr-strip__grid{ grid-template-columns: 1fr; }
  */

  .pcr-steps{ grid-template-columns: 1fr; } /* si .pcr-steps existe ailleurs */
}


/* =========================================================
   9) PROCESS TIMELINE — Version finale anti-collisions
   Cible : .pcr-section .pcr-wrap > ol.pcr-processTL
   ========================================================= */

.pcr-section .pcr-wrap > ol.pcr-processTL{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-position: outside !important;
  counter-reset: none !important;

  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pcr-space-5);
  align-items: stretch;
}

/* Kill markers natifs */
.pcr-section .pcr-wrap > ol.pcr-processTL::marker,
.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item::marker{
  color: transparent !important;
  font-size: 0 !important;
}

/* Kill ABSOLU pseudo-elements sur LI (anti thème agressif) */
.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item::before,
.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Ligne horizontale */
.pcr-section .pcr-wrap > ol.pcr-processTL::before{
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  top: 28px;
  height: 2px;
  background: rgba(64,196,255,.22);
  border-radius: 999px;
  pointer-events: none;
}

/* Card */
.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item{
  margin: 0 !important;
  padding: var(--pcr-space-5) !important;
  list-style: none !important;
  list-style-type: none !important;

  position: relative;
  border: var(--pcr-border);
  border-radius: var(--pcr-radius-lg);
  background: var(--pcr-color-surface);
  box-shadow: var(--pcr-shadow-sm);

  transition: transform var(--pcr-dur-fast) var(--pcr-ease),
              border-color var(--pcr-dur-fast) var(--pcr-ease),
              background var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: var(--pcr-color-surface-2);
}

/* Head */
.pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__head{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--pcr-space-3);
  margin: 0 0 var(--pcr-space-3);
}

/* Pastille num */
.pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__num{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--pcr-weight-bold);
  font-size: 14px;
  color: #07121f;
  background: var(--pcr-color-primary);
  box-shadow: 0 0 0 5px var(--pcr-color-primary-soft);
}

/* ✅ Point timeline (sur head, pas sur LI) */
.pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__head::before{
  content: "";
  position: absolute;
  top: 28px;   /* même hauteur que la ligne */
  left: 17px;  /* centre de la pastille (34/2) */
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--pcr-color-primary);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Title / text */
.pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__title{
  margin: 0 !important;
  color: var(--pcr-color-heading);
  font-family: var(--pcr-font-heading);
  font-weight: var(--pcr-weight-semibold);
  line-height: var(--pcr-leading-tight);
}
.pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__text{
  margin: 0 !important;
  color: var(--pcr-color-muted);
  line-height: var(--pcr-leading-normal);
}

/* Focus UX */
.pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item:focus-within{
  box-shadow: var(--pcr-focus-ring);
}

/* Tablette : 2 colonnes */
@media (max-width: 1024px){
  .pcr-section .pcr-wrap > ol.pcr-processTL{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pcr-space-4);
  }
  .pcr-section .pcr-wrap > ol.pcr-processTL::before{
    left: 6%;
    right: 6%;
    top: 28px;
  }
}

/* Mobile : timeline verticale */
@media (max-width: 640px){
  .pcr-section .pcr-wrap > ol.pcr-processTL{
    grid-template-columns: 1fr;
    gap: var(--pcr-space-4);
    padding-left: 14px !important;
  }

  .pcr-section .pcr-wrap > ol.pcr-processTL::before{
    left: 18px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    background: rgba(64,196,255,.22);
  }

  .pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__num{
    width: 32px;
    height: 32px;
    font-size: 13px;
    box-shadow: 0 0 0 4px var(--pcr-color-primary-soft);
  }

  .pcr-section .pcr-wrap > ol.pcr-processTL .pcr-processTL__head::before{
    left: 18px;
    top: calc(var(--pcr-space-5) + 16px);
    transform: translate(-50%, -50%);
  }

  /* Kill puces injectées sur enfants (thèmes agressifs) */
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item p::before,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item p::after,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item h3::before,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item h3::after,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item div::before,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item div::after{
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Anti background/mask “liste” */
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item,
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item p{
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* pas d’indentation parasite */
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item{
    padding-left: var(--pcr-space-5) !important;
  }
  .pcr-section .pcr-wrap > ol.pcr-processTL > li.pcr-processTL__item p{
    padding-left: 0 !important;
    text-indent: 0 !important;
  }
}



/* =========================================================
   REALISATIONS HOME — CTA
   ========================================================= */

.pcr-realsHome__cta{
  margin-top: var(--pcr-space-6);
  display: flex;
  justify-content: center;
}

/* Bouton aligné design system */
.pcr-realsHome__btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 22px;
  font-weight: var(--pcr-weight-semibold);
  font-size: var(--pcr-text-sm);

  color: var(--pcr-color-primary);
  background: rgba(64,196,255,.08);
  border: 1px solid rgba(64,196,255,.25);
  border-radius: var(--pcr-radius-md);

  transition:
    transform var(--pcr-dur-fast) var(--pcr-ease),
    background var(--pcr-dur-fast) var(--pcr-ease),
    border-color var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-realsHome__btn span{
  font-weight: var(--pcr-weight-bold);
  transform: translateY(-0.5px);
}

/* Hover / focus */
.pcr-realsHome__btn:hover{
  background: rgba(64,196,255,.14);
  border-color: rgba(64,196,255,.45);
  transform: translateY(-1px);
  text-decoration: none;
}

.pcr-realsHome__btn:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
}

/* Mobile : bouton plein largeur */
@media (max-width: 640px){
  .pcr-realsHome__cta{
    margin-top: var(--pcr-space-5);
  }
  .pcr-realsHome__btn{
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   REALISATIONS HOME — Section carousel (fond distinct + head + CTA) 
   
   Fond VRAIMENT différent (sans sortir des variables)
   - On surcouche pcr-section--alt proprement
   ---------------------------------------------------------- */
.pcr-realsHome{
  position: relative;
  overflow: hidden;

  /* override du alt */
  background:
    radial-gradient(980px 520px at 14% 18%,
      color-mix(in srgb, var(--pcr-color-primary-soft) 62%, transparent),
      transparent 62%
    ),
    radial-gradient(980px 520px at 86% 20%,
      color-mix(in srgb, var(--pcr-color-secondary-soft) 52%, transparent),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pcr-color-surface-2) 92%, var(--pcr-color-bg) 8%),
      color-mix(in srgb, var(--pcr-color-surface-3) 86%, var(--pcr-color-bg) 14%)
    );

  border-top: 1px solid var(--pcr-color-border);
  border-bottom: 1px solid var(--pcr-color-border);
}

/* Liseré premium très discret */
.pcr-realsHome::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(255,255,255,.04);
}

/* Light mode : rester lisible, contrasté, “section différente” */
html[data-theme="light"] .pcr-realsHome{
  background:
    radial-gradient(980px 520px at 14% 18%,
      color-mix(in srgb, var(--pcr-color-primary-soft) 55%, transparent),
      transparent 60%
    ),
    radial-gradient(980px 520px at 86% 20%,
      color-mix(in srgb, var(--pcr-color-secondary-soft) 45%, transparent),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--pcr-color-surface-2) 92%, #fff 8%),
      var(--pcr-color-surface-2)
    );
  box-shadow: none;
}


/* ----------------------------------------------------------
   CTA : centré + bouton plus premium (toujours tokens)
   ---------------------------------------------------------- */
.pcr-realsHome__cta{
  position: relative;
  z-index: 1;
  margin-top: var(--pcr-space-6);
  display: flex;
  justify-content: center;
}

.pcr-realsHome__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: var(--pcr-radius-md);

  /* on “upgrade” ton ghost sans casser .pcr-btn */
  background: color-mix(in srgb, var(--pcr-color-surface) 70%, transparent);
  border-color: color-mix(in srgb, var(--pcr-color-border) 85%, transparent);

  box-shadow: var(--pcr-shadow-sm);
  transition:
    transform var(--pcr-dur-fast) var(--pcr-ease),
    background var(--pcr-dur-fast) var(--pcr-ease),
    border-color var(--pcr-dur-fast) var(--pcr-ease);
}

.pcr-realsHome__btn:hover{
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pcr-color-surface-2) 78%, transparent);
  border-color: color-mix(in srgb, var(--pcr-color-primary) 28%, var(--pcr-color-border));
}

.pcr-realsHome__btn:focus-visible{
  outline: none;
  box-shadow: var(--pcr-focus-ring);
}

/* Petite flèche → plus stable */
.pcr-realsHome__btn > span[aria-hidden="true"]{
  display:inline-flex;
  transform: translateY(-0.5px);
  opacity: .9;
}




/* =========================================================
   TRUST LOGOS — MARQUEE (logos seuls des fournisseurs en bandeaux)
   ========================================================= */

.pcr-trustLogos{
  position: relative;
  padding: clamp(10px, 1.8vw, 18px) 0;
  background: linear-gradient(
    180deg,
    rgba(11,18,32,.35),
    rgba(11,18,32,.15)
  );
  border-top: 1px solid rgba(255,255,255,.06);
}

.pcr-trustLogos__marquee{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}

.pcr-trustLogos__viewport{
  overflow: hidden;
  outline: none;
}

.pcr-trustLogos__viewport:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

.pcr-trustLogos__track{
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  padding: 12px clamp(16px, 2vw, 22px);
  width: max-content;
  will-change: transform;
}

.pcr-trustLogos__item{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
}

.pcr-trustLogos__item img{
  display: block;
  height: 36px;          /* ✅ petit, discret, rassurant */
  width: auto;
  max-width: 140px;
  transition:
    opacity .2s ease,
    filter .2s ease,
    transform .2s ease;
}

.pcr-trustLogos__item img:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* Fades latéraux */
.pcr-trustLogos__fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}

.pcr-trustLogos__fade--left{
  left: 0;
  background: linear-gradient(
    90deg,
    rgba(11,18,32,.9),
    rgba(11,18,32,0)
  );
}

.pcr-trustLogos__fade--right{
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(11,18,32,.9),
    rgba(11,18,32,0)
  );
}

/* Mobile */
@media (max-width: 768px){
  .pcr-trustLogos__item img{
    height: 32px;
    max-width: 150px;
  }
}

/* Accessibilité — motion réduite */
@media (prefers-reduced-motion: reduce){
  .pcr-trustLogos__track{
    transform: none !important;
  }
}