/* Hallmark · checked: 2026-11-04 · genre: editorial (inferred)
 * floor: 11 FAIL left on purpose: 6 × 54 (numbered labels the owner asked for), 1 × 73 (phone drawn over the spreadsheet), 4 × 40 (nav link read without the bubble behind it)
 * fixed: 10a, 7a, 48, 63, 76, 26a, 39b, 40, 49a, F1, 11, 24b · waived: 26b, 83 · structural: printed (58, 59, 77)
 * built: the project · redesign: polish */
/* Hallmark · waive 26b · aucun formulaire et aucun aria-disabled sur les pages · le contact passe par un e-mail, aucun bouton ne se désactive */
/* Hallmark · waive 83 · les captures sont le vrai site de Studio EDDC et son espace équipe · montrer le site Studio EDDC est le but de cette étude de cas */
/* Portfolio de Cédric Rogne. Même esprit que l'appli « Mes Comptes » : une base gris bleuté, des cartes blanches
   très arrondies avec une ombre douce, la police Outfit, des titres fins, des pilules partout, une encre bleu nuit.
   Les éléments arrivent en glissant au défilement (site.js). */
:root{
  --bg-a:#F2F4F7; --bg-b:#ECEFF3; --card:#FFFFFF; --field:#F1F3F6;
  --border:rgba(22,28,40,.07); --ink:#161B26; --text-2:#4F5868; --muted:#646C7A;
  --accent:#1F2A44; --accent-soft:rgba(31,42,68,.10);
  --shadow:0 1px 2px rgba(22,28,40,.04),0 10px 30px -12px rgba(22,28,40,.14);
  --shadow-lg:0 2px 4px rgba(22,28,40,.04),0 24px 60px -24px rgba(22,28,40,.28);
  --amber:#8A92A0; --blue-ai:#2A63CF;
  --scrim:rgba(17,19,24,.88); --scrim-btn:rgba(255,255,255,.16); --on-scrim:#FBFBFA;
  --r-xl:28px; --r-lg:22px; --r-md:14px;
  --font:"Outfit",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--amber:#9AA3B2;--blue-ai:#6FA0F5;--bg-a:#111318;--bg-b:#14171D;--card:#1C1F26;--field:#262A33;--border:rgba(255,255,255,.06);--ink:#EEF0F4;--text-2:#BEC4CE;--muted:#959CA8;--accent:#C9D3E6;--accent-soft:rgba(201,211,230,.12);--shadow:0 10px 30px -12px rgba(0,0,0,.5);--shadow-lg:0 24px 60px -24px rgba(0,0,0,.65)}}
:root[data-theme="dark"]{color-scheme:dark;--amber:#9AA3B2;--blue-ai:#6FA0F5;--bg-a:#111318;--bg-b:#14171D;--card:#1C1F26;--field:#262A33;--border:rgba(255,255,255,.06);--ink:#EEF0F4;--text-2:#BEC4CE;--muted:#959CA8;--accent:#C9D3E6;--accent-soft:rgba(201,211,230,.12);--shadow:0 10px 30px -12px rgba(0,0,0,.5);--shadow-lg:0 24px 60px -24px rgba(0,0,0,.65)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
[id]{scroll-margin-top:90px}
body{margin:0;font:400 1rem/1.6 var(--font);color:var(--ink);background:linear-gradient(160deg,var(--bg-a) 0%,var(--bg-b) 100%) fixed;background-color:var(--bg-a);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
/* Sur les blocs foncés, l'anneau prend la couleur du papier pour rester visible */
.contact-x :focus-visible,.end :focus-visible,.note :focus-visible{outline-color:var(--card)}
h1,h2,h3,p,figure{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,3vw,32px)}

/* Typographie : fine, serrée, jamais en capitales */
h1,h2{font-weight:300;letter-spacing:-.04em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(2.8rem,6vw,5rem)}
h2{font-size:clamp(2rem,3.8vw,3.1rem)}
h3{font-size:1.1rem;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.it{font-weight:400;color:var(--text-2)}
.muted{color:var(--text-2)}
.small{font-size:.85rem;color:var(--muted)}
.statement{font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.45;color:var(--text-2);max-width:46ch}
/* Petite étiquette en pilule, avec son étoile */
.label{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem .4rem .55rem;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:.9rem;font-weight:500;color:var(--text-2)}
.label svg{width:18px;height:18px;flex:0 0 auto;fill:var(--accent)}
/* Les repères numérotés, en police machine bleue */
.label .num{font:500 .78rem var(--mono);color:var(--blue-ai);padding:.12rem .45rem;border-radius:999px;background:var(--field);letter-spacing:.02em}
.label:has(.num){padding-left:.4rem}
.kick{display:block;font:500 .8rem/1 var(--mono);color:var(--blue-ai);letter-spacing:.02em}

/* Boutons : des pilules */
.btn,.pill{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;padding:0 1.3rem;border-radius:999px;border:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow);font:500 .98rem var(--font);text-decoration:none;cursor:pointer;transition:transform .15s,opacity .15s}
.btn:hover,.pill:hover{transform:translateY(-2px)}
/* L'appui se sent : le bouton s'enfonce un peu */
.btn:active,.pill:active,.cta:active,.theme:active,.copy:active,#lb button:active{transform:scale(.96)}
.case-row:active{transform:translateY(0) scale(.99)}
.pill,.btn.primary{background:var(--ink);color:var(--card)}
.actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem}

/* Barre du haut : logo arrondi, navigation en pilule segmentée, bouton rond pour le thème */
.top{position:sticky;top:0;z-index:20;padding:12px 0 8px;background:linear-gradient(to bottom,var(--bg-a) 70%,color-mix(in srgb,var(--bg-a) 0%,transparent))}
.top-in{max-width:var(--wrap);margin:0 auto;padding:8px clamp(16px,3vw,32px);display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap}
.name{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:1rem;margin-right:auto;padding:4px 16px 4px 4px;border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.name small{display:block;font-size:.76rem;font-weight:400;color:var(--muted);margin-top:-2px}
.logo{width:38px;height:38px;border-radius:12px;display:block;flex:0 0 auto}
/* La marque Clair Lab : le C et le R de Cédric Rogne en gris, comme les traits du symbole, le « ai » en italique bleu */
.brand{display:block;font-weight:600;letter-spacing:-.03em;font-size:1.05rem;line-height:1.15}
.cr{color:var(--amber)}
.brand .ai,.hero-x .it .ai{font-style:italic;color:var(--blue-ai);margin-right:.06em}
.top nav{display:flex;gap:2px;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);overflow-x:auto;scrollbar-width:none;max-width:100%}
.top nav::-webkit-scrollbar{display:none}
.top nav a{padding:.5rem .95rem;border-radius:999px;text-decoration:none;color:var(--text-2);font-size:.9rem;font-weight:500;white-space:nowrap}
.top nav a:hover{color:var(--ink);background:var(--field)}
.top nav{position:relative}
.top nav a{position:relative;z-index:1;transition:color .3s ease}
.top nav a[aria-current]{color:var(--card)}
.top nav a[aria-current]:hover{background:transparent}
/* La pastille foncée : un seul élément qui glisse sous le lien de la page en cours (site.js) */
.nav-ind{position:absolute;z-index:0;top:0;bottom:0;left:0;width:0;background:var(--ink);opacity:0;pointer-events:none;clip-path:inset(4px 100% 4px 0 round 999px);transition:clip-path .55s cubic-bezier(.3,.75,.15,1),opacity .2s}
.top nav.sliding a[aria-current="page"]{color:var(--text-2)}
/* Sans JavaScript, la pastille reste dessinée directement sur le lien */
html:not(.js-nav) .top nav a[aria-current]{background:var(--ink)}
/* Le bouton « Décrire mon projet », toujours visible en haut */
.cta{display:inline-flex;align-items:center;min-height:46px;padding:0 1.2rem;border-radius:999px;background:var(--ink);color:var(--card);box-shadow:var(--shadow);font-size:.92rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.cta-s{display:none}
@media(max-width:480px){.cta-l{display:none}.cta-s{display:inline}}
.theme{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;border:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow);cursor:pointer;padding:0;transition:transform .15s}
.theme svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:760px){.top nav{order:3;width:100%}.name small{display:none}}

