/*
Theme Name:   Wagnin
Theme URI:    https://wagnin.com
Description:  Theme enfant de Classima pour Wagnin — annonces en Cote d'Ivoire et diaspora. Identite, composants et allegement. Aucun fichier du theme parent n'est modifie.
Author:       Bloomplace
Version:      0.1.0
Template:     classima
Text Domain:  wagnin
Tags:         annonces, marketplace, cote-divoire
*/

/* =========================================================================
   SOMMAIRE
   1. Police
   2. Jetons de design
   3. Base et typographie
   4. En-tete et navigation
   5. Recherche
   6. Carte d'annonce
   7. Badges : offre / demande / verification
   8. Boutons
   9. Categories
  10. Fiche annonce
  10 bis. La fiche annonce, en detail
  11. Formulaires
  11 bis. Le depot d'annonce (constructeur de formulaire)
  12. Etats vides
  13. Pied de page
  14. Accessibilite
   ========================================================================= */


/* ---------- 1. POLICE ---------------------------------------------------
   Une seule famille pour tout le site. Fichier variable : les graisses 200
   a 800 tiennent dans 18 ko, la ou trois fichiers statiques en pesaient 90.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:"Manrope";
  src:url("assets/fonts/manrope-variable.woff2") format("woff2-variations"),
      url("assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}


/* ---------- 2. JETONS DE DESIGN ---------------------------------------- */
:root{
  /* marque */
  --wg-orange:#C2560D;        /* action : bouton, lien, element actif */
  --wg-orange-fonce:#8F3F09;
  --wg-orange-voile:#F9EDE3;
  --wg-vert:#0C6B3F;          /* confiance : verifie, protege, valide */
  --wg-vert-voile:#DFEEE5;
  --wg-rouge:#96201C;         /* signalement, erreur */
  --wg-rouge-voile:#F6E2E0;
  --wg-ambre:#8A5A00;         /* attention */

  /* neutres, legerement chauds pour s'accorder a l'orange */
  --wg-encre:#1B1512;
  --wg-encre-2:#574C43;
  --wg-encre-3:#8B7E73;
  --wg-fond:#FBF8F4;
  --wg-surface:#FFFFFF;
  --wg-surface-2:#F4EEE6;
  --wg-trait:#E7DED2;
  --wg-trait-2:#D2C4B4;

  /* rythme */
  --wg-r1:6px; --wg-r2:11px; --wg-r3:14px; --wg-r4:18px;
  --wg-ombre:0 1px 2px rgba(27,21,18,.04), 0 8px 24px rgba(27,21,18,.06);
  --wg-ombre-h:0 2px 4px rgba(27,21,18,.06), 0 14px 34px rgba(27,21,18,.12);
  --wg-police:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Thème sombre : volontairement en OPT-IN pour l'instant.
   Le theme parent codant ses couleurs en dur, l'activer sur prefers-color-scheme
   donnerait un rendu a moitie sombre. A completer au lot 2, apres audit du parent. */
[data-wagnin-theme="sombre"]{
  --wg-orange:#F0873F; --wg-orange-fonce:#F5A469; --wg-orange-voile:#332114;
  --wg-vert:#5CB68A;   --wg-vert-voile:#12291F;
  --wg-rouge:#E39490;  --wg-rouge-voile:#2E1917;
  --wg-encre:#F3ECE4;  --wg-encre-2:#BFB2A6; --wg-encre-3:#8E8177;
  --wg-fond:#141110;   --wg-surface:#1D1917; --wg-surface-2:#262220;
  --wg-trait:#332C27;  --wg-trait-2:#443A33;
  --wg-ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --wg-ombre-h:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.55);
}


/* ---------- 3. BASE ET TYPOGRAPHIE -------------------------------------- */
body,
body.classima,
.rtcl, .rtcl-listing-item, .widget, .elementor-widget-container{
  font-family:var(--wg-police);
  letter-spacing:-.005em;
}
body{
  background:var(--wg-fond);
  color:var(--wg-encre);
  font-size:15px;
  line-height:1.55;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.rtin-title, .widget-title, .section-title{
  font-family:var(--wg-police);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--wg-encre);
  text-wrap:balance;
}
a{ color:var(--wg-orange-fonce); text-underline-offset:3px; }
a:hover{ color:var(--wg-orange); }

