/* ==========================================================================
   FP AVOCATS — Feuille de style du site
   Conforme à la charte d'identité visuelle validée le 28/08/2026.

   À coller intégralement dans l'hébergeur :
   Site → Conception (Design) → Personnaliser → CSS personnalisé (Custom CSS)
   L'éditeur CSS est disponible sur tous les abonnements.
   Aucun JavaScript, aucune iframe : compatible plan Basic / Personal.
   Aucune dépendance externe autre que les Google Fonts ci-dessous.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600&family=Poppins:wght@300;400;500&family=Cormorant+Garamond:wght@500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Variables — palette et typographies de la charte
   -------------------------------------------------------------------------- */
.fp {
  --fp-black:      #000000;   /* texte, filets, boutons, fonds négatifs */
  --fp-ink:        #1A1A1A;   /* nom de marque, titres */
  --fp-text:       #1A1A1A;
  --fp-muted:      #555555;   /* descripteurs, textes secondaires */
  --fp-accent:     #7A2E3B;   /* bordeaux — volute, survols, repères */
  --fp-accent-lt:  #D4A9AE;   /* bordeaux pâle — sur fond noir */
  --fp-paper:      #EAEAEE;   /* gris perle — fond de page */
  --fp-blush:      #F3E6E9;   /* rose pâle, dérivé du bordeaux — bandes claires */
  --fp-blush-dp:   #EBD8DC;   /* rose pâle soutenu — filets, encadrés */
  --fp-wine:       #6B2733;   /* bordeaux profond — survols de liens */
  --fp-noir-vin:   #3D1319;   /* bordeaux presque noir — bandes d'appel */
  --fp-white:      #FFFFFF;
  --fp-line:       rgba(0,0,0,.16);
  --fp-line-firm:  #000000;

  --fp-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fp-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --fp-seal:    'Cormorant Garamond', Georgia, serif;   /* réservé au « FP » du sceau */

  --fp-max: 1120px;
  --fp-pad: 24px;
}

/* --------------------------------------------------------------------------
   2. Réglages l'hébergeur
   -------------------------------------------------------------------------- */
