:root{
  --navy:#171c30; --navy-2:#2a3147; --navy-3:#36384b;
  --coral:#dd5355; --coral-light:#f16e6f; --coral-dark:#a53c3e; --coral-tint:#fff4f4;
  --ink:#191a1c; --muted:#727272; --line:#e6e6ea; --bg:#fff; --bg-soft:#f5f5f5;
  --radius:2rem; --radius-sm:1.6rem;
  --font:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-label:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1160px,100% - 2rem);margin-inline:auto}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:1rem}
h3{font-size:1.25rem;margin-bottom:.5rem}
p+p{margin-top:1rem}
.lead{font-size:1.2rem;max-width:44rem}
.eyebrow{display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral);margin-bottom:1rem}
em.hl{font-style:normal;color:var(--coral)}

/* Header */
header.site{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:1rem}
.logo{font-weight:800;font-size:1.6rem;text-decoration:none;letter-spacing:-.03em;color:var(--navy)}
.logo span{color:var(--coral)}
nav.main{display:flex;gap:1.75rem;align-items:center}
nav.main a{text-decoration:none;font-weight:600;font-size:.95rem;padding:.25rem 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current]{border-color:var(--coral)}
.lang{font-size:.85rem;font-weight:700;color:var(--muted)}
.lang b{color:var(--navy)}
.burger{display:none;background:none;border:0;font-size:1.6rem;cursor:pointer;color:var(--navy)}
@media(max-width:900px){
  .burger{display:block}
  nav.main{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:1.5rem 1rem;border-bottom:1px solid var(--line)}
  nav.main.open{display:flex}
}

