@import url('../fonts/fonts.css');

/* ══════════════════════════════════════════════════════════════
   WIN Expertise Conseil — feuille de style du site vitrine

   Les deux couleurs de marque sont relevées directement sur le
   logo du cabinet : le bleu roi des vagues et le rouge-orangé du
   nom. Tout le reste de la palette en découle.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Marque */
  --bleu: #1b359c;
  --bleu-fonce: #12246b;
  --bleu-nuit: #0b1743;
  --bleu-clair: #3a5ac4;
  --bleu-pale: #eef1fb;
  --rouge: #fb3c1f;
  --rouge-fonce: #d92c11;
  --rouge-pale: #fff0ed;

  /* Neutres */
  --encre: #131b2e;
  --texte: #3d4759;
  --texte-doux: #6b7688;
  --trait: #e2e7f0;
  --fond: #ffffff;
  --fond-doux: #f6f8fc;

  /* Mesures */
  --largeur: 1200px;
  --rayon: 14px;
  --rayon-lg: 22px;
  --ombre: 0 1px 2px rgba(19, 27, 46, .04), 0 8px 24px rgba(19, 27, 46, .06);
  --ombre-forte: 0 4px 12px rgba(19, 27, 46, .08), 0 24px 48px rgba(19, 27, 46, .12);
  --transition: .25s cubic-bezier(.4, 0, .2, 1);

  --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

/* ── Base ─────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  /* Compense la hauteur de l'en-tête fixe lors des ancres. */
  scroll-padding-top: calc(96px + var(--promo-h, 0px));
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.7;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--encre);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--rouge); }

ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--rouge); color: #fff; }

:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Trame ────────────────────────────────────────────────── */

.contenu {
  width: min(100% - 2.5rem, var(--largeur));
  margin-inline: auto;
}

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section--doux { background: var(--fond-doux); }
.section--nuit { background: var(--bleu-nuit); color: #c3cbe6; }
.section--nuit h2, .section--nuit h3 { color: #fff; }

.grille { display: grid; gap: 1.5rem; }
@media (min-width: 640px)  { .grille--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grille--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grille--4 { grid-template-columns: repeat(4, 1fr); } }

/* ── Éléments d'introduction de section ───────────────────── */

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge);
  margin-bottom: 1rem;
}
.surtitre::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--rouge);
  border-radius: 2px;
}
.section--nuit .surtitre { color: #ff8062; }
.section--nuit .surtitre::before { background: #ff8062; }

.intro-section { max-width: 46rem; margin-bottom: 3.25rem; }
.intro-section--centre { margin-inline: auto; text-align: center; }
.intro-section--centre .surtitre { justify-content: center; }
.chapeau { font-size: 1.08rem; color: var(--texte-doux); margin-bottom: 0; }
.section--nuit .chapeau { color: #a7b2d4; }

/* ── Boutons ──────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--police);
  font-size: .97rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.bouton svg { width: 18px; height: 18px; flex-shrink: 0; }

.bouton--principal { background: var(--rouge); color: #fff; }
.bouton--principal:hover {
  background: var(--rouge-fonce);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(251, 60, 31, .32);
}

.bouton--bleu { background: var(--bleu); color: #fff; }
.bouton--bleu:hover {
  background: var(--bleu-fonce);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(27, 53, 156, .28);
}

.bouton--contour { border-color: var(--trait); color: var(--encre); background: transparent; }
.bouton--contour:hover { border-color: var(--bleu); color: var(--bleu); background: var(--bleu-pale); }

.bouton--clair { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.bouton--clair:hover { background: #fff; color: var(--bleu); border-color: #fff; }

/* Lien fléché, employé en fin de carte. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .93rem;
}
.lien-fleche svg { width: 16px; height: 16px; transition: transform var(--transition); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* ── En-tête ──────────────────────────────────────────────── */

.entete {
  position: fixed;
  top: var(--promo-h, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition), border-color var(--transition),
              top .45s cubic-bezier(.2, .8, .25, 1);
}
.entete.est-defile {
  border-bottom-color: var(--trait);
  box-shadow: 0 4px 20px rgba(19, 27, 46, .06);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 82px;
}
.entete__logo { flex-shrink: 0; }
.entete__logo img { height: 46px; width: auto; }

.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: center; gap: .35rem; }
.nav__lien {
  position: relative;
  display: block;
  padding: .55rem .95rem;
  border-radius: 8px;
  font-size: .96rem;
  font-weight: 500;
  color: var(--texte);
}
.nav__lien:hover { color: var(--bleu); background: var(--bleu-pale); }
.nav__lien.est-actif { color: var(--bleu); font-weight: 600; }
.nav__lien.est-actif::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 18px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--rouge);
}

