/* Version B « Robuste et pro » : en-tete et heros bleu nuit avec la grande
   photo, catalogue en liste avec de plus grandes photos, titres massifs en
   Barlow Condensed, accent bleu clair. Fournisseur serieux pour les
   chantiers et les professionnels. Couleurs : config.js, bloc versions.b. */
:root {
  --fond: #F4F6F8;
  --carte: #FFFFFF;
  --principale: #0A2540;
  --principale-foncee: #061829;
  --principale-claire: #DCEBF7;
  --accent: #19A7CE;
  --texte: #13293D;
  --bordure: #D5DCE3;
  --titres: "Barlow Condensed", "Arial Narrow", Impact, "Helvetica Neue", Arial, sans-serif;
  --texte-police: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --rayon: 8px;
  --rayon-petit: 6px;
  --entete-fond: #0A2540;
  --entete-texte: #FFFFFF;
  --bandeau-fond: #19A7CE;
  --bandeau-texte: #04111F;
}
h1, h2, h3 { text-transform: uppercase; letter-spacing: .01em; font-weight: 700; }
h1 { font-size: clamp(2rem, 7.4vw, 4.4rem); line-height: 1; }
h2 { font-size: clamp(1.9rem, 5.5vw, 2.8rem); line-height: 1.05; }
h3 { font-size: 1.3rem; }
.surtitre { color: var(--accent); letter-spacing: .2em; }
.bandeau { font-weight: 600; }
.bouton { border-radius: var(--rayon-petit); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; }
.bouton--plein { background: var(--accent); border-color: var(--accent); color: #04111F; }
.bouton--plein:hover { background: #148AAB; border-color: #148AAB; color: #fff; }
.bouton--whatsapp, .bouton--whatsapp-contour { text-transform: none; letter-spacing: 0; }

/* En-tete bleu nuit */
.entete { border-bottom: 1px solid rgba(255, 255, 255, .08); backdrop-filter: none; }
.marque strong { font-family: var(--titres); font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.marque small { color: rgba(255, 255, 255, .7); }
.nav a { color: rgba(255, 255, 255, .85); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--accent); }
.bouton-demande { border-color: var(--accent); color: #fff; }
.bouton-demande:hover { background: rgba(25, 167, 206, .2); }
.bouton-demande__compteur { background: var(--accent); color: #04111F; box-shadow: 0 0 0 2px var(--entete-fond); }
.entete .compteur--vide { background: rgba(255, 255, 255, .35); color: #fff; }

/* Heros : photo pleine largeur sous un voile bleu nuit */
.hero { position: relative; background: var(--principale); color: #fff; padding: 0; overflow: hidden; }
.hero__grille { display: block; position: relative; width: 100%; }
.hero__visuel { position: absolute; inset: 0; border-radius: 0; box-shadow: none; aspect-ratio: auto; background: var(--principale); }
.hero__visuel img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .5; }
/* Voile assez sombre pour lire le texte blanc sur la photo (mobile : titre,
   texte et les deux boutons tiennent dans un ecran de 375 x 812) */
.hero__visuel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 37, 64, .5) 0%, rgba(10, 37, 64, .7) 45%, rgba(10, 37, 64, .95) 100%); }
.hero__texte { position: relative; z-index: 1; width: min(100% - 32px, 1120px); margin-inline: auto; padding: 36px 0 32px; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.hero .surtitre { margin-bottom: .6em; }
.hero__actions { gap: 10px; }
.hero h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); max-width: 11em; }
.hero__intro { color: rgba(255, 255, 255, .88); font-size: 1rem; margin-bottom: 1.2em; }
.hero .surtitre { color: var(--accent); }
.hero .bouton--whatsapp-contour { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero .bouton--whatsapp-contour:hover { background: rgba(255, 255, 255, .16); }

/* Atouts : bande sombre sous le heros */
.section--atouts { background: var(--principale-foncee); color: #fff; padding: 28px 0; }
.atout { background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 4px 0 4px 16px; grid-template-columns: 40px 1fr; }
.atout__picto { color: var(--accent); }
.atout h3 { color: #fff; font-size: 1.15rem; }
.atout p { color: rgba(255, 255, 255, .78); font-size: 1rem; }
.etape-texte, .info p, .produit__desc, .categorie-bloc__tete p, .hero__intro, .carte__legende, .note-envoi, .ligne__capacite { font-size: 1rem; }
.categorie__texte strong { font-size: 1.05rem; }
.categorie__texte small, .produit__categorie { font-size: .82rem; }

/* Categories, etapes, infos : angles droits, bordures nettes */
.categorie, .info, .produit, .ligne, .carte__cadre { border-radius: var(--rayon); }
.categorie { border-width: 2px; }
.categorie:hover { border-color: var(--accent); transform: none; }
.categorie__picto, .info__picto, .categorie-bloc__picto, .produit__visuel--vide { color: var(--principale); }
.etape-num { border-radius: var(--rayon-petit); background: var(--principale); color: var(--accent); font-family: var(--titres); font-size: 1.4rem; }
.section--contraste { background: #fff; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
h4 { color: var(--principale); letter-spacing: .18em; }
.etiquette { border-radius: var(--rayon-petit); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.etiquette--prix { background: var(--principale); color: #fff; }

/* Catalogue en liste : grande photo a gauche des 640 px, empilee avant */
.onglet { border-radius: var(--rayon-petit); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 600; border-width: 2px; }
.onglet--actif { background: var(--principale); border-color: var(--principale); }
.categorie-bloc__tete h2 { font-size: 1.9rem; }
.produits { grid-template-columns: 1fr; gap: 20px; }
.produit { border-width: 2px; }
.produit__visuel { aspect-ratio: 4 / 3; background: #EEF2F5; }
.produit__nom { font-size: 1.6rem; line-height: 1; }
.produit__corps { padding: 20px; gap: 10px; }

/* Barre du bas (mobile) */
.barre-bas { background: var(--principale); border-top: 1px solid rgba(255, 255, 255, .1); }
.barre-bas__onglet { color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.barre-bas__onglet[aria-current="page"] { color: #fff; border-top-color: var(--accent); }
.barre-bas__compteur { background: var(--accent); color: #04111F; }
.barre-bas .compteur--vide { background: rgba(255, 255, 255, .35); color: #fff; }

/* Pied */
.pied { background: var(--principale-foncee); }
.pied__marque { text-transform: uppercase; font-size: 1.5rem; letter-spacing: .04em; }

/* Panneau */
.panneau__tete { background: var(--principale); color: #fff; border-bottom: 0; }
.panneau__tete h2 { color: #fff; font-size: 1.5rem; }
.panneau__fermer { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }

@media (min-width: 640px) {
  .produits { grid-template-columns: 1fr; }
  .produit { flex-direction: row; }
  .produit__visuel { width: 44%; flex-shrink: 0; aspect-ratio: auto; min-height: 300px; }
  .produit__corps { padding: 24px; }
  .produit__commande { max-width: 420px; }
}
@media (min-width: 960px) {
  .hero__grille { grid-template-columns: none; gap: 0; }
  .hero__texte { padding: 120px 0 72px; min-height: 560px; }
  .hero__visuel img { opacity: .6; }
  .hero__visuel::after { background: linear-gradient(90deg, rgba(10, 37, 64, .92) 0%, rgba(10, 37, 64, .7) 50%, rgba(10, 37, 64, .3) 100%); }
  .produit__visuel { width: 40%; min-height: 340px; }
  .atouts { gap: 28px; }
}