/* ==========================================================================
 *  IPP™ — Expérience candidat (page publique, hors panel Filament)
 *  VIP Gestion de Patrimoine et Investissements Inc.
 * --------------------------------------------------------------------------
 *  Reprise fidèle de la maquette Claude Design : marine profond + or
 *  champagne, Cormorant Garamond (titres, italiques) + Manrope (corps),
 *  Great Vibes pour le « Bravo » manuscrit. Angles droits partout — décision
 *  assumée en conception ; seule la pastille de réponse reste ronde.
 *
 *  Cette feuille ne s'applique QU'aux pages publiques du parcours. Les règles
 *  d'or du thème du panel (aucun style inline, tokens clair/sombre) ne la
 *  concernent pas : cette page n'a pas de mode clair, c'est une scène.
 * ========================================================================== */

:root {
  /* ⚠️ Cette page est SOMBRE par conception (fond marine, encre ivoire).
     Sans cette ligne, le navigateur l'ignore et rend AVEC SES PROPRES couleurs
     tout ce qu'il dessine lui-même : le remplissage automatique, les cases à
     cocher, les listes déroulantes, les barres de défilement.

     Le cas qui se voit : l'autofill de Chrome repeint les champs en clair, avec
     son encre à lui. Sur ce formulaire il vise exactement nom, courriel et
     téléphone — donc un candidat qui laisse son navigateur remplir se retrouve
     avec trois champs illisibles, sur la seule page qu'on lui demande de
     remplir. Rien dans notre CSS ne le provoque et rien ne le signale.

     `color-scheme` est la seule façon de le dire au navigateur. Payé le
     2026-08-12. */
  color-scheme: dark;

  --ipp-nuit: #0B1E33;
  --ipp-fond: #070E1B;
  --ipp-ardoise: #14304D;
  --ipp-ardoise-clair: #1C4066;
  --ipp-champagne: #C9A961;
  --ipp-champagne-clair: #E0C583;
  --ipp-ivoire: #F5F1E8;
  --ipp-bleugris: #8FA3B8;
  --ipp-ligne: rgba(201, 169, 97, .22);

  --ipp-serif: 'Cormorant Garamond', Georgia, serif;
  --ipp-sans: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1200px 760px at 72% -14%, #16283f 0%, rgba(11, 20, 40, .35) 48%, transparent 68%),
    radial-gradient(900px 640px at 6% 114%, rgba(201, 169, 97, .09), transparent 56%),
    var(--ipp-fond);
  color: var(--ipp-ivoire);
  font-family: var(--ipp-sans);
  font-weight: 300;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ipp-champagne); text-decoration: none; }
a:hover { color: var(--ipp-champagne-clair); }
input::placeholder { color: rgba(143, 163, 184, .5); }

/* ── Animations ─────────────────────────────────────────────────────────── */

@keyframes ippRise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes ippFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes ippFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ippDot    { to { opacity: 1; } }
@keyframes ippPulse  { 0%, 100% { r: 4.5; } 50% { r: 6.2; } }
@keyframes ippLineGrow { from { width: 0; } to { width: 64px; } }
@keyframes ippTwinkle {
  0%, 100% { opacity: .35; transform: scale(.68); filter: drop-shadow(0 0 3px rgba(201, 169, 97, .5)); }
  50% { opacity: 1; transform: scale(1.55); filter: drop-shadow(0 0 12px rgba(244, 221, 155, 1)) drop-shadow(0 0 22px rgba(201, 169, 97, .7)); }
}
@keyframes ippWrite  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; }
}

/* Élément animé dont le retard varie : porté par --d, réglé dans le HTML. */
.ipp-anim { animation: ippFadeUp .8s ease var(--d, 0s) both; }

/* ── Charpente ──────────────────────────────────────────────────────────── */