.entete__action { flex-shrink: 0; }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  position: relative;
  width: 19px;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: background .15s;
}
.burger span::before, .burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 19px;
  height: 2px;
  background: var(--encre);
  border-radius: 2px;
  transition: transform var(--transition);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: flex; }
  .entete__action { display: none; }
  .nav {
    position: fixed;
    top: calc(var(--promo-h, 0px) + 82px);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--trait);
    box-shadow: var(--ombre-forte);
    padding: 1rem 1.25rem 1.75rem;
    display: none;
  }
  .nav.est-ouverte { display: block; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__lien { padding: .85rem 1rem; font-size: 1.02rem; }
  .nav__lien.est-actif::after { display: none; }
  .nav__lien.est-actif { background: var(--bleu-pale); }
  .nav__action { margin-top: 1rem; }
  .nav__action .bouton { width: 100%; }
}
@media (min-width: 981px) { .nav__action { display: none; } }

/* ── Héro ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: calc(82px + var(--promo-h, 0px) + clamp(3.5rem, 7vw, 6rem)) 0 clamp(4rem, 8vw, 7rem);
  transition: padding-top .45s cubic-bezier(.2, .8, .25, 1);
  background: linear-gradient(150deg, var(--bleu-nuit) 0%, var(--bleu) 55%, var(--bleu-clair) 100%);
  color: #fff;
  overflow: hidden;
}

/* Vagues reprises du logo, en filigrane. */
.hero__vagues {
  position: absolute;
  inset: auto 0 -2px;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.hero__halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.hero__halo--rouge {
  width: 520px; height: 520px;
  background: rgba(251, 60, 31, .28);
  top: -180px; right: -120px;
}
.hero__halo--bleu {
  width: 460px; height: 460px;
  background: rgba(58, 90, 196, .35);
  bottom: -160px; left: -140px;
}

.hero__contenu { position: relative; z-index: 2; max-width: 44rem; }
.hero h1 { color: #fff; margin-bottom: .7em; }
.hero h1 .accent {
  background: linear-gradient(120deg, #ff9b7d, var(--rouge));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__chapeau {
  font-size: clamp(1.03rem, 2vw, 1.2rem);
  color: #ccd5f0;
  max-width: 38rem;
  margin-bottom: 2.2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__etiquette {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.1rem .5rem .6rem;
  margin-bottom: 1.8rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-size: .85rem;
  font-weight: 500;
  color: #e4e9f8;
}
.hero__etiquette b {
  padding: .18rem .6rem;
  border-radius: 999px;
  background: var(--rouge);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Chiffres clés posés à cheval sur le héro. */
.reperes {
  position: relative;
  z-index: 3;
  margin-top: -3.5rem;
}
.reperes__cadre {
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-forte);
}
@media (min-width: 700px) { .reperes__cadre { grid-template-columns: repeat(4, 1fr); } }

.repere { background: #fff; padding: 2rem 1.5rem; text-align: center; }
.repere__valeur {
  font-family: var(--police-titre);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--bleu);
  line-height: 1;
  letter-spacing: -.03em;
}
.repere__valeur .unite { color: var(--rouge); }
.repere__libelle {
  margin-top: .5rem;
  font-size: .88rem;
  color: var(--texte-doux);
  line-height: 1.45;
}

/* ── Cartes de solution ───────────────────────────────────── */

.solution {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.9rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  background: #fff;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.solution::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--teinte, var(--bleu));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.solution:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--ombre-forte);
}
.solution:hover::before { transform: scaleX(1); }

.solution__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 1.4rem;
  border-radius: 15px;
  background: color-mix(in srgb, var(--teinte, var(--bleu)) 10%, transparent);
  color: var(--teinte, var(--bleu));
}
.solution__icone svg { width: 26px; height: 26px; }

.solution h3 { margin-bottom: .5rem; }
.solution h3 .marque { color: var(--teinte, var(--bleu)); }
.solution p { font-size: .95rem; color: var(--texte-doux); margin-bottom: 1.2rem; }
.solution__liste { margin-bottom: 1.5rem; }
.solution__liste li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .5rem;
  font-size: .91rem;
  color: var(--texte);
}
.solution__liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teinte, var(--bleu));
}
.solution__pied { margin-top: auto; }
.solution__pied .lien-fleche { color: var(--teinte, var(--bleu)); }