/* Les chiffres s'alignent : indispensable quand une page affiche trente prix. */
.rtcl-price, .rtcl-price-amount, .rtin-price, .rtin-meta, .rtcl-listing-item time,
table td, table th, .rtcl-pagination{
  font-variant-numeric:tabular-nums;
}

/* Le titre principal ne bouge pas. Aucune animation de frappe.
   (Le theme injecte le texte par typed.js dans un h1 vide : on neutralise.) */
.rtin-title .title-typejs{ animation:none !important; }


/* ---------- 4. EN-TETE ET NAVIGATION ------------------------------------ */
/* ⛔ NE PAS poser de fond ni de couleur de lien ici.
   Classima rend l'en-tete TRANSPARENT sur l'accueil (pose sur la photo, liens
   blancs, logo clair via .light-logo) et PLEIN sur les pages internes et en
   mode colle. Forcer background:var(--wg-surface) donnait du blanc sur blanc :
   le menu disparaissait completement. On ne regle donc ici que la typographie,
   jamais le contraste. */
.site-header, .header-wrap, .rt-header{
  box-shadow:none;
}
.main-navigation a, .navbar-nav > li > a, .menu-item > a{
  font-weight:700;
  font-size:14.5px;
  letter-spacing:-.012em;
}
.main-navigation .current-menu-item > a,
.navbar-nav > li.current-menu-item > a,
.main-navigation a:hover{ color:var(--wg-orange); }

/* Le logo doit rester lisible : on borne sa hauteur au lieu de sa largeur. */
.site-branding img, .navbar-brand img, .logo img{
  height:34px; width:auto; max-width:none;
}


/* ---------- 5. RECHERCHE ------------------------------------------------
   Une barre, pas trois champs empiles. Sur mobile les champs passent en
   colonne mais gardent une hauteur de frappe confortable (48 px).
   ------------------------------------------------------------------------ */
.rtcl-widget-search-form,
.classima-listing-search-form,
.rtcl-search-inline-form{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  box-shadow:var(--wg-ombre);
  padding:6px;
  gap:6px;
}
.rtcl-form-control,
.rtcl-search-input-location input,
.rtcl-term-field select,
.rtin-keyword input{
  background:var(--wg-surface-2);
  border:1px solid transparent;
  border-radius:var(--wg-r2);
  min-height:48px;
  padding:0 14px;
  font-size:15px;
  font-weight:600;
  color:var(--wg-encre);
}
.rtcl-form-control::placeholder{ color:var(--wg-encre-3); font-weight:500; }
.rtcl-form-control:focus{
  background:var(--wg-surface);
  border-color:var(--wg-orange);
  box-shadow:0 0 0 3px var(--wg-orange-voile);
  outline:none;
}
.rtcl-search-input-button button,
.rtin-search-btn button,
.rtin-search-btn .btn{
  background:var(--wg-orange);
  border:none;
  border-radius:var(--wg-r2);
  min-height:48px;
  padding:0 24px;
  font-weight:800;
  font-size:15px;
  color:#fff;
  letter-spacing:-.01em;
}
.rtcl-search-input-button button:hover{ background:var(--wg-orange-fonce); }


/* ---------- 6. CARTE D'ANNONCE -----------------------------------------
   Le composant qui porte tout le site. Quatre informations decident du clic :
   prix, lieu, anciennete, niveau de verification du vendeur.
   ------------------------------------------------------------------------ */
