/* Bénéfices — la composition « cellules », RETENUE par Theo le 18/09 (« je garde cellules »). html[data-benefices="cellules"] est posé par le script.
   Le constat sur l'ancienne version (« bord ») : des cartes arrondies flottantes posées dans une grille à filets, deux systèmes qui se mélangeaient ; des colonnes de 2, 2 et 3 bénéfices,
   donc un grand vide sous les deux premières. Ici, plus de cartes : chaque bénéfice est une cellule à filets de sa colonne, la cible en tête sur un bandeau teinté, d'un bord à l'autre de l'écran,
   le texte calé sur la grille de la page (--x : la marge de contenu ramenée au bord de l'écran ; --w : la largeur d'une colonne de contenu). Les cellules se partagent la hauteur de la colonne :
   là où il n'y a que deux bénéfices, ils prennent plus de place, et le vide disparaît. Le pictogramme reste en haut, le texte se cale en bas.
   Essayées le même jour et retirées (l'historique git les garde) : « onglets » (le visiteur choisit sa cible) et « bandes » (une bande par cible).
   Depuis le 24/09 les colonnes portent trois arguments chacune (copy réécrite par étape d'entreprise) : le partage de hauteur ne sert plus qu'à absorber les écarts de longueur de texte. */
html[data-benefices="cellules"] .benefices { --x: max(var(--marge), calc((100vw - 1540px) / 2 + var(--marge))); --w: calc((100vw - 2 * var(--x)) / 3); overflow-x: clip; }

/* L'espace du bas de la section (Theo, 18/09 : « augmente légèrement l'espace du bas de section ») : 160 px au lieu de 120, bureau seulement ; les deux filets décoratifs qui descendent sous le bloc
   s'allongent d'autant pour rester accrochés à la grille. `body` dans le sélecteur : la règle de la page est chargée après cette feuille. */
@media (min-width: 1101px) {
  html body .benefices .in { padding-bottom: 160px; }
  html[data-lignes="trois"] body .benefices .in::before, html[data-lignes="trois"] body .benefices .in::after { height: 160px; }
}

html[data-benefices="cellules"] .benefices .cibles { display: grid; width: 100vw; margin-left: calc(50% - 50vw); grid-template-columns: calc(var(--x) + var(--w)) var(--w) calc(var(--w) + var(--x)); grid-template-rows: auto 1fr; gap: 0; border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
html[data-benefices="cellules"] .benefices .cible { display: grid; grid-row: 1 / 3; grid-template-rows: subgrid; row-gap: 0; padding: 0; border-right: 1px solid var(--trait); }
html[data-benefices="cellules"] .benefices .cible:last-child { border-right: 0; }
html[data-benefices="cellules"] .benefices .cible h3 { margin: 0; padding: 26px 32px; font-size: 22px; line-height: 1.25; background: var(--surface); border-bottom: 1px solid var(--trait); display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } /* surtitres et titres alignés en haut du bandeau : le titre à deux lignes descend, les surtitres restent sur une même ligne (24/09) */
html[data-benefices="cellules"] .benefices .cible ul { display: grid; grid-auto-rows: minmax(208px, 1fr); gap: 0; align-content: stretch; margin: 0; padding: 0; }
html[data-benefices="cellules"] .benefices .cible li { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; row-gap: 0; padding: 28px 32px; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; transition: background var(--m-vite, 220ms) ease; }
html[data-benefices="cellules"] .benefices .cible li:last-child { border-bottom: 0; }
html[data-benefices="cellules"] .benefices .cible li:hover { background: var(--surface); }
html[data-benefices="cellules"] .benefices .cible li .picto { grid-column: 1; grid-row: 1; width: 32px; height: 32px; align-self: start; margin: 0 0 28px; }
html[data-benefices="cellules"] .benefices .cible li .picto svg { width: 32px; height: 32px; }
html[data-benefices="cellules"] .benefices .cible li :is(b, p) { grid-column: 1; max-width: none; }
html[data-benefices="cellules"] .benefices .cible li b { font-size: 21px; line-height: 1.3; }
html[data-benefices="cellules"] .benefices .cible li p { margin-top: 8px; font-size: 16px; max-width: 42ch; }
html[data-benefices="cellules"] .benefices .cible:first-child :is(h3, li) { padding-left: var(--x); }
html[data-benefices="cellules"] .benefices .cible:last-child :is(h3, li) { padding-right: var(--x); }

/* Tablette et mobile : une colonne, les cellules gardent leurs filets d'un bord à l'autre */
@media (max-width: 1100px) {
  html[data-benefices="cellules"] .benefices .cibles { display: block; }
  html[data-benefices="cellules"] .benefices .cible { display: block; padding: 0; border: 0; border-bottom: 1px solid var(--trait); }
  html[data-benefices="cellules"] .benefices .cible:last-child { border-bottom: 0; }
  html[data-benefices="cellules"] .benefices .cible h3 { display: block; padding: 20px var(--marge) !important; font-size: 21px; }
  html[data-benefices="cellules"] .benefices .cible ul { display: block; }
  html[data-benefices="cellules"] .benefices .cible li { padding: 24px var(--marge) 26px !important; grid-template-rows: auto auto auto; }
  html[data-benefices="cellules"] .benefices .cible li .picto { width: 28px; height: 28px; margin-bottom: 18px; }
  html[data-benefices="cellules"] .benefices .cible li .picto svg { width: 28px; height: 28px; }
  html[data-benefices="cellules"] .benefices .cible li b { font-size: 20px; }
}