/* ── Bloc image + texte ───────────────────────────────────── */

.duo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--inverse .duo__visuel { order: 2; }
}

.duo__visuel { position: relative; }

/* Composition graphique tenant lieu de photographie. */
.composition {
  position: relative;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--rayon-lg);
  background: linear-gradient(150deg, var(--bleu-nuit), var(--bleu));
  overflow: hidden;
  box-shadow: var(--ombre-forte);
}
.composition svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.composition__carte {
  position: absolute;
  padding: 1.1rem 1.3rem;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--ombre-forte);
}
.composition__carte strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bleu);
  line-height: 1;
}
.composition__carte span { font-size: .8rem; color: var(--texte-doux); }
.composition__carte--haut { top: 1.6rem; right: 1.6rem; }
.composition__carte--bas { bottom: 1.6rem; left: 1.6rem; }

/* ── Points forts ─────────────────────────────────────────── */

.atout { display: flex; gap: 1.1rem; margin-bottom: 1.9rem; }
.atout__puce {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--bleu-pale);
  color: var(--bleu);
}
.atout__puce svg { width: 21px; height: 21px; }
.atout h4 { margin-bottom: .25rem; }
.atout p { font-size: .94rem; color: var(--texte-doux); margin: 0; }

.section--nuit .atout__puce { background: rgba(255, 255, 255, .1); color: #ff8062; }
.section--nuit .atout p { color: #a7b2d4; }

/* ── Étapes de la démarche ────────────────────────────────── */

.demarche { counter-reset: etape; }
.etape {
  position: relative;
  padding: 2rem 1.7rem;
  border-radius: var(--rayon-lg);
  background: #fff;
  border: 1px solid var(--trait);
  transition: transform var(--transition), box-shadow var(--transition);
}
.etape:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.etape::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  display: block;
  font-family: var(--police-titre);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--bleu-pale);
  line-height: 1;
  margin-bottom: .8rem;
}
.etape h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.etape p { font-size: .93rem; color: var(--texte-doux); margin: 0; }

/* ── Appel à l'action ─────────────────────────────────────── */

.appel {
  position: relative;
  padding: clamp(2.75rem, 6vw, 4.5rem);
  border-radius: var(--rayon-lg);
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-nuit) 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.appel::after {
  content: '';
  position: absolute;
  width: 460px;
  height: 460px;
  right: -140px;
  top: -180px;
  border-radius: 50%;
  background: rgba(251, 60, 31, .22);
  filter: blur(80px);
}
.appel > * { position: relative; z-index: 1; }
.appel h2 { color: #fff; }
.appel p { color: #ccd5f0; max-width: 36rem; margin-inline: auto; margin-bottom: 2rem; }
.appel__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ── Coordonnées ──────────────────────────────────────────── */

.coordonnee {
  display: flex;
  gap: 1.1rem;
  padding: 1.6rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff;
  transition: all var(--transition);
}
.coordonnee:hover { border-color: var(--bleu); box-shadow: var(--ombre); }
.coordonnee__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--rouge-pale);
  color: var(--rouge);
}
.coordonnee__icone svg { width: 21px; height: 21px; }
.coordonnee h4 { margin-bottom: .2rem; font-size: .97rem; }
.coordonnee p, .coordonnee a { font-size: .94rem; color: var(--texte-doux); margin: 0; }
.coordonnee a:hover { color: var(--bleu); }

