/* =====================================================================
   AFS 26 — CSS global du site
   Chargé par l'extension « AFS 26 – Site » (wp-content/plugins/afs26-site),
   après les feuilles d'Elementor. Ne contient que le code utilisé à
   plusieurs endroits ; le CSS propre à un seul bloc reste dans son widget.

   Ajouter un composant
     1. Il sert sur plusieurs pages (ou en plusieurs exemplaires) ? Sinon,
        son CSS reste dans le widget (Avancé > CSS personnalisé).
     2. Ajouter une section numérotée en fin de fichier et une ligne au sommaire.
        Sélecteurs de classes préfixés « afs- », jamais le mot-clé « selector »
        d'Elementor (il ne fonctionne que dans le CSS d'un widget).
     3. Poser la classe sur le widget ou le conteneur (Avancé > Classes CSS).
     4. Enregistrer : la version du fichier change toute seule (date de modification).
        Purger ensuite WP Super Cache, puis Cloudflare.

   Sommaire
     1. Titres : 2e ligne en gras (afs-bold)
     2. Icon-box : marge haute des titres passés de H3 à div (lot 4)
     3. Blocs « présentation » à fond clair (afs-presentation)
     4. FAQ en fiches (afs-faq) — 6 pages de prestations
     5. Réalisations : 3 colonnes en parallaxe + visionneuse (afs-mz) — 5 pages
     6. Reflet sur photo (afs-sheen) — Verrières, Mobilier
     7. Escaliers : titre en escalier (afs-step) et engagements (afs-eng)
     8. Pergola : étiquettes des panneaux (afs-pg-tags) et carrousels élargis
   ===================================================================== */


/* =====================================================================
   1. Titres : 2e (et 3e) ligne en gras
   Dans le widget Titre : <span class="afs-bold">…</span>.
   La couleur dépend d'une classe posée sur le widget (Avancé > Classes CSS) :
     - aucune classe  : la ligne garde la couleur du titre (titres du hero)
     - afs-t-bleu     : bleu AFS
     - afs-t-clair    : bleu clair (titres sur fond sombre)
   ===================================================================== */

