/*
Theme Name: SOCORIF
Theme URI: https://socorif.com
Description: Thème sur mesure pour SOCORIF — construction, topographie, promotion immobilière et investissements fonciers en Guinée. Nécessite le plugin « SOCORIF Core » et ACF Pro.
Author: SOCORIF
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: socorif
*/

/* =============================================================================
   DESIGN TOKENS
   ========================================================================== */
:root{
  --green:#123f2a; --green2:#1c5c3d; --green3:#0d3020;
  --gold:#c19a3e; --gold2:#a9832f; --goldsoft:#e8d9ad;
  --cream:#f6f2e9; --sand:#ece4d3; --sand2:#e2d8c3;
  --ink:#191c18; --muted:#5f665c; --line:#e2dac9;
  --white:#fffdf8; --violet:#7a5cc4;
  /* Texte sur fond vert profond. Deux tons SEULEMENT, et un écart net (.60 vs
     .92) : deux valeurs proches ne hiérarchisent rien, elles brouillent. */
  --footer-txt:rgba(255,253,248,.60); --footer-strong:rgba(255,253,248,.92);
  /* Police du site — écrasée à l'exécution par le sélecteur (inc/fonts-option.php).
     Valeurs par défaut = le duo historique, pour que le thème reste identique
     tant qu'aucun choix n'est appliqué. */
  --font-heading:'Marcellus',Georgia,serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --max:1240px; --pad:28px;
  /* Système d'espacement + surfaces — source unique (homogénéité) */
  --section-y:78px;            /* padding vertical d'une section */
  --section-y-sm:56px;         /* idem ≤900px */
  --hero-y:76px;               /* padding vertical des héros de page */
  --socorif-card-radius:14px;  /* arrondi cartes/média/panneaux */
  --radius-sm:12px;            /* petits encadrés info */
  --radius-lg:22px;            /* blocs CTA pleine largeur */
  --socorif-card-line:#d9cfb2; /* bordure carte VISIBLE (≠ --line, filets fins) */
  --card-shadow-hover:0 14px 34px rgba(18,63,42,.14);
}

/* =============================================================================
   RESET / BASE
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body); font-weight:400;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:400;line-height:1.12;letter-spacing:.2px;margin:0 0 .4em;color:var(--green);}
h1{font-size:52px;} h2{font-size:36px;} h3{font-size:19px;}
p{margin:0 0 1em;}
a{color:var(--green2);text-decoration:none;transition:color .15s;}
a:hover{color:var(--gold2);}
img{max-width:100%;display:block;}
.container{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.section{padding:var(--section-y) 0;}
.section--sand{background:var(--sand);}
.eyebrow{font-size:12.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);margin-bottom:10px;}
.lead{color:var(--muted);font-size:16px;}
.center{text-align:center;}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:9px;font-weight:800;font-size:15px;cursor:pointer;border:none;transition:background .15s,transform .15s;}
.btn--gold{background:var(--gold);color:var(--green3);}
.btn--gold:hover{background:var(--goldsoft);color:var(--green3);}
.btn--green{background:var(--green);color:var(--goldsoft);}
.btn--green:hover{background:var(--green3);color:var(--goldsoft);}
.btn--ghost{border:1.5px solid var(--line);color:var(--green);background:transparent;}
.btn--ghost:hover{background:var(--sand);}
.btn--ghost-light{border:1.5px solid rgba(232,217,173,.5);color:var(--goldsoft);background:transparent;}
.btn--ghost-light:hover{background:rgba(255,255,255,.06);}
/* Flèche des liens/boutons : espace icône↔texte + glisse au survol (you-tax/OE).
   Appliqué PARTOUT : →/→ via .fleche-anim, ←/← via .fleche-anim--prev. */
.fleche-anim{display:inline-block;margin-left:.4em;transition:transform .25s ease;will-change:transform;}
.fleche-anim--prev{margin-left:0;margin-right:.4em;}
a:hover .fleche-anim,.btn:hover .fleche-anim{transform:translateX(5px);}
a:hover .fleche-anim--prev,.btn:hover .fleche-anim--prev{transform:translateX(-5px);}
@media (prefers-reduced-motion:reduce){.fleche-anim{transition:none;}}
/* Menus déroulants (<select> des formulaires) : chevron doré propre au lieu du
   triangle système. appearance:none pour retirer la flèche native. */
.socorif-form select,.filters select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--cream);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c19a3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:38px;}

/* Cards */
/* Bordure : --line (#e4dbc9) était à ~18 points RGB du crème ET du blanc —
   une bordure rendue mais invisible (mesuré au pixel, 2026-07-17). Défaut
   durci en #d9cfb2 ; couleur ET arrondi surchargeables depuis Options du
   thème → Style (variables émises par le hook wp_head des options). */