.rtcl-listing-item .rtin-item{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  box-shadow:var(--wg-ombre);
  overflow:hidden;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.rtcl-listing-item .rtin-item:hover{
  border-color:var(--wg-trait-2);
  box-shadow:var(--wg-ombre-h);
  transform:translateY(-2px);
}

/* Photo : format impose, jamais d'image deformee, fond neutre si absente. */
.rtin-thumb{ position:relative; background:var(--wg-surface-2); }
.rtin-thumb-inner{ display:block; aspect-ratio:4/3; overflow:hidden; }
.rtin-thumb img, .rtcl-thumbnail{
  width:100%; height:100%; object-fit:cover; display:block;
}

.rtin-content{ padding:12px 14px 14px; }
.rtin-title, .rtin-title a{
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.018em;
  color:var(--wg-encre);
  margin:0 0 7px;
}
.rtin-title a:hover{ color:var(--wg-orange); }
/* Deux lignes maximum : au-dela, les cartes ne s'alignent plus. */
.rtin-title{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.rtin-price .rtcl-price,
.rtin-price .rtcl-price-amount{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.025em;
  color:var(--wg-orange);
}
.rtcl-price-currencySymbol{ font-size:.78em; font-weight:700; }
.rtcl-price-meta, .rtcl-price-type-label{
  font-size:11.5px; font-weight:600; color:var(--wg-encre-3);
}
/* « Prix sur appel » n'est pas un prix : il ne prend pas la couleur d'action. */
.rtcl-price.price-type-on_call .rtcl-price-amount,
.rtcl-price.price-type-on_call{
  color:var(--wg-encre-2); font-size:14px;
}

.rtin-meta{
  list-style:none; margin:0 0 8px; padding:0;
  display:flex; flex-wrap:wrap; gap:4px 12px;
}
.rtin-meta li{
  font-size:11.5px; font-weight:600; color:var(--wg-encre-3);
  display:inline-flex; align-items:center; gap:4px;
}
.rtin-meta li a{ color:inherit; }
.rtin-meta li a:hover{ color:var(--wg-orange); }
.rtin-meta i{ opacity:.7; }

/* Boutons favoris / vue rapide : cibles tactiles honnetes (40 px). */
.rtcl-meta-buttons{ gap:6px; }
.rtcl-meta-buttons .rtcl-btn{
  width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.94);
  border:1px solid var(--wg-trait);
  border-radius:10px;
  color:var(--wg-encre-2);
  backdrop-filter:blur(4px);
}
.rtcl-meta-buttons .rtcl-btn:hover{ color:var(--wg-orange); border-color:var(--wg-orange); }


/* ---------- 7. BADGES ---------------------------------------------------
   L'axe OFFRE / DEMANDE est notre difference : il doit se voir sur la carte,
   pas seulement dans un filtre. Le vert marque la demande, comme partout
   ailleurs il marque ce qui engage la confiance.
   ------------------------------------------------------------------------ */
.rtin-type{ position:absolute; top:9px; left:9px; z-index:2; }
.rtin-type span{
  display:inline-block;
  background:var(--wg-orange);
  color:#fff;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:var(--wg-r1);
  line-height:1.2;
}
/* Classes posees en PHP par la surcharge de carte (archive-grid-9.php).
   Le vert marque la DEMANDE, comme partout ailleurs il marque ce qui engage
   la confiance. C'est notre difference : on traite ce que les gens cherchent
   a egalite avec ce qu'ils vendent. */
.rtin-type.wg-type--buy span{ background:var(--wg-vert); }
.rtin-type.wg-type--exchange span{ background:var(--wg-ambre); }
.rtin-type.wg-type--job span{ background:var(--wg-encre); }

.rtin-featured-ad:not(:empty){
  position:absolute; top:9px; right:9px; z-index:2;
  background:var(--wg-encre); color:#fff;
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; padding:4px 9px; border-radius:var(--wg-r1);
}

/* Verification du vendeur : le badge dit CE QUI a ete verifie et QUAND.
   Un badge sans objet ni date est un badge decoratif, donc un mensonge. */
.wg-verif{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:800;
  color:var(--wg-vert); background:var(--wg-vert-voile);
  border-radius:5px; padding:3px 7px;
}
.wg-verif--aucune{ color:var(--wg-encre-3); background:var(--wg-surface-2); }
.wg-verif time{ font-weight:600; opacity:.85; }


/* ---------- 8. BOUTONS -------------------------------------------------- */
.btn, .rtcl-button, button.rtcl-btn, input[type="submit"],
.elementor-button, .wp-block-button__link{
  font-family:var(--wg-police);
  font-weight:800;
  font-size:14.5px;
  letter-spacing:-.01em;
  border-radius:var(--wg-r2);
  padding:12px 20px;
  border:1px solid transparent;
  transition:background .14s ease, color .14s ease, border-color .14s ease;
}
.btn-primary, .rtcl-button, input[type="submit"], .elementor-button{
  background:var(--wg-orange); color:#fff;
}
.btn-primary:hover, .rtcl-button:hover, input[type="submit"]:hover{
  background:var(--wg-orange-fonce); color:#fff;
}
.btn-secondary, .btn-outline{
  background:var(--wg-surface); color:var(--wg-encre);
  border-color:var(--wg-trait);
}
.btn-secondary:hover{ border-color:var(--wg-trait-2); }
/* WhatsApp est le canal dominant en Cote d'Ivoire : il a son bouton, en vert. */
.wg-btn-whatsapp{ background:var(--wg-vert); color:#fff; }
.wg-btn-whatsapp:hover{ background:#0A5432; color:#fff; }


/* ---------- 9. CATEGORIES ----------------------------------------------
   Colonne de gauche facon home-8. Une rubrique vide affiche « 0 » au lieu
   d'etre masquee : un zero honnete invite a deposer la premiere annonce.
   ------------------------------------------------------------------------ */
.rtcl-category-list, .widget_rtcl_categories ul{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  overflow:hidden;
  list-style:none; margin:0; padding:0;
}
.rtcl-category-list li a, .widget_rtcl_categories li a{
  display:flex; align-items:center; gap:9px;
  padding:11px 15px;
  font-size:13.5px; font-weight:700;
  color:var(--wg-encre);
  border-top:1px solid var(--wg-surface-2);
}
.rtcl-category-list li:first-child a{ border-top:none; }
.rtcl-category-list li a:hover{ background:var(--wg-orange-voile); color:var(--wg-orange); }
.rtcl-category-list .count, .widget_rtcl_categories .count{
  margin-left:auto; font-size:11.5px; font-weight:700; color:var(--wg-encre-3);
}


/* ---------- 10. FICHE ANNONCE ------------------------------------------- */
.rtcl-single-listing .rtcl-listing-title,
.single-rtcl_listing h1{
  font-size:clamp(1.35rem, 3.4vw, 1.85rem);
  font-weight:800; letter-spacing:-.032em; line-height:1.2;
}
.rtcl-single-listing .rtcl-price-amount{
  font-size:1.7rem; font-weight:800; color:var(--wg-orange); letter-spacing:-.03em;
}
.rtcl-listing-owner-details, .rtcl-author-box{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  padding:14px;
}
/* Conseil de securite, sur chaque fiche et non range dans une page a part. */
.wg-securite{
  background:var(--wg-vert-voile);
  color:#0A5432;
  border-radius:var(--wg-r2);
  padding:12px 14px;
  font-size:12.5px; font-weight:600; line-height:1.5;
  margin:14px 0;
}
[data-wagnin-theme="sombre"] .wg-securite{ color:#7FCFA4; }
.wg-signaler{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--wg-rouge);
  background:none; border:none; padding:8px 0;
}

/* Barre de contact collee en bas sur mobile : c'est l'action de la page. */
@media (max-width:767px){
  .wg-contact-barre{
    position:sticky; bottom:0; z-index:20;
    display:flex; gap:8px;
    background:var(--wg-surface);
    border-top:1px solid var(--wg-trait);
    padding:10px 14px;
    margin:0 -15px;
  }
  .wg-contact-barre .btn{ flex:1; text-align:center; }
}


/* ---------- 10 bis. LA FICHE ANNONCE, EN DETAIL -------------------------
   Classima gere deja le numero masque/revele au clic, WhatsApp et le
   signalement : on les habille, on ne les reconstruit pas.
   ------------------------------------------------------------------------ */
.classima-single-details .rtin-slider-box{
  border-radius:var(--wg-r3); overflow:hidden; background:var(--wg-surface-2);
}
.single-listing-meta-price-mob .rtin-price,
.classima-single-details .rtin-price .rtcl-price-amount{
  font-size:1.7rem; font-weight:800; color:var(--wg-orange); letter-spacing:-.03em;
}
.single-listing-meta{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 18px;
  padding:0; margin:12px 0 18px;
}
.single-listing-meta li{
  font-size:12.5px; font-weight:600; color:var(--wg-encre-3);
  display:inline-flex; align-items:center; gap:6px;
}
.single-listing-meta li.rtin-type{
  color:var(--wg-orange); font-weight:800; text-transform:uppercase;
  font-size:11px; letter-spacing:.04em;
}
.rtin-specs-title{
  font-size:15px; font-weight:800; letter-spacing:-.025em; margin:22px 0 10px;
}
.rtin-spec-items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:9px; }

/* --- bloc vendeur --- */
.rtin-author-info, .rtcl-listing-owner-details, .rtin-seller-info{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  padding:16px;
  box-shadow:var(--wg-ombre);
}

/* --- le numero, revele au clic ---
   Classima masque deja les trois derniers chiffres. On en fait un bouton
   franc : reveler un numero est une action, elle doit ressembler a une action. */
.rtcl-contact-reveal-wrapper{
  background:var(--wg-surface-2);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r2);
  padding:12px 14px;
  margin-bottom:9px;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.rtcl-contact-reveal-wrapper:hover{
  border-color:var(--wg-orange); background:var(--wg-orange-voile);
}
.rtcl-contact-reveal-wrapper .numbers{
  font-family:var(--wg-police);
  font-size:17px; font-weight:800; letter-spacing:.01em;
  color:var(--wg-encre); font-variant-numeric:tabular-nums;
}
/* WhatsApp prend le vert : c'est le canal dominant en Cote d'Ivoire,
   il merite d'etre reconnaissable au premier coup d'oeil. */
.rtcl-contact-reveal-wrapper .whatsapp,
.rtin-phone a[href*="wa.me"],
.rtin-phone a[href*="whatsapp"]{
  color:var(--wg-vert) !important; font-weight:800;
}
.rtin-btn-holder .btn, .rtcl-contact-seller{
  width:100%; justify-content:center; min-height:48px;
}

/* --- conseil de securite (ajoute par le theme, hook after_contents) --- */
.wg-securite{
  background:var(--wg-vert-voile);
  color:#0A5432;
  border-radius:var(--wg-r2);
  padding:13px 15px;
  font-size:13px; font-weight:600; line-height:1.55;
  margin:20px 0 8px;
}
[data-wagnin-theme="sombre"] .wg-securite{ color:#7FCFA4; }

/* --- signalement : present nativement, mais discret. On le rend lisible
   sans le rendre criard : il doit se trouver, pas se crier. --- */
a[href*="report"], .rtcl-report-abuse, .report-abuse{
  font-size:12.5px; font-weight:700; color:var(--wg-rouge);
  display:inline-flex; align-items:center; gap:6px;
}
a[href*="report"]:hover, .rtcl-report-abuse:hover{ color:var(--wg-rouge); text-decoration:underline; }


/* ---------- 11. FORMULAIRES --------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="password"], select, textarea, .form-control{
  font-family:var(--wg-police);
  font-size:15px;               /* jamais moins : en dessous, iOS zoome au focus */
  font-weight:600;
  color:var(--wg-encre);
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r2);
  min-height:48px;
  padding:11px 13px;
}
textarea{ min-height:120px; line-height:1.55; }
input:focus, select:focus, textarea:focus, .form-control:focus{
  border-color:var(--wg-orange);
  box-shadow:0 0 0 3px var(--wg-orange-voile);
  outline:none;
}
label{
  font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--wg-encre-2); margin-bottom:5px; display:block;
}
.rtcl-error, .wg-erreur{
  background:var(--wg-rouge-voile); color:var(--wg-rouge);
  border-radius:var(--wg-r2); padding:10px 13px;
  font-size:13px; font-weight:600;
}


