@media (prefers-color-scheme: dark)
{
ul.doc img {filter: invert(100%)}
ul.voir ul > li:first-child, #recherche h2, #recherche table.pro th {color: var(--super-couleur)}
figure.photos img[tabindex]:hover + img {opacity: 1}
div.main figure.photos > img[tabindex] {background-color: var(--noir)}
div.main figure.photos > img:first-child, div.main figure.photos > img:nth-child(n+3) {outline-color: var(--gris-fonce)}
div.main figure.photos > img[tabindex]:focus {outline-color: var(--blanc)}
div.main figure.photos > img[tabindex]:hover {outline-color: var(--blanc)}
div.main figure.photos:not(:has(img:focus)) > img:first-child {outline-color: var(--blanc)}
#recherche details > table td.cu > a > span, p + footer > button > i {color: var(--noir); background-color: var(--blanc); border-color: var(--noir)}
}


h1 {font-size: 1.25em; color: var(--noir); font-weight: var(--bold); line-height: 1.4em; margin: 0.9375rem 0 0.125rem}
#recherche h1.lst {margin-top: 1.875rem}
h1 i {font-weight: var(--bold); font-style: normal; color: var(--gris-fonce)}
h1 > a {color: var(--vert); text-decoration: underline; padding-right: 1.2em; background-image: url(../im/de/Green.svg); background-repeat: no-repeat; background-size: contain; background-position: right center}
h1 > a:hover {text-decoration: none}

p.clr {clear: left; margin: 0.3125rem 0}
h2 {font-size: 1.1em; margin: 1.25rem 0 0; line-height: 1.5em; font-weight: var(--bold); color: var(--noir)}

div.main {display: grid; justify-items: start}

p#ral {margin: 1.875rem 0 0.625rem; color: var(--noir)}

@media (width > 48rem)
{
.main > h1 {order: -4}
.main > h1+p {order: -3}
.main > details {order: -2}
.main > table.pro {order: -1}
p#ral {visibility: hidden; margin: 0.9375rem 0 0}
.compcab td {white-space: nowrap}
}

.main > h1+p+details {margin-top: 0.625rem}

table.compcab {clear: left}
table.compcab input {margin: 0.1875rem 0}
.compcab td > ins, .compcab td:nth-child(2) > em {display: none}
.compcab th, table.compcab i {font-weight: normal; color: var(--gris-fonce)}
.compcab tr > td {padding: 0.3em 1em; vertical-align: middle; text-align: left}
table.compcab tr > th {padding: 0.625rem 1em; vertical-align: middle; text-align: center; white-space: nowrap}
.compcab td:nth-child(4), .compcab td:nth-child(5) {text-align: right}
.compcab tr > td:first-child {padding-right: 0}
.compcab tr:not(.puce) > td:first-child {text-align: center}

tr.puce td {color: var(--gris-fonce)}
tr.puce td:last-child {text-align: right; color: var(--noir)}
tr.plus {border-bottom: 1px dotted var(--gris-fonce)}
.compcab tr.moins > td {padding-bottom: 0}
.compcab input[type="text"] {margin: 0 3p}
.compcab tbody > tr.odd {background-color: var(--ariane-clair)}
.compcab tr > td:nth-child(4) {color: var(--gris-fonce)}
del {text-decoration: line-through}
.compcab a:link, .compcab a:visited {color: var(--gris-fonce); cursor: help; text-decoration: underline}
.compcab a.pr:link, .compcab a.pr:visited {text-decoration: none}
.compcab tr td:last-child a:link, .compcab tr td:last-child a:visited {color: var(--bleu-favicon); cursor: pointer; text-decoration: underline}
li a.pp:link, li a.pp:visited, p.uni a.pp:link, p.uni a.pp:visited {color: var(--bleu-favicon); text-decoration: underline}
li a.pp:hover, p.uni a.pp:hover {text-decoration: none}
table.compcab td > a.pp:link, table.compcab td > a.pp:visited, .compcab td:nth-child(6) > em {color: var(--rouge)}
.compcab a:hover, .compcab tr td:last-child a:hover, table.compcab td a.pp:hover {color: var(--bleu-favicon); text-decoration: none}
table.compcab td > a[href^="#ecolo"], h2[id^="ecolo"] {color: var(--vert)}

i.trv a:link, i.trv a:visited, i.tro a:link, i.tro a:visited {color: var(--vert); cursor: help; text-decoration: none}
i.trv a:link, i.trv a:visited {cursor: help}
i.trv a:hover, i.tro a:hover {text-decoration: underline}