.card{background:var(--white);border:1px solid var(--socorif-card-line,#d9cfb2);border-radius:var(--socorif-card-radius,14px);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
/* Survol des cartes de contenu : léger lift + ombre + curseur main. Les cartes
   de formulaire (.socorif-form) sont exclues (rien à cliquer dessus). */
.card:not(.socorif-form),.svc-card{cursor:pointer;}
.card:not(.socorif-form):hover,.svc-card:hover,.prj-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow-hover);}
.svc-card{transition:transform .2s ease,box-shadow .2s ease;}
/* GÉNÉRIQUE : toute image DANS une carte → curseur main + léger zoom au survol.
   Un seul sélecteur `.card img` / `.svc-card img` couvre bien, réalisation,
   service… et toute future carte, sans énumérer les classes. Les icônes
   uploadées (.socorif-icon-custom) sont exclues (on ne les déforme pas). Le
   média étant en overflow:hidden, le zoom reste dans le cadre. */
.card img:not(.socorif-icon-custom),.svc-card img:not(.socorif-icon-custom){cursor:pointer;transition:transform .45s ease;}
.card:hover img:not(.socorif-icon-custom),.svc-card:hover img:not(.socorif-icon-custom){transform:scale(1.06);}
/* Icône de service : léger scale au survol de sa carte. */
.svc-icon{transition:transform .25s ease;}
.card:hover .svc-icon{transform:scale(1.08);}
.btn:hover{transform:translateY(-2px);}
@media (prefers-reduced-motion:reduce){.card,.svc-card,.btn,.bien-card__media img,.prj-card__media img,.svc-card img,.svc-icon{transition:none;}.card:hover,.svc-card:hover,.btn:hover{transform:none;}.card:hover .bien-card__media img,.card:hover .prj-card__media img,.svc-card:hover img,.card:hover .svc-icon{transform:none;}}
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}

/* Badges / pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;font-size:12px;font-weight:700;letter-spacing:.3px;}
.pill--vendre{background:var(--green);color:var(--goldsoft);}
.pill--louer{background:var(--green2);color:var(--goldsoft);}
.pill--foncier{background:var(--gold);color:var(--green3);}
.pill--invest{background:var(--violet);color:#fff;}

/* =============================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);}
.site-header__inner{display:flex;align-items:center;gap:26px;height:74px;}
.brand{display:flex;align-items:center;gap:12px;}
.brand__mark{width:44px;height:44px;border-radius:9px;background:var(--green);color:var(--goldsoft);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:22px;}
/* Le wordmark SOCORIF est FIGÉ sur Dwight (police d'Ossenberg-Engels), quel que
   soit le sélecteur de police du site — d'où le @font-face Dwight permanent dans
   fonts.css. Secours Marcellus si Dwight ne charge pas. */
.brand__name{font-family:'Dwight','Marcellus',Georgia,serif;font-size:22px;color:var(--green);line-height:1;font-weight:bold;letter-spacing:1px;}
.brand__tag{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);}
.main-nav{margin-left:auto;display:flex;align-items:center;gap:2px;}
.main-nav li{list-style:none;margin:0;padding:0;}
.main-nav a{display:inline-block;white-space:nowrap;color:var(--ink);font-size:13.5px;font-weight:600;padding:9px 9px;border-radius:8px;position:relative;transition:color .2s ease;}
/* Survol/actif : texte vert SANS fond (demande client 2026-07-18) + un
   soulignement doré qui se déploie depuis la gauche. Underline en ::before
   car le chevron ▾ des items à sous-menu occupe déjà ::after (l.93). Exclut
   le bouton .nav-cta (doré, enfant direct <a> du <nav>, pas un .menu-item). */
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--green);background:none;}
.main-nav .current-menu-item>a{font-weight:700;}
.main-nav > .menu-item > a::before,.main-nav .sub-menu a::before{content:"";position:absolute;left:9px;right:9px;bottom:4px;height:2px;background:var(--gold2);transform:scaleX(0);transform-origin:left center;transition:transform .25s ease;pointer-events:none;}
.main-nav .sub-menu a::before{left:12px;right:12px;bottom:6px;}
.main-nav > .menu-item > a:hover::before,.main-nav > .menu-item.current-menu-item > a::before,.main-nav .sub-menu a:hover::before,.main-nav .sub-menu .current-menu-item > a::before{transform:scaleX(1);}
@media (prefers-reduced-motion:reduce){.main-nav a::before{transition:none;}}
.main-nav .menu-item-has-children{position:relative;}
.main-nav .menu-item-has-children>a::after{content:" ▾";font-size:11px;color:var(--gold2);}
.main-nav .sub-menu{position:absolute;top:100%;left:0;min-width:250px;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px rgba(18,63,42,.14);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;list-style:none;margin:0;}
.main-nav .menu-item-has-children:hover .sub-menu{opacity:1;visibility:visible;transform:none;}
/* Les derniers déroulants s'ouvrent vers la GAUCHE.
   La nav est collée à droite (margin-left:auto), donc le dernier item est près
   du bord : son sous-menu de 250px ouvert vers la droite sortait du viewport et
   ÉTIRAIT LE DOCUMENT — mesuré le 2026-07-16 : « Plus » à x=1056, sous-menu
   finissant à 1306 sur un écran de 1280, soit 26px de débordement horizontal sur
   TOUTES les pages. Un `visibility:hidden` reste dans le flux : la barre de
   défilement était causée par un menu qu'on ne voit jamais.

   On cible les deux derniers plutôt qu'un item nommé : le menu est éditable par
   le client, et c'est toujours le dernier qui touche le bord.

   ⚠️ nth-last-of-TYPE, pas nth-last-CHILD. Le dernier enfant direct de .main-nav
   n'est pas un <li> mais le <a class="nav-cta"> (header.php:54) : nth-last-child
   comptant tous les frères sans distinction, il gaspillait un de ses deux
   créneaux sur ce <a> — un seul item était réellement basculé au lieu de deux.
   nth-last-of-type ne compte que les <li> et ignore le <a>. */