/* ── Formulaire ───────────────────────────────────────────── */

.formulaire {
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  background: #fff;
  box-shadow: var(--ombre);
}
.champ { margin-bottom: 1.15rem; }
.champ label {
  display: block;
  margin-bottom: .45rem;
  font-size: .89rem;
  font-weight: 600;
  color: var(--encre);
}
.champ label .requis { color: var(--rouge); }
.champ input, .champ select, .champ textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--trait);
  border-radius: 10px;
  font-family: var(--police);
  font-size: .96rem;
  color: var(--encre);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--bleu);
  box-shadow: 0 0 0 4px rgba(27, 53, 156, .1);
}
.champ textarea { resize: vertical; min-height: 130px; }
.champ__aide { display: block; margin-top: .35rem; font-size: .82rem; color: var(--texte-doux); }
.champ--erreur input, .champ--erreur textarea, .champ--erreur select { border-color: var(--rouge); }
.champ__erreur { display: none; margin-top: .35rem; font-size: .83rem; color: var(--rouge); font-weight: 500; }
.champ--erreur .champ__erreur { display: block; }

.message-envoi {
  display: none;
  align-items: flex-start;
  gap: .8rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border-radius: var(--rayon);
  background: var(--bleu-pale);
  border-left: 4px solid var(--bleu);
  font-size: .93rem;
}
.message-envoi.est-visible { display: flex; }
.message-envoi svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--bleu); margin-top: 2px; }

/* ── Bandeau de page intérieure ───────────────────────────── */

.banniere {
  position: relative;
  padding: calc(82px + var(--promo-h, 0px) + 3.5rem) 0 3.5rem;
  transition: padding-top .45s cubic-bezier(.2, .8, .25, 1);
  background: linear-gradient(140deg, var(--bleu-nuit), var(--bleu));
  color: #fff;
  overflow: hidden;
}
.banniere::after {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -160px;
  border-radius: 50%;
  background: rgba(251, 60, 31, .25);
  filter: blur(80px);
}
.banniere > * { position: relative; z-index: 1; }
.banniere h1 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .35em; }
.banniere p { color: #ccd5f0; max-width: 40rem; margin: 0; }

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; font-size: .87rem; }
.fil a { color: #b7c2e6; }
.fil a:hover { color: #fff; }
.fil span { color: #7f8db8; }
.fil b { color: #fff; font-weight: 500; }

/* ── Questions fréquentes ─────────────────────────────────── */

.question {
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: #fff;
  margin-bottom: .8rem;
  overflow: hidden;
}
.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
  transition: color var(--transition);
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--bleu); }
.question summary::after {
  content: '';
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--rouge);
  border-bottom: 2.5px solid var(--rouge);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--transition);
}
.question[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.question__reponse { padding: 0 1.4rem 1.35rem; font-size: .95rem; color: var(--texte-doux); }
.question__reponse p:last-child { margin-bottom: 0; }

/* ── Pied de page ─────────────────────────────────────────── */

.pied {
  padding: clamp(3.5rem, 7vw, 5rem) 0 0;
  background: var(--bleu-nuit);
  color: #9aa6cc;
  font-size: .93rem;
}
.pied__grille {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (min-width: 760px)  { .pied__grille { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1024px) { .pied__grille { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; } }

.pied__logo {
  height: 44px;
  width: auto;
  margin-bottom: 1.1rem;
  /* Le logo est dessiné pour un fond clair : on l'éclaircit ici. */
  filter: brightness(0) invert(1);
  opacity: .95;
}
.pied h4 {
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.pied a { color: #9aa6cc; }
.pied a:hover { color: #fff; }
.pied li { margin-bottom: .6rem; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .86rem;
}
.pied__bas p { margin: 0; }
.pied__reseaux { display: flex; gap: .7rem; margin-top: 1.4rem; }
.pied__reseaux a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  transition: background .2s, color .2s;
}
.pied__reseaux a:hover { background: rgba(255, 255, 255, .18); }
.pied__reseaux svg { width: 1.1rem; height: 1.1rem; }

/* ── Bannière promotionnelle ──────────────────────────────────
   Barre fixe au-dessus de l'en-tête, affichée uniquement par le
   script : elle ne doit apparaître ni après fermeture, ni une fois
   l'offre expirée. Sa hauteur est reportée dans --promo-h, dont
   dépendent la position de l'en-tête et le retrait du héro.
   ────────────────────────────────────────────────────────────── */

.promo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  color: #fff;
  background: linear-gradient(112deg, var(--bleu-nuit) 0%, var(--bleu) 44%, var(--rouge-fonce) 100%);
  box-shadow: 0 12px 34px rgba(11, 23, 67, .3);
  overflow: hidden;
  transform: translateY(-100%);
  animation: promo-entree .5s .2s cubic-bezier(.2, .8, .25, 1) forwards;
}

/* Halo rouge, repris du héro, pour réchauffer la barre. */
.promo::before {
  content: '';
  position: absolute;
  top: -300px;
  right: 14%;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(251, 60, 31, .5);
  filter: blur(80px);
  pointer-events: none;
}
/* Reflet qui balaie la barre, pour accrocher l'œil. */
.promo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, .16) 48%, transparent 62%);
  transform: translateX(-100%);
  animation: promo-reflet 6s 1.6s infinite;
  pointer-events: none;
}

@keyframes promo-entree { to { transform: none; } }
@keyframes promo-reflet { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }

.promo.est-fermee {
  transform: translateY(-100%);
  opacity: 0;
  animation: none;
  transition: transform .4s cubic-bezier(.4, 0, 1, 1), opacity .4s ease;
}

.promo__barre {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .9rem 1.7rem;
  padding: .85rem 2.9rem .85rem 0;
}

.promo__texte { flex: 1 1 24rem; min-width: 0; }

.promo__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  padding: .18rem .6rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.promo__point {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd166;
  animation: promo-pouls 1.9s infinite;
}
@keyframes promo-pouls {
  0%   { box-shadow: 0 0 0 0 rgba(255, 209, 102, .75); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 209, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0); }
}

