/* identifiable · système de design web v1
   Jetons canoniques : identifiable_tokens.css (--id-*)
   Grille éditoriale : base 8pt, mesure 62-72 caractères, une idée par surface.
   Couleur : 60 petrol · 30 bone · 10 vert. Le vert seulement au verdict. */

:root{
  /* core */
  --id-petrol: #09333F;
  --id-petrol-deep: #06262F;
  --id-petrol-surface: #0C404F;
  --id-green: #26F7B2;
  --id-green-text: #0A6354;
  --id-green-vivid: #0FBF8B;
  --id-bone: #F4F1E9;
  --id-slate: #5B7480;
  --id-white: #FFFFFF;
  /* petrol scale */
  --id-petrol-50: #E8E8E0; --id-petrol-100: #DADCD6; --id-petrol-200: #C0C7C4;
  --id-petrol-300: #9BA9A8; --id-petrol-400: #758A8D; --id-petrol-500: #506C72;
  --id-petrol-600: #2F515A; --id-petrol-700: #0C404F; --id-petrol-800: #09333F;
  --id-petrol-900: #06262F;
  /* green scale (accent, verdict seulement) */
  --id-green-50: #D8FEF1; --id-green-100: #B5FCE5; --id-green-400: #26F7B2;
  --id-green-500: #0FBF8B; --id-green-700: #0A6354; --id-green-900: #084240;
  /* neutral */
  --id-neutral-100: #E2E2DC; --id-neutral-200: #CCD0CE; --id-neutral-300: #B1BABB;
  /* semantic */
  --id-text-primary: #09333F;
  --id-text-secondary: #5B7480;
  --id-text-on-dark: #F4F1E9;
  --id-surface-light: #F4F1E9;
  --id-surface-dark: #09333F;
  --id-border-light: #CCD0CE;
  --id-border-dark: #0C404F;
  /* secondaire éditorial */
  --id-sec-ocre: #DDA94A;
  --id-sec-argile: #BC5E45;
  /* tertiaire */
  --id-ter-sable: #E8DEC9;
  /* états */
  --id-dv-success: #2F8F6B; --id-dv-warning: #C98A1E; --id-dv-danger: #C2483B;

  /* typo : trois familles, trois fonctions */
  --id-disp: 'Schibsted Grotesk', system-ui, sans-serif;
  --id-text: 'Hanken Grotesk', system-ui, sans-serif;
  --id-mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* mouvement : resolve ease, cinq durées */
  --id-ease: cubic-bezier(.22,1,.36,1);
  --id-dur-instant: 80ms; --id-dur-quick: 160ms; --id-dur-base: 280ms;
  --id-dur-slow: 480ms; --id-dur-deliberate: 720ms;

  /* espace 8pt */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px;
  --s6: 48px; --s8: 64px; --s10: 80px; --s12: 96px;

  --line: #D8D3C7;
  --radius: 16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--id-bone);
  color:var(--id-text-primary);
  font-family:var(--id-text);
  font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(22px,5vw,60px)}
.measure{max-width:68ch}

/* ── Échelle typographique (onze niveaux, aucun entre-deux) ── */
.display-xl{font-family:var(--id-disp);font-weight:800;font-size:clamp(36px,5.6vw,64px);line-height:1.0;letter-spacing:-.025em}
.display-l{font-family:var(--id-disp);font-weight:800;font-size:clamp(30px,4.4vw,48px);line-height:1.02;letter-spacing:-.02em}
.t1{font-family:var(--id-disp);font-weight:700;font-size:clamp(26px,3.2vw,34px);line-height:1.08;letter-spacing:-.015em}
.t2{font-family:var(--id-disp);font-weight:700;font-size:clamp(21px,2.4vw,26px);line-height:1.14;letter-spacing:-.01em}
.t3{font-family:var(--id-disp);font-weight:700;font-size:20px;line-height:1.25}
.t4{font-family:var(--id-disp);font-weight:700;font-size:16.5px;line-height:1.35}
.accroche{font-family:var(--id-text);font-size:19px;line-height:1.5;font-weight:400}
.corps-petit{font-size:14px;line-height:1.55}
.legende{font-size:12.5px;line-height:1.5;color:var(--id-text-secondary)}
.eyebrow{
  font-family:var(--id-mono);font-size:11.5px;font-weight:500;line-height:1.4;
  letter-spacing:.18em;text-transform:uppercase;color:var(--id-text-secondary);
}
.eyebrow.on-dark{color:var(--id-green)}
.eyebrow.verdict{color:var(--id-green-text)}