@media(min-width:1240px){
  .main-nav > .menu-item-has-children:nth-last-of-type(-n+2) > .sub-menu{left:auto;right:0;}
}
.main-nav .sub-menu a{display:block;padding:10px 12px;}
/* Sous-menu : « où je suis » et « ce que je pointe » sont deux questions
   différentes et doivent avoir deux réponses visuelles. La règle générale
   ci-dessus donne le même fond sable aux deux — sur une page service, l'item
   courant et l'item survolé devenaient alors indiscernables. Ici : survol =
   fond crème léger ; page courante = texte vert en gras (sans fond ni liseré,
   demande client 2026-07-18 : la couleur suffit à marquer le lien actif). La
   règle « courant » vient APRÈS « survol » pour rester visible quand on
   survole la page où l'on est déjà. */
.main-nav .sub-menu a:hover{background:none;color:var(--green);}
.main-nav .sub-menu .current-menu-item>a{color:var(--green);font-weight:700;background:none;box-shadow:none;}
.nav-cta{background:var(--gold);color:var(--green3)!important;font-weight:800!important;}
.nav-cta:hover{background:var(--goldsoft)!important;}
.nav-toggle{display:none;margin-left:auto;background:none;border:none;border-radius:8px;width:44px;height:44px;font-size:24px;cursor:pointer;color:var(--green);}

/* Mobile nav — hamburger UNIQUEMENT en responsive (< 1240px) ; desktop = menu complet avec dropdown */
@media(max-width:1239px){
  .nav-toggle{display:block;}
  .main-nav{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--line);padding:10px var(--pad) 20px;max-height:calc(100vh - 74px);overflow:auto;transform:translateY(-120%);transition:transform .25s;box-shadow:0 20px 40px rgba(0,0,0,.12);}
  .main-nav.open{transform:none;}
  .main-nav a{padding:13px 6px;border-bottom:1px solid var(--line);border-radius:0;}
  .main-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 0 14px;}
}

/* =============================================================================
   HERO
   ========================================================================== */
.hero{position:relative;background:linear-gradient(135deg,var(--green3),var(--green) 58%,var(--green2));color:var(--white);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;opacity:.1;background-image:radial-gradient(circle at 82% 22%,var(--gold),transparent 45%),radial-gradient(circle at 8% 88%,var(--goldsoft),transparent 42%);}
/* clamp et non 96px fixes : sur un écran de 390px, 96px de coussin haut ET
   bas mangeaient un tiers du viewport en vert vide (capture mobile
   2026-07-17). 9vw ≈ 35px à 390px, 96px dès 1067px : le desktop ne bouge pas. */
/* padding-top/bottom SEULEMENT, jamais le raccourci `padding … 0` : .hero__inner
   est aussi .container, dont le padding-left/right (var(--pad)) donne la marge
   latérale. Le raccourci mettait l'horizontal à 0 → le contenu collait aux
   bords sous 1240px (signalé 2026-07-18). */
.hero__inner{position:relative;padding-top:clamp(40px,9vw,96px);padding-bottom:clamp(40px,9vw,96px);}
.hero h1{color:var(--white);max-width:760px;}
.hero p{color:rgba(255,253,248,.82);font-size:18px;max-width:600px;}

/* =============================================================================
   PROPERTY CARD
   ========================================================================== */