.promo__titre {
  margin: 0 0 .2rem;
  font-family: var(--police-titre);
  font-size: clamp(1.05rem, 1.9vw, 1.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #fff;
}
.promo__titre b { color: #ffd166; }

.promo__detail {
  margin: 0;
  font-size: .84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .82);
}
.promo__detail b { color: #fff; font-weight: 700; }

/* ── Compte à rebours ── */

.promo__compte { display: flex; gap: .4rem; flex: 0 0 auto; }

.promo__unite {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.15rem;
  padding: .38rem .3rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 11px;
  background: rgba(255, 255, 255, .13);
}
.promo__unite b {
  font-family: var(--police-titre);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  /* Chiffres de largeur fixe : la barre ne tressaute pas à chaque seconde. */
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.promo__unite span {
  margin-top: .2rem;
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.promo__unite--sec b { color: #ffd166; }

/* ── Appels à l'action ── */

.promo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem 1rem; }

.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--bleu-nuit);
  font-weight: 700;
  font-size: .93rem;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.promo__cta:hover {
  background: #ffd166;
  color: var(--bleu-nuit);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}
.promo__cta svg { width: 16px; height: 16px; }

.promo__lien {
  color: #fff;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45);
}
.promo__lien:hover { color: #ffd166; text-decoration-color: #ffd166; }

.promo__fermer {
  position: absolute;
  top: .5rem;
  right: .55rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.promo__fermer:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }
.promo__fermer svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
  .promo__barre { padding: .7rem 2.7rem .75rem 0; gap: .65rem 1rem; }
  .promo__texte { flex: 1 1 100%; }
  .promo__compte { gap: .3rem; }
  .promo__unite { min-width: 2.7rem; padding: .3rem .25rem; border-radius: 9px; }
  .promo__unite b { font-size: 1.08rem; }
  .promo__cta { padding: .58rem .95rem; font-size: .86rem; }
  .promo__detail { font-size: .79rem; }
}

@media (max-width: 560px) {
  .promo__actions { flex: 1 1 auto; justify-content: flex-end; }
  .promo__cta { width: auto; }
  /* Sur très petit écran, la barre doit rester basse : le second lien
     est retiré, l'offre comptabilité restant accessible depuis la page. */
  .promo__lien { display: none; }
  .promo__titre { font-size: 1rem; }
}

/* ── Retour en haut ───────────────────────────────────────── */

.remonter {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--bleu);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--transition);
  box-shadow: 0 8px 22px rgba(27, 53, 156, .35);
}
.remonter.est-visible { opacity: 1; visibility: visible; transform: none; }
.remonter:hover { background: var(--rouge); box-shadow: 0 8px 22px rgba(251, 60, 31, .4); }
.remonter svg { width: 20px; height: 20px; }

/* ── Portrait de l'associé ────────────────────────────────── */

.portrait { position: relative; max-width: 15rem; margin-inline: auto; }
.portrait::before {
  /* Aplat décoratif décalé, pour ancrer la photo sur le fond clair. */
  content: '';
  position: absolute;
  inset: 1.5rem -1.25rem -1.5rem 1.25rem;
  border-radius: var(--rayon-lg);
  background: var(--bleu-pale);
}
.portrait__cadre {
  position: relative;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  background: var(--fond);
  box-shadow: var(--ombre-forte);
}
.portrait__cadre::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 5px;
  background: linear-gradient(90deg, var(--bleu), var(--rouge));
}
/* ── Rappel compact de l'offre ────────────────────────────────
   Quand la bannière est fermée, l'offre ne disparaît pas : elle se
   replie en une pastille fixée en bas de l'écran, qui en reprend
   l'essentiel et le temps restant. Un clic dessus redéploie la
   bannière complète.

   Elle est placée à gauche pour laisser le coin bas-droit au
   bouton « remonter », et s'arrête avant lui sur petit écran.
   ────────────────────────────────────────────────────────────── */