/* Filigrane présent sur TOUTES les vues : bords fondus, jamais de démarcation. */
.ipp-filigrane {
  position: fixed;
  right: -4vw;
  top: 50%;
  transform: translateY(-50%);
  height: min(96vh, 1000px);
  width: auto;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  opacity: .07;
  -webkit-mask-image: radial-gradient(60% 60% at 55% 50%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 82%);
  mask-image: radial-gradient(60% 60% at 55% 50%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 82%);
}

.ipp-app { min-height: 100vh; position: relative; z-index: 1; }

/* ── Barre de progression ───────────────────────────────────────────────── */

.ipp-progress {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 18px 24px 16px;
  background: linear-gradient(180deg, var(--ipp-fond) 58%, transparent);
  backdrop-filter: blur(3px);
}
.ipp-progress__inner { max-width: 760px; margin: 0 auto; }
.ipp-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ipp-bleugris);
  margin-bottom: 12px;
}
.ipp-progress__head b {
  color: var(--ipp-champagne);
  font-weight: 500;
  font-family: var(--ipp-serif);
  font-size: 13px;
  letter-spacing: .04em;
  font-style: italic;
}
.ipp-progress__track { position: relative; height: 26px; }
.ipp-progress__track svg { width: 100%; height: 26px; display: block; overflow: visible; }

/* ── Accueil ────────────────────────────────────────────────────────────── */

.ipp-hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 5vw, 60px) clamp(22px, 5vw, 72px) clamp(40px, 6vh, 72px);
  animation: ippRise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.ipp-hero__rule {
  position: absolute;
  top: 0;
  left: clamp(22px, 5vw, 72px);
  right: clamp(22px, 5vw, 72px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .55), transparent);
  z-index: 1;
}

.ipp-hero__aigle {
  position: absolute;
  right: clamp(-24px, -1vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  height: min(84vh, 820px);
  width: auto;
  max-width: 48%;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
  -webkit-mask-image: radial-gradient(72% 68% at 52% 50%, #000 0%, rgba(0, 0, 0, .85) 62%, transparent 90%);
  mask-image: radial-gradient(72% 68% at 52% 50%, #000 0%, rgba(0, 0, 0, .85) 62%, transparent 90%);
  animation: ippFade 1.6s ease .5s both;
}

.ipp-hero__top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(56px, 13vh, 150px);
}
.ipp-hero__marque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  line-height: 1.2;
}
/* Le logo remonte vers la marge gauche : il s'aligne sur le texte, pas sur sa
   propre boîte, dont le PNG porte une marge transparente. */
.ipp-hero__logo {
  height: clamp(64px, 9vw, 108px);
  width: auto;
  object-fit: contain;
  display: block;
  margin-left: clamp(-26px, -2vw, -16px);
}
/* Filet SOUS le logo : il sépare la signature de la section qui suit. */
.ipp-hero__filet {
  display: inline-block;
  height: 2px;
  width: clamp(20px, 4vw, 44px);
  background: var(--ipp-champagne);
  animation: ippLineGrow 1s cubic-bezier(.2, .7, .2, 1) .1s both;
}
.ipp-hero__courbe { flex: 0 0 auto; opacity: .9; animation: ippFade 1.4s ease .3s both; }

.ipp-hero__corps { position: relative; z-index: 1; max-width: 820px; }

.ipp-hero__kicker {
  color: var(--ipp-champagne);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: clamp(11px, 1.35vw, 15px);
  font-weight: 400;
  margin-bottom: clamp(14px, 2.4vh, 22px);
}

/* Or métallique en relief : dégradé clippé sur le texte + extrusion par
   ombres portées empilées. --ipp-titre laisse chaque instrument régler sa
   taille sans dupliquer la règle. */
.ipp-hero__titre {
  font-family: var(--ipp-serif);
  font-weight: 500;
  font-size: var(--ipp-titre, clamp(56px, 10vw, 128px));
  line-height: .9;
  letter-spacing: -.02em;
  margin-bottom: clamp(18px, 3vh, 28px);
  color: transparent;
  background: linear-gradient(177deg, #FBF3DC 0%, #EBD293 30%, #C9A961 58%, #9C7C3B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 248, 225, .6))
    drop-shadow(0 3px 0 rgba(120, 95, 40, .55))
    drop-shadow(0 10px 18px rgba(0, 0, 0, .5));
}
.ipp-hero__titre em {
  font-style: italic;
  font-weight: 500;
  color: var(--ipp-champagne-clair);
  font-size: .4em;
  vertical-align: .95em;
  letter-spacing: 0;
  -webkit-text-fill-color: var(--ipp-champagne-clair);
}

.ipp-hero__accroche {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 3.2vw, 36px);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: #E5E9ED;
  margin-bottom: clamp(24px, 4vh, 38px);
  max-width: var(--ipp-accroche, 22ch);
}

.ipp-hero__p {
  font-size: clamp(16px, 1.75vw, 20px);
  line-height: 1.6;
  color: var(--ipp-ivoire);
  opacity: .9;
  max-width: 52ch;
  margin-bottom: clamp(18px, 2.6vh, 24px);
}
/* Contraste durci : ce paragraphe était en bleu-gris, illisible en plein jour
   sur un téléphone. */
.ipp-hero__p--doux {
  color: #B7C6D6;
  opacity: 1;
  max-width: 54ch;
  margin-bottom: clamp(28px, 4vh, 40px);
}

.ipp-hero__citation {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(21px, 3vw, 32px);
  line-height: 1.25;
  color: var(--ipp-champagne-clair);
  border-left: 2px solid rgba(201, 169, 97, .55);
  padding-left: clamp(16px, 2.5vw, 26px);
  margin: 0 0 clamp(22px, 3vh, 30px);
  max-width: var(--ipp-citation, 26ch);
}

.ipp-hero__pied {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: clamp(36px, 7vh, 72px);
}
.ipp-hero__consigne {
  margin-top: 16px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ipp-champagne);
  max-width: 42ch;
  line-height: 1.5;
}
.ipp-hero__signature {
  font-family: var(--ipp-serif);
  font-style: italic;
  color: var(--ipp-champagne);
  text-align: right;
  font-size: clamp(15px, 1.7vw, 20px);
  line-height: 1.35;
  letter-spacing: .01em;
}

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

