/* =========================================================
   arc-detriomphe.paris — design « Étoile »
   Palette : bleu nuit / pierre calcaire / or laurier
   ========================================================= */
:root{
  --bleu-nuit:#0F1B33;
  --bleu-2:#16264A;
  --bleu-3:#1E3160;
  --pierre:#F6F1E6;
  --pierre-2:#EDE4CF;
  --pierre-3:#E2D6BA;
  --or:#C6A24B;
  --or-2:#A8842E;
  --or-pale:#E8D9AE;
  --encre:#212A3E;
  --gris:#5C6577;
  --blanc:#FFFFFF;
  --rouge:#9E2B25;
  --ok:#2E6E4E;
  --r:14px;
  --shadow:0 10px 30px rgba(15,27,51,.10);
  --shadow-sm:0 4px 14px rgba(15,27,51,.08);
  --serif:"Marcellus","Noto Serif JP","Noto Serif KR","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:"Figtree","Noto Sans JP","Noto Sans KR","Noto Sans SC","Noto Sans Hebrew","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--encre);background:var(--pierre);line-height:1.65;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--bleu-3);text-decoration-color:rgba(198,162,75,.55);text-underline-offset:3px}
a:hover{color:var(--or-2)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.22;color:var(--bleu-nuit)}
h1{font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:.2px}
h2{font-size:clamp(1.45rem,3vw,2.05rem);margin:0 0 .9rem}
h3{font-size:1.22rem;margin:1.4rem 0 .55rem}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1.1rem;padding-inline-start:1.35rem}
li{margin:.3rem 0}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.small{font-size:.85rem;color:var(--gris)}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(15,27,51,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(198,162,75,.35)}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:40px;width:auto}
.nav{display:flex;gap:2px;margin-inline-start:auto;flex-wrap:wrap}
.nav a{color:var(--pierre);text-decoration:none;font-size:.92rem;padding:8px 11px;border-radius:8px;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--or-pale);background:rgba(198,162,75,.14)}
.head-cta{margin-inline-start:6px}
.burger{display:none;background:none;border:1px solid rgba(198,162,75,.5);border-radius:8px;padding:7px 10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--or-pale);margin:4px 0;border-radius:2px}