/* ---------- 11 bis. LE DEPOT D'ANNONCE ----------------------------------
   Le site utilise le CONSTRUCTEUR DE FORMULAIRE du moteur : le formulaire est
   rendu en React depuis une configuration en base, pas depuis un gabarit PHP.
   On ne peut donc pas le restructurer ici — mais on l'habille entierement,
   et c'est ce qui change le plus pour la personne qui depose.

   L'ordre des champs, l'obligation de compte et les champs par rubrique se
   reglent dans l'administration : voir CONFIGURATION.md.
   ------------------------------------------------------------------------ */
#rtcl-form-builder-container{ max-width:720px; margin-inline:auto; }
.rtcl-fb-section{
  background:var(--wg-surface);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r3);
  padding:18px 18px 6px;
  margin-bottom:14px;
  box-shadow:var(--wg-ombre);
}
.rtcl-fb-section > h3, .rtcl-fb-field-group-label{
  font-size:16px; font-weight:800; letter-spacing:-.025em;
  margin:0 0 14px; color:var(--wg-encre);
}
.rtcl-fb-field{ margin-bottom:14px; }
.rtcl-fb-field-label, .rtcl-field-label{
  font-size:11.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--wg-encre-2);
  margin-bottom:5px; display:block;
}
/* L'asterisque des champs obligatoires en orange : c'est une action attendue. */
.rtcl-fb-field-label .required, .rtcl-fb-field-label abbr{
  color:var(--wg-orange); text-decoration:none;
}
.rtcl-fb-help{ font-size:12px; color:var(--wg-encre-3); margin-top:5px; line-height:1.45; }