/* Or surélevé : biseau clair en haut, socle sombre dessous, enfoncement au
   clic. Le relief est ce qui fait « bouton qu'on a envie de presser ». */
.ipp-btn-or {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  background: linear-gradient(180deg, #EFD79A 0%, #D4B368 48%, #C9A961 62%, #AD8B41 100%);
  color: var(--ipp-nuit);
  border: none;
  border-radius: 0;
  padding: 18px 36px;
  font-family: var(--ipp-sans);
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -2px 3px rgba(120, 90, 30, .4),
    0 6px 0 #856427,
    0 16px 28px -8px rgba(0, 0, 0, .55);
  transition: transform .12s cubic-bezier(.2, .7, .2, 1), box-shadow .12s;
}
.ipp-btn-or:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -2px 3px rgba(120, 90, 30, .4),
    0 8px 0 #856427,
    0 22px 36px -10px rgba(0, 0, 0, .6);
}
.ipp-btn-or:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 2px rgba(120, 90, 30, .4),
    0 2px 0 #856427,
    0 8px 16px -6px rgba(0, 0, 0, .5);
}
.ipp-btn-or .ipp-fleche { font-size: 19px; line-height: 0; }

.ipp-btn-fantome {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  background: transparent;
  color: var(--ipp-champagne-clair);
  border: 1px solid rgba(201, 169, 97, .22);
  border-radius: 0;
  padding: 11px 20px;
  font-family: var(--ipp-sans);
  font-size: 13.5px;
  font-weight: 500;
  transition: border-color .2s, background .2s, transform .15s;
}
.ipp-btn-fantome:hover {
  border-color: var(--ipp-champagne);
  background: rgba(201, 169, 97, .08);
  transform: translateY(-1px);
}
.ipp-btn-fantome--fort { border-color: rgba(201, 169, 97, .35); padding: 12px 22px; }

