/**
 * PREGERIS UI — Feuille de composants
 * Structure : BASE · BOUTONS · HERO · BENTO · LEDGER · TIMELINE · CARTES
 * SECTEURS · FAQ · CTA · CONTACT · RESSOURCES · TABLEAUX · BREADCRUMB · 404
 * Toutes les classes sont préfixées pregeris- (aucun conflit thème/extension).
 * Dépend de pregeris-tokens.css.
 */

/* ===================== BASE ===================== */

.pregeris-section {
  padding: var(--pregeris-space-16) var(--pregeris-space-4);
}
.pregeris-section--alt { background: var(--pregeris-grey-050); }
.pregeris-section--blue {
  background: var(--pregeris-blue-deep);
  color: var(--pregeris-white);
}
.pregeris-wrap {
  max-width: 1200px;
  margin-inline: auto;
}
.pregeris-prose {
  max-width: var(--pregeris-measure);
  font-size: var(--pregeris-text-base);
  line-height: var(--pregeris-leading);
  color: var(--pregeris-ink);
}
.pregeris-prose h2, .pregeris-prose h3 { color: var(--pregeris-blue); }
.pregeris-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pregeris-red);
  margin-bottom: var(--pregeris-space-3);
}
.pregeris-section--blue .pregeris-kicker { color: #ff9d9d; } /* contraste AA sur bleu profond */

/* ===================== BOUTONS ===================== */

.pregeris-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pregeris-space-2);
  min-height: 48px;               /* > 44 px tactile */
  padding: 0.75rem 1.5rem;
  border-radius: var(--pregeris-radius);
  font-family: var(--pregeris-font-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--pregeris-dur-fast) var(--pregeris-ease),
              border-color var(--pregeris-dur-fast) var(--pregeris-ease),
              box-shadow var(--pregeris-dur-fast) var(--pregeris-ease);
}
.pregeris-btn--primary {
  background: var(--pregeris-red);
  color: var(--pregeris-white);
}
.pregeris-btn--primary:hover,
.pregeris-btn--primary:focus-visible {
  background: var(--pregeris-red-dark);
  color: var(--pregeris-white);
}
.pregeris-btn--secondary {
  background: transparent;
  color: var(--pregeris-blue);
  border-color: var(--pregeris-blue);
}
.pregeris-btn--secondary:hover,
.pregeris-btn--secondary:focus-visible {
  background: var(--pregeris-blue);
  color: var(--pregeris-white);
}
.pregeris-section--blue .pregeris-btn--secondary,
.pregeris-hero .pregeris-btn--secondary,
.pregeris-cta .pregeris-btn--secondary {
  color: var(--pregeris-white);
  border-color: var(--pregeris-white);
}
.pregeris-section--blue .pregeris-btn--secondary:hover,
.pregeris-section--blue .pregeris-btn--secondary:focus-visible,
.pregeris-hero .pregeris-btn--secondary:hover,
.pregeris-hero .pregeris-btn--secondary:focus-visible,
.pregeris-cta .pregeris-btn--secondary:hover,
.pregeris-cta .pregeris-btn--secondary:focus-visible {
  background: var(--pregeris-white);
  color: var(--pregeris-blue);
}
.pregeris-btn:focus-visible,
a.pregeris-card:focus-visible,
.pregeris-ledger__nav a:focus-visible {
  outline: 3px solid var(--pregeris-blue);
  outline-offset: 2px;
}
.pregeris-section--blue .pregeris-btn:focus-visible { outline-color: var(--pregeris-white); }

/* ===================== HERO (portage Animated Gradient With SVG — MIT, danielpetho/fancy) ===================== */