body { overflow-x: hidden; }
.sqs-block-code:has(.fp) { padding: 0 !important; }
.fp * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
.fp {
  font-family: var(--fp-sans);
  color: var(--fp-text);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.fp p { margin: 0 0 .95em; }
.fp p:last-child { margin-bottom: 0; }

.fp a {
  color: var(--fp-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--fp-accent-lt);
  transition: color .2s ease, border-color .2s ease;
}
.fp a:hover { color: var(--fp-wine); border-bottom-color: var(--fp-wine); }
.fp a:focus-visible { outline: 1px solid var(--fp-accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   4. Bandes pleine largeur
   -------------------------------------------------------------------------- */
.fp-band {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  padding: 60px var(--fp-pad);
  background: var(--fp-white);
}
.fp-band--tight { padding-top: 42px; padding-bottom: 42px; }
.fp-band--paper,
.fp-band--cream  { background: var(--fp-paper); }
.fp-band--cream2 { background: var(--fp-white); border-top: 1px solid var(--fp-line); }
.fp-band--blush  { background: var(--fp-blush); }
.fp-band--white  { background: var(--fp-white); }
.fp-band--ink    { background: var(--fp-black); color: rgba(255,255,255,.80); }

/* Bande d'appel : bordeaux presque noir. Assez sombre pour se lire comme un
   noir chaud plutôt que comme du rouge. Le texte y passe en blanc et le bouton
   noir de la charte y devient invisible : il prend un contour bordeaux pâle.
   S'écrit seule : class="fp-band fp-band--wine" */
.fp-band--wine {
  background: var(--fp-noir-vin);
  color: rgba(255,255,255,.82);
  border-top: 1px solid rgba(212,169,174,.22);
}
.fp-band--wine .fp-h1,
.fp-band--wine .fp-h2,
.fp-band--wine .fp-h3 { color: #fff; }
.fp-band--wine .fp-eyebrow,
.fp-band--wine .fp-h4 { color: var(--fp-accent-lt); }
.fp-band--wine .fp-lede { color: rgba(255,255,255,.82); }
.fp-band--wine .fp-note { color: rgba(255,255,255,.62); }
.fp-band--wine .fp-small { color: rgba(255,255,255,.74); }
.fp-band--wine .fp-value p,
.fp-band--wine .fp-card p,
.fp-band--wine .fp-list li { color: rgba(255,255,255,.84); }
.fp-band--wine .fp-list li::before { background: var(--fp-accent-lt); }
.fp-band--wine a { color: #fff; border-bottom-color: rgba(212,169,174,.55); }
.fp-band--wine a:hover { color: var(--fp-accent-lt); border-bottom-color: var(--fp-accent-lt); }
.fp-band--wine .fp-rule { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* Boutons de la bande d'appel : contour bordeaux pâle sur le fond sombre. */
.fp-band--wine .fp-btn {
  background: transparent;
  border-color: var(--fp-accent-lt);
  color: #fff !important;
}
.fp-band--wine .fp-btn:hover {
  background: var(--fp-accent-lt);
  border-color: var(--fp-accent-lt);
  color: var(--fp-noir-vin) !important;
}
.fp-band--wine .fp-btn--ghost { border-color: rgba(255,255,255,.34); }
.fp-band--wine .fp-btn--ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.55);
  color: #fff !important;
}

.fp-band--ink .fp-h1,
.fp-band--ink .fp-h2,
.fp-band--ink .fp-h3 { color: #fff; }
.fp-band--ink .fp-eyebrow,
.fp-band--ink .fp-h4 { color: var(--fp-accent-lt); }
.fp-band--ink .fp-lede,
.fp-band--ink .fp-small,
.fp-band--ink .fp-note { color: rgba(255,255,255,.7); }
/* Textes courants des composants sur fond noir : sans cela ils héritent
   du gris #555555, illisible sur du noir. */
.fp-band--ink .fp-value p,
.fp-band--ink .fp-card p,
.fp-band--ink .fp-case p,
.fp-band--ink .fp-person p,
.fp-band--ink .fp-info p,
.fp-band--ink .fp-list li { color: rgba(255,255,255,.72); }
.fp-band--ink .fp-list li::before { background: var(--fp-accent-lt); }
.fp-band--ink a { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.fp-band--ink a:hover { color: var(--fp-accent-lt); border-bottom-color: var(--fp-accent-lt); }
.fp-band--ink .fp-rule { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%23D4A9AE%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E"); }

/* L'immeuble du 3, rue de Luynes en filigrane — toujours en marge, jamais sous le texte */
.fp-band--seal::after {
  content: '';
  position: absolute;
  right: max(24px, calc(50% - var(--fp-max) / 2));
  top: 50%;
  transform: translateY(-50%);
  width: 200px; height: 260px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22260%22%20viewBox%3D%220%200%20200%20260%22%3E%3Cg%20stroke%3D%22rgba%280%2C0%2C0%2C0.06%29%22%20fill%3D%22none%22%20stroke-width%3D%220.8%22%3E%3Cpath%20d%3D%22M20%2040%20L40%2014%20L160%2014%20L180%2040%22%2F%3E%3Cpath%20d%3D%22M56%2026%20h14%20v14%20M96%2026%20h14%20v14%20M136%2026%20h14%20v14%22%2F%3E%3Cpath%20d%3D%22M14%2042%20L186%2042%20M18%2047%20L182%2047%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M25%2098%20L175%2098%22%2F%3E%3Cpath%20d%3D%22M32%2098%20c0%206%2010%206%2010%200%20M42%2098%20c0%206%2010%206%2010%200%20M52%2098%20c0%206%2010%206%2010%200%20M85%2098%20c0%206%2010%206%2010%200%20M95%2098%20c0%206%2010%206%2010%200%20M105%2098%20c0%206%2010%206%2010%200%20M138%2098%20c0%206%2010%206%2010%200%20M148%2098%20c0%206%2010%206%2010%200%20M158%2098%20c0%206%2010%206%2010%200%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M32%20154%20L68%20154%20M82%20154%20L118%20154%20M132%20154%20L168%20154%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M18%20206%20L182%20206%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Crect%20x%3D%22142%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Cpath%20d%3D%22M84%20252%20L84%20226%20A%2016%2016%200%200%201%20116%20226%20L116%20252%22%2F%3E%3Cpath%20d%3D%22M14%20252%20L186%20252%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2286%22%20y%3D%2257%22%20width%3D%2228%22%20height%3D%2236%22%20fill%3D%22rgba%28122%2C46%2C59%2C0.07%29%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  pointer-events: none;
}
.fp-band--ink.fp-band--seal::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22260%22%20viewBox%3D%220%200%20200%20260%22%3E%3Cg%20stroke%3D%22rgba%28255%2C255%2C255%2C0.07%29%22%20fill%3D%22none%22%20stroke-width%3D%220.8%22%3E%3Cpath%20d%3D%22M20%2040%20L40%2014%20L160%2014%20L180%2040%22%2F%3E%3Cpath%20d%3D%22M56%2026%20h14%20v14%20M96%2026%20h14%20v14%20M136%2026%20h14%20v14%22%2F%3E%3Cpath%20d%3D%22M14%2042%20L186%2042%20M18%2047%20L182%2047%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2256%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M25%2098%20L175%2098%22%2F%3E%3Cpath%20d%3D%22M32%2098%20c0%206%2010%206%2010%200%20M42%2098%20c0%206%2010%206%2010%200%20M52%2098%20c0%206%2010%206%2010%200%20M85%2098%20c0%206%2010%206%2010%200%20M95%2098%20c0%206%2010%206%2010%200%20M105%2098%20c0%206%2010%206%2010%200%20M138%2098%20c0%206%2010%206%2010%200%20M148%2098%20c0%206%2010%206%2010%200%20M158%2098%20c0%206%2010%206%2010%200%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22112%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M32%20154%20L68%20154%20M82%20154%20L118%20154%20M132%20154%20L168%20154%22%2F%3E%3Crect%20x%3D%2235%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%2285%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%22162%22%20width%3D%2230%22%20height%3D%2238%22%2F%3E%3Cpath%20d%3D%22M18%20206%20L182%20206%22%2F%3E%3Crect%20x%3D%2232%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Crect%20x%3D%22142%22%20y%3D%22216%22%20width%3D%2226%22%20height%3D%2236%22%2F%3E%3Cpath%20d%3D%22M84%20252%20L84%20226%20A%2016%2016%200%200%201%20116%20226%20L116%20252%22%2F%3E%3Cpath%20d%3D%22M14%20252%20L186%20252%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%2286%22%20y%3D%2257%22%20width%3D%2228%22%20height%3D%2236%22%20fill%3D%22rgba%28212%2C169%2C174%2C0.10%29%22%2F%3E%3C%2Fsvg%3E"); }
@media (max-width: 1240px) { .fp-band--seal::after { display: none; } }

.fp-wrap { max-width: var(--fp-max); margin: 0 auto; }
.fp-wrap--narrow { max-width: 720px; }

/* Bandeau d'ouverture de l'accueil */
.fp-hero { display: grid; grid-template-columns: 1fr 260px; gap: 64px; align-items: end; }
.fp-index { border-left: 1px solid var(--fp-accent); padding-left: 26px; }
.fp-band--ink .fp-index { border-left-color: rgba(255,255,255,.35); }
.fp-index ul { list-style: none; margin: 0 0 26px; padding: 0; }
.fp-index li { margin-bottom: 10px; }
.fp-index a {
  font-family: var(--fp-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -.01em;
  border-bottom: 1px solid transparent;
}
.fp-index-foot { font-size: 13.5px; line-height: 1.75; color: var(--fp-muted); margin: 0; }
.fp-band--ink .fp-index-foot { color: rgba(255,255,255,.6); }
.fp-index-foot span { font-size: 12px; }

/* --------------------------------------------------------------------------
   5. Typographie
   -------------------------------------------------------------------------- */
.fp-eyebrow {
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 0 0 14px;
}

.fp-h1 {
  font-family: var(--fp-display);
  font-weight: 500;
  font-size: clamp(34px, 4.8vw, 52px);
  line-height: 1.14;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--fp-ink);
  margin: 0 0 18px;
}

/* Seconde ligne du titre d'accueil : le positionnement, sous la promesse.
   Corps intermédiaire — elle doit se lire comme une suite du titre, pas
   comme un chapô, et ne jamais lui disputer l'attention. */
.fp-h1-suite {
  display: block;
  font-family: var(--fp-display);
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--fp-accent);
  margin-top: 16px;
}

.fp-h2 {
  font-family: var(--fp-display);
  font-weight: 500;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.22;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--fp-ink);
  margin: 0 0 16px;
}

.fp-h3 {
  font-family: var(--fp-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--fp-ink);
  margin: 0 0 12px;
}

.fp-h4 {
  font-family: var(--fp-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 0 0 10px;
}

.fp-lede {
  font-size: clamp(17px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--fp-muted);
  font-weight: 300;
}

.fp-small { font-size: 13.5px; color: var(--fp-muted); line-height: 1.7; }
.fp-note  { font-size: 12.5px; color: var(--fp-muted); line-height: 1.7; }

/* Ornement : la volute du sceau */
.fp-rule {
  width: 34px; height: 12px; border: 0; margin: 0 0 26px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2216%22%20viewBox%3D%220%200%2056%2016%22%3E%3Cpath%20d%3D%22M28%204%20C%2020%204%2C%2012%206%2C%208%2011%20C%206%2014%2C%2010%2016%2C%2012%2013%22%20fill%3D%22none%22%20stroke%3D%22%237A2E3B%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204%20C%2036%204%2C%2044%206%2C%2048%2011%20C%2050%2014%2C%2046%2016%2C%2044%2013%22%20fill%3D%22none%22%20stroke%3D%22%237A2E3B%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.fp-rule--center { margin-left: auto; margin-right: auto; }

.fp-center { text-align: center; }

/* --------------------------------------------------------------------------
   6. Boutons — fond noir, angles vifs, survol bordeaux
   -------------------------------------------------------------------------- */
.fp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fp-actions--center { justify-content: center; }

.fp-btn {
  display: inline-block;
  font-family: var(--fp-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 30px;
  background: var(--fp-black);
  color: #fff !important;
  border: 1px solid var(--fp-black);
  border-radius: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; }

.fp-btn--ghost { background: transparent; color: var(--fp-black) !important; }
.fp-btn--ghost:hover { background: var(--fp-black); border-color: var(--fp-black); color: #fff !important; }

.fp-band--ink .fp-btn { background: #fff; border-color: #fff; color: var(--fp-black) !important; }
.fp-band--ink .fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; }
.fp-band--ink .fp-btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff !important; }
.fp-band--ink .fp-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--fp-black) !important; }

/* --------------------------------------------------------------------------
   7. Grilles et cartes — blanc sur gris perle, angles vifs
   -------------------------------------------------------------------------- */
.fp-grid { display: grid; gap: 24px; }
.fp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fp-grid--4 { grid-template-columns: repeat(4, 1fr); }

.fp-split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: start; }
.fp-split > div:first-child { position: sticky; top: 96px; }

.fp-card {
  background: var(--fp-white);
  border: 1px solid var(--fp-line);
  border-radius: 0;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease;
}
.fp-card:hover { border-color: var(--fp-accent); }
.fp-card .fp-card-num {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-muted); margin: 0 0 16px;
}
.fp-card p { color: var(--fp-muted); font-size: 15px; }
.fp-card-link {
  margin-top: auto; padding-top: 18px;
  font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 0 !important;
}
.fp-card-link::after { content: ' \2192'; }

.fp-value .fp-h3 { margin-bottom: 10px; }
.fp-value p { color: var(--fp-muted); font-size: 15px; }

.fp-step { border-top: 1px solid var(--fp-accent); padding-top: 18px; }
.fp-step-num {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-accent); margin: 0 0 10px !important;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   8. Listes
   -------------------------------------------------------------------------- */
.fp-list { list-style: none; margin: 0; padding: 0; }
.fp-list li {
  position: relative; padding: 0 0 0 20px; margin-bottom: 7px;
  font-size: 15px; line-height: 1.5; color: var(--fp-text);
}
.fp-list li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 9px; height: 1px; background: var(--fp-accent);
}
.fp-list--2 { columns: 2; column-gap: 44px; }
.fp-list--2 li { break-inside: avoid; }

.fp-cluster { margin-bottom: 0; }
.fp-cluster:last-child { margin-bottom: 0; }
.fp-cluster .fp-cluster-title {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-accent);
  padding-bottom: 9px; margin: 0 0 12px;
  border-bottom: 1px solid var(--fp-accent-lt);
}

/* Grappes d'interventions sur deux colonnes : on gagne en largeur
   ce qu'on ne perd pas en contenu. */
.fp-clusters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 48px; }
.fp-clusters .fp-list--2 { columns: 1; }
/* Nombre impair de grappes : la dernière occupe toute la largeur
   et repasse sur deux colonnes, pour ne pas laisser un vide à droite. */
.fp-clusters > .fp-cluster:last-child:nth-child(odd) { grid-column: 1 / -1; }
.fp-clusters > .fp-cluster:last-child:nth-child(odd) .fp-list--2 { columns: 2; column-gap: 48px; }
@media (max-width: 900px) {
  .fp-clusters > .fp-cluster:last-child:nth-child(odd) .fp-list--2 { columns: 1; }
}

/* En-tête de section compact : titre à gauche, précision à droite */
.fp-head {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 48px;
  align-items: end; margin-bottom: 30px;
}
.fp-head p.fp-small { max-width: 380px; margin: 0; }
.fp-head .fp-h2 { margin-bottom: 0; }
@media (max-width: 900px) {
  .fp-clusters { grid-template-columns: 1fr; }
  .fp-head { grid-template-columns: 1fr; align-items: start; }
}

/* Sommaire des publications */
.fp-sommaire { margin-bottom: 40px; }
.fp-sommaire:last-child { margin-bottom: 0; }
.fp-note-item {
  width: 100%;
  border-bottom-color: var(--fp-blush-dp);
  display: grid; grid-template-columns: 130px 1fr; gap: 6px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--fp-line);
  border-bottom-color: var(--fp-line) !important;
  color: inherit; text-decoration: none;
  transition: background .2s ease;
}
.fp-note-item:hover { background: var(--fp-blush); }
.fp-note-item:hover b { color: var(--fp-accent); }
.fp-note-date {
  font-family: var(--fp-sans); font-size: 11px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--fp-muted);
  padding-top: 5px;
}
.fp-note-corps b {
  display: block;
  font-family: var(--fp-display); font-weight: 500; font-size: 19px;
  line-height: 1.32; letter-spacing: -.01em; color: var(--fp-ink);
  margin-bottom: 6px;
  transition: color .2s ease;
}
.fp-note-corps em {
  font-style: normal; font-size: 15px; color: var(--fp-muted); line-height: 1.55;
}
@media (max-width: 640px) {
  .fp-note-item { grid-template-columns: 1fr; gap: 4px; }
}