.promo-mini {
  position: fixed;
  left: 1rem;
  bottom: 1.5rem;
  z-index: 95;
  display: flex;
  align-items: stretch;
  max-width: calc(100vw - 2rem);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(112deg, var(--bleu-nuit) 0%, var(--bleu) 52%, var(--rouge-fonce) 100%);
  box-shadow: 0 14px 34px rgba(11, 23, 67, .34);
  overflow: hidden;
  opacity: 0;
  transform: translateY(140%);
  transition: transform .45s cubic-bezier(.2, .8, .25, 1), opacity .35s ease;
}
.promo-mini.est-visible { opacity: 1; transform: none; }

.promo-mini__ouvrir {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  padding: .6rem .5rem .6rem .95rem;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.promo-mini__ouvrir:hover .promo-mini__titre { color: #ffd166; }

.promo-mini__point {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd166;
  box-shadow: 0 0 0 0 rgba(255, 209, 102, .8);
  animation: promo-pouls 1.9s infinite;
}

.promo-mini__texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }

.promo-mini__titre {
  font-family: var(--police-titre);
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition);
}
.promo-mini__reste {
  font-size: .72rem;
  color: #ccd5f0;
  letter-spacing: .01em;
  white-space: nowrap;
}
.promo-mini__reste b { color: #fff; font-variant-numeric: tabular-nums; }

.promo-mini__cta {
  display: flex;
  align-items: center;
  flex: none;
  margin: .4rem .4rem .4rem .3rem;
  padding: 0 .9rem;
  border-radius: 999px;
  background: #fff;
  color: var(--bleu-nuit);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.promo-mini__cta:hover { background: #ffd166; color: var(--bleu-nuit); }

@media (max-width: 600px) {
  .promo-mini {
    left: .75rem;
    right: calc(.75rem + 58px);
    bottom: 1rem;
    max-width: none;
  }
  .promo-mini__ouvrir { padding-left: .8rem; }
  .promo-mini__titre { font-size: .8rem; }
  .promo-mini__cta { padding: 0 .7rem; font-size: .75rem; }
}

/* Sur les écrans où l'animation gêne, la pastille apparaît sans glisser. */
@media (prefers-reduced-motion: reduce) {
  .promo-mini { transition: opacity .3s ease; transform: none; }
}


/* ── Photo de l'associé : gestes de récupération neutralisés ──
   La photo n'a pas vocation à être réutilisée ailleurs. Le clic
   droit, le glisser-déposer et l'appui long sur mobile sont donc
   désactivés, et une couche transparente recouvre l'image : sous
   le curseur, le navigateur ne trouve plus de photo à proposer
   d'enregistrer.

   Ces mesures écartent les gestes courants. Elles ne peuvent pas
   empêcher une capture d'écran, qu'aucun site web n'est en mesure
   de bloquer, ni la récupération du fichier par une personne
   sachant ouvrir les outils de développement du navigateur. */
.portrait__cadre img {
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.portrait__cadre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}
.portrait__sceau {
  position: absolute;
  left: -.85rem;
  bottom: 1.3rem;
  display: block;
  padding: .62rem .85rem;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, .97);
  box-shadow: var(--ombre-forte);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
a.portrait__sceau:hover,
a.portrait__sceau:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(16, 32, 74, .22);
}
a.portrait__sceau:hover span { color: var(--bleu); }
.portrait__sceau strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1rem;
  font-weight: 800;
  color: var(--bleu);
  line-height: 1;
}
.portrait__sceau span { font-size: .7rem; color: var(--texte-doux); }
@media (max-width: 480px) {
  .portrait__sceau { left: .65rem; }
}

.associe__role {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--rouge);
  margin-top: -.35rem;
}
.associe__accreditation {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin: 1.7rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--bleu);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  background: var(--fond);
  box-shadow: var(--ombre);
  font-size: .93rem;
  line-height: 1.6;
}
.associe__accreditation svg { flex: none; width: 15px; height: 15px; margin-top: .18rem; color: var(--bleu); }
.associe__accreditation b { color: var(--encre); }