.pregeris-hero {
  position: relative;
  overflow: hidden;
  background: var(--pregeris-blue-deep);
  color: var(--pregeris-white);
  padding: clamp(4rem, 10vw, 8rem) var(--pregeris-space-4);
}
.pregeris-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(70px);
  pointer-events: none;
}
.pregeris-hero__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.pregeris-hero__orb--1 {
  width: 55vmax; height: 55vmax; top: -20%; left: -10%;
  background: var(--pregeris-blue);
  opacity: 0.85;
  animation: pregeris-drift-1 var(--pregeris-dur-ambient-1) ease-in-out infinite;
}
.pregeris-hero__orb--2 {
  width: 40vmax; height: 40vmax; bottom: -25%; right: -8%;
  background: var(--pregeris-red);
  opacity: 0.10;                    /* rouge = halo secondaire très faible */
  animation: pregeris-drift-2 var(--pregeris-dur-ambient-2) ease-in-out infinite;
}
.pregeris-hero__orb--3 {
  width: 35vmax; height: 35vmax; top: 10%; right: 25%;
  background: #3b3aa0;
  opacity: 0.5;
  animation: pregeris-drift-3 var(--pregeris-dur-ambient-3) ease-in-out infinite;
}
@keyframes pregeris-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(6%, 4%); }
  50% { transform: translate(2%, 9%); }
  75% { transform: translate(-4%, 3%); }
}
@keyframes pregeris-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-5%, -6%); }
  66% { transform: translate(3%, -2%); }
}
@keyframes pregeris-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-7%, 6%); }
}
.pregeris-hero__inner {
  position: relative;
  z-index: var(--pregeris-z-base);
  max-width: 1200px;
  margin-inline: auto;
}
.pregeris-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.15;
  color: var(--pregeris-white);
  max-width: 20ch;
  margin: 0 0 var(--pregeris-space-4);
}
.pregeris-hero__subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.6;
  max-width: 56ch;
  color: #dfe1f2;                   /* AA sur bleu profond */
  margin: 0 0 var(--pregeris-space-8);
}
.pregeris-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pregeris-space-4);
}
/* Variante statique (page Le cabinet) : mêmes halos, sans animation */
.pregeris-hero--static .pregeris-hero__orb { animation: none; }

/* ===================== BENTO (réimplémentation originale du principe BlueprintBentoGrid) ===================== */

.pregeris-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pregeris-space-4);
  /* trame "plan technique" bleu très pâle */
  background-image:
    linear-gradient(var(--pregeris-blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pregeris-blue-line) 1px, transparent 1px);
  background-size: 56px 56px;
  padding: var(--pregeris-space-6);
  border-radius: var(--pregeris-radius-lg);
}
.pregeris-bento__card {
  position: relative;
  grid-column: span 4;
  background: var(--pregeris-white);
  border: var(--pregeris-border);
  border-radius: var(--pregeris-radius);
  padding: var(--pregeris-space-6);
  box-shadow: var(--pregeris-shadow-sm);
  transition: box-shadow var(--pregeris-dur) var(--pregeris-ease),
              border-color var(--pregeris-dur) var(--pregeris-ease);
}
.pregeris-bento__card:hover,
.pregeris-bento__card:focus-within {
  box-shadow: 0 0 0 2px var(--pregeris-red), var(--pregeris-shadow);
  border-color: transparent;
}
.pregeris-bento__card--main { grid-column: span 8; }
/* Repères d'angle façon plan coté */
.pregeris-bento__card::before,
.pregeris-bento__card::after,
.pregeris-bento__mark::before,
.pregeris-bento__mark::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--pregeris-blue);
  border-style: solid;
  opacity: 0.55;
}
.pregeris-bento__card::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; }
.pregeris-bento__card::after  { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.pregeris-bento__mark::before { bottom: 8px; left: 8px; border-width: 0 0 2px 2px; }
.pregeris-bento__mark::after  { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }
.pregeris-bento__card h3 {
  color: var(--pregeris-blue);
  margin-top: 0;
}
.pregeris-bento__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pregeris-red);
  margin-bottom: var(--pregeris-space-2);
}
.pregeris-bento__card ul {
  margin: var(--pregeris-space-3) 0 var(--pregeris-space-4);
  padding-left: 1.1em;
  line-height: 1.6;
}
.pregeris-bento__link {
  font-weight: 600;
  color: var(--pregeris-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 1024px) {
  .pregeris-bento__card, .pregeris-bento__card--main { grid-column: span 6; }
}
@media (max-width: 768px) {
  .pregeris-bento { padding: var(--pregeris-space-3); background-size: 40px 40px; }
  .pregeris-bento__card, .pregeris-bento__card--main { grid-column: span 12; }
}

/* ===================== LEDGER (réimplémentation originale du principe Service Ledger) ===================== */

.pregeris-ledger {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--pregeris-space-12);
  align-items: start;
}
.pregeris-ledger__nav {
  position: sticky;
  top: 96px;                        /* sous le header Astra */
  z-index: var(--pregeris-z-sticky);
}
.pregeris-ledger__nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--pregeris-grey-100);
}
.pregeris-ledger__nav a {
  display: block;
  padding: var(--pregeris-space-3) var(--pregeris-space-4);
  color: var(--pregeris-ink-soft);
  text-decoration: none;
  font-weight: 500;
  border-left: 2px solid transparent;
  margin-left: -2px;
  transition: color var(--pregeris-dur-fast), border-color var(--pregeris-dur-fast);
}
.pregeris-ledger__nav a:hover { color: var(--pregeris-blue); }
.pregeris-ledger__nav a[aria-current="true"] {
  color: var(--pregeris-blue);
  border-left-color: var(--pregeris-red);
  font-weight: 700;
}
.pregeris-ledger__panel {
  padding: var(--pregeris-space-8) 0;
  border-bottom: var(--pregeris-border);
  scroll-margin-top: 110px;
}
.pregeris-ledger__panel:last-child { border-bottom: 0; }
.pregeris-ledger__panel h2 { color: var(--pregeris-blue); margin-top: 0; }
@media (max-width: 768px) {
  .pregeris-ledger { grid-template-columns: 1fr; gap: 0; }
  .pregeris-ledger__nav {
    top: 64px;
    background: var(--pregeris-paper);
    border-bottom: var(--pregeris-border);
  }
  .pregeris-ledger__nav ol {
    display: flex;
    overflow-x: auto;
    border-left: 0;
    -webkit-overflow-scrolling: touch;
  }
  .pregeris-ledger__nav a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    margin-left: 0;
  }
  .pregeris-ledger__nav a[aria-current="true"] { border-bottom-color: var(--pregeris-red); }
}

