/* ============================================================
   CLARION STRATUM — da-antique.css
   Habillage gréco-latin et architectural : capitales romaines,
   devises latines et grecques, frises (méandre, oves), colonnade,
   pilastres, frontons. Tout en or géométrique sur le bleu nuit.
   ============================================================ */

:root{
  --romain:"Cinzel","Cormorant Garamond",Georgia,serif;
  --oves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3Cellipse cx='12' cy='7' rx='6' ry='5' fill='none' stroke='%23D2A84E' stroke-width='1.4'/%3E%3Cpath d='M0 1 V13 M24 1 V13' stroke='%23D2A84E' stroke-width='1.2'/%3E%3Cpath d='M0 13 L3 8 L0 3' fill='none' stroke='%23D2A84E' stroke-width='1'/%3E%3C/svg%3E");
  --colonnade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='90'%3E%3Cg fill='none' stroke='%23D2A84E' stroke-width='1.3'%3E%3Cpath d='M0 4 H56 M0 10 H56 M0 84 H56 M0 88 H56'/%3E%3Crect x='18' y='14' width='20' height='5'/%3E%3Cpath d='M20 19 H36 L35 78 H21 Z'/%3E%3Cpath d='M25 22 V76 M28 22 V76 M31 22 V76'/%3E%3Crect x='17' y='78' width='22' height='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Capitales romaines ---------- */
h2,.kicker,.strate-tag,.nav-links a,.repere span,.res-badge,.badge-fondateur,.foot-brand b{font-family:var(--romain) !important}
h2{letter-spacing:.12em !important;font-weight:500 !important}
.kicker{letter-spacing:.42em !important;display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:34px;height:10px;flex:0 0 auto;background:var(--meandre) left center/auto 10px repeat-x;opacity:.9}
.offre-head .kicker,#la-chasse .offre-head .kicker{justify-content:center}
.offre-head .kicker::after{content:"";width:34px;height:10px;background:var(--meandre) left center/auto 10px repeat-x;opacity:.9}

/* ---------- Devises latines et grecques sous les titres ---------- */
.devise{margin:-6px 0 26px;font:italic 500 1.08rem/1.5 "Cormorant Garamond",Georgia,serif;color:var(--ivory-dim);letter-spacing:.02em}
.devise [lang]{font-family:var(--romain);font-style:normal;font-size:.92em;letter-spacing:.16em;color:var(--gold-l);text-transform:uppercase;margin-right:10px}
.devise small{font-size:.85em;opacity:.75}
.offre-head .devise{text-align:center}

/* ---------- Séparateurs entre sections : méandre et oves ---------- */
.frise-sep{height:14px;margin:0 auto;max-width:1100px;opacity:.55;background:var(--meandre) center/auto 14px repeat-x}
.frise-sep.oves{background:var(--oves) center/auto 14px repeat-x}

/* ---------- Pilastres de part et d'autre de l'accueil ---------- */
.hero{overflow:hidden}
.pilastre{position:absolute;top:110px;bottom:70px;width:64px;opacity:.22;pointer-events:none}
.pilastre.g{left:4%}
.pilastre.d{right:4%}
@media (max-width:900px){.pilastre{display:none}}

/* ---------- Fronton au-dessus des cartes ---------- */
.res-card,.pricing{position:relative}
.res-card::before{content:"";display:block;height:12px;margin:-8px -6px 16px;background:var(--oves) center/auto 12px repeat-x;opacity:.7}
.pricing .porte{position:relative}

/* ---------- Colonnade au-dessus du pied de page ---------- */
.colonnade{height:90px;background:var(--colonnade) center bottom/auto 90px repeat-x;opacity:.35}
footer{border-top:none !important}

/* ---------- Bandeau citation : inscription romaine ---------- */
.band blockquote{position:relative}
.band blockquote::before,.band blockquote::after{content:"";display:block;height:14px;width:min(420px,70vw);margin:0 auto 26px;background:var(--meandre) center/auto 14px repeat-x;opacity:.8}
.band blockquote::after{margin:26px auto 0}
.band cite{font-family:var(--romain) !important}

/* ============================================================
   Animations (minimalistes ; désactivées si « réduire les animations »)
   ============================================================ */

/* ---------- Plus d'oves : la frise en spirales carrées partout ---------- */
.frise-sep,.frise-sep.oves{background:var(--meandre) center/auto 14px repeat-x;animation:frise-glisse 60s linear infinite}
.res-card::before{background:var(--meandre) center/auto 12px repeat-x}
@keyframes frise-glisse{to{background-position:200px center}}

/* ---------- Arche d'entrée : construction, puis halo qui tourne ---------- */
.embleme{width:min(420px,84vw) !important;margin-bottom:34px !important;overflow:visible;filter:drop-shadow(0 18px 40px rgba(0,0,0,.35))}
.embleme .marche{opacity:0;animation:arche-monte .7s cubic-bezier(.2,.7,.2,1) forwards}
.embleme .pile{opacity:0;animation:arche-monte .5s cubic-bezier(.2,.7,.2,1) forwards}
.embleme .claveau{opacity:0;transform-box:fill-box;transform-origin:center;animation:arche-pose .55s cubic-bezier(.2,.7,.2,1) forwards}
.embleme .cle{opacity:0;transform-box:fill-box;transform-origin:center;animation:cle-tombe .8s cubic-bezier(.3,1.4,.5,1) 2.45s forwards,cle-luit 4s ease-in-out 3.4s infinite}
.embleme .halo{opacity:0;animation:fadein 1.6s ease 2.9s forwards}
.embleme .rayons{opacity:0;transform-box:view-box;transform-origin:0 -250px;animation:rayons-apparait 1.6s ease 3s forwards,rayons-tourne 90s linear 3s infinite}
.embleme .etoile{opacity:0;animation:fadein .8s ease 3.2s forwards,scintille 3.5s ease-in-out 4s infinite}
@keyframes arche-monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes arche-pose{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes cle-tombe{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes cle-luit{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px rgba(243,220,158,.9))}}
@keyframes rayons-apparait{to{opacity:.22}}
@keyframes rayons-tourne{to{transform:rotate(360deg)}}
@keyframes scintille{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{animation-delay:2.9s !important}
.baseline{animation-delay:3.3s !important}
.hero-sub{animation-delay:3.6s !important}
.hero-cta{animation-delay:3.8s !important}
.chips{animation-delay:4s !important}
.pilastre{opacity:0;animation:pilastre-apparait 2s ease 1s forwards}
@keyframes pilastre-apparait{to{opacity:.22}}

/* ---------- Dessins de strate : léger flottement, comme une médaille suspendue ---------- */
.carnet-illu{display:block;width:150px;height:150px;margin:6px 0 20px;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35));animation:flotte 6s ease-in-out infinite}
.pricing:hover .carnet-illu{animation-play-state:paused;transform:scale(1.05) rotate(-3deg);transition:transform .4s ease}
.strate-illu{animation:flotte 7s ease-in-out infinite}
#methode .strate-item:nth-child(2) .strate-illu{animation-delay:-1.2s}
#methode .strate-item:nth-child(3) .strate-illu{animation-delay:-2.4s}
#methode .strate-item:nth-child(4) .strate-illu{animation-delay:-3.6s}
#methode .strate-item:nth-child(5) .strate-illu{animation-delay:-4.8s}
#methode .strate-item:nth-child(6) .strate-illu{animation-delay:-6s}
#methode .strate-item{transition:transform .35s ease,box-shadow .35s ease}
#methode .strate-item:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.35)}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Mise en garde « aide à la décision » ---------- */
.avertissement{margin:-12px 0 22px;padding:12px 14px;border-left:3px solid var(--sa,var(--gold));background:rgba(8,29,44,.3);border-radius:0 10px 10px 0;color:var(--ivory-dim);font-size:.98rem;line-height:1.65}
.avertissement b{color:var(--sa,var(--gold-l))}