td.red, tr.puce td.red {color: var(--rouge)}

.bsp {color: var(--gris-fonce); font-weight: var(--bold)}
#recherche p a.pp {margin-left: 0}
a.inf {margin-right: 0.625rem}

#recherche div.act {margin: var(--espace-marron) 0 0.375rem}
div.act.a6110-2121-3131, div.act.a6110-2121-3130-4141 {grid-template-columns: auto auto; column-gap: 0.25rem}
div.act.a6110-2121-3131 > button, div.act.a6110-2121-3130-4141 > button {grid-column: 1; grid-row: 1}
div.act.a6110-2121-3131 > a:first-of-type, div.act.a6110-2121-3130-4141 > a:first-of-type {grid-column: 1; grid-row: 2}
div.act.a6110-2121-3131 > a:nth-of-type(2), div.act.a6110-2121-3130-4141 > a:nth-of-type(2) {grid-column: 2; grid-row: 2}
div.act.a6110-2121-3131 > a:nth-of-type(3), div.act.a6110-2121-3130-4141 > a:nth-of-type(3) {grid-column: 1; grid-row: 3}
div.act.a6110-2121-3130-4141 > a:nth-of-type(4) {grid-column: 1; grid-row: 4}
div.act.a6110-2121-3131 > a:last-child {grid-column: 2; grid-row: 3}
div.act.a6110-2121-3130-4141 > a:last-child {grid-column: 2; grid-row: 4}

#recherche div.act > a.av:link, #recherche div.act > a.av:visited {color: var(--noir); background-color: var(--ariane-clair); border-color: var(--ariane-clair); background-image: url(../im/de/ta/liste_180.svg)}
#recherche div.act > a.av:hover {border-color: var(--gris-fonce)}
div.act > a.am {background-image: url(../im/de/ta/ami.svg); background-position: 0.375rem 50%; background-repeat: no-repeat; background-size: 0.6875rem 0.6875rem}
div.act > a.da {background-image: url(../im/de/ta/avis.svg); background-position: 0.3125rem 45%; background-repeat: no-repeat; background-size: 0.78125rem 0.677083333rem}

@media (prefers-color-scheme: dark)
{
div.act > a.am {background-image: url(../im/de/ta/ami_DARK.svg)}
div.act > a.da {background-image: url(../im/de/ta/avis_DARK.svg)}
}

table.comp {margin: 0.625rem 0 0.3125rem 1.5625rem}
.comp th, .comp td {text-align: left; padding: 0.4em 1em; border-bottom: 1px solid var(--gris-fonce); border-right: 1px solid var(--gris-fonce)}
.comp td.ar {text-align: right}
.comp th.ac, .comp td.ac {text-align: center}
.comp th {color: var(--gris-fonce)}
.comp th.nb, .comp td.nb {border-right-width: 0}
.comp th.nf, .comp td.nf {border-bottom-width: 0}

h3 {margin: var(--espace-marron) 0 0}
p.at, p.at + p, h3 + table {margin: var(--espace-bleu) 0 0}
h3 + table td[colspan="4"] {padding-bottom: var(--espace-bleu)}
table + p.at + p > input[type="text"] {text-align: center; margin: 0 0.3125rem}
h3 ~ p, h3 + table {line-height: 1.8em}
h3 ~ p input, h3 + table input {margin: 0 0.3125rem 0 0}

table.pro {margin: 0.625rem 0 0.3125rem; empty-cells: hide}
table.pro th, table.pro td {padding: 0.3em 0.7em; text-align: left; white-space: nowrap; vertical-align: middle}
table.pro tr td:first-child {padding: 0; border-width: 0}
table.pro td:nth-child(2) {text-align: center}
table.pro th, table.pro td:first-child {padding-left: 0}
table.pro td {line-height: 1.2em; border-bottom-width: 2px}
table.pro th {font-size: 1.1em; line-height: 1.4em; color: var(--noir); font-weight: var(--bold)}
table.pro td.vi, table.pro td.et {color: var(--gris-fonce)}
table.pro td.et {font-style: italic}
table.pro a {color: var(--bleu-favicon)}
table.pro a:link, table.pro a:visited {text-decoration: none}
table.pro a:hover {text-decoration: underline}
table.pro tr:last-child td {border-bottom-width: 0}

ul#menuhaut ul {z-index: 3}

