/* ─── Hero ──────────────────────────────────────────────────────── */

.hero {
    display: flex;
    align-items: center;
    /* la hauteur est définie par le visuel (.hero__visual = var(--diameter)),
       pas de min-height fixe → plus de grand vide au-dessus du titre */
    max-width: 1440px;
    margin: 0 auto;
    padding: 0px 0 0px 112px;
    overflow: visible;   /* laisse le visuel déborder vers le bord droit de l'écran */
    position: relative;
    box-sizing: border-box;
}

/* ─── Contenu gauche ─────────────────────────────────────────────── */

.hero__content {
    flex: 0 0 520px;
    z-index: 1;
}

.hero__title {
    font-size: var(--wp--preset--font-size--display);
    font-weight: 700;
    line-height: 1.0;
    color: var(--wp--preset--color--texte-principal, #1a1a1a);
    text-transform: uppercase;
    margin: 0 0 32px;
    font-family: var(--wp--preset--font-family--cabin, 'Cabin', sans-serif);
}

.hero__subtitle {
    font-size: var(--wp--preset--font-size--desc-display);
    line-height: 1.5;
    color: #444444;
    margin: 0 0 48px;
    max-width: 490px;
    font-family: var(--wp--preset--font-family--cabin);
}

/* Boutons WordPress (wp:buttons) — on stylise le lien interne .wp-block-button__link */
.hero__buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}