/* Buttons */
.btn{display:inline-block;text-decoration:none;font-weight:700;font-family:inherit;font-size:1rem;padding:.9rem 1.6rem;border-radius:999px;background:var(--coral);color:#fff;border:2px solid var(--coral);transition:.2s;cursor:pointer}
.btn:hover{background:var(--coral-dark);border-color:var(--coral-dark)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.sm{padding:.55rem 1.1rem;font-size:.9rem}

/* Hero */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:6rem 0 6.5rem}
.hero::before{content:"";position:absolute;right:-12rem;top:-10rem;width:38rem;height:38rem;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--coral-light),var(--coral) 55%,transparent 72%);opacity:.9}
.hero::after{content:"";position:absolute;right:14rem;bottom:-9rem;width:18rem;height:18rem;border-radius:50%;border:2px solid rgba(255,255,255,.18)}
.hero .wrap{position:relative;z-index:1}
.hero p.lead{margin:1.5rem 0 2.25rem;color:#d9dbe6}
.hero .eyebrow{color:var(--coral-light)}

/* Sections */
section.block{padding:5.5rem 0}
section.soft{background:var(--bg-soft)}
section.tint{background:var(--coral-tint)}
.cols{display:grid;gap:1.5rem}
.cols.c2{grid-template-columns:repeat(2,1fr)}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.cols.c4{grid-template-columns:repeat(2,1fr)}.cols.c3{grid-template-columns:1fr}}
@media(max-width:640px){.cols.c2,.cols.c4{grid-template-columns:1fr}}
.intro{max-width:46rem;margin-bottom:3rem}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:2rem;display:flex;flex-direction:column;gap:.75rem;transition:.2s}
a.card{text-decoration:none}
a.card:hover{transform:translateY(-4px);border-color:var(--coral);box-shadow:0 18px 40px -22px rgba(23,28,48,.35)}
.card .more{margin-top:auto;padding-top:.75rem;font-weight:700;color:var(--coral)}
.card.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.icon{width:52px;height:52px;border-radius:50%;background:var(--coral-tint);color:var(--coral);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.tag{font-size:.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.principle{border-top:3px solid var(--coral);padding-top:1.25rem}
.principle h3{color:var(--navy)}

/* Conviction */
.conviction{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
@media(max-width:900px){.conviction{grid-template-columns:1fr}}
.steps-list{display:grid;gap:1.75rem}
.steps-list div{padding-left:1.25rem;border-left:3px solid var(--coral)}
.punch{font-size:1.35rem;font-weight:700;color:var(--navy);margin-top:2rem}

/* Maturity */
.maturity .card .fit{color:var(--muted);font-size:.95rem}
.maturity .card .answer{font-size:.98rem}
.step-n{font-size:.85rem;font-weight:800;color:var(--coral);letter-spacing:.1em}

/* Steps (démarche) */
.timeline{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.timeline{grid-template-columns:1fr}}
.timeline li{list-style:none;counter-increment:s;background:#fff;border-radius:var(--radius-sm);padding:2rem;border:1px solid var(--line);position:relative}
.timeline li::before{content:counter(s,decimal-leading-zero);display:block;font-size:2.6rem;font-weight:800;color:var(--coral);line-height:1;margin-bottom:1rem}
.timeline li strong{display:block;font-size:1.15rem;color:var(--navy);margin-bottom:.4rem}
ul.checks{list-style:none;padding:0;display:grid;gap:1.1rem}
ul.checks li{padding-left:2rem;position:relative}
ul.checks li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.8rem;border-radius:50%;background:var(--coral)}
ul.checks strong{color:var(--navy)}

/* Difference */
.diff{background:var(--navy);color:#fff;border-radius:var(--radius);padding:3.5rem;display:grid;grid-template-columns:1fr 2fr;gap:3rem}
@media(max-width:900px){.diff{grid-template-columns:1fr;padding:2rem}}
.diff h2{color:#fff;margin:0}
.diff p{color:#d9dbe6}

/* References */
.refs{display:flex;flex-wrap:wrap;gap:.75rem}
.ref{padding:.6rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:.95rem}
.ref.todo{border-style:dashed;border-color:var(--coral);color:var(--coral-dark);background:var(--coral-tint)}
.note{font-size:.85rem;color:var(--muted);margin-top:1rem}

/* CTA */
.cta{background:linear-gradient(to bottom right,var(--coral-light) 0%,var(--coral) 28%,#8c3f59 58%,var(--navy-2) 80%,var(--navy) 100%);color:#fff;text-align:center;padding:6.5rem 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;left:-8rem;top:-9rem;width:26rem;height:26rem;border-radius:50%;border:2px solid rgba(255,255,255,.22)}
.cta .wrap{position:relative}
.cta h2{max-width:40rem;margin-inline:auto}
.cta p{font-size:1.2rem;margin:0 auto 2rem;max-width:36rem}
.cta .btn{background:#fff;color:var(--coral-dark);border-color:#fff}
.cta .btn:hover{background:transparent;color:#fff;border-color:#fff}

footer.site{background:var(--navy);color:#b8bbcb;padding:4rem 0 2rem;font-size:.95rem}
footer.site .logo{color:#fff}
footer.site .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
@media(max-width:700px){footer.site .grid{grid-template-columns:1fr}}
footer.site h4{color:#fff;margin-bottom:.75rem;font-size:.95rem}
footer.site a{display:block;text-decoration:none;padding:.15rem 0}
footer.site a:hover{color:var(--coral-light)}
footer.site .legal{border-top:1px solid var(--navy-3);padding-top:1.5rem;font-size:.85rem}
.breadcrumb{font-size:.9rem;margin-bottom:1.5rem;color:#b8bbcb}
.breadcrumb a{text-decoration:none;color:var(--coral-light)}

/* Logo */
.logo{display:block}
.logo-img{height:44px;width:auto;aspect-ratio:870/280}
footer.site .logo-img{height:56px}

/* Mega menu */
.has-menu{position:static}
.has-menu>.menu-trigger{display:inline-flex;gap:.35rem;align-items:center;font-weight:700;color:var(--coral-dark)}
.caret{font-size:.8em;transition:transform .2s}
.has-menu:hover .caret,.has-menu:focus-within .caret{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 30px 50px -30px rgba(23,28,48,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.has-menu:hover .mega,.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega-inner{width:min(1160px,100% - 2rem);margin-inline:auto;padding:1.75rem 0 2rem;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
nav.main .mega a{border:0;padding:0}
.mega-all{background:var(--navy);color:#fff;border-radius:var(--radius-sm);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.mega-all strong{font-size:1.1rem;line-height:1.25}
.mega-all .tag{color:var(--coral-light)}
.mega-all:hover{background:var(--navy-2)}
.mega-item{display:flex;gap:.9rem;align-items:flex-start;border:1px solid var(--line)!important;border-radius:var(--radius-sm);padding:1.1rem!important;transition:.15s}
.mega-item:hover,.mega-item.current{border-color:var(--coral)!important;background:var(--coral-tint)}
.mega-item .num{flex:none;width:36px;height:36px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.mega-item strong{display:block;font-size:1rem;color:var(--navy)}
.mega-item em{font-style:normal;font-size:.85rem;color:var(--muted);line-height:1.35;display:block;margin-top:.15rem}
@media(max-width:900px){
  .has-menu{width:100%}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0}
  .mega-inner{width:auto;padding:.75rem 0 0;grid-template-columns:1fr}
  .mega-all{display:none}
}

/* Offers = clé de la page d'accueil */
.offers{padding:4.5rem 0 5rem;position:relative;z-index:2}
.offers-head{margin-bottom:2rem}
.offers-head h2{color:var(--navy);max-width:36rem}

.offers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:1000px){.offers-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.offers-grid{grid-template-columns:1fr}}
.offer{background:#fff;border:1px solid var(--line);border-top:5px solid var(--coral);border-radius:var(--radius-sm);padding:2rem 1.6rem;text-decoration:none;display:flex;flex-direction:column;gap:.6rem;box-shadow:0 24px 50px -28px rgba(23,28,48,.5);transition:.2s}
.offer:hover{transform:translateY(-6px);background:var(--navy);color:#fff;border-color:var(--navy);border-top-color:var(--coral)}
.offer:hover p{color:#d9dbe6}
.offer .num{font-size:2.6rem;font-weight:800;line-height:1;color:var(--coral)}
.offer h3{font-size:1.35rem;margin:0}
.offer p{color:var(--muted);font-size:.98rem}
.offer .more{margin-top:auto;padding-top:.75rem;font-weight:700;color:var(--coral)}
.hero{padding-bottom:5.5rem}
.hero .btn.ghost{margin-left:.5rem}

/* Où en êtes-vous ? : même hover que les offres */
.maturity .card{border-top:5px solid var(--coral);box-shadow:0 24px 50px -28px rgba(23,28,48,.35)}
a.ref.link{text-decoration:none;color:var(--coral-dark);border-color:var(--coral)}
a.ref.link:hover{background:var(--coral);color:#fff}


/* Revue : accessibilité et contrastes (texte corail sur blanc -> corail foncé) */
.btn{background:#c8454a;border-color:#c8454a}
.btn:hover{background:var(--coral-dark);border-color:var(--coral-dark)}
.eyebrow,.tag,.step-n,.card .more,.offer .more{color:var(--coral-dark)}
.offer:hover .tag,.offer:hover .more{color:var(--coral-light)}
.hero .eyebrow{color:var(--coral-light)}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Maturité : libellé + offres concernées */
.maturity .fit .lbl{display:block;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;font-size:.8rem}
.chips>span{font-weight:700;color:var(--muted);margin-right:.25rem}
.chip{text-decoration:none;font-weight:700;padding:.2rem .7rem;border-radius:999px;background:var(--coral-tint);color:var(--coral-dark);border:1px solid var(--coral)}
.chip:hover{background:var(--coral);color:#fff}

/* Autres offres */
.offers-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.offers-grid.three{grid-template-columns:1fr}}
.offers-grid.three .offer{box-shadow:none}

.callout{max-width:48rem;margin-top:2.5rem;padding:1.5rem 1.75rem;border-radius:var(--radius-sm);background:var(--coral-tint);border-left:5px solid var(--coral)}
.callout strong{color:var(--navy);display:block;margin-bottom:.35rem}
.callout a{font-weight:700;color:var(--coral-dark)}

.hero .eyebrow a{text-decoration:none;color:inherit;opacity:.85}
.hero .eyebrow a:hover{opacity:1;text-decoration:underline}

/* Références mises en avant */
.refsband{background:var(--bg-soft);padding:2.25rem 0;border-bottom:1px solid var(--line)}
.refsband .eyebrow{margin-bottom:.75rem}
.refsband .ref{font-size:1.05rem;padding:.75rem 1.4rem;font-weight:700;color:var(--navy)}
.refsband .ref.todo{color:var(--coral-dark)}
.refsband.home{background:transparent;border:0;padding:0 0 4.5rem;margin-top:-1.5rem}
.refsband.home .wrap{border-top:1px solid var(--line);padding-top:2.5rem}

/* Sprint de preuve */
.sprint{background:var(--navy);color:#fff;border-radius:var(--radius);padding:3.5rem;display:grid;grid-template-columns:1fr 1.3fr;gap:3rem;position:relative;overflow:hidden}
.sprint::after{content:"5";position:absolute;right:-1rem;bottom:-5rem;font-size:20rem;font-weight:800;line-height:1;color:rgba(255,255,255,.05);pointer-events:none}
@media(max-width:980px){.sprint{grid-template-columns:1fr;padding:2rem}}
.sprint h2{color:#fff}
.sprint p{color:#d9dbe6}
.sprint-cols{display:grid;gap:2rem;position:relative;z-index:1}
.sprint-cols h3{color:var(--coral-light)}
.sprint .checks strong{color:#fff}
.sprint .checks li{color:#d9dbe6}
.sprint .eyebrow{color:var(--coral-light)}
.chips.on-dark>span{color:#b8bbcb}
.chips.on-dark .chip{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.chips.on-dark .chip:hover{background:var(--coral);border-color:var(--coral)}
.sprint .btn{background:var(--coral);border-color:var(--coral)}

.btn.outline{background:transparent;color:var(--coral-dark);border-color:var(--coral)}
.btn.outline:hover{background:var(--coral);border-color:var(--coral);color:#fff}

/* Démarche en 3 étapes : hover rouge clair (non cliquable, donc pas de bleu nuit) */
.timeline li{transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.timeline li:hover{transform:translateY(-6px);background:linear-gradient(160deg,#ffecec,#ffd3d3);border-color:var(--coral-light);box-shadow:0 22px 40px -24px rgba(221,83,85,.55)}
.timeline li:hover::before{color:var(--coral-dark)}

/* Texte justifié dans « Ce que nous réalisons » */
.what{text-align:justify;hyphens:auto;-webkit-hyphens:auto}

/* Colonne de gauche fixe (sticky) jusqu'à la fin de la section */
.split{display:grid;grid-template-columns:5fr 7fr;gap:4rem;align-items:start}
.split-side{position:sticky;top:110px}
.split-side .lead{font-size:1.1rem}
.split .timeline{grid-template-columns:1fr}
.split .timeline li{display:grid;grid-template-columns:4.5rem 1fr;align-content:start}
.split .timeline li::before{grid-row:1/3;margin:0}
.split .timeline li:not(:last-child){margin-bottom:0}
.conviction>div:first-child{position:sticky;top:110px}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:2rem}
  .split-side,.conviction>div:first-child{position:static}
}

/* Encadrés d'aiguillage : en fin de page, après la démarche */
.callouts-band{padding:3.5rem 0;background:var(--bg)}
.callouts{display:grid;grid-template-columns:1fr;gap:1.25rem}
.callouts .callout{max-width:none;margin:0}


/* ===== Règle de hover (toutes pages) =====
   Cliquable      -> bleu nuit
   Non cliquable  -> rouge clair                                   */

/* Non cliquables : rouge clair */
.timeline li:hover,.maturity .card:hover{transform:translateY(-6px);background:linear-gradient(160deg,#ffecec,#ffd3d3);border-color:var(--coral-light);box-shadow:0 22px 40px -24px rgba(221,83,85,.55)}
.maturity .card{transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.maturity .card:hover{border-top-color:var(--coral)}

/* Cliquables : bleu nuit */
.btn:hover,.btn.outline:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.hero .btn:not(.ghost):hover,.sprint .btn:hover{background:#fff;border-color:#fff;color:var(--navy)}
.cta .btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.chip:hover,a.ref.link:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.chips.on-dark .chip:hover{background:#fff;border-color:#fff;color:var(--navy)}
a.card:hover{border-color:var(--navy)}
.mega-item:hover{background:var(--navy)!important;border-color:var(--navy)!important}
.mega-item:hover strong{color:#fff}
.mega-item:hover em{color:#d9dbe6}
.mega-item.current:not(:hover){border-color:var(--coral)!important;background:var(--coral-tint)}

/* Accueil : cartes d'information unifiées (même forme que les cartes d'offres) */
.stack{display:grid;gap:1.25rem}
.card{border-top:5px solid var(--coral);box-shadow:0 24px 50px -28px rgba(23,28,48,.35);transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-6px);background:linear-gradient(160deg,#ffecec,#ffd3d3);border-color:var(--coral-light);border-top-color:var(--coral);box-shadow:0 22px 40px -24px rgba(221,83,85,.55)}
.card h3{color:var(--navy)}

/* Mot mis en valeur dans les titres des bandeaux */
.hero h1 em{font-style:normal;color:var(--coral-light)}

/* Mots mis en valeur dans les titres de section */
h2 em{font-style:normal;color:var(--coral)}

/* « Ce qui fait la différence » : bande bleu nuit pleine largeur, texte aligné sur les autres sections */
.band-dark{background:var(--navy);color:#fff}
.band-dark h2{color:#fff}
.band-dark p{color:#d9dbe6;font-size:1.1rem}

/* Sur-titres : on garde l'écriture d'origine (Plus Jakarta Sans) */
.eyebrow,.tag,.step-n,.fit .lbl{font-family:var(--font-label)}

/* Nos 4 offres : navigation compacte à gauche (fixe), offres développées à droite */
.offers{padding:5.5rem 0}
.mini-nav{display:grid;gap:.75rem;margin-top:2rem}
.mini-nav .mega-item{text-decoration:none;padding:.9rem 1rem!important}
.mini-nav .mega-item.active{border-color:var(--coral)!important;background:var(--coral-tint)}
.mini-nav .mega-item:hover{background:var(--navy)!important;border-color:var(--navy)!important}
.offer.big{padding:2.25rem 2rem;scroll-margin-top:110px}
.offer.big p{font-size:1rem}
.mini-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.5rem;margin:.5rem 0 .25rem}
.mini-list li{position:relative;padding-left:1.1rem;font-size:.93rem;color:var(--ink)}
.mini-list li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border-radius:50%;background:var(--coral)}
.offer:hover .mini-list li{color:#fff}
@media(max-width:600px){.mini-list{grid-template-columns:1fr}.mini-nav{display:none}}

/* ===== Articles ===== */
.prose{max-width:46rem;margin-inline:auto}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:3rem 0 1rem}
.prose p{font-size:1.02rem}
.prose p+p{margin-top:1rem}
.prose .lead{font-size:1.15rem}
.prose .case{display:block;font-family:var(--font-label);font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:.4rem}
.article-meta{font-size:.9rem;color:var(--muted)}
.hero .article-meta{color:#b8bbcb;margin-top:1.25rem}
.article-figure{margin:2.5rem auto;max-width:52rem;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);padding:1.5rem}
.article-figure img{width:100%;height:auto;margin:0 auto;border-radius:1rem}
.article-figure figcaption{text-align:center;font-size:.9rem;color:var(--muted);margin-top:1rem}
.tech-note{margin-top:1.5rem;padding:1rem 1.25rem;border-left:5px solid var(--coral);background:var(--coral-tint);border-radius:0 1rem 1rem 0;font-size:.95rem}
.tech-label{display:block;font-family:var(--font-label);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--coral-dark);margin-bottom:.25rem}
.table-wrap{overflow-x:auto;margin-top:2rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff}
table.compare{width:100%;border-collapse:collapse;min-width:640px}
table.compare th,table.compare td{padding:1rem 1.25rem;text-align:left;border-bottom:1px solid var(--line);font-size:.95rem}
table.compare thead th{background:var(--navy);color:#fff;font-weight:700}
table.compare tbody th{color:var(--navy);font-weight:700;background:var(--bg-soft);white-space:nowrap}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0}
.back-link{font-weight:700;color:var(--coral-dark);text-decoration:none}
.back-link:hover{color:var(--navy);text-decoration:underline}

/* Liste d'articles */
.article-list{display:grid;gap:2rem}
.article-card{display:grid;grid-template-columns:1.1fr 1fr;background:#fff;border:1px solid var(--line);border-top:5px solid var(--coral);border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;box-shadow:0 24px 50px -28px rgba(23,28,48,.35);transition:.2s}
.article-card:hover{transform:translateY(-6px);background:var(--navy);color:#fff;border-color:var(--navy);border-top-color:var(--coral)}
.article-thumb{background:var(--bg-soft);display:grid;place-items:center;padding:2rem}
.article-thumb img{width:100%;height:auto;border-radius:.75rem}
.article-info{padding:2.25rem;display:flex;flex-direction:column;gap:.75rem}
.article-info h2{font-size:1.6rem;margin:0}
.article-card:hover .article-meta,.article-card:hover p{color:#d9dbe6}
.article-card:hover .tag,.article-card:hover .more{color:var(--coral-light)}
.article-info .more{margin-top:auto;font-weight:700;color:var(--coral-dark)}
@media(max-width:800px){.article-card{grid-template-columns:1fr}}

/* Liste d'articles en grille de cartes verticales */
.article-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.article-card{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.article-thumb{padding:1.5rem}
.takeaways{display:grid;gap:1.25rem;margin-top:2rem}
.takeaways .card h3{font-size:1.15rem}


/* Menu IA : 6 cartes de même format sur une seule ligne (pastille au-dessus du texte) */
@media(min-width:901px){
  .mega-item{flex-direction:column;gap:.6rem}
  .mega-item em{font-size:.8rem}
}

/* Accueil : cartes d'articles compactes (miniature à gauche, texte à droite) */
.stack .article-card{grid-template-columns:1fr 1.5fr;grid-template-rows:auto}
.stack .article-thumb{padding:1rem}
.stack .article-info{padding:1.5rem;gap:.5rem}
.stack .article-info h2{font-size:1.15rem}
.stack .article-info p:not(.article-meta){font-size:.92rem}
@media(max-width:700px){.stack .article-card{grid-template-columns:1fr}}

/* Tableau d'article : même largeur que le texte */
.table-wrap{max-width:46rem;margin-inline:auto}
table.compare{min-width:0;table-layout:fixed}
table.compare th,table.compare td{padding:.8rem .9rem;font-size:.88rem;vertical-align:top}
table.compare tbody th{white-space:normal;width:24%}
@media(max-width:640px){table.compare{min-width:560px}}

/* Image d'article agrandissable */
.article-figure img{cursor:zoom-in}
dialog.lightbox{margin:auto;border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh;overflow:visible;color:#fff}
dialog.lightbox::backdrop{background:rgba(23,28,48,.9)}
dialog.lightbox img{display:block;max-width:94vw;max-height:84vh;width:auto;height:auto;background:#fff;border-radius:1rem;cursor:zoom-out}
.lightbox-caption{text-align:center;margin-top:.75rem;font-size:.95rem;color:#d9dbe6}
.lightbox-close{position:absolute;top:-2.75rem;right:0;width:2.25rem;height:2.25rem;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:1rem;font-weight:700;cursor:pointer}
.lightbox-close:hover{background:#fff;color:var(--navy)}

/* Articles : sous-titres et passages à compléter */
.prose h3{font-size:1.15rem;margin:2rem 0 .5rem;color:var(--navy)}
mark.todo{background:var(--coral-tint);color:var(--coral-dark);border:1px dashed var(--coral);border-radius:.4rem;padding:.05rem .4rem;font-size:.92em}