/* Travicy 2027 · styles partagés des pages offres (LOT 2)
   Pages : /offres, /pre-ouverture, /notre-approche, /tarifs, /agents-ia, /references.
   Charte : navy #071B44, corail #FF7E6B / #E5654F, turquoise #2DD4BF / #0d9488, ivoire #FBF9F5. */

html { scroll-behavior:smooth; }
body { margin:0; background:#FBF9F5; font-family:'Inter','Inter Fallback',sans-serif; color:#071B44; line-height:1.65; font-size:16px; }
a { color:inherit; text-decoration:none; }
* { box-sizing:border-box; }
img { max-width:100%; }
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
@keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.06); } }

/* Hero photo */
.tp-hero { position:relative; min-height:62vh; display:flex; align-items:center; overflow:hidden; background:#071B44; }
.tp-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:kenburns 20s ease-out both; }
.tp-hero-overlay { position:absolute; inset:0; background:linear-gradient(115deg, rgba(7,27,68,0.96) 0%, rgba(7,27,68,0.86) 55%, rgba(7,27,68,0.5) 100%); }
.tp-hero-inner { position:relative; max-width:1240px; margin:0 auto; padding:120px 32px 96px; width:100%; color:#F8FAFC; }
.tp-eyebrow { font-size:12px; letter-spacing:3px; font-weight:700; color:#2DD4BF; text-transform:uppercase; }
.tp-hero h1 { margin:18px 0 0; font-size:58px; font-weight:800; letter-spacing:-2.2px; line-height:1.06; max-width:900px; text-wrap:balance; }
.tp-hero h1 .serif, .tp-title .serif { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:#FF7E6B; }
.tp-hero .tp-lead { margin:24px 0 0; font-size:19px; line-height:1.6; opacity:0.88; max-width:680px; }
.tp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center; }
.tp-hero-note { margin-top:18px; font-size:14px; opacity:0.7; }

/* Boutons */
.tp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:#FF7E6B; color:#071B44; font-size:16px; font-weight:700; padding:16px 30px; border-radius:100px; border:0; cursor:pointer; font-family:inherit; transition:background 0.2s, transform 0.2s; }
.tp-btn:hover { background:#E5654F; transform:translateY(-1px); }
.tp-btn-ghost { display:inline-flex; align-items:center; gap:8px; color:#F8FAFC; font-weight:700; font-size:15.5px; padding:15px 24px; border-radius:100px; border:1.5px solid rgba(248,250,252,0.35); transition:border-color 0.2s; }
.tp-btn-ghost:hover { border-color:#2DD4BF; }
.tp-btn-dark { background:#071B44; color:#F8FAFC; }
.tp-btn-dark:hover { background:#0B2A66; }
.tp-link { color:#0d9488; font-weight:700; }
.tp-link:hover { text-decoration:underline; }

/* Sections */
.tp-wrap { max-width:1180px; margin:0 auto; padding:96px 32px; }
.tp-wrap-narrow { max-width:860px; }
.tp-band { background:#F3EEE4; }
.tp-dark { background:#071B44; color:#F8FAFC; }
.tp-kicker { font-size:12px; letter-spacing:3px; font-weight:700; color:#0d9488; text-transform:uppercase; margin-bottom:14px; }
.tp-dark .tp-kicker { color:#2DD4BF; }
.tp-title { margin:0; font-size:40px; font-weight:800; letter-spacing:-1.4px; line-height:1.14; max-width:820px; text-wrap:balance; }
.tp-title .serif { color:#E5654F; }
.tp-dark .tp-title .serif { color:#FF7E6B; }
.tp-intro { margin:18px 0 0; font-size:18px; color:#475569; max-width:720px; line-height:1.65; }
.tp-dark .tp-intro { color:rgba(248,250,252,0.8); }

/* Trois portes */
.tp-doors { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; margin-top:44px; }
.tp-door { display:flex; flex-direction:column; gap:12px; background:#FFFFFF; border:1px solid #E8E2D6; border-radius:22px; padding:32px; transition:transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.tp-door:hover { transform:translateY(-3px); border-color:#FF7E6B; box-shadow:0 30px 60px -40px rgba(7,27,68,0.35); }
.tp-door-sit { font-size:13px; font-weight:700; color:#0d9488; letter-spacing:0.5px; }
.tp-door h3 { margin:0; font-size:24px; font-weight:800; letter-spacing:-0.6px; line-height:1.2; }
.tp-door p { margin:0; color:#475569; font-size:15px; line-height:1.6; flex:1; }
.tp-door .tp-door-go { font-weight:700; color:#E5654F; font-size:15px; }

/* Fiche d'offre */
.tp-offer { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.5fr); gap:48px; padding:56px 0; border-top:1px solid #E2DCCF; scroll-margin-top:90px; }
.tp-offer:first-of-type { border-top:0; }
.tp-offer-head .tp-offer-num { font-family:'Instrument Serif',serif; font-style:italic; font-size:22px; color:#E5654F; }
.tp-offer-head h3 { margin:6px 0 10px; font-size:34px; font-weight:800; letter-spacing:-1.2px; line-height:1.1; }
.tp-offer-head .tp-offer-for { font-size:15px; color:#475569; margin:0 0 18px; }
.tp-offer-head .tp-promise { font-family:'Instrument Serif',serif; font-style:italic; font-size:24px; line-height:1.35; color:#071B44; margin:0 0 22px; }
.tp-price { display:inline-block; font-size:14px; font-weight:700; padding:8px 16px; border-radius:100px; background:#EFE9DC; color:#071B44; margin-bottom:22px; }
.tp-price-public { background:#071B44; color:#F8FAFC; }
.tp-offer-body { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
.tp-block { background:#FFFFFF; border:1px solid #E8E2D6; border-radius:18px; padding:24px 26px; min-width:0; }
.tp-block-wide { grid-column:1 / -1; }
.tp-block h4 { margin:0 0 10px; font-size:12px; letter-spacing:2.2px; font-weight:800; text-transform:uppercase; color:#0d9488; }
.tp-block p { margin:0; font-size:15px; color:#334155; line-height:1.6; }
.tp-block ul { margin:0; padding-left:18px; font-size:15px; color:#334155; line-height:1.6; }
.tp-block li + li { margin-top:4px; }
.tp-block-not { background:#FFF7F5; border-color:#FBDCD4; }
.tp-block-not h4 { color:#C2410C; }
.tp-cols-2 { columns:2; column-gap:28px; }
.tp-cols-2 li { break-inside:avoid; }

/* Progression / étapes */
.tp-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; margin-top:44px; counter-reset:step; }
.tp-step { background:#FFFFFF; border:1px solid #E8E2D6; border-radius:20px; padding:28px; min-width:0; }
.tp-dark .tp-step { background:rgba(248,250,252,0.05); border-color:rgba(248,250,252,0.12); }
.tp-step-num { font-family:'Instrument Serif',serif; font-style:italic; font-size:36px; line-height:1; color:#FF7E6B; }
.tp-step h3 { margin:12px 0 8px; font-size:21px; font-weight:800; letter-spacing:-0.4px; }
.tp-step p { margin:0; font-size:15px; line-height:1.6; color:#475569; }
.tp-dark .tp-step p { color:rgba(248,250,252,0.78); }

/* Frise J-180 → J+90 */
.tp-timeline { position:relative; margin-top:52px; display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:14px; }
.tp-timeline::before { content:''; position:absolute; left:0; right:0; top:22px; height:2px; background:linear-gradient(90deg, #2DD4BF, #FF7E6B); }
.tp-tl { position:relative; padding-top:52px; min-width:0; }
.tp-tl::before { content:''; position:absolute; top:13px; left:0; width:20px; height:20px; border-radius:50%; background:#071B44; border:3px solid #2DD4BF; }
.tp-tl.is-open::before { background:#FF7E6B; border-color:#FF7E6B; box-shadow:0 0 0 6px rgba(255,126,107,0.25); }
.tp-tl-day { font-weight:800; font-size:18px; letter-spacing:-0.3px; }
.tp-tl p { margin:6px 0 0; font-size:13.5px; line-height:1.5; color:rgba(248,250,252,0.78); }

/* Grille chantiers */
.tp-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:40px; }
.tp-tile { background:#FFFFFF; border:1px solid #E8E2D6; border-radius:18px; padding:24px; min-width:0; }
.tp-tile b { display:block; font-size:16.5px; margin-bottom:6px; }
.tp-tile p { margin:0; font-size:14.5px; color:#475569; line-height:1.6; }

/* Encadré prix / CTA */
.tp-cta { background:#071B44; color:#F8FAFC; border-radius:28px; padding:56px; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:40px; align-items:center; }
.tp-cta h2 { margin:0; font-size:36px; font-weight:800; letter-spacing:-1.2px; line-height:1.15; }
.tp-cta h2 .serif { font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; color:#FF7E6B; }
.tp-cta p { margin:14px 0 0; font-size:16.5px; color:rgba(248,250,252,0.8); }
.tp-cta-side { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.tp-cta-side small { font-size:13px; color:rgba(248,250,252,0.6); }

/* Liste « n'est pas » / principes */
.tp-two { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; margin-top:40px; }
.tp-note { margin-top:28px; font-size:14px; color:#64748b; max-width:760px; }

/* FAQ */
.tp-faq details { border-bottom:1px solid #E2DCCF; padding:22px 0; }
.tp-faq summary { font-size:18px; font-weight:700; display:flex; justify-content:space-between; gap:20px; }
.tp-faq summary::after { content:'+'; color:#FF7E6B; font-size:24px; line-height:1; }
.tp-faq details[open] summary::after { content:'\2013'; }
.tp-faq p { margin:12px 0 0; color:#475569; max-width:760px; }

/* Sommaire d'offres */
.tp-toc { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.tp-toc a { border:1.5px solid #D9D2C3; border-radius:100px; padding:9px 18px; font-size:14px; font-weight:700; background:#FFFFFF; transition:border-color 0.2s; }
.tp-toc a:hover { border-color:#071B44; }

@media (max-width:1100px) {
  .tp-timeline { grid-template-columns:repeat(4, minmax(0,1fr)); row-gap:30px; }
  .tp-timeline::before { display:none; }
}
@media (max-width:900px) {
  .tp-hero h1 { font-size:40px; letter-spacing:-1.4px; }
  .tp-hero-inner { padding:96px 20px 72px; }
  .tp-wrap { padding:64px 20px; }
  .tp-title { font-size:30px; }
  .tp-doors, .tp-steps, .tp-grid, .tp-two, .tp-offer, .tp-offer-body, .tp-cta { grid-template-columns:minmax(0,1fr); }
  .tp-offer { gap:24px; padding:44px 0; }
  .tp-cta { padding:36px 24px; }
  .tp-cta h2 { font-size:28px; }
  .tp-cols-2 { columns:1; }
}
@media (max-width:560px) {
  .tp-timeline { grid-template-columns:repeat(2, minmax(0,1fr)); }
}