/* =========================================================================
   Sopano — feuille de style principale
   Palette & typographie extraites de la maquette (preparation/contenu-maquette.md)
   ========================================================================= */

/* --- Polices Google Sans (fichiers dans /fonts) ------------------------- */
@font-face { font-family:"Google Sans"; font-weight:400; font-style:normal;
  src:url("../fonts/GoogleSans-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Google Sans"; font-weight:400; font-style:italic;
  src:url("../fonts/GoogleSans-Italic.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Google Sans"; font-weight:500; font-style:normal;
  src:url("../fonts/GoogleSans-Medium.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Google Sans"; font-weight:600; font-style:normal;
  src:url("../fonts/GoogleSans-SemiBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Google Sans"; font-weight:700; font-style:normal;
  src:url("../fonts/GoogleSans-Bold.ttf") format("truetype"); font-display:swap; }

/* --- Variables de marque ------------------------------------------------ */
:root {
  --noir:#1D1D1B;
  --gris:#9D9D9C;
  --creme:#F2F0E9;
  --blanc:#FFFFFF;
  --vert:#77D13F;          /* CTA — vert exact du PSD */
  --vert-fonce:#66BE33;
  /* accents par section (points de couleur + mots surlignés) */
  --magenta:#D2276D;
  --violet:#93278F;
  --orange:#F59C2D;
  --corail:#D12E34;
  --bleu:#21BAD6;
  --accent:var(--magenta);
}

/* --- Base --------------------------------------------------------------- */
* { box-sizing:border-box; }
body {
  font-family:"Google Sans", system-ui, sans-serif;
  color:var(--noir);
  background:var(--blanc);
  line-height:1.55;
  margin:0;
}
img { max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
/* Largeur de contenu calée sur la maquette (contenu ~1460px sur 1920) */
.container-sopano { max-width:1460px; margin-inline:auto; padding-inline:1.5rem; }

/* Sur-titre de section : « NOS FORCES » */
.section-surtitre {
  text-transform:uppercase; letter-spacing:.05em; font-size:1rem;
  font-weight:700; color:var(--noir); margin:0;
}
.section-titre {
  font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:700; line-height:1.15;
  margin:.4rem 0 2.5rem; max-width:22ch;
}
/* Titre plus large (peut tenir sur 2 lignes sans être étranglé par le bouton) */
.section-titre-large { max-width:30ch; }
/* Titre « Nos forces » sur une seule ligne (desktop) */
.forces .section-titre { max-width:none; font-size:clamp(1.8rem, 3.4vw, 2.5rem);
  white-space:nowrap; }
@media (max-width:900px) { .forces .section-titre { white-space:normal;
  font-size:clamp(1.5rem, 6vw, 2rem); } }
.section-titre .accent { color:var(--accent); }
/* Séparateur : 5 pastilles de couleur (comme la maquette) */
.sep-points { width:9px; height:9px; border-radius:50%; margin:.4rem 0 1.6rem;
  background:#FFD44A;
  box-shadow:16px 0 0 #E0832F, 32px 0 0 #D12E34, 48px 0 0 #D5287E, 64px 0 0 #4A61A7; }

section { padding-block:4.5rem; }

/* --- Boutons ------------------------------------------------------------ */
/* CTA « Découvrir » : pilule BLANCHE, texte foncé, flèche en pastille sombre (vert au survol) */
.btn-sopano {
  display:inline-flex; align-items:center; gap:.7rem;
  background:#fff; color:var(--noir); font-weight:700; font-size:.85rem;
  padding:.35rem .45rem .35rem 1.6rem; border-radius:999px; border:0; transition:.2s;
}
.btn-sopano:hover { background:var(--vert); color:var(--noir); }
.btn-sopano .bi { background:var(--noir); color:#fff; border-radius:50%;
  width:1.7rem; height:1.7rem; display:grid; place-items:center; font-size:.72rem; flex:none; }
/* au survol : bouton vert, rond blanc + flèche verte */
.btn-sopano:hover .bi { background:#fff; color:var(--vert); }
/* Hero : rond de flèche vert (spécifique) */
.hero .btn-sopano .bi { background:var(--vert); color:#fff; }
.hero .btn-sopano:hover .bi { background:#fff; color:var(--vert); }
.btn-clair { background:transparent; border:1px solid rgba(0,0,0,.15); color:var(--noir); }
.btn-clair:hover { background:var(--noir); color:var(--blanc); }
/* Bouton noir (ex. « Découvrir » des certifications) : fond noir, rond blanc, flèche noire */
.btn-noir { background:var(--noir); color:#fff; }
.btn-noir .bi { background:#fff; color:var(--noir); }
/* survol : vire au vert (comme les autres CTA), rond blanc + flèche verte */
.btn-noir:hover { background:var(--vert); color:var(--noir); filter:none; }
.btn-noir:hover .bi { background:#fff; color:var(--vert); }

/* --- Header / navigation ------------------------------------------------ */
.topbar { background:#fff; color:var(--noir); font-size:.72rem; letter-spacing:.08em; }
.topbar a { color:var(--noir); }
.topbar a:hover { color:var(--magenta); }
/* Barre noire + fin trait blanc qui la sépare du contenu (le méga-menu s'aligne dessus) */
.navbar-sopano { background:#000; padding-top:2.4rem; padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.45); }
/* Logo : wordmark à hauteur fixe (ne rétrécit jamais) + slogan en texte aligné sur les menus */
.brand-sopano { display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  flex-shrink:0; margin-bottom:.5rem; }
.brand-mark { height:48px; width:auto; flex:none; max-width:none; }
/* Chaque item porte SA couleur, dès le départ */
.navbar-sopano .nav-link {
  color:var(--menu, #fff) !important; text-transform:uppercase; font-size:.72rem;
  letter-spacing:.05em; font-weight:600; padding:.35rem .7rem .5rem !important;
  white-space:nowrap;                 /* jamais de retour à la ligne dans un item */
}
.navbar-sopano .nav-link:hover { filter:brightness(1.15); }
/* Méga-menu : fond noir transparent, liseré blanc translucide tout autour,
   fine ligne colorée en haut (même épaisseur que le trait blanc, alignée dessus). */
.navbar-sopano .dropdown-menu {
  background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.22); border-top:1px solid var(--menu);
  border-radius:0 0 12px 12px; margin-top:calc(.7rem + 2px); padding:.85rem;
  width:max-content; min-width:260px; max-width:calc(100vw - 2rem);
  box-shadow:0 22px 45px rgba(0,0,0,.45);
}
.navbar-sopano .dropdown-toggle::after { color:var(--menu); }
/* colonnes ajustées au contenu → jamais de retour à la ligne */
.mega { display:grid; grid-template-columns:max-content max-content; gap:.2rem 1rem; }
.mega.mega-1 { grid-template-columns:max-content; }
.mega .t, .mega .s { white-space:nowrap; }
/* Catégorie : au survol → cadre coloré + icône ; texte et icône passent en BLANC */
.mega a { position:relative; display:block; padding:.6rem 2.2rem .65rem .8rem;
  border-radius:10px; transition:background .15s; }
.mega .lbl { display:flex; flex-direction:column; gap:.1rem; }
.mega .t { color:#fff; font-weight:700; font-size:.86rem; }
.mega .s { color:#9d9d9c; font-size:.75rem; }
/* icône de lien dans le coin supérieur droit */
.mega a .bi { position:absolute; top:.55rem; right:.7rem; color:var(--menu);
  font-size:1rem; opacity:0; transition:opacity .15s, color .15s; }
/* survol : couleur pleine + texte et icône en blanc */
.mega a:hover { background:var(--menu); }
.mega a:hover .t, .mega a:hover .s { color:#fff; }
.mega a:hover .bi { color:#fff; opacity:1; }

/* Ouverture au survol (desktop) + positionnement (évite le débordement à droite) */
@media (min-width:992px) {
  .navbar-sopano .nav-item.dropdown { position:relative; }
  .navbar-sopano .nav-item.dropdown:hover > .dropdown-menu { display:block; }
  .navbar-sopano .dropdown-menu { position:absolute; top:100%; left:0; right:auto; }
  .navbar-sopano .dropdown-menu.menu-end { left:auto; right:0; }
  /* Pont invisible : comble l'espace entre l'item et le méga-menu pour que
     le survol reste continu (sinon le méga-menu se ferme en traversant le vide). */
  .navbar-sopano .nav-item.dropdown > .dropdown-menu::before {
    content:""; position:absolute; left:0; right:0;
    top:calc(-.7rem - 4px); height:calc(.7rem + 6px);
  }
}

/* Menu burger (mobile) : panneau à droite, par-dessus le contenu, sans décalage */
@media (max-width:991.98px) {
  .navbar-sopano .navbar-collapse {
    position:absolute; top:100%; right:0; left:auto; z-index:1050;
    width:min(340px,88vw);
    background:rgba(0,0,0,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    padding:1rem 1.2rem 1.4rem; border-radius:0 0 0 14px;
    box-shadow:-10px 16px 50px rgba(0,0,0,.5);
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .navbar-sopano .navbar-nav { align-items:stretch !important; }
  .navbar-sopano .nav-item > .nav-link { padding:.85rem .4rem !important; }
  .navbar-sopano .nav-item > .nav-link:not(.nav-contact)::before { display:none; }
  .nav-contact { align-self:flex-start; margin:.6rem 0 0 .4rem; }
  /* méga-menus en liste simple, rappel couleur en bord gauche */
  .navbar-sopano .dropdown-menu {
    position:static !important; transform:none !important;
    background:transparent; box-shadow:none;
    border:0; border-left:2px solid var(--menu); border-radius:0;
    width:auto !important; min-width:0; max-width:none;
    padding:.1rem 0 .5rem .7rem; margin:0 0 .4rem; }
  .mega, .mega.mega-1 { grid-template-columns:1fr; gap:.1rem; }
  .mega .t, .mega .s { white-space:normal; }
}
/* Bouton « Contactez-nous » : pilule BLANCHE large, texte NOIR centré, aligné sur les menus */
.navbar-sopano .nav-contact { background:#fff; color:#1D1D1B !important;
  border-radius:999px; font-weight:700; white-space:nowrap; text-align:center;
  padding:.5rem 1.9rem !important; align-self:flex-end; margin-bottom:.15rem; }
.navbar-sopano .nav-contact:hover { background:var(--vert); color:#1D1D1B !important; filter:none; }
/* Barre supérieure : icônes réseaux */
.topbar .bi { font-size:.95rem; }

/* --- Hero --------------------------------------------------------------- */
.hero { position:relative; background:#000; color:#fff; padding:0; overflow:hidden; }
.hero-visuel { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.85; }
/* padding-top/bottom seulement : on conserve le padding horizontal du conteneur */
.hero-inner { position:relative; padding-top:7rem; padding-bottom:3rem; }
@media (max-width:768px) {
  .hero-inner { padding-top:4rem; padding-bottom:2.5rem; }
}
.hero h1 { font-size:clamp(2.6rem, 5.4vw, 3.75rem); font-weight:700; line-height:1.02;
  letter-spacing:-.01em; max-width:15ch; margin:0 0 1.4rem; }
.hero p.lead { font-size:clamp(1.3rem, 2.3vw, 2rem); font-weight:700; line-height:1.25;
  max-width:22ch; color:#fff; margin-bottom:2rem; }

/* bandeau confiance */
.confiance { position:relative; background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px); padding:1.4rem 0; }
/* titre centré, encadré des pastilles de couleur (comme la maquette) */
.confiance .titre { display:flex; align-items:center; justify-content:center; gap:1.2rem;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.15em; color:#e9e9e9;
  margin-bottom:1.1rem; }
.confiance .titre::before, .confiance .titre::after {
  content:""; flex:none; width:56px; height:11px;
  background:url("../img/points_couleurs.png") center/contain no-repeat; }
/* logos étalés sur toute la largeur du contenu */
.confiance .logos { display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; flex-wrap:wrap; }
.confiance .logos img { height:54px; width:auto; filter:brightness(0) invert(1);
  opacity:.9; flex:0 0 auto; }
@media (max-width:768px) {
  .confiance .logos { justify-content:center; gap:1.8rem; }
  .confiance .logos img { height:42px; }
  .confiance .titre::before, .confiance .titre::after { width:38px; }
}

/* --- Nos forces --------------------------------------------------------- */
/* Section blanche (pleine largeur), contenu dans une cartouche beige (cf. PSD) */
.forces { background:#fff; }
.cartouche { background:#F1EFE9; border-radius:24px; padding:clamp(1.5rem,3.5vw,3.2rem); }
/* En-tête de section : sur-titre + points + filet horizontal */
.section-head { display:flex; align-items:center; gap:1.2rem; margin-bottom:.4rem; }
.section-head .section-surtitre { margin:0; flex:none; }
.filet { flex:1; display:flex; align-items:center; gap:1rem; }
.filet .dots { flex:none; width:56px; height:11px;
  background:url("../img/points_couleurs.png") left center/contain no-repeat; }
.filet .line { flex:1; height:2px; background:rgba(0,0,0,.1); }

/* Picto flottant : le texte de la carte s'écoule autour */
.force { overflow:hidden; }         /* clearfix du float */
.force-picto { float:left; width:60px; height:60px; margin:.1rem 1rem .35rem 0; }
.force h3 { font-size:1.35rem; font-weight:700; line-height:1.1; margin:0 0 .15rem; }
.force .accroche { font-size:1.02rem; font-weight:700; color:#2a2a2a; line-height:1.2;
  margin:0 0 .55rem; }
.force p { font-size:.9rem; color:#666; margin:0; line-height:1.5; }

/* --- Nos produits (carrousels) ----------------------------------------- */
.produits-groupe { margin-bottom:3rem; --groupe:var(--creme); }
.groupe-head { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.2rem; }
/* Libellé de la sous-section : porte la couleur du groupe */
.groupe-tag { display:inline-block; background:var(--groupe); color:var(--noir);
  border-radius:999px; padding:.5rem 1.1rem; font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; }
.groupe-actions { display:flex; align-items:center; gap:.5rem; }
/* Flèches préc./suiv. : cercles noirs pleins, chevrons blancs */
.carousel-btn { width:44px; height:44px; border-radius:50%; border:0;
  background:var(--noir); color:#fff; display:grid; place-items:center; cursor:pointer;
  transition:.2s; font-size:1rem; }
/* survol : inversion → cercle blanc, chevron noir */
.carousel-btn:hover { background:#fff; color:var(--noir); box-shadow:inset 0 0 0 1px #e0e0e0; }
/* « Voir tout » : fond noir, texte + rond à la couleur de section, flèche noire */
.btn-groupe { background:var(--noir); color:var(--groupe); }
.btn-groupe .bi { background:var(--groupe); color:var(--noir); }
/* survol : couleurs inversées */
.btn-groupe:hover { background:var(--groupe); color:var(--noir); filter:none; }
.btn-groupe:hover .bi { background:var(--noir); color:var(--groupe); }

.carousel-track { display:flex; gap:1.2rem; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }

.carte-produit { flex:0 0 300px; scroll-snap-align:start; background:var(--creme);
  border-radius:16px; padding:1.4rem; min-height:440px; position:relative;
  overflow:hidden; transition:background .25s ease; }
/* Survol : la carte prend la couleur de la sous-section */
.carte-produit:hover { background:var(--groupe); }
/* Le contenu texte passe au-dessus du visuel de fond */
.carte-produit > :not(.visuel) { position:relative; z-index:1; }
.carte-produit .tags { display:flex; gap:.4rem; margin-bottom:.8rem; }
.carte-produit .tag { background:#fff; border-radius:999px; padding:.2rem .7rem;
  font-size:.68rem; font-weight:600; color:#555; }
.carte-produit .picto { position:absolute; top:1.4rem; right:1.4rem; width:42px;
  height:42px; z-index:2; }
.carte-produit h3 { font-size:1.25rem; font-weight:700; margin:.2rem 0 .4rem; max-width:8ch; }
.carte-produit p { font-size:.82rem; color:#666; margin:0 0 1rem; max-width:26ch; }
/* Visuel produit : couvre les 55 % bas de la carte, coins hauts arrondis */
.carte-produit .visuel { position:absolute; left:0; right:0; bottom:0; height:55%;
  z-index:0; overflow:hidden; border-radius:14px 14px 0 0; }
/* cover + léger zoom pour que le sujet remplisse mieux le cadre */
.carte-produit .visuel img { width:100%; height:100%; object-fit:cover;
  object-position:center; display:block; transform:scale(1.5); }
/* Bouton « Découvrir » sur le visuel : blanc légèrement transparent */
.carte-produit .btn-sopano { position:absolute; bottom:1.4rem; left:1.4rem; z-index:2;
  background:rgba(255,255,255,.85); color:var(--noir);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.carte-produit .btn-sopano:hover { background:#fff; }
/* Anneau de la flèche : sombre par défaut, couleur de la section au survol de la carte */
.carte-produit .btn-sopano .bi { background:var(--noir); color:#fff; transition:background .2s, color .2s; }
.carte-produit:hover .btn-sopano .bi { background:var(--groupe); color:var(--noir); }

/* --- Notre entreprise --------------------------------------------------- */
/* Section blanche ; chaque carte a sa couleur (fond pastel + micro-filet) */
.entreprise { background:#fff; }
.entreprise-verbatim { font-size:.85rem; color:#777; max-width:22ch; text-align:right; }
.carte-entreprise { background:var(--card,#fff); border-radius:20px; padding:1.6rem;
  height:100%; display:flex; flex-direction:column; }
.carte-entreprise .surtitre { text-transform:uppercase; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; color:#000; margin:0 0 .5rem; }
.micro-filet { display:block; width:60px; height:4px; border-radius:2px; background:var(--filet); }
.carte-entreprise .micro-filet { margin-bottom:1.3rem; }
.carte-entreprise img { width:100%; height:250px; object-fit:cover; border-radius:14px;
  margin-bottom:1.4rem; }
.carte-entreprise h3 { font-size:1.5rem; font-weight:700; line-height:1.15; margin:0 0 .6rem; }
.carte-entreprise p { font-size:.9rem; color:#555; line-height:1.5; margin:0 0 1.4rem; }
.carte-entreprise .btn-sopano { margin-top:auto; align-self:flex-start; }

/* --- Certifications ----------------------------------------------------- */
/* Cartouche extérieure jaune contenant deux cartouches crème */
.cartouche-certif { background:#FDEBB1; }
.bloc-certif { background:#FEF8E3; border-radius:16px; padding:1.6rem; height:100%; }
.bloc-certif .surtitre { text-transform:uppercase; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; color:#000; margin:0 0 1.2rem; }
/* micro-filet doré sous le titre de la sous-cartouche */
.bloc-certif .surtitre::after { content:""; display:block; width:56px; height:4px;
  border-radius:2px; background:#CEAC3D; margin-top:.55rem; }
/* Certifs alignées à l'horizontale : logo au-dessus, texte dessous */
.certif-list { display:flex; gap:1.4rem; }
.certif-item { flex:1; }
.certif-item img { height:78px; width:auto; max-width:100%; object-fit:contain;
  margin-bottom:.9rem; display:block; }
.certif-item p { font-size:.72rem; font-weight:600; color:#333; margin:0; line-height:1.4; }

/* --- RSE ---------------------------------------------------------------- */
/* Section blanche ; cartouche vert pâle arrondie */
.rse { background:#fff; }
.rse-card { background:#EFF5EA; border-radius:24px; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr; }
.rse-card img { width:100%; height:100%; object-fit:cover; }
.rse-card .corps { padding:2.6rem; }
.rse-card .surtitre { text-transform:uppercase; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; color:#000; margin:0 0 .7rem; }
.rse-card .micro-filet { margin-bottom:1.2rem; }

/* --- Réalisations ------------------------------------------------------- */
/* Galerie justifiée : masonry en largeur, hauteur de ligne uniforme */
.real-grid { display:flex; flex-wrap:wrap; gap:.8rem; }
.real-cell { height:260px; overflow:hidden; border-radius:12px; }
.real-cell img { width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.8); transform-origin:center; }

/* --- Footer : grande card noire arrondie sur page blanche --------------- */
.footer { background:#fff; padding-block:2rem 3rem; }
.footer-card { background:#000; color:#cfcfcf; border-radius:28px;
  padding:clamp(1.8rem,3.5vw,3.4rem); }
/* Accroche + CTA */
.footer-top { display:flex; align-items:flex-start; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; }
.footer-titre { font-size:clamp(1.8rem,3vw,2.6rem); font-weight:700; color:#fff;
  line-height:1.05; margin:0 0 1rem; }
.footer-titre .ici { color:#F29200; }
/* Colonnes */
.footer-cols { display:grid; grid-template-columns:repeat(5,1fr); gap:2rem;
  padding:2.4rem 0; margin-top:1.2rem; }
.footer-cols h4 { font-size:.85rem; font-weight:700; color:#fff; margin:0 0 1rem; }
.footer-cols a { display:block; font-size:.82rem; color:#9d9d9c; margin-bottom:.55rem; }
.footer-cols a:hover { color:#fff; }
/* Logo + réseaux | coordonnées en pilules */
.footer-mid { display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; padding:1.6rem 0; border-top:1px solid rgba(255,255,255,.1); }
.footer-brand { display:flex; align-items:center; gap:2rem; }
.footer-brand img { height:44px; width:auto; }
.footer-social { display:flex; gap:1.1rem; font-size:1.05rem; }
.footer-social a { color:#fff; } .footer-social a:hover { color:var(--vert); }
.footer-coord { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-pill { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4);
  border-radius:999px; padding:.55rem 1.4rem; font-size:.8rem; font-weight:600; white-space:nowrap; }
.footer-pill:hover { color:#fff; border-color:#fff; }
/* Mentions */
.footer-bottom { display:flex; justify-content:space-between; align-items:center;
  gap:1rem; flex-wrap:wrap; padding-top:1.6rem; font-size:.75rem; color:#9d9d9c;
  border-top:1px solid rgba(255,255,255,.1); }
.footer-bottom a { color:#9d9d9c; } .footer-bottom a:hover { color:#fff; }

/* --- Bandeau erreur base ------------------------------------------------ */
.db-warning { background:#fff3cd; color:#664d03; border-bottom:1px solid #ffe69c;
  padding:.8rem 0; font-size:.85rem; text-align:center; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width:992px) {
  .certif-grid { grid-template-columns:1fr; }
  .rse-card { grid-template-columns:1fr; }
  .real-cell { height:200px; }
  .footer-cols { grid-template-columns:repeat(2,1fr); }
  .entreprise-verbatim { text-align:left; margin-top:1rem; }
}
@media (max-width:576px) {
  .real-cell { height:160px; }
  .footer-cols { grid-template-columns:1fr; }
  .carte-produit { flex-basis:82%; }
}