.bien-card__media{display:block;aspect-ratio:4/3;background:linear-gradient(160deg,#2f6b49,#123f2a);position:relative;}
.bien-card__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.bien-card__badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2;}
/* Voile dégradé en bas du média : une photo au bas clair (le sol clair d'une
   image de démo, par ex.) se fond dans le crème de la carte et l'œil ne lit
   plus où finit la photo — la coupe en biais devient invisible. Ce dégradé
   vert transparent→foncé rend le bord bas net QUEL QUE SOIT le contenu de la
   photo, sans l'assombrir globalement (il ne couvre que le tiers bas). Clippé
   avec le média en mode biais (le clip-path clippe aussi les pseudo-éléments)
   → suit exactement la diagonale. z-index sous les badges (2), au-dessus de
   l'img (absolue, auto). aria rien : purement décoratif. */
.bien-card__media::after,.prj-card__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(13,48,32,.55),transparent);pointer-events:none;z-index:1;}
/* --- Style « en biais » (Options du thème → Style) -------------------------
   Activé par la classe .socorif-biais posée sur <body>. Couvre d'un coup les
   cartes de biens, de réalisations et d'actualités : toutes partagent
   .bien-card__media.

   POURQUOI 14% ET PAS 6% : le décalage du clip-path est VERTICAL, mais l'angle
   se mesure sur la LARGEUR. Or la largeur d'une carte varie avec la grille —
   un décalage fixe ferait donc dériver l'angle à chaque taille d'écran. Ce qui
   NE varie pas, c'est l'aspect-ratio 4/3. Donc, à hauteur h :
       largeur = h × 4/3
       tan(angle) = (0,14 × h) / (h × 4/3) = 0,105  →  angle = 6,0°
   Un décalage de 14% de la HAUTEUR donne donc exactement 6°, à toute taille.
   ⚠️ Ce calcul dépend du ratio 4/3 : changer l'aspect-ratio change l'angle. */
.socorif-biais .bien-card__media{clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%);}
/* Coins ronds et coupe franche se contredisent : le biais impose des bords
   francs sur le média. Le corps de la carte garde son arrondi. */
.socorif-biais .card{border-radius:0;}
.socorif-biais .bien-card__body{border-radius:0;}

/* Cartes « Autres réalisations » (.prj-card, venues du handoff) : elles ne
   partagent PAS .bien-card__media, donc les règles ci-dessus ne les touchaient
   pas — le biais s'arrêtait à leur porte.

   86% COMME .bien-card__media : leur média est désormais en 4/3 (aligné sur
   toutes les autres cartes du site), donc MÊME pourcentage = MÊME angle (6°)
   ET MÊME niveau de coupe. Avant, ce média était en 16/10 avec 83,2% : même
   angle mais coupe plus profonde → deux biais visuellement différents. */
.socorif-biais .prj-card__media{clip-path:polygon(0 0, 100% 0, 100% 86%, 0 100%);}
/* !important nécessaire : le handoff style ces cartes en inline
   (style="…border-radius:14px…"), et un style inline bat toute règle de
   feuille sans !important. */
.socorif-biais .prj-card{border-radius:0 !important;}
.bien-card__body{padding:18px 20px;}
/* Le prix est un mot insécable long (« 1 750 000 000 GNF ») : sans min-width:0
   il refuse de rétrécir et pousse sa carte hors du viewport. Mesuré à 360px :
   177px de large pour 137px disponibles. */
.bien-card__price{font-family:var(--font-heading);font-size:22px;color:var(--green);min-width:0;overflow-wrap:anywhere;}

/* Fiche d'un bien : 2 colonnes, puis 1 seule sous 900px.
   Cette règle était IMPOSSIBLE tant que le template posait sa grille en inline
   (`style="grid-template-columns:1.6fr 1fr"`) — l'inline bat la feuille de
   styles. La page gardait donc ses 2 colonnes jusqu'à 360px, où la colonne
   latérale débordait de 67px. La grille porte maintenant une classe. */
.bien-main{grid-template-columns:1.6fr 1fr;}
@media(max-width:900px){ .bien-main{grid-template-columns:1fr;} }

/* --- Grilles nommées : la fin des colonnes en inline ------------------------
   Ces trois grilles étaient posées en `style="grid-template-columns:…"`, donc
   INTOUCHABLES par cette feuille. Elles ne débordaient pas — les unités `fr`
   rétrécissent au lieu de déborder — elles devenaient simplement ILLISIBLES,
   ce qu'aucun test de débordement ne détecte. Mesuré à 360px le 2026-07-16 :

     diaspora  : 5 colonnes de 46px
     contact   : 2 colonnes, la seconde à 62px
     services  : 2 colonnes, jusqu'à 44px / 216px

   ⚠️ Ne JAMAIS régler ça par un sélecteur [style*="…"] (il en reste trois plus
   bas, lignes ~380) : ça matche un fragment de TEXTE dans l'attribut style et
   casse au premier espace changé. La grille se nomme, point. */
.contact-main{grid-template-columns:1fr 1.2fr;}
/* Block « Texte + image » : grille nommée, jamais de colonnes en inline. */
.ti-main{grid-template-columns:1fr 1fr;}
.diaspora-etapes{grid-template-columns:repeat(5,1fr);}
.svc-row{grid-template-columns:1fr 1fr;}

@media(max-width:900px){
  .contact-main{grid-template-columns:1fr;}
  .ti-main{grid-template-columns:1fr;}
  /* En une colonne, l'image passe toujours APRÈS le texte : order est posé en
     inline par le template, d'où le !important. */
  .ti-main > *{order:0 !important;}
  .diaspora-etapes{grid-template-columns:1fr 1fr;}
  .svc-row{grid-template-columns:1fr;}
  /* En une colonne, l'alternance texte/image n'a plus de sens : une ligne sur
     deux ferait passer l'image AVANT son titre. !important car `order` est posé
     en inline par le template ; order:0 rétablit l'ordre du source, soit texte
     puis image, sur toutes les lignes. */
  .svc-row > *{order:0 !important;}
}
@media(max-width:560px){
  .diaspora-etapes{grid-template-columns:1fr;}
}
.bien-card__specs{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;margin-top:8px;}

