:root{color-scheme:dark;--ink:#081620;--night:#06111a;--panel:#0e2330;--panel2:#112a38;--line:rgba(214,230,238,.15);--text:#f7f8f7;--muted:#b4c4cb;--red:#e5443e;--red2:#ff6559;--red-ink:#fff;--paper:#f2f3f0;--papertext:#142a35;--paperline:#d6ddde;font-family:"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--text)}button,input,select,textarea{font:inherit}a{color:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}:focus-visible{outline:3px solid #ff9a8c;outline-offset:3px}[hidden]{display:none!important}.skip-link{position:fixed;left:1rem;top:-5rem;z-index:100;background:#fff;color:#09202b;padding:.75rem 1rem}.skip-link:focus{top:1rem}
.preview-banner{position:sticky;top:0;z-index:40;padding:.45rem 1rem;text-align:center;color:#263b44;background:#ffe1a6;font-size:.8rem;font-weight:800}.site-header{position:sticky;top:0;z-index:30;background:rgba(7,19,28,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.header-inner{width:min(100% - 3rem,1500px);height:78px;margin:auto;display:flex;align-items:center;gap:clamp(1.5rem,3vw,3.6rem)}.brand{display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap;text-decoration:none;line-height:.9}.brand-406{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.35rem;font-weight:900;font-style:italic;letter-spacing:-.14em;padding-right:.22rem}.brand-divider{height:2.2rem;width:2px;background:var(--red)}.brand-label{display:grid;gap:.25rem;font-size:.72rem;font-weight:900;letter-spacing:.19em}.brand-label b{color:var(--red);font-size:.7rem;letter-spacing:.35em}.main-nav{display:flex;align-items:center;gap:clamp(.8rem,1.5vw,1.6rem);margin-left:auto}.main-nav a{height:78px;display:inline-flex;align-items:center;position:relative;color:#ced8dc;text-decoration:none;white-space:nowrap;font-size:.86rem;font-weight:700}.main-nav a:hover,.main-nav a.active{color:#fff}.main-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--red)}.header-actions{display:flex;align-items:center;gap:1rem;padding-left:1rem;border-left:1px solid var(--line)}.header-icon{position:relative;text-decoration:none;font-size:1.45rem;line-height:1}.badge-dot{position:absolute;right:-.17rem;top:-.08rem;width:.55rem;height:.55rem;background:var(--red);border-radius:50%;border:2px solid var(--ink)}.account-link{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-size:.84rem;font-weight:700;white-space:nowrap}.account-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#193847;color:#fff;border:1px solid #47616c;font-weight:800}.menu-toggle{display:none;background:none;border:0;padding:.5rem}.menu-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px 0}
#main{min-height:calc(100vh - 172px)}.shell{width:min(100% - 3rem,1440px);margin-inline:auto}.eyebrow{font-family:"Bodoni Moda",Georgia,serif;font-size:1.08rem;letter-spacing:.3em;font-weight:500;text-transform:uppercase;color:var(--red2)}.eyebrow::before{content:"";display:inline-block;width:1.8rem;height:2px;background:currentColor;vertical-align:middle;margin-right:.8rem}.display{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:clamp(3.5rem,7vw,7rem);font-weight:800;letter-spacing:-.07em;line-height:.91;margin:.8rem 0 1.2rem}.display em{font-style:normal;color:#dbe1e0}.intro{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.65;color:#d2dcdf}.btn{display:inline-flex;align-items:center;justify-content:center;gap:1.6rem;min-height:46px;border-radius:3px;padding:.75rem 1.15rem;background:var(--red);border:1px solid var(--red);color:var(--red-ink);text-decoration:none;font-size:.9rem;font-weight:800;transition:transform .18s,background .18s}.btn:hover{transform:translateY(-2px);background:#f25851}.btn.ghost{background:transparent;border-color:#8099a5}.btn.ghost:hover{background:rgba(255,255,255,.08)}.btn.dark{background:#102632;border-color:#102632}.btn.tiny{min-height:34px;padding:.45rem .8rem;font-size:.78rem;gap:.4rem}.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}.page{padding:3.5rem 0 6rem}.page-head{display:block;text-align:center;margin-bottom:2.4rem}.page-head .btn-row{justify-content:center;margin-top:1.2rem}.page-title{font-family:"Cinzel",Georgia,serif;font-weight:500;font-size:clamp(2.5rem,4.4vw,4.4rem);letter-spacing:.022em;line-height:1.08;margin:.7rem 0 .6rem}.page-subtitle{color:var(--muted);margin:0 auto;font-size:1.02rem;line-height:1.55;max-width:46rem}.page-head .btn-row{flex-shrink:0}.section-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:0 0 .85rem;margin-bottom:1rem}.section-label h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;margin:0}.section-label a,.section-label button{border:0;background:none;color:#ff7169;text-decoration:none;font-size:.83rem;font-weight:800}.muted{color:var(--muted)}.small{font-size:.82rem}.empty{padding:2.4rem;border:1px dashed #49616d;color:var(--muted);background:rgba(255,255,255,.025);line-height:1.6}.error-box{border:1px solid #9d4c4c;background:#341e22;color:#ffe4df;padding:1rem 1.2rem;border-radius:3px;line-height:1.5}.success-box{border:1px solid #3e8062;background:#143b30;color:#dffbea;padding:1rem 1.2rem;border-radius:3px}.spinner{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #78909a;border-top-color:#fff;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading{min-height:200px;display:grid;place-items:center;color:var(--muted)}.toast{position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;max-width:min(26rem,calc(100vw - 2.4rem));background:#ecf2f0;color:#102b36;box-shadow:0 20px 50px #0009;padding:1rem 1.2rem;border-left:4px solid #46a57c;font-weight:700}.toast.error{border-left-color:#e5443e}
.dashboard-hero{position:relative;min-height:420px;overflow:hidden;background:#07131c;isolation:isolate;display:flex;align-items:center}.dashboard-hero img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% 49%;filter:saturate(.86) contrast(1.1)}/* La photo de l accueil prend la couleur du Coupe : le calque remplace la
   teinte sans toucher aux reflets ni aux ombres. */
.hero-teinte{position:absolute;z-index:-2;inset:0;background:var(--teinte-daily,#e5443e);mix-blend-mode:color;opacity:.92;pointer-events:none}
.dashboard-hero:before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#07131c 0%,#07131ce8 28%,#07131c8c 54%,#07131c08 90%),linear-gradient(0deg,#07131ce0,transparent 40%)}.dashboard-hero .hero-content{padding:3.8rem 0 4rem}.dashboard-hero .display{max-width:9.5ch;font-size:clamp(3.3rem,6.1vw,6.2rem)}.dashboard-hero p.intro{max-width:31rem;margin:0 0 1.7rem}.dashboard-hero .hero-footer{position:absolute;bottom:0;left:0;right:0;border-top:1px solid #ffffff30}.hero-footer-inner{display:flex;justify-content:space-between;padding:.8rem 0;font-size:.68rem;letter-spacing:.2em;font-weight:900;color:#dce4e5}.dashboard-body{background:var(--paper);color:var(--papertext);padding:2rem 0 6rem}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--paperline);background:#fff}.summary{min-height:130px;padding:1.35rem 1.5rem;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s}.summary:hover{background:#f6f8f8}.summary+.summary{border-left:1px solid var(--paperline)}.summary-label{display:flex;justify-content:space-between;gap:1rem;text-transform:uppercase;font-size:.68rem;letter-spacing:.16em;font-weight:900;color:#566d78}.summary-icon{color:var(--red);font-size:1.1rem}.summary strong{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:clamp(1.3rem,2.2vw,2.1rem);letter-spacing:-.04em;line-height:1.06}.summary small{color:#6c7e86}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.9fr);gap:2.2rem;margin-top:3rem}.dashboard-body .section-label{border-bottom-color:#c9d3d4}.dashboard-body .section-label h2{color:#173342}.dashboard-card{background:#fff;border:1px solid #dce2e2;padding:1.4rem}.news-item{display:grid;grid-template-columns:6rem minmax(0,1fr) auto;gap:1.3rem;padding:1.35rem 0;border-bottom:1px solid #dbe1e1}.news-item:first-child{padding-top:.25rem}.news-item:last-child{border:0}.news-date{font-size:.76rem;font-weight:800;letter-spacing:.1em;color:#bf3b37;text-transform:uppercase}.news-item h3{font-size:1.16rem;letter-spacing:-.025em;margin:0 0 .42rem}.news-item p{color:#677980;font-size:.9rem;line-height:1.5;margin:0}.news-item .arrow{font-size:1.3rem;color:#c63130}.side-stack{display:grid;gap:2rem;align-content:start}.side-car{position:relative;overflow:hidden;background:#112b3c;color:#fff;min-height:235px;padding:1.5rem;border-radius:14px;box-shadow:0 18px 44px -20px color-mix(in srgb, var(--teinte-daily, #7b8b94) 95%, transparent)}.side-car img{position:absolute;right:-7%;bottom:-10%;width:82%;height:85%;object-fit:contain;opacity:.9;mask-image:linear-gradient(90deg,transparent 0%,#000 26%)}.side-car:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#102837 0%,#102837d8 50%,#10283718 100%)}.side-car-content{position:relative;max-width:58%;height:100%;display:flex;flex-direction:column;align-items:start}.side-car .eyebrow{font-size:.62rem}.side-car h3{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.3rem;line-height:1;margin:.8rem 0}.side-car p{font-size:.8rem;line-height:1.5;color:#d7e2e5;margin:.3rem 0 auto}.side-car a{margin-top:1.3rem;color:#fff;font-size:.78rem;font-weight:900;text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:.35rem}.event-mini{background:#fff;border:1px solid #dce2e2;display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:1.2rem}.event-mini .date-tile{background:#e5443e;color:#fff;min-height:5.5rem}.event-mini h3{margin:.2rem 0 .35rem;font-size:1rem}.event-mini p{color:#6a7d84;margin:0;font-size:.82rem;line-height:1.5}.event-mini a{display:inline-block;margin-top:.8rem;color:#b52b2a;font-size:.79rem;font-weight:900;text-decoration:none}.date-tile{display:grid;align-content:center;justify-items:center;background:#183747;color:#fff;text-align:center;min-width:74px;padding:.4rem}.date-tile b{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.1rem;line-height:1}.date-tile span{font-size:.62rem;letter-spacing:.18em;font-weight:900;text-transform:uppercase}.dashboard-bottom{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.quick-panel{position:relative;overflow:hidden;min-height:215px;background:#0d2531;color:#fff;padding:1.9rem 1.8rem 1.7rem;text-decoration:none;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}.quick-panel:after{content:"↗";position:absolute;right:1.35rem;bottom:1.2rem;color:var(--red2);font-size:1.5rem}.quick-panel strong{display:block;font-size:1.55rem;margin:.6rem 0}.quick-panel p{max-width:24rem;color:#b8cbd2;line-height:1.55;font-size:.95rem}.quick-panel:nth-child(2){background:#14313f}.quick-panel:nth-child(3){background:#1a3843}
.panel{background:#102735;border:1px solid var(--line);padding:1.4rem}.panel.light{background:#eef2f1;color:#142d38;border-color:#cbd7d8}.panel h2,.panel h3{margin-top:0}.grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}.grid-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}.stack{display:grid;gap:1.1rem}.label{display:block;color:#bdcbd0;font-size:.78rem;font-weight:800;letter-spacing:.06em;margin:0 0 .35rem}.field,select.field,textarea.field{display:block;width:100%;background:#071a25;border:1px solid #405c68;border-radius:3px;color:#fff;padding:.8rem .9rem;min-height:44px}.field:focus{border-color:#ff766d;outline:none;box-shadow:0 0 0 2px #e5443e50}textarea.field{min-height:110px;resize:vertical}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.form-grid .wide{grid-column:1/-1}.form-error{color:#ffaaa1;font-size:.87rem}.auth-layout{min-height:calc(100vh - 155px);display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,.72fr)}.auth-art{position:relative;min-height:650px;background:#07131c;overflow:hidden}.auth-art img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:62% 50%}.auth-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07131ce8,transparent 60%)}.auth-art div{position:absolute;bottom:3.5rem;left:clamp(2rem,6vw,6rem);z-index:1;max-width:30rem}.auth-art h1{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:clamp(3rem,5vw,5.3rem);line-height:.97;letter-spacing:-.06em;margin:.5rem 0}.auth-art p{line-height:1.6;color:#d4dfe2}.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:3rem clamp(1.5rem,4vw,5rem);background:#102633}.auth-form{width:min(100%,430px)}.auth-form h2{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:3rem;letter-spacing:-.05em;margin:.5rem 0}.auth-form p{color:#c3d1d5;line-height:1.5}.auth-form .stack{margin:2rem 0}.auth-form .btn{width:100%}.auth-help{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;font-size:.82rem}.auth-help a{color:#ff968d}.auth-note{margin-top:1.5rem;padding:1rem;border:1px solid #49616b;color:#c2d0d5;line-height:1.5;font-size:.8rem}
.garage-layout{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.45fr);gap:1.2rem}.car-list{display:grid;gap:.65rem;align-content:start}.car-list button{display:grid;grid-template-columns:70px 1fr auto;gap:.8rem;align-items:center;width:100%;background:#102735;color:#fff;border:1px solid var(--line);text-align:left;padding:.7rem}.car-list button.active{border-color:var(--red);background:#19323e}.car-list img{width:70px;height:48px;object-fit:contain}.car-list small{display:block;color:var(--muted);margin-top:.25rem}.car-detail{min-height:350px;background:#0d2633;border:1px solid var(--line);overflow:hidden}.car-detail-visual{position:relative;min-height:310px;background:radial-gradient(circle at 70% 35%,#38576b,#102836 63%);display:flex;align-items:end}.car-detail-visual img{display:block;width:min(78%,680px);height:300px;object-fit:contain;margin:auto auto 0}.car-detail-visual .car-tag{position:absolute;top:1.3rem;left:1.5rem;background:var(--red);padding:.4rem .7rem;text-transform:uppercase;letter-spacing:.14em;font-size:.65rem;font-weight:900}.car-detail-body{padding:1.5rem}.car-detail .page-head h2{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.9rem;letter-spacing:-.06em;line-height:1;margin:0}.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:1.5rem 0}.specs div{padding:1rem .7rem 1rem 0}.specs div+div{border-left:1px solid var(--line);padding-left:.7rem}.specs span{display:block;color:#a1b5be;text-transform:uppercase;font-size:.66rem;letter-spacing:.13em;font-weight:900}.specs strong{display:block;margin-top:.45rem;font-size:.96rem;overflow-wrap:anywhere}.maintenance-list{display:grid;gap:.65rem}.maintenance-row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.88rem}.maintenance-row span{color:var(--muted)}.photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1.2rem}.photo-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#183747;border:1px solid var(--line)}
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.5rem}.filter-bar .field{max-width:350px}.pill{border:1px solid #49616c;background:#102936;color:#d5e0e3;border-radius:50px;padding:.65rem 1rem;font-size:.83rem;font-weight:800}.pill.active{background:var(--red);border-color:var(--red);color:var(--red-ink)}.list-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}/* Les annonces : une vignette en tete, un filet rouge, des coins arrondis.
   Sans photo, la silhouette du Coupe evite le rectangle vide. */
.content-card.annonce { position: relative; padding: 0; overflow: hidden; border-radius: 16px; }
.content-card.annonce > .meta, .content-card.annonce > h3, .content-card.annonce > p { padding-inline: 1.15rem; }
.content-card.annonce > .meta { padding-top: 1rem; }
.content-card.annonce > .card-bottom, .content-card.annonce > .btn-row { padding: 0 1.15rem 1.1rem; }
.annonce-photo { position: relative; height: 150px; background: #0c1f2b; overflow: hidden; }
.annonce-photo img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.annonce-photo.vide { display: grid; place-items: center; background: radial-gradient(120% 130% at 20% -10%, #17313f, #0c1f2b 70%); }
.annonce-photo.vide img { width: 78%; max-width: 78%; height: auto; max-height: 76%;
  object-fit: contain; opacity: .52; }
.annonce-photo.vide span { position: absolute; bottom: .6rem; right: .8rem; font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--red2); }
.content-card.annonce::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, rgba(229,68,62,0) 70%); }
.content-card.annonce:hover { transform: translateY(-2px); border-color: #54727f; }
.content-card.annonce { transition: transform .18s ease, border-color .18s ease; }
.btn-row.centre { justify-content: center; }

.content-card{background:#102735;border:1px solid var(--line);padding:1.3rem;display:flex;flex-direction:column;gap:.8rem;min-height:175px}.content-card:hover{border-color:#54727f}.content-card h3{margin:0;font-size:1.14rem;line-height:1.3}.content-card p{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0}.content-card .meta{font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:#fa7770;font-weight:900}.content-card .card-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:.7rem;color:#abc1c9;font-size:.77rem}.content-card a{color:#fff;text-decoration:none;border-bottom:2px solid var(--red);font-weight:800}.content-card img{width:100%;max-height:190px;object-fit:cover}.content-card .chip{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:#fff;background:#274250;padding:.4rem .6rem}.event-card{display:grid;grid-template-columns:78px 1fr;gap:1.2rem}.event-card .date-tile{align-self:start}.event-card .event-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:auto}.event-card .event-actions button{margin-top:.7rem}.detail-drawer{position:fixed;z-index:60;right:0;top:0;bottom:0;width:min(100%,520px);background:#112936;box-shadow:-20px 0 70px #000a;overflow:auto;padding:2rem}.drawer-backdrop{position:fixed;z-index:59;inset:0;background:#0009}.detail-drawer h2{font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.4rem;letter-spacing:-.04em}.drawer-close{float:right;background:none;border:0;color:#fff;font-size:1.6rem}.drawer-meta{color:#ff837b;font-size:.76rem;text-transform:uppercase;letter-spacing:.15em;font-weight:900}.drawer-copy{white-space:pre-wrap;line-height:1.65;color:#d8e2e5}.drawer-section{border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1.2rem}.drawer-section h3{margin:.2rem 0 .8rem}
.messages-layout{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--line);min-height:550px}.thread-list{border-right:1px solid var(--line);background:#0d2230}.thread-list button{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:#fff;text-align:left;padding:1rem;display:grid;grid-template-columns:38px 1fr;gap:.8rem}.thread-list button.active{background:#1b3a48;border-left:3px solid var(--red)}.thread-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#3a5662;font-weight:900}.thread-list strong,.thread-list small{display:block}.thread-list small{color:#abc0c9;margin-top:.2rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.thread-list b{color:#fff;background:var(--red);border-radius:50%;padding:.1rem .4rem;font-size:.7rem}.conversation{display:flex;flex-direction:column;min-height:550px}.conversation-head{border-bottom:1px solid var(--line);padding:1.1rem 1.3rem;font-weight:800}.message-stream{flex:1;display:flex;flex-direction:column;gap:.9rem;padding:1.2rem;max-height:550px;overflow:auto}.message-bubble{max-width:76%;background:#1b3a48;padding:.8rem 1rem;align-self:flex-start;white-space:pre-wrap;line-height:1.5;border-radius:2px 12px 12px 12px;font-size:.89rem}.message-bubble.mine{align-self:flex-end;background:#9b302d;border-radius:12px 2px 12px 12px}.message-bubble small{display:block;margin-top:.45rem;color:#d7e2e5;font-size:.68rem}.message-form{display:flex;gap:.65rem;padding:1rem;border-top:1px solid var(--line)}.message-form .field{flex:1}.message-form .btn{flex-shrink:0}
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}.admin-stat{background:#12303d;border:1px solid var(--line);padding:1.3rem}.admin-stat b{display:block;font-family:"Barlow Condensed",Bahnschrift,"Arial Narrow",Arial,sans-serif;font-size:2.2rem;line-height:1}.admin-stat span{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;margin-top:.4rem}.data-table{width:100%;border-collapse:collapse;font-size:.85rem}.data-table th{text-align:left;color:#a9bcc4;font-size:.69rem;text-transform:uppercase;letter-spacing:.13em;padding:.9rem .7rem;border-bottom:1px solid var(--line)}.data-table td{padding:.9rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}.data-table tr:hover td{background:#17323e}.table-scroll{overflow-x:auto}.status{display:inline-flex;align-items:center;width:max-content;max-width:100%;justify-self:start;align-self:start;padding:.28rem .62rem;border-radius:999px;border:1px solid rgba(180,205,218,.22);font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;background:rgba(120,152,170,.16);color:#cfe0e8}.status.good{background:rgba(72,158,122,.15);border-color:rgba(110,190,155,.32);color:#8ad3b0}.status.warn{background:rgba(190,130,60,.15);border-color:rgba(205,155,85,.32);color:#e2ae72}.status.bad{background:rgba(180,70,64,.15);border-color:rgba(205,105,100,.32);color:#e59f9a}.account-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:1.1rem}.profile-row{display:flex;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line);padding:.9rem 0}.profile-row span{color:var(--muted)}.site-footer{border-top:1px solid var(--line);background:#06111a;color:#9eb2ba}.footer-inner{width:min(100% - 3rem,1440px);margin:auto;display:flex;justify-content:space-between;gap:1.5rem;padding:2rem 0;font-size:.74rem}.footer-inner div{display:flex;gap:1rem}.footer-inner a{text-decoration:none}.footer-inner a:hover{color:#fff}
@media(max-width:1180px){.header-inner{gap:1.2rem}.main-nav{gap:.7rem}.main-nav a{font-size:.78rem}.brand-406{font-size:2rem}.brand-label{font-size:.63rem}.account-link span:last-child{display:none}}
@media(max-width:980px){.header-inner{height:70px}.menu-toggle{display:block;order:3;margin-left:auto}.header-actions{margin-left:auto}.main-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#071620;border-bottom:1px solid var(--line);padding:.6rem 1.5rem 1.2rem;box-shadow:0 20px 40px #0008;flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{height:auto;min-height:43px;font-size:.92rem}.main-nav a.active:after{left:auto;top:.5rem;bottom:.5rem;width:3px;height:auto}.dashboard-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.summary-grid{grid-template-columns:repeat(2,1fr)}.summary:nth-child(3){border-left:0;border-top:1px solid var(--paperline)}.summary:nth-child(4){border-top:1px solid var(--paperline)}.auth-layout{grid-template-columns:1fr}.auth-art{min-height:340px}.auth-art img{object-position:50% 55%}.auth-art div{bottom:1.5rem}.auth-art h1{font-size:3rem}}
@media(max-width:720px){.shell,.header-inner,.footer-inner{width:min(100% - 2rem,1440px)}.header-inner{gap:.7rem}.header-actions{padding-left:.5rem}.brand-406{font-size:1.85rem}.brand-label{font-size:.6rem}.dashboard-hero{min-height:540px;align-items:end}.dashboard-hero img{height:58%;bottom:auto;object-position:60% 40%}.dashboard-hero:before{background:linear-gradient(0deg,#07131c 0%,#07131cf2 36%,#07131c17 70%)}.dashboard-hero .hero-content{padding:14rem 0 4rem}.dashboard-hero .display{font-size:3.6rem}.summary{min-height:115px;padding:1rem}.summary strong{font-size:1.45rem}.dashboard-grid{gap:2rem}.side-stack{grid-template-columns:1fr}.dashboard-bottom,.grid-three,.grid-two,.list-grid,.garage-layout,.account-grid{grid-template-columns:1fr}.page{padding:2.5rem 0 4rem}.page-head{align-items:start;flex-direction:column;gap:1rem}.page-title{font-size:3.2rem}.news-item{grid-template-columns:1fr auto;gap:.4rem}.news-date{grid-column:1/-1}.specs{grid-template-columns:repeat(2,1fr)}.specs div:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--line)}.specs div:nth-child(4){border-top:1px solid var(--line)}.messages-layout{grid-template-columns:1fr}.thread-list{max-height:240px;overflow:auto;border-right:0;border-bottom:1px solid var(--line)}.conversation{min-height:470px}.admin-stat-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{flex-direction:column}.footer-inner div{flex-wrap:wrap}.form-grid{grid-template-columns:1fr}.form-grid .wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
#main{scroll-margin-top:78px}.plain-arrow{border:0;background:none;color:#c63130;font-size:1.4rem;align-self:start}
.preview-banner{position:relative}
.auth-art > div{position:absolute}.auth-art > div .eyebrow{position:static;bottom:auto;left:auto}
.message-actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:.5rem}.message-actions button{border:0;border-bottom:1px solid #ffffff8a;background:none;color:#fff;padding:.1rem 0;font-size:.68rem;font-weight:800}.message-actions button:hover{border-color:#fff}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.garage-photo-actions{margin:.4rem 0 1.2rem}.garage-photo-actions label{cursor:pointer}.car-detail-visual.with-photo{background:#0b1b23}.car-detail-visual.with-photo img{width:100%;height:350px;object-fit:cover;margin:0}.maintenance-row>div{display:grid;gap:.25rem}.maintenance-row span{line-height:1.45}.subtle-action{align-self:start;border:0;border-bottom:1px solid #fa8b84;background:none;color:#ffa69f;font-size:.75rem;font-weight:800;padding:.15rem 0}.subtle-action:hover{color:#fff}
.dashboard-bottom{grid-template-columns:repeat(4,minmax(0,1fr))}.quick-panel[type="button"]{text-align:left;border:0;font:inherit;cursor:pointer}.atelier-search{margin-bottom:1.5rem}.atelier-search form .btn{align-self:end}@media(max-width:980px){.dashboard-bottom{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:720px){.dashboard-bottom{grid-template-columns:1fr}}
.conversation-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.conversation-head .subtle-action{margin-left:auto}

/* Les albums de photos publiques. */
.album-section { margin-top: 28px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 14px; }
.album-card { position: relative; display: block; padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.04); color: inherit; text-align: left; cursor: pointer; }
.album-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.album-card .album-vide { display: grid; place-items: center; aspect-ratio: 4 / 3; color: rgba(255,255,255,.45); font-size: 13px; }
.album-legende { display: block; padding: 10px 12px; }
.album-legende strong { display: block; font-size: 14px; }
.album-legende small { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 12px; }
.album-grid.media { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.album-media { margin: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); }
.album-media img, .album-media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.album-media figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; color: rgba(255,255,255,.6); font-size: 12px; }

/* Les zones de la galerie : une par proprietaire. Le contour n'est pas un
   trait uni mais un filet degrade dans la couleur du Coupe — vif au coin haut
   gauche, il s'efface vers le bas comme un reflet sur la carrosserie, avec une
   ombre teintee a peine posee sous la zone. Tout reste tres discret.
   La couleur est d'abord eclaircie : sinon un noir granit donnerait un contour
   invisible sur le fond sombre du site. */
.zones { display: grid; gap: 16px; margin-top: 18px; }
.zone { --teinte: #7b8b94; --contour: color-mix(in srgb, var(--teinte) 62%, #cfd9de);
  position: relative; padding: 17px 19px 19px; border: 1px solid color-mix(in srgb, var(--contour) 30%, transparent); border-radius: 16px;
  background: radial-gradient(130% 90% at 6% -20%, color-mix(in srgb, var(--teinte) 11%, transparent), transparent 62%);
  box-shadow: 0 14px 34px -26px color-mix(in srgb, var(--teinte) 80%, transparent); }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .zone { border-color: transparent; }
  .zone::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(142deg,
      color-mix(in srgb, var(--contour) 88%, transparent) 0%,
      color-mix(in srgb, var(--contour) 30%, transparent) 34%,
      rgba(255,255,255,.05) 62%,
      color-mix(in srgb, var(--contour) 60%, transparent) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}
.zone.mienne { box-shadow: 0 14px 36px -24px color-mix(in srgb, var(--teinte) 90%, transparent); }
.zone.mienne::before { background: linear-gradient(142deg,
  var(--contour) 0%,
  color-mix(in srgb, var(--contour) 42%, transparent) 36%,
  rgba(255,255,255,.07) 64%,
  color-mix(in srgb, var(--contour) 72%, transparent) 100%); }
.zone-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.zone-nom { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: #fff; font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.zone-nom span { color: color-mix(in srgb, var(--teinte) 70%, #fff); font-size: 15px; }
.zone-nom:hover { text-decoration: underline; }
.zone-detail { color: rgba(255,255,255,.45); font-size: 12px; }
.zone .album-grid { margin-top: 12px; }
.galerie-titre { margin-top: 26px; }
.album-section.sorties { margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }

/* Le meme filet que les zones de la galerie, autour de la carte du Coupe :
   la couleur de la voiture, vive en haut a gauche, effacee vers le bas. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .side-car::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 2;
    --contour-daily: color-mix(in srgb, var(--teinte-daily, #7b8b94) 70%, #dfe8ec);
    background: linear-gradient(142deg,
      var(--contour-daily) 0%,
      color-mix(in srgb, var(--contour-daily) 62%, transparent) 32%,
      rgba(255,255,255,.16) 58%,
      color-mix(in srgb, var(--contour-daily) 88%, transparent) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
}

/* Les separations entre nouvelles : nettes au centre, elles s'effacent aux
   deux bouts plutot que de buter sur un trait franc. */
.news-item { border-bottom: 0;
  background-image: linear-gradient(90deg, rgba(120,140,148,0) 0%, rgba(104,126,135,.55) 14%, rgba(72,96,106,1) 50%, rgba(104,126,135,.55) 86%, rgba(120,140,148,0) 100%);
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%; }
.news-item:last-child { background-image: none; }

/* La boite a idees, en pleine page : le formulaire tient a gauche pendant
   qu'on parcourt les idees a droite. */
.idees-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: 1.4rem; align-items: start; }
.idees-form { position: sticky; top: 92px; padding: 1.5rem 1.6rem 1.7rem; border: 1px solid var(--line); border-radius: 16px; background: #0d2330; display: grid; gap: 1rem; }
.idees-form .section-label { margin: 0; }
.idees-compteurs { display: grid; gap: .35rem; padding: .9rem 0 .2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.idees-compteurs strong { color: var(--text); font-size: .95rem; }
.idees-liste { display: grid; gap: 1rem; }
.idee-carte { position: relative; padding: 1.3rem 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: 16px; background: #0d2330; display: grid; gap: .6rem; }
.idee-carte.mienne { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.idee-carte > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.idee-carte .meta { color: var(--red2); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.idee-carte h3 { margin: 0; font-size: 1.15rem; }
.idee-texte { margin: 0; white-space: pre-wrap; color: #d5e2e7; line-height: 1.55; font-size: .95rem; }
.idee-carte .btn-row { margin-top: .3rem; gap: .5rem; }
.idee-reponse { margin-top: .4rem; padding: .9rem 1.1rem; border-left: 2px solid color-mix(in srgb, var(--red) 70%, transparent); border-radius: 0 12px 12px 0; background: rgba(255,255,255,.04); }
.idee-reponse strong { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.idee-reponse p { margin: 0; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; }
.idee-admin { margin-top: .5rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.idee-admin summary { cursor: pointer; color: var(--muted); font-size: .8rem; font-weight: 700; }
.idee-admin .stack { margin-top: .8rem; }
@media (max-width: 1000px) {
  .idees-layout { grid-template-columns: 1fr; }
  .idees-form { position: static; }
}
/* L'échange sous une idée : les messages de l'administrateur sont décalés et
   marqués par la couleur du club, ceux du membre restent neutres. */
.idee-fil { display: grid; gap: .6rem; margin-top: .5rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.idee-message { padding: .7rem .95rem; border-radius: 12px; background: rgba(255,255,255,.04); }
.idee-message.admin { background: color-mix(in srgb, var(--red) 12%, rgba(255,255,255,.03)); border-left: 2px solid color-mix(in srgb, var(--red) 65%, transparent); }
.idee-message-tete { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.idee-message-tete .subtle-action { margin-left: auto; }
.idee-message p { margin: .35rem 0 0; white-space: pre-wrap; font-size: .92rem; line-height: 1.5; }
.idee-repondre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.idee-repondre textarea { min-height: 48px; }

/* Les raccourcis du bas doivent se voir comme des boutons : un liseré de
   couleur en haut, une flèche dans le coin, et la carte qui s'éclaire au
   survol comme au clavier. */
.quick-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--red) 0%, color-mix(in srgb, var(--red) 25%, transparent) 62%, transparent 100%); }
.quick-panel::after { content: "↗"; position: absolute; top: 1.25rem; right: 1.4rem; color: var(--red2); font-size: 1.05rem; font-weight: 900; }
.quick-panel strong { position: relative; z-index: 1; }
.quick-panel p { margin-top: auto; margin-bottom: 0; }
.quick-panel:hover, .quick-panel:focus-visible { background: #14364a; border-color: color-mix(in srgb, var(--red) 60%, transparent); box-shadow: 0 16px 34px -26px color-mix(in srgb, var(--red) 90%, transparent); outline: none; }
.quick-panel:hover p, .quick-panel:focus-visible p { color: #d9e7ec; }
@media (prefers-reduced-motion: no-preference) {
  .quick-panel { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
  .quick-panel:hover, .quick-panel:focus-visible { transform: translateY(-2px); }
}

/* L'atelier : un dossier repliable par catégorie, et le choix du véhicule
   au-dessus pour ne garder que ses documents. */
.guide-voiture { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1rem; }
.guide-voiture label { color: var(--muted); font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
/* L'ouverture de la galerie : tout est centre, le Coupe entre le titre et la
   phrase. Le dessin est noir cerne de blanc, il tient donc sur le fond sombre
   du site ; les deux sillages, francais et italien, rappellent d'ou vient
   cette voiture. La phrase est en serif italique, pour trancher avec la
   police condensee de tout le reste. */
.galerie-hero { text-align: center; margin-bottom: 2.6rem; }
.galerie-hero .eyebrow::before { display: none; }
.galerie-hero .page-title { margin: .55rem 0 .5rem; }
/* La voiture et sa trainee sont deux images : la premiere garde sa taille, la
   seconde s'etire sur la largeur qui reste. Un seul fichier aurait grossi la
   voiture des qu'on allongeait le sillage. */
.galerie-signature { display: flex; align-items: center; justify-content: center;
  width: min(560px, 92%); margin: .3rem auto 0; }
.signature-voiture { height: 38px; width: auto; flex: none; }
.signature-trainee { height: 38px; flex: 1 1 auto; min-width: 0; object-fit: fill; }
.galerie-hero-phrase { margin: 0 auto; max-width: 30rem;
  font-family: "Italiana", Georgia, "Times New Roman", serif; font-style: normal; font-weight: 400; letter-spacing: .022em;
  font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.5; color: #eef3f5; }

.guide-voiture select { max-width: 460px; }
.guide-voiture .guide-annee { width: 7.5rem; }
.guide-voiture-note { color: var(--red2); font-size: .8rem; }
/* Le second niveau : un sujet dans une famille. Plus discret que le dossier
   qui le contient, pour qu'on voie tout de suite lequel est lequel. */
.guide-sujet { margin: 0 .9rem .6rem; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.02); overflow: hidden; }
.guide-sujet > summary { display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; cursor: pointer; list-style: none; font-weight: 700; font-size: .8rem; color: #dbe5e8; }
.guide-sujet > summary::-webkit-details-marker { display: none; }
.guide-sujet > summary::before { content: "▸"; color: var(--red2); font-size: .8rem; }
.guide-sujet[open] > summary::before { content: "▾"; }
.guide-sujet > summary em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .75rem; }
.guide-sujet .list-grid { padding: 0 .9rem .9rem; }

/* L Atelier : commandes centrees sous l en-tete, largeur de lecture bornee.
   Etales sur 1400 pixels, les dossiers n etaient plus que des barres vides. */
.page .filter-bar { justify-content: center; }
.guide-voiture { justify-content: center; }
.guide-voiture + .filter-bar, .page .filter-bar:has(#guide-search) { justify-content: center; }
#guide-search { min-width: min(420px, 100%); }
.guide-groupe, .guide-sujet, .atelier-liste { max-width: 1040px; margin-inline: auto; }
.guide-groupe > summary > span { display: flex; flex-direction: column; gap: .18rem; min-width: 0; }
.guide-groupe > summary > span strong { font: inherit; }
.guide-groupe > summary > span small { font-weight: 500; font-size: .74rem; letter-spacing: .02em;
  text-transform: none; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-groupe > summary em { margin-left: auto; font-style: normal; color: var(--muted); }
.guide-groupe > summary:hover { background: rgba(255,255,255,.03); }

.guide-groupe { margin-bottom: .9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; }
.guide-groupe > summary { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.2rem; cursor: pointer; list-style: none; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
.guide-groupe > summary::-webkit-details-marker { display: none; }
.guide-groupe > summary::before { content: "▸"; color: var(--red2); font-size: .9rem; }
.guide-groupe[open] > summary::before { content: "▾"; }
.guide-groupe > summary em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .75rem; }
.guide-groupe[open] > summary { border-bottom: 1px solid var(--line); }
.guide-groupe .list-grid { padding: 1rem 1.2rem 1.2rem; }

/* Les en-têtes de tableau qui classent : on doit voir qu'ils se cliquent. */
.data-table th .tri { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.data-table th .tri span { color: var(--muted); font-size: .7rem; }
.data-table th .tri:hover { color: var(--red2); }
.data-table th .tri.actif { color: var(--red2); }
.data-table th .tri.actif span { color: var(--red2); }
.idee-decision { margin-top: .6rem; padding-top: .8rem; border-top: 1px dashed var(--line); display: grid; gap: .5rem; }
.idee-decision .muted.small { margin: 0; }
.idee-decision .idee-admin { margin-top: .2rem; padding-top: 0; border-top: 0; }

/* Le recensement : une fiche par Coupé, avec sa photo ou sa silhouette. */
.recense-groupe { margin-top: 1.8rem; }
.recense-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-top: .9rem; }
.recense-fiche { border: 1px solid var(--line); border-radius: 16px; background: #0d2330; overflow: hidden; display: flex; flex-direction: column; }
.recense-fiche.mienne { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.recense-image { position: relative; background: linear-gradient(160deg, #10293a, #0b1c27); display: grid; place-items: center; padding: .8rem; }
.recense-image img { width: 100%; max-height: 150px; object-fit: contain; }
.recense-image.photo { padding: 0; }
.recense-image.photo img { max-height: none; aspect-ratio: 4 / 3; object-fit: cover; }
.recense-numero { position: absolute; top: .6rem; left: .7rem; padding: .2rem .5rem; border-radius: 999px; background: rgba(8,22,32,.78); color: #dbe7ec; font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.recense-corps { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .35rem; }
.recense-tete { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.recense-tete h3 { margin: 0; font-size: 1.1rem; }
.recense-detail { margin: 0; color: #cfdde3; font-size: .88rem; }
.recense-proprio { margin: 0; color: var(--muted); font-size: .8rem; }
.recense-note { margin: .3rem 0 0; color: #b9cbd2; font-size: .85rem; font-style: italic; }
.recense-fiche .card-bottom { margin-top: .5rem; flex-wrap: wrap; gap: .4rem; }
.event-affiche { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; margin: .2rem 0 1rem; }

/* La fiche d'un Coupé : les rubriques reprennent le petit titre du site, et
   les deux colonnes respirent. */
.car-detail .section-label { margin-top: .2rem; }
.car-detail .section-label h2 { font-family: inherit; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #cbd9de; }
.car-detail .grid-two { gap: 1.6rem; margin-top: 1.6rem; }
.car-detail .grid-two > section { min-width: 0; }
.car-detail .specs { margin-top: 1.4rem; }
.car-detail .garage-photo-actions { margin-top: .9rem; }
.car-detail .album-section { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.car-detail .maintenance-row { padding: .75rem 0; }
.car-detail .profile-row { padding: .7rem 0; }

/* --------------------------------------------------- la fiche d'un Coupé
   La photo devient une vraie image de couverture : le nom du Coupé s'écrit
   dessus, les actions tiennent sur une seule ligne, et les rubriques sont
   posées sur des panneaux au lieu de flotter sur un grand aplat. */
.car-detail { border-radius: 18px; }
.car-hero { --teinte: #6d7d86; position: relative; min-height: 300px; overflow: hidden; background: radial-gradient(circle at 70% 30%, #33556b, #0e2532 65%); display: flex; }
.car-hero img { width: 100%; height: 340px; object-fit: contain; object-position: center bottom; margin-top: auto; }
.car-hero.avec-photo img { object-fit: cover; object-position: center; height: 340px; }
.car-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,19,28,.15) 0%, rgba(7,19,28,.05) 45%, rgba(7,19,28,.82) 82%, rgba(7,19,28,.96) 100%); }
.car-hero .car-tag { position: absolute; top: 1.1rem; left: 1.2rem; z-index: 2; border-radius: 999px; background: color-mix(in srgb, var(--teinte) 85%, #000); color: #fff; }
.car-hero-texte { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.2rem; }
.car-hero-texte h2 { font-family: "Barlow Condensed", Bahnschrift, "Arial Narrow", Arial, sans-serif; font-size: 2.9rem; letter-spacing: -.05em; line-height: 1; margin: 0 0 .25rem; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.car-hero-texte p { margin: 0; color: #cfdee5; font-size: .92rem; }

.car-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.3rem; }
.car-actions .btn.tiny { min-height: 38px; }
.car-actions .retrait { margin-left: auto; color: #e59f9a; border-color: rgba(200,110,105,.35); }

.spec-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.spec-cards > div { padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); display: grid; gap: .3rem; }
.spec-cards span { color: var(--muted); font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.spec-cards strong { display: flex; align-items: center; gap: .45rem; font-size: .98rem; }
.spec-couleur { --teinte: #6d7d86; }
.pastille-teinte { width: 13px; height: 13px; border-radius: 50%; background: var(--teinte); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 10px -2px var(--teinte); flex: none; }

.car-detail .panneau-fiche { padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.025); }
.car-detail .panneau-fiche .section-label { margin-top: 0; padding-bottom: .7rem; }
.car-detail .maintenance-row:last-child, .car-detail .profile-row:last-child { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 760px) {
  .spec-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .car-hero-texte h2 { font-size: 2.1rem; }
  .car-actions .retrait { margin-left: 0; }
}

/* De la matière : la couleur du Coupé affleure sur la couverture, sur les
   cartes et sur les panneaux, et les chiffres prennent la police du titre. */
.car-detail { --teinte: #6d7d86; position: relative;
  background: linear-gradient(168deg, color-mix(in srgb, var(--teinte) 9%, #0d2633) 0%, #0d2633 42%);
  box-shadow: 0 26px 60px -44px color-mix(in srgb, var(--teinte) 90%, transparent); }
.car-detail::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
  background: linear-gradient(150deg, color-mix(in srgb, var(--teinte) 72%, #dfe8ec) 0%, color-mix(in srgb, var(--teinte) 22%, transparent) 38%, rgba(255,255,255,.05) 66%, color-mix(in srgb, var(--teinte) 45%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }

.car-hero::after { background:
  radial-gradient(120% 90% at 18% 110%, color-mix(in srgb, var(--teinte) 34%, transparent) 0%, transparent 62%),
  linear-gradient(180deg, rgba(7,19,28,.12) 0%, rgba(7,19,28,.04) 45%, rgba(7,19,28,.8) 80%, rgba(7,19,28,.96) 100%); }
.car-hero-texte h2 { color: #fff; }
.car-hero-texte p { color: color-mix(in srgb, var(--teinte) 45%, #dfe9ee); font-weight: 600; letter-spacing: .01em; }

.spec-cards > div { position: relative; overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--teinte) 12%, rgba(255,255,255,.04)), rgba(255,255,255,.02) 70%);
  border-color: color-mix(in srgb, var(--teinte) 22%, var(--line)); }
.spec-cards > div::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teinte) 85%, #dfe8ec), transparent 80%); }
.spec-cards span { color: color-mix(in srgb, var(--teinte) 40%, #9fb4bd); }
.spec-cards strong { font-family: "Barlow Condensed", Bahnschrift, "Arial Narrow", Arial, sans-serif; font-size: 1.32rem; letter-spacing: -.01em; }

.car-detail .panneau-fiche { position: relative; overflow: hidden;
  background: linear-gradient(170deg, color-mix(in srgb, var(--teinte) 7%, rgba(255,255,255,.035)), rgba(255,255,255,.015) 60%);
  border-color: color-mix(in srgb, var(--teinte) 18%, var(--line)); }
.car-detail .panneau-fiche::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teinte) 80%, #dfe8ec) 0%, transparent 72%); }
.car-detail .section-label h2 { color: color-mix(in srgb, var(--teinte) 35%, #e4eef2); }
.car-detail .maintenance-row strong { font-size: 1rem; }
.car-detail .maintenance-row span { color: #b6c8cf; }
.car-detail .profile-row strong { font-family: "Barlow Condensed", Bahnschrift, "Arial Narrow", Arial, sans-serif; font-size: 1.12rem; letter-spacing: .01em; }
.car-detail .album-section { border-top-color: color-mix(in srgb, var(--teinte) 22%, var(--line)); }
.car-actions .btn.tiny:not(.ghost) { background: color-mix(in srgb, var(--teinte) 88%, var(--red)); border-color: transparent; }

/* Qui peut brancher une Diagbox : lisible d un coup d oeil dans l annuaire. */
.diag-oui{display:inline-block;vertical-align:middle;border:1px solid #7c8e0b;background:#e6ff3822;color:#7c8e0b;border-radius:50px;padding:.1rem .5rem;font-size:.66rem;font-weight:800;letter-spacing:.06em;white-space:nowrap}

/* Le tchat du club sur le tableau de bord. Ses regles d origine sont injectees
   en ligne par le script, donc apres cette feuille, et dessinent le tiroir
   sombre : fond degrade, texte clair, elements en ligne. Ici le fond est du
   papier, d ou ces surcharges, plus specifiques pour passer devant. */
.dashboard-body .c406-public-chat-panel{grid-column:1;align-self:start;display:grid;gap:.85rem;align-items:stretch;justify-content:stretch;margin:2.2rem 0 0;padding:1.4rem;background:#fff;border:1px solid #dce2e2}
.dashboard-body .c406-public-chat-panel h2{margin:0;font-size:1.3rem;color:#173342}
.dashboard-body .c406-public-chat-panel p{margin:0;color:#6a7d84}
.dashboard-body .c406-chat-rules{padding:.5rem .7rem;border-left:3px solid var(--red);background:#faf3f2;color:#7d4b48!important;font-size:.78rem;line-height:1.45}
.dashboard-body .c406-public-chat-stream{display:grid;gap:.6rem;height:auto;min-height:5rem;max-height:21rem;overflow:auto;margin:0;padding:.1rem;border:0}
.dashboard-body .c406-chat-message{max-width:92%;margin:0;padding:.65rem .85rem;background:#f6f8f8;border:1px solid #dce2e2;border-radius:12px;color:#142a35}
.dashboard-body .c406-chat-message.mine{margin-left:auto;background:#fdf1f0;border-color:#e3b4b1}
.dashboard-body .c406-chat-message p{margin:.3rem 0 0;font-size:.9rem;color:#142a35}
.dashboard-body .c406-chat-meta strong{font-size:.86rem;color:#173342}
.dashboard-body .c406-chat-meta small{font-size:.72rem;color:#6a7d84;white-space:nowrap}
.dashboard-body .c406-chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem;align-items:end}
.dashboard-body .c406-chat-form .field{min-height:2.9rem;background:#fff;border:1px solid #cfd8d9;color:#142a35;resize:vertical}
.dashboard-body .c406-public-chat-panel .section-label{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:980px){.dashboard-body .c406-public-chat-panel{grid-column:auto}}
@media(max-width:720px){.dashboard-body .c406-chat-form{grid-template-columns:1fr}}

/* Le selecteur d emoticones du tchat. Le champ de saisie devient la deuxieme
   colonne du formulaire, le bouton la premiere. */
.dashboard-body .c406-chat-form{grid-template-columns:auto minmax(0,1fr) auto}
.c406-emo{position:relative;display:flex;align-items:end}
.c406-emo-ouvrir{height:2.9rem;width:2.9rem;border:1px solid #cfd8d9;background:#fff;border-radius:10px;font-size:1.2rem;line-height:1;cursor:pointer}
.c406-emo-ouvrir:hover{background:#f1f5f5}
.c406-emo-panneau{position:absolute;bottom:3.3rem;left:0;z-index:30;width:min(21rem,78vw);background:#fff;border:1px solid #cfd8d9;border-radius:12px;box-shadow:0 18px 40px #17222926;padding:.5rem}
.c406-emo-panneau[hidden]{display:none}
.c406-emo-onglets{display:flex;gap:.3rem;margin-bottom:.45rem}
.c406-emo-onglets button{flex:1;border:1px solid #dce2e2;background:#f6f8f8;color:#44565e;border-radius:8px;padding:.35rem .4rem;font-size:.76rem;font-weight:800;cursor:pointer}
.c406-emo-onglets button.actif{background:var(--red);border-color:var(--red);color:#fff}
.c406-emo-grille{display:grid;grid-template-columns:repeat(8,1fr);gap:.1rem;max-height:11rem;overflow:auto}
.c406-emo-signe{border:0;background:none;font-size:1.3rem;line-height:1;padding:.25rem;border-radius:7px;cursor:pointer}
.c406-emo-signe:hover{background:#eef3f3}
@media(max-width:720px){.dashboard-body .c406-chat-form{grid-template-columns:auto minmax(0,1fr)}.dashboard-body .c406-chat-form .btn[type=submit]{grid-column:1/-1}.c406-emo-grille{grid-template-columns:repeat(7,1fr)}}

/* Le diaporama d une fiche 3D : une vue, deux fleches, un compteur. */
.c406-stl-diapo{position:relative;margin:1.1rem 0;background:#091c27;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden}
.c406-stl-diapo:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.c406-diapo-vue{display:grid;place-items:center;min-height:210px;max-height:60vh}
.c406-diapo-vue img,.c406-diapo-vue video{display:block;width:100%;max-height:60vh;object-fit:contain;background:#05131b}
.c406-diapo-fleche{position:absolute;top:50%;transform:translateY(-50%);width:2.6rem;height:2.6rem;border:0;border-radius:50%;background:#081620c4;color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.c406-diapo-fleche:hover{background:#081620}
.c406-diapo-fleche.precedent{left:.6rem}
.c406-diapo-fleche.suivant{right:.6rem}
.c406-diapo-compteur{position:absolute;right:.7rem;bottom:.6rem;background:#081620d9;color:#fff;font-size:.72rem;font-weight:800;padding:.2rem .5rem;border-radius:50px}

/* Apercu avant envoi : une video se montre dans un lecteur, pas en image. */
#c406-stl-photo-preview video{display:block;width:100%;max-height:180px;background:#05131b;border-radius:8px}

/* Les apercus avant envoi, avec leur bouton de retrait. */
#c406-stl-photo-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;margin-top:.6rem}
#c406-stl-photo-preview figure{margin:0;display:grid;gap:.35rem;background:#0d2230;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.45rem}
#c406-stl-photo-preview img{display:block;width:100%;height:95px;object-fit:cover;border-radius:7px}
#c406-stl-photo-preview figcaption{font-size:.7rem;line-height:1.35;color:#b7cad2;overflow-wrap:anywhere}
#c406-stl-photo-preview p{grid-column:1/-1;margin:0}

/* La photo qui servira de vignette a la fiche. */
.c406-media-principale{display:block;text-align:center;background:#e6ff3826;border:1px solid #7c8e0b;color:#c8e04a;border-radius:7px;padding:.25rem;font-size:.68rem;font-weight:900;letter-spacing:.05em}

/* Ce que le club pense d'un modele : deux boutons, celui choisi se detache. */
.c406-stl-avis{display:flex;gap:.5rem;margin-top:.7rem}
.c406-avis{flex:1;border:1px solid var(--line);background:#0d2230;color:#d7e3e8;border-radius:10px;padding:.45rem;font-size:.85rem;font-weight:800;cursor:pointer}
.c406-avis:hover{background:#15384a}
.c406-avis.choisi{border-color:var(--red);background:#2a1414;color:#ffb7b2}

/* Le texte libre d'un membre : paragraphes, listes et gras. */
.drawer-copy p{margin:0 0 .7rem}
.drawer-copy p:last-child{margin-bottom:0}
.drawer-copy ul,.drawer-copy ol{margin:0 0 .7rem;padding-left:1.25rem}
.drawer-copy li{margin:.18rem 0;line-height:1.55}
.drawer-copy strong{color:#fff}

/* Chaque section se detache : un filet, un titre colore, de l'air autour.
   Sans cela la fiche est un seul bloc de texte du haut en bas. */
.detail-drawer .drawer-section{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(214,230,238,.16)}
.detail-drawer .drawer-section:first-of-type{border-top:0;padding-top:0}
.detail-drawer .drawer-section h3{margin:0 0 .55rem;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red2)}
.detail-drawer .drawer-copy{color:#d7e3e8;line-height:1.6}

/* L'accent du club sur la fiche : filet en tete, titre souligne, teinte du
   Coupe si elle est connue, rouge du club sinon. */
.detail-drawer{position:fixed;border-left:1px solid rgba(214,230,238,.14)}

.detail-drawer h2{color:#fff;padding-bottom:.6rem;border-bottom:2px solid var(--red);display:inline-block}
.detail-drawer .drawer-meta{color:var(--red2);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:900}
.detail-drawer .drawer-section h3:before{content:"";display:inline-block;width:14px;height:2px;
  background:var(--red);vertical-align:middle;margin-right:.5rem}

/* Designer la photo qui servira de vignette a la fiche. */
.c406-vignette-choix{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.9rem 0 .2rem}
.c406-vignette-choix .btn[disabled]{opacity:.55;cursor:default}

/* Le tiroir defile : la barre doit se voir sur ce fond sombre, sinon on croit
   la fiche bloquee. Le filet du club passe en ombre interne pour rester en
   haut du cadre au lieu de defiler avec le texte. */
.detail-drawer{overflow-y:auto;overscroll-behavior:contain;
  box-shadow:-20px 0 70px #000a, inset 0 4px 0 0 var(--red);
  scrollbar-width:auto;scrollbar-color:var(--red2) #0c1f2b}
.detail-drawer::-webkit-scrollbar{width:12px}
.detail-drawer::-webkit-scrollbar-track{background:#0c1f2b}
.detail-drawer::-webkit-scrollbar-thumb{background:var(--red2);border-radius:8px;border:2px solid #0c1f2b}
.detail-drawer::-webkit-scrollbar-thumb:hover{background:var(--red)}

/* Tiroir ouvert : la page derriere ne bouge plus, seul le tiroir defile. */
body.tiroir-ouvert{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* --- Le salon : photos, reactions, et la trace d un message retire -------
   Les regles sont accrochees a .dashboard-body : le style injecte au
   chargement de la page est sinon plus fort qu elles. */
.dashboard-body .c406-chat-photo{display:block;margin:.45rem 0 0;max-width:15rem}
.dashboard-body .c406-chat-photo img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid #dce2e2;background:#eef2f2}
.dashboard-body .c406-chat-emots{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:.45rem 0 0}
.dashboard-body .c406-chat-emot{padding:.12rem .45rem;border:1px solid #dce2e2;border-radius:999px;background:#fff;color:#142a35;font-size:.8rem;line-height:1.5;cursor:pointer}
.dashboard-body .c406-chat-emot.mienne{border-color:#c0392b;background:#fdf1f0;color:#8f2117;font-weight:700}
.dashboard-body .c406-chat-emot-plus{width:1.45rem;height:1.45rem;padding:0;border:1px dashed #c3cccc;border-radius:999px;background:transparent;color:#6a7a7a;font-size:.85rem;line-height:1;cursor:pointer}
.dashboard-body .c406-chat-emot-palette{display:inline-flex;gap:.15rem;padding:.15rem .3rem;border:1px solid #dce2e2;border-radius:999px;background:#fff}
.dashboard-body .c406-chat-emot-choix{padding:.1rem .2rem;border:0;background:transparent;font-size:1rem;line-height:1;cursor:pointer}
.dashboard-body .c406-chat-message.retire{background:#f2f4f4;border-style:dashed;border-color:#ccd4d4}
.dashboard-body .c406-chat-message.retire p{margin:0;color:#6a7a7a;font-size:.82rem;font-style:italic}
/* Le choix d une photo reste discret a cote du champ d ecriture. */
.dashboard-body .c406-chat-photo-champ{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:#44565c}
.dashboard-body .c406-chat-photo-champ input{max-width:10rem;font-size:.72rem}
.dashboard-body .c406-chat-expiree{margin:.35rem 0 0;color:#6a7a7a;font-size:.78rem;font-style:italic}
.album-vignette-active{color:#8f2117;font-size:.72rem;font-style:normal;font-weight:700}
.dashboard-body .c406-chat-citation{display:block;margin:.1rem 0 .35rem;padding:.3rem .5rem;border-left:3px solid #c0392b;border-radius:0 8px 8px 0;background:#f0f3f3}
.dashboard-body .c406-chat-citation strong{display:block;font-size:.76rem;color:#8f2117}
.dashboard-body .c406-chat-citation span{display:block;overflow:hidden;color:#5a6a70;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
.dashboard-body .c406-chat-reponse{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.4rem 0 0;padding:.4rem .6rem;border-left:3px solid #c0392b;border-radius:0 8px 8px 0;background:#f6f8f8}
.dashboard-body .c406-chat-reponse strong{display:block;font-size:.78rem;color:#142a35}
.dashboard-body .c406-chat-reponse small{display:block;overflow:hidden;color:#5a6a70;font-size:.74rem;text-overflow:ellipsis;white-space:nowrap}
/* Les boutons sous un message du salon : texte blanc sur bulle claire, donc
   invisibles. Ils reprennent l encre du texte, avec un contour discret. */
.dashboard-body .c406-chat-message .c406-card-actions .btn{color:#142a35;background:#fff;border:1px solid #c9d2d6}
.dashboard-body .c406-chat-message.mine .c406-card-actions .btn{background:#fffaf9;border-color:#e3b4b1}
.dashboard-body .c406-chat-message .c406-card-actions .btn:hover{background:#eef2f3}