/* language switcher */
.lang{position:relative}
.lang>summary{list-style:none;cursor:pointer;color:var(--pierre);border:1px solid rgba(198,162,75,.5);padding:7px 12px;border-radius:8px;font-size:.85rem;display:flex;align-items:center;gap:6px;white-space:nowrap}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary:after{content:"▾";color:var(--or);font-size:.7rem}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);background:var(--blanc);border:1px solid var(--pierre-3);border-radius:12px;box-shadow:var(--shadow);padding:12px;display:grid;grid-template-columns:repeat(3,minmax(118px,1fr));gap:2px;max-height:70vh;overflow:auto;min-width:390px}
.lang-menu a{display:block;padding:6px 9px;border-radius:7px;text-decoration:none;font-size:.86rem;color:var(--encre)}
.lang-menu a:hover{background:var(--pierre)}
.lang-menu a.on{background:var(--pierre-2);color:var(--bleu-nuit);font-weight:600}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-weight:700;text-decoration:none;border-radius:10px;padding:13px 24px;font-size:1rem;text-align:center;transition:transform .12s ease,box-shadow .12s ease;cursor:pointer;border:0}
.btn:active{transform:translateY(1px)}
.btn-or{background:linear-gradient(135deg,#D8B45C,#B98F35);color:#141d33;box-shadow:0 6px 18px rgba(198,162,75,.4)}
.btn-or:hover{color:#0d1425;box-shadow:0 8px 22px rgba(198,162,75,.55)}
.btn-ghost{background:transparent;color:var(--pierre);border:1.5px solid rgba(246,241,230,.65)}
.btn-ghost:hover{border-color:var(--or);color:var(--or-pale)}
.btn-sm{padding:9px 16px;font-size:.88rem;border-radius:8px}

/* ---------- hero ---------- */
.hero{position:relative;color:var(--pierre);background:var(--bleu-nuit);overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.34}
.hero:before{content:"";position:absolute;inset:0;background:
 radial-gradient(ellipse at 50% 120%,rgba(198,162,75,.28),transparent 55%),
 linear-gradient(180deg,rgba(15,27,51,.35),rgba(15,27,51,.72));}
.hero-star{position:absolute;inset:auto;left:50%;top:50%;width:1400px;height:1400px;transform:translate(-50%,-50%);opacity:.09;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:44px;padding-top:64px;padding-bottom:64px;align-items:center}
.hero h1{color:var(--blanc);margin:0 0 1rem}
.hero .lead{font-size:1.13rem;color:#E8E3D4;margin-bottom:1.5rem;max-width:56ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:1.6rem;padding:0;list-style:none}
.hero-badges li{border:1px solid rgba(198,162,75,.55);color:var(--or-pale);border-radius:999px;padding:5px 14px;font-size:.83rem;background:rgba(15,27,51,.5)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.eyebrow{letter-spacing:2.8px;text-transform:uppercase;font-size:.78rem;color:var(--or);margin-bottom:.9rem;font-weight:600}

/* discreet hero disclaimer w/ tooltip */
.hint{position:relative;display:inline-block;margin-top:1.15rem;font-size:.74rem;color:#A9B2C5}
.hint>span{border-bottom:1px dotted #8792A9;cursor:help}
.hint .tip{visibility:hidden;opacity:0;transition:opacity .15s;position:absolute;bottom:135%;inset-inline-start:0;background:#0B1426;color:#D9DFEC;border:1px solid rgba(198,162,75,.45);padding:10px 13px;border-radius:9px;width:290px;font-size:.76rem;line-height:1.5;z-index:30;box-shadow:var(--shadow)}
.hint:hover .tip,.hint:focus-within .tip{visibility:visible;opacity:1}

/* widget card */
.widget-card{background:var(--blanc);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 18px;color:var(--encre)}
.widget-card h2,.widget-card .wtitle{font-family:var(--serif);font-size:1.12rem;text-align:center;margin:0 0 4px;color:var(--bleu-nuit)}
.widget-card .wsub{text-align:center;font-size:.82rem;color:var(--gris);margin-bottom:8px}
.widget-card .fallback{margin-top:10px;text-align:center}

/* ---------- Headout tiles ---------- */
.tiles-sec{padding:52px 0 20px}
.tiles-sec .sec-head{text-align:center;max-width:640px;margin:0 auto 26px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0}
.tile{background:var(--blanc);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid rgba(198,162,75,.22);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tile img{width:100%;aspect-ratio:8/5;object-fit:cover}
.tile-body{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1}
.tile-body h3{font-size:1.02rem;margin:0 0 8px;font-family:var(--sans);font-weight:700;color:var(--bleu-nuit);line-height:1.4}
.tile-meta{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--gris);margin-bottom:10px}
.tile-meta .stars{color:var(--or-2);font-weight:700}
.tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tile-price{font-size:.8rem;color:var(--gris)}
.tile-price b{display:block;font-size:1.18rem;color:var(--bleu-nuit)}
.tile a.btn{flex-shrink:0}

/* ---------- content layout ---------- */
.content{padding:44px 0 10px}
.content .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:start}
.article{min-width:0}
.aside{position:sticky;top:84px;display:flex;flex-direction:column;gap:20px}
.aside .widget-card{padding:16px 14px}
.toc{background:var(--blanc);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:18px 20px;border:1px solid rgba(198,162,75,.22)}
.toc b{font-family:var(--serif);color:var(--bleu-nuit);display:block;margin-bottom:8px}
.toc ol{margin:0;padding-inline-start:1.2rem;font-size:.9rem}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* quick summary table & tables */
table{width:100%;border-collapse:collapse;margin:1.1rem 0 1.5rem;background:var(--blanc);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);font-size:.95rem}
th,td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--pierre-2);vertical-align:top}
thead th{background:var(--bleu-nuit);color:var(--pierre);font-family:var(--serif);font-weight:400;letter-spacing:.4px}
tbody tr:last-child td{border-bottom:0}
tbody th{background:var(--pierre);font-weight:600;width:38%}
.table-scroll{overflow-x:auto;margin:1.1rem 0 1.5rem}
.table-scroll table{margin:0;min-width:560px}

/* callouts */
.callout{border-inline-start:4px solid var(--or);background:var(--blanc);border-radius:10px;padding:14px 18px;margin:1.2rem 0;box-shadow:var(--shadow-sm)}
.callout.free{border-color:var(--ok)}
.callout.warn{border-color:var(--rouge)}
.callout p:last-child{margin-bottom:0}
.src{font-size:.8rem;color:var(--gris)}
.src a{color:var(--gris)}

/* checklist cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:1.2rem 0 1.6rem;padding:0;list-style:none}
.cards li{background:var(--blanc);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);border-top:3px solid var(--or)}
.cards li b{color:var(--bleu-nuit)}

/* hub cards on home */
.hub{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:1.4rem 0;padding:0;list-style:none}
.hub li{background:var(--blanc);border-radius:var(--r);box-shadow:var(--shadow-sm);border:1px solid rgba(198,162,75,.22);overflow:hidden;transition:transform .15s ease}
.hub li:hover{transform:translateY(-3px)}
.hub a{display:block;padding:20px 22px;text-decoration:none;color:var(--encre);height:100%}
.hub .ico{font-size:1.5rem;display:block;margin-bottom:8px}
.hub b{font-family:var(--serif);font-size:1.1rem;color:var(--bleu-nuit);display:block;margin-bottom:6px}
.hub p{font-size:.9rem;color:var(--gris);margin:0}
.hub .go{color:var(--or-2);font-size:.86rem;font-weight:700;display:inline-block;margin-top:10px}

/* figure */
figure{margin:1.4rem 0 1.6rem}
figure img{border-radius:var(--r);box-shadow:var(--shadow);width:100%;object-fit:cover;max-height:430px}
figcaption{font-size:.82rem;color:var(--gris);margin-top:8px;text-align:center}

/* laurel divider */
.divider{display:flex;align-items:center;gap:14px;margin:2.4rem 0 1.6rem;color:var(--or)}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(198,162,75,.6),transparent)}

/* FAQ */
.faq{margin:1rem 0 2rem}
.faq details{background:var(--blanc);border-radius:12px;box-shadow:var(--shadow-sm);margin-bottom:10px;border:1px solid rgba(198,162,75,.18);overflow:hidden}
.faq summary{cursor:pointer;padding:15px 46px 15px 18px;font-weight:700;color:var(--bleu-nuit);list-style:none;position:relative;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-52%);color:var(--or-2);font-size:1.4rem;font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq .fa{padding:0 18px 16px;color:var(--encre)}
[dir="rtl"] .faq summary{padding:15px 18px 15px 46px}

/* CTA band */
.cta-band{background:var(--bleu-nuit);border-radius:var(--r);color:var(--pierre);padding:34px 30px;margin:2.2rem 0;text-align:center;position:relative;overflow:hidden}
.cta-band:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 130%,rgba(198,162,75,.3),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2,.cta-band p.big{color:var(--blanc);font-family:var(--serif);font-size:1.5rem;margin:0 0 8px}
.cta-band p{color:#D5D9E4}
.cta-band .btn{margin-top:8px}

/* breadcrumbs */
.crumbs{font-size:.82rem;color:var(--gris);padding:14px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;padding:0;margin:0}
.crumbs li:not(:last-child):after{content:"›";margin-inline-start:6px;color:var(--or-2)}
.crumbs a{color:var(--gris);text-decoration:none}
.crumbs a:hover{color:var(--or-2)}

/* ---------- footer ---------- */
.site-foot{background:var(--bleu-nuit);color:#B9C0D0;margin-top:56px;padding:46px 0 26px;font-size:.92rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:36px;margin-bottom:26px}
.site-foot h4{color:var(--pierre);font-size:1rem;margin-bottom:12px;letter-spacing:.5px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:7px 0}
.site-foot a{color:#B9C0D0;text-decoration:none}
.site-foot a:hover{color:var(--or-pale)}
.foot-disclaimer{border:1px solid rgba(198,162,75,.35);border-radius:12px;padding:16px 18px;font-size:.8rem;line-height:1.6;color:#9AA3B8;background:rgba(22,38,74,.5)}
.foot-base{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;border-top:1px solid rgba(198,162,75,.2);padding-top:18px;margin-top:22px;font-size:.8rem;color:#8C95AC}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .content .wrap{grid-template-columns:1fr}
  .aside{position:static;order:-1}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .hub{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16px}
  .nav{display:none;position:absolute;top:100%;inset-inline:0;background:var(--bleu-nuit);flex-direction:column;padding:12px 16px 18px;border-bottom:1px solid rgba(198,162,75,.35);gap:2px}
  .nav.open{display:flex}
  .nav a{padding:12px 10px;font-size:1rem}
  .burger{display:block;margin-inline-start:auto}
  .lang{margin-inline-start:0}
  .head-cta{display:none}
  .lang-menu{position:fixed;inset-inline:14px;top:72px;min-width:0;grid-template-columns:repeat(2,1fr)}
  .hero .wrap{padding-top:42px;padding-bottom:42px}
  .tiles{grid-template-columns:1fr}
  .hub{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  tbody th{width:auto}
}
@media(max-width:420px){
  .hero-actions .btn{width:100%}
}