/* La barre de lecture, fine et bleue, qui avance avec la page (site.js) */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;pointer-events:none;background:var(--blue-ai);border-radius:0 3px 3px 0;transform-origin:0 50%;transform:scaleX(0)}

/* ============ Accueil ============ */
.hero-x{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,6vw,4.5rem)}
.hero-x .it{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;background:var(--card);box-shadow:var(--shadow);font-size:.92rem;font-weight:500;margin-bottom:1.6rem}
.hero-x h1{font-size:clamp(3rem,7vw,5.6rem)}
.hero-x .statement{margin:1.4rem auto 0;max-width:42ch}
.hero-x .actions{justify-content:center}

/* Chaque section est une grande carte arrondie */
.block{padding:clamp(1.6rem,4vw,3.2rem);background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow)}
main>.block.wrap,body>.block.wrap{max-width:calc(var(--wrap) - 2*clamp(16px,3vw,32px));margin:clamp(.9rem,2vw,1.2rem) auto}
@media(max-width:1300px){main>.block.wrap,body>.block.wrap{margin-inline:clamp(16px,3vw,32px)}}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.txt h2{margin-top:1.1rem}
.txt .statement{margin-top:1rem}

/* Le dessin tableur / appli */
.swap{position:relative;padding-bottom:clamp(5rem,12vw,9rem)}
.fixlist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.5rem}
.fixlist li{padding:.8rem 1rem;border-radius:var(--r-md);background:var(--field)}
.fixlist b{display:block;font-weight:500}
.fixlist span{color:var(--muted);font-size:.88rem}