.rtcl-fb-field-content input[type="text"],
.rtcl-fb-field-content input[type="number"],
.rtcl-fb-field-content input[type="email"],
.rtcl-fb-field-content input[type="tel"],
.rtcl-fb-field-content select,
.rtcl-fb-field-content textarea,
.rtcl-fb-input-number input,
.rtcl-fb-input-textarea textarea{
  width:100%;
  font-family:var(--wg-police);
  font-size:15px;              /* jamais moins : en dessous, iOS zoome au focus */
  font-weight:600;
  min-height:48px;             /* cible tactile honnete */
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r2);
  background:var(--wg-surface);
  color:var(--wg-encre);
  padding:11px 13px;
}
.rtcl-fb-field-content textarea{ min-height:130px; line-height:1.55; }
.rtcl-fb-field-content input:focus,
.rtcl-fb-field-content select:focus,
.rtcl-fb-field-content textarea:focus{
  border-color:var(--wg-orange);
  box-shadow:0 0 0 3px var(--wg-orange-voile);
  outline:none;
}

/* La photo d'abord. C'est le geste qui declenche le depot : la zone doit
   appeler le doigt, pas ressembler a un champ de formulaire de plus. */
.rtcl-fb-image-upload-wrap{
  border:2px dashed var(--wg-trait-2);
  border-radius:var(--wg-r3);
  background:var(--wg-surface-2);
  padding:22px 18px;
  text-align:center;
  transition:border-color .14s ease, background .14s ease;
}
.rtcl-fb-image-upload-wrap:hover,
.rtcl-fb-image-upload-wrap:focus-within{
  border-color:var(--wg-orange);
  background:var(--wg-orange-voile);
}
.rtcl-file-upload-instruction{
  font-size:13px; color:var(--wg-encre-2); font-weight:600; line-height:1.5;
}

