/* ============================================================ TUTTI — design system de la VITRINE plateforme mon-orchestre.fr Chargé uniquement par layouts/public-plateforme.blade.php (jamais sur les sites d'ensembles). Identité distincte d'Erato : color-blocking indigo/corail/or, typo XXL Space Grotesk. WCAG AAA · CUD-safe · zéro CDN · cibles >=44px. ============================================================ */ @font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-700.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-500.woff2') format('woff2');font-weight:500;font-display:swap} /* Tokens Tutti — portée .tutti (le de la vitrine porte cette classe). */ .tutti{ --marque:#2E36C0; /* indigo — ~9:1 sur papier (AAA) */ --marque-fonce:#1B2080; --marque-soft:#E7E8F8; --corail:#A52D14; /* action chaude — blanc dessus 7.03:1 (AAA) */ --corail-fonce:#8F2710; /* hover + corail texte (sur papier 8.4:1, AAA) */ --tt-or:#9A6A00; /* accent doré : usage large/déco */ --tt-papier:#FBFAF6; --tt-encre:#14161F; /* 16:1 sur papier */ --tt-encre-douce:#41454F; --tt-bord:#E7E3D8; --tt-focus:#1B2080; --tt-rayon:14px; --tt-rayon-l:24px; --tf-titre:'Space Grotesk','Arial Black',system-ui,sans-serif; --tf-corps:'Atkinson Hyperlegible',system-ui,sans-serif; background:var(--tt-papier); color:var(--tt-encre); font-family:var(--tf-corps); } .tutti h1,.tutti h2,.tutti h3,.tutti .tf-titre{font-family:var(--tf-titre);font-weight:700;letter-spacing:-.02em;line-height:1.05} .tutti a{color:var(--marque-fonce)} .tutti .wrap{max-width:1180px;margin:0 auto;padding:0 1.5rem} /* ---- Nav ---- */ .tutti-nav{position:sticky;top:0;z-index:30;background:rgba(251,250,246,.92);backdrop-filter:blur(8px);border-bottom:3px solid var(--tt-encre)} .tutti-nav .wrap{display:flex;align-items:center;gap:1.5rem;min-height:68px} .tutti-brand{font-family:var(--tf-titre);font-weight:700;font-size:1.25rem;color:var(--tt-encre);text-decoration:none;letter-spacing:-.03em} .tutti-brand b{color:var(--marque)} .tutti-navlinks{display:flex;gap:1.4rem;margin-left:auto;align-items:center} /* Couleur réservée aux liens NON-boutons (sinon écrase la couleur du bouton). */ .tutti-navlinks a:not(.btn-tutti){color:var(--tt-encre);text-decoration:none;font-weight:700;padding:.5rem .25rem;border-bottom:3px solid transparent} .tutti-navlinks a:not(.btn-tutti):hover,.tutti-navlinks a:not(.btn-tutti)[aria-current]{border-bottom-color:var(--marque)} .tutti-burger{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;min-height:44px;min-width:44px;cursor:pointer;color:var(--tt-encre)} /* ---- Boutons (cibles >=44px) ---- */ .btn-tutti{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.7rem 1.4rem;border-radius:var(--tt-rayon); font-family:var(--tf-titre);font-weight:700;font-size:1rem;text-decoration:none;border:3px solid transparent;cursor:pointer;transition:transform .12s,background .2s} .btn-tutti:hover{transform:translateY(-2px)} .btn-tutti:focus-visible{outline:3px solid var(--tt-focus);outline-offset:3px} .btn-tutti-accent{background:var(--corail);color:#fff} .btn-tutti-accent:hover{background:var(--corail-fonce)} .btn-tutti-primaire{background:var(--marque);color:#fff} .btn-tutti-primaire:hover{background:var(--marque-fonce)} .btn-tutti-contour{background:transparent;color:var(--marque-fonce);border-color:var(--marque)} .btn-tutti-contour:hover{background:var(--marque-soft)} .btn-tutti-clair{background:#fff;color:var(--marque-fonce);border-color:#fff} .btn-tutti-clair:hover{background:#ECEAE2} .btn-tutti-sm{min-height:40px;padding:.45rem 1rem;font-size:.92rem} .btn-tutti-bloc{width:100%;justify-content:center} /* ---- HERO color-block ---- */ .tutti-hero{padding:3.5rem 0 4rem} .tutti-hero-grid{display:grid;grid-template-columns:0.92fr 1.08fr;gap:2.5rem;align-items:center} .tutti-hero-bloc{background:var(--marque);border-radius:var(--tt-rayon-l);min-height:340px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:1.5rem;color:#fff} .tutti-hero-bloc::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:var(--corail);opacity:.95;top:-12%;right:-10%} .tutti-hero-bloc::after{content:"\266A";position:absolute;font-size:13rem;line-height:1;right:8%;bottom:-2.5rem;color:rgba(255,255,255,.18);font-family:var(--tf-titre)} .tutti-hero-bloc span{position:relative;font-family:var(--tf-titre);font-weight:700;font-size:1.05rem;background:rgba(20,22,31,.55);padding:.35rem .7rem;border-radius:8px} .tutti-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:0 0 1rem;color:var(--tt-encre)} /* Le mot tournant réutilise la classe pilotée par public/js/app.js */ .tutti-hero .pub-hero-rotateur{color:var(--corail-fonce);white-space:nowrap;display:inline-block;transition:opacity .4s ease} .tutti-hero .pub-hero-rotateur.est-en-transition{opacity:0} .tutti-tagline{font-size:1.2rem;color:var(--tt-encre-douce);max-width:34rem;margin:0 0 1.8rem} .tutti-hero-cta{display:flex;gap:1rem;flex-wrap:wrap} /* ---- Sections ---- */ .tutti-section{padding:4rem 0} .tutti-section-creme{background:#F3EFE4} .tutti-kicker{display:inline-block;font-family:var(--tf-titre);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--marque-fonce);background:var(--marque-soft);padding:.3rem .7rem;border-radius:999px} .tutti-section h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:.6rem 0 0;color:var(--tt-encre)} .tutti-center{text-align:center} .tutti-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem} .tutti-card{background:#fff;border:2px solid var(--tt-bord);border-radius:var(--tt-rayon-l);padding:1.6rem} .tutti-card .tutti-ico{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:#fff;margin-bottom:.8rem} .tutti-card h3{font-size:1.3rem;margin:.2rem 0 .5rem} .tutti-card p{margin:0;color:var(--tt-encre-douce)} .ico-i{background:var(--marque)}.ico-c{background:var(--corail)}.ico-o{background:var(--tt-or)} /* ---- Agenda : cartes horizontales pleine largeur ---- */ .tutti-ag-legende{display:flex;gap:1.2rem;flex-wrap:wrap;margin:1.2rem 0 .4rem;font-size:.9rem;color:var(--tt-encre-douce)} .tutti-ag-legende span{display:inline-flex;align-items:center;gap:.4rem} .lg-dot{width:14px;height:14px;border-radius:4px;display:inline-block} .lg-dot.nous{background:var(--marque)}.lg-dot.ext{background:var(--tt-encre)} .tutti-agenda{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:1.2rem;overflow-x:auto;padding:.4rem .2rem 1rem;scroll-snap-type:x mandatory} .tutti-ag-carte{scroll-snap-align:start;background:#fff;border:2px solid var(--tt-bord);border-radius:var(--tt-rayon-l);padding:1.2rem;display:flex;flex-direction:column;gap:.6rem;border-top:6px solid var(--tt-encre)} .tutti-ag-carte.nous{border-top-color:var(--marque)} .tutti-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:.3rem;font-family:var(--tf-titre);font-weight:700;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;padding:.2rem .55rem;border-radius:999px} .tutti-chip.nous{background:var(--marque-soft);color:var(--marque-fonce)} .tutti-chip.ext{background:#EDEAE0;color:var(--tt-encre)} .tutti-ag-carte .date{font-family:var(--tf-titre);font-weight:700;font-size:1.5rem;color:var(--marque)} .tutti-ag-carte h3{margin:0;font-size:1.15rem;line-height:1.15} .tutti-ag-carte .meta{color:var(--tt-encre-douce);font-size:.92rem;margin:0} .tutti-ag-carte .lien{margin-top:auto;font-family:var(--tf-titre);font-weight:700;font-size:.9rem} /* page /agenda : grille qui enveloppe (pas de scroll horizontal) */ .tutti-agenda-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem;margin-top:1rem} /* ---- Tarifs ---- */ .tutti-tarifs{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem} .tutti-tarif{border:3px solid var(--tt-encre);border-radius:var(--tt-rayon-l);padding:1.8rem;background:#fff} .tutti-tarif.featured{background:var(--tt-encre);color:#fff;border-color:var(--tt-encre)} .tutti-tarif.featured .tutti-prix,.tutti-tarif.featured h3{color:#fff} .tutti-prix{font-family:var(--tf-titre);font-weight:700;font-size:2.4rem;color:var(--marque)} .tutti-tarif ul{padding-left:1.1rem;line-height:2} /* ---- CTA final ---- */ .tutti-cta{background:var(--marque);color:#fff;border-radius:var(--tt-rayon-l);padding:3rem;text-align:center} .tutti-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);color:#fff} .tutti-cta .tutti-kicker{background:rgba(255,255,255,.18);color:#fff} .tutti-cta .btn-tutti-contour{color:#fff;border-color:#fff} .tutti-cta .btn-tutti-contour:hover{background:rgba(255,255,255,.15)} /* ---- Page-hero (sous-pages : agenda) ---- */ .tutti-page-hero{background:#F3EFE4;padding:clamp(2.5rem,6vw,4rem) 0;border-bottom:3px solid var(--tt-encre)} .tutti-page-hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:0;color:var(--tt-encre)} .tutti-page-hero p{color:var(--tt-encre-douce);font-size:1.15rem;margin:.5rem 0 0;max-width:40rem} /* ---- Filtres (form GET, sans JS) ---- */ .tutti-filtres{display:flex;flex-wrap:wrap;gap:1rem 1.25rem;align-items:flex-end;margin-bottom:1rem} .tutti-filtre-champ{display:flex;flex-direction:column;gap:.35rem;flex:1 1 10rem;min-width:9rem} .tutti-filtre-champ label{font-weight:700;font-size:.92rem;color:var(--tt-encre)} .tutti-filtre-champ select{min-height:48px;padding:.6rem .75rem;border:3px solid var(--marque);border-radius:var(--tt-rayon);background:#fff;color:var(--tt-encre);font:inherit} .tutti-filtre-champ select:focus-visible{outline:3px solid var(--tt-focus);outline-offset:2px} .tutti-filtre-actions{display:flex;align-items:center;gap:1rem;flex:0 0 auto} .tutti-filtre-reset{color:var(--marque-fonce);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center;font-weight:700} .tutti-resume{color:var(--tt-encre-douce);font-size:.95rem;margin:.4rem 0 0} /* ---- Footer ---- */ .tutti-foot{background:var(--tt-encre);color:#cfd2da;padding:2.5rem 0;margin-top:3rem} .tutti-foot a{color:#fff} @media (max-width:820px){ .tutti-hero-grid,.tutti-tarifs{grid-template-columns:1fr} .tutti-grid3{grid-template-columns:1fr} .tutti-navlinks{display:none} .tutti-navlinks.nav-open{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem; position:absolute;left:0;right:0;top:68px;background:var(--tt-papier);border-bottom:3px solid var(--tt-encre);padding:1rem 1.5rem} .tutti-burger{display:inline-flex} } @media (prefers-reduced-motion:reduce){ .btn-tutti:hover{transform:none} .tutti-hero .pub-hero-rotateur{transition:none} }