/* ════════════════════════════════════════════════════════════════════
   PAGE D'ACCUEIL — sections reconstruites
   Les sections natives d'Elementor (ouverture, étapes, « en mieux »,
   avis) sont refaites ici d'après les mesures de la page en ligne à
   1440 px. Les blocs HTML d'origine sont insérés tels quels (@bloc).
   ════════════════════════════════════════════════════════════════════ */

.acc-pill {
    display: inline-block;
    padding: 9px 15px;
    border: 1px solid var(--site-bleu);
    border-radius: 40px;
    color: var(--site-bleu);
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
}

.acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 5px 5px 5px 30px;
    border-radius: 500px;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.acc-btn:hover { transform: translateY(-2px); }

.acc-btn-icone {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.acc-btn--plein { background: var(--site-bleu); color: #fff; }
.acc-btn--plein .acc-btn-icone { background: #fff; color: var(--site-bleu); }
/* mêmes cotes que l'original : 280 × 63 px, flèche bleue sans pastille */
.acc-btn--contour { padding: 5px 12px 2px 37px; border: 3px solid #061DF0; background: #fff; color: #061DF0; }
.acc-btn--contour .acc-btn-icone { background: #fff; color: var(--site-bleu); }

/* Enveloppe des blocs HTML d'origine (conteneur Elementor : 1320 px + 10 px) */
.acc-bloc {
    max-width: 1340px;
    margin: 0 auto;
    padding: 10px;
    /* Les conteneurs Elementor redéfinissent --height à « auto » : le carrousel
       des modèles (bloc 1), qui déclare --height: 550px à la racine, prenait
       donc en ligne sa hauteur naturelle. Même comportement ici. */
    --height: auto;
}
.acc-bloc--bas { padding-bottom: 54px; }

/* ─── 1. Ouverture ────────────────────────────────────────────────── */
.acc-ouverture {
    position: relative;
    overflow: hidden;
    padding-top: 60px;
    background: url('/wp-content/uploads/2025/06/banner-bg-1.webp') 0 0 / cover no-repeat;
}

.acc-ouverture-inner {
    position: relative;
    max-width: 1296px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.acc-ouverture h1 {
    max-width: 791px;
    margin: 15px auto 0;
    font-family: var(--site-titres);
    font-size: 60px;
    font-weight: 700;
    line-height: 72px;
    color: #000;
}

.acc-ouverture .acc-pill { text-transform: uppercase; }

.acc-sous-titre {
    max-width: 791px;
    margin: 39px auto 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    color: #484848;
}

.acc-actions {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    margin-top: 44px;
}

.acc-actions-colonne { position: relative; }

/* sous le bouton, hors du flux comme dans l'original : la rangée garde ses 63 px */
.acc-actions-note {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 1px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 16px;
    line-height: 26px;
    color: #484848;
}

.acc-video {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border: 2px solid var(--site-bleu);
    border-radius: 50%;
    background: #fff;
    color: var(--site-bleu);
    cursor: pointer;
    transition: transform .2s;
}

.acc-video:hover { transform: scale(1.06); }

.acc-ouverture-scene {
    position: relative;
    height: 616px;
    margin: -35px -20px 0;   /* la scène s'étend sur les 1296 px du conteneur d'origine */
}

.acc-illustration {
    position: absolute;
    z-index: 1;
    /* 400 px, même centre que l'original (qui la fait tourner sur elle-même) */
    top: -225px;
    right: 8px;
    width: 400px;
    pointer-events: none;
}

.acc-groupe {
    position: absolute;
    z-index: 2;
    left: 17px;
    bottom: 0;
    width: 1263px;
    max-width: calc(100% - 17px);
}

.acc-forme {
    position: absolute;
    z-index: 1;
    left: -57px;
    bottom: -110px;
    width: 264px;
    pointer-events: none;
}

.acc-bulle {
    position: absolute;
    z-index: 3;
    width: 165px;
    pointer-events: none;
}

.acc-bulle--1 { left: 217px; top: 54px; }
.acc-bulle--2 { left: 364px; top: 141px; }

/* ─── 2. Comment faire son CV ─────────────────────────────────────── */
/* Cotes de l'original : bloc à 100 px des bords (coins de 100 px, 140 px en haut
   et en bas), contenu de 1320 px au plus en deux colonnes ; celle de gauche reste
   en place au défilement, les cartes défilent normalement. */
.acc-etapes {
    margin: 0 100px 54px;
    padding: 140px 0;
    border-radius: 100px;
    background: url('/wp-content/uploads/2025/06/service-bg-2.webp') 0 0 / cover no-repeat, #F3F1FF;
}

.acc-etapes-grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 12px;
}

.acc-etapes-intro {
    position: sticky;
    top: 100px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.acc-etapes-intro .acc-pill { margin-bottom: 20px; text-transform: capitalize; }

.acc-etapes-intro h2 {
    margin: 0 0 15px;
    font-family: var(--site-titres);
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
}

.acc-etapes-intro p { margin: 0; font-size: 16px; line-height: 26px; color: #484848; }
.acc-etapes-intro img { display: block; width: 480px; max-width: 100%; margin-top: 24px; }

.acc-etapes-cartes { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding-bottom: 10px; }

.acc-etape {
    padding: 60px;
    border: 1px solid #E1E1E2;
    border-radius: 20px;
    background: #F4F1FF;
}

.acc-etape-icone { display: block; margin-bottom: 20px; }

.acc-etape h3 {
    margin: 0 0 15px;
    font-family: var(--site-titres);
    font-size: 30px;
    font-weight: 700;
    line-height: 42px;
    color: #000;
}

.acc-etape p { margin: 0 0 24px; font-size: 16px; line-height: 28px; color: #484848; }
.acc-etape .acc-btn { background: #fff; color: #000; text-transform: capitalize; }
.acc-etape .acc-btn-icone { background: var(--site-bleu); color: #fff; }

@media (min-width: 768px) {
    .acc-etapes-intro h2 { font-size: 40px; line-height: 52px; }
}

@media (min-width: 1200px) {
    .acc-etapes-intro h2 { margin-bottom: 30px; font-size: 50px; line-height: 62px; }
}

@media (max-width: 1024px) {
    .acc-etapes { margin: 0 0 54px; padding: 70px 0; border-radius: 0; }
    .acc-etapes-intro img { display: none; }   /* masquée aussi dans l'original */
}

@media (max-width: 767px) {
    .acc-etapes-grille { grid-template-columns: 1fr; }
    .acc-etapes-intro { position: static; }
    .acc-etape { padding: 40px; }
}

/* Titres qui se colorent au défilement (accueil.js règle --rempli) : 30 % d'opacité
   au départ, comme les lettres de l'original */
.acc-titre-rempli {
    background: linear-gradient(90deg, var(--titre-plein) var(--rempli, 100%), var(--titre-vide) var(--rempli, 100%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.acc-etapes-intro h2 { --titre-plein: #000; --titre-vide: rgba(0, 0, 0, .3); }

/* ─── 3. Votre CV, en mieux ───────────────────────────────────────── */
/* Règles de l'original (thème Techly + réglages Elementor de la page),
   avec ses paliers : 1200 px pour l'accordéon, 1025 et 768 px pour le reste. */
.acc-mieux {
    position: relative;
    overflow: hidden;
    padding: 70px 12px;
    background: linear-gradient(180deg, #06113F 0%, #1432BE 100%);
    color: #fff;
}

/* En-tête : texte aligné à gauche ; 24 px d'écart avec l'accordéon */
.acc-mieux-tete { margin: 0 auto 24px; }

.acc-mieux-tete h2 {
    margin: 0 0 15px;
    font-family: var(--site-titres);
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    --titre-plein: #fff;
    --titre-vide: rgba(255, 255, 255, .3);
}

.acc-mieux-tete p { margin: 0; font-size: 16px; line-height: 26px; color: #fff; }

.acc-accordeon {
    position: relative;
    z-index: 2;
    display: flow-root;   /* la marge du dernier volet reste à l'intérieur, comme dans l'original */
    max-width: 1296px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* Volets empilés sous 1200 px, côte à côte au-delà */
.acc-volet {
    position: relative;
    z-index: 1;   /* contexte d'empilement : le disque décoratif passe sous le texte */
    overflow: hidden;
    margin-bottom: 24px;
    padding: 30px;
    border-radius: 30px;
    background: #F3F7FF;
    color: #000;
}

.acc-volet::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -60%;
    bottom: -50%;
    width: 475px;
    height: 475px;
    border-radius: 50%;
    background: #EAF1FF;
}

.acc-volet h3 {
    margin: 0 0 15px;
    font-family: var(--site-titres);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.acc-volet p {
    margin: 0 0 15px;
    font-size: 16px;
    line-height: 26px;
    color: #484848;
    transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1);
}

.acc-volet.ouvert p { transform: translateY(-10px); }

.acc-volet .acc-btn {
    gap: 20px;
    padding-left: 20px;
    border: 1px solid #000;
    color: #000;
    text-transform: capitalize;
}

.acc-volet .acc-btn:hover { border-color: var(--site-bleu); }
.acc-volet .acc-btn-icone { width: 45px; height: 45px; background: #0F53F3; color: #fff; }

/* Image : sous le texte sur téléphone, à droite au-delà */
.acc-volet-image {
    margin-top: 40px;
    transition: opacity .3s cubic-bezier(.2, .8, .2, 1), transform .3s cubic-bezier(.2, .8, .2, 1);
}

.acc-volet.ouvert .acc-volet-image { transform: scale(1.05); }
.acc-volet-image img { border-radius: 30px; object-fit: cover; }

.acc-mieux-cta { position: relative; z-index: 2; margin-top: 24px; text-align: center; }
.acc-mieux-cta .acc-btn { gap: 20px; background: #0F53F3; color: #fff; text-transform: capitalize; }
.acc-mieux-cta .acc-btn-icone { background: #fff; color: #000; }

/* Sous l'accordéon, ancrée en bas à gauche ; masquée sur téléphone comme l'original */
.acc-mieux-illustration {
    position: absolute;
    z-index: 1;
    left: 25px;
    bottom: 35px;
    width: 330px;
    pointer-events: none;
}

@media (max-width: 767px) {
    .acc-mieux-illustration { display: none; }
}

/* Volets empilés : l'image prend la largeur de son cadre (au-delà, ses 240 px d'origine) */
@media (max-width: 1199px) {
    .acc-volet-image img { width: 100%; }
}

@media (min-width: 768px) {
    .acc-mieux-tete h2 { font-size: 40px; line-height: 52px; }
    .acc-volet p { margin-bottom: 80px; }
    .acc-volet-texte { width: 250px; }
    .acc-volet-image { position: absolute; top: 30px; right: 30px; bottom: 30px; margin-top: 0; }
}

@media (min-width: 1025px) {
    .acc-mieux { padding: 130px 12px 140px; }
    .acc-mieux-tete { width: 50%; max-width: 648px; }
}

@media (min-width: 1200px) {
    .acc-mieux-tete { margin-bottom: 74px; }   /* 50 px de marge + 24 px d'écart */
    .acc-mieux-tete h2 { margin-bottom: 30px; font-size: 50px; line-height: 62px; }

    .acc-accordeon { display: flex; gap: 24px; }
    /* base nulle + marge intérieure de 30 px : 594 px pour le volet ouvert, 327 px pour les autres */
    .acc-volet { flex: 1 1 0; margin-bottom: 0; cursor: pointer; transition: flex-grow .45s ease; }
    .acc-volet.ouvert { flex-grow: 2; cursor: default; }
    .acc-volet-texte { width: 290px; }
    .acc-volet p, .acc-volet-image { opacity: 0; }
    .acc-volet.ouvert p, .acc-volet.ouvert .acc-volet-image { opacity: 1; }

    .acc-mieux-cta { margin-top: 44px; }   /* 24 px d'écart + 20 px de marge */
}

/* ─── 4. Avis (affichés seulement s'il y a de vrais avis) ─────────── */
.acc-sans-avis { height: 100px; }

.acc-avis { max-width: 1296px; margin: 100px auto 0; padding: 0 20px; }

.acc-avis-tete { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.acc-avis-tete h2 { margin: 0 0 16px; font-family: var(--site-titres); font-size: 50px; font-weight: 700; line-height: 60px; }
.acc-avis-tete p { margin: 0; color: #484848; }

.acc-avis-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 50px 0 0;
    padding: 0;
    list-style: none;
}

.acc-avis-carte {
    padding: 30px 26px;
    border-radius: 18px;
    background: #F4F7FF;
    text-align: center;
}

.acc-avis-etoiles { color: #F59E0B; font-size: 20px; letter-spacing: 3px; }
.acc-avis-carte blockquote { margin: 14px 0 20px; font-size: 15px; line-height: 24px; color: #333; }
.acc-avis-carte img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.acc-avis-nom { margin: 8px 0 0; font-weight: 700; }
.acc-avis-role { margin: 2px 0 0; font-size: 14px; color: #64748B; }

/* ─── Vidéo (ouverte au clic : YouTube n'est chargé qu'à ce moment) ─ */
.acc-modale {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: 20px;
    background: rgba(2, 6, 23, .82);
}

.acc-modale.ouverte { display: grid; }
.acc-modale-cadre { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; }
.acc-modale iframe { width: 100%; height: 100%; border: 0; border-radius: 14px; }

.acc-modale-fermer {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    color: #0F172A;
    font-size: 22px;
    cursor: pointer;
}

/* ─── Tablette et mobile ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* tablette : comme l'original, 180 px au-dessus et un titre de 791 px centré
       (il dépasse un peu de l'écran, qui le rogne) */
    .acc-ouverture { padding-top: 180px; }
    .acc-ouverture h1 { width: 791px; max-width: none; margin-left: calc(50% - 395.5px); font-size: 50px; line-height: 62px; }
    .acc-illustration, .acc-bulle, .acc-forme { display: none; }   /* masqués aussi dans l'original */
    .acc-ouverture-scene { height: auto; margin: 24px -8px 0; }
    .acc-groupe { display: block; position: static; width: 100%; max-width: 100%; }


    .acc-avis-tete { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .acc-avis-tete h2 { font-size: 34px; line-height: 42px; }
}

/* ─── Ouverture sur téléphone ─────────────────────────────────────── */
@media (max-width: 767px) {
    .acc-ouverture { padding-top: 80px; }
    .acc-ouverture h1 { width: auto; margin-left: auto; font-size: 40px; line-height: 52px; }
    .acc-sous-titre { margin-left: -20px; margin-right: -20px; }   /* toute la largeur, comme l'original */
    .acc-actions { flex-wrap: wrap; margin-left: -20px; margin-right: -20px; }   /* rangée sur toute la largeur */
    .acc-actions-note { display: none; }   /* placée hors de l'écran dans l'original */
}