/* ===================== TIMELINE (réimplémentation originale du principe Aceternity Timeline) ===================== */

.pregeris-timeline {
  position: relative;
  --pregeris-beam: 0%;              /* progression, pilotée par JS */
}
.pregeris-timeline__track {
  position: absolute;
  left: 23px;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--pregeris-grey-100);
}
.pregeris-timeline__track::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--pregeris-beam);
  background: var(--pregeris-blue);
  transition: height var(--pregeris-dur-slow) var(--pregeris-ease);
}
.pregeris-timeline__step {
  position: relative;
  padding: 0 0 var(--pregeris-space-12) 72px;
}
.pregeris-timeline__num {
  position: absolute;
  left: 0; top: 0;
  width: 48px; height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--pregeris-white);
  border: 2px solid var(--pregeris-blue);
  color: var(--pregeris-blue);
  font-weight: 700;
  z-index: var(--pregeris-z-base);
}
.pregeris-timeline__step.is-active .pregeris-timeline__num {
  border-color: var(--pregeris-red);
  color: var(--pregeris-red);
}
.pregeris-timeline__step h3 { color: var(--pregeris-blue); margin: 0.4rem 0 var(--pregeris-space-3); }
.pregeris-timeline__step .pregeris-prose { max-width: 62ch; }
/* Révélation discrète au scroll (annulée si reduced-motion ou sans JS) */
.pregeris-js .pregeris-timeline__step {
  opacity: 0.25;
  transform: translateY(8px);
  transition: opacity var(--pregeris-dur-slow) var(--pregeris-ease),
              transform var(--pregeris-dur-slow) var(--pregeris-ease);
}
.pregeris-js .pregeris-timeline__step.is-visible {
  opacity: 1;
  transform: none;
}
@media (max-width: 768px) {
  .pregeris-timeline__step { padding-left: 60px; padding-bottom: var(--pregeris-space-8); }
  .pregeris-timeline__num { width: 40px; height: 40px; }
  .pregeris-timeline__track { left: 19px; }
}

/* ===================== CARTES GÉNÉRIQUES / SECTEURS / RESSOURCES ===================== */

