/*
Theme Name: Helloweb Starter FSE
Theme URI: https://helloweb.pro
Author: Helloweb
Author URI: https://helloweb.pro
Description: Thème bloc (Full Site Editing) réutilisable pour les sites Helloweb. Design system piloté par theme.json, patterns verrouillés, zéro plugin de mise en page. Dupliquer ce thème et éditer theme.json pour un nouveau projet.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helloweb
Tags: full-site-editing, block-templates, blog, one-column
*/

/* ─────────────────────────────────────────────────────────────
   Le design system vit dans theme.json.
   Ce fichier ne contient QUE ce que theme.json ne sait pas faire.
   ───────────────────────────────────────────────────────────── */

/* Surtitre : petite étiquette au-dessus des titres de section */
.hw-surtitre {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--surtitre);
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--wp--preset--color--gris);
  margin: 0;
}

/* Variante claire du surtitre (sur fond blanc) */
.hw-surtitre.has-anthracite-color {
  color: var(--wp--preset--color--anthracite);
}

/* ─── Carrousel (glisser pour faire défiler) ───────────────── */
.hw-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 8px;
  /* Aligne la 1re carte sur la grille de contenu, déborde à droite */
  padding-left: max(24px, calc(50vw - 520px));
  padding-right: 24px;
}
.hw-carousel::-webkit-scrollbar {
  display: none;
}
.hw-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.hw-carousel > * {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}
@media (min-width: 782px) {
  .hw-carousel > * {
    width: 382px;
  }
}

/* Carte de service dans le carrousel */
.hw-card {
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: 32px;
  border: 1px solid var(--wp--preset--color--anthracite);
  border-radius: 8px;
  background: var(--wp--preset--color--surface);
}
.hw-card img {
  width: 80px;
  height: 80px;
  align-self: flex-start;
}

/* ─── Divers ──────────────────────────────────────────────── */

/* Le pied de page peut afficher le nom de marque en très grand */
.hw-bigtitle {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--wp--preset--color--ciel);
  line-height: 0.8;
  font-size: clamp(48px, 13vw, 220px);
  margin: 0;
}

/* Accordéon natif (bloc Détails) : masque le marqueur par défaut */
.wp-block-details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--titre-4);
  text-transform: uppercase;
  color: var(--wp--preset--color--blanc);
}
.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.wp-block-details summary::after {
  content: "+";
  float: right;
  color: var(--wp--preset--color--ciel);
  font-size: 1.4em;
  line-height: 1;
}
.wp-block-details[open] summary::after {
  content: "–";
}

/* Accessibilité : focus visible partout */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--wp--preset--color--ciel);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   CALAGE FIN (passe pixel) — reprise des valeurs de la maquette
   ═══════════════════════════════════════════════════════════════ */

/* Alumni Sans a de longues hampes : un line-height < 0.85 fait
   collisionner les lignes. 0.86 = rendu serré de la maquette,
   sans chevauchement.
   NB : les styles globaux de WordPress utilisent `:root :where(h1)`
   (spécificité 0,1,0). On passe donc par une classe pour gagner. */
h1.wp-block-heading,
.wp-block-post-title {
  line-height: 0.86;
}
h2.wp-block-heading {
  line-height: 0.86;
}

/* Largeurs de titres et de paragraphes : sans contrainte, les titres
   s'étalent sur toute la largeur de contenu et se cassent mal. */
.wp-block-cover h1.wp-block-heading {
  max-width: 1004px;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-cover .wp-block-cover__inner-container > p:not(.hw-surtitre) {
  max-width: 617px;
  margin-left: auto;
  margin-right: auto;
}

/* Titres de section centrés : largeur maîtrisée pour un beau pavé */
.wp-block-group > h2.wp-block-heading.has-text-align-center {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-group > p.has-text-align-center:not(.hw-surtitre) {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Carrousel : la 1re carte doit s'aligner sur la grille de contenu
   (1040px centrés), et le rail déborder à droite. */
.hw-carousel {
  padding-left: max(24px, calc(50vw - 520px));
}

/* Cartes de service : hauteur homogène, bouton collé en bas */
.hw-card {
  justify-content: flex-start;
}
.hw-card .wp-block-buttons {
  margin-top: auto !important;
  padding-top: 32px;
}

/* En-tête : nav à gauche, logo au centre, bouton à droite */
header .wp-block-group[style*="border-radius"] {
  position: relative;
}
header .wp-block-site-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Le bloc Détails : la question ne doit pas coller au chevron */
.wp-block-details summary {
  padding-right: 40px;
  position: relative;
}
.wp-block-details summary::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  float: none;
}