/* Recycle Office - accueil « Projet et devis » (maquette B, 02/11/2026). Chargé par index.tpl après ro-home.css.
   Vert du pied de page #99ADA1 (foncé #5E7468), beige #EAE7DC, angles droits, boutons arrondis 4px. */
.rb { --vert:#99ADA1; --vert-f:#5E7468; --beige:#EAE7DC; --txt:#333; font-family:Montserrat,sans-serif; color:var(--txt); }
.rb *, .rb *::before, .rb *::after { box-sizing:border-box; }
.rb img { max-width:100%; display:block; }
.rb h1, .rb h2, .rb h3 { font-family:"Bebas Neue",sans-serif; font-weight:400; letter-spacing:.3px; margin:0; color:inherit; text-transform:none; }
.rb-wrap { max-width:1280px; margin:0 auto; padding:0 24px; }
.rb-section { margin-top:64px; }
.rb-titre { font-size:42px; text-align:center; margin-bottom:28px !important; color:var(--txt); }

/* Boutons */
.rb-btn { display:inline-block; background:var(--vert-f); color:#fff !important; font-weight:700; font-size:15px; padding:14px 28px; border-radius:4px; border:0; cursor:pointer; text-decoration:none !important; transition:background .2s; }
.rb-btn:hover, .rb-btn:focus { background:#3f5247; }
.rb-btn-clair { background:var(--vert); color:#000 !important; }
.rb-btn-clair:hover, .rb-btn-clair:focus { background:#fff; }
.rb-btn-contour { background:transparent; border:2px solid #fff; padding:12px 26px; }
.rb-btn-contour:hover, .rb-btn-contour:focus { background:rgba(255,255,255,.15); }

/* Grand visuel */
.rb-hero { position:relative; min-height:540px; display:flex; align-items:center; overflow:hidden; background:#2c3530; }
.rb-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rb-hero::after { content:""; position:absolute; inset:0; background:rgba(20,30,25,.55); }
.rb-hero-txt { position:relative; z-index:1; color:#fff; width:100%; padding-top:60px; padding-bottom:60px; }
.rb-hero h1 { font-size:68px; line-height:1; color:#fff; }
.rb-hero p { font-size:19px; max-width:640px; margin:18px 0 28px; color:#fff; }
.rb-hero-btns { display:flex; flex-wrap:wrap; gap:12px; }
.rb-hero-tel { display:inline-block; margin-top:16px; color:#fff !important; text-decoration:underline; font-size:15px; }

/* Logos clients */
.rb-logos { border-bottom:1px solid #eee; }
.rb-logos .rb-wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:18px; padding-bottom:18px; }
.rb-logos img { height:64px; width:auto; filter:grayscale(1); opacity:.7; }

/* Que voulez-vous équiper ? */
.rb-lieux { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.rb-lieu { background:var(--beige); color:var(--txt) !important; text-decoration:none !important; display:flex; flex-direction:column; transition:transform .2s; }
.rb-lieu:hover { transform:translateY(-3px); }
.rb-lieu img { width:100%; height:220px; object-fit:cover; background:#fff; }
.rb-lieu-txt { padding:16px; display:flex; flex-direction:column; gap:4px; }
.rb-lieu strong { font-family:"Bebas Neue",sans-serif; font-weight:400; font-size:27px; line-height:1.1; }
.rb-lieu small { font-size:13px; color:#555; }
.rb-lieu em { font-style:normal; font-weight:700; color:var(--vert-f); margin-top:6px; }

/* Comment ça marche */
.rb-etapes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.rb-etapes span { display:block; width:56px; height:56px; line-height:56px; margin:0 auto 10px; border-radius:50%; background:var(--vert); font-family:"Bebas Neue",sans-serif; font-size:30px; }
.rb-etapes h3 { font-size:28px; }
.rb-etapes p { color:#666; margin:6px auto 0; max-width:320px; }

/* Personnalisation */
.rb-perso { background:var(--vert); margin-top:64px; }
.rb-perso-in { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding-top:44px; padding-bottom:44px; }
.rb-perso img { width:100%; height:360px; object-fit:cover; }
.rb-perso h2 { font-size:46px; line-height:1.05; margin-bottom:12px; }
.rb-perso ul { list-style:none; padding:0; margin:12px 0 22px; }
.rb-perso li { position:relative; padding-left:26px; margin:4px 0; font-weight:500; }
.rb-perso li::before { content:"\2713"; position:absolute; left:0; top:0; font-weight:700; color:#1f2a24; }
.rb-lien { display:inline-block; margin-left:16px; font-weight:700; text-decoration:underline; color:#1f2a24 !important; }

/* Produits (carrousel de la catégorie Accueil) */
.rb-produits .product-miniature .product-add-to-cart a,
.rb-produits .product-miniature .product-add-to-cart button {
  font-family:Montserrat,sans-serif; font-size:15px; font-weight:bold; text-transform:none; color:#000;
  background:var(--vert) !important; border:0; border-radius:4px; padding:11px 18px; line-height:1.2; width:100%;
}
.rb-produits .product-miniature .product-add-to-cart a:hover,
.rb-produits .product-miniature .product-add-to-cart button:hover { background:var(--vert-f) !important; color:#fff; }

/* Formulaire de devis */
.rb-devis { background:var(--beige); padding:40px; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start; }
.rb-devis h2 { font-size:46px; line-height:1.05; margin-bottom:12px; }
.rb-devis-tel a { font-family:"Bebas Neue",sans-serif; font-size:34px; color:var(--vert-f) !important; text-decoration:none; }
.rb-form { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.rb-form label { display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:500; margin:0; }
.rb-form input[type=text], .rb-form input[type=email], .rb-form input[type=tel], .rb-form select, .rb-form textarea {
  width:100%; border:1px solid #cfc9b8; background:#fff; padding:11px 12px; font:inherit; font-size:15px; font-weight:400; border-radius:0; color:#333;
}
.rb-form input:focus, .rb-form select:focus, .rb-form textarea:focus { outline:2px solid var(--vert-f); outline-offset:0; }
.rb-form .rb-large { grid-column:1 / -1; }
.rb-form .rb-case { flex-direction:row; align-items:center; gap:8px; font-weight:400; }
.rb-form button.rb-btn { font-size:16px; padding:15px; }
.rb-rgpd { font-size:12px; color:#666; margin:0; }
.rb-rgpd a { text-decoration:underline; }

/* Réassurance */
.rb-reas { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.rb-reas i { font-size:46px; }
.rb-reas h3 { font-size:23px; margin:6px 0 4px; }
.rb-reas p { margin:0; font-size:13px; color:#666; }
.rb-reas a { color:inherit; white-space:nowrap; }

/* Textes de présentation (référencement), repliés */
.rb-seo { display:grid; grid-template-columns:repeat(3,1fr); gap:28px 36px; margin-bottom:24px; }
.rb-seo-bloc { font-size:14px; color:#555; position:relative; }
.rb-seo-bloc h3 { font-size:25px; color:var(--txt); margin-bottom:10px; line-height:1.15; }
.rb-seo-bloc h3::after { content:""; display:block; width:56px; height:4px; background:var(--vert); margin-top:8px; }
.rb-seo-bloc p, .rb-seo-bloc li { font-size:14px; }
.rb-seo-bloc a { text-decoration:underline; }
.rb-seo-bloc.rb-replie:not(.rb-ouvert) { max-height:250px; overflow:hidden; }
.rb-seo-bloc.rb-replie:not(.rb-ouvert)::after { content:""; position:absolute; left:0; right:0; bottom:0; height:80px; background:linear-gradient(rgba(255,255,255,0), #fff 75%); }
.rb-suite { position:absolute; left:0; bottom:0; z-index:2; background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--vert-f); text-decoration:underline; cursor:pointer; }
.rb-ouvert { padding-bottom:28px; }

/* Tablette */
@media (max-width:1024px) {
  .rb-lieux { grid-template-columns:repeat(2,1fr); }
  .rb-seo { grid-template-columns:1fr 1fr; }
  .rb-logos .rb-wrap { flex-wrap:wrap; justify-content:center; }
}
/* Mobile */
@media (max-width:767px) {
  .rb-wrap { padding:0 16px; }
  .rb-section { margin-top:44px; }
  .rb-titre { font-size:32px; }
  .rb-hero { min-height:0; }
  .rb-hero-txt { padding-top:44px; padding-bottom:44px; }
  .rb-hero h1 { font-size:44px; }
  .rb-hero h1 br { display:none; }
  .rb-hero p { font-size:16px; }
  .rb-hero-btns .rb-btn { flex:1 1 100%; text-align:center; }
  .rb-logos img { height:44px; }
  .rb-logos .rb-wrap { gap:10px 18px; }
  .rb-lieux { grid-template-columns:1fr 1fr; gap:10px; }
  .rb-lieu img { height:120px; }
  .rb-lieu-txt { padding:10px; }
  .rb-lieu strong { font-size:21px; }
  .rb-lieu small { display:none; }
  .rb-etapes { grid-template-columns:1fr; gap:18px; }
  .rb-perso-in { grid-template-columns:1fr; gap:20px; padding-top:28px; padding-bottom:28px; }
  .rb-perso img { height:200px; }
  .rb-perso h2, .rb-devis h2 { font-size:34px; }
  .rb-lien { display:block; margin:14px 0 0; }
  .rb-devis { grid-template-columns:1fr; padding:24px 16px; gap:16px; }
  .rb-form { grid-template-columns:1fr; }
  .rb-reas { grid-template-columns:1fr 1fr; }
  .rb-seo { grid-template-columns:1fr; }
}

/* Retouches du 02/11 (remarques de Guillaume) */
.rb-lieu img.rb-detoure { object-fit:contain; padding:14px; background:#fff; }
.rb-surtitre { text-transform:uppercase; letter-spacing:1.5px; font-size:12px; font-weight:700; margin:0 0 4px; color:#1f2a24; }
.rb-perso img { height:400px; object-position:center 35%; }
@media (max-width:767px) { .rb-perso img { height:220px; } .rb-lieu img.rb-detoure { padding:8px; } }

/* Haut de page : slogan d'origine en grand, H1 (référencement) en surtitre (02/11) */
.rb-hero h1.rb-hero-sur { font-family:Montserrat,sans-serif; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; line-height:1.4; max-width:640px; margin:0 0 10px; }
.rb-hero .rb-hero-titre { font-family:"Bebas Neue",sans-serif; font-size:72px; line-height:1; color:#fff; margin:0; max-width:none; }
@media (max-width:767px) {
  .rb-hero h1.rb-hero-sur { font-size:12px; }
  .rb-hero .rb-hero-titre { font-size:46px; }
}

/* Haut de page : photo décalée à droite + fondu sombre à gauche pour la lisibilité du texte (02/11) */
.rb-hero { background:#1c2621; }
.rb-hero-img { left:auto; right:0; width:60%; object-position:30% 55%; }
.rb-hero::after { background:linear-gradient(90deg, #1c2621 0%, #1c2621 40%, rgba(28,38,33,.75) 47%, rgba(28,38,33,.2) 56%, rgba(28,38,33,0) 64%); }
@media (max-width:767px) {
  .rb-hero-img { width:100%; }
  .rb-hero::after { background:linear-gradient(180deg, rgba(28,38,33,.55) 0%, rgba(28,38,33,.85) 100%); }
}

/* Haut de page : diaporama de photos (script commun [data-ro-slider] de custom.js, 02/11) */
.rb-hero::after { pointer-events:none; }
.rb-hero-slider .ro-slide { display:block !important; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; opacity:0; transition:opacity .9s ease; animation:none !important; }
.rb-hero-slider .ro-slide.is-active { opacity:1; }
.rb-hero-slider .ro-slider-arrow { z-index:3; top:auto; bottom:16px; margin:0; width:40px; height:40px; line-height:40px; background:rgba(0,0,0,.35); border-radius:50%; }
.rb-hero-slider .ro-slider-arrow:hover { background:rgba(0,0,0,.6); color:#fff; }
.rb-hero-slider .ro-slider-prev { left:auto; right:68px; }
.rb-hero-slider .ro-slider-next { right:20px; }
@media (max-width:767px) { .rb-hero .rb-hero-titre br { display:none; } }

/* Cartes « Que voulez-vous équiper ? » : cadrage des photos (demande de Guillaume, 02/11) */
.rb-lieu-img { display:block; overflow:hidden; height:220px; background:#fff; }
.rb-lieu .rb-lieu-img img { width:100%; height:100%; object-fit:cover; padding:0; transition:transform .4s ease; }
.rb-lieu-bureaux .rb-lieu-img img { transform:scale(1.6); transform-origin:50% 55%; }
.rb-lieu-collectivites .rb-lieu-img img { transform:scale(1.7); transform-origin:0 100%; }
.rb-lieu-industrie .rb-lieu-img img.rb-detoure { object-fit:cover; object-position:right center; transform:scale(1.3); transform-origin:85% 60%; }
.rb-lieu-securite .rb-lieu-img img.rb-detoure { object-fit:contain; padding:14px; }
@media (max-width:767px) { .rb-lieu-img { height:120px; } .rb-lieu-securite .rb-lieu-img img.rb-detoure { padding:8px; } }

/* Bouton « copier le numéro » à côté du téléphone (02/11) */
.rb-hero-tel-ligne { display:flex; align-items:center; gap:10px; margin-top:16px; }
.rb-hero-tel-ligne .rb-hero-tel { margin-top:0; }
.rb-copier { position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid rgba(255,255,255,.6); border-radius:4px; background:transparent; color:#fff; font-size:18px; cursor:pointer; }
.rb-copier:hover, .rb-copier:focus { background:rgba(255,255,255,.15); }
.rb-copier-ok { position:absolute; left:40px; top:50%; transform:translateY(-50%); background:#fff; color:#1c2621; font-size:12px; font-weight:700; padding:3px 8px; border-radius:4px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; }
.rb-copier.is-ok .rb-copier-ok { opacity:1; }

/* Réassurance remontée à la place de « Comment ça marche » ; textes de présentation en FAQ dépliante (02/11) */
.rb-reas { padding:36px 0 8px; }
.rb-seo { display:block; max-width:1000px; }
.rb .ro-faq { margin:0; }
.rb .ro-faq-item { border:1px solid #d9d4c6; background:#fff; }
.rb .ro-faq-item + .ro-faq-item { border-top:0; }
.rb .ro-faq-q { margin:0; padding:16px 18px; font-family:Montserrat,sans-serif; font-size:16px; font-weight:700; line-height:1.4; text-transform:none; color:#333; letter-spacing:0; }
.rb .ro-faq-js .ro-faq-q:hover { background:#f6f4ee; }
.rb .ro-faq-js .ro-faq-q::before { color:var(--vert-f); font-weight:700; }
.rb .ro-faq-r { border-top:1px solid #e6e1d4; padding:14px 18px 6px; font-size:14px; color:#555; }
.rb .ro-faq-r p, .rb .ro-faq-r li { font-size:14px; }
.rb .ro-faq-r a { text-decoration:underline; }
@media (max-width:767px) { .rb .ro-faq-q { font-size:15px; padding:14px; } .rb .ro-faq-r { padding:12px 14px 4px; } }
.rb .ro-faq-q * { font-weight:inherit; }