.pregeris-grid {
  display: grid;
  gap: var(--pregeris-space-4);
  /* auto-fit (et non auto-fill) : les cartes s'élargissent pour remplir la
     ligne au lieu de laisser des colonnes vides — évite les coupures de mots. */
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.pregeris-card h3,
.pregeris-bento__card h3,
.pregeris-flip__face h3,
.pregeris-sector__name {
  overflow-wrap: break-word;
  hyphens: none;
}
.pregeris-card {
  display: block;
  background: var(--pregeris-white);
  border: var(--pregeris-border);
  border-radius: var(--pregeris-radius);
  padding: var(--pregeris-space-6);
  text-decoration: none;
  color: var(--pregeris-ink);
  box-shadow: var(--pregeris-shadow-sm);
  transition: box-shadow var(--pregeris-dur) var(--pregeris-ease),
              border-color var(--pregeris-dur) var(--pregeris-ease);
}
.pregeris-card:hover,
.pregeris-card:focus-visible {
  /* Cadre rouge PREGERIS au survol uniquement (anneau : aucun décalage de mise en page) */
  box-shadow: 0 0 0 2px var(--pregeris-red), var(--pregeris-shadow);
  border-color: transparent;
}
.pregeris-card h3 { color: var(--pregeris-blue); margin-top: 0; }
.pregeris-card p { color: var(--pregeris-ink-soft); margin-bottom: 0; }
.pregeris-card__cta {
  display: inline-block;
  margin-top: var(--pregeris-space-3);
  font-weight: 600;
  color: var(--pregeris-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================== FAQ (details/summary — accessible sans JS) ===================== */

.pregeris-faq { max-width: var(--pregeris-measure); }
.pregeris-faq details {
  border: var(--pregeris-border);
  border-radius: var(--pregeris-radius);
  background: var(--pregeris-white);
  margin-bottom: var(--pregeris-space-3);
}
.pregeris-faq summary {
  cursor: pointer;
  padding: var(--pregeris-space-4) var(--pregeris-space-6);
  font-weight: 600;
  color: var(--pregeris-blue);
  list-style: none;
  position: relative;
  min-height: 44px;
}
.pregeris-faq summary::-webkit-details-marker { display: none; }
.pregeris-faq summary::after {
  content: "+";
  position: absolute;
  right: var(--pregeris-space-6);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--pregeris-red);
}
.pregeris-faq details[open] summary::after { content: "–"; }
.pregeris-faq summary:focus-visible {
  outline: 3px solid var(--pregeris-blue);
  outline-offset: -3px;
}
.pregeris-faq details > div {
  padding: 0 var(--pregeris-space-6) var(--pregeris-space-4);
  line-height: var(--pregeris-leading);
}

/* ===================== BANDEAU CTA ===================== */

.pregeris-cta {
  background: var(--pregeris-blue-deep);
  color: var(--pregeris-white);
  border-radius: var(--pregeris-radius-lg);
  padding: var(--pregeris-space-12) var(--pregeris-space-8);
  text-align: center;
}
.pregeris-cta h2 { color: var(--pregeris-white); margin-top: 0; }
.pregeris-cta p {
  color: #dfe1f2;
  max-width: 60ch;
  margin: var(--pregeris-space-3) auto var(--pregeris-space-6);
}

/* ===================== CONTACT (portage Tailark Contact Form — MIT) ===================== */

.pregeris-contact {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
  gap: var(--pregeris-space-12);
  align-items: start;
}
.pregeris-contact__aside .pregeris-contact__item {
  display: flex;
  gap: var(--pregeris-space-3);
  margin-bottom: var(--pregeris-space-4);
  align-items: baseline;
}
.pregeris-contact__form {
  background: var(--pregeris-white);
  border: var(--pregeris-border);
  border-radius: var(--pregeris-radius-lg);
  padding: var(--pregeris-space-8);
  box-shadow: var(--pregeris-shadow);
}
.pregeris-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pregeris-space-4);
}
.pregeris-form-field { margin-bottom: var(--pregeris-space-4); }
.pregeris-form-field label {
  display: block;
  font-weight: 600;
  color: var(--pregeris-ink);
  margin-bottom: var(--pregeris-space-1);
}
.pregeris-form-field .pregeris-required { color: var(--pregeris-red); }
.pregeris-form-field input,
.pregeris-form-field select,
.pregeris-form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.65rem 0.9rem;
  font-size: 1rem;
  font-family: var(--pregeris-font-sans);
  color: var(--pregeris-ink);
  background: var(--pregeris-white);
  border: 1px solid #aab0ba;        /* ≥ 3:1 sur blanc */
  border-radius: var(--pregeris-radius-sm);
}
.pregeris-form-field textarea { min-height: 140px; }
.pregeris-form-field input:focus-visible,
.pregeris-form-field select:focus-visible,
.pregeris-form-field textarea:focus-visible {
  outline: 3px solid var(--pregeris-blue);
  outline-offset: 1px;
}
.pregeris-form-field .pregeris-error {
  color: var(--pregeris-red);
  font-size: var(--pregeris-text-sm);
  margin-top: var(--pregeris-space-1);
}
.pregeris-form-notice {
  font-size: var(--pregeris-text-sm);
  color: var(--pregeris-ink-soft);
  margin-top: var(--pregeris-space-3);
}
/* Honeypot : champ invisible pour les humains, présent pour les robots */
.pregeris-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .pregeris-contact { grid-template-columns: 1fr; gap: var(--pregeris-space-8); }
  .pregeris-form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ===================== TABLEAUX DE LIVRABLES / ENCADRÉS ===================== */