.ipp-btn-reserver {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  background: var(--ipp-champagne);
  color: var(--ipp-nuit);
  border: none;
  border-radius: 0;
  padding: 15px 32px;
  font-family: var(--ipp-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .015em;
  transition: transform .18s, box-shadow .25s, background .25s;
}
.ipp-btn-reserver:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(201, 169, 97, .6);
  background: var(--ipp-champagne-clair);
}
.ipp-btn-reserver:disabled { opacity: .4; cursor: not-allowed; }
.ipp-btn-reserver .ipp-fleche { font-size: 18px; line-height: 0; }

.ipp-btn-discret {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  background: transparent;
  border: 1px solid rgba(143, 163, 184, .3);
  color: var(--ipp-bleugris);
  border-radius: 0;
  padding: 8px 15px;
  font-family: var(--ipp-sans);
  font-size: 11.5px;
  letter-spacing: .04em;
  transition: border-color .2s, color .2s;
}
.ipp-btn-discret:hover { border-color: var(--ipp-bleugris); color: #C6D2DE; }

/* ── Scène ──────────────────────────────────────────────────────────────── */

.ipp-scene {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 44px) clamp(20px, 5vw, 32px) 90px;
  animation: ippRise .55s cubic-bezier(.2, .7, .2, 1) both;
}
.ipp-scene__mood {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 2.2vw, 18px);
  color: var(--ipp-champagne);
  letter-spacing: .01em;
  margin-bottom: 14px;
  opacity: .9;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ipp-scene__mood::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--ipp-champagne);
  opacity: .6;
  flex-shrink: 0;
}
.ipp-scene__num {
  color: var(--ipp-champagne);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 16px;
}
.ipp-scene__titre {
  font-family: var(--ipp-serif);
  font-weight: 500;
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--ipp-ivoire);
  margin-bottom: 22px;
}
/* Mise en contexte en doré : elle installe la scène avant la question. */
.ipp-scene__recit p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.62;
  color: var(--ipp-champagne-clair);
  margin-bottom: 12px;
  max-width: 60ch;
}
.ipp-scene__question {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--ipp-ivoire);
  margin: 20px 0 26px;
  font-weight: 400;
  line-height: 1.35;
}
.ipp-scene__consigne {
  font-size: 13px;
  color: var(--ipp-champagne);
  font-style: italic;
  margin-top: 8px;
}

.ipp-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }

/* Contour doré prononcé au repos ; halo net sur le choix retenu. */
.ipp-option {
  position: relative;
  text-align: left;
  cursor: pointer;
  width: 100%;
  background: var(--ipp-ardoise);
  border: 1px solid rgba(201, 169, 97, .85);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 97, .3);
  border-radius: 0;
  padding: 18px 20px 18px 62px;
  color: var(--ipp-ivoire);
  font-family: var(--ipp-sans);
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.45;
  transition: border-color .25s, background .25s, transform .15s, box-shadow .25s;
  display: block;
}
.ipp-option:hover {
  border-color: var(--ipp-champagne);
  background: var(--ipp-ardoise-clair);
  transform: translateX(4px);
}
.ipp-option[aria-pressed="true"] {
  background: var(--ipp-ardoise-clair);
  border-color: #F0DC9A;
  box-shadow: 0 0 0 1.5px var(--ipp-champagne-clair), 0 6px 22px -8px rgba(201, 169, 97, .65);
}

/* Médaillon en relief : la seule forme ronde de l'écran, volontairement. */
.ipp-option__pastille {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ipp-serif);
  font-size: 14.5px;
  font-weight: 600;
  background: radial-gradient(circle at 34% 28%, #204568 0%, #123049 55%, #0C2135 100%);
  color: var(--ipp-champagne-clair);
  border: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .14),
    inset 0 -2px 3px rgba(0, 0, 0, .55),
    0 2px 5px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(201, 169, 97, .34);
  transition: all .25s;
}
.ipp-option[aria-pressed="true"] .ipp-option__pastille {
  background: radial-gradient(circle at 34% 28%, #F6E3AC 0%, #E0C583 32%, #C9A961 58%, #A6813C 100%);
  color: var(--ipp-nuit);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .75),
    inset 0 -2.5px 3px rgba(130, 95, 30, .55),
    0 3px 6px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(201, 169, 97, .6);
}