.rtcl-checkbox-group, .rtcl-radio-group{ display:flex; flex-wrap:wrap; gap:8px 16px; }
.rtcl-checkbox-group label, .rtcl-radio-group label{
  font-size:14px; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--wg-encre); display:inline-flex;
  align-items:center; gap:7px; margin:0;
}

.rtcl-fb-btn, .rtcl-fb-form-action button{
  font-family:var(--wg-police);
  font-weight:800; font-size:15px;
  border-radius:var(--wg-r2);
  min-height:50px; padding:0 26px;
  background:var(--wg-orange); color:#fff; border:none;
}
.rtcl-fb-btn:hover, .rtcl-fb-form-action button:hover{ background:var(--wg-orange-fonce); }
.rtcl-fb-form-action{ display:flex; gap:9px; flex-wrap:wrap; margin-top:6px; }

.rtcl-fb-repeater-item{
  background:var(--wg-surface-2);
  border:1px solid var(--wg-trait);
  border-radius:var(--wg-r2);
  padding:13px; margin-bottom:9px;
}

/* Chargement : un etat visible plutot qu'une page vide pendant que React monte. */
.rtcl-fb-loader-container{ padding:44px 0; text-align:center; }
.rtcl-fb-loader{
  width:30px; height:30px; margin:0 auto;
  border:3px solid var(--wg-trait);
  border-top-color:var(--wg-orange);
  border-radius:50%;
  animation:wg-tourne .8s linear infinite;
}
@keyframes wg-tourne{ to{ transform:rotate(360deg); } }