.pregeris-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pregeris-text-base);
}
.pregeris-table caption {
  text-align: left;
  font-weight: 600;
  color: var(--pregeris-blue);
  padding-bottom: var(--pregeris-space-3);
}
.pregeris-table th {
  background: var(--pregeris-blue-soft);
  color: var(--pregeris-blue);
  text-align: left;
}
.pregeris-table th, .pregeris-table td {
  border: var(--pregeris-border);
  padding: var(--pregeris-space-3) var(--pregeris-space-4);
  vertical-align: top;
  line-height: 1.55;
}
.pregeris-callout {
  border-left: 4px solid var(--pregeris-blue);
  background: var(--pregeris-blue-soft);
  border-radius: 0 var(--pregeris-radius) var(--pregeris-radius) 0;
  padding: var(--pregeris-space-4) var(--pregeris-space-6);
  max-width: var(--pregeris-measure);
}
.pregeris-callout--accent { border-left-color: var(--pregeris-red); }
@media (max-width: 600px) {
  .pregeris-table { display: block; overflow-x: auto; }
}

/* ===================== FIL D'ARIANE (habillage Yoast breadcrumb) ===================== */

.pregeris-breadcrumb {
  font-size: var(--pregeris-text-sm);
  color: var(--pregeris-ink-soft);
  padding: var(--pregeris-space-3) 0;
}
.pregeris-breadcrumb a { color: var(--pregeris-blue); text-decoration: none; }
.pregeris-breadcrumb a:hover { text-decoration: underline; }

/* ===================== PAGE 404 ===================== */

.pregeris-404 {
  text-align: center;
  padding: var(--pregeris-space-24) var(--pregeris-space-4);
}
.pregeris-404 h1 { color: var(--pregeris-blue); }
.pregeris-404 .pregeris-hero__actions { justify-content: center; margin-top: var(--pregeris-space-8); }

/* ===================== ICÔNES SVG « plan technique » ===================== */

.pregeris-ico {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.28em;
  flex: none;
}
/* Médaillon : cadre "plan" contenant l'icône, ancre visuelle des cartes */
.pregeris-ico-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--pregeris-space-4);
  color: var(--pregeris-blue);
  background: var(--pregeris-blue-soft);
  border: 1px solid var(--pregeris-blue-line);
  border-radius: var(--pregeris-radius);
}
.pregeris-ico-badge .pregeris-ico {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
/* Repères d'angle du médaillon (rappel de la trame bento) */
.pregeris-ico-badge::before,
.pregeris-ico-badge::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border: 1.5px solid var(--pregeris-red);
  opacity: 0.65;
}
.pregeris-ico-badge::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
.pregeris-ico-badge::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }
/* Icône dans le pastille numérotée de la timeline */
.pregeris-timeline__num .pregeris-ico {
  width: 22px; height: 22px;
  stroke-width: 1.7;
}