/* Filters */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--white);border:1px solid var(--socorif-card-line);border-radius:var(--socorif-card-radius);padding:18px 20px;}
.filters label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:600;}
.filters select{padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:var(--cream);font-size:14px;min-width:170px;font-family:inherit;}

/* Map */
#bien-map{height:440px;border-radius:var(--socorif-card-radius);border:1px solid var(--socorif-card-line);overflow:hidden;}
.map-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:var(--muted);}
.map-legend span{display:inline-flex;align-items:center;gap:7px;}
.map-legend i{width:12px;height:12px;border-radius:50%;display:inline-block;}

/* Gallery (single bien) */
.gallery__main{aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--sand);}
.gallery__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;}
.gallery__thumbs button{aspect-ratio:4/3;border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:var(--sand);}
.gallery__thumbs button.active{border-color:var(--gold);}

/* FAQ accordion */
.faq-item{border:1px solid var(--socorif-card-line);border-radius:var(--radius-sm);background:var(--white);margin-bottom:12px;overflow:hidden;}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;color:var(--green);display:flex;justify-content:space-between;gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item[open] summary{border-bottom:1px solid var(--line);}
.faq-item .faq-a{padding:16px 22px;color:var(--muted);}

/* Before/after comparator */
.compare{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;user-select:none;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare .after{clip-path:inset(0 0 0 var(--split,50%));}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;background:var(--gold);cursor:ew-resize;}
.compare .handle::after{content:"⟺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--green3);display:flex;align-items:center;justify-content:center;font-size:16px;}

/* =============================================================================
   FOOTER
   ========================================================================== */
/* --- Pied de page ----------------------------------------------------------
   UNE SEULE RÈGLE DE COULEUR : l'or marque la STRUCTURE (intitulés de colonne)
   et l'ACTION (survol, téléphone). Jamais la prose.

   Avant, l'or clair et le blanc chaud à 75% servaient indifféremment — deux
   tons trop proches pour hiérarchiser, assez distincts pour qu'on sente
   l'incohérence. Un paragraphe était même passé en or par un style inline, sans
   raison. D'où l'impression de mélange. */
/* 14.5px : le footer héritait du 16px par défaut du navigateur (ni body ni html
   ne fixent de taille). À 16px, un lien de pied de page pèse autant qu'une
   phrase du contenu principal — la hiérarchie de la page s'aplatit. Les tailles
   explicites ci-dessous sont réduites dans la même proportion pour que les
   écarts entre niveaux tiennent. */
.site-footer{background:var(--green3);color:var(--footer-txt);padding:64px 0 30px;font-size:14.5px;}
.site-footer ul{list-style:none;margin:0;padding:0;}
.site-footer ul li{margin:0 0 9px;}
.site-footer p{margin:0 0 14px;}

/* Intitulés de colonne : le site a DÉJÀ un vocabulaire de label (.eyebrow, sur
   les pages service et réalisation). Le footer parlait une autre langue avec
   ses titres Marcellus 15px. Un micro-label en majuscules se lit comme une
   structure ; un titre serif timide se lit comme du contenu raté. */
.site-footer h4{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  color:var(--goldsoft);margin-bottom:18px;
}
.site-footer a{color:var(--footer-txt);transition:color .15s ease,transform .15s ease;}
.site-footer a:hover{color:var(--goldsoft);}
/* min-height 24px = WCAG 2.5.8 « Target Size (Minimum) », niveau AA.
   Mesuré à 360px après le passage du footer à 14.5px : ces liens tombaient à
   23px de haut — l'AA manquée d'UN pixel, causée par la réduction de taille
   elle-même. Le seuil de 44px souvent cité est le niveau AAA (2.5.5) ; l'exiger
   ici ferait un pied de page interminable pour un gain d'accessibilité nul. */
.site-footer li a{display:inline-flex;align-items:center;min-height:24px;}
.site-footer li a:hover{transform:translateX(2px);}

/* Le slogan est la promesse de la marque : le seul énoncé qui mérite du
   contraste. Tout le reste du texte se tait. */
.footer-tagline{color:var(--footer-strong);font-size:15px;max-width:320px;}

/* SIGNATURE — le téléphone.
   SOCORIF est une entreprise de construction à Coyah : l'affaire se conclut au
   téléphone, pas par formulaire. Or ce numéro était stylé EXACTEMENT comme le
   lien « FAQ ». Le mettre en Marcellus et en or, c'est dire la vérité sur ce
   qui compte dans ce footer.
   Sélecteur en .site-footer .footer-tel (0,2,0) et non .footer-tel (0,1,0) :
   sinon .site-footer a (0,1,1) l'emporterait et la couleur serait ignorée. */
.site-footer .footer-tel{
  font-family:var(--font-heading);font-size:19px;color:var(--goldsoft);
  display:inline-block;margin:2px 0;letter-spacing:.4px;
}
.site-footer .footer-tel:hover{color:var(--white);}

.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;}
/* Filet CHAUD : la bordure était en blanc pur alpha — une ligne froide en
   travers d'une palette entièrement chaude. */
