/* CMS — la composition « mosaïque » sur fond noir, VALIDÉE par Theo le 18/09 (« je valide », sur l'adresse cmsv=mosaique&fondcms=noir). html[data-cmsv="mosaique"] est posé par le script.
   Le constat sur l'ancienne version : le visuel était un bloc arrondi contenu dans la page alors que le process et les bénéfices sont bord à bord ; la liste des cinq avantages, plus basse que le visuel,
   laissait un vide ; la phrase Webflow / Meleï CMS flottait sous un simple filet.
   Ici, une grille de trois colonnes d'un bord à l'autre de l'écran : le visuel occupe deux colonnes sur deux rangées, les cinq avantages l'entourent en équerre, deux à sa droite, trois dessous ;
   la phrase du bas devient une bande à cellules qui ferme la grille, la phrase à gauche, Webflow et Meleï CMS dans deux cellules à droite. Texte calé sur la grille de la page
   (--x : la marge de contenu ramenée au bord de l'écran ; --w3 : une colonne de contenu). Les couleurs passent par les variables de la section (--filet, --encre-sombre), qui suivent son fond.
   Essayées le même jour et retirées (l'historique git les garde) : « panneau » et « bandeau ». */
html[data-cmsv="mosaique"] .cms { --x: max(var(--marge), calc((100vw - 1540px) / 2 + var(--marge))); --w3: calc((100vw - 2 * var(--x)) / 3); overflow-x: clip; }
html[data-cmsv="mosaique"][data-cms] .cms .corps-cms { position: relative; display: grid; width: 100vw; margin-left: calc(50% - 50vw); gap: 0; align-items: stretch; grid-template-columns: calc(var(--x) + var(--w3)) var(--w3) calc(var(--w3) + var(--x)); grid-template-rows: repeat(2, minmax(264px, auto)) auto; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
html[data-cmsv="mosaique"][data-cms] .cms .visuel { grid-column: 1 / 3; grid-row: 1 / 3; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
html[data-cmsv="mosaique"][data-cms] .cms .visuel .scene { aspect-ratio: auto; height: 100%; min-height: 528px; border-radius: 0; --cadre: 66%; }
html[data-cmsv="mosaique"][data-cms] .cms .avantages { display: contents; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; padding: 28px 32px 32px; border: 0; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); transition: background var(--m-vite, 220ms) ease; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:hover { background: rgba(var(--encre-sombre), 0.035); }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:nth-child(1) { grid-column: 3; grid-row: 1; border-right: 0; padding-right: var(--x); }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:nth-child(2) { grid-column: 3; grid-row: 2; border-right: 0; padding-right: var(--x); }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:nth-child(3) { grid-column: 1; grid-row: 3; border-bottom: 0; padding-left: var(--x); min-height: 232px; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:nth-child(4) { grid-column: 2; grid-row: 3; border-bottom: 0; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage:nth-child(5) { grid-column: 3; grid-row: 3; border-bottom: 0; border-right: 0; padding-right: var(--x); }
html[data-cmsv="mosaique"][data-cms] .cms .avantage .picto { grid-column: 1; grid-row: 1; width: 32px; height: 32px; align-self: start; margin: 0 0 28px; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage .picto svg { width: 32px; height: 32px; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage :is(b, p) { grid-column: 1; max-width: 40ch; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage b { font-size: 21px; line-height: 1.3; }
html[data-cmsv="mosaique"][data-cms] .cms .avantage p { margin-top: 8px; font-size: 16px; }
/* La bande du bas */
html[data-cmsv="mosaique"] .cms .approche { width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0; border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; align-items: stretch; border-bottom: 1px solid var(--filet); }
html[data-cmsv="mosaique"] .cms .approche p { max-width: none; align-self: center; padding: 36px 48px 36px var(--x); }
html[data-cmsv="mosaique"] .cms .approche .marques { display: grid; grid-auto-flow: column; gap: 0; align-items: stretch; }
html[data-cmsv="mosaique"] .cms .approche .marque { padding: 0 44px; border-left: 1px solid var(--filet); }
html[data-cmsv="mosaique"] .cms .approche .marque:last-child { padding-right: var(--x); }

/* Tablette et mobile : une colonne. Le visuel d'un bord à l'autre, puis les cinq avantages en cellules à filets, puis la bande du bas, la phrase au-dessus des deux marques. */
@media (max-width: 1100px) {
  html[data-cmsv="mosaique"][data-cms] .cms .corps-cms { display: block; }
  html[data-cmsv="mosaique"][data-cms] .cms .visuel { border: 0; border-bottom: 1px solid var(--filet); }
  html[data-cmsv="mosaique"][data-cms] .cms .visuel .scene { min-height: 0; height: auto; aspect-ratio: 4 / 3; --cadre: 92%; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantages { display: block; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0 !important; padding: 22px var(--marge) !important; border: 0 !important; border-bottom: 1px solid var(--filet) !important; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage:last-child { border-bottom: 0 !important; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage .picto { grid-column: 1; grid-row: 1 / 3; width: 24px; height: 24px; margin: 3px 0 0; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage .picto svg { width: 24px; height: 24px; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage :is(b, p) { grid-column: 2; max-width: none; }
  html[data-cmsv="mosaique"][data-cms] .cms .avantage b { font-size: 19px; } html[data-cmsv="mosaique"][data-cms] .cms .avantage p { font-size: 15px; margin-top: 4px; }
  html[data-cmsv="mosaique"] .cms .approche { grid-template-columns: 1fr; }
  html[data-cmsv="mosaique"] .cms .approche p { padding: 28px var(--marge); }
  html[data-cmsv="mosaique"] .cms .approche .marques { border-top: 1px solid var(--filet); grid-auto-columns: 1fr; }
  html[data-cmsv="mosaique"] .cms .approche .marque { padding: 20px var(--marge); justify-content: flex-start; } html[data-cmsv="mosaique"] .cms .approche .marque:first-child { border-left: 0; }
  html[data-cmsv="mosaique"] .cms .approche .marque:last-child { padding-right: var(--marge); }
}