/* Prof&Pratique — site de marque
   Charte : bleu nuit #18324F · beige #EFE6D8 · crème #FAF7F2 · doré #B69A5B
   Mise en page : héros bleu nuit centré sur le planner, sections alternées crème / beige, cartes arrondies. */
:root {
  --nuit: #18324F; --nuit-2: #22426A; --nuit-3: #2C5280; --beige: #EFE6D8; --beige-2: #E6DAC6; --creme: #FAF7F2; --or: #B69A5B; --or-fonce: #7A6331; --or-clair: #E9DCC0;
  --encre: #18324F; --texte: #2B394E; --gris: #59627A; --ligne: #E2D7C4; --blanc: #FFFDF9; --ok: #2F6B48;
  --titre: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --corps: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --r: 20px; --r-s: 12px;
  --ombre: 0 1px 2px rgba(24,50,79,.06), 0 14px 34px -22px rgba(24,50,79,.45);
  --ombre-forte: 0 30px 60px -30px rgba(9,20,36,.65);
  --t: .18s ease;
}
* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px }
body { margin: 0; background: var(--creme); color: var(--texte); font: 17px/1.65 var(--corps); -webkit-font-smoothing: antialiased }
img { max-width: 100%; height: auto; display: block }
a { color: var(--or-fonce); text-underline-offset: 3px }
h1, h2, h3 { color: var(--encre); margin: 0 0 .5em; text-wrap: balance }
h1 { font-family: var(--titre); font-weight: 600; font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.015em }
h2 { font-family: var(--titre); font-weight: 600; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.1 }
h3, .h3 { font-family: var(--corps); font-size: 18.5px; font-weight: 700; line-height: 1.3 }
h2.h3 { font-size: 22px }
p { margin: 0 0 1em }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto }
.etroit { max-width: 780px }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip:focus { position: fixed; left: 12px; top: 12px; width: auto; height: auto; clip: auto; background: #fff; padding: 8px 12px; z-index: 99; border-radius: 8px }
.tiny { font-size: 14px; color: var(--gris) }
.lead { font-size: clamp(18px, 1.7vw, 20.5px); line-height: 1.55; color: var(--gris); max-width: 40em }
.sur { text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 700; color: var(--or-fonce); margin-bottom: 10px }
.devise { font-family: var(--titre); font-style: italic; font-size: 20px; color: var(--or-fonce); margin-top: 16px }
.mt { margin-top: 28px }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; border-radius: 8px }