.footer-bottom{border-top:1px solid rgba(232,217,173,.15);margin-top:40px;padding-top:22px;font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:center;}
/* Ce lien est seul dans son span, pas noyé dans une phrase : l'exception
   « inline » de la WCAG 2.5.8 ne le couvre pas, contrairement au fil d'Ariane.
   Mesuré à 15px de haut — sous le minimum AA de 24px. */
.footer-bottom a{display:inline-flex;align-items:center;min-height:24px;}

/* Plancher de qualité : aucun focus-visible n'existait dans TOUT le thème — un
   visiteur au clavier naviguait à l'aveugle. */
.site-footer a:focus-visible{outline:2px solid var(--goldsoft);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){
  .site-footer a{transition:none;}
  .site-footer li a:hover{transform:none;}
}

/* WhatsApp float */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 24px rgba(0,0,0,.25);}

/* --- Retour en haut --------------------------------------------------------
   Empilé AU-DESSUS du bouton WhatsApp, sur le même axe droit : celui-ci occupe
   right:22px / bottom:22px sur 58px, il monte donc jusqu'à 80px. 92px laisse
   12px d'air entre les deux. ⚠️ Changer la taille ou la position du WhatsApp
   oblige à recalculer ce 92px — les deux boutons ne se connaissent pas.

   Masqué par opacity + pointer-events, JAMAIS par l'attribut `hidden` : une
   règle CSS `display:flex` l'emporterait sur `[hidden]` et le bouton resterait
   visible. Et pas d'IntersectionObserver : un élément `position:fixed` est
   toujours dans le viewport, l'observateur ne se déclencherait jamais. */
.back-to-top{
  position:fixed;right:22px;bottom:92px;z-index:60;
  width:50px;height:50px;border-radius:50%;
  background:var(--white);color:var(--green);
  border:2px solid var(--green);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;cursor:pointer;
  box-shadow:0 6px 18px rgba(18,63,42,.22);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s,color .2s;
}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{background:var(--green);color:var(--goldsoft);}
.back-to-top:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
/* L'icône hérite de la couleur (currentColor) et de la taille (1em) du bouton :
   le survol qui inverse le fond suffit à inverser la flèche, sans règle dédiée. */
.back-to-top svg,.back-to-top .socorif-icon-custom{width:1em;height:1em;transition:transform .2s ease;}
/* La flèche glisse vers le haut au survol (on anime l'icône, pas le bouton :
   celui-ci utilise déjà transform pour son apparition .is-visible). */
.back-to-top:hover svg,.back-to-top:hover .socorif-icon-custom{transform:translateY(-3px);}
@media(max-width:639px){
  /* Le WhatsApp ne change pas de taille en mobile : l'empilement reste calé
     sur lui, seul le retour-haut rétrécit. */
  .back-to-top{width:44px;height:44px;bottom:88px;font-size:19px;}
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{transition:none;}
}

/* =============================================================================
   RESPONSIVE GRIDS
   ========================================================================== */
@media(max-width:900px){
  h1,.hero h1{font-size:38px;} h2{font-size:30px;}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .section{padding:var(--section-y-sm) 0;}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .gallery__thumbs{grid-template-columns:repeat(4,1fr);}
}

/* ---------------------------------------------------------------------------
 * Contact Form 7 — alignement sur l'habillage du thème (.socorif-form)
 * Les inputs/labels/consent sont déjà stylés via .socorif-form (socorif-core).
 * Ces règles neutralisent les wrappers CF7 et harmonisent boutons/messages.
 * ------------------------------------------------------------------------- */