/* Graisse forte pour contraster avec la première ligne fine */
.afs-bold {
  font-weight: 600;          /* Archivo 600 : plus de gras, sans tomber dans le 800 "promo" */
  letter-spacing: -0.005em;  /* resserre légèrement, le gras prend plus de place */
}
.afs-t-bleu .afs-bold { color: #2587C5; }
.afs-t-clair .afs-bold { color: #9FD3F7; }

/* Ligne en noir anthracite (ex. « qui cadre » sur Menuiserie) : après les couleurs pour passer devant */
.afs-bold.afs-dark { color: #111315; }


/* =====================================================================
   2. Icon-box : le titre est passé de H3 à div (lot 4) ;
   on garde la marge haute que le thème donnait aux H3.
   Classe afs-ib-titre posée sur les 16 widgets concernés.
   ===================================================================== */
.afs-ib-titre .elementor-icon-box-title { margin-top: 8px; }


/* =====================================================================
   3. Blocs « présentation » à fond clair (anciennement dans
   Apparence > Personnaliser > CSS additionnel). Classe afs-presentation
   posée sur 9 conteneurs. Couleurs gardées telles quelles.
   ===================================================================== */
.afs-presentation {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 12% 25%,
      rgba(0, 159, 229, 0.07) 0%,
      rgba(0, 159, 229, 0) 32%
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(24, 42, 55, 0.05) 0%,
      rgba(24, 42, 55, 0) 30%
    ),
    #f8f9fa;
}
.afs-presentation::before,
.afs-presentation::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Grand cercle en haut à droite */
.afs-presentation::before {
  width: 280px;
  height: 280px;
  top: -170px;
  right: 8%;
  border: 1px solid rgba(0, 159, 229, 0.16);
}

/* Petit point bleu en bas à gauche */
.afs-presentation::after {
  width: 14px;
  height: 14px;
  left: 7%;
  bottom: 70px;
  background: #009FE5;
  opacity: 0.55;
}


/* =====================================================================
   4. FAQ en fiches : liste des questions à gauche, fiche réponse à droite
   Balisage dans chaque widget HTML (questions + réponses + JSON-LD) ;
   le comportement est dans afs-global.js (section 1).
   ===================================================================== */

/* ---------- 4.1 Grille : liste à gauche, fiche à droite ----------
   align-items:stretch → la fiche prend exactement la hauteur de la liste */
.afs-faq{font-family:'Manrope',sans-serif;color:#0E0F11}
.afs-faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:20px;align-items:stretch}

/* ---------- 4.2 Liste des questions ---------- */
.afs-faq-list{display:flex;flex-direction:column;border-top:1px solid #DCDDDA}
/* Reset des boutons du thème + style ligne */
.afs-faq .afs-faq-q{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:12px;min-height:66px;padding:10px 20px 10px 24px !important;border-bottom:1px solid #DCDDDA !important;background:transparent !important;transition:background .3s ease}
/* Barre bleue à gauche de la question affichée */
.afs-faq .afs-faq-q::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent;transition:background .3s ease}
.afs-faq .afs-faq-q em{font-style:normal;font-family:'Archivo',sans-serif;font-size:12px;letter-spacing:.08em;color:#2587C5}
.afs-faq .afs-faq-q span{font-family:'Archivo',sans-serif;font-size:16px;line-height:1.35;font-weight:400;color:#4A4E53;text-transform:none;letter-spacing:0}
.afs-faq .afs-faq-q svg{width:16px;height:10px;fill:none;stroke:#8A8E93;stroke-width:1.2;opacity:.35;transition:transform .3s ease,opacity .3s ease}
.afs-faq .afs-faq-q:hover{background:#F5F5F3 !important}
.afs-faq .afs-faq-q:hover svg{transform:translateX(4px);opacity:1}
/* Question active */
.afs-faq .afs-faq-q.is-active{background:#F5F5F3 !important}
.afs-faq .afs-faq-q.is-active::before{background:#2587C5}
.afs-faq .afs-faq-q.is-active span{color:#0E0F11;font-weight:500}
.afs-faq .afs-faq-q.is-active svg{stroke:#2587C5;opacity:1}

/* ---------- 4.3 Fiche réponse (marges resserrées pour tenir dans la hauteur de la liste) ---------- */
.afs-faq-panel{position:relative;overflow:hidden;background:#F5F5F3;padding:36px 44px 24px;display:flex;flex-direction:column}
/* Grand numéro en contour, en haut à droite */
.afs-faq-bignum{position:absolute;right:24px;top:-14px;font-family:'Archivo',sans-serif;font-size:170px;line-height:1;font-weight:600;color:transparent;-webkit-text-stroke:1px rgba(37,135,197,.22);pointer-events:none}
/* Réponses : masquées, seule la réponse active s'affiche avec un fondu montant */
.afs-faq-a{display:none;position:relative;flex-direction:column;max-width:560px}
.afs-faq-a.is-active{display:flex;animation:afs-faq-in .6s cubic-bezier(.22,1,.36,1) both}
@keyframes afs-faq-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.afs-faq-a small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:#6B6F74}
.afs-faq-a small b{font-weight:600;color:#2587C5}
.afs-faq .afs-faq-a h3{margin:14px 0 0 !important;font-family:'Archivo',sans-serif;font-size:26px;line-height:1.2;font-weight:400;color:#0E0F11;text-transform:none}
.afs-faq .afs-faq-a p{margin:16px 0 0 !important;font-size:16px;line-height:1.7;font-weight:300;color:#4A4E53}
/* Fait clé : encadré bleu avec losange */
.afs-faq-fact{align-self:flex-start;margin-top:20px;display:inline-flex;align-items:center;gap:10px;padding:9px 13px;border:1px solid #2587C5;color:#2587C5;font-size:12px;font-weight:600;letter-spacing:.06em}
.afs-faq-fact::before{content:"";width:6px;height:6px;background:#2587C5;transform:rotate(45deg)}

/* Pied de fiche : compteur + flèches, calé en bas */
.afs-faq-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid #DCDDDA}
.afs-faq-count{font-family:'Archivo',sans-serif;font-size:14px;letter-spacing:.1em;color:#6B6F74}
.afs-faq-count b{font-weight:400;color:#0E0F11}
.afs-faq-count i{font-style:normal}
.afs-faq-nav{display:flex;gap:8px}
.afs-faq .afs-faq-nav button{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #C9CBCE !important;background:transparent !important;color:#0E0F11;transition:background .3s ease,border-color .3s ease,color .3s ease}
.afs-faq .afs-faq-nav button svg{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2}
.afs-faq .afs-faq-nav button:hover{background:#2587C5 !important;border-color:#2587C5 !important;color:#FFFFFF}

/* ---------- 4.4 Tablette / mobile : liste puis fiche ---------- */
@media (max-width:1024px){
  .afs-faq-grid{grid-template-columns:1fr}
  .afs-faq-panel{padding:32px 24px 24px;min-height:380px}
  .afs-faq-bignum{font-size:130px}
  .afs-faq .afs-faq-a h3{font-size:22px}
}

/* ---------- 4.5 Accessibilité : pas d'animation si refusée ---------- */
@media (prefers-reduced-motion: reduce){ .afs-faq-a.is-active{animation:none} }


/* =====================================================================
   5. Réalisations : 3 colonnes en parallaxe + visionneuse plein écran
   Balisage (photos, légendes) dans chaque widget HTML ;
   le comportement est dans afs-global.js (section 2).
   ===================================================================== */

/* ---------- 5.1 Scène : hauteur fixe, ce qui dépasse est coupé ---------- */
.afs-mz{--afs-mz-h:660px;--afs-mz-bg:#111315;position:relative;height:var(--afs-mz-h);overflow:hidden}

/* 3 colonnes côte à côte */
.afs-mz-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.afs-mz-col{display:flex;flex-direction:column;gap:14px;will-change:transform}

/* ---------- 5.2 Tuile photo ---------- */
.afs-mz-tile{position:relative;margin:0;height:var(--h);flex:none;overflow:hidden;background:#181A1D;cursor:zoom-in}
.afs-mz-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
/* Voile sombre en bas, visible au survol */
.afs-mz-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,17,0) 40%,rgba(14,15,17,.85) 100%);opacity:0;transition:opacity .5s ease}
/* Légende : catégorie bleu clair + titre, qui monte au survol */
.afs-mz-tile figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:4px;opacity:0;transform:translateY(12px);transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.afs-mz-tile figcaption small{font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#9FD3F7}
.afs-mz-tile figcaption span{font-family:'Archivo',sans-serif;font-size:17px;color:#FFFFFF}
.afs-mz-tile:hover img{transform:scale(1.06)}
.afs-mz-tile:hover::after{opacity:1}
.afs-mz-tile:hover figcaption{opacity:1;transform:none}

/* ---------- 5.3 Fondus haut et bas, couleur du fond du bloc ---------- */
.afs-mz-fade{position:absolute;left:0;right:0;height:110px;pointer-events:none;z-index:2}
.afs-mz-fade-top{top:0;background:linear-gradient(180deg,var(--afs-mz-bg) 0%,transparent 100%)}
.afs-mz-fade-bottom{bottom:0;background:linear-gradient(0deg,var(--afs-mz-bg) 0%,transparent 100%)}

/* ---------- 5.4 Visionneuse plein écran ---------- */
.afs-mz-lb{position:fixed;inset:0;z-index:99999;background:rgba(10,11,12,.95);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:60px 40px}
.afs-mz-lb[hidden]{display:none}
.afs-mz-lb-img{max-width:min(1100px,100%);max-height:72vh;object-fit:contain;animation:afsMzIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes afsMzIn{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.afs-mz-lb-bar{width:min(1100px,100%);display:flex;justify-content:space-between;align-items:center;gap:20px;color:#F4F4F2}
.afs-mz-lb-cap{display:flex;flex-direction:column;gap:4px}
.afs-mz-lb-cap small{font-family:'Manrope',sans-serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:#9FD3F7}
.afs-mz-lb-cap span{font-family:'Archivo',sans-serif;font-size:20px;font-weight:300}
.afs-mz-lb-nav{display:flex;align-items:center;gap:12px}
.afs-mz-lb-count{font-family:'Archivo',sans-serif;font-size:14px;letter-spacing:.1em;color:rgba(244,244,242,.6);margin-right:8px}
.afs-mz-lb-count b{font-weight:400;color:#FFFFFF}
.afs-mz-lb-count i{font-style:normal}
/* Boutons carrés : on neutralise le style de bouton du thème */
.afs-mz-lb .afs-mz-lb-btn{all:unset;box-sizing:border-box;cursor:pointer;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.35);color:#FFFFFF;transition:background .3s ease,border-color .3s ease}
.afs-mz-lb .afs-mz-lb-btn:hover{background:#2587C5;border-color:#2587C5}
.afs-mz-lb .afs-mz-lb-btn svg{width:16px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.afs-mz-lb .afs-mz-lb-close{position:absolute;right:40px;top:40px}

/* ---------- 5.5 Tablette / mobile : grille simple à 2 colonnes, sans mouvement ---------- */
@media (max-width:1024px){
  .afs-mz{height:auto;overflow:visible}
  .afs-mz-grid{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .afs-mz-col{display:contents}
  .afs-mz-tile{height:220px}
  .afs-mz-fade{display:none}
  .afs-mz-tile figcaption{opacity:1;transform:none}
  .afs-mz-tile::after{opacity:1}
}

/* ---------- 5.6 Mobile : bande de photos à faire glisser au doigt ----------
   Remplace la grille 2 colonnes de 5.5 sous 768 px.
   Les colonnes restent "dissoutes" (display:contents, hérité de 5.5) :
   les 9 photos deviennent directement les éléments d'une seule bande horizontale.
   Le parallaxe JS ne tourne qu'au-dessus de 1024 px, il n'interfère pas ici. */
@media (max-width:767px){

    /* Bande horizontale qui défile au doigt (au lieu de la grille) */
  .afs-mz-grid{
    display:flex;
    align-items:flex-start;              /* NE PAS étirer les photos : sinon le format 4:5 est ignoré */
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;        /* le défilement s'arrête net sur chaque photo */
    -webkit-overflow-scrolling:touch;    /* défilement fluide sur iPhone */
    scrollbar-width:none;                /* barre de défilement masquée (Firefox) */
    padding-bottom:4px;

    /* La bande déborde jusqu'au bord droit de l'écran (au-delà de la marge du bloc) :
       la photo suivante n'est plus coupée net par la marge */
    margin-right:calc(50% - 50vw);
    padding-right:20px;                  /* petit espace après la dernière photo */
  }
  .afs-mz-grid::-webkit-scrollbar{display:none} /* idem pour Safari / Chrome */

  /* Chaque photo : 80 % de la largeur (la suivante dépasse à droite = invite à swiper),
     format portrait 4:5 identique pour toutes (on ignore la hauteur --h prévue pour l'ordinateur) */
    /* Chaque photo : 80 % de la largeur visible, format portrait 4:5 identique pour toutes */
  .afs-mz-tile{
    flex:0 0 78%;
    width:78%;
    height:auto !important;              /* annule les 220 px de la grille tablette (5.5) */
    aspect-ratio:4/5;                    /* la hauteur se calcule d'après la largeur */
    scroll-snap-align:start;
  }
  /* Légende un peu plus grande, toujours visible (déjà forcée en 5.5 : pas de survol au doigt) */
  .afs-mz-tile figcaption{left:16px;right:16px;bottom:16px}
  .afs-mz-tile figcaption span{font-size:18px;line-height:1.3}

  /* Visionneuse : marges et boutons resserrés pour un écran de téléphone */
  .afs-mz-lb{padding:70px 16px 24px;gap:18px}
  .afs-mz-lb-img{max-height:62vh}
  .afs-mz-lb-cap span{font-size:16px}
  .afs-mz-lb .afs-mz-lb-btn{width:44px;height:44px}  /* 44 px = taille tactile minimale */
  .afs-mz-lb .afs-mz-lb-close{right:16px;top:16px}
}

/* ---------- 5.7 Accessibilité : pas de mouvement si refusé ---------- */
@media (prefers-reduced-motion: reduce){
  .afs-mz-tile img,.afs-mz-tile figcaption,.afs-mz-lb-img{transition:none;animation:none}
}


/* =====================================================================
   6. Reflet sur photo : une bande de lumière traverse la photo au survol
   Classe afs-sheen sur le conteneur photo (Verrières, Mobilier).
   ===================================================================== */

/* Le conteneur photo : repère pour placer le reflet */
.e-con.afs-sheen {
  position: relative;
}

/* Le reflet : une bande de lumière en biais, dessinée en dégradé.
   L'image du dégradé fait 2,5 fois la largeur du cadre : on la fait glisser
   avec background-position, donc rien ne dépasse et pas besoin d'overflow:hidden.
   ::after car Elementor utilise ::before pour la superposition */
.e-con.afs-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;                       /* ne bloque pas les clics */
  background-image: linear-gradient(105deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.28) 50%,                /* cœur du reflet : blanc à 28% */
    rgba(255,255,255,0) 60%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: 100% 0;                /* au repos : le reflet est hors cadre, à gauche */
  transition: background-position 1.4s cubic-bezier(.22,1,.36,1);
}

/* Survol : le reflet traverse la photo de gauche à droite */
.e-con.afs-sheen:hover::after {
  background-position: 0% 0;
}

/* L'étiquette "Réalisation AFS" et la petite photo restent au-dessus du reflet */
.e-con.afs-sheen > .elementor-element {
  position: relative;
  z-index: 2;
}

/* Accessibilité : pas d'animation si l'utilisateur la désactive */
@media (prefers-reduced-motion: reduce) {
  .e-con.afs-sheen::after { transition: none; }
}


/* =====================================================================
   7. Escaliers
   ===================================================================== */

/* ---------- 7.1 Titre « en escalier » (classe afs-step sur chaque ligne)
   Le filet gris et les marges viennent des réglages Elementor du widget (Style > Bordure, Avancé). */

/* Nez de marche : petit trait bleu de 28px posé sur l'angle */
.afs-step::before{
  content:"";
  position:absolute;
  left:-1px;
  top:-1px;
  width:28px;
  height:2px;
  background:#2587C5;
}

/* On annule les marges du titre lui-même pour que les marches se touchent */
.afs-step .elementor-heading-title{margin:0}

/* ---------- 7.2 Engagements (classe afs-eng sur chaque conteneur)
   Le filet gris et l'espacement viennent des réglages Elementor du conteneur. */

/* Barre bleue : 48px au repos, posée sur le filet gris
   (::after car Elementor utilise ::before pour la superposition d'arrière-plan) */
.afs-eng::after{
  content:"";
  position:absolute;
  left:0;
  top:-2px;
  width:48px;
  height:3px;
  background:#2587C5;
  transition:width .6s cubic-bezier(.22,1,.36,1);
}

/* Survol : la barre bleue occupe toute la largeur */
.afs-eng:hover::after{width:100%}

/* Accessibilité : pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce){ .afs-eng::after{transition:none} }


/* =====================================================================
   8. Pergola
   ===================================================================== */

/* ---------- 8.1 Étiquettes des 4 panneaux (Prolonge le séjour, Lames motorisées…) ---------- */
.afs-pg-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.afs-pg-tags span{padding:8px 12px;border:1px solid rgba(255,255,255,.3);font-family:'Manrope',sans-serif;font-size:12px;line-height:1;color:#F4F4F2}

/* ---------- 8.2 Carrousels « Réalisations » élargis de 90 px de chaque côté
   (classe afs-carrousel-large sur les 2 widgets Carrousel d'images) */
.elementor-widget.afs-carrousel-large {
    width: calc(100% + 180px) !important;
    max-width: none !important;
    margin-left: -90px !important;
    margin-right: -90px !important;
    flex-shrink: 0;
}