/* Lignes de tarifs, page Exemples de forfaits */
.fp-tarifs { display: grid; gap: 0; }
.fp-tarif {
  display: grid; grid-template-columns: 205px 1fr; gap: 8px 22px;
  align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--fp-blush-dp);
}
.fp-tarif:last-child { border-bottom: 0; }
.fp-tarif b {
  font-family: var(--fp-display); font-weight: 500; font-size: 17px;
  letter-spacing: -.01em; color: var(--fp-accent);
  font-variant-numeric: tabular-nums;
}
.fp-tarif span { font-size: 15px; color: var(--fp-muted); }
@media (max-width: 640px) { .fp-tarif { grid-template-columns: 1fr; gap: 2px; } }

/* --------------------------------------------------------------------------
   9. Délais et seuils clés
   -------------------------------------------------------------------------- */
.fp-facts-titre {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; color: var(--fp-accent);
  margin: 0 0 22px;
}
.fp-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fp-fact { border-top: 2px solid var(--fp-accent); padding-top: 18px; }
.fp-fact b {
  display: block;
  font-family: var(--fp-display); font-weight: 500;
  font-size: clamp(26px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--fp-accent); margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.fp-band--ink .fp-fact b { color: #fff; }
.fp-band--ink .fp-fact { border-top-color: rgba(255,255,255,.4); }
.fp-fact span { font-size: 14.5px; color: var(--fp-muted); line-height: 1.6; display: block; }
.fp-band--ink .fp-fact span { color: rgba(255,255,255,.62); }
.fp-fact em {
  font-style: normal; font-size: 11.5px; color: var(--fp-accent);
  display: block; margin-top: 8px;
}
.fp-band--ink .fp-fact em { color: var(--fp-accent-lt); }

/* --------------------------------------------------------------------------
   10. Exemples d'intervention, repères, interlocuteur
   -------------------------------------------------------------------------- */
.fp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
.fp-case { border-top: 1px solid var(--fp-line); padding: 14px 0; }
.fp-case .fp-case-tag {
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-accent); margin: 0 0 8px;
}
.fp-case p { font-size: 15px; color: var(--fp-muted); margin: 0; }

.fp-marks { display: flex; flex-wrap: wrap; gap: 16px 46px; align-items: baseline; }
.fp-mark { display: flex; flex-direction: column; gap: 3px; }
.fp-mark b {
  font-family: var(--fp-display); font-size: 17px; font-weight: 500;
  letter-spacing: -.01em; color: var(--fp-ink);
}
.fp-band--ink .fp-mark b { color: #fff; }
.fp-mark span { font-size: 12.5px; color: var(--fp-muted); }
.fp-band--ink .fp-mark span { color: rgba(255,255,255,.6); }

.fp-person { border-top: 1px solid var(--fp-accent); padding-top: 24px; }
.fp-person .fp-role {
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-accent); margin: 0 0 8px;
}
.fp-person .fp-h3 { margin-bottom: 16px; }
.fp-person p { font-size: 15px; color: var(--fp-muted); }

.fp-info { border-top: 1px solid var(--fp-line); padding-top: 14px; margin-bottom: 20px; }
.fp-info p { font-size: 15.5px; margin-bottom: 0; }

.fp-quote {
  font-family: var(--fp-display);
  font-size: clamp(21px, 2.6vw, 29px);
  line-height: 1.4; font-weight: 500; letter-spacing: -.02em;
  color: var(--fp-ink); text-wrap: balance; margin: 0;
}
.fp-band--ink .fp-quote { color: #fff; }

/* --------------------------------------------------------------------------
   11. Accordéons (élément HTML natif <details>, sans JavaScript)
   -------------------------------------------------------------------------- */
.fp-acc { border-top: 2px solid var(--fp-accent); }
.fp-acc details { border-bottom: 1px solid var(--fp-line); }
.fp-acc summary {
  list-style: none; cursor: pointer;
  padding: 16px 44px 16px 0; position: relative;
  font-family: var(--fp-display); font-weight: 500; font-size: 17px;
  letter-spacing: -.01em; color: var(--fp-ink);
  transition: color .2s ease;
}
.fp-acc summary::-webkit-details-marker { display: none; }
.fp-acc summary:hover { color: var(--fp-accent); }
.fp-acc summary:focus-visible { outline: 1px solid var(--fp-accent); outline-offset: 2px; }
.fp-acc summary::after {
  color: var(--fp-accent);
  content: '+'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--fp-sans); font-size: 18px; font-weight: 300;
  color: var(--fp-accent);
}
.fp-acc details[open] summary::after { content: '\2013'; }
.fp-acc .fp-acc-body { padding: 0 44px 20px 0; color: var(--fp-muted); font-size: 15px; max-width: 62ch; }
.fp-acc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; align-items: start; }
.fp-acc-pair .fp-eyebrow { margin-bottom: 10px; }
.fp-acc-pair .fp-h2 { margin-bottom: 20px; }
@media (max-width: 980px) { .fp-acc-pair { grid-template-columns: 1fr; gap: 40px; } }

