/* ============================================================
MOBILE CAR CLEANING — feuille de style unique de tout le site.
Modifier une valeur ici la change sur TOUTES les pages.
SOMMAIRE
1. Couleurs et réglages 6. Prestations 11. Réalisations
2. Base 7. Jauge d'eau 12. Journal
3. Boutons 8. Onglets 13. Pages de texte
4. En-tête 9. Flottes 14. Contact / pied de page
5. Hero et sélecteur 10. Tarifs / FAQ 15. À propos
============================================================ */
/* ---------- 1. COULEURS ET RÉGLAGES ---------- */
:root{
--ink:#06070F; /* fond principal */
--deep:#0D1030; /* fond des sections alternées */
--card:#10132E; /* fond des cartes */
--brand:#2A2FD1; /* bleu du logo */
--brand-lit:#5468FF; /* bleu vif : boutons, puces */
--water:#63D9E6; /* cyan : réservé à l'argument eau */
--paper:#F2F4FA; /* texte clair */
--muted:#98A1BF; /* texte secondaire */
--line:rgba(255,255,255,.10);
--line-strong:rgba(255,255,255,.22);
--wrap:1200px;
--pad-section:clamp(4.5rem,9vw,8rem);
--r:16px; --r-sm:9px;
}
/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);
font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
font-size:clamp(1rem,.97rem + .18vw,1.075rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,.figure,.tile-price{font-family:Archivo,system-ui,sans-serif;
font-variation-settings:"wdth" 112;line-height:1.03;letter-spacing:-.022em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.4rem,1.3rem + 4.3vw,4.2rem);font-weight:800}
h2{font-size:clamp(2rem,1.3rem + 3vw,3.35rem);font-weight:800}
h3{font-size:clamp(1.14rem,1.05rem + .4vw,1.32rem);font-weight:700;
font-variation-settings:"wdth" 100;letter-spacing:-.012em}
p{margin:0 0 1rem;max-width:66ch}
p:last-child{margin-bottom:0}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.section{padding-block:var(--pad-section)}
.section--deep{background:var(--deep)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}
.lede{color:var(--muted);font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);max-width:56ch}
.head{max-width:58ch;margin-bottom:clamp(2.5rem,5vw,3.75rem)}
.head p{margin-top:1rem;color:var(--muted)}
:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand-lit);color:#fff;padding:.75rem 1.25rem;z-index:999}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- 3. BOUTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.95rem 1.7rem;
font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;font-variation-settings:"wdth" 100;
border-radius:var(--r-sm);border:1.5px solid transparent;text-decoration:none;cursor:pointer;
transition:background-color .18s ease,border-color .18s ease}
.btn--primary{background:var(--brand-lit);color:#fff}
.btn--primary:hover{background:#6D80FF}
.btn--ghost{border-color:var(--line-strong);color:var(--paper);background:transparent}
.btn--ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}
.btn--sm{padding:.6rem 1.15rem;font-size:.92rem}
.btn--full{width:100%}
/* ---------- 4. EN-TÊTE ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(6,7,15,.84);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.brand{margin-right:auto;flex-shrink:0;display:block}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:1.45rem}
.nav a{text-decoration:none;color:var(--muted);font-size:.93rem;font-weight:500;
padding-block:.35rem;border-bottom:2px solid transparent;transition:color .16s,border-color .16s}
.nav a:hover{color:var(--paper);border-bottom-color:var(--brand-lit)}
.nav a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--brand-lit)}
/* Le bouton du menu ne sert que sur mobile : sur grand écran c'est
.header__cta qui s'affiche, sinon on aurait deux fois "Réservez". */
.nav a.btn{border-bottom-color:transparent;color:#fff;display:none}
.nav a.btn:hover{border-bottom-color:transparent}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--r-sm);
padding:.55rem .7rem;cursor:pointer;color:var(--paper)}
.burger svg{width:20px;height:20px}
@media (max-width:1100px){
.burger{display:block;order:3}
.header__cta{display:none}
.nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
background:var(--deep);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1.5rem;display:none;
max-height:calc(100vh - 74px);overflow-y:auto}
.nav[data-open="true"]{display:flex}
.nav a{padding:.95rem 0;border-bottom:1px solid var(--line)}
.nav a.btn{display:inline-flex;margin-top:1rem;justify-content:center;padding:.85rem 1.15rem}
}
/* ---------- 5. HERO ---------- */
.hero{position:relative;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.62}
.hero__media::after{content:"";position:absolute;inset:0;
background:radial-gradient(120% 90% at 74% 10%,rgba(42,47,209,.42),transparent 60%),
linear-gradient(180deg,rgba(6,7,15,.5) 0%,rgba(6,7,15,.74) 52%,var(--ink) 100%)}
.hero__inner{position:relative;z-index:1;padding-block:clamp(3rem,7vw,5.5rem);
display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
gap:clamp(2.25rem,5vw,4rem);align-items:center}
.badge{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem .95rem .45rem .6rem;
margin-bottom:1.6rem;border:1px solid var(--line-strong);border-radius:100px;
font-size:.87rem;background:rgba(255,255,255,.06)}
.badge b{color:var(--water);font-weight:600}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--water);flex-shrink:0}
.hero p.lede{margin-block:1.35rem 2rem}
.hero .badge{margin-bottom:1.35rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem}
@media (max-width:900px){.hero__inner{grid-template-columns:1fr;align-items:start}}
/* Bandeau de titre des pages intérieures */
.pagehead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
background:linear-gradient(160deg,rgba(42,47,209,.28),var(--ink) 62%);
padding-block:clamp(3.5rem,8vw,6rem)}
/* Calque de l'image de fond du bandeau de titre */
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.pagehead__media::after{content:"";position:absolute;inset:0;
background:radial-gradient(120% 100% at 78% 8%,rgba(42,47,209,.45),transparent 62%),
linear-gradient(180deg,rgba(6,7,15,.55) 0%,rgba(6,7,15,.8) 60%,var(--ink) 100%)}
.pagehead .wrap{position:relative;z-index:1}
/* Pastille indiquant l'image attendue — supprimez-la une fois la photo posée */
.ph-hint{position:absolute;right:1.25rem;bottom:1.25rem;z-index:2;
border:1px dashed var(--line-strong);border-radius:100px;
background:rgba(6,7,15,.7);padding:.5rem 1rem;font-size:.76rem;color:var(--muted)}
.ph-hint code{color:var(--water)}
@media (max-width:700px){.ph-hint{display:none}}
.pagehead .lede{margin-top:1.25rem}
.crumb{font-size:.88rem;color:var(--muted);margin-bottom:1.1rem}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--paper)}
/* Sélecteur de formule flottant du hero */
.tile{border:1px solid var(--line-strong);border-radius:var(--r);
background:rgba(10,12,34,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1.5rem}
.tile__head{display:flex;justify-content:space-between;align-items:baseline;
padding-bottom:1rem;margin-bottom:.6rem;border-bottom:1px solid var(--line)}
.tile__head h2{font-size:1.05rem;font-weight:700;font-variation-settings:"wdth" 100;letter-spacing:-.01em}
.tile__head span{font-size:.85rem;color:var(--water)}
.pick{display:block;cursor:pointer;border:1px solid transparent;border-radius:var(--r-sm);
padding:.8rem .9rem;margin-bottom:.4rem;transition:background-color .16s,border-color .16s}
.pick:hover{background:rgba(255,255,255,.05)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick__row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.pick__name{font-size:.96rem;font-weight:500}
.pick__meta{display:block;color:var(--muted);font-size:.81rem;margin-top:.1rem}
.tile-price{font-size:1.4rem;font-weight:800;font-variation-settings:"wdth" 115;white-space:nowrap}
.pick[data-checked="true"]{background:rgba(84,104,255,.16);border-color:var(--brand-lit)}
.pick[data-checked="true"] .tile-price{color:var(--water)}
.tile .btn{margin-top:1rem}
.tile__note{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.85rem}
/* Bandeau défilant */
.marquee{background:var(--brand);border-block:1px solid rgba(255,255,255,.14);overflow:hidden;padding-block:.85rem}
.marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee span{font-family:Archivo,sans-serif;font-weight:700;font-size:.82rem;
font-variation-settings:"wdth" 105;letter-spacing:.13em;text-transform:uppercase;
padding-inline:1.5rem;white-space:nowrap;color:#fff}
.marquee span::after{content:"✳";margin-left:3rem;color:rgba(255,255,255,.5)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Déclaration */
.claim h2{font-size:clamp(2.1rem,1.1rem + 4.2vw,4rem);max-width:20ch}
.claim h2 + h2{color:var(--muted);margin-top:.35rem}
.claim__foot{margin-top:2.75rem;padding-top:2rem;border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2rem}
.claim__foot p{color:var(--muted);font-size:.95rem}
/* ---------- 6. CARTES DE PRESTATION ---------- */
.grid-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.35rem}
.svc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
overflow:hidden;display:flex;flex-direction:column}
/* Pour une vraie photo : .svc__art{background:url('photo.jpg') center/cover} */
.svc__art{height:126px;display:grid;place-items:center;border-bottom:1px solid var(--line);
background:linear-gradient(135deg,rgba(42,47,209,.42),rgba(10,12,34,.15))}
.svc__art svg{width:34px;height:34px;color:var(--paper);opacity:.85}
.svc__body{padding:1.6rem 1.5rem;display:flex;flex-direction:column;flex-grow:1}
.svc__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.55rem}
.svc__price{font-family:Archivo,sans-serif;font-weight:800;font-size:1.15rem;
font-variation-settings:"wdth" 112;white-space:nowrap}
.svc__price small{font-size:.62em;font-weight:600}
.svc p{font-size:.94rem;color:var(--muted);margin-bottom:1.15rem}
.svc ul{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-direction:column;gap:.55rem;flex-grow:1}
.svc li{position:relative;padding-left:1.5rem;font-size:.91rem}
.svc li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
border-radius:2px;background:var(--brand-lit)}
/* Deux méthodes côte à côte (sans rinçage / à l'eau) */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.35rem}
.method{border:1px solid var(--line);border-radius:var(--r);padding:1.9rem 1.75rem;background:var(--card)}
.method--lead{border-color:var(--water)}
.method__tag{display:inline-block;font-size:.75rem;font-weight:600;padding:.25rem .7rem;
border-radius:100px;margin-bottom:1rem;background:rgba(255,255,255,.09);color:var(--muted)}
.method--lead .method__tag{background:rgba(99,217,230,.16);color:var(--water)}
.method h3{margin-bottom:.7rem}
.method p{font-size:.94rem;color:var(--muted)}
.method ul{list-style:none;margin:1.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.method li{position:relative;padding-left:1.5rem;font-size:.91rem}
.method li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;
border-radius:2px;background:var(--brand-lit)}
.method--lead li::before{background:var(--water)}
/* ---------- 7. JAUGE D'EAU ---------- */
.gauge{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:clamp(2rem,5vw,4.5rem);align-items:center}
.gauge__bars{display:flex;flex-direction:column;gap:2.25rem}
.bar__label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.7rem}
.bar__name{font-size:.95rem;color:var(--muted)}
.bar__value{font-family:Archivo,sans-serif;font-weight:800;font-size:1.5rem;font-variation-settings:"wdth" 112}
.bar__track{height:15px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}
.bar__fill{height:100%;width:0;border-radius:100px;transition:width 1.5s cubic-bezier(.22,.75,.3,1)}
.bar--them .bar__value{color:var(--muted)}
.bar--them .bar__fill{background:rgba(255,255,255,.24)}
.bar--us .bar__value{color:var(--water)}
.bar--us .bar__fill{background:linear-gradient(90deg,var(--brand-lit),var(--water));
box-shadow:0 0 22px rgba(99,217,230,.5)}
.gauge[data-visible="true"] .bar--them .bar__fill{width:100%}
.gauge[data-visible="true"] .bar--us .bar__fill{width:6%;min-width:22px}
.gauge__note{margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid var(--line);
color:var(--muted);font-size:.95rem}
/* ---------- 8. ONGLETS ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.25rem}
.tab{background:transparent;border:1px solid var(--line-strong);color:var(--muted);
border-radius:100px;padding:.6rem 1.3rem;cursor:pointer;font:inherit;font-size:.93rem;
transition:background-color .16s,color .16s,border-color .16s}
.tab:hover{color:var(--paper)}
.tab[aria-selected="true"]{background:var(--brand-lit);border-color:var(--brand-lit);color:#fff;font-weight:600}
.panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(1.5rem,4vw,3rem);align-items:center}
/* Indispensable : display:grid annulerait l'attribut hidden, et les
quatre étapes s'afficheraient toutes en même temps. */
.panel[hidden]{display:none}
.panel__txt{border-left:2px solid var(--brand-lit);padding-left:1.75rem;max-width:62ch}
@media (max-width:820px){.panel{grid-template-columns:1fr}}
.panel__step{font-family:Archivo,sans-serif;font-weight:800;font-size:.85rem;
font-variation-settings:"wdth" 105;letter-spacing:.1em;text-transform:uppercase;
color:var(--water);margin-bottom:.6rem}
.panel h3{margin-bottom:.6rem;font-size:clamp(1.3rem,1.1rem + .8vw,1.6rem)}
.panel p{color:var(--muted)}
/* ---------- 9. FLOTTES ---------- */
.fleet{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(2rem,5vw,4rem);align-items:start}
.fleet__list{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.fleet__list li{position:relative;padding-left:1.6rem;font-size:.96rem;color:var(--muted)}
.fleet__list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;
border-radius:2px;background:var(--water)}
.sheet{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.sheet__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.15rem 1.35rem;border-bottom:1px solid var(--line)}
.sheet__top strong{font-size:.98rem}
.sheet__top small{display:block;color:var(--muted);font-size:.83rem;font-weight:400}
.sheet__total{font-family:Archivo,sans-serif;font-weight:800;font-size:1.35rem;
font-variation-settings:"wdth" 112;white-space:nowrap}
.sheet table{width:100%;border-collapse:collapse;font-size:.89rem}
.sheet th{text-align:left;font-weight:600;color:var(--muted);font-size:.78rem;
padding:.8rem 1.35rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.sheet td{padding:.85rem 1.35rem;border-bottom:1px solid var(--line);vertical-align:middle}
.sheet tr:last-child td{border-bottom:none}
.pill{display:inline-block;font-size:.76rem;padding:.22rem .65rem;border-radius:100px;white-space:nowrap}
.pill--ok{background:rgba(99,217,230,.16);color:var(--water)}
.pill--wait{background:rgba(255,255,255,.09);color:var(--muted)}
.sheet__foot{padding:1rem 1.35rem;color:var(--muted);font-size:.85rem;background:rgba(255,255,255,.03)}
@media (max-width:900px){
.gauge,.fleet{grid-template-columns:1fr}
.sheet table{font-size:.82rem}
.sheet th,.sheet td{padding-inline:.9rem}
.hide-sm{display:none}
}
/* ---------- 10. TARIFS, ABONNEMENT, FAQ, RÉSERVATION ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1.5rem;align-items:start}
.plan{border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.8rem;background:var(--card);
display:flex;flex-direction:column;height:100%}
.plan--featured{border-color:var(--brand-lit);
background:linear-gradient(180deg,rgba(84,104,255,.14),rgba(16,19,46,.6));
box-shadow:0 0 0 1px var(--brand-lit)}
.plan__tag{align-self:flex-start;font-size:.76rem;font-weight:600;padding:.28rem .7rem;
border-radius:100px;background:var(--brand-lit);color:#fff;margin-bottom:1rem}
.plan h3{margin-bottom:.35rem}
.plan__meta{font-size:.9rem;color:var(--muted);margin-bottom:1.4rem}
.figure{font-size:3rem;font-weight:900;font-variation-settings:"wdth" 118;line-height:1}
.figure sup{font-size:.34em;font-weight:700;top:-1.1em;margin-left:.08em}
.plan__from{font-size:.85rem;color:var(--muted);margin:.4rem 0 1.6rem}
.plan ul{list-style:none;margin:0 0 1.9rem;padding:0;display:flex;flex-direction:column;gap:.7rem;flex-grow:1}
.plan li{position:relative;padding-left:1.6rem;font-size:.93rem}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;
border-radius:2px;background:var(--brand-lit)}
.pricing__foot{margin-top:2rem;font-size:.92rem;color:var(--muted);max-width:80ch}
.sub{margin-top:2.5rem;border:1px solid var(--line-strong);border-radius:var(--r);
background:linear-gradient(120deg,rgba(42,47,209,.22),rgba(16,19,46,.5));
padding:clamp(1.75rem,4vw,2.75rem);
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);gap:2.5rem;align-items:center}
.sub h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);margin-bottom:.75rem}
.sub p{color:var(--muted);font-size:.96rem}
.sub__opts{display:flex;flex-direction:column;gap:.7rem}
.sub__opt{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(6,7,15,.35);font-size:.93rem}
.sub__opt b{font-family:Archivo,sans-serif;font-variation-settings:"wdth" 108;white-space:nowrap}
@media (max-width:820px){.sub{grid-template-columns:1fr;gap:1.75rem}}
.faq{max-width:74ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
font-family:Archivo,sans-serif;font-weight:700;font-size:1.06rem;
font-variation-settings:"wdth" 100;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{color:var(--muted);font-size:.96rem;padding-bottom:1.4rem}
.booking__frame{margin-top:2.5rem;border:1px solid var(--line);border-radius:var(--r);
background:#fff;overflow:hidden;min-height:620px}
#my-cal-inline{width:100%;min-height:620px}
.booking__fallback{padding:2.5rem 1.5rem;text-align:center;color:#333}
/* ---------- 11. RÉALISATIONS ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.25rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:1.35rem}
.work{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.work[hidden]{display:none}
.work__art{aspect-ratio:4/3;display:grid;place-items:center;border-bottom:1px solid var(--line);
background:linear-gradient(135deg,rgba(42,47,209,.4),rgba(10,12,34,.2))}
.work__art img{width:100%;height:100%;object-fit:cover}
.work__ph{color:var(--muted);font-size:.85rem;text-align:center;padding:1rem;max-width:26ch}
.work__body{padding:1.4rem 1.4rem 1.6rem}
.work__cat{font-size:.78rem;color:var(--water);margin-bottom:.5rem}
.work h3{font-size:1.1rem;margin-bottom:.5rem}
.work p{font-size:.9rem;color:var(--muted);margin:0}
.work__meta{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line);
font-size:.83rem;color:var(--muted)}
/* ---------- 12. JOURNAL ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.post{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;
transition:border-color .16s ease}
.post:hover{border-color:var(--line-strong)}
.post__art{height:150px;background:linear-gradient(135deg,rgba(42,47,209,.42),rgba(10,12,34,.2));
border-bottom:1px solid var(--line)}
.post__body{padding:1.5rem;display:flex;flex-direction:column;flex-grow:1}
.post__cat{font-size:.8rem;color:var(--water);margin-bottom:.6rem}
.post h3{font-size:1.16rem;margin-bottom:.6rem}
.post p{font-size:.92rem;color:var(--muted);margin:0 0 1.2rem}
.post__more{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--paper)}
/* ---------- 13. PAGES DE TEXTE (articles, mentions légales) ---------- */
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem);margin:2.75rem 0 1rem}
.prose h3{margin:2rem 0 .75rem}
.prose p,.prose li{color:var(--muted)}
.prose p{margin-bottom:1.15rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{font-size:.99rem}
.prose strong{color:var(--paper)}
.prose a{color:var(--water)}
.prose blockquote{margin:2rem 0;padding:1.25rem 1.5rem;border-left:3px solid var(--brand-lit);
background:var(--card);border-radius:0 var(--r-sm) var(--r-sm) 0}
.prose blockquote p{color:var(--paper);margin:0}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.6rem;font-size:.93rem}
.prose th{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--line-strong);font-size:.85rem}
.prose td{padding:.7rem .8rem;border-bottom:1px solid var(--line);color:var(--muted)}
.postmeta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--muted);font-size:.88rem;margin-top:1.25rem}
/* ---------- 14. CONTACT, APPEL À L'ACTION, PIED DE PAGE ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2.25rem}
.contact h3{font-size:.98rem;margin-bottom:.85rem;color:var(--muted);font-weight:600;font-variation-settings:"wdth" 100}
.contact p,.contact a{font-size:1.05rem;color:var(--paper);text-decoration:none;line-height:1.5}
.contact a:hover{color:var(--water)}
.cities{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.75rem}
.city{border:1px solid var(--line-strong);border-radius:100px;padding:.45rem 1.05rem;font-size:.9rem;color:var(--muted)}
.cta{border:1px solid var(--line-strong);border-radius:var(--r);
background:linear-gradient(120deg,rgba(42,47,209,.3),rgba(16,19,46,.55));
padding:clamp(2rem,5vw,3.25rem);text-align:center}
.cta h2{margin-bottom:1rem}
.cta p{margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;margin-top:2rem}
.footer{border-top:1px solid var(--line);padding-block:3.25rem 2.25rem;background:var(--ink)}
.footer__cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(135px,1fr));
gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
.footer__brand img{height:32px;width:auto;margin-bottom:1.1rem}
.footer__brand p{color:var(--muted);font-size:.9rem;max-width:34ch}
.footer h3{font-size:.86rem;color:var(--paper);margin-bottom:1rem;font-weight:700;font-variation-settings:"wdth" 100}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.footer ul a,.footer ul span{font-size:.89rem;color:var(--muted);text-decoration:none}
.footer ul a:hover{color:var(--paper)}
.footer__legal{padding-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between}
.footer__legal p{font-size:.83rem;color:var(--muted);margin:0}
.footer__legal a{color:var(--muted)}
.footer__legal a:hover{color:var(--paper)}
/* ---------- 15. À PROPOS ---------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:clamp(2rem,5vw,4rem);align-items:center}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.25rem;
margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line)}
.stat .figure{font-size:clamp(2.2rem,1.6rem + 2vw,3rem);color:var(--water)}
.stat p{font-size:.9rem;color:var(--muted);margin-top:.5rem}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1.25rem}
.value{border:1px solid var(--line);border-radius:var(--r);padding:1.85rem 1.65rem;background:var(--card)}
.value h3{margin-bottom:.65rem}
.value p{font-size:.94rem;color:var(--muted)}
.photo{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
background:linear-gradient(135deg,rgba(42,47,209,.4),rgba(10,12,34,.2));
aspect-ratio:4/3;display:grid;place-items:center}
.photo img{width:100%;height:100%;object-fit:cover}
.photo span{color:var(--muted);font-size:.85rem;padding:1rem;text-align:center;max-width:28ch}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.marquee__track{animation:none}
.bar__fill{transition:none}
}
/* ============================================================
EMPLACEMENTS PHOTO
Chaque cadre en pointillés indique une photo à fournir.
Pour la poser, remplacez tout le … intérieur par :
============================================================ */
.ph{border:1px dashed var(--line-strong);border-radius:var(--r);
background:linear-gradient(135deg,rgba(42,47,209,.26),rgba(10,12,34,.45));
display:grid;place-items:center;text-align:center;padding:1.25rem;overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
/* Dès qu'une vraie ![]()
remplace le , le cadre en pointillés,
le fond dégradé et la marge intérieure disparaissent tout seuls —
il suffit donc de remplacer le ..., rien d'autre à toucher. */
.ph:has(img){border-style:solid;border-color:transparent;background:none;padding:0}
.ph span{color:var(--muted);font-size:.8rem;line-height:1.55;max-width:32ch}
.ph b{display:block;color:var(--paper);font-weight:600;font-size:.85rem;margin-bottom:.4rem}
.ph code{font-size:.78rem;color:var(--water);word-break:break-all}
.ph--wide{aspect-ratio:21/9}
.ph--16x9{aspect-ratio:16/9}
.ph--4x3{aspect-ratio:4/3}
.ph--sq{aspect-ratio:1/1}
.ph--band{margin-top:clamp(2.5rem,5vw,3.5rem)}
.ph-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.35rem}
/* Emplacements photo dans la galerie Réalisations */
.work__ph b{display:block;color:var(--paper);font-weight:600;font-size:.85rem;margin-bottom:.4rem}
.work__ph code{display:block;font-size:.78rem;color:var(--water);margin-top:.4rem;word-break:break-all}
.work__art{border:1px dashed transparent}
.work__art:has(.work__ph){border-color:var(--line-strong)}
.work__art img{width:100%;height:100%;object-fit:cover}
/* Dès qu'une vraie ![]()
remplace le , la bordure
en pointillés disparaît automatiquement, comme pour le reste du site. */
.work__art:has(img){border-color:transparent}