/* ── Résultat / miroir ──────────────────────────────────────────────────── */

.ipp-result {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 32px) 80px;
  animation: ippRise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.ipp-result__tete { text-align: center; padding: 16px 0 4px; }
.ipp-result__blason { margin: 6px auto 28px; max-width: 340px; display: flex; justify-content: center; }
.ipp-result__kicker {
  color: var(--ipp-champagne);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 12px;
  margin-bottom: 18px;
}
.ipp-result__titre {
  font-family: var(--ipp-serif);
  font-weight: 500;
  font-size: clamp(30px, 5.5vw, 46px);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--ipp-ivoire);
  margin-bottom: 8px;
}
.ipp-result__titre em { font-style: italic; color: var(--ipp-champagne-clair); font-weight: 400; }

/* « Bravo » manuscrit qui s'écrit de gauche à droite. Le padding du bas n'est
   pas décoratif : sans lui, les fioritures de la police sont coupées. */
.ipp-bravo {
  font-family: 'Great Vibes', cursive;
  color: var(--ipp-champagne-clair);
  font-size: clamp(38px, 7vw, 60px);
  line-height: 1.35;
  text-align: center;
  margin-top: 14px;
  padding-bottom: 12px;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(224, 197, 131, .45);
  clip-path: inset(0 100% 0 0);
}

.ipp-carte {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ipp-ardoise), #0A192C);
  border: 1px solid rgba(201, 169, 97, .24);
  border-radius: 0;
  padding: clamp(26px, 4vw, 36px) clamp(22px, 4vw, 32px);
  margin: 22px auto 26px;
  text-align: left;
  box-shadow: 0 24px 66px -22px rgba(0, 0, 0, .6);
}
/* Filet doré signature en haut de carte. */
.ipp-carte::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .6), transparent);
}
.ipp-carte__label {
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ipp-bleugris);
  margin-bottom: 18px;
}
.ipp-carte__texte {
  font-size: clamp(16px, 1.8vw, 17.5px);
  line-height: 1.65;
  color: var(--ipp-ivoire);
  opacity: .92;
  margin-bottom: 16px;
}
.ipp-carte__final {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ipp-champagne-clair);
  line-height: 1.5;
}

.ipp-axes { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.ipp-axe {
  font-family: var(--ipp-serif);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: 100px;
}
.ipp-axe--dom { background: var(--ipp-champagne); color: var(--ipp-nuit); border: 1px solid var(--ipp-champagne); }
.ipp-axe--sec { border: 1px solid var(--ipp-champagne); color: var(--ipp-champagne-clair); }

.ipp-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 34px;
}
.ipp-indice { font-size: 12.5px; color: var(--ipp-bleugris); font-style: italic; opacity: .78; }

/* ── Formulaire de rendez-vous ──────────────────────────────────────────── */

.ipp-reservation { text-align: center; padding: 6px 0 0; }
.ipp-reservation__titre {
  font-family: var(--ipp-serif);
  font-size: clamp(20px, 3.4vw, 27px);
  font-weight: 500;
  color: var(--ipp-ivoire);
  margin-bottom: 10px;
}
.ipp-reservation__texte {
  color: #C4CCD4;
  font-size: 15px;
  line-height: 1.55;
  margin: 0 auto 22px;
  max-width: 52ch;
}
/* La promesse du bilan : c'est elle qui fait aller au bout du formulaire. */
.ipp-reservation__promesse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ipp-champagne-clair);
  font-size: 13.5px;
  font-style: italic;
  margin: 0 auto 28px;
  padding: 9px 16px;
  border: 1px solid rgba(201, 169, 97, .3);
}
.ipp-reservation__suite {
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ipp-champagne);
  margin-top: 14px;
}