.muted{color:var(--id-text-secondary)}
.on-dark{color:var(--id-text-on-dark)}

/* ── Navigation ── */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--id-petrol);
  border-bottom:1px solid var(--id-border-dark);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:flex-end;gap:.12em;text-decoration:none;color:var(--id-bone);
  font-family:var(--id-disp);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1}
.brand .dot{width:6px;height:6px;border-radius:50%;background:var(--id-green);margin-bottom:4px}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-family:var(--id-text);font-size:14px;font-weight:500;color:var(--id-bone);
  text-decoration:none;padding:8px 12px;border-radius:999px;
  transition:background var(--id-dur-quick) var(--id-ease);white-space:nowrap;
}
.nav-links a:hover{background:var(--id-petrol-surface)}
.nav-links a[aria-current="page"]{background:var(--id-petrol-surface)}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;background:none;border:1px solid var(--id-border-dark);border-radius:999px;
  width:40px;height:40px;cursor:pointer;color:var(--id-bone);align-items:center;justify-content:center}
@media(max-width:920px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--id-petrol-deep);
    flex-direction:column;align-items:stretch;padding:var(--s2) clamp(22px,5vw,60px) var(--s3);gap:2px;
    border-bottom:1px solid var(--id-border-dark)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;border-radius:12px}
  .nav-cta{margin:8px 0 0}
  .nav-toggle{display:flex}
}

/* ── Boutons : la capsule, toujours pleine ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--id-text);font-weight:600;font-size:15px;line-height:1;
  padding:14px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:none;
  transition:transform var(--id-dur-quick) var(--id-ease),background var(--id-dur-quick) var(--id-ease),
    border-color var(--id-dur-quick) var(--id-ease),color var(--id-dur-quick) var(--id-ease);
}
.btn:active{transform:scale(.985)}
/* verdict : remplissage vert, texte petrol (9,65:1 AAA) */
.btn-verdict{background:var(--id-green);color:var(--id-petrol)}
.btn-verdict:hover{background:var(--id-green-vivid)}
/* contour petrol sur clair */
.btn-outline{background:transparent;color:var(--id-petrol);border:1.5px solid var(--id-petrol);padding:12.5px 24.5px}
.btn-outline:hover{background:var(--id-petrol);color:var(--id-bone)}
/* contour bone sur sombre */
.btn-outline-dark{background:transparent;color:var(--id-bone);border:1.5px solid var(--id-petrol-400);padding:12.5px 24.5px}
.btn-outline-dark:hover{border-color:var(--id-bone)}
/* plein petrol sur clair */
.btn-solid{background:var(--id-petrol);color:var(--id-bone)}
.btn-solid:hover{background:var(--id-petrol-700)}

/* lien fléché */
.arrow-link{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  color:var(--id-green-text);text-decoration:none;
}
.arrow-link svg{transition:transform var(--id-dur-quick) var(--id-ease)}
.arrow-link:hover svg{transform:translateX(4px)}

/* ── Surfaces ── */
.section{padding:clamp(56px,8vw,96px) 0}
.section + .section{border-top:1px solid var(--line)}
.section-dark{background:var(--id-petrol);color:var(--id-text-on-dark);border-top:0}
.section-dark + .section{border-top:0}
.section-deep{background:var(--id-petrol-deep);color:var(--id-text-on-dark)}

/* trame : points verts ≤12 % sur petrol (dispositif graphique) */
.pattern-trame{
  background-color:var(--id-petrol);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij48cmVjdCB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIGZpbGw9IiMwOTMzM0YiLz48Y2lyY2xlIGN4PSI5IiBjeT0iOSIgcj0iMiIgZmlsbD0iIzI2RjdCMiIgZmlsbC1vcGFjaXR5PSIwLjEwIi8+PC9zdmc+");
  background-size:18px 18px;
}