.fp-acc--faq summary { font-family: var(--fp-sans); font-weight: 400; font-size: 15.5px; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   11 bis. Photographies
      Un seul traitement pour toutes les images du site : noir et blanc,
      voile bordeaux très léger, ombre portée douce. Les photographies
      accompagnent la page ; elles ne la prennent jamais en charge.
   -------------------------------------------------------------------------- */

/* a) En-tête avec photographie fondue sur la droite.
      Usage : ajouter la classe fp-band--hero-photo à la balise section
      et l'adresse de l'image dans la variable --fp-photo.
      L'image se dissout vers la gauche : le texte reste sur fond propre. */
.fp-band--hero-photo { overflow: hidden; }
.fp-band--hero-photo > * { position: relative; z-index: 1; }
.fp-band--hero-photo::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(54%, 820px);
  background-image: var(--fp-photo, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(.18) contrast(.98) brightness(1.02) saturate(1.02);
  transition: filter .8s ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.86) 62%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.28) 26%, rgba(0,0,0,.86) 62%, #000 100%);
  pointer-events: none;
}
/* Voile bordeaux : unifie la couleur de toutes les images entre elles */
.fp-band--hero-photo::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(54%, 820px);
  background: linear-gradient(to right, rgba(122,46,59,0) 24%, rgba(122,46,59,.16) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* Au survol, la photographie retrouve ses couleurs */
.fp-band--hero-photo:hover::before { filter: grayscale(0) contrast(1) brightness(1.02) saturate(1); }
@media (prefers-reduced-motion: reduce) { .fp-band--hero-photo::before { transition: none; } }
.fp-band--ink.fp-band--hero-photo::before { opacity: .42; }
.fp-band--ink.fp-band--hero-photo::after { display: none; }

@media (max-width: 900px) {
  .fp-band--hero-photo::before {
    width: 100%; opacity: .16;
    -webkit-mask-image: none; mask-image: none;
  }
  .fp-band--hero-photo::after { display: none; }
}

/* b) Photographie posée derrière une bande entière, très en retrait. */
.fp-band--photo > * { position: relative; z-index: 1; }
.fp-band--photo::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--fp-photo, none);
  background-size: cover;
  background-position: center;
  filter: grayscale(.5) contrast(.9) brightness(1.12) saturate(1.05);
  opacity: .10;
  pointer-events: none;
}
.fp-band--ink.fp-band--photo::before { opacity: .18; }
.fp-band--blush.fp-band--photo::before { opacity: .11; }
/* Sur la bande d'appel, la photographie éclaire le fond au lieu de l'assombrir. */
.fp-band--wine.fp-band--photo::before {
  filter: grayscale(1) contrast(.7) brightness(1.2);
  opacity: .06;
}

/* c) Photographie encadrée, dans le flux du texte. */
.fp-figure { position: relative; margin: 0; }
.fp-figure img {
  display: block; width: 100%; height: auto;
  filter: grayscale(.12) contrast(1) brightness(1.02) saturate(1.08);
  box-shadow: 0 26px 60px -40px rgba(122,46,59,.45);
}
.fp-figure::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0;
  height: 100%;
  background: rgba(122,46,59,.05);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.fp-figure figcaption {
  position: relative; z-index: 1;
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .28em; text-transform: uppercase;
  color: var(--fp-muted);
  margin-top: 16px;
}
.fp-band--ink .fp-figure figcaption { color: rgba(255,255,255,.6); }
.fp-figure--wide img   { aspect-ratio: 16 / 7; object-fit: cover; }
.fp-figure--tall img   { aspect-ratio: 3 / 4;  object-fit: cover; }
.fp-figure--square img { aspect-ratio: 1 / 1;  object-fit: cover; }
.fp-figure--wide::after,
.fp-figure--tall::after,
.fp-figure--square::after { height: auto; bottom: 43px; }
.fp-figure--plain::after { bottom: 0; }

