/* Carrousel d'accueil — AYA Architectures
   À enqueuer uniquement sur la page d'accueil (voir carrousel-fonctions.php).

   Le bouton "Voir tous les projets" et la phrase d'accroche ne sont plus
   générés par ce carrousel : ce sont des blocs Gutenberg natifs posés à la
   main juste en dessous (Boutons + Paragraphe), modifiables depuis
   l'éditeur sans jamais ouvrir ce fichier.

   ------------------------------------------------------------------
   GUIDE RAPIDE — quelle classe modifier pour quoi (pas besoin de PHP,
   juste ce fichier CSS) :

   .hc                 taille/fond de la zone photo (hauteur max, etc.)
   .hc-slide-media     la photo elle-même (recadrage, dégradé sombre)
   .hc-title           le titre du projet, affiché sur la photo
   .hc-arrow           les flèches ‹ ›
   .hc-dots / .hc-dot  les points de pagination

   Tout en bas du fichier : le bouton "Voir tous les projets" et l'écart
   sous la phrase d'accroche, tous deux scopés à ".home" pour ne toucher
   que la page d'accueil.
   ------------------------------------------------------------------ */

.hc-demo{ margin:0; border-radius:0; overflow:hidden; background:#000; }

/* Plein largeur sur mobile : le carrousel "casse" le cadre de contenu
   (qui a normalement une marge de chaque côté) pour toucher les deux
   bords de l'écran — plus joli en petit format. Ne touche pas au
   bureau/tablette : là, le carrousel garde la largeur du reste du
   contenu, comme avant. Scopé à ".home" pour ne toucher que la page
   d'accueil. */
@media (max-width:768px){
  .home .hc-demo{
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
  }
}
.hc{ position:relative; overflow:hidden; background:#111; outline:none; }
.hc-track{ display:flex; width:100%; transition:transform .5s ease; }
/* min-width:0 est indispensable : sans lui, une diapositive refuse de
   descendre en dessous de la largeur "naturelle" de son contenu (ici la
   photo, à cause de sa hauteur minimale + son ratio 16/9) et devient
   plus large que le cadre du carrousel. Résultat sur mobile : le calcul
   du défilement ne correspond plus à la largeur réelle des diapositives,
   et on voyait un bout de la photo précédente dépasser en changeant de
   diapositive. */
.hc-slide{ position:relative; flex:0 0 100%; min-width:0; }

.hc-slide-media{ position:relative; width:100%; aspect-ratio:16/9; max-height:480px; min-height:260px; overflow:hidden; }
.hc-slide-media .hc-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1); transition:transform 7s linear; }
.hc-slide.is-active .hc-bg{ transform:scale(1.08); }
.hc-slide-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); pointer-events:none; }

.hc-title{
  position:absolute; left:0; right:0; top:50%;
  transform:translateY(-50%); /* centré verticalement sur la photo */
  padding:0 64px; text-align:center; z-index:2;
}
/* Sélecteur ".hc .hc-title h3" (plus spécifique que ".entry-content h3")
   pour passer devant la règle globale qui met tous les h3 du site en
   capitales avec la police du texte courant (Apparence > Personnaliser >
   CSS additionnel) — ce titre-là garde les capitales mais avec la même
   police que les vrais titres H2 du site ("Jost"), pour matcher les
   autres endroits où le titre du projet s'affiche sur une photo
   (galerie de la page Projets, galerie par matériau). */
.hc .hc-title h3{
  font-family:"Jost", sans-serif;
  font-weight:400;
  font-size:clamp(20px,3vw,32px);
  margin:0;
  color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.hc-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none; background:rgba(0,0,0,.28); color:#fff; border-radius:50%; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.hc-arrow:hover{ background:rgba(0,0,0,.5); }
.hc-arrow.prev{ left:16px; } .hc-arrow.next{ right:16px; }
.hc-dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:8px; z-index:2; }
.hc-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); border:none; padding:0; cursor:pointer; }
.hc-dot.is-active{ background:#fff; }

/* ---- Bouton "Voir tous les projets" (page d'accueil uniquement) ----
   S'applique automatiquement, pas besoin d'ajouter de classe au bloc
   dans l'éditeur. Bouton contour, qui se remplit au survol.

   Le bloc Bouton natif a été réglé dans l'éditeur avec un rayon d'angle
   à 0 (coins carrés) — d'où les !important ci-dessous pour repasser en
   forme pilule ; le plus propre reste, si tu repasses par l'éditeur un
   jour, de remettre le rayon d'angle du bloc sur "arrondi" toi-même et
   de pouvoir alors retirer ces !important. */
.home .wp-block-buttons .wp-block-button__link{
  display:inline-block;
  padding:14px 36px !important;
  border:1.5px solid #232323 !important;
  border-radius:100px !important;
  background:transparent !important;
  color:#232323 !important;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.home .wp-block-buttons .wp-block-button__link:hover,
.home .wp-block-buttons .wp-block-button__link:focus{
  background:#232323 !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
}

/* ---- Air entre la phrase d'accroche (h2) et le texte en dessous ----
   Uniquement sur la page d'accueil (".home") : la règle globale
   ".entry-content h2{margin-bottom:5px}" (Personnaliser > CSS
   additionnel) reste intacte pour les autres pages. */
.home .entry-content h2{
  margin-bottom:28px;
}

@media (max-width:560px){
  .home .wp-block-buttons .wp-block-button__link{ padding:12px 28px !important; }
  .home .entry-content h2{ margin-bottom:20px; }
}

@media (prefers-reduced-motion:reduce){
  .hc-track{ transition:none; }
  .hc-slide-media .hc-bg{ transition:none; }
  .hc-slide.is-active .hc-bg{ transform:none; }
}

@media (max-width:560px){
  .hc-title{ padding:0 44px; }
  .hc-arrow{ width:38px; height:38px; font-size:17px; }
}