/* Projets choisis : une carte par projet, capture arrondie, en alternance */
#projets{background:transparent;box-shadow:none;padding:0}
.cases{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:clamp(.9rem,2vw,1.2rem)}
.case-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.4rem,3.5vw,3rem);align-items:center;padding:clamp(1.2rem,3vw,2rem);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.case-row:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cases li:nth-child(even) .case-img{order:-1}
.case-row h2{font-size:clamp(2.2rem,4.4vw,3.6rem)}
.case-txt .kick{margin-bottom:.9rem}
.case-row .small{display:inline-block;margin-top:.8rem;padding:.25rem .7rem;border-radius:999px;background:var(--field);color:var(--text-2);font-size:.8rem;font-weight:500}
.case-row p{margin-top:.9rem;color:var(--text-2);max-width:46ch}
.case-row .more{display:inline-flex;align-items:center;margin-top:1.2rem;min-height:40px;padding:0 1rem;border-radius:999px;background:var(--ink);color:var(--card);font-size:.9rem;font-weight:500}
.case-img{overflow:hidden;aspect-ratio:16/10;border-radius:var(--r-lg);background:var(--field)}
.case-img img{width:100%;height:100%;object-fit:cover;object-position:left top}
.case-img.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;padding:6% 7% 0;align-items:start}
.case-img.trio img{height:auto;border-radius:14px 14px 0 0}
#projets>.small{margin-top:1rem!important;padding-left:.5rem}
@media(max-width:820px){.case-row{grid-template-columns:minmax(0,1fr)}.cases li:nth-child(even) .case-img{order:0}}