.fp-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 640px) { .fp-figures { grid-template-columns: 1fr; } }

/* d) Portrait à côté d'un texte : la colonne image est collante. */
.fp-split--photo { grid-template-columns: .85fr 1.15fr; gap: 56px; }
.fp-split--photo > figure:first-child { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .fp-split--photo { grid-template-columns: 1fr; gap: 32px; }
  .fp-split--photo > figure:first-child { position: static; }
}

/* --------------------------------------------------------------------------
   12. Blocs utilisables DANS un article de la rubrique Publications
   -------------------------------------------------------------------------- */
.fp-inline { margin-left: 0; margin-right: 0; width: auto; max-width: none; padding: 0; }

.fp-keypoints {
  border-left: 3px solid var(--fp-accent);
  background: var(--fp-blush);
  padding: 26px 28px; margin: 34px 0;
}
.fp-keypoints .fp-keypoints-title {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em; text-transform: uppercase;
  color: var(--fp-accent); margin: 0 0 14px;
}
.fp-keypoints ul { list-style: none; margin: 0; padding: 0; }
.fp-keypoints li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 15.5px; color: var(--fp-text);
}
.fp-keypoints li:last-child { margin-bottom: 0; }
.fp-keypoints li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 9px; height: 1px; background: var(--fp-accent);
}

.fp-disclaimer {
  border-top: 1px solid var(--fp-line);
  padding-top: 16px; margin-top: 34px;
  font-size: 12.5px; line-height: 1.7; color: var(--fp-muted);
}

.fp-postcta {
  background: var(--fp-black); padding: 32px;
  margin-top: 34px; display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.fp-postcta .fp-postcta-text {
  font-family: var(--fp-display); font-size: 19px; font-weight: 500;
  letter-spacing: -.01em; line-height: 1.4; color: #fff; margin: 0; max-width: 460px;
}
.fp-postcta .fp-btn { background: #fff; border-color: #fff; color: var(--fp-black) !important; }
.fp-postcta .fp-btn:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff !important; }

.fp-byline {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  border-top: 1px solid var(--fp-line-firm); padding-top: 14px; margin-bottom: 28px;
  font-size: 13px; color: var(--fp-muted);
}
.fp-byline b {
  font-family: var(--fp-display); font-size: 16px; font-weight: 500;
  letter-spacing: -.01em; color: var(--fp-ink);
}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fp-grid--3, .fp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fp-cases { grid-template-columns: repeat(2, 1fr); }
  .fp-facts { grid-template-columns: 1fr; gap: 22px; }
  .fp-split, .fp-hero { grid-template-columns: 1fr; gap: 34px; }
  .fp-split > div:first-child { position: static; }
  .fp-index { border-left: 0; border-top: 1px solid var(--fp-line-firm); padding: 24px 0 0; }
  .fp-band { padding: 48px 22px; }
}

@media (max-width: 640px) {
  .fp { font-size: 16px; }
  .fp-grid--2, .fp-grid--3, .fp-grid--4 { grid-template-columns: 1fr; }
  .fp-list--2 { columns: 1; }
  .fp-cases { grid-template-columns: 1fr; gap: 0; }
  .fp-clusters { grid-template-columns: 1fr; }
  .fp-band { padding: 40px 20px; }
  .fp-card { padding: 28px 22px; }
  .fp-actions .fp-btn { width: 100%; text-align: center; }
  .fp-postcta { padding: 26px 22px; }
  .fp-postcta .fp-btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .fp * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   14. Impression
   -------------------------------------------------------------------------- */
@media print {
  .fp-band { padding: 20px 0; background: #fff !important; color: #000 !important; }
  .fp-band--seal::after { display: none; }
  .fp-btn, .fp-actions, .fp-postcta { display: none !important; }
}

/* =========================================================
   PIED DE PAGE
   Un filet bordeaux en dégradé le sépare du corps de page ;
   le sceau et le filigrane de l'immeuble portent l'identité.
   ========================================================= */
.fp-foot {
  position: relative;
  padding: 64px 24px 30px;
  overflow: hidden;
}
.fp-foot::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    var(--fp-accent) 0%, var(--fp-accent-lt) 32%,
    rgba(212,169,174,.22) 62%, transparent 100%);
}
.fp-foot .fp-wrap { position: relative; z-index: 1; }

.fp-foot-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
.fp-foot-brand { position: relative; padding-right: 48px; }
.fp-foot-brand::after {
  content: '';
  position: absolute; right: 0; top: 4px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg,
    rgba(212,169,174,.34) 0%, rgba(255,255,255,.10) 45%, transparent 100%);
}

/* Colonne d'identité */
.fp-foot-seal { display: block; margin-bottom: 20px; }
.fp-foot-name {
  font-family: var(--fp-display); font-weight: 500; font-size: 16px;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  margin: 0 0 5px;
}
.fp-foot-role {
  font-family: var(--fp-seal); font-size: 17px; font-style: italic;
  color: var(--fp-accent-lt); margin: 0 0 18px;
}
.fp-foot-addr {
  font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.62); margin: 0 0 12px;
}
.fp-foot-bar {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin: 0;
}

/* Colonnes de liens */
.fp-foot-title {
  font-family: var(--fp-sans); font-weight: 500;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fp-accent-lt);
  margin: 0 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.fp-foot-col a {
  display: inline-block;
  font-size: 14.5px; line-height: 1.45;
  color: rgba(255,255,255,.62);
  text-decoration: none; border-bottom: 0;
  margin-bottom: 11px;
  position: relative;
  transition: color .25s ease;
}
.fp-foot-col a::after {
  content: '';
  position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--fp-accent-lt);
  transition: width .3s ease;
}
.fp-foot-col a:hover { color: #fff; }
.fp-foot-col a:hover::after { width: 100%; }
.fp-foot-col nav a { display: block; }

/* Nous joindre */
.fp-foot-col .fp-foot-tel, .fp-foot-col .fp-foot-mail { display: block; }
.fp-foot-tel {
  font-family: var(--fp-seal) !important;
  font-size: 27px !important; letter-spacing: .01em;
  color: #fff !important; margin-bottom: 10px !important;
}
.fp-foot-tel::after { display: none; }
.fp-foot-tel:hover { color: var(--fp-accent-lt) !important; }
.fp-foot-mail { font-size: 13.5px !important; word-break: break-word; }
.fp-foot-hours {
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,.38); margin: 16px 0 0;
}