.socorif-form .wpcf7-form-control-wrap{display:block;}
.socorif-form .btn.wpcf7-submit{width:100%;justify-content:center;border:none;cursor:pointer;}
.socorif-form .wpcf7-spinner{margin:0 0 0 10px;}
.socorif-form .sc-consent .wpcf7-list-item{margin:0;}
.socorif-form .sc-consent .wpcf7-list-item-label{font-weight:400;}
.socorif-form .wpcf7-not-valid-tip{color:#8a2c1f;font-size:12.5px;margin-top:4px;}
.socorif-form .wpcf7-form-control.wpcf7-not-valid{border-color:#e0a89f;}
.socorif-form .wpcf7-response-output{padding:14px 16px;border-radius:10px;margin:18px 0 0;font-size:14px;}
.socorif-form .wpcf7-form.sent .wpcf7-response-output{background:#e6f2ea;color:#123f2a;border:1px solid #9ccbb0;}
.socorif-form .wpcf7-form.invalid .wpcf7-response-output,
.socorif-form .wpcf7-form.failed .wpcf7-response-output,
.socorif-form .wpcf7-form.spam .wpcf7-response-output{background:#fbe9e7;color:#8a2c1f;border:1px solid #e0a89f;}
.socorif-form input[readonly]{opacity:.75;}

/* ---------------------------------------------------------------------------
 * Estimation (page-estimation) — étapes + fourchette live
 * ------------------------------------------------------------------------- */
.estim-form .estim-step__no{display:inline-block;background:var(--sand);color:var(--green);font-size:12px;font-weight:800;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;margin-right:8px;}
.estim-form .estim-step__title{font-family:var(--font-heading);font-size:19px;color:var(--green);}
.estim-form .estim-step--sep{border-top:1px solid var(--line);padding-top:18px;margin-top:4px;}
.estim-form .estim-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
.estim-form .estim-live{background:var(--sand);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:flex;flex-direction:column;gap:4px;margin:4px 0;}
.estim-form .estim-live__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);}
.estim-form .estim-live__value{font-family:var(--font-heading);font-size:26px;color:var(--gold2);}
.estim-form .estim-live__note{font-size:12.5px;color:var(--muted);}
.estim-form .estim-rgpd{font-size:12px;color:var(--muted);text-align:center;margin:0;}
@media(max-width:900px){
  .section .container[style*="360px"]{grid-template-columns:1fr!important;}
  .estim-form .estim-grid{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------------
 * Espace client (page-espace-client)
 * ------------------------------------------------------------------------- */
.espace-tab{flex:1;text-align:center;padding:11px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--muted);font-family:inherit;transition:all .15s;}
.espace-tab.is-active{background:var(--white);color:var(--green);box-shadow:0 2px 6px rgba(18,63,42,.08);}
.espace-navitem{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:10px;font-size:14.5px;font-weight:600;cursor:pointer;border:none;background:transparent;color:var(--ink);font-family:inherit;text-align:left;width:100%;transition:background .15s,color .15s;}
.espace-navitem:hover{background:var(--sand);}
.espace-navitem.is-active{background:var(--green);color:var(--goldsoft);}
.espace-panel .login-remember{font-size:13px;color:var(--muted);}
.espace-panel .button-primary,.espace-panel #wp-submit{width:100%;justify-content:center;background:var(--green);color:var(--goldsoft);padding:14px;border:none;border-radius:9px;font-weight:800;font-size:14.5px;cursor:pointer;font-family:inherit;}
.espace-panel .button-primary:hover,.espace-panel #wp-submit:hover{background:var(--green3);}
@media(max-width:820px){
  .container[style*="250px 1fr"]{grid-template-columns:1fr!important;}
  .espace-nav{position:static!important;flex-direction:row!important;flex-wrap:wrap;}
  .section .container[style*=".9fr"]{grid-template-columns:1fr!important;}
}

/* ===========================================================================
 * Options du thème — logos & icônes personnalisés (page ACF « Options du thème »)
 * Dimensionnement par CONTEXTE pour matcher les éléments par défaut remplacés.
 * ======================================================================== */
.socorif-logo-custom{display:block;width:auto;max-width:220px;object-fit:contain;}
.socorif-logo-custom--footer{max-width:180px;}

.socorif-icon-custom{display:inline-block;vertical-align:middle;object-fit:contain;}

.svc-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;}
.svc-icon .socorif-icon-custom{width:1em;height:1em;}

/* Bouton WhatsApp flottant (conteneur rond 58px, émoji 28px par défaut). */
.wa-float .socorif-icon-custom{width:30px;height:30px;}

/* Bouton hamburger : swap menu/fermer via l'état aria-expanded (piloté en JS). */
.nav-toggle .socorif-icon-custom{width:24px;height:24px;}
.nav-toggle__menu,
.nav-toggle__close{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.nav-toggle__close{display:none;}
.nav-toggle[aria-expanded="true"] .nav-toggle__menu{display:none;}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:inline-flex;}

/* ===========================================================================
 * Mission I — icônes accordéon FAQ & réseaux sociaux (Options du thème).
 * ======================================================================== */
/* Accordéon FAQ : swap ouvrir/fermer piloté par l'état natif details[open]. */
.faq-item .faq-ico{display:inline-flex;align-items:center;color:var(--gold2);font-weight:700;font-size:32px;line-height:1;}
.faq-item .faq-ico__ouvrir,
.faq-item .faq-ico__fermer{display:inline-flex;align-items:center;justify-content:center;line-height:1;}
.faq-item .faq-ico__fermer{display:none;}
.faq-item[open] .faq-ico__ouvrir{display:none;}
.faq-item[open] .faq-ico__fermer{display:inline-flex;}
.faq-item .faq-ico .socorif-icon-custom{width:32px;height:32px;}

/* Réseaux sociaux du footer : glyphe SVG (thème ou upload) ou libellé fallback.
   La pastille assure une cible tactile ≥ 40px (WCAG) même si le glyphe est
   petit ; l'or au survol reprend l'accent de la marque. */
.socorif-socials .socorif-social{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;background:rgba(232,217,173,.1);
  border:1px solid rgba(232,217,173,.25);color:var(--goldsoft);
  transition:background .2s,color .2s,border-color .2s;}
.socorif-socials .socorif-social:hover{background:var(--gold);color:var(--green3);border-color:var(--gold);}
.socorif-socials .socorif-social:focus-visible{outline:2px solid var(--goldsoft);outline-offset:2px;}
.socorif-socials .socorif-social svg{width:28px;height:28px;}
.socorif-socials .socorif-icon-custom{width:28px;height:28px;}

/* =============================================================================
   ANIMATIONS DES SECTIONS  (Options du thème → Style → Animation)
   Pilotées par une classe sur <body> : socorif-anim-{reveal|kenburns|compteurs}.
   Aucune n'est chargée si le réglage est « Aucune » — le CSS est là, mais sans
   la classe il ne s'applique à rien.
   ========================================================================== */

/* --- 1. Révélation au défilement -------------------------------------------
   Chaque section se lève de 18px en apparaissant. C'est ce que font les agences
   haut de gamme : un plan qu'on déroule.

   ⚠️ L'état initial (opacity:0) n'est posé QUE si le JS a démarré — d'où la
   classe .socorif-js sur <html>. Sans cette garde, un visiteur dont le JS échoue
   (réseau 2G coupé en plein chargement, cible Guinée) verrait une page
   DÉFINITIVEMENT BLANCHE : les sections resteraient invisibles pour toujours.
   Une animation ne doit jamais pouvoir effacer le contenu. */
.socorif-js body.socorif-anim-reveal .socorif-reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s ease-out,transform .55s ease-out;
  will-change:opacity,transform;
}
.socorif-js body.socorif-anim-reveal .socorif-reveal.is-in{opacity:1;transform:none;}

/* --- 2. Zoom lent (Ken Burns) ---------------------------------------------- */
.socorif-anim-kenburns .hero[style*="background-image"],
.socorif-anim-kenburns .hero-slide{
  animation:socorif-kenburns 22s ease-in-out infinite alternate;
}
@keyframes socorif-kenburns{ from{background-size:100%;} to{background-size:112%;} }

/* --- 3. Compteurs ----------------------------------------------------------
   Le JS écrit les valeurs ; le CSS ne fait que réserver la largeur pour éviter
   que le bandeau ne tressaute pendant le décompte. */
.socorif-anim-compteurs .prj-faits [data-compteur]{font-variant-numeric:tabular-nums;}

/* Respect absolu de prefers-reduced-motion : les trois s'éteignent, et le
   contenu s'affiche immédiatement dans son état final. */
@media (prefers-reduced-motion:reduce){
  .socorif-js body.socorif-anim-reveal .socorif-reveal{opacity:1;transform:none;transition:none;}
  .socorif-anim-kenburns .hero[style*="background-image"],
  .socorif-anim-kenburns .hero-slide{animation:none;}
}

/* --- Carrousel témoignages (block testimonials) ---------------------------
   Le JS bascule display inline ; sans état initial CSS, les ~10 témoignages
   s'empilaient tous le temps du chargement (FOUC). Ici : une seule slide
   visible d'entrée — et un visiteur SANS JS lit le premier témoignage au
   lieu d'une pile. Le fondu rejoue à chaque bascule display none→block. */
.carousel__slide{display:none;animation:socorif-slide-fade .45s ease;}
.carousel__slide:first-child{display:block;}
@keyframes socorif-slide-fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .carousel__slide{animation:none;}
}

