/* SOCOREP — Solutions responsables & inclusives
 *
 * Un site qui vend l'inclusion doit être lui-même accessible : contrastes
 * conformes au RGAA, focus visible partout, cibles tactiles d'au moins 44 px,
 * et aucune information portée par la seule couleur.
 */
:root{
  --bleu:#0b4da2; --bleu-fonce:#06306e; --bleu-clair:#e8f0fb;
  --vert:#4e9c18; --vert-clair:#eef7e6;
  --encre:#14213d; --gris:#5a6579; --trait:#d8dfea; --fond:#f6f8fc;
  --rayon:10px; --ombre:0 2px 8px rgba(6,48,110,.07);
  --large:1180px;
}
*{box-sizing:border-box}
/* ⚠️ L'attribut `hidden` ne masque PAS un <svg> : la règle [hidden]{display:none}
   de la feuille du navigateur est limitée aux éléments HTML, et le gabarit
   d'icônes se rendait donc en bloc de 300 × 150 px au-dessus de l'en-tête. */
svg[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:126px}
body{
  margin:0; background:#fff; color:var(--encre);
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--bleu)}
h1,h2,h3{line-height:1.2; margin:0 0 .5em}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem); color:var(--bleu-fonce)}
h3{font-size:1.08rem}
.conteneur{max-width:var(--large); margin:0 auto; padding:0 20px}
section{padding:58px 0}
section:nth-of-type(even){background:var(--fond)}

/* Accessibilité : on n'enlève jamais le focus, on le rend lisible. */
:focus-visible{outline:3px solid var(--vert); outline-offset:2px; border-radius:4px}
.saut{position:absolute; left:-9999px; top:0; background:var(--bleu); color:#fff;
      padding:12px 18px; z-index:200}
.saut:focus{left:8px; top:8px}
.invisible{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ── En-tête ───────────────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:100; background:#fff;
       border-bottom:1px solid var(--trait); box-shadow:var(--ombre)}
.barre{display:flex; align-items:center; gap:18px; min-height:112px}
/* Le logo porte le pictogramme, le nom et la baseline : en dessous de 72 px
   de haut la ligne « solutions responsables & inclusives » devient illisible. */
.barre img{height:88px; width:auto}
@media (max-width:620px){ .barre img{height:58px} .barre{min-height:80px} }
nav{margin-left:auto; display:flex; gap:4px; align-items:center; flex-wrap:wrap}
nav a{padding:10px 12px; border-radius:var(--rayon); text-decoration:none;
      color:var(--encre); font-weight:600; font-size:.94rem}
nav a:hover{background:var(--bleu-clair); color:var(--bleu-fonce)}