/* Barre inférieure */
.fp-foot-bottom {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: baseline;
  margin-top: 52px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.fp-foot-legal {
  font-size: 11.5px; letter-spacing: .06em;
  color: rgba(255,255,255,.34); margin: 0;
}
.fp-foot-mini { display: flex; flex-wrap: wrap; gap: 26px; }
.fp-foot-mini a {
  font-size: 11.5px; letter-spacing: .06em;
  color: rgba(255,255,255,.34);
  text-decoration: none; border-bottom: 0;
  transition: color .25s ease;
}
.fp-foot-mini a:hover { color: var(--fp-accent-lt); }


@media (max-width: 980px) {
  .fp-foot-top { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .fp-foot-brand { grid-column: 1 / -1; padding-right: 0; }
  .fp-foot-brand::after { display: none; }
}
@media (max-width: 560px) {
  .fp-foot { padding-top: 48px; }
  .fp-foot-top { grid-template-columns: 1fr; gap: 34px; }
  .fp-foot-bottom { margin-top: 38px; }
  .fp-foot-mini { gap: 16px 22px; }
}

/* =========================================================
   JUSTIFICATION
   Le texte courant est justifié. La césure automatique est
   indispensable : sans elle, la justification creuse des rivières
   blanches dans les colonnes étroites. Elle suppose que la langue
   soit déclarée — d'où le lang="fr" sur chaque bloc .fp, et le
   réglage de langue du site dans l'hébergeur.
   ========================================================= */
.fp p,
.fp li,
.fp .fp-lede,
.fp .fp-acc-body {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Ce qui ne se justifie pas : les blocs centrés, les libellés courts,
   les métadonnées, le pied de page et les colonnes étroites. */
.fp-center p,
.fp-center li,
.fp-center .fp-lede,
.fp-piege-exemple p,
.fp-piege-formule,
.fp-head .fp-small,
.fp-eyebrow,
.fp-cluster-title,
.fp-keypoints-title,
.fp-note-date,
.fp-tarif span,
.fp-tarif b,
.fp-fact span,
.fp-fact em,
.fp-figure figcaption,
.fp-byline span,
.fp-postcta p,
.fp-foot p,
.fp-foot li,
.fp-foot a {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.fp-center p,
.fp-center li,
.fp-center .fp-lede,
.fp-postcta p { text-align: center; }
.fp-postcta p { text-align: left; }

/* Les notes du blog sont composées dans l'éditeur natif de l'hébergeur :
   leur texte n'est pas dans un bloc .fp, il faut donc le justifier ici. */
.blog-item-content p,
.blog-item-content li,
.blog-item-wrapper .sqs-block-html p,
.blog-item-wrapper .sqs-block-html li {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* =========================================================
   PAGES-OFFRE
   Format des pages qui portent une offre activable : un
   auto-diagnostic, une mise en regard « ce qui est écrit /
   ce que ça produit », un bloc d'offre chiffré, et des notes
   de bas de page classées par hiérarchie des normes.
   ========================================================= */

/* --- Auto-diagnostic : le lecteur coche, il se qualifie seul --- */
.fp-diag {
  background: var(--fp-blush);
  border-left: 3px solid var(--fp-accent);
  padding: 30px 32px;
  margin: 0;
}
.fp-diag-titre {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; color: var(--fp-accent);
  margin: 0 0 18px;
}
.fp-diag ul { list-style: none; margin: 0; padding: 0; }
.fp-diag li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--fp-blush-dp);
  font-size: 15.5px; line-height: 1.55; color: var(--fp-text);
  text-align: left;
}
.fp-diag li:last-child { border-bottom: 0; }
.fp-diag input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 17px; height: 17px; margin: 3px 0 0;
  border: 1px solid var(--fp-accent); border-radius: 0;
  background: #fff; cursor: pointer;
  transition: background .15s ease;
}
.fp-diag input[type="checkbox"]:checked { background: var(--fp-accent); }
.fp-diag input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--fp-accent); outline-offset: 2px;
}
.fp-diag-fin {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--fp-accent);
  font-size: 15px; line-height: 1.6; color: var(--fp-text);
}
.fp-diag-fin b { font-weight: 500; }

/* --- Mise en regard : la formule et ce qu'elle produit --- */
.fp-pieges { margin: 0; }
.fp-piege {
  display: grid; grid-template-columns: 235px 1fr 275px; gap: 10px 40px;
  padding: 30px 0;
  border-top: 1px solid var(--fp-blush-dp);
}
.fp-piege:last-child { border-bottom: 1px solid var(--fp-blush-dp); }
.fp-piege-formule {
  font-family: var(--fp-seal);
  font-size: 21px; line-height: 1.35; color: var(--fp-accent);
  text-align: left;
}
.fp-piege-formule span {
  display: block;
  font-family: var(--fp-sans); font-size: 11px; font-weight: 400;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--fp-muted); margin-top: 10px;
}
.fp-piege-effet p { margin: 0 0 10px; font-size: 15.5px; }
.fp-piege-effet p:last-child { margin-bottom: 0; }
.fp-piege-effet b {
  font-family: var(--fp-sans); font-weight: 500;
  color: var(--fp-ink);
}
/* Troisième colonne : l'exemple chiffré */
.fp-piege-exemple {
  background: var(--fp-white);
  border-left: 2px solid var(--fp-accent);
  padding: 18px 20px;
  align-self: start;
}
.fp-piege-exemple .fp-piege-cas {
  font-family: var(--fp-sans);
  font-size: 10.5px; font-weight: 400; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fp-accent);
  margin: 0 0 12px;
}
.fp-piege-exemple p {
  margin: 0 0 9px;
  font-size: 13.5px; line-height: 1.6; color: var(--fp-muted);
  font-variant-numeric: tabular-nums;
}
.fp-piege-exemple p:last-child { margin-bottom: 0; }
.fp-piege-exemple b {
  font-family: var(--fp-display); font-weight: 500;
  color: var(--fp-accent); font-size: 15px;
}
.fp-piege-exemple .fp-piege-chute {
  padding-top: 9px; margin-top: 11px;
  border-top: 1px solid var(--fp-blush-dp);
  color: var(--fp-ink);
}

@media (max-width: 1040px) {
  .fp-piege { grid-template-columns: 210px 1fr; }
  .fp-piege-exemple { grid-column: 2; margin-top: 4px; }
}
@media (max-width: 820px) {
  .fp-piege { grid-template-columns: 1fr; gap: 16px; }
  .fp-piege-exemple { grid-column: 1; }
}

/* --- Le bloc d'offre --- */
.fp-offre {
  background: #fff;
  border: 1px solid var(--fp-line);
  border-top: 3px solid var(--fp-accent);
  padding: 38px 40px;
}
.fp-offre-tete {
  display: grid; grid-template-columns: 1fr auto; gap: 20px 40px;
  align-items: start;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--fp-blush-dp);
}
.fp-offre-tete h3 {
  font-family: var(--fp-display); font-weight: 500;
  font-size: 25px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--fp-ink); margin: 0 0 8px;
}
.fp-offre-tete p { margin: 0; font-size: 15.5px; color: var(--fp-muted); }
.fp-prix {
  font-family: var(--fp-seal);
  font-size: 40px; line-height: 1; color: var(--fp-accent);
  white-space: nowrap; text-align: right;
}
.fp-prix span {
  display: block;
  font-family: var(--fp-sans); font-size: 11px; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--fp-muted); margin-top: 10px;
}
.fp-offre-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 44px; }
@media (max-width: 760px) {
  .fp-offre { padding: 30px 24px; }
  .fp-offre-tete { grid-template-columns: 1fr; }
  .fp-prix { text-align: left; }
  .fp-offre-grille { grid-template-columns: 1fr; }
}