.ipp-champs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 440px;
  margin: 0 auto 22px;
  text-align: left;
}
.ipp-champ label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ipp-bleugris);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ipp-champ input {
  width: 100%;
  background: var(--ipp-ardoise);
  border: 1px solid rgba(201, 169, 97, .22);
  border-radius: 0;
  padding: 14px 16px;
  color: var(--ipp-ivoire);
  font-family: var(--ipp-sans);
  font-size: 15px;
}
.ipp-champ input:focus { outline: none; border-color: var(--ipp-champagne); }
.ipp-champ__erreur { display: block; margin-top: 6px; font-size: 12.5px; color: #E8A87C; }

.ipp-consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  max-width: 440px;
  margin: 0 auto 24px;
  text-align: left;
}
.ipp-consentement input { margin-top: 3px; accent-color: var(--ipp-champagne); width: 16px; height: 16px; flex-shrink: 0; }
.ipp-consentement label { font-size: 12.5px; color: var(--ipp-bleugris); line-height: 1.5; }

/* ── Calendrier ─────────────────────────────────────────────────────────── */

.ipp-liaison {
  font-family: var(--ipp-serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 23px);
  color: var(--ipp-champagne-clair);
  text-align: center;
  margin: 10px auto 24px;
  max-width: 46ch;
  line-height: 1.4;
}
.ipp-calendrier {
  position: relative;
  background: var(--ipp-ardoise);
  border: 1px solid rgba(201, 169, 97, .24);
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 24px 66px -22px rgba(0, 0, 0, .6);
  min-height: 520px;
}
.ipp-calendrier::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, .6), transparent);
  z-index: 2;
}
.ipp-calendrier iframe { width: 100%; height: 640px; border: 0; display: block; background: transparent; }
/* Repli quand aucun calendrier n'est configuré : on le DIT, on ne laisse pas
   un cadre vide laisser croire à une panne. */
.ipp-calendrier__attente {
  padding: 48px 28px;
  text-align: center;
  color: var(--ipp-bleugris);
  font-size: 14.5px;
  line-height: 1.6;
}
.ipp-calendrier__note { text-align: center; font-size: 13px; color: var(--ipp-bleugris); margin-top: 16px; opacity: .8; }

/* ── Mentions ───────────────────────────────────────────────────────────── */

.ipp-mentions {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid var(--ipp-ligne);
  font-size: 11.5px;
  color: var(--ipp-bleugris);
  opacity: .65;
  line-height: 1.6;
  text-align: center;
}

.ipp-cache { display: none !important; }

/* ── Durcissement mobile ────────────────────────────────────────────────── */
/* L'aigle cède la place au texte : sur un téléphone, il passait DEVANT le
   titre. Et les champs à 16 px empêchent le zoom automatique d'iOS, qui
   décadrait la page à chaque prise de focus. */

@media (max-width: 640px) {
  .ipp-hero__aigle {
    max-width: 64%;
    opacity: .16;
    right: -14vw;
    height: min(60vh, 520px);
  }
  input, select, textarea { font-size: 16px !important; }
  .ipp-hero__pied { align-items: flex-start; }
  .ipp-hero__signature { text-align: left; }
}

@media (max-width: 400px) {
  .ipp-hero__aigle { opacity: .1; }
}

/* ── Remplissage automatique ───────────────────────────────────────────────────
   `color-scheme: dark` suffit à la plupart des navigateurs, mais WebKit et
   Chrome gardent une teinte d'autofill qui leur est propre et ignore
   `background`. Le seul levier qui tient est l'ombre interne. */
.ipp-champ input:-webkit-autofill,
.ipp-champ input:-webkit-autofill:hover,
.ipp-champ input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ipp-ivoire);
  -webkit-box-shadow: 0 0 0 1000px var(--ipp-ardoise) inset;
  caret-color: var(--ipp-ivoire);
  transition: background-color 9999s ease-out;
}