/* boutons : une action principale dorée, une secondaire bleu nuit, le reste en lien */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 24px; border-radius: 999px; font: 700 15.5px/1.2 var(--corps); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t); text-align: center }
.btn:hover { transform: translateY(-1px) }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: 14.5px }
.btn-grand { min-height: 56px; padding: 14px 32px; font-size: 17px }
.btn-or { background: var(--or); color: #fff; box-shadow: 0 12px 24px -14px rgba(122,99,49,.95) }
.btn-or:hover { background: #A88B4F; box-shadow: 0 16px 28px -14px rgba(122,99,49,.95) }
.btn-nuit { background: var(--nuit); color: #FAF6EE }
.btn-nuit:hover { background: var(--nuit-2) }
.btn-ligne { background: transparent; color: var(--encre); border-color: #CBBD9C }
.btn-ligne:hover { background: var(--beige) }
.btn-discret { background: transparent; color: var(--encre); min-height: 42px; padding: 8px 14px; font-size: 14.5px }
.btn-discret:hover { background: var(--beige) }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px }
.actions.centre { justify-content: center; margin-top: 36px }
.lien-sec { font-weight: 700; text-decoration: none; color: var(--or-fonce); display: inline-flex; align-items: center; gap: 6px; min-height: 44px }
.lien-sec::after { content: "→"; transition: transform var(--t) }
.lien-sec:hover::after { transform: translateX(3px) }

/* en-tête */
.entete { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(250,247,242,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--ligne) }
.entete-in { display: flex; align-items: center; gap: 18px; min-height: 92px; position: relative }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--encre) }
.logo-img { width: 72px; height: 72px; border-radius: 50%; box-shadow: 0 6px 16px -8px rgba(24,50,79,.55); transition: transform var(--t) }
.logo:hover .logo-img { transform: scale(1.03) }
.logo-grand { width: 180px; height: 180px; border-radius: 50%; box-shadow: 0 18px 36px -18px rgba(24,50,79,.6); margin-bottom: 22px }
.logo-txt { font-family: var(--titre); font-weight: 700; font-size: 27px; letter-spacing: -.01em }
.logo-txt em { color: var(--or); font-style: normal }
.nav { display: flex; gap: 2px; margin-left: auto }
.nav a { padding: 9px 14px; border-radius: 999px; text-decoration: none; color: var(--texte); font-weight: 600; font-size: 15.5px; transition: background var(--t) }
.nav a:hover { background: var(--beige) }
.nav a[aria-current] { color: var(--encre); background: var(--beige); box-shadow: inset 0 0 0 1px var(--beige-2) }
.entete-actions { display: flex; align-items: center; gap: 6px }
.menu-mob { display: none; margin-left: auto }
.menu-mob summary { list-style: none; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--ligne); display: grid; place-content: center; gap: 5px; cursor: pointer; background: var(--blanc) }
.menu-mob summary::-webkit-details-marker { display: none }
.menu-mob summary span { width: 20px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform var(--t), opacity var(--t) }
.menu-mob[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.menu-mob[open] summary span:nth-child(2) { opacity: 0 }
.menu-mob[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
.menu-mob:not([open]) nav { display: none }
.menu-mob nav { position: absolute; left: -20px; right: -20px; top: 100%; background: var(--creme); border-bottom: 1px solid var(--ligne); padding: 8px 20px 22px; display: grid; gap: 2px; box-shadow: var(--ombre) }
.menu-mob nav a { padding: 13px 10px; text-decoration: none; color: var(--encre); font-weight: 600; border-radius: 12px; font-size: 17px }
.menu-mob nav a[aria-current] { background: var(--beige) }
.menu-mob nav .btn { margin-top: 10px; color: #FAF6EE }
@media (max-width: 1060px) { .nav, .entete-actions { display: none } .menu-mob { display: block } }
@media (max-width: 1060px) { .entete-in { min-height: 76px } .logo-img { width: 58px; height: 58px } }
@media (max-width: 420px) { .logo-txt { font-size: 23px } .logo-img { width: 52px; height: 52px } .logo-grand { width: 150px; height: 150px } }

/* héros : le planner d'abord */
.hero { background: radial-gradient(120% 90% at 85% 10%, #22426A 0%, var(--nuit) 55%); color: #EDE6D8; overflow: hidden }
.hero-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 96px) }
.hero h1 { color: #FAF6EE }
.hero .sur { color: var(--or) }
.hero .lead { color: #D8CFBF }
.hero .public { color: #C9C0AE; font-size: 15.5px; margin: 0 0 16px }
.hero .lien-sec { color: var(--or-clair) }
.coches { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; font-size: 15.5px; color: #EDE6D8 }
.coches li { position: relative; padding-left: 26px }
.coches li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px; border-left: 2.5px solid var(--or); border-bottom: 2.5px solid var(--or); transform: rotate(-45deg) }
.hero-visuel { position: relative; padding-bottom: 64px; padding-right: 40px }
.ecran { margin: 0; background: #F4EFE6; border-radius: 16px; overflow: hidden; box-shadow: var(--ombre-forte); border: 1px solid rgba(255,255,255,.12) }
.ecran-barre { height: 30px; background: #E7DFD1; display: flex; gap: 7px; align-items: center; padding: 0 14px }
.ecran-barre span { width: 10px; height: 10px; border-radius: 50%; background: #CDBFA6 }
.ecran figcaption { padding: 9px 14px; font-size: 13px; color: var(--gris); background: var(--blanc); display: flex; gap: 8px; align-items: center }
.couv-flottante { position: absolute; right: -22px; bottom: -6px; width: 24%; max-width: 150px; text-decoration: none; transition: transform var(--t) }
.couv-flottante:hover { transform: translateY(-4px) rotate(-1deg) }
.couv-flottante img { border-radius: 8px; box-shadow: 0 22px 40px -18px rgba(0,0,0,.75); transform: rotate(3deg) }
.couv-flottante > span { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; justify-content: center; margin-top: 12px; font-size: 12.5px; color: #EDE6D8; font-weight: 600; text-align: center }
@media (max-width: 920px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 34px }
  .hero-visuel { padding: 0 }
  .couv-flottante { position: static; display: flex; align-items: center; gap: 14px; width: auto; max-width: none; margin-top: 18px }
  .couv-flottante img { width: 74px; transform: none }
  .couv-flottante > span { margin: 0; font-size: 14px }
}
@media (max-width: 480px) { .coches { grid-template-columns: 1fr } .hero .btn-grand { width: 100% } }

/* sections */
.bloc { padding-block: clamp(56px, 7vw, 96px) }
.bloc.beige { background: var(--beige) }
.titre-bloc { display: flex; justify-content: space-between; align-items: end; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 30px }
.titre-bloc h2 { margin: 0 }
.entete-page { padding-block: clamp(44px, 6vw, 76px) 10px }
.fil { font-size: 14px; color: var(--gris) } .fil a { color: var(--gris) }

/* fonctionnalités */
.fonctions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.fonction { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 26px; transition: transform var(--t), box-shadow var(--t) }
.fonction:hover { transform: translateY(-2px); box-shadow: var(--ombre) }
.fonction .ico { width: 48px; height: 48px; margin-bottom: 14px }
.fonction h3 { margin-bottom: 6px }
.fonction p { font-size: 15.5px; margin: 0; color: var(--gris) }
@media (max-width: 900px) { .fonctions { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .fonctions { grid-template-columns: 1fr } }

/* galerie de captures */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start }
.galerie.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.galerie figure { margin: 0; background: var(--blanc); border-radius: var(--r); padding: 12px; border: 1px solid var(--ligne); box-shadow: var(--ombre) }
.galerie img { border-radius: 10px; width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top left; background: var(--beige) }
.galerie figure:has(img[src*="telephone"]) img { object-fit: contain; background: linear-gradient(160deg, #F2ECE2, #E6DCCB) }
.galerie figcaption { padding: 12px 6px 4px; display: grid; gap: 2px; font-size: 14.5px; color: var(--gris) }
.galerie figcaption b { color: var(--encre); font-size: 16px }
@media (max-width: 860px) { .galerie, .galerie.g4 { grid-template-columns: minmax(0, 1fr) } }

/* cartes produits : visuels harmonisés (couverture réelle posée sur un fond beige) */
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px }
.carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t) }
.carte:hover { transform: translateY(-3px); box-shadow: var(--ombre) }
.carte-img { display: grid; place-items: center; aspect-ratio: 4/4.4; background: linear-gradient(165deg, #F3ECE0 0%, var(--beige-2) 100%); padding: 22px 26px; overflow: hidden }
.carte-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 16px 26px -16px rgba(24,50,79,.6); transition: transform var(--t) }
.carte:hover .carte-img img { transform: scale(1.02) }
.carte-img.app img { border-radius: 8px; width: 100%; height: auto }
.carte-txt { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 4px; flex: 1 }
.carte-txt h3 { font-size: 18px; margin: 8px 0 2px } .carte-txt h3 a { color: var(--encre); text-decoration: none }
.carte-txt h3 a:hover { text-decoration: underline }
.carte-txt p { font-size: 15px; margin: 0; color: var(--gris) }
.carte-txt .btn { margin-top: auto; align-self: flex-start }
.carte-txt .tiny { margin: 6px 0 16px; font-size: 13.5px }
.carte-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.badge { display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: var(--beige); color: var(--encre); text-decoration: none; line-height: 1.5 }
.badge.f-pdf { background: #E3EAF4; color: var(--nuit) }
.badge.f-app { background: var(--nuit); color: #FAF6EE }
.hero .badge.f-app { background: var(--or); color: #fff }
.badge.f-notion { background: #ECECEC; color: #333 }
.badge.cat { background: transparent; border: 1px solid var(--ligne) }
.prix { margin-left: auto; font-weight: 800; color: var(--encre); font-variant-numeric: tabular-nums }
.prix.gratuit { color: var(--ok) }
.prix.prep { font-weight: 700; color: var(--or-fonce); font-size: 13.5px }
.prix.grand { font-size: 30px; margin: 0 }
.legende { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 14px; color: var(--gris) }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px }
.filtres a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--ligne); text-decoration: none; color: var(--encre); font-weight: 600; font-size: 14.5px; background: var(--blanc); transition: background var(--t), border-color var(--t) }
.filtres a:hover { border-color: var(--or) }
.filtres a[aria-current] { background: var(--nuit); color: #FAF6EE; border-color: var(--nuit) }

/* deux formats du planner */
.formats-bloc { padding-top: 24px }
.formats { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px }
.format { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--ombre) }
.format-img { background: linear-gradient(165deg, #F3ECE0, var(--beige-2)); padding: 22px; display: grid; place-items: center; min-height: 260px }
.format-app .format-img img { border-radius: 10px; box-shadow: 0 18px 30px -18px rgba(24,50,79,.6) }
.format-img.couv img { max-height: 300px; width: auto; border-radius: 6px; box-shadow: 0 18px 30px -16px rgba(24,50,79,.6) }
.format-txt { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px }
.format-txt h3 { font-family: var(--titre); font-size: 28px; font-weight: 600; margin: 6px 0 0 }
.format-txt p { color: var(--gris); margin: 0 0 8px }
.format-txt .btn { align-self: flex-start; margin-top: auto }
.format-txt .actions { margin-top: auto }
@media (max-width: 860px) { .formats { grid-template-columns: minmax(0, 1fr) } }

/* duos */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start }
.duo-img img { border-radius: var(--r); box-shadow: var(--ombre); width: 100% }
.duo-txt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px }
@media (max-width: 860px) { .duo, .duo-txt { grid-template-columns: minmax(0, 1fr); gap: 34px } }

/* fiche produit */
.fiche { padding-top: 18px }
.fiche-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start }
.fiche-visuels { position: sticky; top: 112px }
.fiche-img { width: 100%; border-radius: var(--r); background: linear-gradient(165deg, #F3ECE0, var(--beige-2)); padding: 28px; display: grid; place-items: center }
img.fiche-img { object-fit: contain; max-height: 640px }
.apercus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px }
.apercus a { display: block; border-radius: var(--r-s); overflow: hidden; border: 1px solid var(--ligne); background: var(--blanc); transition: transform var(--t) }
.apercus a:hover { transform: translateY(-2px) }
.apercus img { aspect-ratio: 1; object-fit: cover; object-position: top; width: 100% }
.fiche-txt h1 { font-size: clamp(34px, 4vw, 50px); margin-top: 14px }
.achat { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 24px 0 8px }
.infos { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px 20px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ligne) }
.infos dt { font-weight: 700; color: var(--encre) } .infos dd { margin: 0; overflow-wrap: anywhere }
.liste { padding-left: 0; list-style: none; margin: 0 0 1em }
.liste li { padding: 8px 0 8px 26px; position: relative; border-bottom: 1px dashed var(--ligne) }
.liste li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--or) }
@media (max-width: 860px) { .fiche-in { grid-template-columns: minmax(0, 1fr); gap: 30px } .fiche-visuels { position: static } .infos { grid-template-columns: minmax(0, 1fr); gap: 2px } .infos dd { margin-bottom: 12px } }

/* planner */
.statut-prep { background: var(--blanc); border: 1px solid var(--or-clair); border-left: 5px solid var(--or); border-radius: 14px; padding: 16px 20px; margin-bottom: 40px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center }
.statut-prep p { margin: 0; flex: 1 1 280px }
.etapes { list-style: none; padding: 0; margin: 0 0 18px; counter-reset: e; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px }
.etapes li { counter-increment: e; background: var(--blanc); border-radius: var(--r); padding: 22px; display: grid; gap: 4px; font-size: 15px; border: 1px solid var(--ligne) }
.etapes li::before { content: counter(e); width: 36px; height: 36px; border-radius: 50%; background: var(--nuit); color: #FAF6EE; display: grid; place-items: center; font-weight: 800; margin-bottom: 8px }
.etapes span { color: var(--gris) }
@media (max-width: 1000px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 520px) { .etapes { grid-template-columns: minmax(0, 1fr) } }

/* ressources gratuites */
.ressources { display: grid; gap: 20px }
.ressource { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 28px; align-items: center; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 20px }
.ressource > img { border-radius: 10px; aspect-ratio: 4/5; object-fit: contain; width: 100%; background: linear-gradient(165deg, #F3ECE0, var(--beige-2)); padding: 12px }
.ressource h2 { font-size: 30px; margin-top: 8px }
.ressource .actions { margin-top: 12px }
@media (max-width: 600px) { .ressource { grid-template-columns: minmax(0, 1fr) } .ressource > img { max-width: 220px } }

/* vignette quand un visuel manque */
.vignette { display: grid; place-content: center; justify-items: center; gap: 10px; height: 100%; width: 100%; padding: 22px; text-align: center; background: linear-gradient(160deg, #22426A, #18324F 70%); color: #FAF6EE; border-radius: 8px }
.vignette .v-m { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(150deg, #D8B57A, #A9803F); color: #18324F; display: grid; place-items: center; font: 700 22px var(--titre) }
.vignette b { font: 600 24px/1.15 var(--titre); max-width: 14em }
.vignette small { text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; color: #E9DCC0 }
.vig-grande { aspect-ratio: 1; overflow: hidden }
.res-vig { aspect-ratio: 1; border-radius: 12px; overflow: hidden }

/* FAQ et textes */
.faq { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 2px 18px; margin-bottom: 10px; transition: border-color var(--t) }
.faq[open] { border-color: var(--or-clair) }
.faq summary { cursor: pointer; font-weight: 700; color: var(--encre); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; min-height: 48px; align-items: center }
.faq summary::after { content: "+"; color: var(--or-fonce); font-size: 22px; line-height: 1; transition: transform var(--t) }
.faq[open] summary::after { transform: rotate(45deg) }
.faq summary::-webkit-details-marker { display: none }
.faq p { margin: 0 0 16px; color: var(--gris) }
.texte h2 { font-size: 28px; margin-top: 1.4em }
.brouillon { background: #F8E5E1; color: #8E3A2F; padding: 10px 14px; border-radius: 10px; font-size: 14.5px }
.a-completer { background: #F5EAD3; border-radius: 4px; padding: 0 4px; font-size: .95em }

/* pied de page */
.pied { background: var(--nuit); color: #D9D0BF; padding-top: 60px }
.pied a { color: #EDE5D6; text-decoration: none } .pied a:hover { text-decoration: underline }
.pied-in { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px }
.pied nav { display: grid; gap: 4px; align-content: start; font-size: 15px }
.pied nav a { min-height: 34px; display: flex; align-items: center }
.pied b { color: #FAF6EE; margin-bottom: 4px }
.pied .devise { color: var(--or-clair) }
.pied .logo-img { width: 132px; height: 132px; box-shadow: 0 14px 28px -12px rgba(0,0,0,.75) }
.pied-bas { border-top: 1px solid rgba(237,229,214,.15); margin-top: 44px; padding-block: 22px; font-size: 13.5px; color: #A9A190 }
@media (max-width: 860px) { .pied-in { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .pied-in { grid-template-columns: minmax(0, 1fr) } }
@media (prefers-reduced-motion: reduce) { *, *::after { transition: none !important; scroll-behavior: auto !important } }

@media (max-width: 560px) { .fonction { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px } .fonction .ico { width: 40px; height: 40px; margin: 0; grid-row: span 2 } .fonction h3 { margin: 6px 0 4px } }

/* textes de présentation de la marque */
.signature { font-family: var(--titre); font-style: italic; font-weight: 600; font-size: clamp(22px, 2.4vw, 27px); line-height: 1.3; color: var(--encre); border-left: 3px solid var(--or); padding: 4px 0 4px 18px; margin: 22px 0 }
.apropos-tete { text-align: center } .apropos-tete .logo-grand { margin-inline: auto } .apropos-tete h1 { max-width: 16em; margin-inline: auto }
.apropos { padding-top: 32px } .apropos .duo { align-items: center } .apropos-txt p { max-width: 36em } .apropos-txt .lead { color: var(--texte) }
.esprit { background: var(--nuit); color: #E2D9C8; text-align: center }
.esprit .sur { color: var(--or) }
.esprit .signature.grande { border: 0; padding: 0; color: #FAF6EE; font-size: clamp(28px, 4vw, 44px); margin: 6px 0 22px }
.esprit p { max-width: 38em; margin-inline: auto }
.esprit .lien-sec { color: var(--or-clair) }

/* ---------- version commerciale : planner au premier plan ---------- */
.hero-sous { font-family: var(--titre); font-style: italic; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.3; color: #F1E7D2; margin-bottom: 14px }
.hero-devise { font-weight: 700; letter-spacing: .02em; color: var(--or); font-size: 15.5px; margin: 6px 0 20px }
.prix-bloc { display: inline-grid; gap: 2px; padding: 14px 20px; border-radius: 16px; background: rgba(250,246,238,.07); border: 1px solid rgba(182,154,91,.45) }
.prix-mois { margin: 0; font-size: 18px; color: #EDE6D8 } .prix-mois span { font-family: var(--titre); font-weight: 700; font-size: 44px; color: #FAF6EE; line-height: 1 } .prix-mois sup { color: var(--or) }
.prix-note { margin: 0; font-size: 13.5px; color: #CFC5B2 }
.prix-etat { margin: 6px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or) }
.btn-clair:hover { background: rgba(250,246,238,.08) }
.hero .hero-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) }
.hero .hero-visuel { padding: 0 }
.hero .ecran { transform: perspective(1600px) rotateY(-4deg); transform-origin: left center; transition: transform .4s ease }
.hero .ecran:hover { transform: none }
@media (max-width: 920px) { .hero .hero-in { grid-template-columns: minmax(0, 1fr) } .hero .ecran { transform: none } .prix-bloc { display: grid } }
.titre-centre { text-align: center; max-width: 820px; margin: 0 auto 38px } .titre-centre .lead { margin-inline: auto }
.accroche { font-family: var(--titre); font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; color: var(--encre); margin: 6px 0 0 }
.pastille { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(150deg, #FFFFFF, #EFE6D8); box-shadow: inset 0 1px 0 #fff, 0 10px 20px -12px rgba(24,50,79,.45); flex: none }
.pastille img { width: 34px; height: 34px }
.ident-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.ident-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; transition: transform var(--t), box-shadow var(--t) }
.ident-carte:hover { transform: translateY(-3px); box-shadow: var(--ombre) }
.ident-carte h3 { margin: 10px 0 0 } .ident-carte p { margin: 0; font-size: 15.5px; color: var(--gris) }
.ident-carte .solution { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ligne); color: var(--encre) } .ident-carte .solution b { color: var(--or-fonce) }
.conclusion { text-align: center; font-family: var(--titre); font-size: clamp(26px, 3vw, 36px); font-weight: 600; color: var(--encre); margin: 44px 0 0 }
@media (max-width: 1000px) { .ident-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .ident-cartes { grid-template-columns: minmax(0, 1fr) } }
.modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.module { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 24px; transition: transform var(--t), box-shadow var(--t) }
.module:hover { transform: translateY(-2px); box-shadow: var(--ombre) }
.module-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px } .module-tete .pastille { width: 48px; height: 48px; border-radius: 14px } .module-tete .pastille img { width: 30px; height: 30px }
.module-nom { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or-fonce) }
.module h3 { font-family: var(--titre); font-size: 24px; font-weight: 600; line-height: 1.15 } .module p { margin: 0; font-size: 15.5px; color: var(--gris) }
@media (max-width: 960px) { .modules { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .modules { grid-template-columns: minmax(0, 1fr) } }
.onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 24px }
.onglets [role=tab] { font: 600 15px var(--corps); padding: 10px 18px; min-height: 44px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t) }
.onglets [role=tab]:hover { border-color: var(--or) }
.onglets [role=tab][aria-selected=true] { background: var(--nuit); color: #FAF6EE; border-color: var(--nuit) }
.panneau { max-width: 1080px; margin: 0 auto }
.ecran.grand { box-shadow: 0 30px 60px -30px rgba(24,50,79,.55) }
.benefice { text-align: center; margin: 18px auto 0; font-size: 17px; max-width: 46em }
@media (max-width: 600px) { .onglets { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-inline: -20px; padding-inline: 20px } .onglets [role=tab] { flex: none } }
.video-bloc { max-width: 1080px; margin: 46px auto 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--ombre) }
.video-bloc video { width: 100%; display: block; background: #000 }
.video-attente { position: relative; aspect-ratio: 16/7; background: var(--nuit) }
.video-attente img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .22; filter: blur(2px) }
.video-txt { position: relative; height: 100%; display: grid; place-content: center; text-align: center; padding: 24px; color: #EDE6D8 } .video-txt .tiny { color: #CFC5B2; max-width: 46em; margin-inline: auto }
@media (max-width: 600px) { .video-attente { aspect-ratio: auto; min-height: 260px } }
.tarif { background: radial-gradient(90% 70% at 50% 0%, #F3ECE0, var(--creme)) }
.carte-tarif { max-width: 560px; margin: 0 auto; background: var(--blanc); border: 1px solid var(--or-clair); border-radius: 28px; padding: 34px 36px; box-shadow: 0 30px 60px -36px rgba(24,50,79,.55); position: relative }
.carte-tarif::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, #B69A5B, #E2C98F, #B69A5B) }
.tarif-tete { display: flex; align-items: center; gap: 16px } .tarif-tete h3 { font-family: var(--titre); font-size: 28px; font-weight: 700; margin: 0 } .tarif-tete p { margin: 0; color: var(--gris); font-size: 15px }
.tarif-prix { margin: 24px 0 0; font-size: 20px; color: var(--gris) } .tarif-prix span { font-family: var(--titre); font-weight: 700; font-size: 64px; line-height: 1; color: var(--encre) } .tarif-prix sup { color: var(--or-fonce) }
.tarif-an { margin: 2px 0 0; font-weight: 800; font-size: 20px; color: var(--encre) }
.tarif-note { margin: 8px 0 22px; font-size: 14.5px; color: var(--gris) }
.tarif-liste { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px }
.tarif-liste li { position: relative; padding-left: 30px; font-size: 15.5px }
.tarif-liste li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 15px; height: 9px; border-left: 2.5px solid var(--or); border-bottom: 2.5px solid var(--or); transform: rotate(-45deg) }
.tarif-actions { display: grid; gap: 10px; text-align: center } .btn-plein { width: 100% }
.tarif-pied { margin: 18px 0 0; text-align: center }
@media (max-width: 520px) { .carte-tarif { padding: 26px 20px; border-radius: 22px } .tarif-prix span { font-size: 54px } }
.rassure { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px }
.rassure-item { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 22px }
.rassure-item h3 { font-size: 17px; display: flex; align-items: center; gap: 8px } .rassure-item h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--or); flex: none }
.rassure-item p { margin: 0; font-size: 15px; color: var(--gris) }
.note-eleves { max-width: 820px; margin: 26px auto 0; text-align: center; font-size: 15px; color: var(--gris); background: var(--blanc); border-radius: 14px; padding: 14px 18px; border: 1px dashed var(--or-clair) }
@media (max-width: 1100px) { .rassure { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .rassure { grid-template-columns: minmax(0, 1fr) } }
.temoignages { text-align: center } .temoignages .btn { margin-top: 6px }
.sous-titre { font-family: var(--titre); font-size: 26px; font-weight: 600; margin: 8px 0 18px } .mt-l { margin-top: 48px }
.contact-bloc { background: var(--nuit); color: #E2D9C8; padding-block: 56px } .contact-bloc h2 { color: #FAF6EE } .contact-bloc .sur { color: var(--or) } .contact-bloc .lien-sec { color: var(--or-clair) }
.contact-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center } .contact-bloc .btn-nuit { background: var(--or); color: #fff }
.pdf-encart { display: flex; gap: 18px; align-items: center; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 18px } .pdf-encart img { width: 90px; border-radius: 6px; box-shadow: var(--ombre) } .pdf-encart p { margin: 0 0 4px }
.hero-planner h1 { font-size: clamp(34px, 4.4vw, 54px) }

/* ---------- étape 2 : bénéfices, FAQ, philosophie, appel final, mobile ---------- */
.benef-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px }
.benef { position: relative; padding: 30px 26px 26px; border-radius: var(--r); background: linear-gradient(170deg, #FFFFFF, #F6F0E6); border: 1px solid var(--ligne) }
.benef-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nuit); color: var(--or); font: 700 18px var(--titre); margin-bottom: 14px }
.benef h3 { font-family: var(--titre); font-size: 28px; font-weight: 600; margin: 0 0 8px } .benef p { margin: 0; color: var(--gris) }
@media (max-width: 860px) { .benef-liste { grid-template-columns: minmax(0, 1fr) } }
.ident .actions.centre, .demo .actions.centre { justify-content: center; margin-top: 30px }
.tarif-pourquoi { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.tarif-pourquoi li { font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: #F5EEE1; color: var(--encre) }
.faq-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start } .faq-duo .sous-titre { margin-top: 0 }
@media (max-width: 860px) { .faq-duo { grid-template-columns: minmax(0, 1fr); gap: 20px } }
.philo-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 48px; align-items: center; max-width: 980px; margin: 0 auto }
@media (max-width: 760px) { .philo-in { grid-template-columns: minmax(0, 1fr); gap: 20px; text-align: center } .philo-in .logo-grand { margin: 0 auto } .philo-in .actions { justify-content: center } }
.h-moyen { font-size: clamp(26px, 3vw, 34px) }
.appel-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center }
.appel-in p { color: #E2D9C8 } .appel-cote { display: grid; gap: 14px } .appel-cote p { margin: 0; padding: 16px 18px; border-radius: 14px; background: rgba(250,246,238,.06); border: 1px solid rgba(182,154,91,.35); font-size: 15px }
.appel-cote a { color: var(--or-clair); text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 860px) { .appel-in { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 1180px) and (min-width: 921px) { .hero h1 { font-size: 46px } .hero .lead { font-size: 16.5px } .hero-sous { font-size: 20px } }
/* mobile : prix et bouton principal remontés, texte de présentation juste après */
@media (max-width: 920px) {
  .hero-txt { display: flex; flex-direction: column } .hero-txt .lead { order: 9; margin: 22px 0 0 } .hero-devise { margin: 0 0 14px }
  .hero-txt .actions { order: 8; margin-top: 16px }
}
@media (max-width: 600px) {
  .hero { padding-block: 28px 40px } .hero h1 { font-size: 34px } .hero-sous { font-size: 19px; margin-bottom: 10px }
  .prix-bloc { padding: 10px 16px } .prix-mois span { font-size: 36px } .prix-note { font-size: 13px }
  .bloc { padding-block: 56px }
}
@media (min-width: 921px) {
  .hero .hero-in { padding-block: 36px 64px; gap: 48px }
  .hero h1 { font-size: clamp(40px, 3.7vw, 56px); margin-bottom: 12px }
  .hero-sous { font-size: clamp(19px, 1.7vw, 23px); margin-bottom: 10px }
  .hero .lead { font-size: 16.5px; margin-bottom: 8px }
  .hero-devise { margin: 4px 0 14px }
  .hero .prix-bloc { padding: 10px 18px } .hero .prix-mois span { font-size: 38px }
  .hero .actions { margin-top: 16px }
}
@media (max-width: 920px) { .hero .hero-in { padding-block: 8px 24px } }

/* ---------- accès au planner, vidéo ---------- */
.acces-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.acces-carte { background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.acces-carte h3 { font-family: var(--titre); font-size: 25px; font-weight: 600; margin: 0 } .acces-carte p { margin: 0; color: var(--gris); font-size: 15.5px } .acces-carte .btn, .acces-carte .acces-btns { margin-top: auto }
.acces-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.acces-etat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #F2ECE1; color: var(--gris) } .acces-etat.ouvert { background: #E6F0E8; color: #2F6B45 }
@media (max-width: 900px) { .acces-cartes { grid-template-columns: minmax(0, 1fr) } }
.video-tete { text-align: center; padding: 22px 16px 18px; background: var(--nuit) } .video-tete .sur { color: var(--or); margin: 0 } .video-tete h3 { color: #FAF6EE; font-family: var(--titre); font-size: 26px; font-weight: 600; margin: 4px 0 0 }
.video-bloc video { aspect-ratio: 16 / 9; height: auto }
.appel-lancement { margin: 14px 0 0 }

/* ---------- pages juridiques ---------- */
.jur-tete .lead { max-width: 46em } .jur-date { font-size: 14px; color: var(--gris); margin: 10px 0 0 } .brouillon-mini { background: #F5EAD3; color: #7A5A1E; padding: 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12.5px }
.jur-in { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 48px; align-items: start }
.jur-cote { position: sticky; top: 110px; display: grid; gap: 22px; max-height: calc(100vh - 130px); overflow: auto; padding-right: 6px }
.jur-cote-t { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 8px }
.jur-sommaire ol, .jur-autres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
.jur-sommaire a, .jur-autres a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14.5px; color: var(--encre); text-decoration: none; line-height: 1.35 }
.jur-sommaire a:hover, .jur-autres a:hover { background: var(--beige) }
.jur-sommaire ol { counter-reset: s } .jur-sommaire li { counter-increment: s } .jur-sommaire a::before { content: counter(s) ". "; color: var(--or-fonce); font-weight: 700 }
.jur-autres { border-top: 1px solid var(--ligne); padding-top: 16px }
.jur-texte { max-width: 760px } .jur-sec { padding: 6px 0 22px; border-bottom: 1px solid var(--ligne); margin-bottom: 22px; scroll-margin-top: 110px }
.jur-sec h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 0 0 14px } .jur-num { color: var(--or); }
.jur-sec h3 { font-size: 18px; margin: 20px 0 8px } .jur-sec p, .jur-sec li { line-height: 1.7 } .jur-sec ul, .jur-sec ol { padding-left: 1.3em; display: grid; gap: 6px }
.fiche { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 8px 18px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px 18px; margin: 12px 0 }
.fiche dt { font-weight: 700; color: var(--encre) } .fiche dd { margin: 0 }
.jur-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 15px; background: var(--blanc); border-radius: 12px; overflow: hidden; border: 1px solid var(--ligne) }
.jur-table th, .jur-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--ligne) } .jur-table thead th { background: var(--nuit); color: #FAF6EE; font-weight: 600 } .jur-table tbody th { width: 30%; color: var(--encre); background: #FBF8F2 }
mark.a-confirmer { background: #F9E3B4; color: #6B4A10; border-radius: 4px; padding: 1px 5px; font-size: .88em; font-weight: 600 }
.jtag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: 1px; white-space: nowrap }
.jtag.ol { background: #E3ECF6; color: #1F4E7A } .jtag.cc { background: #F3ECDD; color: #7A5A1E } .jtag.mt { background: #E6F0E8; color: #2F6B45 }
.modele-form { background: var(--blanc); border: 1px dashed var(--or-clair); border-radius: 12px; padding: 16px 18px }
.retra-form, .retra-ok { background: var(--blanc); border: 1px solid var(--or-clair); border-radius: 16px; padding: 20px; margin: 14px 0 }
.retra-etape { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--or-fonce); margin: 0 0 12px }
.retra-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-bottom: 12px }
.retra-grille label { display: grid; gap: 4px; font-weight: 600; font-size: 14.5px } .retra-grille input, .retra-grille select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--ligne); border-radius: 10px; background: #fff; min-height: 44px }
.retra-piege { position: absolute; left: -9999px } .retra-err { background: #FBE7E3; color: #8A2D1D; border-radius: 10px; padding: 10px 14px } .retra-ok h3 { margin-top: 0 }
@media (max-width: 600px) { .retra-grille { grid-template-columns: minmax(0, 1fr) } .fiche { grid-template-columns: minmax(0, 1fr); gap: 2px } .fiche dd { margin-bottom: 8px } }
.jur-haut { font-size: 14px } .signature-texte { font-family: var(--titre); font-style: italic; font-size: 20px; color: var(--or-fonce) }
@media (max-width: 900px) { .jur-in { grid-template-columns: minmax(0, 1fr); gap: 24px } .jur-cote { position: static; max-height: none } .jur-autres { display: none } .jur-sommaire { background: var(--blanc); border: 1px solid var(--ligne); border-radius: 14px; padding: 14px } }
.jur-table { display: table } @media (max-width: 600px) { .jur-table, .jur-table tbody, .jur-table tr, .jur-table th, .jur-table td { display: block; width: auto } .jur-table thead { display: none } .jur-table tr { border-bottom: 1px solid var(--ligne) } .jur-table th, .jur-table td { border: 0 } .jur-table tbody th { padding-bottom: 0; background: none } }
.pied-legal { grid-column: span 1 } .pied-legal a.lien-retra { font-weight: 700; color: var(--or-clair) }
.tarif-info { margin: 16px 0 0; border: 1px solid var(--ligne); border-radius: 12px; padding: 10px 14px; font-size: 14.5px; text-align: left } .tarif-info summary { cursor: pointer; font-weight: 700; color: var(--encre) } .tarif-info ul { margin: 10px 0; padding-left: 1.2em; display: grid; gap: 4px } .tarif-info p { margin: 0 }
.note-eleves a { white-space: nowrap }

/* ---------- regroupement juridique : accès direct, rubriques, pied de page épuré, retour en haut ---------- */
.jur-acces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px }
.jur-acces a { font-size: 14px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--blanc); border: 1px solid var(--ligne); color: var(--encre); text-decoration: none }
.jur-acces a:hover { border-color: var(--or) } .jur-acces a.jur-acces-fort { background: var(--nuit); color: #FAF6EE; border-color: var(--nuit) }
.jur-groupes > li { margin-bottom: 6px } .jur-groupes ol { list-style: none; padding: 0 0 0 10px; margin: 2px 0 6px; border-left: 2px solid var(--ligne); display: grid; gap: 0; counter-reset: none }
.jur-sommaire.multi a::before { content: none } .jur-sommaire a.jur-g { font-weight: 700; color: var(--encre) } .jur-groupes ol a { font-size: 13.5px; padding: 4px 10px; color: var(--gris) }
.jur-groupe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; background: var(--nuit); color: #E2D9C8; border-radius: var(--r); padding: 24px 26px; margin: 10px 0 26px; scroll-margin-top: 104px }
.jur-groupe + .jur-sec { padding-top: 0 } .jur-texte > .jur-sec + .jur-groupe { margin-top: 44px }
.jur-groupe-n { margin: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--or); color: #fff; font: 700 22px var(--titre) }
.jur-groupe-t { color: #FAF6EE; margin: 4px 0 6px; font-size: clamp(24px, 2.6vw, 32px) } .jur-groupe p { margin: 0 0 10px; color: #D8CFBF }
.jur-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px } .jur-mini a { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: rgba(250,246,238,.08); color: #F1E7D2; text-decoration: none; border: 1px solid rgba(182,154,91,.35) } .jur-mini a:hover { background: rgba(250,246,238,.16) }
h3.jur-h { font-size: clamp(21px, 2.1vw, 26px); margin: 0 0 14px } .jur-sec h4 { font-size: 17px; margin: 18px 0 8px }
.jur-retour { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 4px; padding: 9px 13px; border-radius: 999px; background: var(--nuit); color: #FAF6EE; font: 600 13.5px var(--corps); text-decoration: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s }
.jur-retour.visible { opacity: .92; pointer-events: auto; transform: none } .jur-retour:hover { opacity: 1 }
@media (max-width: 600px) { .jur-retour span { display: none } .jur-retour { padding: 10px 14px; font-size: 16px } .jur-groupe { grid-template-columns: minmax(0, 1fr); padding: 20px } .jur-groupe-n { width: 38px; height: 38px; font-size: 18px } .jur-sommaire.multi .jur-groupes ol { display: none } }
.pied-juridique { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; border-top: 1px solid rgba(182,154,91,.3); padding-top: 20px; margin-top: 8px }
.pied-juridique nav { display: flex; flex-wrap: wrap; gap: 6px 22px } .pied-juridique a { color: #D8CFBF; font-size: 14.5px; text-decoration: none; padding: 6px 0 } .pied-juridique a:hover { color: #FAF6EE; text-decoration: underline }
.pied-juridique .lien-retra { font-weight: 700; color: var(--or-clair); border: 1px solid rgba(182,154,91,.5); border-radius: 999px; padding: 6px 14px }
@media (max-width: 600px) { .pied-juridique { flex-direction: column; align-items: flex-start } .pied-juridique nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; width: 100% } .pied-juridique a { padding: 9px 0; min-height: 44px; display: flex; align-items: center } }