et le texte formaient deux colonnes */
.secteur-usages li {
position: relative;
padding-left: 38px;
color: rgba(255, 255, 255, .85);
}
.secteur-usages li:before {
position: absolute;
top: 1px;
left: 0;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--turquoise);
color: #fff;
font-size: 12px;
line-height: 26px;
text-align: center;
}
.secteur-usages li strong { color: #fff; }
/* sous-pages : modeles conseilles */
.secteur-modeles { margin: 0 0 60px; text-align: center; }
.secteur-produits {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
max-width: 960px;
margin: 0 auto;
}
.secteur-produit-carte {
display: block;
overflow: hidden;
border-radius: 20px;
background: #fff;
box-shadow: var(--ombre);
transition: transform .25s ease, box-shadow .25s ease;
}
.secteur-produit-carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-hover); }
.secteur-produit-carte img { display: block; width: 100%; height: auto; }
.secteur-produit-carte span {
display: block;
padding: 14px 16px;
color: var(--violet);
font-family: var(--police-titre);
font-size: 17px;
font-weight: 600;
}
/* appel au devis et liens vers les autres secteurs */
.secteurs-cta {
margin: 0 0 24px;
padding: 46px 40px;
border-radius: 28px;
background:
radial-gradient(circle at 88% 15%, rgba(131, 194, 187, .25) 0%, transparent 40%),
var(--violet);
text-align: center;
}
.secteurs-cta h3 { margin-bottom: 10px; color: #fff; font-size: 30px; }
.secteurs-cta p { color: rgba(255, 255, 255, .85); }
.secteurs-cta .btn-style-one { background: var(--turquoise); color: #fff; }
.secteurs-cta .btn-style-one:hover { background: var(--turquoise-fonce); color: #fff; }
.secteurs-lien { border-bottom: 2px solid rgba(255, 255, 255, .45); color: #fff; font-weight: 700; }
.secteurs-lien:hover { border-color: #fff; color: #fff; }
.secteur-voir-aussi { margin: 0 0 60px; color: #8b7f90; text-align: center; }
.secteur-voir-aussi a { color: var(--turquoise-fonce); font-weight: 700; }
@media (max-width: 991px) {
body.PGS_ZONE_PRESS #liste_lien_page_fille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.secteur-intro { grid-template-columns: 1fr; gap: 26px; margin-top: 26px; }
.secteur-cartes,
.secteur-produits { grid-template-columns: 1fr 1fr; }
.secteur-usages ul { grid-template-columns: 1fr; }
.secteurs-intro h2 { font-size: 30px; }
.secteur-intro h2,
.secteur-pourquoi h2,
.secteur-modeles h2 { font-size: 26px; }
}
@media (max-width: 600px) {
body.PGS_ZONE_PRESS #liste_lien_page_fille { gap: 14px; }
body.PGS_ZONE_PRESS #liste_lien_page_fille h3 { bottom: 14px; font-size: 16px; }
.secteur-cartes,
.secteur-produits { grid-template-columns: 1fr; }
.secteur-usages,
.secteurs-cta { padding: 34px 22px; }
}
/* =====================================================================
Plan du site (mdl_plan_site.php) : centre, puces rondes
===================================================================== */
.plan-site {
max-width: 1170px;
margin: 10px auto 50px;
padding: 34px 40px;
border-radius: 24px;
background: #fff;
box-shadow: var(--ombre);
line-height: 2;
}
.plan-site p { margin: 0; }
.plan-site img { display: none; }
.plan-site a { color: var(--violet); font-weight: 600; }
.plan-site a:before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
margin-right: 10px;
border-radius: 50%;
background: var(--turquoise);
vertical-align: middle;
}
.plan-site a:hover { color: var(--turquoise); }
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
.main-slider { padding-top: 40px; }
.contain-slide h2 { font-size: 32px; }
.contain-slide p { font-size: 16px; }
.help { margin: 40px 16px; border-radius: 20px; }
.call-to-action-section .front { padding: 26px 18px 22px; }
table:has(#formCreationLog) > tbody > tr,
#formIdentificationLog fieldset tbody,
#formCreationInscription fieldset tbody,
.mdlPanier .adresse_facturation td,
.mdlPanier .adresse_facturation td > p.adresse_line { grid-template-columns: 1fr; }
#formIdentificationLog fieldset tr,
#formCreationInscription fieldset tr { grid-column: 1 / -1 !important; }
#formIdentificationLog:has(table),
#formCreationInscription,
.fiche-compte,
.plan-site { margin-left: 16px; margin-right: 16px; padding: 26px 20px; }
table:has(#formCreationLog) > tbody > tr > td { padding: 24px 20px; }
table:has(#formCreationLog) legend { font-size: 21px; }
.mdlPanier .mode_livraison { padding: 14px 16px; }
/* widget : un peu plus de largeur (il deborde vite) et barre d'adresse sans la case "epingle" */
.mdlPanier .mode_livraison_retrait .colissimo-widget-zone { margin: 12px -8px 0; }
.mdlPanier #widget-container .widget_adress_table tr > td:first-child { display: none !important; }
.mdlPanier #widget-container td#widget_colissimo_table_adresse_loop_click { width: 64px !important; min-width: 64px !important; }
}
/* ---------------------------------------------------------------------------------------
claude 2026-10-21 : bandeau de titre des pages en responsive. Le titre etait colle au bord
gauche jusqu'a 1170px, limite a 60% de la largeur (4 lignes sur mobile) et le fil d'Ariane
masque sous 600px.
--------------------------------------------------------------------------------------- */
.page-heading .container { box-sizing: border-box; }
.page-heading .page-title h2 { line-height: 1.15; }
@media (max-width: 1217px) {
/* sous 1170px + marges, le conteneur touche les bords de l'ecran */
.page-heading .container {
padding-right: 24px;
padding-left: 24px;
}
}
@media (max-width: 991px) {
/* le haut du bandeau est un triangle blanc de 45px (:before) : le titre commence dessous */
.page-heading { padding-top: 0; }
.page-heading .container {
padding-top: 56px;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.page-heading .page-title,
.page-heading #ariane {
width: 100%;
}
.page-heading #ariane {
display: block !important;
padding-left: 0;
font-size: 13px;
line-height: 1.5;
}
.page-heading #ariane .ariane { max-width: none; margin: 0; padding: 0; text-align: left; }
.page-heading .page-title h2 { font-size: clamp(24px, 6vw, 34px); }
}
@media (max-width: 600px) {
.page-heading .container { padding: 56px 16px 4px; }
}
/* ---------------------------------------------------------------------------------------
claude 2026-10-21 : nettete des images (audit du 21/10)
--------------------------------------------------------------------------------------- */
/* images de contenu jamais agrandies au-dela de leur taille reelle (Entretien, Innovation) */
#paragraphe123 .img, #paragraphe124 .img { text-align: center; }
#paragraphe123 .img img, #paragraphe124 .img img,
#paragraphe131 .img img {
width: auto;
max-width: 100%;
}
/* description produit : les collees dans le BO elargissaient la page sur mobile (fiche Zen) */
.right_produit pre, .desc pre {
overflow: visible;
white-space: pre-wrap;
word-wrap: break-word;
font-family: inherit;
font-size: inherit;
}
@media (max-width: 767px) {
/* fiche produit : miniatures en rangee sous la grande photo (33px de large en colonne) */
.left_produit {
display: flex !important;
flex-direction: column;
}
.left_produit .list-photo {
order: 2;
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 12px;
}
.left_produit .list-photo a {
width: 64px;
padding: 0;
}
/* page Innovation : photo du fondateur et carte de France empilees avec le texte */
#paragraphe139 .img, #paragraphe139 .text-img, #paragraphe139 .img2 {
display: block;
width: 100%;
padding: 0;
border-left: 0;
}
#paragraphe139 .img img, #paragraphe139 .img2 img {
display: block;
width: auto;
max-width: 220px;
margin: 16px auto;
padding: 0;
}
}
/* ---------------------------------------------------------------------------------------
claude 2026-10-21 : liste des produits en grille fluide. Les cellules du tableau etaient en
inline-block a largeur fixe : une carte de 250-334px par ligne de 600 a 900px, deux cartes
jusqu'a 1180px, avec du blanc a droite.
--------------------------------------------------------------------------------------- */
#centreetdroite .liste_produits > table,
#centreetdroite .liste_produits > table > tbody {
display: block;
width: 100% !important;
}
#centreetdroite .liste_produits > table > tbody {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 30px;
padding: 15px 0;
}
#centreetdroite .liste_produits > table > tbody > tr { display: contents; }
#centreetdroite .liste_produits > table > tbody > tr > td {
display: block;
width: auto !important;
max-width: none !important;
min-height: 0;
margin: 0 !important;
}
@media (max-width: 1199px) {
#centreetdroite .liste_produits > table > tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
#centreetdroite .liste_produits > table > tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 559px) {
#centreetdroite .liste_produits > table > tbody { grid-template-columns: minmax(0, 1fr); }
}