/* ===================== MICRO-INTERACTIONS ===================== */

/* Flèche animée sur les liens de carte */
.pregeris-card__cta,
.pregeris-bento__link {
  position: relative;
}
.pregeris-card__cta::after,
.pregeris-bento__link::after {
  content: "\2192"; /* → */
  display: inline-block;
  margin-left: 0.4em;
  transition: transform var(--pregeris-dur) var(--pregeris-ease);
}
.pregeris-card:hover .pregeris-card__cta::after,
.pregeris-card:focus-visible .pregeris-card__cta::after,
.pregeris-bento__card:hover .pregeris-bento__link::after,
.pregeris-bento__link:hover::after {
  transform: translateX(4px);
}
/* Léger lift des cartes déjà présent ; on ajoute un accent de liseré haut */
.pregeris-bento__card--main { border-top: 3px solid var(--pregeris-red); }

/* ===================== APPARITION AU DÉFILEMENT ===================== */

.pregeris-js .pregeris-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--pregeris-dur-slow) var(--pregeris-ease),
              transform var(--pregeris-dur-slow) var(--pregeris-ease);
  transition-delay: var(--pregeris-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.pregeris-js .pregeris-reveal.is-in {
  opacity: 1;
  transform: none;
}

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

/* Fine trame "plan" par-dessus les halos, très discrète */
.pregeris-hero__inner::before {
  content: "";
  position: absolute;
  inset: -40px -20px auto auto;
  width: 180px; height: 180px;
  background-image:
    linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at top right, #000, transparent 70%);
          mask-image: radial-gradient(circle at top right, #000, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ===================== HERO DE PAGE (bandeau pleine largeur) ===================== */

.pregeris-pagehero {
  position: relative;
  /* Pleine largeur : les pages concernées sont en gabarit Astra « pleine
     largeur / étiré » (site-content-layout=page-builder), le conteneur occupe
     donc tout l'écran et le hero s'étend d'un bord à l'autre. */
  width: 100%;
  margin-bottom: var(--pregeris-space-12);
  min-height: 300px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pregeris-blue-deep);
  color: var(--pregeris-white);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pregeris-space-6);
}
/* Photo de fond + voile bleu (contraste texte garanti ≥ WCAG AA) */
.pregeris-pagehero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgba(26,24,87,0.94) 0%, rgba(26,24,87,0.80) 45%, rgba(26,24,87,0.55) 100%),
    var(--pregeris-hero-image, linear-gradient(0deg, var(--pregeris-blue-deep), var(--pregeris-blue-deep)));
  background-size: cover;
  background-position: center;
}
.pregeris-pagehero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin-inline: auto;
  width: 100%;
}
.pregeris-pagehero__title {
  color: var(--pregeris-white);
  font-size: clamp(1.75rem, 3.4vw, 2.7rem);
  line-height: 1.15;
  margin: var(--pregeris-space-2) 0 0;
  max-width: 26ch;
}
.pregeris-pagehero .pregeris-kicker { color: #ff9d9d; margin-bottom: 0; }
.pregeris-pagehero .pregeris-ico-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--pregeris-white);
  margin-bottom: var(--pregeris-space-3);
}
.pregeris-pagehero .pregeris-ico-badge::before,
.pregeris-pagehero .pregeris-ico-badge::after { border-color: var(--pregeris-red); }
/* Grande icône en filigrane (différencie chaque page, 100 % sûre) */
.pregeris-pagehero__watermark {
  position: absolute;
  right: clamp(-30px, 1vw, 48px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--pregeris-white);
  opacity: 0.09;
  pointer-events: none;
}
.pregeris-pagehero__watermark .pregeris-ico {
  width: min(40vw, 320px);
  height: min(40vw, 320px);
  stroke-width: 0.7;
}
@media (max-width: 600px) {
  .pregeris-pagehero { min-height: 220px; margin-bottom: var(--pregeris-space-8); }
  .pregeris-pagehero__watermark { opacity: 0.06; right: -40px; }
}