/* Ce qu'on peut automatiser : une grille de cartes numérotées */
#automatiser .intro{margin-top:1rem}
.ideas{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.ideas li{display:flex;flex-direction:column;padding:1.3rem 1.3rem 1.2rem;border-radius:var(--r-lg);background:var(--field)}
.ideas h3{margin-top:.9rem}
.ideas p{color:var(--text-2);margin-top:.4rem;font-size:.93rem}
.ideas .seen{align-self:flex-start;margin-top:auto;padding-top:1rem;font-size:.8rem;color:var(--muted)}
@media(max-width:900px){.ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.ideas{grid-template-columns:minmax(0,1fr)}}

/* Méthode : quatre petites cartes */
.steps4{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem;counter-reset:s}
.steps4 li{counter-increment:s;padding:1.2rem;border-radius:var(--r-lg);background:var(--field)}
.steps4 li::before{content:"Étape " counter(s,decimal-leading-zero);display:block;font:500 .8rem/1 var(--mono);color:var(--blue-ai);letter-spacing:.02em;margin-bottom:.9rem}
.steps4 p{color:var(--text-2);margin-top:.35rem;font-size:.93rem}
@media(max-width:900px){.steps4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps4{grid-template-columns:minmax(0,1fr)}}

/* Méthode, parcours, contact : titres centrés */
#methode,.about-x,.contact-x{text-align:center}
#methode .steps4{text-align:left}
#methode>.label,.about-x>.label{box-shadow:none;background:var(--field)}
#methode>h2,.about-x>h2,.contact-x>h2{margin-top:1rem!important;margin-inline:auto}
.about-x .statement,.about-x p.muted,.contact-x .muted{margin-inline:auto}
.about-x .statement{margin-top:1.2rem!important;max-width:52ch}
.about-x p.muted{margin-top:1rem;max-width:60ch}
.about-x .sign{margin-top:1.4rem;font-weight:500}
.contact-x{background:var(--ink);color:var(--card)}
.contact-x>.label{background:color-mix(in srgb,var(--card) 14%,transparent);color:var(--card);box-shadow:none}
.contact-x .label svg{fill:var(--card)}
.contact-x .label .num{background:color-mix(in srgb,var(--card) 16%,transparent);color:var(--card)}
.contact-x h2{max-width:20ch}
.contact-x .muted{color:color-mix(in srgb,var(--card) 72%,transparent);max-width:52ch;margin-top:1rem}
.contact-x .actions{justify-content:center}
.contact-x .pill{background:var(--card);color:var(--ink)}
.copy{display:inline-flex;align-items:center;min-height:44px;padding:0 .4rem;background:none;border:0;color:color-mix(in srgb,var(--card) 72%,transparent);font:400 .92rem var(--font);cursor:pointer;margin-top:.9rem;text-decoration:underline;text-underline-offset:4px}
.copy:hover{color:var(--card)}
footer{padding:1.6rem 20px 2.4rem;text-align:center;font-size:.85rem;color:var(--muted)}

/* ============ Études de cas ============ */
main.case{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,3vw,32px);display:grid;gap:clamp(.9rem,2vw,1.2rem);padding-bottom:1rem}
main.case .hero{margin-top:clamp(1rem,3vw,2rem);padding:clamp(1.6rem,4vw,3rem);background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
main.case .hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem)}
main.case .lead{margin-top:1.1rem;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--text-2);max-width:44ch}
main.case .hero .actions .btn:not(.primary){background:var(--field);box-shadow:none}
@media(max-width:900px){main.case .hero{grid-template-columns:minmax(0,1fr)}}

.top-vis{position:relative;padding-bottom:12%}
.top-vis .laptop{width:86%}
.top-vis .lid img{display:block;width:100%;border-radius:var(--r-md);box-shadow:var(--shadow-lg)}
.top-vis .base{display:none}
.top-vis .phone{position:absolute;right:0;bottom:0;width:24%}
.top-vis .phone img{display:block;width:100%;border-radius:20px;box-shadow:var(--shadow-lg)}
.top-vis.fan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;padding:0;align-items:start}
.top-vis.fan .phone{position:static;width:100%}
.top-vis.fan .phone:nth-child(2){margin-top:18%}
.top-vis.fan .phone:nth-child(3){margin-top:6%}