/* --- Appels de note et sources --- */
/* Référence citée au fil du texte : présente, jamais encombrante */
.fp-src {
  font-size: .82em;
  color: var(--fp-muted);
}
/* Une source longue doit pouvoir revenir à la ligne : sur écran étroit, un
   « nowrap » général débordait de la page. Pour empêcher une référence courte
   de se couper en deux, utiliser des espaces insécables dans le texte. */
.fp-src--court { white-space: nowrap; }

sup.fp-ref {
  font-family: var(--fp-sans); font-size: 10.5px; font-weight: 500;
  color: var(--fp-accent); vertical-align: super; line-height: 0;
  margin-left: 1px;
}
.fp-sources { margin-top: 10px; }
.fp-sources-groupe {
  font-family: var(--fp-sans);
  font-size: 11px; font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; color: var(--fp-accent);
  margin: 30px 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--fp-blush-dp);
}
.fp-sources-groupe:first-child { margin-top: 0; }
.fp-sources ol { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.fp-sources li {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px;
  padding: 7px 0;
  font-size: 13.5px; line-height: 1.65; color: var(--fp-muted);
  text-align: left;
}
.fp-sources li b {
  font-family: var(--fp-sans); font-weight: 500;
  color: var(--fp-accent); font-variant-numeric: tabular-nums;
}
.fp-sources li i { font-style: italic; }

/* =========================================================
   QCM PROGRESSIF
   Sans JavaScript, les six questions s'affichent à la suite et
   la page reste utilisable. Avec JavaScript, le script ajoute
   la classe .fp-qcm--js et le questionnaire se déroule une
   question à la fois. Rien n'est jamais caché par le CSS seul.
   ========================================================= */
.fp-qcm {
  background: var(--fp-white);
  border: 1px solid var(--fp-line);
  border-top: 3px solid var(--fp-accent);
  padding: 34px 38px;
}
.fp-qcm-barre {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 26px;
}
.fp-qcm--js .fp-qcm-barre { display: flex; }
.fp-qcm-barre { display: none; }
.fp-qcm-piste {
  flex: 1; height: 2px; background: var(--fp-blush-dp);
  position: relative; overflow: hidden;
}
.fp-qcm-jauge {
  position: absolute; inset: 0 auto 0 0;
  background: var(--fp-accent); width: 0;
  transition: width .35s ease;
}
.fp-qcm-compteur {
  font-family: var(--fp-sans); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fp-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.fp-qcm-etape { padding: 4px 0; }
.fp-qcm--js .fp-qcm-etape { display: none; }
.fp-qcm--js .fp-qcm-etape.est-active { display: block; }
.fp-qcm-etape + .fp-qcm-etape { margin-top: 30px; }
.fp-qcm--js .fp-qcm-etape + .fp-qcm-etape { margin-top: 0; }

.fp-qcm-question {
  font-family: var(--fp-display); font-weight: 500;
  font-size: 21px; line-height: 1.35; letter-spacing: -.01em;
  color: var(--fp-ink); margin: 0 0 6px; text-align: left;
}
.fp-qcm-aide {
  font-size: 13.5px; line-height: 1.6; color: var(--fp-muted);
  margin: 0 0 20px; text-align: left;
}
.fp-qcm-choix { display: grid; gap: 10px; margin: 0; }
.fp-qcm-choix label {
  display: grid; grid-template-columns: 18px 1fr; gap: 14px;
  align-items: start;
  padding: 14px 18px;
  border: 1px solid var(--fp-line);
  font-size: 15.5px; line-height: 1.5; color: var(--fp-text);
  text-align: left; cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.fp-qcm-choix label:hover { border-color: var(--fp-accent-lt); background: var(--fp-blush); }
.fp-qcm-choix input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 3px 0 0;
  border: 1px solid var(--fp-accent); border-radius: 50%;
  background: #fff; cursor: pointer;
}
.fp-qcm-choix input[type="radio"]:checked {
  background: var(--fp-accent); box-shadow: inset 0 0 0 3px #fff;
}
.fp-qcm-choix input[type="radio"]:focus-visible {
  outline: 2px solid var(--fp-accent); outline-offset: 3px;
}
.fp-qcm-choix input[type="radio"]:checked + span { color: var(--fp-ink); font-weight: 500; }
.fp-qcm-choix label:has(input:checked) {
  border-color: var(--fp-accent); background: var(--fp-blush);
}

.fp-qcm-pied {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--fp-blush-dp);
}
.fp-qcm--js .fp-qcm-pied { display: flex; }
.fp-qcm-pied { display: none; }
.fp-qcm-retour {
  background: none; border: 0; padding: 0;
  font-family: var(--fp-sans); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fp-muted);
  cursor: pointer; transition: color .2s ease;
}
.fp-qcm-retour:hover { color: var(--fp-accent); }
.fp-qcm-retour[hidden] { visibility: hidden; display: block !important; }
.fp-qcm-suite {
  font-family: var(--fp-sans); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; padding: 15px 30px;
  background: var(--fp-black); color: #fff; border: 1px solid var(--fp-black);
  border-radius: 0; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.fp-qcm-suite:hover { background: var(--fp-accent); border-color: var(--fp-accent); }
.fp-qcm-suite:disabled { opacity: .35; cursor: not-allowed; }

/* Le verdict */
.fp-qcm-verdict { text-align: left; }
.fp-qcm-verdict h3 {
  font-family: var(--fp-display); font-weight: 500;
  font-size: 25px; line-height: 1.25; color: var(--fp-wine);
  margin: 0 0 14px;
}
.fp-qcm-verdict p { font-size: 15.5px; margin: 0 0 12px; }
.fp-qcm-verdict ul { list-style: none; margin: 18px 0 0; padding: 0; }
.fp-qcm-verdict li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.5; text-align: left;
}
.fp-qcm-verdict li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 9px; height: 1px; background: var(--fp-accent);
}
.fp-qcm-suite-note {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--fp-accent);
  font-size: 14.5px; line-height: 1.6; color: var(--fp-text);
}
.fp-qcm-sansjs {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--fp-blush-dp);
  font-size: 13.5px; line-height: 1.65; color: var(--fp-muted);
}
.fp-qcm--js .fp-qcm-sansjs { display: none; }