.bouton{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 20px; border-radius:var(--rayon); border:2px solid transparent;
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer}
.bouton.plein{background:var(--vert); color:#fff}
.bouton.plein:hover{background:#417f14}
.bouton.bleu{background:var(--bleu); color:#fff}
.bouton.bleu:hover{background:var(--bleu-fonce)}
.bouton.vide{background:#fff; color:var(--bleu-fonce); border-color:var(--bleu)}
.bouton.vide:hover{background:var(--bleu-clair)}

/* ── Bandeau d'ouverture ───────────────────────────────────────────────── */
.hero{background:linear-gradient(140deg,var(--bleu-fonce),var(--bleu) 58%,#1668c7);
      color:#fff; padding:66px 0}
.hero h1{font-size:clamp(1.8rem,4.4vw,2.9rem); max-width:17ch}
.hero p{font-size:1.1rem; max-width:62ch; color:#e4edfa}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.hero .bouton.vide{background:transparent; color:#fff; border-color:#ffffff88}
.hero .bouton.vide:hover{background:#ffffff1a}

.chiffres{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
          gap:16px; margin-top:44px}
.chiffres div{background:#ffffff1a; border:1px solid #ffffff2e;
              border-radius:var(--rayon); padding:16px 18px}
.chiffres b{display:block; font-size:1.5rem}
.chiffres span{color:#d8e6f8; font-size:.92rem}

/* ── Grilles ───────────────────────────────────────────────────────────── */
.grille{display:grid; gap:18px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}

.carte{background:#fff; border:1px solid var(--trait); border-radius:var(--rayon);
       padding:20px; box-shadow:var(--ombre)}
.carte h3{color:var(--bleu-fonce)}
.carte p{margin:0; color:var(--gris); font-size:.95rem}

.famille{text-align:left; cursor:pointer; font:inherit; width:100%}
.famille:hover{border-color:var(--bleu)}
.famille svg{width:48px; height:48px; margin-bottom:10px}

/* ── Catalogue ─────────────────────────────────────────────────────────── */
.filtres{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:22px 0}
.filtres input[type=search]{flex:1 1 240px; min-height:46px; padding:10px 14px;
  border:1px solid var(--trait); border-radius:var(--rayon); font:inherit}
.puce{min-height:40px; padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--trait); background:#fff; font:inherit; font-size:.9rem; font-weight:600}
.puce[aria-pressed=true]{background:var(--bleu); color:#fff; border-color:var(--bleu)}

.produit{display:flex; flex-direction:column}
.produit .vignette{background:var(--bleu-clair); border-radius:8px; padding:18px;
  display:flex; align-items:center; justify-content:center; margin:-4px 0 12px}
.produit .vignette svg{width:62px; height:62px}
.produit h3{font-size:1rem; margin-bottom:6px}
.produit .d{font-size:.9rem; color:var(--gris); flex:1}
.produit .meta{font-size:.82rem; color:var(--gris); margin-top:10px;
  border-top:1px solid var(--trait); padding-top:10px}
.etiquettes{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 0}
.etiquettes span{background:var(--vert-clair); color:#2f6410; border-radius:999px;
  padding:3px 10px; font-size:.76rem; font-weight:600}
.produit .bouton{margin-top:12px; width:100%}

/* ── Simulateur ────────────────────────────────────────────────────────── */
.simu{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.champ{margin-bottom:16px}
.champ label{display:block; font-weight:600; margin-bottom:6px}
.champ .aide{display:block; font-weight:400; color:var(--gris); font-size:.86rem}
.champ input,.champ select,.champ textarea{width:100%; min-height:46px; padding:10px 12px;
  border:1px solid var(--trait); border-radius:var(--rayon); font:inherit; background:#fff}
.resultat{background:var(--bleu-fonce); color:#fff; border-radius:var(--rayon); padding:24px}
.resultat .somme{font-size:2.1rem; font-weight:700; display:block}
.resultat dl{display:grid; grid-template-columns:1fr auto; gap:6px 14px; margin:16px 0 0;
  font-size:.94rem; color:#dde8f7}
.resultat dt{margin:0} .resultat dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.avertissement{background:#fff6e5; border-left:4px solid #e0920a; border-radius:6px;
  padding:12px 15px; font-size:.88rem; margin-top:16px; color:#5c3d00}

/* ── Étapes ────────────────────────────────────────────────────────────── */
.etapes{counter-reset:e; display:grid; gap:18px;
        grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.etapes li{counter-increment:e; list-style:none; background:#fff; border:1px solid var(--trait);
  border-radius:var(--rayon); padding:20px; box-shadow:var(--ombre)}
.etapes li::before{content:counter(e); display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:var(--vert); color:#fff; font-weight:700; margin-bottom:10px}

/* ── Demande de devis ──────────────────────────────────────────────────── */
.panier{position:fixed; right:16px; bottom:16px; z-index:90}
.panier .bouton{box-shadow:0 6px 20px rgba(6,48,110,.28)}
.panier b{background:#fff; color:var(--bleu-fonce); border-radius:999px;
          padding:1px 9px; font-size:.84rem}
.liste-devis{list-style:none; margin:0 0 16px; padding:0}
.liste-devis li{display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--trait); font-size:.93rem}
.liste-devis button{margin-left:auto; min-height:34px; padding:4px 10px; cursor:pointer;
  border:1px solid var(--trait); background:#fff; border-radius:8px; font:inherit}
.vide-msg{color:var(--gris); font-style:italic}

footer{background:var(--bleu-fonce); color:#cfddf2; padding:48px 0 24px; font-size:.93rem}
footer a{color:#fff}
footer h3{color:#fff; font-size:.92rem; letter-spacing:.07em; text-transform:uppercase}
footer ul{list-style:none; margin:0; padding:0}
footer li{margin-bottom:7px}
.bas{border-top:1px solid #ffffff26; margin-top:30px; padding-top:18px;
     display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between; font-size:.86rem}

@media (max-width:860px){
  .simu{grid-template-columns:1fr}
  nav{display:none}
  nav.ouvert{display:flex; position:absolute; top:112px; left:0; right:0; background:#fff;
             flex-direction:column; padding:12px; border-bottom:1px solid var(--trait)}
  nav.ouvert a{width:100%}
  .menu-bouton{display:inline-flex !important; margin-left:auto}
}
.menu-bouton{display:none}
@media print{header,.panier,.filtres{display:none}}

/* Champ-piège anti-robots : sorti du flux, jamais annoncé. */
.piege{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.avertissement.ok{background:var(--vert-clair); border-left-color:var(--vert); color:#2f6410}
.mention{font-size:.84rem; color:var(--gris); margin-top:10px}

/* ── Visuels d'articles et de familles ─────────────────────────────────────
 * La photo prend toute la place quand elle existe ; sinon le pictogramme
 * reste, centré sur un fond bleu pâle. Même hauteur dans les deux cas, pour
 * que la grille ne saute pas pendant le chargement.
 */
.vignette{position:relative; height:132px; overflow:hidden}
.vignette .photo{width:100%; height:100%; object-fit:cover; border-radius:8px}
.famille .vignette{height:104px; margin-bottom:12px}
svg.mini{width:22px; height:22px; flex:none; color:var(--bleu)}

/* ── Pages légales ─────────────────────────────────────────────────────── */
.texte{padding:42px 0 60px}
.texte .conteneur{max-width:800px}
.texte h1{font-size:clamp(1.6rem,3.4vw,2.2rem); color:var(--bleu-fonce)}
.texte h2{font-size:1.15rem; margin-top:2em; padding-top:.6em; border-top:1px solid var(--trait)}
.texte p,.texte li{text-align:justify}
.texte ul{padding-left:1.2em}
.texte li{margin-bottom:.4em}
.maj{color:var(--gris); font-size:.9rem; margin-top:-.4em}
.encadre{background:var(--bleu-clair); border-left:4px solid var(--bleu);
  border-radius:6px; padding:14px 18px; margin:24px 0; font-size:.93rem}
/* Les champs qu'il reste à renseigner : visibles au premier coup d'œil, et
   signalés autrement que par la seule couleur, pour rester lisibles. */
.arenseigner{background:#fff3e0; border-bottom:2px dotted #d97706; color:#8a4b00;
  font-weight:600; padding:0 4px; border-radius:3px}
.arenseigner::before{content:"⬦ "}