details {display: inline-block; position: relative; line-height: 1.5em}
summary {display: list-item inline; border: 0; padding: 0; font-size: 1em; cursor: pointer; color: var(--bleu-lien-discret)}
summary:hover {color: var(--bleu-favicon)}
details > table td.cu a, #panier a.cu {cursor: help}
details > table td.cu > a, details > table em {position: relative}
details > table {position: absolute; left: 0; top: 1.6em; background-color: var(--blanc); border: 1px solid var(--ariane-bordure); z-index: 1}
details > table em {font-weight: normal; font-style: normal}
details > table th, details > table td {line-height: 1.4em; white-space: nowrap; vertical-align: middle; border: 1px solid var(--ariane-bordure)}
details > table th {padding: 0.4em 0.5em}
details > table th[colspan="2"] {font-weight: var(--bold)}
details > table td[colspan="2"] {height: 2.2em; background-color: var(--blanc)}
details > table tr+tr th:not([colspan="2"]) {text-align: center; color: var(--noir); background-color: var(--ariane-fonce)}
details > table td {text-align: center}
details > table a {display: block; padding: 0.4em 0.5em}
#recherche details > table a::before {content: none}
#recherche details > table td[rowspan="2"] > a {line-height: 3.4em}
#recherche details > table td[rowspan="3"] > a {line-height: 5.4em}
#recherche details > table a:link, #recherche details > table a:visited {color: var(--bleu-favicon); text-decoration: none}
#recherche details > table td:not(.cu) > a:hover {text-decoration: underline}
details > table td.cu > a > span {visibility: hidden; position: absolute; top: -3.5em; left: 50%; transform: translateX(-50%); width: fit-content; font-size: 0.98em; line-height: 1.2em; text-align: center; padding: 0.25rem 0.3125rem; white-space: nowrap; color: var(--blanc); background-color: var(--noir); border: 1px solid var(--blanc); z-index: 2}
details > table td.cu > a:hover > span {visibility: visible}

div.image, img.picture, figure.photos, ul.voir {margin: 0}
#recherche div.image, p + img.picture {margin-top: 0.9375rem; margin-bottom: 1.25rem}
div.image {width: 100%}
img.picture {float: left; cursor: zoom-in; margin-right: 3.3125rem}
div.image > img.picture {margin-bottom: 0.9375rem}