/* ---------- Titres : un filet d'or qui se trace à l'apparition ---------- */
.rule.reveal{transform:none !important;transform-origin:left;clip-path:inset(0 100% 0 0);transition:clip-path 1.2s ease .2s,opacity 1s ease}
.rule.reveal.in{clip-path:inset(0 0 0 0)}
.rule.center.reveal{clip-path:inset(0 50% 0 50%)}
.rule.center.reveal.in{clip-path:inset(0 0 0 0)}

/* ---------- Petit carnet : couverture ornée du dessin de la strate, qui tourne en cercle au survol ---------- */
.carnet{
  position:relative;width:138px;height:190px;margin:4px 0 24px;border-radius:4px 10px 10px 4px;
  background:linear-gradient(160deg,#1B4A66,#12324A 55%,#162F55);
  box-shadow:0 18px 36px rgba(0,0,0,.45),inset 0 0 0 1px rgba(210,168,78,.5),inset 0 0 0 6px #12324A,inset 0 0 0 7px rgba(210,168,78,.7);
  display:flex;flex-direction:column;align-items:center;padding:18px 10px 12px 18px;
  transform:rotate(-3deg);transition:transform .4s ease;
}
.carnet-dos{position:absolute;left:0;top:0;bottom:0;width:10px;border-radius:4px 0 0 4px;background:linear-gradient(90deg,var(--sa),color-mix(in srgb,var(--sa) 55%,#000))}
.carnet-dessin{width:92px;height:92px;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.carnet-titre{margin-top:12px;font:600 .72rem/1.2 var(--romain);letter-spacing:.14em;text-transform:uppercase;color:#F2DFA6;text-align:center}
.carnet-strate{margin-top:auto;font:500 .56rem/1 var(--romain);letter-spacing:.3em;text-transform:uppercase;color:var(--sa)}
.pricing:hover .carnet,.carnet:hover{animation:carnet-cercle 2.4s linear infinite}
@keyframes carnet-cercle{
  0%{transform:rotate(-3deg) translate(0,-5px)}
  25%{transform:rotate(-1deg) translate(5px,0)}
  50%{transform:rotate(-3deg) translate(0,5px)}
  75%{transform:rotate(-5deg) translate(-5px,0)}
  100%{transform:rotate(-3deg) translate(0,-5px)}
}

/* ============================================================
   Ornements plus épais, dorés et brillants ; entrée plus sobre
   ============================================================ */
:root{--meandre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FBEBB8'/%3E%3Cstop offset='.5' stop-color='%23E2C06F'/%3E%3Cstop offset='1' stop-color='%23B8872F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 16 H24 M3.5 16 V2 H19.5 V12.5 H9 V6.5 H14.5' fill='none' stroke='url(%23o)' stroke-width='2.8' stroke-linecap='square'/%3E%3C/svg%3E");--colonnade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='90'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FBEBB8'/%3E%3Cstop offset='.5' stop-color='%23E2C06F'/%3E%3Cstop offset='1' stop-color='%23B8872F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23o)' stroke-width='2.2'%3E%3Cpath d='M0 4 H56 M0 10 H56 M0 84 H56 M0 88 H56'/%3E%3Crect x='18' y='14' width='20' height='5'/%3E%3Cpath d='M20 19 H36 L35 78 H21 Z'/%3E%3Cpath d='M25 22 V76 M28 22 V76 M31 22 V76'/%3E%3Crect x='17' y='78' width='22' height='5'/%3E%3C/g%3E%3C/svg%3E")}
.frise-sep,.frise-sep.oves{height:18px;opacity:1;background-size:auto 18px;filter:drop-shadow(0 0 4px rgba(243,220,158,.35))}
.kicker::before,.offre-head .kicker::after{width:44px;height:14px;background-size:auto 14px;opacity:1;filter:drop-shadow(0 0 3px rgba(243,220,158,.35))}
.res-card::before{height:16px;background-size:auto 16px;opacity:1}
.band blockquote::before,.band blockquote::after{height:18px;background-size:auto 18px;opacity:1;filter:drop-shadow(0 0 4px rgba(243,220,158,.35))}
#methode .strate-item::before,#methode .strate-item::after{height:18px;opacity:1;background-size:auto 18px;filter:drop-shadow(0 0 3px rgba(243,220,158,.3))}
.colonnade{opacity:.6;filter:drop-shadow(0 0 4px rgba(243,220,158,.3))}
@keyframes pilastre-apparait{to{opacity:.4}}
.chip::before,.inclus li::before,.carte-guide li::before,.pricing li::before{
  background:linear-gradient(180deg,#FBEBB8,#E2C06F 50%,#B8872F);-webkit-background-clip:text;background-clip:text;color:transparent !important;
  font-size:1.05rem !important;filter:drop-shadow(0 0 3px rgba(243,220,158,.45))
}
/* Entrée : même construction progressive, sans halo, rayons ni lueur */
.embleme{filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))}
.embleme .ouverture{opacity:0;animation:fadein .8s ease 1.1s forwards}
.embleme .archivolte{opacity:0;animation:fadein .8s ease 2.4s forwards}
.embleme .cle{animation:cle-tombe .8s cubic-bezier(.3,1.25,.5,1) 2.45s forwards !important}
.embleme .etoile{animation:fadein 1s ease 3.1s forwards !important}

/* ---------- Arc de triomphe : colonnes, mur et entablement dans la séquence de construction ---------- */
.embleme{width:min(460px,88vw) !important}
.embleme .mur{opacity:0;animation:fadein .9s ease 1.25s forwards}
.embleme .colonne{opacity:0;animation:arche-monte .7s cubic-bezier(.2,.7,.2,1) forwards}
.embleme .entablement{opacity:0;animation:cle-tombe .7s cubic-bezier(.2,.7,.2,1) 2.2s forwards}
.embleme .cle{animation:cle-pose .7s cubic-bezier(.2,.9,.3,1) 2.6s forwards !important}
@keyframes cle-pose{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}

/* ============================================================
   Parchemin doré devant les intitulés ; blanc « pierre de l'arche » ;
   dessins de strate animés au survol
   ============================================================ */
.kicker::before,.offre-head .kicker::after{width:32px !important;height:22px !important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='22'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FBEBB8'/%3E%3Cstop offset='.5' stop-color='%23E2C06F'/%3E%3Cstop offset='1' stop-color='%23B8872F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6' y='4' width='20' height='14' fill='url(%23o)'/%3E%3Crect x='2' y='1.5' width='28' height='5' rx='2.5' fill='%23D2A84E' stroke='%238F6A24' stroke-width='.8'/%3E%3Crect x='2' y='15.5' width='28' height='5' rx='2.5' fill='%23D2A84E' stroke='%238F6A24' stroke-width='.8'/%3E%3Cpath d='M10 9.5 H22 M10 12.5 H19' stroke='%238F6A24' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat !important;filter:drop-shadow(0 0 4px rgba(243,220,158,.4)) !important}

/* Blanc de l'arche */
.pilastre{width:58px}
@keyframes pilastre-apparait{to{opacity:.55}}
.colonnade{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='90'%3E%3Cdefs%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23E9E5DE'/%3E%3Cstop offset='.3' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23BFB9AE'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='2' width='56' height='9' fill='%23FFFFFF'/%3E%3Crect x='0' y='83' width='56' height='7' fill='%23F1EEE8'/%3E%3Crect x='17' y='13' width='22' height='5' fill='%23FFFFFF'/%3E%3Cpath d='M20 18 H36 L35 78 H21 Z' fill='url(%23m)'/%3E%3Cpath d='M25 21 V76 M28 21 V76 M31 21 V76' stroke='%23CFC9BE' stroke-width='1'/%3E%3Crect x='16' y='78' width='24' height='5' fill='%23FFFFFF'/%3E%3C/svg%3E") center bottom/auto 90px repeat-x !important;opacity:.45 !important;filter:none !important}
.strate-illu,.carnet-dessin{border-radius:50%;box-shadow:0 0 0 4px #FFFFFF,0 0 0 5px #DCD6CB,0 14px 26px rgba(0,0,0,.35)}
.strate-illu{filter:none !important}
.chip{background:linear-gradient(180deg,#FFFFFF,#F3F1EC) !important;color:#0E2A3E !important;border:1px solid #DCD6CB !important}
.chip::before{filter:none !important}

/* Animations des strates au survol de la carte */
.strate-illu :is(.p1,.p2,.p3,.p4,.p5,.p6,.fleche,.feuille,.plateau-g,.plateau-d,.feuillet,.rouleau-bas,.sceau,.soleil,.clef-v){transform-box:fill-box;transform-origin:center}
#methode .strate-item:hover .strate-illu{animation-play-state:paused}
@keyframes empile{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
#methode .strate-item:hover .a-fondation .p1{animation:empile .32s cubic-bezier(.3,1.3,.5,1) both}
#methode .strate-item:hover .a-fondation .p2{animation:empile .32s cubic-bezier(.3,1.3,.5,1) .08s both}
#methode .strate-item:hover .a-fondation .p3{animation:empile .36s cubic-bezier(.3,1.3,.5,1) .16s both}
#methode .strate-item:hover .a-fondation .p4{animation:empile .32s cubic-bezier(.3,1.3,.5,1) .28s both}
#methode .strate-item:hover .a-fondation .p5{animation:empile .32s cubic-bezier(.3,1.3,.5,1) .36s both}
#methode .strate-item:hover .a-fondation .p6{animation:empile .36s cubic-bezier(.3,1.3,.5,1) .44s both}

@keyframes vole{0%,100%{transform:translate(0,0)}50%{transform:translate(5px,-4px)}}
@keyframes souffle{to{stroke-dashoffset:-40}}
@keyframes feuille-vole{0%{opacity:0;transform:translate(-10px,10px) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(70px,-50px) rotate(260deg)}}
#methode .strate-item:hover .a-chasse .fleche{animation:vole .7s ease-in-out infinite}
#methode .strate-item:hover .a-chasse .vent{stroke-dasharray:8 6;animation:souffle .8s linear infinite}
#methode .strate-item:hover .a-chasse .feuille{animation:feuille-vole 1.8s ease-in infinite}
#methode .strate-item:hover .a-chasse .feuille:nth-of-type(2n){animation-delay:.45s}
#methode .strate-item:hover .a-chasse .feuille:nth-of-type(3n){animation-delay:.9s}
#methode .strate-item:hover .a-chasse .f5{animation-delay:1.2s}

@keyframes fleau{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}70%{transform:rotate(-5deg)}}
@keyframes plateau-g{0%,100%{transform:none}30%{transform:translateY(-7px)}70%{transform:translateY(6px)}}
@keyframes plateau-d{0%,100%{transform:none}30%{transform:translateY(7px)}70%{transform:translateY(-6px)}}
#methode .strate-item:hover .a-force .fleau{transform-box:view-box;transform-origin:80px 40px;animation:fleau 2.2s ease-in-out infinite}
#methode .strate-item:hover .a-force .plateau-g{animation:plateau-g 2.2s ease-in-out infinite}
#methode .strate-item:hover .a-force .plateau-d{animation:plateau-d 2.2s ease-in-out infinite}

@keyframes deroule{from{transform:scaleY(.05)}to{transform:none}}
@keyframes rouleau-descend{from{transform:translateY(-78px)}to{transform:none}}
@keyframes ecrit{from{opacity:0}to{opacity:1}}
@keyframes sceau-pose{0%{opacity:0;transform:scale(1.8)}70%{opacity:1;transform:scale(.9)}100%{transform:none}}
#methode .strate-item:hover .a-levier .feuillet{transform-origin:top;animation:deroule .6s cubic-bezier(.2,.8,.2,1) both}
#methode .strate-item:hover .a-levier .rouleau-bas{animation:rouleau-descend .6s cubic-bezier(.2,.8,.2,1) both}
#methode .strate-item:hover .a-levier .ecriture{animation:ecrit .4s ease .55s both}
#methode .strate-item:hover .a-levier .sceau{animation:sceau-pose .45s cubic-bezier(.3,1.3,.5,1) .9s both}

@keyframes leve{from{transform:translateY(26px)}to{transform:none}}
@keyframes tourne{to{transform:rotate(360deg)}}
#methode .strate-item:hover .a-elevation .soleil{animation:leve .9s cubic-bezier(.2,.8,.2,1) both}
#methode .strate-item:hover .a-elevation .rayons-t{transform-box:view-box;transform-origin:80px 70px;animation:tourne 6s linear infinite}

@keyframes clef-leve{0%,100%{transform:none}40%{transform:translateY(-12px)}60%{transform:translateY(-12px)}85%{transform:translateY(1px)}}
@keyframes eclat{0%,100%{opacity:1}50%{opacity:.2}}
#methode .strate-item:hover .a-clef .clef-v{animation:clef-leve 1.4s cubic-bezier(.3,1.2,.5,1) infinite}
#methode .strate-item:hover .a-clef .eclat{animation:eclat 1.4s ease-in-out infinite}

/* ---------- Vue idyllique dans l'arche ---------- */
@keyframes plane{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-3px)}}
@keyframes respire{0%,100%{opacity:.75}50%{opacity:1}}
.embleme .oiseaux{animation:plane 7s ease-in-out 3s infinite}
.embleme .aura{animation:respire 5s ease-in-out 3s infinite}
.embleme .chemin{filter:drop-shadow(0 0 4px rgba(255,246,220,.9))}

/* ---------- Formulaires repliés « Recevoir le guide » ---------- */
.extrait-encart.recevoir{margin:auto 0 0}
.extrait-encart.recevoir summary{margin-top:6px}
.extrait-encart.recevoir[open] summary{background:transparent;border:1px solid var(--gold);color:var(--gold-l)}

/* ---------- Pastilles : retour au style doré sur fond bleu nuit ---------- */
.chip{background:rgba(248,243,231,.06) !important;color:var(--ivory) !important;border:1px solid rgba(210,168,78,.45) !important}

/* ---------- Bandeau citation : un fleuron au lieu des frises en doublon ---------- */
.band blockquote::before,.band blockquote::after{
  height:14px !important;width:min(260px,60vw) !important;filter:none !important;
  background:
    linear-gradient(90deg,transparent,rgba(226,192,111,.85)) left center/44% 1px no-repeat,
    linear-gradient(90deg,rgba(226,192,111,.85),transparent) right center/44% 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14'%3E%3Cpath d='M13 1 L18 7 L13 13 L8 7 Z' fill='%23E2C06F'/%3E%3Ccircle cx='3' cy='7' r='1.6' fill='%23E2C06F'/%3E%3Ccircle cx='23' cy='7' r='1.6' fill='%23E2C06F'/%3E%3C/svg%3E") center/26px 14px no-repeat !important;
}

/* ---------- Vue de l'arche : vie discrète ---------- */
@keyframes derive{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes scintille-mer{0%,100%{opacity:.55}50%{opacity:1}}
.embleme .nuages{animation:derive 12s ease-in-out 3s infinite}
.embleme .reflet{animation:scintille-mer 2.6s ease-in-out 3s infinite}
.embleme .chemin{filter:drop-shadow(0 0 3px rgba(255,246,220,.9))}

/* ============================================================
   Outils : niches cintrées (même architecture que l'arche)
   Point marché : plaque « Acta » à double filet
   ============================================================ */
.niches{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px;margin-top:40px}
.niche{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:40px 26px 28px;border-radius:170px 170px 16px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 55%,rgba(8,29,44,.18));
  border:1px solid rgba(226,192,111,.45);
  box-shadow:inset 0 0 0 6px rgba(18,50,74,.0),0 18px 40px rgba(0,0,0,.28);
  transition:transform .35s ease,box-shadow .35s ease;
}
.niche::before{content:"";position:absolute;top:-10px;left:50%;width:26px;height:20px;transform:translateX(-50%);
  clip-path:polygon(0 0,100% 0,78% 100%,22% 100%);background:linear-gradient(180deg,#FBEBB8,#E2C06F 50%,#B8872F)}
.niche:hover{transform:translateY(-6px);box-shadow:0 26px 50px rgba(0,0,0,.35)}
.niche-illu{width:112px;height:112px;display:block;margin:0 auto 16px;border-radius:50%;
  box-shadow:0 0 0 4px #FFFFFF,0 0 0 5px #DCD6CB,0 14px 26px rgba(0,0,0,.35);transition:transform .5s ease}
.niche:hover .niche-illu,.acta:hover .niche-illu{transform:rotate(-6deg) scale(1.04)}
.niche-tag{font:600 .7rem/1 var(--romain);letter-spacing:.32em;text-transform:uppercase;color:var(--gold-l);margin-bottom:12px}
.niche h4{font-size:1.4rem;line-height:1.25;color:var(--ivory);margin-bottom:10px}
.niche p{color:var(--ivory-dim);font-size:1.02rem;line-height:1.75;margin-bottom:22px}
.niche .btn{margin-top:auto;width:100%}

.point-marche{padding:110px 0 110px}
.acta{
  display:grid;grid-template-columns:160px 1fr;gap:34px;align-items:center;max-width:860px;margin:38px auto 0;
  padding:36px 38px;border-radius:18px;border:1px solid rgba(226,192,111,.5);
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(8,29,44,.2));
  box-shadow:inset 0 0 0 7px var(--navy),inset 0 0 0 8px rgba(226,192,111,.35),0 18px 44px rgba(0,0,0,.3);
}
.acta .niche-illu{width:150px;height:150px;margin:0}
.acta h4{font-size:1.6rem;line-height:1.25;color:var(--ivory);margin-bottom:12px}
.acta-texte > p{color:var(--ivory-dim);font-size:1rem;margin:10px 0 16px}
.acta-liste{list-style:none;display:grid;gap:6px}
.acta-liste li{position:relative;padding-left:22px;color:var(--ivory-dim);font-size:1.04rem}
.acta-liste li::before{content:"✦";position:absolute;left:0;top:1px;background:linear-gradient(180deg,#FBEBB8,#E2C06F 50%,#B8872F);-webkit-background-clip:text;background-clip:text;color:transparent}
.acta-liste b{color:var(--ivory)}
.acta .extrait-encart.recevoir summary{width:auto;display:inline-block;padding-left:34px;padding-right:34px}
@media (max-width:720px){.acta{grid-template-columns:1fr;text-align:center}.acta .niche-illu{margin:0 auto}.acta-liste{text-align:left}}

/* ============================================================
   Niches des outils : double filet cintré, pilastres, socle à méandre
   ============================================================ */
.niche{overflow:visible;padding:44px 42px 48px}
.niche::after{content:"";position:absolute;inset:9px;border:1px solid rgba(226,192,111,.35);border-radius:162px 162px 10px 10px;pointer-events:none}
.niche .pil{position:absolute;bottom:22px;width:10px;height:48%;border-radius:2px;opacity:.7;
  background:linear-gradient(90deg,rgba(226,192,111,.0),rgba(226,192,111,.0)),repeating-linear-gradient(90deg,rgba(243,220,158,.55) 0 1px,transparent 1px 3px);
  border-top:4px solid rgba(226,192,111,.75);border-bottom:4px solid rgba(226,192,111,.75)}
.niche .pil.g{left:18px}
.niche .pil.d{right:18px}
.niche .socle{position:absolute;left:18px;right:18px;bottom:12px;height:14px;background:var(--meandre) center/auto 14px repeat-x;opacity:.9}
.niche::before{transition:transform .4s ease,filter .4s ease}
.niche:hover::before{transform:translateX(-50%) translateY(3px);filter:drop-shadow(0 0 8px rgba(243,220,158,.9))}

/* Médaillons des outils : animations au survol */
.niche-illu :is(.col,.chevron,.loupe,.seg,.curseur,.feuillet,.rouleau-bas,.sceau,.ecriture){transform-box:fill-box;transform-origin:center}
.niche-illu .col{transform-origin:center bottom}
@keyframes col-monte{from{transform:scaleY(.1)}to{transform:none}}
@keyframes chevron-saute{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.niche:hover .o-capacite .c1{animation:col-monte .45s cubic-bezier(.3,1.3,.5,1) both}
.niche:hover .o-capacite .c2{animation:col-monte .45s cubic-bezier(.3,1.3,.5,1) .12s both}
.niche:hover .o-capacite .c3{animation:col-monte .45s cubic-bezier(.3,1.3,.5,1) .24s both}
.niche:hover .o-capacite .chevron{animation:chevron-saute .8s ease-in-out .5s infinite}
@keyframes loupe-balaye{0%{transform:translate(-40px,6px)}55%{transform:translate(6px,-2px)}100%{transform:none}}
@keyframes coche{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}
.niche:hover .o-analyse .loupe{animation:loupe-balaye 1.1s cubic-bezier(.3,.8,.3,1) both}
.niche:hover .o-analyse .coche{animation:coche .4s ease 1s both}
@keyframes seg-allume{from{opacity:.2}to{opacity:1}}
@keyframes curseur-glisse{from{transform:translateX(-70px)}to{transform:none}}
.niche:hover .o-dpe .seg{animation:seg-allume .25s ease both}
.niche:hover .o-dpe .s0{animation-delay:0.00s}
.niche:hover .o-dpe .s1{animation-delay:0.09s}
.niche:hover .o-dpe .s2{animation-delay:0.18s}
.niche:hover .o-dpe .s3{animation-delay:0.27s}
.niche:hover .o-dpe .s4{animation-delay:0.36s}
.niche:hover .o-dpe .s5{animation-delay:0.45s}
.niche:hover .o-dpe .s6{animation-delay:0.54s}
.niche:hover .o-dpe .curseur{animation:curseur-glisse .8s cubic-bezier(.3,.8,.3,1) both}
.acta-temple:hover .o-acta .feuillet{transform-origin:top;animation:deroule .6s cubic-bezier(.2,.8,.2,1) both}
.acta-temple:hover .o-acta .rouleau-bas{animation:rouleau-descend .6s cubic-bezier(.2,.8,.2,1) both}
.acta-temple:hover .o-acta .ecriture{animation:ecrit .4s ease .55s both}
.acta-temple:hover .o-acta .sceau{animation:sceau-pose .45s cubic-bezier(.3,1.3,.5,1) .9s both}
.niche-illu{animation:flotte 7s ease-in-out infinite}
.niche:nth-child(2) .niche-illu{animation-delay:-2.3s}
.niche:nth-child(3) .niche-illu{animation-delay:-4.6s}

/* ============================================================
   Point marché : petit temple autour de la plaque Acta
   ============================================================ */
.acta-temple{max-width:900px;margin:40px auto 0}
.acta-fronton{display:block;width:100%;height:80px}
.acta-frise{height:16px;margin:0 10px 0;background:var(--meandre) center/auto 16px repeat-x}
.acta-nef{display:grid;grid-template-columns:44px 1fr 44px;gap:14px;align-items:stretch;padding:12px 10px 0}
.acta-col{width:44px;height:100%;min-height:260px;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.3))}
.acta-temple .acta{margin:0;max-width:none}
.acta-socle{height:12px;margin:0 0 0;border-radius:2px;background:linear-gradient(180deg,#FFFFFF,#E3DED5);box-shadow:0 10px 20px rgba(0,0,0,.3)}
.acta-temple:hover .niche-illu{transform:none}
@media (max-width:720px){.acta-nef{grid-template-columns:1fr}.acta-col{display:none}.acta-fronton{height:50px}}

/* ---------- Instagram @immo_boulot_dodo ---------- */
.instagram{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:40px;padding:22px 26px;border-radius:16px;
  border:1px solid rgba(226,192,111,.45);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(8,29,44,.2));
  box-shadow:inset 0 0 0 6px var(--navy),inset 0 0 0 7px rgba(226,192,111,.3)}
.instagram svg{width:46px;height:46px;flex:0 0 auto;fill:none;stroke:#E2C06F;stroke-width:1.6}
.instagram > div{flex:1 1 260px}
.instagram p{color:var(--ivory-dim);margin:0}
.instagram .niche-tag{margin-bottom:6px}