/* Titres, mandats judiciaires et certifications de l'associé. */
.titres { margin-top: 1.7rem; }
.titres__intitule {
  margin: 0 0 .85rem;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.titres__liste { display: grid; gap: .7rem; }
.titres__liste li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--texte-doux);
}
.titres__liste svg { flex: none; width: 18px; height: 18px; margin-top: .16rem; color: var(--rouge); }
.titres__liste b { color: var(--encre); font-weight: 600; }
.titres__liste sup { font-size: .65em; }

/* Numéro d'inscription au Tableau de l'Ordre : renvoie à la fiche officielle. */
.lien-ordre {
  color: var(--bleu);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(27, 53, 156, .35);
  text-underline-offset: .18em;
}
.lien-ordre:hover,
.lien-ordre:focus-visible { text-decoration-color: currentColor; }

/* Formation, du diplôme le plus récent au plus ancien. */
.parcours__entete { margin-top: clamp(3rem, 6vw, 4.5rem); }
.parcours {
  max-width: 52rem;
  margin-inline: auto;
  padding-left: 1.9rem;
  border-left: 2px solid var(--trait);
}
.parcours li { position: relative; padding-bottom: 1.9rem; }
.parcours li:last-child { padding-bottom: 0; }
.parcours li::before {
  content: '';
  position: absolute;
  left: calc(-1.9rem - 8px);
  top: .4rem;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--fond-doux);
  border: 3px solid var(--bleu);
}
.parcours li:first-child::before { border-color: var(--rouge); }
.parcours h4 { margin-bottom: .3rem; }
.parcours p { margin: 0; font-size: .93rem; color: var(--texte-doux); }
.parcours p b { color: var(--texte); font-weight: 600; }

/* ── Apparition au défilement ─────────────────────────────── */

.anime {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
}
.anime.est-visible { opacity: 1; transform: none; }
.anime[data-retard="1"] { transition-delay: .09s; }
.anime[data-retard="2"] { transition-delay: .18s; }
.anime[data-retard="3"] { transition-delay: .27s; }
.anime[data-retard="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anime { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Accès rapide au contenu ──────────────────────────────── */

.saut-contenu {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--bleu);
  color: #fff;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.saut-contenu:focus { left: 0; top: 0; color: #fff; }

/* ── Impression ───────────────────────────────────────────── */

@media print {
  .entete, .remonter, .hero__halo, .appel, .promo, .promo-mini { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section { padding: 1rem 0; }
}