/* Gabarit Astra pleine largeur : le hero et les bandes de section occupent tout
   l'écran, mais le corps de texte garde une largeur de lecture confortable et
   centrée. On exclut donc les composants pleine largeur du recentrage. */
.ast-page-builder-template .entry-content > *:not(.pregeris-pagehero):not(.pregeris-hero):not(.pregeris-section) {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--pregeris-space-6);
  box-sizing: border-box;
}

/* ===================== FLIP CARDS — 5 expertises ===================== */

.pregeris-flips {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pregeris-space-4);
}
.pregeris-flip { grid-column: span 4; perspective: 1600px; }
.pregeris-flip--wide { grid-column: span 6; }   /* Technique, mise en avant */
@media (max-width: 900px) {
  .pregeris-flip, .pregeris-flip--wide { grid-column: span 6; }
}
@media (max-width: 560px) {
  .pregeris-flip, .pregeris-flip--wide { grid-column: span 12; }
}

.pregeris-flip__card {
  position: relative;
  min-height: 340px;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--pregeris-dur-slow) var(--pregeris-ease);
}
.pregeris-flip:hover .pregeris-flip__card,
.pregeris-flip:focus-within .pregeris-flip__card,
.pregeris-flip__card.is-flipped {
  transform: rotateY(180deg);
}
.pregeris-flip__face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--pregeris-space-6);
  border-radius: var(--pregeris-radius);
  border: 1px solid var(--pregeris-grey-100);
  background: var(--pregeris-white);
  box-shadow: var(--pregeris-shadow-sm);
  transition: box-shadow var(--pregeris-dur) var(--pregeris-ease);
}
.pregeris-flip:hover .pregeris-flip__face,
.pregeris-flip:focus-within .pregeris-flip__face {
  box-shadow: 0 0 0 2px var(--pregeris-red), var(--pregeris-shadow);
}
/* Recto : trame plan discrète + repères d'angle (continuité avec le bento) */
.pregeris-flip__face--front {
  background-image:
    linear-gradient(var(--pregeris-blue-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--pregeris-blue-line) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center;
}
.pregeris-flip__face--front::before,
.pregeris-flip__face--front::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border-color: var(--pregeris-blue); border-style: solid; opacity: 0.5;
}
.pregeris-flip__face--front::before { top: 8px; left: 8px; border-width: 1.5px 0 0 1.5px; }
.pregeris-flip__face--front::after  { top: 8px; right: 8px; border-width: 1.5px 1.5px 0 0; }
.pregeris-flip__face--back {
  transform: rotateY(180deg);
  background: var(--pregeris-blue-deep);
  border-color: var(--pregeris-blue-deep);
  color: var(--pregeris-white);
}
.pregeris-flip__face--back h3 { color: var(--pregeris-white); margin-top: 0; }
.pregeris-flip__num {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--pregeris-red);
}
.pregeris-flip__face--front h3 { color: var(--pregeris-blue); margin: var(--pregeris-space-2) 0; }
.pregeris-flip__face--front p { color: var(--pregeris-ink-soft); }
.pregeris-flip__hint {
  margin-top: auto; font-weight: 600; font-size: var(--pregeris-text-sm);
  color: var(--pregeris-blue);
}
.pregeris-flip__face--back ul {
  list-style: none; margin: var(--pregeris-space-3) 0; padding: 0; flex: 1;
}
.pregeris-flip__face--back li {
  position: relative; padding-left: 1.3em; margin-bottom: var(--pregeris-space-2);
  line-height: 1.45; color: #e7e8f5;
}
.pregeris-flip__face--back li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border: 1.5px solid var(--pregeris-red);
  border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}
.pregeris-flip__cta {
  display: inline-flex; align-items: center; gap: 0.4em;
  color: var(--pregeris-white); font-weight: 600; text-decoration: underline;
  text-underline-offset: 3px;
}
.pregeris-flip__cta::after { content: "\2192"; transition: transform var(--pregeris-dur) var(--pregeris-ease); }
.pregeris-flip__cta:hover::after { transform: translateX(4px); }
.pregeris-flip .pregeris-ico-badge { margin-bottom: var(--pregeris-space-2); }