/* cartes */
.card{
  background:var(--id-white);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s4);
}
.card-dark{
  background:var(--id-petrol-surface);border:1px solid var(--id-petrol-600);border-radius:var(--radius);
  padding:var(--s4);color:var(--id-text-on-dark);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* pastille capsule (tag) */
.pill{
  display:inline-flex;align-items:center;gap:9px;border:1px solid var(--id-petrol);
  border-radius:999px;padding:8px 16px;
  font-family:var(--id-mono);font-size:11px;letter-spacing:.06em;color:var(--id-petrol);
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--id-green);flex:none}
.pill.on-dark{border-color:var(--id-petrol-400);color:var(--id-bone)}

/* bloc réponse directe (AEO) */
.enbref{
  border:1.5px solid var(--id-petrol);border-radius:var(--radius);
  background:var(--id-white);padding:var(--s3) var(--s4);
  max-width:76ch;
}
.enbref .label{
  font-family:var(--id-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--id-green-text);margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.enbref .label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--id-green)}
.enbref p{font-size:16px;line-height:1.62}

/* FAQ */
.faq{max-width:76ch}
.faq details{border-top:1px solid var(--line);padding:var(--s2) 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--id-disp);font-weight:700;font-size:17px;line-height:1.35;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-family:var(--id-mono);font-size:18px;color:var(--id-green-text);flex:none;
  transition:transform var(--id-dur-base) var(--id-ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px;max-width:68ch;color:var(--id-petrol-600)}

/* tableau sobre */
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th{
  font-family:var(--id-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--id-text-secondary);text-align:left;padding:10px 14px;border-bottom:1.5px solid var(--id-petrol);
}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.table .num{font-family:var(--id-mono);font-size:13px}

/* légende verdict (rapport) */
.verdict-card{
  border:1.5px solid var(--id-petrol);border-radius:var(--radius);background:var(--id-white);
  padding:var(--s4);
}

/* bio auteur */
.author{
  display:flex;gap:var(--s2);align-items:flex-start;border-top:1px solid var(--line);
  padding-top:var(--s3);margin-top:var(--s6);max-width:76ch;
}
.author .mono-mark{flex:none;width:48px;height:48px;border-radius:50%;background:var(--id-petrol);
  display:flex;align-items:center;justify-content:center}

/* dates visibles */
.page-dates{font-family:var(--id-mono);font-size:11px;letter-spacing:.08em;color:var(--id-text-secondary);
  text-transform:uppercase}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--s3);align-items:start}
.reason-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){.reason-grid{grid-template-columns:1fr}}

/* héro en deux colonnes */
.hero-split{display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:center}
@media(max-width:760px){.hero-split{grid-template-columns:1fr}}

/* ── Pied de page ── */
.footer{background:var(--id-petrol-deep);color:var(--id-text-on-dark);padding:var(--s8) 0 var(--s5)}
.footer a{color:var(--id-petrol-300);text-decoration:none;transition:color var(--id-dur-quick) var(--id-ease)}
.footer a:hover{color:var(--id-bone)}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s4)}
@media(max-width:860px){.footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer .cols{grid-template-columns:1fr}}
.footer h4{font-family:var(--id-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--id-petrol-400);margin-bottom:var(--s2)}
.footer ul{list-style:none}
.footer li{padding:5px 0;font-size:14px}
.footer .bottom{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--id-petrol-700);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s2);
  font-size:12.5px;color:var(--id-petrol-400);
}
.footer .sig{font-family:var(--id-mono);font-size:11px;letter-spacing:.1em}