/* --- Bandeau de consentement (GA4) -----------------------------------------
   Rendu par inc/analytics.php uniquement quand un ID GA4 est saisi et
   qu'aucun choix n'est mémorisé. Pas de display sur .socorif-consent :
   l'attribut HTML `hidden` doit garder le dernier mot (le poser en
   display:flex l'écraserait — piège documenté du back-to-top). */
.socorif-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9998;
  max-width:680px;margin:0 auto;background:var(--green3);color:var(--white);
  border:1px solid rgba(232,217,173,.35);border-radius:14px;
  padding:18px 20px;box-shadow:0 18px 50px -20px rgba(13,48,32,.85);}
.socorif-consent__texte{font-size:14px;color:rgba(255,253,248,.92);margin:0 0 14px;}
.socorif-consent__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.socorif-consent__btn{border-radius:9px;padding:11px 18px;font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;min-height:44px;}
.socorif-consent__btn--oui{background:var(--gold);color:var(--green3);border:none;font-weight:800;}
.socorif-consent__btn--non{background:transparent;color:var(--goldsoft);border:1px solid rgba(232,217,173,.4);}
.socorif-consent__btn:focus-visible{outline:2px solid var(--goldsoft);outline-offset:2px;}
@media(max-width:560px){.socorif-consent__actions{justify-content:stretch;}
  .socorif-consent__btn{flex:1;}}