@media (max-width:767px){
  .rtcl-fb-section{ padding:15px 14px 4px; border-radius:var(--wg-r2); }
  .rtcl-fb-section-columns, .rtcl-fb-column{ display:block; width:100%; }
  .rtcl-fb-form-action button{ width:100%; }
}


/* ---------- 12. ETATS VIDES --------------------------------------------
   Une categorie sans annonce propose de deposer la premiere. Elle n'affiche
   jamais une page blanche.
   ------------------------------------------------------------------------ */
.rtcl-no-listing-found, .wg-vide{
  background:var(--wg-surface);
  border:1px dashed var(--wg-trait-2);
  border-radius:var(--wg-r3);
  padding:34px 22px;
  text-align:center;
  color:var(--wg-encre-2);
}
.wg-vide h3{ font-size:17px; margin:0 0 6px; }
.wg-vide p{ font-size:14px; color:var(--wg-encre-3); margin:0 0 16px; }
.wg-vide-actions{
  display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:14px !important;
}
.wg-vide-actions .btn{ min-width:170px; }
.wg-vide-aide{ font-size:12.5px !important; margin:0 !important; }


/* ---------- 13. PIED DE PAGE -------------------------------------------- */
.site-footer, .footer-wrap{
  background:var(--wg-encre);
  color:#BFB2A6;
  border-top:none;
}
.site-footer a{ color:#DDD2C6; }
.site-footer a:hover{ color:#F0873F; }
.site-footer .widget-title{ color:#F3ECE4; font-size:14px; }


/* ---------- 14. ACCESSIBILITE ------------------------------------------- */
:focus-visible{
  outline:2px solid var(--wg-orange);
  outline-offset:3px;
  border-radius:3px;
}
.wg-lien-evitement{
  position:absolute; left:-9999px; top:0;
  background:var(--wg-orange); color:#fff;
  padding:11px 18px; border-radius:0 0 var(--wg-r2) 0;
  font-weight:800; z-index:999;
}
.wg-lien-evitement:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* Le corps de page ne doit jamais defiler lateralement.
   /!\ On ne met PAS overflow-x:hidden sur body : ca masque la cause au lieu
   de la corriger, et ca casse position:sticky sur plusieurs navigateurs.
   La regle est : chaque contenu large defile dans SON conteneur, et on
   n'utilise jamais 100vw pour une largeur (100vw compte la barre de
   defilement, d'ou un debordement de ~15 px sur bureau). */
.rtcl table, .wg-large{ display:block; overflow-x:auto; max-width:100%; }
img, video, iframe, svg{ max-width:100%; height:auto; }
.wg-pleine-largeur{ width:100%; margin-inline:0; }   /* jamais width:100vw */