.facts{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.6rem,1.5vw,1rem)}
.facts div{padding:1.2rem 1.3rem;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.facts dt{font-size:clamp(2.2rem,3.6vw,3rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.facts dd{margin:.5rem 0 0;color:var(--text-2);font-size:.88rem}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sec{padding:clamp(1.6rem,4vw,3rem);background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow)}
.intro{margin-top:1rem;color:var(--text-2);max-width:62ch;font-size:1.05rem}
/* Les repères de l'accueil, repris dans les études de cas */
.sec-body>.label{margin-bottom:1.2rem}
main.case .hero-txt>.kick{margin-bottom:1rem}
.feat>div>.kick{margin-bottom:.8rem}
.intro.again{margin-top:2rem}

.pain{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.pain li{padding:.85rem 1rem;border-radius:var(--r-md);background:var(--field)}
@media(max-width:700px){.pain{grid-template-columns:minmax(0,1fr)}}

.cmp{margin-top:1.6rem;display:grid;gap:.5rem}
.cmp-head,.cmp-row{display:grid;grid-template-columns:minmax(0,1fr);gap:.35rem 1.6rem;padding:1rem 1.1rem;border-radius:var(--r-md)}
.cmp-row{background:var(--field)}
.cmp-head{display:none}
.cmp-row .what{font-weight:600}
.cmp-row .b{color:var(--muted)}
.cmp-row .a{font-weight:500}
.cmp-row .b::before,.cmp-row .a::before{display:inline-block;font-size:.75rem;font-weight:600;padding:.1rem .55rem;border-radius:999px;margin-bottom:.3rem}
.cmp-row .b::before{content:"Avant";background:var(--card);color:var(--muted)}
.cmp-row .a::before{content:"Maintenant";background:var(--ink);color:var(--card)}
@media(min-width:860px){
  .cmp-head,.cmp-row{grid-template-columns:12rem minmax(0,1fr) minmax(0,1fr);align-items:baseline}
  .cmp-head{display:grid;padding-block:.2rem;font-size:.85rem;font-weight:500;color:var(--muted)}
  .cmp-row .b::before,.cmp-row .a::before{display:none}
}

.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.6rem}
.feat:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
.feat>div{padding:1.2rem;border-radius:var(--r-lg);background:var(--field);min-width:0}
.feat h3{margin-bottom:.45rem}
.feat p{color:var(--text-2);font-size:.93rem}
@media(max-width:900px){.feat,.feat:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.feat,.feat:has(>:nth-child(4):last-child){grid-template-columns:minmax(0,1fr)}}

.steps{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;counter-reset:s}
.steps li{counter-increment:s;padding:1.2rem;border-radius:var(--r-lg);background:var(--field)}
.steps li::before{content:"Étape " counter(s,decimal-leading-zero);display:block;font:500 .8rem/1 var(--mono);color:var(--blue-ai);letter-spacing:.02em;margin-bottom:.85rem}
.steps strong{display:block;font-weight:500;margin-bottom:.3rem}
.steps span{color:var(--text-2);font-size:.93rem}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

.tech{margin:1.6rem 0 0;display:grid;gap:.4rem;max-width:900px}
.tech div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.2rem;padding:.85rem 1.1rem;border-radius:var(--r-md);background:var(--field)}
.tech dt{font-weight:500}
.tech dd{margin:0;color:var(--text-2)}
@media(max-width:560px){.tech div{grid-template-columns:minmax(0,1fr);gap:.2rem}}

.note{margin-top:1.4rem;max-width:820px;padding:1.2rem 1.4rem;border-radius:var(--r-lg);background:var(--ink);color:var(--card)}
.note strong{display:block;font-weight:600;margin-bottom:.3rem}
.note span{display:block;color:color-mix(in srgb,var(--card) 78%,transparent)}

.learn{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.learn li{padding:1.2rem;border-radius:var(--r-lg);background:var(--field)}
.learn strong{display:block;font-weight:500;margin-bottom:.3rem}
.learn span{color:var(--text-2)}
@media(max-width:700px){.learn{grid-template-columns:minmax(0,1fr)}}

.shots{display:grid;gap:clamp(1.6rem,3vw,2.4rem);margin-top:1.8rem}
.shots figure{min-width:0}
.shot{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.shot img{width:100%}
figcaption{margin-top:.8rem;color:var(--muted);font-size:.88rem;max-width:62ch}
.cap{color:var(--muted);font-size:.88rem;margin-top:1.2rem}

.gal{margin-top:2.4rem}
.gal h3{font-size:1.4rem;font-weight:400;letter-spacing:-.02em}
.gal>p{color:var(--muted);margin-top:.3rem;font-size:.92rem}
.gal-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.2rem;margin-top:1.4rem}
.ph{margin:0;min-width:0}
.ph-btn{all:unset;display:block;cursor:zoom-in;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg);transition:transform .2s}
.ph-btn:hover{transform:translateY(-4px)}
.ph-btn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.ph-btn img{width:100%}
.ph figcaption{font-size:.85rem;line-height:1.45}
.ph figcaption strong{display:block;color:var(--ink);font-weight:500;margin-bottom:.1rem}
@media(max-width:760px){.gal-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.end{padding:clamp(2rem,5vw,3.5rem);border-radius:var(--r-xl);background:var(--ink);color:var(--card);text-align:center}
.end h2{max-width:22ch;margin-inline:auto}
.end .actions{justify-content:center}
@media(max-width:480px){.end .btn .pre{display:none}}
.end .btn.primary{background:var(--card);color:var(--ink)}
.end .btn:not(.primary){background:color-mix(in srgb,var(--card) 14%,transparent);color:var(--card);box-shadow:none}

#lb{position:fixed;inset:0;background:var(--scrim);display:none;align-items:center;justify-content:center;z-index:50;padding:1rem}
#lb.on{display:flex}
#lb img{max-height:92vh;max-width:min(92vw,430px);border-radius:26px}
#lb button{position:absolute;display:grid;place-items:center;background:var(--scrim-btn);color:var(--on-scrim);transition:transform .15s;border:0;border-radius:50%;width:46px;height:46px;font-size:1.4rem;cursor:pointer}
#lb button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#lb .x{top:1rem;right:1rem}#lb .p{left:1rem}#lb .n{right:1rem}

/* ============ Arrivées en glissant (site.js) ============ */
.js-rv .rv{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform 1s cubic-bezier(.16,.8,.2,1)}
.js-rv .rv.in{opacity:1;transform:none}
.js-rv .rv-l{transform:translateX(-8%)}
.js-rv .rv-r{transform:translateX(8%)}
.js-rv .rv-blur{transform:none;filter:blur(8px);transition:opacity 1s ease,filter 1.1s ease}
.js-rv .rv-blur.in{filter:none}
.js-rv .mask{display:block;overflow:hidden;padding:.16em 0 .06em;margin-top:-.16em}
.js-rv .mask>span.slit{display:block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.16,.8,.2,1)}
.js-rv .mask.in>span{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-rv .rv,.js-rv .mask>span.slit{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .case-row,.btn,.pill,.ph-btn{transition:none}
}

/* ============ Moins de cartes ============
   Accueil : Les sections reposent sur le fond, les cartes ne restent que pour les objets
   (projets, captures, dessin, contact). Listes en lignes, étiquettes en simple texte, titres à gauche. */

/* Sections sans carte, séparées par un filet */
main>.block.wrap{background:transparent;box-shadow:none;border-radius:0;padding:clamp(3rem,7vw,5.5rem) 0;margin-block:0}
main>.block.wrap+.block.wrap{border-top:1px solid var(--border)}
#projets{padding-top:clamp(1rem,3vw,2rem)}

/* Étiquettes : un numéro bleu et un mot, sans pilule */
.label,#methode>.label,.about-x>.label,.contact-x>.label{background:none;box-shadow:none;padding:0;border-radius:0;font-size:.95rem;color:var(--text-2);gap:.7rem}
.label .num,.contact-x .label .num{background:none;padding:0;border-radius:0;font-size:.85rem}
.contact-x .label .num{color:color-mix(in srgb,var(--card) 70%,transparent)}

/* Identité en haut et sous-titre du héros : du texte, pas des pilules */
.name{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding-left:0}
.hero-x .it{background:none;box-shadow:none;padding:0;color:var(--text-2)}

/* Les projets restent des cartes (ce sont des objets), le type de projet devient une ligne de texte */
.case-row .small{background:none;padding:0;border-radius:0;font-size:.9rem;color:var(--muted)}

/* Listes en lignes plutôt qu'en petites boîtes grises */
.fixlist{gap:0;margin-top:1.8rem}
.fixlist li{background:none;border-radius:0;padding:1rem 0;border-top:1px solid var(--border)}
.fixlist li:last-child{border-bottom:1px solid var(--border)}
.ideas,.steps4{gap:0 clamp(1.6rem,3vw,2.6rem);margin-top:2.4rem}
.ideas li,.steps4 li{background:none;border-radius:0;padding:1.4rem 0 1.8rem;border-top:1px solid var(--ink)}
.ideas h3,.steps4 h3{font-size:1.2rem}

/* Titres à gauche, la page ne tourne plus autour d'un axe central */
#methode,.about-x,.contact-x{text-align:left}
#methode>h2,.about-x>h2,.contact-x>h2{margin-inline:0}
.about-x .statement,.about-x p.muted,.contact-x .muted{margin-inline:0}
.contact-x .actions{justify-content:flex-start}
.about-x{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);column-gap:clamp(2rem,5vw,5rem)}
.about-x>.label,.about-x>h2{grid-column:1}
.about-x>.statement,.about-x>p{grid-column:2}
.about-x>.statement{grid-row:1/3;margin-top:0!important;align-self:end}
@media(max-width:820px){.about-x{display:block}}

/* Le contact reste un bloc : c'est l'action de la page */
main+.contact-x{margin-top:clamp(1rem,3vw,2rem)}
.contact-x>.label{color:color-mix(in srgb,var(--card) 80%,transparent)}

/* Études de cas : même logique. Les sections reposent sur le fond ; les captures, le bloc noir et l'appel final restent des objets */
main.case{gap:0}
main.case .hero{background:none;box-shadow:none;border-radius:0;padding:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,5vw,3.5rem)}
main.case .hero .actions .btn:not(.primary){background:var(--card);box-shadow:var(--shadow)}
.facts{gap:0 clamp(1.2rem,3vw,2.4rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.facts div{background:none;box-shadow:none;border-radius:0;padding:1.2rem 0 0;border-top:1px solid var(--ink)}
.sec{background:none;box-shadow:none;border-radius:0;padding:clamp(3rem,7vw,5rem) 0;border-top:1px solid var(--border)}
.pain{gap:0 clamp(1.6rem,3vw,2.6rem)}
.pain li{background:none;border-radius:0;padding:.95rem 0;border-top:1px solid var(--border)}
.cmp{gap:0}
.cmp-row{background:none;border-radius:0;border-top:1px solid var(--border);padding:1.1rem 0}
.cmp-head{padding-inline:0}
.cmp-row .b::before{background:var(--field)}
.feat,.steps,.learn{gap:0 clamp(1.6rem,3vw,2.6rem)}
.feat>div,.steps li,.learn li{background:none;border-radius:0;padding:1.3rem 0 1.7rem;border-top:1px solid var(--ink)}
.tech{gap:0}
.tech div{background:none;border-radius:0;padding:.95rem 0;border-top:1px solid var(--border)}
main.case .end{margin-top:clamp(1rem,3vw,2rem)}