figure.photos {float: left; margin-bottom: 0.9375rem}
p + figure.photos {margin-bottom: 2.1875rem}
figure.photos > img.picture {float: none}
figure.photos > img:not(.picture) {padding: 5px; display: block}
figure.photos > img[tabindex] {cursor: pointer; background-color: var(--blanc)}
figure.photos {display: grid; grid-template-columns: repeat(auto-fill, 110px); grid-template-rows: auto; gap: 1px; place-content: start}
figure.photos img:not([tabindex]):nth-child(2),
figure.photos img[tabindex]:focus + img,
figure.photos img[tabindex]:hover + img
{grid-column: 1/-1; grid-row: 1; display: block; padding: 20px 0; outline: none; cursor: zoom-in}
figure.photos img[tabindex]:hover + img {position: relative}
figure.photos img:not([tabindex]) {display: none}
figure.photos > img:first-child, figure.photos > img:nth-child(n+3) {outline: 1px solid #a8b9c4}
figure.photos > img[tabindex]:focus {outline-color: var(--noir); z-index: 1}
figure.photos > img[tabindex]:hover {outline-color: var(--noir); z-index: 1}
figure.photos:not(:has(img:focus)) > img:first-child {outline-color: var(--noir); z-index: 1}
.photos:has(img:nth-child(n+3):focus) > img.picture {visibility: hidden}
.photos:has(img:nth-child(n+3):hover) > img.picture {visibility: hidden}
.photos:has(img:first-child:hover) > img.picture {visibility: visible}
.photos:has(img[tabindex]:hover) > img:focus:not(:hover) + img {visibility: hidden}

p.clr {color: var(--gris-fonce)}
p.clr a:link, p.clr a:visited {color: var(--gris-fonce); text-decoration: underline}
p.clr a:hover {text-decoration: none}
ul li {list-style: none}
ul.bul, ul.bul ul, ul.non, ul.avi, p.uni {line-height: 1.2em}

/* 310px */
ul.voir {display: grid; grid-template-rows: auto; column-gap: 1.25rem; row-gap: 1.25rem; line-height: 1.2em; text-align: center; color: var(--gris-fonce)}
ul.voir > li > ul {display: grid; grid-template-columns: auto; row-gap: 0.5rem}
ul.voir > li > ul > li:nth-child(2) {display: grid; place-items: center; border: 1px solid var(--gris-fonce); border-radius: 12px}
ul.voir > li > ul > li.mul {grid-template-columns: auto auto}
ul.voir > li > ul > li.mul+li > span {display: block; margin-top: 0.3125rem}

ul.voir ul li.mul > img {scale: 1; transition: scale .2s ease-in-out}
ul.voir ul li.mul > img:hover {scale: 1.8}

ul.bul ul {margin-left: 0.9375rem}
ul.avi {margin-top: 0.625rem; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.625rem}
ul.avi > li {font-style: italic; grid-column: 2}
ul.avi > li:first-child {grid-column: 1}
h2 + ul.avi {margin-top: 0.375rem}
ul.avi li:nth-child(-n+2), ul.avi > li.ajo, .avi > li.ant {font-style: normal}
ul.avi > li.ajo {margin-left: 0.9375rem}

ul.non ul > li {margin-left: 0; text-indent: 0}

ul.bul > li, ul.non > li {margin-top: 0.5rem}
ul.bul > li:first-child, ul.non > li:first-child, ul.avi > li, p.uni {margin-top: 0.25rem}
ul.avi > li.ant {margin: 0.9375rem 0 0 0}
ul.bul ul > li {margin-top: 0.25rem}

#recherche ul.avi > li:first-child {font-size: 1.3em; color: var(--bleu-favicon)}
#recherche ul.avi > li:first-child > span {color: var(--noir)}
.avi > li:nth-child(2) {color: var(--gris-fonce)}
.avi > li:nth-child(2) > span {color: var(--noir)}
.avi > li:nth-child(2) i {white-space: nowrap}
.avi > li:nth-child(2) a:link, .avi > li:nth-child(2) > a:visited {color: var(--gris-fonce); cursor: help; text-decoration: underline}
.avi > li:nth-child(2) a:hover {color: var(--gris-fonce); text-decoration: none}
.avi > li.ant > a:link, .avi > li.ant > a:visited {color: var(--bleu-favicon)}
.avi > li.ant > a:hover {text-decoration: none}

ul.bul > li::before {content: "\2022\ "; font-family: arial, verdana, sans-serif}
ul.bul ul > li::before, ul.non ul > li::before {content: "- "}
i.trv {color: var(--vert)}

#recherche em {font-weight: normal; font-style: italic}
#recherche td > em {font-style: normal}
#recherche tr.puce em {font-style: normal; color: var(--vert)}

.compcab tr.puce i {display: none; color: var(--noir)}

#recherche b {color: var(--noir); font-weight: var(--bold)}

ul#mnpn {line-height: 1.5em}
ul#mnpn li.mnp {line-height: 1em; margin-top: 0.5rem}
ul#mnpn li.mnp:first-child {margin-top: 0}
ul#mnpn li {position: relative}
ul#mnpn ul {width: 15em; position: absolute; top: 0; left: 15em; background-color: var(--blanc); border: 1px solid var(--ariane-bordure); z-index: 1; display: none}
ul#mnpn li:hover ul {display: block}
ul#mnpn a {display: block; padding-left: 0.9em; box-sizing: border-box; width: 100%}
ul#mnpn li.mnp > a {padding: 0.25rem 0; letter-spacing: 0.08em; border-bottom: 1px dotted var(--blanc)}
ul#mnpn a:link, ul#mnpn a:visited {color: var(--bleu-lien-discret); text-decoration: none}
ul#mnpn li.mnp > a:link, ul#mnpn li.mnp > a:visited {color: var(--gris-fonce)}
ul#mnpn a:hover {background-color: var(--ariane-clair)}
ul#mnpn a > em {font-weight: normal; font-style: normal; color: var(--gris-fonce)}
p#ocp {margin-top: 0.9375rem}
p#ocp::before {content: "\002666\ "; color: var(--gris-fonce)}

div#panier p#ma {border-bottom-width: 0}

p.vts {margin: 0.9375rem 0}
ul.mrj {margin-top: 1.25rem; display: grid; grid-template-columns: repeat(auto-fill, 8.75rem); column-gap: 1.875rem; row-gap: 1.25rem; grid-template-rows: auto 1fr}
ul.mrj > li {display: grid; text-align: center; row-gap: 0.6rem; grid-row: auto / span 2; grid-template-rows: subgrid}
ul.mrj > li > a:first-child {display: grid; place-content: center; border: 1px solid var(--gris-fonce); border-radius: 8px; padding: 0.3125rem 0}
ul.mrj > li > a:last-child {align-self: start; line-height: 1.5em}

h2 > a {font-size: 0.833333333em}
h2 > span {font-weight: normal}
p.vts a:link, p.vts a:visited, h2 > a:link, h2 > a:visited {color: var(--bleu-lien-discret); text-decoration: underline}
p.vts a:hover, #recherche h2 > a:hover {color: var(--bleu-favicon)}

ul.doc {display: grid; min-width: 100%; grid-template-columns: repeat(auto-fill, 7.5rem); justify-items: center; column-gap: 1.25rem; row-gap: 1.25rem; text-align: center; margin-top: 0.625rem}
ul.doc li a:last-child {display: block; margin-top: 0.5rem}
ul.doc a:link, ul.doc a:visited, ul.mrj a:link, ul.mrj a:visited {color: var(--gris-fonce); text-decoration: underline}
ul.doc a:hover, ul.doc a:hover + a, ul.mrj a:hover, ul.mrj a:hover + a {color: var(--bleu-favicon)}
ul.doc li img {width: 2.5rem; height: 2.5rem}

footer > p {display: flex; flex-wrap: wrap; flex: 1; margin: 0 0 auto 20.921875rem}
footer > button + p {margin-left: 0.3125rem}
footer > p > span {margin-right: 0.5rem; margin-left: auto}
footer > p a {font-size: 1em; margin-right: 0.5rem; text-decoration: none; color: var(--bleu-lien-discret); white-space: nowrap}
footer > p > span > a {margin: 0}
footer > p > a:not(:first-child)::before {content: "\2022"; font-size: 1.5em; margin-right: 0.5rem; color: var(--noir); vertical-align: middle}
footer > p a:hover {color: var(--bleu-favicon)}
footer > button {background-color: var(--ariane-clair); color: var(--noir); position: relative; font-size: 1em; margin: 0 0.6em auto 20.921875rem}
footer > button > i {visibility: hidden; position: absolute; top: -3.7em; left: 50%; transform: translateX(-50%); width: fit-content; font-size: 0.98em; padding: 0.25rem 0.3125rem; white-space: nowrap; color: var(--blanc); background-color: var(--noir); border: 1px solid var(--blanc); z-index: 1}
footer > button:hover > i {visibility: visible}

body:has(table.compcab input:checked) footer > button {background-color: var(--ariane-fonce)}

@keyframes trg
{
0% {background-color: var(--blanc)}
50% {background-color: var(--ariane-clair)}
100% {background-color: var(--blanc)}
}

table#pro:target, h2:target, summary#ore:target {animation: trg 6s step-start both; background-color: var(--ariane-clair)}

svg:has(symbol), .compcab input[type="radio"] + svg {display: none}

@media (width <= 64rem) /* 2024px */
{
div.main {max-width: 100%}
table.compcab {display: grid; width: 100%; margin: 0.6em 0}
.compcab td {white-space: normal}
.compcab thead, .compcab tr.puce {display: none}
.compcab td > ins, .compcab td:nth-child(2) > em {display: block; color: var(--vert)}
.compcab td > ins {text-decoration: none}
.compcab td:first-child > input, .compcab td:first-child > span, .compcab td:first-child > svg {display: block; margin: auto}
#recherche table.compcab > tbody > tr > td {text-align: center; line-height: 1.5em}
.compcab tr {display: grid; grid-template-columns: 2.5rem 0.5fr 0.25fr 0.25fr; grid-template-areas: "input titre ht ttc" "input titre delai delai" "input couleur fab fab"}
.compcab tr > td:first-child {display: grid; grid-area: input; padding: 0; border-right: 1px dotted var(--gris-fonce)}
.compcab tr > td:nth-child(2) {grid-area: titre; padding: 1em 1em 0 1em}
.compcab tr > td:nth-child(3) {grid-area: couleur; padding: 0 1em 1em 1em; margin-top: auto}
.compcab tr > td:nth-child(4) {grid-area: ht; padding: 1em 0 0 1em; border-left: 1px dotted var(--gris-fonce)}
.compcab tr > td:nth-child(4):not(:has(del))::after, .compcab tr > td:nth-child(4) > del::after, .compcab tr > td:nth-child(4) > ins::after {content: " HT"}
.compcab tr > td:nth-child(5) {grid-area: ttc; padding: 1em 1em 0 0}
.compcab tr > td:nth-child(5):not(:has(del))::after, .compcab tr > td:nth-child(5) > del::after, .compcab tr > td:nth-child(5) > ins::after {content: " TTC"}
.compcab tr > td:nth-child(6) {grid-area: delai / span 2; padding: 0 1em; border-left: 1px dotted var(--gris-fonce)}
.compcab tr > td:nth-child(6)::before {content: "Chez vous en : "}
.compcab tr > td:nth-child(7) {grid-area: fab / span 2; padding: 0 1em 1em 1em; border-left: 1px dotted var(--gris-fonce)}
.compcab tr[title*="est indisponible."] > td:nth-child(2)::before {content: "Indisponible d\0000E9\finitivement"; display: block; color: var(--rouge)} 
.compcab tr[title*="est indisponible."] > td:nth-child(6) > a {display: none}
.compcab tr[title*="est indisponible."] > td:nth-child(6)::before {content: "(nous consulter pour \0000E9\quivalent)"}
}

@media (width <= 48rem)
{
footer > p, footer > button {margin-left: 0}
footer > button {width: 2.5rem}
footer > p > span {margin-right: 0}

.sans tr.puce i {display: inline}
h1 {font-weight: var(--bold)}
ul#mnpn ul {position: static; display: block; border-width: 0; width: 100%}
ul#mnpn ul a {padding-left: 1.6em}
ul#mnpn ul a::before {content: "\2022\ "}

ul#mnpn li {line-height: 1.8em}
ul#mnpn > li.mnp {margin-top: 1.25rem}

div.main {min-width: 100%}

table.pro {margin: 0.75rem 0 0}
table.pro th {font-size: 1.1em; font-weight: var(--bold)}

#recherche div.image > img.picture {width: auto; height: auto; max-width: 100%}

#recherche ul.mrj {margin-bottom: 1.25rem; grid-template-columns: 1fr; place-items: start}
#recherche ul.mrj > li {grid-template-columns: auto minmax(3em, 1fr); grid-template-rows: auto; place-items: center; column-gap: 2.5rem}
ul.mrj li > a:first-child {border-width: 0}
#recherche ul.mrj > li > a:last-child {align-self: center; text-align: left}

ul.doc {grid-template-columns: 100%; justify-items: start; row-gap: 1.25rem}
ul.doc li {display: block; text-align: left; grid-column: 1}
#recherche ul.doc li a {display: table-cell}
ul.doc li a:last-child {vertical-align: middle}
ul.doc li img {margin-right: 1.25rem}

#recherche div.act {margin: 1.875rem 0; grid-template-columns: 1fr; width: 100%}
#recherche div.act.a6110-2121-3131, #recherche div.act.a6110-2121-3130-4141 {grid-template-columns: minmax(auto, 1fr) minmax(auto, 1fr); column-gap: 1.25rem; row-gap: 1.25rem}

ul.avi > li:nth-child(n+3) {grid-column: 1 / span 2}

#mnpn:target > li.mnp {animation: trg 6s step-start both; background-color: var(--ariane-clair)}
}


@media (width <= 40rem) /* 640px */
{
img.picture {float: none}
.compcab tr > td:nth-child(4) {display: none}
.compcab tr > td:nth-child(5) {grid-area: ht / span 2; padding: 1em 1em 0 1em; border-left: 1px dotted var(--gris-fonce)}
}

@media (width <= 34.375rem) /* 550px */
{
table.pro tr {display: grid; grid-template-areas: "a b" "c c"; margin-top: 0.625rem}
table.pro tr > td {padding-top: 0}
table.pro tr > td:nth-of-type(2) {margin-left: auto}
}

@media (width <= 23.75rem) /* 380px */
{
#recherche div.act.a6110-2121-3131, #recherche div.act.a6110-2121-3130-4141 {grid-template-columns: 1fr}
#recherche div.act.a6110-2121-3131 > a:nth-of-type(2), #recherche div.act.a6110-2121-3130-4141 > a:nth-of-type(2) {grid-column: 1; grid-row: 3}
#recherche div.act.a6110-2121-3131 > a:nth-of-type(3), #recherche div.act.a6110-2121-3130-4141 > a:nth-of-type(3) {grid-column: 1; grid-row: 4}
#recherche div.act.a6110-2121-3131 > a:last-child, #recherche div.act.a6110-2121-3130-4141 > a:nth-of-type(4) {grid-column: 1; grid-row: 5}
#recherche div.act.a6110-2121-3130-4141 > a:last-child {grid-column: 1; grid-row: 6}

ul.photos:has(+ ul.voir) {max-width: 100%; min-width: 0}
}