/* ── Révélation au défilement ── */
.reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--id-dur-deliberate) var(--id-ease),transform var(--id-dur-deliberate) var(--id-ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* formulaires */
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;background:var(--id-white);border:1px solid var(--id-neutral-200);border-radius:12px;
  font-family:var(--id-text);font-size:15px;color:var(--id-petrol);padding:12px 16px;outline:none;
  transition:border-color var(--id-dur-quick) var(--id-ease),box-shadow var(--id-dur-quick) var(--id-ease);
}
.field input:focus,.field textarea:focus{border-color:var(--id-petrol);box-shadow:0 0 0 3px rgba(9,51,63,.08)}
.field input.error,.field textarea.error{border-color:var(--id-dv-danger)}
.field .err{display:none;font-size:12.5px;color:var(--id-dv-danger);margin-top:5px}
.field .err.show{display:block}
textarea{resize:vertical;min-height:120px}

/* ════ Accueil · composition immersive ════ */

/* nav : voile petrol au défilement (toutes pages) */
.nav{background:rgba(9,51,63,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* héro accueil : split asymétrique, artefact à droite */
.hero-home{color:var(--id-text-on-dark);overflow:hidden}
.hero-home .inner{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center;
  padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px);
}
.hero-home h1{font-family:var(--id-disp);font-weight:800;letter-spacing:-.025em;line-height:1.02;
  font-size:clamp(34px,4.6vw,58px);max-width:22ch}
@media(max-width:920px){
  .hero-home .inner{grid-template-columns:1fr;gap:var(--s6)}
  .hero-home .radar-col{max-width:420px}
}

/* le radar : la résolution, du bruit au profil défini */
.radar-col{position:relative}
.radar{display:block;width:100%;height:auto}
.radar .ring,.radar .axis{stroke:var(--id-petrol-500);fill:none}
.radar .axis{stroke-opacity:.45}
.radar .axis-label{font-family:var(--id-mono);font-size:10.5px;letter-spacing:.08em;fill:var(--id-petrol-300)}
.radar .axis-weight{font-family:var(--id-mono);font-size:9.5px;fill:var(--id-petrol-400)}
.radar .scatter circle{fill:var(--id-slate);opacity:.55}
.radar .poly{stroke:var(--id-green);stroke-width:2;stroke-linejoin:round;fill:var(--id-green);fill-opacity:0;
  stroke-dasharray:620;stroke-dashoffset:620}
.radar .vertex{fill:var(--id-green);opacity:0}
.radar .center-dot{fill:var(--id-green)}
.radar-caption{margin-top:var(--s2);display:flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--id-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--id-petrol-300)}
.radar-caption::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--id-green);flex:none}
@media(prefers-reduced-motion:no-preference){
  .radar.in .scatter{animation:radar-noise-out .72s var(--id-ease) .9s forwards}
  .radar.in .poly{animation:radar-draw 1.4s var(--id-ease) .48s forwards,radar-fill .72s var(--id-ease) 1.7s forwards}
  .radar.in .vertex{animation:radar-vertex .28s var(--id-ease) forwards}
  .radar.in .vertex:nth-of-type(1){animation-delay:1.5s}
  .radar.in .vertex:nth-of-type(2){animation-delay:1.58s}
  .radar.in .vertex:nth-of-type(3){animation-delay:1.66s}
  .radar.in .vertex:nth-of-type(4){animation-delay:1.74s}
  .radar.in .vertex:nth-of-type(5){animation-delay:1.82s}
  .radar.in .vertex:nth-of-type(6){animation-delay:1.9s}
}
@media(prefers-reduced-motion:reduce){
  .radar .scatter{opacity:0}
  .radar .poly{stroke-dashoffset:0;fill-opacity:.16}
  .radar .vertex{opacity:1}
}
@keyframes radar-draw{to{stroke-dashoffset:0}}
@keyframes radar-fill{to{fill-opacity:.16}}
@keyframes radar-vertex{to{opacity:1}}
@keyframes radar-noise-out{to{opacity:0}}

/* strate des quatre cadres */
.frameworks{background:var(--id-petrol-deep);color:var(--id-text-on-dark);
  border-top:1px solid var(--id-petrol-700)}
.frameworks .row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);
  padding-top:var(--s4);padding-bottom:var(--s4)}
.frameworks .fw b{display:block;font-family:var(--id-disp);font-weight:700;font-size:16.5px;line-height:1.35}
.frameworks .fw span{display:block;font-size:12.5px;line-height:1.5;color:var(--id-petrol-400);margin-top:2px}
@media(max-width:860px){.frameworks .row{grid-template-columns:1fr 1fr}}

