/* ============================================================
   ANSPACH — Socle des pages interieures (maquette V2)
   Reprend a l'identique le systeme de la page d'accueil :
   < 768 mobile · 768-1023 tablette · 1024-1279 desktop · >= 1280 large
   Chaque page ajoute ensuite son propre <style> pour ce qui lui est propre.
   ============================================================ */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-padding-top:65px }
@media (min-width:1024px) { html { scroll-padding-top:89px } }
body { margin:0; background:#fff; font-family:Figtree,system-ui,sans-serif; overflow-x:hidden }
img { max-width:100%; border:0 }
a { color:inherit; text-decoration:none }
a:hover { color:#5554A0 }
:where(a,button,input,textarea,summary,[tabindex]):focus-visible { outline:2.5px solid #5554A0; outline-offset:3px; border-radius:6px }
input,textarea,button { font-family:Figtree,system-ui,sans-serif }
input::placeholder,textarea::placeholder { color:rgba(35,0,68,.4) }

/* ---------- Echelle fluide (identique a l'accueil) ---------- */
.page {
  --gut:20px;
  --maxw:1312px;
  --hdr:65px;      /* hauteur reelle du header : 64px + le filet de 1px */
  --sec:48px;      /* respiration entre sections, memes valeurs que l'accueil */
  --h1:46px;
  --h2:38px;
  --h3:28px;
  --ph1:40px;      /* titre du bandeau de page, un cran sous le h1 d'accueil */
  --body:15px;
  width:100%; position:relative; background:#fff;
}
@media (min-width:768px) {
  .page { --gut:40px; --sec:60px; --h1:56px; --h2:46px; --h3:32px; --ph1:50px; --body:16px }
}
@media (min-width:1024px) {
  .page { --gut:48px; --hdr:89px; --sec:72px; --h1:62px; --h2:50px; --h3:36px; --ph1:58px; --body:17px }
}
@media (min-width:1280px) {
  .page { --gut:clamp(64px, 5vw, 120px); --sec:80px; --h1:72px; --h2:54px; --h3:38px; --ph1:64px; --body:17px }
}
.wrap { max-width:var(--maxw); margin:0 auto }
.sec { position:relative; z-index:1; padding:var(--sec) var(--gut) }
.sec-tight { padding-top:0 }

/* ---------- Typo ---------- */
.h1 { margin:0; font-family:'Bodoni Moda',serif; font-size:var(--h1); line-height:.95; font-weight:500; color:#230044; letter-spacing:-.02em }
.h2 { margin:0; font-family:'Bodoni Moda',serif; font-size:var(--h2); line-height:1; font-weight:500; color:#230044; letter-spacing:-.02em }
.h3 { margin:0; font-family:'Bodoni Moda',serif; font-size:var(--h3); line-height:1.15; font-weight:500; color:#230044; letter-spacing:-.02em }
.on-dark { color:#fff }
.p { margin:0; font-size:var(--body); line-height:1.6; color:rgba(35,0,68,.75); text-wrap:pretty }
.p + .p { margin-top:14px }
.p-light { color:rgba(255,255,255,.92) }
.kicker { font:700 11px Figtree,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:rgba(35,0,68,.6) }
.kicker-light { color:rgba(255,255,255,.78) }
.kicker-rose { color:#C98BBC }

/* ---------- Boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; border-radius:100px; font-size:15px; font-weight:700; padding:15px 26px; text-align:center; white-space:nowrap; cursor:pointer;
       transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .35s ease, transform .3s cubic-bezier(.22,.61,.36,1) }
.btn-dark { background:#230044; color:#fff }
.btn-outline { background:transparent; border:1.5px solid #230044; color:#230044; padding:15px 28px }
.btn-light { background:#fff; color:#230044 }
.btn-ghost { background:transparent; border:1.5px solid rgba(255,255,255,.85); color:#fff }
.btn:hover { transform:translateY(-2px) }
.btn:active { transform:translateY(0) }
.btn-dark:hover { color:#fff; box-shadow:0 9px 24px rgba(35,0,68,.30) }
.btn-ghost:hover { color:#fff; background:rgba(255,255,255,.14); border-color:#fff }
.btn-light:hover { color:#230044; box-shadow:0 9px 24px rgba(0,0,0,.22) }
.btn-outline:hover { color:#fff; background:#230044; border-color:#230044 }
.btn-block { display:flex; width:100% }
@media (min-width:768px) { .btn-block { display:inline-flex; width:auto } }

/* ---------- Header (sticky) ----------
   Le header reste colle en haut sur toutes les pages. Il garde sa place dans
   le flux : le bandeau de page commence sous lui, jamais derriere. */
.hdr { position:sticky; top:0; z-index:20; padding:0 var(--gut); border-bottom:1px solid rgba(35,0,68,.1); background:#fff;
       transition:box-shadow .3s ease }
.hdr.is-stuck { box-shadow:0 10px 30px rgba(35,0,68,.07) }
.hdr-in { display:flex; align-items:center; justify-content:space-between; height:64px }
.hdr-logo img { height:20px; width:auto; display:block }
.hdr-nav { display:none; gap:34px; font-size:14px; font-weight:500; letter-spacing:.02em; color:#230044 }
.hdr-right { display:flex; align-items:center; gap:16px }
.lang { display:flex; gap:8px; font-size:11px; font-weight:700; letter-spacing:.06em; color:rgba(35,0,68,.68) }
.lang .on { color:#230044 }
.hdr-cta { display:none }
@media (min-width:1024px) {
  .hdr-in { height:88px }
  .hdr-logo img { height:26px }
  .hdr-nav { display:flex }
  .hdr-right { gap:24px }
  .lang { gap:10px; font-size:12px }
  .hdr-cta { display:inline-flex; padding:13px 24px; font-size:14px }
}
.hdr-nav a { position:relative }
.hdr-nav a::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px; background:currentColor;
                    transform:scaleX(0); transform-origin:right; transition:transform .38s cubic-bezier(.22,.61,.36,1) }
.hdr-nav a:hover::after { transform:scaleX(1); transform-origin:left }
/* L'onglet de la page courante garde son trait en permanence. */
.hdr-nav a.on::after { transform:scaleX(1); transform-origin:left }
.lang a, .foot-list a, .hdr-nav a { transition:color .25s ease }

/* ---------- Burger et panneau de menu ----------
   Le bouton est visible a toutes les largeurs (comme dans les modeles). Il
   ouvre un panneau sous le header : navigation complete des six pages et
   reperes pratiques. En desktop le panneau se pose a droite, sur deux
   colonnes ; en mobile il prend toute la largeur, sur une colonne, et
   defile a l'interieur s'il depasse la fenetre. Le header etant colle en
   haut, le panneau et le voile le suivent. */
.hdr .wrap { position:relative }
.burger { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; width:40px; height:40px; padding:8px; margin-right:-8px; border:0; background:none; cursor:pointer }
.burger span { display:block; height:2px; width:24px; background:#230044; transition:transform .3s ease, width .3s ease }
.burger span:last-child { width:16px }
.burger.is-open span { width:24px }
.burger.is-open span:first-child { transform:translateY(4px) rotate(45deg) }
.burger.is-open span:last-child { transform:translateY(-4px) rotate(-45deg) }
.menu-veil { position:fixed; left:0; right:0; top:var(--hdr); bottom:0; z-index:1; background:rgba(35,0,68,.45) }
.menu { position:absolute; z-index:2; top:calc(100% + 1px); left:calc(-1 * var(--gut)); right:calc(-1 * var(--gut));
        background:#fff; color:#230044; box-shadow:0 32px 80px rgba(35,0,68,.3);
        max-height:calc(100svh - var(--hdr)); overflow-y:auto }
.menu[hidden], .menu-veil[hidden] { display:none }
.menu-nav { display:flex; flex-direction:column; padding:8px var(--gut) 28px }
.menu-nav a:not(.btn) { padding:13px 0; border-bottom:1px solid rgba(35,0,68,.1); font-family:'Bodoni Moda',serif; font-size:24px; line-height:1.1; font-weight:500; letter-spacing:-.02em; color:#230044; transition:color .25s ease }
.menu-nav a:not(.btn):hover, .menu-nav a.on { color:#5554A0 }
.menu-nav a.menu-last { border-bottom:0 }
.menu-cta { margin-top:22px; width:100% }
.menu-info { background:#F6F2F8; padding:28px var(--gut) 32px; display:flex; flex-direction:column; justify-content:space-between; gap:24px }
.menu-blocks { display:flex; flex-direction:column; gap:24px }
.menu-k { font:700 11px Figtree,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:rgba(35,0,68,.55); margin-bottom:12px }
.menu-txt { font-size:15px; line-height:1.7; color:#230044 }
.menu-soc { display:flex; gap:12px; padding-top:22px; border-top:1px solid rgba(35,0,68,.14) }
.menu-soc a { width:36px; height:36px; border-radius:100px; background:#230044; color:#fff; display:flex; align-items:center; justify-content:center; font:700 13px Figtree,sans-serif; transition:background-color .3s ease }
.menu-soc a:hover { background:#5554A0; color:#fff }
@media (min-width:1024px) {
  .menu { left:auto; right:0; width:640px; display:grid; grid-template-columns:1fr 1fr; max-height:calc(100vh - var(--hdr) - 24px) }
  .menu[hidden] { display:none }
  .menu-nav { padding:28px 40px 40px; border-right:1px solid rgba(35,0,68,.12) }
  .menu-nav a:not(.btn) { padding:11px 0 }
  .menu-cta { display:none }
  .menu-info { padding:36px 40px 40px }
}

/* ---------- Bandeau de page ----------
   Photo pleine largeur, mot vertical a droite (comme le hero d'accueil) et
   plaque de texte collee en bas a gauche : fil d'Ariane, titre, chapeau.
   Hauteur fixe : il annonce la page, il ne la remplace pas. */
.phero { position:relative; z-index:1; height:400px; overflow:hidden; background:#230044 }
@media (min-width:768px) { .phero { height:440px } }
@media (min-width:1024px) { .phero { height:460px } }
.phero img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; display:block }
.phero-strip { position:absolute; right:0; top:0; bottom:0; width:52px; display:flex; align-items:center; justify-content:center; overflow:hidden; pointer-events:none }
/* Un seul mot, jamais repete, a la meme taille que sur le hero d'accueil
   (54px puis 92px) et centre sur la hauteur du bloc. Un mot court comme
   « FAQ » ne remplit donc pas la hauteur : c'est voulu. */
.phero-strip span { writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; font-family:'Bodoni Moda',serif; font-size:54px; line-height:.9; font-weight:400; color:rgba(255,255,255,.92); letter-spacing:-.01em }
@media (min-width:1024px) {
  .phero-strip { width:88px }
  .phero-strip span { font-size:92px }
}
/* La plaque est un cadre autour du texte, pose dans la colonne de contenu :
   son bord gauche suit la gouttiere (ou la marge du conteneur centre quand
   l'ecran depasse 1312px), comme la carte du hero d'accueil. Elle ne touche
   jamais le bord de l'ecran ni le mot vertical. */
.phero-card { position:absolute; left:var(--gut); bottom:var(--gut); width:fit-content; max-width:calc(100% - var(--gut) - 52px - 12px);
              background:rgba(35,0,68,.78); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); color:#fff;
              padding:24px 22px 26px }
.phero-card-in { max-width:632px }
.phero-card .h1 { font-size:var(--ph1); color:#fff }
.phero-card .p { margin-top:14px; font-size:15px; line-height:1.55 }
@media (min-width:768px) {
  .phero-card { padding:32px 36px 36px }
  .phero-card .p { margin-top:16px; font-size:16px; line-height:1.6 }
}
@media (min-width:1024px) {
  .phero-card { left:max(var(--gut), calc((100% - var(--maxw)) / 2)); bottom:48px;
                max-width:calc(100% - max(var(--gut), calc((100% - var(--maxw)) / 2)) - 88px - 16px);
                padding:40px 48px 44px }
  .phero-card .p { margin-top:18px; font-size:17px }
}
@media (min-width:1280px) { .phero-card { bottom:56px } }
.crumb { display:flex; align-items:center; flex-wrap:wrap; gap:10px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:14px }
.crumb a { color:rgba(255,255,255,.75) }
.crumb a:hover { color:#fff }
.crumb .sep { color:rgba(255,255,255,.5) }
.crumb .now { color:#fff }
@media (min-width:1024px) { .crumb { margin-bottom:18px } }

/* ---------- Intro de section : titre a gauche, texte a droite ---------- */
.shead { display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:30px }
.shead .p { max-width:60ch }
@media (min-width:1024px) { .shead { grid-template-columns:1fr 1fr; gap:64px; align-items:end; margin-bottom:44px } }

/* ---------- Newsletter (identique a l'accueil) ----------
   Pas de marge sous le bandeau : il s'appuie directement sur le footer. La
   lettre A du logo reste un accent de bord derriere le formulaire. */
.sec-nl { position:relative; z-index:1; overflow:hidden; margin:0; background:#EFE4EE; padding:52px var(--gut) 56px;
          background-image:url(img/lettre-a.webp); background-repeat:no-repeat; background-position:left -130px center; background-size:auto 165% }
.nl-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr }
.nl-title { max-width:22ch }
.nl-label { display:block; font-size:13px; font-weight:700; color:rgba(35,0,68,.75); margin:26px 0 10px }
.nl-form { display:flex; flex-direction:column; gap:12px }
.nl-form input { width:100%; height:56px; border-radius:100px; border:0; padding:0 24px; font:16px Figtree,sans-serif; color:#230044; background:#fff; outline:none; transition:box-shadow .25s ease }
.nl-form input:focus { box-shadow:0 0 0 2.5px #230044 }
.nl-form button { width:100%; height:56px; border-radius:100px; border:0; background:#230044; color:#fff; font:700 15px Figtree,sans-serif; cursor:pointer;
                  transition:background-color .3s ease, transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease }
.nl-form button:hover { transform:translateY(-2px); box-shadow:0 9px 24px rgba(35,0,68,.30) }
.nl-form button:active { transform:translateY(0) }
.nl-note { margin:14px 0 0; font-size:13px; color:rgba(35,0,68,.7) }
@media (max-width:1023px) {
  .sec-nl { background-size:auto 78%; background-position:right -120px bottom -70px }
}
@media (min-width:1024px) {
  .sec-nl { padding:80px var(--gut) }
  .nl-grid { grid-template-columns:1fr 420px; gap:40px; align-items:center }
  .nl-label { margin:0 0 10px }
  .nl-form { flex-direction:row; gap:12px }
  .nl-form input { flex:1; width:auto; height:60px; padding:0 26px }
  .nl-form button { width:auto; height:60px; padding:0 32px; white-space:nowrap }
}
@media (min-width:1280px) {
  .sec-nl { padding:88px var(--gut) }
  .nl-grid { grid-template-columns:1fr 520px; gap:64px }
}

/* ---------- Footer (identique a l'accueil) ---------- */
.foot { position:relative; z-index:1; background:#230044; color:#fff; padding:52px var(--gut) 0; overflow:hidden }
.foot-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px }
.foot-brand { grid-column:1 / -1 }
.foot-cond { grid-column:1 / -1 }
.foot-logo { height:24px; width:auto; display:block; margin-bottom:22px }
.foot-adr { font-size:15px; line-height:1.7; color:rgba(255,255,255,.8) }
.foot-soc { display:flex; gap:12px; margin-top:22px }
.foot-soc a { width:42px; height:42px; border-radius:100px; border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700;
              transition:background-color .3s ease, color .3s ease, border-color .3s ease }
.foot-soc a:hover { background:#fff; color:#230044; border-color:#fff }
.foot-h { font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#C98BBC; margin-bottom:16px }
.foot-list { display:flex; flex-direction:column; gap:11px; font-size:15px; color:rgba(255,255,255,.8) }
.foot-list a.on { color:#fff }
.foot-txt { font-size:14px; line-height:1.9; color:rgba(255,255,255,.8) }
.foot-note { margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700 }
.foot-bottom { border-top:1px solid rgba(255,255,255,.18); margin-top:40px; padding:22px 0 18px; font-size:13px; color:rgba(255,255,255,.8) }
.foot-big { width:100%; display:block; opacity:.1; margin:8px 0 -22px }
@media (min-width:768px) {
  .foot-grid { grid-template-columns:repeat(3,1fr); gap:40px }
  .foot-cond { grid-column:auto }
}
@media (min-width:1024px) {
  .foot { padding:80px var(--gut) 0 }
  .foot-grid { grid-template-columns:1.3fr 1fr 1fr 1fr; gap:48px; padding-bottom:64px }
  .foot-brand { grid-column:auto }
  .foot-logo { height:30px; margin-bottom:26px }
  .foot-soc { margin-top:26px }
  .foot-h { font-size:12px; margin-bottom:22px }
  .foot-note { margin-top:22px }
  .foot-bottom { margin-top:0; padding:24px 0 20px }
  .foot-big { margin:12px 0 -46px }
}

/* ---------- Formes de marque (memes lettres que l'accueil) ----------
   La lettre S du logo, detouree, en fondu radial derriere la premiere
   section de contenu. Le mode multiply teinte sans couvrir : le texte reste
   lisible. */
.sec { position:relative; overflow:hidden }
.sec > .wrap { position:relative; z-index:1 }
.sec-letter::before {
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-520px; top:-260px; width:1350px; height:1809px;
  background:url(img/lettre-s.webp) no-repeat center/contain;
  mix-blend-mode:multiply; opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 78% 76% at 44% 48%,#000 62%,rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(ellipse 78% 76% at 44% 48%,#000 62%,rgba(0,0,0,0) 100%);
}
@media (max-width:1023px) {
  .sec-letter::before { left:-330px; top:-120px; width:760px; height:1018px; opacity:.5 }
}

/* ---------- Reduction des animations ----------
   Les boucles et les deplacements s'eteignent, les fondus et les couleurs
   restent : ils portent l'etat. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important }
  .btn:hover, .nl-form button:hover { transform:none }
  .hdr-nav a::after { transition-duration:.01ms }
}