@media (max-width: 620px) {
  .fp-qcm { padding: 26px 22px; }
  .fp-qcm-pied { flex-direction: column-reverse; align-items: stretch; }
  .fp-qcm-suite { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-qcm-jauge { transition: none; }
}

/* ==========================================================================
   MISE EN AVANT DE L'ONGLET SERVICES DANS LA NAVIGATION SQUARESPACE
   ==========================================================================
   Contrairement au reste de cette feuille, ce bloc ne vise pas nos propres
   blocs de code : il vise le menu que l'hébergeur génère lui-même. Les
   sélecteurs sont donc rattachés à l'adresse de la page, /services, et non
   à une classe — c'est le seul repère qui ne change pas d'un modèle à
   l'autre ni d'une mise à jour à l'autre.

   Si le menu ne change pas d'aspect après avoir collé la feuille :
   ouvrez le site, clic droit sur l'onglet Services → Inspecter, et
   relevez la classe du conteneur. Elle remplace .header-nav-item
   ci-dessous. Le reste des déclarations reste valable.

   ⚠️ L'ordre des onglets ne se règle pas ici mais dans Pages : glissez
   Services avant Publications, et Contact en dernier.
   ========================================================================== */

.header-nav-item a[href="/services"],
.header-menu-nav-item a[href="/services"] {
  background: var(--fp-accent, #7A2E3B);
  color: #FFFFFF !important;
  padding: 7px 14px;
  border-radius: 0;
  transition: background .2s ease;
}

.header-nav-item a[href="/services"]:hover,
.header-menu-nav-item a[href="/services"]:hover {
  background: var(--fp-black, #000000);
  color: #FFFFFF !important;
}

/* l'hébergeur souligne l'onglet de la page courante. Sur un fond plein, ce
   soulignement se voit mal et double l'indication : on le neutralise. */
.header-nav-item--active a[href="/services"]::after,
.header-nav-item a[href="/services"]::after {
  display: none;
}

/* Sur mobile, le menu déroulant aligne des liens pleine largeur : le
   rectangle y prend toute la ligne, ce qui est le comportement voulu. */
@media (max-width: 767px) {
  .header-menu-nav-item a[href="/services"] {
    display: inline-block;
  }
}


/* =====================================================================
   EN-TÊTE, PIED DE PAGE ET FORMULAIRE — site statique
   =====================================================================
   Ce fichier est ajouté à la suite de 00-CSS-A-COLLER.css par
   build_site.py. Il ne concerne QUE la navigation, jusqu'ici fournie
   par la plateforme, et le formulaire de contact.

   Le menu mobile fonctionne sans JavaScript : une case à cocher
   masquée pilote l'ouverture. Sans CSS, le menu reste une simple
   liste de liens accessibles.
   ===================================================================== */

:root {
  --sh-ink: #1A1A1A;
  --sh-accent: #7A2E3B;
  --sh-line: rgba(0, 0, 0, .12);
  --sh-display: 'Manrope', Helvetica, Arial, sans-serif;
  --sh-max: 1120px;
}

body { margin: 0; }

/* --- lien d'évitement, pour la navigation au clavier --- */
.sh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sh-accent); color: #fff; padding: 10px 16px;
  font-family: var(--sh-display); font-size: 14px; text-decoration: none;
}
.sh-skip:focus { left: 8px; top: 8px; }

/* --- barre --- */
.sh {
  position: sticky; top: 0; z-index: 60;
  background: #FFFFFF;
  border-bottom: 1px solid var(--sh-line);
}
.sh-wrap {
  max-width: var(--sh-max); margin: 0 auto;
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 76px;
}

/* --- marque --- */
.sh-marque {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--sh-ink); flex: 0 0 auto;
}
.sh-marque svg { display: block; flex: 0 0 auto; }
.sh-nom {
  font-family: var(--sh-display); font-weight: 600;
  font-size: 16px; letter-spacing: .015em; line-height: 1.15;
  max-width: 9.5em;
}

/* --- navigation --- */
.sh-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sh-nav a {
  font-family: var(--sh-display); font-size: 13.5px; font-weight: 500;
  letter-spacing: .01em; color: var(--sh-ink); text-decoration: none;
  padding: 8px 10px; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.sh-nav a:hover { color: var(--sh-accent); }
.sh-nav a.sh-actif { border-bottom-color: var(--sh-accent); color: var(--sh-accent); }

/* Services : rectangle plein, comme demandé */
.sh-nav a.sh-services {
  background: var(--sh-accent); color: #FFFFFF;
  padding: 8px 15px; margin-left: 6px; border-bottom: none;
}
.sh-nav a.sh-services:hover { background: #6B2733; color: #FFFFFF; }
.sh-nav a.sh-services.sh-actif { color: #FFFFFF; border-bottom: none; }

/* --- bouton du menu mobile --- */
.sh-bascule { position: absolute; opacity: 0; pointer-events: none; }
.sh-bouton {
  display: none; width: 40px; height: 34px; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; padding: 6px;
}
.sh-bouton span {
  display: block; height: 1.5px; background: var(--sh-ink); border-radius: 2px;
}
.sh-bascule:focus-visible + .sh-bouton { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

@media (max-width: 960px) {
  .sh-wrap { flex-wrap: wrap; min-height: 66px; }
  .sh-bouton { display: flex; }
  .sh-nav {
    display: none; width: 100%; flex-direction: column;
    align-items: stretch; gap: 0; padding-bottom: 10px;
  }
  .sh-bascule:checked ~ .sh-nav { display: flex; }
  .sh-nav a {
    padding: 13px 4px; border-bottom: 1px solid var(--sh-line);
    font-size: 15px; white-space: normal;
  }
  .sh-nav a.sh-actif { border-bottom-color: var(--sh-line); }
  .sh-nav a.sh-services {
    margin: 10px 0 0; text-align: center; padding: 13px 15px;
  }
}

@media (max-width: 400px) {
  .sh-wrap { padding: 0 16px; }
  .sh-nom { font-size: 14.5px; max-width: 8em; }
}

/* =====================================================================
   FORMULAIRE DE CONTACT
   ===================================================================== */
.fp-form { margin: 0; }
.fp-form p { margin: 0 0 18px; }
.fp-form label {
  display: block; font-family: var(--sh-display); font-size: 13px;
  font-weight: 500; letter-spacing: .02em; margin-bottom: 7px;
  color: var(--sh-ink);
}
.fp-form label span { color: #555555; font-weight: 400; }
.fp-form input[type="text"],
.fp-form input[type="email"],
.fp-form input[type="tel"],
.fp-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: 'Poppins', Helvetica, Arial, sans-serif; font-size: 15px;
  color: var(--sh-ink); background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, .22); border-radius: 0;
  padding: 12px 14px; line-height: 1.5;
}
.fp-form textarea { resize: vertical; min-height: 150px; }
.fp-form input:focus, .fp-form textarea:focus {
  outline: none; border-color: var(--sh-accent);
  box-shadow: 0 0 0 3px rgba(122, 46, 59, .12);
}
.fp-form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 620px) { .fp-form-duo { grid-template-columns: 1fr; } }

/* Le pot de miel doit rester invisible pour l'humain et présent pour le robot. */
.fp-form-pot { position: absolute; left: -9999px; }

.fp-form button.fp-btn {
  font: inherit; cursor: pointer; border: none;
  font-family: var(--sh-display);
}