/* index des chapitres : trois questions */
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s6)}
.chapter{display:block;text-decoration:none;color:inherit;border-top:2px solid var(--id-petrol);
  padding-top:var(--s3);transition:transform var(--id-dur-base) var(--id-ease)}
.chapter:hover{transform:translateY(-4px)}
.chapter .q{font-family:var(--id-disp);font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.2;letter-spacing:-.01em}
.chapter .a{margin-top:10px;font-size:14px;color:var(--id-text-secondary);max-width:34ch}
.chapter .go{margin-top:var(--s2);display:inline-flex;align-items:center;gap:8px;
  font-family:var(--id-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--id-green-text)}
@media(max-width:860px){.chapters{grid-template-columns:1fr}}

/* pilier Défini : rail collant + liste des propriétés */
.rail-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:start}
.rail{position:sticky;top:104px}
.prop{display:grid;grid-template-columns:44px 1fr;gap:var(--s2);padding:var(--s3) 0;align-items:start}
.prop + .prop{border-top:1px solid var(--line)}
.prop .nm{display:flex;align-items:baseline;gap:12px}
.prop .nm b{font-family:var(--id-disp);font-weight:700;font-size:18px;letter-spacing:-.01em}
.prop .nm .w{font-family:var(--id-mono);font-size:12px;color:var(--id-text-secondary)}
.prop p{font-size:14px;line-height:1.55;color:var(--id-text-secondary);margin-top:4px;max-width:52ch}
@media(max-width:860px){.rail-grid{grid-template-columns:1fr}.rail{position:static}}

/* pilier Mesuré : échelle des bandes, seuil au verdict */
.scale{margin-top:var(--s6)}
.scale .track{position:relative;display:flex;height:56px;border-radius:999px;overflow:hidden}
.scale .seg{display:flex;align-items:center;justify-content:center}
.scale .labels{display:flex;margin-top:12px}
.scale .labels span{font-family:var(--id-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--id-petrol-300);text-align:center}
.scale .threshold{position:absolute;top:-14px;bottom:-14px;left:70%;width:2px;background:var(--id-green)}
.scale .threshold::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--id-green)}
.scale-wrap{position:relative;padding-top:var(--s3)}
.scale-thr-label{position:absolute;top:0;left:70%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--id-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--id-green)}
@media(max-width:640px){.scale-thr-label{transform:none;left:auto;right:0}}

/* pilier Défendable : le compteur 67 */
.case-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.case-figure{text-align:left}
.case-figure .big{font-family:var(--id-mono);font-weight:500;font-size:clamp(88px,11vw,148px);line-height:1;
  letter-spacing:-.04em;color:var(--id-petrol)}
.case-figure .big sub{font-size:.32em;letter-spacing:0;color:var(--id-text-secondary);vertical-align:baseline}
.case-figure .verdict-line{margin-top:var(--s2);font-family:var(--id-disp);font-weight:700;font-size:20px}
.gap-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding:14px 0}
.gap-row + .gap-row{border-top:1px solid var(--line)}
.gap-row b{font-family:var(--id-disp);font-weight:700;font-size:16.5px}
.gap-row .v{font-family:var(--id-mono);font-size:14px}
@media(max-width:860px){.case-grid{grid-template-columns:1fr}}

/* bento des domaines : matières variées */
.bento{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s6)}
.bento .cell{border-radius:var(--radius);padding:var(--s4);display:flex;flex-direction:column;min-height:260px}
.bento .cell .spacer{flex:1}
.bento .cell-dark{background-color:var(--id-petrol);color:var(--id-text-on-dark)}
.bento .cell-light{background:var(--id-white);border:1px solid var(--line)}
.bento .cell-sable{background:var(--id-ter-sable)}
.bento .cell-seal{background:var(--id-white);border:1px solid var(--line);position:relative;overflow:hidden}
.bento .cell-seal .seal-bg{position:absolute;right:-36px;bottom:-36px;width:190px;opacity:.10;pointer-events:none}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bento .cell{min-height:0}}