/* =====================================================================
TOUTTOUT — style-refactor.css (Phases 1 → 4b complétées)
Source : style.css (sauvegarde dans style.backup.css + style.before-refactor.css).
Voir REFACTOR-NOTES.md pour le rapport complet de la refactorisation.
===================================================================== */
/* ─── Feedback "Lien copié !" pour la copie-presse-papier (page 25) ──── */
.single-news-share-copied{
display:inline-block;
margin-left:.75rem;
padding:.25rem .65rem;
border-radius:999px;
background:var(--tt-brand-soft, rgba(204,216,41,.22));
color:var(--tt-brand-ink, #1f2300);
font-size:.85rem;
font-weight:600;
opacity:0;
transform:translateY(-2px);
transition:opacity .15s ease, transform .15s ease;
}
.single-news-share-copied.is-visible{
opacity:1;
transform:translateY(0);
}
/* =====================================================================
TABLE DES MATIÈRES (état actuel — Phase 4c-LITE)
=====================================================================
FONDATIONS GLOBALES
1. Design tokens (:root) L ~14
2. Base (html, body, headings, img, a, focus) L ~59
3. Layout / typo helpers (container,
section-padding, eyebrow, section-title) L ~93
4. Boutons (.btn, .btn-dark, .btn-brand,
.btn-outline-dark, .text-link-arrow) L ~142
5. Cards de base (.card-clean) +
Placeholders (.placeholder-media) L ~215
6. Header (.site-header) L ~266
COMPOSANTS PAGE D'ACCUEIL (01)
7. Hero master (.hero - layout texte+slider) L ~352
8. Hero parallax (body.page-accueil) L ~479
9. Hero overlay slider L ~653
10. Hero premium L ~904
11. Trois chemins (.path-card) L ~1105
12. Bannière CTA (.callout-banner) L ~1139
13. Membres (.member-card) L ~1212
14. Actualités/Nouvelles L ~1282
15. Partenaires L ~1346
FOOTER + RESPONSIVE GLOBAL ACCUEIL
16. Footer (.site-footer) L ~1385
17. Responsive accueil + footer L ~1629
COMPOSANTS PAGES INTERNES (02-19)
18. Helpers de section (.section-heading,
.hero-copy override) L ~1683
19. Detail block / Value list / History L ~1703
20. Team (.team-card) L ~1874
21. Stats (.stats-layout, .stat-card) L ~1931
22. Community CTA L ~2020
23. Hero simple (.page-hero master) L ~2042
24. Timeline (zigzag, repères) L ~2075
25. Mouvement (3 cartes parcours) L ~2322
26. Animations on scroll (.reveal) L ~2368
27. Hero deux colonnes (.hero - persona) L ~2391
28. Mosaïque artistes (.artists-mosaic) L ~2438
29. Two-col sections L ~2672
30. Témoignages L ~2706
31. CTA panneaux L ~2765
32. FAQ dynamique L ~2788
COMPOSANTS PAGES SPÉCIALISÉES (05, 06, 07, 11-14, 17, 18)
33. Hero/mosaïque/galerie ateliers L ~2991
34. Pricing & avantages adhésion L ~3177
35. Modal adhésion L ~3492
36. Hero foncé "Appels de dossiers" L ~3763
37. Résidences / Étapes / Steps progress L ~3824
38. Candidature / Modal processus L ~4149
39. Appels en cours (liste filtrable) L ~4240
40. Contact L ~4400
41. Modal générique L ~4484
RESPONSIVE GLOBAL & PAGES SPÉCIALISÉES
42. Responsive global + ateliers/labs/labs-mosaic L ~4682
43. Modale ateliers (carousel détail) L ~4838
PAGE-SPECIFIC OVERRIDES
44. body.page-apropos L ~4974
45. body.page-historique L ~5773
46. body.page-artistes L ~5142 (RESPONSIVE)
47. body.page-ateliers / body.page-laboratoires L ~5172, ~5205
48. body.page-adhesion L ~5243
49. body.page-appels L ~5273
50. Page Étudiant·e·s — accès L ~6409
À VÉRIFIER (Phase 4c-FULL future)
- Ligne ~4976 : .section-title sans scope (probablement oubli de
"body.page-apropos") — touche TOUS les titres de section avec
color:var(--tt-brand-vert-kaki). À confirmer/corriger.
- Ligne ~5515 : .detail-block sans scope (probablement oubli de scope).
- Ligne ~5523 : .value-list-card sans scope (idem).
- Bloc "RESPONSIVE" L~1629 : règles mélangeant page accueil + footer +
hero — pourrait être déplacé vers la zone responsive globale L~4682.
- Bloc "ANIMATIONS ON SCROLL" L~2368 : devrait être placé tôt
(section accessibility/utility) plutôt qu'en milieu de fichier.
===================================================================== */
/* ---------- Canonical rules (design system + components) ---------- */
/* ═══════════════════════════════════════════════════════════
DESIGN TOKENS — source unique
═══════════════════════════════════════════════════════════ */
:root{
/* Brand */
--tt-brand:#ccd829;
--tt-brand-dark:#a8b320;
--tt-brand-ink:#3a3e00;
--tt-brand-soft:rgba(204,216,41,.15);
--tt-brand-vert-kaki:#4b5320;
/* Neutrals */
--tt-black:#111111;
--tt-ink:#1e1e1e;
--tt-text:#202020;
--tt-muted:#666666;
--tt-line:#dddddd;
--tt-surface:#f5f5f5;
--tt-surface-2:#eeeeee;
--tt-white:#ffffff;
/* Footer dark surface */
--tt-footer-bg:#3f3f3d;
--tt-footer-text:#f0efe9;
--tt-footer-muted:#c7c6bf;
--tt-footer-border:rgba(240,239,233,.22);
/* Scale */
--tt-radius:8px;
--tt-radius-sm:6px;
--tt-shadow:0 8px 24px rgba(0,0,0,.04);
--tt-shadow-lg:0 16px 40px rgba(0,0,0,.08);
--tt-section:80px;
--tt-container:1200px;
/* Focus ring */
--tt-focus:0 0 0 3px rgba(204,216,41,.5);
/* Alias tokens pour mosaïque 'artists-mosaic' */
--color-black:var(--tt-black);
--color-text:var(--tt-text);
--color-text-soft:var(--tt-muted);
--color-border:var(--tt-line);
}
/* ═══════════════════════════════════════════════════════════
BASE
═══════════════════════════════════════════════════════════ */
html{
scroll-behavior:smooth;
}
body{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color:var(--tt-text);
background:var(--tt-white);
line-height:1.6;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h2, h3, h4{
color:var(--tt-brand-vert-kaki);
}
img{
max-width:100%;
display:block;
}
a{
color:inherit;
}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
outline:none;
box-shadow:var(--tt-focus);
}
.container{
max-width:var(--tt-container);
}
.section-padding{
padding:var(--tt-section) 0;
}
.section-light{
background:var(--tt-surface);
}
.eyebrow{
display:inline-block;
margin-bottom:.85rem;
font-size:.75rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--tt-muted);
}
.section-title-wrap{
max-width:760px;
margin:0 auto 3rem;
}
.section-title-wrap.text-start{
margin-left:0;
margin-right:0;
}
.section-title{
font-size:clamp(2rem, 3.4vw, 3.5rem);
line-height:1.08;
font-weight:800;
color:var(--tt-brand-vert-kaki); /* Phase 4d-1 : kaki vert généralisé
(avant: var(--tt-black)) */
margin-bottom:1rem;
}
.section-subtitle{
color:var(--tt-muted);
margin-bottom:0;
font-size:1rem;
}
/* ═══════════════════════════════════════════════════════════
ANIMATIONS ON SCROLL
═══════════════════════════════════════════════════════════ */
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .65s ease, transform .65s ease;
will-change:opacity, transform;
}
.reveal.is-visible{
opacity:1;
transform:translateY(0);
}
.reveal.delay-1{ transition-delay:.08s; }
.reveal.delay-2{ transition-delay:.16s; }
.reveal.delay-3{ transition-delay:.24s; }
.reveal.delay-4{ transition-delay:.32s; }
/* ═══════════════════════════════════════════════════════════
BUTTONS
═══════════════════════════════════════════════════════════ */
.btn{
border-radius:var(--tt-radius);
font-weight:600;
padding:.75rem 1.25rem;
font-size:.95rem;
box-shadow:none;
transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn-sm{
padding:.55rem 1rem;
font-size:.875rem;
}
.btn-dark{
background:var(--tt-black);
border-color:var(--tt-black);
color:var(--tt-white);
}
.btn-dark:hover,
.btn-dark:focus{
background:#000;
border-color:#000;
color:var(--tt-white);
}
.btn-outline-dark{
border-color:var(--tt-line); color:var(--tt-black); background:transparent;
}
.btn-outline-dark:hover,
.btn-outline-dark:focus{
background:var(--tt-surface);
border-color:#cfcfcf;
color:var(--tt-black);
}
.btn-brand{
background:var(--tt-brand);
border-color:var(--tt-brand);
color:var(--tt-brand-ink);
}
.btn-brand:hover,
.btn-brand:focus{
background:var(--tt-brand-dark);
border-color:var(--tt-brand-dark);
color:var(--tt-brand-ink);
transform:translateY(-1px);
}
.text-link-arrow{
display:inline-flex;
align-items:center;
gap:.5rem;
font-weight:600;
text-decoration:none;
color:var(--tt-black);
border-bottom:2px solid transparent;
padding:.25rem 0;
transition:border-color .15s ease;
}
.text-link-arrow:hover,
.text-link-arrow:focus{
border-bottom-color:var(--tt-brand);
color:var(--tt-black);
}
/* ═══════════════════════════════════════════════════════════
PLACEHOLDERS & CARDS
═══════════════════════════════════════════════════════════ */
.card-clean{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
box-shadow:var(--tt-shadow);
height:100%;
overflow:hidden;
transition:transform .2s ease, box-shadow .2s ease;
}
.card-clean:hover{
transform:translateY(-3px);
box-shadow:var(--tt-shadow-lg);
}
/* ═══════════════════════════════════════════════════════════════════════
.placeholder-media — composant base utilisé partout pour les zones
d'image (cards, hero, mosaïques, équipe, etc.)
ARCHITECTURE CSS VARIABLES (depuis le 12 mai 2026) :
Au lieu de redéclarer des règles `.X .placeholder-media{min-height:Ypx}`
pour chaque contexte, on définit 3 variables sur la règle de base :
--placeholder-min-h hauteur minimale (défaut 260px)
--placeholder-radius coins arrondis (défaut var(--tt-radius))
--placeholder-border bordure (défaut 1px solid var(--tt-line))
Chaque parent peut overrider une ou plusieurs de ces variables :
.team-card { --placeholder-min-h: 220px; }
.news-card { --placeholder-min-h: 210px;
--placeholder-radius: 0;
--placeholder-border-top: 0; ... }
La cascade CSS fait le reste — le .placeholder-media enfant lit
automatiquement les variables héritées de son ancêtre. Aucune
classe utilitaire à ajouter dans le HTML.
Les pseudo-éléments « viseur + lentille » ont été retirés à la même date :
les portraits manquants utilisent assets/img/portrait-placeholder.jpg
via le helper portrait_or_default(). Les zones non-portrait gardent
le fond gris simple.
═══════════════════════════════════════════════════════════════════════ */
.placeholder-media{
position:relative;
background:#dcdcdc;
border:var(--placeholder-border, 1px solid var(--tt-line));
border-radius:var(--placeholder-radius, var(--tt-radius));
overflow:hidden;
min-height:var(--placeholder-min-h, 260px);
}
/* ═══════════════════════════════════════════════════════════
NAVBAR
═══════════════════════════════════════════════════════════ */
.site-header{
border-bottom:1px solid var(--tt-line);
background:linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.72) 100%);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
position:sticky;
top:0;
z-index:1020;
}
.site-header .navbar{
min-height:90px;
padding:0;
}
.site-header .navbar-brand{
display:flex;
align-items:center;
gap:.7rem;
padding:0;
}
.site-header .navbar-brand img{
height:76px !important;
width:auto;
}
.site-header .navbar-brand:hover{
color:var(--tt-black);
}
.site-header .navbar-nav{
gap:2px;
}
.site-header .nav-link{
color:#4f4f4f;
font-size:1rem;
font-weight:500;
padding:.55rem .85rem;
border-radius:var(--tt-radius-sm);
position:relative;
transition:background .15s ease, color .15s ease;
}
/* Bouton Contact dans la navbar — aligne sa typographie sur les autres
nav-link (Bootstrap btn-sm impose sinon font-size:.875rem). */
.site-header .navbar .btn.btn-brand{
font-size:1rem;
font-weight:500;
padding:.55rem 1.1rem; /* un poil plus large que nav-link pour distinguer la pilule */
line-height:1.5;
}
/* ─── Menus déroulants navbar — couleurs TOUTTOUT
Bootstrap applique par défaut un fond BLEU (#0d6efd) sur l'item actif
et un gris sur le hover. On override pour rester dans la charte
jaune-vert / noir du site. ────────────────────────────────────────── */
.site-header .dropdown-menu{
border:1px solid var(--tt-line, #e6e7e0);
border-radius:var(--tt-radius-sm, 8px);
box-shadow:0 8px 24px rgba(0,0,0,.08);
padding:.4rem;
margin-top:.35rem;
}
.site-header .dropdown-item{
color:#4f4f4f;
font-size:.95rem;
font-weight:500;
padding:.55rem .85rem;
border-radius:6px;
transition:background .15s ease, color .15s ease;
}
/* Hover et focus (clavier) — fond brand-soft, texte brand-ink */
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus{
background:var(--tt-brand-soft, rgba(204,216,41,.18));
color:var(--tt-brand-ink, #1f2300);
}
/* Page active (item sélectionné) — fond brand-soft, texte brand-ink en gras
Remplace le BLEU Bootstrap par défaut. */
.site-header .dropdown-item.active,
.site-header .dropdown-item:active{
background:var(--tt-brand-soft, rgba(204,216,41,.18));
color:var(--tt-brand-ink, #1f2300);
font-weight:600;
}
.site-header .nav-link::after{
content:"";
position:absolute;
left:.85rem;
right:.85rem;
bottom:.35rem;
height:2px;
background:var(--tt-brand);
border-radius:2px;
transform:scaleX(0);
transition:transform .2s ease;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus{
color:var(--tt-black);
background:var(--tt-surface);
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after{
transform:scaleX(1);
}
.site-header .nav-link.active{
color:var(--tt-black);
}
.site-header .navbar-toggler{
border:1px solid var(--tt-line);
border-radius:var(--tt-radius-sm);
padding:.45rem .65rem;
}
.site-header .navbar-toggler:focus{
box-shadow:var(--tt-focus);
}
/* ═══════════════════════════════════════════════════════════
HERO — texte à gauche, slider qui déborde jusqu'au bord droit
═══════════════════════════════════════════════════════════ */
.hero{
position:relative;
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.16), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
overflow:hidden;
}
.hero-inner{
--hero-gutter: max(1.5rem, calc((100vw - var(--tt-container)) / 2 + 12px));
display:grid;
grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
gap:clamp(2rem, 4vw, 4rem);
align-items:center;
padding-left:var(--hero-gutter);
padding-right:0;
}
.hero-copy .eyebrow{
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.hero-copy h1{
font-size:clamp(2.25rem, 4vw, 3.8rem);
line-height:1.05;
font-weight:800;
margin-bottom:1.25rem;
color:var(--tt-black);
}
.hero-copy p{
color:var(--tt-muted);
font-size:1.05rem;
margin-bottom:1.75rem;
}
.hero-cta{
display:flex;
flex-wrap:wrap;
gap:.75rem;
align-items:center;
}
.hero-slider{
position:relative;
border-radius:var(--tt-radius) 0 0 var(--tt-radius);
overflow:hidden;
box-shadow:var(--tt-shadow-lg);
}
.hero-slider .carousel,
.hero-slider .carousel-inner{
height:clamp(380px, 52vw, 560px);
}
.hero-slider .carousel-item{
height:clamp(380px, 52vw, 560px);
}
.hero-slider{
--placeholder-border:0;
--placeholder-radius:0;
--placeholder-min-h:100%;
}
.hero-slider .placeholder-media{ height:100%; }
.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next{
width:auto;
opacity:1;
padding:0 1.25rem;
z-index:10;
}
.hero-slider .carousel-control-prev-icon,
.hero-slider .carousel-control-next-icon{
display:none;
}
.hero-slider .control-circle{
width:44px;
height:44px;
border-radius:50%;
background:rgba(255,255,255,.95);
border:1px solid var(--tt-line);
display:flex;
align-items:center;
justify-content:center;
color:var(--tt-black);
font-size:1.1rem;
transition:background .15s ease, transform .15s ease;
}
.hero-slider button:hover .control-circle,
.hero-slider button:focus .control-circle{
background:var(--tt-brand);
transform:scale(1.05);
}
.hero-slider .carousel-indicators{
bottom:1rem;
margin-bottom:0;
z-index:10;
}
.hero-slider .carousel-indicators [data-bs-target]{
width:10px;
height:10px;
border-radius:50%;
background:rgba(255,255,255,.7);
border:0;
opacity:1;
margin:0 4px;
}
.hero-slider .carousel-indicators .active{
background:var(--tt-brand);
}
/* ═══════════════════════════════════════════════════════════
HERO PARALLAX — page accueil
═══════════════════════════════════════════════════════════ */
body.page-accueil .hero.hero-parallax{
position:relative;
padding:0;
min-height:clamp(620px, 88vh, 920px);
background:#111;
border-bottom:1px solid var(--tt-line);
overflow:hidden;
}
body.page-accueil .hero-parallax .carousel,
body.page-accueil .hero-parallax .carousel-inner,
body.page-accueil .hero-parallax .carousel-item{
min-height:clamp(620px, 88vh, 920px);
height:100%;
}
body.page-accueil .hero-parallax .carousel-item{
position:relative;
}
body.page-accueil .hero-parallax-media{
position:absolute;
inset:-6% 0 -6% 0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
transform:scale(1.06);
will-change:transform;
}
body.page-accueil .hero-parallax-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, rgba(17,17,17,.68) 0%, rgba(17,17,17,.42) 38%, rgba(17,17,17,.20) 62%, rgba(17,17,17,.28) 100%),
linear-gradient(180deg, rgba(17,17,17,.22) 0%, rgba(17,17,17,.10) 28%, rgba(17,17,17,.36) 100%);
pointer-events:none;
}
body.page-accueil .hero-parallax-content-wrap{
position:relative;
z-index:2;
min-height:clamp(620px, 88vh, 920px);
display:flex;
align-items:center;
}
body.page-accueil .hero-parallax-content{
max-width:640px;
color:#fff;
padding:4rem 0;
}
body.page-accueil .hero-parallax-content h1{
font-size:clamp(2.7rem, 5.6vw, 5.25rem);
line-height:.96;
font-weight:800;
letter-spacing:-.03em;
color:#fff;
margin:0 0 1.2rem;
}
body.page-accueil .hero-parallax-content p{
font-size:1.08rem;
line-height:1.7;
color:rgba(255,255,255,.84);
max-width:580px;
margin:0 0 1.75rem;
}
body.page-accueil .hero-eyebrow-on-dark{
color:#fff;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
}
body.page-accueil .hero-link-light{
display:inline-flex;
align-items:center;
gap:.5rem;
color:#fff;
font-weight:600;
text-decoration:none;
border-bottom:2px solid transparent;
padding:.25rem 0;
transition:border-color .15s ease, opacity .15s ease;
}
body.page-accueil .hero-link-light:hover,
body.page-accueil .hero-link-light:focus{
color:#fff;
border-bottom-color:var(--tt-brand);
opacity:1;
}
body.page-accueil .hero-parallax-controls{
position:absolute;
inset:auto 0 2rem 0;
z-index:3;
pointer-events:none;
}
body.page-accueil .hero-parallax-controls .carousel-control-prev,
body.page-accueil .hero-parallax-controls .carousel-control-next{
pointer-events:auto;
}
body.page-accueil .hero-parallax-indicators{
z-index:3;
bottom:2rem;
justify-content:center;
}
body.page-accueil .hero-parallax-indicators [data-bs-target]{
width:56px;
height:3px;
border-radius:999px;
border:0;
background:rgba(255,255,255,.35);
opacity:1;
margin:0 .35rem;
}
body.page-accueil .hero-parallax-indicators .active{
background:var(--tt-brand);
}
@media (max-width: 991.98px){
body.page-accueil .hero.hero-parallax,
body.page-accueil .hero-parallax .carousel,
body.page-accueil .hero-parallax .carousel-inner,
body.page-accueil .hero-parallax .carousel-item,
body.page-accueil .hero-parallax-content-wrap{
min-height:680px;
}
body.page-accueil .hero-parallax-content{
max-width:100%;
padding:5rem 0 6rem;
}
}
@media (max-width: 767.98px){
body.page-accueil .hero.hero-parallax,
body.page-accueil .hero-parallax .carousel,
body.page-accueil .hero-parallax .carousel-inner,
body.page-accueil .hero-parallax .carousel-item,
body.page-accueil .hero-parallax-content-wrap{
min-height:560px;
}
body.page-accueil .hero-parallax-content h1{
font-size:clamp(2.2rem, 9vw, 3.3rem);
}
body.page-accueil .hero-parallax-content p{
font-size:1rem;
}
body.page-accueil .hero-parallax-media{
transform:scale(1.02);
}
body.page-accueil .hero-parallax-indicators [data-bs-target]{
width:34px;
}
}
/* ═══════════════════════════════════════════════════════════
HERO OVERLAY SLIDER — page accueil
═══════════════════════════════════════════════════════════ */
body.page-accueil .hero.hero-overlay-slider{
position:relative;
padding:0;
min-height:clamp(620px, 88vh, 920px);
background:#111;
border-bottom:1px solid var(--tt-line);
overflow:hidden;
}
body.page-accueil .hero-overlay-slider .carousel,
body.page-accueil .hero-overlay-slider .carousel-inner,
body.page-accueil .hero-overlay-slider .carousel-item{
min-height:clamp(620px, 88vh, 920px);
height:100%;
}
body.page-accueil .hero-overlay-slider .carousel,
body.page-accueil .hero-overlay-slider .carousel-inner{
position:relative;
}
body.page-accueil .hero-overlay-slider .carousel-item{
position:absolute;
inset:0;
}
body.page-accueil .hero-overlay-slider .carousel-item.active,
body.page-accueil .hero-overlay-slider .carousel-item.carousel-item-start,
body.page-accueil .hero-overlay-slider .carousel-item.carousel-item-end{
z-index:1;
}
body.page-accueil .hero-bg{
position:absolute;
inset:-14% 0 -14% 0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
transform:scale(1.12) translate3d(0,0,0);
will-change:transform;
}
body.page-accueil .hero-global-overlay{
position:absolute;
inset:0;
z-index:2;
background:linear-gradient(180deg, rgba(17,17,17,.12) 0%, rgba(17,17,17,.08) 40%, rgba(17,17,17,.18) 100%);
pointer-events:none;
}
body.page-accueil .hero-left-panel{
position:absolute;
inset:0 auto 0 0;
width:min(58vw, 760px);
z-index:3;
background:rgba(245,245,245,.84);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border-right:1px solid rgba(255,255,255,.22);
display:flex;
align-items:center;
}
body.page-accueil .hero-left-panel-inner{
width:100%;
}
body.page-accueil .hero-overlay-card{
max-width:560px;
padding:clamp(2rem, 4vw, 3rem) 0;
margin-left:0;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
}
body.page-accueil .hero-overlay-card .eyebrow{
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
body.page-accueil .hero-overlay-card h1{
font-size:clamp(2.7rem, 5vw, 5rem);
line-height:.96;
font-weight:800;
margin-bottom:1.2rem;
color:var(--tt-black);
letter-spacing:-.03em;
}
body.page-accueil .hero-overlay-card p{
color:var(--color-black);
font-size:1.05rem;
line-height:1.75;
margin-bottom:1.75rem;
}
body.page-accueil .hero-link-dark{
color:var(--tt-black);
}
body.page-accueil .hero-link-dark:hover,
body.page-accueil .hero-link-dark:focus{
color:var(--tt-black);
border-bottom-color:var(--tt-brand);
}
body.page-accueil .hero-control{
width:auto;
opacity:1;
z-index:4;
top:50%;
transform:translateY(-50%);
padding:0 1.25rem;
}
body.page-accueil .hero-overlay-slider .carousel-control-prev{
left:1rem;
}
body.page-accueil .hero-overlay-slider .carousel-control-next{
right:1rem;
}
body.page-accueil .hero-overlay-slider .carousel-control-prev-icon,
body.page-accueil .hero-overlay-slider .carousel-control-next-icon{
display:none;
}
body.page-accueil .hero-overlay-slider .control-circle{
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,255,255,.65);
display:flex;
align-items:center;
justify-content:center;
color:var(--tt-black);
font-size:1.1rem;
transition:background .15s ease, transform .15s ease;
}
body.page-accueil .hero-overlay-slider button:hover .control-circle,
body.page-accueil .hero-overlay-slider button:focus .control-circle{
background:var(--tt-brand);
transform:scale(1.05);
}
body.page-accueil .hero-overlay-indicators{
z-index:4;
bottom:1.75rem;
margin-bottom:0;
}
body.page-accueil .hero-overlay-indicators [data-bs-target]{
width:44px;
height:4px;
border-radius:999px;
border:0;
background:rgba(255,255,255,.42);
opacity:1;
margin:0 .3rem;
}
body.page-accueil .hero-overlay-indicators .active{
background:var(--tt-brand);
}
@media (max-width: 991.98px){
body.page-accueil .hero.hero-overlay-slider,
body.page-accueil .hero-overlay-slider .carousel,
body.page-accueil .hero-overlay-slider .carousel-inner,
body.page-accueil .hero-overlay-slider .carousel-item{
min-height:700px;
}
body.page-accueil .hero-left-panel{
width:min(72vw, 680px);
}
body.page-accueil .hero-overlay-card{
max-width:100%;
padding:2rem 0;
}
}
@media (max-width: 767.98px){
body.page-accueil .hero.hero-overlay-slider,
body.page-accueil .hero-overlay-slider .carousel,
body.page-accueil .hero-overlay-slider .carousel-inner,
body.page-accueil .hero-overlay-slider .carousel-item{
min-height:560px;
}
body.page-accueil .hero-left-panel{
inset:auto 0 0 0;
width:100%;
min-height:auto;
align-items:flex-end;
background:linear-gradient(180deg, rgba(245,245,245,.05) 0%, rgba(245,245,245,.88) 24%, rgba(245,245,245,.92) 100%);
border-right:0;
}
body.page-accueil .hero-left-panel-inner{
padding-bottom:4.5rem;
}
body.page-accueil .hero-overlay-card{
max-width:100%;
padding:1.25rem 0 0;
}
body.page-accueil .hero-overlay-card h1{
font-size:clamp(2.15rem, 9vw, 3.2rem);
}
body.page-accueil .hero-overlay-card p{
font-size:1rem;
line-height:1.65;
}
body.page-accueil .hero-bg{
transform:scale(1.06) translate3d(0,0,0);
}
body.page-accueil .hero-overlay-slider .carousel-control-prev{
left:.35rem;
}
body.page-accueil .hero-overlay-slider .carousel-control-next{
right:.35rem;
}
body.page-accueil .hero-overlay-slider .control-circle{
width:42px;
height:42px;
}
body.page-accueil .hero-overlay-indicators [data-bs-target]{
width:28px;
}
}
/* ═══════════════════════════════════════════════════════════
HERO PREMIUM — page accueil
═══════════════════════════════════════════════════════════ */
body.page-accueil .hero.hero-overlay-slider.hero-premium{
min-height:clamp(640px, 90vh, 940px);
}
body.page-accueil .hero-premium .carousel,
body.page-accueil .hero-premium .carousel-inner,
body.page-accueil .hero-premium .carousel-item{
min-height:clamp(640px, 90vh, 940px);
}
body.page-accueil .hero-premium .hero-bg{
inset:-16% 0 -16% 0;
transform:scale(1.14) translate3d(0,0,0);
}
body.page-accueil .hero-premium .hero-global-overlay{
background:
linear-gradient(180deg, rgba(17,17,17,.10) 0%, rgba(17,17,17,.08) 38%, rgba(17,17,17,.20) 100%);
}
body.page-accueil .hero-left-panel-premium{
width:min(60vw, 820px);
background:linear-gradient(180deg, rgba(245,245,245,.10) 0%, rgba(245,245,245,.34) 48%, rgba(245,245,245,.60) 100%);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border-right:0;
clip-path:polygon(0 0, 88% 0, 100% 100%, 0 100%);
}
body.page-accueil .hero-left-panel-premium::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(90deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 60%);
pointer-events:none;
}
body.page-accueil .hero-overlay-card-premium{
max-width:560px;
padding:clamp(2.2rem, 4vw, 3.2rem) 0;
border:0;
box-shadow:none;
position:relative;
z-index:2;
}
body.page-accueil .hero-premium-eyebrow{
color:var(--tt-brand-ink);
background:rgba(204,216,41,.18);
padding:.45rem 1rem;
border-radius:999px;
margin-bottom:1.35rem;
letter-spacing:.09em;
/* AJOUT — feedback cliente 12 mai 2026 : agrandir l'eyebrow
« Centre de production en art actuel » pour qu'il soit plus visible. */
font-size:clamp(1rem, 1.4vw, 1.25rem);
font-weight:600;
}
body.page-accueil .hero-premium-title{
margin:0 0 1.25rem;
/* MODIF — feedback cliente 12 mai 2026 : réduire la taille du titre
« Des artistes, un lieu, une communauté ». Avant : clamp(2.7rem, 5vw, 5rem). */
font-size:clamp(2rem, 4vw, 3.5rem);
line-height:.94;
font-weight:800;
letter-spacing:-.04em;
color:var(--tt-black);
}
body.page-accueil .hero-premium-title .hero-line{
display:block;
opacity:0;
transform:translateY(22px);
animation:heroLineIn .8s cubic-bezier(.2,.8,.2,1) forwards;
}
body.page-accueil .hero-premium-title .hero-line-1{ animation-delay:.08s; }
body.page-accueil .hero-premium-title .hero-line-2{ animation-delay:.18s; }
body.page-accueil .hero-premium-title .hero-line-3{ animation-delay:.28s; }
body.page-accueil .hero-premium-text{
opacity:0;
transform:translateY(22px);
animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) forwards;
animation-delay:.42s;
}
body.page-accueil .hero-premium-actions{
opacity:0;
transform:translateY(22px);
animation:heroFadeUp .85s cubic-bezier(.2,.8,.2,1) forwards;
animation-delay:.56s;
}
@keyframes heroLineIn{
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes heroFadeUp{
to{
opacity:1;
transform:translateY(0);
}
}
body.page-accueil .hero-control-premium{
padding:0 .75rem;
}
body.page-accueil .hero-premium .carousel-control-prev{
left:.9rem;
}
body.page-accueil .hero-premium .carousel-control-next{
right:.9rem;
}
body.page-accueil .hero-control-premium .control-circle{
width:42px;
height:42px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.28);
color:#fff;
font-size:.95rem;
box-shadow:none;
}
body.page-accueil .hero-control-premium:hover .control-circle,
body.page-accueil .hero-control-premium:focus .control-circle{
background:rgba(204,216,41,.88);
border-color:rgba(204,216,41,.88);
color:var(--tt-brand-ink);
transform:scale(1.03);
}
body.page-accueil .hero-overlay-indicators-premium{
justify-content:flex-end;
bottom:1.6rem;
padding-right:1.2rem;
}
body.page-accueil .hero-overlay-indicators-premium [data-bs-target]{
width:34px;
height:2px;
background:rgba(255,255,255,.28);
}
body.page-accueil .hero-overlay-indicators-premium .active{
background:rgba(204,216,41,.95);
}
@media (max-width: 991.98px){
body.page-accueil .hero-left-panel-premium{
width:min(74vw, 700px);
clip-path:polygon(0 0, 92% 0, 100% 100%, 0 100%);
}
}
@media (max-width: 767.98px){
body.page-accueil .hero-premium .carousel,
body.page-accueil .hero-premium .carousel-inner,
body.page-accueil .hero-premium .carousel-item{
min-height:580px;
}
body.page-accueil .hero-left-panel-premium{
inset:auto 0 0 0;
width:100%;
clip-path:none;
background:linear-gradient(180deg, rgba(245,245,245,.06) 0%, rgba(245,245,245,.30) 24%, rgba(245,245,245,.60) 100%);
}
body.page-accueil .hero-overlay-card-premium{
max-width:100%;
padding:1.25rem 0 0;
}
body.page-accueil .hero-premium-title{
/* MODIF mobile — feedback cliente 12 mai 2026 : réduit en cohérence
avec la version desktop. Avant : clamp(2.2rem, 9vw, 3.25rem). */
font-size:clamp(1.5rem, 7vw, 2.5rem);
}
body.page-accueil .hero-overlay-indicators-premium{
justify-content:center;
padding-right:0;
}
}
@media (prefers-reduced-motion: reduce){
body.page-accueil .hero-premium-title .hero-line,
body.page-accueil .hero-premium-text,
body.page-accueil .hero-premium-actions{
opacity:1;
transform:none;
animation:none;
}
}
/* ═══════════════════════════════════════════════════════════════════════
HERO — version IMAGE FIXE + PARALLAX (page accueil)
MODIF — feedback cliente 13 mai 2026 :
- Le carousel est remplacé par une seule image (batiment.png).
- Effet parallax via `background-attachment: fixed` (desktop + tablette).
- Sur iOS/Android, on retombe sur `scroll` car `fixed` est buggé.
- L'eyebrow devient l'élément dominant typographiquement ; le H1 passe
en sous-titre discret pour respecter la hiérarchie demandée.
IMPORTANT — la HAUTEUR du hero doit rester identique à l'ancienne version
(carousel) : clamp(620px, 88vh, 920px). On reproduit donc la même
structure de positionnement : section avec min-height + enfants tous en
position:absolute (image + overlay) sauf le panneau gauche qui garde
son position:absolute hérité de .hero-left-panel.
═══════════════════════════════════════════════════════════════════════ */
body.page-accueil .hero-static-parallax{
position:relative;
padding:0;
min-height:clamp(620px, 88vh, 920px);
background:#111;
border-bottom:1px solid var(--tt-line);
overflow:hidden;
}
body.page-accueil .hero-static-parallax .hero-parallax-fixed{
position:absolute;
inset:0;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
/* PARALLAX — l'image reste fixe pendant le scroll, le contenu défile. */
background-attachment:fixed;
will-change:transform;
}
/* L'overlay global est positionné absolument au-dessus de l'image. */
body.page-accueil .hero-static-parallax .hero-global-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(90deg, rgba(245,245,245,.78) 0%, rgba(245,245,245,.48) 38%, rgba(245,245,245,.10) 70%, rgba(245,245,245,0) 100%),
linear-gradient(180deg, rgba(17,17,17,.04) 0%, rgba(17,17,17,.12) 100%);
pointer-events:none;
}
/* NE PAS toucher au positionnement du panneau de gauche : il garde son
position:absolute hérité de .hero-left-panel pour remplir la section. */
/* ─── CONTENU ─────────────────────────────────────────────────────────
Le panneau crème démarre à gauche du viewport (left:0) — c'est sa
signature visuelle. Le texte est ANCRÉ DANS le panneau avec un
padding-left modéré, pas centré sur la grille du site.
z-index:5 > panneau (z-index:3) — texte au premier plan, devant
les cercles verts décoratifs. */
body.page-accueil .hero-static-parallax .hero-content-wrap{
position:absolute;
inset:0;
z-index:5;
pointer-events:none; /* laisser l'image cliquable / scrollable */
}
/* Override Bootstrap's .container centering ici uniquement : on veut un
wrapper aligné GAUCHE qui suit le panneau crème, pas centré. */
body.page-accueil .hero-static-parallax .hero-content-wrap > .container{
max-width:none;
height:100%;
margin:0;
padding-left:clamp(2rem, 6vw, 6rem);
padding-right:0;
display:flex;
align-items:center;
pointer-events:auto;
}
body.page-accueil .hero-static-parallax .hero-overlay-card-brand{
margin-left:0;
max-width:560px;
width:100%;
}
/* ─── HIÉRARCHIE INVERSÉE : eyebrow en vedette ──────────────────────────
Spécificité montée à 0,3,2 pour battre `.hero-overlay-card h1` (0,2,2)
et `.hero-overlay-card .eyebrow` (0,3,1). */
body.page-accueil .hero-overlay-card .hero-premium-eyebrow-lead{
display:inline-block;
font-size:clamp(1.8rem, 3.6vw, 3.1rem);
line-height:1.08;
font-weight:800;
letter-spacing:-.02em;
text-transform:none;
/* Pilule verte restaurée (feedback cliente 13 mai 2026). */
background:rgba(204,216,41,.28);
padding:.32em .85em;
border-radius:999px;
color:var(--tt-brand-ink);
margin-bottom:1rem;
}
body.page-accueil .hero-overlay-card h1.hero-premium-title-sub{
/* H1 plus présent — toujours plus petit que l'eyebrow mais lisible. */
font-size:clamp(2rem, 3vw, 2.8rem);
line-height:1.15;
font-weight:700;
letter-spacing:-.015em;
color:var(--tt-black, #111);
margin:0 0 1.1rem;
text-transform:none;
}
body.page-accueil .hero-overlay-card h1.hero-premium-title-sub .hero-line{
display:block;
}
/* ─── Tablette : parallax fixe buggé sur iOS — désactiver.
Les cercles décoratifs sont atténués, le panneau crème s'élargit
pour que le texte ne dépasse JAMAIS la zone ombragée
(feedback cliente 13 mai 2026). ──────────────────────────────────── */
@media (max-width: 991.98px){
body.page-accueil .hero-static-parallax .hero-parallax-fixed{
background-attachment:scroll;
}
/* Cercles verts : plus petits + décalés vers la droite. */
body.page-accueil .hero-static-parallax .hero-left-panel-brand::before{
width:440px;
height:440px;
right:-260px;
opacity:.14;
}
body.page-accueil .hero-static-parallax .hero-left-panel-brand::after{
width:240px;
height:240px;
right:-90px;
bottom:-140px;
opacity:.55;
}
/* Panneau crème ÉLARGI pour contenir entièrement la carte texte.
Avant : min(64vw, 640px) → à 820px, panneau de 524px, texte sortait.
Maintenant : min(88vw, 760px) → à 820px, panneau de 722px. */
body.page-accueil .hero-static-parallax .hero-left-panel-premium{
width:min(88vw, 760px);
}
/* Carte texte resserrée pour rester confortablement dans le panneau. */
body.page-accueil .hero-static-parallax .hero-overlay-card-brand{
max-width:clamp(360px, 56vw, 480px);
}
/* Padding du wrapper de contenu adapté tablette. */
body.page-accueil .hero-static-parallax .hero-content-wrap > .container{
padding-left:clamp(2rem, 5vw, 4rem);
}
/* H1 tablette : plus présent. */
body.page-accueil .hero-overlay-card h1.hero-premium-title-sub{
font-size:clamp(1.7rem, 3.4vw, 2.3rem);
line-height:1.18;
}
}
@media (max-width: 767.98px){
/* Hauteur mobile identique à l'ancienne version carousel (560px). */
body.page-accueil .hero-static-parallax{
min-height:560px;
}
/* MOBILE — on revient à l'essentiel : l'IMAGE est la vedette,
pas de panneau crème vide. Seul l'eyebrow garde sa pilule verte. */
body.page-accueil .hero-static-parallax .hero-left-panel,
body.page-accueil .hero-static-parallax .hero-left-panel-premium,
body.page-accueil .hero-static-parallax .hero-left-panel-brand{
display:none !important;
}
/* L'overlay global devient un dégradé bas-haut pour lisibilité du texte. */
body.page-accueil .hero-static-parallax .hero-global-overlay{
background:linear-gradient(180deg,
rgba(245,245,245,.10) 0%,
rgba(245,245,245,.30) 40%,
rgba(245,245,245,.92) 78%,
rgba(245,245,245,.98) 100%);
}
/* Le contenu s'ancre en bas du hero, au-dessus du dégradé clair. */
body.page-accueil .hero-static-parallax .hero-content-wrap{
padding-bottom:2rem;
}
body.page-accueil .hero-static-parallax .hero-content-wrap > .container{
align-items:flex-end; /* surcharge le align-items:center desktop */
}
/* Typographie mobile : eyebrow garde sa pilule verte, H1 plus grand. */
body.page-accueil .hero-overlay-card .hero-premium-eyebrow-lead{
font-size:clamp(1.35rem, 6.5vw, 1.85rem);
line-height:1.15;
margin-bottom:.7rem;
padding:.3em .75em;
}
body.page-accueil .hero-overlay-card h1.hero-premium-title-sub{
/* Plus grand + flow naturel sur toute la largeur de la carte texte
(même largeur que le paragraphe). */
font-size:clamp(2.1rem, 9.5vw, 2.7rem);
line-height:1.18;
margin-bottom:1rem;
}
/* Sur mobile, on retire le display:block des spans pour que le titre
s'étale sur toute la largeur du texte (au lieu d'être empilé en
trois lignes courtes décrochées). L'animation est désactivée car
les éléments inline ne supportent pas transform. */
body.page-accueil .hero-overlay-card h1.hero-premium-title-sub .hero-line{
display:inline;
opacity:1;
transform:none;
animation:none;
}
body.page-accueil .hero-static-parallax .hero-premium-text{
font-size:.92rem;
line-height:1.6;
margin-bottom:0;
}
}
/* Respect des préférences d'animation réduite */
@media (prefers-reduced-motion: reduce){
body.page-accueil .hero-static-parallax .hero-parallax-fixed{
background-attachment:scroll;
}
}
/* ═══════════════════════════════════════════════════════════
TROIS CHEMINS
═══════════════════════════════════════════════════════════ */
.path-card{
padding:1.75rem;
}
.path-icon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
background:var(--tt-brand-soft);
color:var(--tt-brand-ink);
border-radius:var(--tt-radius);
font-size:1.5rem;
margin-bottom:1.25rem;
}
.path-card h3{
font-size:1.2rem;
line-height:1.2;
font-weight:700;
margin-bottom:.75rem;
color:var(--tt-black);
}
.path-card p{
color:var(--tt-muted);
margin-bottom:1rem;
font-size:.95rem;
}
/* ═══════════════════════════════════════════════════════════
BANNIERE D'APPEL À L'ACTION
═══════════════════════════════════════════════════════════ */
.callout-banner .eyebrow{
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.callout-banner{
background:
radial-gradient(ellipse at 20% 100%, rgba(204,216,41,.22), transparent 55%),
radial-gradient(ellipse at 80% 0%, rgba(204,216,41,.14), transparent 50%),
var(--tt-surface);
padding:calc(var(--tt-section) - 10px) 1.5rem;
border-top:1px solid var(--tt-line);
border-bottom:1px solid var(--tt-line);
}
.callout-inner{
text-align:center;
max-width:720px;
margin:0 auto;
}
.callout-tag{
display:inline-block;
background:var(--tt-brand);
color:var(--tt-brand-ink);
font-size:.75rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
padding:.35rem .85rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.callout-inner h2{
font-size:clamp(1.85rem, 2.8vw, 2.6rem);
font-weight:800;
margin-bottom:.75rem;
color:var(--tt-black);
}
.callout-inner p{
color:var(--tt-muted);
margin-bottom:.75rem;
}
.callout-deadline{
display:inline-flex;
align-items:center;
gap:.45rem;
font-size:.9rem;
font-weight:600;
color:var(--tt-ink);
margin-bottom:1.5rem;
}
.callout-deadline i{
color:var(--tt-brand-dark);
font-size:1.5rem;
}
.callout-actions{
display:flex;
justify-content:center;
gap:.75rem;
flex-wrap:wrap;
}
/* ═══════════════════════════════════════════════════════════
MEMBRES
═══════════════════════════════════════════════════════════ */
.member-card{
display:grid;
grid-template-columns:140px 1fr;
gap:1.25rem;
align-items:stretch;
border-radius:var(--tt-radius);
}
.member-card{ --placeholder-min-h:160px; }
.member-card .placeholder-media{ height:100%; }
.member-card .placeholder-media > img{
width:100%;
height:100%;
object-fit:cover;
}
.member-card h3{
font-size:1.05rem;
line-height:1.2;
font-weight:700;
margin-bottom:.3rem;
color:var(--tt-black);
}
.member-role{
font-size:.85rem;
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.15rem .55rem;
border-radius:999px;
display:inline-block;
margin-bottom:.6rem;
font-weight:600;
}
.member-text{
font-size:.94rem;
color:var(--tt-muted);
margin-bottom:.85rem;
/* Garde-fou : si la classe est réutilisée ailleurs avec un texte
long, on tronque à 3 lignes max pour éviter les cards déformées.
Sur l'accueil (01_accueil.php), la bio a été retirée — cette
règle ne s'applique plus là. */
display:-webkit-box;
-webkit-line-clamp:3;
line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.member-social{
display:flex;
gap:.35rem;
}
.member-social a{
width:36px;
height:36px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--tt-radius-sm);
color:var(--tt-black);
text-decoration:none;
font-size:.95rem;
transition:background .15s ease;
}
.member-social a:hover,
.member-social a:focus{
background:var(--tt-surface);
}
/* ═══════════════════════════════════════════════════════════
ACTUALITÉS / NOUVELLES (même gabarit de carte)
═══════════════════════════════════════════════════════════ */
.news-card{
padding:0;
display:flex;
flex-direction:column;
}
.news-card{
--placeholder-min-h:210px;
--placeholder-radius:0;
}
/* Image en haut de la card : on retire les bordures latérales et du haut,
on garde uniquement border-bottom comme séparateur visuel avec le contenu. */
.news-card .placeholder-media{
border-left:0;
border-right:0;
border-top:0;
}
.news-body{
padding:1.25rem;
display:flex;
flex-direction:column;
flex-grow:1;
}
.news-meta{
display:flex;
flex-wrap:wrap;
gap:.4rem .65rem;
margin-bottom:.6rem;
font-size:.75rem;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
}
.news-tag{
background:var(--tt-brand-soft);
color:var(--tt-brand-ink);
padding:.2rem .55rem;
border-radius:999px;
}
.news-date{
color:var(--tt-muted);
display:inline-flex;
align-items:center;
gap:.3rem;
}
.news-card h3{
font-size:1.1rem;
line-height:1.25;
font-weight:700;
margin-bottom:.65rem;
color:var(--tt-black);
}
.news-card p{
color:var(--tt-muted);
font-size:.94rem;
margin-bottom:1rem;
flex-grow:1;
}
.actualites-featured .news-body .text-link-arrow{
margin-top:auto;
align-self:flex-end;
}
/* ═══════════════════════════════════════════════════════════
PARTENAIRES — logos simples, sans fond, sans bordure, sans hover
═══════════════════════════════════════════════════════════ */
.partners-wrap{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:3rem;
align-items:center;
}
.partners-copy p{
margin-bottom:1.25rem;
color:var(--tt-muted);
}
.partner-logos{
display:grid;
grid-template-columns:repeat(2, minmax(120px, 1fr));
gap:2rem 2.5rem;
align-items:center;
justify-items:center;
}
.partner-logo{
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:transparent;
border:0;
}
.partner-logo img{
max-height:68px;
max-width:100%;
width:auto;
object-fit:contain;
}
/* ═══════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer{
background:var(--tt-footer-bg);
color:var(--tt-footer-text);
font-family:"Inter", system-ui, sans-serif;
}
.footer-top{
padding:64px 0 0;
}
.footer-container{
max-width:var(--tt-container);
margin:0 auto;
padding:0 2rem;
}
.footer-brand-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:3rem;
padding-bottom:52px;
border-bottom:1px solid var(--tt-footer-border);
}
.footer-brand{
flex:0 0 auto;
max-width:260px;
}
.footer-tagline{
font-size:.875rem;
color:var(--tt-footer-muted);
line-height:1.6;
margin-top:1rem;
}
.footer-cols{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:2.5rem;
flex:1;
}
.footer-col h6{
font-size:.75rem;
font-weight:700;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--tt-brand);
margin-bottom:1.25rem;
}
.footer-col ul{
list-style:none;
padding:0;
margin:0;
}
.footer-col li{
margin-bottom:.7rem;
}
.footer-col a{
font-size:.9rem;
color:var(--tt-footer-muted);
text-decoration:none;
transition:color .15s ease;
}
.footer-col a:hover,
.footer-col a:focus{
color:var(--tt-white);
}
.footer-newsletter{
padding:40px 0 44px;
border-bottom:1px solid var(--tt-footer-border);
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:3rem;
}
.footer-nl-left h5{
font-size:1.125rem;
font-weight:700;
color:var(--tt-white);
margin-bottom:.5rem;
}
.footer-nl-left p{
font-size:.9rem;
color:var(--tt-footer-muted);
line-height:1.6;
max-width:340px;
margin:0;
}
.footer-nl-right{
flex:0 0 400px;
}
.footer-form{
display:flex;
gap:.5rem;
margin-bottom:.65rem;
}
.footer-form input{
flex:1;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.24);
border-radius:var(--tt-radius-sm);
padding:.7rem 1rem;
font-family:"Inter", system-ui, sans-serif;
font-size:.9rem;
color:var(--tt-white);
outline:none;
transition:border-color .15s ease;
min-height:46px;
}
.footer-form input::placeholder{
color:var(--tt-footer-muted);
}
.footer-form input:focus{
border-color:var(--tt-brand);
box-shadow:var(--tt-focus);
}
.footer-form button{
background:var(--tt-brand);
border:none;
border-radius:var(--tt-radius-sm);
padding:.7rem 1.4rem;
font-family:"Inter", system-ui, sans-serif;
font-size:.875rem;
font-weight:700;
color:var(--tt-brand-ink);
cursor:pointer;
white-space:nowrap;
transition:background .15s ease, transform .1s ease;
}
.footer-form button:hover,
.footer-form button:focus{
background:var(--tt-brand-dark);
transform:translateY(-1px);
}
.footer-note{
font-size:.8rem;
color:var(--tt-footer-muted);
margin:0;
}
.footer-note a{
color:var(--tt-footer-muted);
text-decoration:underline;
text-underline-offset:2px;
}
.footer-note a:hover{
color:var(--tt-white);
}
.footer-bottom{
padding:1.25rem 0 1.5rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1rem;
flex-wrap:wrap;
}
.footer-legal{
display:flex;
align-items:center;
gap:.5rem;
flex-wrap:wrap;
}
.footer-legal span,
.footer-legal a{
font-size:.8rem;
color:var(--tt-footer-muted);
text-decoration:none;
transition:color .15s ease;
}
.footer-legal a:hover,
.footer-legal a:focus{
color:var(--tt-white);
}
.footer-legal .sep{
opacity:.4;
}
.footer-social{
display:flex;
align-items:center;
gap:.4rem;
}
.footer-social a{
width:40px;
height:40px;
border-radius:var(--tt-radius-sm);
border:1px solid var(--tt-footer-border);
display:flex;
align-items:center;
justify-content:center;
color:var(--tt-footer-muted);
transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.footer-social a:hover,
.footer-social a:focus{
border-color:var(--tt-brand);
color:var(--tt-brand);
background:rgba(204,216,41,.07);
}
.footer-social svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.footer-social .yt{
fill:currentColor;
stroke:none;
}
/* ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px){
.partners-wrap{
grid-template-columns:1fr;
}
.hero-inner{
grid-template-columns:1fr;
padding-left:0;
padding-right:0;
gap:2.5rem;
}
.hero-copy{
padding:0 1.5rem;
}
.hero-slider{
border-radius:0;
}
.member-card{
grid-template-columns:1fr;
}
.member-card{ --placeholder-min-h:200px; }
.member-card .placeholder-media{ height:auto; }
.footer-brand-row{
flex-direction:column;
}
.footer-cols{
grid-template-columns:repeat(2, 1fr);
}
.footer-nl-right{
flex:1;
}
.footer-newsletter{
flex-direction:column;
}
}
.section-heading{
max-width:760px;
margin-bottom:3rem;
}
.section-heading.text-center{
margin-left:auto;
margin-right:auto;
}
.hero-copy{
max-width:760px;
margin:0 auto;
}
.btn.hero-back-btn-green{
transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn.hero-back-btn-green:hover,
.btn.hero-back-btn-green:focus-visible{
background:var(--tt-brand);
border-color:var(--tt-brand);
color:var(--tt-brand-ink);
}
.btn.hero-back-btn-dark{
transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn.hero-back-btn-dark:hover,
.btn.hero-back-btn-dark:focus-visible{
background:var(--tt-black);
border-color:var(--tt-black);
color:var(--tt-white);
}
/* ═══════════════════════════════════════════════════════════
GUIDING PRINCIPLES
═══════════════════════════════════════════════════════════ */
.detail-block{ /* Phase 4d-4 : déplacé depuis dé-scopage zone page-apropos */
position:relative;
padding:1.5rem 1.5rem 1.25rem;
background:rgba(255,255,255,.82);
border-radius:var(--tt-radius);
box-shadow:var(--tt-shadow);
}
.detail-block h3{
font-size:1.2rem;
font-weight:700;
margin-bottom:.75rem;
color:var(--tt-black);
}
.value-list-card{ /* Phase 4d-4 : fusion master + dé-scopage page-apropos */
position:relative;
background:var(--tt-white);
border-top:2px solid var(--tt-brand);
border-radius:var(--tt-radius);
padding:1.35rem 1.25rem 1.15rem;
height:100%;
overflow:hidden;
}
.value-list-card::after{
content:"";
position:absolute;
right:-42px;
bottom:-42px;
width:120px;
height:120px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.2;
pointer-events:none;
}
.value-list-card h4{
font-size:1.05rem;
font-weight:700;
margin-bottom:1rem;
color:var(--tt-black);
}
.value-list{
padding-left:1rem;
margin-bottom:0;
color:var(--tt-muted);
}
.value-list li + li{
margin-top:.45rem;
}
/* ═══════════════════════════════════════════════════════════
HISTORY
═══════════════════════════════════════════════════════════ */
.history-panel{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
/* align-items:stretch (défaut implicite de grid) — l'image
placeholder à droite s'étire à la même hauteur que le bloc
texte à gauche, peu importe le contenu affiché. */
align-items:stretch;
margin-bottom:3rem;
}
/* Hauteur plancher de la zone texte de la timeline. Ne s'applique QU'EN
DESKTOP (≥992px) où le layout est 2 colonnes côte à côte — c'est là que
le saut de hauteur en changeant d'année est le plus visible.
Sur iPad/mobile, le layout stacke verticalement et le panneau adopte sa
hauteur naturelle pour éviter l'espace vide entre le texte et l'image. */
.history-intro{
display:flex;
flex-direction:column;
}
@media (min-width: 992px){
.history-intro{
min-height:460px;
}
}
.history-year{
font-size:3rem;
line-height:1;
font-weight:800;
color:var(--tt-black);
margin-bottom:1rem;
}
.history-intro h2{
font-size:clamp(1.65rem, 2.8vw, 2.6rem);
line-height:1.12;
font-weight:800;
margin-bottom:1rem;
color:var(--tt-black);
}
.history-intro p{
margin-bottom:1.5rem;
}
.history-image{
min-height:320px;
}
.timeline-nav{
position:relative;
display:flex;
justify-content:space-between;
gap:1rem;
padding-top:1rem;
}
.timeline-nav::before{
content:"";
position:absolute;
left:0;
right:0;
top:12px;
height:1px;
background:#cfcfcf;
}
.timeline-step{
position:relative;
z-index:1;
flex:1;
text-align:center;
background:transparent;
border:none;
padding:.25rem .5rem;
cursor:pointer;
font-family:inherit;
transition:transform .15s ease;
}
.timeline-step:hover{
transform:translateY(-2px);
}
.timeline-step:focus-visible{
outline:none;
box-shadow:var(--tt-focus);
border-radius:var(--tt-radius-sm);
}
.timeline-dot{
width:14px;
height:14px;
border-radius:50%;
background:var(--tt-white);
border:1px solid #bdbdbd;
margin:0 auto .6rem;
transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.timeline-step:hover .timeline-dot{
border-color:var(--tt-brand-dark);
}
.timeline-step.active .timeline-dot{
background:var(--tt-brand);
border-color:var(--tt-brand);
box-shadow:0 0 0 4px rgba(204,216,41,.25);
transform:scale(1.15);
}
.timeline-step.upcoming .timeline-dot{
background:var(--tt-white);
border-style:dashed;
border-color:#9a9a9a;
}
.timeline-step.active.upcoming .timeline-dot{
background:rgba(204,216,41,.35);
border-style:dashed;
border-color:var(--tt-brand);
}
.timeline-label{
font-size:1.25rem;
font-weight:600;
color:var(--tt-muted);
transition:color .2s ease;
}
/* Mobile : libellés (1997, 2004–2006, Aujourd'hui…) plus petits pour
éviter le débordement / la coupure sur écran étroit. */
@media (max-width: 575.98px){
.timeline-label{
font-size:.85rem;
}
}
.timeline-step.active .timeline-label{
color:var(--tt-black);
}
.timeline-step.upcoming .timeline-label{
font-style:italic;
}
/* Smooth content swap when changing years */
.history-intro .history-year,
.history-intro h2,
.history-intro p{
transition:opacity .25s ease, transform .25s ease;
}
.history-intro.is-switching .history-year,
.history-intro.is-switching h2,
.history-intro.is-switching p{
opacity:0;
transform:translateY(6px);
}
/* ═══════════════════════════════════════════════════════════
TEAM
═══════════════════════════════════════════════════════════ */
.team-card{
padding:1rem;
}
.team-card{ --placeholder-min-h:220px; }
.team-card .placeholder-media{ margin-bottom:1rem; }
.team-card h3{
font-size:1.05rem;
font-weight:700;
margin-bottom:.35rem;
color:var(--tt-black);
}
.team-role{
font-size:.9rem;
font-weight:600;
color:var(--tt-muted);
margin-bottom:.5rem;
}
.team-description{
font-size:.875rem;
color:var(--tt-muted);
line-height:1.45;
margin-bottom:.75rem;
}
.team-text{
font-size:.94rem;
color:var(--tt-muted);
margin-bottom:.9rem;
}
.social-inline{
display:flex;
gap:.35rem;
}
.social-inline a{
width:40px;
height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:var(--tt-radius-sm);
color:var(--tt-black);
text-decoration:none;
font-size:1rem;
transition:background .15s ease, color .15s ease;
}
.social-inline a:hover,
.social-inline a:focus{
background:var(--tt-surface);
color:var(--tt-black);
}
.artist-hero-actions{
display:flex;
flex-wrap:wrap;
gap:.75rem 1rem;
align-items:center;
}
.artist-hero .col-lg-5 .card-clean{
transition:none;
}
.artist-hero .col-lg-5 .card-clean:hover,
.artist-hero .col-lg-5 .card-clean:focus-within{
transform:none;
box-shadow:none;
}
/* ═══════════════════════════════════════════════════════════
STATS
═══════════════════════════════════════════════════════════ */
.stats-layout{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:3rem;
align-items:start;
}
.stats-asym{
display:grid;
grid-template-columns:repeat(6, 1fr);
grid-template-rows:170px 170px;
gap:1rem;
align-items:stretch;
}
.stat-card{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
text-align:center;
border-radius:var(--tt-radius);
background:var(--tt-white);
box-shadow:var(--tt-shadow);
padding:1rem;
min-height:170px;
height:100%; /* Phase 4d-2 : fusionné depuis l'ancien bloc séparé */
}
.stat-img-1,
.stat-img-2{
height:100%;
min-height:0;
}
.stat-card strong{
display:block;
font-size:clamp(2rem, 4vw, 3rem);
line-height:1;
font-weight:800;
color:var(--tt-brand-ink);
margin-bottom:.5rem;
}
.stat-card span{
color:var(--tt-muted);
font-size:.95rem;
}
.stat-1{
grid-column:1 / span 2;
grid-row:1 / span 2;
background:var(--tt-brand);
border-color:var(--tt-brand);
}
.stat-1 strong,
.stat-1 span{
color:var(--tt-brand-ink);
}
.stat-img-1{
grid-column:3 / span 2;
grid-row:1;
min-height:170px;
}
.stat-2{
grid-column:3 / span 2;
grid-row:2;
}
.stat-3{
grid-column:5 / span 2;
grid-row:1;
}
.stat-img-2{
grid-column:5 / span 2;
grid-row:2;
min-height:170px;
}
/* ═══════════════════════════════════════════════════════════
COMMUNITY CTA
═══════════════════════════════════════════════════════════ */
.cta-about{
text-align:center;
max-width:860px;
margin:0 auto;
}
.cta-about{ --placeholder-min-h:360px; }
.cta-about .placeholder-media{ margin:0 auto 2rem; }
/* Skip link */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:1000;
background:#000; color:#fff; padding:.75rem 1rem; text-decoration:none;
}
.skip-link:focus{ left:1rem; top:1rem; }
/* ═══════════════════════════════════════════════════════════
HERO SIMPLE
═══════════════════════════════════════════════════════════ */
.page-hero{
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.14), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
text-align:center;
}
.page-hero .eyebrow{
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.page-hero h1{
font-size:clamp(2.25rem, 4vw, 3.8rem);
line-height:1.05;
font-weight:800;
margin-bottom:1.25rem;
color:var(--tt-black);
}
.page-hero p{
color:var(--tt-muted);
font-size:1.05rem;
}
/* ═══════════════════════════════════════════════════════════
TIMELINE — intro 1997 centrée + zigzag vertical alternée
═══════════════════════════════════════════════════════════ */
/* Bloc d'origine centré (1997) */
.timeline-origin{
text-align:center;
max-width:720px;
margin:0 auto 4.5rem;
}
.timeline-origin-year{
font-size:clamp(3.25rem, 7vw, 5.5rem);
font-weight:800;
line-height:1;
color:var(--tt-black);
margin-bottom:1.25rem;
letter-spacing:-.02em;
}
.timeline-origin-title{
font-size:clamp(1.35rem, 2vw, 1.75rem);
font-weight:700;
color:var(--tt-black);
margin:0 0 1rem;
letter-spacing:-.01em;
}
.timeline-origin-text{
color:var(--tt-muted);
font-size:1.05rem;
margin-bottom:1.5rem;
}
/* Paragraphes internes (HTML riche dans `text` de l'origin et
`description` des entries). On retire les marges des p extrêmes
pour ne pas dupliquer le margin-bottom du wrapper. */
.timeline-origin-text p,
.timeline-entry-desc p{
margin:0 0 .85rem;
}
.timeline-origin-text p:last-child,
.timeline-entry-desc p:last-child{
margin-bottom:0;
}
/* Zigzag vertical */
.timeline-zigzag{
position:relative;
max-width:1040px;
margin:0 auto;
padding:1.5rem 0;
}
/* Ligne centrale + barre de progression */
.timeline-zigzag-line,
.timeline-zigzag-line-fill{
position:absolute;
left:50%;
top:0;
width:2px;
transform:translateX(-50%);
}
.timeline-zigzag-line{
bottom:0;
background:var(--tt-line);
z-index:0;
}
.timeline-zigzag-line-fill{
height:0;
background:var(--tt-brand-dark);
z-index:1;
transition:height .12s linear;
}
/* Entrées en grille 2 colonnes */
.timeline-entry{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
column-gap:4rem;
margin-bottom:3.5rem;
z-index:2;
}
.timeline-entry:last-child{ margin-bottom:0; }
/* Point d'ancrage sur la ligne centrale */
.timeline-entry-dot{
position:absolute;
left:50%;
top:1.75rem;
width:16px;
height:16px;
border-radius:50%;
background:var(--tt-ink);
border:3px solid var(--tt-surface);
transform:translateX(-50%);
z-index:3;
transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.timeline-entry.is-visible .timeline-entry-dot{
background:var(--tt-brand);
box-shadow:0 0 0 6px var(--tt-brand-soft);
transform:translateX(-50%) scale(1.1);
}
/* Placement alterné */
.timeline-entry--left .timeline-entry-card{
grid-column:1;
}
.timeline-entry--right .timeline-entry-card{
grid-column:2;
}
/* Carte de contenu */
.timeline-entry-card{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:1.5rem;
box-shadow:var(--tt-shadow);
}
/* Année (repère temporel) en tête de carte — visuellement distincte du
titre, dans le ton de l'année du bloc d'origine mais plus discrète. */
.timeline-entry-year{
font-size:clamp(1.6rem, 2.4vw, 2.1rem);
font-weight:800;
line-height:1;
color:var(--tt-brand-ink, #1f2300);
letter-spacing:-.015em;
margin:0 0 .65rem;
}
.timeline-entry-card h3{
font-size:1.4rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 .75rem;
line-height:1.15;
}
.timeline-entry-card p{
color:var(--tt-muted);
font-size:.95rem;
margin-bottom:1rem;
}
.timeline-entry-card .btn{
margin-bottom:1.25rem;
}
.timeline-entry-card{
--placeholder-min-h:240px;
--placeholder-radius:var(--tt-radius-sm);
}
.timeline-entry-card .placeholder-media{ margin-top:.25rem; }
/* Image réelle (quand $entry['media_src'] est fourni dans le tableau du
timeline). Reproduit l'apparence du .placeholder-media : même hauteur,
même rayon, recadrage par object-fit pour gérer les ratios variés. */
.timeline-entry-card .timeline-entry-img{
display:block;
width:100%;
height:var(--placeholder-min-h, 240px);
object-fit:cover;
border-radius:var(--placeholder-radius, var(--tt-radius-sm));
margin-top:.25rem;
}
/* Animations au défilement (override du reveal générique) */
.timeline-entry.reveal{
opacity:0;
transition:opacity .75s ease, transform .75s ease;
}
.timeline-entry--left.reveal{
transform:translate(-32px, 24px);
}
.timeline-entry--right.reveal{
transform:translate(32px, 24px);
}
.timeline-entry.reveal.is-visible{
opacity:1;
transform:translate(0, 0);
}
/* ═══════════════════════════════════════════════════════════
REPÈRES
═══════════════════════════════════════════════════════════ */
.reperes-layout{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:4rem;
align-items:start;
}
.reperes-copy{
position:sticky;
top:100px;
}
.reperes-copy .eyebrow{ margin-bottom:.85rem; }
.reperes-copy h2{
font-size:clamp(1.8rem, 2.8vw, 2.6rem);
line-height:1.1;
font-weight:800;
color:var(--tt-black);
margin-bottom:1rem;
}
.reperes-copy p{
color:var(--tt-muted);
margin-bottom:1.5rem;
}
.reperes-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.75rem 1rem;
}
.reperes-list{
display:flex;
flex-direction:column;
gap:1.25rem;
}
.repere-card{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:1.1rem;
padding:1.5rem 1.5rem;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
text-align:left;
width:100%;
transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.repere-card.is-active{
border-color:var(--tt-brand);
box-shadow:0 0 0 2px var(--tt-brand-soft), var(--tt-shadow);
background:linear-gradient(0deg, rgba(204,216,41,.04), rgba(204,216,41,.04)), var(--tt-white);
transform:translateY(-2px);
}
.repere-icon{
width:40px;
height:40px;
flex:0 0 40px;
border-radius:var(--tt-radius-sm);
background:var(--tt-surface);
color:var(--tt-ink);
display:flex;
align-items:center;
justify-content:center;
font-size:1.1rem;
transition:background .25s ease, color .25s ease;
}
.repere-card.is-active .repere-icon{
background:var(--tt-brand);
color:var(--tt-brand-ink);
}
.page-membres .avatar-square{
width:46px;
height:46px;
border-radius:0;
margin:0;
}
.page-membres .mobile-recent-carousel .carousel-control-prev,
.page-membres .mobile-recent-carousel .carousel-control-next,
.page-apropos .mobile-recent-carousel .carousel-control-prev,
.page-apropos .mobile-recent-carousel .carousel-control-next{
width:12%;
}
/* ═══════════════════════════════════════════════════════════
PAGE MEMBRES — bascule carousel ↔ grille
═══════════════════════════════════════════════════════════
Bootstrap natif ne propose pas de breakpoint entre xs (0)
et sm (576). On utilise un breakpoint custom à 500px pour
gérer correctement Surface Duo (540) et autres devices
compris entre 500 et 575px qui doivent voir la grille 2-col.
Règles :
• 0-499px → carousel (1 carte à la fois)
• 500px+ → grille (col-6 → 2 cartes, col-xl-4 → 3 cartes)
*/
.members-mobile-carousel{ display:block; }
.members-desktop-grid{ display:none; }
@media (min-width: 500px){
.members-mobile-carousel{ display:none !important; }
.members-desktop-grid{ display:flex !important; }
}
.page-membres .mobile-recent-carousel .carousel-control-prev-icon,
.page-membres .mobile-recent-carousel .carousel-control-next-icon,
.page-apropos .mobile-recent-carousel .carousel-control-prev-icon,
.page-apropos .mobile-recent-carousel .carousel-control-next-icon{
filter:invert(1) grayscale(1) contrast(1.3);
}
.page-membres .mobile-recent-carousel .carousel-indicators [data-bs-target],
.page-apropos .mobile-recent-carousel .carousel-indicators [data-bs-target]{
width:8px;
height:8px;
border-radius:50%;
border:0;
opacity:.4;
background:var(--tt-black);
}
.page-membres .mobile-recent-carousel .carousel-indicators .active,
.page-apropos .mobile-recent-carousel .carousel-indicators .active{
opacity:1;
background:var(--tt-brand);
}
/* ─── Carousels mobile/tablette : #membresActifsCarousel + #equipeAdminCarousel
Flèches vertes solides + compteur "X / N" dans une toolbar
placée SOUS le carousel (meilleure lisibilité sur fond clair
que les boutons glassy en overlay). Mutualisé entre la page
« Nos membres » (20_archive-membre) et la section « Équipe
administrative » (02_a-propos). ──────────────────────────── */
#membresActifsCarousel,
#equipeAdminCarousel{ position:relative; }
#membresActifsCarousel .carousel-inner,
#equipeAdminCarousel .carousel-inner{ overflow:hidden; }
/* Toutes les cards à la même hauteur : min-height généreux qui
absorbe les bios les plus longues + photo + icônes sociales. */
#membresActifsCarousel .carousel-item .card-clean{
min-height:540px;
display:flex;
flex-direction:column;
}
/* Équipe administrative : la card team-card a un layout différent
(photo carrée + h3 + rôle + description). On lui donne un min-height
adapté à son contenu, légèrement plus court que membres actifs. */
#equipeAdminCarousel .carousel-item .card-clean{
min-height:460px;
display:flex;
flex-direction:column;
}
/* Toolbar — barre horizontale flèche-gauche / compteur / flèche-droite */
#membresActifsCarousel .membres-carousel-toolbar,
#equipeAdminCarousel .membres-carousel-toolbar{
gap:1rem;
padding:0 .25rem;
}
/* Boutons flèche : pas de styles Bootstrap par défaut, on construit
un bouton transparent qui contient un cercle plein vert.
Surcharge les .carousel-control-prev/next n'existe pas ici car on
utilise juste .membres-control sans ces classes. */
#membresActifsCarousel .membres-control,
#equipeAdminCarousel .membres-control{
background:transparent;
border:0;
padding:.25rem;
cursor:pointer;
line-height:0; /* évite la ligne de base parasite */
}
#membresActifsCarousel .membres-control .control-circle,
#equipeAdminCarousel .membres-control .control-circle{
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
border-radius:50%;
background:var(--tt-brand);
color:var(--tt-brand-ink);
font-size:1.05rem;
border:0;
transition:background .22s ease, transform .22s ease, box-shadow .22s ease;
box-shadow:0 2px 6px rgba(0,0,0,.06);
}
#membresActifsCarousel .membres-control:hover .control-circle,
#membresActifsCarousel .membres-control:focus-visible .control-circle,
#equipeAdminCarousel .membres-control:hover .control-circle,
#equipeAdminCarousel .membres-control:focus-visible .control-circle{
background:var(--tt-brand-ink);
color:var(--tt-brand);
transform:scale(1.05);
box-shadow:0 4px 12px rgba(0,0,0,.12);
}
#membresActifsCarousel .membres-control:focus,
#equipeAdminCarousel .membres-control:focus{
outline:none;
}
#membresActifsCarousel .membres-control:focus-visible,
#equipeAdminCarousel .membres-control:focus-visible{
outline:2px solid var(--tt-brand);
outline-offset:3px;
border-radius:50%;
}
/* Compteur "X / N" — typographie discrète mais lisible */
#membresActifsCarousel .membres-counter,
#equipeAdminCarousel .membres-counter{
font-size:.95rem;
font-weight:600;
color:var(--tt-black);
letter-spacing:.02em;
font-variant-numeric:tabular-nums; /* chiffres alignés, pas de saut */
}
#membresActifsCarousel .membres-counter .text-muted,
#equipeAdminCarousel .membres-counter .text-muted{
margin:0 .25rem;
}
.repere-body h3{
font-size:1.1rem;
font-weight:700;
color:var(--tt-black);
margin:0 0 .3rem;
}
.repere-body p{
margin:0;
color:var(--tt-muted);
font-size:.95rem;
}
/* ═══════════════════════════════════════════════════════════
MOUVEMENT (3 cartes de parcours)
═══════════════════════════════════════════════════════════ */
.path-card{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:1.75rem;
height:100%;
display:flex;
flex-direction:column;
align-items:flex-start;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
/* Position relative pour ancrer le lien étendu (stretched link). */
position:relative;
cursor:pointer;
}
.path-card .text-link-arrow{
margin-top:auto;
/* CRITIQUE — pas de position ici ! Le ::after de ce lien doit
remonter jusqu'à .path-card (qui est position:relative) pour
recouvrir toute la carte. Si le lien avait position:relative,
le ::after ne couvrirait que la zone du lien. */
}
/* Stretched link : le `::after` du lien recouvre toute la carte parente.
Toute la surface devient cliquable. */
.path-card .text-link-arrow::after{
content:"";
position:absolute;
inset:0;
z-index:1;
border-radius:var(--tt-radius);
}
/* Contenu textuel/icône au-dessus du pseudo, pour rester sélectionnable.
IMPORTANT — on EXCLUT .text-link-arrow ici : son position:static est
nécessaire pour que son ::after remonte à .path-card. */
.path-card .path-icon,
.path-card h3,
.path-card p{
position:relative;
z-index:2;
}
.path-card:hover{
transform:translateY(-3px);
box-shadow:var(--tt-shadow-lg);
border-color:var(--tt-brand);
}
/* Anneau de focus clavier visible sur la carte entière (accessibilité). */
.path-card:focus-within{
outline:2px solid var(--tt-brand);
outline-offset:3px;
}
/* ═══════════════════════════════════════════════════════════
HERO — deux colonnes dans un panneau surface
═══════════════════════════════════════════════════════════ */
.hero{
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.14), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
}
/* Desktop (≥992px) : 2 colonnes — gauche (titre + actions empilés),
droite (texte). Areas explicites pour le placement. */
.hero-grid{
display:grid;
grid-template-columns:1.05fr 1fr;
grid-template-areas:
"title text"
"actions text";
grid-template-rows:auto 1fr;
column-gap:clamp(2rem, 5vw, 5rem);
row-gap:1.5rem;
align-items:start;
}
.hero-title { grid-area:title; }
.hero-text { grid-area:text; align-self:center; }
.hero-actions{ grid-area:actions; }
/* Tablette / mobile (<992px) : 1 colonne, ordre titre → texte → actions */
@media (max-width: 991.98px){
.hero-grid{
grid-template-columns:1fr;
grid-template-areas:
"title"
"text"
"actions";
row-gap:1.25rem;
}
.hero-text{ align-self:start; }
}
.hero .eyebrow{
color:var(--tt-brand-ink);
background:var(--tt-brand-soft);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.hero h1{
font-size:clamp(2.25rem, 4.2vw, 4rem);
line-height:1.04;
font-weight:800;
margin-bottom:1.25rem;
color:var(--tt-black);
letter-spacing:-.01em;
}
/* Conserve la compatibilité avec l'ancien .hero-copy p et applique
aussi le style aux nouveaux conteneurs .hero-text / .persona-hero__text. */
.hero-copy p,
.hero-text p,
.persona-hero__text p{
color:var(--tt-muted);
font-size:1.05rem;
margin-bottom:1.75rem;
}
.persona-hero__text p:last-child{ margin-bottom:0; }
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:.75rem 1rem;
margin-top:.5rem;
}
@media (min-width: 992px){
/* On desktop : un peu plus d'air entre le titre et les boutons */
.hero-actions{ margin-top:1.5rem; }
}
/* ═══════════════════════════════════════════════════════════
MOSAÏQUE — Ce que tu peux faire (artists-mosaic)
═══════════════════════════════════════════════════════════ */
.artists-mosaic .section-heading{
max-width:760px;
margin:0 auto 2.5rem;
}
.artists-mosaic .section-heading .eyebrow{
margin:0 0 .8rem;
font-size:.72rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--color-text-soft);
}
.artists-mosaic .section-heading .section-title{
margin:0 0 1rem;
font-size:clamp(1.9rem, 3.5vw, 3.4rem);
line-height:1.08;
font-weight:800;
color:var(--color-text);
}
.artists-mosaic .section-heading .section-lead{
color:var(--color-text-soft);
margin-bottom:1rem;
}
.artists-mosaic-row{
--bs-gutter-y:1.5rem;
}
/* Cartes neutres, arêtes franches */
.card-clean{
border:1px solid var(--color-border);
background:#fff;
height:100%;
display:flex;
flex-direction:column;
min-height:100%;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card-clean:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.06);
border-color:#c9c9c9;
}
.card-clean-body{
padding:1.5rem;
display:flex;
flex-direction:column;
flex:1 1 auto;
}
.card-clean-body > p{
color:var(--color-text-soft);
margin-bottom:1rem;
}
.card-clean-body h3{
color:var(--color-text);
}
.card-clean-body .eyebrow{
margin:0 0 .8rem;
font-size:.72rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--color-text-soft);
}
/* Variantes de taille */
.mosaic-card-large{
--placeholder-min-h:290px;
--placeholder-radius:0;
}
.mosaic-card-large .placeholder-media{
border-bottom:1px solid var(--color-border);
}
.mosaic-card-small .card-clean-body{ min-height:250px; }
.mosaic-card-mixed{
--placeholder-min-h:180px;
--placeholder-radius:0;
}
.mosaic-card-mixed .placeholder-media{
border-bottom:1px solid var(--color-border);
}
.mosaic-card-medium .card-clean-body{ min-height:220px; }
@media (min-width: 992px) {
.mosaic-card-large {
min-height: 555px;
}
.mosaic-card-medium .card-clean-body {
min-height: 240px;
}
.mosaic-card-mixed {
min-height: 630px;
}
}
.artists-mosaic.mosaic-type-1 .section-heading{
margin-bottom:2.5rem;
}
.artists-mosaic.mosaic-compact.section-padding{
padding:56px 0;
}
.artists-mosaic.mosaic-compact .section-heading{
margin-bottom:2rem;
}
.artists-mosaic.mosaic-compact .card-clean-body{
padding:1.25rem;
}
.artists-mosaic.mosaic-compact .mosaic-card-large{ --placeholder-min-h:240px; }
.artists-mosaic.mosaic-compact .mosaic-card-small .card-clean-body{
min-height:210px;
}
.artists-mosaic.mosaic-compact .mosaic-card-medium .card-clean-body{
min-height:190px;
}
.artists-mosaic.mosaic-compact .mosaic-card-mixed{ --placeholder-min-h:150px; }
@media (min-width: 992px) {
.artists-mosaic.mosaic-type-1 .mosaic-card-large {
min-height: 555px;
}
.artists-mosaic.mosaic-type-1 .mosaic-card-medium .card-clean-body {
min-height: 240px;
}
.artists-mosaic.mosaic-type-1 .mosaic-card-mixed {
min-height: 630px;
}
.artists-mosaic.mosaic-compact .mosaic-card-large {
min-height: 500px;
}
.artists-mosaic.mosaic-compact .mosaic-card-medium .card-clean-body {
min-height: 200px;
}
.artists-mosaic.mosaic-compact .mosaic-card-mixed {
min-height: 520px;
}
}
/* Icône dans un carré à bordure */
.icon-circle{
width:42px;
height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
background: var(--tt-brand-soft);
margin-bottom:1rem;
color:var(--color-text);
font-size:1rem;
}
/* Actions alignées en bas de carte */
.content-actions{
display:flex;
flex-wrap:wrap;
gap:.9rem 1rem;
align-items:center;
margin-top:1.5rem;
}
/* Boutons spécifiques à la mosaïque */
.btn-primary-black{
border-radius:0;
box-shadow:none;
font-weight:600;
padding:.55rem .85rem;
background:var(--color-black);
border:1px solid var(--color-black);
color:#fff;
transition:background .2s ease, color .2s ease;
}
.btn-primary-black:hover,
.btn-primary-black:focus-visible{
background:#000;
color:#fff;
}
.btn-outline-minimal{
border-radius:0;
box-shadow:none;
font-weight:600;
padding:.55rem .85rem;
background:transparent;
border:1px solid var(--color-border);
color:var(--color-text);
transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-outline-minimal:hover,
.btn-outline-minimal:focus-visible{
background:var(--color-black);
border-color:var(--color-black);
color:#fff;
}
/* Lien fléché */
.link-arrow{
display:inline-flex;
align-items:center;
gap:.4rem;
font-weight:600;
color:var(--color-text);
text-decoration:none;
transition:gap .2s ease, color .2s ease;
}
.link-arrow:hover,
.link-arrow:focus-visible{
color:var(--tt-brand-ink);
gap:.65rem;
}
.link-arrow-hover-green:hover,
.link-arrow-hover-green:focus-visible{
text-decoration:underline;
text-decoration-color:var(--tt-brand);
text-underline-offset:.2em;
text-decoration-thickness:2px;
}
/* Mosaïque artistes : coins carrés + hauteur dédiée. La couleur a
été harmonisée le 12 mai 2026 (avant : #d3d3d3 plus foncé). */
.artists-mosaic{
--placeholder-radius:0;
--placeholder-min-h:180px;
}
/* ═══════════════════════════════════════════════════════════
TWO-COL SECTIONS (ateliers, labos, adhésion)
═══════════════════════════════════════════════════════════ */
.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2rem, 4.5vw, 5rem);
align-items:center;
}
.two-col h2{
font-size:clamp(1.8rem, 2.9vw, 2.6rem);
line-height:1.1;
font-weight:800;
color:var(--tt-black);
margin-bottom:1rem;
}
.two-col p{
color:var(--tt-muted);
margin-bottom:1.5rem;
}
.feature-check-list{
list-style:none;
margin:0 0 1.5rem;
padding:0;
}
.feature-check-list .bi{
color:var(--tt-brand);
}
.two-col-actions{
display:flex;
flex-wrap:wrap;
gap:.75rem 1rem;
align-items:center;
}
.two-col{ --placeholder-min-h:420px; }
/* En mobile, on réduit la hauteur via override de la variable (cf. media queries
plus bas, lignes ~5559, ~5589, ~5627 — 3 occurrences identiques laissées en
place car groupées avec d'autres règles spécifiques par page). */
/* ═══════════════════════════════════════════════════════════
TÉMOIGNAGES
═══════════════════════════════════════════════════════════ */
.testimonial-card{
text-align:center;
padding:1.25rem;
height:100%;
display:flex;
flex-direction:column;
}
/* Témoignages — avatar + nom + rôle alignés en bas de carte */
.testimonial-card{
display: flex;
flex-direction: column;
height: 100%;
}
.testimonial-card .testimonial-avatar{
margin-top: auto;
}
.testimonial-card .testimonial-name{
margin-bottom: .15rem;
}
.testimonial-card .testimonial-role{
margin-bottom: 0;
}
.testimonial-quote{
font-size:1rem;
color:var(--tt-text);
margin-bottom:auto;
line-height:1.55;
}
.testimonial-avatar{
width:52px;
height:52px;
border-radius:50%;
background:var(--tt-surface-2);
margin:0 auto .75rem;
border:1px solid var(--tt-line);
}
.testimonial-name{
font-size:.98rem;
font-weight:700;
margin:0 0 .15rem;
color:var(--tt-black);
}
.testimonial-role{
margin:0;
font-size:.88rem;
color:var(--tt-muted);
}
/* ─── Témoignages — carousel scroll-snap (mobile + iPad) ─────
Visible uniquement <992px (la grille .row d-lg-flex prend le
relais sur desktop). Le scroll-snap natif donne un comportement
« carousel » sans JS : l'utilisateur swipe horizontalement et
les cartes s'alignent automatiquement sur la grille.
• Mobile (<768px) : 1 témoignage visible (flex-basis 90%
avec peek du suivant)
• iPad (768-991) : 2 témoignages visibles (flex-basis 50% - gap)
*/
.temoignages-scroller{
overflow-x:auto;
overflow-y:hidden;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
/* Cache la scrollbar sans désactiver le scroll */
scrollbar-width:none;
/* Débord léger pour le peek du dernier item */
margin:0 -0.75rem;
padding:0.25rem 0.75rem 1rem;
}
.temoignages-scroller::-webkit-scrollbar{ display:none; }
.temoignages-track{
display:flex;
gap:1rem;
}
.temoignages-slide{
scroll-snap-align:start;
/* Mobile par défaut : 1 par vue avec peek du suivant à droite */
flex:0 0 calc(90% - 0.5rem);
min-width:0;
}
.temoignages-slide .testimonial-card{
height:100%;
}
@media (min-width: 576px) and (max-width: 767.98px){
/* Mobile large : peek réduit pour profiter de la largeur */
.temoignages-slide{ flex:0 0 calc(85% - 0.5rem); }
}
@media (min-width: 768px) and (max-width: 991.98px){
/* iPad : 2 témoignages visibles à la fois */
.temoignages-slide{ flex:0 0 calc(50% - 0.5rem); }
}
/* ═══════════════════════════════════════════════════════════
CTA
═══════════════════════════════════════════════════════════ */
.cta-panel{
max-width:900px;
margin:0 auto;
text-align:center;
}
.cta-panel{ --placeholder-min-h:340px; }
.cta-panel .placeholder-media{ margin-top:2.5rem; }
.cta-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.75rem 1rem;
margin-top:.5rem;
}
/* ═══════════════════════════════════════════════════════════
FAQ DYNAMIQUE
═══════════════════════════════════════════════════════════ */
.faq-header{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:2rem;
flex-wrap:wrap;
margin-bottom:2.5rem;
}
.faq-header .faq-title{
max-width:620px;
}
.faq-header h2{
font-size:clamp(1.9rem, 3vw, 2.8rem);
line-height:1.08;
font-weight:800;
color:var(--tt-black);
margin:0;
}
.faq-header .eyebrow{
margin-bottom:.65rem;
}
.faq-controls{
display:flex;
gap:.65rem;
flex-wrap:wrap;
}
.faq-ctrl{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:.65rem 1.1rem;
font-size:.9rem;
font-weight:600;
color:var(--tt-black);
cursor:pointer;
transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.faq-ctrl:hover,
.faq-ctrl:focus{
background:var(--tt-surface);
border-color:#cfcfcf;
outline:none;
}
.faq-ctrl[aria-pressed="true"]{
background:var(--tt-black);
border-color:var(--tt-black);
color:var(--tt-white);
}
.faq-ctrl:disabled{
opacity:.45;
cursor:not-allowed;
}
.faq-list{
display:flex;
flex-direction:column;
gap:0;
border-top:1px solid var(--tt-line);
}
.faq-item{
border-bottom:1px solid var(--tt-line);
padding:1.25rem 0;
}
.faq-question{
display:grid;
grid-template-columns:64px 1fr 44px;
align-items:center;
gap:1.25rem;
width:100%;
background:transparent;
border:0;
padding:.5rem 0;
text-align:left;
cursor:pointer;
color:var(--tt-black);
}
.faq-question:focus-visible{
outline:none;
box-shadow:var(--tt-focus);
border-radius:var(--tt-radius-sm);
}
.faq-number{
font-size:.95rem;
font-weight:600;
color:var(--tt-muted);
letter-spacing:.02em;
font-variant-numeric:tabular-nums;
}
.faq-text{
font-size:clamp(1rem, 1.3vw, 1.15rem);
font-weight:700;
color:var(--tt-black);
line-height:1.35;
}
.faq-toggle{
width:44px;
height:44px;
border-radius:var(--tt-radius-sm);
background:var(--tt-black);
color:var(--tt-white);
display:flex;
align-items:center;
justify-content:center;
justify-self:end;
font-size:1.15rem;
transition:background .2s ease, transform .25s ease;
}
.faq-question:hover .faq-toggle,
.faq-question:focus-visible .faq-toggle{
background:var(--tt-brand-dark);
}
.faq-item.is-open .faq-toggle{
transform:rotate(45deg);
background:var(--tt-brand);
color:var(--tt-brand-ink);
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .35s ease, opacity .3s ease, padding .3s ease;
opacity:0;
padding:0 0 0 calc(64px + 1.25rem);
}
.faq-answer-inner{
color:var(--tt-muted);
font-size:.98rem;
padding-top:.75rem;
padding-right:3.5rem;
}
.faq-item.is-open .faq-answer{
max-height:800px;
opacity:1;
padding-bottom:.5rem;
}
.faq-help{
margin-top:3rem;
padding:2rem;
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
background:var(--tt-white);
}
.faq-help h3{
font-size:1.15rem;
font-weight:700;
color:var(--tt-black);
margin:0 0 .5rem;
}
.faq-help p{
color:var(--tt-muted);
margin-bottom:1.25rem;
}
.faq-help-actions{
display:flex;
flex-wrap:wrap;
gap:.75rem 1rem;
}
.reveal.delay-5{ transition-delay:.40s; }
.reveal-left{
opacity:0;
transform:translateX(-32px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal-right{
opacity:0;
transform:translateX(32px);
transition:opacity .7s ease, transform .7s ease;
}
.reveal-left.is-visible,
.reveal-right.is-visible{
opacity:1;
transform:translateX(0);
}
/* ═══════════════════════════════════════════════════════════
HERO — reprend la classe .artist-hero de 04_artistes.html
═══════════════════════════════════════════════════════════ */
.artist-hero{
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.14), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
}
/* ═══════════════════════════════════════════════════════════
NOS ATELIERS — mosaïque (wireframe)
═══════════════════════════════════════════════════════════ */
.atelier-card{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
overflow:hidden;
display:flex;
flex-direction:column;
height:100%;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.atelier-card:hover{
transform:translateY(-3px);
box-shadow:var(--tt-shadow-lg);
border-color:#cfcfcf;
}
.atelier-card{
--placeholder-border:0;
--placeholder-radius:0;
}
.atelier-card .placeholder-media{
border-bottom:1px solid var(--tt-line);
flex:1 1 auto;
}
.atelier-card-large{ --placeholder-min-h:380px; }
.atelier-card-small{ --placeholder-min-h:180px; }
.atelier-card-body{
padding:1.5rem;
display:flex;
flex-direction:column;
gap:.5rem;
}
.atelier-card-body h3{
font-size:1.3rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 .5rem;
line-height:1.2;
}
.atelier-card-small .atelier-card-body h3{
font-size:1.15rem;
}
.atelier-card-body p{
color:var(--tt-muted);
font-size:.95rem;
margin-bottom:1rem;
}
.atelier-card-actions{
display:flex;
flex-wrap:wrap;
gap:.65rem .75rem;
margin-top:auto;
}
/* ═══════════════════════════════════════════════════════════
TWO-COL — Des espaces pensés pour la création
═══════════════════════════════════════════════════════════ */
.two-col{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(2rem, 4.5vw, 5rem);
align-items:center;
}
/* ═══════════════════════════════════════════════════════════
AVANTAGES — reprend EXACTEMENT .reperes-* de 03_historique.html
═══════════════════════════════════════════════════════════ */
.reperes-layout{
display:grid;
grid-template-columns:1fr 1.25fr;
gap:4rem;
align-items:start;
}
/* ═══════════════════════════════════════════════════════════
CTA — Prêt à créer
═══════════════════════════════════════════════════════════ */
.cta-panel{
max-width:900px;
margin:0 auto;
text-align:center;
}
/* ═══════════════════════════════════════════════════════════
GALERIE PHOTO — page ateliers
═══════════════════════════════════════════════════════════ */
.atelier-gallery{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
align-items:start;
}
.atelier-gallery-col{
display:flex;
flex-direction:column;
gap:1rem;
}
.atelier-gallery-item{
border-radius:0;
border:0;
flex:0 0 auto;
}
.atelier-gallery-tall{
height:360px;
}
.atelier-gallery-small{
height:180px;
}
@media (max-width: 767.98px){
.atelier-gallery{
grid-template-columns:1fr;
}
.atelier-gallery-tall{
height:260px;
}
.atelier-gallery-small{
height:180px;
}
}
.atelier-gallery .gallery-extra {
display: none !important;
}
.atelier-gallery.is-expanded .gallery-extra {
display: block !important;
}
.skip-link{
position:absolute; left:-9999px; top:0; z-index:1000;
background:#000; color:#fff; padding:.75rem 1rem; text-decoration:none;
}
.btn-light-ghost{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.35);
color:var(--tt-white);
}
.btn-light-ghost:hover, .btn-light-ghost:focus{
background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.55);
color:var(--tt-white);
}
/* ═══════════════════════════════════════════════════════════
HERO — classe .artist-hero reprise de 05_ateliers-artistes.html
═══════════════════════════════════════════════════════════ */
.artist-hero{
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.14), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
}
/* ═══════════════════════════════════════════════════════════
NIVEAUX D'ADHÉSION — pricing cards (PAS d'effet hover)
═══════════════════════════════════════════════════════════ */
.pricing-toggle{
display:inline-flex;
gap:.25rem;
padding:.35rem;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:999px;
margin:0 auto 2.5rem;
}
.pricing-toggle-wrap{
display:flex;
justify-content:center;
margin-bottom:2.5rem;
}
.pricing-toggle button{
border:0;
background:transparent;
padding:.55rem 1.25rem;
font-size:.88rem;
font-weight:600;
color:var(--tt-muted);
border-radius:999px;
cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.pricing-toggle button[aria-pressed="true"]{
background:var(--tt-black);
color:var(--tt-white);
}
.pricing-toggle button:focus-visible{
outline:none;
box-shadow:var(--tt-focus);
}
.pricing-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1.25rem;
}
.pricing-grid-second{
grid-template-columns:repeat(2, 1fr);
max-width:820px;
margin:1.25rem auto 0;
}
.pricing-card{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:1.75rem 1.5rem;
display:flex;
flex-direction:column;
height:100%;
transition:opacity .2s ease, filter .2s ease;
}
.page-adhesion .pricing-card.is-dimmed{
opacity:.45;
filter:grayscale(.35);
}
.pricing-card-title{
font-size:.92rem;
font-weight:600;
color:var(--tt-text);
margin:0 0 1.25rem;
line-height:1.4;
min-height:2.8em;
}
.pricing-price{
font-size:clamp(1.75rem, 3vw, 2.25rem);
font-weight:800;
color:var(--tt-black);
margin:0 0 1.25rem;
line-height:1;
letter-spacing:-.02em;
}
.pricing-price .pricing-price-unit{
font-size:.85rem;
font-weight:600;
color:var(--tt-muted);
margin-left:.15rem;
}
.pricing-features{
list-style:none;
margin:0 0 1.75rem;
padding:0;
display:flex;
flex-direction:column;
gap:.65rem;
flex:1 1 auto;
}
.pricing-features li{
display:flex;
align-items:flex-start;
gap:.6rem;
font-size:.9rem;
color:var(--tt-text);
line-height:1.45;
}
.pricing-features i{
color:var(--tt-brand-dark);
flex:0 0 auto;
margin-top:.15rem;
font-size:.9rem;
}
.pricing-cta{
display:block;
text-align:center;
background:var(--tt-black);
color:var(--tt-white);
padding:.75rem 1rem;
border-radius:var(--tt-radius-sm);
font-weight:600;
font-size:.9rem;
text-decoration:none;
border:1px solid var(--tt-black);
cursor:pointer;
}
.pricing-cta:hover,
.pricing-cta:focus{
background:#000;
color:var(--tt-white);
outline:none;
}
/* ═══════════════════════════════════════════════════════════
AVANTAGES — 5 tuiles (pas d'effet hover)
═══════════════════════════════════════════════════════════ */
.benefits-grid{
display:grid;
grid-template-columns:1fr 1.3fr 1fr;
grid-template-rows:auto auto;
gap:1.25rem;
}
.benefit-card{
padding:1.5rem;
display:flex;
flex-direction:column;
gap:.55rem;
}
.benefit-card h3{
font-size:1.05rem;
font-weight:700;
color:var(--tt-black);
margin:0;
line-height:1.25;
}
.benefit-card p{
margin:0;
color:var(--tt-muted);
font-size:.92rem;
line-height:1.5;
}
.benefit-icon{
width:60px; height:60px;
border-radius:var(--tt-radius-sm);
background:var(--tt-surface);
color:var(--tt-ink);
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
margin-bottom:.25rem;
}
/* Tuile centrale (image placeholder) */
.benefit-center{
grid-column:2;
grid-row:1 / span 2;
position:relative;
background:#dcdcdc;
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
overflow:hidden;
min-height:320px;
}
/* Anciens placeholders décoratifs (rectangle + cercle au centre) retirés —
la photo réelle du bâtiment rend ces formes obsolètes. */
/* ═══════════════════════════════════════════════════════════
CONDITIONS D'ADMISSIBILITÉ — liste 2 colonnes, sans hover
═══════════════════════════════════════════════════════════ */
.conditions-grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:1.25rem 2rem;
}
.condition-item{
padding:1.5rem;
display:flex;
flex-direction:column;
gap:.4rem;
}
.condition-item h3{
font-size:1rem;
font-weight:700;
color:var(--tt-black);
margin:0;
display:flex;
align-items:center;
gap:.55rem;
}
.condition-item h3 i{
color:var(--tt-brand-dark);
font-size:1.5rem;
}
.condition-item p{
margin:0;
color:var(--tt-muted);
font-size:.92rem;
line-height:1.55;
}
/* ═══════════════════════════════════════════════════════════
COMMENCER — CTA simple
═══════════════════════════════════════════════════════════ */
.start-panel{
max-width:720px;
margin:0 auto;
text-align:center;
}
.start-panel h2{
font-size:clamp(1.9rem, 3vw, 2.75rem);
font-weight:800;
color:var(--tt-black);
margin-bottom:.75rem;
}
.start-panel p{
color:var(--tt-muted);
font-size:1rem;
margin-bottom:2rem;
}
.start-panel .btn{
padding:.85rem 1.75rem;
font-size:1rem;
}
.start-footnote{
margin-top:1.25rem;
font-size:.85rem;
color:var(--tt-muted);
}
/* ═══════════════════════════════════════════════════════════
PROFIL NON CONFORME — encart informatif
═══════════════════════════════════════════════════════════ */
.non-match-panel{
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:2rem;
}
.non-match-panel h3{
font-size:1.2rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 .5rem;
}
.non-match-panel p{
color:var(--tt-muted);
margin:0 0 1.25rem;
max-width:740px;
}
.non-match-actions{
display:flex;
flex-wrap:wrap;
gap:.75rem 1rem;
}
/* ═══════════════════════════════════════════════════════════
MODAL ADHÉSION — 4 écrans + ligne de progression
═══════════════════════════════════════════════════════════ */
.tt-modal{
position:fixed;
inset:0;
background:rgba(17,17,17,.55);
z-index:1050;
display:flex;
align-items:flex-start;
justify-content:center;
padding:clamp(1rem, 4vh, 3rem) 1rem;
overflow-y:auto;
opacity:0;
visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
.tt-modal[aria-hidden="false"]{
opacity:1;
visibility:visible;
}
.tt-modal-dialog{
background:var(--tt-white);
border-radius:var(--tt-radius);
max-width:640px;
width:100%;
padding:2rem clamp(1.25rem, 3vw, 2.5rem) 2rem;
box-shadow:var(--tt-shadow-lg);
transform:translateY(16px);
transition:transform .3s ease;
position:relative;
}
.tt-modal[aria-hidden="false"] .tt-modal-dialog{
transform:translateY(0);
}
.tt-modal-close{
position:absolute;
top:.85rem; right:.85rem;
width:36px; height:36px;
border-radius:var(--tt-radius-sm);
border:1px solid var(--tt-line);
background:var(--tt-white);
color:var(--tt-text);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
transition:background .15s ease, color .15s ease;
}
.tt-modal-close:hover,
.tt-modal-close:focus{
background:var(--tt-surface);
color:var(--tt-black);
outline:none;
}
/* Ligne de progression dynamique */
.tt-progress{
position:relative;
display:flex;
justify-content:space-between;
align-items:center;
margin:0 auto 1.75rem;
padding:0 .25rem;
max-width:100%;
}
.tt-progress::before{
content:"";
position:absolute;
left:14px; right:14px;
top:50%;
height:2px;
background:var(--tt-surface-2);
transform:translateY(-50%);
z-index:0;
}
.tt-progress-fill{
position:absolute;
left:14px;
top:50%;
height:2px;
background:var(--tt-brand);
transform:translateY(-50%);
z-index:1;
transition:width .35s ease;
}
.tt-step-dot{
position:relative;
z-index:2;
width:28px; height:28px;
border-radius:50%;
background:var(--tt-white);
border:2px solid var(--tt-line);
color:var(--tt-muted);
font-size:.78rem;
font-weight:700;
display:flex; align-items:center; justify-content:center;
transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.tt-step-dot[data-state="active"]{
background:var(--tt-brand);
border-color:var(--tt-brand);
color:var(--tt-brand-ink);
}
.tt-step-dot[data-state="done"]{
background:var(--tt-brand);
border-color:var(--tt-brand);
color:var(--tt-brand-ink);
}
.tt-modal-panel{
display:none;
}
.tt-modal-panel.is-active{
display:block;
}
.tt-modal-panel h3{
font-size:1.25rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 1.25rem;
}
.tt-modal-panel p.subtle{
color:var(--tt-muted);
font-size:.92rem;
margin:0 0 1.25rem;
}
.form-field{
margin-bottom:1rem;
}
.form-field label,
.form-field legend{
display:block;
font-size:.8rem;
font-weight:600;
color:var(--tt-text);
margin-bottom:.35rem;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select{
width:100%;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius-sm);
padding:.65rem .85rem;
font-family:inherit;
font-size:.92rem;
color:var(--tt-text);
transition:border-color .15s ease;
}
.form-field textarea{
min-height:96px;
resize:vertical;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
border-color:#bbb;
outline:none;
}
.radio-group{
display:flex;
flex-direction:column;
gap:.5rem;
}
.radio-group label{
display:flex;
align-items:center;
gap:.55rem;
font-weight:500;
font-size:.92rem;
color:var(--tt-text);
cursor:pointer;
border:1px solid var(--tt-line);
padding:.65rem .85rem;
border-radius:var(--tt-radius-sm);
margin:0;
transition:border-color .15s ease, background .15s ease;
}
.radio-group label:hover{
border-color:#cfcfcf;
}
.radio-group input[type="radio"]{
accent-color:var(--tt-brand-dark);
}
/* ═══════════════════════════════════════════════════════════════════════
FORMULAIRES — Accessibilité radio + checkbox natifs (WCAG 2.1 AA)
Contrôles entièrement customisés via `appearance:none` pour garantir
un contraste suffisant à l'état NON COCHÉ (bordure foncée bien visible
au lieu du gris pâle natif du navigateur).
Exclut les contrôles déjà customisés (toggles cookies via appearance:none)
pour éviter les conflits visuels.
═══════════════════════════════════════════════════════════════════════ */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]),
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]){
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 1.15em;
height: 1.15em;
margin: 0 .45em 0 0;
padding: 0;
vertical-align: -.18em;
display: inline-block;
flex-shrink: 0;
background-color: #fff;
border: 2px solid var(--tt-brand-ink, #1f2300);
cursor: pointer;
transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Bordures rondes pour radio, carrées pour checkbox */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]){
border-radius: 50%;
}
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]){
border-radius: 3px;
}
/* État survol — bordure plus marquée + halo discret */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]):hover,
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]):hover{
box-shadow: 0 0 0 3px rgba(31, 35, 0, .12);
}
/* État coché — radio : point central */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]):checked{
background-color: #fff;
border-color: var(--tt-brand-ink, #1f2300);
background-image: radial-gradient(circle, var(--tt-brand-ink, #1f2300) 45%, transparent 50%);
}
/* État coché — checkbox : remplissage + crochet SVG blanc */
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]):checked{
background-color: var(--tt-brand-ink, #1f2300);
border-color: var(--tt-brand-ink, #1f2300);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
background-size: 75% 75%;
background-repeat: no-repeat;
background-position: center;
}
/* État focus clavier — outline visible (WCAG 2.4.7) */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]):focus-visible,
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]):focus-visible{
outline: 2px solid var(--tt-brand, #ccd829);
outline-offset: 2px;
}
/* État désactivé */
input[type="radio"]:not([data-cookie-pref]):not([data-cookie-action]):disabled,
input[type="checkbox"]:not([data-cookie-pref]):not([data-cookie-action]):disabled{
opacity: .55;
cursor: not-allowed;
border-color: var(--tt-muted, #6b6b6b);
}
/* Bootstrap form-check-input — alignement sur la même esthétique */
.form-check-input:not([data-cookie-pref]):not([data-cookie-action]){
border: 2px solid var(--tt-brand-ink, #1f2300);
background-color: #fff;
}
.form-check-input:not([data-cookie-pref]):not([data-cookie-action]):checked{
background-color: var(--tt-brand-ink, #1f2300);
border-color: var(--tt-brand-ink, #1f2300);
}
.form-check-input:focus,
.form-check-input:focus-visible{
outline: 2px solid var(--tt-brand, #ccd829);
outline-offset: 2px;
box-shadow: none; /* override du box-shadow bleu Bootstrap */
border-color: var(--tt-brand-ink, #1f2300);
}
.tt-modal-actions{
display:flex;
justify-content:space-between;
gap:.75rem;
margin-top:1.5rem;
flex-wrap:wrap;
}
.tt-modal-actions .btn{
min-width:120px;
}
.tt-modal-review{
background:var(--tt-surface);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius-sm);
padding:1rem 1.25rem;
font-size:.92rem;
color:var(--tt-text);
margin-bottom:1.25rem;
}
.tt-modal-review dt{
font-weight:700;
color:var(--tt-black);
margin-top:.55rem;
}
.tt-modal-review dt:first-child{ margin-top:0; }
.tt-modal-review dd{
margin:.15rem 0 0;
color:var(--tt-muted);
}
.btn-ghost-light{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.35);
color:var(--tt-white);
}
.btn-ghost-light:hover, .btn-ghost-light:focus{
background:rgba(255,255,255,.16);
border-color:rgba(255,255,255,.6);
color:var(--tt-white);
}
.placeholder-media.placeholder-dark{
background:#2a2a2a;
border-color:rgba(255,255,255,.12);
}
/* ═══════════════════════════════════════════════════════════
HERO — .artist-hero (identique à 07_adhesion-artistes.html)
═══════════════════════════════════════════════════════════ */
.artist-hero{
padding:calc(var(--tt-section) - 10px) 0;
background:
radial-gradient(ellipse at 100% 0%, rgba(204,216,41,.14), transparent 55%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
}
/* ═══════════════════════════════════════════════════════════
PAGE-HERO FONCÉ — « Appels de dossiers »
═══════════════════════════════════════════════════════════ */
.dark-hero{
background:
linear-gradient(135deg, rgba(17,17,17,.88), rgba(40,40,40,.88)),
radial-gradient(ellipse at 85% 20%, rgba(204,216,41,.22), transparent 55%);
background-color:#1a1a1a;
color:var(--tt-white);
padding:calc(var(--tt-section) - 10px) 0;
border-bottom:1px solid rgba(255,255,255,.06);
}
.dark-hero-grid{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:clamp(2rem, 5vw, 5rem);
align-items:center;
}
.dark-hero .eyebrow{
color:var(--tt-brand);
background:rgba(255,255,255,.08);
padding:.3rem .75rem;
border-radius:999px;
}
.dark-hero h2{
font-size:clamp(2rem, 3.6vw, 3rem);
line-height:1.05;
font-weight:800;
color:var(--tt-white);
margin:0 0 1.25rem;
}
.dark-hero p{
color:rgba(255,255,255,.8);
margin:0 0 1.75rem;
font-size:1rem;
max-width:560px;
}
.dark-hero-actions{
display:flex; flex-wrap:wrap; gap:.75rem 1rem;
}
.dark-hero{ --placeholder-min-h:300px; }
/* ═══════════════════════════════════════════════════════════
RÉSIDENCES — pas de carte, pas de hover, reveal on scroll
═══════════════════════════════════════════════════════════ */
.residences-layout{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:clamp(2rem, 4.5vw, 4rem);
align-items:center;
margin-bottom:3rem;
}
.residences-copy .eyebrow{ margin-bottom:.75rem; }
.residences-copy h2{
font-size:clamp(1.9rem, 3vw, 2.6rem);
line-height:1.1;
font-weight:800;
color:var(--tt-black);
margin:0 0 1rem;
}
.residences-copy p{
color:var(--tt-muted);
margin:0 0 1.25rem;
max-width:540px;
}
.residences-media{
background:#dcdcdc;
border-radius:var(--tt-radius);
border:1px solid var(--tt-line);
position:relative;
min-height:320px;
overflow:hidden;
}
.residences-media::before,
.residences-media::after{
content:""; position:absolute;
inset:50% auto auto 50%;
}
.residences-media::before{
width:76px; height:58px;
transform:translate(-50%,-50%);
border-radius:10px;
background:rgba(255,255,255,.22);
}
.residences-media::after{
width:22px; height:22px;
transform:translate(-50%,-56%);
border:3px solid rgba(255,255,255,.34);
border-radius:50%;
}
.residences-details{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(1.5rem, 3vw, 3rem);
border-top:1px solid var(--tt-line);
padding-top:2rem;
}
.residence-detail h3{
font-size:.8rem;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--tt-muted);
margin:0 0 .65rem;
}
.residence-detail h4{
font-size:1.15rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 .55rem;
line-height:1.2;
}
.residence-detail p{
color:var(--tt-muted);
margin:0 0 1rem;
font-size:.95rem;
}
/* ═══════════════════════════════════════════════════════════
SECTION ADMISSIBILITÉ — Étapes avec barre de progression verticale
À ajouter à la fin de style.css
═══════════════════════════════════════════════════════════ */
/* ── Wrapper de la liste d'étapes (sert de référence pour la barre) ── */
.section-steps .steps-progress-wrap{
position:relative;
margin-top:2.5rem;
}
/* ── Ligne verticale grise (rail) ──
Positionnée sur la frontière entre la colonne du numéro et la colonne du contenu.
Largeur de la colonne numéro = 180px (voir .step-number-col). */
.steps-progress-line{
position:absolute;
top:0;
bottom:0;
left:180px;
width:2px;
background:var(--tt-line);
z-index:1;
}
/* ── Remplissage noir qui grandit au scroll (piloté par JS) ── */
.steps-progress-fill{
position:absolute;
top:0;
left:180px;
width:2px;
height:0;
background:var(--tt-black);
z-index:2;
transition:height .15s linear;
}
/* ── Empilement des étapes ── */
.steps-stack{
position:relative;
z-index:3;
display:flex;
flex-direction:column;
}
/* ── Une étape = grille à 2 colonnes (numéro / contenu) ── */
.step-item{
display:grid;
grid-template-columns:180px 1fr;
align-items:start;
padding:2.5rem 0;
}
.step-item:first-child{ padding-top:1rem; }
.step-item:last-child{ padding-bottom:1rem; }
/* ── Colonne du numéro ── */
.step-number-col{
display:flex;
justify-content:flex-start;
padding-right:2rem;
}
.step-number{
font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
font-size:clamp(3.5rem, 6vw, 5.5rem);
font-weight:800;
line-height:1;
color:#bdbdbd; /* gris par défaut */
letter-spacing:-.02em;
transition:color .35s ease, transform .35s ease;
}
/* ── Colonne du contenu ── */
.step-content-col{
padding-left:2.5rem;
}
/* ── Petite ligne horizontale au-dessus du contenu ── */
.step-divider{
width:48px;
height:2px;
background:var(--tt-line);
margin-bottom:1.25rem;
transition:background .35s ease, width .35s ease;
}
.step-content .eyebrow{
color:var(--tt-muted);
margin-bottom:.75rem;
}
/* ── Titre de l'étape ──
Gris par défaut, devient noir une fois l'étape "is-active". */
.step-title{
font-size:clamp(1.5rem, 2.4vw, 2.25rem);
line-height:1.15;
font-weight:800;
color:#9a9a9a;
margin-bottom:1rem;
transition:color .35s ease;
}
.step-content > p{
color:#9a9a9a;
max-width:60ch;
margin-bottom:1.5rem;
transition:color .35s ease;
}
/* ── Boutons / liens dans une étape ── */
.step-content .content-actions{
display:flex;
flex-wrap:wrap;
gap:1rem 1.5rem;
align-items:center;
}
/* Bouton outline minimal (utilisé dans les étapes) */
.btn-outline-minimal{
background:transparent;
border:1px solid var(--tt-black);
color:var(--tt-black);
border-radius:var(--tt-radius-sm);
font-weight:600;
transition:background .15s ease, color .15s ease;
}
.btn-outline-minimal:hover,
.btn-outline-minimal:focus{
background:var(--tt-black);
color:var(--tt-white);
}
/* Lien "Postuler →" dans les étapes */
.step-content .link-arrow{
display:inline-flex;
align-items:center;
gap:.4rem;
font-weight:600;
text-decoration:none;
color:#9a9a9a;
transition:color .25s ease, gap .2s ease;
}
.step-content .link-arrow:hover,
.step-content .link-arrow:focus{
color:var(--tt-black);
gap:.6rem;
}
/* ─────────────────────────────────────────────────────────────
ÉTAT ACTIF — appliqué par le JS quand on scroll sur l'étape
───────────────────────────────────────────────────────────── */
.step-item.is-active .step-number{
color:var(--tt-black);
}
.step-item.is-active .step-divider{
background:var(--tt-black);
width:64px;
}
.step-item.is-active .step-title{
color:var(--tt-black);
}
.step-item.is-active .step-content > p{
color:var(--tt-text);
}
.step-item.is-active .step-content .link-arrow{
color:var(--tt-black);
}
/* ─────────────────────────────────────────────────────────────
RESPONSIVE — Mobile : pas de barre verticale, layout empilé
───────────────────────────────────────────────────────────── */
@media (max-width:767.98px){
.section-steps .steps-progress-wrap{
margin-top:1.5rem;
}
.steps-progress-line,
.steps-progress-fill{
display:none;
}
.step-item{
grid-template-columns:1fr;
padding:1.75rem 0;
gap:1rem;
}
.step-number-col{
padding-right:0;
}
.step-number{
font-size:3rem;
color:var(--tt-black); /* sur mobile : toujours noir, pas d'animation */
}
.step-content-col{
padding-left:0;
}
.step-divider{
background:var(--tt-black);
width:48px;
}
.step-title,
.step-content > p,
.step-content .link-arrow{
color:var(--tt-black); /* sur mobile : tout en noir, pas d'état actif */
}
.step-content > p{
color:var(--tt-text);
}
}
/* ─────────────────────────────────────────────────────────────
ACCESSIBILITÉ — respect du prefers-reduced-motion
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
.step-number,
.step-title,
.step-divider,
.step-content > p,
.step-content .link-arrow,
.steps-progress-fill{
transition:none;
}
}
/* ═══════════════════════════════════════════════════════════
CANDIDATURE / PROCESSUS — 4 cartes cliquables (modal)
═══════════════════════════════════════════════════════════ */
.card-grid-4{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:1.25rem;
}
.doc-card{
position:relative;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
padding:1.5rem;
text-align:left;
width:100%;
color:inherit;
text-decoration:none;
display:flex;
flex-direction:column;
gap:.6rem;
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.doc-card:hover,
.doc-card:focus-visible{
transform:translateY(-3px);
box-shadow:var(--tt-shadow-lg);
border-color:#cfcfcf;
outline:none;
color:inherit;
}
.doc-card-icon{
width:38px; height:38px;
border-radius:var(--tt-radius-sm);
background:var(--tt-surface);
color:var(--tt-ink);
display:flex; align-items:center; justify-content:center;
font-size:1.05rem;
margin-bottom:.25rem;
transition:background .2s ease, color .2s ease;
}
.doc-card:hover .doc-card-icon,
.doc-card:focus-visible .doc-card-icon{
background:var(--tt-brand);
color:var(--tt-brand-ink);
}
.doc-card h3{
font-size:1.02rem;
font-weight:800;
color:var(--tt-black);
margin:0;
line-height:1.25;
}
.doc-card p{
margin:0;
color:var(--tt-muted);
font-size:.92rem;
line-height:1.5;
}
.doc-card-cta{
margin-top:auto;
padding-top:.75rem;
font-size:.85rem;
font-weight:600;
color:var(--tt-black);
display:inline-flex; align-items:center; gap:.4rem;
}
.doc-card-cta i{
transition:transform .2s ease;
}
.doc-card:hover .doc-card-cta i,
.doc-card:focus-visible .doc-card-cta i{
transform:translate(3px, -3px);
}
.numbered-card .doc-card-num{
font-size:.8rem;
font-weight:700;
color:var(--tt-muted);
letter-spacing:.04em;
}
/* ═══════════════════════════════════════════════════════════
APPELS EN COURS — liste filtrable (sans boutons)
═══════════════════════════════════════════════════════════ */
.calls-filter{
display:flex;
align-items:center;
gap:.75rem;
margin-bottom:1.75rem;
flex-wrap:wrap;
}
.calls-filter label{
font-size:.8rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--tt-muted);
}
.calls-filter select{
appearance:none;
-webkit-appearance:none;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius-sm);
padding:.55rem 2rem .55rem .85rem;
font-size:.9rem;
font-weight:600;
color:var(--tt-black);
cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:right .75rem center;
}
.calls-list{
display:flex;
flex-direction:column;
gap:1rem;
}
.call-card{
display:grid;
grid-template-columns:180px 1fr auto;
gap:1.5rem;
align-items:center;
padding:1.25rem 1.5rem;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
text-decoration:none;
color:inherit;
cursor:pointer;
transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.call-card:hover,
.call-card:focus-visible{
transform:translateY(-2px);
box-shadow:var(--tt-shadow-lg);
border-color:var(--tt-brand);
background:linear-gradient(0deg, rgba(204,216,41,.05), rgba(204,216,41,.05)), var(--tt-white);
color:inherit;
outline:none;
}
.call-thumb{
background:#dcdcdc;
border-radius:var(--tt-radius-sm);
height:108px;
position:relative;
overflow:hidden;
}
.call-thumb::before{
content:""; position:absolute;
inset:50% auto auto 50%;
width:40px; height:30px;
transform:translate(-50%,-50%);
border-radius:6px;
background:rgba(255,255,255,.22);
}
.call-thumb::after{
content:""; position:absolute;
inset:50% auto auto 50%;
width:14px; height:14px;
transform:translate(-50%,-52%);
border:2px solid rgba(255,255,255,.34);
border-radius:50%;
}
.call-body{
display:flex;
flex-direction:column;
gap:.3rem;
}
.call-meta{
display:flex;
align-items:center;
gap:.7rem;
font-size:.78rem;
color:var(--tt-muted);
letter-spacing:.02em;
}
.call-status{
display:inline-block;
padding:.18rem .55rem;
font-size:.72rem;
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
background:var(--tt-brand-soft);
color:var(--tt-brand-ink);
border-radius:999px;
}
/* Type d'opportunité (Stage / Bénévolat / Projet ponctuel) — label secondaire
en texte uppercase fin, sans pilule, pour ne pas concurrencer visuellement
le badge de statut principal. */
.call-type{
font-size:.72rem;
font-weight:600;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--tt-muted);
}
.call-deadline{
font-size:.92rem;
font-weight:800;
color:var(--tt-black);
margin:0;
}
.call-title{
font-size:1.1rem;
font-weight:800;
color:var(--tt-black);
margin:0;
line-height:1.3;
}
.call-description{
margin:.1rem 0 0;
color:var(--tt-muted);
font-size:.92rem;
max-width:680px;
}
.call-arrow{
width:40px; height:40px;
border-radius:50%;
border:1px solid var(--tt-line);
background:var(--tt-white);
color:var(--tt-black);
display:flex; align-items:center; justify-content:center;
font-size:.95rem;
transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.call-card:hover .call-arrow,
.call-card:focus-visible .call-arrow{
background:var(--tt-brand);
border-color:var(--tt-brand);
color:var(--tt-brand-ink);
transform:translate(3px, -3px);
}
/* ═══════════════════════════════════════════════════════════
CONTACT
═══════════════════════════════════════════════════════════ */
.contact-layout{
display:grid;
grid-template-columns:1fr 1.35fr;
gap:clamp(2rem, 4vw, 4rem);
align-items:start;
}
.contact-info{
display:flex; flex-direction:column; gap:1.25rem;
}
.contact-row{
display:grid;
grid-template-columns:42px 1fr;
gap:1rem;
align-items:flex-start;
}
.contact-icon{
width:42px; height:42px;
border-radius:var(--tt-radius-sm);
background:var(--tt-surface);
color:var(--tt-ink);
display:flex; align-items:center; justify-content:center;
font-size:1.05rem;
}
.contact-row h4{
font-size:.92rem;
font-weight:700;
color:var(--tt-black);
margin:0 0 .25rem;
letter-spacing:.02em;
}
.contact-row a{
display:inline-block;
color:var(--tt-text);
font-size:.95rem;
margin-right:.75rem;
border-bottom:2px solid transparent;
text-decoration:none;
transition:border-color .15s ease;
}
.contact-row a:hover,
.contact-row a:focus{ border-bottom-color:var(--tt-brand); }
.contact-row p{
margin:0; font-size:.95rem; color:var(--tt-text);
}
.contact-map{
background:#dcdcdc;
border-radius:var(--tt-radius);
border:1px solid var(--tt-line);
min-height:320px;
position:relative;
overflow:hidden;
}
.contact-map iframe{
display:block;
width:100%;
height:100%;
min-height:320px;
border:0;
border-radius:var(--tt-radius);
}
.contact-map::before{
display: none;
content:"\F3E0";
font-family:"bootstrap-icons";
position:absolute;
inset:50% auto auto 50%;
transform:translate(-50%,-50%);
font-size:3rem;
color:rgba(255,255,255,.55);
}
/* ═══════════════════════════════════════════════════════════
MODAL GÉNÉRIQUE
═══════════════════════════════════════════════════════════ */
.tt-modal{
position:fixed;
inset:0;
background:rgba(17,17,17,.55);
z-index:1050;
display:flex;
align-items:flex-start;
justify-content:center;
padding:clamp(1rem, 4vh, 3rem) 1rem;
overflow-y:auto;
opacity:0;
visibility:hidden;
transition:opacity .25s ease, visibility .25s ease;
}
.tt-modal .eyebrow{ margin-bottom:.45rem; }
.tt-modal h3{
font-size:1.35rem;
font-weight:800;
color:var(--tt-black);
margin:0 0 .75rem;
}
.tt-modal p{
color:var(--tt-muted);
font-size:.98rem;
margin:0 0 1rem;
}
.tt-modal ul{
color:var(--tt-muted);
font-size:.95rem;
padding-left:1.25rem;
margin:0 0 1.25rem;
}
.tt-modal ul li{ margin-bottom:.45rem; }
/* Animations on scroll */
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .65s ease, transform .65s ease;
will-change:opacity, transform;
}
/* RESPONSIVE */
@media (max-width: 991.98px){
.artist-hero-grid, .dark-hero-grid,
.residences-layout, .contact-layout{
grid-template-columns:1fr;
gap:1.75rem;
}
.residences-details{
grid-template-columns:1fr;
gap:1.5rem;
}
.card-grid-4{
grid-template-columns:repeat(2, 1fr);
}
.call-card{
grid-template-columns:1fr;
padding:1.25rem;
}
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
/* ---------- Media queries ---------- */
@media (max-width: 767.98px) {
:root{
--tt-section:56px;
}
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item{
height:300px;
}
.callout-banner{
padding:3.5rem 1.25rem;
}
.callout-actions{
flex-direction:column;
align-items:stretch;
}
.partner-logos{
grid-template-columns:repeat(2, 1fr);
gap:1.5rem;
}
.footer-cols{
grid-template-columns:1fr;
}
.footer-bottom{
flex-direction:column;
align-items:flex-start;
}
.timeline-nav{
overflow-x:auto;
padding-bottom:.5rem;
}
.timeline-nav::before{
min-width:520px;
right:auto;
width:520px;
}
.timeline-step{
min-width:84px;
}
.recruit-box{
padding:1.5rem;
}
.timeline-origin{ margin-bottom:3rem; }
.timeline-entry-card{ padding:1.25rem; }
.timeline-entry-card{ --placeholder-min-h:180px; }
.artist-hero h1{ font-size:clamp(2rem, 7vw, 2.6rem); }
.faq-question{
grid-template-columns:44px 1fr 40px;
gap:.85rem;
}
.faq-toggle{ width:40px; height:40px; }
.faq-answer{ padding-left:calc(44px + .85rem); }
.faq-answer-inner{ padding-right:0; }
.cta-panel{ --placeholder-min-h:220px; }
.atelier-card-large{ --placeholder-min-h:240px; }
.labs-col-right .labs-row-top{
grid-template-columns:1fr;
}
.lab-card, .lab-card-sm, .lab-card-wide{ min-height:220px; }
.feature-columns{ grid-template-columns:1fr; }
.benefits-grid{ grid-template-columns:1fr; }
.tt-modal-dialog{ padding:1.5rem 1.25rem; }
.tt-modal-actions .btn{ min-width:0; flex:1; }
.card-grid-4{ grid-template-columns:1fr; }
.critere-head{
grid-template-columns:auto 1fr auto;
gap:1rem;
}
.critere-num{ font-size:2.25rem; }
.critere-panel-inner{
padding-left:calc(2.25rem + 1rem);
}
.call-card{
grid-template-columns:1fr;
padding:1.25rem;
}
.call-thumb{ height:150px; }
.call-arrow{ display:none; }
}
@media (prefers-reduced-motion: reduce) {
.reveal{ opacity:1; transform:none; transition:none; }
.timeline-entry.reveal{ opacity:1; transform:none; transition:none; }
.timeline-zigzag-line-fill{ transition:none; }
.reveal,
.reveal-left,
.reveal-right{
opacity:1;
transform:none;
transition:none;
}
.faq-answer,
.faq-toggle{
transition:none;
}
.reveal, .reveal-left, .reveal-right{
opacity:1;
transform:none;
transition:none;
}
.faq-answer, .faq-toggle,
.tt-progress-fill{ transition:none; }
.critere-panel, .faq-answer, .faq-toggle, .critere-toggle{ transition:none; }
}
@media (max-width: 991.98px) {
.artists-mosaic .section-heading{ margin-bottom:2rem; }
.mosaic-card-large{ --placeholder-min-h:220px; }
.mosaic-card-small .card-clean-body{ min-height:auto; }
.mosaic-card-medium .card-clean-body{ min-height:auto; }
}
@media (max-width: 575.98px) {
.artists-mosaic .section-heading{ margin-bottom:1.5rem; }
.card-clean-body{ padding:1.25rem; }
}
/* ---------- Page-specific overrides ---------- */
/* ═══════════════════════════════════════════════════════════
LABS MOSAIC — Mosaïque type 2 (ateliers / laboratoires)
Structure : 2 colonnes — colonne droite = 2 rangées (row du haut = 2 cartes)
═══════════════════════════════════════════════════════════ */
.labs-mosaic{
display:grid;
grid-template-columns:1.15fr 1fr;
gap:1.25rem;
align-items:stretch;
}
.labs-col-right{
display:grid;
grid-template-rows:1fr 1fr;
gap:1.25rem;
min-height:100%;
}
.labs-col-right .labs-row-top{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.25rem;
}
.lab-card{
position:relative;
display:flex;
flex-direction:column;
justify-content:flex-end;
overflow:hidden;
border-radius:var(--tt-radius);
border:1px solid var(--tt-line);
text-decoration:none;
color:var(--tt-white);
min-height:260px;
background-color:#2b2b2b;
background-image: var(--lab-card-image); /* ← AJOUT */
background-size:cover;
background-position:center;
background-repeat:no-repeat;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
isolation:isolate;
}
.lab-card::before{
content:"";
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 55%, rgba(0,0,0,.85) 100%);
z-index:1;
transition:background .25s ease;
}
.lab-card:hover,
.lab-card:focus-visible{
transform:translateY(-3px);
box-shadow:var(--tt-shadow-lg);
border-color:#111;
color:var(--tt-white);
outline:none;
}
.lab-card:hover::before,
.lab-card:focus-visible::before{
background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.82) 100%);
}
.lab-card-inner{
position:relative;
z-index:2;
padding:1.5rem 1.5rem 1.65rem;
display:flex;
flex-direction:column;
gap:.4rem;
}
.lab-card .eyebrow{
color:var(--tt-brand);
background:rgba(0,0,0,.25);
padding:.25rem .65rem;
border-radius:999px;
align-self:flex-start;
margin-bottom:.3rem;
}
.lab-card h3{
font-size:clamp(1.15rem, 1.9vw, 1.55rem);
line-height:1.15;
font-weight:800;
color:var(--tt-white);
margin:0 0 .35rem;
}
.lab-card p{
margin:0;
color:rgba(255,255,255,.85);
font-size:.92rem;
line-height:1.45;
}
.lab-card-arrow{
position:absolute;
top:1rem; right:1rem;
z-index:2;
width:40px; height:40px;
border-radius:50%;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.3);
display:flex; align-items:center; justify-content:center;
color:var(--tt-white);
font-size:1rem;
transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.lab-card:hover .lab-card-arrow,
.lab-card:focus-visible .lab-card-arrow{
background:var(--tt-brand);
color:var(--tt-brand-ink);
border-color:var(--tt-brand);
transform:translate(2px, -2px);
}
/* Carte large (colonne 1) */
.lab-card-large{
min-height:540px;
background-image:
linear-gradient(135deg, rgba(38,38,38,.9), rgba(0,0,0,.65)),
radial-gradient(circle at 30% 30%, rgba(204,216,41,.18), transparent 60%),
var(--lab-card-image); /* ← AJOUT */
}
.lab-card-large h3{
font-size:clamp(1.5rem, 2.4vw, 2rem);
}
.lab-card-large p{
max-width:420px;
}
.lab-card-large .lab-card-inner{
padding:2rem 2rem 2.2rem;
}
/* Carte petite (row du haut) */
.lab-card-sm{
min-height:260px;
}
/* Carte wide (row du bas) */
.lab-card-wide{
min-height:260px;
background-image:
linear-gradient(135deg, rgba(17,17,17,.92), rgba(34,34,34,.78)),
radial-gradient(circle at 80% 40%, rgba(204,216,41,.14), transparent 60%),
var(--lab-card-image);
}
/* ═══════════════════════════════════════════════════════════
MODALE ATELIERS — détail (carousel 2 colonnes)
═══════════════════════════════════════════════════════════ */
.ateliers-modal .modal-content{
border:0;
border-radius:var(--tt-radius);
overflow:hidden;
background:var(--tt-white);
}
.ateliers-modal .modal-header{
border-bottom:1px solid var(--tt-line);
padding:1rem 1.25rem;
}
.ateliers-modal .modal-title{
font-weight:700;
margin:0;
}
/* Grille 2 colonnes pour chaque slide.
Le min-height généreux évite que la modale « saute » entre les slides
(chaque slide a une copie de longueur différente — sans ce min-height
le carousel Bootstrap réajusterait sa hauteur à chaque changement). */
.atelier-modal-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
align-items:stretch;
min-height:560px;
}
/* Colonne texte — fond crème */
.atelier-modal-copy{
background:#f5f3e9;
padding:2.25rem 2.5rem 4.5rem; /* padding bas généreux pour laisser place aux flèches */
display:flex;
flex-direction:column;
gap:.75rem;
color:var(--tt-black);
}
.atelier-modal-copy .eyebrow{
color:var(--tt-brand-ink, #545d12);
background:transparent;
padding:0;
align-self:flex-start;
margin-bottom:.4rem;
font-size:.78rem;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:700;
}
.atelier-modal-copy h3{
font-size:clamp(1.35rem, 2.2vw, 1.85rem);
font-weight:800;
margin:0;
color:var(--tt-brand-vert-kaki, #545d12);
}
.atelier-modal-copy p{
margin:.25rem 0 .75rem;
color:var(--tt-muted, #4a4a4a);
line-height:1.55;
}
/* Listes par défaut dans les modales d'ateliers (puces rondes classiques).
Le :not(.feature-check-list) exclut les listes converties en crochet vert
pour qu'elles ne se voient pas ajouter de puce ronde par-dessus. */
.atelier-modal-copy ul:not(.feature-check-list){
list-style:disc;
padding-left:1.1rem;
margin:0;
}
.atelier-modal-copy ul li{
margin-bottom:.35rem;
line-height:1.5;
}
/* Override explicite pour les listes feature-check-list dans les modales :
on retire la puce ronde et le padding hérité pour laisser uniquement
l'icône bi-check2 verte gérée par .feature-check-list (ligne ~3062). */
.atelier-modal-copy ul.feature-check-list{
list-style:none;
padding-left:0;
}
/* Variante « texte seul » (slide sans image) : on étend le fond crème à toute
la largeur de la grille pour que la moitié droite ne reste pas blanche. */
.atelier-modal-grid--copy-only{
background:#f5f3e9;
}
/* Colonne image */
.atelier-modal-media{
margin:0;
position:relative;
overflow:hidden;
background:#000;
min-height:480px;
}
.atelier-modal-media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
/* Flèches de navigation — rondes, foncées, en bas à gauche */
.ateliers-modal .carousel-control-prev,
.ateliers-modal .carousel-control-next{
position:absolute;
top:auto;
bottom:1.25rem;
width:46px;
height:46px;
border-radius:50%;
background:rgba(60,60,60,.85);
opacity:1;
transition:background .2s ease;
z-index:5;
}
.ateliers-modal .carousel-control-prev{ left:1.25rem; right:auto; }
.ateliers-modal .carousel-control-next{ left:5.25rem; right:auto; }
.ateliers-modal .carousel-control-prev:hover,
.ateliers-modal .carousel-control-next:hover{
background:rgba(20,20,20,.95);
}
.ateliers-modal .carousel-control-prev-icon,
.ateliers-modal .carousel-control-next-icon{
width:18px;
height:18px;
background-size:100% 100%;
}
/* On masque les indicateurs (pastilles) — la nav par flèches suffit */
.ateliers-modal .carousel-indicators{ display:none; }
/* Responsive — empilement vertical sur mobile */
@media (max-width: 767.98px){
.atelier-modal-grid{
grid-template-columns:1fr;
min-height:auto;
}
.atelier-modal-media{ min-height:260px; order:-1; } /* image au-dessus du texte */
.atelier-modal-copy{ padding:1.5rem 1.5rem 4.25rem; }
.ateliers-modal .carousel-control-prev{ left:.75rem; }
.ateliers-modal .carousel-control-next{ left:4rem; }
}
/* page-apropos */
body.page-apropos .section-subtitle {
font-size:1rem;
color:var(--tt-muted);
margin-bottom:0;
}
body.page-apropos .btn-outline-dark {
border-color:var(--tt-line);
color:var(--tt-black);
}
/* Page À propos : override de la variable min-height via la cascade.
Les pseudo-éléments ::before/::after ont été retirés le 12 mai 2026. */
body.page-apropos { --placeholder-min-h:240px; }
body.page-apropos .hero-copy .eyebrow {
color:var(--tt-brand-ink);
background:rgba(204,216,41,.25);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
body.page-apropos .hero-copy p {
max-width:680px;
margin:0 auto;
color:var(--tt-muted);
font-size:1.05rem;
}
/* page-apropos ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.history-panel,
.stats-layout{
grid-template-columns:1fr;
}
/* === STATS RESPONSIVE — tablette/mobile ========================
On garde EXACTEMENT le layout asymétrique du desktop (stat-1
à gauche en grand, images décoratives au centre/bas, stats
secondaires à droite). On adapte juste les hauteurs et les
tailles de police pour que ça tienne dans un écran plus étroit. */
.stats-asym{
gap:0.75rem;
grid-template-rows:minmax(110px, auto) minmax(110px, auto);
}
.stat-card{
min-height:110px;
padding:0.75rem;
}
.stat-card strong{
font-size:clamp(1.4rem, 5vw, 2.2rem);
}
.stat-card span{
font-size:0.85rem;
}
.footer-brand-row{
flex-direction:column;
}
.footer-cols{
grid-template-columns:repeat(2, 1fr);
}
.footer-nl-right{
flex:1;
}
.footer-newsletter{
flex-direction:column;
}
}
/* === STATS RESPONSIVE — mobile (< 768px) =====================
Mêmes positions asymétriques que le desktop, mais cartes très
compactes pour tenir dans 375px de largeur. */
@media (max-width: 767.98px) {
.stats-asym{
gap:0.4rem;
grid-template-rows:minmax(85px, auto) minmax(85px, auto);
}
.stat-card{
min-height:85px;
padding:0.5rem 0.4rem;
}
/* Chiffre plus petit en mobile pour tenir dans une carte étroite */
.stat-card strong{
font-size:1.3rem;
margin-bottom:0.2rem;
}
/* Label encore plus petit pour éviter le wrap excessif */
.stat-card span{
font-size:0.7rem;
line-height:1.15;
}
}
/* page-accueil */
body.page-accueil .btn-outline-dark {
border-color:var(--tt-line);
color:var(--tt-black);
}
/* page-historique */
/* page-historique ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
/* Timeline zigzag → ligne à gauche, cartes à droite */
.timeline-zigzag{
padding-left:2.25rem;
}
.timeline-zigzag-line,
.timeline-zigzag-line-fill{
left:14px;
transform:none;
}
.timeline-entry{
grid-template-columns:1fr;
column-gap:0;
margin-bottom:2.5rem;
}
.timeline-entry--left .timeline-entry-card,
.timeline-entry--right .timeline-entry-card{
grid-column:1;
}
.timeline-entry-dot{
left:-2.25rem;
transform:none;
}
.timeline-entry.is-visible .timeline-entry-dot{
transform:scale(1.1);
}
.timeline-entry--left.reveal,
.timeline-entry--right.reveal{
transform:translate(24px, 16px);
}
.timeline-entry.reveal.is-visible{
transform:translate(0, 0);
}
.reperes-layout{
grid-template-columns:1fr;
gap:2.5rem;
}
.reperes-copy{ position:static; }
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
/* page-artistes */
/* page-artistes ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.artist-hero-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.two-col{
grid-template-columns:1fr;
gap:2rem;
}
.two-col{ --placeholder-min-h:280px; }
.two-col.reverse-mobile > :first-child{ order:2; }
.two-col.reverse-mobile > :last-child{ order:1; }
.faq-header{
align-items:flex-start;
}
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
/* page-ateliers */
/* page-ateliers ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.artist-hero-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.two-col{
grid-template-columns:1fr;
gap:2rem;
}
.two-col{ --placeholder-min-h:280px; }
.two-col.reverse-mobile > :first-child{ order:2; }
.two-col.reverse-mobile > :last-child{ order:1; }
.reperes-layout{
grid-template-columns:1fr;
gap:2.5rem;
}
.reperes-copy{ position:static; }
.faq-header{ align-items:flex-start; }
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
/* page-laboratoires ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.artist-hero-grid{
grid-template-columns:1fr;
gap:1.5rem;
}
.labs-mosaic{
grid-template-columns:1fr;
}
.lab-card-large{ min-height:360px; }
.two-col{
grid-template-columns:1fr;
gap:2rem;
}
.two-col{ --placeholder-min-h:280px; }
.two-col.reverse-mobile > :first-child{ order:2; }
.two-col.reverse-mobile > :last-child{ order:1; }
.reperes-layout{
grid-template-columns:1fr;
gap:2.5rem;
}
.reperes-copy{ position:static; }
.faq-header{ align-items:flex-start; }
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
/* page-adhesion */
/* page-adhesion ═══════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.artist-hero-grid{ grid-template-columns:1fr; gap:1.5rem; }
.pricing-grid,
.pricing-grid-second{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
.benefits-grid{
grid-template-columns:1fr 1fr;
grid-template-rows:auto;
}
.benefit-center{
grid-column:1 / -1;
grid-row:auto;
min-height:220px;
}
.conditions-grid{ grid-template-columns:1fr; }
.faq-header{ align-items:flex-start; }
.footer-brand-row{ flex-direction:column; }
.footer-cols{ grid-template-columns:repeat(2, 1fr); }
.footer-nl-right{ flex:1; }
.footer-newsletter{ flex-direction:column; }
}
@media (max-width: 767.98px) {
.benefits-grid{ grid-template-columns:1fr; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
body.page-adhesion #avantages .benefits-grid{
grid-template-columns:repeat(2, 1fr);
}
}
/* page-appels */
body.page-appels .tt-modal-dialog {
background:var(--tt-white);
border-radius:var(--tt-radius);
max-width:580px;
width:100%;
padding:2.25rem clamp(1.25rem, 3vw, 2.5rem) 2rem;
box-shadow:var(--tt-shadow-lg);
transform:translateY(16px);
transition:transform .3s ease;
position:relative;
}
body.page-appels .tt-modal-actions {
display:flex; flex-wrap:wrap; gap:.75rem 1rem;
}
/* ==========================================================
ACCUEIL — identité visuelle TOUTTOUT
overrides propres
========================================================== */
/* HERO — grand geste circulaire */
body.page-accueil .hero-left-panel-brand{
position:absolute;
overflow:hidden;
}
body.page-accueil .hero-left-panel-brand::before{
content:"";
position:absolute;
width:760px;
height:760px;
right:-320px;
top:50%;
transform:translateY(-50%);
background:var(--tt-brand);
border-radius:50%;
opacity:.22;
z-index:0;
}
body.page-accueil .hero-left-panel-brand::after{
content:"";
position:absolute;
width:420px;
height:420px;
right:-110px;
bottom:-180px;
background:rgba(204,216,41,.18);
border-radius:50%;
z-index:0;
}
body.page-accueil .hero-overlay-card-brand{
position:relative;
z-index:2;
margin-left:0;
max-width:560px;
}
/* ==========================================================
ACCUEIL — appel de dossiers
conserver le fond existant + ajouter des cercles subtils
========================================================== */
body.page-accueil .callout-banner{
position:relative;
overflow:hidden;
}
body.page-accueil .callout-banner::before{
content:"";
position:absolute;
width:360px;
height:360px;
right:-170px;
top:-120px;
background:rgba(204,216,41,.32);
border-radius:50%;
z-index:0;
pointer-events:none;
}
body.page-accueil .callout-banner::after{
content:"";
position:absolute;
width:220px;
height:220px;
left:-110px;
bottom:-90px;
background:rgba(204,216,41,.12);
border-radius:50%;
z-index:0;
pointer-events:none;
}
body.page-accueil .callout-inner{
position:relative;
z-index:1;
}
/* ==========================================================
ACCUEIL — section membres
motif géométrique discret
========================================================== */
body.page-accueil #membres{
position:relative;
overflow:hidden;
}
body.page-accueil #membres::before{
content:"";
position:absolute;
top:40px;
right:-80px;
width:320px;
height:320px;
background-image:url("../img/ToutTout_Logo_Forme.png");
background-repeat:no-repeat;
background-size:contain;
opacity:.045;
pointer-events:none;
z-index:0;
}
body.page-accueil #membres .container{
position:relative;
z-index:1;
}
body.page-accueil .member-card{
position:relative;
overflow:hidden;
background:rgba(255,255,255,.94);
}
body.page-accueil .member-card::after{
content:"";
position:absolute;
right:-48px;
bottom:-48px;
width:140px;
height:140px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity: 0.2;
pointer-events:none;
}
body.page-accueil .member-card .placeholder-media{
/* position:relative déjà dans la règle de base — on garde uniquement le z-index */
z-index:1;
}
body.page-accueil .member-card > div:last-child{
position:relative;
z-index:1;
}
/* ==========================================================
PAGE À PROPOS — identité visuelle TOUTTOUT
formes calmes + géométrie subtile + impact signature
========================================================== */
/* HERO — plus calme, plus éditorial */
body.page-apropos .apropos-hero-soft,
body.page-historique .apropos-hero-soft{
position:relative;
overflow:hidden;
background:
linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.72)),
radial-gradient(circle at 88% 18%, rgba(204,216,41,.10), transparent 24%),
radial-gradient(circle at 8% 90%, rgba(204,216,41,.07), transparent 20%),
var(--tt-surface);
}
body.page-apropos .apropos-hero-soft::before,
body.page-historique .apropos-hero-soft::before{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width:340px;
background-image:url("../img/quart-ellipse.svg");
background-repeat:no-repeat;
background-position:right bottom;
opacity:.22;
pointer-events:none;
}
body.page-apropos .apropos-hero-soft::after,
body.page-historique .apropos-hero-soft::after{
content:"";
position:absolute;
left:40px;
bottom:18px;
width:220px;
height:220px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.08;
pointer-events:none;
}
body.page-apropos .apropos-hero-soft .container,
body.page-historique .apropos-hero-soft .container{
position:relative;
z-index:1;
}
/* MISSION / VISION — fond géométrique subtil */
body.page-apropos .apropos-foundations{
position:relative;
overflow:hidden;
}
.apropos-foundations::before{
content:none;
}
.apropos-foundations::after{
content:"";
position:absolute;
left:-40px;
bottom:30px;
width:180px;
height:180px;
background:rgba(204,216,41,.08);
border-radius:50%;
pointer-events:none;
}
.apropos-foundations .container{
position:relative;
z-index:1;
}
/* HISTORIQUE — moins de cercle, plus de structure graphique */
body.page-apropos .apropos-history-soft{
position:relative;
overflow:hidden;
}
body.page-apropos .apropos-history-soft::before{
content:"";
position:absolute;
left:-30px;
top:40px;
width:240px;
height:240px;
background-image:url("../img/ToutTout_Logo_Forme_sketch.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.08;
pointer-events:none;
}
body.page-apropos .apropos-history-soft .container{
position:relative;
z-index:1;
}
body.page-apropos .history-panel{
position:relative;
isolation:isolate;
--history-bg-image:url('../img/batiment-1997.jpg');
}
/* Image historique rendue en background, avec un dégradé d'opacité
gauche→droite (mask-image). Invisible côté gauche pour laisser respirer
la copie, pleine opacité côté droit. Le pseudo-élément est placé
derrière le contenu via z-index:-1 + isolation:isolate sur le parent. */
body.page-apropos .history-panel::before{
content:"";
position:absolute;
inset:0;
background-image:var(--history-bg-image);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
-webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 100%);
mask-image:linear-gradient(to right, transparent 0%, transparent 30%, #000 100%);
border-radius:var(--tt-radius-sm, 8px);
z-index:-1;
pointer-events:none;
}
/* Sur iPad/mobile, le panel passe en 1 colonne (cf. ligne 5899). L'image
serait alors derrière tout le bloc texte et nuirait à la lisibilité.
On la masque en dessous de 992px — l'image reste consultable sur la
page Historique (03_historique.php). */
@media (max-width: 991.98px){
body.page-apropos .history-panel::before{ display:none; }
}
body.page-apropos .history-intro{
position:relative;
padding-right:1rem;
}
body.page-apropos .history-intro::after{
content:"";
position:absolute;
left:0;
bottom:-12px;
width:88px;
height:3px;
background:var(--tt-brand);
border-radius:999px;
}
body.page-apropos .timeline-nav::before{
background:linear-gradient(90deg, rgba(204,216,41,.35), #cfcfcf 25%, #cfcfcf 75%, rgba(204,216,41,.35));
}
/* ÉQUIPE — géométrie très légère */
body.page-apropos .team-card{
position:relative;
display:flex;
flex-direction:column;
overflow:hidden;
}
body.page-apropos .team-card .social-inline{
margin-top:auto;
}
body.page-apropos .team-card::after{
content:"";
position:absolute;
right:-48px;
top:-48px;
width:130px;
height:130px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.05;
pointer-events:none;
}
/* IMPACT — accent circulaire fort */
.apropos-impact-signature{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 84% 28%, rgba(204,216,41,.14), transparent 23%),
radial-gradient(circle at 15% 88%, rgba(204,216,41,.10), transparent 18%),
var(--tt-surface);
}
.apropos-impact-signature::before{
content:"";
position:absolute;
top:-160px;
right:-140px;
width:520px;
height:520px;
background:rgba(204,216,41,.35);
border-radius:50%;
opacity:.55;
pointer-events:none;
z-index:0;
}
.apropos-impact-signature .container{
position:relative;
z-index:1;
}
.apropos-impact-signature .stats-layout{
align-items:center;
}
.apropos-impact-signature .stats-asym{
position:relative;
grid-template-rows:auto auto;
}
.apropos-impact-signature .stat-card{
box-shadow:var(--tt-shadow);
}
.apropos-impact-signature .stat-1{
position:relative;
z-index:2;
background:var(--tt-brand);
border-color:var(--tt-brand);
}
.apropos-impact-signature .stat-img-1,
.apropos-impact-signature .stat-img-2{
position:relative;
z-index:2;
min-height:240px;
height:100%;
}
.apropos-impact-signature .stat-2,
.apropos-impact-signature .stat-3{
position:relative;
z-index:2;
align-self:start;
background:rgba(255,255,255,.96);
}
/* CTA final — retour à une douceur calme */
body.page-apropos .cta-about{
position:relative;
overflow:hidden;
}
body.page-apropos .cta-about::before{
content:"";
position:absolute;
left:-120px;
top:-80px;
width:280px;
height:280px;
background:rgba(204,216,41,.10);
border-radius:50%;
pointer-events:none;
}
body.page-apropos .cta-about::after{
content:"";
position:absolute;
right:-40px;
bottom:-40px;
width:180px;
height:180px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.06;
pointer-events:none;
}
body.page-apropos .cta-about > *{
position:relative;
z-index:1;
}
/* Responsive */
@media (max-width: 991.98px){
.apropos-impact-signature::before{
width:360px;
height:360px;
top:-110px;
right:-120px;
}
.apropos-impact-signature::after{
width:180px;
height:180px;
top:36px;
right:12px;
}
}
@media (max-width: 767.98px){
body.page-apropos .apropos-hero-soft::before,
body.page-apropos .apropos-foundations::before,
body.page-apropos .apropos-history-soft::before,
body.page-apropos .cta-about::after{
opacity:.05;
}
.apropos-impact-signature::before{
width:260px;
height:260px;
top:-80px;
right:-100px;
}
.apropos-impact-signature::after{
width:120px;
height:120px;
top:26px;
right:8px;
}
body.page-apropos .detail-block{
padding:1.25rem;
}
}
/* ==========================================================
PAGE HISTORIQUE — identité visuelle TOUTTOUT
moins de cercle, plus de structure graphique
========================================================== */
/* TIMELINE — plus de structure, moins de rondeur */
.historique-timeline-section{
position:relative;
overflow:hidden;
}
.historique-timeline-section::before{
content:"";
position:absolute;
right:-60px;
top:120px;
width:260px;
height:260px;
background-image:url("../img/ToutTout_Logo_Forme_sketch.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.07;
pointer-events:none;
}
.historique-timeline-section::after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:1px;
background:linear-gradient(90deg, transparent 0%, rgba(204,216,41,.28) 18%, rgba(204,216,41,.12) 50%, rgba(204,216,41,.28) 82%, transparent 100%);
pointer-events:none;
}
.historique-timeline-section .container{
position:relative;
z-index:1;
}
.historique-timeline-section .timeline-origin{
position:relative;
}
.historique-timeline-section .timeline-origin::before{
content:"";
position:absolute;
left:50%;
top:-18px;
transform:translateX(-50%);
width:78px;
height:3px;
background:var(--tt-brand);
border-radius:999px;
}
.historique-timeline-section .timeline-origin-year{
letter-spacing:-.03em;
}
.historique-timeline-section .timeline-zigzag-line{
background:linear-gradient(180deg, rgba(180,180,180,.55) 0%, rgba(180,180,180,.85) 100%);
}
.historique-timeline-section .timeline-zigzag-line-fill{
background:linear-gradient(180deg, var(--tt-brand-dark) 0%, var(--tt-brand) 100%);
}
.historique-timeline-section .timeline-entry-card{
position:relative;
overflow:hidden;
border-radius:var(--tt-radius);
box-shadow:var(--tt-shadow);
}
.historique-timeline-section .timeline-entry-card::after{
content:"";
position:absolute;
right:-34px;
bottom:-34px;
width:110px;
height:110px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.045;
pointer-events:none;
}
.historique-timeline-section .timeline-entry-card h3{
position:relative;
}
.historique-timeline-section .timeline-entry-card h3::before{
content:"";
display:block;
width:56px;
height:3px;
background:var(--tt-brand);
border-radius:999px;
margin-bottom:.85rem;
}
/* REPÈRES — plus graphique, plus aligné au logo */
.historique-reperes-section{
position:relative;
overflow:visible;
}
.historique-reperes-section::before{
content:none;
}
.historique-reperes-section .container{
position:static;
}
.historique-reperes-section .reperes-copy h2{
position:static;
padding-bottom:0;
}
.historique-reperes-section .reperes-copy h2::after{
content:none;
}
.historique-reperes-section .repere-card{
position:static;
overflow:visible;
}
.historique-reperes-section .repere-card::after{
content:none;
}
.historique-reperes-section .repere-card.is-active::after{
background:none;
}
.historique-reperes-section .repere-card.is-active{
background:
linear-gradient(0deg, rgba(204,216,41,.04), rgba(204,216,41,.04)),
var(--tt-white);
}
/* IMPACT — plus structuré que circulaire */
body.page-historique .historique-impact-section{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 84% 28%, rgba(204,216,41,.14), transparent 23%),
radial-gradient(circle at 15% 88%, rgba(204,216,41,.10), transparent 18%),
var(--tt-surface);
}
body.page-historique .historique-impact-section::before{
content:"";
position:absolute;
top:52px;
right:-180px;
width:520px;
height:520px;
background:rgba(204,216,41,.22);
border-radius:50%;
filter:blur(2px);
pointer-events:none;
}
body.page-historique .historique-impact-section::after{
content:"";
position:absolute;
top:52px;
right:36px;
width:240px;
height:240px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.08;
pointer-events:none;
z-index:0;
}
body.page-historique .historique-impact-section .container{
position:relative;
z-index:1;
}
/* Responsive */
@media (max-width: 767.98px){
.historique-timeline-section::before,
.historique-reperes-section::before,
body.page-historique .historique-impact-section::before,
body.page-historique .historique-impact-section::after{
opacity:.04;
}
body.page-historique .historique-impact-section::after{
opacity:.05;
}
.historique-timeline-section .timeline-origin::before{
width:52px;
}
.historique-timeline-section .timeline-entry-card h3::before{
width:42px;
}
}
@media (max-width: 991.98px){
body.page-historique .historique-impact-section::before{
width:360px;
height:360px;
top:-110px;
right:-120px;
}
body.page-historique .historique-impact-section::after{
width:180px;
height:180px;
top:36px;
right:12px;
}
}
@media (max-width: 767.98px){
body.page-historique .historique-impact-section::before{
width:260px;
height:260px;
top:-80px;
right:-100px;
}
body.page-historique .historique-impact-section::after{
width:120px;
height:120px;
top:26px;
right:8px;
}
}
/* ==========================================================
PAGE ARTISTES — identité visuelle TOUTTOUT
sections "agir" et CTA plus expressives
========================================================== */
.artistes-agir-signature{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 88% 18%, rgba(204,216,41,.10), transparent 24%),
radial-gradient(circle at 10% 88%, rgba(204,216,41,.06), transparent 18%),
var(--tt-white);
}
.artistes-agir-signature::before{
content:"";
position:absolute;
top:40px;
right:-180px;
width:520px;
height:520px;
background:rgba(204,216,41,.22);
border-radius:50%;
pointer-events:none;
z-index:0;
}
.artistes-agir-signature::after{
content:"";
position:absolute;
left:-40px;
bottom:60px;
width:220px;
height:220px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.06;
pointer-events:none;
z-index:0;
}
.artistes-agir-signature .container{
position:relative;
z-index:1;
}
.artistes-agir-signature .section-heading{
position:relative;
}
.artistes-agir-signature .section-heading::after{
content:"";
display:block;
width:88px;
height:3px;
margin:1.1rem auto 0;
background:var(--tt-brand);
border-radius:999px;
}
.artistes-feature-card{
position:relative;
overflow:hidden;
background:rgba(255,255,255,.96);
}
.artistes-feature-card::before{
content:"";
position:absolute;
right:-120px;
top:-90px;
width:300px;
height:300px;
background:rgba(204,216,41,.18);
border-radius:50%;
z-index:0;
pointer-events:none;
}
.artistes-feature-card::after{
content:"";
position:absolute;
right:18px;
bottom:18px;
width:120px;
height:120px;
background-image:url("../img/ToutTout_Logo_Tache.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.28;
z-index:0;
pointer-events:none;
}
/* position:relative est déjà sur .placeholder-media et .card-clean-body
par défaut ; on déclare ici uniquement le z-index pour passer au-dessus
du ::before décoratif de la feature-card. */
.artistes-feature-card .placeholder-media,
.artistes-feature-card .card-clean-body{
position:relative;
z-index:1;
}
/* Amélioration des effets sur les cartes cliquables de la mosaïque */
.artistes-agir-signature a{
text-decoration:none;
color:inherit;
}
.artistes-agir-signature .card-clean{
position:relative;
cursor:pointer;
}
.artistes-agir-signature .card-clean:hover,
.artistes-agir-signature .card-clean:focus-within{
transform:translateY(-6px);
box-shadow:0 16px 40px rgba(0,0,0,.12);
border-color:var(--tt-brand);
}
.artistes-agir-signature .card-clean:hover .card-clean-body h3,
.artistes-agir-signature .card-clean:focus-within .card-clean-body h3{
color:var(--tt-brand-dark);
}
.artistes-agir-signature .card-clean:hover .icon-circle,
.artistes-agir-signature .card-clean:focus-within .icon-circle{
background:var(--tt-brand);
color:var(--tt-brand-ink);
transform:scale(1.1);
}
body.page-artistes .artistes-media-signature{
position:relative;
padding:24px 24px 0 0;
}
body.page-artistes .artistes-media-signature::before{
content:"";
position:absolute;
right:0;
top:0;
width:260px;
height:260px;
background:var(--tt-brand);
border-radius:50%;
opacity:.85;
z-index:0;
}
body.page-artistes .artistes-media-signature::after{
content:"";
position:absolute;
left:-26px;
bottom:-26px;
width:140px;
height:140px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.06;
z-index:0;
pointer-events:none;
}
/* Override min-height via variable. position:relative est déjà hérité.
On garde z-index et box-shadow comme propriétés directes. */
body.page-artistes .artistes-media-signature{ --placeholder-min-h:420px; }
body.page-artistes .artistes-media-signature .placeholder-media{
z-index:1;
box-shadow:var(--tt-shadow-lg);
}
body.page-artistes .artistes-membership-signature{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 84% 22%, rgba(204,216,41,.12), transparent 22%),
var(--tt-surface);
}
body.page-artistes .artistes-membership-signature::before{
content:"";
position:absolute;
left:-120px;
bottom:-120px;
width:320px;
height:320px;
background:rgba(204,216,41,.18);
border-radius:50%;
pointer-events:none;
z-index:0;
}
body.page-artistes .artistes-membership-signature .container{
position:relative;
z-index:1;
}
body.page-artistes .artistes-cta-signature{
position:relative;
overflow:hidden;
background:
linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.88)),
radial-gradient(circle at 85% 18%, rgba(204,216,41,.16), transparent 24%),
var(--tt-surface);
}
body.page-artistes .artistes-cta-signature::before{
content:"";
position:absolute;
right:-160px;
bottom:-160px;
width:420px;
height:420px;
background:rgba(204,216,41,.24);
border-radius:50%;
pointer-events:none;
z-index:0;
}
body.page-artistes .artistes-cta-signature::after{
content:"";
position:absolute;
left:40px;
top:40px;
width:180px;
height:180px;
background-image:url("../img/ToutTout_Logo_Forme_sketch.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.08;
pointer-events:none;
z-index:0;
}
body.page-artistes .artistes-cta-panel{
position:relative;
z-index:1;
background:rgba(255,255,255,.84);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
box-shadow:var(--tt-shadow);
padding:clamp(2rem, 4vw, 3rem);
}
/* Override min-height via variable + margin direct sur l'élément. */
body.page-artistes .artistes-cta-panel{ --placeholder-min-h:300px; }
body.page-artistes .artistes-cta-panel .placeholder-media{ margin-top:2rem; }
@media (max-width: 991.98px){
.artistes-agir-signature::before{
width:360px;
height:360px;
right:-160px;
top:80px;
}
body.page-artistes .artistes-media-signature{
padding:18px 18px 0 0;
}
body.page-artistes .artistes-media-signature::before{
width:180px;
height:180px;
}
body.page-artistes .artistes-cta-signature::before{
width:260px;
height:260px;
right:-120px;
bottom:-120px;
}
}
@media (max-width: 767.98px){
.artistes-agir-signature::after,
body.page-artistes .artistes-cta-signature::after,
body.page-artistes .artistes-media-signature::after{
opacity:.04;
}
}
/* ==========================================================
PAGE ÉTUDIANTS — identité visuelle TOUTTOUT
plus accessible, vivant, structuré
========================================================== */
@media (max-width: 991.98px){
body.page-etudiants .etudiants-hero-signature::before{
width:300px;
height:300px;
right:-120px;
top:-70px;
}
}
@media (max-width: 767.98px){
body.page-etudiants .etudiants-hero-signature::after,
body.page-etudiants .etudiants-stage-card::after{
opacity:.04;
}
}
body.page-etudiants .etudiants-voies-flat .card-clean{
border:none;
box-shadow:none;
}
body.page-etudiants .etudiants-voies-flat .card-clean:hover,
body.page-etudiants .etudiants-voies-flat .card-clean:focus-within{
transform:none;
box-shadow:none;
border-color:transparent;
}
/* ==========================================================
NORMALISATION — tous les .page-hero
même apparence que le hero de 02_a-propos.html
========================================================== */
.page-hero{
position:relative;
overflow:hidden;
padding:var(--tt-section) 0;
text-align:left;
background:
linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.72)),
radial-gradient(circle at 88% 18%, rgba(204,216,41,.10), transparent 24%),
radial-gradient(circle at 8% 90%, rgba(204,216,41,.07), transparent 20%),
var(--tt-surface);
border-bottom:1px solid var(--tt-line);
}
.page-hero::before{
content:"";
position:absolute;
top:0;
right:0;
bottom:0;
width:340px;
background-image:url("../img/quart-ellipse.svg");
background-repeat:no-repeat;
background-position:right bottom;
opacity:.22;
pointer-events:none;
}
.page-hero::after{
content:"";
position:absolute;
right:42px;
bottom:108px;
width:420px;
height:520px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
background-repeat:no-repeat;
background-size:contain;
opacity:.16;
pointer-events:none;
}
.page-hero .container{
position:relative;
z-index:1;
}
.page-hero .eyebrow{
color:var(--tt-brand-ink);
background:rgba(204,216,41,.25);
padding:.3rem .7rem;
border-radius:999px;
margin-bottom:1.25rem;
}
.page-hero h1,
.page-hero h2{
font-size:clamp(2rem, 3.4vw, 3.5rem);
line-height:1.08;
font-weight:800;
margin-bottom:1rem;
color:var(--tt-brand-vert-kaki);
}
.page-hero p{
color:var(--tt-muted);
font-size:1.05rem;
}
@media (max-width: 767.98px){
.page-hero::before{
opacity:.16;
width:220px;
}
.page-hero::after{
width:160px;
height:160px;
right:14px;
bottom:10px;
opacity:.10;
}
}
/* ═══════════════════════════════════════════════════════════
PAGE 11 — SECTION ACCÈS ÉTUDIANT·E·S
═══════════════════════════════════════════════════════════ */
.student-access-section{
position:relative;
overflow:hidden;
background:
radial-gradient(ellipse at 0% 20%, rgba(204,216,41,.14), transparent 42%),
radial-gradient(ellipse at 100% 80%, rgba(204,216,41,.10), transparent 46%),
var(--tt-white);
border-top:1px solid var(--tt-line);
border-bottom:1px solid var(--tt-line);
}
.student-access-bg-shape{
position:absolute;
pointer-events:none;
opacity:.08;
background-repeat:no-repeat;
background-size:contain;
background-position:center;
z-index:0;
}
.student-access-bg-shape-left{
width:360px;
height:360px;
left:-120px;
top:60px;
background-image:url("../img/ToutTout_Logo_Forme_gris.svg");
}
.student-access-bg-shape-right{
width:300px;
height:300px;
right:-90px;
bottom:30px;
background-image:url("../img/ToutTout_Logo_Tache.svg");
opacity:.06;
}
.student-access-header{
display:grid;
grid-template-columns:minmax(0, .95fr) minmax(0, 1fr);
gap:clamp(2rem, 5vw, 5rem);
align-items:end;
margin-bottom:3rem;
}
.student-access-header .section-title{
margin-bottom:0;
}
.student-access-header .section-subtitle{
max-width:620px;
}
.student-access-layout{
display:grid;
grid-template-columns:1fr;
gap:clamp(1.5rem, 4vw, 3rem);
align-items:stretch;
}
.student-access-aside{
min-height:100%;
}
.student-access-identity-card{
position:relative;
height:100%;
min-height:520px;
padding:2rem;
overflow:hidden;
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
background:
linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,245,245,.96)),
var(--tt-surface);
box-shadow:var(--tt-shadow);
}
.student-access-logo-shape{
position:absolute;
width:220px;
height:auto;
right:-70px;
top:-50px;
opacity:.12;
pointer-events:none;
}
.student-access-identity-card h3{
position:relative;
z-index:1;
font-size:clamp(1.5rem, 2.2vw, 2rem);
line-height:1.1;
font-weight:800;
color:var(--tt-black);
margin:0 0 1rem;
}
.student-access-identity-card p{
position:relative;
z-index:1;
color:var(--tt-muted);
margin-bottom:1.5rem;
}
.student-access-checklist{
position:relative;
z-index:1;
list-style:none;
padding:0;
margin:0 0 1.75rem;
display:grid;
gap:.8rem;
}
.student-access-checklist li{
display:flex;
align-items:flex-start;
gap:.65rem;
color:var(--tt-text);
font-size:.95rem;
}
.student-access-checklist i{
color:var(--tt-brand-dark);
margin-top:.15rem;
flex:0 0 auto;
}
.student-tabs-shell{
position:relative;
height:100%;
background:var(--tt-white);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius);
box-shadow:var(--tt-shadow);
overflow:hidden;
}
.student-tabs-nav{
display:grid;
grid-template-columns:repeat(3, 1fr);
border-bottom:1px solid var(--tt-line);
background:var(--tt-surface);
}
.student-tabs-nav.nav-tabs{
border-bottom:1px solid var(--tt-line);
}
.student-tabs-nav .nav-item{
width:100%;
}
.student-tabs-nav .nav-link{
width:100%;
min-height:76px;
border:0;
border-right:1px solid var(--tt-line);
border-radius:0;
background:transparent;
color:var(--tt-muted);
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:.55rem;
transition:background .2s ease, color .2s ease;
}
.student-tabs-nav .nav-item:last-child .nav-link{
border-right:0;
}
.student-tabs-nav .nav-link span{
font-size:.78rem;
letter-spacing:.08em;
color:var(--tt-brand-dark);
}
.student-tabs-nav .nav-link:hover,
.student-tabs-nav .nav-link:focus{
color:var(--tt-black);
background:rgba(204,216,41,.08);
}
.student-tabs-nav .nav-link.active{
color:var(--tt-black);
background:var(--tt-white);
box-shadow:inset 0 3px 0 var(--tt-brand);
}
.student-tabs-content{
background:var(--tt-white);
}
.student-tab-card{
border:0;
border-radius:0;
background:transparent;
}
.student-tab-grid{
display:grid;
grid-template-columns:.95fr 1.05fr;
min-height:440px;
}
.student-tab-media{
position:relative;
min-height:440px;
overflow:hidden;
background:
linear-gradient(135deg, rgba(17,17,17,.76), rgba(17,17,17,.28)),
radial-gradient(circle at 30% 20%, rgba(204,216,41,.45), transparent 38%),
var(--tt-black);
}
.student-tab-media::before{
content:"";
position:absolute;
inset:0;
background-image:url("../img/ToutTout_Logo_Forme.svg");
background-repeat:no-repeat;
background-position:center;
background-size:62%;
opacity:.16;
}
.student-tab-media::after{
content:"";
position:absolute;
width:220px;
height:220px;
right:-80px;
bottom:-80px;
border-radius:50%;
background:var(--tt-brand);
opacity:.75;
}
.student-tab-media-inscription{
background:
linear-gradient(135deg, rgba(17,17,17,.78), rgba(17,17,17,.36)),
radial-gradient(circle at 20% 30%, rgba(204,216,41,.50), transparent 40%),
var(--tt-black);
}
.student-tab-media-tarification{
background:
linear-gradient(135deg, rgba(17,17,17,.78), rgba(63,63,61,.42)),
radial-gradient(circle at 70% 25%, rgba(204,216,41,.45), transparent 40%),
var(--tt-black);
}
.student-tab-media-reservation{
background:
linear-gradient(135deg, rgba(17,17,17,.76), rgba(17,17,17,.30)),
radial-gradient(circle at 40% 72%, rgba(204,216,41,.45), transparent 42%),
var(--tt-black);
}
.student-tab-media-label{
position:absolute;
left:1.5rem;
bottom:1.5rem;
z-index:2;
font-size:clamp(4rem, 8vw, 7rem);
line-height:.8;
font-weight:800;
color:rgba(255,255,255,.18);
letter-spacing:-.05em;
}
.student-tab-content{
padding:clamp(2rem, 4vw, 3rem);
display:flex;
flex-direction:column;
justify-content:center;
}
.student-tab-content h3{
font-size:clamp(1.65rem, 2.6vw, 2.45rem);
line-height:1.08;
font-weight:800;
color:var(--tt-black);
margin:0 0 1rem;
}
.student-tab-content p{
color:var(--tt-muted);
margin-bottom:1.5rem;
}
.student-access-points{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:1rem;
margin-bottom:1.5rem;
}
.student-access-points div{
padding:1rem;
background:var(--tt-surface);
border:1px solid var(--tt-line);
border-radius:var(--tt-radius-sm);
}
.student-access-points strong{
display:block;
font-size:1rem;
color:var(--tt-black);
line-height:1.2;
margin-bottom:.25rem;
}
.student-access-points span{
display:block;
font-size:.88rem;
color:var(--tt-muted);
line-height:1.35;
}
@media (max-width: 991.98px){
.student-access-header,
.student-access-layout{
grid-template-columns:1fr;
}
.student-access-identity-card{
min-height:auto;
}
.student-tab-grid{
grid-template-columns:1fr;
}
.student-tab-media{
min-height:260px;
}
}
@media (max-width: 767.98px){
.student-access-header{
margin-bottom:2rem;
}
.student-tabs-nav{
grid-template-columns:1fr;
}
.student-tabs-nav .nav-link{
justify-content:flex-start;
min-height:58px;
padding:0 1rem;
border-right:0;
border-bottom:1px solid var(--tt-line);
}
.student-tabs-nav .nav-item:last-child .nav-link{
border-bottom:0;
}
.student-tab-content{
padding:1.5rem;
}
.student-access-points{
grid-template-columns:1fr;
}
.student-access-bg-shape-left,
.student-access-bg-shape-right{
display:none;
}
}
/* =====================================================================
MEMBRES UTILISATEURS — Modales avec carrousel + sections de texte
(utilisé par 20_archive-membre.php, table membres_utilisateurs)
===================================================================== */
.artist-project-modal .modal-content {
border: 0;
border-radius: 18px;
overflow: hidden;
}
.artist-project-modal .modal-header {
align-items: flex-start;
padding: 1.5rem 1.75rem;
border-bottom: 1px solid var(--tt-line);
}
.artist-project-modal .modal-category {
font-size: 0.85rem;
color: var(--tt-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.artist-project-modal .modal-title {
margin-top: 0.35rem;
color: var(--tt-text); /* Cohérence : même couleur que les H2 du site */
font-size: clamp(1.7rem, 3vw, 2.45rem);
line-height: 1.1;
font-weight: 700;
}
.artist-project-modal .modal-body {
padding: 1.75rem;
}
/* Carrousel d'images en haut de la modale */
.artist-carousel-top {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: var(--tt-surface-2);
}
.artist-carousel-top .carousel-item {
min-height: 340px;
}
/* Placeholder du carrousel modal. L'image réelle est appliquée en
background via style inline depuis le PHP. On force contain pour ne
PAS recadrer ni zoomer l'image — toute l'image reste visible avec
d'éventuelles bandes grises sur les côtés si le ratio ne correspond
pas (acceptable pour des illustrations/logos centrés). */
.modal-carousel-placeholder {
position: relative;
min-height: 340px;
width: 100%;
background-color: #dcdcdc;
background-size: contain !important; /* override du style inline cover */
background-position: center !important;
background-repeat: no-repeat !important;
border: 1px solid var(--tt-line);
display: flex;
align-items: center;
justify-content: center;
}
/* Le de fallback "Image à venir" est masqué (placeholder visuel pur) */
.modal-carousel-placeholder span {
display: none;
}
/* Sections de texte (Parcours / Projet / Pourquoi TOUTTOUT) */
.artist-modal-section {
max-width: 820px;
margin-bottom: 2rem;
}
.artist-modal-section h3 {
color: var(--tt-brand-vert-kaki); /* Vert kaki TOUTTOUT — cohérent avec le site */
font-size: clamp(1.35rem, 2.5vw, 1.75rem);
line-height: 1.2;
margin-bottom: 0.75rem;
font-weight: 700;
}
.artist-modal-section p,
.artist-modal-section div {
color: var(--tt-text);
line-height: 1.7;
margin-bottom: 1rem;
}
.artist-modal-section:last-child {
margin-bottom: 0;
}
/* Contrôles du carrousel sur fond gris clair */
.artist-carousel-top .carousel-control-prev-icon,
.artist-carousel-top .carousel-control-next-icon {
filter: invert(0.6);
}
.artist-carousel-top .carousel-indicators [data-bs-target] {
width: 9px;
height: 9px;
border-radius: 50%;
background-color: var(--tt-text);
}
@media (max-width: 768px) {
.artist-project-modal .modal-header,
.artist-project-modal .modal-body {
padding: 1.25rem;
}
.artist-carousel-top .carousel-item,
.modal-carousel-placeholder {
min-height: 240px;
}
.artist-modal-section {
max-width: 100%;
}
}
/* =====================================================================
GRID « Ce que tu peux faire » (artistes-agir-signature)
- Mobile (< 768px) : 2 colonnes ; Découvre cachée ;
Deviens & Occupe couvrent toute la largeur
- iPad portrait (768-991px): 3 colonnes ; Découvre cachée ;
Deviens & Occupe couvrent 2 colonnes
- Desktop (≥ 992px) : grille 4×2 avec aires nommées,
colonnes parfaitement alignées
===================================================================== */
/* ─── Aplatissement Bootstrap : tous les écrans ─────────────────── */
.artistes-agir-signature .artists-mosaic-row {
display: grid;
gap: 1.5rem;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6,
.artistes-agir-signature .artists-mosaic-row > .col-lg-6 > .row {
display: contents;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6 > .row > [class*="col-"] {
width: auto;
max-width: none;
flex: initial;
padding: 0;
margin: 0;
}
/* Les cartes remplissent leur cellule de grille */
.artistes-agir-signature .artists-mosaic-row article {
height: 100%;
}
/* ─── Desktop (≥ 992px) : 4 colonnes × 2 rangées avec aires ──── */
@media (min-width: 992px) {
.artistes-agir-signature.section-padding {
padding: 32px 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.artistes-agir-signature .section-heading {
margin-bottom: 1.25rem;
}
/*
Grille 4 colonnes × 2 rangées :
┌─────────┬─────────┬─────────┬─────────┐
│ Deviens │ Utilise │ Explore │
│ membre (×2) │ │ │
├──────────────────┼─────────┴─────────┤
│ Découvre │ Occupe atelier │
│ membres (×2) │ (×2) │
└─────────┴─────────┴─────────┴─────────┘
Rangées en `auto` : chaque rangée se dimensionne sur le contenu
réel des cartes (pas d'espace vide à cause d'un partage 1fr). */
.artistes-agir-signature .artists-mosaic-row {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
grid-template-areas:
"deviens deviens utilise explore"
"decouvre decouvre occupe occupe";
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:first-child {
grid-area: deviens;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(2) {
grid-area: decouvre;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:last-child > .row > .col-md-6:nth-of-type(1) {
grid-area: utilise;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:last-child > .row > .col-md-6:nth-of-type(2) {
grid-area: explore;
}
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12 {
grid-area: occupe;
}
/* Reset des min-heights pour que la grille décide */
.artistes-agir-signature .mosaic-card-large,
.artistes-agir-signature .mosaic-card-medium,
.artistes-agir-signature .mosaic-card-small,
.artistes-agir-signature .mosaic-card-mixed {
min-height: 0;
}
.artistes-agir-signature .mosaic-card-large .placeholder-media,
.artistes-agir-signature .mosaic-card-mixed .placeholder-media {
min-height: 120px;
}
/* « Découvre les membres » : la colonne image (col-6) doit
remplir toute la hauteur de la carte.
- La règle de base .placeholder-media { min-height: 260px }
empêchait l'image de s'adapter.
- Le `.h-100` Bootstrap (height:100% !important) sur le
placeholder ne se résout pas toujours dans une col flex.
On passe par un positionnement absolu pour garantir que
l'image remplit toute la cellule, peu importe la cascade. */
.artistes-agir-signature .mosaic-card-medium .row {
height: 100%;
}
.artistes-agir-signature .mosaic-card-medium .row > .col-6:first-child {
position: relative;
min-height: 160px;
}
.artistes-agir-signature .mosaic-card-medium .row > .col-6:first-child > .placeholder-media {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
}
.artistes-agir-signature .mosaic-card-medium .card-clean-body,
.artistes-agir-signature .mosaic-card-small .card-clean-body {
min-height: 0;
padding: 1.1rem 1.25rem;
}
/* === Cartes uniformes par rangée =============================
Les cartes remplissent toute leur cellule de grille pour avoir
une hauteur uniforme par rangée. Le BODY reste à la taille de
son contenu (flex: 0 0 auto) et la flèche est positionnée en
absolu en bas-droite. L'espace résiduel entre le body et la
flèche se lit comme du padding de carte intentionnel — pas
comme du dead space dans le texte. */
.artistes-agir-signature .artists-mosaic-row .card-clean {
height: 100%;
min-height: 0;
}
.artistes-agir-signature .artists-mosaic-row .card-clean-body {
flex: 0 0 auto;
}
/* Pour les cartes plus courtes que la rangée (Utilise/Explore
à côté de Deviens), on aligne en haut pour ne PAS étirer la
cellule de grille — le visuel reste compact, et la rangée
se cale sur la carte la plus grande. */
.artistes-agir-signature .artists-mosaic-row > .col-lg-6 > .row > [class*="col-"] {
align-self: stretch;
}
}
/* ─── Tablet & mobile (< 992px) : images masquées ──────────────── */
@media (max-width: 991.98px) {
.artistes-agir-signature .placeholder-media {
display: none !important;
}
.artistes-agir-signature .mosaic-card-large,
.artistes-agir-signature .mosaic-card-medium,
.artistes-agir-signature .mosaic-card-mixed,
.artistes-agir-signature .mosaic-card-small {
min-height: 0;
height: 100%;
}
.artistes-agir-signature .mosaic-card-medium .row > .col-6 {
flex: 0 0 100%;
max-width: 100%;
}
/* Carte « Découvre les membres » cachée (UNIQUEMENT version standard à 5 cartes,
pas la variante bookends qui contient 7 cartes — voir plus bas) */
.artistes-agir-signature:not(.mosaic-with-bookends) .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(2) {
display: none !important;
}
}
/* ─── iPad portrait (768-991px) : 3 colonnes ──────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
.artistes-agir-signature.section-padding {
padding: 48px 1.5rem;
}
.artistes-agir-signature .artists-mosaic-row {
grid-template-columns: repeat(3, 1fr);
}
/* Deviens membre : span 2 colonnes */
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:first-child {
grid-column: span 2;
}
/* Occupe un atelier : span 2 colonnes */
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12 {
grid-column: span 2;
}
/* Ordre visuel souhaité :
┌─────────────────┬──────────┐
│ Deviens (×2) │ Utilise │
├──────────┬──────┴──────────┤
│ Explore │ Occupe (×2) │
└──────────┴─────────────────┘
L'ordre HTML est : Deviens, [Découvre caché], Utilise, Explore,
Occupe. Avec span 2 sur Deviens et Occupe → 4 cellules occupées
sur 6, le flow auto remplit dans le bon ordre. */
}
/* ─── Mobile (< 768px) : 2 colonnes ──────────────────────────── */
@media (max-width: 767.98px) {
.artistes-agir-signature.section-padding {
padding: 40px 1rem;
}
.artistes-agir-signature .artists-mosaic-row {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
/* Deviens membre : span 2 colonnes (toute la largeur) */
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:first-child {
grid-column: span 2;
}
/* Occupe un atelier : span 2 colonnes (toute la largeur) */
.artistes-agir-signature .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12 {
grid-column: span 2;
}
/* Padding intérieur réduit */
.artistes-agir-signature .card-clean-body {
padding: 0.85rem !important;
}
.artistes-agir-signature .card-clean-body h3 {
font-size: 1rem;
margin-bottom: 0.4rem;
}
.artistes-agir-signature .card-clean-body p {
font-size: 0.82rem;
margin-bottom: 0;
}
.artistes-agir-signature .card-clean-body .eyebrow {
font-size: 0.65rem;
margin-bottom: 0.4rem;
}
}
/* =====================================================================
VARIANTE MOSAIC-WITH-BOOKENDS (10_etudiants.php)
- 7 cartes au lieu de 5 : une carte « intro » en haut et une carte
« outro » en bas, toutes deux pleine largeur.
- Aucune carte n'est cachée sur tablet/mobile (toutes ont du contenu
unique, contrairement à la version standard où « Découvre les
membres » est masquée).
===================================================================== */
/* ─── Desktop (≥ 992px) : grille 4 colonnes × 4 rangées ──────── */
@media (min-width: 992px) {
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row {
grid-template-rows: auto auto auto auto;
grid-template-areas:
"intro intro intro intro"
"deviens deviens utilise explore"
"decouvre decouvre occupe occupe"
"outro outro outro outro";
}
/* Wrapper gauche : 3 col-12 (intro, deviens, decouvre) */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(1) {
grid-area: intro;
}
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(2) {
grid-area: deviens;
}
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(3) {
grid-area: decouvre;
}
/* Wrapper droit : 2 col-md-6 (utilise, explore — sélecteurs existants
restent valides) + 2 col-12 (occupe = 3e enfant, outro = 4e enfant) */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12:nth-child(3) {
grid-area: occupe;
}
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12:nth-child(4) {
grid-area: outro;
}
}
/* ─── iPad portrait (768-991px) : layout 3 colonnes ────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
/* dense permet à la grille de remplir les trous avec les cartes
plus petites (Labos, Salle) à droite des grandes (Stages, Atelier). */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row {
grid-auto-flow: dense;
}
/* Intro pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(1) {
grid-column: 1 / -1;
}
/* Stages (deviens = 2e enfant gauche) span 2 colonnes */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(2) {
grid-column: span 2;
}
/* Atelier collectif (decouvre = 3e enfant gauche) span 2 colonnes */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(3) {
grid-column: span 2;
}
/* CAS UQAC (3e enfant droit) pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12:nth-child(3) {
grid-column: 1 / -1;
}
/* Outro (4e enfant droit) pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12:nth-child(4) {
grid-column: 1 / -1;
}
}
/* ─── Mobile (< 768px) : grandes cartes pleine largeur, smalls côte à côte ──── */
@media (max-width: 767.98px) {
/* Intro pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(1) {
grid-column: 1 / -1;
}
/* Stages (deviens = 2e enfant gauche) pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(2) {
grid-column: 1 / -1;
}
/* Atelier collectif (decouvre = 3e enfant gauche) pleine largeur */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:first-child > .row > .col-12:nth-child(3) {
grid-column: 1 / -1;
}
/* Outro (4e enfant) pleine largeur — Mixed (CAS UQAC) est déjà géré par la règle de base */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row > .col-lg-6:last-child > .row > .col-12:nth-child(4) {
grid-column: 1 / -1;
}
}
/* =====================================================================
UNIFORMISATION VISUELLE DES CARTES « Ce que tu peux faire »
(Pages 04_artistes.php et 10_etudiants.php)
- Icône en haut à gauche dans .icon-circle
- Eyebrow + titre + texte court
- Flèche d'indication de cliquabilité en bas à droite (.card-arrow)
- Hover : élévation + bordure brand + flèche qui glisse
===================================================================== */
/* La carte (article) sert d'ancrage de positionnement pour la flèche */
.artistes-agir-signature .card-clean {
position: relative;
overflow: visible;
}
/* L'icône (.icon-circle existait déjà) — uniformise sa taille/marge */
.artistes-agir-signature .icon-circle {
width: 40px;
height: 40px;
border-radius: 8px;
background: var(--tt-brand-soft);
color: var(--tt-brand-ink);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
margin-bottom: 0.85rem;
transition: background 0.2s ease, transform 0.2s ease;
}
/* Eyebrow uniforme */
.artistes-agir-signature .card-clean-body .eyebrow {
display: block;
margin: 0 0 0.5rem;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tt-muted);
}
/* Flèche d'indication de cliquabilité — bas à droite de la carte */
.artistes-agir-signature .card-arrow {
position: absolute;
bottom: 1rem;
right: 1rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--tt-white);
border: 1px solid var(--tt-line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--tt-text);
transition: background 0.2s ease, border-color 0.2s ease,
color 0.2s ease, transform 0.2s ease;
font-size: 1rem;
z-index: 2;
}
/* Espace en bas du body pour ne pas chevaucher la flèche */
.artistes-agir-signature .card-clean-body {
padding-bottom: 3.25rem !important;
}
/* Hover : la flèche se remplit de la couleur brand et glisse à droite */
.artistes-agir-signature a:hover .card-arrow,
.artistes-agir-signature a:focus-within .card-arrow,
.artistes-agir-signature .card-clean:hover .card-arrow {
background: var(--tt-brand);
border-color: var(--tt-brand);
color: var(--tt-brand-ink);
transform: translateX(4px);
}
/* L'icône s'illumine aussi au hover de la carte */
.artistes-agir-signature a:hover .icon-circle,
.artistes-agir-signature a:focus-within .icon-circle,
.artistes-agir-signature .card-clean:hover .icon-circle {
background: var(--tt-brand);
color: var(--tt-brand-ink);
transform: scale(1.05);
}
/* Toutes les flèches restent à la même taille (définie plus haut)
peu importe si la carte est une feature card ou non.
Évite l'effet « flèche disproportionnée » sur les petites cartes. */
/* =====================================================================
ESPACEMENT RÉDUIT ENTRE LES CARTES
===================================================================== */
/* Desktop & tablet : gap très serré (effet menu/tile) */
.artistes-agir-signature .artists-mosaic-row {
gap: 0.5rem;
}
/* Mobile : gap minimal */
@media (max-width: 767.98px) {
.artistes-agir-signature .artists-mosaic-row {
gap: 0.375rem;
}
}
/* =====================================================================
COMPACTION DESKTOP — variante MOSAIC-WITH-BOOKENDS
Avec 7 cartes (intro + 5 cartes + outro) la section devient trop
haute pour tenir dans 100vh. On compacte uniquement les CARTES
en desktop (le section-heading reste de taille standard).
===================================================================== */
@media (min-width: 992px) {
/* Section : padding légèrement réduit autour pour gagner de l'espace */
.artistes-agir-signature.mosaic-with-bookends.section-padding {
padding: 32px 0;
}
/* Corps de carte plus serré */
.artistes-agir-signature.mosaic-with-bookends .card-clean-body {
padding: 0.85rem 1.1rem 2.5rem !important;
}
/* Icône plus petite */
.artistes-agir-signature.mosaic-with-bookends .icon-circle {
width: 30px;
height: 30px;
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
/* Eyebrow plus discret */
.artistes-agir-signature.mosaic-with-bookends .card-clean-body .eyebrow {
font-size: 0.6rem;
margin-bottom: 0.25rem;
}
/* Tous les titres uniformes — peu importe la classe utilitaire
(.h2, .h3, .h4) appliquée sur le
dans le HTML */
.artistes-agir-signature.mosaic-with-bookends .card-clean-body h3,
.artistes-agir-signature.mosaic-with-bookends .card-clean-body h3.h2,
.artistes-agir-signature.mosaic-with-bookends .card-clean-body h3.h3,
.artistes-agir-signature.mosaic-with-bookends .card-clean-body h3.h4 {
font-size: 1.05rem;
line-height: 1.25;
margin-bottom: 0.3rem;
}
/* Texte description réduit */
.artistes-agir-signature.mosaic-with-bookends .card-clean-body p {
font-size: 0.82rem;
line-height: 1.35;
margin-bottom: 0;
}
/* Flèche plus petite (uniforme — plus de feature card spéciale
puisque les titres sont tous au même format) */
.artistes-agir-signature.mosaic-with-bookends .card-arrow,
.artistes-agir-signature.mosaic-with-bookends .artistes-feature-card .card-arrow {
width: 30px;
height: 30px;
bottom: 0.55rem;
right: 0.55rem;
font-size: 0.85rem;
}
/* Les cartes remplissent toute leur cellule de grille pour avoir
une hauteur uniforme par rangée. Le contenu reste collé en haut
(flex: 0 0 auto sur .card-clean-body, hérité) et la flèche reste
en bas à droite (absolute). L'espace résiduel devient du blanc
de carte propre — pas du dead space dans le texte. */
.artistes-agir-signature.mosaic-with-bookends .artists-mosaic-row .card-clean {
height: 100%;
}
}
/* Retirer la « tache » SVG (ToutTout_Logo_Tache.svg) sur toutes les
cartes feature (pages 04_artistes et 10_etudiants), sur tous les
breakpoints. Le cercle vert tendre (::before) reste conservé. */
.artistes-feature-card::after {
display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════════
FORMULAIRES — Submit gating
Les boutons de soumission des formulaires sont automatiquement désactivés
par le JS (initSubmitGating) tant que la case « J'ai lu / J'accepte les
conditions » n'est pas cochée. Le CSS ci-dessous neutralise les effets
visuels d'interactivité (hover, focus) pour signaler clairement à
l'utilisateur que l'action n'est pas possible.
La classe .is-submit-blocked est ajoutée au