.hero__btn .wp-block-button__link {
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.hero__btn .wp-block-button__link:hover {
    opacity: 0.85;
}

/* Bouton plein (rouge) */
.hero__btn--primary .wp-block-button__link {
    background: var(--wp--preset--color--cibc-rouge-accent, rgba(106, 26, 22, 1));
    color: #ffffff;
}

/* Bouton contour */
.hero__btn--outline .wp-block-button__link {
    background: transparent;
    color: var(--wp--preset--color--cibc-rouge-accent, rgba(106, 26, 22, 1));
    border: 2px solid var(--wp--preset--color--cibc-rouge-accent, rgba(106, 26, 22, 1));
}

/* ═══════════════════════════════════════════════════════════════════
   VISUEL DROIT (le "C" en photos) — MODE D'EMPLOI
   ═══════════════════════════════════════════════════════════════════

   ⚙ TOUTE LA TAILLE SE RÈGLE AVEC 2 VARIABLES sur .hero__visual :
        --diameter  et  --thickness   (le reste se calcule automatiquement)

   1) TAILLE / DIAMÈTRE DU CERCLE
      → .hero__visual  --diameter
      → 100vw = le cercle fait toute la largeur de l'écran
      → la MOITIÉ visible = la moitié de cette valeur
      → (le décalage right et la largeur de l'arc se calculent tout seuls)

   2) ÉPAISSEUR DE L'ANNEAU
      → .hero__visual  --thickness   (ex: 20vw)
      → plus grand = anneau plus épais (bords intérieur/extérieur calculés seuls)

   3) HAUTEUR AFFICHÉE (rogner le haut/bas)
      → .hero__visual  height
      → = var(--diameter)   → demi-cercle ENTIER, rien de coupé
      → plus petit (ex 70vw) → le haut et le bas du "C" sont rognés

   4) LES PHOTOS (secteurs)  → chaque .hero__slice--N plus bas
      → --start : départ (0°=haut, 90°=droite, 180°=bas, 270°=gauche)
      → --span  : largeur de la photo en degrés
      → background-position : cadre le visage dans le secteur (x% y%)
   ═══════════════════════════════════════════════════════════════════ */

.hero__visual {
    /* ▼▼▼ LES 2 SEULS RÉGLAGES DE TAILLE À CHANGER ▼▼▼ */
    /* Valeurs EXACTES de la maquette Figma (frame 1440 × 1218, cercle 1828) :
       le cercle (1828) est plus grand que la fenêtre → rogné en haut/bas/droite
       (= « Clip content »). Ratios à 1440 : 1828/1440 = 127vw | 1218/1440 = 84.6vw. */
    /* IMPORTANT : garder le ratio hauteur ÷ diamètre = 0.666 (Figma 1218/1828)
       pour que tous les visages restent cadrés. Si tu changes l'un, change l'autre :
       diamètre = hauteur / 0.666. Ici hauteur 920 → diamètre ≈ 1380. */
    --diameter: min(96vw, 1380px);    /* (1) cercle (réduit en gardant le ratio) */
    --thickness: min(14vw, 200px);    /* (4) ÉPAISSEUR de l'anneau (slices uniquement) */
    /* ▲▲▲ tout le reste se calcule tout seul à partir de ça ▲▲▲ */

    flex: 1;
    position: relative;
    height: min(64vw, 920px);   /* (3) fenêtre de clip (= 0.666 × diamètre) */
    overflow: hidden;              /* coupe tout ce qui dépasse (le « Clip content » de Figma) */
}

.hero__arc {
    position: absolute;
    width: var(--diameter);
    height: var(--diameter);
    /* -(diamètre/2) = centre sur le bord droit. Le « + 4vw » décale le cercle
       un peu vers la gauche (augmente la valeur pour décaler davantage). */
    right: calc(var(--diameter) / -2 + 4vw);
    top: 50%;
    transform: translateY(-50%);
}

/* Au-delà de 1440px : le contenu reste dans la boîte 1440 (centrée), mais le
   visuel déborde jusqu'au bord droit de l'écran → cercle plaqué à droite,
   moitié visible, comme avant le max-width. */
@media (min-width: 1441px) {
    .hero__visual {
        margin-right: calc((100vw - 1440px) / -2);
    }
}

/* ─── DESKTOP : une seule image (l'anneau complet) en FOND de .hero__arc ───
   On stylise .hero__arc (déjà présent dans le markup, donc robuste même si le
   template est servi depuis la base WordPress) et on masque les 5 slices. */
.hero__arc {
    background-image: url('../../assets/img/hero/hero-cercle.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.hero__arc .hero__slice { display: none; }   /* desktop : slices masquées */

/* ───────────────────────────────────────────────────────────────────
   STYLE COMMUN À TOUTES LES PHOTOS (ne pas toucher sauf l'anneau)
   Chaque photo remplit tout le cercle, puis 2 MASQUES la découpent :
     • --wedge  = la part de tarte (l'angle)   → variables --start / --span
     • --ring   = l'anneau (le trou au centre) → variables --inner / --outer
   Les 2 combinés (mask-composite: intersect) = un secteur d'anneau.
   ─────────────────────────────────────────────────────────────────── */
.hero__slice {
    position: absolute;
    inset: 0;                      /* la photo couvre tout le cercle */
    background-color: #e5e5e5;     /* gris si l'image ne charge pas */
    background-repeat: no-repeat;
    /* TAILLE solidaire du diamètre (même unité vw que la géométrie) → plus de
       dérive du cadrage selon la largeur d'écran. Réglage par photo via --zoom.
       --zoom mini = max(1, largeur/hauteur de l'image) pour couvrir le carré :
         portrait 2:3 → 1   |   paysage 3:2 → 1.5  (monter un peu = plus de jeu) */
    background-size: calc(var(--diameter) * var(--zoom, 1));

    /* Valeurs PAR DÉFAUT (chaque slice peut les remplacer en dessous) */
    --start: 0deg;   /* angle de départ */
    --span: 51deg;   /* largeur en degrés */
    /* L'anneau se calcule depuis --diameter et --thickness (définis sur .hero__visual) */
    --outer: calc(var(--diameter) / 2);          /* bord extérieur = bord du cercle */
    --inner: calc(var(--outer) - var(--thickness)); /* bord intérieur */

    /* ↓↓↓ Mécanique du masque — pas besoin d'y toucher ↓↓↓ */
    --wedge: conic-gradient(from var(--start), #000 0 var(--span), #0000 var(--span));
    --ring: radial-gradient(circle,
        #0000 0 calc(var(--inner) - 1px),
        #000 var(--inner) calc(var(--outer) - 1px),
        #0000 var(--outer));
    -webkit-mask: var(--wedge), var(--ring);
    -webkit-mask-composite: source-in;
    mask: var(--wedge), var(--ring);
    mask-composite: intersect;
}

/* ───────────────────────────────────────────────────────────────────
   RÉGLAGE DE CHAQUE PHOTO — 3 leviers :
     --start              → DÉPLACE la photo autour du cercle
     --span               → ÉLARGIT / rétrécit la photo (en degrés)
     background-position  → CADRE le visage dans le secteur (x% y%)
                            (x: 0%=gauche 100%=droite | y: 0%=haut 100%=bas)
   Astuce : laisse ~3° de vide entre 2 photos = le trait blanc qui les sépare
   ─────────────────────────────────────────────────────────────────── */

/* Cadrage d'origine (celui de la maquette) restauré. La taille n'est plus en
   px figés mais en --zoom relatif au diamètre → même cadrage à toutes les
   largeurs, sans dérive. (--zoom = ancienne_taille_px / 864, à la réf 1440) */

/* Homme (haut-gauche) */
.hero__slice--1 {
    background-image: url('../../assets/img/hero/hero-1.jpg');
    background-position: 0% 16%;
    --zoom: 0.574;
    --start: 289deg;
    --span: 31deg;
}
/* Femme aux tresses (en haut) */
.hero__slice--2 {
    background-image: url('../../assets/img/hero/hero-2.jpg');
    background-position: 25% -24%;
    --zoom: 0.574;
    --start: 323deg;
    --span: 31deg;
}
/* Femme blazer beige (gauche) — paysage */
.hero__slice--3 {
    background-image: url('../../assets/img/hero/hero-3.jpg');
    background-position: -15% 50%;
    --zoom: 0.671;
    --start: 255deg;
    --span: 31deg;
}
/* Femme casque orange (gauche bas) */
.hero__slice--4 {
    background-image: url('../../assets/img/hero/hero-4.jpg');
    background-position: -12% 84%;
    --zoom: 0.671;
    --start: 221deg;
    --span: 31deg;
}
/* Homme cravate rouge (bas-gauche) */
.hero__slice--5 {
    background-image: url('../../assets/img/hero/hero-5.jpg');
    background-position: 19% 144%;
    --zoom: 0.574;
    --start: 187deg;
    --span: 31deg;
}

/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .hero {
        padding: 60px 0 60px 60px;
    }

    .hero__content {
        flex: 0 0 400px;
    }

    .hero__title {
        font-size: 52px;
    }

    .hero__subtitle {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    /* column-reverse : le VISUEL passe en haut, le contenu en dessous (cf. wireframe) */
    .hero {
        flex-direction: column-reverse;
        align-items: center;
        padding: 32px 24px 56px;
        min-height: auto;
        overflow: visible;
        gap: 32px;
    }

    .hero__content {
        flex: none;
        width: 80%;            /* largeur de contenu (relative à l'écran) */
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 0;
    }

    .hero__title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .hero__subtitle {
        max-width: 100%;
        font-size: 16px;
        margin: 0 auto 28px;
    }

    /* Les deux boutons regroupés et centrés */
    .hero__buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
    }

    .hero__btn {
        flex: 0 1 auto;        /* largeur = celle du texte (pas d'étirement égal) */
    }

    .hero__btn .wp-block-button__link {
        padding: 11px 16px;
        font-size: 13px;
        text-align: center;
        white-space: nowrap;   /* « Un métier, mon parcours » reste sur une ligne */
    }

    /* Mobile : on enlève l'image de fond et on réaffiche le système de slices */
    .hero__arc { background-image: none; }
    .hero__arc .hero__slice { display: block; }

    /* Cercle COMPLET, centré horizontalement en haut */
    .hero__visual {
        --diameter: 260px;   /* taille du cercle sur mobile */
        --thickness: 56px;   /* épaisseur de l'anneau */
        flex: none;          /* sinon flex:1 (basis 0) écrase la hauteur → chevauchement */
        width: 100%;
        height: var(--diameter);
        overflow: visible;
    }

    .hero__arc {
        width: var(--diameter);
        height: var(--diameter);
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);   /* centré */
    }

    /* ÉCHELLE des photos. Doit rester > diamètre (260px) sinon la photo ne
       couvre plus l'anneau → gris. 280px = zoom minimal qui couvre encore.
       (↑ = plus zoomé / ↓ = plus dézoomé, plancher ~270px) */
    .hero__slice {
        background-size: 256px;
    }

    /* ANNEAU ENTIER : 5 photos réparties sur 360° (~69° + 3° d'écart).
       3 leviers par photo, à régler ci-dessous :
         --start              → DÉPLACE la photo autour du cercle (0=haut, 90=droite, 180=bas, 270=gauche)
         --span               → ÉLARGIT / rétrécit la photo (en degrés)
         background-position   → RECADRE le visage (x: 0%=gauche 100%=droite | y: 0%=haut 100%=bas)
       (background-size juste au-dessus = zoom commun à toutes ; on peut aussi le
        surcharger photo par photo si une seule a besoin d'être plus zoomée) */
    .hero__visual .hero__slice--1 {
        --start: 0deg;   --span: 69deg;
        background-position: 2287% 50%;
        
    }
    .hero__visual .hero__slice--2 {
        --start: 72deg;  --span: 69deg;
        background-position: 2409% 23%;
    }
    .hero__visual .hero__slice--3 {
        --start: 144deg; --span: 69deg;
        background-position: 125% 211%;
    }
    .hero__visual .hero__slice--4 {
        --start: 216deg; --span: 69deg;
        background-position: -2394% 109%;
    }
    .hero__visual .hero__slice--5 {
        --start: 288deg; --span: 69deg;
        background-position: -1759% 78%;
    }
}