/* ===================== SECTEURS — grille à fond illustré ===================== */

.pregeris-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--pregeris-space-4);
}
.pregeris-sector {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  min-height: 132px;
  padding: var(--pregeris-space-4);
  border: 1px solid var(--pregeris-grey-100);
  border-radius: var(--pregeris-radius);
  background: var(--pregeris-white);
  text-decoration: none;
  box-shadow: var(--pregeris-shadow-sm);
  transition: box-shadow var(--pregeris-dur) var(--pregeris-ease),
              border-color var(--pregeris-dur) var(--pregeris-ease);
}
.pregeris-sector__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pregeris-blue);
  opacity: 0.14;
  transition: opacity var(--pregeris-dur) var(--pregeris-ease),
              transform var(--pregeris-dur-slow) var(--pregeris-ease);
  pointer-events: none;
}
.pregeris-sector__bg .pregeris-ico {
  width: 104px; height: 104px; stroke-width: 1.1;
}
.pregeris-sector__name {
  position: relative;
  font-weight: 700;
  color: var(--pregeris-blue);
  line-height: 1.25;
}
.pregeris-sector:hover,
.pregeris-sector:focus-visible {
  box-shadow: 0 0 0 2px var(--pregeris-red), var(--pregeris-shadow);
  border-color: transparent;
}
.pregeris-sector:hover .pregeris-sector__bg,
.pregeris-sector:focus-visible .pregeris-sector__bg {
  opacity: 0.24;
  transform: scale(1.06);
}

/* ===================== ENTRÉE DU HERO (au chargement) ===================== */

.pregeris-js .pregeris-hero__title,
.pregeris-js .pregeris-hero__subtitle,
.pregeris-js .pregeris-hero__actions {
  opacity: 0;
  transform: translateY(14px);
  animation: pregeris-rise 0.7s var(--pregeris-ease) forwards;
}
.pregeris-js .pregeris-hero__subtitle { animation-delay: 0.12s; }
.pregeris-js .pregeris-hero__actions { animation-delay: 0.24s; }
@keyframes pregeris-rise {
  to { opacity: 1; transform: none; }
}

/* ===================== RÉDUCTION DE MOUVEMENT / SANS JS ===================== */

@media (prefers-reduced-motion: reduce) {
  .pregeris-hero__orb,
  .pregeris-timeline__track::before { animation: none !important; transition: none !important; }
  .pregeris-js .pregeris-timeline__step {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pregeris-timeline { --pregeris-beam: 100%; }
  .pregeris-btn, .pregeris-card, .pregeris-bento__card { transition: none; }
  .pregeris-js .pregeris-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pregeris-card__cta::after, .pregeris-bento__link::after { transition: none !important; }
  /* Flip cards : pas de rotation 3D, fondu recto/verso à la place */
  .pregeris-flip__card { transition: none !important; }
  .pregeris-flip:hover .pregeris-flip__card,
  .pregeris-flip:focus-within .pregeris-flip__card,
  .pregeris-flip__card.is-flipped { transform: none !important; }
  .pregeris-flip__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity var(--pregeris-dur) ease; }
  .pregeris-flip__face--back { transform: none !important; opacity: 0; }
  .pregeris-flip:hover .pregeris-flip__face--back,
  .pregeris-flip:focus-within .pregeris-flip__face--back,
  .pregeris-flip__card.is-flipped .pregeris-flip__face--back { opacity: 1; }
  .pregeris-flip:hover .pregeris-flip__face--front,
  .pregeris-flip:focus-within .pregeris-flip__face--front,
  .pregeris-flip__card.is-flipped .pregeris-flip__face--front { opacity: 0; }
  /* Entrée du hero neutralisée */
  .pregeris-js .pregeris-hero__title,
  .pregeris-js .pregeris-hero__subtitle,
  .pregeris-js .pregeris-hero__actions { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pregeris-sector__bg { transition: none !important; }
}
/* Sans JavaScript : timeline entièrement visible, ligne complète */
html:not(.pregeris-js) .pregeris-timeline { --pregeris-beam: 100%; }