/* =====================================================
   GSSIEP — index-overrides.css (Accueil)
   Base : structure/positionnement = Public_v5_index_fusion.zip

   Objectifs (sans casser l’existant) :
   - "Vous êtes :" : plus harmonieux, moins condensé, centré
   - Supprimer le style "Accéder →" (Particulier / Entreprise)
   - CTA uniquement sur Cyber : "Testez le vôtre" (classe .persona-cta)
   - Conserver : satisfaction, illustration, effet CTA bas, alignement hero
   ===================================================== */


/* =====================================================
   1) "VOUS ÊTES :" — vignettes cliquables (aérées + centrées)
   ===================================================== */
.persona-entry{
  margin-top: 2.2rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align: center; /* centre le bloc global */
}

.persona-title{
  margin: 0 0 1.25rem;
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--color-text, #e5e7eb);
}

/* Grille centrée + espacée (évite l’effet "trop collé") */
.persona-grid{
  max-width: 1120px;
  margin: 0 auto;

  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: clamp(1.2rem, 2.2vw, 2rem);
  align-items: stretch;
}

/* Breakpoints : 2 colonnes puis 1 colonne => beaucoup plus harmonieux */
@media (max-width: 1100px){
  .persona-grid{
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 740px){
  .persona-grid{
    grid-template-columns: 1fr;
  }
}

/* IMPORTANT : neutraliser le bleu/underline des liens */
.persona-entry a,
.persona-entry a:visited{
  color: inherit;
  text-decoration: none;
}

.persona-card{
  display: flex;
  flex-direction: column;
  height: 100%;

  padding: 1.45rem 1.35rem;
  border-radius: 22px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);

  text-align: left; /* texte lisible, même si le bloc est centré */
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

a.persona-card:hover{
  transform: translateY(-3px);
  border-color: rgba(250, 204, 21, .40);
  box-shadow: 0 22px 56px rgba(0,0,0,.32);
}

.persona-card h4{
  margin: 0 0 .75rem;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
  color: rgba(255,255,255,.95);
}

.persona-card p{
  margin: 0 0 1.05rem;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}

/* CTA uniquement pour la carte Cyber (si présent dans le HTML) */
.persona-cta{
  margin-top: 1.05rem;
  align-self: flex-start;

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

  padding: .55rem .9rem;
  border-radius: 999px;

  font-weight: 900;
  color: var(--color-gold);
  border: 1px solid rgba(250,204,21,.40);
  background: rgba(250,204,21,.10);
}




/* CTA discret (Particulier / Entreprise / Cyber) — harmonisation */
.persona-link{
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem .9rem;
  border-radius: 999px;
  font-weight: 900;
  color: var(--color-text, #e5e7eb);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
a.persona-card:hover .persona-link{
  border-color: rgba(250, 204, 21, .40);
  color: rgba(255,255,255,.96);
}
/* =====================================================
   2) MÉTHODE — "Votre satisfaction..." (centré, harmonisé)
   ===================================================== */
.method-satisfaction{
  max-width: 1120px;
  margin: 2.5rem auto 0;
  padding: 1.6rem 1.7rem;
  border-radius: 22px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 18px 44px rgba(0,0,0,.25);

  text-align: center;
}

.method-satisfaction h2{
  margin-bottom: .9rem;
}

.method-satisfaction p{
  margin: 0 auto .85rem;
  max-width: 82ch;
  line-height: 1.85;
  color: rgba(255,255,255,.82);
}

.method-satisfaction p:last-child{
  margin-bottom: 0;
}


/* =====================================================
   3) ILLUSTRATION — séparation avant Avis clients
   ===================================================== */
.home-divider-illustration{
  padding: 2.2rem 0 1.2rem;
}

.divider-illustration-inner{
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-divider-illustration img{
  width: min(250px, 100%);
  max-width: 250px;
  height: auto;
  display: block;
  object-fit: contain;

  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 900ms ease;
}

.home-divider-illustration img:hover{
  transform: rotateY(360deg) rotateX(12deg);
}

@media (prefers-reduced-motion: reduce){
  .home-divider-illustration img{ transition: none; }
  .home-divider-illustration img:hover{ transform: none; }
}


/* =====================================================
   4) CTA BAS — effet "parcours" autour du bouton (gold)
   UNIQUEMENT sur le CTA bas (dans .cta-block)
   ===================================================== */
@property --gssiep-angle{
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.cta-block .cta-btn{
  position: relative;
  z-index: 0;
  border-radius: 18px;
}

.cta-block .cta-btn::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  padding: 2px;
  z-index: -1;

  background: conic-gradient(
    from var(--gssiep-angle),
    transparent 0 58%,
    var(--color-gold) 72%,
    transparent 92%,
    transparent 100%
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: gssiep-border-sweep 2.4s linear infinite,
             gssiep-radius-pulse 3.2s ease-in-out infinite;
}

@keyframes gssiep-border-sweep{
  to{ --gssiep-angle: 360deg; }
}

@keyframes gssiep-radius-pulse{
  0%,100%{ border-radius: 18px; }
  50%{ border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce){
  .cta-block .cta-btn::before{ animation: none; }
}


/* =====================================================
   5) HERO — alignement vertical de la colonne droite
   ===================================================== */
.hero-grid{
  align-items: start; /* au lieu de center */
}

.zones-intervention{
  align-self: start;
  /* Ton réglage validé */
  margin-top: clamp(3rem, 5vw, 7.5rem);
}


/* ======================================================
   Zones d’intervention — carte (hero)
   ====================================================== */
.zones-card{ padding: 1.45rem 1.35rem; }
.zones-card h3{
  margin: 0 0 .75rem;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
  color: rgba(255,255,255,.95);
}
.zones-card .zones-intro{ margin: 0 0 .95rem; color: rgba(255,255,255,.78); }
.zones-card .zones-list{ margin: 0 0 1.05rem; }
.zones-card .zones-contact strong{ display:block; margin-bottom:.25rem; color: rgba(255,255,255,.90); }
.zones-card .zones-contact a[href^="tel"]{ color: rgba(255,255,255,.95); }
.zones-card .zones-contact a[href^="mailto"]{ color: #3fd46b; }